@app-studio/web 0.3.39 → 0.3.41

package/dist/web.cjs.development.js

@@ -8,8 +8,6 @@ var React = require('react');
 var React__default = _interopDefault(React);
 var appStudio = require('app-studio');
 var reactRouterDom = require('react-router-dom');
-var Loader$1 = require('src/components/Loader/Loader');
-var Horizontal$1 = require('src/components/Layout/Horizontal/Horizontal');
 var format = _interopDefault(require('date-fns/format'));
 var zustand = require('zustand');
 
@@ -570,7 +568,210 @@ var IconSizes$1 = {
   }
 };
 
-var _excluded$b = ["icon", "shadow", "children", "ariaLabel", "externalHref", "isAuto", "isFilled", "isIconRounded", "isLoading", "isDisabled", "size", "variant", "iconPosition", "colorScheme", "shape", "onClick", "loaderProps", "loaderPosition"];
+var DefaultSizes = {
+  xs: 14,
+  sm: 18,
+  md: 22,
+  lg: 26,
+  xl: 30,
+  '2xl': 40,
+  '3xl': 50,
+  '4xl': 60,
+  '5xl': 70,
+  '6xl': 80
+};
+var DefaultSpeeds = {
+  fast: 50,
+  normal: 100,
+  slow: 300
+};
+
+var _excluded$b = ["size", "speed", "color"],
+  _excluded2 = ["size", "speed", "color"],
+  _excluded3 = ["size", "speed", "color"],
+  _excluded4 = ["size", "children", "textColor", "loaderColor", "type", "speed", "textPosition"];
+var DefaultSpinner = function DefaultSpinner(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    _ref$speed = _ref.speed,
+    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);
+  var theme = appStudio.useTheme();
+  var colorStyle = theme.getColor(color);
+  var sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
+  var _useState = React.useState(0),
+    angle = _useState[0],
+    setAngle = _useState[1];
+  React.useEffect(function () {
+    var intervalId = setInterval(function () {
+      setAngle(function (prevAngle) {
+        return prevAngle + 45;
+      });
+    }, DefaultSpeeds[speed]);
+    return function () {
+      return clearInterval(intervalId);
+    };
+  }, [speed]);
+  return React__default.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: sizeStyle + "px",
+    height: sizeStyle + "px",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: colorStyle,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    style: {
+      transform: "rotate(" + angle + "deg)"
+    }
+  }, props), React__default.createElement("g", {
+    id: "SVGRepo_bgCarrier",
+    strokeWidth: "0"
+  }), React__default.createElement("g", {
+    id: "SVGRepo_tracerCarrier",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), React__default.createElement("g", {
+    id: "SVGRepo_iconCarrier"
+  }, React__default.createElement("path", {
+    d: "M21 12a9 9 0 11-6.219-8.56"
+  })));
+};
+var Dotted = function Dotted(_ref2) {
+  var _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? 'md' : _ref2$size,
+    _ref2$speed = _ref2.speed,
+    speed = _ref2$speed === void 0 ? 'normal' : _ref2$speed,
+    _ref2$color = _ref2.color,
+    color = _ref2$color === void 0 ? 'theme.loading' : _ref2$color,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+  var theme = appStudio.useTheme();
+  var colorStyle = theme.getColor(color);
+  var sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
+  var _useState2 = React.useState(0),
+    angle = _useState2[0],
+    setAngle = _useState2[1];
+  React.useEffect(function () {
+    var intervalId = setInterval(function () {
+      setAngle(function (prevAngle) {
+        return prevAngle + 45;
+      });
+    }, DefaultSpeeds[speed]);
+    return function () {
+      return clearInterval(intervalId);
+    };
+  }, [speed]);
+  return React__default.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 50 50",
+    width: sizeStyle + "px",
+    height: sizeStyle + "px",
+    style: {
+      transform: "rotate(" + angle + "deg)"
+    }
+  }, props), React__default.createElement("circle", {
+    cx: "10",
+    cy: "25",
+    r: "4",
+    fill: colorStyle
+  }), React__default.createElement("circle", {
+    cx: "25",
+    cy: "25",
+    r: "4",
+    fill: colorStyle
+  }), React__default.createElement("circle", {
+    cx: "40",
+    cy: "25",
+    r: "4",
+    fill: colorStyle
+  }));
+};
+var Quarter = function Quarter(_ref3) {
+  var _ref3$size = _ref3.size,
+    size = _ref3$size === void 0 ? 'md' : _ref3$size,
+    _ref3$speed = _ref3.speed,
+    speed = _ref3$speed === void 0 ? 'normal' : _ref3$speed,
+    _ref3$color = _ref3.color,
+    color = _ref3$color === void 0 ? 'theme.loading' : _ref3$color,
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
+  var theme = appStudio.useTheme();
+  var colorStyle = theme.getColor(color);
+  var sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
+  var _useState3 = React.useState(0),
+    angle = _useState3[0],
+    setAngle = _useState3[1];
+  React.useEffect(function () {
+    var intervalId = setInterval(function () {
+      setAngle(function (prevAngle) {
+        return prevAngle + 45;
+      });
+    }, DefaultSpeeds[speed]);
+    return function () {
+      return clearInterval(intervalId);
+    };
+  }, [speed]);
+  return React__default.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 50 50",
+    width: sizeStyle + "px",
+    height: sizeStyle + "px",
+    style: {
+      transform: "rotate(" + angle + "deg)"
+    }
+  }, props), React__default.createElement("circle", {
+    cx: "25",
+    cy: "25",
+    r: "20",
+    fill: "none",
+    stroke: colorStyle,
+    strokeWidth: "5",
+    strokeDasharray: "1,10"
+  }));
+};
+var LoaderView = function LoaderView(_ref4) {
+  var size = _ref4.size,
+    children = _ref4.children,
+    textColor = _ref4.textColor,
+    loaderColor = _ref4.loaderColor,
+    _ref4$type = _ref4.type,
+    type = _ref4$type === void 0 ? 'default' : _ref4$type,
+    _ref4$speed = _ref4.speed,
+    speed = _ref4$speed === void 0 ? 'normal' : _ref4$speed,
+    _ref4$textPosition = _ref4.textPosition,
+    textPosition = _ref4$textPosition === void 0 ? 'right' : _ref4$textPosition,
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
+  var style = {
+    size: size,
+    speed: speed,
+    color: loaderColor
+  };
+  var variants = {
+    default: React__default.createElement(DefaultSpinner, Object.assign({}, style)),
+    dotted: React__default.createElement(Dotted, Object.assign({}, style)),
+    quarter: React__default.createElement(Quarter, Object.assign({}, style))
+  };
+  return React__default.createElement(Center, Object.assign({
+    gap: 10,
+    flexDirection: textPosition === 'top' || textPosition === 'bottom' ? 'column' : 'row'
+  }, props), (textPosition === 'left' || textPosition === 'top') && children && React__default.createElement(View, {
+    color: textColor
+  }, children), variants[type], (textPosition === 'right' || textPosition === 'bottom') && children && React__default.createElement(View, {
+    color: textColor
+  }, children));
+};
+
+var LoaderComponent = function LoaderComponent(props) {
+  return React__default.createElement(LoaderView, Object.assign({}, props));
+};
+/**
+ * It  gives the user an insight about an action being processed. It may have an undefined waiting time or display the process length.
+ */
+var Loader = LoaderComponent;
+
+var _excluded$c = ["icon", "shadow", "children", "ariaLabel", "externalHref", "isAuto", "isFilled", "isIconRounded", "isLoading", "isDisabled", "size", "variant", "iconPosition", "colorScheme", "shape", "onClick", "loaderProps", "loaderPosition"];
 var ButtonView = function ButtonView(_ref) {
   var _props$onClick;
   var icon = _ref.icon,
@@ -604,7 +805,7 @@ var ButtonView = function ButtonView(_ref) {
     loaderProps = _ref$loaderProps === void 0 ? {} : _ref$loaderProps,
     _ref$loaderPosition = _ref.loaderPosition,
     loaderPosition = _ref$loaderPosition === void 0 ? 'left' : _ref$loaderPosition,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
   var isActive = !(isDisabled || isLoading);
   var defaultNativeProps = {
     disabled: !isActive
@@ -642,9 +843,9 @@ var ButtonView = function ButtonView(_ref) {
   var changePadding = {
     padding: isIconRounded ? IconSizes$1[size].padding : ButtonSizes[size].padding
   };
-  var content = React__default.createElement(Horizontal$1.Horizontal, {
+  var content = React__default.createElement(Horizontal, {
     gap: 4
-  }, isLoading && loaderPosition === 'left' && React__default.createElement(Loader$1.Loader, Object.assign({}, loaderProps)), icon && iconPosition === 'left' && !isLoading && icon, children, icon && iconPosition === 'right' && !isLoading && icon, isLoading && loaderPosition === 'right' && React__default.createElement(Loader$1.Loader, Object.assign({}, loaderProps)));
+  }, isLoading && loaderPosition === 'left' && React__default.createElement(Loader, Object.assign({}, loaderProps)), icon && iconPosition === 'left' && !isLoading && icon, children, icon && iconPosition === 'right' && !isLoading && icon, isLoading && loaderPosition === 'right' && React__default.createElement(Loader, Object.assign({}, loaderProps)));
   return React__default.createElement(appStudio.Element, Object.assign({
     gap: 8,
     as: "button",
@@ -735,7 +936,7 @@ var HeadingSizes = {
   }
 };
 
-var _excluded$c = ["children", "heading", "isItalic", "isUnderlined", "isStriked", "weight", "size"];
+var _excluded$d = ["children", "heading", "isItalic", "isUnderlined", "isStriked", "weight", "size"];
 var LabelView = function LabelView(_ref) {
   var children = _ref.children,
     heading = _ref.heading,
@@ -749,7 +950,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$c);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
   var headingStyles = heading ? HeadingSizes[heading] : {};
   return React__default.createElement(appStudio.Element, Object.assign({
     as: "label",
@@ -821,7 +1022,7 @@ var IconSizes$2 = {
   '6xl': 60
 };
 
-var _excluded$d = ["id", "icon", "name", "label", "isChecked", "onChange", "onValueChange", "shadow", "size", "colorScheme", "error", "isSelected", "isHovered", "isDisabled", "isReadOnly", "isIndeterminate", "defaultIsSelected", "setIsSelected", "setIsHovered", "styles"];
+var _excluded$e = ["id", "icon", "name", "label", "isChecked", "onChange", "onValueChange", "shadow", "size", "colorScheme", "error", "isSelected", "isHovered", "isDisabled", "isReadOnly", "isIndeterminate", "defaultIsSelected", "setIsSelected", "setIsHovered", "styles"];
 var CheckboxView = function CheckboxView(_ref) {
   var id = _ref.id,
     icon = _ref.icon,
@@ -856,7 +1057,7 @@ var CheckboxView = function CheckboxView(_ref) {
       checkbox: {},
       label: {}
     } : _ref$styles,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
   var handleHover = function handleHover() {
     return setIsHovered(!isHovered);
   };
@@ -2400,7 +2601,7 @@ var useCountryPickerState = function useCountryPickerState(_ref) {
   };
 };
 
-var _excluded$e = ["children", "wrap", "justify", "isReversed"];
+var _excluded$f = ["children", "wrap", "justify", "isReversed"];
 var VerticalView = function VerticalView(_ref) {
   var children = _ref.children,
     _ref$wrap = _ref.wrap,
@@ -2409,7 +2610,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$e);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
   return React__default.createElement(appStudio.View, Object.assign({
     display: "flex",
     flexWrap: wrap,
@@ -2459,7 +2660,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,
@@ -2516,7 +2717,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'
@@ -2546,14 +2747,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,
@@ -2562,14 +2763,14 @@ var HelperText = function HelperText(_ref) {
   }, styles['helperText'], props), children);
 };
 
-var _excluded$h = ["children", "helperText", "error", "styles"];
+var _excluded$i = ["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$h);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
   return React__default.createElement(Vertical, Object.assign({
     gap: 5,
     position: "relative"
@@ -2628,7 +2829,7 @@ var PaddingWithoutLabel = {
   paddingRight: 36
 };
 
-var _excluded$i = ["label", "shadow", "children", "value", "size", "shape", "variant", "error", "isWithLabel", "isFocused", "isHovered", "isDisabled", "isReadOnly", "colorScheme", "styles"];
+var _excluded$j = ["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,
@@ -2656,7 +2857,7 @@ var FieldContent = function FieldContent(_ref) {
     styles = _ref$styles === void 0 ? {
       pickerBox: {}
     } : _ref$styles,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
   var isInteractive = (isHovered || isFocused) && !isDisabled;
   var color = error ? 'error' : isInteractive ? colorScheme : 'midgray';
   return React__default.createElement(Horizontal, Object.assign({
@@ -2676,10 +2877,10 @@ var FieldContent = function FieldContent(_ref) {
   }, isWithLabel ? PadddingWithLabel : PaddingWithoutLabel, shadow, Shapes[shape], InputVariants[variant], styles['box'], props), children);
 };
 
-var _excluded$j = ["children"];
+var _excluded$k = ["children"];
 var FieldIcons = function FieldIcons(_ref) {
   var children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
   return React__default.createElement(Center, Object.assign({
     gap: 10,
     top: "50%",
@@ -2691,7 +2892,7 @@ var FieldIcons = function FieldIcons(_ref) {
   }, props), children);
 };
 
-var _excluded$k = ["children", "size", "error", "color", "styles"];
+var _excluded$l = ["children", "size", "error", "color", "styles"];
 var FieldLabel = function FieldLabel(_ref) {
   var children = _ref.children,
     _ref$size = _ref.size,
@@ -2704,7 +2905,7 @@ var FieldLabel = function FieldLabel(_ref) {
     styles = _ref$styles === void 0 ? {
       label: {}
     } : _ref$styles,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
   return React__default.createElement(Label, Object.assign({
     top: 6,
     zIndex: 1000,
@@ -2717,10 +2918,10 @@ var FieldLabel = function FieldLabel(_ref) {
   }, styles['label'], props), children);
 };
 
-var _excluded$l = ["children"];
+var _excluded$m = ["children"];
 var FieldWrapper = function FieldWrapper(_ref) {
   var children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
   return React__default.createElement(Vertical, Object.assign({
     width: "100%"
   }, props), children);
@@ -2734,7 +2935,7 @@ var IconSizes$3 = {
   xl: 16
 };
 
-var _excluded$m = ["id", "name", "label", "selected", "placeholder", "helperText", "hide", "error", "isHovered", "isFocused", "isAutoFocus", "isDisabled", "isReadOnly", "shadow", "newOptions", "size", "variant", "shape", "colorScheme", "onChange", "onBlur", "setHide", "setNewOptions", "setIsHovered", "setIsFocused", "setSelected", "styles"];
+var _excluded$n = ["id", "name", "label", "selected", "placeholder", "helperText", "hide", "error", "isHovered", "isFocused", "isAutoFocus", "isDisabled", "isReadOnly", "shadow", "newOptions", "size", "variant", "shape", "colorScheme", "onChange", "onBlur", "setHide", "setNewOptions", "setIsHovered", "setIsFocused", "setSelected", "styles"];
 var CountryList = function CountryList(props) {
   return React__default.createElement(appStudio.Element, Object.assign({
     as: "ul"
@@ -2874,7 +3075,7 @@ var CountryPickerView = function CountryPickerView(_ref3) {
       helperText: {},
       box: {}
     } : _ref3$styles,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded$m);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded$n);
   var _useTheme = appStudio.useTheme(),
     getColor = _useTheme.getColor;
   var IconColor = getColor('color.blueGray.700');
@@ -3012,7 +3213,7 @@ var useDatePickerState = function useDatePickerState() {
   };
 };
 
-var _excluded$n = ["id", "icon", "name", "label", "date", "children", "helperText", "shadow", "size", "variant", "shape", "colorScheme", "styles", "error", "isHovered", "isFocused", "isDisabled", "isReadOnly", "setDate", "setIsFocused", "setIsHovered", "onChange", "onChangeText"];
+var _excluded$o = ["id", "icon", "name", "label", "date", "children", "helperText", "shadow", "size", "variant", "shape", "colorScheme", "styles", "error", "isHovered", "isFocused", "isDisabled", "isReadOnly", "setDate", "setIsFocused", "setIsHovered", "onChange", "onChangeText"];
 var DatePickerContent = function DatePickerContent(props) {
   return React__default.createElement(appStudio.Input, Object.assign({
     type: "date"
@@ -3060,7 +3261,7 @@ var DatePickerView = function DatePickerView(_ref) {
     setIsHovered = _ref$setIsHovered === void 0 ? function () {} : _ref$setIsHovered,
     onChange = _ref.onChange,
     onChangeText = _ref.onChangeText,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
   var isWithLabel = !!(isFocused && label);
   var handleHover = function handleHover() {
     return setIsHovered(!isHovered);
@@ -3182,7 +3383,7 @@ var usePasswordState = function usePasswordState(props) {
   }, textFieldStates);
 };
 
-var _excluded$o = ["id", "name", "label", "value", "hint", "inputValue", "onChange", "leftChild", "rightChild", "helperText", "placeholder", "onChangeText", "shadow", "styles", "size", "shape", "variant", "colorScheme", "error", "isFocused", "isHovered", "isDisabled", "isReadOnly", "isClearable", "isAutoFocus", "setHint", "setIsFocused", "setIsHovered", "setInputValue", "onClick", "onFocus", "onBlur"];
+var _excluded$p = ["id", "name", "label", "value", "hint", "inputValue", "onChange", "leftChild", "rightChild", "helperText", "placeholder", "onChangeText", "shadow", "styles", "size", "shape", "variant", "colorScheme", "error", "isFocused", "isHovered", "isDisabled", "isReadOnly", "isClearable", "isAutoFocus", "setHint", "setIsFocused", "setIsHovered", "setInputValue", "onClick", "onFocus", "onBlur"];
 var TextFieldInput = function TextFieldInput(props) {
   return React__default.createElement(appStudio.Input, Object.assign({
     type: "text"
@@ -3243,7 +3444,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$o);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
   var _useTheme = appStudio.useTheme(),
     getColor = _useTheme.getColor;
   var IconColor = getColor('color.blueGray.700');
@@ -3358,8 +3559,8 @@ var TextFieldView = function TextFieldView(_ref) {
   }))));
 };
 
-var _excluded$p = ["visibleIcon", "hiddenIcon"],
-  _excluded2 = ["isVisible", "setIsVisible"];
+var _excluded$q = ["visibleIcon", "hiddenIcon"],
+  _excluded2$1 = ["isVisible", "setIsVisible"];
 var PasswordComponent = function PasswordComponent(_ref) {
   var _ref$visibleIcon = _ref.visibleIcon,
     visibleIcon = _ref$visibleIcon === void 0 ? React__default.createElement(OpenEyeSvg, {
@@ -3369,11 +3570,11 @@ var PasswordComponent = function PasswordComponent(_ref) {
     hiddenIcon = _ref$hiddenIcon === void 0 ? React__default.createElement(CloseEyeSvg, {
       size: 14
     }) : _ref$hiddenIcon,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
   var _usePasswordState = usePasswordState(props),
     isVisible = _usePasswordState.isVisible,
     setIsVisible = _usePasswordState.setIsVisible,
-    passwordState = _objectWithoutPropertiesLoose(_usePasswordState, _excluded2);
+    passwordState = _objectWithoutPropertiesLoose(_usePasswordState, _excluded2$1);
   return React__default.createElement(TextFieldView, Object.assign({}, props, passwordState, {
     type: isVisible ? 'text' : 'password',
     isClearable: false,
@@ -3437,10 +3638,10 @@ var IconSizes$4 = {
   xl: 16
 };
 
-var _excluded$q = ["isHovered", "setIsHovered", "option", "size", "callback"],
-  _excluded2$1 = ["id", "name", "selected", "onChange", "isMulti", "isDisabled", "isReadOnly", "options"],
-  _excluded3 = ["option", "size", "removeOption"],
-  _excluded4 = ["id", "name", "label", "selected", "placeholder", "helperText", "hide", "error", "isMulti", "isFocused", "isHovered", "isDisabled", "isReadOnly", "options", "shadow", "size", "colorScheme", "shape", "variant", "styles", "onChange", "setHide", "setSelected", "setIsHovered", "setIsFocused"];
+var _excluded$r = ["isHovered", "setIsHovered", "option", "size", "callback"],
+  _excluded2$2 = ["id", "name", "selected", "onChange", "isMulti", "isDisabled", "isReadOnly", "options"],
+  _excluded3$1 = ["option", "size", "removeOption"],
+  _excluded4$1 = ["id", "name", "label", "selected", "placeholder", "helperText", "hide", "error", "isMulti", "isFocused", "isHovered", "isDisabled", "isReadOnly", "options", "shadow", "size", "colorScheme", "shape", "variant", "styles", "onChange", "setHide", "setSelected", "setIsHovered", "setIsFocused"];
 var Item = function Item(_ref) {
   var isHovered = _ref.isHovered,
     setIsHovered = _ref.setIsHovered,
@@ -3449,7 +3650,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$q);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
   var handleOptionClick = function handleOptionClick(option) {
     return callback(option);
   };
@@ -3519,7 +3720,7 @@ var HiddenSelect = function HiddenSelect(_ref3) {
     isReadOnly = _ref3$isReadOnly === void 0 ? false : _ref3$isReadOnly,
     _ref3$options = _ref3.options,
     options = _ref3$options === void 0 ? [] : _ref3$options,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$1);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$2);
   var handleChange = function handleChange(event) {
     if (onChange) onChange(event);
   };
@@ -3601,7 +3802,7 @@ var MultiSelect = function MultiSelect(_ref5) {
     size = _ref5$size === void 0 ? 'md' : _ref5$size,
     _ref5$removeOption = _ref5.removeOption,
     removeOption = _ref5$removeOption === void 0 ? function () {} : _ref5$removeOption,
-    props = _objectWithoutPropertiesLoose(_ref5, _excluded3);
+    props = _objectWithoutPropertiesLoose(_ref5, _excluded3$1);
   var handleClick = function handleClick() {
     return removeOption(option);
   };
@@ -3676,7 +3877,7 @@ var SelectView = function SelectView(_ref6) {
     setIsHovered = _ref6$setIsHovered === void 0 ? function () {} : _ref6$setIsHovered,
     _ref6$setIsFocused = _ref6.setIsFocused,
     setIsFocused = _ref6$setIsFocused === void 0 ? function () {} : _ref6$setIsFocused,
-    props = _objectWithoutPropertiesLoose(_ref6, _excluded4);
+    props = _objectWithoutPropertiesLoose(_ref6, _excluded4$1);
   var isWithLabel = !!(isFocused && label);
   var handleHover = function handleHover() {
     return setIsHovered(!isHovered);
@@ -3919,7 +4120,7 @@ var SliderPadding = {
   }
 };
 
-var _excluded$r = ["id", "name", "inActiveChild", "activeChild", "shadow", "size", "colorScheme", "on", "isHovered", "isChecked", "isDisabled", "isReadOnly", "onChange", "onValueChange", "setOn", "setIsHovered", "styles"];
+var _excluded$s = ["id", "name", "inActiveChild", "activeChild", "shadow", "size", "colorScheme", "on", "isHovered", "isChecked", "isDisabled", "isReadOnly", "onChange", "onValueChange", "setOn", "setIsHovered", "styles"];
 var SwitchContent = function SwitchContent(props) {
   return React__default.createElement(appStudio.Input, Object.assign({
     type: "checkbox"
@@ -3955,7 +4156,7 @@ var SwitchView = function SwitchView(_ref) {
       slider: {},
       circle: {}
     } : _ref$styles,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
   var handleToggle = function handleToggle(event) {
     if (!isReadOnly) {
       setOn(!on);
@@ -4031,7 +4232,7 @@ var useTextAreaState = function useTextAreaState(_ref) {
   };
 };
 
-var _excluded$s = ["id", "name", "hint", "error", "value", "label", "shadow", "inputValue", "helperText", "placeholder", "defaultValue", "size", "shape", "variant", "colorScheme", "isHovered", "isFocused", "isEditable", "isReadOnly", "isDisabled", "isAutoFocus", "isMultiline", "maxRows", "maxCols", "onBlur", "onChange", "onFocus", "onChangeText", "setHint", "setInputValue", "setIsFocused", "setIsHovered", "styles"];
+var _excluded$t = ["id", "name", "hint", "error", "value", "label", "shadow", "inputValue", "helperText", "placeholder", "defaultValue", "size", "shape", "variant", "colorScheme", "isHovered", "isFocused", "isEditable", "isReadOnly", "isDisabled", "isAutoFocus", "isMultiline", "maxRows", "maxCols", "onBlur", "onChange", "onFocus", "onChangeText", "setHint", "setInputValue", "setIsFocused", "setIsHovered", "styles"];
 var TextAreaView = function TextAreaView(_ref) {
   var id = _ref.id,
     name = _ref.name,
@@ -4089,7 +4290,7 @@ var TextAreaView = function TextAreaView(_ref) {
       helperText: {},
       field: {}
     } : _ref$styles,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
   var isWithLabel = !!(isFocused && label);
   React.useMemo(function () {
     setHint(isFocused && !inputValue ? placeholder != null ? placeholder : '' : label != null ? label : placeholder);
@@ -4197,209 +4398,6 @@ var TextFieldComponent = function TextFieldComponent(props) {
  */
 var TextField = TextFieldComponent;
 
-var DefaultSizes = {
-  xs: 14,
-  sm: 18,
-  md: 22,
-  lg: 26,
-  xl: 30,
-  '2xl': 40,
-  '3xl': 50,
-  '4xl': 60,
-  '5xl': 70,
-  '6xl': 80
-};
-var DefaultSpeeds = {
-  fast: 50,
-  normal: 100,
-  slow: 300
-};
-
-var _excluded$t = ["size", "speed", "color"],
-  _excluded2$2 = ["size", "speed", "color"],
-  _excluded3$1 = ["size", "speed", "color"],
-  _excluded4$1 = ["size", "children", "textColor", "loaderColor", "type", "speed", "textPosition"];
-var DefaultSpinner = function DefaultSpinner(_ref) {
-  var _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'md' : _ref$size,
-    _ref$speed = _ref.speed,
-    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$t);
-  var theme = appStudio.useTheme();
-  var colorStyle = theme.getColor(color);
-  var sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
-  var _useState = React.useState(0),
-    angle = _useState[0],
-    setAngle = _useState[1];
-  React.useEffect(function () {
-    var intervalId = setInterval(function () {
-      setAngle(function (prevAngle) {
-        return prevAngle + 45;
-      });
-    }, DefaultSpeeds[speed]);
-    return function () {
-      return clearInterval(intervalId);
-    };
-  }, [speed]);
-  return React__default.createElement("svg", Object.assign({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: sizeStyle + "px",
-    height: sizeStyle + "px",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: colorStyle,
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    style: {
-      transform: "rotate(" + angle + "deg)"
-    }
-  }, props), React__default.createElement("g", {
-    id: "SVGRepo_bgCarrier",
-    strokeWidth: "0"
-  }), React__default.createElement("g", {
-    id: "SVGRepo_tracerCarrier",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }), React__default.createElement("g", {
-    id: "SVGRepo_iconCarrier"
-  }, React__default.createElement("path", {
-    d: "M21 12a9 9 0 11-6.219-8.56"
-  })));
-};
-var Dotted = function Dotted(_ref2) {
-  var _ref2$size = _ref2.size,
-    size = _ref2$size === void 0 ? 'md' : _ref2$size,
-    _ref2$speed = _ref2.speed,
-    speed = _ref2$speed === void 0 ? 'normal' : _ref2$speed,
-    _ref2$color = _ref2.color,
-    color = _ref2$color === void 0 ? 'theme.loading' : _ref2$color,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$2);
-  var theme = appStudio.useTheme();
-  var colorStyle = theme.getColor(color);
-  var sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
-  var _useState2 = React.useState(0),
-    angle = _useState2[0],
-    setAngle = _useState2[1];
-  React.useEffect(function () {
-    var intervalId = setInterval(function () {
-      setAngle(function (prevAngle) {
-        return prevAngle + 45;
-      });
-    }, DefaultSpeeds[speed]);
-    return function () {
-      return clearInterval(intervalId);
-    };
-  }, [speed]);
-  return React__default.createElement("svg", Object.assign({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 50 50",
-    width: sizeStyle + "px",
-    height: sizeStyle + "px",
-    style: {
-      transform: "rotate(" + angle + "deg)"
-    }
-  }, props), React__default.createElement("circle", {
-    cx: "10",
-    cy: "25",
-    r: "4",
-    fill: colorStyle
-  }), React__default.createElement("circle", {
-    cx: "25",
-    cy: "25",
-    r: "4",
-    fill: colorStyle
-  }), React__default.createElement("circle", {
-    cx: "40",
-    cy: "25",
-    r: "4",
-    fill: colorStyle
-  }));
-};
-var Quarter = function Quarter(_ref3) {
-  var _ref3$size = _ref3.size,
-    size = _ref3$size === void 0 ? 'md' : _ref3$size,
-    _ref3$speed = _ref3.speed,
-    speed = _ref3$speed === void 0 ? 'normal' : _ref3$speed,
-    _ref3$color = _ref3.color,
-    color = _ref3$color === void 0 ? 'theme.loading' : _ref3$color,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded3$1);
-  var theme = appStudio.useTheme();
-  var colorStyle = theme.getColor(color);
-  var sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
-  var _useState3 = React.useState(0),
-    angle = _useState3[0],
-    setAngle = _useState3[1];
-  React.useEffect(function () {
-    var intervalId = setInterval(function () {
-      setAngle(function (prevAngle) {
-        return prevAngle + 45;
-      });
-    }, DefaultSpeeds[speed]);
-    return function () {
-      return clearInterval(intervalId);
-    };
-  }, [speed]);
-  return React__default.createElement("svg", Object.assign({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 50 50",
-    width: sizeStyle + "px",
-    height: sizeStyle + "px",
-    style: {
-      transform: "rotate(" + angle + "deg)"
-    }
-  }, props), React__default.createElement("circle", {
-    cx: "25",
-    cy: "25",
-    r: "20",
-    fill: "none",
-    stroke: colorStyle,
-    strokeWidth: "5",
-    strokeDasharray: "1,10"
-  }));
-};
-var LoaderView = function LoaderView(_ref4) {
-  var size = _ref4.size,
-    children = _ref4.children,
-    textColor = _ref4.textColor,
-    loaderColor = _ref4.loaderColor,
-    _ref4$type = _ref4.type,
-    type = _ref4$type === void 0 ? 'default' : _ref4$type,
-    _ref4$speed = _ref4.speed,
-    speed = _ref4$speed === void 0 ? 'normal' : _ref4$speed,
-    _ref4$textPosition = _ref4.textPosition,
-    textPosition = _ref4$textPosition === void 0 ? 'right' : _ref4$textPosition,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded4$1);
-  var style = {
-    size: size,
-    speed: speed,
-    color: loaderColor
-  };
-  var variants = {
-    default: React__default.createElement(DefaultSpinner, Object.assign({}, style)),
-    dotted: React__default.createElement(Dotted, Object.assign({}, style)),
-    quarter: React__default.createElement(Quarter, Object.assign({}, style))
-  };
-  return React__default.createElement(Center, Object.assign({
-    gap: 10,
-    flexDirection: textPosition === 'top' || textPosition === 'bottom' ? 'column' : 'row'
-  }, props), (textPosition === 'left' || textPosition === 'top') && children && React__default.createElement(View, {
-    color: textColor
-  }, children), variants[type], (textPosition === 'right' || textPosition === 'bottom') && children && React__default.createElement(View, {
-    color: textColor
-  }, children));
-};
-
-var LoaderComponent = function LoaderComponent(props) {
-  return React__default.createElement(LoaderView, Object.assign({}, props));
-};
-/**
- * It  gives the user an insight about an action being processed. It may have an undefined waiting time or display the process length.
- */
-var Loader = LoaderComponent;
-
 var useModalStore = /*#__PURE__*/zustand.create(function (set) {
   return {
     modal: false,