doccupine 0.0.63 → 0.0.65

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

@@ -140,7 +140,7 @@ const Body = styled.div<{ theme: Theme }>\`
   text-align: left;
   overflow-x: auto;
   overflow-y: auto;
-  max-height: calc(100svh - 400px);
+  max-height: calc(100dvh - 400px);
   \${({ theme }) => styledCode(theme)};
 
   /* Dark mode syntax highlighting (GitHub Dark) */

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

@@ -1 +1 @@
-export declare const columnsTemplate = "\"use client\";\nimport styled from \"styled-components\";\nimport { mq, Theme } from \"cherry-styled-components\";\n\nconst StyledColumns = styled.div<{ theme: Theme; $columns?: number }>`\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n\n  ${mq(\"lg\")} {\n    display: grid;\n    grid-template-columns: repeat(${({ $columns }) => $columns ?? 1}, 1fr);\n  }\n`;\n\nexport interface ColumnsProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  cols?: number;\n}\n\nfunction Columns({ children, cols }: ColumnsProps) {\n  return <StyledColumns $columns={cols}>{children}</StyledColumns>;\n}\n\nexport { Columns };\n";
+export declare const columnsTemplate = "\"use client\";\nimport styled from \"styled-components\";\nimport { mq, Theme } from \"cherry-styled-components\";\n\nconst StyledColumns = styled.div<{ theme: Theme; $columns?: number }>`\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n\n  ${mq(\"lg\")} {\n    display: grid;\n    grid-template-columns: repeat(${({ $columns }) => $columns ?? 1}, 1fr);\n  }\n`;\n\ninterface ColumnsProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  cols?: number;\n}\n\nfunction Columns({ children, cols }: ColumnsProps) {\n  return <StyledColumns $columns={cols}>{children}</StyledColumns>;\n}\n\nexport { Columns };\n";

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

@@ -13,7 +13,7 @@ const StyledColumns = styled.div<{ theme: Theme; $columns?: number }>\`
   }
 \`;
 
-export interface ColumnsProps extends React.HTMLAttributes<HTMLDivElement> {
+interface ColumnsProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
   cols?: number;
 }

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: 20px 20px 100px 20px;\n  width: 100%;\n  ${({ theme }) => styledText(theme)};\n  transition: all 0.3s ease;\n\n  ${mq(\"lg\")} {\n    padding: 20px 340px 80px 340px;\n\n    ${({ $isChatOpen }) =>\n      $isChatOpen &&\n      css`\n        padding: 20px 440px 80px 340px;\n      `}\n  }\n\n  & p {\n    color: ${({ theme }) => theme.colors.grayDark};\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    100svh - ${({ $hasSectionBar }) => ($hasSectionBar ? 105 : 63)}px\n  );\n  width: 100%;\n  z-index: 99;\n  top: ${({ $hasSectionBar }) => ($hasSectionBar ? 105 : 63)}px;\n  height: 100%;\n  padding: 20px 20px 80px 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  border-right: solid 1px ${({ theme }) => theme.colors.grayLight};\n  -webkit-overflow-scrolling: touch;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  ${mq(\"lg\")} {\n    transition: none;\n    max-height: calc(100svh - 62px);\n    width: 220px;\n    background: transparent;\n    padding: 25px 40px 40px;\n    opacity: 1;\n    pointer-events: all;\n    transform: translateY(0);\n    background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.05)};\n    top: 62px;\n    width: 320px;\n  }\n\n  ${({ $isActive }) =>\n    $isActive &&\n    css`\n      transform: translateY(0);\n      opacity: 1;\n      pointer-events: all;\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: 61px;\n  right: 0;\n  width: 320px;\n  height: calc(100vh - 61px);\n  overflow-y: auto;\n  z-index: 1;\n  padding: 27px 40px 40px;\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 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\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 }) =>\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: 20px;\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\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.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 20px 80px 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\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 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\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 }) =>\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: 20px;\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\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

@@ -1,3 +1,4 @@
+import { SIDEBAR_WIDTH, CHAT_WIDTH } from "../../app/theme.js";
 export const docsComponentsTemplate = `"use client";
 import { darken, lighten, rgba } from "polished";
 import React, { createContext, useContext } from "react";
@@ -47,23 +48,24 @@ const StyledDocsSidebar = styled.div<{ theme: Theme }>\`
 
 const StyledDocsContainer = styled.div<{ theme: Theme; $isChatOpen?: boolean }>\`
   position: relative;
-  padding: 20px 20px 100px 20px;
+  padding: 0 20px 100px 20px;
   width: 100%;
   \${({ theme }) => styledText(theme)};
   transition: all 0.3s ease;
 
   \${mq("lg")} {
-    padding: 20px 340px 80px 340px;
+    padding: 0 ${SIDEBAR_WIDTH + 20}px 80px ${SIDEBAR_WIDTH + 20}px;
 
     \${({ $isChatOpen }) =>
       $isChatOpen &&
       css\`
-        padding: 20px 440px 80px 340px;
+        padding: 0 ${CHAT_WIDTH + 20}px 80px ${SIDEBAR_WIDTH + 20}px;
       \`}
   }
 
   & p {
     color: \${({ theme }) => theme.colors.grayDark};
+    hyphens: auto;
   }
 
   & pre {
@@ -119,11 +121,11 @@ export const StyledSidebar = styled.nav<Props>\`
   position: fixed;
   overflow-y: auto;
   max-height: calc(
-    100svh - \${({ $hasSectionBar }) => ($hasSectionBar ? 105 : 63)}px
+    100dvh - \${({ $hasSectionBar }) => ($hasSectionBar ? 104 : 62)}px
   );
   width: 100%;
   z-index: 99;
-  top: \${({ $hasSectionBar }) => ($hasSectionBar ? 105 : 63)}px;
+  top: \${({ $hasSectionBar }) => ($hasSectionBar ? 104 : 62)}px;
   height: 100%;
   padding: 20px 20px 80px 20px;
   opacity: 0;
@@ -132,7 +134,6 @@ export const StyledSidebar = styled.nav<Props>\`
   transform: translateY(30px);
   left: 0;
   background: \${({ theme }) => theme.colors.light};
-  border-right: solid 1px \${({ theme }) => theme.colors.grayLight};
   -webkit-overflow-scrolling: touch;
 
   &::-webkit-scrollbar {
@@ -140,17 +141,18 @@ export const StyledSidebar = styled.nav<Props>\`
   }
 
   \${mq("lg")} {
+    border-right: solid 1px \${({ theme }) => theme.colors.grayLight};
     transition: none;
-    max-height: calc(100svh - 62px);
+    max-height: 100dvh;
     width: 220px;
     background: transparent;
-    padding: 25px 40px 40px;
+    padding: 82px 20px 20px 20px;
     opacity: 1;
     pointer-events: all;
     transform: translateY(0);
     background: \${({ theme }) => rgba(theme.colors.primaryLight, 0.05)};
-    top: 62px;
-    width: 320px;
+    top: 0;
+    width: ${SIDEBAR_WIDTH}px;
   }
 
   \${({ $isActive }) =>
@@ -168,13 +170,13 @@ export const StyledIndexSidebar = styled.ul<{ theme: Theme }>\`
   margin: 0;
   padding: 0;
   position: fixed;
-  top: 61px;
+  top: 0;
   right: 0;
-  width: 320px;
-  height: calc(100vh - 61px);
+  width: 280px;
+  height: 100dvh;
   overflow-y: auto;
   z-index: 1;
-  padding: 27px 40px 40px;
+  padding: 82px 20px 20px 20px;
   background: \${({ theme }) => theme.colors.light};
   border-left: solid 1px \${({ theme }) => theme.colors.grayLight};
   -webkit-overflow-scrolling: touch;
@@ -197,6 +199,30 @@ export const StyledIndexSidebarLabel = styled.span<{ theme: Theme }>\`
   color: \${({ theme }) => theme.colors.grayDark};
 \`;
 
+export const StyledIndexSidebarLi = styled.li<{
+  theme: Theme;
+  $isActive: boolean;
+}>\`
+  &::before {
+    content: "";
+    display: block;
+    position: absolute;
+    left: 0;
+    height: 20px;
+    width: 1px;
+    background: transparent;
+    transition: all 0.3s ease;
+  }
+
+  \${({ $isActive, theme }) =>
+    $isActive &&
+    css\`
+      &::before {
+        background: \${theme.colors.primary};
+      }
+    \`}
+\`;
+
 export const StyledIndexSidebarLink = styled.a<{
   theme: Theme;
   $isActive: boolean;

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 340px 80px 340px;\n    ${({ $isChatOpen }) =>\n      $isChatOpen &&\n      css`\n        padding: 0 440px 80px 340px;\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.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";

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

@@ -1,3 +1,4 @@
+import { SIDEBAR_WIDTH, CHAT_WIDTH } from "../../app/theme.js";
 export const docsNavigationTemplate = `"use client";
 import { useContext } from "react";
 import { usePathname } from "next/navigation";
@@ -14,11 +15,11 @@ const StyledNavigationWrapper = styled.div<{
   transition: all 0.3s ease;
   padding: 0 20px 100px 20px;
   \${mq("lg")} {
-    padding: 0 340px 80px 340px;
+    padding: 0 ${SIDEBAR_WIDTH + 20}px 80px ${SIDEBAR_WIDTH + 20}px;
     \${({ $isChatOpen }) =>
       $isChatOpen &&
       css\`
-        padding: 0 440px 80px 340px;
+        padding: 0 ${CHAT_WIDTH + 20}px 80px ${SIDEBAR_WIDTH + 20}px;
       \`}
   }
 \`;

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

@@ -1 +1 @@
-export declare const fieldTemplate = "\"use client\";\nimport styled from \"styled-components\";\nimport { styledSmall, Theme } from \"cherry-styled-components\";\nimport { rgba } from \"polished\";\n\nconst StyledField = styled.div<{ theme: Theme; $columns?: number }>`\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n  padding: 0 0 20px 0;\n`;\n\nconst StyledFieldFlex = styled.div<{ theme: Theme }>`\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n  ${({ theme }) => styledSmall(theme)};\n  padding: 0 0 15px 0;\n`;\n\nconst StyledFieldValue = styled.span<{ theme: Theme }>`\n  color: ${({ theme }) => theme.colors.primary};\n  font-family: ${({ theme }) => theme.fonts.mono};\n  font-weight: 600;\n`;\n\nconst StyledFieldType = styled.span<{ theme: Theme }>`\n  background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.2)};\n  color: ${({ theme }) => theme.colors.dark};\n  padding: 0 4px;\n  font-family: ${({ theme }) => theme.fonts.mono};\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n`;\n\nconst StyledFieldRequired = styled.span<{ theme: Theme }>`\n  background: ${({ theme }) => rgba(theme.colors.error, 0.2)};\n  color: ${({ theme }) => theme.colors.error};\n  padding: 0 4px;\n  font-family: ${({ theme }) => theme.fonts.mono};\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n`;\n\nexport interface FieldProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  value: string;\n  type: string;\n  required?: boolean;\n}\n\nfunction Field({ children, value, type, required }: FieldProps) {\n  return (\n    <StyledField>\n      <StyledFieldFlex>\n        <StyledFieldValue>{value}</StyledFieldValue>\n        <StyledFieldType>{type}</StyledFieldType>\n        {required && <StyledFieldRequired>required</StyledFieldRequired>}\n      </StyledFieldFlex>\n      {children}\n    </StyledField>\n  );\n}\n\nexport { Field };\n";
+export declare const fieldTemplate = "\"use client\";\nimport styled from \"styled-components\";\nimport { styledSmall, Theme } from \"cherry-styled-components\";\nimport { rgba } from \"polished\";\n\nconst StyledField = styled.div<{ theme: Theme; $columns?: number }>`\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n  padding: 0 0 20px 0;\n`;\n\nconst StyledFieldFlex = styled.div<{ theme: Theme }>`\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n  ${({ theme }) => styledSmall(theme)};\n  padding: 0 0 15px 0;\n`;\n\nconst StyledFieldValue = styled.span<{ theme: Theme }>`\n  color: ${({ theme }) => theme.colors.primary};\n  font-family: ${({ theme }) => theme.fonts.mono};\n  font-weight: 600;\n`;\n\nconst StyledFieldType = styled.span<{ theme: Theme }>`\n  background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.2)};\n  color: ${({ theme }) => theme.colors.dark};\n  padding: 0 4px;\n  font-family: ${({ theme }) => theme.fonts.mono};\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n`;\n\nconst StyledFieldRequired = styled.span<{ theme: Theme }>`\n  background: ${({ theme }) => rgba(theme.colors.error, 0.2)};\n  color: ${({ theme }) => theme.colors.error};\n  padding: 0 4px;\n  font-family: ${({ theme }) => theme.fonts.mono};\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n`;\n\ninterface FieldProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  value: string;\n  type: string;\n  required?: boolean;\n}\n\nfunction Field({ children, value, type, required }: FieldProps) {\n  return (\n    <StyledField>\n      <StyledFieldFlex>\n        <StyledFieldValue>{value}</StyledFieldValue>\n        <StyledFieldType>{type}</StyledFieldType>\n        {required && <StyledFieldRequired>required</StyledFieldRequired>}\n      </StyledFieldFlex>\n      {children}\n    </StyledField>\n  );\n}\n\nexport { Field };\n";

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

@@ -38,7 +38,7 @@ const StyledFieldRequired = styled.span<{ theme: Theme }>\`
   border-radius: \${({ theme }) => theme.spacing.radius.xs};
 \`;
 
-export interface FieldProps extends React.HTMLAttributes<HTMLDivElement> {
+interface FieldProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
   value: string;
   type: string;

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\";\n\nconst StyledFooter = styled.footer<{ theme: Theme; $isChatOpen?: boolean }>`\n  padding: 20px;\n  transition: all 0.3s ease;\n\n  ${mq(\"lg\")} {\n    padding: 0 340px 0 340px;\n    ${({ $isChatOpen }) =>\n      $isChatOpen &&\n      css`\n        padding: 0 440px 0 340px;\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: 33px 0 90px 0;\n  color: ${({ theme }) => theme.colors.gray};\n  ${({ theme }) => styledSmall(theme)};\n\n  ${mq(\"lg\")} {\n    padding: 32px 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\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: space-between;\n  align-items: center;\n`;\n\nfunction Footer({ hideBranding }: { hideBranding?: boolean }) {\n  const { isOpen } = useContext(ChatContext);\n\n  if (hideBranding) return <Space $xs={70} $lg=\"none\" />;\n\n  return (\n    <StyledFooter $isChatOpen={isOpen}>\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 20px 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: 33px 0 90px 0;\n  color: ${({ theme }) => theme.colors.gray};\n  ${({ theme }) => styledSmall(theme)};\n\n  ${mq(\"lg\")} {\n    padding: 32px 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\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: space-between;\n  align-items: center;\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";

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

@@ -1,3 +1,4 @@
+import { SIDEBAR_WIDTH, CHAT_WIDTH } from "../../app/theme.js";
 export const footerTemplate = `"use client";
 import { useContext } from "react";
 import styled, { css } from "styled-components";
@@ -5,17 +6,38 @@ import { Space, styledSmall } from "cherry-styled-components";
 import { ChatContext } from "@/components/Chat";
 import { mq, Theme } from "@/app/theme";
 import { GitHubLogo } from "@/components/layout/Pictograms";
+import linksData from "@/links.json";
 
-const StyledFooter = styled.footer<{ theme: Theme; $isChatOpen?: boolean }>\`
-  padding: 20px;
+interface LinkProps {
+  title: string;
+  url: string;
+  icon?: string;
+}
+
+const links = linksData as LinkProps[];
+
+const StyledFooter = styled.footer<{
+  theme: Theme;
+  $isChatOpen?: boolean;
+  $hasLinks?: boolean;
+}>\`
+  padding: 0 20px 20px 20px;
   transition: all 0.3s ease;
 
+  \${({ $hasLinks }) =>
+    $hasLinks &&
+    css\`
+      margin-top: 20px;
+    \`}
+
   \${mq("lg")} {
-    padding: 0 340px 0 340px;
+    margin: 0;
+    padding: 0 ${SIDEBAR_WIDTH + 20}px 0 ${SIDEBAR_WIDTH + 20}px;
+
     \${({ $isChatOpen }) =>
       $isChatOpen &&
       css\`
-        padding: 0 440px 0 340px;
+        padding: 0 ${CHAT_WIDTH + 20}px 0 ${SIDEBAR_WIDTH + 20}px;
       \`}
   }
 \`;
@@ -58,10 +80,10 @@ const StyledFooterFlex = styled.div\`
 function Footer({ hideBranding }: { hideBranding?: boolean }) {
   const { isOpen } = useContext(ChatContext);
 
-  if (hideBranding) return <Space $xs={70} $lg="none" />;
+  if (hideBranding) return <Space $xs={80} $lg="none" />;
 
   return (
-    <StyledFooter $isChatOpen={isOpen}>
+    <StyledFooter $isChatOpen={isOpen} $hasLinks={links.length > 0}>
       <StyledFooterInner>
         <StyledFooterFlex>
           <span>

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

@@ -1 +1 @@
-export declare const headerTemplate = "\"use client\";\nimport React from \"react\";\nimport { useCallback, useRef, useState, Suspense } from \"react\";\nimport styled, { css, useTheme } from \"styled-components\";\nimport Link from \"next/link\";\nimport { rgba } from \"polished\";\nimport { mq, Theme } from \"@/app/theme\";\nimport {\n  ToggleTheme,\n  ToggleThemeLoading,\n} from \"@/components/layout/ThemeToggle\";\nimport { useOnClickOutside } from \"@/components/ClickOutside\";\nimport { Logo } from \"@/components/layout/Pictograms\";\nimport themeJson from \"@/theme.json\";\n\nconst customThemeJson = themeJson as typeof themeJson & {\n  logo?: { dark: string; light: string };\n};\n\nconst StyledHeader = styled.header<{ theme: Theme; $hasChildren: boolean }>`\n  position: sticky;\n  top: 0;\n  margin: 0;\n  z-index: 1000;\n  width: 100%;\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n\n  ${({ $hasChildren }) =>\n    !$hasChildren &&\n    css`\n      ${mq(\"lg\")} {\n        padding-bottom: 16px;\n        padding-top: 16px;\n      }\n    `}\n\n  &::before,\n  &::after {\n    display: block;\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n    background: ${({ theme }) => theme.colors.light};\n    z-index: -2;\n  }\n\n  &::after {\n    background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.05)};\n    z-index: -1;\n  }\n\n  & .logo {\n    display: flex;\n\n    & svg,\n    & img {\n      margin: auto;\n      height: auto;\n      width: fit-content;\n      min-width: fit-content;\n      max-width: 182px;\n      max-height: 30px;\n\n      & path[fill] {\n        fill: ${({ theme }) => theme.colors.primary};\n      }\n    }\n  }\n`;\n\nconst StyledHeaderInner = styled.div<{ $hasChildren: boolean }>`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  padding: 16px 0 0 20px;\n\n  ${({ $hasChildren }) =>\n    !$hasChildren &&\n    css`\n      padding-bottom: 16px;\n    `}\n\n  ${mq(\"lg\")} {\n    flex-wrap: nowrap;\n    padding: 0 20px;\n  }\n`;\n\nconst StyledThemeWrapper = styled.div`\n  display: block;\n  min-width: fit-content;\n  padding-right: 20px;\n\n  ${mq(\"lg\")} {\n    padding-right: 0;\n  }\n`;\n\ninterface HeaderProps {\n  children?: React.ReactNode;\n}\n\nfunction Header({ children }: HeaderProps) {\n  const [isOptionActive, setIsOptionActive] = useState(false);\n  const [isLangActive, setIsLangActive] = useState(false);\n\n  const wrapperRef = useRef<HTMLSpanElement>(null);\n  const elmRef = useRef<HTMLDivElement>(null);\n  const langRef = useRef<HTMLSpanElement>(null);\n  const closeMenu = useCallback(() => {\n    setIsOptionActive(false);\n    setIsLangActive(false);\n  }, []);\n\n  useOnClickOutside(\n    [elmRef, wrapperRef],\n    isOptionActive ? closeMenu : () => {},\n  );\n  useOnClickOutside([langRef, wrapperRef], isLangActive ? closeMenu : () => {});\n  const theme = useTheme() as Theme;\n\n  return (\n    <StyledHeader $hasChildren={children ? true : false} id=\"header\">\n      <StyledHeaderInner $hasChildren={children ? true : false}>\n        <Link href=\"/\" className=\"logo\" aria-label=\"Logo\">\n          {customThemeJson.logo ? (\n            theme.isDark ? (\n              // eslint-disable-next-line @next/next/no-img-element\n              <img\n                src={customThemeJson.logo.dark}\n                alt=\"Logo\"\n                width=\"100\"\n                height=\"100\"\n              />\n            ) : (\n              // eslint-disable-next-line @next/next/no-img-element\n              <img\n                src={customThemeJson.logo.light}\n                alt=\"Logo\"\n                width=\"100\"\n                height=\"100\"\n              />\n            )\n          ) : (\n            <Logo />\n          )}\n        </Link>\n        {children}\n        <StyledThemeWrapper>\n          <Suspense fallback={<ToggleThemeLoading />}>\n            <ToggleTheme />\n          </Suspense>\n        </StyledThemeWrapper>\n      </StyledHeaderInner>\n    </StyledHeader>\n  );\n}\n\nexport { Header };\n";
+export declare const headerTemplate = "\"use client\";\nimport React from \"react\";\nimport { useCallback, useContext, useRef, useState } from \"react\";\nimport styled, { css, useTheme } from \"styled-components\";\nimport Link from \"next/link\";\nimport { rgba } from \"polished\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { useOnClickOutside } from \"@/components/ClickOutside\";\nimport { Logo } from \"@/components/layout/Pictograms\";\nimport { ChatContext, ChatButtonCTA } from \"@/components/Chat\";\nimport themeJson from \"@/theme.json\";\n\nconst customThemeJson = themeJson as typeof themeJson & {\n  logo?: { dark: string; light: string };\n};\n\nconst StyledHeader = styled.header<{ theme: Theme; $hasChildren: boolean }>`\n  position: sticky;\n  top: 0;\n  margin: 0;\n  z-index: 1000;\n  width: 100%;\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n\n  ${({ $hasChildren }) =>\n    !$hasChildren &&\n    css`\n      ${mq(\"lg\")} {\n        padding-bottom: 16px;\n        padding-top: 16px;\n      }\n    `}\n\n  &::before,\n  &::after {\n    display: block;\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n    background: ${({ theme }) => theme.colors.light};\n    z-index: -2;\n  }\n\n  &::after {\n    background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.05)};\n    z-index: -1;\n  }\n\n  & .logo {\n    display: flex;\n\n    & svg,\n    & img {\n      margin: auto;\n      height: auto;\n      width: fit-content;\n      min-width: fit-content;\n      max-width: 182px;\n      max-height: 30px;\n\n      & path[fill] {\n        fill: ${({ theme }) => theme.colors.primary};\n      }\n    }\n  }\n`;\n\nconst StyledHeaderInner = styled.div<{ $hasChildren: boolean }>`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  padding: 16px 0 0 20px;\n\n  ${({ $hasChildren }) =>\n    !$hasChildren &&\n    css`\n      padding-bottom: 16px;\n    `}\n\n  ${mq(\"lg\")} {\n    flex-wrap: nowrap;\n    padding: 0 20px;\n  }\n`;\n\nconst StyledLeftWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: fit-content;\n  padding-right: 20px;\n\n  ${mq(\"lg\")} {\n    padding-right: 0;\n  }\n`;\n\ninterface HeaderProps {\n  children?: React.ReactNode;\n}\n\nfunction Header({ children }: HeaderProps) {\n  const [isOptionActive, setIsOptionActive] = useState(false);\n  const [isLangActive, setIsLangActive] = useState(false);\n\n  const wrapperRef = useRef<HTMLSpanElement>(null);\n  const elmRef = useRef<HTMLDivElement>(null);\n  const langRef = useRef<HTMLSpanElement>(null);\n  const closeMenu = useCallback(() => {\n    setIsOptionActive(false);\n    setIsLangActive(false);\n  }, []);\n\n  useOnClickOutside(\n    [elmRef, wrapperRef],\n    isOptionActive ? closeMenu : () => {},\n  );\n  useOnClickOutside([langRef, wrapperRef], isLangActive ? closeMenu : () => {});\n  const theme = useTheme() as Theme;\n  const { isChatActive } = useContext(ChatContext);\n\n  return (\n    <StyledHeader $hasChildren={children ? true : false} id=\"header\">\n      <StyledHeaderInner $hasChildren={children ? true : false}>\n        <Link href=\"/\" className=\"logo\" aria-label=\"Logo\">\n          {customThemeJson.logo ? (\n            theme.isDark ? (\n              // eslint-disable-next-line @next/next/no-img-element\n              <img\n                src={customThemeJson.logo.dark}\n                alt=\"Logo\"\n                width=\"100\"\n                height=\"100\"\n              />\n            ) : (\n              // eslint-disable-next-line @next/next/no-img-element\n              <img\n                src={customThemeJson.logo.light}\n                alt=\"Logo\"\n                width=\"100\"\n                height=\"100\"\n              />\n            )\n          ) : (\n            <Logo />\n          )}\n        </Link>\n        {children}\n        <StyledLeftWrapper>\n          {isChatActive && <ChatButtonCTA />}\n        </StyledLeftWrapper>\n      </StyledHeaderInner>\n    </StyledHeader>\n  );\n}\n\nexport { Header };\n";

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

@@ -1,16 +1,13 @@
 export const headerTemplate = `"use client";
 import React from "react";
-import { useCallback, useRef, useState, Suspense } from "react";
+import { useCallback, useContext, useRef, useState } from "react";
 import styled, { css, useTheme } from "styled-components";
 import Link from "next/link";
 import { rgba } from "polished";
 import { mq, Theme } from "@/app/theme";
-import {
-  ToggleTheme,
-  ToggleThemeLoading,
-} from "@/components/layout/ThemeToggle";
 import { useOnClickOutside } from "@/components/ClickOutside";
 import { Logo } from "@/components/layout/Pictograms";
+import { ChatContext, ChatButtonCTA } from "@/components/Chat";
 import themeJson from "@/theme.json";
 
 const customThemeJson = themeJson as typeof themeJson & {
@@ -91,8 +88,10 @@ const StyledHeaderInner = styled.div<{ $hasChildren: boolean }>\`
   }
 \`;
 
-const StyledThemeWrapper = styled.div\`
-  display: block;
+const StyledLeftWrapper = styled.div\`
+  display: flex;
+  align-items: center;
+  gap: 8px;
   min-width: fit-content;
   padding-right: 20px;
 
@@ -123,6 +122,7 @@ function Header({ children }: HeaderProps) {
   );
   useOnClickOutside([langRef, wrapperRef], isLangActive ? closeMenu : () => {});
   const theme = useTheme() as Theme;
+  const { isChatActive } = useContext(ChatContext);
 
   return (
     <StyledHeader $hasChildren={children ? true : false} id="header">
@@ -151,11 +151,9 @@ function Header({ children }: HeaderProps) {
           )}
         </Link>
         {children}
-        <StyledThemeWrapper>
-          <Suspense fallback={<ToggleThemeLoading />}>
-            <ToggleTheme />
-          </Suspense>
-        </StyledThemeWrapper>
+        <StyledLeftWrapper>
+          {isChatActive && <ChatButtonCTA />}
+        </StyledLeftWrapper>
       </StyledHeaderInner>
     </StyledHeader>
   );

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 { 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]) {\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 {\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 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";
+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]) {\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 {\n    margin: 0;\n    padding: 0;\n    border-collapse: collapse;\n    width: 100%;\n    text-align: left;\n    display: block;\n    overflow-x: auto;\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: transparent;\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";

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

@@ -1,6 +1,6 @@
 export const sharedStyledTemplate = `"use client";
 import { mq, styledSmall, styledText, Theme } from "cherry-styled-components";
-import { css } from "styled-components";
+import styled, { css } from "styled-components";
 
 export const interactiveStyles = css<{ theme: Theme }>\`
   transition: all 0.3s ease;
@@ -116,6 +116,8 @@ export const styledTable = css<{ theme: Theme }>\`
     border-collapse: collapse;
     width: 100%;
     text-align: left;
+    display: block;
+    overflow-x: auto;
 
     & tr {
       margin: 0;
@@ -124,7 +126,7 @@ export const styledTable = css<{ theme: Theme }>\`
 
     & th {
       border-bottom: solid 1px \${({ theme }) => theme.colors.grayLight};
-      padding: 10px 0;
+      padding: 10px 10px 10px 0;
       \${({ theme }) => styledSmall(theme)};
       font-weight: 600;
       color: \${({ theme }) => theme.colors.dark};
@@ -138,4 +140,26 @@ export const styledTable = css<{ theme: Theme }>\`
     }
   }
 \`;
+
+export const StyledSmallButton = styled.button<{ theme: Theme }>\`
+  \${interactiveStyles};
+  background: transparent;
+  border: solid 1px \${({ theme }) => theme.colors.grayLight};
+  color: \${({ theme }) => theme.colors.primary};
+  border-radius: \${({ theme }) => theme.spacing.radius.xs};
+  padding: 6px 8px;
+  font-size: 12px;
+  font-family: inherit;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-right: -6px;
+
+  & svg.lucide {
+    color: inherit;
+  }
+\`;
 `;

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 20px 20px;\n\n  ${mq(\"lg\")} {\n    padding: 0 340px 20px 340px;\n    ${({ $isChatOpen }) =>\n      $isChatOpen &&\n      css`\n        padding: 0 440px 20px 340px;\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  if (links.length === 0) {\n    return null;\n  }\n\n  const { isOpen } = useContext(ChatContext);\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.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  if (links.length === 0) {\n    return null;\n  }\n\n  const { isOpen } = useContext(ChatContext);\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

@@ -1,3 +1,4 @@
+import { SIDEBAR_WIDTH, CHAT_WIDTH } from "../../app/theme.js";
 export const staticLinksTemplate = `"use client";
 import styled, { css } from "styled-components";
 import { rgba } from "polished";
@@ -20,14 +21,17 @@ const StyledStaticLinks = styled.div<{ theme: Theme; $isChatOpen: boolean }>\`
   display: flex;
   margin: 0 auto;
   transition: all 0.3s ease;
-  padding: 0 20px 20px 20px;
+  padding: 0 20px;
+  margin-bottom: 20px;
 
   \${mq("lg")} {
-    padding: 0 340px 20px 340px;
+    margin: 0;
+    padding: 0 ${SIDEBAR_WIDTH + 20}px 20px ${SIDEBAR_WIDTH + 20}px;
+
     \${({ $isChatOpen }) =>
       $isChatOpen &&
       css\`
-        padding: 0 440px 20px 340px;
+        padding: 0 ${CHAT_WIDTH + 20}px 20px ${SIDEBAR_WIDTH + 20}px;
       \`}
   }
 \`;

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

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

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

@@ -59,6 +59,9 @@ const StyledStepTitle = styled.h3<{ theme: Theme }>\`
   padding: 2px 0 0 0;
   color: \${({ theme }) => theme.colors.dark};
   \${({ theme }) => styledText(theme)};
+  display: flex;
+  align-items: center;
+  gap: 10px;
 \`;
 
 const StepContent = styled.div<{ theme: Theme }>\`
@@ -100,8 +103,10 @@ function Steps({ children }: StepsProps) {
         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>
+            <StyledStepTitle theme={theme}>
+              {icon && <Icon name={icon} color={theme.colors.primary} />}
+              {title}
+            </StyledStepTitle>
             <StepContent theme={theme}>{stepContent}</StepContent>
           </StyledStep>
         );

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

@@ -1 +1 @@
-export declare const tabsTemplate = "\"use client\";\nimport { Theme } from \"@/app/theme\";\nimport { styledText } from \"cherry-styled-components\";\nimport { rgba } from \"polished\";\nimport React, { useState, ReactNode } from \"react\";\nimport styled, { css } from \"styled-components\";\nexport interface TabContentProps {\n  title: string;\n  children: ReactNode;\n}\nexport interface TabsProps {\n  children: React.ReactElement<TabContentProps>[];\n}\nconst TabsContainer = styled.div`\n  width: 100%;\n  margin: 0 auto;\n`;\nconst TabsList = styled.div<{ theme: Theme }>`\n  display: flex;\n  overflow: hidden;\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n  background-color: ${({ theme }) => theme.colors.light};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  overflow-x: auto;\n`;\nconst TabButton = styled.button<{ theme: Theme; $isActive?: boolean }>`\n  flex: 1;\n  padding: 12px 20px;\n  border: none;\n  background: ${({ theme }) => theme.colors.light};\n  cursor: pointer;\n  transition: all 0.2s ease;\n  border-bottom: 3px solid transparent;\n  min-width: fit-content;\n  ${({ theme }) => styledText(theme)};\n  color: ${({ theme }) => theme.colors.dark};\n  font-weight: 600;\n  ${({ theme, $isActive }) =>\n    $isActive &&\n    css`\n      color: ${theme.colors.primary};\n      border-bottom: 3px solid ${theme.colors.primary};\n    `}\n  position: relative;\n  &:hover {\n    ${({ theme, $isActive }) =>\n      !$isActive &&\n      css`\n        color: ${theme.colors.primary};\n        background-color: ${rgba(theme.colors.primaryLight, 0.1)};\n      `}\n  }\n  &:focus {\n    outline: none;\n  }\n  &:not(:last-child) {\n    border-right: 1px solid ${({ theme }) => theme.colors.grayLight};\n  }\n`;\nconst TabPanel = styled.div<{ theme: Theme }>`\n  background-color: ${({ theme }) => theme.colors.light};\n  padding: 20px;\n  border-radius: 0 0 ${({ theme }) => theme.spacing.radius.lg}\n    ${({ theme }) => theme.spacing.radius.lg};\n  color: ${({ theme }) => theme.colors.grayDark};\n  ${({ theme }) => styledText(theme)}\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  border-top: none;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  flex-wrap: wrap;\n  flex: 1;\n`;\nconst TabContent: React.FC<TabContentProps> = ({ children }) => {\n  return <>{children}</>;\n};\nconst Tabs: React.FC<TabsProps> = ({ children }) => {\n  const [activeTab, setActiveTab] = useState(0);\n  const tabs = React.Children.toArray(children).filter(\n    (child): child is React.ReactElement<TabContentProps> =>\n      Boolean(\n        React.isValidElement(child) &&\n        child.props &&\n        typeof child.props === \"object\" &&\n        \"title\" in child.props &&\n        typeof child.props.title === \"string\" &&\n        child.props.title.trim() !== \"\",\n      ),\n  );\n  return (\n    <TabsContainer>\n      <TabsList>\n        {tabs.map((tab, index) => (\n          <TabButton\n            key={index}\n            $isActive={activeTab === index}\n            onClick={() => setActiveTab(index)}\n            type=\"button\"\n          >\n            {tab.props.title}\n          </TabButton>\n        ))}\n      </TabsList>\n      <TabPanel>{tabs[activeTab]?.props.children}</TabPanel>\n    </TabsContainer>\n  );\n};\nexport { Tabs, TabContent };\n";
+export declare const tabsTemplate = "\"use client\";\nimport { Theme } from \"@/app/theme\";\nimport { styledText } from \"cherry-styled-components\";\nimport { rgba } from \"polished\";\nimport React, { useState, ReactNode } from \"react\";\nimport styled, { css } from \"styled-components\";\ninterface TabContentProps {\n  title: string;\n  children: ReactNode;\n}\ninterface TabsProps {\n  children: React.ReactElement<TabContentProps>[];\n}\nconst TabsContainer = styled.div`\n  width: 100%;\n  margin: 0 auto;\n`;\nconst TabsList = styled.div<{ theme: Theme }>`\n  display: flex;\n  overflow: hidden;\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n  background-color: ${({ theme }) => theme.colors.light};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  overflow-x: auto;\n`;\nconst TabButton = styled.button<{ theme: Theme; $isActive?: boolean }>`\n  flex: 1;\n  padding: 12px 20px;\n  border: none;\n  background: ${({ theme }) => theme.colors.light};\n  cursor: pointer;\n  transition: all 0.2s ease;\n  border-bottom: 3px solid transparent;\n  min-width: fit-content;\n  ${({ theme }) => styledText(theme)};\n  color: ${({ theme }) => theme.colors.dark};\n  font-weight: 600;\n  ${({ theme, $isActive }) =>\n    $isActive &&\n    css`\n      color: ${theme.colors.primary};\n      border-bottom: 3px solid ${theme.colors.primary};\n    `}\n  position: relative;\n  &:hover {\n    ${({ theme, $isActive }) =>\n      !$isActive &&\n      css`\n        color: ${theme.colors.primary};\n        background-color: ${rgba(theme.colors.primaryLight, 0.1)};\n      `}\n  }\n  &:focus {\n    outline: none;\n  }\n  &:not(:last-child) {\n    border-right: 1px solid ${({ theme }) => theme.colors.grayLight};\n  }\n`;\nconst TabPanel = styled.div<{ theme: Theme }>`\n  background-color: ${({ theme }) => theme.colors.light};\n  padding: 20px;\n  border-radius: 0 0 ${({ theme }) => theme.spacing.radius.lg}\n    ${({ theme }) => theme.spacing.radius.lg};\n  color: ${({ theme }) => theme.colors.grayDark};\n  ${({ theme }) => styledText(theme)}\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  border-top: none;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  flex-wrap: wrap;\n  flex: 1;\n`;\nconst TabContent: React.FC<TabContentProps> = ({ children }) => {\n  return <>{children}</>;\n};\nconst Tabs: React.FC<TabsProps> = ({ children }) => {\n  const [activeTab, setActiveTab] = useState(0);\n  const tabs = React.Children.toArray(children).filter(\n    (child): child is React.ReactElement<TabContentProps> =>\n      Boolean(\n        React.isValidElement(child) &&\n        child.props &&\n        typeof child.props === \"object\" &&\n        \"title\" in child.props &&\n        typeof child.props.title === \"string\" &&\n        child.props.title.trim() !== \"\",\n      ),\n  );\n  return (\n    <TabsContainer>\n      <TabsList>\n        {tabs.map((tab, index) => (\n          <TabButton\n            key={index}\n            $isActive={activeTab === index}\n            onClick={() => setActiveTab(index)}\n            type=\"button\"\n          >\n            {tab.props.title}\n          </TabButton>\n        ))}\n      </TabsList>\n      <TabPanel>{tabs[activeTab]?.props.children}</TabPanel>\n    </TabsContainer>\n  );\n};\nexport { Tabs, TabContent };\n";

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

@@ -4,11 +4,11 @@ import { styledText } from "cherry-styled-components";
 import { rgba } from "polished";
 import React, { useState, ReactNode } from "react";
 import styled, { css } from "styled-components";
-export interface TabContentProps {
+interface TabContentProps {
   title: string;
   children: ReactNode;
 }
-export interface TabsProps {
+interface TabsProps {
   children: React.ReactElement<TabContentProps>[];
 }
 const TabsContainer = styled.div\`

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

@@ -1 +1 @@
-export declare const updateTemplate = "\"use client\";\nimport styled from \"styled-components\";\nimport { mq, styledSmall, Theme } from \"cherry-styled-components\";\nimport { rgba } from \"polished\";\n\nconst StyledUpdate = styled.div<{ theme: Theme; $columns?: number }>`\n  position: relative;\n  display: flex;\n  gap: 20px;\n  flex-direction: column;\n\n  ${mq(\"lg\")} {\n    margin: 20px 0;\n    flex-direction: row;\n  }\n`;\n\nconst StyledUpdateLabel = styled.span<{ theme: Theme }>`\n  background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.2)};\n  color: ${({ theme }) => theme.colors.primary};\n  padding: 2px 4px;\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  font-weight: 600;\n  ${({ theme }) => styledSmall(theme)};\n`;\n\nconst StyledUpdateDescription = styled.div<{ theme: Theme }>`\n  ${({ theme }) => styledSmall(theme)};\n  color: ${({ theme }) => theme.colors.gray};\n`;\n\nconst StyledUpdateSidebar = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n\n  ${mq(\"lg\")} {\n    min-width: 160px;\n  }\n`;\n\nconst StyledUpdateChildren = styled.div`\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n`;\n\nexport interface UpdateProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  label: string;\n  description: string;\n}\n\nfunction Update({ children, label, description }: UpdateProps) {\n  return (\n    <StyledUpdate>\n      <StyledUpdateSidebar>\n        <div>\n          <StyledUpdateLabel>{label}</StyledUpdateLabel>\n        </div>\n        <StyledUpdateDescription>{description}</StyledUpdateDescription>\n      </StyledUpdateSidebar>\n      <StyledUpdateChildren>{children}</StyledUpdateChildren>\n    </StyledUpdate>\n  );\n}\n\nexport { Update };\n";
+export declare const updateTemplate = "\"use client\";\nimport styled from \"styled-components\";\nimport { mq, styledSmall, Theme } from \"cherry-styled-components\";\nimport { rgba } from \"polished\";\n\nconst StyledUpdate = styled.div<{ theme: Theme; $columns?: number }>`\n  position: relative;\n  display: flex;\n  gap: 20px;\n  flex-direction: column;\n\n  ${mq(\"lg\")} {\n    margin: 20px 0;\n    flex-direction: row;\n  }\n`;\n\nconst StyledUpdateLabel = styled.span<{ theme: Theme }>`\n  background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.2)};\n  color: ${({ theme }) => theme.colors.primary};\n  padding: 2px 4px;\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  font-weight: 600;\n  ${({ theme }) => styledSmall(theme)};\n`;\n\nconst StyledUpdateDescription = styled.div<{ theme: Theme }>`\n  ${({ theme }) => styledSmall(theme)};\n  color: ${({ theme }) => theme.colors.gray};\n`;\n\nconst StyledUpdateSidebar = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n\n  ${mq(\"lg\")} {\n    min-width: 160px;\n  }\n`;\n\nconst StyledUpdateChildren = styled.div`\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n`;\n\ninterface UpdateProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  label: string;\n  description: string;\n}\n\nfunction Update({ children, label, description }: UpdateProps) {\n  return (\n    <StyledUpdate>\n      <StyledUpdateSidebar>\n        <div>\n          <StyledUpdateLabel>{label}</StyledUpdateLabel>\n        </div>\n        <StyledUpdateDescription>{description}</StyledUpdateDescription>\n      </StyledUpdateSidebar>\n      <StyledUpdateChildren>{children}</StyledUpdateChildren>\n    </StyledUpdate>\n  );\n}\n\nexport { Update };\n";