@vention/machine-ui 3.45.0 → 3.47.0

package/index.esm.js

@@ -1797,7 +1797,7 @@ const defaultProps$8 = {
 const VentionSpinner = props => {
   const {
     classes
-  } = useStyles$H({
+  } = useStyles$I({
     size: props.size,
     colored: props.colored,
     type: props.type,
@@ -1847,7 +1847,7 @@ const VentionSpinner = props => {
     })]
   });
 };
-const useStyles$H = tss.withParams().create(({
+const useStyles$I = tss.withParams().create(({
   size,
   colored,
   color,
@@ -2597,7 +2597,7 @@ const VentionButton = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     classes,
     cx
-  } = useStyles$G({
+  } = useStyles$H({
     variant: variant,
     size: size,
     fullWidth: fullWidth
@@ -2623,7 +2623,7 @@ const VentionButton = /*#__PURE__*/forwardRef((props, ref) => {
     })
   }));
 });
-const useStyles$G = tss.withParams().create(({
+const useStyles$H = tss.withParams().create(({
   variant,
   size,
   fullWidth,
@@ -2731,7 +2731,7 @@ const VentionLink = inputProps => {
   const linkProps = applyDefaultProps(inputProps, defaultProps$7);
   const {
     classes
-  } = useStyles$F({
+  } = useStyles$G({
     underlined: linkProps.underlined,
     size: linkProps.size
   });
@@ -2748,7 +2748,7 @@ const VentionLink = inputProps => {
     }) : null]
   });
 };
-const useStyles$F = tss.withParams().create(({
+const useStyles$G = tss.withParams().create(({
   underlined,
   size,
   theme
@@ -2803,7 +2803,7 @@ function getGapSpaceForContent$1(isSingleLine, size) {
 const VentionAlertControls = alertControlProps => {
   const {
     classes
-  } = useStyles$E(alertControlProps);
+  } = useStyles$F(alertControlProps);
   return alertControlProps.display ? jsxs(Stack, {
     className: classes.alertControls,
     children: [alertControlProps.primaryButtonText ? jsx(VentionButton, {
@@ -2825,7 +2825,7 @@ const VentionAlertControls = alertControlProps => {
     }) : null]
   }) : null;
 };
-const useStyles$E = tss.withParams().create(({
+const useStyles$F = tss.withParams().create(({
   isSingleLine,
   size
 }) => {
@@ -2850,7 +2850,7 @@ const VentionAlert = inputProps => {
   const hasControlProps = !!(alertProps.linkText || alertProps.primaryButtonText || alertProps.secondaryButtonText);
   const {
     classes
-  } = useStyles$D(Object.assign(Object.assign({}, alertProps), {
+  } = useStyles$E(Object.assign(Object.assign({}, alertProps), {
     hasControlProps
   }));
   const [titleTypography, descriptionTypography] = getTypographyVariant$2(alertProps.size);
@@ -2939,7 +2939,7 @@ function getRootMaxWidth(isSingleLine, isFullWidth) {
   if (isSingleLine) return "inherit";
   return "560px";
 }
-const useStyles$D = tss.withParams().create(({
+const useStyles$E = tss.withParams().create(({
   isSingleLine,
   severity,
   size,
@@ -3132,7 +3132,7 @@ const VentionBadge = props => {
   const {
     classes,
     cx
-  } = useStyles$C({
+  } = useStyles$D({
     size: props.size,
     color: props.color,
     variant: props.variant
@@ -3150,7 +3150,7 @@ const VentionBadge = props => {
     })]
   });
 };
-const useStyles$C = tss.withParams().create(({
+const useStyles$D = tss.withParams().create(({
   size,
   color,
   variant,
@@ -3319,7 +3319,7 @@ const VentionIconButton = /*#__PURE__*/forwardRef((inputProps, ref) => {
   const {
     classes,
     cx
-  } = useStyles$B({
+  } = useStyles$C({
     variant: variant,
     size: size
   });
@@ -3334,7 +3334,7 @@ const VentionIconButton = /*#__PURE__*/forwardRef((inputProps, ref) => {
   }));
 });
 VentionIconButton.displayName = "VentionIconButton";
-const useStyles$B = tss.withParams().create(({
+const useStyles$C = tss.withParams().create(({
   variant,
   size,
   theme
@@ -3391,7 +3391,7 @@ const VentionDropdownButton = _a => {
   const {
     classes,
     cx
-  } = useStyles$A({
+  } = useStyles$B({
     variant,
     size,
     contentColor,
@@ -3454,7 +3454,7 @@ const VentionDropdownButton = _a => {
     })
   });
 };
-const useStyles$A = tss.withParams().create(({
+const useStyles$B = tss.withParams().create(({
   variant,
   size,
   contentColor,
@@ -3566,7 +3566,7 @@ const VentionCallout = inputProps => {
   const calloutProps = applyDefaultProps(inputProps, defaultProps$6);
   const {
     classes
-  } = useStyles$z({
+  } = useStyles$A({
     isSingleLine: calloutProps.isSingleLine,
     variant: calloutProps.variant,
     size: calloutProps.size
@@ -3688,7 +3688,7 @@ function getBottomMarginForDescription(isSingleLine, size) {
   }
   return "16px";
 }
-const useStyles$z = tss.withParams().create(({
+const useStyles$A = tss.withParams().create(({
   isSingleLine,
   variant,
   size,
@@ -3825,7 +3825,7 @@ if (NOT_GENERIC || INCORRECT_NAME) {
 const VentionCounter = props => {
   const {
     classes
-  } = useStyles$y({
+  } = useStyles$z({
     size: props.size,
     color: props.color,
     variant: props.variant
@@ -3848,7 +3848,7 @@ const getShownValue = props => {
   const displayCap = size === "small" ? 9 : 99;
   return value > displayCap ? `${displayCap}+` : value.toString();
 };
-const useStyles$y = tss.withParams().create(({
+const useStyles$z = tss.withParams().create(({
   size,
   color,
   variant,
@@ -3997,7 +3997,7 @@ const VentionModalBase = props => {
   const {
     classes,
     cx
-  } = useStyles$x({
+  } = useStyles$y({
     modalSize,
     isTouchDevice,
     width
@@ -4075,7 +4075,7 @@ const getModalStyle = (modalSize, width) => {
   };
   return modalStyles[modalSize];
 };
-const useStyles$x = tss.withParams().create(({
+const useStyles$y = tss.withParams().create(({
   modalSize,
   isTouchDevice,
   width,
@@ -4143,7 +4143,7 @@ const VentionModal = props => {
   } = props;
   const {
     classes
-  } = useStyles$w({
+  } = useStyles$x({
     modalSize,
     isTouchDevice,
     type,
@@ -4220,7 +4220,7 @@ const VentionModal = props => {
     })
   });
 };
-const useStyles$w = tss.withParams().create(({
+const useStyles$x = tss.withParams().create(({
   type,
   modalSize,
   isTouchDevice,
@@ -4361,7 +4361,7 @@ const VentionProgressBar = inputProps => {
   const isStatusState = props.state === "error" || props.state === "success";
   const {
     classes
-  } = useStyles$v({
+  } = useStyles$w({
     size: props.size,
     colored: props.colored,
     state: props.state
@@ -4399,7 +4399,7 @@ const VentionProgressBar = inputProps => {
     })]
   });
 };
-const useStyles$v = tss.withParams().create(({
+const useStyles$w = tss.withParams().create(({
   size,
   colored,
   state,
@@ -4933,7 +4933,7 @@ const VentionSteps = props => {
   const {
     classes,
     cx
-  } = useStyles$u(props);
+  } = useStyles$v(props);
   const typographyVariants = getTypographyVariants(props.size);
   let variant = props.variant;
   if (props.size === "small" && variant === "number") {
@@ -4986,7 +4986,7 @@ const VentionSteps = props => {
     })
   });
 };
-const useStyles$u = tss.withParams().withNestedSelectors().create(({
+const useStyles$v = tss.withParams().withNestedSelectors().create(({
   theme,
   size,
   classes
@@ -5175,7 +5175,7 @@ const VentionStatusDot = props => {
   const {
     classes,
     cx
-  } = useStyles$t({
+  } = useStyles$u({
     color: props.color,
     borderColor: props.borderColor,
     size
@@ -5187,7 +5187,7 @@ const VentionStatusDot = props => {
     })
   });
 };
-const useStyles$t = tss.withParams().create(({
+const useStyles$u = tss.withParams().create(({
   color,
   borderColor,
   size
@@ -5363,7 +5363,7 @@ const VentionTextInput = _a => {
     props = __rest(_a, ["state", "variant", "size", "rightItemText", "leftItemText"]);
   const {
     classes
-  } = useStyles$s({
+  } = useStyles$t({
     size,
     variant,
     state
@@ -5411,7 +5411,7 @@ const VentionTextInput = _a => {
     InputProps: inputProps
   }));
 };
-const useStyles$s = tss.withParams().create(({
+const useStyles$t = tss.withParams().create(({
   size,
   variant,
   state,
@@ -5611,7 +5611,7 @@ const VentionRadioIcon = props => {
   const {
     classes,
     cx
-  } = useStyles$r({
+  } = useStyles$s({
     radioSize: props.radioSize,
     variant: props.variant,
     checked: props.checked,
@@ -5629,7 +5629,7 @@ const VentionRadioIcon = props => {
     })
   });
 };
-const useStyles$r = tss.withParams().create(({
+const useStyles$s = tss.withParams().create(({
   radioSize,
   variant,
   checked,
@@ -5767,7 +5767,7 @@ const getColors = (variant, checked, theme) => {
 const VentionRadioTileControl = props => {
   const {
     classes
-  } = useStyles$q({
+  } = useStyles$r({
     radioLocation: props.radioLocation
   });
   return jsx("div", {
@@ -5784,7 +5784,7 @@ const VentionRadioTileControl = props => {
     })
   });
 };
-const useStyles$q = tss.withParams().create(({
+const useStyles$r = tss.withParams().create(({
   radioLocation
 }) => {
   return {
@@ -5804,7 +5804,7 @@ const useStyles$q = tss.withParams().create(({
 const VentionRadioTileLabel = props => {
   const {
     classes
-  } = useStyles$p({
+  } = useStyles$q({
     size: props.size,
     labelText: props.labelText
   });
@@ -5818,7 +5818,7 @@ const VentionRadioTileLabel = props => {
     })]
   });
 };
-const useStyles$p = tss.withParams().create(({
+const useStyles$q = tss.withParams().create(({
   theme,
   size,
   labelText
@@ -5863,7 +5863,7 @@ const VentionRadioTile = radioTileProps => {
   const props = applyDefaultProps(radioTileProps, defaultProps$3);
   const {
     classes
-  } = useStyles$o({
+  } = useStyles$p({
     variant: props.variant,
     checked: props.checked,
     state: props.state,
@@ -5892,7 +5892,7 @@ const VentionRadioTile = radioTileProps => {
     "data-testid": "RadioTileFormControlLabel"
   }));
 };
-const useStyles$o = tss.withParams().create(({
+const useStyles$p = tss.withParams().create(({
   variant,
   checked,
   state,
@@ -7741,7 +7741,7 @@ const IconSizes = {
 const VentionIcon = /*#__PURE__*/memo(props => {
   const {
     classes
-  } = useStyles$n({
+  } = useStyles$o({
     size: props.size || 24,
     color: props.color,
     hoverColor: props.hoverColor
@@ -7761,7 +7761,7 @@ const VentionIcon = /*#__PURE__*/memo(props => {
   });
 });
 VentionIcon.displayName = "VentionIcon";
-const useStyles$n = tss.withParams().create(({
+const useStyles$o = tss.withParams().create(({
   theme,
   size,
   color,
@@ -7805,7 +7805,7 @@ const getChevronIconSize = size => {
 const VentionSelect = props => {
   const {
     classes
-  } = useStyles$m(props);
+  } = useStyles$n(props);
   const {
       size,
       placeholder,
@@ -7925,7 +7925,7 @@ const VentionSelect = props => {
     })
   });
 };
-const useStyles$m = tss.withParams().create(({
+const useStyles$n = tss.withParams().create(({
   theme,
   size,
   isDisabled,
@@ -8094,7 +8094,7 @@ const VentionStepper = props => {
   } = props;
   const {
     classes
-  } = useStyles$l();
+  } = useStyles$m();
   return jsxs(ButtonGroup, {
     variant: "contained",
     "aria-label": "Basic button group",
@@ -8142,7 +8142,7 @@ const VentionStepper = props => {
     }))]
   });
 };
-const useStyles$l = tss.withNestedSelectors().create(({
+const useStyles$m = tss.withNestedSelectors().create(({
   theme,
   classes
 }) => {
@@ -8219,7 +8219,7 @@ const VentionTabs = ({
   const {
     cx,
     classes
-  } = useStyles$k();
+  } = useStyles$l();
   return jsx(Box$1, {
     className: classes.root,
     children: tabOptions.map((buttonLabel, index) => jsx(Button, {
@@ -8233,7 +8233,7 @@ const VentionTabs = ({
     }, index))
   });
 };
-const useStyles$k = tss.create(({
+const useStyles$l = tss.create(({
   theme
 }) => {
   return {
@@ -8268,7 +8268,7 @@ const useStyles$k = tss.create(({
 const VentionDraggable = props => {
   const {
     classes
-  } = useStyles$j(props);
+  } = useStyles$k(props);
   return jsx(Draggable, {
     handle: "#draggable-area",
     positionOffset: props.defaultPosition,
@@ -8294,7 +8294,7 @@ const VentionDraggable = props => {
     })
   });
 };
-const useStyles$j = tss.withParams().create(({
+const useStyles$k = tss.withParams().create(({
   tabLocation,
   height,
   width,
@@ -8390,7 +8390,7 @@ const VentionSlider = props => {
     other = __rest(props, ["value", "onChange", "largeThumb"]);
   const {
     classes
-  } = useStyles$i({
+  } = useStyles$j({
     largeThumb
   });
   return jsx("div", {
@@ -8402,7 +8402,7 @@ const VentionSlider = props => {
     }, other))
   });
 };
-const useStyles$i = tss.withParams().create(({
+const useStyles$j = tss.withParams().create(({
   theme,
   largeThumb
 }) => {
@@ -8493,7 +8493,7 @@ const VentionSwitch = props => {
   const {
     classes,
     theme
-  } = useStyles$h({
+  } = useStyles$i({
     checked,
     size,
     variant: (_a = props.variant) !== null && _a !== void 0 ? _a : "default",
@@ -8522,7 +8522,7 @@ const VentionSwitch = props => {
     })]
   });
 };
-const useStyles$h = tss.withParams().create(({
+const useStyles$i = tss.withParams().create(({
   theme,
   checked,
   size,
@@ -8676,7 +8676,7 @@ const ventionPopoverArrowSize = 10;
 const VentionPopover = props => {
   const {
     classes
-  } = useStyles$g();
+  } = useStyles$h();
   const popoverRef = useRef(null);
   const {
     title,
@@ -8843,7 +8843,7 @@ const getArrowStyles = arrowPos => {
     borderColor: getBorderColor()
   });
 };
-const useStyles$g = tss.create(({
+const useStyles$h = tss.create(({
   theme
 }) => {
   return {
@@ -9030,7 +9030,7 @@ const VentionMenuChildItem = /*#__PURE__*/forwardRef((props, ref) => {
   } = useContext(VentionMenuContext);
   const {
     classes
-  } = useStyles$f({
+  } = useStyles$g({
     size,
     focused
   });
@@ -9071,7 +9071,7 @@ const VentionMenuChildItem = /*#__PURE__*/forwardRef((props, ref) => {
     })]
   });
 });
-const useStyles$f = tss.withParams().create(({
+const useStyles$g = tss.withParams().create(({
   size,
   focused,
   theme
@@ -9131,7 +9131,7 @@ const VentionMenuParentItem = _a => {
   } = useContext(VentionMenuContext);
   const {
     classes
-  } = useStyles$e({
+  } = useStyles$f({
     size
   });
   const [open, setOpen] = useState(false);
@@ -9194,7 +9194,7 @@ const VentionMenuParentItem = _a => {
     })]
   });
 };
-const useStyles$e = tss.withParams().create(({
+const useStyles$f = tss.withParams().create(({
   size,
   theme
 }) => {
@@ -9229,7 +9229,7 @@ const VentionMenuList = ({
   } = useContext(VentionMenuContext);
   const {
     classes
-  } = useStyles$d({
+  } = useStyles$e({
     size,
     menuWidth,
     disableBoxShadow: _disableBoxShadow
@@ -9243,7 +9243,7 @@ const VentionMenuList = ({
     children: (_a = menuOptionsInfo === null || menuOptionsInfo === void 0 ? void 0 : menuOptionsInfo.map(renderMenuItem)) !== null && _a !== void 0 ? _a : children
   });
 };
-const useStyles$d = tss.withParams().create(({
+const useStyles$e = tss.withParams().create(({
   size,
   menuWidth,
   disableBoxShadow,
@@ -9276,7 +9276,7 @@ const VentionMenuHeader = props => {
   } = props;
   const {
     classes
-  } = useStyles$c({
+  } = useStyles$d({
     size
   });
   return jsx("div", {
@@ -9287,7 +9287,7 @@ const VentionMenuHeader = props => {
     })
   });
 };
-const useStyles$c = tss.withParams().create(({
+const useStyles$d = tss.withParams().create(({
   size
 }) => {
   const stylingProperties = getPaddingForMenuHeaderSize(size);
@@ -9303,7 +9303,7 @@ const VentionMenuDivider = ({
 }) => {
   const {
     classes
-  } = useStyles$b({
+  } = useStyles$c({
     size
   });
   return jsx("div", {
@@ -9315,7 +9315,7 @@ const VentionMenuDivider = ({
     })
   });
 };
-const useStyles$b = tss.withParams().create(({
+const useStyles$c = tss.withParams().create(({
   size
 }) => {
   const stylingProperties = getPaddingForMenuDividerSize(size);
@@ -9396,7 +9396,7 @@ const VentionCollapsibleCaretButton = ({
 }) => {
   const {
     classes
-  } = useStyles$a({
+  } = useStyles$b({
     isVisible,
     isExpanded
   });
@@ -9410,7 +9410,7 @@ const VentionCollapsibleCaretButton = ({
     })
   });
 };
-const useStyles$a = tss.withParams().create(({
+const useStyles$b = tss.withParams().create(({
   isVisible,
   isExpanded,
   theme
@@ -9476,7 +9476,7 @@ const VentionTreeItem = /*#__PURE__*/forwardRef((inputProps, ref) => {
   const {
     classes,
     cx
-  } = useStyles$9({
+  } = useStyles$a({
     classesOverrides,
     hasWarning: hasWarning,
     isSelected: isSelected,
@@ -9518,6 +9518,7 @@ const VentionTreeItem = /*#__PURE__*/forwardRef((inputProps, ref) => {
     ref: ref,
     children: [jsxs("div", {
       "data-testid": "mainContent",
+      "aria-selected": isSelected,
       className: classes.mainContent,
       onContextMenu: event => onContextMenu === null || onContextMenu === void 0 ? void 0 : onContextMenu(event),
       onMouseEnter: event => {
@@ -9623,7 +9624,7 @@ const VentionTreeItem = /*#__PURE__*/forwardRef((inputProps, ref) => {
     })]
   });
 });
-const useStyles$9 = tss.withParams().withNestedSelectors().create(({
+const useStyles$a = tss.withParams().withNestedSelectors().create(({
   hasWarning,
   isSelected,
   isExpanded,
@@ -9775,7 +9776,7 @@ const useStyles$9 = tss.withParams().withNestedSelectors().create(({
 const VentionDrawerWrapper = props => {
   const {
     classes
-  } = useStyles$8({
+  } = useStyles$9({
     onDrawerHandleClick: props.onDrawerHandleClick,
     anchor: props.anchor,
     open: props.open
@@ -9790,7 +9791,7 @@ const VentionDrawerWrapper = props => {
 const VentionDrawer = props => {
   const {
     classes
-  } = useStyles$8({
+  } = useStyles$9({
     onDrawerHandleClick: props.onDrawerHandleClick,
     width: props.width,
     anchor: props.anchor,
@@ -9826,7 +9827,7 @@ const VentionDrawer = props => {
 };
 const DrawerHandleHeight = 64;
 const DrawerHandleWidth = 24;
-const useStyles$8 = tss.withParams().create(({
+const useStyles$9 = tss.withParams().create(({
   onDrawerHandleClick,
   width,
   anchor,
@@ -9900,7 +9901,7 @@ const VentionStatusIndicator = inputProps => {
   const {
     classes,
     theme
-  } = useStyles$7({
+  } = useStyles$8({
     size: props.size,
     outline: props.outline,
     dotPosition: props.dotPosition
@@ -9922,7 +9923,7 @@ const VentionStatusIndicator = inputProps => {
     })]
   });
 };
-const useStyles$7 = tss.withParams().create(({
+const useStyles$8 = tss.withParams().create(({
   size,
   outline,
   dotPosition,
@@ -10080,7 +10081,7 @@ const VentionBanner = ({
 }) => {
   const {
     classes
-  } = useStyles$6({
+  } = useStyles$7({
     color,
     accent: _accent
   });
@@ -10169,7 +10170,7 @@ function useBannerColorStyles(color, accent, theme) {
     textColor
   };
 }
-const useStyles$6 = tss.withParams().create(({
+const useStyles$7 = tss.withParams().create(({
   theme,
   color,
   accent
@@ -10238,7 +10239,7 @@ const VentionModalBanner = ({
   const [isModalOpen, setIsModalOpen] = useState(false);
   const {
     classes
-  } = useStyles$5({
+  } = useStyles$6({
     color,
     accent: _accent,
     maxWidth: _maxWidth
@@ -10286,7 +10287,7 @@ const VentionModalBanner = ({
     })]
   });
 };
-const useStyles$5 = tss.withParams().create(({
+const useStyles$6 = tss.withParams().create(({
   theme,
   color,
   accent,
@@ -10337,7 +10338,7 @@ const useStyles$5 = tss.withParams().create(({
 const VentionSidebarItem = props => {
   const {
     classes
-  } = useStyles$4({
+  } = useStyles$5({
     state: props.state
   });
   const isDisabled = props.state === "disabled";
@@ -10370,7 +10371,7 @@ const VentionSidebarItem = props => {
     })
   });
 };
-const useStyles$4 = tss.withParams().create(({
+const useStyles$5 = tss.withParams().create(({
   theme,
   state
 }) => {
@@ -10947,7 +10948,7 @@ const VentionCombobox = props => {
   const {
     theme,
     classes
-  } = useStyles$3({
+  } = useStyles$4({
     isOpen
   });
   const handleClick = event => {
@@ -11113,7 +11114,7 @@ const MenuMessage = ({
 }) => {
   const {
     classes
-  } = useStyles$3();
+  } = useStyles$4();
   return jsx("div", {
     className: classes.menuMessageContainer,
     children: jsx(Typography, {
@@ -11123,7 +11124,7 @@ const MenuMessage = ({
     })
   });
 };
-const useStyles$3 = tss.withParams().create(({
+const useStyles$4 = tss.withParams().create(({
   theme,
   isOpen
 }) => {
@@ -11239,7 +11240,7 @@ const VentionTooltip = _a => {
     props = __rest(_a, ["children", "arrow", "placement", "classes"]);
   const {
     classes
-  } = useStyles$2({
+  } = useStyles$3({
     classesOverrides
   });
   return jsx(Tooltip, Object.assign({}, props, {
@@ -11251,7 +11252,7 @@ const VentionTooltip = _a => {
     })
   }));
 };
-const useStyles$2 = tss.create(({
+const useStyles$3 = tss.create(({
   theme
 }) => ({
   tooltip: Object.assign({
@@ -11272,7 +11273,7 @@ const VentionCheckboxIcon = ({
 }) => {
   const {
     classes
-  } = useStyles$1({
+  } = useStyles$2({
     size,
     checked,
     disabled,
@@ -11298,7 +11299,7 @@ const VentionCheckboxIcon = ({
     })
   });
 };
-const useStyles$1 = tss.withParams().create(({
+const useStyles$2 = tss.withParams().create(({
   size,
   checked,
   disabled,
@@ -11337,7 +11338,7 @@ const VentionCheckbox = checkboxProps => {
   const {
     classes,
     cx
-  } = useStyles({
+  } = useStyles$1({
     variant: props.variant,
     checkboxSize: props.checkboxSize,
     disabled: props.disabled,
@@ -11396,7 +11397,7 @@ const VentionCheckbox = checkboxProps => {
     }), renderLabel()]
   });
 };
-const useStyles = tss.withParams().create(({
+const useStyles$1 = tss.withParams().create(({
   variant,
   checkboxSize,
   disabled,
@@ -12098,6 +12099,40 @@ const useStyle = tss$1.withParams().create(({
   };
 });
 
+/** Label used for groups of inputs. */
+const VentionInputGroupLabel = ({
+  children,
+  variant
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  return jsx("div", {
+    className: cx(classes.root, variant === "shaded" && classes.variantShaded),
+    children: children
+  });
+};
+const useStyles = tss.create(({
+  theme
+}) => ({
+  root: Object.assign({
+    boxSizing: "border-box",
+    minWidth: theme.spacing(9),
+    height: theme.spacing(5),
+    display: "flex",
+    alignItems: "center",
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
+    color: theme.palette.text.primary
+  }, theme.typography.uiText12Regular),
+  variantShaded: {
+    borderRadius: 4,
+    border: `1px solid ${theme.palette.border.main}`,
+    backgroundColor: theme.palette.background.inputShaded
+  }
+}));
+
 const POSITIONED_MENU_OFFSET = 3;
 /**
  * Generic positioned component that can position any React component based on viewport constraints.
@@ -12205,4 +12240,4 @@ function calcMenuPosition(anchorRect, menuSize, placement, alignment) {
   }
 }
 
-export { COLORS, DEFAULT_VENTION_TREE_ITEM_HEIGHT, ElementTestIds, IconSizes, POSITIONED_MENU_OFFSET, VentionAlert, VentionBadge, VentionBanner, VentionButton, VentionCallout, VentionCheckbox, VentionCombobox, VentionCounter, VentionDraggable, VentionDrawer, VentionDropZone, VentionDropdownButton, VentionIcon, VentionIconButton, VentionLink, VentionMenu, VentionModal, VentionModalBanner, VentionModalBase, VentionPopover, VentionPositionedComponent, VentionProgressBar, VentionRadio, VentionRadioTile, VentionSelect, VentionSidebarItem, VentionSlider, VentionSpinner, VentionStatusDot, VentionStatusIndicator, VentionStepper, VentionSteps, VentionSwitch, VentionTabs, VentionTextInput, VentionTooltip, VentionTreeItem, VentionUploadFile, calcMenuPosition, getSpinnerColor, getVentionBadgeColors, machineUiHmiTheme, machineUiTheme, menuTestIds, testIds, useBannerColorStyles, ventionModalBaseTestIds, ventionModalTestIds, ventionPopoverArrowSize };
+export { COLORS, DEFAULT_VENTION_TREE_ITEM_HEIGHT, ElementTestIds, IconSizes, POSITIONED_MENU_OFFSET, VentionAlert, VentionBadge, VentionBanner, VentionButton, VentionCallout, VentionCheckbox, VentionCombobox, VentionCounter, VentionDraggable, VentionDrawer, VentionDropZone, VentionDropdownButton, VentionIcon, VentionIconButton, VentionInputGroupLabel, VentionLink, VentionMenu, VentionModal, VentionModalBanner, VentionModalBase, VentionPopover, VentionPositionedComponent, VentionProgressBar, VentionRadio, VentionRadioTile, VentionSelect, VentionSidebarItem, VentionSlider, VentionSpinner, VentionStatusDot, VentionStatusIndicator, VentionStepper, VentionSteps, VentionSwitch, VentionTabs, VentionTextInput, VentionTooltip, VentionTreeItem, VentionUploadFile, calcMenuPosition, getSpinnerColor, getVentionBadgeColors, machineUiHmiTheme, machineUiTheme, menuTestIds, testIds, useBannerColorStyles, ventionModalBaseTestIds, ventionModalTestIds, ventionPopoverArrowSize };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vention/machine-ui",
-  "version": "3.45.0",
+  "version": "3.47.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/VentionCo/machine-cloud.git"

package/src/index.d.ts

@@ -36,6 +36,7 @@ export * from "./lib/components/vention-tooltip/vention-tooltip";
 export * from "./lib/components/vention-checkbox/vention-checkbox";
 export * from "./lib/components/vention-uploadfile/vention-uploadfile";
 export * from "./lib/components/vention-dropzone/vention-dropzone";
+export * from "./lib/components/vention-input-group-label/vention-input-group-label";
 export * from "./lib/components/shared/vention-positioned-component";
 export * from "./lib/theme/machine-ui-theme";
 export * from "./lib/theme/colors";