@botpress/webchat 1.0.0 → 1.0.2

package/src/themes/midnight.ts

@@ -1,276 +0,0 @@
-import { clsx } from 'clsx'
-import { Theme } from '../schemas'
-import { buildColorPalette, selectGrayFromColor } from '../Utils'
-
-export function buildMidnightTheme(color: string): Theme {
-  const { primary, primaryHover, onPrimary, primaryContainer, onPrimaryContainer } = buildColorPalette(color, 'dark')
-
-  const gray = selectGrayFromColor(color, ['slate', 'gray'])
-
-  const textBoldColor = `${gray}-100` as const
-  const textSemiBoldColor = `${gray}-200` as const
-  const textMediumColor = `${gray}-300` as const
-  const textLightColor = `${gray}-400` as const
-  const textExtraLightColor = `${gray}-500` as const
-  const textPlaceholderColor = `${gray}-500` as const
-  const focusColor = `${gray}-500` as const
-  const borderColor = `${gray}-600` as const
-  const bgLightColor = `${gray}-700` as const
-  const bgColor = `${gray}-800` as const
-
-  return {
-    container: {
-      className: `w-full bg-${bgColor} text-${textBoldColor} h-full border border-${borderColor} rounded-lg flex flex-col @container relative overflow-hidden [color-scheme:dark]`,
-    },
-    modal: {
-      container: {
-        className: `absolute inset-0 z-30 flex p-2 pointer-events-none`,
-      },
-      overlay: {
-        className: `absolute inset-0 z-30 bg-black/30 backdrop-blur-[1px]`,
-      },
-      dialog: {
-        container: {
-          className: `mx-auto mt-auto rounded-md bg-${bgColor} p-6 shadow w-full @md:(w-auto mb-auto) pointer-events-auto`,
-        },
-        title: {
-          container: {
-            className: `flex items-center justify-between mb-2`,
-          },
-          text: {
-            className: `text-base`,
-          },
-          closeIcon: {
-            className: `h-5 cursor-pointer text-(${textExtraLightColor} hover:${textMediumColor})`,
-          },
-        },
-        content: {
-          className: `text-sm text-${textLightColor} flex flex-col`,
-        },
-      },
-    },
-    notification: {
-      container: {
-        className: `group/toast grid w-full grid-cols-[auto_1fr_auto] items-center gap-x-2 rounded-md border border-${borderColor} bg-${bgColor} p-4 shadow-md`,
-      },
-      title: {
-        className: `col-start-2 text-sm font-medium text-${textBoldColor}`,
-      },
-      description: {
-        className: `col-start-2 mt-1 text-sm text-${textExtraLightColor}`,
-      },
-      icon: {
-        className: `aspect-square h-5 group-data-[type=error]/toast:text-red-500 group-data-[type=success]/toast:text-green-500`,
-      },
-      closeIcon: {
-        className: `col-start-3 row-start-1 aspect-square h-5 hover:cursor-pointer`,
-      },
-    },
-    header: {
-      container: {
-        className: `rounded-t-md p-1 mb-auto group/header flex flex-col shadow border-b border-${borderColor}`,
-      },
-      content: {
-        container: {
-          className: `grid grow cursor-pointer grid-cols-[auto_1fr_auto] items-center gap-x-2 rounded-md p-1 text-left transition-colors hover:bg-${bgLightColor} `,
-        },
-        title: { className: `text-base font-medium` },
-        description: {
-          className: `text-sm group-data-[state=closed]/header:hidden col-start-2`,
-        },
-        avatar: {
-          container: {
-            className: `row-span-1 group-data-[state=open]/header:row-span-2 mr-2 p-px pl-2 rounded-full overflow-hidden group-data-[state=open]/header:m-2`,
-          },
-          image: {
-            className: `aspect-square h-8 rounded-full group-data-[state=open]/header:h-12`,
-          },
-          fallback: {
-            className: `bg-${borderColor} flex h-full w-full items-center justify-center rounded-full`,
-          },
-        },
-        actions: {
-          container: {
-            className: `col-start-3 row-span-1 group-data-[state=open]/header:row-span-2 !row-start-1 flex`,
-          },
-          icons: {
-            className: `h-9 w-9 cursor-pointer rounded-md p-2 text-[${primary}]  transition-colors hover:bg-${borderColor}`,
-          },
-        },
-      },
-      expandedContent: {
-        container: {
-          className: `flex justify-center @md:justify-start @md:ml-[5.5rem] gap-4 text-sm items-center group-data-[state=open]/header:py-4`,
-        },
-        descriptionItems: {
-          container: {
-            className: `flex data-[email]:col-span-2 cursor-pointer`,
-          },
-          icon: {
-            className: `mr-3 h-5 w-5 text-[${primary}]`,
-          },
-          text: {
-            className: `hidden`,
-          },
-          link: {
-            className: `hidden`,
-          },
-        },
-      },
-    },
-    composer: {
-      container: {
-        className: `group/composer-container shadow bg-${bgLightColor} border border-(${bgLightColor} focus-within:${focusColor}) m-2 rounded-md transition-colors flex items-center `,
-      },
-      input: {
-        className: `flex-grow outline-none px-2 m-0.5 rounded-md placeholder-${textPlaceholderColor} bg-inherit text-sm resize-none h-[3em]`,
-      },
-      button: {
-        container: {
-          className: `group-data-[disabled=true]/composer-container:hidden h-11 p-2 rounded-full transition-colors text-([${primary}] hover:[${primaryHover}]) disabled:hidden flex items-center justify-center`,
-        },
-        icon: {
-          className: `h-full w-full`,
-        },
-      },
-    },
-    messageList: {
-      className: `flex flex-col gap-2 p-4 overflow-y-auto overflow-x-hidden scroll-smooth`,
-    },
-    message: {
-      container: {
-        className: clsx(
-          `flex group gap-2 text-sm text-${textMediumColor}`,
-          `data-[direction=incoming]:justify-start data-[direction=outgoing]:justify-end data-[loaded=false]:hidden`
-        ),
-      },
-      avatar: {
-        container: {
-          className: `relative h-6 w-6 shrink-0 overflow-hidden rounded-full hidden self-end group-data-[direction=incoming]:flex`,
-        },
-        image: {
-          className: `aspect-square h-full w-full`,
-        },
-        fallback: {
-          className: `bg-${borderColor} flex h-full w-full items-center justify-center rounded-full`,
-        },
-      },
-      blocks: {
-        text: {
-          heading1: {
-            className: `text-xl font-medium text-${textBoldColor} group-data-[direction=outgoing]:text-[${onPrimaryContainer}]`,
-          },
-          heading2: {
-            className: `text-lg text-${textBoldColor} group-data-[direction=outgoing]:text-[${onPrimaryContainer}]`,
-          },
-          heading3: {
-            className: `text-base`,
-          },
-          unorderedList: {
-            className: `list-disc list-inside marker:text-${textExtraLightColor} group-data-[direction=outgoing]:marker:text-[${onPrimaryContainer}]`,
-          },
-          orderedList: {
-            className: `list-decimal list-inside marker:text-${textLightColor} group-data-[direction=outgoing]:marker:text-[${onPrimaryContainer}]`,
-          },
-        },
-        button: {
-          className: `bg-([${primary}] hover:[${primaryHover}]) rounded-2xl p-1 text-sm px-3 text-[${onPrimary}]  data-[activated]:hidden data-[group-activated]:hidden`,
-        },
-        image: {
-          image: {
-            className: clsx(
-              `border border-${borderColor} rounded-2xl object-cover w-[95%]`,
-              `data-[orientation=landscape]:aspect-[4/3]`,
-              `data-[orientation=portrait]:aspect-[3/4]`,
-              `data-[orientation=square]:aspect-square`,
-              `@xs:w-56`,
-              `data-[loaded=false]:hidden`
-            ),
-          },
-          placeholder: {
-            className: clsx(
-              `border border-${borderColor} rounded-2xl bg-${bgLightColor} animate-pulse`,
-              `data-[orientation=landscape]:aspect-[4/3]`,
-              `data-[orientation=portrait]:aspect-[3/4]`,
-              `data-[orientation=square]:aspect-square`,
-              `@xs:w-56`
-            ),
-          },
-        },
-        video: {
-          className: `border border-${borderColor} rounded-2xl`,
-        },
-        location: {
-          container: {
-            className: `flex gap-2 group items-center p-1`,
-          },
-          title: {
-            className: `text-sm text-[${primaryHover}] font-medium group-hover:underline`,
-          },
-          icon: {
-            className: `h-5 w-5 text-[${primary}]`,
-          },
-        },
-        row: {
-          className: clsx(
-            `flex gap-2 flex-wrap`,
-            `data-[horizontal=center]:justify-center`,
-            `data-[horizontal=right]:justify-end`,
-            `data-[horizontal=stretch]:justify-between`,
-            `data-[vertical=center]:items-center`,
-            `data-[vertical=bottom]:items-end`
-          ),
-        },
-        column: {
-          className: clsx(
-            `flex flex-col gap-2 w-fit group/container`,
-            `data-[horizontal=center]:items-center`,
-            `data-[horizontal=right]:items-end`,
-            `data-[vertical=center]:justify-center`,
-            `data-[vertical=bottom]:justify-end`,
-            `data-[vertical=stretch]:justify-between`
-          ),
-        },
-        bubble: {
-          className: clsx(
-            'rounded-2xl p-2 max-w-[85%] font-medium',
-            `group-data-[direction=incoming]:(rounded-bl-sm bg-${bgLightColor} border-${borderColor} text-${textSemiBoldColor})`,
-            `group-data-[direction=outgoing]:(rounded-br-sm text-[${onPrimaryContainer}]) bg-[${primaryContainer}]`
-          ),
-        },
-        carousel: {
-          container: {
-            className: `group relative overflow-hidden`,
-          },
-          slidesContainer: {
-            className: `grid auto-cols-[90%] grid-flow-col gap-x-2 object-cover px-2 @md:auto-cols-max [&>*]:max-w-[26rem]`,
-          },
-          backButton: {
-            className: clsx(
-              `absolute left-1 top-1/2 h-7 -translate-y-1/2 rounded-full bg-${textMediumColor} bg-opacity-20 p-0.5 text-${borderColor} shadow transition-all`,
-              `hover:(scale-110 cursor-pointer) group-hover:(bg-opacity-80 text-${bgLightColor}) data-[disabled]:hidden`
-            ),
-          },
-          nextButton: {
-            className: clsx(
-              `absolute right-1 top-1/2 h-7 -translate-y-1/2 rounded-full bg-${textMediumColor} bg-opacity-20 p-0.5 text-${borderColor} shadow transition-all`,
-              `hover:(scale-110 cursor-pointer) group-hover:(bg-opacity-80 text-${bgLightColor}) data-[disabled]:hidden`
-            ),
-          },
-        },
-      },
-    },
-    loadingIndicator: {
-      container: {
-        className: clsx(
-          `flex items-end gap-1.5 bg-${bgLightColor} rounded-lg p-2`,
-          `before:(animate-jump h-1.5 w-1.5 rounded-full bg-${textMediumColor})`,
-          `after:(animate-jump h-1.5 w-1.5 rounded-full bg-${textMediumColor} [animation-delay:0.2s])`
-        ),
-      },
-      loader: {
-        className: clsx(`animate-jump h-1.5 w-1.5 rounded-full bg-${textMediumColor} [animation-delay:0.1s]`),
-      },
-    },
-  }
-}

package/src/themes/prism.ts

@@ -1,349 +0,0 @@
-import { clsx } from 'clsx'
-import { Theme } from '../schemas'
-
-export const prismTheme: Theme = {
-  container: {
-    className:
-      'w-full h-full border border-gray-200 rounded-lg flex flex-col @container relative overflow-hidden font-rubik',
-  },
-  modal: {
-    container: {
-      className: 'absolute inset-0 z-30 flex p-2 pointer-events-none',
-    },
-    overlay: {
-      className: 'absolute inset-0 z-30 bg-black/30 backdrop-blur-[1px]',
-    },
-    dialog: {
-      container: {
-        className:
-          'mx-auto mt-auto rounded-md bg-white p-6 text-gray-900 shadow w-full @md:w-auto @md:mb-auto pointer-events-auto',
-      },
-      title: {
-        container: {
-          className: 'flex items-center justify-between mb-2',
-        },
-        text: {
-          className: 'text-base text-gray-900',
-        },
-        closeIcon: {
-          className: 'h-5 cursor-pointer text-gray-500 hover:text-gray-700',
-        },
-      },
-      content: {
-        className: 'text-sm text-gray-600 flex flex-col',
-      },
-    },
-  },
-  notification: {
-    container: {
-      className:
-        'group/toast grid w-full grid-cols-[auto_1fr_auto] items-center gap-x-2 rounded-md border border-gray-200 bg-white p-4 shadow-md',
-    },
-    title: {
-      className: 'col-start-2 text-sm font-medium text-gray-900',
-    },
-    description: {
-      className: 'col-start-2 mt-1 text-sm text-gray-500',
-    },
-    icon: {
-      className:
-        'aspect-square h-5 group-data-[type=error]/toast:text-red-500 group-data-[type=success]/toast:text-green-500',
-    },
-    closeIcon: {
-      className: 'col-start-3 row-start-1 aspect-square h-5 hover:cursor-pointer',
-    },
-  },
-  header: {
-    container: {
-      className: 'rounded-t-md p-1 mb-auto group/header flex flex-col shadow',
-    },
-    content: {
-      container: {
-        className: clsx(
-          'grid grow cursor-pointer grid-cols-[auto_1fr_auto] items-center gap-x-2 rounded-md p-1 px-3 text-left transition-colors hover:bg-gray-100 ',
-          'group-data-[state=open]/header:(grid-cols-1 justify-items-center)'
-        ),
-      },
-      title: { className: 'text-base text-gray-600 py-0.5 font-medium' },
-      description: {
-        className: clsx(
-          'text-sm text-gray-500 font-light py-0.5',
-          'group-data-[state=closed]/header:(truncate col-start-2)',
-          'group-data-[state=open]/header:text-center'
-        ),
-      },
-      avatar: {
-        container: {
-          className: clsx(
-            'mr-2 p-px rounded-full overflow-hidden',
-            'group-data-[state=closed]/header:row-span-2',
-            'group-data-[state=open]/header:(mt-6 mb-2)'
-          ),
-        },
-        image: {
-          className: 'aspect-square h-8 rounded-full group-data-[state=open]/header:h-16',
-        },
-        fallback: {
-          className: 'bg-gray-200 flex h-full w-full items-center justify-center rounded-full',
-        },
-      },
-      actions: {
-        container: {
-          className: clsx(
-            'flex',
-            'group-data-[state=open]/header:hidden',
-            'group-data-[state=closed]/header:(col-start-3 row-span-2 !row-start-1)'
-          ),
-        },
-        icons: {
-          className: 'h-9 w-9 cursor-pointer rounded-md p-2 text-gray-400  transition-colors hover:bg-gray-200 ',
-        },
-      },
-    },
-    expandedContent: {
-      container: {
-        className:
-          'grid grid-cols-[repeat(6,auto)] justify-items-center text-sm items-center gap-(4 y-6) px-2 group-data-[state=open]/header:py-2 mx-auto',
-      },
-      descriptionItems: {
-        container: {
-          className: clsx(
-            'flex items-center gap-1 group/description-item text-xs text-gray-500 col-span-2 hover:cursor-pointer',
-            'data-[terms]:col-span-3',
-            'data-[privacy]:col-span-3'
-          ),
-        },
-        icon: {
-          className: clsx(
-            'h-12 p-3 text-white rounded-full',
-            'group-data-[phone]/description-item:bg-green-600/90',
-            'group-data-[email]/description-item:bg-red-600/90',
-            'group-data-[website]/description-item:bg-blue-600/90',
-            'group-data-[privacy]/description-item:(h-5 p-0 text-gray-400)',
-            'group-data-[terms]/description-item:(h-5 text-gray-400 p-0)'
-          ),
-        },
-        text: {
-          className: clsx(
-            'truncate pt-1',
-            'group-data-[email]/description-item:hidden',
-            'group-data-[phone]/description-item:hidden',
-            'group-data-[website]/description-item:hidden'
-          ),
-        },
-        link: {
-          className: clsx(
-            'truncate group-hover/description-item:underline pt-1',
-            'group-data-[email]/description-item:hidden',
-            'group-data-[phone]/description-item:hidden',
-            'group-data-[website]/description-item:hidden'
-          ),
-        },
-      },
-    },
-    newConversationIcon: {
-      className:
-        'h-9 w-9 text-zinc-500 p-2 cursor-pointer ml-auto hover:text-zinc-700 transition-colors row-span-2 row-start-1 col-start-6',
-    },
-  },
-  composer: {
-    container: {
-      className:
-        'group/composer-container shadow border border-gray-100 m-2 rounded-full transition-colors flex gap-2 items-center focus-within:border-zinc-300',
-    },
-    input: {
-      className: 'flex-grow outline-none px-2 m-3 rounded-md placeholder-gray-400 text-sm resize-none h-[1.5em]',
-    },
-    button: {
-      container: {
-        className:
-          'group-data-[disabled=true]/composer-container:hidden h-11 p-2 rounded-full transition-colors text-blue-500 hover:text-blue-600 disabled:hidden flex items-center justify-center',
-      },
-      icon: {
-        className: 'h-full w-full',
-      },
-    },
-  },
-  messageList: {
-    className: 'flex flex-col gap-2 p-4 overflow-y-auto overflow-x-hidden scroll-smooth',
-  },
-  message: {
-    container: {
-      className: clsx(
-        'flex group gap-2 text-sm text-gray-700',
-        'data-[direction=incoming]:justify-start data-[direction=outgoing]:justify-end data-[loaded=false]:hidden'
-      ),
-    },
-    avatar: {
-      container: {
-        className:
-          'relative h-7 w-7 shrink-0 overflow-hidden rounded-full hidden self-end group-data-[direction=incoming]:flex',
-      },
-      image: {
-        className: 'aspect-square h-full w-full',
-      },
-      fallback: {
-        className: 'bg-gray-200 flex h-full w-full items-center justify-center rounded-full',
-      },
-    },
-    blocks: {
-      text: {
-        text: {
-          className: '',
-        },
-        heading1: {
-          className: 'text-xl font-medium text-gray-900 group-data-[direction=outgoing]:text-blue-800',
-        },
-        heading2: {
-          className: 'text-lg text-gray-900 group-data-[direction=outgoing]:text-blue-800',
-        },
-        heading3: {
-          className: 'text-base',
-        },
-        unorderedList: {
-          className: 'list-disc list-inside marker:text-gray-500 group-data-[direction=outgoing]:marker:text-blue-800',
-        },
-        orderedList: {
-          className:
-            'list-decimal list-inside marker:text-gray-600 group-data-[direction=outgoing]:marker:text-blue-800',
-        },
-      },
-      button: {
-        className:
-          'bg-blue-500 rounded-md p-2 text-sm px-3 text-white  data-[activated]:hidden data-[group-activated]:hidden',
-      },
-      image: {
-        image: {
-          className: clsx(
-            'border border-gray-200 rounded-2xl object-cover w-[95%]',
-            'data-[orientation=landscape]:aspect-[4/3]',
-            'data-[orientation=portrait]:aspect-[3/4]',
-            'data-[orientation=square]:aspect-square',
-            '@xs:w-56',
-            'data-[loaded=false]:hidden'
-          ),
-        },
-        placeholder: {
-          className: clsx(
-            'border border-gray-200 rounded-2xl bg-red-300 animate-pulse',
-            'data-[orientation=landscape]:aspect-[4/3]',
-            'data-[orientation=portrait]:aspect-[3/4]',
-            'data-[orientation=square]:aspect-square',
-            '@xs:w-56'
-          ),
-        },
-      },
-      video: {
-        className: 'border border-gray-200 rounded-2xl',
-      },
-      location: {
-        container: {
-          className: 'flex gap-2 group items-center p-1 bg-gray-100 py-2 px-4 rounded-3xl',
-        },
-        title: {
-          className: 'text-gray-700 group-hover:underline mt-1',
-        },
-        icon: {
-          className: 'h-5 w-5 text-red-600',
-        },
-      },
-      file: {
-        container: {
-          className: 'flex gap-2 group items-center p-1 bg-green-50 py-2 px-4 rounded-3xl truncate',
-        },
-        title: {
-          className: 'text-green-800 group-hover:(underline text-green-900) mt-1 truncate',
-        },
-        icon: {
-          className: 'h-5 w-5 text-green-700 group-hover:text-green-800 flex-none',
-        },
-      },
-      row: {
-        className: clsx(
-          'flex gap-2 flex-wrap',
-          'data-[horizontal=center]:justify-center',
-          'data-[horizontal=right]:justify-end',
-          'data-[horizontal=stretch]:justify-between',
-          'data-[vertical=center]:items-center',
-          'data-[vertical=bottom]:items-end'
-        ),
-      },
-      column: {
-        className: clsx(
-          'flex flex-col gap-2 w-fit group/container',
-          'data-[horizontal=center]:items-center',
-          'data-[horizontal=right]:items-end',
-          'data-[vertical=center]:justify-center',
-          'data-[vertical=bottom]:justify-end',
-          'data-[vertical=stretch]:justify-between'
-        ),
-      },
-      bubble: {
-        className: clsx(
-          'rounded-3xl p-2 px-4 max-w-[85%]',
-          'group-data-[direction=outgoing]:(bg-blue-100 text-blue-800 rounded-br-md)',
-          'group-data-[direction=incoming]:(rounded-bl-md bg-gray-100 border-gray-200 text-gray-800)'
-        ),
-      },
-      carousel: {
-        container: {
-          className: 'group relative overflow-hidden',
-        },
-        slidesContainer: {
-          className:
-            'grid auto-cols-[90%] grid-flow-col gap-x-2 object-cover px-2 @md:auto-cols-max [&>*]:max-w-[26rem]',
-        },
-        backButton: {
-          className: clsx(
-            'absolute left-1 top-1/2 h-7 -translate-y-1/2 rounded-full bg-gray-700 bg-opacity-20 p-0.5 text-gray-200 shadow transition-all',
-            'hover:(scale-110 cursor-pointer) group-hover:(bg-opacity-80 text-gray-100) data-[disabled]:hidden'
-          ),
-        },
-        nextButton: {
-          className: clsx(
-            'absolute right-1 top-1/2 h-7 -translate-y-1/2 rounded-full bg-gray-700 bg-opacity-20 p-0.5 text-gray-200 shadow transition-all',
-            'hover:(scale-110 cursor-pointer) group-hover:(bg-opacity-80 text-gray-100) data-[disabled]:hidden'
-          ),
-        },
-      },
-      dropdown: {
-        button: {
-          container: {
-            className: clsx(
-              'flex max-w-[80%] cursor-pointer items-center justify-between rounded-md border border-gray-200 bg-white p-2 hover:border-gray-300 ',
-              'truncate data-[disabled]:cursor-not-allowed data-[disabled]:bg-gray-50 data-[disabled]:hover:border-gray-200'
-            ),
-          },
-          text: {
-            className: 'truncate',
-          },
-          icon: {
-            className: 'ml-2 inline-block h-4 w-4',
-          },
-        },
-        content: {
-          container: {
-            className:
-              'min-w-[100px] overflow-y-auto rounded-md border border-gray-200 bg-white text-sm text-gray-700 outline-none',
-          },
-          item: {
-            className:
-              'cursor-pointer p-2 outline-none transition-colors data-[active]:bg-gray-50 data-[active]:text-gray-900',
-          },
-        },
-      },
-    },
-  },
-  loadingIndicator: {
-    container: {
-      className: clsx(
-        'flex items-end gap-1.5 border border-gray-200 bg-gray-100 rounded-lg p-2',
-        'before:(animate-jump h-1.5 w-1.5 rounded-full bg-gray-600)',
-        'after:(animate-jump h-1.5 w-1.5 rounded-full bg-gray-600 [animation-delay:0.2s])'
-      ),
-    },
-    loader: {
-      className: clsx('animate-jump h-1.5 w-1.5 rounded-full bg-gray-600 [animation-delay:0.1s]'),
-    },
-  },
-}

package/src/twind.config.ts

@@ -1,31 +0,0 @@
-import { defineConfig } from '@twind/core'
-import presetAutoprefix from '@twind/preset-autoprefix'
-import presetTailwind from '@twind/preset-tailwind'
-import presetContainerQueries from '@twind/preset-container-queries'
-
-export const config = defineConfig({
-  presets: [presetAutoprefix(), presetTailwind(), presetContainerQueries()],
-  theme: {
-    fontFamily: {
-      sans: ['Inter', 'sans-serif'],
-      rubik: ['Rubik', 'sans-serif'],
-      plex: ['IBM Plex Sans', 'sans-serif'],
-      mono: ['Fira Code', 'monospace'],
-    },
-    extend: {
-      keyframes: {
-        jump: {
-          '0%, 40%': {
-            transform: 'translateY(0%) scale(1)',
-          },
-          '20%': {
-            transform: 'translateY(-100%) scale(1.11)',
-          },
-        },
-      },
-      animation: {
-        jump: 'jump 1.5s ease-in infinite',
-      },
-    },
-  },
-})