@app-studio/web 0.7.7 → 0.7.10

package/dist/web.cjs.development.js

@@ -64,71 +64,23 @@ var useLinkState = function useLinkState() {
   };
 };
 
-var Top = function Top(props) {
-  return React__default.createElement(appStudio.View, Object.assign({
-    marginBottom: "auto"
-  }, props));
-};
-var Bottom = function Bottom(props) {
-  return React__default.createElement(appStudio.View, Object.assign({
-    marginTop: "auto"
-  }, props));
-};
-var Left = function Left(props) {
-  return React__default.createElement(appStudio.View, Object.assign({
-    marginRight: "auto"
-  }, props));
-};
-var Right = function Right(props) {
-  return React__default.createElement(appStudio.View, Object.assign({
-    marginLeft: "auto"
-  }, props));
-};
-var Inline = function Inline(props) {
-  return React__default.createElement(appStudio.View, Object.assign({
-    display: 'inline-flex',
-    wordBreak: "break-word"
-  }, props));
-};
-var View = appStudio.View;
-
-var _excluded = ["children", "wrap", "justify", "isReversed"];
-var HorizontalView = function HorizontalView(_ref) {
-  var children = _ref.children,
-    _ref$wrap = _ref.wrap,
-    wrap = _ref$wrap === void 0 ? 'wrap' : _ref$wrap,
-    _ref$justify = _ref.justify,
-    justify = _ref$justify === void 0 ? 'flex-start' : _ref$justify,
-    _ref$isReversed = _ref.isReversed,
-    isReversed = _ref$isReversed === void 0 ? false : _ref$isReversed,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return React__default.createElement(View, Object.assign({
-    display: "flex",
-    flexWrap: wrap,
-    flexDirection: isReversed ? 'row-reverse' : 'row',
-    justifyContent: justify
-  }, props), children);
-};
-
 /**
  * Horizontal layout aligns all the elements in a container on the horizontal axis.
  */
 var HorizontalComponent = function HorizontalComponent(props) {
-  return React__default.createElement(HorizontalView, Object.assign({}, props));
+  return React__default.createElement(appStudio.View, Object.assign({
+    display: "flex",
+    flexDirection: props.isReversed ? 'row-reverse' : 'row'
+  }, props));
 };
 var Horizontal = HorizontalComponent;
 
-var _excluded$1 = ["children", "wrap"];
-var CenterView = function CenterView(_ref) {
-  var children = _ref.children,
-    wrap = _ref.wrap,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-  return React__default.createElement(View, Object.assign({
+var CenterView = function CenterView(props) {
+  return React__default.createElement(appStudio.View, Object.assign({
     display: "flex",
     justifyContent: "center",
-    alignItems: "center",
-    flexWrap: wrap
-  }, props), children);
+    alignItems: "center"
+  }, props));
 };
 
 /**
@@ -139,11 +91,11 @@ var CenterComponent = function CenterComponent(props) {
 };
 var Center = CenterComponent;
 
-var _excluded$2 = ["size", "color"];
+var _excluded = ["size", "color"];
 var ArrowDownSvg = function ArrowDownSvg(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 64 : _ref$size,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
   return React__default.createElement(Center, {
     width: size + "px",
     height: size + "px"
@@ -179,11 +131,11 @@ var ArrowDownSvg = function ArrowDownSvg(_ref) {
   })))))));
 };
 
-var _excluded$3 = ["size", "color"];
+var _excluded$1 = ["size", "color"];
 var ArrowUpSvg = function ArrowUpSvg(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 64 : _ref$size,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
   return React__default.createElement(Center, {
     width: size + "px",
     height: size + "px"
@@ -221,13 +173,13 @@ var ArrowUpSvg = function ArrowUpSvg(_ref) {
   })))))));
 };
 
-var _excluded$4 = ["size", "color"];
+var _excluded$2 = ["size", "color"];
 var CheckSvg = function CheckSvg(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 64 : _ref$size,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'white' : _ref$color,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
   return React__default.createElement(Center, {
     width: size + "px",
     height: size + "px"
@@ -257,13 +209,13 @@ var CheckSvg = function CheckSvg(_ref) {
   }))));
 };
 
-var _excluded$5 = ["size", "color"];
+var _excluded$3 = ["size", "color"];
 var CloseSvg = function CloseSvg(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 64 : _ref$size,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'white' : _ref$color,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
   return React__default.createElement(Center, {
     width: size + "px",
     height: size + "px"
@@ -288,13 +240,13 @@ var CloseSvg = function CloseSvg(_ref) {
   }))));
 };
 
-var _excluded$6 = ["size", "color"];
+var _excluded$4 = ["size", "color"];
 var CloseEyeSvg = function CloseEyeSvg(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 64 : _ref$size,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? '#2F4858' : _ref$color,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   return React__default.createElement(Center, {
     width: size + "px",
     height: size + "px"
@@ -319,13 +271,13 @@ var CloseEyeSvg = function CloseEyeSvg(_ref) {
   }))));
 };
 
-var _excluded$7 = ["size", "color"];
+var _excluded$5 = ["size", "color"];
 var ExternalLinkSvg = function ExternalLinkSvg(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 64 : _ref$size,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'white' : _ref$color,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   return React__default.createElement(Center, {
     width: size + "px",
     height: size + "px"
@@ -354,13 +306,13 @@ var ExternalLinkSvg = function ExternalLinkSvg(_ref) {
   }))));
 };
 
-var _excluded$8 = ["size", "color"];
+var _excluded$6 = ["size", "color"];
 var IndeterminateSvg = function IndeterminateSvg(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 64 : _ref$size,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'white' : _ref$color,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
   return React__default.createElement(Center, {
     width: size + "px",
     height: size + "px"
@@ -386,13 +338,13 @@ var IndeterminateSvg = function IndeterminateSvg(_ref) {
   }), ' ')));
 };
 
-var _excluded$9 = ["size", "color"];
+var _excluded$7 = ["size", "color"];
 var OpenEyeSvg = function OpenEyeSvg(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 64 : _ref$size,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? '#2F4858' : _ref$color,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
   return React__default.createElement(Center, {
     width: size + "px",
     height: size + "px"
@@ -417,13 +369,13 @@ var OpenEyeSvg = function OpenEyeSvg(_ref) {
   }))));
 };
 
-var _excluded$a = ["size", "color"];
+var _excluded$8 = ["size", "color"];
 var WarningSvg = function WarningSvg(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 64 : _ref$size,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'white' : _ref$color,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
   return React__default.createElement(Center, {
     width: size + "px",
     height: size + "px"
@@ -446,13 +398,13 @@ var WarningSvg = function WarningSvg(_ref) {
   })))))));
 };
 
-var _excluded$b = ["size", "color"];
+var _excluded$9 = ["size", "color"];
 var SuccessSvg = function SuccessSvg(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 64 : _ref$size,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'white' : _ref$color,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
   return React__default.createElement(Center, {
     width: size + "px",
     height: size + "px"
@@ -476,13 +428,13 @@ var SuccessSvg = function SuccessSvg(_ref) {
   }))))));
 };
 
-var _excluded$c = ["size", "color"];
+var _excluded$a = ["size", "color"];
 var InfoSvg = function InfoSvg(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 64 : _ref$size,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'white' : _ref$color,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   return React__default.createElement(Center, {
     width: size + "px",
     height: size + "px"
@@ -505,13 +457,13 @@ var InfoSvg = function InfoSvg(_ref) {
   })))))));
 };
 
-var _excluded$d = ["size", "color"];
+var _excluded$b = ["size", "color"];
 var ErrorSvg = function ErrorSvg(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 64 : _ref$size,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'white' : _ref$color,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
   return React__default.createElement(Center, {
     width: size + "px",
     height: size + "px"
@@ -554,7 +506,7 @@ var IconSizes = {
   '6xl': 64
 };
 
-var _excluded$e = ["children", "href", "iconSize", "underline", "isHovered", "isExternal", "styles", "setIsHovered"];
+var _excluded$c = ["children", "href", "iconSize", "underline", "isHovered", "isExternal", "styles", "setIsHovered"];
 var LinkView = function LinkView(_ref) {
   var children = _ref.children,
     _ref$href = _ref.href,
@@ -574,7 +526,7 @@ var LinkView = function LinkView(_ref) {
     } : _ref$styles,
     _ref$setIsHovered = _ref.setIsHovered,
     setIsHovered = _ref$setIsHovered === void 0 ? function () {} : _ref$setIsHovered,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
   var handleHover = function handleHover() {
     if (underline === 'hover') setIsHovered(true);
   };
@@ -709,6 +661,34 @@ var IconSizes$1 = {
   }
 };
 
+var Top = function Top(props) {
+  return React__default.createElement(appStudio.View, Object.assign({
+    marginBottom: "auto"
+  }, props));
+};
+var Bottom = function Bottom(props) {
+  return React__default.createElement(appStudio.View, Object.assign({
+    marginTop: "auto"
+  }, props));
+};
+var Left = function Left(props) {
+  return React__default.createElement(appStudio.View, Object.assign({
+    marginRight: "auto"
+  }, props));
+};
+var Right = function Right(props) {
+  return React__default.createElement(appStudio.View, Object.assign({
+    marginLeft: "auto"
+  }, props));
+};
+var Inline = function Inline(props) {
+  return React__default.createElement(appStudio.View, Object.assign({
+    display: 'inline-flex',
+    wordBreak: "break-word"
+  }, props));
+};
+var View = appStudio.View;
+
 var DefaultSizes = {
   xs: 14,
   sm: 18,
@@ -727,7 +707,7 @@ var DefaultSpeeds = {
   slow: 300
 };
 
-var _excluded$f = ["size", "speed", "color"],
+var _excluded$d = ["size", "speed", "color"],
   _excluded2 = ["size", "speed", "color"],
   _excluded3 = ["size", "speed", "color"],
   _excluded4 = ["size", "children", "textColor", "loaderColor", "type", "speed", "textPosition"];
@@ -738,7 +718,7 @@ var DefaultSpinner = function DefaultSpinner(_ref) {
     speed = _ref$speed === void 0 ? 'normal' : _ref$speed,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'theme.loading' : _ref$color,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
   var theme = appStudio.useTheme();
   var colorStyle = theme.getColor(color);
   var sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
@@ -912,7 +892,7 @@ var LoaderComponent = function LoaderComponent(props) {
  */
 var Loader = LoaderComponent;
 
-var _excluded$g = ["icon", "shadow", "children", "ariaLabel", "externalHref", "isAuto", "isFilled", "isIconRounded", "isLoading", "isDisabled", "size", "variant", "iconPosition", "colorScheme", "shape", "onClick", "loaderProps", "loaderPosition", "effect", "isHovered"];
+var _excluded$e = ["icon", "shadow", "children", "ariaLabel", "externalHref", "isAuto", "isFilled", "isIconRounded", "isLoading", "isDisabled", "size", "variant", "iconPosition", "colorScheme", "shape", "onClick", "loaderProps", "loaderPosition", "effect", "isHovered"];
 var contrast = /*#__PURE__*/require('contrast');
 var ButtonView = function ButtonView(_ref) {
   var _props$onClick;
@@ -950,7 +930,7 @@ var ButtonView = function ButtonView(_ref) {
     _ref$effect = _ref.effect,
     effect = _ref$effect === void 0 ? 'default' : _ref$effect,
     isHovered = _ref.isHovered,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
   var _useTheme = appStudio.useTheme(),
     getColor = _useTheme.getColor;
   var isActive = !(isDisabled || isLoading);
@@ -1122,7 +1102,7 @@ var HeadingSizes = {
   }
 };
 
-var _excluded$h = ["children", "heading", "isItalic", "isUnderlined", "isStriked", "weight", "size"];
+var _excluded$f = ["children", "heading", "isItalic", "isUnderlined", "isStriked", "weight", "size"];
 var LabelView = function LabelView(_ref) {
   var children = _ref.children,
     heading = _ref.heading,
@@ -1136,7 +1116,7 @@ var LabelView = function LabelView(_ref) {
     weight = _ref$weight === void 0 ? 'normal' : _ref$weight,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'sm' : _ref$size,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
   // The fontStyle prop toggles between 'italic' and 'normal' based on the 'isItalic' boolean prop.
   var headingStyles = heading ? HeadingSizes[heading] : {};
   // fontWeight is derived from the Typography module, ensuring consistent font weighting across the app.
@@ -1256,7 +1236,7 @@ var HeadingSizes$1 = {
   }
 };
 
-var _excluded$i = ["children", "heading", "maxLines", "isItalic", "isUnderlined", "isSub", "isSup", "isStriked", "isTruncated", "weight", "size"];
+var _excluded$g = ["children", "heading", "maxLines", "isItalic", "isUnderlined", "isSub", "isSup", "isStriked", "isTruncated", "weight", "size"];
 var TextContent = function TextContent(_ref) {
   var children = _ref.children,
     isSub = _ref.isSub,
@@ -1320,7 +1300,7 @@ var TextView = function TextView(_ref3) {
     weight = _ref3$weight === void 0 ? 'normal' : _ref3$weight,
     _ref3$size = _ref3.size,
     size = _ref3$size === void 0 ? 'md' : _ref3$size,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded$i);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded$g);
   var headingStyles = heading ? HeadingSizes$1[heading] : {};
   var noLineBreak = isSub || isSup ? {
     display: 'inline'
@@ -1350,7 +1330,7 @@ var TextComponent = function TextComponent(props) {
  */
 var Text = TextComponent;
 
-var _excluded$j = ["id", "icon", "name", "label", "isChecked", "onChange", "onValueChange", "shadow", "labelPosition", "size", "colorScheme", "error", "isSelected", "isHovered", "isDisabled", "isReadOnly", "isIndeterminate", "defaultIsSelected", "setIsSelected", "setIsHovered", "styles", "infoText"];
+var _excluded$h = ["id", "icon", "name", "label", "isChecked", "onChange", "onValueChange", "shadow", "labelPosition", "size", "colorScheme", "error", "isSelected", "isHovered", "isDisabled", "isReadOnly", "isIndeterminate", "defaultIsSelected", "setIsSelected", "setIsHovered", "styles", "infoText"];
 var CheckboxView = function CheckboxView(_ref) {
   var id = _ref.id,
     icon = _ref.icon,
@@ -1388,7 +1368,7 @@ var CheckboxView = function CheckboxView(_ref) {
       label: {}
     } : _ref$styles,
     infoText = _ref.infoText,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
   var handleHover = function handleHover() {
     return setIsHovered(!isHovered);
   };
@@ -2942,14 +2922,14 @@ var useCountryPickerState = function useCountryPickerState(_ref) {
   };
 };
 
-var _excluded$k = ["children", "styles"];
+var _excluded$i = ["children", "styles"];
 var HelperText = function HelperText(_ref) {
   var children = _ref.children,
     _ref$styles = _ref.styles,
     styles = _ref$styles === void 0 ? {
       helperText: {}
     } : _ref$styles,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
   return React__default.createElement(Text, Object.assign({
     size: "xs",
     marginVertical: 0,
@@ -2958,22 +2938,21 @@ var HelperText = function HelperText(_ref) {
   }, styles['helperText'], props), children);
 };
 
-var _excluded$l = ["children", "wrap", "justify", "isReversed"];
+var _excluded$j = ["wrap", "justifyContent", "isReversed"];
 var VerticalView = function VerticalView(_ref) {
-  var children = _ref.children,
-    _ref$wrap = _ref.wrap,
-    wrap = _ref$wrap === void 0 ? 'nowrap' : _ref$wrap,
-    _ref$justify = _ref.justify,
-    justify = _ref$justify === void 0 ? 'flex-start' : _ref$justify,
+  var _ref$wrap = _ref.wrap,
+    wrap = _ref$wrap === void 0 ? 'wrap' : _ref$wrap,
+    _ref$justifyContent = _ref.justifyContent,
+    justifyContent = _ref$justifyContent === void 0 ? 'flex-start' : _ref$justifyContent,
     _ref$isReversed = _ref.isReversed,
     isReversed = _ref$isReversed === void 0 ? false : _ref$isReversed,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
   return React__default.createElement(appStudio.View, Object.assign({
     display: "flex",
     flexWrap: wrap,
-    flexDirection: isReversed ? 'column-reverse' : 'column',
-    justifyContent: justify
-  }, props), children);
+    justifyContent: justifyContent,
+    flexDirection: isReversed ? 'column-reverse' : 'column'
+  }, props));
 };
 
 /**
@@ -2984,14 +2963,14 @@ var VerticalComponent = function VerticalComponent(props) {
 };
 var Vertical = VerticalComponent;
 
-var _excluded$m = ["children", "helperText", "error", "styles"];
+var _excluded$k = ["children", "helperText", "error", "styles"];
 var FieldContainer = function FieldContainer(_ref) {
   var children = _ref.children,
     helperText = _ref.helperText,
     _ref$error = _ref.error,
     error = _ref$error === void 0 ? false : _ref$error,
     styles = _ref.styles,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
   return React__default.createElement(Vertical, Object.assign({
     gap: 5,
     position: "relative"
@@ -3050,7 +3029,7 @@ var PaddingWithoutLabel = {
   paddingRight: 36
 };
 
-var _excluded$n = ["label", "shadow", "children", "value", "size", "shape", "variant", "error", "isWithLabel", "isFocused", "isHovered", "isDisabled", "isReadOnly", "colorScheme", "styles"];
+var _excluded$l = ["label", "shadow", "children", "value", "size", "shape", "variant", "error", "isWithLabel", "isFocused", "isHovered", "isDisabled", "isReadOnly", "colorScheme", "styles"];
 var FieldContent = function FieldContent(_ref) {
   var shadow = _ref.shadow,
     children = _ref.children,
@@ -3078,7 +3057,7 @@ var FieldContent = function FieldContent(_ref) {
     styles = _ref$styles === void 0 ? {
       pickerBox: {}
     } : _ref$styles,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
   var isInteractive = (isHovered || isFocused) && !isDisabled;
   var color = error ? 'error' : isInteractive ? colorScheme : 'midgray';
   return React__default.createElement(Horizontal, Object.assign({
@@ -3099,10 +3078,10 @@ var FieldContent = function FieldContent(_ref) {
   }, isWithLabel ? PadddingWithLabel : PaddingWithoutLabel, shadow, Shapes[shape], InputVariants[variant], styles['box'], props), children);
 };
 
-var _excluded$o = ["children"];
+var _excluded$m = ["children"];
 var FieldIcons = function FieldIcons(_ref) {
   var children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
   return React__default.createElement(Center, Object.assign({
     gap: 10,
     right: 16,
@@ -3112,7 +3091,7 @@ var FieldIcons = function FieldIcons(_ref) {
   }, props), children);
 };
 
-var _excluded$p = ["children", "size", "error", "color", "styles"];
+var _excluded$n = ["children", "size", "error", "color", "styles"];
 var FieldLabel = function FieldLabel(_ref) {
   var children = _ref.children,
     _ref$size = _ref.size,
@@ -3125,7 +3104,7 @@ var FieldLabel = function FieldLabel(_ref) {
     styles = _ref$styles === void 0 ? {
       label: {}
     } : _ref$styles,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
   return React__default.createElement(Label, Object.assign({
     top: 6,
     zIndex: 1000,
@@ -3138,10 +3117,10 @@ var FieldLabel = function FieldLabel(_ref) {
   }, styles['label'], props), children);
 };
 
-var _excluded$q = ["children"];
+var _excluded$o = ["children"];
 var FieldWrapper = function FieldWrapper(_ref) {
   var children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
   return React__default.createElement(Vertical, Object.assign({
     width: "100%"
   }, props), children);
@@ -3155,7 +3134,7 @@ var IconSizes$3 = {
   xl: 16
 };
 
-var _excluded$r = ["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 _excluded$p = ["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 = function CountryList(props) {
   return React__default.createElement(appStudio.Element, Object.assign({
     as: "ul"
@@ -3295,7 +3274,7 @@ var CountryPickerView = function CountryPickerView(_ref3) {
       helperText: {},
       box: {}
     } : _ref3$styles,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded$r);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded$p);
   var _useTheme = appStudio.useTheme(),
     getColor = _useTheme.getColor;
   var IconColor = getColor('color.blueGray.700');
@@ -3433,7 +3412,7 @@ var useDatePickerState = function useDatePickerState() {
   };
 };
 
-var _excluded$s = ["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$q = ["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 = function DatePickerContent(props) {
   return React__default.createElement(appStudio.Input, Object.assign({
     type: "date"
@@ -3481,7 +3460,7 @@ var DatePickerView = function DatePickerView(_ref) {
     setIsHovered = _ref$setIsHovered === void 0 ? function () {} : _ref$setIsHovered,
     onChange = _ref.onChange,
     onChangeText = _ref.onChangeText,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
   var isWithLabel = !!(isFocused && label);
   var handleHover = function handleHover() {
     return setIsHovered(!isHovered);
@@ -3606,7 +3585,7 @@ var usePasswordState = function usePasswordState(props) {
   }, props, textFieldStates);
 };
 
-var _excluded$t = ["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$r = ["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 = function TextFieldInput(props) {
   return React__default.createElement(appStudio.Input, Object.assign({
     type: "text"
@@ -3664,7 +3643,7 @@ var TextFieldView = function TextFieldView(_ref) {
     onFocus = _ref.onFocus,
     _ref$onBlur = _ref.onBlur,
     onBlur = _ref$onBlur === void 0 ? function () {} : _ref$onBlur,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
   var _useTheme = appStudio.useTheme(),
     getColor = _useTheme.getColor;
   var IconColor = getColor('color.blueGray.700');
@@ -3772,7 +3751,7 @@ var TextFieldView = function TextFieldView(_ref) {
   }), rightChild && React__default.createElement(React__default.Fragment, null, rightChild))));
 };
 
-var _excluded$u = ["visibleIcon", "hiddenIcon"],
+var _excluded$s = ["visibleIcon", "hiddenIcon"],
   _excluded2$1 = ["isVisible", "setIsVisible"];
 var PasswordComponent = function PasswordComponent(_ref) {
   var _ref$visibleIcon = _ref.visibleIcon,
@@ -3783,7 +3762,7 @@ var PasswordComponent = function PasswordComponent(_ref) {
     hiddenIcon = _ref$hiddenIcon === void 0 ? React__default.createElement(CloseEyeSvg, {
       size: 14
     }) : _ref$hiddenIcon,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
   var _usePasswordState = usePasswordState(props),
     isVisible = _usePasswordState.isVisible,
     setIsVisible = _usePasswordState.setIsVisible,
@@ -3809,7 +3788,7 @@ var useSelectState = function useSelectState(_ref) {
   var placeholder = _ref.placeholder,
     isMulti = _ref.isMulti,
     options = _ref.options;
-  var defaultValue = placeholder ? isMulti ? [] : '' : options[0];
+  var defaultValue = placeholder ? isMulti ? [] : '' : options[0].value;
   var _React$useState = React__default.useState(true),
     hide = _React$useState[0],
     setHide = _React$useState[1];
@@ -3856,7 +3835,7 @@ var IconSizes$4 = {
   xl: 16
 };
 
-var _excluded$v = ["isHovered", "setIsHovered", "option", "size", "callback", "style"],
+var _excluded$t = ["isHovered", "setIsHovered", "option", "size", "callback", "style"],
   _excluded2$2 = ["id", "name", "value", "onChange", "isMulti", "isDisabled", "isReadOnly", "options"],
   _excluded3$1 = ["option", "size", "removeOption"],
   _excluded4$1 = ["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"];
@@ -3869,7 +3848,7 @@ var Item = function Item(_ref) {
     _ref$callback = _ref.callback,
     callback = _ref$callback === void 0 ? function () {} : _ref$callback,
     style = _ref.style,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
   var handleOptionClick = function handleOptionClick(option) {
     return callback(option);
   };
@@ -3885,14 +3864,15 @@ var Item = function Item(_ref) {
     onMouseEnter: handleHover,
     onMouseLeave: handleHover,
     onClick: function onClick() {
-      return handleOptionClick(option);
+      return handleOptionClick(option.value);
     },
     backgroundColor: isHovered ? 'trueGray.100' : 'transparent'
   }, props), React__default.createElement(Text, Object.assign({
     fontSize: appStudio.Typography.fontSizes[size]
-  }, style), option));
+  }, style), option.label));
 };
 var SelectBox = function SelectBox(_ref2) {
+  var _option$label;
   var _ref2$size = _ref2.size,
     size = _ref2$size === void 0 ? 'md' : _ref2$size,
     _ref2$styles = _ref2.styles,
@@ -3904,7 +3884,8 @@ var SelectBox = function SelectBox(_ref2) {
     isDisabled = _ref2.isDisabled,
     placeholder = _ref2.placeholder,
     _ref2$removeOption = _ref2.removeOption,
-    removeOption = _ref2$removeOption === void 0 ? function () {} : _ref2$removeOption;
+    removeOption = _ref2$removeOption === void 0 ? function () {} : _ref2$removeOption,
+    options = _ref2.options;
   var fieldStyles = _extends({
     margin: 0,
     width: '95%',
@@ -3917,7 +3898,10 @@ var SelectBox = function SelectBox(_ref2) {
     color: isDisabled ? 'color.trueGray.600' : 'color.blueGray.700',
     cursor: isDisabled ? 'not-allowed' : 'auto'
   }, styles['field'], styles['text']);
-  return React__default.createElement(Text, Object.assign({}, fieldStyles), (value === '' || value && value.length === 0) && !!placeholder ? placeholder : React__default.createElement(React__default.Fragment, null, typeof value === 'string' ? value : value && value.length > 0 && React__default.createElement(Horizontal, {
+  var option = options.find(function (option) {
+    return option.value === value;
+  });
+  return React__default.createElement(Text, Object.assign({}, fieldStyles), (value === '' || value && value.length === 0) && !!placeholder ? placeholder : React__default.createElement(React__default.Fragment, null, typeof value === 'string' ? (_option$label = option == null ? void 0 : option.label) != null ? _option$label : value : value && value.length > 0 && React__default.createElement(Horizontal, {
     gap: 6
   }, value.map(function (option) {
     return React__default.createElement(MultiSelect, {
@@ -3959,9 +3943,9 @@ var HiddenSelect = function HiddenSelect(_ref3) {
     multiple: isMulti
   }, props), options.map(function (option) {
     return React__default.createElement("option", {
-      key: option,
-      value: option
-    }, option);
+      key: option.value,
+      value: option.value
+    }, option.label);
   }));
 };
 var DropDown$1 = function DropDown(_ref4) {
@@ -4018,7 +4002,7 @@ var DropDown$1 = function DropDown(_ref4) {
     }
   }, shadow, styles['dropDown']), options.map(function (option, index) {
     return React__default.createElement(Item, Object.assign({
-      key: option,
+      key: option.value,
       size: size,
       style: styles['text'],
       option: option,
@@ -4182,6 +4166,7 @@ var SelectView = function SelectView(_ref6) {
     isMulti: isMulti,
     onFocus: handleFocus
   }, props)), React__default.createElement(SelectBox, {
+    options: options,
     size: size,
     styles: styles,
     value: value,
@@ -4359,7 +4344,7 @@ var SliderPadding = {
   }
 };
 
-var _excluded$w = ["id", "name", "label", "inActiveChild", "activeChild", "labelPosition", "shadow", "size", "colorScheme", "value", "isHovered", "isDisabled", "isReadOnly", "onChange", "setValue", "setIsHovered", "styles"];
+var _excluded$u = ["id", "name", "label", "inActiveChild", "activeChild", "labelPosition", "shadow", "size", "colorScheme", "value", "isHovered", "isDisabled", "isReadOnly", "onChange", "setValue", "setIsHovered", "styles"];
 var SwitchContent = function SwitchContent(props) {
   return React__default.createElement(appStudio.Input, Object.assign({
     type: "checkbox"
@@ -4398,7 +4383,7 @@ var SwitchView = function SwitchView(_ref) {
       circle: {},
       label: {}
     } : _ref$styles,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$w);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
   var handleToggle = function handleToggle(event) {
     if (!isReadOnly) {
       setValue(!value);
@@ -4484,7 +4469,7 @@ var useTextAreaState = function useTextAreaState(_ref) {
   };
 };
 
-var _excluded$x = ["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$v = ["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 = function TextAreaView(_ref) {
   var id = _ref.id,
     name = _ref.name,
@@ -4539,7 +4524,7 @@ var TextAreaView = function TextAreaView(_ref) {
       helperText: {},
       field: {}
     } : _ref$styles,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
   var isWithLabel = !!(isFocused && label);
   var fieldStyles = _extends({
     margin: 0,
@@ -4707,7 +4692,7 @@ var FormikForm = function FormikForm(_ref) {
   }, React__default.createElement(appStudio.Form, null, children));
 };
 
-var _excluded$y = ["name", "type"];
+var _excluded$w = ["name", "type"];
 var getInputTypeProps = function getInputTypeProps(type) {
   switch (type) {
     case 'email':
@@ -4737,7 +4722,7 @@ var getInputTypeProps = function getInputTypeProps(type) {
 var useFormikInput = function useFormikInput(_ref) {
   var name = _ref.name,
     type = _ref.type,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$w);
   var focus = useFormFocus();
   var _useFormikContext = formik.useFormikContext(),
     touched = _useFormikContext.touched,
@@ -4784,11 +4769,11 @@ var useFormikInput = function useFormikInput(_ref) {
 // import FormRater from 'src/Rate/Rate';
 // import Upload from 'src/Upload/Upload';
 
-var _excluded$z = ["value"];
+var _excluded$x = ["value"];
 var CheckboxComponent$1 = function CheckboxComponent(props) {
   var _useFormikInput = useFormikInput(props),
     value = _useFormikInput.value,
-    formProps = _objectWithoutPropertiesLoose(_useFormikInput, _excluded$z);
+    formProps = _objectWithoutPropertiesLoose(_useFormikInput, _excluded$x);
   formProps.isChecked = value;
   var checkboxStates = useCheckboxState(props);
   return React__default.createElement(CheckboxView, Object.assign({}, checkboxStates, formProps));
@@ -4821,6 +4806,10 @@ var FormikCountryPicker = CountryPickerComponent$1;
 var SelectComponent$1 = function SelectComponent(props) {
   var formProps = useFormikInput(props);
   formProps.selected = formProps.value;
+  console.log({
+    formProps: formProps,
+    test: formProps.value
+  });
   var selectStates = useSelectState(props);
   return React__default.createElement(SelectView, Object.assign({}, selectStates, formProps));
 };
@@ -4846,11 +4835,11 @@ var TextAreaComponent$1 = function TextAreaComponent(props) {
  */
 var FormikTextArea = TextAreaComponent$1;
 
-var _excluded$A = ["value"];
+var _excluded$y = ["value"];
 var TextFieldComponent$1 = function TextFieldComponent(props) {
   var formProps = useFormikInput(props);
   var _useTextFieldState = useTextFieldState(props),
-    textFieldStates = _objectWithoutPropertiesLoose(_useTextFieldState, _excluded$A);
+    textFieldStates = _objectWithoutPropertiesLoose(_useTextFieldState, _excluded$y);
   return React__default.createElement(TextFieldView, Object.assign({}, textFieldStates, formProps));
 };
 /**
@@ -4858,7 +4847,7 @@ var TextFieldComponent$1 = function TextFieldComponent(props) {
  */
 var FormikTextField = TextFieldComponent$1;
 
-var _excluded$B = ["visibleIcon", "hiddenIcon"],
+var _excluded$z = ["visibleIcon", "hiddenIcon"],
   _excluded2$3 = ["isVisible", "setIsVisible"];
 var PasswordComponent$1 = function PasswordComponent(_ref) {
   var _ref$visibleIcon = _ref.visibleIcon,
@@ -4869,7 +4858,7 @@ var PasswordComponent$1 = function PasswordComponent(_ref) {
     hiddenIcon = _ref$hiddenIcon === void 0 ? React__default.createElement(CloseEyeSvg, {
       size: 14
     }) : _ref$hiddenIcon,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
   var formProps = useFormikInput(props);
   var _usePasswordState = usePasswordState(formProps),
     isVisible = _usePasswordState.isVisible,
@@ -4932,11 +4921,11 @@ var useComboBoxState = function useComboBoxState(items, placeholder, searchPlace
   };
 };
 
-var _excluded$C = ["size", "color"];
+var _excluded$A = ["size", "color"];
 var TickSvg = function TickSvg(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$C);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
   return React__default.createElement(Center, {
     width: size + "px",
     height: size + "px"
@@ -4964,13 +4953,13 @@ var TickSvg = function TickSvg(_ref) {
   }), ' ')));
 };
 
-var _excluded$D = ["size", "color"];
+var _excluded$B = ["size", "color"];
 var SearchLoopSvg = function SearchLoopSvg(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 14 : _ref$size,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? '#c0c0c0' : _ref$color,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$D);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
   return React__default.createElement(Center, {
     width: size + "px",
     height: size + "px"
@@ -4997,7 +4986,7 @@ var SearchLoopSvg = function SearchLoopSvg(_ref) {
   }), ' ')))));
 };
 
-var _excluded$E = ["placeholder", "items", "showTick", "onSelect", "searchEnabled", "left", "right", "label", "filteredItems", "setSelectedItem", "selectedItem", "highlightedIndex", "setHighlightedIndex", "searchQuery", "setSearchQuery", "setFilteredItems", "styles", "isDropdownVisible", "setIsDropdownVisible"];
+var _excluded$C = ["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 = function ComboBoxView(_ref) {
   var placeholder = _ref.placeholder,
@@ -5021,7 +5010,7 @@ var ComboBoxView = function ComboBoxView(_ref) {
     styles = _ref.styles,
     isDropdownVisible = _ref.isDropdownVisible,
     setIsDropdownVisible = _ref.setIsDropdownVisible,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$E);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$C);
   // Sets up an effect to handle clicking outside the dropdown to close it.
   React.useEffect(function () {
     var handleClickOutside = function handleClickOutside(event) {
@@ -5077,7 +5066,7 @@ var ComboBoxView = function ComboBoxView(_ref) {
     display: "flex",
     alignItems: "center",
     borderRadius: "4px",
-    justify: "space-between",
+    justifyContent: "space-between",
     minWidth: 300,
     wrap: "nowrap"
   }, styles == null ? void 0 : styles.container), React__default.createElement(Horizontal, Object.assign({
@@ -5130,7 +5119,7 @@ var ComboBoxView = function ComboBoxView(_ref) {
     padding: 4
   }, filteredItems.map(function (item, index) {
     return React__default.createElement(Horizontal, Object.assign({
-      justify: "space-between",
+      justifyContent: "space-between",
       key: item.value,
       padding: "12px",
       cursor: "pointer",
@@ -5146,12 +5135,12 @@ var ComboBoxView = function ComboBoxView(_ref) {
   }))))));
 };
 
-var _excluded$F = ["items", "placeholder", "searchPlaceholder"];
+var _excluded$D = ["items", "placeholder", "searchPlaceholder"];
 var ComboBoxComponent = function ComboBoxComponent(_ref) {
   var items = _ref.items,
     placeholder = _ref.placeholder,
     searchPlaceholder = _ref.searchPlaceholder,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$F);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$D);
   var formProps = useFormikInput(props);
   var ComboBoxStates = useComboBoxState(items, placeholder, searchPlaceholder);
   // Ensure the onChange function from formProps is being called when an item is selected
@@ -5252,7 +5241,7 @@ var HeaderIconSizes = {
   xl: 28
 };
 
-var _excluded$G = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position"],
+var _excluded$E = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position"],
   _excluded2$4 = ["children", "shadow", "isFullScreen", "shape"],
   _excluded3$2 = ["children", "buttonColor", "iconSize", "buttonPosition"],
   _excluded4$2 = ["children"],
@@ -5268,7 +5257,7 @@ var ModalOverlay = function ModalOverlay(_ref) {
     onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
     _ref$position = _ref.position,
     position = _ref$position === void 0 ? 'center' : _ref$position,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$G);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$E);
   var handleClick = function handleClick() {
     if (!isClosePrevented) onClose();
   };
@@ -5422,12 +5411,12 @@ Modal.Body = ModalBody;
 Modal.Footer = ModalFooter;
 Modal.Layout = ModalLayout;
 
-var _excluded$H = ["src", "color"],
+var _excluded$F = ["src", "color"],
   _excluded2$5 = ["path"];
 var FileSVG = function FileSVG(_ref) {
   var src = _ref.src,
     color = _ref.color,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$H);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$F);
   var _useTheme = appStudio.useTheme(),
     getColor = _useTheme.getColor;
   var Colorprops = color ? {
@@ -5646,13 +5635,13 @@ var AlertComponent = function AlertComponent(_ref) {
 // Exporting the AlertComponent as 'Alert' for use in other parts of the application.
 var Alert = AlertComponent;
 
-var _excluded$I = ["ratio", "children"];
+var _excluded$G = ["ratio", "children"];
 // Declaration of a functional component named AspectRatioView.
 var AspectRatioView = function AspectRatioView(_ref) {
   var _ref$ratio = _ref.ratio,
     ratio = _ref$ratio === void 0 ? 16 / 9 : _ref$ratio,
     children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$I);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$G);
   return React__default.createElement(Center, Object.assign({
     width: '100%',
     position: "relative",
@@ -5668,12 +5657,12 @@ var AspectRatioView = function AspectRatioView(_ref) {
   }, children));
 };
 
-var _excluded$J = ["ratio", "children"];
+var _excluded$H = ["ratio", "children"];
 // Declaration of the AspectRatioComponent functional component with destructured props.
 var AspectRatioComponent = function AspectRatioComponent(_ref) {
   var ratio = _ref.ratio,
     children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$J);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$H);
   // Beginning of the return statement in the functional component.
   return React__default.createElement(AspectRatioView, Object.assign({
     ratio: ratio
@@ -5927,7 +5916,7 @@ var ToggleShapes = {
   pillShaped: 24
 };
 
-var _excluded$K = ["children", "shape", "colorScheme", "variant", "isHovered", "setIsHovered", "isDisabled", "isToggle", "setIsToggled", "onToggle"];
+var _excluded$I = ["children", "shape", "colorScheme", "variant", "isHovered", "setIsHovered", "isDisabled", "isToggle", "setIsToggled", "onToggle"];
 var ToggleView = function ToggleView(_ref) {
   var children = _ref.children,
     _ref$shape = _ref.shape,
@@ -5942,7 +5931,7 @@ var ToggleView = function ToggleView(_ref) {
     isToggle = _ref.isToggle,
     setIsToggled = _ref.setIsToggled,
     onToggle = _ref.onToggle,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$K);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$I);
   var toggleColor = !isDisabled ? colorScheme : 'theme.disabled';
   var isActive = !!(isToggle || isHovered);
   var ToggleVariants = {
@@ -5988,7 +5977,7 @@ var ToggleView = function ToggleView(_ref) {
   }, ToggleVariants[variant], props), children);
 };
 
-var _excluded$L = ["children", "shape", "colorScheme", "variant", "isDisabled", "isToggled", "onToggle"];
+var _excluded$J = ["children", "shape", "colorScheme", "variant", "isDisabled", "isToggled", "onToggle"];
 // Destructuring properties from ToggleProps to be used within the ToggleComponent.
 var ToggleComponent = function ToggleComponent(_ref) {
   var children = _ref.children,
@@ -5999,7 +5988,7 @@ var ToggleComponent = function ToggleComponent(_ref) {
     _ref$isToggled = _ref.isToggled,
     isToggled = _ref$isToggled === void 0 ? false : _ref$isToggled,
     onToggle = _ref.onToggle,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$L);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$J);
   // Initializing toggle state and set state functions using the custom hook useToggleState.
   var _useToggleState = useToggleState(isToggled),
     isHovered = _useToggleState.isHovered,