@app-studio/web 0.3.67 → 0.3.69

package/dist/web.esm.js

@@ -4,13 +4,6 @@ import { Link as Link$1 } from 'react-router-dom';
 import format from 'date-fns/format';
 import { useFormikContext } from 'formik';
 import { create } from 'zustand';
-import { View as View$2 } from 'src/components/Layout/View/View';
-import { Horizontal as Horizontal$1 } from 'src/components/Layout/Horizontal/Horizontal';
-import { Button as Button$1 } from 'src/components/Button/Button';
-import { Text as Text$1 } from 'src/components/Text/Text';
-import { Vertical as Vertical$1 } from 'src/components/Layout/Vertical/Vertical';
-import { WarningSvg } from 'src/components/Svg';
-import { Center as Center$1 } from 'src/components/Layout/Center/Center';
 
 var useButtonState = function useButtonState() {
   var _React$useState = React.useState(false),
@@ -412,6 +405,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.createElement(Center, {
+    width: size + "px",
+    height: size + "px"
+  }, React.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.createElement("g", {
+    id: "SVGRepo_bgCarrier"
+  }), React.createElement("g", {
+    id: "SVGRepo_tracerCarrier"
+  }), React.createElement("g", {
+    id: "SVGRepo_iconCarrier"
+  }, React.createElement("g", null, React.createElement("g", null, React.createElement("g", null, React.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,
@@ -425,7 +447,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,
@@ -445,7 +467,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);
   };
@@ -583,7 +605,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"];
@@ -594,7 +616,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 = useTheme();
   var colorStyle = theme.getColor(color);
   var sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
@@ -768,7 +790,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,
@@ -805,7 +827,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
@@ -949,7 +971,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,
@@ -963,7 +985,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.createElement(Element, Object.assign({
     as: "label",
@@ -1035,7 +1057,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,
@@ -1072,7 +1094,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);
   };
@@ -2646,7 +2668,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,
@@ -2710,7 +2732,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'
@@ -2740,14 +2762,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.createElement(Text, Object.assign({
     size: "xs",
     marginVertical: 0,
@@ -2756,7 +2778,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,
@@ -2765,7 +2787,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.createElement(View$1, Object.assign({
     display: "flex",
     flexWrap: wrap,
@@ -2782,14 +2804,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.createElement(Vertical, Object.assign({
     gap: 5,
     position: "relative"
@@ -2848,7 +2870,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,
@@ -2876,7 +2898,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.createElement(Horizontal, Object.assign({
@@ -2897,10 +2919,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.createElement(Center, Object.assign({
     gap: 10,
     right: 16,
@@ -2910,7 +2932,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,
@@ -2923,7 +2945,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.createElement(Label, Object.assign({
     top: 6,
     zIndex: 1000,
@@ -2936,10 +2958,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.createElement(Vertical, Object.assign({
     width: "100%"
   }, props), children);
@@ -2953,7 +2975,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.createElement(Element, Object.assign({
     as: "ul"
@@ -3093,7 +3115,7 @@ var CountryPickerView = function CountryPickerView(_ref3) {
       helperText: {},
       box: {}
     } : _ref3$styles,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded$n);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded$o);
   var _useTheme = useTheme(),
     getColor = _useTheme.getColor;
   var IconColor = getColor('color.blueGray.700');
@@ -3231,7 +3253,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.createElement(Input, Object.assign({
     type: "date"
@@ -3279,7 +3301,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);
@@ -3404,7 +3426,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.createElement(Input, Object.assign({
     type: "text"
@@ -3462,7 +3484,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 = useTheme(),
     getColor = _useTheme.getColor;
   var IconColor = getColor('color.blueGray.700');
@@ -3570,7 +3592,7 @@ var TextFieldView = function TextFieldView(_ref) {
   }), rightChild && React.createElement(React.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,
@@ -3581,7 +3603,7 @@ var PasswordComponent = function PasswordComponent(_ref) {
     hiddenIcon = _ref$hiddenIcon === void 0 ? React.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,
@@ -3649,7 +3671,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"];
@@ -3661,7 +3683,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);
   };
@@ -4132,7 +4154,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.createElement(Input, Object.assign({
     type: "checkbox"
@@ -4171,7 +4193,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);
@@ -4257,7 +4279,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,
@@ -4312,7 +4334,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,
@@ -4480,7 +4502,7 @@ var FormikForm = function FormikForm(_ref) {
   }, React.createElement(Form, null, children));
 };
 
-var _excluded$u = ["name", "type"];
+var _excluded$v = ["name", "type"];
 var getInputTypeProps = function getInputTypeProps(type) {
   switch (type) {
     case 'email':
@@ -4510,7 +4532,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 = useFormikContext(),
     touched = _useFormikContext.touched,
@@ -4557,11 +4579,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.createElement(CheckboxView, Object.assign({}, checkboxStates, formProps));
@@ -4619,11 +4641,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.createElement(TextFieldView, Object.assign({}, textFieldStates, formProps));
 };
 /**
@@ -4631,7 +4653,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,
@@ -4642,7 +4664,7 @@ var PasswordComponent$1 = function PasswordComponent(_ref) {
     hiddenIcon = _ref$hiddenIcon === void 0 ? React.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,
@@ -4750,7 +4772,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"],
@@ -4766,7 +4788,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();
   };
@@ -4922,12 +4944,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 = useTheme(),
     getColor = _useTheme.getColor;
   var Colorprops = color ? {
@@ -4984,13 +5006,13 @@ var TabsView = function TabsView(props) {
   var isContentActive = function isContentActive(tab) {
     return tab.value === tabsState[0].value;
   };
-  return React.createElement(Horizontal$1, Object.assign({
+  return React.createElement(Horizontal, Object.assign({
     width: "100w",
     height: '100%'
-  }, styles == null ? void 0 : styles.container), React.createElement(Horizontal$1, Object.assign({
+  }, styles == null ? void 0 : styles.container), React.createElement(Horizontal, Object.assign({
     marginBottom: 20
   }, styles == null ? void 0 : styles.headerTabs), tabs.map(function (tab, idx) {
-    return React.createElement(Button$1, Object.assign({
+    return React.createElement(Button, Object.assign({
       key: tab.title,
       onClick: function onClick() {
         moveSelectedTabToTop(idx);
@@ -4999,12 +5021,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.createElement(Text$1, Object.assign({}, styles == null ? void 0 : styles.title, isActive.value === tab.value ? styles == null ? void 0 : styles.activeText : {}), tab.title));
-  })), React.createElement(View$2, Object.assign({
+    }, styles == null ? void 0 : styles.tab, isActive.value === tab.value ? styles == null ? void 0 : styles.activeTab : {}), React.createElement(Text, Object.assign({}, styles == null ? void 0 : styles.title, isActive.value === tab.value ? styles == null ? void 0 : styles.activeText : {}), tab.title));
+  })), React.createElement(View, Object.assign({
     width: '100%',
     height: "100%"
   }, styles == null ? void 0 : styles.content), tabsState.map(function (tab, idx) {
-    return isContentActive(tab) && React.createElement(View$2, {
+    return isContentActive(tab) && React.createElement(View, {
       key: idx
     }, tab.content);
   })));
@@ -5088,7 +5110,7 @@ var AlertView = function AlertView(_ref) {
     description = _ref.description,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'default' : _ref$variant;
-  return React.createElement(Horizontal$1, Object.assign({
+  return React.createElement(Horizontal, Object.assign({
     gap: 15,
     borderRadius: 10,
     borderWidth: 1,
@@ -5096,17 +5118,17 @@ var AlertView = function AlertView(_ref) {
     padding: 16,
     wrap: "nowrap",
     borderColor: Themes[variant].container.border
-  }, styles == null ? void 0 : styles.container), React.createElement(View$2, {
+  }, styles == null ? void 0 : styles.container), React.createElement(View, {
     alignSelf: 'center'
   }, icon ? icon : React.createElement(WarningSvg, {
     size: 24,
     color: (_styles$icon$color = styles == null ? void 0 : styles.icon.color) != null ? _styles$icon$color : Themes[variant].content.color
-  })), React.createElement(Vertical$1, {
+  })), React.createElement(Vertical, {
     gap: 10
-  }, React.createElement(Text$1, Object.assign({
+  }, React.createElement(Text, Object.assign({
     fontSize: "16px",
     color: Themes[variant].content.color
-  }, styles == null ? void 0 : styles.title), title), React.createElement(Text$1, Object.assign({
+  }, styles == null ? void 0 : styles.title), title), React.createElement(Text, Object.assign({
     fontSize: "14px",
     color: Themes[variant].content.color
   }, styles == null ? void 0 : styles.description), description)));
@@ -5128,19 +5150,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.createElement(Center$1, Object.assign({
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
+  return React.createElement(Center, Object.assign({
     width: '100%',
     position: "relative",
     overflow: "hidden",
     paddingTop: 1 / ratio * 100 + "%",
     borderRadius: 8
-  }, props), React.createElement(View$2, {
+  }, props), React.createElement(View, {
     position: "absolute",
     top: 0,
     right: 0,
@@ -5149,11 +5171,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.createElement(AspectRatioView, Object.assign({
     ratio: ratio
   }, props), children);
@@ -5191,7 +5213,7 @@ var AvatarView = function AvatarView(_ref) {
   var imageStyle = _extends({
     objectFit: 'cover'
   }, (styles == null ? void 0 : styles.image) || {});
-  return React.createElement(Center$1, Object.assign({
+  return React.createElement(Center, Object.assign({
     role: "avatar",
     width: avatarSize,
     height: avatarSize,
@@ -5210,7 +5232,7 @@ var AvatarView = function AvatarView(_ref) {
     onError: function onError() {
       return setImageError(true);
     }
-  }) : React.createElement(Text$1, Object.assign({
+  }) : React.createElement(Text, Object.assign({
     size: size
   }, styles == null ? void 0 : styles.fallback), fallback));
 };
@@ -5337,9 +5359,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.createElement(Center$1, Object.assign({
+  return React.createElement(Center, Object.assign({
     role: "badge"
-  }, combinedStyles), React.createElement(Text$1, Object.assign({
+  }, combinedStyles), React.createElement(Text, Object.assign({
     role: "badgeText",
     size: size
   }, styles == null ? void 0 : styles.text), content));
@@ -5385,7 +5407,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,
@@ -5400,7 +5422,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 = {
@@ -5430,7 +5452,7 @@ var ToggleView = function ToggleView(_ref) {
     }
   };
 
-  return React.createElement(Center$1, Object.assign({
+  return React.createElement(Center, Object.assign({
     role: "Toggle",
     padding: shape === 'pillShaped' ? '10px 12px' : '8px',
     width: "fit-content",
@@ -5448,7 +5470,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,
@@ -5458,7 +5480,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,
@@ -5518,7 +5540,7 @@ var ToggleGroupView = function ToggleGroupView(_ref) {
       return newActiveToggles;
     });
   }, [onToggleChange, setActiveToggles]);
-  return React.createElement(Horizontal$1, {
+  return React.createElement(Horizontal, {
     role: "ToggleGroup",
     display: "flex",
     gap: 5