@app-studio/web 0.3.66 → 0.3.68

package/dist/web.cjs.development.js

@@ -11,9 +11,7 @@ var reactRouterDom = require('react-router-dom');
 var format = _interopDefault(require('date-fns/format'));
 var formik = require('formik');
 var zustand = require('zustand');
-var View$1 = require('src/components/Layout/View/View');
-var components = require('src/components');
-var Svg = require('src/components/Svg');
+var Horizontal$1 = require('src/components/Layout/Horizontal/Horizontal');
 
 var useButtonState = function useButtonState() {
   var _React$useState = React__default.useState(false),
@@ -415,6 +413,35 @@ var OpenEyeSvg = function OpenEyeSvg(_ref) {
   }))));
 };
 
+var _excluded$a = ["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);
+  return React__default.createElement(Center, {
+    width: size + "px",
+    height: size + "px"
+  }, React__default.createElement("svg", Object.assign({
+    height: size + "px",
+    width: size + "px",
+    version: "1.1",
+    id: "Capa_1",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 192.146 192.146",
+    fill: color
+  }, props), React__default.createElement("g", {
+    id: "SVGRepo_bgCarrier"
+  }), React__default.createElement("g", {
+    id: "SVGRepo_tracerCarrier"
+  }), React__default.createElement("g", {
+    id: "SVGRepo_iconCarrier"
+  }, React__default.createElement("g", null, React__default.createElement("g", null, React__default.createElement("g", null, React__default.createElement("path", {
+    d: "M108.186,144.372c0,7.054-4.729,12.32-12.037,12.32h-0.254c-7.054,0-11.92-5.266-11.92-12.32 c0-7.298,5.012-12.31,12.174-12.31C103.311,132.062,108.059,137.054,108.186,144.372z M88.44,125.301h15.447l2.951-61.298H85.46 L88.44,125.301z M190.372,177.034c-2.237,3.664-6.214,5.921-10.493,5.921H12.282c-4.426,0-8.51-2.384-10.698-6.233 c-2.159-3.849-2.11-8.549,0.147-12.349l84.111-149.22c2.208-3.722,6.204-5.96,10.522-5.96h0.332 c4.445,0.107,8.441,2.618,10.513,6.546l83.515,149.229C192.717,168.768,192.629,173.331,190.372,177.034z M179.879,170.634 L96.354,21.454L12.292,170.634H179.879z"
+  })))))));
+};
+
 var IconSizes = {
   xs: 12,
   sm: 14,
@@ -428,7 +455,7 @@ var IconSizes = {
   '6xl': 64
 };
 
-var _excluded$a = ["children", "href", "iconSize", "underline", "isHovered", "isExternal", "styles", "setIsHovered"];
+var _excluded$b = ["children", "href", "iconSize", "underline", "isHovered", "isExternal", "styles", "setIsHovered"];
 var LinkView = function LinkView(_ref) {
   var children = _ref.children,
     _ref$href = _ref.href,
@@ -448,7 +475,7 @@ var LinkView = function LinkView(_ref) {
     } : _ref$styles,
     _ref$setIsHovered = _ref.setIsHovered,
     setIsHovered = _ref$setIsHovered === void 0 ? function () {} : _ref$setIsHovered,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
   var handleHover = function handleHover() {
     if (underline === 'hover') setIsHovered(true);
   };
@@ -586,7 +613,7 @@ var DefaultSpeeds = {
   slow: 300
 };
 
-var _excluded$b = ["size", "speed", "color"],
+var _excluded$c = ["size", "speed", "color"],
   _excluded2 = ["size", "speed", "color"],
   _excluded3 = ["size", "speed", "color"],
   _excluded4 = ["size", "children", "textColor", "loaderColor", "type", "speed", "textPosition"];
@@ -597,7 +624,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$b);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
   var theme = appStudio.useTheme();
   var colorStyle = theme.getColor(color);
   var sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
@@ -771,7 +798,7 @@ var LoaderComponent = function LoaderComponent(props) {
  */
 var Loader = LoaderComponent;
 
-var _excluded$c = ["icon", "shadow", "children", "ariaLabel", "externalHref", "isAuto", "isFilled", "isIconRounded", "isLoading", "isDisabled", "size", "variant", "iconPosition", "colorScheme", "shape", "onClick", "loaderProps", "loaderPosition", "effect", "isHovered"];
+var _excluded$d = ["icon", "shadow", "children", "ariaLabel", "externalHref", "isAuto", "isFilled", "isIconRounded", "isLoading", "isDisabled", "size", "variant", "iconPosition", "colorScheme", "shape", "onClick", "loaderProps", "loaderPosition", "effect", "isHovered"];
 var ButtonView = function ButtonView(_ref) {
   var _props$onClick;
   var icon = _ref.icon,
@@ -808,7 +835,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$c);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
   var isActive = !(isDisabled || isLoading);
   var defaultNativeProps = {
     disabled: !isActive
@@ -952,7 +979,7 @@ var HeadingSizes = {
   }
 };
 
-var _excluded$d = ["children", "heading", "isItalic", "isUnderlined", "isStriked", "weight", "size"];
+var _excluded$e = ["children", "heading", "isItalic", "isUnderlined", "isStriked", "weight", "size"];
 var LabelView = function LabelView(_ref) {
   var children = _ref.children,
     heading = _ref.heading,
@@ -966,7 +993,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$d);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
   var headingStyles = heading ? HeadingSizes[heading] : {};
   return React__default.createElement(appStudio.Element, Object.assign({
     as: "label",
@@ -1038,7 +1065,7 @@ var IconSizes$2 = {
   '6xl': 60
 };
 
-var _excluded$e = ["id", "icon", "name", "label", "isChecked", "onChange", "onValueChange", "shadow", "labelPosition", "size", "colorScheme", "error", "isSelected", "isHovered", "isDisabled", "isReadOnly", "isIndeterminate", "defaultIsSelected", "setIsSelected", "setIsHovered", "styles"];
+var _excluded$f = ["id", "icon", "name", "label", "isChecked", "onChange", "onValueChange", "shadow", "labelPosition", "size", "colorScheme", "error", "isSelected", "isHovered", "isDisabled", "isReadOnly", "isIndeterminate", "defaultIsSelected", "setIsSelected", "setIsHovered", "styles"];
 var CheckboxView = function CheckboxView(_ref) {
   var id = _ref.id,
     icon = _ref.icon,
@@ -1075,7 +1102,7 @@ var CheckboxView = function CheckboxView(_ref) {
       checkbox: {},
       label: {}
     } : _ref$styles,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
   var handleHover = function handleHover() {
     return setIsHovered(!isHovered);
   };
@@ -2649,7 +2676,7 @@ var HeadingSizes$1 = {
   }
 };
 
-var _excluded$f = ["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,
@@ -2713,7 +2740,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$f);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded$g);
   var headingStyles = heading ? HeadingSizes$1[heading] : {};
   var noLineBreak = isSub || isSup ? {
     display: 'inline'
@@ -2743,14 +2770,14 @@ var TextComponent = function TextComponent(props) {
  */
 var Text = TextComponent;
 
-var _excluded$g = ["children", "styles"];
+var _excluded$h = ["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$g);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
   return React__default.createElement(Text, Object.assign({
     size: "xs",
     marginVertical: 0,
@@ -2759,7 +2786,7 @@ var HelperText = function HelperText(_ref) {
   }, styles['helperText'], props), children);
 };
 
-var _excluded$h = ["children", "wrap", "justify", "isReversed"];
+var _excluded$i = ["children", "wrap", "justify", "isReversed"];
 var VerticalView = function VerticalView(_ref) {
   var children = _ref.children,
     _ref$wrap = _ref.wrap,
@@ -2768,7 +2795,7 @@ var VerticalView = function VerticalView(_ref) {
     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$h);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
   return React__default.createElement(appStudio.View, Object.assign({
     display: "flex",
     flexWrap: wrap,
@@ -2785,14 +2812,14 @@ var VerticalComponent = function VerticalComponent(props) {
 };
 var Vertical = VerticalComponent;
 
-var _excluded$i = ["children", "helperText", "error", "styles"];
+var _excluded$j = ["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$i);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
   return React__default.createElement(Vertical, Object.assign({
     gap: 5,
     position: "relative"
@@ -2851,7 +2878,7 @@ var PaddingWithoutLabel = {
   paddingRight: 36
 };
 
-var _excluded$j = ["label", "shadow", "children", "value", "size", "shape", "variant", "error", "isWithLabel", "isFocused", "isHovered", "isDisabled", "isReadOnly", "colorScheme", "styles"];
+var _excluded$k = ["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,
@@ -2879,7 +2906,7 @@ var FieldContent = function FieldContent(_ref) {
     styles = _ref$styles === void 0 ? {
       pickerBox: {}
     } : _ref$styles,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
   var isInteractive = (isHovered || isFocused) && !isDisabled;
   var color = error ? 'error' : isInteractive ? colorScheme : 'midgray';
   return React__default.createElement(Horizontal, Object.assign({
@@ -2900,10 +2927,10 @@ var FieldContent = function FieldContent(_ref) {
   }, isWithLabel ? PadddingWithLabel : PaddingWithoutLabel, shadow, Shapes[shape], InputVariants[variant], styles['box'], props), children);
 };
 
-var _excluded$k = ["children"];
+var _excluded$l = ["children"];
 var FieldIcons = function FieldIcons(_ref) {
   var children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
   return React__default.createElement(Center, Object.assign({
     gap: 10,
     right: 16,
@@ -2913,7 +2940,7 @@ var FieldIcons = function FieldIcons(_ref) {
   }, props), children);
 };
 
-var _excluded$l = ["children", "size", "error", "color", "styles"];
+var _excluded$m = ["children", "size", "error", "color", "styles"];
 var FieldLabel = function FieldLabel(_ref) {
   var children = _ref.children,
     _ref$size = _ref.size,
@@ -2926,7 +2953,7 @@ var FieldLabel = function FieldLabel(_ref) {
     styles = _ref$styles === void 0 ? {
       label: {}
     } : _ref$styles,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
   return React__default.createElement(Label, Object.assign({
     top: 6,
     zIndex: 1000,
@@ -2939,10 +2966,10 @@ var FieldLabel = function FieldLabel(_ref) {
   }, styles['label'], props), children);
 };
 
-var _excluded$m = ["children"];
+var _excluded$n = ["children"];
 var FieldWrapper = function FieldWrapper(_ref) {
   var children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
   return React__default.createElement(Vertical, Object.assign({
     width: "100%"
   }, props), children);
@@ -2956,7 +2983,7 @@ var IconSizes$3 = {
   xl: 16
 };
 
-var _excluded$n = ["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$o = ["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"
@@ -3096,7 +3123,7 @@ var CountryPickerView = function CountryPickerView(_ref3) {
       helperText: {},
       box: {}
     } : _ref3$styles,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded$n);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded$o);
   var _useTheme = appStudio.useTheme(),
     getColor = _useTheme.getColor;
   var IconColor = getColor('color.blueGray.700');
@@ -3234,7 +3261,7 @@ var useDatePickerState = function useDatePickerState() {
   };
 };
 
-var _excluded$o = ["id", "icon", "name", "label", "date", "children", "helperText", "shadow", "size", "variant", "shape", "colorScheme", "styles", "error", "isHovered", "isFocused", "isDisabled", "isReadOnly", "setDate", "setIsFocused", "setIsHovered", "onChange", "onChangeText"];
+var _excluded$p = ["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"
@@ -3282,7 +3309,7 @@ var DatePickerView = function DatePickerView(_ref) {
     setIsHovered = _ref$setIsHovered === void 0 ? function () {} : _ref$setIsHovered,
     onChange = _ref.onChange,
     onChangeText = _ref.onChangeText,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
   var isWithLabel = !!(isFocused && label);
   var handleHover = function handleHover() {
     return setIsHovered(!isHovered);
@@ -3407,7 +3434,7 @@ var usePasswordState = function usePasswordState(props) {
   }, props, textFieldStates);
 };
 
-var _excluded$p = ["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$q = ["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"
@@ -3465,7 +3492,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$p);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
   var _useTheme = appStudio.useTheme(),
     getColor = _useTheme.getColor;
   var IconColor = getColor('color.blueGray.700');
@@ -3573,7 +3600,7 @@ var TextFieldView = function TextFieldView(_ref) {
   }), rightChild && React__default.createElement(React__default.Fragment, null, rightChild))));
 };
 
-var _excluded$q = ["visibleIcon", "hiddenIcon"],
+var _excluded$r = ["visibleIcon", "hiddenIcon"],
   _excluded2$1 = ["isVisible", "setIsVisible"];
 var PasswordComponent = function PasswordComponent(_ref) {
   var _ref$visibleIcon = _ref.visibleIcon,
@@ -3584,7 +3611,7 @@ var PasswordComponent = function PasswordComponent(_ref) {
     hiddenIcon = _ref$hiddenIcon === void 0 ? React__default.createElement(CloseEyeSvg, {
       size: 14
     }) : _ref$hiddenIcon,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
   var _usePasswordState = usePasswordState(props),
     isVisible = _usePasswordState.isVisible,
     setIsVisible = _usePasswordState.setIsVisible,
@@ -3652,7 +3679,7 @@ var IconSizes$4 = {
   xl: 16
 };
 
-var _excluded$r = ["isHovered", "setIsHovered", "option", "size", "callback"],
+var _excluded$s = ["isHovered", "setIsHovered", "option", "size", "callback"],
   _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"];
@@ -3664,7 +3691,7 @@ var Item = function Item(_ref) {
     size = _ref$size === void 0 ? 'md' : _ref$size,
     _ref$callback = _ref.callback,
     callback = _ref$callback === void 0 ? function () {} : _ref$callback,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
   var handleOptionClick = function handleOptionClick(option) {
     return callback(option);
   };
@@ -4135,7 +4162,7 @@ var SliderPadding = {
   }
 };
 
-var _excluded$s = ["id", "name", "label", "inActiveChild", "activeChild", "labelPosition", "shadow", "size", "colorScheme", "value", "isHovered", "isDisabled", "isReadOnly", "onChange", "setValue", "setIsHovered", "styles"];
+var _excluded$t = ["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"
@@ -4174,7 +4201,7 @@ var SwitchView = function SwitchView(_ref) {
       circle: {},
       label: {}
     } : _ref$styles,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
   var handleToggle = function handleToggle(event) {
     if (!isReadOnly) {
       setValue(!value);
@@ -4260,7 +4287,7 @@ var useTextAreaState = function useTextAreaState(_ref) {
   };
 };
 
-var _excluded$t = ["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$u = ["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,
@@ -4315,7 +4342,7 @@ var TextAreaView = function TextAreaView(_ref) {
       helperText: {},
       field: {}
     } : _ref$styles,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
   var isWithLabel = !!(isFocused && label);
   var fieldStyles = _extends({
     margin: 0,
@@ -4483,7 +4510,7 @@ var FormikForm = function FormikForm(_ref) {
   }, React__default.createElement(appStudio.Form, null, children));
 };
 
-var _excluded$u = ["name", "type"];
+var _excluded$v = ["name", "type"];
 var getInputTypeProps = function getInputTypeProps(type) {
   switch (type) {
     case 'email':
@@ -4513,7 +4540,7 @@ var getInputTypeProps = function getInputTypeProps(type) {
 var useFormikInput = function useFormikInput(_ref) {
   var name = _ref.name,
     type = _ref.type,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
   var focus = useFormFocus();
   var _useFormikContext = formik.useFormikContext(),
     touched = _useFormikContext.touched,
@@ -4560,11 +4587,11 @@ var useFormikInput = function useFormikInput(_ref) {
 // import FormRater from 'src/Rate/Rate';
 // import Upload from 'src/Upload/Upload';
 
-var _excluded$v = ["value"];
+var _excluded$w = ["value"];
 var CheckboxComponent$1 = function CheckboxComponent(props) {
   var _useFormikInput = useFormikInput(props),
     value = _useFormikInput.value,
-    formProps = _objectWithoutPropertiesLoose(_useFormikInput, _excluded$v);
+    formProps = _objectWithoutPropertiesLoose(_useFormikInput, _excluded$w);
   formProps.isChecked = value;
   var checkboxStates = useCheckboxState(props);
   return React__default.createElement(CheckboxView, Object.assign({}, checkboxStates, formProps));
@@ -4622,11 +4649,11 @@ var TextAreaComponent$1 = function TextAreaComponent(props) {
  */
 var FormikTextArea = TextAreaComponent$1;
 
-var _excluded$w = ["value"];
+var _excluded$x = ["value"];
 var TextFieldComponent$1 = function TextFieldComponent(props) {
   var formProps = useFormikInput(props);
   var _useTextFieldState = useTextFieldState(props),
-    textFieldStates = _objectWithoutPropertiesLoose(_useTextFieldState, _excluded$w);
+    textFieldStates = _objectWithoutPropertiesLoose(_useTextFieldState, _excluded$x);
   return React__default.createElement(TextFieldView, Object.assign({}, textFieldStates, formProps));
 };
 /**
@@ -4634,7 +4661,7 @@ var TextFieldComponent$1 = function TextFieldComponent(props) {
  */
 var FormikTextField = TextFieldComponent$1;
 
-var _excluded$x = ["visibleIcon", "hiddenIcon"],
+var _excluded$y = ["visibleIcon", "hiddenIcon"],
   _excluded2$3 = ["isVisible", "setIsVisible"];
 var PasswordComponent$1 = function PasswordComponent(_ref) {
   var _ref$visibleIcon = _ref.visibleIcon,
@@ -4645,7 +4672,7 @@ var PasswordComponent$1 = function PasswordComponent(_ref) {
     hiddenIcon = _ref$hiddenIcon === void 0 ? React__default.createElement(CloseEyeSvg, {
       size: 14
     }) : _ref$hiddenIcon,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
   var formProps = useFormikInput(props);
   var _usePasswordState = usePasswordState(formProps),
     isVisible = _usePasswordState.isVisible,
@@ -4753,7 +4780,7 @@ var HeaderIconSizes = {
   xl: 28
 };
 
-var _excluded$y = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position"],
+var _excluded$z = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position"],
   _excluded2$4 = ["children", "shadow", "isFullScreen", "shape"],
   _excluded3$2 = ["children", "buttonColor", "iconSize", "buttonPosition"],
   _excluded4$2 = ["children"],
@@ -4769,7 +4796,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$y);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
   var handleClick = function handleClick() {
     if (!isClosePrevented) onClose();
   };
@@ -4925,12 +4952,12 @@ Modal.Body = ModalBody;
 Modal.Footer = ModalFooter;
 Modal.Layout = ModalLayout;
 
-var _excluded$z = ["src", "color"],
+var _excluded$A = ["src", "color"],
   _excluded2$5 = ["path"];
 var FileSVG = function FileSVG(_ref) {
   var src = _ref.src,
     color = _ref.color,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
   var _useTheme = appStudio.useTheme(),
     getColor = _useTheme.getColor;
   var Colorprops = color ? {
@@ -4987,13 +5014,13 @@ var TabsView = function TabsView(props) {
   var isContentActive = function isContentActive(tab) {
     return tab.value === tabsState[0].value;
   };
-  return React__default.createElement(components.Horizontal, Object.assign({
+  return React__default.createElement(Horizontal, Object.assign({
     width: "100w",
     height: '100%'
-  }, styles == null ? void 0 : styles.container), React__default.createElement(components.Horizontal, Object.assign({
+  }, styles == null ? void 0 : styles.container), React__default.createElement(Horizontal, Object.assign({
     marginBottom: 20
   }, styles == null ? void 0 : styles.headerTabs), tabs.map(function (tab, idx) {
-    return React__default.createElement(components.Button, Object.assign({
+    return React__default.createElement(Button, Object.assign({
       key: tab.title,
       onClick: function onClick() {
         moveSelectedTabToTop(idx);
@@ -5002,12 +5029,12 @@ var TabsView = function TabsView(props) {
       shape: "pillShaped",
       cursor: "pointer",
       isAuto: true
-    }, styles == null ? void 0 : styles.tab, isActive.value === tab.value ? styles == null ? void 0 : styles.activeTab : {}), React__default.createElement(components.Text, Object.assign({}, styles == null ? void 0 : styles.title, isActive.value === tab.value ? styles == null ? void 0 : styles.activeText : {}), tab.title));
-  })), React__default.createElement(View$1.View, Object.assign({
+    }, styles == null ? void 0 : styles.tab, isActive.value === tab.value ? styles == null ? void 0 : styles.activeTab : {}), React__default.createElement(Text, Object.assign({}, styles == null ? void 0 : styles.title, isActive.value === tab.value ? styles == null ? void 0 : styles.activeText : {}), tab.title));
+  })), React__default.createElement(View, Object.assign({
     width: '100%',
     height: "100%"
   }, styles == null ? void 0 : styles.content), tabsState.map(function (tab, idx) {
-    return isContentActive(tab) && React__default.createElement(View$1.View, {
+    return isContentActive(tab) && React__default.createElement(View, {
       key: idx
     }, tab.content);
   })));
@@ -5091,7 +5118,7 @@ var AlertView = function AlertView(_ref) {
     description = _ref.description,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'default' : _ref$variant;
-  return React__default.createElement(components.Horizontal, Object.assign({
+  return React__default.createElement(Horizontal, Object.assign({
     gap: 15,
     borderRadius: 10,
     borderWidth: 1,
@@ -5099,17 +5126,17 @@ var AlertView = function AlertView(_ref) {
     padding: 16,
     wrap: "nowrap",
     borderColor: Themes[variant].container.border
-  }, styles == null ? void 0 : styles.container), React__default.createElement(components.View, {
+  }, styles == null ? void 0 : styles.container), React__default.createElement(View, {
     alignSelf: 'center'
-  }, icon ? icon : React__default.createElement(Svg.WarningSvg, {
+  }, icon ? icon : React__default.createElement(WarningSvg, {
     size: 24,
     color: (_styles$icon$color = styles == null ? void 0 : styles.icon.color) != null ? _styles$icon$color : Themes[variant].content.color
-  })), React__default.createElement(components.Vertical, {
+  })), React__default.createElement(Vertical, {
     gap: 10
-  }, React__default.createElement(components.Text, Object.assign({
+  }, React__default.createElement(Text, Object.assign({
     fontSize: "16px",
     color: Themes[variant].content.color
-  }, styles == null ? void 0 : styles.title), title), React__default.createElement(components.Text, Object.assign({
+  }, styles == null ? void 0 : styles.title), title), React__default.createElement(Text, Object.assign({
     fontSize: "14px",
     color: Themes[variant].content.color
   }, styles == null ? void 0 : styles.description), description)));
@@ -5131,19 +5158,19 @@ var AlertComponent = function AlertComponent(_ref) {
 };
 var Alert = AlertComponent;
 
-var _excluded$A = ["ratio", "children"];
+var _excluded$B = ["ratio", "children"];
 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$A);
-  return React__default.createElement(components.Center, Object.assign({
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
+  return React__default.createElement(Center, Object.assign({
     width: '100%',
     position: "relative",
     overflow: "hidden",
     paddingTop: 1 / ratio * 100 + "%",
     borderRadius: 8
-  }, props), React__default.createElement(components.View, {
+  }, props), React__default.createElement(View, {
     position: "absolute",
     top: 0,
     right: 0,
@@ -5152,11 +5179,11 @@ var AspectRatioView = function AspectRatioView(_ref) {
   }, children));
 };
 
-var _excluded$B = ["ratio", "children"];
+var _excluded$C = ["ratio", "children"];
 var AspectRatioComponent = function AspectRatioComponent(_ref) {
   var ratio = _ref.ratio,
     children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$C);
   return React__default.createElement(AspectRatioView, Object.assign({
     ratio: ratio
   }, props), children);
@@ -5194,7 +5221,7 @@ var AvatarView = function AvatarView(_ref) {
   var imageStyle = _extends({
     objectFit: 'cover'
   }, (styles == null ? void 0 : styles.image) || {});
-  return React__default.createElement(components.Center, Object.assign({
+  return React__default.createElement(Center, Object.assign({
     role: "avatar",
     width: avatarSize,
     height: avatarSize,
@@ -5213,7 +5240,7 @@ var AvatarView = function AvatarView(_ref) {
     onError: function onError() {
       return setImageError(true);
     }
-  }) : React__default.createElement(components.Text, Object.assign({
+  }) : React__default.createElement(Text, Object.assign({
     size: size
   }, styles == null ? void 0 : styles.fallback), fallback));
 };
@@ -5340,9 +5367,9 @@ var BadgeView = function BadgeView(_ref) {
     width: 'fit-content',
     borderRadius: BadgeShapes[shape]
   }, BadgeSizes[size], BadgeVariants[variant], position ? PositionStyles[position] : {}, styles == null ? void 0 : styles.container);
-  return React__default.createElement(components.Center, Object.assign({
+  return React__default.createElement(Center, Object.assign({
     role: "badge"
-  }, combinedStyles), React__default.createElement(components.Text, Object.assign({
+  }, combinedStyles), React__default.createElement(Text, Object.assign({
     role: "badgeText",
     size: size
   }, styles == null ? void 0 : styles.text), content));
@@ -5388,7 +5415,7 @@ var ToggleShapes = {
   pillShaped: 24
 };
 
-var _excluded$C = ["children", "shape", "colorScheme", "variant", "isHovered", "setIsHovered", "isDisabled", "isToggle", "setIsToggled", "onToggle"];
+var _excluded$D = ["children", "shape", "colorScheme", "variant", "isHovered", "setIsHovered", "isDisabled", "isToggle", "setIsToggled", "onToggle"];
 var ToggleView = function ToggleView(_ref) {
   var children = _ref.children,
     _ref$shape = _ref.shape,
@@ -5403,7 +5430,7 @@ var ToggleView = function ToggleView(_ref) {
     isToggle = _ref.isToggle,
     setIsToggled = _ref.setIsToggled,
     onToggle = _ref.onToggle,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$C);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$D);
   var toggleColor = !isDisabled ? colorScheme : 'theme.disabled';
   var isActive = !!(isToggle || isHovered);
   var ToggleVariants = {
@@ -5433,7 +5460,7 @@ var ToggleView = function ToggleView(_ref) {
     }
   };
 
-  return React__default.createElement(components.Center, Object.assign({
+  return React__default.createElement(Center, Object.assign({
     role: "Toggle",
     padding: shape === 'pillShaped' ? '10px 12px' : '8px',
     width: "fit-content",
@@ -5451,7 +5478,7 @@ var ToggleView = function ToggleView(_ref) {
   }, ToggleVariants[variant], props), children);
 };
 
-var _excluded$D = ["children", "shape", "colorScheme", "variant", "isDisabled", "isToggled", "onToggle"];
+var _excluded$E = ["children", "shape", "colorScheme", "variant", "isDisabled", "isToggled", "onToggle"];
 var ToggleComponent = function ToggleComponent(_ref) {
   var children = _ref.children,
     shape = _ref.shape,
@@ -5461,7 +5488,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$D);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$E);
   var _useToggleState = useToggleState(isToggled),
     isHovered = _useToggleState.isHovered,
     setIsHovered = _useToggleState.setIsHovered,
@@ -5521,12 +5548,12 @@ var ToggleGroupView = function ToggleGroupView(_ref) {
       return newActiveToggles;
     });
   }, [onToggleChange, setActiveToggles]);
-  return React__default.createElement(components.Horizontal, {
+  return React__default.createElement(Horizontal$1.Horizontal, {
     role: "ToggleGroup",
     display: "flex",
     gap: 5
   }, items.map(function (item) {
-    return React__default.createElement(components.Toggle, {
+    return React__default.createElement(Toggle, {
       role: "toggle-" + item.id,
       key: item.id,
       colorScheme: colorScheme,