feat(createComponent): ✨ add __displayname for UI library

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>({

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";

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";

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";
 

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";
 

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";
 

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,

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";

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";

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";
 

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";
 

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";

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";

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";
 

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 ".";

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";

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";
 

src/dialog/DialogBackdrop.tsx

@@ -1,13 +1,14 @@
 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 {
   DisclosureContentHTMLProps,
   DisclosureContentOptions,
   useDisclosureContent,
 } from "../disclosure/DisclosureContent";
+import { createComponent } from "../system";
 
 import { DIALOG_BACKDROP_KEYS } from "./__keys";
 import { DialogStateReturn } from "./DialogState";

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";

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";
 

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";
 

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";
 

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 & {

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";

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";
 

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";
 

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";
 

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";

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";
 

src/picker-base/PickerBaseTrigger.ts

@@ -1,11 +1,13 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import {
   PopoverDisclosureHTMLProps,
   PopoverDisclosureOptions,
   usePopoverDisclosure,
 } from "reakit";
 import { callAllHandlers } from "@chakra-ui/utils";
 
+import { createComponent } from "../system";
+
 import { PICKER_BASE_TRIGGER_KEYS } from "./__keys";
 import { PickerBaseStateReturn } from "./PickerBaseState";
 

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";