@beppla/tapas-ui 1.0.69 → 1.0.70

package/commonjs/MultiSelector/MultiSelector.js

@@ -1,154 +1,84 @@
 "use strict";
 
-var __createBinding = void 0 && (void 0).__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 = void 0 && (void 0).__setModuleDefault || (Object.create ? function (o, v) {
-  Object.defineProperty(o, "default", {
-    enumerable: true,
-    value: v
-  });
-} : function (o, v) {
-  o["default"] = v;
-});
-var __importStar = void 0 && (void 0).__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 = void 0 && (void 0).__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 = void 0 && (void 0).__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 () {
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _themed = require("@rneui/themed");
+var _TapasIcon = _interopRequireDefault(require("../Icons/TapasIcon"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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 = (0, _themed.useTheme)();
+  const styles = useStyles(theme);
+  const [modalVisible, setModalVisible] = (0, _react.useState)(false);
+  const [dropdownWidthCalc, setDropdownWidthCalc] = (0, _react.useState)(dropdownSubWidth ?? 151);
+  const [dropdownPosition, setDropdownPosition] = (0, _react.useState)({
+    top: 0,
+    left: 0
+  });
+  const [selectedItemKey, setSelectedItemKey] = (0, _react.useState)(selected ?? []);
+  const [top, setTop] = (0, _react.useState)(18);
+  const buttonRef = (0, _react.useRef)(null);
+  const topAnim = (0, _react.useRef)(new _reactNative.Animated.Value(18)).current;
+  const offsetSpace = 8;
+  const offsetHeight = 10;
+  const openDropdown = () => {
     if (disabled) return;
     if (buttonRef.current) {
-      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);
+      buttonRef.current.measure((_fx, _fy, width, height, px, py) => {
+        const window = _reactNative.Dimensions.get("window");
+        const dropdownHeight = dropdownSubHeight ?? Math.min(40 * dropdownItems.length + 24, 448);
+        const dropdownWidth = Math.max(width, dropdownSubWidth ?? 151);
         setDropdownWidthCalc(dropdownWidth);
+
         // 计算下方空间是否足够
-        var enoughSpaceBelow = py + height + dropdownHeight + offsetHeight <= window.height;
-        var enoughSpaceAbove = py - dropdownHeight >= 0;
-        var enoughSpaceRight = px + dropdownWidth <= window.width;
+        const enoughSpaceBelow = py + height + dropdownHeight + offsetHeight <= window.height;
+        const enoughSpaceAbove = py - dropdownHeight >= 0;
+        const enoughSpaceRight = px + dropdownWidth <= window.width;
+
         // 处理 px 由于 tab screen的问题 导致 px 可能是多个屏宽倍数的问题
-        var adjustedPx = px % window.width + (px > window.width ? 56 : 0) + offsetWidth;
+        const adjustedPx = px % window.width + (px > window.width ? 56 : 0) + offsetWidth;
         // 根据空间决定显示方向和位置
-        var top = enoughSpaceBelow ? py + height + offsetSpace : enoughSpaceAbove ? py - dropdownHeight - offsetHeight - 16 : py + height + offsetSpace;
-        var left = enoughSpaceRight ? adjustedPx : adjustedPx + width - dropdownWidth;
+        const top = enoughSpaceBelow ? py + height + offsetSpace : enoughSpaceAbove ? py - dropdownHeight - offsetHeight - 16 : py + height + offsetSpace;
+        const left = enoughSpaceRight ? adjustedPx : adjustedPx + width - dropdownWidth;
         setDropdownPosition({
-          top: top,
-          left: left
+          top,
+          left
         });
         if (setVisible) {
           setVisible(true);
@@ -158,77 +88,65 @@ var TapasMultiSelector = function (_a) {
       });
     }
   };
-  (0, react_1.useEffect)(function () {
-    setSelectedItemKey(selected !== null && selected !== void 0 ? selected : []);
+  (0, _react.useEffect)(() => {
+    setSelectedItemKey(selected ?? []);
   }, [selected]);
-  (0, react_1.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     if (typeof visible === "boolean" && visible !== undefined) {
       setModalVisible(visible);
     }
   }, [visible]);
-  (0, react_1.useEffect)(function () {
-    var start = selectedItemKey.length === 0 ? 0 : 18;
-    var target = selectedItemKey.length === 0 ? 18 : 0;
+  (0, _react.useEffect)(() => {
+    const start = selectedItemKey.length === 0 ? 0 : 18;
+    const target = selectedItemKey.length === 0 ? 18 : 0;
     if (top === target) return;
     setTop(target);
     topAnim.setValue(start);
-    react_native_1.Animated.timing(topAnim, {
+    _reactNative.Animated.timing(topAnim, {
       toValue: target,
       duration: 300,
       useNativeDriver: true
     }).start();
   }, [selectedItemKey]);
-  var closeModal = function () {
+  const closeModal = () => {
     if (setVisible) {
       setVisible(false);
     } else {
       setModalVisible(false);
     }
   };
-  var handleItemSelect = function (key) {
-    var newSelected = selectedItemKey.includes(key) ? selectedItemKey.filter(function (k) {
-      return k !== key;
-    }) : __spreadArray(__spreadArray([], selectedItemKey, true), [key], false);
+  const handleItemSelect = key => {
+    const newSelected = selectedItemKey.includes(key) ? selectedItemKey.filter(k => k !== key) : [...selectedItemKey, key];
     setSelectedItemKey(newSelected);
   };
-  var handleClear = function () {
+  const handleClear = () => {
     setSelectedItemKey([]);
-    onSelect === null || onSelect === void 0 ? void 0 : onSelect([]);
+    onSelect?.([]);
     closeModal();
   };
-  var handleConfirm = function () {
-    onSelect === null || onSelect === void 0 ? void 0 : onSelect(selectedItemKey);
+  const handleConfirm = () => {
+    onSelect?.(selectedItemKey);
     closeModal();
   };
-  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, {
+  const renderCheckbox = item => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.checkboxContainer
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.checkbox, selectedItemKey.includes(item.key) && styles.checkboxChecked]
+  }, selectedItemKey.includes(item.key) && /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: styles.checkmark
+  }, "\u2713")), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: styles.optionText,
+    numberOfLines: 1,
+    ellipsizeMode: "tail"
+  }, item.value));
+  const renderButton = (text, onPress, disabled = false, primary = false) => /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    style: [styles.button, primary && styles.primaryButton, disabled && styles.disabledButton],
+    onPress: onPress,
+    disabled: disabled
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [styles.buttonText, primary && styles.primaryButtonText, disabled && styles.disabledButtonText]
+  }, text));
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: [styles.con, width ? {
       maxWidth: width,
       minWidth: width
@@ -237,16 +155,16 @@ var TapasMultiSelector = function (_a) {
       maxHeight: height + (label ? 7 : 0) + (showStateMsg ? 15 : 0)
     } : null],
     testID: testID
-  }, label && !noLabelAnim && react_1.default.createElement(react_native_1.Animated.View, {
+  }, label && !noLabelAnim && /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
     style: [styles.labelCon, {
       top: topAnim
     }, {
       backgroundColor: backgroundColor || theme.theme.colors.white
     }]
-  }, react_1.default.createElement(react_native_1.Pressable, {
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
     style: styles.labelInner,
     onPress: openDropdown
-  }, react_1.default.createElement(react_native_1.Text, {
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
     style: [styles.label_text, state === "error" && {
       color: theme.theme.colors.error
     }, selectedItemKey.length === 0 && {
@@ -256,16 +174,16 @@ var TapasMultiSelector = function (_a) {
     }],
     numberOfLines: 1,
     ellipsizeMode: "tail"
-  }, selectedItemKey.length === 0 ? placeholder || label : label), required && react_1.default.createElement(react_native_1.Text, {
+  }, selectedItemKey.length === 0 ? placeholder || label : label), required && /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
     style: styles.required
-  }, "*"))), react_1.default.createElement(react_native_1.TouchableOpacity, {
+  }, "*"))), /*#__PURE__*/_react.default.createElement(_reactNative.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 ? {
@@ -273,7 +191,7 @@ var TapasMultiSelector = function (_a) {
     } : null],
     disabled: disabled,
     onPress: openDropdown
-  }, showSelectedValue ? react_1.default.createElement(react_native_1.Text, {
+  }, showSelectedValue ? /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
     style: [styles.alignCenter, {
       flexGrow: 1,
       marginRight: 12
@@ -282,11 +200,7 @@ var TapasMultiSelector = function (_a) {
     }],
     numberOfLines: 1,
     ellipsizeMode: "tail"
-  }, !(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, {
+  }, !selectedItemKey?.length ? placeholder || "Select an option" : dropdownItems.filter(item => selectedItemKey.includes(item.key)).map(item => item.value).join(", ")) : noLabelAnim && label ? /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
     style: [styles.alignCenter, {
       flexGrow: 1,
       marginRight: 2
@@ -295,30 +209,30 @@ var TapasMultiSelector = function (_a) {
     }],
     numberOfLines: 1,
     ellipsizeMode: "tail"
-  }, label) : null, react_1.default.createElement(TapasIcon_1.default, {
+  }, label) : null, /*#__PURE__*/_react.default.createElement(_TapasIcon.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 && react_1.default.createElement(react_native_1.View, {
+  })), showStateMsg && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: styles.msg
-  }, react_1.default.createElement(react_native_1.Text, {
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
     style: [styles.msgText, state === "error" && {
       color: theme.theme.colors.error
     }],
     numberOfLines: 1,
     ellipsizeMode: "tail"
-  }, stateMsg)), react_1.default.createElement(react_native_1.Modal, {
+  }, stateMsg)), /*#__PURE__*/_react.default.createElement(_reactNative.Modal, {
     transparent: true,
     visible: modalVisible,
     onRequestClose: closeModal,
     animationType: "fade"
-  }, react_1.default.createElement(react_native_1.TouchableOpacity, {
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
     style: {
       flex: 1
     },
     onPress: closeModal
-  }, react_1.default.createElement(react_native_1.View, {
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: [styles.optionsCon, {
       top: dropdownPosition.top,
       left: dropdownPosition.left,
@@ -326,44 +240,39 @@ var TapasMultiSelector = function (_a) {
     }, dropdownSubHeight ? {
       maxHeight: dropdownSubHeight
     } : null]
-  }, title && react_1.default.createElement(react_native_1.View, {
+  }, title && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: [styles.flx, styles.titleCon]
-  }, react_1.default.createElement(react_native_1.Text, {
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
     numberOfLines: 1,
     ellipsizeMode: "tail",
     style: styles.title
-  }, title)), showSearchBar && react_1.default.createElement(react_native_1.View, {
+  }, title)), showSearchBar && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: styles.searchContainer
-  }, react_1.default.createElement(react_native_1.Text, {
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
     style: styles.searchPlaceholder
-  }, searchPlaceholder)), react_1.default.createElement(react_native_1.ScrollView, {
+  }, searchPlaceholder)), /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, {
     style: styles.optionsScrollView,
     showsHorizontalScrollIndicator: false,
     showsVerticalScrollIndicator: false
-  }, react_1.default.createElement(react_native_1.View, {
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: styles.optionsInner
-  }, 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, {
+  }, dropdownItems.length > 0 ? dropdownItems.map(item => /*#__PURE__*/_react.default.createElement(_reactNative.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.default.createElement(_reactNative.Text, {
     numberOfLines: 1,
     ellipsizeMode: "tail",
     style: [styles.optionText, styles.noOptions]
-  }, "No options"))), react_1.default.createElement(react_native_1.View, {
+  }, "No options"))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: styles.footer
-  }, renderButton(clearButtonText, handleClear), renderButton(confirmButtonText, handleConfirm, !(selectedItemKey === null || selectedItemKey === void 0 ? void 0 : selectedItemKey.length), true))))));
+  }, renderButton(clearButtonText, handleClear), renderButton(confirmButtonText, handleConfirm, !selectedItemKey?.length, true))))));
 };
-var useStyles = (0, themed_1.makeStyles)(function (theme) {
+const useStyles = (0, _themed.makeStyles)(theme => {
   return {
     flx: {
       display: "flex",
@@ -574,4 +483,121 @@ var useStyles = (0, themed_1.makeStyles)(function (theme) {
     }
   };
 });
+var _default = exports.default = (0, _themed.withTheme)(TapasMultiSelector);
+//# sourceMappingURL=MultiSelector.js.map",
+      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