@app-studio/web 0.8.16 → 0.8.17

package/dist/web.esm.js

@@ -4843,7 +4843,270 @@ var PasswordComponent = _ref => {
  */
 var Password = PasswordComponent;
 
-var _excluded$z = ["children", "autoFocus", "initFocus", "onChange"];
+// Defines the useComboBoxState hook with parameters for the list of items and optional placeholder texts.
+var useComboBoxState = (items, placeholder, searchPlaceholder) => {
+  // State hook for filtered items with initial state set to the items passed to the hook.
+  var [filteredItems, setFilteredItems] = useState(items);
+  // State hook to track the selected item with an initial state based on the placeholder or the first item.
+  var [selectedItem, setSelectedItem] = useState(placeholder ? {
+    value: placeholder,
+    label: placeholder
+  } : items[0]);
+  // State hook for highlighted index in the dropdown list, initialized to 0.
+  var [highlightedIndex, setHighlightedIndex] = useState(0);
+  // State hook for search query with an initial state based on the searchPlaceholder or empty string.
+  var [searchQuery, setSearchQuery] = useState(searchPlaceholder != null ? searchPlaceholder : '');
+  // State hook to manage dropdown visibility, starts as false (hidden).
+  var [isDropdownVisible, setIsDropdownVisible] = useState(false);
+  // Start of object returned by the useComboBoxState hook containing all state and state updater functions.
+  return {
+    filteredItems,
+    setFilteredItems,
+    selectedItem,
+    setSelectedItem,
+    highlightedIndex,
+    setHighlightedIndex,
+    searchQuery,
+    setSearchQuery,
+    isDropdownVisible,
+    setIsDropdownVisible
+  };
+};
+
+var _excluded$z = ["size", "color"];
+var TickSvg = _ref => {
+  var {
+      size = 16,
+      color = '#c0c0c0'
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
+  return /*#__PURE__*/React.createElement(Center, {
+    width: size + "px",
+    height: size + "px"
+  }, /*#__PURE__*/React.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), /*#__PURE__*/React.createElement("g", {
+    id: "SVGRepo_bgCarrier",
+    strokeWidth: "0"
+  }), /*#__PURE__*/React.createElement("g", {
+    id: "SVGRepo_tracerCarrier",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React.createElement("g", {
+    id: "SVGRepo_iconCarrier"
+  }, ' ', /*#__PURE__*/React.createElement("path", {
+    d: "M5.5 12.5L10.167 17L19.5 8",
+    stroke: "#444444",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), ' ')));
+};
+
+var _excluded$A = ["size", "color"];
+var SearchLoopSvg = _ref => {
+  var {
+      size = 14,
+      color = '#c0c0c0'
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
+  return /*#__PURE__*/React.createElement(Center, {
+    width: size + "px",
+    height: size + "px"
+  }, /*#__PURE__*/React.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), /*#__PURE__*/React.createElement("g", {
+    id: "SVGRepo_bgCarrier",
+    strokeWidth: "9.279599999999999"
+  }), /*#__PURE__*/React.createElement("g", {
+    id: "SVGRepo_tracerCarrier",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React.createElement("g", {
+    id: "SVGRepo_iconCarrier"
+  }, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.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$B = ["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 = _ref => {
+  var {
+      placeholder,
+      items,
+      showTick = true,
+      onSelect,
+      searchEnabled = true,
+      left,
+      right,
+      label,
+      filteredItems,
+      setSelectedItem,
+      selectedItem,
+      highlightedIndex,
+      setHighlightedIndex,
+      searchQuery,
+      setSearchQuery,
+      setFilteredItems,
+      styles,
+      isDropdownVisible,
+      setIsDropdownVisible
+      // Collects all further props not destructured explicitly.
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
+  // Sets up an effect to handle clicking outside the dropdown to close it.
+  useEffect(() => {
+    var handleClickOutside = event => {
+      var path = event.composedPath();
+      var isOutside = !path.some(element => (element == null ? void 0 : element.id) === 'combobox-dropdown');
+      if (isOutside) {
+        setIsDropdownVisible(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+  // Defines 'handleSearch' to filter items based on the user's query.
+  var handleSearch = query => {
+    setSearchQuery(query);
+    if (query === '') {
+      setFilteredItems(items);
+    } else {
+      var filtered = items.filter(item => item.label.toLowerCase().includes(query.toLowerCase()));
+      setFilteredItems(filtered);
+    }
+    setHighlightedIndex(0);
+  };
+  // Defines 'handleSelect' to handle item selection and close the dropdown.
+  var handleSelect = item => {
+    setSelectedItem(item);
+    onSelect == null || onSelect(item);
+    setIsDropdownVisible(false);
+  };
+  // Starts the JSX returned by the component representing the combobox.
+  return /*#__PURE__*/React.createElement(Horizontal, Object.assign({
+    role: "combobox",
+    flexWrap: "nowrap",
+    gap: 15,
+    alignItems: "center",
+    width: "100%"
+  }, props), label && (/*#__PURE__*/React.createElement(Text, {
+    styles: styles == null ? void 0 : styles.label,
+    htmlFor: props.id
+  }, label)), /*#__PURE__*/React.createElement(View, {
+    position: "relative"
+  }, /*#__PURE__*/React.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",
+    justifyContent: "space-between",
+    minWidth: 300,
+    flexWrap: "nowrap"
+  }, styles == null ? void 0 : styles.container), /*#__PURE__*/React.createElement(Horizontal, Object.assign({
+    gap: 15,
+    alignItems: "center",
+    position: "relative",
+    width: "100%",
+    onClick: () => setIsDropdownVisible(!isDropdownVisible)
+  }, styles == null ? void 0 : styles.labelContainer), left, /*#__PURE__*/React.createElement(Text, Object.assign({
+    weight: "medium",
+    flexGrow: 1
+  }, styles == null ? void 0 : styles.label), selectedItem.label)), right, isDropdownVisible && (/*#__PURE__*/React.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 && (/*#__PURE__*/React.createElement(TextFieldView, {
+    id: props.id,
+    name: props.name,
+    width: "100%",
+    type: "search",
+    value: searchQuery,
+    onChange: value => handleSearch(value),
+    hint: placeholder,
+    isClearable: false,
+    leftChild: /*#__PURE__*/React.createElement(SearchLoopSvg, {
+      size: 12
+    }),
+    styles: {
+      box: Object.assign({
+        width: '100%',
+        padding: '6px 12px',
+        borderBottom: filteredItems.length > 0 ? '1px solid #ccc' : '1px solid transparent'
+      }, styles == null ? void 0 : styles.text)
+    }
+  })), filteredItems.length > 0 && (/*#__PURE__*/React.createElement(View, {
+    margin: 0,
+    padding: 4
+  }, filteredItems.map((item, index) => (/*#__PURE__*/React.createElement(Horizontal, Object.assign({
+    justifyContent: "space-between",
+    key: item.value,
+    padding: "12px",
+    cursor: "pointer",
+    borderRadius: 4,
+    backgroundColor: index === highlightedIndex ? 'color.gray.100' : 'transparent',
+    onMouseEnter: () => setHighlightedIndex(index),
+    onClick: () => handleSelect(item)
+  }, styles == null ? void 0 : styles.item), /*#__PURE__*/React.createElement(Text, null, item.label), /*#__PURE__*/React.createElement(React.Fragment, null, item.icon && item.icon, item.value === selectedItem.value && showTick && !item.icon && /*#__PURE__*/React.createElement(TickSvg, null))))))))))));
+};
+
+var _excluded$C = ["id", "name", "items", "placeholder", "searchPlaceholder"];
+// Defines the ComboBoxComponent functional component with ComboBoxProps
+var ComboBoxComponent = _ref => {
+  var {
+      // Destructures 'id' from component props
+      id,
+      // Destructures 'name' from component props
+      name,
+      // Destructures 'items' from component props, used to populate combobox
+      items,
+      // Destructures 'placeholder' from component props, displayed when no item selected
+      placeholder,
+      // Destructures 'searchPlaceholder' from component props, used as the search field placeholder
+      searchPlaceholder
+      // Destructures the rest of the props not explicitly defined
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$C);
+  // Initializes ComboBox state using custom hook with items and placeholders
+  var state = useComboBoxState(items, placeholder, searchPlaceholder);
+  return (
+    /*#__PURE__*/
+    // Render ComboBoxView with passed and state props
+    React.createElement(ComboBoxView, Object.assign({
+      id: id,
+      name: name,
+      items: items
+    }, state, props))
+  );
+};
+// Exports the ComboBoxComponent as ComboBox
+var ComboBox = ComboBoxComponent;
+
+var _excluded$D = ["children", "autoFocus", "initFocus", "onChange"];
 var FocusContext = /*#__PURE__*/createContext({
   active: false,
   focusNextInput: () => {},
@@ -4859,7 +5122,7 @@ var FormikForm = _ref => {
       initFocus,
       onChange = () => {}
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$D);
   var formik = useFormikContext();
   useEffect(() => {
     onChange(formik.values);
@@ -4907,7 +5170,7 @@ var FormikForm = _ref => {
   }, /*#__PURE__*/React.createElement(Form, Object.assign({}, props), children));
 };
 
-var _excluded$A = ["name", "type"];
+var _excluded$E = ["name", "type"];
 var getInputTypeProps = type => {
   switch (type) {
     case 'email':
@@ -4946,7 +5209,7 @@ var useFormikInput = _ref => {
       name,
       type
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$E);
   var focus = useFormFocus();
   var {
     touched,
@@ -4990,13 +5253,13 @@ var useFormikInput = _ref => {
   } : {});
 };
 
-var _excluded$B = ["value"];
+var _excluded$F = ["value"];
 var CheckboxComponent$1 = props => {
   var _useFormikInput = useFormikInput(props),
     {
       value
     } = _useFormikInput,
-    formProps = _objectWithoutPropertiesLoose(_useFormikInput, _excluded$B);
+    formProps = _objectWithoutPropertiesLoose(_useFormikInput, _excluded$F);
   formProps.isChecked = value;
   var checkboxStates = useCheckboxState(props);
   return /*#__PURE__*/React.createElement(CheckboxView, Object.assign({}, checkboxStates, formProps));
@@ -5054,11 +5317,11 @@ var TextAreaComponent$1 = props => {
  */
 var FormikTextArea = TextAreaComponent$1;
 
-var _excluded$C = ["value"];
+var _excluded$G = ["value"];
 var TextFieldComponent$1 = props => {
   var formProps = useFormikInput(props);
   var _useTextFieldState = useTextFieldState(props),
-    textFieldStates = _objectWithoutPropertiesLoose(_useTextFieldState, _excluded$C);
+    textFieldStates = _objectWithoutPropertiesLoose(_useTextFieldState, _excluded$G);
   return /*#__PURE__*/React.createElement(TextFieldView, Object.assign({}, textFieldStates, formProps));
 };
 /**
@@ -5066,7 +5329,7 @@ var TextFieldComponent$1 = props => {
  */
 var FormikTextField = TextFieldComponent$1;
 
-var _excluded$D = ["visibleIcon", "hiddenIcon"],
+var _excluded$H = ["visibleIcon", "hiddenIcon"],
   _excluded2$5 = ["isVisible", "setIsVisible"];
 var PasswordComponent$1 = _ref => {
   var {
@@ -5077,7 +5340,7 @@ var PasswordComponent$1 = _ref => {
         size: 14
       })
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$D);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$H);
   var formProps = useFormikInput(props);
   var _usePasswordState = usePasswordState(formProps),
     {
@@ -5102,245 +5365,14 @@ var PasswordComponent$1 = _ref => {
  */
 var FormikPassword = PasswordComponent$1;
 
-// Defines the useComboBoxState hook with parameters for the list of items and optional placeholder texts.
-var useComboBoxState = (items, placeholder, searchPlaceholder) => {
-  // State hook for filtered items with initial state set to the items passed to the hook.
-  var [filteredItems, setFilteredItems] = useState(items);
-  // State hook to track the selected item with an initial state based on the placeholder or the first item.
-  var [selectedItem, setSelectedItem] = useState(placeholder ? {
-    value: placeholder,
-    label: placeholder
-  } : items[0]);
-  // State hook for highlighted index in the dropdown list, initialized to 0.
-  var [highlightedIndex, setHighlightedIndex] = useState(0);
-  // State hook for search query with an initial state based on the searchPlaceholder or empty string.
-  var [searchQuery, setSearchQuery] = useState(searchPlaceholder != null ? searchPlaceholder : '');
-  // State hook to manage dropdown visibility, starts as false (hidden).
-  var [isDropdownVisible, setIsDropdownVisible] = useState(false);
-  // Start of object returned by the useComboBoxState hook containing all state and state updater functions.
-  return {
-    filteredItems,
-    setFilteredItems,
-    selectedItem,
-    setSelectedItem,
-    highlightedIndex,
-    setHighlightedIndex,
-    searchQuery,
-    setSearchQuery,
-    isDropdownVisible,
-    setIsDropdownVisible
-  };
-};
-
-var _excluded$E = ["size", "color"];
-var TickSvg = _ref => {
-  var {
-      size = 16,
-      color = '#c0c0c0'
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$E);
-  return /*#__PURE__*/React.createElement(Center, {
-    width: size + "px",
-    height: size + "px"
-  }, /*#__PURE__*/React.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), /*#__PURE__*/React.createElement("g", {
-    id: "SVGRepo_bgCarrier",
-    strokeWidth: "0"
-  }), /*#__PURE__*/React.createElement("g", {
-    id: "SVGRepo_tracerCarrier",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }), /*#__PURE__*/React.createElement("g", {
-    id: "SVGRepo_iconCarrier"
-  }, ' ', /*#__PURE__*/React.createElement("path", {
-    d: "M5.5 12.5L10.167 17L19.5 8",
-    stroke: "#444444",
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }), ' ')));
-};
-
-var _excluded$F = ["size", "color"];
-var SearchLoopSvg = _ref => {
-  var {
-      size = 14,
-      color = '#c0c0c0'
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$F);
-  return /*#__PURE__*/React.createElement(Center, {
-    width: size + "px",
-    height: size + "px"
-  }, /*#__PURE__*/React.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), /*#__PURE__*/React.createElement("g", {
-    id: "SVGRepo_bgCarrier",
-    strokeWidth: "9.279599999999999"
-  }), /*#__PURE__*/React.createElement("g", {
-    id: "SVGRepo_tracerCarrier",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }), /*#__PURE__*/React.createElement("g", {
-    id: "SVGRepo_iconCarrier"
-  }, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.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$G = ["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 = _ref => {
-  var {
-      placeholder,
-      items,
-      showTick = true,
-      onSelect,
-      searchEnabled = true,
-      left,
-      right,
-      label,
-      filteredItems,
-      setSelectedItem,
-      selectedItem,
-      highlightedIndex,
-      setHighlightedIndex,
-      searchQuery,
-      setSearchQuery,
-      setFilteredItems,
-      styles,
-      isDropdownVisible,
-      setIsDropdownVisible
-      // Collects all further props not destructured explicitly.
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$G);
-  // Sets up an effect to handle clicking outside the dropdown to close it.
-  useEffect(() => {
-    var handleClickOutside = event => {
-      var path = event.composedPath();
-      var isOutside = !path.some(element => (element == null ? void 0 : element.id) === 'combobox-dropdown');
-      if (isOutside) {
-        setIsDropdownVisible(false);
-      }
-    };
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, []);
-  // Defines 'handleSearch' to filter items based on the user's query.
-  var handleSearch = query => {
-    setSearchQuery(query);
-    if (query === '') {
-      setFilteredItems(items);
-    } else {
-      var filtered = items.filter(item => item.label.toLowerCase().includes(query.toLowerCase()));
-      setFilteredItems(filtered);
-    }
-    setHighlightedIndex(0);
-  };
-  // Defines 'handleSelect' to handle item selection and close the dropdown.
-  var handleSelect = item => {
-    setSelectedItem(item);
-    onSelect == null || onSelect(item);
-    setIsDropdownVisible(false);
-  };
-  // Starts the JSX returned by the component representing the combobox.
-  return /*#__PURE__*/React.createElement(Horizontal, Object.assign({
-    role: "combobox",
-    flexWrap: "nowrap",
-    gap: 15,
-    alignItems: "center",
-    width: "100%"
-  }, props), label && (/*#__PURE__*/React.createElement(Text, {
-    styles: styles == null ? void 0 : styles.label,
-    htmlFor: props.id
-  }, label)), /*#__PURE__*/React.createElement(View, {
-    position: "relative"
-  }, /*#__PURE__*/React.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",
-    justifyContent: "space-between",
-    minWidth: 300,
-    flexWrap: "nowrap"
-  }, styles == null ? void 0 : styles.container), /*#__PURE__*/React.createElement(Horizontal, Object.assign({
-    gap: 15,
-    alignItems: "center",
-    position: "relative",
-    width: "100%",
-    onClick: () => setIsDropdownVisible(!isDropdownVisible)
-  }, styles == null ? void 0 : styles.labelContainer), left, /*#__PURE__*/React.createElement(Text, Object.assign({
-    weight: "medium",
-    flexGrow: 1
-  }, styles == null ? void 0 : styles.label), selectedItem.label)), right, isDropdownVisible && (/*#__PURE__*/React.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 && (/*#__PURE__*/React.createElement(TextFieldView, {
-    id: props.id,
-    name: props.name,
-    width: "100%",
-    type: "search",
-    value: searchQuery,
-    onChange: value => handleSearch(value),
-    hint: placeholder,
-    isClearable: false,
-    leftChild: /*#__PURE__*/React.createElement(SearchLoopSvg, {
-      size: 12
-    }),
-    styles: {
-      box: Object.assign({
-        width: '100%',
-        padding: '6px 12px',
-        borderBottom: filteredItems.length > 0 ? '1px solid #ccc' : '1px solid transparent'
-      }, styles == null ? void 0 : styles.text)
-    }
-  })), filteredItems.length > 0 && (/*#__PURE__*/React.createElement(View, {
-    margin: 0,
-    padding: 4
-  }, filteredItems.map((item, index) => (/*#__PURE__*/React.createElement(Horizontal, Object.assign({
-    justifyContent: "space-between",
-    key: item.value,
-    padding: "12px",
-    cursor: "pointer",
-    borderRadius: 4,
-    backgroundColor: index === highlightedIndex ? 'color.gray.100' : 'transparent',
-    onMouseEnter: () => setHighlightedIndex(index),
-    onClick: () => handleSelect(item)
-  }, styles == null ? void 0 : styles.item), /*#__PURE__*/React.createElement(Text, null, item.label), /*#__PURE__*/React.createElement(React.Fragment, null, item.icon && item.icon, item.value === selectedItem.value && showTick && !item.icon && /*#__PURE__*/React.createElement(TickSvg, null))))))))))));
-};
-
-var _excluded$H = ["items", "placeholder", "searchPlaceholder"];
-var ComboBoxComponent = _ref => {
+var _excluded$I = ["items", "placeholder", "searchPlaceholder"];
+var ComboBoxComponent$1 = _ref => {
   var {
       items,
       placeholder,
       searchPlaceholder
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$H);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$I);
   var formProps = useFormikInput(props);
   var ComboBoxStates = useComboBoxState(items, placeholder, searchPlaceholder);
   // Ensure the onChange function from formProps is being called when an item is selected
@@ -5354,7 +5386,7 @@ var ComboBoxComponent = _ref => {
 /**
  * ComboBox allows users to select one or more options from a list of choices.
  */
-var FormikComboBox = ComboBoxComponent;
+var FormikComboBox = ComboBoxComponent$1;
 
 // Create your store with the initial state and actions.
 var useMessageStore = /*#__PURE__*/create(set => ({
@@ -5709,7 +5741,7 @@ var HeaderIconSizes = {
   xl: 28
 };
 
-var _excluded$I = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position"],
+var _excluded$J = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position"],
   _excluded2$6 = ["children", "shadow", "isFullScreen", "shape"],
   _excluded3$3 = ["children", "buttonColor", "iconSize", "buttonPosition"],
   _excluded4$2 = ["children"],
@@ -5723,7 +5755,7 @@ var ModalOverlay = _ref => {
       onClose = () => {},
       position = 'center'
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$I);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$J);
   var handleClick = () => {
     if (!isClosePrevented) onClose();
   };
@@ -6112,7 +6144,7 @@ var ToggleShapes = {
   pillShaped: 24
 };
 
-var _excluded$J = ["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 = _ref => {
   var {
       children,
@@ -6126,7 +6158,7 @@ var ToggleView = _ref => {
       setIsToggled,
       onToggle
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$J);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$K);
   var toggleColor = !isDisabled ? colorScheme : 'theme.disabled';
   var isActive = !!(isToggle || isHovered);
   var ToggleVariants = {
@@ -6168,7 +6200,7 @@ var ToggleView = _ref => {
   }, ToggleVariants[variant], props), children);
 };
 
-var _excluded$K = ["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 = _ref => {
   var {
@@ -6181,7 +6213,7 @@ var ToggleComponent = _ref => {
       isToggled = false,
       onToggle
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$K);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$L);
   // Initializing toggle state and set state functions using the custom hook useToggleState.
   var {
     isHovered,
@@ -6296,5 +6328,5 @@ var ToggleGroupComponent = _ref => {
 // Expose the ToggleGroupComponent for import into other modules
 var ToggleGroup = ToggleGroupComponent;
 
-export { Alert, AspectRatio, Avatar, Badge, Bottom, Button, Center, Checkbox, CountryPicker, DatePicker, FileImage, FileSVG, FormikCheckbox, FormikComboBox, FormikCountryPicker, FormikDatePicker, FormikForm, FormikPassword, FormikSelect, FormikSwitch, FormikTextArea, FormikTextField, Horizontal, Inline, Left, Link, Loader, MessageLayout, MessageView, Modal, Password, Right, Select, Switch, Table, Tabs, Text, TextArea, TextField, Toggle, ToggleGroup, Top, Vertical, View, hideMessage, hideModal, showMessage, showModal, useMessageStore, useModalStore };
+export { Alert, AspectRatio, Avatar, Badge, Bottom, Button, Center, Checkbox, ComboBox, CountryPicker, DatePicker, FileImage, FileSVG, FormikCheckbox, FormikComboBox, FormikCountryPicker, FormikDatePicker, FormikForm, FormikPassword, FormikSelect, FormikSwitch, FormikTextArea, FormikTextField, Horizontal, Inline, Left, Link, Loader, MessageLayout, MessageView, Modal, Password, Right, Select, Switch, Table, Tabs, Text, TextArea, TextField, Toggle, ToggleGroup, Top, Vertical, View, hideMessage, hideModal, showMessage, showModal, useMessageStore, useModalStore };
 //# sourceMappingURL=web.esm.js.map