@primereact/mcp 11.0.0-rc.2 → 11.0.0-rc.3

package/data/llms/tailwind/components/datatable.md

@@ -20,7 +20,6 @@ import {
 import { Tag } from '@/components/ui/tag';
 import { ProductService, type Product } from '@/shared/services/product.service';
 import { Database } from '@primeicons/react/database';
-import Image from 'next/image';
 import * as React from 'react';
 
 const statusSeverity: Record<string, 'success' | 'warn' | 'danger'> = {
@@ -68,7 +67,7 @@ export default function Preview() {
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={48}
@@ -205,7 +204,6 @@ import {
 } from '@/components/ui/datatable';
 import { Tag } from '@/components/ui/tag';
 import { ProductService, type Product } from '@/shared/services/product.service';
-import Image from 'next/image';
 import * as React from 'react';
 
 const statusSeverity: Record<string, 'success' | 'warn' | 'danger'> = {
@@ -253,7 +251,7 @@ export default function BasicDemo() {
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={40}
@@ -396,7 +394,6 @@ One row at a time. Clicking a different row replaces the previous selection.
 
 ```tsx
 'use client';
-import Image from 'next/image';
 import { Database } from '@primeicons/react/database';
 import { ProductService, type Product } from '@/shared/services/product.service';
 import type { DataTableSelectionEvent } from 'primereact/datatable';
@@ -471,7 +468,7 @@ export default function SingleSelectionDemo() {
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={40}
@@ -531,7 +528,6 @@ Multiple rows without a dedicated column. Pair with `metaKeySelection` so Ctrl/C
 
 ```tsx
 'use client';
-import Image from 'next/image';
 import { ProductService, type Product } from '@/shared/services/product.service';
 import { ShoppingCart } from '@primeicons/react/shopping-cart';
 import { Database } from '@primeicons/react/database';
@@ -642,7 +638,7 @@ export default function MultipleSelectionDemo() {
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={40}
@@ -826,7 +822,6 @@ Arrow Up/Down moves focus between rows, Space or Enter toggles the focused row,
 
 ```tsx
 'use client';
-import Image from 'next/image';
 import { Database } from '@primeicons/react/database';
 import { ProductService, type Product } from '@/shared/services/product.service';
 import type { DataTableSelectionEvent } from 'primereact/datatable';
@@ -918,7 +913,7 @@ export default function KeyboardDemo() {
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={36}
@@ -1004,7 +999,6 @@ import { SortAlt } from '@primeicons/react/sort-alt';
 import { SortAmountDown } from '@primeicons/react/sort-amount-down';
 import { SortAmountUpAlt } from '@primeicons/react/sort-amount-up-alt';
 import type { DataTableSortOrderInstance } from 'primereact/datatable';
-import Image from 'next/image';
 import * as React from 'react';
 
 const statusSeverity: Record<string, 'success' | 'warn' | 'danger'> = {
@@ -1091,7 +1085,7 @@ export default function SortDemo() {
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={40}
@@ -1151,7 +1145,6 @@ Hold Ctrl/Cmd and click multiple column headers to sort by several fields at onc
 
 ```tsx
 'use client';
-import Image from 'next/image';
 import { ProductService, type Product } from '@/shared/services/product.service';
 import type { DataTableSortOrderInstance } from 'primereact/datatable';
 import { SortAlt } from '@primeicons/react/sort-alt';
@@ -1263,7 +1256,7 @@ export default function MultiSortDemo() {
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={40}
@@ -1323,7 +1316,6 @@ Apply an initial sort on mount via `defaultSortField` + `defaultSortOrder`.
 
 ```tsx
 'use client';
-import Image from 'next/image';
 import { ProductService, type Product } from '@/shared/services/product.service';
 import type { DataTableSortOrderInstance } from 'primereact/datatable';
 import { SortAlt } from '@primeicons/react/sort-alt';
@@ -1435,7 +1427,7 @@ export default function PresortDemo() {
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={40}
@@ -1518,7 +1510,6 @@ import {
 } from '@/components/ui/datatable';
 import { OverlayBadge } from '@/components/ui/overlaybadge';
 import { Tag } from '@/components/ui/tag';
-import Image from 'next/image';
 import * as React from 'react';
 
 const statusSeverity: Record<string, 'success' | 'warn' | 'danger'> = {
@@ -1612,7 +1603,7 @@ export default function PresortMultiDemo() {
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={40}
@@ -2445,7 +2436,6 @@ import {
     DataTableTableContainer
 } from '@/components/ui/datatable';
 import { Tag } from '@/components/ui/tag';
-import Image from 'next/image';
 import * as React from 'react';
 
 const statusSeverity: Record<string, 'success' | 'warn' | 'danger'> = {
@@ -2498,7 +2488,7 @@ export default function ResizeDemo() {
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={36}
@@ -2552,7 +2542,6 @@ Dragging grows or shrinks the whole table; adjacent columns keep their widths.
 
 ```tsx
 'use client';
-import Image from 'next/image';
 import { Database } from '@primeicons/react/database';
 import { ProductService, type Product } from '@/shared/services/product.service';
 import {
@@ -2626,7 +2615,7 @@ export default function ResizeExpandDemo() {
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={36}
@@ -2683,7 +2672,6 @@ Drag and drop column headers to reorder columns.
 
 ```tsx
 'use client';
-import Image from 'next/image';
 import { ProductService, type Product } from '@/shared/services/product.service';
 import type { DataTableColumnReorderEvent } from 'primereact/datatable';
 import { ArrowDown } from '@primeicons/react/arrow-down';
@@ -2740,7 +2728,7 @@ function renderCell(field: string, item: Product) {
         case 'name':
             return (
                 <div className="flex items-center gap-3">
-                    <Image
+                    <img
                         src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                         alt={item.name}
                         width={36}
@@ -2849,7 +2837,6 @@ Drag and drop rows to reorder data.
 
 ```tsx
 'use client';
-import Image from 'next/image';
 import { ProductService, type Product } from '@/shared/services/product.service';
 import { Bars } from '@primeicons/react/bars';
 import { Database } from '@primeicons/react/database';
@@ -2927,7 +2914,7 @@ export default function RowReorderDemo() {
                                     </DataTableCell>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={36}
@@ -3461,7 +3448,6 @@ import {
 } from '@/components/ui/datatable';
 import { Tag } from '@/components/ui/tag';
 import { ProductService, type Product } from '@/shared/services/product.service';
-import Image from 'next/image';
 import * as React from 'react';
 
 const statusSeverity: Record<string, 'success' | 'warn' | 'danger'> = {
@@ -3507,7 +3493,7 @@ export default function TemplateDemo() {
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={40}
@@ -3548,7 +3534,6 @@ Export table data to CSV with customizable fields and headers.
 
 ```tsx
 'use client';
-import Image from 'next/image';
 import { ProductService, type Product } from '@/shared/services/product.service';
 import { FileExport } from '@primeicons/react/file-export';
 import { Database } from '@primeicons/react/database';
@@ -3630,7 +3615,7 @@ export default function ExportDemo() {
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={36}
@@ -3710,7 +3695,6 @@ import {
     DataTableTableContainer
 } from '@/components/ui/datatable';
 import { Tag } from '@/components/ui/tag';
-import Image from 'next/image';
 import * as React from 'react';
 
 const statusSeverity: Record<string, 'success' | 'warn' | 'danger'> = {
@@ -3775,7 +3759,7 @@ export default function LoadingOverlayDemo() {
                                     <DataTableRow key={item.id}>
                                         <DataTableCell>
                                             <div className="flex items-center gap-3">
-                                                <Image
+                                                <img
                                                     src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                     alt={item.name}
                                                     width={40}
@@ -3838,7 +3822,6 @@ import {
 } from '@/components/ui/datatable';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Tag } from '@/components/ui/tag';
-import Image from 'next/image';
 import * as React from 'react';
 
 const statusSeverity: Record<string, 'success' | 'warn' | 'danger'> = {
@@ -3929,7 +3912,7 @@ export default function LoadingSkeletonDemo() {
                                     <DataTableRow key={item.id}>
                                         <DataTableCell>
                                             <div className="flex items-center gap-3">
-                                                <Image
+                                                <img
                                                     src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                     alt={item.name}
                                                     width={40}

package/data/llms/tailwind/components/dataview.md

@@ -9,7 +9,6 @@ import { DataView, DataViewContent } from '@/components/ui/dataview';
 import { Tag } from '@/components/ui/tag';
 import { ProductService } from '@/shared/services/product.service';
 import { Heart, ShoppingCart, StarFill } from '@primeicons/react';
-import Image from 'next/image';
 import * as React from 'react';
 
 interface Product {
@@ -59,14 +58,14 @@ export default function Preview() {
                                 className={`flex flex-col sm:flex-row sm:items-center p-6 gap-4 ${index !== 0 ? 'border-t border-surface-200 dark:border-surface-700' : ''}`}
                             >
                                 <div className="md:w-40 relative">
-                                    <Image
+                                    <img
                                         className="mx-auto rounded w-full"
                                         src={`https://primefaces.org/cdn/primevue/images/product/${product.image}`}
                                         alt={product.name}
                                         width={160}
                                         height={160}
                                     />
-                                    <Tag severity={getSeverity(product)} className="absolute top-1 left-1">
+                                    <Tag severity={getSeverity(product)} className="absolute top-1 left-1 dark:bg-surface-900!">
                                         {product.inventoryStatus}
                                     </Tag>
                                 </div>
@@ -161,7 +160,6 @@ import { DataView, DataViewContent } from '@/components/ui/dataview';
 import { Tag } from '@/components/ui/tag';
 import { ProductService } from '@/shared/services/product.service';
 import { Heart, ShoppingCart, StarFill } from '@primeicons/react';
-import Image from 'next/image';
 import * as React from 'react';
 
 interface Product {
@@ -211,14 +209,14 @@ export default function BasicDemo() {
                                 className={`flex flex-col sm:flex-row sm:items-center p-6 gap-4 ${index !== 0 ? 'border-t border-surface-200 dark:border-surface-700' : ''}`}
                             >
                                 <div className="md:w-40 relative">
-                                    <Image
+                                    <img
                                         className="mx-auto rounded w-full"
                                         src={`https://primefaces.org/cdn/primevue/images/product/${product.image}`}
                                         alt={product.name}
                                         width={160}
                                         height={160}
                                     />
-                                    <Tag severity={getSeverity(product)} className="absolute top-1 left-1">
+                                    <Tag severity={getSeverity(product)} className="absolute top-1 left-1 dark:bg-surface-900!">
                                         {product.inventoryStatus}
                                     </Tag>
                                 </div>
@@ -279,7 +277,6 @@ import { Paginator, PaginatorFirst, PaginatorLast, PaginatorNext, PaginatorPages
 import { Tag } from '@/components/ui/tag';
 import { ProductService } from '@/shared/services/product.service';
 import { Heart, ShoppingCart, StarFill } from '@primeicons/react';
-import Image from 'next/image';
 import { PaginatorRootChangeEvent } from 'primereact/paginator';
 import * as React from 'react';
 
@@ -332,14 +329,14 @@ export default function PaginationDemo() {
                                 className={`flex flex-col sm:flex-row sm:items-center p-6 gap-4 ${index !== 0 ? 'border-t border-surface-200 dark:border-surface-700' : ''}`}
                             >
                                 <div className="md:w-40 relative">
-                                    <Image
+                                    <img
                                         className="mx-auto rounded w-full"
                                         src={`https://primefaces.org/cdn/primevue/images/product/${product.image}`}
                                         alt={product.name}
                                         width={160}
                                         height={160}
                                     />
-                                    <Tag severity={getSeverity(product)} className="absolute top-1 left-1">
+                                    <Tag severity={getSeverity(product)} className="absolute top-1 left-1 dark:bg-surface-900!">
                                         {product.inventoryStatus}
                                     </Tag>
                                 </div>
@@ -415,7 +412,6 @@ import { ToggleButton } from '@/components/ui/togglebutton';
 import { ToggleButtonGroup } from '@/components/ui/togglebuttongroup';
 import { ProductService } from '@/shared/services/product.service';
 import { Heart, ShoppingCart, StarFill } from '@primeicons/react';
-import Image from 'next/image';
 import { ToggleButtonGroupValueChangeEvent } from 'primereact/togglebuttongroup';
 import * as React from 'react';
 
@@ -486,14 +482,14 @@ export default function SortDemo() {
                                 className={`flex flex-col sm:flex-row sm:items-center p-6 gap-4 ${index !== 0 ? 'border-t border-surface-200 dark:border-surface-700' : ''}`}
                             >
                                 <div className="md:w-40 relative">
-                                    <Image
+                                    <img
                                         className="mx-auto rounded w-full"
                                         src={`https://primefaces.org/cdn/primevue/images/product/${product.image}`}
                                         alt={product.name}
                                         width={160}
                                         height={160}
                                     />
-                                    <Tag severity={getSeverity(product)} className="absolute top-1 left-1">
+                                    <Tag severity={getSeverity(product)} className="absolute top-1 left-1 dark:bg-surface-900!">
                                         {product.inventoryStatus}
                                     </Tag>
                                 </div>
@@ -555,7 +551,6 @@ import { ToggleButton } from '@/components/ui/togglebutton';
 import { ToggleButtonGroup } from '@/components/ui/togglebuttongroup';
 import { ProductService } from '@/shared/services/product.service';
 import { Bars, Heart, ShoppingCart, StarFill, Table } from '@primeicons/react';
-import Image from 'next/image';
 import { ToggleButtonGroupValueChangeEvent } from 'primereact/togglebuttongroup';
 import * as React from 'react';
 
@@ -605,14 +600,14 @@ export default function LayoutDemo() {
                         className={`flex flex-col sm:flex-row sm:items-center p-6 gap-4 ${index !== 0 ? 'border-t border-surface-200 dark:border-surface-700' : ''}`}
                     >
                         <div className="md:w-40 relative">
-                            <Image
+                            <img
                                 className="mx-auto rounded w-full"
                                 src={`https://primefaces.org/cdn/primevue/images/product/${product.image}`}
                                 alt={product.name}
                                 width={160}
                                 height={160}
                             />
-                            <Tag severity={getSeverity(product)} className="absolute top-1 left-1">
+                            <Tag severity={getSeverity(product)} className="absolute top-1 left-1 dark:bg-surface-900!">
                                 {product.inventoryStatus}
                             </Tag>
                         </div>
@@ -666,14 +661,14 @@ export default function LayoutDemo() {
                             <div className="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded flex flex-col">
                                 <div className="bg-surface-50 flex justify-center rounded p-4">
                                     <div className="relative mx-auto">
-                                        <Image
+                                        <img
                                             src={`https://primefaces.org/cdn/primevue/images/product/${product.image}`}
                                             alt={product.name}
                                             width={300}
                                             height={200}
                                             className="rounded"
                                         />
-                                        <Tag severity={getSeverity(product)} className="absolute top-1 left-1">
+                                        <Tag severity={getSeverity(product)} className="absolute top-1 left-1 dark:bg-surface-900!">
                                             {product.inventoryStatus}
                                         </Tag>
                                     </div>

package/data/llms/tailwind/components/dialog.md

@@ -292,7 +292,7 @@ import {
 } from '@/components/ui/dialog';
 import { InputText } from '@/components/ui/inputtext';
 import { Label } from '@/components/ui/label';
-import { ArrowDown, ArrowDownLeft, ArrowDownRight, ArrowLeft, ArrowRight, ArrowUp, ArrowUpLeft, ArrowUpRight, Times } from '@primeicons/react';
+import { Times } from '@primeicons/react';
 import { DialogRootChangeEvent, DialogRootProps } from 'primereact/dialog';
 import * as React from 'react';
 
@@ -310,39 +310,31 @@ export default function PositionDemo() {
             <div className="flex flex-wrap justify-center gap-2 mb-2">
                 <Button onClick={() => openPosition('left')} severity="secondary" style={{ minWidth: '10rem' }}>
                     Left
-                    <ArrowLeft />
                 </Button>
                 <Button onClick={() => openPosition('right')} severity="secondary" style={{ minWidth: '10rem' }}>
                     Right
-                    <ArrowRight />
                 </Button>
             </div>
             <div className="flex flex-wrap justify-center gap-2 mb-2">
                 <Button onClick={() => openPosition('topleft')} severity="secondary" style={{ minWidth: '10rem' }}>
                     TopLeft
-                    <ArrowUpLeft />
                 </Button>
                 <Button onClick={() => openPosition('top')} severity="secondary" style={{ minWidth: '10rem' }}>
                     Top
-                    <ArrowUp />
                 </Button>
                 <Button onClick={() => openPosition('topright')} severity="secondary" style={{ minWidth: '10rem' }}>
                     TopRight
-                    <ArrowUpRight />
                 </Button>
             </div>
             <div className="flex flex-wrap justify-center gap-2">
                 <Button onClick={() => openPosition('bottomleft')} severity="secondary" style={{ minWidth: '10rem' }}>
                     BottomLeft
-                    <ArrowDownLeft />
                 </Button>
                 <Button onClick={() => openPosition('bottom')} severity="secondary" style={{ minWidth: '10rem' }}>
                     Bottom
-                    <ArrowDown />
                 </Button>
                 <Button onClick={() => openPosition('bottomright')} severity="secondary" style={{ minWidth: '10rem' }}>
                     BottomRight
-                    <ArrowDownRight />
                 </Button>
             </div>
             <Dialog open={open} onOpenChange={(e: DialogRootChangeEvent) => setOpen(e.value as boolean)} position={position}>

package/data/llms/tailwind/components/select.md

@@ -469,7 +469,6 @@ import {
     SelectValue
 } from '@/components/ui/select';
 import { Search } from '@primeicons/react';
-import Image from 'next/image';
 import type { SelectValueChangeEvent } from 'primereact/select';
 import * as React from 'react';
 
@@ -532,7 +531,7 @@ export default function FilterDemo() {
                                 {filteredCountries.map((country, index) => (
                                     <SelectOption key={country.code} index={index} uKey={country.code}>
                                         <div className="flex items-center gap-2">
-                                            <Image
+                                            <img
                                                 alt={country.name}
                                                 src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png"
                                                 className={`flag flag-${country.code.toLowerCase()} mr-2`}

package/data/llms/tailwind/components/slider.md

@@ -224,7 +224,6 @@ import type { ToggleButtonGroupValueChangeEvent } from 'primereact/togglebuttong
 import { Slider } from '@/components/ui/slider';
 import { ToggleButton } from '@/components/ui/togglebutton';
 import { ToggleButtonGroup } from '@/components/ui/togglebuttongroup';
-import Image from 'next/image';
 import * as React from 'react';
 
 export default function FilterDemo() {
@@ -239,7 +238,7 @@ export default function FilterDemo() {
 
     return (
         <div className="flex flex-col items-center justify-center">
-            <Image
+            <img
                 alt="user header"
                 className="w-80 rounded mb-6"
                 src="https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg"

package/data/llms/tailwind/components/toolbar.md

@@ -135,7 +135,10 @@ import { Search } from '@primeicons/react';
 
 export default function CustomDemo() {
     return (
-        <Toolbar style={{ borderRadius: '3rem', padding: '0.75rem 1rem 0.75rem 1.5rem', background: 'var(--p-surface-900)', border: 'none' }}>
+        <Toolbar
+            className="@container"
+            style={{ borderRadius: '3rem', padding: '0.75rem 1rem 0.75rem 1.5rem', background: 'var(--p-surface-900)', border: 'none' }}
+        >
             <ToolbarStart>
                 <div className="flex items-center gap-1">
                     <i className="pi pi-prime text-xl" style={{ color: 'var(--p-primary-400)' }} />
@@ -143,24 +146,24 @@ export default function CustomDemo() {
                         Brand
                     </span>
                 </div>
-                <div className="ml-6 flex gap-1">
-                    <Button variant="text" size="small" className="text-surface-0 hover:bg-surface-700">
+                <div className="ml-6 hidden @min-[620px]:flex gap-1">
+                    <Button variant="text" size="small" className="text-surface-0! hover:bg-surface-700!">
                         Products
                     </Button>
-                    <Button variant="text" size="small" className="text-surface-0 hover:bg-surface-700">
+                    <Button variant="text" size="small" className="text-surface-0! hover:bg-surface-700!">
                         Solutions
                     </Button>
-                    <Button variant="text" size="small" className="text-surface-0 hover:bg-surface-700">
+                    <Button variant="text" size="small" className="text-surface-0! hover:bg-surface-700!">
                         Resources
                     </Button>
-                    <Button variant="text" size="small" className="text-surface-0 hover:bg-surface-700">
+                    <Button variant="text" size="small" className="text-surface-0! hover:bg-surface-700!">
                         Pricing
                     </Button>
                 </div>
             </ToolbarStart>
             <ToolbarEnd>
                 <div className="flex items-center gap-2">
-                    <Button variant="text" size="small" iconOnly aria-label="Search" className="text-surface-0 hover:bg-surface-700">
+                    <Button variant="text" size="small" iconOnly aria-label="Search" className="text-surface-0! hover:bg-surface-700!">
                         <Search />
                     </Button>
                     <Button severity="contrast" size="small">