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

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

@@ -11,7 +11,6 @@ import { StarFill } from '@primeicons/react/star-fill';
 import { DataTable } from '@primereact/ui/datatable';
 import { Rating } from '@primereact/ui/rating';
 import { Tag } from '@primereact/ui/tag';
-import Image from 'next/image';
 import * as React from 'react';
 
 const statusSeverity: Record<string, 'success' | 'warn' | 'danger'> = {
@@ -79,7 +78,7 @@ export default function Preview() {
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={48}
@@ -618,7 +617,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/ui/datatable';
@@ -681,7 +679,7 @@ export default function SingleSelectionDemo() {
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={40}
@@ -741,7 +739,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';
@@ -840,7 +837,7 @@ export default function MultipleSelectionDemo() {
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={40}
@@ -1236,7 +1233,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/ui/datatable';
@@ -1316,7 +1312,7 @@ export default function KeyboardDemo() {
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={36}
@@ -1391,7 +1387,6 @@ Clicking a column header cycles through ascending, descending, and unsorted.
 
 ```tsx
 'use client';
-import Image from 'next/image';
 import { ProductService, type Product } from '@/shared/services/product.service';
 import type { DataTableSortOrderInstance } from '@primereact/ui/datatable';
 import { SortAlt } from '@primeicons/react/sort-alt';
@@ -1488,7 +1483,7 @@ export default function SortDemo() {
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={40}
@@ -1548,7 +1543,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/ui/datatable';
 import { SortAlt } from '@primeicons/react/sort-alt';
@@ -1645,7 +1639,7 @@ export default function MultiSortDemo() {
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={40}
@@ -1711,7 +1705,6 @@ Apply an initial sort on mount. Use `defaultSortField` + `defaultSortOrder` for
 
 ```tsx
 'use client';
-import Image from 'next/image';
 import { ProductService, type Product } from '@/shared/services/product.service';
 import type { DataTableSortOrderInstance } from '@primereact/ui/datatable';
 import { SortAlt } from '@primeicons/react/sort-alt';
@@ -1808,7 +1801,7 @@ export default function PresortDemo() {
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={40}
@@ -1890,7 +1883,6 @@ import { Badge } from '@primereact/ui/badge';
 import { DataTable } from '@primereact/ui/datatable';
 import { OverlayBadge } from '@primereact/ui/overlaybadge';
 import { Tag } from '@primereact/ui/tag';
-import Image from 'next/image';
 import * as React from 'react';
 
 const statusSeverity: Record<string, 'success' | 'warn' | 'danger'> = {
@@ -1984,7 +1976,7 @@ export default function PresortMultiDemo() {
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={40}
@@ -2056,7 +2048,6 @@ import type { DataTablePaginationInstance } from '@primereact/ui/datatable';
 import { DataTable } from '@primereact/ui/datatable';
 import { Paginator } from '@primereact/ui/paginator';
 import { Tag } from '@primereact/ui/tag';
-import Image from 'next/image';
 import type { PaginatorPagesInstance } from '@primereact/ui/paginator';
 import * as React from 'react';
 
@@ -2108,7 +2099,7 @@ export default function PaginationDemo() {
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={40}
@@ -3163,7 +3154,6 @@ Inline cell editing with `CellEditor`, `CellEditorDisplay` and `CellEditorConten
 
 ```tsx
 'use client';
-import Image from 'next/image';
 import { ProductService, type Product } from '@/shared/services/product.service';
 import { ChevronDown } from '@primeicons/react/chevron-down';
 import { Database } from '@primeicons/react/database';
@@ -3251,7 +3241,7 @@ export default function CellEditDemo() {
                             {({ item, index }: { item: any; index: number }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
-                                        <Image
+                                        <img
                                             src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                             alt={item.name}
                                             width={40}
@@ -3400,7 +3390,6 @@ Cell editing composes with row selection: clicks inside an editable cell start e
 
 ```tsx
 'use client';
-import Image from 'next/image';
 import { ProductService, type Product } from '@/shared/services/product.service';
 import { Check } from '@primeicons/react/check';
 import { Database } from '@primeicons/react/database';
@@ -3553,7 +3542,7 @@ export default function CellEditSelectionDemo() {
                                         </DataTable.Selection>
                                     </DataTable.Cell>
                                     <DataTable.Cell>
-                                        <Image
+                                        <img
                                             src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                             alt={item.name}
                                             width={36}
@@ -3704,7 +3693,6 @@ Row-level editing with `RowEditor`, `RowEditorInit`, `RowEditorSave` and `RowEdi
 
 ```tsx
 'use client';
-import Image from 'next/image';
 import { ProductService, type Product } from '@/shared/services/product.service';
 import { Check } from '@primeicons/react/check';
 import { Database } from '@primeicons/react/database';
@@ -3813,7 +3801,7 @@ export default function RowEditDemo() {
                                                 <DataTable.CellEditor field="name" rowIndex={index} rowData={item}>
                                                     <DataTable.CellEditorDisplay>
                                                         <div className="flex items-center gap-3">
-                                                            <Image
+                                                            <img
                                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                                 alt={item.name}
                                                                 width={40}
@@ -4242,7 +4230,6 @@ import { ProductService, type Product } from '@/shared/services/product.service'
 import { Database } from '@primeicons/react/database';
 import { DataTable } from '@primereact/ui/datatable';
 import { Tag } from '@primereact/ui/tag';
-import Image from 'next/image';
 import * as React from 'react';
 
 const statusSeverity: Record<string, 'success' | 'warn' | 'danger'> = {
@@ -4295,7 +4282,7 @@ export default function ResizeDemo() {
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={36}
@@ -4347,7 +4334,6 @@ export default function ResizeDemo() {
 
 ```tsx
 'use client';
-import Image from 'next/image';
 import { Database } from '@primeicons/react/database';
 import { ProductService, type Product } from '@/shared/services/product.service';
 import { DataTable } from '@primereact/ui/datatable';
@@ -4407,7 +4393,7 @@ export default function ResizeExpandDemo() {
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={36}
@@ -4472,7 +4458,6 @@ import { Database } from '@primeicons/react/database';
 import type { DataTableColumnReorderEvent } from '@primereact/ui/datatable';
 import { DataTable } from '@primereact/ui/datatable';
 import { Tag } from '@primereact/ui/tag';
-import Image from 'next/image';
 import * as React from 'react';
 
 const statusSeverity: Record<string, 'success' | 'warn' | 'danger'> = {
@@ -4505,7 +4490,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}
@@ -4614,7 +4599,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';
@@ -4679,7 +4663,7 @@ export default function RowReorderDemo() {
                                     </DataTable.Cell>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={36}
@@ -4750,7 +4734,6 @@ import { Checkbox } from '@primereact/ui/checkbox';
 import { DataTable } from '@primereact/ui/datatable';
 import { Popover } from '@primereact/ui/popover';
 import { Tag } from '@primereact/ui/tag';
-import Image from 'next/image';
 import * as React from 'react';
 
 interface ColumnDef {
@@ -4786,7 +4769,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}
@@ -6528,7 +6511,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';
@@ -6596,7 +6578,7 @@ export default function ExportDemo() {
                             <DataTable.Row key={item.id}>
                                 <DataTable.Cell>
                                     <div className="flex items-center gap-3">
-                                        <Image
+                                        <img
                                             src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                             alt={item.name}
                                             width={36}
@@ -6955,7 +6937,6 @@ import { Spinner } from '@primeicons/react/spinner';
 import { Button } from '@primereact/ui/button';
 import { DataTable } from '@primereact/ui/datatable';
 import { Tag } from '@primereact/ui/tag';
-import Image from 'next/image';
 import * as React from 'react';
 
 const statusSeverity: Record<string, 'success' | 'warn' | 'danger'> = {
@@ -7020,7 +7001,7 @@ export default function LoadingOverlayDemo() {
                                     <DataTable.Row key={item.id}>
                                         <DataTable.Cell>
                                             <div className="flex items-center gap-3">
-                                                <Image
+                                                <img
                                                     src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                     alt={item.name}
                                                     width={40}
@@ -7072,7 +7053,6 @@ import { Button } from '@primereact/ui/button';
 import { DataTable } from '@primereact/ui/datatable';
 import { Skeleton } from '@primereact/ui/skeleton';
 import { Tag } from '@primereact/ui/tag';
-import Image from 'next/image';
 import * as React from 'react';
 
 const statusSeverity: Record<string, 'success' | 'warn' | 'danger'> = {
@@ -7163,7 +7143,7 @@ export default function LoadingSkeletonDemo() {
                                     <DataTable.Row key={item.id}>
                                         <DataTable.Cell>
                                             <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/styled/components/dataview.md

@@ -7,7 +7,6 @@ DataView displays data in grid or list layout with pagination and sorting featur
 import { ProductService } from '@/shared/services/product.service';
 import { Button } from '@primereact/ui/button';
 import { Tag } from '@primereact/ui/tag';
-import Image from 'next/image';
 import { DataView } from '@primereact/ui/dataview';
 import * as React from 'react';
 import { Heart } from '@primeicons/react/heart';
@@ -61,14 +60,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>
@@ -142,7 +141,6 @@ Displays a list of items with support for layout switching.
 import { ProductService } from '@/shared/services/product.service';
 import { Button } from '@primereact/ui/button';
 import { Tag } from '@primereact/ui/tag';
-import Image from 'next/image';
 import { DataView } from '@primereact/ui/dataview';
 import * as React from 'react';
 import { Heart } from '@primeicons/react/heart';
@@ -196,14 +194,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>
@@ -269,7 +267,6 @@ import { StarFill } from '@primeicons/react/star-fill';
 import { Button } from '@primereact/ui/button';
 import { Paginator, type PaginatorPagesInstance, type PaginatorRootChangeEvent } from '@primereact/ui/paginator';
 import { Tag } from '@primereact/ui/tag';
-import Image from 'next/image';
 import { DataView } from '@primereact/ui/dataview';
 import * as React from 'react';
 
@@ -322,14 +319,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>
@@ -425,7 +422,6 @@ import { Button } from '@primereact/ui/button';
 import { Tag } from '@primereact/ui/tag';
 import { ToggleButton } from '@primereact/ui/togglebutton';
 import { ToggleButtonGroup, type ToggleButtonGroupValueChangeEvent } from '@primereact/ui/togglebuttongroup';
-import Image from 'next/image';
 import { DataView } from '@primereact/ui/dataview';
 import * as React from 'react';
 import { Heart } from '@primeicons/react/heart';
@@ -503,14 +499,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>
@@ -575,7 +571,6 @@ import { Button } from '@primereact/ui/button';
 import { Tag } from '@primereact/ui/tag';
 import { ToggleButton } from '@primereact/ui/togglebutton';
 import { ToggleButtonGroup, type ToggleButtonGroupValueChangeEvent } from '@primereact/ui/togglebuttongroup';
-import Image from 'next/image';
 import { DataView } from '@primereact/ui/dataview';
 import * as React from 'react';
 
@@ -625,14 +620,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>
@@ -686,14 +681,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="flex justify-center">
                                     <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/styled/components/dialog.md

@@ -220,7 +220,6 @@ The position of the dialog can be customized with the `position` property. The a
 
 ```tsx
 'use client';
-import { ArrowDown, ArrowDownLeft, ArrowDownRight, ArrowLeft, ArrowRight, ArrowUp, ArrowUpLeft, ArrowUpRight } from '@primeicons/react';
 import { Times } from '@primeicons/react/times';
 import { DialogRootChangeEvent, DialogRootProps } from '@primereact/ui/dialog';
 import { Button } from '@primereact/ui/button';
@@ -243,39 +242,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.Root open={open} onOpenChange={(e: DialogRootChangeEvent) => setOpen(e.value as boolean)} position={position} draggable={false}>

package/data/llms/styled/components/inputgroup.md

@@ -366,71 +366,6 @@ export default function SelectDemo() {
 }
 ```
 
-### File Upload
-
-File upload functionality can be integrated within an InputGroup for inline file selection.
-
-```tsx
-'use client';
-import { Tag as TagIcon } from '@primeicons/react';
-import { CloudUpload } from '@primeicons/react/cloud-upload';
-import { Upload } from '@primeicons/react/upload';
-import { Button } from '@primereact/ui/button';
-import { FileUpload, FileUploadRootInstance } from '@primereact/ui/fileupload';
-import { InputGroup } from '@primereact/ui/inputgroup';
-import { InputText } from '@primereact/ui/inputtext';
-
-export default function FileUploadDemo() {
-    return (
-        <div className="flex flex-col items-center justify-center gap-4 max-w-93 mx-auto">
-            <div className="flex flex-wrap items-center justify-center gap-4 w-full">
-                <InputGroup.Root className="w-fit!">
-                    <FileUpload.Root as={InputGroup.Addon} name="demo2[]" accept="image/*" maxFileSize={1000000}>
-                        {(instance: FileUploadRootInstance) => (
-                            <Button severity="secondary" variant="text" onClick={instance.choose} className="justify-start border-none">
-                                <Upload />
-                                {instance.hasFiles ? instance.state.files.map((file) => file.name).join(', ') : 'Choose file'}
-                            </Button>
-                        )}
-                    </FileUpload.Root>
-                    <InputGroup.Addon>
-                        <Button severity="secondary" variant="text" iconOnly>
-                            <CloudUpload />
-                        </Button>
-                    </InputGroup.Addon>
-                </InputGroup.Root>
-                <InputGroup.Root className="flex-1! max-w-fit!">
-                    <InputGroup.Addon>Upload</InputGroup.Addon>
-                    <FileUpload.Root as={InputGroup.Addon} name="demo1[]" accept="image/*" maxFileSize={1000000}>
-                        {(instance: FileUploadRootInstance) => (
-                            <Button severity="secondary" variant="text" onClick={instance.choose} className="justify-start border-none">
-                                <Upload />
-                                {instance.hasFiles ? instance.state.files.map((file) => file.name).join(', ') : 'Choose file'}
-                            </Button>
-                        )}
-                    </FileUpload.Root>
-                </InputGroup.Root>
-            </div>
-
-            <InputGroup.Root>
-                <InputGroup.Addon>
-                    <TagIcon />
-                </InputGroup.Addon>
-                <InputText placeholder="Label" />
-                <FileUpload.Root as={InputGroup.Addon} name="demo3[]" accept="image/*" maxFileSize={1000000}>
-                    {(instance: FileUploadRootInstance) => (
-                        <Button severity="secondary" variant="text" onClick={instance.choose} className="border-none">
-                            <Upload />
-                            {instance.hasFiles ? instance.state.files.map((file) => file.name).join(', ') : 'Browse'}
-                        </Button>
-                    )}
-                </FileUpload.Root>
-            </InputGroup.Root>
-        </div>
-    );
-}
-```
-
 ### Float Label
 
 FloatLabel visually integrates a label with its form element. Visit [FloatLabel](/docs/components/floatlabel) documentation for more information.

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

@@ -10,7 +10,6 @@ import { Search } from '@primeicons/react/search';
 import { IconField } from '@primereact/ui/iconfield';
 import { InputText } from '@primereact/ui/inputtext';
 import { Select, type SelectValueChangeEvent } from '@primereact/ui/select';
-import Image from 'next/image';
 import * as React from 'react';
 
 type Language = {
@@ -52,7 +51,7 @@ export default function Preview() {
                     <Select.Value placeholder="Select a language">
                         {language && (
                             <span className="flex items-center gap-2">
-                                <Image
+                                <img
                                     alt={language.label}
                                     src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png"
                                     className={`flag flag-${language.code}`}
@@ -89,7 +88,7 @@ export default function Preview() {
                                 {filteredLanguages.map((l, index) => (
                                     <Select.Option key={l.value} index={index} uKey={l.value} className="justify-between">
                                         <div className="flex items-center gap-2">
-                                            <Image
+                                            <img
                                                 alt={l.label}
                                                 src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png"
                                                 className={`flag flag-${l.code}`}
@@ -665,7 +664,6 @@ import { SelectValueChangeEvent } from '@primereact/ui/select';
 import { IconField } from '@primereact/ui/iconfield';
 import { InputText } from '@primereact/ui/inputtext';
 import { Select } from '@primereact/ui/select';
-import Image from 'next/image';
 import * as React from 'react';
 
 type Country = {
@@ -730,7 +728,7 @@ export default function FilterDemo() {
                                 {filteredCountries.map((country, index) => (
                                     <Select.Option 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`}