@trackunit/react-components 1.4.23 → 1.4.28

package/index.cjs.js

@@ -1,7 +1,6 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
 var sharedUtils = require('@trackunit/shared-utils');
 var uiDesignTokens = require('@trackunit/ui-design-tokens');
 var uiIcons = require('@trackunit/ui-icons');
@@ -9,6 +8,7 @@ var IconSpriteMicro = require('@trackunit/ui-icons/icons-sprite-micro.svg');
 var IconSpriteMini = require('@trackunit/ui-icons/icons-sprite-mini.svg');
 var IconSpriteOutline = require('@trackunit/ui-icons/icons-sprite-outline.svg');
 var IconSpriteSolid = require('@trackunit/ui-icons/icons-sprite-solid.svg');
+var react = require('react');
 var stringTs = require('string-ts');
 var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 var reactSlot = require('@radix-ui/react-slot');
@@ -132,7 +132,7 @@ const isSafari = () => {
  * - 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
  */
 const Icon = ({ name, size = "large", className, dataTestId, color, onClick, type, style, forwardedRef, ariaLabel, fontSize, ariaLabelledBy, ariaDescribedBy, }) => {
     const useTagRef = react.useRef(null);
@@ -240,15 +240,15 @@ const cvaTagIcon = cssClassVarianceUtilities.cvaMerge(["cursor-pointer", "transi
  *  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
  */
-const Tag = react.forwardRef(({ className, dataTestId, children, size = "medium", onClose, color = "primary", disabled = false }, ref) => {
+const Tag = ({ className, dataTestId, children, size = "medium", onClose, color = "primary", disabled = false, ref, }) => {
     return (jsxRuntime.jsxs("span", { className: cvaTag({ className, size, color, layout: onClose ? "withIcon" : "default" }), "data-testid": dataTestId, ref: ref, children: [children, Boolean(onClose) && !disabled ? (
             // a fix for multiselect deselecting tags working together with fade out animation
             jsxRuntime.jsx("div", { className: cvaTagIconContainer(), onMouseDown: onClose, children: jsxRuntime.jsx(Icon, { className: cvaTagIcon(), dataTestId: dataTestId + "Icon", name: "XCircle", size: size, style: { WebkitTransition: "-webkit-transform 0.150s" }, type: "solid" }) })) : null] }));
-});
+};
 Tag.displayName = "Tag";
 
 /**
@@ -357,11 +357,11 @@ const cvaText = cssClassVarianceUtilities.cvaMerge(["text-black", "m-0", "relati
  *  ### 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
  */
-const Text = react.forwardRef(({ children, type = "p", size = "medium", align = "left", weight = "normal", underline = false, inverted = false, subtle = false, italicize = false, uppercase = false, disabled = false, className, dataTestId, ...rest }, ref) => {
+const Text = ({ children, type = "p", size = "medium", align = "left", weight = "normal", underline = false, inverted = false, subtle = false, italicize = false, uppercase = false, disabled = false, className, dataTestId, ref, ...rest }) => {
     return react.createElement(type, {
         ref,
         className: cvaText({
@@ -379,7 +379,7 @@ const Text = react.forwardRef(({ children, type = "p", size = "medium", align =
         "data-testid": dataTestId,
         ...rest,
     }, children);
-});
+};
 Text.displayName = "Text";
 
 const cvaSpinner = cssClassVarianceUtilities.cvaMerge(["bg-transparent", "rounded-full", "border-2", "border-solid", "inline-block", "animate-spin", "cursor-wait"], {
@@ -431,7 +431,7 @@ const cvaSpinnerLabel = cssClassVarianceUtilities.cvaMerge(["self-center", "text
  * 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
  */
 const Spinner = ({ mode = "light", size = "medium", centering = "centered", className, containerClassName, dataTestId = "spinner", label, }) => {
     return (jsxRuntime.jsx("div", { className: cvaSpinnerContainer({ centering, className: containerClassName }), children: jsxRuntime.jsxs("div", { className: cvaSpinnerContainerInner(), children: [jsxRuntime.jsx("div", { className: cvaSpinner({ size, mode, className }), "data-testid": dataTestId, role: "spinbutton" }), label ? jsxRuntime.jsx("span", { className: cvaSpinnerLabel(), children: label }) : null] }) }));
@@ -701,9 +701,9 @@ const cvaIconButton = cssClassVarianceUtilities.cvaMerge([], {
  * 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
  */
-const Button = react.forwardRef(({ onClick, children, loading, disabled, className, fullWidth = false, prefix, suffix, variant = "primary", type = "button", size = "medium", square = false, dataTestId, title, role, tabIndex, asChild = false, circular, ...rest }, ref) => {
+const Button = ({ onClick, children, loading, disabled, className, fullWidth = false, prefix, suffix, variant = "primary", type = "button", size = "medium", square = false, dataTestId, title, role, tabIndex, asChild = false, circular, ref, ...rest }) => {
     const Comp = asChild ? reactSlot.Slot : "button";
     const sharedCompProps = {
         ref,
@@ -722,24 +722,27 @@ const Button = react.forwardRef(({ onClick, children, loading, disabled, classNa
         type,
     };
     return (jsxRuntime.jsxs(Comp, { ...sharedCompProps, ...(asChild ? {} : buttonSpecificProps), children: [loading ? (jsxRuntime.jsx(Spinner, { centering: "vertically", className: cvaButtonSpinner({ variant }), containerClassName: cvaButtonSpinnerContainer(), size: "small" })) : null, prefix && !loading ? jsxRuntime.jsx("div", { className: cvaButtonPrefixSuffix({ size, variant }), children: prefix }) : null, jsxRuntime.jsx(reactSlot.Slottable, { children: children }), suffix && !loading ? jsxRuntime.jsx("div", { className: cvaButtonPrefixSuffix({ size, variant }), children: suffix }) : null] }));
-});
+};
 Button.displayName = "Button";
 
 /**
  * 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. The Icon Button is a version of the standard Button component without the text label.
  */
-const IconButton = react.forwardRef(({ icon, size = "medium", square = true, loading, disabled, className, ...rest }, ref) => {
+/**
+ *
+ */
+const IconButton = ({ icon, size = "medium", square = true, loading, disabled, className, ref, ...rest }) => {
     return (jsxRuntime.jsx(Button, { className: cvaIconButton({ size: size, className }), disabled: disabled || loading, loading: loading, 
         // eslint-disable-next-line local-rules/design-guideline-button-icon-size-match
         prefix: !loading ? icon : undefined, ref: ref, size: size, square: square, ...rest }));
-});
+};
 IconButton.displayName = "IconButton";
 
 /**
  * The StarButton component is used for favorite actions or similar.
- 
+ *
  * @param {StarButtonProps} props - The props for the StarButton component
- * @returns {JSX.Element} StarButton component
+ * @returns {ReactElement} StarButton component
  */
 const StarButton = ({ starred, onClick }) => {
     return (jsxRuntime.jsx("div", { "data-test-id": "starred-filter", onClick: onClick, children: jsxRuntime.jsx(Icon, { color: starred ? "primary" : "neutral", name: "Star", size: "medium" }) }));
@@ -773,9 +776,9 @@ const cvaAlertIconContainer = cssClassVarianceUtilities.cvaMerge(["self-start",
 
 /**
  * The Alert component should be used to inform the user of important information.
- 
+ *
  * @param {AlertProps} props - The props for the Alert component
- * @returns {JSX.Element} Alert component
+ * @returns {ReactElement} Alert component
  */
 const Alert = ({ color = "info", title, className, children, primaryAction, secondaryAction, onClose, dataTestId, autoScroll, }) => {
     const ref = react.useRef(null);
@@ -840,7 +843,7 @@ const cvaBadge = cssClassVarianceUtilities.cvaMerge([
  * The Badge component is used to display a notification badge with an optional number value.
  
  * @param {BadgeProps} props - The props for the Badge component
- * @returns {JSX.Element} Badge component
+ * @returns {ReactElement} Badge component
  */
 const Badge = ({ color = "primary", className, count, max, hideZero = false, dataTestId }) => {
     if (hideZero && count === 0) {
@@ -983,7 +986,7 @@ const useContainerBreakpoints = (ref) => {
  */
 const useTimeout = ({ onTimeout, duration }) => {
     const ready = react.useRef(false);
-    const timeout = react.useRef();
+    const timeout = react.useRef(null);
     const callback = react.useRef(onTimeout);
     const startTimeout = react.useCallback(() => {
         ready.current = false;
@@ -1269,7 +1272,7 @@ const useIsFullscreen = () => {
  * @param {string} [text] - (Optional) Text used to trigger a re-check of truncation,
  *                          especially if the text is dynamic (such as an input's value).
  * @returns {{
- *   ref: RefObject<TElement | null>;
+ *   ref: Ref<TElement | null>;
  *   isTooltipVisible: boolean;
  * }} An object with:
  * - `ref`: a ref to attach to the element you want to observe for truncation.
@@ -1355,9 +1358,9 @@ const useScrollDetection = (elementRef) => {
     const [isAtTop, setIsAtTop] = react.useState(true);
     const [isAtBottom, setIsAtBottom] = react.useState(false);
     const [scrollPosition, setScrollPosition] = react.useState({ top: 0, bottom: 0 });
-    const observerRef = react.useRef();
+    const observerRef = react.useRef(null);
     const checkScrollable = react.useCallback(() => {
-        const element = elementRef.current;
+        const element = elementRef?.current;
         if (!element) {
             return;
         }
@@ -1365,7 +1368,7 @@ const useScrollDetection = (elementRef) => {
         setIsScrollable(hasOverflow);
     }, [elementRef]);
     const checkScrollPosition = react.useCallback(() => {
-        const element = elementRef.current;
+        const element = elementRef?.current;
         if (!element) {
             return;
         }
@@ -1376,7 +1379,7 @@ const useScrollDetection = (elementRef) => {
     }, [elementRef]);
     const debouncedCheckScrollPosition = usehooksTs.useDebounceCallback(checkScrollPosition, SCROLL_DEBOUNCE_TIME);
     react.useEffect(() => {
-        const element = elementRef.current;
+        const element = elementRef?.current;
         if (!element) {
             return;
         }
@@ -1591,7 +1594,7 @@ const useBreadcrumbItemsToRender = (breadcrumbItems) => {
  * Avoid using breadcrumbs to indicate forthcoming steps. For processes with sequential steps, use a wizard flow instead.
  *
  * @param {BreadcrumbProps} props - The props for the Breadcrumb component
- * @returns {JSX.Element} Breadcrumb component
+ * @returns {ReactElement} Breadcrumb component
  */
 const Breadcrumb = ({ className, dataTestId, breadcrumbItems, back }) => {
     const breadCrumbItemsToJSX = useBreadcrumbItemsToRender(breadcrumbItems);
@@ -1713,9 +1716,9 @@ const ROLE_CARD = "region";
 /**
  * The Card component is a container for UI elements, and is the main component of the modal.
  * To get the most out of the Card, use it in combination with the CardHeader, CardBody and CardFooter.
- 
+ *
  * @param {CardProps} props - The props for the Card component
- * @returns {JSX.Element} Card component
+ * @returns {ReactElement} Card component
  */
 const Card = ({ children, onClick, fullHeight = false, onMouseEnter, onMouseLeave, className, dataTestId, ...rest }) => {
     return (jsxRuntime.jsx("div", { className: cvaCard({ fullHeight, clickable: Boolean(onClick), className }), "data-testid": dataTestId, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, role: ROLE_CARD, ...rest, children: children }));
@@ -1727,7 +1730,7 @@ const Card = ({ children, onClick, fullHeight = false, onMouseEnter, onMouseLeav
  * @summary For applying padding and gap to a Card.
  * @description The padding must live here, and not on the Card itself, as to not inset the scrollbar in case of overflow
  * @param {CardBodyProps} props - The props for the CardBody component
- * @returns {JSX.Element} CardBody component
+ * @returns {ReactElement} CardBody component
  */
 const CardBody = ({ density = "auto", children, dataTestId, className, direction, disableGap, id, }) => {
     return (jsxRuntime.jsx("div", { className: cvaCardBodyDensityContainer({ density, disableGap, className, direction }), "data-testid": dataTestId, id: id, children: children }));
@@ -1737,9 +1740,9 @@ const CardBody = ({ density = "auto", children, dataTestId, className, direction
  * 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
  */
 const CardFooter = ({ dataTestId, className, children, density, hideSeparator = false }) => {
     return (jsxRuntime.jsx("div", { className: cvaCardFooterDensityContainer({
@@ -1782,9 +1785,9 @@ const cvaHeading = cssClassVarianceUtilities.cvaMerge(["m-0", "leading-normal",
 
 /**
  * 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
  */
 const Heading = ({ variant = "primary", inverted = false, subtle = false, className, dataTestId, ...rest }) => {
     const semanticType = {
@@ -1802,9 +1805,9 @@ const Heading = ({ variant = "primary", inverted = false, subtle = false, classN
 
 /**
  * Header for Cards and Modals.
- 
+ *
  * @param {CardHeaderProps} props - The props for the CardHeader component
- * @returns {JSX.Element} CardHeader component
+ * @returns {ReactElement} CardHeader component
  */
 const CardHeader = ({ heading, headingVariant = "primary", subHeading, onClose, dataTestId, className, children, accessories, actions, density, hideSeparator = false, }) => {
     return (jsxRuntime.jsx("div", { className: cvaCardHeaderDensityContainer({
@@ -1886,7 +1889,7 @@ const cvaChevronIcon = cssClassVarianceUtilities.cvaMerge(["transition-transform
  * - 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
  */
 const Collapse = ({ id, initialExpanded = false, onToggle, label, children, className, headerClassName, headerAddon, dataTestId, animate = true, extraPadding = true, }) => {
     const LABEL_ID = sharedUtils.uuidv4();
@@ -1960,7 +1963,7 @@ const cvaCopyableText = cssClassVarianceUtilities.cvaMerge([
  * 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
  */
 const CopyableText = ({ text, alternativeText, dataTestId, className }) => {
     const value = alternativeText ?? text ?? "";
@@ -2110,7 +2113,7 @@ const cvaEmptyValue = cssClassVarianceUtilities.cvaMerge(["text-gray-400"]);
  *  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
  */
 const EmptyValue = ({ className, dataTestId }) => {
     return (jsxRuntime.jsx("div", { className: cvaEmptyValue({ className }), "data-testid": dataTestId, children: "-" }));
@@ -2122,7 +2125,7 @@ const cvaExternalLink = cssClassVarianceUtilities.cvaMerge(["underline", "text-p
  *  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
  */
 const ExternalLink = ({ rel = "noreferrer", target = "_blank", href, className, children = href, title = href, dataTestId, onClick, }) => {
     return (jsxRuntime.jsx("a", { className: cvaExternalLink({ className }), "data-testid": dataTestId, href: href, onClick: onClick, rel: rel, target: target, title: title, children: children }));
@@ -2288,6 +2291,7 @@ const usePopover = ({ initialOpen = false, placement = "bottom", isModal, isOpen
     const resolvedDismissal = typeof dismissal === "function" ? dismissal(DEFAULT_DISMISSAL) : dismissal;
     const clickInteraction = react$1.useClick(popoverContext, {
         enabled: resolvedActivation.click,
+        keyboardHandlers: resolvedActivation.keyboardHandlers,
     });
     const dismissInteraction = react$1.useDismiss(popoverContext, resolvedDismissal);
     const hoverInteraction = react$1.useHover(popoverContext, {
@@ -2346,7 +2350,7 @@ const usePopoverContext = () => {
  * 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
  */
 const Popover = ({ children, isModal = false, ...restOptions }) => {
     const popover = usePopover({ isModal, ...restOptions });
@@ -2393,7 +2397,10 @@ const cvaPopoverTitleContainer = cssClassVarianceUtilities.cvaMerge(["flex", "it
 });
 const cvaPopoverTitleText = cssClassVarianceUtilities.cvaMerge(["flex-1", "text-neutral-500"]);
 
-const PopoverContent = react.forwardRef(function PopoverContent({ className, dataTestId, children, portalId, ...props }, propRef) {
+/**
+ *
+ */
+const PopoverContent = function PopoverContent({ className, dataTestId, children, portalId, ref: propRef, ...props }) {
     const { context: floatingContext, customProps, ...context } = usePopoverContext();
     const ref = react$1.useMergeRefs([context.refs.setFloating, propRef]);
     return (jsxRuntime.jsx(Portal, { id: portalId, children: context.isOpen ? (jsxRuntime.jsx(react$1.FloatingFocusManager, { closeOnFocusOut: false, context: floatingContext, guards: true, modal: context.isModal, order: ["reference", "content"], returnFocus: true, children: jsxRuntime.jsx("div", { "aria-describedby": context.descriptionId, "aria-labelledby": context.labelId, className: cvaPopoverContainer({ className: className ?? customProps.className }), "data-testid": dataTestId ?? customProps.dataTestId ?? "popover-content", ref: ref, style: {
@@ -2403,23 +2410,27 @@ const PopoverContent = react.forwardRef(function PopoverContent({ className, dat
                     width: "max-content",
                     ...props.style,
                 }, ...context.getFloatingProps(props), children: typeof children === "function" ? children(() => context.setIsOpen(false)) : children }) })) : null }));
-});
+};
 
 /**
  * The PopoverTitle component.
- 
+ *
  * @param {PopoverTitleProps} props - The props for the PopoverTitle component
- * @returns {JSX.Element} PopoverTitle component
+ * @returns {ReactElement} PopoverTitle component
  */
 const PopoverTitle = ({ children, action, divider = false, className, dataTestId }) => {
     return (jsxRuntime.jsxs("div", { className: cvaPopoverTitleContainer({ divider, className }), "data-testid": dataTestId, children: [jsxRuntime.jsx(Text, { className: cvaPopoverTitleText(), size: "small", subtle: true, type: "div", uppercase: true, weight: "bold", children: children }), action] }));
 };
 
-const PopoverTrigger = react.forwardRef(function PopoverTrigger({ children, renderButton, ...props }, propRef) {
+/**
+ * The PopoverTrigger component is used to trigger the popover.
+ *
+ * @param {PopoverTriggerProps} props - The props for the PopoverTrigger component
+ * @returns {ReactElement} PopoverTrigger component
+ */
+const PopoverTrigger = function PopoverTrigger({ children, renderButton, ref: propRef, ...props }) {
     const context = usePopoverContext();
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any, local-rules/no-typescript-assertion
-    const childrenRef = children.ref;
-    const ref = react$1.useMergeRefs([context.refs.setReference, propRef, childrenRef]);
+    const ref = react$1.useMergeRefs([context.refs.setReference, propRef]);
     if (!renderButton && react.isValidElement(children)) {
         return react.cloneElement(children, context.getReferenceProps({
             ref,
@@ -2428,10 +2439,8 @@ const PopoverTrigger = react.forwardRef(function PopoverTrigger({ children, rend
             "data-state": context.isOpen ? "open" : "closed",
         }));
     }
-    else {
-        return (jsxRuntime.jsx(Button, { "data-state": context.isOpen ? "open" : "closed", ref: ref, type: "button", ...context.getReferenceProps(props), children: children }));
-    }
-});
+    return (jsxRuntime.jsx(Button, { "data-state": context.isOpen ? "open" : "closed", ref: ref, type: "button", ...context.getReferenceProps(props), children: children }));
+};
 
 const cvaTooltipContainer = cssClassVarianceUtilities.cvaMerge(["flex", "leading-5"]);
 const cvaTooltipIcon = cssClassVarianceUtilities.cvaMerge(["flex", "h-max", "w-fit", "text-slate-300", "transition", "hover:cursor-pointer", "hover:text-slate-400"], {
@@ -2488,7 +2497,7 @@ const cvaTooltipPopoverContent = cssClassVarianceUtilities.cvaMerge(["max-w-sm",
 /**
  *
  * @description Adding Tooltip Arrow
- * @returns {JSX.Element} Tooltip floating Arrow
+ * @returns {ReactElement} Tooltip floating Arrow
  */
 const FloatingArrowContainer = ({ arrowRef, mode = "dark", }) => {
     const { context: floatingContext } = usePopoverContext();
@@ -2504,7 +2513,7 @@ const FloatingArrowContainer = ({ arrowRef, mode = "dark", }) => {
  * **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
  */
 const Tooltip = ({ children, dataTestId = "tool-tip", disabled, className, label, placement = "auto", mode = "dark", iconProps, id, }) => {
     const [isOpen, setIsOpen] = react.useState(false);
@@ -2659,7 +2668,7 @@ const cvaIndicatorIconBackground = cssClassVarianceUtilities.cvaMerge(["rounded-
  * _**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
  */
 const Indicator = ({ dataTestId, icon, label, color = "unknown", withBackground = true, withLabel = true, ping = false, size, className, ...rest }) => {
     return (jsxRuntime.jsx(Tooltip, { className: className, disabled: withLabel, label: label, placement: "bottom", children: jsxRuntime.jsxs("div", { "aria-label": label, className: cvaIndicator(), "data-testid": dataTestId, ...rest, children: [jsxRuntime.jsxs("div", { className: cvaIndicatorIconBackground({ color, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background", children: [ping ? (jsxRuntime.jsx("div", { className: cvaIndicatorPing({ color }), "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping" })) : null, icon] }), label !== undefined && withLabel ? (jsxRuntime.jsx("div", { className: cvaIndicatorLabel({ size }), "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label", children: label })) : null] }) }));
@@ -2726,7 +2735,7 @@ const LoadingContent$1 = () => (jsxRuntime.jsx("div", { className: "flex flex-ro
  * 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
  */
 const KPICard = ({ asChild = false, title, value, loading, unit, className, dataTestId, tooltipLabel, isActive, variant = "default", trend, onClick, ...rest }) => {
     const Comp = asChild ? reactSlot.Slot : "div";
@@ -2933,7 +2942,7 @@ const cvaMenuItemSuffix = cssClassVarianceUtilities.cvaMerge(["text-secondary-40
  * 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
  */
 const MenuItem = ({ className, dataTestId, label, children, selected, prefix, suffix, disabled, onClick, stopPropagation = true, id, tabIndex, optionLabelDescription, fieldSize = "medium", variant = "primary", }) => {
     /* Handle tab navigation */
@@ -2965,7 +2974,7 @@ const MenuItem = ({ className, dataTestId, label, children, selected, prefix, su
  * - 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
  */
 const MenuList = ({ dataTestId, className, children, withStickyHeader = false, isMulti = false, selectedItems: controlledSelectedItems, onSelectionChange, ...args }) => {
     const childrenArr = react.Children.toArray(children);
@@ -3016,7 +3025,7 @@ const cvaMoreMenu = cssClassVarianceUtilities.cvaMerge(["p-0"]);
  * Advice: fill it with MenuList
  *
  * @param {MoreMenuProps} props - The props for the MoreMenu component
- * @returns {JSX.Element} MoreMenu component
+ * @returns {ReactElement} MoreMenu component
  */
 const MoreMenu = ({ className, dataTestId, popoverProps, iconProps = {
     size: "medium",
@@ -3087,7 +3096,7 @@ const cvaNoticeIcon = cssClassVarianceUtilities.cvaMerge(["rounded-full", "items
  * _**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
  */
 const Notice = ({ dataTestId, icon, label, color = "neutral", withLabel = true, className, tooltipLabel = label, withTooltip = false, size = "medium", ...rest }) => {
     return (jsxRuntime.jsx(Tooltip, { className: className, disabled: !withTooltip, label: tooltipLabel, placement: "bottom", children: jsxRuntime.jsxs("div", { "aria-label": label, className: cvaNotice(), "data-testid": dataTestId, ...rest, children: [jsxRuntime.jsx("div", { className: cvaNoticeIcon({ color }), "data-testid": dataTestId ? `${dataTestId}-icon` : "notice-icon", children: icon }), label !== undefined && withLabel ? (jsxRuntime.jsx("div", { className: cvaNoticeLabel({ color, size }), "data-testid": dataTestId ? `${dataTestId}-label` : "notice-label", children: label })) : null] }) }));
@@ -3218,7 +3227,7 @@ const PageHeaderTitle = ({ title, dataTestId }) => {
  * 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
  */
 const PageHeader = ({ className, dataTestId, secondaryActions, showLoading, description, title, tagLabel, backTo, tagColor, tabsList, descriptionIcon, kpiMetrics, tagTooltipLabel, primaryAction, }) => {
     const tagRenderer = react.useMemo(() => {
@@ -3244,7 +3253,7 @@ const cvaPaginationText = cssClassVarianceUtilities.cvaMerge("whitespace-nowrap"
  * 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
  */
 const Pagination = ({ previousPage, nextPage, canPreviousPage, canNextPage, pageCount, pageIndex, loading, className, dataTestId, getTranslatedCount, onPageChange, cursorBase, }) => {
     const [page, setPage] = react.useState(pageIndex);
@@ -3293,7 +3302,7 @@ const STROKE_WIDTH_THRESHOLD = 32;
  *  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
  */
 const Polygon = ({ points, size, color = "black", opaque = true, className, dataTestId }) => {
     // Calculate the bounds of the points
@@ -3305,7 +3314,12 @@ const Polygon = ({ points, size, color = "black", opaque = true, className, data
     const sizeToNormalizeAgainst = size - strokeWidth * 2; // because strole is centered, so will be clipped on the outside otherwise
     // Normalize the points to fit within the viewBox
     const normalizedPoints = points
-        .map(([x, y]) => `${normalize({ value: x, min: minX, max: maxX, size: sizeToNormalizeAgainst })},${normalize({ value: y, min: minY, max: maxY, size: sizeToNormalizeAgainst })}`)
+        .map(([x, y]) => `${normalize({ value: x, min: minX, max: maxX, size: sizeToNormalizeAgainst })},${normalize({
+        value: y,
+        min: minY,
+        max: maxY,
+        size: sizeToNormalizeAgainst,
+    })}`)
         .join(" ");
     return (jsxRuntime.jsx("svg", { className: className, "data-testid": dataTestId, height: size, style: { width: `${size}px`, height: `${size}px` }, viewBox: `0 0 ${size} ${size}`, width: size, xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("polygon", { points: normalizedPoints, style: {
                 fill: color,
@@ -3380,7 +3394,7 @@ const cvaSpacer = cssClassVarianceUtilities.cvaMerge([], {
  * 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
  */
 const Spacer = ({ size = "medium", border = false, dataTestId, className }) => {
     return jsxRuntime.jsx("div", { className: cvaSpacer({ className, border, size }), "data-testid": dataTestId });
@@ -3390,7 +3404,7 @@ const Spacer = ({ size = "medium", border = false, dataTestId, className }) => {
  * 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
  */
 const SectionHeader = ({ title, subtitle, dataTestId, addons }) => {
     return (jsxRuntime.jsxs("div", { className: "flex flex-col", children: [jsxRuntime.jsx(reactHelmetAsync.HelmetProvider, { children: jsxRuntime.jsx(reactHelmetAsync.Helmet, { title: title }) }), jsxRuntime.jsxs("div", { className: "mb-2 flex flex-row gap-2", children: [jsxRuntime.jsxs("div", { className: "flex grow flex-col gap-2", children: [jsxRuntime.jsx(Heading, { dataTestId: dataTestId, variant: "secondary", children: title }), subtitle ? (jsxRuntime.jsx(Heading, { subtle: true, variant: "subtitle", children: subtitle })) : null] }), addons ? jsxRuntime.jsx("div", { className: "flex gap-2", children: addons }) : null] }), jsxRuntime.jsx(Spacer, { size: "small" })] }));
@@ -3471,9 +3485,9 @@ const useOverflowItems = ({ threshold = 1, childUniqueIdentifierAttribute = "id"
  * - **_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
  */
 const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", className, dataTestId = "sidebar", moreMenuProps, menuListProps, overflowThreshold, }) => {
     const { overflowContainerRef, itemOverflowMap } = useOverflowItems({
@@ -3617,7 +3631,7 @@ const cvaToggleItemText = cssClassVarianceUtilities.cvaMerge(["text-ellipsis", "
  *  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
  */
 const ToggleGroup = ({ list, selected, setSelected, onChange, disabled = false, size = "medium", isIconOnly = false, className, dataTestId, }) => {
     return (jsxRuntime.jsx("div", { className: cvaToggleGroup(), "data-testid": dataTestId, children: list.map((item, index) => (jsxRuntime.jsx(ToggleItem, { className: tailwindMerge.twMerge(className, index === 0 ? ["rounded-l-md", "border-l"] : "", index === list.length - 1 ? ["rounded-r-md", "border-r"] : ""), dataTestId: item.dataTestId, disabled: disabled, iconName: item.iconName, isIconOnly: isIconOnly, onClick: () => {
@@ -3727,7 +3741,7 @@ const getFillColor = (score, 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
  */
 const getValueBarColorByValue = (value, min, max, levelColors) => {
     const score = getScore(value, min, max);
@@ -3738,7 +3752,7 @@ const getValueBarColorByValue = (value, min, max, levelColors) => {
  * 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
  */
 const ValueBar = ({ value, min = 0, max = 100, unit, size = "small", levelColors, valueColor, showValue, className, dataTestId, zeroScoreAllowed, }) => {
     const score = getScore(value, min, max, zeroScoreAllowed);
@@ -3770,7 +3784,7 @@ const cvaVirtualizedListItem = cssClassVarianceUtilities.cvaMerge(["absolute", "
  * @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.
  */
@@ -3837,7 +3851,7 @@ const cvaWidgetBodyDensityContainer = cssClassVarianceUtilities.cvaMerge([
  * @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
  */
 const WidgetBody = ({ density = "auto", children, dataTestId, className, disableGap }) => {
     return (jsxRuntime.jsx("div", { className: cvaWidgetBodyDensityContainer({ density, disableGap, className }), "data-testid": dataTestId, children: children }));