reshaped 3.5.0 → 3.5.1-canary.0

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

@@ -1,10 +1,7 @@
 import { StoryObj } from "@storybook/react";
 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;

package/dist/components/Image/Image.d.ts

@@ -1,7 +1,4 @@
 import React from "react";
 import * as T from "./Image.types";
-declare const Image: {
-    (props: T.Props): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
-    displayName: string;
-};
+declare const Image: React.FC<T.Props>;
 export default Image;

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

@@ -2,10 +2,7 @@ import { StoryObj } from "@storybook/react";
 import { fn, Mock } from "@storybook/test";
 declare const _default: {
     title: string;
-    component: {
-        (props: import("..").ImageProps): string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
-        displayName: string;
-    };
+    component: import("react").FC<import("..").ImageProps>;
     parameters: {
         iframe: {
             url: string;

package/dist/components/Link/Link.d.ts

@@ -1,6 +1,7 @@
+import { type ActionableRef } from "../Actionable";
 declare const Link: import("react").ForwardRefExoticComponent<Pick<import("../Actionable").ActionableProps, "disabled" | "className" | "attributes" | "children" | "type" | "onClick" | "href" | "stopPropagation"> & {
     icon?: import("../Icon").IconProps["svg"];
     color?: "inherit" | "critical" | "primary" | "positive" | "warning";
     variant?: "plain" | "underline";
-} & import("react").RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+} & import("react").RefAttributes<ActionableRef>>;
 export default Link;

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

@@ -4,7 +4,7 @@ declare const _default: {
         icon?: import("../../Icon").IconProps["svg"];
         color?: "inherit" | "critical" | "primary" | "positive" | "warning";
         variant?: "plain" | "underline";
-    } & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+    } & import("react").RefAttributes<import("../../Actionable").ActionableRef>>;
     parameters: {
         iframe: {
             url: string;

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

@@ -6,7 +6,7 @@ declare const _default: {
         icon?: import("../../Icon").IconProps["svg"];
         color?: "inherit" | "critical" | "primary" | "positive" | "warning";
         variant?: "plain" | "underline";
-    } & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+    } & import("react").RefAttributes<import("../../Actionable").ActionableRef>>;
     parameters: {
         iframe: {
             url: string;

package/dist/components/Loader/Loader.d.ts

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

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

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

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

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

package/dist/components/MenuItem/MenuItemAligner.d.ts

@@ -1,6 +1,3 @@
 import { type AlignerProps } from "../_private/Aligner";
-declare const MenuItemAligner: {
-    (props: AlignerProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare const MenuItemAligner: React.FC<AlignerProps>;
 export default MenuItemAligner;

package/dist/components/Modal/Modal.d.ts

@@ -1,14 +1,9 @@
+import React from "react";
 import type * as T from "./Modal.types";
-declare const Modal: {
-    (props: T.Props): import("react/jsx-runtime").JSX.Element;
-    Title: {
-        (props: T.TitleProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    Subtitle: {
-        (props: T.SubtitleProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    displayName: string;
+declare const ModalTitle: React.FC<T.TitleProps>;
+declare const ModalSubtitle: React.FC<T.SubtitleProps>;
+declare const Modal: React.FC<T.Props> & {
+    Title: typeof ModalTitle;
+    Subtitle: typeof ModalSubtitle;
 };
 export default Modal;

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

@@ -2,17 +2,9 @@ import React from "react";
 import { type ModalProps } from "./..";
 declare const _default: {
     title: string;
-    component: {
-        (props: ModalProps): React.JSX.Element;
-        Title: {
-            (props: import("../Modal.types").TitleProps): React.JSX.Element;
-            displayName: string;
-        };
-        Subtitle: {
-            (props: import("../Modal.types").SubtitleProps): React.JSX.Element;
-            displayName: string;
-        };
-        displayName: string;
+    component: React.FC<ModalProps> & {
+        Title: React.FC<import("../Modal.types").TitleProps>;
+        Subtitle: React.FC<import("../Modal.types").SubtitleProps>;
     };
     parameters: {
         iframe: {

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

@@ -3,17 +3,9 @@ import { StoryObj } from "@storybook/react";
 import { fn } from "@storybook/test";
 declare const _default: {
     title: string;
-    component: {
-        (props: import("./..").ModalProps): React.JSX.Element;
-        Title: {
-            (props: import("../Modal.types").TitleProps): React.JSX.Element;
-            displayName: string;
-        };
-        Subtitle: {
-            (props: import("../Modal.types").SubtitleProps): React.JSX.Element;
-            displayName: string;
-        };
-        displayName: string;
+    component: React.FC<import("./..").ModalProps> & {
+        Title: React.FC<import("../Modal.types").TitleProps>;
+        Subtitle: React.FC<import("../Modal.types").SubtitleProps>;
     };
     parameters: {
         iframe: {

package/dist/components/NumberField/NumberField.d.ts

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

package/dist/components/NumberField/NumberField.module.css

@@ -1 +1 @@
-.field{font-variant-numeric:tabular-nums}.controls-wrapper{display:block}.controls{--rs-number-field-control-border-color:var(--rs-color-border-neutral);display:flex;flex-direction:column;inset-block:calc(var(--rs-text-field-p-v) * -1 + var(--rs-unit-x1));inset-inline-end:0;position:absolute;transition:border-color var(--rs-duration-fast) var(--rs-easing-standard)}.controls:has([aria-disabled]+[aria-disabled]){--rs-number-field-control-border-color:var(--rs-color-border-disabled)}.controls--size-small .control,.controls--size-small .controls-wrapper{width:var(--rs-unit-x4)}@media (pointer:coarse) and (hover:none){.controls--size-small .controls-wrapper{width:54px}}.controls--size-medium .control,.controls--size-medium .controls-wrapper{width:var(--rs-unit-x5)}@media (pointer:coarse) and (hover:none){.controls--size-medium .controls-wrapper{width:70px}}.controls--size-large .control{width:var(--rs-unit-x6)}.controls--size-large .controls-wrapper{width:var(--rs-unit-x5)}@media (pointer:coarse) and (hover:none){.controls--size-large .controls-wrapper{width:94px}}.controls--size-xlarge .control{width:var(--rs-unit-x7)}.controls--size-xlarge .controls-wrapper{width:var(--rs-unit-x6)}@media (pointer:coarse) and (hover:none){.controls--size-xlarge .controls-wrapper{width:110px}}.control{align-items:center;display:flex;flex-grow:1;height:50%;justify-content:center;touch-action:manipulation;transition:color var(--rs-duration-fast) var(--rs-easing-standard)}.control[aria-disabled]{color:var(--rs-color-foreground-disabled)}.control:not([aria-disabled]):hover{background:rgba(var(--rs-color-rgb-background-neutral),32%)}.icon--touch{display:none!important}.--outline .controls{border-inline-start:1px solid var(--rs-number-field-control-border-color);inset-inline-end:1px}.--outline .control:first-child{box-shadow:0 1px var(--rs-number-field-control-border-color)}@media (pointer:coarse) and (hover:none){.controls{flex-direction:row-reverse}.control{aspect-ratio:1;box-sizing:content-box;height:100%;touch-action:manipulation;width:auto!important}.icon--touch{display:block!important}.icon--mouse{display:none!important}.--outline .control:first-child{border-inline-start:1px solid var(--rs-color-border-neutral);box-shadow:none}}@media (--rs-viewport-m ){.controls--size-small--m .control,.controls--size-small--m .controls-wrapper{width:var(--rs-unit-x4)}@media (pointer:coarse) and (hover:none){.controls--size-small--m .controls-wrapper{width:54px}}.controls--size-medium--m .control,.controls--size-medium--m .controls-wrapper{width:var(--rs-unit-x5)}@media (pointer:coarse) and (hover:none){.controls--size-medium--m .controls-wrapper{width:70px}}.controls--size-large--m .control{width:var(--rs-unit-x6)}.controls--size-large--m .controls-wrapper{width:var(--rs-unit-x5)}@media (pointer:coarse) and (hover:none){.controls--size-large--m .controls-wrapper{width:94px}}.controls--size-xlarge--m .control{width:var(--rs-unit-x7)}.controls--size-xlarge--m .controls-wrapper{width:var(--rs-unit-x6)}@media (pointer:coarse) and (hover:none){.controls--size-xlarge--m .controls-wrapper{width:110px}}}@media (--rs-viewport-l ){.controls--size-small--l .control,.controls--size-small--l .controls-wrapper{width:var(--rs-unit-x4)}@media (pointer:coarse) and (hover:none){.controls--size-small--l .controls-wrapper{width:54px}}.controls--size-medium--l .control,.controls--size-medium--l .controls-wrapper{width:var(--rs-unit-x5)}@media (pointer:coarse) and (hover:none){.controls--size-medium--l .controls-wrapper{width:70px}}.controls--size-large--l .control{width:var(--rs-unit-x6)}.controls--size-large--l .controls-wrapper{width:var(--rs-unit-x5)}@media (pointer:coarse) and (hover:none){.controls--size-large--l .controls-wrapper{width:94px}}.controls--size-xlarge--l .control{width:var(--rs-unit-x7)}.controls--size-xlarge--l .controls-wrapper{width:var(--rs-unit-x6)}@media (pointer:coarse) and (hover:none){.controls--size-xlarge--l .controls-wrapper{width:110px}}}@media (--rs-viewport-xl ){.controls--size-small--xl .control,.controls--size-small--xl .controls-wrapper{width:var(--rs-unit-x4)}@media (pointer:coarse) and (hover:none){.controls--size-small--xl .controls-wrapper{width:54px}}.controls--size-medium--xl .control,.controls--size-medium--xl .controls-wrapper{width:var(--rs-unit-x5)}@media (pointer:coarse) and (hover:none){.controls--size-medium--xl .controls-wrapper{width:70px}}.controls--size-large--xl .control{width:var(--rs-unit-x6)}.controls--size-large--xl .controls-wrapper{width:var(--rs-unit-x5)}@media (pointer:coarse) and (hover:none){.controls--size-large--xl .controls-wrapper{width:94px}}.controls--size-xlarge--xl .control{width:var(--rs-unit-x7)}.controls--size-xlarge--xl .controls-wrapper{width:var(--rs-unit-x6)}@media (pointer:coarse) and (hover:none){.controls--size-xlarge--xl .controls-wrapper{width:110px}}}
+.field{font-variant-numeric:tabular-nums}.controls-wrapper{display:block}.controls{--rs-number-field-control-border-color:var(--rs-color-border-neutral);display:flex;flex-direction:column;inset-block:calc(var(--rs-text-field-p-v) * -1 + var(--rs-unit-x1));inset-inline-end:0;position:absolute;transition:border-color var(--rs-duration-fast) var(--rs-easing-standard)}.controls:has([aria-disabled]+[aria-disabled]){--rs-number-field-control-border-color:var(--rs-color-border-disabled)}.controls--size-small .control,.controls--size-small .controls-wrapper{width:var(--rs-unit-x4)}@media (pointer:coarse) and (hover:none){.controls--size-small .controls-wrapper{width:54px}}.controls--size-medium .control,.controls--size-medium .controls-wrapper{width:var(--rs-unit-x5)}@media (pointer:coarse) and (hover:none){.controls--size-medium .controls-wrapper{width:70px}}.controls--size-large .control{width:var(--rs-unit-x6)}.controls--size-large .controls-wrapper{width:var(--rs-unit-x5)}@media (pointer:coarse) and (hover:none){.controls--size-large .controls-wrapper{width:94px}}.controls--size-xlarge .control{width:var(--rs-unit-x7)}.controls--size-xlarge .controls-wrapper{width:var(--rs-unit-x6)}@media (pointer:coarse) and (hover:none){.controls--size-xlarge .controls-wrapper{width:110px}}.control{align-items:center;display:flex;flex-grow:1;height:50%;justify-content:center;touch-action:manipulation;transition:color var(--rs-duration-fast) var(--rs-easing-standard);user-select:none;-webkit-user-select:none}.control[aria-disabled]{color:var(--rs-color-foreground-disabled)}.control:not([aria-disabled]):hover{background:rgba(var(--rs-color-rgb-background-neutral),32%)}.icon--touch{display:none!important}.--outline .controls{border-inline-start:1px solid var(--rs-number-field-control-border-color);inset-inline-end:1px}.--outline .control:first-child{box-shadow:0 1px var(--rs-number-field-control-border-color)}@media (pointer:coarse) and (hover:none){.controls{flex-direction:row-reverse}.control{aspect-ratio:1;box-sizing:content-box;height:100%;touch-action:manipulation;width:auto!important}.icon--touch{display:block!important}.icon--mouse{display:none!important}.--outline .control:first-child{border-inline-start:1px solid var(--rs-color-border-neutral);box-shadow:none}}@media (--rs-viewport-m ){.controls--size-small--m .control,.controls--size-small--m .controls-wrapper{width:var(--rs-unit-x4)}@media (pointer:coarse) and (hover:none){.controls--size-small--m .controls-wrapper{width:54px}}.controls--size-medium--m .control,.controls--size-medium--m .controls-wrapper{width:var(--rs-unit-x5)}@media (pointer:coarse) and (hover:none){.controls--size-medium--m .controls-wrapper{width:70px}}.controls--size-large--m .control{width:var(--rs-unit-x6)}.controls--size-large--m .controls-wrapper{width:var(--rs-unit-x5)}@media (pointer:coarse) and (hover:none){.controls--size-large--m .controls-wrapper{width:94px}}.controls--size-xlarge--m .control{width:var(--rs-unit-x7)}.controls--size-xlarge--m .controls-wrapper{width:var(--rs-unit-x6)}@media (pointer:coarse) and (hover:none){.controls--size-xlarge--m .controls-wrapper{width:110px}}}@media (--rs-viewport-l ){.controls--size-small--l .control,.controls--size-small--l .controls-wrapper{width:var(--rs-unit-x4)}@media (pointer:coarse) and (hover:none){.controls--size-small--l .controls-wrapper{width:54px}}.controls--size-medium--l .control,.controls--size-medium--l .controls-wrapper{width:var(--rs-unit-x5)}@media (pointer:coarse) and (hover:none){.controls--size-medium--l .controls-wrapper{width:70px}}.controls--size-large--l .control{width:var(--rs-unit-x6)}.controls--size-large--l .controls-wrapper{width:var(--rs-unit-x5)}@media (pointer:coarse) and (hover:none){.controls--size-large--l .controls-wrapper{width:94px}}.controls--size-xlarge--l .control{width:var(--rs-unit-x7)}.controls--size-xlarge--l .controls-wrapper{width:var(--rs-unit-x6)}@media (pointer:coarse) and (hover:none){.controls--size-xlarge--l .controls-wrapper{width:110px}}}@media (--rs-viewport-xl ){.controls--size-small--xl .control,.controls--size-small--xl .controls-wrapper{width:var(--rs-unit-x4)}@media (pointer:coarse) and (hover:none){.controls--size-small--xl .controls-wrapper{width:54px}}.controls--size-medium--xl .control,.controls--size-medium--xl .controls-wrapper{width:var(--rs-unit-x5)}@media (pointer:coarse) and (hover:none){.controls--size-medium--xl .controls-wrapper{width:70px}}.controls--size-large--xl .control{width:var(--rs-unit-x6)}.controls--size-large--xl .controls-wrapper{width:var(--rs-unit-x5)}@media (pointer:coarse) and (hover:none){.controls--size-large--xl .controls-wrapper{width:94px}}.controls--size-xlarge--xl .control{width:var(--rs-unit-x7)}.controls--size-xlarge--xl .controls-wrapper{width:var(--rs-unit-x6)}@media (pointer:coarse) and (hover:none){.controls--size-xlarge--xl .controls-wrapper{width:110px}}}

package/dist/components/NumberField/NumberFieldControlled.d.ts

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

package/dist/components/NumberField/NumberFieldUncontrolled.d.ts

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

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

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

package/dist/components/Overlay/Overlay.d.ts

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

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

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

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

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

package/dist/components/Pagination/Pagination.d.ts

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

package/dist/components/Pagination/PaginationControlled.d.ts

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

package/dist/components/Pagination/PaginationUncontrolled.d.ts

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

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

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

package/dist/components/Pagination/tests/Pagination.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("./..").PaginationProps): import("react").JSX.Element;
-        displayName: string;
-    };
+    component: import("react").FC<import("./..").PaginationProps>;
     parameters: {
         iframe: {
             url: string;

package/dist/components/PinField/PinField.d.ts

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

package/dist/components/PinField/PinFieldControlled.d.ts

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

package/dist/components/PinField/PinFieldUncontrolled.d.ts

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

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

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

package/dist/components/PinField/tests/PinField.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("./..").PinFieldProps): import("react").JSX.Element;
-        displayName: string;
-    };
+    component: import("react").FC<import("./..").PinFieldProps>;
     parameters: {
         iframe: {
             url: string;

package/dist/components/Popover/Popover.d.ts

@@ -1,19 +1,10 @@
+import Flyout from "../_private/Flyout";
 import { type DismissibleProps } from "../Dismissible";
 import type * as T from "./Popover.types";
-declare const Popover: {
-    (props: T.Props): import("react/jsx-runtime").JSX.Element;
-    Dismissible: {
-        (props: 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: import("../_private/Flyout").FlyoutContentProps): import("react/jsx-runtime").JSX.Element | null;
-        displayName: string;
-    };
-    displayName: string;
+declare const Popover: React.FC<T.Props> & {
+    Dismissible: typeof PopoverDismissible;
+    Trigger: typeof Flyout.Trigger;
+    Content: typeof Flyout.Content;
 };
+declare const PopoverDismissible: React.FC<DismissibleProps>;
 export default Popover;

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

@@ -1,20 +1,9 @@
 declare const _default: {
     title: string;
-    component: {
-        (props: import("./..").PopoverProps): 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("../../_private/Flyout").FlyoutContentProps): import("react").JSX.Element | null;
-            displayName: string;
-        };
-        displayName: string;
+    component: import("react").FC<import("./..").PopoverProps> & {
+        Dismissible: import("react").FC<import("../../Dismissible").DismissibleProps>;
+        Trigger: import("react").FC<import("../../_private/Flyout").FlyoutTriggerProps>;
+        Content: import("react").FC<import("../../_private/Flyout").FlyoutContentProps>;
     };
     parameters: {
         iframe: {

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

@@ -2,21 +2,10 @@ import { StoryObj } from "@storybook/react";
 import { fn } from "@storybook/test";
 declare const _default: {
     title: string;
-    component: {
-        (props: import("./..").PopoverProps): 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("../../_private/Flyout").FlyoutContentProps): import("react").JSX.Element | null;
-            displayName: string;
-        };
-        displayName: string;
+    component: import("react").FC<import("./..").PopoverProps> & {
+        Dismissible: import("react").FC<import("../../Dismissible").DismissibleProps>;
+        Trigger: import("react").FC<import("../../_private/Flyout").FlyoutTriggerProps>;
+        Content: import("react").FC<import("../../_private/Flyout").FlyoutContentProps>;
     };
     parameters: {
         iframe: {

package/dist/components/Progress/Progress.d.ts

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

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

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

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

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

package/dist/components/ProgressIndicator/ProgressIndicator.d.ts

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

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

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

package/dist/components/Radio/Radio.d.ts

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

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

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

package/dist/components/Radio/tests/Radio.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("./..").RadioProps): import("react").JSX.Element;
-        displayName: string;
-    };
+    component: import("react").FC<import("./..").RadioProps>;
     parameters: {
         iframe: {
             url: string;

package/dist/components/RadioGroup/RadioGroup.d.ts

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

package/dist/components/RadioGroup/RadioGroupControlled.d.ts

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

package/dist/components/RadioGroup/RadioGroupUncontrolled.d.ts

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

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

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

package/dist/components/RadioGroup/tests/RadioGroup.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("./..").RadioGroupProps): import("react").JSX.Element;
-        displayName: string;
-    };
+    component: import("react").FC<import("./..").RadioGroupProps>;
     parameters: {
         iframe: {
             url: string;

package/dist/components/Reshaped/Reshaped.d.ts

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