@app-studio/web 0.7.7 → 0.7.10

package/dist/web.esm.js

@@ -57,71 +57,23 @@ var useLinkState = function useLinkState() {
   };
 };
 
-var Top = function Top(props) {
-  return React.createElement(View$1, Object.assign({
-    marginBottom: "auto"
-  }, props));
-};
-var Bottom = function Bottom(props) {
-  return React.createElement(View$1, Object.assign({
-    marginTop: "auto"
-  }, props));
-};
-var Left = function Left(props) {
-  return React.createElement(View$1, Object.assign({
-    marginRight: "auto"
-  }, props));
-};
-var Right = function Right(props) {
-  return React.createElement(View$1, Object.assign({
-    marginLeft: "auto"
-  }, props));
-};
-var Inline = function Inline(props) {
-  return React.createElement(View$1, Object.assign({
-    display: 'inline-flex',
-    wordBreak: "break-word"
-  }, props));
-};
-var View = View$1;
-
-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.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.createElement(HorizontalView, Object.assign({}, props));
+  return React.createElement(View$1, 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.createElement(View, Object.assign({
+var CenterView = function CenterView(props) {
+  return React.createElement(View$1, Object.assign({
     display: "flex",
     justifyContent: "center",
-    alignItems: "center",
-    flexWrap: wrap
-  }, props), children);
+    alignItems: "center"
+  }, props));
 };
 
 /**
@@ -132,11 +84,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.createElement(Center, {
     width: size + "px",
     height: size + "px"
@@ -172,11 +124,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.createElement(Center, {
     width: size + "px",
     height: size + "px"
@@ -214,13 +166,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.createElement(Center, {
     width: size + "px",
     height: size + "px"
@@ -250,13 +202,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.createElement(Center, {
     width: size + "px",
     height: size + "px"
@@ -281,13 +233,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.createElement(Center, {
     width: size + "px",
     height: size + "px"
@@ -312,13 +264,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.createElement(Center, {
     width: size + "px",
     height: size + "px"
@@ -347,13 +299,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.createElement(Center, {
     width: size + "px",
     height: size + "px"
@@ -379,13 +331,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.createElement(Center, {
     width: size + "px",
     height: size + "px"
@@ -410,13 +362,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.createElement(Center, {
     width: size + "px",
     height: size + "px"
@@ -439,13 +391,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.createElement(Center, {
     width: size + "px",
     height: size + "px"
@@ -469,13 +421,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.createElement(Center, {
     width: size + "px",
     height: size + "px"
@@ -498,13 +450,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.createElement(Center, {
     width: size + "px",
     height: size + "px"
@@ -547,7 +499,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,
@@ -567,7 +519,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);
   };
@@ -702,6 +654,34 @@ var IconSizes$1 = {
   }
 };
 
+var Top = function Top(props) {
+  return React.createElement(View$1, Object.assign({
+    marginBottom: "auto"
+  }, props));
+};
+var Bottom = function Bottom(props) {
+  return React.createElement(View$1, Object.assign({
+    marginTop: "auto"
+  }, props));
+};
+var Left = function Left(props) {
+  return React.createElement(View$1, Object.assign({
+    marginRight: "auto"
+  }, props));
+};
+var Right = function Right(props) {
+  return React.createElement(View$1, Object.assign({
+    marginLeft: "auto"
+  }, props));
+};
+var Inline = function Inline(props) {
+  return React.createElement(View$1, Object.assign({
+    display: 'inline-flex',
+    wordBreak: "break-word"
+  }, props));
+};
+var View = View$1;
+
 var DefaultSizes = {
   xs: 14,
   sm: 18,
@@ -720,7 +700,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"];
@@ -731,7 +711,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 = useTheme();
   var colorStyle = theme.getColor(color);
   var sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
@@ -905,7 +885,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;
@@ -943,7 +923,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 = useTheme(),
     getColor = _useTheme.getColor;
   var isActive = !(isDisabled || isLoading);
@@ -1115,7 +1095,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,
@@ -1129,7 +1109,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.
@@ -1249,7 +1229,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,
@@ -1313,7 +1293,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'
@@ -1343,7 +1323,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,
@@ -1381,7 +1361,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);
   };
@@ -2935,14 +2915,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.createElement(Text, Object.assign({
     size: "xs",
     marginVertical: 0,
@@ -2951,22 +2931,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.createElement(View$1, Object.assign({
     display: "flex",
     flexWrap: wrap,
-    flexDirection: isReversed ? 'column-reverse' : 'column',
-    justifyContent: justify
-  }, props), children);
+    justifyContent: justifyContent,
+    flexDirection: isReversed ? 'column-reverse' : 'column'
+  }, props));
 };
 
 /**
@@ -2977,14 +2956,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.createElement(Vertical, Object.assign({
     gap: 5,
     position: "relative"
@@ -3043,7 +3022,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,
@@ -3071,7 +3050,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.createElement(Horizontal, Object.assign({
@@ -3092,10 +3071,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.createElement(Center, Object.assign({
     gap: 10,
     right: 16,
@@ -3105,7 +3084,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,
@@ -3118,7 +3097,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.createElement(Label, Object.assign({
     top: 6,
     zIndex: 1000,
@@ -3131,10 +3110,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.createElement(Vertical, Object.assign({
     width: "100%"
   }, props), children);
@@ -3148,7 +3127,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.createElement(Element, Object.assign({
     as: "ul"
@@ -3288,7 +3267,7 @@ var CountryPickerView = function CountryPickerView(_ref3) {
       helperText: {},
       box: {}
     } : _ref3$styles,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded$r);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded$p);
   var _useTheme = useTheme(),
     getColor = _useTheme.getColor;
   var IconColor = getColor('color.blueGray.700');
@@ -3426,7 +3405,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.createElement(Input, Object.assign({
     type: "date"
@@ -3474,7 +3453,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);
@@ -3599,7 +3578,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.createElement(Input, Object.assign({
     type: "text"
@@ -3657,7 +3636,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 = useTheme(),
     getColor = _useTheme.getColor;
   var IconColor = getColor('color.blueGray.700');
@@ -3765,7 +3744,7 @@ var TextFieldView = function TextFieldView(_ref) {
   }), rightChild && React.createElement(React.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,
@@ -3776,7 +3755,7 @@ var PasswordComponent = function PasswordComponent(_ref) {
     hiddenIcon = _ref$hiddenIcon === void 0 ? React.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,
@@ -3802,7 +3781,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.useState(true),
     hide = _React$useState[0],
     setHide = _React$useState[1];
@@ -3849,7 +3828,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"];
@@ -3862,7 +3841,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);
   };
@@ -3878,14 +3857,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.createElement(Text, Object.assign({
     fontSize: 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,
@@ -3897,7 +3877,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%',
@@ -3910,7 +3891,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.createElement(Text, Object.assign({}, fieldStyles), (value === '' || value && value.length === 0) && !!placeholder ? placeholder : React.createElement(React.Fragment, null, typeof value === 'string' ? value : value && value.length > 0 && React.createElement(Horizontal, {
+  var option = options.find(function (option) {
+    return option.value === value;
+  });
+  return React.createElement(Text, Object.assign({}, fieldStyles), (value === '' || value && value.length === 0) && !!placeholder ? placeholder : React.createElement(React.Fragment, null, typeof value === 'string' ? (_option$label = option == null ? void 0 : option.label) != null ? _option$label : value : value && value.length > 0 && React.createElement(Horizontal, {
     gap: 6
   }, value.map(function (option) {
     return React.createElement(MultiSelect, {
@@ -3952,9 +3936,9 @@ var HiddenSelect = function HiddenSelect(_ref3) {
     multiple: isMulti
   }, props), options.map(function (option) {
     return React.createElement("option", {
-      key: option,
-      value: option
-    }, option);
+      key: option.value,
+      value: option.value
+    }, option.label);
   }));
 };
 var DropDown$1 = function DropDown(_ref4) {
@@ -4011,7 +3995,7 @@ var DropDown$1 = function DropDown(_ref4) {
     }
   }, shadow, styles['dropDown']), options.map(function (option, index) {
     return React.createElement(Item, Object.assign({
-      key: option,
+      key: option.value,
       size: size,
       style: styles['text'],
       option: option,
@@ -4175,6 +4159,7 @@ var SelectView = function SelectView(_ref6) {
     isMulti: isMulti,
     onFocus: handleFocus
   }, props)), React.createElement(SelectBox, {
+    options: options,
     size: size,
     styles: styles,
     value: value,
@@ -4352,7 +4337,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.createElement(Input, Object.assign({
     type: "checkbox"
@@ -4391,7 +4376,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);
@@ -4477,7 +4462,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,
@@ -4532,7 +4517,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,
@@ -4700,7 +4685,7 @@ var FormikForm = function FormikForm(_ref) {
   }, React.createElement(Form, null, children));
 };
 
-var _excluded$y = ["name", "type"];
+var _excluded$w = ["name", "type"];
 var getInputTypeProps = function getInputTypeProps(type) {
   switch (type) {
     case 'email':
@@ -4730,7 +4715,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 = useFormikContext(),
     touched = _useFormikContext.touched,
@@ -4777,11 +4762,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.createElement(CheckboxView, Object.assign({}, checkboxStates, formProps));
@@ -4814,6 +4799,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.createElement(SelectView, Object.assign({}, selectStates, formProps));
 };
@@ -4839,11 +4828,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.createElement(TextFieldView, Object.assign({}, textFieldStates, formProps));
 };
 /**
@@ -4851,7 +4840,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,
@@ -4862,7 +4851,7 @@ var PasswordComponent$1 = function PasswordComponent(_ref) {
     hiddenIcon = _ref$hiddenIcon === void 0 ? React.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,
@@ -4925,11 +4914,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.createElement(Center, {
     width: size + "px",
     height: size + "px"
@@ -4957,13 +4946,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.createElement(Center, {
     width: size + "px",
     height: size + "px"
@@ -4990,7 +4979,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,
@@ -5014,7 +5003,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.
   useEffect(function () {
     var handleClickOutside = function handleClickOutside(event) {
@@ -5070,7 +5059,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.createElement(Horizontal, Object.assign({
@@ -5123,7 +5112,7 @@ var ComboBoxView = function ComboBoxView(_ref) {
     padding: 4
   }, filteredItems.map(function (item, index) {
     return React.createElement(Horizontal, Object.assign({
-      justify: "space-between",
+      justifyContent: "space-between",
       key: item.value,
       padding: "12px",
       cursor: "pointer",
@@ -5139,12 +5128,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
@@ -5245,7 +5234,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"],
@@ -5261,7 +5250,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();
   };
@@ -5415,12 +5404,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 = useTheme(),
     getColor = _useTheme.getColor;
   var Colorprops = color ? {
@@ -5639,13 +5628,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.createElement(Center, Object.assign({
     width: '100%',
     position: "relative",
@@ -5661,12 +5650,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.createElement(AspectRatioView, Object.assign({
     ratio: ratio
@@ -5920,7 +5909,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,
@@ -5935,7 +5924,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 = {
@@ -5981,7 +5970,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,
@@ -5992,7 +5981,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,