CodeBlock working well, except syntax highlighting is broken somehow

apps/webapp/app/components/code/CodeBlock.tsx

@@ -1,91 +1,288 @@
-import { useState } from "react";
-import type { PrismProps } from "@mantine/prism";
-import { Prism } from "@mantine/prism";
-import { theme } from "./prismTheme";
+import { ClipboardIcon } from "@heroicons/react/20/solid";
+import type { Language, PrismTheme } from "prism-react-renderer";
+import Highlight, { defaultProps } from "prism-react-renderer";
+import { forwardRef } from "react";
 import { cn } from "~/utils/cn";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../primitives/Tooltip";
+
+//This is a fork of https://github.com/mantinedev/mantine/blob/master/src/mantine-prism/src/Prism/Prism.tsx
+//it didn't support highlighting lines by dimming the rest of the code, or animations on the highlighting
 
 type CodeBlockProps = {
+  /** Code which will be highlighted */
   code: string;
-  language?: PrismProps["language"];
+  /** Programming language that should be highlighted */
+  language: Language;
+
+  /** Show copy to clipboard button */
   showCopyButton?: boolean;
+
+  /** Display line numbers */
   showLineNumbers?: boolean;
-  className?: string;
+
+  /** Highlight line at given line number with color from theme.colors */
   highlightLines?: number[];
+
+  /** Add/override classes on the overall element */
+  className?: string;
+
+  /** Add/override code theme */
+  theme?: PrismTheme;
 };
 
-const highlighted: NonNullable<PrismProps["highlightLines"]>[string] = {
-  color: "grape",
+const dimAmount = 0.5;
+
+const defaultTheme: PrismTheme = {
+  plain: {
+    color: "#9CDCFE",
+    backgroundColor: "#0e1521",
+  },
+  styles: [
+    {
+      types: ["prolog"],
+      style: {
+        color: "rgb(0, 0, 128)",
+      },
+    },
+    {
+      types: ["comment"],
+      style: {
+        color: "rgb(106, 153, 85)",
+      },
+    },
+    {
+      types: ["builtin", "changed", "keyword", "interpolation-punctuation"],
+      style: {
+        color: "rgb(86, 156, 214)",
+      },
+    },
+    {
+      types: ["number", "inserted"],
+      style: {
+        color: "rgb(181, 206, 168)",
+      },
+    },
+    {
+      types: ["constant"],
+      style: {
+        color: "rgb(100, 102, 149)",
+      },
+    },
+    {
+      types: ["attr-name", "variable"],
+      style: {
+        color: "rgb(156, 220, 254)",
+      },
+    },
+    {
+      types: ["deleted", "string", "attr-value", "template-punctuation"],
+      style: {
+        color: "rgb(206, 145, 120)",
+      },
+    },
+    {
+      types: ["selector"],
+      style: {
+        color: "rgb(215, 186, 125)",
+      },
+    },
+    {
+      // Fix tag color
+      types: ["tag"],
+      style: {
+        color: "rgb(78, 201, 176)",
+      },
+    },
+    {
+      // Fix tag color for HTML
+      types: ["tag"],
+      languages: ["markup"],
+      style: {
+        color: "rgb(86, 156, 214)",
+      },
+    },
+    {
+      types: ["punctuation", "operator"],
+      style: {
+        color: "rgb(212, 212, 212)",
+      },
+    },
+    {
+      // Fix punctuation color for HTML
+      types: ["punctuation"],
+      languages: ["markup"],
+      style: {
+        color: "#808080",
+      },
+    },
+    {
+      types: ["function"],
+      style: {
+        color: "rgb(220, 220, 170)",
+      },
+    },
+    {
+      types: ["class-name"],
+      style: {
+        color: "rgb(78, 201, 176)",
+      },
+    },
+    {
+      types: ["char"],
+      style: {
+        color: "rgb(209, 105, 105)",
+      },
+    },
+  ],
 };
 
-export default function CodeBlock({
-  code,
-  language = "typescript",
-  showCopyButton = true,
-  showLineNumbers = true,
-  className,
-  highlightLines = [],
-}: CodeBlockProps) {
-  let highlightedLines: PrismProps["highlightLines"] = {};
+export const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
+  (
+    {
+      showCopyButton = true,
+      showLineNumbers = true,
+      highlightLines,
+      code,
+      className,
+      language,
+      theme = defaultTheme,
+      ...props
+    }: CodeBlockProps,
+    ref
+  ) => {
+    code = code.trim();
+    const maxLineSize = code.split("\n").length.toString().length;
 
-  if (highlightLines) {
-    highlightedLines = highlightLines.reduce((acc, line) => {
-      acc[line] = highlighted;
-      return acc;
-    }, {} as Record<number, { color: string; label?: string }>);
+    return (
+      <div
+        className={cn(
+          "relative overflow-hidden rounded-md border border-slate-800 ",
+          className
+        )}
+        style={{ backgroundColor: theme.plain.backgroundColor }}
+        ref={ref}
+        {...props}
+        translate="no"
+      >
+        {showCopyButton && (
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger className="absolute top-1 right-1 z-50">
+                <ClipboardIcon className="h-5 w-4 text-slate-500" />
+              </TooltipTrigger>
+              <TooltipContent>Copy</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        )}
+
+        <Highlight
+          {...defaultProps}
+          theme={theme}
+          code={code}
+          language={language}
+        >
+          {({
+            className: inheritedClassName,
+            style: inheritedStyle,
+            tokens,
+            getLineProps,
+            getTokenProps,
+          }) => (
+            <div
+              dir="ltr"
+              className="overflow-auto py-1 px-2 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-700"
+            >
+              <pre
+                className={cn(
+                  "relative mr-2 font-mono text-xs leading-relaxed",
+                  inheritedClassName
+                )}
+                style={inheritedStyle}
+                dir="ltr"
+              >
+                {tokens
+                  .map((line, index) => {
+                    if (
+                      index === tokens.length - 1 &&
+                      line.length === 1 &&
+                      line[0].content === "\n"
+                    ) {
+                      return null;
+                    }
+
+                    const lineNumber = index + 1;
+                    const lineProps = getLineProps({ line, key: index });
+
+                    let hasAnyHighlights = highlightLines
+                      ? highlightLines.length > 0
+                      : false;
+
+                    let shouldDim = hasAnyHighlights;
+                    if (
+                      hasAnyHighlights &&
+                      highlightLines?.includes(lineNumber)
+                    ) {
+                      shouldDim = false;
+                    }
+
+                    return (
+                      <div
+                        key={lineProps.key}
+                        {...lineProps}
+                        className={cn(
+                          "flex w-full justify-start transition-opacity duration-500",
+                          lineProps.className
+                        )}
+                        style={{
+                          opacity: shouldDim ? dimAmount : undefined,
+                          ...lineProps.style,
+                        }}
+                      >
+                        {showLineNumbers && (
+                          <div
+                            className={
+                              "mr-2 flex-none select-none text-right text-slate-500 transition-opacity duration-500"
+                            }
+                            style={{
+                              width: `calc(8 * ${maxLineSize / 16}rem)`,
+                            }}
+                          >
+                            {lineNumber}
+                          </div>
+                        )}
+
+                        <div className="flex-1">
+                          {line.map((token, key) => {
+                            const tokenProps = getTokenProps({ token, key });
+                            return (
+                              <span
+                                key={tokenProps.key}
+                                {...tokenProps}
+                                style={{
+                                  color: tokenProps?.style?.color as string,
+                                  ...tokenProps.style,
+                                }}
+                              />
+                            );
+                          })}
+                        </div>
+                        <div className="w-4 flex-none" />
+                      </div>
+                    );
+                  })
+                  .filter(Boolean)}
+              </pre>
+            </div>
+          )}
+        </Highlight>
+      </div>
+    );
   }
+);
 
-  return (
-    <Prism
-      className={cn("rounded-md border border-slate-800", className)}
-      language={language}
-      withLineNumbers={showLineNumbers}
-      getPrismTheme={() => theme}
-      noCopy={!showCopyButton}
-      copyLabel="Copy code"
-      copiedLabel="Code copied"
-      radius="md"
-      highlightLines={highlightedLines}
-    >
-      {code}
-    </Prism>
-  );
-}
-
-//   return (
-//     <div
-//       className={classNames(
-//         "relative rounded-md bg-[#0F172A] pl-2",
-//         className,
-//         isCollapsed ? "overflow-hidden" : ""
-//       )}
-//       style={{ maxHeight: isCollapsed ? maxHeight : undefined }}
-//     >
-//       <pre
-//         className={classNames(showLineNumbers && `line-numbers`)}
-//         ref={codeRef}
-//       >
-//         <code className={`language-${language}`}>{code}</code>
-//       </pre>
-//       {showCopyButton === true && (
-//         <CopyTextButton
-//           className={classNames(
-//             "absolute my-2 mx-2 text-sm",
-//             align === "center" ? " top-1/2 right-0" : "top-0 right-0"
-//           )}
-//           value={code}
-//           variant="slate"
-//         />
-//       )}
-//       {maxHeight && (
-//         <div className="absolute left-0 bottom-0 flex w-full items-center justify-center bg-gradient-to-b from-transparent to-[#0F172A]">
-//           <button
-//             className="mb-1 rounded-full bg-slate-800 py-2 px-3.5 text-xs transition hover:bg-slate-700"
-//             onClick={(e) => setIsCollapsed((s) => !s)}
-//           >
-//             {isCollapsed ? "Expand" : "Collapse"}
-//           </button>
-//         </div>
-//       )}
-//     </div>
-//   );
-// }
+CodeBlock.displayName = "CodeBlock";

apps/webapp/app/components/code/prismTheme.ts

@@ -1,105 +0,0 @@
-import type { PrismTheme } from "prism-react-renderer";
-
-export const theme: PrismTheme = {
-  plain: {
-    color: "#9CDCFE",
-    backgroundColor: "#0e1521",
-  },
-  styles: [
-    {
-      types: ["prolog"],
-      style: {
-        color: "rgb(0, 0, 128)",
-      },
-    },
-    {
-      types: ["comment"],
-      style: {
-        color: "rgb(106, 153, 85)",
-      },
-    },
-    {
-      types: ["builtin", "changed", "keyword", "interpolation-punctuation"],
-      style: {
-        color: "rgb(86, 156, 214)",
-      },
-    },
-    {
-      types: ["number", "inserted"],
-      style: {
-        color: "rgb(181, 206, 168)",
-      },
-    },
-    {
-      types: ["constant"],
-      style: {
-        color: "rgb(100, 102, 149)",
-      },
-    },
-    {
-      types: ["attr-name", "variable"],
-      style: {
-        color: "rgb(156, 220, 254)",
-      },
-    },
-    {
-      types: ["deleted", "string", "attr-value", "template-punctuation"],
-      style: {
-        color: "rgb(206, 145, 120)",
-      },
-    },
-    {
-      types: ["selector"],
-      style: {
-        color: "rgb(215, 186, 125)",
-      },
-    },
-    {
-      // Fix tag color
-      types: ["tag"],
-      style: {
-        color: "rgb(78, 201, 176)",
-      },
-    },
-    {
-      // Fix tag color for HTML
-      types: ["tag"],
-      languages: ["markup"],
-      style: {
-        color: "rgb(86, 156, 214)",
-      },
-    },
-    {
-      types: ["punctuation", "operator"],
-      style: {
-        color: "rgb(212, 212, 212)",
-      },
-    },
-    {
-      // Fix punctuation color for HTML
-      types: ["punctuation"],
-      languages: ["markup"],
-      style: {
-        color: "#808080",
-      },
-    },
-    {
-      types: ["function"],
-      style: {
-        color: "rgb(220, 220, 170)",
-      },
-    },
-    {
-      types: ["class-name"],
-      style: {
-        color: "rgb(78, 201, 176)",
-      },
-    },
-    {
-      types: ["char"],
-      style: {
-        color: "rgb(209, 105, 105)",
-      },
-    },
-  ],
-};

apps/webapp/app/components/stories/CodeBlock.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { withDesign } from "storybook-addon-designs";
-import CodeBlock from "../code/CodeBlock";
+import { CodeBlock } from "../code/CodeBlock";
 
 const meta: Meta<typeof CodeBlock> = {
   title: "CodeBlock",
@@ -16,9 +16,23 @@ export const Basic: Story = {
   args: {
     code: `export const client = new TriggerClient("smoke-test", {
   apiUrl: "http://localhost:3000",
-  endpoint: "http://localhost:3007/__trigger/entryhttp://localhost:3007/__trigger/entryhttp://localhost:3007/__trigger/entryhttp://localhost:3007/__trigger/entryhttp://localhost:3007/__trigger/entryhttp://localhost:3007/__trigger/entryhttp://localhost:3007/__trigger/entryhttp://localhost:3007/__trigger/entryhttp://localhost:3007/__trigger/entryhttp://localhost:3007/__trigger/entryhttp://localhost:3007/__trigger/entryhttp://localhost:3007/__trigger/entryhttp://localhost:3007/__trigger/entryhttp://localhost:3007/__trigger/entryhttp://localhost:3007/__trigger/entryhttp://localhost:3007/__trigger/entryhttp://localhost:3007/__trigger/entryhttp://localhost:3007/__trigger/entryhttp://localhost:3007/__trigger/entryhttp://localhost:3007/__trigger/entryhttp://localhost:3007/__trigger/entryhttp://localhost:3007/__trigger/entryhttp://localhost:3007/__trigger/entryhttp://localhost:3007/__trigger/entryhttp://localhost:3007/__trigger/entryhttp://localhost:3007/__trigger/entryhttp://localhost:3007/__trigger/entryhttp://localhost:3007/__trigger/entryhttp://localhost:3007/__trigger/entryhttp://localhost:3007/__trigger/entryhttp://localhost:3007/__trigger/entryhttp://localhost:3007/__trigger/entryhttp://localhost:3007/__trigger/entryhttp://localhost:3007/__trigger/entry",
+  endpoint: "http://localhost:3007/__trigger/entry",
   logLevel: "debug",
+  longLine: "This is a long line that will scroll off the edge of the screen and cause a horizontal scrollbar",
+  onLog: (log) => {
+    console.log(log);
+  },
+  onLogError: (log) => {
+    console.error(log);
+  },
+  onLogWarning: (log) => {
+    console.warn(log);
+  },
+  onLogInfo: (log) => {
+    console.info(log);
+  },
 });`,
+    highlightLines: [2],
   },
 
   render: (args) => <CodeBlock {...args} />,

apps/webapp/package.json

@@ -61,7 +61,6 @@
     "@jsonhero/fetch-hero": "^0.2.2",
     "@keyv/redis": "^2.3.7",
     "@lezer/highlight": "^1.1.2",
-    "@mantine/prism": "^6.0.10",
     "@nangohq/frontend": "^0.8.9",
     "@nangohq/node": "^0.8.4",
     "@octokit/webhooks": "^10.4.0",
@@ -230,6 +229,7 @@
     "storybook": "^7.0.7",
     "storybook-addon-designs": "7.0.0-beta.2",
     "storybook-addon-variants": "^0.2.0",
+    "tailwind-scrollbar": "^3.0.1",
     "tailwindcss": "3.1.8",
     "ts-node": "^10.7.0",
     "tsconfig-paths": "^3.14.1",

apps/webapp/tailwind.config.js

@@ -138,9 +138,9 @@ module.exports = {
     },
   },
   plugins: [
-    require("tailwind-scrollbar-hide"),
     require("@tailwindcss/forms"),
     require("@tailwindcss/typography"),
     require("tailwindcss-animate"),
+    require("tailwind-scrollbar"),
   ],
 };

pnpm-lock.yaml

@@ -60,7 +60,6 @@ importers:
       '@jsonhero/fetch-hero': ^0.2.2
       '@keyv/redis': ^2.3.7
       '@lezer/highlight': ^1.1.2
-      '@mantine/prism': ^6.0.10
       '@nangohq/frontend': ^0.8.9
       '@nangohq/node': ^0.8.4
       '@octokit/types': ^9.0.0
@@ -213,6 +212,7 @@ importers:
       storybook-addon-designs: 7.0.0-beta.2
       storybook-addon-variants: ^0.2.0
       tailwind-merge: ^1.12.0
+      tailwind-scrollbar: ^3.0.1
       tailwind-scrollbar-hide: ^1.1.7
       tailwindcss: 3.1.8
       tailwindcss-animate: ^1.0.5
@@ -247,7 +247,6 @@ importers:
       '@jsonhero/fetch-hero': 0.2.2
       '@keyv/redis': 2.5.4
       '@lezer/highlight': 1.1.3
-      '@mantine/prism': 6.0.10_o2ai6dbc6f7cu3klkweiztmp2i
       '@nangohq/frontend': 0.8.9
       '@nangohq/node': 0.8.4
       '@octokit/webhooks': 10.5.1
@@ -414,6 +413,7 @@ importers:
       storybook: 7.0.9
       storybook-addon-designs: 7.0.0-beta.2_fuu4oksmjyaadonkqyb7qxotcm
       storybook-addon-variants: 0.2.0_firmaeoekdtgift4jqxe74wtdm
+      tailwind-scrollbar: 3.0.1_tailwindcss@3.1.8
       tailwindcss: 3.1.8_aesdjsunmf4wiehhujt67my7tu
       ts-node: 10.9.1_fodzh64fuekdilycyvke2qmf2e
       tsconfig-paths: 3.14.1
@@ -2025,6 +2025,7 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/types': 7.21.5
+    dev: true
 
   /@babel/helper-module-transforms/7.20.11:
     resolution: {integrity: sha512-uRy78kN4psmji1s2QtbtcCSaj/LILFDp0f/ymhpQH5QY3nljUZCaNWz9X1dEj/8MBdBEFECs7yRhKn8i7NjZgg==}
@@ -2162,6 +2163,7 @@ packages:
   /@babel/helper-string-parser/7.21.5:
     resolution: {integrity: sha512-5pTUx3hAJaZIdW99sJ6ZUUgWq/Y+Hja7TowEnLNMm1VivRgZQL3vpBY3qUACVsvw+yQU6+YgfBVmcbLaZtrA1w==}
     engines: {node: '>=6.9.0'}
+    dev: true
 
   /@babel/helper-validator-identifier/7.19.1:
     resolution: {integrity: sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==}
@@ -4288,6 +4290,7 @@ packages:
       '@babel/helper-string-parser': 7.21.5
       '@babel/helper-validator-identifier': 7.19.1
       to-fast-properties: 2.0.0
+    dev: true
 
   /@base2/pretty-print-object/1.0.1:
     resolution: {integrity: sha512-4iri8i1AqYHJE2DstZYkyEprg6Pq6sKx3xn5FpySk9sNhH7qN2LLlHJCfDTZRILNwQNPD7mATWM0TBui7uC1pA==}
@@ -4651,97 +4654,17 @@ packages:
     engines: {node: '>=10.0.0'}
     dev: true
 
-  /@emotion/babel-plugin/11.11.0:
-    resolution: {integrity: sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==}
-    dependencies:
-      '@babel/helper-module-imports': 7.21.4
-      '@babel/runtime': 7.20.7
-      '@emotion/hash': 0.9.1
-      '@emotion/memoize': 0.8.1
-      '@emotion/serialize': 1.1.2
-      babel-plugin-macros: 3.1.0
-      convert-source-map: 1.9.0
-      escape-string-regexp: 4.0.0
-      find-root: 1.1.0
-      source-map: 0.5.7
-      stylis: 4.2.0
-    dev: false
-
-  /@emotion/cache/11.11.0:
-    resolution: {integrity: sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==}
-    dependencies:
-      '@emotion/memoize': 0.8.1
-      '@emotion/sheet': 1.2.2
-      '@emotion/utils': 1.2.1
-      '@emotion/weak-memoize': 0.3.1
-      stylis: 4.2.0
-    dev: false
-
   /@emotion/hash/0.9.0:
     resolution: {integrity: sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ==}
     dev: true
 
-  /@emotion/hash/0.9.1:
-    resolution: {integrity: sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==}
-    dev: false
-
-  /@emotion/memoize/0.8.1:
-    resolution: {integrity: sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==}
-    dev: false
-
-  /@emotion/react/11.11.0_kzbn2opkn2327fwg5yzwzya5o4:
-    resolution: {integrity: sha512-ZSK3ZJsNkwfjT3JpDAWJZlrGD81Z3ytNDsxw1LKq1o+xkmO5pnWfr6gmCC8gHEFf3nSSX/09YrG67jybNPxSUw==}
-    peerDependencies:
-      '@types/react': '*'
-      react: '>=16.8.0'
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.20.7
-      '@emotion/babel-plugin': 11.11.0
-      '@emotion/cache': 11.11.0
-      '@emotion/serialize': 1.1.2
-      '@emotion/use-insertion-effect-with-fallbacks': 1.0.1_react@18.2.0
-      '@emotion/utils': 1.2.1
-      '@emotion/weak-memoize': 0.3.1
-      '@types/react': 18.0.26
-      hoist-non-react-statics: 3.3.2
-      react: 18.2.0
-    dev: false
-
-  /@emotion/serialize/1.1.2:
-    resolution: {integrity: sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==}
-    dependencies:
-      '@emotion/hash': 0.9.1
-      '@emotion/memoize': 0.8.1
-      '@emotion/unitless': 0.8.1
-      '@emotion/utils': 1.2.1
-      csstype: 3.1.1
-    dev: false
-
-  /@emotion/sheet/1.2.2:
-    resolution: {integrity: sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==}
-    dev: false
-
-  /@emotion/unitless/0.8.1:
-    resolution: {integrity: sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==}
-    dev: false
-
   /@emotion/use-insertion-effect-with-fallbacks/1.0.1_react@18.2.0:
     resolution: {integrity: sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==}
     peerDependencies:
       react: '>=16.8.0'
     dependencies:
       react: 18.2.0
-
-  /@emotion/utils/1.2.1:
-    resolution: {integrity: sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==}
-    dev: false
-
-  /@emotion/weak-memoize/0.3.1:
-    resolution: {integrity: sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==}
-    dev: false
+    dev: true
 
   /@esbuild-kit/cjs-loader/2.4.1:
     resolution: {integrity: sha512-lhc/XLith28QdW0HpHZvZKkorWgmCNT7sVelMHDj3HFdTfdqkwEKvT+aXVQtNAmCC39VJhunDkWhONWB7335mg==}
@@ -5625,22 +5548,12 @@ packages:
     resolution: {integrity: sha512-buc8BXHmG9l82+OQXOFU3Kr2XQx9ys01U/Q9HMIrZ300iLc8HLMgh7dcCqgYzAzf4BkoQvDcXf5Y+CuEZ5JBYg==}
     dev: false
 
-  /@floating-ui/core/1.2.6:
-    resolution: {integrity: sha512-EvYTiXet5XqweYGClEmpu3BoxmsQ4hkj3QaYA6qEnigCWffTP3vNRwBReTdrwDwo7OoJ3wM8Uoe9Uk4n+d4hfg==}
-    dev: false
-
   /@floating-ui/dom/0.5.4:
     resolution: {integrity: sha512-419BMceRLq0RrmTSDxn8hf9R3VCJv2K9PUfugh5JyEFmdjzDo+e8U5EdR8nzKq8Yj1htzLm3b6eQEEam3/rrtg==}
     dependencies:
       '@floating-ui/core': 0.7.3
     dev: false
 
-  /@floating-ui/dom/1.2.7:
-    resolution: {integrity: sha512-DyqylONj1ZaBnzj+uBnVfzdjjCkFCL2aA9ESHLyUOGSqb03RpbLMImP1ekIQXYs4KLk9jAjJfZAU8hXfWSahEg==}
-    dependencies:
-      '@floating-ui/core': 1.2.6
-    dev: false
-
   /@floating-ui/react-dom/0.7.2_ib3m5ricvtkl2cll7qpr2f6lvq:
     resolution: {integrity: sha512-1T0sJcpHgX/u4I1OzIEhlcrvkUN8ln39nz7fMoE/2HDHrPiMFoOGR7++GYyfUmIQHkkrTinaeQsO3XWubjSvGg==}
     peerDependencies:
@@ -5655,30 +5568,6 @@ packages:
       - '@types/react'
     dev: false
 
-  /@floating-ui/react-dom/1.3.0_biqbaboplfbrettd7655fr4n2y:
-    resolution: {integrity: sha512-htwHm67Ji5E/pROEAr7f8IKFShuiCKHwUC/UY4vC3I5jiSvGFAYnSYiZO5MlGmads+QqvUkR9ANHEguGrDv72g==}
-    peerDependencies:
-      react: '>=16.8.0'
-      react-dom: '>=16.8.0'
-    dependencies:
-      '@floating-ui/dom': 1.2.7
-      react: 18.2.0
-      react-dom: 18.2.0_react@18.2.0
-    dev: false
-
-  /@floating-ui/react/0.19.2_biqbaboplfbrettd7655fr4n2y:
-    resolution: {integrity: sha512-JyNk4A0Ezirq8FlXECvRtQOX/iBe5Ize0W/pLkrZjfHW9GUV7Xnq6zm6fyZuQzaHHqEnVizmvlA96e1/CkZv+w==}
-    peerDependencies:
-      react: '>=16.8.0'
-      react-dom: '>=16.8.0'
-    dependencies:
-      '@floating-ui/react-dom': 1.3.0_biqbaboplfbrettd7655fr4n2y
-      aria-hidden: 1.2.3
-      react: 18.2.0
-      react-dom: 18.2.0_react@18.2.0
-      tabbable: 6.1.2
-    dev: false
-
   /@gar/promisify/1.1.3:
     resolution: {integrity: sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==}
     dev: true
@@ -5981,73 +5870,6 @@ packages:
       '@lit-labs/ssr-dom-shim': 1.1.1
     dev: true
 
-  /@mantine/core/6.0.10_zecty7ayspqmnjyeptesd5jvly:
-    resolution: {integrity: sha512-Q8HdRTBkQDs6LEtklpYm6efz2WaV6T5rvgjUOfXq0z44G/XYM+P1B1BSFnHvUDkeWYLcGkK6aPI5Uxc0GEN04w==}
-    peerDependencies:
-      '@mantine/hooks': 6.0.10
-      react: '>=16.8.0'
-      react-dom: '>=16.8.0'
-    dependencies:
-      '@floating-ui/react': 0.19.2_biqbaboplfbrettd7655fr4n2y
-      '@mantine/hooks': 6.0.10_react@18.2.0
-      '@mantine/styles': 6.0.10_47zgoiguaund3gg2dv4s2nbrcu
-      '@mantine/utils': 6.0.10_react@18.2.0
-      '@radix-ui/react-scroll-area': 1.0.2_biqbaboplfbrettd7655fr4n2y
-      react: 18.2.0
-      react-dom: 18.2.0_react@18.2.0
-      react-remove-scroll: 2.5.5_kzbn2opkn2327fwg5yzwzya5o4
-      react-textarea-autosize: 8.3.4_kzbn2opkn2327fwg5yzwzya5o4
-    transitivePeerDependencies:
-      - '@emotion/react'
-      - '@types/react'
-    dev: false
-
-  /@mantine/hooks/6.0.10_react@18.2.0:
-    resolution: {integrity: sha512-rxH5/CxmUs1mUZAj27Fza4SH07HV1XyrL7L9wwhZdMLg+oDEaAs8BMz8lsOIHOCro9ZDh+Mm7QAbEW8HcvmYJg==}
-    peerDependencies:
-      react: '>=16.8.0'
-    dependencies:
-      react: 18.2.0
-    dev: false
-
-  /@mantine/prism/6.0.10_o2ai6dbc6f7cu3klkweiztmp2i:
-    resolution: {integrity: sha512-y4oW1L8H9Jq+Ymm5RphanczVnlbHyNZy+PC9ZIbVy61f+WDWLM4tmCWYPgxXWQ35yXpMCz3U9UkAsSGEaalAOA==}
-    peerDependencies:
-      '@mantine/core': 6.0.10
-      '@mantine/hooks': 6.0.10
-      react: '>=16.8.0'
-      react-dom: '>=16.8.0'
-    dependencies:
-      '@mantine/core': 6.0.10_zecty7ayspqmnjyeptesd5jvly
-      '@mantine/hooks': 6.0.10_react@18.2.0
-      '@mantine/utils': 6.0.10_react@18.2.0
-      prism-react-renderer: 1.3.5_react@18.2.0
-      react: 18.2.0
-      react-dom: 18.2.0_react@18.2.0
-    dev: false
-
-  /@mantine/styles/6.0.10_47zgoiguaund3gg2dv4s2nbrcu:
-    resolution: {integrity: sha512-TVyo4xNBO7PhP2jubu2OI1YK2DEULrVgdsP0+1wfwj/bhSTnTLYmh2aOb1FyTiFvFn1dfq4If428z/ZuGiLtdQ==}
-    peerDependencies:
-      '@emotion/react': '>=11.9.0'
-      react: '>=16.8.0'
-      react-dom: '>=16.8.0'
-    dependencies:
-      '@emotion/react': 11.11.0_kzbn2opkn2327fwg5yzwzya5o4
-      clsx: 1.1.1
-      csstype: 3.0.9
-      react: 18.2.0
-      react-dom: 18.2.0_react@18.2.0
-    dev: false
-
-  /@mantine/utils/6.0.10_react@18.2.0:
-    resolution: {integrity: sha512-Lo4VUn3+/kqhdjSoPzUFbxXEjMxj5vS4pqRjKRGtJsTwHiMFNcm8u4cIESzMBAEsoaBrI1dGE4WttwOJhjUaSw==}
-    peerDependencies:
-      react: '>=16.8.0'
-    dependencies:
-      react: 18.2.0
-    dev: false
-
   /@manypkg/cli/0.19.2:
     resolution: {integrity: sha512-DXx/P1lyunNoFWwOj1MWBucUhaIJljoiAGOpO2fE0GKMBCI6EZBZD0Up1+fQZoXBecKXRgV9mGgLvIB2fOQ0KQ==}
     hasBin: true
@@ -6897,18 +6719,6 @@ packages:
       react-dom: 18.2.0_react@18.2.0
     dev: false
 
-  /@radix-ui/react-primitive/1.0.1_biqbaboplfbrettd7655fr4n2y:
-    resolution: {integrity: sha512-fHbmislWVkZaIdeF6GZxF0A/NH/3BjrGIYj+Ae6eTmTCr7EB0RQAAVEiqsXK6p3/JcRqVSBQoceZroj30Jj3XA==}
-    peerDependencies:
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    dependencies:
-      '@babel/runtime': 7.20.7
-      '@radix-ui/react-slot': 1.0.1_react@18.2.0
-      react: 18.2.0
-      react-dom: 18.2.0_react@18.2.0
-    dev: false
-
   /@radix-ui/react-primitive/1.0.2_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw==}
     peerDependencies:
@@ -6941,26 +6751,6 @@ packages:
       react-dom: 18.2.0_react@18.2.0
     dev: false
 
-  /@radix-ui/react-scroll-area/1.0.2_biqbaboplfbrettd7655fr4n2y:
-    resolution: {integrity: sha512-k8VseTxI26kcKJaX0HPwkvlNBPTs56JRdYzcZ/vzrNUkDlvXBy8sMc7WvCpYzZkHgb+hd72VW9MqkqecGtuNgg==}
-    peerDependencies:
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    dependencies:
-      '@babel/runtime': 7.20.7
-      '@radix-ui/number': 1.0.0
-      '@radix-ui/primitive': 1.0.0
-      '@radix-ui/react-compose-refs': 1.0.0_react@18.2.0
-      '@radix-ui/react-context': 1.0.0_react@18.2.0
-      '@radix-ui/react-direction': 1.0.0_react@18.2.0
-      '@radix-ui/react-presence': 1.0.0_biqbaboplfbrettd7655fr4n2y
-      '@radix-ui/react-primitive': 1.0.1_biqbaboplfbrettd7655fr4n2y
-      '@radix-ui/react-use-callback-ref': 1.0.0_react@18.2.0
-      '@radix-ui/react-use-layout-effect': 1.0.0_react@18.2.0
-      react: 18.2.0
-      react-dom: 18.2.0_react@18.2.0
-    dev: false
-
   /@radix-ui/react-select/1.2.1_ib3m5ricvtkl2cll7qpr2f6lvq:
     resolution: {integrity: sha512-GULRMITaOHNj79BZvQs3iZO0+f2IgI8g5HDhMi7Bnc13t7IlG86NFtOCfTLme4PNZdEtU+no+oGgcl6IFiphpQ==}
     peerDependencies:
@@ -10946,15 +10736,6 @@ packages:
       - supports-color
     dev: true
 
-  /babel-plugin-macros/3.1.0:
-    resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==}
-    engines: {node: '>=10', npm: '>=6'}
-    dependencies:
-      '@babel/runtime': 7.20.7
-      cosmiconfig: 7.1.0
-      resolve: 1.22.1
-    dev: false
-
   /babel-plugin-named-exports-order/0.0.2:
     resolution: {integrity: sha512-OgOYHOLoRK+/mvXU9imKHlG6GkPLYrUCvFXG/CM93R/aNNO8pOOF4aS+S8CCHMDQoNSeiOYEZb/G6RwL95Jktw==}
     dev: true
@@ -11858,11 +11639,6 @@ packages:
     resolution: {integrity: sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==}
     engines: {node: '>=0.8'}
 
-  /clsx/1.1.1:
-    resolution: {integrity: sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==}
-    engines: {node: '>=6'}
-    dev: false
-
   /clsx/1.2.1:
     resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==}
     engines: {node: '>=6'}
@@ -12051,6 +11827,7 @@ packages:
 
   /convert-source-map/1.9.0:
     resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
+    dev: true
 
   /convert-source-map/2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
@@ -12259,10 +12036,6 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
-  /csstype/3.0.9:
-    resolution: {integrity: sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw==}
-    dev: false
-
   /csstype/3.1.1:
     resolution: {integrity: sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==}
 
@@ -13397,6 +13170,7 @@ packages:
   /escape-string-regexp/4.0.0:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
+    dev: true
 
   /escape-string-regexp/5.0.0:
     resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
@@ -14378,10 +14152,6 @@ packages:
       pkg-dir: 4.2.0
     dev: true
 
-  /find-root/1.1.0:
-    resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==}
-    dev: false
-
   /find-up/3.0.0:
     resolution: {integrity: sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==}
     engines: {node: '>=6'}
@@ -19806,20 +19576,6 @@ packages:
       tslib: 2.4.1
     dev: false
 
-  /react-textarea-autosize/8.3.4_kzbn2opkn2327fwg5yzwzya5o4:
-    resolution: {integrity: sha512-CdtmP8Dc19xL8/R6sWvtknD/eCXkQr30dtvC4VmGInhRsfF8X/ihXCq6+9l9qbxmKRiq407/7z5fxE7cVWQNgQ==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    dependencies:
-      '@babel/runtime': 7.20.7
-      react: 18.2.0
-      use-composed-ref: 1.3.0_react@18.2.0
-      use-latest: 1.2.1_kzbn2opkn2327fwg5yzwzya5o4
-    transitivePeerDependencies:
-      - '@types/react'
-    dev: false
-
   /react-use-intercom/3.0.2_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-1zp97bK3Hx9W6NJZS2wO6gA+eGlWZf1J+nj8+P22a8ORsnWiUYpZ12Kzco8vv9Qn+0Gbb6eX9lkkrLXf5noXyg==}
     engines: {node: '>=10'}
@@ -21314,10 +21070,6 @@ packages:
       react: 18.2.0
     dev: false
 
-  /stylis/4.2.0:
-    resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==}
-    dev: false
-
   /sucrase/3.29.0:
     resolution: {integrity: sha512-bZPAuGA5SdFHuzqIhTAqt9fvNEo9rESqXIG3oiKdF8K4UmkQxC4KlNL3lVyAErXp+mPvUqZ5l13qx6TrDIGf3A==}
     engines: {node: '>=8'}
@@ -21388,10 +21140,6 @@ packages:
       tslib: 2.4.1
     dev: true
 
-  /tabbable/6.1.2:
-    resolution: {integrity: sha512-qCN98uP7i9z0fIS4amQ5zbGBOq+OSigYeGvPy7NDk8Y9yncqDZ9pRPgfsc2PJIVM9RrJj7GIfuRgmjoUU9zTHQ==}
-    dev: false
-
   /tailwind-merge/1.12.0:
     resolution: {integrity: sha512-Y17eDp7FtN1+JJ4OY0Bqv9OA41O+MS8c1Iyr3T6JFLnOgLg3EvcyMKZAnQ8AGyvB5Nxm3t9Xb5Mhe139m8QT/g==}
     dev: false
@@ -21400,6 +21148,15 @@ packages:
     resolution: {integrity: sha512-X324n9OtpTmOMqEgDUEA/RgLrNfBF/jwJdctaPZDzB3mppxJk7TLIDmOreEDm1Bq4R9LSPu4Epf8VSdovNU+iA==}
     dev: false
 
+  /tailwind-scrollbar/3.0.1_tailwindcss@3.1.8:
+    resolution: {integrity: sha512-mM0ecSf/RGRGWw/qB0Zg1bWhuXIkpmleNAFgMxdb4eERgA6eQ0kVouYsF3/OvBqDSK8RJikZC/ynGPxnfXeddw==}
+    engines: {node: '>=12.13.0'}
+    peerDependencies:
+      tailwindcss: 3.x
+    dependencies:
+      tailwindcss: 3.1.8_aesdjsunmf4wiehhujt67my7tu
+    dev: true
+
   /tailwindcss-animate/1.0.5_tailwindcss@3.1.8:
     resolution: {integrity: sha512-UU3qrOJ4lFQABY+MVADmBm+0KW3xZyhMdRvejwtXqYOL7YjHYxmuREFAZdmVG5LPe5E9CAst846SLC4j5I3dcw==}
     peerDependencies:
@@ -21743,6 +21500,7 @@ packages:
   /to-fast-properties/2.0.0:
     resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
     engines: {node: '>=4'}
+    dev: true
 
   /to-object-path/0.3.0:
     resolution: {integrity: sha512-9mWHdnGRuh3onocaHzukyvCZhzvr6tiflAy/JRFXcJX0TjgfWA9pk9t8CMbzmBE4Jfw58pXbkngtBtqYxzNEyg==}
@@ -22526,14 +22284,6 @@ packages:
       tslib: 2.4.1
     dev: false
 
-  /use-composed-ref/1.3.0_react@18.2.0:
-    resolution: {integrity: sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    dependencies:
-      react: 18.2.0
-    dev: false
-
   /use-isomorphic-layout-effect/1.1.2_kzbn2opkn2327fwg5yzwzya5o4:
     resolution: {integrity: sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==}
     peerDependencies:
@@ -22547,20 +22297,6 @@ packages:
       react: 18.2.0
     dev: false
 
-  /use-latest/1.2.1_kzbn2opkn2327fwg5yzwzya5o4:
-    resolution: {integrity: sha512-xA+AVm/Wlg3e2P/JiItTziwS7FK92LWrDB0p+hgXloIMuVCeJJ8v6f0eeHyPZaJrM+usM1FkFfbNCrJGs8A/zw==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-    dependencies:
-      '@types/react': 18.0.26
-      react: 18.2.0
-      use-isomorphic-layout-effect: 1.1.2_kzbn2opkn2327fwg5yzwzya5o4
-    dev: false
-
   /use-resize-observer/9.1.0_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-R25VqO9Wb3asSD4eqtcxk8sJalvIOYBqS8MNZlpDSQ4l4xMQxC/J7Id9HoTqPq8FwULIn0PVW+OAqF2dyYbjow==}
     peerDependencies: