ece-docs-components 1.0.5 → 1.0.6

package/dist/esm/components/Header.js

@@ -0,0 +1,175 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { styled, Box, Typography, TextField, IconButton } from '@mui/material';
+import { useTheme } from '../ThemeProvider.js';
+import { SchoolRounded, SearchRounded } from '@mui/icons-material';
+
+const StyledHeader = styled(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 = styled(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 = styled(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 = styled(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 = styled(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 = styled(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 = styled(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 = styled(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 = styled(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 = styled(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 = styled(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 = styled(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 } = useTheme();
+    return (jsxs(StyledHeader, { children: [jsxs(StyledLogoWrapper, { children: [jsx(StyledLogoIcon, { children: jsx(SchoolRounded, { sx: { fontSize: 32, color: 'currentColor' } }) }), jsx(StyledLogoText, { variant: "h1", children: theme.appName })] }), jsx(StyledSearchContainer, { children: jsx(StyledTextField, { placeholder: "Search for a policy", variant: "outlined", fullWidth: true, InputProps: {
+                        endAdornment: (jsx(StyledSearchButton, { children: jsx(StyledSearchIcon, { children: jsx(SearchRounded, { sx: { fontSize: 20 } }) }) })),
+                    } }) }), jsxs(StyledUserContainer, { children: [jsx(StyledAvatar, { children: jsx(StyledAvatarText, { children: userInitials }) }), jsx(StyledUserName, { children: userName })] })] }));
+};
+
+export { Header };
+//# sourceMappingURL=Header.js.map

package/dist/esm/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/esm/components/Input.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TextFieldProps } from '@mui/material';
+interface InputProps extends Omit<TextFieldProps, 'variant' | 'error'> {
+    error?: string;
+}
+export declare const Input: React.FC<InputProps>;
+export {};

package/dist/esm/components/Input.js

@@ -0,0 +1,75 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { styled, InputLabel, TextField } from '@mui/material';
+
+const InputWrapper = styled('div')(({ theme }) => ({
+    width: '100%',
+}));
+const StyledLabel = styled(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 = styled(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 (jsxs(InputWrapper, { sx: { ...(!fullWidth && { width: 'auto' }) }, children: [label && (jsx(StyledLabel, { htmlFor: inputId, children: label })), jsx(StyledTextField, { id: inputId, error: !!error, helperText: error || props.helperText, errorMessage: error, fullWidth: fullWidth, variant: "outlined", ...props })] }));
+};
+
+export { Input };
+//# sourceMappingURL=Input.js.map

package/dist/esm/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;;"}

package/dist/esm/components/Modal.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    status: 'mandatory' | 'optional' | 'accepted' | 'action-required' | 'action-required-note' | 'accepted-note';
+    description: string;
+    defaultText: string;
+    note?: string;
+    acceptSuggestion?: boolean;
+    onAcceptSuggestionChange?: (checked: boolean) => void;
+    onSave?: () => void;
+    onSubmit?: () => void;
+    onDeclineWording?: () => void;
+    onPrevious?: () => void;
+    onNext?: () => void;
+    currentPage?: number;
+    totalPages?: number;
+}
+export declare const Modal: React.FC<ModalProps>;
+export {};

package/dist/esm/components/Modal.js

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

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

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

package/dist/esm/components/NoteBox.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface NoteBoxProps {
+    variant?: 'default' | 'mandatory' | 'optional' | 'pending' | 'accepted' | 'action-required' | 'custom';
+    label?: string;
+    children: React.ReactNode;
+    className?: string;
+    onEditClick?: () => void;
+}
+export declare const NoteBox: React.FC<NoteBoxProps>;
+export {};

package/dist/esm/components/NoteBox.js

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

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

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

package/dist/esm/components/Progress.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface ProgressProps {
+    current: number;
+    total: number;
+    showLabel?: boolean;
+    className?: string;
+}
+export declare const Progress: React.FC<ProgressProps>;
+interface StepIndicatorProps {
+    steps: string[];
+    currentStep: number;
+    className?: string;
+}
+export declare const StepIndicator: React.FC<StepIndicatorProps>;
+export {};