@app-studio/web 0.3.68 → 0.5.0

package/dist/web.cjs.development.js

@@ -11,7 +11,6 @@ var reactRouterDom = require('react-router-dom');
 var format = _interopDefault(require('date-fns/format'));
 var formik = require('formik');
 var zustand = require('zustand');
-var Horizontal$1 = require('src/components/Layout/Horizontal/Horizontal');
 
 var useButtonState = function useButtonState() {
   var _React$useState = React__default.useState(false),
@@ -442,6 +441,101 @@ var WarningSvg = function WarningSvg(_ref) {
   })))))));
 };
 
+var _excluded$b = ["size", "color"];
+var SuccessSvg = function SuccessSvg(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 64 : _ref$size,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'white' : _ref$color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+  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 484.8 484.8",
+    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("path", {
+    d: "M242.4,0C108.6,0,0,108.6,0,242.4S108.6,484.8,242.4,484.8S484.8,376.2,484.8,242.4S376.2,0,242.4,0z M198.4,358.8l-120-120L84,228l114.4,114.4l188-188l28.8,28.8L198.4,358.8z",
+    fill: color
+  }))))));
+};
+
+var _excluded$c = ["size", "color"];
+var InfoSvg = function InfoSvg(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 64 : _ref$size,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'white' : _ref$color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+  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: "M96.073,3.515C43.19,3.515,0,46.705,0,99.587s43.19,96.072,96.073,96.072s96.073-43.19,96.073-96.072 S148.955,3.515,96.073,3.515z M101.468,154.072h-15.447V120.57h15.447V154.072z M101.468,111.875h-15.447V49.54h15.447V111.875z"
+  })))))));
+};
+
+var _excluded$d = ["size", "color"];
+var ErrorSvg = function ErrorSvg(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 64 : _ref$size,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'white' : _ref$color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+  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 510 510",
+    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("path", {
+    d: "M255,0C114.615,0,0,114.615,0,255s114.615,255,255,255s255-114.615,255-255S395.385,0,255,0z M255,459c-114.75,0-207-92.25-207-207c0-114.75,92.25-207,207-207c114.75,0,207,92.25,207,207C462,366.75,369.75,459,255,459z",
+    fill: color
+  }), React__default.createElement("path", {
+    d: "M255,140.25c11.05,0,20-8.95,20-20s-8.95-20-20-20s-20,8.95-20,20S243.95,140.25,255,140.25z",
+    fill: color
+  }), React__default.createElement("path", {
+    d: "M265,357c0,11.05-8.95,20-20,20s-20-8.95-20-20v-175c0-11.05,8.95-20,20-20s20,8.95,20,20V357z",
+    fill: color
+  }))))));
+};
+
 var IconSizes = {
   xs: 12,
   sm: 14,
@@ -455,7 +549,7 @@ var IconSizes = {
   '6xl': 64
 };
 
-var _excluded$b = ["children", "href", "iconSize", "underline", "isHovered", "isExternal", "styles", "setIsHovered"];
+var _excluded$e = ["children", "href", "iconSize", "underline", "isHovered", "isExternal", "styles", "setIsHovered"];
 var LinkView = function LinkView(_ref) {
   var children = _ref.children,
     _ref$href = _ref.href,
@@ -475,7 +569,7 @@ var LinkView = function LinkView(_ref) {
     } : _ref$styles,
     _ref$setIsHovered = _ref.setIsHovered,
     setIsHovered = _ref$setIsHovered === void 0 ? function () {} : _ref$setIsHovered,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
   var handleHover = function handleHover() {
     if (underline === 'hover') setIsHovered(true);
   };
@@ -613,7 +707,7 @@ var DefaultSpeeds = {
   slow: 300
 };
 
-var _excluded$c = ["size", "speed", "color"],
+var _excluded$f = ["size", "speed", "color"],
   _excluded2 = ["size", "speed", "color"],
   _excluded3 = ["size", "speed", "color"],
   _excluded4 = ["size", "children", "textColor", "loaderColor", "type", "speed", "textPosition"];
@@ -624,7 +718,7 @@ var DefaultSpinner = function DefaultSpinner(_ref) {
     speed = _ref$speed === void 0 ? 'normal' : _ref$speed,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'theme.loading' : _ref$color,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
   var theme = appStudio.useTheme();
   var colorStyle = theme.getColor(color);
   var sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
@@ -798,7 +892,7 @@ var LoaderComponent = function LoaderComponent(props) {
  */
 var Loader = LoaderComponent;
 
-var _excluded$d = ["icon", "shadow", "children", "ariaLabel", "externalHref", "isAuto", "isFilled", "isIconRounded", "isLoading", "isDisabled", "size", "variant", "iconPosition", "colorScheme", "shape", "onClick", "loaderProps", "loaderPosition", "effect", "isHovered"];
+var _excluded$g = ["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,
@@ -835,7 +929,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$d);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
   var isActive = !(isDisabled || isLoading);
   var defaultNativeProps = {
     disabled: !isActive
@@ -979,7 +1073,7 @@ var HeadingSizes = {
   }
 };
 
-var _excluded$e = ["children", "heading", "isItalic", "isUnderlined", "isStriked", "weight", "size"];
+var _excluded$h = ["children", "heading", "isItalic", "isUnderlined", "isStriked", "weight", "size"];
 var LabelView = function LabelView(_ref) {
   var children = _ref.children,
     heading = _ref.heading,
@@ -993,7 +1087,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$e);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
   var headingStyles = heading ? HeadingSizes[heading] : {};
   return React__default.createElement(appStudio.Element, Object.assign({
     as: "label",
@@ -1065,7 +1159,7 @@ var IconSizes$2 = {
   '6xl': 60
 };
 
-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 _excluded$i = ["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,
@@ -1102,7 +1196,7 @@ var CheckboxView = function CheckboxView(_ref) {
       checkbox: {},
       label: {}
     } : _ref$styles,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
   var handleHover = function handleHover() {
     return setIsHovered(!isHovered);
   };
@@ -2676,7 +2770,7 @@ var HeadingSizes$1 = {
   }
 };
 
-var _excluded$g = ["children", "heading", "maxLines", "isItalic", "isUnderlined", "isSub", "isSup", "isStriked", "isTruncated", "weight", "size"];
+var _excluded$j = ["children", "heading", "maxLines", "isItalic", "isUnderlined", "isSub", "isSup", "isStriked", "isTruncated", "weight", "size"];
 var TextContent = function TextContent(_ref) {
   var children = _ref.children,
     isSub = _ref.isSub,
@@ -2740,7 +2834,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$g);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded$j);
   var headingStyles = heading ? HeadingSizes$1[heading] : {};
   var noLineBreak = isSub || isSup ? {
     display: 'inline'
@@ -2770,14 +2864,14 @@ var TextComponent = function TextComponent(props) {
  */
 var Text = TextComponent;
 
-var _excluded$h = ["children", "styles"];
+var _excluded$k = ["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$h);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
   return React__default.createElement(Text, Object.assign({
     size: "xs",
     marginVertical: 0,
@@ -2786,7 +2880,7 @@ var HelperText = function HelperText(_ref) {
   }, styles['helperText'], props), children);
 };
 
-var _excluded$i = ["children", "wrap", "justify", "isReversed"];
+var _excluded$l = ["children", "wrap", "justify", "isReversed"];
 var VerticalView = function VerticalView(_ref) {
   var children = _ref.children,
     _ref$wrap = _ref.wrap,
@@ -2795,7 +2889,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$i);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
   return React__default.createElement(appStudio.View, Object.assign({
     display: "flex",
     flexWrap: wrap,
@@ -2812,14 +2906,14 @@ var VerticalComponent = function VerticalComponent(props) {
 };
 var Vertical = VerticalComponent;
 
-var _excluded$j = ["children", "helperText", "error", "styles"];
+var _excluded$m = ["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$j);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
   return React__default.createElement(Vertical, Object.assign({
     gap: 5,
     position: "relative"
@@ -2878,7 +2972,7 @@ var PaddingWithoutLabel = {
   paddingRight: 36
 };
 
-var _excluded$k = ["label", "shadow", "children", "value", "size", "shape", "variant", "error", "isWithLabel", "isFocused", "isHovered", "isDisabled", "isReadOnly", "colorScheme", "styles"];
+var _excluded$n = ["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,
@@ -2906,7 +3000,7 @@ var FieldContent = function FieldContent(_ref) {
     styles = _ref$styles === void 0 ? {
       pickerBox: {}
     } : _ref$styles,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
   var isInteractive = (isHovered || isFocused) && !isDisabled;
   var color = error ? 'error' : isInteractive ? colorScheme : 'midgray';
   return React__default.createElement(Horizontal, Object.assign({
@@ -2927,10 +3021,10 @@ var FieldContent = function FieldContent(_ref) {
   }, isWithLabel ? PadddingWithLabel : PaddingWithoutLabel, shadow, Shapes[shape], InputVariants[variant], styles['box'], props), children);
 };
 
-var _excluded$l = ["children"];
+var _excluded$o = ["children"];
 var FieldIcons = function FieldIcons(_ref) {
   var children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
   return React__default.createElement(Center, Object.assign({
     gap: 10,
     right: 16,
@@ -2940,7 +3034,7 @@ var FieldIcons = function FieldIcons(_ref) {
   }, props), children);
 };
 
-var _excluded$m = ["children", "size", "error", "color", "styles"];
+var _excluded$p = ["children", "size", "error", "color", "styles"];
 var FieldLabel = function FieldLabel(_ref) {
   var children = _ref.children,
     _ref$size = _ref.size,
@@ -2953,7 +3047,7 @@ var FieldLabel = function FieldLabel(_ref) {
     styles = _ref$styles === void 0 ? {
       label: {}
     } : _ref$styles,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
   return React__default.createElement(Label, Object.assign({
     top: 6,
     zIndex: 1000,
@@ -2966,10 +3060,10 @@ var FieldLabel = function FieldLabel(_ref) {
   }, styles['label'], props), children);
 };
 
-var _excluded$n = ["children"];
+var _excluded$q = ["children"];
 var FieldWrapper = function FieldWrapper(_ref) {
   var children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
   return React__default.createElement(Vertical, Object.assign({
     width: "100%"
   }, props), children);
@@ -2983,7 +3077,7 @@ var IconSizes$3 = {
   xl: 16
 };
 
-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 _excluded$r = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isHovered", "isFocused", "isAutoFocus", "isDisabled", "isReadOnly", "shadow", "newOptions", "size", "variant", "shape", "colorScheme", "onChange", "onBlur", "setHide", "setNewOptions", "setIsHovered", "setIsFocused", "setValue", "styles"];
 var CountryList = function CountryList(props) {
   return React__default.createElement(appStudio.Element, Object.assign({
     as: "ul"
@@ -3123,7 +3217,7 @@ var CountryPickerView = function CountryPickerView(_ref3) {
       helperText: {},
       box: {}
     } : _ref3$styles,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded$o);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded$r);
   var _useTheme = appStudio.useTheme(),
     getColor = _useTheme.getColor;
   var IconColor = getColor('color.blueGray.700');
@@ -3261,7 +3355,7 @@ var useDatePickerState = function useDatePickerState() {
   };
 };
 
-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 _excluded$s = ["id", "icon", "name", "label", "date", "children", "helperText", "shadow", "size", "variant", "shape", "colorScheme", "styles", "error", "isHovered", "isFocused", "isDisabled", "isReadOnly", "setDate", "setIsFocused", "setIsHovered", "onChange", "onChangeText"];
 var DatePickerContent = function DatePickerContent(props) {
   return React__default.createElement(appStudio.Input, Object.assign({
     type: "date"
@@ -3309,7 +3403,7 @@ var DatePickerView = function DatePickerView(_ref) {
     setIsHovered = _ref$setIsHovered === void 0 ? function () {} : _ref$setIsHovered,
     onChange = _ref.onChange,
     onChangeText = _ref.onChangeText,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
   var isWithLabel = !!(isFocused && label);
   var handleHover = function handleHover() {
     return setIsHovered(!isHovered);
@@ -3434,7 +3528,7 @@ var usePasswordState = function usePasswordState(props) {
   }, props, textFieldStates);
 };
 
-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 _excluded$t = ["id", "name", "label", "hint", "value", "onChange", "leftChild", "rightChild", "helperText", "placeholder", "onChangeText", "shadow", "styles", "size", "shape", "variant", "colorScheme", "error", "isFocused", "isHovered", "isDisabled", "isReadOnly", "isClearable", "isAutoFocus", "setHint", "setIsFocused", "setIsHovered", "setValue", "onClick", "onFocus", "onBlur"];
 var TextFieldInput = function TextFieldInput(props) {
   return React__default.createElement(appStudio.Input, Object.assign({
     type: "text"
@@ -3492,7 +3586,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$q);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
   var _useTheme = appStudio.useTheme(),
     getColor = _useTheme.getColor;
   var IconColor = getColor('color.blueGray.700');
@@ -3600,7 +3694,7 @@ var TextFieldView = function TextFieldView(_ref) {
   }), rightChild && React__default.createElement(React__default.Fragment, null, rightChild))));
 };
 
-var _excluded$r = ["visibleIcon", "hiddenIcon"],
+var _excluded$u = ["visibleIcon", "hiddenIcon"],
   _excluded2$1 = ["isVisible", "setIsVisible"];
 var PasswordComponent = function PasswordComponent(_ref) {
   var _ref$visibleIcon = _ref.visibleIcon,
@@ -3611,7 +3705,7 @@ var PasswordComponent = function PasswordComponent(_ref) {
     hiddenIcon = _ref$hiddenIcon === void 0 ? React__default.createElement(CloseEyeSvg, {
       size: 14
     }) : _ref$hiddenIcon,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
   var _usePasswordState = usePasswordState(props),
     isVisible = _usePasswordState.isVisible,
     setIsVisible = _usePasswordState.setIsVisible,
@@ -3679,7 +3773,7 @@ var IconSizes$4 = {
   xl: 16
 };
 
-var _excluded$s = ["isHovered", "setIsHovered", "option", "size", "callback"],
+var _excluded$v = ["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"];
@@ -3691,13 +3785,14 @@ 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$s);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
   var handleOptionClick = function handleOptionClick(option) {
     return callback(option);
   };
   var handleHover = function handleHover() {
     return setIsHovered(!isHovered);
   };
+  console.log(props.name);
   return React__default.createElement(appStudio.Element, Object.assign({
     as: "li",
     margin: 0,
@@ -4162,7 +4257,7 @@ var SliderPadding = {
   }
 };
 
-var _excluded$t = ["id", "name", "label", "inActiveChild", "activeChild", "labelPosition", "shadow", "size", "colorScheme", "value", "isHovered", "isDisabled", "isReadOnly", "onChange", "setValue", "setIsHovered", "styles"];
+var _excluded$w = ["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"
@@ -4201,7 +4296,7 @@ var SwitchView = function SwitchView(_ref) {
       circle: {},
       label: {}
     } : _ref$styles,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$w);
   var handleToggle = function handleToggle(event) {
     if (!isReadOnly) {
       setValue(!value);
@@ -4287,7 +4382,7 @@ var useTextAreaState = function useTextAreaState(_ref) {
   };
 };
 
-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 _excluded$x = ["id", "name", "hint", "error", "value", "label", "shadow", "helperText", "placeholder", "size", "shape", "variant", "colorScheme", "isHovered", "isFocused", "isEditable", "isReadOnly", "isDisabled", "isAutoFocus", "isMultiline", "maxRows", "maxCols", "onBlur", "onChange", "onFocus", "onChangeText", "setHint", "setValue", "setIsFocused", "setIsHovered", "styles"];
 var TextAreaView = function TextAreaView(_ref) {
   var id = _ref.id,
     name = _ref.name,
@@ -4342,7 +4437,7 @@ var TextAreaView = function TextAreaView(_ref) {
       helperText: {},
       field: {}
     } : _ref$styles,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
   var isWithLabel = !!(isFocused && label);
   var fieldStyles = _extends({
     margin: 0,
@@ -4510,7 +4605,7 @@ var FormikForm = function FormikForm(_ref) {
   }, React__default.createElement(appStudio.Form, null, children));
 };
 
-var _excluded$v = ["name", "type"];
+var _excluded$y = ["name", "type"];
 var getInputTypeProps = function getInputTypeProps(type) {
   switch (type) {
     case 'email':
@@ -4540,7 +4635,7 @@ var getInputTypeProps = function getInputTypeProps(type) {
 var useFormikInput = function useFormikInput(_ref) {
   var name = _ref.name,
     type = _ref.type,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
   var focus = useFormFocus();
   var _useFormikContext = formik.useFormikContext(),
     touched = _useFormikContext.touched,
@@ -4587,11 +4682,11 @@ var useFormikInput = function useFormikInput(_ref) {
 // import FormRater from 'src/Rate/Rate';
 // import Upload from 'src/Upload/Upload';
 
-var _excluded$w = ["value"];
+var _excluded$z = ["value"];
 var CheckboxComponent$1 = function CheckboxComponent(props) {
   var _useFormikInput = useFormikInput(props),
     value = _useFormikInput.value,
-    formProps = _objectWithoutPropertiesLoose(_useFormikInput, _excluded$w);
+    formProps = _objectWithoutPropertiesLoose(_useFormikInput, _excluded$z);
   formProps.isChecked = value;
   var checkboxStates = useCheckboxState(props);
   return React__default.createElement(CheckboxView, Object.assign({}, checkboxStates, formProps));
@@ -4649,11 +4744,11 @@ var TextAreaComponent$1 = function TextAreaComponent(props) {
  */
 var FormikTextArea = TextAreaComponent$1;
 
-var _excluded$x = ["value"];
+var _excluded$A = ["value"];
 var TextFieldComponent$1 = function TextFieldComponent(props) {
   var formProps = useFormikInput(props);
   var _useTextFieldState = useTextFieldState(props),
-    textFieldStates = _objectWithoutPropertiesLoose(_useTextFieldState, _excluded$x);
+    textFieldStates = _objectWithoutPropertiesLoose(_useTextFieldState, _excluded$A);
   return React__default.createElement(TextFieldView, Object.assign({}, textFieldStates, formProps));
 };
 /**
@@ -4661,7 +4756,7 @@ var TextFieldComponent$1 = function TextFieldComponent(props) {
  */
 var FormikTextField = TextFieldComponent$1;
 
-var _excluded$y = ["visibleIcon", "hiddenIcon"],
+var _excluded$B = ["visibleIcon", "hiddenIcon"],
   _excluded2$3 = ["isVisible", "setIsVisible"];
 var PasswordComponent$1 = function PasswordComponent(_ref) {
   var _ref$visibleIcon = _ref.visibleIcon,
@@ -4672,7 +4767,7 @@ var PasswordComponent$1 = function PasswordComponent(_ref) {
     hiddenIcon = _ref$hiddenIcon === void 0 ? React__default.createElement(CloseEyeSvg, {
       size: 14
     }) : _ref$hiddenIcon,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
   var formProps = useFormikInput(props);
   var _usePasswordState = usePasswordState(formProps),
     isVisible = _usePasswordState.isVisible,
@@ -4695,6 +4790,271 @@ var PasswordComponent$1 = function PasswordComponent(_ref) {
  */
 var FormikPassword = PasswordComponent$1;
 
+// Import the necessary types
+// Define the useComboBoxState hook properly with types
+var useComboBoxState = function useComboBoxState(items, placeholder, searchPlaceholder) {
+  var _useState = React.useState(items),
+    filteredItems = _useState[0],
+    setFilteredItems = _useState[1];
+  var _useState2 = React.useState(placeholder ? {
+      value: placeholder,
+      label: placeholder
+    } : items[0]),
+    selectedItem = _useState2[0],
+    setSelectedItem = _useState2[1];
+  var _useState3 = React.useState(0),
+    highlightedIndex = _useState3[0],
+    setHighlightedIndex = _useState3[1];
+  var _useState4 = React.useState(searchPlaceholder != null ? searchPlaceholder : ''),
+    searchQuery = _useState4[0],
+    setSearchQuery = _useState4[1];
+  var _useState5 = React.useState(false),
+    isDropdownVisible = _useState5[0],
+    setIsDropdownVisible = _useState5[1];
+  return {
+    filteredItems: filteredItems,
+    setFilteredItems: setFilteredItems,
+    selectedItem: selectedItem,
+    setSelectedItem: setSelectedItem,
+    highlightedIndex: highlightedIndex,
+    setHighlightedIndex: setHighlightedIndex,
+    searchQuery: searchQuery,
+    setSearchQuery: setSearchQuery,
+    isDropdownVisible: isDropdownVisible,
+    setIsDropdownVisible: setIsDropdownVisible
+  };
+};
+
+var _excluded$C = ["size", "color"];
+var TickSvg = function TickSvg(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$C);
+  return React__default.createElement(Center, {
+    width: size + "px",
+    height: size + "px"
+  }, React__default.createElement("svg", Object.assign({
+    width: size + "px",
+    height: size + "px",
+    viewBox: "0 -0.5 25 25",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, 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: "M5.5 12.5L10.167 17L19.5 8",
+    stroke: "#444444",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), ' ')));
+};
+
+var _excluded$D = ["size", "color"];
+var SearchLoopSvg = function SearchLoopSvg(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 14 : _ref$size,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? '#c0c0c0' : _ref$color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$D);
+  return React__default.createElement(Center, {
+    width: size + "px",
+    height: size + "px"
+  }, React__default.createElement("svg", Object.assign({
+    fill: "#c0c0c0",
+    width: size + "px",
+    height: size + "px",
+    version: "1.1",
+    id: "Capa_1",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 488.4 488.4",
+    stroke: color
+  }, props), React__default.createElement("g", {
+    id: "SVGRepo_bgCarrier",
+    strokeWidth: "9.279599999999999"
+  }), React__default.createElement("g", {
+    id: "SVGRepo_tracerCarrier",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), React__default.createElement("g", {
+    id: "SVGRepo_iconCarrier"
+  }, React__default.createElement("g", null, React__default.createElement("g", null, React__default.createElement("path", {
+    d: "M0,203.25c0,112.1,91.2,203.2,203.2,203.2c51.6,0,98.8-19.4,134.7-51.2l129.5,129.5c2.4,2.4,5.5,3.6,8.7,3.6 s6.3-1.2,8.7-3.6c4.8-4.8,4.8-12.5,0-17.3l-129.6-129.5c31.8-35.9,51.2-83,51.2-134.7c0-112.1-91.2-203.2-203.2-203.2 S0,91.15,0,203.25z M381.9,203.25c0,98.5-80.2,178.7-178.7,178.7s-178.7-80.2-178.7-178.7s80.2-178.7,178.7-178.7 S381.9,104.65,381.9,203.25z"
+  }), ' ')))));
+};
+
+var _excluded$E = ["placeholder", "items", "showTick", "onSelect", "searchEnabled", "left", "right", "label", "filteredItems", "setSelectedItem", "selectedItem", "highlightedIndex", "setHighlightedIndex", "searchQuery", "setSearchQuery", "setFilteredItems", "styles", "isDropdownVisible", "setIsDropdownVisible"];
+var ComboBoxView = function ComboBoxView(_ref) {
+  var placeholder = _ref.placeholder,
+    items = _ref.items,
+    _ref$showTick = _ref.showTick,
+    showTick = _ref$showTick === void 0 ? true : _ref$showTick,
+    onSelect = _ref.onSelect,
+    _ref$searchEnabled = _ref.searchEnabled,
+    searchEnabled = _ref$searchEnabled === void 0 ? true : _ref$searchEnabled,
+    left = _ref.left,
+    right = _ref.right,
+    label = _ref.label,
+    filteredItems = _ref.filteredItems,
+    setSelectedItem = _ref.setSelectedItem,
+    selectedItem = _ref.selectedItem,
+    highlightedIndex = _ref.highlightedIndex,
+    setHighlightedIndex = _ref.setHighlightedIndex,
+    searchQuery = _ref.searchQuery,
+    setSearchQuery = _ref.setSearchQuery,
+    setFilteredItems = _ref.setFilteredItems,
+    styles = _ref.styles,
+    isDropdownVisible = _ref.isDropdownVisible,
+    setIsDropdownVisible = _ref.setIsDropdownVisible,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$E);
+  React.useEffect(function () {
+    var handleClickOutside = function handleClickOutside(event) {
+      var path = event.composedPath();
+      var isOutside = !path.some(function (element) {
+        return (element == null ? void 0 : element.id) === 'combobox-dropdown';
+      });
+      if (isOutside) {
+        setIsDropdownVisible(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return function () {
+      return document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+  var handleSearch = function handleSearch(query) {
+    setSearchQuery(query);
+    if (query === '') {
+      setFilteredItems(items);
+    } else {
+      var filtered = items.filter(function (item) {
+        return item.label.toLowerCase().includes(query.toLowerCase());
+      });
+      setFilteredItems(filtered);
+    }
+    setHighlightedIndex(0);
+  };
+  var handleSelect = function handleSelect(item) {
+    setSelectedItem(item);
+    onSelect == null || onSelect(item);
+    setIsDropdownVisible(false);
+  };
+  return React__default.createElement(Horizontal, Object.assign({
+    role: "combobox",
+    wrap: "nowrap",
+    gap: 15,
+    alignItems: "center",
+    width: "100%"
+  }, props), label && React__default.createElement(Text, {
+    styles: styles == null ? void 0 : styles.label,
+    htmlFor: props.id
+  }, label), React__default.createElement(View, {
+    position: "relative"
+  }, React__default.createElement(Horizontal, Object.assign({
+    cursor: "pointer",
+    backgroundColor: "white",
+    boxShadow: "rgba(0, 0, 0, 0.16) 0px 1px 4px",
+    padding: "12px",
+    display: "flex",
+    alignItems: "center",
+    borderRadius: "4px",
+    justify: "space-between",
+    minWidth: 300,
+    wrap: "nowrap"
+  }, styles == null ? void 0 : styles.container), React__default.createElement(Horizontal, Object.assign({
+    gap: 15,
+    alignItems: "center",
+    position: "relative",
+    width: "100%",
+    onClick: function onClick() {
+      return setIsDropdownVisible(!isDropdownVisible);
+    }
+  }, styles == null ? void 0 : styles.labelContainer), left, React__default.createElement(Text, Object.assign({
+    weight: "medium",
+    flexGrow: 1
+  }, styles == null ? void 0 : styles.label), selectedItem.label)), right, isDropdownVisible && React__default.createElement(View, Object.assign({
+    id: "combobox-dropdown",
+    position: "absolute",
+    backgroundColor: "white",
+    boxShadow: "rgba(0, 0 ,0 ,0.16) 0px 1px 4px",
+    width: "100%",
+    overflowY: "auto",
+    zIndex: 10000,
+    bottom: -8,
+    left: 0,
+    transform: "translateY(100%)",
+    marginTop: "4px",
+    borderRadius: "4px"
+  }, styles == null ? void 0 : styles.dropdown), searchEnabled && React__default.createElement(TextFieldView, {
+    id: props.id,
+    name: props.name,
+    width: "100%",
+    type: "search",
+    value: searchQuery,
+    onChange: function onChange(value) {
+      return handleSearch(value);
+    },
+    hint: placeholder,
+    isClearable: false,
+    leftChild: React__default.createElement(SearchLoopSvg, {
+      size: 12
+    }),
+    styles: {
+      box: _extends({
+        width: '100%',
+        padding: '6px 12px',
+        borderBottom: filteredItems.length > 0 ? '1px solid #ccc' : '1px solid transparent'
+      }, styles == null ? void 0 : styles.text)
+    }
+  }), filteredItems.length > 0 && React__default.createElement(View, {
+    margin: 0,
+    padding: 4
+  }, filteredItems.map(function (item, index) {
+    return React__default.createElement(Horizontal, Object.assign({
+      justify: "space-between",
+      key: item.value,
+      padding: "12px",
+      cursor: "pointer",
+      borderRadius: 4,
+      backgroundColor: index === highlightedIndex ? 'color.gray.100' : 'transparent',
+      onMouseEnter: function onMouseEnter() {
+        return setHighlightedIndex(index);
+      },
+      onClick: function onClick() {
+        return handleSelect(item);
+      }
+    }, styles == null ? void 0 : styles.item), React__default.createElement(Text, null, item.label), React__default.createElement(React__default.Fragment, null, item.icon && item.icon, item.value === selectedItem.value && showTick && !item.icon && React__default.createElement(TickSvg, null)));
+  }))))));
+};
+
+var _excluded$F = ["items", "placeholder", "searchPlaceholder"];
+var ComboBoxComponent = function ComboBoxComponent(_ref) {
+  var items = _ref.items,
+    placeholder = _ref.placeholder,
+    searchPlaceholder = _ref.searchPlaceholder,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$F);
+  var formProps = useFormikInput(props);
+  var ComboBoxStates = useComboBoxState(items, placeholder, searchPlaceholder);
+  // Ensure the onChange function from formProps is being called when an item is selected
+  var handleSelect = function handleSelect(item) {
+    formProps.onChange(item);
+  };
+  return React__default.createElement(ComboBoxView, Object.assign({}, ComboBoxStates, formProps, {
+    onSelect: handleSelect
+  }));
+};
+/**
+ * ComboBox allows users to select one or more options from a list of choices.
+ */
+var FormikComboBox = ComboBoxComponent;
+
 var useModalStore = /*#__PURE__*/zustand.create(function (set) {
   return {
     modal: false,
@@ -4780,7 +5140,7 @@ var HeaderIconSizes = {
   xl: 28
 };
 
-var _excluded$z = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position"],
+var _excluded$G = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position"],
   _excluded2$4 = ["children", "shadow", "isFullScreen", "shape"],
   _excluded3$2 = ["children", "buttonColor", "iconSize", "buttonPosition"],
   _excluded4$2 = ["children"],
@@ -4796,7 +5156,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$z);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$G);
   var handleClick = function handleClick() {
     if (!isClosePrevented) onClose();
   };
@@ -4952,12 +5312,12 @@ Modal.Body = ModalBody;
 Modal.Footer = ModalFooter;
 Modal.Layout = ModalLayout;
 
-var _excluded$A = ["src", "color"],
+var _excluded$H = ["src", "color"],
   _excluded2$5 = ["path"];
 var FileSVG = function FileSVG(_ref) {
   var src = _ref.src,
     color = _ref.color,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$H);
   var _useTheme = appStudio.useTheme(),
     getColor = _useTheme.getColor;
   var Colorprops = color ? {
@@ -5158,12 +5518,12 @@ var AlertComponent = function AlertComponent(_ref) {
 };
 var Alert = AlertComponent;
 
-var _excluded$B = ["ratio", "children"];
+var _excluded$I = ["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$B);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$I);
   return React__default.createElement(Center, Object.assign({
     width: '100%',
     position: "relative",
@@ -5179,11 +5539,11 @@ var AspectRatioView = function AspectRatioView(_ref) {
   }, children));
 };
 
-var _excluded$C = ["ratio", "children"];
+var _excluded$J = ["ratio", "children"];
 var AspectRatioComponent = function AspectRatioComponent(_ref) {
   var ratio = _ref.ratio,
     children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$C);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$J);
   return React__default.createElement(AspectRatioView, Object.assign({
     ratio: ratio
   }, props), children);
@@ -5296,7 +5656,6 @@ var BadgeShapes = {
   rounded: 4,
   pillShaped: 24
 };
-// Example of how you might adjust styles based on the 'position' prop
 var PositionStyles = {
   'top-right': {
     top: 0,
@@ -5415,7 +5774,7 @@ var ToggleShapes = {
   pillShaped: 24
 };
 
-var _excluded$D = ["children", "shape", "colorScheme", "variant", "isHovered", "setIsHovered", "isDisabled", "isToggle", "setIsToggled", "onToggle"];
+var _excluded$K = ["children", "shape", "colorScheme", "variant", "isHovered", "setIsHovered", "isDisabled", "isToggle", "setIsToggled", "onToggle"];
 var ToggleView = function ToggleView(_ref) {
   var children = _ref.children,
     _ref$shape = _ref.shape,
@@ -5430,7 +5789,7 @@ var ToggleView = function ToggleView(_ref) {
     isToggle = _ref.isToggle,
     setIsToggled = _ref.setIsToggled,
     onToggle = _ref.onToggle,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$D);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$K);
   var toggleColor = !isDisabled ? colorScheme : 'theme.disabled';
   var isActive = !!(isToggle || isHovered);
   var ToggleVariants = {
@@ -5478,7 +5837,7 @@ var ToggleView = function ToggleView(_ref) {
   }, ToggleVariants[variant], props), children);
 };
 
-var _excluded$E = ["children", "shape", "colorScheme", "variant", "isDisabled", "isToggled", "onToggle"];
+var _excluded$L = ["children", "shape", "colorScheme", "variant", "isDisabled", "isToggled", "onToggle"];
 var ToggleComponent = function ToggleComponent(_ref) {
   var children = _ref.children,
     shape = _ref.shape,
@@ -5488,7 +5847,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$E);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$L);
   var _useToggleState = useToggleState(isToggled),
     isHovered = _useToggleState.isHovered,
     setIsHovered = _useToggleState.setIsHovered,
@@ -5548,7 +5907,7 @@ var ToggleGroupView = function ToggleGroupView(_ref) {
       return newActiveToggles;
     });
   }, [onToggleChange, setActiveToggles]);
-  return React__default.createElement(Horizontal$1.Horizontal, {
+  return React__default.createElement(Horizontal, {
     role: "ToggleGroup",
     display: "flex",
     gap: 5
@@ -5590,6 +5949,287 @@ var ToggleGroupComponent = function ToggleGroupComponent(_ref) {
 };
 var ToggleGroup = ToggleGroupComponent;
 
+// Create your store with the initial state and actions.
+var useMessageStore = /*#__PURE__*/zustand.create(function (set) {
+  return {
+    // initial state
+    visible: false,
+    title: '',
+    subtitle: '',
+    variant: 'info',
+    isClosable: false,
+    styles: {},
+    action: function action() {},
+    actionText: '',
+    showIcon: false,
+    timeout: 3000,
+    show: function show(variant, title, subtitle, isClosable, styles, action, actionText, showIcon, timeout) {
+      if (title === void 0) {
+        title = '';
+      }
+      if (subtitle === void 0) {
+        subtitle = '';
+      }
+      return set({
+        visible: true,
+        variant: variant,
+        title: title,
+        subtitle: subtitle,
+        isClosable: isClosable,
+        styles: styles,
+        action: action,
+        actionText: actionText,
+        showIcon: showIcon,
+        timeout: timeout
+      });
+    },
+    hide: function hide() {
+      return set({
+        visible: false
+      });
+    }
+  };
+});
+var showMessage = function showMessage(variant, title, subtitle, props) {
+  useMessageStore.getState().show(variant, title, subtitle, props == null ? void 0 : props.isClosable, props == null ? void 0 : props.styles, props == null ? void 0 : props.action, props == null ? void 0 : props.actionText, props == null ? void 0 : props.showIcon, props == null ? void 0 : props.timeout);
+};
+var hideMessage = function hideMessage() {
+  useMessageStore.getState().hide();
+};
+
+var Themes$1 = {
+  info: {
+    container: {
+      backgroundColor: 'color.blue.200',
+      border: 'color.blue.400'
+    },
+    icon: {
+      color: 'color.blue.500',
+      name: 'InformationSvg'
+    },
+    content: {
+      color: 'color.blue.500'
+    },
+    close: {
+      color: 'color.blue.500',
+      name: 'CloseSvg'
+    }
+  },
+  success: {
+    container: {
+      backgroundColor: 'color.green.200',
+      border: 'color.green.400'
+    },
+    icon: {
+      color: 'color.green.500',
+      name: 'CheckCircleSvg'
+    },
+    content: {
+      color: 'color.green.500'
+    },
+    close: {
+      color: 'color.green.500',
+      name: 'CloseSvg'
+    }
+  },
+  error: {
+    container: {
+      backgroundColor: 'color.red.200',
+      border: 'color.red.400'
+    },
+    icon: {
+      color: 'color.red.500',
+      name: 'ErrrorSvg'
+    },
+    content: {
+      color: 'color.red.500'
+    },
+    close: {
+      color: 'color.red.500',
+      name: 'CloseSvg'
+    }
+  },
+  warning: {
+    container: {
+      backgroundColor: 'color.orange.200',
+      border: 'color.orange.400'
+    },
+    icon: {
+      color: 'color.orange.500',
+      name: 'ErrrorSvg'
+    },
+    content: {
+      color: 'color.orange.500'
+    },
+    close: {
+      color: 'color.orange.500',
+      name: 'CloseSvg'
+    }
+  }
+};
+
+var MessageView = function MessageView(_ref) {
+  var _styles$closingIcon, _styles$closingIcon2;
+  var variant = _ref.variant,
+    hide = _ref.hide,
+    title = _ref.title,
+    subtitle = _ref.subtitle,
+    theme = _ref.theme,
+    action = _ref.action,
+    actionText = _ref.actionText,
+    _ref$showIcon = _ref.showIcon,
+    showIcon = _ref$showIcon === void 0 ? false : _ref$showIcon,
+    _ref$isClosable = _ref.isClosable,
+    isClosable = _ref$isClosable === void 0 ? false : _ref$isClosable,
+    _ref$timeout = _ref.timeout,
+    timeout = _ref$timeout === void 0 ? 3000 : _ref$timeout,
+    styles = _ref.styles;
+  React.useEffect(function () {
+    if (timeout && !isClosable) {
+      var timeId = setTimeout(function () {
+        // After 3 seconds set the show value to false
+        hide();
+      }, timeout);
+      return function () {
+        clearTimeout(timeId);
+      };
+    }
+    return;
+  }, []);
+  var Theme = theme != null ? theme : Themes$1;
+  var isWithAction = !!(action && actionText);
+  var containerStyle = {
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderRadius: 8,
+    borderColor: "" + Theme[variant].container.border
+  };
+  var iconColor = {
+    info: '#3b82f6',
+    success: '#4ade80',
+    warning: '#f97316',
+    error: '#ef4444'
+  }[variant];
+  var iconComponent = {
+    info: React__default.createElement(InfoSvg, Object.assign({
+      size: 24,
+      color: iconColor
+    }, styles == null ? void 0 : styles.icon)),
+    success: React__default.createElement(SuccessSvg, Object.assign({
+      size: 24,
+      color: iconColor
+    }, styles == null ? void 0 : styles.icon)),
+    warning: React__default.createElement(WarningSvg, Object.assign({
+      size: 24,
+      color: iconColor
+    }, styles == null ? void 0 : styles.icon)),
+    error: React__default.createElement(ErrorSvg, Object.assign({
+      size: 24,
+      color: iconColor
+    }, styles == null ? void 0 : styles.icon))
+  }[variant];
+  var isShowIcon = showIcon && iconComponent;
+  return React__default.createElement(Horizontal, Object.assign({
+    role: "messageContent",
+    gap: 16,
+    width: 400,
+    // safe={true}
+    wrap: "nowrap",
+    position: 'relative',
+    alignItems: "center",
+    padding: "14px 24px 14px 14px",
+    color: "" + Theme[variant].content.color,
+    backgroundColor: "" + Theme[variant].container.backgroundColor,
+    onClick: isClosable ? function () {} : function () {
+      hide();
+    }
+  }, containerStyle, styles == null ? void 0 : styles.container), isShowIcon && iconComponent, React__default.createElement(Vertical, {
+    gap: 8,
+    width: "100%"
+  }, React__default.createElement(Text, Object.assign({
+    size: "md",
+    weight: "semiBold"
+  }, styles == null ? void 0 : styles.title), title), subtitle && React__default.createElement(Text, Object.assign({
+    size: "sm"
+  }, styles == null ? void 0 : styles.subtitle), subtitle)), isWithAction && React__default.createElement(Text, Object.assign({
+    marginRight: 10,
+    onClick: action,
+    padding: "6px 10px",
+    whiteSpace: "nowrap"
+  }, containerStyle, styles == null ? void 0 : styles.actionText), actionText), isClosable && React__default.createElement(View, Object.assign({
+    position: "absolute",
+    zIndex: 10000,
+    right: 8,
+    top: 6,
+    onClick: function onClick() {
+      hide();
+    }
+  }, styles == null || (_styles$closingIcon = styles.closingIcon) == null ? void 0 : _styles$closingIcon.container), React__default.createElement(CloseSvg, Object.assign({
+    size: 18,
+    color: iconColor
+  }, styles == null || (_styles$closingIcon2 = styles.closingIcon) == null ? void 0 : _styles$closingIcon2.icon))));
+};
+
+var MessageLayout = function MessageLayout(_ref) {
+  var container = _ref.container,
+    theme = _ref.theme,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? 'topRight' : _ref$position;
+  var _useMessageStore = useMessageStore(),
+    visible = _useMessageStore.visible,
+    title = _useMessageStore.title,
+    variant = _useMessageStore.variant,
+    subtitle = _useMessageStore.subtitle,
+    isClosable = _useMessageStore.isClosable,
+    styles = _useMessageStore.styles,
+    action = _useMessageStore.action,
+    actionText = _useMessageStore.actionText,
+    showIcon = _useMessageStore.showIcon,
+    timeout = _useMessageStore.timeout;
+  var toastPosition = {
+    topLeft: {
+      top: 6,
+      left: 8
+    },
+    topRight: {
+      top: 6,
+      right: 8
+    },
+    bottomLeft: {
+      bottom: 8,
+      left: 6
+    },
+    bottomRight: {
+      bottom: 8,
+      right: 6
+    }
+  }[position];
+  // Crée une fonction pour construire le contenu du message
+  var renderMessageContent = function renderMessageContent() {
+    return React__default.createElement(MessageView, {
+      variant: variant,
+      subtitle: subtitle,
+      show: visible,
+      title: title,
+      theme: theme,
+      isClosable: isClosable,
+      styles: styles,
+      action: action,
+      actionText: actionText,
+      showIcon: showIcon,
+      timeout: timeout,
+      hide: function hide() {
+        return hideMessage();
+      }
+    });
+  };
+  var MessageContainer = container ? React__default.cloneElement(container, {}, renderMessageContent()) : React__default.createElement(View, Object.assign({
+    position: 'absolute',
+    zIndex: 10000
+  }, toastPosition), renderMessageContent());
+  return visible ? MessageContainer : null;
+};
+
 exports.Alert = Alert;
 exports.AspectRatio = AspectRatio;
 exports.Avatar = Avatar;
@@ -5603,6 +6243,7 @@ exports.DatePicker = DatePicker;
 exports.FileImage = FileImage;
 exports.FileSVG = FileSVG;
 exports.FormikCheckbox = FormikCheckbox;
+exports.FormikComboBox = FormikComboBox;
 exports.FormikCountryPicker = FormikCountryPicker;
 exports.FormikDatePicker = FormikDatePicker;
 exports.FormikForm = FormikForm;
@@ -5616,6 +6257,8 @@ exports.Inline = Inline;
 exports.Left = Left;
 exports.Link = Link;
 exports.Loader = Loader;
+exports.MessageLayout = MessageLayout;
+exports.MessageView = MessageView;
 exports.Modal = Modal;
 exports.Password = Password;
 exports.Right = Right;
@@ -5630,7 +6273,10 @@ exports.ToggleGroup = ToggleGroup;
 exports.Top = Top;
 exports.Vertical = Vertical;
 exports.View = View;
+exports.hideMessage = hideMessage;
 exports.hideModal = hideModal;
+exports.showMessage = showMessage;
 exports.showModal = showModal;
+exports.useMessageStore = useMessageStore;
 exports.useModalStore = useModalStore;
 //# sourceMappingURL=web.cjs.development.js.map