ece-docs-components 1.0.107 → 1.0.110

package/dist/cjs/components/AutocompleteSelect.js

@@ -20,12 +20,72 @@ function AutocompleteSelect({ id, label, error, helperText, placeholder, fullWid
                         sx: {
                             zIndex: (muiTheme) => muiTheme.zIndex.modal + 1,
                         },
+                        modifiers: [
+                            {
+                                name: "flip",
+                                options: {
+                                    padding: 8,
+                                },
+                            },
+                            {
+                                name: "preventOverflow",
+                                options: {
+                                    padding: 8,
+                                },
+                            },
+                            {
+                                name: "setListboxMaxHeight",
+                                enabled: true,
+                                phase: "beforeWrite",
+                                fn: ({ state }) => {
+                                    if (typeof window === "undefined")
+                                        return;
+                                    const viewportMargin = 8;
+                                    const maxHeight = 352;
+                                    const minHeight = 96;
+                                    const referenceRect = state.elements.reference.getBoundingClientRect();
+                                    const isAbove = state.placement.startsWith("top");
+                                    const availableHeight = isAbove
+                                        ? referenceRect.top - viewportMargin
+                                        : window.innerHeight -
+                                            referenceRect.bottom -
+                                            viewportMargin;
+                                    state.styles.popper = {
+                                        ...state.styles.popper,
+                                        "--AutocompleteSelect-listbox-max-height": `${Math.max(minHeight, Math.min(maxHeight, availableHeight))}px`,
+                                    };
+                                },
+                            },
+                        ],
+                    },
+                    listbox: {
+                        sx: {
+                            m: 0,
+                            p: 0,
+                            maxHeight: "var(--AutocompleteSelect-listbox-max-height, min(22rem, calc(100vh - 6rem)))",
+                            backgroundColor: theme.palette.light.main,
+                            overflowY: "auto",
+                            "& .MuiAutocomplete-option": {
+                                m: 0,
+                                width: "100%",
+                                boxSizing: "border-box",
+                                borderRadius: 0,
+                                backgroundColor: theme.palette.light.main,
+                                fontSize: "1rem",
+                                color: theme.palette.dark.main,
+                                '&[aria-selected="true"]': {
+                                    backgroundColor: theme.palette.light.main,
+                                },
+                                '&[aria-selected="true"].Mui-focused, &:hover, &.Mui-focused': {
+                                    backgroundColor: `${theme.palette.primary.main}1A !important`,
+                                },
+                            },
+                        },
                     },
                     paper: {
                         sx: {
                             borderRadius: 2,
                             boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
-                            maxHeight: "min(22rem, calc(100vh - 6rem))",
                             overflow: "hidden",
                             backgroundColor: theme.palette.light.main,
                             mt: 0.5,
@@ -41,16 +101,6 @@ function AutocompleteSelect({ id, label, error, helperText, placeholder, fullWid
                     "& .MuiAutocomplete-input": {
                         padding: "0 !important",
                     },
-                    "& + .MuiAutocomplete-popper .MuiAutocomplete-option": {
-                        fontSize: "1rem",
-                        color: theme.palette.dark.main,
-                        '&[aria-selected="true"]': {
-                            backgroundColor: "transparent",
-                        },
-                        '&[aria-selected="true"].Mui-focused, &:hover, &.Mui-focused': {
-                            backgroundColor: `${theme.palette.primary.main}1A !important`,
-                        },
-                    },
                 }, renderInput: (params) => {
                     // 1. Separate structural configurations from direct props
                     const { InputProps, inputProps, ...restParams } = params;

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

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteSelect.js","sources":["../../../../src/components/AutocompleteSelect.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  Autocomplete as MuiAutocomplete,\n  FormHelperText,\n  styled,\n} from \"@mui/material\";\nimport { ExpandMoreRounded } from \"@mui/icons-material\";\nimport { useTheme } from \"../ThemeProvider\"; // Adjust pathway according to project layout\nimport { Input, StyledLabel } from \"./Input\";\n\ninterface AutocompleteOption {\n  value: string;\n  label: string;\n}\n\ninterface AutocompleteSelectProps {\n  id?: string;\n  label?: string;\n  error?: string;\n  helperText?: string;\n  placeholder?: string;\n  fullWidth?: boolean;\n  disabled?: boolean;\n  options: AutocompleteOption[];\n  value: AutocompleteOption | null;\n  onChange: (value: AutocompleteOption | null) => void;\n  className?: string;\n  sx?: any;\n}\n\nconst AutocompleteWrapper = styled(\"div\")({\n  width: \"100%\",\n});\n\nexport function AutocompleteSelect({\n  id,\n  label,\n  error,\n  helperText,\n  placeholder,\n  fullWidth = false,\n  disabled = false,\n  options,\n  value,\n  onChange,\n  className = \"\",\n  sx,\n}: AutocompleteSelectProps): React.JSX.Element {\n  const theme = useTheme();\n  const selectId =\n    id || `auto-select-${Math.random().toString(36).substr(2, 9)}`;\n\n  return (\n    <AutocompleteWrapper\n      className={className}\n      sx={[\n        { ...(!fullWidth && { width: \"auto\" }) },\n        ...(Array.isArray(sx) ? sx : [sx]),\n      ]}\n    >\n      {label && (\n        <StyledLabel htmlFor={selectId} shrink={false}>\n          {label}\n        </StyledLabel>\n      )}\n\n      <MuiAutocomplete\n        id={selectId}\n        options={options}\n        value={value}\n        disabled={disabled}\n        getOptionLabel={(option: { label: string; value: string }) =>\n          option?.label || \"\"\n        }\n        isOptionEqualToValue={(\n          option: AutocompleteOption,\n          val: AutocompleteOption,\n        ) => option?.value === val?.value}\n        onChange={(_event, newValue) => onChange(newValue)}\n        popupIcon={\n          <ExpandMoreRounded sx={{ color: `${theme.palette.dark.main}66` }} />\n        }\n        slotProps={{\n          popper: {\n            sx: {\n              zIndex: (muiTheme) => muiTheme.zIndex.modal + 1,\n            },\n          },\n          paper: {\n            sx: {\n              borderRadius: 2,\n              boxShadow:\n                \"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)\",\n              maxHeight: \"min(22rem, calc(100vh - 6rem))\",\n              overflow: \"hidden\",\n              backgroundColor: theme.palette.light.main,\n              mt: 0.5,\n            },\n          },\n        }}\n        sx={{\n          \"& .MuiOutlinedInput-root\": {\n            padding: \"0 9px !important\",\n            height: 48,\n            display: \"flex\",\n            alignItems: \"center\",\n          },\n          \"& .MuiAutocomplete-input\": {\n            padding: \"0 !important\",\n          },\n          \"& + .MuiAutocomplete-popper .MuiAutocomplete-option\": {\n            fontSize: \"1rem\",\n            color: theme.palette.dark.main,\n            '&[aria-selected=\"true\"]': {\n              backgroundColor: \"transparent\",\n            },\n            '&[aria-selected=\"true\"].Mui-focused, &:hover, &.Mui-focused': {\n              backgroundColor: `${theme.palette.primary.main}1A !important`,\n            },\n          },\n        }}\n        renderInput={(params: any) => {\n          // 1. Separate structural configurations from direct props\n          const { InputProps, inputProps, ...restParams } = params;\n\n          return (\n            <Input\n              {...restParams}\n              // 2. Safely spread native input elements\n              inputProps={inputProps}\n              // 3. Bind MUI's dynamic layout objects (adornments, ref) into the slot configuration\n              InputProps={{\n                ...InputProps,\n              }}\n              error={error}\n              placeholder={placeholder}\n              fullWidth\n              // Explicitly empty string avoids passing a raw error object down to helperText slots\n              helperText=\"\"\n            />\n          );\n        }}\n      />\n\n      {error && (\n        <FormHelperText\n          sx={{\n            mt: 0.75,\n            fontSize: \"0.875rem\",\n            color: theme.palette.error.main,\n          }}\n        >\n          {error}\n        </FormHelperText>\n      )}\n\n      {helperText && !error && (\n        <FormHelperText\n          sx={{\n            mt: 0.75,\n            fontSize: \"0.875rem\",\n            color: `${theme.palette.dark.main}99`,\n          }}\n        >\n          {helperText}\n        </FormHelperText>\n      )}\n    </AutocompleteWrapper>\n  );\n}\n"],"names":["styled","useTheme","_jsxs","_jsx","StyledLabel","MuiAutocomplete","ExpandMoreRounded","Input","FormHelperText"],"mappings":"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"}
+{"version":3,"file":"AutocompleteSelect.js","sources":["../../../../src/components/AutocompleteSelect.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  Autocomplete as MuiAutocomplete,\n  FormHelperText,\n  styled,\n} from \"@mui/material\";\nimport { ExpandMoreRounded } from \"@mui/icons-material\";\nimport { useTheme } from \"../ThemeProvider\"; // Adjust pathway according to project layout\nimport { Input, StyledLabel } from \"./Input\";\n\ninterface AutocompleteOption {\n  value: string;\n  label: string;\n}\n\ninterface AutocompleteSelectProps {\n  id?: string;\n  label?: string;\n  error?: string;\n  helperText?: string;\n  placeholder?: string;\n  fullWidth?: boolean;\n  disabled?: boolean;\n  options: AutocompleteOption[];\n  value: AutocompleteOption | null;\n  onChange: (value: AutocompleteOption | null) => void;\n  className?: string;\n  sx?: any;\n}\n\nconst AutocompleteWrapper = styled(\"div\")({\n  width: \"100%\",\n});\n\nexport function AutocompleteSelect({\n  id,\n  label,\n  error,\n  helperText,\n  placeholder,\n  fullWidth = false,\n  disabled = false,\n  options,\n  value,\n  onChange,\n  className = \"\",\n  sx,\n}: AutocompleteSelectProps): React.JSX.Element {\n  const theme = useTheme();\n  const selectId =\n    id || `auto-select-${Math.random().toString(36).substr(2, 9)}`;\n\n  return (\n    <AutocompleteWrapper\n      className={className}\n      sx={[\n        { ...(!fullWidth && { width: \"auto\" }) },\n        ...(Array.isArray(sx) ? sx : [sx]),\n      ]}\n    >\n      {label && (\n        <StyledLabel htmlFor={selectId} shrink={false}>\n          {label}\n        </StyledLabel>\n      )}\n\n      <MuiAutocomplete\n        id={selectId}\n        options={options}\n        value={value}\n        disabled={disabled}\n        getOptionLabel={(option: { label: string; value: string }) =>\n          option?.label || \"\"\n        }\n        isOptionEqualToValue={(\n          option: AutocompleteOption,\n          val: AutocompleteOption,\n        ) => option?.value === val?.value}\n        onChange={(_event, newValue) => onChange(newValue)}\n        popupIcon={\n          <ExpandMoreRounded sx={{ color: `${theme.palette.dark.main}66` }} />\n        }\n        slotProps={{\n          popper: {\n            sx: {\n              zIndex: (muiTheme) => muiTheme.zIndex.modal + 1,\n            },\n            modifiers: [\n              {\n                name: \"flip\",\n                options: {\n                  padding: 8,\n                },\n              },\n              {\n                name: \"preventOverflow\",\n                options: {\n                  padding: 8,\n                },\n              },\n              {\n                name: \"setListboxMaxHeight\",\n                enabled: true,\n                phase: \"beforeWrite\",\n                fn: ({ state }: any) => {\n                  if (typeof window === \"undefined\") return;\n\n                  const viewportMargin = 8;\n                  const maxHeight = 352;\n                  const minHeight = 96;\n                  const referenceRect =\n                    state.elements.reference.getBoundingClientRect();\n                  const isAbove = state.placement.startsWith(\"top\");\n                  const availableHeight = isAbove\n                    ? referenceRect.top - viewportMargin\n                    : window.innerHeight -\n                      referenceRect.bottom -\n                      viewportMargin;\n\n                  state.styles.popper = {\n                    ...state.styles.popper,\n                    \"--AutocompleteSelect-listbox-max-height\": `${Math.max(\n                      minHeight,\n                      Math.min(maxHeight, availableHeight),\n                    )}px`,\n                  };\n                },\n              },\n            ],\n          },\n          listbox: {\n            sx: {\n              m: 0,\n              p: 0,\n              maxHeight:\n                \"var(--AutocompleteSelect-listbox-max-height, min(22rem, calc(100vh - 6rem)))\",\n              backgroundColor: theme.palette.light.main,\n              overflowY: \"auto\",\n              \"& .MuiAutocomplete-option\": {\n                m: 0,\n                width: \"100%\",\n                boxSizing: \"border-box\",\n                borderRadius: 0,\n                backgroundColor: theme.palette.light.main,\n                fontSize: \"1rem\",\n                color: theme.palette.dark.main,\n                '&[aria-selected=\"true\"]': {\n                  backgroundColor: theme.palette.light.main,\n                },\n                '&[aria-selected=\"true\"].Mui-focused, &:hover, &.Mui-focused':\n                  {\n                    backgroundColor: `${theme.palette.primary.main}1A !important`,\n                  },\n              },\n            },\n          },\n          paper: {\n            sx: {\n              borderRadius: 2,\n              boxShadow:\n                \"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)\",\n              overflow: \"hidden\",\n              backgroundColor: theme.palette.light.main,\n              mt: 0.5,\n            },\n          },\n        }}\n        sx={{\n          \"& .MuiOutlinedInput-root\": {\n            padding: \"0 9px !important\",\n            height: 48,\n            display: \"flex\",\n            alignItems: \"center\",\n          },\n          \"& .MuiAutocomplete-input\": {\n            padding: \"0 !important\",\n          },\n        }}\n        renderInput={(params: any) => {\n          // 1. Separate structural configurations from direct props\n          const { InputProps, inputProps, ...restParams } = params;\n\n          return (\n            <Input\n              {...restParams}\n              // 2. Safely spread native input elements\n              inputProps={inputProps}\n              // 3. Bind MUI's dynamic layout objects (adornments, ref) into the slot configuration\n              InputProps={{\n                ...InputProps,\n              }}\n              error={error}\n              placeholder={placeholder}\n              fullWidth\n              // Explicitly empty string avoids passing a raw error object down to helperText slots\n              helperText=\"\"\n            />\n          );\n        }}\n      />\n\n      {error && (\n        <FormHelperText\n          sx={{\n            mt: 0.75,\n            fontSize: \"0.875rem\",\n            color: theme.palette.error.main,\n          }}\n        >\n          {error}\n        </FormHelperText>\n      )}\n\n      {helperText && !error && (\n        <FormHelperText\n          sx={{\n            mt: 0.75,\n            fontSize: \"0.875rem\",\n            color: `${theme.palette.dark.main}99`,\n          }}\n        >\n          {helperText}\n        </FormHelperText>\n      )}\n    </AutocompleteWrapper>\n  );\n}\n"],"names":["styled","useTheme","_jsxs","_jsx","StyledLabel","MuiAutocomplete","ExpandMoreRounded","Input","FormHelperText"],"mappings":"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"}

package/dist/cjs/components/Concertina.js

@@ -121,26 +121,32 @@ const StyledContentWrapper = material.styled(material.Box)(({ theme }) => ({
         marginBottom: theme.spacing(0.5),
     },
 }));
-function Concertina({ sections }) {
+function getDefaultOpenSections(sectionIds, isDesktop, defaultOpen) {
+    if (Array.isArray(defaultOpen)) {
+        return new Set(defaultOpen.filter((id) => sectionIds.includes(id)));
+    }
+    if (typeof defaultOpen === "boolean") {
+        return defaultOpen ? new Set(sectionIds) : new Set();
+    }
+    return isDesktop ? new Set(sectionIds) : new Set();
+}
+function Concertina({ sections, defaultOpen }) {
     const [hoveredTitle, setHoveredTitle] = React.useState(null);
     const [copiedId, setCopiedId] = React.useState(null);
     const [tooltipPosition, setTooltipPosition] = React.useState(null);
     const theme = ThemeProvider.useTheme();
     const isDesktop = material.useMediaQuery(theme.breakpoints.up("md"));
+    const sectionIds = sections.map((section) => section.id);
+    const sectionIdsKey = JSON.stringify(sectionIds);
+    const defaultOpenKey = Array.isArray(defaultOpen)
+        ? JSON.stringify(defaultOpen)
+        : String(defaultOpen);
     const [openSections, setOpenSections] = React.useState(() => {
-        // Initialize with all sections open on desktop, closed on mobile
-        return isDesktop ? new Set(sections.map((s) => s.id)) : new Set();
+        return getDefaultOpenSections(sectionIds, isDesktop, defaultOpen);
     });
-    const sectionIdsKey = JSON.stringify(sections.map((s) => s.id));
     React.useEffect(() => {
-        const sectionIds = JSON.parse(sectionIdsKey);
-        if (isDesktop) {
-            setOpenSections(new Set(sectionIds));
-        }
-        else {
-            setOpenSections(new Set());
-        }
-    }, [isDesktop, sectionIdsKey]);
+        setOpenSections(getDefaultOpenSections(sectionIds, isDesktop, defaultOpen));
+    }, [defaultOpenKey, isDesktop, sectionIdsKey]);
     const toggleSection = (id) => {
         const newOpenSections = new Set(openSections);
         if (newOpenSections.has(id)) {

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

@@ -1 +1 @@
-{"version":3,"file":"Concertina.js","sources":["../../../../src/components/Concertina.tsx"],"sourcesContent":["import React, { useState } from \"react\";\r\nimport {\r\n  Box,\r\n  styled,\r\n  Typography,\r\n  Collapse,\r\n  useMediaQuery,\r\n} from \"@mui/material\";\r\nimport {\r\n  ExpandCircleDown,\r\n  ExpandCircleDownOutlined,\r\n  ExpandMoreRounded,\r\n} from \"@mui/icons-material\";\r\nimport { useTheme } from \"../ThemeProvider\";\r\n\r\ninterface ConcertinaSection {\r\n  id: string;\r\n  title: string;\r\n  content: React.ReactNode;\r\n}\r\n\r\ninterface ConcertinaProps {\r\n  sections: ConcertinaSection[];\r\n}\r\n\r\nconst StyledConcertina = styled(Box)(({ theme }) => ({\r\n  width: \"100%\",\r\n  display: \"flex\",\r\n  flexDirection: \"column\",\r\n  gap: theme.spacing(1),\r\n}));\r\n\r\nconst StyledSection = styled(Box)(({ theme }) => ({\r\n  overflow: \"hidden\",\r\n}));\r\n\r\nconst StyledHeader = styled(Box)(({ theme }) => ({\r\n  display: \"flex\",\r\n  alignItems: \"center\",\r\n  borderTop: `2px solid ${theme.palette.grey[200]}`,\r\n  borderBottom: `2px solid ${theme.palette.grey[200]}`,\r\n  justifyContent: \"space-between\",\r\n  cursor: \"pointer\",\r\n  transition: \"background-color 0.2s\",\r\n  gap: theme.spacing(2),\r\n  \"&:hover\": {\r\n    backgroundColor: theme.palette.background.default,\r\n  },\r\n  padding: theme.spacing(2),\r\n}));\r\n\r\nconst StyledTitleWrapper = styled(Box)(({ theme }) => ({\r\n  display: \"flex\",\r\n  alignItems: \"center\",\r\n  gap: 0,\r\n  flex: 1,\r\n  minWidth: 0,\r\n}));\r\n\r\nconst StyledHashtag = styled(\"span\", {\r\n  shouldForwardProp: (prop) => prop !== \"isVisible\" && prop !== \"color\",\r\n})<{ isVisible: boolean; color?: string }>(({ theme, isVisible, color }) => ({\r\n  color: color || theme.palette.info.main,\r\n  fontWeight: 700,\r\n  fontSize: \"inherit\",\r\n  opacity: isVisible ? 1 : 0,\r\n  transition: \"opacity 0.2s\",\r\n  marginRight: isVisible ? \"0.25em\" : 0,\r\n  cursor: \"pointer\",\r\n}));\r\n\r\nconst StyledTitle = styled(Typography, {\r\n  shouldForwardProp: (prop) => prop !== \"isHovered\",\r\n})<{ isHovered: boolean }>(({ theme, isHovered }) => ({\r\n  fontWeight: 700,\r\n  fontSize: \"1.75rem\",\r\n  lineHeight: 1.2,\r\n  color: theme.palette.dark.main,\r\n  wordBreak: \"break-word\",\r\n  display: \"inline-block\",\r\n  position: \"relative\",\r\n  paddingBottom: \"2px\",\r\n  borderBottom: isHovered\r\n    ? `3px solid ${theme.palette.info.main}`\r\n    : \"3px solid transparent\",\r\n  transition: \"border-bottom 0.2s\",\r\n  [theme.breakpoints.down(\"lg\")]: {\r\n    fontSize: \"1.25rem\",\r\n  },\r\n  [theme.breakpoints.down(\"md\")]: {\r\n    fontSize: \"1.125rem\",\r\n  },\r\n  [theme.breakpoints.down(\"sm\")]: {\r\n    fontSize: \"1rem\",\r\n  },\r\n}));\r\n\r\nconst StyledTooltip = styled(Box)(({ theme }) => ({\r\n  position: \"fixed\",\r\n  transform: \"translate(-50%, -120%)\",\r\n  backgroundColor: theme.palette.grey[900],\r\n  color: theme.palette.common.white,\r\n  fontSize: \"0.75rem\",\r\n  padding: theme.spacing(1, 2),\r\n  borderRadius: theme.shape.borderRadius,\r\n  whiteSpace: \"nowrap\",\r\n  zIndex: 1000,\r\n  pointerEvents: \"none\",\r\n  [theme.breakpoints.up(\"sm\")]: {\r\n    fontSize: \"0.875rem\",\r\n    padding: theme.spacing(1.5, 3),\r\n  },\r\n}));\r\n\r\nconst StyledContent = styled(Box)(({ theme }) => ({\r\n  padding: theme.spacing(2, 3, 3),\r\n  [theme.breakpoints.up(\"sm\")]: {\r\n    padding: theme.spacing(2, 4, 4),\r\n  },\r\n  [theme.breakpoints.up(\"md\")]: {\r\n    padding: theme.spacing(2, 6, 6),\r\n  },\r\n}));\r\n\r\nconst StyledContentWrapper = styled(Box)(({ theme }) => ({\r\n  color: theme.palette.dark.main,\r\n  lineHeight: 1.5,\r\n  wordBreak: \"break-word\",\r\n  fontSize: 13,\r\n  \"& p\": {\r\n    margin: 0,\r\n    marginBottom: theme.spacing(2),\r\n    \"&:last-child\": {\r\n      marginBottom: 0,\r\n    },\r\n  },\r\n  \"& ul, & ol\": {\r\n    marginTop: theme.spacing(1),\r\n    marginBottom: theme.spacing(2),\r\n    paddingLeft: theme.spacing(3),\r\n    \"&:last-child\": {\r\n      marginBottom: 0,\r\n    },\r\n  },\r\n  \"& li\": {\r\n    marginBottom: theme.spacing(0.5),\r\n  },\r\n}));\r\n\r\nexport function Concertina({ sections }: ConcertinaProps) {\r\n  const [hoveredTitle, setHoveredTitle] = useState<string | null>(null);\r\n  const [copiedId, setCopiedId] = useState<string | null>(null);\r\n  const [tooltipPosition, setTooltipPosition] = useState<{\r\n    x: number;\r\n    y: number;\r\n  } | null>(null);\r\n  const theme = useTheme();\r\n  const isDesktop = useMediaQuery(theme.breakpoints.up(\"md\"));\r\n\r\n  const [openSections, setOpenSections] = useState<Set<string>>(() => {\r\n    // Initialize with all sections open on desktop, closed on mobile\r\n    return isDesktop ? new Set(sections.map((s) => s.id)) : new Set();\r\n  });\r\n\r\n  const sectionIdsKey = JSON.stringify(sections.map((s) => s.id));\r\n\r\n  React.useEffect(() => {\r\n    const sectionIds = JSON.parse(sectionIdsKey) as string[];\r\n\r\n    if (isDesktop) {\r\n      setOpenSections(new Set(sectionIds));\r\n    } else {\r\n      setOpenSections(new Set());\r\n    }\r\n  }, [isDesktop, sectionIdsKey]);\r\n\r\n  const toggleSection = (id: string) => {\r\n    const newOpenSections = new Set(openSections);\r\n    if (newOpenSections.has(id)) {\r\n      newOpenSections.delete(id);\r\n    } else {\r\n      newOpenSections.add(id);\r\n    }\r\n    setOpenSections(newOpenSections);\r\n  };\r\n\r\n  const copyJumpLink = (id: string, e: React.MouseEvent) => {\r\n    e.stopPropagation();\r\n    const url = `${window.location.origin}${window.location.pathname}#${id}`;\r\n    navigator.clipboard.writeText(url);\r\n    setCopiedId(id);\r\n    setTooltipPosition({ x: e.clientX, y: e.clientY });\r\n    setTimeout(() => {\r\n      setCopiedId(null);\r\n      setTooltipPosition(null);\r\n    }, 2000);\r\n  };\r\n\r\n  return (\r\n    <StyledConcertina>\r\n      {sections.map((section) => (\r\n        <StyledSection key={section.id} id={section.id}>\r\n          <StyledHeader\r\n            onClick={() => toggleSection(section.id)}\r\n            onMouseEnter={() => setHoveredTitle(section.id)}\r\n            onMouseLeave={() => setHoveredTitle(null)}\r\n          >\r\n            <StyledTitleWrapper>\r\n              <StyledTitle isHovered={hoveredTitle === section.id} variant=\"h3\">\r\n                <StyledHashtag\r\n                  isVisible={true}\r\n                  color={\r\n                    hoveredTitle === section.id\r\n                      ? theme.palette.info.main\r\n                      : \"#00000000\"\r\n                  }\r\n                  onClick={(e) => copyJumpLink(section.id, e as any)}\r\n                >\r\n                  #\r\n                </StyledHashtag>\r\n                {section.title}\r\n              </StyledTitle>\r\n            </StyledTitleWrapper>\r\n            <ExpandCircleDownOutlined\r\n              sx={{\r\n                fontSize: \"1.5rem\",\r\n                transform: openSections.has(section.id)\r\n                  ? \"rotate(180deg)\"\r\n                  : \"none\",\r\n              }}\r\n            />\r\n          </StyledHeader>\r\n          <Collapse in={openSections.has(section.id)}>\r\n            <StyledContent>\r\n              <StyledContentWrapper>{section.content}</StyledContentWrapper>\r\n            </StyledContent>\r\n          </Collapse>\r\n        </StyledSection>\r\n      ))}\r\n      {copiedId && tooltipPosition && (\r\n        <StyledTooltip\r\n          sx={{\r\n            left: tooltipPosition.x,\r\n            top: tooltipPosition.y,\r\n          }}\r\n        >\r\n          Link copied\r\n        </StyledTooltip>\r\n      )}\r\n    </StyledConcertina>\r\n  );\r\n}\r\n"],"names":["styled","Box","Typography","useState","useTheme","useMediaQuery","_jsxs","_jsx","ExpandCircleDownOutlined","Collapse"],"mappings":"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"}
+{"version":3,"file":"Concertina.js","sources":["../../../../src/components/Concertina.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport {\r\n  Box,\r\n  styled,\r\n  Typography,\r\n  Collapse,\r\n  useMediaQuery,\r\n} from \"@mui/material\";\r\nimport {\r\n  ExpandCircleDown,\r\n  ExpandCircleDownOutlined,\r\n  ExpandMoreRounded,\r\n} from \"@mui/icons-material\";\r\nimport { useTheme } from \"../ThemeProvider\";\r\n\r\ninterface ConcertinaSection {\r\n  id: string;\r\n  title: string;\r\n  content: React.ReactNode;\r\n}\r\n\r\ninterface ConcertinaProps {\n  sections: ConcertinaSection[];\n  /**\n   * Sets the default open state. When omitted, all sections open on desktop and\n   * all sections close on mobile.\n   */\n  defaultOpen?: boolean | string[];\n}\n\r\nconst StyledConcertina = styled(Box)(({ theme }) => ({\r\n  width: \"100%\",\r\n  display: \"flex\",\r\n  flexDirection: \"column\",\r\n  gap: theme.spacing(1),\r\n}));\r\n\r\nconst StyledSection = styled(Box)(({ theme }) => ({\r\n  overflow: \"hidden\",\r\n}));\r\n\r\nconst StyledHeader = styled(Box)(({ theme }) => ({\r\n  display: \"flex\",\r\n  alignItems: \"center\",\r\n  borderTop: `2px solid ${theme.palette.grey[200]}`,\r\n  borderBottom: `2px solid ${theme.palette.grey[200]}`,\r\n  justifyContent: \"space-between\",\r\n  cursor: \"pointer\",\r\n  transition: \"background-color 0.2s\",\r\n  gap: theme.spacing(2),\r\n  \"&:hover\": {\r\n    backgroundColor: theme.palette.background.default,\r\n  },\r\n  padding: theme.spacing(2),\r\n}));\r\n\r\nconst StyledTitleWrapper = styled(Box)(({ theme }) => ({\r\n  display: \"flex\",\r\n  alignItems: \"center\",\r\n  gap: 0,\r\n  flex: 1,\r\n  minWidth: 0,\r\n}));\r\n\r\nconst StyledHashtag = styled(\"span\", {\r\n  shouldForwardProp: (prop) => prop !== \"isVisible\" && prop !== \"color\",\r\n})<{ isVisible: boolean; color?: string }>(({ theme, isVisible, color }) => ({\r\n  color: color || theme.palette.info.main,\r\n  fontWeight: 700,\r\n  fontSize: \"inherit\",\r\n  opacity: isVisible ? 1 : 0,\r\n  transition: \"opacity 0.2s\",\r\n  marginRight: isVisible ? \"0.25em\" : 0,\r\n  cursor: \"pointer\",\r\n}));\r\n\r\nconst StyledTitle = styled(Typography, {\r\n  shouldForwardProp: (prop) => prop !== \"isHovered\",\r\n})<{ isHovered: boolean }>(({ theme, isHovered }) => ({\r\n  fontWeight: 700,\r\n  fontSize: \"1.75rem\",\r\n  lineHeight: 1.2,\r\n  color: theme.palette.dark.main,\r\n  wordBreak: \"break-word\",\r\n  display: \"inline-block\",\r\n  position: \"relative\",\r\n  paddingBottom: \"2px\",\r\n  borderBottom: isHovered\r\n    ? `3px solid ${theme.palette.info.main}`\r\n    : \"3px solid transparent\",\r\n  transition: \"border-bottom 0.2s\",\r\n  [theme.breakpoints.down(\"lg\")]: {\r\n    fontSize: \"1.25rem\",\r\n  },\r\n  [theme.breakpoints.down(\"md\")]: {\r\n    fontSize: \"1.125rem\",\r\n  },\r\n  [theme.breakpoints.down(\"sm\")]: {\r\n    fontSize: \"1rem\",\r\n  },\r\n}));\r\n\r\nconst StyledTooltip = styled(Box)(({ theme }) => ({\r\n  position: \"fixed\",\r\n  transform: \"translate(-50%, -120%)\",\r\n  backgroundColor: theme.palette.grey[900],\r\n  color: theme.palette.common.white,\r\n  fontSize: \"0.75rem\",\r\n  padding: theme.spacing(1, 2),\r\n  borderRadius: theme.shape.borderRadius,\r\n  whiteSpace: \"nowrap\",\r\n  zIndex: 1000,\r\n  pointerEvents: \"none\",\r\n  [theme.breakpoints.up(\"sm\")]: {\r\n    fontSize: \"0.875rem\",\r\n    padding: theme.spacing(1.5, 3),\r\n  },\r\n}));\r\n\r\nconst StyledContent = styled(Box)(({ theme }) => ({\r\n  padding: theme.spacing(2, 3, 3),\r\n  [theme.breakpoints.up(\"sm\")]: {\r\n    padding: theme.spacing(2, 4, 4),\r\n  },\r\n  [theme.breakpoints.up(\"md\")]: {\r\n    padding: theme.spacing(2, 6, 6),\r\n  },\r\n}));\r\n\r\nconst StyledContentWrapper = styled(Box)(({ theme }) => ({\r\n  color: theme.palette.dark.main,\r\n  lineHeight: 1.5,\r\n  wordBreak: \"break-word\",\r\n  fontSize: 13,\r\n  \"& p\": {\r\n    margin: 0,\r\n    marginBottom: theme.spacing(2),\r\n    \"&:last-child\": {\r\n      marginBottom: 0,\r\n    },\r\n  },\r\n  \"& ul, & ol\": {\r\n    marginTop: theme.spacing(1),\r\n    marginBottom: theme.spacing(2),\r\n    paddingLeft: theme.spacing(3),\r\n    \"&:last-child\": {\r\n      marginBottom: 0,\r\n    },\r\n  },\r\n  \"& li\": {\r\n    marginBottom: theme.spacing(0.5),\r\n  },\r\n}));\r\n\r\nfunction getDefaultOpenSections(\n  sectionIds: string[],\n  isDesktop: boolean,\n  defaultOpen?: boolean | string[]\n) {\n  if (Array.isArray(defaultOpen)) {\n    return new Set(defaultOpen.filter((id) => sectionIds.includes(id)));\n  }\n\n  if (typeof defaultOpen === \"boolean\") {\n    return defaultOpen ? new Set(sectionIds) : new Set<string>();\n  }\n\n  return isDesktop ? new Set(sectionIds) : new Set<string>();\n}\n\nexport function Concertina({ sections, defaultOpen }: ConcertinaProps) {\n  const [hoveredTitle, setHoveredTitle] = useState<string | null>(null);\r\n  const [copiedId, setCopiedId] = useState<string | null>(null);\r\n  const [tooltipPosition, setTooltipPosition] = useState<{\r\n    x: number;\r\n    y: number;\r\n  } | null>(null);\n  const theme = useTheme();\n  const isDesktop = useMediaQuery(theme.breakpoints.up(\"md\"));\n  const sectionIds = sections.map((section) => section.id);\n  const sectionIdsKey = JSON.stringify(sectionIds);\n  const defaultOpenKey = Array.isArray(defaultOpen)\n    ? JSON.stringify(defaultOpen)\n    : String(defaultOpen);\n\n  const [openSections, setOpenSections] = useState<Set<string>>(() => {\n    return getDefaultOpenSections(sectionIds, isDesktop, defaultOpen);\n  });\n\n  React.useEffect(() => {\n    setOpenSections(getDefaultOpenSections(sectionIds, isDesktop, defaultOpen));\n  }, [defaultOpenKey, isDesktop, sectionIdsKey]);\n\r\n  const toggleSection = (id: string) => {\r\n    const newOpenSections = new Set(openSections);\r\n    if (newOpenSections.has(id)) {\r\n      newOpenSections.delete(id);\r\n    } else {\r\n      newOpenSections.add(id);\r\n    }\r\n    setOpenSections(newOpenSections);\r\n  };\r\n\r\n  const copyJumpLink = (id: string, e: React.MouseEvent) => {\r\n    e.stopPropagation();\r\n    const url = `${window.location.origin}${window.location.pathname}#${id}`;\r\n    navigator.clipboard.writeText(url);\r\n    setCopiedId(id);\r\n    setTooltipPosition({ x: e.clientX, y: e.clientY });\r\n    setTimeout(() => {\r\n      setCopiedId(null);\r\n      setTooltipPosition(null);\r\n    }, 2000);\r\n  };\r\n\r\n  return (\r\n    <StyledConcertina>\r\n      {sections.map((section) => (\r\n        <StyledSection key={section.id} id={section.id}>\r\n          <StyledHeader\r\n            onClick={() => toggleSection(section.id)}\r\n            onMouseEnter={() => setHoveredTitle(section.id)}\r\n            onMouseLeave={() => setHoveredTitle(null)}\r\n          >\r\n            <StyledTitleWrapper>\r\n              <StyledTitle isHovered={hoveredTitle === section.id} variant=\"h3\">\r\n                <StyledHashtag\r\n                  isVisible={true}\r\n                  color={\r\n                    hoveredTitle === section.id\r\n                      ? theme.palette.info.main\r\n                      : \"#00000000\"\r\n                  }\r\n                  onClick={(e) => copyJumpLink(section.id, e as any)}\r\n                >\r\n                  #\r\n                </StyledHashtag>\r\n                {section.title}\r\n              </StyledTitle>\r\n            </StyledTitleWrapper>\r\n            <ExpandCircleDownOutlined\r\n              sx={{\r\n                fontSize: \"1.5rem\",\r\n                transform: openSections.has(section.id)\r\n                  ? \"rotate(180deg)\"\r\n                  : \"none\",\r\n              }}\r\n            />\r\n          </StyledHeader>\r\n          <Collapse in={openSections.has(section.id)}>\r\n            <StyledContent>\r\n              <StyledContentWrapper>{section.content}</StyledContentWrapper>\r\n            </StyledContent>\r\n          </Collapse>\r\n        </StyledSection>\r\n      ))}\r\n      {copiedId && tooltipPosition && (\r\n        <StyledTooltip\r\n          sx={{\r\n            left: tooltipPosition.x,\r\n            top: tooltipPosition.y,\r\n          }}\r\n        >\r\n          Link copied\r\n        </StyledTooltip>\r\n      )}\r\n    </StyledConcertina>\r\n  );\r\n}\r\n"],"names":["styled","Box","Typography","useState","useTheme","useMediaQuery","_jsxs","_jsx","ExpandCircleDownOutlined","Collapse"],"mappings":"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"}

package/dist/cjs/components/Tabs.js

@@ -76,16 +76,20 @@ const MobileTabContent = material.styled(material.Box)(({ theme }) => ({
     color: theme.palette.text.primary,
     backgroundColor: theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main,
 }));
-const Tabs = ({ tabs, defaultTab }) => {
+const Tabs = ({ tabs, defaultTab, onTabChange }) => {
     const [activeTab, setActiveTab] = React.useState(defaultTab || tabs[0]?.id);
     const [mobileExpandedTab, setMobileExpandedTab] = React.useState(null);
     const theme = ThemeProvider.useTheme();
     const activeTabContent = tabs.find(tab => tab.id === activeTab)?.content;
-    const handleMobileTabClick = (tabId) => {
+    const handleTabSelect = (tabId) => {
         setActiveTab(tabId);
+        onTabChange?.(tabId);
+    };
+    const handleMobileTabClick = (tabId) => {
+        handleTabSelect(tabId);
         setMobileExpandedTab(mobileExpandedTab === tabId ? null : tabId);
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(TabsContainer, { children: [jsxRuntime.jsx(TabButtonsWrapper, { children: tabs.map((tab) => (jsxRuntime.jsx(TabButton, { onClick: () => setActiveTab(tab.id), isActive: activeTab === tab.id, children: tab.label }, tab.id))) }), jsxRuntime.jsx(TabContent, { children: activeTabContent })] }), jsxRuntime.jsx(MobileContainer, { children: tabs.map((tab, index) => (jsxRuntime.jsxs(material.Box, { sx: {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(TabsContainer, { children: [jsxRuntime.jsx(TabButtonsWrapper, { children: tabs.map((tab) => (jsxRuntime.jsx(TabButton, { onClick: () => handleTabSelect(tab.id), isActive: activeTab === tab.id, children: tab.label }, tab.id))) }), jsxRuntime.jsx(TabContent, { children: activeTabContent })] }), jsxRuntime.jsx(MobileContainer, { children: tabs.map((tab, index) => (jsxRuntime.jsxs(material.Box, { sx: {
                         borderTop: index !== 0 ? '2px solid #e5e7eb' : 'none',
                     }, children: [jsxRuntime.jsxs(MobileTabButton, { onClick: () => handleMobileTabClick(tab.id), isExpanded: mobileExpandedTab === tab.id, children: [jsxRuntime.jsx(material.Box, { component: "span", sx: {
                                         fontSize: '16px',

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../../src/components/Tabs.tsx"],"sourcesContent":["\r\n\r\nimport React, { useState } from 'react';\r\nimport { Box, Button, Collapse, styled } from '@mui/material';\r\nimport { ExpandMoreRounded } from '@mui/icons-material';\r\nimport { useTheme } from '../ThemeProvider';\r\n\r\ninterface Tab {\r\n  id: string;\r\n  label: string;\r\n  content: React.ReactNode;\r\n}\r\n\r\ninterface TabsProps {\r\n  tabs: Tab[];\r\n  defaultTab?: string;\r\n}\r\n\r\nconst TabsContainer = styled(Box)({\r\n  backgroundColor: '#00000000',\r\n  display: 'none',\r\n  '@media (min-width: 1200px)': {\r\n    display: 'block',\r\n  },\r\n});\r\n\r\nconst TabButtonsWrapper = styled(Box)({\r\n  display: 'flex',\r\n  gap: '4px',\r\n  backgroundColor: '#00000000',\r\n});\r\n\r\nconst TabButton = styled(Button,{\r\n  shouldForwardProp: (prop) => prop !== 'isActive'\r\n})<{ isActive: boolean }>(({ theme, isActive }) => ({\r\n  padding: theme.spacing(2, 3),\r\n  fontSize: '16px',\r\n  fontWeight: 500,\r\n  textTransform: 'none',\r\n  color: isActive ? theme.palette.text.primary : '#826E5C',\r\n  backgroundColor: isActive ? theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main : 'transparent',\r\n  borderRadius: 0,\r\n  position: 'relative',\r\n  minWidth: 'auto',\r\n  '&:hover': {\r\n    backgroundColor: isActive ? theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main : 'rgba(77, 48, 25, 0.05)',\r\n    color: theme.palette.text.primary,\r\n  },\r\n  '&::after': isActive ? {\r\n    content: '\"\"',\r\n    position: 'absolute',\r\n    bottom: 0,\r\n    left: 0,\r\n    right: 0,\r\n    height: '4px',\r\n    backgroundColor: theme.palette.primary.main,\r\n  } : {},\r\n}));\r\n\r\nconst TabContent = styled(Box)(({ theme }) => ({\r\n  padding: theme.spacing(3),\r\n  color: theme.palette.text.primary,\r\n  backgroundColor: theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main,\r\n}));\r\n\r\nconst MobileContainer = styled(Box)({\r\n  backgroundColor: '#00000000',\r\n  '@media (min-width: 1200px)': {\r\n    display: 'none',\r\n  },\r\n});\r\n\r\nconst MobileTabButton = styled(Button,{\r\n  shouldForwardProp: (prop) => prop !== 'isExpanded'\r\n})<{ isExpanded: boolean }>(({ theme, isExpanded }) => ({\r\n  width: '100%',\r\n  display: 'flex',\r\n  alignItems: 'center',\r\n  justifyContent: 'space-between',\r\n  padding: theme.spacing(2, 2),\r\n  textAlign: 'left',\r\n  textTransform: 'none',\r\n  borderRadius: 0,\r\n  backgroundColor: isExpanded ? theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main : 'transparent',\r\n  '&:hover': {\r\n    backgroundColor: isExpanded ? theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main : 'rgba(77, 48, 25, 0.05)',\r\n  },\r\n}));\r\n\r\nconst MobileTabContent = styled(Box)(({ theme }) => ({\r\n  padding: theme.spacing(2, 2, 3, 2),\r\n  color: theme.palette.text.primary,\r\n  backgroundColor: theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main,\r\n}));\r\n\r\nexport const Tabs: React.FC<TabsProps> = ({ tabs, defaultTab }) => {\r\n  const [activeTab, setActiveTab] = useState(defaultTab || tabs[0]?.id);\r\n  const [mobileExpandedTab, setMobileExpandedTab] = useState<string | null>(null);\r\n  const theme = useTheme();\r\n  const activeTabContent = tabs.find(tab => tab.id === activeTab)?.content;\r\n\r\n  const handleMobileTabClick = (tabId: string) => {\r\n    setActiveTab(tabId);\r\n    setMobileExpandedTab(mobileExpandedTab === tabId ? null : tabId);\r\n  };\r\n\r\n  return (\r\n    <>\r\n      {/* Desktop View */}\r\n      <TabsContainer>\r\n        <TabButtonsWrapper>\r\n          {tabs.map((tab) => (\r\n            <TabButton\r\n              key={tab.id}\r\n              onClick={() => setActiveTab(tab.id)}\r\n              isActive={activeTab === tab.id}\r\n            >\r\n              {tab.label}\r\n            </TabButton>\r\n          ))}\r\n        </TabButtonsWrapper>\r\n        <TabContent>\r\n          {activeTabContent}\r\n        </TabContent>\r\n      </TabsContainer>\r\n\r\n      {/* Mobile View - Accordion */}\r\n      <MobileContainer>\r\n        {tabs.map((tab, index) => (\r\n          <Box\r\n            key={tab.id}\r\n            sx={{\r\n              borderTop: index !== 0 ? '2px solid #e5e7eb' : 'none',\r\n            }}\r\n          >\r\n            <MobileTabButton\r\n              onClick={() => handleMobileTabClick(tab.id)}\r\n              isExpanded={mobileExpandedTab === tab.id}\r\n            >\r\n              <Box\r\n                component=\"span\"\r\n                sx={{\r\n                  fontSize: '16px',\r\n                  fontWeight: 500,\r\n                  color: activeTab === tab.id ? theme.palette.text.primary : '#826E5C',\r\n                }}\r\n              >\r\n                {tab.label}\r\n              </Box>\r\n              <ExpandMoreRounded\r\n                sx={{\r\n                  fontSize: 20,\r\n                  color: activeTab === tab.id ? theme.palette.text.primary : '#826E5C',\r\n                  transform: mobileExpandedTab === tab.id ? 'rotate(180deg)' : 'rotate(0deg)',\r\n                  transition: 'transform 0.2s',\r\n                }}\r\n              />\r\n            </MobileTabButton>\r\n            <Collapse in={mobileExpandedTab === tab.id}>\r\n              <MobileTabContent>\r\n                {tab.content}\r\n              </MobileTabContent>\r\n            </Collapse>\r\n          </Box>\r\n        ))}\r\n      </MobileContainer>\r\n    </>\r\n  );\r\n};"],"names":["styled","Box","Button","useState","useTheme","_jsxs","_Fragment","_jsx","ExpandMoreRounded","Collapse"],"mappings":"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"}
+{"version":3,"file":"Tabs.js","sources":["../../../../src/components/Tabs.tsx"],"sourcesContent":["\r\n\r\nimport React, { useState } from 'react';\r\nimport { Box, Button, Collapse, styled } from '@mui/material';\r\nimport { ExpandMoreRounded } from '@mui/icons-material';\r\nimport { useTheme } from '../ThemeProvider';\r\n\r\ninterface Tab {\r\n  id: string;\r\n  label: string;\r\n  content: React.ReactNode;\r\n}\r\n\r\ninterface TabsProps {\r\n  tabs: Tab[];\r\n  defaultTab?: string;\r\n  /** Called when the user selects a tab (desktop click or mobile accordion expand). */\r\n  onTabChange?: (tabId: string) => void;\r\n}\r\n\r\nconst TabsContainer = styled(Box)({\r\n  backgroundColor: '#00000000',\r\n  display: 'none',\r\n  '@media (min-width: 1200px)': {\r\n    display: 'block',\r\n  },\r\n});\r\n\r\nconst TabButtonsWrapper = styled(Box)({\r\n  display: 'flex',\r\n  gap: '4px',\r\n  backgroundColor: '#00000000',\r\n});\r\n\r\nconst TabButton = styled(Button,{\r\n  shouldForwardProp: (prop) => prop !== 'isActive'\r\n})<{ isActive: boolean }>(({ theme, isActive }) => ({\r\n  padding: theme.spacing(2, 3),\r\n  fontSize: '16px',\r\n  fontWeight: 500,\r\n  textTransform: 'none',\r\n  color: isActive ? theme.palette.text.primary : '#826E5C',\r\n  backgroundColor: isActive ? theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main : 'transparent',\r\n  borderRadius: 0,\r\n  position: 'relative',\r\n  minWidth: 'auto',\r\n  '&:hover': {\r\n    backgroundColor: isActive ? theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main : 'rgba(77, 48, 25, 0.05)',\r\n    color: theme.palette.text.primary,\r\n  },\r\n  '&::after': isActive ? {\r\n    content: '\"\"',\r\n    position: 'absolute',\r\n    bottom: 0,\r\n    left: 0,\r\n    right: 0,\r\n    height: '4px',\r\n    backgroundColor: theme.palette.primary.main,\r\n  } : {},\r\n}));\r\n\r\nconst TabContent = styled(Box)(({ theme }) => ({\r\n  padding: theme.spacing(3),\r\n  color: theme.palette.text.primary,\r\n  backgroundColor: theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main,\r\n}));\r\n\r\nconst MobileContainer = styled(Box)({\r\n  backgroundColor: '#00000000',\r\n  '@media (min-width: 1200px)': {\r\n    display: 'none',\r\n  },\r\n});\r\n\r\nconst MobileTabButton = styled(Button,{\r\n  shouldForwardProp: (prop) => prop !== 'isExpanded'\r\n})<{ isExpanded: boolean }>(({ theme, isExpanded }) => ({\r\n  width: '100%',\r\n  display: 'flex',\r\n  alignItems: 'center',\r\n  justifyContent: 'space-between',\r\n  padding: theme.spacing(2, 2),\r\n  textAlign: 'left',\r\n  textTransform: 'none',\r\n  borderRadius: 0,\r\n  backgroundColor: isExpanded ? theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main : 'transparent',\r\n  '&:hover': {\r\n    backgroundColor: isExpanded ? theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main : 'rgba(77, 48, 25, 0.05)',\r\n  },\r\n}));\r\n\r\nconst MobileTabContent = styled(Box)(({ theme }) => ({\r\n  padding: theme.spacing(2, 2, 3, 2),\r\n  color: theme.palette.text.primary,\r\n  backgroundColor: theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main,\r\n}));\r\n\r\nexport const Tabs: React.FC<TabsProps> = ({ tabs, defaultTab, onTabChange }) => {\r\n  const [activeTab, setActiveTab] = useState(defaultTab || tabs[0]?.id);\r\n  const [mobileExpandedTab, setMobileExpandedTab] = useState<string | null>(null);\r\n  const theme = useTheme();\r\n  const activeTabContent = tabs.find(tab => tab.id === activeTab)?.content;\r\n\r\n  const handleTabSelect = (tabId: string) => {\r\n    setActiveTab(tabId);\r\n    onTabChange?.(tabId);\r\n  };\r\n\r\n  const handleMobileTabClick = (tabId: string) => {\r\n    handleTabSelect(tabId);\r\n    setMobileExpandedTab(mobileExpandedTab === tabId ? null : tabId);\r\n  };\r\n\r\n  return (\r\n    <>\r\n      {/* Desktop View */}\r\n      <TabsContainer>\r\n        <TabButtonsWrapper>\r\n          {tabs.map((tab) => (\r\n            <TabButton\r\n              key={tab.id}\r\n              onClick={() => handleTabSelect(tab.id)}\r\n              isActive={activeTab === tab.id}\r\n            >\r\n              {tab.label}\r\n            </TabButton>\r\n          ))}\r\n        </TabButtonsWrapper>\r\n        <TabContent>\r\n          {activeTabContent}\r\n        </TabContent>\r\n      </TabsContainer>\r\n\r\n      {/* Mobile View - Accordion */}\r\n      <MobileContainer>\r\n        {tabs.map((tab, index) => (\r\n          <Box\r\n            key={tab.id}\r\n            sx={{\r\n              borderTop: index !== 0 ? '2px solid #e5e7eb' : 'none',\r\n            }}\r\n          >\r\n            <MobileTabButton\r\n              onClick={() => handleMobileTabClick(tab.id)}\r\n              isExpanded={mobileExpandedTab === tab.id}\r\n            >\r\n              <Box\r\n                component=\"span\"\r\n                sx={{\r\n                  fontSize: '16px',\r\n                  fontWeight: 500,\r\n                  color: activeTab === tab.id ? theme.palette.text.primary : '#826E5C',\r\n                }}\r\n              >\r\n                {tab.label}\r\n              </Box>\r\n              <ExpandMoreRounded\r\n                sx={{\r\n                  fontSize: 20,\r\n                  color: activeTab === tab.id ? theme.palette.text.primary : '#826E5C',\r\n                  transform: mobileExpandedTab === tab.id ? 'rotate(180deg)' : 'rotate(0deg)',\r\n                  transition: 'transform 0.2s',\r\n                }}\r\n              />\r\n            </MobileTabButton>\r\n            <Collapse in={mobileExpandedTab === tab.id}>\r\n              <MobileTabContent>\r\n                {tab.content}\r\n              </MobileTabContent>\r\n            </Collapse>\r\n          </Box>\r\n        ))}\r\n      </MobileContainer>\r\n    </>\r\n  );\r\n};"],"names":["styled","Box","Button","useState","useTheme","_jsxs","_Fragment","_jsx","ExpandMoreRounded","Collapse"],"mappings":"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"}

package/dist/cjs/node_modules/domhandler/lib/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('../../../_virtual/index3.js');
+var index = require('../../../_virtual/index4.js');
 var index$1 = require('../../domelementtype/lib/index.js');
 var node = require('./node.js');
 

package/dist/cjs/node_modules/html-dom-parser/lib/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('../../../_virtual/index4.js');
+var index = require('../../../_virtual/index3.js');
 var htmlToDom = require('./server/html-to-dom.js');
 var types = require('./types.js');
 

package/dist/esm/components/AutocompleteSelect.js

@@ -18,12 +18,72 @@ function AutocompleteSelect({ id, label, error, helperText, placeholder, fullWid
                         sx: {
                             zIndex: (muiTheme) => muiTheme.zIndex.modal + 1,
                         },
+                        modifiers: [
+                            {
+                                name: "flip",
+                                options: {
+                                    padding: 8,
+                                },
+                            },
+                            {
+                                name: "preventOverflow",
+                                options: {
+                                    padding: 8,
+                                },
+                            },
+                            {
+                                name: "setListboxMaxHeight",
+                                enabled: true,
+                                phase: "beforeWrite",
+                                fn: ({ state }) => {
+                                    if (typeof window === "undefined")
+                                        return;
+                                    const viewportMargin = 8;
+                                    const maxHeight = 352;
+                                    const minHeight = 96;
+                                    const referenceRect = state.elements.reference.getBoundingClientRect();
+                                    const isAbove = state.placement.startsWith("top");
+                                    const availableHeight = isAbove
+                                        ? referenceRect.top - viewportMargin
+                                        : window.innerHeight -
+                                            referenceRect.bottom -
+                                            viewportMargin;
+                                    state.styles.popper = {
+                                        ...state.styles.popper,
+                                        "--AutocompleteSelect-listbox-max-height": `${Math.max(minHeight, Math.min(maxHeight, availableHeight))}px`,
+                                    };
+                                },
+                            },
+                        ],
+                    },
+                    listbox: {
+                        sx: {
+                            m: 0,
+                            p: 0,
+                            maxHeight: "var(--AutocompleteSelect-listbox-max-height, min(22rem, calc(100vh - 6rem)))",
+                            backgroundColor: theme.palette.light.main,
+                            overflowY: "auto",
+                            "& .MuiAutocomplete-option": {
+                                m: 0,
+                                width: "100%",
+                                boxSizing: "border-box",
+                                borderRadius: 0,
+                                backgroundColor: theme.palette.light.main,
+                                fontSize: "1rem",
+                                color: theme.palette.dark.main,
+                                '&[aria-selected="true"]': {
+                                    backgroundColor: theme.palette.light.main,
+                                },
+                                '&[aria-selected="true"].Mui-focused, &:hover, &.Mui-focused': {
+                                    backgroundColor: `${theme.palette.primary.main}1A !important`,
+                                },
+                            },
+                        },
                     },
                     paper: {
                         sx: {
                             borderRadius: 2,
                             boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
-                            maxHeight: "min(22rem, calc(100vh - 6rem))",
                             overflow: "hidden",
                             backgroundColor: theme.palette.light.main,
                             mt: 0.5,
@@ -39,16 +99,6 @@ function AutocompleteSelect({ id, label, error, helperText, placeholder, fullWid
                     "& .MuiAutocomplete-input": {
                         padding: "0 !important",
                     },
-                    "& + .MuiAutocomplete-popper .MuiAutocomplete-option": {
-                        fontSize: "1rem",
-                        color: theme.palette.dark.main,
-                        '&[aria-selected="true"]': {
-                            backgroundColor: "transparent",
-                        },
-                        '&[aria-selected="true"].Mui-focused, &:hover, &.Mui-focused': {
-                            backgroundColor: `${theme.palette.primary.main}1A !important`,
-                        },
-                    },
                 }, renderInput: (params) => {
                     // 1. Separate structural configurations from direct props
                     const { InputProps, inputProps, ...restParams } = params;

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

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteSelect.js","sources":["../../../../src/components/AutocompleteSelect.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  Autocomplete as MuiAutocomplete,\n  FormHelperText,\n  styled,\n} from \"@mui/material\";\nimport { ExpandMoreRounded } from \"@mui/icons-material\";\nimport { useTheme } from \"../ThemeProvider\"; // Adjust pathway according to project layout\nimport { Input, StyledLabel } from \"./Input\";\n\ninterface AutocompleteOption {\n  value: string;\n  label: string;\n}\n\ninterface AutocompleteSelectProps {\n  id?: string;\n  label?: string;\n  error?: string;\n  helperText?: string;\n  placeholder?: string;\n  fullWidth?: boolean;\n  disabled?: boolean;\n  options: AutocompleteOption[];\n  value: AutocompleteOption | null;\n  onChange: (value: AutocompleteOption | null) => void;\n  className?: string;\n  sx?: any;\n}\n\nconst AutocompleteWrapper = styled(\"div\")({\n  width: \"100%\",\n});\n\nexport function AutocompleteSelect({\n  id,\n  label,\n  error,\n  helperText,\n  placeholder,\n  fullWidth = false,\n  disabled = false,\n  options,\n  value,\n  onChange,\n  className = \"\",\n  sx,\n}: AutocompleteSelectProps): React.JSX.Element {\n  const theme = useTheme();\n  const selectId =\n    id || `auto-select-${Math.random().toString(36).substr(2, 9)}`;\n\n  return (\n    <AutocompleteWrapper\n      className={className}\n      sx={[\n        { ...(!fullWidth && { width: \"auto\" }) },\n        ...(Array.isArray(sx) ? sx : [sx]),\n      ]}\n    >\n      {label && (\n        <StyledLabel htmlFor={selectId} shrink={false}>\n          {label}\n        </StyledLabel>\n      )}\n\n      <MuiAutocomplete\n        id={selectId}\n        options={options}\n        value={value}\n        disabled={disabled}\n        getOptionLabel={(option: { label: string; value: string }) =>\n          option?.label || \"\"\n        }\n        isOptionEqualToValue={(\n          option: AutocompleteOption,\n          val: AutocompleteOption,\n        ) => option?.value === val?.value}\n        onChange={(_event, newValue) => onChange(newValue)}\n        popupIcon={\n          <ExpandMoreRounded sx={{ color: `${theme.palette.dark.main}66` }} />\n        }\n        slotProps={{\n          popper: {\n            sx: {\n              zIndex: (muiTheme) => muiTheme.zIndex.modal + 1,\n            },\n          },\n          paper: {\n            sx: {\n              borderRadius: 2,\n              boxShadow:\n                \"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)\",\n              maxHeight: \"min(22rem, calc(100vh - 6rem))\",\n              overflow: \"hidden\",\n              backgroundColor: theme.palette.light.main,\n              mt: 0.5,\n            },\n          },\n        }}\n        sx={{\n          \"& .MuiOutlinedInput-root\": {\n            padding: \"0 9px !important\",\n            height: 48,\n            display: \"flex\",\n            alignItems: \"center\",\n          },\n          \"& .MuiAutocomplete-input\": {\n            padding: \"0 !important\",\n          },\n          \"& + .MuiAutocomplete-popper .MuiAutocomplete-option\": {\n            fontSize: \"1rem\",\n            color: theme.palette.dark.main,\n            '&[aria-selected=\"true\"]': {\n              backgroundColor: \"transparent\",\n            },\n            '&[aria-selected=\"true\"].Mui-focused, &:hover, &.Mui-focused': {\n              backgroundColor: `${theme.palette.primary.main}1A !important`,\n            },\n          },\n        }}\n        renderInput={(params: any) => {\n          // 1. Separate structural configurations from direct props\n          const { InputProps, inputProps, ...restParams } = params;\n\n          return (\n            <Input\n              {...restParams}\n              // 2. Safely spread native input elements\n              inputProps={inputProps}\n              // 3. Bind MUI's dynamic layout objects (adornments, ref) into the slot configuration\n              InputProps={{\n                ...InputProps,\n              }}\n              error={error}\n              placeholder={placeholder}\n              fullWidth\n              // Explicitly empty string avoids passing a raw error object down to helperText slots\n              helperText=\"\"\n            />\n          );\n        }}\n      />\n\n      {error && (\n        <FormHelperText\n          sx={{\n            mt: 0.75,\n            fontSize: \"0.875rem\",\n            color: theme.palette.error.main,\n          }}\n        >\n          {error}\n        </FormHelperText>\n      )}\n\n      {helperText && !error && (\n        <FormHelperText\n          sx={{\n            mt: 0.75,\n            fontSize: \"0.875rem\",\n            color: `${theme.palette.dark.main}99`,\n          }}\n        >\n          {helperText}\n        </FormHelperText>\n      )}\n    </AutocompleteWrapper>\n  );\n}\n"],"names":["_jsxs","_jsx","MuiAutocomplete"],"mappings":"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"}
+{"version":3,"file":"AutocompleteSelect.js","sources":["../../../../src/components/AutocompleteSelect.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  Autocomplete as MuiAutocomplete,\n  FormHelperText,\n  styled,\n} from \"@mui/material\";\nimport { ExpandMoreRounded } from \"@mui/icons-material\";\nimport { useTheme } from \"../ThemeProvider\"; // Adjust pathway according to project layout\nimport { Input, StyledLabel } from \"./Input\";\n\ninterface AutocompleteOption {\n  value: string;\n  label: string;\n}\n\ninterface AutocompleteSelectProps {\n  id?: string;\n  label?: string;\n  error?: string;\n  helperText?: string;\n  placeholder?: string;\n  fullWidth?: boolean;\n  disabled?: boolean;\n  options: AutocompleteOption[];\n  value: AutocompleteOption | null;\n  onChange: (value: AutocompleteOption | null) => void;\n  className?: string;\n  sx?: any;\n}\n\nconst AutocompleteWrapper = styled(\"div\")({\n  width: \"100%\",\n});\n\nexport function AutocompleteSelect({\n  id,\n  label,\n  error,\n  helperText,\n  placeholder,\n  fullWidth = false,\n  disabled = false,\n  options,\n  value,\n  onChange,\n  className = \"\",\n  sx,\n}: AutocompleteSelectProps): React.JSX.Element {\n  const theme = useTheme();\n  const selectId =\n    id || `auto-select-${Math.random().toString(36).substr(2, 9)}`;\n\n  return (\n    <AutocompleteWrapper\n      className={className}\n      sx={[\n        { ...(!fullWidth && { width: \"auto\" }) },\n        ...(Array.isArray(sx) ? sx : [sx]),\n      ]}\n    >\n      {label && (\n        <StyledLabel htmlFor={selectId} shrink={false}>\n          {label}\n        </StyledLabel>\n      )}\n\n      <MuiAutocomplete\n        id={selectId}\n        options={options}\n        value={value}\n        disabled={disabled}\n        getOptionLabel={(option: { label: string; value: string }) =>\n          option?.label || \"\"\n        }\n        isOptionEqualToValue={(\n          option: AutocompleteOption,\n          val: AutocompleteOption,\n        ) => option?.value === val?.value}\n        onChange={(_event, newValue) => onChange(newValue)}\n        popupIcon={\n          <ExpandMoreRounded sx={{ color: `${theme.palette.dark.main}66` }} />\n        }\n        slotProps={{\n          popper: {\n            sx: {\n              zIndex: (muiTheme) => muiTheme.zIndex.modal + 1,\n            },\n            modifiers: [\n              {\n                name: \"flip\",\n                options: {\n                  padding: 8,\n                },\n              },\n              {\n                name: \"preventOverflow\",\n                options: {\n                  padding: 8,\n                },\n              },\n              {\n                name: \"setListboxMaxHeight\",\n                enabled: true,\n                phase: \"beforeWrite\",\n                fn: ({ state }: any) => {\n                  if (typeof window === \"undefined\") return;\n\n                  const viewportMargin = 8;\n                  const maxHeight = 352;\n                  const minHeight = 96;\n                  const referenceRect =\n                    state.elements.reference.getBoundingClientRect();\n                  const isAbove = state.placement.startsWith(\"top\");\n                  const availableHeight = isAbove\n                    ? referenceRect.top - viewportMargin\n                    : window.innerHeight -\n                      referenceRect.bottom -\n                      viewportMargin;\n\n                  state.styles.popper = {\n                    ...state.styles.popper,\n                    \"--AutocompleteSelect-listbox-max-height\": `${Math.max(\n                      minHeight,\n                      Math.min(maxHeight, availableHeight),\n                    )}px`,\n                  };\n                },\n              },\n            ],\n          },\n          listbox: {\n            sx: {\n              m: 0,\n              p: 0,\n              maxHeight:\n                \"var(--AutocompleteSelect-listbox-max-height, min(22rem, calc(100vh - 6rem)))\",\n              backgroundColor: theme.palette.light.main,\n              overflowY: \"auto\",\n              \"& .MuiAutocomplete-option\": {\n                m: 0,\n                width: \"100%\",\n                boxSizing: \"border-box\",\n                borderRadius: 0,\n                backgroundColor: theme.palette.light.main,\n                fontSize: \"1rem\",\n                color: theme.palette.dark.main,\n                '&[aria-selected=\"true\"]': {\n                  backgroundColor: theme.palette.light.main,\n                },\n                '&[aria-selected=\"true\"].Mui-focused, &:hover, &.Mui-focused':\n                  {\n                    backgroundColor: `${theme.palette.primary.main}1A !important`,\n                  },\n              },\n            },\n          },\n          paper: {\n            sx: {\n              borderRadius: 2,\n              boxShadow:\n                \"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)\",\n              overflow: \"hidden\",\n              backgroundColor: theme.palette.light.main,\n              mt: 0.5,\n            },\n          },\n        }}\n        sx={{\n          \"& .MuiOutlinedInput-root\": {\n            padding: \"0 9px !important\",\n            height: 48,\n            display: \"flex\",\n            alignItems: \"center\",\n          },\n          \"& .MuiAutocomplete-input\": {\n            padding: \"0 !important\",\n          },\n        }}\n        renderInput={(params: any) => {\n          // 1. Separate structural configurations from direct props\n          const { InputProps, inputProps, ...restParams } = params;\n\n          return (\n            <Input\n              {...restParams}\n              // 2. Safely spread native input elements\n              inputProps={inputProps}\n              // 3. Bind MUI's dynamic layout objects (adornments, ref) into the slot configuration\n              InputProps={{\n                ...InputProps,\n              }}\n              error={error}\n              placeholder={placeholder}\n              fullWidth\n              // Explicitly empty string avoids passing a raw error object down to helperText slots\n              helperText=\"\"\n            />\n          );\n        }}\n      />\n\n      {error && (\n        <FormHelperText\n          sx={{\n            mt: 0.75,\n            fontSize: \"0.875rem\",\n            color: theme.palette.error.main,\n          }}\n        >\n          {error}\n        </FormHelperText>\n      )}\n\n      {helperText && !error && (\n        <FormHelperText\n          sx={{\n            mt: 0.75,\n            fontSize: \"0.875rem\",\n            color: `${theme.palette.dark.main}99`,\n          }}\n        >\n          {helperText}\n        </FormHelperText>\n      )}\n    </AutocompleteWrapper>\n  );\n}\n"],"names":["_jsxs","_jsx","MuiAutocomplete"],"mappings":"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"}

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

@@ -6,6 +6,11 @@ interface ConcertinaSection {
 }
 interface ConcertinaProps {
     sections: ConcertinaSection[];
+    /**
+     * Sets the default open state. When omitted, all sections open on desktop and
+     * all sections close on mobile.
+     */
+    defaultOpen?: boolean | string[];
 }
-export declare function Concertina({ sections }: ConcertinaProps): import("react/jsx-runtime").JSX.Element;
+export declare function Concertina({ sections, defaultOpen }: ConcertinaProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/components/Concertina.js

@@ -119,26 +119,32 @@ const StyledContentWrapper = styled(Box)(({ theme }) => ({
         marginBottom: theme.spacing(0.5),
     },
 }));
-function Concertina({ sections }) {
+function getDefaultOpenSections(sectionIds, isDesktop, defaultOpen) {
+    if (Array.isArray(defaultOpen)) {
+        return new Set(defaultOpen.filter((id) => sectionIds.includes(id)));
+    }
+    if (typeof defaultOpen === "boolean") {
+        return defaultOpen ? new Set(sectionIds) : new Set();
+    }
+    return isDesktop ? new Set(sectionIds) : new Set();
+}
+function Concertina({ sections, defaultOpen }) {
     const [hoveredTitle, setHoveredTitle] = useState(null);
     const [copiedId, setCopiedId] = useState(null);
     const [tooltipPosition, setTooltipPosition] = useState(null);
     const theme = useTheme();
     const isDesktop = useMediaQuery(theme.breakpoints.up("md"));
+    const sectionIds = sections.map((section) => section.id);
+    const sectionIdsKey = JSON.stringify(sectionIds);
+    const defaultOpenKey = Array.isArray(defaultOpen)
+        ? JSON.stringify(defaultOpen)
+        : String(defaultOpen);
     const [openSections, setOpenSections] = useState(() => {
-        // Initialize with all sections open on desktop, closed on mobile
-        return isDesktop ? new Set(sections.map((s) => s.id)) : new Set();
+        return getDefaultOpenSections(sectionIds, isDesktop, defaultOpen);
     });
-    const sectionIdsKey = JSON.stringify(sections.map((s) => s.id));
     React__default.useEffect(() => {
-        const sectionIds = JSON.parse(sectionIdsKey);
-        if (isDesktop) {
-            setOpenSections(new Set(sectionIds));
-        }
-        else {
-            setOpenSections(new Set());
-        }
-    }, [isDesktop, sectionIdsKey]);
+        setOpenSections(getDefaultOpenSections(sectionIds, isDesktop, defaultOpen));
+    }, [defaultOpenKey, isDesktop, sectionIdsKey]);
     const toggleSection = (id) => {
         const newOpenSections = new Set(openSections);
         if (newOpenSections.has(id)) {

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

@@ -1 +1 @@
-{"version":3,"file":"Concertina.js","sources":["../../../../src/components/Concertina.tsx"],"sourcesContent":["import React, { useState } from \"react\";\r\nimport {\r\n  Box,\r\n  styled,\r\n  Typography,\r\n  Collapse,\r\n  useMediaQuery,\r\n} from \"@mui/material\";\r\nimport {\r\n  ExpandCircleDown,\r\n  ExpandCircleDownOutlined,\r\n  ExpandMoreRounded,\r\n} from \"@mui/icons-material\";\r\nimport { useTheme } from \"../ThemeProvider\";\r\n\r\ninterface ConcertinaSection {\r\n  id: string;\r\n  title: string;\r\n  content: React.ReactNode;\r\n}\r\n\r\ninterface ConcertinaProps {\r\n  sections: ConcertinaSection[];\r\n}\r\n\r\nconst StyledConcertina = styled(Box)(({ theme }) => ({\r\n  width: \"100%\",\r\n  display: \"flex\",\r\n  flexDirection: \"column\",\r\n  gap: theme.spacing(1),\r\n}));\r\n\r\nconst StyledSection = styled(Box)(({ theme }) => ({\r\n  overflow: \"hidden\",\r\n}));\r\n\r\nconst StyledHeader = styled(Box)(({ theme }) => ({\r\n  display: \"flex\",\r\n  alignItems: \"center\",\r\n  borderTop: `2px solid ${theme.palette.grey[200]}`,\r\n  borderBottom: `2px solid ${theme.palette.grey[200]}`,\r\n  justifyContent: \"space-between\",\r\n  cursor: \"pointer\",\r\n  transition: \"background-color 0.2s\",\r\n  gap: theme.spacing(2),\r\n  \"&:hover\": {\r\n    backgroundColor: theme.palette.background.default,\r\n  },\r\n  padding: theme.spacing(2),\r\n}));\r\n\r\nconst StyledTitleWrapper = styled(Box)(({ theme }) => ({\r\n  display: \"flex\",\r\n  alignItems: \"center\",\r\n  gap: 0,\r\n  flex: 1,\r\n  minWidth: 0,\r\n}));\r\n\r\nconst StyledHashtag = styled(\"span\", {\r\n  shouldForwardProp: (prop) => prop !== \"isVisible\" && prop !== \"color\",\r\n})<{ isVisible: boolean; color?: string }>(({ theme, isVisible, color }) => ({\r\n  color: color || theme.palette.info.main,\r\n  fontWeight: 700,\r\n  fontSize: \"inherit\",\r\n  opacity: isVisible ? 1 : 0,\r\n  transition: \"opacity 0.2s\",\r\n  marginRight: isVisible ? \"0.25em\" : 0,\r\n  cursor: \"pointer\",\r\n}));\r\n\r\nconst StyledTitle = styled(Typography, {\r\n  shouldForwardProp: (prop) => prop !== \"isHovered\",\r\n})<{ isHovered: boolean }>(({ theme, isHovered }) => ({\r\n  fontWeight: 700,\r\n  fontSize: \"1.75rem\",\r\n  lineHeight: 1.2,\r\n  color: theme.palette.dark.main,\r\n  wordBreak: \"break-word\",\r\n  display: \"inline-block\",\r\n  position: \"relative\",\r\n  paddingBottom: \"2px\",\r\n  borderBottom: isHovered\r\n    ? `3px solid ${theme.palette.info.main}`\r\n    : \"3px solid transparent\",\r\n  transition: \"border-bottom 0.2s\",\r\n  [theme.breakpoints.down(\"lg\")]: {\r\n    fontSize: \"1.25rem\",\r\n  },\r\n  [theme.breakpoints.down(\"md\")]: {\r\n    fontSize: \"1.125rem\",\r\n  },\r\n  [theme.breakpoints.down(\"sm\")]: {\r\n    fontSize: \"1rem\",\r\n  },\r\n}));\r\n\r\nconst StyledTooltip = styled(Box)(({ theme }) => ({\r\n  position: \"fixed\",\r\n  transform: \"translate(-50%, -120%)\",\r\n  backgroundColor: theme.palette.grey[900],\r\n  color: theme.palette.common.white,\r\n  fontSize: \"0.75rem\",\r\n  padding: theme.spacing(1, 2),\r\n  borderRadius: theme.shape.borderRadius,\r\n  whiteSpace: \"nowrap\",\r\n  zIndex: 1000,\r\n  pointerEvents: \"none\",\r\n  [theme.breakpoints.up(\"sm\")]: {\r\n    fontSize: \"0.875rem\",\r\n    padding: theme.spacing(1.5, 3),\r\n  },\r\n}));\r\n\r\nconst StyledContent = styled(Box)(({ theme }) => ({\r\n  padding: theme.spacing(2, 3, 3),\r\n  [theme.breakpoints.up(\"sm\")]: {\r\n    padding: theme.spacing(2, 4, 4),\r\n  },\r\n  [theme.breakpoints.up(\"md\")]: {\r\n    padding: theme.spacing(2, 6, 6),\r\n  },\r\n}));\r\n\r\nconst StyledContentWrapper = styled(Box)(({ theme }) => ({\r\n  color: theme.palette.dark.main,\r\n  lineHeight: 1.5,\r\n  wordBreak: \"break-word\",\r\n  fontSize: 13,\r\n  \"& p\": {\r\n    margin: 0,\r\n    marginBottom: theme.spacing(2),\r\n    \"&:last-child\": {\r\n      marginBottom: 0,\r\n    },\r\n  },\r\n  \"& ul, & ol\": {\r\n    marginTop: theme.spacing(1),\r\n    marginBottom: theme.spacing(2),\r\n    paddingLeft: theme.spacing(3),\r\n    \"&:last-child\": {\r\n      marginBottom: 0,\r\n    },\r\n  },\r\n  \"& li\": {\r\n    marginBottom: theme.spacing(0.5),\r\n  },\r\n}));\r\n\r\nexport function Concertina({ sections }: ConcertinaProps) {\r\n  const [hoveredTitle, setHoveredTitle] = useState<string | null>(null);\r\n  const [copiedId, setCopiedId] = useState<string | null>(null);\r\n  const [tooltipPosition, setTooltipPosition] = useState<{\r\n    x: number;\r\n    y: number;\r\n  } | null>(null);\r\n  const theme = useTheme();\r\n  const isDesktop = useMediaQuery(theme.breakpoints.up(\"md\"));\r\n\r\n  const [openSections, setOpenSections] = useState<Set<string>>(() => {\r\n    // Initialize with all sections open on desktop, closed on mobile\r\n    return isDesktop ? new Set(sections.map((s) => s.id)) : new Set();\r\n  });\r\n\r\n  const sectionIdsKey = JSON.stringify(sections.map((s) => s.id));\r\n\r\n  React.useEffect(() => {\r\n    const sectionIds = JSON.parse(sectionIdsKey) as string[];\r\n\r\n    if (isDesktop) {\r\n      setOpenSections(new Set(sectionIds));\r\n    } else {\r\n      setOpenSections(new Set());\r\n    }\r\n  }, [isDesktop, sectionIdsKey]);\r\n\r\n  const toggleSection = (id: string) => {\r\n    const newOpenSections = new Set(openSections);\r\n    if (newOpenSections.has(id)) {\r\n      newOpenSections.delete(id);\r\n    } else {\r\n      newOpenSections.add(id);\r\n    }\r\n    setOpenSections(newOpenSections);\r\n  };\r\n\r\n  const copyJumpLink = (id: string, e: React.MouseEvent) => {\r\n    e.stopPropagation();\r\n    const url = `${window.location.origin}${window.location.pathname}#${id}`;\r\n    navigator.clipboard.writeText(url);\r\n    setCopiedId(id);\r\n    setTooltipPosition({ x: e.clientX, y: e.clientY });\r\n    setTimeout(() => {\r\n      setCopiedId(null);\r\n      setTooltipPosition(null);\r\n    }, 2000);\r\n  };\r\n\r\n  return (\r\n    <StyledConcertina>\r\n      {sections.map((section) => (\r\n        <StyledSection key={section.id} id={section.id}>\r\n          <StyledHeader\r\n            onClick={() => toggleSection(section.id)}\r\n            onMouseEnter={() => setHoveredTitle(section.id)}\r\n            onMouseLeave={() => setHoveredTitle(null)}\r\n          >\r\n            <StyledTitleWrapper>\r\n              <StyledTitle isHovered={hoveredTitle === section.id} variant=\"h3\">\r\n                <StyledHashtag\r\n                  isVisible={true}\r\n                  color={\r\n                    hoveredTitle === section.id\r\n                      ? theme.palette.info.main\r\n                      : \"#00000000\"\r\n                  }\r\n                  onClick={(e) => copyJumpLink(section.id, e as any)}\r\n                >\r\n                  #\r\n                </StyledHashtag>\r\n                {section.title}\r\n              </StyledTitle>\r\n            </StyledTitleWrapper>\r\n            <ExpandCircleDownOutlined\r\n              sx={{\r\n                fontSize: \"1.5rem\",\r\n                transform: openSections.has(section.id)\r\n                  ? \"rotate(180deg)\"\r\n                  : \"none\",\r\n              }}\r\n            />\r\n          </StyledHeader>\r\n          <Collapse in={openSections.has(section.id)}>\r\n            <StyledContent>\r\n              <StyledContentWrapper>{section.content}</StyledContentWrapper>\r\n            </StyledContent>\r\n          </Collapse>\r\n        </StyledSection>\r\n      ))}\r\n      {copiedId && tooltipPosition && (\r\n        <StyledTooltip\r\n          sx={{\r\n            left: tooltipPosition.x,\r\n            top: tooltipPosition.y,\r\n          }}\r\n        >\r\n          Link copied\r\n        </StyledTooltip>\r\n      )}\r\n    </StyledConcertina>\r\n  );\r\n}\r\n"],"names":["React","_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"Concertina.js","sources":["../../../../src/components/Concertina.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport {\r\n  Box,\r\n  styled,\r\n  Typography,\r\n  Collapse,\r\n  useMediaQuery,\r\n} from \"@mui/material\";\r\nimport {\r\n  ExpandCircleDown,\r\n  ExpandCircleDownOutlined,\r\n  ExpandMoreRounded,\r\n} from \"@mui/icons-material\";\r\nimport { useTheme } from \"../ThemeProvider\";\r\n\r\ninterface ConcertinaSection {\r\n  id: string;\r\n  title: string;\r\n  content: React.ReactNode;\r\n}\r\n\r\ninterface ConcertinaProps {\n  sections: ConcertinaSection[];\n  /**\n   * Sets the default open state. When omitted, all sections open on desktop and\n   * all sections close on mobile.\n   */\n  defaultOpen?: boolean | string[];\n}\n\r\nconst StyledConcertina = styled(Box)(({ theme }) => ({\r\n  width: \"100%\",\r\n  display: \"flex\",\r\n  flexDirection: \"column\",\r\n  gap: theme.spacing(1),\r\n}));\r\n\r\nconst StyledSection = styled(Box)(({ theme }) => ({\r\n  overflow: \"hidden\",\r\n}));\r\n\r\nconst StyledHeader = styled(Box)(({ theme }) => ({\r\n  display: \"flex\",\r\n  alignItems: \"center\",\r\n  borderTop: `2px solid ${theme.palette.grey[200]}`,\r\n  borderBottom: `2px solid ${theme.palette.grey[200]}`,\r\n  justifyContent: \"space-between\",\r\n  cursor: \"pointer\",\r\n  transition: \"background-color 0.2s\",\r\n  gap: theme.spacing(2),\r\n  \"&:hover\": {\r\n    backgroundColor: theme.palette.background.default,\r\n  },\r\n  padding: theme.spacing(2),\r\n}));\r\n\r\nconst StyledTitleWrapper = styled(Box)(({ theme }) => ({\r\n  display: \"flex\",\r\n  alignItems: \"center\",\r\n  gap: 0,\r\n  flex: 1,\r\n  minWidth: 0,\r\n}));\r\n\r\nconst StyledHashtag = styled(\"span\", {\r\n  shouldForwardProp: (prop) => prop !== \"isVisible\" && prop !== \"color\",\r\n})<{ isVisible: boolean; color?: string }>(({ theme, isVisible, color }) => ({\r\n  color: color || theme.palette.info.main,\r\n  fontWeight: 700,\r\n  fontSize: \"inherit\",\r\n  opacity: isVisible ? 1 : 0,\r\n  transition: \"opacity 0.2s\",\r\n  marginRight: isVisible ? \"0.25em\" : 0,\r\n  cursor: \"pointer\",\r\n}));\r\n\r\nconst StyledTitle = styled(Typography, {\r\n  shouldForwardProp: (prop) => prop !== \"isHovered\",\r\n})<{ isHovered: boolean }>(({ theme, isHovered }) => ({\r\n  fontWeight: 700,\r\n  fontSize: \"1.75rem\",\r\n  lineHeight: 1.2,\r\n  color: theme.palette.dark.main,\r\n  wordBreak: \"break-word\",\r\n  display: \"inline-block\",\r\n  position: \"relative\",\r\n  paddingBottom: \"2px\",\r\n  borderBottom: isHovered\r\n    ? `3px solid ${theme.palette.info.main}`\r\n    : \"3px solid transparent\",\r\n  transition: \"border-bottom 0.2s\",\r\n  [theme.breakpoints.down(\"lg\")]: {\r\n    fontSize: \"1.25rem\",\r\n  },\r\n  [theme.breakpoints.down(\"md\")]: {\r\n    fontSize: \"1.125rem\",\r\n  },\r\n  [theme.breakpoints.down(\"sm\")]: {\r\n    fontSize: \"1rem\",\r\n  },\r\n}));\r\n\r\nconst StyledTooltip = styled(Box)(({ theme }) => ({\r\n  position: \"fixed\",\r\n  transform: \"translate(-50%, -120%)\",\r\n  backgroundColor: theme.palette.grey[900],\r\n  color: theme.palette.common.white,\r\n  fontSize: \"0.75rem\",\r\n  padding: theme.spacing(1, 2),\r\n  borderRadius: theme.shape.borderRadius,\r\n  whiteSpace: \"nowrap\",\r\n  zIndex: 1000,\r\n  pointerEvents: \"none\",\r\n  [theme.breakpoints.up(\"sm\")]: {\r\n    fontSize: \"0.875rem\",\r\n    padding: theme.spacing(1.5, 3),\r\n  },\r\n}));\r\n\r\nconst StyledContent = styled(Box)(({ theme }) => ({\r\n  padding: theme.spacing(2, 3, 3),\r\n  [theme.breakpoints.up(\"sm\")]: {\r\n    padding: theme.spacing(2, 4, 4),\r\n  },\r\n  [theme.breakpoints.up(\"md\")]: {\r\n    padding: theme.spacing(2, 6, 6),\r\n  },\r\n}));\r\n\r\nconst StyledContentWrapper = styled(Box)(({ theme }) => ({\r\n  color: theme.palette.dark.main,\r\n  lineHeight: 1.5,\r\n  wordBreak: \"break-word\",\r\n  fontSize: 13,\r\n  \"& p\": {\r\n    margin: 0,\r\n    marginBottom: theme.spacing(2),\r\n    \"&:last-child\": {\r\n      marginBottom: 0,\r\n    },\r\n  },\r\n  \"& ul, & ol\": {\r\n    marginTop: theme.spacing(1),\r\n    marginBottom: theme.spacing(2),\r\n    paddingLeft: theme.spacing(3),\r\n    \"&:last-child\": {\r\n      marginBottom: 0,\r\n    },\r\n  },\r\n  \"& li\": {\r\n    marginBottom: theme.spacing(0.5),\r\n  },\r\n}));\r\n\r\nfunction getDefaultOpenSections(\n  sectionIds: string[],\n  isDesktop: boolean,\n  defaultOpen?: boolean | string[]\n) {\n  if (Array.isArray(defaultOpen)) {\n    return new Set(defaultOpen.filter((id) => sectionIds.includes(id)));\n  }\n\n  if (typeof defaultOpen === \"boolean\") {\n    return defaultOpen ? new Set(sectionIds) : new Set<string>();\n  }\n\n  return isDesktop ? new Set(sectionIds) : new Set<string>();\n}\n\nexport function Concertina({ sections, defaultOpen }: ConcertinaProps) {\n  const [hoveredTitle, setHoveredTitle] = useState<string | null>(null);\r\n  const [copiedId, setCopiedId] = useState<string | null>(null);\r\n  const [tooltipPosition, setTooltipPosition] = useState<{\r\n    x: number;\r\n    y: number;\r\n  } | null>(null);\n  const theme = useTheme();\n  const isDesktop = useMediaQuery(theme.breakpoints.up(\"md\"));\n  const sectionIds = sections.map((section) => section.id);\n  const sectionIdsKey = JSON.stringify(sectionIds);\n  const defaultOpenKey = Array.isArray(defaultOpen)\n    ? JSON.stringify(defaultOpen)\n    : String(defaultOpen);\n\n  const [openSections, setOpenSections] = useState<Set<string>>(() => {\n    return getDefaultOpenSections(sectionIds, isDesktop, defaultOpen);\n  });\n\n  React.useEffect(() => {\n    setOpenSections(getDefaultOpenSections(sectionIds, isDesktop, defaultOpen));\n  }, [defaultOpenKey, isDesktop, sectionIdsKey]);\n\r\n  const toggleSection = (id: string) => {\r\n    const newOpenSections = new Set(openSections);\r\n    if (newOpenSections.has(id)) {\r\n      newOpenSections.delete(id);\r\n    } else {\r\n      newOpenSections.add(id);\r\n    }\r\n    setOpenSections(newOpenSections);\r\n  };\r\n\r\n  const copyJumpLink = (id: string, e: React.MouseEvent) => {\r\n    e.stopPropagation();\r\n    const url = `${window.location.origin}${window.location.pathname}#${id}`;\r\n    navigator.clipboard.writeText(url);\r\n    setCopiedId(id);\r\n    setTooltipPosition({ x: e.clientX, y: e.clientY });\r\n    setTimeout(() => {\r\n      setCopiedId(null);\r\n      setTooltipPosition(null);\r\n    }, 2000);\r\n  };\r\n\r\n  return (\r\n    <StyledConcertina>\r\n      {sections.map((section) => (\r\n        <StyledSection key={section.id} id={section.id}>\r\n          <StyledHeader\r\n            onClick={() => toggleSection(section.id)}\r\n            onMouseEnter={() => setHoveredTitle(section.id)}\r\n            onMouseLeave={() => setHoveredTitle(null)}\r\n          >\r\n            <StyledTitleWrapper>\r\n              <StyledTitle isHovered={hoveredTitle === section.id} variant=\"h3\">\r\n                <StyledHashtag\r\n                  isVisible={true}\r\n                  color={\r\n                    hoveredTitle === section.id\r\n                      ? theme.palette.info.main\r\n                      : \"#00000000\"\r\n                  }\r\n                  onClick={(e) => copyJumpLink(section.id, e as any)}\r\n                >\r\n                  #\r\n                </StyledHashtag>\r\n                {section.title}\r\n              </StyledTitle>\r\n            </StyledTitleWrapper>\r\n            <ExpandCircleDownOutlined\r\n              sx={{\r\n                fontSize: \"1.5rem\",\r\n                transform: openSections.has(section.id)\r\n                  ? \"rotate(180deg)\"\r\n                  : \"none\",\r\n              }}\r\n            />\r\n          </StyledHeader>\r\n          <Collapse in={openSections.has(section.id)}>\r\n            <StyledContent>\r\n              <StyledContentWrapper>{section.content}</StyledContentWrapper>\r\n            </StyledContent>\r\n          </Collapse>\r\n        </StyledSection>\r\n      ))}\r\n      {copiedId && tooltipPosition && (\r\n        <StyledTooltip\r\n          sx={{\r\n            left: tooltipPosition.x,\r\n            top: tooltipPosition.y,\r\n          }}\r\n        >\r\n          Link copied\r\n        </StyledTooltip>\r\n      )}\r\n    </StyledConcertina>\r\n  );\r\n}\r\n"],"names":["React","_jsxs","_jsx"],"mappings":";;;;;;AA8BA,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM;AACnD,IAAA,KAAK,EAAE,MAAM;AACb,IAAA,OAAO,EAAE,MAAM;AACf,IAAA,aAAa,EAAE,QAAQ;AACvB,IAAA,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;AACtB,CAAA,CAAC,CAAC;AAEH,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM;AAChD,IAAA,QAAQ,EAAE,QAAQ;AACnB,CAAA,CAAC,CAAC;AAEH,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM;AAC/C,IAAA,OAAO,EAAE,MAAM;AACf,IAAA,UAAU,EAAE,QAAQ;IACpB,SAAS,EAAE,CAAA,UAAA,EAAa,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA,CAAE;IACjD,YAAY,EAAE,CAAA,UAAA,EAAa,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA,CAAE;AACpD,IAAA,cAAc,EAAE,eAAe;AAC/B,IAAA,MAAM,EAAE,SAAS;AACjB,IAAA,UAAU,EAAE,uBAAuB;AACnC,IAAA,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;AACrB,IAAA,SAAS,EAAE;AACT,QAAA,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO;AAClD,KAAA;AACD,IAAA,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;AAC1B,CAAA,CAAC,CAAC;AAEH,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM;AACrD,IAAA,OAAO,EAAE,MAAM;AACf,IAAA,UAAU,EAAE,QAAQ;AACpB,IAAA,GAAG,EAAE,CAAC;AACN,IAAA,IAAI,EAAE,CAAC;AACP,IAAA,QAAQ,EAAE,CAAC;AACZ,CAAA,CAAC,CAAC;AAEH,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE;AACnC,IAAA,iBAAiB,EAAE,CAAC,IAAI,KAAK,IAAI,KAAK,WAAW,IAAI,IAAI,KAAK,OAAO;AACtE,CAAA,CAAC,CAAyC,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM;IAC3E,KAAK,EAAE,KAAK,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AACvC,IAAA,UAAU,EAAE,GAAG;AACf,IAAA,QAAQ,EAAE,SAAS;IACnB,OAAO,EAAE,SAAS,GAAG,CAAC,GAAG,CAAC;AAC1B,IAAA,UAAU,EAAE,cAAc;IAC1B,WAAW,EAAE,SAAS,GAAG,QAAQ,GAAG,CAAC;AACrC,IAAA,MAAM,EAAE,SAAS;AAClB,CAAA,CAAC,CAAC;AAEH,MAAM,WAAW,GAAG,MAAM,CAAC,UAAU,EAAE;IACrC,iBAAiB,EAAE,CAAC,IAAI,KAAK,IAAI,KAAK,WAAW;CAClD,CAAC,CAAyB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM;AACpD,IAAA,UAAU,EAAE,GAAG;AACf,IAAA,QAAQ,EAAE,SAAS;AACnB,IAAA,UAAU,EAAE,GAAG;AACf,IAAA,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AAC9B,IAAA,SAAS,EAAE,YAAY;AACvB,IAAA,OAAO,EAAE,cAAc;AACvB,IAAA,QAAQ,EAAE,UAAU;AACpB,IAAA,aAAa,EAAE,KAAK;AACpB,IAAA,YAAY,EAAE;UACV,aAAa,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;AACtC,UAAE,uBAAuB;AAC3B,IAAA,UAAU,EAAE,oBAAoB;IAChC,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG;AAC9B,QAAA,QAAQ,EAAE,SAAS;AACpB,KAAA;IACD,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG;AAC9B,QAAA,QAAQ,EAAE,UAAU;AACrB,KAAA;IACD,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG;AAC9B,QAAA,QAAQ,EAAE,MAAM;AACjB,KAAA;AACF,CAAA,CAAC,CAAC;AAEH,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM;AAChD,IAAA,QAAQ,EAAE,OAAO;AACjB,IAAA,SAAS,EAAE,wBAAwB;IACnC,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;AACxC,IAAA,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK;AACjC,IAAA,QAAQ,EAAE,SAAS;IACnB,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC;AAC5B,IAAA,YAAY,EAAE,KAAK,CAAC,KAAK,CAAC,YAAY;AACtC,IAAA,UAAU,EAAE,QAAQ;AACpB,IAAA,MAAM,EAAE,IAAI;AACZ,IAAA,aAAa,EAAE,MAAM;IACrB,CAAC,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;AAC5B,QAAA,QAAQ,EAAE,UAAU;QACpB,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;AAC/B,KAAA;AACF,CAAA,CAAC,CAAC;AAEH,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM;IAChD,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;IAC/B,CAAC,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;QAC5B,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AAChC,KAAA;IACD,CAAC,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;QAC5B,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AAChC,KAAA;AACF,CAAA,CAAC,CAAC;AAEH,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM;AACvD,IAAA,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AAC9B,IAAA,UAAU,EAAE,GAAG;AACf,IAAA,SAAS,EAAE,YAAY;AACvB,IAAA,QAAQ,EAAE,EAAE;AACZ,IAAA,KAAK,EAAE;AACL,QAAA,MAAM,EAAE,CAAC;AACT,QAAA,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;AAC9B,QAAA,cAAc,EAAE;AACd,YAAA,YAAY,EAAE,CAAC;AAChB,SAAA;AACF,KAAA;AACD,IAAA,YAAY,EAAE;AACZ,QAAA,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;AAC3B,QAAA,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;AAC9B,QAAA,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;AAC7B,QAAA,cAAc,EAAE;AACd,YAAA,YAAY,EAAE,CAAC;AAChB,SAAA;AACF,KAAA;AACD,IAAA,MAAM,EAAE;AACN,QAAA,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;AACjC,KAAA;AACF,CAAA,CAAC,CAAC;AAEH,SAAS,sBAAsB,CAC7B,UAAoB,EACpB,SAAkB,EAClB,WAAgC,EAAA;AAEhC,IAAA,IAAI,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE;QAC9B,OAAO,IAAI,GAAG,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;IACrE;AAEA,IAAA,IAAI,OAAO,WAAW,KAAK,SAAS,EAAE;AACpC,QAAA,OAAO,WAAW,GAAG,IAAI,GAAG,CAAC,UAAU,CAAC,GAAG,IAAI,GAAG,EAAU;IAC9D;AAEA,IAAA,OAAO,SAAS,GAAG,IAAI,GAAG,CAAC,UAAU,CAAC,GAAG,IAAI,GAAG,EAAU;AAC5D;SAEgB,UAAU,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAmB,EAAA;IACnE,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC;IACrE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC;IAC7D,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAG5C,IAAI,CAAC;AACf,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE;AACxB,IAAA,MAAM,SAAS,GAAG,aAAa,CAAC,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;AAC3D,IAAA,MAAM,UAAU,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,KAAK,OAAO,CAAC,EAAE,CAAC;IACxD,MAAM,aAAa,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC;AAChD,IAAA,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAAC,WAAW;AAC9C,UAAE,IAAI,CAAC,SAAS,CAAC,WAAW;AAC5B,UAAE,MAAM,CAAC,WAAW,CAAC;IAEvB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAc,MAAK;QACjE,OAAO,sBAAsB,CAAC,UAAU,EAAE,SAAS,EAAE,WAAW,CAAC;AACnE,IAAA,CAAC,CAAC;AAEF,IAAAA,cAAK,CAAC,SAAS,CAAC,MAAK;QACnB,eAAe,CAAC,sBAAsB,CAAC,UAAU,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC;IAC7E,CAAC,EAAE,CAAC,cAAc,EAAE,SAAS,EAAE,aAAa,CAAC,CAAC;AAE9C,IAAA,MAAM,aAAa,GAAG,CAAC,EAAU,KAAI;AACnC,QAAA,MAAM,eAAe,GAAG,IAAI,GAAG,CAAC,YAAY,CAAC;AAC7C,QAAA,IAAI,eAAe,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE;AAC3B,YAAA,eAAe,CAAC,MAAM,CAAC,EAAE,CAAC;QAC5B;aAAO;AACL,YAAA,eAAe,CAAC,GAAG,CAAC,EAAE,CAAC;QACzB;QACA,eAAe,CAAC,eAAe,CAAC;AAClC,IAAA,CAAC;AAED,IAAA,MAAM,YAAY,GAAG,CAAC,EAAU,EAAE,CAAmB,KAAI;QACvD,CAAC,CAAC,eAAe,EAAE;AACnB,QAAA,MAAM,GAAG,GAAG,CAAA,EAAG,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAA,EAAG,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAA,CAAA,EAAI,EAAE,EAAE;AACxE,QAAA,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC;QAClC,WAAW,CAAC,EAAE,CAAC;AACf,QAAA,kBAAkB,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC;QAClD,UAAU,CAAC,MAAK;YACd,WAAW,CAAC,IAAI,CAAC;YACjB,kBAAkB,CAAC,IAAI,CAAC;QAC1B,CAAC,EAAE,IAAI,CAAC;AACV,IAAA,CAAC;AAED,IAAA,QACEC,IAAA,CAAC,gBAAgB,eACd,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,MACpBA,IAAA,CAAC,aAAa,EAAA,EAAkB,EAAE,EAAE,OAAO,CAAC,EAAE,EAAA,QAAA,EAAA,CAC5CA,IAAA,CAAC,YAAY,EAAA,EACX,OAAO,EAAE,MAAM,aAAa,CAAC,OAAO,CAAC,EAAE,CAAC,EACxC,YAAY,EAAE,MAAM,eAAe,CAAC,OAAO,CAAC,EAAE,CAAC,EAC/C,YAAY,EAAE,MAAM,eAAe,CAAC,IAAI,CAAC,EAAA,QAAA,EAAA,CAEzCC,IAAC,kBAAkB,EAAA,EAAA,QAAA,EACjBD,KAAC,WAAW,EAAA,EAAC,SAAS,EAAE,YAAY,KAAK,OAAO,CAAC,EAAE,EAAE,OAAO,EAAC,IAAI,EAAA,QAAA,EAAA,CAC/DC,IAAC,aAAa,EAAA,EACZ,SAAS,EAAE,IAAI,EACf,KAAK,EACH,YAAY,KAAK,OAAO,CAAC;AACvB,kDAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC;AACrB,kDAAE,WAAW,EAEjB,OAAO,EAAE,CAAC,CAAC,KAAK,YAAY,CAAC,OAAO,CAAC,EAAE,EAAE,CAAQ,CAAC,EAAA,QAAA,EAAA,GAAA,EAAA,CAGpC,EACf,OAAO,CAAC,KAAK,CAAA,EAAA,CACF,EAAA,CACK,EACrBA,GAAA,CAAC,wBAAwB,EAAA,EACvB,EAAE,EAAE;AACF,oCAAA,QAAQ,EAAE,QAAQ;oCAClB,SAAS,EAAE,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;AACpC,0CAAE;AACF,0CAAE,MAAM;iCACX,EAAA,CACD,CAAA,EAAA,CACW,EACfA,GAAA,CAAC,QAAQ,IAAC,EAAE,EAAE,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,EAAA,QAAA,EACxCA,IAAC,aAAa,EAAA,EAAA,QAAA,EACZA,IAAC,oBAAoB,EAAA,EAAA,QAAA,EAAE,OAAO,CAAC,OAAO,GAAwB,EAAA,CAChD,EAAA,CACP,KAnCO,OAAO,CAAC,EAAE,CAoCd,CACjB,CAAC,EACD,QAAQ,IAAI,eAAe,KAC1BA,GAAA,CAAC,aAAa,EAAA,EACZ,EAAE,EAAE;oBACF,IAAI,EAAE,eAAe,CAAC,CAAC;oBACvB,GAAG,EAAE,eAAe,CAAC,CAAC;iBACvB,EAAA,QAAA,EAAA,aAAA,EAAA,CAGa,CACjB,CAAA,EAAA,CACgB;AAEvB;;;;"}

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

@@ -7,6 +7,8 @@ interface Tab {
 interface TabsProps {
     tabs: Tab[];
     defaultTab?: string;
+    /** Called when the user selects a tab (desktop click or mobile accordion expand). */
+    onTabChange?: (tabId: string) => void;
 }
 export declare const Tabs: React.FC<TabsProps>;
 export {};

package/dist/esm/components/Tabs.js

@@ -74,16 +74,20 @@ const MobileTabContent = styled(Box)(({ theme }) => ({
     color: theme.palette.text.primary,
     backgroundColor: theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main,
 }));
-const Tabs = ({ tabs, defaultTab }) => {
+const Tabs = ({ tabs, defaultTab, onTabChange }) => {
     const [activeTab, setActiveTab] = useState(defaultTab || tabs[0]?.id);
     const [mobileExpandedTab, setMobileExpandedTab] = useState(null);
     const theme = useTheme();
     const activeTabContent = tabs.find(tab => tab.id === activeTab)?.content;
-    const handleMobileTabClick = (tabId) => {
+    const handleTabSelect = (tabId) => {
         setActiveTab(tabId);
+        onTabChange?.(tabId);
+    };
+    const handleMobileTabClick = (tabId) => {
+        handleTabSelect(tabId);
         setMobileExpandedTab(mobileExpandedTab === tabId ? null : tabId);
     };
-    return (jsxs(Fragment, { children: [jsxs(TabsContainer, { children: [jsx(TabButtonsWrapper, { children: tabs.map((tab) => (jsx(TabButton, { onClick: () => setActiveTab(tab.id), isActive: activeTab === tab.id, children: tab.label }, tab.id))) }), jsx(TabContent, { children: activeTabContent })] }), jsx(MobileContainer, { children: tabs.map((tab, index) => (jsxs(Box, { sx: {
+    return (jsxs(Fragment, { children: [jsxs(TabsContainer, { children: [jsx(TabButtonsWrapper, { children: tabs.map((tab) => (jsx(TabButton, { onClick: () => handleTabSelect(tab.id), isActive: activeTab === tab.id, children: tab.label }, tab.id))) }), jsx(TabContent, { children: activeTabContent })] }), jsx(MobileContainer, { children: tabs.map((tab, index) => (jsxs(Box, { sx: {
                         borderTop: index !== 0 ? '2px solid #e5e7eb' : 'none',
                     }, children: [jsxs(MobileTabButton, { onClick: () => handleMobileTabClick(tab.id), isExpanded: mobileExpandedTab === tab.id, children: [jsx(Box, { component: "span", sx: {
                                         fontSize: '16px',

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../../src/components/Tabs.tsx"],"sourcesContent":["\r\n\r\nimport React, { useState } from 'react';\r\nimport { Box, Button, Collapse, styled } from '@mui/material';\r\nimport { ExpandMoreRounded } from '@mui/icons-material';\r\nimport { useTheme } from '../ThemeProvider';\r\n\r\ninterface Tab {\r\n  id: string;\r\n  label: string;\r\n  content: React.ReactNode;\r\n}\r\n\r\ninterface TabsProps {\r\n  tabs: Tab[];\r\n  defaultTab?: string;\r\n}\r\n\r\nconst TabsContainer = styled(Box)({\r\n  backgroundColor: '#00000000',\r\n  display: 'none',\r\n  '@media (min-width: 1200px)': {\r\n    display: 'block',\r\n  },\r\n});\r\n\r\nconst TabButtonsWrapper = styled(Box)({\r\n  display: 'flex',\r\n  gap: '4px',\r\n  backgroundColor: '#00000000',\r\n});\r\n\r\nconst TabButton = styled(Button,{\r\n  shouldForwardProp: (prop) => prop !== 'isActive'\r\n})<{ isActive: boolean }>(({ theme, isActive }) => ({\r\n  padding: theme.spacing(2, 3),\r\n  fontSize: '16px',\r\n  fontWeight: 500,\r\n  textTransform: 'none',\r\n  color: isActive ? theme.palette.text.primary : '#826E5C',\r\n  backgroundColor: isActive ? theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main : 'transparent',\r\n  borderRadius: 0,\r\n  position: 'relative',\r\n  minWidth: 'auto',\r\n  '&:hover': {\r\n    backgroundColor: isActive ? theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main : 'rgba(77, 48, 25, 0.05)',\r\n    color: theme.palette.text.primary,\r\n  },\r\n  '&::after': isActive ? {\r\n    content: '\"\"',\r\n    position: 'absolute',\r\n    bottom: 0,\r\n    left: 0,\r\n    right: 0,\r\n    height: '4px',\r\n    backgroundColor: theme.palette.primary.main,\r\n  } : {},\r\n}));\r\n\r\nconst TabContent = styled(Box)(({ theme }) => ({\r\n  padding: theme.spacing(3),\r\n  color: theme.palette.text.primary,\r\n  backgroundColor: theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main,\r\n}));\r\n\r\nconst MobileContainer = styled(Box)({\r\n  backgroundColor: '#00000000',\r\n  '@media (min-width: 1200px)': {\r\n    display: 'none',\r\n  },\r\n});\r\n\r\nconst MobileTabButton = styled(Button,{\r\n  shouldForwardProp: (prop) => prop !== 'isExpanded'\r\n})<{ isExpanded: boolean }>(({ theme, isExpanded }) => ({\r\n  width: '100%',\r\n  display: 'flex',\r\n  alignItems: 'center',\r\n  justifyContent: 'space-between',\r\n  padding: theme.spacing(2, 2),\r\n  textAlign: 'left',\r\n  textTransform: 'none',\r\n  borderRadius: 0,\r\n  backgroundColor: isExpanded ? theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main : 'transparent',\r\n  '&:hover': {\r\n    backgroundColor: isExpanded ? theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main : 'rgba(77, 48, 25, 0.05)',\r\n  },\r\n}));\r\n\r\nconst MobileTabContent = styled(Box)(({ theme }) => ({\r\n  padding: theme.spacing(2, 2, 3, 2),\r\n  color: theme.palette.text.primary,\r\n  backgroundColor: theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main,\r\n}));\r\n\r\nexport const Tabs: React.FC<TabsProps> = ({ tabs, defaultTab }) => {\r\n  const [activeTab, setActiveTab] = useState(defaultTab || tabs[0]?.id);\r\n  const [mobileExpandedTab, setMobileExpandedTab] = useState<string | null>(null);\r\n  const theme = useTheme();\r\n  const activeTabContent = tabs.find(tab => tab.id === activeTab)?.content;\r\n\r\n  const handleMobileTabClick = (tabId: string) => {\r\n    setActiveTab(tabId);\r\n    setMobileExpandedTab(mobileExpandedTab === tabId ? null : tabId);\r\n  };\r\n\r\n  return (\r\n    <>\r\n      {/* Desktop View */}\r\n      <TabsContainer>\r\n        <TabButtonsWrapper>\r\n          {tabs.map((tab) => (\r\n            <TabButton\r\n              key={tab.id}\r\n              onClick={() => setActiveTab(tab.id)}\r\n              isActive={activeTab === tab.id}\r\n            >\r\n              {tab.label}\r\n            </TabButton>\r\n          ))}\r\n        </TabButtonsWrapper>\r\n        <TabContent>\r\n          {activeTabContent}\r\n        </TabContent>\r\n      </TabsContainer>\r\n\r\n      {/* Mobile View - Accordion */}\r\n      <MobileContainer>\r\n        {tabs.map((tab, index) => (\r\n          <Box\r\n            key={tab.id}\r\n            sx={{\r\n              borderTop: index !== 0 ? '2px solid #e5e7eb' : 'none',\r\n            }}\r\n          >\r\n            <MobileTabButton\r\n              onClick={() => handleMobileTabClick(tab.id)}\r\n              isExpanded={mobileExpandedTab === tab.id}\r\n            >\r\n              <Box\r\n                component=\"span\"\r\n                sx={{\r\n                  fontSize: '16px',\r\n                  fontWeight: 500,\r\n                  color: activeTab === tab.id ? theme.palette.text.primary : '#826E5C',\r\n                }}\r\n              >\r\n                {tab.label}\r\n              </Box>\r\n              <ExpandMoreRounded\r\n                sx={{\r\n                  fontSize: 20,\r\n                  color: activeTab === tab.id ? theme.palette.text.primary : '#826E5C',\r\n                  transform: mobileExpandedTab === tab.id ? 'rotate(180deg)' : 'rotate(0deg)',\r\n                  transition: 'transform 0.2s',\r\n                }}\r\n              />\r\n            </MobileTabButton>\r\n            <Collapse in={mobileExpandedTab === tab.id}>\r\n              <MobileTabContent>\r\n                {tab.content}\r\n              </MobileTabContent>\r\n            </Collapse>\r\n          </Box>\r\n        ))}\r\n      </MobileContainer>\r\n    </>\r\n  );\r\n};"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}
+{"version":3,"file":"Tabs.js","sources":["../../../../src/components/Tabs.tsx"],"sourcesContent":["\r\n\r\nimport React, { useState } from 'react';\r\nimport { Box, Button, Collapse, styled } from '@mui/material';\r\nimport { ExpandMoreRounded } from '@mui/icons-material';\r\nimport { useTheme } from '../ThemeProvider';\r\n\r\ninterface Tab {\r\n  id: string;\r\n  label: string;\r\n  content: React.ReactNode;\r\n}\r\n\r\ninterface TabsProps {\r\n  tabs: Tab[];\r\n  defaultTab?: string;\r\n  /** Called when the user selects a tab (desktop click or mobile accordion expand). */\r\n  onTabChange?: (tabId: string) => void;\r\n}\r\n\r\nconst TabsContainer = styled(Box)({\r\n  backgroundColor: '#00000000',\r\n  display: 'none',\r\n  '@media (min-width: 1200px)': {\r\n    display: 'block',\r\n  },\r\n});\r\n\r\nconst TabButtonsWrapper = styled(Box)({\r\n  display: 'flex',\r\n  gap: '4px',\r\n  backgroundColor: '#00000000',\r\n});\r\n\r\nconst TabButton = styled(Button,{\r\n  shouldForwardProp: (prop) => prop !== 'isActive'\r\n})<{ isActive: boolean }>(({ theme, isActive }) => ({\r\n  padding: theme.spacing(2, 3),\r\n  fontSize: '16px',\r\n  fontWeight: 500,\r\n  textTransform: 'none',\r\n  color: isActive ? theme.palette.text.primary : '#826E5C',\r\n  backgroundColor: isActive ? theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main : 'transparent',\r\n  borderRadius: 0,\r\n  position: 'relative',\r\n  minWidth: 'auto',\r\n  '&:hover': {\r\n    backgroundColor: isActive ? theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main : 'rgba(77, 48, 25, 0.05)',\r\n    color: theme.palette.text.primary,\r\n  },\r\n  '&::after': isActive ? {\r\n    content: '\"\"',\r\n    position: 'absolute',\r\n    bottom: 0,\r\n    left: 0,\r\n    right: 0,\r\n    height: '4px',\r\n    backgroundColor: theme.palette.primary.main,\r\n  } : {},\r\n}));\r\n\r\nconst TabContent = styled(Box)(({ theme }) => ({\r\n  padding: theme.spacing(3),\r\n  color: theme.palette.text.primary,\r\n  backgroundColor: theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main,\r\n}));\r\n\r\nconst MobileContainer = styled(Box)({\r\n  backgroundColor: '#00000000',\r\n  '@media (min-width: 1200px)': {\r\n    display: 'none',\r\n  },\r\n});\r\n\r\nconst MobileTabButton = styled(Button,{\r\n  shouldForwardProp: (prop) => prop !== 'isExpanded'\r\n})<{ isExpanded: boolean }>(({ theme, isExpanded }) => ({\r\n  width: '100%',\r\n  display: 'flex',\r\n  alignItems: 'center',\r\n  justifyContent: 'space-between',\r\n  padding: theme.spacing(2, 2),\r\n  textAlign: 'left',\r\n  textTransform: 'none',\r\n  borderRadius: 0,\r\n  backgroundColor: isExpanded ? theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main : 'transparent',\r\n  '&:hover': {\r\n    backgroundColor: isExpanded ? theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main : 'rgba(77, 48, 25, 0.05)',\r\n  },\r\n}));\r\n\r\nconst MobileTabContent = styled(Box)(({ theme }) => ({\r\n  padding: theme.spacing(2, 2, 3, 2),\r\n  color: theme.palette.text.primary,\r\n  backgroundColor: theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main,\r\n}));\r\n\r\nexport const Tabs: React.FC<TabsProps> = ({ tabs, defaultTab, onTabChange }) => {\r\n  const [activeTab, setActiveTab] = useState(defaultTab || tabs[0]?.id);\r\n  const [mobileExpandedTab, setMobileExpandedTab] = useState<string | null>(null);\r\n  const theme = useTheme();\r\n  const activeTabContent = tabs.find(tab => tab.id === activeTab)?.content;\r\n\r\n  const handleTabSelect = (tabId: string) => {\r\n    setActiveTab(tabId);\r\n    onTabChange?.(tabId);\r\n  };\r\n\r\n  const handleMobileTabClick = (tabId: string) => {\r\n    handleTabSelect(tabId);\r\n    setMobileExpandedTab(mobileExpandedTab === tabId ? null : tabId);\r\n  };\r\n\r\n  return (\r\n    <>\r\n      {/* Desktop View */}\r\n      <TabsContainer>\r\n        <TabButtonsWrapper>\r\n          {tabs.map((tab) => (\r\n            <TabButton\r\n              key={tab.id}\r\n              onClick={() => handleTabSelect(tab.id)}\r\n              isActive={activeTab === tab.id}\r\n            >\r\n              {tab.label}\r\n            </TabButton>\r\n          ))}\r\n        </TabButtonsWrapper>\r\n        <TabContent>\r\n          {activeTabContent}\r\n        </TabContent>\r\n      </TabsContainer>\r\n\r\n      {/* Mobile View - Accordion */}\r\n      <MobileContainer>\r\n        {tabs.map((tab, index) => (\r\n          <Box\r\n            key={tab.id}\r\n            sx={{\r\n              borderTop: index !== 0 ? '2px solid #e5e7eb' : 'none',\r\n            }}\r\n          >\r\n            <MobileTabButton\r\n              onClick={() => handleMobileTabClick(tab.id)}\r\n              isExpanded={mobileExpandedTab === tab.id}\r\n            >\r\n              <Box\r\n                component=\"span\"\r\n                sx={{\r\n                  fontSize: '16px',\r\n                  fontWeight: 500,\r\n                  color: activeTab === tab.id ? theme.palette.text.primary : '#826E5C',\r\n                }}\r\n              >\r\n                {tab.label}\r\n              </Box>\r\n              <ExpandMoreRounded\r\n                sx={{\r\n                  fontSize: 20,\r\n                  color: activeTab === tab.id ? theme.palette.text.primary : '#826E5C',\r\n                  transform: mobileExpandedTab === tab.id ? 'rotate(180deg)' : 'rotate(0deg)',\r\n                  transition: 'transform 0.2s',\r\n                }}\r\n              />\r\n            </MobileTabButton>\r\n            <Collapse in={mobileExpandedTab === tab.id}>\r\n              <MobileTabContent>\r\n                {tab.content}\r\n              </MobileTabContent>\r\n            </Collapse>\r\n          </Box>\r\n        ))}\r\n      </MobileContainer>\r\n    </>\r\n  );\r\n};"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}

package/dist/esm/node_modules/domhandler/lib/index.js

@@ -1,4 +1,4 @@
-import { __exports as lib } from '../../../_virtual/index4.js';
+import { __exports as lib } from '../../../_virtual/index3.js';
 import { __require as requireLib$1 } from '../../domelementtype/lib/index.js';
 import { __require as requireNode } from './node.js';
 

package/dist/esm/node_modules/html-dom-parser/lib/index.js

@@ -1,4 +1,4 @@
-import { __exports as lib } from '../../../_virtual/index3.js';
+import { __exports as lib } from '../../../_virtual/index4.js';
 import { __require as requireHtmlToDom } from './server/html-to-dom.js';
 import { __require as requireTypes } from './types.js';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ece-docs-components",
-  "version": "1.0.107",
+  "version": "1.0.110",
   "type": "module",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",