ece-docs-components 1.0.5 → 1.0.7

package/dist/cjs/components/Modal.js

@@ -0,0 +1,114 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var material = require('@mui/material');
+var Button = require('./Button.js');
+var iconsMaterial = require('@mui/icons-material');
+
+const StyledDialog = material.styled(material.Dialog)(({ theme }) => ({
+    '& .MuiDialog-paper': {
+        borderRadius: theme.shape.borderRadius,
+        maxWidth: '896px',
+        width: '100%',
+        maxHeight: '90vh',
+    },
+}));
+const NavButton = material.styled(material.IconButton)(({ theme }) => ({
+    width: '40px',
+    height: '40px',
+    border: `2px solid ${theme.palette.dark.main}`,
+    backgroundColor: theme.palette.light.main,
+    '&:hover': {
+        backgroundColor: theme.palette.dark.main,
+        color: theme.palette.light.main,
+    },
+}));
+const Modal = ({ isOpen, onClose, status, description, defaultText, note, acceptSuggestion: initialAcceptSuggestion = true, onAcceptSuggestionChange, onSave, onSubmit, onDeclineWording, onPrevious, onNext, currentPage = 1, totalPages = 1, }) => {
+    const [textValue, setTextValue] = React.useState(defaultText);
+    const [acceptSuggestion, setAcceptSuggestion] = React.useState(initialAcceptSuggestion);
+    const statusConfig = {
+        mandatory: {
+            color: '#F5A623',
+            label: 'Mandatory',
+        },
+        optional: {
+            color: '#F5D76E',
+            label: 'Optional',
+        },
+        accepted: {
+            color: '#A3D977',
+            label: 'Accepted',
+        },
+        'action-required': {
+            color: '#F56B6B',
+            label: 'Action Required',
+        },
+        'action-required-note': {
+            color: '#F56B6B',
+            label: 'Action Required',
+        },
+        'accepted-note': {
+            color: '#A3D977',
+            label: 'Accepted',
+        },
+    };
+    const statusStyle = statusConfig[status];
+    return (jsxRuntime.jsxs(StyledDialog, { open: isOpen, onClose: onClose, maxWidth: "md", fullWidth: true, children: [jsxRuntime.jsx(material.IconButton, { onClick: onClose, sx: {
+                    position: 'absolute',
+                    top: 16,
+                    right: 16,
+                    zIndex: 1,
+                }, children: jsxRuntime.jsx(iconsMaterial.CloseRounded, { sx: { fontSize: 24 } }) }), jsxRuntime.jsxs(material.DialogContent, { sx: { p: { xs: 3, sm: 4, md: 6 } }, children: [jsxRuntime.jsx(material.Box, { sx: { mb: 3 }, children: jsxRuntime.jsx(material.Chip, { label: statusStyle.label, sx: {
+                                backgroundColor: statusStyle.color,
+                                color: status === 'optional' ? '#4D3019' : '#fff',
+                                fontWeight: 600,
+                                fontSize: '0.875rem',
+                                height: 'auto',
+                                py: 1,
+                                px: 2,
+                            } }) }), jsxRuntime.jsx(material.Typography, { sx: { mb: 3, lineHeight: 1.6 }, children: description }), status === 'action-required-note' && note && (jsxRuntime.jsx(material.Alert, { icon: jsxRuntime.jsx(iconsMaterial.ErrorOutlineRounded, { sx: { fontSize: 20 } }), severity: "error", sx: {
+                            mb: 2,
+                            backgroundColor: '#FFE6E6',
+                            borderLeft: '4px solid #F56B6B',
+                            '& .MuiAlert-icon': {
+                                color: '#F56B6B',
+                            },
+                            '& .MuiAlert-message': {
+                                color: '#4D3019',
+                            },
+                        }, children: note })), status === 'accepted-note' && note && (jsxRuntime.jsx(material.Alert, { icon: jsxRuntime.jsx(iconsMaterial.StickyNote2Rounded, { sx: { fontSize: 20 } }), severity: "warning", sx: {
+                            mb: 2,
+                            backgroundColor: '#FFF9E6',
+                            borderLeft: '4px solid #F5D76E',
+                            '& .MuiAlert-icon': {
+                                color: '#F5A623',
+                            },
+                            '& .MuiAlert-message': {
+                                color: '#4D3019',
+                            },
+                        }, children: note })), jsxRuntime.jsx(material.TextField, { multiline: true, rows: 4, fullWidth: true, value: textValue, onChange: (e) => setTextValue(e.target.value), disabled: acceptSuggestion, sx: {
+                            mb: 2,
+                            '& .MuiOutlinedInput-root': {
+                                backgroundColor: acceptSuggestion ? 'rgba(0, 0, 0, 0.05)' : '#fff',
+                            },
+                        } }), jsxRuntime.jsxs(material.Box, { sx: {
+                            display: 'flex',
+                            flexDirection: { xs: 'column', sm: 'row' },
+                            alignItems: { xs: 'stretch', sm: 'center' },
+                            justifyContent: 'space-between',
+                            gap: 2,
+                            pt: 3,
+                            borderTop: '1px solid',
+                            borderColor: 'divider',
+                        }, children: [jsxRuntime.jsxs(material.Box, { sx: { display: 'flex', gap: 1.5 }, children: [jsxRuntime.jsx(Button.Button, { onClick: onSave, variant: "secondary", size: "md", children: "Save" }), jsxRuntime.jsx(Button.Button, { onClick: onSubmit, variant: "primary", size: "md", children: "Submit for review" }), jsxRuntime.jsx(Button.Button, { onClick: onDeclineWording, variant: "danger", size: "md", children: "Decline Wording" })] }), jsxRuntime.jsxs(material.Box, { sx: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: 2,
+                                    justifyContent: { xs: 'space-between', sm: 'flex-end' },
+                                }, children: [jsxRuntime.jsxs(material.Box, { sx: { display: 'flex', gap: 1.5 }, children: [jsxRuntime.jsx(NavButton, { onClick: onPrevious, "aria-label": "Previous", children: jsxRuntime.jsx(iconsMaterial.ChevronLeftRounded, { sx: { fontSize: 20 } }) }), jsxRuntime.jsx(NavButton, { onClick: onNext, "aria-label": "Next", children: jsxRuntime.jsx(iconsMaterial.ChevronRightRounded, { sx: { fontSize: 20 } }) })] }), jsxRuntime.jsxs(material.Typography, { fontWeight: 500, fontSize: "1.125rem", sx: { ml: 1 }, children: [currentPage, "/", totalPages] })] })] })] })] }));
+};
+
+exports.Modal = Modal;
+//# sourceMappingURL=Modal.js.map

package/dist/cjs/components/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sources":["../../../../src/components/Modal.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState } from 'react';\nimport {\n  Dialog,\n  DialogContent,\n  IconButton,\n  Box,\n  Typography,\n  TextField,\n  Checkbox,\n  FormControlLabel,\n  Alert as MuiAlert,\n  Chip,\n  styled,\n} from '@mui/material';\nimport { Button } from './Button';\nimport { ChevronLeftRounded, ChevronRightRounded, CloseRounded, ErrorOutlineRounded, StickyNote2Rounded } from '@mui/icons-material';\n\ninterface ModalProps {\n  isOpen: boolean;\n  onClose: () => void;\n  status: 'mandatory' | 'optional' | 'accepted' | 'action-required' | 'action-required-note' | 'accepted-note';\n  description: string;\n  defaultText: string;\n  note?: string;\n  acceptSuggestion?: boolean;\n  onAcceptSuggestionChange?: (checked: boolean) => void;\n  onSave?: () => void;\n  onSubmit?: () => void;\n  onDeclineWording?: () => void;\n  onPrevious?: () => void;\n  onNext?: () => void;\n  currentPage?: number;\n  totalPages?: number;\n}\n\nconst StyledDialog = styled(Dialog)(({ theme }) => ({\n  '& .MuiDialog-paper': {\n    borderRadius: theme.shape.borderRadius,\n    maxWidth: '896px',\n    width: '100%',\n    maxHeight: '90vh',\n  },\n}));\n\nconst NavButton = styled(IconButton)(({ theme }) => ({\n  width: '40px',\n  height: '40px',\n  border: `2px solid ${theme.palette.dark.main}`,\n  backgroundColor: theme.palette.light.main,\n  '&:hover': {\n    backgroundColor: theme.palette.dark.main,\n    color: theme.palette.light.main,\n  },\n}));\n\nexport const Modal: React.FC<ModalProps> = ({\n  isOpen,\n  onClose,\n  status,\n  description,\n  defaultText,\n  note,\n  acceptSuggestion: initialAcceptSuggestion = true,\n  onAcceptSuggestionChange,\n  onSave,\n  onSubmit,\n  onDeclineWording,\n  onPrevious,\n  onNext,\n  currentPage = 1,\n  totalPages = 1,\n}) => {\n  const [textValue, setTextValue] = useState(defaultText);\n  const [acceptSuggestion, setAcceptSuggestion] = useState(initialAcceptSuggestion);\n\n  const handleAcceptSuggestionChange = (checked: boolean) => {\n    setAcceptSuggestion(checked);\n    onAcceptSuggestionChange?.(checked);\n  };\n\n  const statusConfig = {\n    mandatory: {\n      color: '#F5A623',\n      label: 'Mandatory',\n    },\n    optional: {\n      color: '#F5D76E',\n      label: 'Optional',\n    },\n    accepted: {\n      color: '#A3D977',\n      label: 'Accepted',\n    },\n    'action-required': {\n      color: '#F56B6B',\n      label: 'Action Required',\n    },\n    'action-required-note': {\n      color: '#F56B6B',\n      label: 'Action Required',\n    },\n    'accepted-note': {\n      color: '#A3D977',\n      label: 'Accepted',\n    },\n  };\n\n  const statusStyle = statusConfig[status];\n\n  return (\n    <StyledDialog open={isOpen} onClose={onClose} maxWidth=\"md\" fullWidth>\n      <IconButton\n        onClick={onClose}\n        sx={{\n          position: 'absolute',\n          top: 16,\n          right: 16,\n          zIndex: 1,\n        }}\n      >\n        <CloseRounded sx={{fontSize:24}} />\n      </IconButton>\n\n      <DialogContent sx={{ p: { xs: 3, sm: 4, md: 6 } }}>\n        <Box sx={{ mb: 3 }}>\n          <Chip\n            label={statusStyle.label}\n            sx={{\n              backgroundColor: statusStyle.color,\n              color: status === 'optional' ? '#4D3019' : '#fff',\n              fontWeight: 600,\n              fontSize: '0.875rem',\n              height: 'auto',\n              py: 1,\n              px: 2,\n            }}\n          />\n        </Box>\n\n        <Typography sx={{ mb: 3, lineHeight: 1.6 }}>\n          {description}\n        </Typography>\n\n        {status === 'action-required-note' && note && (\n          <MuiAlert\n            icon={<ErrorOutlineRounded sx={{fontSize:20}} />}\n            severity=\"error\"\n            sx={{\n              mb: 2,\n              backgroundColor: '#FFE6E6',\n              borderLeft: '4px solid #F56B6B',\n              '& .MuiAlert-icon': {\n                color: '#F56B6B',\n              },\n              '& .MuiAlert-message': {\n                color: '#4D3019',\n              },\n            }}\n          >\n            {note}\n          </MuiAlert>\n        )}\n\n        {status === 'accepted-note' && note && (\n          <MuiAlert\n            icon={<StickyNote2Rounded sx={{fontSize:20}} />}\n            severity=\"warning\"\n            sx={{\n              mb: 2,\n              backgroundColor: '#FFF9E6',\n              borderLeft: '4px solid #F5D76E',\n              '& .MuiAlert-icon': {\n                color: '#F5A623',\n              },\n              '& .MuiAlert-message': {\n                color: '#4D3019',\n              },\n            }}\n          >\n            {note}\n          </MuiAlert>\n        )}\n\n        <TextField\n          multiline\n          rows={4}\n          fullWidth\n          value={textValue}\n          onChange={(e) => setTextValue(e.target.value)}\n          disabled={acceptSuggestion}\n          sx={{\n            mb: 2,\n            '& .MuiOutlinedInput-root': {\n              backgroundColor: acceptSuggestion ? 'rgba(0, 0, 0, 0.05)' : '#fff',\n            },\n          }}\n        />\n\n        <Box\n          sx={{\n            display: 'flex',\n            flexDirection: { xs: 'column', sm: 'row' },\n            alignItems: { xs: 'stretch', sm: 'center' },\n            justifyContent: 'space-between',\n            gap: 2,\n            pt: 3,\n            borderTop: '1px solid',\n            borderColor: 'divider',\n          }}\n        >\n          <Box sx={{ display: 'flex', gap: 1.5 }}>\n            <Button onClick={onSave} variant=\"secondary\" size=\"md\">\n              Save\n            </Button>\n            <Button onClick={onSubmit} variant=\"primary\" size=\"md\">\n              Submit for review\n            </Button>\n            <Button onClick={onDeclineWording} variant=\"danger\" size=\"md\">\n              Decline Wording\n            </Button>\n          </Box>\n\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              gap: 2,\n              justifyContent: { xs: 'space-between', sm: 'flex-end' },\n            }}\n          >\n            <Box sx={{ display: 'flex', gap: 1.5 }}>\n              <NavButton onClick={onPrevious} aria-label=\"Previous\">\n                <ChevronLeftRounded sx={{fontSize:20}} />\n              </NavButton>\n              <NavButton onClick={onNext} aria-label=\"Next\">\n                <ChevronRightRounded sx={{fontSize:20}} />\n              </NavButton>\n            </Box>\n            <Typography fontWeight={500} fontSize=\"1.125rem\" sx={{ ml: 1 }}>\n              {currentPage}/{totalPages}\n            </Typography>\n          </Box>\n        </Box>\n      </DialogContent>\n    </StyledDialog>\n  );\n};"],"names":[],"mappings":";;;;;;;;;AAqCA;AACE;AACE;AACA;AACA;AACA;AACD;AACF;AAED;AACE;AACA;;AAEA;AACA;AACE;AACA;AACD;AACF;;;;AA2BC;AACE;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;;AAGH;;AAOQ;AACA;AACA;AACA;;;;AAaI;AACA;AACA;AACA;AACA;;AAcA;AACA;AACA;AACA;AACE;AACD;AACD;AACE;AACD;AACF;AAWC;AACA;AACA;AACA;AACE;AACD;AACD;AACE;AACD;AACF;AAcD;AACA;;AAEC;AACF;AAKC;;;AAGA;AACA;AACA;AACA;AACA;AACD;AAgBG;AACA;AACA;;AAED;AAkBb;;"}

package/dist/cjs/components/NoteBox.js

@@ -0,0 +1,111 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var material = require('@mui/material');
+var iconsMaterial = require('@mui/icons-material');
+
+const NoteContainer = material.styled(material.Box)({
+    position: 'relative',
+    maxWidth: '100%',
+});
+const EditButton = material.styled(material.IconButton)(({ theme }) => ({
+    position: 'absolute',
+    right: -4,
+    top: '50%',
+    transform: 'translateY(-50%)',
+    width: 24,
+    height: 24,
+    backgroundColor: '#4D3019',
+    opacity: 0,
+    transition: 'all 0.2s ease',
+    boxShadow: '0 1px 3px rgba(0,0,0,0.12)',
+    '&:hover': {
+        backgroundColor: '#4D3019',
+        transform: 'translateY(-50%) scale(1.1)',
+    },
+}));
+const HighlightWrapper = material.styled(material.Box)(({ isHovered, highlightColor, highlightSelectedColor, isCustom }) => ({
+    position: 'relative',
+    display: 'inline-block',
+    maxWidth: '100%',
+    '&:hover .edit-button': {
+        opacity: 1,
+    },
+    '& .highlight-span': {
+        background: isCustom ? highlightColor : (isHovered ? highlightSelectedColor : highlightColor),
+        padding: '2px 4px',
+        boxDecorationBreak: 'clone',
+        WebkitBoxDecorationBreak: 'clone',
+        transition: isCustom ? 'none' : 'background 0.2s ease',
+        cursor: isCustom ? 'default' : 'pointer',
+        fontSize: '13px',
+        wordWrap: 'break-word',
+        overflowWrap: 'break-word',
+        display: 'inline',
+        color: '#4D3019',
+    },
+}));
+const NoteBox = ({ variant = 'default', label, children, className = '', onEditClick, }) => {
+    const [isHovered, setIsHovered] = React.useState(false);
+    const variants = {
+        default: {
+            highlight: '#FFEACD',
+            highlightSelected: '#FFC365',
+            label: '',
+            labelColor: '',
+        },
+        mandatory: {
+            highlight: '#FFEACD',
+            highlightSelected: '#FFC365',
+            label: 'Not Answered (Mandatory)',
+            labelColor: 'var(--color-secondary)',
+        },
+        optional: {
+            highlight: '#FFF6D1',
+            highlightSelected: '#FDE58E',
+            label: 'Not Answered (Optional)',
+            labelColor: 'var(--color-secondary)',
+        },
+        pending: {
+            highlight: '#F5E2FF',
+            highlightSelected: '#EBC7FF',
+            label: 'Pending',
+            labelColor: 'var(--color-secondary)',
+        },
+        accepted: {
+            highlight: '#EDF9CD',
+            highlightSelected: '#DBF59A',
+            label: 'Accepted',
+            labelColor: '#2D5016',
+        },
+        'action-required': {
+            highlight: '#FBEEEE',
+            highlightSelected: '#FFBCB3',
+            label: 'Action required before approval',
+            labelColor: '#CC0000',
+        },
+        custom: {
+            highlight: '#D9EDF8',
+            highlightSelected: '#B3E0F2',
+            label: 'Custom Text',
+            labelColor: 'var(--color-secondary)',
+        },
+    };
+    const style = variants[variant];
+    const displayLabel = label || style.label;
+    return (jsxRuntime.jsxs(NoteContainer, { className: className, children: [displayLabel && (jsxRuntime.jsx(material.Box, { sx: { mb: 1 }, children: jsxRuntime.jsx(material.Typography, { component: "span", sx: {
+                        fontSize: '13px',
+                        fontWeight: 500,
+                        color: style.labelColor || 'rgba(0, 0, 0, 0.6)',
+                    }, children: displayLabel }) })), jsxRuntime.jsxs(HighlightWrapper, { isHovered: isHovered, highlightColor: style.highlight, highlightSelectedColor: style.highlightSelected, isCustom: variant === 'custom', onMouseEnter: () => variant !== 'custom' && setIsHovered(true), onMouseLeave: () => variant !== 'custom' && setIsHovered(false), children: [jsxRuntime.jsx("span", { className: "highlight-span", children: children }), jsxRuntime.jsx(EditButton, { className: "edit-button", onClick: (e) => {
+                            e.stopPropagation();
+                            if (onEditClick) {
+                                onEditClick();
+                            }
+                        }, title: "Edit variable highlight", size: "small", children: jsxRuntime.jsx(iconsMaterial.EditRounded, { sx: { fontSize: 14, color: "#FFFFFF", strokeWidth: 2 } }) })] })] }));
+};
+
+exports.NoteBox = NoteBox;
+//# sourceMappingURL=NoteBox.js.map

package/dist/cjs/components/NoteBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NoteBox.js","sources":["../../../../src/components/NoteBox.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState } from 'react';\nimport { Box, Typography, IconButton, styled } from '@mui/material';\nimport { EditRounded } from '@mui/icons-material';\n\ninterface NoteBoxProps {\n  variant?: 'default' | 'mandatory' | 'optional' | 'pending' | 'accepted' | 'action-required' | 'custom';\n  label?: string;\n  children: React.ReactNode;\n  className?: string;\n  onEditClick?: () => void;\n}\n\nconst NoteContainer = styled(Box)({\n  position: 'relative',\n  maxWidth: '100%',\n});\n\nconst EditButton = styled(IconButton)(({ theme }) => ({\n  position: 'absolute',\n  right: -4,\n  top: '50%',\n  transform: 'translateY(-50%)',\n  width: 24,\n  height: 24,\n  backgroundColor: '#4D3019',\n  opacity: 0,\n  transition: 'all 0.2s ease',\n  boxShadow: '0 1px 3px rgba(0,0,0,0.12)',\n  '&:hover': {\n    backgroundColor: '#4D3019',\n    transform: 'translateY(-50%) scale(1.1)',\n  },\n}));\n\nconst HighlightWrapper = styled(Box)<{ \n  isHovered: boolean; \n  highlightColor: string; \n  highlightSelectedColor: string;\n  isCustom: boolean;\n}>(({ isHovered, highlightColor, highlightSelectedColor, isCustom }) => ({\n  position: 'relative',\n  display: 'inline-block',\n  maxWidth: '100%',\n  '&:hover .edit-button': {\n    opacity: 1,\n  },\n  '& .highlight-span': {\n    background: isCustom ? highlightColor : (isHovered ? highlightSelectedColor : highlightColor),\n    padding: '2px 4px',\n    boxDecorationBreak: 'clone',\n    WebkitBoxDecorationBreak: 'clone',\n    transition: isCustom ? 'none' : 'background 0.2s ease',\n    cursor: isCustom ? 'default' : 'pointer',\n    fontSize: '13px',\n    wordWrap: 'break-word',\n    overflowWrap: 'break-word',\n    display: 'inline',\n    color: '#4D3019',\n  },\n}));\n\nexport const NoteBox: React.FC<NoteBoxProps> = ({\n  variant = 'default',\n  label,\n  children,\n  className = '',\n  onEditClick,\n}) => {\n  const [isHovered, setIsHovered] = useState(false);\n\n  const variants = {\n    default: {\n      highlight: '#FFEACD',\n      highlightSelected: '#FFC365',\n      label: '',\n      labelColor: '',\n    },\n    mandatory: {\n      highlight: '#FFEACD',\n      highlightSelected: '#FFC365',\n      label: 'Not Answered (Mandatory)',\n      labelColor: 'var(--color-secondary)',\n    },\n    optional: {\n      highlight: '#FFF6D1',\n      highlightSelected: '#FDE58E',\n      label: 'Not Answered (Optional)',\n      labelColor: 'var(--color-secondary)',\n    },\n    pending: {\n      highlight: '#F5E2FF',\n      highlightSelected: '#EBC7FF',\n      label: 'Pending',\n      labelColor: 'var(--color-secondary)',\n    },\n    accepted: {\n      highlight: '#EDF9CD',\n      highlightSelected: '#DBF59A',\n      label: 'Accepted',\n      labelColor: '#2D5016',\n    },\n    'action-required': {\n      highlight: '#FBEEEE',\n      highlightSelected: '#FFBCB3',\n      label: 'Action required before approval',\n      labelColor: '#CC0000',\n    },\n    custom: {\n      highlight: '#D9EDF8',\n      highlightSelected: '#B3E0F2',\n      label: 'Custom Text',\n      labelColor: 'var(--color-secondary)',\n    },\n  };\n\n  const style = variants[variant];\n  const displayLabel = label || style.label;\n\n  return (\n    <NoteContainer className={className}>\n      {displayLabel && (\n        <Box sx={{ mb: 1 }}>\n          <Typography\n            component=\"span\"\n            sx={{\n              fontSize: '13px',\n              fontWeight: 500,\n              color: style.labelColor || 'rgba(0, 0, 0, 0.6)',\n            }}\n          >\n            {displayLabel}\n          </Typography>\n        </Box>\n      )}\n      <HighlightWrapper\n        isHovered={isHovered}\n        highlightColor={style.highlight}\n        highlightSelectedColor={style.highlightSelected}\n        isCustom={variant === 'custom'}\n        onMouseEnter={() => variant !== 'custom' && setIsHovered(true)}\n        onMouseLeave={() => variant !== 'custom' && setIsHovered(false)}\n      >\n        <span className=\"highlight-span\">\n          {children}\n        </span>\n        <EditButton\n          className=\"edit-button\"\n          onClick={(e) => {\n            e.stopPropagation();\n            if (onEditClick) {\n              onEditClick();\n            }\n          }}\n          title=\"Edit variable highlight\"\n          size=\"small\"\n        >\n          <EditRounded sx={{fontSize:14, color:\"#FFFFFF\", strokeWidth:2}} />\n        </EditButton>\n      </HighlightWrapper>\n    </NoteContainer>\n  );\n};"],"names":[],"mappings":";;;;;;;;AAcA;AACE;AACA;AACD;AAED;AACE;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACE;AACA;AACD;AACF;AAED;AAME;AACA;AACA;AACA;AACE;AACD;AACD;AACE;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;AACD;AACF;;;AAWC;AACE;AACE;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACD;;AAGH;AACA;AAEA;AAOY;AACA;AACA;AACD;;;AAsBC;;AAEJ;AASV;;"}

package/dist/cjs/components/Progress.js

@@ -0,0 +1,83 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var material = require('@mui/material');
+var ThemeProvider = require('../ThemeProvider.js');
+
+const StyledLinearProgress = material.styled(material.LinearProgress)(({ theme }) => ({
+    height: 10,
+    borderRadius: 9999,
+    backgroundColor: `${theme.palette.dark.main}1A`,
+    '& .MuiLinearProgress-bar': {
+        borderRadius: 9999,
+        backgroundColor: theme.palette.primary.main,
+        transition: 'transform 0.3s ease-out',
+    },
+}));
+const Progress = ({ current, total, showLabel = true, className = '' }) => {
+    const percentage = Math.min(Math.max((current / total) * 100, 0), 100);
+    return (jsxRuntime.jsxs(material.Box, { className: className, children: [showLabel && (jsxRuntime.jsxs(material.Box, { sx: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1 }, children: [jsxRuntime.jsxs(material.Typography, { variant: "body2", fontWeight: 500, children: ["Step ", current, " of ", total] }), jsxRuntime.jsxs(material.Typography, { variant: "body2", fontWeight: 500, children: [Math.round(percentage), "%"] })] })), jsxRuntime.jsx(StyledLinearProgress, { variant: "determinate", value: percentage })] }));
+};
+const StepNumber = material.styled(material.Box)(({ theme, isActive, isCompleted }) => ({
+    width: 40,
+    height: 40,
+    borderRadius: '50%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontWeight: 600,
+    fontSize: '0.875rem',
+    transition: 'all 0.2s',
+    backgroundColor: isCompleted || isActive
+        ? theme.palette.primary.main
+        : `${theme.palette.dark.main}1A`,
+    color: isCompleted || isActive
+        ? (theme.palette.custom?.stepIndicatorTextColor || theme.palette.dark.main)
+        : `${theme.palette.dark.main}99`,
+    boxShadow: isActive ? `0 0 0 4px ${theme.palette.primary.main}33` : 'none',
+    [theme.breakpoints.down('sm')]: {
+        width: 32,
+        height: 32,
+        fontSize: '0.75rem',
+    },
+}));
+const StepLine = material.styled(material.Box)(({ theme, isCompleted }) => ({
+    flex: 1,
+    height: 4,
+    borderRadius: 2,
+    margin: '0 8px',
+    minWidth: '1rem',
+    transition: 'background-color 0.2s',
+    backgroundColor: isCompleted ? theme.palette.primary.main : `${theme.palette.dark.main}1A`,
+    [theme.breakpoints.down('sm')]: {
+        height: 2,
+        margin: '0 4px',
+    },
+}));
+const StepIndicator = ({ steps, currentStep, className = '' }) => {
+    const { theme } = ThemeProvider.useTheme();
+    return (jsxRuntime.jsx(material.Box, { className: className, sx: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            overflowX: 'auto',
+            pb: 1,
+        }, children: steps.map((step, index) => {
+            const stepNumber = index + 1;
+            const isActive = stepNumber === currentStep;
+            const isCompleted = stepNumber < currentStep;
+            return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs(material.Box, { sx: { display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0 }, children: [jsxRuntime.jsx(StepNumber, { isActive: isActive, isCompleted: isCompleted, children: stepNumber }), jsxRuntime.jsx(material.Typography, { sx: {
+                                    mt: { xs: 0.5, sm: 1 },
+                                    fontSize: { xs: '10px', sm: '12px' },
+                                    fontWeight: 500,
+                                    whiteSpace: 'nowrap',
+                                    color: isActive ? theme.palette.primary.main : `${theme.palette.dark.main}99`,
+                                }, children: step })] }), index < steps.length - 1 && (jsxRuntime.jsx(StepLine, { isCompleted: isCompleted }))] }, index));
+        }) }));
+};
+
+exports.Progress = Progress;
+exports.StepIndicator = StepIndicator;
+//# sourceMappingURL=Progress.js.map

package/dist/cjs/components/Progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.js","sources":["../../../../src/components/Progress.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { Box, Typography, LinearProgress, styled } from '@mui/material';\nimport { useTheme } from '../ThemeProvider';\n\ninterface ProgressProps {\n  current: number;\n  total: number;\n  showLabel?: boolean;\n  className?: string;\n}\n\nconst StyledLinearProgress = styled(LinearProgress)(({ theme }) => ({\n  height: 10,\n  borderRadius: 9999,\n  backgroundColor: `${theme.palette.dark.main}1A`,\n  '& .MuiLinearProgress-bar': {\n    borderRadius: 9999,\n    backgroundColor: theme.palette.primary.main,\n    transition: 'transform 0.3s ease-out',\n  },\n}));\n\nexport const Progress: React.FC<ProgressProps> = ({\n  current,\n  total,\n  showLabel = true,\n  className = ''\n}) => {\n  const percentage = Math.min(Math.max((current / total) * 100, 0), 100);\n\n  return (\n    <Box className={className}>\n      {showLabel && (\n        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1 }}>\n          <Typography variant=\"body2\" fontWeight={500}>\n            Step {current} of {total}\n          </Typography>\n          <Typography variant=\"body2\" fontWeight={500}>\n            {Math.round(percentage)}%\n          </Typography>\n        </Box>\n      )}\n      <StyledLinearProgress variant=\"determinate\" value={percentage} />\n    </Box>\n  );\n};\n\ninterface StepIndicatorProps {\n  steps: string[];\n  currentStep: number;\n  className?: string;\n}\n\nconst StepNumber = styled(Box)<{ isActive: boolean; isCompleted: boolean }>(\n  ({ theme, isActive, isCompleted }) => ({\n    width: 40,\n    height: 40,\n    borderRadius: '50%',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    fontWeight: 600,\n    fontSize: '0.875rem',\n    transition: 'all 0.2s',\n    backgroundColor: isCompleted || isActive \n      ? theme.palette.primary.main \n      : `${theme.palette.dark.main}1A`,\n    color: isCompleted || isActive \n      ? (theme.palette.custom?.stepIndicatorTextColor || theme.palette.dark.main)\n      : `${theme.palette.dark.main}99`,\n    boxShadow: isActive ? `0 0 0 4px ${theme.palette.primary.main}33` : 'none',\n    [theme.breakpoints.down('sm')]: {\n      width: 32,\n      height: 32,\n      fontSize: '0.75rem',\n    },\n  })\n);\n\nconst StepLine = styled(Box)<{ isCompleted: boolean }>(({ theme, isCompleted }) => ({\n  flex: 1,\n  height: 4,\n  borderRadius: 2,\n  margin: '0 8px',\n  minWidth: '1rem',\n  transition: 'background-color 0.2s',\n  backgroundColor: isCompleted ? theme.palette.primary.main : `${theme.palette.dark.main}1A`,\n  [theme.breakpoints.down('sm')]: {\n    height: 2,\n    margin: '0 4px',\n  },\n}));\n\nexport const StepIndicator: React.FC<StepIndicatorProps> = ({\n  steps,\n  currentStep,\n  className = ''\n}) => {\n  const { theme } = useTheme();\n\n  return (\n    <Box \n      className={className}\n      sx={{ \n        display: 'flex', \n        alignItems: 'center', \n        justifyContent: 'space-between',\n        overflowX: 'auto',\n        pb: 1,\n      }}\n    >\n      {steps.map((step, index) => {\n        const stepNumber = index + 1;\n        const isActive = stepNumber === currentStep;\n        const isCompleted = stepNumber < currentStep;\n\n        return (\n          <React.Fragment key={index}>\n            <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0 }}>\n              <StepNumber isActive={isActive} isCompleted={isCompleted}>\n                {stepNumber}\n              </StepNumber>\n              <Typography\n                sx={{\n                  mt: { xs: 0.5, sm: 1 },\n                  fontSize: { xs: '10px', sm: '12px' },\n                  fontWeight: 500,\n                  whiteSpace: 'nowrap',\n                  color: isActive ? theme.palette.primary.main : `${theme.palette.dark.main}99`,\n                }}\n              >\n                {step}\n              </Typography>\n            </Box>\n            {index < steps.length - 1 && (\n              <StepLine isCompleted={isCompleted} />\n            )}\n          </React.Fragment>\n        );\n      })}\n    </Box>\n  );\n};"],"names":[],"mappings":";;;;;;;;AAaA;AACE;AACA;;AAEA;AACE;AACA;AACA;AACD;AACF;AAEM;;AAQL;AAeF;AAQA;AAEI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEE;;;AAGA;;AAEF;;AAEE;AACA;AACA;AACD;AACF;AAGH;AACE;AACA;AACA;AACA;AACA;AACA;;;AAGE;AACA;AACD;AACF;AAEM;AAKL;;AAMM;AACA;AACA;AACA;AACA;;AAIA;AACA;AACA;;;;AAYU;AACA;;;;AAelB;;;"}

package/dist/cjs/components/Radio.js

@@ -0,0 +1,61 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var material = require('@mui/material');
+var ThemeProvider = require('../ThemeProvider.js');
+
+const CustomRadioIcon = material.styled('span')(({ theme, checked }) => ({
+    width: 20,
+    height: 20,
+    borderRadius: '50%',
+    border: checked ? `5px solid ${theme.palette.secondary.main}` : `2px solid ${theme.palette.dark.main}4D`,
+    transition: 'all 0.2s',
+    backgroundColor: 'transparent',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+}));
+const Radio = ({ label, description, className = '', id, checked, ...props }) => {
+    const radioId = id || `radio-${Math.random().toString(36).substr(2, 9)}`;
+    const { theme } = ThemeProvider.useTheme();
+    return (jsxRuntime.jsx(material.FormControlLabel, { className: className, control: jsxRuntime.jsxs(material.Box, { sx: { display: 'flex', alignItems: 'center', height: 24, mr: 1.5 }, children: [jsxRuntime.jsx("input", { id: radioId, type: "radio", style: { display: 'none' }, checked: checked, ...props }), jsxRuntime.jsx(CustomRadioIcon, { checked: checked, onClick: (e) => {
+                        const input = document.getElementById(radioId);
+                        if (input && !props.disabled) {
+                            input.click();
+                        }
+                    }, sx: {
+                        cursor: props.disabled ? 'not-allowed' : 'pointer',
+                        opacity: props.disabled ? 0.5 : 1,
+                    } })] }), label: jsxRuntime.jsxs(material.Box, { sx: { ml: 0 }, children: [jsxRuntime.jsx(material.Typography, { component: "label", htmlFor: radioId, sx: {
+                        fontSize: '1rem',
+                        fontWeight: 500,
+                        color: theme.palette.dark.main,
+                        cursor: props.disabled ? 'not-allowed' : 'pointer',
+                        opacity: props.disabled ? 0.5 : 1,
+                    }, children: label }), description && (jsxRuntime.jsx(material.Typography, { variant: "body2", sx: {
+                        fontSize: '0.875rem',
+                        color: `${theme.palette.dark.main}99`,
+                        mt: 0.25,
+                    }, children: description }))] }), sx: { alignItems: 'flex-start', ml: 0 } }));
+};
+const RadioGroup = ({ label, error, children, className = '' }) => {
+    const { theme } = ThemeProvider.useTheme();
+    return (jsxRuntime.jsxs(material.FormControl, { component: "fieldset", className: className, error: !!error, fullWidth: true, children: [label && (jsxRuntime.jsx(material.FormLabel, { component: "legend", sx: {
+                    fontSize: '0.875rem',
+                    fontWeight: 500,
+                    color: theme.palette.dark.main,
+                    mb: 1.5,
+                    '&.Mui-focused': {
+                        color: theme.palette.dark.main,
+                    },
+                }, children: label })), jsxRuntime.jsx(material.Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1.5 }, children: children }), error && (jsxRuntime.jsx(material.FormHelperText, { sx: {
+                    mt: 1,
+                    fontSize: '0.875rem',
+                    color: theme.palette.accent.main,
+                }, children: error }))] }));
+};
+
+exports.Radio = Radio;
+exports.RadioGroup = RadioGroup;
+//# sourceMappingURL=Radio.js.map

package/dist/cjs/components/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.js","sources":["../../../../src/components/Radio.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { Box, FormControl, FormLabel, FormHelperText, FormControlLabel, styled, Typography } from '@mui/material';\nimport { useTheme } from '../ThemeProvider';\n\ninterface RadioProps extends React.InputHTMLAttributes<HTMLInputElement> {\n  label: string;\n  description?: string;\n}\n\nconst CustomRadioIcon = styled('span')<{ checked?: boolean }>(({ theme, checked }) => ({\n  width: 20,\n  height: 20,\n  borderRadius: '50%',\n  border: checked ? `5px solid ${theme.palette.secondary.main}` : `2px solid ${theme.palette.dark.main}4D`,\n  transition: 'all 0.2s',\n  backgroundColor: 'transparent',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n}));\n\nexport const Radio: React.FC<RadioProps> = ({\n  label,\n  description,\n  className = '',\n  id,\n  checked,\n  ...props\n}) => {\n  const radioId = id || `radio-${Math.random().toString(36).substr(2, 9)}`;\n  const { theme } = useTheme();\n\n  return (\n    <FormControlLabel\n      className={className}\n      control={\n        <Box sx={{ display: 'flex', alignItems: 'center', height: 24, mr: 1.5 }}>\n          <input\n            id={radioId}\n            type=\"radio\"\n            style={{ display: 'none' }}\n            checked={checked}\n            {...props}\n          />\n          <CustomRadioIcon \n            checked={checked}\n            onClick={(e) => {\n              const input = document.getElementById(radioId) as HTMLInputElement;\n              if (input && !props.disabled) {\n                input.click();\n              }\n            }}\n            sx={{\n              cursor: props.disabled ? 'not-allowed' : 'pointer',\n              opacity: props.disabled ? 0.5 : 1,\n            }}\n          />\n        </Box>\n      }\n      label={\n        <Box sx={{ ml: 0 }}>\n          <Typography\n            component=\"label\"\n            htmlFor={radioId}\n            sx={{\n              fontSize: '1rem',\n              fontWeight: 500,\n              color: theme.palette.dark.main,\n              cursor: props.disabled ? 'not-allowed' : 'pointer',\n              opacity: props.disabled ? 0.5 : 1,\n            }}\n          >\n            {label}\n          </Typography>\n          {description && (\n            <Typography\n              variant=\"body2\"\n              sx={{\n                fontSize: '0.875rem',\n                color: `${theme.palette.dark.main}99`,\n                mt: 0.25,\n              }}\n            >\n              {description}\n            </Typography>\n          )}\n        </Box>\n      }\n      sx={{ alignItems: 'flex-start', ml: 0 }}\n    />\n  );\n};\n\ninterface RadioGroupProps {\n  label?: string;\n  error?: string;\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport const RadioGroup: React.FC<RadioGroupProps> = ({\n  label,\n  error,\n  children,\n  className = ''\n}) => {\n  const { theme } = useTheme();\n\n  return (\n    <FormControl component=\"fieldset\" className={className} error={!!error} fullWidth>\n      {label && (\n        <FormLabel\n          component=\"legend\"\n          sx={{\n            fontSize: '0.875rem',\n            fontWeight: 500,\n            color: theme.palette.dark.main,\n            mb: 1.5,\n            '&.Mui-focused': {\n              color: theme.palette.dark.main,\n            },\n          }}\n        >\n          {label}\n        </FormLabel>\n      )}\n      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>\n        {children}\n      </Box>\n      {error && (\n        <FormHelperText\n          sx={{\n            mt: 1,\n            fontSize: '0.875rem',\n            color: theme.palette.accent.main,\n          }}\n        >\n          {error}\n        </FormHelperText>\n      )}\n    </FormControl>\n  );\n};"],"names":[],"mappings":";;;;;;;AAWA;AACE;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACD;;;AAWC;AAEA;;AAgBY;;;;;;;AAiBA;AACA;AACA;;;AAGD;AAQG;;AAEA;AACD;AAUf;AASO;AAML;AAEA;AAMU;AACA;AACA;AACA;AACA;AACE;AACD;AACF;AAWC;AACA;AACA;AACD;AAOX;;;"}

package/dist/cjs/components/ReadBy.js

@@ -0,0 +1,58 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var material = require('@mui/material');
+var ThemeProvider = require('../ThemeProvider.js');
+var iconsMaterial = require('@mui/icons-material');
+
+const ReadByContainer = material.styled(material.Box)(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: theme.spacing(2),
+    padding: theme.spacing(2),
+    borderLeft: `4px solid ${theme.palette.primary.main}`,
+    borderRadius: '0 8px 8px 0',
+    backgroundColor: theme.palette.custom?.readByBackgroundColor || theme.palette.accent.main,
+    [theme.breakpoints.down('sm')]: {
+        flexDirection: 'column',
+        padding: theme.spacing(1.5),
+    },
+}));
+const ExpandButton = material.styled(material.IconButton)(({ theme }) => ({
+    width: 32,
+    height: 32,
+    backgroundColor: '#4d3019',
+    color: '#fff',
+    flexShrink: 0,
+    '&:hover': {
+        backgroundColor: '#4d3019',
+        opacity: 0.8,
+    },
+    [theme.breakpoints.down('sm')]: {
+        alignSelf: 'flex-end',
+    },
+}));
+const ReadBy = ({ names }) => {
+    const { theme } = ThemeProvider.useTheme();
+    const [isExpanded, setIsExpanded] = React.useState(false);
+    const displayText = isExpanded
+        ? names.join(', ')
+        : names.length > 5
+            ? `${names.slice(0, 5).join(', ')}...`
+            : names.join(', ');
+    return (jsxRuntime.jsxs(ReadByContainer, { children: [jsxRuntime.jsxs(material.Box, { sx: { flex: 1, minWidth: 0, wordBreak: 'break-word' }, children: [jsxRuntime.jsx(material.Typography, { component: "span", sx: {
+                            fontSize: { xs: '13px', sm: '14px' },
+                            fontWeight: 700,
+                            color: theme.palette.dark.main,
+                        }, children: "Read by:" }), jsxRuntime.jsx(material.Typography, { component: "span", sx: {
+                            fontSize: { xs: '13px', sm: '14px' },
+                            color: theme.palette.dark.main,
+                            ml: 1,
+                        }, children: displayText })] }), names.length > 5 && (jsxRuntime.jsx(ExpandButton, { onClick: () => setIsExpanded(!isExpanded), "aria-label": isExpanded ? 'Collapse' : 'Expand', size: "small", children: isExpanded ? (jsxRuntime.jsx(iconsMaterial.ExpandLessRounded, { sx: { fontSize: 16 } })) : (jsxRuntime.jsx(iconsMaterial.ExpandMoreRounded, { sx: { fontSize: 16 } })) }))] }));
+};
+
+exports.ReadBy = ReadBy;
+//# sourceMappingURL=ReadBy.js.map

package/dist/cjs/components/ReadBy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReadBy.js","sources":["../../../../src/components/ReadBy.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState } from 'react';\nimport { Box, IconButton, Typography, styled } from '@mui/material';\nimport { useTheme } from '../ThemeProvider';\nimport { ExpandLessRounded, ExpandMoreRounded } from '@mui/icons-material';\n\ninterface ReadByProps {\n  names: string[];\n}\n\nconst ReadByContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'row',\n  alignItems: 'flex-start',\n  gap: theme.spacing(2),\n  padding: theme.spacing(2),\n  borderLeft: `4px solid ${theme.palette.primary.main}`,\n  borderRadius: '0 8px 8px 0',\n  backgroundColor: theme.palette.custom?.readByBackgroundColor || theme.palette.accent.main,\n  [theme.breakpoints.down('sm')]: {\n    flexDirection: 'column',\n    padding: theme.spacing(1.5),\n  },\n}));\n\nconst ExpandButton = styled(IconButton)(({ theme }) => ({\n  width: 32,\n  height: 32,\n  backgroundColor: '#4d3019',\n  color: '#fff',\n  flexShrink: 0,\n  '&:hover': {\n    backgroundColor: '#4d3019',\n    opacity: 0.8,\n  },\n  [theme.breakpoints.down('sm')]: {\n    alignSelf: 'flex-end',\n  },\n}));\n\nexport const ReadBy: React.FC<ReadByProps> = ({ names }) => {\n  const { theme } = useTheme();\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  const displayText = isExpanded\n    ? names.join(', ')\n    : names.length > 5\n      ? `${names.slice(0, 5).join(', ')}...`\n      : names.join(', ');\n\n  return (\n    <ReadByContainer>\n      <Box sx={{ flex: 1, minWidth: 0, wordBreak: 'break-word' }}>\n        <Typography\n          component=\"span\"\n          sx={{\n            fontSize: { xs: '13px', sm: '14px' },\n            fontWeight: 700,\n            color: theme.palette.dark.main,\n          }}\n        >\n          Read by:\n        </Typography>\n        <Typography\n          component=\"span\"\n          sx={{\n            fontSize: { xs: '13px', sm: '14px' },\n            color: theme.palette.dark.main,\n            ml: 1,\n          }}\n        >\n          {displayText}\n        </Typography>\n      </Box>\n      {names.length > 5 && (\n        <ExpandButton\n          onClick={() => setIsExpanded(!isExpanded)}\n          aria-label={isExpanded ? 'Collapse' : 'Expand'}\n          size=\"small\"\n        >\n          {isExpanded ? (\n            <ExpandLessRounded sx={{fontSize: 16}} />\n          ) : (\n            <ExpandMoreRounded sx={{fontSize: 16}} />\n          )}\n        </ExpandButton>\n      )}\n    </ReadByContainer>\n  );\n};"],"names":[],"mappings":";;;;;;;;;AAWA;AACE;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEE;AACA;AACD;AACF;AAED;AACE;AACA;AACA;AACA;AACA;AACA;AACE;AACA;AACD;;AAEC;AACD;AACF;;AAGC;;;AAIE;AACA;AACE;AACA;AAEJ;;AAOU;AACA;;;AASA;AACA;AACD;AAoBX;;"}

package/dist/cjs/components/Select.js

@@ -0,0 +1,96 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var material = require('@mui/material');
+var ThemeProvider = require('../ThemeProvider.js');
+var iconsMaterial = require('@mui/icons-material');
+
+const StyledSelect = material.styled(material.Select)(({ theme, error }) => ({
+    backgroundColor: theme.palette.light.main,
+    borderRadius: (typeof theme.shape.borderRadius === 'string'
+        ? parseInt(theme.shape.borderRadius, 10)
+        : theme.shape.borderRadius || 4) * 2,
+    fontSize: '1rem',
+    color: theme.palette.dark.main,
+    '& .MuiOutlinedInput-notchedOutline': {
+        borderColor: error ? theme.palette.accent.main : `${theme.palette.dark.main}33`,
+    },
+    '&:hover .MuiOutlinedInput-notchedOutline': {
+        borderColor: error ? theme.palette.accent.main : theme.palette.primary.main,
+    },
+    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+        borderWidth: 2,
+        borderColor: error ? theme.palette.accent.main : theme.palette.primary.main,
+    },
+    '&.Mui-disabled': {
+        backgroundColor: `${theme.palette.dark.main}0D`,
+        '& .MuiSelect-select': {
+            color: `${theme.palette.dark.main}80`,
+            cursor: 'not-allowed',
+        },
+    },
+    '& .MuiSelect-icon': {
+        color: `${theme.palette.dark.main}66`,
+    },
+}));
+const StyledInputLabel = material.styled(material.InputLabel)(({ theme }) => ({
+    fontSize: '0.875rem',
+    fontWeight: 500,
+    color: theme.palette.dark.main,
+    position: 'relative',
+    transform: 'none',
+    marginBottom: theme.spacing(0.75),
+    '&.Mui-focused': {
+        color: theme.palette.dark.main,
+    },
+}));
+const Select = ({ label, error, helperText, fullWidth = false, options, className = '', id, value, onChange, disabled, name, }) => {
+    const { theme } = ThemeProvider.useTheme();
+    const selectId = id || `select-${Math.random().toString(36).substr(2, 9)}`;
+    const handleChange = (event) => {
+        if (onChange) {
+            // Create a synthetic event that matches React.ChangeEvent<HTMLSelectElement>
+            const syntheticEvent = {
+                target: {
+                    value: event.target.value,
+                    name: name || '',
+                },
+                currentTarget: event.currentTarget,
+            };
+            onChange(syntheticEvent);
+        }
+    };
+    return (jsxRuntime.jsxs(material.FormControl, { fullWidth: fullWidth, error: !!error, className: className, children: [label && (jsxRuntime.jsx(StyledInputLabel, { htmlFor: selectId, shrink: false, children: label })), jsxRuntime.jsx(StyledSelect, { id: selectId, name: name, value: value || '', onChange: handleChange, disabled: disabled, error: !!error, IconComponent: iconsMaterial.ExpandMoreRounded, MenuProps: {
+                    PaperProps: {
+                        sx: {
+                            mt: 1,
+                            borderRadius: 2,
+                            boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+                        },
+                    },
+                }, children: options.map((option) => (jsxRuntime.jsx(material.MenuItem, { value: option.value, sx: {
+                        fontSize: '1rem',
+                        color: theme.palette.dark.main,
+                        '&:hover': {
+                            backgroundColor: `${theme.palette.primary.main}1A`,
+                        },
+                        '&.Mui-selected': {
+                            backgroundColor: `${theme.palette.primary.main}26`,
+                            '&:hover': {
+                                backgroundColor: `${theme.palette.primary.main}33`,
+                            },
+                        },
+                    }, children: option.label }, option.value))) }), error && (jsxRuntime.jsx(material.FormHelperText, { sx: {
+                    mt: 0.75,
+                    fontSize: '0.875rem',
+                    color: theme.palette.accent.main,
+                }, children: error })), helperText && !error && (jsxRuntime.jsx(material.FormHelperText, { sx: {
+                    mt: 0.75,
+                    fontSize: '0.875rem',
+                    color: `${theme.palette.dark.main}99`,
+                }, children: helperText }))] }));
+};
+
+exports.Select = Select;
+//# sourceMappingURL=Select.js.map

package/dist/cjs/components/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sources":["../../../../src/components/Select.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { FormControl, InputLabel, Select as MuiSelect, MenuItem, FormHelperText, styled } from '@mui/material';\nimport { useTheme } from '../ThemeProvider';\nimport { ExpandMoreRounded } from '@mui/icons-material';\n\ninterface SelectProps {\n  label?: string;\n  error?: string;\n  helperText?: string;\n  fullWidth?: boolean;\n  options: { value: string; label: string }[];\n  value?: string;\n  onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;\n  disabled?: boolean;\n  className?: string;\n  id?: string;\n  name?: string;\n}\n\nconst StyledSelect = styled(MuiSelect)(({ theme, error }) => ({\n  backgroundColor: theme.palette.light.main,\n  borderRadius: (typeof theme.shape.borderRadius === 'string'\n    ? parseInt(theme.shape.borderRadius, 10)\n    : theme.shape.borderRadius || 4) * 2,\n  fontSize: '1rem',\n  color: theme.palette.dark.main,\n  '& .MuiOutlinedInput-notchedOutline': {\n    borderColor: error ? theme.palette.accent.main : `${theme.palette.dark.main}33`,\n  },\n  '&:hover .MuiOutlinedInput-notchedOutline': {\n    borderColor: error ? theme.palette.accent.main : theme.palette.primary.main,\n  },\n  '&.Mui-focused .MuiOutlinedInput-notchedOutline': {\n    borderWidth: 2,\n    borderColor: error ? theme.palette.accent.main : theme.palette.primary.main,\n  },\n  '&.Mui-disabled': {\n    backgroundColor: `${theme.palette.dark.main}0D`,\n    '& .MuiSelect-select': {\n      color: `${theme.palette.dark.main}80`,\n      cursor: 'not-allowed',\n    },\n  },\n  '& .MuiSelect-icon': {\n    color: `${theme.palette.dark.main}66`,\n  },\n}));\n\nconst StyledInputLabel = styled(InputLabel)(({ theme }) => ({\n  fontSize: '0.875rem',\n  fontWeight: 500,\n  color: theme.palette.dark.main,\n  position: 'relative',\n  transform: 'none',\n  marginBottom: theme.spacing(0.75),\n  '&.Mui-focused': {\n    color: theme.palette.dark.main,\n  },\n}));\n\nexport const Select: React.FC<SelectProps> = ({\n  label,\n  error,\n  helperText,\n  fullWidth = false,\n  options,\n  className = '',\n  id,\n  value,\n  onChange,\n  disabled,\n  name,\n}) => {\n  const { theme } = useTheme();\n  const selectId = id || `select-${Math.random().toString(36).substr(2, 9)}`;\n\n  const handleChange = (event: any) => {\n    if (onChange) {\n      // Create a synthetic event that matches React.ChangeEvent<HTMLSelectElement>\n      const syntheticEvent = {\n        target: {\n          value: event.target.value,\n          name: name || '',\n        },\n        currentTarget: event.currentTarget,\n      } as React.ChangeEvent<HTMLSelectElement>;\n      onChange(syntheticEvent);\n    }\n  };\n\n  return (\n    <FormControl \n      fullWidth={fullWidth} \n      error={!!error}\n      className={className}\n    >\n      {label && (\n        <StyledInputLabel htmlFor={selectId} shrink={false}>\n          {label}\n        </StyledInputLabel>\n      )}\n      <StyledSelect\n        id={selectId}\n        name={name}\n        value={value || ''}\n        onChange={handleChange}\n        disabled={disabled}\n        error={!!error}\n        IconComponent={ExpandMoreRounded}\n        MenuProps={{\n          PaperProps: {\n            sx: {\n              mt: 1,\n              borderRadius: 2,\n              boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',\n            },\n          },\n        }}\n      >\n        {options.map((option) => (\n          <MenuItem \n            key={option.value} \n            value={option.value}\n            sx={{\n              fontSize: '1rem',\n              color: theme.palette.dark.main,\n              '&:hover': {\n                backgroundColor: `${theme.palette.primary.main}1A`,\n              },\n              '&.Mui-selected': {\n                backgroundColor: `${theme.palette.primary.main}26`,\n                '&:hover': {\n                  backgroundColor: `${theme.palette.primary.main}33`,\n                },\n              },\n            }}\n          >\n            {option.label}\n          </MenuItem>\n        ))}\n      </StyledSelect>\n      {error && (\n        <FormHelperText\n          sx={{\n            mt: 0.75,\n            fontSize: '0.875rem',\n            color: theme.palette.accent.main,\n          }}\n        >\n          {error}\n        </FormHelperText>\n      )}\n      {helperText && !error && (\n        <FormHelperText\n          sx={{\n            mt: 0.75,\n            fontSize: '0.875rem',\n            color: `${theme.palette.dark.main}99`,\n          }}\n        >\n          {helperText}\n        </FormHelperText>\n      )}\n    </FormControl>\n  );\n};"],"names":[],"mappings":";;;;;;;;AAqBA;AACE;;;;AAIA;AACA;AACA;;AAEC;AACD;;AAEC;AACD;AACE;;AAED;AACD;;AAEE;;AAEE;AACD;AACF;AACD;;AAEC;AACF;AAED;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACE;AACD;AACF;AAEM;AAaL;;AAGA;;;AAGI;AACE;AACE;;AAED;;;;;AAKP;AAEA;AAoBQ;AACE;AACE;AACA;AACA;AACD;AACF;;AAQG;AACA;AACA;;AAEC;AACD;;AAEE;;AAEC;AACF;AACF;AASD;AACA;AACA;AACD;AAQC;AACA;;AAED;AAOX;;"}