@helpwave/hightide-native 0.3.2 → 0.5.0

package/package.json

@@ -10,7 +10,7 @@
     "access": "public"
   },
   "license": "AGPL-3.0-only",
-  "version": "0.3.2",
+  "version": "0.5.0",
   "type": "module",
   "files": [
     "src"
@@ -39,11 +39,15 @@
     "./types": {
       "types": "./src/types/index.ts",
       "default": "./src/types/index.ts"
+    },
+    "./utils": {
+      "types": "./src/utils/index.ts",
+      "default": "./src/utils/index.ts"
     }
   },
   "dependencies": {
     "lucide-react-native": "0.561.0",
-    "@helpwave/hightide-design": "0.3.1",
+    "@helpwave/hightide-design": "0.5.0",
     "@helpwave/hightide-utils": "0.1.0"
   },
   "peerDependencies": {

package/src/components/chat/ChatAttachmentMessageBubble.tsx

@@ -57,7 +57,7 @@ const mergeBubbleStyleOverwrite = <TStyle extends StyleProp<ViewStyle> | object>
   tokenOverride: TStyle,
   userOverwrite?: StyleOverwrite<ChatMessageBubbleState, TStyle>
 ): StyleOverwrite<ChatMessageBubbleState, TStyle> => (
-    (prev, state) => {
+    (state, prev) => {
       const withTokenOverride = {
         ...(prev as object),
         ...(tokenOverride as object),
@@ -68,7 +68,7 @@ const mergeBubbleStyleOverwrite = <TStyle extends StyleProp<ViewStyle> | object>
       }
 
       if (typeof userOverwrite === 'function') {
-        return userOverwrite(withTokenOverride, state)
+        return userOverwrite(state, withTokenOverride)
       }
 
       return {
@@ -196,16 +196,16 @@ export const ChatAttachmentMessageBubble = ({
         accessibilityLabel={downloadLabel}
         disabled={onDownload == null}
         onPress={onDownload}
-        containerStyle={(_, pressableState) => (
+        style={(pressableState) => (
           contentResolvers.container(pressableState, contentContainerStyle)
         )}
-        stateLayerStyle={(_, pressableState) => (
+        stateLayerStyle={(pressableState) => (
           contentResolvers.stateLayer(pressableState)
         )}
-        textStyle={(_, pressableState) => (
+        textStyle={(pressableState) => (
           contentResolvers.text(pressableState)
         )}
-        iconStyle={(_, pressableState) => (
+        iconStyle={(pressableState) => (
           contentResolvers.icon(pressableState)
         )}
       >

package/src/components/chat/ChatConversationRow.tsx

@@ -8,9 +8,7 @@ import {
 } from 'react'
 import {
   View,
-  type PressableProps,
-  type StyleProp,
-  type ViewStyle
+  type PressableProps
 } from 'react-native'
 import { HightideIconRegistry } from '../../icons/HightideIconRegistry'
 import { ThemedIcon } from '../visualization-and-display/ThemedIcon'
@@ -46,8 +44,7 @@ export type ChatConversationRowProps = Omit<PressableProps, 'children' | 'style'
   unreadCount?: number,
   isSelected?: boolean,
   sentIndicator?: ChatConversationSentIndicator,
-  style?: StyleProp<ViewStyle>,
-  rowStyle?: StyleOverwrite<PressableState, PressableContainerStyle>,
+  style?: StyleOverwrite<PressableState, PressableContainerStyle>,
   contentContainerStyle?: StyleOverwrite<ChatConversationRowState, ChatConversationRowContentContainerStyle>,
   headerRowStyle?: StyleOverwrite<ChatConversationRowState, ChatConversationRowHeaderRowStyle>,
   messageRowStyle?: StyleOverwrite<ChatConversationRowState, ChatConversationRowMessageRowStyle>,
@@ -83,7 +80,6 @@ export const ChatConversationRow = ({
   sentIndicator,
   disabled,
   style,
-  rowStyle,
   contentContainerStyle,
   headerRowStyle,
   messageRowStyle,
@@ -141,28 +137,28 @@ export const ChatConversationRow = ({
 
     return cloneElement(avatarElement, {
       size: avatarSize,
-      avatarStyle: (_, avatarState) => avatarTheme.container(
+      avatarStyle: (avatarState) => avatarTheme.container(
         {
           ...avatarState,
           size: avatarSize,
         },
         avatarStyle ?? avatarElement.props.avatarStyle
       ),
-      imageStyle: (_, avatarState) => avatarTheme.image(
+      imageStyle: (avatarState) => avatarTheme.image(
         {
           ...avatarState,
           size: avatarSize,
         },
         avatarElement.props.imageStyle
       ),
-      textStyle: (_, avatarState) => avatarTheme.text(
+      textStyle: (avatarState) => avatarTheme.text(
         {
           ...avatarState,
           size: avatarSize,
         },
         avatarElement.props.textStyle
       ),
-      iconStyle: (_, avatarState) => avatarTheme.icon(
+      iconStyle: (avatarState) => avatarTheme.icon(
         {
           ...avatarState,
           size: avatarSize,
@@ -176,23 +172,22 @@ export const ChatConversationRow = ({
     <ThemedPressable
       {...props}
       disabled={disabled}
-      style={style}
-      containerStyle={(_, pressableState) => {
+      style={(pressableState) => {
         const state = resolveState(pressableState as PressableInteraction)
         return theme.components.chat.conversationRow.pressable(state).container(
           pressableState,
-          rowStyle
+          style
         )
       }}
-      stateLayerStyle={(_, pressableState) => {
+      stateLayerStyle={(pressableState) => {
         const state = resolveState(pressableState as PressableInteraction)
         return theme.components.chat.conversationRow.pressable(state).stateLayer(pressableState)
       }}
-      textStyle={(_, pressableState) => {
+      textStyle={(pressableState) => {
         const state = resolveState(pressableState as PressableInteraction)
         return theme.components.chat.conversationRow.pressable(state).text(pressableState)
       }}
-      iconStyle={(_, pressableState) => {
+      iconStyle={(pressableState) => {
         const state = resolveState(pressableState as PressableInteraction)
         return theme.components.chat.conversationRow.pressable(state).icon(pressableState)
       }}
@@ -228,21 +223,23 @@ export const ChatConversationRow = ({
                 )}
               </View>
               <View style={resolvedMessageRow}>
-                {sentIndicator && (
-                  <ThemedIcon
-                    icon={sentIndicatorIcon}
-                    size={resolvedSentIndicator.size}
-                    strokeWidth={resolvedSentIndicator.strokeWidth}
-                    color={resolvedSentIndicator.color}
-                  />
-                )}
-                {preview != null && (
-                  typeof preview === 'string' || typeof preview === 'number' ? (
-                    <ThemedText style={resolvedPreview} numberOfLines={1}>{preview}</ThemedText>
-                  ) : (
-                    preview
-                  )
-                )}
+                <View style={{ flexDirection: 'row', alignItems: 'center', flex: 1, gap: theme.spacing.xs  /* TODO replace this with a theme style */ }}>
+                  {sentIndicator && (
+                    <ThemedIcon
+                      icon={sentIndicatorIcon}
+                      size={resolvedSentIndicator.size}
+                      strokeWidth={resolvedSentIndicator.strokeWidth}
+                      color={resolvedSentIndicator.color}
+                    />
+                  )}
+                  {preview != null && (
+                    typeof preview === 'string' || typeof preview === 'number' ? (
+                      <ThemedText style={resolvedPreview} numberOfLines={1}>{preview}</ThemedText>
+                    ) : (
+                      preview
+                    )
+                  )}
+                </View>
                 {isUnread && (
                   <View style={unreadBadge}>
                     <ThemedText style={unreadBadgeText}>{unreadCount}</ThemedText>

package/src/components/chat/ChatMessageComposer.tsx

@@ -20,6 +20,7 @@ import type {
   ChatMessageComposerStyle
 } from '../../theme/types/components/chat'
 import type { StyleOverwrite } from '../../theme/types/resolver'
+import { StyleAdapterUtils } from '../../theme'
 
 export type ChatMessageComposerProps = Omit<ViewProps, 'style'> & {
   value?: string,
@@ -108,8 +109,8 @@ export const ChatMessageComposer = ({
           disabled={disabled || !(value ?? '').trim()}
           size="sm"
           onPress={send}
-          containerStyle={(prev) => ({ ...prev, borderRadius: 999 })}
-          stateLayerStyle={(prev) => ({ ...prev, borderRadius: 999 })}
+          style={{ ...StyleAdapterUtils.borderRadius({ type: 'all', value: 999 }) }}
+          stateLayerStyle={{ ...StyleAdapterUtils.borderRadius({ type: 'all', value: 999 }) }}
         />
       </View>
     </View>

package/src/components/chat/ChatQuickReplyChip.tsx

@@ -2,7 +2,6 @@ import {
   useMemo,
   type ReactNode
 } from 'react'
-import type { StyleProp, ViewStyle } from 'react-native'
 
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
 import {
@@ -25,8 +24,7 @@ export type ChatQuickReplyChipProps = Omit<
 > & {
   isActive?: boolean,
   children?: ReactNode,
-  style?: StyleProp<ViewStyle>,
-  containerStyle?: StyleOverwrite<PressableState, PressableContainerStyle>,
+  style?: StyleOverwrite<PressableState, PressableContainerStyle>,
   textStyle?: StyleOverwrite<PressableState, PressableTextStyle>,
   iconStyle?: StyleOverwrite<PressableState, PressableIconStyle>,
 }
@@ -36,7 +34,6 @@ export const ChatQuickReplyChip = ({
   children,
   disabled,
   style,
-  containerStyle,
   textStyle,
   iconStyle,
   ...props
@@ -52,17 +49,16 @@ export const ChatQuickReplyChip = ({
     <ThemedPressable
       {...props}
       disabled={disabled}
-      style={style}
-      containerStyle={(_, pressableState) => (
-        pressableResolvers.container(pressableState, containerStyle)
+      style={(pressableState) => (
+        pressableResolvers.container(pressableState, style)
       )}
-      stateLayerStyle={(_, pressableState) => (
+      stateLayerStyle={(pressableState) => (
         pressableResolvers.stateLayer(pressableState)
       )}
-      textStyle={(_, pressableState) => (
+      textStyle={(pressableState) => (
         pressableResolvers.text(pressableState, textStyle)
       )}
-      iconStyle={(_, pressableState) => (
+      iconStyle={(pressableState) => (
         pressableResolvers.icon(pressableState, iconStyle)
       )}
     >

package/src/components/chat/ChatThreadHeader.tsx

@@ -114,44 +114,44 @@ export const ChatThreadHeader = ({
       <ThemedPressable
         onPress={onPress}
         disabled={disabled}
-        containerStyle={(_, pressableState) => (
+        style={(pressableState) => (
           pressableResolvers.container(pressableState, pressableContainerStyle)
         )}
-        stateLayerStyle={(_, pressableState) => (
+        stateLayerStyle={(pressableState) => (
           pressableResolvers.stateLayer(pressableState)
         )}
-        textStyle={(_, pressableState) => (
+        textStyle={(pressableState) => (
           pressableResolvers.text(pressableState)
         )}
-        iconStyle={(_, pressableState) => (
+        iconStyle={(pressableState) => (
           pressableResolvers.icon(pressableState)
         )}
       >
         <Avatar
           {...resolvedAvatar}
           size={avatarSize}
-          avatarStyle={(_, avatarState) => avatarTheme.container(
+          avatarStyle={(avatarState) => avatarTheme.container(
             {
               ...avatarState,
               size: avatarSize,
             },
             resolvedAvatar.avatarStyle
           )}
-          imageStyle={(_, avatarState) => avatarTheme.image(
+          imageStyle={(avatarState) => avatarTheme.image(
             {
               ...avatarState,
               size: avatarSize,
             },
             resolvedAvatar.imageStyle
           )}
-          textStyle={(_, avatarState) => avatarTheme.text(
+          textStyle={(avatarState) => avatarTheme.text(
             {
               ...avatarState,
               size: avatarSize,
             },
             resolvedAvatar.textStyle
           )}
-          iconStyle={(_, avatarState) => avatarTheme.icon(
+          iconStyle={(avatarState) => avatarTheme.icon(
             {
               ...avatarState,
               size: avatarSize,

package/src/components/user-interaction/Button.tsx

@@ -2,9 +2,7 @@ import { Fragment, forwardRef } from 'react'
 import {
   Pressable,
   View,
-  type PressableProps,
-  type StyleProp,
-  type ViewStyle
+  type PressableProps
 } from 'react-native'
 
 import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
@@ -13,7 +11,7 @@ import type { ComponentSize, ButtonVariant } from '@helpwave/hightide-design/sem
 import { ContentThemeOverrideProvider } from '../../global-contexts/content-theme/ContentThemeProvider'
 import { useDebugContext } from '../../global-contexts/debug'
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
-import type { IconComponent } from '../../icons/types'
+import type { IconComponent, IconStyle } from '../../icons/types'
 import type {
   ButtonState,
   ButtonStyle,
@@ -41,10 +39,10 @@ export type ButtonProps = Omit<PressableProps, 'children' | 'style'> & {
   children: string,
   leadingIcon?: IconComponent,
   trailingIcon?: IconComponent,
-  style?: StyleProp<ViewStyle>,
-  containerStyle?: StyleOverwrite<ButtonState, ButtonStyle>,
+  style?: StyleOverwrite<ButtonState, ButtonStyle>,
   stateLayerStyle?: StyleOverwrite<ButtonState, ButtonStyle>,
   textStyle?: StyleOverwrite<ButtonState, ButtonTextStyle>,
+  iconStyle?: StyleOverwrite<ButtonState, IconStyle>,
 }
 
 type PressableInteraction = {
@@ -63,9 +61,9 @@ export const Button = forwardRef<React.ComponentRef<typeof Pressable>, ButtonPro
   leadingIcon,
   trailingIcon,
   style,
-  containerStyle,
   stateLayerStyle,
   textStyle,
+  iconStyle,
   hitSlop: providedHitSlop,
   onLayout: providedOnLayout,
   ...props
@@ -98,16 +96,13 @@ export const Button = forwardRef<React.ComponentRef<typeof Pressable>, ButtonPro
       onLayout={onLayout}
       style={(pressableState) => {
         const state = resolveState(pressableState as PressableInteraction)
-        return [
-          theme.components.button.container(state, containerStyle),
-          style,
-        ]
+        return theme.components.button.container(state, style)
       }}
     >
       {(pressableState) => {
         const state = resolveState(pressableState as PressableInteraction)
         const resolvedText = theme.components.button.text(state, textStyle)
-        const resolvedIcon = theme.components.button.icon(state)
+        const resolvedIcon = theme.components.button.icon(state, iconStyle)
 
         return (
           <Fragment>

package/src/components/user-interaction/IconButton.tsx

@@ -2,9 +2,7 @@ import { Fragment, forwardRef } from 'react'
 import {
   Pressable,
   View,
-  type PressableProps,
-  type StyleProp,
-  type ViewStyle
+  type PressableProps
 } from 'react-native'
 import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
 import type {
@@ -20,7 +18,7 @@ import type {
   IconButtonStyle
 } from '../../theme/types/components/iconButton'
 import type { StyleOverwrite } from '../../theme/types/resolver'
-import type { IconComponent } from '../../icons'
+import type { IconComponent, IconStyle } from '../../icons'
 import { createHitBoxOverlayStyle } from '../../utils/hitBoxOverlay'
 import { useMinimumTouchTargetHitSlop } from '../../utils/minimumTouchTargetHitSlop'
 import { ThemedIcon } from '../visualization-and-display'
@@ -40,9 +38,9 @@ export type IconButtonProps = Omit<PressableProps, 'children' | 'style'> & {
   variant?: IconButtonVariant,
   icon: IconComponent,
   accessibilityLabel: string,
-  style?: StyleProp<ViewStyle>,
-  containerStyle?: StyleOverwrite<IconButtonState, IconButtonStyle>,
+  style?: StyleOverwrite<IconButtonState, IconButtonStyle>,
   stateLayerStyle?: StyleOverwrite<IconButtonState, IconButtonStyle>,
+  iconStyle?:  StyleOverwrite<IconButtonState, IconStyle>,
 }
 
 type PressableInteraction = {
@@ -60,8 +58,8 @@ export const IconButton = forwardRef<React.ComponentRef<typeof Pressable>, IconB
   disabled,
   accessibilityLabel,
   style,
-  containerStyle,
   stateLayerStyle,
+  iconStyle,
   hitSlop: providedHitSlop,
   onLayout: providedOnLayout,
   ...props
@@ -96,15 +94,12 @@ export const IconButton = forwardRef<React.ComponentRef<typeof Pressable>, IconB
       onLayout={onLayout}
       style={(pressableState) => {
         const state = resolveState(pressableState as PressableInteraction)
-        return [
-          theme.components.iconButton.container(state, containerStyle),
-          style,
-        ]
+        return theme.components.iconButton.container(state, style)
       }}
     >
       {(pressableState) => {
         const state = resolveState(pressableState as PressableInteraction)
-        const resolvedIcon = theme.components.iconButton.icon(state)
+        const resolvedIcon = theme.components.iconButton.icon(state, iconStyle)
 
         return (
           <Fragment>

package/src/components/user-interaction/MultiSelect.tsx

@@ -67,6 +67,8 @@ export const MultiSelect = ({
     onEditComplete,
   })
 
+  const isSearchVisible = showSearch && options.length >= 6
+
   const selectedOptions = useMemo(() => {
     return options.filter((option) => multiSelect.isSelected(option.id))
   }, [multiSelect, options])
@@ -88,8 +90,8 @@ export const MultiSelect = ({
     [multiSelectTheme]
   )
   const resolvedMenuStyle = useMemo(
-    () => multiSelectTheme.menu({ hasSearch: showSearch }),
-    [multiSelectTheme, showSearch]
+    () => multiSelectTheme.menu({ hasSearch: isSearchVisible }),
+    [multiSelectTheme, isSearchVisible]
   )
   const resolvedHeaderStyle = useMemo(
     () => multiSelectTheme.header({}),
@@ -103,7 +105,7 @@ export const MultiSelect = ({
     () => options.filter((option) => multiSelect.visibleOptionIds.includes(option.id)),
     [options, multiSelect.visibleOptionIds]
   )
-  const showEmptySearchResults = showSearch
+  const showEmptySearchResults = isSearchVisible
     && multiSelect.searchQuery.trim().length > 0
     && visibleOptions.length === 0
 
@@ -210,7 +212,7 @@ export const MultiSelect = ({
             style={resolvedMenuStyle}
             onPress={(event) => event.stopPropagation()}
           >
-            {showSearch && (
+            {isSearchVisible && (
               <View style={resolvedHeaderStyle}>
                 <SearchBar
                   value={multiSelect.searchQuery}
@@ -260,7 +262,8 @@ export const MultiSelect = ({
                         <View style={multiSelectTheme.checkbox(optionState)}>
                           <ThemedIcon
                             icon={HightideIconRegistry.Check}
-                            size="sm"
+                            size={checkboxIcon.size}
+                            strokeWidth={checkboxIcon.strokeWidth}
                             color={checkboxIcon.color}
                           />
                         </View>

package/src/components/user-interaction/Select.tsx

@@ -20,7 +20,6 @@ import {
   type UseSelectOption
 } from '../../hooks/useSelect'
 import type { SelectState } from '../../theme/types/components/select'
-import type { Color } from '../../theme/types/color'
 import type {
   FormFieldDataHandling,
   FormFieldInteractionStates
@@ -69,6 +68,8 @@ export const Select = ({
     onEditComplete,
   })
 
+  const isSearchVisible = showSearch && options.length >= 6
+
   const selectedLabel = useMemo(() => {
     const selected = options.find((option) => option.id === select.value)
     return selected?.label ?? placeholder
@@ -95,8 +96,8 @@ export const Select = ({
     [selectTheme]
   )
   const resolvedMenuStyle = useMemo(
-    () => selectTheme.menu({ hasSearch: showSearch }),
-    [selectTheme, showSearch]
+    () => selectTheme.menu({ hasSearch: isSearchVisible }),
+    [selectTheme, isSearchVisible]
   )
   const resolvedHeaderStyle = useMemo(
     () => selectTheme.header({}),
@@ -106,7 +107,7 @@ export const Select = ({
     () => selectTheme.emptyText({}),
     [selectTheme]
   )
-  const showEmptySearchResults = showSearch
+  const showEmptySearchResults = isSearchVisible
     && select.searchQuery.trim().length > 0
     && visibleOptions.length === 0
 
@@ -181,7 +182,7 @@ export const Select = ({
             style={resolvedMenuStyle}
             onPress={(event) => event.stopPropagation()}
           >
-            {showSearch && (
+            {isSearchVisible && (
               <View style={resolvedHeaderStyle}>
                 <SearchBar
                   value={select.searchQuery}
@@ -220,16 +221,14 @@ export const Select = ({
                       color={optionColor}
                       disabled={item.disabled}
                       onPress={() => select.selectValue(item.id)}
-                      trailing={isSelected
-                        ? (
-                          <ThemedIcon
-                            icon={HightideIconRegistry.Check}
-                            size={checkIcon.size}
-                            strokeWidth={checkIcon.strokeWidth}
-                            color={checkIcon.color as Color | undefined}
-                          />
-                        )
-                        : undefined}
+                      leading={(
+                        <ThemedIcon
+                          icon={HightideIconRegistry.Check}
+                          size={checkIcon.size}
+                          strokeWidth={checkIcon.strokeWidth}
+                          color={isSelected ? theme.colors.primary.color : 'transparent'}
+                        />
+                      )}
                     />
                   )
                 }}

package/src/components/user-interaction/ThemedPressable.tsx

@@ -33,13 +33,13 @@ export const ThemedPressableUtil = {
   coloringColorVariants: ['normal', 'tonal', 'transparent'] as const satisfies readonly ColoringColorVariant[],
 }
 
-export type ThemedPressableProps = PressableProps & {
+export type ThemedPressableProps = Omit<PressableProps, 'style'> & {
   size?: ThemedPressableSize,
   color?: ColorPairToken,
   coloringStyle?: ColoringStyle,
   coloringColorVariant?: ColoringColorVariant,
   hasAdditionalHorizontalPadding?: boolean,
-  containerStyle?: StyleOverwrite<ThemedPressableState, ThemedPressableStyle>,
+  style?: StyleOverwrite<ThemedPressableState, ThemedPressableStyle>,
   stateLayerStyle?: StyleOverwrite<ThemedPressableState, ThemedPressableStyle>,
   iconStyle?: StyleOverwrite<ThemedPressableState, ThemedPressableIconStyle>,
   textStyle?: StyleOverwrite<ThemedPressableState, ThemedPressableTextStyle>,
@@ -61,7 +61,6 @@ export const ThemedPressable = forwardRef<React.ComponentRef<typeof Pressable>,
   hasAdditionalHorizontalPadding = false,
   disabled,
   style,
-  containerStyle,
   stateLayerStyle,
   iconStyle,
   textStyle,
@@ -98,21 +97,18 @@ export const ThemedPressable = forwardRef<React.ComponentRef<typeof Pressable>,
       hitSlop={hitSlop}
       onLayout={onLayout}
       style={(pressableState) => {
-        const state = resolveState(pressableState as PressableInteraction)
-        const resolvedStyle = typeof style === 'function' ? style(pressableState) : style
-        return [
-          theme.components.themedPressable.container(state, containerStyle),
-          resolvedStyle,
-        ]
+        const state = resolveState(pressableState)
+        return theme.components.themedPressable.container(state, style)
       }}
     >
       {(pressableState) => {
-        const state = resolveState(pressableState as PressableInteraction)
+        const state = resolveState(pressableState)
         const resolvedText = theme.components.themedPressable.text(state, textStyle)
         const resolvedIcon = theme.components.themedPressable.icon(state, iconStyle)
         const resolvedChildren = typeof children === 'function'
           ? children(pressableState)
           : children
+        const backroundColor = theme.components.themedPressable.container(state, style).backgroundColor
 
         return (
           <Fragment>
@@ -128,6 +124,7 @@ export const ThemedPressable = forwardRef<React.ComponentRef<typeof Pressable>,
             />
             <ContentThemeOverrideProvider
               foreground={resolvedText.color}
+              background={backroundColor}
               textStyle={resolvedText}
               iconStyle={resolvedIcon}
             >

package/src/components/visualization-and-display/Avatar.tsx

@@ -226,19 +226,19 @@ export const AvatarGroup = ({
               isGrouped
               groupIndex={index}
               ImageComponent={avatar.ImageComponent ?? ImageComponent}
-              avatarStyle={(_, state) => avatarResolvers.container({
+              avatarStyle={(state) => avatarResolvers.container({
                 ...state,
                 ...avatarState,
               })}
-              imageStyle={(_, state) => avatarResolvers.image({
+              imageStyle={(state) => avatarResolvers.image({
                 ...state,
                 ...avatarState,
               })}
-              textStyle={(_, state) => avatarResolvers.text({
+              textStyle={(state) => avatarResolvers.text({
                 ...state,
                 ...avatarState,
               })}
-              iconStyle={(_, state) => avatarResolvers.icon({
+              iconStyle={(state) => avatarResolvers.icon({
                 ...state,
                 ...avatarState,
               })}
@@ -294,10 +294,10 @@ export const AvatarWithStatus = ({
         {...avatarProps}
         size={size}
         color={color}
-        avatarStyle={(_, state) => avatarResolvers.container(state, avatarStyle)}
-        imageStyle={(_, state) => avatarResolvers.image(state, imageStyle)}
-        textStyle={(_, state) => avatarResolvers.text(state, textStyle)}
-        iconStyle={(_, state) => avatarResolvers.icon(state, iconStyle)}
+        avatarStyle={(state) => avatarResolvers.container(state, avatarStyle)}
+        imageStyle={(state) => avatarResolvers.image(state, imageStyle)}
+        textStyle={(state) => avatarResolvers.text(state, textStyle)}
+        iconStyle={(state) => avatarResolvers.icon(state, iconStyle)}
       />
       <View style={resolvedStatusDot} />
     </View>

package/src/components/visualization-and-display/Chip.tsx

@@ -82,6 +82,7 @@ export const Chip = ({
     >
       <ContentThemeOverrideProvider
         foreground={resolvedTextStyle.color}
+        background={resolvedChipStyle.backgroundColor}
         textStyle={resolvedTextStyle}
         iconStyle={resolvedIconStyle}
       >