@app-studio/web 0.3.69 → 0.6.0

package/dist/web.cjs.development.js

@@ -8,6 +8,7 @@ var React = require('react');
 var React__default = _interopDefault(React);
 var appStudio = require('app-studio');
 var reactRouterDom = require('react-router-dom');
+var Layout = require('src/components/Layout');
 var format = _interopDefault(require('date-fns/format'));
 var formik = require('formik');
 var zustand = require('zustand');
@@ -16,11 +17,15 @@ var useButtonState = function useButtonState() {
   var _React$useState = React__default.useState(false),
     isHovered = _React$useState[0],
     setIsHovered = _React$useState[1];
+  // This custom react hook 'useButtonState' is defined for managing the state of a button, especially for hover interactions.
   return {
     isHovered: isHovered,
     setIsHovered: setIsHovered
   };
+  // The 'setIsHovered' function is used to update the value of 'isHovered' state when the hover status of the button changes.
+  // A state variable 'isHovered' is declared with its initial value set to 'false', indicating that the button is not hovered by default.
 };
+// The hook returns an object containing 'isHovered' state and the 'setIsHovered' function to enable state management from the consumer component.
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -441,6 +446,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,
@@ -454,7 +554,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,
@@ -474,7 +574,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);
   };
@@ -505,7 +605,9 @@ var LinkComponent = function LinkComponent(props) {
 var Link = LinkComponent;
 
 var ButtonSizes = {
+  // Defines a constant 'ButtonSizes' as a mapping from 'Size' to corresponding 'CSSProperties'.
   xs: {
+    // Establishes style configuration for extra-small (xs) button size.
     width: 79,
     paddingTop: 8,
     paddingBottom: 8,
@@ -524,6 +626,7 @@ var ButtonSizes = {
     paddingRight: 16,
     fontWeight: 600,
     fontSize: 'sm',
+    // Establishes style configuration for medium (md) button size.
     lineHeight: 20,
     letterSpacing: 1.25
   },
@@ -533,6 +636,7 @@ var ButtonSizes = {
     paddingBottom: 12,
     paddingLeft: 18,
     paddingRight: 18,
+    // Establishes style configuration for large (lg) button size.
     fontWeight: 600,
     fontSize: 'md',
     lineHeight: 24,
@@ -542,6 +646,7 @@ var ButtonSizes = {
     width: 178,
     paddingTop: 14,
     paddingBottom: 14,
+    // Establishes style configuration for extra-large (xl) button size.
     paddingLeft: 22,
     paddingRight: 22,
     fontWeight: 600,
@@ -552,28 +657,38 @@ var ButtonSizes = {
   xl: {
     width: 220,
     paddingTop: 16,
+    // Defines a constant 'ButtonShapes' with style properties for different button shapes such as 'sharp', 'rounded', and 'pillShaped'.
     paddingBottom: 16,
+    // Sets the border-radius for a sharp-edged button shape to '0'.
     paddingLeft: 26,
+    // Sets the border-radius for a rounded button shape to '4'.
     paddingRight: 26,
+    // Sets the border-radius for a pill-shaped button to '24'.
     fontWeight: 600,
     fontSize: 'xl',
+    // Defines a constant 'IconSizes' as a mapping from 'Size' to corresponding 'CSSProperties' for icons.
     lineHeight: 24,
+    // Sets the width, height, and padding for icons of extra-small size.
     letterSpacing: 1.25
   }
 };
 var ButtonShapes = {
+  // Sets the width, height, and padding for icons of small size.
   sharp: 0,
   rounded: 4,
   pillShaped: 24
 };
+// Sets the width, height, and padding for icons of medium size.
 var IconSizes$1 = {
   xs: {
     width: 24,
     height: 24,
+    // Sets the width, height, and padding for icons of large size.
     padding: 12
   },
   sm: {
     width: 24,
+    // Sets the width, height, and padding for icons of extra-large size.
     height: 24,
     padding: 15
   },
@@ -612,7 +727,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"];
@@ -623,7 +738,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];
@@ -797,7 +912,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,
@@ -834,7 +949,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
@@ -844,6 +959,7 @@ var ButtonView = function ButtonView(_ref) {
   var reverse = isHovered && effect === 'reverse';
   var ButtonVariants = {
     filled: {
+      // Defines CSS properties for 'link' variant of the button with conditional styles based on reverse state, includes text decoration.
       backgroundColor: reverse ? 'transparent' : buttonColor,
       color: reverse ? buttonColor : 'color.white',
       borderWidth: 1,
@@ -852,15 +968,20 @@ var ButtonView = function ButtonView(_ref) {
     },
     outline: {
       backgroundColor: reverse ? buttonColor : 'transparent',
+      // Defines CSS properties for 'ghost' variant of the button with conditional styles based on reverse state.
       borderWidth: 1,
       borderStyle: 'solid',
       borderColor: reverse ? buttonColor : colorScheme,
+      // Fetches size-specific styles from ButtonSizes based on the 'size' prop.
       color: reverse ? 'white' : buttonColor
     },
+    // Adjusts button width based on isAuto and isFilled properties, using buttonSizeStyles for fallback width.
     link: {
       backgroundColor: 'transparent',
+      // Changes padding for the button based on whether isIconRounded is true or false.
       borderWidth: 1,
       borderStyle: 'solid',
+      // Creates the content for the button including loaders and icons positioned based on their respective properties.
       borderColor: reverse ? buttonColor : 'transparent',
       color: buttonColor,
       textDecoration: reverse ? 'none' : 'underline'
@@ -873,6 +994,7 @@ var ButtonView = function ButtonView(_ref) {
       borderColor: reverse ? buttonColor : 'transparent'
     }
   };
+  // Executes rendering of the button or a link element based on the variant; applies conditional rendering for externalHref in 'link' variant.
   var buttonSizeStyles = ButtonSizes[size];
   var buttonVariant = ButtonVariants[variant];
   var scaleWidth = {
@@ -909,23 +1031,32 @@ var ButtonView = function ButtonView(_ref) {
   }, content) : content);
 };
 
+// Importing a custom hook to manage the state specific to the button component.
 var ButtonComponent = function ButtonComponent(props) {
+  // Importing the view part of the button, which is presumably a presentational component.
   var _useButtonState = useButtonState(),
     isHovered = _useButtonState.isHovered,
     setIsHovered = _useButtonState.setIsHovered;
+  // Defining the button component with generic React Functional Component type augmented with ButtonProps type.
   var handleHover = function handleHover() {
     return setIsHovered(!isHovered);
   };
-  return React__default.createElement(ButtonView, Object.assign({
-    isHovered: isHovered,
-    setIsHovered: setIsHovered,
-    onMouseEnter: handleHover,
-    onMouseLeave: handleHover
-  }, props));
+  // Destructuring the state and state update function from the custom hook for button state management.
+  return (
+    // Defines a function to toggle the hover state of the button.
+    React__default.createElement(ButtonView, Object.assign({
+      isHovered: isHovered,
+      // Rendering the ButtonView component and spreading the received props on it.
+      setIsHovered: setIsHovered,
+      // Passing the isHovered state and the setIsHovered function to the ButtonView.
+      onMouseEnter: handleHover,
+      // Binding handleHover function to onMouseEnter and onMouseLeave events to toggle hover effect.
+      onMouseLeave: handleHover
+    }, props))
+  );
+  // Exports the Button component for use in other parts of the application.
 };
-/**
- * Buttons allow us to trigger an event or an action with a single click.
- */
+
 var Button = ButtonComponent;
 
 var useCheckboxState = function useCheckboxState(_ref) {
@@ -945,40 +1076,49 @@ var useCheckboxState = function useCheckboxState(_ref) {
   };
 };
 
+// Import Headings type definition from Label.type module for type safety and consistency.
 var HeadingSizes = {
+  // Initialize a constant 'HeadingSizes' to define styles for different heading levels.
   h1: {
+    // Use TypeScript's 'Record' utility type to ensure the object matches the shape of 'Headings'.
     fontSize: 96,
+    // Define style properties for 'h1' heading tag, including font size, line height, and letter spacing.
     lineHeight: 112,
     letterSpacing: -1.5
   },
   h2: {
     fontSize: 60,
+    // Define style properties for 'h2' heading tag similar to 'h1', but with adjusted values for size and spacing.
     lineHeight: 71,
     letterSpacing: -0.5
   },
   h3: {
     fontSize: 48,
+    // Define style properties for 'h3' heading tag with a standard letter spacing of 0.
     lineHeight: 57,
     letterSpacing: 0
   },
   h4: {
     fontSize: 34,
+    // Provide style properties for 'h4' heading tag, with a slight increase in letter spacing.
     lineHeight: 40,
     letterSpacing: 0.25
   },
   h5: {
     fontSize: 24,
+    // Set the 'h5' heading tag styles, opting for no additional letter spacing.
     lineHeight: 28,
     letterSpacing: 0
   },
   h6: {
     fontSize: 20,
+    // Set the 'h6' heading tag styles, with the smallest font size and a subtle letter spacing.
     lineHeight: 24,
     letterSpacing: 0.15
   }
 };
 
-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,
@@ -992,22 +1132,37 @@ 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);
+  // The fontStyle prop toggles between 'italic' and 'normal' based on the 'isItalic' boolean prop.
   var headingStyles = heading ? HeadingSizes[heading] : {};
-  return React__default.createElement(appStudio.Element, Object.assign({
-    as: "label",
-    width: "100%",
-    fontSize: size,
-    fontStyle: isItalic ? 'italic' : 'normal',
-    fontWeight: appStudio.Typography.fontWeights[weight],
-    textDecoration: isStriked ? 'line-through' : isUnderlined ? 'underline' : 'none'
-  }, headingStyles, props), children);
+  // fontWeight is derived from the Typography module, ensuring consistent font weighting across the app.
+  return (
+    // textDecoration conditionally applies 'line-through' or 'underline' based on respective boolean props; defaults to 'none' if both are false.
+    React__default.createElement(appStudio.Element, Object.assign({
+      as: "label",
+      // Spreads any additional style properties from headingStyles into the Element if a heading size is specified.
+      width: "100%",
+      // Spreads the rest of the props to support extensibility of the LabelView component for future use cases.
+      fontSize: size,
+      // Includes children elements inside the Element, allowing for nested content within the label.
+      fontStyle: isItalic ? 'italic' : 'normal',
+      fontWeight: appStudio.Typography.fontWeights[weight],
+      textDecoration: isStriked ? 'line-through' : isUnderlined ? 'underline' : 'none'
+    }, headingStyles, props), children)
+  );
 };
 
+// Import custom type 'LabelProps' to type check the properties passed into the Label component.
 var LabelComponent = function LabelComponent(props) {
-  return React__default.createElement(LabelView, Object.assign({}, props));
+  return (
+    // Import 'LabelView' as a visual component for the label, separating the view from business logic.
+    React__default.createElement(LabelView, Object.assign({}, props))
+    // Define 'LabelComponent' as a functional component that uses React's FC type for type checking and utilizing React features.
+  );
 };
+// Pass all properties received by 'LabelComponent' to 'LabelView' using the spread syntax, ensuring it has all props needed for rendering.
 var Label = LabelComponent;
+// Export the 'LabelComponent' as 'Label' to be reused throughout the project.
 
 var Sizes = {
   xs: {
@@ -1064,7 +1219,134 @@ 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 HeadingSizes$1 = {
+  h1: {
+    fontSize: 96,
+    lineHeight: 112,
+    letterSpacing: -1.5
+  },
+  h2: {
+    fontSize: 60,
+    lineHeight: 71,
+    letterSpacing: -0.5
+  },
+  h3: {
+    fontSize: 48,
+    lineHeight: 57,
+    letterSpacing: 0
+  },
+  h4: {
+    fontSize: 34,
+    lineHeight: 40,
+    letterSpacing: 0.25
+  },
+  h5: {
+    fontSize: 24,
+    lineHeight: 28,
+    letterSpacing: 0
+  },
+  h6: {
+    fontSize: 20,
+    lineHeight: 24,
+    letterSpacing: 0.15
+  }
+};
+
+var _excluded$i = ["children", "heading", "maxLines", "isItalic", "isUnderlined", "isSub", "isSup", "isStriked", "isTruncated", "weight", "size"];
+var TextContent = function TextContent(_ref) {
+  var children = _ref.children,
+    isSub = _ref.isSub,
+    isSup = _ref.isSup;
+  return React__default.createElement(React__default.Fragment, null, typeof children === 'string' ? React__default.createElement(React__default.Fragment, null, isSub && React__default.createElement("sup", null, children), isSup && React__default.createElement("sup", null, children), !isSub && !isSup && React__default.createElement(React__default.Fragment, null, children)) : children);
+};
+var TruncateText = function TruncateText(_ref2) {
+  var text = _ref2.text,
+    _ref2$maxLines = _ref2.maxLines,
+    maxLines = _ref2$maxLines === void 0 ? 1 : _ref2$maxLines;
+  var containerRef = React.useRef(null);
+  var _useState = React.useState(text.length),
+    truncatedLength = _useState[0],
+    setTruncatedLength = _useState[1];
+  React.useEffect(function () {
+    var textNode = containerRef.current;
+    if (!textNode) return;
+    var updateTruncatedText = function updateTruncatedText() {
+      var comLineHeight = getComputedStyle(textNode).lineHeight;
+      var lineHeight = comLineHeight !== 'normal' ? parseFloat(comLineHeight) : 20;
+      var maxHeight = lineHeight * maxLines;
+      var start = 0;
+      var end = text.length;
+      var middle;
+      while (start <= end) {
+        middle = Math.floor((start + end) / 2);
+        textNode.innerText = text.substring(0, middle) + '...';
+        var currentHeight = textNode.offsetHeight;
+        if (currentHeight > maxHeight) {
+          end = middle - 1;
+        } else {
+          start = middle + 1;
+        }
+      }
+      setTruncatedLength(end);
+    };
+    updateTruncatedText();
+  }, [text, maxLines]);
+  var displayText = text.length > truncatedLength ? text.substring(0, truncatedLength) + '...' : text;
+  return React__default.createElement("div", {
+    ref: containerRef
+  }, displayText);
+};
+var TextView = function TextView(_ref3) {
+  var children = _ref3.children,
+    heading = _ref3.heading,
+    maxLines = _ref3.maxLines,
+    _ref3$isItalic = _ref3.isItalic,
+    isItalic = _ref3$isItalic === void 0 ? false : _ref3$isItalic,
+    _ref3$isUnderlined = _ref3.isUnderlined,
+    isUnderlined = _ref3$isUnderlined === void 0 ? false : _ref3$isUnderlined,
+    _ref3$isSub = _ref3.isSub,
+    isSub = _ref3$isSub === void 0 ? false : _ref3$isSub,
+    _ref3$isSup = _ref3.isSup,
+    isSup = _ref3$isSup === void 0 ? false : _ref3$isSup,
+    _ref3$isStriked = _ref3.isStriked,
+    isStriked = _ref3$isStriked === void 0 ? false : _ref3$isStriked,
+    _ref3$isTruncated = _ref3.isTruncated,
+    isTruncated = _ref3$isTruncated === void 0 ? false : _ref3$isTruncated,
+    _ref3$weight = _ref3.weight,
+    weight = _ref3$weight === void 0 ? 'normal' : _ref3$weight,
+    _ref3$size = _ref3.size,
+    size = _ref3$size === void 0 ? 'md' : _ref3$size,
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded$i);
+  var headingStyles = heading ? HeadingSizes$1[heading] : {};
+  var noLineBreak = isSub || isSup ? {
+    display: 'inline'
+  } : {};
+  var fontSize = appStudio.Typography.fontSizes[size];
+  return React__default.createElement(appStudio.Element, Object.assign({
+    role: "text",
+    fontSize: fontSize,
+    lineHeight: appStudio.Typography.lineHeights[size],
+    fontStyle: isItalic ? 'italic' : 'normal',
+    fontWeight: appStudio.Typography.fontWeights[weight],
+    textDecoration: isStriked ? 'line-through' : isUnderlined ? 'underline' : 'none'
+  }, noLineBreak, headingStyles, props), isTruncated && maxLines && typeof children === 'string' ? React__default.createElement(TruncateText, {
+    text: children,
+    maxLines: maxLines
+  }) : React__default.createElement(TextContent, Object.assign({
+    isSub: isSub,
+    isSup: isSup
+  }, props), children));
+};
+
+var TextComponent = function TextComponent(props) {
+  return React__default.createElement(TextView, Object.assign({}, props));
+};
+/**
+ * The Text component is a simple component that renders a text string or paragraphs as a DOM element in the UI. It is a <p> tag by default.
+ */
+var Text = TextComponent;
+
+var _excluded$j = ["id", "icon", "name", "label", "isChecked", "onChange", "onValueChange", "shadow", "labelPosition", "size", "colorScheme", "error", "isSelected", "isHovered", "isDisabled", "isReadOnly", "isIndeterminate", "defaultIsSelected", "setIsSelected", "setIsHovered", "styles", "infoText"];
 var CheckboxView = function CheckboxView(_ref) {
   var id = _ref.id,
     icon = _ref.icon,
@@ -1101,7 +1383,8 @@ var CheckboxView = function CheckboxView(_ref) {
       checkbox: {},
       label: {}
     } : _ref$styles,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+    infoText = _ref.infoText,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
   var handleHover = function handleHover() {
     return setIsHovered(!isHovered);
   };
@@ -1142,9 +1425,22 @@ var CheckboxView = function CheckboxView(_ref) {
     onMouseEnter: handleHover,
     onMouseLeave: handleHover,
     size: appStudio.Typography.fontSizes[size]
-  }, checkboxStyle.container, props), labelPosition === 'left' && label && React__default.createElement(appStudio.View, null, label), React__default.createElement(Center, Object.assign({}, checkboxStyle.checkbox), isIndeterminate ? React__default.createElement(IndeterminateSvg, null) : (isChecked || isSelected) && (icon != null ? icon : React__default.createElement(CheckSvg, {
+  }, checkboxStyle.container, props), React__default.createElement(Layout.Vertical, {
+    gap: 8
+  }, React__default.createElement(Layout.Horizontal, {
+    gap: 10,
+    alignItems: "center"
+  }, labelPosition === 'left' && label && React__default.createElement(Text, Object.assign({
+    size: size
+  }, styles == null ? void 0 : styles.label), label), React__default.createElement(Center, Object.assign({}, checkboxStyle.checkbox), isIndeterminate ? React__default.createElement(IndeterminateSvg, null) : (isChecked || isSelected) && (icon != null ? icon : React__default.createElement(CheckSvg, {
     size: IconSizes$2[size]
-  }))), labelPosition === 'right' && label && React__default.createElement(appStudio.View, null, label));
+  }))), labelPosition === 'right' && label && React__default.createElement(Text, Object.assign({
+    size: size
+  }, styles == null ? void 0 : styles.label), label)), infoText && React__default.createElement(Text, Object.assign({
+    marginLeft: labelPosition === 'left' ? 0 : 27,
+    color: "color.gray.400",
+    size: "sm"
+  }, styles == null ? void 0 : styles.infoText), infoText)));
 };
 
 var CheckboxComponent = function CheckboxComponent(props) {
@@ -2629,154 +2925,27 @@ var useCountryPickerState = function useCountryPickerState(_ref) {
     isHovered = _React$useState5[0],
     setIsHovered = _React$useState5[1];
   return {
-    hide: hide,
-    setHide: setHide,
-    newOptions: newOptions,
-    setNewOptions: setNewOptions,
-    isHovered: isHovered,
-    setIsHovered: setIsHovered,
-    isFocused: isFocused,
-    setIsFocused: setIsFocused,
-    value: value,
-    setValue: setValue
-  };
-};
-
-var HeadingSizes$1 = {
-  h1: {
-    fontSize: 96,
-    lineHeight: 112,
-    letterSpacing: -1.5
-  },
-  h2: {
-    fontSize: 60,
-    lineHeight: 71,
-    letterSpacing: -0.5
-  },
-  h3: {
-    fontSize: 48,
-    lineHeight: 57,
-    letterSpacing: 0
-  },
-  h4: {
-    fontSize: 34,
-    lineHeight: 40,
-    letterSpacing: 0.25
-  },
-  h5: {
-    fontSize: 24,
-    lineHeight: 28,
-    letterSpacing: 0
-  },
-  h6: {
-    fontSize: 20,
-    lineHeight: 24,
-    letterSpacing: 0.15
-  }
-};
-
-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,
-    isSup = _ref.isSup;
-  return React__default.createElement(React__default.Fragment, null, typeof children === 'string' ? React__default.createElement(React__default.Fragment, null, isSub && React__default.createElement("sup", null, children), isSup && React__default.createElement("sup", null, children), !isSub && !isSup && React__default.createElement(React__default.Fragment, null, children)) : children);
-};
-var TruncateText = function TruncateText(_ref2) {
-  var text = _ref2.text,
-    _ref2$maxLines = _ref2.maxLines,
-    maxLines = _ref2$maxLines === void 0 ? 1 : _ref2$maxLines;
-  var containerRef = React.useRef(null);
-  var _useState = React.useState(text.length),
-    truncatedLength = _useState[0],
-    setTruncatedLength = _useState[1];
-  React.useEffect(function () {
-    var textNode = containerRef.current;
-    if (!textNode) return;
-    var updateTruncatedText = function updateTruncatedText() {
-      var comLineHeight = getComputedStyle(textNode).lineHeight;
-      var lineHeight = comLineHeight !== 'normal' ? parseFloat(comLineHeight) : 20;
-      var maxHeight = lineHeight * maxLines;
-      var start = 0;
-      var end = text.length;
-      var middle;
-      while (start <= end) {
-        middle = Math.floor((start + end) / 2);
-        textNode.innerText = text.substring(0, middle) + '...';
-        var currentHeight = textNode.offsetHeight;
-        if (currentHeight > maxHeight) {
-          end = middle - 1;
-        } else {
-          start = middle + 1;
-        }
-      }
-      setTruncatedLength(end);
-    };
-    updateTruncatedText();
-  }, [text, maxLines]);
-  var displayText = text.length > truncatedLength ? text.substring(0, truncatedLength) + '...' : text;
-  return React__default.createElement("div", {
-    ref: containerRef
-  }, displayText);
-};
-var TextView = function TextView(_ref3) {
-  var children = _ref3.children,
-    heading = _ref3.heading,
-    maxLines = _ref3.maxLines,
-    _ref3$isItalic = _ref3.isItalic,
-    isItalic = _ref3$isItalic === void 0 ? false : _ref3$isItalic,
-    _ref3$isUnderlined = _ref3.isUnderlined,
-    isUnderlined = _ref3$isUnderlined === void 0 ? false : _ref3$isUnderlined,
-    _ref3$isSub = _ref3.isSub,
-    isSub = _ref3$isSub === void 0 ? false : _ref3$isSub,
-    _ref3$isSup = _ref3.isSup,
-    isSup = _ref3$isSup === void 0 ? false : _ref3$isSup,
-    _ref3$isStriked = _ref3.isStriked,
-    isStriked = _ref3$isStriked === void 0 ? false : _ref3$isStriked,
-    _ref3$isTruncated = _ref3.isTruncated,
-    isTruncated = _ref3$isTruncated === void 0 ? false : _ref3$isTruncated,
-    _ref3$weight = _ref3.weight,
-    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);
-  var headingStyles = heading ? HeadingSizes$1[heading] : {};
-  var noLineBreak = isSub || isSup ? {
-    display: 'inline'
-  } : {};
-  var fontSize = appStudio.Typography.fontSizes[size];
-  return React__default.createElement(appStudio.Element, Object.assign({
-    role: "text",
-    fontSize: fontSize,
-    lineHeight: appStudio.Typography.lineHeights[size],
-    fontStyle: isItalic ? 'italic' : 'normal',
-    fontWeight: appStudio.Typography.fontWeights[weight],
-    textDecoration: isStriked ? 'line-through' : isUnderlined ? 'underline' : 'none'
-  }, noLineBreak, headingStyles, props), isTruncated && maxLines && typeof children === 'string' ? React__default.createElement(TruncateText, {
-    text: children,
-    maxLines: maxLines
-  }) : React__default.createElement(TextContent, Object.assign({
-    isSub: isSub,
-    isSup: isSup
-  }, props), children));
-};
-
-var TextComponent = function TextComponent(props) {
-  return React__default.createElement(TextView, Object.assign({}, props));
+    hide: hide,
+    setHide: setHide,
+    newOptions: newOptions,
+    setNewOptions: setNewOptions,
+    isHovered: isHovered,
+    setIsHovered: setIsHovered,
+    isFocused: isFocused,
+    setIsFocused: setIsFocused,
+    value: value,
+    setValue: setValue
+  };
 };
-/**
- * The Text component is a simple component that renders a text string or paragraphs as a DOM element in the UI. It is a <p> tag by default.
- */
-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,
@@ -2785,7 +2954,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,
@@ -2794,7 +2963,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,
@@ -2811,14 +2980,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"
@@ -2877,7 +3046,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,
@@ -2905,7 +3074,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({
@@ -2926,10 +3095,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,
@@ -2939,7 +3108,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,
@@ -2952,7 +3121,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,
@@ -2965,10 +3134,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);
@@ -2982,7 +3151,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"
@@ -3122,7 +3291,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');
@@ -3260,7 +3429,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"
@@ -3308,7 +3477,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);
@@ -3433,7 +3602,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"
@@ -3491,7 +3660,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');
@@ -3599,7 +3768,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,
@@ -3610,7 +3779,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,
@@ -3649,6 +3818,9 @@ var useSelectState = function useSelectState(_ref) {
   var _React$useState4 = React__default.useState(defaultValue),
     value = _React$useState4[0],
     setValue = _React$useState4[1];
+  var _React$useState5 = React__default.useState(0),
+    highlightedIndex = _React$useState5[0],
+    setHighlightedIndex = _React$useState5[1];
   return {
     value: value,
     setValue: setValue,
@@ -3657,13 +3829,15 @@ var useSelectState = function useSelectState(_ref) {
     isHovered: isHovered,
     setIsHovered: setIsHovered,
     isFocused: isFocused,
-    setIsFocused: setIsFocused
+    setIsFocused: setIsFocused,
+    highlightedIndex: highlightedIndex,
+    setHighlightedIndex: setHighlightedIndex
   };
 };
 var useItemState = function useItemState() {
-  var _React$useState5 = React__default.useState(false),
-    isHovered = _React$useState5[0],
-    setIsHovered = _React$useState5[1];
+  var _React$useState6 = React__default.useState(false),
+    isHovered = _React$useState6[0],
+    setIsHovered = _React$useState6[1];
   return {
     isHovered: isHovered,
     setIsHovered: setIsHovered
@@ -3678,10 +3852,10 @@ 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"];
+  _excluded4$1 = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isMulti", "isFocused", "isHovered", "isDisabled", "isReadOnly", "options", "shadow", "size", "colorScheme", "shape", "variant", "styles", "onChange", "setHide", "setValue", "setIsHovered", "setIsFocused", "setHighlightedIndex", "highlightedIndex"];
 var Item = function Item(_ref) {
   var isHovered = _ref.isHovered,
     setIsHovered = _ref.setIsHovered,
@@ -3690,7 +3864,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$s);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
   var handleOptionClick = function handleOptionClick(option) {
     return callback(option);
   };
@@ -3700,7 +3874,7 @@ var Item = function Item(_ref) {
   return React__default.createElement(appStudio.Element, Object.assign({
     as: "li",
     margin: 0,
-    paddingVertical: 8,
+    paddingVertical: 10,
     paddingHorizontal: 12,
     listStyleType: "none",
     onMouseEnter: handleHover,
@@ -3710,7 +3884,7 @@ var Item = function Item(_ref) {
       return handleOptionClick(option);
     },
     backgroundColor: isHovered ? 'trueGray.100' : 'transparent'
-  }, props), option);
+  }, props), React__default.createElement(Text, null, " ", option));
 };
 var SelectBox = function SelectBox(_ref2) {
   var _ref2$size = _ref2.size,
@@ -3792,7 +3966,9 @@ var DropDown$1 = function DropDown(_ref4) {
     } : _ref4$styles,
     options = _ref4.options,
     _ref4$callback = _ref4.callback,
-    callback = _ref4$callback === void 0 ? function () {} : _ref4$callback;
+    callback = _ref4$callback === void 0 ? function () {} : _ref4$callback,
+    highlightedIndex = _ref4.highlightedIndex,
+    setHighlightedIndex = _ref4.setHighlightedIndex;
   var itemStates = useItemState();
   var handleCallback = function handleCallback(option) {
     return callback(option);
@@ -3816,7 +3992,7 @@ var DropDown$1 = function DropDown(_ref4) {
     width: "100%",
     display: "flex",
     zIndex: 1000,
-    overflowY: "auto",
+    overflowY: "scroll",
     marginTop: 5,
     marginLeft: 0,
     marginRight: 0,
@@ -3826,13 +4002,24 @@ var DropDown$1 = function DropDown(_ref4) {
     position: "absolute",
     flexDirection: "column",
     backgroundColor: "white",
-    justifyContent: "space-evenly"
-  }, shadow, styles['dropDown']), options.map(function (option) {
+    maxHeight: "200px",
+    style: {
+      scrollbarWidth: 'none' /* For Firefox */,
+      msOverflowStyle: 'none' /* For Internet Explorer and Edge */,
+      '&::-webkit-scrollbar': {
+        display: 'none' /* For Chrome, Safari, and Opera */
+      }
+    }
+  }, shadow, styles['dropDown']), options.map(function (option, index) {
     return React__default.createElement(Item, Object.assign({
       key: option,
       size: size,
       option: option,
-      callback: handleCallback
+      callback: handleCallback,
+      backgroundColor: index === highlightedIndex ? 'color.gray.100' : 'transparent',
+      onMouseEnter: function onMouseEnter() {
+        return setHighlightedIndex(index);
+      }
     }, itemStates, styles['text']));
   }));
 };
@@ -3917,6 +4104,8 @@ 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,
+    setHighlightedIndex = _ref6.setHighlightedIndex,
+    highlightedIndex = _ref6.highlightedIndex,
     props = _objectWithoutPropertiesLoose(_ref6, _excluded4$1);
   var isWithLabel = !!(isFocused && label);
   var handleHover = function handleHover() {
@@ -4004,7 +4193,9 @@ var SelectView = function SelectView(_ref6) {
     size: size,
     styles: styles,
     options: options,
-    callback: handleCallback
+    callback: handleCallback,
+    highlightedIndex: highlightedIndex,
+    setHighlightedIndex: setHighlightedIndex
   }));
 };
 
@@ -4161,7 +4352,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"
@@ -4200,7 +4391,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);
@@ -4286,7 +4477,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,
@@ -4341,7 +4532,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,
@@ -4509,7 +4700,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':
@@ -4539,7 +4730,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,
@@ -4586,11 +4777,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));
@@ -4648,11 +4839,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));
 };
 /**
@@ -4660,7 +4851,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,
@@ -4671,7 +4862,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,
@@ -4694,6 +4885,281 @@ var PasswordComponent$1 = function PasswordComponent(_ref) {
  */
 var FormikPassword = PasswordComponent$1;
 
+// Defines the useComboBoxState hook with parameters for the list of items and optional placeholder texts.
+var useComboBoxState = function useComboBoxState(items, placeholder, searchPlaceholder) {
+  // State hook for filtered items with initial state set to the items passed to the hook.
+  var _useState = React.useState(items),
+    filteredItems = _useState[0],
+    setFilteredItems = _useState[1];
+  // State hook to track the selected item with an initial state based on the placeholder or the first item.
+  var _useState2 = React.useState(placeholder ? {
+      value: placeholder,
+      label: placeholder
+    } : items[0]),
+    selectedItem = _useState2[0],
+    setSelectedItem = _useState2[1];
+  // State hook for highlighted index in the dropdown list, initialized to 0.
+  var _useState3 = React.useState(0),
+    highlightedIndex = _useState3[0],
+    setHighlightedIndex = _useState3[1];
+  // State hook for search query with an initial state based on the searchPlaceholder or empty string.
+  var _useState4 = React.useState(searchPlaceholder != null ? searchPlaceholder : ''),
+    searchQuery = _useState4[0],
+    setSearchQuery = _useState4[1];
+  // State hook to manage dropdown visibility, starts as false (hidden).
+  var _useState5 = React.useState(false),
+    isDropdownVisible = _useState5[0],
+    setIsDropdownVisible = _useState5[1];
+  // Start of object returned by the useComboBoxState hook containing all state and state updater functions.
+  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"];
+// Defines the functional component 'ComboBoxView' with destructured props.
+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);
+  // Sets up an effect to handle clicking outside the dropdown to close it.
+  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);
+    };
+  }, []);
+  // Defines 'handleSearch' to filter items based on the user's query.
+  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);
+  };
+  // Defines 'handleSelect' to handle item selection and close the dropdown.
+  var handleSelect = function handleSelect(item) {
+    setSelectedItem(item);
+    onSelect == null || onSelect(item);
+    setIsDropdownVisible(false);
+  };
+  // Starts the JSX returned by the component representing the combobox.
+  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,
@@ -4779,7 +5245,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"],
@@ -4795,7 +5261,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();
   };
@@ -4951,12 +5417,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 ? {
@@ -4977,18 +5443,15 @@ var FileImage = function FileImage(_ref2) {
   }, props));
 };
 
+// Initializes a custom hook for managing tab states with an array of 'Tab' objects passed as properties.
 var useTabsState = function useTabsState(propTabs) {
-  // Defines a custom hook, named `useTabsState`, that manages the state of tabs within a component.
   var _useState = React.useState(propTabs[0]),
     isActive = _useState[0],
     setIsActive = _useState[1];
-  // Initializes 'isActive' state with the first tab from the 'propTabs' array, indicating the currently active tab.
   var _useState2 = React.useState(propTabs),
     tabsState = _useState2[0],
     setTabsState = _useState2[1];
-  // Initializes 'tabsState' as a stateful array that reflects the tabs passed through 'propTabs' prop, setting the initial state of tabs.
   return {
-    // The hook returns an object containing both the state and the functions to update the state, allowing components to control and access the current state of the tabs.
     isActive: isActive,
     setIsActive: setIsActive,
     tabsState: tabsState,
@@ -4996,21 +5459,31 @@ var useTabsState = function useTabsState(propTabs) {
   };
 };
 
+// Defines a functional component 'TabsView' with props of type 'TabsViewProps'.
 var TabsView = function TabsView(props) {
+  // Destructures 'tabs', 'styles', 'isActive', 'setIsActive', 'tabsState', and 'setTabsState' from the component props.
   var tabs = props.tabs,
     styles = props.styles,
     isActive = props.isActive,
     setIsActive = props.setIsActive,
     tabsState = props.tabsState,
     setTabsState = props.setTabsState;
+  // Declares a function 'moveSelectedTabToTop' that takes an index and modifies the tabs order.
   var moveSelectedTabToTop = function moveSelectedTabToTop(idx) {
+    // Creates a copy of the 'tabs' array from props to be altered.
     var newTabs = [].concat(tabs);
+    // Removes the tab at the provided index, effectively selecting this tab.
     var selectedTab = newTabs.splice(idx, 1);
+    // Places the selected tab at the start of the 'newTabs' array.
     newTabs.unshift(selectedTab[0]);
+    // Updates the state with the reordered tabs.
     setTabsState(newTabs);
+    // Sets the active tab to the first tab in the 'newTabs' array.
     setIsActive(newTabs[0]);
   };
+  // Defines a function 'isContentActive' that checks if the given tab's content is to be displayed.
   var isContentActive = function isContentActive(tab) {
+    // Returns a boolean indicating if the given tab is identical to the first tab in 'tabsState'.
     return tab.value === tabsState[0].value;
   };
   return React__default.createElement(Horizontal, Object.assign({
@@ -5039,17 +5512,14 @@ var TabsView = function TabsView(props) {
   })));
 };
 
-// Define the functional component TabsComponent that utilizes the TabsProps interface for its props.
 var TabsComponent = function TabsComponent(_ref) {
   var tabs = _ref.tabs,
     styles = _ref.styles;
-  // Destructure the 'tabs' and 'styles' properties from the component's props.
   var _useTabsState = useTabsState(tabs),
     isActive = _useTabsState.isActive,
     setIsActive = _useTabsState.setIsActive,
     tabsState = _useTabsState.tabsState,
     setTabsState = _useTabsState.setTabsState;
-  // Invoke the useTabsState custom hook with 'tabs' to manage state related to tab activities like the active tab and tab state management.
   return React__default.createElement(TabsView, {
     tabs: tabs,
     styles: styles,
@@ -5061,54 +5531,66 @@ var TabsComponent = function TabsComponent(_ref) {
 };
 var Tabs = /*#__PURE__*/React__default.memo(TabsComponent);
 
+// Define a constant object 'Themes' exporting various theme styles.
 var Themes = {
+  // Start of the 'default' theme definition with style properties.
   default: {
     container: {
       backgroundColor: 'white',
       border: 'color.blackAlpha.800'
     },
+    // Defines the content style for the 'default' theme.
     content: {
       color: 'color.blackAlpha.800'
     }
   },
+  // The 'info' theme with unique container and content styles.
   info: {
     container: {
       backgroundColor: 'color.blue.200',
       border: 'color.blue.400'
     },
+    // Content styles specific to the 'info' theme.
     content: {
       color: '#60a5fa'
     }
   },
+  // Specifies the 'success' theme with corresponding container and content styles.
   success: {
     container: {
       backgroundColor: 'color.green.200',
       border: 'color.green.400'
     },
+    // Sets the content styling nuances for the 'success' theme.
     content: {
       color: '#22c55e'
     }
   },
+  // Start of the 'error' theme with its characteristic styles.
   error: {
     container: {
       backgroundColor: 'color.red.200',
       border: 'color.red.400'
     },
+    // Content styling for the 'error' theme.
     content: {
       color: '#ef4444'
     }
   },
+  // Introduction of the 'warning' theme styles.
   warning: {
     container: {
       backgroundColor: 'color.orange.200',
       border: 'color.orange.400'
     },
+    // Defines color and aesthetics for the 'warning' theme's content.
     content: {
       color: '#f97316'
     }
   }
 };
 
+// Defines AlertView as a functional component using destructuring to extract props.
 var AlertView = function AlertView(_ref) {
   var _styles$icon$color;
   var icon = _ref.icon,
@@ -5141,6 +5623,7 @@ var AlertView = function AlertView(_ref) {
   }, styles == null ? void 0 : styles.description), description)));
 };
 
+// Definition of the AlertComponent functional component with destructured props.
 var AlertComponent = function AlertComponent(_ref) {
   var icon = _ref.icon,
     title = _ref.title,
@@ -5155,14 +5638,16 @@ var AlertComponent = function AlertComponent(_ref) {
     variant: variant
   });
 };
+// Exporting the AlertComponent as 'Alert' for use in other parts of the application.
 var Alert = AlertComponent;
 
-var _excluded$B = ["ratio", "children"];
+var _excluded$I = ["ratio", "children"];
+// Declaration of a functional component named AspectRatioView.
 var AspectRatioView = function AspectRatioView(_ref) {
   var _ref$ratio = _ref.ratio,
     ratio = _ref$ratio === void 0 ? 16 / 9 : _ref$ratio,
     children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$I);
   return React__default.createElement(Center, Object.assign({
     width: '100%',
     position: "relative",
@@ -5178,27 +5663,32 @@ var AspectRatioView = function AspectRatioView(_ref) {
   }, children));
 };
 
-var _excluded$C = ["ratio", "children"];
+var _excluded$J = ["ratio", "children"];
+// Declaration of the AspectRatioComponent functional component with destructured props.
 var AspectRatioComponent = function AspectRatioComponent(_ref) {
   var ratio = _ref.ratio,
     children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$C);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$J);
+  // Beginning of the return statement in the functional component.
   return React__default.createElement(AspectRatioView, Object.assign({
     ratio: ratio
   }, props), children);
 };
 var AspectRatio = AspectRatioComponent;
 
+// Defines a state hook for managing avatar image error status, initialized as false.
 var useAvatarState = function useAvatarState() {
   var _useState = React.useState(false),
     imageError = _useState[0],
     setImageError = _useState[1];
+  // Provides an object containing the image error state and its setter function.
   return {
     imageError: imageError,
     setImageError: setImageError
   };
 };
 
+// Defines a mapping of avatar sizes to their respective numeric values
 var AvatarSizeMap = {
   xs: 24,
   sm: 32,
@@ -5207,6 +5697,7 @@ var AvatarSizeMap = {
   xl: 80
 };
 
+// Declaration of the AvatarView functional component with destructured props from AvatarViewProps.
 var AvatarView = function AvatarView(_ref) {
   var src = _ref.src,
     _ref$size = _ref.size,
@@ -5216,10 +5707,13 @@ var AvatarView = function AvatarView(_ref) {
     styles = _ref.styles,
     imageError = _ref.imageError,
     setImageError = _ref.setImageError;
+  // Determines the size of the avatar by mapping the size prop to the predefined AvatarSizeMap.
   var avatarSize = AvatarSizeMap[size];
+  // Initiates a style object for the image with an objectFit property and spreads additional image styles if provided.
   var imageStyle = _extends({
     objectFit: 'cover'
   }, (styles == null ? void 0 : styles.image) || {});
+  // Start of the JSX returned by the AvatarView component, which uses the Center component as its root element.
   return React__default.createElement(Center, Object.assign({
     role: "avatar",
     width: avatarSize,
@@ -5229,7 +5723,7 @@ var AvatarView = function AvatarView(_ref) {
     borderWidth: "1px",
     borderStyle: "solid",
     borderColor: imageError ? 'black' : 'transparent',
-    boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.25)" // Add shadow effect
+    boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.25)"
   }, styles == null ? void 0 : styles.container), !imageError ? React__default.createElement(appStudio.Image, {
     alt: "IM",
     src: src,
@@ -5244,14 +5738,17 @@ var AvatarView = function AvatarView(_ref) {
   }, styles == null ? void 0 : styles.fallback), fallback));
 };
 
+// Defines the AvatarComponent functional component with destructured props from AvatarProps type.
 var AvatarComponent = function AvatarComponent(_ref) {
   var src = _ref.src,
     size = _ref.size,
     styles = _ref.styles,
     fallback = _ref.fallback;
+  // Uses custom hook useAvatarState to manage the avatar image loading error state.
   var _useAvatarState = useAvatarState(),
     imageError = _useAvatarState.imageError,
     setImageError = _useAvatarState.setImageError;
+  // Begins the JSX return block for rendering the AvatarView component.
   return React__default.createElement(AvatarView, {
     src: src,
     size: size,
@@ -5260,7 +5757,9 @@ var AvatarComponent = function AvatarComponent(_ref) {
     imageError: imageError,
     setImageError: setImageError
   });
+  // AvatarComponent is a functional component that wraps the AvatarView with added state logic.
 };
+// Exports the AvatarComponent as Avatar for use in other parts of the application.
 var Avatar = AvatarComponent;
 
 var BadgeSizes = {
@@ -5295,7 +5794,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,
@@ -5319,6 +5817,7 @@ var PositionStyles = {
   }
 };
 
+// Importing Text component to display the content text within the badge.
 var BadgeView = function BadgeView(_ref) {
   var content = _ref.content,
     position = _ref.position,
@@ -5340,6 +5839,7 @@ var BadgeView = function BadgeView(_ref) {
       borderColor: 'transparent'
     },
     outline: {
+      // Combining various style objects along with conditional styles based on props to create the badge's appearance.
       backgroundColor: 'transparent',
       borderWidth: 1,
       borderStyle: 'solid',
@@ -5348,10 +5848,13 @@ var BadgeView = function BadgeView(_ref) {
     },
     link: {
       backgroundColor: 'transparent',
+      // Rendering the Badge component using the Center layout component with combinedStyles applied.
       borderWidth: 1,
+      // Inserting a Text component into the badge to display the content, with dynamic size and additional text styles.
       borderStyle: 'solid',
       borderColor: 'transparent',
       color: colorScheme,
+      // Exporting BadgeView to be used in other parts of the application.
       textDecoration: 'underline'
     },
     ghost: {
@@ -5374,6 +5877,7 @@ var BadgeView = function BadgeView(_ref) {
   }, styles == null ? void 0 : styles.text), content));
 };
 
+// Importing type definitions for BadgeProps that will be used to type-check the Badge component's props.
 var Badge = function Badge(_ref) {
   var content = _ref.content,
     shape = _ref.shape,
@@ -5393,13 +5897,17 @@ var Badge = function Badge(_ref) {
   });
 };
 
+// Declares the useToggleState function which takes defaultToggled parameter to initialize the toggle state.
 var useToggleState = function useToggleState(defaultToggled) {
+  // Creates a stateful value isHovered for tracking hover state and a function setIsHovered to update that state, initially false.
   var _useState = React.useState(false),
     isHovered = _useState[0],
     setIsHovered = _useState[1];
+  // Creates a stateful value isToggle to store the current toggle state and a function setIsToggled to modify it, initialized with defaultToggled.
   var _useState2 = React.useState(defaultToggled),
     isToggle = _useState2[0],
     setIsToggled = _useState2[1];
+  // Returns an object containing the current states and the functions to update them for external use.
   return {
     isHovered: isHovered,
     setIsHovered: setIsHovered,
@@ -5414,7 +5922,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,
@@ -5429,7 +5937,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 = {
@@ -5451,14 +5959,12 @@ var ToggleView = function ToggleView(_ref) {
       setIsToggled(function (prev) {
         var newState = !prev;
         if (onToggle) {
-          // Check if onToggle is defined before calling it
           onToggle(newState);
         }
-        return newState; // Expecting the onToggle to possibly do something with the newState
+        return newState;
       });
     }
   };
-
   return React__default.createElement(Center, Object.assign({
     role: "Toggle",
     padding: shape === 'pillShaped' ? '10px 12px' : '8px',
@@ -5477,7 +5983,8 @@ 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"];
+// Destructuring properties from ToggleProps to be used within the ToggleComponent.
 var ToggleComponent = function ToggleComponent(_ref) {
   var children = _ref.children,
     shape = _ref.shape,
@@ -5487,15 +5994,18 @@ 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);
+  // Initializing toggle state and set state functions using the custom hook useToggleState.
   var _useToggleState = useToggleState(isToggled),
     isHovered = _useToggleState.isHovered,
     setIsHovered = _useToggleState.setIsHovered,
     isToggle = _useToggleState.isToggle,
     setIsToggled = _useToggleState.setIsToggled;
+  // Creating an effect that updates the isToggled state whenever the isToggled prop changes.
   React.useEffect(function () {
     setIsToggled(isToggled);
   }, [isToggled]);
+  // Beginning of the JSX block to render the Toggle view component.
   return React__default.createElement(ToggleView, Object.assign({
     shape: shape,
     colorScheme: colorScheme,
@@ -5510,6 +6020,7 @@ var ToggleComponent = function ToggleComponent(_ref) {
 };
 var Toggle = ToggleComponent;
 
+// Define a custom hook for managing ToggleGroup state
 var useToggleGroupState = function useToggleGroupState() {
   var _useState = React.useState([]),
     activeToggles = _useState[0],
@@ -5520,6 +6031,7 @@ var useToggleGroupState = function useToggleGroupState() {
   };
 };
 
+// ToggleGroupView component declaration with destructured properties from props.
 var ToggleGroupView = function ToggleGroupView(_ref) {
   var items = _ref.items,
     onToggleChange = _ref.onToggleChange,
@@ -5531,14 +6043,13 @@ var ToggleGroupView = function ToggleGroupView(_ref) {
     variant = _ref$variant === void 0 ? 'ghost' : _ref$variant,
     _ref$colorScheme = _ref.colorScheme,
     colorScheme = _ref$colorScheme === void 0 ? 'color.trueGray.400' : _ref$colorScheme;
+  // handleToggle is a memoized callback that handles the toggle state changes.
   var handleToggle = React.useCallback(function (id, isActive) {
     setActiveToggles(function (prevActiveToggles) {
       var newActiveToggles;
       if (isActive) {
-        // Add the ID only if it's not already included
         newActiveToggles = prevActiveToggles.includes(id) ? prevActiveToggles : [].concat(prevActiveToggles, [id]);
       } else {
-        // Remove the ID if it's included
         newActiveToggles = prevActiveToggles.filter(function (toggleId) {
           return toggleId !== id;
         });
@@ -5568,12 +6079,14 @@ var ToggleGroupView = function ToggleGroupView(_ref) {
   }));
 };
 
+// Define the functional component with destructured props
 var ToggleGroupComponent = function ToggleGroupComponent(_ref) {
   var items = _ref.items,
     shape = _ref.shape,
     colorScheme = _ref.colorScheme,
     variant = _ref.variant,
     onToggleChange = _ref.onToggleChange;
+  // Hook to manage toggle group state, returns active toggles and a setter for it
   var _useToggleGroupState = useToggleGroupState(),
     activeToggles = _useToggleGroupState.activeToggles,
     setActiveToggles = _useToggleGroupState.setActiveToggles;
@@ -5587,8 +6100,290 @@ var ToggleGroupComponent = function ToggleGroupComponent(_ref) {
     onToggleChange: onToggleChange
   });
 };
+// Expose the ToggleGroupComponent for import into other modules
 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;
@@ -5602,6 +6397,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;
@@ -5615,6 +6411,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;
@@ -5629,7 +6427,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