diff --git a/examples/passport/wallets-connect-with-nextjs/package.json b/examples/passport/wallets-connect-with-nextjs/package.json
index 3047661b3e..9512f8efaf 100644
--- a/examples/passport/wallets-connect-with-nextjs/package.json
+++ b/examples/passport/wallets-connect-with-nextjs/package.json
@@ -2,7 +2,7 @@
   "name": "@examples/wallets-connect-with-nextjs",
   "version": "0.1.0",
   "dependencies": {
-    "@biom3/react": "^0.26.2",
+    "@biom3/react": "^0.27.3",
     "@ethersproject/providers": "^5.7.2",
     "@imtbl/sdk": "latest",
     "@tanstack/react-query": "^5.51.11",
diff --git a/packages/checkout/sdk-sample-app/package.json b/packages/checkout/sdk-sample-app/package.json
index 0401b459d7..343aba5e89 100644
--- a/packages/checkout/sdk-sample-app/package.json
+++ b/packages/checkout/sdk-sample-app/package.json
@@ -14,8 +14,8 @@
     ]
   },
   "dependencies": {
-    "@biom3/design-tokens": "^0.4.2",
-    "@biom3/react": "^0.25.0",
+    "@biom3/design-tokens": "^0.4.4",
+    "@biom3/react": "^0.27.3",
     "@ethersproject/providers": "^5.7.2",
     "@imtbl/checkout-sdk": "0.0.0",
     "@imtbl/checkout-widgets": "0.0.0",
diff --git a/packages/checkout/widgets-lib/package.json b/packages/checkout/widgets-lib/package.json
index ff82d800a1..82fea551ca 100644
--- a/packages/checkout/widgets-lib/package.json
+++ b/packages/checkout/widgets-lib/package.json
@@ -15,8 +15,8 @@
   },
   "dependencies": {
     "@0xsquid/sdk": "^2.8.24",
-    "@biom3/design-tokens": "^0.4.2",
-    "@biom3/react": "^0.25.0",
+    "@biom3/design-tokens": "^0.4.4",
+    "@biom3/react": "^0.27.3",
     "@ethersproject/bignumber": "^5.7.0",
     "@ethersproject/providers": "^5.7.2",
     "@imtbl/bridge-sdk": "0.0.0",
diff --git a/packages/checkout/widgets-lib/src/components/Status/StatusBox.tsx b/packages/checkout/widgets-lib/src/components/Status/StatusBox.tsx
index 067c56880d..10445a4d35 100644
--- a/packages/checkout/widgets-lib/src/components/Status/StatusBox.tsx
+++ b/packages/checkout/widgets-lib/src/components/Status/StatusBox.tsx
@@ -1,5 +1,6 @@
 import {
-  AllIconKeys, Body, Box, Icon,
+  AllDualVariantIconKeys,
+  Body, Box, Icon,
 } from '@biom3/react';
 
 import { statusBoxStyles, statusLogoFill } from './StatusViewStyles';
@@ -11,7 +12,7 @@ export interface StatusViewProps {
   iconStyles?: Record<string, string>;
 }
 
-const status: Record<StatusType, AllIconKeys> = {
+const status: Record<StatusType, AllDualVariantIconKeys> = {
   [StatusType.SUCCESS]: 'TickWithCircle',
   [StatusType.WARNING]: 'Shield',
   [StatusType.FAILURE]: 'CloseWithCircle',
diff --git a/packages/checkout/widgets-lib/src/views/top-up/TopUpMenuItem.tsx b/packages/checkout/widgets-lib/src/views/top-up/TopUpMenuItem.tsx
index 3ac63a2789..1a052cebb1 100644
--- a/packages/checkout/widgets-lib/src/views/top-up/TopUpMenuItem.tsx
+++ b/packages/checkout/widgets-lib/src/views/top-up/TopUpMenuItem.tsx
@@ -1,5 +1,7 @@
-import { Box, MenuItem, IconProps } from '@biom3/react';
-import { ReactNode } from 'react';
+import {
+  AllSingleVariantIconKeys, Box, type IconProps, isDualVariantIcon, MenuItem,
+} from '@biom3/react';
+import type { ReactNode } from 'react';
 
 export interface TopUpMenuItemProps {
   testId: string;
@@ -25,15 +27,19 @@ export function TopUpMenuItem({
         onClick={!isDisabled ? onClick : undefined}
         sx={isDisabled ? { opacity: '0.5', cursor: 'not-allowed' } : {}}
       >
-        <MenuItem.Icon
-          icon={icon}
-          variant={iconVariant}
-        />
+        {isDualVariantIcon(icon) ? (
+          <MenuItem.Icon
+            icon={icon}
+            variant={iconVariant}
+          />
+        ) : (
+          <MenuItem.Icon icon={icon} />
+        )}
         <MenuItem.Label size="medium">
           {heading}
         </MenuItem.Label>
         <MenuItem.IntentIcon
-          icon={intentIcon}
+          icon={intentIcon as AllSingleVariantIconKeys}
         />
         <MenuItem.Caption testId={`menu-item-caption-${testId}`}>
           {caption}
diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/components/FiatOption.tsx b/packages/checkout/widgets-lib/src/widgets/add-funds/components/FiatOption.tsx
index 5b3e8fd6dd..505ebf4189 100644
--- a/packages/checkout/widgets-lib/src/widgets/add-funds/components/FiatOption.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/add-funds/components/FiatOption.tsx
@@ -1,4 +1,4 @@
-import { IconProps, MenuItem, MenuItemSize } from '@biom3/react';
+import { AllDualVariantIconKeys, MenuItem, MenuItemSize } from '@biom3/react';
 import { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FiatOptionType } from '../types';
@@ -20,7 +20,7 @@ export function FiatOption<RC extends ReactElement | undefined = undefined>({
 }: FiatOptionProps<RC>) {
   const { t } = useTranslation();
 
-  const icon: Record<FiatOptionType, IconProps['icon']> = {
+  const icon: Record<FiatOptionType, AllDualVariantIconKeys> = {
     [FiatOptionType.DEBIT]: 'BankCard',
     [FiatOptionType.CREDIT]: 'BankCard',
   };
diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/components/Option.tsx b/packages/checkout/widgets-lib/src/widgets/add-funds/components/Option.tsx
index e1f80078e3..d0160ea8c2 100644
--- a/packages/checkout/widgets-lib/src/widgets/add-funds/components/Option.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/add-funds/components/Option.tsx
@@ -1,5 +1,7 @@
-import { IconProps, MenuItem, MenuItemSize } from '@biom3/react';
-import { ReactElement } from 'react';
+import {
+  type AllDualVariantIconKeys, MenuItem, type MenuItemSize,
+} from '@biom3/react';
+import type { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 
 export enum OptionTypes {
@@ -27,7 +29,7 @@ export function Option<RC extends ReactElement | undefined = undefined>({
 }: OptionProps<RC>) {
   const { t } = useTranslation();
 
-  const icon: Record<OptionTypes, IconProps['icon']> = {
+  const icon: Record<OptionTypes, AllDualVariantIconKeys> = {
     [OptionTypes.SWAP]: 'Coins',
     [OptionTypes.DEBIT]: 'BankCard',
     [OptionTypes.CREDIT]: 'BankCard',
diff --git a/packages/checkout/widgets-lib/src/widgets/sale/components/PaymentOption.tsx b/packages/checkout/widgets-lib/src/widgets/sale/components/PaymentOption.tsx
index 03bfd4c478..97c2958d3a 100644
--- a/packages/checkout/widgets-lib/src/widgets/sale/components/PaymentOption.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/sale/components/PaymentOption.tsx
@@ -1,4 +1,4 @@
-import { IconProps, MenuItem, MenuItemSize } from '@biom3/react';
+import { AllDualVariantIconKeys, MenuItem, MenuItemSize } from '@biom3/react';
 import { SalePaymentTypes } from '@imtbl/checkout-sdk';
 import { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -24,7 +24,7 @@ export function PaymentOption<RC extends ReactElement | undefined = undefined>({
 }: PaymentOptionProps<RC>) {
   const { t } = useTranslation();
 
-  const icon: Record<SalePaymentTypes, IconProps['icon']> = {
+  const icon: Record<SalePaymentTypes, AllDualVariantIconKeys> = {
     [SalePaymentTypes.CRYPTO]: 'Coins',
     [SalePaymentTypes.DEBIT]: 'BankCard',
     [SalePaymentTypes.CREDIT]: 'BankCard',
diff --git a/packages/checkout/widgets-lib/src/widgets/wallet/components/WalletAddress/WalletAddress.tsx b/packages/checkout/widgets-lib/src/widgets/wallet/components/WalletAddress/WalletAddress.tsx
index 151f76e161..bee739b063 100644
--- a/packages/checkout/widgets-lib/src/widgets/wallet/components/WalletAddress/WalletAddress.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/wallet/components/WalletAddress/WalletAddress.tsx
@@ -1,16 +1,18 @@
 import {
-  MenuItem, ButtCon, AllIconKeys, SxProps,
+  type AllDualVariantIconKeys, type AllIconKeys, ButtCon,
+  isDualVariantIcon,
+  MenuItem, type SxProps,
 } from '@biom3/react';
-import { Web3Provider } from '@ethersproject/providers';
+import type { Web3Provider } from '@ethersproject/providers';
 import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { getWalletLogoByName } from '../../../../lib/logoUtils';
-import { abbreviateWalletAddress } from '../../../../lib/utils';
-import { getWalletProviderNameByProvider, isPassportProvider } from '../../../../lib/provider';
 import {
   UserJourney,
   useAnalytics,
 } from '../../../../context/analytics-provider/SegmentAnalyticsProvider';
+import { getWalletLogoByName } from '../../../../lib/logoUtils';
+import { getWalletProviderNameByProvider, isPassportProvider } from '../../../../lib/provider';
+import { abbreviateWalletAddress } from '../../../../lib/utils';
 
 const isCopiedStyle: SxProps = {
   background: 'base.color.status.success.bright',
@@ -75,21 +77,37 @@ export function WalletAddress({
         logo={getWalletLogoByName(getWalletProviderNameByProvider(provider))}
         sx={{ backgroundColor: 'base.color.translucent.standard.200' }}
       />
+      {isDualVariantIcon(ctaIcon) ? (
+        <ButtCon
+          variant="tertiary"
+          iconVariant="bold"
+          size="small"
+          icon={ctaIcon}
+          iconSx={{
+            ...(isCopied ? isCopiedIconStyle : {}),
+          }}
+          onClick={handleIconClick}
+          sx={{
+            cursor: 'pointer',
+            ...(isCopied ? isCopiedStyle : {}),
+          }}
+        />
+      ) : (
+        <ButtCon
+          variant="tertiary"
+          size="small"
+          icon={ctaIcon as AllDualVariantIconKeys}
+          iconSx={{
+            ...(isCopied ? isCopiedIconStyle : {}),
+          }}
+          onClick={handleIconClick}
+          sx={{
+            cursor: 'pointer',
+            ...(isCopied ? isCopiedStyle : {}),
+          }}
+        />
+      )}
 
-      <ButtCon
-        variant="tertiary"
-        iconVariant="bold"
-        size="small"
-        icon={ctaIcon}
-        iconSx={{
-          ...(isCopied ? isCopiedIconStyle : {}),
-        }}
-        onClick={handleIconClick}
-        sx={{
-          cursor: 'pointer',
-          ...(isCopied ? isCopiedStyle : {}),
-        }}
-      />
       <MenuItem.Label>{t('views.SETTINGS.walletAddress.label')}</MenuItem.Label>
       <MenuItem.Caption testId="wallet-address">
         {abbreviateWalletAddress(walletAddress)}
diff --git a/packages/checkout/widgets-sample-app/package.json b/packages/checkout/widgets-sample-app/package.json
index c191e7a959..2db4fa3932 100644
--- a/packages/checkout/widgets-sample-app/package.json
+++ b/packages/checkout/widgets-sample-app/package.json
@@ -14,8 +14,8 @@
     ]
   },
   "dependencies": {
-    "@biom3/design-tokens": "^0.4.2",
-    "@biom3/react": "^0.25.0",
+    "@biom3/design-tokens": "^0.4.4",
+    "@biom3/react": "^0.27.3",
     "@ethersproject/providers": "^5.7.2",
     "@imtbl/checkout-sdk": "0.0.0",
     "@imtbl/checkout-widgets": "0.0.0",
diff --git a/packages/passport/sdk-sample-app/package.json b/packages/passport/sdk-sample-app/package.json
index 08e65c7361..7d9dbe5a40 100644
--- a/packages/passport/sdk-sample-app/package.json
+++ b/packages/passport/sdk-sample-app/package.json
@@ -2,8 +2,8 @@
   "name": "@imtbl/passport-sdk-sample-app",
   "version": "0.1.0",
   "dependencies": {
-    "@biom3/design-tokens": "^0.4.2",
-    "@biom3/react": "^0.25.0",
+    "@biom3/design-tokens": "^0.4.4",
+    "@biom3/react": "^0.27.3",
     "@imtbl/blockchain-data": "0.0.0",
     "@imtbl/config": "0.0.0",
     "@imtbl/generated-clients": "0.0.0",
diff --git a/packages/passport/sdk-sample-app/src/components/Message.tsx b/packages/passport/sdk-sample-app/src/components/Message.tsx
index 6875db7559..734b55226f 100644
--- a/packages/passport/sdk-sample-app/src/components/Message.tsx
+++ b/packages/passport/sdk-sample-app/src/components/Message.tsx
@@ -17,7 +17,7 @@ function Message() {
   return (
     <CardStack title="Message">
       <Sticker
-        style={{ width: '100%' }}
+        sx={{ width: '100%' }}
         position={{ x: 'right', y: 'top' }}
       >
         <Form>
@@ -36,6 +36,7 @@ function Message() {
         <Sticker.FramedIcon
           icon="Close"
           circularFrame
+          emphasized
           sx={{
             cursor: 'pointer',
           }}
diff --git a/packages/x-provider/src/sample-app/package.json b/packages/x-provider/src/sample-app/package.json
index dbf85d2754..a78be4b4c8 100644
--- a/packages/x-provider/src/sample-app/package.json
+++ b/packages/x-provider/src/sample-app/package.json
@@ -14,7 +14,7 @@
     ]
   },
   "dependencies": {
-    "@biom3/react": "^0.25.0",
+    "@biom3/react": "^0.27.3",
     "@imtbl/sdk": "0.0.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
diff --git a/sdk/package.json b/sdk/package.json
index 16374798f9..7df485be61 100644
--- a/sdk/package.json
+++ b/sdk/package.json
@@ -9,8 +9,8 @@
     "@0xsequence/abi": "^1.4.3",
     "@0xsequence/core": "^1.4.3",
     "@0xsquid/sdk": "^2.8.24",
-    "@biom3/design-tokens": "^0.4.2",
-    "@biom3/react": "^0.25.0",
+    "@biom3/design-tokens": "^0.4.4",
+    "@biom3/react": "^0.27.3",
     "@ethersproject/abi": "^5.7.0",
     "@ethersproject/abstract-provider": "^5.7.0",
     "@ethersproject/abstract-signer": "^5.7.0",
@@ -162,7 +162,7 @@
   },
   "repository": "immutable/ts-immutable-sdk.git",
   "resolutions": {
-    "@biom3/design-tokens": "^0.4.2",
+    "@biom3/design-tokens": "^0.4.4",
     "@openzeppelin/contracts": "3.4.2-solc-0.7"
   },
   "scripts": {
@@ -178,4 +178,4 @@
   },
   "type": "module",
   "types": "./dist/index.d.ts"
-}
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 6343b90f1e..256e9a023d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2527,7 +2527,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@biom3/design-tokens@npm:~0.4.4":
+"@biom3/design-tokens@npm:^0.4.4, @biom3/design-tokens@npm:~0.4.4":
   version: 0.4.4
   resolution: "@biom3/design-tokens@npm:0.4.4"
   dependencies:
@@ -2590,7 +2590,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@biom3/react@npm:^0.26.1, @biom3/react@npm:^0.26.2":
+"@biom3/react@npm:^0.26.1":
   version: 0.26.2
   resolution: "@biom3/react@npm:0.26.2"
   dependencies:
@@ -2617,6 +2617,33 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@biom3/react@npm:^0.27.3":
+  version: 0.27.3
+  resolution: "@biom3/react@npm:0.27.3"
+  dependencies:
+    "@biom3/design-tokens": ~0.4.4
+    "@imtbl/image-resizer-utils": ~0.0.2
+    csstype: ^3.1.2
+    hls.js: ^1.5.11
+    localforage: ^1.10.0
+    lodash.debounce: ^4.0.8
+    lodash.get: ^4.4.2
+    lodash.isequal: ^4.5.0
+    lodash.throttle: ^4.1.1
+    react-is: ^18.2.0
+    react-keyed-flatten-children: ^3.0.0
+    ts-deepmerge: ^6.2.0
+  peerDependencies:
+    "@emotion/react": ^11.11.4
+    "@rive-app/react-canvas-lite": ^4.9.0
+    embla-carousel-react: ^8.0.4
+    framer-motion: ^10.12.12
+    react: ^18.2.0
+    react-dom: ^18.2.0
+  checksum: 4462a567804bf29c817e7260c4e98a062ea5e5ee9f0ae872738d412ebd51e94a63237d5a83e52f0a46b83c3377f272cf46b775c3ab1ef37cfff5ac2fc3e5b938
+  languageName: node
+  linkType: hard
+
 "@cnakazawa/watch@npm:^1.0.3":
   version: 1.0.4
   resolution: "@cnakazawa/watch@npm:1.0.4"
@@ -4018,7 +4045,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@examples/wallets-connect-with-nextjs@workspace:examples/passport/wallets-connect-with-nextjs"
   dependencies:
-    "@biom3/react": ^0.26.2
+    "@biom3/react": ^0.27.3
     "@ethersproject/providers": ^5.7.2
     "@imtbl/sdk": latest
     "@playwright/test": ^1.45.2
@@ -4195,8 +4222,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@imtbl/checkout-sdk-sample-app@workspace:packages/checkout/sdk-sample-app"
   dependencies:
-    "@biom3/design-tokens": ^0.4.2
-    "@biom3/react": ^0.25.0
+    "@biom3/design-tokens": ^0.4.4
+    "@biom3/react": ^0.27.3
     "@ethersproject/providers": ^5.7.2
     "@imtbl/checkout-sdk": 0.0.0
     "@imtbl/checkout-widgets": 0.0.0
@@ -4282,8 +4309,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@imtbl/checkout-widgets-sample-app@workspace:packages/checkout/widgets-sample-app"
   dependencies:
-    "@biom3/design-tokens": ^0.4.2
-    "@biom3/react": ^0.25.0
+    "@biom3/design-tokens": ^0.4.4
+    "@biom3/react": ^0.27.3
     "@ethersproject/providers": ^5.7.2
     "@imtbl/checkout-sdk": 0.0.0
     "@imtbl/checkout-widgets": 0.0.0
@@ -4318,8 +4345,8 @@ __metadata:
   dependencies:
     "@0xsquid/sdk": ^2.8.24
     "@0xsquid/squid-types": ^0.1.104
-    "@biom3/design-tokens": ^0.4.2
-    "@biom3/react": ^0.25.0
+    "@biom3/design-tokens": ^0.4.4
+    "@biom3/react": ^0.27.3
     "@ethersproject/bignumber": ^5.7.0
     "@ethersproject/providers": ^5.7.2
     "@imtbl/bridge-sdk": 0.0.0
@@ -4523,6 +4550,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@imtbl/image-resizer-utils@npm:~0.0.2":
+  version: 0.0.2
+  resolution: "@imtbl/image-resizer-utils@npm:0.0.2"
+  dependencies:
+    buffer: ^6.0.3
+  checksum: aba219f47ab57418f7fef8cc2382218e00582ec4e1bd931821cf2a6160e9ce56737fb1973aaff0d3e0d5d774eaa793d91d456ed43611430d8fe77597ab92fd3d
+  languageName: node
+  linkType: hard
+
 "@imtbl/metrics@0.0.0, @imtbl/metrics@workspace:packages/internal/metrics":
   version: 0.0.0-use.local
   resolution: "@imtbl/metrics@workspace:packages/internal/metrics"
@@ -4614,8 +4650,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@imtbl/passport-sdk-sample-app@workspace:packages/passport/sdk-sample-app"
   dependencies:
-    "@biom3/design-tokens": ^0.4.2
-    "@biom3/react": ^0.25.0
+    "@biom3/design-tokens": ^0.4.4
+    "@biom3/react": ^0.27.3
     "@imtbl/blockchain-data": 0.0.0
     "@imtbl/config": 0.0.0
     "@imtbl/generated-clients": 0.0.0
@@ -4719,8 +4755,8 @@ __metadata:
     "@babel/core": ^7.21.0
     "@babel/plugin-transform-class-properties": ^7.24.1
     "@babel/plugin-transform-private-methods": ^7.24.1
-    "@biom3/design-tokens": ^0.4.2
-    "@biom3/react": ^0.25.0
+    "@biom3/design-tokens": ^0.4.4
+    "@biom3/react": ^0.27.3
     "@ethersproject/abi": ^5.7.0
     "@ethersproject/abstract-provider": ^5.7.0
     "@ethersproject/abstract-signer": ^5.7.0
@@ -34510,7 +34546,7 @@ __metadata:
   resolution: "seaport-core@https://github.com/immutable/seaport-core.git#commit=0633350ec34f21fcede657ff812f11cf7d19144e"
   dependencies:
     seaport-types: ^0.0.1
-  checksum: 392bce86bbfc4f7c00b65575b238825f4c696bddf5af08be7aa496862e63879375387fd4400f6e900ffee08d65c1f75cf3adad9c6c41ddcf7a3b0389cd73c3c7
+  checksum: d8adba0d54106c6fe9370f0775fadef2198e5eab440b36919d1f917705ce2f0a7028e4da021b6df049aa3ca35d7e673a28b78a731130f0ff9fdf7a8bd32e3b94
   languageName: node
   linkType: hard
 
@@ -34554,7 +34590,7 @@ __metadata:
     seaport-sol: ^1.5.0
     seaport-types: ^0.0.1
     solady: ^0.0.84
-  checksum: f31a7443a50fa1c35ec03ea031743d1d10896653ae443fa15ab8e6f5b4a2ca43f6743d523ae4e1f14df867451e5b2b2130b0bfa58a1085b0bcae3fceb8dfdc9b
+  checksum: a77e141e4ab5d2c4bb190a38fbb6cda3011fdf5f350b250fbeb4d82ae81cf917a966a2dcb8d9e4fd1bed29e5510ede9b15941b0ac77aeb4272dab94c9f51e7ff
   languageName: node
   linkType: hard
 
@@ -39802,7 +39838,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "x-provider-sample-app@workspace:packages/x-provider/src/sample-app"
   dependencies:
-    "@biom3/react": ^0.25.0
+    "@biom3/react": ^0.27.3
     "@imtbl/sdk": 0.0.0
     "@svgr/webpack": ^8.0.1
     "@testing-library/jest-dom": ^5.16.5