@app-studio/web 0.8.80 → 0.8.81

package/dist/components/Button/Button/Button.props.d.ts

@@ -22,8 +22,7 @@ export interface ButtonProps extends Omit<$ButtonProps, 'size'> {
     ariaLabel?: string;
     variant?: Variant;
     effect?: Effects;
-    containerProps?: ViewProps;
-    linkProps?: ViewProps;
+    colorScheme?: string;
     views?: {
         container?: ViewProps;
         icon?: ViewProps;

package/dist/web.cjs.development.js

@@ -3525,78 +3525,6 @@ var IconSizes$1 = {
     padding: 14
   }
 };
-/**
- * Button variants with consistent styling
- */
-var getButtonVariants = (color, isLight) => ({
-  filled: {
-    backgroundColor: color,
-    color: isLight ? 'color.gray.900' : 'color.white',
-    borderWidth: 1,
-    borderStyle: 'solid',
-    borderColor: 'transparent',
-    on: {
-      hover: {
-        filter: 'brightness(0.9)',
-        transform: 'translateY(-1px)'
-      },
-      active: {
-        filter: 'brightness(0.85)',
-        transform: 'translateY(0)'
-      }
-    },
-    transition: 'all 0.2s ease'
-  },
-  outline: {
-    backgroundColor: 'transparent',
-    borderWidth: 1,
-    borderStyle: 'solid',
-    borderColor: color,
-    color: color,
-    on: {
-      hover: {
-        backgroundColor: color + "10",
-        transform: 'translateY(-1px)'
-      },
-      active: {
-        backgroundColor: color + "20",
-        transform: 'translateY(0)'
-      }
-    },
-    transition: 'all 0.2s ease'
-  },
-  ghost: {
-    backgroundColor: 'transparent',
-    color: color,
-    borderWidth: 0,
-    borderStyle: 'none',
-    borderColor: 'transparent',
-    on: {
-      hover: {
-        backgroundColor: color + "10",
-        transform: 'translateY(-1px)'
-      },
-      active: {
-        backgroundColor: color + "20",
-        transform: 'translateY(0)'
-      }
-    },
-    transition: 'all 0.2s ease'
-  },
-  link: {
-    backgroundColor: 'transparent',
-    color: color,
-    textDecoration: 'underline',
-    textUnderlineOffset: 2,
-    on: {
-      hover: {
-        textDecoration: 'underline',
-        textDecorationThickness: 2
-      }
-    },
-    transition: 'all 0.2s ease'
-  }
-});
 
 // Defines a mapping of spinning speed labels to their respective duration in seconds for the Loader component animations.
 // Sets up a scale of sizes, mapping size labels to numerical values to be used for Loader component dimensions.
@@ -3790,7 +3718,9 @@ React__default.createElement(LoaderView, Object.assign({}, props)));
 // Exports the LoaderComponent as Loader, making it available for use in other parts of the application.
 var Loader = LoaderComponent;
 
-var _excluded$a = ["icon", "shadow", "children", "ariaLabel", "to", "isAuto", "isFilled", "isIconRounded", "isLoading", "isDisabled", "size", "variant", "iconPosition", "shape", "onClick", "loaderProps", "loaderPosition", "effect", "isHovered", "setIsHovered", "isExternal", "themeMode", "containerProps", "linkProps", "views"];
+var _excluded$a = ["icon", "shadow", "children", "ariaLabel", "to", "isAuto", "isFilled", "isIconRounded", "isLoading", "isDisabled", "size", "variant", "iconPosition", "shape", "onClick", "loaderProps", "loaderPosition", "effect", "isHovered", "setIsHovered", "isExternal", "themeMode", "views", "colorScheme"],
+  _excluded2$3 = ["_hover", "_active"],
+  _excluded3$3 = ["height"];
 var contrast = /*#__PURE__*/require('contrast');
 var ButtonView = _ref => {
   var _props$onClick;
@@ -3813,11 +3743,12 @@ var ButtonView = _ref => {
       loaderProps = {},
       loaderPosition = 'left',
       effect = 'default',
+      isHovered,
       setIsHovered = () => {},
       isExternal = false,
       themeMode: elementMode,
-      linkProps,
-      views
+      views,
+      colorScheme = 'theme.primary'
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   var {
@@ -3829,13 +3760,79 @@ var ButtonView = _ref => {
   var defaultNativeProps = {
     disabled: !isActive
   };
-  var buttonColor = isActive ? 'theme.primary' : 'theme.disabled';
-  // We'll handle hover effects through CSS transitions in the style
+  var buttonColor = isActive ? colorScheme : 'theme.disabled';
+  var hovering = isHovered && effect === 'hover';
+  var reverse = isHovered && effect === 'reverse';
   // Determine if the button color is light or dark for proper contrast
   var isLight = contrast(getColor(buttonColor, elementMode ? elementMode : themeMode)) == 'light';
-  // Get button variants based on color and light/dark status
-  var ButtonVariants = getButtonVariants(buttonColor, isLight);
-  // Note: Effects are now handled through CSS transitions in the style definitions
+  // Define button variants with effect support
+  var ButtonVariants = {
+    filled: {
+      backgroundColor: reverse ? 'transparent' : buttonColor,
+      color: reverse ? isLight ? 'white' : buttonColor : isLight ? buttonColor : 'white',
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: reverse ? buttonColor : 'transparent',
+      _hover: {
+        backgroundColor: reverse ? buttonColor + "10" : "" + buttonColor,
+        transform: 'translateY(-2px)',
+        boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)'
+      },
+      _active: {
+        backgroundColor: reverse ? buttonColor + "20" : "" + buttonColor,
+        transform: 'translateY(0)',
+        boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)'
+      }
+    },
+    outline: {
+      backgroundColor: reverse ? buttonColor : 'transparent',
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: reverse ? buttonColor : colorScheme,
+      color: reverse ? 'white' : buttonColor,
+      _hover: {
+        backgroundColor: reverse ? "" + buttonColor : buttonColor + "10",
+        transform: 'translateY(-2px)',
+        boxShadow: '0 4px 8px rgba(0, 0, 0, 0.05)'
+      },
+      _active: {
+        backgroundColor: reverse ? buttonColor + "b0" : buttonColor + "20",
+        transform: 'translateY(0)',
+        boxShadow: '0 2px 4px rgba(0, 0, 0, 0.05)'
+      }
+    },
+    link: {
+      backgroundColor: 'transparent',
+      borderWidth: 0,
+      borderStyle: 'none',
+      borderColor: 'transparent',
+      color: buttonColor,
+      textDecoration: reverse ? 'none' : 'underline',
+      _hover: {
+        opacity: 0.8,
+        textDecorationThickness: '2px'
+      },
+      _active: {
+        opacity: 0.8,
+        textDecorationThickness: '2px'
+      }
+    },
+    ghost: {
+      backgroundColor: reverse ? buttonColor : 'transparent',
+      color: reverse ? 'white' : buttonColor,
+      borderWidth: 0,
+      borderStyle: 'none',
+      borderColor: 'transparent',
+      _hover: {
+        backgroundColor: reverse ? "" + buttonColor : buttonColor + "10",
+        transform: 'translateY(-2px)'
+      },
+      _active: {
+        backgroundColor: reverse ? buttonColor + "b0" : buttonColor + "20",
+        transform: 'translateY(0)'
+      }
+    }
+  };
   var buttonSizeStyles = ButtonSizes[size];
   var buttonVariant = ButtonVariants[variant];
   var scaleWidth = {
@@ -3862,6 +3859,13 @@ var ButtonView = _ref => {
   }, views == null ? void 0 : views.icon), icon)), isLoading && loaderPosition === 'right' && (/*#__PURE__*/React__default.createElement(Loader, Object.assign({
     size: size === 'xs' || size === 'sm' ? 'sm' : 'md'
   }, loaderProps))));
+  // Extract hover and active styles from buttonVariant
+  var _ref2 = buttonVariant || {},
+    {
+      _hover,
+      _active
+    } = _ref2,
+    baseButtonVariant = _objectWithoutPropertiesLoose(_ref2, _excluded2$3);
   return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
     gap: 8,
     as: "button",
@@ -3876,12 +3880,22 @@ var ButtonView = _ref => {
     onMouseEnter: () => handleHover(true),
     onMouseLeave: () => handleHover(false),
     cursor: isActive ? 'pointer' : 'default',
+    filter: hovering && effect === 'hover' ? 'brightness(0.85)' : 'brightness(1)',
+    transition: "all 0.2s ease",
+    transform: hovering && effect === 'hover' && !isDisabled ? 'translateY(-5px)' : '',
     // Apply consistent styling according to design guidelines
     // Apply shadow if provided
     boxShadow: shadow ? shadow : undefined
-  }, defaultNativeProps, buttonSizeStyles, buttonVariant, scaleWidth, props.padding || props.paddingHorizontal || props.paddingVertical || props.paddingLeft || props.paddingRight || props.paddingTop || props.paddingBottom ? {} : changePadding, props, views == null ? void 0 : views.container), variant === 'link' && to ? (/*#__PURE__*/React__default.createElement(Link, Object.assign({
+  }, defaultNativeProps, (_ref3 => {
+    var rest = _objectWithoutPropertiesLoose(_ref3, _excluded3$3);
+    return rest;
+  })(props), buttonSizeStyles, baseButtonVariant, scaleWidth, props.padding || props.paddingHorizontal || props.paddingVertical || props.paddingLeft || props.paddingRight || props.paddingTop || props.paddingBottom ? {} : changePadding, {
+    // Apply hover and active styles
+    _hover: _hover,
+    _active: _active
+  }, views == null ? void 0 : views.container), variant === 'link' && to ? (/*#__PURE__*/React__default.createElement(Link, Object.assign({
     to: to,
-    textDecorationColor: 'theme.primary',
+    textDecorationColor: colorScheme,
     textDecorationThickness: "1px",
     textUnderlineOffset: "2px",
     transition: "all 0.2s ease",
@@ -3889,7 +3903,7 @@ var ButtonView = _ref => {
     _hover: {
       textDecorationThickness: '2px'
     }
-  }, linkProps, views == null ? void 0 : views.link), content)) : content);
+  }, views == null ? void 0 : views.link), content)) : content);
 };
 
 // Importing a custom hook to manage the state specific to the button component.
@@ -4012,8 +4026,8 @@ var useCardContext = () => {
 };
 
 var _excluded$b = ["children", "views", "style", "themeMode"],
-  _excluded2$3 = ["children", "views", "style", "themeMode"],
-  _excluded3$3 = ["children", "views", "style", "themeMode"],
+  _excluded2$4 = ["children", "views", "style", "themeMode"],
+  _excluded3$4 = ["children", "views", "style", "themeMode"],
   _excluded4$3 = ["variant", "size", "shape", "children", "header", "footer", "isFullWidth", "views", "style", "themeMode"];
 var CardHeader = _ref => {
   var _contextStyles$header;
@@ -4039,7 +4053,7 @@ var CardContent = _ref2 => {
       children,
       style
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$3);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$4);
   var theme = appStudio.useTheme();
   var {
     styles: contextStyles
@@ -4057,7 +4071,7 @@ var CardFooter = _ref3 => {
       children,
       style
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded3$3);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded3$4);
   var theme = appStudio.useTheme();
   var {
     styles: contextStyles
@@ -4421,8 +4435,8 @@ var useCarouselContext = () => {
 };
 
 var _excluded$c = ["children", "isActive", "views"],
-  _excluded2$4 = ["views", "children"],
-  _excluded3$4 = ["views", "children"],
+  _excluded2$5 = ["views", "children"],
+  _excluded3$5 = ["views", "children"],
   _excluded4$4 = ["children", "views"],
   _excluded5$1 = ["children", "views", "style"],
   _excluded6$1 = ["children", "defaultActiveIndex", "activeIndex", "onChange", "showNavigation", "navigationPosition", "prevButton", "nextButton", "showIndicators", "indicatorPosition", "indicatorVariant", "autoPlay", "autoPlayInterval", "pauseOnHover", "infinite", "direction", "transitionDuration", "views", "themeMode"];
@@ -4448,7 +4462,7 @@ var CarouselPreviousComponent = _ref2 => {
       children // Allow custom content/icon
       // Spread remaining ButtonProps
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$4);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$5);
   var {
     goToPrevious,
     canGoPrevious,
@@ -4471,7 +4485,7 @@ var CarouselNextComponent = _ref3 => {
       views,
       children
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded3$4);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded3$5);
   var {
     goToNext,
     canGoNext,
@@ -5715,8 +5729,8 @@ var calculateMenuPosition = function calculateMenuPosition(x, y, menuWidth, menu
 };
 
 var _excluded$e = ["children", "disableNativeContextMenu", "asChild", "isDisabled", "views"],
-  _excluded2$5 = ["items", "children", "position", "side", "align", "views", "style"],
-  _excluded3$5 = ["item", "children", "onSelect", "isDisabled", "views"],
+  _excluded2$6 = ["items", "children", "position", "side", "align", "views", "style"],
+  _excluded3$6 = ["item", "children", "onSelect", "isDisabled", "views"],
   _excluded4$5 = ["views"],
   _excluded5$2 = ["views"],
   _excluded6$2 = ["children", "items", "size", "variant", "disableNativeContextMenu", "views", "themeMode"];
@@ -5824,7 +5838,7 @@ var ContextMenuContent = _ref3 => {
       views,
       style // Capture user-provided style
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$5);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$6);
   var {
     isOpen,
     position: contextPosition,
@@ -5895,7 +5909,7 @@ var ContextMenuItem = _ref4 => {
       isDisabled = false,
       views
     } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$5);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$6);
   var {
     activeSubmenuId,
     setActiveSubmenuId,
@@ -6121,7 +6135,7 @@ ContextMenu.Divider = ContextMenuDivider;
 ContextMenu.Separator = ContextMenuSeparator; // Add the Separator component
 
 var _excluded$g = ["src", "color", "views", "themeMode"],
-  _excluded2$6 = ["path"];
+  _excluded2$7 = ["path"];
 var FileSVG = _ref => {
   var {
       src,
@@ -6151,7 +6165,7 @@ var FileImage = _ref2 => {
   var {
       path
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$6);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$7);
   return /*#__PURE__*/React__default.createElement(appStudio.Image, Object.assign({
     src: path
   }, props));
@@ -6604,8 +6618,8 @@ var IconSizes$2 = {
 };
 
 var _excluded$o = ["isHovered", "setIsHovered", "option", "size", "callback", "style"],
-  _excluded2$7 = ["id", "name", "value", "onChange", "isMulti", "isDisabled", "isReadOnly", "options"],
-  _excluded3$6 = ["option", "size", "removeOption"],
+  _excluded2$8 = ["id", "name", "value", "onChange", "isMulti", "isDisabled", "isReadOnly", "options"],
+  _excluded3$7 = ["option", "size", "removeOption"],
   _excluded4$6 = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isMulti", "isFocused", "isHovered", "isDisabled", "isReadOnly", "options", "shadow", "size", "shape", "variant", "views", "onChange", "setHide", "setValue", "setIsHovered", "setIsFocused", "setHighlightedIndex", "highlightedIndex"];
 /**
  * Item Component
@@ -6726,7 +6740,7 @@ var HiddenSelect = _ref4 => {
       isReadOnly = false,
       options = []
     } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded2$7);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded2$8);
   var handleChange = event => {
     if (onChange) onChange(event);
   };
@@ -6831,7 +6845,7 @@ var MultiSelect = _ref6 => {
       size = 'md',
       removeOption = () => {}
     } = _ref6,
-    props = _objectWithoutPropertiesLoose(_ref6, _excluded3$6);
+    props = _objectWithoutPropertiesLoose(_ref6, _excluded3$7);
   var handleClick = () => removeOption(option);
   return /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
     gap: 8,
@@ -9365,8 +9379,8 @@ var IconSizes$4 = {
 };
 
 var _excluded$t = ["size"],
-  _excluded2$8 = ["size"],
-  _excluded3$7 = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isHovered", "isFocused", "isAutoFocus", "isDisabled", "isReadOnly", "shadow", "newOptions", "size", "variant", "shape", "onChange", "onBlur", "setHide", "setNewOptions", "setIsHovered", "setIsFocused", "setValue", "views", "themeMode"];
+  _excluded2$9 = ["size"],
+  _excluded3$8 = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isHovered", "isFocused", "isAutoFocus", "isDisabled", "isReadOnly", "shadow", "newOptions", "size", "variant", "shape", "onChange", "onBlur", "setHide", "setNewOptions", "setIsHovered", "setIsFocused", "setValue", "views", "themeMode"];
 var CountryList = _ref => {
   var props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
   return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
@@ -9377,7 +9391,7 @@ var CountrySelector = props => (/*#__PURE__*/React__default.createElement(appStu
   type: "country"
 }, props)));
 var CountryItem = _ref2 => {
-  var props = _objectWithoutPropertiesLoose(_ref2, _excluded2$8);
+  var props = _objectWithoutPropertiesLoose(_ref2, _excluded2$9);
   return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
     as: "li"
   }, props));
@@ -9479,7 +9493,7 @@ var CountryPickerView = _ref5 => {
       },
       themeMode: elementMode
     } = _ref5,
-    props = _objectWithoutPropertiesLoose(_ref5, _excluded3$7);
+    props = _objectWithoutPropertiesLoose(_ref5, _excluded3$8);
   var {
     getColor,
     themeMode
@@ -9728,7 +9742,7 @@ var usePasswordState = props => {
 };
 
 var _excluded$v = ["visibleIcon", "hiddenIcon"],
-  _excluded2$9 = ["isVisible", "setIsVisible"];
+  _excluded2$a = ["isVisible", "setIsVisible"];
 var PasswordComponent = _ref => {
   var {
       visibleIcon = /*#__PURE__*/React__default.createElement(OpenEyeIcon, {
@@ -9744,7 +9758,7 @@ var PasswordComponent = _ref => {
       isVisible,
       setIsVisible
     } = _usePasswordState,
-    passwordProps = _objectWithoutPropertiesLoose(_usePasswordState, _excluded2$9);
+    passwordProps = _objectWithoutPropertiesLoose(_usePasswordState, _excluded2$a);
   return /*#__PURE__*/React__default.createElement(TextFieldView, Object.assign({}, passwordProps, {
     type: isVisible ? 'text' : 'password',
     isClearable: false,
@@ -10758,7 +10772,7 @@ var TextFieldComponent$1 = props => {
 var FormikTextField = TextFieldComponent$1;
 
 var _excluded$D = ["visibleIcon", "hiddenIcon"],
-  _excluded2$a = ["isVisible", "setIsVisible"];
+  _excluded2$b = ["isVisible", "setIsVisible"];
 var PasswordComponent$1 = _ref => {
   var {
       visibleIcon = /*#__PURE__*/React__default.createElement(OpenEyeIcon, {
@@ -10775,7 +10789,7 @@ var PasswordComponent$1 = _ref => {
       isVisible,
       setIsVisible
     } = _usePasswordState,
-    passwordProps = _objectWithoutPropertiesLoose(_usePasswordState, _excluded2$a);
+    passwordProps = _objectWithoutPropertiesLoose(_usePasswordState, _excluded2$b);
   return /*#__PURE__*/React__default.createElement(TextFieldView, Object.assign({}, passwordProps, {
     type: isVisible ? 'text' : 'password',
     isClearable: false,
@@ -12201,8 +12215,8 @@ var ModalTypography = {
 };
 
 var _excluded$H = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position", "views"],
-  _excluded2$b = ["children", "shadow", "isFullScreen", "shape", "views"],
-  _excluded3$8 = ["children", "buttonColor", "iconSize", "buttonPosition", "views"],
+  _excluded2$c = ["children", "shadow", "isFullScreen", "shape", "views"],
+  _excluded3$9 = ["children", "buttonColor", "iconSize", "buttonPosition", "views"],
   _excluded4$7 = ["children", "views"],
   _excluded5$3 = ["children", "views"];
 var ModalOverlay = _ref => {
@@ -12251,7 +12265,7 @@ var ModalContainer = _ref2 => {
       shape = 'rounded',
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$b);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$c);
   var defaultShadow = typeof document !== undefined ? {
     boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.15)'
   } : {
@@ -12284,7 +12298,7 @@ var ModalHeader = _ref3 => {
       buttonPosition = 'right',
       views
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded3$8);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded3$9);
   var onClose = props.onClose ? props.onClose : hideModal;
   var buttonIcon = /*#__PURE__*/React__default.createElement(appStudio.View, {
     onClick: onClose
@@ -13759,8 +13773,8 @@ var getDropdownPosition = function getDropdownPosition(side, align) {
 };
 
 var _excluded$M = ["children", "views"],
-  _excluded2$c = ["items", "side", "align", "views"],
-  _excluded3$9 = ["item", "views"],
+  _excluded2$d = ["items", "side", "align", "views"],
+  _excluded3$a = ["item", "views"],
   _excluded4$8 = ["views"],
   _excluded5$4 = ["trigger", "items", "side", "align", "views", "themeMode"];
 // Create context for the DropdownMenu
@@ -13821,7 +13835,7 @@ var DropdownMenuContent = _ref3 => {
       align = 'start',
       views
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$c);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$d);
   var {
     isOpen,
     //activeSubmenuId, setActiveSubmenuId, size,
@@ -13857,7 +13871,7 @@ var DropdownMenuItem = _ref4 => {
       item,
       views
     } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$9);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$a);
   var {
     activeSubmenuId,
     setActiveSubmenuId,
@@ -14170,7 +14184,7 @@ var useRect = ref => {
 };
 
 var _excluded$O = ["children", "views", "asChild"],
-  _excluded2$d = ["children", "views", "side", "align", "sideOffset", "style", "backgroundColor", "borderRadius", "boxShadow", "padding", "minWidth", "maxWidth"];
+  _excluded2$e = ["children", "views", "side", "align", "sideOffset", "style", "backgroundColor", "borderRadius", "boxShadow", "padding", "minWidth", "maxWidth"];
 // Create context for the HoverCard
 var HoverCardContext = /*#__PURE__*/React.createContext({
   isOpen: false,
@@ -14256,7 +14270,7 @@ var HoverCardContent = _ref3 => {
       minWidth = '200px',
       maxWidth = '300px'
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$d);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$e);
   var {
     isOpen,
     cancelCloseTimer,
@@ -15319,8 +15333,8 @@ var SidebarTransitions = {
 };
 
 var _excluded$V = ["children", "showToggleButton", "views"],
-  _excluded2$e = ["children", "views"],
-  _excluded3$a = ["children", "views"],
+  _excluded2$f = ["children", "views"],
+  _excluded3$b = ["children", "views"],
   _excluded4$9 = ["children", "position", "size", "variant", "fixed", "hasBackdrop", "expandedWidth", "collapsedWidth", "breakpointBehavior", "elevation", "transitionPreset", "ariaLabel", "isExpanded", "isMobile", "collapse", "views", "themeMode"];
 // Create context for the Sidebar
 var SidebarContext = /*#__PURE__*/React.createContext({
@@ -15418,7 +15432,7 @@ var SidebarContent = _ref3 => {
       children,
       views
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$e);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$f);
   var {
     isExpanded
   } = useSidebarContext();
@@ -15436,7 +15450,7 @@ var SidebarFooter = _ref4 => {
       children,
       views
     } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$a);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$b);
   var {
     isExpanded
   } = useSidebarContext();
@@ -15994,8 +16008,8 @@ var HandleIconStyles = {
 };
 
 var _excluded$X = ["children", "id", "defaultSize", "minSize", "maxSize", "collapsible", "defaultCollapsed", "onCollapseChange", "views"],
-  _excluded2$f = ["id", "position", "disabled", "withVisualIndicator", "withCollapseButton", "collapseTarget", "views"],
-  _excluded3$b = ["children", "orientation", "size", "variant", "defaultSizes", "minSize", "maxSize", "collapsible", "containerRef", "views"];
+  _excluded2$g = ["id", "position", "disabled", "withVisualIndicator", "withCollapseButton", "collapseTarget", "views"],
+  _excluded3$c = ["children", "orientation", "size", "variant", "defaultSizes", "minSize", "maxSize", "collapsible", "containerRef", "views"];
 // Create context for the Resizable component
 var ResizableContext = /*#__PURE__*/React.createContext({
   orientation: 'horizontal',
@@ -16102,7 +16116,7 @@ var ResizableHandle = _ref3 => {
       collapseTarget,
       views
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$f);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$g);
   var {
     orientation,
     size,
@@ -16242,7 +16256,7 @@ var ResizableView = _ref4 => {
       containerRef,
       views
     } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$b);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$c);
   var Container = orientation === 'horizontal' ? appStudio.Horizontal : appStudio.Vertical;
   return /*#__PURE__*/React__default.createElement(Container, Object.assign({
     ref: containerRef,
@@ -17039,8 +17053,8 @@ var CommandFooterStyles = {
 };
 
 var _excluded$Z = ["value", "onValueChange", "placeholder", "views"],
-  _excluded2$g = ["children", "views"],
-  _excluded3$c = ["heading", "children", "views"],
+  _excluded2$h = ["children", "views"],
+  _excluded3$d = ["heading", "children", "views"],
   _excluded4$a = ["item", "selected", "onSelect", "views"],
   _excluded5$5 = ["children", "views"],
   _excluded6$3 = ["open", "onOpenChange", "groups", "commands", "placeholder", "size", "variant", "emptyState", "footer", "search", "setSearch", "selectedIndex", "setSelectedIndex", "filteredCommands", "filteredGroups", "listRef", "views", "filter"];
@@ -17102,7 +17116,7 @@ var CommandList = _ref3 => {
       children,
       views
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$g);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$h);
   return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, CommandListStyles, views == null ? void 0 : views.container, props), children);
 };
 // Command Group component
@@ -17112,7 +17126,7 @@ var CommandGroup = _ref4 => {
       children,
       views
     } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$c);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$d);
   return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, CommandGroupStyles, views == null ? void 0 : views.container, props), /*#__PURE__*/React__default.createElement(Text, Object.assign({}, CommandGroupHeadingStyles, views == null ? void 0 : views.heading), heading), children);
 };
 // Command Item component
@@ -17564,8 +17578,8 @@ var getArrowStyles = position => {
 };
 
 var _excluded$$ = ["children", "views", "asChild"],
-  _excluded2$h = ["children", "views"],
-  _excluded3$d = ["content", "children", "position", "align", "size", "variant", "showArrow", "views", "themeMode"];
+  _excluded2$i = ["children", "views"],
+  _excluded3$e = ["content", "children", "position", "align", "size", "variant", "showArrow", "views", "themeMode"];
 // Create context for the Tooltip
 var TooltipContext = /*#__PURE__*/React.createContext({
   isOpen: false,
@@ -17635,7 +17649,7 @@ var TooltipContent = _ref3 => {
       children,
       views
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$h);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$i);
   var {
     isOpen,
     contentRef,
@@ -17665,7 +17679,7 @@ var TooltipView = _ref4 => {
       showArrow = true,
       views
     } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$d);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$e);
   var {
     isOpen,
     // openTooltip,