doccupine 0.0.97 → 0.0.99

package/dist/templates/components/layout/Stepts.js

@@ -1,114 +0,0 @@
-export const stepsTemplate = `"use client";
-import React from "react";
-import styled, { useTheme } from "styled-components";
-import { styledText, Theme } from "cherry-styled-components/src/lib";
-import { rgba } from "polished";
-import { Icon, IconProps } from "@/components/layout/Icon";
-
-const StyledStepsContainer = styled.div<{ theme: Theme }>\`
-  position: relative;
-  width: 100%;
-\`;
-
-const StyledStep = styled.div<{ theme: Theme }>\`
-  background: \${({ theme }) => theme.colors.light};
-  border-radius: \${({ theme }) => theme.spacing.radius.lg};
-  padding: 0 0 20px 52px;
-  margin: 0;
-  position: relative;
-  \${({ theme }) => styledText(theme)}
-  color: \${({ theme }) => theme.colors.grayDark};
-
-  &::after {
-    content: "";
-    position: absolute;
-    left: 16px;
-    top: 0;
-    width: 1px;
-    height: 100%;
-    background: \${({ theme }) => theme.colors.primary};
-    background: linear-gradient(
-      180deg,
-      \${({ theme }) => theme.colors.primary},
-      \${({ theme }) => rgba(theme.colors.primary, 0)}
-    );
-    border-radius: 4px;
-  }
-\`;
-
-const StepNumber = styled.div<{ theme: Theme }>\`
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  background: \${({ theme }) => theme.colors.primary};
-  color: \${({ theme }) => theme.colors.light};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 700;
-  margin-bottom: 12px;
-  \${({ theme }) => styledText(theme)};
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 1;
-\`;
-
-const StyledStepTitle = styled.h3<{ theme: Theme }>\`
-  margin: 0 0 10px 0;
-  padding: 2px 0 0 0;
-  color: \${({ theme }) => theme.colors.dark};
-  \${({ theme }) => styledText(theme)};
-\`;
-
-const StepContent = styled.div<{ theme: Theme }>\`
-  color: \${({ theme }) => theme.colors.grayDark};
-  \${({ theme }) => styledText(theme)};
-
-  & > .code-wrapper {
-    margin: 10px 0;
-  }
-\`;
-
-interface StepProps extends React.HTMLAttributes<HTMLDivElement> {
-  title: string;
-  children: React.ReactNode;
-  icon?: IconProps;
-}
-
-function Step({ title, children, icon, ...props }: StepProps) {
-  return null;
-}
-
-interface StepsProps extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-}
-
-function Steps({ children, ...props }: StepsProps) {
-  const theme = useTheme() as Theme;
-
-  const steps = React.Children.toArray(children).filter(
-    (child): child is React.ReactElement<StepProps> =>
-      React.isValidElement(child),
-  );
-
-  return (
-    <StyledStepsContainer theme={theme}>
-      {steps.map((step, index) => {
-        const { title, children: stepContent, icon } = step.props;
-
-        return (
-          <StyledStep key={index} theme={theme}>
-            <StepNumber theme={theme}>{index + 1}</StepNumber>
-            {icon && <Icon name={icon} color={theme.colors.primary} />}
-            <StyledStepTitle theme={theme}>{title}</StyledStepTitle>
-            <StepContent theme={theme}>{stepContent}</StepContent>
-          </StyledStep>
-        );
-      })}
-    </StyledStepsContainer>
-  );
-}
-
-export { Steps, Step };
-`;

package/dist/templates/components/layout/ThemeToggle.d.ts

@@ -1 +0,0 @@
-export declare const themeToggleTemplate = "\"use client\";\nimport { resetButton } from \"cherry-styled-components\";\nimport styled, { css } from \"styled-components\";\nimport { Theme } from \"@/app/theme\";\nimport { Icon } from \"@/components/layout/Icon\";\nimport { useThemeOverride } from \"@/components/layout/ClientThemeProvider\";\n\nconst StyledThemeToggle = styled.button<{ theme: Theme; $hidden?: boolean }>`\n  ${resetButton}\n  width: 59px;\n  height: 32px;\n  border-radius: 30px;\n  display: flex;\n  position: relative;\n  margin: auto 0;\n  transform: scale(1);\n  background: ${({ theme }) => theme.colors.light};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    top: 3px;\n    left: 3px;\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n    background: ${({ theme }) =>\n      `color-mix(in srgb, ${theme.colors.primaryLight} 20%, transparent)`};\n    transition: all 0.3s ease;\n    z-index: 1;\n  }\n\n  /* Knob position depends on the active mode, signaled by the \"dark\" class\n     on <html>. Pure CSS \u2014 no JS conditional needed for the visual swap. */\n  :root.dark &::after {\n    transform: translateX(27px);\n  }\n\n  ${({ $hidden }) =>\n    $hidden &&\n    css`\n      display: none;\n    `}\n\n  & svg {\n    width: 16px;\n    height: 16px;\n    object-fit: contain;\n    margin: auto;\n    transition: all 0.3s ease;\n    position: relative;\n    z-index: 2;\n  }\n\n  & .lucide-sun {\n    transform: translateX(1px);\n  }\n\n  & .lucide-moon-star {\n    transform: translateX(-1px);\n  }\n\n  & svg[stroke] {\n    stroke: ${({ theme }) => theme.colors.primary};\n  }\n\n  &:hover {\n    transform: scale(1.05);\n    color: ${({ theme }) => theme.colors.accent};\n\n    & svg[stroke] {\n      stroke: ${({ theme }) => theme.colors.accent};\n    }\n  }\n\n  &:active {\n    transform: scale(0.97);\n  }\n`;\n\nfunction ToggleTheme({ $hidden }: { $hidden?: boolean }) {\n  const { mode, setMode } = useThemeOverride();\n\n  return (\n    <StyledThemeToggle\n      onClick={() => setMode(mode === \"dark\" ? \"light\" : \"dark\")}\n      $hidden={$hidden}\n      aria-label=\"Toggle Theme\"\n    >\n      <Icon name=\"Sun\" className=\"light\" />\n      <Icon name=\"MoonStar\" className=\"dark\" />\n    </StyledThemeToggle>\n  );\n}\n\nfunction ToggleThemeLoading() {\n  return (\n    <StyledThemeToggle $hidden aria-label=\"Toggle Theme\">\n      <Icon name=\"MoonStar\" className=\"dark\" />\n      <Icon name=\"Sun\" className=\"light\" />\n    </StyledThemeToggle>\n  );\n}\n\nexport { ToggleTheme, ToggleThemeLoading };\n";

package/dist/templates/components/layout/ThemeToggle.js

@@ -1,107 +0,0 @@
-export const themeToggleTemplate = `"use client";
-import { resetButton } from "cherry-styled-components";
-import styled, { css } from "styled-components";
-import { Theme } from "@/app/theme";
-import { Icon } from "@/components/layout/Icon";
-import { useThemeOverride } from "@/components/layout/ClientThemeProvider";
-
-const StyledThemeToggle = styled.button<{ theme: Theme; $hidden?: boolean }>\`
-  \${resetButton}
-  width: 59px;
-  height: 32px;
-  border-radius: 30px;
-  display: flex;
-  position: relative;
-  margin: auto 0;
-  transform: scale(1);
-  background: \${({ theme }) => theme.colors.light};
-  border: solid 1px \${({ theme }) => theme.colors.grayLight};
-
-  &::after {
-    content: "";
-    position: absolute;
-    top: 3px;
-    left: 3px;
-    width: 24px;
-    height: 24px;
-    border-radius: 50%;
-    background: \${({ theme }) =>
-      \`color-mix(in srgb, \${theme.colors.primaryLight} 20%, transparent)\`};
-    transition: all 0.3s ease;
-    z-index: 1;
-  }
-
-  /* Knob position depends on the active mode, signaled by the "dark" class
-     on <html>. Pure CSS — no JS conditional needed for the visual swap. */
-  :root.dark &::after {
-    transform: translateX(27px);
-  }
-
-  \${({ $hidden }) =>
-    $hidden &&
-    css\`
-      display: none;
-    \`}
-
-  & svg {
-    width: 16px;
-    height: 16px;
-    object-fit: contain;
-    margin: auto;
-    transition: all 0.3s ease;
-    position: relative;
-    z-index: 2;
-  }
-
-  & .lucide-sun {
-    transform: translateX(1px);
-  }
-
-  & .lucide-moon-star {
-    transform: translateX(-1px);
-  }
-
-  & svg[stroke] {
-    stroke: \${({ theme }) => theme.colors.primary};
-  }
-
-  &:hover {
-    transform: scale(1.05);
-    color: \${({ theme }) => theme.colors.accent};
-
-    & svg[stroke] {
-      stroke: \${({ theme }) => theme.colors.accent};
-    }
-  }
-
-  &:active {
-    transform: scale(0.97);
-  }
-\`;
-
-function ToggleTheme({ $hidden }: { $hidden?: boolean }) {
-  const { mode, setMode } = useThemeOverride();
-
-  return (
-    <StyledThemeToggle
-      onClick={() => setMode(mode === "dark" ? "light" : "dark")}
-      $hidden={$hidden}
-      aria-label="Toggle Theme"
-    >
-      <Icon name="Sun" className="light" />
-      <Icon name="MoonStar" className="dark" />
-    </StyledThemeToggle>
-  );
-}
-
-function ToggleThemeLoading() {
-  return (
-    <StyledThemeToggle $hidden aria-label="Toggle Theme">
-      <Icon name="MoonStar" className="dark" />
-      <Icon name="Sun" className="light" />
-    </StyledThemeToggle>
-  );
-}
-
-export { ToggleTheme, ToggleThemeLoading };
-`;

package/dist/templates/constants.d.ts

@@ -1,5 +0,0 @@
-export declare const DEFAULT_DESCRIPTION = "Doccupine is a free and open-source documentation platform. Write MDX, get a production-ready site with AI chat, built-in components, and an MCP server - in one command.";
-export declare const DEFAULT_SITE_NAME = "Doccupine";
-export declare const DEFAULT_META_DESCRIPTION = "Generated with Doccupine";
-export declare const DEFAULT_FAVICON = "https://docs.doccupine.com/favicon.ico";
-export declare const DEFAULT_OG_IMAGE = "https://docs.doccupine.com/preview.png";

package/dist/templates/constants.js

@@ -1,5 +0,0 @@
-export const DEFAULT_DESCRIPTION = "Doccupine is a free and open-source documentation platform. Write MDX, get a production-ready site with AI chat, built-in components, and an MCP server - in one command.";
-export const DEFAULT_SITE_NAME = "Doccupine";
-export const DEFAULT_META_DESCRIPTION = "Generated with Doccupine";
-export const DEFAULT_FAVICON = "https://docs.doccupine.com/favicon.ico";
-export const DEFAULT_OG_IMAGE = "https://docs.doccupine.com/preview.png";

package/dist/templates/docs-components.d.ts

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

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 };
-`;