fix: copy button; update deps

.changeset/rare-pots-add.md

@@ -0,0 +1,5 @@
+---
+"vocs": patch
+---
+
+Updated dependencies.

.changeset/shiny-boats-rest.md

@@ -0,0 +1,5 @@
+---
+"vocs": patch
+---
+
+Fixed copy button not displaying on code snippets.

src/app/components/CopyButton.css.ts

@@ -33,8 +33,19 @@ export const root = style({
     '&:hover:active': {
       backgroundColor: primitiveColorVars.background2,
     },
+    '&[data-copied="true"]:hover:active': {
+      backgroundColor: primitiveColorVars.background4,
+    },
     [`${Pre}:hover &`]: {
       opacity: 1,
     },
   },
 })
+
+export const copied = style(
+  {
+    height: '12px',
+    width: '12px',
+  },
+  'copied',
+)

src/app/components/CopyButton.tsx

@@ -5,9 +5,9 @@ import { Copy } from './icons/Copy.js'
 
 export function CopyButton({ copy, copied }: { copy: () => void; copied: boolean }) {
   return (
-    <button className={styles.root} onClick={copy} type="button">
+    <button className={styles.root} data-copied={copied} onClick={copy} type="button">
       {copied ? (
-        <Icon label="Copied" size="14px" icon={Checkmark} />
+        <Icon label="Copied" size="14px" className={styles.copied} icon={Checkmark} />
       ) : (
         <Icon label="Copy" size="18px" icon={Copy} />
       )}

src/app/components/icons/Copy.tsx

@@ -3,19 +3,18 @@ export function Copy() {
     <svg
       width="100%"
       height="100%"
-      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 66 95"
       fill="none"
-      viewBox="0 0 82 82"
+      xmlns="http://www.w3.org/2000/svg"
     >
       <title>Copy</title>
       <path
+        d="M65.3633 81.6778V24.2559C65.3633 15.9551 61.2617 11.8047 53.0586 11.8047H12.5801C4.377 11.8047 0.324219 15.9551 0.324219 24.2559V81.6778C0.324219 90.0274 4.377 94.1289 12.5801 94.1289H53.0586C61.2617 94.1289 65.3633 90.0274 65.3633 81.6778ZM7.3555 81.5801V24.3536C7.3555 20.8379 9.2598 18.8848 12.9707 18.8848H52.7168C56.3789 18.8848 58.2832 20.8379 58.2832 24.3536V81.5801C58.2832 85.0957 56.3789 87.0977 52.7168 87.0977H12.9707C9.2598 87.0977 7.3555 85.0957 7.3555 81.5801Z"
         fill="currentColor"
-        d="M12.451 63.281h38.38c8.3 0 12.45-4.053 12.45-12.256v-38.77C63.281 4.054 59.131 0 50.831 0H12.45C4.101 0 0 4.053 0 12.256v38.77C0 59.227 4.102 63.28 12.451 63.28Zm.098-7.031c-3.516 0-5.518-1.904-5.518-5.615V12.647c0-3.711 2.002-5.616 5.518-5.616h38.183c3.516 0 5.518 1.905 5.518 5.615v37.989c0 3.71-2.002 5.615-5.518 5.615H12.55Z"
       />
       <path
-        stroke="currentColor"
-        strokeWidth="6.75px"
-        d="M69.385 78.266h-38.38c-3.679 0-5.782-.894-6.987-2.081-1.196-1.178-2.088-3.219-2.088-6.8v-38.77c0-3.581.892-5.622 2.088-6.8 1.205-1.187 3.308-2.08 6.988-2.08h38.379c3.65 0 5.758.89 6.973 2.084 1.203 1.182 2.103 3.225 2.103 6.796v38.77c0 3.57-.9 5.614-2.103 6.796-1.215 1.193-3.323 2.085-6.973 2.085Z"
+        d="M20.9297 21.0821H44.709C47.1016 21.0821 48.5664 19.5684 48.5664 16.9805V12.879C48.5664 10.2911 47.1016 8.77737 44.709 8.77737H41.5352C41.2422 4.28517 37.4824 0.671875 32.8438 0.671875C28.2051 0.671875 24.4453 4.28517 24.1035 8.77737H20.9297C18.5371 8.77737 17.1211 10.2911 17.1211 12.879V16.9805C17.1211 19.5684 18.5371 21.0821 20.9297 21.0821ZM32.8438 12.4395C31.0371 12.4395 29.5234 10.9258 29.5234 9.11918C29.5234 7.31258 31.0371 5.84768 32.8438 5.84768C34.6504 5.84768 36.1152 7.31258 36.1152 9.11918C36.1152 10.9258 34.6504 12.4395 32.8438 12.4395Z"
+        fill="currentColor"
       />
     </svg>
   )

src/app/components/mdx/Pre.tsx

@@ -50,7 +50,7 @@ export function Pre({
   return wrap(
     <div className={clsx(styles.wrapper)}>
       <pre ref={ref} {...props} className={clsx(className, styles.root)}>
-        {'data-language' in props && <CopyButton copied={copied} copy={copy} />}
+        <CopyButton copied={copied} copy={copy} />
         {children_}
       </pre>
     </div>,