doccupine 0.0.83 → 0.0.84

package/dist/templates/components/SearchModalContent.js

@@ -0,0 +1,326 @@
+export const searchModalContentTemplate = `"use client";
+import React, { useCallback } from "react";
+import styled, { css, keyframes } from "styled-components";
+import { rgba } from "polished";
+import { Search } from "lucide-react";
+import { mq, Theme } from "@/app/theme";
+import { Spinner } from "@/components/Spinner";
+
+export interface PageItem {
+  slug: string;
+  title: string;
+  description?: string;
+  category: string;
+  section?: string;
+}
+
+export interface MergedResult {
+  page: PageItem;
+  snippet?: string;
+}
+
+export interface SearchModalContentProps {
+  isClosing: boolean;
+  closeSearch: () => void;
+  onCloseAnimationEnd: () => void;
+  query: string;
+  setQuery: (q: string) => void;
+  activeIndex: number;
+  setActiveIndex: (i: number | ((prev: number) => number)) => void;
+  inputRef: React.RefObject<HTMLInputElement | null>;
+  resultsRef: React.RefObject<HTMLUListElement | null>;
+  onKeyDown: (e: React.KeyboardEvent) => void;
+  merged: MergedResult[];
+  sectionLabels: Record<string, string>;
+  isSearching: boolean;
+  navigate: (slug: string) => void;
+}
+
+const ANIMATION_MS = 150;
+
+const backdropIn = keyframes\`
+  from { opacity: 0; }
+  to { opacity: 1; }
+\`;
+
+const backdropOut = keyframes\`
+  from { opacity: 1; }
+  to { opacity: 0; }
+\`;
+
+const modalIn = keyframes\`
+  from { opacity: 0; transform: scale(0.96) translateY(-8px); }
+  to { opacity: 1; transform: scale(1) translateY(0); }
+\`;
+
+const modalOut = keyframes\`
+  from { opacity: 1; transform: scale(1) translateY(0); }
+  to { opacity: 0; transform: scale(0.96) translateY(-8px); }
+\`;
+
+const StyledBackdrop = styled.div<{ theme: Theme; $isClosing: boolean }>\`
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background: \${({ theme }) =>
+    rgba(theme.isDark ? theme.colors.light : theme.colors.dark, 0.5)};
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 20px;
+  animation: \${({ $isClosing }) => ($isClosing ? backdropOut : backdropIn)}
+    \${ANIMATION_MS}ms ease forwards;
+
+  \${mq("lg")} {
+    padding: 120px 20px 20px 20px;
+  }
+\`;
+
+const StyledModal = styled.div<{ theme: Theme; $isClosing: boolean }>\`
+  background: \${({ theme }) => theme.colors.light};
+  border-radius: \${({ theme }) => theme.spacing.radius.lg};
+  box-shadow: \${({ theme }) => theme.shadows.xs};
+  width: 100%;
+  max-width: 560px;
+  max-height: calc(100dvh - 40px);
+  display: flex;
+  flex-direction: column;
+  border: solid 1px \${({ theme }) => theme.colors.grayLight};
+  padding-bottom: 8px;
+  animation: \${({ $isClosing }) => ($isClosing ? modalOut : modalIn)}
+    \${ANIMATION_MS}ms ease forwards;
+
+  \${mq("lg")} {
+    max-height: calc(100dvh - 240px);
+  }
+\`;
+
+const StyledInputWrapper = styled.div<{ theme: Theme }>\`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px;
+  flex-shrink: 0;
+  border-bottom: solid 1px \${({ theme }) => theme.colors.grayLight};
+
+  & svg.lucide {
+    color: \${({ theme }) => theme.colors.gray};
+    flex-shrink: 0;
+  }
+\`;
+
+const StyledInput = styled.input<{ theme: Theme }>\`
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: \${({ theme }) => theme.fontSizes.text.lg};
+  line-height: \${({ theme }) => theme.lineHeights.text.lg};
+  color: \${({ theme }) => theme.colors.dark};
+  font-family: inherit;
+
+  &::placeholder {
+    color: \${({ theme }) => theme.colors.gray};
+  }
+\`;
+
+const StyledResults = styled.ul<{ theme: Theme }>\`
+  list-style: none;
+  margin: 8px 0 0 0;
+  padding: 0 8px;
+  overflow-y: auto;
+  flex: 1;
+  min-height: 0;
+  -webkit-overflow-scrolling: touch;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+\`;
+
+const StyledResultItem = styled.li<{ theme: Theme; $isActive: boolean }>\`
+  padding: 10px 12px;
+  border-radius: \${({ theme }) => theme.spacing.radius.xs};
+  cursor: pointer;
+  transition: background 0.15s ease;
+
+  \${({ $isActive, theme }) =>
+    $isActive &&
+    css\`
+      background: \${rgba(theme.colors.primaryLight, 0.2)};
+    \`}
+
+  &:hover {
+    background: \${({ theme }) => rgba(theme.colors.primaryLight, 0.15)};
+  }
+\`;
+
+const StyledResultTitle = styled.span<{ theme: Theme }>\`
+  font-size: \${({ theme }) => theme.fontSizes.text.lg};
+  font-weight: 500;
+  color: \${({ theme }) => theme.colors.dark};
+  display: block;
+\`;
+
+const StyledResultMeta = styled.span<{ theme: Theme }>\`
+  font-size: \${({ theme }) => theme.fontSizes.small.lg};
+  color: \${({ theme }) => theme.colors.gray};
+  display: block;
+  margin-top: 2px;
+\`;
+
+const StyledSnippet = styled.span<{ theme: Theme }>\`
+  font-size: \${({ theme }) => theme.fontSizes.small.lg};
+  color: \${({ theme }) => theme.colors.grayDark};
+  display: block;
+  margin-top: 4px;
+  line-height: 1.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  & mark {
+    background: \${({ theme }) => rgba(theme.colors.primaryLight, 0.35)};
+    color: inherit;
+    border-radius: 4px;
+    padding: 0 1px;
+  }
+\`;
+
+const StyledEmpty = styled.div<{ theme: Theme }>\`
+  padding: 20px 20px 12px;
+  min-height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  font-size: \${({ theme }) => theme.fontSizes.small.lg};
+  color: \${({ theme }) => theme.colors.gray};
+\`;
+
+const StyledKbd = styled.kbd<{ theme: Theme }>\`
+  font-size: 11px;
+  font-family: inherit;
+  background: \${({ theme }) => theme.colors.grayLight};
+  color: \${({ theme }) => theme.colors.grayDark};
+  padding: 2px 6px;
+  border-radius: 4px;
+  margin-left: auto;
+  font-weight: 600;
+  display: none;
+
+  \${mq("lg")} {
+    display: initial;
+  }
+\`;
+
+function escapeHtml(str: string): string {
+  return str
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+
+function highlightMatch(snippet: string, query: string): string {
+  const escaped = escapeHtml(snippet);
+  if (!query.trim()) return escaped;
+  const q = escapeHtml(query.trim());
+  const regex = new RegExp(
+    \`(\${q.replace(/[.*+?^\${}()|[\\]\\\\]/g, "\\\\$&")})\`,
+    "gi",
+  );
+  return escaped.replace(regex, "<mark>$1</mark>");
+}
+
+export function SearchModalContent({
+  isClosing,
+  closeSearch,
+  onCloseAnimationEnd,
+  query,
+  setQuery,
+  activeIndex,
+  setActiveIndex,
+  inputRef,
+  resultsRef,
+  onKeyDown,
+  merged,
+  sectionLabels,
+  isSearching,
+  navigate,
+}: SearchModalContentProps) {
+  const setInputRef = useCallback(
+    (node: HTMLInputElement | null) => {
+      // Sync with parent ref
+      if (inputRef) {
+        (inputRef as React.RefObject<HTMLInputElement | null>).current = node;
+      }
+      // Auto-focus on mount
+      if (node && !isClosing) {
+        node.focus();
+      }
+    },
+    [inputRef, isClosing],
+  );
+
+  return (
+    <StyledBackdrop
+      $isClosing={isClosing}
+      onClick={closeSearch}
+      onAnimationEnd={onCloseAnimationEnd}
+    >
+      <StyledModal $isClosing={isClosing} onClick={(e) => e.stopPropagation()}>
+        <StyledInputWrapper>
+          <Search size={18} />
+          <StyledInput
+            ref={setInputRef}
+            value={query}
+            onChange={(e) => {
+              setQuery(e.target.value);
+              setActiveIndex(0);
+            }}
+            onKeyDown={onKeyDown}
+            placeholder="Search docs..."
+            autoComplete="off"
+            spellCheck={false}
+          />
+          <StyledKbd>Esc</StyledKbd>
+        </StyledInputWrapper>
+        {merged.length > 0 ? (
+          <StyledResults ref={resultsRef}>
+            {merged.map((result, index) => (
+              <StyledResultItem
+                key={result.page.slug + result.page.section}
+                $isActive={index === activeIndex}
+                onClick={() => navigate(result.page.slug)}
+                onMouseEnter={() => setActiveIndex(index)}
+              >
+                <StyledResultTitle>{result.page.title}</StyledResultTitle>
+                <StyledResultMeta>
+                  {result.page.section
+                    ? \`\${sectionLabels[result.page.section] || result.page.section} / \`
+                    : ""}
+                  {result.page.category}
+                </StyledResultMeta>
+                {result.snippet && (
+                  <StyledSnippet
+                    dangerouslySetInnerHTML={{
+                      __html: highlightMatch(result.snippet, query),
+                    }}
+                  />
+                )}
+              </StyledResultItem>
+            ))}
+          </StyledResults>
+        ) : (
+          <StyledEmpty>
+            {isSearching ? <Spinner size={18} /> : "No results found"}
+          </StyledEmpty>
+        )}
+      </StyledModal>
+    </StyledBackdrop>
+  );
+}
+`;

package/dist/templates/components/SideBar.d.ts

@@ -1 +1 @@
-export declare const sideBarTemplate = "\"use client\";\nimport { useContext, useState, Suspense } from \"react\";\nimport { usePathname } from \"next/navigation\";\nimport { Flex, Space } from \"cherry-styled-components\";\nimport {\n  DocsSidebar,\n  SectionBarContext,\n  StyledSidebar,\n  StyledSidebarList,\n  StyledSidebarListItem,\n  StyledStrong,\n  StyledSidebarListItemLink,\n  StyledSidebarFooter,\n  StyleMobileBar,\n  StyledMobileBurger,\n} from \"@/components/layout/DocsComponents\";\nimport {\n  ToggleTheme,\n  ToggleThemeLoading,\n} from \"@/components/layout/ThemeToggle\";\nimport { useLockBodyScroll } from \"@/components/LockBodyScroll\";\n\ntype NavItem = {\n  label: string;\n  links: NavItemLink[];\n};\n\ntype NavItemLink = {\n  slug: string;\n  title: string;\n};\n\ninterface SideBarProps {\n  result: NavItem[];\n}\n\nfunction SideBar({ result }: SideBarProps) {\n  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);\n  const hasSectionBar = useContext(SectionBarContext);\n  const pathname = usePathname();\n\n  useLockBodyScroll(isMobileMenuOpen);\n\n  return (\n    <DocsSidebar>\n      <StyleMobileBar\n        onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}\n        $isActive={isMobileMenuOpen}\n      >\n        <StyledMobileBurger $isActive={isMobileMenuOpen} />\n      </StyleMobileBar>\n\n      <StyledSidebar\n        $isActive={isMobileMenuOpen}\n        $hasSectionBar={hasSectionBar}\n      >\n        {result &&\n          result.map((item: NavItem, index: number) => {\n            return (\n              <StyledSidebarList key={index}>\n                <StyledSidebarListItem>\n                  <StyledStrong>{item.label}</StyledStrong>{\" \"}\n                </StyledSidebarListItem>\n                <li>\n                  <Space $size={20} />\n                </li>\n                {item.links &&\n                  item.links.map((link: NavItemLink, indexChild: number) => {\n                    return (\n                      <StyledSidebarListItem key={indexChild}>\n                        <StyledSidebarListItemLink\n                          href={`/${link.slug}`}\n                          $isActive={pathname === `/${link.slug}`}\n                          onClick={() => setIsMobileMenuOpen(false)}\n                        >\n                          {link.title}\n                        </StyledSidebarListItemLink>\n                      </StyledSidebarListItem>\n                    );\n                  })}\n                <Space $size={20} />\n              </StyledSidebarList>\n            );\n          })}\n        <StyledSidebarFooter>\n          <Flex $xsJustifyContent=\"flex-start\" $lgJustifyContent=\"flex-end\">\n            <Suspense fallback={<ToggleThemeLoading />}>\n              <ToggleTheme />\n            </Suspense>\n          </Flex>\n        </StyledSidebarFooter>\n      </StyledSidebar>\n    </DocsSidebar>\n  );\n}\n\nexport { SideBar };\n";
+export declare const sideBarTemplate = "\"use client\";\nimport { useContext, useState, Suspense } from \"react\";\nimport { usePathname } from \"next/navigation\";\nimport { Flex, Space } from \"cherry-styled-components\";\nimport {\n  DocsSidebar,\n  SectionBarContext,\n  StyledSidebar,\n  StyledSidebarList,\n  StyledSidebarListItem,\n  StyledStrong,\n  StyledSidebarListItemLink,\n  StyledSidebarFooter,\n  StyleMobileBar,\n  StyledMobileBurger,\n} from \"@/components/layout/DocsComponents\";\nimport {\n  ToggleTheme,\n  ToggleThemeLoading,\n} from \"@/components/layout/ThemeToggle\";\nimport { useLockBodyScroll } from \"@/components/LockBodyScroll\";\n\ntype NavItem = {\n  label: string;\n  links: NavItemLink[];\n};\n\ntype NavItemLink = {\n  slug: string;\n  title: string;\n};\n\ninterface SideBarProps {\n  result: NavItem[];\n}\n\nfunction SideBar({ result }: SideBarProps) {\n  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);\n  const hasSectionBar = useContext(SectionBarContext);\n  const pathname = usePathname();\n\n  useLockBodyScroll(isMobileMenuOpen);\n\n  return (\n    <DocsSidebar>\n      <StyleMobileBar\n        onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}\n        $isActive={isMobileMenuOpen}\n        aria-label={isMobileMenuOpen ? \"Close navigation menu\" : \"Open navigation menu\"}\n        aria-expanded={isMobileMenuOpen}\n      >\n        <StyledMobileBurger $isActive={isMobileMenuOpen} />\n      </StyleMobileBar>\n\n      <StyledSidebar\n        $isActive={isMobileMenuOpen}\n        $hasSectionBar={hasSectionBar}\n      >\n        {result &&\n          result.map((item: NavItem, index: number) => {\n            return (\n              <StyledSidebarList key={index}>\n                <StyledSidebarListItem>\n                  <StyledStrong>{item.label}</StyledStrong>{\" \"}\n                </StyledSidebarListItem>\n                <li>\n                  <Space $size={20} />\n                </li>\n                {item.links &&\n                  item.links.map((link: NavItemLink, indexChild: number) => {\n                    return (\n                      <StyledSidebarListItem key={indexChild}>\n                        <StyledSidebarListItemLink\n                          href={`/${link.slug}`}\n                          $isActive={pathname === `/${link.slug}`}\n                          onClick={() => setIsMobileMenuOpen(false)}\n                        >\n                          {link.title}\n                        </StyledSidebarListItemLink>\n                      </StyledSidebarListItem>\n                    );\n                  })}\n                <li aria-hidden=\"true\">\n                  <Space $size={20} />\n                </li>\n              </StyledSidebarList>\n            );\n          })}\n        <StyledSidebarFooter>\n          <Flex $xsJustifyContent=\"flex-start\" $lgJustifyContent=\"flex-end\">\n            <Suspense fallback={<ToggleThemeLoading />}>\n              <ToggleTheme />\n            </Suspense>\n          </Flex>\n        </StyledSidebarFooter>\n      </StyledSidebar>\n    </DocsSidebar>\n  );\n}\n\nexport { SideBar };\n";

package/dist/templates/components/SideBar.js

@@ -46,6 +46,8 @@ function SideBar({ result }: SideBarProps) {
       <StyleMobileBar
         onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
         $isActive={isMobileMenuOpen}
+        aria-label={isMobileMenuOpen ? "Close navigation menu" : "Open navigation menu"}
+        aria-expanded={isMobileMenuOpen}
       >
         <StyledMobileBurger $isActive={isMobileMenuOpen} />
       </StyleMobileBar>
@@ -78,7 +80,9 @@ function SideBar({ result }: SideBarProps) {
                       </StyledSidebarListItem>
                     );
                   })}
-                <Space $size={20} />
+                <li aria-hidden="true">
+                  <Space $size={20} />
+                </li>
               </StyledSidebarList>
             );
           })}

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

@@ -1 +1 @@
-export declare const docsComponentsTemplate = "\"use client\";\nimport { darken, lighten, rgba } from \"polished\";\nimport React, { createContext, useContext } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport {\n  resetButton,\n  styledSmall,\n  styledStrong,\n  styledText,\n} from \"cherry-styled-components\";\nimport Link from \"next/link\";\nimport { mq, Theme } from \"@/app/theme\";\nimport {\n  styledAnchor,\n  styledTable,\n  stylesLists,\n} from \"@/components/layout/SharedStyled\";\nimport { ChatContext } from \"@/components/Chat\";\n\nconst SectionBarContext = createContext(false);\n\nfunction SectionBarProvider({\n  hasSectionBar,\n  children,\n}: {\n  hasSectionBar: boolean;\n  children: React.ReactNode;\n}) {\n  return (\n    <SectionBarContext.Provider value={hasSectionBar}>\n      {children}\n    </SectionBarContext.Provider>\n  );\n}\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  clear: both;\n`;\n\nconst StyledDocsContainer = styled.div<{ theme: Theme; $isChatOpen?: boolean }>`\n  position: relative;\n  padding: 0 20px 100px 20px;\n  width: 100%;\n  ${({ theme }) => styledText(theme)};\n  transition: all 0.3s ease;\n\n  ${mq(\"lg\")} {\n    padding: 0 300px 80px 300px;\n\n    ${({ $isChatOpen }) =>\n      $isChatOpen &&\n      css`\n        padding: 0 440px 80px 300px;\n      `}\n  }\n\n  & p {\n    color: ${({ theme }) => theme.colors.grayDark};\n    hyphens: auto;\n  }\n\n  & pre {\n    max-width: 100%;\n  }\n\n  ${styledAnchor};\n  ${stylesLists};\n  ${styledTable};\n\n  & img,\n  & video,\n  & iframe {\n    max-width: 100%;\n    border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  }\n\n  & code:not([class]) {\n    background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.2)};\n    color: ${({ theme }) => theme.colors.dark};\n    padding: 2px 4px;\n    border-radius: ${({ theme }) => theme.spacing.radius.xs};\n    white-space: pre;\n  }\n\n  & .lucide {\n    color: ${({ theme }) => theme.colors.primary};\n  }\n\n  & .aspect-video {\n    aspect-ratio: 16 / 9;\n    border-radius: ${({ theme }) => theme.spacing.radius.lg};\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  max-width: 640px;\n  margin: auto;\n`;\n\ninterface Props {\n  theme?: Theme;\n  $isActive?: boolean;\n  $hasSectionBar?: boolean;\n}\n\nexport const StyledSidebar = styled.nav<Props>`\n  position: fixed;\n  overflow-y: auto;\n  max-height: calc(\n    100dvh - ${({ $hasSectionBar }) => ($hasSectionBar ? 104 : 62)}px\n  );\n  width: 100%;\n  z-index: 99;\n  top: ${({ $hasSectionBar }) => ($hasSectionBar ? 104 : 62)}px;\n  height: 100%;\n  padding: 20px;\n  opacity: 0;\n  pointer-events: none;\n  transition: all 0.3s ease;\n  transform: translateY(30px);\n  left: 0;\n  background: ${({ theme }) => theme.colors.light};\n  -webkit-overflow-scrolling: touch;\n  display: flex;\n  flex-direction: column;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  ${mq(\"lg\")} {\n    border-right: solid 1px ${({ theme }) => theme.colors.grayLight};\n    transition: none;\n    max-height: 100dvh;\n    width: 220px;\n    background: transparent;\n    padding: 82px 20px 20px 20px;\n    opacity: 1;\n    pointer-events: all;\n    transform: translateY(0);\n    background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.05)};\n    top: 0;\n    width: 280px;\n  }\n\n  ${({ $isActive }) =>\n    $isActive &&\n    css`\n      transform: translateY(0);\n      opacity: 1;\n      pointer-events: all;\n    `}\n`;\n\nexport const StyledSidebarFooter = styled.div`\n  padding: 22px 20px;\n  position: sticky;\n  border-top: 1px solid ${({ theme }) => theme.colors.grayLight};\n  background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.05)};\n  margin: 0 -20px -20px;\n  bottom: -20px;\n  backdrop-filter: blur(10px);\n\n  ${mq(\"lg\")} {\n    padding: 16px 20px;\n  }\n`;\n\nexport const StyledIndexSidebar = styled.ul<{ theme: Theme }>`\n  display: none;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  position: fixed;\n  top: 0;\n  right: 0;\n  width: 280px;\n  height: 100dvh;\n  overflow-y: auto;\n  z-index: 1;\n  padding: 82px 20px 20px 20px;\n  background: ${({ theme }) => theme.colors.light};\n  border-left: solid 1px ${({ theme }) => theme.colors.grayLight};\n  -webkit-overflow-scrolling: touch;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  ${mq(\"lg\")} {\n    display: block;\n  }\n\n  & li {\n    padding: 5px 0;\n  }\n`;\n\nexport const StyledIndexSidebarLabel = styled.span<{ theme: Theme }>`\n  ${({ theme }) => styledSmall(theme)};\n  color: ${({ theme }) => theme.colors.grayDark};\n`;\n\nexport const StyledIndexSidebarLi = styled.li<{\n  theme: Theme;\n  $isActive: boolean;\n}>`\n  &::before {\n    content: \"\";\n    display: block;\n    position: absolute;\n    left: 0;\n    height: 20px;\n    width: 1px;\n    background: transparent;\n    transition: all 0.3s ease;\n  }\n\n  ${({ $isActive, theme }) =>\n    $isActive &&\n    css`\n      &::before {\n        background: ${theme.colors.primary};\n      }\n    `}\n`;\n\nexport const StyledIndexSidebarLink = styled.a<{\n  theme: Theme;\n  $isActive: boolean;\n}>`\n  ${({ theme }) => styledSmall(theme)};\n  color: ${({ theme, $isActive }) =>\n    $isActive ? theme.colors.primary : theme.colors.dark};\n  font-weight: ${({ $isActive }) => ($isActive ? \"600\" : \"400\")};\n  text-decoration: none;\n  transition: all 0.3s ease;\n\n  &:hover {\n    color: ${({ theme }) => theme.colors.primary};\n  }\n`;\n\nexport const StyledSidebarList = styled.ul`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n\n  &:last-of-type {\n    margin-bottom: auto;\n  }\n`;\n\nexport const StyledStrong = styled.strong<{ theme: Theme }>`\n  font-weight: 600;\n  ${({ theme }) => styledStrong(theme)};\n  color: ${({ theme }) =>\n    theme.isDark\n      ? lighten(0.1, theme.colors.primaryLight)\n      : darken(0.1, theme.colors.primaryDark)};\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.small.lg};\n  line-height: 1.6;\n  color: ${({ theme }) =>\n    theme.isDark ? theme.colors.grayDark : theme.colors.primary};\n  padding: 5px 0 5px 20px;\n  display: flex;\n  transition: all 0.3s ease;\n  border-left: solid 1px ${({ theme }) => theme.colors.grayLight};\n\n  &:hover {\n    color: ${({ theme }) =>\n      theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};\n    border-color: ${({ theme }) => theme.colors.primary};\n  }\n\n  ${({ $isActive, theme }) =>\n    $isActive &&\n    `\n\t\t\tcolor: ${theme.isDark ? lighten(0.1, theme.colors.primaryLight) : darken(0.1, theme.colors.primaryDark)};\n\t\t\tborder-color: ${theme.colors.primary};\n\t\t\tfont-weight: 600;\n\t`};\n`;\n\nexport const StyleMobileBar = styled.button<Props>`\n  ${resetButton};\n  position: fixed;\n  z-index: 999;\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 }) => theme.colors.primary};\n  color: ${({ theme }) =>\n    theme.isDark ? theme.colors.dark : theme.colors.light};\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n  padding: 10px;\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  transform: scale(0.8);\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.light};\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 StyledMissingComponent = styled.div`\n  background: ${({ theme }) => theme.colors.error};\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  padding: 20px;\n  font-size: ${({ theme }) => theme.fontSizes.small.lg};\n  color: ${({ theme }) =>\n    theme.isDark ? theme.colors.dark : theme.colors.light};\n  font-weight: 600;\n  display: flex;\n  gap: 10px;\n  align-items: center;\n`;\n\ninterface DocsWrapperProps {\n  children: React.ReactNode;\n}\n\nfunction DocsWrapper({ children }: DocsWrapperProps) {\n  return <StyledDocsWrapper>{children}</StyledDocsWrapper>;\n}\n\nfunction DocsSidebar({ children }: DocsProps) {\n  return <StyledDocsSidebar>{children}</StyledDocsSidebar>;\n}\n\nfunction DocsContainer({ children }: DocsProps) {\n  const { isOpen } = useContext(ChatContext);\n\n  return (\n    <StyledDocsContainer $isChatOpen={isOpen}>{children}</StyledDocsContainer>\n  );\n}\n\nexport {\n  DocsWrapper,\n  DocsSidebar,\n  DocsContainer,\n  SectionBarContext,\n  SectionBarProvider,\n};\n";
+export declare const docsComponentsTemplate = "\"use client\";\nimport { darken, lighten, rgba } from \"polished\";\nimport React, { createContext, useContext } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport {\n  resetButton,\n  styledSmall,\n  styledStrong,\n  styledText,\n} from \"cherry-styled-components\";\nimport Link from \"next/link\";\nimport { mq, Theme } from \"@/app/theme\";\nimport {\n  styledAnchor,\n  styledTable,\n  stylesLists,\n} from \"@/components/layout/SharedStyled\";\nimport { ChatContext } from \"@/components/Chat\";\n\nconst SectionBarContext = createContext(false);\n\nfunction SectionBarProvider({\n  hasSectionBar,\n  children,\n}: {\n  hasSectionBar: boolean;\n  children: React.ReactNode;\n}) {\n  return (\n    <SectionBarContext.Provider value={hasSectionBar}>\n      {children}\n    </SectionBarContext.Provider>\n  );\n}\n\ninterface DocsProps {\n  children: React.ReactNode;\n}\n\nconst StyledDocsWrapper = styled.main<{ theme: Theme }>`\n  position: relative;\n`;\n\nconst StyledDocsSidebar = styled.div<{ theme: Theme }>`\n  clear: both;\n`;\n\nconst StyledDocsContainer = styled.div<{ theme: Theme; $isChatOpen?: boolean }>`\n  position: relative;\n  padding: 0 20px 100px 20px;\n  width: 100%;\n  ${({ theme }) => styledText(theme)};\n  transition: all 0.3s ease;\n\n  ${mq(\"lg\")} {\n    padding: 0 300px 80px 300px;\n\n    ${({ $isChatOpen }) =>\n      $isChatOpen &&\n      css`\n        padding: 0 440px 80px 300px;\n      `}\n  }\n\n  & p {\n    color: ${({ theme }) => theme.colors.grayDark};\n    hyphens: auto;\n  }\n\n  & pre {\n    max-width: 100%;\n  }\n\n  ${styledAnchor};\n  ${stylesLists};\n  ${styledTable};\n\n  & img,\n  & video,\n  & iframe {\n    max-width: 100%;\n    border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  }\n\n  & code:not([class]) {\n    background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.2)};\n    color: ${({ theme }) => theme.colors.dark};\n    padding: 2px 4px;\n    border-radius: ${({ theme }) => theme.spacing.radius.xs};\n    white-space: pre;\n  }\n\n  & .lucide {\n    color: ${({ theme }) => theme.colors.primary};\n  }\n\n  & .aspect-video {\n    aspect-ratio: 16 / 9;\n    border-radius: ${({ theme }) => theme.spacing.radius.lg};\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  max-width: 640px;\n  margin: auto;\n`;\n\ninterface Props {\n  theme?: Theme;\n  $isActive?: boolean;\n  $hasSectionBar?: boolean;\n}\n\nexport const StyledSidebar = styled.nav<Props>`\n  position: fixed;\n  overflow-y: auto;\n  max-height: calc(\n    100dvh - ${({ $hasSectionBar }) => ($hasSectionBar ? 104 : 62)}px\n  );\n  width: 100%;\n  z-index: 99;\n  top: ${({ $hasSectionBar }) => ($hasSectionBar ? 104 : 62)}px;\n  height: 100%;\n  padding: 20px;\n  opacity: 0;\n  pointer-events: none;\n  transition: all 0.3s ease;\n  transform: translateY(30px);\n  left: 0;\n  background: ${({ theme }) => theme.colors.light};\n  -webkit-overflow-scrolling: touch;\n  display: flex;\n  flex-direction: column;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  ${mq(\"lg\")} {\n    border-right: solid 1px ${({ theme }) => theme.colors.grayLight};\n    transition: none;\n    max-height: 100dvh;\n    width: 220px;\n    background: transparent;\n    padding: 82px 20px 20px 20px;\n    opacity: 1;\n    pointer-events: all;\n    transform: translateY(0);\n    background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.05)};\n    top: 0;\n    width: 280px;\n  }\n\n  ${({ $isActive }) =>\n    $isActive &&\n    css`\n      transform: translateY(0);\n      opacity: 1;\n      pointer-events: all;\n    `}\n`;\n\nexport const StyledSidebarFooter = styled.div`\n  padding: 22px 20px;\n  position: sticky;\n  border-top: 1px solid ${({ theme }) => theme.colors.grayLight};\n  background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.05)};\n  margin: 0 -20px -20px;\n  bottom: -20px;\n  backdrop-filter: blur(10px);\n\n  ${mq(\"lg\")} {\n    padding: 16px 20px;\n  }\n`;\n\nexport const StyledIndexSidebar = styled.ul<{ theme: Theme }>`\n  display: none;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  position: fixed;\n  top: 0;\n  right: 0;\n  width: 280px;\n  height: 100dvh;\n  overflow-y: auto;\n  z-index: 1;\n  padding: 82px 20px 20px 20px;\n  background: ${({ theme }) => theme.colors.light};\n  border-left: solid 1px ${({ theme }) => theme.colors.grayLight};\n  -webkit-overflow-scrolling: touch;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  ${mq(\"lg\")} {\n    display: block;\n  }\n\n  & li {\n    padding: 5px 0;\n  }\n`;\n\nexport const StyledIndexSidebarLabel = styled.span<{ theme: Theme }>`\n  ${({ theme }) => styledSmall(theme)};\n  color: ${({ theme }) => theme.colors.grayDark};\n`;\n\nexport const StyledIndexSidebarLi = styled.li<{\n  theme: Theme;\n  $isActive: boolean;\n}>`\n  &::before {\n    content: \"\";\n    display: block;\n    position: absolute;\n    left: 0;\n    height: 20px;\n    width: 1px;\n    background: transparent;\n    transition: all 0.3s ease;\n  }\n\n  ${({ $isActive, theme }) =>\n    $isActive &&\n    css`\n      &::before {\n        background: ${theme.colors.primary};\n      }\n    `}\n`;\n\nexport const StyledIndexSidebarLink = styled.a<{\n  theme: Theme;\n  $isActive: boolean;\n}>`\n  ${({ theme }) => styledSmall(theme)};\n  color: ${({ theme, $isActive }) =>\n    $isActive ? theme.colors.primary : theme.colors.dark};\n  font-weight: ${({ $isActive }) => ($isActive ? \"600\" : \"400\")};\n  text-decoration: none;\n  transition: all 0.3s ease;\n\n  &:hover {\n    color: ${({ theme }) => theme.colors.primary};\n  }\n`;\n\nexport const StyledSidebarList = styled.ul`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n\n  &:last-of-type {\n    margin-bottom: auto;\n  }\n`;\n\nexport const StyledStrong = styled.strong<{ theme: Theme }>`\n  font-weight: 600;\n  ${({ theme }) => styledStrong(theme)};\n  color: ${({ theme }) =>\n    theme.isDark\n      ? lighten(0.1, theme.colors.primaryLight)\n      : darken(0.1, theme.colors.primaryDark)};\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.small.lg};\n  line-height: 1.6;\n  color: ${({ theme }) =>\n    theme.isDark ? theme.colors.grayDark : theme.colors.primary};\n  padding: 5px 0 5px 20px;\n  display: flex;\n  transition: all 0.3s ease;\n  border-left: solid 1px ${({ theme }) => theme.colors.grayLight};\n\n  &:hover {\n    color: ${({ theme }) =>\n      theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};\n    border-color: ${({ theme }) => theme.colors.primary};\n  }\n\n  ${({ $isActive, theme }) =>\n    $isActive &&\n    `\n\t\t\tcolor: ${theme.isDark ? lighten(0.1, theme.colors.primaryLight) : darken(0.1, theme.colors.primaryDark)};\n\t\t\tborder-color: ${theme.colors.primary};\n\t\t\tfont-weight: 600;\n\t`};\n`;\n\nexport const StyleMobileBar = styled.button<Props>`\n  ${resetButton};\n  position: fixed;\n  z-index: 999;\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 }) => theme.colors.primary};\n  color: ${({ theme }) =>\n    theme.isDark ? theme.colors.dark : theme.colors.light};\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n  padding: 10px;\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  transform: scale(0.8);\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.light};\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 StyledMissingComponent = styled.div`\n  background: ${({ theme }) => theme.colors.error};\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  padding: 20px;\n  font-size: ${({ theme }) => theme.fontSizes.small.lg};\n  color: ${({ theme }) =>\n    theme.isDark ? theme.colors.dark : theme.colors.light};\n  font-weight: 600;\n  display: flex;\n  gap: 10px;\n  align-items: center;\n`;\n\ninterface DocsWrapperProps {\n  children: React.ReactNode;\n}\n\nfunction DocsWrapper({ children }: DocsWrapperProps) {\n  return <StyledDocsWrapper>{children}</StyledDocsWrapper>;\n}\n\nfunction DocsSidebar({ children }: DocsProps) {\n  return <StyledDocsSidebar>{children}</StyledDocsSidebar>;\n}\n\nfunction DocsContainer({ children }: DocsProps) {\n  const { isOpen } = useContext(ChatContext);\n\n  return (\n    <StyledDocsContainer $isChatOpen={isOpen}>{children}</StyledDocsContainer>\n  );\n}\n\nexport {\n  DocsWrapper,\n  DocsSidebar,\n  DocsContainer,\n  SectionBarContext,\n  SectionBarProvider,\n};\n";

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

@@ -38,7 +38,7 @@ interface DocsProps {
   children: React.ReactNode;
 }
 
-const StyledDocsWrapper = styled.div<{ theme: Theme }>\`
+const StyledDocsWrapper = styled.main<{ theme: Theme }>\`
   position: relative;
 \`;
 

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

@@ -1 +1 @@
-export declare const docsNavigationTemplate = "\"use client\";\nimport { useContext } from \"react\";\nimport { usePathname } from \"next/navigation\";\nimport Link from \"next/link\";\nimport styled, { css } from \"styled-components\";\nimport { Icon } from \"@/components/layout/Icon\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { interactiveStyles } from \"@/components/layout/SharedStyled\";\nimport { ChatContext } from \"@/components/Chat\";\n\nconst StyledNavigationWrapper = styled.div<{\n  $isChatOpen?: boolean;\n}>`\n  transition: all 0.3s ease;\n  padding: 0 20px 100px 20px;\n  ${mq(\"lg\")} {\n    padding: 0 300px 80px 300px;\n    ${({ $isChatOpen }) =>\n      $isChatOpen &&\n      css`\n        padding: 0 440px 80px 300px;\n      `}\n  }\n`;\n\nconst StyledNavigationInner = styled.div`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 20px;\n  max-width: 640px;\n  margin: auto;\n`;\n\nconst StyledNavButton = styled(Link)<{ theme: Theme }>`\n  ${interactiveStyles};\n  display: flex;\n  flex-direction: column;\n  text-decoration: none;\n  padding: 20px;\n  flex: 50%;\n  max-width: 50%;\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  color: ${({ theme }) => theme.colors.dark};\n\n  &:hover {\n    border-color: ${({ theme }) => theme.colors.primary};\n  }\n\n  &[data-direction=\"prev\"] {\n    align-items: flex-start;\n  }\n\n  &[data-direction=\"next\"] {\n    align-items: flex-end;\n    margin-left: auto;\n    text-align: right;\n  }\n`;\n\nconst StyledNavLabel = styled.span<{ theme: Theme }>`\n  color: ${({ theme }) => theme.colors.gray};\n  display: flex;\n  flex-direction: row;\n  gap: 4px;\n\n  & svg {\n    margin: auto 0;\n  }\n`;\n\nconst StyledNavTitle = styled.span<{ theme: Theme }>`\n  color: ${({ theme }) => theme.colors.dark};\n  font-weight: 600;\n  margin: 0 0 4px 0;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  max-width: 100%;\n`;\n\nconst StyledSpacer = styled.div`\n  flex: 1;\n`;\n\ninterface Page {\n  slug: string;\n  title: string;\n  category?: string;\n  [key: string]: unknown;\n}\n\ninterface NavigationItem {\n  category?: string;\n  slug?: string;\n  title?: string;\n  links?: Page[];\n  items?: Page[];\n  [key: string]: unknown;\n}\n\ninterface DocsNavigationProps {\n  result: NavigationItem[];\n}\n\nfunction DocsNavigation({ result }: DocsNavigationProps) {\n  const { isOpen } = useContext(ChatContext);\n  const pathname = usePathname();\n  const allPages: Page[] = result.flatMap((item) => {\n    if (item.links && Array.isArray(item.links)) {\n      return item.links;\n    }\n    if (item.items && Array.isArray(item.items)) {\n      return item.items;\n    }\n    if (item.slug !== undefined) {\n      return [item as Page];\n    }\n    return [];\n  });\n  const currentSlug = pathname.replace(/^\\//, \"\").replace(/\\/$/, \"\");\n  const currentIndex = allPages.findIndex((page) => page.slug === currentSlug);\n  const prevPage = currentIndex > 0 ? allPages[currentIndex - 1] : null;\n  const nextPage =\n    currentIndex < allPages.length - 1 ? allPages[currentIndex + 1] : null;\n  if (currentIndex === -1 || allPages.length === 0) {\n    return null;\n  }\n  if (!prevPage && !nextPage) {\n    return null;\n  }\n  return (\n    <StyledNavigationWrapper $isChatOpen={isOpen}>\n      <StyledNavigationInner>\n        {prevPage ? (\n          <StyledNavButton href={`/${prevPage.slug}`} data-direction=\"prev\">\n            <StyledNavTitle>{prevPage.title}</StyledNavTitle>\n            <StyledNavLabel>\n              <Icon name=\"arrow-left\" size={16} /> Previous\n            </StyledNavLabel>\n          </StyledNavButton>\n        ) : (\n          <StyledSpacer />\n        )}\n        {nextPage && (\n          <StyledNavButton href={`/${nextPage.slug}`} data-direction=\"next\">\n            <StyledNavTitle>{nextPage.title}</StyledNavTitle>\n            <StyledNavLabel>\n              Next <Icon name=\"arrow-right\" size={16} />\n            </StyledNavLabel>\n          </StyledNavButton>\n        )}\n      </StyledNavigationInner>\n    </StyledNavigationWrapper>\n  );\n}\n\nexport { DocsNavigation };\n";
+export declare const docsNavigationTemplate = "\"use client\";\nimport { useContext } from \"react\";\nimport { usePathname } from \"next/navigation\";\nimport Link from \"next/link\";\nimport styled, { css } from \"styled-components\";\nimport { Icon } from \"@/components/layout/Icon\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { interactiveStyles } from \"@/components/layout/SharedStyled\";\nimport { ChatContext } from \"@/components/Chat\";\n\nconst StyledNavigationWrapper = styled.div<{\n  $isChatOpen?: boolean;\n}>`\n  transition: all 0.3s ease;\n  padding: 0 20px 100px 20px;\n  ${mq(\"lg\")} {\n    padding: 0 300px 80px 300px;\n    ${({ $isChatOpen }) =>\n      $isChatOpen &&\n      css`\n        padding: 0 440px 80px 300px;\n      `}\n  }\n`;\n\nconst StyledNavigationInner = styled.div`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 20px;\n  max-width: 640px;\n  margin: auto;\n`;\n\nconst StyledNavButton = styled(Link)<{ theme: Theme }>`\n  ${interactiveStyles};\n  display: flex;\n  flex-direction: column;\n  text-decoration: none;\n  padding: 20px;\n  flex: 50%;\n  max-width: 50%;\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  color: ${({ theme }) => theme.colors.dark};\n\n  &:hover {\n    border-color: ${({ theme }) => theme.colors.primary};\n  }\n\n  &[data-direction=\"prev\"] {\n    align-items: flex-start;\n  }\n\n  &[data-direction=\"next\"] {\n    align-items: flex-end;\n    margin-left: auto;\n    text-align: right;\n  }\n`;\n\nconst StyledNavLabel = styled.span<{ theme: Theme }>`\n  color: ${({ theme }) => theme.colors.grayDark};\n  display: flex;\n  flex-direction: row;\n  gap: 4px;\n\n  & svg {\n    margin: auto 0;\n  }\n`;\n\nconst StyledNavTitle = styled.span<{ theme: Theme }>`\n  color: ${({ theme }) => theme.colors.dark};\n  font-weight: 600;\n  margin: 0 0 4px 0;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  max-width: 100%;\n`;\n\nconst StyledSpacer = styled.div`\n  flex: 1;\n`;\n\ninterface Page {\n  slug: string;\n  title: string;\n  category?: string;\n  [key: string]: unknown;\n}\n\ninterface NavigationItem {\n  category?: string;\n  slug?: string;\n  title?: string;\n  links?: Page[];\n  items?: Page[];\n  [key: string]: unknown;\n}\n\ninterface DocsNavigationProps {\n  result: NavigationItem[];\n}\n\nfunction DocsNavigation({ result }: DocsNavigationProps) {\n  const { isOpen } = useContext(ChatContext);\n  const pathname = usePathname();\n  const allPages: Page[] = result.flatMap((item) => {\n    if (item.links && Array.isArray(item.links)) {\n      return item.links;\n    }\n    if (item.items && Array.isArray(item.items)) {\n      return item.items;\n    }\n    if (item.slug !== undefined) {\n      return [item as Page];\n    }\n    return [];\n  });\n  const currentSlug = pathname.replace(/^\\//, \"\").replace(/\\/$/, \"\");\n  const currentIndex = allPages.findIndex((page) => page.slug === currentSlug);\n  const prevPage = currentIndex > 0 ? allPages[currentIndex - 1] : null;\n  const nextPage =\n    currentIndex < allPages.length - 1 ? allPages[currentIndex + 1] : null;\n  if (currentIndex === -1 || allPages.length === 0) {\n    return null;\n  }\n  if (!prevPage && !nextPage) {\n    return null;\n  }\n  return (\n    <StyledNavigationWrapper $isChatOpen={isOpen}>\n      <StyledNavigationInner>\n        {prevPage ? (\n          <StyledNavButton href={`/${prevPage.slug}`} data-direction=\"prev\">\n            <StyledNavTitle>{prevPage.title}</StyledNavTitle>\n            <StyledNavLabel>\n              <Icon name=\"arrow-left\" size={16} /> Previous\n            </StyledNavLabel>\n          </StyledNavButton>\n        ) : (\n          <StyledSpacer />\n        )}\n        {nextPage && (\n          <StyledNavButton href={`/${nextPage.slug}`} data-direction=\"next\">\n            <StyledNavTitle>{nextPage.title}</StyledNavTitle>\n            <StyledNavLabel>\n              Next <Icon name=\"arrow-right\" size={16} />\n            </StyledNavLabel>\n          </StyledNavButton>\n        )}\n      </StyledNavigationInner>\n    </StyledNavigationWrapper>\n  );\n}\n\nexport { DocsNavigation };\n";

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

@@ -61,7 +61,7 @@ const StyledNavButton = styled(Link)<{ theme: Theme }>\`
 \`;
 
 const StyledNavLabel = styled.span<{ theme: Theme }>\`
-  color: \${({ theme }) => theme.colors.gray};
+  color: \${({ theme }) => theme.colors.grayDark};
   display: flex;
   flex-direction: row;
   gap: 4px;

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

@@ -1 +1 @@
-export declare const footerTemplate = "\"use client\";\nimport { useContext } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { Space, styledSmall } from \"cherry-styled-components\";\nimport { ChatContext } from \"@/components/Chat\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { GitHubLogo } from \"@/components/layout/Pictograms\";\nimport linksData from \"@/links.json\";\n\ninterface LinkProps {\n  title: string;\n  url: string;\n  icon?: string;\n}\n\nconst links = linksData as LinkProps[];\n\nconst StyledFooter = styled.footer<{\n  theme: Theme;\n  $isChatOpen?: boolean;\n  $hasLinks?: boolean;\n}>`\n  padding: 0 20px;\n  transition: all 0.3s ease;\n\n  ${({ $hasLinks }) =>\n    $hasLinks &&\n    css`\n      margin-top: 20px;\n    `}\n\n  ${mq(\"lg\")} {\n    margin: 0;\n    padding: 0 300px 0 300px;\n\n    ${({ $isChatOpen }) =>\n      $isChatOpen &&\n      css`\n        padding: 0 440px 0 300px;\n      `}\n  }\n`;\n\nconst StyledFooterInner = styled.div<{ theme: Theme }>`\n  border-top: solid 1px ${({ theme }) => theme.colors.grayLight};\n  max-width: 640px;\n  margin: 0 auto;\n  padding: 28px 0;\n  color: ${({ theme }) => theme.colors.gray};\n  ${({ theme }) => styledSmall(theme)};\n\n  ${mq(\"lg\")} {\n    padding: 20px 0;\n  }\n\n  & a {\n    font-weight: 700;\n    color: ${({ theme }) => theme.colors.primary};\n    text-decoration: none;\n    transition: all 0.3s ease;\n    display: inline-flex;\n\n    &:hover {\n      color: ${({ theme }) => theme.colors.primaryDark};\n    }\n\n    & svg {\n      width: 18px;\n      height: 18px;\n    }\n  }\n`;\n\nconst StyledFooterFlex = styled.div`\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 20px;\n\n  ${mq(\"lg\")} {\n    justify-content: space-between;\n  }\n`;\n\nfunction Footer({ hideBranding }: { hideBranding?: boolean }) {\n  const { isOpen } = useContext(ChatContext);\n\n  if (hideBranding) return <Space $xs={80} $lg=\"none\" />;\n\n  return (\n    <StyledFooter $isChatOpen={isOpen} $hasLinks={links.length > 0}>\n      <StyledFooterInner>\n        <StyledFooterFlex>\n          <span>\n            Powered by <a href=\"https://doccupine.com\">Doccupine</a>\n          </span>\n          <a href=\"https://github.com/doccupine/cli\" target=\"_blank\">\n            <GitHubLogo />\n          </a>\n        </StyledFooterFlex>\n      </StyledFooterInner>\n    </StyledFooter>\n  );\n}\n\nexport { Footer };\n";
+export declare const footerTemplate = "\"use client\";\nimport { useContext } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { Space, styledSmall } from \"cherry-styled-components\";\nimport { ChatContext } from \"@/components/Chat\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { GitHubLogo } from \"@/components/layout/Pictograms\";\nimport linksData from \"@/links.json\";\n\ninterface LinkProps {\n  title: string;\n  url: string;\n  icon?: string;\n}\n\nconst links = linksData as LinkProps[];\n\nconst StyledFooter = styled.footer<{\n  theme: Theme;\n  $isChatOpen?: boolean;\n  $hasLinks?: boolean;\n}>`\n  padding: 0 20px;\n  transition: all 0.3s ease;\n\n  ${({ $hasLinks }) =>\n    $hasLinks &&\n    css`\n      margin-top: 20px;\n    `}\n\n  ${mq(\"lg\")} {\n    margin: 0;\n    padding: 0 300px 0 300px;\n\n    ${({ $isChatOpen }) =>\n      $isChatOpen &&\n      css`\n        padding: 0 440px 0 300px;\n      `}\n  }\n`;\n\nconst StyledFooterInner = styled.div<{ theme: Theme }>`\n  border-top: solid 1px ${({ theme }) => theme.colors.grayLight};\n  max-width: 640px;\n  margin: 0 auto;\n  padding: 28px 0;\n  color: ${({ theme }) => theme.colors.grayDark};\n  ${({ theme }) => styledSmall(theme)};\n\n  ${mq(\"lg\")} {\n    padding: 20px 0;\n  }\n\n  & a {\n    font-weight: 700;\n    color: ${({ theme }) =>\n      theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};\n    text-decoration: none;\n    transition: all 0.3s ease;\n    display: inline-flex;\n\n    &:hover {\n      color: ${({ theme }) => theme.colors.primaryDark};\n    }\n\n    & svg {\n      width: 18px;\n      height: 18px;\n    }\n  }\n`;\n\nconst StyledFooterFlex = styled.div`\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 20px;\n\n  ${mq(\"lg\")} {\n    justify-content: space-between;\n  }\n`;\n\nfunction Footer({ hideBranding }: { hideBranding?: boolean }) {\n  const { isOpen } = useContext(ChatContext);\n\n  if (hideBranding) return <Space $xs={80} $lg=\"none\" />;\n\n  return (\n    <StyledFooter $isChatOpen={isOpen} $hasLinks={links.length > 0}>\n      <StyledFooterInner>\n        <StyledFooterFlex>\n          <span>\n            Powered by <a href=\"https://doccupine.com\">Doccupine</a>\n          </span>\n          <a\n            href=\"https://github.com/doccupine/cli\"\n            target=\"_blank\"\n            aria-label=\"Doccupine on GitHub\"\n          >\n            <GitHubLogo />\n          </a>\n        </StyledFooterFlex>\n      </StyledFooterInner>\n    </StyledFooter>\n  );\n}\n\nexport { Footer };\n";

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

@@ -47,7 +47,7 @@ const StyledFooterInner = styled.div<{ theme: Theme }>\`
   max-width: 640px;
   margin: 0 auto;
   padding: 28px 0;
-  color: \${({ theme }) => theme.colors.gray};
+  color: \${({ theme }) => theme.colors.grayDark};
   \${({ theme }) => styledSmall(theme)};
 
   \${mq("lg")} {
@@ -56,7 +56,8 @@ const StyledFooterInner = styled.div<{ theme: Theme }>\`
 
   & a {
     font-weight: 700;
-    color: \${({ theme }) => theme.colors.primary};
+    color: \${({ theme }) =>
+      theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};
     text-decoration: none;
     transition: all 0.3s ease;
     display: inline-flex;
@@ -95,7 +96,11 @@ function Footer({ hideBranding }: { hideBranding?: boolean }) {
           <span>
             Powered by <a href="https://doccupine.com">Doccupine</a>
           </span>
-          <a href="https://github.com/doccupine/cli" target="_blank">
+          <a
+            href="https://github.com/doccupine/cli"
+            target="_blank"
+            aria-label="Doccupine on GitHub"
+          >
             <GitHubLogo />
           </a>
         </StyledFooterFlex>

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

@@ -1 +1 @@
-export declare const sharedStyledTemplate = "\"use client\";\nimport { mq, styledSmall, styledText, Theme } from \"cherry-styled-components\";\nimport styled, { css } from \"styled-components\";\n\nexport const interactiveStyles = css<{ theme: Theme }>`\n  transition: all 0.3s ease;\n  border: solid 1px transparent;\n  box-shadow: 0 0 0 0px ${({ theme }) => theme.colors.primary};\n\n  &:hover {\n    border-color: ${({ theme }) => theme.colors.primary};\n  }\n\n  &:focus {\n    border-color: ${({ theme }) => theme.colors.primary};\n    box-shadow: 0 0 0 4px ${({ theme }) => theme.colors.primaryLight};\n  }\n\n  &:active {\n    box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.primaryLight};\n  }\n`;\n\nexport const styledAnchor = css<{ theme: Theme }>`\n  & a:not([class]):not(:has(img)) {\n    color: inherit;\n    transition: all 0.3s ease;\n    text-decoration: none;\n    box-shadow: 0 2px 0 0 ${({ theme }) => theme.colors.primary};\n\n    &:hover {\n      color: ${({ theme }) =>\n        theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};\n      box-shadow: 0 1px 0 0 ${({ theme }) => theme.colors.primary};\n    }\n  }\n`;\n\nexport const stylesLists = css<{ theme: Theme }>`\n  & ul,\n  & ol {\n    & li {\n      & > .code-wrapper {\n        margin: 10px 0;\n      }\n    }\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    & ul {\n      padding-left: 15px;\n    }\n\n    & > li {\n      position: relative;\n      padding: 0;\n      counter-increment: item;\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 styledTable = css<{ theme: Theme }>`\n  & .table-wrapper {\n    overflow-x: auto;\n    width: 100%;\n  }\n\n  & table {\n    margin: 0;\n    padding: 0;\n    border-collapse: collapse;\n    width: 100%;\n    text-align: left;\n\n    & tr {\n      margin: 0;\n      padding: 0;\n    }\n\n    & th {\n      border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n      padding: 10px 10px 10px 0;\n      ${({ theme }) => styledSmall(theme)};\n      font-weight: 600;\n      color: ${({ theme }) => theme.colors.dark};\n    }\n\n    & td {\n      border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n      padding: 10px 10px 10px 0;\n      color: ${({ theme }) => theme.colors.grayDark};\n      ${({ theme }) => styledSmall(theme)};\n    }\n  }\n`;\n\nexport const StyledSmallButton = styled.button<{ theme: Theme }>`\n  ${interactiveStyles};\n  background: ${({ theme }) => theme.colors.light};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  color: ${({ theme }) => theme.colors.primary};\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  padding: 6px 8px;\n  font-size: 12px;\n  font-family: inherit;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-right: -6px;\n\n  & svg.lucide {\n    color: inherit;\n  }\n`;\n";
+export declare const sharedStyledTemplate = "\"use client\";\nimport { mq, styledSmall, styledText, Theme } from \"cherry-styled-components\";\nimport styled, { css } from \"styled-components\";\n\nexport const interactiveStyles = css<{ theme: Theme }>`\n  transition: all 0.3s ease;\n  border: solid 1px transparent;\n  box-shadow: 0 0 0 0px ${({ theme }) => theme.colors.primary};\n\n  &:hover {\n    border-color: ${({ theme }) => theme.colors.primary};\n  }\n\n  &:focus {\n    border-color: ${({ theme }) => theme.colors.primary};\n    box-shadow: 0 0 0 4px ${({ theme }) => theme.colors.primaryLight};\n  }\n\n  &:active {\n    box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.primaryLight};\n  }\n`;\n\nexport const styledAnchor = css<{ theme: Theme }>`\n  & a:not([class]):not(:has(img)) {\n    color: inherit;\n    transition: all 0.3s ease;\n    text-decoration: none;\n    box-shadow: 0 2px 0 0 ${({ theme }) => theme.colors.primary};\n\n    &:hover {\n      color: ${({ theme }) =>\n        theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};\n      box-shadow: 0 1px 0 0 ${({ theme }) => theme.colors.primary};\n    }\n  }\n`;\n\nexport const stylesLists = css<{ theme: Theme }>`\n  & ul,\n  & ol {\n    & li {\n      & > .code-wrapper {\n        margin: 10px 0;\n      }\n    }\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    & ul {\n      padding-left: 15px;\n    }\n\n    & > li {\n      position: relative;\n      padding: 0;\n      counter-increment: item;\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 styledTable = css<{ theme: Theme }>`\n  & .table-wrapper {\n    overflow-x: auto;\n    width: 100%;\n  }\n\n  & table {\n    margin: 0;\n    padding: 0;\n    border-collapse: collapse;\n    width: 100%;\n    text-align: left;\n\n    & tr {\n      margin: 0;\n      padding: 0;\n    }\n\n    & th {\n      border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n      padding: 10px 10px 10px 0;\n      ${({ theme }) => styledSmall(theme)};\n      font-weight: 600;\n      color: ${({ theme }) => theme.colors.dark};\n    }\n\n    & td {\n      border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n      padding: 10px 10px 10px 0;\n      color: ${({ theme }) => theme.colors.grayDark};\n      ${({ theme }) => styledSmall(theme)};\n    }\n  }\n`;\n\nexport const StyledSmallButton = styled.button<{ theme: Theme }>`\n  ${interactiveStyles};\n  background: ${({ theme }) => theme.colors.light};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  color: ${({ theme }) =>\n    theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  padding: 6px 8px;\n  font-size: 12px;\n  font-family: inherit;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-right: -6px;\n\n  & svg.lucide {\n    color: inherit;\n  }\n`;\n";

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

@@ -148,7 +148,8 @@ export const StyledSmallButton = styled.button<{ theme: Theme }>\`
   \${interactiveStyles};
   background: \${({ theme }) => theme.colors.light};
   border: solid 1px \${({ theme }) => theme.colors.grayLight};
-  color: \${({ theme }) => theme.colors.primary};
+  color: \${({ theme }) =>
+    theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};
   border-radius: \${({ theme }) => theme.spacing.radius.xs};
   padding: 6px 8px;
   font-size: 12px;

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

@@ -1 +1 @@
-export declare const staticLinksTemplate = "\"use client\";\nimport styled, { css } from \"styled-components\";\nimport { rgba } from \"polished\";\nimport { useContext } from \"react\";\nimport { ChatContext } from \"@/components/Chat\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { interactiveStyles } from \"@/components/layout/SharedStyled\";\nimport { Icon } from \"@/components/layout/Icon\";\nimport linksData from \"@/links.json\";\n\ninterface LinkProps {\n  title: string;\n  url: string;\n  icon?: string;\n}\n\nconst links = linksData as LinkProps[];\n\nconst StyledStaticLinks = styled.div<{ theme: Theme; $isChatOpen: boolean }>`\n  display: flex;\n  margin: 0 auto;\n  transition: all 0.3s ease;\n  padding: 0 20px;\n  margin-bottom: 20px;\n\n  ${mq(\"lg\")} {\n    margin: 0;\n    padding: 0 300px 20px 300px;\n\n    ${({ $isChatOpen }) =>\n      $isChatOpen &&\n      css`\n        padding: 0 440px 20px 300px;\n      `}\n  }\n`;\n\nconst StyledStaticLinksContent = styled.div`\n  max-width: 640px;\n  margin: auto 0;\n  display: flex;\n  gap: 16px;\n  flex-wrap: wrap;\n  width: 100%;\n  margin: 0 auto;\n`;\n\nconst StyledLink = styled.a<{ theme: Theme; $hasIcon?: boolean }>`\n  position: relative;\n  text-decoration: none;\n  font-size: ${({ theme }) => theme.fontSizes.small.lg};\n  line-height: 1;\n  color: ${({ theme }) =>\n    theme.isDark ? theme.colors.primary : theme.colors.primary};\n  padding: 0;\n  display: flex;\n  gap: 6px;\n  transition: all 0.3s ease;\n  font-weight: 600;\n  white-space: nowrap;\n  min-width: fit-content;\n  background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.1)};\n  padding: 6px 8px;\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  ${interactiveStyles};\n\n  ${({ $hasIcon }) =>\n    $hasIcon &&\n    css`\n      padding-left: 30px;\n    `}\n\n  & * {\n    margin: auto 0;\n  }\n\n  & svg {\n    position: absolute;\n    top: 50%;\n    left: 8px;\n    transform: translateY(-50%);\n  }\n\n  &:hover {\n    color: ${({ theme }) =>\n      theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};\n  }\n`;\n\nfunction StaticLinks() {\n  const { isOpen } = useContext(ChatContext);\n\n  if (links.length === 0) {\n    return null;\n  }\n\n  return (\n    <>\n      <StyledStaticLinks $isChatOpen={isOpen}>\n        <StyledStaticLinksContent>\n          {links.map((link, index) => (\n            <StyledLink\n              key={index}\n              href={link.url}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              $hasIcon={link.icon ? true : false}\n            >\n              {link.icon && <Icon name={link.icon} size={16} />}\n              <span>{link.title}</span>\n            </StyledLink>\n          ))}\n        </StyledStaticLinksContent>\n      </StyledStaticLinks>\n    </>\n  );\n}\n\nexport { StaticLinks };\n";
+export declare const staticLinksTemplate = "\"use client\";\nimport styled, { css } from \"styled-components\";\nimport { rgba } from \"polished\";\nimport { useContext } from \"react\";\nimport { ChatContext } from \"@/components/Chat\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { interactiveStyles } from \"@/components/layout/SharedStyled\";\nimport { Icon } from \"@/components/layout/Icon\";\nimport linksData from \"@/links.json\";\n\ninterface LinkProps {\n  title: string;\n  url: string;\n  icon?: string;\n}\n\nconst links = linksData as LinkProps[];\n\nconst StyledStaticLinks = styled.div<{ theme: Theme; $isChatOpen: boolean }>`\n  display: flex;\n  margin: 0 auto;\n  transition: all 0.3s ease;\n  padding: 0 20px;\n  margin-bottom: 20px;\n\n  ${mq(\"lg\")} {\n    margin: 0;\n    padding: 0 300px 20px 300px;\n\n    ${({ $isChatOpen }) =>\n      $isChatOpen &&\n      css`\n        padding: 0 440px 20px 300px;\n      `}\n  }\n`;\n\nconst StyledStaticLinksContent = styled.div`\n  max-width: 640px;\n  margin: auto 0;\n  display: flex;\n  gap: 16px;\n  flex-wrap: wrap;\n  width: 100%;\n  margin: 0 auto;\n`;\n\nconst StyledLink = styled.a<{ theme: Theme; $hasIcon?: boolean }>`\n  position: relative;\n  text-decoration: none;\n  font-size: ${({ theme }) => theme.fontSizes.small.lg};\n  line-height: 1;\n  color: ${({ theme }) =>\n    theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};\n  padding: 0;\n  display: flex;\n  gap: 6px;\n  transition: all 0.3s ease;\n  font-weight: 600;\n  white-space: nowrap;\n  min-width: fit-content;\n  background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.1)};\n  padding: 6px 8px;\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  ${interactiveStyles};\n\n  ${({ $hasIcon }) =>\n    $hasIcon &&\n    css`\n      padding-left: 30px;\n    `}\n\n  & * {\n    margin: auto 0;\n  }\n\n  & svg {\n    position: absolute;\n    top: 50%;\n    left: 8px;\n    transform: translateY(-50%);\n  }\n\n  &:hover {\n    color: ${({ theme }) =>\n      theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};\n  }\n`;\n\nfunction StaticLinks() {\n  const { isOpen } = useContext(ChatContext);\n\n  if (links.length === 0) {\n    return null;\n  }\n\n  return (\n    <>\n      <StyledStaticLinks $isChatOpen={isOpen}>\n        <StyledStaticLinksContent>\n          {links.map((link, index) => (\n            <StyledLink\n              key={index}\n              href={link.url}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              $hasIcon={link.icon ? true : false}\n            >\n              {link.icon && <Icon name={link.icon} size={16} />}\n              <span>{link.title}</span>\n            </StyledLink>\n          ))}\n        </StyledStaticLinksContent>\n      </StyledStaticLinks>\n    </>\n  );\n}\n\nexport { StaticLinks };\n";

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

@@ -52,7 +52,7 @@ const StyledLink = styled.a<{ theme: Theme; $hasIcon?: boolean }>\`
   font-size: \${({ theme }) => theme.fontSizes.small.lg};
   line-height: 1;
   color: \${({ theme }) =>
-    theme.isDark ? theme.colors.primary : theme.colors.primary};
+    theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};
   padding: 0;
   display: flex;
   gap: 6px;

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

@@ -1 +1 @@
-export declare const themeMdxTemplate = "---\ntitle: \"Theme\"\ndescription: \"Customize the documentation UI colors with a theme.json file.\"\ndate: \"2026-02-19\"\ncategory: \"Configuration\"\ncategoryOrder: 3\norder: 5\n---\n# Theme\nDefine your site\u2019s color system with a `theme.json` file. This lets you tailor the look and feel of your documentation without changing content.\n\n## theme.json\nPlace a `theme.json` at your project root (the same folder where you execute `npx doccupine`). It supports multiple modes. Define a `default` mode and a `dark` mode.\n\n```json\n{\n  \"default\": {\n    \"primaryLight\": \"#93c5fd\",\n    \"primary\": \"#3b82f6\",\n    \"primaryDark\": \"#1e40af\",\n    \"secondaryLight\": \"#c4b5fd\",\n    \"secondary\": \"#8b5cf6\",\n    \"secondaryDark\": \"#5b21b6\",\n    \"tertiaryLight\": \"#fbbf24\",\n    \"tertiary\": \"#f59e0b\",\n    \"tertiaryDark\": \"#d97706\",\n    \"grayLight\": \"#f3f4f6\",\n    \"gray\": \"#9ca3af\",\n    \"grayDark\": \"#374151\",\n    \"success\": \"#10b981\",\n    \"error\": \"#f43f5e\",\n    \"warning\": \"#f59e0b\",\n    \"info\": \"#3b82f6\",\n    \"dark\": \"#000000\",\n    \"light\": \"#ffffff\"\n  },\n  \"dark\": {\n    \"primaryLight\": \"#9bcaff\",\n    \"primary\": \"#1e7ae0\",\n    \"primaryDark\": \"#033d7e\",\n    \"secondaryLight\": \"#ddd6fe\",\n    \"secondary\": \"#a78bfa\",\n    \"secondaryDark\": \"#7c3aed\",\n    \"tertiaryLight\": \"#fed7aa\",\n    \"tertiary\": \"#fb923c\",\n    \"tertiaryDark\": \"#ea580c\",\n    \"grayLight\": \"#1f2937\",\n    \"gray\": \"#6b7280\",\n    \"grayDark\": \"#9ca3af\",\n    \"success\": \"#10b981\",\n    \"error\": \"#f43f5e\",\n    \"warning\": \"#f59e0b\",\n    \"info\": \"#3b82f6\",\n    \"dark\": \"#ffffff\",\n    \"light\": \"#000000\"\n  },\n  \"logo\": {\n    \"dark\": \"https://docs.doccupine.com/logo-dark.svg\",\n    \"light\": \"https://docs.doccupine.com/logo-light.svg\"\n  }\n}\n```\n\n## Modes\n- **default**: The base color palette for your site.\n- **dark**: Dark\u2011mode palette.\n\n## Fields\n- **primaryLight**: A lighter variant of your brand color, used for subtle accents and backgrounds.\n- **primary**: The main brand color.\n- **primaryDark**: A darker variant of your brand color for emphasis and hover states.\n- **secondaryLight**: A lighter variant of your secondary color, used for subtle accents and backgrounds.\n- **secondary**: The secondary brand color used for highlights and UI accents.\n- **secondaryDark**: A darker variant of your secondary color for emphasis and hover states.\n- **tertiaryLight**: A lighter variant of your tertiary color, used for subtle accents and backgrounds.\n- **tertiary**: The tertiary accent color.\n- **tertiaryDark**: A darker variant of your tertiary color for emphasis and hover states.\n- **grayLight**: Light gray for surfaces and borders.\n- **gray**: Neutral gray for text and UI elements.\n- **grayDark**: Dark gray for headings or high\u2011contrast text.\n- **success**: Positive/confirmation color.\n- **error**: Error/destructive color.\n- **warning**: Warning/attention color.\n- **info**: Informational/highlight color.\n- **dark**: The darkest/base color (often page background in dark mode).\n- **light**: The lightest/base color (often page background in light mode).\n- **logo.light**: Path or URL to the logo used on light backgrounds. Recommended size: 164\u00D730 px.\n- **logo.dark**: Path or URL to the logo used on dark backgrounds. Recommended size: 164\u00D730 px.\n\n## Behavior\n- **Placement**: Put `theme.json` in the project root alongside `config.json`.\n- **Partial palettes**: If a key is missing in a mode, consumers may fall back to the `default` value.\n- **Logo size**: Recommended dimensions are 164px width and 30px height.\n\n<Callout type=\"warning\">\n  Use valid hex colors (e.g., `#22c55e`). Invalid color values may cause unexpected rendering.\n</Callout>\n\n## Tips\n- **Contrast**: Ensure sufficient contrast between text and backgrounds for readability.\n- **Branding**: Start with your brand\u2019s `primary` color, then derive `primaryLight` and `primaryDark`.\n- **Iterate**: Adjust colors and refresh the site to preview changes quickly.\n\n# Demo\nIn the following demos, you can see how the theme can be changed. To override the theme, create a `theme.json` file in the project root and copy paste the code below.\n\n<DemoTheme variant=\"purple\" />\n<DemoTheme variant=\"green\" />\n<DemoTheme variant=\"yellow\" />\n<DemoTheme />\n\n## Purple\n\n```json\n{\n  \"default\": {\n    \"primaryLight\": \"#c4b5fd\",\n    \"primary\": \"#8b5cf6\",\n    \"primaryDark\": \"#5b21b6\",\n    \"secondaryLight\": \"#86efac\",\n    \"secondary\": \"#22c55e\",\n    \"secondaryDark\": \"#15803d\",\n    \"tertiaryLight\": \"#fbbf24\",\n    \"tertiary\": \"#f59e0b\",\n    \"tertiaryDark\": \"#d97706\",\n    \"grayLight\": \"#f3f4f6\",\n    \"gray\": \"#9ca3af\",\n    \"grayDark\": \"#374151\",\n    \"success\": \"#10b981\",\n    \"error\": \"#f43f5e\",\n    \"warning\": \"#f59e0b\",\n    \"info\": \"#3b82f6\",\n    \"dark\": \"#000000\",\n    \"light\": \"#ffffff\"\n  },\n  \"dark\": {\n    \"primaryLight\": \"#ddd6fe\",\n    \"primary\": \"#a78bfa\",\n    \"primaryDark\": \"#7c3aed\",\n    \"secondaryLight\": \"#6ee7b7\",\n    \"secondary\": \"#10b981\",\n    \"secondaryDark\": \"#065f46\",\n    \"tertiaryLight\": \"#fed7aa\",\n    \"tertiary\": \"#fb923c\",\n    \"tertiaryDark\": \"#ea580c\",\n    \"grayLight\": \"#1f2937\",\n    \"gray\": \"#6b7280\",\n    \"grayDark\": \"#9ca3af\",\n    \"success\": \"#10b981\",\n    \"error\": \"#f43f5e\",\n    \"warning\": \"#f59e0b\",\n    \"info\": \"#3b82f6\",\n    \"dark\": \"#ffffff\",\n    \"light\": \"#000000\"\n  }\n}\n```\n<DemoTheme variant=\"purple\" />\n\n## Green\n\n```json\n{\n  \"default\": {\n    \"primaryLight\": \"#86efac\",\n    \"primary\": \"#22c55e\",\n    \"primaryDark\": \"#15803d\",\n    \"secondaryLight\": \"#c4b5fd\",\n    \"secondary\": \"#8b5cf6\",\n    \"secondaryDark\": \"#5b21b6\",\n    \"tertiaryLight\": \"#fbbf24\",\n    \"tertiary\": \"#f59e0b\",\n    \"tertiaryDark\": \"#d97706\",\n    \"grayLight\": \"#f3f4f6\",\n    \"gray\": \"#9ca3af\",\n    \"grayDark\": \"#374151\",\n    \"success\": \"#10b981\",\n    \"error\": \"#f43f5e\",\n    \"warning\": \"#f59e0b\",\n    \"info\": \"#3b82f6\",\n    \"dark\": \"#000000\",\n    \"light\": \"#ffffff\"\n  },\n  \"dark\": {\n    \"primaryLight\": \"#6ee7b7\",\n    \"primary\": \"#10b981\",\n    \"primaryDark\": \"#065f46\",\n    \"secondaryLight\": \"#ddd6fe\",\n    \"secondary\": \"#a78bfa\",\n    \"secondaryDark\": \"#7c3aed\",\n    \"tertiaryLight\": \"#fed7aa\",\n    \"tertiary\": \"#fb923c\",\n    \"tertiaryDark\": \"#ea580c\",\n    \"grayLight\": \"#1f2937\",\n    \"gray\": \"#6b7280\",\n    \"grayDark\": \"#9ca3af\",\n    \"success\": \"#10b981\",\n    \"error\": \"#f43f5e\",\n    \"warning\": \"#f59e0b\",\n    \"info\": \"#3b82f6\",\n    \"dark\": \"#ffffff\",\n    \"light\": \"#000000\"\n  }\n}\n```\n<DemoTheme variant=\"green\" />\n\n## Yellow\n\n```json\n{\n  \"default\": {\n    \"primaryLight\": \"#fbbf24\",\n    \"primary\": \"#f59e0b\",\n    \"primaryDark\": \"#d97706\",\n    \"secondaryLight\": \"#c4b5fd\",\n    \"secondary\": \"#8b5cf6\",\n    \"secondaryDark\": \"#5b21b6\",\n    \"tertiaryLight\": \"#86efac\",\n    \"tertiary\": \"#22c55e\",\n    \"tertiaryDark\": \"#15803d\",\n    \"grayLight\": \"#f3f4f6\",\n    \"gray\": \"#9ca3af\",\n    \"grayDark\": \"#374151\",\n    \"success\": \"#10b981\",\n    \"error\": \"#f43f5e\",\n    \"warning\": \"#f59e0b\",\n    \"info\": \"#3b82f6\",\n    \"dark\": \"#000000\",\n    \"light\": \"#ffffff\"\n  },\n  \"dark\": {\n    \"primaryLight\": \"#fed7aa\",\n    \"primary\": \"#fb923c\",\n    \"primaryDark\": \"#ea580c\",\n    \"secondaryLight\": \"#ddd6fe\",\n    \"secondary\": \"#a78bfa\",\n    \"secondaryDark\": \"#7c3aed\",\n    \"tertiaryLight\": \"#6ee7b7\",\n    \"tertiary\": \"#10b981\",\n    \"tertiaryDark\": \"#065f46\",\n    \"grayLight\": \"#1f2937\",\n    \"gray\": \"#6b7280\",\n    \"grayDark\": \"#9ca3af\",\n    \"success\": \"#10b981\",\n    \"error\": \"#f43f5e\",\n    \"warning\": \"#f59e0b\",\n    \"info\": \"#3b82f6\",\n    \"dark\": \"#ffffff\",\n    \"light\": \"#000000\"\n  }\n}\n```\n\n<DemoTheme variant=\"yellow\" />";
+export declare const themeMdxTemplate = "---\ntitle: \"Theme\"\ndescription: \"Customize the documentation UI colors with a theme.json file.\"\ndate: \"2026-02-19\"\ncategory: \"Configuration\"\ncategoryOrder: 3\norder: 5\n---\n# Theme\nDefine your site\u2019s color system with a `theme.json` file. This lets you tailor the look and feel of your documentation without changing content.\n\n## theme.json\nPlace a `theme.json` at your project root (the same folder where you execute `npx doccupine`). It supports multiple modes. Define a `default` mode and a `dark` mode.\n\n```json\n{\n  \"default\": {\n    \"primaryLight\": \"#93c5fd\",\n    \"primary\": \"#2563eb\",\n    \"primaryDark\": \"#1e40af\",\n    \"secondaryLight\": \"#c4b5fd\",\n    \"secondary\": \"#8b5cf6\",\n    \"secondaryDark\": \"#5b21b6\",\n    \"tertiaryLight\": \"#fbbf24\",\n    \"tertiary\": \"#f59e0b\",\n    \"tertiaryDark\": \"#d97706\",\n    \"grayLight\": \"#f3f4f6\",\n    \"gray\": \"#9ca3af\",\n    \"grayDark\": \"#374151\",\n    \"success\": \"#10b981\",\n    \"error\": \"#f43f5e\",\n    \"warning\": \"#f59e0b\",\n    \"info\": \"#3b82f6\",\n    \"dark\": \"#000000\",\n    \"light\": \"#ffffff\"\n  },\n  \"dark\": {\n    \"primaryLight\": \"#9bcaff\",\n    \"primary\": \"#1e7ae0\",\n    \"primaryDark\": \"#033d7e\",\n    \"secondaryLight\": \"#ddd6fe\",\n    \"secondary\": \"#a78bfa\",\n    \"secondaryDark\": \"#7c3aed\",\n    \"tertiaryLight\": \"#fed7aa\",\n    \"tertiary\": \"#fb923c\",\n    \"tertiaryDark\": \"#ea580c\",\n    \"grayLight\": \"#1f2937\",\n    \"gray\": \"#6b7280\",\n    \"grayDark\": \"#9ca3af\",\n    \"success\": \"#10b981\",\n    \"error\": \"#f43f5e\",\n    \"warning\": \"#f59e0b\",\n    \"info\": \"#3b82f6\",\n    \"dark\": \"#ffffff\",\n    \"light\": \"#000000\"\n  },\n  \"logo\": {\n    \"dark\": \"https://docs.doccupine.com/logo-dark.svg\",\n    \"light\": \"https://docs.doccupine.com/logo-light.svg\"\n  }\n}\n```\n\n## Modes\n- **default**: The base color palette for your site.\n- **dark**: Dark\u2011mode palette.\n\n## Fields\n- **primaryLight**: A lighter variant of your brand color, used for subtle accents and backgrounds.\n- **primary**: The main brand color.\n- **primaryDark**: A darker variant of your brand color for emphasis and hover states.\n- **secondaryLight**: A lighter variant of your secondary color, used for subtle accents and backgrounds.\n- **secondary**: The secondary brand color used for highlights and UI accents.\n- **secondaryDark**: A darker variant of your secondary color for emphasis and hover states.\n- **tertiaryLight**: A lighter variant of your tertiary color, used for subtle accents and backgrounds.\n- **tertiary**: The tertiary accent color.\n- **tertiaryDark**: A darker variant of your tertiary color for emphasis and hover states.\n- **grayLight**: Light gray for surfaces and borders.\n- **gray**: Neutral gray for text and UI elements.\n- **grayDark**: Dark gray for headings or high\u2011contrast text.\n- **success**: Positive/confirmation color.\n- **error**: Error/destructive color.\n- **warning**: Warning/attention color.\n- **info**: Informational/highlight color.\n- **dark**: The darkest/base color (often page background in dark mode).\n- **light**: The lightest/base color (often page background in light mode).\n- **logo.light**: Path or URL to the logo used on light backgrounds. Recommended size: 164\u00D730 px.\n- **logo.dark**: Path or URL to the logo used on dark backgrounds. Recommended size: 164\u00D730 px.\n\n## Behavior\n- **Placement**: Put `theme.json` in the project root alongside `config.json`.\n- **Partial palettes**: If a key is missing in a mode, consumers may fall back to the `default` value.\n- **Logo size**: Recommended dimensions are 164px width and 30px height.\n\n<Callout type=\"warning\">\n  Use valid hex colors (e.g., `#22c55e`). Invalid color values may cause unexpected rendering.\n</Callout>\n\n## Tips\n- **Contrast**: Ensure sufficient contrast between text and backgrounds for readability.\n- **Branding**: Start with your brand\u2019s `primary` color, then derive `primaryLight` and `primaryDark`.\n- **Iterate**: Adjust colors and refresh the site to preview changes quickly.\n\n# Demo\nIn the following demos, you can see how the theme can be changed. To override the theme, create a `theme.json` file in the project root and copy paste the code below.\n\n<DemoTheme variant=\"purple\" />\n<DemoTheme variant=\"green\" />\n<DemoTheme variant=\"yellow\" />\n<DemoTheme />\n\n## Purple\n\n```json\n{\n  \"default\": {\n    \"primaryLight\": \"#c4b5fd\",\n    \"primary\": \"#8b5cf6\",\n    \"primaryDark\": \"#5b21b6\",\n    \"secondaryLight\": \"#86efac\",\n    \"secondary\": \"#22c55e\",\n    \"secondaryDark\": \"#15803d\",\n    \"tertiaryLight\": \"#fbbf24\",\n    \"tertiary\": \"#f59e0b\",\n    \"tertiaryDark\": \"#d97706\",\n    \"grayLight\": \"#f3f4f6\",\n    \"gray\": \"#9ca3af\",\n    \"grayDark\": \"#374151\",\n    \"success\": \"#10b981\",\n    \"error\": \"#f43f5e\",\n    \"warning\": \"#f59e0b\",\n    \"info\": \"#3b82f6\",\n    \"dark\": \"#000000\",\n    \"light\": \"#ffffff\"\n  },\n  \"dark\": {\n    \"primaryLight\": \"#ddd6fe\",\n    \"primary\": \"#a78bfa\",\n    \"primaryDark\": \"#7c3aed\",\n    \"secondaryLight\": \"#6ee7b7\",\n    \"secondary\": \"#10b981\",\n    \"secondaryDark\": \"#065f46\",\n    \"tertiaryLight\": \"#fed7aa\",\n    \"tertiary\": \"#fb923c\",\n    \"tertiaryDark\": \"#ea580c\",\n    \"grayLight\": \"#1f2937\",\n    \"gray\": \"#6b7280\",\n    \"grayDark\": \"#9ca3af\",\n    \"success\": \"#10b981\",\n    \"error\": \"#f43f5e\",\n    \"warning\": \"#f59e0b\",\n    \"info\": \"#3b82f6\",\n    \"dark\": \"#ffffff\",\n    \"light\": \"#000000\"\n  }\n}\n```\n<DemoTheme variant=\"purple\" />\n\n## Green\n\n```json\n{\n  \"default\": {\n    \"primaryLight\": \"#86efac\",\n    \"primary\": \"#22c55e\",\n    \"primaryDark\": \"#15803d\",\n    \"secondaryLight\": \"#c4b5fd\",\n    \"secondary\": \"#8b5cf6\",\n    \"secondaryDark\": \"#5b21b6\",\n    \"tertiaryLight\": \"#fbbf24\",\n    \"tertiary\": \"#f59e0b\",\n    \"tertiaryDark\": \"#d97706\",\n    \"grayLight\": \"#f3f4f6\",\n    \"gray\": \"#9ca3af\",\n    \"grayDark\": \"#374151\",\n    \"success\": \"#10b981\",\n    \"error\": \"#f43f5e\",\n    \"warning\": \"#f59e0b\",\n    \"info\": \"#3b82f6\",\n    \"dark\": \"#000000\",\n    \"light\": \"#ffffff\"\n  },\n  \"dark\": {\n    \"primaryLight\": \"#6ee7b7\",\n    \"primary\": \"#10b981\",\n    \"primaryDark\": \"#065f46\",\n    \"secondaryLight\": \"#ddd6fe\",\n    \"secondary\": \"#a78bfa\",\n    \"secondaryDark\": \"#7c3aed\",\n    \"tertiaryLight\": \"#fed7aa\",\n    \"tertiary\": \"#fb923c\",\n    \"tertiaryDark\": \"#ea580c\",\n    \"grayLight\": \"#1f2937\",\n    \"gray\": \"#6b7280\",\n    \"grayDark\": \"#9ca3af\",\n    \"success\": \"#10b981\",\n    \"error\": \"#f43f5e\",\n    \"warning\": \"#f59e0b\",\n    \"info\": \"#3b82f6\",\n    \"dark\": \"#ffffff\",\n    \"light\": \"#000000\"\n  }\n}\n```\n<DemoTheme variant=\"green\" />\n\n## Yellow\n\n```json\n{\n  \"default\": {\n    \"primaryLight\": \"#fbbf24\",\n    \"primary\": \"#f59e0b\",\n    \"primaryDark\": \"#d97706\",\n    \"secondaryLight\": \"#c4b5fd\",\n    \"secondary\": \"#8b5cf6\",\n    \"secondaryDark\": \"#5b21b6\",\n    \"tertiaryLight\": \"#86efac\",\n    \"tertiary\": \"#22c55e\",\n    \"tertiaryDark\": \"#15803d\",\n    \"grayLight\": \"#f3f4f6\",\n    \"gray\": \"#9ca3af\",\n    \"grayDark\": \"#374151\",\n    \"success\": \"#10b981\",\n    \"error\": \"#f43f5e\",\n    \"warning\": \"#f59e0b\",\n    \"info\": \"#3b82f6\",\n    \"dark\": \"#000000\",\n    \"light\": \"#ffffff\"\n  },\n  \"dark\": {\n    \"primaryLight\": \"#fed7aa\",\n    \"primary\": \"#fb923c\",\n    \"primaryDark\": \"#ea580c\",\n    \"secondaryLight\": \"#ddd6fe\",\n    \"secondary\": \"#a78bfa\",\n    \"secondaryDark\": \"#7c3aed\",\n    \"tertiaryLight\": \"#6ee7b7\",\n    \"tertiary\": \"#10b981\",\n    \"tertiaryDark\": \"#065f46\",\n    \"grayLight\": \"#1f2937\",\n    \"gray\": \"#6b7280\",\n    \"grayDark\": \"#9ca3af\",\n    \"success\": \"#10b981\",\n    \"error\": \"#f43f5e\",\n    \"warning\": \"#f59e0b\",\n    \"info\": \"#3b82f6\",\n    \"dark\": \"#ffffff\",\n    \"light\": \"#000000\"\n  }\n}\n```\n\n<DemoTheme variant=\"yellow\" />";

package/dist/templates/mdx/theme.mdx.js

@@ -16,7 +16,7 @@ Place a \`theme.json\` at your project root (the same folder where you execute \
 {
   "default": {
     "primaryLight": "#93c5fd",
-    "primary": "#3b82f6",
+    "primary": "#2563eb",
     "primaryDark": "#1e40af",
     "secondaryLight": "#c4b5fd",
     "secondary": "#8b5cf6",