@app-studio/web 0.8.16 → 0.8.17

package/dist/components/index.d.ts

@@ -13,6 +13,7 @@ export * from './Form/Checkbox/Checkbox';
 export * from './Form/CountryPicker/CountryPicker';
 export * from './Form/DatePicker/DatePicker';
 export * from './Form/Password/Password';
+export * from './Form/ComboBox/ComboBox';
 export * from './Formik';
 export * from './Layout/Center/Center';
 export * from './Layout/Horizontal/Horizontal';

package/dist/web.cjs.development.js

@@ -4850,7 +4850,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] = 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: () => {},
@@ -4866,7 +5129,7 @@ var FormikForm = _ref => {
       initFocus,
       onChange = () => {}
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$D);
   var formik$1 = formik.useFormikContext();
   React.useEffect(() => {
     onChange(formik$1.values);
@@ -4914,7 +5177,7 @@ var FormikForm = _ref => {
   }, /*#__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':
@@ -4953,7 +5216,7 @@ var useFormikInput = _ref => {
       name,
       type
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$E);
   var focus = useFormFocus();
   var {
     touched,
@@ -4997,13 +5260,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__default.createElement(CheckboxView, Object.assign({}, checkboxStates, formProps));
@@ -5061,11 +5324,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__default.createElement(TextFieldView, Object.assign({}, textFieldStates, formProps));
 };
 /**
@@ -5073,7 +5336,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 {
@@ -5084,7 +5347,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),
     {
@@ -5109,245 +5372,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] = 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
@@ -5361,7 +5393,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__*/zustand.create(set => ({
@@ -5716,7 +5748,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"],
@@ -5730,7 +5762,7 @@ var ModalOverlay = _ref => {
       onClose = () => {},
       position = 'center'
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$I);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$J);
   var handleClick = () => {
     if (!isClosePrevented) onClose();
   };
@@ -6119,7 +6151,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,
@@ -6133,7 +6165,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 = {
@@ -6175,7 +6207,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 {
@@ -6188,7 +6220,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,
@@ -6311,6 +6343,7 @@ exports.Bottom = Bottom;
 exports.Button = Button;
 exports.Center = Center;
 exports.Checkbox = Checkbox;
+exports.ComboBox = ComboBox;
 exports.CountryPicker = CountryPicker;
 exports.DatePicker = DatePicker;
 exports.FileImage = FileImage;