@vention/machine-ui 4.1.0 → 4.1.2

package/index.esm.js

@@ -1,10 +1,10 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Typography, Button, Stack, Box as Box$1, Grid, IconButton, ClickAwayListener, Modal, CircularProgress as CircularProgress$1, linearProgressClasses, LinearProgress, InputAdornment, TextField, Radio, FormControlLabel, FormControl, Select, MenuItem, FormHelperText, ButtonGroup, Paper, Card, CardMedia, CardContent, ListItemIcon, ListItemText, Popover, MenuList, useTheme as useTheme$1, Drawer, Tooltip, Checkbox } from '@mui/material';
 import { IconCheck, IconAlertTriangleFilled, IconAlertTriangle, IconExclamationMark, IconExternalLink, IconX, IconInfoCircleFilled, IconCircleCheckFilled, IconChevronUp, IconChevronDown, IconInfoCircle, IconInfoSmall, IconMinus, IconPlus, IconLoader2, IconCaretRightFilled, IconChevronsRight, IconChevronsLeft, IconChevronRight } from '@tabler/icons-react';
 import { forwardRef, useState, cloneElement, useRef, useEffect, useCallback, lazy, memo, Suspense, useMemo, createContext, useContext, useImperativeHandle, Children, Fragment as Fragment$1, useReducer } from 'react';
 import { tss } from 'tss-react/mui';
 import Box from '@mui/material/Box';
 import CircularProgress from '@mui/material/CircularProgress';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createTheme, useTheme } from '@mui/material/styles';
 import Draggable from 'react-draggable';
 import Slider from '@mui/material/Slider';
@@ -1637,44 +1637,21 @@ for (var COLLECTION_NAME in DOMIterables) {
 handlePrototype(DOMTokenListPrototype, 'DOMTokenList');
 
 // utility functions for Machine UI here
+
 //The following function already exists in shared-utils.ts but that increases bundle size for Machine UI package
 function applyDefaultProps(inputProps, defaultProps) {
-  return Object.assign(Object.assign({}, defaultProps), inputProps);
+  return Object.assign({}, defaultProps, inputProps);
 }
 
-/******************************************************************************
-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.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
-
-
-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;
-};
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
 
 function getButtonStylingPropertiesGivenProps(variant, size, theme) {
   const {
@@ -1814,33 +1791,33 @@ const VentionSpinner = props => {
     stroke: 2,
     size: iconSize
   };
-  const successIconProperties = Object.assign(Object.assign({}, iconProperties), {
+  const successIconProperties = Object.assign({}, iconProperties, {
     "data-testid": "successIcon"
   });
-  const errorIconProperties = Object.assign(Object.assign({}, iconProperties), {
+  const errorIconProperties = Object.assign({}, iconProperties, {
     "data-testid": "errorIcon"
   });
   const spinnerProperties = {
     size: spinnerSize,
     thickness
   };
-  return jsxs(Box, {
+  return /*#__PURE__*/jsxs(Box, {
     className: classes.container,
-    children: [jsxs(Box, {
+    children: [/*#__PURE__*/jsxs(Box, {
       className: spinnerContainerClass,
       "data-testid": "spinnerContainer",
-      children: [props.type === "progress" && jsx(CircularProgress, Object.assign({
+      children: [props.type === "progress" && /*#__PURE__*/jsx(CircularProgress, Object.assign({
         className: classes.backgroundCircle,
         variant: "determinate",
         value: 100,
         "data-testid": "backgroundSpinner"
-      }, spinnerProperties)), isSpinningState && jsx(CircularProgress, Object.assign({
+      }, spinnerProperties)), isSpinningState && /*#__PURE__*/jsx(CircularProgress, Object.assign({
         className: classes.main,
         variant: props.type === "indeterminate" ? "indeterminate" : "determinate",
         value: props.value,
         "data-testid": "mainSpinner"
-      }, spinnerProperties)), props.type === "success" && jsx(IconCheck, Object.assign({}, successIconProperties)), props.type === "error" && spinnerSize > SPINNER_SIZES.small.size && jsx(IconAlertTriangleFilled, Object.assign({}, errorIconProperties)), props.type === "error" && (props.size === "small" || props.size === "x-small") && jsx(IconAlertTriangle, Object.assign({}, errorIconProperties)), props.type === "error" && props.size === "xx-small" && jsx(IconExclamationMark, Object.assign({}, errorIconProperties))]
-    }), props.label && jsx(Typography, {
+      }, spinnerProperties)), props.type === "success" && /*#__PURE__*/jsx(IconCheck, Object.assign({}, successIconProperties)), props.type === "error" && spinnerSize > SPINNER_SIZES.small.size && /*#__PURE__*/jsx(IconAlertTriangleFilled, Object.assign({}, errorIconProperties)), props.type === "error" && (props.size === "small" || props.size === "x-small") && /*#__PURE__*/jsx(IconAlertTriangle, Object.assign({}, errorIconProperties)), props.type === "error" && props.size === "xx-small" && /*#__PURE__*/jsx(IconExclamationMark, Object.assign({}, errorIconProperties))]
+    }), props.label && /*#__PURE__*/jsx(Typography, {
       variant: "uiText14Regular",
       align: "center",
       children: props.label
@@ -1879,13 +1856,13 @@ const useStyles$I = tss.withParams().create(({
       position: "relative",
       display: "block"
     }, containerSize),
-    statusContainer: Object.assign(Object.assign({
+    statusContainer: Object.assign({
       display: "flex",
       justifyContent: "center",
       alignItems: "center",
       borderRadius: "50%",
       backgroundColor: statusContainerColor
-    }, containerSize), {
+    }, containerSize, {
       "& .tabler-icon": {
         color: statusIconColor
       }
@@ -2530,12 +2507,12 @@ const machineUiTheme = createTheme({
       styleOverrides: {
         root: ({
           theme
-        }) => Object.assign(Object.assign(Object.assign(Object.assign({}, theme.typography.uiText14SemiBold), {
+        }) => Object.assign({}, theme.typography.uiText14SemiBold, {
           transform: "none",
           transition: "none",
           position: "relative",
           color: theme.palette.text.primary
-        }), theme.typography.h5), {
+        }, theme.typography.h5, {
           "&.Mui-focused": {
             color: theme.palette.text.primary
           },
@@ -2549,13 +2526,13 @@ const machineUiTheme = createTheme({
       styleOverrides: {
         root: ({
           theme
-        }) => Object.assign(Object.assign({
+        }) => Object.assign({
           margin: 0,
           display: "flex",
           alignItems: "flex-start",
           gap: "2px",
           alignSelf: "stretch"
-        }, theme.typography.uiText12Regular), {
+        }, theme.typography.uiText12Regular, {
           "&.Mui-error": {
             color: theme.palette.text.negative
           }
@@ -2572,12 +2549,17 @@ const machineUiTheme = createTheme({
     }
   }
 });
-const machineUiHmiTheme = createTheme(Object.assign(Object.assign({}, machineUiTheme), {
-  custom: Object.assign(Object.assign({}, machineUiTheme.custom), {
+const machineUiHmiTheme = createTheme(Object.assign({}, machineUiTheme, {
+  custom: Object.assign({}, machineUiTheme.custom, {
     iconStrokeWidth: "1.5px"
   })
 }));
 
+// module augmentation for custom theme variables
+
+// Feel free to extend this further by appending more x's to sizes
+
+const _excluded$d = ["variant", "size", "fullWidth", "className", "disabled", "iconLeft", "iconRight", "onClick", "type", "children", "labelText", "loading"];
 const VentionButton = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       variant = "filled-brand",
@@ -2593,7 +2575,7 @@ const VentionButton = /*#__PURE__*/forwardRef((props, ref) => {
       labelText = "Button",
       loading = false
     } = props,
-    other = __rest(props, ["variant", "size", "fullWidth", "className", "disabled", "iconLeft", "iconRight", "onClick", "type", "children", "labelText", "loading"]);
+    other = _objectWithoutPropertiesLoose(props, _excluded$d);
   const {
     classes,
     cx
@@ -2602,7 +2584,7 @@ const VentionButton = /*#__PURE__*/forwardRef((props, ref) => {
     size: size,
     fullWidth: fullWidth
   });
-  return jsx(Button, Object.assign({
+  return /*#__PURE__*/jsx(Button, Object.assign({
     ref: ref,
     className: cx(classes.root, className),
     disableRipple: true,
@@ -2613,10 +2595,10 @@ const VentionButton = /*#__PURE__*/forwardRef((props, ref) => {
     endIcon: iconRight,
     fullWidth: fullWidth
   }, other, {
-    children: loading ? jsx(VentionSpinner, {
+    children: loading ? /*#__PURE__*/jsx(VentionSpinner, {
       color: getSpinnerColor(variant),
       size: getSpinnerSize(size)
-    }) : jsx(Typography, {
+    }) : /*#__PURE__*/jsx(Typography, {
       variant: getButtonTypography(size),
       className: classes.label,
       children: children || labelText
@@ -2637,7 +2619,7 @@ const useStyles$H = tss.withParams().create(({
       textOverflow: "ellipsis",
       whiteSpace: "nowrap"
     },
-    root: Object.assign(Object.assign({
+    root: Object.assign({
       height: getButtonHeight(size, theme),
       backgroundColor: stylingProperties.backgroundColor,
       color: stylingProperties.textColor,
@@ -2646,7 +2628,7 @@ const useStyles$H = tss.withParams().create(({
       padding
     }, fullWidth && {
       width: "100%"
-    }), {
+    }, {
       "&:hover": {
         backgroundColor: stylingProperties.backgroundColorOnHover
       },
@@ -2735,13 +2717,13 @@ const VentionLink = inputProps => {
     underlined: linkProps.underlined,
     size: linkProps.size
   });
-  return jsxs(Button, {
+  return /*#__PURE__*/jsxs(Button, {
     className: classes.root,
     disableRipple: true,
     disabled: linkProps.disabled,
     onClick: linkProps.onClick,
     "data-testid": linkProps["data-testid"],
-    children: [linkProps.labelText, linkProps.external ? jsx(IconExternalLink, {
+    children: [linkProps.labelText, linkProps.external ? /*#__PURE__*/jsx(IconExternalLink, {
       stroke: 1.25,
       size: linkProps.size === "medium" ? 14 : 16,
       className: classes.linkIcon
@@ -2804,21 +2786,21 @@ const VentionAlertControls = alertControlProps => {
   const {
     classes
   } = useStyles$F(alertControlProps);
-  return alertControlProps.display ? jsxs(Stack, {
+  return alertControlProps.display ? /*#__PURE__*/jsxs(Stack, {
     className: classes.alertControls,
-    children: [alertControlProps.primaryButtonText ? jsx(VentionButton, {
+    children: [alertControlProps.primaryButtonText ? /*#__PURE__*/jsx(VentionButton, {
       onClick: alertControlProps.onPrimaryButtonClick,
       labelText: alertControlProps.primaryButtonText,
       size: alertControlProps.size,
       variant: "shaded",
       "data-testid": "alertPrimaryBtn"
-    }) : null, alertControlProps.secondaryButtonText ? jsx(VentionButton, {
+    }) : null, alertControlProps.secondaryButtonText ? /*#__PURE__*/jsx(VentionButton, {
       onClick: alertControlProps.onSecondaryButtonClick,
       labelText: alertControlProps.secondaryButtonText,
       size: alertControlProps.size,
       variant: "text-only",
       "data-testid": "alertSecondaryBtn"
-    }) : null, alertControlProps.linkText ? jsx(VentionLink, {
+    }) : null, alertControlProps.linkText ? /*#__PURE__*/jsx(VentionLink, {
       onClick: alertControlProps.onLinkClick,
       labelText: alertControlProps.linkText,
       size: alertControlProps.size === "small" ? "medium" : "large"
@@ -2850,54 +2832,54 @@ const VentionAlert = inputProps => {
   const hasControlProps = !!(alertProps.linkText || alertProps.primaryButtonText || alertProps.secondaryButtonText);
   const {
     classes
-  } = useStyles$E(Object.assign(Object.assign({}, alertProps), {
+  } = useStyles$E(Object.assign({}, alertProps, {
     hasControlProps
   }));
   const [titleTypography, descriptionTypography] = getTypographyVariant$2(alertProps.size);
-  return visible ? jsx(Box$1, {
+  return visible ? /*#__PURE__*/jsx(Box$1, {
     "data-testid": "alertRootDiv",
     className: classes.root,
-    children: jsxs(Grid, {
+    children: /*#__PURE__*/jsxs(Grid, {
       container: true,
       spacing: 0,
       className: classes.alertGridContainer,
-      children: [alertProps.leftIcon ? jsx(Grid, {
+      children: [alertProps.leftIcon ? /*#__PURE__*/jsx(Grid, {
         "data-testid": "leftIcon",
         className: classes.leftIcon,
         children: /*#__PURE__*/cloneElement(alertProps.leftIcon, {
           size: getIconSize$1(alertProps.size)
         })
-      }) : null, jsxs(Grid, {
+      }) : null, /*#__PURE__*/jsxs(Grid, {
         className: classes.alertContent,
-        children: [alertProps.title ? jsx(Typography, {
+        children: [alertProps.title ? /*#__PURE__*/jsx(Typography, {
           variant: titleTypography,
           className: classes.title,
           children: alertProps.title
-        }) : null, jsx(Typography, {
+        }) : null, /*#__PURE__*/jsx(Typography, {
           variant: descriptionTypography,
           className: classes.desc,
           children: alertProps.descriptionText
-        }), jsx(VentionAlertControls, Object.assign({}, alertProps, {
+        }), /*#__PURE__*/jsx(VentionAlertControls, Object.assign({}, alertProps, {
           display: !alertProps.isSingleLine
         }))]
-      }), jsxs(Grid, {
+      }), /*#__PURE__*/jsxs(Grid, {
         item: true,
         className: classes.rightColumn,
-        children: [jsx(VentionAlertControls, Object.assign({}, alertProps, {
+        children: [/*#__PURE__*/jsx(VentionAlertControls, Object.assign({}, alertProps, {
           display: alertProps.isSingleLine
-        })), alertProps.rightIcon ? jsx(Grid, {
+        })), alertProps.rightIcon ? /*#__PURE__*/jsx(Grid, {
           "data-testid": "rightIcon",
           className: classes.rightIcon,
           children: /*#__PURE__*/cloneElement(alertProps.rightIcon, {
             size: getIconSize$1(alertProps.size)
           })
-        }) : null, alertProps.isCloseable ? jsx(Grid, {
+        }) : null, alertProps.isCloseable ? /*#__PURE__*/jsx(Grid, {
           width: 16,
-          children: jsx(Button, {
+          children: /*#__PURE__*/jsx(Button, {
             "data-testid": "closeButton",
             className: classes.closeButton,
             onClick: alertProps.onCloseButtonClick,
-            children: jsx(IconX, {
+            children: /*#__PURE__*/jsx(IconX, {
               stroke: 1,
               size: 16
             })
@@ -3086,13 +3068,13 @@ const getAlertColors = (severity, theme) => {
 const getAlertIcon = severity => {
   switch (severity) {
     case "warn":
-      return jsx(IconAlertTriangleFilled, {});
+      return /*#__PURE__*/jsx(IconAlertTriangleFilled, {});
     case "error":
-      return jsx(IconAlertTriangleFilled, {});
+      return /*#__PURE__*/jsx(IconAlertTriangleFilled, {});
     case "success":
-      return jsx(IconCircleCheckFilled, {});
+      return /*#__PURE__*/jsx(IconCircleCheckFilled, {});
     case "info":
-      return jsx(IconInfoCircleFilled, {});
+      return /*#__PURE__*/jsx(IconInfoCircleFilled, {});
   }
 };
 const getIconSize$1 = size => {
@@ -3137,9 +3119,9 @@ const VentionBadge = props => {
     color: props.color,
     variant: props.variant
   });
-  return jsxs("div", {
+  return /*#__PURE__*/jsxs("div", {
     className: cx(classes.root, props.className),
-    children: [props.iconLeft, jsx(Typography, {
+    children: [props.iconLeft, /*#__PURE__*/jsx(Typography, {
       textAlign: "center",
       variant: getBadgeTypographyVariant(props.size),
       style: {
@@ -3306,6 +3288,7 @@ const getVentionBadgeColors = (color, variant, theme) => {
   return badgeStyleMap[color][variant](theme);
 };
 
+const _excluded$c = ["variant", "size", "className", "disabled", "onClick", "children"];
 const VentionIconButton = /*#__PURE__*/forwardRef((inputProps, ref) => {
   const {
       variant = "filled-brand",
@@ -3315,7 +3298,7 @@ const VentionIconButton = /*#__PURE__*/forwardRef((inputProps, ref) => {
       onClick,
       children
     } = inputProps,
-    other = __rest(inputProps, ["variant", "size", "className", "disabled", "onClick", "children"]);
+    other = _objectWithoutPropertiesLoose(inputProps, _excluded$c);
   const {
     classes,
     cx
@@ -3323,7 +3306,7 @@ const VentionIconButton = /*#__PURE__*/forwardRef((inputProps, ref) => {
     variant: variant,
     size: size
   });
-  return jsx(IconButton, Object.assign({
+  return /*#__PURE__*/jsx(IconButton, Object.assign({
     ref: ref,
     className: cx(classes.root, className),
     disableRipple: true,
@@ -3365,11 +3348,12 @@ const useStyles$C = tss.withParams().create(({
   };
 });
 
+const _excluded$b = ["variant", "size", "className", "disabled", "onClose", "onOpen", "isOpen", "icon", "badgeText", "label", "stroke", "contentColor", "children", "menuPlacement", "menuAlignment", "onClick"];
 const menuTestIds = {
   menuRootDiv: "menuRootDiv"
 };
-const VentionDropdownButton = _a => {
-  var {
+const VentionDropdownButton = _ref => {
+  let {
       variant = "simple",
       size = "small",
       className,
@@ -3386,8 +3370,8 @@ const VentionDropdownButton = _a => {
       menuPlacement = "bottom",
       menuAlignment = "start",
       onClick
-    } = _a,
-    other = __rest(_a, ["variant", "size", "className", "disabled", "onClose", "onOpen", "isOpen", "icon", "badgeText", "label", "stroke", "contentColor", "children", "menuPlacement", "menuAlignment", "onClick"]);
+    } = _ref,
+    other = _objectWithoutPropertiesLoose(_ref, _excluded$b);
   const {
     classes,
     cx
@@ -3407,46 +3391,46 @@ const VentionDropdownButton = _a => {
   const handleClick = useCallback(event => {
     if (!showDropdown) {
       setShowDropdownInternal(true);
-      onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+      onOpen == null || onOpen();
     } else {
       setShowDropdownInternal(false);
-      onClose === null || onClose === void 0 ? void 0 : onClose();
+      onClose == null || onClose();
     }
-    onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    onClick == null || onClick(event);
   }, [showDropdown, onClose, onOpen, onClick]);
-  return jsx(ClickAwayListener, {
+  return /*#__PURE__*/jsx(ClickAwayListener, {
     onClickAway: () => {
       setShowDropdownInternal(false);
-      onClose === null || onClose === void 0 ? void 0 : onClose();
+      onClose == null || onClose();
     },
-    children: jsxs("div", {
+    children: /*#__PURE__*/jsxs("div", {
       style: {
         display: "inline-block",
         position: "relative"
       },
-      children: [jsxs(IconButton, Object.assign({
+      children: [/*#__PURE__*/jsxs(IconButton, Object.assign({
         ref: ref,
         className: cx(classes.root, className),
         disableRipple: true
       }, other, {
         disabled: disabled,
         onClick: handleClick,
-        children: [icon, label && jsx(Typography, {
+        children: [icon, label && /*#__PURE__*/jsx(Typography, {
           className: classes.label,
           variant: LABEL_VARIANTS[size],
           children: label
-        }), badgeText && jsx(VentionBadge, {
+        }), badgeText && /*#__PURE__*/jsx(VentionBadge, {
           size: "small",
           color: "slate",
           text: badgeText,
           variant: "filled",
           className: classes.badge
-        }), jsx(Chevron, {
+        }), /*#__PURE__*/jsx(Chevron, {
           stroke: stroke,
           size: 16,
           color: contentColor
         })]
-      })), showDropdown && jsx("div", {
+      })), showDropdown && /*#__PURE__*/jsx("div", {
         "data-testid": menuTestIds.menuRootDiv,
         className: classes.menuContainer,
         children: children
@@ -3463,7 +3447,7 @@ const useStyles$B = tss.withParams().create(({
   theme
 }) => {
   const stylingProperties = getButtonStylingPropertiesGivenProps(variant, size, theme);
-  const color = contentColor !== null && contentColor !== void 0 ? contentColor : theme.palette.text.primary;
+  const color = contentColor != null ? contentColor : theme.palette.text.primary;
   return {
     root: {
       gap: BUTTON_GAPS[size],
@@ -3534,7 +3518,7 @@ const getMenuPositionStyles = (placement, alignment) => {
       bottom: 0
     }
   };
-  return Object.assign(Object.assign({}, placementStyles[placement]), alignmentStyles[alignment]);
+  return Object.assign({}, placementStyles[placement], alignmentStyles[alignment]);
 };
 const LABEL_VARIANTS = {
   small: "uiText12Medium",
@@ -3557,7 +3541,7 @@ const defaultProps$6 = {
   size: "medium",
   descriptionText: "Description placeholder",
   variant: "shaded",
-  leftIcon: jsx(IconInfoCircle, {
+  leftIcon: /*#__PURE__*/jsx(IconInfoCircle, {
     stroke: 1,
     size: 16
   })
@@ -3573,7 +3557,7 @@ const VentionCallout = inputProps => {
   });
   const theme = useTheme();
   const [visible, setVisible] = useState(true);
-  return visible ? jsx(Box$1, {
+  return visible ? /*#__PURE__*/jsx(Box$1, {
     "data-testid": "calloutRootDiv",
     display: "flex",
     justifyContent: "center",
@@ -3584,12 +3568,12 @@ const VentionCallout = inputProps => {
     border: `1px solid var(--Border-Default-border-default, ${theme.palette.border.main})`,
     className: classes.root,
     padding: getCalloutPadding(calloutProps),
-    children: jsxs(Grid, {
+    children: /*#__PURE__*/jsxs(Grid, {
       container: true,
       spacing: 0,
       flexWrap: "nowrap",
       lineHeight: "0px",
-      children: [calloutProps.leftIcon ? jsx(Grid, {
+      children: [calloutProps.leftIcon ? /*#__PURE__*/jsx(Grid, {
         item: true,
         width: "fit-content",
         "data-testid": "leftIcon",
@@ -3598,7 +3582,7 @@ const VentionCallout = inputProps => {
         children: /*#__PURE__*/cloneElement(calloutProps.leftIcon, {
           size: calloutProps.size === "small" ? 16 : 24
         })
-      }) : null, jsxs(Grid, {
+      }) : null, /*#__PURE__*/jsxs(Grid, {
         item: true,
         width: "auto",
         marginRight: getMarginRightValueForContent(calloutProps),
@@ -3607,47 +3591,47 @@ const VentionCallout = inputProps => {
         flexDirection: calloutProps.isSingleLine ? "row" : "column",
         gap: getGapSpaceForContent(calloutProps.isSingleLine, calloutProps.size),
         alignItems: calloutProps.isSingleLine ? "center" : "normal",
-        children: [calloutProps.title ? jsx(Typography, {
+        children: [calloutProps.title ? /*#__PURE__*/jsx(Typography, {
           variant: calloutProps.size === "small" ? "uiText12SemiBold" : "uiText14SemiBold",
           className: classes.title,
           children: calloutProps.title
-        }) : null, jsx(Typography, {
+        }) : null, /*#__PURE__*/jsx(Typography, {
           variant: calloutProps.size === "small" ? "uiText12Regular" : "uiText14Regular",
           className: classes.desc,
           style: {
             whiteSpace: "pre-wrap"
           },
           children: calloutProps.descriptionText
-        }), jsxs(Stack, {
+        }), /*#__PURE__*/jsxs(Stack, {
           flexDirection: calloutProps.isSingleLine ? "row-reverse" : "row",
           gap: "8px",
-          children: [calloutProps.primaryButtonText ? jsx(VentionButton, {
+          children: [calloutProps.primaryButtonText ? /*#__PURE__*/jsx(VentionButton, {
             onClick: calloutProps.onPrimaryButtonClick,
             labelText: calloutProps.primaryButtonText,
             size: calloutProps.size === "small" ? "small" : "medium",
             variant: calloutProps.primaryButtonVariant ? calloutProps.primaryButtonVariant : "filled-brand",
             "data-testid": "calloutPrimaryBtn"
-          }) : null, calloutProps.secondaryButtonText ? jsx(VentionButton, {
+          }) : null, calloutProps.secondaryButtonText ? /*#__PURE__*/jsx(VentionButton, {
             variant: "outline",
             onClick: calloutProps.onSecondaryButtonClick,
             labelText: calloutProps.secondaryButtonText,
             size: calloutProps.size === "small" ? "small" : "medium",
             "data-testid": "calloutSecondaryBtn"
-          }) : null, calloutProps.linkText ? jsx(VentionLink, {
+          }) : null, calloutProps.linkText ? /*#__PURE__*/jsx(VentionLink, {
             onClick: calloutProps.onLinkClick,
             labelText: calloutProps.linkText,
             size: calloutProps.size === "small" ? "medium" : "large"
           }) : null]
         })]
-      }), calloutProps.isCloseable ? jsx(Grid, {
+      }), calloutProps.isCloseable ? /*#__PURE__*/jsx(Grid, {
         item: true,
         width: 16,
         alignSelf: calloutProps.isSingleLine ? "center" : "normal",
-        children: jsx(Button, {
+        children: /*#__PURE__*/jsx(Button, {
           className: classes.closeButton,
           "data-testid": "closeButton",
           onClick: () => setVisible(false),
-          children: jsx(IconX, {
+          children: /*#__PURE__*/jsx(IconX, {
             stroke: 1,
             size: 16,
             color: theme.palette.icon.primary
@@ -3830,10 +3814,10 @@ const VentionCounter = props => {
     color: props.color,
     variant: props.variant
   });
-  return jsx("div", {
+  return /*#__PURE__*/jsx("div", {
     className: classes.root,
     "data-testid": props["data-testid"],
-    children: jsx(Typography, {
+    children: /*#__PURE__*/jsx(Typography, {
       textAlign: "center",
       variant: props.size === "small" ? "uiText12Medium" : "uiText14Medium",
       children: getShownValue(props)
@@ -3987,6 +3971,7 @@ const getColors$3 = (color, variant, theme) => {
   return counterStyleMap[color][variant](theme);
 };
 
+const _excluded$a = ["open", "className", "ownerState"];
 const VentionModalBase = props => {
   const {
     modalSize = "medium",
@@ -4011,11 +3996,10 @@ const VentionModalBase = props => {
   const Backdrop = /*#__PURE__*/forwardRef((props, ref) => {
     const {
         open,
-        className,
-        ownerState
+        className
       } = props,
-      other = __rest(props, ["open", "className", "ownerState"]);
-    return jsx("div", Object.assign({
+      other = _objectWithoutPropertiesLoose(props, _excluded$a);
+    return /*#__PURE__*/jsx("div", Object.assign({
       className: cx(classes.backdrop, {
         "base-Backdrop-open": open
       }, className),
@@ -4025,21 +4009,21 @@ const VentionModalBase = props => {
     }));
   });
   const iconSize = isTouchDevice ? machineUiTheme.spacing(7) : machineUiTheme.spacing(4);
-  return jsx(Modal, {
+  return /*#__PURE__*/jsx(Modal, {
     open: props.isOpen,
     onClose: handleClose,
     slots: {
       backdrop: Backdrop
     },
     className: classes.modal,
-    children: jsxs("div", {
+    children: /*#__PURE__*/jsxs("div", {
       className: classes.modalContainer,
       "data-testid": ventionModalBaseTestIds.modalContainer,
-      children: [jsx("div", {
+      children: [/*#__PURE__*/jsx("div", {
         className: classes.closeIconButton,
         onClick: props.onClose,
         "data-testid": ventionModalBaseTestIds.closeIcon,
-        children: jsx(IconX, {
+        children: /*#__PURE__*/jsx(IconX, {
           stroke: 1,
           size: iconSize
         })
@@ -4161,43 +4145,43 @@ const VentionModal = props => {
     props.onClose();
   };
   const buttonSize = getButtonSize(modalSize, isTouchDevice);
-  return jsx(VentionModalBase, {
+  return /*#__PURE__*/jsx(VentionModalBase, {
     onClose: handleClose,
     isOpen: props.isOpen,
     modalSize: props.modalSize,
     isTouchDevice: isTouchDevice,
     backDropClickClosable: backDropClickClosable,
     width: props.width,
-    children: jsxs(Box$1, {
+    children: /*#__PURE__*/jsxs(Box$1, {
       className: classes.modalContent,
-      children: [props.type !== "none" && jsx(Box$1, {
+      children: [props.type !== "none" && /*#__PURE__*/jsx(Box$1, {
         className: classes.statusGlow,
-        children: jsxs(Box$1, {
+        children: /*#__PURE__*/jsxs(Box$1, {
           className: classes.statusCircle,
-          children: [props.type === "positive" && jsx(IconCheck, Object.assign({}, iconProps, {
+          children: [props.type === "positive" && /*#__PURE__*/jsx(IconCheck, Object.assign({}, iconProps, {
             "data-testid": ventionModalTestIds.positiveIcon
-          })), props.type === "info" && jsx(IconInfoSmall, Object.assign({}, iconProps, {
+          })), props.type === "info" && /*#__PURE__*/jsx(IconInfoSmall, Object.assign({}, iconProps, {
             "data-testid": ventionModalTestIds.infoIcon
-          })), props.type === "loading" && jsx(CircularProgress$1, {
+          })), props.type === "loading" && /*#__PURE__*/jsx(CircularProgress$1, {
             "data-testid": ventionModalTestIds.loadingIcon
-          }), props.type === "warning" && jsx(IconAlertTriangle, Object.assign({}, iconProps, {
+          }), props.type === "warning" && /*#__PURE__*/jsx(IconAlertTriangle, Object.assign({}, iconProps, {
             "data-testid": ventionModalTestIds.warningIcon
-          })), props.type === "negative" && jsx(IconAlertTriangle, Object.assign({}, iconProps, {
+          })), props.type === "negative" && /*#__PURE__*/jsx(IconAlertTriangle, Object.assign({}, iconProps, {
             "data-testid": ventionModalTestIds.negativeIcon
           }))]
         })
-      }), jsx(Typography, {
+      }), /*#__PURE__*/jsx(Typography, {
         className: classes.titleText,
         variant: getTitleTypography(modalSize, isTouchDevice),
         children: props.titleText
-      }), jsx(Typography, {
+      }), /*#__PURE__*/jsx(Typography, {
         className: classes.bodyText,
         variant: getBodyTextTypography(modalSize, isTouchDevice),
         children: props.body
-      }), jsxs(Box$1, {
+      }), /*#__PURE__*/jsxs(Box$1, {
         className: classes.modalActions,
         "data-testid": ventionModalTestIds.modalActions,
-        children: [props.secondaryButton && jsx(VentionButton, {
+        children: [props.secondaryButton && /*#__PURE__*/jsx(VentionButton, {
           size: buttonSize,
           "data-testid": props.secondaryButton.dataTestId,
           onClick: props.secondaryButton.onClick,
@@ -4206,7 +4190,7 @@ const VentionModal = props => {
           disabled: props.secondaryButton.disabled,
           fullWidth: props.buttonPosition === undefined ? true : false,
           children: props.secondaryButton.text
-        }), props.primaryButton && jsx(VentionButton, {
+        }), props.primaryButton && /*#__PURE__*/jsx(VentionButton, {
           "data-testid": props.primaryButton.dataTestId,
           size: buttonSize,
           onClick: props.primaryButton.onClick,
@@ -4366,33 +4350,33 @@ const VentionProgressBar = inputProps => {
     colored: props.colored,
     state: props.state
   });
-  return jsxs(Box$1, {
-    children: [props.label && (typeof props.label === "string" ? jsx(Typography, {
+  return /*#__PURE__*/jsxs(Box$1, {
+    children: [props.label && (typeof props.label === "string" ? /*#__PURE__*/jsx(Typography, {
       variant: "uiText14Regular",
       color: "textPrimary",
       children: props.label
-    }) : props.label), jsx(LinearProgress, {
+    }) : props.label), /*#__PURE__*/jsx(LinearProgress, {
       className: classes.progressBar,
       variant: "determinate",
       value: props.state === "success" ? 100 : props.value,
       "data-testid": "progressBar"
-    }), isStatusState && props.statusText && jsxs(Stack, {
+    }), isStatusState && props.statusText && /*#__PURE__*/jsxs(Stack, {
       direction: "row",
       gap: 1,
       alignItems: "center",
       alignContent: "center",
       className: classes.statusText,
-      children: [props.state === "error" ? jsx(IconAlertTriangleFilled, {
+      children: [props.state === "error" ? /*#__PURE__*/jsx(IconAlertTriangleFilled, {
         size: 14,
         "data-testid": "errorIcon"
-      }) : jsx(IconCheck, {
+      }) : /*#__PURE__*/jsx(IconCheck, {
         size: 14,
         "data-testid": "successIcon"
-      }), jsx(Typography, {
+      }), /*#__PURE__*/jsx(Typography, {
         variant: "uiText12Regular",
         children: props.statusText
       })]
-    }), props.helperText && jsx(Typography, {
+    }), props.helperText && /*#__PURE__*/jsx(Typography, {
       variant: "uiText12Regular",
       color: "textSecondary",
       children: props.helperText
@@ -4410,7 +4394,7 @@ const useStyles$w = tss.withParams().create(({
     textColor
   } = getColors$1(state, colored, theme);
   return {
-    progressBar: Object.assign(Object.assign({}, PROGRESS_BAR_SIZES[size]), {
+    progressBar: Object.assign({}, PROGRESS_BAR_SIZES[size], {
       marginBottom: theme.spacing(1),
       [`&.${linearProgressClasses.colorPrimary}`]: {
         backgroundColor: theme.palette.background.surface3
@@ -4940,43 +4924,40 @@ const VentionSteps = props => {
     console.warn("The design system doesn't support vention-steps bullet numbering for the requested size. Defaulting to dots style.");
     variant = "dot";
   }
-  return jsx("div", {
+  return /*#__PURE__*/jsx("div", {
     className: cx(classes.root, props.disabled && classes.stepsDisabled),
     children: props.steps.map((step, index) => {
       const previousStep = props.steps[index - 1];
       const isCurrentStep = !step.isCompleted && (!previousStep || previousStep.isCompleted) && !props.disabled;
-      return jsxs("div", {
+      return /*#__PURE__*/jsxs("div", {
         "data-testid": ElementTestIds.Content,
         className: cx(classes.step, step.isSelected && classes.stepSelected, step.onClick !== undefined && classes.stepClickable),
-        onClick: () => {
-          var _a;
-          return (_a = step.onClick) === null || _a === void 0 ? void 0 : _a.call(step, step);
-        },
+        onClick: () => step.onClick == null ? void 0 : step.onClick(step),
         role: "button",
-        children: [jsxs("div", {
+        children: [/*#__PURE__*/jsxs("div", {
           className: classes.stepProgress,
-          children: [jsx("div", {
+          children: [/*#__PURE__*/jsx("div", {
             "data-testid": ElementTestIds.Bullet,
             className: cx(classes.stepBullet, props.size === "small" && classes.small, variant === "number" && classes.stepNumber, variant === "dot" && classes.stepDot, step.isCompleted && classes.stepCompleted, isCurrentStep && classes.stepCurrent),
-            children: step.isCompleted ? jsx(IconCheck, {
+            children: step.isCompleted ? /*#__PURE__*/jsx(IconCheck, {
               "data-testid": ElementTestIds.CheckIcon,
               className: classes.checkIcon
-            }) : jsx(BulletContent, {
+            }) : /*#__PURE__*/jsx(BulletContent, {
               bulletVariant: variant,
               typographyVariant: typographyVariants.bulletText,
               bulletText: (index + 1).toFixed(0)
             })
-          }), props.steps.length !== index + 1 && jsx("div", {
+          }), props.steps.length !== index + 1 && /*#__PURE__*/jsx("div", {
             "data-testid": ElementTestIds.Bar,
             className: cx(classes.bar, props.size === "small" && classes.small, step.isCompleted && classes.barCompleted)
           })]
-        }), jsxs("div", {
+        }), /*#__PURE__*/jsxs("div", {
           className: classes.stepContent,
-          children: [jsx(Typography, {
+          children: [/*#__PURE__*/jsx(Typography, {
             "data-testid": ElementTestIds.Title,
             variant: typographyVariants.heading,
             children: step.title
-          }), step.description && jsx(Typography, {
+          }), step.description && /*#__PURE__*/jsx(Typography, {
             "data-testid": ElementTestIds.Description,
             variant: typographyVariants.description,
             children: step.description
@@ -5111,12 +5092,12 @@ const useStyles$v = tss.withParams().withNestedSelectors().create(({
 function BulletContent(props) {
   switch (props.bulletVariant) {
     case "number":
-      return jsx(Typography, {
+      return /*#__PURE__*/jsx(Typography, {
         variant: props.typographyVariant,
         children: props.bulletText
       });
     case "dot":
-      return jsx("div", {});
+      return /*#__PURE__*/jsx("div", {});
   }
 }
 const ElementTestIds = {
@@ -5180,9 +5161,9 @@ const VentionStatusDot = props => {
     borderColor: props.borderColor,
     size
   });
-  return jsx("div", {
+  return /*#__PURE__*/jsx("div", {
     className: cx(classes.root, className),
-    children: jsx("div", {
+    children: /*#__PURE__*/jsx("div", {
       className: classes.dot
     })
   });
@@ -5352,15 +5333,16 @@ const getTypography = (size, theme) => {
   };
 };
 
-const VentionTextInput = _a => {
-  var {
+const _excluded$9 = ["state", "variant", "size", "rightItemText", "leftItemText"];
+const VentionTextInput = _ref => {
+  let {
       state = "default",
       variant,
       size,
       rightItemText,
       leftItemText
-    } = _a,
-    props = __rest(_a, ["state", "variant", "size", "rightItemText", "leftItemText"]);
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
   const {
     classes
   } = useStyles$t({
@@ -5368,41 +5350,47 @@ const VentionTextInput = _a => {
     variant,
     state
   });
-  const inputProps = Object.assign(Object.assign(Object.assign(Object.assign({}, props.InputProps), {
+  const inputProps = Object.assign({}, props.InputProps, {
     disabled: state === "disabled"
-  }), leftItemText ? {
-    startAdornment: jsx(InputAdornment, {
+  }, leftItemText ? {
+    startAdornment: /*#__PURE__*/jsx(InputAdornment, {
       position: "start",
       className: classes.leftItem,
-      children: jsx(Box$1, {
+      children: /*#__PURE__*/jsx(Box$1, {
         display: "flex",
         alignItems: "center",
         height: "100%",
-        children: jsx(Typography, {
+        children: /*#__PURE__*/jsx(Typography, {
           className: classes.leftItemText,
           children: leftItemText
         })
       })
     })
-  } : {}), rightItemText ? {
-    endAdornment: jsx(InputAdornment, {
+  } : {}, rightItemText ? {
+    endAdornment: /*#__PURE__*/jsx(InputAdornment, {
       position: "end",
       className: classes.rightItem,
-      children: jsx(Box$1, {
+      children: /*#__PURE__*/jsx(Box$1, {
         display: "flex",
         alignItems: "center",
         height: "100%",
-        children: jsx(Typography, {
+        children: /*#__PURE__*/jsx(Typography, {
           className: classes.rightItemText,
           children: rightItemText
         })
       })
     })
   } : {});
-  return jsx(TextField, Object.assign({
+  return /*#__PURE__*/jsx(TextField, Object.assign({
     classes: {
       root: classes.root
     }
+    /**
+     * The variant is always outlined.
+     * the shaded variant is used only in the useStyles because TextField does not support custom variants.
+     *
+     * More: https://github.com/mui/material-ui/issues/37846#issuecomment-1639917252
+     */
   }, props, {
     value: (props.type === "number" || props.type === "tel") && (props.value === undefined || props.value === null) ? "" : props.value,
     variant: "outlined",
@@ -5449,10 +5437,10 @@ const useStyles$t = tss.withParams().create(({
           backgroundColor: getBackgroundColorFromState("disabled", theme)
         }
       },
-      " & .MuiInputBase-input": Object.assign(Object.assign(Object.assign({}, typographyVariants.text), {
+      " & .MuiInputBase-input": Object.assign({}, typographyVariants.text, {
         zIndex: 1,
         backgroundColor: "transparent"
-      }), getInputPaddingStyles(size, theme)),
+      }, getInputPaddingStyles(size, theme)),
       " & .MuiInputBase-input::placeholder": {
         color: theme.palette.text.tertiary,
         opacity: 1
@@ -5582,6 +5570,7 @@ const radioColorMap = {
   }
 };
 
+const _excluded$8 = ["radioSize", "hideWhenUnchecked"];
 const defaultProps$4 = {
   variant: "outlined",
   radioSize: "medium",
@@ -5591,18 +5580,15 @@ const defaultProps$4 = {
 };
 const VentionRadio = inputProps => {
   const props = applyDefaultProps(inputProps, defaultProps$4);
+
   //removing props that would be unknown to Radio Component
-  const {
-      radioSize,
-      hideWhenUnchecked
-    } = props,
-    radioProps = __rest(props, ["radioSize", "hideWhenUnchecked"]);
-  return jsx(Radio, Object.assign({}, radioProps, {
+  const radioProps = _objectWithoutPropertiesLoose(props, _excluded$8);
+  return /*#__PURE__*/jsx(Radio, Object.assign({}, radioProps, {
     disableRipple: true,
-    checkedIcon: jsx(VentionRadioIcon, Object.assign({}, props, {
+    checkedIcon: /*#__PURE__*/jsx(VentionRadioIcon, Object.assign({}, props, {
       checked: true
     })),
-    icon: jsx(VentionRadioIcon, Object.assign({}, props, {
+    icon: /*#__PURE__*/jsx(VentionRadioIcon, Object.assign({}, props, {
       checked: false
     }))
   }));
@@ -5618,10 +5604,10 @@ const VentionRadioIcon = props => {
     state: props.state
   });
   const isErrorState = props.state === "error";
-  return props.hideWhenUnchecked && !props.checked ? jsx("span", {
+  return props.hideWhenUnchecked && !props.checked ? /*#__PURE__*/jsx("span", {
     className: classes.hiddenRadio,
     "data-testid": "hiddenRadio"
-  }) : jsx("span", {
+  }) : /*#__PURE__*/jsx("span", {
     "data-testid": "radioIcon",
     className: cx({
       [classes.ventionRadioIcon]: !isErrorState,
@@ -5770,10 +5756,10 @@ const VentionRadioTileControl = props => {
   } = useStyles$r({
     radioLocation: props.radioLocation
   });
-  return jsx("div", {
+  return /*#__PURE__*/jsx("div", {
     className: classes.controllerContainer,
     "data-testid": "RadioTileControl",
-    children: jsx(VentionRadio, {
+    children: /*#__PURE__*/jsx(VentionRadio, {
       checked: props.checked,
       variant: props.variant,
       radioSize: props.radioSize,
@@ -5808,10 +5794,10 @@ const VentionRadioTileLabel = props => {
     size: props.size,
     labelText: props.labelText
   });
-  return jsxs("div", {
+  return /*#__PURE__*/jsxs("div", {
     className: classes.labelContainer,
     "data-testid": "RadioTileLabel",
-    children: [props.graphic, jsx(Typography, {
+    children: [props.graphic, /*#__PURE__*/jsx(Typography, {
       variant: getTypographyVariant$1(props.size),
       my: props.size === "xx-large" ? 1 : 0,
       children: props.labelText
@@ -5849,8 +5835,9 @@ const getTypographyVariant$1 = size => {
   }
 };
 
+const _excluded$7 = ["labelText", "radioSize", "tileHeight", "tileWidth", "radioLocation"];
 const defaultProps$3 = {
-  graphic: jsx("div", {}),
+  graphic: /*#__PURE__*/jsx("div", {}),
   variant: "outlined",
   radioSize: "medium",
   state: "default",
@@ -5870,25 +5857,19 @@ const VentionRadioTile = radioTileProps => {
     tileHeight: props.tileHeight,
     tileWidth: props.tileWidth
   });
+
   //removing props that would be unknown to label Component
-  const {
-      labelText,
-      radioSize,
-      tileHeight,
-      tileWidth,
-      radioLocation
-    } = props,
-    formControlLabelProps = __rest(props, ["labelText", "radioSize", "tileHeight", "tileWidth", "radioLocation"]);
-  return jsx(FormControlLabel, Object.assign({}, formControlLabelProps, {
+  const formControlLabelProps = _objectWithoutPropertiesLoose(props, _excluded$7);
+  return /*#__PURE__*/jsx(FormControlLabel, Object.assign({}, formControlLabelProps, {
     className: props.className,
     classes: classes,
     labelPlacement: "bottom",
-    label: jsx(VentionRadioTileLabel, {
+    label: /*#__PURE__*/jsx(VentionRadioTileLabel, {
       graphic: props.graphic,
       labelText: props.labelText,
       size: props.radioSize
     }),
-    control: jsx(VentionRadioTileControl, Object.assign({}, props)),
+    control: /*#__PURE__*/jsx(VentionRadioTileControl, Object.assign({}, props)),
     "data-testid": "RadioTileFormControlLabel"
   }));
 };
@@ -7748,12 +7729,12 @@ const VentionIcon = /*#__PURE__*/memo(props => {
   });
   const isDuotoneIcon = props.type in duotoneIconImports;
   const IconSvg = isDuotoneIcon ? duotoneIconImports[props.type] : iconImports[props.type];
-  return jsx("div", {
+  return /*#__PURE__*/jsx("div", {
     className: classes.root,
     "data-testid": props.dataTestId || `icon-${String(props.type)}-root`,
-    children: jsx(Suspense, {
+    children: /*#__PURE__*/jsx(Suspense, {
       fallback: null,
-      children: jsx(IconSvg, {
+      children: /*#__PURE__*/jsx(IconSvg, {
         className: isDuotoneIcon ? classes.duotoneIcon : classes.icon,
         "data-testid": `icon-${String(props.type)}`
       })
@@ -7775,7 +7756,7 @@ const useStyles$o = tss.withParams().create(({
     justifyContent: "center"
   },
   icon: {
-    color: color !== null && color !== void 0 ? color : theme.palette.icon.primary,
+    color: color != null ? color : theme.palette.icon.primary,
     transition: "color 0.1s ease-in-out",
     height: size,
     width: size,
@@ -7791,6 +7772,7 @@ const useStyles$o = tss.withParams().create(({
   }
 }));
 
+const _excluded$6 = ["size", "placeholder", "value", "menuItems", "labelText", "isDisabled", "onChange", "errorText", "isMultiple", "state"];
 const getChevronIconSize = size => {
   switch (size) {
     case "small":
@@ -7818,25 +7800,25 @@ const VentionSelect = props => {
       isMultiple,
       state = "default"
     } = props,
-    other = __rest(props, ["size", "placeholder", "value", "menuItems", "labelText", "isDisabled", "onChange", "errorText", "isMultiple", "state"]);
+    other = _objectWithoutPropertiesLoose(props, _excluded$6);
   const theme = useTheme();
   const typographyVariants = typographyNameFromSizeMap[size];
   const menuItemsMap = useMemo(() => new Map(menuItems.map(item => [item.value, item])), [menuItems]);
-  return jsx(FormControl, {
+  return /*#__PURE__*/jsx(FormControl, {
     fullWidth: true,
     error: Boolean(errorText),
-    children: jsxs(Box$1, {
+    children: /*#__PURE__*/jsxs(Box$1, {
       display: "flex",
       flexDirection: "column",
       gap: theme.spacing(1),
-      children: [labelText && jsx(Typography, {
+      children: [labelText && /*#__PURE__*/jsx(Typography, {
         variant: typographyVariants.label,
         component: "label",
         children: labelText
-      }), jsx(Select, Object.assign({
-        IconComponent: () => jsx("div", {
+      }), /*#__PURE__*/jsx(Select, Object.assign({
+        IconComponent: () => /*#__PURE__*/jsx("div", {
           className: classes.chevronIconContainer,
-          children: jsx(VentionIcon, {
+          children: /*#__PURE__*/jsx(VentionIcon, {
             type: "chevron-down",
             size: getChevronIconSize(size),
             color: theme.palette.icon.primary
@@ -7845,7 +7827,7 @@ const VentionSelect = props => {
         disabled: isDisabled,
         displayEmpty: true,
         onChange: onChange,
-        value: value !== null && value !== void 0 ? value : "",
+        value: value != null ? value : "",
         MenuProps: {
           classes: {
             paper: classes.dropdownStyle
@@ -7854,9 +7836,9 @@ const VentionSelect = props => {
         className: classes.selectContainer,
         multiple: isMultiple,
         renderValue: selected => {
-          var _a, _b;
+          var _ref, _menuItemSelected$dis;
           if (selected === undefined || selected === null || selected === "" || Array.isArray(selected) && selected.length === 0) {
-            return jsx(Typography, {
+            return /*#__PURE__*/jsx(Typography, {
               variant: typographyVariants.text,
               className: classes.placeholder,
               children: placeholder
@@ -7865,28 +7847,28 @@ const VentionSelect = props => {
           if (isMultiple) {
             if (!Array.isArray(selected)) throw new Error("Selected value must be an array when isMultiple is true");
             const isOnlyText = selected.every(value => {
-              var _a;
-              return ((_a = menuItemsMap.get(value)) === null || _a === void 0 ? void 0 : _a.displayNode) === undefined;
+              var _menuItemsMap$get;
+              return ((_menuItemsMap$get = menuItemsMap.get(value)) == null ? void 0 : _menuItemsMap$get.displayNode) === undefined;
             });
             if (isOnlyText) {
               const _inputValue = selected.map(value => {
-                var _a;
+                var _menuItem$displayText;
                 const menuItem = menuItemsMap.get(value);
-                return (_a = menuItem === null || menuItem === void 0 ? void 0 : menuItem.displayText) !== null && _a !== void 0 ? _a : value;
+                return (_menuItem$displayText = menuItem == null ? void 0 : menuItem.displayText) != null ? _menuItem$displayText : value;
               }).join(", ");
-              return jsx("div", {
+              return /*#__PURE__*/jsx("div", {
                 className: classes.inputValue,
                 children: _inputValue
               });
             }
-            return jsx(Box$1, {
+            return /*#__PURE__*/jsx(Box$1, {
               display: "flex",
               flexWrap: "nowrap",
               gap: theme.spacing(2),
               className: classes.inputValue,
               children: selected.map(value => {
                 const menuItem = menuItemsMap.get(value);
-                return jsx(Box$1, {
+                return /*#__PURE__*/jsx(Box$1, {
                   children: menuItem && "displayNode" in menuItem ? menuItem.displayNode : menuItem.displayText
                 }, toReactKey(value));
               })
@@ -7894,30 +7876,30 @@ const VentionSelect = props => {
           }
           if (Array.isArray(selected)) throw new Error("Selected value must be a string or number when isMultiple is false");
           const menuItemSelected = menuItemsMap.get(selected);
-          const inputValue = (_b = (_a = menuItemSelected === null || menuItemSelected === void 0 ? void 0 : menuItemSelected.displayText) !== null && _a !== void 0 ? _a : menuItemSelected === null || menuItemSelected === void 0 ? void 0 : menuItemSelected.displayNode) !== null && _b !== void 0 ? _b : selected;
-          return jsx("div", {
+          const inputValue = (_ref = (_menuItemSelected$dis = menuItemSelected == null ? void 0 : menuItemSelected.displayText) != null ? _menuItemSelected$dis : menuItemSelected == null ? void 0 : menuItemSelected.displayNode) != null ? _ref : selected;
+          return /*#__PURE__*/jsx("div", {
             className: classes.inputValue,
             children: inputValue
           });
         }
       }, other, {
-        children: menuItems.map(item => jsxs(MenuItem, {
+        children: menuItems.map(item => /*#__PURE__*/jsxs(MenuItem, {
           value: item.value,
           className: classes.menuItem,
           disableRipple: true,
-          children: ["displayText" in item && jsx(Typography, {
+          children: ["displayText" in item && /*#__PURE__*/jsx(Typography, {
             variant: typographyVariants.text,
             children: item.displayText
           }), "displayNode" in item && item.displayNode]
         }, toReactKey(item.value)))
-      })), errorText && jsxs(FormHelperText, {
+      })), errorText && /*#__PURE__*/jsxs(FormHelperText, {
         error: Boolean(errorText),
         classes: {
           root: classes.formHelperText
         },
-        children: [jsx(IconAlertTriangleFilled, {
+        children: [/*#__PURE__*/jsx(IconAlertTriangleFilled, {
           size: getIconSize(props.size)
-        }), jsx(Typography, {
+        }), /*#__PURE__*/jsx(Typography, {
           variant: typographyVariants.helperText,
           children: errorText
         })]
@@ -7947,7 +7929,7 @@ const useStyles$n = tss.withParams().create(({
       height,
       borderRadius: theme.shape.borderRadius,
       textAlign: "center",
-      "& .MuiSelect-select": Object.assign(Object.assign({}, theme.typography[typographyVariant.text]), {
+      "& .MuiSelect-select": Object.assign({}, theme.typography[typographyVariant.text], {
         display: "flex",
         alignItems: "center",
         overflow: "hidden"
@@ -8077,11 +8059,12 @@ const getIconSize = size => {
       return 14;
   }
 };
+
 /**
  * `undefined` is not a valid React key, so we'll format it to the string `"undefined"`
  */
 function toReactKey(key) {
-  return key !== null && key !== void 0 ? key : "undefined";
+  return key != null ? key : "undefined";
 }
 
 const VentionStepper = props => {
@@ -8095,7 +8078,7 @@ const VentionStepper = props => {
   const {
     classes
   } = useStyles$m();
-  return jsxs(ButtonGroup, {
+  return /*#__PURE__*/jsxs(ButtonGroup, {
     variant: "contained",
     "aria-label": "Basic button group",
     className: classes.root,
@@ -8108,35 +8091,35 @@ const VentionStepper = props => {
         borderLeft: "none !important"
       }
     },
-    children: [jsx(Button, Object.assign({
+    children: [/*#__PURE__*/jsx(Button, Object.assign({
       "data-testid": "minus-button",
       className: classes.buttonStep
     }, minusButtonProps, {
-      children: jsx(IconMinus, {
+      children: /*#__PURE__*/jsx(IconMinus, {
         className: classes.signSVG
       })
-    })), jsxs(Paper, {
+    })), /*#__PURE__*/jsxs(Paper, {
       "data-testid": "input-paper",
       elevation: 0,
       className: classes.inputPaper,
-      children: [leadingText && jsx(Typography, {
+      children: [leadingText && /*#__PURE__*/jsx(Typography, {
         variant: "heading18SemiBold",
         className: classes.text,
         children: leadingText
-      }), jsx(Typography, {
+      }), /*#__PURE__*/jsx(Typography, {
         variant: "heading18SemiBold",
         className: classes.value,
         children: value
-      }), trailingText && jsx(Typography, {
+      }), trailingText && /*#__PURE__*/jsx(Typography, {
         variant: "heading18SemiBold",
         className: classes.text,
         children: trailingText
       })]
-    }), jsx(Button, Object.assign({
+    }), /*#__PURE__*/jsx(Button, Object.assign({
       "data-testid": "plus-button",
       className: classes.buttonStep
     }, plusButtonProps, {
-      children: jsx(IconPlus, {
+      children: /*#__PURE__*/jsx(IconPlus, {
         className: classes.signSVG
       })
     }))]
@@ -8148,7 +8131,8 @@ const useStyles$m = tss.withNestedSelectors().create(({
 }) => {
   return {
     root: {
-      width: "inherit",
+      width: "100%",
+      minWidth: 0,
       height: theme.spacing(11),
       display: "flex",
       justifyContent: "center",
@@ -8157,11 +8141,13 @@ const useStyles$m = tss.withNestedSelectors().create(({
     },
     inputPaper: {
       display: "flex",
+      minWidth: 0,
+      overflow: "visible",
       height: `calc(${theme.spacing(11)} - 4px)`,
       justifyContent: "space-between",
       alignItems: "center",
       gap: theme.spacing(5),
-      flex: 1,
+      flex: "1 1 0%",
       borderRadius: 0,
       border: `2px solid ${theme.palette.misc.stepper.border}`,
       padding: `0 ${theme.spacing(4)}`,
@@ -8176,9 +8162,12 @@ const useStyles$m = tss.withNestedSelectors().create(({
       color: theme.palette.misc.stepper.text
     },
     value: {
-      flex: "1 1",
+      flex: "1 1 0%",
+      minWidth: 0,
       textAlign: "center",
-      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+      overflow: "visible",
+      fontVariantNumeric: "tabular-nums",
       color: theme.palette.misc.stepper.text
     },
     buttonStep: {
@@ -8220,13 +8209,13 @@ const VentionTabs = ({
     cx,
     classes
   } = useStyles$l();
-  return jsx(Box$1, {
+  return /*#__PURE__*/jsx(Box$1, {
     className: classes.root,
-    children: tabOptions.map((buttonLabel, index) => jsx(Button, {
+    children: tabOptions.map((buttonLabel, index) => /*#__PURE__*/jsx(Button, {
       className: index === value ? cx(classes.button, classes.selectedButton) : classes.button,
       onClick: event => onChange(event, index),
       disableRipple: true,
-      children: jsx(Typography, {
+      children: /*#__PURE__*/jsx(Typography, {
         variant: "heading18SemiBold",
         children: buttonLabel
       })
@@ -8269,24 +8258,24 @@ const VentionDraggable = props => {
   const {
     classes
   } = useStyles$k(props);
-  return jsx(Draggable, {
+  return /*#__PURE__*/jsx(Draggable, {
     handle: "#draggable-area",
     positionOffset: props.defaultPosition,
-    children: jsx(Box$1, {
+    children: /*#__PURE__*/jsx(Box$1, {
       className: classes.container,
       id: props.tabLocation == null ? "draggable-area" : null,
       "data-testid": testIds.body,
-      children: jsxs(Stack, {
+      children: /*#__PURE__*/jsxs(Stack, {
         className: classes.layoutBox,
         "data-testid": testIds.layoutContainer,
-        children: [props.tabLocation != null && jsx(Box$1, {
+        children: [props.tabLocation != null && /*#__PURE__*/jsx(Box$1, {
           id: "draggable-area",
           className: classes.handleContainer,
           "data-testid": testIds.handle,
-          children: jsx(Box$1, {
+          children: /*#__PURE__*/jsx(Box$1, {
             className: classes.handle
           })
-        }), jsx(Box$1, {
+        }), /*#__PURE__*/jsx(Box$1, {
           flexGrow: 1,
           children: props.children
         })]
@@ -8311,8 +8300,8 @@ const useStyles$k = tss.withParams().create(({
       border: `1px solid ${theme.palette.border.main}`,
       backgroundColor: theme.palette.background.default,
       padding: containerPadding,
-      width: width !== null && width !== void 0 ? width : "fit-content",
-      height: height !== null && height !== void 0 ? height : "fit-content",
+      width: width != null ? width : "fit-content",
+      height: height != null ? height : "fit-content",
       boxShadow: "0px 4px 6px -1px rgba(2, 6, 23, 0.08)"
     },
     layoutBox: {
@@ -8381,21 +8370,22 @@ const testIds = {
   layoutContainer: "draggable-layout-container"
 };
 
+const _excluded$5 = ["value", "onChange", "largeThumb"];
 const VentionSlider = props => {
   const {
       value,
       onChange,
       largeThumb
     } = props,
-    other = __rest(props, ["value", "onChange", "largeThumb"]);
+    other = _objectWithoutPropertiesLoose(props, _excluded$5);
   const {
     classes
   } = useStyles$j({
     largeThumb
   });
-  return jsx("div", {
+  return /*#__PURE__*/jsx("div", {
     className: classes.root,
-    children: jsx(Slider, Object.assign({
+    children: /*#__PURE__*/jsx(Slider, Object.assign({
       "data-testid": "slider",
       value: value,
       onChange: onChange
@@ -8483,7 +8473,7 @@ $$8({ target: 'Array', proto: true, forced: BROKEN_ON_SPARSE }, {
 addToUnscopables('includes');
 
 const VentionSwitch = props => {
-  var _a, _b;
+  var _props$variant, _props$disabled;
   const {
     checked,
     size,
@@ -8496,8 +8486,8 @@ const VentionSwitch = props => {
   } = useStyles$i({
     checked,
     size,
-    variant: (_a = props.variant) !== null && _a !== void 0 ? _a : "default",
-    disabled: (_b = props.disabled) !== null && _b !== void 0 ? _b : false
+    variant: (_props$variant = props.variant) != null ? _props$variant : "default",
+    disabled: (_props$disabled = props.disabled) != null ? _props$disabled : false
   });
   const handleOnchange = () => {
     if (disabled) return;
@@ -8505,7 +8495,7 @@ const VentionSwitch = props => {
       onChange(checked === "off" ? "on" : "off");
     }
   };
-  return jsxs("div", {
+  return /*#__PURE__*/jsxs("div", {
     role: "switch",
     "aria-busy": checked === "loading" ? true : undefined,
     "aria-checked": getAriaChecked(checked),
@@ -8513,14 +8503,14 @@ const VentionSwitch = props => {
     className: classes.root,
     "data-testid": "vention-switch-root",
     onClick: handleOnchange,
-    children: [checked === "mixed" ? jsx(IconMinus, {
+    children: [checked === "mixed" ? /*#__PURE__*/jsx(IconMinus, {
       "data-testid": "vention-switch-minus",
       className: classes.iconMinus
-    }) : null, checked === "loading" ? jsx(IconLoader2, {
+    }) : null, checked === "loading" ? /*#__PURE__*/jsx(IconLoader2, {
       "data-testid": "vention-switch-loading",
       color: theme.palette.icon.tertiary,
       className: classes.loader
-    }) : null, (checked === "on" || checked === "off") && jsx("div", {
+    }) : null, (checked === "on" || checked === "off") && /*#__PURE__*/jsx("div", {
       className: classes.thumb,
       "data-testid": "vention-switch-thumb"
     })]
@@ -8534,7 +8524,7 @@ const useStyles$i = tss.withParams().create(({
   disabled
 }) => {
   return {
-    root: Object.assign(Object.assign({
+    root: Object.assign({
       backgroundColor: getBackgroundColor$1(theme, checked, variant),
       display: "flex",
       borderRadius: "999px",
@@ -8542,7 +8532,7 @@ const useStyles$i = tss.withParams().create(({
       justifyContent: getRootJustifyContent(checked),
       border: ["on", "off"].includes(checked) ? undefined : `${getThumbMarginSize(theme, size)} solid ${getRootBorderColor(theme, checked)}`,
       boxSizing: "border-box"
-    }, getTrackSize(theme, size)), {
+    }, getTrackSize(theme, size), {
       opacity: disabled ? 0.2 : 1
     }),
     iconMinus: {
@@ -8707,6 +8697,7 @@ const VentionPopover = props => {
     top: 0,
     left: 0
   });
+
   /**
    * Depending on the arrow position, calculate the position of the popover
    * @param top The top position of the popover
@@ -8740,6 +8731,7 @@ const VentionPopover = props => {
         };
     }
   }, [props.arrowPosition]);
+
   /**
    * Determine the position of the popover to be center aligned with the target
    * @param top Position of the target from the top
@@ -8767,7 +8759,7 @@ const VentionPopover = props => {
       setPosition(calculatePositionFromArrow(centerPosition.top, centerPosition.left, popoverRef.current));
     }
   }, [pos2D, calculatePositionFromArrow]);
-  return jsxs(Box$1, {
+  return /*#__PURE__*/jsxs(Box$1, {
     "data-testid": "popover",
     ref: popoverRef,
     className: classes.box,
@@ -8776,45 +8768,46 @@ const VentionPopover = props => {
       left: position.left,
       visibility: visible ? "visible" : "hidden"
     },
-    children: [jsxs(Card, {
+    children: [/*#__PURE__*/jsxs(Card, {
       className: classes.card,
-      children: [image && jsx(CardMedia, {
+      children: [image && /*#__PURE__*/jsx(CardMedia, {
         className: classes.media,
         image: image,
         title: props.title
-      }), jsxs(CardContent, {
+      }), /*#__PURE__*/jsxs(CardContent, {
         className: classes.cardContent,
-        children: [jsxs(Box$1, {
+        children: [/*#__PURE__*/jsxs(Box$1, {
           display: "grid",
           gap: 2,
           gridTemplateColumns: "auto 1fr",
-          children: [titleIcon && jsx("img", {
+          children: [titleIcon && /*#__PURE__*/jsx("img", {
             src: titleIcon,
             alt: "icon"
-          }), title && jsx(Typography, {
+          }), title && /*#__PURE__*/jsx(Typography, {
             variant: "heading16SemiBold",
             component: "div",
             children: title
           })]
-        }), description && jsx(Typography, {
+        }), description && /*#__PURE__*/jsx(Typography, {
           variant: "uiText14Regular",
           className: classes.description,
           children: description
-        }), props.buttons && jsx(Stack, {
+        }), props.buttons && /*#__PURE__*/jsx(Stack, {
           direction: "row",
           justifyContent: "flex-end",
           spacing: 2,
-          children: props.buttons.map((buttonProps, index) => jsx(VentionButton, Object.assign({}, buttonProps, {
+          children: props.buttons.map((buttonProps, index) => /*#__PURE__*/jsx(VentionButton, Object.assign({}, buttonProps, {
             className: classes.button
           }), `popover_button_${index}`))
         })]
       })]
-    }), jsx("div", {
+    }), /*#__PURE__*/jsx("div", {
       "data-testid": "popoverArrow",
       className: `${classes.popoverArrow} ${props.arrowPosition}`
     })]
   });
 };
+
 /**
  * Get the styles for the arrow of the popover depending on the position provided
  * @param arrowPos Position of the arrow
@@ -8854,7 +8847,7 @@ const getArrowStyles = arrowPos => {
       }
     }[arrowPos];
   };
-  return Object.assign(Object.assign({}, getMainPosition()), {
+  return Object.assign({}, getMainPosition(), {
     borderWidth: getBorderWidth(),
     borderColor: getBorderColor()
   });
@@ -9050,11 +9043,11 @@ const VentionMenuChildItem = /*#__PURE__*/forwardRef((props, ref) => {
     size,
     focused
   });
-  const shouldCloseMenuOnClick = closeMenuOnClick !== null && closeMenuOnClick !== void 0 ? closeMenuOnClick : menuCloseMenuOnClick;
+  const shouldCloseMenuOnClick = closeMenuOnClick != null ? closeMenuOnClick : menuCloseMenuOnClick;
   const variant = getTextVariantGivenSize(size);
   const menuItemRef = useRef(null);
   useImperativeHandle(ref, () => menuItemRef.current);
-  return jsxs(MenuItem, {
+  return /*#__PURE__*/jsxs(MenuItem, {
     ref: menuItemRef,
     "data-testid": dataTestId,
     className: classes.root,
@@ -9062,26 +9055,26 @@ const VentionMenuChildItem = /*#__PURE__*/forwardRef((props, ref) => {
     disabled: disabled,
     id: customID,
     onClick: event => {
-      onClick === null || onClick === void 0 ? void 0 : onClick(event);
+      onClick == null || onClick(event);
       if (shouldCloseMenuOnClick) {
         closeMenu();
       }
     },
-    children: [leftElement && jsx(ListItemIcon, {
+    children: [leftElement && /*#__PURE__*/jsx(ListItemIcon, {
       className: classes.icon,
       children: leftElement
-    }), jsx(ListItemText, {
-      children: jsx(Typography, {
+    }), /*#__PURE__*/jsx(ListItemText, {
+      children: /*#__PURE__*/jsx(Typography, {
         className: classes.clampedText,
         variant: variant,
         noWrap: true,
         justifyContent: "start",
-        children: labelText !== null && labelText !== void 0 ? labelText : children
+        children: labelText != null ? labelText : children
       })
-    }), jsx(Typography, {
+    }), /*#__PURE__*/jsx(Typography, {
       variant: variant,
       children: shortcutKey && shortcutKey
-    }), hasSubMenu && jsx(VentionIcon, {
+    }), hasSubMenu && /*#__PURE__*/jsx(VentionIcon, {
       type: "chevron-right",
       size: getIconSizeGivenMenuSize(size)
     })]
@@ -9131,16 +9124,17 @@ const useStyles$g = tss.withParams().create(({
   };
 });
 
+const _excluded$4 = ["subMenuItems"];
 /**
  * This Component will render a menu item with its sub items as a nested VentionMenuList that is shown on hover.
  *
  * Any VentionMenuItem that has its `subMenuItems` prop defined will render this component instead of a `VentionMenuChildItem` directly.
  */
-const VentionMenuParentItem = _a => {
-  var {
+const VentionMenuParentItem = _ref => {
+  let {
       subMenuItems
-    } = _a,
-    props = __rest(_a, ["subMenuItems"]);
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   const menuItemRef = useRef(null);
   const {
     size
@@ -9159,21 +9153,19 @@ const VentionMenuParentItem = _a => {
   const handleMouseLeave = () => {
     setOpen(false);
   };
-  return jsxs("div", {
+  return /*#__PURE__*/jsxs("div", {
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
-    children: [jsx(VentionMenuChildItem, Object.assign({
+    children: [/*#__PURE__*/jsx(VentionMenuChildItem, Object.assign({
       ref: menuItemRef,
-      closeMenuOnClick: false
+      closeMenuOnClick: false // defaults to false for a parent item, but can be overridden by the props
     }, props, {
       hasSubMenu: true,
       focused: open
-    })), jsx(Popover
+    })), /*#__PURE__*/jsx(Popover
     // Set pointer events to 'none' to prevent the invisible Popover div
     // from capturing events for clicks and hovers
     , {
-      // Set pointer events to 'none' to prevent the invisible Popover div
-      // from capturing events for clicks and hovers
       sx: {
         pointerEvents: "none"
       },
@@ -9197,10 +9189,10 @@ const VentionMenuParentItem = _a => {
       disableAutoFocus: true,
       disableScrollLock: true,
       disableRestoreFocus: true,
-      children: jsx(VentionMenuList, {
+      children: /*#__PURE__*/jsx(VentionMenuList, {
         "data-testid": "menuItemSubMenu",
         disableBoxShadow: true,
-        children: jsx("div", {
+        children: /*#__PURE__*/jsx("div", {
           style: {
             pointerEvents: "auto"
           },
@@ -9224,12 +9216,13 @@ const useStyles$f = tss.withParams().create(({
   };
 });
 
+const _excluded$3 = ["subMenuItems"];
 const VentionMenuItem = props => {
   const {
       subMenuItems
     } = props,
-    childItemProps = __rest(props, ["subMenuItems"]);
-  return subMenuItems !== undefined ? jsx(VentionMenuParentItem, Object.assign({}, props)) : jsx(VentionMenuChildItem, Object.assign({}, childItemProps));
+    childItemProps = _objectWithoutPropertiesLoose(props, _excluded$3);
+  return subMenuItems !== undefined ? /*#__PURE__*/jsx(VentionMenuParentItem, Object.assign({}, props)) : /*#__PURE__*/jsx(VentionMenuChildItem, Object.assign({}, childItemProps));
 };
 
 const VentionMenuList = ({
@@ -9238,7 +9231,7 @@ const VentionMenuList = ({
   children,
   disableBoxShadow: _disableBoxShadow = false
 }) => {
-  var _a;
+  var _menuOptionsInfo$map;
   const {
     size,
     menuWidth
@@ -9251,12 +9244,12 @@ const VentionMenuList = ({
     disableBoxShadow: _disableBoxShadow
   });
   const renderMenuItem = (ventionMenuItemProps, index) => {
-    return jsx(VentionMenuItem, Object.assign({}, ventionMenuItemProps), index);
+    return /*#__PURE__*/jsx(VentionMenuItem, Object.assign({}, ventionMenuItemProps), index);
   };
-  return jsx(MenuList, {
+  return /*#__PURE__*/jsx(MenuList, {
     "data-testid": dataTestId,
     className: classes.root,
-    children: (_a = menuOptionsInfo === null || menuOptionsInfo === void 0 ? void 0 : menuOptionsInfo.map(renderMenuItem)) !== null && _a !== void 0 ? _a : children
+    children: (_menuOptionsInfo$map = menuOptionsInfo == null ? void 0 : menuOptionsInfo.map(renderMenuItem)) != null ? _menuOptionsInfo$map : children
   });
 };
 const useStyles$e = tss.withParams().create(({
@@ -9295,9 +9288,9 @@ const VentionMenuHeader = props => {
   } = useStyles$d({
     size
   });
-  return jsx("div", {
+  return /*#__PURE__*/jsx("div", {
     className: classes.root,
-    children: jsx(VentionMenuChildItem, {
+    children: /*#__PURE__*/jsx(VentionMenuChildItem, {
       disabled: true,
       labelText: labelText
     })
@@ -9322,9 +9315,9 @@ const VentionMenuDivider = ({
   } = useStyles$c({
     size
   });
-  return jsx("div", {
+  return /*#__PURE__*/jsx("div", {
     className: classes.root,
-    children: jsx(MenuItem, {
+    children: /*#__PURE__*/jsx(MenuItem, {
       divider: true,
       className: classes.divider,
       role: "separator"
@@ -9347,33 +9340,34 @@ const useStyles$c = tss.withParams().create(({
   };
 });
 
-const VentionMenu = _a => {
-  var {
+const _excluded$2 = ["showMenu", "setShowMenu", "closeMenuOnClick", "size", "menuWidth", "children"];
+const VentionMenu = _ref => {
+  let {
       showMenu = true,
       setShowMenu,
       closeMenuOnClick = true,
       size = "small",
       menuWidth = "280px",
       children
-    } = _a,
-    ventionMenuListProps = __rest(_a, ["showMenu", "setShowMenu", "closeMenuOnClick", "size", "menuWidth", "children"]);
+    } = _ref,
+    ventionMenuListProps = _objectWithoutPropertiesLoose(_ref, _excluded$2);
   const closeMenu = () => {
     setShowMenu(false);
   };
-  return showMenu ? jsx(VentionMenuContext.Provider, {
+  return showMenu ? /*#__PURE__*/jsx(VentionMenuContext.Provider, {
     value: {
       closeMenuOnClick,
       size,
       menuWidth,
       closeMenu
     },
-    children: jsx(ClickAwayListener, {
+    children: /*#__PURE__*/jsx(ClickAwayListener, {
       onClickAway: closeMenu,
-      children: jsx("div", {
+      children: /*#__PURE__*/jsx("div", {
         style: {
           display: "inline-block"
         },
-        children: jsx(VentionMenuList, Object.assign({}, ventionMenuListProps, {
+        children: /*#__PURE__*/jsx(VentionMenuList, Object.assign({}, ventionMenuListProps, {
           children: children
         }))
       })
@@ -9416,13 +9410,13 @@ const VentionCollapsibleCaretButton = ({
     isVisible,
     isExpanded
   });
-  return jsx(Box$1, {
+  return /*#__PURE__*/jsx(Box$1, {
     component: "div",
     className: classes.root,
     onClick: onClick,
     "data-testid": dataTestid,
     "aria-expanded": isExpanded,
-    children: jsx(IconCaretRightFilled, {
+    children: /*#__PURE__*/jsx(IconCaretRightFilled, {
       size: 16
     })
   });
@@ -9444,9 +9438,6 @@ const useStyles$b = tss.withParams().create(({
   };
 });
 
-/** This is the default height of the tree item. This value only changes if you stack multiple captionRight elements.
- * This is needed for Machinebuilder for virtualization.
- */
 const DEFAULT_VENTION_TREE_ITEM_HEIGHT = 32;
 const hasAnyVisibleItem = (items, isHovering) => {
   if (items === undefined || items.length === 0) return false;
@@ -9506,6 +9497,7 @@ const VentionTreeItem = /*#__PURE__*/forwardRef((inputProps, ref) => {
       onRenaming(true);
     }
   };
+
   // Need this useEffect for now to be able to set the label outside of this component...
   useEffect(() => {
     setLabel(labelText);
@@ -9518,7 +9510,7 @@ const VentionTreeItem = /*#__PURE__*/forwardRef((inputProps, ref) => {
     }
   };
   const handleRename = newLabel => {
-    onLabelChange === null || onLabelChange === void 0 ? void 0 : onLabelChange(newLabel);
+    onLabelChange == null || onLabelChange(newLabel);
   };
   const hasVisibleTrailingOrActionItems = hasAnyVisibleItem(trailingElements, isHovering) || hasAnyVisibleItem(actionButtons, isHovering);
   const handleTrailingElementClick = event => {
@@ -9526,51 +9518,51 @@ const VentionTreeItem = /*#__PURE__*/forwardRef((inputProps, ref) => {
   };
   const handleOnClick = event => {
     event.stopPropagation();
-    onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    onClick == null || onClick(event);
   };
   const isCaretVisible = Children.count(children) > 0;
-  const testId = dataTestid !== null && dataTestid !== void 0 ? dataTestid : "vention-tree-item";
-  return jsxs("div", {
+  const testId = dataTestid != null ? dataTestid : "vention-tree-item";
+  return /*#__PURE__*/jsxs("div", {
     className: classes.root,
     onClick: handleOnClick,
     ref: ref,
-    children: [jsxs("div", {
+    children: [/*#__PURE__*/jsxs("div", {
       "aria-selected": isSelected,
       "data-testid": testId,
       className: classes.mainContent,
-      onContextMenu: event => onContextMenu === null || onContextMenu === void 0 ? void 0 : onContextMenu(event),
+      onContextMenu: event => onContextMenu == null ? void 0 : onContextMenu(event),
       onMouseEnter: event => {
         if (!isSelected) {
-          onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(event);
+          onMouseEnter == null || onMouseEnter(event);
           setIsHovering(true);
         }
       },
       onMouseLeave: event => {
         if (!isSelected) {
-          onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(event);
+          onMouseLeave == null || onMouseLeave(event);
           setIsHovering(false);
         }
       },
-      children: [jsxs("div", {
+      children: [/*#__PURE__*/jsxs("div", {
         className: classes.singleLineContainer,
-        children: [collapsible && jsx(VentionCollapsibleCaretButton, {
+        children: [collapsible && /*#__PURE__*/jsx(VentionCollapsibleCaretButton, {
           isVisible: isCaretVisible,
           isExpanded: isExpanded,
           onClick: handleIsExpandedToggle,
           dataTestid: `${testId}-collapseButton`
-        }), jsx("div", {
+        }), /*#__PURE__*/jsx("div", {
           "data-testid": `${testId}-icon`,
           className: classes.iconContainer,
           children: icon
-        }), jsx("div", {
+        }), /*#__PURE__*/jsx("div", {
           className: classes.labelContainer,
           "data-testid": `${testId}-label`,
           onDoubleClick: handleRenaming,
-          children: jsx(Typography, {
+          children: /*#__PURE__*/jsx(Typography, {
             className: classes.label,
             variant: "uiText12Regular",
             title: label,
-            children: isRenaming ? jsx(VentionTextInput, {
+            children: isRenaming ? /*#__PURE__*/jsx(VentionTextInput, {
               autoFocus: true,
               value: label,
               size: "small",
@@ -9589,20 +9581,20 @@ const VentionTreeItem = /*#__PURE__*/forwardRef((inputProps, ref) => {
               }
             }) : label
           })
-        }), hasVisibleTrailingOrActionItems && jsxs("div", {
+        }), hasVisibleTrailingOrActionItems && /*#__PURE__*/jsxs("div", {
           className: classes.actionButtonsContainer,
           "data-testid": `${testId}-contextItems`,
-          children: [trailingElements === null || trailingElements === void 0 ? void 0 : trailingElements.map((trailingElement, index) => jsx("div", {
+          children: [trailingElements == null ? void 0 : trailingElements.map((trailingElement, index) => /*#__PURE__*/jsx("div", {
             className: cx(classes.trailingElement, trailingElement.showOnHover && classes.trailingElementShowOnHover),
             "data-testid": `${testId}-trailingElement-${index}`,
             onClick: handleTrailingElementClick,
             children: trailingElement.component
-          }, index)), actionButtons === null || actionButtons === void 0 ? void 0 : actionButtons.map((button, index) => {
+          }, index)), actionButtons == null ? void 0 : actionButtons.map((button, index) => {
             const handleButtonOnClick = event => {
               event.stopPropagation();
               button.onClick(event);
             };
-            return jsx(VentionIconButton, {
+            return /*#__PURE__*/jsx(VentionIconButton, {
               variant: "shaded",
               className: `${classes.actionButton} ${button.showOnHover ? classes.showOnHover : ""}`,
               "data-testid": `${testId}-actionButton-${index}`,
@@ -9611,10 +9603,10 @@ const VentionTreeItem = /*#__PURE__*/forwardRef((inputProps, ref) => {
             }, index);
           })]
         })]
-      }), captionsRight && captionsRight.length > 0 && jsx("div", {
+      }), captionsRight && captionsRight.length > 0 && /*#__PURE__*/jsx("div", {
         className: classes.captionRightContainer,
         "data-testid": `${testId}-captionRightContainer`,
-        children: captionsRight.map((caption, index) => jsx("div", {
+        children: captionsRight.map((caption, index) => /*#__PURE__*/jsx("div", {
           className: cx(classes.captionRight, !!caption.onClick && classes.clickableCaptionRight),
           onClick: caption.onClick ? event => {
             event.stopPropagation();
@@ -9624,19 +9616,19 @@ const VentionTreeItem = /*#__PURE__*/forwardRef((inputProps, ref) => {
             color: caption.color
           },
           "data-testid": `${testId}-captionRight-${index}`,
-          children: jsx(Typography, {
+          children: /*#__PURE__*/jsx(Typography, {
             className: cx(classes.label, classes.captionRightLabel),
             variant: "uiTableNumbers12Reg",
             title: caption.text,
             children: caption.text
           })
         }, index))
-      }), hasWarning && jsx(IconAlertTriangleFilled, {
+      }), hasWarning && /*#__PURE__*/jsx(IconAlertTriangleFilled, {
         className: classes.alertIcon,
         size: 16,
         color: theme.palette.icon.warning
       })]
-    }), jsx("div", {
+    }), /*#__PURE__*/jsx("div", {
       className: classes.childrenItems,
       children: children
     })]
@@ -9659,6 +9651,7 @@ const useStyles$a = tss.withParams().withNestedSelectors().create(({
   const invisibleBorder = `1px solid transparent`;
   // 22 is padding per indent
   const paddingLeft = indentLevel * 22 + 16;
+
   // Check if we have multiple captions
   const hasMultipleCaptions = captionsRight && captionsRight.length > 1;
   return {
@@ -9790,6 +9783,7 @@ const useStyles$a = tss.withParams().withNestedSelectors().create(({
   };
 });
 
+const _excluded$1 = ["onDrawerHandleClick", "dataTestid"];
 const VentionDrawerWrapper = props => {
   const {
     classes
@@ -9798,10 +9792,10 @@ const VentionDrawerWrapper = props => {
     anchor: props.anchor,
     open: props.open
   });
-  return props.onDrawerHandleClick ? jsx("div", {
+  return props.onDrawerHandleClick ? /*#__PURE__*/jsx("div", {
     className: classes.drawerHandleWrapper,
     children: props.children
-  }) : jsx(Fragment, {
+  }) : /*#__PURE__*/jsx(Fragment, {
     children: props.children
   });
 };
@@ -9815,27 +9809,26 @@ const VentionDrawer = props => {
     open: props.open
   });
   const {
-      onDrawerHandleClick,
       dataTestid
     } = props,
-    muiDrawerProps = __rest(props, ["onDrawerHandleClick", "dataTestid"]);
+    muiDrawerProps = _objectWithoutPropertiesLoose(props, _excluded$1);
   const isRightIconVisible = props.anchor === "right" && props.open || props.anchor === "left" && !props.open;
   const isLeftIconVisible = props.anchor === "right" && !props.open || props.anchor === "left" && props.open;
-  return jsx(VentionDrawerWrapper, Object.assign({}, props, {
-    children: jsxs(Drawer, Object.assign({}, muiDrawerProps, {
+  return /*#__PURE__*/jsx(VentionDrawerWrapper, Object.assign({}, props, {
+    children: /*#__PURE__*/jsxs(Drawer, Object.assign({}, muiDrawerProps, {
       variant: props.onDrawerHandleClick ? "permanent" : props.variant,
       className: classes.root,
-      children: [props.onDrawerHandleClick && jsxs("button", {
+      children: [props.onDrawerHandleClick && /*#__PURE__*/jsxs("button", {
         "aria-label": "drawer-handle",
         className: classes.drawerHandle,
         onClick: props.onDrawerHandleClick,
         "data-testid": dataTestid,
-        children: [isRightIconVisible && jsx(IconChevronsRight, {
+        children: [isRightIconVisible && /*#__PURE__*/jsx(IconChevronsRight, {
           className: classes.handleIcon
-        }), isLeftIconVisible && jsx(IconChevronsLeft, {
+        }), isLeftIconVisible && /*#__PURE__*/jsx(IconChevronsLeft, {
           className: classes.handleIcon
         })]
-      }), jsx("div", {
+      }), /*#__PURE__*/jsx("div", {
         className: classes.drawerChildren,
         children: props.children
       })]
@@ -9914,7 +9907,7 @@ const defaultProps$1 = {
   dotPosition: "left"
 };
 const VentionStatusIndicator = inputProps => {
-  const props = Object.assign(Object.assign({}, defaultProps$1), inputProps);
+  const props = Object.assign({}, defaultProps$1, inputProps);
   const {
     classes,
     theme
@@ -9925,16 +9918,16 @@ const VentionStatusIndicator = inputProps => {
   });
   const typographyVariant = getTypographyVariant(props.size);
   const sizeStyles = sizeMapping(props.size, props.dotPosition, theme);
-  return jsxs(Box$1, {
+  return /*#__PURE__*/jsxs(Box$1, {
     className: classes.root,
-    children: [props.dotPosition === "left" && jsx(VentionStatusDot, {
+    children: [props.dotPosition === "left" && /*#__PURE__*/jsx(VentionStatusDot, {
       color: props.dotColor,
       size: sizeStyles.dotSize
-    }), jsx(Typography$1, {
+    }), /*#__PURE__*/jsx(Typography$1, {
       variant: typographyVariant,
       className: classes.label,
       children: props.label
-    }), props.dotPosition === "right" && jsx(VentionStatusDot, {
+    }), props.dotPosition === "right" && /*#__PURE__*/jsx(VentionStatusDot, {
       color: props.dotColor,
       size: sizeStyles.dotSize
     })]
@@ -10102,28 +10095,28 @@ const VentionBanner = ({
     color,
     accent: _accent
   });
-  return jsxs(Box$1, {
+  return /*#__PURE__*/jsxs(Box$1, {
     className: classes.banner,
     onClick: onClick,
     role: "alert",
     tabIndex: 0,
     "data-testid": "banner-root",
-    children: [startAdornment && jsx(Box$1, {
+    children: [startAdornment && /*#__PURE__*/jsx(Box$1, {
       className: classes.bannerIconContainer,
       children: startAdornment
-    }), jsx(Typography, {
+    }), /*#__PURE__*/jsx(Typography, {
       component: "span",
       className: classes.bannerTitle,
       title: title,
       variant: "heading16SemiBold",
       children: title
-    }), description && jsx(Typography, {
+    }), description && /*#__PURE__*/jsx(Typography, {
       component: "span",
       className: classes.bannerDescription,
       title: description,
       variant: "paragraph14Regular",
       children: description
-    }), endAdornment && jsx(Box$1, {
+    }), endAdornment && /*#__PURE__*/jsx(Box$1, {
       className: classes.endAdornment,
       children: endAdornment
     })]
@@ -10171,6 +10164,7 @@ const colorConfig = {
     }
   }
 };
+
 /**
  * Compute banner background and text color based on the `color` prop
  */
@@ -10263,8 +10257,8 @@ const VentionModalBanner = ({
   });
   const handleOpenModal = () => setIsModalOpen(true);
   const handleCloseModal = () => setIsModalOpen(false);
-  return jsxs(Fragment, {
-    children: [jsx(VentionBanner, {
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(VentionBanner, {
       size: _size,
       accent: _accent,
       color: color,
@@ -10273,26 +10267,26 @@ const VentionModalBanner = ({
       description: description,
       endAdornment: endAdornment,
       onClick: handleOpenModal
-    }), jsx(Modal, {
+    }), /*#__PURE__*/jsx(Modal, {
       open: isModalOpen,
       onClose: handleCloseModal,
       className: classes.modal,
-      children: jsx(Box$1, {
+      children: /*#__PURE__*/jsx(Box$1, {
         className: classes.modalBox,
         "data-testid": "banner-modal",
-        children: jsxs(Box$1, {
+        children: /*#__PURE__*/jsxs(Box$1, {
           className: classes.modalRowContainer,
-          children: [icon && jsx(Box$1, {
+          children: [icon && /*#__PURE__*/jsx(Box$1, {
             className: classes.modalIconContainer,
             children: icon
-          }), jsxs(Box$1, {
+          }), /*#__PURE__*/jsxs(Box$1, {
             className: classes.modalTitleContainer,
-            children: [jsx(Typography, {
+            children: [/*#__PURE__*/jsx(Typography, {
               component: "span",
               variant: "heading16SemiBold",
               className: classes.modalTitle,
               children: title
-            }), description && jsx(Typography, {
+            }), description && /*#__PURE__*/jsx(Typography, {
               component: "span",
               variant: "paragraph14Regular",
               className: classes.modalDescription,
@@ -10359,7 +10353,7 @@ const VentionSidebarItem = props => {
     state: props.state
   });
   const isDisabled = props.state === "disabled";
-  return jsx(Button, {
+  return /*#__PURE__*/jsx(Button, {
     className: classes.sidebarItem,
     onClick: props.onClick,
     disabled: isDisabled,
@@ -10367,22 +10361,22 @@ const VentionSidebarItem = props => {
     disableFocusRipple: true,
     disableTouchRipple: true,
     "data-testid": "vention-sidebar-item-button",
-    children: jsxs(Stack, {
+    children: /*#__PURE__*/jsxs(Stack, {
       direction: "row",
       alignItems: "center",
       justifyContent: "space-between",
       gap: 4,
-      children: [jsxs("div", {
-        children: [jsx(Typography, {
+      children: [/*#__PURE__*/jsxs("div", {
+        children: [/*#__PURE__*/jsx(Typography, {
           variant: "heading24SemiBold",
           color: isDisabled ? `text.tertiary` : `text.primary`,
           children: props.title
-        }), jsx(Typography, {
+        }), /*#__PURE__*/jsx(Typography, {
           variant: "hmiText20Regular",
           color: isDisabled ? `text.tertiary` : `text.secondary`,
           children: props.subtitle
         })]
-      }), jsx(IconChevronRight, {
+      }), /*#__PURE__*/jsx(IconChevronRight, {
         className: classes.icon
       })]
     })
@@ -10943,7 +10937,7 @@ $({ target: 'Iterator', proto: true, real: true }, {
  * />
  */
 const VentionCombobox = props => {
-  var _a, _b, _c;
+  var _options$find, _props$groups$reduce, _props$groups;
   const {
     options,
     value,
@@ -10991,7 +10985,7 @@ const VentionCombobox = props => {
     handleClose();
   };
   const isOptionEmpty = options.length === 0;
-  const buttonLabel = value ? ((_a = options.find(framework => framework.value === value)) === null || _a === void 0 ? void 0 : _a.label) || placeholder : placeholder;
+  const buttonLabel = value ? ((_options$find = options.find(framework => framework.value === value)) == null ? void 0 : _options$find.label) || placeholder : placeholder;
   const filteredOptions = options.filter(option => option.label.toLowerCase().includes(searchValue.toLowerCase()));
   const isFilteredOptionEmpty = filteredOptions.length === 0;
   const groupedOptions = filteredOptions.sort((a, b) => a.label.localeCompare(b.label, undefined, {
@@ -11004,18 +10998,19 @@ const VentionCombobox = props => {
     accumulator[groupKey].push(option);
     return accumulator;
   }, {});
+
   /* Make sure to render ungrouped items before grouped sections */
   const sortedGroupedOptions = Object.entries(groupedOptions).sort(([groupA], [groupB]) => {
     if (groupA === "ungrouped") return -1;
     if (groupB === "ungrouped") return 1;
     return groupA.localeCompare(groupB);
   });
-  const groupLabels = (_c = (_b = props.groups) === null || _b === void 0 ? void 0 : _b.reduce((accumulator, group) => {
+  const groupLabels = (_props$groups$reduce = (_props$groups = props.groups) == null ? void 0 : _props$groups.reduce((accumulator, group) => {
     accumulator[group.value] = group.label;
     return accumulator;
-  }, {})) !== null && _c !== void 0 ? _c : {};
-  return jsxs(Fragment, {
-    children: [jsx(VentionButton, {
+  }, {})) != null ? _props$groups$reduce : {};
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(VentionButton, {
       "data-testid": buttonDataTestId,
       ref: buttonRef,
       className: classes.button,
@@ -11024,23 +11019,23 @@ const VentionCombobox = props => {
       onClick: handleClick,
       labelText: buttonLabel,
       title: buttonLabel,
-      iconRight: jsxs("div", {
+      iconRight: /*#__PURE__*/jsxs("div", {
         className: classes.buttonEndItems,
-        children: [value && props.isClearable && jsx("div", {
+        children: [value && props.isClearable && /*#__PURE__*/jsx("div", {
           className: classes.clearButton,
           onClick: handleClear,
           "data-testid": clearButtonDataTestId,
-          children: jsx(VentionIcon, {
+          children: /*#__PURE__*/jsx(VentionIcon, {
             type: "close",
             size: 14
           })
-        }), jsx(VentionIcon, {
+        }), /*#__PURE__*/jsx(VentionIcon, {
           type: "chevron-down",
           size: 18
         })]
       }),
       size: "small"
-    }), jsx(Popover, {
+    }), /*#__PURE__*/jsx(Popover, {
       open: isOpen,
       anchorEl: anchorEl,
       onClose: handleClose,
@@ -11057,14 +11052,14 @@ const VentionCombobox = props => {
           className: classes.popoverSlot
         }
       },
-      children: jsxs("div", {
+      children: /*#__PURE__*/jsxs("div", {
         className: classes.menuContainer,
         style: {
           width: menuWidth
         },
-        children: [jsx("div", {
+        children: [/*#__PURE__*/jsx("div", {
           className: classes.inputContainer,
-          children: jsx(VentionTextInput, {
+          children: /*#__PURE__*/jsx(VentionTextInput, {
             autoFocus: autoFocus,
             "data-testid": inputDataTestId,
             size: "small",
@@ -11072,10 +11067,10 @@ const VentionCombobox = props => {
             placeholder: searchPlaceholder,
             onChange: event => setSearchValue(event.target.value),
             InputProps: {
-              startAdornment: jsx(InputAdornment, {
+              startAdornment: /*#__PURE__*/jsx(InputAdornment, {
                 position: "start",
                 className: classes.searchInputAdornment,
-                children: jsx(VentionIcon, {
+                children: /*#__PURE__*/jsx(VentionIcon, {
                   type: "search",
                   color: theme.palette.icon.primary,
                   size: 16
@@ -11083,37 +11078,37 @@ const VentionCombobox = props => {
               })
             }
           })
-        }), jsx("div", {
+        }), /*#__PURE__*/jsx("div", {
           className: classes.menuOptionsContainer,
-          children: isOptionEmpty ? jsx(MenuMessage, {
+          children: isOptionEmpty ? /*#__PURE__*/jsx(MenuMessage, {
             label: noOptionsMessage
-          }) : isFilteredOptionEmpty ? jsx(MenuMessage, {
+          }) : isFilteredOptionEmpty ? /*#__PURE__*/jsx(MenuMessage, {
             label: noItemsFoundMessage
-          }) : sortedGroupedOptions.map(([groupKey, groupOptions]) => jsxs(Fragment$1, {
-            children: [groupKey !== "ungrouped" && jsx("div", {
+          }) : sortedGroupedOptions.map(([groupKey, groupOptions]) => /*#__PURE__*/jsxs(Fragment$1, {
+            children: [groupKey !== "ungrouped" && /*#__PURE__*/jsx("div", {
               className: classes.menuOptionContainer,
-              children: jsx("div", {
+              children: /*#__PURE__*/jsx("div", {
                 className: classes.menuGroup,
-                children: jsx(Typography, {
+                children: /*#__PURE__*/jsx(Typography, {
                   variant: "uiText12Regular",
                   className: classes.menuGroupLabel,
                   title: groupLabels[groupKey],
                   children: groupLabels[groupKey]
                 })
               })
-            }, groupKey), groupOptions.map((option, index) => jsx("div", {
+            }, groupKey), groupOptions.map((option, index) => /*#__PURE__*/jsx("div", {
               className: classes.menuOptionContainer,
               "data-testid": `vention-combobox-option-${index}`,
-              children: jsxs("div", {
+              children: /*#__PURE__*/jsxs("div", {
                 className: classes.menuOption,
                 onClick: () => handleOptionClick(option.value),
                 "data-testid": option.dataTestId,
-                children: [jsx(Typography, {
+                children: [/*#__PURE__*/jsx(Typography, {
                   variant: "uiText12Medium",
                   className: classes.menuOptionLabel,
                   title: option.label,
                   children: option.label
-                }), option.value === value && jsx(VentionIcon, {
+                }), option.value === value && /*#__PURE__*/jsx(VentionIcon, {
                   type: "check",
                   size: 16,
                   color: theme.palette.icon.primary
@@ -11132,9 +11127,9 @@ const MenuMessage = ({
   const {
     classes
   } = useStyles$4();
-  return jsx("div", {
+  return /*#__PURE__*/jsx("div", {
     className: classes.menuMessageContainer,
-    children: jsx(Typography, {
+    children: /*#__PURE__*/jsx(Typography, {
       variant: "uiText12Regular",
       className: classes.menuMessageLabel,
       children: label
@@ -11247,24 +11242,25 @@ const useStyles$4 = tss.withParams().create(({
   };
 });
 
-const VentionTooltip = _a => {
-  var {
+const _excluded = ["children", "arrow", "placement", "classes"];
+const VentionTooltip = _ref => {
+  let {
       children,
       arrow = true,
       placement = "top-end",
       classes: classesOverrides
-    } = _a,
-    props = __rest(_a, ["children", "arrow", "placement", "classes"]);
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const {
     classes
   } = useStyles$3({
     classesOverrides
   });
-  return jsx(Tooltip, Object.assign({}, props, {
+  return /*#__PURE__*/jsx(Tooltip, Object.assign({}, props, {
     classes: classes,
     arrow: arrow,
     placement: placement,
-    children: jsx("span", {
+    children: /*#__PURE__*/jsx("span", {
       children: children
     })
   }));
@@ -11296,16 +11292,16 @@ const VentionCheckboxIcon = ({
     disabled,
     colors
   });
-  return jsx(Box$1, {
+  return /*#__PURE__*/jsx(Box$1, {
     className: classes.root,
-    children: checked && jsx(Box$1, {
+    children: checked && /*#__PURE__*/jsx(Box$1, {
       component: "svg",
       width: "100%",
       height: "100%",
       viewBox: "0 0 24 24",
       fill: "none",
       className: classes.checkmark,
-      children: jsx("path", {
+      children: /*#__PURE__*/jsx("path", {
         d: "M6 12l4 4 8-8",
         stroke: "currentColor",
         strokeWidth: "2.5",
@@ -11368,15 +11364,15 @@ const VentionCheckbox = checkboxProps => {
     if (!props.labelText && !props.helperText) {
       return null;
     }
-    return jsxs(Stack, {
+    return /*#__PURE__*/jsxs(Stack, {
       className: classes.textContainer,
-      children: [props.labelText && jsx(Typography, {
+      children: [props.labelText && /*#__PURE__*/jsx(Typography, {
         variant: typographyVariant,
         className: cx(classes.labelText, {
           "Mui-disabled": props.disabled
         }),
         children: props.labelText
-      }), props.labelText && props.helperText && jsx(Typography, {
+      }), props.labelText && props.helperText && /*#__PURE__*/jsx(Typography, {
         variant: typographyVariant,
         className: cx(classes.helperText, {
           "Mui-disabled": props.disabled
@@ -11385,11 +11381,11 @@ const VentionCheckbox = checkboxProps => {
       })]
     });
   };
-  return jsxs(Stack, {
+  return /*#__PURE__*/jsxs(Stack, {
     className: cx(classes.root, props.className),
-    children: [jsx(Box$1, {
+    children: [/*#__PURE__*/jsx(Box$1, {
       className: classes.checkboxContainer,
-      children: jsx(Checkbox, {
+      children: /*#__PURE__*/jsx(Checkbox, {
         className: classes.checkbox,
         disabled: props.disabled,
         checked: props.checked,
@@ -11398,13 +11394,13 @@ const VentionCheckbox = checkboxProps => {
         value: props.value,
         name: props.name,
         "data-testid": props["data-testid"],
-        icon: jsx(VentionCheckboxIcon, {
+        icon: /*#__PURE__*/jsx(VentionCheckboxIcon, {
           size: sizeStyle,
           checked: false,
           disabled: props.disabled,
           colors: getCheckboxColors(props.variant, props.disabled)
         }),
-        checkedIcon: jsx(VentionCheckboxIcon, {
+        checkedIcon: /*#__PURE__*/jsx(VentionCheckboxIcon, {
           size: sizeStyle,
           checked: true,
           disabled: props.disabled,
@@ -11540,6 +11536,7 @@ const getCheckboxColors = (variant, disabled) => {
     secondaryPressed: COLORS.blue[400],
     secondaryPressedBg: COLORS.slate[200]
   };
+
   // If disabled, return disabled colors regardless of variant
   if (disabled) {
     return {
@@ -11551,6 +11548,7 @@ const getCheckboxColors = (variant, disabled) => {
       disabledColor: baseColors.disabled
     };
   }
+
   // Future proofing for handling different variants
   switch (variant) {
     case "outlined":
@@ -11619,6 +11617,7 @@ const STYLE_CONFIG = {
     trashBackgroundColor: COLORS.slate[100]
   }
 };
+
 // Container styling
 const getContainerBackgroundColor = style => {
   return STYLE_CONFIG[style].backgroundColor;
@@ -11626,6 +11625,7 @@ const getContainerBackgroundColor = style => {
 const getContainerBorder = style => {
   return STYLE_CONFIG[style].border;
 };
+
 // Layout properties
 const getGap = size => {
   return SIZE_CONFIG[size].gap;
@@ -11642,6 +11642,7 @@ const getBorderRadius = (size, style) => {
   }
   return SIZE_CONFIG[size].borderRadius;
 };
+
 // Typography
 const getFontSize = size => {
   return SIZE_CONFIG[size].fontSize;
@@ -11649,6 +11650,7 @@ const getFontSize = size => {
 const getNameHeight = size => {
   return SIZE_CONFIG[size].nameHeight;
 };
+
 // Trash icon styling
 const getTrashBackgroundColor = style => {
   return STYLE_CONFIG[style].trashBackgroundColor;
@@ -11660,9 +11662,6 @@ const getActionIconSize = size => {
   return SIZE_CONFIG[size].trashIconSize;
 };
 
-/**
- * A component that displays an uploaded file with its upload status, file name, file size, and a remove button.
- */
 function VentionUploadFile({
   fileName,
   fileSize,
@@ -11681,71 +11680,71 @@ function VentionUploadFile({
     style,
     state
   });
-  return jsxs(Grid, {
+  return /*#__PURE__*/jsxs(Grid, {
     container: true,
     className: classes.container,
-    children: [jsx(Grid, {
+    children: [/*#__PURE__*/jsx(Grid, {
       item: true,
       xs: "auto",
       className: classes.spinnerContainer,
-      children: jsx(VentionSpinner, {
+      children: /*#__PURE__*/jsx(VentionSpinner, {
         type: state,
         size: size
       })
-    }), jsx(Grid, {
+    }), /*#__PURE__*/jsx(Grid, {
       item: true,
       xs: true,
-      children: jsxs(Stack, {
-        children: [jsx(Typography, {
+      children: /*#__PURE__*/jsxs(Stack, {
+        children: [/*#__PURE__*/jsx(Typography, {
           title: fileName,
           className: classes.nameContainer,
           "data-testid": "fileName",
           noWrap: true,
           children: fileName
-        }), size === "large" && jsx(Typography, {
+        }), size === "large" && /*#__PURE__*/jsx(Typography, {
           className: classes.sizeContainer,
           "data-testid": "fileSize",
           children: fileSize
-        }), state === "error" && errorMessage && jsx(Typography, {
+        }), state === "error" && errorMessage && /*#__PURE__*/jsx(Typography, {
           className: classes.errorMessage,
           "data-testid": "errorMessage",
           children: errorMessage
         })]
       })
-    }), state === "error" && jsx(Grid, {
+    }), state === "error" && /*#__PURE__*/jsx(Grid, {
       item: true,
       xs: "auto",
       "data-testid": "retryButtonContainer",
-      children: jsx(VentionIconButton, {
+      children: /*#__PURE__*/jsx(VentionIconButton, {
         onClick: onRetry,
         variant: "outline",
         size: size,
         className: classes.actionButton,
-        children: jsx(VentionIcon, {
+        children: /*#__PURE__*/jsx(VentionIcon, {
           type: "reload",
           size: getActionIconSize(size)
         })
       })
-    }), jsx(Grid, {
+    }), /*#__PURE__*/jsx(Grid, {
       item: true,
       xs: "auto",
-      children: state === "indeterminate" ? jsx(VentionIconButton, {
+      children: state === "indeterminate" ? /*#__PURE__*/jsx(VentionIconButton, {
         onClick: onCancel,
         variant: "outline",
         size: size,
         className: classes.actionButton,
         "data-testid": "cancelButton",
-        children: jsx(VentionIcon, {
+        children: /*#__PURE__*/jsx(VentionIcon, {
           type: "close",
           size: getActionIconSize(size)
         })
-      }) : jsx(VentionIconButton, {
+      }) : /*#__PURE__*/jsx(VentionIconButton, {
         onClick: onRemove,
         variant: "outline",
         size: size,
         className: classes.actionButton,
         "data-testid": "removeButton",
-        children: jsx(VentionIcon, {
+        children: /*#__PURE__*/jsx(VentionIcon, {
           type: "trash",
           size: getActionIconSize(size)
         })
@@ -11757,13 +11756,13 @@ const useStyle$1 = tss$1.withParams().create(({
   size,
   style
 }) => ({
-  container: Object.assign(Object.assign({
+  container: Object.assign({
     flexDirection: "row",
     gap: getGap(size),
     padding: getPadding(size, style),
     alignItems: "center",
     backgroundColor: getContainerBackgroundColor(style)
-  }, getContainerBorder(style)), {
+  }, getContainerBorder(style), {
     borderRadius: getBorderRadius(size, style),
     width: "100%"
   }),
@@ -11795,8 +11794,7 @@ const useStyle$1 = tss$1.withParams().create(({
   }
 }));
 
-var DropZoneState;
-(function (DropZoneState) {
+let DropZoneState = /*#__PURE__*/function (DropZoneState) {
   DropZoneState["Default"] = "Default";
   DropZoneState["Hover"] = "Hover";
   DropZoneState["Pressed"] = "Pressed";
@@ -11807,7 +11805,8 @@ var DropZoneState;
   DropZoneState["MouseLeave"] = "MouseLeave";
   DropZoneState["Drop"] = "Drop";
   DropZoneState["FileChange"] = "FileChange";
-})(DropZoneState || (DropZoneState = {}));
+  return DropZoneState;
+}({});
 const sizeProperties = {
   large: {
     minHeight: "72px",
@@ -11859,14 +11858,17 @@ function getDropZoneBorder(state, disabled, style) {
   const borderLineStyle = state === DropZoneState.DraggedOver ? "solid" : borderStyle;
   return `${borderWidth} ${borderLineStyle} ${borderColor}`;
 }
+
 // Accessor functions for size-specific properties
 function getDropZoneStyle(size, property) {
   return sizeProperties[size][property];
 }
+
 // Accessor functions for style-specific properties
 function getDropZoneBackgroundColor(style) {
   return styleProperties[style].backgroundColor;
 }
+
 /**
  * consolidates derivation of new drop zone status. should be re-used for testing purpose as well
  */
@@ -11893,6 +11895,7 @@ function getDropZoneStatus(type, hasErrorMessages) {
 }
 
 const UPLOAD_TITLE = "Drop to start uploading";
+
 /**
  * Vention's custom dropzone component. Supports drag and drop as well as
  * click to upload. Supports different sizes and styles along with a disabled state.
@@ -11984,7 +11987,7 @@ function VentionDropZone({
     });
     fileInputRef.current.click();
   };
-  return jsx(Box$1, {
+  return /*#__PURE__*/jsx(Box$1, {
     onMouseDown: handleMouseDown,
     onMouseUp: handleMouseUp,
     onMouseEnter: handleHover,
@@ -11999,41 +12002,41 @@ function VentionDropZone({
     onDrop: handleDrop,
     className: classes.dropZoneContainer,
     "data-testid": "dropzoneContainer",
-    children: jsxs(Grid, {
+    children: /*#__PURE__*/jsxs(Grid, {
       "data-testid": "dropzoneContents",
       container: true,
       className: classes.dropZoneContents,
-      children: [jsx(Grid, {
+      children: [/*#__PURE__*/jsx(Grid, {
         item: true,
         className: classes.dropZoneUploadIcon,
-        children: jsx(VentionIcon, {
+        children: /*#__PURE__*/jsx(VentionIcon, {
           dataTestId: "dropzoneUploadIcon",
           type: "circle-arrow-up",
           size: getDropZoneStyle(size, "iconSize")
         })
-      }), jsxs(Grid, {
+      }), /*#__PURE__*/jsxs(Grid, {
         item: true,
         className: classes.dropZoneTexts,
-        children: [jsx("div", {
+        children: [/*#__PURE__*/jsx("div", {
           "data-testid": "dropzoneTitle",
           className: classes.dropTitle,
           children: state.title
-        }), state.dropZoneStatus !== DropZoneState.DraggedOver && jsxs(Fragment, {
-          children: [jsx("div", {
+        }), state.dropZoneStatus !== DropZoneState.DraggedOver && /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx("div", {
             "data-testid": "dropzoneCriteria",
             className: classes.criteriaDescription,
             children: fileCriteriaDescription
-          }), jsx("div", {
+          }), /*#__PURE__*/jsx("div", {
             "data-testid": "dropzoneErrors",
             children: state.errorMessages.map(error => {
-              return jsxs("div", {
+              return /*#__PURE__*/jsxs("div", {
                 className: classes.errorMessage,
                 children: ["\u26A0 ", error]
               }, error);
             })
           })]
         })]
-      }), jsx("input", {
+      }), /*#__PURE__*/jsx("input", {
         onChange: handleFileInputChange,
         "data-testid": "dropzoneFileInput",
         disabled: disabled,
@@ -12052,7 +12055,7 @@ function dropZoneReducer(reducerState, {
   title
 }) {
   const errorMessages = errors || reducerState.errorMessages;
-  return Object.assign(Object.assign({}, reducerState), {
+  return Object.assign({}, reducerState, {
     errorMessages,
     title,
     dropZoneStatus: getDropZoneStatus(type, errorMessages.length > 0)
@@ -12125,7 +12128,7 @@ const VentionInputGroupLabel = ({
     classes,
     cx
   } = useStyles();
-  return jsx("div", {
+  return /*#__PURE__*/jsx("div", {
     className: cx(classes.root, variant === "shaded" && classes.variantShaded),
     children: children
   });
@@ -12151,6 +12154,12 @@ const useStyles = tss.create(({
 }));
 
 const POSITIONED_MENU_OFFSET = 3;
+
+/**
+ * Props for the positioned component.
+ * Either position or anchorRect must be defined, but not both.
+ */
+
 /**
  * Generic positioned component that can position any React component based on viewport constraints.
  * It can be positioned relative to an anchor element or a specified position.
@@ -12188,6 +12197,7 @@ function VentionPositionedComponent({
       top = calculatedPosition.top;
       left = calculatedPosition.left;
     }
+
     // Clamp to viewport
     const maxLeft = Math.max(0, window.innerWidth - width);
     const maxTop = Math.max(0, window.innerHeight - height);
@@ -12198,7 +12208,7 @@ function VentionPositionedComponent({
       left
     });
   }, [position, anchorRect, placement, alignment, children]);
-  return jsx("div", {
+  return /*#__PURE__*/jsx("div", {
     ref: ref,
     style: {
       position: "fixed",