@codeleap/mobile 2.4.7 → 3.1.1

package/src/components/InputBase/styles.ts

@@ -0,0 +1,135 @@
+import { TypeGuards, createDefaultVariantFactory, getRenderedComponent, includePresets, useDefaultComponentStyle, useMemo, useNestedStylesByKey } from "@codeleap/common"
+import { ActionIconComposition, ActionIconParts } from "../ActionIcon"
+import { InputBaseProps } from "./types"
+import { StyleSheet } from "react-native"
+
+type InputIcons = 'icon' | 'leftIcon' | 'rightIcon'
+
+type IconParts = ActionIconParts
+
+export type InputIconComposition = `${InputIcons}${Capitalize<IconParts>}`
+
+export type InputBaseStates = 'error' | 'focus' | 'disabled'
+
+export type InputBaseParts = 
+  'wrapper' |
+  'innerWrapper' |
+  'label' |
+  'errorMessage' |
+  'description' |
+  'labelRow'|
+  InputIconComposition 
+
+export type IconLessInputBaseParts = Exclude<InputBaseParts, InputIconComposition>
+
+export type InputBaseComposition = `${InputBaseParts}:${InputBaseStates}` | InputBaseParts
+
+const createTextInputBaseComposition = createDefaultVariantFactory<InputBaseComposition>()
+
+export const InputBasePresets = includePresets((styles) => createTextInputBaseComposition(() => ({ wrapper: styles })))
+
+
+const getIconStyles = (obj, state) => {
+  return {
+    icon: [
+      obj.icon, 
+      state.focused && obj['icon:focus'],
+      state.hasError && obj['icon:error'], 
+      state.disabled && obj['icon:disabled']
+    ],
+    touchableWrapper: [
+      obj.touchableWrapper, 
+      state.focused && obj['touchableWrapper:focus'],
+      state.hasError && obj['touchableWrapper:error'], 
+      state.disabled && obj['touchableWrapper:disabled']
+    ],
+  }
+
+}
+
+export const useInputBaseStyles = (props: InputBaseProps) => {
+  const {
+    focused,
+    disabled,
+    error,
+    styles
+  } = props
+
+  const hasError = !TypeGuards.isNil(error)
+
+  const variantStyles = useDefaultComponentStyle<'u:InputBase', typeof InputBasePresets>('u:InputBase', {
+    styles,
+    transform: StyleSheet.flatten,
+    rootElement: 'wrapper'
+  })
+
+  const _leftIconStyles = useNestedStylesByKey<ActionIconComposition>('leftIcon', variantStyles)
+  const _rightIconStyles = useNestedStylesByKey<ActionIconComposition>('rightIcon', variantStyles)
+  const _generalIconStyles = useNestedStylesByKey<ActionIconComposition>('icon', variantStyles)
+
+  const generalIconStyles = getIconStyles(_generalIconStyles, { hasError, disabled })
+
+  const leftIconStyles = [
+    generalIconStyles, 
+   getIconStyles(_leftIconStyles, { hasError, disabled, focused })
+  ]
+
+  const rightIconStyles = [
+    generalIconStyles,
+    getIconStyles(_rightIconStyles, { hasError, disabled, focused })
+  ]
+
+  const labelStyle = [
+    variantStyles.label,
+    focused && variantStyles['label:focus'],
+    hasError && variantStyles['label:error'],
+    disabled && variantStyles['label:disabled'],
+    
+  ]
+
+  const errorStyle = [
+    variantStyles.errorMessage,
+    focused && variantStyles['errorMessage:focus'],
+    hasError && variantStyles['errorMessage:error'],
+    disabled && variantStyles['errorMessage:disabled'],
+  ]
+
+  const descriptionStyle = [
+    variantStyles.description,
+    focused && variantStyles['description:focus'],
+    hasError && variantStyles['description:error'],
+    disabled && variantStyles['description:disabled'],
+  ]
+
+  const wrapperStyle = [
+    variantStyles.wrapper,
+    focused && variantStyles['wrapper:focus'],
+    error && variantStyles['wrapper:error'],
+    disabled && variantStyles['wrapper:disabled'],
+  ]
+
+  const innerWrapperStyle = [
+    variantStyles.innerWrapper,
+    focused && variantStyles['innerWrapper:focus'],
+    hasError && variantStyles['innerWrapper:error'],
+    disabled && variantStyles['innerWrapper:disabled'],
+  ]
+
+  const labelRowStyle = [
+    variantStyles.labelRow,
+    focused && variantStyles['labelRow:focus'],
+    hasError && variantStyles['labelRow:error'],
+    disabled && variantStyles['labelRow:disabled'],
+  ]
+
+ return {
+    wrapperStyle,
+    innerWrapperStyle,
+    leftIconStyles,
+    rightIconStyles,
+    labelStyle,
+    errorStyle,
+    descriptionStyle,
+    labelRowStyle
+ }
+}

package/src/components/InputBase/types.ts

@@ -0,0 +1,28 @@
+import { PropsOf } from '@codeleap/common'
+import { StylesOf } from '../../types'
+import { InputBaseComposition } from './styles'
+import { ActionIcon } from '../ActionIcon'
+
+type ActionIconProps = PropsOf<typeof ActionIcon>
+
+type OrderedParts = 'label' | 'description' | 'innerWrapper' | 'error'
+type IconProp = Partial<ActionIconProps> | JSX.Element
+export type InputBaseProps = React.PropsWithChildren<{
+  label?: React.ReactNode
+  error?: React.ReactNode
+  leftIcon?: IconProp
+  rightIcon?: IconProp
+  wrapper?: React.FC<any>
+  wrapperProps?: any
+  innerWrapper?: React.FC<any>
+  innerWrapperProps?: any
+  styles?: StylesOf<InputBaseComposition>
+  description?: React.ReactNode
+  debugName: string
+  focused?: boolean
+  disabled?: boolean
+  order?: OrderedParts[]
+  style?: any
+  labelAsRow?: boolean
+  hideErrorMessage?: boolean
+}>

package/src/components/InputBase/utils.ts

@@ -0,0 +1,42 @@
+import { InputBaseProps } from './types'
+
+type OmitDiff<T1, T2> = {
+  [K in Exclude<keyof T1, keyof T2>]: T1[K]
+} & {
+  [K in keyof T2]: T2[K]
+}
+
+type InputBaseKey = keyof InputBaseProps
+
+export function selectInputBaseProps<T extends InputBaseProps>(props: T): {
+  inputBaseProps: InputBaseProps
+  others: OmitDiff<T, T>
+} {
+  const varList:InputBaseKey[] = [
+    'label',
+    'style',
+    'error',
+    'innerWrapper',
+    'leftIcon',
+    'rightIcon',
+    // 'styles',
+    'description',
+    'wrapper',
+    'children',
+    'innerWrapperProps',
+    'wrapperProps',
+    'disabled',
+    'hideErrorMessage',
+  ]
+
+  const copy = { ...props }
+
+  const result = varList.reduce((acc, key) => {
+    // @ts-ignore
+    acc[key] = copy[key]
+
+    return acc
+  }, {} as InputBaseProps)
+
+  return { inputBaseProps: result, others: copy as OmitDiff<T, T> }
+}

package/src/components/InputLabel/index.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { ComponentVariants, FormTypes, useDefaultComponentStyle } from '@codeleap/common'
 import { StylesOf } from '../../types'
 import { View, ViewProps } from '../View'
-import { InputLabelComposition, InputLabelStyles } from './styles'
+import { InputLabelComposition, InputLabelPresets } from './styles'
 import { Text } from '../Text'
 import { StyleSheet } from 'react-native'
 
@@ -10,13 +10,13 @@ export type InputLabelProps = ViewProps & {
     styles?: StylesOf<InputLabelComposition>
     label?: FormTypes.Label
     required?: boolean
-} & ComponentVariants<typeof InputLabelStyles>
+} & ComponentVariants<typeof InputLabelPresets>
 
 export * from './styles'
 
 export const InputLabel:React.FC<InputLabelProps> = (props) => {
   const { label, required = false, variants = [], styles = {}, style, ...viewProps } = props
-  const variantStyles = useDefaultComponentStyle<'u:InputLabel', typeof InputLabelStyles>('u:InputLabel', {
+  const variantStyles = useDefaultComponentStyle<'u:InputLabel', typeof InputLabelPresets>('u:InputLabel', {
     variants, styles, transform: StyleSheet.flatten,
   })
 

package/src/components/InputLabel/styles.ts

@@ -1,19 +1,7 @@
-import { assignTextStyle, createDefaultVariantFactory } from '@codeleap/common'
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 
 export type InputLabelComposition = 'text' | 'wrapper' | 'asterisk'
 
 const createInputLabelStyle = createDefaultVariantFactory<InputLabelComposition>()
 
-export const InputLabelStyles = {
-  default: createInputLabelStyle((theme) => ({
-    asterisk: {
-      color: theme.colors.negative,
-    },
-    wrapper: {
-      ...theme.presets.row,
-    },
-    text: {
-      ...assignTextStyle('h5')(theme).text,
-    },
-  })),
-}
+export const InputLabelPresets = includePresets(style => createInputLabelStyle(() => ({ wrapper: style, text: style })))

package/src/components/List/PaginationIndicator.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import {
-  assignTextStyle,
   ComponentVariants,
   createDefaultVariantFactory,
   getNestedStylesByKey,
@@ -16,24 +15,8 @@ import { Text } from '../Text'
 export type PaginationIndicatorComposition = 'text' | `loader${Capitalize<ActivityIndicatorComposition>}`
 
 const createPaginationIndicatorStyle = createDefaultVariantFactory<PaginationIndicatorComposition>()
-const presets = includePresets((style) => createPaginationIndicatorStyle(() => ({ loaderWrapper: style, text: style })))
-export const PaginationIndicatorStyles = {
-  ...presets,
-  default: createPaginationIndicatorStyle((theme) => {
-    return {
-      loaderWrapper: {
-        ...theme.presets.center,
-        ...theme.spacing.marginVertical(3),
-      },
-      text: {
-        ...assignTextStyle('h4')(theme).text,
-        ...theme.presets.textCenter,
-        ...theme.spacing.marginVertical(3),
-        ...theme.presets.fullWidth,
-      },
-    }
-  }),
-}
+
+export const PaginationIndicatorPresets = includePresets((style) => createPaginationIndicatorStyle(() => ({ loaderWrapper: style, text: style })))
 
 export type PaginationIndicatorProps = {
   isFetching?: boolean
@@ -42,14 +25,14 @@ export type PaginationIndicatorProps = {
   activityIndicator?: JSX.Element
   styles?: StylesOf<PaginationIndicatorComposition>
   style?: ViewStyle
-} & ComponentVariants<typeof PaginationIndicatorStyles>
+} & ComponentVariants<typeof PaginationIndicatorPresets>
 
 export const PaginationIndicator = (props: PaginationIndicatorProps) => {
   const { hasMore, isFetching, noMoreItemsText, style, activityIndicator, styles = {}, variants = [] } = props
 
   const variantStyles = useDefaultComponentStyle<
     'u:PaginationIndicator',
-    typeof PaginationIndicatorStyles
+    typeof PaginationIndicatorPresets
     >('u:PaginationIndicator', {
       variants,
       styles,

package/src/components/List/index.tsx

@@ -1,31 +1,40 @@
 import * as React from 'react'
 import { forwardRef } from 'react'
 import {
-
   useDefaultComponentStyle,
-
   ComponentVariants,
   useCallback,
+  TypeGuards,
 } from '@codeleap/common'
 
-import { RefreshControl, FlatList, FlatListProps as RNFlatListProps, ListRenderItemInfo, StyleSheet, RefreshControlProps } from 'react-native'
+import { FlatListProps as RNFlatListProps, ListRenderItemInfo, StyleSheet } from 'react-native'
 import { View, ViewProps } from '../View'
 import { EmptyPlaceholder, EmptyPlaceholderProps } from '../EmptyPlaceholder'
-import { ListComposition, ListStyles } from './styles'
+import { RefreshControl, RefreshControlProps } from '../RefreshControl'
+import { ListComposition, ListPresets } from './styles'
 import { StylesOf } from '../../types'
-import { GetKeyboardAwarePropsOptions, useKeyboardAwareView } from '../../utils'
+
+import { KeyboardAwareFlatList } from 'react-native-keyboard-aware-scroll-view'
 
 export type DataboundFlatListPropsTypes = 'data' | 'renderItem' | 'keyExtractor' | 'getItemLayout'
 
+export type AugmentedRenderItemInfo<T> = ListRenderItemInfo<T> & {
+  isFirst: boolean
+  isLast: boolean
+  isOnly: boolean
+}
+
 export type ReplaceFlatlistProps<P, T> = Omit<P, DataboundFlatListPropsTypes> & {
   data: T[]
   keyExtractor?: (item: T, index: number) => string
-  renderItem: (data: ListRenderItemInfo<T>) => React.ReactElement
+  renderItem: (data: AugmentedRenderItemInfo<T>) => React.ReactElement
   onRefresh?: () => void
   getItemLayout?: ((
     data:T,
     index: number,
-) => { length: number; offset: number; index: number })
+  ) => { length: number; offset: number; index: number })
+  fakeEmpty?: boolean
+  loading?: boolean
 }
 
 export * from './styles'
@@ -34,16 +43,23 @@ export * from './PaginationIndicator'
 export type FlatListProps<
   T = any[],
   Data = T extends Array<infer D> ? D : never
-> =RNFlatListProps<Data> &
+> = ReplaceFlatlistProps<RNFlatListProps<Data>, Data> &
   Omit<ViewProps, 'variants'> & {
     separators?: boolean
     placeholder?: EmptyPlaceholderProps
-    keyboardAware?: GetKeyboardAwarePropsOptions
     styles?: StylesOf<ListComposition>
     refreshControlProps?: Partial<RefreshControlProps>
-  } & ComponentVariants<typeof ListStyles>
+    fakeEmpty?: boolean
+    loading?: boolean
+  } & ComponentVariants<typeof ListPresets>
+
+const RenderSeparator = (props: { separatorStyles: ViewProps['style'] }) => {
+  return (
+    <View style={props.separatorStyles}></View>
+  )
+}
 
-const ListCP = forwardRef<FlatList, FlatListProps>(
+const ListCP = forwardRef<KeyboardAwareFlatList, FlatListProps>(
   (flatListProps, ref) => {
     const {
       variants = [],
@@ -55,54 +71,76 @@ const ListCP = forwardRef<FlatList, FlatListProps>(
       placeholder,
       keyboardAware,
       refreshControlProps = {},
+      loading = false,
+      fakeEmpty = loading,
       ...props
     } = flatListProps
 
-    const variantStyles = useDefaultComponentStyle<'u:List', typeof ListStyles>('u:List', {
+    const variantStyles = useDefaultComponentStyle<'u:List', typeof ListPresets>('u:List', {
       variants,
       styles,
       transform: StyleSheet.flatten,
 
     })
 
-    const renderSeparator = useCallback(() => {
-      return (
-        <View style={variantStyles.separator}></View>
-      )
-    }, [])
-
-    const isEmpty = !props.data || !props.data.length
-    const separator = !isEmpty && props?.separators && renderSeparator
+    // const isEmpty = !props.data || !props.data.length
+    const separator = props?.separators && <RenderSeparator separatorStyles={variantStyles.separator}/>
 
-    const Component:any = component || FlatList
     const refreshStyles = StyleSheet.flatten([variantStyles.refreshControl, styles.refreshControl])
 
-    const _listProps = {
-      style: [variantStyles.wrapper, style],
-      contentContainerStyle: variantStyles.content,
-      ref: ref as unknown as FlatList,
-      ItemSeparatorComponent: separator,
-      refreshControl: !!onRefresh && (
-        <RefreshControl
-          refreshing={refreshing}
-          onRefresh={onRefresh}
-          tintColor={refreshStyles?.color}
-          colors={[refreshStyles?.color]}
-          {...refreshControlProps}
-        />
-      ),
-      ListEmptyComponent: <EmptyPlaceholder {...placeholder}/>,
-      ...props,
+    const renderItem = useCallback((data: ListRenderItemInfo<any>) => {
+      if (!props?.renderItem) return null
+      const listLength = props?.data?.length || 0
+
+      const isFirst = data.index === 0
+      const isLast = data.index === listLength - 1
+
+      const isOnly = isFirst && isLast
+
+      return props?.renderItem({
+        ...data,
+        isFirst,
+        isLast,
+        isOnly,
+      })
+    }, [props?.renderItem, props?.data?.length])
+
+    const isEmpty = !props.data || !props.data.length
+
+    const _placeholder = {
+      ...placeholder,
+      loading: TypeGuards.isBoolean(placeholder?.loading) ? placeholder.loading : loading,
     }
-    const keyboard = useKeyboardAwareView()
-    const listProps = keyboard.getKeyboardAwareProps(_listProps, {
-      adapt: 'paddingBottom',
-      baseStyleProp: 'contentContainerStyle',
-      ...keyboardAware,
-    })
+
     return (
-      <Component
-        {...listProps}
+      <KeyboardAwareFlatList
+        style={[
+          variantStyles.wrapper,
+          style,
+          isEmpty && variantStyles['wrapper:empty'],
+        ]}
+        contentContainerStyle={[
+          variantStyles.content,
+          isEmpty && variantStyles['content:empty'],
+        ]}
+        // @ts-expect-error React's refs suck
+        ItemSeparatorComponent={separator}
+        ListHeaderComponentStyle={variantStyles.header}
+
+        refreshControl={!!onRefresh && (
+          <RefreshControl
+            refreshing={refreshing}
+            onRefresh={onRefresh}
+            {...refreshControlProps}
+          />
+        )}
+
+        ListEmptyComponent={<EmptyPlaceholder {..._placeholder}/>}
+        {...props}
+        data={fakeEmpty ? [] : props.data}
+        ref={ ref as React.LegacyRef<KeyboardAwareFlatList> }
+        renderItem={renderItem}
+
       />
     )
   },
@@ -110,5 +148,5 @@ const ListCP = forwardRef<FlatList, FlatListProps>(
 
 export type ListComponentType = <T extends any[] = any[]>(props: FlatListProps<T>) => React.ReactElement
 
-export const List = ListCP as ListComponentType
+export const List = ListCP as unknown as ListComponentType
 

package/src/components/List/styles.ts

@@ -1,25 +1,13 @@
 import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
-import { ScrollComposition, ScrollStyles } from '../Scroll/styles'
+import { ScrollComposition } from '../Scroll/styles'
 
-export type ListComposition = ScrollComposition | 'separator'
 
-const createListStyle = createDefaultVariantFactory<ListComposition>()
+type ListStates = 'empty' | 'loading' 
+
+type ListParts = ScrollComposition | 'separator' | 'header' | 'refreshControl'
 
-const presets = includePresets(style => createListStyle(() => ({ content: style })))
+export type ListComposition = `${ListParts}:${ListStates}` | ListParts
+
+const createListStyle = createDefaultVariantFactory<ListComposition>()
 
-export const ListStyles = {
-  ...presets,
-  default: createListStyle((theme) => {
-    const defaultStyles = ScrollStyles.default(theme)
-    return {
-      ...defaultStyles,
-      separator: {
-        width: '100%',
-        height: theme.spacing.value(1),
-      },
-      content: {
-        flexGrow: 1,
-      },
-    }
-  }),
-}
+export const ListPresets = includePresets(style => createListStyle(() => ({ content: style })))

package/src/components/LoadingOverlay/index.tsx

@@ -1,55 +1,55 @@
 import React, { useRef } from 'react'
-import { ComponentVariants, getNestedStylesByKey, onUpdate, useDefaultComponentStyle, useMemo } from "@codeleap/common"
-import { useDynamicAnimation } from "moti"
-import { StyleSheet } from "react-native"
-import { StylesOf } from "../../types"
-import { ActivityIndicator } from "../ActivityIndicator"
-import { View } from "../View"
-import { LoadingOverlayComposition, LoadingOverlayStyles } from "./styles"
-import {useStaticAnimationStyles} from '../../utils'
+import { ComponentVariants, getNestedStylesByKey, onUpdate, useDefaultComponentStyle, useMemo } from '@codeleap/common'
+import { StyleSheet } from 'react-native'
+import { StylesOf } from '../../types'
+import { ActivityIndicator } from '../ActivityIndicator'
+import { View } from '../View'
+import { LoadingOverlayComposition, LoadingOverlayPresets } from './styles'
+import { useAnimatedVariantStyles } from '../../utils'
 
 export * from './styles'
 
 export type LoadingOverlayProps = React.PropsWithChildren<{
-    variants?: ComponentVariants<typeof LoadingOverlayStyles>['variants']
+    variants?: ComponentVariants<typeof LoadingOverlayPresets>['variants']
     styles?: StylesOf<LoadingOverlayComposition>
     visible?: boolean
 } >
 
-
 export const LoadingOverlay = (props: LoadingOverlayProps) => {
-    const {
-        children,
-        styles,
-        variants,
-        visible
-    } = props
-
-    const variantStyles = useDefaultComponentStyle<'u:LoadingOverlay', typeof LoadingOverlayStyles>('u:LoadingOverlay', {
-        variants,
-        rootElement: 'wrapper',
-        styles,
-        transform: StyleSheet.flatten,
-    })
-
-
-    const loaderStyles = useMemo(() => getNestedStylesByKey('loader', variantStyles), [variantStyles])
-    
-    const wrapperAnimationStates = useStaticAnimationStyles(variantStyles, ['wrapper:hidden','wrapper:visible'])
-    const wrapperAnimation = useDynamicAnimation(() => {
-        return visible ? wrapperAnimationStates["wrapper:visible"] : wrapperAnimationStates["wrapper:hidden"]
-    })
-
-    onUpdate(() => {
-        wrapperAnimation.animateTo(visible ? wrapperAnimationStates["wrapper:visible"] : wrapperAnimationStates["wrapper:hidden"])
-    }, [visible])
-    
-    const transition = useRef(null)
-    if(!transition.current){
-        transition.current = JSON.parse(JSON.stringify(variantStyles["wrapper:transition"]))
-    }
-    return <View style={variantStyles.wrapper} animated state={wrapperAnimation} transition={transition.current}>
-        <ActivityIndicator styles={loaderStyles}/>
-        {children}
-    </View>
-}
+  const {
+    children,
+    styles,
+    variants,
+    visible,
+  } = props
+
+  const variantStyles = useDefaultComponentStyle<'u:LoadingOverlay', typeof LoadingOverlayPresets>('u:LoadingOverlay', {
+    variants,
+    rootElement: 'wrapper',
+    styles,
+    transform: StyleSheet.flatten,
+  })
+
+  const loaderStyles = useMemo(() => getNestedStylesByKey('loader', variantStyles), [variantStyles])
+
+  const wrapperAnimation = useAnimatedVariantStyles({
+    variantStyles,
+    animatedProperties: ['wrapper:visible', 'wrapper:hidden'],
+    updater: (s) => {
+      'worklet'
+      return visible ? s['wrapper:visible'] : s['wrapper:hidden']
+    },
+    transition: variantStyles.transition,
+    dependencies: [visible],
+  })
+ 
+
+  const transition = useRef(null)
+  if (!transition.current) {
+    transition.current = JSON.parse(JSON.stringify(variantStyles['wrapper:transition']))
+  }
+  return <View style={[variantStyles.wrapper, wrapperAnimation]} animated  transition={transition.current}>
+    <ActivityIndicator styles={loaderStyles}/>
+    {children}
+  </View>
+}

package/src/components/LoadingOverlay/styles.ts

@@ -1,32 +1,10 @@
-import { createDefaultVariantFactory, shadeColor } from "@codeleap/common"
-import { ActivityIndicatorComposition } from "../ActivityIndicator"
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { ActivityIndicatorComposition } from '../ActivityIndicator'
 
-type WrapperStates = 'hidden'| 'visible' 
+type WrapperStates = 'hidden'| 'visible'
 
-export type LoadingOverlayComposition = 'wrapper' | `wrapper:${WrapperStates}` | 'wrapper:transition' | `loader${Capitalize<ActivityIndicatorComposition>}` 
+export type LoadingOverlayComposition = 'wrapper' | `wrapper:${WrapperStates}` | 'wrapper:transition' | `loader${Capitalize<ActivityIndicatorComposition>}` | 'transition'
 
 const createLoadingOverlayStyle = createDefaultVariantFactory<LoadingOverlayComposition>()
 
-export const LoadingOverlayStyles = {
-    default: createLoadingOverlayStyle(theme => ({
-        wrapper: {
-            ...theme.presets.center,
-            ...theme.presets.whole,
-            ...theme.presets.absolute,
-            backgroundColor: theme.colors.background
-        },
-        'wrapper:visible': {
-            opacity: 1  
-        },
-        'wrapper:hidden': {
-            opacity: 0   
-        },
-        'wrapper:transition': {
-            opacity: {
-                duration: 900,
-                type: 'timing',
-            },
-
-        }
-    }))
-}
+export const LoadingOverlayPresets = includePresets((styles) => createLoadingOverlayStyle(() => ({ wrapper: styles })))