Live code editor for UI docs (#2351)

* Docausaurus code live editor test

* Docusaurus sandpack test

* Fix setup

* Delete files

* Fixes

* Complete work

* Fix config

* Fix config

---------

Co-authored-by: bosiraphael <raphael.bosi@gmail.com>

docs/docs/contributor/frontend/ui-components/display/_category_.json

@@ -1,6 +1,6 @@
 {
-  "label": "Forms",
-  "position": 2,
+  "label": "Display",
+  "position": 0,
   "collapsible": true,
   "collapsed": true,
   "customProps": {

docs/docs/contributor/frontend/ui-components/display/checkmark.mdx

@@ -0,0 +1,16 @@
+---
+title: Checkmark
+sidebar_position: 1
+---
+
+import { SandpackEditor} from '@site/src/ui/SandpackEditor'
+
+<SandpackEditor
+  componentPath='@/ui/Checkmark/components/Checkmark'
+  componentCode={`import { Checkmark } from "@/ui/Checkmark/components/Checkmark";
+
+export const MyComponent = () => {
+ return <Checkmark />;
+}
+`} 
+/>

docs/docs/contributor/frontend/ui-components/forms/button.mdx

@@ -1,15 +0,0 @@
----
-title: Button
-sidebar_position: 1
----
-
-import IframeResizer from 'iframe-resizer-react';
-
-<IframeResizer
-  checkOrigin={false}
-  inPageLinks
-  src="https://storybook.twenty.com/iframe.html?id=ui-button-button--docs&viewMode=docs&singleStory=true"
-  style={{ width: '1px', minWidth: '100%'}}
-/>
- 
- 

docs/docs/contributor/frontend/ui-components/ui-components.mdx

@@ -2,6 +2,3 @@
 title: Overview
 sidebar_position: 0
 ---
-import DocCardList from '@theme/DocCardList';
-
-<DocCardList />

docs/docusaurus.config.js

@@ -2,8 +2,10 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
 
-const lightCodeTheme = require('prism-react-renderer/themes/github');
-const darkCodeTheme = require('prism-react-renderer/themes/dracula');
+import { themes } from 'prism-react-renderer';
+
+const lightCodeTheme = themes.github;
+const darkCodeTheme = themes.dracula;
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {

docs/package.json

@@ -15,22 +15,24 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@docusaurus/core": "^2.4.1",
-    "@docusaurus/preset-classic": "^2.4.1",
-    "@mdx-js/react": "^1.6.22",
+    "@codesandbox/sandpack-react": "^2.9.0",
+    "@docusaurus/core": "^3.0.0",
+    "@docusaurus/preset-classic": "^3.0.0",
+    "@mdx-js/react": "^3.0.0",
     "clsx": "^1.2.1",
     "graphiql": "^2.4.7",
     "graphql": "^16.6.0",
     "iframe-resizer-react": "^1.1.0",
-    "prism-react-renderer": "^1.3.5",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "prism-react-renderer": "^2.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-icons": "^4.9.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "^2.4.1",
-    "@tsconfig/docusaurus": "^1.0.5",
-    "typescript": "^4.7.4"
+    "@docusaurus/module-type-aliases": "^3.0.0",
+    "@docusaurus/tsconfig": "3.0.0",
+    "raw-loader": "^4.0.2",
+    "typescript": "~5.2.2"
   },
   "overrides": {
     "trim": "^0.0.3",

docs/src/css/custom.css

@@ -289,4 +289,4 @@ a.table-of-contents__link:hover{
 
 .hidden {
 display: none !important;
-}
+}

docs/src/ui/SandpackEditor.js

@@ -0,0 +1,68 @@
+import { SandpackProvider, SandpackLayout, SandpackCodeEditor, SandpackPreview } from "@codesandbox/sandpack-react";
+import uiModule from "!!raw-loader!@site/src/ui/generated/index.js";
+
+export const SandpackEditor = ({ componentPath, componentCode}) => {
+  return (
+    <SandpackProvider
+      files={{
+        "/index.js": {
+          hidden: true,
+          code: `
+import React, { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+
+import App from "./App";
+
+const root = createRoot(document.getElementById("root"));
+root.render(
+ <StrictMode>
+   <App />
+ </StrictMode>
+);`,
+        },
+        "/App.tsx": {
+          hidden: true,
+          code: `import { ThemeProvider } from "${componentPath}";
+import { MyComponent } from "./MyComponent.tsx";
+
+export default function App() {
+return (<ThemeProvider>
+ <MyComponent />
+</ThemeProvider>);
+};`,
+        },
+        "/MyComponent.tsx": {
+          code: componentCode,
+        },
+        [`/node_modules/${componentPath}/package.json`]: {
+          hidden: true,
+          code: JSON.stringify({
+            name: componentPath,
+            main: "./index.js",
+          }),
+        },
+        [`/node_modules/${componentPath}/index.js`]: {
+          hidden: true,
+          code: uiModule,
+        },
+      }}
+      customSetup={{
+        entry: "/index.js",
+        dependencies: {
+          react: "latest",
+          "react-dom": "latest",
+          "react-scripts": "^5.0.0",
+        },
+      }}
+    >
+     <SandpackLayout>
+        <SandpackCodeEditor
+          style={{ minWidth: "100%", height: "auto" }}
+        />
+        <SandpackPreview 
+          style={{ minWidth: "100%", height: "auto" }}
+        />
+      </SandpackLayout>
+    </SandpackProvider>
+  );
+};

docs/src/ui/generated/index.d.ts

@@ -0,0 +1,291 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+declare const lightTheme: {
+    accent: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        quaternary: string;
+        accent3570: string;
+        accent4060: string;
+    };
+    background: {
+        noisy: string;
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        quaternary: string;
+        danger: string;
+        transparent: {
+            primary: string;
+            secondary: string;
+            strong: string;
+            medium: string;
+            light: string;
+            lighter: string;
+            danger: string;
+        };
+        overlay: string;
+        radialGradient: string;
+        radialGradientHover: string;
+    };
+    border: {
+        radius: {
+            xs: string;
+            sm: string;
+            md: string;
+            rounded: string;
+        };
+        color: {
+            strong: string;
+            medium: string;
+            light: string;
+            secondaryInverted: string;
+            inverted: string;
+            danger: string;
+        };
+    };
+    tag: {
+        [key: string]: {
+            [key: string]: string;
+        };
+    };
+    boxShadow: {
+        extraLight: string;
+        light: string;
+        strong: string;
+    };
+    font: {
+        size: {
+            xxs: string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            xxl: string;
+        };
+        weight: {
+            regular: number;
+            medium: number;
+            semiBold: number;
+        };
+        family: string;
+        color: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            light: string;
+            extraLight: string;
+            inverted: string;
+            danger: string;
+        };
+    };
+    name: string;
+    color: {
+        yellow80: string;
+        yellow70: string;
+        yellow60: string;
+        yellow50: string;
+        yellow40: string;
+        yellow30: string;
+        yellow20: string;
+        yellow10: string;
+        green80: string;
+        green70: string;
+        green60: string;
+        green50: string;
+        green40: string;
+        green30: string;
+        green20: string;
+        green10: string;
+        turquoise80: string;
+        turquoise70: string;
+        turquoise60: string;
+        turquoise50: string;
+        turquoise40: string;
+        turquoise30: string;
+        turquoise20: string;
+        turquoise10: string;
+        sky80: string;
+        sky70: string;
+        sky60: string;
+        sky50: string;
+        sky40: string;
+        sky30: string;
+        sky20: string;
+        sky10: string;
+        blue80: string;
+        blue70: string;
+        blue60: string;
+        blue50: string;
+        blue40: string;
+        blue30: string;
+        blue20: string;
+        blue10: string;
+        purple80: string;
+        purple70: string;
+        purple60: string;
+        purple50: string;
+        purple40: string;
+        purple30: string;
+        purple20: string;
+        purple10: string;
+        pink80: string;
+        pink70: string;
+        pink60: string;
+        pink50: string;
+        pink40: string;
+        pink30: string;
+        pink20: string;
+        pink10: string;
+        red80: string;
+        red70: string;
+        red60: string;
+        red50: string;
+        red40: string;
+        red30: string;
+        red20: string;
+        red10: string;
+        orange80: string;
+        orange70: string;
+        orange60: string;
+        orange50: string;
+        orange40: string;
+        orange30: string;
+        orange20: string;
+        orange10: string;
+        gray80: string;
+        gray70: string;
+        gray60: string;
+        gray50: string;
+        gray40: string;
+        gray30: string;
+        gray20: string;
+        gray10: string;
+        blueAccent90: string;
+        blueAccent85: string;
+        blueAccent80: string;
+        blueAccent75: string;
+        blueAccent70: string;
+        blueAccent60: string;
+        blueAccent40: string;
+        blueAccent35: string;
+        blueAccent25: string;
+        blueAccent20: string;
+        blueAccent15: string;
+        blueAccent10: string;
+        yellow: string;
+        green: string;
+        turquoise: string;
+        sky: string;
+        blue: string;
+        purple: string;
+        pink: string;
+        red: string;
+        orange: string;
+        gray: string;
+    };
+    grayScale: {
+        gray100: string;
+        gray90: string;
+        gray85: string;
+        gray80: string;
+        gray75: string;
+        gray70: string;
+        gray65: string;
+        gray60: string;
+        gray55: string;
+        gray50: string;
+        gray45: string;
+        gray40: string;
+        gray35: string;
+        gray30: string;
+        gray25: string;
+        gray20: string;
+        gray15: string;
+        gray10: string;
+        gray0: string;
+    };
+    icon: {
+        size: {
+            sm: number;
+            md: number;
+            lg: number;
+            xl: number;
+        };
+        stroke: {
+            sm: number;
+            md: number;
+            lg: number;
+        };
+    };
+    modal: {
+        size: {
+            sm: string;
+            md: string;
+            lg: string;
+        };
+    };
+    text: {
+        lineHeight: {
+            lg: number;
+            md: number;
+        };
+        iconSizeMedium: number;
+        iconSizeSmall: number;
+        iconStrikeLight: number;
+        iconStrikeMedium: number;
+        iconStrikeBold: number;
+    };
+    blur: {
+        light: string;
+        strong: string;
+    };
+    animation: {
+        duration: {
+            instant: number;
+            fast: number;
+            normal: number;
+        };
+    };
+    snackBar: {
+        success: {
+            background: string;
+            color: string;
+        };
+        error: {
+            background: string;
+            color: string;
+        };
+        info: {
+            background: string;
+            color: string;
+        };
+    };
+    spacingMultiplicator: number;
+    spacing: (multiplicator: number) => string;
+    betweenSiblingsGap: string;
+    table: {
+        horizontalCellMargin: string;
+        checkboxColumnWidth: string;
+    };
+    rightDrawerWidth: string;
+    clickableElementBackgroundTransition: string;
+    lastLayerZIndex: number;
+};
+type ThemeType = typeof lightTheme;
+
+type CheckmarkProps = React.ComponentPropsWithoutRef<'div'>;
+declare const Checkmark: (_props: CheckmarkProps) => react_jsx_runtime.JSX.Element;
+
+declare const ThemeProvider: ({ children }: {
+    children: any;
+}) => react_jsx_runtime.JSX.Element;
+declare module '@emotion/react' {
+    interface Theme extends ThemeType {
+    }
+}
+
+export { Checkmark, CheckmarkProps, ThemeProvider };

docs/tsconfig.json

@@ -1,6 +1,6 @@
 {
   // This file is not used in compilation. It is here just for a nice editor experience.
-  "extends": "@tsconfig/docusaurus/tsconfig.json",
+  "extends": "@docusaurus/tsconfig//tsconfig.json",
   "compilerOptions": {
     "baseUrl": "."
   }

front/package.json

@@ -169,6 +169,7 @@
     "storybook-addon-cookie": "^3.0.1",
     "storybook-addon-pseudo-states": "^2.1.0",
     "ts-jest": "^29.1.0",
+    "tsup": "^7.2.0",
     "typescript": "^5.2.2",
     "webpack": "^5.75.0"
   },

front/tsup.config.js

@@ -0,0 +1,14 @@
+import { defineConfig } from "tsup";
+ 
+export default defineConfig([
+  {
+    entry: {"index": './tsup.ui.index.tsx'},
+    treeshake: true,
+    minify: true,
+    verbose: true,
+    dts: true,
+    clean: true,
+    outDir: "../docs/src/ui/generated",
+    noExternal: ['@emotion/react', '@emotion/styled', '@tabler/icons-react', 'hex-rgb']
+  },
+]);

front/tsup.ui.index.tsx

@@ -0,0 +1,16 @@
+import { ThemeProvider as EmotionThemProvider } from '@emotion/react';
+
+import { lightTheme, ThemeType } from './src/modules/ui/theme/constants/theme';
+
+export const ThemeProvider = ({ children }: { children: any }) => {
+  return (
+    <EmotionThemProvider theme={lightTheme}>{children}</EmotionThemProvider>
+  );
+};
+
+declare module '@emotion/react' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface Theme extends ThemeType {}
+}
+
+export * from './src/modules/ui/display/checkmark/components/Checkmark';

front/yarn.lock

@@ -8033,6 +8033,13 @@ builtin-modules@^3.1.0:
   resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.3.0.tgz#cae62812b89801e9656336e46223e030386be7b6"
   integrity sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==
 
+bundle-require@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/bundle-require/-/bundle-require-4.0.2.tgz#65fc74ff14eabbba36d26c9a6161bd78fff6b29e"
+  integrity sha512-jwzPOChofl67PSTW2SGubV9HBQAhhR2i6nskiOThauo9dzwDUgOWQScFVaJkjEfYX+UXiD+LEx8EblQMc2wIag==
+  dependencies:
+    load-tsconfig "^0.2.3"
+
 busboy@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/busboy/-/busboy-1.6.0.tgz#966ea36a9502e43cdb9146962523b92f531f6893"
@@ -8068,6 +8075,11 @@ c8@^7.6.0:
     yargs "^16.2.0"
     yargs-parser "^20.2.9"
 
+cac@^6.7.12:
+  version "6.7.14"
+  resolved "https://registry.yarnpkg.com/cac/-/cac-6.7.14.tgz#804e1e6f506ee363cb0e3ccbb09cad5dd9870959"
+  integrity sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==
+
 caching-transform@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/caching-transform/-/caching-transform-4.0.0.tgz#00d297a4206d71e2163c39eaffa8157ac0651f0f"
@@ -8292,7 +8304,7 @@ check-types@^11.1.1:
   resolved "https://registry.yarnpkg.com/check-types/-/check-types-11.2.2.tgz#7afc0b6a860d686885062f2dba888ba5710335b4"
   integrity sha512-HBiYvXvn9Z70Z88XKjz3AEKd4HJhBXsa3j7xFnITAzoS8+q6eIGi8qDB8FKPBAjtuxjI/zFpwuiCb8oDtKOYrA==
 
-chokidar@^3.4.2, chokidar@^3.5.3:
+chokidar@^3.4.2, chokidar@^3.5.1, chokidar@^3.5.3:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
   integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
@@ -9811,7 +9823,7 @@ esbuild-register@^3.4.0:
   dependencies:
     debug "^4.3.4"
 
-esbuild@^0.18.0:
+esbuild@^0.18.0, esbuild@^0.18.2:
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.18.20.tgz#4709f5a34801b43b799ab7d6d82f7284a9b7a7a6"
   integrity sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==
@@ -13234,6 +13246,11 @@ jose@^4.11.4:
   resolved "https://registry.yarnpkg.com/jose/-/jose-4.14.4.tgz#59e09204e2670c3164ee24cbfe7115c6f8bff9ca"
   integrity sha512-j8GhLiKmUAh+dsFXlX1aJCbt5KMibuKb+d7j1JaOJG6s2UjX1PQlW+OKB/sD4a/5ZYF4RcmYmLSndOoU3Lt/3g==
 
+joycon@^3.0.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/joycon/-/joycon-3.1.1.tgz#bce8596d6ae808f8b68168f5fc69280996894f03"
+  integrity sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==
+
 js-cookie@^3.0.5:
   version "3.0.5"
   resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-3.0.5.tgz#0b7e2fd0c01552c58ba86e0841f94dc2557dcdbc"
@@ -13543,6 +13560,11 @@ listr2@^4.0.5:
     through "^2.3.8"
     wrap-ansi "^7.0.0"
 
+load-tsconfig@^0.2.3:
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/load-tsconfig/-/load-tsconfig-0.2.5.tgz#453b8cd8961bfb912dea77eb6c168fe8cca3d3a1"
+  integrity sha512-IXO6OCs9yg8tMKzfPZ1YmheJbZCiEsnBdcB03l0OcfK9prKnJb96siuHCr5Fl37/yo9DnKU+TLpxzTUspw9shg==
+
 loader-runner@^4.2.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.3.0.tgz#c1b4a163b99f614830353b16755e7149ac2314e1"
@@ -17133,6 +17155,13 @@ rollup@^2.43.1:
   optionalDependencies:
     fsevents "~2.3.2"
 
+rollup@^3.2.5:
+  version "3.29.4"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-3.29.4.tgz#4d70c0f9834146df8705bfb69a9a19c9e1109981"
+  integrity sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==
+  optionalDependencies:
+    fsevents "~2.3.2"
+
 rope-sequence@^1.3.0:
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/rope-sequence/-/rope-sequence-1.3.4.tgz#df85711aaecd32f1e756f76e43a415171235d425"
@@ -17615,6 +17644,13 @@ source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, sourc
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
+source-map@0.8.0-beta.0, source-map@^0.8.0-beta.0:
+  version "0.8.0-beta.0"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.8.0-beta.0.tgz#d4c1bb42c3f7ee925f005927ba10709e0d1d1f11"
+  integrity sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==
+  dependencies:
+    whatwg-url "^7.0.0"
+
 source-map@^0.5.6, source-map@^0.5.7:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
@@ -17625,13 +17661,6 @@ source-map@^0.7.3:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.4.tgz#a9bbe705c9d8846f4e08ff6765acf0f1b0898656"
   integrity sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==
 
-source-map@^0.8.0-beta.0:
-  version "0.8.0-beta.0"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.8.0-beta.0.tgz#d4c1bb42c3f7ee925f005927ba10709e0d1d1f11"
-  integrity sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==
-  dependencies:
-    whatwg-url "^7.0.0"
-
 sourcemap-codec@^1.4.8:
   version "1.4.8"
   resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
@@ -18000,7 +18029,7 @@ stylis@4.2.0:
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.2.0.tgz#79daee0208964c8fe695a42fcffcac633a211a51"
   integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==
 
-sucrase@^3.32.0:
+sucrase@^3.20.3, sucrase@^3.32.0:
   version "3.34.0"
   resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.34.0.tgz#1e0e2d8fcf07f8b9c3569067d92fbd8690fb576f"
   integrity sha512-70/LQEZ07TEcxiU2dz51FKaE6hCTWC6vr7FOk3Gr0U60C3shtAN+H+BFr9XlYe5xqf3RA8nrc+VIwzCfnxuXJw==
@@ -18546,6 +18575,26 @@ tslib@~2.5.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.3.tgz#24944ba2d990940e6e982c4bea147aba80209913"
   integrity sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w==
 
+tsup@^7.2.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/tsup/-/tsup-7.2.0.tgz#bb24c0d5e436477900c712e42adc67200607303c"
+  integrity sha512-vDHlczXbgUvY3rWvqFEbSqmC1L7woozbzngMqTtL2PGBODTtWlRwGDDawhvWzr5c1QjKe4OAKqJGfE1xeXUvtQ==
+  dependencies:
+    bundle-require "^4.0.0"
+    cac "^6.7.12"
+    chokidar "^3.5.1"
+    debug "^4.3.1"
+    esbuild "^0.18.2"
+    execa "^5.0.0"
+    globby "^11.0.3"
+    joycon "^3.0.1"
+    postcss-load-config "^4.0.1"
+    resolve-from "^5.0.0"
+    rollup "^3.2.5"
+    source-map "0.8.0-beta.0"
+    sucrase "^3.20.3"
+    tree-kill "^1.2.2"
+
 tsutils@^3.21.0:
   version "3.21.0"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"