npm - @memori.ai/memori-react - Versions diffs - 6.8.1 → 6.8.4 - Mend

@memori.ai/memori-react 6.8.1 → 6.8.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1197) hide show

package/src/components/Snippet/__snapshots__/Snippet.test.tsx.snap CHANGED Viewed

@@ -10,86 +10,14 @@ exports[`renders SnippetUpload with css code 1`] = `
     >
       <pre
         aria-labelledby="#snippet-a669fadb-12c0-469b-9b6c-34db22d371ca"
-        style="color: rgb(197, 200, 198); text-shadow: 0 1px rgba(0, 0, 0, 0.3); font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; line-height: 1.5; tab-size: 4; hyphens: none; padding: 1em; margin: .5em 0px; overflow: auto; border-radius: 0.3em; background: rgb(29, 31, 33);"
+        class="line-numbers"
       >
         <code
           class="language-scss"
-          style="color: rgb(197, 200, 198); text-shadow: 0 1px rgba(0, 0, 0, 0.3); font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; line-height: 1.5; tab-size: 4; hyphens: none;"
         >
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 2.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            1
-          </span>
-          <span
-            class="token"
-            style="color: rgb(168, 255, 96);"
-          >
-            body
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            {
-          </span>
-          <span>
-          </span>
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 2.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            2
-          </span>
-          <span>
-          </span>
-          <span
-            class="token"
-            style="color: rgb(150, 203, 254);"
-          >
-            background-color
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            :
-          </span>
-          <span>
-          </span>
-          <span
-            class="token hexcode color"
-          >
-            #f00
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            ;
-          </span>
-          <span>
-          </span>
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 2.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            3
-          </span>
-          <span />
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            }
-          </span>
+          body {
+  background-color: #f00;
+}
         </code>
       </pre>
       <button
@@ -101,13 +29,26 @@ exports[`renders SnippetUpload with css code 1`] = `
         >
           <svg
             aria-hidden="true"
+            fill="none"
             focusable="false"
             role="img"
-            viewBox="0 0 1024 1024"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+            viewBox="0 0 24 24"
             xmlns="http://www.w3.org/2000/svg"
           >
+            <rect
+              height="14"
+              rx="2"
+              ry="2"
+              width="14"
+              x="8"
+              y="8"
+            />
             <path
-              d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"
+              d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
             />
           </svg>
         </span>
@@ -133,59 +74,12 @@ exports[`renders SnippetUpload with html code 1`] = `
     >
       <pre
         aria-labelledby="#snippet-65ca4a6d-f20b-402e-9d79-5e470f247927"
-        style="color: rgb(197, 200, 198); text-shadow: 0 1px rgba(0, 0, 0, 0.3); font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; line-height: 1.5; tab-size: 4; hyphens: none; padding: 1em; margin: .5em 0px; overflow: auto; border-radius: 0.3em; background: rgb(29, 31, 33);"
+        class="line-numbers"
       >
         <code
           class="language-tsx"
-          style="color: rgb(197, 200, 198); text-shadow: 0 1px rgba(0, 0, 0, 0.3); font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; line-height: 1.5; tab-size: 4; hyphens: none;"
         >
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 1.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            1
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            &lt;
-          </span>
-          <span
-            class="token"
-            style="color: rgb(150, 203, 254);"
-          >
-            p
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            &gt;
-          </span>
-          <span
-            class="token plain-text"
-          >
-            ciao
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            &lt;/
-          </span>
-          <span
-            class="token"
-            style="color: rgb(150, 203, 254);"
-          >
-            p
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            &gt;
-          </span>
+          &lt;p&gt;ciao&lt;/p&gt;
         </code>
       </pre>
       <button
@@ -197,13 +91,26 @@ exports[`renders SnippetUpload with html code 1`] = `
         >
           <svg
             aria-hidden="true"
+            fill="none"
             focusable="false"
             role="img"
-            viewBox="0 0 1024 1024"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+            viewBox="0 0 24 24"
             xmlns="http://www.w3.org/2000/svg"
           >
+            <rect
+              height="14"
+              rx="2"
+              ry="2"
+              width="14"
+              x="8"
+              y="8"
+            />
             <path
-              d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"
+              d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
             />
           </svg>
         </span>
@@ -229,21 +136,10 @@ exports[`renders SnippetUpload with js code 1`] = `
     >
       <pre
         aria-labelledby="#snippet-95226d7e-7bae-465e-8b80-995587bb5971"
-        style="color: rgb(197, 200, 198); text-shadow: 0 1px rgba(0, 0, 0, 0.3); font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; line-height: 1.5; tab-size: 4; hyphens: none; padding: 1em; margin: .5em 0px; overflow: auto; border-radius: 0.3em; background: rgb(29, 31, 33);"
+        class="line-numbers"
       >
-        <code
-          style="color: rgb(197, 200, 198); text-shadow: 0 1px rgba(0, 0, 0, 0.3); font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; line-height: 1.5; tab-size: 4; hyphens: none; float: left; padding-right: 10px;"
-        >
-          <span
-            class="react-syntax-highlighter-line-number"
-          >
-            1
-          </span>
-        </code>
         <code
           class="language-jsx"
-          style="color: rgb(197, 200, 198); text-shadow: 0 1px rgba(0, 0, 0, 0.3); font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; line-height: 1.5; tab-size: 4; hyphens: none;"
         >
           console.log("Hello World!");
         </code>
@@ -257,13 +153,26 @@ exports[`renders SnippetUpload with js code 1`] = `
         >
           <svg
             aria-hidden="true"
+            fill="none"
             focusable="false"
             role="img"
-            viewBox="0 0 1024 1024"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+            viewBox="0 0 24 24"
             xmlns="http://www.w3.org/2000/svg"
           >
+            <rect
+              height="14"
+              rx="2"
+              ry="2"
+              width="14"
+              x="8"
+              y="8"
+            />
             <path
-              d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"
+              d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
             />
           </svg>
         </span>
@@ -289,60 +198,12 @@ exports[`renders SnippetUpload with js code without copy button 1`] = `
     >
       <pre
         aria-labelledby="#snippet-95226d7e-7bae-465e-8b80-995587bb5971"
-        style="color: rgb(197, 200, 198); text-shadow: 0 1px rgba(0, 0, 0, 0.3); font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; line-height: 1.5; tab-size: 4; hyphens: none; padding: 1em; margin: .5em 0px; overflow: auto; border-radius: 0.3em; background: rgb(29, 31, 33);"
+        class="line-numbers"
       >
         <code
           class="language-jsx"
-          style="color: rgb(197, 200, 198); text-shadow: 0 1px rgba(0, 0, 0, 0.3); font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; line-height: 1.5; tab-size: 4; hyphens: none;"
         >
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 1.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            1
-          </span>
-          <span
-            class="token console"
-            style="color: rgb(255, 255, 182); text-decoration: underline;"
-          >
-            console
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            .
-          </span>
-          <span
-            class="token method property-access"
-            style="color: rgb(218, 208, 133);"
-          >
-            log
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            (
-          </span>
-          <span
-            class="token"
-            style="color: rgb(168, 255, 96);"
-          >
-            "Hello World!"
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            )
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            ;
-          </span>
+          console.log("Hello World!");
         </code>
       </pre>
     </div>
@@ -366,54 +227,12 @@ exports[`renders SnippetUpload with js code without line numbers 1`] = `
     >
       <pre
         aria-labelledby="#snippet-95226d7e-7bae-465e-8b80-995587bb5971"
-        style="color: rgb(197, 200, 198); text-shadow: 0 1px rgba(0, 0, 0, 0.3); font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; line-height: 1.5; tab-size: 4; hyphens: none; padding: 1em; margin: .5em 0px; overflow: auto; border-radius: 0.3em; background: rgb(29, 31, 33);"
+        class="line-numbers"
       >
         <code
           class="language-jsx"
-          style="color: rgb(197, 200, 198); text-shadow: 0 1px rgba(0, 0, 0, 0.3); font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; line-height: 1.5; tab-size: 4; hyphens: none;"
         >
-          <span
-            class="token console"
-            style="color: rgb(255, 255, 182); text-decoration: underline;"
-          >
-            console
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            .
-          </span>
-          <span
-            class="token method property-access"
-            style="color: rgb(218, 208, 133);"
-          >
-            log
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            (
-          </span>
-          <span
-            class="token"
-            style="color: rgb(168, 255, 96);"
-          >
-            "Hello World!"
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            )
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            ;
-          </span>
+          console.log("Hello World!");
         </code>
       </pre>
       <button
@@ -425,13 +244,26 @@ exports[`renders SnippetUpload with js code without line numbers 1`] = `
         >
           <svg
             aria-hidden="true"
+            fill="none"
             focusable="false"
             role="img"
-            viewBox="0 0 1024 1024"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+            viewBox="0 0 24 24"
             xmlns="http://www.w3.org/2000/svg"
           >
+            <rect
+              height="14"
+              rx="2"
+              ry="2"
+              width="14"
+              x="8"
+              y="8"
+            />
             <path
-              d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"
+              d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
             />
           </svg>
         </span>
@@ -457,301 +289,17 @@ exports[`renders SnippetUpload with preview mode (clamping) 1`] = `
     >
       <pre
         aria-labelledby="#snippet-38dd29a5-cdf6-40f6-963a-8e42a7caaac1"
-        style="color: rgb(197, 200, 198); text-shadow: 0 1px rgba(0, 0, 0, 0.3); font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; line-height: 1.5; tab-size: 4; hyphens: none; padding: 1em; margin: .5em 0px; overflow: auto; border-radius: 0.3em; background: rgb(29, 31, 33);"
+        class="line-numbers"
       >
         <code
           class="language-jsx"
-          style="color: rgb(197, 200, 198); text-shadow: 0 1px rgba(0, 0, 0, 0.3); font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; line-height: 1.5; tab-size: 4; hyphens: none;"
         >
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 2.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            1
-          </span>
-          <span>
-          </span>
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 2.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            2
-          </span>
-          <span />
-          <span
-            class="token module"
-            style="color: rgb(150, 203, 254);"
-          >
-            import
-          </span>
-          <span>
-             type
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            {
-          </span>
-          <span>
-          </span>
-          <span
-            class="token maybe-class-name"
-          >
-            Medium
-          </span>
-          <span>
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            }
-          </span>
-          <span>
-          </span>
-          <span
-            class="token module"
-            style="color: rgb(150, 203, 254);"
-          >
-            from
-          </span>
-          <span>
-          </span>
-          <span
-            class="token"
-            style="color: rgb(168, 255, 96);"
-          >
-            'types'
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            ;
-          </span>
-          <span>
-          </span>
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 2.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            3
-          </span>
-          <span />
-          <span
-            class="token module"
-            style="color: rgb(150, 203, 254);"
-          >
-            import
-          </span>
-          <span>
-          </span>
-          <span
-            class="token imports"
-            style="color: rgb(197, 200, 198);"
-          >
-            {
-          </span>
-          <span
-            class="token imports"
-          >
-             prismSyntaxLangs
-          </span>
-          <span
-            class="token imports"
-            style="color: rgb(197, 200, 198);"
-          >
-            }
-          </span>
-          <span>
-          </span>
-          <span
-            class="token module"
-            style="color: rgb(150, 203, 254);"
-          >
-            from
-          </span>
-          <span>
-          </span>
-          <span
-            class="token"
-            style="color: rgb(168, 255, 96);"
-          >
-            'helpers/constants'
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            ;
-          </span>
-          <span>
-          </span>
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 2.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            4
-          </span>
-          <span />
-          <span
-            class="token module"
-            style="color: rgb(150, 203, 254);"
-          >
-            import
-          </span>
-          <span>
-          </span>
-          <span
-            class="token imports"
-            style="color: rgb(197, 200, 198);"
-          >
-            {
-          </span>
-          <span
-            class="token imports"
-          >
-          </span>
-          <span
-            class="token imports maybe-class-name"
-          >
-            PrismAsyncLight
-          </span>
-          <span
-            class="token imports"
-          >
-          </span>
-          <span
-            class="token imports module"
-            style="color: rgb(150, 203, 254);"
-          >
-            as
-          </span>
-          <span
-            class="token imports"
-          >
-          </span>
-          <span
-            class="token imports maybe-class-name"
-          >
-            SyntaxHighlighter
-          </span>
-          <span
-            class="token imports"
-          >
-          </span>
-          <span
-            class="token imports"
-            style="color: rgb(197, 200, 198);"
-          >
-            }
-          </span>
-          <span>
-          </span>
-          <span
-            class="token module"
-            style="color: rgb(150, 203, 254);"
-          >
-            from
-          </span>
-          <span>
-          </span>
-          <span
-            class="token"
-            style="color: rgb(168, 255, 96);"
-          >
-            'react-syntax-highlighter'
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            ;
-          </span>
-          <span>
-          </span>
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 2.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            5
-          </span>
-          <span />
-          <span
-            class="token module"
-            style="color: rgb(150, 203, 254);"
-          >
-            import
-          </span>
-          <span>
-          </span>
-          <span
-            class="token imports"
-            style="color: rgb(197, 200, 198);"
-          >
-            {
-          </span>
-          <span
-            class="token imports"
-          >
-             atomDark
-          </span>
-          <span
-            class="token imports"
-            style="color: rgb(197, 200, 198);"
-          >
-            }
-          </span>
-          <span>
-          </span>
-          <span
-            class="token module"
-            style="color: rgb(150, 203, 254);"
-          >
-            from
-          </span>
-          <span>
-             'r
-          </span>
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 2.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            6
-          </span>
-          <span />
-          <span
-            class="token spread"
-            style="color: rgb(237, 237, 237);"
-          >
-            ...
-          </span>
+import type { Medium } from 'types';
+import { prismSyntaxLangs } from 'helpers/constants';
+import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { atomDark } from 'r
+...
         </code>
       </pre>
       <button
@@ -763,13 +311,26 @@ exports[`renders SnippetUpload with preview mode (clamping) 1`] = `
         >
           <svg
             aria-hidden="true"
+            fill="none"
             focusable="false"
             role="img"
-            viewBox="0 0 1024 1024"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+            viewBox="0 0 24 24"
             xmlns="http://www.w3.org/2000/svg"
           >
+            <rect
+              height="14"
+              rx="2"
+              ry="2"
+              width="14"
+              x="8"
+              y="8"
+            />
             <path
-              d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"
+              d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
             />
           </svg>
         </span>
@@ -795,2012 +356,56 @@ exports[`renders SnippetUpload with react/tsx code 1`] = `
     >
       <pre
         aria-labelledby="#snippet-4946dca4-7103-4400-b80d-94b77f9a4f0a"
-        style="color: rgb(197, 200, 198); text-shadow: 0 1px rgba(0, 0, 0, 0.3); font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; line-height: 1.5; tab-size: 4; hyphens: none; padding: 1em; margin: .5em 0px; overflow: auto; border-radius: 0.3em; background: rgb(29, 31, 33);"
+        class="line-numbers"
       >
         <code
           class="language-jsx"
-          style="color: rgb(197, 200, 198); text-shadow: 0 1px rgba(0, 0, 0, 0.3); font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; line-height: 1.5; tab-size: 4; hyphens: none;"
         >
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 3.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            1
-          </span>
-          <span>
-          </span>
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 3.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            2
-          </span>
-          <span />
-          <span
-            class="token module"
-            style="color: rgb(150, 203, 254);"
-          >
-            import
-          </span>
-          <span>
-             type
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            {
-          </span>
-          <span>
-          </span>
-          <span
-            class="token maybe-class-name"
-          >
-            Medium
-          </span>
-          <span>
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            }
-          </span>
-          <span>
-          </span>
-          <span
-            class="token module"
-            style="color: rgb(150, 203, 254);"
-          >
-            from
-          </span>
-          <span>
-          </span>
-          <span
-            class="token"
-            style="color: rgb(168, 255, 96);"
-          >
-            'types'
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            ;
-          </span>
-          <span>
-          </span>
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 3.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            3
-          </span>
-          <span />
-          <span
-            class="token module"
-            style="color: rgb(150, 203, 254);"
-          >
-            import
-          </span>
-          <span>
-          </span>
-          <span
-            class="token imports"
-            style="color: rgb(197, 200, 198);"
-          >
-            {
-          </span>
-          <span
-            class="token imports"
-          >
-             prismSyntaxLangs
-          </span>
-          <span
-            class="token imports"
-            style="color: rgb(197, 200, 198);"
-          >
-            }
-          </span>
-          <span>
-          </span>
-          <span
-            class="token module"
-            style="color: rgb(150, 203, 254);"
-          >
-            from
-          </span>
-          <span>
-          </span>
-          <span
-            class="token"
-            style="color: rgb(168, 255, 96);"
-          >
-            'helpers/constants'
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            ;
-          </span>
-          <span>
-          </span>
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 3.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            4
-          </span>
-          <span />
-          <span
-            class="token module"
-            style="color: rgb(150, 203, 254);"
-          >
-            import
-          </span>
-          <span>
-          </span>
-          <span
-            class="token imports"
-            style="color: rgb(197, 200, 198);"
-          >
-            {
-          </span>
-          <span
-            class="token imports"
-          >
-          </span>
-          <span
-            class="token imports maybe-class-name"
-          >
-            PrismAsyncLight
-          </span>
-          <span
-            class="token imports"
-          >
-          </span>
-          <span
-            class="token imports module"
-            style="color: rgb(150, 203, 254);"
-          >
-            as
-          </span>
-          <span
-            class="token imports"
-          >
-          </span>
-          <span
-            class="token imports maybe-class-name"
-          >
-            SyntaxHighlighter
-          </span>
-          <span
-            class="token imports"
-          >
-          </span>
-          <span
-            class="token imports"
-            style="color: rgb(197, 200, 198);"
-          >
-            }
-          </span>
-          <span>
-          </span>
-          <span
-            class="token module"
-            style="color: rgb(150, 203, 254);"
-          >
-            from
-          </span>
-          <span>
-          </span>
-          <span
-            class="token"
-            style="color: rgb(168, 255, 96);"
-          >
-            'react-syntax-highlighter'
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            ;
-          </span>
-          <span>
-          </span>
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 3.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            5
-          </span>
-          <span />
-          <span
-            class="token module"
-            style="color: rgb(150, 203, 254);"
-          >
-            import
-          </span>
-          <span>
-          </span>
-          <span
-            class="token imports"
-            style="color: rgb(197, 200, 198);"
-          >
-            {
-          </span>
-          <span
-            class="token imports"
-          >
-             atomDark
-          </span>
-          <span
-            class="token imports"
-            style="color: rgb(197, 200, 198);"
-          >
-            }
-          </span>
-          <span>
-          </span>
-          <span
-            class="token module"
-            style="color: rgb(150, 203, 254);"
-          >
-            from
-          </span>
-          <span>
-          </span>
-          <span
-            class="token"
-            style="color: rgb(168, 255, 96);"
-          >
-            'react-syntax-highlighter/dist/cjs/styles/prism'
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            ;
-          </span>
-          <span>
-          </span>
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 3.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            6
-          </span>
-          <span />
-          <span
-            class="token module"
-            style="color: rgb(150, 203, 254);"
-          >
-            import
-          </span>
-          <span>
-          </span>
-          <span
-            class="token imports"
-          >
-            tsx
-          </span>
-          <span>
-          </span>
-          <span
-            class="token module"
-            style="color: rgb(150, 203, 254);"
-          >
-            from
-          </span>
-          <span>
-          </span>
-          <span
-            class="token"
-            style="color: rgb(168, 255, 96);"
-          >
-            'react-syntax-highlighter/dist/cjs/languages/prism/tsx'
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            ;
-          </span>
-          <span>
-          </span>
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 3.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            7
-          </span>
-          <span />
-          <span
-            class="token module"
-            style="color: rgb(150, 203, 254);"
-          >
-            import
-          </span>
-          <span>
-          </span>
-          <span
-            class="token imports"
-          >
-            scss
-          </span>
-          <span>
-          </span>
-          <span
-            class="token module"
-            style="color: rgb(150, 203, 254);"
-          >
-            from
-          </span>
-          <span>
-          </span>
-          <span
-            class="token"
-            style="color: rgb(168, 255, 96);"
-          >
-            'react-syntax-highlighter/dist/cjs/languages/prism/scss'
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            ;
-          </span>
-          <span>
-          </span>
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 3.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            8
-          </span>
-          <span />
-          <span
-            class="token module"
-            style="color: rgb(150, 203, 254);"
-          >
-            import
-          </span>
-          <span>
-          </span>
-          <span
-            class="token imports"
-          >
-            bash
-          </span>
-          <span>
-          </span>
-          <span
-            class="token module"
-            style="color: rgb(150, 203, 254);"
-          >
-            from
-          </span>
-          <span>
-          </span>
-          <span
-            class="token"
-            style="color: rgb(168, 255, 96);"
-          >
-            'react-syntax-highlighter/dist/cjs/languages/prism/bash'
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            ;
-          </span>
-          <span>
-          </span>
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 3.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            9
-          </span>
-          <span />
-          <span
-            class="token module"
-            style="color: rgb(150, 203, 254);"
-          >
-            import
-          </span>
-          <span>
-          </span>
-          <span
-            class="token imports"
-          >
-            python
-          </span>
-          <span>
-          </span>
-          <span
-            class="token module"
-            style="color: rgb(150, 203, 254);"
-          >
-            from
-          </span>
-          <span>
-          </span>
-          <span
-            class="token"
-            style="color: rgb(168, 255, 96);"
-          >
-            'react-syntax-highlighter/dist/cjs/languages/prism/python'
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            ;
-          </span>
-          <span>
-          </span>
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 3.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            10
-          </span>
-          <span />
-          <span
-            class="token module"
-            style="color: rgb(150, 203, 254);"
-          >
-            import
-          </span>
-          <span>
-          </span>
-          <span
-            class="token imports"
-          >
-            cpp
-          </span>
-          <span>
-          </span>
-          <span
-            class="token module"
-            style="color: rgb(150, 203, 254);"
-          >
-            from
-          </span>
-          <span>
-          </span>
-          <span
-            class="token"
-            style="color: rgb(168, 255, 96);"
-          >
-            'react-syntax-highlighter/dist/cjs/languages/prism/cpp'
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            ;
-          </span>
-          <span>
-          </span>
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 3.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            11
-          </span>
+import type { Medium } from 'types';
+import { prismSyntaxLangs } from 'helpers/constants';
+import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { atomDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import tsx from 'react-syntax-highlighter/dist/cjs/languages/prism/tsx';
+import scss from 'react-syntax-highlighter/dist/cjs/languages/prism/scss';
+import bash from 'react-syntax-highlighter/dist/cjs/languages/prism/bash';
+import python from 'react-syntax-highlighter/dist/cjs/languages/prism/python';
+import cpp from 'react-syntax-highlighter/dist/cjs/languages/prism/cpp';
+interface Props {
+  medium: Medium;
+  preview?: boolean;
+}
+// These have to match prismSyntaxLangs
+SyntaxHighlighter.registerLanguage('tsx', tsx);
+SyntaxHighlighter.registerLanguage('scss', scss);
+SyntaxHighlighter.registerLanguage('bash', bash);
+SyntaxHighlighter.registerLanguage('python', python);
+SyntaxHighlighter.registerLanguage('cpp', cpp);
+const Snippet = ({ medium, preview = false }: Props) =&gt; {
+  return (
+    &lt;SyntaxHighlighter
+      style={atomDark}
+      showLineNumbers
+      language={
+        prismSyntaxLangs.find(
+          (l) =&gt;
+            medium.mimeType === l.mimeType,
+        )?.lang ?? 'text'
+      }
+    &gt;
+      {medium.content?.length && medium.content.length &gt; 200 && preview
+        ? \`\${medium.content.slice(0, 200)}
+...\`
+        : \`\${medium.content}\`}
+    &lt;/SyntaxHighlighter&gt;
+  );
+};
+export default Snippet;
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 3.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            12
-          </span>
-          <span />
-          <span
-            class="token"
-            style="color: rgb(150, 203, 254);"
-          >
-            interface
-          </span>
-          <span>
-          </span>
-          <span
-            class="token"
-            style="color: rgb(255, 255, 182); text-decoration: underline;"
-          >
-            Props
-          </span>
-          <span>
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            {
-          </span>
-          <span>
-          </span>
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 3.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            13
-          </span>
-          <span>
-          </span>
-          <span
-            class="token literal-property"
-            style="color: rgb(150, 203, 254);"
-          >
-            medium
-          </span>
-          <span
-            class="token"
-            style="color: rgb(237, 237, 237);"
-          >
-            :
-          </span>
-          <span>
-          </span>
-          <span
-            class="token maybe-class-name"
-          >
-            Medium
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            ;
-          </span>
-          <span>
-          </span>
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 3.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            14
-          </span>
-          <span>
-              preview
-          </span>
-          <span
-            class="token"
-            style="color: rgb(237, 237, 237);"
-          >
-            ?
-          </span>
-          <span
-            class="token"
-            style="color: rgb(237, 237, 237);"
-          >
-            :
-          </span>
-          <span>
-             boolean
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            ;
-          </span>
-          <span>
-          </span>
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 3.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            15
-          </span>
-          <span />
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            }
-          </span>
-          <span>
-          </span>
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 3.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            16
-          </span>
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 3.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            17
-          </span>
-          <span />
-          <span
-            class="token"
-            style="color: rgb(124, 124, 124);"
-          >
-            // These have to match prismSyntaxLangs
-          </span>
-          <span>
-          </span>
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 3.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            18
-          </span>
-          <span />
-          <span
-            class="token maybe-class-name"
-          >
-            SyntaxHighlighter
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            .
-          </span>
-          <span
-            class="token method property-access"
-            style="color: rgb(218, 208, 133);"
-          >
-            registerLanguage
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            (
-          </span>
-          <span
-            class="token"
-            style="color: rgb(168, 255, 96);"
-          >
-            'tsx'
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            ,
-          </span>
-          <span>
-             tsx
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            )
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            ;
-          </span>
-          <span>
-          </span>
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 3.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            19
-          </span>
-          <span />
-          <span
-            class="token maybe-class-name"
-          >
-            SyntaxHighlighter
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            .
-          </span>
-          <span
-            class="token method property-access"
-            style="color: rgb(218, 208, 133);"
-          >
-            registerLanguage
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            (
-          </span>
-          <span
-            class="token"
-            style="color: rgb(168, 255, 96);"
-          >
-            'scss'
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            ,
-          </span>
-          <span>
-             scss
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            )
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            ;
-          </span>
-          <span>
-          </span>
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 3.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            20
-          </span>
-          <span />
-          <span
-            class="token maybe-class-name"
-          >
-            SyntaxHighlighter
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            .
-          </span>
-          <span
-            class="token method property-access"
-            style="color: rgb(218, 208, 133);"
-          >
-            registerLanguage
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            (
-          </span>
-          <span
-            class="token"
-            style="color: rgb(168, 255, 96);"
-          >
-            'bash'
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            ,
-          </span>
-          <span>
-             bash
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            )
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            ;
-          </span>
-          <span>
-          </span>
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 3.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            21
-          </span>
-          <span />
-          <span
-            class="token maybe-class-name"
-          >
-            SyntaxHighlighter
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            .
-          </span>
-          <span
-            class="token method property-access"
-            style="color: rgb(218, 208, 133);"
-          >
-            registerLanguage
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            (
-          </span>
-          <span
-            class="token"
-            style="color: rgb(168, 255, 96);"
-          >
-            'python'
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            ,
-          </span>
-          <span>
-             python
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            )
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            ;
-          </span>
-          <span>
-          </span>
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 3.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            22
-          </span>
-          <span />
-          <span
-            class="token maybe-class-name"
-          >
-            SyntaxHighlighter
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            .
-          </span>
-          <span
-            class="token method property-access"
-            style="color: rgb(218, 208, 133);"
-          >
-            registerLanguage
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            (
-          </span>
-          <span
-            class="token"
-            style="color: rgb(168, 255, 96);"
-          >
-            'cpp'
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            ,
-          </span>
-          <span>
-             cpp
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            )
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            ;
-          </span>
-          <span>
-          </span>
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 3.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            23
-          </span>
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 3.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            24
-          </span>
-          <span />
-          <span
-            class="token"
-            style="color: rgb(150, 203, 254);"
-          >
-            const
-          </span>
-          <span>
-          </span>
-          <span
-            class="token function-variable maybe-class-name"
-            style="color: rgb(218, 208, 133);"
-          >
-            Snippet
-          </span>
-          <span>
-          </span>
-          <span
-            class="token"
-            style="color: rgb(237, 237, 237);"
-          >
-            =
-          </span>
-          <span>
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            (
-          </span>
-          <span
-            class="token parameter"
-            style="color: rgb(197, 200, 198);"
-          >
-            {
-          </span>
-          <span
-            class="token parameter"
-          >
-             medium
-          </span>
-          <span
-            class="token parameter"
-            style="color: rgb(197, 200, 198);"
-          >
-            ,
-          </span>
-          <span
-            class="token parameter"
-          >
-             preview
-          </span>
-          <span
-            class="token parameter"
-            style="color: rgb(237, 237, 237);"
-          >
-            =
-          </span>
-          <span
-            class="token parameter"
-          >
-          </span>
-          <span
-            class="token parameter"
-            style="color: rgb(153, 204, 153);"
-          >
-            false
-          </span>
-          <span
-            class="token parameter"
-          >
-          </span>
-          <span
-            class="token parameter"
-            style="color: rgb(197, 200, 198);"
-          >
-            }
-          </span>
-          <span
-            class="token parameter"
-            style="color: rgb(237, 237, 237);"
-          >
-            :
-          </span>
-          <span
-            class="token parameter"
-          >
-          </span>
-          <span
-            class="token parameter maybe-class-name"
-          >
-            Props
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            )
-          </span>
-          <span>
-          </span>
-          <span
-            class="token arrow"
-            style="color: rgb(237, 237, 237);"
-          >
-            =&gt;
-          </span>
-          <span>
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            {
-          </span>
-          <span>
-          </span>
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 3.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            25
-          </span>
-          <span>
-          </span>
-          <span
-            class="token control-flow"
-            style="color: rgb(150, 203, 254);"
-          >
-            return
-          </span>
-          <span>
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            (
-          </span>
-          <span>
-          </span>
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 3.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            26
-          </span>
-          <span>
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            &lt;
-          </span>
-          <span
-            class="token"
-            style="color: rgb(255, 255, 182); text-decoration: underline;"
-          >
-            SyntaxHighlighter
-          </span>
-          <span
-            class="token"
-            style="color: rgb(150, 203, 254);"
-          >
-          </span>
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 3.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            27
-          </span>
-          <span
-            class="token"
-            style="color: rgb(150, 203, 254);"
-          >
-          </span>
-          <span
-            class="token"
-            style="color: rgb(168, 255, 96);"
-          >
-            style
-          </span>
-          <span
-            class="token script language-javascript script-punctuation"
-            style="color: rgb(150, 203, 254);"
-          >
-            =
-          </span>
-          <span
-            class="token script language-javascript"
-            style="color: rgb(197, 200, 198);"
-          >
-            {
-          </span>
-          <span
-            class="token script language-javascript"
-            style="color: rgb(150, 203, 254);"
-          >
-            atomDark
-          </span>
-          <span
-            class="token script language-javascript"
-            style="color: rgb(197, 200, 198);"
-          >
-            }
-          </span>
-          <span
-            class="token"
-            style="color: rgb(150, 203, 254);"
-          >
-          </span>
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 3.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            28
-          </span>
-          <span
-            class="token"
-            style="color: rgb(150, 203, 254);"
-          >
-          </span>
-          <span
-            class="token"
-            style="color: rgb(168, 255, 96);"
-          >
-            showLineNumbers
-          </span>
-          <span
-            class="token"
-            style="color: rgb(150, 203, 254);"
-          >
-          </span>
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 3.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            29
-          </span>
-          <span
-            class="token"
-            style="color: rgb(150, 203, 254);"
-          >
-          </span>
-          <span
-            class="token"
-            style="color: rgb(168, 255, 96);"
-          >
-            language
-          </span>
-          <span
-            class="token script language-javascript script-punctuation"
-            style="color: rgb(150, 203, 254);"
-          >
-            =
-          </span>
-          <span
-            class="token script language-javascript"
-            style="color: rgb(197, 200, 198);"
-          >
-            {
-          </span>
-          <span
-            class="token script language-javascript"
-            style="color: rgb(150, 203, 254);"
-          >
-          </span>
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 3.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            30
-          </span>
-          <span
-            class="token script language-javascript"
-            style="color: rgb(150, 203, 254);"
-          >
-                    prismSyntaxLangs
-          </span>
-          <span
-            class="token script language-javascript"
-            style="color: rgb(197, 200, 198);"
-          >
-            .
-          </span>
-          <span
-            class="token script language-javascript method property-access"
-            style="color: rgb(150, 203, 254);"
-          >
-            find
-          </span>
-          <span
-            class="token script language-javascript"
-            style="color: rgb(197, 200, 198);"
-          >
-            (
-          </span>
-          <span
-            class="token script language-javascript"
-            style="color: rgb(150, 203, 254);"
-          >
-          </span>
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 3.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            31
-          </span>
-          <span
-            class="token script language-javascript"
-            style="color: rgb(150, 203, 254);"
-          >
-          </span>
-          <span
-            class="token script language-javascript"
-            style="color: rgb(197, 200, 198);"
-          >
-            (
-          </span>
-          <span
-            class="token script language-javascript parameter"
-            style="color: rgb(150, 203, 254);"
-          >
-            l
-          </span>
-          <span
-            class="token script language-javascript"
-            style="color: rgb(197, 200, 198);"
-          >
-            )
-          </span>
-          <span
-            class="token script language-javascript"
-            style="color: rgb(150, 203, 254);"
-          >
-          </span>
-          <span
-            class="token script language-javascript arrow"
-            style="color: rgb(150, 203, 254);"
-          >
-            =&gt;
-          </span>
-          <span
-            class="token script language-javascript"
-            style="color: rgb(150, 203, 254);"
-          >
-          </span>
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 3.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            32
-          </span>
-          <span
-            class="token script language-javascript"
-            style="color: rgb(150, 203, 254);"
-          >
-                        medium
-          </span>
-          <span
-            class="token script language-javascript"
-            style="color: rgb(197, 200, 198);"
-          >
-            .
-          </span>
-          <span
-            class="token script language-javascript property-access"
-            style="color: rgb(150, 203, 254);"
-          >
-            mimeType
-          </span>
-          <span
-            class="token script language-javascript"
-            style="color: rgb(150, 203, 254);"
-          >
-          </span>
-          <span
-            class="token script language-javascript"
-            style="color: rgb(237, 237, 237);"
-          >
-            ===
-          </span>
-          <span
-            class="token script language-javascript"
-            style="color: rgb(150, 203, 254);"
-          >
-             l
-          </span>
-          <span
-            class="token script language-javascript"
-            style="color: rgb(197, 200, 198);"
-          >
-            .
-          </span>
-          <span
-            class="token script language-javascript property-access"
-            style="color: rgb(150, 203, 254);"
-          >
-            mimeType
-          </span>
-          <span
-            class="token script language-javascript"
-            style="color: rgb(197, 200, 198);"
-          >
-            ,
-          </span>
-          <span
-            class="token script language-javascript"
-            style="color: rgb(150, 203, 254);"
-          >
-          </span>
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 3.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            33
-          </span>
-          <span
-            class="token script language-javascript"
-            style="color: rgb(150, 203, 254);"
-          >
-          </span>
-          <span
-            class="token script language-javascript"
-            style="color: rgb(197, 200, 198);"
-          >
-            )
-          </span>
-          <span
-            class="token script language-javascript"
-            style="color: rgb(237, 237, 237);"
-          >
-            ?.
-          </span>
-          <span
-            class="token script language-javascript"
-            style="color: rgb(150, 203, 254);"
-          >
-            lang
-          </span>
-          <span
-            class="token script language-javascript"
-            style="color: rgb(237, 237, 237);"
-          >
-            ??
-          </span>
-          <span
-            class="token script language-javascript"
-            style="color: rgb(150, 203, 254);"
-          >
-          </span>
-          <span
-            class="token script language-javascript"
-            style="color: rgb(168, 255, 96);"
-          >
-            'text'
-          </span>
-          <span
-            class="token script language-javascript"
-            style="color: rgb(150, 203, 254);"
-          >
-          </span>
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 3.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            34
-          </span>
-          <span
-            class="token script language-javascript"
-            style="color: rgb(150, 203, 254);"
-          >
-          </span>
-          <span
-            class="token script language-javascript"
-            style="color: rgb(197, 200, 198);"
-          >
-            }
-          </span>
-          <span
-            class="token"
-            style="color: rgb(150, 203, 254);"
-          >
-          </span>
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 3.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            35
-          </span>
-          <span
-            class="token"
-            style="color: rgb(150, 203, 254);"
-          >
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            &gt;
-          </span>
-          <span
-            class="token plain-text"
-          >
-          </span>
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 3.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            36
-          </span>
-          <span
-            class="token plain-text"
-          >
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            {
-          </span>
-          <span>
-            medium
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            .
-          </span>
-          <span
-            class="token property-access"
-          >
-            content
-          </span>
-          <span
-            class="token"
-            style="color: rgb(237, 237, 237);"
-          >
-            ?.
-          </span>
-          <span>
-            length
-          </span>
-          <span
-            class="token"
-            style="color: rgb(237, 237, 237);"
-          >
-            &&
-          </span>
-          <span>
-             medium
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            .
-          </span>
-          <span
-            class="token property-access"
-          >
-            content
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            .
-          </span>
-          <span
-            class="token property-access"
-          >
-            length
-          </span>
-          <span>
-          </span>
-          <span
-            class="token"
-            style="color: rgb(237, 237, 237);"
-          >
-            &gt;
-          </span>
-          <span>
-          </span>
-          <span
-            class="token"
-            style="color: rgb(255, 115, 253);"
-          >
-            200
-          </span>
-          <span>
-          </span>
-          <span
-            class="token"
-            style="color: rgb(237, 237, 237);"
-          >
-            &&
-          </span>
-          <span>
-             preview
-          </span>
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 3.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            37
-          </span>
-          <span>
-          </span>
-          <span
-            class="token"
-            style="color: rgb(237, 237, 237);"
-          >
-            ?
-          </span>
-          <span>
-          </span>
-          <span
-            class="token template-string template-punctuation"
-            style="color: rgb(168, 255, 96);"
-          >
-            \`
-          </span>
-          <span
-            class="token template-string interpolation interpolation-punctuation"
-            style="color: rgb(197, 200, 198);"
-          >
-            \${
-          </span>
-          <span
-            class="token template-string interpolation"
-          >
-            medium
-          </span>
-          <span
-            class="token template-string interpolation"
-            style="color: rgb(197, 200, 198);"
-          >
-            .
-          </span>
-          <span
-            class="token template-string interpolation property-access"
-          >
-            content
-          </span>
-          <span
-            class="token template-string interpolation"
-            style="color: rgb(197, 200, 198);"
-          >
-            .
-          </span>
-          <span
-            class="token template-string interpolation method property-access"
-            style="color: rgb(218, 208, 133);"
-          >
-            slice
-          </span>
-          <span
-            class="token template-string interpolation"
-            style="color: rgb(197, 200, 198);"
-          >
-            (
-          </span>
-          <span
-            class="token template-string interpolation"
-            style="color: rgb(255, 115, 253);"
-          >
-            0
-          </span>
-          <span
-            class="token template-string interpolation"
-            style="color: rgb(197, 200, 198);"
-          >
-            ,
-          </span>
-          <span
-            class="token template-string interpolation"
-          >
-          </span>
-          <span
-            class="token template-string interpolation"
-            style="color: rgb(255, 115, 253);"
-          >
-            200
-          </span>
-          <span
-            class="token template-string interpolation"
-            style="color: rgb(197, 200, 198);"
-          >
-            )
-          </span>
-          <span
-            class="token template-string interpolation interpolation-punctuation"
-            style="color: rgb(197, 200, 198);"
-          >
-            }
-          </span>
-          <span
-            class="token template-string"
-            style="color: rgb(168, 255, 96);"
-          >
-          </span>
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 3.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            38
-          </span>
-          <span
-            class="token template-string"
-            style="color: rgb(168, 255, 96);"
-          >
-            ...
-          </span>
-          <span
-            class="token template-string template-punctuation"
-            style="color: rgb(168, 255, 96);"
-          >
-            \`
-          </span>
-          <span>
-          </span>
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 3.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            39
-          </span>
-          <span>
-          </span>
-          <span
-            class="token"
-            style="color: rgb(237, 237, 237);"
-          >
-            :
-          </span>
-          <span>
-          </span>
-          <span
-            class="token template-string template-punctuation"
-            style="color: rgb(168, 255, 96);"
-          >
-            \`
-          </span>
-          <span
-            class="token template-string interpolation interpolation-punctuation"
-            style="color: rgb(197, 200, 198);"
-          >
-            \${
-          </span>
-          <span
-            class="token template-string interpolation"
-          >
-            medium
-          </span>
-          <span
-            class="token template-string interpolation"
-            style="color: rgb(197, 200, 198);"
-          >
-            .
-          </span>
-          <span
-            class="token template-string interpolation property-access"
-          >
-            content
-          </span>
-          <span
-            class="token template-string interpolation interpolation-punctuation"
-            style="color: rgb(197, 200, 198);"
-          >
-            }
-          </span>
-          <span
-            class="token template-string template-punctuation"
-            style="color: rgb(168, 255, 96);"
-          >
-            \`
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            }
-          </span>
-          <span
-            class="token plain-text"
-          >
-          </span>
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 3.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            40
-          </span>
-          <span
-            class="token plain-text"
-          >
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            &lt;/
-          </span>
-          <span
-            class="token"
-            style="color: rgb(255, 255, 182); text-decoration: underline;"
-          >
-            SyntaxHighlighter
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            &gt;
-          </span>
-          <span>
-          </span>
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 3.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            41
-          </span>
-          <span>
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            )
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            ;
-          </span>
-          <span>
-          </span>
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 3.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            42
-          </span>
-          <span />
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            }
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            ;
-          </span>
-          <span>
-          </span>
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 3.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            43
-          </span>
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 3.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            44
-          </span>
-          <span />
-          <span
-            class="token module"
-            style="color: rgb(150, 203, 254);"
-          >
-            export
-          </span>
-          <span>
-          </span>
-          <span
-            class="token module"
-            style="color: rgb(150, 203, 254);"
-          >
-            default
-          </span>
-          <span>
-          </span>
-          <span
-            class="token maybe-class-name"
-          >
-            Snippet
-          </span>
-          <span
-            class="token"
-            style="color: rgb(197, 200, 198);"
-          >
-            ;
-          </span>
-          <span>
-          </span>
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 3.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            45
-          </span>
         </code>
       </pre>
       <button
@@ -2812,13 +417,26 @@ exports[`renders SnippetUpload with react/tsx code 1`] = `
         >
           <svg
             aria-hidden="true"
+            fill="none"
             focusable="false"
             role="img"
-            viewBox="0 0 1024 1024"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+            viewBox="0 0 24 24"
             xmlns="http://www.w3.org/2000/svg"
           >
+            <rect
+              height="14"
+              rx="2"
+              ry="2"
+              width="14"
+              x="8"
+              y="8"
+            />
             <path
-              d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"
+              d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
             />
           </svg>
         </span>
@@ -2844,21 +462,12 @@ exports[`renders SnippetUpload with text 1`] = `
     >
       <pre
         aria-labelledby="#snippet-43ac43b8-e220-4111-b89d-c5bfe8b031e2"
-        style="color: rgb(197, 200, 198); text-shadow: 0 1px rgba(0, 0, 0, 0.3); font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; line-height: 1.5; tab-size: 4; hyphens: none; padding: 1em; margin: .5em 0px; overflow: auto; border-radius: 0.3em; background: rgb(29, 31, 33);"
+        class="line-numbers"
       >
         <code
           class="language-text"
-          style="color: rgb(197, 200, 198); text-shadow: 0 1px rgba(0, 0, 0, 0.3); font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; line-height: 1.5; tab-size: 4; hyphens: none;"
         >
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 1.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            1
-          </span>
-          <span>
-            &lt;p&gt;ciao&lt;/p&gt;
-          </span>
+          &lt;p&gt;ciao&lt;/p&gt;
         </code>
       </pre>
       <button
@@ -2870,13 +479,26 @@ exports[`renders SnippetUpload with text 1`] = `
         >
           <svg
             aria-hidden="true"
+            fill="none"
             focusable="false"
             role="img"
-            viewBox="0 0 1024 1024"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+            viewBox="0 0 24 24"
             xmlns="http://www.w3.org/2000/svg"
           >
+            <rect
+              height="14"
+              rx="2"
+              ry="2"
+              width="14"
+              x="8"
+              y="8"
+            />
             <path
-              d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"
+              d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
             />
           </svg>
         </span>
@@ -2902,21 +524,12 @@ exports[`renders SnippetUpload with text as fallback 1`] = `
     >
       <pre
         aria-labelledby="#snippet-cc8882fa-d7d5-435a-90a1-5c9f2a1bc918"
-        style="color: rgb(197, 200, 198); text-shadow: 0 1px rgba(0, 0, 0, 0.3); font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; line-height: 1.5; tab-size: 4; hyphens: none; padding: 1em; margin: .5em 0px; overflow: auto; border-radius: 0.3em; background: rgb(29, 31, 33);"
+        class="line-numbers"
       >
         <code
           class="language-text"
-          style="color: rgb(197, 200, 198); text-shadow: 0 1px rgba(0, 0, 0, 0.3); font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; line-height: 1.5; tab-size: 4; hyphens: none;"
         >
-          <span
-            class="linenumber react-syntax-highlighter-line-number"
-            style="display: inline-block; min-width: 1.25em; padding-right: 1em; text-align: right; user-select: none; color: rgb(124, 124, 124);"
-          >
-            1
-          </span>
-          <span>
-            &lt;p&gt;ciao&lt;/p&gt;
-          </span>
+          &lt;p&gt;ciao&lt;/p&gt;
         </code>
       </pre>
       <button
@@ -2928,13 +541,26 @@ exports[`renders SnippetUpload with text as fallback 1`] = `
         >
           <svg
             aria-hidden="true"
+            fill="none"
             focusable="false"
             role="img"
-            viewBox="0 0 1024 1024"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+            viewBox="0 0 24 24"
             xmlns="http://www.w3.org/2000/svg"
           >
+            <rect
+              height="14"
+              rx="2"
+              ry="2"
+              width="14"
+              x="8"
+              y="8"
+            />
             <path
-              d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"
+              d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
             />
           </svg>
         </span>