✨ Add Next.js embed library

.github/workflows/publish-typebot-nextjs.yml

@@ -0,0 +1,18 @@
+name: Publish @typebot.io/nextjs package to NPM
+
+on:
+  push:
+    tags:
+      - 'nextjs-v*'
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    env:
+      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+    steps:
+      - uses: actions/checkout@v2
+      - uses: pnpm/action-setup@v2.2.2
+      - run: pnpm i --frozen-lockfile
+      - run: pnpm turbo build --filter=@typebot.io/nextjs...
+      - run: cd packages/embeds/nextjs && pnpm publish --no-git-checks --access public

apps/builder/package.json

@@ -36,8 +36,7 @@
     "@trpc/react-query": "10.34.0",
     "@trpc/server": "10.34.0",
     "@typebot.io/emails": "workspace:*",
-    "@typebot.io/js": "workspace:*",
-    "@typebot.io/react": "workspace:*",
+    "@typebot.io/nextjs": "workspace:*",
     "@udecode/plate-basic-marks": "21.1.5",
     "@udecode/plate-common": "^21.1.5",
     "@udecode/plate-core": "21.1.5",

apps/builder/src/components/SupportBubble.tsx

@@ -2,9 +2,8 @@ import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { useUser } from '@/features/account/hooks/useUser'
 import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
 import React from 'react'
-import { Bubble } from '@typebot.io/react'
+import { Bubble, BubbleProps } from '@typebot.io/nextjs'
 import { planToReadable } from '@/features/billing/helpers/planToReadable'
-import { BubbleProps } from '@typebot.io/js'
 
 export const SupportBubble = (props: Omit<BubbleProps, 'typebot'>) => {
   const { typebot } = useTypebot()

apps/builder/src/features/dashboard/components/OnboardingModal.tsx

@@ -1,5 +1,5 @@
 import { chakra, useColorModeValue } from '@chakra-ui/react'
-import { Popup } from '@typebot.io/react'
+import { Popup } from '@typebot.io/nextjs'
 import { useUser } from '@/features/account/hooks/useUser'
 import { Typebot } from '@typebot.io/schemas'
 import React, { useEffect, useRef, useState } from 'react'

apps/builder/src/features/preview/components/WebPreview.tsx

@@ -3,7 +3,7 @@ import { useEditor } from '@/features/editor/providers/EditorProvider'
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { useGraph } from '@/features/graph/providers/GraphProvider'
 import { useToast } from '@/hooks/useToast'
-import { Standard } from '@typebot.io/react'
+import { Standard } from '@typebot.io/nextjs'
 import { ChatReply } from '@typebot.io/schemas'
 
 export const WebPreview = () => {

apps/builder/src/features/publish/components/embeds/EmbedButton.tsx

@@ -37,6 +37,8 @@ import { ApiModal } from './modals/ApiModal'
 import { ScriptIcon } from '@/features/blocks/logic/script/components/ScriptIcon'
 import { FlutterFlowLogo } from './logos/FlutterFlowLogo'
 import { FlutterFlowModal } from './modals/FlutterFlowModal'
+import { NextjsLogo } from './logos/NextjsLogo'
+import { NextjsModal } from './modals/Nextjs/NextjsModal'
 
 export type ModalProps = {
   publicId: string
@@ -125,6 +127,14 @@ export const integrationsList = [
       {...props}
     />
   ),
+  (props: Pick<ModalProps, 'publicId' | 'isPublished'>) => (
+    <EmbedButton
+      logo={<NextjsLogo height={100} width="70px" />}
+      label="Nextjs"
+      Modal={NextjsModal}
+      {...props}
+    />
+  ),
   (props: Pick<ModalProps, 'publicId' | 'isPublished'>) => (
     <EmbedButton
       logo={<CodeIcon height={100} width="60px" />}

apps/builder/src/features/publish/components/embeds/logos/NextjsLogo.tsx

@@ -0,0 +1,62 @@
+import { Icon, IconProps } from '@chakra-ui/react'
+
+export const NextjsLogo = (props: IconProps) => (
+  <Icon
+    aria-label="Next.js logomark"
+    height="80"
+    role="img"
+    viewBox="0 0 180 180"
+    width="80"
+    {...props}
+  >
+    <mask
+      height="180"
+      id=":R0:mask0_408_134"
+      maskUnits="userSpaceOnUse"
+      style={{ maskType: 'alpha' }}
+      width="180"
+      x="0"
+      y="0"
+    >
+      <circle cx="90" cy="90" fill="black" r="90"></circle>
+    </mask>
+    <g mask="url(#:R0:mask0_408_134)">
+      <circle cx="90" cy="90" data-circle="true" fill="black" r="90"></circle>
+      <path
+        d="M149.508 157.52L69.142 54H54V125.97H66.1136V69.3836L139.999 164.845C143.333 162.614 146.509 160.165 149.508 157.52Z"
+        fill="url(#:R0:paint0_linear_408_134)"
+      ></path>
+      <rect
+        fill="url(#:R0:paint1_linear_408_134)"
+        height="72"
+        width="12"
+        x="115"
+        y="54"
+      ></rect>
+    </g>
+    <defs>
+      <linearGradient
+        gradientUnits="userSpaceOnUse"
+        id=":R0:paint0_linear_408_134"
+        x1="109"
+        x2="144.5"
+        y1="116.5"
+        y2="160.5"
+      >
+        <stop stop-color="white"></stop>
+        <stop offset="1" stop-color="white" stop-opacity="0"></stop>
+      </linearGradient>
+      <linearGradient
+        gradientUnits="userSpaceOnUse"
+        id=":R0:paint1_linear_408_134"
+        x1="121"
+        x2="120.799"
+        y1="54"
+        y2="106.875"
+      >
+        <stop stop-color="white"></stop>
+        <stop offset="1" stop-color="white" stop-opacity="0"></stop>
+      </linearGradient>
+    </defs>
+  </Icon>
+)

apps/builder/src/features/publish/components/embeds/modals/GtmModal/instructions/GtmBubbleInstructions.tsx

@@ -1,6 +1,6 @@
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { OrderedList, ListItem, Stack, Text, Code } from '@chakra-ui/react'
-import { BubbleProps } from '@typebot.io/js'
+import { BubbleProps } from '@typebot.io/nextjs'
 import { useState } from 'react'
 import { BubbleSettings } from '../../../settings/BubbleSettings/BubbleSettings'
 import { parseDefaultBubbleTheme } from '../../Javascript/instructions/JavascriptBubbleInstructions'

apps/builder/src/features/publish/components/embeds/modals/Javascript/JavascriptBubbleSnippet.tsx

@@ -7,7 +7,7 @@ import {
 } from '../../snippetParsers'
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { CodeEditor } from '@/components/inputs/CodeEditor'
-import { BubbleProps } from '@typebot.io/js'
+import { BubbleProps } from '@typebot.io/nextjs'
 
 type Props = Pick<BubbleProps, 'theme' | 'previewMessage'>
 

apps/builder/src/features/publish/components/embeds/modals/Javascript/JavascriptPopupSnippet.tsx

@@ -7,7 +7,7 @@ import {
   typebotImportCode,
 } from '../../snippetParsers'
 import { CodeEditor } from '@/components/inputs/CodeEditor'
-import { PopupProps } from '@typebot.io/js'
+import { PopupProps } from '@typebot.io/nextjs'
 
 type Props = Pick<PopupProps, 'autoShowDelay'>
 

apps/builder/src/features/publish/components/embeds/modals/Javascript/instructions/JavascriptBubbleInstructions.tsx

@@ -1,6 +1,6 @@
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { Stack, Code, Text } from '@chakra-ui/react'
-import { BubbleProps } from '@typebot.io/js'
+import { BubbleProps } from '@typebot.io/nextjs'
 import { Typebot } from '@typebot.io/schemas'
 import { useState } from 'react'
 import { BubbleSettings } from '../../../settings/BubbleSettings/BubbleSettings'

apps/builder/src/features/publish/components/embeds/modals/Nextjs/InstallNextjsPackageSnippet.tsx

@@ -0,0 +1,11 @@
+import { CodeEditor } from '@/components/inputs/CodeEditor'
+
+export const InstallNextjsPackageSnippet = () => {
+  return (
+    <CodeEditor
+      value={`npm install @typebot.io/nextjs`}
+      isReadOnly
+      lang="shell"
+    />
+  )
+}

apps/builder/src/features/publish/components/embeds/modals/Nextjs/NextjsBubbleSnippet.tsx

@@ -0,0 +1,31 @@
+import { CodeEditor } from '@/components/inputs/CodeEditor'
+import { useTypebot } from '@/features/editor/providers/TypebotProvider'
+import { BubbleProps } from '@typebot.io/nextjs'
+import parserBabel from 'prettier/parser-babel'
+import prettier from 'prettier/standalone'
+import { parseReactBubbleProps } from '../../snippetParsers'
+
+export const NextjsBubbleSnippet = ({
+  theme,
+  previewMessage,
+}: Pick<BubbleProps, 'theme' | 'previewMessage'>) => {
+  const { typebot } = useTypebot()
+
+  const snippet = prettier.format(
+    `import { Bubble } from "@typebot.io/nextjs";
+
+      const App = () => {
+        return <Bubble ${parseReactBubbleProps({
+          typebot: typebot?.publicId ?? '',
+          theme,
+          previewMessage,
+        })}/>
+      }`,
+    {
+      parser: 'babel',
+      plugins: [parserBabel],
+    }
+  )
+
+  return <CodeEditor value={snippet} lang="javascript" isReadOnly />
+}

apps/builder/src/features/publish/components/embeds/modals/Nextjs/NextjsModal.tsx

@@ -0,0 +1,25 @@
+import React, { useState } from 'react'
+import { ModalProps } from '../../EmbedButton'
+import { EmbedModal } from '../../EmbedModal'
+import { isDefined } from '@udecode/plate-common'
+import { NextjsInstructions } from './instructions/NextjsInstructions'
+
+export const NextjsModal = ({ isOpen, onClose, isPublished }: ModalProps) => {
+  const [selectedEmbedType, setSelectedEmbedType] = useState<
+    'standard' | 'popup' | 'bubble' | undefined
+  >()
+  return (
+    <EmbedModal
+      titlePrefix="Next.js"
+      isOpen={isOpen}
+      onClose={onClose}
+      isPublished={isPublished}
+      onSelectEmbedType={setSelectedEmbedType}
+      selectedEmbedType={selectedEmbedType}
+    >
+      {isDefined(selectedEmbedType) && (
+        <NextjsInstructions type={selectedEmbedType} />
+      )}
+    </EmbedModal>
+  )
+}

apps/builder/src/features/publish/components/embeds/modals/Nextjs/NextjsPopupSnippet.tsx

@@ -0,0 +1,29 @@
+import { CodeEditor } from '@/components/inputs/CodeEditor'
+import { useTypebot } from '@/features/editor/providers/TypebotProvider'
+import { PopupProps } from '@typebot.io/nextjs'
+import parserBabel from 'prettier/parser-babel'
+import prettier from 'prettier/standalone'
+import { parseReactPopupProps } from '../../snippetParsers'
+
+export const NextjsPopupSnippet = ({
+  autoShowDelay,
+}: Pick<PopupProps, 'autoShowDelay'>) => {
+  const { typebot } = useTypebot()
+
+  const snippet = prettier.format(
+    `import { Popup } from "@typebot.io/nextjs";
+
+      const App = () => {
+        return <Popup ${parseReactPopupProps({
+          typebot: typebot?.publicId ?? '',
+          autoShowDelay,
+        })}/>;
+      }`,
+    {
+      parser: 'babel',
+      plugins: [parserBabel],
+    }
+  )
+
+  return <CodeEditor value={snippet} lang="javascript" isReadOnly />
+}

apps/builder/src/features/publish/components/embeds/modals/Nextjs/NextjsStandardSnippet.tsx

@@ -0,0 +1,28 @@
+import { CodeEditor } from '@/components/inputs/CodeEditor'
+import { useTypebot } from '@/features/editor/providers/TypebotProvider'
+import parserBabel from 'prettier/parser-babel'
+import prettier from 'prettier/standalone'
+import { parseReactBotProps } from '../../snippetParsers'
+
+type Props = { widthLabel?: string; heightLabel: string }
+
+export const NextjsStandardSnippet = ({
+  widthLabel,
+  heightLabel,
+}: Props) => {
+  const { typebot } = useTypebot()
+  const snippet = prettier.format(
+    `import { Standard } from "@typebot.io/nextjs";
+
+      const App = () => {
+        return <Standard ${parseReactBotProps({
+          typebot: typebot?.publicId ?? '',
+        })} style={{width: "${widthLabel}", height: "${heightLabel}"}} />
+      }`,
+    {
+      parser: 'babel',
+      plugins: [parserBabel],
+    }
+  )
+  return <CodeEditor value={snippet} lang="javascript" isReadOnly />
+}

apps/builder/src/features/publish/components/embeds/modals/Nextjs/instructions/NextjsBubbleInstructions.tsx

@@ -0,0 +1,42 @@
+import { useTypebot } from '@/features/editor/providers/TypebotProvider'
+import { ListItem, OrderedList, Stack, Text } from '@chakra-ui/react'
+import { BubbleProps } from '@typebot.io/nextjs'
+import { useState } from 'react'
+import { BubbleSettings } from '../../../settings/BubbleSettings/BubbleSettings'
+import { InstallNextjsPackageSnippet } from '../InstallNextjsPackageSnippet'
+import { NextjsBubbleSnippet } from '../NextjsBubbleSnippet'
+import { parseDefaultBubbleTheme } from '../../Javascript/instructions/JavascriptBubbleInstructions'
+
+export const NextjsBubbleInstructions = () => {
+  const { typebot } = useTypebot()
+  const [theme, setTheme] = useState<BubbleProps['theme']>(
+    parseDefaultBubbleTheme(typebot)
+  )
+  const [previewMessage, setPreviewMessage] =
+    useState<BubbleProps['previewMessage']>()
+
+  return (
+    <OrderedList spacing={4} pl={5}>
+      <ListItem>
+        <Stack spacing={4}>
+          <Text>Install the packages</Text>
+          <InstallNextjsPackageSnippet />
+        </Stack>
+      </ListItem>
+      <ListItem>
+        <Stack spacing={4}>
+          <BubbleSettings
+            theme={theme}
+            previewMessage={previewMessage}
+            defaultPreviewMessageAvatar={
+              typebot?.theme.chat.hostAvatar?.url ?? ''
+            }
+            onThemeChange={setTheme}
+            onPreviewMessageChange={setPreviewMessage}
+          />
+          <NextjsBubbleSnippet theme={theme} previewMessage={previewMessage} />
+        </Stack>
+      </ListItem>
+    </OrderedList>
+  )
+}

apps/builder/src/features/publish/components/embeds/modals/Nextjs/instructions/NextjsInstructions.tsx

@@ -0,0 +1,21 @@
+import { NextjsBubbleInstructions } from './NextjsBubbleInstructions'
+import { NextjsPopupInstructions } from './NextjsPopupInstructions'
+import { NextjsStandardInstructions } from './NextjsStandardInstructions'
+
+type Props = {
+  type: 'standard' | 'popup' | 'bubble'
+}
+
+export const NextjsInstructions = ({ type }: Props) => {
+  switch (type) {
+    case 'standard': {
+      return <NextjsStandardInstructions />
+    }
+    case 'popup': {
+      return <NextjsPopupInstructions />
+    }
+    case 'bubble': {
+      return <NextjsBubbleInstructions />
+    }
+  }
+}

apps/builder/src/features/publish/components/embeds/modals/Nextjs/instructions/NextjsPopupInstructions.tsx

@@ -0,0 +1,30 @@
+import { ListItem, OrderedList, Stack, Text } from '@chakra-ui/react'
+import { useState } from 'react'
+import { PopupSettings } from '../../../settings/PopupSettings'
+import { InstallNextjsPackageSnippet } from '../InstallNextjsPackageSnippet'
+import { NextjsPopupSnippet } from '../NextjsPopupSnippet'
+
+export const NextjsPopupInstructions = () => {
+  const [inputValue, setInputValue] = useState<number>()
+
+  return (
+    <OrderedList spacing={4} pl={5}>
+      <ListItem>
+        <Stack spacing={4}>
+          <Text>Install the packages</Text>
+          <InstallNextjsPackageSnippet />
+        </Stack>
+      </ListItem>
+      <ListItem>
+        <Stack spacing={4}>
+          <PopupSettings
+            onUpdateSettings={(settings) =>
+              setInputValue(settings.autoShowDelay)
+            }
+          />
+          <NextjsPopupSnippet autoShowDelay={inputValue} />
+        </Stack>
+      </ListItem>
+    </OrderedList>
+  )
+}

apps/builder/src/features/publish/components/embeds/modals/Nextjs/instructions/NextjsStandardInstructions.tsx

@@ -0,0 +1,36 @@
+import { ListItem, OrderedList, Stack, Text } from '@chakra-ui/react'
+import { useState } from 'react'
+import { StandardSettings } from '../../../settings/StandardSettings'
+import { InstallNextjsPackageSnippet } from '../InstallNextjsPackageSnippet'
+import { NextjsStandardSnippet } from '../NextjsStandardSnippet'
+
+export const NextjsStandardInstructions = () => {
+  const [inputValues, setInputValues] = useState<{
+    widthLabel?: string
+    heightLabel: string
+  }>({
+    heightLabel: '100%',
+    widthLabel: '100%',
+  })
+
+  return (
+    <OrderedList spacing={4} pl={5}>
+      <ListItem>
+        <Stack spacing={4}>
+          <Text>Install the packages</Text>
+          <InstallNextjsPackageSnippet />
+        </Stack>
+      </ListItem>
+      <ListItem>
+        <Stack spacing={4}>
+          <StandardSettings
+            onUpdateWindowSettings={(settings) =>
+              setInputValues({ ...settings })
+            }
+          />
+          <NextjsStandardSnippet {...inputValues} />
+        </Stack>
+      </ListItem>
+    </OrderedList>
+  )
+}

apps/builder/src/features/publish/components/embeds/modals/React/InstallReactPackageSnippet.tsx

@@ -3,7 +3,7 @@ import { CodeEditor } from '@/components/inputs/CodeEditor'
 export const InstallReactPackageSnippet = () => {
   return (
     <CodeEditor
-      value={`npm install @typebot.io/js @typebot.io/react`}
+      value={`npm install @typebot.io/react`}
       isReadOnly
       lang="shell"
     />

apps/builder/src/features/publish/components/embeds/modals/React/ReactBubbleSnippet.tsx

@@ -1,6 +1,6 @@
 import { CodeEditor } from '@/components/inputs/CodeEditor'
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
-import { BubbleProps } from '@typebot.io/js'
+import { BubbleProps } from '@typebot.io/nextjs'
 import parserBabel from 'prettier/parser-babel'
 import prettier from 'prettier/standalone'
 import { parseReactBubbleProps } from '../../snippetParsers'

apps/builder/src/features/publish/components/embeds/modals/React/ReactPopupSnippet.tsx

@@ -1,6 +1,6 @@
 import { CodeEditor } from '@/components/inputs/CodeEditor'
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
-import { PopupProps } from '@typebot.io/js'
+import { PopupProps } from '@typebot.io/nextjs'
 import parserBabel from 'prettier/parser-babel'
 import prettier from 'prettier/standalone'
 import { parseReactPopupProps } from '../../snippetParsers'

apps/builder/src/features/publish/components/embeds/modals/React/instructions/ReactBubbleInstructions.tsx

@@ -1,6 +1,6 @@
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { ListItem, OrderedList, Stack, Text } from '@chakra-ui/react'
-import { BubbleProps } from '@typebot.io/js'
+import { BubbleProps } from '@typebot.io/nextjs'
 import { useState } from 'react'
 import { BubbleSettings } from '../../../settings/BubbleSettings/BubbleSettings'
 import { InstallReactPackageSnippet } from '../InstallReactPackageSnippet'

apps/builder/src/features/publish/components/embeds/modals/Script/instructions/ScriptBubbleInstructions.tsx

@@ -1,7 +1,7 @@
 import { CodeEditor } from '@/components/inputs/CodeEditor'
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { Stack, Text } from '@chakra-ui/react'
-import { BubbleProps } from '@typebot.io/js'
+import { BubbleProps } from '@typebot.io/nextjs'
 import { Typebot } from '@typebot.io/schemas'
 import { useState } from 'react'
 import { BubbleSettings } from '../../../settings/BubbleSettings/BubbleSettings'

apps/builder/src/features/publish/components/embeds/modals/ShopifyModal/instructions/ShopifyBubbleInstructions.tsx

@@ -1,6 +1,6 @@
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { OrderedList, ListItem, Stack, Text, Code } from '@chakra-ui/react'
-import { BubbleProps } from '@typebot.io/js'
+import { BubbleProps } from '@typebot.io/nextjs'
 import { useState } from 'react'
 import { BubbleSettings } from '../../../settings/BubbleSettings/BubbleSettings'
 import { parseDefaultBubbleTheme } from '../../Javascript/instructions/JavascriptBubbleInstructions'

apps/builder/src/features/publish/components/embeds/modals/WebflowModal/instructions/WebflowBubbleInstructions.tsx

@@ -1,6 +1,6 @@
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { OrderedList, ListItem, Code, Stack, Text } from '@chakra-ui/react'
-import { BubbleProps } from '@typebot.io/js'
+import { BubbleProps } from '@typebot.io/nextjs'
 import { useState } from 'react'
 import { BubbleSettings } from '../../../settings/BubbleSettings/BubbleSettings'
 import { parseDefaultBubbleTheme } from '../../Javascript/instructions/JavascriptBubbleInstructions'

apps/builder/src/features/publish/components/embeds/modals/WixModal/instructions/WixBubbleInstructions.tsx

@@ -1,6 +1,6 @@
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { OrderedList, ListItem, Code, Stack, Text } from '@chakra-ui/react'
-import { BubbleProps } from '@typebot.io/js'
+import { BubbleProps } from '@typebot.io/nextjs'
 import { useState } from 'react'
 import { BubbleSettings } from '../../../settings/BubbleSettings/BubbleSettings'
 import { parseDefaultBubbleTheme } from '../../Javascript/instructions/JavascriptBubbleInstructions'

apps/builder/src/features/publish/components/embeds/modals/WordpressModal/instructions/WordpressBubbleInstructions.tsx

@@ -9,7 +9,7 @@ import {
   Stack,
   Text,
 } from '@chakra-ui/react'
-import { BubbleProps } from '@typebot.io/js'
+import { BubbleProps } from '@typebot.io/nextjs'
 import { useState } from 'react'
 import { BubbleSettings } from '../../../settings/BubbleSettings/BubbleSettings'
 import { parseApiHostValue, parseInitBubbleCode } from '../../../snippetParsers'

apps/builder/src/features/publish/components/embeds/settings/BubbleSettings/BubbleSettings.tsx

@@ -7,7 +7,7 @@ import {
   Image,
   chakra,
 } from '@chakra-ui/react'
-import { BubbleProps } from '@typebot.io/js'
+import { BubbleProps } from '@typebot.io/nextjs'
 import { isDefined, isSvgSrc } from '@typebot.io/lib'
 import { PreviewMessageSettings } from './PreviewMessageSettings'
 import { ThemeSettings } from './ThemeSettings'

apps/builder/src/features/publish/components/embeds/settings/BubbleSettings/ButtonThemeSettings.tsx

@@ -15,7 +15,7 @@ import {
   Stack,
   Text,
 } from '@chakra-ui/react'
-import { ButtonTheme } from '@typebot.io/js/dist/features/bubble/types'
+import { ButtonTheme } from '@typebot.io/nextjs'
 import React from 'react'
 
 type Props = {

apps/builder/src/features/publish/components/embeds/settings/BubbleSettings/PreviewMessageSettings.tsx

@@ -1,6 +1,6 @@
 import { NumberInput } from '@/components/inputs'
 import { FormLabel, HStack, Input, Stack, Switch, Text } from '@chakra-ui/react'
-import { PreviewMessageParams } from '@typebot.io/js/dist/features/bubble/types'
+import { PreviewMessageParams } from '@typebot.io/nextjs'
 import { useState } from 'react'
 import { isDefined } from '@typebot.io/lib'
 

apps/builder/src/features/publish/components/embeds/settings/BubbleSettings/PreviewMessageThemeSettings.tsx

@@ -1,6 +1,6 @@
 import { ColorPicker } from '@/components/ColorPicker'
 import { Heading, HStack, Stack, Text } from '@chakra-ui/react'
-import { PreviewMessageTheme } from '@typebot.io/js/dist/features/bubble/types'
+import { PreviewMessageTheme } from '@typebot.io/nextjs'
 import React from 'react'
 
 type Props = {

apps/builder/src/features/publish/components/embeds/settings/BubbleSettings/ThemeSettings.tsx

@@ -13,12 +13,12 @@ import {
   Stack,
   Text,
 } from '@chakra-ui/react'
-import { BubbleProps } from '@typebot.io/js'
+import { BubbleProps } from '@typebot.io/nextjs'
 import {
   BubbleTheme,
   ButtonTheme,
   PreviewMessageTheme,
-} from '@typebot.io/js/dist/features/bubble/types'
+} from '@typebot.io/nextjs'
 import { ButtonThemeSettings } from './ButtonThemeSettings'
 import { PreviewMessageThemeSettings } from './PreviewMessageThemeSettings'
 import { ChevronDownIcon } from '@/components/icons'

apps/builder/src/features/publish/components/embeds/settings/PopupSettings.tsx

@@ -7,7 +7,7 @@ import {
   HStack,
   Text,
 } from '@chakra-ui/react'
-import { PopupProps } from '@typebot.io/js'
+import { PopupProps } from '@typebot.io/nextjs'
 import { useState, useEffect } from 'react'
 import { isDefined } from '@typebot.io/lib'
 

apps/builder/src/features/publish/components/embeds/snippetParsers/bubble.ts

@@ -1,4 +1,4 @@
-import { BubbleProps } from '@typebot.io/js'
+import { BubbleProps } from '@typebot.io/nextjs'
 import parserBabel from 'prettier/parser-babel'
 import prettier from 'prettier/standalone'
 import {

apps/builder/src/features/publish/components/embeds/snippetParsers/popup.ts

@@ -1,4 +1,4 @@
-import { PopupProps } from '@typebot.io/js'
+import { PopupProps } from '@typebot.io/nextjs'
 import parserBabel from 'prettier/parser-babel'
 import prettier from 'prettier/standalone'
 import {

apps/builder/src/features/publish/components/embeds/snippetParsers/shared.ts

@@ -1,4 +1,4 @@
-import { BotProps } from '@typebot.io/js'
+import { BotProps } from '@typebot.io/nextjs'
 import parserBabel from 'prettier/parser-babel'
 import prettier from 'prettier/standalone'
 import { env, getViewerUrl, isDefined } from '@typebot.io/lib'
@@ -42,7 +42,7 @@ export const parseReactBotProps = ({ typebot, apiHost }: BotProps) => {
 }
 
 export const typebotImportCode = isCloudProdInstance
-  ? `import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0/dist/web.js'`
+  ? `import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.1/dist/web.js'`
   : `import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@${packageJson.version}/dist/web.js'`
 
 export const parseInlineScript = (script: string) =>

apps/builder/src/features/publish/components/embeds/snippetParsers/standard.ts

@@ -1,4 +1,4 @@
-import { BotProps } from '@typebot.io/js'
+import { BotProps } from '@typebot.io/nextjs'
 import parserBabel from 'prettier/parser-babel'
 import prettier from 'prettier/standalone'
 import { parseBotProps } from './shared'

apps/builder/src/features/settings/components/SettingsPage.tsx

@@ -1,6 +1,6 @@
 import { Seo } from '@/components/Seo'
 import { Flex } from '@chakra-ui/react'
-import { Standard } from '@typebot.io/react'
+import { Standard } from '@typebot.io/nextjs'
 import { getViewerUrl } from '@typebot.io/lib'
 import { SettingsSideMenu } from './SettingsSideMenu'
 import { TypebotHeader } from '@/features/editor/components/TypebotHeader'

apps/builder/src/features/templates/components/TemplatesModal.tsx

@@ -12,7 +12,7 @@ import {
   chakra,
   useColorModeValue,
 } from '@chakra-ui/react'
-import { Standard } from '@typebot.io/react'
+import { Standard } from '@typebot.io/nextjs'
 import { Typebot } from '@typebot.io/schemas'
 import React, { useCallback, useEffect, useState } from 'react'
 import { templates } from '../data'

apps/builder/src/features/theme/components/ThemePage.tsx

@@ -2,7 +2,7 @@ import { Seo } from '@/components/Seo'
 import { TypebotHeader } from '@/features/editor/components/TypebotHeader'
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { Flex } from '@chakra-ui/react'
-import { Standard } from '@typebot.io/react'
+import { Standard } from '@typebot.io/nextjs'
 import { ThemeSideMenu } from './ThemeSideMenu'
 
 export const ThemePage = () => {

apps/docs/docs/embed/html-javascript.md

@@ -12,7 +12,7 @@ There, you can change the container dimensions. Here is a code example:
 
 ```html
 <script type="module">
-  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0/dist/web.js'
+  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.1/dist/web.js'
 
   Typebot.initStandard({
     typebot: 'my-typebot',
@@ -32,7 +32,7 @@ Here is an example:
 
 ```html
 <script type="module">
-  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0/dist/web.js'
+  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.1/dist/web.js'
 
   Typebot.initPopup({
     typebot: 'my-typebot',
@@ -72,7 +72,7 @@ If you have different bots on the same page you will have to make them distinct
 
 ```html
 <script type="module">
-  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0/dist/web.js'
+  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.1/dist/web.js'
 
   Typebot.initStandard({
     id: 'bot1'
@@ -104,7 +104,7 @@ Here is an example:
 
 ```html
 <script type="module">
-  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0/dist/web.js'
+  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.1/dist/web.js'
 
   Typebot.initBubble({
     typebot: 'my-typebot',

apps/docs/docs/embed/react.md

@@ -6,10 +6,8 @@ sidebar_position: 5
 
 ## Install
 
-Make sure you install both `@typebot.io/js` and `@typebot.io/react` first.
-
 ```bash
-npm install @typebot.io/js @typebot.io/react
+npm install @typebot.io/react
 ```
 
 ## Standard

apps/docs/docs/embed/webflow.md

@@ -22,7 +22,7 @@ It should look like:
 
 ```html
 <script type="module">
-  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0/dist/web.js'
+  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.1/dist/web.js'
 
   Typebot.initPopup({
     typebot: 'my-typebot',

apps/landing-page/components/Homepage/IntroducingChatApps.tsx

@@ -16,7 +16,7 @@ import { sendRequest } from '@typebot.io/lib'
 import { DontIcon } from 'assets/icons/DontIcon'
 import { DoIcon } from 'assets/icons/DoIcon'
 import { HandDrawnArrow } from 'assets/illustrations/HandDrawnArrow'
-import { Standard } from '@typebot.io/react'
+import { Standard } from '@typebot.io/nextjs'
 
 export const IntroducingChatApps = () => {
   const [typebot, setTypebot] = useState<PublicTypebot>()

apps/landing-page/components/Homepage/RealTimeResults.tsx

@@ -1,5 +1,5 @@
 import { Flex, Stack, Heading, Text, Button, VStack } from '@chakra-ui/react'
-import { Standard } from '@typebot.io/react'
+import { Standard } from '@typebot.io/nextjs'
 import { ArrowRight } from 'assets/icons/ArrowRight'
 import { HandDrawnArrow } from 'assets/illustrations/HandDrawnArrow'
 import { PublicTypebot, Typebot } from '@typebot.io/schemas'

apps/landing-page/package.json

@@ -15,8 +15,7 @@
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@vercel/analytics": "1.0.1",
-    "@typebot.io/react": "workspace:*",
-    "@typebot.io/js": "workspace:*",
+    "@typebot.io/nextjs": "workspace:*",
     "aos": "2.3.4",
     "@typebot.io/prisma": "workspace:*",
     "focus-visible": "5.2.0",

apps/viewer/package.json

@@ -16,9 +16,8 @@
     "@planetscale/database": "^1.8.0",
     "@sentry/nextjs": "7.58.1",
     "@trpc/server": "10.34.0",
-    "@typebot.io/js": "workspace:*",
     "@typebot.io/prisma": "workspace:*",
-    "@typebot.io/react": "workspace:*",
+    "@typebot.io/nextjs": "workspace:*",
     "ai": "^2.1.20",
     "aws-sdk": "2.1415.0",
     "bot-engine": "workspace:*",

apps/viewer/src/components/TypebotPageV3.tsx

@@ -1,4 +1,4 @@
-import { Standard } from '@typebot.io/react'
+import { Standard } from '@typebot.io/nextjs'
 import { BackgroundType, Typebot } from '@typebot.io/schemas'
 import { useRouter } from 'next/router'
 import { SEO } from './Seo'

packages/embeds/js/README.md

@@ -16,7 +16,7 @@ npm install @typebot.io/js
 
 ```
 <script type="module">
-  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js/dist/web.js'
+  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.1/dist/web.js'
 
   Typebot.initStandard({
     typebot: 'my-typebot',
@@ -34,7 +34,7 @@ There, you can change the container dimensions. Here is a code example:
 
 ```html
 <script type="module">
-  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0/dist/web.js'
+  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.1/dist/web.js'
 
   Typebot.initStandard({
     typebot: 'my-typebot',
@@ -54,7 +54,7 @@ Here is an example:
 
 ```html
 <script type="module">
-  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0/dist/web.js'
+  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.1/dist/web.js'
 
   Typebot.initPopup({
     typebot: 'my-typebot',
@@ -96,7 +96,7 @@ Here is an example:
 
 ```html
 <script type="module">
-  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0/dist/web.js'
+  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.1/dist/web.js'
 
   Typebot.initBubble({
     typebot: 'my-typebot',

packages/embeds/js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.0.80",
+  "version": "0.1.0",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",

packages/embeds/js/src/index.ts

@@ -3,3 +3,5 @@ export * from './features/commands'
 export type { BotProps } from './components/Bot'
 export type { PopupProps } from './features/popup/components/Popup'
 export type { BubbleProps } from './features/bubble/components/Bubble'
+export type * from './features/bubble/types'
+export type * from './features/popup/types'

packages/embeds/nextjs/.eslintrc.cjs

@@ -0,0 +1,8 @@
+module.exports = {
+  root: true,
+  extends: ['custom'],
+  rules: {
+    '@next/next/no-img-element': 'off',
+    '@next/next/no-html-link-for-pages': 'off',
+  },
+}

packages/embeds/nextjs/.npmignore

@@ -0,0 +1,5 @@
+src
+.eslintignore
+.eslintrc.cjs
+rollup.config.js
+tsconfig.json

packages/embeds/nextjs/.npmrc

@@ -0,0 +1 @@
+//registry.npmjs.org/:_authToken=${NPM_TOKEN}

packages/embeds/nextjs/README.md

@@ -0,0 +1,144 @@
+## Install
+
+```bash
+npm install @typebot.io/nextjs
+```
+
+## Standard
+
+```tsx
+import { Standard } from '@typebot.io/nextjs'
+
+const App = () => {
+  return (
+    <Standard
+      typebot="lead-generation-copy-3luzm6b"
+      style={{ width: '100%', height: '600px' }}
+    />
+  )
+}
+```
+
+This code is creating a container with a 100% width (will match parent width) and 600px height.
+
+## Popup
+
+```tsx
+import { Popup } from '@typebot.io/nextjs'
+
+const App = () => {
+  return <Popup typebot="lead-generation-copy-3luzm6b" autoShowDelay={3000} />
+}
+```
+
+This code will automatically trigger the popup window after 3 seconds.
+
+### Open or Close a popup
+
+You can use these commands:
+
+```js
+import { open } from '@typebot.io/nextjs'
+
+open()
+```
+
+```js
+import { close } from '@typebot.io/nextjs'
+
+close()
+```
+
+```js
+import { toggle } from '@typebot.io/nextjs'
+
+toggle()
+```
+
+## Bubble
+
+```tsx
+import { Bubble } from '@typebot.io/nextjs'
+
+const App = () => {
+  return (
+    <Bubble
+      typebot="lead-generation-copy-3luzm6b"
+      previewMessage={{
+        message: 'I have a question for you!',
+        autoShowDelay: 5000,
+        avatarUrl: 'https://avatars.githubusercontent.com/u/16015833?v=4',
+      }}
+      theme={{
+        button: { backgroundColor: '#0042DA', iconColor: '#FFFFFF' },
+        previewMessage: { backgroundColor: '#ffffff', textColor: 'black' },
+      }}
+    />
+  )
+}
+```
+
+This code will show the bubble and let a preview message appear after 5 seconds.
+
+### Open or close the preview message
+
+You can use these commands:
+
+```js
+import { showPreviewMessage } from '@typebot.io/nextjs'
+
+Typebot.showPreviewMessage()
+```
+
+```js
+import { hidePreviewMessage } from '@typebot.io/nextjs'
+
+Typebot.hidePreviewMessage()
+```
+
+### Open or close the chat window
+
+You can use these commands:
+
+```js
+import { open } from '@typebot.io/nextjs'
+
+open()
+```
+
+```js
+import { close } from '@typebot.io/nextjs'
+
+close()
+```
+
+```js
+import { toggle } from '@typebot.io/nextjs'
+
+toggle()
+```
+
+## Additional configuration
+
+You can prefill the bot variable values in your embed code by adding the `prefilledVariables` option. Here is an example:
+
+```tsx
+import { Standard } from '@typebot.io/nextjs'
+
+const App = () => {
+  return (
+    <Standard
+      typebot="lead-generation-copy-3luzm6b"
+      style={{ width: '100%', height: '600px' }}
+      prefilledVariables={{
+        'Current URL': 'https://my-site/account',
+        'User name': 'John Doe',
+      }}
+    />
+  )
+}
+```
+
+It will prefill the `Current URL` variable with "https://my-site/account" and the `User name` variable with "John Doe". More info about variables: [here](/editor/variables).
+
+Note that if your site URL contains query params (i.e. https://typebot.io?User%20name=John%20Doe), the variables will automatically be injected to the typebot. So you don't need to manually transfer query params to the bot embed configuration.

packages/embeds/nextjs/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@typebot.io/nextjs",
+  "version": "0.1.0",
+  "description": "Convenient library to display typebots on your Next.js website",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "scripts": {
+    "dev": "rollup --watch --config rollup.config.js",
+    "build": "rollup --config rollup.config.js",
+    "lint": "eslint --fix \"src/**/*.ts*\""
+  },
+  "keywords": [],
+  "author": "Baptiste Arnaud",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/preset-react": "7.22.5",
+    "@babel/preset-typescript": "7.22.5",
+    "@rollup/plugin-alias": "^5.0.0",
+    "@rollup/plugin-babel": "6.0.3",
+    "@rollup/plugin-node-resolve": "15.1.0",
+    "@rollup/plugin-terser": "0.4.3",
+    "@rollup/plugin-typescript": "11.1.2",
+    "@typebot.io/js": "workspace:*",
+    "@typebot.io/react": "workspace:*",
+    "@typebot.io/lib": "workspace:*",
+    "@typebot.io/prisma": "workspace:*",
+    "@typebot.io/schemas": "workspace:*",
+    "@typebot.io/tsconfig": "workspace:*",
+    "@types/node": "20.4.2",
+    "@types/react": "18.2.15",
+    "eslint": "8.44.0",
+    "eslint-config-custom": "workspace:*",
+    "react": "18.2.0",
+    "rollup": "3.26.2",
+    "rollup-plugin-typescript-paths": "1.4.0",
+    "tslib": "2.6.0",
+    "tsx": "3.12.7",
+    "typescript": "5.1.6"
+  },
+  "peerDependencies": {
+    "next": "12.x || 13.x",
+    "react": "18.x"
+  }
+}

packages/embeds/nextjs/rollup.config.js

@@ -0,0 +1,38 @@
+import resolve from '@rollup/plugin-node-resolve'
+import terser from '@rollup/plugin-terser'
+import { babel } from '@rollup/plugin-babel'
+import typescript from '@rollup/plugin-typescript'
+import { typescriptPaths } from 'rollup-plugin-typescript-paths'
+import alias from '@rollup/plugin-alias'
+
+const extensions = ['.ts', '.tsx']
+
+const indexConfig = {
+  input: './src/index.ts',
+  output: {
+    dir: './dist',
+    format: 'es',
+  },
+  external: ['next/dynamic', 'react', 'react/jsx-runtime'],
+  plugins: [
+    alias({
+      entries: [
+        { find: '@typebot.io/js/dist/web', replacement: '../../js/dist/web' },
+      ],
+    }),
+    resolve({ extensions }),
+    babel({
+      babelHelpers: 'bundled',
+      exclude: 'node_modules/**',
+      presets: ['@babel/preset-react', '@babel/preset-typescript'],
+      extensions,
+    }),
+    typescript(),
+    typescriptPaths({ preserveExtensions: true }),
+    terser({ output: { comments: false } }),
+  ],
+}
+
+const configs = [indexConfig]
+
+export default configs

packages/embeds/nextjs/src/index.ts

@@ -0,0 +1,16 @@
+import dynamic from 'next/dynamic'
+
+export const Standard = dynamic(
+  () => import('@typebot.io/react/src/Standard'),
+  { ssr: false }
+)
+
+export const Popup = dynamic(() => import('@typebot.io/react/src/Popup'), {
+  ssr: false,
+})
+
+export const Bubble = dynamic(() => import('@typebot.io/react/src/Bubble'), {
+  ssr: false,
+})
+
+export * from '@typebot.io/js'

packages/embeds/nextjs/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "@typebot.io/tsconfig/react-library.json",
+  "include": ["src/**/*"],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "declaration": true,
+    "declarationMap": true,
+    "outDir": "dist",
+    "emitDeclarationOnly": true
+  }
+}

packages/embeds/react/README.md

@@ -1,7 +1,7 @@
 ## Install
 
 ```bash
-npm install @typebot.io/js @typebot.io/react
+npm install @typebot.io/react
 ```
 
 ## Standard
@@ -38,19 +38,19 @@ This code will automatically trigger the popup window after 3 seconds.
 You can use these commands:
 
 ```js
-import { open } from '@typebot.io/js'
+import { open } from '@typebot.io/react'
 
 open()
 ```
 
 ```js
-import { close } from '@typebot.io/js'
+import { close } from '@typebot.io/react'
 
 close()
 ```
 
 ```js
-import { toggle } from '@typebot.io/js'
+import { toggle } from '@typebot.io/react'
 
 toggle()
 ```
@@ -85,13 +85,13 @@ This code will show the bubble and let a preview message appear after 5 seconds.
 You can use these commands:
 
 ```js
-import { showPreviewMessage } from '@typebot.io/js'
+import { showPreviewMessage } from '@typebot.io/react'
 
 Typebot.showPreviewMessage()
 ```
 
 ```js
-import { hidePreviewMessage } from '@typebot.io/js'
+import { hidePreviewMessage } from '@typebot.io/react'
 
 Typebot.hidePreviewMessage()
 ```
@@ -101,19 +101,19 @@ Typebot.hidePreviewMessage()
 You can use these commands:
 
 ```js
-import { open } from '@typebot.io/js'
+import { open } from '@typebot.io/react'
 
 open()
 ```
 
 ```js
-import { close } from '@typebot.io/js'
+import { close } from '@typebot.io/react'
 
 close()
 ```
 
 ```js
-import { toggle } from '@typebot.io/js'
+import { toggle } from '@typebot.io/react'
 
 toggle()
 ```

packages/embeds/react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.0.80",
-  "description": "React library to display typebots on your website",
+  "version": "0.1.0",
+  "description": "Convenient library to display typebots on your Next.js website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -21,28 +21,28 @@
   "devDependencies": {
     "@babel/preset-react": "7.22.5",
     "@babel/preset-typescript": "7.22.5",
+    "@rollup/plugin-alias": "^5.0.0",
     "@rollup/plugin-babel": "6.0.3",
     "@rollup/plugin-node-resolve": "15.1.0",
     "@rollup/plugin-terser": "0.4.3",
     "@rollup/plugin-typescript": "11.1.2",
     "@typebot.io/js": "workspace:*",
+    "@typebot.io/lib": "workspace:*",
+    "@typebot.io/prisma": "workspace:*",
+    "@typebot.io/schemas": "workspace:*",
+    "@typebot.io/tsconfig": "workspace:*",
     "@types/node": "20.4.2",
     "@types/react": "18.2.15",
-    "@typebot.io/prisma": "workspace:*",
     "eslint": "8.44.0",
     "eslint-config-custom": "workspace:*",
-    "@typebot.io/schemas": "workspace:*",
     "react": "18.2.0",
     "rollup": "3.26.2",
     "rollup-plugin-typescript-paths": "1.4.0",
-    "@typebot.io/tsconfig": "workspace:*",
     "tslib": "2.6.0",
     "tsx": "3.12.7",
-    "typescript": "5.1.6",
-    "@typebot.io/lib": "workspace:*"
+    "typescript": "5.1.6"
   },
   "peerDependencies": {
-    "@typebot.io/js": "workspace:*",
     "react": "18.x"
   }
 }

packages/embeds/react/rollup.config.js

@@ -3,6 +3,7 @@ import terser from '@rollup/plugin-terser'
 import { babel } from '@rollup/plugin-babel'
 import typescript from '@rollup/plugin-typescript'
 import { typescriptPaths } from 'rollup-plugin-typescript-paths'
+import alias from '@rollup/plugin-alias'
 
 const extensions = ['.ts', '.tsx']
 
@@ -12,8 +13,11 @@ const indexConfig = {
     file: './dist/index.js',
     format: 'es',
   },
-  external: ['react', 'react/jsx-runtime', '@typebot.io/js'],
+  external: ['react', 'react/jsx-runtime'],
   plugins: [
+    alias({
+      entries: [{ find: '@typebot.io/js', replacement: '../../js' }],
+    }),
     resolve({ extensions }),
     babel({
       babelHelpers: 'bundled',

packages/embeds/react/src/Bubble.tsx

@@ -1,5 +1,6 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useRef } from 'react'
 import type { BubbleProps } from '@typebot.io/js'
+import '@typebot.io/js/dist/web'
 
 type Props = BubbleProps
 
@@ -18,17 +19,6 @@ type BubbleElement = HTMLElement & Props
 
 export const Bubble = (props: Props) => {
   const ref = useRef<BubbleElement | null>(null)
-  const [isInitialized, setIsInitialized] = useState(false)
-
-  useEffect(() => {
-    ;(async () => {
-      await import('@typebot.io/js/dist/web')
-      setIsInitialized(true)
-    })()
-    return () => {
-      ref.current?.remove()
-    }
-  }, [])
 
   const attachBubbleToDom = useCallback((props: Props) => {
     const bubbleElement = document.createElement(
@@ -40,10 +30,9 @@ export const Bubble = (props: Props) => {
   }, [])
 
   useEffect(() => {
-    if (!isInitialized) return
     if (!ref.current) attachBubbleToDom(props)
     injectPropsToElement(ref.current as BubbleElement, props)
-  }, [attachBubbleToDom, isInitialized, props])
+  }, [attachBubbleToDom, props])
 
   const injectPropsToElement = (element: BubbleElement, props: Props) => {
     Object.assign(element, props)
@@ -51,3 +40,5 @@ export const Bubble = (props: Props) => {
 
   return null
 }
+
+export default Bubble

packages/embeds/react/src/Popup.tsx

@@ -1,5 +1,6 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useRef } from 'react'
 import type { PopupProps } from '@typebot.io/js'
+import '@typebot.io/js/dist/web'
 
 type Props = PopupProps
 
@@ -18,17 +19,6 @@ type PopupElement = HTMLElement & Props
 
 export const Popup = (props: Props) => {
   const ref = useRef<PopupElement | null>(null)
-  const [isInitialized, setIsInitialized] = useState(false)
-
-  useEffect(() => {
-    ;(async () => {
-      await import('@typebot.io/js/dist/web')
-      setIsInitialized(true)
-    })()
-    return () => {
-      ref.current?.remove()
-    }
-  }, [])
 
   const attachPopupToDom = useCallback((props: Props) => {
     const popupElement = document.createElement('typebot-popup') as PopupElement
@@ -38,10 +28,9 @@ export const Popup = (props: Props) => {
   }, [])
 
   useEffect(() => {
-    if (!isInitialized) return
     if (!ref.current) attachPopupToDom(props)
     injectPropsToElement(ref.current as PopupElement, props)
-  }, [attachPopupToDom, isInitialized, props])
+  }, [attachPopupToDom, props])
 
   const injectPropsToElement = (element: PopupElement, props: Props) => {
     Object.assign(element, props)
@@ -49,3 +38,5 @@ export const Popup = (props: Props) => {
 
   return null
 }
+
+export default Popup

packages/embeds/react/src/Standard.tsx

@@ -1,5 +1,6 @@
-import { useEffect, useRef } from 'react'
+import React, { useEffect, useRef } from 'react'
 import type { BotProps } from '@typebot.io/js'
+import '@typebot.io/js/dist/web'
 
 type Props = BotProps & {
   style?: React.CSSProperties
@@ -22,12 +23,6 @@ type StandardElement = HTMLElement & Props
 export const Standard = ({ style, className, ...assignableProps }: Props) => {
   const ref = useRef<StandardElement | null>(null)
 
-  useEffect(() => {
-    ;(async () => {
-      await import('@typebot.io/js/dist/web')
-    })()
-  }, [])
-
   useEffect(() => {
     if (!ref.current) return
     Object.assign(ref.current, assignableProps)
@@ -35,3 +30,5 @@ export const Standard = ({ style, className, ...assignableProps }: Props) => {
 
   return <typebot-standard ref={ref} style={style} class={className} />
 }
+
+export default Standard

packages/embeds/react/src/index.ts

@@ -1,3 +1,4 @@
 export { Standard } from './Standard'
 export { Bubble } from './Bubble'
 export { Popup } from './Popup'
+export * from '@typebot.io/js'

packages/embeds/wordpress/trunk/public/class-typebot-public.php

@@ -33,7 +33,7 @@ class Typebot_Public
     function typebot_script()
     {
       echo '<script type="module">
-      import Typebot from "https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0/dist/web.js";';
+      import Typebot from "https://cdn.jsdelivr.net/npm/@typebot.io/js@0.1/dist/web.js";';
       if (
         get_option('excluded_pages') !== null &&
         get_option('excluded_pages') !== ''
@@ -77,7 +77,7 @@ class Typebot_Public
 
   public function add_typebot_container($attributes = [])
   {
-    $lib_url = "https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0/dist/web.js";
+    $lib_url = "https://cdn.jsdelivr.net/npm/@typebot.io/js@0.1/dist/web.js";
     $width = '100%';
     $height = '500px';
     $api_host = 'https://viewer.typebot.io';

pnpm-lock.yaml

@@ -92,12 +92,9 @@ importers:
       '@typebot.io/emails':
         specifier: workspace:*
         version: link:../../packages/emails
-      '@typebot.io/js':
+      '@typebot.io/nextjs':
         specifier: workspace:*
-        version: link:../../packages/embeds/js
-      '@typebot.io/react':
-        specifier: workspace:*
-        version: link:../../packages/embeds/react
+        version: link:../../packages/embeds/nextjs
       '@udecode/plate-basic-marks':
         specifier: 21.1.5
         version: 21.1.5(@types/react@18.2.15)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.94.2)(slate@0.94.1)
@@ -412,18 +409,15 @@ importers:
       '@emotion/styled':
         specifier: 11.11.0
         version: 11.11.0(@emotion/react@11.11.1)(@types/react@18.2.15)(react@18.2.0)
-      '@typebot.io/js':
-        specifier: workspace:*
-        version: link:../../packages/embeds/js
       '@typebot.io/lib':
         specifier: workspace:*
         version: link:../../packages/lib
+      '@typebot.io/nextjs':
+        specifier: workspace:*
+        version: link:../../packages/embeds/nextjs
       '@typebot.io/prisma':
         specifier: workspace:*
         version: link:../../packages/prisma
-      '@typebot.io/react':
-        specifier: workspace:*
-        version: link:../../packages/embeds/react
       '@typebot.io/schemas':
         specifier: workspace:*
         version: link:../../packages/schemas
@@ -506,15 +500,12 @@ importers:
       '@trpc/server':
         specifier: 10.34.0
         version: 10.34.0
-      '@typebot.io/js':
+      '@typebot.io/nextjs':
         specifier: workspace:*
-        version: link:../../packages/embeds/js
+        version: link:../../packages/embeds/nextjs
       '@typebot.io/prisma':
         specifier: workspace:*
         version: link:../../packages/prisma
-      '@typebot.io/react':
-        specifier: workspace:*
-        version: link:../../packages/embeds/react
       ai:
         specifier: ^2.1.20
         version: 2.1.20(react@18.2.0)(svelte@3.59.1)(vue@3.3.4)
@@ -891,6 +882,82 @@ importers:
         specifier: 5.1.6
         version: 5.1.6
 
+  packages/embeds/nextjs:
+    dependencies:
+      next:
+        specifier: 12.x || 13.x
+        version: 13.4.9(@babel/core@7.22.9)(react-dom@18.2.0)(react@18.2.0)
+    devDependencies:
+      '@babel/preset-react':
+        specifier: 7.22.5
+        version: 7.22.5(@babel/core@7.22.9)
+      '@babel/preset-typescript':
+        specifier: 7.22.5
+        version: 7.22.5(@babel/core@7.22.9)
+      '@rollup/plugin-alias':
+        specifier: ^5.0.0
+        version: 5.0.0(rollup@3.26.2)
+      '@rollup/plugin-babel':
+        specifier: 6.0.3
+        version: 6.0.3(@babel/core@7.22.9)(rollup@3.26.2)
+      '@rollup/plugin-node-resolve':
+        specifier: 15.1.0
+        version: 15.1.0(rollup@3.26.2)
+      '@rollup/plugin-terser':
+        specifier: 0.4.3
+        version: 0.4.3(rollup@3.26.2)
+      '@rollup/plugin-typescript':
+        specifier: 11.1.2
+        version: 11.1.2(rollup@3.26.2)(tslib@2.6.0)(typescript@5.1.6)
+      '@typebot.io/js':
+        specifier: workspace:*
+        version: link:../js
+      '@typebot.io/lib':
+        specifier: workspace:*
+        version: link:../../lib
+      '@typebot.io/prisma':
+        specifier: workspace:*
+        version: link:../../prisma
+      '@typebot.io/react':
+        specifier: workspace:*
+        version: link:../react
+      '@typebot.io/schemas':
+        specifier: workspace:*
+        version: link:../../schemas
+      '@typebot.io/tsconfig':
+        specifier: workspace:*
+        version: link:../../tsconfig
+      '@types/node':
+        specifier: 20.4.2
+        version: 20.4.2
+      '@types/react':
+        specifier: 18.2.15
+        version: 18.2.15
+      eslint:
+        specifier: 8.44.0
+        version: 8.44.0
+      eslint-config-custom:
+        specifier: workspace:*
+        version: link:../../eslint-config-custom
+      react:
+        specifier: 18.2.0
+        version: 18.2.0
+      rollup:
+        specifier: 3.26.2
+        version: 3.26.2
+      rollup-plugin-typescript-paths:
+        specifier: 1.4.0
+        version: 1.4.0(typescript@5.1.6)
+      tslib:
+        specifier: 2.6.0
+        version: 2.6.0
+      tsx:
+        specifier: 3.12.7
+        version: 3.12.7
+      typescript:
+        specifier: 5.1.6
+        version: 5.1.6
+
   packages/embeds/react:
     dependencies:
       '@ladle/react':
@@ -903,6 +970,9 @@ importers:
       '@babel/preset-typescript':
         specifier: 7.22.5
         version: 7.22.5(@babel/core@7.22.9)
+      '@rollup/plugin-alias':
+        specifier: ^5.0.0
+        version: 5.0.0(rollup@3.26.2)
       '@rollup/plugin-babel':
         specifier: 6.0.3
         version: 6.0.3(@babel/core@7.22.9)(rollup@3.26.2)
@@ -1300,7 +1370,7 @@ packages:
       '@babel/parser': 7.22.3
       '@babel/template': 7.21.9
       '@babel/traverse': 7.22.1
-      '@babel/types': 7.22.3
+      '@babel/types': 7.22.5
       convert-source-map: 1.9.0
       debug: 4.3.4(supports-color@5.5.0)
       gensync: 1.0.0-beta.2
@@ -1404,7 +1474,7 @@ packages:
     dependencies:
       '@babel/compat-data': 7.22.3
       '@babel/core': 7.21.8
-      '@babel/helper-validator-option': 7.21.0
+      '@babel/helper-validator-option': 7.22.5
       browserslist: 4.21.5
       lru-cache: 5.1.1
       semver: 6.3.1
@@ -1418,12 +1488,26 @@ packages:
     dependencies:
       '@babel/compat-data': 7.22.3
       '@babel/core': 7.22.9
-      '@babel/helper-validator-option': 7.21.0
+      '@babel/helper-validator-option': 7.22.5
       browserslist: 4.21.5
       lru-cache: 5.1.1
       semver: 6.3.1
     dev: false
 
+  /@babel/helper-compilation-targets@7.22.9(@babel/core@7.21.8):
+    resolution: {integrity: sha512-7qYrNM6HjpnPHJbopxmb8hSPoZ0gsX8IvUS32JGVoy+pU9e5N0nLr1VjJoR6kA4d9dmGLxNYOjeB8sUDal2WMw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/compat-data': 7.22.9
+      '@babel/core': 7.21.8
+      '@babel/helper-validator-option': 7.22.5
+      browserslist: 4.21.9
+      lru-cache: 5.1.1
+      semver: 6.3.1
+    dev: false
+
   /@babel/helper-compilation-targets@7.22.9(@babel/core@7.22.9):
     resolution: {integrity: sha512-7qYrNM6HjpnPHJbopxmb8hSPoZ0gsX8IvUS32JGVoy+pU9e5N0nLr1VjJoR6kA4d9dmGLxNYOjeB8sUDal2WMw==}
     engines: {node: '>=6.9.0'}
@@ -1525,7 +1609,7 @@ packages:
     dependencies:
       '@babel/core': 7.21.8
       '@babel/helper-compilation-targets': 7.22.1(@babel/core@7.21.8)
-      '@babel/helper-plugin-utils': 7.21.5
+      '@babel/helper-plugin-utils': 7.22.5
       debug: 4.3.4(supports-color@5.5.0)
       lodash.debounce: 4.0.8
       resolve: 1.22.2
@@ -1541,7 +1625,7 @@ packages:
     dependencies:
       '@babel/core': 7.22.9
       '@babel/helper-compilation-targets': 7.22.1(@babel/core@7.22.9)
-      '@babel/helper-plugin-utils': 7.21.5
+      '@babel/helper-plugin-utils': 7.22.5
       debug: 4.3.4(supports-color@5.5.0)
       lodash.debounce: 4.0.8
       resolve: 1.22.2
@@ -1609,6 +1693,7 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/types': 7.22.3
+    dev: false
 
   /@babel/helper-module-imports@7.22.5:
     resolution: {integrity: sha512-8Dl6+HD/cKifutF5qGd/8ZJi84QeAKh+CEe1sBzz8UayBBGg1dAIJrdHOcOM5b2MpzWL2yuotJTtGjETq0qjXg==}
@@ -1621,7 +1706,7 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/helper-environment-visitor': 7.22.1
-      '@babel/helper-module-imports': 7.21.4
+      '@babel/helper-module-imports': 7.22.5
       '@babel/helper-simple-access': 7.21.5
       '@babel/helper-split-export-declaration': 7.18.6
       '@babel/helper-validator-identifier': 7.19.1
@@ -1632,6 +1717,20 @@ packages:
       - supports-color
     dev: false
 
+  /@babel/helper-module-transforms@7.22.9(@babel/core@7.21.8):
+    resolution: {integrity: sha512-t+WA2Xn5K+rTeGtC8jCsdAH52bjggG5TKRuRrAGNM/mjIbO4GxvlLMFOEz9wXY5I2XQ60PMFsAG2WIcG82dQMQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.21.8
+      '@babel/helper-environment-visitor': 7.22.5
+      '@babel/helper-module-imports': 7.22.5
+      '@babel/helper-simple-access': 7.22.5
+      '@babel/helper-split-export-declaration': 7.22.6
+      '@babel/helper-validator-identifier': 7.22.5
+    dev: false
+
   /@babel/helper-module-transforms@7.22.9(@babel/core@7.22.9):
     resolution: {integrity: sha512-t+WA2Xn5K+rTeGtC8jCsdAH52bjggG5TKRuRrAGNM/mjIbO4GxvlLMFOEz9wXY5I2XQ60PMFsAG2WIcG82dQMQ==}
     engines: {node: '>=6.9.0'}
@@ -1902,10 +2001,8 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.9
-      '@babel/helper-create-class-features-plugin': 7.22.1(@babel/core@7.22.9)
-      '@babel/helper-plugin-utils': 7.21.5
-    transitivePeerDependencies:
-      - supports-color
+      '@babel/helper-create-class-features-plugin': 7.22.9(@babel/core@7.22.9)
+      '@babel/helper-plugin-utils': 7.22.5
     dev: false
 
   /@babel/plugin-proposal-object-rest-spread@7.12.1(@babel/core@7.12.9):
@@ -1914,7 +2011,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.12.9
-      '@babel/helper-plugin-utils': 7.21.5
+      '@babel/helper-plugin-utils': 7.22.5
       '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.12.9)
       '@babel/plugin-transform-parameters': 7.22.3(@babel/core@7.12.9)
     dev: false
@@ -1957,7 +2054,7 @@ packages:
     dependencies:
       '@babel/core': 7.21.8
       '@babel/helper-create-regexp-features-plugin': 7.22.1(@babel/core@7.21.8)
-      '@babel/helper-plugin-utils': 7.21.5
+      '@babel/helper-plugin-utils': 7.22.5
     dev: false
 
   /@babel/plugin-proposal-unicode-property-regex@7.18.6(@babel/core@7.22.9):
@@ -1968,7 +2065,7 @@ packages:
     dependencies:
       '@babel/core': 7.22.9
       '@babel/helper-create-regexp-features-plugin': 7.22.1(@babel/core@7.22.9)
-      '@babel/helper-plugin-utils': 7.21.5
+      '@babel/helper-plugin-utils': 7.22.5
     dev: false
 
   /@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.21.8):
@@ -1994,7 +2091,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.9
-      '@babel/helper-plugin-utils': 7.21.5
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.21.8):
@@ -2150,7 +2247,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.12.9
-      '@babel/helper-plugin-utils': 7.21.5
+      '@babel/helper-plugin-utils': 7.22.5
     dev: false
 
   /@babel/plugin-syntax-jsx@7.21.4(@babel/core@7.21.8):
@@ -2173,6 +2270,16 @@ packages:
       '@babel/helper-plugin-utils': 7.21.5
     dev: true
 
+  /@babel/plugin-syntax-jsx@7.22.5(@babel/core@7.21.8):
+    resolution: {integrity: sha512-gvyP4hZrgrs/wWMaocvxZ44Hw0b3W8Pe+cMxc8V1ULQ07oh8VNbIRaoD1LRZVTvD+0nieDKjfgKg89sD7rrKrg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.21.8
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: false
+
   /@babel/plugin-syntax-jsx@7.22.5(@babel/core@7.22.9):
     resolution: {integrity: sha512-gvyP4hZrgrs/wWMaocvxZ44Hw0b3W8Pe+cMxc8V1ULQ07oh8VNbIRaoD1LRZVTvD+0nieDKjfgKg89sD7rrKrg==}
     engines: {node: '>=6.9.0'}
@@ -2339,7 +2446,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-plugin-utils': 7.21.5
+      '@babel/helper-plugin-utils': 7.22.5
     dev: false
 
   /@babel/plugin-syntax-typescript@7.21.4(@babel/core@7.22.9):
@@ -2349,7 +2456,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.9
-      '@babel/helper-plugin-utils': 7.21.5
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-syntax-typescript@7.22.5(@babel/core@7.22.9):
@@ -2440,7 +2547,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-module-imports': 7.21.4
+      '@babel/helper-module-imports': 7.22.5
       '@babel/helper-plugin-utils': 7.21.5
       '@babel/helper-remap-async-to-generator': 7.18.9(@babel/core@7.21.8)
     transitivePeerDependencies:
@@ -2454,7 +2561,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.9
-      '@babel/helper-module-imports': 7.21.4
+      '@babel/helper-module-imports': 7.22.5
       '@babel/helper-plugin-utils': 7.21.5
       '@babel/helper-remap-async-to-generator': 7.18.9(@babel/core@7.22.9)
     transitivePeerDependencies:
@@ -2913,18 +3020,16 @@ packages:
       - supports-color
     dev: false
 
-  /@babel/plugin-transform-modules-commonjs@7.21.5(@babel/core@7.22.9):
-    resolution: {integrity: sha512-OVryBEgKUbtqMoB7eG2rs6UFexJi6Zj6FDXx+esBLPTCxCNxAY9o+8Di7IsUGJ+AVhp5ncK0fxWUBd0/1gPhrQ==}
+  /@babel/plugin-transform-modules-commonjs@7.22.5(@babel/core@7.21.8):
+    resolution: {integrity: sha512-B4pzOXj+ONRmuaQTg05b3y/4DuFz3WcCNAXPLb2Q0GT0TrGKGxNKV4jwsXts+StaM0LQczZbOpj8o1DLPDJIiA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.22.9
-      '@babel/helper-module-transforms': 7.22.1
-      '@babel/helper-plugin-utils': 7.21.5
-      '@babel/helper-simple-access': 7.21.5
-    transitivePeerDependencies:
-      - supports-color
+      '@babel/core': 7.21.8
+      '@babel/helper-module-transforms': 7.22.9(@babel/core@7.21.8)
+      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-simple-access': 7.22.5
     dev: false
 
   /@babel/plugin-transform-modules-commonjs@7.22.5(@babel/core@7.22.9):
@@ -3303,7 +3408,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-plugin-utils': 7.21.5
+      '@babel/helper-plugin-utils': 7.22.5
     dev: false
 
   /@babel/plugin-transform-react-display-name@7.22.5(@babel/core@7.22.9):
@@ -3322,7 +3427,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/plugin-transform-react-jsx': 7.22.3(@babel/core@7.21.8)
+      '@babel/plugin-transform-react-jsx': 7.22.5(@babel/core@7.21.8)
     dev: false
 
   /@babel/plugin-transform-react-jsx-development@7.22.5(@babel/core@7.22.9):
@@ -3341,7 +3446,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.9
-      '@babel/helper-plugin-utils': 7.21.5
+      '@babel/helper-plugin-utils': 7.22.5
     dev: false
 
   /@babel/plugin-transform-react-jsx-source@7.19.6(@babel/core@7.22.9):
@@ -3351,7 +3456,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.9
-      '@babel/helper-plugin-utils': 7.21.5
+      '@babel/helper-plugin-utils': 7.22.5
     dev: false
 
   /@babel/plugin-transform-react-jsx@7.22.3(@babel/core@7.21.8):
@@ -3362,12 +3467,26 @@ packages:
     dependencies:
       '@babel/core': 7.21.8
       '@babel/helper-annotate-as-pure': 7.18.6
-      '@babel/helper-module-imports': 7.21.4
-      '@babel/helper-plugin-utils': 7.21.5
+      '@babel/helper-module-imports': 7.22.5
+      '@babel/helper-plugin-utils': 7.22.5
       '@babel/plugin-syntax-jsx': 7.21.4(@babel/core@7.21.8)
       '@babel/types': 7.22.3
     dev: false
 
+  /@babel/plugin-transform-react-jsx@7.22.5(@babel/core@7.21.8):
+    resolution: {integrity: sha512-rog5gZaVbUip5iWDMTYbVM15XQq+RkUKhET/IHR6oizR+JEoN6CAfTTuHcK4vwUyzca30qqHqEpzBOnaRMWYMA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.21.8
+      '@babel/helper-annotate-as-pure': 7.22.5
+      '@babel/helper-module-imports': 7.22.5
+      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/plugin-syntax-jsx': 7.22.5(@babel/core@7.21.8)
+      '@babel/types': 7.22.5
+    dev: false
+
   /@babel/plugin-transform-react-jsx@7.22.5(@babel/core@7.22.9):
     resolution: {integrity: sha512-rog5gZaVbUip5iWDMTYbVM15XQq+RkUKhET/IHR6oizR+JEoN6CAfTTuHcK4vwUyzca30qqHqEpzBOnaRMWYMA==}
     engines: {node: '>=6.9.0'}
@@ -3389,7 +3508,7 @@ packages:
     dependencies:
       '@babel/core': 7.21.8
       '@babel/helper-annotate-as-pure': 7.18.6
-      '@babel/helper-plugin-utils': 7.21.5
+      '@babel/helper-plugin-utils': 7.22.5
     dev: false
 
   /@babel/plugin-transform-react-pure-annotations@7.22.5(@babel/core@7.22.9):
@@ -3451,7 +3570,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-module-imports': 7.21.4
+      '@babel/helper-module-imports': 7.22.5
       '@babel/helper-plugin-utils': 7.21.5
       babel-plugin-polyfill-corejs2: 0.4.3(@babel/core@7.21.8)
       babel-plugin-polyfill-corejs3: 0.8.1(@babel/core@7.21.8)
@@ -3572,7 +3691,7 @@ packages:
       '@babel/core': 7.21.8
       '@babel/helper-annotate-as-pure': 7.18.6
       '@babel/helper-create-class-features-plugin': 7.22.1(@babel/core@7.21.8)
-      '@babel/helper-plugin-utils': 7.21.5
+      '@babel/helper-plugin-utils': 7.22.5
       '@babel/plugin-syntax-typescript': 7.21.4(@babel/core@7.21.8)
     transitivePeerDependencies:
       - supports-color
@@ -3682,11 +3801,11 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/compat-data': 7.22.3
+      '@babel/compat-data': 7.22.9
       '@babel/core': 7.21.8
-      '@babel/helper-compilation-targets': 7.22.1(@babel/core@7.21.8)
-      '@babel/helper-plugin-utils': 7.21.5
-      '@babel/helper-validator-option': 7.21.0
+      '@babel/helper-compilation-targets': 7.22.9(@babel/core@7.21.8)
+      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-validator-option': 7.22.5
       '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.18.6(@babel/core@7.21.8)
       '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.22.3(@babel/core@7.21.8)
       '@babel/plugin-proposal-private-property-in-object': 7.21.0(@babel/core@7.21.8)
@@ -3730,7 +3849,7 @@ packages:
       '@babel/plugin-transform-logical-assignment-operators': 7.22.3(@babel/core@7.21.8)
       '@babel/plugin-transform-member-expression-literals': 7.18.6(@babel/core@7.21.8)
       '@babel/plugin-transform-modules-amd': 7.20.11(@babel/core@7.21.8)
-      '@babel/plugin-transform-modules-commonjs': 7.21.5(@babel/core@7.21.8)
+      '@babel/plugin-transform-modules-commonjs': 7.22.5(@babel/core@7.21.8)
       '@babel/plugin-transform-modules-systemjs': 7.22.3(@babel/core@7.21.8)
       '@babel/plugin-transform-modules-umd': 7.18.6(@babel/core@7.21.8)
       '@babel/plugin-transform-named-capturing-groups-regex': 7.22.3(@babel/core@7.21.8)
@@ -3757,7 +3876,7 @@ packages:
       '@babel/plugin-transform-unicode-regex': 7.18.6(@babel/core@7.21.8)
       '@babel/plugin-transform-unicode-sets-regex': 7.22.3(@babel/core@7.21.8)
       '@babel/preset-modules': 0.1.5(@babel/core@7.21.8)
-      '@babel/types': 7.22.3
+      '@babel/types': 7.22.5
       babel-plugin-polyfill-corejs2: 0.4.3(@babel/core@7.21.8)
       babel-plugin-polyfill-corejs3: 0.8.1(@babel/core@7.21.8)
       babel-plugin-polyfill-regenerator: 0.5.0(@babel/core@7.21.8)
@@ -3773,11 +3892,11 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/compat-data': 7.22.3
+      '@babel/compat-data': 7.22.9
       '@babel/core': 7.22.9
-      '@babel/helper-compilation-targets': 7.22.1(@babel/core@7.22.9)
-      '@babel/helper-plugin-utils': 7.21.5
-      '@babel/helper-validator-option': 7.21.0
+      '@babel/helper-compilation-targets': 7.22.9(@babel/core@7.22.9)
+      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-validator-option': 7.22.5
       '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.18.6(@babel/core@7.22.9)
       '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.22.3(@babel/core@7.22.9)
       '@babel/plugin-proposal-private-property-in-object': 7.21.0(@babel/core@7.22.9)
@@ -3821,7 +3940,7 @@ packages:
       '@babel/plugin-transform-logical-assignment-operators': 7.22.3(@babel/core@7.22.9)
       '@babel/plugin-transform-member-expression-literals': 7.18.6(@babel/core@7.22.9)
       '@babel/plugin-transform-modules-amd': 7.20.11(@babel/core@7.22.9)
-      '@babel/plugin-transform-modules-commonjs': 7.21.5(@babel/core@7.22.9)
+      '@babel/plugin-transform-modules-commonjs': 7.22.5(@babel/core@7.22.9)
       '@babel/plugin-transform-modules-systemjs': 7.22.3(@babel/core@7.22.9)
       '@babel/plugin-transform-modules-umd': 7.18.6(@babel/core@7.22.9)
       '@babel/plugin-transform-named-capturing-groups-regex': 7.22.3(@babel/core@7.22.9)
@@ -3848,7 +3967,7 @@ packages:
       '@babel/plugin-transform-unicode-regex': 7.18.6(@babel/core@7.22.9)
       '@babel/plugin-transform-unicode-sets-regex': 7.22.3(@babel/core@7.22.9)
       '@babel/preset-modules': 0.1.5(@babel/core@7.22.9)
-      '@babel/types': 7.22.3
+      '@babel/types': 7.22.5
       babel-plugin-polyfill-corejs2: 0.4.3(@babel/core@7.22.9)
       babel-plugin-polyfill-corejs3: 0.8.1(@babel/core@7.22.9)
       babel-plugin-polyfill-regenerator: 0.5.0(@babel/core@7.22.9)
@@ -7645,18 +7764,18 @@ packages:
       react: '>=16.14.0'
       react-dom: '>=16.14.0'
     dependencies:
-      '@babel/code-frame': 7.21.4
+      '@babel/code-frame': 7.22.5
       '@babel/core': 7.22.9
-      '@babel/generator': 7.22.3
-      '@babel/parser': 7.22.3
+      '@babel/generator': 7.22.9
+      '@babel/parser': 7.22.7
       '@babel/plugin-proposal-class-properties': 7.18.6(@babel/core@7.22.9)
       '@babel/preset-env': 7.22.2(@babel/core@7.22.9)
       '@babel/preset-react': 7.22.5(@babel/core@7.22.9)
       '@babel/preset-typescript': 7.22.5(@babel/core@7.22.9)
       '@babel/runtime': 7.22.3
-      '@babel/template': 7.21.9
-      '@babel/traverse': 7.22.1
-      '@babel/types': 7.22.3
+      '@babel/template': 7.22.5
+      '@babel/traverse': 7.22.8(supports-color@5.5.0)
+      '@babel/types': 7.22.5
       '@ladle/react-context': 1.0.1(react-dom@18.2.0)(react@18.2.0)
       '@vitejs/plugin-react': 3.1.0(vite@4.3.9)
       axe-core: 4.7.2
@@ -8606,6 +8725,19 @@ packages:
       '@lezer/lr': 1.3.5
     dev: false
 
+  /@rollup/plugin-alias@5.0.0(rollup@3.26.2):
+    resolution: {integrity: sha512-l9hY5chSCjuFRPsnRm16twWBiSApl2uYFLsepQYwtBuAxNMQ/1dJqADld40P0Jkqm65GRTLy/AC6hnpVebtLsA==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      rollup: 3.26.2
+      slash: 4.0.0
+    dev: true
+
   /@rollup/plugin-babel@6.0.3(@babel/core@7.22.9)(rollup@3.26.2):
     resolution: {integrity: sha512-fKImZKppa1A/gX73eg4JGo+8kQr/q1HBQaCGKECZ0v4YBBv3lFqi14+7xyApECzvkLTHCifx+7ntcrvtBIRcpg==}
     engines: {node: '>=14.0.0'}
@@ -8620,7 +8752,7 @@ packages:
         optional: true
     dependencies:
       '@babel/core': 7.22.9
-      '@babel/helper-module-imports': 7.21.4
+      '@babel/helper-module-imports': 7.22.5
       '@rollup/pluginutils': 5.0.2(rollup@3.26.2)
       rollup: 3.26.2
     dev: true
@@ -9336,7 +9468,7 @@ packages:
     resolution: {integrity: sha512-aACu/U/omhdk15O4Nfb+fHgH/z3QsfQzpnvRZhYhThms83ZnAOZz7zZAWO7mn2yyNQaA4xTO8GLK3uqFU4bYYw==}
     dependencies:
       '@babel/parser': 7.22.3
-      '@babel/types': 7.22.3
+      '@babel/types': 7.22.5
       '@types/babel__generator': 7.6.4
       '@types/babel__template': 7.4.1
       '@types/babel__traverse': 7.20.0
@@ -9345,20 +9477,20 @@ packages:
   /@types/babel__generator@7.6.4:
     resolution: {integrity: sha512-tFkciB9j2K755yrTALxD44McOrk+gfpIpvC3sxHjRawj6PfnQxrse4Clq5y/Rq+G3mrBurMax/lG8Qn2t9mSsg==}
     dependencies:
-      '@babel/types': 7.22.3
+      '@babel/types': 7.22.5
     dev: true
 
   /@types/babel__template@7.4.1:
     resolution: {integrity: sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==}
     dependencies:
       '@babel/parser': 7.22.3
-      '@babel/types': 7.22.3
+      '@babel/types': 7.22.5
     dev: true
 
   /@types/babel__traverse@7.20.0:
     resolution: {integrity: sha512-TBOjqAGf0hmaqRwpii5LLkJLg7c6OMm4nHLmpsUxwk9bBHtoTC6dAHdVWdGv4TBxj2CZOZY8Xfq8WmfoVi7n4Q==}
     dependencies:
-      '@babel/types': 7.22.3
+      '@babel/types': 7.22.5
     dev: true
 
   /@types/body-parser@1.19.2:
@@ -11643,7 +11775,7 @@ packages:
   /babel-plugin-emotion@10.2.2:
     resolution: {integrity: sha512-SMSkGoqTbTyUTDeuVuPIWifPdUGkTk1Kf9BWRiXIOIcuyMfsdp2EjeiiFvOzX8NOBvEh/ypKYvUh2rkgAJMCLA==}
     dependencies:
-      '@babel/helper-module-imports': 7.21.4
+      '@babel/helper-module-imports': 7.22.5
       '@emotion/hash': 0.8.0
       '@emotion/memoize': 0.7.4
       '@emotion/serialize': 0.11.16
@@ -11665,7 +11797,7 @@ packages:
     resolution: {integrity: sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==}
     engines: {node: '>=8'}
     dependencies:
-      '@babel/helper-plugin-utils': 7.21.5
+      '@babel/helper-plugin-utils': 7.22.5
       '@istanbuljs/load-nyc-config': 1.1.0
       '@istanbuljs/schema': 0.1.3
       istanbul-lib-instrument: 5.2.1
@@ -11679,7 +11811,7 @@ packages:
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
       '@babel/template': 7.21.9
-      '@babel/types': 7.22.3
+      '@babel/types': 7.22.5
       '@types/babel__core': 7.20.1
       '@types/babel__traverse': 7.20.0
     dev: true
@@ -12177,7 +12309,7 @@ packages:
     resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==}
     dependencies:
       browserslist: 4.21.5
-      caniuse-lite: 1.0.30001489
+      caniuse-lite: 1.0.30001515
       lodash.memoize: 4.1.2
       lodash.uniq: 4.5.0
 
@@ -16898,10 +17030,10 @@ packages:
     dependencies:
       '@babel/core': 7.22.9
       '@babel/generator': 7.22.3
-      '@babel/plugin-syntax-jsx': 7.21.4(@babel/core@7.22.9)
+      '@babel/plugin-syntax-jsx': 7.22.5(@babel/core@7.22.9)
       '@babel/plugin-syntax-typescript': 7.21.4(@babel/core@7.22.9)
       '@babel/traverse': 7.22.1
-      '@babel/types': 7.22.3
+      '@babel/types': 7.22.5
       '@jest/expect-utils': 29.5.0
       '@jest/transform': 29.5.0
       '@jest/types': 29.5.0
@@ -18318,7 +18450,7 @@ packages:
       '@next/env': 13.4.9
       '@swc/helpers': 0.5.1
       busboy: 1.6.0
-      caniuse-lite: 1.0.30001489
+      caniuse-lite: 1.0.30001515
       postcss: 8.4.14
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -21607,7 +21739,6 @@ packages:
   /slash@4.0.0:
     resolution: {integrity: sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==}
     engines: {node: '>=12'}
-    dev: false
 
   /slate-history@0.93.0(slate@0.94.1):
     resolution: {integrity: sha512-Gr1GMGPipRuxIz41jD2/rbvzPj8eyar56TVMyJBvBeIpQSSjNISssvGNDYfJlSWM8eaRqf6DAcxMKzsLCYeX6g==}
@@ -22390,7 +22521,7 @@ packages:
     hasBin: true
     dependencies:
       '@jridgewell/source-map': 0.3.3
-      acorn: 8.8.2
+      acorn: 8.10.0
       commander: 2.20.3
       source-map-support: 0.5.21