doccupine 0.0.98 → 0.0.99

package/dist/templates/docs-components.js

@@ -1,441 +0,0 @@
-export const docsComponentsTemplate = `
-"use client";
-import { mq, Theme } from "@/app/theme";
-import {
-  resetButton,
-  styledStrong,
-  styledText,
-} from "cherry-styled-components/src/lib";
-import Link from "next/link";
-import { rgba } from "polished";
-import React from "react";
-import styled, { css } from "styled-components";
-import { interactiveStyles } from "./SharedStyled";
-
-interface DocsProps {
-  children: React.ReactNode;
-}
-
-const StyledDocsWrapper = styled.div<{ theme: Theme }>\`
-  position: relative;
-\`;
-
-const StyledDocsSidebar = styled.div<{ theme: Theme }>\`
-  position: sticky;
-  top: 90px;
-  min-width: 200px;
-  float: left;
-  z-index: 999;
-
-  \${mq("lg")} {
-    z-index: 2;
-  }
-\`;
-
-const StyledDocsContainer = styled.div<{ theme: Theme }>\`
-  position: relative;
-  padding: 0;
-  width: 100%;
-
-  \${mq("lg")} {
-    padding-left: 230px;
-  }
-
-  & ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-
-    & li {
-      text-indent: 0;
-      display: block;
-      position: relative;
-      padding: 0 0 0 15px;
-      margin: 0;
-      \${({ theme }) => styledText(theme)};
-      min-height: 23px;
-
-      $mq: "lg" {
-        min-height: 27px;
-      }
-
-      &::before {
-        content: "";
-        display: block;
-        width: 6px;
-        height: 6px;
-        border-radius: 50%;
-        background: \${({ theme }) => theme.colors.primary};
-        position: absolute;
-        top: 8px;
-        left: 2px;
-
-        \${mq("lg")} {
-          top: 10px;
-        }
-      }
-    }
-  }
-
-  & ol {
-    padding: 0;
-    margin: 0;
-
-    & > li {
-      position: relative;
-      padding: 0;
-      counter-increment: item;
-      padding: 0;
-      margin: 0;
-      \${({ theme }) => styledText(theme)};
-
-      &::before {
-        content: counter(item) ".";
-        display: inline-block;
-        margin: 0 4px 0 0;
-        font-weight: 700;
-        color: \${({ theme }) => theme.colors.primary};
-        min-width: max-content;
-      }
-    }
-  }
-\`;
-
-export const StyledMarkdownContainer = styled.div\`
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  flex-wrap: wrap;
-  flex: 1;
-\`;
-
-interface Props {
-  theme?: Theme;
-  $isActive?: boolean;
-}
-
-export const StyledSidebar = styled.nav<Props>\`
-  position: fixed;
-  overflow-y: auto;
-  max-height: calc(100svh - 70px);
-  width: 100%;
-  background: \${({ theme }) => theme.colors.light};
-  z-index: 99;
-  top: 70px;
-  height: 100%;
-  padding: 20px 0;
-  opacity: 0;
-  pointer-events: none;
-  transition: all 0.3s ease;
-  transform: translateY(30px);
-
-  \${mq("lg")} {
-    width: 220px;
-    left: 20px;
-    background: transparent;
-    padding: 20px 20px 20px 0;
-    opacity: 1;
-    pointer-events: all;
-    transform: translateY(0);
-  }
-
-  \${mq("xl")} {
-    width: 220px;
-    left: calc(50% - 610px);
-  }
-
-  \${mq("xxl")} {
-    width: 220px;
-    left: calc(50% - 690px);
-  }
-
-  \${({ $isActive }) =>
-    $isActive &&
-    css\`
-      transform: translateY(0);
-      opacity: 1;
-      pointer-events: all;
-    \`}
-\`;
-
-export const StyledSidebarList = styled.ul\`
-  list-style: none;
-  margin: 0;
-  padding: 0;
-\`;
-
-export const StyledStrong = styled.strong<{ theme: Theme }>\`
-  font-weight: 600;
-  \${({ theme }) => styledStrong(theme)};
-\`;
-
-export const StyledSidebarListItem = styled.li\`
-  display: flex;
-  gap: 10px;
-  clear: both;
-\`;
-
-export const StyledSidebarListItemLink = styled(Link)<Props>\`
-  text-decoration: none;
-  font-size: \${({ theme }) => theme.fontSizes.strong.xs};
-  line-height: 2.1;
-  color: \${({ theme }) =>
-    theme.isDark ? theme.colors.grayDark : theme.colors.primary};
-  padding: 0 0 0 20px;
-  display: flex;
-  transition: all 0.3s ease;
-  border-left: solid 1px \${({ theme }) => theme.colors.grayLight};
-
-  \${mq("lg")} {
-    font-size: \${({ theme }) => theme.fontSizes.strong.lg};
-    line-height: 2.1;
-  }
-
-  @media (hover: hover) {
-    &:hover {
-      color: \${({ theme }) =>
-        theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};
-      border-color: \${({ theme }) => theme.colors.info};
-    }
-  }
-
-  \${({ $isActive, theme }) =>
-    $isActive &&
-    \`
-			color: \${theme.colors.dark};
-			border-color: \${theme.colors.info};
-			font-weight: 600;
-	\`};
-\`;
-
-export const StyleMobileBar = styled.button<Props>\`
-  \${resetButton};
-  position: fixed;
-  z-index: 1000;
-  bottom: 0;
-  right: 20px;
-  font-size: \${({ theme }) => theme.fontSizes.strong.lg};
-  line-height: \${({ theme }) => theme.fontSizes.strong.lg};
-  box-shadow: \${({ theme }) => theme.shadows.sm};
-  background: \${({ theme }) =>
-    theme.isDark
-      ? rgba(theme.colors.grayLight, 0.7)
-      : rgba(theme.colors.light, 0.7)};
-  color: \${({ theme }) =>
-    theme.isDark ? theme.colors.dark : theme.colors.primary};
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  padding: 30px;
-  border-radius: 100px;
-  margin: 0 0 20px 0;
-  font-weight: 600;
-  display: flex;
-  justify-content: flex-start;
-  width: auto;
-
-  \${mq("lg")} {
-    display: none;
-  }
-
-  \${({ $isActive }) => $isActive && \`position: fixed; \`};
-\`;
-
-export const StyledMobileBurger = styled.span<Props>\`
-  display: block;
-  margin: auto 0;
-  width: 18px;
-  height: 18px;
-  position: relative;
-  overflow: hidden;
-  background: transparent;
-  position: relative;
-
-  &::before,
-  &::after {
-    content: "";
-    display: block;
-    position: absolute;
-    width: 18px;
-    height: 3px;
-    border-radius: 3px;
-    background: \${({ theme }) =>
-      theme.isDark ? theme.colors.dark : theme.colors.primary};
-    transition: all 0.3s ease;
-  }
-
-  &::before {
-    top: 3px;
-  }
-
-  &::after {
-    bottom: 3px;
-  }
-
-  \${({ $isActive }) =>
-    $isActive &&
-    css\`
-      &::before {
-        transform: translateY(5px) rotate(45deg);
-      }
-
-      &::after {
-        transform: translateY(-4px) rotate(-45deg);
-      }
-    \`};
-\`;
-
-export const StyledInlineButton = styled.button<{ theme: Theme }>\`
-  \${resetButton};
-  \${interactiveStyles};
-  color: \${({ theme }) => theme.colors.primary};
-  vertical-align: middle;
-  border: solid 1px \${({ theme }) => theme.colors.grayLight};
-  border-radius: \${({ theme }) => theme.spacing.radius.xs};
-  padding: 0;
-  width: 18px;
-  height: 18px;
-  display: flex;
-  margin: auto 0;
-  transition: all 0.3s ease;
-
-  @media (hover: hover) {
-    &:hover {
-      color: \${({ theme }) => theme.colors.light};
-      background: \${({ theme }) => theme.colors.primary};
-      border-color: \${({ theme }) => theme.colors.primary};
-    }
-  }
-
-  & svg {
-    vertical-align: middle;
-    width: 12px;
-    height: 12px;
-    margin: auto;
-  }
-\`;
-
-export const StyledPlusButton = styled.button<{ theme: Theme }>\`
-  \${resetButton};
-  color: \${({ theme }) => theme.colors.primary};
-  vertical-align: middle;
-  padding: 0;
-  width: 100%;
-  height: 18px;
-  display: flex;
-  margin: auto 0;
-  transition: all 0.3s ease;
-  position: relative;
-  margin: 20px 0 0 0;
-
-  &::before {
-    content: "";
-    display: block;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 100%;
-    height: 1px;
-    border-radius: 3px;
-    background: \${({ theme }) => theme.colors.grayLight};
-    transition: all 0.3s ease;
-    z-index: -1;
-  }
-
-  &::after {
-    content: "";
-    display: block;
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    width: 18px;
-    height: 18px;
-    border: solid 1px \${({ theme }) => theme.colors.grayLight};
-    border-radius: \${({ theme }) => theme.spacing.radius.xs};
-    background: \${({ theme }) => theme.colors.light};
-    transition: all 0.3s ease;
-    z-index: -1;
-  }
-
-  box-shadow: 0 0 0 0px \${({ theme }) => theme.colors.primary};
-
-  @media (hover: hover) {
-    &:hover {
-      &::after {
-        border-color: \${({ theme }) => theme.colors.primary};
-      }
-    }
-  }
-
-  &:focus {
-    &::after {
-      border-color: \${({ theme }) => theme.colors.primary};
-      box-shadow: 0 0 0 4px \${({ theme }) => theme.colors.primaryLight};
-    }
-  }
-
-  &:active {
-    &::after {
-      box-shadow: 0 0 0 2px \${({ theme }) => theme.colors.primaryLight};
-    }
-  }
-
-  @media (hover: hover) {
-    &:hover {
-      color: \${({ theme }) => theme.colors.light};
-
-      &::after {
-        background: \${({ theme }) => theme.colors.primary};
-        border-color: \${({ theme }) => theme.colors.primary};
-      }
-    }
-  }
-
-  & svg {
-    vertical-align: middle;
-    width: 14px;
-    height: 14px;
-    margin: auto;
-  }
-\`;
-
-export const StyledFullHeightInput = styled.div\`
-  height: 100%;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  flex: 1;
-
-  & > span {
-    height: 100%;
-    width: 100%;
-  }
-
-  & textarea {
-    height: 100%;
-  }
-\`;
-
-export const StyledEditorWrapper = styled.div\`
-  flex: 1;
-
-  &:empty {
-    display: none;
-  }
-\`;
-
-function DocsWrapper({ children }: DocsProps) {
-  return <StyledDocsWrapper>{children}</StyledDocsWrapper>;
-}
-
-function DocsSidebar({ children }: DocsProps) {
-  return <StyledDocsSidebar>{children}</StyledDocsSidebar>;
-}
-
-function DocsContainer({ children }: DocsProps) {
-  return <StyledDocsContainer>{children}</StyledDocsContainer>;
-}
-
-export { DocsWrapper, DocsSidebar, DocsContainer };
-`;

package/dist/templates/docs.d.ts

@@ -1 +0,0 @@
-export declare const docsTemplate = "\n\"use client\";\nimport { useState } from \"react\";\nimport Link from 'next/link';\nimport { usePathname } from \"next/navigation\";\nimport { Container, Flex, Space } from \"cherry-styled-components/src/lib\";\nimport Markdown from \"react-markdown\";\nimport remarkGfm from \"remark-gfm\";\nimport { Code } from \"@/app/components/layout/Code\";\nimport { \n  DocsWrapper,\n  DocsSidebar,\n  DocsContainer,\n  StyledMarkdownContainer,\n  StyledSidebar,\n  StyledSidebarList,\n  StyledSidebarListItem,\n  StyledStrong,\n  StyledSidebarListItemLink,\n  StyleMobileBar,\n  StyledMobileBurger\n} from \"@/app/components/layout/DocsComponents\";\n  \nfunction Docs({content, result}) {\n  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);\n  const pathname = usePathname();\n  console.log(result, \"-\".repeat(100));\n  return (\n    <Container $padding={20}>\n      <DocsWrapper>\n        <DocsSidebar>\n          <StyleMobileBar\n            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}\n            $isActive={isMobileMenuOpen}\n          >\n            <StyledMobileBurger $isActive={isMobileMenuOpen} />\n          </StyleMobileBar>\n\n          <StyledSidebar $isActive={isMobileMenuOpen}>\n            <StyledSidebarList>\n              {result && result.map((item: any, index: number) => {\n                return (\n                  <div key={index}>\n                    <StyledSidebarListItem>\n                      <StyledStrong>{item.label}</StyledStrong>{\" \"}\n                    </StyledSidebarListItem>\n                    <Space $size={20} />\n                    {item.links &&\n                      item.links.map((link: any, indexChild: number) => {\n                        return (\n                          <StyledSidebarListItem key={indexChild}>\n                            <StyledSidebarListItemLink\n                              href={`/${link.slug}`}\n                              $isActive={\n                                pathname ===\n                                `/${link.slug}`\n                              }\n                              onClick={() => setIsMobileMenuOpen(false)}\n                            >\n                              {link.title}\n                            </StyledSidebarListItemLink>\n                          </StyledSidebarListItem>\n                        );\n                      })}\n                    <Space $size={20} />\n                  </div>\n                );\n              })}\n            </StyledSidebarList>\n          </StyledSidebar>\n        </DocsSidebar>\n        <DocsContainer>\n          <Flex $gap={20}>\n            <StyledMarkdownContainer>\n            {content && (\n              <Markdown\n                remarkPlugins={[remarkGfm]}\n                components={{\n                  code(props) {\n                    const { children, className, node, ...rest } = props;\n                    const match = /language-(\\w+)/.exec(className || \"\");\n                    return match ? (\n                    <Code\n                        {...rest}\n                        className={className}\n                        code={String(children).replace(/\\n$/, \"\")}\n                      />\n                    ) : (\n                      <code {...rest} className={className}>\n                        {children}\n                      </code>\n                    );\n                  },\n                }}\n              >\n                {content}\n              </Markdown>\n             )}\n            </StyledMarkdownContainer>\n          </Flex>\n        </DocsContainer>\n      </DocsWrapper>\n    </Container>\n  );\n}\n\nexport { Docs };\n";

package/dist/templates/docs.js

@@ -1,48 +0,0 @@
-export const docsTemplate = `"use client";
-import { useState } from "react";
-import { Flex } from "cherry-styled-components/src/lib";
-import Markdown from "react-markdown";
-import remarkGfm from "remark-gfm";
-import { Code } from "@/app/components/layout/Code";
-import { 
-  DocsContainer,
-  StyledMarkdownContainer,
-} from "@/app/components/layout/DocsComponents";
-  
-function Docs({content, result}) {
-  return (
-    <DocsContainer>
-      <Flex $gap={20}>
-        <StyledMarkdownContainer>
-        {content && (
-          <Markdown
-            remarkPlugins={[remarkGfm]}
-            components={{
-              code(props) {
-                const { children, className, node, ...rest } = props;
-                const match = /language-(\\w+)/.exec(className || "");
-                return match ? (
-                <Code
-                    {...rest}
-                    className={className}
-                    code={String(children).replace(/\\n\$/, "")}
-                  />
-                ) : (
-                  <code {...rest} className={className}>
-                    {children}
-                  </code>
-                );
-              },
-            }}
-          >
-            {content}
-          </Markdown>
-         )}
-        </StyledMarkdownContainer>
-      </Flex>
-    </DocsContainer>
-  );
-}
-
-export { Docs };
-`;

package/dist/templates/fields.mdx.d.ts

@@ -1 +0,0 @@
-export declare const fieldsMdxTemplate = "---\ntitle: \"Fields\"\ndescription: \"This is my first Doccupine project\"\ndate: \"2025-01-15\"\ncategory: \"Components\"\ncategoryOrder: 0\norder: 9\n---\n# Fields\n\nConfigure parameters for your API or SDK documentation.\n\nFields allow you to describe both the **inputs** (parameters) and **outputs** (responses) of your API. The main field component is available: `Field` for parameters and for responses.\n\n## Fields Usage\n\nUse the `<Field>` component to declare API or SDK parameters, or define the return values of an API.\n\n<Field value=\"param\" type=\"string\" required>\n  Example definition of a parameter field.\n</Field>\n\n\n```text\n<Field value=\"param\" type=\"string\" required>\n  Example definition of a parameter field.\n</Field>\n```\n\n## Properties\n\n<Field value=\"value\" type=\"string\" required>\n  The name of the field.\n</Field>\n\n<Field value=\"type\" type=\"string\" required>\n  The type of the field.\n</Field>\n\n<Field value=\"required\" type=\"boolean\">\n  Whether the field is required.\n</Field>";

package/dist/templates/fields.mdx.js

@@ -1,42 +0,0 @@
-export const fieldsMdxTemplate = `---
-title: "Fields"
-description: "This is my first Doccupine project"
-date: "2025-01-15"
-category: "Components"
-categoryOrder: 0
-order: 9
----
-# Fields
-
-Configure parameters for your API or SDK documentation.
-
-Fields allow you to describe both the **inputs** (parameters) and **outputs** (responses) of your API. The main field component is available: \`Field\` for parameters and for responses.
-
-## Fields Usage
-
-Use the \`<Field>\` component to declare API or SDK parameters, or define the return values of an API.
-
-<Field value="param" type="string" required>
-  Example definition of a parameter field.
-</Field>
-
-
-\`\`\`text
-<Field value="param" type="string" required>
-  Example definition of a parameter field.
-</Field>
-\`\`\`
-
-## Properties
-
-<Field value="value" type="string" required>
-  The name of the field.
-</Field>
-
-<Field value="type" type="string" required>
-  The type of the field.
-</Field>
-
-<Field value="required" type="boolean">
-  Whether the field is required.
-</Field>`;

package/dist/templates/footer.d.ts

@@ -1 +0,0 @@
-export declare const footerTemplate = "\n\"use client\";\nimport React from \"react\";\n\nfunction Footer() {\n  return <footer> </footer>;\n}\nexport { Footer };\n";

package/dist/templates/footer.js

@@ -1,9 +0,0 @@
-export const footerTemplate = `
-"use client";
-import React from "react";
-
-function Footer() {
-  return <footer> </footer>;
-}
-export { Footer };
-`;

package/dist/templates/header.d.ts

@@ -1 +0,0 @@
-export declare const headerTemplate = "\n\"use client\";\nimport Image from \"next/image\";\nimport {\n  Flex,\n  MaxWidth,\n  resetButton,\n  styledText,\n} from \"cherry-styled-components/src/lib\";\nimport React, { useCallback, useContext, useRef, useState } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport Link from \"next/link\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { ToggleTheme } from \"@/app/components/layout/ThemeToggle\";\nimport {\n  StyledDataArrowButton,\n  StyledDataDropdown,\n  StyledDataDropdownItem,\n  StyledDataDropdownWrapper,\n  StyledDataUserAvatar,\n  StyledDesktopOnly,\n  StyledMobileOnly,\n  StyledTinyDesktopOnly,\n  StyledTinyMobileOnly,\n} from \"@/app/components/layout/SharedStyled\";\nimport { Icon } from \"@/app/components/layout/Icon\";\nimport { useOnClickOutside } from \"@/app/components/ClickOutside\";\nimport { LinkButton } from \"@/app/components/layout/LinkButton\";\nimport { Logo } from \"@/app/components/layout/Pictograms\";\nimport { rgba } from \"polished\";\n\nconst StyledHeader = styled.header<{ theme: Theme }>`\n  position: sticky;\n  top: 0;\n  padding: 20px;\n  margin: 0;\n  z-index: 1000;\n\n  &::before,\n  &::after {\n    display: block;\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n    background: ${({ theme }) => theme.colors.light};\n    z-index: -2;\n  }\n\n  &::after {\n    background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.1)};\n    z-index: -1;\n  }\n\n  & .logo {\n    display: flex;\n\n    & svg {\n      margin: auto;\n    }\n  }\n`;\n\nconst StyledLink = styled(Link)<{ theme: Theme }>`\n  text-decoration: none;\n  margin: auto 0;\n  color: ${({ theme }) => theme.colors.primary};\n  font-weight: 500;\n\n  @media (hover: hover) {\n    &:hover {\n      color: ${({ theme }) => theme.colors.primaryDark};\n    }\n  }\n`;\n\nexport const StyledMobileBurger = styled.button<{\n  theme: Theme;\n  $isActive: boolean;\n}>`\n  ${resetButton};\n  display: block;\n  margin: auto 0;\n  width: 18px;\n  height: 18px;\n  position: relative;\n  overflow: hidden;\n  background: transparent;\n  position: relative;\n\n  ${mq(\"lg\")} {\n    display: none;\n  }\n\n  &::before,\n  &::after {\n    content: \"\";\n    display: block;\n    position: absolute;\n    width: 18px;\n    height: 2px;\n    border-radius: 3px;\n    background: ${({ theme }) => theme.colors.primary};\n    transition: all 0.3s ease;\n  }\n\n  &::before {\n    top: 4px;\n  }\n\n  &::after {\n    bottom: 4px;\n  }\n\n  ${({ $isActive }) =>\n    $isActive &&\n    css`\n      &::before {\n        transform: translateY(4px) rotate(45deg);\n      }\n\n      &::after {\n        transform: translateY(-4px) rotate(-45deg);\n      }\n    `};\n`;\n\nconst StyledMobileMenu = styled.ul<{ theme: Theme; $isActive: boolean }>`\n  list-style: none;\n  padding: 70px 0 0 0;\n  margin: 0;\n  position: fixed;\n  top: 0;\n  left: 0;\n  background: ${({ theme }) => theme.colors.light};\n  pointer-events: none;\n  opacity: 0;\n  width: 100%;\n  height: 100dvh;\n  transition: all 0.3s ease;\n  z-index: 800;\n  transform: translateY(40px) scale(1.2);\n  display: block;\n\n  ${({ $isActive }) =>\n    $isActive &&\n    css`\n      pointer-events: all;\n      opacity: 1;\n      transform: translateY(0) scale(1);\n    `};\n\n  & li {\n    display: block;\n    width: 100%;\n    padding: 0;\n    margin: 0;\n    border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n\n    &.languages {\n      display: flex;\n      justify-content: center;\n      gap: 10px;\n    }\n\n    & a,\n    & button {\n      ${({ theme }) => styledText(theme)};\n      font-family: ${({ theme }) => theme.fonts.text};\n      font-weight: 500;\n      appearance: none;\n      background: transparent;\n      border: none;\n      color: ${({ theme }) => theme.colors.dark};\n      display: flex;\n      margin: 0;\n      padding: 20px;\n      font-weight: 500;\n      text-decoration: none;\n      cursor: pointer;\n    }\n\n    & button {\n      flex: 1;\n      border-right: solid 1px ${({ theme }) => theme.colors.grayLight};\n      text-align: center;\n      justify-content: center;\n\n      &:last-of-type {\n        border-right: none;\n      }\n    }\n  }\n`;\n\nconst StyledMenu = styled.div<{ theme: Theme }>`\n  display: none;\n\n  ${mq(\"lg\")} {\n    display: flex;\n    gap: 20px;\n  }\n`;\n\nconst StyledDivider = styled.div<{ theme: Theme }>`\n  width: 1px;\n  height: calc(100% - 10px);\n  margin: auto 0;\n  background: ${({ theme }) => theme.colors.grayLight};\n`;\n\nfunction Header() {\n  const [isOptionActive, setIsOptionActive] = useState(false);\n  const [isLangActive, setIsLangActive] = useState(false);\n  const [isMobileMenuActive, setIsMobileMenuActive] = useState(false);\n\n  const wrapperRef = useRef<HTMLSpanElement>(null);\n  const elmRef = useRef<HTMLDivElement>(null);\n  const langRef = useRef<HTMLSpanElement>(null);\n  const closeMenu = useCallback(() => {\n    setIsOptionActive(false);\n    setIsLangActive(false);\n  }, []);\n\n  useOnClickOutside(\n    [elmRef, wrapperRef],\n    isOptionActive ? closeMenu : () => {},\n  );\n  useOnClickOutside([langRef, wrapperRef], isLangActive ? closeMenu : () => {});\n\n  return (\n    <>\n      <StyledHeader>\n        <MaxWidth $size={1000}>\n          <Flex $justifyContent=\"space-between\" $wrap=\"nowrap\">\n            <Link href=\"/\" className=\"logo\" aria-label=\"Logo\">\n              <StyledTinyDesktopOnly>\n                <Logo />\n              </StyledTinyDesktopOnly>\n              <StyledTinyMobileOnly>\n                <Logo />\n              </StyledTinyMobileOnly>\n            </Link>\n            <span ref={wrapperRef}>\n              <Flex $gap={20} $wrap=\"wrap\">\n                <StyledMenu>\n                <StyledLink href=\"/\">\n                  Doccupine\n                </StyledLink>\n                </StyledMenu>\n                <ToggleTheme />\n                <StyledMobileBurger\n                  $isActive={isMobileMenuActive}\n                  onClick={() => setIsMobileMenuActive(!isMobileMenuActive)}\n                  aria-label=\"Burger Menu\"\n                />\n              </Flex>\n            </span>\n          </Flex>\n        </MaxWidth>\n      </StyledHeader>\n      <StyledMobileMenu $isActive={isMobileMenuActive}>\n        <li onClick={() => setIsMobileMenuActive(false)}>\n          <Link href=\"/\">Doccupine</Link>\n        </li>\n      </StyledMobileMenu>\n    </>\n  );\n}\n\nexport { Header };\n";