doccupine 0.0.87 → 0.0.89

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

@@ -1 +1 @@
-export declare const codeTemplate = "\"use client\";\nimport { useState, useCallback, useMemo } from \"react\";\nimport styled from \"styled-components\";\nimport { Theme, styledCode } from \"cherry-styled-components\";\nimport { rgba } from \"polished\";\nimport { unified } from \"unified\";\nimport rehypeParse from \"rehype-parse\";\nimport rehypeHighlight from \"rehype-highlight\";\nimport rehypeStringify from \"rehype-stringify\";\nimport { Icon } from \"@/components/layout/Icon\";\n\ninterface CodeProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  \"theme\"\n> {\n  code: string;\n  language?: string;\n  theme?: Theme;\n}\n\nconst CodeWrapper = styled.span<{ theme: Theme }>`\n  position: relative;\n  z-index: 2;\n  display: block;\n  width: 100%;\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border: solid 1px\n    ${({ theme }) =>\n      theme.isDark\n        ? rgba(theme.colors.dark, 0.2)\n        : rgba(theme.colors.dark, 0.1)};\n`;\n\nconst TopBar = styled.div<{ theme: Theme }>`\n  background: ${({ theme }) => (theme.isDark ? \"#0d1117\" : \"#f6f8fa\")};\n  border-top-left-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border-top-right-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border-bottom: solid 1px\n    ${({ theme }) =>\n      theme.isDark ? rgba(\"#ffffff\", 0.1) : rgba(\"#000000\", 0.1)};\n  height: 33px;\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 5px;\n  padding: 0 10px;\n`;\n\nconst DotsContainer = styled.div`\n  display: flex;\n  gap: 5px;\n`;\n\nconst Dot = styled.span<{ theme: Theme }>`\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background: ${({ theme }) =>\n    theme.isDark ? rgba(\"#ffffff\", 0.1) : rgba(\"#000000\", 0.1)};\n`;\n\nconst CopyButton = styled.button<{ theme: Theme; $copied: boolean }>`\n  background: ${({ theme, $copied }) =>\n    $copied\n      ? theme.isDark\n        ? rgba(\"#7ee787\", 0.2)\n        : rgba(\"#2da44e\", 0.1)\n      : \"transparent\"};\n  border: solid 1px\n    ${({ theme, $copied }) =>\n      $copied\n        ? theme.isDark\n          ? \"#7ee787\"\n          : \"#2da44e\"\n        : theme.isDark\n          ? rgba(\"#ffffff\", 0.1)\n          : rgba(\"#000000\", 0.1)};\n  color: ${({ theme, $copied }) =>\n    $copied\n      ? theme.isDark\n        ? \"#7ee787\"\n        : \"#2da44e\"\n      : theme.isDark\n        ? \"#c9d1d9\"\n        : \"#57606a\"};\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  padding: 4px 8px;\n  font-size: 12px;\n  font-family: ${({ theme }) => theme.fonts.mono};\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  margin-right: -6px;\n\n  & svg.lucide {\n    color: ${({ theme, $copied }) =>\n      $copied\n        ? theme.isDark\n          ? \"#7ee787\"\n          : \"#2da44e\"\n        : theme.isDark\n          ? \"#c9d1d9\"\n          : \"#57606a\"};\n  }\n\n  &:hover {\n    background: ${({ theme, $copied }) =>\n      $copied\n        ? theme.isDark\n          ? rgba(\"#7ee787\", 0.3)\n          : rgba(\"#2da44e\", 0.2)\n        : theme.isDark\n          ? rgba(\"#ffffff\", 0.1)\n          : rgba(\"#000000\", 0.05)};\n    border-color: ${({ theme, $copied }) =>\n      $copied\n        ? theme.isDark\n          ? \"#7ee787\"\n          : \"#2da44e\"\n        : theme.isDark\n          ? rgba(\"#ffffff\", 0.2)\n          : rgba(\"#000000\", 0.2)};\n  }\n\n  &:active {\n    transform: scale(0.95);\n  }\n`;\n\nconst Body = styled.div<{ theme: Theme }>`\n  background: ${({ theme }) => (theme.isDark ? \"#0d1117\" : \"#ffffff\")};\n  border-bottom-left-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border-bottom-right-radius: ${({ theme }) => theme.spacing.radius.lg};\n  color: ${({ theme }) => (theme.isDark ? \"#ffffff\" : \"#24292f\")};\n  padding: 20px;\n  font-family: ${({ theme }) => theme.fonts.mono};\n  text-align: left;\n  overflow-x: auto;\n  overflow-y: auto;\n  max-height: calc(100dvh - 400px);\n  ${({ theme }) => styledCode(theme)};\n\n  /* Dark mode syntax highlighting (GitHub Dark) */\n  ${({ theme }) =>\n    theme.isDark &&\n    `\n    & .hljs {\n      color: #c9d1d9;\n      background: #0d1117;\n    }\n\n    & .hljs-doctag,\n    & .hljs-keyword,\n    & .hljs-meta .hljs-keyword,\n    & .hljs-template-tag,\n    & .hljs-template-variable,\n    & .hljs-type,\n    & .hljs-variable.language_ {\n      color: #ff7b72;\n    }\n\n    & .hljs-title,\n    & .hljs-title.class_,\n    & .hljs-title.class_.inherited__,\n    & .hljs-title.function_ {\n      color: #d2a8ff;\n    }\n\n    & .hljs-attr,\n    & .hljs-attribute,\n    & .hljs-literal,\n    & .hljs-meta,\n    & .hljs-number,\n    & .hljs-operator,\n    & .hljs-selector-attr,\n    & .hljs-selector-class,\n    & .hljs-selector-id,\n    & .hljs-variable {\n      color: #79c0ff;\n    }\n\n    & .hljs-meta .hljs-string,\n    & .hljs-regexp,\n    & .hljs-string {\n      color: #a5d6ff;\n    }\n\n    & .hljs-built_in,\n    & .hljs-symbol {\n      color: #ffa657;\n    }\n\n    & .hljs-code,\n    & .hljs-comment,\n    & .hljs-formula {\n      color: #8b949e;\n    }\n\n    & .hljs-name,\n    & .hljs-quote,\n    & .hljs-selector-pseudo,\n    & .hljs-selector-tag {\n      color: #7ee787;\n    }\n\n    & .hljs-subst {\n      color: #c9d1d9;\n    }\n\n    & .hljs-section {\n      color: #1f6feb;\n      font-weight: 700;\n    }\n\n    & .hljs-bullet {\n      color: #f2cc60;\n    }\n\n    & .hljs-emphasis {\n      color: #c9d1d9;\n      font-style: italic;\n    }\n\n    & .hljs-strong {\n      color: #c9d1d9;\n      font-weight: 700;\n    }\n\n    & .hljs-addition {\n      color: #aff5b4;\n      background-color: #033a16;\n    }\n\n    & .hljs-deletion {\n      color: #ffdcd7;\n      background-color: #67060c;\n    }\n  `}\n\n  /* Light mode syntax highlighting (GitHub Light) */\n  ${({ theme }) =>\n    !theme.isDark &&\n    `\n    & .hljs {\n      color: #24292f;\n      background: #ffffff;\n    }\n\n    & .hljs-doctag,\n    & .hljs-keyword,\n    & .hljs-meta .hljs-keyword,\n    & .hljs-template-tag,\n    & .hljs-template-variable,\n    & .hljs-type,\n    & .hljs-variable.language_ {\n      color: #cf222e;\n    }\n\n    & .hljs-title,\n    & .hljs-title.class_,\n    & .hljs-title.class_.inherited__,\n    & .hljs-title.function_ {\n      color: #8250df;\n    }\n\n    & .hljs-attr,\n    & .hljs-attribute,\n    & .hljs-literal,\n    & .hljs-meta,\n    & .hljs-number,\n    & .hljs-operator,\n    & .hljs-selector-attr,\n    & .hljs-selector-class,\n    & .hljs-selector-id,\n    & .hljs-variable {\n      color: #0550ae;\n    }\n\n    & .hljs-meta .hljs-string,\n    & .hljs-regexp,\n    & .hljs-string {\n      color: #0a3069;\n    }\n\n    & .hljs-built_in,\n    & .hljs-symbol {\n      color: #953800;\n    }\n\n    & .hljs-code,\n    & .hljs-comment,\n    & .hljs-formula {\n      color: #6e7781;\n    }\n\n    & .hljs-name,\n    & .hljs-quote,\n    & .hljs-selector-pseudo,\n    & .hljs-selector-tag {\n      color: #116329;\n    }\n\n    & .hljs-subst {\n      color: #24292f;\n    }\n\n    & .hljs-section {\n      color: #0550ae;\n      font-weight: 700;\n    }\n\n    & .hljs-bullet {\n      color: #953800;\n    }\n\n    & .hljs-emphasis {\n      color: #24292f;\n      font-style: italic;\n    }\n\n    & .hljs-strong {\n      color: #24292f;\n      font-weight: 700;\n    }\n\n    & .hljs-addition {\n      color: #116329;\n      background-color: #dafbe1;\n    }\n\n    & .hljs-deletion {\n      color: #82071e;\n      background-color: #ffebe9;\n    }\n  `}\n`;\n\nconst escapeHtml = (unsafe: string): string => {\n  return unsafe\n    .replace(/&/g, \"&amp;\")\n    .replace(/</g, \"&lt;\")\n    .replace(/>/g, \"&gt;\")\n    .replace(/\"/g, \"&quot;\")\n    .replace(/'/g, \"&#039;\");\n};\n\nconst sanitizeLanguage = (lang: string): string =>\n  lang.replace(/[^a-zA-Z0-9_-]/g, \"\");\n\nconst highlightCode = (code: string, language: string): string => {\n  const escapedCode = escapeHtml(code);\n  const safeLang = sanitizeLanguage(language);\n  const result = unified()\n    .use(rehypeParse, { fragment: true })\n    .use(rehypeHighlight, {\n      detect: true,\n      ignoreMissing: true,\n    })\n    .use(rehypeStringify)\n    .processSync(\n      `<pre><code class=\"language-${safeLang}\">${escapedCode}</code></pre>`,\n    );\n\n  return String(result);\n};\n\nfunction Code({ code, language = \"javascript\", theme, className }: CodeProps) {\n  const [copied, setCopied] = useState(false);\n  const highlightedCode = useMemo(\n    () => highlightCode(code, language),\n    [code, language],\n  );\n\n  const handleCopy = useCallback(async () => {\n    try {\n      await navigator.clipboard.writeText(code);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch (err) {\n      console.error(\"Failed to copy code:\", err);\n    }\n  }, [code]);\n\n  return (\n    <CodeWrapper\n      className={`${className ?? \"\"} code-wrapper`.trim()}\n      theme={theme}\n    >\n      <TopBar theme={theme}>\n        <DotsContainer>\n          <Dot theme={theme} />\n          <Dot theme={theme} />\n          <Dot theme={theme} />\n        </DotsContainer>\n        <CopyButton onClick={handleCopy} $copied={copied} theme={theme}>\n          {copied ? (\n            <>\n              <Icon name=\"check\" size={12} />\n              <span>Copied!</span>\n            </>\n          ) : (\n            <>\n              <Icon name=\"copy\" size={12} />\n              <span>Copy</span>\n            </>\n          )}\n        </CopyButton>\n      </TopBar>\n      <Body\n        dangerouslySetInnerHTML={{ __html: highlightedCode }}\n        theme={theme}\n        className=\"code-wrapper-body\"\n      />\n    </CodeWrapper>\n  );\n}\n\nexport { Code };\n";
+export declare const codeTemplate = "\"use client\";\nimport { useState, useCallback, useMemo } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { styledCode } from \"cherry-styled-components\";\nimport { Theme } from \"@/app/theme\";\nimport { unified } from \"unified\";\nimport rehypeParse from \"rehype-parse\";\nimport rehypeHighlight from \"rehype-highlight\";\nimport rehypeStringify from \"rehype-stringify\";\nimport { Icon } from \"@/components/layout/Icon\";\n\ninterface CodeProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  \"theme\"\n> {\n  code: string;\n  language?: string;\n  theme?: Theme;\n}\n\nconst CodeWrapper = styled.span<{ theme: Theme }>`\n  position: relative;\n  z-index: 2;\n  display: block;\n  width: 100%;\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border: solid 1px rgba(0, 0, 0, 0.1);\n\n  :root.dark & {\n    border-color: rgba(255, 255, 255, 0.2);\n  }\n`;\n\n/* Code block uses a fixed GitHub-style palette in both modes. Independent of\n   theme.json so syntax highlighting stays legible regardless of brand colors.\n   Dark variants live in :root.dark & blocks so the swap happens via the\n   active <html> class with no re-render. */\nconst TopBar = styled.div<{ theme: Theme }>`\n  background: #f6f8fa;\n  border-top-left-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border-top-right-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border-bottom: solid 1px rgba(0, 0, 0, 0.1);\n  height: 33px;\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 5px;\n  padding: 0 10px;\n\n  :root.dark & {\n    background: #0d1117;\n    border-bottom-color: rgba(255, 255, 255, 0.1);\n  }\n`;\n\nconst DotsContainer = styled.div`\n  display: flex;\n  gap: 5px;\n`;\n\nconst Dot = styled.span<{ theme: Theme }>`\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background: rgba(0, 0, 0, 0.1);\n\n  :root.dark & {\n    background: rgba(255, 255, 255, 0.1);\n  }\n`;\n\nconst CopyButton = styled.button<{ theme: Theme; $copied: boolean }>`\n  background: ${({ $copied }) =>\n    $copied ? \"rgba(45, 164, 78, 0.1)\" : \"transparent\"};\n  border: solid 1px\n    ${({ $copied }) => ($copied ? \"#2da44e\" : \"rgba(0, 0, 0, 0.1)\")};\n  color: ${({ $copied }) => ($copied ? \"#2da44e\" : \"#57606a\")};\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  padding: 4px 8px;\n  font-size: 12px;\n  font-family: ${({ theme }) => theme.fonts.mono};\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  margin-right: -6px;\n\n  & svg.lucide {\n    color: ${({ $copied }) => ($copied ? \"#2da44e\" : \"#57606a\")};\n  }\n\n  &:hover {\n    background: ${({ $copied }) =>\n      $copied ? \"rgba(45, 164, 78, 0.2)\" : \"rgba(0, 0, 0, 0.05)\"};\n    border-color: ${({ $copied }) =>\n      $copied ? \"#2da44e\" : \"rgba(0, 0, 0, 0.2)\"};\n  }\n\n  &:active {\n    transform: scale(0.95);\n  }\n\n  :root.dark & {\n    background: ${({ $copied }) =>\n      $copied ? \"rgba(126, 231, 135, 0.2)\" : \"transparent\"};\n    border-color: ${({ $copied }) =>\n      $copied ? \"#7ee787\" : \"rgba(255, 255, 255, 0.1)\"};\n    color: ${({ $copied }) => ($copied ? \"#7ee787\" : \"#c9d1d9\")};\n\n    & svg.lucide {\n      color: ${({ $copied }) => ($copied ? \"#7ee787\" : \"#c9d1d9\")};\n    }\n\n    &:hover {\n      background: ${({ $copied }) =>\n        $copied ? \"rgba(126, 231, 135, 0.3)\" : \"rgba(255, 255, 255, 0.1)\"};\n      border-color: ${({ $copied }) =>\n        $copied ? \"#7ee787\" : \"rgba(255, 255, 255, 0.2)\"};\n    }\n  }\n`;\n\n/* GitHub Light syntax highlighting by default; GitHub Dark in :root.dark.\n   Browser resolves which rule wins based on the active <html> class with no\n   JS or React re-render involved. */\nconst lightSyntaxHighlight = css`\n  & .hljs {\n    color: #24292f;\n    background: #ffffff;\n  }\n  & .hljs-doctag,\n  & .hljs-keyword,\n  & .hljs-meta .hljs-keyword,\n  & .hljs-template-tag,\n  & .hljs-template-variable,\n  & .hljs-type,\n  & .hljs-variable.language_ {\n    color: #cf222e;\n  }\n  & .hljs-title,\n  & .hljs-title.class_,\n  & .hljs-title.class_.inherited__,\n  & .hljs-title.function_ {\n    color: #8250df;\n  }\n  & .hljs-attr,\n  & .hljs-attribute,\n  & .hljs-literal,\n  & .hljs-meta,\n  & .hljs-number,\n  & .hljs-operator,\n  & .hljs-selector-attr,\n  & .hljs-selector-class,\n  & .hljs-selector-id,\n  & .hljs-variable {\n    color: #0550ae;\n  }\n  & .hljs-meta .hljs-string,\n  & .hljs-regexp,\n  & .hljs-string {\n    color: #0a3069;\n  }\n  & .hljs-built_in,\n  & .hljs-symbol {\n    color: #953800;\n  }\n  & .hljs-code,\n  & .hljs-comment,\n  & .hljs-formula {\n    color: #6e7781;\n  }\n  & .hljs-name,\n  & .hljs-quote,\n  & .hljs-selector-pseudo,\n  & .hljs-selector-tag {\n    color: #116329;\n  }\n  & .hljs-subst {\n    color: #24292f;\n  }\n  & .hljs-section {\n    color: #0550ae;\n    font-weight: 700;\n  }\n  & .hljs-bullet {\n    color: #953800;\n  }\n  & .hljs-emphasis {\n    color: #24292f;\n    font-style: italic;\n  }\n  & .hljs-strong {\n    color: #24292f;\n    font-weight: 700;\n  }\n  & .hljs-addition {\n    color: #116329;\n    background-color: #dafbe1;\n  }\n  & .hljs-deletion {\n    color: #82071e;\n    background-color: #ffebe9;\n  }\n`;\n\nconst darkSyntaxHighlight = css`\n  & .hljs {\n    color: #c9d1d9;\n    background: #0d1117;\n  }\n  & .hljs-doctag,\n  & .hljs-keyword,\n  & .hljs-meta .hljs-keyword,\n  & .hljs-template-tag,\n  & .hljs-template-variable,\n  & .hljs-type,\n  & .hljs-variable.language_ {\n    color: #ff7b72;\n  }\n  & .hljs-title,\n  & .hljs-title.class_,\n  & .hljs-title.class_.inherited__,\n  & .hljs-title.function_ {\n    color: #d2a8ff;\n  }\n  & .hljs-attr,\n  & .hljs-attribute,\n  & .hljs-literal,\n  & .hljs-meta,\n  & .hljs-number,\n  & .hljs-operator,\n  & .hljs-selector-attr,\n  & .hljs-selector-class,\n  & .hljs-selector-id,\n  & .hljs-variable {\n    color: #79c0ff;\n  }\n  & .hljs-meta .hljs-string,\n  & .hljs-regexp,\n  & .hljs-string {\n    color: #a5d6ff;\n  }\n  & .hljs-built_in,\n  & .hljs-symbol {\n    color: #ffa657;\n  }\n  & .hljs-code,\n  & .hljs-comment,\n  & .hljs-formula {\n    color: #8b949e;\n  }\n  & .hljs-name,\n  & .hljs-quote,\n  & .hljs-selector-pseudo,\n  & .hljs-selector-tag {\n    color: #7ee787;\n  }\n  & .hljs-subst {\n    color: #c9d1d9;\n  }\n  & .hljs-section {\n    color: #1f6feb;\n    font-weight: 700;\n  }\n  & .hljs-bullet {\n    color: #f2cc60;\n  }\n  & .hljs-emphasis {\n    color: #c9d1d9;\n    font-style: italic;\n  }\n  & .hljs-strong {\n    color: #c9d1d9;\n    font-weight: 700;\n  }\n  & .hljs-addition {\n    color: #aff5b4;\n    background-color: #033a16;\n  }\n  & .hljs-deletion {\n    color: #ffdcd7;\n    background-color: #67060c;\n  }\n`;\n\nconst Body = styled.div<{ theme: Theme }>`\n  background: #ffffff;\n  border-bottom-left-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border-bottom-right-radius: ${({ theme }) => theme.spacing.radius.lg};\n  color: #24292f;\n  padding: 20px;\n  font-family: ${({ theme }) => theme.fonts.mono};\n  text-align: left;\n  overflow-x: auto;\n  overflow-y: auto;\n  max-height: calc(100dvh - 400px);\n  ${({ theme }) => styledCode(theme)};\n  ${lightSyntaxHighlight};\n\n  :root.dark & {\n    background: #0d1117;\n    color: #ffffff;\n    ${darkSyntaxHighlight};\n  }\n`;\n\nconst escapeHtml = (unsafe: string): string => {\n  return unsafe\n    .replace(/&/g, \"&amp;\")\n    .replace(/</g, \"&lt;\")\n    .replace(/>/g, \"&gt;\")\n    .replace(/\"/g, \"&quot;\")\n    .replace(/'/g, \"&#039;\");\n};\n\nconst sanitizeLanguage = (lang: string): string =>\n  lang.replace(/[^a-zA-Z0-9_-]/g, \"\");\n\nconst highlightCode = (code: string, language: string): string => {\n  const escapedCode = escapeHtml(code);\n  const safeLang = sanitizeLanguage(language);\n  const result = unified()\n    .use(rehypeParse, { fragment: true })\n    .use(rehypeHighlight, {\n      detect: true,\n      ignoreMissing: true,\n    })\n    .use(rehypeStringify)\n    .processSync(\n      `<pre><code class=\"language-${safeLang}\">${escapedCode}</code></pre>`,\n    );\n\n  return String(result);\n};\n\nfunction Code({ code, language = \"javascript\", theme, className }: CodeProps) {\n  const [copied, setCopied] = useState(false);\n  const highlightedCode = useMemo(\n    () => highlightCode(code, language),\n    [code, language],\n  );\n\n  const handleCopy = useCallback(async () => {\n    try {\n      await navigator.clipboard.writeText(code);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch (err) {\n      console.error(\"Failed to copy code:\", err);\n    }\n  }, [code]);\n\n  return (\n    <CodeWrapper\n      className={`${className ?? \"\"} code-wrapper`.trim()}\n      theme={theme}\n    >\n      <TopBar theme={theme}>\n        <DotsContainer>\n          <Dot theme={theme} />\n          <Dot theme={theme} />\n          <Dot theme={theme} />\n        </DotsContainer>\n        <CopyButton onClick={handleCopy} $copied={copied} theme={theme}>\n          {copied ? (\n            <>\n              <Icon name=\"check\" size={12} />\n              <span>Copied!</span>\n            </>\n          ) : (\n            <>\n              <Icon name=\"copy\" size={12} />\n              <span>Copy</span>\n            </>\n          )}\n        </CopyButton>\n      </TopBar>\n      <Body\n        dangerouslySetInnerHTML={{ __html: highlightedCode }}\n        theme={theme}\n        className=\"code-wrapper-body\"\n      />\n    </CodeWrapper>\n  );\n}\n\nexport { Code };\n";

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

@@ -1,8 +1,8 @@
 export const codeTemplate = `"use client";
 import { useState, useCallback, useMemo } from "react";
-import styled from "styled-components";
-import { Theme, styledCode } from "cherry-styled-components";
-import { rgba } from "polished";
+import styled, { css } from "styled-components";
+import { styledCode } from "cherry-styled-components";
+import { Theme } from "@/app/theme";
 import { unified } from "unified";
 import rehypeParse from "rehype-parse";
 import rehypeHighlight from "rehype-highlight";
@@ -24,20 +24,22 @@ const CodeWrapper = styled.span<{ theme: Theme }>\`
   display: block;
   width: 100%;
   border-radius: \${({ theme }) => theme.spacing.radius.lg};
-  border: solid 1px
-    \${({ theme }) =>
-      theme.isDark
-        ? rgba(theme.colors.dark, 0.2)
-        : rgba(theme.colors.dark, 0.1)};
+  border: solid 1px rgba(0, 0, 0, 0.1);
+
+  :root.dark & {
+    border-color: rgba(255, 255, 255, 0.2);
+  }
 \`;
 
+/* Code block uses a fixed GitHub-style palette in both modes. Independent of
+   theme.json so syntax highlighting stays legible regardless of brand colors.
+   Dark variants live in :root.dark & blocks so the swap happens via the
+   active <html> class with no re-render. */
 const TopBar = styled.div<{ theme: Theme }>\`
-  background: \${({ theme }) => (theme.isDark ? "#0d1117" : "#f6f8fa")};
+  background: #f6f8fa;
   border-top-left-radius: \${({ theme }) => theme.spacing.radius.lg};
   border-top-right-radius: \${({ theme }) => theme.spacing.radius.lg};
-  border-bottom: solid 1px
-    \${({ theme }) =>
-      theme.isDark ? rgba("#ffffff", 0.1) : rgba("#000000", 0.1)};
+  border-bottom: solid 1px rgba(0, 0, 0, 0.1);
   height: 33px;
   width: 100%;
   display: flex;
@@ -45,6 +47,11 @@ const TopBar = styled.div<{ theme: Theme }>\`
   align-items: center;
   gap: 5px;
   padding: 0 10px;
+
+  :root.dark & {
+    background: #0d1117;
+    border-bottom-color: rgba(255, 255, 255, 0.1);
+  }
 \`;
 
 const DotsContainer = styled.div\`
@@ -56,34 +63,19 @@ const Dot = styled.span<{ theme: Theme }>\`
   width: 10px;
   height: 10px;
   border-radius: 50%;
-  background: \${({ theme }) =>
-    theme.isDark ? rgba("#ffffff", 0.1) : rgba("#000000", 0.1)};
+  background: rgba(0, 0, 0, 0.1);
+
+  :root.dark & {
+    background: rgba(255, 255, 255, 0.1);
+  }
 \`;
 
 const CopyButton = styled.button<{ theme: Theme; $copied: boolean }>\`
-  background: \${({ theme, $copied }) =>
-    $copied
-      ? theme.isDark
-        ? rgba("#7ee787", 0.2)
-        : rgba("#2da44e", 0.1)
-      : "transparent"};
+  background: \${({ $copied }) =>
+    $copied ? "rgba(45, 164, 78, 0.1)" : "transparent"};
   border: solid 1px
-    \${({ theme, $copied }) =>
-      $copied
-        ? theme.isDark
-          ? "#7ee787"
-          : "#2da44e"
-        : theme.isDark
-          ? rgba("#ffffff", 0.1)
-          : rgba("#000000", 0.1)};
-  color: \${({ theme, $copied }) =>
-    $copied
-      ? theme.isDark
-        ? "#7ee787"
-        : "#2da44e"
-      : theme.isDark
-        ? "#c9d1d9"
-        : "#57606a"};
+    \${({ $copied }) => ($copied ? "#2da44e" : "rgba(0, 0, 0, 0.1)")};
+  color: \${({ $copied }) => ($copied ? "#2da44e" : "#57606a")};
   border-radius: \${({ theme }) => theme.spacing.radius.xs};
   padding: 4px 8px;
   font-size: 12px;
@@ -96,45 +88,208 @@ const CopyButton = styled.button<{ theme: Theme; $copied: boolean }>\`
   margin-right: -6px;
 
   & svg.lucide {
-    color: \${({ theme, $copied }) =>
-      $copied
-        ? theme.isDark
-          ? "#7ee787"
-          : "#2da44e"
-        : theme.isDark
-          ? "#c9d1d9"
-          : "#57606a"};
+    color: \${({ $copied }) => ($copied ? "#2da44e" : "#57606a")};
   }
 
   &:hover {
-    background: \${({ theme, $copied }) =>
-      $copied
-        ? theme.isDark
-          ? rgba("#7ee787", 0.3)
-          : rgba("#2da44e", 0.2)
-        : theme.isDark
-          ? rgba("#ffffff", 0.1)
-          : rgba("#000000", 0.05)};
-    border-color: \${({ theme, $copied }) =>
-      $copied
-        ? theme.isDark
-          ? "#7ee787"
-          : "#2da44e"
-        : theme.isDark
-          ? rgba("#ffffff", 0.2)
-          : rgba("#000000", 0.2)};
+    background: \${({ $copied }) =>
+      $copied ? "rgba(45, 164, 78, 0.2)" : "rgba(0, 0, 0, 0.05)"};
+    border-color: \${({ $copied }) =>
+      $copied ? "#2da44e" : "rgba(0, 0, 0, 0.2)"};
   }
 
   &:active {
     transform: scale(0.95);
   }
+
+  :root.dark & {
+    background: \${({ $copied }) =>
+      $copied ? "rgba(126, 231, 135, 0.2)" : "transparent"};
+    border-color: \${({ $copied }) =>
+      $copied ? "#7ee787" : "rgba(255, 255, 255, 0.1)"};
+    color: \${({ $copied }) => ($copied ? "#7ee787" : "#c9d1d9")};
+
+    & svg.lucide {
+      color: \${({ $copied }) => ($copied ? "#7ee787" : "#c9d1d9")};
+    }
+
+    &:hover {
+      background: \${({ $copied }) =>
+        $copied ? "rgba(126, 231, 135, 0.3)" : "rgba(255, 255, 255, 0.1)"};
+      border-color: \${({ $copied }) =>
+        $copied ? "#7ee787" : "rgba(255, 255, 255, 0.2)"};
+    }
+  }
+\`;
+
+/* GitHub Light syntax highlighting by default; GitHub Dark in :root.dark.
+   Browser resolves which rule wins based on the active <html> class with no
+   JS or React re-render involved. */
+const lightSyntaxHighlight = css\`
+  & .hljs {
+    color: #24292f;
+    background: #ffffff;
+  }
+  & .hljs-doctag,
+  & .hljs-keyword,
+  & .hljs-meta .hljs-keyword,
+  & .hljs-template-tag,
+  & .hljs-template-variable,
+  & .hljs-type,
+  & .hljs-variable.language_ {
+    color: #cf222e;
+  }
+  & .hljs-title,
+  & .hljs-title.class_,
+  & .hljs-title.class_.inherited__,
+  & .hljs-title.function_ {
+    color: #8250df;
+  }
+  & .hljs-attr,
+  & .hljs-attribute,
+  & .hljs-literal,
+  & .hljs-meta,
+  & .hljs-number,
+  & .hljs-operator,
+  & .hljs-selector-attr,
+  & .hljs-selector-class,
+  & .hljs-selector-id,
+  & .hljs-variable {
+    color: #0550ae;
+  }
+  & .hljs-meta .hljs-string,
+  & .hljs-regexp,
+  & .hljs-string {
+    color: #0a3069;
+  }
+  & .hljs-built_in,
+  & .hljs-symbol {
+    color: #953800;
+  }
+  & .hljs-code,
+  & .hljs-comment,
+  & .hljs-formula {
+    color: #6e7781;
+  }
+  & .hljs-name,
+  & .hljs-quote,
+  & .hljs-selector-pseudo,
+  & .hljs-selector-tag {
+    color: #116329;
+  }
+  & .hljs-subst {
+    color: #24292f;
+  }
+  & .hljs-section {
+    color: #0550ae;
+    font-weight: 700;
+  }
+  & .hljs-bullet {
+    color: #953800;
+  }
+  & .hljs-emphasis {
+    color: #24292f;
+    font-style: italic;
+  }
+  & .hljs-strong {
+    color: #24292f;
+    font-weight: 700;
+  }
+  & .hljs-addition {
+    color: #116329;
+    background-color: #dafbe1;
+  }
+  & .hljs-deletion {
+    color: #82071e;
+    background-color: #ffebe9;
+  }
+\`;
+
+const darkSyntaxHighlight = css\`
+  & .hljs {
+    color: #c9d1d9;
+    background: #0d1117;
+  }
+  & .hljs-doctag,
+  & .hljs-keyword,
+  & .hljs-meta .hljs-keyword,
+  & .hljs-template-tag,
+  & .hljs-template-variable,
+  & .hljs-type,
+  & .hljs-variable.language_ {
+    color: #ff7b72;
+  }
+  & .hljs-title,
+  & .hljs-title.class_,
+  & .hljs-title.class_.inherited__,
+  & .hljs-title.function_ {
+    color: #d2a8ff;
+  }
+  & .hljs-attr,
+  & .hljs-attribute,
+  & .hljs-literal,
+  & .hljs-meta,
+  & .hljs-number,
+  & .hljs-operator,
+  & .hljs-selector-attr,
+  & .hljs-selector-class,
+  & .hljs-selector-id,
+  & .hljs-variable {
+    color: #79c0ff;
+  }
+  & .hljs-meta .hljs-string,
+  & .hljs-regexp,
+  & .hljs-string {
+    color: #a5d6ff;
+  }
+  & .hljs-built_in,
+  & .hljs-symbol {
+    color: #ffa657;
+  }
+  & .hljs-code,
+  & .hljs-comment,
+  & .hljs-formula {
+    color: #8b949e;
+  }
+  & .hljs-name,
+  & .hljs-quote,
+  & .hljs-selector-pseudo,
+  & .hljs-selector-tag {
+    color: #7ee787;
+  }
+  & .hljs-subst {
+    color: #c9d1d9;
+  }
+  & .hljs-section {
+    color: #1f6feb;
+    font-weight: 700;
+  }
+  & .hljs-bullet {
+    color: #f2cc60;
+  }
+  & .hljs-emphasis {
+    color: #c9d1d9;
+    font-style: italic;
+  }
+  & .hljs-strong {
+    color: #c9d1d9;
+    font-weight: 700;
+  }
+  & .hljs-addition {
+    color: #aff5b4;
+    background-color: #033a16;
+  }
+  & .hljs-deletion {
+    color: #ffdcd7;
+    background-color: #67060c;
+  }
 \`;
 
 const Body = styled.div<{ theme: Theme }>\`
-  background: \${({ theme }) => (theme.isDark ? "#0d1117" : "#ffffff")};
+  background: #ffffff;
   border-bottom-left-radius: \${({ theme }) => theme.spacing.radius.lg};
   border-bottom-right-radius: \${({ theme }) => theme.spacing.radius.lg};
-  color: \${({ theme }) => (theme.isDark ? "#ffffff" : "#24292f")};
+  color: #24292f;
   padding: 20px;
   font-family: \${({ theme }) => theme.fonts.mono};
   text-align: left;
@@ -142,200 +297,13 @@ const Body = styled.div<{ theme: Theme }>\`
   overflow-y: auto;
   max-height: calc(100dvh - 400px);
   \${({ theme }) => styledCode(theme)};
+  \${lightSyntaxHighlight};
 
-  /* Dark mode syntax highlighting (GitHub Dark) */
-  \${({ theme }) =>
-    theme.isDark &&
-    \`
-    & .hljs {
-      color: #c9d1d9;
-      background: #0d1117;
-    }
-
-    & .hljs-doctag,
-    & .hljs-keyword,
-    & .hljs-meta .hljs-keyword,
-    & .hljs-template-tag,
-    & .hljs-template-variable,
-    & .hljs-type,
-    & .hljs-variable.language_ {
-      color: #ff7b72;
-    }
-
-    & .hljs-title,
-    & .hljs-title.class_,
-    & .hljs-title.class_.inherited__,
-    & .hljs-title.function_ {
-      color: #d2a8ff;
-    }
-
-    & .hljs-attr,
-    & .hljs-attribute,
-    & .hljs-literal,
-    & .hljs-meta,
-    & .hljs-number,
-    & .hljs-operator,
-    & .hljs-selector-attr,
-    & .hljs-selector-class,
-    & .hljs-selector-id,
-    & .hljs-variable {
-      color: #79c0ff;
-    }
-
-    & .hljs-meta .hljs-string,
-    & .hljs-regexp,
-    & .hljs-string {
-      color: #a5d6ff;
-    }
-
-    & .hljs-built_in,
-    & .hljs-symbol {
-      color: #ffa657;
-    }
-
-    & .hljs-code,
-    & .hljs-comment,
-    & .hljs-formula {
-      color: #8b949e;
-    }
-
-    & .hljs-name,
-    & .hljs-quote,
-    & .hljs-selector-pseudo,
-    & .hljs-selector-tag {
-      color: #7ee787;
-    }
-
-    & .hljs-subst {
-      color: #c9d1d9;
-    }
-
-    & .hljs-section {
-      color: #1f6feb;
-      font-weight: 700;
-    }
-
-    & .hljs-bullet {
-      color: #f2cc60;
-    }
-
-    & .hljs-emphasis {
-      color: #c9d1d9;
-      font-style: italic;
-    }
-
-    & .hljs-strong {
-      color: #c9d1d9;
-      font-weight: 700;
-    }
-
-    & .hljs-addition {
-      color: #aff5b4;
-      background-color: #033a16;
-    }
-
-    & .hljs-deletion {
-      color: #ffdcd7;
-      background-color: #67060c;
-    }
-  \`}
-
-  /* Light mode syntax highlighting (GitHub Light) */
-  \${({ theme }) =>
-    !theme.isDark &&
-    \`
-    & .hljs {
-      color: #24292f;
-      background: #ffffff;
-    }
-
-    & .hljs-doctag,
-    & .hljs-keyword,
-    & .hljs-meta .hljs-keyword,
-    & .hljs-template-tag,
-    & .hljs-template-variable,
-    & .hljs-type,
-    & .hljs-variable.language_ {
-      color: #cf222e;
-    }
-
-    & .hljs-title,
-    & .hljs-title.class_,
-    & .hljs-title.class_.inherited__,
-    & .hljs-title.function_ {
-      color: #8250df;
-    }
-
-    & .hljs-attr,
-    & .hljs-attribute,
-    & .hljs-literal,
-    & .hljs-meta,
-    & .hljs-number,
-    & .hljs-operator,
-    & .hljs-selector-attr,
-    & .hljs-selector-class,
-    & .hljs-selector-id,
-    & .hljs-variable {
-      color: #0550ae;
-    }
-
-    & .hljs-meta .hljs-string,
-    & .hljs-regexp,
-    & .hljs-string {
-      color: #0a3069;
-    }
-
-    & .hljs-built_in,
-    & .hljs-symbol {
-      color: #953800;
-    }
-
-    & .hljs-code,
-    & .hljs-comment,
-    & .hljs-formula {
-      color: #6e7781;
-    }
-
-    & .hljs-name,
-    & .hljs-quote,
-    & .hljs-selector-pseudo,
-    & .hljs-selector-tag {
-      color: #116329;
-    }
-
-    & .hljs-subst {
-      color: #24292f;
-    }
-
-    & .hljs-section {
-      color: #0550ae;
-      font-weight: 700;
-    }
-
-    & .hljs-bullet {
-      color: #953800;
-    }
-
-    & .hljs-emphasis {
-      color: #24292f;
-      font-style: italic;
-    }
-
-    & .hljs-strong {
-      color: #24292f;
-      font-weight: 700;
-    }
-
-    & .hljs-addition {
-      color: #116329;
-      background-color: #dafbe1;
-    }
-
-    & .hljs-deletion {
-      color: #82071e;
-      background-color: #ffebe9;
-    }
-  \`}
+  :root.dark & {
+    background: #0d1117;
+    color: #ffffff;
+    \${darkSyntaxHighlight};
+  }
 \`;
 
 const escapeHtml = (unsafe: string): string => {

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

@@ -1 +1 @@
-export declare const colorSwatchTemplate = "\"use client\";\nimport styled from \"styled-components\";\nimport { styledText, Theme } from \"cherry-styled-components\";\nimport { mq } from \"@/app/theme\";\n\nconst StyledSwatchGroup = styled.div<{ theme: Theme }>`\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: ${({ theme }) => theme.spacing.gridGap.xs};\n\n  ${mq(\"md\")} {\n    grid-template-columns: repeat(3, 1fr);\n  }\n`;\n\nconst StyledSwatch = styled.div<{ theme: Theme }>`\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  overflow: hidden;\n`;\n\nconst StyledColor = styled.div<{\n  theme: Theme;\n  $color: string;\n  $lightText: boolean;\n}>`\n  background: ${({ $color }) => $color};\n  height: 80px;\n  display: flex;\n  align-items: flex-end;\n  padding: 8px 12px;\n  color: ${({ $lightText }) => ($lightText ? \"#FFFFFF\" : \"#000000\")};\n  font-size: 12px;\n  font-family: monospace;\n  opacity: 0.8;\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n`;\n\nconst StyledLabel = styled.div<{ theme: Theme }>`\n  padding: 10px 12px;\n  background: ${({ theme }) => theme.colors.light};\n  ${({ theme }) => styledText(theme)};\n  font-size: 13px;\n  color: ${({ theme }) => theme.colors.grayDark};\n\n  code {\n    color: ${({ theme }) => theme.colors.dark};\n    font-weight: 600;\n    font-size: 13px;\n  }\n`;\n\nfunction luminance(hex: string): number {\n  const rgb = hex\n    .replace(\"#\", \"\")\n    .match(/.{2}/g)!\n    .map((c) => parseInt(c, 16) / 255);\n\n  const [r, g, b] = rgb.map((c) =>\n    c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4),\n  );\n\n  return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n}\n\ninterface ColorSwatchProps {\n  token: string;\n  value: string;\n}\n\nfunction ColorSwatch({ token, value }: ColorSwatchProps) {\n  const useLightText = luminance(value) < 0.4;\n\n  return (\n    <StyledSwatch>\n      <StyledColor $color={value} $lightText={useLightText}>\n        {value}\n      </StyledColor>\n      <StyledLabel>\n        <code className=\"token\">{token}</code>\n      </StyledLabel>\n    </StyledSwatch>\n  );\n}\n\ninterface ColorSwatchGroupProps {\n  children: React.ReactNode;\n}\n\nfunction ColorSwatchGroup({ children }: ColorSwatchGroupProps) {\n  return <StyledSwatchGroup>{children}</StyledSwatchGroup>;\n}\n\nexport { ColorSwatch, ColorSwatchGroup };\n";
+export declare const colorSwatchTemplate = "\"use client\";\nimport styled from \"styled-components\";\nimport { styledText } from \"cherry-styled-components\";\nimport { mq, Theme } from \"@/app/theme\";\n\nconst StyledSwatchGroup = styled.div<{ theme: Theme }>`\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: ${({ theme }) => theme.spacing.gridGap.xs};\n\n  ${mq(\"md\")} {\n    grid-template-columns: repeat(3, 1fr);\n  }\n`;\n\nconst StyledSwatch = styled.div<{ theme: Theme }>`\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  overflow: hidden;\n`;\n\nconst StyledColor = styled.div<{\n  theme: Theme;\n  $color: string;\n  $lightText: boolean;\n}>`\n  background: ${({ $color }) => $color};\n  height: 80px;\n  display: flex;\n  align-items: flex-end;\n  padding: 8px 12px;\n  color: ${({ $lightText }) => ($lightText ? \"#FFFFFF\" : \"#000000\")};\n  font-size: 12px;\n  font-family: monospace;\n  opacity: 0.8;\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n`;\n\nconst StyledLabel = styled.div<{ theme: Theme }>`\n  padding: 10px 12px;\n  background: ${({ theme }) => theme.colors.light};\n  ${({ theme }) => styledText(theme)};\n  font-size: 13px;\n  color: ${({ theme }) => theme.colors.grayDark};\n\n  code {\n    color: ${({ theme }) => theme.colors.dark};\n    font-weight: 600;\n    font-size: 13px;\n  }\n`;\n\nfunction luminance(hex: string): number {\n  const rgb = hex\n    .replace(\"#\", \"\")\n    .match(/.{2}/g)!\n    .map((c) => parseInt(c, 16) / 255);\n\n  const [r, g, b] = rgb.map((c) =>\n    c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4),\n  );\n\n  return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n}\n\ninterface ColorSwatchProps {\n  token: string;\n  value: string;\n}\n\nfunction ColorSwatch({ token, value }: ColorSwatchProps) {\n  const useLightText = luminance(value) < 0.4;\n\n  return (\n    <StyledSwatch>\n      <StyledColor $color={value} $lightText={useLightText}>\n        {value}\n      </StyledColor>\n      <StyledLabel>\n        <code className=\"token\">{token}</code>\n      </StyledLabel>\n    </StyledSwatch>\n  );\n}\n\ninterface ColorSwatchGroupProps {\n  children: React.ReactNode;\n}\n\nfunction ColorSwatchGroup({ children }: ColorSwatchGroupProps) {\n  return <StyledSwatchGroup>{children}</StyledSwatchGroup>;\n}\n\nexport { ColorSwatch, ColorSwatchGroup };\n";

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

@@ -1,7 +1,7 @@
 export const colorSwatchTemplate = `"use client";
 import styled from "styled-components";
-import { styledText, Theme } from "cherry-styled-components";
-import { mq } from "@/app/theme";
+import { styledText } from "cherry-styled-components";
+import { mq, Theme } from "@/app/theme";
 
 const StyledSwatchGroup = styled.div<{ theme: Theme }>\`
   display: grid;

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    ${({ $columns }) =>\n      $columns && $columns >= 3\n        ? `display: grid; grid-template-columns: repeat(2, 1fr);`\n        : \"\"}\n  }\n\n  ${mq(\"xl\")} {\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";
+export declare const columnsTemplate = "\"use client\";\nimport styled from \"styled-components\";\nimport { mq, Theme } from \"@/app/theme\";\n\nconst StyledColumns = styled.div<{ theme: Theme; $columns?: number }>`\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n\n  ${mq(\"lg\")} {\n    ${({ $columns }) =>\n      $columns && $columns >= 3\n        ? `display: grid; grid-template-columns: repeat(2, 1fr);`\n        : \"\"}\n  }\n\n  ${mq(\"xl\")} {\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

@@ -1,6 +1,6 @@
 export const columnsTemplate = `"use client";
 import styled from "styled-components";
-import { mq, Theme } from "cherry-styled-components";
+import { mq, Theme } from "@/app/theme";
 
 const StyledColumns = styled.div<{ theme: Theme; $columns?: number }>\`
   display: flex;