diff --git a/src/accordion/Accordion.ts b/src/accordion/Accordion.ts
index f0111f9f3..bfe4594ad 100644
--- a/src/accordion/Accordion.ts
+++ b/src/accordion/Accordion.ts
@@ -1,6 +1,8 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import { CompositeHTMLProps, CompositeOptions, useComposite } from "reakit";
 
+import { createComponent } from "../system";
+
 import { ACCORDION_KEYS } from "./__keys";
 
 export const useAccordion = createHook<AccordionOptions, AccordionHTMLProps>({
diff --git a/src/accordion/AccordionPanel.ts b/src/accordion/AccordionPanel.ts
index c2e83bd2c..b3f1d66cd 100644
--- a/src/accordion/AccordionPanel.ts
+++ b/src/accordion/AccordionPanel.ts
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import {
   DisclosureContentHTMLProps,
   DisclosureContentOptions,
@@ -10,6 +10,8 @@ import {
 } from "reakit";
 import { useForkRef } from "reakit-utils";
 
+import { createComponent } from "../system";
+
 import { ACCORDION_PANEL_KEYS } from "./__keys";
 import { AccordionMultiStateReturn } from "./AccordionMultiState";
 import { AccordionStateReturn } from "./AccordionState";
diff --git a/src/accordion/AccordionTrigger.ts b/src/accordion/AccordionTrigger.ts
index 4c65cb4d5..9a6dac1fd 100644
--- a/src/accordion/AccordionTrigger.ts
+++ b/src/accordion/AccordionTrigger.ts
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import {
   ButtonHTMLProps,
   ButtonOptions,
@@ -10,6 +10,7 @@ import {
 } from "reakit";
 import { callAllHandlers } from "@chakra-ui/utils";
 
+import { createComponent } from "../system";
 import { ariaAttr } from "../utils";
 
 import { ACCORDION_TRIGGER_KEYS } from "./__keys";
diff --git a/src/breadcrumbs/BreadcrumbLink.ts b/src/breadcrumbs/BreadcrumbLink.ts
index 8f6025032..956c598f7 100644
--- a/src/breadcrumbs/BreadcrumbLink.ts
+++ b/src/breadcrumbs/BreadcrumbLink.ts
@@ -1,6 +1,7 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 
 import { LinkHTMLProps, LinkOptions, useLink } from "../link";
+import { createComponent } from "../system";
 
 import { BREADCRUMB_LINK_KEYS } from "./__keys";
 
diff --git a/src/calendar/Calendar.ts b/src/calendar/Calendar.ts
index e37d9a247..97240d4db 100644
--- a/src/calendar/Calendar.ts
+++ b/src/calendar/Calendar.ts
@@ -3,9 +3,11 @@
  * We improved the Calendar from Aria [useCalendarBase](https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/calendar/src/useCalendarBase.ts)
  * to work with Reakit System
  */
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import { RoleHTMLProps, RoleOptions, useRole } from "reakit";
 
+import { createComponent } from "../system";
+
 import { CALENDAR_KEYS } from "./__keys";
 import { CalendarStateReturn } from "./CalendarState";
 
diff --git a/src/calendar/CalendarButton.ts b/src/calendar/CalendarButton.ts
index 4c017accb..417499b8c 100644
--- a/src/calendar/CalendarButton.ts
+++ b/src/calendar/CalendarButton.ts
@@ -3,10 +3,12 @@
  * We improved the Calendar from Aria [useCalendarBase](https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/calendar/src/useCalendarBase.ts)
  * to work with Reakit System
  */
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import { ButtonHTMLProps, ButtonOptions, useButton } from "reakit";
 import { callAllHandlers } from "@chakra-ui/utils";
 
+import { createComponent } from "../system";
+
 import { CALENDAR_BUTTON_KEYS } from "./__keys";
 import { CalendarStateReturn } from "./CalendarState";
 
diff --git a/src/calendar/CalendarCell.ts b/src/calendar/CalendarCell.ts
index b4b7db09e..e2a4759a4 100644
--- a/src/calendar/CalendarCell.ts
+++ b/src/calendar/CalendarCell.ts
@@ -4,10 +4,11 @@
  * to work with Reakit System
  */
 import { useCallback } from "react";
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import { RoleHTMLProps, RoleOptions, useRole } from "reakit";
 import { callAllHandlers } from "@chakra-ui/utils";
 
+import { createComponent } from "../system";
 import {
   ariaAttr,
   dataAttr,
diff --git a/src/calendar/CalendarCellButton.ts b/src/calendar/CalendarCellButton.ts
index e43f8337a..decf0f576 100644
--- a/src/calendar/CalendarCellButton.ts
+++ b/src/calendar/CalendarCellButton.ts
@@ -4,12 +4,13 @@
  * to work with Reakit System
  */
 import * as React from "react";
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import { ButtonHTMLProps, ButtonOptions, useButton } from "reakit";
 import { ensureFocus, useForkRef } from "reakit-utils";
 import { callAllHandlers } from "@chakra-ui/utils";
 import { useDateFormatter } from "@react-aria/i18n";
 
+import { createComponent } from "../system";
 import { isSameDay } from "../utils";
 
 import { CALENDAR_CELL_BUTTON_KEYS } from "./__keys";
diff --git a/src/calendar/CalendarGrid.ts b/src/calendar/CalendarGrid.ts
index 34b7149c5..ab21d4d89 100644
--- a/src/calendar/CalendarGrid.ts
+++ b/src/calendar/CalendarGrid.ts
@@ -4,12 +4,13 @@
  * to work with Reakit System
  */
 import { KeyboardEvent, useRef } from "react";
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import { RoleHTMLProps, RoleOptions, useRole } from "reakit";
 import { createOnKeyDown, useForkRef } from "reakit-utils";
 import { callAllHandlers } from "@chakra-ui/utils";
 import { chain } from "@react-aria/utils";
 
+import { createComponent } from "../system";
 import { ariaAttr } from "../utils";
 
 import { CALENDAR_GRID_KEYS } from "./__keys";
diff --git a/src/calendar/CalendarHeader.ts b/src/calendar/CalendarHeader.ts
index 546cda110..bb0502204 100644
--- a/src/calendar/CalendarHeader.ts
+++ b/src/calendar/CalendarHeader.ts
@@ -1,7 +1,9 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import { RoleHTMLProps, RoleOptions, useRole } from "reakit";
 import { useDateFormatter } from "@react-aria/i18n";
 
+import { createComponent } from "../system";
+
 import { CALENDAR_HEADER_KEYS } from "./__keys";
 import { CalendarStateReturn } from "./CalendarState";
 
diff --git a/src/calendar/CalendarWeekTitle.ts b/src/calendar/CalendarWeekTitle.ts
index 28f0479e4..1002b65cd 100644
--- a/src/calendar/CalendarWeekTitle.ts
+++ b/src/calendar/CalendarWeekTitle.ts
@@ -1,6 +1,8 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import { RoleHTMLProps, RoleOptions, useRole } from "reakit";
 
+import { createComponent } from "../system";
+
 import { CALENDAR_WEEK_TITLE_KEYS } from "./__keys";
 import { CalendarStateReturn } from "./CalendarState";
 
diff --git a/src/checkbox/Checkbox.tsx b/src/checkbox/Checkbox.tsx
index d1072342e..8abeaa453 100644
--- a/src/checkbox/Checkbox.tsx
+++ b/src/checkbox/Checkbox.tsx
@@ -1,9 +1,11 @@
 import * as React from "react";
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import { ClickableHTMLProps, ClickableOptions, useClickable } from "reakit";
 import { removeIndexFromArray, useForkRef, useLiveRef } from "reakit-utils";
 import { warning } from "reakit-warning";
 
+import { createComponent } from "../system";
+
 import { CHECKBOX_KEYS } from "./__keys";
 import { CheckboxStateReturn } from "./CheckboxState";
 import { fireChange, getChecked, useIndeterminateState } from "./helpers";
diff --git a/src/datepicker/DatePicker.ts b/src/datepicker/DatePicker.ts
index e6d842142..87ea8e8c0 100644
--- a/src/datepicker/DatePicker.ts
+++ b/src/datepicker/DatePicker.ts
@@ -1,10 +1,11 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 
 import {
   PickerBaseHTMLProps,
   PickerBaseOptions,
   usePickerBase,
 } from "../picker-base";
+import { createComponent } from "../system";
 import { ariaAttr } from "../utils";
 
 import { DATE_PICKER_KEYS } from "./__keys";
diff --git a/src/datepicker/DatePickerContent.ts b/src/datepicker/DatePickerContent.ts
index 4a2671277..c0c463203 100644
--- a/src/datepicker/DatePickerContent.ts
+++ b/src/datepicker/DatePickerContent.ts
@@ -1,10 +1,11 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 
 import {
   PickerBaseHTMLProps,
   PickerBaseOptions,
   usePickerBaseContent,
 } from "../picker-base";
+import { createComponent } from "../system";
 
 import { DATE_PICKER_CONTENT_KEYS } from "./__keys";
 
diff --git a/src/datepicker/DatePickerSegment.ts b/src/datepicker/DatePickerSegment.ts
index 7f69f9584..3b4a7a83c 100644
--- a/src/datepicker/DatePickerSegment.ts
+++ b/src/datepicker/DatePickerSegment.ts
@@ -1,7 +1,8 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import { unstable_useId as useId } from "reakit";
 
 import { SegmentHTMLProps, SegmentOptions, useSegment } from "../segment";
+import { createComponent } from "../system";
 
 import { DATE_PICKER_SEGMENT_KEYS } from "./__keys";
 import { DatePickerStateReturn } from ".";
diff --git a/src/datepicker/DatePickerSegmentField.ts b/src/datepicker/DatePickerSegmentField.ts
index cd192d0d9..819153f6d 100644
--- a/src/datepicker/DatePickerSegmentField.ts
+++ b/src/datepicker/DatePickerSegmentField.ts
@@ -1,10 +1,11 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 
 import {
   SegmentFieldHTMLProps,
   SegmentFieldOptions,
   useSegmentField,
 } from "../segment";
+import { createComponent } from "../system";
 
 import { DATE_PICKER_SEGMENT_FIELD_KEYS } from "./__keys";
 import { DatePickerStateReturn } from "./DatePickerState";
diff --git a/src/datepicker/DatePickerTrigger.ts b/src/datepicker/DatePickerTrigger.ts
index 4ad200399..e83cb046b 100644
--- a/src/datepicker/DatePickerTrigger.ts
+++ b/src/datepicker/DatePickerTrigger.ts
@@ -1,10 +1,11 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 
 import {
   PickerBaseTriggerHTMLProps,
   PickerBaseTriggerOptions,
   usePickerBaseTrigger,
 } from "../picker-base";
+import { createComponent } from "../system";
 
 import { DATE_PICKER_TRIGGER_KEYS } from "./__keys";
 
diff --git a/src/dialog/DialogBackdrop.tsx b/src/dialog/DialogBackdrop.tsx
index c874f6570..1d4bffc5a 100644
--- a/src/dialog/DialogBackdrop.tsx
+++ b/src/dialog/DialogBackdrop.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { RemoveScroll } from "react-remove-scroll";
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import { Portal } from "reakit";
 
 import {
@@ -8,6 +8,7 @@ import {
   DisclosureContentOptions,
   useDisclosureContent,
 } from "../disclosure/DisclosureContent";
+import { createComponent } from "../system";
 
 import { DIALOG_BACKDROP_KEYS } from "./__keys";
 import { DialogStateReturn } from "./DialogState";
diff --git a/src/dialog/DialogDisclosure.ts b/src/dialog/DialogDisclosure.ts
index 8b882ed18..1d6408524 100644
--- a/src/dialog/DialogDisclosure.ts
+++ b/src/dialog/DialogDisclosure.ts
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import { useForkRef, useLiveRef } from "reakit-utils";
 import { warning } from "reakit-warning";
 import { useSafeLayoutEffect } from "@chakra-ui/hooks";
@@ -9,6 +9,7 @@ import {
   DisclosureOptions,
   useDisclosure,
 } from "../disclosure";
+import { createComponent } from "../system";
 
 import { DIALOG_DISCLOSURE_KEYS } from "./__keys";
 import { DialogStateReturn } from "./DialogState";
diff --git a/src/drawer/Drawer.ts b/src/drawer/Drawer.ts
index 01f088415..7bbc3c434 100644
--- a/src/drawer/Drawer.ts
+++ b/src/drawer/Drawer.ts
@@ -1,6 +1,7 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 
 import { DialogHTMLProps, DialogOptions, useDialog } from "../dialog";
+import { createComponent } from "../system";
 
 import { DRAWER_KEYS } from "./__keys";
 
diff --git a/src/drawer/DrawerBackdrop.ts b/src/drawer/DrawerBackdrop.ts
index d406f2fc7..01f411958 100644
--- a/src/drawer/DrawerBackdrop.ts
+++ b/src/drawer/DrawerBackdrop.ts
@@ -1,10 +1,11 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 
 import {
   DialogBackdropHTMLProps,
   DialogBackdropOptions,
   useDialogBackdrop,
 } from "../dialog";
+import { createComponent } from "../system";
 
 import { DRAWER_BACKDROP_KEYS } from "./__keys";
 
diff --git a/src/drawer/DrawerDisclosure.tsx b/src/drawer/DrawerDisclosure.tsx
index 5cd2bbac4..44fe98262 100644
--- a/src/drawer/DrawerDisclosure.tsx
+++ b/src/drawer/DrawerDisclosure.tsx
@@ -1,10 +1,11 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 
 import {
   DialogDisclosureHTMLProps,
   DialogDisclosureOptions,
   useDialogDisclosure,
 } from "../dialog";
+import { createComponent } from "../system";
 
 import { DRAWER_DISCLOSURE_KEYS } from "./__keys";
 
diff --git a/src/link/Link.ts b/src/link/Link.ts
index 0df15a960..6a996808a 100644
--- a/src/link/Link.ts
+++ b/src/link/Link.ts
@@ -1,9 +1,11 @@
 import * as React from "react";
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import { ClickableHTMLProps, ClickableOptions, useClickable } from "reakit";
 import { useForkRef } from "reakit-utils";
 import { useWarning } from "reakit-warning";
 
+import { createComponent } from "../system";
+
 import { LINK_KEYS } from "./__keys";
 
 export type LinkOptions = ClickableOptions & {
diff --git a/src/number-input/NumberInput.ts b/src/number-input/NumberInput.ts
index eaee340f9..520944815 100644
--- a/src/number-input/NumberInput.ts
+++ b/src/number-input/NumberInput.ts
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import { InputHTMLProps, InputOptions, useInput } from "reakit";
 import { EventKeyMap, mergeRefs } from "@chakra-ui/react-utils";
 import {
@@ -8,6 +8,7 @@ import {
   StringOrNumber,
 } from "@chakra-ui/utils";
 
+import { createComponent } from "../system";
 import { ariaAttr } from "../utils";
 
 import { NUMBER_INPUT_KEYS } from "./__keys";
diff --git a/src/number-input/NumberInputDecrementButton.ts b/src/number-input/NumberInputDecrementButton.ts
index 84695230c..3ff21d57b 100644
--- a/src/number-input/NumberInputDecrementButton.ts
+++ b/src/number-input/NumberInputDecrementButton.ts
@@ -1,8 +1,10 @@
 import * as React from "react";
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import { ButtonHTMLProps, ButtonOptions, useButton } from "reakit";
 import { callAllHandlers } from "@chakra-ui/utils";
 
+import { createComponent } from "../system";
+
 import { NUMBER_INPUT_DECREMENT_BUTTON_KEYS } from "./__keys";
 import { NumberInputStateReturn } from "./index";
 
diff --git a/src/number-input/NumberInputIncrementButton.ts b/src/number-input/NumberInputIncrementButton.ts
index 004389c1b..03cb9a449 100644
--- a/src/number-input/NumberInputIncrementButton.ts
+++ b/src/number-input/NumberInputIncrementButton.ts
@@ -1,8 +1,10 @@
 import * as React from "react";
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import { ButtonHTMLProps, ButtonOptions, useButton } from "reakit";
 import { callAllHandlers } from "@chakra-ui/utils";
 
+import { createComponent } from "../system";
+
 import { NUMBER_INPUT_INCREMENT_BUTTON_KEYS } from "./__keys";
 import { NumberInputStateReturn } from "./index";
 
diff --git a/src/pagination/PaginationButton.ts b/src/pagination/PaginationButton.ts
index ebaa9af5c..70f8b025a 100644
--- a/src/pagination/PaginationButton.ts
+++ b/src/pagination/PaginationButton.ts
@@ -1,8 +1,10 @@
 import * as React from "react";
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import { ButtonHTMLProps, ButtonOptions, useButton } from "reakit";
 import { callAllHandlers, isNumber } from "@chakra-ui/utils";
 
+import { createComponent } from "../system";
+
 import { PAGINATION_BUTTON_KEYS } from "./__keys";
 import { PaginationStateReturn } from "./PaginationState";
 
diff --git a/src/picker-base/PickerBase.ts b/src/picker-base/PickerBase.ts
index a8f42acf5..9f89d8e09 100644
--- a/src/picker-base/PickerBase.ts
+++ b/src/picker-base/PickerBase.ts
@@ -1,9 +1,10 @@
 import * as React from "react";
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import { RoleHTMLProps, RoleOptions, useRole } from "reakit";
 import { createOnKeyDown } from "reakit-utils";
 import { callAllHandlers } from "@chakra-ui/utils";
 
+import { createComponent } from "../system";
 import { ariaAttr, isTouch } from "../utils";
 
 import { PICKER_BASE_KEYS } from "./__keys";
diff --git a/src/picker-base/PickerBaseContent.ts b/src/picker-base/PickerBaseContent.ts
index 5c0f7df97..90320a0a4 100644
--- a/src/picker-base/PickerBaseContent.ts
+++ b/src/picker-base/PickerBaseContent.ts
@@ -1,6 +1,8 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import { PopoverHTMLProps, PopoverOptions, usePopover } from "reakit";
 
+import { createComponent } from "../system";
+
 import { PICKER_BASE_CONTENT_KEYS } from "./__keys";
 import { PickerBaseStateReturn } from "./PickerBaseState";
 
diff --git a/src/picker-base/PickerBaseTrigger.ts b/src/picker-base/PickerBaseTrigger.ts
index e5dcf1d9a..fff4a32bb 100644
--- a/src/picker-base/PickerBaseTrigger.ts
+++ b/src/picker-base/PickerBaseTrigger.ts
@@ -1,4 +1,4 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import {
   PopoverDisclosureHTMLProps,
   PopoverDisclosureOptions,
@@ -6,6 +6,8 @@ import {
 } from "reakit";
 import { callAllHandlers } from "@chakra-ui/utils";
 
+import { createComponent } from "../system";
+
 import { PICKER_BASE_TRIGGER_KEYS } from "./__keys";
 import { PickerBaseStateReturn } from "./PickerBaseState";
 
diff --git a/src/popover/Popover.tsx b/src/popover/Popover.tsx
index 3ae1c1796..e901257aa 100644
--- a/src/popover/Popover.tsx
+++ b/src/popover/Popover.tsx
@@ -1,7 +1,9 @@
 import { CSSProperties } from "react";
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import { RoleHTMLProps, RoleOptions, useRole } from "reakit";
 
+import { createComponent } from "../system";
+
 import { POPOVER_KEYS } from "./__keys";
 import { PopoverStateReturn } from "./PopoverState";
 
diff --git a/src/popover/PopoverAnchor.tsx b/src/popover/PopoverAnchor.tsx
index 32287e6d6..068c2789b 100644
--- a/src/popover/PopoverAnchor.tsx
+++ b/src/popover/PopoverAnchor.tsx
@@ -1,7 +1,9 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import { RoleHTMLProps, RoleOptions, useRole } from "reakit";
 import { useForkRef } from "reakit-utils";
 
+import { createComponent } from "../system";
+
 import { POPOVER_ANCHOR_KEYS } from "./__keys";
 import { PopoverStateReturn } from "./PopoverState";
 
diff --git a/src/popover/PopoverArrow.tsx b/src/popover/PopoverArrow.tsx
index 9512b0e48..afd17c767 100644
--- a/src/popover/PopoverArrow.tsx
+++ b/src/popover/PopoverArrow.tsx
@@ -1,7 +1,9 @@
 import { CSSProperties } from "react";
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import { RoleHTMLProps, RoleOptions, useRole } from "reakit";
 
+import { createComponent } from "../system";
+
 import { POPOVER_ARROW_KEYS } from "./__keys";
 import { PopoverStateReturn } from "./PopoverState";
 
diff --git a/src/popover/PopoverArrowContent.tsx b/src/popover/PopoverArrowContent.tsx
index 31efe244a..3631664c7 100644
--- a/src/popover/PopoverArrowContent.tsx
+++ b/src/popover/PopoverArrowContent.tsx
@@ -1,7 +1,9 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import { RoleHTMLProps, RoleOptions, useRole } from "reakit";
 import { useForkRef } from "reakit-utils";
 
+import { createComponent } from "../system";
+
 import { POPOVER_ARROW_CONTENT_KEYS } from "./__keys";
 import { PopoverStateReturn } from "./PopoverState";
 
diff --git a/src/popover/PopoverBackdrop.ts b/src/popover/PopoverBackdrop.ts
index d72956777..8ab5a4115 100644
--- a/src/popover/PopoverBackdrop.ts
+++ b/src/popover/PopoverBackdrop.ts
@@ -1,10 +1,11 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 
 import {
   DialogBackdropHTMLProps,
   DialogBackdropOptions,
   useDialogBackdrop,
 } from "../dialog";
+import { createComponent } from "../system";
 
 import { POPOVER_BACKDROP_KEYS } from "./__keys";
 
diff --git a/src/popover/PopoverContent.tsx b/src/popover/PopoverContent.tsx
index 319f11a7f..ad6f47be4 100644
--- a/src/popover/PopoverContent.tsx
+++ b/src/popover/PopoverContent.tsx
@@ -1,7 +1,8 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import { useForkRef } from "reakit-utils";
 
 import { DialogHTMLProps, DialogOptions, useDialog } from "../dialog";
+import { createComponent } from "../system";
 
 import { POPOVER_DISCLOSURE_KEYS } from "./__keys";
 import { PopoverStateReturn } from "./PopoverState";
diff --git a/src/popover/PopoverDisclosure.tsx b/src/popover/PopoverDisclosure.tsx
index a78d21aee..12df4d12a 100644
--- a/src/popover/PopoverDisclosure.tsx
+++ b/src/popover/PopoverDisclosure.tsx
@@ -1,4 +1,4 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import { useForkRef } from "reakit-utils";
 
 import {
@@ -6,6 +6,7 @@ import {
   DialogDisclosureOptions,
   useDialogDisclosure,
 } from "../dialog";
+import { createComponent } from "../system";
 
 import { POPOVER_DISCLOSURE_KEYS } from "./__keys";
 import { PopoverStateReturn } from "./PopoverState";
diff --git a/src/popover/PopoverTrigger.tsx b/src/popover/PopoverTrigger.tsx
index ed5e9e13f..a80348f35 100644
--- a/src/popover/PopoverTrigger.tsx
+++ b/src/popover/PopoverTrigger.tsx
@@ -1,10 +1,11 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 
 import {
   DialogDisclosureHTMLProps,
   DialogDisclosureOptions,
   useDialogDisclosure,
 } from "../dialog";
+import { createComponent } from "../system";
 
 import { POPOVER_TRIGGER_KEYS } from "./__keys";
 
diff --git a/src/radio/Radio.tsx b/src/radio/Radio.tsx
index 190ad63d7..00953b813 100644
--- a/src/radio/Radio.tsx
+++ b/src/radio/Radio.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import {
   CompositeItemHTMLProps,
   CompositeItemOptions,
@@ -8,6 +8,8 @@ import {
 import { useForkRef, useLiveRef } from "reakit-utils";
 import { warning } from "reakit-warning/warning";
 
+import { createComponent } from "../system";
+
 import { RADIO_KEYS } from "./__keys";
 import { fireChange, getChecked, useInitialChecked } from "./helpers";
 import { RadioStateReturn } from "./RadioState";
diff --git a/src/segment/Segment.ts b/src/segment/Segment.ts
index edd6c371d..2af8ebba8 100644
--- a/src/segment/Segment.ts
+++ b/src/segment/Segment.ts
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import {
   CompositeItemHTMLProps,
   CompositeItemOptions,
@@ -10,6 +10,7 @@ import { useDateFormatter } from "@react-aria/i18n";
 import { useSpinButton } from "@react-aria/spinbutton";
 import { mergeProps } from "@react-aria/utils";
 
+import { createComponent } from "../system";
 import { dataAttr } from "../utils";
 
 import { SEGMENT_KEYS } from "./__keys";
diff --git a/src/segment/SegmentField.ts b/src/segment/SegmentField.ts
index 447e0641d..1cb27b9ef 100644
--- a/src/segment/SegmentField.ts
+++ b/src/segment/SegmentField.ts
@@ -1,6 +1,8 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import { CompositeHTMLProps, CompositeOptions, useComposite } from "reakit";
 
+import { createComponent } from "../system";
+
 import { SEGMENT_FIELD_KEYS } from "./__keys";
 
 export type SegmentFieldOptions = CompositeOptions;
diff --git a/src/select/Select.ts b/src/select/Select.ts
index e90d28edb..cb51df9c9 100644
--- a/src/select/Select.ts
+++ b/src/select/Select.ts
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import {
   PopoverDisclosureHTMLProps,
   PopoverDisclosureOptions,
@@ -9,6 +9,8 @@ import { useLiveRef } from "reakit-utils/useLiveRef";
 import { useShortcut } from "@chakra-ui/hooks";
 import { callAllHandlers, getNextItemFromSearch } from "@chakra-ui/utils";
 
+import { createComponent } from "../system";
+
 import { SELECT_KEYS } from "./__keys";
 import { SelectStateReturn } from "./SelectState";
 
diff --git a/src/slider/SliderGroup.ts b/src/slider/SliderGroup.ts
index 442a1c43b..d807a8262 100644
--- a/src/slider/SliderGroup.ts
+++ b/src/slider/SliderGroup.ts
@@ -1,7 +1,9 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import { GroupHTMLProps, GroupOptions, useGroup } from "reakit";
 import { mergeProps } from "@react-aria/utils";
 
+import { createComponent } from "../system";
+
 import { SLIDER_GROUP_KEYS } from "./__keys";
 import { SliderStateReturn } from "./SliderState";
 
diff --git a/src/slider/SliderInput.ts b/src/slider/SliderInput.ts
index b95e03f57..06d922ebd 100644
--- a/src/slider/SliderInput.ts
+++ b/src/slider/SliderInput.ts
@@ -1,8 +1,10 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import { InputHTMLProps, InputOptions, unstable_useId, useInput } from "reakit";
 import { useForkRef } from "reakit-utils";
 import { mergeProps } from "@react-aria/utils";
 
+import { createComponent } from "../system";
+
 import { SLIDER_INPUT_KEYS } from "./__keys";
 import { SliderThumbStateReturn } from "./SliderThumbState";
 
diff --git a/src/slider/SliderLabel.ts b/src/slider/SliderLabel.ts
index 18ef0c78e..dd75ed100 100644
--- a/src/slider/SliderLabel.ts
+++ b/src/slider/SliderLabel.ts
@@ -1,7 +1,9 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import { RoleHTMLProps, RoleOptions, useRole } from "reakit";
 import { mergeProps } from "@react-aria/utils";
 
+import { createComponent } from "../system";
+
 import { SLIDER_LABEL_KEYS } from "./__keys";
 import { SliderStateReturn } from "./SliderState";
 
diff --git a/src/slider/SliderOutput.ts b/src/slider/SliderOutput.ts
index eca9afb3c..e3434a481 100644
--- a/src/slider/SliderOutput.ts
+++ b/src/slider/SliderOutput.ts
@@ -1,7 +1,9 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import { RoleHTMLProps, RoleOptions, useRole } from "reakit";
 import { mergeProps } from "@react-aria/utils";
 
+import { createComponent } from "../system";
+
 import { SLIDER_LABEL_KEYS } from "./__keys";
 import { SliderStateReturn } from "./SliderState";
 
diff --git a/src/slider/SliderThumb.ts b/src/slider/SliderThumb.ts
index 70b633bf9..ecf0ebc11 100644
--- a/src/slider/SliderThumb.ts
+++ b/src/slider/SliderThumb.ts
@@ -1,7 +1,9 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import { RoleHTMLProps, RoleOptions, useRole } from "reakit";
 import { mergeProps } from "@react-aria/utils";
 
+import { createComponent } from "../system";
+
 import { SLIDER_THUMB_KEYS } from "./__keys";
 import { SliderThumbStateReturn } from "./SliderThumbState";
 
diff --git a/src/slider/SliderTrack.ts b/src/slider/SliderTrack.ts
index 9014d22e8..0c829ffd7 100644
--- a/src/slider/SliderTrack.ts
+++ b/src/slider/SliderTrack.ts
@@ -1,8 +1,10 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import { RoleHTMLProps, RoleOptions, useRole } from "reakit";
 import { useForkRef } from "reakit-utils";
 import { mergeProps } from "@react-aria/utils";
 
+import { createComponent } from "../system";
+
 import { SLIDER_TRACK_KEYS } from "./__keys";
 import { SliderStateReturn } from "./SliderState";
 
diff --git a/src/system/createComponent.tsx b/src/system/createComponent.tsx
new file mode 100644
index 000000000..4f37a57ab
--- /dev/null
+++ b/src/system/createComponent.tsx
@@ -0,0 +1,110 @@
+import * as React from "react";
+import { useCreateElement as defaultUseCreateElement } from "reakit-system";
+import { As, PropsWithAs, splitProps } from "reakit-utils";
+import { normalizePropsAreEqual } from "reakit-utils/normalizePropsAreEqual";
+import { shallowEqual } from "reakit-utils/shallowEqual";
+
+import { forwardRef } from "./forwardRef";
+import { memo } from "./memo";
+
+type RoleHTMLProps = React.HTMLAttributes<any> &
+  React.RefAttributes<any> & {
+    wrapElement?: (element: React.ReactNode) => React.ReactNode;
+  };
+
+type Hook<O> = {
+  (options?: O, props?: RoleHTMLProps): RoleHTMLProps;
+  unstable_propsAreEqual?: (prev: O, next: O) => boolean;
+  __keys?: ReadonlyArray<any>;
+};
+
+type Options<T extends As, O> = {
+  as: T;
+  useHook?: Hook<O>;
+  keys?: ReadonlyArray<any>;
+  memo?: boolean;
+  propsAreEqual?: (prev: O, next: O) => boolean;
+  useCreateElement?: (
+    type: T,
+    props: Omit<PropsWithAs<O, T>, "as">,
+    children?: React.ReactNode,
+  ) => JSX.Element;
+};
+
+export type Component<T extends As, O> = {
+  <TT extends As>(props: PropsWithAs<O, TT> & { as: TT }): JSX.Element;
+  (props: PropsWithAs<O, T>): JSX.Element;
+  displayName?: string;
+  unstable_propsAreEqual: (
+    prev: PropsWithAs<O, T>,
+    next: PropsWithAs<O, T>,
+  ) => boolean;
+  __keys?: ReadonlyArray<any>;
+  __displayName?: string;
+};
+
+/**
+ * Creates a React component.
+ *
+ * @example
+ * import { createComponent } from "reakit-system";
+ *
+ * const A = createComponent({ as: "a" });
+ *
+ * @param options
+ */
+export function createComponent<T extends As, O>({
+  as: type,
+  useHook,
+  memo: shouldMemo,
+  propsAreEqual = useHook?.unstable_propsAreEqual,
+  keys = useHook?.__keys || [],
+  useCreateElement = defaultUseCreateElement,
+}: Options<T, O>) {
+  let Comp = ((
+    { as = type, ...props }: PropsWithAs<O, T>,
+    ref: React.Ref<T>,
+  ) => {
+    if (useHook) {
+      const [options, htmlProps] = splitProps(props, keys);
+      const { wrapElement, ...elementProps } = useHook(options, {
+        ref,
+        ...htmlProps,
+      });
+      // @ts-ignore
+      const asKeys = as.render?.__keys || as.__keys;
+      const asOptions = asKeys && splitProps(props, asKeys)[0];
+      const allProps = asOptions
+        ? { ...elementProps, ...asOptions }
+        : elementProps;
+      const element = useCreateElement(as, allProps as typeof props);
+      if (wrapElement) {
+        return wrapElement(element);
+      }
+      return element;
+    }
+    return useCreateElement(as, { ref, ...props });
+  }) as Component<T, O>;
+
+  if (process.env.NODE_ENV !== "production" && useHook) {
+    Comp.displayName = useHook.name.replace(/^(unstable_)?use/, "");
+  }
+
+  Comp = forwardRef(Comp);
+
+  if (shouldMemo) {
+    Comp = memo(Comp, propsAreEqual && normalizePropsAreEqual(propsAreEqual));
+  }
+
+  Comp.__keys = keys;
+
+  Comp.unstable_propsAreEqual = normalizePropsAreEqual(
+    propsAreEqual || shallowEqual,
+  );
+
+  if (useHook) {
+    Comp.__displayName = useHook.name.replace(/^(unstable_)?use/, "");
+  }
+
+  return Comp;
+}
diff --git a/src/system/forwardRef.tsx b/src/system/forwardRef.tsx
new file mode 100644
index 000000000..6d95646cc
--- /dev/null
+++ b/src/system/forwardRef.tsx
@@ -0,0 +1,7 @@
+import * as React from "react";
+
+export function forwardRef<T extends React.ForwardRefRenderFunction<any, any>>(
+  component: T,
+) {
+  return React.forwardRef(component) as unknown as T;
+}
diff --git a/src/system/index.ts b/src/system/index.ts
index 356fbfdbc..fd25f565e 100644
--- a/src/system/index.ts
+++ b/src/system/index.ts
@@ -1 +1,4 @@
+export * from "./createComponent";
 export * from "./createComposableHook";
+export * from "./forwardRef";
+export * from "./memo";
diff --git a/src/system/memo.tsx b/src/system/memo.tsx
new file mode 100644
index 000000000..dbe877dc7
--- /dev/null
+++ b/src/system/memo.tsx
@@ -0,0 +1,11 @@
+import * as React from "react";
+
+export function memo<T extends React.ComponentType<any>>(
+  component: T,
+  propsAreEqual?: (
+    prevProps: Readonly<React.ComponentProps<T>>,
+    nextProps: Readonly<React.ComponentProps<T>>,
+  ) => boolean,
+) {
+  return React.memo(component, propsAreEqual) as unknown as T;
+}
diff --git a/src/timepicker/TimePicker.ts b/src/timepicker/TimePicker.ts
index 7609f31b4..528e7d89f 100644
--- a/src/timepicker/TimePicker.ts
+++ b/src/timepicker/TimePicker.ts
@@ -1,10 +1,11 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 
 import {
   PickerBaseHTMLProps,
   PickerBaseOptions,
   usePickerBase,
 } from "../picker-base";
+import { createComponent } from "../system";
 
 import { TIME_PICKER_KEYS } from "./__keys";
 
diff --git a/src/timepicker/TimePickerColumn.ts b/src/timepicker/TimePickerColumn.ts
index aeac8c04f..3839bc282 100644
--- a/src/timepicker/TimePickerColumn.ts
+++ b/src/timepicker/TimePickerColumn.ts
@@ -1,10 +1,12 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import {
   CompositeHTMLProps,
   CompositeOptions,
   useComposite,
 } from "reakit/Composite";
 
+import { createComponent } from "../system";
+
 import { TIME_PICKER_COLUMN_KEYS } from "./__keys";
 import { TimePickerColumnStateReturn } from "./TimePickerColumnState";
 
diff --git a/src/timepicker/TimePickerColumnValue.ts b/src/timepicker/TimePickerColumnValue.ts
index fa533b6dd..17a692641 100644
--- a/src/timepicker/TimePickerColumnValue.ts
+++ b/src/timepicker/TimePickerColumnValue.ts
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import {
   ButtonHTMLProps,
   ButtonOptions,
@@ -11,6 +11,8 @@ import {
 import { useForkRef } from "reakit-utils";
 import { callAllHandlers } from "@chakra-ui/utils";
 
+import { createComponent } from "../system";
+
 import { TIME_PICKER_COLUMN_VALUE_KEYS } from "./__keys";
 import { getSelectedValueFromDate } from "./helpers";
 import { TimePickerColumnStateReturn } from "./TimePickerColumnState";
diff --git a/src/timepicker/TimePickerContent.ts b/src/timepicker/TimePickerContent.ts
index d90cc045d..ed6a378a1 100644
--- a/src/timepicker/TimePickerContent.ts
+++ b/src/timepicker/TimePickerContent.ts
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import { createOnKeyDown, useForkRef } from "reakit-utils";
 import { focus, getNextTabbable, getPreviousTabbable } from "@chakra-ui/utils";
 
@@ -8,6 +8,7 @@ import {
   PickerBaseContentOptions,
   usePickerBaseContent,
 } from "../picker-base";
+import { createComponent } from "../system";
 
 import { TIME_PICKER_CONTENT_KEYS } from "./__keys";
 
diff --git a/src/timepicker/TimePickerSegment.ts b/src/timepicker/TimePickerSegment.ts
index 05c9a4a18..7a30a0226 100644
--- a/src/timepicker/TimePickerSegment.ts
+++ b/src/timepicker/TimePickerSegment.ts
@@ -1,6 +1,7 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 
 import { SegmentHTMLProps, SegmentOptions, useSegment } from "../segment";
+import { createComponent } from "../system";
 
 import { TIME_PICKER_SEGMENT_KEYS } from "./__keys";
 import { TimePickerStateReturn } from "./TimePickerState";
diff --git a/src/timepicker/TimePickerSegmentField.ts b/src/timepicker/TimePickerSegmentField.ts
index 72c67292b..63ee3645b 100644
--- a/src/timepicker/TimePickerSegmentField.ts
+++ b/src/timepicker/TimePickerSegmentField.ts
@@ -1,10 +1,11 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 
 import {
   SegmentFieldHTMLProps,
   SegmentFieldOptions,
   useSegmentField,
 } from "../segment";
+import { createComponent } from "../system";
 
 import { TIME_PICKER_SEGMENT_FIELD_KEYS } from "./__keys";
 
diff --git a/src/timepicker/TimePickerTrigger.ts b/src/timepicker/TimePickerTrigger.ts
index 00a4a147e..e450f435c 100644
--- a/src/timepicker/TimePickerTrigger.ts
+++ b/src/timepicker/TimePickerTrigger.ts
@@ -1,10 +1,11 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 
 import {
   PickerBaseHTMLProps,
   PickerBaseOptions,
   usePickerBaseTrigger,
 } from "../picker-base";
+import { createComponent } from "../system";
 
 import { TIME_PICKER_TRIGGER_KEYS } from "./__keys";
 import { TimePickerStateReturn } from "./TimePickerState";
diff --git a/src/tooltip/Tooltip.tsx b/src/tooltip/Tooltip.tsx
index c05df7591..a8226233a 100644
--- a/src/tooltip/Tooltip.tsx
+++ b/src/tooltip/Tooltip.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import { Portal } from "reakit";
 
 import {
@@ -7,6 +7,7 @@ import {
   PopoverOptions,
   usePopover,
 } from "../popover/Popover";
+import { createComponent } from "../system";
 
 import { TOOLTIP_KEYS } from "./__keys";
 
diff --git a/src/tooltip/TooltipAnchor.tsx b/src/tooltip/TooltipAnchor.tsx
index 89bcec3a6..ec78682cc 100644
--- a/src/tooltip/TooltipAnchor.tsx
+++ b/src/tooltip/TooltipAnchor.tsx
@@ -1,10 +1,11 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 
 import {
   PopoverAnchorHTMLProps,
   PopoverAnchorOptions,
   usePopoverAnchor,
 } from "../popover";
+import { createComponent } from "../system";
 
 import { TOOLTIP_ANCHOR_KEYS } from "./__keys";
 import { TooltipStateReturn } from "./TooltipState";
diff --git a/src/tooltip/TooltipArrowContent.ts b/src/tooltip/TooltipArrowContent.ts
index 6187cda60..55c87bd98 100644
--- a/src/tooltip/TooltipArrowContent.ts
+++ b/src/tooltip/TooltipArrowContent.ts
@@ -1,10 +1,11 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 
 import {
   PopoverArrowContentHTMLProps,
   PopoverArrowContentOptions,
   usePopoverArrowContent,
 } from "../popover/PopoverArrowContent";
+import { createComponent } from "../system";
 
 import { TOOLTIP_ARROW_CONTENT_KEYS } from "./__keys";
 
diff --git a/src/tooltip/TooltipContent.tsx b/src/tooltip/TooltipContent.tsx
index acfd8a494..ec18a292b 100644
--- a/src/tooltip/TooltipContent.tsx
+++ b/src/tooltip/TooltipContent.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import { getDocument, useForkRef } from "reakit-utils";
 
 import {
@@ -7,6 +7,7 @@ import {
   DisclosureContentOptions,
   useDisclosureContent,
 } from "../disclosure/DisclosureContent";
+import { createComponent } from "../system";
 
 import globalState from "./__globalState";
 import { TOOLTIP_KEYS } from "./__keys";
diff --git a/src/tooltip/TooltipReference.ts b/src/tooltip/TooltipReference.ts
index fc5ff4dcf..6d66a70c4 100644
--- a/src/tooltip/TooltipReference.ts
+++ b/src/tooltip/TooltipReference.ts
@@ -1,8 +1,10 @@
 import * as React from "react";
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import { RoleHTMLProps, RoleOptions, useRole } from "reakit";
 import { useForkRef, useLiveRef } from "reakit-utils";
 
+import { createComponent } from "../system";
+
 import { TOOLTIP_REFERENCE_KEYS } from "./__keys";
 import { TooltipStateReturn } from "./TooltipState";
 
diff --git a/src/tooltip/TooltipTrigger.ts b/src/tooltip/TooltipTrigger.ts
index f22a83060..90c606d55 100644
--- a/src/tooltip/TooltipTrigger.ts
+++ b/src/tooltip/TooltipTrigger.ts
@@ -1,8 +1,10 @@
 import * as React from "react";
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import { RoleHTMLProps, RoleOptions, useRole } from "reakit";
 import { useLiveRef } from "reakit-utils";
 
+import { createComponent } from "../system";
+
 import { TOOLTIP_TRIGGER_KEYS } from "./__keys";
 import { TooltipStateReturn } from "./TooltipState";
 
diff --git a/tailwind.config.js b/tailwind.config.js
index b75c2b71e..f70c90c64 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,9 +1,7 @@
 const defaultTheme = require("tailwindcss/defaultTheme");
 
 module.exports = {
-  mode: "jit",
-  purge: ["./src/**/*"],
-  darkMode: false, // or 'media' or 'class'
+  content: ["./src/**/*"],
   theme: {
     extend: {
       fontFamily: {
@@ -11,8 +9,6 @@ module.exports = {
       },
     },
   },
-  variants: {
-    extend: {},
-  },
+  variants: {},
   plugins: [],
 };