@vention/machine-ui 5.26.4 → 5.28.0

package/index.esm.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { Typography, useTheme, Button, Stack, Box as Box$1, Grid, IconButton, ClickAwayListener, Modal, CircularProgress as CircularProgress$1, linearProgressClasses, LinearProgress, InputAdornment, TextField, MenuList, MenuItem, ListItemIcon, ListItemText, Popover, Popper, Radio, FormControlLabel, FormControl, Select, FormHelperText, ButtonGroup, Paper, Card, CardMedia, CardContent, Drawer, Autocomplete, Tooltip, Checkbox } from '@mui/material';
+import { Typography, useTheme, Button, Stack, Box as Box$1, Grid, IconButton, ClickAwayListener, Modal, CircularProgress as CircularProgress$1, linearProgressClasses, LinearProgress, Skeleton, InputAdornment, TextField, MenuList, MenuItem, ListItemIcon, ListItemText, Popover, Popper, Radio, FormControlLabel, FormControl, Select, FormHelperText, ButtonGroup, Paper, Card, CardMedia, CardContent, Drawer, Autocomplete, 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 { lazy, memo, Suspense, forwardRef, useState, cloneElement, useRef, useEffect, useCallback, createContext, useContext, useImperativeHandle, useMemo, Children, Fragment as Fragment$1, useReducer, useLayoutEffect } from 'react';
 import { tss } from 'tss-react/mui';
@@ -1991,7 +1991,7 @@ const defaultProps$8 = {
 const VentionSpinner = props => {
   const {
     classes
-  } = useStyles$O({
+  } = useStyles$P({
     size: props.size,
     colored: props.colored,
     type: props.type,
@@ -2041,7 +2041,7 @@ const VentionSpinner = props => {
     })]
   });
 };
-const useStyles$O = tss.withParams().create(({
+const useStyles$P = tss.withParams().create(({
   size,
   colored,
   color,
@@ -3798,7 +3798,7 @@ function isVentionIconType(value) {
 const VentionIcon = /*#__PURE__*/memo(props => {
   const {
     classes
-  } = useStyles$N({
+  } = useStyles$O({
     size: props.size || 24,
     color: props.color,
     hoverColor: props.hoverColor
@@ -3818,7 +3818,7 @@ const VentionIcon = /*#__PURE__*/memo(props => {
   });
 });
 VentionIcon.displayName = "VentionIcon";
-const useStyles$N = tss.withParams().create(({
+const useStyles$O = tss.withParams().create(({
   theme,
   size,
   color,
@@ -4501,7 +4501,7 @@ const VentionButton = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     classes,
     cx
-  } = useStyles$M({
+  } = useStyles$N({
     variant: variant,
     size: size,
     fullWidth: fullWidth
@@ -4528,7 +4528,7 @@ const VentionButton = /*#__PURE__*/forwardRef((props, ref) => {
     })
   }));
 });
-const useStyles$M = tss.withParams().create(({
+const useStyles$N = tss.withParams().create(({
   variant,
   size,
   fullWidth,
@@ -4646,7 +4646,7 @@ const VentionLink = inputProps => {
   const linkProps = applyDefaultProps(inputProps, defaultProps$7);
   const {
     classes
-  } = useStyles$L({
+  } = useStyles$M({
     underlined: linkProps.underlined,
     size: linkProps.size
   });
@@ -4663,7 +4663,7 @@ const VentionLink = inputProps => {
     }) : null]
   });
 };
-const useStyles$L = tss.withParams().create(({
+const useStyles$M = tss.withParams().create(({
   underlined,
   size,
   theme
@@ -4718,7 +4718,7 @@ function getGapSpaceForContent$1(isSingleLine, size) {
 const VentionAlertControls = alertControlProps => {
   const {
     classes
-  } = useStyles$K(alertControlProps);
+  } = useStyles$L(alertControlProps);
   return alertControlProps.display ? jsxs(Stack, {
     className: classes.alertControls,
     children: [alertControlProps.primaryButtonText ? jsx(VentionButton, {
@@ -4740,7 +4740,7 @@ const VentionAlertControls = alertControlProps => {
     }) : null]
   }) : null;
 };
-const useStyles$K = tss.withParams().create(({
+const useStyles$L = tss.withParams().create(({
   isSingleLine,
   size
 }) => {
@@ -4765,7 +4765,7 @@ const VentionAlert = inputProps => {
   const hasControlProps = !!(alertProps.linkText || alertProps.primaryButtonText || alertProps.secondaryButtonText);
   const {
     classes
-  } = useStyles$J(Object.assign(Object.assign({}, alertProps), {
+  } = useStyles$K(Object.assign(Object.assign({}, alertProps), {
     hasControlProps
   }));
   const [titleTypography, descriptionTypography] = getTypographyVariant$2(alertProps.size);
@@ -4854,7 +4854,7 @@ function getRootMaxWidth(isSingleLine, isFullWidth) {
   if (isSingleLine) return "inherit";
   return "560px";
 }
-const useStyles$J = tss.withParams().create(({
+const useStyles$K = tss.withParams().create(({
   isSingleLine,
   severity,
   size,
@@ -5935,7 +5935,7 @@ function VentionAvatar({
   const {
     classes,
     cx
-  } = useStyles$I({
+  } = useStyles$J({
     size,
     variant,
     color,
@@ -5961,7 +5961,7 @@ function VentionAvatar({
     })]
   });
 }
-const useStyles$I = tss.withParams().create(({
+const useStyles$J = tss.withParams().create(({
   size,
   variant,
   color,
@@ -6074,7 +6074,7 @@ const VentionBadge = props => {
   const {
     classes,
     cx
-  } = useStyles$H({
+  } = useStyles$I({
     size: props.size,
     color: props.color,
     variant: props.variant
@@ -6092,7 +6092,7 @@ const VentionBadge = props => {
     })]
   });
 };
-const useStyles$H = tss.withParams().create(({
+const useStyles$I = tss.withParams().create(({
   size,
   color,
   variant,
@@ -6261,7 +6261,7 @@ const VentionIconButton = /*#__PURE__*/forwardRef((inputProps, ref) => {
   const {
     classes,
     cx
-  } = useStyles$G({
+  } = useStyles$H({
     variant: variant,
     size: size
   });
@@ -6276,7 +6276,7 @@ const VentionIconButton = /*#__PURE__*/forwardRef((inputProps, ref) => {
   }));
 });
 VentionIconButton.displayName = "VentionIconButton";
-const useStyles$G = tss.withParams().create(({
+const useStyles$H = tss.withParams().create(({
   variant,
   size,
   theme
@@ -6333,7 +6333,7 @@ const VentionDropdownButton = _a => {
   const {
     classes,
     cx
-  } = useStyles$F({
+  } = useStyles$G({
     variant,
     size,
     contentColor,
@@ -6396,7 +6396,7 @@ const VentionDropdownButton = _a => {
     })
   });
 };
-const useStyles$F = tss.withParams().create(({
+const useStyles$G = tss.withParams().create(({
   variant,
   size,
   contentColor,
@@ -6508,7 +6508,7 @@ const VentionCallout = inputProps => {
   const calloutProps = applyDefaultProps(inputProps, defaultProps$6);
   const {
     classes
-  } = useStyles$E({
+  } = useStyles$F({
     isSingleLine: calloutProps.isSingleLine,
     variant: calloutProps.variant,
     size: calloutProps.size
@@ -6630,7 +6630,7 @@ function getBottomMarginForDescription(isSingleLine, size) {
   }
   return "16px";
 }
-const useStyles$E = tss.withParams().create(({
+const useStyles$F = tss.withParams().create(({
   isSingleLine,
   variant,
   size,
@@ -6688,7 +6688,7 @@ if (NOT_GENERIC || INCORRECT_NAME) {
 const VentionCounter = props => {
   const {
     classes
-  } = useStyles$D({
+  } = useStyles$E({
     size: props.size,
     color: props.color,
     variant: props.variant
@@ -6711,7 +6711,7 @@ const getShownValue = props => {
   const displayCap = size === "small" ? 9 : 99;
   return value > displayCap ? `${displayCap}+` : value.toString();
 };
-const useStyles$D = tss.withParams().create(({
+const useStyles$E = tss.withParams().create(({
   size,
   color,
   variant,
@@ -6861,7 +6861,7 @@ const VentionModalBase = props => {
   const {
     classes,
     cx
-  } = useStyles$C({
+  } = useStyles$D({
     modalSize,
     isTouchDevice,
     width
@@ -6939,7 +6939,7 @@ const getModalStyle = (modalSize, width) => {
   };
   return modalStyles[modalSize];
 };
-const useStyles$C = tss.withParams().create(({
+const useStyles$D = tss.withParams().create(({
   modalSize,
   isTouchDevice,
   width,
@@ -7008,7 +7008,7 @@ const VentionModal = props => {
   } = props;
   const {
     classes
-  } = useStyles$B({
+  } = useStyles$C({
     modalSize,
     isTouchDevice,
     type,
@@ -7086,7 +7086,7 @@ const VentionModal = props => {
     })
   });
 };
-const useStyles$B = tss.withParams().create(({
+const useStyles$C = tss.withParams().create(({
   type,
   modalSize,
   isTouchDevice,
@@ -7228,7 +7228,7 @@ const VentionProgressBar = inputProps => {
   const isStatusState = props.state === "error" || props.state === "success";
   const {
     classes
-  } = useStyles$A({
+  } = useStyles$B({
     size: props.size,
     colored: props.colored,
     state: props.state
@@ -7266,7 +7266,7 @@ const VentionProgressBar = inputProps => {
     })]
   });
 };
-const useStyles$A = tss.withParams().create(({
+const useStyles$B = tss.withParams().create(({
   size,
   colored,
   state,
@@ -7331,6 +7331,54 @@ const PROGRESS_BAR_SIZES = {
 };
 VentionProgressBar.defaultProps = defaultProps$5;
 
+function VentionSkeleton(props) {
+  var _a;
+  const {
+    classes,
+    cx
+  } = useStyles$A({
+    typography: props.variant === "text" ? props.typography : undefined
+  });
+  const className = cx(classes.root, props.className);
+  const testId = (_a = props["data-testid"]) !== null && _a !== void 0 ? _a : "vention-skeleton";
+  if (props.variant === "text") {
+    return jsx(Skeleton, {
+      variant: "text",
+      animation: "wave",
+      width: props.width,
+      className: className,
+      "data-testid": testId
+    });
+  }
+  if (props.variant === "circular") {
+    return jsx(Skeleton, {
+      variant: "circular",
+      animation: "wave",
+      width: props.diameter,
+      height: props.diameter,
+      className: className,
+      "data-testid": testId
+    });
+  }
+  return jsx(Skeleton, {
+    variant: "rounded",
+    animation: "wave",
+    width: props.width,
+    height: props.height,
+    className: className,
+    "data-testid": testId
+  });
+}
+const useStyles$A = tss.withParams().create(({
+  theme,
+  typography
+}) => ({
+  root: Object.assign({
+    backgroundColor: theme.palette.background.surface3,
+    flexShrink: 0
+  }, typography === undefined ? {} : theme.typography[typography])
+}));
+
 var $$m = _export;
 var DESCRIPTORS$2 = descriptors;
 var globalThis$3 = globalThis_1;
@@ -8816,6 +8864,7 @@ function getPaddingForMenuHeaderSize(size) {
 }
 function getPaddingForMenuDividerSize(size) {
   const padding = {
+    "x-small": "0px 12px 0px 12px",
     small: "8px 12px 7px 12px",
     medium: "12px 12px 11px 12px",
     large: "16px 12px 15px 12px"
@@ -10232,7 +10281,7 @@ const MenuItemDivider = ({
   role: "separator",
   className: className
 });
-const VentionSelect = props => {
+const VentionSelectRoot = props => {
   var _a;
   const {
     classes
@@ -10382,6 +10431,43 @@ const VentionSelect = props => {
     })
   });
 };
+const VentionSelectSkeleton = ({
+  size,
+  hasLabelText,
+  hasHelperText,
+  className,
+  "data-testid": testId = "vention-select-skeleton"
+}) => {
+  const theme = useTheme$1();
+  const typographyVariants = typographyNameFromSizeMap[size];
+  return jsxs(Box$1, {
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(1),
+    width: "100%",
+    className: className,
+    "aria-busy": true,
+    "data-testid": testId,
+    children: [hasLabelText && jsx(VentionSkeleton, {
+      variant: "text",
+      typography: typographyVariants.label,
+      width: "30%"
+    }), jsx(VentionSkeleton, {
+      variant: "rounded",
+      width: "100%",
+      height: getInputHeight(size, theme)
+    }), hasHelperText && jsx(VentionSkeleton, {
+      variant: "text",
+      typography: typographyVariants.helperText,
+      width: "40%"
+    })]
+  });
+};
+VentionSelectRoot.displayName = "VentionSelect";
+VentionSelectSkeleton.displayName = "VentionSelect.Skeleton";
+const VentionSelect = Object.assign(VentionSelectRoot, {
+  Skeleton: VentionSelectSkeleton
+});
 const useStyles$n = tss.withParams().create(({
   theme,
   size,
@@ -15037,7 +15123,7 @@ const useStyles$1 = tss.create(({
   }
 }));
 
-function VentionPersonCard({
+function VentionPersonCardRoot({
   name,
   size,
   description,
@@ -15050,46 +15136,106 @@ function VentionPersonCard({
 }) {
   const isDisabled = state === "disabled";
   const {
-    classes,
-    cx
+    classes
   } = useStyles({
     size,
     hideName: hideName !== null && hideName !== void 0 ? hideName : false
   });
-  const rootClassName = cx(classes.root, className);
-  const avatar = jsx(VentionAvatar, {
-    name: name,
+  return jsx(VentionPersonCardLayout, {
     size: size,
-    variant: avatarVariant,
-    state: state,
-    imageUrl: imageUrl,
-    initials: initials
+    hideName: hideName !== null && hideName !== void 0 ? hideName : false,
+    className: className,
+    testId: "vention-person-card",
+    avatar: jsx(VentionAvatar, {
+      name: name,
+      size: size,
+      variant: avatarVariant,
+      state: state,
+      imageUrl: imageUrl,
+      initials: initials
+    }),
+    name: jsx(Typography, {
+      variant: getNameTypographyVariant(size),
+      color: isDisabled ? "text.tertiary" : "text.primary",
+      className: classes.line,
+      children: name
+    }),
+    description: description && jsx(Typography, {
+      variant: "uiText12Regular",
+      color: isDisabled ? "text.tertiary" : "text.secondary",
+      className: classes.line,
+      children: description
+    })
+  });
+}
+function VentionPersonCardSkeleton({
+  size,
+  hasDescription,
+  hideName,
+  className
+}) {
+  return jsx(VentionPersonCardLayout, {
+    size: size,
+    hideName: hideName !== null && hideName !== void 0 ? hideName : false,
+    className: className,
+    testId: "vention-person-card-skeleton",
+    busy: true,
+    avatar: jsx(VentionSkeleton, {
+      variant: "circular",
+      diameter: getAvatarDiameter(size)
+    }),
+    name: jsx(VentionSkeleton, {
+      variant: "text",
+      typography: getNameTypographyVariant(size),
+      width: "60%"
+    }),
+    description: hasDescription && jsx(VentionSkeleton, {
+      variant: "text",
+      typography: "uiText12Regular",
+      width: "40%"
+    })
   });
+}
+VentionPersonCardRoot.displayName = "VentionPersonCard";
+VentionPersonCardSkeleton.displayName = "VentionPersonCard.Skeleton";
+const VentionPersonCard = Object.assign(VentionPersonCardRoot, {
+  Skeleton: VentionPersonCardSkeleton
+});
+function VentionPersonCardLayout({
+  size,
+  hideName,
+  className,
+  testId,
+  busy,
+  avatar,
+  name,
+  description
+}) {
+  const {
+    classes,
+    cx
+  } = useStyles({
+    size,
+    hideName
+  });
+  const rootClassName = cx(classes.root, className);
   if (hideName) {
     return jsx("div", {
       className: rootClassName,
-      "data-testid": "vention-person-card",
+      "aria-busy": busy,
+      "data-testid": testId,
       children: avatar
     });
   }
   return jsx("div", {
     className: rootClassName,
-    "data-testid": "vention-person-card",
+    "aria-busy": busy,
+    "data-testid": testId,
     children: jsxs("div", {
       className: classes.content,
       children: [avatar, jsxs("div", {
         className: classes.titleAndDescription,
-        children: [jsx(Typography, {
-          variant: getNameTypographyVariant(size),
-          color: isDisabled ? "text.tertiary" : "text.primary",
-          className: classes.line,
-          children: name
-        }), description && jsx(Typography, {
-          variant: "uiText12Regular",
-          color: isDisabled ? "text.tertiary" : "text.secondary",
-          className: classes.line,
-          children: description
-        })]
+        children: [name, description]
       })]
     })
   });
@@ -15266,4 +15412,4 @@ function calcMenuPosition(anchorRect, menuSize, placement, alignment) {
   }
 }
 
-export { COLORS, DEFAULT_MAX_VISIBLE_SUGGESTIONS, DEFAULT_MIN_SUGGESTION_CHARACTERS, DEFAULT_VENTION_TREE_ITEM_HEIGHT, ElementTestIds, IconSizes, POSITIONED_MENU_OFFSET, VentionAlert, VentionAvatar, VentionBadge, VentionBanner, VentionButton, VentionCallout, VentionCheckbox, VentionCombobox, VentionCounter, VentionDraggable, VentionDrawer, VentionDropZone, VentionDropdownButton, VentionIcon, VentionIconButton, VentionInputGroupLabel, VentionLink, VentionMenu, VentionModal, VentionModalBanner, VentionModalBase, VentionPersonCard, VentionPopover, VentionPositionedComponent, VentionProgressBar, VentionRadio, VentionRadioTile, VentionSelect, VentionSidebarItem, VentionSlider, VentionSpinner, VentionStatusDot, VentionStatusIndicator, VentionStepper, VentionSteps, VentionSuggestionsInput, VentionSwitch, VentionTabs, VentionTagsInput, VentionTextInput, VentionTooltip, VentionTreeItem, VentionUploadFile, calcMenuPosition, getSpinnerColor, getVentionBadgeColors, isVentionIconType, machineUiHmiTheme, machineUiTheme, menuTestIds, testIds, useBannerColorStyles, ventionModalBaseTestIds, ventionModalTestIds, ventionPopoverArrowSize };
+export { COLORS, DEFAULT_MAX_VISIBLE_SUGGESTIONS, DEFAULT_MIN_SUGGESTION_CHARACTERS, DEFAULT_VENTION_TREE_ITEM_HEIGHT, ElementTestIds, IconSizes, POSITIONED_MENU_OFFSET, VentionAlert, VentionAvatar, VentionBadge, VentionBanner, VentionButton, VentionCallout, VentionCheckbox, VentionCombobox, VentionCounter, VentionDraggable, VentionDrawer, VentionDropZone, VentionDropdownButton, VentionIcon, VentionIconButton, VentionInputGroupLabel, VentionLink, VentionMenu, VentionModal, VentionModalBanner, VentionModalBase, VentionPersonCard, VentionPersonCardSkeleton, VentionPopover, VentionPositionedComponent, VentionProgressBar, VentionRadio, VentionRadioTile, VentionSelect, VentionSelectSkeleton, VentionSidebarItem, VentionSkeleton, VentionSlider, VentionSpinner, VentionStatusDot, VentionStatusIndicator, VentionStepper, VentionSteps, VentionSuggestionsInput, VentionSwitch, VentionTabs, VentionTagsInput, VentionTextInput, VentionTooltip, VentionTreeItem, VentionUploadFile, calcMenuPosition, getAvatarDiameter, getSpinnerColor, getVentionBadgeColors, isVentionIconType, machineUiHmiTheme, machineUiTheme, menuTestIds, testIds, useBannerColorStyles, ventionModalBaseTestIds, ventionModalTestIds, ventionPopoverArrowSize };

package/package.json

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

package/src/index.d.ts

@@ -12,6 +12,7 @@ export * from "./lib/components/vention-modal/vention-modal";
 export * from "./lib/components/vention-modal-base/vention-modal-base";
 export * from "./lib/components/vention-progress-bar/vention-progress-bar";
 export * from "./lib/components/vention-spinner/vention-spinner";
+export * from "./lib/components/vention-skeleton/vention-skeleton";
 export * from "./lib/components/vention-steps/vention-steps";
 export * from "./lib/components/vention-status-dot/vention-status-dot";
 export * from "./lib/components/vention-text-input/vention-text-input";

package/src/lib/components/vention-avatar/vention-avatar.d.ts

@@ -15,3 +15,4 @@ export interface VentionAvatarProps {
     className?: string;
 }
 export declare function VentionAvatar({ initials, name, size, variant, color, state, className, imageUrl, focused, }: VentionAvatarProps): import("react/jsx-runtime").JSX.Element;
+export declare function getAvatarDiameter(size: VentionAvatarSizes): number;

package/src/lib/components/vention-menu/vention-menu-item/vention-menu-divider.d.ts

@@ -1,4 +1,4 @@
 export interface VentionMenuHeaderProps {
-    size: "small" | "medium" | "large";
+    size: "x-small" | "small" | "medium" | "large";
 }
 export declare const VentionMenuDivider: ({ size }: VentionMenuHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/vention-menu/vention-menu-styling-helpers.d.ts

@@ -2,7 +2,7 @@ import { Theme } from "@mui/material";
 import { Sizes, StrictExtract } from "../../theme/machine-ui-theme";
 export type MenuSize = StrictExtract<Sizes, "small" | "medium" | "large" | "x-large">;
 export type MenuHeaderSize = StrictExtract<Sizes, "small" | "medium" | "large">;
-export type MenuDividerSize = StrictExtract<Sizes, "small" | "medium" | "large">;
+export type MenuDividerSize = StrictExtract<Sizes, "x-small" | "small" | "medium" | "large">;
 export interface StylingProperties {
     borderRadius: string;
     gap: string;

package/src/lib/components/vention-person-card/vention-person-card.d.ts

@@ -13,4 +13,21 @@ export interface VentionPersonCardProps {
     initials?: string;
     className?: string;
 }
-export declare function VentionPersonCard({ name, size, description, state, hideName, avatarVariant, imageUrl, initials, className, }: VentionPersonCardProps): import("react/jsx-runtime").JSX.Element;
+declare function VentionPersonCardRoot({ name, size, description, state, hideName, avatarVariant, imageUrl, initials, className, }: VentionPersonCardProps): import("react/jsx-runtime").JSX.Element;
+declare namespace VentionPersonCardRoot {
+    var displayName: string;
+}
+export interface VentionPersonCardSkeletonProps {
+    size: VentionPersonCardSizes;
+    hasDescription?: boolean;
+    hideName?: boolean;
+    className?: string;
+}
+export declare function VentionPersonCardSkeleton({ size, hasDescription, hideName, className }: VentionPersonCardSkeletonProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace VentionPersonCardSkeleton {
+    var displayName: string;
+}
+export declare const VentionPersonCard: typeof VentionPersonCardRoot & {
+    Skeleton: typeof VentionPersonCardSkeleton;
+};
+export {};

package/src/lib/components/vention-select/vention-select.d.ts

@@ -2,6 +2,7 @@ import { SelectChangeEvent, SelectProps } from "@mui/material";
 import { Sizes, StrictExtract } from "../../theme/machine-ui-theme";
 import { ReactNode } from "react";
 import { InputStates } from "../shared/types/input-types";
+import { TestProps } from "../shared/types/test-props";
 import { DuotoneIconType, IconType } from "../vention-icon/vention-icon";
 export type VentionSelectMenuItem<T> = {
     type?: never;
@@ -16,7 +17,7 @@ export type VentionSelectDivider = {
     type: "divider";
 };
 export type VentionSelectItem<T> = VentionSelectMenuItem<T> | VentionSelectDivider;
-export interface VentionSelectProps extends Omit<SelectProps, "placeholder" | "size" | "defaultValue" | "label"> {
+export interface VentionSelectProps extends Omit<SelectProps, "placeholder" | "size" | "defaultValue" | "label">, TestProps {
     size: StrictExtract<Sizes, "small" | "medium" | "large" | "x-large" | "xx-large">;
     variant: "outlined";
     value: string | number | string[] | number[] | undefined;
@@ -30,4 +31,22 @@ export interface VentionSelectProps extends Omit<SelectProps, "placeholder" | "s
     isMultiple?: boolean;
     state?: StrictExtract<InputStates, "default" | "warning">;
 }
-export declare const VentionSelect: (props: VentionSelectProps) => import("react/jsx-runtime").JSX.Element;
+export interface VentionSelectSkeletonProps extends TestProps {
+    size: VentionSelectProps["size"];
+    hasLabelText?: boolean;
+    hasHelperText?: boolean;
+    className?: string;
+}
+export declare const VentionSelectSkeleton: {
+    ({ size, hasLabelText, hasHelperText, className, "data-testid": testId, }: VentionSelectSkeletonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export declare const VentionSelect: {
+    (props: VentionSelectProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    Skeleton: {
+        ({ size, hasLabelText, hasHelperText, className, "data-testid": testId, }: VentionSelectSkeletonProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};

package/src/lib/components/vention-skeleton/vention-skeleton.d.ts

@@ -0,0 +1,19 @@
+import { TypographyOwnProps } from "@mui/material";
+import { TestProps } from "../shared/types/test-props";
+type VentionSkeletonBaseProps = TestProps & {
+    className?: string;
+};
+export type VentionSkeletonProps = (VentionSkeletonBaseProps & {
+    variant: "text";
+    typography: TypographyOwnProps["variant"];
+    width?: number | string;
+}) | (VentionSkeletonBaseProps & {
+    variant: "rounded";
+    width?: number | string;
+    height: number | string;
+}) | (VentionSkeletonBaseProps & {
+    variant: "circular";
+    diameter: number;
+});
+export declare function VentionSkeleton(props: VentionSkeletonProps): import("react/jsx-runtime").JSX.Element;
+export {};