Remove client directive

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

canon-docs/src/components/CodeBlock/client.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { CodeBlockProps } from '.';
+import { Text } from '../../../../packages/canon';
+import styles from './styles.module.css';
+
+export const CodeBlockClient = ({
+  out,
+  title,
+}: {
+  out: string;
+  title?: CodeBlockProps['title'];
+}) => {
+  return (
+    <div className={styles.codeBlock}>
+      {title && (
+        <div className={styles.title}>
+          <Text variant="body">{title}</Text>
+        </div>
+      )}
+      <div dangerouslySetInnerHTML={{ __html: out }} className={styles.code} />
+    </div>
+  );
+};

canon-docs/src/components/CodeBlock/index.tsx

@@ -1,10 +1,8 @@
-import React from 'react';
 import type { BundledLanguage } from 'shiki';
 import { codeToHtml } from 'shiki';
-import { Text } from '../../../../packages/canon/src/components/Text';
-import styles from './styles.module.css';
+import { CodeBlockClient } from './client';
 
-interface CodeBlockProps {
+export interface CodeBlockProps {
   lang?: BundledLanguage;
   title?: string;
   code?: string;
@@ -19,14 +17,5 @@ export async function CodeBlock({ lang = 'tsx', title, code }: CodeBlockProps) {
     },
   });
 
-  return (
-    <div className={styles.codeBlock}>
-      {title && (
-        <div className={styles.title}>
-          <Text variant="body">{title}</Text>
-        </div>
-      )}
-      <div dangerouslySetInnerHTML={{ __html: out }} className={styles.code} />
-    </div>
-  );
+  return <CodeBlockClient out={out} title={title} />;
 }

canon-docs/src/mdx-components.tsx

@@ -6,7 +6,6 @@ import { Box } from '../../packages/canon/src/components/Box';
 
 export function useMDXComponents(components: MDXComponents): MDXComponents {
   return {
-    // Allows customizing built-in components, e.g. to add styling.
     h1: ({ children }) => (
       <Box style={{ marginTop: '4rem' }}>
         <h1

packages/canon/src/components/Button/Button.tsx

@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-'use client';
-
 import React, { forwardRef } from 'react';
 import { Icon } from '../Icon';
 import clsx from 'clsx';

packages/canon/src/components/Heading/Heading.tsx

@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-'use client';
-
 import React, { forwardRef } from 'react';
 import clsx from 'clsx';
 import { useResponsiveValue } from '../../hooks/useResponsiveValue';

packages/canon/src/components/Icon/Icon.tsx

@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-'use client';
-
 import React from 'react';
 import { useCanon } from '../../contexts/canon';
 import type { IconProps } from './types';

packages/canon/src/components/Input/Input.tsx

@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-'use client';
-
 import React, { ElementRef, forwardRef } from 'react';
 import { Input as InputPrimitive } from '@base-ui-components/react/input';
 import clsx from 'clsx';

packages/canon/src/components/Text/Text.tsx

@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-'use client';
-
 import React, { forwardRef } from 'react';
 import { useResponsiveValue } from '../../hooks/useResponsiveValue';
 import clsx from 'clsx';

packages/canon/src/contexts/canon.tsx

@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-'use client';
-
 import React, { createContext, ReactNode, useContext } from 'react';
 import { icons } from '../components/Icon/icons';
 import { IconMap, IconNames } from '../components/Icon/types';