@memori.ai/memori-react 1.0.0-alpha.1

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

@@ -0,0 +1,2776 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders SnippetUpload with css code 1`] = `
+<div>
+  <div
+    class="memori-snippet"
+  >
+    <div
+      class="memori-snippet--content"
+    >
+      <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);"
+      >
+        <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>
+        </code>
+      </pre>
+      <button
+        class="memori-snippet--copy-button memori-button memori-button--ghost memori-button--rounded memori-button--icon-only"
+      >
+        <span
+          class="memori-button--icon"
+        >
+          <svg
+            aria-hidden="true"
+            focusable="false"
+            role="img"
+            viewBox="0 0 1024 1024"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <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"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
+    <p
+      class="memori-snippet--caption"
+      id="snippet-a669fadb-12c0-469b-9b6c-34db22d371ca"
+    >
+      Snippet
+    </p>
+  </div>
+</div>
+`;
+
+exports[`renders SnippetUpload with html code 1`] = `
+<div>
+  <div
+    class="memori-snippet"
+  >
+    <div
+      class="memori-snippet--content"
+    >
+      <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);"
+      >
+        <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>
+        </code>
+      </pre>
+      <button
+        class="memori-snippet--copy-button memori-button memori-button--ghost memori-button--rounded memori-button--icon-only"
+      >
+        <span
+          class="memori-button--icon"
+        >
+          <svg
+            aria-hidden="true"
+            focusable="false"
+            role="img"
+            viewBox="0 0 1024 1024"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <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"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
+    <p
+      class="memori-snippet--caption"
+      id="snippet-65ca4a6d-f20b-402e-9d79-5e470f247927"
+    >
+      Snippet
+    </p>
+  </div>
+</div>
+`;
+
+exports[`renders SnippetUpload with js code 1`] = `
+<div>
+  <div
+    class="memori-snippet"
+  >
+    <div
+      class="memori-snippet--content"
+    >
+      <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);"
+      >
+        <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>
+      </pre>
+      <button
+        class="memori-snippet--copy-button memori-button memori-button--ghost memori-button--rounded memori-button--icon-only"
+      >
+        <span
+          class="memori-button--icon"
+        >
+          <svg
+            aria-hidden="true"
+            focusable="false"
+            role="img"
+            viewBox="0 0 1024 1024"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <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"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
+    <p
+      class="memori-snippet--caption"
+      id="snippet-95226d7e-7bae-465e-8b80-995587bb5971"
+    >
+      Snippet
+    </p>
+  </div>
+</div>
+`;
+
+exports[`renders SnippetUpload with preview mode (clamping) 1`] = `
+<div>
+  <div
+    class="memori-snippet"
+  >
+    <div
+      class="memori-snippet--content"
+    >
+      <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);"
+      >
+        <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>
+        </code>
+      </pre>
+      <button
+        class="memori-snippet--copy-button memori-button memori-button--ghost memori-button--rounded memori-button--icon-only"
+      >
+        <span
+          class="memori-button--icon"
+        >
+          <svg
+            aria-hidden="true"
+            focusable="false"
+            role="img"
+            viewBox="0 0 1024 1024"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <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"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
+    <p
+      class="memori-snippet--caption"
+      id="snippet-38dd29a5-cdf6-40f6-963a-8e42a7caaac1"
+    >
+      Snippet
+    </p>
+  </div>
+</div>
+`;
+
+exports[`renders SnippetUpload with react/tsx code 1`] = `
+<div>
+  <div
+    class="memori-snippet"
+  >
+    <div
+      class="memori-snippet--content"
+    >
+      <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);"
+      >
+        <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>
+          
+
+          <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
+        class="memori-snippet--copy-button memori-button memori-button--ghost memori-button--rounded memori-button--icon-only"
+      >
+        <span
+          class="memori-button--icon"
+        >
+          <svg
+            aria-hidden="true"
+            focusable="false"
+            role="img"
+            viewBox="0 0 1024 1024"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <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"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
+    <p
+      class="memori-snippet--caption"
+      id="snippet-4946dca4-7103-4400-b80d-94b77f9a4f0a"
+    >
+      Snippet
+    </p>
+  </div>
+</div>
+`;
+
+exports[`renders SnippetUpload with text 1`] = `
+<div>
+  <div
+    class="memori-snippet"
+  >
+    <div
+      class="memori-snippet--content"
+    >
+      <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);"
+      >
+        <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>
+        </code>
+      </pre>
+      <button
+        class="memori-snippet--copy-button memori-button memori-button--ghost memori-button--rounded memori-button--icon-only"
+      >
+        <span
+          class="memori-button--icon"
+        >
+          <svg
+            aria-hidden="true"
+            focusable="false"
+            role="img"
+            viewBox="0 0 1024 1024"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <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"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
+    <p
+      class="memori-snippet--caption"
+      id="snippet-43ac43b8-e220-4111-b89d-c5bfe8b031e2"
+    >
+      Snippet
+    </p>
+  </div>
+</div>
+`;
+
+exports[`renders SnippetUpload with text as fallback 1`] = `
+<div>
+  <div
+    class="memori-snippet"
+  >
+    <div
+      class="memori-snippet--content"
+    >
+      <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);"
+      >
+        <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>
+        </code>
+      </pre>
+      <button
+        class="memori-snippet--copy-button memori-button memori-button--ghost memori-button--rounded memori-button--icon-only"
+      >
+        <span
+          class="memori-button--icon"
+        >
+          <svg
+            aria-hidden="true"
+            focusable="false"
+            role="img"
+            viewBox="0 0 1024 1024"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <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"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
+    <p
+      class="memori-snippet--caption"
+      id="snippet-cc8882fa-d7d5-435a-90a1-5c9f2a1bc918"
+    >
+      Snippet
+    </p>
+  </div>
+</div>
+`;