@app-studio/web 0.8.80 → 0.8.82

package/dist/web.umd.development.js

@@ -1,6 +1,6 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('core-js/modules/es.object.assign.js'), require('react'), require('core-js/modules/es.array.includes.js'), require('core-js/modules/es.array.iterator.js'), require('core-js/modules/es.string.includes.js'), require('core-js/modules/web.dom-collections.iterator.js'), require('core-js/modules/es.regexp.to-string.js'), require('app-studio'), require('core-js/modules/es.symbol.description.js'), require('core-js/modules/es.parse-float.js'), require('react-router-dom'), require('core-js/modules/es.promise.js'), require('core-js/modules/es.array.reduce.js'), require('core-js/modules/es.number.to-fixed.js'), require('core-js/modules/es.string.starts-with.js'), require('date-fns/format'), require('core-js/modules/es.parse-int.js'), require('core-js/modules/es.regexp.constructor.js'), require('core-js/modules/es.regexp.exec.js'), require('formik'), require('core-js/modules/web.url.js'), require('core-js/modules/web.url.to-json.js'), require('core-js/modules/web.url-search-params.js'), require('zustand'), require('core-js/modules/es.string.ends-with.js'), require('core-js/modules/es.string.match.js'), require('core-js/modules/es.string.search.js'), require('core-js/modules/es.array.flat-map.js'), require('core-js/modules/es.array.unscopables.flat-map.js')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'core-js/modules/es.object.assign.js', 'react', 'core-js/modules/es.array.includes.js', 'core-js/modules/es.array.iterator.js', 'core-js/modules/es.string.includes.js', 'core-js/modules/web.dom-collections.iterator.js', 'core-js/modules/es.regexp.to-string.js', 'app-studio', 'core-js/modules/es.symbol.description.js', 'core-js/modules/es.parse-float.js', 'react-router-dom', 'core-js/modules/es.promise.js', 'core-js/modules/es.array.reduce.js', 'core-js/modules/es.number.to-fixed.js', 'core-js/modules/es.string.starts-with.js', 'date-fns/format', 'core-js/modules/es.parse-int.js', 'core-js/modules/es.regexp.constructor.js', 'core-js/modules/es.regexp.exec.js', 'formik', 'core-js/modules/web.url.js', 'core-js/modules/web.url.to-json.js', 'core-js/modules/web.url-search-params.js', 'zustand', 'core-js/modules/es.string.ends-with.js', 'core-js/modules/es.string.match.js', 'core-js/modules/es.string.search.js', 'core-js/modules/es.array.flat-map.js', 'core-js/modules/es.array.unscopables.flat-map.js'], factory) :
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('core-js/modules/es.object.assign.js'), require('react'), require('core-js/modules/es.array.includes.js'), require('core-js/modules/es.array.iterator.js'), require('core-js/modules/es.string.includes.js'), require('core-js/modules/web.dom-collections.iterator.js'), require('core-js/modules/es.regexp.to-string.js'), require('app-studio'), require('core-js/modules/es.symbol.description.js'), require('core-js/modules/es.parse-float.js'), require('react-router-dom'), require('core-js/modules/es.promise.js'), require('core-js/modules/es.array.reduce.js'), require('core-js/modules/es.number.to-fixed.js'), require('core-js/modules/es.string.starts-with.js'), require('date-fns/format'), require('core-js/modules/es.parse-int.js'), require('core-js/modules/es.regexp.constructor.js'), require('core-js/modules/es.regexp.exec.js'), require('formik'), require('core-js/modules/web.url.js'), require('core-js/modules/web.url.to-json.js'), require('core-js/modules/web.url-search-params.js'), require('zustand'), require('core-js/modules/es.string.ends-with.js'), require('core-js/modules/es.string.match.js'), require('core-js/modules/es.string.search.js'), require('core-js/modules/es.array.flat-map.js'), require('core-js/modules/es.array.unscopables.flat-map.js'), require('core-js/modules/es.string.trim.js')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'core-js/modules/es.object.assign.js', 'react', 'core-js/modules/es.array.includes.js', 'core-js/modules/es.array.iterator.js', 'core-js/modules/es.string.includes.js', 'core-js/modules/web.dom-collections.iterator.js', 'core-js/modules/es.regexp.to-string.js', 'app-studio', 'core-js/modules/es.symbol.description.js', 'core-js/modules/es.parse-float.js', 'react-router-dom', 'core-js/modules/es.promise.js', 'core-js/modules/es.array.reduce.js', 'core-js/modules/es.number.to-fixed.js', 'core-js/modules/es.string.starts-with.js', 'date-fns/format', 'core-js/modules/es.parse-int.js', 'core-js/modules/es.regexp.constructor.js', 'core-js/modules/es.regexp.exec.js', 'formik', 'core-js/modules/web.url.js', 'core-js/modules/web.url.to-json.js', 'core-js/modules/web.url-search-params.js', 'zustand', 'core-js/modules/es.string.ends-with.js', 'core-js/modules/es.string.match.js', 'core-js/modules/es.string.search.js', 'core-js/modules/es.array.flat-map.js', 'core-js/modules/es.array.unscopables.flat-map.js', 'core-js/modules/es.string.trim.js'], factory) :
   (global = global || self, factory(global['@app-studio/web'] = {}, null, global.React, null, null, null, null, null, global.appStudio, null, null, global.reactRouterDom, null, null, null, null, global.format, null, null, null, global.formik, null, null, null, global.zustand));
 }(this, (function (exports, es_object_assign_js, React, es_array_includes_js, es_array_iterator_js, es_string_includes_js, web_domCollections_iterator_js, es_regexp_toString_js, appStudio, es_symbol_description_js, es_parseFloat_js, reactRouterDom, es_promise_js, es_array_reduce_js, es_number_toFixed_js, es_string_startsWith_js, format, es_parseInt_js, es_regexp_constructor_js, es_regexp_exec_js, formik, web_url_js, web_url_toJson_js, web_urlSearchParams_js, zustand) { 'use strict';
 
@@ -3497,78 +3497,6 @@
       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.
@@ -3762,7 +3690,9 @@
   // 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;
@@ -3785,11 +3715,12 @@
         loaderProps = {},
         loaderPosition = 'left',
         effect = 'default',
+        isHovered,
         setIsHovered = () => {},
         isExternal = false,
         themeMode: elementMode,
-        linkProps,
-        views
+        views,
+        colorScheme = 'theme.primary'
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
     var {
@@ -3801,13 +3732,81 @@
     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
+    var buttonMode = elementMode ? elementMode : themeMode;
+    var reverseMode = reverse && buttonMode == 'light' ? 'dark' : "light"; // Slightly darker
+    var isLight = contrast(getColor(buttonColor, buttonMode)) == 'light';
+    // 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: {
+          themeMode: reverse && buttonMode == 'light' ? 'light' : "dark",
+          transform: 'translateY(-1px)',
+          boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)'
+        },
+        _active: {
+          themeMode: reverse && buttonMode == 'light' ? 'light' : "dark",
+          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: {
+          themeMode: reverse ? reverseMode : buttonMode,
+          transform: 'translateY(-1px)',
+          boxShadow: '0 4px 8px rgba(0, 0, 0, 0.05)'
+        },
+        _active: {
+          themeMode: reverse ? reverseMode : buttonMode,
+          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: {
+          themeMode: reverse ? reverseMode : buttonMode,
+          transform: 'translateY(-1px)'
+        },
+        _active: {
+          themeMode: reverse ? reverseMode : buttonMode,
+          transform: 'translateY(0)'
+        }
+      }
+    };
     var buttonSizeStyles = ButtonSizes[size];
     var buttonVariant = ButtonVariants[variant];
     var scaleWidth = {
@@ -3834,6 +3833,13 @@
     }, 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",
@@ -3848,12 +3854,22 @@
       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",
@@ -3861,7 +3877,7 @@
       _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.
@@ -3984,8 +4000,8 @@
   };
 
   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;
@@ -4011,7 +4027,7 @@
         children,
         style
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded2$3);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded2$4);
     var theme = appStudio.useTheme();
     var {
       styles: contextStyles
@@ -4029,7 +4045,7 @@
         children,
         style
       } = _ref3,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded3$3);
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded3$4);
     var theme = appStudio.useTheme();
     var {
       styles: contextStyles
@@ -4393,11 +4409,11 @@
   };
 
   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"];
+    _excluded6$1 = ["children", "defaultActiveIndex", "activeIndex", "onChange", "showNavigation", "navigationPosition", "prevButton", "nextButton", "showIndicators", "indicatorPosition", "indicatorVariant", "autoPlay", "autoPlayInterval", "pauseOnHover", "infinite", "direction", "transitionDuration", "views", "stepIndices", "themeMode"];
   var CarouselSlide = _ref => {
     var {
         children,
@@ -4420,7 +4436,7 @@
         children // Allow custom content/icon
         // Spread remaining ButtonProps
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded2$4);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded2$5);
     var {
       goToPrevious,
       canGoPrevious,
@@ -4443,7 +4459,7 @@
         views,
         children
       } = _ref3,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded3$4);
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded3$5);
     var {
       goToNext,
       canGoNext,
@@ -5687,8 +5703,8 @@
   };
 
   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"];
@@ -5796,7 +5812,7 @@
         views,
         style // Capture user-provided style
       } = _ref3,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$5);
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$6);
     var {
       isOpen,
       position: contextPosition,
@@ -5867,7 +5883,7 @@
         isDisabled = false,
         views
       } = _ref4,
-      props = _objectWithoutPropertiesLoose(_ref4, _excluded3$5);
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded3$6);
     var {
       activeSubmenuId,
       setActiveSubmenuId,
@@ -6093,7 +6109,7 @@
   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,
@@ -6123,7 +6139,7 @@
     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));
@@ -6290,17 +6306,6 @@
       _focus: {
         borderColor: 'theme.primary',
         boxShadow: '0 0 0 1px rgba(66, 153, 225, 0.2)'
-      },
-      '@media (prefers-color-scheme: dark)': {
-        backgroundColor: 'color.gray.800',
-        borderColor: 'color.gray.700',
-        _hover: {
-          borderColor: 'color.gray.600'
-        },
-        _focus: {
-          borderColor: 'theme.primary',
-          boxShadow: '0 0 0 1px rgba(66, 153, 225, 0.4)'
-        }
       }
     },
     default: {
@@ -6316,16 +6321,6 @@
       },
       _focus: {
         borderBottomColor: 'theme.primary'
-      },
-      '@media (prefers-color-scheme: dark)': {
-        backgroundColor: 'color.gray.800',
-        borderBottomColor: 'color.gray.700',
-        _hover: {
-          borderBottomColor: 'color.gray.600'
-        },
-        _focus: {
-          borderBottomColor: 'theme.primary'
-        }
       }
     },
     none: {
@@ -6457,7 +6452,7 @@
     }
   };
 
-  var _excluded$l = ["children", "heading", "isItalic", "isUnderlined", "isStriked", "weight", "size"];
+  var _excluded$l = ["children", "heading", "isItalic", "isUnderlined", "isStriked", "weight", "size", "dropDown"];
   var LabelView = _ref => {
     var {
         children,
@@ -6576,8 +6571,8 @@
   };
 
   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
@@ -6667,11 +6662,7 @@
       // State properties
       cursor: isDisabled ? 'not-allowed' : 'pointer',
       // Animation
-      transition: 'all 0.2s ease',
-      // Dark mode support
-      '@media (prefers-color-scheme: dark)': {
-        color: isDisabled ? 'color.gray.600' : 'color.gray.100'
-      }
+      transition: 'all 0.2s ease'
     }, views['field'], views['text']);
     var option = options.length > 0 && options.find(option => option.value === value);
     return /*#__PURE__*/React__default.createElement(Text, Object.assign({}, fieldStyles), (value === '' || Array.isArray(value) && value.length === 0) && !!placeholder ? placeholder : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, typeof value === 'string' ? (_ref3 = option && option.label) != null ? _ref3 : value :
@@ -6698,7 +6689,7 @@
         isReadOnly = false,
         options = []
       } = _ref4,
-      props = _objectWithoutPropertiesLoose(_ref4, _excluded2$7);
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded2$8);
     var handleChange = event => {
       if (onChange) onChange(event);
     };
@@ -6730,9 +6721,7 @@
   var DropDown = _ref5 => {
     var {
       size,
-      views = {
-        dropDown: {}
-      },
+      views = {},
       options,
       callback = () => {},
       highlightedIndex,
@@ -6782,7 +6771,7 @@
           borderRadius: '4px'
         }
       }
-    }, shadow, views['dropDown']), options.length > 0 && options.map((option, index) => (/*#__PURE__*/React__default.createElement(Item, Object.assign({
+    }, shadow, views == null ? void 0 : views.dropDown), options.length > 0 && options.map((option, index) => (/*#__PURE__*/React__default.createElement(Item, Object.assign({
       key: option.value,
       size: size,
       style: views['text'],
@@ -6803,7 +6792,7 @@
         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,
@@ -7092,7 +7081,7 @@
     }
   };
 
-  var _excluded$p = ["id", "name", "label", "inActiveChild", "activeChild", "labelPosition", "shadow", "size", "value", "isHovered", "isDisabled", "isReadOnly", "on", "setOn", "onChange", "setValue", "setIsHovered", "helperText", "views"];
+  var _excluded$p = ["id", "name", "label", "inActiveChild", "isChecked", "activeChild", "labelPosition", "shadow", "size", "value", "isHovered", "isDisabled", "isReadOnly", "on", "setOn", "onChange", "setValue", "setIsHovered", "helperText", "views"];
   var SwitchContent = props => /*#__PURE__*/React__default.createElement(appStudio.Input, Object.assign({
     type: "checkbox"
   }, props));
@@ -7499,11 +7488,7 @@
       // State properties
       cursor: isDisabled ? 'not-allowed' : 'text',
       // Animation
-      transition: 'all 0.2s ease',
-      // Dark mode support
-      '@media (prefers-color-scheme: dark)': {
-        color: isDisabled ? 'color.gray.600' : 'color.gray.100'
-      }
+      transition: 'all 0.2s ease'
     }, views['field']);
     var handleFocus = () => {
       setIsFocused(true);
@@ -9337,8 +9322,8 @@
   };
 
   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({
@@ -9349,7 +9334,7 @@
     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));
@@ -9451,7 +9436,7 @@
         },
         themeMode: elementMode
       } = _ref5,
-      props = _objectWithoutPropertiesLoose(_ref5, _excluded3$7);
+      props = _objectWithoutPropertiesLoose(_ref5, _excluded3$8);
     var {
       getColor,
       themeMode
@@ -9484,8 +9469,8 @@
     var showLabel = !!(label && (isFocused || value));
     var fieldStyles = Object.assign({
       margin: 0,
-      paddingVerical: 8,
-      paddingHorizonatl: 0,
+      paddingVertical: 8,
+      paddingHorizontal: 0,
       width: '100%',
       heigth: '100%',
       border: 'none',
@@ -9700,7 +9685,7 @@
   };
 
   var _excluded$v = ["visibleIcon", "hiddenIcon"],
-    _excluded2$9 = ["isVisible", "setIsVisible"];
+    _excluded2$a = ["isVisible", "setIsVisible"];
   var PasswordComponent = _ref => {
     var {
         visibleIcon = /*#__PURE__*/React__default.createElement(OpenEyeIcon, {
@@ -9716,7 +9701,7 @@
         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,
@@ -9949,6 +9934,12 @@
       onChange,
       onChangeText,
       onComplete,
+      onKeyDown,
+      onKeyPress,
+      onBlur,
+      onFocus,
+      isReadOnly,
+      isDisabled,
       pattern,
       stepValues,
       pasteTransformer
@@ -10062,6 +10053,16 @@
     var handleKeyDown = React.useCallback(_ => {
       // Handle special keys like backspace, arrows, etc.
       // This is handled by the browser for the single input
+      if (onKeyDown) {
+        onKeyDown(_);
+      }
+    }, []);
+    var handleKeyPress = React.useCallback(e => {
+      // Handle key press events
+      // This is handled by the browser for the single input
+      if (onKeyPress) {
+        onKeyPress(e);
+      }
     }, []);
     var handlePaste = React.useCallback(e => {
       var input = inputRef.current;
@@ -10218,11 +10219,12 @@
       handleFocus,
       handleBlur,
       handleKeyDown,
+      handleKeyPress,
       handlePaste
     };
   };
 
-  var _excluded$y = ["id", "name", "label", "value", "length", "onChange", "onChangeText", "onComplete", "helperText", "placeholder", "shadow", "views", "size", "shape", "variant", "gap", "type", "error", "isFocused", "isHovered", "isDisabled", "isReadOnly", "isAutoFocus", "setValue", "setIsFocused", "setIsHovered", "inputRef", "containerRef", "mirrorSelectionStart", "mirrorSelectionEnd", "setMirrorSelectionStart", "setMirrorSelectionEnd", "handlePaste", "handleChange", "handleFocus", "handleBlur", "handleKeyDown", "stepValues", "setInputRef", "onBlur", "onClick", "onFocus"];
+  var _excluded$y = ["id", "name", "label", "value", "length", "onChange", "onChangeText", "onComplete", "helperText", "placeholder", "shadow", "views", "size", "shape", "variant", "gap", "type", "error", "isFocused", "isHovered", "isDisabled", "isReadOnly", "isAutoFocus", "setValue", "setIsFocused", "setIsHovered", "inputRef", "containerRef", "mirrorSelectionStart", "mirrorSelectionEnd", "setMirrorSelectionStart", "setMirrorSelectionEnd", "handlePaste", "handleChange", "handleFocus", "handleBlur", "handleKeyDown", "handleKeyPress", "secureTextEntry", "isFirstColumn", "stepValues", "setInputRef", "onBlur", "onClick", "onFocus"];
   // Create a context for OTP input slots
   var OTPInputContext = /*#__PURE__*/React.createContext({
     slots: [],
@@ -10230,7 +10232,7 @@
     isHovering: false
   });
   // CSS for noscript fallback
-  var NOSCRIPT_CSS_FALLBACK = "\n@keyframes blink {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0; }\n}\n\n[data-input-otp] {\n  --nojs-bg: white !important;\n  --nojs-fg: black !important;\n\n  background-color: var(--nojs-bg) !important;\n  color: var(--nojs-fg) !important;\n  caret-color: var(--nojs-fg) !important;\n  letter-spacing: .25em !important;\n  text-align: center !important;\n  border: 1px solid var(--nojs-fg) !important;\n  border-radius: 4px !important;\n  width: 100% !important;\n}\n@media (prefers-color-scheme: dark) {\n  [data-input-otp] {\n    --nojs-bg: black !important;\n    --nojs-fg: white !important;\n  }\n}";
+  var NOSCRIPT_CSS_FALLBACK = "\n@keyframes blink {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0; }\n}\n\n[data-input-otp] {\n  --nojs-bg: white !important;\n  --nojs-fg: black !important;\n\n  background-color: var(--nojs-bg) !important;\n  color: var(--nojs-fg) !important;\n  caret-color: var(--nojs-fg) !important;\n  letter-spacing: .25em !important;\n  text-align: center !important;\n  border: 1px solid var(--nojs-fg) !important;\n  border-radius: 4px !important;\n  width: 100% !important;\n}\n";
   // Helper function to safely insert CSS rules
   function safeInsertRule(sheet, rule) {
     try {
@@ -10478,7 +10480,8 @@
       handleFocus,
       handleBlur,
       handleKeyDown,
-      handlePaste
+      handlePaste,
+      handleKeyPress
     } = useOTPInputState(props);
     // Use the controlled value if it exists, otherwise use the internal state value
     var displayValue = controlledValue !== undefined ? controlledValue : value;
@@ -10500,6 +10503,7 @@
       handleFocus: handleFocus,
       handleBlur: handleBlur,
       handleKeyDown: handleKeyDown,
+      handleKeyPress: handleKeyPress,
       handlePaste: handlePaste,
       stepValues: props.stepValues
     }));
@@ -10730,7 +10734,7 @@
   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, {
@@ -10747,7 +10751,7 @@
         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,
@@ -11917,12 +11921,12 @@
     } = _ref;
     var finalPreviewUrl = externalPreviewUrl || previewUrl;
     // Debug log to help troubleshoot
-    console.log('Uploader state:', {
-      fileType,
-      finalPreviewUrl,
-      selectedFile: selectedFile == null ? void 0 : selectedFile.name,
-      progress
-    });
+    // console.log('Uploader state:', {
+    //   fileType,
+    //   finalPreviewUrl,
+    //   selectedFile: selectedFile?.name,
+    //   progress,
+    // });
     return /*#__PURE__*/React__default.createElement(appStudio.Center, Object.assign({
       onClick: handleClick,
       cursor: "pointer",
@@ -12173,8 +12177,8 @@
   };
 
   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", "isOpen"],
+    _excluded3$9 = ["children", "buttonColor", "iconSize", "buttonPosition", "views"],
     _excluded4$7 = ["children", "views"],
     _excluded5$3 = ["children", "views"];
   var ModalOverlay = _ref => {
@@ -12223,7 +12227,7 @@
         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)'
     } : {
@@ -12256,7 +12260,7 @@
         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
@@ -13059,7 +13063,9 @@
           return foundTab;
         }
         // Warn if initialTabValue is provided but not found
-        console.warn("Tabs: initialTabValue \"" + initialTabValue + "\" not found in tabs. Defaulting to the first tab.");
+        // console.warn(
+        //   `Tabs: initialTabValue "${initialTabValue}" not found in tabs. Defaulting to the first tab.`
+        // );
       }
       return propTabs[0]; // Default to the first tab
     };
@@ -13731,8 +13737,8 @@
   };
 
   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
@@ -13793,7 +13799,7 @@
         align = 'start',
         views
       } = _ref3,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$c);
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$d);
     var {
       isOpen,
       //activeSubmenuId, setActiveSubmenuId, size,
@@ -13829,7 +13835,7 @@
         item,
         views
       } = _ref4,
-      props = _objectWithoutPropertiesLoose(_ref4, _excluded3$9);
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded3$a);
     var {
       activeSubmenuId,
       setActiveSubmenuId,
@@ -14142,7 +14148,7 @@
   };
 
   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,
@@ -14228,7 +14234,7 @@
         minWidth = '200px',
         maxWidth = '300px'
       } = _ref3,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$d);
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$e);
     var {
       isOpen,
       cancelCloseTimer,
@@ -15291,8 +15297,8 @@
   };
 
   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({
@@ -15390,7 +15396,7 @@
         children,
         views
       } = _ref3,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$e);
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$f);
     var {
       isExpanded
     } = useSidebarContext();
@@ -15408,7 +15414,7 @@
         children,
         views
       } = _ref4,
-      props = _objectWithoutPropertiesLoose(_ref4, _excluded3$a);
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded3$b);
     var {
       isExpanded
     } = useSidebarContext();
@@ -15966,8 +15972,8 @@
   };
 
   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", "autoSaveId", "views"];
   // Create context for the Resizable component
   var ResizableContext = /*#__PURE__*/React.createContext({
     orientation: 'horizontal',
@@ -16074,7 +16080,7 @@
         collapseTarget,
         views
       } = _ref3,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$f);
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$g);
     var {
       orientation,
       size,
@@ -16214,7 +16220,7 @@
         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,
@@ -16763,6 +16769,16 @@
   // Export the hook for component usage
   var useToast$1 = useToast;
 
+  // Default filter function defined outside the hook to avoid recreating it on each render
+  var defaultFilterFn = (value, item) => {
+    var _item$description, _item$keywords;
+    if (!value) return true;
+    var searchValue = value.toLowerCase();
+    var matchesName = item.name.toLowerCase().includes(searchValue);
+    var matchesDescription = ((_item$description = item.description) == null ? void 0 : _item$description.toLowerCase().includes(searchValue)) || false;
+    var matchesKeywords = ((_item$keywords = item.keywords) == null ? void 0 : _item$keywords.some(keyword => keyword.toLowerCase().includes(searchValue))) || false;
+    return matchesName || matchesDescription || matchesKeywords;
+  };
   var useCommandState = _ref => {
     var {
       open,
@@ -16771,46 +16787,36 @@
       commands = [],
       filter
     } = _ref;
-    // Combine commands from groups and flat list
-    var allCommands = React.useCallback(() => {
-      var groupCommands = groups.flatMap(group => group.commands);
-      return [...groupCommands, ...commands];
-    }, [groups, commands]);
     // State for search input
     var [search, setSearch] = React.useState('');
     // State for selected item index
     var [selectedIndex, setSelectedIndex] = React.useState(0);
     // Ref for the command list element
     var listRef = React.useRef(null);
-    // Default filter function
-    var defaultFilter = (value, item) => {
-      var _item$description, _item$keywords;
-      if (!value) return true;
-      var searchValue = value.toLowerCase();
-      var matchesName = item.name.toLowerCase().includes(searchValue);
-      var matchesDescription = ((_item$description = item.description) == null ? void 0 : _item$description.toLowerCase().includes(searchValue)) || false;
-      var matchesKeywords = ((_item$keywords = item.keywords) == null ? void 0 : _item$keywords.some(keyword => keyword.toLowerCase().includes(searchValue))) || false;
-      return matchesName || matchesDescription || matchesKeywords;
-    };
-    // Filter commands based on search
-    var filterCommands = React.useCallback(searchValue => {
-      var filterFn = filter || defaultFilter;
-      return allCommands().filter(item => filterFn(searchValue, item));
-    }, [allCommands, filter, defaultFilter]);
-    // Filtered commands based on search
-    var [filteredCommands, setFilteredCommands] = React.useState(allCommands());
-    // Filtered groups based on search
-    var filteredGroups = React.useCallback(() => {
+    // Use the provided filter or fall back to the default
+    var filterFn = React.useMemo(() => filter || defaultFilterFn, [filter]);
+    // Combine and memoize all commands from groups and flat list
+    var allCommands = React.useMemo(() => {
+      var groupCommands = groups.flatMap(group => group.commands);
+      return [...groupCommands, ...commands];
+    }, [groups, commands]);
+    // Filter and memoize commands based on search
+    var filteredCommands = React.useMemo(() => {
+      if (!search.trim()) return allCommands;
+      return allCommands.filter(item => filterFn(search, item));
+    }, [allCommands, search, filterFn]);
+    // Filter and memoize groups based on search
+    var filteredGroups = React.useMemo(() => {
       if (!search) return groups;
-      return groups.map(group => Object.assign({}, group, {
-        commands: group.commands.filter(command => (filter || defaultFilter)(search, command))
-      })).filter(group => group.commands.length > 0);
-    }, [groups, search, filter, defaultFilter]);
-    // Update filtered commands when search changes
+      var filterFn = filter || defaultFilterFn;
+      return groups.map(g => Object.assign({}, g, {
+        commands: g.commands.filter(c => filterFn(search, c))
+      })).filter(g => g.commands.length);
+    }, [groups, search, filter]);
+    // Reset selected index when filtered commands change
     React.useEffect(() => {
-      setFilteredCommands(filterCommands(search));
       setSelectedIndex(0);
-    }, [search, filterCommands]);
+    }, [filteredCommands.length]);
     // Handle keyboard navigation
     var handleKeyDown = React.useCallback(e => {
       if (!open) return;
@@ -16860,6 +16866,9 @@
     React.useEffect(() => {
       if (open) {
         setSelectedIndex(0);
+      } else {
+        // Clear search when closed
+        setSearch('');
       }
     }, [open]);
     return {
@@ -16868,7 +16877,7 @@
       selectedIndex,
       setSelectedIndex,
       filteredCommands,
-      filteredGroups: filteredGroups(),
+      filteredGroups,
       listRef
     };
   };
@@ -17011,8 +17020,8 @@
   };
 
   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"];
@@ -17074,7 +17083,7 @@
         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
@@ -17084,7 +17093,7 @@
         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
@@ -17137,26 +17146,21 @@
       } = _ref7,
       props = _objectWithoutPropertiesLoose(_ref7, _excluded6$3);
     if (!open) return null;
-    var handleItemSelect = item => {
-      if (!item.disabled) {
-        item.onSelect();
-        onOpenChange(false);
-        setSearch('');
-      }
-    };
-    var handleBackdropClick = e => {
-      if (e.target === e.currentTarget) {
-        onOpenChange(false);
-      }
-    };
-    var contextValue = {
+    var handleItemSelect = React__default.useCallback(item => {
+      if (item.disabled) return;
+      item.onSelect();
+      onOpenChange(false);
+      setSearch('');
+    }, [onOpenChange, setSearch]);
+    var handleBackdropClick = React__default.useCallback(e => e.target === e.currentTarget && onOpenChange(false), [onOpenChange]);
+    var contextValue = React__default.useMemo(() => ({
       search,
       setSearch,
       selectedIndex,
       setSelectedIndex,
       filteredCommands,
       onSelect: handleItemSelect
-    };
+    }), [search, selectedIndex, filteredCommands, handleItemSelect, setSearch, setSelectedIndex]);
     var hasGroups = groups.length > 0;
     // const hasCommands = commands.length > 0;
     var isEmpty = filteredCommands.length === 0;
@@ -17536,8 +17540,8 @@
   };
 
   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,
@@ -17607,7 +17611,7 @@
         children,
         views
       } = _ref3,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$h);
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$i);
     var {
       isOpen,
       contentRef,
@@ -17637,7 +17641,7 @@
         showArrow = true,
         views
       } = _ref4,
-      props = _objectWithoutPropertiesLoose(_ref4, _excluded3$d);
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded3$e);
     var {
       isOpen,
       // openTooltip,