@trackunit/react-components 0.1.385 → 0.1.388

package/index.esm.js

@@ -133,13 +133,20 @@ cvaMerge([
     "after:opacity-50",
 ]);
 
-const iconPalette = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, intentPalette), generalPalette), criticalityPalette), activityPalette), utilizationPalette), sitesPalette), rentalStatusPalette);
+const iconPalette = {
+    ...intentPalette,
+    ...generalPalette,
+    ...criticalityPalette,
+    ...activityPalette,
+    ...utilizationPalette,
+    ...sitesPalette,
+    ...rentalStatusPalette,
+};
 const iconColorNames = objectKeys(iconPalette).map(key => snakeCase(key));
 const isSafari = () => {
     const ua = navigator.userAgent.toLowerCase();
     return ua.includes("safari") && !ua.includes("chrome");
 };
-const ICON_CONTAINER_ID = v4();
 /**
  * - The Icon component is used to display an Icon.
  * - Icons are semantic vector graphics that adds character and improves the visual appeal of elements when combined with.
@@ -150,6 +157,7 @@ const ICON_CONTAINER_ID = v4();
  */
 const Icon = ({ name, size = "large", className, dataTestId, color, onClick, type, style, forwardedRef, ariaLabel, ariaLabelledBy, ariaDescribedBy, }) => {
     const useTagRef = useRef(null);
+    const ICON_CONTAINER_ID = v4();
     const correctIconType = useMemo(() => {
         if (size === "small" || size === "medium") {
             return "mini";
@@ -266,38 +274,6 @@ const PackageNameStoryComponent = ({ packageJSON }) => {
     return (jsxs("div", { className: "flex gap-2", children: [jsx(Tag, { color: "secondary", children: packageJSON === null || packageJSON === void 0 ? void 0 : packageJSON.name }), jsxs(Tag, { color: "secondary", children: ["v", packageJSON === null || packageJSON === void 0 ? void 0 : packageJSON.version] })] }));
 };
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
 const cvaText = cvaMerge(["text-black", "m-0", "relative", "text-sm", "font-normal"], {
     variants: {
         align: {
@@ -361,9 +337,9 @@ const cvaText = cvaMerge(["text-black", "m-0", "relative", "text-sm", "font-norm
  * @param {TextProps} props - The props for the Text component
  * @returns {JSX.Element} Text component
  */
-const Text = (_a) => {
-    var { children, type = "p", size = "medium", align = "left", weight = "normal", underline = false, inverted = false, subtle = false, italicize = false, uppercase = false, disabled = false, className, dataTestId } = _a, rest = __rest(_a, ["children", "type", "size", "align", "weight", "underline", "inverted", "subtle", "italicize", "uppercase", "disabled", "className", "dataTestId"]);
-    return React.createElement(type, Object.assign({ className: cvaText({
+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, ...rest }) => {
+    return React.createElement(type, {
+        className: cvaText({
             inverted,
             uppercase,
             align,
@@ -374,7 +350,10 @@ const Text = (_a) => {
             subtle,
             disabled,
             className,
-        }), "data-testid": dataTestId }, rest), children);
+        }),
+        "data-testid": dataTestId,
+        ...rest,
+    }, children);
 };
 
 const cvaSpinner = cvaMerge([
@@ -679,30 +658,35 @@ const cvaIconButton = cvaMerge([], {
  * @param {ButtonProps} props - The props for the Button component
  * @returns {JSX.Element} Button component
  */
-const Button = React.forwardRef((_a, ref) => {
-    var { onClick, children, loading, disabled, className, fullWidth = false, prefix, suffix, variant = "primary", type = "button", size = "medium", square = false, dataTestId, title, role, tabIndex, asChild = false, circular } = _a, rest = __rest(_a, ["onClick", "children", "loading", "disabled", "className", "fullWidth", "prefix", "suffix", "variant", "type", "size", "square", "dataTestId", "title", "role", "tabIndex", "asChild", "circular"]);
+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 Comp = asChild ? Slot : "button";
-    const sharedCompProps = Object.assign({ ref,
+    const sharedCompProps = {
+        ref,
         title,
         role,
         onClick,
-        tabIndex, className: cvaButton({ rounded: circular, disabled, size, square, variant, loading, fullWidth, className }), "aria-label": title, "aria-disabled": disabled || loading, "data-testid": dataTestId }, rest);
+        tabIndex,
+        className: cvaButton({ rounded: circular, disabled, size, square, variant, loading, fullWidth, className }),
+        "aria-label": title,
+        "aria-disabled": disabled || loading,
+        "data-testid": dataTestId,
+        ...rest,
+    };
     const buttonSpecificProps = {
         disabled: disabled || loading,
         type,
     };
-    return (jsxs(Comp, Object.assign({}, sharedCompProps, (asChild ? {} : buttonSpecificProps), { children: [loading ? (jsx(Spinner, { centering: "vertically", className: cvaButtonSpinner({ variant }), containerClassName: cvaButtonSpinnerContainer(), size: "small" })) : null, prefix && !loading ? jsx("div", { className: cvaButtonPrefixSuffix({ size, variant }), children: prefix }) : null, jsx(Slottable, { children: children }), suffix && !loading ? jsx("div", { className: cvaButtonPrefixSuffix({ size, variant }), children: suffix }) : null] })));
+    return (jsxs(Comp, { ...sharedCompProps, ...(asChild ? {} : buttonSpecificProps), children: [loading ? (jsx(Spinner, { centering: "vertically", className: cvaButtonSpinner({ variant }), containerClassName: cvaButtonSpinnerContainer(), size: "small" })) : null, prefix && !loading ? jsx("div", { className: cvaButtonPrefixSuffix({ size, variant }), children: prefix }) : null, jsx(Slottable, { children: children }), suffix && !loading ? 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((_a, ref) => {
-    var { icon, size = "medium", square = true, loading, disabled, className } = _a, rest = __rest(_a, ["icon", "size", "square", "loading", "disabled", "className"]);
-    return (jsx(Button, Object.assign({ className: cvaIconButton({ size: size, className }), disabled: disabled || loading, loading: loading, 
+const IconButton = React.forwardRef(({ icon, size = "medium", square = true, loading, disabled, className, ...rest }, ref) => {
+    return (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)));
+        prefix: !loading ? icon : undefined, ref: ref, size: size, square: square, ...rest }));
 });
 IconButton.displayName = "IconButton";
 
@@ -805,8 +789,7 @@ const cvaBadge = cvaMerge([
  * @param {BadgeProps} props - The props for the Badge component
  * @returns {JSX.Element} Badge component
  */
-const Badge = (_a) => {
-    var { color = "primary", className, count, max, hideZero = false, dataTestId } = _a; __rest(_a, ["color", "className", "count", "max", "hideZero", "dataTestId"]);
+const Badge = ({ color = "primary", className, count, max, hideZero = false, dataTestId, ...rest }) => {
     if (hideZero && count === 0) {
         return null;
     }
@@ -1566,9 +1549,8 @@ const ROLE_CARD = "region";
  * @param {CardProps} props - The props for the Card component
  * @returns {JSX.Element} Card component
  */
-const Card = (_a) => {
-    var { children, onClick, fullHeight = false, onMouseEnter, onMouseLeave, className, dataTestId } = _a, rest = __rest(_a, ["children", "onClick", "fullHeight", "onMouseEnter", "onMouseLeave", "className", "dataTestId"]);
-    return (jsx("div", Object.assign({ className: cvaCard({ fullHeight, clickable: Boolean(onClick), className }), "data-testid": dataTestId, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, role: ROLE_CARD }, rest, { children: children })));
+const Card = ({ children, onClick, fullHeight = false, onMouseEnter, onMouseLeave, className, dataTestId, ...rest }) => {
+    return (jsx("div", { className: cvaCard({ fullHeight, clickable: Boolean(onClick), className }), "data-testid": dataTestId, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, role: ROLE_CARD, ...rest, children: children }));
 };
 
 /**
@@ -1636,15 +1618,18 @@ const cvaHeading = cvaMerge(["m-0", "leading-normal", "text-black"], {
  * @param {HeadingProps} props - The props for the Heading component
  * @returns {JSX.Element} Heading component
  */
-const Heading = (_a) => {
-    var { variant = "primary", inverted = false, subtle = false, className, dataTestId } = _a, rest = __rest(_a, ["variant", "inverted", "subtle", "className", "dataTestId"]);
+const Heading = ({ variant = "primary", inverted = false, subtle = false, className, dataTestId, ...rest }) => {
     const semanticType = {
         primary: "h1",
         secondary: "h2",
         tertiary: "h3",
         subtitle: "h4",
     };
-    return React.createElement(semanticType[variant], Object.assign(Object.assign({}, rest), { className: cvaHeading({ subtle, inverted, size: variant, className }), "data-testid": dataTestId }));
+    return React.createElement(semanticType[variant], {
+        ...rest,
+        className: cvaHeading({ subtle, inverted, size: variant, className }),
+        "data-testid": dataTestId,
+    });
 };
 
 /**
@@ -1710,7 +1695,6 @@ const cvaChevronIcon = cvaMerge([
     },
 });
 
-const LABEL_ID = v4();
 /**
  * The Collapse component is a container for additional information that adds context to various flows. It is used for displaying non-essential information that can be hidden away.
  *
@@ -1729,6 +1713,7 @@ const LABEL_ID = v4();
  * @returns {JSX.Element} Collapse component
  */
 const Collapse = ({ id, initialExpanded = false, onToggle, label, children, className, headerClassName, headerAddon, dataTestId, }) => {
+    const LABEL_ID = v4();
     const [expanded, setExpanded] = React.useState(initialExpanded);
     const handleClick = React.useCallback((e) => {
         if (onToggle) {
@@ -1756,16 +1741,15 @@ const Collapsible = ({ children, expanded, id }) => {
  * @param {boolean} props.warning - Indicates if the process has a warning.
  * @param {boolean} props.success - Indicates if the process was successful.
  */
-const CompletionStatusIndicator = (_a) => {
-    var { loading, error, success } = _a, rest = __rest(_a, ["loading", "error", "success"]);
+const CompletionStatusIndicator = ({ loading, error, success, ...rest }) => {
     if (loading) {
-        return jsx(Spinner, Object.assign({ className: "h-[22px] w-[22px]", containerClassName: "w-min" }, rest));
+        return jsx(Spinner, { className: "h-[22px] w-[22px]", containerClassName: "w-min", ...rest });
     }
     if (error) {
-        return jsx(Icon, Object.assign({ color: "danger", name: "XCircle", type: "solid" }, rest));
+        return jsx(Icon, { color: "danger", name: "XCircle", type: "solid", ...rest });
     }
     if (success) {
-        return jsx(Icon, Object.assign({ color: "success", name: "CheckCircle", type: "solid" }, rest));
+        return jsx(Icon, { color: "success", name: "CheckCircle", type: "solid", ...rest });
     }
     return null;
 };
@@ -3293,8 +3277,7 @@ const ExternalLink = ({ rel = "noreferrer", target = "_blank", href, className,
  * @param {PopoverProps} options The options for the popover
  * @returns {ReturnType<typeof usePopover>} The data for the popover
  */
-const usePopover = (_a) => {
-    var { initialOpen = false, placement = "bottom", isModal, isOpen: controlledIsOpen, activation = { click: true, hover: false }, dismissal, onOpenStateChange } = _a, restOptions = __rest(_a, ["initialOpen", "placement", "isModal", "isOpen", "activation", "dismissal", "onOpenStateChange"]);
+const usePopover = ({ initialOpen = false, placement = "bottom", isModal, isOpen: controlledIsOpen, activation = { click: true, hover: false }, dismissal, onOpenStateChange, ...restOptions }) => {
     const [uncontrolledIsOpen, setUncontrolledIsOpen] = useState(initialOpen);
     const [labelId, setLabelId] = useState();
     const [descriptionId, setDescriptionId] = useState();
@@ -3332,11 +3315,25 @@ const usePopover = (_a) => {
         dismissInteraction,
         roleInteraction,
     ]);
-    return useMemo(() => (Object.assign(Object.assign(Object.assign(Object.assign({ isOpen, setIsOpen: setUncontrolledIsOpen }, omit(popoverData, "middlewareData", "floatingStyles", "elements")), { x: popoverData.x, y: popoverData.y, isPositioned: popoverData.isPositioned, refs: popoverData.refs, update: popoverData.update, placement: popoverData.placement, strategy: popoverData.strategy }), combinedInteractions), { isModal,
+    return useMemo(() => ({
+        isOpen,
+        setIsOpen: setUncontrolledIsOpen,
+        ...omit(popoverData, "middlewareData", "floatingStyles", "elements"),
+        x: popoverData.x,
+        y: popoverData.y,
+        isPositioned: popoverData.isPositioned,
+        refs: popoverData.refs,
+        update: popoverData.update,
+        placement: popoverData.placement,
+        strategy: popoverData.strategy,
+        ...combinedInteractions,
+        isModal,
         labelId,
         descriptionId,
         setLabelId,
-        setDescriptionId, customProps: restOptions })), [isOpen, setUncontrolledIsOpen, combinedInteractions, popoverData, isModal, labelId, descriptionId, restOptions]);
+        setDescriptionId,
+        customProps: restOptions,
+    }), [isOpen, setUncontrolledIsOpen, combinedInteractions, popoverData, isModal, labelId, descriptionId, restOptions]);
 };
 
 const PopoverContext = createContext(null);
@@ -3366,9 +3363,8 @@ const usePopoverContext = () => {
  * @param {PopoverProps} props The props for the popover
  * @returns {JSX.Element} A Popover Context Provider containing the children
  */
-const Popover = (_a) => {
-    var { children, isModal = false } = _a, restOptions = __rest(_a, ["children", "isModal"]);
-    const popover = usePopover(Object.assign({ isModal }, restOptions));
+const Popover = ({ children, isModal = false, ...restOptions }) => {
+    const popover = usePopover({ isModal, ...restOptions });
     return jsx(PopoverContext.Provider, { value: popover, children: children });
 };
 
@@ -3383,12 +3379,17 @@ const cvaPopoverTitleContainer = cvaMerge(["flex", "items-center", "px-2", "py-1
 });
 const cvaPopoverTitleText = cvaMerge(["flex-1", "text-neutral-500"]);
 
-const PopoverContent = React__default.forwardRef(function PopoverContent(_a, propRef) {
-    var _b;
-    var { className, dataTestId, children, portalId } = _a, props = __rest(_a, ["className", "dataTestId", "children", "portalId"]);
-    const _c = usePopoverContext(), { context: floatingContext, customProps } = _c, context = __rest(_c, ["context", "customProps"]);
+const PopoverContent = React__default.forwardRef(function PopoverContent({ className, dataTestId, children, portalId, ...props }, propRef) {
+    var _a;
+    const { context: floatingContext, customProps, ...context } = usePopoverContext();
     const ref = useMergeRefs([context.refs.setFloating, propRef]);
-    return (jsx(FloatingPortal, { id: portalId !== null && portalId !== void 0 ? portalId : "tu-floating-ui", children: context.isOpen ? (jsx(FloatingFocusManager, { closeOnFocusOut: false, context: floatingContext, guards: false, modal: context.isModal, order: ["reference", "content"], returnFocus: false, children: jsx("div", Object.assign({ "aria-describedby": context.descriptionId, "aria-labelledby": context.labelId, className: cvaPopoverContainer({ className: className !== null && className !== void 0 ? className : customProps.className }), "data-testid": (_b = dataTestId !== null && dataTestId !== void 0 ? dataTestId : customProps.dataTestId) !== null && _b !== void 0 ? _b : "popover-content", ref: ref, style: Object.assign({ position: context.strategy, top: context.y, left: context.x, width: "max-content" }, props.style) }, context.getFloatingProps(props), { children: typeof children === "function" ? children(() => context.setIsOpen(false)) : children })) })) : null }));
+    return (jsx(FloatingPortal, { id: portalId !== null && portalId !== void 0 ? portalId : "tu-floating-ui", children: context.isOpen ? (jsx(FloatingFocusManager, { closeOnFocusOut: false, context: floatingContext, guards: false, modal: context.isModal, order: ["reference", "content"], returnFocus: false, children: jsx("div", { "aria-describedby": context.descriptionId, "aria-labelledby": context.labelId, className: cvaPopoverContainer({ className: className !== null && className !== void 0 ? className : customProps.className }), "data-testid": (_a = dataTestId !== null && dataTestId !== void 0 ? dataTestId : customProps.dataTestId) !== null && _a !== void 0 ? _a : "popover-content", ref: ref, style: {
+                    position: context.strategy,
+                    top: context.y,
+                    left: context.x,
+                    width: "max-content",
+                    ...props.style,
+                }, ...context.getFloatingProps(props), children: typeof children === "function" ? children(() => context.setIsOpen(false)) : children }) })) : null }));
 });
 
 /**
@@ -3401,17 +3402,21 @@ const PopoverTitle = ({ children, action, divider = false, className, dataTestId
     return (jsxs("div", { className: cvaPopoverTitleContainer({ divider, className }), "data-testid": dataTestId, children: [jsx(Text, { className: cvaPopoverTitleText(), size: "small", subtle: true, type: "div", uppercase: true, weight: "bold", children: children }), action] }));
 };
 
-const PopoverTrigger = forwardRef(function PopoverTrigger(_a, propRef) {
-    var { children, renderButton } = _a, props = __rest(_a, ["children", "renderButton"]);
+const PopoverTrigger = forwardRef(function PopoverTrigger({ children, renderButton, ...props }, propRef) {
     const context = usePopoverContext();
     // eslint-disable-next-line @typescript-eslint/no-explicit-any, local-rules/no-typescript-assertion
     const childrenRef = children.ref;
     const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef]);
     if (!renderButton && isValidElement(children)) {
-        return cloneElement(children, context.getReferenceProps(Object.assign(Object.assign(Object.assign({ ref }, props), children.props), { "data-state": context.isOpen ? "open" : "closed" })));
+        return cloneElement(children, context.getReferenceProps({
+            ref,
+            ...props,
+            ...children.props,
+            "data-state": context.isOpen ? "open" : "closed",
+        }));
     }
     else {
-        return (jsx(Button, Object.assign({ "data-state": context.isOpen ? "open" : "closed", ref: ref, type: "button" }, context.getReferenceProps(props), { children: children })));
+        return (jsx(Button, { "data-state": context.isOpen ? "open" : "closed", ref: ref, type: "button", ...context.getReferenceProps(props), children: children }));
     }
 });
 
@@ -3503,7 +3508,7 @@ const Tooltip = ({ children, dataTestId = "tool-tip", disabled, className, label
     if (disabled) {
         return wrappedChildren;
     }
-    return (jsxs(Popover, { activation: { hover: true }, className: cvaTooltipPopover(), dataTestId: dataTestId, placement: placement === "auto" ? "bottom" : placement, children: [jsx(PopoverTrigger, { className: cvaTooltipIcon({ color: mode, className }), "data-testid": dataTestId ? `${dataTestId}-trigger` : null, onMouseEnter: () => setIsOpen(true), onMouseLeave: () => setIsOpen(false), ref: refs.setReference, children: children === undefined ? (jsx("div", { children: jsx(Icon, Object.assign({ dataTestId: dataTestId ? `${dataTestId}-icon` : undefined, name: "QuestionMarkCircle", size: "small" }, iconProps)) })) : (wrappedChildren) }), isMounted ? (jsx("div", { ref: refs.setFloating, style: floatingStyles, children: jsx(PopoverContent, { children: jsxs("div", { "aria-label": typeof label === "string" ? label : undefined, className: cvaTooltipPopoverContent({ color: mode }), "data-testid": `${dataTestId}-content`, children: [jsx(Text, { inverted: mode === "dark", type: typeof label === "string" ? "p" : "span", children: label }), placement !== "auto" && jsx(FloatingArrowContainer, { arrowRef: arrowRef, mode: mode })] }) }) })) : null] }));
+    return (jsxs(Popover, { activation: { hover: true }, className: cvaTooltipPopover(), dataTestId: dataTestId, placement: placement === "auto" ? "bottom" : placement, children: [jsx(PopoverTrigger, { className: cvaTooltipIcon({ color: mode, className }), "data-testid": dataTestId ? `${dataTestId}-trigger` : null, onMouseEnter: () => setIsOpen(true), onMouseLeave: () => setIsOpen(false), ref: refs.setReference, children: children === undefined ? (jsx("div", { children: jsx(Icon, { dataTestId: dataTestId ? `${dataTestId}-icon` : undefined, name: "QuestionMarkCircle", size: "small", ...iconProps }) })) : (wrappedChildren) }), isMounted ? (jsx("div", { ref: refs.setFloating, style: floatingStyles, children: jsx(PopoverContent, { children: jsxs("div", { "aria-label": typeof label === "string" ? label : undefined, className: cvaTooltipPopoverContent({ color: mode }), "data-testid": `${dataTestId}-content`, children: [jsx(Text, { inverted: mode === "dark", type: typeof label === "string" ? "p" : "span", children: label }), placement !== "auto" && jsx(FloatingArrowContainer, { arrowRef: arrowRef, mode: mode })] }) }) })) : null] }));
 };
 
 const cvaIndicator = cvaMerge(["flex", "items-center"]);
@@ -3604,9 +3609,8 @@ const cvaIndicatorIconBackground = cvaMerge(["rounded-full", "items-center", "ju
  * @param {IndicatorProps} props - The props for the Indicator component
  * @returns {JSX.Element} Indicator component
  */
-const Indicator = (_a) => {
-    var { dataTestId, icon, label, color = "unknown", withBackground = true, withLabel = true, ping = false, className } = _a, rest = __rest(_a, ["dataTestId", "icon", "label", "color", "withBackground", "withLabel", "ping", "className"]);
-    return (jsx(Tooltip, { className: className, disabled: withLabel, label: label, placement: "bottom", children: jsxs("div", Object.assign({ "aria-label": label, className: cvaIndicator(), "data-testid": dataTestId }, rest, { children: [jsxs("div", { className: cvaIndicatorIconBackground({ color, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background", children: [ping ? (jsx("div", { className: cvaIndicatorPing({ color }), "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping" })) : null, icon] }), label !== undefined && withLabel ? (jsx("div", { className: cvaIndicatorLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label", children: label })) : null] })) }));
+const Indicator = ({ dataTestId, icon, label, color = "unknown", withBackground = true, withLabel = true, ping = false, className, ...rest }) => {
+    return (jsx(Tooltip, { className: className, disabled: withLabel, label: label, placement: "bottom", children: jsxs("div", { "aria-label": label, className: cvaIndicator(), "data-testid": dataTestId, ...rest, children: [jsxs("div", { className: cvaIndicatorIconBackground({ color, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background", children: [ping ? (jsx("div", { className: cvaIndicatorPing({ color }), "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping" })) : null, icon] }), label !== undefined && withLabel ? (jsx("div", { className: cvaIndicatorLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label", children: label })) : null] }) }));
 };
 
 const cvaKPICardContainer = cvaMerge(["inline-flex"], {
@@ -3657,13 +3661,12 @@ const LoadingContent = () => (jsxs("div", { className: "flex flex-row items-cent
  * @param {KPICardProps} props - The props for the KPICard component
  * @returns {JSX.Element} KPICard component
  */
-const KPICard = (_a) => {
-    var { asChild = false, title, value, loading, unit, iconName, iconBackgroundColor, className, dataTestId, tooltipLabel, isActive, onClick } = _a, rest = __rest(_a, ["asChild", "title", "value", "loading", "unit", "iconName", "iconBackgroundColor", "className", "dataTestId", "tooltipLabel", "isActive", "onClick"]);
+const KPICard = ({ asChild = false, title, value, loading, unit, iconName, iconBackgroundColor, className, dataTestId, tooltipLabel, isActive, onClick, ...rest }) => {
     const Comp = asChild ? Slot : "div";
     const CardContent = () => {
         return (jsx(Card, { className: cvaKPICard({ isClickable: Boolean((onClick || asChild) && !loading), isActive }), children: loading ? (jsx(LoadingContent, {})) : (jsxs(Fragment, { children: [iconName ? (jsx("div", { className: cvaKPICardIconContainer({ backgroundColor: iconBackgroundColor }), "data-testid": `${dataTestId}-icon-container`, children: jsx(Icon, { color: "white", dataTestId: `${dataTestId}-icon`, name: iconName, size: "medium" }) })) : null, jsxs("div", { children: [jsx(Text, { dataTestId: `${dataTestId}-title`, subtle: true, weight: "bold", children: title }), jsxs(Text, { dataTestId: `${dataTestId}-value`, size: "large", weight: "bold", children: [value, " ", unit] })] })] })) }));
     };
-    return (jsxs(Comp, Object.assign({ className: cvaKPICardContainer({ className, isClickable: Boolean(asChild || onClick) }), "data-testid": `${dataTestId}-comp`, onClick: onClick }, rest, { children: [tooltipLabel ? (jsx(Tooltip, { className: "w-full", label: tooltipLabel, placement: "bottom", children: jsx(CardContent, {}) })) : (jsx(CardContent, {})), !loading && jsx(Slottable, { children: rest.children })] })));
+    return (jsxs(Comp, { className: cvaKPICardContainer({ className, isClickable: Boolean(asChild || onClick) }), "data-testid": `${dataTestId}-comp`, onClick: onClick, ...rest, children: [tooltipLabel ? (jsx(Tooltip, { className: "w-full", label: tooltipLabel, placement: "bottom", children: jsx(CardContent, {}) })) : (jsx(CardContent, {})), !loading && jsx(Slottable, { children: rest.children })] }));
 };
 
 const cvaMenuItem = cvaMerge([
@@ -3742,7 +3745,7 @@ const cvaMenuItemPrefix = cvaMerge(["self-center", "flex-grow-0", "text-slate-40
  */
 const MenuItem = ({ className, dataTestId, label, size, children, selected, focused, prefix, suffix, disabled, onClick, stopPropagation = true, id, tabIndex, }) => {
     const containerProps = useContainerProps({ className, dataTestId: dataTestId || "menu-item" });
-    return (jsxs("div", Object.assign({}, containerProps, { className: cvaMenuItem({
+    return (jsxs("div", { ...containerProps, className: cvaMenuItem({
             selected,
             focused,
             disabled,
@@ -3751,7 +3754,7 @@ const MenuItem = ({ className, dataTestId, label, size, children, selected, focu
         }), id: id, onClick: e => {
             stopPropagation && e.stopPropagation();
             onClick && onClick(e);
-        }, tabIndex: tabIndex !== null && tabIndex !== void 0 ? tabIndex : 0, children: [prefix ? (jsx("div", { className: cvaMenuItemPrefix({ selected }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, children: prefix })) : null, children && typeof children !== "string" ? (children) : (jsx("div", { className: cvaMenuItemLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : null, children: children !== null && children !== void 0 ? children : label })), suffix ? (jsx("div", { className: cvaMenuItemSuffix({ selected }), "data-testid": dataTestId ? `${dataTestId}-suffix` : null, children: suffix })) : null] })));
+        }, tabIndex: tabIndex !== null && tabIndex !== void 0 ? tabIndex : 0, children: [prefix ? (jsx("div", { className: cvaMenuItemPrefix({ selected }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, children: prefix })) : null, children && typeof children !== "string" ? (children) : (jsx("div", { className: cvaMenuItemLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : null, children: children !== null && children !== void 0 ? children : label })), suffix ? (jsx("div", { className: cvaMenuItemSuffix({ selected }), "data-testid": dataTestId ? `${dataTestId}-suffix` : null, children: suffix })) : null] }));
 };
 
 const cvaMenuList = cvaMerge(["shadow-md", "rounded-lg", "z-20", "bg-white", "p-1", "border", "border-slate-300", "gap-1", "grid"], {
@@ -3775,8 +3778,7 @@ const cvaMenuListDivider = cvaMerge([
  * @param {MenuListProps} props - The props for the MenuList component
  * @returns {JSX.Element} MenuList component
  */
-const MenuList = (_a) => {
-    var { dataTestId, className, children, withStickyHeader = false, showDivider = false } = _a, args = __rest(_a, ["dataTestId", "className", "children", "withStickyHeader", "showDivider"]);
+const MenuList = ({ dataTestId, className, children, withStickyHeader = false, showDivider = false, ...args }) => {
     const childrenArr = Children.toArray(children);
     const isLastItem = (index) => index === childrenArr.length - 1;
     return (jsx("div", { className: cvaMenuList({ stickyHeader: withStickyHeader, className }), "data-testid": dataTestId, onClick: args.onClick, role: "list", tabIndex: 0, children: Children.map(childrenArr, (menuItem, index) => (jsxs(Fragment, { children: [menuItem, showDivider && !isLastItem(index) ? jsx("hr", { className: cvaMenuListDivider() }) : null] }))) }));
@@ -3800,7 +3802,7 @@ const MoreMenu = ({ className, dataTestId, popoverProps, iconProps = {
     variant: "secondary",
 }, customButton, customPortalId, children, }) => {
     const actionMenuRef = useRef(null);
-    return (jsx("div", { className: cvaMoreMenu({ className }), "data-testid": dataTestId, ref: actionMenuRef, children: jsxs(Popover, Object.assign({}, popoverProps, { children: [jsx(PopoverTrigger, { children: customButton !== null && customButton !== void 0 ? customButton : jsx(IconButton, Object.assign({}, iconButtonProps, { icon: jsx(Icon, Object.assign({ name: "EllipsisHorizontal" }, iconProps)) })) }), jsx(PopoverContent, { portalId: customPortalId, children: close => (typeof children === "function" ? children(close) : children) })] })) }));
+    return (jsx("div", { className: cvaMoreMenu({ className }), "data-testid": dataTestId, ref: actionMenuRef, children: jsxs(Popover, { ...popoverProps, children: [jsx(PopoverTrigger, { children: customButton !== null && customButton !== void 0 ? customButton : jsx(IconButton, { ...iconButtonProps, icon: jsx(Icon, { name: "EllipsisHorizontal", ...iconProps }) }) }), jsx(PopoverContent, { portalId: customPortalId, children: close => (typeof children === "function" ? children(close) : children) })] }) }));
 };
 
 const cvaNotice = cvaMerge(["flex", "items-center"]);
@@ -3853,9 +3855,8 @@ const cvaNoticeIcon = cvaMerge(["rounded-full", "items-center", "justify-center"
  * @param {NoticeProps} props - The props for the Notice component
  * @returns {JSX.Element} Notice component
  */
-const Notice = (_a) => {
-    var { dataTestId, icon, label, color = "neutral", withLabel = true, className, tooltipLabel = label, withTooltip = false } = _a, rest = __rest(_a, ["dataTestId", "icon", "label", "color", "withLabel", "className", "tooltipLabel", "withTooltip"]);
-    return (jsx(Tooltip, { className: className, disabled: !withTooltip, label: tooltipLabel, placement: "bottom", children: jsxs("div", Object.assign({ "aria-label": label, className: cvaNotice(), "data-testid": dataTestId }, rest, { children: [jsx("div", { className: cvaNoticeIcon({ color }), "data-testid": dataTestId ? `${dataTestId}-icon` : "notice-icon", children: icon }), label !== undefined && withLabel ? (jsx("div", { className: cvaNoticeLabel({ color }), "data-testid": dataTestId ? `${dataTestId}-label` : "notice-label", children: label })) : null] })) }));
+const Notice = ({ dataTestId, icon, label, color = "neutral", withLabel = true, className, tooltipLabel = label, withTooltip = false, ...rest }) => {
+    return (jsx(Tooltip, { className: className, disabled: !withTooltip, label: tooltipLabel, placement: "bottom", children: jsxs("div", { "aria-label": label, className: cvaNotice(), "data-testid": dataTestId, ...rest, children: [jsx("div", { className: cvaNoticeIcon({ color }), "data-testid": dataTestId ? `${dataTestId}-icon` : "notice-icon", children: icon }), label !== undefined && withLabel ? (jsx("div", { className: cvaNoticeLabel({ color }), "data-testid": dataTestId ? `${dataTestId}-label` : "notice-label", children: label })) : null] }) }));
 };
 
 const cvaPage = cvaMerge(["grid", "h-full"], {
@@ -4111,7 +4112,7 @@ const useOverflowItems = ({ threshold = 1, childUniqueIdentifierAttribute = "id"
                 updatedEntries[targetElementId] = entry.isIntersecting ? false : true;
             }
         });
-        setItemOverflowMap(prev => (Object.assign(Object.assign({}, prev), updatedEntries)));
+        setItemOverflowMap(prev => ({ ...prev, ...updatedEntries }));
     }, [childUniqueIdentifierAttribute]);
     const observe = useCallback(() => {
         const node = overflowContainerRef.current;
@@ -4172,10 +4173,10 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
                     return React__default.cloneElement(child, {
                         className: twMerge(child.props.className, itemVisibilityClassName(child.props.id)),
                     });
-                }) }), overflowItemCount > 0 ? (jsx(MoreMenu, Object.assign({ iconButtonProps: {
+                }) }), overflowItemCount > 0 ? (jsx(MoreMenu, { iconButtonProps: {
                     circular: false,
                     variant: "ghost-neutral",
-                }, popoverProps: { placement: "bottom-end" } }, moreMenuProps, { className: twMerge(moreMenuProps === null || moreMenuProps === void 0 ? void 0 : moreMenuProps.className, "!p-0"), dataTestId: dataTestId ? `${dataTestId}-more-menu` : undefined, children: close => (jsx(MenuList, Object.assign({}, menuListProps, { dataTestId: dataTestId ? `${dataTestId}-menu-list` : undefined, children: React__default.Children.map(children, child => {
+                }, popoverProps: { placement: "bottom-end" }, ...moreMenuProps, className: twMerge(moreMenuProps === null || moreMenuProps === void 0 ? void 0 : moreMenuProps.className, "!p-0"), dataTestId: dataTestId ? `${dataTestId}-more-menu` : undefined, children: close => (jsx(MenuList, { ...menuListProps, dataTestId: dataTestId ? `${dataTestId}-menu-list` : undefined, children: React__default.Children.map(children, child => {
                         return itemOverflowMap[child.props.id]
                             ? React__default.cloneElement(child, {
                                 onClick: () => {
@@ -4185,7 +4186,7 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
                                 },
                             })
                             : null;
-                    }) }))) }))) : null] }));
+                    }) })) })) : null] }));
 };
 
 const cvaTabsRoot = cvaMerge([]);
@@ -4239,35 +4240,37 @@ const cvaTab = cvaMerge([
  * 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.
  */
-const Tab = (_a) => {
-    var { value, isFullWidth = false, iconName, dataTestId, className, children, suffix, asChild, appendTabStylesToChildIfAsChild = true } = _a, rest = __rest(_a, ["value", "isFullWidth", "iconName", "dataTestId", "className", "children", "suffix", "asChild", "appendTabStylesToChildIfAsChild"]);
+const Tab = ({ value, isFullWidth = false, iconName, dataTestId, className, children, suffix, asChild, appendTabStylesToChildIfAsChild = true, ...rest }) => {
     const renderContent = () => (jsxs(Fragment, { children: [iconName ? jsx(Icon, { name: iconName, size: "small" }) : null, React__default.isValidElement(children) ? children.props.children : children, suffix] }));
-    const commonProps = Object.assign({ className: appendTabStylesToChildIfAsChild ? cvaTab({ className, isFullWidth }) : className }, rest);
-    return (jsx(Trigger, { asChild: true, value: value, children: asChild && typeof children !== "string" ? (React__default.cloneElement(children, Object.assign(Object.assign({}, commonProps), { children: renderContent() }))) : (jsx("button", Object.assign({}, commonProps, { "data-testid": dataTestId, children: renderContent() }))) }));
+    const commonProps = {
+        className: appendTabStylesToChildIfAsChild ? cvaTab({ className, isFullWidth }) : className,
+        ...rest,
+    };
+    return (jsx(Trigger, { asChild: true, value: value, children: asChild && typeof children !== "string" ? (React__default.cloneElement(children, {
+            ...commonProps,
+            children: renderContent(),
+        })) : (jsx("button", { ...commonProps, "data-testid": dataTestId, children: renderContent() })) }));
 };
 
 /**
  * Wrapper for radix tab content component.
  */
-const TabContent = (_a) => {
-    var { className, dataTestId, children } = _a, rest = __rest(_a, ["className", "dataTestId", "children"]);
-    return (jsx(Content, Object.assign({ className: cvaTabContent({ className }), "data-testid": dataTestId ? `${dataTestId}-content` : undefined }, rest, { children: children })));
+const TabContent = ({ className, dataTestId, children, ...rest }) => {
+    return (jsx(Content, { className: cvaTabContent({ className }), "data-testid": dataTestId ? `${dataTestId}-content` : undefined, ...rest, children: children }));
 };
 
 /**
  * Wrapper for radix tab list component.
  */
-const TabList = (_a) => {
-    var { className, dataTestId, children } = _a, rest = __rest(_a, ["className", "dataTestId", "children"]);
-    return (jsx(List, Object.assign({ className: cvaTabList({ className }), "data-testid": dataTestId }, rest, { children: children })));
+const TabList = ({ className, dataTestId, children, ...rest }) => {
+    return (jsx(List, { className: cvaTabList({ className }), "data-testid": dataTestId, ...rest, children: children }));
 };
 
 /**
  * Tabs are used to group different but related content, allowing users to navigate views without leaving the page. They always contain at least two items and one tab is active at a time. Tabs can be used on full page layouts or in components such as modals or tables.
  */
-const Tabs = (_a) => {
-    var { children, forceRender, className, dataTestId, fullWidth } = _a, rest = __rest(_a, ["children", "forceRender", "className", "dataTestId", "fullWidth"]);
-    return (jsx(Root, Object.assign({ className: cvaTabsRoot({ className }), "data-testid": dataTestId }, rest, { children: children })));
+const Tabs = ({ children, forceRender, className, dataTestId, fullWidth, ...rest }) => {
+    return (jsx(Root, { className: cvaTabsRoot({ className }), "data-testid": dataTestId, ...rest, children: children }));
 };
 
 const cvaTimeline = cvaMerge("ml-4");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.385",
+  "version": "0.1.388",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -9,7 +9,7 @@
   "dependencies": {
     "@trackunit/ui-design-tokens": "*",
     "@radix-ui/react-slot": "^1.0.2",
-    "react": "^18.2.0",
+    "react": "18.3.1",
     "@trackunit/css-class-variance-utilities": "*",
     "react-use": "^17.4.0",
     "date-fns": "^2.30.0",
@@ -20,7 +20,7 @@
     "zod": "3.22.4",
     "lodash": "4.17.21",
     "jest-fetch-mock": "^3.0.3",
-    "@testing-library/react": "14.0.0",
+    "@testing-library/react": "15.0.6",
     "@floating-ui/react": "^0.26.6",
     "@tanstack/react-router": "1.46.8",
     "string-ts": "^2.0.0",
@@ -29,5 +29,6 @@
     "uuid": "^9.0.1"
   },
   "module": "./index.esm.js",
-  "main": "./index.cjs.js"
-}
+  "main": "./index.cjs.js",
+  "types": "./index.esm.d.ts"
+}

package/src/common/PackageNameStoryComponent.d.ts

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

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

@@ -46,4 +46,4 @@ export interface AlertProps extends CommonProps {
  * @param {AlertProps} props - The props for the Alert component
  * @returns {JSX.Element} Alert component
  */
-export declare const Alert: ({ color, title, className, children, primaryAction, secondaryAction, onClose, dataTestId, autoScroll, }: AlertProps) => JSX.Element;
+export declare const Alert: ({ color, title, className, children, primaryAction, secondaryAction, onClose, dataTestId, autoScroll, }: AlertProps) => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BreadcrumbContainerProps, BreadcrumbItemRenderProps, 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.
@@ -13,14 +12,14 @@ import { BreadcrumbContainerProps, BreadcrumbItemRenderProps, BreadcrumbProps }
  * @param {BreadcrumbProps} props - The props for the Breadcrumb component
  * @returns {JSX.Element} Breadcrumb component
  */
-export declare const Breadcrumb: ({ className, dataTestId, breadcrumbItems, back }: BreadcrumbProps) => JSX.Element;
+export declare const Breadcrumb: ({ className, dataTestId, breadcrumbItems, back }: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * 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) => JSX.Element;
+export declare const BreadcrumbContainer: ({ dataTestId, breadcrumbItems }: BreadcrumbContainerProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * BreadcrumbItem is a helper component that renders the individual breadcrumb item.
  */
-export declare const BreadcrumbItem: ({ item, dataTestId }: BreadcrumbItemRenderProps) => JSX.Element;
+export declare const BreadcrumbItem: ({ item, dataTestId }: BreadcrumbItemRenderProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,5 @@
-/// <reference types="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) => JSX.Element;
+export declare const BreadcrumbForLargeScreen: ({ dataTestId, breadcrumbItems }: BreadcrumbContainerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,5 @@
-/// <reference types="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) => JSX.Element;
+export declare const BreadcrumbForMediumScreen: ({ dataTestId, breadcrumbItems }: BreadcrumbContainerProps) => import("react/jsx-runtime").JSX.Element;