@codeleap/mobile 2.3.7 → 2.3.10

package/dist/utils/theme.js

@@ -1,53 +1,53 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getMobileThemeValues = void 0;
-var react_native_1 = require("react-native");
-var react_native_device_info_1 = __importDefault(require("react-native-device-info"));
-function getMobileThemeValues(initialWindowMetrics, values) {
-    var _a, _b;
-    var screenDimensions = react_native_1.Dimensions.get('screen');
-    var hasNotch = react_native_1.Platform.OS === 'ios' ? (react_native_1.Dimensions.get('window').height >= 812) : (((_a = initialWindowMetrics === null || initialWindowMetrics === void 0 ? void 0 : initialWindowMetrics.insets) === null || _a === void 0 ? void 0 : _a.top) > 24 || react_native_1.StatusBar.currentHeight > 24);
-    var hasIsland = react_native_device_info_1.default.hasDynamicIsland();
-    var bottomNavHeight = react_native_1.Platform.OS === 'android' ? (_b = initialWindowMetrics === null || initialWindowMetrics === void 0 ? void 0 : initialWindowMetrics.insets) === null || _b === void 0 ? void 0 : _b.bottom : 0;
-    var prefersConstantNavigationBar = bottomNavHeight > 0;
-    var safeAreaTop = react_native_1.Platform.OS === 'ios' ? (hasNotch ? 34 + (hasIsland ? 12 : 0) : 20) : react_native_1.StatusBar.currentHeight;
-    var safeAreaBottom = (hasNotch && !prefersConstantNavigationBar ? 20 : 0);
-    return __assign(__assign({}, screenDimensions), { pixel: react_native_1.StyleSheet.hairlineWidth, hasNotch: hasNotch, hasIsland: hasIsland, prefersConstantNavigationBar: prefersConstantNavigationBar, safeAreaTop: safeAreaTop, safeAreaBottom: safeAreaBottom, keyboardVerticalOffset: react_native_1.Platform.OS === 'ios' ? 57 : 47, get headerHeight() { return values.headerHeight + safeAreaTop; },
-        get tabBarHeight() { return values.tabBarHeight + (prefersConstantNavigationBar ? 0 : this.safeAreaBottom); }, bottomNavHeight: bottomNavHeight, get window() {
-            return {
-                height: screenDimensions.height - (bottomNavHeight + safeAreaTop),
-                width: screenDimensions.width,
-            };
-        }, transitions: {
-            modal: {
-                duration: 100,
-                type: 'timing',
-            },
-        }, buttons: {
-            small: {
-                height: 40,
-            },
-            default: {
-                height: 50,
-            },
-            large: {
-                height: 60,
-            },
-        } });
-}
-exports.getMobileThemeValues = getMobileThemeValues;
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getMobileThemeValues = void 0;
+var react_native_1 = require("react-native");
+var react_native_device_info_1 = __importDefault(require("react-native-device-info"));
+function getMobileThemeValues(initialWindowMetrics, values) {
+    var _a, _b;
+    var screenDimensions = react_native_1.Dimensions.get('screen');
+    var hasNotch = react_native_1.Platform.OS === 'ios' ? (react_native_1.Dimensions.get('window').height >= 812) : (((_a = initialWindowMetrics === null || initialWindowMetrics === void 0 ? void 0 : initialWindowMetrics.insets) === null || _a === void 0 ? void 0 : _a.top) > 24 || react_native_1.StatusBar.currentHeight > 24);
+    var hasIsland = react_native_device_info_1.default.hasDynamicIsland();
+    var bottomNavHeight = react_native_1.Platform.OS === 'android' ? (_b = initialWindowMetrics === null || initialWindowMetrics === void 0 ? void 0 : initialWindowMetrics.insets) === null || _b === void 0 ? void 0 : _b.bottom : 0;
+    var prefersConstantNavigationBar = bottomNavHeight > 0;
+    var safeAreaTop = react_native_1.Platform.OS === 'ios' ? (hasNotch ? 34 + (hasIsland ? 12 : 0) : 20) : react_native_1.StatusBar.currentHeight;
+    var safeAreaBottom = (hasNotch && !prefersConstantNavigationBar ? 20 : 0);
+    return __assign(__assign({}, screenDimensions), { pixel: react_native_1.StyleSheet.hairlineWidth, hasNotch: hasNotch, hasIsland: hasIsland, prefersConstantNavigationBar: prefersConstantNavigationBar, safeAreaTop: safeAreaTop, safeAreaBottom: safeAreaBottom, keyboardVerticalOffset: react_native_1.Platform.OS === 'ios' ? 57 : 47, get headerHeight() { return values.headerHeight + safeAreaTop; },
+        get tabBarHeight() { return values.tabBarHeight + (prefersConstantNavigationBar ? 0 : this.safeAreaBottom); }, bottomNavHeight: bottomNavHeight, get window() {
+            return {
+                height: screenDimensions.height - (bottomNavHeight + safeAreaTop),
+                width: screenDimensions.width,
+            };
+        }, transitions: {
+            modal: {
+                duration: 100,
+                type: 'timing',
+            },
+        }, buttons: {
+            small: {
+                height: 40,
+            },
+            default: {
+                height: 50,
+            },
+            large: {
+                height: 60,
+            },
+        } });
+}
+exports.getMobileThemeValues = getMobileThemeValues;
 //# sourceMappingURL=theme.js.map

package/package.json

@@ -1,54 +1,54 @@
-{
-  "name": "@codeleap/mobile",
-  "version": "2.3.7",
-  "main": "src/index.ts",
-  "license": "UNLICENSED",
-  "repository": {
-    "url": "https://github.com/codeleap-uk/internal-libs-monorepo.git",
-    "type": "git",
-    "directory": "packages/mobile"
-  },
-  "devDependencies": {
-    "@codeleap/config": "*",
-    "@types/react-native": "^0.66.15",
-    "@types/react-window": "^1.8.5",
-    "moti": "^0.18.0",
-    "typescript": "^4.5.5"
-  },
-  "scripts": {
-    "build": "tsc --build",
-    "lint": "eslint -c  .eslintrc.js --fix \"./src/**/*.{ts,tsx,js,jsx}\"",
-    "publish": "npm publish"
-  },
-  "peerDependencies": {
-    "@codeleap/common": "*",
-    "@react-native-firebase/messaging": "14.4.0",
-    "@react-navigation/bottom-tabs": "^6.0.9",
-    "@react-navigation/drawer": "^6.1.8",
-    "@react-navigation/native": "^6.0.6",
-    "@react-navigation/native-stack": "^6.2.5",
-    "@react-navigation/stack": "^6.1.1",
-    "moti": "^0.18.0",
-    "react": "*",
-    "react-native": "*",
-    "react-native-animatable": "^1.3.3",
-    "react-native-calendars": "*",
-    "react-native-fast-image": "^8.5.11",
-    "react-native-gesture-handler": "^2.2.0",
-    "react-native-image-crop-picker": "*",
-    "react-native-image-viewing": "^0.2.2",
-    "react-native-keyboard-aware-scroll-view": "^0.9.5",
-    "react-native-text-input-mask": "3.1.4"
-  },
-  "dependencies": {
-    "@gorhom/portal": "^1.0.13",
-    "@miblanchard/react-native-slider": "^2.1.0",
-    "date-fns": "^2.28.0",
-    "react-native-animatable": "^1.3.3",
-    "react-native-device-info": "^10.3.0",
-    "react-native-masked-text": "^1.13.0",
-    "react-native-pose": "^0.9.1",
-    "react-native-super-grid": "^4.4.2",
-    "react-native-uuid": "^2.0.1"
-  }
-}
+{
+  "name": "@codeleap/mobile",
+  "version": "2.3.10",
+  "main": "src/index.ts",
+  "license": "UNLICENSED",
+  "repository": {
+    "url": "https://github.com/codeleap-uk/internal-libs-monorepo.git",
+    "type": "git",
+    "directory": "packages/mobile"
+  },
+  "devDependencies": {
+    "@codeleap/config": "*",
+    "@types/react-native": "^0.66.15",
+    "@types/react-window": "^1.8.5",
+    "moti": "^0.18.0",
+    "typescript": "^4.5.5"
+  },
+  "scripts": {
+    "build": "tsc --build",
+    "lint": "eslint -c  .eslintrc.js --fix \"./src/**/*.{ts,tsx,js,jsx}\"",
+    "publish": "npm publish"
+  },
+  "peerDependencies": {
+    "@codeleap/common": "*",
+    "@react-native-firebase/messaging": "14.4.0",
+    "@react-navigation/bottom-tabs": "^6.0.9",
+    "@react-navigation/drawer": "^6.1.8",
+    "@react-navigation/native": "^6.0.6",
+    "@react-navigation/native-stack": "^6.2.5",
+    "@react-navigation/stack": "^6.1.1",
+    "moti": "^0.18.0",
+    "react": "*",
+    "react-native": "*",
+    "react-native-animatable": "^1.3.3",
+    "react-native-calendars": "*",
+    "react-native-fast-image": "^8.5.11",
+    "react-native-gesture-handler": "^2.2.0",
+    "react-native-image-crop-picker": "*",
+    "react-native-image-viewing": "^0.2.2",
+    "react-native-keyboard-aware-scroll-view": "^0.9.5",
+    "react-native-text-input-mask": "3.1.4"
+  },
+  "dependencies": {
+    "@gorhom/portal": "^1.0.13",
+    "@miblanchard/react-native-slider": "^2.1.0",
+    "date-fns": "^2.28.0",
+    "react-native-animatable": "^1.3.3",
+    "react-native-device-info": "^10.3.0",
+    "react-native-masked-text": "^1.13.0",
+    "react-native-pose": "^0.9.1",
+    "react-native-super-grid": "^4.4.2",
+    "react-native-uuid": "^2.0.1"
+  }
+}

package/src/components/ActionIcon/index.tsx

@@ -0,0 +1,32 @@
+import { ComponentVariants, getNestedStylesByKey, useDefaultComponentStyle } from '@codeleap/common'
+import React from 'react'
+import { StyleSheet } from 'react-native'
+import { StylesOf } from '../../types'
+import { Icon, IconProps } from '../Icon'
+import { Touchable, TouchableProps } from '../Touchable'
+import { ActionIconComposition, ActionIconStyles } from './styles'
+
+export type ActionIconProps= {
+    iconProps?: Partial<IconProps>
+    icon?: IconProps['name']
+    styles?: StylesOf<ActionIconComposition>
+} & Omit<TouchableProps, 'styles' | 'variants'> & ComponentVariants<typeof ActionIconStyles>
+
+export const ActionIcon:React.FC<ActionIconProps> = (props) => {
+  const { icon, iconProps, variants, styles, children, ...touchableProps } = props
+  const variantStyles = useDefaultComponentStyle<'u:ActionIcon', typeof ActionIconStyles>('u:ActionIcon', {
+    variants, styles, transform: StyleSheet.flatten,
+  })
+  const touchableStyles = getNestedStylesByKey('touchable', variantStyles)
+
+  return <Touchable styles={touchableStyles} {...touchableProps}>
+    <Icon name={icon} style={
+      [
+        variantStyles.icon,
+        touchableProps?.disabled && variantStyles['icon:disabled'],
+      ]} {...iconProps}/>
+    {children}
+  </Touchable>
+}
+
+export * from './styles'

package/src/components/ActionIcon/styles.ts

@@ -0,0 +1,97 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { TouchableComposition } from '../Touchable'
+
+export type ActionIconParts = 'icon' | `touchable${Capitalize<TouchableComposition>}`
+export type ActionIconStates = ':disabled' | ''
+export type ActionIconComposition = `${ActionIconParts}${ActionIconStates}`
+const createActionIconStyle = createDefaultVariantFactory<ActionIconComposition>()
+
+const presets = includePresets((style) => createActionIconStyle(() => ({ touchableWrapper: style })))
+
+export const ActionIconStyles = {
+  ...presets,
+  default: createActionIconStyle((theme) => {
+
+    return {
+      icon: {
+        color: theme.colors.icon,
+        ...theme.sized(5 * 0.6),
+
+      },
+      touchableWrapper: {
+        ...theme.sized(5),
+        borderRadius: theme.borderRadius.round,
+        ...theme.presets.center,
+      },
+      'icon:disabled': {
+        color: theme.colors.disabled,
+      },
+
+    }
+  }),
+  originalColor: createActionIconStyle(theme => ({
+    icon: {
+      color: 'auto',
+    },
+  })),
+  small: createActionIconStyle((theme) => ({
+    touchableWrapper: {
+      ...theme.sized(3.5),
+
+    },
+    icon: {
+      ...theme.sized(3.5 * 0.6),
+
+    },
+  })),
+  large: createActionIconStyle((theme) => ({
+    touchableWrapper: {
+      ...theme.sized(6.5),
+
+    },
+    icon: {
+      ...theme.sized(6.5 * 0.6),
+
+    },
+  })),
+  primary: createActionIconStyle((theme) => ({
+    icon: {
+      color: theme.colors.primary,
+
+    },
+
+  })),
+  negative: createActionIconStyle((theme) => ({
+    icon: {
+      color: theme.colors.negative,
+
+    },
+
+  })),
+  positive: createActionIconStyle((theme) => ({
+    icon: {
+      color: theme.colors.positive,
+
+    },
+
+  })),
+  black: createActionIconStyle((theme) => ({
+    icon: {
+      color: theme.colors.black,
+
+    },
+
+  })),
+  white: createActionIconStyle((theme) => ({
+    icon: {
+      color: theme.colors.white,
+
+    },
+
+  })),
+  neutral: createActionIconStyle((theme) => ({
+    icon: {
+      color: theme.colors.neutral,
+    },
+  })),
+}

package/src/components/ActivityIndicator/index.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react'
+import { ComponentPropsWithoutRef, forwardRef } from 'react'
+import { ActivityIndicator as Indicator, StyleSheet } from 'react-native'
+import {
+
+  useDefaultComponentStyle,
+  ComponentVariants,
+  useCodeleapContext,
+} from '@codeleap/common'
+import { StylesOf } from '../../types'
+import {
+  ActivityIndicatorComposition,
+  ActivityIndicatorStyles,
+} from './styles'
+
+export * from './styles'
+export type ActivityIndicatorProps = ComponentPropsWithoutRef<
+  typeof Indicator
+> & {
+  variants?: ComponentVariants<typeof ActivityIndicatorStyles>['variants']
+  styles?: StylesOf<ActivityIndicatorComposition>
+}
+
+export const ActivityIndicator = forwardRef<Indicator, ActivityIndicatorProps>(
+  (activityIndicatorProps, ref) => {
+    const { variants = [], style, styles: propStyles, ...props } = activityIndicatorProps
+
+    const variantStyles = useDefaultComponentStyle('ActivityIndicator', {
+      variants,
+      transform: StyleSheet.flatten,
+      styles: propStyles,
+    })
+
+    const { Theme } = useCodeleapContext()
+
+    const styles = StyleSheet.flatten([variantStyles.wrapper, style])
+    const color = styles?.color || Theme.colors.gray
+    const size = styles?.height || styles?.width || 'large'
+
+    return (
+      <Indicator
+        size={size}
+        ref={ref}
+        color={color}
+        style={styles}
+        {...props}
+      />
+    )
+  },
+)

package/src/components/ActivityIndicator/styles.ts

@@ -0,0 +1,68 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+
+export type ActivityIndicatorComposition =
+  | 'wrapper'
+  | 'backCircle'
+  | 'frontCircle'
+  | 'circle'
+
+const createActivityIndicatorStyle =
+  createDefaultVariantFactory<ActivityIndicatorComposition>()
+
+const presets = includePresets((styles) => createActivityIndicatorStyle(() => ({ wrapper: styles })),
+)
+
+export const getActivityIndicatorBaseStyles = (size:number) => {
+  const sizes = {
+    height: size,
+    width: size,
+    borderWidth: size * 0.25,
+  }
+
+  return {
+    wrapper: {
+      position: 'relative',
+      ...sizes,
+    } as any,
+    circle: {
+      borderRadius: 100,
+      position: 'absolute',
+      borderStyle: 'solid',
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+    } as any,
+    backCircle: {
+
+      // borderColor: theme.colors.primary,
+      minWidth: '100%',
+      opacity: 0.5,
+    } as any,
+    frontCircle: {
+      position: 'absolute',
+      borderColor: 'transparent',
+      // borderTopColor: theme.colors.primary,
+    } as any,
+  }
+}
+
+export const ActivityIndicatorStyles = {
+  ...presets,
+  default: createActivityIndicatorStyle((theme) => {
+    const baseStyles = getActivityIndicatorBaseStyles(35)
+
+    return {
+      ...baseStyles,
+      backCircle: {
+        ...baseStyles.backCircle,
+        borderColor: theme.colors.primary,
+      },
+      frontCircle: {
+        ...baseStyles.frontCircle,
+        borderTopColor: theme.colors.primary,
+      },
+    }
+
+  }),
+}

package/src/components/Animated.tsx

@@ -0,0 +1,34 @@
+import { onUpdate } from '@codeleap/common'
+import React, { useRef } from 'react'
+
+import posed from 'react-native-pose'
+import { Touchable } from './Touchable'
+import { View } from './View'
+const Components = {
+  Touchable,
+  View,
+}
+
+const PosedComponents = Object.fromEntries(
+  Object.entries(Components).map(([key, Render]) => [key, posed(Render)]),
+)
+
+type AnimatedComponents = typeof Components
+type CP = keyof AnimatedComponents
+
+type AnimatedProps<T extends CP, CFG = Record<string, any>> = {
+  component: T
+  config: CFG
+  pose: keyof CFG
+  initialPose?: keyof CFG
+} & Omit<Parameters<AnimatedComponents[T]>[0], 'component'>
+
+export const Animated = <T extends CP, CFG = any>({
+  config,
+  component,
+  ...props
+}: AnimatedProps<T, CFG>) => {
+  const Component = useRef(PosedComponents[component](config)).current
+
+  return <Component withParent={false} {...props} />
+}

package/src/components/AutoComplete/index.tsx

@@ -0,0 +1,163 @@
+import * as React from 'react'
+import { ComponentVariants,
+  FormTypes,
+  getNestedStylesByKey,
+  IconPlaceholder,
+  onUpdate,
+  PropsOf,
+  ReactStateProps,
+  TypeGuards,
+  useDebounce,
+  useDefaultComponentStyle,
+  useMemo,
+  useState,
+} from '@codeleap/common'
+import { ModalHeaderProps } from '../Modal'
+import { TextInput, TextInputProps } from '../TextInput'
+import { View, ViewProps } from '../View'
+import { CustomSelectProps, Select } from '../Select'
+import { AutoCompleteStyles, AutoCompleteComposition } from './styles'
+import { StylesOf } from '../../types'
+import { StyleSheet } from 'react-native'
+import { Text } from '../Text'
+import { Button } from '../Button'
+
+export type AutoCompleteHeaderProps = ReactStateProps<'search', string> &
+  Omit<PropsOf<typeof View>, 'style'|'styles'|'variants'>
+& {
+    label: FormTypes.Label
+    searchInputProps?: Partial<TextInputProps>
+    styles: ModalHeaderProps['styles'] & { searchInput?: TextInputProps['styles']; titleWrapper?:ViewProps['style']}
+    debugName: string
+    icon?: IconPlaceholder
+    toggle: ModalHeaderProps['toggle']
+  }
+
+export const AutoCompleteHeader:React.FC<AutoCompleteHeaderProps> = (props) => {
+  const { search, setSearch, icon = 'search', debugName, label, styles, toggle, searchInputProps, ...viewProps } = props
+
+  return <View style={[styles.wrapper]} {...viewProps}>
+    <View style={styles.titleWrapper}>
+      <Text style={styles.title} text={label}/>
+      <Button
+        icon={'close' as IconPlaceholder}
+        debugName={`Close Autocomplete ${debugName} button`}
+        onPress={toggle} variants={['icon']}
+        styles={styles.closeButton}/>
+    </View>
+    <TextInput subtitle={() => null} leftIcon={{
+      icon: icon as IconPlaceholder,
+    }} debugName={`AutoComplete ${debugName} search input`} value={search} onChangeText={setSearch} styles={styles.searchInput} {...searchInputProps}/>
+  </View>
+}
+
+export type AutoCompleteOption<T> = CustomSelectProps<T>['options'][number] & {searchTerm?: string}
+
+export type AutoCompleteProps<
+    T,
+    Base extends CustomSelectProps<T> = CustomSelectProps<T>
+  > = Omit<Base, 'options'| 'variants' | 'styles'> & {
+    options: AutoCompleteOption<T>[]
+    caseSensitive?: boolean
+    debounce?: number
+    headerProps?: Partial<AutoCompleteHeaderProps>
+    styles?: StylesOf<AutoCompleteComposition>
+    filterFn?: (search?: string, option?:AutoCompleteOption<T>) => boolean
+  } & ComponentVariants<typeof AutoCompleteStyles>
+
+export const AutoComplete = <T extends string|number = string>(props: AutoCompleteProps<T>) => {
+  const {
+    options,
+    caseSensitive = false,
+    debounce = 200,
+    filterFn,
+    headerProps = {},
+    variants,
+    styles,
+    ...selectProps
+  } = props
+
+  const [search, setSearch] = useState('')
+  const [debouncedSearch, resetDebounce] = useDebounce(search, debounce)
+  const [filteredOptions, setFilteredOptions] = useState(options)
+
+  const [loading, setLoading] = useState(false)
+  const variantStyles = useDefaultComponentStyle<'u:AutoComplete', typeof AutoCompleteStyles>('u:AutoComplete', {
+    variants,
+    transform: StyleSheet.flatten,
+    styles,
+  })
+  const serialVariants = JSON.stringify(variantStyles)
+  const { searchInputStyles, closeButtonStyles } = useMemo(() => ({
+    searchInputStyles: getNestedStylesByKey('searchInput', variantStyles),
+    closeButtonStyles: getNestedStylesByKey('closeButton', variantStyles),
+
+  }), [serialVariants])
+
+  onUpdate(() => {
+    setLoading(true)
+    let persist = true
+    setTimeout(() => {
+
+      const newOpts = options.filter((option) => {
+        if (filterFn) {
+          return filterFn(debouncedSearch, option)
+        }
+        const { label, searchTerm, value } = option
+        let term = searchTerm || (TypeGuards.isString(label) ? label : value.toString())
+
+        if (!caseSensitive) {
+          term = term.toLowerCase()
+        }
+
+        return term.includes(debouncedSearch.toLowerCase())
+      })
+      if (persist) {
+        setFilteredOptions(newOpts)
+        setTimeout(() => {
+          if (persist) {
+            setLoading(false)
+          }
+        }, debounce * 1.5)
+      }
+
+    })
+    return () => {
+      persist = false
+      resetDebounce()
+    }
+  }, [debouncedSearch, caseSensitive, options.length, filterFn])
+  return <Select
+    styles={variantStyles}
+    options={ loading ? [] : filteredOptions}
+    header={
+      <AutoCompleteHeader
+        debugName={selectProps.debugName}
+        label={selectProps.label}
+        search={search}
+        setSearch={setSearch}
+        toggle={selectProps.toggle}
+        styles={{
+          wrapper: variantStyles.header,
+          closeButton: closeButtonStyles,
+          title: variantStyles.title,
+          searchInput: searchInputStyles,
+          titleWrapper: variantStyles.titleWrapper,
+        }}
+
+        {...headerProps}
+      />
+    }
+
+    {...selectProps}
+    listProps={{
+      ...selectProps?.listProps,
+      placeholder: {
+        loading,
+        ...selectProps?.listProps?.placeholder,
+      },
+    }}
+  />
+
+}
+export * from './styles'