diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index b2ca775..88c8d25 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import type { Preview } from '@storybook/react-vite';
 
-import '@kibalabs/ui-react/dist/index.css';
+import '@kibalabs/ui-react/styles.css';
 import '../src/styles.scss';
 import { ToastContainer } from '../src';
 
diff --git a/package-lock.json b/package-lock.json
index 88a6d35..25efae8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,7 @@
       },
       "devDependencies": {
         "@kibalabs/build": "0.13.3-next.13",
-        "@kibalabs/ui-react": "0.11.3-next.18",
+        "@kibalabs/ui-react": "^0.11.3-next.22",
         "@storybook/addon-docs": "10.1.2",
         "@storybook/react-vite": "10.1.2",
         "@types/react": "19.2.7",
@@ -3187,9 +3187,9 @@
       }
     },
     "node_modules/@kibalabs/ui-react": {
-      "version": "0.11.3-next.18",
-      "resolved": "https://registry.npmjs.org/@kibalabs/ui-react/-/ui-react-0.11.3-next.18.tgz",
-      "integrity": "sha512-eQYd68R988x2JgFgKtXKGsBNzhm0zxFAWNeUvmIgi4oxhPIzT947WvtYeZekWUIfSoU0XQNlpZ2q67nD86ucCQ==",
+      "version": "0.11.3-next.22",
+      "resolved": "https://registry.npmjs.org/@kibalabs/ui-react/-/ui-react-0.11.3-next.22.tgz",
+      "integrity": "sha512-R5gpzfTQNsQXB60st4P4+tQmu+/nd7BKzGpkjTLoCnpl/7WlFHbpVEEqeGPg/GBGnntvAZRgPO7EJN8EJeaCiA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
diff --git a/package.json b/package.json
index ebd3ed1..16391b6 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,7 @@
   },
   "devDependencies": {
     "@kibalabs/build": "0.13.3-next.13",
-    "@kibalabs/ui-react": "0.11.3-next.18",
+    "@kibalabs/ui-react": "^0.11.3-next.22",
     "@storybook/addon-docs": "10.1.2",
     "@storybook/react-vite": "10.1.2",
     "@types/react": "19.2.7",
diff --git a/src/component.tsx b/src/component.tsx
index 828d0d0..a10787c 100644
--- a/src/component.tsx
+++ b/src/component.tsx
@@ -35,12 +35,6 @@ export function Toast({
 
   const toastClassName = getClassName(Toast.displayName, className, isClickable && 'clickable', ...(variant?.split('-') || []));
 
-  const innerContent = (
-    <span className='KibaToastFocusFixer' tabIndex={-1}>
-      {props.children}
-    </span>
-  );
-
   if (props.target) {
     if (isUsingCoreRouting && targetShouldOpenSameTab && isTargetWithinApp) {
       return (
@@ -51,7 +45,7 @@ export function Toast({
           onClick={onClicked}
           tabIndex={props.tabIndex || 0}
         >
-          {innerContent}
+          {props.children}
         </CoreLink>
       );
     }
@@ -65,7 +59,7 @@ export function Toast({
         onClick={onClicked}
         tabIndex={props.tabIndex || 0}
       >
-        {innerContent}
+        {props.children}
       </a>
     );
   }
@@ -79,7 +73,7 @@ export function Toast({
         tabIndex={props.tabIndex || 0}
         type='button'
       >
-        {innerContent}
+        {props.children}
       </button>
     );
   }
@@ -90,7 +84,7 @@ export function Toast({
       className={toastClassName}
       tabIndex={props.tabIndex || 0}
     >
-      {innerContent}
+      {props.children}
     </div>
   );
 }
diff --git a/src/styles.scss b/src/styles.scss
index 6c1021f..6e8e380 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -38,6 +38,9 @@
     border: none;
     text-decoration: none;
     cursor: default;
+    background-clip: border-box;
+    position: relative;
+    box-sizing: border-box;
     &.clickable {
       cursor: pointer;
     }
@@ -49,57 +52,47 @@
     }
   }
 
-  .KibaToastFocusFixer {
-    outline: none;
-    background-clip: border-box;
-    width: 100%;
-    height: 100%;
-    position: relative;
-    display: flex;
-    box-sizing: border-box;
-  }
+
 }
 
 @layer kiba-theme {
   .KibaToast {
-    > .KibaToastFocusFixer {
-      // Use same styling as card from ui-react
-      background-color: var(--kiba-color-background-light10, #ffffff);
-      border-color: var(--kiba-color-background-dark05, rgba(0, 0, 0, 0.05));
-      border-width: var(--kiba-border-width, 1px);
-      border-style: solid;
-      border-radius: var(--kiba-border-radius, 0.5em);
-      box-shadow: 0px 8px 8px -6px rgba(0, 0, 0, 0.15);
-      padding: var(--kiba-padding, 0.5em) var(--kiba-padding-wide, 1em);
-      color: var(--kiba-color-text, #333333);
-      transition-duration: 0.3s;
-    }
-    &:hover > .KibaToastFocusFixer {
+    // Use same styling as card from ui-react
+    background-color: var(--kiba-color-background-light10, #ffffff);
+    border-color: var(--kiba-color-background-dark05, rgba(0, 0, 0, 0.05));
+    border-width: var(--kiba-border-width, 1px);
+    border-style: solid;
+    border-radius: var(--kiba-border-radius, 0.5em);
+    box-shadow: 0px 8px 8px -6px rgba(0, 0, 0, 0.15);
+    padding: var(--kiba-padding, 0.5em) var(--kiba-padding-wide, 1em);
+    color: var(--kiba-color-text, #333333);
+    transition-duration: 0.3s;
+    &:hover {
       background-color: var(--kiba-color-background, #ffffff);
     }
-    &:active > .KibaToastFocusFixer {
+    &:active {
       background-color: var(--kiba-color-background-dark10, #f0f0f0);
     }
-    &:focus > .KibaToastFocusFixer {
+    &:focus-visible {
       border-color: var(--kiba-color-background-dark50, rgba(0, 0, 0, 0.5));
     }
     // Variant styles
-    &.success > .KibaToastFocusFixer {
+    &.success {
       background-color: var(--kiba-color-success-clear90, #d4edda);
       color: var(--kiba-color-success-dark25, #155724);
       border-color: var(--kiba-color-success-clear75, #c3e6cb);
     }
-    &.error > .KibaToastFocusFixer {
+    &.error {
       background-color: var(--kiba-color-error-clear90, #f8d7da);
       color: var(--kiba-color-error-dark25, #721c24);
       border-color: var(--kiba-color-error-clear75, #f5c6cb);
     }
-    &.warning > .KibaToastFocusFixer {
+    &.warning {
       background-color: var(--kiba-color-warning-clear90, #fff3cd);
       color: var(--kiba-color-warning-dark25, #856404);
       border-color: var(--kiba-color-warning-clear75, #ffeeba);
     }
-    &.info > .KibaToastFocusFixer {
+    &.info {
       background-color: var(--kiba-color-info-clear90, #d1ecf1);
       color: var(--kiba-color-info-dark25, #0c5460);
       border-color: var(--kiba-color-info-clear75, #bee5eb);