ece-docs-components 1.0.5 → 1.0.7

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sources":["../../../../src/components/Card.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { Box, styled, SxProps, Theme } from '@mui/material';\n\ninterface CardProps {\n  children: React.ReactNode;\n  className?: string;\n  padding?: 'none' | 'sm' | 'md' | 'lg';\n  variant?: 'default' | 'bordered' | 'elevated';\n  sx?: SxProps<Theme>; // Add sx prop to support Material-UI styling\n}\n\nconst StyledCard = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'customPadding' && prop !== 'customVariant',\n})<{ customPadding: string; customVariant: string }>(({ theme, customPadding, customVariant }) => {\n  const paddingStyles = {\n    none: { padding: 0 },\n    sm: { padding: theme.spacing(2) }, // 16px\n    md: { padding: theme.spacing(3) }, // 24px\n    lg: { padding: theme.spacing(4) }, // 32px\n  };\n\n  const variantStyles = {\n    default: {\n      border: `1px solid ${theme.palette.dark.main}10`, // dark.main with 10% opacity\n    },\n    bordered: {\n      border: `2px solid ${theme.palette.dark.main}20`, // dark.main with 20% opacity\n    },\n    elevated: {\n      border: `1px solid ${theme.palette.dark.main}05`, // dark.main with 5% opacity\n      boxShadow: theme.shadows[4], // MUI shadow level 4 for \"elevated\"\n    },\n  };\n\n  const borderRadiusValue = typeof theme.shape.borderRadius === 'string'\n    ? parseInt(theme.shape.borderRadius, 10)\n    : theme.shape.borderRadius || 4;\n\n  return {\n    borderRadius: borderRadiusValue * 2, // Matches rounded-xl (approx 12px)\n    overflow: 'visible',\n    backgroundColor: theme.palette.light.main, // Matches #FEFDF7\n    ...paddingStyles[customPadding as keyof typeof paddingStyles],\n    ...variantStyles[customVariant as keyof typeof variantStyles],\n  };\n});\n\nexport const Card: React.FC<CardProps> = ({\n  children,\n  className = '',\n  padding = 'md',\n  variant = 'default',\n  sx, // Destructure sx prop\n}) => {\n  return (\n    <StyledCard\n      className={className}\n      customPadding={padding}\n      customVariant={variant}\n      sx={sx} // Pass sx prop to StyledCard\n    >\n      {children}\n    </StyledCard>\n  );\n};"],"names":[],"mappings":";;;;;;AAaA;AACE;;AAEA;AACE;AACA;AACA;AACA;;AAGF;AACE;;AAEC;AACD;;AAEC;AACD;;;AAGC;;;;;;AAQD;AACA;;;;;AAKJ;;AAQC;;AAWD;;"}

package/dist/cjs/components/Checkbox.js

@@ -0,0 +1,42 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var material = require('@mui/material');
+
+const StyledWrapper = material.styled(material.Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'flex-start',
+}));
+const StyledCheckbox = material.styled(material.Checkbox)(({ theme }) => ({
+    width: 16, // Matches Tailwind's w-4 (16px)
+    height: 16, // Matches Tailwind's h-4 (16px)
+    color: theme.palette.dark.main + '33', // dark.main with 20% opacity (border-dark/20)
+    '&.Mui-checked': {
+        color: theme.palette.primary.main, // text-primary
+    },
+    '&:focus': {
+        outline: `2px solid ${theme.palette.primary.main}`, // focus:ring-2 focus:ring-primary
+        outlineOffset: 2,
+    },
+    borderRadius: theme.shape.borderRadius, // Matches rounded
+    cursor: 'pointer',
+}));
+const StyledLabel = material.styled(material.Typography)(({ theme }) => ({
+    fontSize: '1rem', // text-base (16px)
+    fontWeight: 500, // font-medium
+    color: theme.palette.dark.main, // text-dark
+    cursor: 'pointer',
+}));
+const StyledDescription = material.styled(material.Typography)(({ theme }) => ({
+    fontSize: '0.875rem', // text-sm (14px)
+    color: theme.palette.dark.main + '99', // dark.main with 60% opacity (text-dark/60)
+    marginTop: theme.spacing(0.5), // mt-0.5
+}));
+const Checkbox = ({ label, description, className = '', id, ...props }) => {
+    const checkboxId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
+    return (jsxRuntime.jsx(StyledWrapper, { className: className, children: jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(StyledCheckbox, { id: checkboxId, ...props }), label: jsxRuntime.jsxs(material.Box, { sx: { ml: 1.5, display: 'flex', flexDirection: 'column' }, children: [jsxRuntime.jsx(StyledLabel, { children: label }), description && jsxRuntime.jsx(StyledDescription, { children: description })] }) }) }));
+};
+
+exports.Checkbox = Checkbox;
+//# sourceMappingURL=Checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sources":["../../../../src/components/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { Box, Checkbox as MuiCheckbox, CheckboxProps, FormControlLabel, styled, Typography } from '@mui/material';\n\ninterface CustomCheckboxProps extends CheckboxProps {\n  label: string;\n  description?: string;\n}\n\nconst StyledWrapper = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'flex-start',\n}));\n\nconst StyledCheckbox = styled(MuiCheckbox)(({ theme }) => ({\n  width: 16, // Matches Tailwind's w-4 (16px)\n  height: 16, // Matches Tailwind's h-4 (16px)\n  color: theme.palette.dark.main + '33', // dark.main with 20% opacity (border-dark/20)\n  '&.Mui-checked': {\n    color: theme.palette.primary.main, // text-primary\n  },\n  '&:focus': {\n    outline: `2px solid ${theme.palette.primary.main}`, // focus:ring-2 focus:ring-primary\n    outlineOffset: 2,\n  },\n  borderRadius: theme.shape.borderRadius, // Matches rounded\n  cursor: 'pointer',\n}));\n\nconst StyledLabel = styled(Typography)(({ theme }) => ({\n  fontSize: '1rem', // text-base (16px)\n  fontWeight: 500, // font-medium\n  color: theme.palette.dark.main, // text-dark\n  cursor: 'pointer',\n}));\n\nconst StyledDescription = styled(Typography)(({ theme }) => ({\n  fontSize: '0.875rem', // text-sm (14px)\n  color: theme.palette.dark.main + '99', // dark.main with 60% opacity (text-dark/60)\n  marginTop: theme.spacing(0.5), // mt-0.5\n}));\n\nexport const Checkbox: React.FC<CustomCheckboxProps> = ({\n  label,\n  description,\n  className = '',\n  id,\n  ...props\n}) => {\n  const checkboxId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;\n\n  return (\n    <StyledWrapper className={className}>\n      <FormControlLabel\n        control={\n          <StyledCheckbox\n            id={checkboxId}\n            {...props}\n          />\n        }\n        label={\n          <Box sx={{ ml: 1.5, display: 'flex', flexDirection: 'column' }}>\n            <StyledLabel>{label}</StyledLabel>\n            {description && <StyledDescription>{description}</StyledDescription>}\n          </Box>\n        }\n      />\n    </StyledWrapper>\n  );\n};"],"names":[],"mappings":";;;;;;AAUA;AACE;AACA;AACD;AAED;;;;AAIE;;AAEC;AACD;;AAEE;AACD;AACD;AACA;AACD;AAED;;;;AAIE;AACD;AAED;;;;AAIC;;;AAWC;AAkBF;;"}

package/dist/cjs/components/Concertina.js

@@ -0,0 +1,153 @@
+"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 StyledConcertina = material.styled(material.Box)(({ theme }) => ({
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(1), // space-y-2
+}));
+const StyledSection = material.styled(material.Box)(({ theme }) => ({
+    border: `1px solid ${theme.palette.grey[200]}`, // border-gray-200
+    borderRadius: (typeof theme.shape.borderRadius === 'string'
+        ? parseInt(theme.shape.borderRadius, 10)
+        : theme.shape.borderRadius || 4) * 2, // rounded-lg
+    overflow: 'hidden',
+}));
+const StyledHeader = material.styled(material.Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: theme.spacing(3), // p-3 sm:p-4 md:p-6
+    cursor: 'pointer',
+    transition: 'background-color 0.2s',
+    gap: theme.spacing(2), // gap-2
+    '&:hover': {
+        backgroundColor: theme.palette.light.main, // hover:bg-[#FDFCEE]
+    },
+    [theme.breakpoints.up('sm')]: {
+        padding: theme.spacing(4),
+    },
+    [theme.breakpoints.up('md')]: {
+        padding: theme.spacing(6),
+    },
+}));
+const StyledTitleWrapper = material.styled(material.Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(3), // sm:gap-3
+    flex: 1,
+    minWidth: 0,
+    [theme.breakpoints.down('sm')]: {
+        gap: theme.spacing(2), // gap-2
+    },
+}));
+const StyledTitle = material.styled(material.Typography, {
+    shouldForwardProp: (prop) => prop !== 'isHovered',
+})(({ theme, isHovered }) => ({
+    fontWeight: 700, // font-bold
+    fontSize: '1.5rem', // text-2xl
+    lineHeight: 1.2, // leading-tight
+    color: theme.palette.dark.main, // text-[#4D3019]
+    wordBreak: 'break-word', // break-words
+    position: 'relative',
+    '&:after': {
+        content: '""',
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        width: '100%',
+        height: 1,
+        backgroundColor: theme.palette.accent.main, // bg-orange-500
+        display: isHovered ? 'block' : 'none',
+    },
+    [theme.breakpoints.down('lg')]: {
+        fontSize: '1.25rem', // lg:text-[28px]
+    },
+    [theme.breakpoints.down('md')]: {
+        fontSize: '1.125rem', // md:text-xl
+    },
+    [theme.breakpoints.down('sm')]: {
+        fontSize: '1rem', // sm:text-lg
+    },
+}));
+const StyledLinkButton = material.styled(material.IconButton)(({ theme }) => ({
+    color: theme.palette.accent.main, // text-orange-500
+    '&:hover': {
+        color: theme.palette.accent.dark || theme.palette.accent.main, // hover:text-orange-600
+    },
+    padding: 0,
+}));
+const StyledTooltip = material.styled(material.Box)(({ theme }) => ({
+    position: 'absolute',
+    top: -40, // -top-10
+    left: '50%',
+    transform: 'translateX(-50%)',
+    backgroundColor: theme.palette.grey[900], // bg-gray-900
+    color: theme.palette.common.white, // text-white
+    fontSize: '0.75rem', // text-xs
+    padding: theme.spacing(1, 2), // px-2 py-1
+    borderRadius: theme.shape.borderRadius, // rounded
+    whiteSpace: 'nowrap',
+    zIndex: 10,
+    [theme.breakpoints.up('sm')]: {
+        fontSize: '0.875rem', // sm:text-sm
+        padding: theme.spacing(1.5, 3), // sm:px-3 sm:py-1.5
+    },
+}));
+const StyledChevron = material.styled(iconsMaterial.ExpandMoreRounded)(({ theme }) => ({
+    color: theme.palette.grey[500], // text-gray-500
+    transition: 'transform 0.2s', // transition-transform duration-200
+    width: 24, // sm:w-6
+    height: 24, // sm:h-6
+    [theme.breakpoints.down('sm')]: {
+        width: 20,
+        height: 20,
+    },
+}));
+const StyledContent = material.styled(material.Box)(({ theme }) => ({
+    padding: theme.spacing(2, 3, 3), // px-3 pb-3 pt-2
+    [theme.breakpoints.up('sm')]: {
+        padding: theme.spacing(2, 4, 4), // sm:px-4 sm:pb-4
+    },
+    [theme.breakpoints.up('md')]: {
+        padding: theme.spacing(2, 6, 6), // md:px-6 md:pb-6
+    },
+}));
+const StyledContentText = material.styled(material.Typography)(({ theme }) => ({
+    color: theme.palette.dark.main, // text-[#4D3019]
+    lineHeight: 1.5, // leading-relaxed
+    wordBreak: 'break-word', // break-words
+    fontSize: 13, // style={{ fontSize: '13px' }}
+}));
+function Concertina({ sections }) {
+    const [openSections, setOpenSections] = React.useState(new Set());
+    const [hoveredTitle, setHoveredTitle] = React.useState(null);
+    const [copiedId, setCopiedId] = React.useState(null);
+    const toggleSection = (id) => {
+        const newOpenSections = new Set(openSections);
+        if (newOpenSections.has(id)) {
+            newOpenSections.delete(id);
+        }
+        else {
+            newOpenSections.add(id);
+        }
+        setOpenSections(newOpenSections);
+    };
+    const copyJumpLink = (id, e) => {
+        e.stopPropagation();
+        const url = `${window.location.origin}${window.location.pathname}#${id}`;
+        navigator.clipboard.writeText(url);
+        setCopiedId(id);
+        setTimeout(() => setCopiedId(null), 2000);
+    };
+    return (jsxRuntime.jsx(StyledConcertina, { children: sections.map((section) => (jsxRuntime.jsxs(StyledSection, { id: section.id, children: [jsxRuntime.jsxs(StyledHeader, { onClick: () => toggleSection(section.id), onMouseEnter: () => setHoveredTitle(section.id), onMouseLeave: () => setHoveredTitle(null), children: [jsxRuntime.jsxs(StyledTitleWrapper, { children: [jsxRuntime.jsx(StyledTitle, { isHovered: hoveredTitle === section.id, variant: "h3", children: section.title }), hoveredTitle === section.id && (jsxRuntime.jsxs(material.Box, { sx: { position: 'relative', flexShrink: 0 }, children: [jsxRuntime.jsx(StyledLinkButton, { onClick: (e) => copyJumpLink(section.id, e), "aria-label": "Copy link", children: jsxRuntime.jsx(iconsMaterial.LinkRounded, { sx: { fontSize: 20 } }) }), copiedId === section.id && (jsxRuntime.jsx(StyledTooltip, { children: "Link copied" }))] }))] }), jsxRuntime.jsx(StyledChevron, { sx: { fontSize: 20, transform: openSections.has(section.id) ? 'rotate(180deg)' : 'none' } })] }), jsxRuntime.jsx(material.Collapse, { in: openSections.has(section.id), children: jsxRuntime.jsx(StyledContent, { children: jsxRuntime.jsx(StyledContentText, { children: section.content }) }) })] }, section.id))) }));
+}
+
+exports.Concertina = Concertina;
+//# sourceMappingURL=Concertina.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Concertina.js","sources":["../../../../src/components/Concertina.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState } from 'react';\nimport { Box, styled, Typography, IconButton, Collapse } from '@mui/material';\nimport { ExpandMoreRounded, LinkRounded } from '@mui/icons-material';\n\ninterface ConcertinaSection {\n  id: string;\n  title: string;\n  content: string;\n}\n\ninterface ConcertinaProps {\n  sections: ConcertinaSection[];\n}\n\nconst StyledConcertina = styled(Box)(({ theme }) => ({\n  width: '100%',\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(1), // space-y-2\n}));\n\nconst StyledSection = styled(Box)(({ theme }) => ({\n  border: `1px solid ${theme.palette.grey[200]}`, // border-gray-200\n  borderRadius: (typeof theme.shape.borderRadius === 'string'\n  ? parseInt(theme.shape.borderRadius, 10)\n  : theme.shape.borderRadius || 4) * 2, // rounded-lg\n  overflow: 'hidden',\n}));\n\nconst StyledHeader = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  padding: theme.spacing(3), // p-3 sm:p-4 md:p-6\n  cursor: 'pointer',\n  transition: 'background-color 0.2s',\n  gap: theme.spacing(2), // gap-2\n  '&:hover': {\n    backgroundColor: theme.palette.light.main, // hover:bg-[#FDFCEE]\n  },\n  [theme.breakpoints.up('sm')]: {\n    padding: theme.spacing(4),\n  },\n  [theme.breakpoints.up('md')]: {\n    padding: theme.spacing(6),\n  },\n}));\n\nconst StyledTitleWrapper = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(3), // sm:gap-3\n  flex: 1,\n  minWidth: 0,\n  [theme.breakpoints.down('sm')]: {\n    gap: theme.spacing(2), // gap-2\n  },\n}));\n\nconst StyledTitle = styled(Typography, {\n  shouldForwardProp: (prop) => prop !== 'isHovered',\n})<{ isHovered: boolean }>(({ theme, isHovered }) => ({\n  fontWeight: 700, // font-bold\n  fontSize: '1.5rem', // text-2xl\n  lineHeight: 1.2, // leading-tight\n  color: theme.palette.dark.main, // text-[#4D3019]\n  wordBreak: 'break-word', // break-words\n  position: 'relative',\n  '&:after': {\n    content: '\"\"',\n    position: 'absolute',\n    bottom: 0,\n    left: 0,\n    width: '100%',\n    height: 1,\n    backgroundColor: theme.palette.accent.main, // bg-orange-500\n    display: isHovered ? 'block' : 'none',\n  },\n  [theme.breakpoints.down('lg')]: {\n    fontSize: '1.25rem', // lg:text-[28px]\n  },\n  [theme.breakpoints.down('md')]: {\n    fontSize: '1.125rem', // md:text-xl\n  },\n  [theme.breakpoints.down('sm')]: {\n    fontSize: '1rem', // sm:text-lg\n  },\n}));\n\nconst StyledLinkButton = styled(IconButton)(({ theme }) => ({\n  color: theme.palette.accent.main, // text-orange-500\n  '&:hover': {\n    color: theme.palette.accent.dark || theme.palette.accent.main, // hover:text-orange-600\n  },\n  padding: 0,\n}));\n\nconst StyledTooltip = styled(Box)(({ theme }) => ({\n  position: 'absolute',\n  top: -40, // -top-10\n  left: '50%',\n  transform: 'translateX(-50%)',\n  backgroundColor: theme.palette.grey[900], // bg-gray-900\n  color: theme.palette.common.white, // text-white\n  fontSize: '0.75rem', // text-xs\n  padding: theme.spacing(1, 2), // px-2 py-1\n  borderRadius: theme.shape.borderRadius, // rounded\n  whiteSpace: 'nowrap',\n  zIndex: 10,\n  [theme.breakpoints.up('sm')]: {\n    fontSize: '0.875rem', // sm:text-sm\n    padding: theme.spacing(1.5, 3), // sm:px-3 sm:py-1.5\n  },\n}));\n\nconst StyledChevron = styled(ExpandMoreRounded)(({ theme }) => ({\n  color: theme.palette.grey[500], // text-gray-500\n  transition: 'transform 0.2s', // transition-transform duration-200\n  width: 24, // sm:w-6\n  height: 24, // sm:h-6\n  [theme.breakpoints.down('sm')]: {\n    width: 20,\n    height: 20,\n  },\n}));\n\nconst StyledContent = styled(Box)(({ theme }) => ({\n  padding: theme.spacing(2, 3, 3), // px-3 pb-3 pt-2\n  [theme.breakpoints.up('sm')]: {\n    padding: theme.spacing(2, 4, 4), // sm:px-4 sm:pb-4\n  },\n  [theme.breakpoints.up('md')]: {\n    padding: theme.spacing(2, 6, 6), // md:px-6 md:pb-6\n  },\n}));\n\nconst StyledContentText = styled(Typography)(({ theme }) => ({\n  color: theme.palette.dark.main, // text-[#4D3019]\n  lineHeight: 1.5, // leading-relaxed\n  wordBreak: 'break-word', // break-words\n  fontSize: 13, // style={{ fontSize: '13px' }}\n}));\n\nexport function Concertina({ sections }: ConcertinaProps) {\n  const [openSections, setOpenSections] = useState<Set<string>>(new Set());\n  const [hoveredTitle, setHoveredTitle] = useState<string | null>(null);\n  const [copiedId, setCopiedId] = useState<string | null>(null);\n\n  const toggleSection = (id: string) => {\n    const newOpenSections = new Set(openSections);\n    if (newOpenSections.has(id)) {\n      newOpenSections.delete(id);\n    } else {\n      newOpenSections.add(id);\n    }\n    setOpenSections(newOpenSections);\n  };\n\n  const copyJumpLink = (id: string, e: React.MouseEvent) => {\n    e.stopPropagation();\n    const url = `${window.location.origin}${window.location.pathname}#${id}`;\n    navigator.clipboard.writeText(url);\n    setCopiedId(id);\n    setTimeout(() => setCopiedId(null), 2000);\n  };\n\n  return (\n    <StyledConcertina>\n      {sections.map((section) => (\n        <StyledSection key={section.id} id={section.id}>\n          <StyledHeader\n            onClick={() => toggleSection(section.id)}\n            onMouseEnter={() => setHoveredTitle(section.id)}\n            onMouseLeave={() => setHoveredTitle(null)}\n          >\n            <StyledTitleWrapper>\n              <StyledTitle isHovered={hoveredTitle === section.id} variant=\"h3\">\n                {section.title}\n              </StyledTitle>\n              {hoveredTitle === section.id && (\n                <Box sx={{ position: 'relative', flexShrink: 0 }}>\n                  <StyledLinkButton\n                    onClick={(e) => copyJumpLink(section.id, e)}\n                    aria-label=\"Copy link\"\n                  >\n                    <LinkRounded sx={{fontSize: 20}} />\n                  </StyledLinkButton>\n                  {copiedId === section.id && (\n                    <StyledTooltip>\n                      Link copied\n                    </StyledTooltip>\n                  )}\n                </Box>\n              )}\n            </StyledTitleWrapper>\n            <StyledChevron\n              sx={{ fontSize:20, transform: openSections.has(section.id) ? 'rotate(180deg)' : 'none' }}\n            />\n          </StyledHeader>\n          <Collapse in={openSections.has(section.id)}>\n            <StyledContent>\n              <StyledContentText>{section.content}</StyledContentText>\n            </StyledContent>\n          </Collapse>\n        </StyledSection>\n      ))}\n    </StyledConcertina>\n  );\n}"],"names":[],"mappings":";;;;;;;;AAgBA;AACE;AACA;AACA;;AAED;AAED;AACE;;;AAGA;AACA;AACD;AAED;AACE;AACA;AACA;;AAEA;AACA;;AAEA;;AAEC;;AAEC;AACD;;AAEC;AACD;AACF;AAED;AACE;AACA;;AAEA;AACA;;;AAGC;AACF;AAED;;;;;;;;AAQE;AACA;AACE;AACA;AACA;AACA;AACA;AACA;;;AAGD;;;AAGA;;;AAGA;;;AAGA;AACF;AAED;;AAEE;AACE;AACD;AACD;AACD;AAED;AACE;AACA;AACA;AACA;;;;;AAKA;AACA;AACA;;;;AAIC;AACF;AAED;;;;;;AAMI;AACA;AACD;AACF;AAED;AACE;;AAEE;AACD;;AAEC;AACD;AACF;AAED;;;;;AAKC;AAEK;AACJ;;;AAIA;AACE;AACA;AACE;;;AAEA;;;AAGJ;AAEA;;AAEE;AACA;;;AAGF;;AA4CF;;"}

package/dist/cjs/components/DefinitionBox.js

@@ -0,0 +1,77 @@
+"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 StyledWrapper = material.styled(material.Box)(({ theme }) => ({
+// No specific wrapper styles needed, just a container
+}));
+const StyledParagraph = material.styled(material.Typography)(({ theme }) => ({
+    fontSize: '14px', // text-[14px]
+    color: theme.palette.dark.main, // text-[#4D3019]
+    display: 'inline-flex',
+    alignItems: 'center',
+}));
+const StyledTermWrapper = material.styled(material.Box)(({ theme }) => ({
+    position: 'relative',
+    display: 'inline-flex',
+    alignItems: 'center',
+    cursor: 'pointer',
+    marginLeft: theme.spacing(0.5), // ml-1
+}));
+const StyledTerm = material.styled('span', {
+    shouldForwardProp: (prop) => prop !== 'isOpen',
+})(({ theme, isOpen }) => ({
+    paddingBottom: '1px', // style={{ paddingBottom: '1px' }}
+    borderBottom: `2px solid ${isOpen ? theme.palette.secondary.main : theme.palette.dark.main}`, // border-b-2
+    transition: 'border-bottom-color 0.2s', // transition-colors
+    '&:hover': {
+        borderBottomColor: theme.palette.secondary.main, // hover effect
+    },
+}));
+const StyledIconWrapper = material.styled(material.Box)(({ theme }) => ({
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginLeft: theme.spacing(0.5), // ml-1
+    transition: 'color 0.2s', // transition-colors
+}));
+const StyledDefinitionBox = material.styled(material.Box)(({ theme }) => ({
+    marginTop: theme.spacing(2), // mt-4
+    padding: theme.spacing(2), // p-4
+    borderRadius: (typeof theme.shape.borderRadius === 'string'
+        ? parseInt(theme.shape.borderRadius, 10)
+        : theme.shape.borderRadius || 4) * 2, // rounded-lg
+    border: `1px solid ${theme.palette.dark.main}33`, // border-[#4D3019]/20
+    borderRight: `4px solid ${theme.palette.dark.main}33`, // border-r-4
+    backgroundColor: theme.palette.light.main, // style={{ backgroundColor: '#FDFCEE' }}
+}));
+const StyledDefinitionText = material.styled(material.Typography)(({ theme }) => ({
+    fontSize: '14px', // text-[14px]
+    color: theme.palette.dark.main, // text-[#4D3019]
+    lineHeight: 1.5, // leading-relaxed
+}));
+function DefinitionBox({ term, definition, children }) {
+    const { theme } = ThemeProvider.useTheme();
+    const [isOpen, setIsOpen] = React.useState(false);
+    return (jsxRuntime.jsxs(StyledWrapper, { children: [jsxRuntime.jsxs(StyledParagraph, { children: [children, jsxRuntime.jsxs(StyledTermWrapper, { onClick: () => setIsOpen(!isOpen), children: [jsxRuntime.jsx(StyledTerm, { isOpen: isOpen, onMouseEnter: (e) => (e.currentTarget.style.borderBottomColor = theme.palette.secondary.main), onMouseLeave: (e) => (e.currentTarget.style.borderBottomColor = isOpen ? theme.palette.secondary.main : theme.palette.dark.main), children: term }), jsxRuntime.jsx(StyledIconWrapper, { children: isOpen ? (jsxRuntime.jsx(iconsMaterial.CloseRounded, { sx: {
+                                        fontSize: 16,
+                                        color: isOpen ? theme.palette.secondary.main : theme.palette.dark.main,
+                                        '&:hover': {
+                                            color: theme.palette.secondary.main
+                                        }
+                                    } })) : (jsxRuntime.jsx(iconsMaterial.AddRounded, { sx: {
+                                        fontSize: 16,
+                                        color: theme.palette.dark.main,
+                                        '&:hover': {
+                                            color: theme.palette.secondary.main
+                                        }
+                                    } })) })] })] }), isOpen && (jsxRuntime.jsx(StyledDefinitionBox, { children: jsxRuntime.jsx(StyledDefinitionText, { children: definition }) }))] }));
+}
+
+exports.DefinitionBox = DefinitionBox;
+//# sourceMappingURL=DefinitionBox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DefinitionBox.js","sources":["../../../../src/components/DefinitionBox.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState } from 'react';\nimport { Box, styled, Typography } from '@mui/material';\nimport { useTheme } from '../ThemeProvider';\nimport { AddRounded, CloseRounded } from '@mui/icons-material';\n\ninterface DefinitionBoxProps {\n  term: string;\n  definition: string;\n  children: React.ReactNode;\n}\n\nconst StyledWrapper = styled(Box)(({ theme }) => ({\n  // No specific wrapper styles needed, just a container\n}));\n\nconst StyledParagraph = styled(Typography)(({ theme }) => ({\n  fontSize: '14px', // text-[14px]\n  color: theme.palette.dark.main, // text-[#4D3019]\n  display: 'inline-flex',\n  alignItems: 'center',\n}));\n\nconst StyledTermWrapper = styled(Box)(({ theme }) => ({\n  position: 'relative',\n  display: 'inline-flex',\n  alignItems: 'center',\n  cursor: 'pointer',\n  marginLeft: theme.spacing(0.5), // ml-1\n}));\n\nconst StyledTerm = styled('span', {\n  shouldForwardProp: (prop) => prop !== 'isOpen',\n})<{ isOpen: boolean }>(({ theme, isOpen }) => ({\n  paddingBottom: '1px', // style={{ paddingBottom: '1px' }}\n  borderBottom: `2px solid ${isOpen ? theme.palette.secondary.main : theme.palette.dark.main}`, // border-b-2\n  transition: 'border-bottom-color 0.2s', // transition-colors\n  '&:hover': {\n    borderBottomColor: theme.palette.secondary.main, // hover effect\n  },\n}));\n\nconst StyledIconWrapper = styled(Box)(({ theme }) => ({\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  marginLeft: theme.spacing(0.5), // ml-1\n  transition: 'color 0.2s', // transition-colors\n}));\n\nconst StyledDefinitionBox = styled(Box)(({ theme }) => ({\n  marginTop: theme.spacing(2), // mt-4\n  padding: theme.spacing(2), // p-4\n  borderRadius: (typeof theme.shape.borderRadius === 'string'\n  ? parseInt(theme.shape.borderRadius, 10)\n  : theme.shape.borderRadius || 4) * 2, // rounded-lg\n  border: `1px solid ${theme.palette.dark.main}33`, // border-[#4D3019]/20\n  borderRight: `4px solid ${theme.palette.dark.main}33`, // border-r-4\n  backgroundColor: theme.palette.light.main, // style={{ backgroundColor: '#FDFCEE' }}\n}));\n\nconst StyledDefinitionText = styled(Typography)(({ theme }) => ({\n  fontSize: '14px', // text-[14px]\n  color: theme.palette.dark.main, // text-[#4D3019]\n  lineHeight: 1.5, // leading-relaxed\n}));\n\nexport function DefinitionBox({ term, definition, children }: DefinitionBoxProps) {\n  const { theme } = useTheme();\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <StyledWrapper>\n      <StyledParagraph>\n        {children}\n        <StyledTermWrapper onClick={() => setIsOpen(!isOpen)}>\n          <StyledTerm\n            isOpen={isOpen}\n            onMouseEnter={(e) => (e.currentTarget.style.borderBottomColor = theme.palette.secondary.main)}\n            onMouseLeave={(e) => (e.currentTarget.style.borderBottomColor = isOpen ? theme.palette.secondary.main : theme.palette.dark.main)}\n          >\n            {term}\n          </StyledTerm>\n          <StyledIconWrapper>\n            {isOpen ? (\n              <CloseRounded\n                sx={{\n                  fontSize: 16,\n                  color: isOpen ? theme.palette.secondary.main : theme.palette.dark.main,\n                  '&:hover': {\n                    color: theme.palette.secondary.main\n                  }\n                }}\n              />\n            ) : (\n              <AddRounded\n                sx={{\n                  fontSize: 16,\n                  color: theme.palette.dark.main,\n                  '&:hover': {\n                    color: theme.palette.secondary.main\n                  }\n                }}\n              />\n            )}\n          </StyledIconWrapper>\n        </StyledTermWrapper>\n      </StyledParagraph>\n      {isOpen && (\n        <StyledDefinitionBox>\n          <StyledDefinitionText>{definition}</StyledDefinitionText>\n        </StyledDefinitionBox>\n      )}\n    </StyledWrapper>\n  );\n}"],"names":[],"mappings":";;;;;;;;;AAaA;AACE;AACD;AAED;;;AAGE;AACA;AACD;AAED;AACE;AACA;AACA;AACA;;AAED;AAED;;;;;;AAME;;AAEC;AACF;AAED;AACE;AACA;AACA;;;AAGD;AAED;;;;;AAKE;;;;AAID;AAED;;;;AAIC;AAEK;AACJ;;;AAmBgB;;AAEA;AACE;AACD;;AAMD;AACA;AACA;AACE;AACD;;AAcnB;;"}

package/dist/cjs/components/Header.js

@@ -0,0 +1,177 @@
+"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 StyledHeader = material.styled(material.Box)(({ theme }) => ({
+    padding: theme.spacing(1.5, 4), // px-4 py-3
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: theme.spacing(2), // gap-2
+    backgroundColor: theme.palette.primary.main, // var(--color-primary)
+    [theme.breakpoints.up('sm')]: {
+        padding: theme.spacing(2, 6), // sm:px-6
+    },
+    [theme.breakpoints.up('md')]: {
+        padding: theme.spacing(2, 8), // md:px-8
+        gap: theme.spacing(4), // md:gap-4
+    },
+}));
+const StyledLogoWrapper = material.styled(material.Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(2), // md:gap-2
+    [theme.breakpoints.down('md')]: {
+        gap: theme.spacing(1.5), // gap-1.5
+    },
+}));
+const StyledLogoIcon = material.styled(material.Box)(({ theme }) => ({
+    width: 32, // md:w-8 md:h-8
+    height: 32,
+    color: theme.palette.light.main, // text-[#FDFCEE]
+    [theme.breakpoints.down('md')]: {
+        width: 24, // w-6
+        height: 24, // h-6
+    },
+}));
+const StyledLogoText = material.styled(material.Typography)(({ theme }) => ({
+    color: theme.palette.light.main, // text-[#FDFCEE]
+    fontWeight: 700, // font-bold
+    letterSpacing: '0.05em', // tracking-wide
+    fontSize: '1.5rem', // text-2xl
+    [theme.breakpoints.down('md')]: {
+        fontSize: '1.25rem', // sm:text-xl
+    },
+    [theme.breakpoints.down('sm')]: {
+        fontSize: '1.125rem', // text-lg
+    },
+}));
+const StyledSearchContainer = material.styled(material.Box)(({ theme }) => ({
+    flex: 1,
+    maxWidth: '32rem', // max-w-2xl
+    margin: theme.spacing(0, 8), // mx-8
+    position: 'relative',
+    [theme.breakpoints.down('md')]: {
+        margin: theme.spacing(0, 4), // sm:mx-4
+    },
+    [theme.breakpoints.down('sm')]: {
+        margin: theme.spacing(0, 2), // mx-2
+    },
+}));
+const StyledTextField = material.styled(material.TextField)(({ theme }) => ({
+    '& .MuiInputBase-root': {
+        backgroundColor: theme.palette.light.main, // bg-[#FDFCEE]
+        color: theme.palette.dark.main, // text-[#4D3019]
+        borderRadius: '9999px', // rounded-full
+        paddingRight: theme.spacing(6), // pr-12
+        fontSize: '1rem', // text-base
+        [theme.breakpoints.down('md')]: {
+            paddingRight: theme.spacing(5), // sm:pr-10
+            fontSize: '0.875rem', // text-sm
+        },
+    },
+    '& .MuiInputBase-input': {
+        padding: theme.spacing(1.5, 3), // px-4 py-2
+        [theme.breakpoints.up('md')]: {
+            padding: theme.spacing(1.5, 4), // md:px-6 md:py-3
+        },
+        [theme.breakpoints.down('sm')]: {
+            padding: theme.spacing(1.5, 2.5), // sm:px-5
+        },
+    },
+    '& .MuiInputBase-input::placeholder': {
+        color: `${theme.palette.dark.main}99`, // placeholder-[#4D3019]/60
+        opacity: 1,
+    },
+    '& .MuiInputBase-root:focus-within': {
+        outline: `2px solid ${theme.palette.light.main}`, // focus:ring-2 focus:ring-[#FDFCEE]
+        outlineOffset: 0,
+    },
+}));
+const StyledSearchButton = material.styled(material.IconButton)(({ theme }) => ({
+    position: 'absolute',
+    right: theme.spacing(2), // md:right-2
+    top: '50%',
+    transform: 'translateY(-50%)',
+    width: theme.spacing(5), // md:w-10
+    height: theme.spacing(5), // md:h-10
+    borderRadius: '50%', // rounded-full
+    backgroundColor: theme.palette.primary.main, // var(--color-primary)
+    '&:hover': {
+        opacity: 0.9, // hover:opacity-90
+        backgroundColor: theme.palette.primary.main,
+    },
+    [theme.breakpoints.down('md')]: {
+        right: theme.spacing(1), // right-1
+        width: theme.spacing(4), // w-8
+        height: theme.spacing(4), // h-8
+    },
+}));
+const StyledSearchIcon = material.styled(material.Box)(({ theme }) => ({
+    width: 20, // md:w-5 md:h-5
+    height: 20,
+    color: theme.palette.light.main, // text-[#FDFCEE]
+    [theme.breakpoints.down('md')]: {
+        width: 16, // w-4
+        height: 16, // h-4
+    },
+}));
+const StyledUserContainer = material.styled(material.Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(3), // md:gap-3
+    [theme.breakpoints.down('md')]: {
+        gap: theme.spacing(2), // gap-2
+    },
+}));
+const StyledAvatar = material.styled(material.Box)(({ theme }) => ({
+    width: theme.spacing(6), // md:w-12
+    height: theme.spacing(6), // md:h-12
+    borderRadius: '50%', // rounded-full
+    backgroundColor: theme.palette.light.main, // bg-[#FDFCEE]
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    [theme.breakpoints.down('md')]: {
+        width: theme.spacing(5), // sm:w-10
+        height: theme.spacing(5), // sm:h-10
+    },
+    [theme.breakpoints.down('sm')]: {
+        width: theme.spacing(4), // w-8
+        height: theme.spacing(4), // h-8
+    },
+}));
+const StyledAvatarText = material.styled(material.Typography)(({ theme }) => ({
+    color: theme.palette.dark.main, // text-[#4D3019]
+    fontWeight: 700, // font-bold
+    fontSize: '1.125rem', // text-lg
+    [theme.breakpoints.down('md')]: {
+        fontSize: '0.875rem', // text-sm
+    },
+}));
+const StyledUserName = material.styled(material.Typography)(({ theme }) => ({
+    color: theme.palette.light.main, // text-[#FDFCEE]
+    fontWeight: 500, // font-medium
+    fontSize: '1.125rem', // text-lg
+    display: 'none', // hidden
+    [theme.breakpoints.up('sm')]: {
+        display: 'inline', // sm:inline
+    },
+    [theme.breakpoints.down('md')]: {
+        fontSize: '0.875rem', // text-sm
+    },
+}));
+const Header = ({ userName = 'John Doe', userInitials = 'JD', }) => {
+    const { theme } = ThemeProvider.useTheme();
+    return (jsxRuntime.jsxs(StyledHeader, { children: [jsxRuntime.jsxs(StyledLogoWrapper, { children: [jsxRuntime.jsx(StyledLogoIcon, { children: jsxRuntime.jsx(iconsMaterial.SchoolRounded, { sx: { fontSize: 32, color: 'currentColor' } }) }), jsxRuntime.jsx(StyledLogoText, { variant: "h1", children: theme.appName })] }), jsxRuntime.jsx(StyledSearchContainer, { children: jsxRuntime.jsx(StyledTextField, { placeholder: "Search for a policy", variant: "outlined", fullWidth: true, InputProps: {
+                        endAdornment: (jsxRuntime.jsx(StyledSearchButton, { children: jsxRuntime.jsx(StyledSearchIcon, { children: jsxRuntime.jsx(iconsMaterial.SearchRounded, { sx: { fontSize: 20 } }) }) })),
+                    } }) }), jsxRuntime.jsxs(StyledUserContainer, { children: [jsxRuntime.jsx(StyledAvatar, { children: jsxRuntime.jsx(StyledAvatarText, { children: userInitials }) }), jsxRuntime.jsx(StyledUserName, { children: userName })] })] }));
+};
+
+exports.Header = Header;
+//# sourceMappingURL=Header.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","sources":["../../../../src/components/Header.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { Box, styled, Typography, TextField, IconButton } from '@mui/material';\nimport { useTheme } from '../ThemeProvider';\nimport { SchoolRounded, SearchRounded } from '@mui/icons-material';\n\ninterface HeaderProps {\n  userName?: string;\n  userInitials?: string;\n}\n\nconst StyledHeader = styled(Box)(({ theme }) => ({\n  padding: theme.spacing(1.5, 4), // px-4 py-3\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  gap: theme.spacing(2), // gap-2\n  backgroundColor: theme.palette.primary.main, // var(--color-primary)\n  [theme.breakpoints.up('sm')]: {\n    padding: theme.spacing(2, 6), // sm:px-6\n  },\n  [theme.breakpoints.up('md')]: {\n    padding: theme.spacing(2, 8), // md:px-8\n    gap: theme.spacing(4), // md:gap-4\n  },\n}));\n\nconst StyledLogoWrapper = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(2), // md:gap-2\n  [theme.breakpoints.down('md')]: {\n    gap: theme.spacing(1.5), // gap-1.5\n  },\n}));\n\nconst StyledLogoIcon = styled(Box)(({ theme }) => ({\n  width: 32, // md:w-8 md:h-8\n  height: 32,\n  color: theme.palette.light.main, // text-[#FDFCEE]\n  [theme.breakpoints.down('md')]: {\n    width: 24, // w-6\n    height: 24, // h-6\n  },\n}));\n\nconst StyledLogoText = styled(Typography)(({ theme }) => ({\n  color: theme.palette.light.main, // text-[#FDFCEE]\n  fontWeight: 700, // font-bold\n  letterSpacing: '0.05em', // tracking-wide\n  fontSize: '1.5rem', // text-2xl\n  [theme.breakpoints.down('md')]: {\n    fontSize: '1.25rem', // sm:text-xl\n  },\n  [theme.breakpoints.down('sm')]: {\n    fontSize: '1.125rem', // text-lg\n  },\n}));\n\nconst StyledSearchContainer = styled(Box)(({ theme }) => ({\n  flex: 1,\n  maxWidth: '32rem', // max-w-2xl\n  margin: theme.spacing(0, 8), // mx-8\n  position: 'relative',\n  [theme.breakpoints.down('md')]: {\n    margin: theme.spacing(0, 4), // sm:mx-4\n  },\n  [theme.breakpoints.down('sm')]: {\n    margin: theme.spacing(0, 2), // mx-2\n  },\n}));\n\nconst StyledTextField = styled(TextField)(({ theme }) => ({\n  '& .MuiInputBase-root': {\n    backgroundColor: theme.palette.light.main, // bg-[#FDFCEE]\n    color: theme.palette.dark.main, // text-[#4D3019]\n    borderRadius: '9999px', // rounded-full\n    paddingRight: theme.spacing(6), // pr-12\n    fontSize: '1rem', // text-base\n    [theme.breakpoints.down('md')]: {\n      paddingRight: theme.spacing(5), // sm:pr-10\n      fontSize: '0.875rem', // text-sm\n    },\n  },\n  '& .MuiInputBase-input': {\n    padding: theme.spacing(1.5, 3), // px-4 py-2\n    [theme.breakpoints.up('md')]: {\n      padding: theme.spacing(1.5, 4), // md:px-6 md:py-3\n    },\n    [theme.breakpoints.down('sm')]: {\n      padding: theme.spacing(1.5, 2.5), // sm:px-5\n    },\n  },\n  '& .MuiInputBase-input::placeholder': {\n    color: `${theme.palette.dark.main}99`, // placeholder-[#4D3019]/60\n    opacity: 1,\n  },\n  '& .MuiInputBase-root:focus-within': {\n    outline: `2px solid ${theme.palette.light.main}`, // focus:ring-2 focus:ring-[#FDFCEE]\n    outlineOffset: 0,\n  },\n}));\n\nconst StyledSearchButton = styled(IconButton)(({ theme }) => ({\n  position: 'absolute',\n  right: theme.spacing(2), // md:right-2\n  top: '50%',\n  transform: 'translateY(-50%)',\n  width: theme.spacing(5), // md:w-10\n  height: theme.spacing(5), // md:h-10\n  borderRadius: '50%', // rounded-full\n  backgroundColor: theme.palette.primary.main, // var(--color-primary)\n  '&:hover': {\n    opacity: 0.9, // hover:opacity-90\n    backgroundColor: theme.palette.primary.main,\n  },\n  [theme.breakpoints.down('md')]: {\n    right: theme.spacing(1), // right-1\n    width: theme.spacing(4), // w-8\n    height: theme.spacing(4), // h-8\n  },\n}));\n\nconst StyledSearchIcon = styled(Box)(({ theme }) => ({\n  width: 20, // md:w-5 md:h-5\n  height: 20,\n  color: theme.palette.light.main, // text-[#FDFCEE]\n  [theme.breakpoints.down('md')]: {\n    width: 16, // w-4\n    height: 16, // h-4\n  },\n}));\n\nconst StyledUserContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(3), // md:gap-3\n  [theme.breakpoints.down('md')]: {\n    gap: theme.spacing(2), // gap-2\n  },\n}));\n\nconst StyledAvatar = styled(Box)(({ theme }) => ({\n  width: theme.spacing(6), // md:w-12\n  height: theme.spacing(6), // md:h-12\n  borderRadius: '50%', // rounded-full\n  backgroundColor: theme.palette.light.main, // bg-[#FDFCEE]\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  flexShrink: 0,\n  [theme.breakpoints.down('md')]: {\n    width: theme.spacing(5), // sm:w-10\n    height: theme.spacing(5), // sm:h-10\n  },\n  [theme.breakpoints.down('sm')]: {\n    width: theme.spacing(4), // w-8\n    height: theme.spacing(4), // h-8\n  },\n}));\n\nconst StyledAvatarText = styled(Typography)(({ theme }) => ({\n  color: theme.palette.dark.main, // text-[#4D3019]\n  fontWeight: 700, // font-bold\n  fontSize: '1.125rem', // text-lg\n  [theme.breakpoints.down('md')]: {\n    fontSize: '0.875rem', // text-sm\n  },\n}));\n\nconst StyledUserName = styled(Typography)(({ theme }) => ({\n  color: theme.palette.light.main, // text-[#FDFCEE]\n  fontWeight: 500, // font-medium\n  fontSize: '1.125rem', // text-lg\n  display: 'none', // hidden\n  [theme.breakpoints.up('sm')]: {\n    display: 'inline', // sm:inline\n  },\n  [theme.breakpoints.down('md')]: {\n    fontSize: '0.875rem', // text-sm\n  },\n}));\n\nexport const Header: React.FC<HeaderProps> = ({\n  userName = 'John Doe',\n  userInitials = 'JD',\n}) => {\n  const { theme } = useTheme();\n\n  return (\n    <StyledHeader>\n      <StyledLogoWrapper>\n        <StyledLogoIcon>\n          <SchoolRounded sx={{fontSize:32, color: 'currentColor'}} />\n        </StyledLogoIcon>\n        <StyledLogoText variant=\"h1\">{theme.appName}</StyledLogoText>\n      </StyledLogoWrapper>\n\n      <StyledSearchContainer>\n        <StyledTextField\n          placeholder=\"Search for a policy\"\n          variant=\"outlined\"\n          fullWidth\n          InputProps={{\n            endAdornment: (\n              <StyledSearchButton>\n                <StyledSearchIcon>\n                  <SearchRounded sx={{fontSize: 20}} />\n                </StyledSearchIcon>\n              </StyledSearchButton>\n            ),\n          }}\n        />\n      </StyledSearchContainer>\n\n      <StyledUserContainer>\n        <StyledAvatar>\n          <StyledAvatarText>{userInitials}</StyledAvatarText>\n        </StyledAvatar>\n        <StyledUserName>{userName}</StyledUserName>\n      </StyledUserContainer>\n    </StyledHeader>\n  );\n};"],"names":[],"mappings":";;;;;;;;AAYA;;AAEE;AACA;AACA;;;;;AAKC;;;;AAIA;AACF;AAED;AACE;AACA;;;;AAIC;AACF;AAED;;AAEE;;;;;AAKC;AACF;AAED;;;;;;;AAOG;;;AAGA;AACF;AAED;AACE;;;AAGA;;;AAGC;;;AAGA;AACF;AAED;AACE;;;;;;;;;AASG;AACF;AACD;;;;AAIG;;;AAGA;AACF;AACD;;AAEE;AACD;AACD;;AAEE;AACD;AACF;AAED;AACE;;AAEA;AACA;;;;;AAKA;;AAEE;AACD;;;;;AAKA;AACF;AAED;;AAEE;;;;;AAKC;AACF;AAED;AACE;AACA;;;;AAIC;AACF;AAED;;;;;AAKE;AACA;AACA;AACA;;;;AAIC;;;;AAIA;AACF;AAED;;;;;;AAMG;AACF;AAED;;;;;;;AAOG;;;AAGA;AACF;AAEM;AAIL;;;;AAoCF;;"}

package/dist/cjs/components/Input.js

@@ -0,0 +1,77 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var material = require('@mui/material');
+
+const InputWrapper = material.styled('div')(({ theme }) => ({
+    width: '100%',
+}));
+const StyledLabel = material.styled(material.InputLabel)(({ theme }) => ({
+    fontSize: '0.875rem',
+    fontWeight: 500,
+    color: theme.palette.dark.main,
+    marginBottom: theme.spacing(0.75),
+    display: 'block',
+    position: 'static',
+    transform: 'none',
+    '&.Mui-focused': {
+        color: theme.palette.dark.main,
+    },
+}));
+const StyledTextField = material.styled(material.TextField, {
+    shouldForwardProp: (prop) => !['errorMessage'].includes(prop),
+})(({ theme, errorMessage }) => ({
+    width: '100%',
+    '& .MuiInputBase-root': {
+        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,
+        minWidth: 0,
+        padding: theme.spacing(0, 3),
+        [theme.breakpoints.up('sm')]: {
+            padding: theme.spacing(0, 4),
+        },
+        '& .MuiInputBase-input': {
+            padding: theme.spacing(1, 0),
+            [theme.breakpoints.up('sm')]: {
+                padding: theme.spacing(1.25, 0),
+            },
+        },
+        '&:focus-within': {
+            outline: `2px solid ${errorMessage ? theme.palette.accent.main : theme.palette.primary.main}`,
+            outlineOffset: 0,
+        },
+        '& .MuiOutlinedInput-notchedOutline': {
+            borderColor: errorMessage ? theme.palette.accent.main : `${theme.palette.dark.main}33`,
+        },
+        '&:hover .MuiOutlinedInput-notchedOutline': {
+            borderColor: errorMessage ? theme.palette.accent.main : theme.palette.primary.main,
+        },
+        '&.Mui-disabled': {
+            backgroundColor: `${theme.palette.dark.main}0D`,
+            '& .MuiInputBase-input': {
+                color: `${theme.palette.dark.main}80`,
+                cursor: 'not-allowed',
+            },
+            '& .MuiOutlinedInput-notchedOutline': {
+                borderColor: `${theme.palette.dark.main}33`,
+            },
+        },
+    },
+    '& .MuiFormHelperText-root': {
+        marginTop: theme.spacing(0.75),
+        fontSize: '0.875rem',
+        color: errorMessage ? theme.palette.accent.main : `${theme.palette.dark.main}99`,
+    },
+}));
+const Input = ({ error, fullWidth = false, id, label, ...props }) => {
+    const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;
+    return (jsxRuntime.jsxs(InputWrapper, { sx: { ...(!fullWidth && { width: 'auto' }) }, children: [label && (jsxRuntime.jsx(StyledLabel, { htmlFor: inputId, children: label })), jsxRuntime.jsx(StyledTextField, { id: inputId, error: !!error, helperText: error || props.helperText, errorMessage: error, fullWidth: fullWidth, variant: "outlined", ...props })] }));
+};
+
+exports.Input = Input;
+//# sourceMappingURL=Input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sources":["../../../../src/components/Input.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { styled, TextField, TextFieldProps, InputLabel } from '@mui/material';\n\ninterface InputProps extends Omit<TextFieldProps, 'variant' | 'error'> {\n  error?: string;\n}\n\nconst InputWrapper = styled('div')(({ theme }) => ({\n  width: '100%',\n}));\n\nconst StyledLabel = styled(InputLabel)(({ theme }) => ({\n  fontSize: '0.875rem',\n  fontWeight: 500,\n  color: theme.palette.dark.main,\n  marginBottom: theme.spacing(0.75),\n  display: 'block',\n  position: 'static',\n  transform: 'none',\n  '&.Mui-focused': {\n    color: theme.palette.dark.main,\n  },\n}));\n\nconst StyledTextField = styled(TextField, {\n  shouldForwardProp: (prop) => !['errorMessage'].includes(prop as string),\n})<{ errorMessage?: string }>(({ theme, errorMessage }) => ({\n  width: '100%',\n  '& .MuiInputBase-root': {\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    minWidth: 0,\n    padding: theme.spacing(0, 3),\n    [theme.breakpoints.up('sm')]: {\n      padding: theme.spacing(0, 4),\n    },\n    '& .MuiInputBase-input': {\n      padding: theme.spacing(1, 0),\n      [theme.breakpoints.up('sm')]: {\n        padding: theme.spacing(1.25, 0),\n      },\n    },\n    '&:focus-within': {\n      outline: `2px solid ${errorMessage ? theme.palette.accent.main : theme.palette.primary.main}`,\n      outlineOffset: 0,\n    },\n    '& .MuiOutlinedInput-notchedOutline': {\n      borderColor: errorMessage ? theme.palette.accent.main : `${theme.palette.dark.main}33`,\n    },\n    '&:hover .MuiOutlinedInput-notchedOutline': {\n      borderColor: errorMessage ? theme.palette.accent.main : theme.palette.primary.main,\n    },\n    '&.Mui-disabled': {\n      backgroundColor: `${theme.palette.dark.main}0D`,\n      '& .MuiInputBase-input': {\n        color: `${theme.palette.dark.main}80`,\n        cursor: 'not-allowed',\n      },\n      '& .MuiOutlinedInput-notchedOutline': {\n        borderColor: `${theme.palette.dark.main}33`,\n      },\n    },\n  },\n  '& .MuiFormHelperText-root': {\n    marginTop: theme.spacing(0.75),\n    fontSize: '0.875rem',\n    color: errorMessage ? theme.palette.accent.main : `${theme.palette.dark.main}99`,\n  },\n}));\n\nexport const Input: React.FC<InputProps> = ({\n  error,\n  fullWidth = false,\n  id,\n  label,\n  ...props\n}) => {\n  const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;\n\n  return (\n    <InputWrapper sx={{ ...(!fullWidth && { width: 'auto' }) }}>\n      {label && (\n        <StyledLabel htmlFor={inputId}>\n          {label}\n        </StyledLabel>\n      )}\n      <StyledTextField\n        id={inputId}\n        error={!!error}\n        helperText={error || props.helperText}\n        errorMessage={error}\n        fullWidth={fullWidth}\n        variant=\"outlined\"\n        {...props}\n      />\n    </InputWrapper>\n  );\n};"],"names":[],"mappings":";;;;;;AASA;AACE;AACD;AAED;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACE;AACD;AACF;AAED;AACE;;AAEA;AACA;AACE;;;;AAIA;AACA;AACA;;;;AAIC;AACD;;;;AAIG;AACF;AACD;;AAEE;AACD;AACD;;AAEC;AACD;;AAEC;AACD;;AAEE;;AAEE;AACD;AACD;;AAEC;AACF;AACF;AACD;AACE;AACA;;AAED;AACF;;;AAWC;AAkBF;;"}