From d0c4dd4ec7b9fba63da6f7ef6bb5ca11ed45ba6e Mon Sep 17 00:00:00 2001
From: Aria Minaei <aria.minaei@gmail.com>
Date: Sun, 4 Jul 2021 18:06:20 +0200
Subject: [PATCH] Removed a bunch of unused code from r3f

---
 packages/plugin-r3f/src/components/Editor.tsx |  4 +-
 .../src/components/EnvironmentPreview.tsx     | 63 -------------
 .../TransformControlsModeSelect.tsx           |  2 +-
 .../TransformControlsSpaceSelect.tsx          |  2 +-
 packages/plugin-r3f/src/components/UI.tsx     | 11 +--
 .../src/components/ViewportSettings.tsx       | 91 -------------------
 .../src/components/ViewportShadingSelect.tsx  |  2 +-
 .../src/components/elements/Checkbox.tsx      | 33 -------
 .../src/components/elements/Code.tsx          | 36 --------
 .../components/elements/CompactModeSelect.tsx | 10 +-
 .../src/components/elements/FormControl.tsx   |  2 +-
 .../src/components/elements/FormLabel.tsx     | 20 ----
 .../src/components/elements/Heading.tsx       | 10 --
 .../src/components/elements/IconButton.tsx    |  2 +-
 .../src/components/elements/Input.tsx         | 22 -----
 .../src/components/elements/Legend.tsx        | 16 ----
 .../src/components/elements/Modal.tsx         | 72 ---------------
 .../components/elements/SettingsButton.tsx    | 54 -----------
 .../src/components/elements/Slider.tsx        | 21 -----
 .../components/elements/UnstyledFormLabel.tsx | 15 ---
 .../src/components/elements/VisuallyHidden.ts |  1 -
 .../src/components/elements/index.ts          | 30 ------
 22 files changed, 13 insertions(+), 506 deletions(-)
 delete mode 100644 packages/plugin-r3f/src/components/EnvironmentPreview.tsx
 delete mode 100644 packages/plugin-r3f/src/components/ViewportSettings.tsx
 delete mode 100644 packages/plugin-r3f/src/components/elements/Checkbox.tsx
 delete mode 100644 packages/plugin-r3f/src/components/elements/Code.tsx
 delete mode 100644 packages/plugin-r3f/src/components/elements/FormLabel.tsx
 delete mode 100644 packages/plugin-r3f/src/components/elements/Heading.tsx
 delete mode 100644 packages/plugin-r3f/src/components/elements/Input.tsx
 delete mode 100644 packages/plugin-r3f/src/components/elements/Legend.tsx
 delete mode 100644 packages/plugin-r3f/src/components/elements/Modal.tsx
 delete mode 100644 packages/plugin-r3f/src/components/elements/SettingsButton.tsx
 delete mode 100644 packages/plugin-r3f/src/components/elements/Slider.tsx
 delete mode 100644 packages/plugin-r3f/src/components/elements/UnstyledFormLabel.tsx
 delete mode 100644 packages/plugin-r3f/src/components/elements/VisuallyHidden.ts
 delete mode 100644 packages/plugin-r3f/src/components/elements/index.ts

diff --git a/packages/plugin-r3f/src/components/Editor.tsx b/packages/plugin-r3f/src/components/Editor.tsx
index f6de8a0..aa91ddb 100644
--- a/packages/plugin-r3f/src/components/Editor.tsx
+++ b/packages/plugin-r3f/src/components/Editor.tsx
@@ -9,9 +9,11 @@ import root from 'react-shadow'
 import styles from '../bundle.css.txt'
 import UI from './UI'
 import ProxyManager from './ProxyManager'
-import {Button, PortalManager, IdProvider} from './elements'
 import studio from '@theatre/studio'
 import {useVal} from '@theatre/dataverse-react'
+import {IdProvider} from './elements/IdProvider'
+import PortalManager from './elements/PortalManager'
+import Button from './elements/Button'
 
 const EditorScene = () => {
   const orbitControlsRef = useRef<typeof OrbitControls>()
diff --git a/packages/plugin-r3f/src/components/EnvironmentPreview.tsx b/packages/plugin-r3f/src/components/EnvironmentPreview.tsx
deleted file mode 100644
index 408bfe6..0000000
--- a/packages/plugin-r3f/src/components/EnvironmentPreview.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import type {VFC} from 'react'
-import React, {Suspense} from 'react'
-import {Canvas} from '@react-three/fiber'
-import {Environment, OrbitControls, TorusKnot} from '@react-three/drei'
-import type {ClickableProps} from 'reakit'
-import {Clickable} from 'reakit'
-import {IoIosClose} from 'react-icons/all'
-
-export interface EnvironmentPreviewProps extends ClickableProps {
-  url: string | null
-  selected: boolean
-}
-
-const EnvironmentPreview: VFC<EnvironmentPreviewProps> = ({
-  url,
-  selected,
-  ...props
-}) => {
-  return (
-    <Clickable
-      {...props}
-      as="div"
-      className={`${
-        selected
-          ? 'ring-4 ring-green-800 hover:ring-green-900'
-          : 'hover:ring-4 hover:ring-gray-200'
-      } focus:outline-none focus:ring-4 rounded overflow-hidden`}
-    >
-      <div className="h-full relative">
-        {url ? (
-          <>
-            <Canvas>
-              <Suspense fallback={null}>
-                {/* @ts-ignore */}
-                <OrbitControls enableZoom={false} enablePan={false} />
-                <Environment
-                  // @ts-ignore
-                  files={url}
-                  path=""
-                  background={true}
-                />
-              </Suspense>
-              <TorusKnot>
-                <meshStandardMaterial metalness={1} roughness={0} />
-              </TorusKnot>
-            </Canvas>
-            <div className="absolute inset-1 pointer-events-none flex flex-col justify-end items-center">
-              <div className="bg-white p-0.5 text-xxs rounded shadow">
-                {url ?? 'None'}
-              </div>
-            </div>
-          </>
-        ) : (
-          <div className="flex justify-center items-center h-full bg-gray-100">
-            <IoIosClose size="3em" />
-          </div>
-        )}
-      </div>
-    </Clickable>
-  )
-}
-
-export default EnvironmentPreview
diff --git a/packages/plugin-r3f/src/components/TransformControlsModeSelect.tsx b/packages/plugin-r3f/src/components/TransformControlsModeSelect.tsx
index 0db5f4b..83c454d 100644
--- a/packages/plugin-r3f/src/components/TransformControlsModeSelect.tsx
+++ b/packages/plugin-r3f/src/components/TransformControlsModeSelect.tsx
@@ -2,7 +2,7 @@ import type {VFC} from 'react'
 import React from 'react'
 import {GiClockwiseRotation, GiMove, GiResize} from 'react-icons/all'
 import type {TransformControlsMode} from '../store'
-import {CompactModeSelect} from './elements'
+import CompactModeSelect from './elements/CompactModeSelect'
 
 export interface TransformControlsModeSelectProps {
   value: TransformControlsMode
diff --git a/packages/plugin-r3f/src/components/TransformControlsSpaceSelect.tsx b/packages/plugin-r3f/src/components/TransformControlsSpaceSelect.tsx
index 7e55db5..965603d 100644
--- a/packages/plugin-r3f/src/components/TransformControlsSpaceSelect.tsx
+++ b/packages/plugin-r3f/src/components/TransformControlsSpaceSelect.tsx
@@ -2,7 +2,7 @@ import type {VFC} from 'react'
 import React from 'react'
 import type {TransformControlsSpace} from '../store'
 import {BiCube, BiGlobe} from 'react-icons/all'
-import {CompactModeSelect} from './elements'
+import CompactModeSelect from './elements/CompactModeSelect'
 
 export interface TransformControlsSpaceSelectProps {
   value: TransformControlsSpace
diff --git a/packages/plugin-r3f/src/components/UI.tsx b/packages/plugin-r3f/src/components/UI.tsx
index e9bc8e6..37a8f49 100644
--- a/packages/plugin-r3f/src/components/UI.tsx
+++ b/packages/plugin-r3f/src/components/UI.tsx
@@ -6,14 +6,14 @@ import shallow from 'zustand/shallow'
 import ReferenceWindow from './ReferenceWindow'
 import TransformControlsSpaceSelect from './TransformControlsSpaceSelect'
 import ViewportShadingSelect from './ViewportShadingSelect'
-import {AiFillEye, GiPocketBow, RiFocus3Line} from 'react-icons/all'
+import {GiPocketBow, RiFocus3Line} from 'react-icons/all'
 import {Vector3} from 'three'
-import {IconButton, Button, SettingsButton} from './elements'
-import ViewportSettings from './ViewportSettings'
 import type {$FixMe} from '@theatre/shared/utils/types'
 import studio from '@theatre/studio'
 import {getSelected} from './useSelected'
 import {useVal} from '@theatre/dataverse-react'
+import IconButton from './elements/IconButton'
+import Button from './elements/Button'
 
 const UI: VFC = () => {
   const [editorObject] = useEditorStore(
@@ -130,11 +130,6 @@ const UI: VFC = () => {
                   }}
                 />
               </div>
-              <div className="pointer-events-auto">
-                <SettingsButton icon={<AiFillEye />} label="Viewport settings">
-                  <ViewportSettings />
-                </SettingsButton>
-              </div>
             </div>
             <div className="absolute right-0 top-0 -z-10">
               <ReferenceWindow height={referenceWindowSize} />
diff --git a/packages/plugin-r3f/src/components/ViewportSettings.tsx b/packages/plugin-r3f/src/components/ViewportSettings.tsx
deleted file mode 100644
index f4f92c7..0000000
--- a/packages/plugin-r3f/src/components/ViewportSettings.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import type {VFC} from 'react'
-import React from 'react'
-import {useEditorStore} from '../store'
-import shallow from 'zustand/shallow'
-import {Checkbox, FormControl, Slider} from './elements'
-import UnstyledFormLabel from './elements/UnstyledFormLabel'
-import {useVal} from '@theatre/dataverse-react'
-import studio from '@theatre/studio'
-
-const ViewportShadingSettings: VFC = () => {
-  const [editorObject] = useEditorStore(
-    (state) => [state.editorObject],
-    shallow,
-  )
-
-  const showAxes = useVal(editorObject?.props.showAxes) ?? true
-  const showGrid = useVal(editorObject?.props.showGrid) ?? true
-  const showOverlayIcons = useVal(editorObject?.props.showOverlayIcons) ?? false
-  const referenceWindowSize =
-    useVal(editorObject?.props.referenceWindowSize) ?? 120
-
-  return (
-    <div className="flex flex-col gap-3">
-      <FormControl>
-        <Checkbox
-          // @ts-ignore
-          checked={showOverlayIcons}
-          onChange={() =>
-            studio.transaction(({set}) => {
-              set(editorObject!.props.showOverlayIcons, !showOverlayIcons)
-            })
-          }
-        >
-          Show overlay icons
-        </Checkbox>
-      </FormControl>
-      <FormControl>
-        <Checkbox
-          // @ts-ignore
-          checked={showGrid}
-          onChange={() =>
-            studio.transaction(({set}) => {
-              set(editorObject!.props.showGrid, !showGrid)
-            })
-          }
-        >
-          Show grid
-        </Checkbox>
-      </FormControl>
-      <FormControl>
-        <Checkbox
-          // @ts-ignore
-          checked={showAxes}
-          onChange={() =>
-            studio.transaction(({set}) => {
-              set(editorObject!.props.showAxes, !showAxes)
-            })
-          }
-        >
-          Show axes
-        </Checkbox>
-      </FormControl>
-      <FormControl>
-        <div className="flex items-start">
-          <div className="text-sm">
-            <UnstyledFormLabel className="font-medium text-gray-700">
-              Preview size:
-            </UnstyledFormLabel>
-          </div>
-          <div className="ml-3 flex items-center h-5">
-            <Slider
-              value={referenceWindowSize}
-              min={120}
-              max={400}
-              onChange={(event) =>
-                studio.transaction(({set}) => {
-                  set(
-                    editorObject!.props.referenceWindowSize,
-                    Number(event.target.value),
-                  )
-                })
-              }
-            />
-          </div>
-        </div>
-      </FormControl>
-    </div>
-  )
-}
-
-export default ViewportShadingSettings
diff --git a/packages/plugin-r3f/src/components/ViewportShadingSelect.tsx b/packages/plugin-r3f/src/components/ViewportShadingSelect.tsx
index 2c05575..c644304 100644
--- a/packages/plugin-r3f/src/components/ViewportShadingSelect.tsx
+++ b/packages/plugin-r3f/src/components/ViewportShadingSelect.tsx
@@ -2,7 +2,7 @@ import type {VFC} from 'react'
 import React from 'react'
 import type {ViewportShading} from '../store'
 import {FaCube, GiCube, GiIceCube, BiCube} from 'react-icons/all'
-import {CompactModeSelect} from './elements'
+import CompactModeSelect from './elements/CompactModeSelect'
 
 export interface ViewportShadingSelectProps {
   value: ViewportShading
diff --git a/packages/plugin-r3f/src/components/elements/Checkbox.tsx b/packages/plugin-r3f/src/components/elements/Checkbox.tsx
deleted file mode 100644
index 7ec2057..0000000
--- a/packages/plugin-r3f/src/components/elements/Checkbox.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React, {forwardRef} from 'react'
-import type {CheckboxProps} from 'reakit'
-import {Checkbox as CheckboxImpl} from 'reakit'
-import {useFormControlContext} from './FormControl'
-
-export type {CheckboxProps}
-
-const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
-  ({children, ...props}, ref) => {
-    const id = useFormControlContext()
-
-    return (
-      <div className="flex items-start">
-        <div className="flex items-center h-5">
-          <CheckboxImpl
-            // @ts-ignore
-            {...props}
-            id={props.id ?? id}
-            ref={ref}
-            className="focus:ring focus:ring-opacity-50 focus:ring-blue-500 focus:ring-offset-0 h-4 w-4 text-green-800 border-gray-300 hover:border-gray-400 rounded"
-          />
-        </div>
-        <div className="ml-3 text-sm">
-          <label htmlFor={props.id ?? id} className="font-medium text-gray-700">
-            {children}
-          </label>
-        </div>
-      </div>
-    )
-  },
-)
-
-export default Checkbox
diff --git a/packages/plugin-r3f/src/components/elements/Code.tsx b/packages/plugin-r3f/src/components/elements/Code.tsx
deleted file mode 100644
index 9493982..0000000
--- a/packages/plugin-r3f/src/components/elements/Code.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import type {VFC} from 'react'
-import React from 'react'
-import Highlight, {defaultProps} from 'prism-react-renderer'
-import theme from 'prism-react-renderer/themes/github'
-
-export interface CodeProps {
-  children: string
-  block?: boolean
-}
-
-const Code: VFC<CodeProps> = ({children, block}) => {
-  return (
-    <Highlight {...defaultProps} theme={theme} code={children} language="tsx">
-      {({className, style, tokens, getLineProps, getTokenProps}) => (
-        <code
-          className={`${className} font-mono whitespace-pre rounded ${
-            block ? 'block p-4' : 'inline p-1'
-          }`}
-          style={style}
-        >
-          {tokens.map((line, i) => (
-            <div
-              {...getLineProps({line, key: i})}
-              className={block ? 'block' : 'inline'}
-            >
-              {line.map((token, key) => (
-                <span {...getTokenProps({token, key})} />
-              ))}
-            </div>
-          ))}
-        </code>
-      )}
-    </Highlight>
-  )
-}
-export default Code
diff --git a/packages/plugin-r3f/src/components/elements/CompactModeSelect.tsx b/packages/plugin-r3f/src/components/elements/CompactModeSelect.tsx
index b0dec36..6a7621e 100644
--- a/packages/plugin-r3f/src/components/elements/CompactModeSelect.tsx
+++ b/packages/plugin-r3f/src/components/elements/CompactModeSelect.tsx
@@ -2,14 +2,8 @@ import type {ReactElement, ReactNode, VFC} from 'react'
 import React from 'react'
 import type {IconType} from 'react-icons'
 import {Group, Button} from 'reakit'
-import {
-  Tooltip,
-  TooltipReference,
-  usePopoverState,
-  useTooltipState,
-  PopoverDisclosure,
-  Popover,
-} from '.'
+import {Tooltip, TooltipReference, useTooltipState} from './Tooltip'
+import {usePopoverState, PopoverDisclosure, Popover} from './Popover'
 import {FiChevronDown} from 'react-icons/all'
 
 interface OptionButtonProps<Option> {
diff --git a/packages/plugin-r3f/src/components/elements/FormControl.tsx b/packages/plugin-r3f/src/components/elements/FormControl.tsx
index 698a9b7..fc3f2ab 100644
--- a/packages/plugin-r3f/src/components/elements/FormControl.tsx
+++ b/packages/plugin-r3f/src/components/elements/FormControl.tsx
@@ -1,6 +1,6 @@
 import type {ReactNode, VFC} from 'react'
 import React, {createContext, useContext} from 'react'
-import {useId} from '.'
+import {useId} from './IdProvider'
 
 const FormControlContext = createContext<string | undefined>(undefined)
 
diff --git a/packages/plugin-r3f/src/components/elements/FormLabel.tsx b/packages/plugin-r3f/src/components/elements/FormLabel.tsx
deleted file mode 100644
index fd39ddb..0000000
--- a/packages/plugin-r3f/src/components/elements/FormLabel.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type {ComponentProps} from 'react'
-import React, {forwardRef} from 'react'
-import {useFormControlContext} from './FormControl'
-
-export type FormLabelProps = ComponentProps<'label'>
-
-const FormLabel = forwardRef<HTMLLabelElement, FormLabelProps>((props, ref) => {
-  const id = useFormControlContext()
-
-  return (
-    <label
-      ref={ref}
-      {...props}
-      id={props.id ?? id}
-      className={`${props.className} font-medium mb-2`}
-    />
-  )
-})
-
-export default FormLabel
diff --git a/packages/plugin-r3f/src/components/elements/Heading.tsx b/packages/plugin-r3f/src/components/elements/Heading.tsx
deleted file mode 100644
index 17840a3..0000000
--- a/packages/plugin-r3f/src/components/elements/Heading.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import type {ComponentProps} from 'react'
-import React, {forwardRef} from 'react'
-
-export type HeadingProps = ComponentProps<'h1'>
-
-const Heading = forwardRef<HTMLHeadingElement, HeadingProps>((props, ref) => {
-  return <h1 ref={ref} {...props} className={`${props.className} font-bold`} />
-})
-
-export default Heading
diff --git a/packages/plugin-r3f/src/components/elements/IconButton.tsx b/packages/plugin-r3f/src/components/elements/IconButton.tsx
index d9d6a92..50a069d 100644
--- a/packages/plugin-r3f/src/components/elements/IconButton.tsx
+++ b/packages/plugin-r3f/src/components/elements/IconButton.tsx
@@ -3,7 +3,7 @@ import React, {forwardRef} from 'react'
 import type {ButtonProps} from 'reakit'
 import {Button} from 'reakit'
 import type {IconType} from 'react-icons'
-import {Tooltip, TooltipReference, useTooltipState} from './index'
+import {Tooltip, TooltipReference, useTooltipState} from './Tooltip'
 
 export interface IconButtonProps extends Exclude<ButtonProps, 'children'> {
   icon: ReactElement<IconType>
diff --git a/packages/plugin-r3f/src/components/elements/Input.tsx b/packages/plugin-r3f/src/components/elements/Input.tsx
deleted file mode 100644
index b007716..0000000
--- a/packages/plugin-r3f/src/components/elements/Input.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React, {forwardRef} from 'react'
-import {Input as InputImpl} from 'reakit'
-import type {InputProps} from 'reakit'
-import {useFormControlContext} from './FormControl'
-
-export type {InputProps}
-
-const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
-  const id = useFormControlContext()
-
-  return (
-    <InputImpl
-      // @ts-ignore
-      ref={ref}
-      {...props}
-      id={props.id ?? id}
-      className={`${props.className} w-full h-8 px-3 border rounded-sm focus:outline-none focus:ring focus:ring-blue-300`}
-    />
-  )
-})
-
-export default Input
diff --git a/packages/plugin-r3f/src/components/elements/Legend.tsx b/packages/plugin-r3f/src/components/elements/Legend.tsx
deleted file mode 100644
index f9d2cd7..0000000
--- a/packages/plugin-r3f/src/components/elements/Legend.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type {ComponentProps} from 'react'
-import React, {forwardRef} from 'react'
-
-export type LegendProps = ComponentProps<'legend'>
-
-const Input = forwardRef<HTMLLegendElement, LegendProps>((props, ref) => {
-  return (
-    <legend
-      ref={ref}
-      {...props}
-      className={`${props.className} font-medium mb-2`}
-    />
-  )
-})
-
-export default Input
diff --git a/packages/plugin-r3f/src/components/elements/Modal.tsx b/packages/plugin-r3f/src/components/elements/Modal.tsx
deleted file mode 100644
index ac2fa33..0000000
--- a/packages/plugin-r3f/src/components/elements/Modal.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import type {ComponentProps, VFC} from 'react'
-import React, {forwardRef} from 'react'
-import type {DialogProps} from 'reakit'
-import {Dialog, DialogBackdrop, useDialogState} from 'reakit'
-
-// we are abstracting away stuff like baseId because we are not going to use DialogDisclosure
-export type ModalProps = Pick<DialogProps, 'children' | 'visible' | 'hide'>
-
-export const Modal: VFC<ModalProps> = ({children, ...props}) => {
-  const dialog = {...useDialogState(), ...props}
-
-  return (
-    <DialogBackdrop
-      // @ts-ignore
-      {...dialog}
-      className="fixed inset-0 bg-black bg-opacity-40 z-50 flex justify-center items-start"
-    >
-      <Dialog
-        // @ts-ignore
-        {...dialog}
-        className="flex flex-col my-14 max-w-md w-full bg-white rounded-md shadow-lg focus:outline-none"
-        aria-label="Dialog"
-      >
-        {children}
-      </Dialog>
-    </DialogBackdrop>
-  )
-}
-
-export const useModal = () => {
-  const {show, hide, visible} = useDialogState()
-
-  return {show, hide, visible}
-}
-
-export type ModalHeaderProps = ComponentProps<'header'>
-
-export const ModalHeader = forwardRef<HTMLElement, ModalHeaderProps>(
-  ({className, ...props}, ref) => {
-    return (
-      <header
-        ref={ref}
-        {...props}
-        className={`${className} flex-0 px-6 py-4 text-xl font-semibold`}
-      />
-    )
-  },
-)
-
-export type ModalBodyProps = ComponentProps<'div'>
-
-export const ModalBody = forwardRef<HTMLDivElement, ModalBodyProps>(
-  ({className, ...props}, ref) => {
-    return (
-      <div ref={ref} {...props} className={`${className} flex-1 px-6 py-2`} />
-    )
-  },
-)
-
-export type ModalFooterProps = ComponentProps<'footer'>
-
-export const ModalFooter = forwardRef<HTMLElement, ModalFooterProps>(
-  ({className, ...props}, ref) => {
-    return (
-      <footer
-        ref={ref}
-        {...props}
-        className={`${className} flex px-6 py-4 justify-end gap-3`}
-      />
-    )
-  },
-)
diff --git a/packages/plugin-r3f/src/components/elements/SettingsButton.tsx b/packages/plugin-r3f/src/components/elements/SettingsButton.tsx
deleted file mode 100644
index d0f3d08..0000000
--- a/packages/plugin-r3f/src/components/elements/SettingsButton.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import type {ReactElement, ReactNode, VFC} from 'react'
-import React from 'react'
-import {
-  Popover,
-  PopoverDisclosure,
-  Tooltip,
-  TooltipReference,
-  usePopoverState,
-  useTooltipState,
-} from './index'
-import {FiChevronDown} from 'react-icons/all'
-import type {IconType} from 'react-icons'
-
-export interface SettingsButtonProps {
-  icon: ReactElement<IconType>
-  label: string
-  children: ReactNode
-}
-
-const SettingsButton: VFC<SettingsButtonProps> = ({children, icon, label}) => {
-  const tooltip = useTooltipState()
-  const popover = usePopoverState()
-
-  return (
-    <>
-      <TooltipReference
-        {...tooltip}
-        as={'div'}
-        tabIndex={-1}
-        className="inline-block focus:outline-none"
-      >
-        <PopoverDisclosure
-          // @ts-ignore
-          {...popover}
-          className={`flex gap-1 relative items-center justify-center align-middle w-auto text-sm font-semibold h-7 px-2 rounded bg-gray-100 text-gray-700 hover:bg-gray-200 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-inset`}
-        >
-          {icon}
-          <FiChevronDown />
-        </PopoverDisclosure>
-      </TooltipReference>
-      <Tooltip {...tooltip}>{label}</Tooltip>
-      <Popover
-        {...popover}
-        // this seems to be necessary to prevent the popup from forever being closed after the first opening
-        hideOnClickOutside={false}
-        aria-label={label}
-      >
-        {children}
-      </Popover>
-    </>
-  )
-}
-
-export default SettingsButton
diff --git a/packages/plugin-r3f/src/components/elements/Slider.tsx b/packages/plugin-r3f/src/components/elements/Slider.tsx
deleted file mode 100644
index 6fd7e86..0000000
--- a/packages/plugin-r3f/src/components/elements/Slider.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import type {ComponentProps} from 'react'
-import React, {forwardRef} from 'react'
-import {useFormControlContext} from './FormControl'
-
-export type SliderProps = ComponentProps<'input'>
-
-const Slider = forwardRef<HTMLInputElement, SliderProps>((props, ref) => {
-  const id = useFormControlContext()
-
-  return (
-    <input
-      type="range"
-      ref={ref}
-      {...props}
-      id={props.id ?? id}
-      className={`${props.className}`}
-    />
-  )
-})
-
-export default Slider
diff --git a/packages/plugin-r3f/src/components/elements/UnstyledFormLabel.tsx b/packages/plugin-r3f/src/components/elements/UnstyledFormLabel.tsx
deleted file mode 100644
index 155b9ef..0000000
--- a/packages/plugin-r3f/src/components/elements/UnstyledFormLabel.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import type {ComponentProps} from 'react'
-import React, {forwardRef} from 'react'
-import {useFormControlContext} from './FormControl'
-
-export type FormLabelProps = ComponentProps<'label'>
-
-const UnstyledFormLabel = forwardRef<HTMLLabelElement, FormLabelProps>(
-  (props, ref) => {
-    const id = useFormControlContext()
-
-    return <label ref={ref} {...props} id={props.id ?? id} />
-  },
-)
-
-export default UnstyledFormLabel
diff --git a/packages/plugin-r3f/src/components/elements/VisuallyHidden.ts b/packages/plugin-r3f/src/components/elements/VisuallyHidden.ts
deleted file mode 100644
index e5f97ad..0000000
--- a/packages/plugin-r3f/src/components/elements/VisuallyHidden.ts
+++ /dev/null
@@ -1 +0,0 @@
-export {VisuallyHidden} from 'reakit'
diff --git a/packages/plugin-r3f/src/components/elements/index.ts b/packages/plugin-r3f/src/components/elements/index.ts
deleted file mode 100644
index fa3e015..0000000
--- a/packages/plugin-r3f/src/components/elements/index.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-export {default as Button} from './Button'
-export type {ButtonProps} from './Button'
-export {default as Heading} from './Heading'
-export type {HeadingProps} from './Heading'
-export {default as Code} from './Code'
-export type {CodeProps} from './Code'
-export * from './Modal'
-export {default as PortalManager} from './PortalManager'
-export type {PortalManagerProps} from './PortalManager'
-export {default as CompactModeSelect} from './CompactModeSelect'
-export type {CompactModeSelectProps} from './CompactModeSelect'
-export * from './Tooltip'
-export {default as IconButton} from './IconButton'
-export type {IconButtonProps} from './IconButton'
-export {default as Input} from './Input'
-export {default as Legend} from './Legend'
-export type {LegendProps} from './Legend'
-export {FormControl, useFormControlContext} from './FormControl'
-export {default as FormLabel} from './FormLabel'
-export type {FormLabelProps} from './FormLabel'
-export * from './IdProvider'
-export * from './VisuallyHidden'
-export {Popover, usePopoverState, PopoverDisclosure} from './Popover'
-export type {PopoverProps} from './Popover'
-export {default as SettingsButton} from './SettingsButton'
-export type {SettingsButtonProps} from './SettingsButton'
-export {default as Checkbox} from './Checkbox'
-export type {CheckboxProps} from './Checkbox'
-export {default as Slider} from './Slider'
-export type {SliderProps} from './Slider'