ece-docs-components 1.0.89 → 1.0.91

package/dist/esm/components/NoteBox.js

@@ -1,11 +1,46 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
-import { styled, Box, IconButton, useTheme } from '@mui/material';
+import { styled, Box, IconButton } from '@mui/material';
 import { CheckRounded, EditRounded } from '@mui/icons-material';
 import { Alert } from './Alert.js';
 import { VariableState } from '../types/variable.js';
 import { mapStatusToVariableState, mapRequirementTypeToState } from '../helpers/variableProcessing.js';
 
+// Status based color configs (from Modal)
+const statusConfig = {
+    Accepted: {
+        highlight: '#EDF9CD',
+        highlightSelected: '#DBF59A',
+        label: 'Accepted',
+    },
+    Pending: {
+        highlight: '#F5E2FF',
+        highlightSelected: '#EBC7FF',
+        label: 'Pending',
+        alertVariant: 'info',
+    },
+    'Action Required': {
+        highlight: '#FBEEEE',
+        highlightSelected: '#FFBCB3',
+        label: 'ActionRequired',
+        alertVariant: 'error',
+    },
+    'Declined': {
+        highlight: '#FFF6D1',
+        highlightSelected: '#FDE58E',
+        label: 'Declined',
+    },
+    'Not Started': {
+        highlight: '#f8c97cff',
+        highlightSelected: '#F5A623',
+        label: 'Not Started',
+    },
+    Draft: {
+        highlight: '#FFEACD',
+        highlightSelected: '#FFC365',
+        label: 'Draft',
+    },
+};
 const NoteContainer = styled(Box)({
     position: 'relative',
     display: 'inline',
@@ -63,16 +98,6 @@ const NoteBox = ({ status, requirementType, label, note, children, className = '
     // Map current status
     const variableState = mapStatusToVariableState(status);
     const requirementTypeState = mapRequirementTypeToState(requirementType);
-    const theme = useTheme();
-    const { statusColors, } = theme.palette;
-    const statusConfig = {
-        Accepted: statusColors.accepted,
-        Pending: { ...statusColors.pending, alertVariant: 'info' },
-        'Action Required': { ...statusColors.actionRequired, alertVariant: 'error' },
-        Declined: statusColors.declined,
-        'Not Started': statusColors.notStarted,
-        Draft: statusColors.draft,
-    };
     const style = variableState
         ? statusConfig[variableState]
         : {
@@ -80,15 +105,15 @@ const NoteBox = ({ status, requirementType, label, note, children, className = '
             highlightSelected: '#DDD'};
     const reqTypeConfig = {
         Default: {
-            color: theme.palette.statusColors.mandatory.color,
-            highlight: theme.palette.statusColors.mandatory.highlight,
-            highlightSelected: theme.palette.statusColors.mandatory.highlightSelected,
+            color: '#F5A623',
+            highlight: '#f3bf6bff',
+            highlightSelected: '#F5A623',
             label: 'Mandatory',
         },
         Optional: {
-            color: theme.palette.statusColors.optional.color,
-            highlight: theme.palette.statusColors.optional.highlight,
-            highlightSelected: theme.palette.statusColors.optional.highlightSelected,
+            color: '#F5D76E',
+            highlight: '#f3e2a5ff',
+            highlightSelected: '#F5D76E',
             label: 'Optional',
         },
     };
@@ -96,7 +121,7 @@ const NoteBox = ({ status, requirementType, label, note, children, className = '
         {
             highlight: '#EEE',
             highlightSelected: '#DDD'};
-    return (jsxs(NoteContainer, { className: className, children: [variableState && note && (jsx(Alert, { variant: note, sx: { mb: 1 }, children: note })), jsxs(HighlightWrapper, { isHovered: isHovered, highlightColor: variableState === VariableState.NotStarted ? requirementTypeStyle.highlight : style.highlight, highlightSelectedColor: variableState === VariableState.NotStarted ? requirementTypeStyle.highlightSelected : style.highlightSelected, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onClick: (e) => {
+    return (jsxs(NoteContainer, { className: className, children: [variableState && style.alertVariant && note && (jsx(Alert, { variant: style.alertVariant, sx: { mb: 1 }, children: note })), jsxs(HighlightWrapper, { isHovered: isHovered, highlightColor: variableState === VariableState.NotStarted ? requirementTypeStyle.highlight : style.highlight, highlightSelectedColor: variableState === VariableState.NotStarted ? requirementTypeStyle.highlightSelected : style.highlightSelected, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onClick: (e) => {
                     e.stopPropagation();
                     if (onEditClick) {
                         onEditClick();

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

@@ -1 +1 @@
-{"version":3,"file":"NoteBox.js","sources":["../../../../src/components/NoteBox.tsx"],"sourcesContent":["import React, { useState } from 'react';\r\nimport { Box, Typography, IconButton, styled, Chip, useTheme } from '@mui/material';\r\nimport { CheckRounded, EditRounded } from '@mui/icons-material';\r\nimport { Alert } from './Alert';\r\nimport { RequirementType, VariableState } from '../types/variable';\r\nimport { mapRequirementTypeToState, mapStatusToVariableState } from '../helpers/variableProcessing';\r\n\r\ninterface NoteBoxProps {\r\n  status?: string; // Use only status now\r\n  requirementType?: string;\r\n  label?: string;\r\n  note?: string;\r\n  children: React.ReactNode;\r\n  className?: string;\r\n  onEditClick?: () => void;\r\n}\r\n\r\nconst NoteContainer = styled(Box)({\r\n  position: 'relative',\r\n  display: 'inline',\r\n  maxWidth: '100%',\r\n});\r\n\r\n// Uses highlight colors driven by status exclusively\r\nconst HighlightWrapper = styled(Box, {\r\n  shouldForwardProp: (prop) =>\r\n    prop !== 'isHovered' &&\r\n    prop !== 'highlightColor' &&\r\n    prop !== 'highlightSelectedColor'\r\n})<{\r\n  isHovered: boolean;\r\n  highlightColor: string;\r\n  highlightSelectedColor: string;\r\n}>(({ isHovered, highlightColor, highlightSelectedColor }) => ({\r\n  position: 'relative',\r\n  display: 'inline',\r\n  maxWidth: '100%',\r\n  '&:hover .edit-button': {\r\n    opacity: 1,\r\n  },\r\n  '& .highlight-span': {\r\n    background: isHovered ? highlightSelectedColor : highlightColor,\r\n    padding: '2px 4px',\r\n    borderBottom: '2px solid rgba(77, 48, 25, 0.3)',\r\n    boxDecorationBreak: 'clone',\r\n    WebkitBoxDecorationBreak: 'clone',\r\n    transition: 'background 0.2s ease',\r\n    cursor: 'pointer',\r\n    fontSize: '1rem',\r\n    wordWrap: 'break-word',\r\n    overflowWrap: 'break-word',\r\n    display: 'inline',\r\n    color: '#4D3019',\r\n  },\r\n}));\r\n\r\nconst EditButton = styled(IconButton)(({ theme }) => ({\r\n  top: 0,\r\n  right: 0,\r\n  transform: 'translate(-50%, -50%)',\r\n  position: 'relative',\r\n  width: 20,\r\n  height: 20,\r\n  marginRight: -20,\r\n  borderRadius: (typeof theme.shape.borderRadius === 'string'\r\n    ? parseInt(theme.shape.borderRadius, 10)\r\n    : theme.shape.borderRadius || 4) * 2,\r\n  backgroundColor: '#4D3019',\r\n  opacity: 0,\r\n  transition: 'all 0.2s ease',\r\n  boxShadow: '0 1px 3px rgba(0,0,0,0.12)',\r\n  '&:hover': {\r\n    backgroundColor: '#4D3019',\r\n    transform: 'translate(-50%, -50%) scale(1.1)',\r\n  },\r\n}));\r\n\r\nexport const NoteBox: React.FC<NoteBoxProps> = ({\r\n  status,\r\n  requirementType,\r\n  label,\r\n  note,\r\n  children,\r\n  className = '',\r\n  onEditClick,\r\n}) => {\r\n  const [isHovered, setIsHovered] = useState(false);\r\n\r\n  // Map current status\r\n  const variableState = mapStatusToVariableState(status!!);\r\n  const requirementTypeState = mapRequirementTypeToState(requirementType!!)\r\n  const theme = useTheme();\r\n  const { statusColors,  } = theme.palette;\r\n  \r\n  const statusConfig = {\r\n    Accepted:         statusColors.accepted,\r\n    Pending:          {...statusColors.pending, alertVariant: 'info'},\r\n    'Action Required':{...statusColors.actionRequired, alertVariant: 'error'},\r\n    Declined:         statusColors.declined,\r\n    'Not Started':    statusColors.notStarted,\r\n    Draft:            statusColors.draft,\r\n  };\r\n\r\n  const style = variableState\r\n    ? statusConfig[variableState]\r\n    : {\r\n        highlight: '#EEE',\r\n        highlightSelected: '#DDD',\r\n        label: label || '',\r\n      };\r\n\r\n  const reqTypeConfig = {\r\n    Default: {\r\n      color: theme.palette.statusColors.mandatory.color,\r\n      highlight: theme.palette.statusColors.mandatory.highlight,\r\n      highlightSelected: theme.palette.statusColors.mandatory.highlightSelected,\r\n      label: 'Mandatory',\r\n    },\r\n    Optional: {\r\n      color: theme.palette.statusColors.optional.color,\r\n      highlight: theme.palette.statusColors.optional.highlight,\r\n      highlightSelected: theme.palette.statusColors.optional.highlightSelected,\r\n      label: 'Optional',\r\n    },\r\n  };\r\n\r\n\r\n  const requirementTypeStyle = requirementTypeState ? reqTypeConfig[requirementTypeState] :\r\n  {\r\n    highlight: '#EEE',\r\n    highlightSelected: '#DDD',\r\n    label: label || '',\r\n  };;\r\n\r\n  \r\n  return (\r\n    <NoteContainer className={className}>\r\n      {/* Alert for note when status matches and note available */}\r\n      {variableState && note && (\r\n        <Alert variant={note as \"note\" | \"info\" | \"error\" | \"success\" | \"warning\" | \"note-internallink\" | \"note-externallink\" | \"note-important\" | \"note-assurance\" | \"note-share\" | \"note-task\" | \"custom\" | undefined} sx={{ mb: 1 }}>\r\n          {note}\r\n        </Alert>\r\n      )}\r\n\r\n      {/* Highlighted content box */}\r\n      <HighlightWrapper\r\n        isHovered={isHovered}\r\n        highlightColor={variableState === VariableState.NotStarted? requirementTypeStyle.highlight : style.highlight}\r\n        highlightSelectedColor={variableState === VariableState.NotStarted? requirementTypeStyle.highlightSelected : style.highlightSelected}\r\n        onMouseEnter={() => setIsHovered(true)}\r\n        onMouseLeave={() => setIsHovered(false)}\r\n        onClick={(e) => {\r\n          e.stopPropagation();\r\n          if (onEditClick) {\r\n            onEditClick();\r\n          }\r\n        }}\r\n      >\r\n        <span className=\"highlight-span\" style={{display:'inline'}}>{children}</span>\r\n        <EditButton\r\n          className=\"edit-button\"\r\n          onClick={(e) => {\r\n            e.stopPropagation();\r\n            if (onEditClick) {\r\n              onEditClick();\r\n            }\r\n          }}\r\n          size=\"small\"\r\n        >\r\n          {variableState === VariableState.Accepted\r\n            ? <CheckRounded sx={{ fontSize: 14, color: \"#FFFFFF\", strokeWidth: 2 }} />\r\n            : <EditRounded sx={{ fontSize: 14, color: \"#FFFFFF\", strokeWidth: 2 }} /> }\r\n        </EditButton>\r\n      </HighlightWrapper>\r\n    </NoteContainer>\r\n  );\r\n};\r\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"NoteBox.js","sources":["../../../../src/components/NoteBox.tsx"],"sourcesContent":["import React, { useState } from 'react';\r\nimport { Box, Typography, IconButton, styled, Chip } from '@mui/material';\r\nimport { CheckRounded, EditRounded } from '@mui/icons-material';\r\nimport { Alert } from './Alert';\r\nimport { RequirementType, VariableState } from '../types/variable';\r\nimport { mapRequirementTypeToState, mapStatusToVariableState } from '../helpers/variableProcessing';\r\n\r\ninterface NoteBoxProps {\r\n  status?: string; // Use only status now\r\n  requirementType?: string;\r\n  label?: string;\r\n  note?: string;\r\n  children: React.ReactNode;\r\n  className?: string;\r\n  onEditClick?: () => void;\r\n}\r\n\r\n// Status based color configs (from Modal)\r\nconst statusConfig: {\r\n  [key in VariableState]: {\r\n    highlight: string;\r\n    highlightSelected: string;\r\n    label: string;\r\n    alertVariant?: \"error\" | \"info\";\r\n  }\r\n} = {\r\n  Accepted: {\r\n    highlight: '#EDF9CD',\r\n    highlightSelected: '#DBF59A',\r\n    label: 'Accepted',\r\n  },\r\n  Pending: {\r\n    highlight: '#F5E2FF',\r\n    highlightSelected: '#EBC7FF',\r\n    label: 'Pending',\r\n    alertVariant: 'info',\r\n  },\r\n  'Action Required': {\r\n    highlight: '#FBEEEE',\r\n    highlightSelected: '#FFBCB3',\r\n    label: 'ActionRequired',\r\n    alertVariant: 'error',\r\n  },\r\n  'Declined': {\r\n    highlight: '#FFF6D1',\r\n    highlightSelected: '#FDE58E',\r\n    label: 'Declined',\r\n  },\r\n  'Not Started': {\r\n    highlight: '#f8c97cff',\r\n    highlightSelected: '#F5A623',\r\n    label: 'Not Started',\r\n  },\r\n  Draft: {\r\n    highlight: '#FFEACD',\r\n    highlightSelected: '#FFC365',\r\n    label: 'Draft',\r\n  },\r\n};\r\n\r\nconst NoteContainer = styled(Box)({\r\n  position: 'relative',\r\n  display: 'inline',\r\n  maxWidth: '100%',\r\n});\r\n\r\n// Uses highlight colors driven by status exclusively\r\nconst HighlightWrapper = styled(Box, {\r\n  shouldForwardProp: (prop) =>\r\n    prop !== 'isHovered' &&\r\n    prop !== 'highlightColor' &&\r\n    prop !== 'highlightSelectedColor'\r\n})<{\r\n  isHovered: boolean;\r\n  highlightColor: string;\r\n  highlightSelectedColor: string;\r\n}>(({ isHovered, highlightColor, highlightSelectedColor }) => ({\r\n  position: 'relative',\r\n  display: 'inline',\r\n  maxWidth: '100%',\r\n  '&:hover .edit-button': {\r\n    opacity: 1,\r\n  },\r\n  '& .highlight-span': {\r\n    background: isHovered ? highlightSelectedColor : highlightColor,\r\n    padding: '2px 4px',\r\n    borderBottom: '2px solid rgba(77, 48, 25, 0.3)',\r\n    boxDecorationBreak: 'clone',\r\n    WebkitBoxDecorationBreak: 'clone',\r\n    transition: 'background 0.2s ease',\r\n    cursor: 'pointer',\r\n    fontSize: '1rem',\r\n    wordWrap: 'break-word',\r\n    overflowWrap: 'break-word',\r\n    display: 'inline',\r\n    color: '#4D3019',\r\n  },\r\n}));\r\n\r\nconst EditButton = styled(IconButton)(({ theme }) => ({\r\n  top: 0,\r\n  right: 0,\r\n  transform: 'translate(-50%, -50%)',\r\n  position: 'relative',\r\n  width: 20,\r\n  height: 20,\r\n  marginRight: -20,\r\n  borderRadius: (typeof theme.shape.borderRadius === 'string'\r\n    ? parseInt(theme.shape.borderRadius, 10)\r\n    : theme.shape.borderRadius || 4) * 2,\r\n  backgroundColor: '#4D3019',\r\n  opacity: 0,\r\n  transition: 'all 0.2s ease',\r\n  boxShadow: '0 1px 3px rgba(0,0,0,0.12)',\r\n  '&:hover': {\r\n    backgroundColor: '#4D3019',\r\n    transform: 'translate(-50%, -50%) scale(1.1)',\r\n  },\r\n}));\r\n\r\nexport const NoteBox: React.FC<NoteBoxProps> = ({\r\n  status,\r\n  requirementType,\r\n  label,\r\n  note,\r\n  children,\r\n  className = '',\r\n  onEditClick,\r\n}) => {\r\n  const [isHovered, setIsHovered] = useState(false);\r\n\r\n  // Map current status\r\n  const variableState = mapStatusToVariableState(status!!);\r\n  const requirementTypeState = mapRequirementTypeToState(requirementType!!)\r\n\r\n  const style = variableState\r\n    ? statusConfig[variableState]\r\n    : {\r\n        highlight: '#EEE',\r\n        highlightSelected: '#DDD',\r\n        label: label || '',\r\n      };\r\n\r\n\r\n  const reqTypeConfig = {\r\n    Default: {\r\n      color: '#F5A623',\r\n      highlight: '#f3bf6bff',\r\n      highlightSelected: '#F5A623',\r\n      label: 'Mandatory',\r\n    },\r\n    Optional: {\r\n      color: '#F5D76E',\r\n      highlight: '#f3e2a5ff',\r\n      highlightSelected: '#F5D76E',\r\n      label: 'Optional',\r\n    },\r\n  };\r\n\r\n\r\n  const requirementTypeStyle = requirementTypeState ? reqTypeConfig[requirementTypeState] :\r\n  {\r\n    highlight: '#EEE',\r\n    highlightSelected: '#DDD',\r\n    label: label || '',\r\n  };;\r\n\r\n  \r\n  return (\r\n    <NoteContainer className={className}>\r\n      {/* Alert for note when status matches and note available */}\r\n      {variableState && style.alertVariant && note && (\r\n        <Alert variant={style.alertVariant} sx={{ mb: 1 }}>\r\n          {note}\r\n        </Alert>\r\n      )}\r\n\r\n      {/* Highlighted content box */}\r\n      <HighlightWrapper\r\n        isHovered={isHovered}\r\n        highlightColor={variableState === VariableState.NotStarted? requirementTypeStyle.highlight : style.highlight}\r\n        highlightSelectedColor={variableState === VariableState.NotStarted? requirementTypeStyle.highlightSelected : style.highlightSelected}\r\n        onMouseEnter={() => setIsHovered(true)}\r\n        onMouseLeave={() => setIsHovered(false)}\r\n        onClick={(e) => {\r\n          e.stopPropagation();\r\n          if (onEditClick) {\r\n            onEditClick();\r\n          }\r\n        }}\r\n      >\r\n        <span className=\"highlight-span\" style={{display:'inline'}}>{children}</span>\r\n        <EditButton\r\n          className=\"edit-button\"\r\n          onClick={(e) => {\r\n            e.stopPropagation();\r\n            if (onEditClick) {\r\n              onEditClick();\r\n            }\r\n          }}\r\n          size=\"small\"\r\n        >\r\n          {variableState === VariableState.Accepted\r\n            ? <CheckRounded sx={{ fontSize: 14, color: \"#FFFFFF\", strokeWidth: 2 }} />\r\n            : <EditRounded sx={{ fontSize: 14, color: \"#FFFFFF\", strokeWidth: 2 }} /> }\r\n        </EditButton>\r\n      </HighlightWrapper>\r\n    </NoteContainer>\r\n  );\r\n};\r\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/components/RichTextArea.js

@@ -17,7 +17,7 @@ const StyledTextarea = styled('textarea', {
     fontSize: '1rem',
     minWidth: 0,
     border: `2px solid ${error ? theme.palette.error.main : `${theme.palette.dark.main}33`}`,
-    padding: theme.spacing(1, 3),
+    padding: theme.spacing(1, 1.5),
     fontFamily: theme.typography.fontFamily,
     outline: 'none',
     transition: 'border-color 0.2s',

package/dist/esm/components/RichTextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextArea.js","sources":["../../../../src/components/RichTextArea.tsx"],"sourcesContent":["import React from 'react';\r\nimport { styled, InputLabel } from '@mui/material';\r\nimport { StyledLabel } from './Input';\r\n\r\ninterface RichTextAreaProps {\r\n  error?: string;\r\n  value: string;\r\n  label?: string;\r\n  fullWidth?: boolean;\r\n  id?: string;\r\n  onChange: (question: any, value: string) => void;\r\n  question: any;\r\n  helperText?: string;\r\n  rows?: number;\r\n  disabled?: boolean;\r\n  placeholder?: string;\r\n}\r\n\r\nconst AreaWrapper = styled('div')(({ theme }) => ({\r\n  width: '100%',\r\n}));\r\n\r\nconst StyledTextarea = styled('textarea', {\r\n  shouldForwardProp: (prop) => !['error'].includes(prop as string),\r\n})<{ error?: string }>(({ theme, error }) => ({\r\n  width: '100%',\r\n  backgroundColor: theme.palette.light.main,\r\n  borderRadius: (typeof theme.shape.borderRadius === 'string'\r\n    ? parseInt(theme.shape.borderRadius, 10)\r\n    : theme.shape.borderRadius || 4) * 2,\r\n  color: theme.palette.dark.main,\r\n  fontSize: '1rem',\r\n  minWidth: 0,\r\n  border: `2px solid ${error ? theme.palette.error.main : `${theme.palette.dark.main}33`}`,\r\n  padding: theme.spacing(1, 3),\r\n  fontFamily: theme.typography.fontFamily,\r\n  outline: 'none',\r\n  transition: 'border-color 0.2s',\r\n  '&:focus': {\r\n    borderColor: error ? theme.palette.error.main : theme.palette.primary.main,\r\n  },\r\n  '&:hover': {\r\n    borderColor: error ? theme.palette.error.main : theme.palette.primary.main,\r\n  },\r\n  '&:disabled': {\r\n    backgroundColor: `${theme.palette.dark.main}0D`,\r\n    color: `${theme.palette.dark.main}80`,\r\n    cursor: 'not-allowed',\r\n  },\r\n  resize: 'vertical',\r\n}));\r\n\r\nconst HelperText = styled('div')<{ error?: string }>(({ theme, error }) => ({\r\n  marginTop: theme.spacing(0.75),\r\n  fontSize: '0.875rem',\r\n  color: error ? theme.palette.error.main : `${theme.palette.dark.main}99`,\r\n}));\r\n\r\nexport const RichTextArea: React.FC<RichTextAreaProps> = ({\r\n  error,\r\n  value,\r\n  label,\r\n  fullWidth = false,\r\n  id,\r\n  onChange,\r\n  question,\r\n  helperText,\r\n  rows = 4,\r\n  disabled,\r\n  placeholder,\r\n}) => {\r\n  const inputId = id || `richtextarea-${Math.random().toString(36).substr(2, 9)}`;\r\n\r\n  return (\r\n    <AreaWrapper sx={{ ...(!fullWidth && { width: 'auto' }) }}>\r\n      {label && (\r\n        <StyledLabel htmlFor={inputId}>\r\n          {label}\r\n        </StyledLabel>\r\n      )}\r\n      <StyledTextarea\r\n        id={inputId}\r\n        error={error}\r\n        value={value || ''}\r\n        rows={rows}\r\n        onChange={(e) => onChange(question, e.target.value)}\r\n        disabled={disabled}\r\n        placeholder={placeholder}\r\n      />\r\n      {(error || helperText) && (\r\n        <HelperText error={error}>\r\n          {error || helperText}\r\n        </HelperText>\r\n      )}\r\n    </AreaWrapper>\r\n  );\r\n};\r\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"RichTextArea.js","sources":["../../../../src/components/RichTextArea.tsx"],"sourcesContent":["import React from 'react';\r\nimport { styled, InputLabel } from '@mui/material';\r\nimport { StyledLabel } from './Input';\r\n\r\ninterface RichTextAreaProps {\r\n  error?: string;\r\n  value: string;\r\n  label?: string;\r\n  fullWidth?: boolean;\r\n  id?: string;\r\n  onChange: (question: any, value: string) => void;\r\n  question: any;\r\n  helperText?: string;\r\n  rows?: number;\r\n  disabled?: boolean;\r\n  placeholder?: string;\r\n}\r\n\r\nconst AreaWrapper = styled('div')(({ theme }) => ({\r\n  width: '100%',\r\n}));\r\n\r\nconst StyledTextarea = styled('textarea', {\r\n  shouldForwardProp: (prop) => !['error'].includes(prop as string),\r\n})<{ error?: string }>(({ theme, error }) => ({\r\n  width: '100%',\r\n  backgroundColor: theme.palette.light.main,\r\n  borderRadius: (typeof theme.shape.borderRadius === 'string'\r\n    ? parseInt(theme.shape.borderRadius, 10)\r\n    : theme.shape.borderRadius || 4) * 2,\r\n  color: theme.palette.dark.main,\r\n  fontSize: '1rem',\r\n  minWidth: 0,\r\n  border: `2px solid ${error ? theme.palette.error.main : `${theme.palette.dark.main}33`}`,\r\n  padding: theme.spacing(1, 1.5),\r\n  fontFamily: theme.typography.fontFamily,\r\n  outline: 'none',\r\n  transition: 'border-color 0.2s',\r\n  '&:focus': {\r\n    borderColor: error ? theme.palette.error.main : theme.palette.primary.main,\r\n  },\r\n  '&:hover': {\r\n    borderColor: error ? theme.palette.error.main : theme.palette.primary.main,\r\n  },\r\n  '&:disabled': {\r\n    backgroundColor: `${theme.palette.dark.main}0D`,\r\n    color: `${theme.palette.dark.main}80`,\r\n    cursor: 'not-allowed',\r\n  },\r\n  resize: 'vertical',\r\n}));\r\n\r\nconst HelperText = styled('div')<{ error?: string }>(({ theme, error }) => ({\r\n  marginTop: theme.spacing(0.75),\r\n  fontSize: '0.875rem',\r\n  color: error ? theme.palette.error.main : `${theme.palette.dark.main}99`,\r\n}));\r\n\r\nexport const RichTextArea: React.FC<RichTextAreaProps> = ({\r\n  error,\r\n  value,\r\n  label,\r\n  fullWidth = false,\r\n  id,\r\n  onChange,\r\n  question,\r\n  helperText,\r\n  rows = 4,\r\n  disabled,\r\n  placeholder,\r\n}) => {\r\n  const inputId = id || `richtextarea-${Math.random().toString(36).substr(2, 9)}`;\r\n\r\n  return (\r\n    <AreaWrapper sx={{ ...(!fullWidth && { width: 'auto' }) }}>\r\n      {label && (\r\n        <StyledLabel htmlFor={inputId}>\r\n          {label}\r\n        </StyledLabel>\r\n      )}\r\n      <StyledTextarea\r\n        id={inputId}\r\n        error={error}\r\n        value={value || ''}\r\n        rows={rows}\r\n        onChange={(e) => onChange(question, e.target.value)}\r\n        disabled={disabled}\r\n        placeholder={placeholder}\r\n      />\r\n      {(error || helperText) && (\r\n        <HelperText error={error}>\r\n          {error || helperText}\r\n        </HelperText>\r\n      )}\r\n    </AreaWrapper>\r\n  );\r\n};\r\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/components/Select.js

@@ -55,9 +55,13 @@ const Select = ({ label, error, helperText, fullWidth = false, options, classNam
         }
     };
     return (jsxs(FormControl, { fullWidth: fullWidth, error: !!error, className: className, children: [label && (jsx(StyledLabel, { htmlFor: selectId, shrink: false, children: label })), jsx(StyledSelect, { id: selectId, name: name, value: value || '', onChange: handleChange, disabled: disabled, error: !!error, IconComponent: ExpandMoreRounded, MenuProps: {
+                    MenuListProps: {
+                        sx: {
+                            paddingBottom: 0,
+                        },
+                    },
                     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)',
                         },
@@ -69,9 +73,9 @@ const Select = ({ label, error, helperText, fullWidth = false, options, classNam
                             backgroundColor: `${theme.palette.primary.main}1A`,
                         },
                         '&.Mui-selected': {
-                            backgroundColor: `${theme.palette.primary.main}26`,
+                            backgroundColor: 'transparent',
                             '&:hover': {
-                                backgroundColor: `${theme.palette.primary.main}33`,
+                                backgroundColor: `${theme.palette.primary.main}1A`,
                             },
                         },
                     }, children: option.label }, option.value))) }), error && (jsx(FormHelperText, { sx: {

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

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../../src/components/Select.tsx"],"sourcesContent":["\r\n\r\nimport React from 'react';\r\nimport { FormControl, InputLabel, Select as MuiSelect, MenuItem, FormHelperText, styled } from '@mui/material';\r\nimport { useTheme } from '../ThemeProvider';\r\nimport { ExpandMoreRounded } from '@mui/icons-material';\r\nimport { StyledLabel } from './Input';\r\n\r\ninterface SelectProps {\r\n  label?: string;\r\n  error?: string;\r\n  helperText?: string;\r\n  fullWidth?: boolean;\r\n  options: { value: string; label: string }[];\r\n  value?: string;\r\n  onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;\r\n  disabled?: boolean;\r\n  className?: string;\r\n  id?: string;\r\n  name?: string;\r\n}\r\n\r\nconst StyledSelect = styled(MuiSelect)(({ theme, error }) => ({\r\n  backgroundColor: theme.palette.light.main,\r\n  borderRadius: (typeof theme.shape.borderRadius === 'string'\r\n    ? parseInt(theme.shape.borderRadius, 10)\r\n    : theme.shape.borderRadius || 4) * 2,\r\n  fontSize: '1rem',\r\n  color: theme.palette.dark.main,\r\n  '& .MuiInputBase-root, &.MuiOutlinedInput-root': {\r\n    height: 48,\r\n    padding: 0,\r\n  },\r\n  '& .MuiOutlinedInput-notchedOutline': {\r\n    borderColor: error ? theme.palette.accent.main : `${theme.palette.dark.main}33`,\r\n    borderWidth: 2,\r\n  },\r\n  '&:hover .MuiOutlinedInput-notchedOutline': {\r\n    borderColor: error ? theme.palette.accent.main : theme.palette.primary.main,\r\n    borderWidth: 2,\r\n  },\r\n  '&.Mui-focused .MuiOutlinedInput-notchedOutline': {\r\n    borderWidth: 2,\r\n    borderColor: error ? theme.palette.accent.main : theme.palette.primary.main,\r\n  },\r\n  '&.Mui-disabled': {\r\n    backgroundColor: `${theme.palette.dark.main}0D`,\r\n    '& .MuiSelect-select': {\r\n      color: `${theme.palette.dark.main}80`,\r\n      cursor: 'not-allowed',\r\n    },\r\n  },\r\n  '& .MuiSelect-icon': {\r\n    color: `${theme.palette.dark.main}66`,\r\n  },\r\n}));\r\n\r\nexport const Select: React.FC<SelectProps> = ({\r\n  label,\r\n  error,\r\n  helperText,\r\n  fullWidth = false,\r\n  options,\r\n  className = '',\r\n  id,\r\n  value,\r\n  onChange,\r\n  disabled,\r\n  name,\r\n}) => {\r\n  const theme = useTheme();\r\n  const selectId = id || `select-${Math.random().toString(36).substr(2, 9)}`;\r\n\r\n  const handleChange = (event: any) => {\r\n    if (onChange) {\r\n      // Create a synthetic event that matches React.ChangeEvent<HTMLSelectElement>\r\n      const syntheticEvent = {\r\n        target: {\r\n          value: event.target.value,\r\n          name: name || '',\r\n        },\r\n        currentTarget: event.currentTarget,\r\n      } as React.ChangeEvent<HTMLSelectElement>;\r\n      onChange(syntheticEvent);\r\n    }\r\n  };\r\n\r\n  return (\r\n    <FormControl \r\n      fullWidth={fullWidth} \r\n      error={!!error}\r\n      className={className}\r\n    >\r\n      {label && (\r\n        <StyledLabel htmlFor={selectId} shrink={false}>\r\n          {label}\r\n        </StyledLabel>\r\n      )}\r\n      <StyledSelect\r\n        id={selectId}\r\n        name={name}\r\n        value={value || ''}\r\n        onChange={handleChange}\r\n        disabled={disabled}\r\n        error={!!error}\r\n        IconComponent={ExpandMoreRounded}\r\n        MenuProps={{\r\n          PaperProps: {\r\n            sx: {\r\n              mt: 1,\r\n              borderRadius: 2,\r\n              boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',\r\n            },\r\n          },\r\n        }}\r\n      >\r\n        {options.map((option) => (\r\n          <MenuItem \r\n            key={option.value} \r\n            value={option.value}\r\n            sx={{\r\n              fontSize: '1rem',\r\n              color: theme.palette.dark.main,\r\n              '&:hover': {\r\n                backgroundColor: `${theme.palette.primary.main}1A`,\r\n              },\r\n              '&.Mui-selected': {\r\n                backgroundColor: `${theme.palette.primary.main}26`,\r\n                '&:hover': {\r\n                  backgroundColor: `${theme.palette.primary.main}33`,\r\n                },\r\n              },\r\n            }}\r\n          >\r\n            {option.label}\r\n          </MenuItem>\r\n        ))}\r\n      </StyledSelect>\r\n      {error && (\r\n        <FormHelperText\r\n          sx={{\r\n            mt: 0.75,\r\n            fontSize: '0.875rem',\r\n            color: theme.palette.accent.main,\r\n          }}\r\n        >\r\n          {error}\r\n        </FormHelperText>\r\n      )}\r\n      {helperText && !error && (\r\n        <FormHelperText\r\n          sx={{\r\n            mt: 0.75,\r\n            fontSize: '0.875rem',\r\n            color: `${theme.palette.dark.main}99`,\r\n          }}\r\n        >\r\n          {helperText}\r\n        </FormHelperText>\r\n      )}\r\n    </FormControl>\r\n  );\r\n};"],"names":["MuiSelect","_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"Select.js","sources":["../../../../src/components/Select.tsx"],"sourcesContent":["\r\n\r\nimport React from 'react';\r\nimport { FormControl, InputLabel, Select as MuiSelect, MenuItem, FormHelperText, styled } from '@mui/material';\r\nimport { useTheme } from '../ThemeProvider';\r\nimport { ExpandMoreRounded } from '@mui/icons-material';\r\nimport { StyledLabel } from './Input';\r\n\r\ninterface SelectProps {\r\n  label?: string;\r\n  error?: string;\r\n  helperText?: string;\r\n  fullWidth?: boolean;\r\n  options: { value: string; label: string }[];\r\n  value?: string;\r\n  onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;\r\n  disabled?: boolean;\r\n  className?: string;\r\n  id?: string;\r\n  name?: string;\r\n}\r\n\r\nconst StyledSelect = styled(MuiSelect)(({ theme, error }) => ({\r\n  backgroundColor: theme.palette.light.main,\r\n  borderRadius: (typeof theme.shape.borderRadius === 'string'\r\n    ? parseInt(theme.shape.borderRadius, 10)\r\n    : theme.shape.borderRadius || 4) * 2,\r\n  fontSize: '1rem',\r\n  color: theme.palette.dark.main,\r\n  '& .MuiInputBase-root, &.MuiOutlinedInput-root': {\r\n    height: 48,\r\n    padding: 0,\r\n  },\r\n  '& .MuiOutlinedInput-notchedOutline': {\r\n    borderColor: error ? theme.palette.accent.main : `${theme.palette.dark.main}33`,\r\n    borderWidth: 2,\r\n  },\r\n  '&:hover .MuiOutlinedInput-notchedOutline': {\r\n    borderColor: error ? theme.palette.accent.main : theme.palette.primary.main,\r\n    borderWidth: 2,\r\n  },\r\n  '&.Mui-focused .MuiOutlinedInput-notchedOutline': {\r\n    borderWidth: 2,\r\n    borderColor: error ? theme.palette.accent.main : theme.palette.primary.main,\r\n  },\r\n  '&.Mui-disabled': {\r\n    backgroundColor: `${theme.palette.dark.main}0D`,\r\n    '& .MuiSelect-select': {\r\n      color: `${theme.palette.dark.main}80`,\r\n      cursor: 'not-allowed',\r\n    },\r\n  },\r\n  '& .MuiSelect-icon': {\r\n    color: `${theme.palette.dark.main}66`,\r\n  },\r\n}));\r\n\r\nexport const Select: React.FC<SelectProps> = ({\r\n  label,\r\n  error,\r\n  helperText,\r\n  fullWidth = false,\r\n  options,\r\n  className = '',\r\n  id,\r\n  value,\r\n  onChange,\r\n  disabled,\r\n  name,\r\n}) => {\r\n  const theme = useTheme();\r\n  const selectId = id || `select-${Math.random().toString(36).substr(2, 9)}`;\r\n\r\n  const handleChange = (event: any) => {\r\n    if (onChange) {\r\n      // Create a synthetic event that matches React.ChangeEvent<HTMLSelectElement>\r\n      const syntheticEvent = {\r\n        target: {\r\n          value: event.target.value,\r\n          name: name || '',\r\n        },\r\n        currentTarget: event.currentTarget,\r\n      } as React.ChangeEvent<HTMLSelectElement>;\r\n      onChange(syntheticEvent);\r\n    }\r\n  };\r\n\r\n  return (\r\n    <FormControl \r\n      fullWidth={fullWidth} \r\n      error={!!error}\r\n      className={className}\r\n    >\r\n      {label && (\r\n        <StyledLabel htmlFor={selectId} shrink={false}>\r\n          {label}\r\n        </StyledLabel>\r\n      )}\r\n      <StyledSelect\r\n        id={selectId}\r\n        name={name}\r\n        value={value || ''}\r\n        onChange={handleChange}\r\n        disabled={disabled}\r\n        error={!!error}\r\n        IconComponent={ExpandMoreRounded}\r\n        MenuProps={{\r\n          MenuListProps: {\r\n            sx: {\r\n              paddingBottom: 0,\r\n            },\r\n          },\r\n          PaperProps: {\r\n            sx: {\r\n              borderRadius: 2,\r\n              boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',\r\n            },\r\n          },\r\n        }}\r\n      >\r\n        {options.map((option) => (\r\n          <MenuItem \r\n            key={option.value} \r\n            value={option.value}\r\n            sx={{\r\n              fontSize: '1rem',\r\n              color: theme.palette.dark.main,\r\n              '&:hover': {\r\n                backgroundColor: `${theme.palette.primary.main}1A`,\r\n              },\r\n              '&.Mui-selected': {\r\n                backgroundColor: 'transparent',\r\n                '&:hover': {\r\n                  backgroundColor: `${theme.palette.primary.main}1A`,\r\n                },\r\n              },\r\n            }}\r\n          >\r\n            {option.label}\r\n          </MenuItem>\r\n        ))}\r\n      </StyledSelect>\r\n      {error && (\r\n        <FormHelperText\r\n          sx={{\r\n            mt: 0.75,\r\n            fontSize: '0.875rem',\r\n            color: theme.palette.accent.main,\r\n          }}\r\n        >\r\n          {error}\r\n        </FormHelperText>\r\n      )}\r\n      {helperText && !error && (\r\n        <FormHelperText\r\n          sx={{\r\n            mt: 0.75,\r\n            fontSize: '0.875rem',\r\n            color: `${theme.palette.dark.main}99`,\r\n          }}\r\n        >\r\n          {helperText}\r\n        </FormHelperText>\r\n      )}\r\n    </FormControl>\r\n  );\r\n};"],"names":["MuiSelect","_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/theme-types.d.ts

@@ -26,109 +26,6 @@ declare module '@mui/material/styles' {
             stepIndicatorTextColor?: string;
             tabBackgroundColor?: string;
             statusBarBackgroundColor?: string;
-            dangerBackground?: string;
-            dangerBackgroundHover?: string;
-            alertInfoIconColor?: string;
-            alertNoteIconColor?: string;
-            alertNoteImportantIconColor?: string;
-            alertMarkAsReadIconColor?: string;
-        };
-        statusColors: {
-            accepted: {
-                highlight: string;
-                highlightSelected: string;
-            };
-            pending: {
-                highlight: string;
-                highlightSelected: string;
-            };
-            actionRequired: {
-                highlight: string;
-                highlightSelected: string;
-            };
-            declined: {
-                highlight: string;
-                highlightSelected: string;
-            };
-            notStarted: {
-                highlight: string;
-                highlightSelected: string;
-            };
-            draft: {
-                highlight: string;
-                highlightSelected: string;
-            };
-            mandatory: {
-                color: string;
-                highlight: string;
-                highlightSelected: string;
-            };
-            optional: {
-                color: string;
-                highlight: string;
-                highlightSelected: string;
-            };
-            unknown: {
-                highlight: string;
-                highlightSelected: string;
-            };
-        };
-        alertColors: {
-            info: {
-                background: string;
-                border: string;
-                color: string;
-            };
-            success: {
-                background: string;
-                border: string;
-                color: string;
-            };
-            warning: {
-                background: string;
-                border: string;
-                color: string;
-            };
-            error: {
-                background: string;
-                border: string;
-                color: string;
-            };
-            noteInternalLink: {
-                background: string;
-                border: string;
-                color: string;
-            };
-            noteExternalLink: {
-                background: string;
-                border: string;
-                color: string;
-            };
-            note: {
-                background: string;
-                border: string;
-                color: string;
-            };
-            noteImportant: {
-                background: string;
-                border: string;
-                color: string;
-            };
-            noteTask: {
-                background: string;
-                border: string;
-                color: string;
-            };
-            noteAssurance: {
-                background: string;
-                border: string;
-                color: string;
-            };
-            noteShare: {
-                background: string;
-                border: string;
-                color: string;
-            };
         };
     }
     interface PaletteOptions {
@@ -145,109 +42,6 @@ declare module '@mui/material/styles' {
             stepIndicatorTextColor?: string;
             tabBackgroundColor?: string;
             statusBarBackgroundColor?: string;
-            dangerBackground?: string;
-            dangerBackgroundHover?: string;
-            alertInfoIconColor?: string;
-            alertNoteIconColor?: string;
-            alertNoteImportantIconColor?: string;
-            alertMarkAsReadIconColor?: string;
-        };
-        statusColors?: {
-            accepted?: {
-                highlight: string;
-                highlightSelected: string;
-            };
-            pending?: {
-                highlight: string;
-                highlightSelected: string;
-            };
-            actionRequired?: {
-                highlight: string;
-                highlightSelected: string;
-            };
-            declined?: {
-                highlight: string;
-                highlightSelected: string;
-            };
-            notStarted?: {
-                highlight: string;
-                highlightSelected: string;
-            };
-            draft?: {
-                highlight: string;
-                highlightSelected: string;
-            };
-            mandatory?: {
-                color: string;
-                highlight: string;
-                highlightSelected: string;
-            };
-            optional?: {
-                color: string;
-                highlight: string;
-                highlightSelected: string;
-            };
-            unknown?: {
-                highlight: string;
-                highlightSelected: string;
-            };
-        };
-        alertColors?: {
-            info?: {
-                background: string;
-                border: string;
-                color: string;
-            };
-            success?: {
-                background: string;
-                border: string;
-                color: string;
-            };
-            warning?: {
-                background: string;
-                border: string;
-                color: string;
-            };
-            error?: {
-                background: string;
-                border: string;
-                color: string;
-            };
-            noteInternalLink?: {
-                background: string;
-                border: string;
-                color: string;
-            };
-            noteExternalLink?: {
-                background: string;
-                border: string;
-                color: string;
-            };
-            note?: {
-                background: string;
-                border: string;
-                color: string;
-            };
-            noteImportant?: {
-                background: string;
-                border: string;
-                color: string;
-            };
-            noteTask?: {
-                background: string;
-                border: string;
-                color: string;
-            };
-            noteAssurance?: {
-                background: string;
-                border: string;
-                color: string;
-            };
-            noteShare?: {
-                background: string;
-                border: string;
-                color: string;
-            };
         };
     }
 }