reshaped 3.5.0-rc.0 → 3.5.1-canary.0

package/dist/components/ContextMenu/ContextMenu.d.ts

@@ -1,26 +1,11 @@
+import React from "react";
+import DropdownMenu from "../DropdownMenu";
 import type * as T from "./ContextMenu.types";
-declare const ContextMenu: {
-    (props: T.Props): import("react/jsx-runtime").JSX.Element;
-    Content: {
-        (props: import("../DropdownMenu/DropdownMenu.types").ContentProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    Item: {
-        (props: import("../DropdownMenu/DropdownMenu.types").ItemProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    Section: {
-        (props: import("../DropdownMenu/DropdownMenu.types").SectionProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    SubMenu: {
-        (props: import("../DropdownMenu/DropdownMenu.types").SubMenuProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    SubTrigger: {
-        (props: import("../DropdownMenu/DropdownMenu.types").SubTriggerProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    displayName: string;
+declare const ContextMenu: React.FC<T.Props> & {
+    Content: typeof DropdownMenu.Content;
+    Item: typeof DropdownMenu.Item;
+    Section: typeof DropdownMenu.Section;
+    SubMenu: typeof DropdownMenu.SubMenu;
+    SubTrigger: typeof DropdownMenu.SubTrigger;
 };
 export default ContextMenu;

package/dist/components/ContextMenu/tests/ContextMenu.stories.d.ts

@@ -1,28 +1,11 @@
 declare const _default: {
     title: string;
-    component: {
-        (props: import("./..").ContextMenuProps): import("react").JSX.Element;
-        Content: {
-            (props: import("../../DropdownMenu/DropdownMenu.types").ContentProps): import("react").JSX.Element;
-            displayName: string;
-        };
-        Item: {
-            (props: import("../../DropdownMenu/DropdownMenu.types").ItemProps): import("react").JSX.Element;
-            displayName: string;
-        };
-        Section: {
-            (props: import("../../DropdownMenu/DropdownMenu.types").SectionProps): import("react").JSX.Element;
-            displayName: string;
-        };
-        SubMenu: {
-            (props: import("../../DropdownMenu/DropdownMenu.types").SubMenuProps): import("react").JSX.Element;
-            displayName: string;
-        };
-        SubTrigger: {
-            (props: import("../../DropdownMenu/DropdownMenu.types").SubTriggerProps): import("react").JSX.Element;
-            displayName: string;
-        };
-        displayName: string;
+    component: import("react").FC<import("./..").ContextMenuProps> & {
+        Content: import("react").FC<import("../../DropdownMenu/DropdownMenu.types").ContentProps>;
+        Item: import("react").FC<import("../../DropdownMenu/DropdownMenu.types").ItemProps>;
+        Section: import("react").FC<import("../../DropdownMenu/DropdownMenu.types").SectionProps>;
+        SubMenu: import("react").FC<import("../../DropdownMenu/DropdownMenu.types").SubMenuProps>;
+        SubTrigger: import("react").FC<import("../../DropdownMenu/DropdownMenu.types").SubTriggerProps>;
     };
     parameters: {
         iframe: {

package/dist/components/ContextMenu/tests/ContextMenu.test.stories.d.ts

@@ -2,29 +2,12 @@ import { StoryObj } from "@storybook/react";
 import { fn } from "@storybook/test";
 declare const _default: {
     title: string;
-    component: {
-        (props: import("./..").ContextMenuProps): import("react").JSX.Element;
-        Content: {
-            (props: import("../../DropdownMenu/DropdownMenu.types").ContentProps): import("react").JSX.Element;
-            displayName: string;
-        };
-        Item: {
-            (props: import("../../DropdownMenu/DropdownMenu.types").ItemProps): import("react").JSX.Element;
-            displayName: string;
-        };
-        Section: {
-            (props: import("../../DropdownMenu/DropdownMenu.types").SectionProps): import("react").JSX.Element;
-            displayName: string;
-        };
-        SubMenu: {
-            (props: import("../../DropdownMenu/DropdownMenu.types").SubMenuProps): import("react").JSX.Element;
-            displayName: string;
-        };
-        SubTrigger: {
-            (props: import("../../DropdownMenu/DropdownMenu.types").SubTriggerProps): import("react").JSX.Element;
-            displayName: string;
-        };
-        displayName: string;
+    component: import("react").FC<import("./..").ContextMenuProps> & {
+        Content: import("react").FC<import("../../DropdownMenu/DropdownMenu.types").ContentProps>;
+        Item: import("react").FC<import("../../DropdownMenu/DropdownMenu.types").ItemProps>;
+        Section: import("react").FC<import("../../DropdownMenu/DropdownMenu.types").SectionProps>;
+        SubMenu: import("react").FC<import("../../DropdownMenu/DropdownMenu.types").SubMenuProps>;
+        SubTrigger: import("react").FC<import("../../DropdownMenu/DropdownMenu.types").SubTriggerProps>;
     };
     parameters: {
         iframe: {

package/dist/components/Dismissible/Dismissible.d.ts

@@ -1,6 +1,3 @@
 import type * as T from "./Dismissible.types";
-declare const Dismissible: {
-    (props: T.Props): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare const Dismissible: React.FC<T.Props>;
 export default Dismissible;

package/dist/components/Dismissible/tests/Dismissible.stories.d.ts

@@ -1,10 +1,7 @@
 import { StoryObj } from "@storybook/react";
 declare const _default: {
     title: string;
-    components: {
-        (props: import("./..").DismissibleProps): import("react").JSX.Element;
-        displayName: string;
-    };
+    components: import("react").FC<import("./..").DismissibleProps>;
     parameters: {
         iframe: {
             url: string;

package/dist/components/Dismissible/tests/Dismissible.test.stories.d.ts

@@ -2,10 +2,7 @@ import { StoryObj } from "@storybook/react";
 import { fn } from "@storybook/test";
 declare const _default: {
     title: string;
-    component: {
-        (props: import("./..").DismissibleProps): import("react").JSX.Element;
-        displayName: string;
-    };
+    component: import("react").FC<import("./..").DismissibleProps>;
     parameters: {
         iframe: {
             url: string;

package/dist/components/Divider/Divider.d.ts

@@ -1,6 +1,4 @@
+import type React from "react";
 import type * as T from "./Divider.types";
-declare const Divider: {
-    (props: T.Props): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare const Divider: React.FC<T.Props>;
 export default Divider;

package/dist/components/Divider/tests/Divider.stories.d.ts

@@ -1,9 +1,6 @@
 declare const _default: {
     title: string;
-    component: {
-        (props: import("./..").DividerProps): import("react").JSX.Element;
-        displayName: string;
-    };
+    component: import("react").FC<import("./..").DividerProps>;
     parameters: {
         iframe: {
             url: string;

package/dist/components/Divider/tests/Divider.test.stories.d.ts

@@ -1,10 +1,7 @@
 import { StoryObj } from "@storybook/react";
 declare const _default: {
     title: string;
-    component: {
-        (props: import("./..").DividerProps): import("react").JSX.Element;
-        displayName: string;
-    };
+    component: import("react").FC<import("./..").DividerProps>;
     parameters: {
         iframe: {
             url: string;

package/dist/components/DropdownMenu/DropdownMenu.d.ts

@@ -1,34 +1,18 @@
+import React from "react";
+import Popover from "../Popover";
 import type * as T from "./DropdownMenu.types";
-declare const DropdownMenu: {
-    (props: T.Props): import("react/jsx-runtime").JSX.Element;
-    Dismissible: {
-        (props: import("../Dismissible").DismissibleProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    Trigger: {
-        (props: import("../_private/Flyout").FlyoutTriggerProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    Content: {
-        (props: T.ContentProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    Section: {
-        (props: T.SectionProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    Item: {
-        (props: T.ItemProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    SubMenu: {
-        (props: T.SubMenuProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    SubTrigger: {
-        (props: T.SubTriggerProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    displayName: string;
+declare const DropdownMenu: React.FC<T.Props> & {
+    Dismissible: typeof Popover.Dismissible;
+    Trigger: typeof Popover.Trigger;
+    Content: typeof DropdownMenuContent;
+    Section: typeof DropdownMenuSection;
+    Item: typeof DropdownMenuItem;
+    SubMenu: typeof DropdownMenuSubMenu;
+    SubTrigger: typeof DropdownMenuSubTrigger;
 };
+declare const DropdownMenuContent: React.FC<T.ContentProps>;
+declare const DropdownMenuSection: React.FC<T.SectionProps>;
+declare const DropdownMenuItem: React.FC<T.ItemProps>;
+declare const DropdownMenuSubMenu: React.FC<T.SubMenuProps>;
+declare const DropdownMenuSubTrigger: React.FC<T.SubTriggerProps>;
 export default DropdownMenu;

package/dist/components/DropdownMenu/tests/DropdownMenu.stories.d.ts

@@ -1,36 +1,13 @@
 declare const _default: {
     title: string;
-    component: {
-        (props: import("./..").DropdownMenuProps): import("react").JSX.Element;
-        Dismissible: {
-            (props: import("../../Dismissible").DismissibleProps): import("react").JSX.Element;
-            displayName: string;
-        };
-        Trigger: {
-            (props: import("../../_private/Flyout").FlyoutTriggerProps): import("react").JSX.Element;
-            displayName: string;
-        };
-        Content: {
-            (props: import("../DropdownMenu.types").ContentProps): import("react").JSX.Element;
-            displayName: string;
-        };
-        Section: {
-            (props: import("../DropdownMenu.types").SectionProps): import("react").JSX.Element;
-            displayName: string;
-        };
-        Item: {
-            (props: import("../DropdownMenu.types").ItemProps): import("react").JSX.Element;
-            displayName: string;
-        };
-        SubMenu: {
-            (props: import("../DropdownMenu.types").SubMenuProps): import("react").JSX.Element;
-            displayName: string;
-        };
-        SubTrigger: {
-            (props: import("../DropdownMenu.types").SubTriggerProps): import("react").JSX.Element;
-            displayName: string;
-        };
-        displayName: string;
+    component: import("react").FC<import("./..").DropdownMenuProps> & {
+        Dismissible: import("react").FC<import("../../Dismissible").DismissibleProps>;
+        Trigger: import("react").FC<import("../../_private/Flyout").FlyoutTriggerProps>;
+        Content: import("react").FC<import("../DropdownMenu.types").ContentProps>;
+        Section: import("react").FC<import("../DropdownMenu.types").SectionProps>;
+        Item: import("react").FC<import("../DropdownMenu.types").ItemProps>;
+        SubMenu: import("react").FC<import("../DropdownMenu.types").SubMenuProps>;
+        SubTrigger: import("react").FC<import("../DropdownMenu.types").SubTriggerProps>;
     };
     parameters: {
         iframe: {

package/dist/components/DropdownMenu/tests/DropdownMenu.test.stories.d.ts

@@ -2,37 +2,14 @@ import { StoryObj } from "@storybook/react";
 import { fn } from "@storybook/test";
 declare const _default: {
     title: string;
-    component: {
-        (props: import("./..").DropdownMenuProps): import("react").JSX.Element;
-        Dismissible: {
-            (props: import("../../Dismissible").DismissibleProps): import("react").JSX.Element;
-            displayName: string;
-        };
-        Trigger: {
-            (props: import("../../_private/Flyout").FlyoutTriggerProps): import("react").JSX.Element;
-            displayName: string;
-        };
-        Content: {
-            (props: import("../DropdownMenu.types").ContentProps): import("react").JSX.Element;
-            displayName: string;
-        };
-        Section: {
-            (props: import("../DropdownMenu.types").SectionProps): import("react").JSX.Element;
-            displayName: string;
-        };
-        Item: {
-            (props: import("../DropdownMenu.types").ItemProps): import("react").JSX.Element;
-            displayName: string;
-        };
-        SubMenu: {
-            (props: import("../DropdownMenu.types").SubMenuProps): import("react").JSX.Element;
-            displayName: string;
-        };
-        SubTrigger: {
-            (props: import("../DropdownMenu.types").SubTriggerProps): import("react").JSX.Element;
-            displayName: string;
-        };
-        displayName: string;
+    component: import("react").FC<import("./..").DropdownMenuProps> & {
+        Dismissible: import("react").FC<import("../../Dismissible").DismissibleProps>;
+        Trigger: import("react").FC<import("../../_private/Flyout").FlyoutTriggerProps>;
+        Content: import("react").FC<import("../DropdownMenu.types").ContentProps>;
+        Section: import("react").FC<import("../DropdownMenu.types").SectionProps>;
+        Item: import("react").FC<import("../DropdownMenu.types").ItemProps>;
+        SubMenu: import("react").FC<import("../DropdownMenu.types").SubMenuProps>;
+        SubTrigger: import("react").FC<import("../DropdownMenu.types").SubTriggerProps>;
     };
     parameters: {
         iframe: {

package/dist/components/FileUpload/FileUpload.d.ts

@@ -1,10 +1,7 @@
+import React from "react";
 import type * as T from "./FileUpload.types";
-declare const FileUpload: {
-    (props: T.Props): import("react/jsx-runtime").JSX.Element;
-    Trigger: {
-        (props: T.TriggerProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    displayName: string;
+declare const FileUploadTrigger: React.FC<T.TriggerProps>;
+declare const FileUpload: React.FC<T.Props> & {
+    Trigger: typeof FileUploadTrigger;
 };
 export default FileUpload;

package/dist/components/FileUpload/tests/FileUpload.stories.d.ts

@@ -1,13 +1,8 @@
 import React from "react";
 declare const _default: {
     title: string;
-    component: {
-        (props: import("./..").FileUploadProps): React.JSX.Element;
-        Trigger: {
-            (props: import("../FileUpload.types").TriggerProps): React.JSX.Element;
-            displayName: string;
-        };
-        displayName: string;
+    component: React.FC<import("./..").FileUploadProps> & {
+        Trigger: React.FC<import("../FileUpload.types").TriggerProps>;
     };
     parameters: {
         iframe: {

package/dist/components/FileUpload/tests/FileUpload.test.stories.d.ts

@@ -2,13 +2,8 @@ import { StoryObj } from "@storybook/react";
 import { fn } from "@storybook/test";
 declare const _default: {
     title: string;
-    component: {
-        (props: import("./..").FileUploadProps): import("react").JSX.Element;
-        Trigger: {
-            (props: import("../FileUpload.types").TriggerProps): import("react").JSX.Element;
-            displayName: string;
-        };
-        displayName: string;
+    component: import("react").FC<import("./..").FileUploadProps> & {
+        Trigger: import("react").FC<import("../FileUpload.types").TriggerProps>;
     };
     parameters: {
         iframe: {

package/dist/components/FormControl/FormControl.d.ts

@@ -1,11 +1,11 @@
+import React from "react";
 import type * as T from "./FormControl.types";
-/**
- * Keeping the compound component composition inside a server component to make sure
- * frameworks like Next.js won't require use client to be added on the product side
- */
-declare const FormControl: React.ComponentType<T.Props> & {
-    Label: React.ComponentType<T.LabelProps>;
-    Helper: React.ComponentType<T.CaptionProps>;
-    Error: React.ComponentType<T.CaptionProps>;
+import FormControlLabel from "./FormControlLabel";
+import FormControlHelper from "./FormControlHelper";
+import FormControlError from "./FormControlError";
+declare const FormControl: React.FC<T.Props> & {
+    Label: typeof FormControlLabel;
+    Helper: typeof FormControlHelper;
+    Error: typeof FormControlError;
 };
 export default FormControl;

package/dist/components/FormControl/FormControl.js

@@ -1,12 +1,33 @@
-import FormControlClient from "./FormControlClient.js";
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import useElementId from "../../hooks/useElementId.js";
+import { Provider } from "./FormControl.context.js";
+import { getCaptionId } from "./FormControl.utilities.js";
 import FormControlLabel from "./FormControlLabel.js";
-import FormControlError from "./FormControlError.js";
 import FormControlHelper from "./FormControlHelper.js";
-/**
- * Keeping the compound component composition inside a server component to make sure
- * frameworks like Next.js won't require use client to be added on the product side
- */
-const FormControl = FormControlClient;
+import FormControlError from "./FormControlError.js";
+const FormControl = (props) => {
+    const { children, id: passedId, required, hasError, group, disabled, size } = props;
+    const id = useElementId(passedId);
+    const WrapperTagName = group ? "fieldset" : "div";
+    const [helperRendered, setHelperRendered] = React.useState(false);
+    const [errorRendered, setErrorRendered] = React.useState(false);
+    const describedby = [
+        helperRendered && getCaptionId(id),
+        errorRendered && getCaptionId(id, "error"),
+    ]
+        .filter(Boolean)
+        .join(" ");
+    const attributes = { id, "aria-describedby": describedby };
+    const errorRef = () => {
+        setErrorRendered(true);
+    };
+    const helperRef = () => {
+        setHelperRendered(true);
+    };
+    return (_jsx(WrapperTagName, { children: _jsx(Provider, { value: { required, hasError, errorRef, helperRef, attributes, group, disabled, size }, children: children }) }));
+};
 FormControl.Label = FormControlLabel;
 FormControl.Helper = FormControlHelper;
 FormControl.Error = FormControlError;

package/dist/components/FormControl/FormControlCaption.d.ts

@@ -1,3 +1,3 @@
 import type * as T from "./FormControl.types";
-declare const FormControlCaption: (props: T.PrivateCaptionProps) => import("react/jsx-runtime").JSX.Element;
+declare const FormControlCaption: React.FC<T.PrivateCaptionProps>;
 export default FormControlCaption;

package/dist/components/FormControl/FormControlError.d.ts

@@ -1,6 +1,3 @@
 import type * as T from "./FormControl.types";
-declare const FormControlError: {
-    (props: T.CaptionProps): import("react/jsx-runtime").JSX.Element | null;
-    displayName: string;
-};
+declare const FormControlError: React.FC<T.CaptionProps>;
 export default FormControlError;

package/dist/components/FormControl/FormControlHelper.d.ts

@@ -1,6 +1,3 @@
 import type * as T from "./FormControl.types";
-declare const FormControlHelper: {
-    (props: T.CaptionProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare const FormControlHelper: React.FC<T.CaptionProps>;
 export default FormControlHelper;

package/dist/components/FormControl/FormControlLabel.d.ts

@@ -1,6 +1,3 @@
 import type * as T from "./FormControl.types";
-declare const FormControlLabel: {
-    (props: T.LabelProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare const FormControlLabel: React.FC<T.LabelProps>;
 export default FormControlLabel;

package/dist/components/FormControl/tests/FormControl.stories.d.ts

@@ -1,10 +1,10 @@
 import { StoryObj } from "@storybook/react";
 declare const _default: {
     title: string;
-    component: import("react").ComponentType<import("./..").FormControlProps> & {
-        Label: React.ComponentType<import("../FormControl.types").LabelProps>;
-        Helper: React.ComponentType<import("../FormControl.types").CaptionProps>;
-        Error: React.ComponentType<import("../FormControl.types").CaptionProps>;
+    component: import("react").FC<import("./..").FormControlProps> & {
+        Label: import("react").FC<import("../FormControl.types").LabelProps>;
+        Helper: import("react").FC<import("../FormControl.types").CaptionProps>;
+        Error: import("react").FC<import("../FormControl.types").CaptionProps>;
     };
     parameters: {
         iframe: {

package/dist/components/FormControl/tests/FormControl.test.stories.d.ts

@@ -1,10 +1,10 @@
 import { StoryObj } from "@storybook/react";
 declare const _default: {
     title: string;
-    component: import("react").ComponentType<import("./..").FormControlProps> & {
-        Label: React.ComponentType<import("../FormControl.types").LabelProps>;
-        Helper: React.ComponentType<import("../FormControl.types").CaptionProps>;
-        Error: React.ComponentType<import("../FormControl.types").CaptionProps>;
+    component: import("react").FC<import("./..").FormControlProps> & {
+        Label: import("react").FC<import("../FormControl.types").LabelProps>;
+        Helper: import("react").FC<import("../FormControl.types").CaptionProps>;
+        Error: import("react").FC<import("../FormControl.types").CaptionProps>;
     };
     parameters: {
         iframe: {

package/dist/components/Hidden/Hidden.d.ts

@@ -1,6 +1,3 @@
 import type * as T from "./Hidden.types";
-declare const Hidden: {
-    (props: T.Props): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare const Hidden: React.FC<T.Props>;
 export default Hidden;

package/dist/components/Hidden/tests/Hidden.stories.d.ts

@@ -1,9 +1,6 @@
 declare const _default: {
     title: string;
-    component: {
-        (props: import("./..").HiddenProps): import("react").JSX.Element;
-        displayName: string;
-    };
+    component: import("react").FC<import("./..").HiddenProps>;
     parameters: {
         iframe: {
             url: string;

package/dist/components/Hidden/tests/Hidden.test.stories.d.ts

@@ -1,10 +1,7 @@
 import { StoryObj } from "@storybook/react";
 declare const _default: {
     title: string;
-    component: {
-        (props: import("./..").HiddenProps): import("react").JSX.Element;
-        displayName: string;
-    };
+    component: import("react").FC<import("./..").HiddenProps>;
     parameters: {
         iframe: {
             url: string;

package/dist/components/HiddenVisually/HiddenVisually.d.ts

@@ -1,6 +1,3 @@
 import type * as T from "./HiddenVisually.types";
-declare const HiddenVisually: {
-    (props: T.Props): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare const HiddenVisually: React.FC<T.Props>;
 export default HiddenVisually;

package/dist/components/HiddenVisually/tests/HiddenVisually.stories.d.ts

@@ -1,9 +1,6 @@
 declare const _default: {
     title: string;
-    component: {
-        (props: import("./..").HiddenVisuallyProps): import("react").JSX.Element;
-        displayName: string;
-    };
+    component: import("react").FC<import("./..").HiddenVisuallyProps>;
     parameters: {
         iframe: {
             url: string;

package/dist/components/HiddenVisually/tests/HiddenVisually.test.stories.d.ts

@@ -1,10 +1,7 @@
 import { StoryObj } from "@storybook/react";
 declare const _default: {
     title: string;
-    component: {
-        (props: import("./..").HiddenVisuallyProps): import("react").JSX.Element;
-        displayName: string;
-    };
+    component: import("react").FC<import("./..").HiddenVisuallyProps>;
     parameters: {
         iframe: {
             url: string;

package/dist/components/Hotkey/Hotkey.d.ts

@@ -1,6 +1,3 @@
 import type * as T from "./Hotkey.types";
-declare const Hotkey: {
-    (props: T.Props): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare const Hotkey: React.FC<T.Props>;
 export default Hotkey;

package/dist/components/Hotkey/tests/Hotkey.stories.d.ts

@@ -1,9 +1,6 @@
 declare const _default: {
     title: string;
-    component: {
-        (props: import("..").HotkeyProps): import("react").JSX.Element;
-        displayName: string;
-    };
+    component: import("react").FC<import("..").HotkeyProps>;
     parameters: {
         iframe: {
             url: string;

package/dist/components/Hotkey/tests/Hotkey.test.stories.d.ts

@@ -1,10 +1,7 @@
 import { StoryObj } from "@storybook/react";
 declare const _default: {
     title: string;
-    component: {
-        (props: import("..").HotkeyProps): import("react").JSX.Element;
-        displayName: string;
-    };
+    component: import("react").FC<import("..").HotkeyProps>;
     parameters: {
         iframe: {
             url: string;

package/dist/components/Icon/Icon.d.ts

@@ -1,6 +1,4 @@
+import React from "react";
 import type * as T from "./Icon.types";
-declare const Icon: {
-    (props: T.Props): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare const Icon: React.FC<T.Props>;
 export default Icon;

package/dist/components/Icon/tests/Icon.stories.d.ts

@@ -1,9 +1,6 @@
 declare const _default: {
     title: string;
-    component: {
-        (props: import("./..").IconProps): import("react").JSX.Element;
-        displayName: string;
-    };
+    component: import("react").FC<import("./..").IconProps>;
     parameters: {
         iframe: {
             url: string;