@codeleap/mobile 3.24.2 → 3.25.0

package/src/components/FileInput/types.ts

@@ -0,0 +1,27 @@
+import { AnyRef, FormTypes } from '@codeleap/common'
+import { DocumentPickerOptions } from 'react-native-document-picker'
+import { Options } from 'react-native-image-crop-picker'
+import { OSAlert } from '../../utils'
+
+export type FileInputImageSource = 'camera' | 'library' | 'fs'
+
+export type FileResult = FormTypes.AnyFile
+
+export type FileInputRef = {
+  openFilePicker: (string?: FileInputImageSource) => Promise<FileResult[]>
+}
+
+export type FileInputProps = {
+  mode: 'hidden' | 'button'
+  onFileSelect?: (files: FileResult[]) => void
+  options?: DocumentPickerOptions<any>
+  ref?: AnyRef<FileInputRef>
+  type?: 'image' | 'anyFile'
+  alertProps?: Parameters<typeof OSAlert.ask>[0]
+  pickerOptions?: Partial<Options>
+  required?: boolean
+  onOpenCamera?: (resolve: (() => void)) => Promise<void>
+  onOpenFileSystem?: (resolve: (() => void)) => Promise<void>
+  onOpenGallery?: (resolve: (() => void)) => Promise<void>
+  onError?: (error: any) => void
+}

package/src/components/Grid/index.tsx

@@ -1,135 +1,103 @@
-import * as React from 'react'
-import { forwardRef } from 'react'
-import {
-  useDefaultComponentStyle,
-  ComponentVariants,
-  useCallback,
-  useCodeleapContext,
-} from '@codeleap/common'
-
-import { StyleSheet, ListRenderItemInfo } from 'react-native'
+import React, { useCallback, forwardRef, ComponentType } from 'react'
+import { ListRenderItemInfo } from 'react-native'
 import { View, ViewProps } from '../View'
 import { EmptyPlaceholder } from '../EmptyPlaceholder'
 import { RefreshControl } from '../RefreshControl'
-import { List } from '../List'
-import { GridPresets } from './styles'
-import { FlatListProps, AugmentedRenderItemInfo } from '../List'
+import { List, ListItem } from '../List'
 import { KeyboardAwareFlatList } from 'react-native-keyboard-aware-scroll-view'
+import { GridProps } from './types'
+import { AnyRecord, AppTheme, IJSX, StyledComponentProps, StyledComponentWithProps, Theme, useTheme } from '@codeleap/styles'
+import { MobileStyleRegistry } from '../../Registry'
+import { useStylesFor } from '../../hooks'
 
 export * from './styles'
+export * from './types'
 
-export type DataboundFlatGridPropsTypes = 'data' | 'renderItem' | 'keyExtractor' | 'getItemLayout'
-
-export type GridAugmentedRenderItemInfo<T> = AugmentedRenderItemInfo<T> & {
-  isFirstInRow: boolean
-  isLastInRow: boolean
-  isOnlyInRow: boolean
+const RenderSeparator = (props: { separatorStyles: ViewProps['style'] }) => {
+  return <View style={props.separatorStyles} />
 }
 
-export type GridProps<
-  T = any[],
-  Data = T extends Array<infer D> ? D : never
-> = Omit<FlatListProps<T, Data>, 'variants' | 'renderItem'> & ComponentVariants<typeof GridPresets> & {
-  spacing?: number
-  itemDimension?: number
-  renderItem: (data: GridAugmentedRenderItemInfo<T>) => React.ReactElement
-}
+export const Grid = forwardRef<KeyboardAwareFlatList, GridProps>((flatGridProps, ref) => {
+  const {
+    style,
+    onRefresh,
+    refreshing,
+    placeholder,
+    refreshControlProps = {},
+    spacing,
+    numColumns,
+    renderItem: RenderItem,
+    ...props
+  } = {
+    ...Grid.defaultProps,
+    ...flatGridProps,
+  }
 
-const RenderSeparator = (props: { separatorStyles: ViewProps['style'] }) => {
-  return (
-    <View style={props.separatorStyles}></View>
-  )
-}
+  const themeSpacing = useTheme(store => (store.current as AppTheme<Theme>)?.spacing)
 
-const defaultProps: Partial<GridProps> = {
-  keyboardShouldPersistTaps: 'handled',
-  refreshControlProps: {},
-}
+  const styles = useStylesFor(Grid.styleRegistryName, style)
+
+  const renderItem = useCallback((data: ListRenderItemInfo<any>) => {
+    if (!RenderItem) return null
+
+    const listLength = props?.data?.length || 0
 
-const GridCP = forwardRef<KeyboardAwareFlatList, GridProps>(
-  (flatGridProps, ref) => {
-    const {
-      variants = [],
-      style,
-      styles = {},
-      onRefresh,
-      refreshing,
-      placeholder,
-      refreshControlProps = {},
-      spacing,
-      numColumns,
-      ...props
-    } = {
-      ...defaultProps,
-      ...flatGridProps,
-    }
-
-    const { Theme } = useCodeleapContext()
-    const variantStyles = useDefaultComponentStyle<'u:Grid', typeof GridPresets>('u:Grid', {
-      variants,
-      styles,
-      transform: StyleSheet.flatten,
-    })
-
-    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
-
-      const idx = data.index + 1
-      const isLastInRow = !isFirst && idx % (numColumns) === 0
-      const isFirstInRow = isFirst || data.index % numColumns === 0
-      const isOnlyInRow = !isFirstInRow && !isLastInRow
-
-      let gap = Theme.spacing.marginRight(spacing / 2)
-      if (isLastInRow) gap = Theme.spacing.marginLeft(spacing / 2)
-      else if (isOnlyInRow) gap = Theme.spacing.marginHorizontal(spacing / 2)
-
-      const _itemProps = { isFirst, isLast, isOnly, isFirstInRow, isLastInRow, isOnlyInRow }
-      const RenderItem = props?.renderItem
-
-      return (
-        <View style={{ ...variantStyles.itemWrapper, ...gap }}>
-          <RenderItem {...data} {..._itemProps} />
-        </View>
-      )
-    }, [props?.renderItem, props?.data?.length])
-
-    const separatorStyles = { height: Theme.spacing.value(spacing), ...variantStyles.separator }
-    const separator = props?.separators || (!!spacing ? <RenderSeparator separatorStyles={separatorStyles} /> : null)
-    const refreshControl = !!onRefresh && <RefreshControl refreshing={refreshing} onRefresh={onRefresh} {...refreshControlProps} />
-    const _gridProps = {
-      ...props,
-      ref: ref,
-      ListEmptyComponent: <EmptyPlaceholder {...placeholder} />,
-      ListHeaderComponentStyle: variantStyles.header,
-      ListFooterComponentStyle: variantStyles.footer,
-      ItemSeparatorComponent: separator,
-      refreshControl,
-      style: [variantStyles.wrapper, style],
-      contentContainerStyle: [variantStyles.content, props?.contentContainerStyle],
-      showsVerticalScrollIndicator: false,
-      numColumns,
-      renderItem,
-    }
+    const isFirst = data.index === 0
+    const isLast = data.index === listLength - 1
+    const isOnly = isFirst && isLast
+
+    const idx = data.index + 1
+    const isLastInRow = !isFirst && idx % (numColumns) === 0
+    const isFirstInRow = isFirst || data.index % numColumns === 0
+    const isOnlyInRow = !isFirstInRow && !isLastInRow
+
+    let gap = themeSpacing?.marginRight?.(spacing / 2)
+    if (isLastInRow) gap = themeSpacing?.marginLeft?.(spacing / 2)
+    else if (isOnlyInRow) gap = themeSpacing?.marginHorizontal?.(spacing / 2)
+
+    const _itemProps = { isFirst, isLast, isOnly, isFirstInRow, isLastInRow, isOnlyInRow }
 
     return (
-      // @ts-ignore
-      <List
-        {..._gridProps}
-      />
+      <View style={[styles.itemWrapper, gap]}>
+        <RenderItem {...data} {..._itemProps} />
+      </View>
     )
-  },
-)
+  }, [RenderItem, props?.data?.length])
 
-export type GridComponentType = (<T extends any[] = any[]>(props: GridProps<T>) => JSX.Element) & {
-  defaultProps?: Partial<GridProps>
-}
+  const separatorStyles = { height: themeSpacing?.value?.(spacing), ...styles.separator }
+  const separator = props?.separators || (!!spacing ? <RenderSeparator separatorStyles={separatorStyles} /> : null)
+  const refreshControl = !!onRefresh && <RefreshControl refreshing={refreshing} onRefresh={onRefresh} {...refreshControlProps} />
 
-export const Grid = GridCP as unknown as GridComponentType
+  return (
+    <List
+      // @ts-expect-error
+      ref={ref}
+      {...props}
+      ListEmptyComponent={<EmptyPlaceholder {...placeholder} />}
+      ListHeaderComponentStyle={styles.header}
+      ListFooterComponentStyle={styles.footer}
+      ItemSeparatorComponent={separator as unknown as ComponentType}
+      refreshControl={refreshControl}
+      style={styles.wrapper}
+      contentContainerStyle={[styles.content, props?.contentContainerStyle]}
+      showsVerticalScrollIndicator={false}
+      numColumns={numColumns}
+      renderItem={renderItem}
+    />
+  )
+}) as StyledComponentWithProps<GridProps>
 
-Grid.defaultProps = defaultProps
+Grid.styleRegistryName = 'Grid'
+Grid.elements = ['wrapper', 'content', 'separator', 'header', 'refreshControl', 'itemWrapper', 'footer']
+Grid.rootElement = 'wrapper'
+
+Grid.withVariantTypes = <S extends AnyRecord>(styles: S) => {
+  return Grid as (<T extends ListItem>(props: StyledComponentProps<GridProps<T>, typeof styles>) => IJSX)
+}
+
+Grid.defaultProps = {
+  keyboardShouldPersistTaps: 'handled',
+  refreshControlProps: {},
+} as Partial<GridProps>
 
+MobileStyleRegistry.registerComponent(Grid)

package/src/components/Grid/styles.ts

@@ -1,8 +1,3 @@
-import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 import { ListComposition } from '../List'
 
 export type GridComposition = ListComposition | 'itemWrapper' | 'footer'
-
-const createGridStyle = createDefaultVariantFactory<GridComposition>()
-
-export const GridPresets = includePresets(style => createGridStyle(() => ({ content: style })))

package/src/components/Grid/types.ts

@@ -0,0 +1,20 @@
+import { StyledProp } from '@codeleap/styles'
+import { FlatListProps, AugmentedRenderItemInfo, ListItem } from '../List'
+import { GridComposition } from './styles'
+
+export type GridAugmentedRenderItemInfo<T> =
+  AugmentedRenderItemInfo<T> &
+  {
+    isFirstInRow: boolean
+    isLastInRow: boolean
+    isOnlyInRow: boolean
+  }
+
+export type GridProps<T extends ListItem = ListItem> =
+  Omit<FlatListProps<T>, 'style' | 'renderItem'> &
+  {
+    spacing?: number
+    itemDimension?: number
+    renderItem: (data: GridAugmentedRenderItemInfo<T>) => React.ReactElement
+    style?: StyledProp<GridComposition>
+  }

package/src/components/Icon/index.tsx

@@ -1,79 +1,34 @@
-import * as React from 'react'
-import {
-  ComponentVariants,
-
-  useDefaultComponentStyle,
-  useCodeleapContext,
-  arePropsEqual,
-  IconPlaceholder,
-  onUpdate,
-  PropsOf,
-  StylesOf,
-  TypeGuards,
-  getNestedStylesByKey,
-} from '@codeleap/common'
-import { StyleSheet } from 'react-native'
-export * from './styles'
-
-import {
-  IconComposition,
-  IconPresets,
-} from './styles'
-import { Badge, BadgeComponentProps } from '../Badge'
+import React from 'react'
+import { arePropsEqual, TypeGuards } from '@codeleap/common'
+import { Badge } from '../Badge'
 import { View } from '../View'
+import { IconProps } from './types'
+import { useNestedStylesByKey, AnyRecord, StyledComponentProps, IJSX, useTheme, StyledComponentWithProps, AppTheme, Theme } from '@codeleap/styles'
+import { MobileStyleRegistry } from '../../Registry'
+import { useStylesFor } from '../../hooks'
 
-export type IconProps = {
-  name: IconPlaceholder
-  style?: any
-  color?: string
-  variants?: ComponentVariants<typeof IconPresets>['variants']
-  wrapperProps?: Partial<PropsOf<typeof View>>
-  size?: number
-  styles?: StylesOf<IconComposition>
-  source?: string
-} & BadgeComponentProps
+export * from './styles'
+export * from './types'
 
 export const IconComponent = (props: IconProps) => {
   const {
     name,
     style,
-    variants,
-    badge = false,
+    badge,
     badgeProps = {},
     wrapperProps = {},
-    styles = {},
     source,
     ...otherProps
-  } = props
-
-  const { Theme, logger } = useCodeleapContext()
-
-  const variantStyles = useDefaultComponentStyle<'u:Icon', typeof IconPresets>('u:Icon', {
-    variants,
-    transform: StyleSheet.flatten,
-    styles: {
-      icon: style,
-      ...styles,
-    },
-    rootElement: 'icon',
-  })
-  const Component = Theme?.icons?.[name] || (source && Theme.icons.RenderSource)
-
-  onUpdate(() => {
-    if (!Component && !!name) {
-      logger.warn(
-        `Icon: No icon found in theme for name "${name}".`,
-        { props: { style, name, variants, variantStyles } },
-        'Component',
-      )
-    } else if (!Component && !!source) {
-      logger.warn('Icon: Cannot render source, no RenderSource component in Theme.icons', {
-        source,
-        props: { style, name, variants, variantStyles },
-        Component,
-      }, 'Component')
-    }
-  }, [name])
+  } = {
+    ...Icon.defaultProps,
+    ...props,
+  }
+
+  const icons = useTheme(store => (store.current as AppTheme<Theme>)?.icons)
+
+  const styles = useStylesFor(Icon.styleRegistryName, style)
+
+  const Component = icons?.[name]
 
   if (!name && !source) {
     return null
@@ -84,32 +39,42 @@ export const IconComponent = (props: IconProps) => {
   }
 
   if (badge || TypeGuards.isNumber(badge)) {
-    const badgeStyles = getNestedStylesByKey('badge', variantStyles)
+    const badgeStyles = useNestedStylesByKey('badge', styles)
 
     const sized = {
-      height: variantStyles.icon?.size || variantStyles.icon?.height || props?.size,
-      width: variantStyles.icon?.size || variantStyles.icon?.width || props?.size,
+      // @ts-expect-error
+      height: styles.icon?.size || styles.icon?.height || props?.size,
+      // @ts-expect-error
+      width: styles.icon?.size || styles.icon?.width || props?.size,
     }
 
-    const wrapperStyle = [
-      sized,
-      (variantStyles.iconBadgeWrapper ?? {}),
-    ]
-
-    return <View {...wrapperProps} style={wrapperStyle}>
-      <Component {...otherProps} style={variantStyles.icon} source={source} />
-      <Badge styles={badgeStyles} badge={badge} {...badgeProps} />
+    return <View {...wrapperProps} style={[sized, styles.iconBadgeWrapper]}>
+      <Component {...otherProps} style={styles.icon} source={source} />
+      <Badge style={badgeStyles} badge={badge} {...badgeProps} />
     </View>
   }
 
-  return <Component {...otherProps} style={variantStyles.icon} source={source} />
+  return <Component {...otherProps} style={styles.icon} source={source} />
 }
 
 function areEqual(prevProps, nextProps) {
-  const check = ['name', 'style', 'variants', 'renderEmptySpace', 'badgeProps', 'badge']
+  const check = ['name', 'style', 'renderEmptySpace', 'badgeProps', 'badge']
   const res = arePropsEqual(prevProps, nextProps, { check })
   return res
 }
 
-export const Icon = React.memo(IconComponent, areEqual) as typeof IconComponent
+export const Icon = React.memo(IconComponent, areEqual) as StyledComponentWithProps<IconProps>
+
+Icon.styleRegistryName = 'Icon'
+Icon.elements = ['icon', 'iconBadgeWrapper', 'badge']
+Icon.rootElement = 'icon'
+
+Icon.defaultProps = {
+  badge: false,
+} as Partial<IconProps>
+
+Icon.withVariantTypes = <S extends AnyRecord>(styles: S) => {
+  return Icon as (props: StyledComponentProps<IconProps, typeof styles>) => IJSX
+}
 
+MobileStyleRegistry.registerComponent(Icon)

package/src/components/Icon/styles.ts

@@ -1,9 +1,3 @@
-import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 import { BadgeComposition } from '../Badge'
 
 export type IconComposition = 'icon' | 'iconBadgeWrapper' | `badge${Capitalize<BadgeComposition>}`
-
-const createIconStyle = createDefaultVariantFactory<IconComposition>()
-
-export const IconPresets = includePresets((styles) => createIconStyle(() => ({ icon: styles })))
-

package/src/components/Icon/types.ts

@@ -0,0 +1,15 @@
+import { AppIcon, StyledProp } from '@codeleap/styles'
+import { BadgeComponentProps } from '../Badge'
+import { ViewProps } from '../View'
+import { IconComposition } from './styles'
+
+export type IconProps =
+  BadgeComponentProps & 
+  {
+    name: AppIcon
+    style?: StyledProp<IconComposition>
+    color?: string
+    wrapperProps?: ViewProps
+    size?: number
+    source?: string
+  }

package/src/components/Image/index.tsx

@@ -1,70 +1,37 @@
-import * as React from 'react'
-import {
-  ComponentVariants,
-  useDefaultComponentStyle,
-  arePropsEqual,
-  FormTypes,
-  TypeGuards,
-  getNestedStylesByKey,
-} from '@codeleap/common'
-import {
-  Image as NativeImage,
-  ImageProps as NativeImageProps,
-  ImageStyle,
-  StyleProp,
-  StyleSheet,
-  TextStyle,
-  ViewStyle,
-} from 'react-native'
-import {
-  ImageComposition,
-  ImagePresets,
-} from './styles'
+import React from 'react'
+import { arePropsEqual, TypeGuards } from '@codeleap/common'
+import { Image as NativeImage } from 'react-native'
 import { useImageSpotlight } from '../ImageView/Spotlight'
 import { Touchable } from '../Touchable'
 import { isFile, toMultipartFile } from '../../utils'
-import { LoadingOverlay, LoadingOverlayProps } from '../LoadingOverlay'
-import { StylesOf } from '../../types'
-import FastImage, { Source } from 'react-native-fast-image'
+import { LoadingOverlay } from '../LoadingOverlay'
+import FastImage from 'react-native-fast-image'
+import { ImageProps } from './types'
+import { AnyRecord, useNestedStylesByKey, IJSX, StyledComponentProps, StyledComponentWithProps } from '@codeleap/styles'
+import { MobileStyleRegistry } from '../../Registry'
+import { useStylesFor } from '../../hooks'
 
 export * from './styles'
+export * from './types'
 
-export type ImageProps = Omit<NativeImageProps, 'source' | 'style'> & {
-  variants?: ComponentVariants<typeof ImagePresets>['variants']
-  fast?: boolean
-  styles?: StylesOf<ImageComposition>
-  style?: StyleProp<ImageStyle | TextStyle | ViewStyle>
-  source:
-    | Source
-    | FormTypes.AnyFile
-  resizeMode?: keyof typeof FastImage.resizeMode
-  spotlight?: string
-  maintainAspectRatio?: boolean
-  withLoadingOverlay?: boolean | ((props: LoadingOverlayProps) => JSX.Element)
-}
-
-export const ImageComponent = (props:ImageProps) => {
+export const Image = React.memo((props: ImageProps) => {
   const {
-    variants,
     style,
-    styles: componentStyleSheet = {},
-    fast = true,
+    fast,
     spotlight = null,
-    resizeMode = 'contain',
+    resizeMode,
     source,
-    withLoadingOverlay = false,
-    maintainAspectRatio = true,
+    withLoadingOverlay,
+    maintainAspectRatio,
     ...imageProps
-  } = props
+  } = {
+    ...Image.defaultProps,
+    ...props,
+  }
 
-  const variantStyles = useDefaultComponentStyle<'u:Image', typeof ImagePresets>('u:Image', {
-    variants,
-    styles: componentStyleSheet,
-    transform: StyleSheet.flatten,
-  })
   const [loading, setLoading] = React.useState(false)
 
-  const styles = StyleSheet.flatten([variantStyles.wrapper, style])
+  const styles = useStylesFor(Image.styleRegistryName, style)
 
   let imSource = source
 
@@ -73,12 +40,14 @@ export const ImageComponent = (props:ImageProps) => {
   } else if (TypeGuards.isString(source)) {
     imSource = { uri: source }
   }
+
   const spotlightActions = useImageSpotlight(spotlight, props.source)
   const Wrapper = !!spotlight ? Touchable : ({ children }) => <>{children}</>
+
   const wrapperProps = {
     onPress: spotlightActions.onImagePressed,
     debugName: `Press spotlight image ${props.source}`,
-    style: [variantStyles.touchable],
+    style: styles.touchable,
     android_ripple: null,
   }
 
@@ -122,23 +91,21 @@ export const ImageComponent = (props:ImageProps) => {
   const Loading = TypeGuards.isFunction(withLoadingOverlay) ? withLoadingOverlay : LoadingOverlay
   const showLoading = !!withLoadingOverlay
 
-  const overlayStyle = React.useMemo(() => getNestedStylesByKey('overlay', variantStyles), [variantStyles])
+  const overlayStyle = useNestedStylesByKey('overlay', styles)
 
   const loadingElement = React.useMemo(() => {
     return showLoading ? (
-      <Loading visible={loading} styles={overlayStyle}/>
-
+      <Loading visible={loading} style={overlayStyle} />
     ) : null
   }, [showLoading, loading])
 
   if (fast) {
     return (
       <Wrapper {...wrapperProps}>
-
         <FastImage
-          style={[aspectRatioStyle, styles]}
+          style={[aspectRatioStyle, styles.wrapper]}
           // @ts-ignore
-          tintColor={styles?.tintColor}
+          tintColor={styles?.wrapper?.tintColor}
           // @ts-ignore
           source={imSource}
           resizeMode={FastImage.resizeMode[resizeMode || 'contain']}
@@ -149,25 +116,38 @@ export const ImageComponent = (props:ImageProps) => {
       </Wrapper>
     )
   }
-  return <Wrapper {...wrapperProps}>
-    <NativeImage
-      style={[aspectRatioStyle, styles]}
-      resizeMode={resizeMode}
-      source={imSource}
-      {...(imageProps as any)}
-      {...loadProps.current}
-    />
-    {
-      loadingElement
-    }
-  </Wrapper>
-}
 
-function areEqual(prevProps, nextProps) {
-  const check = ['source', 'style', 'variants', 'resizeMode', 'fast']
-  const res = arePropsEqual(prevProps, nextProps, { check })
-  return res
+  return (
+    <Wrapper {...wrapperProps}>
+      <NativeImage
+        resizeMode={resizeMode}
+        source={imSource}
+        {...(imageProps as any)}
+        {...loadProps.current}
+        style={[aspectRatioStyle, styles.wrapper]}
+      />
+
+      {loadingElement}
+    </Wrapper>
+  )
+}, (prevProps, nextProps) => {
+  const equal = arePropsEqual(prevProps, nextProps, { check: ['source', 'style', 'resizeMode', 'fast'] })
+  return equal
+}) as StyledComponentWithProps<ImageProps>
+
+Image.styleRegistryName = 'Image'
+Image.elements = ['wrapper', 'touchable', 'overlay']
+Image.rootElement = 'wrapper'
+
+Image.withVariantTypes = <S extends AnyRecord>(styles: S) => {
+  return Image as (props: StyledComponentProps<ImageProps, typeof styles>) => IJSX
 }
 
-export const Image = React.memo(ImageComponent, areEqual) as typeof ImageComponent
+Image.defaultProps = {
+  fast: true,
+  resizeMode: 'contain',
+  withLoadingOverlay: false,
+  maintainAspectRatio: true,
+}
 
+MobileStyleRegistry.registerComponent(Image)

package/src/components/Image/styles.ts

@@ -1,8 +1,3 @@
-import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
-import { LoadingOverlayComposition } from '../LoadingOverlay/styles'
+import { LoadingOverlayComposition } from '../LoadingOverlay'
 
 export type ImageComposition = 'wrapper' | 'touchable' | `overlay${Capitalize<LoadingOverlayComposition>}`
-const createImageStyle = createDefaultVariantFactory<ImageComposition>()
-
-export const ImagePresets = includePresets((styles) => createImageStyle(() => ({ wrapper: styles, touchable: styles })))
-