doccupine 0.0.37 → 0.0.39

package/dist/index.js

@@ -767,7 +767,7 @@ ${indexMDX
             ? `export const metadata: Metadata = {
   title: \`\${config.name ? config.name + " -" : "Doccupine -"} ${indexMDX.title}\`,
   description: \`${indexMDX.description ? indexMDX.description : '${config.description ? config.description : "Generated with Doccupine"}'}\`,
-  icons: \`${indexMDX.icon ? indexMDX.icon : "\${config.icon || 'https://doccupine.com/favicon.ico'}"}\`,
+  icons: \`${indexMDX.icon ? indexMDX.icon : '\${config.icon || "https://doccupine.com/favicon.ico"}'}\`,
   openGraph: {
     title: \`\${config.name ? config.name + " -" : "Doccupine -"} ${indexMDX.title}\`,
     description: \`${indexMDX.description ? indexMDX.description : '${config.description ? config.description : "Generated with Doccupine"}'}\`,

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

@@ -1 +1 @@
-export declare const themeTemplate = "\"use client\";\nimport customThemeJson from \"@/theme.json\";\n\ninterface CustomTheme {\n  default?: Partial<Colors>;\n  dark?: Partial<Colors>;\n}\n\nconst customTheme = customThemeJson as CustomTheme;\n\nexport const breakpoints: Breakpoints = {\n  xs: 0,\n  sm: 576,\n  md: 768,\n  lg: 992,\n  xl: 1200,\n  xxl: 1440,\n  xxxl: 1920,\n};\n\nexport function mq(minWidth: keyof Breakpoints) {\n  return `@media screen and (min-width: ${breakpoints[minWidth]}px)`;\n}\n\nexport const spacing: Spacing = {\n  maxWidth: { xs: \"1280px\", xxxl: \"1440px\" },\n  padding: { xs: \"20px\", lg: \"40px\" },\n  radius: { xs: \"6px\", lg: \"12px\", xl: \"30px\" },\n  gridGap: { xs: \"20px\", lg: \"40px\" },\n};\n\nexport const colors: Colors = {\n  primaryLight: \"#d1d5db\",\n  primary: \"#6b7280\",\n  primaryDark: \"#374151\",\n  secondaryLight: \"#c4b5fd\",\n  secondary: \"#8b5cf6\",\n  secondaryDark: \"#5b21b6\",\n  tertiaryLight: \"#86efac\",\n  tertiary: \"#22c55e\",\n  tertiaryDark: \"#15803d\",\n  grayLight: \"#e5e7eb\",\n  gray: \"#9ca3af\",\n  grayDark: \"#4b5563\",\n  success: \"#84cc16\",\n  error: \"#ef4444\",\n  warning: \"#eab308\",\n  info: \"#06b6d4\",\n  dark: \"#000000\",\n  light: \"#ffffff\",\n  ...(customTheme.default ? (customTheme.default as Partial<Colors>) : {}),\n};\n\nexport const colorsDark: Colors = {\n  primaryLight: \"#9ca3af\",\n  primary: \"#6b7280\",\n  primaryDark: \"#374151\",\n  secondaryLight: \"#ddd6fe\",\n  secondary: \"#a78bfa\",\n  secondaryDark: \"#7c3aed\",\n  tertiaryLight: \"#6ee7b7\",\n  tertiary: \"#10b981\",\n  tertiaryDark: \"#065f46\",\n  grayLight: \"#1a1a1a\",\n  gray: \"#454444\",\n  grayDark: \"#808080\",\n  success: \"#84cc16\",\n  error: \"#ef4444\",\n  warning: \"#eab308\",\n  info: \"#06b6d4\",\n  dark: \"#ffffff\",\n  light: \"#000000\",\n  ...(customTheme.dark ? (customTheme.dark as Partial<Colors>) : {}),\n};\n\nexport const shadows: Shadows = {\n  xs: \"0px 4px 4px 0px rgba(18, 18, 18, 0.04), 0px 1px 3px 0px rgba(39, 41, 45, 0.02)\",\n  sm: \"0px 4px 4px 0px rgba(18, 18, 18, 0.08), 0px 1px 3px 0px rgba(39, 41, 45, 0.04)\",\n  md: \"0px 8px 8px 0px rgba(18, 18, 18, 0.16), 0px 2px 3px 0px rgba(39, 41, 45, 0.06)\",\n  lg: \"0px 16px 24px 0px rgba(18, 18, 18, 0.20), 0px 2px 3px 0px rgba(39, 41, 45, 0.08)\",\n  xl: \"0px 24px 32px 0px rgba(18, 18, 18, 0.24), 0px 2px 3px 0px rgba(39, 41, 45, 0.12)\",\n};\n\nexport const shadowsDark: Shadows = {\n  xs: \"0px 4px 4px 0px rgba(255, 255, 255, 0.04), 0px 1px 3px 0px rgba(255, 255, 255, 0.02)\",\n  sm: \"0px 4px 4px 0px rgba(255, 255, 255, 0.08), 0px 1px 3px 0px rgba(255, 255, 255, 0.04)\",\n  md: \"0px 8px 8px 0px rgba(255, 255, 255, 0.16), 0px 2px 3px 0px rgba(255, 255, 255, 0.06)\",\n  lg: \"0px 16px 24px 0px rgba(255, 255, 255, 0.20), 0px 2px 3px 0px rgba(255, 255, 255, 0.08)\",\n  xl: \"0px 24px 32px 0px rgba(255, 255, 255, 0.24), 0px 2px 3px 0px rgba(255, 255, 255, 0.12)\",\n};\n\nexport const fonts: Fonts = {\n  text: \"Inter\",\n  head: \"Inter\",\n  mono: \"Roboto Mono, monospace\",\n};\n\nexport const fontSizes: FontSizes = {\n  hero1: { xs: \"72px\", lg: \"128px\" },\n  hero2: { xs: \"60px\", lg: \"96px\" },\n  hero3: { xs: \"36px\", lg: \"72px\" },\n\n  h1: { xs: \"40px\", lg: \"60px\" },\n  h2: { xs: \"30px\", lg: \"36px\" },\n  h3: { xs: \"28px\", lg: \"30px\" },\n  h4: { xs: \"24px\", lg: \"26px\" },\n  h5: { xs: \"18px\", lg: \"20px\" },\n  h6: { xs: \"16px\", lg: \"18px\" },\n\n  text: { xs: \"14px\", lg: \"16px\" },\n  strong: { xs: \"14px\", lg: \"16px\" },\n  small: { xs: \"12px\", lg: \"14px\" },\n\n  blockquote: { xs: \"16px\", lg: \"18px\" },\n  code: { xs: \"14px\", lg: \"16px\" },\n\n  button: { xs: \"16px\", lg: \"16px\" },\n  buttonBig: { xs: \"18px\", lg: \"18px\" },\n\n  input: { xs: \"16px\", lg: \"16px\" },\n  inputBig: { xs: \"18px\", lg: \"18px\" },\n};\n\nexport const lineHeights: LineHeights = {\n  hero1: { xs: \"1.1\", lg: \"1.1\" },\n  hero2: { xs: \"1.1\", lg: \"1.1\" },\n  hero3: { xs: \"1.17\", lg: \"1.1\" },\n\n  h1: { xs: \"1\", lg: \"1.07\" },\n  h2: { xs: \"1.2\", lg: \"1.2\" },\n  h3: { xs: \"1.3\", lg: \"1.5\" },\n  h4: { xs: \"1.3\", lg: \"1.5\" },\n  h5: { xs: \"1.6\", lg: \"1.5\" },\n  h6: { xs: \"1.6\", lg: \"1.6\" },\n\n  text: { xs: \"1.7\", lg: \"1.7\" },\n  strong: { xs: \"1.7\", lg: \"1.7\" },\n  small: { xs: \"1.7\", lg: \"1.7\" },\n\n  blockquote: { xs: \"1.7\", lg: \"1.7\" },\n  code: { xs: \"1.7\", lg: \"1.7\" },\n\n  button: { xs: \"1\", lg: \"1\" },\n  buttonBig: { xs: \"1\", lg: \"1\" },\n\n  input: { xs: \"1\", lg: \"1\" },\n  inputBig: { xs: \"1\", lg: \"1\" },\n};\n\nexport const theme: Theme = {\n  breakpoints,\n  spacing,\n  colors,\n  shadows,\n  fonts,\n  fontSizes,\n  lineHeights,\n  isDark: false,\n};\n\nexport const themeDark: Theme = {\n  breakpoints,\n  spacing,\n  colors: colorsDark,\n  shadows: shadowsDark,\n  fonts,\n  fontSizes,\n  lineHeights,\n  isDark: true,\n};\n\nexport interface Breakpoints<TNumber = number> {\n  xs: TNumber;\n  sm: TNumber;\n  md: TNumber;\n  lg: TNumber;\n  xl: TNumber;\n  xxl: TNumber;\n  xxxl: TNumber;\n}\n\nexport interface Spacing<TString = string> {\n  maxWidth: { xs: TString; xxxl: TString };\n  padding: { xs: TString; lg: TString };\n  radius: { xs: TString; lg: TString; xl: TString };\n  gridGap: { xs: TString; lg: TString };\n}\n\nexport interface Colors<TString = string> {\n  primaryLight: TString;\n  primary: TString;\n  primaryDark: TString;\n\n  secondaryLight: TString;\n  secondary: TString;\n  secondaryDark: TString;\n\n  tertiaryLight: TString;\n  tertiary: TString;\n  tertiaryDark: TString;\n\n  grayLight: TString;\n  gray: TString;\n  grayDark: TString;\n\n  success: TString;\n  error: TString;\n  warning: TString;\n  info: TString;\n\n  dark: TString;\n  light: TString;\n}\n\ninterface Shadows<TString = string> {\n  xs: TString;\n  sm: TString;\n  md: TString;\n  lg: TString;\n  xl: TString;\n}\n\nexport interface Fonts<TString = string> {\n  head: TString;\n  text: TString;\n  mono: TString;\n}\n\nexport interface FontSizes<TString = string> {\n  hero1: { xs: TString; lg: TString };\n  hero2: { xs: TString; lg: TString };\n  hero3: { xs: TString; lg: TString };\n\n  h1: { xs: TString; lg: TString };\n  h2: { xs: TString; lg: TString };\n  h3: { xs: TString; lg: TString };\n  h4: { xs: TString; lg: TString };\n  h5: { xs: TString; lg: TString };\n  h6: { xs: TString; lg: TString };\n\n  text: { xs: TString; lg: TString };\n  strong: { xs: TString; lg: TString };\n  small: { xs: TString; lg: TString };\n\n  blockquote: { xs: TString; lg: TString };\n  code: { xs: TString; lg: TString };\n\n  button: { xs: TString; lg: TString };\n  buttonBig: { xs: TString; lg: TString };\n\n  input: { xs: TString; lg: TString };\n  inputBig: { xs: TString; lg: TString };\n}\n\nexport interface LineHeights<TString = string> {\n  hero1: { xs: TString; lg: TString };\n  hero2: { xs: TString; lg: TString };\n  hero3: { xs: TString; lg: TString };\n\n  h1: { xs: TString; lg: TString };\n  h2: { xs: TString; lg: TString };\n  h3: { xs: TString; lg: TString };\n  h4: { xs: TString; lg: TString };\n  h5: { xs: TString; lg: TString };\n  h6: { xs: TString; lg: TString };\n\n  text: { xs: TString; lg: TString };\n  strong: { xs: TString; lg: TString };\n  small: { xs: TString; lg: TString };\n\n  blockquote: { xs: TString; lg: TString };\n  code: { xs: TString; lg: TString };\n\n  button: { xs: TString; lg: TString };\n  buttonBig: { xs: TString; lg: TString };\n\n  input: { xs: TString; lg: TString };\n  inputBig: { xs: TString; lg: TString };\n}\n\nexport interface Theme {\n  breakpoints: Breakpoints;\n  spacing: Spacing;\n  colors: Colors;\n  shadows: Shadows;\n  fonts: Fonts;\n  fontSizes: FontSizes;\n  lineHeights: LineHeights;\n  isDark: boolean;\n}\n";
+export declare const themeTemplate = "\"use client\";\nimport customThemeJson from \"@/theme.json\";\n\ninterface CustomTheme {\n  default?: Partial<Colors>;\n  dark?: Partial<Colors>;\n}\n\nconst customTheme = customThemeJson as CustomTheme;\n\nexport const breakpoints: Breakpoints = {\n  xs: 0,\n  sm: 576,\n  md: 768,\n  lg: 992,\n  xl: 1200,\n  xxl: 1440,\n  xxxl: 1920,\n};\n\nexport function mq(minWidth: keyof Breakpoints) {\n  return `@media screen and (min-width: ${breakpoints[minWidth]}px)`;\n}\n\nexport const spacing: Spacing = {\n  maxWidth: { xs: \"1280px\", xxxl: \"1440px\" },\n  padding: { xs: \"20px\", lg: \"40px\" },\n  radius: { xs: \"6px\", lg: \"12px\", xl: \"30px\" },\n  gridGap: { xs: \"20px\", lg: \"40px\" },\n};\n\nexport const colors: Colors = {\n  primaryLight: \"#d1d5db\",\n  primary: \"#6b7280\",\n  primaryDark: \"#374151\",\n  secondaryLight: \"#c4b5fd\",\n  secondary: \"#8b5cf6\",\n  secondaryDark: \"#5b21b6\",\n  tertiaryLight: \"#86efac\",\n  tertiary: \"#22c55e\",\n  tertiaryDark: \"#15803d\",\n  grayLight: \"#e5e7eb\",\n  gray: \"#9ca3af\",\n  grayDark: \"#4b5563\",\n  success: \"#84cc16\",\n  error: \"#ef4444\",\n  warning: \"#eab308\",\n  info: \"#06b6d4\",\n  dark: \"#000000\",\n  light: \"#ffffff\",\n  ...(customTheme.default ? (customTheme.default as Partial<Colors>) : {}),\n};\n\nexport const colorsDark: Colors = {\n  primaryLight: \"#9ca3af\",\n  primary: \"#6b7280\",\n  primaryDark: \"#374151\",\n  secondaryLight: \"#ddd6fe\",\n  secondary: \"#a78bfa\",\n  secondaryDark: \"#7c3aed\",\n  tertiaryLight: \"#6ee7b7\",\n  tertiary: \"#10b981\",\n  tertiaryDark: \"#065f46\",\n  grayLight: \"#1a1a1a\",\n  gray: \"#454444\",\n  grayDark: \"#808080\",\n  success: \"#84cc16\",\n  error: \"#ef4444\",\n  warning: \"#eab308\",\n  info: \"#06b6d4\",\n  dark: \"#ffffff\",\n  light: \"#000000\",\n  ...(customTheme.dark ? (customTheme.dark as Partial<Colors>) : {}),\n};\n\nexport const shadows: Shadows = {\n  xs: \"0px 4px 4px 0px rgba(18, 18, 18, 0.04), 0px 1px 3px 0px rgba(39, 41, 45, 0.02)\",\n  sm: \"0px 4px 4px 0px rgba(18, 18, 18, 0.08), 0px 1px 3px 0px rgba(39, 41, 45, 0.04)\",\n  md: \"0px 8px 8px 0px rgba(18, 18, 18, 0.16), 0px 2px 3px 0px rgba(39, 41, 45, 0.06)\",\n  lg: \"0px 16px 24px 0px rgba(18, 18, 18, 0.20), 0px 2px 3px 0px rgba(39, 41, 45, 0.08)\",\n  xl: \"0px 24px 32px 0px rgba(18, 18, 18, 0.24), 0px 2px 3px 0px rgba(39, 41, 45, 0.12)\",\n};\n\nexport const shadowsDark: Shadows = {\n  xs: \"0px 4px 4px 0px rgba(255, 255, 255, 0.04), 0px 1px 3px 0px rgba(255, 255, 255, 0.02)\",\n  sm: \"0px 4px 4px 0px rgba(255, 255, 255, 0.08), 0px 1px 3px 0px rgba(255, 255, 255, 0.04)\",\n  md: \"0px 8px 8px 0px rgba(255, 255, 255, 0.16), 0px 2px 3px 0px rgba(255, 255, 255, 0.06)\",\n  lg: \"0px 16px 24px 0px rgba(255, 255, 255, 0.20), 0px 2px 3px 0px rgba(255, 255, 255, 0.08)\",\n  xl: \"0px 24px 32px 0px rgba(255, 255, 255, 0.24), 0px 2px 3px 0px rgba(255, 255, 255, 0.12)\",\n};\n\nexport const fonts: Fonts = {\n  text: \"Inter\",\n  head: \"Inter\",\n  mono: \"Roboto Mono, monospace\",\n};\n\nexport const fontSizes: FontSizes = {\n  hero1: { xs: \"72px\", lg: \"128px\" },\n  hero2: { xs: \"60px\", lg: \"96px\" },\n  hero3: { xs: \"36px\", lg: \"72px\" },\n\n  h1: { xs: \"40px\", lg: \"60px\" },\n  h2: { xs: \"30px\", lg: \"36px\" },\n  h3: { xs: \"28px\", lg: \"30px\" },\n  h4: { xs: \"24px\", lg: \"26px\" },\n  h5: { xs: \"18px\", lg: \"20px\" },\n  h6: { xs: \"16px\", lg: \"18px\" },\n\n  text: { xs: \"14px\", lg: \"16px\" },\n  strong: { xs: \"14px\", lg: \"16px\" },\n  small: { xs: \"12px\", lg: \"14px\" },\n\n  blockquote: { xs: \"16px\", lg: \"18px\" },\n  code: { xs: \"14px\", lg: \"16px\" },\n\n  button: { xs: \"16px\", lg: \"16px\" },\n  buttonBig: { xs: \"18px\", lg: \"18px\" },\n  buttonSmall: { xs: \"14px\", lg: \"14px\" },\n\n  input: { xs: \"16px\", lg: \"16px\" },\n  inputBig: { xs: \"18px\", lg: \"18px\" },\n  inputSmall: { xs: \"14px\", lg: \"14px\" },\n};\n\nexport const lineHeights: LineHeights = {\n  hero1: { xs: \"1.1\", lg: \"1.1\" },\n  hero2: { xs: \"1.1\", lg: \"1.1\" },\n  hero3: { xs: \"1.17\", lg: \"1.1\" },\n\n  h1: { xs: \"1\", lg: \"1.07\" },\n  h2: { xs: \"1.2\", lg: \"1.2\" },\n  h3: { xs: \"1.3\", lg: \"1.5\" },\n  h4: { xs: \"1.3\", lg: \"1.5\" },\n  h5: { xs: \"1.6\", lg: \"1.5\" },\n  h6: { xs: \"1.6\", lg: \"1.6\" },\n\n  text: { xs: \"1.7\", lg: \"1.7\" },\n  strong: { xs: \"1.7\", lg: \"1.7\" },\n  small: { xs: \"1.7\", lg: \"1.7\" },\n\n  blockquote: { xs: \"1.7\", lg: \"1.7\" },\n  code: { xs: \"1.7\", lg: \"1.7\" },\n\n  button: { xs: \"1\", lg: \"1\" },\n  buttonBig: { xs: \"1\", lg: \"1\" },\n  buttonSmall: { xs: \"1\", lg: \"1\" },\n\n  input: { xs: \"1\", lg: \"1\" },\n  inputBig: { xs: \"1\", lg: \"1\" },\n  inputSmall: { xs: \"1\", lg: \"1\" },\n};\n\nexport const theme: Theme = {\n  breakpoints,\n  spacing,\n  colors,\n  shadows,\n  fonts,\n  fontSizes,\n  lineHeights,\n  isDark: false,\n};\n\nexport const themeDark: Theme = {\n  breakpoints,\n  spacing,\n  colors: colorsDark,\n  shadows: shadowsDark,\n  fonts,\n  fontSizes,\n  lineHeights,\n  isDark: true,\n};\n\nexport interface Breakpoints<TNumber = number> {\n  xs: TNumber;\n  sm: TNumber;\n  md: TNumber;\n  lg: TNumber;\n  xl: TNumber;\n  xxl: TNumber;\n  xxxl: TNumber;\n}\n\nexport interface Spacing<TString = string> {\n  maxWidth: { xs: TString; xxxl: TString };\n  padding: { xs: TString; lg: TString };\n  radius: { xs: TString; lg: TString; xl: TString };\n  gridGap: { xs: TString; lg: TString };\n}\n\nexport interface Colors<TString = string> {\n  primaryLight: TString;\n  primary: TString;\n  primaryDark: TString;\n\n  secondaryLight: TString;\n  secondary: TString;\n  secondaryDark: TString;\n\n  tertiaryLight: TString;\n  tertiary: TString;\n  tertiaryDark: TString;\n\n  grayLight: TString;\n  gray: TString;\n  grayDark: TString;\n\n  success: TString;\n  error: TString;\n  warning: TString;\n  info: TString;\n\n  dark: TString;\n  light: TString;\n}\n\ninterface Shadows<TString = string> {\n  xs: TString;\n  sm: TString;\n  md: TString;\n  lg: TString;\n  xl: TString;\n}\n\nexport interface Fonts<TString = string> {\n  head: TString;\n  text: TString;\n  mono: TString;\n}\n\nexport interface FontSizes<TString = string> {\n  hero1: { xs: TString; lg: TString };\n  hero2: { xs: TString; lg: TString };\n  hero3: { xs: TString; lg: TString };\n\n  h1: { xs: TString; lg: TString };\n  h2: { xs: TString; lg: TString };\n  h3: { xs: TString; lg: TString };\n  h4: { xs: TString; lg: TString };\n  h5: { xs: TString; lg: TString };\n  h6: { xs: TString; lg: TString };\n\n  text: { xs: TString; lg: TString };\n  strong: { xs: TString; lg: TString };\n  small: { xs: TString; lg: TString };\n\n  blockquote: { xs: TString; lg: TString };\n  code: { xs: TString; lg: TString };\n\n  button: { xs: TString; lg: TString };\n  buttonBig: { xs: TString; lg: TString };\n  buttonSmall: { xs: TString; lg: TString };\n\n  input: { xs: TString; lg: TString };\n  inputBig: { xs: TString; lg: TString };\n  inputSmall: { xs: TString; lg: TString };\n}\n\nexport interface LineHeights<TString = string> {\n  hero1: { xs: TString; lg: TString };\n  hero2: { xs: TString; lg: TString };\n  hero3: { xs: TString; lg: TString };\n\n  h1: { xs: TString; lg: TString };\n  h2: { xs: TString; lg: TString };\n  h3: { xs: TString; lg: TString };\n  h4: { xs: TString; lg: TString };\n  h5: { xs: TString; lg: TString };\n  h6: { xs: TString; lg: TString };\n\n  text: { xs: TString; lg: TString };\n  strong: { xs: TString; lg: TString };\n  small: { xs: TString; lg: TString };\n\n  blockquote: { xs: TString; lg: TString };\n  code: { xs: TString; lg: TString };\n\n  button: { xs: TString; lg: TString };\n  buttonBig: { xs: TString; lg: TString };\n  buttonSmall: { xs: TString; lg: TString };\n\n  input: { xs: TString; lg: TString };\n  inputBig: { xs: TString; lg: TString };\n  inputSmall: { xs: TString; lg: TString };\n}\n\nexport interface Theme {\n  breakpoints: Breakpoints;\n  spacing: Spacing;\n  colors: Colors;\n  shadows: Shadows;\n  fonts: Fonts;\n  fontSizes: FontSizes;\n  lineHeights: LineHeights;\n  isDark: boolean;\n}\n";

package/dist/templates/app/theme.js

@@ -116,9 +116,11 @@ export const fontSizes: FontSizes = {
 
   button: { xs: "16px", lg: "16px" },
   buttonBig: { xs: "18px", lg: "18px" },
+  buttonSmall: { xs: "14px", lg: "14px" },
 
   input: { xs: "16px", lg: "16px" },
   inputBig: { xs: "18px", lg: "18px" },
+  inputSmall: { xs: "14px", lg: "14px" },
 };
 
 export const lineHeights: LineHeights = {
@@ -142,9 +144,11 @@ export const lineHeights: LineHeights = {
 
   button: { xs: "1", lg: "1" },
   buttonBig: { xs: "1", lg: "1" },
+  buttonSmall: { xs: "1", lg: "1" },
 
   input: { xs: "1", lg: "1" },
   inputBig: { xs: "1", lg: "1" },
+  inputSmall: { xs: "1", lg: "1" },
 };
 
 export const theme: Theme = {
@@ -247,9 +251,11 @@ export interface FontSizes<TString = string> {
 
   button: { xs: TString; lg: TString };
   buttonBig: { xs: TString; lg: TString };
+  buttonSmall: { xs: TString; lg: TString };
 
   input: { xs: TString; lg: TString };
   inputBig: { xs: TString; lg: TString };
+  inputSmall: { xs: TString; lg: TString };
 }
 
 export interface LineHeights<TString = string> {
@@ -273,9 +279,11 @@ export interface LineHeights<TString = string> {
 
   button: { xs: TString; lg: TString };
   buttonBig: { xs: TString; lg: TString };
+  buttonSmall: { xs: TString; lg: TString };
 
   input: { xs: TString; lg: TString };
   inputBig: { xs: TString; lg: TString };
+  inputSmall: { xs: TString; lg: TString };
 }
 
 export interface Theme {

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

@@ -1 +1 @@
-export declare const deploymentMdxTemplate = "---\ntitle: \"Deployment\"\ndescription: \"Deploy your Doccupine Next.js app to Vercel.\"\ndate: \"2025-01-15\"\ncategory: \"Configuration\"\ncategoryOrder: 3\norder: 9\n---\n# Deployment\nDeploy your Doccupine site as a Next.js application on Vercel. You can connect a Git repository for automatic deployments or use the Vercel CLI for manual control.\n\n<Callout type=\"warning\">\n  Only deploy the generated website directory produced by Doccupine (the Next.js app). Do not deploy your MDX source folder. If your repo contains multiple folders, set the Vercel project <strong>Root Directory</strong> to the generated site folder.\n</Callout>\n\n## Prerequisites\n- **Vercel account**: https://vercel.com/signup\n- **Git repository**: GitHub, GitLab, or Bitbucket with your Next.js app\n- **Node.js**: Use an LTS version\n\n## Option 1: Deploy via Git (recommended)\n1. **Push the generated site folder** to a Git repository (or ensure the repo\u2019s root is the generated website directory).\n2. **Import to Vercel**: Go to https://vercel.com/new and select your repository.\n3. If your repo is a monorepo, set the project **Root Directory** to the generated website folder (Project \u2192 Settings \u2192 General \u2192 Root Directory).\n4. **Framework preset**: Vercel auto-detects Next.js.\n5. **Build settings** (defaults are fine):\n   - Install Command: `pnpm i`, `yarn`, or `npm i` (Vercel auto-detects)\n   - Build Command: `next build`\n   - Output: handled automatically by Vercel for Next.js\n6. **Environment Variables**: Add any values required by your docs (see below).\n7. **Deploy**: Vercel creates a Preview deployment per branch. Merge to your main branch to promote to Production.\n\n## Option 2: Deploy with Vercel CLI\n1. Install the CLI:\n   ```bash\n   npm i -g vercel\n   ```\n2. From the generated website directory, run:\n   ```bash\n   vercel\n   ```\n   Follow the prompts to link or create a project.\n3. When ready for production:\n   ```bash\n   vercel --prod\n   ```\n\n## Environment variables\nIf your documentation or site behavior depends on environment variables, define them in Vercel:\n- In the Vercel dashboard: Project \u2192 Settings \u2192 Environment Variables.\n- Or via CLI:\n  ```bash\n  vercel env add NAME\n  ```\n\nFor Next.js, make sure variables needed on the client are prefixed with `NEXT_PUBLIC_`.\n\n## Next.js configuration notes\n- Ensure a valid `next.config.js` if you customize images, basePath, or MDX handling.\n- If you use MDX, include the necessary plugins/config in your project.\n- Vercel automatically enables Image Optimization and Edge/CDN features for Next.js.\n\n## Custom domains\n- Add a domain in Vercel: Project \u2192 Settings \u2192 Domains.\n- Point DNS to Vercel as instructed. Changes can take a few minutes to propagate.\n\n## Troubleshooting\n- **Build failed**: Check the Vercel build logs. Confirm Node version and lockfile are present.\n- **Missing content**: Ensure your MDX directory and any assets are included in the repository.\n- **Env not applied**: Add variables for the correct environment (Preview vs Production) and redeploy.\n- **Images not loading**: Configure `images.domains` in `next.config.js` if using remote images.\n\n## Tips\n- **Preview first**: Use Preview deployments to validate docs before merging to Production.\n- **Cache and performance**: Leverage ISR or static generation where applicable for faster loads.\n- **Consistent tooling**: Keep a single package manager and lockfile in the repo (npm, pnpm, or yarn).";
+export declare const deploymentMdxTemplate = "---\ntitle: \"Deployment\"\ndescription: \"Deploy your documentation site with Doccupine or self-host on Vercel.\"\ndate: \"2025-01-15\"\ncategory: \"Configuration\"\ncategoryOrder: 3\norder: 9\n---\n# Deployment\n\n## Deploy with Doccupine\n\nSign up for an account at [Doccupine](https://www.doccupine.com) and create your docs instantly \u2014 no build configuration, no infrastructure to manage.\n\nDoccupine gives you:\n- **Automatic deployments** on every push to your repository\n- **Site customization** through a visual dashboard \u2014 no code changes needed\n- **Team collaboration** so your whole team can manage docs together\n- **Custom domains** with automatic SSL\n- **AI Assistant and MCP server** included out of the box, no API key required\n\nGet started at [doccupine.com](https://www.doccupine.com).\n\n---\n\n## Self-hosting on Vercel\n\nIf you prefer to self-host, Doccupine generates a standard Next.js app that can be deployed to Vercel.\n\n<Callout type=\"warning\">\n  Deploy the generated website directory (the Next.js app), not your MDX source folder. In a monorepo, set the Vercel <strong>Root Directory</strong> to the generated site folder.\n</Callout>\n\n### Quick start\n1. Push the generated site folder to GitHub, GitLab, or Bitbucket.\n2. Import the repository at [vercel.com/new](https://vercel.com/new). Vercel auto-detects Next.js and applies the correct build settings.\n3. Add any required environment variables under Project \u2192 Settings \u2192 Environment Variables.\n4. Deploy. Vercel creates Preview deployments per branch and promotes to Production on merge to main.\n\nYou can also deploy from the command line with the [Vercel CLI](https://vercel.com/docs/cli):\n\n```bash\nnpm i -g vercel\n```\n\n### Custom domains\nAdd a domain under Project \u2192 Settings \u2192 Domains and point your DNS to Vercel.\n\n### Troubleshooting\n- **Build failed** \u2014 Check build logs. Ensure your lockfile and correct Node.js version are present.\n- **Missing content** \u2014 Verify your MDX files and assets are in the repository.";

package/dist/templates/mdx/deployment.mdx.js

@@ -1,76 +1,51 @@
 export const deploymentMdxTemplate = `---
 title: "Deployment"
-description: "Deploy your Doccupine Next.js app to Vercel."
+description: "Deploy your documentation site with Doccupine or self-host on Vercel."
 date: "2025-01-15"
 category: "Configuration"
 categoryOrder: 3
 order: 9
 ---
 # Deployment
-Deploy your Doccupine site as a Next.js application on Vercel. You can connect a Git repository for automatic deployments or use the Vercel CLI for manual control.
 
-<Callout type="warning">
-  Only deploy the generated website directory produced by Doccupine (the Next.js app). Do not deploy your MDX source folder. If your repo contains multiple folders, set the Vercel project <strong>Root Directory</strong> to the generated site folder.
-</Callout>
+## Deploy with Doccupine
+
+Sign up for an account at [Doccupine](https://www.doccupine.com) and create your docs instantly — no build configuration, no infrastructure to manage.
+
+Doccupine gives you:
+- **Automatic deployments** on every push to your repository
+- **Site customization** through a visual dashboard — no code changes needed
+- **Team collaboration** so your whole team can manage docs together
+- **Custom domains** with automatic SSL
+- **AI Assistant and MCP server** included out of the box, no API key required
 
-## Prerequisites
-- **Vercel account**: https://vercel.com/signup
-- **Git repository**: GitHub, GitLab, or Bitbucket with your Next.js app
-- **Node.js**: Use an LTS version
+Get started at [doccupine.com](https://www.doccupine.com).
 
-## Option 1: Deploy via Git (recommended)
-1. **Push the generated site folder** to a Git repository (or ensure the repo’s root is the generated website directory).
-2. **Import to Vercel**: Go to https://vercel.com/new and select your repository.
-3. If your repo is a monorepo, set the project **Root Directory** to the generated website folder (Project → Settings → General → Root Directory).
-4. **Framework preset**: Vercel auto-detects Next.js.
-5. **Build settings** (defaults are fine):
-   - Install Command: \`pnpm i\`, \`yarn\`, or \`npm i\` (Vercel auto-detects)
-   - Build Command: \`next build\`
-   - Output: handled automatically by Vercel for Next.js
-6. **Environment Variables**: Add any values required by your docs (see below).
-7. **Deploy**: Vercel creates a Preview deployment per branch. Merge to your main branch to promote to Production.
+---
+
+## Self-hosting on Vercel
 
-## Option 2: Deploy with Vercel CLI
-1. Install the CLI:
-   \`\`\`bash
-   npm i -g vercel
-   \`\`\`
-2. From the generated website directory, run:
-   \`\`\`bash
-   vercel
-   \`\`\`
-   Follow the prompts to link or create a project.
-3. When ready for production:
-   \`\`\`bash
-   vercel --prod
-   \`\`\`
+If you prefer to self-host, Doccupine generates a standard Next.js app that can be deployed to Vercel.
 
-## Environment variables
-If your documentation or site behavior depends on environment variables, define them in Vercel:
-- In the Vercel dashboard: Project → Settings → Environment Variables.
-- Or via CLI:
-  \`\`\`bash
-  vercel env add NAME
-  \`\`\`
+<Callout type="warning">
+  Deploy the generated website directory (the Next.js app), not your MDX source folder. In a monorepo, set the Vercel <strong>Root Directory</strong> to the generated site folder.
+</Callout>
 
-For Next.js, make sure variables needed on the client are prefixed with \`NEXT_PUBLIC_\`.
+### Quick start
+1. Push the generated site folder to GitHub, GitLab, or Bitbucket.
+2. Import the repository at [vercel.com/new](https://vercel.com/new). Vercel auto-detects Next.js and applies the correct build settings.
+3. Add any required environment variables under Project → Settings → Environment Variables.
+4. Deploy. Vercel creates Preview deployments per branch and promotes to Production on merge to main.
 
-## Next.js configuration notes
-- Ensure a valid \`next.config.js\` if you customize images, basePath, or MDX handling.
-- If you use MDX, include the necessary plugins/config in your project.
-- Vercel automatically enables Image Optimization and Edge/CDN features for Next.js.
+You can also deploy from the command line with the [Vercel CLI](https://vercel.com/docs/cli):
 
-## Custom domains
-- Add a domain in Vercel: Project → Settings → Domains.
-- Point DNS to Vercel as instructed. Changes can take a few minutes to propagate.
+\`\`\`bash
+npm i -g vercel
+\`\`\`
 
-## Troubleshooting
-- **Build failed**: Check the Vercel build logs. Confirm Node version and lockfile are present.
-- **Missing content**: Ensure your MDX directory and any assets are included in the repository.
-- **Env not applied**: Add variables for the correct environment (Preview vs Production) and redeploy.
-- **Images not loading**: Configure \`images.domains\` in \`next.config.js\` if using remote images.
+### Custom domains
+Add a domain under Project → Settings → Domains and point your DNS to Vercel.
 
-## Tips
-- **Preview first**: Use Preview deployments to validate docs before merging to Production.
-- **Cache and performance**: Leverage ISR or static generation where applicable for faster loads.
-- **Consistent tooling**: Keep a single package manager and lockfile in the repo (npm, pnpm, or yarn).`;
+### Troubleshooting
+- **Build failed** — Check build logs. Ensure your lockfile and correct Node.js version are present.
+- **Missing content** — Verify your MDX files and assets are in the repository.`;

package/dist/templates/package.js

@@ -9,11 +9,11 @@ export const packageJsonTemplate = JSON.stringify({
         lint: "eslint .",
     },
     dependencies: {
-        "@langchain/anthropic": "^1.3.15",
-        "@langchain/google-genai": "^2.1.15",
-        "@langchain/openai": "^1.2.5",
+        "@langchain/anthropic": "^1.3.17",
+        "@langchain/google-genai": "^2.1.17",
+        "@langchain/openai": "^1.2.7",
         "@modelcontextprotocol/sdk": "^1.26.0",
-        langchain: "^1.2.18",
+        langchain: "^1.2.21",
         next: "16.1.6",
         react: "19.2.4",
         "react-dom": "19.2.4",
@@ -24,11 +24,11 @@ export const packageJsonTemplate = JSON.stringify({
         "@types/react": "^19",
         "@types/react-dom": "^19",
         "baseline-browser-mapping": "^2.9.19",
-        "cherry-styled-components": "^0.1.7",
+        "cherry-styled-components": "^0.1.8",
         eslint: "^9",
         "eslint-config-next": "16.1.6",
         "lucide-react": "^0.563.0",
-        "next-mdx-remote": "^5.0.0",
+        "next-mdx-remote": "^6.0.0",
         polished: "^4.3.1",
         prettier: "^3.8.1",
         "rehype-highlight": "^7.0.2",

package/dist/templates/theme.js

@@ -131,6 +131,7 @@ export const fontSizes: FontSizes = {
 
   input: { xs: "16px", lg: "16px" },
   inputBig: { xs: "18px", lg: "18px" },
+  inputSmall: { xs: "14px", lg: "14px" },
 };
 
 export const lineHeights: LineHeights = {
@@ -157,6 +158,7 @@ export const lineHeights: LineHeights = {
 
   input: { xs: "1", lg: "1" },
   inputBig: { xs: "1", lg: "1" },
+  inputSmall: { xs: "1.00", lg: "1.00" },
 };
 
 export const theme: Theme = {
@@ -262,6 +264,7 @@ export interface FontSizes<TString = string> {
 
   input: { xs: TString; lg: TString };
   inputBig: { xs: TString; lg: TString };
+  inputSmall: { xs: TString; lg: TString };
 }
 
 export interface LineHeights<TString = string> {
@@ -288,6 +291,7 @@ export interface LineHeights<TString = string> {
 
   input: { xs: TString; lg: TString };
   inputBig: { xs: TString; lg: TString };
+  inputSmall: { xs: TString; lg: TString };
 }
 
 export interface Theme {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "doccupine",
-  "version": "0.0.37",
+  "version": "0.0.39",
   "description": "Document management system that allows you to store, organize, and share your documentation with ease. AI-ready.",
   "main": "dist/index.js",
   "bin": {
@@ -44,7 +44,7 @@
   "devDependencies": {
     "@types/chokidar": "^2.1.7",
     "@types/fs-extra": "^11.0.4",
-    "@types/node": "^25.2.2",
+    "@types/node": "^25.2.3",
     "@types/prompts": "^2.4.9",
     "typescript": "^5.9.3"
   },