@trackunit/react-components 0.1.386 → 0.1.388

package/index.cjs.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var sharedUtils = require('@trackunit/shared-utils');
@@ -25,10 +23,7 @@ var reactTabs = require('@radix-ui/react-tabs');
 var dateFns = require('date-fns');
 var reactTablePagination = require('@trackunit/react-table-pagination');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
+function _interopNamespaceDefault(e) {
   var n = Object.create(null);
   if (e) {
     Object.keys(e).forEach(function (k) {
@@ -41,17 +36,11 @@ function _interopNamespace(e) {
       }
     });
   }
-  n["default"] = e;
+  n.default = e;
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var IconSpriteMini__default = /*#__PURE__*/_interopDefaultLegacy(IconSpriteMini);
-var IconSpriteOutline__default = /*#__PURE__*/_interopDefaultLegacy(IconSpriteOutline);
-var IconSpriteSolid__default = /*#__PURE__*/_interopDefaultLegacy(IconSpriteSolid);
-var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
-var omit__default = /*#__PURE__*/_interopDefaultLegacy(omit);
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
 const docs = {
     source: {
@@ -164,7 +153,15 @@ cssClassVarianceUtilities.cvaMerge([
     "after:opacity-50",
 ]);
 
-const iconPalette = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, uiDesignTokens.intentPalette), uiDesignTokens.generalPalette), uiDesignTokens.criticalityPalette), uiDesignTokens.activityPalette), uiDesignTokens.utilizationPalette), uiDesignTokens.sitesPalette), uiDesignTokens.rentalStatusPalette);
+const iconPalette = {
+    ...uiDesignTokens.intentPalette,
+    ...uiDesignTokens.generalPalette,
+    ...uiDesignTokens.criticalityPalette,
+    ...uiDesignTokens.activityPalette,
+    ...uiDesignTokens.utilizationPalette,
+    ...uiDesignTokens.sitesPalette,
+    ...uiDesignTokens.rentalStatusPalette,
+};
 const iconColorNames = sharedUtils.objectKeys(iconPalette).map(key => stringTs.snakeCase(key));
 const isSafari = () => {
     const ua = navigator.userAgent.toLowerCase();
@@ -192,9 +189,9 @@ const Icon = ({ name, size = "large", className, dataTestId, color, onClick, typ
     }, [type, size]);
     const iconName = uiIcons.iconNames[name];
     const href = React.useMemo(() => ({
-        solid: `${IconSpriteSolid__default["default"]}#${iconName}`,
-        outline: `${IconSpriteOutline__default["default"]}#${iconName}`,
-        mini: `${IconSpriteMini__default["default"]}#${iconName}`,
+        solid: `${IconSpriteSolid}#${iconName}`,
+        outline: `${IconSpriteOutline}#${iconName}`,
+        mini: `${IconSpriteMini}#${iconName}`,
     }), [iconName]);
     React.useEffect(() => {
         if (isSafari() && useTagRef.current) {
@@ -297,38 +294,6 @@ const PackageNameStoryComponent = ({ packageJSON }) => {
     return (jsxRuntime.jsxs("div", { className: "flex gap-2", children: [jsxRuntime.jsx(Tag, { color: "secondary", children: packageJSON === null || packageJSON === void 0 ? void 0 : packageJSON.name }), jsxRuntime.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 = cssClassVarianceUtilities.cvaMerge(["text-black", "m-0", "relative", "text-sm", "font-normal"], {
     variants: {
         align: {
@@ -392,9 +357,9 @@ const cvaText = cssClassVarianceUtilities.cvaMerge(["text-black", "m-0", "relati
  * @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__namespace.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__namespace.createElement(type, {
+        className: cvaText({
             inverted,
             uppercase,
             align,
@@ -405,7 +370,10 @@ const Text = (_a) => {
             subtle,
             disabled,
             className,
-        }), "data-testid": dataTestId }, rest), children);
+        }),
+        "data-testid": dataTestId,
+        ...rest,
+    }, children);
 };
 
 const cvaSpinner = cssClassVarianceUtilities.cvaMerge([
@@ -710,30 +678,35 @@ const cvaIconButton = cssClassVarianceUtilities.cvaMerge([], {
  * @param {ButtonProps} props - The props for the Button component
  * @returns {JSX.Element} Button component
  */
-const Button = React__namespace.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__namespace.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 ? reactSlot.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 (jsxRuntime.jsxs(Comp, Object.assign({}, 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] })));
+    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__namespace.forwardRef((_a, ref) => {
-    var { icon, size = "medium", square = true, loading, disabled, className } = _a, rest = __rest(_a, ["icon", "size", "square", "loading", "disabled", "className"]);
-    return (jsxRuntime.jsx(Button, Object.assign({ className: cvaIconButton({ size: size, className }), disabled: disabled || loading, loading: loading, 
+const IconButton = React__namespace.forwardRef(({ icon, size = "medium", square = true, loading, disabled, className, ...rest }, ref) => {
+    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)));
+        prefix: !loading ? icon : undefined, ref: ref, size: size, square: square, ...rest }));
 });
 IconButton.displayName = "IconButton";
 
@@ -836,8 +809,7 @@ const cvaBadge = cssClassVarianceUtilities.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;
     }
@@ -910,7 +882,7 @@ const initLocalStorageState = ({ key, defaultState, schema, }) => {
 const useLocalStorageEffect = ({ key, state, defaultState, schema, onValidationFailed, onValidationSuccessful, }) => {
     const prevState = reactUse.usePrevious(state);
     React.useEffect(() => {
-        if (isEqual__default["default"](prevState, state)) {
+        if (isEqual(prevState, state)) {
             return;
         }
         if (schema) {
@@ -1415,8 +1387,8 @@ const BreadcrumbForLargeScreen = ({ dataTestId, breadcrumbItems }) => {
  * BreadcrumbForMediumScreen is a helper component that renders the breadcrumb items for medium screens.
  */
 const BreadcrumbForMediumScreen = ({ dataTestId, breadcrumbItems }) => {
-    const [expanded, setExpanded] = React__default["default"].useState(false);
-    const getReducedArray = React__default["default"].useCallback(() => {
+    const [expanded, setExpanded] = React.useState(false);
+    const getReducedArray = React.useCallback(() => {
         let reducedArrayElements = [];
         const collapsibleButton = (jsxRuntime.jsxs("div", { className: cvaBreadcrumbItem(), children: [jsxRuntime.jsx(IconButton, { dataTestId: `collapsibleButton-${dataTestId}`, icon: jsxRuntime.jsx(Icon, { name: "EllipsisHorizontal", size: "small" }), onClick: () => setExpanded(true), size: "small", variant: "ghost-neutral" }), jsxRuntime.jsx(Icon, { color: "secondary", name: "Slash", size: "small" })] }));
         const firstBreadcrumbItem = breadcrumbItems[0];
@@ -1597,9 +1569,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 (jsxRuntime.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 (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 }));
 };
 
 /**
@@ -1667,15 +1638,18 @@ const cvaHeading = cssClassVarianceUtilities.cvaMerge(["m-0", "leading-normal",
  * @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__namespace.createElement(semanticType[variant], Object.assign(Object.assign({}, rest), { className: cvaHeading({ subtle, inverted, size: variant, className }), "data-testid": dataTestId }));
+    return React__namespace.createElement(semanticType[variant], {
+        ...rest,
+        className: cvaHeading({ subtle, inverted, size: variant, className }),
+        "data-testid": dataTestId,
+    });
 };
 
 /**
@@ -1787,16 +1761,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 jsxRuntime.jsx(Spinner, Object.assign({ className: "h-[22px] w-[22px]", containerClassName: "w-min" }, rest));
+        return jsxRuntime.jsx(Spinner, { className: "h-[22px] w-[22px]", containerClassName: "w-min", ...rest });
     }
     if (error) {
-        return jsxRuntime.jsx(Icon, Object.assign({ color: "danger", name: "XCircle", type: "solid" }, rest));
+        return jsxRuntime.jsx(Icon, { color: "danger", name: "XCircle", type: "solid", ...rest });
     }
     if (success) {
-        return jsxRuntime.jsx(Icon, Object.assign({ color: "success", name: "CheckCircle", type: "solid" }, rest));
+        return jsxRuntime.jsx(Icon, { color: "success", name: "CheckCircle", type: "solid", ...rest });
     }
     return null;
 };
@@ -3324,8 +3297,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] = React.useState(initialOpen);
     const [labelId, setLabelId] = React.useState();
     const [descriptionId, setDescriptionId] = React.useState();
@@ -3363,11 +3335,25 @@ const usePopover = (_a) => {
         dismissInteraction,
         roleInteraction,
     ]);
-    return React.useMemo(() => (Object.assign(Object.assign(Object.assign(Object.assign({ isOpen, setIsOpen: setUncontrolledIsOpen }, omit__default["default"](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 React.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 = React.createContext(null);
@@ -3397,9 +3383,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 jsxRuntime.jsx(PopoverContext.Provider, { value: popover, children: children });
 };
 
@@ -3414,12 +3399,17 @@ const cvaPopoverTitleContainer = cssClassVarianceUtilities.cvaMerge(["flex", "it
 });
 const cvaPopoverTitleText = cssClassVarianceUtilities.cvaMerge(["flex-1", "text-neutral-500"]);
 
-const PopoverContent = React__default["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.forwardRef(function PopoverContent({ className, dataTestId, children, portalId, ...props }, propRef) {
+    var _a;
+    const { context: floatingContext, customProps, ...context } = usePopoverContext();
     const ref = react.useMergeRefs([context.refs.setFloating, propRef]);
-    return (jsxRuntime.jsx(react.FloatingPortal, { id: portalId !== null && portalId !== void 0 ? portalId : "tu-floating-ui", children: context.isOpen ? (jsxRuntime.jsx(react.FloatingFocusManager, { closeOnFocusOut: false, context: floatingContext, guards: false, modal: context.isModal, order: ["reference", "content"], returnFocus: false, children: jsxRuntime.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 (jsxRuntime.jsx(react.FloatingPortal, { id: portalId !== null && portalId !== void 0 ? portalId : "tu-floating-ui", children: context.isOpen ? (jsxRuntime.jsx(react.FloatingFocusManager, { closeOnFocusOut: false, context: floatingContext, guards: false, modal: context.isModal, order: ["reference", "content"], returnFocus: false, children: jsxRuntime.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 }));
 });
 
 /**
@@ -3432,17 +3422,21 @@ 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(_a, propRef) {
-    var { children, renderButton } = _a, props = __rest(_a, ["children", "renderButton"]);
+const PopoverTrigger = React.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 = react.useMergeRefs([context.refs.setReference, propRef, childrenRef]);
     if (!renderButton && React.isValidElement(children)) {
-        return React.cloneElement(children, context.getReferenceProps(Object.assign(Object.assign(Object.assign({ ref }, props), children.props), { "data-state": context.isOpen ? "open" : "closed" })));
+        return React.cloneElement(children, context.getReferenceProps({
+            ref,
+            ...props,
+            ...children.props,
+            "data-state": context.isOpen ? "open" : "closed",
+        }));
     }
     else {
-        return (jsxRuntime.jsx(Button, Object.assign({ "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 }));
     }
 });
 
@@ -3534,7 +3528,7 @@ const Tooltip = ({ children, dataTestId = "tool-tip", disabled, className, label
     if (disabled) {
         return wrappedChildren;
     }
-    return (jsxRuntime.jsxs(Popover, { activation: { hover: true }, className: cvaTooltipPopover(), dataTestId: dataTestId, placement: placement === "auto" ? "bottom" : placement, children: [jsxRuntime.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 ? (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(Icon, Object.assign({ dataTestId: dataTestId ? `${dataTestId}-icon` : undefined, name: "QuestionMarkCircle", size: "small" }, iconProps)) })) : (wrappedChildren) }), isMounted ? (jsxRuntime.jsx("div", { ref: refs.setFloating, style: floatingStyles, children: jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs("div", { "aria-label": typeof label === "string" ? label : undefined, className: cvaTooltipPopoverContent({ color: mode }), "data-testid": `${dataTestId}-content`, children: [jsxRuntime.jsx(Text, { inverted: mode === "dark", type: typeof label === "string" ? "p" : "span", children: label }), placement !== "auto" && jsxRuntime.jsx(FloatingArrowContainer, { arrowRef: arrowRef, mode: mode })] }) }) })) : null] }));
+    return (jsxRuntime.jsxs(Popover, { activation: { hover: true }, className: cvaTooltipPopover(), dataTestId: dataTestId, placement: placement === "auto" ? "bottom" : placement, children: [jsxRuntime.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 ? (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(Icon, { dataTestId: dataTestId ? `${dataTestId}-icon` : undefined, name: "QuestionMarkCircle", size: "small", ...iconProps }) })) : (wrappedChildren) }), isMounted ? (jsxRuntime.jsx("div", { ref: refs.setFloating, style: floatingStyles, children: jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs("div", { "aria-label": typeof label === "string" ? label : undefined, className: cvaTooltipPopoverContent({ color: mode }), "data-testid": `${dataTestId}-content`, children: [jsxRuntime.jsx(Text, { inverted: mode === "dark", type: typeof label === "string" ? "p" : "span", children: label }), placement !== "auto" && jsxRuntime.jsx(FloatingArrowContainer, { arrowRef: arrowRef, mode: mode })] }) }) })) : null] }));
 };
 
 const cvaIndicator = cssClassVarianceUtilities.cvaMerge(["flex", "items-center"]);
@@ -3635,9 +3629,8 @@ const cvaIndicatorIconBackground = cssClassVarianceUtilities.cvaMerge(["rounded-
  * @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 (jsxRuntime.jsx(Tooltip, { className: className, disabled: withLabel, label: label, placement: "bottom", children: jsxRuntime.jsxs("div", Object.assign({ "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(), "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 (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(), "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label", children: label })) : null] }) }));
 };
 
 const cvaKPICardContainer = cssClassVarianceUtilities.cvaMerge(["inline-flex"], {
@@ -3688,13 +3681,12 @@ const LoadingContent = () => (jsxRuntime.jsxs("div", { className: "flex flex-row
  * @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 ? reactSlot.Slot : "div";
     const CardContent = () => {
         return (jsxRuntime.jsx(Card, { className: cvaKPICard({ isClickable: Boolean((onClick || asChild) && !loading), isActive }), children: loading ? (jsxRuntime.jsx(LoadingContent, {})) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [iconName ? (jsxRuntime.jsx("div", { className: cvaKPICardIconContainer({ backgroundColor: iconBackgroundColor }), "data-testid": `${dataTestId}-icon-container`, children: jsxRuntime.jsx(Icon, { color: "white", dataTestId: `${dataTestId}-icon`, name: iconName, size: "medium" }) })) : null, jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Text, { dataTestId: `${dataTestId}-title`, subtle: true, weight: "bold", children: title }), jsxRuntime.jsxs(Text, { dataTestId: `${dataTestId}-value`, size: "large", weight: "bold", children: [value, " ", unit] })] })] })) }));
     };
-    return (jsxRuntime.jsxs(Comp, Object.assign({ className: cvaKPICardContainer({ className, isClickable: Boolean(asChild || onClick) }), "data-testid": `${dataTestId}-comp`, onClick: onClick }, rest, { children: [tooltipLabel ? (jsxRuntime.jsx(Tooltip, { className: "w-full", label: tooltipLabel, placement: "bottom", children: jsxRuntime.jsx(CardContent, {}) })) : (jsxRuntime.jsx(CardContent, {})), !loading && jsxRuntime.jsx(reactSlot.Slottable, { children: rest.children })] })));
+    return (jsxRuntime.jsxs(Comp, { className: cvaKPICardContainer({ className, isClickable: Boolean(asChild || onClick) }), "data-testid": `${dataTestId}-comp`, onClick: onClick, ...rest, children: [tooltipLabel ? (jsxRuntime.jsx(Tooltip, { className: "w-full", label: tooltipLabel, placement: "bottom", children: jsxRuntime.jsx(CardContent, {}) })) : (jsxRuntime.jsx(CardContent, {})), !loading && jsxRuntime.jsx(reactSlot.Slottable, { children: rest.children })] }));
 };
 
 const cvaMenuItem = cssClassVarianceUtilities.cvaMerge([
@@ -3773,7 +3765,7 @@ const cvaMenuItemPrefix = cssClassVarianceUtilities.cvaMerge(["self-center", "fl
  */
 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 (jsxRuntime.jsxs("div", Object.assign({}, containerProps, { className: cvaMenuItem({
+    return (jsxRuntime.jsxs("div", { ...containerProps, className: cvaMenuItem({
             selected,
             focused,
             disabled,
@@ -3782,7 +3774,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 ? (jsxRuntime.jsx("div", { className: cvaMenuItemPrefix({ selected }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, children: prefix })) : null, children && typeof children !== "string" ? (children) : (jsxRuntime.jsx("div", { className: cvaMenuItemLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : null, children: children !== null && children !== void 0 ? children : label })), suffix ? (jsxRuntime.jsx("div", { className: cvaMenuItemSuffix({ selected }), "data-testid": dataTestId ? `${dataTestId}-suffix` : null, children: suffix })) : null] })));
+        }, tabIndex: tabIndex !== null && tabIndex !== void 0 ? tabIndex : 0, children: [prefix ? (jsxRuntime.jsx("div", { className: cvaMenuItemPrefix({ selected }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, children: prefix })) : null, children && typeof children !== "string" ? (children) : (jsxRuntime.jsx("div", { className: cvaMenuItemLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : null, children: children !== null && children !== void 0 ? children : label })), suffix ? (jsxRuntime.jsx("div", { className: cvaMenuItemSuffix({ selected }), "data-testid": dataTestId ? `${dataTestId}-suffix` : null, children: suffix })) : null] }));
 };
 
 const cvaMenuList = cssClassVarianceUtilities.cvaMerge(["shadow-md", "rounded-lg", "z-20", "bg-white", "p-1", "border", "border-slate-300", "gap-1", "grid"], {
@@ -3806,8 +3798,7 @@ const cvaMenuListDivider = cssClassVarianceUtilities.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 = React.Children.toArray(children);
     const isLastItem = (index) => index === childrenArr.length - 1;
     return (jsxRuntime.jsx("div", { className: cvaMenuList({ stickyHeader: withStickyHeader, className }), "data-testid": dataTestId, onClick: args.onClick, role: "list", tabIndex: 0, children: React.Children.map(childrenArr, (menuItem, index) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [menuItem, showDivider && !isLastItem(index) ? jsxRuntime.jsx("hr", { className: cvaMenuListDivider() }) : null] }))) }));
@@ -3831,7 +3822,7 @@ const MoreMenu = ({ className, dataTestId, popoverProps, iconProps = {
     variant: "secondary",
 }, customButton, customPortalId, children, }) => {
     const actionMenuRef = React.useRef(null);
-    return (jsxRuntime.jsx("div", { className: cvaMoreMenu({ className }), "data-testid": dataTestId, ref: actionMenuRef, children: jsxRuntime.jsxs(Popover, Object.assign({}, popoverProps, { children: [jsxRuntime.jsx(PopoverTrigger, { children: customButton !== null && customButton !== void 0 ? customButton : jsxRuntime.jsx(IconButton, Object.assign({}, iconButtonProps, { icon: jsxRuntime.jsx(Icon, Object.assign({ name: "EllipsisHorizontal" }, iconProps)) })) }), jsxRuntime.jsx(PopoverContent, { portalId: customPortalId, children: close => (typeof children === "function" ? children(close) : children) })] })) }));
+    return (jsxRuntime.jsx("div", { className: cvaMoreMenu({ className }), "data-testid": dataTestId, ref: actionMenuRef, children: jsxRuntime.jsxs(Popover, { ...popoverProps, children: [jsxRuntime.jsx(PopoverTrigger, { children: customButton !== null && customButton !== void 0 ? customButton : jsxRuntime.jsx(IconButton, { ...iconButtonProps, icon: jsxRuntime.jsx(Icon, { name: "EllipsisHorizontal", ...iconProps }) }) }), jsxRuntime.jsx(PopoverContent, { portalId: customPortalId, children: close => (typeof children === "function" ? children(close) : children) })] }) }));
 };
 
 const cvaNotice = cssClassVarianceUtilities.cvaMerge(["flex", "items-center"]);
@@ -3884,9 +3875,8 @@ const cvaNoticeIcon = cssClassVarianceUtilities.cvaMerge(["rounded-full", "items
  * @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 (jsxRuntime.jsx(Tooltip, { className: className, disabled: !withTooltip, label: tooltipLabel, placement: "bottom", children: jsxRuntime.jsxs("div", Object.assign({ "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 }), "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 (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 }), "data-testid": dataTestId ? `${dataTestId}-label` : "notice-label", children: label })) : null] }) }));
 };
 
 const cvaPage = cssClassVarianceUtilities.cvaMerge(["grid", "h-full"], {
@@ -4142,7 +4132,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 = React.useCallback(() => {
         const node = overflowContainerRef.current;
@@ -4199,16 +4189,16 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
         }
         return "visible";
     };
-    return (jsxRuntime.jsxs("div", { className: cvaSidebar({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx("div", { className: cvaSidebarChildContainer({ breakpoint, className: childContainerClassName }), "data-testid": dataTestId ? `${dataTestId}-child-container` : null, ref: overflowContainerRef, children: React__default["default"].Children.map(children, child => {
-                    return React__default["default"].cloneElement(child, {
+    return (jsxRuntime.jsxs("div", { className: cvaSidebar({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx("div", { className: cvaSidebarChildContainer({ breakpoint, className: childContainerClassName }), "data-testid": dataTestId ? `${dataTestId}-child-container` : null, ref: overflowContainerRef, children: React.Children.map(children, child => {
+                    return React.cloneElement(child, {
                         className: tailwindMerge.twMerge(child.props.className, itemVisibilityClassName(child.props.id)),
                     });
-                }) }), overflowItemCount > 0 ? (jsxRuntime.jsx(MoreMenu, Object.assign({ iconButtonProps: {
+                }) }), overflowItemCount > 0 ? (jsxRuntime.jsx(MoreMenu, { iconButtonProps: {
                     circular: false,
                     variant: "ghost-neutral",
-                }, popoverProps: { placement: "bottom-end" } }, moreMenuProps, { className: tailwindMerge.twMerge(moreMenuProps === null || moreMenuProps === void 0 ? void 0 : moreMenuProps.className, "!p-0"), dataTestId: dataTestId ? `${dataTestId}-more-menu` : undefined, children: close => (jsxRuntime.jsx(MenuList, Object.assign({}, menuListProps, { dataTestId: dataTestId ? `${dataTestId}-menu-list` : undefined, children: React__default["default"].Children.map(children, child => {
+                }, popoverProps: { placement: "bottom-end" }, ...moreMenuProps, className: tailwindMerge.twMerge(moreMenuProps === null || moreMenuProps === void 0 ? void 0 : moreMenuProps.className, "!p-0"), dataTestId: dataTestId ? `${dataTestId}-more-menu` : undefined, children: close => (jsxRuntime.jsx(MenuList, { ...menuListProps, dataTestId: dataTestId ? `${dataTestId}-menu-list` : undefined, children: React.Children.map(children, child => {
                         return itemOverflowMap[child.props.id]
-                            ? React__default["default"].cloneElement(child, {
+                            ? React.cloneElement(child, {
                                 onClick: () => {
                                     var _a, _b;
                                     (_b = (_a = child.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
@@ -4216,7 +4206,7 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
                                 },
                             })
                             : null;
-                    }) }))) }))) : null] }));
+                    }) })) })) : null] }));
 };
 
 const cvaTabsRoot = cssClassVarianceUtilities.cvaMerge([]);
@@ -4270,35 +4260,37 @@ const cvaTab = cssClassVarianceUtilities.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 renderContent = () => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [iconName ? jsxRuntime.jsx(Icon, { name: iconName, size: "small" }) : null, React__default["default"].isValidElement(children) ? children.props.children : children, suffix] }));
-    const commonProps = Object.assign({ className: appendTabStylesToChildIfAsChild ? cvaTab({ className, isFullWidth }) : className }, rest);
-    return (jsxRuntime.jsx(reactTabs.Trigger, { asChild: true, value: value, children: asChild && typeof children !== "string" ? (React__default["default"].cloneElement(children, Object.assign(Object.assign({}, commonProps), { children: renderContent() }))) : (jsxRuntime.jsx("button", Object.assign({}, commonProps, { "data-testid": dataTestId, children: renderContent() }))) }));
+const Tab = ({ value, isFullWidth = false, iconName, dataTestId, className, children, suffix, asChild, appendTabStylesToChildIfAsChild = true, ...rest }) => {
+    const renderContent = () => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [iconName ? jsxRuntime.jsx(Icon, { name: iconName, size: "small" }) : null, React.isValidElement(children) ? children.props.children : children, suffix] }));
+    const commonProps = {
+        className: appendTabStylesToChildIfAsChild ? cvaTab({ className, isFullWidth }) : className,
+        ...rest,
+    };
+    return (jsxRuntime.jsx(reactTabs.Trigger, { asChild: true, value: value, children: asChild && typeof children !== "string" ? (React.cloneElement(children, {
+            ...commonProps,
+            children: renderContent(),
+        })) : (jsxRuntime.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 (jsxRuntime.jsx(reactTabs.Content, Object.assign({ className: cvaTabContent({ className }), "data-testid": dataTestId ? `${dataTestId}-content` : undefined }, rest, { children: children })));
+const TabContent = ({ className, dataTestId, children, ...rest }) => {
+    return (jsxRuntime.jsx(reactTabs.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 (jsxRuntime.jsx(reactTabs.List, Object.assign({ className: cvaTabList({ className }), "data-testid": dataTestId }, rest, { children: children })));
+const TabList = ({ className, dataTestId, children, ...rest }) => {
+    return (jsxRuntime.jsx(reactTabs.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 (jsxRuntime.jsx(reactTabs.Root, Object.assign({ className: cvaTabsRoot({ className }), "data-testid": dataTestId }, rest, { children: children })));
+const Tabs = ({ children, forceRender, className, dataTestId, fullWidth, ...rest }) => {
+    return (jsxRuntime.jsx(reactTabs.Root, { className: cvaTabsRoot({ className }), "data-testid": dataTestId, ...rest, children: children }));
 };
 
 const cvaTimeline = cssClassVarianceUtilities.cvaMerge("ml-4");