@app-studio/web 0.8.35 → 0.8.37

package/dist/web.umd.development.js

@@ -158,7 +158,7 @@
   var Text = TextComponent;
 
   var _excluded$1 = ["justifyContent", "isReversed"];
-  var Vertical = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+  var VerticalBase = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     var {
         // Sets a default alignment for content within the Vertical container to 'flex-start'
         justifyContent = 'flex-start',
@@ -174,10 +174,11 @@
       ref: ref
     }));
   });
-  Vertical.displayName = 'Vertical';
+  VerticalBase.displayName = 'Vertical';
+  var Vertical = VerticalBase;
 
   var _excluded$2 = ["justifyContent", "isReversed"];
-  var Horizontal = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+  var HorizontalBase = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     var {
         // Sets a default alignment for content within the Horizontal container to 'flex-start'
         justifyContent = 'flex-start',
@@ -193,18 +194,24 @@
       ref: ref
     }));
   });
-  Horizontal.displayName = 'Horizontal';
+  HorizontalBase.displayName = 'Horizontal';
+  var Horizontal = HorizontalBase;
 
-  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$3 = ["justifyContent", "isReversed"];
+  var CenterBase = /*#__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
+    }));
+  });
+  CenterBase.displayName = 'Center';
+  var Center = CenterBase;
 
-  var _excluded$3 = ["size", "color", "transform", "orientation", "children"],
+  var _excluded$4 = ["size", "color", "transform", "orientation", "children"],
     _excluded2 = ["size", "color", "filled", "strokeWidth"],
     _excluded3 = ["size", "color", "filled", "strokeWidth"],
     _excluded4 = ["size", "color", "filled", "strokeWidth"],
@@ -267,7 +274,7 @@
         orientation,
         children
       } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
     return /*#__PURE__*/React__default.createElement(Center, Object.assign({
       size: size,
       lineHeight: size,
@@ -1721,7 +1728,7 @@
   // Exporting the AlertComponent as 'Alert' for use in other parts of the application.
   var Alert = AlertComponent;
 
-  var _excluded$4 = ["ratio", "children"];
+  var _excluded$5 = ["ratio", "children"];
   // Declaration of a functional component named AspectRatioView.
   var AspectRatioView = _ref => {
     var {
@@ -1731,7 +1738,7 @@
         children
         // Spread the rest of the props to inherit additional properties.
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
     return /*#__PURE__*/React__default.createElement(Center, Object.assign({
       width: '100%',
       position: "relative",
@@ -1747,14 +1754,14 @@
     }, children));
   };
 
-  var _excluded$5 = ["ratio", "children"];
+  var _excluded$6 = ["ratio", "children"];
   // Declaration of the AspectRatioComponent functional component with destructured props.
   var AspectRatioComponent = _ref => {
     var {
         ratio,
         children
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
     // Beginning of the return statement in the functional component.
     return /*#__PURE__*/React__default.createElement(AspectRatioView, Object.assign({
       ratio: ratio
@@ -2024,7 +2031,7 @@
     '6xl': 64
   };
 
-  var _excluded$6 = ["children", "to", "iconSize", "underline", "isHovered", "isExternal", "styles", "setIsHovered"];
+  var _excluded$7 = ["children", "to", "iconSize", "underline", "isHovered", "isExternal", "styles", "setIsHovered"];
   // Component definition for 'LinkView', a functional component with props defined by 'LinkViewProps'.
   var LinkView = _ref => {
     var {
@@ -2047,7 +2054,7 @@
         // Setter function for the hover state, noop function provided by default.
         setIsHovered = () => {}
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
     // Function to handle mouse enter/leave events to toggle hover state.
     var handleHover = () => {
       if (underline === 'hover') setIsHovered(true);
@@ -2204,7 +2211,7 @@
     slow: 300
   };
 
-  var _excluded$7 = ["size", "speed", "color"],
+  var _excluded$8 = ["size", "speed", "color"],
     _excluded2$1 = ["size", "speed", "color"],
     _excluded3$1 = ["size", "speed", "color"],
     _excluded4$1 = ["size", "children", "textColor", "loaderColor", "type", "speed", "textPosition"];
@@ -2214,7 +2221,7 @@
         speed = 'normal',
         color = 'theme.loading'
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
     var theme = appStudio.useTheme();
     var colorStyle = theme.getColor(color);
     var sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
@@ -2367,7 +2374,7 @@
   // Exports the LoaderComponent as Loader, making it available for use in other parts of the application.
   var Loader = LoaderComponent;
 
-  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 _excluded$9 = ["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;
@@ -2403,7 +2410,7 @@
         setIsHovered = () => {}
         // Defines CSS properties for 'outline' variant of the button with conditional styles based on reverse state.
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
     var {
       getColor
     } = appStudio.useTheme();
@@ -2518,14 +2525,14 @@
   };
   var Button = ButtonComponent;
 
-  var _excluded$9 = ["src", "color"],
+  var _excluded$a = ["src", "color"],
     _excluded2$2 = ["path"];
   var FileSVG = _ref => {
     var {
         src,
         color
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
     var {
       getColor
     } = appStudio.useTheme();
@@ -2594,7 +2601,7 @@
     };
   };
 
-  var _excluded$a = ["children", "styles"];
+  var _excluded$b = ["children", "styles"];
   var HelperText = _ref => {
     var {
         children,
@@ -2602,7 +2609,7 @@
           helperText: {}
         }
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
     return /*#__PURE__*/React__default.createElement(Text, Object.assign({
       size: "xs",
       marginVertical: 0,
@@ -2611,7 +2618,7 @@
     }, styles['helperText'], props), children);
   };
 
-  var _excluded$b = ["children", "helperText", "error", "styles"];
+  var _excluded$c = ["children", "helperText", "error", "styles"];
   var FieldContainer = _ref => {
     var {
         children,
@@ -2619,7 +2626,7 @@
         error = false,
         styles
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
     return /*#__PURE__*/React__default.createElement(Vertical, Object.assign({
       gap: 5,
       position: "relative"
@@ -2678,7 +2685,7 @@
     paddingRight: 36
   };
 
-  var _excluded$c = ["label", "shadow", "children", "value", "size", "shape", "variant", "error", "isWithLabel", "isFocused", "isHovered", "isDisabled", "isReadOnly", "colorScheme", "styles"];
+  var _excluded$d = ["label", "shadow", "children", "value", "size", "shape", "variant", "error", "isWithLabel", "isFocused", "isHovered", "isDisabled", "isReadOnly", "colorScheme", "styles"];
   var FieldContent = _ref => {
     var {
         shadow,
@@ -2697,7 +2704,7 @@
           pickerBox: {}
         }
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
     var isInteractive = (isHovered || isFocused) && !isDisabled;
     var color = error ? 'error' : isInteractive ? colorScheme : 'midgray';
     return /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({
@@ -2718,12 +2725,12 @@
     }, isWithLabel ? PadddingWithLabel : PaddingWithoutLabel, shadow, Shapes[shape], InputVariants[variant], styles['box'], props), children);
   };
 
-  var _excluded$d = ["children"];
+  var _excluded$e = ["children"];
   var FieldIcons = _ref => {
     var {
         children
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
     return /*#__PURE__*/React__default.createElement(Center, Object.assign({
       gap: 10,
       right: 16,
@@ -2775,7 +2782,7 @@
     }
   };
 
-  var _excluded$e = ["children", "heading", "isItalic", "isUnderlined", "isStriked", "weight", "size"];
+  var _excluded$f = ["children", "heading", "isItalic", "isUnderlined", "isStriked", "weight", "size"];
   var LabelView = _ref => {
     var {
         children,
@@ -2791,7 +2798,7 @@
         size = 'sm'
         // The fontSize prop for the Element is determined by the 'size' prop passed to LabelView.
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
     // 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.
@@ -2823,7 +2830,7 @@
   var Label = LabelComponent;
   // Export the 'LabelComponent' as 'Label' to be reused throughout the project.
 
-  var _excluded$f = ["children", "size", "error", "color", "styles", "helperText"];
+  var _excluded$g = ["children", "size", "error", "color", "styles", "helperText"];
   var FieldLabel = _ref => {
     var {
         children,
@@ -2834,7 +2841,7 @@
           label: {}
         }
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
     return /*#__PURE__*/React__default.createElement(Label, Object.assign({
       top: 6,
       zIndex: 1000,
@@ -2847,12 +2854,12 @@
     }, styles['label'], props), children);
   };
 
-  var _excluded$g = ["children"];
+  var _excluded$h = ["children"];
   var FieldWrapper = _ref => {
     var {
         children
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
     return /*#__PURE__*/React__default.createElement(Vertical, Object.assign({
       width: "100%"
     }, props), children);
@@ -2868,7 +2875,7 @@
     xl: 16
   };
 
-  var _excluded$h = ["isHovered", "setIsHovered", "option", "size", "callback", "style"],
+  var _excluded$i = ["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"];
@@ -2882,7 +2889,7 @@
         callback = () => {},
         style
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
     // 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.
@@ -3344,7 +3351,7 @@
     }
   };
 
-  var _excluded$i = ["id", "name", "label", "inActiveChild", "activeChild", "labelPosition", "shadow", "size", "colorScheme", "value", "isHovered", "isDisabled", "isReadOnly", "on", "setOn", "onChange", "setValue", "setIsHovered", "helperText", "styles"];
+  var _excluded$j = ["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));
@@ -3374,7 +3381,7 @@
           label: {}
         }
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
     var handleToggle = event => {
       if (!isReadOnly) {
         setValue(!value);
@@ -3464,7 +3471,7 @@
     // Export of the useTextAreaState hook for external usage.
   };
 
-  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 _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 TextAreaView = _ref => {
     var {
         id,
@@ -3504,7 +3511,7 @@
           field: {}
         }
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
     var isWithLabel = !!(isFocused && label);
     var fieldStyles = Object.assign({
       margin: 0,
@@ -3634,7 +3641,7 @@
     };
   };
 
-  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 _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 TextFieldInput = props => /*#__PURE__*/React__default.createElement(appStudio.Input, Object.assign({
     type: "text"
   }, props));
@@ -3677,7 +3684,7 @@
         onFocus,
         onBlur = () => {}
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
     var {
       getColor
     } = appStudio.useTheme();
@@ -3858,7 +3865,7 @@
     '6xl': 60
   };
 
-  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 _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 CheckboxView = _ref => {
     var {
         id,
@@ -3886,7 +3893,7 @@
         },
         infoText
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
     var handleHover = () => setIsHovered(!isHovered);
     var handleChange = () => {
       if (!isReadOnly && !isDisabled) {
@@ -5445,11 +5452,11 @@
     xl: 16
   };
 
-  var _excluded$m = ["size"],
+  var _excluded$n = ["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$m);
+    var props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
     return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
       as: "ul"
     }, props));
@@ -5688,7 +5695,7 @@
     };
   };
 
-  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 _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 DatePickerContent = props => /*#__PURE__*/React__default.createElement(appStudio.Input, Object.assign({
     type: "date"
   }, props));
@@ -5722,7 +5729,7 @@
         onChange,
         onChangeText
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
     var isWithLabel = !!(isFocused && label);
     var handleHover = () => setIsHovered(!isHovered);
     var handleFocus = () => setIsFocused(true);
@@ -5810,7 +5817,7 @@
     }, props, textFieldStates);
   };
 
-  var _excluded$o = ["visibleIcon", "hiddenIcon"],
+  var _excluded$p = ["visibleIcon", "hiddenIcon"],
     _excluded2$5 = ["isVisible", "setIsVisible"];
   var PasswordComponent = _ref => {
     var {
@@ -5821,7 +5828,7 @@
           size: 14
         })
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
     var _usePasswordState = usePasswordState(props),
       {
         isVisible,
@@ -5875,7 +5882,7 @@
     };
   };
 
-  var _excluded$p = ["placeholder", "items", "showTick", "onSelect", "searchEnabled", "left", "right", "label", "filteredItems", "setSelectedItem", "selectedItem", "highlightedIndex", "setHighlightedIndex", "searchQuery", "setSearchQuery", "setFilteredItems", "styles", "isDropdownVisible", "setIsDropdownVisible"];
+  var _excluded$q = ["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 {
@@ -5900,7 +5907,7 @@
         setIsDropdownVisible
         // Collects all further props not destructured explicitly.
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
     // Sets up an effect to handle clicking outside the dropdown to close it.
     React.useEffect(() => {
       var handleClickOutside = event => {
@@ -6011,7 +6018,7 @@
     }))))))))))));
   };
 
-  var _excluded$q = ["id", "name", "items", "placeholder", "searchPlaceholder"];
+  var _excluded$r = ["id", "name", "items", "placeholder", "searchPlaceholder"];
   // Defines the ComboBoxComponent functional component with ComboBoxProps
   var ComboBoxComponent = _ref => {
     var {
@@ -6027,7 +6034,7 @@
         searchPlaceholder
         // Destructures the rest of the props not explicitly defined
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
     // Initializes ComboBox state using custom hook with items and placeholders
     var state = useComboBoxState(items, placeholder, searchPlaceholder);
     return (
@@ -6043,7 +6050,7 @@
   // Exports the ComboBoxComponent as ComboBox
   var ComboBox = ComboBoxComponent;
 
-  var _excluded$r = ["children", "autoFocus", "initFocus", "onChange"];
+  var _excluded$s = ["children", "autoFocus", "initFocus", "onChange"];
   var FocusContext = /*#__PURE__*/React.createContext({
     active: false,
     focusNextInput: () => {},
@@ -6059,7 +6066,7 @@
         initFocus,
         onChange = () => {}
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
     var formik$1 = formik.useFormikContext();
     React.useEffect(() => {
       onChange(formik$1.values);
@@ -6107,7 +6114,7 @@
     }, /*#__PURE__*/React__default.createElement(appStudio.Form, Object.assign({}, props), children));
   };
 
-  var _excluded$s = ["name", "type"];
+  var _excluded$t = ["name", "type"];
   var getInputTypeProps = type => {
     switch (type) {
       case 'email':
@@ -6146,7 +6153,7 @@
         name,
         type
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
     var focus = useFormFocus();
     var {
       touched,
@@ -6190,13 +6197,13 @@
     } : {});
   };
 
-  var _excluded$t = ["value"];
+  var _excluded$u = ["value"];
   var CheckboxComponent$1 = props => {
     var _useFormikInput = useFormikInput(props),
       {
         value
       } = _useFormikInput,
-      formProps = _objectWithoutPropertiesLoose(_useFormikInput, _excluded$t);
+      formProps = _objectWithoutPropertiesLoose(_useFormikInput, _excluded$u);
     formProps.isChecked = value;
     var checkboxStates = useCheckboxState(props);
     return /*#__PURE__*/React__default.createElement(CheckboxView, Object.assign({}, checkboxStates, formProps));
@@ -6254,11 +6261,11 @@
    */
   var FormikTextArea = TextAreaComponent$1;
 
-  var _excluded$u = ["value"];
+  var _excluded$v = ["value"];
   var TextFieldComponent$1 = props => {
     var formProps = useFormikInput(props);
     var _useTextFieldState = useTextFieldState(props),
-      textFieldStates = _objectWithoutPropertiesLoose(_useTextFieldState, _excluded$u);
+      textFieldStates = _objectWithoutPropertiesLoose(_useTextFieldState, _excluded$v);
     return /*#__PURE__*/React__default.createElement(TextFieldView, Object.assign({}, textFieldStates, formProps));
   };
   /**
@@ -6266,7 +6273,7 @@
    */
   var FormikTextField = TextFieldComponent$1;
 
-  var _excluded$v = ["visibleIcon", "hiddenIcon"],
+  var _excluded$w = ["visibleIcon", "hiddenIcon"],
     _excluded2$6 = ["isVisible", "setIsVisible"];
   var PasswordComponent$1 = _ref => {
     var {
@@ -6277,7 +6284,7 @@
           size: 14
         })
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$w);
     var formProps = useFormikInput(props);
     var _usePasswordState = usePasswordState(formProps),
       {
@@ -6302,14 +6309,14 @@
    */
   var FormikPassword = PasswordComponent$1;
 
-  var _excluded$w = ["items", "placeholder", "searchPlaceholder"];
+  var _excluded$x = ["items", "placeholder", "searchPlaceholder"];
   var ComboBoxComponent$1 = _ref => {
     var {
         items,
         placeholder,
         searchPlaceholder
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$w);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
     var formProps = useFormikInput(props);
     var ComboBoxStates = useComboBoxState(items, placeholder, searchPlaceholder);
     // Ensure the onChange function from formProps is being called when an item is selected
@@ -6678,7 +6685,7 @@
     xl: 28
   };
 
-  var _excluded$x = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position"],
+  var _excluded$y = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position"],
     _excluded2$7 = ["children", "shadow", "isFullScreen", "shape"],
     _excluded3$4 = ["children", "buttonColor", "iconSize", "buttonPosition"],
     _excluded4$3 = ["children"],
@@ -6692,7 +6699,7 @@
         onClose = () => {},
         position = 'center'
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
     var handleClick = () => {
       if (!isClosePrevented) onClose();
     };
@@ -7108,7 +7115,7 @@
     pillShaped: 24
   };
 
-  var _excluded$y = ["children", "shape", "colorScheme", "variant", "isHovered", "setIsHovered", "isDisabled", "isToggle", "setIsToggled", "onToggle"];
+  var _excluded$z = ["children", "shape", "colorScheme", "variant", "isHovered", "setIsHovered", "isDisabled", "isToggle", "setIsToggled", "onToggle"];
   var ToggleView = _ref => {
     var {
         children,
@@ -7122,7 +7129,7 @@
         setIsToggled,
         onToggle
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
     var toggleColor = !isDisabled ? colorScheme : 'theme.disabled';
     var isActive = !!(isToggle || isHovered);
     var ToggleVariants = {
@@ -7164,7 +7171,7 @@
     }, ToggleVariants[variant], props), children);
   };
 
-  var _excluded$z = ["children", "shape", "colorScheme", "variant", "isDisabled", "isToggled", "onToggle"];
+  var _excluded$A = ["children", "shape", "colorScheme", "variant", "isDisabled", "isToggled", "onToggle"];
   // Destructuring properties from ToggleProps to be used within the ToggleComponent.
   var ToggleComponent = _ref => {
     var {
@@ -7177,7 +7184,7 @@
         isToggled = false,
         onToggle
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
     // Initializing toggle state and set state functions using the custom hook useToggleState.
     var {
       isHovered,
@@ -7306,6 +7313,7 @@
   exports.CalendarIcon = CalendarIcon;
   exports.CameraIcon = CameraIcon;
   exports.Center = Center;
+  exports.CenterBase = CenterBase;
   exports.Checkbox = Checkbox;
   exports.ChevronIcon = ChevronIcon;
   exports.ClockIcon = ClockIcon;
@@ -7337,6 +7345,7 @@
   exports.HeartIcon = HeartIcon;
   exports.HomeIcon = HomeIcon;
   exports.Horizontal = Horizontal;
+  exports.HorizontalBase = HorizontalBase;
   exports.Icon = Icon;
   exports.InfoIcon = InfoIcon;
   exports.Inline = Inline;
@@ -7387,6 +7396,7 @@
   exports.UnlockIcon = UnlockIcon;
   exports.UploadIcon = UploadIcon;
   exports.Vertical = Vertical;
+  exports.VerticalBase = VerticalBase;
   exports.View = View;
   exports.WarningIcon = WarningIcon;
   exports.WifiIcon = WifiIcon;