@app-studio/web 0.8.16 → 0.8.17

package/dist/web.umd.development.js

@@ -4837,7 +4837,270 @@
    */
   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] = React.useState(items);
+    // State hook to track the selected item with an initial state based on the placeholder or the first item.
+    var [selectedItem, setSelectedItem] = React.useState(placeholder ? {
+      value: placeholder,
+      label: placeholder
+    } : items[0]);
+    // State hook for highlighted index in the dropdown list, initialized to 0.
+    var [highlightedIndex, setHighlightedIndex] = React.useState(0);
+    // State hook for search query with an initial state based on the searchPlaceholder or empty string.
+    var [searchQuery, setSearchQuery] = React.useState(searchPlaceholder != null ? searchPlaceholder : '');
+    // State hook to manage dropdown visibility, starts as false (hidden).
+    var [isDropdownVisible, setIsDropdownVisible] = React.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__default.createElement(Center, {
+      width: size + "px",
+      height: size + "px"
+    }, /*#__PURE__*/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), /*#__PURE__*/React__default.createElement("g", {
+      id: "SVGRepo_bgCarrier",
+      strokeWidth: "0"
+    }), /*#__PURE__*/React__default.createElement("g", {
+      id: "SVGRepo_tracerCarrier",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/React__default.createElement("g", {
+      id: "SVGRepo_iconCarrier"
+    }, ' ', /*#__PURE__*/React__default.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__default.createElement(Center, {
+      width: size + "px",
+      height: size + "px"
+    }, /*#__PURE__*/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), /*#__PURE__*/React__default.createElement("g", {
+      id: "SVGRepo_bgCarrier",
+      strokeWidth: "9.279599999999999"
+    }), /*#__PURE__*/React__default.createElement("g", {
+      id: "SVGRepo_tracerCarrier",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/React__default.createElement("g", {
+      id: "SVGRepo_iconCarrier"
+    }, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/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$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.
+    React.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__default.createElement(Horizontal, Object.assign({
+      role: "combobox",
+      flexWrap: "nowrap",
+      gap: 15,
+      alignItems: "center",
+      width: "100%"
+    }, props), label && (/*#__PURE__*/React__default.createElement(Text, {
+      styles: styles == null ? void 0 : styles.label,
+      htmlFor: props.id
+    }, label)), /*#__PURE__*/React__default.createElement(View, {
+      position: "relative"
+    }, /*#__PURE__*/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",
+      justifyContent: "space-between",
+      minWidth: 300,
+      flexWrap: "nowrap"
+    }, styles == null ? void 0 : styles.container), /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({
+      gap: 15,
+      alignItems: "center",
+      position: "relative",
+      width: "100%",
+      onClick: () => setIsDropdownVisible(!isDropdownVisible)
+    }, styles == null ? void 0 : styles.labelContainer), left, /*#__PURE__*/React__default.createElement(Text, Object.assign({
+      weight: "medium",
+      flexGrow: 1
+    }, styles == null ? void 0 : styles.label), selectedItem.label)), right, isDropdownVisible && (/*#__PURE__*/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 && (/*#__PURE__*/React__default.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__default.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__default.createElement(View, {
+      margin: 0,
+      padding: 4
+    }, filteredItems.map((item, index) => (/*#__PURE__*/React__default.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__default.createElement(Text, null, item.label), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, item.icon && item.icon, item.value === selectedItem.value && showTick && !item.icon && /*#__PURE__*/React__default.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__default.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__*/React.createContext({
     active: false,
     focusNextInput: () => {},
@@ -4853,7 +5116,7 @@
         initFocus,
         onChange = () => {}
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$D);
     var formik$1 = formik.useFormikContext();
     React.useEffect(() => {
       onChange(formik$1.values);
@@ -4901,7 +5164,7 @@
     }, /*#__PURE__*/React__default.createElement(appStudio.Form, Object.assign({}, props), children));
   };
 
-  var _excluded$A = ["name", "type"];
+  var _excluded$E = ["name", "type"];
   var getInputTypeProps = type => {
     switch (type) {
       case 'email':
@@ -4940,7 +5203,7 @@
         name,
         type
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$E);
     var focus = useFormFocus();
     var {
       touched,
@@ -4984,13 +5247,13 @@
     } : {});
   };
 
-  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__default.createElement(CheckboxView, Object.assign({}, checkboxStates, formProps));
@@ -5048,11 +5311,11 @@
    */
   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__default.createElement(TextFieldView, Object.assign({}, textFieldStates, formProps));
   };
   /**
@@ -5060,7 +5323,7 @@
    */
   var FormikTextField = TextFieldComponent$1;
 
-  var _excluded$D = ["visibleIcon", "hiddenIcon"],
+  var _excluded$H = ["visibleIcon", "hiddenIcon"],
     _excluded2$5 = ["isVisible", "setIsVisible"];
   var PasswordComponent$1 = _ref => {
     var {
@@ -5071,7 +5334,7 @@
           size: 14
         })
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$D);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$H);
     var formProps = useFormikInput(props);
     var _usePasswordState = usePasswordState(formProps),
       {
@@ -5096,245 +5359,14 @@
    */
   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] = React.useState(items);
-    // State hook to track the selected item with an initial state based on the placeholder or the first item.
-    var [selectedItem, setSelectedItem] = React.useState(placeholder ? {
-      value: placeholder,
-      label: placeholder
-    } : items[0]);
-    // State hook for highlighted index in the dropdown list, initialized to 0.
-    var [highlightedIndex, setHighlightedIndex] = React.useState(0);
-    // State hook for search query with an initial state based on the searchPlaceholder or empty string.
-    var [searchQuery, setSearchQuery] = React.useState(searchPlaceholder != null ? searchPlaceholder : '');
-    // State hook to manage dropdown visibility, starts as false (hidden).
-    var [isDropdownVisible, setIsDropdownVisible] = React.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__default.createElement(Center, {
-      width: size + "px",
-      height: size + "px"
-    }, /*#__PURE__*/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), /*#__PURE__*/React__default.createElement("g", {
-      id: "SVGRepo_bgCarrier",
-      strokeWidth: "0"
-    }), /*#__PURE__*/React__default.createElement("g", {
-      id: "SVGRepo_tracerCarrier",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }), /*#__PURE__*/React__default.createElement("g", {
-      id: "SVGRepo_iconCarrier"
-    }, ' ', /*#__PURE__*/React__default.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__default.createElement(Center, {
-      width: size + "px",
-      height: size + "px"
-    }, /*#__PURE__*/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), /*#__PURE__*/React__default.createElement("g", {
-      id: "SVGRepo_bgCarrier",
-      strokeWidth: "9.279599999999999"
-    }), /*#__PURE__*/React__default.createElement("g", {
-      id: "SVGRepo_tracerCarrier",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }), /*#__PURE__*/React__default.createElement("g", {
-      id: "SVGRepo_iconCarrier"
-    }, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/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$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.
-    React.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__default.createElement(Horizontal, Object.assign({
-      role: "combobox",
-      flexWrap: "nowrap",
-      gap: 15,
-      alignItems: "center",
-      width: "100%"
-    }, props), label && (/*#__PURE__*/React__default.createElement(Text, {
-      styles: styles == null ? void 0 : styles.label,
-      htmlFor: props.id
-    }, label)), /*#__PURE__*/React__default.createElement(View, {
-      position: "relative"
-    }, /*#__PURE__*/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",
-      justifyContent: "space-between",
-      minWidth: 300,
-      flexWrap: "nowrap"
-    }, styles == null ? void 0 : styles.container), /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({
-      gap: 15,
-      alignItems: "center",
-      position: "relative",
-      width: "100%",
-      onClick: () => setIsDropdownVisible(!isDropdownVisible)
-    }, styles == null ? void 0 : styles.labelContainer), left, /*#__PURE__*/React__default.createElement(Text, Object.assign({
-      weight: "medium",
-      flexGrow: 1
-    }, styles == null ? void 0 : styles.label), selectedItem.label)), right, isDropdownVisible && (/*#__PURE__*/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 && (/*#__PURE__*/React__default.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__default.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__default.createElement(View, {
-      margin: 0,
-      padding: 4
-    }, filteredItems.map((item, index) => (/*#__PURE__*/React__default.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__default.createElement(Text, null, item.label), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, item.icon && item.icon, item.value === selectedItem.value && showTick && !item.icon && /*#__PURE__*/React__default.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
@@ -5348,7 +5380,7 @@
   /**
    * 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__*/zustand.create(set => ({
@@ -5703,7 +5735,7 @@
     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"],
@@ -5717,7 +5749,7 @@
         onClose = () => {},
         position = 'center'
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$I);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$J);
     var handleClick = () => {
       if (!isClosePrevented) onClose();
     };
@@ -6106,7 +6138,7 @@
     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,
@@ -6120,7 +6152,7 @@
         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 = {
@@ -6162,7 +6194,7 @@
     }, 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 {
@@ -6175,7 +6207,7 @@
         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,
@@ -6298,6 +6330,7 @@
   exports.Button = Button;
   exports.Center = Center;
   exports.Checkbox = Checkbox;
+  exports.ComboBox = ComboBox;
   exports.CountryPicker = CountryPicker;
   exports.DatePicker = DatePicker;
   exports.FileImage = FileImage;