@helpwave/hightide-native 0.6.0 → 0.7.0

package/src/theme/adapters/style-adapter-utils.ts

@@ -1,4 +1,5 @@
 import {
+  PixelRatio,
   StyleSheet,
   type StyleProp,
   type TextStyle,
@@ -10,14 +11,16 @@ import type {
   BorderRadiusToken,
   BorderToken,
   ContainerTokens,
-  CrossAxisAligmentToken,
+  CrossAxisAlignmentToken,
   CrossAxisLineAligmentToken,
   IconTokens,
   LayoutDirectionToken,
   MainAxisAligmentToken,
   MarginToken,
   PaddingToken,
-  TextStyleTokens
+  PositioningToken,
+  TextStyleTokens,
+  TransformTokens
 } from '@helpwave/hightide-design/component-token-resolvers'
 import {
   defaultWritingMode,
@@ -25,6 +28,8 @@ import {
 } from '@helpwave/hightide-design/component-token-resolvers'
 import type { ShadowToken } from '@helpwave/hightide-design/theme-tokens'
 import type { IconStyle } from '../../icons'
+import type { SingleOrArray } from '@helpwave/hightide-utils/utils'
+import { ArrayUtil } from '@helpwave/hightide-utils/utils'
 
 function getStyleProperty<
   T extends ViewStyle,
@@ -87,19 +92,19 @@ const toFlexStartEnd = (
 }
 
 const shadowStyleAdapter = (
-  shadow?: ShadowToken
+  shadow?: SingleOrArray<ShadowToken>
 ): ViewStyle['boxShadow'] | undefined => {
   if (shadow === undefined) {
     return undefined
   }
 
-  return [{
+  return ArrayUtil.resolveSingleOrArray(shadow).map((shadow) => ({
     color: shadow.color,
     offsetX: shadow.x,
     offsetY: shadow.y,
     blurRadius: shadow.blur,
     spreadDistance: shadow.spread,
-  }]
+  }))
 }
 
 const flexDirectionStyleAdapter = (
@@ -127,7 +132,7 @@ const justifyContentStyleAdapter = (
 }
 
 const alignItemsStyleAdapter = (
-  alignment?: CrossAxisAligmentToken
+  alignment?: CrossAxisAlignmentToken
 ): ViewStyle['alignItems'] | undefined => {
   if (alignment === undefined) {
     return undefined
@@ -141,7 +146,7 @@ const alignItemsStyleAdapter = (
 }
 
 const alignSelfStyleAdapter = (
-  alignment?: CrossAxisAligmentToken
+  alignment?: CrossAxisAlignmentToken
 ): ViewStyle['alignSelf'] | undefined => {
   if (alignment === undefined) {
     return undefined
@@ -194,12 +199,12 @@ const borderRadiusStyleAdapter = (
     }
   }
 
-  return {
+  return defined({
     borderTopLeftRadius: borderRadius.topLeft,
     borderTopRightRadius: borderRadius.topRight,
     borderBottomLeftRadius: borderRadius.bottomLeft,
     borderBottomRightRadius: borderRadius.bottomRight,
-  }
+  })
 }
 
 const borderWidthStyleAdapter = (
@@ -216,12 +221,12 @@ const borderWidthStyleAdapter = (
 
   const sides = resolveDirectionalTokens([width], defaultWritingMode)
 
-  return {
+  return defined({
     borderTopWidth: sides.top,
     borderRightWidth: sides.right,
     borderBottomWidth: sides.bottom,
     borderLeftWidth: sides.left,
-  }
+  })
 }
 
 const borderColorStyleAdapter = (
@@ -238,12 +243,12 @@ const borderColorStyleAdapter = (
 
   const sides = resolveDirectionalTokens([color], defaultWritingMode)
 
-  return {
+  return defined({
     borderTopColor: sides.top,
     borderRightColor: sides.right,
     borderBottomColor: sides.bottom,
     borderLeftColor: sides.left,
-  }
+  })
 }
 
 const borderStyleAdapter = (
@@ -263,11 +268,11 @@ const borderStyleAdapter = (
     return undefined
   }
 
-  return {
+  return defined({
     borderStyle: border.style,
     ...borderWidthStyleAdapter(border.width),
     ...borderColorStyleAdapter(border.color),
-  }
+  })
 }
 
 const paddingStyleAdapter = (
@@ -284,12 +289,12 @@ const paddingStyleAdapter = (
 
   const sides = resolveDirectionalTokens([padding], defaultWritingMode)
 
-  return {
+  return defined({
     paddingTop: sides.top,
     paddingRight: sides.right,
     paddingBottom: sides.bottom,
     paddingLeft: sides.left,
-  }
+  })
 }
 
 const marginStyleAdapter = (
@@ -306,12 +311,12 @@ const marginStyleAdapter = (
 
   const sides = resolveDirectionalTokens([margin], defaultWritingMode)
 
-  return {
+  return defined({
     marginTop: sides.top,
     marginRight: sides.right,
     marginBottom: sides.bottom,
     marginLeft: sides.left,
-  }
+  })
 }
 
 const sizeStyleAdapter = (
@@ -328,14 +333,16 @@ const sizeStyleAdapter = (
     return undefined
   }
 
-  return {
+  return defined({
     width: size.width,
     height: size.height,
     minWidth: size.minWidth,
-    minHeight: size.minHeight,
+    // minHeight is rounded to the nearest pixel to avoid blurry edges and gaps multiselects on certain devices.
+    // See https://reactnative.dev/docs/pixelratio#pixelroundtonearestpixel for more information.
+    minHeight: typeof size.minHeight === 'number' ? PixelRatio.roundToNearestPixel(size.minHeight) : size.minHeight,
     maxWidth: size.maxWidth,
     maxHeight: size.maxHeight,
-  }
+  })
 }
 
 const outlineStyleAdapter = (
@@ -350,12 +357,12 @@ const outlineStyleAdapter = (
     return undefined
   }
 
-  return {
+  return defined({
     outlineColor: outline.color,
     outlineOffset: outline.offset,
     outlineWidth: outline.width,
     outlineStyle: outline.style,
-  }
+  })
 }
 
 const layoutStyleAdapter = (
@@ -376,18 +383,101 @@ const layoutStyleAdapter = (
     return undefined
   }
 
-  return {
+  return defined({
     flexWrap: layout.flexWrap,
     flexGrow: layout.flexGrow,
     flexShrink: layout.flexShrink,
     flexBasis: layout.flexBasis,
     flexDirection: flexDirectionStyleAdapter(layout.direction),
     justifyContent: justifyContentStyleAdapter(layout.mainAxisAlignment),
-    alignItems: alignItemsStyleAdapter(layout.crossAxisAligment),
-    alignContent: alignContentStyleAdapter(layout.crossAxisLineAligment),
+    alignItems: alignItemsStyleAdapter(layout.crossAxisAlignment),
+    alignContent: alignContentStyleAdapter(layout.crossAxisLineAlignment),
     alignSelf: alignSelfStyleAdapter(layout.selfCrossAxisAlignment),
     gap: layout.gap,
+  })
+}
+
+const positionStyleAdapter = (
+  position?: PositioningToken
+): OptionalViewStyle<
+  | 'position'
+  | 'left'
+  | 'right'
+  | 'top'
+  | 'bottom'
+  | 'zIndex'
+> | undefined => {
+  if (position === undefined) {
+    return undefined
   }
+
+  if (position.type === 'static') {
+    return defined({
+      position: position.type,
+      zIndex: position.zIndex,
+    })
+  }
+
+  return defined({
+    position: position.type,
+    left: position.left,
+    right: position.right,
+    top: position.top,
+    bottom: position.bottom,
+    zIndex: position.zIndex,
+  })
+}
+
+const transformStyleAdapter = (
+  transform?: TransformTokens
+): ViewStyle['transform'] | undefined => {
+  if (transform === undefined) {
+    return undefined
+  }
+
+  const transforms = []
+
+  if (transform.translate?.x !== undefined) {
+    transforms.push({ translateX: transform.translate.x })
+  }
+
+  if (transform.translate?.y !== undefined) {
+    transforms.push({ translateY: transform.translate.y })
+  }
+
+  if (transform.scale?.x !== undefined) {
+    transforms.push({ scaleX: transform.scale.x })
+  }
+
+  if (transform.scale?.y !== undefined) {
+    transforms.push({ scaleY: transform.scale.y })
+  }
+
+  if (transform.rotation?.x !== undefined) {
+    transforms.push({ rotateX: transform.rotation.x })
+  }
+
+  if (transform.rotation?.y !== undefined) {
+    transforms.push({ rotateY: transform.rotation.y })
+  }
+
+  if (transform.rotation?.z !== undefined) {
+    transforms.push({ rotateZ: transform.rotation.z })
+  }
+
+  if (transform.skew?.x !== undefined) {
+    transforms.push({ skewX: `${transform.skew.x}deg` })
+  }
+
+  if (transform.skew?.y !== undefined) {
+    transforms.push({ skewY: `${transform.skew.y}deg` })
+  }
+
+  if (transforms.length === 0) {
+    return undefined
+  }
+
+  return transforms
 }
 
 function containerStyleAdapter(tokens: ContainerTokens): ViewStyle {
@@ -401,6 +491,8 @@ function containerStyleAdapter(tokens: ContainerTokens): ViewStyle {
     backgroundColor: tokens.backgroundColor,
     opacity: tokens.opacity,
     boxShadow: shadowStyleAdapter(tokens.decoration?.shadow),
+    transform: transformStyleAdapter(tokens.transform),
+    ...positionStyleAdapter(tokens.position),
     ...layoutStyleAdapter(tokens.layout),
     ...sizeStyleAdapter(tokens.size),
     ...borderStyleAdapter(tokens.border),
@@ -454,6 +546,8 @@ export const StyleAdapterUtils = {
   size: sizeStyleAdapter,
   outline: outlineStyleAdapter,
   layout: layoutStyleAdapter,
+  position: positionStyleAdapter,
+  transform: transformStyleAdapter,
   container: containerStyleAdapter,
   text: textStyleAdapter,
   icon: iconStyleAdapter,

package/src/theme/resolvers/avatar.ts

@@ -26,10 +26,8 @@ import type {
 } from '../types/components/avatar'
 import {
   createStyleResolver,
-  createValueResolver,
   type ComponentThemeResolver
 } from '../types/resolver'
-import type { ThemeTokens } from '@helpwave/hightide-design/theme-tokens'
 
 import { StyleAdapterUtils } from '../adapters'
 
@@ -61,6 +59,28 @@ export const mergeAvatarTokens = (
       ...override?.container?.decoration,
     },
   },
+  image: {
+    ...base.image,
+    ...override?.image,
+    size: {
+      ...base.image.size,
+      ...override?.image?.size,
+    },
+    shape: {
+      ...base.image.shape,
+      ...override?.image?.shape,
+    },
+    layout: {
+      ...base.image.layout,
+      ...override?.image?.layout,
+    },
+    decoration: {
+      ...base.image.decoration,
+      ...override?.image?.decoration,
+    },
+    position: override?.image?.position ?? base.image.position,
+    transform: override?.image?.transform ?? base.image.transform,
+  },
   text: {
     ...base.text,
     ...override?.text,
@@ -94,6 +114,17 @@ export const withNumericAvatarSize = (
         borderRadius: { type: 'all', value: borderRadius },
       },
     },
+    image: {
+      ...tokens.image,
+      size: {
+        width: size,
+        height: size,
+      },
+      shape: {
+        ...tokens.image.shape,
+        borderRadius: { type: 'all', value: borderRadius },
+      },
+    },
     icon: {
       ...tokens.icon,
       size,
@@ -102,8 +133,7 @@ export const withNumericAvatarSize = (
 }
 
 export const createAvatarStyleResolvers = (
-  resolveTokens: (state: AvatarState) => AvatarTokens,
-  themeTokens: ThemeTokens
+  resolveTokens: (state: AvatarState) => AvatarTokens
 ): AvatarThemeResolvers => ({
   container: createStyleResolver((state: AvatarState): AvatarStyle => {
     const { container } = resolveTokens(state)
@@ -122,36 +152,15 @@ export const createAvatarStyleResolvers = (
       } : {}),
     }
   }),
-  image: createStyleResolver((state: AvatarState): AvatarImageStyle => {
-    const { container } = resolveTokens(state)
-    const width = container.size?.width
-    const height = container.size?.height
-    const borderRadius = container.shape?.borderRadius
-
-    return {
-      position: 'absolute',
-      left: 0,
-      top: 0,
-      width,
-      height,
-      borderRadius: borderRadius?.type === 'all'
-        ? borderRadius.value
-        : undefined,
-    }
-  }),
-  text: createStyleResolver((state: AvatarState): AvatarTextStyle => ({
-    ...StyleAdapterUtils.text(resolveTokens(state).text),
-    textAlign: 'center',
-  })),
-  icon: createValueResolver((state: AvatarState): AvatarIconStyle => {
-    const { icon } = resolveTokens(state)
-
-    return StyleAdapterUtils.icon({
-      size: icon.size ?? themeTokens.icongraphy.sizes.md,
-      strokeWidth: icon.strokeWidth ?? themeTokens.icongraphy.strokeWidth,
-      color: icon.color ?? themeTokens.color.primary.onColor,
-    })
-  }),
+  image: createStyleResolver((state: AvatarState): AvatarImageStyle => (
+    StyleAdapterUtils.container(resolveTokens(state).image) as AvatarImageStyle
+  )),
+  text: createStyleResolver((state: AvatarState): AvatarTextStyle => (
+    StyleAdapterUtils.text(resolveTokens(state).text)
+  )),
+  icon: createStyleResolver((state: AvatarState): AvatarIconStyle => (
+    StyleAdapterUtils.icon(resolveTokens(state).icon)
+  )),
 })
 
 export const toAvatarThemeResolvers: ComponentThemeResolver<AvatarThemeResolvers> = ({
@@ -180,7 +189,7 @@ export const toAvatarThemeResolvers: ComponentThemeResolver<AvatarThemeResolvers
     return tokens
   }
 
-  return createAvatarStyleResolvers(resolveTokens, themeTokens)
+  return createAvatarStyleResolvers(resolveTokens)
 }
 
 export const createAvatarWithStatusThemeResolvers = (
@@ -194,7 +203,7 @@ export const createAvatarWithStatusThemeResolvers = (
   const { themeTokens, semanticTokens, componentTokens } = context
 
   return {
-    avatar: createValueResolver((state: AvatarWithStatusState) => {
+    avatar: createStyleResolver((state: AvatarWithStatusState) => {
       const { avatarOverride } = resolve(state)
 
       const resolveTokens = (avatarState: AvatarState): AvatarTokens => {
@@ -222,7 +231,7 @@ export const createAvatarWithStatusThemeResolvers = (
         return tokens
       }
 
-      return createAvatarStyleResolvers(resolveTokens, themeTokens)
+      return createAvatarStyleResolvers(resolveTokens)
     }),
     statusDot: createStyleResolver((state: AvatarWithStatusState): AvatarStatusDotStyle => {
       const tokens = resolve(state)
@@ -333,7 +342,7 @@ export const toAvatarGroupThemeResolvers: ComponentThemeResolver<
   })
 
   return {
-    avatar: createValueResolver((state: AvatarGroupState) => {
+    avatar: createStyleResolver((state: AvatarGroupState) => {
       const { avatarOverride } = resolve(state)
 
       const resolveTokens = (avatarState: AvatarState): AvatarTokens => {
@@ -361,7 +370,7 @@ export const toAvatarGroupThemeResolvers: ComponentThemeResolver<
         return tokens
       }
 
-      return createAvatarStyleResolvers(resolveTokens, themeTokens)
+      return createAvatarStyleResolvers(resolveTokens)
     }),
     container: createStyleResolver((state: AvatarGroupState): AvatarGroupContainerStyle => {
       const tokens = resolve(state)

package/src/theme/resolvers/button.ts

@@ -7,7 +7,6 @@ import type {
 } from '../types/components/button'
 import {
   createStyleResolver,
-  createValueResolver,
   toPressableInteractionState,
   type ComponentThemeResolver
 } from '../types/resolver'
@@ -31,22 +30,13 @@ export const toButtonThemeResolvers: ComponentThemeResolver<ButtonThemeResolvers
   })
 
   return {
-    container: createStyleResolver((state: ButtonState): ButtonStyle => ({
-      ...StyleAdapterUtils.container(resolve(state).container),
-      alignSelf: 'flex-start',
-    })),
-    stateLayer: createStyleResolver((state: ButtonState): ButtonStyle => {
-      const tokens = resolve(state)
-      return {
-        ...StyleAdapterUtils.container(tokens.stateLayer),
-        position: 'absolute',
-        top: 0,
-        right: 0,
-        bottom: 0,
-        left: 0,
-      }
-    }),
-    icon: createValueResolver((state: ButtonState): ButtonIconStyle => (
+    container: createStyleResolver((state: ButtonState): ButtonStyle => (
+      StyleAdapterUtils.container(resolve(state).container)
+    )),
+    stateLayer: createStyleResolver((state: ButtonState): ButtonStyle => (
+      StyleAdapterUtils.container(resolve(state).stateLayer)
+    )),
+    icon: createStyleResolver((state: ButtonState): ButtonIconStyle => (
       StyleAdapterUtils.icon(resolve(state).icon)
     )),
     text: createStyleResolver((state: ButtonState): ButtonTextStyle => (

package/src/theme/resolvers/chat/attachment-message-bubble.ts

@@ -26,7 +26,6 @@ import type {
 } from '../../types/components/chat'
 import {
   createStyleResolver,
-  createValueResolver,
   toPressableInteractionState,
   type ComponentThemeResolver
 } from '../../types/resolver'
@@ -72,13 +71,13 @@ export const toChatAttachmentMessageBubbleThemeResolvers: ComponentThemeResolver
       ): ChatMessageBubbleMetaDataTextStyle => (
         StyleAdapterUtils.text(resolve(state.direction).chatMessageBubbleOverrides.metaDataText = {})
       )),
-      metaDataIcon: createValueResolver((
+      metaDataIcon: createStyleResolver((
         state: ChatAttachmentMessageBubbleState
       ): ChatMessageBubbleMetaDataIconStyle => (
         StyleAdapterUtils.icon(resolve(state.direction).chatMessageBubbleOverrides.metaDataIcon = {})
       )),
     },
-    contentContainer: createValueResolver((state: ChatAttachmentMessageBubbleState) => {
+    contentContainer: createStyleResolver((state: ChatAttachmentMessageBubbleState) => {
       const contentContainer = resolve(state.direction).contentContainer
 
       const resolvePressable = (pressableState: PressableState) => componentTokens.pressable({
@@ -112,7 +111,7 @@ export const toChatAttachmentMessageBubbleThemeResolvers: ComponentThemeResolver
           ...StyleAdapterUtils.text(resolvePressable(pressableState).text),
           ...StyleAdapterUtils.text(contentContainer.text = {}),
         })),
-        icon: createValueResolver((pressableState: PressableState): PressableIconStyle => (
+        icon: createStyleResolver((pressableState: PressableState): PressableIconStyle => (
           StyleAdapterUtils.icon(resolvePressable(pressableState).icon)
         )),
       }
@@ -122,7 +121,7 @@ export const toChatAttachmentMessageBubbleThemeResolvers: ComponentThemeResolver
     ): ChatAttachmentMessageBubbleFileIconContainerStyle => (
       StyleAdapterUtils.container(resolve(state.direction).fileIconContainer)
     )),
-    fileIcon: createValueResolver((
+    fileIcon: createStyleResolver((
       state: ChatAttachmentMessageBubbleState
     ): ChatAttachmentMessageBubbleFileIconStyle => (
       StyleAdapterUtils.icon(resolve(state.direction).fileIcon)
@@ -132,7 +131,7 @@ export const toChatAttachmentMessageBubbleThemeResolvers: ComponentThemeResolver
     ): ChatAttachmentMessageBubbleDownloadIconContainerStyle => (
       StyleAdapterUtils.container(resolve(state.direction).downloadIconContainer)
     )),
-    downloadIcon: createValueResolver((
+    downloadIcon: createStyleResolver((
       state: ChatAttachmentMessageBubbleState
     ): ChatAttachmentMessageBubbleDownloadIconStyle => (
       StyleAdapterUtils.icon(resolve(state.direction).downloadIcon)

package/src/theme/resolvers/chat/conversation-row.ts

@@ -32,9 +32,7 @@ import type {
 } from '../../types/components/avatar'
 import {
   createSimpleStyleResolver,
-  createSimpleValueResolver,
   createStyleResolver,
-  createValueResolver,
   toPressableInteractionState,
   type ComponentThemeResolver
 } from '../../types/resolver'
@@ -61,7 +59,7 @@ export const toChatConversationRowThemeResolvers: ComponentThemeResolver<ChatCon
   })
 
   return {
-    pressable: createValueResolver((state: ChatConversationRowState) => {
+    pressable: createStyleResolver((state: ChatConversationRowState) => {
       const { pressableOverrides } = resolve(state)
 
       const resolvePressable = (pressableState: PressableState) => componentTokens.pressable({
@@ -89,7 +87,7 @@ export const toChatConversationRowThemeResolvers: ComponentThemeResolver<ChatCon
           ...StyleAdapterUtils.text(resolvePressable(pressableState).text),
           ...StyleAdapterUtils.text(pressableOverrides.text ?? {}),
         })),
-        icon: createValueResolver((pressableState: PressableState): PressableIconStyle => ({
+        icon: createStyleResolver((pressableState: PressableState): PressableIconStyle => ({
           ...StyleAdapterUtils.icon(resolvePressable(pressableState).icon),
           ...StyleAdapterUtils.icon(pressableOverrides.icon ?? {}),
         })),
@@ -119,10 +117,10 @@ export const toChatConversationRowThemeResolvers: ComponentThemeResolver<ChatCon
     unreadBadgeText: createSimpleStyleResolver((): ChatConversationRowUnreadBadgeTextStyle => (
       StyleAdapterUtils.text(resolve().unreadBadgeText)
     )),
-    sentIndicator: createSimpleValueResolver((): ChatConversationRowSentIndicatorStyle => (
+    sentIndicator: createSimpleStyleResolver((): ChatConversationRowSentIndicatorStyle => (
       StyleAdapterUtils.icon(resolve().sentIndicator)
     )),
-    avatar: createValueResolver((state: AvatarState): AvatarThemeResolvers => {
+    avatar: createStyleResolver((state: AvatarState): AvatarThemeResolvers => {
       const { avatarOverride } = resolve()
 
       const resolveTokens = (avatarState: AvatarState): AvatarTokens => {

package/src/theme/resolvers/chat/message-bubble.ts

@@ -13,7 +13,6 @@ import type {
 } from '../../types/components/chat'
 import {
   createStyleResolver,
-  createValueResolver,
   type ComponentThemeResolver
 } from '../../types/resolver'
 
@@ -49,7 +48,7 @@ export const toChatMessageBubbleThemeResolvers: ComponentThemeResolver<ChatMessa
     metaDataText: createStyleResolver((state: ChatMessageBubbleState): ChatMessageBubbleMetaDataTextStyle => (
       StyleAdapterUtils.text(resolve(state.direction).metaDataText)
     )),
-    metaDataIcon: createValueResolver((state: ChatMessageBubbleState): ChatMessageBubbleMetaDataIconStyle => (
+    metaDataIcon: createStyleResolver((state: ChatMessageBubbleState): ChatMessageBubbleMetaDataIconStyle => (
       StyleAdapterUtils.icon(resolve(state.direction).metaDataIcon)
     )),
   }

package/src/theme/resolvers/chat/message-composer.ts

@@ -6,7 +6,6 @@ import type {
 } from '../../types/components/chat'
 import {
   createSimpleStyleResolver,
-  createSimpleValueResolver,
   type ComponentThemeResolver
 } from '../../types/resolver'
 
@@ -30,7 +29,7 @@ export const toChatMessageComposerThemeResolvers: ComponentThemeResolver<ChatMes
       ...StyleAdapterUtils.container(resolve().input),
       ...StyleAdapterUtils.text(resolve().text),
     })),
-    placeholderColor: createSimpleValueResolver((): TextStyle => ({
+    placeholderColor: createSimpleStyleResolver((): TextStyle => ({
       color: resolve().placeholder.color
     })),
   }

package/src/theme/resolvers/chat/quick-reply-chip.ts

@@ -9,7 +9,6 @@ import type {
 } from '../../types/components/chat'
 import {
   createStyleResolver,
-  createValueResolver,
   toPressableInteractionState,
   type ComponentThemeResolver
 } from '../../types/resolver'
@@ -28,7 +27,7 @@ export const toChatQuickReplyChipThemeResolvers: ComponentThemeResolver<ChatQuic
   })
 
   return {
-    pressable: createValueResolver((state: ChatQuickReplyChipState) => {
+    pressable: createStyleResolver((state: ChatQuickReplyChipState) => {
       const tokens = resolve(state.isActive)
 
       const resolvePressable = (pressableState: PressableState) => componentTokens.pressable({
@@ -62,7 +61,7 @@ export const toChatQuickReplyChipThemeResolvers: ComponentThemeResolver<ChatQuic
           ...StyleAdapterUtils.text(resolvePressable(pressableState).text),
           ...StyleAdapterUtils.text(tokens.text = {}),
         })),
-        icon: createValueResolver((pressableState: PressableState): PressableIconStyle => ({
+        icon: createStyleResolver((pressableState: PressableState): PressableIconStyle => ({
           ...StyleAdapterUtils.icon(resolvePressable(pressableState).icon),
           ...StyleAdapterUtils.icon(tokens.icon = {}),
         })),

package/src/theme/resolvers/chat/system-line.ts

@@ -9,7 +9,6 @@ import type {
 } from '../../types/components/chat'
 import {
   createStyleResolver,
-  createValueResolver,
   type ComponentThemeResolver
 } from '../../types/resolver'
 
@@ -33,7 +32,7 @@ export const toChatSystemLineThemeResolvers: ComponentThemeResolver<ChatSystemLi
     text: createStyleResolver((state: ChatSystemLineState): ChatSystemLineTextStyle => (
       StyleAdapterUtils.text(resolve(state.color).text)
     )),
-    icon: createValueResolver((state: ChatSystemLineState): ChatSystemLineIconStyle => (
+    icon: createStyleResolver((state: ChatSystemLineState): ChatSystemLineIconStyle => (
       StyleAdapterUtils.icon(resolve(state.color).icon)
     )),
   }