@app-studio/web 0.8.26 → 0.8.27

package/dist/components/Layout/Vertical/Vertical.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { VerticalProps } from './Vertical.props';
-declare const Vertical: React.ForwardRefExoticComponent<Pick<VerticalProps, string | number> & React.RefAttributes<HTMLDivElement>>;
+declare const Vertical: React.ForwardRefExoticComponent<Pick<VerticalProps, string | number> & React.RefAttributes<HTMLElement>>;
 export { Vertical };
 export type { VerticalProps };

package/dist/web.cjs.development.js

@@ -173,16 +173,16 @@ var Text = TextComponent;
 var _excluded$1 = ["justifyContent", "isReversed"];
 var Vertical = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   var {
+      // Sets a default alignment for content within the Vertical container to 'flex-start'
       justifyContent = 'flex-start',
+      // Determines the direction in which the Vertical elements are stacked, default not reversed
       isReversed = false
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-  return /*#__PURE__*/React__default.createElement("div", Object.assign({
-    style: {
-      display: 'flex',
-      justifyContent: justifyContent,
-      flexDirection: isReversed ? 'column-reverse' : 'column'
-    }
+  return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    display: "flex",
+    justifyContent: justifyContent,
+    flexDirection: isReversed ? 'column-reverse' : 'column'
   }, props, {
     ref: ref
   }));
@@ -208,20 +208,16 @@ var Horizontal = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
 });
 Horizontal.displayName = 'Horizontal';
 
-var _excluded$3 = ["isReversed"];
-var Center = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
-  var props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
-  return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center"
-  }, props, {
-    ref: ref
-  }));
-});
+var Center = /*#__PURE__*/React__default.forwardRef((props, ref) => (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center"
+}, props, {
+  ref: ref
+}))));
 Center.displayName = 'Center';
 
-var _excluded$4 = ["size", "color", "filled", "strokeWidth"],
+var _excluded$3 = ["size", "color", "filled", "strokeWidth"],
   _excluded2 = ["size", "color", "filled", "strokeWidth"],
   _excluded3 = ["size", "color", "filled", "strokeWidth"],
   _excluded4 = ["size", "color", "filled", "strokeWidth"],
@@ -294,7 +290,7 @@ var ChevronIcon = _ref2 => {
       filled = false,
       strokeWidth = 1
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$4);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$3);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
@@ -1670,7 +1666,7 @@ var AlertComponent = _ref => {
 // Exporting the AlertComponent as 'Alert' for use in other parts of the application.
 var Alert = AlertComponent;
 
-var _excluded$5 = ["ratio", "children"];
+var _excluded$4 = ["ratio", "children"];
 // Declaration of a functional component named AspectRatioView.
 var AspectRatioView = _ref => {
   var {
@@ -1680,7 +1676,7 @@ var AspectRatioView = _ref => {
       children
       // Spread the rest of the props to inherit additional properties.
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   return /*#__PURE__*/React__default.createElement(Center, Object.assign({
     width: '100%',
     position: "relative",
@@ -1696,14 +1692,14 @@ var AspectRatioView = _ref => {
   }, children));
 };
 
-var _excluded$6 = ["ratio", "children"];
+var _excluded$5 = ["ratio", "children"];
 // Declaration of the AspectRatioComponent functional component with destructured props.
 var AspectRatioComponent = _ref => {
   var {
       ratio,
       children
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   // Beginning of the return statement in the functional component.
   return /*#__PURE__*/React__default.createElement(AspectRatioView, Object.assign({
     ratio: ratio
@@ -1973,7 +1969,7 @@ var IconSizes = {
   '6xl': 64
 };
 
-var _excluded$7 = ["children", "href", "iconSize", "underline", "isHovered", "isExternal", "styles", "setIsHovered"];
+var _excluded$6 = ["children", "href", "iconSize", "underline", "isHovered", "isExternal", "styles", "setIsHovered"];
 // Component definition for 'LinkView', a functional component with props defined by 'LinkViewProps'.
 var LinkView = _ref => {
   var {
@@ -1996,7 +1992,7 @@ var LinkView = _ref => {
       // Setter function for the hover state, noop function provided by default.
       setIsHovered = () => {}
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
   // Function to handle mouse enter/leave events to toggle hover state.
   var handleHover = () => {
     if (underline === 'hover') setIsHovered(true);
@@ -2154,7 +2150,7 @@ var DefaultSpeeds = {
   slow: 300
 };
 
-var _excluded$8 = ["size", "speed", "color"],
+var _excluded$7 = ["size", "speed", "color"],
   _excluded2$1 = ["size", "speed", "color"],
   _excluded3$1 = ["size", "speed", "color"],
   _excluded4$1 = ["size", "children", "textColor", "loaderColor", "type", "speed", "textPosition"];
@@ -2164,7 +2160,7 @@ var DefaultSpinner = _ref => {
       speed = 'normal',
       color = 'theme.loading'
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
   var theme = appStudio.useTheme();
   var colorStyle = theme.getColor(color);
   var sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
@@ -2317,7 +2313,7 @@ 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$9 = ["icon", "shadow", "children", "ariaLabel", "externalHref", "isAuto", "isFilled", "isIconRounded", "isLoading", "isDisabled", "size", "variant", "iconPosition", "colorScheme", "shape", "onClick", "loaderProps", "loaderPosition", "effect", "isHovered", "setIsHovered"];
+var _excluded$8 = ["icon", "shadow", "children", "ariaLabel", "externalHref", "isAuto", "isFilled", "isIconRounded", "isLoading", "isDisabled", "size", "variant", "iconPosition", "colorScheme", "shape", "onClick", "loaderProps", "loaderPosition", "effect", "isHovered", "setIsHovered"];
 var contrast = /*#__PURE__*/require('contrast');
 var ButtonView = _ref => {
   var _props$onClick;
@@ -2353,7 +2349,7 @@ var ButtonView = _ref => {
       setIsHovered = () => {}
       // Defines CSS properties for 'outline' variant of the button with conditional styles based on reverse state.
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
   var {
     getColor
   } = appStudio.useTheme();
@@ -2468,14 +2464,14 @@ var ButtonComponent = props => {
 };
 var Button = ButtonComponent;
 
-var _excluded$a = ["src", "color"],
+var _excluded$9 = ["src", "color"],
   _excluded2$2 = ["path"];
 var FileSVG = _ref => {
   var {
       src,
       color
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
   var {
     getColor
   } = appStudio.useTheme();
@@ -2544,7 +2540,7 @@ var useItemState = () => {
   };
 };
 
-var _excluded$b = ["children", "styles"];
+var _excluded$a = ["children", "styles"];
 var HelperText = _ref => {
   var {
       children,
@@ -2552,7 +2548,7 @@ var HelperText = _ref => {
         helperText: {}
       }
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   return /*#__PURE__*/React__default.createElement(Text, Object.assign({
     size: "xs",
     marginVertical: 0,
@@ -2561,7 +2557,7 @@ var HelperText = _ref => {
   }, styles['helperText'], props), children);
 };
 
-var _excluded$c = ["children", "helperText", "error", "styles"];
+var _excluded$b = ["children", "helperText", "error", "styles"];
 var FieldContainer = _ref => {
   var {
       children,
@@ -2569,7 +2565,7 @@ var FieldContainer = _ref => {
       error = false,
       styles
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
   return /*#__PURE__*/React__default.createElement(Vertical, Object.assign({
     gap: 5,
     position: "relative"
@@ -2628,7 +2624,7 @@ var PaddingWithoutLabel = {
   paddingRight: 36
 };
 
-var _excluded$d = ["label", "shadow", "children", "value", "size", "shape", "variant", "error", "isWithLabel", "isFocused", "isHovered", "isDisabled", "isReadOnly", "colorScheme", "styles"];
+var _excluded$c = ["label", "shadow", "children", "value", "size", "shape", "variant", "error", "isWithLabel", "isFocused", "isHovered", "isDisabled", "isReadOnly", "colorScheme", "styles"];
 var FieldContent = _ref => {
   var {
       shadow,
@@ -2647,7 +2643,7 @@ var FieldContent = _ref => {
         pickerBox: {}
       }
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
   var isInteractive = (isHovered || isFocused) && !isDisabled;
   var color = error ? 'error' : isInteractive ? colorScheme : 'midgray';
   return /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({
@@ -2668,12 +2664,12 @@ var FieldContent = _ref => {
   }, isWithLabel ? PadddingWithLabel : PaddingWithoutLabel, shadow, Shapes[shape], InputVariants[variant], styles['box'], props), children);
 };
 
-var _excluded$e = ["children"];
+var _excluded$d = ["children"];
 var FieldIcons = _ref => {
   var {
       children
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
   return /*#__PURE__*/React__default.createElement(Center, Object.assign({
     gap: 10,
     right: 16,
@@ -2725,7 +2721,7 @@ var HeadingSizes$1 = {
   }
 };
 
-var _excluded$f = ["children", "heading", "isItalic", "isUnderlined", "isStriked", "weight", "size"];
+var _excluded$e = ["children", "heading", "isItalic", "isUnderlined", "isStriked", "weight", "size"];
 var LabelView = _ref => {
   var {
       children,
@@ -2741,7 +2737,7 @@ var LabelView = _ref => {
       size = 'sm'
       // The fontSize prop for the Element is determined by the 'size' prop passed to LabelView.
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
   // The fontStyle prop toggles between 'italic' and 'normal' based on the 'isItalic' boolean prop.
   var headingStyles = heading ? HeadingSizes$1[heading] : {};
   // fontWeight is derived from the Typography module, ensuring consistent font weighting across the app.
@@ -2773,7 +2769,7 @@ React__default.createElement(LabelView, Object.assign({}, props))
 var Label = LabelComponent;
 // Export the 'LabelComponent' as 'Label' to be reused throughout the project.
 
-var _excluded$g = ["children", "size", "error", "color", "styles", "helperText"];
+var _excluded$f = ["children", "size", "error", "color", "styles", "helperText"];
 var FieldLabel = _ref => {
   var {
       children,
@@ -2784,7 +2780,7 @@ var FieldLabel = _ref => {
         label: {}
       }
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
   return /*#__PURE__*/React__default.createElement(Label, Object.assign({
     top: 6,
     zIndex: 1000,
@@ -2797,12 +2793,12 @@ var FieldLabel = _ref => {
   }, styles['label'], props), children);
 };
 
-var _excluded$h = ["children"];
+var _excluded$g = ["children"];
 var FieldWrapper = _ref => {
   var {
       children
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
   return /*#__PURE__*/React__default.createElement(Vertical, Object.assign({
     width: "100%"
   }, props), children);
@@ -2818,7 +2814,7 @@ var IconSizes$2 = {
   xl: 16
 };
 
-var _excluded$i = ["isHovered", "setIsHovered", "option", "size", "callback", "style"],
+var _excluded$h = ["isHovered", "setIsHovered", "option", "size", "callback", "style"],
   _excluded2$3 = ["id", "name", "value", "onChange", "isMulti", "isDisabled", "isReadOnly", "options"],
   _excluded3$2 = ["option", "size", "removeOption"],
   _excluded4$2 = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isMulti", "isFocused", "isHovered", "isDisabled", "isReadOnly", "options", "shadow", "size", "colorScheme", "shape", "variant", "styles", "onChange", "setHide", "setValue", "setIsHovered", "setIsFocused", "setHighlightedIndex", "highlightedIndex"];
@@ -2832,7 +2828,7 @@ var Item = _ref => {
       callback = () => {},
       style
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
   // Handles the click event on an option by invoking the callback with the selected option's value.
   var handleOptionClick = option => callback(option);
   // Toggles the hover state on the item.
@@ -3294,7 +3290,7 @@ var SliderPadding = {
   }
 };
 
-var _excluded$j = ["id", "name", "label", "inActiveChild", "activeChild", "labelPosition", "shadow", "size", "colorScheme", "value", "isHovered", "isDisabled", "isReadOnly", "on", "setOn", "onChange", "setValue", "setIsHovered", "helperText", "styles"];
+var _excluded$i = ["id", "name", "label", "inActiveChild", "activeChild", "labelPosition", "shadow", "size", "colorScheme", "value", "isHovered", "isDisabled", "isReadOnly", "on", "setOn", "onChange", "setValue", "setIsHovered", "helperText", "styles"];
 var SwitchContent = props => /*#__PURE__*/React__default.createElement(appStudio.Input, Object.assign({
   type: "checkbox"
 }, props));
@@ -3324,7 +3320,7 @@ var SwitchView = _ref => {
         label: {}
       }
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
   var handleToggle = event => {
     if (!isReadOnly) {
       setValue(!value);
@@ -3414,7 +3410,7 @@ var useTextAreaState = _ref => {
   // Export of the useTextAreaState hook for external usage.
 };
 
-var _excluded$k = ["id", "name", "hint", "error", "value", "label", "shadow", "helperText", "placeholder", "size", "shape", "variant", "colorScheme", "isHovered", "isFocused", "isEditable", "isReadOnly", "isDisabled", "isAutoFocus", "isMultiline", "maxRows", "maxCols", "onBlur", "onChange", "onFocus", "onChangeText", "setHint", "setValue", "setIsFocused", "setIsHovered", "styles"];
+var _excluded$j = ["id", "name", "hint", "error", "value", "label", "shadow", "helperText", "placeholder", "size", "shape", "variant", "colorScheme", "isHovered", "isFocused", "isEditable", "isReadOnly", "isDisabled", "isAutoFocus", "isMultiline", "maxRows", "maxCols", "onBlur", "onChange", "onFocus", "onChangeText", "setHint", "setValue", "setIsFocused", "setIsHovered", "styles"];
 var TextAreaView = _ref => {
   var {
       id,
@@ -3454,7 +3450,7 @@ var TextAreaView = _ref => {
         field: {}
       }
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
   var isWithLabel = !!(isFocused && label);
   var fieldStyles = Object.assign({
     margin: 0,
@@ -3584,7 +3580,7 @@ var useTextFieldState = _ref => {
   };
 };
 
-var _excluded$l = ["id", "name", "label", "hint", "value", "onChange", "leftChild", "rightChild", "helperText", "placeholder", "onChangeText", "shadow", "styles", "size", "shape", "variant", "colorScheme", "error", "isFocused", "isHovered", "isDisabled", "isReadOnly", "isClearable", "isAutoFocus", "setHint", "setIsFocused", "setIsHovered", "setValue", "onClick", "onFocus", "onBlur"];
+var _excluded$k = ["id", "name", "label", "hint", "value", "onChange", "leftChild", "rightChild", "helperText", "placeholder", "onChangeText", "shadow", "styles", "size", "shape", "variant", "colorScheme", "error", "isFocused", "isHovered", "isDisabled", "isReadOnly", "isClearable", "isAutoFocus", "setHint", "setIsFocused", "setIsHovered", "setValue", "onClick", "onFocus", "onBlur"];
 var TextFieldInput = props => /*#__PURE__*/React__default.createElement(appStudio.Input, Object.assign({
   type: "text"
 }, props));
@@ -3627,7 +3623,7 @@ var TextFieldView = _ref => {
       onFocus,
       onBlur = () => {}
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
   var {
     getColor
   } = appStudio.useTheme();
@@ -3808,7 +3804,7 @@ var IconSizes$3 = {
   '6xl': 60
 };
 
-var _excluded$m = ["id", "icon", "name", "label", "isChecked", "onChange", "onValueChange", "shadow", "labelPosition", "size", "colorScheme", "error", "isSelected", "isHovered", "isDisabled", "isReadOnly", "isIndeterminate", "defaultIsSelected", "setIsSelected", "setIsHovered", "styles", "infoText", "helperText"];
+var _excluded$l = ["id", "icon", "name", "label", "isChecked", "onChange", "onValueChange", "shadow", "labelPosition", "size", "colorScheme", "error", "isSelected", "isHovered", "isDisabled", "isReadOnly", "isIndeterminate", "defaultIsSelected", "setIsSelected", "setIsHovered", "styles", "infoText", "helperText"];
 var CheckboxView = _ref => {
   var {
       id,
@@ -3836,7 +3832,7 @@ var CheckboxView = _ref => {
       },
       infoText
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
   var handleHover = () => setIsHovered(!isHovered);
   var handleChange = () => {
     if (!isReadOnly && !isDisabled) {
@@ -5395,11 +5391,11 @@ var IconSizes$4 = {
   xl: 16
 };
 
-var _excluded$n = ["size"],
+var _excluded$m = ["size"],
   _excluded2$4 = ["size"],
   _excluded3$3 = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isHovered", "isFocused", "isAutoFocus", "isDisabled", "isReadOnly", "shadow", "newOptions", "size", "variant", "shape", "colorScheme", "onChange", "onBlur", "setHide", "setNewOptions", "setIsHovered", "setIsFocused", "setValue", "styles"];
 var CountryList = _ref => {
-  var props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
+  var props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
   return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
     as: "ul"
   }, props));
@@ -5638,7 +5634,7 @@ var useDatePickerState = () => {
   };
 };
 
-var _excluded$o = ["id", "icon", "name", "label", "date", "children", "helperText", "shadow", "size", "variant", "shape", "colorScheme", "styles", "error", "isHovered", "isFocused", "isDisabled", "isReadOnly", "setDate", "setIsFocused", "setIsHovered", "onChange", "onChangeText"];
+var _excluded$n = ["id", "icon", "name", "label", "date", "children", "helperText", "shadow", "size", "variant", "shape", "colorScheme", "styles", "error", "isHovered", "isFocused", "isDisabled", "isReadOnly", "setDate", "setIsFocused", "setIsHovered", "onChange", "onChangeText"];
 var DatePickerContent = props => /*#__PURE__*/React__default.createElement(appStudio.Input, Object.assign({
   type: "date"
 }, props));
@@ -5672,7 +5668,7 @@ var DatePickerView = _ref => {
       onChange,
       onChangeText
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
   var isWithLabel = !!(isFocused && label);
   var handleHover = () => setIsHovered(!isHovered);
   var handleFocus = () => setIsFocused(true);
@@ -5760,7 +5756,7 @@ var usePasswordState = props => {
   }, props, textFieldStates);
 };
 
-var _excluded$p = ["visibleIcon", "hiddenIcon"],
+var _excluded$o = ["visibleIcon", "hiddenIcon"],
   _excluded2$5 = ["isVisible", "setIsVisible"];
 var PasswordComponent = _ref => {
   var {
@@ -5771,7 +5767,7 @@ var PasswordComponent = _ref => {
         size: 14
       })
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
   var _usePasswordState = usePasswordState(props),
     {
       isVisible,
@@ -5825,7 +5821,7 @@ var useComboBoxState = (items, placeholder, searchPlaceholder) => {
   };
 };
 
-var _excluded$q = ["placeholder", "items", "showTick", "onSelect", "searchEnabled", "left", "right", "label", "filteredItems", "setSelectedItem", "selectedItem", "highlightedIndex", "setHighlightedIndex", "searchQuery", "setSearchQuery", "setFilteredItems", "styles", "isDropdownVisible", "setIsDropdownVisible"];
+var _excluded$p = ["placeholder", "items", "showTick", "onSelect", "searchEnabled", "left", "right", "label", "filteredItems", "setSelectedItem", "selectedItem", "highlightedIndex", "setHighlightedIndex", "searchQuery", "setSearchQuery", "setFilteredItems", "styles", "isDropdownVisible", "setIsDropdownVisible"];
 // Defines the functional component 'ComboBoxView' with destructured props.
 var ComboBoxView = _ref => {
   var {
@@ -5850,7 +5846,7 @@ var ComboBoxView = _ref => {
       setIsDropdownVisible
       // Collects all further props not destructured explicitly.
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
   // Sets up an effect to handle clicking outside the dropdown to close it.
   React.useEffect(() => {
     var handleClickOutside = event => {
@@ -5961,7 +5957,7 @@ var ComboBoxView = _ref => {
   }))))))))))));
 };
 
-var _excluded$r = ["id", "name", "items", "placeholder", "searchPlaceholder"];
+var _excluded$q = ["id", "name", "items", "placeholder", "searchPlaceholder"];
 // Defines the ComboBoxComponent functional component with ComboBoxProps
 var ComboBoxComponent = _ref => {
   var {
@@ -5977,7 +5973,7 @@ var ComboBoxComponent = _ref => {
       searchPlaceholder
       // Destructures the rest of the props not explicitly defined
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
   // Initializes ComboBox state using custom hook with items and placeholders
   var state = useComboBoxState(items, placeholder, searchPlaceholder);
   return (
@@ -5993,7 +5989,7 @@ var ComboBoxComponent = _ref => {
 // Exports the ComboBoxComponent as ComboBox
 var ComboBox = ComboBoxComponent;
 
-var _excluded$s = ["children", "autoFocus", "initFocus", "onChange"];
+var _excluded$r = ["children", "autoFocus", "initFocus", "onChange"];
 var FocusContext = /*#__PURE__*/React.createContext({
   active: false,
   focusNextInput: () => {},
@@ -6009,7 +6005,7 @@ var FormikForm = _ref => {
       initFocus,
       onChange = () => {}
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
   var formik$1 = formik.useFormikContext();
   React.useEffect(() => {
     onChange(formik$1.values);
@@ -6057,7 +6053,7 @@ var FormikForm = _ref => {
   }, /*#__PURE__*/React__default.createElement(appStudio.Form, Object.assign({}, props), children));
 };
 
-var _excluded$t = ["name", "type"];
+var _excluded$s = ["name", "type"];
 var getInputTypeProps = type => {
   switch (type) {
     case 'email':
@@ -6096,7 +6092,7 @@ var useFormikInput = _ref => {
       name,
       type
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
   var focus = useFormFocus();
   var {
     touched,
@@ -6140,13 +6136,13 @@ var useFormikInput = _ref => {
   } : {});
 };
 
-var _excluded$u = ["value"];
+var _excluded$t = ["value"];
 var CheckboxComponent$1 = props => {
   var _useFormikInput = useFormikInput(props),
     {
       value
     } = _useFormikInput,
-    formProps = _objectWithoutPropertiesLoose(_useFormikInput, _excluded$u);
+    formProps = _objectWithoutPropertiesLoose(_useFormikInput, _excluded$t);
   formProps.isChecked = value;
   var checkboxStates = useCheckboxState(props);
   return /*#__PURE__*/React__default.createElement(CheckboxView, Object.assign({}, checkboxStates, formProps));
@@ -6204,11 +6200,11 @@ var TextAreaComponent$1 = props => {
  */
 var FormikTextArea = TextAreaComponent$1;
 
-var _excluded$v = ["value"];
+var _excluded$u = ["value"];
 var TextFieldComponent$1 = props => {
   var formProps = useFormikInput(props);
   var _useTextFieldState = useTextFieldState(props),
-    textFieldStates = _objectWithoutPropertiesLoose(_useTextFieldState, _excluded$v);
+    textFieldStates = _objectWithoutPropertiesLoose(_useTextFieldState, _excluded$u);
   return /*#__PURE__*/React__default.createElement(TextFieldView, Object.assign({}, textFieldStates, formProps));
 };
 /**
@@ -6216,7 +6212,7 @@ var TextFieldComponent$1 = props => {
  */
 var FormikTextField = TextFieldComponent$1;
 
-var _excluded$w = ["visibleIcon", "hiddenIcon"],
+var _excluded$v = ["visibleIcon", "hiddenIcon"],
   _excluded2$6 = ["isVisible", "setIsVisible"];
 var PasswordComponent$1 = _ref => {
   var {
@@ -6227,7 +6223,7 @@ var PasswordComponent$1 = _ref => {
         size: 14
       })
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$w);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
   var formProps = useFormikInput(props);
   var _usePasswordState = usePasswordState(formProps),
     {
@@ -6252,14 +6248,14 @@ var PasswordComponent$1 = _ref => {
  */
 var FormikPassword = PasswordComponent$1;
 
-var _excluded$x = ["items", "placeholder", "searchPlaceholder"];
+var _excluded$w = ["items", "placeholder", "searchPlaceholder"];
 var ComboBoxComponent$1 = _ref => {
   var {
       items,
       placeholder,
       searchPlaceholder
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$w);
   var formProps = useFormikInput(props);
   var ComboBoxStates = useComboBoxState(items, placeholder, searchPlaceholder);
   // Ensure the onChange function from formProps is being called when an item is selected
@@ -6628,7 +6624,7 @@ var HeaderIconSizes = {
   xl: 28
 };
 
-var _excluded$y = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position"],
+var _excluded$x = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position"],
   _excluded2$7 = ["children", "shadow", "isFullScreen", "shape"],
   _excluded3$4 = ["children", "buttonColor", "iconSize", "buttonPosition"],
   _excluded4$3 = ["children"],
@@ -6642,7 +6638,7 @@ var ModalOverlay = _ref => {
       onClose = () => {},
       position = 'center'
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
   var handleClick = () => {
     if (!isClosePrevented) onClose();
   };
@@ -7031,7 +7027,7 @@ var ToggleShapes = {
   pillShaped: 24
 };
 
-var _excluded$z = ["children", "shape", "colorScheme", "variant", "isHovered", "setIsHovered", "isDisabled", "isToggle", "setIsToggled", "onToggle"];
+var _excluded$y = ["children", "shape", "colorScheme", "variant", "isHovered", "setIsHovered", "isDisabled", "isToggle", "setIsToggled", "onToggle"];
 var ToggleView = _ref => {
   var {
       children,
@@ -7045,7 +7041,7 @@ var ToggleView = _ref => {
       setIsToggled,
       onToggle
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
   var toggleColor = !isDisabled ? colorScheme : 'theme.disabled';
   var isActive = !!(isToggle || isHovered);
   var ToggleVariants = {
@@ -7087,7 +7083,7 @@ var ToggleView = _ref => {
   }, ToggleVariants[variant], props), children);
 };
 
-var _excluded$A = ["children", "shape", "colorScheme", "variant", "isDisabled", "isToggled", "onToggle"];
+var _excluded$z = ["children", "shape", "colorScheme", "variant", "isDisabled", "isToggled", "onToggle"];
 // Destructuring properties from ToggleProps to be used within the ToggleComponent.
 var ToggleComponent = _ref => {
   var {
@@ -7100,7 +7096,7 @@ var ToggleComponent = _ref => {
       isToggled = false,
       onToggle
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
   // Initializing toggle state and set state functions using the custom hook useToggleState.
   var {
     isHovered,