@strapi/admin 0.0.0-experimental.62ce06180fe9a772eaeb3d43d238b26644f39f7c → 0.0.0-experimental.6340da17068c3bed7fb006e7bcc554c71129e282

package/dist/admin/admin/src/components/SubNav.js

@@ -0,0 +1,405 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var designSystem = require('@strapi/design-system');
+var icons = require('@strapi/icons');
+var reactRouterDom = require('react-router-dom');
+var styled = require('styled-components');
+var theme = require('../constants/theme.js');
+var Tours = require('./GuidedTour/Tours.js');
+
+const MainSubNav = styled.styled(designSystem.SubNav)`
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: ${({ theme })=>theme.colors.neutral0};
+  display: flex;
+  flex-direction: column;
+  border-right: 0;
+  box-shadow: none;
+  position: relative;
+
+  ${({ theme })=>theme.breakpoints.medium} {
+    width: ${theme.WIDTH_SIDE_NAVIGATION};
+    position: sticky;
+    top: 0;
+    border-right: 1px solid ${({ theme })=>theme.colors.neutral150};
+    overscroll-behavior: contain;
+  }
+`;
+const Main = ({ children, ...props })=>/*#__PURE__*/ jsxRuntime.jsx(MainSubNav, {
+        ...props,
+        children: children
+    });
+const StyledLink = styled.styled(reactRouterDom.NavLink)`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  text-decoration: none;
+  height: 32px;
+
+  color: ${({ theme })=>theme.colors.neutral800};
+
+  &.active > div {
+    ${({ theme })=>{
+    return `
+        background-color: ${theme.colors.primary100};
+        color: ${theme.colors.primary700};
+        font-weight: 500;
+      `;
+}}
+  }
+
+  &:hover.active > div {
+    ${({ theme })=>{
+    return `
+        background-color: ${theme.colors.primary100};
+      `;
+}}
+  }
+
+  &:hover > div {
+    ${({ theme })=>{
+    return `
+        background-color: ${theme.colors.neutral100};
+      `;
+}}
+  }
+
+  &:focus-visible {
+    outline-offset: -2px;
+  }
+`;
+const Link = (props)=>{
+    const { label, endAction, handleClick, ...rest } = props;
+    return /*#__PURE__*/ jsxRuntime.jsx(StyledLink, {
+        ...rest,
+        onClick: handleClick,
+        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+            width: '100%',
+            paddingLeft: 3,
+            paddingRight: 3,
+            paddingTop: {
+                initial: 1,
+                large: 0
+            },
+            paddingBottom: {
+                initial: 1,
+                large: 0
+            },
+            borderRadius: 1,
+            children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                justifyContent: "space-between",
+                width: "100%",
+                gap: {
+                    initial: 2,
+                    large: 1
+                },
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                        tag: "div",
+                        lineHeight: "32px",
+                        width: {
+                            initial: '80dvw',
+                            medium: '100%'
+                        },
+                        overflow: "hidden",
+                        style: {
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap'
+                        },
+                        children: label
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                        gap: 2,
+                        children: endAction
+                    })
+                ]
+            })
+        })
+    });
+};
+const StyledHeader = styled.styled(designSystem.Flex)`
+  flex: 0 0 ${theme.HEIGHT_TOP_NAVIGATION};
+  height: ${theme.HEIGHT_TOP_NAVIGATION};
+
+  ${({ theme })=>theme.breakpoints.medium} {
+    flex: 0 0 ${theme.HEIGHT_TOP_NAVIGATION_MEDIUM};
+    height: ${theme.HEIGHT_TOP_NAVIGATION_MEDIUM};
+  }
+`;
+const Header = ({ label })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(StyledHeader, {
+        justifyContent: "space-between",
+        paddingLeft: 5,
+        paddingRight: 5,
+        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+            variant: "beta",
+            tag: "h2",
+            children: label
+        })
+    });
+};
+const Sections = ({ children, ...props })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+        paddingTop: {
+            initial: 5,
+            large: 4
+        },
+        paddingBottom: {
+            initial: 5,
+            large: 4
+        },
+        paddingLeft: {
+            initial: 3,
+            large: 0
+        },
+        paddingRight: {
+            initial: 3,
+            large: 0
+        },
+        maxWidth: {
+            initial: '100%',
+            medium: theme.WIDTH_SIDE_NAVIGATION
+        },
+        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+            tag: "ul",
+            gap: 6,
+            direction: "column",
+            alignItems: "stretch",
+            ...props,
+            children: children.map((child, index)=>{
+                return /*#__PURE__*/ jsxRuntime.jsx("li", {
+                    children: child
+                }, index);
+            })
+        })
+    });
+};
+/**
+ * TODO:
+ * This would be better in the content-type-builder package directly but currently
+ * the SubNav API does not expose a way to wrap the link, instead it wraps the link and the list
+ */ const GuidedTourTooltip = ({ sectionId, children })=>{
+    switch(sectionId){
+        case 'models':
+            return /*#__PURE__*/ jsxRuntime.jsx(Tours.tours.contentTypeBuilder.CollectionTypes, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(Tours.tours.contentTypeBuilder.YourTurn, {
+                    children: children
+                })
+            });
+        case 'singleTypes':
+            return /*#__PURE__*/ jsxRuntime.jsx(Tours.tours.contentTypeBuilder.SingleTypes, {
+                children: children
+            });
+        case 'components':
+            return /*#__PURE__*/ jsxRuntime.jsx(Tours.tours.contentTypeBuilder.Components, {
+                children: children
+            });
+        default:
+            return children;
+    }
+};
+const Section = ({ label, children, link, sectionId, badgeLabel })=>{
+    const listId = React.useId();
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+        direction: "column",
+        alignItems: "stretch",
+        gap: 2,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                paddingLeft: {
+                    initial: 3,
+                    large: 5
+                },
+                paddingRight: {
+                    initial: 3,
+                    large: 5
+                },
+                children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                    position: "relative",
+                    justifyContent: "space-between",
+                    gap: 2,
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                    variant: "sigma",
+                                    textColor: "neutral600",
+                                    children: label
+                                })
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                            gap: 1,
+                            children: [
+                                badgeLabel && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Badge, {
+                                    backgroundColor: "neutral150",
+                                    textColor: "neutral600",
+                                    children: badgeLabel
+                                }),
+                                link && /*#__PURE__*/ jsxRuntime.jsx(GuidedTourTooltip, {
+                                    sectionId: sectionId,
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                                        label: link.label,
+                                        variant: "ghost",
+                                        withTooltip: true,
+                                        onClick: link.onClick,
+                                        size: "XS",
+                                        children: /*#__PURE__*/ jsxRuntime.jsx(icons.Plus, {})
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                tag: "ol",
+                id: listId,
+                direction: "column",
+                gap: {
+                    initial: 2,
+                    large: '2px'
+                },
+                alignItems: 'stretch',
+                marginLeft: {
+                    initial: 0,
+                    large: 2
+                },
+                marginRight: {
+                    initial: 0,
+                    large: 2
+                },
+                children: children.map((child, index)=>{
+                    return /*#__PURE__*/ jsxRuntime.jsx("li", {
+                        children: child
+                    }, index);
+                })
+            })
+        ]
+    });
+};
+const SubSectionHeader = styled.styled.button`
+  cursor: pointer;
+  width: 100%;
+  border: none;
+  padding: 0;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  border-radius: ${({ theme })=>theme.borderRadius};
+  padding-left: ${({ theme })=>theme.spaces[3]};
+  padding-right: ${({ theme })=>theme.spaces[3]};
+  padding-top: ${({ theme })=>theme.spaces[2]};
+  padding-bottom: ${({ theme })=>theme.spaces[2]};
+
+  &:hover {
+    background-color: ${({ theme })=>theme.colors.neutral100};
+  }
+`;
+const SubSectionLinkWrapper = styled.styled.li`
+  ${StyledLink} > div {
+    padding-left: 36px;
+  }
+`;
+const SubSection = ({ label, children })=>{
+    const [isOpen, setOpenLinks] = React.useState(true);
+    const [contentHeight, setContentHeight] = React.useState(0);
+    const listId = React.useId();
+    const contentRef = React.useRef(null);
+    React.useEffect(()=>{
+        if (contentRef.current) {
+            setContentHeight(contentRef.current.scrollHeight);
+        }
+    }, [
+        children
+    ]);
+    const handleClick = ()=>{
+        setOpenLinks((prev)=>!prev);
+    };
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Box, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                justifyContent: "space-between",
+                children: /*#__PURE__*/ jsxRuntime.jsxs(SubSectionHeader, {
+                    onClick: handleClick,
+                    "aria-expanded": isOpen,
+                    "aria-controls": listId,
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(icons.ChevronDown, {
+                            "aria-hidden": true,
+                            fill: "neutral500",
+                            style: {
+                                transform: `rotate(${isOpen ? '0deg' : '-90deg'})`,
+                                transition: 'transform 0.5s'
+                            }
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                            paddingLeft: 2,
+                            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                tag: "span",
+                                fontWeight: "semiBold",
+                                textColor: "neutral800",
+                                children: label
+                            })
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                ref: contentRef,
+                tag: "ul",
+                id: listId,
+                direction: "column",
+                gap: "2px",
+                alignItems: 'stretch',
+                style: {
+                    maxHeight: isOpen ? `${contentHeight}px` : 0,
+                    overflow: 'hidden',
+                    transition: 'max-height 0.5s cubic-bezier(0, 1, 0, 1)'
+                },
+                children: children.map((child, index)=>{
+                    return /*#__PURE__*/ jsxRuntime.jsx(SubSectionLinkWrapper, {
+                        children: child
+                    }, index);
+                })
+            })
+        ]
+    });
+};
+const PageWrapper = styled.styled(designSystem.Box)`
+  width: 100%;
+
+  ${MainSubNav} {
+    background-color: transparent;
+    border-right: none;
+  }
+
+  ${({ theme })=>theme.breakpoints.medium} {
+    overflow: hidden;
+
+    ${MainSubNav} {
+      top: 0;
+    }
+  }
+`;
+const Content = ({ children })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.ScrollArea, {
+        children: children
+    });
+};
+const SubNav = {
+    Main,
+    Content,
+    Header,
+    Link,
+    Sections,
+    Section,
+    SubSection,
+    PageWrapper
+};
+
+exports.SubNav = SubNav;
+//# sourceMappingURL=SubNav.js.map

package/dist/admin/admin/src/components/SubNav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubNav.js","sources":["../../../../../admin/src/components/SubNav.tsx"],"sourcesContent":["import { useEffect, useId, useRef, useState } from 'react';\n\nimport {\n  Badge,\n  Box,\n  Flex,\n  IconButton,\n  ScrollArea,\n  SubNav as DSSubNav,\n  Typography,\n} from '@strapi/design-system';\nimport { ChevronDown, Plus } from '@strapi/icons';\nimport { NavLink } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport {\n  HEIGHT_TOP_NAVIGATION,\n  HEIGHT_TOP_NAVIGATION_MEDIUM,\n  WIDTH_SIDE_NAVIGATION,\n} from '../constants/theme';\n\nimport { tours } from './GuidedTour/Tours';\n\nconst MainSubNav = styled(DSSubNav)`\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  background-color: ${({ theme }) => theme.colors.neutral0};\n  display: flex;\n  flex-direction: column;\n  border-right: 0;\n  box-shadow: none;\n  position: relative;\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    width: ${WIDTH_SIDE_NAVIGATION};\n    position: sticky;\n    top: 0;\n    border-right: 1px solid ${({ theme }) => theme.colors.neutral150};\n    overscroll-behavior: contain;\n  }\n`;\n\nconst Main = ({ children, ...props }: { children: React.ReactNode; isFullPage?: boolean }) => (\n  <MainSubNav {...props}>{children}</MainSubNav>\n);\n\nconst StyledLink = styled(NavLink)`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  text-decoration: none;\n  height: 32px;\n\n  color: ${({ theme }) => theme.colors.neutral800};\n\n  &.active > div {\n    ${({ theme }) => {\n      return `\n        background-color: ${theme.colors.primary100};\n        color: ${theme.colors.primary700};\n        font-weight: 500;\n      `;\n    }}\n  }\n\n  &:hover.active > div {\n    ${({ theme }) => {\n      return `\n        background-color: ${theme.colors.primary100};\n      `;\n    }}\n  }\n\n  &:hover > div {\n    ${({ theme }) => {\n      return `\n        background-color: ${theme.colors.neutral100};\n      `;\n    }}\n  }\n\n  &:focus-visible {\n    outline-offset: -2px;\n  }\n`;\n\nconst Link = (\n  props: Omit<React.ComponentProps<typeof StyledLink>, 'label'> & {\n    label: React.ReactNode;\n    endAction?: React.ReactNode;\n    handleClick?: () => void;\n  }\n) => {\n  const { label, endAction, handleClick, ...rest } = props;\n\n  return (\n    <StyledLink {...rest} onClick={handleClick}>\n      <Box\n        width={'100%'}\n        paddingLeft={3}\n        paddingRight={3}\n        paddingTop={{ initial: 1, large: 0 }}\n        paddingBottom={{ initial: 1, large: 0 }}\n        borderRadius={1}\n      >\n        <Flex justifyContent=\"space-between\" width=\"100%\" gap={{ initial: 2, large: 1 }}>\n          <Typography\n            tag=\"div\"\n            lineHeight=\"32px\"\n            width={{ initial: '80dvw', medium: '100%' }}\n            overflow=\"hidden\"\n            style={{ textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}\n          >\n            {label}\n          </Typography>\n          <Flex gap={2}>{endAction}</Flex>\n        </Flex>\n      </Box>\n    </StyledLink>\n  );\n};\n\nconst StyledHeader = styled(Flex)`\n  flex: 0 0 ${HEIGHT_TOP_NAVIGATION};\n  height: ${HEIGHT_TOP_NAVIGATION};\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    flex: 0 0 ${HEIGHT_TOP_NAVIGATION_MEDIUM};\n    height: ${HEIGHT_TOP_NAVIGATION_MEDIUM};\n  }\n`;\n\nconst Header = ({ label }: { label: string }) => {\n  return (\n    <StyledHeader justifyContent=\"space-between\" paddingLeft={5} paddingRight={5}>\n      <Typography variant=\"beta\" tag=\"h2\">\n        {label}\n      </Typography>\n    </StyledHeader>\n  );\n};\n\nconst Sections = ({\n  children,\n  ...props\n}: {\n  children: React.ReactNode[];\n  [key: string]: unknown;\n}) => {\n  return (\n    <Box\n      paddingTop={{ initial: 5, large: 4 }}\n      paddingBottom={{ initial: 5, large: 4 }}\n      paddingLeft={{ initial: 3, large: 0 }}\n      paddingRight={{ initial: 3, large: 0 }}\n      maxWidth={{ initial: '100%', medium: WIDTH_SIDE_NAVIGATION }}\n    >\n      <Flex tag=\"ul\" gap={6} direction=\"column\" alignItems=\"stretch\" {...props}>\n        {children.map((child, index) => {\n          return <li key={index}>{child}</li>;\n        })}\n      </Flex>\n    </Box>\n  );\n};\n\n/**\n * TODO:\n * This would be better in the content-type-builder package directly but currently\n * the SubNav API does not expose a way to wrap the link, instead it wraps the link and the list\n */\nconst GuidedTourTooltip = ({\n  sectionId,\n  children,\n}: {\n  sectionId?: string;\n  children: React.ReactNode;\n}) => {\n  switch (sectionId) {\n    case 'models':\n      return (\n        <tours.contentTypeBuilder.CollectionTypes>\n          <tours.contentTypeBuilder.YourTurn>{children}</tours.contentTypeBuilder.YourTurn>\n        </tours.contentTypeBuilder.CollectionTypes>\n      );\n    case 'singleTypes':\n      return (\n        <tours.contentTypeBuilder.SingleTypes>{children}</tours.contentTypeBuilder.SingleTypes>\n      );\n    case 'components':\n      return <tours.contentTypeBuilder.Components>{children}</tours.contentTypeBuilder.Components>;\n    default:\n      return children;\n  }\n};\n\nconst Section = ({\n  label,\n  children,\n  link,\n  sectionId,\n  badgeLabel,\n}: {\n  label: string;\n  children: React.ReactNode[];\n  link?: { label: string; onClick: () => void };\n  sectionId?: string;\n  badgeLabel?: string;\n}) => {\n  const listId = useId();\n\n  return (\n    <Flex direction=\"column\" alignItems=\"stretch\" gap={2}>\n      <Box\n        paddingLeft={{\n          initial: 3,\n          large: 5,\n        }}\n        paddingRight={{\n          initial: 3,\n          large: 5,\n        }}\n      >\n        <Flex position=\"relative\" justifyContent=\"space-between\" gap={2}>\n          <Flex>\n            <Box>\n              <Typography variant=\"sigma\" textColor=\"neutral600\">\n                {label}\n              </Typography>\n            </Box>\n          </Flex>\n          <Flex gap={1}>\n            {badgeLabel && (\n              <Badge backgroundColor=\"neutral150\" textColor=\"neutral600\">\n                {badgeLabel}\n              </Badge>\n            )}\n            {link && (\n              <GuidedTourTooltip sectionId={sectionId}>\n                <IconButton\n                  label={link.label}\n                  variant=\"ghost\"\n                  withTooltip\n                  onClick={link.onClick}\n                  size=\"XS\"\n                >\n                  <Plus />\n                </IconButton>\n              </GuidedTourTooltip>\n            )}\n          </Flex>\n        </Flex>\n      </Box>\n      <Flex\n        tag=\"ol\"\n        id={listId}\n        direction=\"column\"\n        gap={{ initial: 2, large: '2px' }}\n        alignItems={'stretch'}\n        marginLeft={{\n          initial: 0,\n          large: 2,\n        }}\n        marginRight={{\n          initial: 0,\n          large: 2,\n        }}\n      >\n        {children.map((child, index) => {\n          return <li key={index}>{child}</li>;\n        })}\n      </Flex>\n    </Flex>\n  );\n};\n\nconst SubSectionHeader = styled.button`\n  cursor: pointer;\n  width: 100%;\n  border: none;\n  padding: 0;\n  background: transparent;\n  display: flex;\n  align-items: center;\n  border-radius: ${({ theme }) => theme.borderRadius};\n  padding-left: ${({ theme }) => theme.spaces[3]};\n  padding-right: ${({ theme }) => theme.spaces[3]};\n  padding-top: ${({ theme }) => theme.spaces[2]};\n  padding-bottom: ${({ theme }) => theme.spaces[2]};\n\n  &:hover {\n    background-color: ${({ theme }) => theme.colors.neutral100};\n  }\n`;\n\nconst SubSectionLinkWrapper = styled.li`\n  ${StyledLink} > div {\n    padding-left: 36px;\n  }\n`;\n\nconst SubSection = ({ label, children }: { label: string; children: React.ReactNode[] }) => {\n  const [isOpen, setOpenLinks] = useState(true);\n  const [contentHeight, setContentHeight] = useState(0);\n  const listId = useId();\n  const contentRef = useRef<HTMLElement>(null);\n\n  useEffect(() => {\n    if (contentRef.current) {\n      setContentHeight(contentRef.current.scrollHeight);\n    }\n  }, [children]);\n\n  const handleClick = () => {\n    setOpenLinks((prev) => !prev);\n  };\n\n  return (\n    <Box>\n      <Flex justifyContent=\"space-between\">\n        <SubSectionHeader onClick={handleClick} aria-expanded={isOpen} aria-controls={listId}>\n          <ChevronDown\n            aria-hidden\n            fill=\"neutral500\"\n            style={{\n              transform: `rotate(${isOpen ? '0deg' : '-90deg'})`,\n              transition: 'transform 0.5s',\n            }}\n          />\n          <Box paddingLeft={2}>\n            <Typography tag=\"span\" fontWeight=\"semiBold\" textColor=\"neutral800\">\n              {label}\n            </Typography>\n          </Box>\n        </SubSectionHeader>\n      </Flex>\n      <Flex\n        ref={contentRef}\n        tag=\"ul\"\n        id={listId}\n        direction=\"column\"\n        gap=\"2px\"\n        alignItems={'stretch'}\n        style={{\n          maxHeight: isOpen ? `${contentHeight}px` : 0,\n          overflow: 'hidden',\n          transition: 'max-height 0.5s cubic-bezier(0, 1, 0, 1)',\n        }}\n      >\n        {children.map((child, index) => {\n          return <SubSectionLinkWrapper key={index}>{child}</SubSectionLinkWrapper>;\n        })}\n      </Flex>\n    </Box>\n  );\n};\n\nconst PageWrapper = styled(Box)`\n  width: 100%;\n\n  ${MainSubNav} {\n    background-color: transparent;\n    border-right: none;\n  }\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    overflow: hidden;\n\n    ${MainSubNav} {\n      top: 0;\n    }\n  }\n`;\n\nconst Content = ({ children }: { children: React.ReactNode }) => {\n  return <ScrollArea>{children}</ScrollArea>;\n};\n\nexport const SubNav = {\n  Main,\n  Content,\n  Header,\n  Link,\n  Sections,\n  Section,\n  SubSection,\n  PageWrapper,\n};\n"],"names":["MainSubNav","styled","DSSubNav","theme","colors","neutral0","breakpoints","medium","WIDTH_SIDE_NAVIGATION","neutral150","Main","children","props","_jsx","StyledLink","NavLink","neutral800","primary100","primary700","neutral100","Link","label","endAction","handleClick","rest","onClick","Box","width","paddingLeft","paddingRight","paddingTop","initial","large","paddingBottom","borderRadius","_jsxs","Flex","justifyContent","gap","Typography","tag","lineHeight","overflow","style","textOverflow","whiteSpace","StyledHeader","HEIGHT_TOP_NAVIGATION","HEIGHT_TOP_NAVIGATION_MEDIUM","Header","variant","Sections","maxWidth","direction","alignItems","map","child","index","li","GuidedTourTooltip","sectionId","tours","contentTypeBuilder","CollectionTypes","YourTurn","SingleTypes","Components","Section","link","badgeLabel","listId","useId","position","textColor","Badge","backgroundColor","IconButton","withTooltip","size","Plus","id","marginLeft","marginRight","SubSectionHeader","button","spaces","SubSectionLinkWrapper","SubSection","isOpen","setOpenLinks","useState","contentHeight","setContentHeight","contentRef","useRef","useEffect","current","scrollHeight","prev","aria-expanded","aria-controls","ChevronDown","aria-hidden","fill","transform","transition","fontWeight","ref","maxHeight","PageWrapper","Content","ScrollArea","SubNav"],"mappings":"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"}