ece-docs-components 1.0.108 → 1.0.110

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/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":"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"}

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.108",
+  "version": "1.0.110",
   "type": "module",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",