@trackunit/react-components 1.4.23 → 1.4.28

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

@@ -18,8 +18,8 @@ export interface CardFooterProps extends CommonProps {
  * A simple footer intended to use with Cards and Modals.
  * Currently only intended to contain Buttons.
  * The buttons justifies to the right, but if you style a button with "margin-right: auto" it will move to the left
- 
+ *
  * @param {CardFooterProps} props - The props for the CardFooter component
- * @returns {JSX.Element} CardFooter component
+ * @returns {ReactElement} CardFooter component
  */
 export declare const CardFooter: ({ dataTestId, className, children, density, hideSeparator }: CardFooterProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -40,8 +40,8 @@ export interface CardHeaderProps extends CommonProps {
 }
 /**
  * Header for Cards and Modals.
- 
+ *
  * @param {CardHeaderProps} props - The props for the CardHeader component
- * @returns {JSX.Element} 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;

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

@@ -48,6 +48,6 @@ export interface CollapseProps extends CommonProps {
  * - To creating hierarchy levels by nesting them within each other.
  *
  * @param {CollapseProps} props - The props for the Collapse component
- * @returns {JSX.Element} 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;

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

@@ -15,6 +15,6 @@ export interface CopyableTextProps extends CommonProps {
  * The CopyableText component is used where the user should have easy access to copy information.
  
  * @param {CopyableTextProps} props - The props for the CopyableText component
- * @returns {JSX.Element} CopyableText component
+ * @returns {ReactElement} CopyableText component
  */
 export declare const CopyableText: ({ text, alternativeText, dataTestId, className }: CopyableTextProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/EmptyValue/EmptyValue.d.ts

@@ -1,3 +1,4 @@
+import { ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
 export interface EmptyValueProps extends CommonProps {
 }
@@ -5,6 +6,6 @@ export interface EmptyValueProps extends CommonProps {
  *  Show intentionality in empty values in the UI
  *
  * @param {EmptyValueProps} props - The props for the EmptyValue component
- * @returns {JSX.Element} EmptyValue component
+ * @returns {ReactElement} EmptyValue component
  */
-export declare const EmptyValue: ({ className, dataTestId }: EmptyValueProps) => JSX.Element;
+export declare const EmptyValue: ({ className, dataTestId }: EmptyValueProps) => ReactElement;

package/src/components/ExternalLink/ExternalLink.d.ts

@@ -1,3 +1,4 @@
+import { MouseEvent, ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common";
 export interface ExternalLinkProps extends CommonProps {
     /**
@@ -7,7 +8,7 @@ export interface ExternalLinkProps extends CommonProps {
     /**
      * Child elements.
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
      * The text to display on the URL. Defaults to the url itself.
      */
@@ -20,12 +21,12 @@ export interface ExternalLinkProps extends CommonProps {
      * Used to specify the relationship between the link and the current document. Defaults to "noreferrer".
      */
     rel?: string;
-    onClick?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+    onClick?: (event: MouseEvent<HTMLAnchorElement, globalThis.MouseEvent>) => void;
 }
 /**
  *  The external link component is used to link to an external page outside the Trackunit Manager.
  
  * @param {ExternalLinkProps} props - The props for the external link component
- * @returns {JSX.Element} External Link component
+ * @returns {ReactElement} External Link component
  */
-export declare const ExternalLink: ({ rel, target, href, className, children, title, dataTestId, onClick, }: ExternalLinkProps) => JSX.Element;
+export declare const ExternalLink: ({ rel, target, href, className, children, title, dataTestId, onClick, }: ExternalLinkProps) => ReactElement;

package/src/components/Heading/Heading.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
 export type HeadingVariant = "primary" | "secondary" | "tertiary" | "subtitle";
 export interface HeadingProps extends CommonProps {
@@ -21,8 +21,8 @@ export interface HeadingProps extends CommonProps {
 }
 /**
  * The Heading is used for a heading of a section (h1,h2,h3,h4).
- 
+ *
  * @param {HeadingProps} props - The props for the Heading component
- * @returns {JSX.Element} Heading component
+ * @returns {ReactElement} Heading component
  */
-export declare const Heading: ({ variant, inverted, subtle, className, dataTestId, ...rest }: HeadingProps) => JSX.Element;
+export declare const Heading: ({ variant, inverted, subtle, className, dataTestId, ...rest }: HeadingProps) => ReactElement;

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

@@ -485,7 +485,7 @@ export type IconProps = DiscriminatedIconProps & CommonProps & AriaProps & {
  * - All the [HeroIcons](https://heroicons.dev/) as well as custom Trackunit icons are available.
  *
  * @param {IconProps} props - The props for the Icon component
- * @returns {JSX.Element} Icon component
+ * @returns {ReactElement} Icon component
  */
 export declare const Icon: ({ name, size, className, dataTestId, color, onClick, type, style, forwardedRef, ariaLabel, fontSize, ariaLabelledBy, ariaDescribedBy, }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/Indicator/Indicator.d.ts

@@ -1,10 +1,11 @@
 import { ActivityColors, CriticalityColors, GeneralColors, IntentColors, RentalStatusColors, SitesColors, UtilizationColors } from "@trackunit/ui-design-tokens";
+import { ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
 export interface IndicatorProps extends CommonProps {
     /**
      * The icon to be rendered inside the indicator component
      */
-    icon?: JSX.Element;
+    icon?: ReactElement;
     /**
      * A color token used to style the icon and the icon background
      */
@@ -40,6 +41,6 @@ export interface IndicatorProps extends CommonProps {
  * _**Do not use** indicators for non-essential information, or to communicate information unrelated to the state of an asset._
  
  * @param {IndicatorProps} props - The props for the Indicator component
- * @returns {JSX.Element} Indicator component
+ * @returns {ReactElement} Indicator component
  */
-export declare const Indicator: ({ dataTestId, icon, label, color, withBackground, withLabel, ping, size, className, ...rest }: IndicatorProps) => JSX.Element;
+export declare const Indicator: ({ dataTestId, icon, label, color, withBackground, withLabel, ping, size, className, ...rest }: IndicatorProps) => ReactElement;

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

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common";
 export interface KPICardProps extends CommonProps {
     /**
@@ -78,6 +78,6 @@ export interface KPICardProps extends CommonProps {
  * The KPICard component is used to display KPIs.
  *
  * @param {KPICardProps} props - The props for the KPICard component
- * @returns {JSX.Element} KPICard component
+ * @returns {ReactElement} KPICard component
  */
-export declare const KPICard: ({ asChild, title, value, loading, unit, className, dataTestId, tooltipLabel, isActive, variant, trend, onClick, ...rest }: KPICardProps) => JSX.Element;
+export declare const KPICard: ({ asChild, title, value, loading, unit, className, dataTestId, tooltipLabel, isActive, variant, trend, onClick, ...rest }: KPICardProps) => ReactElement;

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

@@ -1,3 +1,4 @@
+import { MouseEventHandler, ReactNode } from "react";
 import { VariantProps } from "@trackunit/css-class-variance-utilities";
 import { CommonProps } from "../../../common";
 import { cvaMenuItemStyle } from "./MenuItem.variants";
@@ -15,19 +16,19 @@ export interface MenuItemProps extends CommonProps {
      * The children element is a custom element that can be used to override the label.
      * If you use this prop, the label prop will be ignored.
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
      * An React element to render before the label.
      * This is typically used to render an icon.
      *
      */
-    prefix?: React.ReactNode;
+    prefix?: ReactNode;
     /**
      * An React element to render after the label.
      * This is typically used to render an icon.
      *
      */
-    suffix?: React.ReactNode;
+    suffix?: ReactNode;
     /**
      * An boolean flag to turn on/off selected state
      * This is typically used highlight that item is selected
@@ -40,7 +41,7 @@ export interface MenuItemProps extends CommonProps {
      *
      * @memberof MenuItemProps
      */
-    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    onClick?: MouseEventHandler<HTMLDivElement>;
     /**
      * A boolean prop to set menu item to disabled state
      * used in disabled select options
@@ -75,6 +76,6 @@ export interface MenuItemProps extends CommonProps {
  * The MenuItem component is used to display a menu, primarily meant to be used in a list form.
  *
  * @param {MenuItemProps} props - The props for the MenuItem component
- * @returns {JSX.Element} MenuItem component
+ * @returns {ReactElement} MenuItem component
  */
 export declare const MenuItem: ({ className, dataTestId, label, children, selected, prefix, suffix, disabled, onClick, stopPropagation, id, tabIndex, optionLabelDescription, fieldSize, variant, }: MenuItemProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,9 +1,10 @@
+import { ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../../common";
 export interface MenuListProps extends CommonProps {
     /**
      * List of menu items to be rendered.
      */
-    children: React.ReactNode;
+    children: ReactNode;
     /**
      * When enabled the menu list padding will be removed, and a grid will be applied to keep the first column "sticky".
      *
@@ -36,6 +37,6 @@ export interface MenuListProps extends CommonProps {
  * - Don’t use the MenuList to display single or multi-select items within form components. For dropdowns within select components, use SelectDropdown (component not available yet).
  *
  * @param {MenuListProps} props - The props for the MenuList component
- * @returns {JSX.Element} MenuList component
+ * @returns {ReactElement} MenuList component
  */
-export declare const MenuList: ({ dataTestId, className, children, withStickyHeader, isMulti, selectedItems: controlledSelectedItems, onSelectionChange, ...args }: MenuListProps) => JSX.Element;
+export declare const MenuList: ({ dataTestId, className, children, withStickyHeader, isMulti, selectedItems: controlledSelectedItems, onSelectionChange, ...args }: MenuListProps) => ReactElement;

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

@@ -20,7 +20,7 @@ export interface MoreMenuProps extends CommonProps {
  * Advice: fill it with MenuList
  *
  * @param {MoreMenuProps} props - The props for the MoreMenu component
- * @returns {JSX.Element} 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 {};

package/src/components/Notice/Notice.d.ts

@@ -1,10 +1,11 @@
 import { CriticalityColors, GeneralColors, IntentColors } from "@trackunit/ui-design-tokens";
+import { ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
 export interface NoticeProps extends CommonProps {
     /**
      * The icon to be rendered inside the indicator component
      */
-    icon: JSX.Element;
+    icon: ReactElement;
     /**
      * A color token used to style the icon and the icon background
      */
@@ -38,6 +39,6 @@ export interface NoticeProps extends CommonProps {
  * _**Do not use** notices for essential information (use `<Alert/>` instead), or to communicate information related to the state of an asset (use `<Indicator/>` instead)._
  
  * @param {NoticeProps} props - The props for the Notice component
- * @returns {JSX.Element} Notice component
+ * @returns {ReactElement} Notice component
  */
-export declare const Notice: ({ dataTestId, icon, label, color, withLabel, className, tooltipLabel, withTooltip, size, ...rest }: NoticeProps) => JSX.Element;
+export declare const Notice: ({ dataTestId, icon, label, color, withLabel, className, tooltipLabel, withTooltip, size, ...rest }: NoticeProps) => ReactElement;

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

@@ -8,6 +8,6 @@ import { PageHeaderProps } from "./types";
  * Tabs can be added to the PageHeader to allow users to navigate between different sections of the page.
  *
  * @param {PageHeaderProps} props - The props for the PageHeader component
- * @returns {JSX.Element} PageHeader component
+ * @returns {ReactElement} PageHeader component
  */
 export declare const PageHeader: ({ className, dataTestId, secondaryActions, showLoading, description, title, tagLabel, backTo, tagColor, tabsList, descriptionIcon, kpiMetrics, tagTooltipLabel, primaryAction, }: PageHeaderProps) => ReactElement;

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

@@ -56,6 +56,6 @@ export interface PaginationProps {
  * Pagination Description. It could be used when you need navigation for your paging feature.
  
  * @param {PaginationProps} props - The props for the Pagination component
- * @returns {JSX.Element} 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;

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

@@ -10,7 +10,7 @@ export interface PolygonProps extends CommonProps {
  *  Draws an svg Polygon from a set of points.
  *
  * @param { PolygonProps} props - The props for the  Polygon component
- * @returns {JSX.Element}  Polygon component
+ * @returns {ReactElement}  Polygon component
  */
 export declare const Polygon: ({ points, size, color, opaque, className, dataTestId }: PolygonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -23,7 +23,7 @@ type ModalCallback = {
  * To render the content of the popover, use the `<PopoverContent />` component.
  *
  * @param {PopoverProps} props The props for the popover
- * @returns {JSX.Element} A Popover Context Provider containing the children
+ * @returns {ReactElement} A Popover Context Provider containing the children
  */
 export declare const Popover: ({ children, isModal, ...restOptions }: {
     children: React.ReactNode | ((modal: ModalCallback) => React.ReactNode);

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

@@ -1,4 +1,4 @@
-import { HTMLProps, ReactNode } from "react";
+import { HTMLProps, ReactNode, Ref } from "react";
 import { CommonProps } from "../../common";
 export type PopoverContentChildren = ((close: () => void) => ReactNode) | ReactNode;
 export interface PopoverContentProps extends Omit<HTMLProps<HTMLDivElement>, "children">, CommonProps {
@@ -7,5 +7,12 @@ export interface PopoverContentProps extends Omit<HTMLProps<HTMLDivElement>, "ch
      * Custom dom id to use for portalling the popover content
      */
     portalId?: string;
+    /**
+     * A ref for the component
+     */
+    ref?: Ref<HTMLDivElement>;
 }
-export declare const PopoverContent: import("react").ForwardRefExoticComponent<Omit<PopoverContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ *
+ */
+export declare const PopoverContent: ({ className, dataTestId, children, portalId, ref: propRef, ...props }: PopoverContentProps) => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -1,11 +1,21 @@
-interface PopoverTriggerProps {
-    /** Any elements that when clicked should open the popover */
-    children: React.ReactNode;
+import { HTMLProps, ReactNode, Ref } from "react";
+interface PopoverTriggerProps extends HTMLProps<HTMLElement> {
     /**
      * When enabled the trigger will be rendered as a button
      * note that not all elements are valid children of a button
      */
+    children: ReactNode;
     renderButton?: boolean;
+    /**
+     * A ref for the component
+     */
+    ref?: Ref<HTMLElement>;
 }
-export declare const PopoverTrigger: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLProps<HTMLElement> & PopoverTriggerProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+/**
+ * The PopoverTrigger component is used to trigger the popover.
+ *
+ * @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 {};

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

@@ -1,5 +1,5 @@
 import { ExtendedRefs, ReferenceType, UseDismissProps, UseFloatingReturn } from "@floating-ui/react";
-import { Dispatch, SetStateAction } from "react";
+import { Dispatch, HTMLProps, SetStateAction } from "react";
 import { CommonProps } from "../../common";
 export type PopoverActivation = {
     click?: boolean;
@@ -74,7 +74,9 @@ export type UsePopoverType = {
     x: number;
     y: number;
     refs: ExtendedRefsType;
-    getReferenceProps: (userProps?: React.HTMLProps<Element>) => Record<string, unknown>;
-    getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
-    getItemProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
+    getReferenceProps: (userProps?: HTMLProps<Element> & {
+        "data-state"?: "open" | "closed";
+    }) => Record<string, unknown>;
+    getFloatingProps: (userProps?: HTMLProps<HTMLElement>) => Record<string, unknown>;
+    getItemProps: (userProps?: HTMLProps<HTMLElement>) => Record<string, unknown>;
 } & FloatingType;

package/src/components/SectionHeader/SectionHeader.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
 export interface SectionHeaderProps extends CommonProps {
     /**
@@ -18,6 +18,6 @@ export interface SectionHeaderProps extends CommonProps {
  * The SectionHeader component is used on sections to set the section title.
  
  * @param {SectionHeaderProps} props - The props for the section header component
- * @returns {JSX.Element} SectionHeader component
+ * @returns {ReactElement} SectionHeader component
  */
-export declare const SectionHeader: ({ title, subtitle, dataTestId, addons }: SectionHeaderProps) => JSX.Element;
+export declare const SectionHeader: ({ title, subtitle, dataTestId, addons }: SectionHeaderProps) => ReactElement;

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

@@ -50,8 +50,8 @@ export interface SidebarProps extends CommonProps {
  * - **_The sidebar is just a wrapper. You are responsible for styling the children._**
  *
  * When using this component make sure to add `setupIntersectionObserver();` to your jest.setup.ts file.
- 
+ *
  * @param {SidebarProps} props - The props for the Sidebar component
- * @returns {JSX.Element} 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;

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").MutableRefObject<HTMLDivElement | null>;
+    overflowContainerRef: import("react").RefObject<HTMLDivElement | null>;
     itemOverflowMap: OverflowMap;
 };

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

@@ -14,6 +14,6 @@ export interface SpacerProps extends CommonProps {
  * The Spacer component is used for adding a bit of space in the ui.
  
  * @param {SpacerProps} props - The props for the Spacer component
- * @returns {JSX.Element} Spacer component
+ * @returns {ReactElement} Spacer component
  */
 export declare const Spacer: ({ size, border, dataTestId, className }: SpacerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -37,7 +37,7 @@ export interface SpinnerProps extends CommonProps {
  * Use when retrieving or refreshing small data amounts, such as status.
  
  * @param {SpinnerProps} props - The props for the Spinner component
- * @returns {JSX.Element} 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 {};

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

@@ -21,7 +21,7 @@ export interface TabProps extends TabsTriggerProps {
     /**
      * A JSX element to be rendered as a suffix to the tab content.
      */
-    suffix?: JSX.Element;
+    suffix?: ReactElement;
     /**
      * The name of the icon associated with the tab.
      */

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

@@ -5,7 +5,7 @@ export interface TabContentProps extends TabsContentProps {
     className?: string;
     dataTestId?: string;
     children?: ReactNode;
-    suffix?: JSX.Element;
+    suffix?: ReactNode;
     iconName?: IconName;
 }
 /**

package/src/components/Tag/Tag.d.ts

@@ -1,5 +1,5 @@
 import { ActivityColors, CriticalityColors, GeneralColors, IntentColors } from "@trackunit/ui-design-tokens";
-import { MouseEventHandler, ReactNode } from "react";
+import { MouseEventHandler, ReactNode, Ref } from "react";
 import { CommonProps, Size } from "../../common";
 export type TagSize = Extract<Size, "small" | "medium">;
 export type TagColors = IntentColors | GeneralColors | CriticalityColors | ActivityColors;
@@ -28,6 +28,10 @@ export interface TagProps extends CommonProps {
      * Is the tag disabled.
      */
     disabled?: boolean;
+    /**
+     * A ref for the component
+     */
+    ref?: Ref<HTMLElement>;
 }
 /**
  *  The tag component is used to categorize elements in the ui.
@@ -37,8 +41,11 @@ export interface TagProps extends CommonProps {
  *  The tag is also used in multiselect components to show selected options.
  *
  *  **Do:** Use short labels for easy scanning.
- 
+ *
  * @param {TagProps} props - The props for the tag component
- * @returns {JSX.Element} tag component
+ * @returns {ReactElement} tag component
  */
-export declare const Tag: import("react").ForwardRefExoticComponent<TagProps & import("react").RefAttributes<HTMLElement>>;
+export declare const Tag: {
+    ({ className, dataTestId, children, size, onClose, color, disabled, ref, }: TagProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/src/components/Text/Text.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactElement, ReactNode, Ref } from "react";
 import { CommonProps, Size } from "../../common";
 export type TextType = "p" | "span" | "div";
 export type TextAlign = "left" | "center" | "right";
@@ -52,6 +52,10 @@ export interface TextProps extends CommonProps {
      * Ihe id of the html element
      */
     id?: string;
+    /**
+     * A ref for the component
+     */
+    ref?: Ref<HTMLElement>;
     /**
      * The title of the html element
      */
@@ -63,8 +67,11 @@ export interface TextProps extends CommonProps {
  *  ### When to use
  *
  *  Use Text when you want to show a text section, use Heading if you want to show a heading.
- 
+ *
  * @param {TextProps} props - The props for the Text component
- * @returns {JSX.Element} Text component
+ * @returns {ReactElement} Text component
  */
-export declare const Text: import("react").ForwardRefExoticComponent<TextProps & import("react").RefAttributes<HTMLElement>>;
+export declare const Text: {
+    ({ children, type, size, align, weight, underline, inverted, subtle, italicize, uppercase, disabled, className, dataTestId, ref, ...rest }: TextProps): ReactElement;
+    displayName: string;
+};

package/src/components/ToggleGroup/ToggleGroup.d.ts

@@ -60,7 +60,7 @@ export type ToggleGroupProps<TSelectedId extends string = string> = CommonProps
  *  Toggle Group allows users to toggle between two or more closely related options, and immediately apply that selection.
  *
  * @param {ToggleGroupProps} props - The props for the ToggleGroup component
- * @returns {JSX.Element} ToggleGroup component
+ * @returns {ReactElement} ToggleGroup component
  */
 export declare const ToggleGroup: <TSelectedId extends string = string>({ list, selected, setSelected, onChange, disabled, size, isIconOnly, className, dataTestId, }: ToggleGroupProps<TSelectedId>) => import("react/jsx-runtime").JSX.Element;
 export interface ToggleItemProps extends CommonProps, MappedOmit<BasicToggleGroupListProps<string>, "id"> {

package/src/components/Tooltip/Tooltip.d.ts

@@ -1,5 +1,5 @@
 import { Placement } from "@floating-ui/react";
-import { ReactNode } from "react";
+import { ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common";
 import { IconProps } from "../Icon/Icon";
 export type TooltipPlacement = Placement | "auto";
@@ -43,6 +43,6 @@ export interface TooltipProps extends CommonProps {
  * **Do not use** tooltips to include information that is necessary for the user to complete their task. Use helper text that is always visible and accessible for vital information.
  *
  * @param {TooltipProps} props - The props for the Tooltip component
- * @returns {JSX.Element} Tooltip component
+ * @returns {ReactElement} Tooltip component
  */
-export declare const Tooltip: ({ children, dataTestId, disabled, className, label, placement, mode, iconProps, id, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tooltip: ({ children, dataTestId, disabled, className, label, placement, mode, iconProps, id, }: TooltipProps) => ReactElement;

package/src/components/ValueBar/ValueBar.d.ts

@@ -45,7 +45,7 @@ export interface ValueBarProps extends CommonProps {
  * ValueBar component is used to display value on a colorful bar within provided range.
  
  * @param {ValueBarProps} props - The props for the ValueBar component
- * @returns {JSX.Element} ValueBar component
+ * @returns {ReactElement} ValueBar component
  */
 export declare const ValueBar: ({ value, min, max, unit, size, levelColors, valueColor, showValue, className, dataTestId, zeroScoreAllowed, }: ValueBarProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/ValueBar/ValueBarHelper.d.ts

@@ -32,6 +32,6 @@ export declare const getFillColor: (score: number, levelColors: LevelColors) =>
  * @param {number} min - min range value
  * @param {number} max - max range value
  * @param {LevelColors} levelColors - level colors used to coloring the bar
- * @returns {JSX.Element} ValueBar component
+ * @returns {ReactElement} ValueBar component
  */
 export declare const getValueBarColorByValue: (value: number, min: number, max: number, levelColors: LevelColors) => string;

package/src/components/VirtualizedList/VirtualizedList.d.ts

@@ -1,5 +1,6 @@
 import { VariantProps } from "@trackunit/css-class-variance-utilities";
 import { RelayPagination } from "@trackunit/react-table-pagination";
+import { ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
 import { cvaVirtualizedListItem } from "./VirtualizedList.variants";
 type Separator = NonNullable<VariantProps<typeof cvaVirtualizedListItem>["separator"]>;
@@ -8,7 +9,7 @@ export interface VirtualizedListProps extends CommonProps {
     count: number;
     rowHeight?: number;
     pagination?: RelayPagination;
-    children: (index: number) => JSX.Element | null;
+    children: (index: number) => ReactElement | null;
     separator?: Separator;
     loadingIndicator?: LoadingIndicator;
     skeletonLinesHeight?: string;
@@ -21,7 +22,7 @@ export interface VirtualizedListProps extends CommonProps {
  * @property {number} [rowHeight="40"] - The estimated height of each row in the list.
  * @property {RelayPagination | undefined} pagination - Pagination configuration for the list.
  * @property {separator} [separator="line"] - The separator style between items in the list.
- * @property {(index: number) => JSX.Element} children - A function that takes an index and returns the JSX element to be rendered at said index.
+ * @property {(index: number) =>ReactElement} children - A function that takes an index and returns the JSX element to be rendered at said index.
  * @property {loadingIndicator} [loadingIndicator="spinner"] - The type of loading indicator in the list.
  * @property {skeletonLinesHeight} [skeletonLinesHeight="2rem"] - The height of the skeleton lines.
  */

package/src/components/Widget/WidgetBody.d.ts

@@ -20,6 +20,6 @@ export interface WidgetBodyProps extends CommonProps {
  * @summary For applying padding and gap to a Widget.
  * @description The padding must live here, and not on the Widget itself, as to not inset the scrollbar in case of overflow
  * @param {WidgetBodyProps} props - The props for the WidgetBody component
- * @returns {JSX.Element} WidgetBody component
+ * @returns {ReactElement} WidgetBody component
  */
 export declare const WidgetBody: ({ density, children, dataTestId, className, disableGap }: WidgetBodyProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/buttons/Button/Button.d.ts

@@ -1,4 +1,4 @@
-import { MouseEvent, ReactNode } from "react";
+import { MouseEvent, ReactNode, Ref } from "react";
 import { ButtonCommonProps, ButtonType } from "../shared/ButtonProps";
 export interface ButtonProps extends ButtonCommonProps {
     onClick?: (event: MouseEvent<HTMLElement>) => void;
@@ -34,6 +34,10 @@ export interface ButtonProps extends ButtonCommonProps {
      * The name of the button
      */
     name?: string;
+    /**
+     * A ref for the component
+     */
+    ref?: Ref<HTMLButtonElement>;
 }
 /**
  * Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. Button labels express what action will occur when the user interacts with it.
@@ -45,6 +49,9 @@ export interface ButtonProps extends ButtonCommonProps {
  * Do not use buttons as navigational elements. Instead, use [Links](https://www.notion.so/Links-49638788b6c042698b40b94a318361f1?pvs=21) when the desired action is to take the user to a new page.
  *
  * @param {ButtonProps} props - The props for the Button component
- * @returns {JSX.Element} Button component
+ * @returns {ReactElement} Button component
  */
-export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const Button: {
+    ({ onClick, children, loading, disabled, className, fullWidth, prefix, suffix, variant, type, size, square, dataTestId, title, role, tabIndex, asChild, circular, ref, ...rest }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};