@beppla/tapas-ui 1.0.67 → 1.0.68

package/module/MultiSelector/MultiSelector.js

@@ -1,75 +1,154 @@
-import React, { useEffect, useRef, useState } from "react";
-import { View, Modal, TouchableOpacity, Text, Dimensions, Pressable, Animated, ScrollView } from "react-native";
-import { makeStyles, useTheme, withTheme } from "@rneui/themed";
-import Icon from "../Icons/TapasIcon";
-const TapasMultiSelector = ({
-  icon = "arrow_drop_down",
-  width,
-  height,
-  iconStyle,
-  title,
-  label,
-  required,
-  dropdownSubWidth,
-  dropdownSubHeight,
-  dropdownItems = [],
-  selected,
-  showSelectedValue = false,
-  backgroundColor,
-  onSelect,
-  placeholder,
-  disabled,
-  type,
-  state = "normal",
-  stateMsg,
-  showStateMsg = false,
-  radius = 12,
-  offsetWidth = 0,
-  showSearchBar = false,
-  noLabelAnim = false,
-  visible,
-  setVisible,
-  searchPlaceholder = "Search",
-  clearButtonText = "Clear",
-  confirmButtonText = "Done",
-  testID
-}) => {
-  const theme = useTheme();
-  const styles = useStyles(theme);
-  const [modalVisible, setModalVisible] = useState(false);
-  const [dropdownWidthCalc, setDropdownWidthCalc] = useState(dropdownSubWidth ?? 151);
-  const [dropdownPosition, setDropdownPosition] = useState({
-    top: 0,
-    left: 0
+"use strict";
+
+var __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __setModuleDefault = this && this.__setModuleDefault || (Object.create ? function (o, v) {
+  Object.defineProperty(o, "default", {
+    enumerable: true,
+    value: v
   });
-  const [selectedItemKey, setSelectedItemKey] = useState(selected ?? []);
-  const [top, setTop] = useState(18);
-  const buttonRef = useRef(null);
-  const topAnim = useRef(new Animated.Value(18)).current;
-  const offsetSpace = 8;
-  const offsetHeight = 10;
-  const openDropdown = () => {
+} : function (o, v) {
+  o["default"] = v;
+});
+var __importStar = this && this.__importStar || function () {
+  var ownKeys = function (o) {
+    ownKeys = Object.getOwnPropertyNames || function (o) {
+      var ar = [];
+      for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+      return ar;
+    };
+    return ownKeys(o);
+  };
+  return function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+    __setModuleDefault(result, mod);
+    return result;
+  };
+}();
+var __spreadArray = this && this.__spreadArray || function (to, from, pack) {
+  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+    if (ar || !(i in from)) {
+      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+      ar[i] = from[i];
+    }
+  }
+  return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = this && this.__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var react_1 = __importStar(require("react"));
+var react_native_1 = require("react-native");
+var themed_1 = require("@rneui/themed");
+var TapasIcon_1 = __importDefault(require("../Icons/TapasIcon"));
+var TapasMultiSelector = function (_a) {
+  var _b = _a.icon,
+    icon = _b === void 0 ? "arrow_drop_down" : _b,
+    width = _a.width,
+    height = _a.height,
+    iconStyle = _a.iconStyle,
+    title = _a.title,
+    label = _a.label,
+    required = _a.required,
+    dropdownSubWidth = _a.dropdownSubWidth,
+    dropdownSubHeight = _a.dropdownSubHeight,
+    _c = _a.dropdownItems,
+    dropdownItems = _c === void 0 ? [] : _c,
+    selected = _a.selected,
+    _d = _a.showSelectedValue,
+    showSelectedValue = _d === void 0 ? false : _d,
+    backgroundColor = _a.backgroundColor,
+    onSelect = _a.onSelect,
+    placeholder = _a.placeholder,
+    disabled = _a.disabled,
+    type = _a.type,
+    _e = _a.state,
+    state = _e === void 0 ? "normal" : _e,
+    stateMsg = _a.stateMsg,
+    _f = _a.showStateMsg,
+    showStateMsg = _f === void 0 ? false : _f,
+    _g = _a.radius,
+    radius = _g === void 0 ? 12 : _g,
+    _h = _a.offsetWidth,
+    offsetWidth = _h === void 0 ? 0 : _h,
+    _j = _a.showSearchBar,
+    showSearchBar = _j === void 0 ? false : _j,
+    _k = _a.noLabelAnim,
+    noLabelAnim = _k === void 0 ? false : _k,
+    visible = _a.visible,
+    setVisible = _a.setVisible,
+    _l = _a.searchPlaceholder,
+    searchPlaceholder = _l === void 0 ? "Search" : _l,
+    _m = _a.clearButtonText,
+    clearButtonText = _m === void 0 ? "Clear" : _m,
+    _o = _a.confirmButtonText,
+    confirmButtonText = _o === void 0 ? "Done" : _o,
+    testID = _a.testID;
+  var theme = (0, themed_1.useTheme)();
+  var styles = useStyles(theme);
+  var _p = (0, react_1.useState)(false),
+    modalVisible = _p[0],
+    setModalVisible = _p[1];
+  var _q = (0, react_1.useState)(dropdownSubWidth !== null && dropdownSubWidth !== void 0 ? dropdownSubWidth : 151),
+    dropdownWidthCalc = _q[0],
+    setDropdownWidthCalc = _q[1];
+  var _r = (0, react_1.useState)({
+      top: 0,
+      left: 0
+    }),
+    dropdownPosition = _r[0],
+    setDropdownPosition = _r[1];
+  var _s = (0, react_1.useState)(selected !== null && selected !== void 0 ? selected : []),
+    selectedItemKey = _s[0],
+    setSelectedItemKey = _s[1];
+  var _t = (0, react_1.useState)(18),
+    top = _t[0],
+    setTop = _t[1];
+  var buttonRef = (0, react_1.useRef)(null);
+  var topAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(18)).current;
+  var offsetSpace = 8;
+  var offsetHeight = 10;
+  var openDropdown = function () {
     if (disabled) return;
     if (buttonRef.current) {
-      buttonRef.current.measure((_fx, _fy, width, height, px, py) => {
-        const window = Dimensions.get("window");
-        const dropdownHeight = dropdownSubHeight ?? Math.min(40 * dropdownItems.length + 24, 448);
-        const dropdownWidth = Math.max(width, dropdownSubWidth ?? 151);
+      buttonRef.current.measure(function (_fx, _fy, width, height, px, py) {
+        var window = react_native_1.Dimensions.get("window");
+        var dropdownHeight = dropdownSubHeight !== null && dropdownSubHeight !== void 0 ? dropdownSubHeight : Math.min(40 * dropdownItems.length + 24, 448);
+        var dropdownWidth = Math.max(width, dropdownSubWidth !== null && dropdownSubWidth !== void 0 ? dropdownSubWidth : 151);
         setDropdownWidthCalc(dropdownWidth);
-
         // 计算下方空间是否足够
-        const enoughSpaceBelow = py + height + dropdownHeight + offsetHeight <= window.height;
-        const enoughSpaceAbove = py - dropdownHeight >= 0;
-        const enoughSpaceRight = px + dropdownWidth <= window.width;
-
+        var enoughSpaceBelow = py + height + dropdownHeight + offsetHeight <= window.height;
+        var enoughSpaceAbove = py - dropdownHeight >= 0;
+        var enoughSpaceRight = px + dropdownWidth <= window.width;
         // 处理 px 由于 tab screen的问题 导致 px 可能是多个屏宽倍数的问题
-        const adjustedPx = px % window.width + (px > window.width ? 56 : 0) + offsetWidth;
+        var adjustedPx = px % window.width + (px > window.width ? 56 : 0) + offsetWidth;
         // 根据空间决定显示方向和位置
-        const top = enoughSpaceBelow ? py + height + offsetSpace : enoughSpaceAbove ? py - dropdownHeight - offsetHeight - 16 : py + height + offsetSpace;
-        const left = enoughSpaceRight ? adjustedPx : adjustedPx + width - dropdownWidth;
+        var top = enoughSpaceBelow ? py + height + offsetSpace : enoughSpaceAbove ? py - dropdownHeight - offsetHeight - 16 : py + height + offsetSpace;
+        var left = enoughSpaceRight ? adjustedPx : adjustedPx + width - dropdownWidth;
         setDropdownPosition({
-          top,
-          left
+          top: top,
+          left: left
         });
         if (setVisible) {
           setVisible(true);
@@ -79,65 +158,77 @@ const TapasMultiSelector = ({
       });
     }
   };
-  useEffect(() => {
-    setSelectedItemKey(selected ?? []);
+  (0, react_1.useEffect)(function () {
+    setSelectedItemKey(selected !== null && selected !== void 0 ? selected : []);
   }, [selected]);
-  useEffect(() => {
+  (0, react_1.useEffect)(function () {
     if (typeof visible === "boolean" && visible !== undefined) {
       setModalVisible(visible);
     }
   }, [visible]);
-  useEffect(() => {
-    const start = selectedItemKey.length === 0 ? 0 : 18;
-    const target = selectedItemKey.length === 0 ? 18 : 0;
+  (0, react_1.useEffect)(function () {
+    var start = selectedItemKey.length === 0 ? 0 : 18;
+    var target = selectedItemKey.length === 0 ? 18 : 0;
     if (top === target) return;
     setTop(target);
     topAnim.setValue(start);
-    Animated.timing(topAnim, {
+    react_native_1.Animated.timing(topAnim, {
       toValue: target,
       duration: 300,
       useNativeDriver: true
     }).start();
   }, [selectedItemKey]);
-  const closeModal = () => {
+  var closeModal = function () {
     if (setVisible) {
       setVisible(false);
     } else {
       setModalVisible(false);
     }
   };
-  const handleItemSelect = key => {
-    const newSelected = selectedItemKey.includes(key) ? selectedItemKey.filter(k => k !== key) : [...selectedItemKey, key];
+  var handleItemSelect = function (key) {
+    var newSelected = selectedItemKey.includes(key) ? selectedItemKey.filter(function (k) {
+      return k !== key;
+    }) : __spreadArray(__spreadArray([], selectedItemKey, true), [key], false);
     setSelectedItemKey(newSelected);
   };
-  const handleClear = () => {
+  var handleClear = function () {
     setSelectedItemKey([]);
-    onSelect?.([]);
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect([]);
     closeModal();
   };
-  const handleConfirm = () => {
-    onSelect?.(selectedItemKey);
+  var handleConfirm = function () {
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(selectedItemKey);
     closeModal();
   };
-  const renderCheckbox = item => /*#__PURE__*/React.createElement(View, {
-    style: styles.checkboxContainer
-  }, /*#__PURE__*/React.createElement(View, {
-    style: [styles.checkbox, selectedItemKey.includes(item.key) && styles.checkboxChecked]
-  }, selectedItemKey.includes(item.key) && /*#__PURE__*/React.createElement(Text, {
-    style: styles.checkmark
-  }, "\u2713")), /*#__PURE__*/React.createElement(Text, {
-    style: styles.optionText,
-    numberOfLines: 1,
-    ellipsizeMode: "tail"
-  }, item.value));
-  const renderButton = (text, onPress, disabled = false, primary = false) => /*#__PURE__*/React.createElement(TouchableOpacity, {
-    style: [styles.button, primary && styles.primaryButton, disabled && styles.disabledButton],
-    onPress: onPress,
-    disabled: disabled
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: [styles.buttonText, primary && styles.primaryButtonText, disabled && styles.disabledButtonText]
-  }, text));
-  return /*#__PURE__*/React.createElement(View, {
+  var renderCheckbox = function (item) {
+    return react_1.default.createElement(react_native_1.View, {
+      style: styles.checkboxContainer
+    }, react_1.default.createElement(react_native_1.View, {
+      style: [styles.checkbox, selectedItemKey.includes(item.key) && styles.checkboxChecked]
+    }, selectedItemKey.includes(item.key) && react_1.default.createElement(react_native_1.Text, {
+      style: styles.checkmark
+    }, "\u2713")), react_1.default.createElement(react_native_1.Text, {
+      style: styles.optionText,
+      numberOfLines: 1,
+      ellipsizeMode: "tail"
+    }, item.value));
+  };
+  var renderButton = function (text, onPress, disabled, primary) {
+    if (disabled === void 0) {
+      disabled = false;
+    }
+    if (primary === void 0) {
+      primary = false;
+    }
+    return react_1.default.createElement(react_native_1.TouchableOpacity, {
+      style: [styles.button, primary && styles.primaryButton, disabled && styles.disabledButton],
+      onPress: onPress,
+      disabled: disabled
+    }, react_1.default.createElement(react_native_1.Text, {
+      style: [styles.buttonText, primary && styles.primaryButtonText, disabled && styles.disabledButtonText]
+    }, text));
+  };
+  return react_1.default.createElement(react_native_1.View, {
     style: [styles.con, width ? {
       maxWidth: width,
       minWidth: width
@@ -146,16 +237,16 @@ const TapasMultiSelector = ({
       maxHeight: height + (label ? 7 : 0) + (showStateMsg ? 15 : 0)
     } : null],
     testID: testID
-  }, label && !noLabelAnim && /*#__PURE__*/React.createElement(Animated.View, {
+  }, label && !noLabelAnim && react_1.default.createElement(react_native_1.Animated.View, {
     style: [styles.labelCon, {
       top: topAnim
     }, {
       backgroundColor: backgroundColor || theme.theme.colors.white
     }]
-  }, /*#__PURE__*/React.createElement(Pressable, {
+  }, react_1.default.createElement(react_native_1.Pressable, {
     style: styles.labelInner,
     onPress: openDropdown
-  }, /*#__PURE__*/React.createElement(Text, {
+  }, react_1.default.createElement(react_native_1.Text, {
     style: [styles.label_text, state === "error" && {
       color: theme.theme.colors.error
     }, selectedItemKey.length === 0 && {
@@ -165,16 +256,16 @@ const TapasMultiSelector = ({
     }],
     numberOfLines: 1,
     ellipsizeMode: "tail"
-  }, selectedItemKey.length === 0 ? placeholder || label : label), required && /*#__PURE__*/React.createElement(Text, {
+  }, selectedItemKey.length === 0 ? placeholder || label : label), required && react_1.default.createElement(react_native_1.Text, {
     style: styles.required
-  }, "*"))), /*#__PURE__*/React.createElement(TouchableOpacity, {
+  }, "*"))), react_1.default.createElement(react_native_1.TouchableOpacity, {
     ref: buttonRef,
     style: [showSelectedValue || noLabelAnim && label ? styles.btn : null, type === "solid" ? styles.solidBtn : null, type === "solid" && radius ? {
       borderRadius: radius
     } : null, label ? {
       marginTop: 7
     } : null, noLabelAnim && label && backgroundColor ? {
-      backgroundColor
+      backgroundColor: backgroundColor
     } : null, state === "error" ? {
       borderColor: theme.theme.colors.error
     } : null, disabled ? {
@@ -182,7 +273,7 @@ const TapasMultiSelector = ({
     } : null],
     disabled: disabled,
     onPress: openDropdown
-  }, showSelectedValue ? /*#__PURE__*/React.createElement(Text, {
+  }, showSelectedValue ? react_1.default.createElement(react_native_1.Text, {
     style: [styles.alignCenter, {
       flexGrow: 1,
       marginRight: 12
@@ -191,7 +282,11 @@ const TapasMultiSelector = ({
     }],
     numberOfLines: 1,
     ellipsizeMode: "tail"
-  }, !selectedItemKey?.length ? placeholder || "Select an option" : dropdownItems.filter(item => selectedItemKey.includes(item.key)).map(item => item.value).join(", ")) : noLabelAnim && label ? /*#__PURE__*/React.createElement(Text, {
+  }, !(selectedItemKey === null || selectedItemKey === void 0 ? void 0 : selectedItemKey.length) ? placeholder || "Select an option" : dropdownItems.filter(function (item) {
+    return selectedItemKey.includes(item.key);
+  }).map(function (item) {
+    return item.value;
+  }).join(", ")) : noLabelAnim && label ? react_1.default.createElement(react_native_1.Text, {
     style: [styles.alignCenter, {
       flexGrow: 1,
       marginRight: 2
@@ -200,30 +295,30 @@ const TapasMultiSelector = ({
     }],
     numberOfLines: 1,
     ellipsizeMode: "tail"
-  }, label) : null, /*#__PURE__*/React.createElement(Icon, {
+  }, label) : null, react_1.default.createElement(TapasIcon_1.default, {
     name: modalVisible && icon === "arrow_drop_down" ? "arrow_drop_up" : icon === "arrow_drop_up" ? "arrow_drop_down" : icon || "arrow_drop_down",
     style: [styles.icon, iconStyle, disabled && {
       color: theme.theme.colors.grey3
     }]
-  })), showStateMsg && /*#__PURE__*/React.createElement(View, {
+  })), showStateMsg && react_1.default.createElement(react_native_1.View, {
     style: styles.msg
-  }, /*#__PURE__*/React.createElement(Text, {
+  }, react_1.default.createElement(react_native_1.Text, {
     style: [styles.msgText, state === "error" && {
       color: theme.theme.colors.error
     }],
     numberOfLines: 1,
     ellipsizeMode: "tail"
-  }, stateMsg)), /*#__PURE__*/React.createElement(Modal, {
+  }, stateMsg)), react_1.default.createElement(react_native_1.Modal, {
     transparent: true,
     visible: modalVisible,
     onRequestClose: closeModal,
     animationType: "fade"
-  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
+  }, react_1.default.createElement(react_native_1.TouchableOpacity, {
     style: {
       flex: 1
     },
     onPress: closeModal
-  }, /*#__PURE__*/React.createElement(View, {
+  }, react_1.default.createElement(react_native_1.View, {
     style: [styles.optionsCon, {
       top: dropdownPosition.top,
       left: dropdownPosition.left,
@@ -231,39 +326,44 @@ const TapasMultiSelector = ({
     }, dropdownSubHeight ? {
       maxHeight: dropdownSubHeight
     } : null]
-  }, title && /*#__PURE__*/React.createElement(View, {
+  }, title && react_1.default.createElement(react_native_1.View, {
     style: [styles.flx, styles.titleCon]
-  }, /*#__PURE__*/React.createElement(Text, {
+  }, react_1.default.createElement(react_native_1.Text, {
     numberOfLines: 1,
     ellipsizeMode: "tail",
     style: styles.title
-  }, title)), showSearchBar && /*#__PURE__*/React.createElement(View, {
+  }, title)), showSearchBar && react_1.default.createElement(react_native_1.View, {
     style: styles.searchContainer
-  }, /*#__PURE__*/React.createElement(Text, {
+  }, react_1.default.createElement(react_native_1.Text, {
     style: styles.searchPlaceholder
-  }, searchPlaceholder)), /*#__PURE__*/React.createElement(ScrollView, {
+  }, searchPlaceholder)), react_1.default.createElement(react_native_1.ScrollView, {
     style: styles.optionsScrollView,
     showsHorizontalScrollIndicator: false,
     showsVerticalScrollIndicator: false
-  }, /*#__PURE__*/React.createElement(View, {
+  }, react_1.default.createElement(react_native_1.View, {
     style: styles.optionsInner
-  }, dropdownItems.length > 0 ? dropdownItems.map(item => /*#__PURE__*/React.createElement(Pressable, {
-    style: ({
-      pressed
-    }) => [styles.option, {
-      backgroundColor: pressed ? theme.theme.colors.grey4 || "#f0f0f0" : "transparent"
-    }],
-    key: `tapas-dropdown-option-${item.key}`,
-    onPress: () => handleItemSelect(item.key)
-  }, renderCheckbox(item))) : /*#__PURE__*/React.createElement(Text, {
+  }, dropdownItems.length > 0 ? dropdownItems.map(function (item) {
+    return react_1.default.createElement(react_native_1.Pressable, {
+      style: function (_a) {
+        var pressed = _a.pressed;
+        return [styles.option, {
+          backgroundColor: pressed ? theme.theme.colors.grey4 || "#f0f0f0" : "transparent"
+        }];
+      },
+      key: "tapas-dropdown-option-".concat(item.key),
+      onPress: function () {
+        return handleItemSelect(item.key);
+      }
+    }, renderCheckbox(item));
+  }) : react_1.default.createElement(react_native_1.Text, {
     numberOfLines: 1,
     ellipsizeMode: "tail",
     style: [styles.optionText, styles.noOptions]
-  }, "No options"))), /*#__PURE__*/React.createElement(View, {
+  }, "No options"))), react_1.default.createElement(react_native_1.View, {
     style: styles.footer
-  }, renderButton(clearButtonText, handleClear), renderButton(confirmButtonText, handleConfirm, !selectedItemKey?.length, true))))));
+  }, renderButton(clearButtonText, handleClear), renderButton(confirmButtonText, handleConfirm, !(selectedItemKey === null || selectedItemKey === void 0 ? void 0 : selectedItemKey.length), true))))));
 };
-const useStyles = makeStyles(theme => {
+var useStyles = (0, themed_1.makeStyles)(function (theme) {
   return {
     flx: {
       display: "flex",
@@ -474,196 +574,5 @@ const useStyles = makeStyles(theme => {
     }
   };
 });
-export default withTheme(TapasMultiSelector);
-//# sourceMappingURL=MultiSelector.js.map   title: {
-      height: 48,
-      display: "flex",
-      alignItems: "center",
-      fontSize: theme.fonts.sizeL,
-      color: "#000",
-      fontWeight: theme.fonts.weightL
-    },
-    optionsCon: {
-      position: "absolute",
-      display: "flex",
-      flexDirection: "column",
-      overflow: "hidden",
-      backgroundColor: theme.colors.white,
-      paddingTop: 8,
-      paddingBottom: 16,
-      borderRadius: 12,
-      maxHeight: 224,
-      boxShadow: "0px 12px 40px 0px rgba(0, 0, 0, 0.14), 0px 24px 56px 0px rgba(0, 0, 0, 0.10)"
-    },
-    optionsScrollView: {
-      flex: 1,
-      display: "flex"
-    },
-    optionsInner: {
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "flex-start",
-      gap: 8
-    },
-    option: {
-      display: "flex",
-      flexDirection: "row",
-      width: "100%",
-      overflow: "hidden",
-      alignItems: "center",
-      justifyContent: "flex-start",
-      height: 48,
-      gap: 8,
-      paddingLeft: 8
-    },
-    checkboxContainer: {
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "center",
-      gap: 8,
-      flex: 1
-    },
-    checkbox: {
-      width: 20,
-      height: 20,
-      borderWidth: 2,
-      borderColor: theme.colors.primary,
-      borderRadius: 4,
-      alignItems: "center",
-      justifyContent: "center"
-    },
-    checkboxChecked: {
-      backgroundColor: theme.colors.primary
-    },
-    checkmark: {
-      color: theme.colors.white,
-      fontSize: 14,
-      fontWeight: "bold"
-    },
-    optionText: {
-      fontSize: 14,
-      fontWeight: "400",
-      color: theme.colors.primary,
-      alignSelf: "center",
-      overflow: "hidden",
-      flexGrow: 1
-    },
-    noOptions: {
-      width: "100%",
-      textAlign: "center",
-      color: theme.colors.grey2,
-      minHeight: 48,
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center"
-    },
-    btn: {
-      display: "flex",
-      flexDirection: "row",
-      justifyContent: "space-between",
-      minHeight: 40,
-      width: "100%",
-      overflow: "hidden",
-      position: "relative"
-    },
-    solidBtn: {
-      borderWidth: 1,
-      borderRadius: 12,
-      borderStyle: "solid",
-      borderColor: theme.colors.grey2,
-      paddingLeft: 16,
-      paddingRight: 12,
-      paddingTop: 10,
-      paddingBottom: 10
-    },
-    alignCenter: {
-      alignSelf: "center"
-    },
-    labelCon: {
-      position: "absolute",
-      left: 16,
-      paddingLeft: 1,
-      paddingRight: 1,
-      display: "flex",
-      flexDirection: "row",
-      zIndex: 30
-    },
-    labelInner: {
-      display: "flex",
-      flexDirection: "row"
-    },
-    label_text: {
-      fontSize: 12,
-      color: theme.colors.primary
-    },
-    required: {
-      fontSize: 12,
-      fontWeight: "400",
-      color: theme.colors.colorToastNegative,
-      marginLeft: 1
-    },
-    msg: {
-      display: "flex",
-      flexDirection: "row",
-      paddingLeft: 16,
-      paddingRight: 8,
-      marginTop: 1,
-      width: "100%",
-      height: 15
-    },
-    msgText: {
-      fontSize: 12,
-      fontWeight: "400",
-      color: theme.colors.secondary
-    },
-    searchContainer: {
-      padding: 16,
-      borderBottomWidth: 1,
-      borderBottomColor: theme.colors.grey2
-    },
-    searchPlaceholder: {
-      color: theme.colors.grey2,
-      fontSize: 14
-    },
-    footer: {
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "flex-end",
-      paddingHorizontal: 16,
-      paddingTop: 8,
-      borderTopWidth: 1,
-      borderTopColor: theme.colors.colorPrimaryBorder,
-      gap: 8
-    },
-    button: {
-      paddingHorizontal: 16,
-      paddingVertical: 8,
-      borderRadius: 8,
-      borderWidth: 1,
-      borderColor: theme.colors.grey2,
-      backgroundColor: theme.colors.white
-    },
-    primaryButton: {
-      backgroundColor: theme.colors.primary,
-      borderColor: theme.colors.primary
-    },
-    disabledButton: {
-      backgroundColor: theme.colors.grey3,
-      borderColor: theme.colors.grey3
-    },
-    buttonText: {
-      fontSize: 14,
-      fontWeight: "500",
-      color: theme.colors.primary
-    },
-    primaryButtonText: {
-      color: theme.colors.white
-    },
-    disabledButtonText: {
-      color: theme.colors.grey2
-    }
-  };
-});
 exports.default = (0, themed_1.withTheme)(TapasMultiSelector);
 //# sourceMappingURL=MultiSelector.js.map