@helpwave/hightide-native 0.1.1 → 0.3.0

package/src/theme/resolvers/chat/thread-header.ts

@@ -1,4 +1,6 @@
-import type { AvatarTokens } from '@helpwave/hightide-design/component-token-resolvers'
+import type {
+  AvatarTokens
+} from '@helpwave/hightide-design/component-token-resolvers'
 
 import {
   createAvatarStyleResolvers,
@@ -6,14 +8,17 @@ import {
   toDesignAvatarSize,
   withNumericAvatarSize
 } from '../avatar'
-import { toContainerStyle } from '../../adapters/container-adapter'
-import { toTextStyle } from '../../adapters/text-style-adapter'
 import type {
   ChatThreadHeaderContentRowStyle,
   ChatThreadHeaderStyle,
   ChatThreadHeaderSubtitleStyle,
   ChatThreadHeaderThemeResolvers,
-  ChatThreadHeaderTitleStyle
+  ChatThreadHeaderTitleStyle,
+  PressableContainerStyle,
+  PressableIconStyle,
+  PressableState,
+  PressableStateLayerStyle,
+  PressableTextStyle
 } from '../../types/components/chat'
 import type {
   AvatarState,
@@ -21,10 +26,14 @@ import type {
 } from '../../types/components/avatar'
 import {
   createSimpleStyleResolver,
+  createStyleResolver,
   createValueResolver,
+  toPressableInteractionState,
   type ComponentThemeResolver
 } from '../../types/resolver'
 
+import { StyleAdapterUtils } from '../../adapters'
+
 export const toChatThreadHeaderThemeResolvers: ComponentThemeResolver<ChatThreadHeaderThemeResolvers> = ({
   themeTokens,
   semanticTokens,
@@ -37,17 +46,16 @@ export const toChatThreadHeaderThemeResolvers: ComponentThemeResolver<ChatThread
 
   return {
     container: createSimpleStyleResolver((): ChatThreadHeaderStyle => (
-      toContainerStyle(resolve().container)
+      StyleAdapterUtils.container(resolve().container)
+    )),
+    contentRow: createSimpleStyleResolver((): ChatThreadHeaderContentRowStyle => (
+      StyleAdapterUtils.container(resolve().contentRow)
     )),
-    contentRow: createSimpleStyleResolver((): ChatThreadHeaderContentRowStyle => ({
-      ...toContainerStyle(resolve().contentRow),
-      flex: 1,
-    })),
     title: createSimpleStyleResolver((): ChatThreadHeaderTitleStyle => (
-      toTextStyle(resolve().title)
+      StyleAdapterUtils.text(resolve().title)
     )),
     subtitle: createSimpleStyleResolver((): ChatThreadHeaderSubtitleStyle => (
-      toTextStyle(resolve().subtitle)
+      StyleAdapterUtils.text(resolve().subtitle)
     )),
     avatar: createValueResolver((state: AvatarState): AvatarThemeResolvers => {
       const { avatarOverride } = resolve()
@@ -71,7 +79,7 @@ export const toChatThreadHeaderThemeResolvers: ComponentThemeResolver<ChatThread
           avatarOverride
         )
 
-        const size = avatarState.size ?? state.size
+        const size = avatarState.size ?? state.size ?? avatarOverride.container?.size?.width
         if (typeof size === 'number') {
           return withNumericAvatarSize(tokens, size)
         }
@@ -81,5 +89,45 @@ export const toChatThreadHeaderThemeResolvers: ComponentThemeResolver<ChatThread
 
       return createAvatarStyleResolvers(resolveTokens, themeTokens)
     }),
+    pressable: createValueResolver(() => {
+      const { pressableOverwrites } = resolve()
+
+      const resolvePressable = (pressableState: PressableState) => componentTokens.pressable({
+        themeTokens,
+        semanticResolvers: semanticTokens,
+        overrides: {
+          size: pressableOverwrites.overrides?.size,
+          color: pressableOverwrites.overrides?.color,
+          coloringStyle: pressableOverwrites.overrides?.coloringStyle,
+          coloringColorVariant: pressableOverwrites.overrides?.coloringColorVariant,
+          hasAdditionalHorizontalPadding: pressableOverwrites.overrides?.hasAdditionalHorizontalPadding,
+        },
+        state: toPressableInteractionState(pressableState),
+      })
+
+      return {
+        container: createStyleResolver((pressableState: PressableState): PressableContainerStyle => ({
+          ...StyleAdapterUtils.container(resolvePressable(pressableState).container),
+          ...StyleAdapterUtils.container(pressableOverwrites.container = {}),
+        })),
+        stateLayer: createStyleResolver((pressableState: PressableState): PressableStateLayerStyle => ({
+          ...StyleAdapterUtils.container(resolvePressable(pressableState).stateLayer),
+          position: 'absolute',
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
+          ...StyleAdapterUtils.container(pressableOverwrites.stateLayer = {}),
+        })),
+        text: createStyleResolver((pressableState: PressableState): PressableTextStyle => ({
+          ...StyleAdapterUtils.text(resolvePressable(pressableState).text),
+          ...StyleAdapterUtils.text(pressableOverwrites.text = {}),
+        })),
+        icon: createValueResolver((pressableState: PressableState): PressableIconStyle => ({
+          ...StyleAdapterUtils.icon(resolvePressable(pressableState).icon),
+          ...StyleAdapterUtils.icon(pressableOverwrites.icon = {}),
+        })),
+      }
+    }),
   }
 }

package/src/theme/resolvers/checkbox.ts

@@ -2,8 +2,6 @@ import type {
   CheckboxState as DesignCheckboxState,
   CheckboxStateValue
 } from '@helpwave/hightide-design/component-token-resolvers'
-import { toContainerStyle } from '../adapters/container-adapter'
-import { toIconStyle } from '../adapters/icon-style-adapter'
 import type {
   CheckboxIconStyle,
   CheckboxState,
@@ -17,6 +15,8 @@ import {
   type ComponentThemeResolver
 } from '../types/resolver'
 
+import { StyleAdapterUtils } from '../adapters'
+
 const toDesignCheckboxState = (state: CheckboxState): DesignCheckboxState => {
   const active = new Set<CheckboxStateValue>()
 
@@ -73,11 +73,11 @@ export const toCheckboxThemeResolvers: ComponentThemeResolver<CheckboxThemeResol
 
   return {
     container: createStyleResolver((state: CheckboxState): CheckboxStyle => (
-      toContainerStyle(resolve(state).container)
+      StyleAdapterUtils.container(resolve(state).container)
     )),
     stateLayer: createStyleResolver((state: CheckboxState): CheckboxStateLayerStyle => {
       const tokens = resolve(state)
-      const containerStyle = toContainerStyle(tokens.container)
+      const containerStyle = StyleAdapterUtils.container(tokens.container)
       const touchTargetSize = semanticTokens.touchTargetSize({ themeTokens })
       const width = toNumberSize(containerStyle.width as string | number | undefined)
       const height = toNumberSize(containerStyle.height as string | number | undefined)
@@ -85,7 +85,7 @@ export const toCheckboxThemeResolvers: ComponentThemeResolver<CheckboxThemeResol
       const vertical = Math.max(0, touchTargetSize - height) / 2
 
       return {
-        ...toContainerStyle(tokens.stateLayer),
+        ...StyleAdapterUtils.container(tokens.stateLayer),
         position: 'absolute',
         top: 0,
         right: 0,
@@ -98,7 +98,7 @@ export const toCheckboxThemeResolvers: ComponentThemeResolver<CheckboxThemeResol
       }
     }),
     icon: createValueResolver((state: CheckboxState): CheckboxIconStyle => (
-      toIconStyle(resolve(state).icon)
+      StyleAdapterUtils.icon(resolve(state).icon)
     )),
   }
 }

package/src/theme/resolvers/chip.ts

@@ -1,6 +1,5 @@
-import { toContainerStyle } from '../adapters/container-adapter'
-import { toTextStyle } from '../adapters/text-style-adapter'
 import type {
+  ChipIconStyle,
   ChipState,
   ChipStyle,
   ChipTextStyle,
@@ -8,9 +7,12 @@ import type {
 } from '../types/components/chip'
 import {
   createStyleResolver,
+  createValueResolver,
   type ComponentThemeResolver
 } from '../types/resolver'
 
+import { StyleAdapterUtils } from '../adapters'
+
 export const toChipThemeResolvers: ComponentThemeResolver<ChipThemeResolvers> = ({
   themeTokens,
   semanticTokens,
@@ -28,10 +30,13 @@ export const toChipThemeResolvers: ComponentThemeResolver<ChipThemeResolvers> =
 
   return {
     chip: createStyleResolver((state: ChipState): ChipStyle => (
-      toContainerStyle(resolve(state).container)
+      StyleAdapterUtils.container(resolve(state).container)
+    )),
+    icon: createValueResolver((state: ChipState): ChipIconStyle => (
+      StyleAdapterUtils.icon(resolve(state).icon)
     )),
     text: createStyleResolver((state: ChipState): ChipTextStyle => (
-      toTextStyle(resolve(state).text)
+      StyleAdapterUtils.text(resolve(state).text)
     )),
   }
 }

package/src/theme/resolvers/divider.ts

@@ -1,4 +1,3 @@
-import { toContainerStyle } from '../adapters/container-adapter'
 import type {
   DividerState,
   DividerStyle,
@@ -9,6 +8,8 @@ import {
   type ComponentThemeResolver
 } from '../types/resolver'
 
+import { StyleAdapterUtils } from '../adapters'
+
 export const toDividerThemeResolvers: ComponentThemeResolver<DividerThemeResolvers> = ({
   themeTokens,
   semanticTokens,
@@ -27,8 +28,7 @@ export const toDividerThemeResolvers: ComponentThemeResolver<DividerThemeResolve
 
   return {
     container: createStyleResolver((state: DividerState): DividerStyle => ({
-      ...toContainerStyle(resolve(state)),
-      alignSelf: 'stretch',
+      ...StyleAdapterUtils.container(resolve(state)),
     })),
   }
 }

package/src/theme/resolvers/iconButton.ts

@@ -1,11 +1,7 @@
-import { toContainerStyle } from '../adapters/container-adapter'
-import { toIconStyle } from '../adapters/icon-style-adapter'
-import { toTextStyle } from '../adapters/text-style-adapter'
 import type {
   IconButtonIconStyle,
   IconButtonState,
   IconButtonStyle,
-  IconButtonTextStyle,
   IconButtonThemeResolvers
 } from '../types/components/iconButton'
 import {
@@ -15,6 +11,8 @@ import {
   type ComponentThemeResolver
 } from '../types/resolver'
 
+import { StyleAdapterUtils } from '../adapters'
+
 export const toIconButtonThemeResolvers: ComponentThemeResolver<IconButtonThemeResolvers> = ({
   themeTokens,
   semanticTokens,
@@ -33,12 +31,12 @@ export const toIconButtonThemeResolvers: ComponentThemeResolver<IconButtonThemeR
 
   return {
     container: createStyleResolver((state: IconButtonState): IconButtonStyle => ({
-      ...toContainerStyle(resolve(state).container),
+      ...StyleAdapterUtils.container(resolve(state).container),
     })),
     stateLayer: createStyleResolver((state: IconButtonState): IconButtonStyle => {
       const tokens = resolve(state)
       return {
-        ...toContainerStyle(tokens.stateLayer),
+        ...StyleAdapterUtils.container(tokens.stateLayer),
         position: 'absolute',
         top: 0,
         right: 0,
@@ -47,10 +45,7 @@ export const toIconButtonThemeResolvers: ComponentThemeResolver<IconButtonThemeR
       }
     }),
     icon: createValueResolver((state: IconButtonState): IconButtonIconStyle => (
-      toIconStyle(resolve(state).icon)
-    )),
-    text: createStyleResolver((state: IconButtonState): IconButtonTextStyle => (
-      toTextStyle(resolve(state).text)
+      StyleAdapterUtils.icon(resolve(state).icon)
     )),
   }
 }

package/src/theme/resolvers/input.ts

@@ -2,9 +2,6 @@ import type {
   InputState as DesignInputState,
   InputStateValue
 } from '@helpwave/hightide-design/component-token-resolvers'
-import { toContainerStyleWithStateLayer } from '../adapters/container-adapter'
-import { toIconStyle } from '../adapters/icon-style-adapter'
-import { toTextStyle } from '../adapters/text-style-adapter'
 import type {
   InputContainerStyle,
   InputIconStyle,
@@ -19,6 +16,9 @@ import {
   type ComponentThemeResolver
 } from '../types/resolver'
 
+import { StyleAdapterUtils } from '../adapters'
+import { HexColorUtils } from '@helpwave/hightide-design/utils'
+
 const toDesignInputState = (state: InputState = {}): DesignInputState => {
   const active = new Set<InputStateValue>()
 
@@ -64,16 +64,21 @@ export const toInputThemeResolvers: ComponentThemeResolver<InputThemeResolvers>
   return {
     container: createStyleResolver((state: InputState): InputContainerStyle => {
       const { container, stateLayer } = resolve(state)
-      return toContainerStyleWithStateLayer(container, stateLayer)
+      if(container.backgroundColor && stateLayer.backgroundColor)
+        container.backgroundColor = HexColorUtils.blend(
+          HexColorUtils.resolveColorToken(container.backgroundColor),
+          HexColorUtils.resolveColorToken(stateLayer.backgroundColor)
+        )
+      return StyleAdapterUtils.container(container)
     }),
     text: createStyleResolver((state: InputState): InputTextStyle => (
-      toTextStyle(resolve(state).text)
+      StyleAdapterUtils.text(resolve(state).text)
     )),
     placeholder: createStyleResolver((state: InputState): InputPlaceholderStyle => (
-      toTextStyle(resolve(state).placeholder)
+      StyleAdapterUtils.text(resolve(state).placeholder)
     )),
     icon: createValueResolver((state: InputState): InputIconStyle => (
-      toIconStyle(resolve(state).icon)
+      StyleAdapterUtils.icon(resolve(state).icon)
     )),
   }
 }

package/src/theme/resolvers/listItem.ts

@@ -1,8 +1,6 @@
-import { toContainerStyle } from '../adapters/container-adapter'
-import { toIconStyle } from '../adapters/icon-style-adapter'
-import { toTextStyle } from '../adapters/text-style-adapter'
 import type {
   ListActionItemContentStyle,
+  ListActionItemDescriptionStyle,
   ListActionItemIconStyle,
   ListActionItemLeadingItemContainerStyle,
   ListActionItemState,
@@ -28,6 +26,8 @@ import {
   type ComponentThemeResolver
 } from '../types/resolver'
 
+import { StyleAdapterUtils } from '../adapters'
+
 const toListItemDefaultThemeResolvers: ComponentThemeResolver<ListItemDefaultThemeResolvers> = ({
   themeTokens,
   semanticTokens,
@@ -43,26 +43,26 @@ const toListItemDefaultThemeResolvers: ComponentThemeResolver<ListItemDefaultThe
 
   return {
     container: createStyleResolver((state: ListItemState): ListItemStyle => (
-      toContainerStyle(resolve(state).container)
+      StyleAdapterUtils.container(resolve(state).container)
     )),
     leadingItemContainer: createStyleResolver((state: ListItemState): ListItemLeadingItemContainerStyle => (
-      toContainerStyle(resolve(state).leadingItemContainer)
+      StyleAdapterUtils.container(resolve(state).leadingItemContainer)
     )),
     content: createStyleResolver((state: ListItemState): ListItemContentStyle => ({
-      ...toContainerStyle(resolve(state).content),
+      ...StyleAdapterUtils.container(resolve(state).content),
       flex: 1,
     })),
     trailingItemContainer: createStyleResolver((state: ListItemState): ListItemTrailingItemContainerStyle => (
-      toContainerStyle(resolve(state).trailingItemContainer)
+      StyleAdapterUtils.container(resolve(state).trailingItemContainer)
     )),
     descriptionText: createStyleResolver((state: ListItemState): ListItemDescriptionStyle => (
-      toTextStyle(resolve(state).descriptionText)
+      StyleAdapterUtils.text(resolve(state).descriptionText)
     )),
     titleText: createStyleResolver((state: ListItemState): ListItemTitleStyle => (
-      toTextStyle(resolve(state).titleText)
+      StyleAdapterUtils.text(resolve(state).titleText)
     )),
     icon: createValueResolver((state: ListItemState): ListItemIconStyle => (
-      toIconStyle(resolve(state).icon)
+      StyleAdapterUtils.icon(resolve(state).icon)
     )),
   }
 }
@@ -83,23 +83,26 @@ const toListActionItemThemeResolvers: ComponentThemeResolver<ListActionItemTheme
 
   return {
     container: createStyleResolver((state: ListActionItemState): ListActionItemStyle => (
-      toContainerStyle(resolve(state).container)
+      StyleAdapterUtils.container(resolve(state).container)
     )),
     leadingItemContainer: createStyleResolver((state: ListActionItemState): ListActionItemLeadingItemContainerStyle => (
-      toContainerStyle(resolve(state).leadingItemContainer)
+      StyleAdapterUtils.container(resolve(state).leadingItemContainer)
     )),
     content: createStyleResolver((state: ListActionItemState): ListActionItemContentStyle => ({
-      ...toContainerStyle(resolve(state).content),
+      ...StyleAdapterUtils.container(resolve(state).content),
       flex: 1,
     })),
     trailingItemContainer: createStyleResolver((state: ListActionItemState): ListActionItemTrailingItemContainerStyle => (
-      toContainerStyle(resolve(state).trailingItemContainer)
+      StyleAdapterUtils.container(resolve(state).trailingItemContainer)
     )),
     titleText: createStyleResolver((state: ListActionItemState): ListActionItemTitleStyle => (
-      toTextStyle(resolve(state).titleText)
+      StyleAdapterUtils.text(resolve(state).titleText)
+    )),
+    descriptionText: createStyleResolver((state: ListActionItemState): ListActionItemDescriptionStyle => (
+      StyleAdapterUtils.text(resolve(state).descriptionText)
     )),
     icon: createValueResolver((state: ListActionItemState): ListActionItemIconStyle => (
-      toIconStyle(resolve(state).icon)
+      StyleAdapterUtils.icon(resolve(state).icon)
     )),
   }
 }

package/src/theme/resolvers/multiSelect.ts

@@ -2,9 +2,6 @@ import type {
   MultiSelectState as DesignMultiSelectState,
   MultiSelectStateValue
 } from '@helpwave/hightide-design/component-token-resolvers'
-import { toContainerStyle, toContainerStyleWithStateLayer } from '../adapters/container-adapter'
-import { toIconStyle } from '../adapters/icon-style-adapter'
-import { toTextStyle } from '../adapters/text-style-adapter'
 import type {
   MultiSelectCheckboxIconStyle,
   MultiSelectCheckboxStyle,
@@ -30,6 +27,8 @@ import {
   type ComponentThemeResolver
 } from '../types/resolver'
 
+import { StyleAdapterUtils } from '../adapters'
+
 type MultiSelectResolveState = {
   color?: MultiSelectState['color'],
   isDisabled?: boolean,
@@ -119,25 +118,33 @@ export const toMultiSelectThemeResolvers: ComponentThemeResolver<MultiSelectThem
   })
 
   return {
-    trigger: createStyleResolver((state: MultiSelectState): MultiSelectTriggerStyle => {
-      const { trigger, stateLayer } = resolve(toTriggerState(state))
-      return toContainerStyleWithStateLayer(trigger, stateLayer)
-    }),
+    trigger: createStyleResolver((state: MultiSelectState): MultiSelectTriggerStyle => ({
+      ...StyleAdapterUtils.container(resolve(toTriggerState(state)).trigger),
+      overflow: 'hidden',
+    })),
+    stateLayer: createStyleResolver((state: MultiSelectState): MultiSelectTriggerStyle => ({
+      ...StyleAdapterUtils.container(resolve(toTriggerState(state)).stateLayer),
+      position: 'absolute',
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+    })),
     triggerText: createStyleResolver((state: MultiSelectState): SelectTriggerTextStyle => (
-      toTextStyle(resolve(toTriggerState(state)).triggerText)
+      StyleAdapterUtils.text(resolve(toTriggerState(state)).triggerText)
     )),
     overlay: createSimpleStyleResolver((): SelectOverlayStyle => ({
-      ...toContainerStyle(resolve().overlay),
+      ...StyleAdapterUtils.container(resolve().overlay),
       flex: 1,
     })),
     menu: createStyleResolver((state: SelectMenuState): SelectMenuStyle => (
-      toContainerStyle(resolve({ hasSearch: state.hasSearch }).menu)
+      StyleAdapterUtils.container(resolve({ hasSearch: state.hasSearch }).menu)
     )),
     header: createSimpleStyleResolver((): SelectHeaderStyle => (
-      toContainerStyle(resolve().header)
+      StyleAdapterUtils.container(resolve().header)
     )),
     option: createStyleResolver((state: MultiSelectOptionState): MultiSelectOptionStyle => (
-      toContainerStyle(resolve({
+      StyleAdapterUtils.container(resolve({
         color: state.color,
         isDisabled: state.isDisabled,
         isSelected: state.isSelected,
@@ -145,7 +152,7 @@ export const toMultiSelectThemeResolvers: ComponentThemeResolver<MultiSelectThem
       }).option)
     )),
     optionText: createStyleResolver((state: MultiSelectOptionState): MultiSelectOptionTextStyle => (
-      toTextStyle(resolve({
+      StyleAdapterUtils.text(resolve({
         color: state.color,
         isDisabled: state.isDisabled,
         isSelected: state.isSelected,
@@ -153,10 +160,10 @@ export const toMultiSelectThemeResolvers: ComponentThemeResolver<MultiSelectThem
       }).optionText)
     )),
     emptyText: createSimpleStyleResolver((): SelectEmptyTextStyle => (
-      toTextStyle(resolve().emptyText)
+      StyleAdapterUtils.text(resolve().emptyText)
     )),
     checkbox: createStyleResolver((state: MultiSelectOptionState): MultiSelectCheckboxStyle => (
-      toContainerStyle(resolve({
+      StyleAdapterUtils.container(resolve({
         color: state.color,
         isDisabled: state.isDisabled,
         isSelected: state.isSelected,
@@ -164,7 +171,7 @@ export const toMultiSelectThemeResolvers: ComponentThemeResolver<MultiSelectThem
       }).checkbox)
     )),
     checkboxIcon: createValueResolver((state: MultiSelectOptionState): MultiSelectCheckboxIconStyle => (
-      toIconStyle(resolve({
+      StyleAdapterUtils.icon(resolve({
         color: state.color,
         isDisabled: state.isDisabled,
         isSelected: state.isSelected,

package/src/theme/resolvers/searchBar.ts

@@ -3,8 +3,6 @@ import type {
   InputStateValue
 } from '@helpwave/hightide-design/component-token-resolvers'
 import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
-import { toContainerStyle, toContainerStyleWithStateLayer } from '../adapters/container-adapter'
-import { toTextStyle } from '../adapters/text-style-adapter'
 import type {
   SearchBarContainerStyle,
   SearchBarIconButtonStyle,
@@ -19,6 +17,9 @@ import {
   type ComponentThemeResolver
 } from '../types/resolver'
 
+import { StyleAdapterUtils } from '../adapters'
+import { HexColorUtils } from '@helpwave/hightide-design/utils'
+
 const toDesignSearchBarState = (state: SearchBarState = {}): DesignInputState => {
   const active = new Set<InputStateValue>()
 
@@ -63,7 +64,7 @@ export const toSearchBarThemeResolvers: ComponentThemeResolver<SearchBarThemeRes
 
   return {
     container: createStyleResolver((state: SearchBarState): SearchBarContainerStyle => ({
-      ...toContainerStyle(resolve(state).container),
+      ...StyleAdapterUtils.container(resolve(state).container),
       position: 'relative',
       justifyContent: 'center',
     })),
@@ -71,7 +72,13 @@ export const toSearchBarThemeResolvers: ComponentThemeResolver<SearchBarThemeRes
       const tokens = resolve(state)
       const { container, stateLayer, text } = tokens.input
       // TODO remove this computation with a better solution
-      const base = toContainerStyleWithStateLayer(container, stateLayer)
+      if(container.backgroundColor && stateLayer.backgroundColor)
+        container.backgroundColor = HexColorUtils.blend(
+          HexColorUtils.resolveColorToken(container.backgroundColor),
+          HexColorUtils.resolveColorToken(stateLayer.backgroundColor)
+        )
+
+      const base = StyleAdapterUtils.container(container)
       const horizontalPadding = typeof base.paddingLeft === 'number'
         ? base.paddingLeft
         : typeof base.paddingRight === 'number'
@@ -87,17 +94,17 @@ export const toSearchBarThemeResolvers: ComponentThemeResolver<SearchBarThemeRes
 
       return {
         ...base,
-        ...toTextStyle(text),
+        ...StyleAdapterUtils.text(text),
         paddingLeft: horizontalPadding,
         paddingRight: horizontalPadding + trailingInset,
       }
     }),
     placeholder: createStyleResolver((state: SearchBarState): SearchBarPlaceholderStyle => (
-      toTextStyle(resolve(state).input.placeholder)
+      StyleAdapterUtils.text(resolve(state).input.placeholder)
     )),
     iconButton: createStyleResolver((state: SearchBarState): SearchBarIconButtonStyle => {
       const { iconButton } = resolve(state)
-      const style = toContainerStyle(iconButton)
+      const style = StyleAdapterUtils.container(iconButton)
 
       return {
         ...style,

package/src/theme/resolvers/select.ts

@@ -2,9 +2,6 @@ import type {
   SelectState as DesignSelectState,
   SelectStateValue
 } from '@helpwave/hightide-design/component-token-resolvers'
-import { toContainerStyle, toContainerStyleWithStateLayer } from '../adapters/container-adapter'
-import { toIconStyle } from '../adapters/icon-style-adapter'
-import { toTextStyle } from '../adapters/text-style-adapter'
 import type {
   SelectIconStyle,
   SelectMenuStyle,
@@ -27,6 +24,8 @@ import {
   type ComponentThemeResolver
 } from '../types/resolver'
 
+import { StyleAdapterUtils } from '../adapters'
+
 type SelectResolveState = {
   color?: SelectState['color'],
   isDisabled?: boolean,
@@ -114,28 +113,36 @@ export const toSelectThemeResolvers: ComponentThemeResolver<SelectThemeResolvers
   })
 
   return {
-    trigger: createStyleResolver((state: SelectState): SelectTriggerStyle => {
-      const { trigger, stateLayer } = resolve(toTriggerState(state))
-      return toContainerStyleWithStateLayer(trigger, stateLayer)
-    }),
+    trigger: createStyleResolver((state: SelectState): SelectTriggerStyle => ({
+      ...StyleAdapterUtils.container(resolve(toTriggerState(state)).trigger),
+      overflow: 'hidden',
+    })),
+    stateLayer: createStyleResolver((state: SelectState): SelectTriggerStyle => ({
+      ...StyleAdapterUtils.container(resolve(toTriggerState(state)).stateLayer),
+      position: 'absolute',
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+    })),
     triggerText: createStyleResolver((state: SelectState): SelectTriggerTextStyle => (
-      toTextStyle(resolve(toTriggerState(state)).triggerText)
+      StyleAdapterUtils.text(resolve(toTriggerState(state)).triggerText)
     )),
     icon: createValueResolver((state: SelectState): SelectIconStyle => (
-      toIconStyle(resolve(toTriggerState(state)).icon)
+      StyleAdapterUtils.icon(resolve(toTriggerState(state)).icon)
     )),
     overlay: createSimpleStyleResolver((): SelectOverlayStyle => ({
-      ...toContainerStyle(resolve().overlay),
+      ...StyleAdapterUtils.container(resolve().overlay),
       flex: 1,
     })),
     menu: createStyleResolver((state: SelectMenuState): SelectMenuStyle => (
-      toContainerStyle(resolve({ hasSearch: state.hasSearch }).menu)
+      StyleAdapterUtils.container(resolve({ hasSearch: state.hasSearch }).menu)
     )),
     header: createSimpleStyleResolver((): SelectHeaderStyle => (
-      toContainerStyle(resolve().header)
+      StyleAdapterUtils.container(resolve().header)
     )),
     option: createStyleResolver((state: SelectOptionState): SelectOptionStyle => (
-      toContainerStyle(resolve({
+      StyleAdapterUtils.container(resolve({
         color: state.color,
         isDisabled: state.isDisabled,
         isSelected: state.isSelected,
@@ -143,7 +150,7 @@ export const toSelectThemeResolvers: ComponentThemeResolver<SelectThemeResolvers
       }).option)
     )),
     optionText: createStyleResolver((state: SelectOptionState): SelectOptionTextStyle => (
-      toTextStyle(resolve({
+      StyleAdapterUtils.text(resolve({
         color: state.color,
         isDisabled: state.isDisabled,
         isSelected: state.isSelected,
@@ -151,7 +158,7 @@ export const toSelectThemeResolvers: ComponentThemeResolver<SelectThemeResolvers
       }).optionText)
     )),
     emptyText: createSimpleStyleResolver((): SelectEmptyTextStyle => (
-      toTextStyle(resolve().emptyText)
+      StyleAdapterUtils.text(resolve().emptyText)
     )),
   }
 }