@trackunit/react-components 1.8.22 → 1.8.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.8.22",
+  "version": "1.8.24",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -17,12 +17,12 @@
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.6.51",
-    "@trackunit/css-class-variance-utilities": "1.6.49",
-    "@trackunit/shared-utils": "1.8.49",
-    "@trackunit/ui-icons": "1.6.48",
-    "@trackunit/react-table-pagination": "1.6.48",
-    "@trackunit/react-test-setup": "1.3.49",
+    "@trackunit/ui-design-tokens": "1.6.52",
+    "@trackunit/css-class-variance-utilities": "1.6.50",
+    "@trackunit/shared-utils": "1.8.50",
+    "@trackunit/ui-icons": "1.6.49",
+    "@trackunit/react-table-pagination": "1.6.49",
+    "@trackunit/react-test-setup": "1.3.50",
     "@tanstack/react-router": "1.114.29"
   },
   "module": "./index.esm.js",

package/src/common/PackageNameStoryComponent.d.ts

@@ -1,3 +1,4 @@
+import { ReactElement } from "react";
 interface PackageNameStoryComponentProps {
     packageJSON?: {
         name?: string;
@@ -7,5 +8,5 @@ interface PackageNameStoryComponentProps {
 /**
  * A component used to display the package name and version in the Storybook docs.
  */
-export declare const PackageNameStoryComponent: ({ packageJSON }: PackageNameStoryComponentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PackageNameStoryComponent: ({ packageJSON }: PackageNameStoryComponentProps) => ReactElement;
 export {};

package/src/components/Alert/Alert.d.ts

@@ -1,5 +1,5 @@
 import { IntentColors } from "@trackunit/ui-design-tokens";
-import { ReactNode } from "react";
+import { ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
 export type AlertActionType = "primary" | "secondary";
 export type AlertAction = {
@@ -50,4 +50,4 @@ export interface AlertProps extends CommonProps {
  * @param {AlertProps} props - The props for the Alert component
  * @returns {ReactElement} Alert component
  */
-export declare const Alert: ({ color, title, className, children, primaryAction, secondaryAction, onClose, dataTestId, autoScroll, actionsInline, }: AlertProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Alert: ({ color, title, className, children, primaryAction, secondaryAction, onClose, dataTestId, autoScroll, actionsInline, }: AlertProps) => ReactElement;

package/src/components/Badge/Badge.d.ts

@@ -1,4 +1,5 @@
 import { ThemeColors } from "@trackunit/ui-design-tokens";
+import { ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
 type BadgeColors = Extract<ThemeColors, "primary" | "danger" | "warning">;
 interface BaseBadgeProps extends CommonProps {
@@ -42,5 +43,5 @@ export type BadgeProps = BaseBadgeProps;
  * @param {BadgeProps} props - The props for the Badge component
  * @returns {ReactElement} Badge component
  */
-export declare const Badge: ({ color, compact, className, count, max, hideZero, dataTestId, }: BadgeProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const Badge: ({ color, compact, className, count, max, hideZero, dataTestId, }: BadgeProps) => ReactElement | null;
 export {};

package/src/components/Breadcrumb/Breadcrumb.d.ts

@@ -1,3 +1,4 @@
+import { ReactElement } from "react";
 import { BreadcrumbContainerProps, BreadcrumbProps } from "./utils/types";
 /**
  * The breadcrumb component shows a user's location in a website or application. Breadcrumbs are particularly useful when a large amount of content is organized in a hierarchical manner. They streamline navigation, minimize the steps required to revisit previous pages, and offer contextual insights to the users.
@@ -12,10 +13,10 @@ import { BreadcrumbContainerProps, BreadcrumbProps } from "./utils/types";
  * @param {BreadcrumbProps} props - The props for the Breadcrumb component
  * @returns {ReactElement} Breadcrumb component
  */
-export declare const Breadcrumb: ({ className, dataTestId, breadcrumbItems, back }: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Breadcrumb: ({ className, dataTestId, breadcrumbItems, back }: BreadcrumbProps) => ReactElement;
 /**
  * BreadcrumbContainer is a helper component that renders the breadcrumb items based on the screen size.
  *
  * @param {BreadcrumbContainerProps} props - The props for the BreadcrumbContainer component
  */
-export declare const BreadcrumbContainer: ({ dataTestId, breadcrumbItems }: BreadcrumbContainerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BreadcrumbContainer: ({ dataTestId, breadcrumbItems }: BreadcrumbContainerProps) => ReactElement;

package/src/components/Breadcrumb/BreadcrumbForLargeScreen.d.ts

@@ -1,5 +1,6 @@
+import { ReactElement } from "react";
 import { BreadcrumbContainerProps } from "./utils/types";
 /**
  * BreadcrumbForLargeScreen is a helper component that renders the breadcrumb items for large screens.
  */
-export declare const BreadcrumbForLargeScreen: ({ dataTestId, breadcrumbItems }: BreadcrumbContainerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BreadcrumbForLargeScreen: ({ dataTestId, breadcrumbItems }: BreadcrumbContainerProps) => ReactElement;

package/src/components/Breadcrumb/BreadcrumbForMediumScreen.d.ts

@@ -1,5 +1,6 @@
+import { ReactElement } from "react";
 import { BreadcrumbContainerProps } from "./utils/types";
 /**
  * BreadcrumbForMediumScreen is a helper component that renders the breadcrumb items for medium screens.
  */
-export declare const BreadcrumbForMediumScreen: ({ dataTestId, breadcrumbItems }: BreadcrumbContainerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BreadcrumbForMediumScreen: ({ dataTestId, breadcrumbItems }: BreadcrumbContainerProps) => ReactElement;

package/src/components/Breadcrumb/BreadcrumbForSmallScreen.d.ts

@@ -1,5 +1,6 @@
+import { ReactElement } from "react";
 import { BreadcrumbContainerProps } from "./utils/types";
 /**
  * BreadcrumbForSmallScreen is a helper component that renders the breadcrumb items for small screens.
  */
-export declare const BreadcrumbForSmallScreen: ({ dataTestId, breadcrumbItems }: BreadcrumbContainerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BreadcrumbForSmallScreen: ({ dataTestId, breadcrumbItems }: BreadcrumbContainerProps) => ReactElement;

package/src/components/Breadcrumb/BreadcrumbItem.d.ts

@@ -1,5 +1,6 @@
+import { ReactElement } from "react";
 import { BreadcrumbItemRenderProps } from "./utils/types";
 /**
  * BreadcrumbItem is a helper component that renders the individual breadcrumb item.
  */
-export declare const BreadcrumbItem: ({ item, dataTestId }: BreadcrumbItemRenderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BreadcrumbItem: ({ item, dataTestId }: BreadcrumbItemRenderProps) => ReactElement;

package/src/components/Card/Card.d.ts

@@ -1,4 +1,4 @@
-import { InputHTMLAttributes, MouseEventHandler, ReactNode } from "react";
+import { InputHTMLAttributes, MouseEventHandler, ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
 export declare const ROLE_CARD = "region";
 export interface CardProps extends CommonProps, InputHTMLAttributes<HTMLDivElement> {
@@ -30,4 +30,4 @@ export interface CardProps extends CommonProps, InputHTMLAttributes<HTMLDivEleme
  * @param {CardProps} props - The props for the Card component
  * @returns {ReactElement} Card component
  */
-export declare const Card: ({ children, onClick, fullHeight, onMouseEnter, onMouseLeave, className, dataTestId, ...rest }: CardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Card: ({ children, onClick, fullHeight, onMouseEnter, onMouseLeave, className, dataTestId, ...rest }: CardProps) => ReactElement;

package/src/components/Card/CardBody.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactElement, ReactNode } from "react";
 import { CommonProps, Density } from "../../common";
 export interface CardBodyProps extends CommonProps {
     /**
@@ -30,4 +30,4 @@ export interface CardBodyProps extends CommonProps {
  * @param {CardBodyProps} props - The props for the CardBody component
  * @returns {ReactElement} CardBody component
  */
-export declare const CardBody: ({ density, children, dataTestId, className, direction, disableGap, id, }: CardBodyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CardBody: ({ density, children, dataTestId, className, direction, disableGap, id, }: CardBodyProps) => ReactElement;

package/src/components/Card/CardFooter.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactElement, ReactNode } from "react";
 import { CommonProps, Density } from "../../common";
 export interface CardFooterProps extends CommonProps {
     /**
@@ -22,4 +22,4 @@ export interface CardFooterProps extends CommonProps {
  * @param {CardFooterProps} props - The props for the CardFooter component
  * @returns {ReactElement} CardFooter component
  */
-export declare const CardFooter: ({ dataTestId, className, children, density, hideSeparator }: CardFooterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CardFooter: ({ dataTestId, className, children, density, hideSeparator, }: CardFooterProps) => ReactElement;

package/src/components/Card/CardHeader.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactElement, ReactNode } from "react";
 import { CommonProps, Density } from "../../common";
 import { HeadingVariant } from "../Heading/Heading";
 export interface CardHeaderProps extends CommonProps {
@@ -14,7 +14,7 @@ export interface CardHeaderProps extends CommonProps {
      */
     headingVariant?: HeadingVariant;
     /** Adds an extra heading below the main heading. */
-    subHeading?: string | ReactNode;
+    subHeading?: ReactNode;
     /**
      * Items to render next to the heading
      */
@@ -44,4 +44,4 @@ export interface CardHeaderProps extends CommonProps {
  * @param {CardHeaderProps} props - The props for the CardHeader component
  * @returns {ReactElement} CardHeader component
  */
-export declare const CardHeader: ({ heading, headingVariant, subHeading, onClose, dataTestId, className, children, accessories, actions, density, hideSeparator, }: CardHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CardHeader: ({ heading, headingVariant, subHeading, onClose, dataTestId, className, children, accessories, actions, density, hideSeparator, }: CardHeaderProps) => ReactElement;

package/src/components/Collapse/Collapse.d.ts

@@ -1,4 +1,4 @@
-import { MouseEvent, ReactNode } from "react";
+import { MouseEvent, ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
 export interface CollapseProps extends CommonProps {
     id: string;
@@ -50,4 +50,4 @@ export interface CollapseProps extends CommonProps {
  * @param {CollapseProps} props - The props for the Collapse component
  * @returns {ReactElement} Collapse component
  */
-export declare const Collapse: ({ id, initialExpanded, onToggle, label, children, className, headerClassName, headerAddon, dataTestId, animate, extraPadding, }: CollapseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Collapse: ({ id, initialExpanded, onToggle, label, children, className, headerClassName, headerAddon, dataTestId, animate, extraPadding, }: CollapseProps) => ReactElement;

package/src/components/CompletionStatusIndicator/CompletionStatusIndicator.d.ts

@@ -1,3 +1,4 @@
+import { ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
 export interface CompletionStatusIndicatorProps extends CommonProps {
     loading: boolean;
@@ -17,4 +18,4 @@ export interface CompletionStatusIndicatorProps extends CommonProps {
  * @param {boolean} props.warning - Indicates if the process has a warning.
  * @param {boolean} props.success - Indicates if the process was successful.
  */
-export declare const CompletionStatusIndicator: ({ loading, error, success, ...rest }: CompletionStatusIndicatorProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const CompletionStatusIndicator: ({ loading, error, success, ...rest }: CompletionStatusIndicatorProps) => ReactElement | null;

package/src/components/CopyableText/CopyableText.d.ts

@@ -1,3 +1,4 @@
+import { ReactElement } from "react";
 import { CommonProps } from "../../common";
 export interface CopyableTextProps extends CommonProps {
     /**
@@ -17,4 +18,4 @@ export interface CopyableTextProps extends CommonProps {
  * @param {CopyableTextProps} props - The props for the CopyableText component
  * @returns {ReactElement} CopyableText component
  */
-export declare const CopyableText: ({ text, alternativeText, dataTestId, className }: CopyableTextProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CopyableText: ({ text, alternativeText, dataTestId, className }: CopyableTextProps) => ReactElement;

package/src/components/EmptyState/EmptyState.d.ts

@@ -1,3 +1,4 @@
+import { ReactElement } from "react";
 import { CommonProps } from "../../common";
 type EmptyStateImage = "WORKER_WITH_SIGN" | "ROAD_BLOCK" | "BUILDING_ERROR" | "WALL_CONSTRUCTION" | "PHONE_LOCK_SECURITY" | "SEARCH_DOCUMENT";
 type EmptyStateButtonAction = {
@@ -30,5 +31,5 @@ export interface EmptyStateProps extends CommonProps {
  * - For guidance purposes (e.g., onboarding, adjusting filters, exploring alternative approaches).
  * - In celebratory instances (e.g., no new notifications, services up to date).
  */
-export declare const EmptyState: ({ description, altText, image, customImageSrc, loading, dataTestId, className, primaryAction, secondaryAction, additionalHelpAction, }: EmptyStateProps) => import("react/jsx-runtime").JSX.Element;
+export declare const EmptyState: ({ description, altText, image, customImageSrc, loading, dataTestId, className, primaryAction, secondaryAction, additionalHelpAction, }: EmptyStateProps) => ReactElement;
 export {};

package/src/components/Highlight/Highlight.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, Ref } from "react";
+import { ReactElement, ReactNode, Ref } from "react";
 import { CommonProps, Size } from "../../common";
 export type HighlightSize = Extract<Size, "small" | "medium">;
 export interface HighlightProps extends CommonProps {
@@ -31,6 +31,6 @@ export interface HighlightProps extends CommonProps {
  * @returns {ReactElement} highlight component
  */
 export declare const Highlight: {
-    ({ className, dataTestId, children, size, color, ref, }: HighlightProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, dataTestId, children, size, color, ref, }: HighlightProps): ReactElement;
     displayName: string;
 };

package/src/components/Icon/Icon.d.ts

@@ -1,6 +1,6 @@
 import { ActivityColors, CriticalityColors, GeneralColors, IntentColors, RentalStatusColors, SitesColors, UtilizationColors } from "@trackunit/ui-design-tokens";
 import { IconName } from "@trackunit/ui-icons";
-import { CSSProperties } from "react";
+import { CSSProperties, ReactElement } from "react";
 import { CommonProps, Size } from "../../common";
 import { AriaProps } from "../../common/AriaProps";
 export type IconColors = IntentColors | GeneralColors | CriticalityColors | ActivityColors | UtilizationColors | SitesColors | RentalStatusColors;
@@ -318,5 +318,5 @@ export type IconProps = DiscriminatedIconProps & CommonProps & AriaProps & {
  * @param {IconProps} props - The props for the Icon component
  * @returns {ReactElement} Icon component
  */
-export declare const Icon: ({ name, size, className, dataTestId, color, onClick, type, style, forwardedRef, ariaLabel, fontSize, ariaLabelledBy, ariaDescribedBy, ariaHidden, }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Icon: ({ name, size, className, dataTestId, color, onClick, type, style, forwardedRef, ariaLabel, fontSize, ariaLabelledBy, ariaDescribedBy, ariaHidden, }: IconProps) => ReactElement;
 export {};

package/src/components/InteractableItem/InteractableItem.variants.d.ts

@@ -14,7 +14,7 @@
  */
 export declare const cvaInteractableItem: (props?: ({
     cursor?: "default" | "pointer" | "auto" | "help" | "zoom-in" | "zoom-out" | "not-allowed" | null | undefined;
-    selected?: boolean | "auto" | null | undefined;
+    selection?: "auto" | "selected" | "unselected" | null | undefined;
     disabled?: boolean | null | undefined;
-    focused?: boolean | "auto" | null | undefined;
+    focus?: "auto" | "focused" | "unfocused" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/KPICard/KPICard.d.ts

@@ -30,4 +30,4 @@ export interface KPICardProps extends MappedOmit<KPIProps, "variant"> {
  * @param {KPICardProps} props - The props for the KPICard component
  * @returns {ReactElement} KPICard component
  */
-export declare const KPICard: ({ isActive, onClick, className, dataTestId, children, iconName, iconColor, ...rest }: KPICardProps) => ReactElement;
+export declare const KPICard: ({ isActive, onClick, className, dataTestId, children, iconName, iconColor, loading, ...rest }: KPICardProps) => ReactElement;

package/src/components/{VirtualizedList/VirtualizedList.d.ts → List/List.d.ts}

@@ -2,10 +2,10 @@ import { VariantProps } from "@trackunit/css-class-variance-utilities";
 import { RelayPagination } from "@trackunit/react-table-pagination";
 import { ReactElement, RefObject } from "react";
 import { CommonProps } from "../../common/CommonProps";
-import { cvaVirtualizedListItem } from "./VirtualizedList.variants";
-type Separator = NonNullable<VariantProps<typeof cvaVirtualizedListItem>["separator"]>;
+import { cvaListItem } from "./List.variants";
+type Separator = NonNullable<VariantProps<typeof cvaListItem>["separator"]>;
 type LoadingIndicator = "spinner" | "skeletonLines";
-export interface VirtualizedListProps extends CommonProps {
+export interface ListProps extends CommonProps {
     count: number;
     rowHeight?: number;
     pagination?: RelayPagination;
@@ -30,5 +30,5 @@ export interface VirtualizedListProps extends CommonProps {
  * @property {loadingIndicator} [loadingIndicator="spinner"] - The type of loading indicator in the list.
  * @property {skeletonLinesHeight} [skeletonLinesHeight="2rem"] - The height of the skeleton lines.
  */
-export declare const VirtualizedList: ({ count, rowHeight, pagination, children, className, dataTestId, separator, loadingIndicator, skeletonLinesHeight, onRowClick, scrollRef, }: VirtualizedListProps) => import("react/jsx-runtime").JSX.Element;
+export declare const List: ({ count, rowHeight, pagination, children, className, dataTestId, separator, loadingIndicator, skeletonLinesHeight, onRowClick, scrollRef, }: ListProps) => ReactElement;
 export {};

package/src/components/{VirtualizedList/VirtualizedList.variants.d.ts → List/List.variants.d.ts}

@@ -1,7 +1,7 @@
-export declare const cvaVirtualizedListContainer: (props?: ({
+export declare const cvaListContainer: (props?: ({
     parentControlledScrollable?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaVirtualizedList: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaVirtualizedListItem: (props?: ({
+export declare const cvaList: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaListItem: (props?: ({
     separator?: "alternating" | "line" | "none" | "space" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/Menu/MenuDivider/MenuDivider.d.ts

@@ -1,4 +1,5 @@
+import { ReactElement } from "react";
 /**
  * The MenuDivider component is used to separate items in a menu list.
  */
-export declare const MenuDivider: () => import("react/jsx-runtime").JSX.Element;
+export declare const MenuDivider: () => ReactElement;

package/src/components/Menu/MenuItem/MenuItem.d.ts

@@ -1,5 +1,5 @@
 import { VariantProps } from "@trackunit/css-class-variance-utilities";
-import { MouseEventHandler, ReactNode } from "react";
+import { MouseEventHandler, ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../../common";
 import { cvaMenuItemStyle } from "./MenuItem.variants";
 export type MenuItemVariant = "primary" | "danger";
@@ -90,4 +90,4 @@ export interface MenuItemProps extends CommonProps {
  * @param {MenuItemProps} props - The props for the MenuItem component
  * @returns {ReactElement} MenuItem component
  */
-export declare const MenuItem: ({ className, dataTestId, label, children, selected, focused, prefix, suffix, disabled, onClick, stopPropagation, id, tabIndex, optionLabelDescription, optionPrefix, fieldSize, variant, }: MenuItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuItem: ({ className, dataTestId, label, children, selected, focused, prefix, suffix, disabled, onClick, stopPropagation, id, tabIndex, optionLabelDescription, optionPrefix, fieldSize, variant, }: MenuItemProps) => ReactElement;

package/src/components/Menu/MenuItem/MenuItem.variants.d.ts

@@ -2,9 +2,10 @@ import { type VariantProps } from "@trackunit/css-class-variance-utilities";
 import { MappedOmit } from "@trackunit/shared-utils";
 import { cvaInteractableItem } from "../../InteractableItem/InteractableItem.variants";
 import { MenuItemVariant } from "./MenuItem";
-type CvaMenuItemProps = Partial<MappedOmit<VariantProps<typeof cvaInteractableItem>, "cursor">> & {
+type CvaMenuItemProps = Partial<MappedOmit<VariantProps<typeof cvaInteractableItem>, "cursor" | "focus" | "selection">> & {
     variant?: MenuItemVariant;
-    selected: boolean | null | undefined;
+    selected: boolean | undefined;
+    focused: boolean | undefined;
     fieldSize?: VariantProps<typeof cvaMenuItemStyle>["fieldSize"];
 };
 /**

package/src/components/Menu/MoreMenu/MoreMenu.d.ts

@@ -1,5 +1,5 @@
 import { MakePropertyOptional, MappedOmit } from "@trackunit/shared-utils";
-import { ReactNode } from "react";
+import { ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../../common/CommonProps";
 import { IconProps } from "../../Icon/Icon";
 import { PopoverContentChildren, PopoverProps } from "../../Popover";
@@ -22,5 +22,5 @@ export interface MoreMenuProps extends CommonProps {
  * @param {MoreMenuProps} props - The props for the MoreMenu component
  * @returns {ReactElement} MoreMenu component
  */
-export declare const MoreMenu: ({ className, dataTestId, popoverProps, iconProps, iconButtonProps, customButton, customPortalId, children, }: MoreMenuProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MoreMenu: ({ className, dataTestId, popoverProps, iconProps, iconButtonProps, customButton, customPortalId, children, }: MoreMenuProps) => ReactElement;
 export {};

package/src/components/Page/Page.d.ts

@@ -1,5 +1,5 @@
 import { VariantProps } from "@trackunit/css-class-variance-utilities";
-import { ReactNode } from "react";
+import { ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common";
 import { cvaPage } from "./Page.variants";
 /**
@@ -17,4 +17,4 @@ export interface PageProps extends CommonProps {
 /**
  * Renders the page component. Adds padding and layout to the page.
  */
-export declare const Page: ({ layout, className, children, dataTestId }: PageProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Page: ({ layout, className, children, dataTestId }: PageProps) => ReactElement;

package/src/components/Page/PageContent.d.ts

@@ -1,5 +1,5 @@
 import { VariantProps } from "@trackunit/css-class-variance-utilities";
-import { ReactNode } from "react";
+import { ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common";
 import { cvaPageContent } from "./Page.variants";
 /**
@@ -20,5 +20,5 @@ interface PageContentProps extends CommonProps {
  * @param {PageContentProps} props - The component props.
  * @returns {ReactNode} - The rendered component.
  */
-export declare const PageContent: ({ className, children, dataTestId, layout }: PageContentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PageContent: ({ className, children, dataTestId, layout }: PageContentProps) => ReactElement;
 export {};

package/src/components/PageHeader/components/PageHeaderKpiMetrics.d.ts

@@ -1,4 +1,12 @@
+import { ReactElement } from "react";
 import { PageHeaderKpiMetricsType } from "../types";
+/**
+ * The PageHeaderKpiMetrics component is used to render the KPI metrics in the PageHeader component.
+ *
+ * @param {object} props - The props for the PageHeaderKpiMetrics component
+ * @param {Array<PageHeaderKpiMetricsType>} props.kpiMetrics - The KPI metrics to render
+ * @returns {ReactElement} PageHeaderKpiMetrics component
+ */
 export declare const PageHeaderKpiMetrics: ({ kpiMetrics }: {
     kpiMetrics: Array<PageHeaderKpiMetricsType>;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => ReactElement;

package/src/components/PageHeader/components/PageHeaderSecondaryActions.d.ts

@@ -1,3 +1,4 @@
+import { ReactElement } from "react";
 import { PageHeaderSecondaryActionType } from "../types";
 type ActionRendererProps = {
     action: PageHeaderSecondaryActionType;
@@ -12,9 +13,23 @@ type ActionRendererProps = {
      */
     externalOnClick?: () => void;
 };
-export declare function ActionRenderer({ action, isMenuItem, externalOnClick }: ActionRendererProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * The ActionRenderer component is used to render the action in the PageHeaderSecondaryActions component.
+ *
+ * @param {ActionRendererProps} props - The props for the ActionRenderer component
+ * @returns {ReactElement} ActionRenderer component
+ */
+export declare function ActionRenderer({ action, isMenuItem, externalOnClick }: ActionRendererProps): ReactElement;
+/**
+ * The PageHeaderSecondaryActions component is used to render the secondary actions in the PageHeader component.
+ *
+ * @param {object} props - The props for the PageHeaderSecondaryActions component
+ * @param {Array<PageHeaderSecondaryActionType>} props.actions - The secondary actions to render
+ * @param {boolean} [props.hasPrimaryAction] - Whether there is a primary action present
+ * @returns {ReactElement} PageHeaderSecondaryActions component
+ */
 export declare const PageHeaderSecondaryActions: ({ actions, hasPrimaryAction, }: {
     actions: Array<PageHeaderSecondaryActionType>;
     hasPrimaryAction?: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => ReactElement;
 export {};

package/src/components/PageHeader/components/PageHeaderTitle.d.ts

@@ -1,4 +1,13 @@
+import { ReactElement } from "react";
+/**
+ * The PageHeaderTitle component is used to display the title of the page header.
+ *
+ * @param {object} props - The props for the PageHeaderTitle component
+ * @param {string} props.title - The title of the page header
+ * @param {string} [props.dataTestId] - The data test id of the page header title
+ * @returns {ReactElement} PageHeaderTitle component
+ */
 export declare const PageHeaderTitle: ({ title, dataTestId }: {
     title: string;
     dataTestId?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => ReactElement;

package/src/components/Pagination/Pagination.d.ts

@@ -1,3 +1,4 @@
+import { ReactElement } from "react";
 export interface PaginationProps {
     /**
      * A go to previous page handler
@@ -58,4 +59,4 @@ export interface PaginationProps {
  * @param {PaginationProps} props - The props for the Pagination component
  * @returns {ReactElement} Pagination component
  */
-export declare const Pagination: ({ previousPage, nextPage, canPreviousPage, canNextPage, pageCount, pageIndex, loading, className, dataTestId, getTranslatedCount, onPageChange, cursorBase, }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Pagination: ({ previousPage, nextPage, canPreviousPage, canNextPage, pageCount, pageIndex, loading, className, dataTestId, getTranslatedCount, onPageChange, cursorBase, }: PaginationProps) => ReactElement;

package/src/components/Polygon/Polygon.d.ts

@@ -1,3 +1,4 @@
+import { ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
 type Point = [number, number];
 export interface PolygonProps extends CommonProps {
@@ -12,5 +13,5 @@ export interface PolygonProps extends CommonProps {
  * @param { PolygonProps} props - The props for the  Polygon component
  * @returns {ReactElement}  Polygon component
  */
-export declare const Polygon: ({ points, size, color, opaque, className, dataTestId }: PolygonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Polygon: ({ points, size, color, opaque, className, dataTestId, }: PolygonProps) => ReactElement;
 export {};

package/src/components/Popover/PopoverContent.d.ts

@@ -1,4 +1,4 @@
-import { HTMLProps, ReactNode, Ref } from "react";
+import { HTMLProps, ReactElement, ReactNode, Ref } from "react";
 import { CommonProps } from "../../common";
 export type PopoverContentChildren = ((close: () => void) => ReactNode) | ReactNode;
 export interface PopoverContentProps extends Omit<HTMLProps<HTMLDivElement>, "children">, CommonProps {
@@ -15,4 +15,4 @@ export interface PopoverContentProps extends Omit<HTMLProps<HTMLDivElement>, "ch
 /**
  *
  */
-export declare const PopoverContent: ({ className, dataTestId, children, portalId, ref: propRef, ...props }: PopoverContentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PopoverContent: ({ className, dataTestId, children, portalId, ref: propRef, ...props }: PopoverContentProps) => ReactElement;

package/src/components/Popover/PopoverTitle.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
 export interface PopoverTitleProps extends CommonProps {
     action?: ReactNode;
@@ -17,4 +17,4 @@ export interface PopoverTitleProps extends CommonProps {
  * @param {PopoverTitleProps} props - The props for the PopoverTitle component
  * @returns {ReactElement} PopoverTitle component
  */
-export declare const PopoverTitle: ({ children, action, divider, className, dataTestId }: PopoverTitleProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PopoverTitle: ({ children, action, divider, className, dataTestId, }: PopoverTitleProps) => ReactElement;

package/src/components/Popover/PopoverTrigger.d.ts

@@ -1,4 +1,4 @@
-import { HTMLProps, ReactNode, Ref } from "react";
+import { HTMLProps, ReactElement, ReactNode, Ref } from "react";
 interface PopoverTriggerProps extends HTMLProps<HTMLElement> {
     /**
      * When enabled the trigger will be rendered as a button
@@ -17,5 +17,5 @@ interface PopoverTriggerProps extends HTMLProps<HTMLElement> {
  * @param {PopoverTriggerProps} props - The props for the PopoverTrigger component
  * @returns {ReactElement} PopoverTrigger component
  */
-export declare const PopoverTrigger: ({ children, renderButton, ref: propRef, ...props }: PopoverTriggerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PopoverTrigger: ({ children, renderButton, ref: propRef, ...props }: PopoverTriggerProps) => ReactElement;
 export {};

package/src/components/Portal/Portal.d.ts

@@ -1,4 +1,5 @@
 import { FloatingPortalProps } from "@floating-ui/react";
+import { ReactElement } from "react";
 export type PortalProps = FloatingPortalProps;
 /**
  * Portals the floating element into a given container element
@@ -6,4 +7,4 @@ export type PortalProps = FloatingPortalProps;
  * document body -> div#portal-container.
  * alongside other portalled elements.
  */
-export declare const Portal: (props: FloatingPortalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Portal: (props: FloatingPortalProps) => ReactElement;

package/src/components/Sidebar/Sidebar.d.ts

@@ -54,4 +54,4 @@ export interface SidebarProps extends CommonProps {
  * @param {SidebarProps} props - The props for the Sidebar component
  * @returns {ReactElement} Sidebar component
  */
-export declare const Sidebar: ({ childContainerClassName, children, breakpoint, className, dataTestId, moreMenuProps, menuListProps, overflowThreshold, }: SidebarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Sidebar: ({ childContainerClassName, children, breakpoint, className, dataTestId, moreMenuProps, menuListProps, overflowThreshold, }: SidebarProps) => ReactElement;

package/src/components/Sidebar/useOverflowItems.d.ts

@@ -34,6 +34,6 @@ export type OverflowMap = {
  * @returns {object} The overflow items and the ref to the container.
  */
 export declare const useOverflowItems: ({ threshold, childUniqueIdentifierAttribute, children, }: OverflowItemsOptions) => {
-    overflowContainerRef: import("react").RefObject<HTMLDivElement | null>;
+    overflowContainerRef: React.RefObject<HTMLDivElement | null>;
     itemOverflowMap: OverflowMap;
 };

package/src/components/SkeletonLines/SkeletonLines.d.ts

@@ -1,3 +1,4 @@
+import { ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
 export interface SkeletonLinesProps extends CommonProps {
     /**
@@ -20,4 +21,4 @@ export interface SkeletonLinesProps extends CommonProps {
 /**
  * Display placeholder lines before the data gets loaded to reduce load-time frustration.
  */
-export declare const SkeletonLines: import("react").MemoExoticComponent<({ margin, lines, height, width, className, dataTestId }: SkeletonLinesProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const SkeletonLines: import("react").MemoExoticComponent<({ margin, lines, height, width, className, dataTestId, }: SkeletonLinesProps) => ReactElement>;

package/src/components/Spacer/Spacer.d.ts

@@ -1,3 +1,4 @@
+import { ReactElement } from "react";
 import { CommonProps, Size } from "../../common";
 export interface SpacerProps extends CommonProps {
     /**
@@ -16,4 +17,4 @@ export interface SpacerProps extends CommonProps {
  * @param {SpacerProps} props - The props for the Spacer component
  * @returns {ReactElement} Spacer component
  */
-export declare const Spacer: ({ size, border, dataTestId, className }: SpacerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Spacer: ({ size, border, dataTestId, className }: SpacerProps) => ReactElement;

package/src/components/Spinner/Spinner.d.ts

@@ -1,3 +1,4 @@
+import { ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
 import { Size } from "../../common/Size";
 type Centering = "horizontally" | "vertically" | "centered";
@@ -39,5 +40,5 @@ export interface SpinnerProps extends CommonProps {
  * @param {SpinnerProps} props - The props for the Spinner component
  * @returns {ReactElement} Spinner component
  */
-export declare const Spinner: ({ mode, size, centering, className, containerClassName, dataTestId, label, }: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Spinner: ({ mode, size, centering, className, containerClassName, dataTestId, label, }: SpinnerProps) => ReactElement;
 export {};

package/src/components/Tabs/Tab.d.ts

@@ -43,4 +43,4 @@ export interface TabProps extends TabsTriggerProps {
  * Wrapper for radix tab component.
  * We add a custom implementation of the asChild prop to make it easy to make the child element look like other tabs.
  */
-export declare const Tab: ({ value, isFullWidth, iconName, dataTestId, className, children, suffix, asChild, appendTabStylesToChildIfAsChild, ...rest }: TabProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tab: ({ value, isFullWidth, iconName, dataTestId, className, children, suffix, asChild, appendTabStylesToChildIfAsChild, ...rest }: TabProps) => ReactElement;