diff --git a/.eslintrc.json b/.eslintrc.json
index f3961bb32c..546efaee73 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -45,6 +45,9 @@
[
// Side-effects group
"^\\u0000",
+ // React group
+ "^Frontend/demo/react-example",
+ "^react",
// External group
"^",
// Vaadin group
diff --git a/frontend/demo/auth/LoginView.tsx b/frontend/demo/auth/LoginView.tsx
index d19be4f8fb..c7c12971b0 100644
--- a/frontend/demo/auth/LoginView.tsx
+++ b/frontend/demo/auth/LoginView.tsx
@@ -1,9 +1,9 @@
-import { useSignal } from '@vaadin/hilla-react-signals';
+import React from 'react';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import type { ViewConfig } from '@vaadin/hilla-file-router/types.js';
+import { useSignal } from '@vaadin/hilla-react-signals';
import { LoginOverlay } from '@vaadin/react-components/LoginOverlay.js';
-import React from 'react';
import { useAuth } from './auth';
-import type { ViewConfig } from '@vaadin/hilla-file-router/types.js';
export const config: ViewConfig = {
menu: { exclude: true },
diff --git a/frontend/demo/auth/MainLayout.tsx b/frontend/demo/auth/MainLayout.tsx
index d841918306..85a328474a 100644
--- a/frontend/demo/auth/MainLayout.tsx
+++ b/frontend/demo/auth/MainLayout.tsx
@@ -1,10 +1,10 @@
+import { Suspense } from 'react';
+import { NavLink, Outlet } from 'react-router-dom';
import { AppLayout } from '@vaadin/react-components/AppLayout.js';
import { Button } from '@vaadin/react-components/Button.js';
import { DrawerToggle } from '@vaadin/react-components/DrawerToggle.js';
-import { Suspense } from 'react';
-import { NavLink, Outlet } from 'react-router-dom';
-import { useRouteMetadata } from './routing';
import { useAuth } from './auth';
+import { useRouteMetadata } from './routing';
const navLinkClasses = ({ isActive }: any) =>
`block rounded-m p-s ${isActive ? 'bg-primary-10 text-primary' : 'text-body'}`;
diff --git a/frontend/demo/auth/index.tsx b/frontend/demo/auth/index.tsx
index 9c032a9416..5131b97e21 100644
--- a/frontend/demo/auth/index.tsx
+++ b/frontend/demo/auth/index.tsx
@@ -2,8 +2,8 @@
import { createElement } from 'react';
import { createRoot } from 'react-dom/client';
import { RouterProvider } from 'react-router-dom';
-import router from './routes';
import { AuthProvider } from './auth';
+import router from './routes';
function App() {
return (
diff --git a/frontend/demo/auth/routes.tsx b/frontend/demo/auth/routes.tsx
index 0652de9dd2..ceb8097f64 100644
--- a/frontend/demo/auth/routes.tsx
+++ b/frontend/demo/auth/routes.tsx
@@ -1,8 +1,8 @@
-import { protectRoutes } from '@vaadin/hilla-react-auth';
import { createBrowserRouter, type RouteObject } from 'react-router-dom';
-import MainLayout from './MainLayout';
-import LoginView from './LoginView';
+import { protectRoutes } from '@vaadin/hilla-react-auth';
import AboutView from './AboutView';
+import LoginView from './LoginView';
+import MainLayout from './MainLayout';
// tag::snippet[]
export const routes: RouteObject[] = protectRoutes([
diff --git a/frontend/demo/component/accordion/react/accordion-summary.tsx b/frontend/demo/component/accordion/react/accordion-summary.tsx
index dbec95e898..96c4292b1e 100644
--- a/frontend/demo/component/accordion/react/accordion-summary.tsx
+++ b/frontend/demo/component/accordion/react/accordion-summary.tsx
@@ -1,26 +1,26 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useForm } from '@vaadin/hilla-react-form';
+import { useSignal } from '@vaadin/hilla-react-signals';
import {
Accordion,
AccordionHeading,
+ type AccordionOpenedChangedEvent,
AccordionPanel,
Button,
ComboBox,
EmailField,
FormLayout,
+ type FormLayoutResponsiveStep,
HorizontalLayout,
TextField,
VerticalLayout,
- type AccordionOpenedChangedEvent,
- type FormLayoutResponsiveStep,
} from '@vaadin/react-components';
-import { useForm } from '@vaadin/hilla-react-form';
-import type Country from 'Frontend/generated/com/vaadin/demo/domain/Country';
+import { getCountries } from 'Frontend/demo/domain/DataService';
import CardModel from 'Frontend/generated/com/vaadin/demo/domain/CardModel';
+import type Country from 'Frontend/generated/com/vaadin/demo/domain/Country';
import PersonModel from 'Frontend/generated/com/vaadin/demo/domain/PersonModel';
-import { getCountries } from 'Frontend/demo/domain/DataService';
const responsiveSteps: FormLayoutResponsiveStep[] = [
{ minWidth: 0, columns: 1 },
diff --git a/frontend/demo/component/app-layout/react/app-layout-basic.tsx b/frontend/demo/component/app-layout/react/app-layout-basic.tsx
index cc3ab29154..af26363eb4 100644
--- a/frontend/demo/component/app-layout/react/app-layout-basic.tsx
+++ b/frontend/demo/component/app-layout/react/app-layout-basic.tsx
@@ -1,3 +1,4 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect, useRef } from 'react';
import {
@@ -6,10 +7,9 @@ import {
Icon,
Scroller,
SideNav,
- SideNavItem,
type SideNavElement,
+ SideNavItem,
} from '@vaadin/react-components';
-import '@vaadin/icons';
import { patchSideNavNavigation } from '../../side-nav/react/side-nav-helper';
const h1Style = {
diff --git a/frontend/demo/component/app-layout/react/app-layout-bottom-navbar.tsx b/frontend/demo/component/app-layout/react/app-layout-bottom-navbar.tsx
index 1ca689c239..08217925d0 100644
--- a/frontend/demo/component/app-layout/react/app-layout-bottom-navbar.tsx
+++ b/frontend/demo/component/app-layout/react/app-layout-bottom-navbar.tsx
@@ -1,13 +1,13 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect, useRef } from 'react';
import {
AppLayout,
- HorizontalLayout,
- Icon,
type AppLayoutElement,
+ HorizontalLayout,
type HorizontalLayoutElement,
+ Icon,
} from '@vaadin/react-components';
-import '@vaadin/icons';
import { patchAppLayoutNavigation } from '../app-layout-helper';
const h1Style = {
diff --git a/frontend/demo/component/app-layout/react/app-layout-drawer.tsx b/frontend/demo/component/app-layout/react/app-layout-drawer.tsx
index 5892b9f1aa..9227fafaf2 100644
--- a/frontend/demo/component/app-layout/react/app-layout-drawer.tsx
+++ b/frontend/demo/component/app-layout/react/app-layout-drawer.tsx
@@ -1,3 +1,4 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect, useRef } from 'react';
import {
@@ -6,10 +7,9 @@ import {
Icon,
Scroller,
SideNav,
- SideNavItem,
type SideNavElement,
+ SideNavItem,
} from '@vaadin/react-components';
-import '@vaadin/icons';
import { patchSideNavNavigation } from '../../side-nav/react/side-nav-helper';
const h1Style = {
diff --git a/frontend/demo/component/app-layout/react/app-layout-height-auto.tsx b/frontend/demo/component/app-layout/react/app-layout-height-auto.tsx
index e05046cb10..e2ef86faf1 100644
--- a/frontend/demo/component/app-layout/react/app-layout-height-auto.tsx
+++ b/frontend/demo/component/app-layout/react/app-layout-height-auto.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { AppLayout, Grid, GridColumn } from '@vaadin/react-components';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
diff --git a/frontend/demo/component/app-layout/react/app-layout-height-full.tsx b/frontend/demo/component/app-layout/react/app-layout-height-full.tsx
index 047cdea342..ab859031ee 100644
--- a/frontend/demo/component/app-layout/react/app-layout-height-full.tsx
+++ b/frontend/demo/component/app-layout/react/app-layout-height-full.tsx
@@ -1,8 +1,8 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
import { css } from 'lit'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { AppLayout, Grid, GridColumn } from '@vaadin/react-components';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
diff --git a/frontend/demo/component/app-layout/react/app-layout-navbar-placement-side.tsx b/frontend/demo/component/app-layout/react/app-layout-navbar-placement-side.tsx
index a55963f4af..b3bfc3f599 100644
--- a/frontend/demo/component/app-layout/react/app-layout-navbar-placement-side.tsx
+++ b/frontend/demo/component/app-layout/react/app-layout-navbar-placement-side.tsx
@@ -1,3 +1,4 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect, useRef } from 'react';
import {
@@ -6,10 +7,9 @@ import {
Icon,
Scroller,
SideNav,
- SideNavItem,
type SideNavElement,
+ SideNavItem,
} from '@vaadin/react-components';
-import '@vaadin/icons';
import { patchSideNavNavigation } from '../../side-nav/react/side-nav-helper';
const h1Style = {
diff --git a/frontend/demo/component/app-layout/react/app-layout-navbar-placement.tsx b/frontend/demo/component/app-layout/react/app-layout-navbar-placement.tsx
index 807f6b2177..0e466affe5 100644
--- a/frontend/demo/component/app-layout/react/app-layout-navbar-placement.tsx
+++ b/frontend/demo/component/app-layout/react/app-layout-navbar-placement.tsx
@@ -1,3 +1,4 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect, useRef } from 'react';
import {
@@ -6,11 +7,10 @@ import {
Icon,
Scroller,
SideNav,
- SideNavItem,
type SideNavElement,
+ SideNavItem,
} from '@vaadin/react-components';
import { patchSideNavNavigation } from '../../side-nav/react/side-nav-helper';
-import '@vaadin/icons';
const h1Style = {
fontSize: 'var(--lumo-font-size-l)',
diff --git a/frontend/demo/component/app-layout/react/app-layout-secondary-navigation.tsx b/frontend/demo/component/app-layout/react/app-layout-secondary-navigation.tsx
index b6131fee94..37e747cdd0 100644
--- a/frontend/demo/component/app-layout/react/app-layout-secondary-navigation.tsx
+++ b/frontend/demo/component/app-layout/react/app-layout-secondary-navigation.tsx
@@ -1,17 +1,17 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect, useRef } from 'react';
import {
AppLayout,
DrawerToggle,
HorizontalLayout,
+ type HorizontalLayoutElement,
Icon,
Scroller,
SideNav,
- SideNavItem,
- type HorizontalLayoutElement,
type SideNavElement,
+ SideNavItem,
} from '@vaadin/react-components';
-import '@vaadin/icons';
import { patchSideNavNavigation } from '../../side-nav/react/side-nav-helper';
import { patchAppLayoutNavigation } from '../app-layout-helper';
diff --git a/frontend/demo/component/auto-crud/react/auto-crud-basic.tsx b/frontend/demo/component/auto-crud/react/auto-crud-basic.tsx
index b7936d804d..06c6055c1e 100644
--- a/frontend/demo/component/auto-crud/react/auto-crud-basic.tsx
+++ b/frontend/demo/component/auto-crud/react/auto-crud-basic.tsx
@@ -1,10 +1,10 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react'; // hidden-source-line
-import { autoGridHostStyles } from 'Frontend/demo/component/auto-grid/react/auto-grid-host-styles'; // hidden-source-line
// tag::snippet[]
import { AutoCrud } from '@vaadin/hilla-react-crud';
-import { EmployeeService } from 'Frontend/generated/endpoints';
+import { autoGridHostStyles } from 'Frontend/demo/component/auto-grid/react/auto-grid-host-styles'; // hidden-source-line
import EmployeeModel from 'Frontend/generated/com/vaadin/demo/fusion/crud/EmployeeModel';
+import { EmployeeService } from 'Frontend/generated/endpoints';
function Example() {
return ;
diff --git a/frontend/demo/component/auto-crud/react/auto-crud-customized-form.tsx b/frontend/demo/component/auto-crud/react/auto-crud-customized-form.tsx
index 2fc2ead35b..0a8268cfb1 100644
--- a/frontend/demo/component/auto-crud/react/auto-crud-customized-form.tsx
+++ b/frontend/demo/component/auto-crud/react/auto-crud-customized-form.tsx
@@ -1,10 +1,10 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react'; // hidden-source-line
-import { autoGridHostStyles } from 'Frontend/demo/component/auto-grid/react/auto-grid-host-styles'; // hidden-source-line
import { AutoCrud } from '@vaadin/hilla-react-crud';
-import { EmployeeService } from 'Frontend/generated/endpoints';
-import EmployeeModel from 'Frontend/generated/com/vaadin/demo/fusion/crud/EmployeeModel';
import { TextArea } from '@vaadin/react-components/TextArea';
+import { autoGridHostStyles } from 'Frontend/demo/component/auto-grid/react/auto-grid-host-styles'; // hidden-source-line
+import EmployeeModel from 'Frontend/generated/com/vaadin/demo/fusion/crud/EmployeeModel';
+import { EmployeeService } from 'Frontend/generated/endpoints';
function Example() {
return (
diff --git a/frontend/demo/component/auto-crud/react/auto-crud-customized-grid.tsx b/frontend/demo/component/auto-crud/react/auto-crud-customized-grid.tsx
index 401909b6f2..5408032909 100644
--- a/frontend/demo/component/auto-crud/react/auto-crud-customized-grid.tsx
+++ b/frontend/demo/component/auto-crud/react/auto-crud-customized-grid.tsx
@@ -1,10 +1,10 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react'; // hidden-source-line
-import { autoGridHostStyles } from 'Frontend/demo/component/auto-grid/react/auto-grid-host-styles'; // hidden-source-line
import { AutoCrud } from '@vaadin/hilla-react-crud';
-import { EmployeeService } from 'Frontend/generated/endpoints';
-import EmployeeModel from 'Frontend/generated/com/vaadin/demo/fusion/crud/EmployeeModel';
+import { autoGridHostStyles } from 'Frontend/demo/component/auto-grid/react/auto-grid-host-styles'; // hidden-source-line
import type Employee from 'Frontend/generated/com/vaadin/demo/fusion/crud/Employee';
+import EmployeeModel from 'Frontend/generated/com/vaadin/demo/fusion/crud/EmployeeModel';
+import { EmployeeService } from 'Frontend/generated/endpoints';
function Example() {
// tag::snippet[]
diff --git a/frontend/demo/component/auto-form/react/auto-form-basic.tsx b/frontend/demo/component/auto-form/react/auto-form-basic.tsx
index c00b144ba6..6845373813 100644
--- a/frontend/demo/component/auto-form/react/auto-form-basic.tsx
+++ b/frontend/demo/component/auto-form/react/auto-form-basic.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react'; // hidden-source-line
-import { autoGridHostStyles } from 'Frontend/demo/component/auto-grid/react/auto-grid-host-styles'; // hidden-source-line
import { AutoForm } from '@vaadin/hilla-react-crud';
+import { autoGridHostStyles } from 'Frontend/demo/component/auto-grid/react/auto-grid-host-styles'; // hidden-source-line
import EmployeeModel from 'Frontend/generated/com/vaadin/demo/fusion/crud/EmployeeModel';
import { EmployeeService } from 'Frontend/generated/endpoints.js';
diff --git a/frontend/demo/component/auto-form/react/auto-form-custom-renderer-alt.tsx b/frontend/demo/component/auto-form/react/auto-form-custom-renderer-alt.tsx
index 1aa3efdc9f..0fe200b260 100644
--- a/frontend/demo/component/auto-form/react/auto-form-custom-renderer-alt.tsx
+++ b/frontend/demo/component/auto-form/react/auto-form-custom-renderer-alt.tsx
@@ -1,11 +1,11 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react'; // hidden-source-line
+import { AutoForm, type AutoFormLayoutRendererProps } from '@vaadin/hilla-react-crud';
+import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
+import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
import { autoGridHostStyles } from 'Frontend/demo/component/auto-grid/react/auto-grid-host-styles'; // hidden-source-line
-import { type AutoFormLayoutRendererProps, AutoForm } from '@vaadin/hilla-react-crud';
-import { EmployeeService } from 'Frontend/generated/endpoints.js';
import EmployeeModel from 'Frontend/generated/com/vaadin/demo/fusion/crud/EmployeeModel';
-import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
-import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
+import { EmployeeService } from 'Frontend/generated/endpoints.js';
// tag::snippet[]
function GroupingLayoutRenderer({ children }: AutoFormLayoutRendererProps) {
diff --git a/frontend/demo/component/auto-form/react/auto-form-custom-renderer.tsx b/frontend/demo/component/auto-form/react/auto-form-custom-renderer.tsx
index 935cd73365..542d2538b1 100644
--- a/frontend/demo/component/auto-form/react/auto-form-custom-renderer.tsx
+++ b/frontend/demo/component/auto-form/react/auto-form-custom-renderer.tsx
@@ -1,18 +1,18 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react'; // hidden-source-line
-import { autoGridHostStyles } from 'Frontend/demo/component/auto-grid/react/auto-grid-host-styles'; // hidden-source-line
-import { type AutoFormLayoutRendererProps, AutoForm } from '@vaadin/hilla-react-crud';
-import { EmployeeService } from 'Frontend/generated/endpoints.js';
-import EmployeeModel from 'Frontend/generated/com/vaadin/demo/fusion/crud/EmployeeModel';
-import Gender from 'Frontend/generated/com/vaadin/demo/fusion/crud/Employee/Gender';
-import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
+import { AutoForm, type AutoFormLayoutRendererProps } from '@vaadin/hilla-react-crud';
+import { Checkbox } from '@vaadin/react-components/Checkbox.js';
+import { DatePicker } from '@vaadin/react-components/DatePicker.js';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
-import { TextField } from '@vaadin/react-components/TextField.js';
import { Select } from '@vaadin/react-components/Select.js';
-import { DatePicker } from '@vaadin/react-components/DatePicker.js';
-import { TimePicker } from '@vaadin/react-components/TimePicker.js';
-import { Checkbox } from '@vaadin/react-components/Checkbox.js';
import { TextArea } from '@vaadin/react-components/TextArea.js';
+import { TextField } from '@vaadin/react-components/TextField.js';
+import { TimePicker } from '@vaadin/react-components/TimePicker.js';
+import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
+import { autoGridHostStyles } from 'Frontend/demo/component/auto-grid/react/auto-grid-host-styles'; // hidden-source-line
+import Gender from 'Frontend/generated/com/vaadin/demo/fusion/crud/Employee/Gender';
+import EmployeeModel from 'Frontend/generated/com/vaadin/demo/fusion/crud/EmployeeModel';
+import { EmployeeService } from 'Frontend/generated/endpoints.js';
// tag::snippet[]
function GroupingLayoutRenderer({ form }: AutoFormLayoutRendererProps) {
diff --git a/frontend/demo/component/auto-form/react/auto-form-delete-after-delete.tsx b/frontend/demo/component/auto-form/react/auto-form-delete-after-delete.tsx
index 9632d9a875..991378edf4 100644
--- a/frontend/demo/component/auto-form/react/auto-form-delete-after-delete.tsx
+++ b/frontend/demo/component/auto-form/react/auto-form-delete-after-delete.tsx
@@ -1,17 +1,17 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react'; // hidden-source-line
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
-import { autoGridHostStyles } from 'Frontend/demo/component/auto-grid/react/auto-grid-host-styles'; // hidden-source-line
import { AutoForm } from '@vaadin/hilla-react-crud';
-import EmployeeModel from 'Frontend/generated/com/vaadin/demo/fusion/crud/EmployeeModel';
-import { EmployeeService } from 'Frontend/generated/endpoints.js';
-import Gender from 'Frontend/generated/com/vaadin/demo/fusion/crud/Employee/Gender';
-import type Employee from 'Frontend/generated/com/vaadin/demo/fusion/crud/Employee';
-import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
-import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Button } from '@vaadin/react-components/Button.js';
+import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
import { Notification } from '@vaadin/react-components/Notification.js';
+import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
+import { autoGridHostStyles } from 'Frontend/demo/component/auto-grid/react/auto-grid-host-styles'; // hidden-source-line
+import type Employee from 'Frontend/generated/com/vaadin/demo/fusion/crud/Employee';
+import Gender from 'Frontend/generated/com/vaadin/demo/fusion/crud/Employee/Gender';
+import EmployeeModel from 'Frontend/generated/com/vaadin/demo/fusion/crud/EmployeeModel';
+import { EmployeeService } from 'Frontend/generated/endpoints.js';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/auto-form/react/auto-form-edit-new-modes.tsx b/frontend/demo/component/auto-form/react/auto-form-edit-new-modes.tsx
index 391e8d889f..08ddc68518 100644
--- a/frontend/demo/component/auto-form/react/auto-form-edit-new-modes.tsx
+++ b/frontend/demo/component/auto-form/react/auto-form-edit-new-modes.tsx
@@ -1,17 +1,17 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react'; // hidden-source-line
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
-import { autoGridHostStyles } from 'Frontend/demo/component/auto-grid/react/auto-grid-host-styles'; // hidden-source-line
import { AutoForm } from '@vaadin/hilla-react-crud';
-import EmployeeModel from 'Frontend/generated/com/vaadin/demo/fusion/crud/EmployeeModel';
-import { EmployeeService } from 'Frontend/generated/endpoints.js';
-import Gender from 'Frontend/generated/com/vaadin/demo/fusion/crud/Employee/Gender';
-import type Employee from 'Frontend/generated/com/vaadin/demo/fusion/crud/Employee';
-import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
-import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Button } from '@vaadin/react-components/Button.js';
+import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
import { Notification } from '@vaadin/react-components/Notification.js';
+import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
+import { autoGridHostStyles } from 'Frontend/demo/component/auto-grid/react/auto-grid-host-styles'; // hidden-source-line
+import type Employee from 'Frontend/generated/com/vaadin/demo/fusion/crud/Employee';
+import Gender from 'Frontend/generated/com/vaadin/demo/fusion/crud/Employee/Gender';
+import EmployeeModel from 'Frontend/generated/com/vaadin/demo/fusion/crud/EmployeeModel';
+import { EmployeeService } from 'Frontend/generated/endpoints.js';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/auto-form/react/auto-form-field-colspan.tsx b/frontend/demo/component/auto-form/react/auto-form-field-colspan.tsx
index 241b31a95b..a3181d72f2 100644
--- a/frontend/demo/component/auto-form/react/auto-form-field-colspan.tsx
+++ b/frontend/demo/component/auto-form/react/auto-form-field-colspan.tsx
@@ -1,9 +1,9 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react'; // hidden-source-line
-import { autoGridHostStyles } from 'Frontend/demo/component/auto-grid/react/auto-grid-host-styles'; // hidden-source-line
import { AutoForm } from '@vaadin/hilla-react-crud';
-import { EmployeeService } from 'Frontend/generated/endpoints.js';
+import { autoGridHostStyles } from 'Frontend/demo/component/auto-grid/react/auto-grid-host-styles'; // hidden-source-line
import EmployeeModel from 'Frontend/generated/com/vaadin/demo/fusion/crud/EmployeeModel';
+import { EmployeeService } from 'Frontend/generated/endpoints.js';
function Example() {
return (
diff --git a/frontend/demo/component/auto-form/react/auto-form-field-custom-label.tsx b/frontend/demo/component/auto-form/react/auto-form-field-custom-label.tsx
index fc76d201cc..b8f99954e7 100644
--- a/frontend/demo/component/auto-form/react/auto-form-field-custom-label.tsx
+++ b/frontend/demo/component/auto-form/react/auto-form-field-custom-label.tsx
@@ -1,9 +1,9 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react'; // hidden-source-line
-import { autoGridHostStyles } from 'Frontend/demo/component/auto-grid/react/auto-grid-host-styles'; // hidden-source-line
import { AutoForm } from '@vaadin/hilla-react-crud';
-import { EmployeeService } from 'Frontend/generated/endpoints.js';
+import { autoGridHostStyles } from 'Frontend/demo/component/auto-grid/react/auto-grid-host-styles'; // hidden-source-line
import EmployeeModel from 'Frontend/generated/com/vaadin/demo/fusion/crud/EmployeeModel';
+import { EmployeeService } from 'Frontend/generated/endpoints.js';
function Example() {
return (
diff --git a/frontend/demo/component/auto-form/react/auto-form-field-custom-renderer.tsx b/frontend/demo/component/auto-form/react/auto-form-field-custom-renderer.tsx
index 47c8e5f771..56747e3477 100644
--- a/frontend/demo/component/auto-form/react/auto-form-field-custom-renderer.tsx
+++ b/frontend/demo/component/auto-form/react/auto-form-field-custom-renderer.tsx
@@ -1,10 +1,10 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react'; // hidden-source-line
-import { autoGridHostStyles } from 'Frontend/demo/component/auto-grid/react/auto-grid-host-styles'; // hidden-source-line
import { AutoForm } from '@vaadin/hilla-react-crud';
-import { EmployeeService } from 'Frontend/generated/endpoints.js';
-import EmployeeModel from 'Frontend/generated/com/vaadin/demo/fusion/crud/EmployeeModel';
import { TextArea } from '@vaadin/react-components/TextArea.js';
+import { autoGridHostStyles } from 'Frontend/demo/component/auto-grid/react/auto-grid-host-styles'; // hidden-source-line
+import EmployeeModel from 'Frontend/generated/com/vaadin/demo/fusion/crud/EmployeeModel';
+import { EmployeeService } from 'Frontend/generated/endpoints.js';
function Example() {
return (
diff --git a/frontend/demo/component/auto-form/react/auto-form-field-visibility.tsx b/frontend/demo/component/auto-form/react/auto-form-field-visibility.tsx
index 746885fb46..6953cdd759 100644
--- a/frontend/demo/component/auto-form/react/auto-form-field-visibility.tsx
+++ b/frontend/demo/component/auto-form/react/auto-form-field-visibility.tsx
@@ -1,9 +1,9 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react'; // hidden-source-line
-import { autoGridHostStyles } from 'Frontend/demo/component/auto-grid/react/auto-grid-host-styles'; // hidden-source-line
import { AutoForm } from '@vaadin/hilla-react-crud';
-import { EmployeeService } from 'Frontend/generated/endpoints.js';
+import { autoGridHostStyles } from 'Frontend/demo/component/auto-grid/react/auto-grid-host-styles'; // hidden-source-line
import EmployeeModel from 'Frontend/generated/com/vaadin/demo/fusion/crud/EmployeeModel';
+import { EmployeeService } from 'Frontend/generated/endpoints.js';
function Example() {
return (
diff --git a/frontend/demo/component/auto-form/react/auto-form-on-errors.tsx b/frontend/demo/component/auto-form/react/auto-form-on-errors.tsx
index ac58a48b22..6015a53f2a 100644
--- a/frontend/demo/component/auto-form/react/auto-form-on-errors.tsx
+++ b/frontend/demo/component/auto-form/react/auto-form-on-errors.tsx
@@ -1,12 +1,12 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react'; // hidden-source-line
-import { autoGridHostStyles } from 'Frontend/demo/component/auto-grid/react/auto-grid-host-styles'; // hidden-source-line
import { AutoForm } from '@vaadin/hilla-react-crud';
+import { Notification } from '@vaadin/react-components/Notification.js';
+import { autoGridHostStyles } from 'Frontend/demo/component/auto-grid/react/auto-grid-host-styles'; // hidden-source-line
+import type Employee from 'Frontend/generated/com/vaadin/demo/fusion/crud/Employee';
+import Gender from 'Frontend/generated/com/vaadin/demo/fusion/crud/Employee/Gender';
import EmployeeModel from 'Frontend/generated/com/vaadin/demo/fusion/crud/EmployeeModel';
import { EmployeeService } from 'Frontend/generated/endpoints';
-import Gender from 'Frontend/generated/com/vaadin/demo/fusion/crud/Employee/Gender';
-import type Employee from 'Frontend/generated/com/vaadin/demo/fusion/crud/Employee';
-import { Notification } from '@vaadin/react-components/Notification.js';
function Example() {
// tag::snippet[]
diff --git a/frontend/demo/component/auto-form/react/auto-form-responsive-steps.tsx b/frontend/demo/component/auto-form/react/auto-form-responsive-steps.tsx
index 539e904765..38f870be4e 100644
--- a/frontend/demo/component/auto-form/react/auto-form-responsive-steps.tsx
+++ b/frontend/demo/component/auto-form/react/auto-form-responsive-steps.tsx
@@ -1,9 +1,9 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react'; // hidden-source-line
-import { autoGridHostStyles } from 'Frontend/demo/component/auto-grid/react/auto-grid-host-styles'; // hidden-source-line
import { AutoForm } from '@vaadin/hilla-react-crud';
-import { EmployeeService } from 'Frontend/generated/endpoints.js';
+import { autoGridHostStyles } from 'Frontend/demo/component/auto-grid/react/auto-grid-host-styles'; // hidden-source-line
import EmployeeModel from 'Frontend/generated/com/vaadin/demo/fusion/crud/EmployeeModel';
+import { EmployeeService } from 'Frontend/generated/endpoints.js';
function Example() {
return (
diff --git a/frontend/demo/component/auto-grid/react/auto-grid-basic.tsx b/frontend/demo/component/auto-grid/react/auto-grid-basic.tsx
index 94e8927758..4be295f541 100644
--- a/frontend/demo/component/auto-grid/react/auto-grid-basic.tsx
+++ b/frontend/demo/component/auto-grid/react/auto-grid-basic.tsx
@@ -1,11 +1,11 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import { autoGridHostStyles } from './auto-grid-host-styles'; // hidden-source-line
import React from 'react'; // hidden-source-line
// tag::snippet[]
import { AutoGrid } from '@vaadin/hilla-react-crud';
// tag::apply-backend[]
-import { ProductService } from 'Frontend/generated/endpoints';
import ProductModel from 'Frontend/generated/com/vaadin/demo/fusion/crud/ProductModel';
+import { ProductService } from 'Frontend/generated/endpoints';
+import { autoGridHostStyles } from './auto-grid-host-styles'; // hidden-source-line
function Example() {
return ;
diff --git a/frontend/demo/component/auto-grid/react/auto-grid-column-options.tsx b/frontend/demo/component/auto-grid/react/auto-grid-column-options.tsx
index b6d5dc99fe..254ce39ef9 100644
--- a/frontend/demo/component/auto-grid/react/auto-grid-column-options.tsx
+++ b/frontend/demo/component/auto-grid/react/auto-grid-column-options.tsx
@@ -1,10 +1,10 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import { autoGridHostStyles } from './auto-grid-host-styles'; // hidden-source-line
import React from 'react';
import { AutoGrid } from '@vaadin/hilla-react-crud';
-import { ProductService } from 'Frontend/generated/endpoints';
-import ProductModel from 'Frontend/generated/com/vaadin/demo/fusion/crud/ProductModel';
import type Product from 'Frontend/generated/com/vaadin/demo/fusion/crud/Product';
+import ProductModel from 'Frontend/generated/com/vaadin/demo/fusion/crud/ProductModel';
+import { ProductService } from 'Frontend/generated/endpoints';
+import { autoGridHostStyles } from './auto-grid-host-styles'; // hidden-source-line
// tag::snippet[]
function PriceRenderer({ item }: { item: Product }) {
diff --git a/frontend/demo/component/auto-grid/react/auto-grid-custom-columns.tsx b/frontend/demo/component/auto-grid/react/auto-grid-custom-columns.tsx
index 9af8228662..6e76451d6e 100644
--- a/frontend/demo/component/auto-grid/react/auto-grid-custom-columns.tsx
+++ b/frontend/demo/component/auto-grid/react/auto-grid-custom-columns.tsx
@@ -1,11 +1,11 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import { autoGridHostStyles } from './auto-grid-host-styles'; // hidden-source-line
import React from 'react';
import { AutoGrid } from '@vaadin/hilla-react-crud';
-import { ProductService } from 'Frontend/generated/endpoints';
-import ProductModel from 'Frontend/generated/com/vaadin/demo/fusion/crud/ProductModel';
import { GridColumn } from '@vaadin/react-components/GridColumn';
import type Product from 'Frontend/generated/com/vaadin/demo/fusion/crud/Product';
+import ProductModel from 'Frontend/generated/com/vaadin/demo/fusion/crud/ProductModel';
+import { ProductService } from 'Frontend/generated/endpoints';
+import { autoGridHostStyles } from './auto-grid-host-styles'; // hidden-source-line
function Example() {
// tag::snippet[]
diff --git a/frontend/demo/component/auto-grid/react/auto-grid-filtering.tsx b/frontend/demo/component/auto-grid/react/auto-grid-filtering.tsx
index a4da38e258..208a128f53 100644
--- a/frontend/demo/component/auto-grid/react/auto-grid-filtering.tsx
+++ b/frontend/demo/component/auto-grid/react/auto-grid-filtering.tsx
@@ -1,16 +1,16 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import { autoGridHostStyles } from './auto-grid-host-styles'; // hidden-source-line
import React from 'react'; // hidden-source-line
-import { useComputed, useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
import { AutoGrid } from '@vaadin/hilla-react-crud';
-import { ProductService } from 'Frontend/generated/endpoints';
-import ProductModel from 'Frontend/generated/com/vaadin/demo/fusion/crud/ProductModel';
-import Matcher from 'Frontend/generated/com/vaadin/hilla/crud/filter/PropertyStringFilter/Matcher';
-import { TextField } from '@vaadin/react-components/TextField.js';
+import { useComputed, useSignal } from '@vaadin/hilla-react-signals';
import { Select, type SelectItem } from '@vaadin/react-components/Select.js';
-import type PropertyStringFilter from 'Frontend/generated/com/vaadin/hilla/crud/filter/PropertyStringFilter';
+import { TextField } from '@vaadin/react-components/TextField.js';
+import ProductModel from 'Frontend/generated/com/vaadin/demo/fusion/crud/ProductModel';
import type AndFilter from 'Frontend/generated/com/vaadin/hilla/crud/filter/AndFilter';
+import type PropertyStringFilter from 'Frontend/generated/com/vaadin/hilla/crud/filter/PropertyStringFilter';
+import Matcher from 'Frontend/generated/com/vaadin/hilla/crud/filter/PropertyStringFilter/Matcher';
+import { ProductService } from 'Frontend/generated/endpoints';
+import { autoGridHostStyles } from './auto-grid-host-styles'; // hidden-source-line
const categories: SelectItem[] = [
{ label: 'All', value: 'All' },
diff --git a/frontend/demo/component/auto-grid/react/auto-grid-selection.tsx b/frontend/demo/component/auto-grid/react/auto-grid-selection.tsx
index 00018f52aa..3685a67463 100644
--- a/frontend/demo/component/auto-grid/react/auto-grid-selection.tsx
+++ b/frontend/demo/component/auto-grid/react/auto-grid-selection.tsx
@@ -1,12 +1,12 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import { autoGridHostStyles } from './auto-grid-host-styles'; // hidden-source-line
import React from 'react'; // hidden-source-line
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
import { AutoGrid } from '@vaadin/hilla-react-crud';
-import { ProductService } from 'Frontend/generated/endpoints';
-import ProductModel from 'Frontend/generated/com/vaadin/demo/fusion/crud/ProductModel';
+import { useSignal } from '@vaadin/hilla-react-signals';
import type Product from 'Frontend/generated/com/vaadin/demo/fusion/crud/Product';
+import ProductModel from 'Frontend/generated/com/vaadin/demo/fusion/crud/ProductModel';
+import { ProductService } from 'Frontend/generated/endpoints';
+import { autoGridHostStyles } from './auto-grid-host-styles'; // hidden-source-line
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/auto-grid/react/auto-grid-visible-columns.tsx b/frontend/demo/component/auto-grid/react/auto-grid-visible-columns.tsx
index 9d02dd7e3b..2b0348d230 100644
--- a/frontend/demo/component/auto-grid/react/auto-grid-visible-columns.tsx
+++ b/frontend/demo/component/auto-grid/react/auto-grid-visible-columns.tsx
@@ -1,9 +1,9 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import { autoGridHostStyles } from './auto-grid-host-styles'; // hidden-source-line
import React from 'react';
import { AutoGrid } from '@vaadin/hilla-react-crud';
-import { ProductService } from 'Frontend/generated/endpoints';
import ProductModel from 'Frontend/generated/com/vaadin/demo/fusion/crud/ProductModel';
+import { ProductService } from 'Frontend/generated/endpoints';
+import { autoGridHostStyles } from './auto-grid-host-styles'; // hidden-source-line
function Example() {
return (
diff --git a/frontend/demo/component/avatar/react/avatar-basic.tsx b/frontend/demo/component/avatar/react/avatar-basic.tsx
index 34fa7f1b0a..d53b5d7e1e 100644
--- a/frontend/demo/component/avatar/react/avatar-basic.tsx
+++ b/frontend/demo/component/avatar/react/avatar-basic.tsx
@@ -1,11 +1,11 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Avatar } from '@vaadin/react-components';
+import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
-import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/avatar/react/avatar-group-basic.tsx b/frontend/demo/component/avatar/react/avatar-group-basic.tsx
index 86f18ba703..b84aea3b2c 100644
--- a/frontend/demo/component/avatar/react/avatar-group-basic.tsx
+++ b/frontend/demo/component/avatar/react/avatar-group-basic.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useComputed, useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useComputed, useSignal } from '@vaadin/hilla-react-signals';
import { AvatarGroup } from '@vaadin/react-components';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
diff --git a/frontend/demo/component/avatar/react/avatar-group-bg-color.tsx b/frontend/demo/component/avatar/react/avatar-group-bg-color.tsx
index 8c080cfd09..2e0cbebe5c 100644
--- a/frontend/demo/component/avatar/react/avatar-group-bg-color.tsx
+++ b/frontend/demo/component/avatar/react/avatar-group-bg-color.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useComputed, useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useComputed, useSignal } from '@vaadin/hilla-react-signals';
import { AvatarGroup } from '@vaadin/react-components';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
diff --git a/frontend/demo/component/avatar/react/avatar-group-internationalisation.tsx b/frontend/demo/component/avatar/react/avatar-group-internationalisation.tsx
index 4cc872bdda..e0dcc3f7fb 100644
--- a/frontend/demo/component/avatar/react/avatar-group-internationalisation.tsx
+++ b/frontend/demo/component/avatar/react/avatar-group-internationalisation.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { AvatarGroup, type AvatarGroupI18n } from '@vaadin/react-components';
import { getPeople } from 'Frontend/demo/domain/DataService';
diff --git a/frontend/demo/component/avatar/react/avatar-group-max-items.tsx b/frontend/demo/component/avatar/react/avatar-group-max-items.tsx
index a6101bddd4..61066d5f5d 100644
--- a/frontend/demo/component/avatar/react/avatar-group-max-items.tsx
+++ b/frontend/demo/component/avatar/react/avatar-group-max-items.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useComputed, useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useComputed, useSignal } from '@vaadin/hilla-react-signals';
import { AvatarGroup } from '@vaadin/react-components';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
diff --git a/frontend/demo/component/avatar/react/avatar-image.tsx b/frontend/demo/component/avatar/react/avatar-image.tsx
index 250c8568b8..1ff9d0f18f 100644
--- a/frontend/demo/component/avatar/react/avatar-image.tsx
+++ b/frontend/demo/component/avatar/react/avatar-image.tsx
@@ -1,11 +1,11 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Avatar, HorizontalLayout } from '@vaadin/react-components';
-import companyLogo from '../../../../../src/main/resources/images/company-logo.png';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
+import companyLogo from '../../../../../src/main/resources/images/company-logo.png';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/avatar/react/avatar-menu-bar.tsx b/frontend/demo/component/avatar/react/avatar-menu-bar.tsx
index 0878a9a051..435721813e 100644
--- a/frontend/demo/component/avatar/react/avatar-menu-bar.tsx
+++ b/frontend/demo/component/avatar/react/avatar-menu-bar.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Avatar, MenuBar } from '@vaadin/react-components';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
diff --git a/frontend/demo/component/avatar/react/avatar-name.tsx b/frontend/demo/component/avatar/react/avatar-name.tsx
index 5149f4dada..94e952bc20 100644
--- a/frontend/demo/component/avatar/react/avatar-name.tsx
+++ b/frontend/demo/component/avatar/react/avatar-name.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Avatar } from '@vaadin/react-components';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
diff --git a/frontend/demo/component/avatar/react/avatar-sizes.tsx b/frontend/demo/component/avatar/react/avatar-sizes.tsx
index ced58c6e60..0ca3e34faa 100644
--- a/frontend/demo/component/avatar/react/avatar-sizes.tsx
+++ b/frontend/demo/component/avatar/react/avatar-sizes.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Avatar, HorizontalLayout } from '@vaadin/react-components';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
diff --git a/frontend/demo/component/badge/react/badge-highlight.tsx b/frontend/demo/component/badge/react/badge-highlight.tsx
index 58afae6fb6..cba91a4e5a 100644
--- a/frontend/demo/component/badge/react/badge-highlight.tsx
+++ b/frontend/demo/component/badge/react/badge-highlight.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Grid, GridColumn } from '@vaadin/react-components';
import { getReports, ReportStatus } from 'Frontend/demo/domain/DataService';
import type Report from 'Frontend/generated/com/vaadin/demo/domain/Report';
diff --git a/frontend/demo/component/badge/react/badge-icons-only-table.tsx b/frontend/demo/component/badge/react/badge-icons-only-table.tsx
index 47c839bacb..db7e2d41b6 100644
--- a/frontend/demo/component/badge/react/badge-icons-only-table.tsx
+++ b/frontend/demo/component/badge/react/badge-icons-only-table.tsx
@@ -1,11 +1,11 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
-import { Grid, GridColumn, Icon, type GridColumnElement } from '@vaadin/react-components';
+import { useSignal } from '@vaadin/hilla-react-signals';
+import { Grid, GridColumn, type GridColumnElement, Icon } from '@vaadin/react-components';
import { getUserPermissions } from 'Frontend/demo/domain/DataService';
import type UserPermissions from 'Frontend/generated/com/vaadin/demo/domain/UserPermissions';
-import '@vaadin/icons';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/badge/react/badge-icons-only.tsx b/frontend/demo/component/badge/react/badge-icons-only.tsx
index abaaec5d23..4c3000cb81 100644
--- a/frontend/demo/component/badge/react/badge-icons-only.tsx
+++ b/frontend/demo/component/badge/react/badge-icons-only.tsx
@@ -1,7 +1,7 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { HorizontalLayout, Icon } from '@vaadin/react-components';
-import '@vaadin/icons';
function Example() {
return (
diff --git a/frontend/demo/component/badge/react/badge-icons.tsx b/frontend/demo/component/badge/react/badge-icons.tsx
index c888cdfb78..201f3d4d01 100644
--- a/frontend/demo/component/badge/react/badge-icons.tsx
+++ b/frontend/demo/component/badge/react/badge-icons.tsx
@@ -1,7 +1,7 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { HorizontalLayout, Icon, VerticalLayout } from '@vaadin/react-components';
-import '@vaadin/icons';
function Example() {
return (
diff --git a/frontend/demo/component/badge/react/badge-interactive.tsx b/frontend/demo/component/badge/react/badge-interactive.tsx
index d81bc6cdb2..2fa9c70e4a 100644
--- a/frontend/demo/component/badge/react/badge-interactive.tsx
+++ b/frontend/demo/component/badge/react/badge-interactive.tsx
@@ -1,18 +1,17 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import {
Button,
+ type ButtonElement,
ComboBox,
+ type ComboBoxChangeEvent,
HorizontalLayout,
Icon,
VerticalLayout,
- type ButtonElement,
- type ComboBoxChangeEvent,
} from '@vaadin/react-components';
-import '@vaadin/icons';
-
import { getPeople } from 'Frontend/demo/domain/DataService';
type Profession = string;
diff --git a/frontend/demo/component/basiclayouts/react/basic-layouts-expanding-items.tsx b/frontend/demo/component/basiclayouts/react/basic-layouts-expanding-items.tsx
index d2d7ae2ab4..aad30218d1 100644
--- a/frontend/demo/component/basiclayouts/react/basic-layouts-expanding-items.tsx
+++ b/frontend/demo/component/basiclayouts/react/basic-layouts-expanding-items.tsx
@@ -1,9 +1,9 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
import React from 'react'; // hidden-source-line
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Button, HorizontalLayout, RadioButton, RadioGroup } from '@vaadin/react-components';
+import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-horizontal-alignment.tsx b/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-horizontal-alignment.tsx
index ea5992394c..c9c96e9327 100644
--- a/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-horizontal-alignment.tsx
+++ b/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-horizontal-alignment.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
import React from 'react';
import { Button, HorizontalLayout } from '@vaadin/react-components';
+import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
function Example() {
return (
diff --git a/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-individual-alignment.tsx b/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-individual-alignment.tsx
index 7ff945a3ff..7f0ba2c28c 100644
--- a/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-individual-alignment.tsx
+++ b/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-individual-alignment.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
import React from 'react';
import { HorizontalLayout, TextArea } from '@vaadin/react-components';
+import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
function Example() {
return (
diff --git a/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-margin.tsx b/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-margin.tsx
index a41d37661d..193efd4619 100644
--- a/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-margin.tsx
+++ b/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-margin.tsx
@@ -1,9 +1,9 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
import React from 'react'; // hidden-source-line
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Button, HorizontalLayout, RadioButton, RadioGroup } from '@vaadin/react-components';
+import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-padding.tsx b/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-padding.tsx
index 3e7b4b1c0a..b0ce10622b 100644
--- a/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-padding.tsx
+++ b/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-padding.tsx
@@ -1,8 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
import React from 'react'; // hidden-source-line
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import {
Button,
HorizontalLayout,
@@ -10,6 +9,7 @@ import {
RadioGroup,
type RadioGroupValueChangedEvent,
} from '@vaadin/react-components';
+import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-spacing-variants.tsx b/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-spacing-variants.tsx
index fb52b5bfd0..70b61a4bd5 100644
--- a/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-spacing-variants.tsx
+++ b/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-spacing-variants.tsx
@@ -1,9 +1,9 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
import React from 'react'; // hidden-source-line
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Button, HorizontalLayout, RadioButton, RadioGroup } from '@vaadin/react-components';
+import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-spacing.tsx b/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-spacing.tsx
index 426e11e14e..d4ce962beb 100644
--- a/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-spacing.tsx
+++ b/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-spacing.tsx
@@ -1,9 +1,9 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
import React from 'react'; // hidden-source-line
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Button, HorizontalLayout, RadioButton, RadioGroup } from '@vaadin/react-components';
+import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-vertical-alignment.tsx b/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-vertical-alignment.tsx
index cf7e6128ec..1ad7827a57 100644
--- a/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-vertical-alignment.tsx
+++ b/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-vertical-alignment.tsx
@@ -1,8 +1,8 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
import React from 'react';
import { TextArea } from '@vaadin/react-components';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout';
+import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
function Example() {
return (
diff --git a/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout.tsx b/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout.tsx
index 7d9686096f..5c5940a7f9 100644
--- a/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout.tsx
+++ b/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
import React from 'react';
import { Button, HorizontalLayout } from '@vaadin/react-components';
+import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
function Example() {
return (
diff --git a/frontend/demo/component/basiclayouts/react/basic-layouts-margin.tsx b/frontend/demo/component/basiclayouts/react/basic-layouts-margin.tsx
index bf8ebfea9b..217df30a97 100644
--- a/frontend/demo/component/basiclayouts/react/basic-layouts-margin.tsx
+++ b/frontend/demo/component/basiclayouts/react/basic-layouts-margin.tsx
@@ -1,9 +1,9 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
import React from 'react'; // hidden-source-line
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Button, RadioButton, RadioGroup, VerticalLayout } from '@vaadin/react-components';
+import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/basiclayouts/react/basic-layouts-padding.tsx b/frontend/demo/component/basiclayouts/react/basic-layouts-padding.tsx
index 9c5068c208..8a39dae376 100644
--- a/frontend/demo/component/basiclayouts/react/basic-layouts-padding.tsx
+++ b/frontend/demo/component/basiclayouts/react/basic-layouts-padding.tsx
@@ -1,10 +1,10 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
import React from 'react'; // hidden-source-line
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Button, RadioButton, RadioGroup, VerticalLayout } from '@vaadin/react-components';
import type { RadioGroupValueChangedEvent } from '@vaadin/react-components/RadioGroup.js';
+import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/basiclayouts/react/basic-layouts-spacing-variants.tsx b/frontend/demo/component/basiclayouts/react/basic-layouts-spacing-variants.tsx
index d8b3483eb6..f3e1988ab0 100644
--- a/frontend/demo/component/basiclayouts/react/basic-layouts-spacing-variants.tsx
+++ b/frontend/demo/component/basiclayouts/react/basic-layouts-spacing-variants.tsx
@@ -1,10 +1,10 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
import React from 'react'; // hidden-source-line
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Button, RadioButton, RadioGroup, VerticalLayout } from '@vaadin/react-components';
import type { RadioGroupValueChangedEvent } from '@vaadin/react-components/RadioGroup';
+import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/basiclayouts/react/basic-layouts-spacing.tsx b/frontend/demo/component/basiclayouts/react/basic-layouts-spacing.tsx
index 52e74aafe0..d5acf4dc91 100644
--- a/frontend/demo/component/basiclayouts/react/basic-layouts-spacing.tsx
+++ b/frontend/demo/component/basiclayouts/react/basic-layouts-spacing.tsx
@@ -1,15 +1,15 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
import React from 'react'; // hidden-source-line
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import {
Button,
RadioButton,
RadioGroup,
- VerticalLayout,
type RadioGroupValueChangedEvent,
+ VerticalLayout,
} from '@vaadin/react-components';
+import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/basiclayouts/react/basic-layouts-vertical-layout-horizontal-alignment.tsx b/frontend/demo/component/basiclayouts/react/basic-layouts-vertical-layout-horizontal-alignment.tsx
index be4c69dda7..08a196cdf1 100644
--- a/frontend/demo/component/basiclayouts/react/basic-layouts-vertical-layout-horizontal-alignment.tsx
+++ b/frontend/demo/component/basiclayouts/react/basic-layouts-vertical-layout-horizontal-alignment.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
import React from 'react';
import { Button, VerticalLayout } from '@vaadin/react-components';
+import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
function Example() {
return (
diff --git a/frontend/demo/component/basiclayouts/react/basic-layouts-vertical-layout-individual-alignment.tsx b/frontend/demo/component/basiclayouts/react/basic-layouts-vertical-layout-individual-alignment.tsx
index 4472338178..a4fc7461b8 100644
--- a/frontend/demo/component/basiclayouts/react/basic-layouts-vertical-layout-individual-alignment.tsx
+++ b/frontend/demo/component/basiclayouts/react/basic-layouts-vertical-layout-individual-alignment.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
import React from 'react';
import { Button, VerticalLayout } from '@vaadin/react-components';
+import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
function Example() {
return (
diff --git a/frontend/demo/component/basiclayouts/react/basic-layouts-vertical-layout-vertical-alignment.tsx b/frontend/demo/component/basiclayouts/react/basic-layouts-vertical-layout-vertical-alignment.tsx
index 916312f9cc..cdb7c51c28 100644
--- a/frontend/demo/component/basiclayouts/react/basic-layouts-vertical-layout-vertical-alignment.tsx
+++ b/frontend/demo/component/basiclayouts/react/basic-layouts-vertical-layout-vertical-alignment.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
import React from 'react';
import { Button, VerticalLayout } from '@vaadin/react-components';
+import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
function Example() {
return (
diff --git a/frontend/demo/component/basiclayouts/react/basic-layouts-vertical-layout.tsx b/frontend/demo/component/basiclayouts/react/basic-layouts-vertical-layout.tsx
index 31f3ebf353..0f206d5556 100644
--- a/frontend/demo/component/basiclayouts/react/basic-layouts-vertical-layout.tsx
+++ b/frontend/demo/component/basiclayouts/react/basic-layouts-vertical-layout.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
import React from 'react';
import { Button, VerticalLayout } from '@vaadin/react-components';
+import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
function Example() {
return (
diff --git a/frontend/demo/component/board/react/ExampleChart.tsx b/frontend/demo/component/board/react/ExampleChart.tsx
index 2014ff5d75..5f9051f61b 100644
--- a/frontend/demo/component/board/react/ExampleChart.tsx
+++ b/frontend/demo/component/board/react/ExampleChart.tsx
@@ -1,6 +1,6 @@
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Chart } from '@vaadin/react-components-pro/Chart.js';
import { ChartSeries } from '@vaadin/react-components-pro/ChartSeries.js';
import { getViewEvents } from 'Frontend/demo/domain/DataService';
diff --git a/frontend/demo/component/board/react/ExampleIndicator.tsx b/frontend/demo/component/board/react/ExampleIndicator.tsx
index fc67c203d7..229b29b1bd 100644
--- a/frontend/demo/component/board/react/ExampleIndicator.tsx
+++ b/frontend/demo/component/board/react/ExampleIndicator.tsx
@@ -1,7 +1,7 @@
+import '@vaadin/icons';
import React, { useMemo } from 'react';
-import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
import { Icon } from '@vaadin/react-components/Icon.js';
-import '@vaadin/icons';
+import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
// tag::snippet[]
function ExampleIndicator({ title = 'Unknown', current = '0', change = 0 }) {
diff --git a/frontend/demo/component/board/react/ExampleStatistics.tsx b/frontend/demo/component/board/react/ExampleStatistics.tsx
index 68e90240dc..863bb6ce5d 100644
--- a/frontend/demo/component/board/react/ExampleStatistics.tsx
+++ b/frontend/demo/component/board/react/ExampleStatistics.tsx
@@ -1,6 +1,6 @@
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { getServiceHealth } from 'Frontend/demo/domain/DataService';
import type ServiceHealth from 'Frontend/generated/com/vaadin/demo/domain/ServiceHealth';
diff --git a/frontend/demo/component/board/react/board-basic.tsx b/frontend/demo/component/board/react/board-basic.tsx
index 003b377354..04ab1e4aaa 100644
--- a/frontend/demo/component/board/react/board-basic.tsx
+++ b/frontend/demo/component/board/react/board-basic.tsx
@@ -2,9 +2,9 @@ import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-lin
import React from 'react';
import { Board } from '@vaadin/react-components-pro/Board.js';
import { BoardRow } from '@vaadin/react-components-pro/BoardRow.js';
-import ExampleIndicator from './ExampleIndicator';
-import ExampleChart from './ExampleChart';
import boardStyles from './board-styles';
+import ExampleChart from './ExampleChart';
+import ExampleIndicator from './ExampleIndicator';
function Example() {
return (
diff --git a/frontend/demo/component/board/react/board-breakpoints.tsx b/frontend/demo/component/board/react/board-breakpoints.tsx
index f4c8ee78c7..cdc2389aa3 100644
--- a/frontend/demo/component/board/react/board-breakpoints.tsx
+++ b/frontend/demo/component/board/react/board-breakpoints.tsx
@@ -1,8 +1,8 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
+import { SplitLayout } from '@vaadin/react-components/SplitLayout.js';
import { Board } from '@vaadin/react-components-pro/Board.js';
import { BoardRow } from '@vaadin/react-components-pro/BoardRow.js';
-import { SplitLayout } from '@vaadin/react-components/SplitLayout.js';
import boardStyles from './board-styles';
function Example() {
diff --git a/frontend/demo/component/board/react/board-column-wrapping.tsx b/frontend/demo/component/board/react/board-column-wrapping.tsx
index 7e776a1704..a4f8951fe7 100644
--- a/frontend/demo/component/board/react/board-column-wrapping.tsx
+++ b/frontend/demo/component/board/react/board-column-wrapping.tsx
@@ -2,8 +2,8 @@ import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-lin
import React from 'react';
import { SplitLayout } from '@vaadin/react-components/SplitLayout.js';
import { Board } from '@vaadin/react-components-pro/Board.js';
-import boardStyles from './board-styles';
import { BoardRow } from '@vaadin/react-components-pro/BoardRow.js';
+import boardStyles from './board-styles';
function Example() {
return (
diff --git a/frontend/demo/component/board/react/board-nested.tsx b/frontend/demo/component/board/react/board-nested.tsx
index 8d3fbbb6c6..0222201bcf 100644
--- a/frontend/demo/component/board/react/board-nested.tsx
+++ b/frontend/demo/component/board/react/board-nested.tsx
@@ -2,9 +2,9 @@ import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-lin
import React from 'react';
import { Board } from '@vaadin/react-components-pro/Board.js';
import { BoardRow } from '@vaadin/react-components-pro/BoardRow.js';
+import boardStyles from './board-styles';
import ExampleIndicator from './ExampleIndicator';
import ExampleStatistics from './ExampleStatistics';
-import boardStyles from './board-styles';
function Example() {
return (
diff --git a/frontend/demo/component/button/react/button-basic.tsx b/frontend/demo/component/button/react/button-basic.tsx
index c99134bfd7..ac1513491f 100644
--- a/frontend/demo/component/button/react/button-basic.tsx
+++ b/frontend/demo/component/button/react/button-basic.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react'; // hidden-source-line
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Button } from '@vaadin/react-components/Button.js';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
diff --git a/frontend/demo/component/button/react/button-dialog.tsx b/frontend/demo/component/button/react/button-dialog.tsx
index c037131c1f..cad2b9142c 100644
--- a/frontend/demo/component/button/react/button-dialog.tsx
+++ b/frontend/demo/component/button/react/button-dialog.tsx
@@ -1,11 +1,11 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { Button } from '@vaadin/react-components/Button.js';
-import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
import { EmailField } from '@vaadin/react-components/EmailField.js';
-import { TextField } from '@vaadin/react-components/TextField.js';
-import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
import { FormLayout } from '@vaadin/react-components/FormLayout.js';
+import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
+import { TextField } from '@vaadin/react-components/TextField.js';
+import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
function Example() {
return (
diff --git a/frontend/demo/component/button/react/button-disable-long-action.tsx b/frontend/demo/component/button/react/button-disable-long-action.tsx
index 4317ba3e59..d72fca3b9b 100644
--- a/frontend/demo/component/button/react/button-disable-long-action.tsx
+++ b/frontend/demo/component/button/react/button-disable-long-action.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Button } from '@vaadin/react-components/Button.js';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
import { ProgressBar } from '@vaadin/react-components/ProgressBar.js';
diff --git a/frontend/demo/component/button/react/button-form.tsx b/frontend/demo/component/button/react/button-form.tsx
index 85ba85317d..20904e9899 100644
--- a/frontend/demo/component/button/react/button-form.tsx
+++ b/frontend/demo/component/button/react/button-form.tsx
@@ -1,11 +1,11 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { Button } from '@vaadin/react-components/Button.js';
-import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
import { EmailField } from '@vaadin/react-components/EmailField.js';
-import { TextField } from '@vaadin/react-components/TextField.js';
-import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
import { FormLayout } from '@vaadin/react-components/FormLayout.js';
+import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
+import { TextField } from '@vaadin/react-components/TextField.js';
+import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
function Example() {
return (
diff --git a/frontend/demo/component/button/react/button-grid.tsx b/frontend/demo/component/button/react/button-grid.tsx
index 9a63a07ffa..494cd8e486 100644
--- a/frontend/demo/component/button/react/button-grid.tsx
+++ b/frontend/demo/component/button/react/button-grid.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Button } from '@vaadin/react-components/Button.js'; // hidden-source-line
import { Grid } from '@vaadin/react-components/Grid.js';
import { GridColumn } from '@vaadin/react-components/GridColumn.js';
diff --git a/frontend/demo/component/button/react/button-icons.tsx b/frontend/demo/component/button/react/button-icons.tsx
index 91be40b822..c4916c0c3d 100644
--- a/frontend/demo/component/button/react/button-icons.tsx
+++ b/frontend/demo/component/button/react/button-icons.tsx
@@ -1,10 +1,10 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { Button } from '@vaadin/react-components/Button.js';
-import { Tooltip } from '@vaadin/react-components/Tooltip.js';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
import { Icon } from '@vaadin/react-components/Icon.js';
-import '@vaadin/icons';
+import { Tooltip } from '@vaadin/react-components/Tooltip.js';
function Example() {
return (
diff --git a/frontend/demo/component/button/react/button-labels.tsx b/frontend/demo/component/button/react/button-labels.tsx
index bd9050d57b..ff6ffee50b 100644
--- a/frontend/demo/component/button/react/button-labels.tsx
+++ b/frontend/demo/component/button/react/button-labels.tsx
@@ -1,11 +1,11 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react'; // hidden-source-line
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Button } from '@vaadin/react-components/Button.js';
-import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
import { EmailField } from '@vaadin/react-components/EmailField.js';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
+import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/charts/react/charts-overview.tsx b/frontend/demo/component/charts/react/charts-overview.tsx
index 3b42a2e841..dd21048556 100644
--- a/frontend/demo/component/charts/react/charts-overview.tsx
+++ b/frontend/demo/component/charts/react/charts-overview.tsx
@@ -1,10 +1,10 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react'; // hidden-source-line
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import type { Options, PointOptionsObject, SeriesOptionsType } from 'highcharts';
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Chart } from '@vaadin/react-components-pro/Chart.js';
import { ChartSeries } from '@vaadin/react-components-pro/ChartSeries.js';
-import type { Options, PointOptionsObject, SeriesOptionsType } from 'highcharts';
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
diff --git a/frontend/demo/component/checkbox/react/checkbox-adjacent-groups.tsx b/frontend/demo/component/checkbox/react/checkbox-adjacent-groups.tsx
index 6b8de45ad0..b918c533b5 100644
--- a/frontend/demo/component/checkbox/react/checkbox-adjacent-groups.tsx
+++ b/frontend/demo/component/checkbox/react/checkbox-adjacent-groups.tsx
@@ -1,8 +1,8 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
import { Checkbox } from '@vaadin/react-components/Checkbox.js';
import { CheckboxGroup } from '@vaadin/react-components/CheckboxGroup.js';
+import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
function Example() {
return (
diff --git a/frontend/demo/component/checkbox/react/checkbox-group-basic.tsx b/frontend/demo/component/checkbox/react/checkbox-group-basic.tsx
index 9cae57eac6..b7b250b8f4 100644
--- a/frontend/demo/component/checkbox/react/checkbox-group-basic.tsx
+++ b/frontend/demo/component/checkbox/react/checkbox-group-basic.tsx
@@ -1,9 +1,9 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react'; // hidden-source-line
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
-import { CheckboxGroup } from '@vaadin/react-components/CheckboxGroup.js';
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Checkbox } from '@vaadin/react-components/Checkbox.js';
+import { CheckboxGroup } from '@vaadin/react-components/CheckboxGroup.js';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/checkbox/react/checkbox-group-styles.tsx b/frontend/demo/component/checkbox/react/checkbox-group-styles.tsx
index 4bca25c899..41facdb6fe 100644
--- a/frontend/demo/component/checkbox/react/checkbox-group-styles.tsx
+++ b/frontend/demo/component/checkbox/react/checkbox-group-styles.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { CheckboxGroup } from '@vaadin/react-components/CheckboxGroup.js';
import { Checkbox } from '@vaadin/react-components/Checkbox.js';
+import { CheckboxGroup } from '@vaadin/react-components/CheckboxGroup.js';
function Example() {
return (
diff --git a/frontend/demo/component/checkbox/react/checkbox-indeterminate.tsx b/frontend/demo/component/checkbox/react/checkbox-indeterminate.tsx
index 0fa269ac83..99675307a7 100644
--- a/frontend/demo/component/checkbox/react/checkbox-indeterminate.tsx
+++ b/frontend/demo/component/checkbox/react/checkbox-indeterminate.tsx
@@ -1,12 +1,12 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Checkbox } from '@vaadin/react-components/Checkbox.js';
import { CheckboxGroup } from '@vaadin/react-components/CheckboxGroup.js';
import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
-import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
import { getPeople } from 'Frontend/demo/domain/DataService';
+import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
// tag::snippet[]
function Example() {
diff --git a/frontend/demo/component/checkbox/react/checkbox-readonly.tsx b/frontend/demo/component/checkbox/react/checkbox-readonly.tsx
index 37b3eab5d7..6c37667036 100644
--- a/frontend/demo/component/checkbox/react/checkbox-readonly.tsx
+++ b/frontend/demo/component/checkbox/react/checkbox-readonly.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useState } from 'react';
-import { CheckboxGroup } from '@vaadin/react-components/CheckboxGroup.js';
import { Checkbox } from '@vaadin/react-components/Checkbox.js';
+import { CheckboxGroup } from '@vaadin/react-components/CheckboxGroup.js';
function Example() {
const [value] = useState(['0', '2']);
diff --git a/frontend/demo/component/checkbox/react/checkbox-required.tsx b/frontend/demo/component/checkbox/react/checkbox-required.tsx
index 39993bc1df..8f9cb348ef 100644
--- a/frontend/demo/component/checkbox/react/checkbox-required.tsx
+++ b/frontend/demo/component/checkbox/react/checkbox-required.tsx
@@ -1,10 +1,10 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
+import { Required } from '@vaadin/hilla-lit-form';
+import { useForm, useFormPart } from '@vaadin/hilla-react-form';
import { Button } from '@vaadin/react-components/Button.js';
import { Checkbox } from '@vaadin/react-components/Checkbox.js';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
-import { Required } from '@vaadin/hilla-lit-form';
-import { useForm, useFormPart } from '@vaadin/hilla-react-form';
import UserPermissionsModel from 'Frontend/generated/com/vaadin/demo/domain/UserPermissionsModel';
function Example() {
diff --git a/frontend/demo/component/combobox/react/combo-box-auto-open.tsx b/frontend/demo/component/combobox/react/combo-box-auto-open.tsx
index 0c9d0c3352..3a78ec2709 100644
--- a/frontend/demo/component/combobox/react/combo-box-auto-open.tsx
+++ b/frontend/demo/component/combobox/react/combo-box-auto-open.tsx
@@ -1,10 +1,10 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { ComboBox } from '@vaadin/react-components/ComboBox.js';
-import type Country from 'Frontend/generated/com/vaadin/demo/domain/Country';
import { getCountries } from 'Frontend/demo/domain/DataService';
+import type Country from 'Frontend/generated/com/vaadin/demo/domain/Country';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/combobox/react/combo-box-basic-features.tsx b/frontend/demo/component/combobox/react/combo-box-basic-features.tsx
index 864d1bbfb7..2506192d94 100644
--- a/frontend/demo/component/combobox/react/combo-box-basic-features.tsx
+++ b/frontend/demo/component/combobox/react/combo-box-basic-features.tsx
@@ -1,9 +1,9 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { ComboBox } from '@vaadin/react-components/ComboBox.js';
-import { Tooltip } from '@vaadin/react-components/Tooltip.js';
import { Icon } from '@vaadin/react-components/Icon.js';
-import '@vaadin/icons';
+import { Tooltip } from '@vaadin/react-components/Tooltip.js';
function Example() {
return (
diff --git a/frontend/demo/component/combobox/react/combo-box-basic.tsx b/frontend/demo/component/combobox/react/combo-box-basic.tsx
index 0aa0b72e9f..2de9bd792d 100644
--- a/frontend/demo/component/combobox/react/combo-box-basic.tsx
+++ b/frontend/demo/component/combobox/react/combo-box-basic.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { ComboBox } from '@vaadin/react-components/ComboBox.js';
import { getCountries } from 'Frontend/demo/domain/DataService';
import type Country from 'Frontend/generated/com/vaadin/demo/domain/Country';
diff --git a/frontend/demo/component/combobox/react/combo-box-custom-entry-2.tsx b/frontend/demo/component/combobox/react/combo-box-custom-entry-2.tsx
index d6106f419d..0a1c2e7a81 100644
--- a/frontend/demo/component/combobox/react/combo-box-custom-entry-2.tsx
+++ b/frontend/demo/component/combobox/react/combo-box-custom-entry-2.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react'; // hidden-source-line
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { ComboBox } from '@vaadin/react-components/ComboBox.js';
function Example() {
diff --git a/frontend/demo/component/combobox/react/combo-box-filtering-1.tsx b/frontend/demo/component/combobox/react/combo-box-filtering-1.tsx
index cae6e5d241..a195f22a5f 100644
--- a/frontend/demo/component/combobox/react/combo-box-filtering-1.tsx
+++ b/frontend/demo/component/combobox/react/combo-box-filtering-1.tsx
@@ -1,10 +1,10 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { ComboBox } from '@vaadin/react-components/ComboBox.js';
-import type Country from 'Frontend/generated/com/vaadin/demo/domain/Country';
import { getCountries } from 'Frontend/demo/domain/DataService';
+import type Country from 'Frontend/generated/com/vaadin/demo/domain/Country';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/combobox/react/combo-box-filtering-2.tsx b/frontend/demo/component/combobox/react/combo-box-filtering-2.tsx
index 406c1d18a0..270952c3dd 100644
--- a/frontend/demo/component/combobox/react/combo-box-filtering-2.tsx
+++ b/frontend/demo/component/combobox/react/combo-box-filtering-2.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { ComboBox, type ComboBoxFilterChangedEvent } from '@vaadin/react-components/ComboBox.js';
import { getCountries } from 'Frontend/demo/domain/DataService';
import type Country from 'Frontend/generated/com/vaadin/demo/domain/Country';
diff --git a/frontend/demo/component/combobox/react/combo-box-popup-width.tsx b/frontend/demo/component/combobox/react/combo-box-popup-width.tsx
index d0ddb60b02..af4bb595dc 100644
--- a/frontend/demo/component/combobox/react/combo-box-popup-width.tsx
+++ b/frontend/demo/component/combobox/react/combo-box-popup-width.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { ComboBox } from '@vaadin/react-components/ComboBox.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
diff --git a/frontend/demo/component/combobox/react/combo-box-presentation.tsx b/frontend/demo/component/combobox/react/combo-box-presentation.tsx
index e92583b85c..2b2ac47d03 100644
--- a/frontend/demo/component/combobox/react/combo-box-presentation.tsx
+++ b/frontend/demo/component/combobox/react/combo-box-presentation.tsx
@@ -1,9 +1,9 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
-import { ComboBox } from '@vaadin/react-components/ComboBox.js';
+import { useSignal } from '@vaadin/hilla-react-signals';
import type { ComboBoxFilterChangedEvent } from '@vaadin/react-components/ComboBox.js';
+import { ComboBox } from '@vaadin/react-components/ComboBox.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
diff --git a/frontend/demo/component/combobox/react/combo-box-readonly-and-disabled.tsx b/frontend/demo/component/combobox/react/combo-box-readonly-and-disabled.tsx
index 55d82f0359..1cb2886aad 100644
--- a/frontend/demo/component/combobox/react/combo-box-readonly-and-disabled.tsx
+++ b/frontend/demo/component/combobox/react/combo-box-readonly-and-disabled.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
import { ComboBox } from '@vaadin/react-components/ComboBox.js';
+import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
function Example() {
return (
diff --git a/frontend/demo/component/confirmdialog/react/confirm-dialog-basic.tsx b/frontend/demo/component/confirmdialog/react/confirm-dialog-basic.tsx
index 8bfb905388..775d34b6ef 100644
--- a/frontend/demo/component/confirmdialog/react/confirm-dialog-basic.tsx
+++ b/frontend/demo/component/confirmdialog/react/confirm-dialog-basic.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react'; // hidden-source-line
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Button } from '@vaadin/react-components/Button.js';
import {
ConfirmDialog,
diff --git a/frontend/demo/component/confirmdialog/react/confirm-dialog-cancel-button.tsx b/frontend/demo/component/confirmdialog/react/confirm-dialog-cancel-button.tsx
index 662692d43e..c30139ab8a 100644
--- a/frontend/demo/component/confirmdialog/react/confirm-dialog-cancel-button.tsx
+++ b/frontend/demo/component/confirmdialog/react/confirm-dialog-cancel-button.tsx
@@ -1,13 +1,13 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react'; // hidden-source-line
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Button } from '@vaadin/react-components/Button.js';
-import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
import {
ConfirmDialog,
type ConfirmDialogOpenedChangedEvent,
} from '@vaadin/react-components/ConfirmDialog.js';
+import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/confirmdialog/react/confirm-dialog-confirm-button.tsx b/frontend/demo/component/confirmdialog/react/confirm-dialog-confirm-button.tsx
index 0131f2e18d..45b83a377d 100644
--- a/frontend/demo/component/confirmdialog/react/confirm-dialog-confirm-button.tsx
+++ b/frontend/demo/component/confirmdialog/react/confirm-dialog-confirm-button.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react'; // hidden-source-line
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Button } from '@vaadin/react-components/Button.js';
import {
ConfirmDialog,
diff --git a/frontend/demo/component/confirmdialog/react/confirm-dialog-reject-button.tsx b/frontend/demo/component/confirmdialog/react/confirm-dialog-reject-button.tsx
index 7178248eb0..812c5b8749 100644
--- a/frontend/demo/component/confirmdialog/react/confirm-dialog-reject-button.tsx
+++ b/frontend/demo/component/confirmdialog/react/confirm-dialog-reject-button.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react'; // hidden-source-line
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Button } from '@vaadin/react-components/Button.js';
import {
ConfirmDialog,
diff --git a/frontend/demo/component/contextmenu/react/context-menu-basic.tsx b/frontend/demo/component/contextmenu/react/context-menu-basic.tsx
index 1d01765486..78aa8adf4b 100644
--- a/frontend/demo/component/contextmenu/react/context-menu-basic.tsx
+++ b/frontend/demo/component/contextmenu/react/context-menu-basic.tsx
@@ -1,12 +1,12 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect, useRef } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { ContextMenu } from '@vaadin/react-components/ContextMenu.js';
import { Grid, type GridElement } from '@vaadin/react-components/Grid.js';
+import { GridColumn } from '@vaadin/react-components/GridColumn.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
-import { GridColumn } from '@vaadin/react-components/GridColumn.js';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/contextmenu/react/context-menu-best-practices.tsx b/frontend/demo/component/contextmenu/react/context-menu-best-practices.tsx
index 25f91c7eb0..3b70a9361d 100644
--- a/frontend/demo/component/contextmenu/react/context-menu-best-practices.tsx
+++ b/frontend/demo/component/contextmenu/react/context-menu-best-practices.tsx
@@ -1,10 +1,10 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react'; // hidden-source-line
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
+import { ContextMenu } from '@vaadin/react-components/ContextMenu.js';
import { Grid } from '@vaadin/react-components/Grid.js';
import { GridColumn } from '@vaadin/react-components/GridColumn.js';
-import { ContextMenu } from '@vaadin/react-components/ContextMenu.js';
import { MenuBar } from '@vaadin/react-components/MenuBar.js';
interface FileItem {
diff --git a/frontend/demo/component/contextmenu/react/context-menu-checkable.tsx b/frontend/demo/component/contextmenu/react/context-menu-checkable.tsx
index ba415a745b..1b8169d1a7 100644
--- a/frontend/demo/component/contextmenu/react/context-menu-checkable.tsx
+++ b/frontend/demo/component/contextmenu/react/context-menu-checkable.tsx
@@ -1,11 +1,11 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react'; // hidden-source-line
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import {
ContextMenu,
- type ContextMenuItemSelectedEvent,
type ContextMenuItem,
+ type ContextMenuItemSelectedEvent,
} from '@vaadin/react-components/ContextMenu.js';
function Example() {
diff --git a/frontend/demo/component/contextmenu/react/context-menu-classname.tsx b/frontend/demo/component/contextmenu/react/context-menu-classname.tsx
index 350fb406c9..7a14228827 100644
--- a/frontend/demo/component/contextmenu/react/context-menu-classname.tsx
+++ b/frontend/demo/component/contextmenu/react/context-menu-classname.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react'; // hidden-source-line
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Button } from '@vaadin/react-components/Button.js';
import { ContextMenu, type ContextMenuItem } from '@vaadin/react-components/ContextMenu.js';
diff --git a/frontend/demo/component/contextmenu/react/context-menu-dividers.tsx b/frontend/demo/component/contextmenu/react/context-menu-dividers.tsx
index 578d141658..a7378889b6 100644
--- a/frontend/demo/component/contextmenu/react/context-menu-dividers.tsx
+++ b/frontend/demo/component/contextmenu/react/context-menu-dividers.tsx
@@ -1,12 +1,12 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect, useRef } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
+import { ContextMenu } from '@vaadin/react-components/ContextMenu.js';
import { Grid, type GridElement } from '@vaadin/react-components/Grid.js';
import { GridColumn } from '@vaadin/react-components/GridColumn.js';
-import { ContextMenu } from '@vaadin/react-components/ContextMenu.js';
-import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
import { getPeople } from 'Frontend/demo/domain/DataService';
+import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/contextmenu/react/context-menu-left-click.tsx b/frontend/demo/component/contextmenu/react/context-menu-left-click.tsx
index ce890ba54b..94571e8b64 100644
--- a/frontend/demo/component/contextmenu/react/context-menu-left-click.tsx
+++ b/frontend/demo/component/contextmenu/react/context-menu-left-click.tsx
@@ -1,12 +1,12 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect, useRef } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { ContextMenu } from '@vaadin/react-components/ContextMenu.js';
import { Grid, type GridElement } from '@vaadin/react-components/Grid.js';
-import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
-import { getPeople } from 'Frontend/demo/domain/DataService';
import { GridColumn } from '@vaadin/react-components/GridColumn.js';
+import { getPeople } from 'Frontend/demo/domain/DataService';
+import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/contextmenu/react/context-menu-presentation.tsx b/frontend/demo/component/contextmenu/react/context-menu-presentation.tsx
index 194bf159f8..8b2a7a6ada 100644
--- a/frontend/demo/component/contextmenu/react/context-menu-presentation.tsx
+++ b/frontend/demo/component/contextmenu/react/context-menu-presentation.tsx
@@ -1,17 +1,17 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect, useRef } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
+import { Avatar } from '@vaadin/react-components/Avatar.js';
import { ContextMenu, type ContextMenuItem } from '@vaadin/react-components/ContextMenu.js';
import { Grid, type GridElement } from '@vaadin/react-components/Grid.js';
import { GridColumn } from '@vaadin/react-components/GridColumn.js';
-import { Avatar } from '@vaadin/react-components/Avatar.js';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
+import { Icon } from '@vaadin/react-components/Icon.js';
import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
-import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
import { getPeople } from 'Frontend/demo/domain/DataService';
-import { Icon } from '@vaadin/react-components/Icon.js';
-import '@vaadin/icons';
+import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
function Item({ person }: { person: Person }) {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/cookieconsent/react/cookie-consent-basic.tsx b/frontend/demo/component/cookieconsent/react/cookie-consent-basic.tsx
index e9849d9039..02b5521ee8 100644
--- a/frontend/demo/component/cookieconsent/react/cookie-consent-basic.tsx
+++ b/frontend/demo/component/cookieconsent/react/cookie-consent-basic.tsx
@@ -1,6 +1,6 @@
+import './example-cleanup'; // hidden-source-line
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import './example-cleanup'; // hidden-source-line
import { CookieConsent } from '@vaadin/react-components-pro/CookieConsent.js';
function Example() {
diff --git a/frontend/demo/component/cookieconsent/react/cookie-consent-localization.tsx b/frontend/demo/component/cookieconsent/react/cookie-consent-localization.tsx
index 2cd78ead7e..b5d0bb76db 100644
--- a/frontend/demo/component/cookieconsent/react/cookie-consent-localization.tsx
+++ b/frontend/demo/component/cookieconsent/react/cookie-consent-localization.tsx
@@ -1,6 +1,6 @@
+import './example-cleanup'; // hidden-source-line
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import './example-cleanup'; // hidden-source-line
import { CookieConsent } from '@vaadin/react-components-pro/CookieConsent.js';
function Example() {
diff --git a/frontend/demo/component/cookieconsent/react/cookie-consent-theming.tsx b/frontend/demo/component/cookieconsent/react/cookie-consent-theming.tsx
index 922ffc378a..53e98d0b33 100644
--- a/frontend/demo/component/cookieconsent/react/cookie-consent-theming.tsx
+++ b/frontend/demo/component/cookieconsent/react/cookie-consent-theming.tsx
@@ -1,6 +1,6 @@
+import './example-cleanup'; // hidden-source-line
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import './example-cleanup'; // hidden-source-line
import { CookieConsent } from '@vaadin/react-components-pro/CookieConsent.js';
function Example() {
diff --git a/frontend/demo/component/crud/react/crud-basic.tsx b/frontend/demo/component/crud/react/crud-basic.tsx
index a7d484eb29..b777783099 100644
--- a/frontend/demo/component/crud/react/crud-basic.tsx
+++ b/frontend/demo/component/crud/react/crud-basic.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Crud } from '@vaadin/react-components-pro/Crud.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
diff --git a/frontend/demo/component/crud/react/crud-columns.tsx b/frontend/demo/component/crud/react/crud-columns.tsx
index 8806e87761..8d5664a0dc 100644
--- a/frontend/demo/component/crud/react/crud-columns.tsx
+++ b/frontend/demo/component/crud/react/crud-columns.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Crud } from '@vaadin/react-components-pro/Crud.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
diff --git a/frontend/demo/component/crud/react/crud-editor-aside.tsx b/frontend/demo/component/crud/react/crud-editor-aside.tsx
index de60be2dc5..126522563b 100644
--- a/frontend/demo/component/crud/react/crud-editor-aside.tsx
+++ b/frontend/demo/component/crud/react/crud-editor-aside.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Crud } from '@vaadin/react-components-pro/Crud.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
diff --git a/frontend/demo/component/crud/react/crud-editor-bottom.tsx b/frontend/demo/component/crud/react/crud-editor-bottom.tsx
index 98160b7ad7..219524ac4a 100644
--- a/frontend/demo/component/crud/react/crud-editor-bottom.tsx
+++ b/frontend/demo/component/crud/react/crud-editor-bottom.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Crud } from '@vaadin/react-components-pro/Crud.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
diff --git a/frontend/demo/component/crud/react/crud-editor-content.tsx b/frontend/demo/component/crud/react/crud-editor-content.tsx
index b09537cedc..7a2a12ec66 100644
--- a/frontend/demo/component/crud/react/crud-editor-content.tsx
+++ b/frontend/demo/component/crud/react/crud-editor-content.tsx
@@ -1,12 +1,12 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
-import { Crud, crudPath } from '@vaadin/react-components-pro/Crud.js';
+import { useSignal } from '@vaadin/hilla-react-signals';
+import { ComboBox } from '@vaadin/react-components/ComboBox.js';
+import { EmailField } from '@vaadin/react-components/EmailField.js';
import { FormLayout, type FormLayoutResponsiveStep } from '@vaadin/react-components/FormLayout.js';
import { TextField } from '@vaadin/react-components/TextField.js';
-import { EmailField } from '@vaadin/react-components/EmailField.js';
-import { ComboBox } from '@vaadin/react-components/ComboBox.js';
+import { Crud, crudPath } from '@vaadin/react-components-pro/Crud.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
diff --git a/frontend/demo/component/crud/react/crud-grid-replacement.tsx b/frontend/demo/component/crud/react/crud-grid-replacement.tsx
index d7f4b077e7..5c8f07fc4d 100644
--- a/frontend/demo/component/crud/react/crud-grid-replacement.tsx
+++ b/frontend/demo/component/crud/react/crud-grid-replacement.tsx
@@ -1,13 +1,13 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
-import { Crud } from '@vaadin/react-components-pro/Crud.js';
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Grid } from '@vaadin/react-components/Grid.js';
import { GridColumn } from '@vaadin/react-components/GridColumn.js';
+import { Crud } from '@vaadin/react-components-pro/Crud.js';
import { CrudEditColumn } from '@vaadin/react-components-pro/CrudEditColumn.js';
-import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
import { getPeople } from 'Frontend/demo/domain/DataService';
+import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/crud/react/crud-hidden-toolbar.tsx b/frontend/demo/component/crud/react/crud-hidden-toolbar.tsx
index 579c66cca9..7292145737 100644
--- a/frontend/demo/component/crud/react/crud-hidden-toolbar.tsx
+++ b/frontend/demo/component/crud/react/crud-hidden-toolbar.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Crud } from '@vaadin/react-components-pro/Crud.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
diff --git a/frontend/demo/component/crud/react/crud-item-initialization.tsx b/frontend/demo/component/crud/react/crud-item-initialization.tsx
index d2ee3fa633..0f14a0c3ba 100644
--- a/frontend/demo/component/crud/react/crud-item-initialization.tsx
+++ b/frontend/demo/component/crud/react/crud-item-initialization.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Crud, type CrudNewEvent } from '@vaadin/react-components-pro/Crud.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
diff --git a/frontend/demo/component/crud/react/crud-localization.tsx b/frontend/demo/component/crud/react/crud-localization.tsx
index d98bd26967..6c09321bc4 100644
--- a/frontend/demo/component/crud/react/crud-localization.tsx
+++ b/frontend/demo/component/crud/react/crud-localization.tsx
@@ -1,16 +1,16 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
-import { Crud, crudPath } from '@vaadin/react-components-pro/Crud.js';
+import { useSignal } from '@vaadin/hilla-react-signals';
+import { ComboBox } from '@vaadin/react-components/ComboBox.js';
+import { EmailField } from '@vaadin/react-components/EmailField.js';
import { Grid } from '@vaadin/react-components/Grid.js';
import { GridColumn } from '@vaadin/react-components/GridColumn.js';
import { TextField } from '@vaadin/react-components/TextField.js';
-import { EmailField } from '@vaadin/react-components/EmailField.js';
-import { ComboBox } from '@vaadin/react-components/ComboBox.js';
+import { Crud, crudPath } from '@vaadin/react-components-pro/Crud.js';
+import { CrudEditColumn } from '@vaadin/react-components-pro/CrudEditColumn.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
-import { CrudEditColumn } from '@vaadin/react-components-pro/CrudEditColumn.js';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/crud/react/crud-open-editor.tsx b/frontend/demo/component/crud/react/crud-open-editor.tsx
index 5f82000c50..1185b79d28 100644
--- a/frontend/demo/component/crud/react/crud-open-editor.tsx
+++ b/frontend/demo/component/crud/react/crud-open-editor.tsx
@@ -1,10 +1,10 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
-import { Crud } from '@vaadin/react-components-pro/Crud.js';
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Grid, type GridElement } from '@vaadin/react-components/Grid.js';
import { GridColumn } from '@vaadin/react-components/GridColumn.js';
+import { Crud } from '@vaadin/react-components-pro/Crud.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
diff --git a/frontend/demo/component/crud/react/crud-sorting-filtering.tsx b/frontend/demo/component/crud/react/crud-sorting-filtering.tsx
index 8f1b2b363e..bcedf34a38 100644
--- a/frontend/demo/component/crud/react/crud-sorting-filtering.tsx
+++ b/frontend/demo/component/crud/react/crud-sorting-filtering.tsx
@@ -1,10 +1,10 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Crud } from '@vaadin/react-components-pro/Crud.js';
-import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
import { getPeople } from 'Frontend/demo/domain/DataService';
+import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/crud/react/crud-toolbar.tsx b/frontend/demo/component/crud/react/crud-toolbar.tsx
index 0f8a55ad3d..ad1d26e896 100644
--- a/frontend/demo/component/crud/react/crud-toolbar.tsx
+++ b/frontend/demo/component/crud/react/crud-toolbar.tsx
@@ -1,14 +1,14 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Button } from '@vaadin/react-components/Button.js';
-import { Crud } from '@vaadin/react-components-pro/Crud.js';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
import { Icon } from '@vaadin/react-components/Icon.js';
+import { Crud } from '@vaadin/react-components-pro/Crud.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
-import '@vaadin/icons';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/custom-field/react/custom-field-basic.tsx b/frontend/demo/component/custom-field/react/custom-field-basic.tsx
index cab029227f..2b4260550a 100644
--- a/frontend/demo/component/custom-field/react/custom-field-basic.tsx
+++ b/frontend/demo/component/custom-field/react/custom-field-basic.tsx
@@ -1,9 +1,9 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { DatePicker } from '@vaadin/react-components/DatePicker.js';
-import { CustomField } from '@vaadin/react-components/CustomField.js';
import { differenceInDays, isAfter, parseISO } from 'date-fns';
import { useForm, useFormPart } from '@vaadin/hilla-react-form';
+import { CustomField } from '@vaadin/react-components/CustomField.js';
+import { DatePicker } from '@vaadin/react-components/DatePicker.js';
import AppointmentModel from 'Frontend/generated/com/vaadin/demo/domain/AppointmentModel';
function Example() {
diff --git a/frontend/demo/component/custom-field/react/custom-field-native-input.tsx b/frontend/demo/component/custom-field/react/custom-field-native-input.tsx
index b5b9672cb6..50d8c14880 100644
--- a/frontend/demo/component/custom-field/react/custom-field-native-input.tsx
+++ b/frontend/demo/component/custom-field/react/custom-field-native-input.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react'; // hidden-source-line
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { CustomField } from '@vaadin/react-components/CustomField.js';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
diff --git a/frontend/demo/component/datepicker/react/date-picker-basic-features.tsx b/frontend/demo/component/datepicker/react/date-picker-basic-features.tsx
index 66e15d48ea..cdcb82df01 100644
--- a/frontend/demo/component/datepicker/react/date-picker-basic-features.tsx
+++ b/frontend/demo/component/datepicker/react/date-picker-basic-features.tsx
@@ -1,9 +1,9 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { DatePicker } from '@vaadin/react-components/DatePicker';
import { Icon } from '@vaadin/react-components/Icon';
import { Tooltip } from '@vaadin/react-components/Tooltip';
-import '@vaadin/icons/';
function Example() {
return (
diff --git a/frontend/demo/component/datepicker/react/date-picker-custom-functions.tsx b/frontend/demo/component/datepicker/react/date-picker-custom-functions.tsx
index 240ef3ffa8..b97bef92d2 100644
--- a/frontend/demo/component/datepicker/react/date-picker-custom-functions.tsx
+++ b/frontend/demo/component/datepicker/react/date-picker-custom-functions.tsx
@@ -1,14 +1,14 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect, useRef } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import dateFnsFormat from 'date-fns/format';
+import dateFnsParse from 'date-fns/parse';
+import { useSignal } from '@vaadin/hilla-react-signals';
import {
DatePicker,
- type DatePickerElement,
type DatePickerDate,
+ type DatePickerElement,
} from '@vaadin/react-components/DatePicker.js';
-import dateFnsFormat from 'date-fns/format';
-import dateFnsParse from 'date-fns/parse';
// tag::snippet[]
function formatDateIso8601(dateParts: DatePickerDate) {
diff --git a/frontend/demo/component/datepicker/react/date-picker-custom-validation.tsx b/frontend/demo/component/datepicker/react/date-picker-custom-validation.tsx
index 7ad106cf00..da16d9d096 100644
--- a/frontend/demo/component/datepicker/react/date-picker-custom-validation.tsx
+++ b/frontend/demo/component/datepicker/react/date-picker-custom-validation.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { DatePicker } from '@vaadin/react-components/DatePicker.js';
import { useForm, useFormPart } from '@vaadin/hilla-react-form';
+import { DatePicker } from '@vaadin/react-components/DatePicker.js';
import AppointmentModel from 'Frontend/generated/com/vaadin/demo/domain/AppointmentModel';
function Example() {
diff --git a/frontend/demo/component/datepicker/react/date-picker-date-range.tsx b/frontend/demo/component/datepicker/react/date-picker-date-range.tsx
index 05120888a0..1a3dcd4012 100644
--- a/frontend/demo/component/datepicker/react/date-picker-date-range.tsx
+++ b/frontend/demo/component/datepicker/react/date-picker-date-range.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react'; // hidden-source-line
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { DatePicker } from '@vaadin/react-components/DatePicker.js';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
diff --git a/frontend/demo/component/datepicker/react/date-picker-individual-input-fields.tsx b/frontend/demo/component/datepicker/react/date-picker-individual-input-fields.tsx
index 019dede1d5..a134963325 100644
--- a/frontend/demo/component/datepicker/react/date-picker-individual-input-fields.tsx
+++ b/frontend/demo/component/datepicker/react/date-picker-individual-input-fields.tsx
@@ -1,10 +1,10 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { useSignal, useComputed } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import getDaysInMonth from 'date-fns/getDaysInMonth';
+import { useComputed, useSignal } from '@vaadin/hilla-react-signals';
import { ComboBox } from '@vaadin/react-components/ComboBox.js';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
-import getDaysInMonth from 'date-fns/getDaysInMonth';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/datepicker/react/date-picker-initial-position.tsx b/frontend/demo/component/datepicker/react/date-picker-initial-position.tsx
index e66dbfc706..927744dcac 100644
--- a/frontend/demo/component/datepicker/react/date-picker-initial-position.tsx
+++ b/frontend/demo/component/datepicker/react/date-picker-initial-position.tsx
@@ -1,9 +1,9 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { useComputed } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
-import { DatePicker } from '@vaadin/react-components/DatePicker.js';
import { formatISO, lastDayOfYear } from 'date-fns';
+import { useComputed } from '@vaadin/hilla-react-signals';
+import { DatePicker } from '@vaadin/react-components/DatePicker.js';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/datepicker/react/date-picker-readonly-and-disabled.tsx b/frontend/demo/component/datepicker/react/date-picker-readonly-and-disabled.tsx
index 395baaa06d..cbedc1d2a9 100644
--- a/frontend/demo/component/datepicker/react/date-picker-readonly-and-disabled.tsx
+++ b/frontend/demo/component/datepicker/react/date-picker-readonly-and-disabled.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
import { DatePicker } from '@vaadin/react-components/DatePicker.js';
+import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
function Example() {
return (
diff --git a/frontend/demo/component/datepicker/react/date-picker-validation.tsx b/frontend/demo/component/datepicker/react/date-picker-validation.tsx
index b67b9ca8bd..6c07b0b3fe 100644
--- a/frontend/demo/component/datepicker/react/date-picker-validation.tsx
+++ b/frontend/demo/component/datepicker/react/date-picker-validation.tsx
@@ -1,9 +1,9 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react'; // hidden-source-line
-import { useComputed, useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { addDays, formatISO, isAfter, isBefore, parse } from 'date-fns';
+import { useComputed, useSignal } from '@vaadin/hilla-react-signals';
import { DatePicker } from '@vaadin/react-components/DatePicker.js';
-import { formatISO, addDays, isBefore, isAfter, parse } from 'date-fns';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/datetimepicker/react/date-time-picker-custom-validation.tsx b/frontend/demo/component/datetimepicker/react/date-time-picker-custom-validation.tsx
index f0281fd79e..9805461916 100644
--- a/frontend/demo/component/datetimepicker/react/date-time-picker-custom-validation.tsx
+++ b/frontend/demo/component/datetimepicker/react/date-time-picker-custom-validation.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { DateTimePicker } from '@vaadin/react-components/DateTimePicker.js';
import { useForm, useFormPart } from '@vaadin/hilla-react-form';
+import { DateTimePicker } from '@vaadin/react-components/DateTimePicker.js';
import AppointmentModel from 'Frontend/generated/com/vaadin/demo/domain/AppointmentModel';
function Example() {
diff --git a/frontend/demo/component/datetimepicker/react/date-time-picker-initial-position.tsx b/frontend/demo/component/datetimepicker/react/date-time-picker-initial-position.tsx
index ffef26e70e..a7e18930b5 100644
--- a/frontend/demo/component/datetimepicker/react/date-time-picker-initial-position.tsx
+++ b/frontend/demo/component/datetimepicker/react/date-time-picker-initial-position.tsx
@@ -1,9 +1,9 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { DateTimePicker } from '@vaadin/react-components/DateTimePicker.js';
-import startOfMonth from 'date-fns/startOfMonth';
import addMonths from 'date-fns/addMonths';
import formatISO from 'date-fns/formatISO';
+import startOfMonth from 'date-fns/startOfMonth';
+import { DateTimePicker } from '@vaadin/react-components/DateTimePicker.js';
const startOfNextMonth = startOfMonth(addMonths(new Date(), 1));
const startOfNextMonthISOString = formatISO(startOfNextMonth, { representation: 'date' });
diff --git a/frontend/demo/component/datetimepicker/react/date-time-picker-input-format.tsx b/frontend/demo/component/datetimepicker/react/date-time-picker-input-format.tsx
index 2bbce4ebe5..1bab4a2cb3 100644
--- a/frontend/demo/component/datetimepicker/react/date-time-picker-input-format.tsx
+++ b/frontend/demo/component/datetimepicker/react/date-time-picker-input-format.tsx
@@ -1,12 +1,12 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect, useRef } from 'react';
+import dateFnsFormat from 'date-fns/format';
+import dateFnsParse from 'date-fns/parse';
+import type { DatePickerDate } from '@vaadin/date-picker';
import {
DateTimePicker,
type DateTimePickerElement,
} from '@vaadin/react-components/DateTimePicker.js';
-import dateFnsFormat from 'date-fns/format';
-import dateFnsParse from 'date-fns/parse';
-import type { DatePickerDate } from '@vaadin/date-picker';
function DateTimePickerInputFormat() {
const dateTimePickerRef = useRef(null);
diff --git a/frontend/demo/component/datetimepicker/react/date-time-picker-range.tsx b/frontend/demo/component/datetimepicker/react/date-time-picker-range.tsx
index a22c354bf3..dc43f9a155 100644
--- a/frontend/demo/component/datetimepicker/react/date-time-picker-range.tsx
+++ b/frontend/demo/component/datetimepicker/react/date-time-picker-range.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react'; // hidden-source-line
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { DateTimePicker } from '@vaadin/react-components/DateTimePicker.js';
const initialStartValue = '2020-08-25T20:00';
diff --git a/frontend/demo/component/datetimepicker/react/date-time-picker-readonly-and-disabled.tsx b/frontend/demo/component/datetimepicker/react/date-time-picker-readonly-and-disabled.tsx
index cd0b418a0c..4ef4e98666 100644
--- a/frontend/demo/component/datetimepicker/react/date-time-picker-readonly-and-disabled.tsx
+++ b/frontend/demo/component/datetimepicker/react/date-time-picker-readonly-and-disabled.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
import { DateTimePicker } from '@vaadin/react-components/DateTimePicker.js';
+import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
function Example() {
return (
diff --git a/frontend/demo/component/datetimepicker/react/date-time-picker-validation.tsx b/frontend/demo/component/datetimepicker/react/date-time-picker-validation.tsx
index 7f6c084ce4..9e30ca51e6 100644
--- a/frontend/demo/component/datetimepicker/react/date-time-picker-validation.tsx
+++ b/frontend/demo/component/datetimepicker/react/date-time-picker-validation.tsx
@@ -1,9 +1,9 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react'; // hidden-source-line
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
-import { DateTimePicker } from '@vaadin/react-components/DateTimePicker.js';
import { addDays, format, isAfter, isBefore, parseISO } from 'date-fns';
+import { useSignal } from '@vaadin/hilla-react-signals';
+import { DateTimePicker } from '@vaadin/react-components/DateTimePicker.js';
// tag::snippet[]
function Example() {
diff --git a/frontend/demo/component/datetimepicker/react/date-time-picker-week-numbers.tsx b/frontend/demo/component/datetimepicker/react/date-time-picker-week-numbers.tsx
index 3215a6a992..27bfb2bcad 100644
--- a/frontend/demo/component/datetimepicker/react/date-time-picker-week-numbers.tsx
+++ b/frontend/demo/component/datetimepicker/react/date-time-picker-week-numbers.tsx
@@ -1,5 +1,5 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import React, { useRef, useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
import {
DateTimePicker,
type DateTimePickerElement,
diff --git a/frontend/demo/component/details/react/details-summary.tsx b/frontend/demo/component/details/react/details-summary.tsx
index 2c581127f2..eec7acadb6 100644
--- a/frontend/demo/component/details/react/details-summary.tsx
+++ b/frontend/demo/component/details/react/details-summary.tsx
@@ -1,17 +1,17 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
+import { ComboBox } from '@vaadin/react-components/ComboBox.js';
import { Details } from '@vaadin/react-components/Details.js';
import { DetailsSummary } from '@vaadin/react-components/DetailsSummary.js';
import { FormLayout, type FormLayoutResponsiveStep } from '@vaadin/react-components/FormLayout.js';
-import { TextField } from '@vaadin/react-components/TextField.js';
-import { ComboBox } from '@vaadin/react-components/ComboBox.js';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
import { Icon } from '@vaadin/react-components/Icon.js';
-import type Country from 'Frontend/generated/com/vaadin/demo/domain/Country';
+import { TextField } from '@vaadin/react-components/TextField.js';
import { getCountries } from 'Frontend/demo/domain/DataService';
-import '@vaadin/icons';
+import type Country from 'Frontend/generated/com/vaadin/demo/domain/Country';
const responsiveSteps: FormLayoutResponsiveStep[] = [
{ minWidth: 0, columns: 1 },
diff --git a/frontend/demo/component/dialog/react/dialog-basic.tsx b/frontend/demo/component/dialog/react/dialog-basic.tsx
index c5c81fbb87..a2b5fbc609 100644
--- a/frontend/demo/component/dialog/react/dialog-basic.tsx
+++ b/frontend/demo/component/dialog/react/dialog-basic.tsx
@@ -1,9 +1,9 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react'; // hidden-source-line
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
-import { Dialog } from '@vaadin/react-components/Dialog.js';
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Button } from '@vaadin/react-components/Button.js';
+import { Dialog } from '@vaadin/react-components/Dialog.js';
import { TextField } from '@vaadin/react-components/TextField.js';
import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
import dialogBasicStyles from './dialog-basic-styles';
diff --git a/frontend/demo/component/dialog/react/dialog-closing.tsx b/frontend/demo/component/dialog/react/dialog-closing.tsx
index 5e892574ab..a7f84da4b3 100644
--- a/frontend/demo/component/dialog/react/dialog-closing.tsx
+++ b/frontend/demo/component/dialog/react/dialog-closing.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react'; // hidden-source-line
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Button } from '@vaadin/react-components/Button.js';
import { Dialog } from '@vaadin/react-components/Dialog.js';
import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
diff --git a/frontend/demo/component/dialog/react/dialog-draggable.tsx b/frontend/demo/component/dialog/react/dialog-draggable.tsx
index 793019dc3c..7d49600e27 100644
--- a/frontend/demo/component/dialog/react/dialog-draggable.tsx
+++ b/frontend/demo/component/dialog/react/dialog-draggable.tsx
@@ -1,12 +1,12 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react'; // hidden-source-line
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
-import { Dialog } from '@vaadin/react-components/Dialog.js';
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Button } from '@vaadin/react-components/Button.js';
+import { Dialog } from '@vaadin/react-components/Dialog.js';
+import { TextArea } from '@vaadin/react-components/TextArea.js';
import { TextField } from '@vaadin/react-components/TextField.js';
import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
-import { TextArea } from '@vaadin/react-components/TextArea.js';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/dialog/react/dialog-footer.tsx b/frontend/demo/component/dialog/react/dialog-footer.tsx
index f453f24edc..8119ace437 100644
--- a/frontend/demo/component/dialog/react/dialog-footer.tsx
+++ b/frontend/demo/component/dialog/react/dialog-footer.tsx
@@ -1,11 +1,11 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Button } from '@vaadin/react-components/Button.js';
import { Dialog } from '@vaadin/react-components/Dialog.js';
-import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
import { getPeople } from 'Frontend/demo/domain/DataService';
+import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/dialog/react/dialog-header.tsx b/frontend/demo/component/dialog/react/dialog-header.tsx
index dd18101e24..5f04f7d83d 100644
--- a/frontend/demo/component/dialog/react/dialog-header.tsx
+++ b/frontend/demo/component/dialog/react/dialog-header.tsx
@@ -1,16 +1,16 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useComputed, useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
-import { Dialog } from '@vaadin/react-components/Dialog.js';
+import { useComputed, useSignal } from '@vaadin/hilla-react-signals';
import { Button } from '@vaadin/react-components/Button.js';
-import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
-import { TextField } from '@vaadin/react-components/TextField.js';
+import { Dialog } from '@vaadin/react-components/Dialog.js';
import { EmailField } from '@vaadin/react-components/EmailField.js';
import { Icon } from '@vaadin/react-components/Icon.js';
+import { TextField } from '@vaadin/react-components/TextField.js';
+import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
-import '@vaadin/icons';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/dialog/react/dialog-no-padding.tsx b/frontend/demo/component/dialog/react/dialog-no-padding.tsx
index f1a7c943b0..b6ae27d8a2 100644
--- a/frontend/demo/component/dialog/react/dialog-no-padding.tsx
+++ b/frontend/demo/component/dialog/react/dialog-no-padding.tsx
@@ -1,15 +1,14 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Button } from '@vaadin/react-components/Button.js';
import { Dialog } from '@vaadin/react-components/Dialog.js';
import { Grid } from '@vaadin/react-components/Grid.js';
import { GridColumn } from '@vaadin/react-components/GridColumn.js';
import { GridSelectionColumn } from '@vaadin/react-components/GridSelectionColumn.js';
-
-import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
import { getPeople } from 'Frontend/demo/domain/DataService';
+import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
function Example(): JSX.Element {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/dialog/react/dialog-resizable.tsx b/frontend/demo/component/dialog/react/dialog-resizable.tsx
index 1dd41ee19a..570697160e 100644
--- a/frontend/demo/component/dialog/react/dialog-resizable.tsx
+++ b/frontend/demo/component/dialog/react/dialog-resizable.tsx
@@ -1,12 +1,12 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Button } from '@vaadin/react-components/Button.js';
import { Dialog } from '@vaadin/react-components/Dialog.js';
-import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
import { Grid } from '@vaadin/react-components/Grid.js';
import { GridColumn } from '@vaadin/react-components/GridColumn.js';
+import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
diff --git a/frontend/demo/component/emailfield/react/email-field-basic-features.tsx b/frontend/demo/component/emailfield/react/email-field-basic-features.tsx
index 8d8c3b5d21..5671fab4e0 100644
--- a/frontend/demo/component/emailfield/react/email-field-basic-features.tsx
+++ b/frontend/demo/component/emailfield/react/email-field-basic-features.tsx
@@ -1,9 +1,9 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { EmailField } from '@vaadin/react-components/EmailField.js';
-import { Tooltip } from '@vaadin/react-components/Tooltip.js';
import { Icon } from '@vaadin/react-components/Icon.js';
-import '@vaadin/icons';
+import { Tooltip } from '@vaadin/react-components/Tooltip.js';
function Example() {
return (
diff --git a/frontend/demo/component/emailfield/react/email-field-basic.tsx b/frontend/demo/component/emailfield/react/email-field-basic.tsx
index c451ae742d..4cff135b7d 100644
--- a/frontend/demo/component/emailfield/react/email-field-basic.tsx
+++ b/frontend/demo/component/emailfield/react/email-field-basic.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
import { EmailField } from '@vaadin/react-components/EmailField.js';
+import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
function Example() {
return (
diff --git a/frontend/demo/component/emailfield/react/email-field-readonly-and-disabled.tsx b/frontend/demo/component/emailfield/react/email-field-readonly-and-disabled.tsx
index 9c62de168b..069e661e6b 100644
--- a/frontend/demo/component/emailfield/react/email-field-readonly-and-disabled.tsx
+++ b/frontend/demo/component/emailfield/react/email-field-readonly-and-disabled.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
import { EmailField } from '@vaadin/react-components/EmailField.js';
+import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
function Example() {
return (
diff --git a/frontend/demo/component/formlayout/react/form-layout-basic.tsx b/frontend/demo/component/formlayout/react/form-layout-basic.tsx
index d7a2144367..87c174930d 100644
--- a/frontend/demo/component/formlayout/react/form-layout-basic.tsx
+++ b/frontend/demo/component/formlayout/react/form-layout-basic.tsx
@@ -1,8 +1,8 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { FormLayout } from '@vaadin/react-components/FormLayout.js';
-import { TextField } from '@vaadin/react-components/TextField.js';
import { PasswordField } from '@vaadin/react-components/PasswordField.js';
+import { TextField } from '@vaadin/react-components/TextField.js';
function Example() {
// tag::snippet[]
diff --git a/frontend/demo/component/formlayout/react/form-layout-colspan.tsx b/frontend/demo/component/formlayout/react/form-layout-colspan.tsx
index efa3e9b433..04fbb65b0a 100644
--- a/frontend/demo/component/formlayout/react/form-layout-colspan.tsx
+++ b/frontend/demo/component/formlayout/react/form-layout-colspan.tsx
@@ -2,8 +2,8 @@ import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-lin
import React from 'react';
import { DatePicker } from '@vaadin/react-components/DatePicker.js';
import { FormLayout } from '@vaadin/react-components/FormLayout.js';
-import { TimePicker } from '@vaadin/react-components/TimePicker.js';
import { TextField } from '@vaadin/react-components/TextField.js';
+import { TimePicker } from '@vaadin/react-components/TimePicker.js';
function Example() {
const responsiveSteps = [
diff --git a/frontend/demo/component/formlayout/react/form-layout-custom-field.tsx b/frontend/demo/component/formlayout/react/form-layout-custom-field.tsx
index 7f6a779ade..cd2dacbe9b 100644
--- a/frontend/demo/component/formlayout/react/form-layout-custom-field.tsx
+++ b/frontend/demo/component/formlayout/react/form-layout-custom-field.tsx
@@ -1,12 +1,12 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { useComputed } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
-import { FormLayout } from '@vaadin/react-components/FormLayout.js';
-import { FormItem } from '@vaadin/react-components/FormItem.js';
-import { Select } from '@vaadin/react-components/Select.js';
+import { useComputed } from '@vaadin/hilla-react-signals';
import { CustomField } from '@vaadin/react-components/CustomField.js';
+import { FormItem } from '@vaadin/react-components/FormItem.js';
+import { FormLayout } from '@vaadin/react-components/FormLayout.js';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
+import { Select } from '@vaadin/react-components/Select.js';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/formlayout/react/form-layout-custom-layout.tsx b/frontend/demo/component/formlayout/react/form-layout-custom-layout.tsx
index 6e4cdf950c..dfbdae63af 100644
--- a/frontend/demo/component/formlayout/react/form-layout-custom-layout.tsx
+++ b/frontend/demo/component/formlayout/react/form-layout-custom-layout.tsx
@@ -1,9 +1,9 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { SplitLayout } from '@vaadin/react-components/SplitLayout.js';
+import { EmailField } from '@vaadin/react-components/EmailField.js';
import { FormLayout } from '@vaadin/react-components/FormLayout.js';
+import { SplitLayout } from '@vaadin/react-components/SplitLayout.js';
import { TextField } from '@vaadin/react-components/TextField.js';
-import { EmailField } from '@vaadin/react-components/EmailField.js';
function Example() {
// tag::snippet[]
diff --git a/frontend/demo/component/formlayout/react/form-layout-native-input.tsx b/frontend/demo/component/formlayout/react/form-layout-native-input.tsx
index 03baa93f83..303066eb8b 100644
--- a/frontend/demo/component/formlayout/react/form-layout-native-input.tsx
+++ b/frontend/demo/component/formlayout/react/form-layout-native-input.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { FormLayout } from '@vaadin/react-components/FormLayout.js';
import { FormItem } from '@vaadin/react-components/FormItem.js';
+import { FormLayout } from '@vaadin/react-components/FormLayout.js';
function Example() {
return (
diff --git a/frontend/demo/component/formlayout/react/form-layout-side.tsx b/frontend/demo/component/formlayout/react/form-layout-side.tsx
index 027e65d16b..8917952e0e 100644
--- a/frontend/demo/component/formlayout/react/form-layout-side.tsx
+++ b/frontend/demo/component/formlayout/react/form-layout-side.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { FormLayout } from '@vaadin/react-components/FormLayout.js';
import { FormItem } from '@vaadin/react-components/FormItem.js';
+import { FormLayout } from '@vaadin/react-components/FormLayout.js';
import { TextField } from '@vaadin/react-components/TextField.js';
function Example() {
diff --git a/frontend/demo/component/grid/react/grid-basic.tsx b/frontend/demo/component/grid/react/grid-basic.tsx
index bfb7bb2a5e..92162d918f 100644
--- a/frontend/demo/component/grid/react/grid-basic.tsx
+++ b/frontend/demo/component/grid/react/grid-basic.tsx
@@ -1,11 +1,11 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Grid } from '@vaadin/react-components/Grid.js';
import { GridColumn } from '@vaadin/react-components/GridColumn.js';
-import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
import { getPeople } from 'Frontend/demo/domain/DataService';
+import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/grid/react/grid-cell-focus.tsx b/frontend/demo/component/grid/react/grid-cell-focus.tsx
index 21f77cb71f..8da4f0faac 100644
--- a/frontend/demo/component/grid/react/grid-cell-focus.tsx
+++ b/frontend/demo/component/grid/react/grid-cell-focus.tsx
@@ -1,12 +1,12 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect, useRef } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Grid, type GridCellFocusEvent, type GridElement } from '@vaadin/react-components/Grid.js';
+import { GridColumn } from '@vaadin/react-components/GridColumn.js';
import { TextArea } from '@vaadin/react-components/TextArea.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
-import { GridColumn } from '@vaadin/react-components/GridColumn.js';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/grid/react/grid-column-alignment.tsx b/frontend/demo/component/grid/react/grid-column-alignment.tsx
index 086344a1ee..85c6aa6959 100644
--- a/frontend/demo/component/grid/react/grid-column-alignment.tsx
+++ b/frontend/demo/component/grid/react/grid-column-alignment.tsx
@@ -1,12 +1,12 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { format } from 'date-fns';
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Grid } from '@vaadin/react-components/Grid.js';
import { GridColumn } from '@vaadin/react-components/GridColumn.js';
-import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
import { getPeople } from 'Frontend/demo/domain/DataService';
-import { format } from 'date-fns';
+import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
function randomDate() {
const futureDate = new Date(Date.now() + Math.floor(Math.random() * 10000000000));
diff --git a/frontend/demo/component/grid/react/grid-column-borders.tsx b/frontend/demo/component/grid/react/grid-column-borders.tsx
index 8fa2c46dcb..fdebf374c0 100644
--- a/frontend/demo/component/grid/react/grid-column-borders.tsx
+++ b/frontend/demo/component/grid/react/grid-column-borders.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Avatar } from '@vaadin/react-components/Avatar.js';
import { Grid } from '@vaadin/react-components/Grid.js';
import { GridColumn } from '@vaadin/react-components/GridColumn.js';
diff --git a/frontend/demo/component/grid/react/grid-column-filtering.tsx b/frontend/demo/component/grid/react/grid-column-filtering.tsx
index 61f8052672..c2243b870b 100644
--- a/frontend/demo/component/grid/react/grid-column-filtering.tsx
+++ b/frontend/demo/component/grid/react/grid-column-filtering.tsx
@@ -1,10 +1,10 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
+import { Avatar } from '@vaadin/react-components/Avatar.js';
import { Grid } from '@vaadin/react-components/Grid.js';
import { GridFilterColumn } from '@vaadin/react-components/GridFilterColumn.js';
-import { Avatar } from '@vaadin/react-components/Avatar.js';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
diff --git a/frontend/demo/component/grid/react/grid-column-freezing.tsx b/frontend/demo/component/grid/react/grid-column-freezing.tsx
index f84010a259..ecbcc9f774 100644
--- a/frontend/demo/component/grid/react/grid-column-freezing.tsx
+++ b/frontend/demo/component/grid/react/grid-column-freezing.tsx
@@ -1,12 +1,12 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
+import { Button } from '@vaadin/react-components/Button.js';
import { Grid } from '@vaadin/react-components/Grid.js';
import { GridColumn } from '@vaadin/react-components/GridColumn.js';
-import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
import { getPeople } from 'Frontend/demo/domain/DataService';
-import { Button } from '@vaadin/react-components/Button.js';
+import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/grid/react/grid-column-grouping.tsx b/frontend/demo/component/grid/react/grid-column-grouping.tsx
index 0ef5601d94..dcbbee38b1 100644
--- a/frontend/demo/component/grid/react/grid-column-grouping.tsx
+++ b/frontend/demo/component/grid/react/grid-column-grouping.tsx
@@ -1,12 +1,12 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Grid } from '@vaadin/react-components/Grid.js';
-import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
-import { getPeople } from 'Frontend/demo/domain/DataService';
-import { GridColumnGroup } from '@vaadin/react-components/GridColumnGroup.js';
import { GridColumn } from '@vaadin/react-components/GridColumn.js';
+import { GridColumnGroup } from '@vaadin/react-components/GridColumnGroup.js';
+import { getPeople } from 'Frontend/demo/domain/DataService';
+import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/grid/react/grid-column-header-footer.tsx b/frontend/demo/component/grid/react/grid-column-header-footer.tsx
index 713f10a5ad..9d67c32827 100644
--- a/frontend/demo/component/grid/react/grid-column-header-footer.tsx
+++ b/frontend/demo/component/grid/react/grid-column-header-footer.tsx
@@ -1,14 +1,14 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Grid } from '@vaadin/react-components/Grid.js';
-import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
-import { getPeople } from 'Frontend/demo/domain/DataService';
import { GridColumn } from '@vaadin/react-components/GridColumn.js';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
import { Icon } from '@vaadin/react-components/Icon.js';
-import '@vaadin/icons';
+import { getPeople } from 'Frontend/demo/domain/DataService';
+import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
// tag::snippet[]
function subscriberHeaderRenderer() {
diff --git a/frontend/demo/component/grid/react/grid-column-reordering-resizing.tsx b/frontend/demo/component/grid/react/grid-column-reordering-resizing.tsx
index 46628686fc..89b918d0bd 100644
--- a/frontend/demo/component/grid/react/grid-column-reordering-resizing.tsx
+++ b/frontend/demo/component/grid/react/grid-column-reordering-resizing.tsx
@@ -1,12 +1,12 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Grid } from '@vaadin/react-components/Grid.js';
import { GridColumn } from '@vaadin/react-components/GridColumn.js';
import { GridColumnGroup } from '@vaadin/react-components/GridColumnGroup.js';
-import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
import { getPeople } from 'Frontend/demo/domain/DataService';
+import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/grid/react/grid-column-visibility.tsx b/frontend/demo/component/grid/react/grid-column-visibility.tsx
index 537e695279..40189af516 100644
--- a/frontend/demo/component/grid/react/grid-column-visibility.tsx
+++ b/frontend/demo/component/grid/react/grid-column-visibility.tsx
@@ -1,14 +1,14 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
+import { Button } from '@vaadin/react-components/Button.js';
+import { ContextMenu } from '@vaadin/react-components/ContextMenu.js';
import { Grid } from '@vaadin/react-components/Grid.js';
-import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
-import { getPeople } from 'Frontend/demo/domain/DataService';
import { GridColumn } from '@vaadin/react-components/GridColumn.js';
-import { ContextMenu } from '@vaadin/react-components/ContextMenu.js';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
-import { Button } from '@vaadin/react-components/Button.js';
+import { getPeople } from 'Frontend/demo/domain/DataService';
+import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/grid/react/grid-column-width.tsx b/frontend/demo/component/grid/react/grid-column-width.tsx
index 2dd4879d1f..cb105c6814 100644
--- a/frontend/demo/component/grid/react/grid-column-width.tsx
+++ b/frontend/demo/component/grid/react/grid-column-width.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Grid } from '@vaadin/react-components/Grid.js';
import { GridColumn } from '@vaadin/react-components/GridColumn.js';
import { GridSelectionColumn } from '@vaadin/react-components/GridSelectionColumn.js';
diff --git a/frontend/demo/component/grid/react/grid-compact.tsx b/frontend/demo/component/grid/react/grid-compact.tsx
index 4757b1d8ee..756db40b88 100644
--- a/frontend/demo/component/grid/react/grid-compact.tsx
+++ b/frontend/demo/component/grid/react/grid-compact.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Grid } from '@vaadin/react-components/Grid.js';
import { GridColumn } from '@vaadin/react-components/GridColumn.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
diff --git a/frontend/demo/component/grid/react/grid-content.tsx b/frontend/demo/component/grid/react/grid-content.tsx
index ccf99efd1d..dc38c8d6e0 100644
--- a/frontend/demo/component/grid/react/grid-content.tsx
+++ b/frontend/demo/component/grid/react/grid-content.tsx
@@ -1,15 +1,15 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
+import { Avatar } from '@vaadin/react-components/Avatar.js';
import { Grid } from '@vaadin/react-components/Grid.js';
import { GridColumn } from '@vaadin/react-components/GridColumn.js';
import { GridSelectionColumn } from '@vaadin/react-components/GridSelectionColumn.js';
-import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
-import { getPeople } from 'Frontend/demo/domain/DataService';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
-import { Avatar } from '@vaadin/react-components/Avatar.js';
import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
+import { getPeople } from 'Frontend/demo/domain/DataService';
+import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
// tag::snippet[]
const employeeRenderer = (person: Person) => (
diff --git a/frontend/demo/component/grid/react/grid-context-menu.tsx b/frontend/demo/component/grid/react/grid-context-menu.tsx
index e45478e5e1..3f5cbc7164 100644
--- a/frontend/demo/component/grid/react/grid-context-menu.tsx
+++ b/frontend/demo/component/grid/react/grid-context-menu.tsx
@@ -1,14 +1,14 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect, useRef } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
-import { Grid, type GridElement } from '@vaadin/react-components/Grid.js';
-import { GridColumn } from '@vaadin/react-components/GridColumn.js';
+import { useSignal } from '@vaadin/hilla-react-signals';
import {
ContextMenu,
type ContextMenuElement,
type ContextMenuRendererContext,
} from '@vaadin/react-components/ContextMenu.js';
+import { Grid, type GridElement } from '@vaadin/react-components/Grid.js';
+import { GridColumn } from '@vaadin/react-components/GridColumn.js';
import { Item } from '@vaadin/react-components/Item.js';
import { ListBox } from '@vaadin/react-components/ListBox.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
diff --git a/frontend/demo/component/grid/react/grid-data-provider.tsx b/frontend/demo/component/grid/react/grid-data-provider.tsx
index 3465b3eb31..c96659437a 100644
--- a/frontend/demo/component/grid/react/grid-data-provider.tsx
+++ b/frontend/demo/component/grid/react/grid-data-provider.tsx
@@ -1,10 +1,8 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useMemo } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
-import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
-import { TextField } from '@vaadin/react-components/TextField.js';
-import { Icon } from '@vaadin/react-components/Icon.js';
+import { useSignal } from '@vaadin/hilla-react-signals';
import {
Grid,
type GridDataProviderCallback,
@@ -13,9 +11,11 @@ import {
type GridSorterDirection,
} from '@vaadin/react-components/Grid.js';
import { GridSortColumn } from '@vaadin/react-components/GridSortColumn.js';
+import { Icon } from '@vaadin/react-components/Icon.js';
+import { TextField } from '@vaadin/react-components/TextField.js';
+import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
-import '@vaadin/icons';
function matchesTerm(value: string, searchTerm: string) {
return value.toLowerCase().includes(searchTerm.toLowerCase());
diff --git a/frontend/demo/component/grid/react/grid-drag-drop-filters.tsx b/frontend/demo/component/grid/react/grid-drag-drop-filters.tsx
index 4d530f46aa..90985f7545 100644
--- a/frontend/demo/component/grid/react/grid-drag-drop-filters.tsx
+++ b/frontend/demo/component/grid/react/grid-drag-drop-filters.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect, useMemo } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import {
Grid,
type GridDataProviderCallback,
diff --git a/frontend/demo/component/grid/react/grid-drag-rows-between-grids.tsx b/frontend/demo/component/grid/react/grid-drag-rows-between-grids.tsx
index a987a2009c..b35b2040a8 100644
--- a/frontend/demo/component/grid/react/grid-drag-rows-between-grids.tsx
+++ b/frontend/demo/component/grid/react/grid-drag-rows-between-grids.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Grid, type GridDragStartEvent } from '@vaadin/react-components/Grid.js';
import { GridColumn } from '@vaadin/react-components/GridColumn.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
diff --git a/frontend/demo/component/grid/react/grid-dynamic-height.tsx b/frontend/demo/component/grid/react/grid-dynamic-height.tsx
index 7a938d75fb..c65b5cec76 100644
--- a/frontend/demo/component/grid/react/grid-dynamic-height.tsx
+++ b/frontend/demo/component/grid/react/grid-dynamic-height.tsx
@@ -1,16 +1,16 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
+import { Button } from '@vaadin/react-components/Button.js';
+import { ComboBox } from '@vaadin/react-components/ComboBox.js';
import { Grid } from '@vaadin/react-components/Grid.js';
import { GridColumn } from '@vaadin/react-components/GridColumn.js';
-import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
-import { getPeople } from 'Frontend/demo/domain/DataService';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
-import { ComboBox } from '@vaadin/react-components/ComboBox.js';
-import { Button } from '@vaadin/react-components/Button.js';
import { Icon } from '@vaadin/react-components/Icon.js';
-import '@vaadin/icons';
+import { getPeople } from 'Frontend/demo/domain/DataService';
+import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
function renderNoInvitationAlert() {
return (
diff --git a/frontend/demo/component/grid/react/grid-external-filtering.tsx b/frontend/demo/component/grid/react/grid-external-filtering.tsx
index 1815bf2999..b1af378bee 100644
--- a/frontend/demo/component/grid/react/grid-external-filtering.tsx
+++ b/frontend/demo/component/grid/react/grid-external-filtering.tsx
@@ -1,17 +1,17 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
+import { Avatar } from '@vaadin/react-components/Avatar.js';
import { Grid } from '@vaadin/react-components/Grid.js';
import { GridColumn } from '@vaadin/react-components/GridColumn.js';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
-import { Avatar } from '@vaadin/react-components/Avatar.js';
-import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
+import { Icon } from '@vaadin/react-components/Icon.js';
import { TextField } from '@vaadin/react-components/TextField.js';
+import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
-import { Icon } from '@vaadin/react-components/Icon.js';
-import '@vaadin/icons';
type PersonEnhanced = Person & { displayName: string };
diff --git a/frontend/demo/component/grid/react/grid-header-footer-styling.tsx b/frontend/demo/component/grid/react/grid-header-footer-styling.tsx
index 0ac2605f4f..ee3700a636 100644
--- a/frontend/demo/component/grid/react/grid-header-footer-styling.tsx
+++ b/frontend/demo/component/grid/react/grid-header-footer-styling.tsx
@@ -1,11 +1,11 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Grid } from '@vaadin/react-components/Grid.js';
import { GridColumn } from '@vaadin/react-components/GridColumn.js';
-import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
import { getPeople } from 'Frontend/demo/domain/DataService';
+import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
// tag::snippet[]
interface PersonWithRating extends Person {
diff --git a/frontend/demo/component/grid/react/grid-item-details-toggle.tsx b/frontend/demo/component/grid/react/grid-item-details-toggle.tsx
index 730b0d92d3..5fc78d7f5e 100644
--- a/frontend/demo/component/grid/react/grid-item-details-toggle.tsx
+++ b/frontend/demo/component/grid/react/grid-item-details-toggle.tsx
@@ -1,14 +1,14 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
+import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
+import { Button } from '@vaadin/react-components/Button.js';
+import { FormLayout } from '@vaadin/react-components/FormLayout.js';
import { Grid } from '@vaadin/react-components/Grid.js';
import { GridColumn } from '@vaadin/react-components/GridColumn.js';
-import { Button } from '@vaadin/react-components/Button.js';
import { TextField } from '@vaadin/react-components/TextField.js';
-import { FormLayout } from '@vaadin/react-components/FormLayout.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
-import { useSignal } from '@vaadin/hilla-react-signals';
-import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/grid/react/grid-item-details.tsx b/frontend/demo/component/grid/react/grid-item-details.tsx
index 77d0468154..bd91131d6f 100644
--- a/frontend/demo/component/grid/react/grid-item-details.tsx
+++ b/frontend/demo/component/grid/react/grid-item-details.tsx
@@ -1,11 +1,11 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
+import { FormLayout } from '@vaadin/react-components/FormLayout.js';
import { Grid } from '@vaadin/react-components/Grid.js';
import { GridColumn } from '@vaadin/react-components/GridColumn.js';
import { TextField } from '@vaadin/react-components/TextField.js';
-import { FormLayout } from '@vaadin/react-components/FormLayout.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
diff --git a/frontend/demo/component/grid/react/grid-lazy-column-rendering.tsx b/frontend/demo/component/grid/react/grid-lazy-column-rendering.tsx
index d04c93fb64..9544a64e88 100644
--- a/frontend/demo/component/grid/react/grid-lazy-column-rendering.tsx
+++ b/frontend/demo/component/grid/react/grid-lazy-column-rendering.tsx
@@ -1,11 +1,11 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Grid } from '@vaadin/react-components/Grid.js';
import { GridColumn } from '@vaadin/react-components/GridColumn.js';
-import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
import { getPeople } from 'Frontend/demo/domain/DataService';
+import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
function columnRenderer(column: HTMLElement, index: number) {
return (
diff --git a/frontend/demo/component/grid/react/grid-multi-select-mode.tsx b/frontend/demo/component/grid/react/grid-multi-select-mode.tsx
index 64ce1ac3cf..6118f09d62 100644
--- a/frontend/demo/component/grid/react/grid-multi-select-mode.tsx
+++ b/frontend/demo/component/grid/react/grid-multi-select-mode.tsx
@@ -1,12 +1,12 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Grid } from '@vaadin/react-components/Grid.js';
-import { GridSelectionColumn } from '@vaadin/react-components/GridSelectionColumn.js';
import { GridColumn } from '@vaadin/react-components/GridColumn.js';
-import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
+import { GridSelectionColumn } from '@vaadin/react-components/GridSelectionColumn.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
+import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/grid/react/grid-multisort.tsx b/frontend/demo/component/grid/react/grid-multisort.tsx
index f805db39da..096bf16680 100644
--- a/frontend/demo/component/grid/react/grid-multisort.tsx
+++ b/frontend/demo/component/grid/react/grid-multisort.tsx
@@ -1,11 +1,11 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Grid } from '@vaadin/react-components/Grid.js';
import { GridSortColumn } from '@vaadin/react-components/GridSortColumn.js';
-import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
import { getPeople } from 'Frontend/demo/domain/DataService';
+import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/grid/react/grid-no-border.tsx b/frontend/demo/component/grid/react/grid-no-border.tsx
index 2e4eeb8262..687b81eb4f 100644
--- a/frontend/demo/component/grid/react/grid-no-border.tsx
+++ b/frontend/demo/component/grid/react/grid-no-border.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Avatar } from '@vaadin/react-components/Avatar.js';
import { Grid } from '@vaadin/react-components/Grid.js';
import { GridColumn } from '@vaadin/react-components/GridColumn.js';
diff --git a/frontend/demo/component/grid/react/grid-no-row-border.tsx b/frontend/demo/component/grid/react/grid-no-row-border.tsx
index 22338fced6..61bc6ed410 100644
--- a/frontend/demo/component/grid/react/grid-no-row-border.tsx
+++ b/frontend/demo/component/grid/react/grid-no-row-border.tsx
@@ -1,12 +1,12 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
+import { Avatar } from '@vaadin/react-components/Avatar.js';
import { Grid } from '@vaadin/react-components/Grid.js';
-import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
-import { getPeople } from 'Frontend/demo/domain/DataService';
import { GridColumn } from '@vaadin/react-components/GridColumn.js';
-import { Avatar } from '@vaadin/react-components/Avatar.js';
+import { getPeople } from 'Frontend/demo/domain/DataService';
+import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/grid/react/grid-rich-content-sorting.tsx b/frontend/demo/component/grid/react/grid-rich-content-sorting.tsx
index d4e3382512..d800993757 100644
--- a/frontend/demo/component/grid/react/grid-rich-content-sorting.tsx
+++ b/frontend/demo/component/grid/react/grid-rich-content-sorting.tsx
@@ -1,15 +1,15 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { format, parseISO } from 'date-fns';
+import { useSignal } from '@vaadin/hilla-react-signals';
+import { Avatar } from '@vaadin/react-components/Avatar.js';
import { Grid } from '@vaadin/react-components/Grid.js';
import { GridSortColumn } from '@vaadin/react-components/GridSortColumn.js';
-import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
-import { getPeople } from 'Frontend/demo/domain/DataService';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
-import { Avatar } from '@vaadin/react-components/Avatar.js';
import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
-import { format, parseISO } from 'date-fns';
+import { getPeople } from 'Frontend/demo/domain/DataService';
+import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
// tag::snippet[]
function employeeRenderer({ item: person }: { item: Person }) {
diff --git a/frontend/demo/component/grid/react/grid-row-reordering.tsx b/frontend/demo/component/grid/react/grid-row-reordering.tsx
index 2a074b16e0..1d190e1739 100644
--- a/frontend/demo/component/grid/react/grid-row-reordering.tsx
+++ b/frontend/demo/component/grid/react/grid-row-reordering.tsx
@@ -1,14 +1,14 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
+import { Avatar } from '@vaadin/react-components/Avatar.js';
import {
Grid,
- type GridDropEvent,
type GridDragStartEvent,
+ type GridDropEvent,
} from '@vaadin/react-components/Grid.js';
import { GridColumn } from '@vaadin/react-components/GridColumn.js';
-import { Avatar } from '@vaadin/react-components/Avatar.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
diff --git a/frontend/demo/component/grid/react/grid-row-stripes.tsx b/frontend/demo/component/grid/react/grid-row-stripes.tsx
index 32aaefa50e..3b290926d0 100644
--- a/frontend/demo/component/grid/react/grid-row-stripes.tsx
+++ b/frontend/demo/component/grid/react/grid-row-stripes.tsx
@@ -1,10 +1,10 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
+import { Avatar } from '@vaadin/react-components/Avatar.js';
import { Grid } from '@vaadin/react-components/Grid.js';
import { GridColumn } from '@vaadin/react-components/GridColumn.js';
-import { Avatar } from '@vaadin/react-components/Avatar.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
diff --git a/frontend/demo/component/grid/react/grid-single-selection-mode.tsx b/frontend/demo/component/grid/react/grid-single-selection-mode.tsx
index c3c0dbed9b..578f26a5dd 100644
--- a/frontend/demo/component/grid/react/grid-single-selection-mode.tsx
+++ b/frontend/demo/component/grid/react/grid-single-selection-mode.tsx
@@ -1,11 +1,11 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Grid } from '@vaadin/react-components/Grid.js';
import { GridColumn } from '@vaadin/react-components/GridColumn.js';
-import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
import { getPeople } from 'Frontend/demo/domain/DataService';
+import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/grid/react/grid-sorting.tsx b/frontend/demo/component/grid/react/grid-sorting.tsx
index 678de65bd7..fd376ea1e3 100644
--- a/frontend/demo/component/grid/react/grid-sorting.tsx
+++ b/frontend/demo/component/grid/react/grid-sorting.tsx
@@ -1,11 +1,11 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Grid } from '@vaadin/react-components/Grid.js';
import { GridSortColumn } from '@vaadin/react-components/GridSortColumn.js';
-import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
import { getPeople } from 'Frontend/demo/domain/DataService';
+import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/grid/react/grid-styling.tsx b/frontend/demo/component/grid/react/grid-styling.tsx
index 49a50a11a0..fd76663af3 100644
--- a/frontend/demo/component/grid/react/grid-styling.tsx
+++ b/frontend/demo/component/grid/react/grid-styling.tsx
@@ -1,11 +1,11 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Grid, type GridCellPartNameGenerator } from '@vaadin/react-components/Grid.js';
import { GridColumn } from '@vaadin/react-components/GridColumn.js';
-import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
import { getPeople } from 'Frontend/demo/domain/DataService';
+import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
// tag::snippet[]
interface PersonWithRating extends Person {
diff --git a/frontend/demo/component/grid/react/grid-tooltip-generator.tsx b/frontend/demo/component/grid/react/grid-tooltip-generator.tsx
index dbce820074..7a3f466ba9 100644
--- a/frontend/demo/component/grid/react/grid-tooltip-generator.tsx
+++ b/frontend/demo/component/grid/react/grid-tooltip-generator.tsx
@@ -1,15 +1,15 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { differenceInYears, parseISO } from 'date-fns';
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Grid, type GridEventContext } from '@vaadin/react-components/Grid.js';
-import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
-import { getPeople } from 'Frontend/demo/domain/DataService';
import { GridColumn } from '@vaadin/react-components/GridColumn.js';
import { Icon } from '@vaadin/react-components/Icon.js';
import { Tooltip } from '@vaadin/react-components/Tooltip.js';
-import { differenceInYears, parseISO } from 'date-fns';
-import '@vaadin/icons';
+import { getPeople } from 'Frontend/demo/domain/DataService';
+import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
const statusRenderer = ({ item: { status } }: { item: Person }) => {
const icon = status === 'Available' ? 'check' : 'close-small';
diff --git a/frontend/demo/component/grid/react/grid-wrap-cell-content.tsx b/frontend/demo/component/grid/react/grid-wrap-cell-content.tsx
index f07af71522..9113967174 100644
--- a/frontend/demo/component/grid/react/grid-wrap-cell-content.tsx
+++ b/frontend/demo/component/grid/react/grid-wrap-cell-content.tsx
@@ -1,12 +1,12 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
+import { Avatar } from '@vaadin/react-components/Avatar.js';
import { Grid } from '@vaadin/react-components/Grid.js';
import { GridColumn } from '@vaadin/react-components/GridColumn.js';
-import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
import { getPeople } from 'Frontend/demo/domain/DataService';
-import { Avatar } from '@vaadin/react-components/Avatar.js';
+import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/gridpro/react/grid-pro-basic.tsx b/frontend/demo/component/gridpro/react/grid-pro-basic.tsx
index ed8875a75b..4be218d053 100644
--- a/frontend/demo/component/gridpro/react/grid-pro-basic.tsx
+++ b/frontend/demo/component/gridpro/react/grid-pro-basic.tsx
@@ -1,11 +1,11 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { GridPro } from '@vaadin/react-components-pro/GridPro.js';
-import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
-import { getPeople } from 'Frontend/demo/domain/DataService';
import { GridProEditColumn } from '@vaadin/react-components-pro/GridProEditColumn.js';
+import { getPeople } from 'Frontend/demo/domain/DataService';
+import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/gridpro/react/grid-pro-cell-editability.tsx b/frontend/demo/component/gridpro/react/grid-pro-cell-editability.tsx
index aaba38da84..cb661c92a2 100644
--- a/frontend/demo/component/gridpro/react/grid-pro-cell-editability.tsx
+++ b/frontend/demo/component/gridpro/react/grid-pro-cell-editability.tsx
@@ -1,12 +1,12 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
+import type { GridItemModel } from '@vaadin/react-components/Grid.js';
import { GridPro } from '@vaadin/react-components-pro/GridPro.js';
import { GridProEditColumn } from '@vaadin/react-components-pro/GridProEditColumn.js';
-import type { GridItemModel } from '@vaadin/react-components/Grid.js';
-import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
import { getPeople } from 'Frontend/demo/domain/DataService';
+import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/gridpro/react/grid-pro-edit-column.tsx b/frontend/demo/component/gridpro/react/grid-pro-edit-column.tsx
index 9ecbfc4352..2712004931 100644
--- a/frontend/demo/component/gridpro/react/grid-pro-edit-column.tsx
+++ b/frontend/demo/component/gridpro/react/grid-pro-edit-column.tsx
@@ -1,12 +1,12 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
+import { GridColumn } from '@vaadin/react-components/GridColumn.js';
import { GridPro } from '@vaadin/react-components-pro/GridPro.js';
import { GridProEditColumn } from '@vaadin/react-components-pro/GridProEditColumn.js';
-import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
import { getPeople } from 'Frontend/demo/domain/DataService';
-import { GridColumn } from '@vaadin/react-components/GridColumn.js';
+import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/gridpro/react/grid-pro-editors.tsx b/frontend/demo/component/gridpro/react/grid-pro-editors.tsx
index ed3f9ead20..0c38adff4c 100644
--- a/frontend/demo/component/gridpro/react/grid-pro-editors.tsx
+++ b/frontend/demo/component/gridpro/react/grid-pro-editors.tsx
@@ -1,11 +1,11 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { format, parseISO } from 'date-fns';
+import { useSignal } from '@vaadin/hilla-react-signals';
import { DatePicker } from '@vaadin/react-components/DatePicker.js';
import { GridPro } from '@vaadin/react-components-pro/GridPro.js';
import { GridProEditColumn } from '@vaadin/react-components-pro/GridProEditColumn.js';
-import { format, parseISO } from 'date-fns';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
diff --git a/frontend/demo/component/gridpro/react/grid-pro-enter-next-row.tsx b/frontend/demo/component/gridpro/react/grid-pro-enter-next-row.tsx
index 2a634a93a0..be8e18bb57 100644
--- a/frontend/demo/component/gridpro/react/grid-pro-enter-next-row.tsx
+++ b/frontend/demo/component/gridpro/react/grid-pro-enter-next-row.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { GridPro } from '@vaadin/react-components-pro/GridPro.js';
import { GridProEditColumn } from '@vaadin/react-components-pro/GridProEditColumn.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
diff --git a/frontend/demo/component/gridpro/react/grid-pro-highlight-editable-cells.tsx b/frontend/demo/component/gridpro/react/grid-pro-highlight-editable-cells.tsx
index 40a38fa16f..798a5de48e 100644
--- a/frontend/demo/component/gridpro/react/grid-pro-highlight-editable-cells.tsx
+++ b/frontend/demo/component/gridpro/react/grid-pro-highlight-editable-cells.tsx
@@ -1,12 +1,12 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
+import { GridColumn } from '@vaadin/react-components/GridColumn.js';
import { GridPro } from '@vaadin/react-components-pro/GridPro.js';
+import { GridProEditColumn } from '@vaadin/react-components-pro/GridProEditColumn.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
-import { GridColumn } from '@vaadin/react-components/GridColumn.js';
-import { GridProEditColumn } from '@vaadin/react-components-pro/GridProEditColumn.js';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/gridpro/react/grid-pro-highlight-read-only-cells.tsx b/frontend/demo/component/gridpro/react/grid-pro-highlight-read-only-cells.tsx
index 01e7ca961f..8d81ebd9c1 100644
--- a/frontend/demo/component/gridpro/react/grid-pro-highlight-read-only-cells.tsx
+++ b/frontend/demo/component/gridpro/react/grid-pro-highlight-read-only-cells.tsx
@@ -1,9 +1,9 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
-import { GridPro } from '@vaadin/react-components-pro/GridPro.js';
+import { useSignal } from '@vaadin/hilla-react-signals';
import { GridColumn } from '@vaadin/react-components/GridColumn.js';
+import { GridPro } from '@vaadin/react-components-pro/GridPro.js';
import { GridProEditColumn } from '@vaadin/react-components-pro/GridProEditColumn.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
diff --git a/frontend/demo/component/gridpro/react/grid-pro-prevent-save.tsx b/frontend/demo/component/gridpro/react/grid-pro-prevent-save.tsx
index dae434da3f..ccccc2df71 100644
--- a/frontend/demo/component/gridpro/react/grid-pro-prevent-save.tsx
+++ b/frontend/demo/component/gridpro/react/grid-pro-prevent-save.tsx
@@ -1,15 +1,15 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
+import { Notification } from '@vaadin/notification';
import {
GridPro,
type GridProItemPropertyChangedEvent,
} from '@vaadin/react-components-pro/GridPro.js';
-import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
-import { Notification } from '@vaadin/notification';
import { GridProEditColumn } from '@vaadin/react-components-pro/GridProEditColumn.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
+import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/gridpro/react/grid-pro-single-cell-edit.tsx b/frontend/demo/component/gridpro/react/grid-pro-single-cell-edit.tsx
index 0200427307..47b12fcd64 100644
--- a/frontend/demo/component/gridpro/react/grid-pro-single-cell-edit.tsx
+++ b/frontend/demo/component/gridpro/react/grid-pro-single-cell-edit.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { GridPro } from '@vaadin/react-components-pro/GridPro.js';
import { GridProEditColumn } from '@vaadin/react-components-pro/GridProEditColumn.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
diff --git a/frontend/demo/component/gridpro/react/grid-pro-single-click.tsx b/frontend/demo/component/gridpro/react/grid-pro-single-click.tsx
index b0cb6d0861..02bcc14bc0 100644
--- a/frontend/demo/component/gridpro/react/grid-pro-single-click.tsx
+++ b/frontend/demo/component/gridpro/react/grid-pro-single-click.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { GridPro } from '@vaadin/react-components-pro/GridPro.js';
import { GridProEditColumn } from '@vaadin/react-components-pro/GridProEditColumn.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
diff --git a/frontend/demo/component/icons/react/icon-basic.tsx b/frontend/demo/component/icons/react/icon-basic.tsx
index b3f9d92f60..bdd01749af 100644
--- a/frontend/demo/component/icons/react/icon-basic.tsx
+++ b/frontend/demo/component/icons/react/icon-basic.tsx
@@ -1,8 +1,8 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { Icon } from '@vaadin/react-components/Icon.js';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
-import '@vaadin/icons';
+import { Icon } from '@vaadin/react-components/Icon.js';
function Example() {
return (
diff --git a/frontend/demo/component/icons/react/lumo-icons.tsx b/frontend/demo/component/icons/react/lumo-icons.tsx
index ed7a25d4c1..d1d08ecc8d 100644
--- a/frontend/demo/component/icons/react/lumo-icons.tsx
+++ b/frontend/demo/component/icons/react/lumo-icons.tsx
@@ -1,9 +1,9 @@
+import '@vaadin/vaadin-lumo-styles/vaadin-iconset.js';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
+import { Button } from '@vaadin/react-components/Button.js';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
import { Icon } from '@vaadin/react-components/Icon.js';
-import { Button } from '@vaadin/react-components/Button.js';
-import '@vaadin/vaadin-lumo-styles/vaadin-iconset.js';
function Example() {
return (
diff --git a/frontend/demo/component/icons/react/svg-sprites.tsx b/frontend/demo/component/icons/react/svg-sprites.tsx
index 93f73ec87d..fd83039eb3 100644
--- a/frontend/demo/component/icons/react/svg-sprites.tsx
+++ b/frontend/demo/component/icons/react/svg-sprites.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { Icon } from '@vaadin/react-components/Icon.js';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
+import { Icon } from '@vaadin/react-components/Icon.js';
import spriteIcons from '../../../../../src/main/resources/icons/solid.svg';
function Example() {
diff --git a/frontend/demo/component/icons/react/svg-standalone.tsx b/frontend/demo/component/icons/react/svg-standalone.tsx
index f1e5ae797d..e8950c9a47 100644
--- a/frontend/demo/component/icons/react/svg-standalone.tsx
+++ b/frontend/demo/component/icons/react/svg-standalone.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import codeBranchIcon from '../../../../../src/main/resources/icons/code-branch.svg';
import { Icon } from '@vaadin/react-components/Icon.js';
+import codeBranchIcon from '../../../../../src/main/resources/icons/code-branch.svg';
function Example() {
return (
diff --git a/frontend/demo/component/icons/react/vaadin-icons.tsx b/frontend/demo/component/icons/react/vaadin-icons.tsx
index fb2dacfc79..f537fb7b39 100644
--- a/frontend/demo/component/icons/react/vaadin-icons.tsx
+++ b/frontend/demo/component/icons/react/vaadin-icons.tsx
@@ -1,8 +1,8 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
+import { Button } from '@vaadin/react-components/Button.js';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
import { Icon } from '@vaadin/react-components/Icon.js';
-import { Button } from '@vaadin/react-components/Button.js';
function Example() {
return (
diff --git a/frontend/demo/component/listbox/react/list-box-basic.tsx b/frontend/demo/component/listbox/react/list-box-basic.tsx
index 40f7c09024..e1668c9dfc 100644
--- a/frontend/demo/component/listbox/react/list-box-basic.tsx
+++ b/frontend/demo/component/listbox/react/list-box-basic.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { ListBox } from '@vaadin/react-components/ListBox.js';
import { Item } from '@vaadin/react-components/Item.js';
+import { ListBox } from '@vaadin/react-components/ListBox.js';
function Example() {
return (
diff --git a/frontend/demo/component/listbox/react/list-box-custom-item-presentation.tsx b/frontend/demo/component/listbox/react/list-box-custom-item-presentation.tsx
index 9444a5d33d..0d0d12ca98 100644
--- a/frontend/demo/component/listbox/react/list-box-custom-item-presentation.tsx
+++ b/frontend/demo/component/listbox/react/list-box-custom-item-presentation.tsx
@@ -1,14 +1,14 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
-import { ListBox } from '@vaadin/react-components/ListBox.js';
-import { Item } from '@vaadin/react-components/Item.js';
-import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Avatar } from '@vaadin/react-components/Avatar.js';
+import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
+import { Item } from '@vaadin/react-components/Item.js';
+import { ListBox } from '@vaadin/react-components/ListBox.js';
import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
-import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
import { getPeople } from 'Frontend/demo/domain/DataService';
+import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/listbox/react/list-box-disabled-items.tsx b/frontend/demo/component/listbox/react/list-box-disabled-items.tsx
index 4b29419f63..38fa46cc16 100644
--- a/frontend/demo/component/listbox/react/list-box-disabled-items.tsx
+++ b/frontend/demo/component/listbox/react/list-box-disabled-items.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { ListBox } from '@vaadin/react-components/ListBox.js';
import { Item } from '@vaadin/react-components/Item.js';
+import { ListBox } from '@vaadin/react-components/ListBox.js';
function Example() {
return (
diff --git a/frontend/demo/component/listbox/react/list-box-multi-selection.tsx b/frontend/demo/component/listbox/react/list-box-multi-selection.tsx
index caa88f7c41..476fbfc3d6 100644
--- a/frontend/demo/component/listbox/react/list-box-multi-selection.tsx
+++ b/frontend/demo/component/listbox/react/list-box-multi-selection.tsx
@@ -1,9 +1,9 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
-import { ListBox } from '@vaadin/react-components/ListBox.js';
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Item } from '@vaadin/react-components/Item.js';
+import { ListBox } from '@vaadin/react-components/ListBox.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
diff --git a/frontend/demo/component/listbox/react/list-box-separators.tsx b/frontend/demo/component/listbox/react/list-box-separators.tsx
index 612970938f..e5bb1d6b3c 100644
--- a/frontend/demo/component/listbox/react/list-box-separators.tsx
+++ b/frontend/demo/component/listbox/react/list-box-separators.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { ListBox } from '@vaadin/react-components/ListBox.js';
import { Item } from '@vaadin/react-components/Item.js';
+import { ListBox } from '@vaadin/react-components/ListBox.js';
function Example() {
return (
diff --git a/frontend/demo/component/listbox/react/list-box-single-selection.tsx b/frontend/demo/component/listbox/react/list-box-single-selection.tsx
index ef7f57f127..2a1e798633 100644
--- a/frontend/demo/component/listbox/react/list-box-single-selection.tsx
+++ b/frontend/demo/component/listbox/react/list-box-single-selection.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { ListBox } from '@vaadin/react-components/ListBox.js';
import { Item } from '@vaadin/react-components/Item.js';
+import { ListBox } from '@vaadin/react-components/ListBox.js';
function Example() {
return (
diff --git a/frontend/demo/component/login/react/login-basic.tsx b/frontend/demo/component/login/react/login-basic.tsx
index 79d5dac07f..bf1f475a8c 100644
--- a/frontend/demo/component/login/react/login-basic.tsx
+++ b/frontend/demo/component/login/react/login-basic.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import { loginHostStyles } from './login-host-styles'; // hidden-source-line
import React from 'react';
import { LoginForm } from '@vaadin/react-components/LoginForm.js';
+import { loginHostStyles } from './login-host-styles'; // hidden-source-line
function Example() {
return (
diff --git a/frontend/demo/component/login/react/login-internationalization.tsx b/frontend/demo/component/login/react/login-internationalization.tsx
index bef31ffe37..65e99b6680 100644
--- a/frontend/demo/component/login/react/login-internationalization.tsx
+++ b/frontend/demo/component/login/react/login-internationalization.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import { loginHostStyles } from './login-host-styles'; // hidden-source-line
import React from 'react';
import { LoginForm } from '@vaadin/react-components/LoginForm.js';
+import { loginHostStyles } from './login-host-styles'; // hidden-source-line
// tag::snippet[]
const i18n = {
diff --git a/frontend/demo/component/login/react/login-overlay-basic.tsx b/frontend/demo/component/login/react/login-overlay-basic.tsx
index 44f000d85e..2aa9595a21 100644
--- a/frontend/demo/component/login/react/login-overlay-basic.tsx
+++ b/frontend/demo/component/login/react/login-overlay-basic.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Button } from '@vaadin/react-components/Button.js';
import { LoginOverlay } from '@vaadin/react-components/LoginOverlay.js';
diff --git a/frontend/demo/component/menubar/react/menu-bar-basic.tsx b/frontend/demo/component/menubar/react/menu-bar-basic.tsx
index c609fd87dc..d950992d1e 100644
--- a/frontend/demo/component/menubar/react/menu-bar-basic.tsx
+++ b/frontend/demo/component/menubar/react/menu-bar-basic.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { MenuBar, type MenuBarItem } from '@vaadin/react-components/MenuBar.js';
function Example() {
diff --git a/frontend/demo/component/menubar/react/menu-bar-checkable.tsx b/frontend/demo/component/menubar/react/menu-bar-checkable.tsx
index e4101d20ee..d474804425 100644
--- a/frontend/demo/component/menubar/react/menu-bar-checkable.tsx
+++ b/frontend/demo/component/menubar/react/menu-bar-checkable.tsx
@@ -1,11 +1,11 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import {
MenuBar,
- type SubMenuItem,
type MenuBarItemSelectedEvent,
+ type SubMenuItem,
} from '@vaadin/react-components/MenuBar.js';
function Example() {
diff --git a/frontend/demo/component/menubar/react/menu-bar-combo-buttons.tsx b/frontend/demo/component/menubar/react/menu-bar-combo-buttons.tsx
index c2a50d383a..093290c027 100644
--- a/frontend/demo/component/menubar/react/menu-bar-combo-buttons.tsx
+++ b/frontend/demo/component/menubar/react/menu-bar-combo-buttons.tsx
@@ -1,8 +1,8 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { MenuBar } from '@vaadin/react-components/MenuBar.js';
import { Icon } from '@vaadin/react-components/Icon.js';
-import '@vaadin/icons';
+import { MenuBar } from '@vaadin/react-components/MenuBar.js';
function Example() {
// tag::snippet[]
diff --git a/frontend/demo/component/menubar/react/menu-bar-icon-only.tsx b/frontend/demo/component/menubar/react/menu-bar-icon-only.tsx
index 55b732c200..306b1a74fd 100644
--- a/frontend/demo/component/menubar/react/menu-bar-icon-only.tsx
+++ b/frontend/demo/component/menubar/react/menu-bar-icon-only.tsx
@@ -1,8 +1,8 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { MenuBar } from '@vaadin/react-components/MenuBar.js';
import { Icon } from '@vaadin/react-components/Icon.js';
-import '@vaadin/icons';
+import { MenuBar } from '@vaadin/react-components/MenuBar.js';
function createItem(iconName: string, ariaLabel: string) {
return ;
diff --git a/frontend/demo/component/menubar/react/menu-bar-icons.tsx b/frontend/demo/component/menubar/react/menu-bar-icons.tsx
index 8037d239bb..6511ed4fef 100644
--- a/frontend/demo/component/menubar/react/menu-bar-icons.tsx
+++ b/frontend/demo/component/menubar/react/menu-bar-icons.tsx
@@ -1,8 +1,8 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { MenuBar } from '@vaadin/react-components/MenuBar.js';
import { Icon } from '@vaadin/react-components/Icon.js';
-import '@vaadin/icons';
+import { MenuBar } from '@vaadin/react-components/MenuBar.js';
function createItem(iconName: string, text: string, isChild = false) {
const iconStyle: React.CSSProperties = {
diff --git a/frontend/demo/component/menubar/react/menu-bar-styles.tsx b/frontend/demo/component/menubar/react/menu-bar-styles.tsx
index 4616bfc5cc..ef03703845 100644
--- a/frontend/demo/component/menubar/react/menu-bar-styles.tsx
+++ b/frontend/demo/component/menubar/react/menu-bar-styles.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { MenuBar } from '@vaadin/react-components/MenuBar.js';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
+import { MenuBar } from '@vaadin/react-components/MenuBar.js';
function Example() {
return (
diff --git a/frontend/demo/component/menubar/react/menu-bar-tooltip.tsx b/frontend/demo/component/menubar/react/menu-bar-tooltip.tsx
index 3fc7003622..c855433e66 100644
--- a/frontend/demo/component/menubar/react/menu-bar-tooltip.tsx
+++ b/frontend/demo/component/menubar/react/menu-bar-tooltip.tsx
@@ -1,9 +1,9 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { MenuBar } from '@vaadin/react-components/MenuBar.js';
import { Icon } from '@vaadin/react-components/Icon.js';
+import { MenuBar } from '@vaadin/react-components/MenuBar.js';
import { Tooltip } from '@vaadin/react-components/Tooltip.js';
-import '@vaadin/icons';
function createItem(iconName: string) {
return ;
diff --git a/frontend/demo/component/messages/react/message-basic.tsx b/frontend/demo/component/messages/react/message-basic.tsx
index b9533ee4d2..fab6669e4e 100644
--- a/frontend/demo/component/messages/react/message-basic.tsx
+++ b/frontend/demo/component/messages/react/message-basic.tsx
@@ -1,10 +1,10 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
-import { MessageList } from '@vaadin/react-components/MessageList.js';
-import { MessageInput } from '@vaadin/react-components/MessageInput.js';
+import { useSignal } from '@vaadin/hilla-react-signals';
import type { MessageListItem } from '@vaadin/message-list';
+import { MessageInput } from '@vaadin/react-components/MessageInput.js';
+import { MessageList } from '@vaadin/react-components/MessageList.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
function Example() {
diff --git a/frontend/demo/component/messages/react/message-list-component.tsx b/frontend/demo/component/messages/react/message-list-component.tsx
index 8bb1754fc6..f8375ad567 100644
--- a/frontend/demo/component/messages/react/message-list-component.tsx
+++ b/frontend/demo/component/messages/react/message-list-component.tsx
@@ -1,11 +1,11 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
import { format, subDays, subMinutes } from 'date-fns';
+import { useSignal } from '@vaadin/hilla-react-signals';
import { MessageList } from '@vaadin/react-components/MessageList.js';
-import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
import { getPeople } from 'Frontend/demo/domain/DataService';
+import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/messages/react/message-list-with-theme-component.tsx b/frontend/demo/component/messages/react/message-list-with-theme-component.tsx
index 97e681e904..42d874fd69 100644
--- a/frontend/demo/component/messages/react/message-list-with-theme-component.tsx
+++ b/frontend/demo/component/messages/react/message-list-with-theme-component.tsx
@@ -1,10 +1,10 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { format, subDays, subMinutes } from 'date-fns';
+import { useSignal } from '@vaadin/hilla-react-signals';
import { MessageList } from '@vaadin/react-components/MessageList.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
-import { subDays, subMinutes, format } from 'date-fns';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
function Example() {
diff --git a/frontend/demo/component/multi-select-combo-box/react/multi-select-combo-box-auto-expand.tsx b/frontend/demo/component/multi-select-combo-box/react/multi-select-combo-box-auto-expand.tsx
index d4ec26e36c..7093f45a28 100644
--- a/frontend/demo/component/multi-select-combo-box/react/multi-select-combo-box-auto-expand.tsx
+++ b/frontend/demo/component/multi-select-combo-box/react/multi-select-combo-box-auto-expand.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useComputed, useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useComputed, useSignal } from '@vaadin/hilla-react-signals';
import { MultiSelectComboBox } from '@vaadin/react-components/MultiSelectComboBox.js';
import { getCountries } from 'Frontend/demo/domain/DataService';
import type Country from 'Frontend/generated/com/vaadin/demo/domain/Country';
diff --git a/frontend/demo/component/multi-select-combo-box/react/multi-select-combo-box-basic.tsx b/frontend/demo/component/multi-select-combo-box/react/multi-select-combo-box-basic.tsx
index 51a3a3624c..656984cb14 100644
--- a/frontend/demo/component/multi-select-combo-box/react/multi-select-combo-box-basic.tsx
+++ b/frontend/demo/component/multi-select-combo-box/react/multi-select-combo-box-basic.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { MultiSelectComboBox } from '@vaadin/react-components/MultiSelectComboBox.js';
import { getCountries } from 'Frontend/demo/domain/DataService';
import type Country from 'Frontend/generated/com/vaadin/demo/domain/Country';
diff --git a/frontend/demo/component/multi-select-combo-box/react/multi-select-combo-box-i18n.tsx b/frontend/demo/component/multi-select-combo-box/react/multi-select-combo-box-i18n.tsx
index de43cf7217..30a1095dcf 100644
--- a/frontend/demo/component/multi-select-combo-box/react/multi-select-combo-box-i18n.tsx
+++ b/frontend/demo/component/multi-select-combo-box/react/multi-select-combo-box-i18n.tsx
@@ -1,10 +1,10 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { MultiSelectComboBox } from '@vaadin/react-components/MultiSelectComboBox.js';
-import type Country from 'Frontend/generated/com/vaadin/demo/domain/Country';
import { getCountries } from 'Frontend/demo/domain/DataService';
+import type Country from 'Frontend/generated/com/vaadin/demo/domain/Country';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/multi-select-combo-box/react/multi-select-combo-box-read-only.tsx b/frontend/demo/component/multi-select-combo-box/react/multi-select-combo-box-read-only.tsx
index 1bcf8f104e..aec469ee53 100644
--- a/frontend/demo/component/multi-select-combo-box/react/multi-select-combo-box-read-only.tsx
+++ b/frontend/demo/component/multi-select-combo-box/react/multi-select-combo-box-read-only.tsx
@@ -1,10 +1,10 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useComputed, useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useComputed, useSignal } from '@vaadin/hilla-react-signals';
+import { MultiSelectComboBox } from '@vaadin/react-components/MultiSelectComboBox.js';
import { getCountries } from 'Frontend/demo/domain/DataService';
import type Country from 'Frontend/generated/com/vaadin/demo/domain/Country';
-import { MultiSelectComboBox } from '@vaadin/react-components/MultiSelectComboBox.js';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/multi-select-combo-box/react/multi-select-combo-box-selected-items-on-top.tsx b/frontend/demo/component/multi-select-combo-box/react/multi-select-combo-box-selected-items-on-top.tsx
index 291993b6b2..93c3ceb652 100644
--- a/frontend/demo/component/multi-select-combo-box/react/multi-select-combo-box-selected-items-on-top.tsx
+++ b/frontend/demo/component/multi-select-combo-box/react/multi-select-combo-box-selected-items-on-top.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useComputed, useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useComputed, useSignal } from '@vaadin/hilla-react-signals';
import { MultiSelectComboBox } from '@vaadin/react-components/MultiSelectComboBox.js';
import { getCountries } from 'Frontend/demo/domain/DataService';
import type Country from 'Frontend/generated/com/vaadin/demo/domain/Country';
diff --git a/frontend/demo/component/multi-select-combo-box/react/multi-select-combo-box-selection-change.tsx b/frontend/demo/component/multi-select-combo-box/react/multi-select-combo-box-selection-change.tsx
index 472bbd3939..e73fe0d2b7 100644
--- a/frontend/demo/component/multi-select-combo-box/react/multi-select-combo-box-selection-change.tsx
+++ b/frontend/demo/component/multi-select-combo-box/react/multi-select-combo-box-selection-change.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
import { MultiSelectComboBox } from '@vaadin/react-components/MultiSelectComboBox.js';
import { TextArea } from '@vaadin/react-components/TextArea.js';
diff --git a/frontend/demo/component/multi-select-combo-box/react/multi-select-combo-box-selection.tsx b/frontend/demo/component/multi-select-combo-box/react/multi-select-combo-box-selection.tsx
index c4c4785cee..00298ff7bf 100644
--- a/frontend/demo/component/multi-select-combo-box/react/multi-select-combo-box-selection.tsx
+++ b/frontend/demo/component/multi-select-combo-box/react/multi-select-combo-box-selection.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useComputed, useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useComputed, useSignal } from '@vaadin/hilla-react-signals';
import { MultiSelectComboBox } from '@vaadin/react-components/MultiSelectComboBox.js';
import { getCountries } from 'Frontend/demo/domain/DataService';
import type Country from 'Frontend/generated/com/vaadin/demo/domain/Country';
diff --git a/frontend/demo/component/notification/react/notification-error.tsx b/frontend/demo/component/notification/react/notification-error.tsx
index d6654ae021..24725b5f29 100644
--- a/frontend/demo/component/notification/react/notification-error.tsx
+++ b/frontend/demo/component/notification/react/notification-error.tsx
@@ -1,12 +1,12 @@
+import '@vaadin/vaadin-lumo-styles/vaadin-iconset';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Button } from '@vaadin/react-components/Button.js';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
-import { Notification } from '@vaadin/react-components/Notification.js';
import { Icon } from '@vaadin/react-components/Icon.js';
-import '@vaadin/vaadin-lumo-styles/vaadin-iconset';
+import { Notification } from '@vaadin/react-components/Notification.js';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/notification/react/notification-keyboard-a11y.tsx b/frontend/demo/component/notification/react/notification-keyboard-a11y.tsx
index c093cefbc4..3e22991b10 100644
--- a/frontend/demo/component/notification/react/notification-keyboard-a11y.tsx
+++ b/frontend/demo/component/notification/react/notification-keyboard-a11y.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Button } from '@vaadin/react-components/Button.js';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
import { Notification } from '@vaadin/react-components/Notification.js';
diff --git a/frontend/demo/component/notification/react/notification-link.tsx b/frontend/demo/component/notification/react/notification-link.tsx
index b61d6f2ebf..3288b9364d 100644
--- a/frontend/demo/component/notification/react/notification-link.tsx
+++ b/frontend/demo/component/notification/react/notification-link.tsx
@@ -1,12 +1,12 @@
+import '@vaadin/vaadin-lumo-styles/vaadin-iconset';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Button } from '@vaadin/react-components/Button.js';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
import { Icon } from '@vaadin/react-components/Icon.js';
import { Notification } from '@vaadin/react-components/Notification.js';
-import '@vaadin/vaadin-lumo-styles/vaadin-iconset';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/notification/react/notification-popup.tsx b/frontend/demo/component/notification/react/notification-popup.tsx
index af21df1882..5b6788ea19 100644
--- a/frontend/demo/component/notification/react/notification-popup.tsx
+++ b/frontend/demo/component/notification/react/notification-popup.tsx
@@ -1,9 +1,9 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { Button } from '@vaadin/react-components/Button.js';
-import { Icon } from '@vaadin/react-components/Icon.js';
import { ContextMenu } from '@vaadin/react-components/ContextMenu.js';
-import '@vaadin/icons';
+import { Icon } from '@vaadin/react-components/Icon.js';
function Example() {
return (
diff --git a/frontend/demo/component/notification/react/notification-position.tsx b/frontend/demo/component/notification/react/notification-position.tsx
index 5f34c2d925..8fb4b773f3 100644
--- a/frontend/demo/component/notification/react/notification-position.tsx
+++ b/frontend/demo/component/notification/react/notification-position.tsx
@@ -1,8 +1,8 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import exampleStyles from './notification-position-example-styles'; // hidden-source-line
import React from 'react';
import { Button } from '@vaadin/react-components/Button.js';
import { Notification, type NotificationPosition } from '@vaadin/react-components/Notification.js';
+import exampleStyles from './notification-position-example-styles'; // hidden-source-line
function Example() {
const show = (position: NotificationPosition) => {
diff --git a/frontend/demo/component/notification/react/notification-primary.tsx b/frontend/demo/component/notification/react/notification-primary.tsx
index 4071d281ed..c122b72dee 100644
--- a/frontend/demo/component/notification/react/notification-primary.tsx
+++ b/frontend/demo/component/notification/react/notification-primary.tsx
@@ -1,6 +1,6 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import { Notification } from '@vaadin/react-components/Notification.js';
import React from 'react';
+import { Notification } from '@vaadin/react-components/Notification.js';
function Example() {
// tag::snippet[]
diff --git a/frontend/demo/component/notification/react/notification-retry.tsx b/frontend/demo/component/notification/react/notification-retry.tsx
index 31d74f98f5..85857ad74f 100644
--- a/frontend/demo/component/notification/react/notification-retry.tsx
+++ b/frontend/demo/component/notification/react/notification-retry.tsx
@@ -1,12 +1,12 @@
+import '@vaadin/vaadin-lumo-styles/vaadin-iconset';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Button } from '@vaadin/react-components/Button.js';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
import { Icon } from '@vaadin/react-components/Icon.js';
import { Notification } from '@vaadin/react-components/Notification.js';
-import '@vaadin/vaadin-lumo-styles/vaadin-iconset';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/notification/react/notification-rich.tsx b/frontend/demo/component/notification/react/notification-rich.tsx
index ddf1cd9110..84ac7e4067 100644
--- a/frontend/demo/component/notification/react/notification-rich.tsx
+++ b/frontend/demo/component/notification/react/notification-rich.tsx
@@ -1,13 +1,13 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
-import { Notification } from '@vaadin/react-components/Notification.js';
+import { useSignal } from '@vaadin/hilla-react-signals';
+import { Avatar } from '@vaadin/react-components/Avatar.js';
+import { Button } from '@vaadin/react-components/Button.js';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
import { Icon } from '@vaadin/react-components/Icon.js';
-import { Button } from '@vaadin/react-components/Button.js';
-import { Avatar } from '@vaadin/react-components/Avatar.js';
-import '@vaadin/icons';
+import { Notification } from '@vaadin/react-components/Notification.js';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/notification/react/notification-undo.tsx b/frontend/demo/component/notification/react/notification-undo.tsx
index e3a892655c..d8d32cea48 100644
--- a/frontend/demo/component/notification/react/notification-undo.tsx
+++ b/frontend/demo/component/notification/react/notification-undo.tsx
@@ -1,12 +1,12 @@
+import '@vaadin/vaadin-lumo-styles/vaadin-iconset';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Button } from '@vaadin/react-components/Button.js';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
import { Icon } from '@vaadin/react-components/Icon.js';
import { Notification } from '@vaadin/react-components/Notification.js';
-import '@vaadin/vaadin-lumo-styles/vaadin-iconset';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/notification/react/notification-warning.tsx b/frontend/demo/component/notification/react/notification-warning.tsx
index d67a6b05ea..3d08c394e1 100644
--- a/frontend/demo/component/notification/react/notification-warning.tsx
+++ b/frontend/demo/component/notification/react/notification-warning.tsx
@@ -1,12 +1,12 @@
+import '@vaadin/vaadin-lumo-styles/vaadin-iconset';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Button } from '@vaadin/react-components/Button.js';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
-import { Notification } from '@vaadin/react-components/Notification.js';
import { Icon } from '@vaadin/react-components/Icon.js';
-import '@vaadin/vaadin-lumo-styles/vaadin-iconset';
+import { Notification } from '@vaadin/react-components/Notification.js';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/numberfield/react/number-field-basic-features.tsx b/frontend/demo/component/numberfield/react/number-field-basic-features.tsx
index 4b4b9b32ad..fb26684b7d 100644
--- a/frontend/demo/component/numberfield/react/number-field-basic-features.tsx
+++ b/frontend/demo/component/numberfield/react/number-field-basic-features.tsx
@@ -1,9 +1,9 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
+import { Icon } from '@vaadin/react-components/Icon.js';
import { NumberField } from '@vaadin/react-components/NumberField.js';
import { Tooltip } from '@vaadin/react-components/Tooltip.js';
-import { Icon } from '@vaadin/react-components/Icon.js';
-import '@vaadin/icons';
function Example() {
return (
diff --git a/frontend/demo/component/numberfield/react/number-field-step-buttons.tsx b/frontend/demo/component/numberfield/react/number-field-step-buttons.tsx
index 56c46c209c..c329e673af 100644
--- a/frontend/demo/component/numberfield/react/number-field-step-buttons.tsx
+++ b/frontend/demo/component/numberfield/react/number-field-step-buttons.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { FormLayout, type FormLayoutResponsiveStep } from '@vaadin/react-components/FormLayout.js';
import { FormItem } from '@vaadin/react-components/FormItem.js';
+import { FormLayout, type FormLayoutResponsiveStep } from '@vaadin/react-components/FormLayout.js';
import { IntegerField } from '@vaadin/react-components/IntegerField';
const layoutSteps: FormLayoutResponsiveStep[] = [
diff --git a/frontend/demo/component/passwordfield/react/password-field-advanced-helper.tsx b/frontend/demo/component/passwordfield/react/password-field-advanced-helper.tsx
index 21c7347db4..21fb6841cd 100644
--- a/frontend/demo/component/passwordfield/react/password-field-advanced-helper.tsx
+++ b/frontend/demo/component/passwordfield/react/password-field-advanced-helper.tsx
@@ -1,13 +1,13 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
+import { Icon } from '@vaadin/react-components/Icon.js';
import {
PasswordField,
type PasswordFieldValueChangedEvent,
} from '@vaadin/react-components/PasswordField.js';
-import { Icon } from '@vaadin/react-components/Icon.js';
-import '@vaadin/icons';
type PasswordStrength = 'moderate' | 'strong' | 'weak';
diff --git a/frontend/demo/component/passwordfield/react/password-field-basic-features.tsx b/frontend/demo/component/passwordfield/react/password-field-basic-features.tsx
index 694ec1045b..80411e47f2 100644
--- a/frontend/demo/component/passwordfield/react/password-field-basic-features.tsx
+++ b/frontend/demo/component/passwordfield/react/password-field-basic-features.tsx
@@ -1,9 +1,9 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { PasswordField } from '@vaadin/react-components/PasswordField.js';
import { Icon } from '@vaadin/react-components/Icon.js';
+import { PasswordField } from '@vaadin/react-components/PasswordField.js';
import { Tooltip } from '@vaadin/react-components/Tooltip.js';
-import '@vaadin/icons';
function Example() {
return (
diff --git a/frontend/demo/component/popover/react/popover-anchored-dialog.tsx b/frontend/demo/component/popover/react/popover-anchored-dialog.tsx
index 4f232946f0..3a02405dd3 100644
--- a/frontend/demo/component/popover/react/popover-anchored-dialog.tsx
+++ b/frontend/demo/component/popover/react/popover-anchored-dialog.tsx
@@ -1,9 +1,8 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useComputed, useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
-import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
-import { getPeople } from 'Frontend/demo/domain/DataService';
+import { useComputed, useSignal } from '@vaadin/hilla-react-signals';
import {
Button,
Checkbox,
@@ -14,7 +13,8 @@ import {
Icon,
Popover,
} from '@vaadin/react-components';
-import '@vaadin/icons';
+import { getPeople } from 'Frontend/demo/domain/DataService';
+import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
type ColumnConfig = { label: string; key: string; visible: boolean };
diff --git a/frontend/demo/component/popover/react/popover-arrow.tsx b/frontend/demo/component/popover/react/popover-arrow.tsx
index 1ac46e01cd..68117ad7a4 100644
--- a/frontend/demo/component/popover/react/popover-arrow.tsx
+++ b/frontend/demo/component/popover/react/popover-arrow.tsx
@@ -1,7 +1,7 @@
+import '@vaadin/vaadin-lumo-styles/vaadin-iconset.js';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { Button, Icon, Popover } from '@vaadin/react-components';
-import '@vaadin/vaadin-lumo-styles/vaadin-iconset.js';
function Example() {
// tag::snippet[]
diff --git a/frontend/demo/component/popover/react/popover-dropdown-field.tsx b/frontend/demo/component/popover/react/popover-dropdown-field.tsx
index 8e99cc0324..452b13a43d 100644
--- a/frontend/demo/component/popover/react/popover-dropdown-field.tsx
+++ b/frontend/demo/component/popover/react/popover-dropdown-field.tsx
@@ -1,7 +1,9 @@
+import '@vaadin/vaadin-lumo-styles/vaadin-iconset.js';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { formatISO, subMonths, subWeeks, subYears } from 'date-fns';
+import { useSignal } from '@vaadin/hilla-react-signals';
import {
DatePicker,
HorizontalLayout,
@@ -11,8 +13,6 @@ import {
type SelectChangeEvent,
TextField,
} from '@vaadin/react-components';
-import { formatISO, subMonths, subWeeks, subYears } from 'date-fns';
-import '@vaadin/vaadin-lumo-styles/vaadin-iconset.js';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/popover/react/popover-notification-panel.tsx b/frontend/demo/component/popover/react/popover-notification-panel.tsx
index 3e8aa78b79..6b29eb2c0b 100644
--- a/frontend/demo/component/popover/react/popover-notification-panel.tsx
+++ b/frontend/demo/component/popover/react/popover-notification-panel.tsx
@@ -1,19 +1,19 @@
+import '@vaadin/vaadin-lumo-styles/vaadin-iconset.js';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { format, subMinutes } from 'date-fns';
+import { useSignal } from '@vaadin/hilla-react-signals';
import {
Button,
HorizontalLayout,
Icon,
MessageList,
+ type MessageListItem,
Popover,
TabSheet,
TabSheetTab,
- type MessageListItem,
} from '@vaadin/react-components';
-import { format, subMinutes } from 'date-fns';
-import '@vaadin/vaadin-lumo-styles/vaadin-iconset.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
function Example() {
diff --git a/frontend/demo/component/popover/react/popover-positioning.tsx b/frontend/demo/component/popover/react/popover-positioning.tsx
index 465bd999b5..b79a3f848e 100644
--- a/frontend/demo/component/popover/react/popover-positioning.tsx
+++ b/frontend/demo/component/popover/react/popover-positioning.tsx
@@ -1,13 +1,13 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import {
Button,
Popover,
+ type PopoverPosition,
Select,
VerticalLayout,
- type PopoverPosition,
} from '@vaadin/react-components';
function Example() {
diff --git a/frontend/demo/component/popover/react/popover-user-menu.tsx b/frontend/demo/component/popover/react/popover-user-menu.tsx
index 95b885b4ff..a67c6910a4 100644
--- a/frontend/demo/component/popover/react/popover-user-menu.tsx
+++ b/frontend/demo/component/popover/react/popover-user-menu.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import {
Avatar,
Button,
diff --git a/frontend/demo/component/progressbar/react/progress-bar-label.tsx b/frontend/demo/component/progressbar/react/progress-bar-label.tsx
index 3a31d3554c..fc5cde5cc8 100644
--- a/frontend/demo/component/progressbar/react/progress-bar-label.tsx
+++ b/frontend/demo/component/progressbar/react/progress-bar-label.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { ProgressBar } from '@vaadin/react-components/ProgressBar.js';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
+import { ProgressBar } from '@vaadin/react-components/ProgressBar.js';
function Example() {
return (
diff --git a/frontend/demo/component/progressbar/react/progress-bar-theme-variants.tsx b/frontend/demo/component/progressbar/react/progress-bar-theme-variants.tsx
index 75bd22eb0b..d9127a2492 100644
--- a/frontend/demo/component/progressbar/react/progress-bar-theme-variants.tsx
+++ b/frontend/demo/component/progressbar/react/progress-bar-theme-variants.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
import { ProgressBar } from '@vaadin/react-components/ProgressBar.js';
+import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
function Example() {
return (
diff --git a/frontend/demo/component/radiobutton/react/radio-button-checkbox-alternative.tsx b/frontend/demo/component/radiobutton/react/radio-button-checkbox-alternative.tsx
index f0159448af..1049d78aee 100644
--- a/frontend/demo/component/radiobutton/react/radio-button-checkbox-alternative.tsx
+++ b/frontend/demo/component/radiobutton/react/radio-button-checkbox-alternative.tsx
@@ -1,9 +1,9 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { Checkbox } from '@vaadin/react-components/Checkbox.js';
+import { RadioButton } from '@vaadin/react-components/RadioButton.js';
import { RadioGroup } from '@vaadin/react-components/RadioGroup.js';
import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
-import { RadioButton } from '@vaadin/react-components/RadioButton.js';
function Example() {
return (
diff --git a/frontend/demo/component/radiobutton/react/radio-button-custom-option.tsx b/frontend/demo/component/radiobutton/react/radio-button-custom-option.tsx
index 6dd683ac46..83ea74953b 100644
--- a/frontend/demo/component/radiobutton/react/radio-button-custom-option.tsx
+++ b/frontend/demo/component/radiobutton/react/radio-button-custom-option.tsx
@@ -1,15 +1,14 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
-import { TextField } from '@vaadin/react-components/TextField.js';
-import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
+import { useSignal } from '@vaadin/hilla-react-signals';
+import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
import { RadioButton } from '@vaadin/react-components/RadioButton.js';
import { RadioGroup } from '@vaadin/react-components/RadioGroup.js';
-
-import type Card from 'Frontend/generated/com/vaadin/demo/domain/Card';
+import { TextField } from '@vaadin/react-components/TextField.js';
+import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
import { getCards } from 'Frontend/demo/domain/DataService';
-import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
+import type Card from 'Frontend/generated/com/vaadin/demo/domain/Card';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/radiobutton/react/radio-button-default-value.tsx b/frontend/demo/component/radiobutton/react/radio-button-default-value.tsx
index 0bf2854386..fb9574a3a6 100644
--- a/frontend/demo/component/radiobutton/react/radio-button-default-value.tsx
+++ b/frontend/demo/component/radiobutton/react/radio-button-default-value.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { RadioGroup } from '@vaadin/react-components/RadioGroup.js';
import { RadioButton } from '@vaadin/react-components/RadioButton.js';
+import { RadioGroup } from '@vaadin/react-components/RadioGroup.js';
function Example() {
return (
diff --git a/frontend/demo/component/radiobutton/react/radio-button-disabled.tsx b/frontend/demo/component/radiobutton/react/radio-button-disabled.tsx
index e02321e7a4..c29d557acc 100644
--- a/frontend/demo/component/radiobutton/react/radio-button-disabled.tsx
+++ b/frontend/demo/component/radiobutton/react/radio-button-disabled.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { RadioGroup } from '@vaadin/react-components/RadioGroup.js';
import { RadioButton } from '@vaadin/react-components/RadioButton.js';
+import { RadioGroup } from '@vaadin/react-components/RadioGroup.js';
function Example() {
return (
diff --git a/frontend/demo/component/radiobutton/react/radio-button-group-basic-features.tsx b/frontend/demo/component/radiobutton/react/radio-button-group-basic-features.tsx
index 878d4bd9f6..9865eaefb6 100644
--- a/frontend/demo/component/radiobutton/react/radio-button-group-basic-features.tsx
+++ b/frontend/demo/component/radiobutton/react/radio-button-group-basic-features.tsx
@@ -1,8 +1,8 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
+import { RadioButton } from '@vaadin/react-components/RadioButton.js';
import { RadioGroup } from '@vaadin/react-components/RadioGroup.js';
import { Tooltip } from '@vaadin/react-components/Tooltip.js';
-import { RadioButton } from '@vaadin/react-components/RadioButton.js';
function Example() {
return (
diff --git a/frontend/demo/component/radiobutton/react/radio-button-group-labels.tsx b/frontend/demo/component/radiobutton/react/radio-button-group-labels.tsx
index 64e964ee6d..378b55ab65 100644
--- a/frontend/demo/component/radiobutton/react/radio-button-group-labels.tsx
+++ b/frontend/demo/component/radiobutton/react/radio-button-group-labels.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { RadioGroup } from '@vaadin/react-components/RadioGroup.js';
import { RadioButton } from '@vaadin/react-components/RadioButton.js';
+import { RadioGroup } from '@vaadin/react-components/RadioGroup.js';
import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
function Example() {
diff --git a/frontend/demo/component/radiobutton/react/radio-button-group-styles.tsx b/frontend/demo/component/radiobutton/react/radio-button-group-styles.tsx
index ca5332e4f2..8c722e9691 100644
--- a/frontend/demo/component/radiobutton/react/radio-button-group-styles.tsx
+++ b/frontend/demo/component/radiobutton/react/radio-button-group-styles.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { RadioGroup } from '@vaadin/react-components/RadioGroup.js';
import { RadioButton } from '@vaadin/react-components/RadioButton.js';
+import { RadioGroup } from '@vaadin/react-components/RadioGroup.js';
function Example() {
return (
diff --git a/frontend/demo/component/radiobutton/react/radio-button-horizontal.tsx b/frontend/demo/component/radiobutton/react/radio-button-horizontal.tsx
index f508307252..24f4d3148d 100644
--- a/frontend/demo/component/radiobutton/react/radio-button-horizontal.tsx
+++ b/frontend/demo/component/radiobutton/react/radio-button-horizontal.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { RadioGroup } from '@vaadin/react-components/RadioGroup.js';
import { RadioButton } from '@vaadin/react-components/RadioButton.js';
+import { RadioGroup } from '@vaadin/react-components/RadioGroup.js';
function Example() {
return (
diff --git a/frontend/demo/component/radiobutton/react/radio-button-presentation.tsx b/frontend/demo/component/radiobutton/react/radio-button-presentation.tsx
index 73d40ca7e0..c25ccef1f5 100644
--- a/frontend/demo/component/radiobutton/react/radio-button-presentation.tsx
+++ b/frontend/demo/component/radiobutton/react/radio-button-presentation.tsx
@@ -1,10 +1,10 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
-import { RadioGroup } from '@vaadin/react-components/RadioGroup.js';
-import { RadioButton } from '@vaadin/react-components/RadioButton.js';
+import { useSignal } from '@vaadin/hilla-react-signals';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
+import { RadioButton } from '@vaadin/react-components/RadioButton.js';
+import { RadioGroup } from '@vaadin/react-components/RadioGroup.js';
import { getCards } from 'Frontend/demo/domain/DataService';
import type Card from 'Frontend/generated/com/vaadin/demo/domain/Card';
diff --git a/frontend/demo/component/radiobutton/react/radio-button-readonly.tsx b/frontend/demo/component/radiobutton/react/radio-button-readonly.tsx
index 59904f720e..a59928ab4a 100644
--- a/frontend/demo/component/radiobutton/react/radio-button-readonly.tsx
+++ b/frontend/demo/component/radiobutton/react/radio-button-readonly.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { RadioGroup } from '@vaadin/react-components/RadioGroup.js';
import { RadioButton } from '@vaadin/react-components/RadioButton.js';
+import { RadioGroup } from '@vaadin/react-components/RadioGroup.js';
function Example() {
return (
diff --git a/frontend/demo/component/radiobutton/react/radio-button-vertical.tsx b/frontend/demo/component/radiobutton/react/radio-button-vertical.tsx
index 873006fe87..e372a2b922 100644
--- a/frontend/demo/component/radiobutton/react/radio-button-vertical.tsx
+++ b/frontend/demo/component/radiobutton/react/radio-button-vertical.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { RadioGroup } from '@vaadin/react-components/RadioGroup.js';
import { RadioButton } from '@vaadin/react-components/RadioButton.js';
+import { RadioGroup } from '@vaadin/react-components/RadioGroup.js';
function Example() {
return (
diff --git a/frontend/demo/component/richtexteditor/react/rich-text-editor-basic.tsx b/frontend/demo/component/richtexteditor/react/rich-text-editor-basic.tsx
index d4bd8795eb..727938012e 100644
--- a/frontend/demo/component/richtexteditor/react/rich-text-editor-basic.tsx
+++ b/frontend/demo/component/richtexteditor/react/rich-text-editor-basic.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { RichTextEditor } from '@vaadin/react-components-pro/RichTextEditor.js';
import templates from '../../../../../src/main/resources/data/templates.json';
diff --git a/frontend/demo/component/richtexteditor/react/rich-text-editor-min-max-height.tsx b/frontend/demo/component/richtexteditor/react/rich-text-editor-min-max-height.tsx
index 887812e8a9..53e6db4cc2 100644
--- a/frontend/demo/component/richtexteditor/react/rich-text-editor-min-max-height.tsx
+++ b/frontend/demo/component/richtexteditor/react/rich-text-editor-min-max-height.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { RichTextEditor } from '@vaadin/react-components-pro/RichTextEditor.js';
import templates from '../../../../../src/main/resources/data/templates.json';
diff --git a/frontend/demo/component/richtexteditor/react/rich-text-editor-set-get-value.tsx b/frontend/demo/component/richtexteditor/react/rich-text-editor-set-get-value.tsx
index 2ee7975cc5..91b8b7a56a 100644
--- a/frontend/demo/component/richtexteditor/react/rich-text-editor-set-get-value.tsx
+++ b/frontend/demo/component/richtexteditor/react/rich-text-editor-set-get-value.tsx
@@ -1,13 +1,13 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useRef } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
-import { RichTextEditor } from '@vaadin/react-components-pro/RichTextEditor.js';
+import { useSignal } from '@vaadin/hilla-react-signals';
import { TextArea, type TextAreaChangeEvent } from '@vaadin/react-components/TextArea.js';
import type {
RichTextEditorElement,
RichTextEditorValueChangedEvent,
} from '@vaadin/react-components-pro/RichTextEditor.js';
+import { RichTextEditor } from '@vaadin/react-components-pro/RichTextEditor.js';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/richtexteditor/react/rich-text-editor-theme-compact.tsx b/frontend/demo/component/richtexteditor/react/rich-text-editor-theme-compact.tsx
index d32e1627e2..d6382efe6f 100644
--- a/frontend/demo/component/richtexteditor/react/rich-text-editor-theme-compact.tsx
+++ b/frontend/demo/component/richtexteditor/react/rich-text-editor-theme-compact.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { RichTextEditor } from '@vaadin/react-components-pro/RichTextEditor.js';
import templates from '../../../../../src/main/resources/data/templates.json';
diff --git a/frontend/demo/component/richtexteditor/react/rich-text-editor-theme-no-border.tsx b/frontend/demo/component/richtexteditor/react/rich-text-editor-theme-no-border.tsx
index 29eacb5169..542609633c 100644
--- a/frontend/demo/component/richtexteditor/react/rich-text-editor-theme-no-border.tsx
+++ b/frontend/demo/component/richtexteditor/react/rich-text-editor-theme-no-border.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { RichTextEditor } from '@vaadin/react-components-pro/RichTextEditor.js';
import templates from '../../../../../src/main/resources/data/templates.json';
diff --git a/frontend/demo/component/scroller/react/scroller-basic.tsx b/frontend/demo/component/scroller/react/scroller-basic.tsx
index 3b17b44bd7..413ffad33b 100644
--- a/frontend/demo/component/scroller/react/scroller-basic.tsx
+++ b/frontend/demo/component/scroller/react/scroller-basic.tsx
@@ -1,14 +1,14 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import exampleStyles from './scroller-basic-styles'; // hidden-source-line
import React from 'react';
-import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
+import { Button } from '@vaadin/react-components/Button.js';
+import { DatePicker } from '@vaadin/react-components/DatePicker.js';
import { Icon } from '@vaadin/react-components/Icon.js';
import { Scroller } from '@vaadin/react-components/Scroller.js';
-import { TextField } from '@vaadin/react-components/TextField.js';
-import { DatePicker } from '@vaadin/react-components/DatePicker.js';
import { TextArea } from '@vaadin/react-components/TextArea.js';
-import { Button } from '@vaadin/react-components/Button.js';
-import '@vaadin/icons';
+import { TextField } from '@vaadin/react-components/TextField.js';
+import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
+import exampleStyles from './scroller-basic-styles'; // hidden-source-line
function Example() {
return (
diff --git a/frontend/demo/component/scroller/react/scroller-mobile.tsx b/frontend/demo/component/scroller/react/scroller-mobile.tsx
index eefe005f1b..7001b884b6 100644
--- a/frontend/demo/component/scroller/react/scroller-mobile.tsx
+++ b/frontend/demo/component/scroller/react/scroller-mobile.tsx
@@ -1,10 +1,10 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import '@vaadin/icons';
-import { Scroller } from '@vaadin/react-components/Scroller.js';
+import { Button } from '@vaadin/react-components/Button.js';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
import { Icon } from '@vaadin/react-components/Icon.js';
-import { Button } from '@vaadin/react-components/Button.js';
+import { Scroller } from '@vaadin/react-components/Scroller.js';
const sectionStyle = {
border: '1px solid var(--lumo-contrast-20pct)',
diff --git a/frontend/demo/component/select/react/select-basic-features.tsx b/frontend/demo/component/select/react/select-basic-features.tsx
index 37a9445bc4..de702b514c 100644
--- a/frontend/demo/component/select/react/select-basic-features.tsx
+++ b/frontend/demo/component/select/react/select-basic-features.tsx
@@ -1,9 +1,9 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
+import { Icon } from '@vaadin/react-components/Icon.js';
import { Select } from '@vaadin/react-components/Select.js';
import { Tooltip } from '@vaadin/react-components/Tooltip.js';
-import { Icon } from '@vaadin/react-components/Icon.js';
-import '@vaadin/icons';
function Example() {
const items = [
diff --git a/frontend/demo/component/select/react/select-complex-value-label.tsx b/frontend/demo/component/select/react/select-complex-value-label.tsx
index 14f8568ea2..74d99d8b47 100644
--- a/frontend/demo/component/select/react/select-complex-value-label.tsx
+++ b/frontend/demo/component/select/react/select-complex-value-label.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Select, type SelectItem } from '@vaadin/react-components/Select.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
diff --git a/frontend/demo/component/select/react/select-custom-renderer-label.tsx b/frontend/demo/component/select/react/select-custom-renderer-label.tsx
index b6ee80f7ff..11d5527ef2 100644
--- a/frontend/demo/component/select/react/select-custom-renderer-label.tsx
+++ b/frontend/demo/component/select/react/select-custom-renderer-label.tsx
@@ -1,12 +1,12 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
-import { Select } from '@vaadin/react-components/Select.js';
-import { ListBox } from '@vaadin/react-components/ListBox.js';
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Item } from '@vaadin/react-components/Item.js';
-import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
+import { ListBox } from '@vaadin/react-components/ListBox.js';
+import { Select } from '@vaadin/react-components/Select.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
+import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
const formatPersonFullName = (person: Person) => `${person.firstName} ${person.lastName}`;
diff --git a/frontend/demo/component/select/react/select-overlay-width.tsx b/frontend/demo/component/select/react/select-overlay-width.tsx
index 6a28360949..2d04895fbc 100644
--- a/frontend/demo/component/select/react/select-overlay-width.tsx
+++ b/frontend/demo/component/select/react/select-overlay-width.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Select, type SelectItem } from '@vaadin/react-components/Select.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
diff --git a/frontend/demo/component/select/react/select-presentation.tsx b/frontend/demo/component/select/react/select-presentation.tsx
index 163ff8f0b8..9757ab824f 100644
--- a/frontend/demo/component/select/react/select-presentation.tsx
+++ b/frontend/demo/component/select/react/select-presentation.tsx
@@ -1,10 +1,10 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
+import { Item } from '@vaadin/react-components/Item.js';
import { ListBox } from '@vaadin/react-components/ListBox.js';
import { Select } from '@vaadin/react-components/Select.js';
-import { Item } from '@vaadin/react-components/Item.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
diff --git a/frontend/demo/component/select/react/select-readonly-and-disabled.tsx b/frontend/demo/component/select/react/select-readonly-and-disabled.tsx
index 5b817e6a3b..e05592fccf 100644
--- a/frontend/demo/component/select/react/select-readonly-and-disabled.tsx
+++ b/frontend/demo/component/select/react/select-readonly-and-disabled.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { Select } from '@vaadin/react-components/Select.js';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
+import { Select } from '@vaadin/react-components/Select.js';
function Example() {
const items = [
diff --git a/frontend/demo/component/side-nav/react/side-nav-basic.tsx b/frontend/demo/component/side-nav/react/side-nav-basic.tsx
index 299433a1be..9cd2563c7b 100644
--- a/frontend/demo/component/side-nav/react/side-nav-basic.tsx
+++ b/frontend/demo/component/side-nav/react/side-nav-basic.tsx
@@ -1,11 +1,11 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import exampleStyles from './side-nav-example-styles'; // hidden-source-line
import React, { useEffect, useRef } from 'react';
-import { patchSideNavNavigation } from './side-nav-helper'; // hidden-source-line
+import { Icon } from '@vaadin/react-components/Icon.js';
import { SideNav, type SideNavElement } from '@vaadin/react-components/SideNav.js';
import { SideNavItem } from '@vaadin/react-components/SideNavItem.js';
-import { Icon } from '@vaadin/react-components/Icon.js';
-import '@vaadin/icons/';
+import exampleStyles from './side-nav-example-styles'; // hidden-source-line
+import { patchSideNavNavigation } from './side-nav-helper'; // hidden-source-line
function Example() {
const sideNavRef = useRef(null);
diff --git a/frontend/demo/component/side-nav/react/side-nav-hierarchy.tsx b/frontend/demo/component/side-nav/react/side-nav-hierarchy.tsx
index 5ae416b391..ac8fdbd40b 100644
--- a/frontend/demo/component/side-nav/react/side-nav-hierarchy.tsx
+++ b/frontend/demo/component/side-nav/react/side-nav-hierarchy.tsx
@@ -1,11 +1,11 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import exampleStyles from './side-nav-example-styles'; // hidden-source-line
import React, { useEffect, useRef } from 'react';
-import { patchSideNavNavigation } from './side-nav-helper'; // hidden-source-line
+import { Icon } from '@vaadin/react-components/Icon.js';
import { SideNav, type SideNavElement } from '@vaadin/react-components/SideNav.js';
import { SideNavItem } from '@vaadin/react-components/SideNavItem.js';
-import { Icon } from '@vaadin/react-components/Icon.js';
-import '@vaadin/icons';
+import exampleStyles from './side-nav-example-styles'; // hidden-source-line
+import { patchSideNavNavigation } from './side-nav-helper'; // hidden-source-line
function Example() {
const sideNavRef = useRef(null);
diff --git a/frontend/demo/component/side-nav/react/side-nav-labelled.tsx b/frontend/demo/component/side-nav/react/side-nav-labelled.tsx
index 91d3cb1c10..4a73a90f41 100644
--- a/frontend/demo/component/side-nav/react/side-nav-labelled.tsx
+++ b/frontend/demo/component/side-nav/react/side-nav-labelled.tsx
@@ -1,10 +1,10 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import { patchSideNavNavigation } from './side-nav-helper'; // hidden-source-line
import React, { useEffect, useRef } from 'react';
+import { Icon } from '@vaadin/react-components/Icon.js';
import { SideNav, type SideNavElement } from '@vaadin/react-components/SideNav.js';
import { SideNavItem } from '@vaadin/react-components/SideNavItem.js';
-import { Icon } from '@vaadin/react-components/Icon.js';
import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
+import { patchSideNavNavigation } from './side-nav-helper'; // hidden-source-line
const Example = () => {
const sideNavRef = useRef(null);
diff --git a/frontend/demo/component/side-nav/react/side-nav-router.tsx b/frontend/demo/component/side-nav/react/side-nav-router.tsx
index 00d554fcdb..df6f0f2c14 100644
--- a/frontend/demo/component/side-nav/react/side-nav-router.tsx
+++ b/frontend/demo/component/side-nav/react/side-nav-router.tsx
@@ -1,7 +1,7 @@
import React from 'react';
+import { useLocation, useNavigate } from 'react-router';
import { SideNav } from '@vaadin/react-components/SideNav.js';
import { SideNavItem } from '@vaadin/react-components/SideNavItem.js';
-import { useNavigate, useLocation } from 'react-router';
function Example() {
// tag::snippet[]
diff --git a/frontend/demo/component/side-nav/react/side-nav-styling.tsx b/frontend/demo/component/side-nav/react/side-nav-styling.tsx
index 54b6a07af0..b4bb04d9bc 100644
--- a/frontend/demo/component/side-nav/react/side-nav-styling.tsx
+++ b/frontend/demo/component/side-nav/react/side-nav-styling.tsx
@@ -1,10 +1,10 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import { patchSideNavNavigation } from './side-nav-helper'; // hidden-source-line
import React, { useEffect, useRef } from 'react';
+import { Icon } from '@vaadin/react-components/Icon.js';
import { SideNav, type SideNavElement } from '@vaadin/react-components/SideNav.js';
import { SideNavItem } from '@vaadin/react-components/SideNavItem.js';
-import { Icon } from '@vaadin/react-components/Icon.js';
-import '@vaadin/icons';
+import { patchSideNavNavigation } from './side-nav-helper'; // hidden-source-line
function Example() {
const sideNavRef = useRef(null);
diff --git a/frontend/demo/component/side-nav/react/side-nav-suffix.tsx b/frontend/demo/component/side-nav/react/side-nav-suffix.tsx
index 172cb844c3..2f47dccb7b 100644
--- a/frontend/demo/component/side-nav/react/side-nav-suffix.tsx
+++ b/frontend/demo/component/side-nav/react/side-nav-suffix.tsx
@@ -1,10 +1,10 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import { patchSideNavNavigation } from './side-nav-helper'; // hidden-source-line
import React, { useEffect, useRef } from 'react';
+import { Icon } from '@vaadin/react-components/Icon.js';
import { SideNav, type SideNavElement } from '@vaadin/react-components/SideNav.js';
import { SideNavItem } from '@vaadin/react-components/SideNavItem.js';
-import { Icon } from '@vaadin/react-components/Icon.js';
-import '@vaadin/icons';
+import { patchSideNavNavigation } from './side-nav-helper'; // hidden-source-line
function Example() {
const sideNavRef = useRef(null);
diff --git a/frontend/demo/component/splitlayout/react/split-layout-basic.tsx b/frontend/demo/component/splitlayout/react/split-layout-basic.tsx
index ceae9d21d2..4d0366a323 100644
--- a/frontend/demo/component/splitlayout/react/split-layout-basic.tsx
+++ b/frontend/demo/component/splitlayout/react/split-layout-basic.tsx
@@ -1,9 +1,9 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import exampleStyles from './split-layout-example-styles'; // hidden-source-line
import React from 'react';
import { SplitLayout } from '@vaadin/react-components/SplitLayout';
-import MasterContent from './master-content';
import DetailContent from './detail-content';
+import MasterContent from './master-content';
+import exampleStyles from './split-layout-example-styles'; // hidden-source-line
function Example() {
return (
diff --git a/frontend/demo/component/splitlayout/react/split-layout-initial-splitter-position.tsx b/frontend/demo/component/splitlayout/react/split-layout-initial-splitter-position.tsx
index 4483908078..5569c1f286 100644
--- a/frontend/demo/component/splitlayout/react/split-layout-initial-splitter-position.tsx
+++ b/frontend/demo/component/splitlayout/react/split-layout-initial-splitter-position.tsx
@@ -1,9 +1,9 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import exampleStyles from './split-layout-example-styles'; // hidden-source-line
import React from 'react';
import { SplitLayout } from '@vaadin/react-components/SplitLayout.js';
-import MasterContent from './master-content';
import DetailContent from './detail-content';
+import MasterContent from './master-content';
+import exampleStyles from './split-layout-example-styles'; // hidden-source-line
function Example() {
return (
diff --git a/frontend/demo/component/splitlayout/react/split-layout-min-max-size.tsx b/frontend/demo/component/splitlayout/react/split-layout-min-max-size.tsx
index 0ab28e221a..b7a2253bf7 100644
--- a/frontend/demo/component/splitlayout/react/split-layout-min-max-size.tsx
+++ b/frontend/demo/component/splitlayout/react/split-layout-min-max-size.tsx
@@ -1,9 +1,9 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import exampleStyles from './split-layout-example-styles'; // hidden-source-line
import React from 'react';
import { SplitLayout } from '@vaadin/react-components/SplitLayout.js';
-import MasterContent from './master-content';
import DetailContent from './detail-content';
+import MasterContent from './master-content';
+import exampleStyles from './split-layout-example-styles'; // hidden-source-line
function Example() {
return (
diff --git a/frontend/demo/component/splitlayout/react/split-layout-orientation.tsx b/frontend/demo/component/splitlayout/react/split-layout-orientation.tsx
index 88a2bce7b1..c705ffbdc0 100644
--- a/frontend/demo/component/splitlayout/react/split-layout-orientation.tsx
+++ b/frontend/demo/component/splitlayout/react/split-layout-orientation.tsx
@@ -1,9 +1,9 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import exampleStyles from './split-layout-example-styles'; // hidden-source-line
import React from 'react';
import { SplitLayout } from '@vaadin/react-components/SplitLayout.js';
-import MasterContent from './master-content';
import DetailContent from './detail-content';
+import MasterContent from './master-content';
+import exampleStyles from './split-layout-example-styles'; // hidden-source-line
function Example() {
return (
diff --git a/frontend/demo/component/splitlayout/react/split-layout-theme-minimal.tsx b/frontend/demo/component/splitlayout/react/split-layout-theme-minimal.tsx
index 3754acc010..061565ce27 100644
--- a/frontend/demo/component/splitlayout/react/split-layout-theme-minimal.tsx
+++ b/frontend/demo/component/splitlayout/react/split-layout-theme-minimal.tsx
@@ -1,9 +1,9 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import exampleStyles from './split-layout-example-styles'; // hidden-source-line
import React from 'react';
import { SplitLayout } from '@vaadin/react-components/SplitLayout.js';
-import MasterContent from './master-content';
import DetailContent from './detail-content';
+import MasterContent from './master-content';
+import exampleStyles from './split-layout-example-styles'; // hidden-source-line
function Example() {
return (
diff --git a/frontend/demo/component/splitlayout/react/split-layout-theme-small.tsx b/frontend/demo/component/splitlayout/react/split-layout-theme-small.tsx
index f984233cc0..182290b280 100644
--- a/frontend/demo/component/splitlayout/react/split-layout-theme-small.tsx
+++ b/frontend/demo/component/splitlayout/react/split-layout-theme-small.tsx
@@ -1,9 +1,9 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import exampleStyles from './split-layout-example-styles'; // hidden-source-line
import React from 'react';
import { SplitLayout } from '@vaadin/react-components/SplitLayout.js';
import DetailContent from './detail-content';
import MasterContent from './master-content';
+import exampleStyles from './split-layout-example-styles'; // hidden-source-line
function Example() {
return (
diff --git a/frontend/demo/component/splitlayout/react/split-layout-toggle.tsx b/frontend/demo/component/splitlayout/react/split-layout-toggle.tsx
index e3eacb85f4..1132bbb803 100644
--- a/frontend/demo/component/splitlayout/react/split-layout-toggle.tsx
+++ b/frontend/demo/component/splitlayout/react/split-layout-toggle.tsx
@@ -1,14 +1,14 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import exampleStyles from './split-layout-example-styles'; // hidden-source-line
-import { useSignal } from '@vaadin/hilla-react-signals';
-import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
import React from 'react';
+import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Button } from '@vaadin/react-components/Button.js';
import { Icon } from '@vaadin/react-components/Icon.js';
import { SplitLayout } from '@vaadin/react-components/SplitLayout.js';
-import MasterContent from './master-content';
import DetailContent from './detail-content';
-import '@vaadin/icons';
+import MasterContent from './master-content';
+import exampleStyles from './split-layout-example-styles'; // hidden-source-line
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/tabs/react/tabs-badges.tsx b/frontend/demo/component/tabs/react/tabs-badges.tsx
index 0b798b1c5e..b36c988f1b 100644
--- a/frontend/demo/component/tabs/react/tabs-badges.tsx
+++ b/frontend/demo/component/tabs/react/tabs-badges.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { Tabs } from '@vaadin/react-components/Tabs.js';
import { Tab } from '@vaadin/react-components/Tab.js';
+import { Tabs } from '@vaadin/react-components/Tabs.js';
const badgeStyle = {
marginInlineStart: 'var(--lumo-space-xs)',
diff --git a/frontend/demo/component/tabs/react/tabs-basic.tsx b/frontend/demo/component/tabs/react/tabs-basic.tsx
index d3d34cd906..22722a3cf4 100644
--- a/frontend/demo/component/tabs/react/tabs-basic.tsx
+++ b/frontend/demo/component/tabs/react/tabs-basic.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { Tabs } from '@vaadin/react-components/Tabs.js';
import { Tab } from '@vaadin/react-components/Tab.js';
+import { Tabs } from '@vaadin/react-components/Tabs.js';
function Example() {
return (
diff --git a/frontend/demo/component/tabs/react/tabs-content.tsx b/frontend/demo/component/tabs/react/tabs-content.tsx
index 72e4b69c7b..9d5a8373f9 100644
--- a/frontend/demo/component/tabs/react/tabs-content.tsx
+++ b/frontend/demo/component/tabs/react/tabs-content.tsx
@@ -1,10 +1,10 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
+import { Tab } from '@vaadin/react-components/Tab.js';
import { Tabs, type TabsSelectedChangedEvent } from '@vaadin/react-components/Tabs.js';
import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
-import { Tab } from '@vaadin/react-components/Tab.js';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/tabs/react/tabs-focus-ring.tsx b/frontend/demo/component/tabs/react/tabs-focus-ring.tsx
index ba51330498..b163e5a552 100644
--- a/frontend/demo/component/tabs/react/tabs-focus-ring.tsx
+++ b/frontend/demo/component/tabs/react/tabs-focus-ring.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { Tabs } from '@vaadin/react-components/Tabs.js';
import { Tab } from '@vaadin/react-components/Tab.js';
+import { Tabs } from '@vaadin/react-components/Tabs.js';
function Example() {
return (
diff --git a/frontend/demo/component/tabs/react/tabs-hide-scroll-buttons.tsx b/frontend/demo/component/tabs/react/tabs-hide-scroll-buttons.tsx
index 43da7f195b..ecbac75689 100644
--- a/frontend/demo/component/tabs/react/tabs-hide-scroll-buttons.tsx
+++ b/frontend/demo/component/tabs/react/tabs-hide-scroll-buttons.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { Tabs } from '@vaadin/react-components/Tabs.js';
import { Tab } from '@vaadin/react-components/Tab.js';
+import { Tabs } from '@vaadin/react-components/Tabs.js';
function Example() {
return (
diff --git a/frontend/demo/component/tabs/react/tabs-horizontal.tsx b/frontend/demo/component/tabs/react/tabs-horizontal.tsx
index 40ef43d687..18db5ae0c2 100644
--- a/frontend/demo/component/tabs/react/tabs-horizontal.tsx
+++ b/frontend/demo/component/tabs/react/tabs-horizontal.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { Tabs } from '@vaadin/react-components/Tabs.js';
import { Tab } from '@vaadin/react-components/Tab.js';
+import { Tabs } from '@vaadin/react-components/Tabs.js';
function Example() {
return (
diff --git a/frontend/demo/component/tabs/react/tabs-icons-horizontal.tsx b/frontend/demo/component/tabs/react/tabs-icons-horizontal.tsx
index e5afdddb58..6a4c05b81b 100644
--- a/frontend/demo/component/tabs/react/tabs-icons-horizontal.tsx
+++ b/frontend/demo/component/tabs/react/tabs-icons-horizontal.tsx
@@ -1,9 +1,9 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { Tabs } from '@vaadin/react-components/Tabs.js';
-import { Tab } from '@vaadin/react-components/Tab.js';
import { Icon } from '@vaadin/react-components/Icon.js';
-import '@vaadin/icons';
+import { Tab } from '@vaadin/react-components/Tab.js';
+import { Tabs } from '@vaadin/react-components/Tabs.js';
function Example() {
return (
diff --git a/frontend/demo/component/tabs/react/tabs-icons-vertical.tsx b/frontend/demo/component/tabs/react/tabs-icons-vertical.tsx
index 49347e83be..5259e3b7c2 100644
--- a/frontend/demo/component/tabs/react/tabs-icons-vertical.tsx
+++ b/frontend/demo/component/tabs/react/tabs-icons-vertical.tsx
@@ -1,9 +1,9 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { Icon } from '@vaadin/react-components/Icon.js';
-import { Tabs } from '@vaadin/react-components/Tabs.js';
import { Tab } from '@vaadin/react-components/Tab.js';
-import '@vaadin/icons';
+import { Tabs } from '@vaadin/react-components/Tabs.js';
function Example() {
return (
diff --git a/frontend/demo/component/tabs/react/tabs-states.tsx b/frontend/demo/component/tabs/react/tabs-states.tsx
index 96c2672faa..b6dddf9c6f 100644
--- a/frontend/demo/component/tabs/react/tabs-states.tsx
+++ b/frontend/demo/component/tabs/react/tabs-states.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { Tabs } from '@vaadin/react-components/Tabs.js';
import { Tab } from '@vaadin/react-components/Tab.js';
+import { Tabs } from '@vaadin/react-components/Tabs.js';
function Example() {
return (
diff --git a/frontend/demo/component/tabs/react/tabs-theme-centered.tsx b/frontend/demo/component/tabs/react/tabs-theme-centered.tsx
index c8d8535316..3b929648d6 100644
--- a/frontend/demo/component/tabs/react/tabs-theme-centered.tsx
+++ b/frontend/demo/component/tabs/react/tabs-theme-centered.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { Tabs } from '@vaadin/react-components/Tabs.js';
import { Tab } from '@vaadin/react-components/Tab.js';
+import { Tabs } from '@vaadin/react-components/Tabs.js';
function Example() {
return (
diff --git a/frontend/demo/component/tabs/react/tabs-theme-minimal.tsx b/frontend/demo/component/tabs/react/tabs-theme-minimal.tsx
index 254dd575a6..6bb2e039e3 100644
--- a/frontend/demo/component/tabs/react/tabs-theme-minimal.tsx
+++ b/frontend/demo/component/tabs/react/tabs-theme-minimal.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { Tabs } from '@vaadin/react-components/Tabs.js';
import { Tab } from '@vaadin/react-components/Tab.js';
+import { Tabs } from '@vaadin/react-components/Tabs.js';
function Example() {
return (
diff --git a/frontend/demo/component/tabs/react/tabs-theme-small.tsx b/frontend/demo/component/tabs/react/tabs-theme-small.tsx
index 00993752ce..86202b40a0 100644
--- a/frontend/demo/component/tabs/react/tabs-theme-small.tsx
+++ b/frontend/demo/component/tabs/react/tabs-theme-small.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { Tabs } from '@vaadin/react-components/Tabs.js';
import { Tab } from '@vaadin/react-components/Tab.js';
+import { Tabs } from '@vaadin/react-components/Tabs.js';
function Example() {
return (
diff --git a/frontend/demo/component/tabs/react/tabs-vertical.tsx b/frontend/demo/component/tabs/react/tabs-vertical.tsx
index ed1e4c140d..a2c72d6cb6 100644
--- a/frontend/demo/component/tabs/react/tabs-vertical.tsx
+++ b/frontend/demo/component/tabs/react/tabs-vertical.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { Tabs } from '@vaadin/react-components/Tabs.js';
import { Tab } from '@vaadin/react-components/Tab.js';
+import { Tabs } from '@vaadin/react-components/Tabs.js';
function Example() {
return (
diff --git a/frontend/demo/component/tabs/react/tabsheet-lazy-initialization.tsx b/frontend/demo/component/tabs/react/tabsheet-lazy-initialization.tsx
index b608145a35..98a77cf096 100644
--- a/frontend/demo/component/tabs/react/tabsheet-lazy-initialization.tsx
+++ b/frontend/demo/component/tabs/react/tabsheet-lazy-initialization.tsx
@@ -1,11 +1,11 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import {
TabSheet,
- TabSheetTab,
type TabSheetSelectedChangedEvent,
+ TabSheetTab,
} from '@vaadin/react-components/TabSheet.js';
function Example() {
diff --git a/frontend/demo/component/tabs/react/tabsheet-prefix-suffix.tsx b/frontend/demo/component/tabs/react/tabsheet-prefix-suffix.tsx
index 9231c0ea8d..80898af182 100644
--- a/frontend/demo/component/tabs/react/tabsheet-prefix-suffix.tsx
+++ b/frontend/demo/component/tabs/react/tabsheet-prefix-suffix.tsx
@@ -1,9 +1,9 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { Button } from '@vaadin/react-components/Button.js';
import { Icon } from '@vaadin/react-components/Icon.js';
import { TabSheet, TabSheetTab } from '@vaadin/react-components/TabSheet.js';
-import '@vaadin/icons';
function Example() {
return (
diff --git a/frontend/demo/component/textarea/react/text-area-basic-features.tsx b/frontend/demo/component/textarea/react/text-area-basic-features.tsx
index cbefb8ae3e..3e90391163 100644
--- a/frontend/demo/component/textarea/react/text-area-basic-features.tsx
+++ b/frontend/demo/component/textarea/react/text-area-basic-features.tsx
@@ -1,9 +1,9 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
+import { Icon } from '@vaadin/react-components/Icon.js';
import { TextArea } from '@vaadin/react-components/TextArea.js';
import { Tooltip } from '@vaadin/react-components/Tooltip.js';
-import { Icon } from '@vaadin/react-components/Icon.js';
-import '@vaadin/icons';
function Example() {
return (
diff --git a/frontend/demo/component/textarea/react/text-area-basic.tsx b/frontend/demo/component/textarea/react/text-area-basic.tsx
index c625943d8a..98c2f47234 100644
--- a/frontend/demo/component/textarea/react/text-area-basic.tsx
+++ b/frontend/demo/component/textarea/react/text-area-basic.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { TextArea } from '@vaadin/react-components/TextArea.js';
function Example() {
diff --git a/frontend/demo/component/textarea/react/text-area-helper.tsx b/frontend/demo/component/textarea/react/text-area-helper.tsx
index 847ff7f2bf..b40819c601 100644
--- a/frontend/demo/component/textarea/react/text-area-helper.tsx
+++ b/frontend/demo/component/textarea/react/text-area-helper.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
import { TextArea } from '@vaadin/react-components/TextArea.js';
import templates from '../../../../../src/main/resources/data/templates.json';
diff --git a/frontend/demo/component/textfield/react/text-field-basic-features.tsx b/frontend/demo/component/textfield/react/text-field-basic-features.tsx
index 934ee511d4..3deb690f2a 100644
--- a/frontend/demo/component/textfield/react/text-field-basic-features.tsx
+++ b/frontend/demo/component/textfield/react/text-field-basic-features.tsx
@@ -1,9 +1,9 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { TextField } from '@vaadin/react-components/TextField.js';
import { Icon } from '@vaadin/react-components/Icon.js';
+import { TextField } from '@vaadin/react-components/TextField.js';
import { Tooltip } from '@vaadin/react-components/Tooltip.js';
-import '@vaadin/icons';
function Example() {
return (
diff --git a/frontend/demo/component/textfield/react/text-field-basic.tsx b/frontend/demo/component/textfield/react/text-field-basic.tsx
index 68861fdaf2..b16ce04c90 100644
--- a/frontend/demo/component/textfield/react/text-field-basic.tsx
+++ b/frontend/demo/component/textfield/react/text-field-basic.tsx
@@ -1,8 +1,8 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { TextField } from '@vaadin/react-components/TextField.js';
import { Icon } from '@vaadin/react-components/Icon.js';
-import '@vaadin/icons';
+import { TextField } from '@vaadin/react-components/TextField.js';
function Example() {
return (
diff --git a/frontend/demo/component/timepicker/react/time-picker-basic-features.tsx b/frontend/demo/component/timepicker/react/time-picker-basic-features.tsx
index b90d537faf..3813f0a625 100644
--- a/frontend/demo/component/timepicker/react/time-picker-basic-features.tsx
+++ b/frontend/demo/component/timepicker/react/time-picker-basic-features.tsx
@@ -1,9 +1,9 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { TimePicker } from '@vaadin/react-components/TimePicker.js';
import { Icon } from '@vaadin/react-components/Icon.js';
+import { TimePicker } from '@vaadin/react-components/TimePicker.js';
import { Tooltip } from '@vaadin/react-components/Tooltip.js';
-import '@vaadin/icons';
function Example() {
return (
diff --git a/frontend/demo/component/timepicker/react/time-picker-custom-validation.tsx b/frontend/demo/component/timepicker/react/time-picker-custom-validation.tsx
index 1b47347cdf..019fc8f43c 100644
--- a/frontend/demo/component/timepicker/react/time-picker-custom-validation.tsx
+++ b/frontend/demo/component/timepicker/react/time-picker-custom-validation.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { TimePicker } from '@vaadin/react-components/TimePicker.js';
import { useForm, useFormPart } from '@vaadin/hilla-react-form';
+import { TimePicker } from '@vaadin/react-components/TimePicker.js';
import AppointmentModel from 'Frontend/generated/com/vaadin/demo/domain/AppointmentModel';
function Example() {
diff --git a/frontend/demo/component/timepicker/react/time-picker-validation.tsx b/frontend/demo/component/timepicker/react/time-picker-validation.tsx
index d252a7ed39..fe58b2445c 100644
--- a/frontend/demo/component/timepicker/react/time-picker-validation.tsx
+++ b/frontend/demo/component/timepicker/react/time-picker-validation.tsx
@@ -1,9 +1,9 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
-import { TimePicker } from '@vaadin/react-components/TimePicker.js';
+import { useSignal } from '@vaadin/hilla-react-signals';
import type { TimePickerChangeEvent } from '@vaadin/react-components/TimePicker.js';
+import { TimePicker } from '@vaadin/react-components/TimePicker.js';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/tooltip/react/tooltip-basic.tsx b/frontend/demo/component/tooltip/react/tooltip-basic.tsx
index 79c318513d..71443aab1d 100644
--- a/frontend/demo/component/tooltip/react/tooltip-basic.tsx
+++ b/frontend/demo/component/tooltip/react/tooltip-basic.tsx
@@ -1,9 +1,9 @@
+import '@vaadin/vaadin-lumo-styles/vaadin-iconset';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { TextField } from '@vaadin/react-components/TextField.js';
import { Icon } from '@vaadin/react-components/Icon.js';
+import { TextField } from '@vaadin/react-components/TextField.js';
import { Tooltip } from '@vaadin/react-components/Tooltip.js';
-import '@vaadin/vaadin-lumo-styles/vaadin-iconset';
function Example() {
return (
diff --git a/frontend/demo/component/tooltip/react/tooltip-manual.tsx b/frontend/demo/component/tooltip/react/tooltip-manual.tsx
index 5503ff04ee..52f9c0e007 100644
--- a/frontend/demo/component/tooltip/react/tooltip-manual.tsx
+++ b/frontend/demo/component/tooltip/react/tooltip-manual.tsx
@@ -1,12 +1,12 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
-import { Icon } from '@vaadin/react-components/Icon.js';
+import { useSignal } from '@vaadin/hilla-react-signals';
import { Button } from '@vaadin/react-components/Button.js';
-import { Tooltip } from '@vaadin/react-components/Tooltip.js';
+import { Icon } from '@vaadin/react-components/Icon.js';
import { TextField } from '@vaadin/react-components/TextField.js';
-import '@vaadin/icons';
+import { Tooltip } from '@vaadin/react-components/Tooltip.js';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/tooltip/react/tooltip-positioning.tsx b/frontend/demo/component/tooltip/react/tooltip-positioning.tsx
index ba472b798c..08c6704e36 100644
--- a/frontend/demo/component/tooltip/react/tooltip-positioning.tsx
+++ b/frontend/demo/component/tooltip/react/tooltip-positioning.tsx
@@ -1,12 +1,12 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { AppLayout } from '@vaadin/react-components/AppLayout.js';
import { DrawerToggle } from '@vaadin/react-components/DrawerToggle.js';
-import { Tooltip } from '@vaadin/react-components/Tooltip.js';
-import { Tabs } from '@vaadin/react-components/Tabs.js';
-import { Tab } from '@vaadin/react-components/Tab.js';
import { Icon } from '@vaadin/react-components/Icon.js';
-import '@vaadin/icons';
+import { Tab } from '@vaadin/react-components/Tab.js';
+import { Tabs } from '@vaadin/react-components/Tabs.js';
+import { Tooltip } from '@vaadin/react-components/Tooltip.js';
function Example() {
return (
diff --git a/frontend/demo/component/tree-grid/react/tree-grid-column.tsx b/frontend/demo/component/tree-grid/react/tree-grid-column.tsx
index a3938a8022..a8a26f7ab5 100644
--- a/frontend/demo/component/tree-grid/react/tree-grid-column.tsx
+++ b/frontend/demo/component/tree-grid/react/tree-grid-column.tsx
@@ -1,7 +1,8 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useMemo } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
+import { Button } from '@vaadin/react-components/Button.js';
import {
Grid,
type GridDataProviderCallback,
@@ -9,10 +10,9 @@ import {
} from '@vaadin/react-components/Grid.js';
import { GridColumn } from '@vaadin/react-components/GridColumn.js';
import { GridTreeColumn } from '@vaadin/react-components/GridTreeColumn.js';
-import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
-import { getPeople } from 'Frontend/demo/domain/DataService';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
-import { Button } from '@vaadin/react-components/Button.js';
+import { getPeople } from 'Frontend/demo/domain/DataService';
+import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/tree-grid/react/tree-grid-rich-content.tsx b/frontend/demo/component/tree-grid/react/tree-grid-rich-content.tsx
index 93c48b669a..e899d661fb 100644
--- a/frontend/demo/component/tree-grid/react/tree-grid-rich-content.tsx
+++ b/frontend/demo/component/tree-grid/react/tree-grid-rich-content.tsx
@@ -1,21 +1,21 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
+import { Avatar } from '@vaadin/react-components/Avatar.js';
import {
Grid,
type GridDataProviderCallback,
type GridDataProviderParams,
} from '@vaadin/react-components/Grid.js';
-import { GridTreeToggle } from '@vaadin/react-components/GridTreeToggle.js';
import { GridColumn } from '@vaadin/react-components/GridColumn.js';
-import { Avatar } from '@vaadin/react-components/Avatar.js';
-import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
-import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
-import { getPeople } from 'Frontend/demo/domain/DataService';
+import { GridTreeToggle } from '@vaadin/react-components/GridTreeToggle.js';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
-import '@vaadin/icons';
import { Icon } from '@vaadin/react-components/Icon.js';
+import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
+import { getPeople } from 'Frontend/demo/domain/DataService';
+import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
async function dataProvider(
params: GridDataProviderParams,
diff --git a/frontend/demo/component/tree-grid/react/tree-grid-scroll-to-index.tsx b/frontend/demo/component/tree-grid/react/tree-grid-scroll-to-index.tsx
index 3d81f5f38d..0f1f99bb12 100644
--- a/frontend/demo/component/tree-grid/react/tree-grid-scroll-to-index.tsx
+++ b/frontend/demo/component/tree-grid/react/tree-grid-scroll-to-index.tsx
@@ -1,20 +1,20 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useMemo, useRef } from 'react';
+import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useComputed, useSignal } from '@vaadin/hilla-react-signals';
+import { Button } from '@vaadin/react-components/Button.js';
import {
Grid,
- type GridElement,
type GridDataProviderCallback,
type GridDataProviderParams,
+ type GridElement,
} from '@vaadin/react-components/Grid.js';
import { GridColumn } from '@vaadin/react-components/GridColumn.js';
import { GridTreeColumn } from '@vaadin/react-components/GridTreeColumn.js';
+import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
+import { IntegerField } from '@vaadin/react-components/IntegerField.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
-import { IntegerField } from '@vaadin/react-components/IntegerField.js';
-import { Button } from '@vaadin/react-components/Button.js';
-import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
-import { useSignal, useComputed } from '@vaadin/hilla-react-signals';
-import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
type PersonOrId =
| Person
diff --git a/frontend/demo/component/upload/react/upload-all-files.tsx b/frontend/demo/component/upload/react/upload-all-files.tsx
index 206d558e03..4d861964b0 100644
--- a/frontend/demo/component/upload/react/upload-all-files.tsx
+++ b/frontend/demo/component/upload/react/upload-all-files.tsx
@@ -1,10 +1,10 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import React, { useRef, useEffect } from 'react';
-import { useComputed } from '@vaadin/hilla-react-signals';
+import React, { useEffect, useRef } from 'react';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useComputed } from '@vaadin/hilla-react-signals';
+import { Button } from '@vaadin/react-components/Button.js';
import { Upload, type UploadElement } from '@vaadin/react-components/Upload.js';
import { createFakeFilesUploadAllFiles } from './upload-demo-mock-files'; // hidden-source-line
-import { Button } from '@vaadin/react-components/Button.js';
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/upload/react/upload-auto-upload-disabled.tsx b/frontend/demo/component/upload/react/upload-auto-upload-disabled.tsx
index 0af2c20ed7..05d8f68808 100644
--- a/frontend/demo/component/upload/react/upload-auto-upload-disabled.tsx
+++ b/frontend/demo/component/upload/react/upload-auto-upload-disabled.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import React, { useRef, useEffect } from 'react';
-import { useComputed } from '@vaadin/hilla-react-signals';
+import React, { useEffect, useRef } from 'react';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useComputed } from '@vaadin/hilla-react-signals';
import { Upload, type UploadElement } from '@vaadin/react-components/Upload.js';
import { createFakeFilesUploadAutoUploadDisabled } from './upload-demo-mock-files';
diff --git a/frontend/demo/component/upload/react/upload-basic.tsx b/frontend/demo/component/upload/react/upload-basic.tsx
index 5e6d1478ef..6dc7d4d52e 100644
--- a/frontend/demo/component/upload/react/upload-basic.tsx
+++ b/frontend/demo/component/upload/react/upload-basic.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { useComputed } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useComputed } from '@vaadin/hilla-react-signals';
import { Upload } from '@vaadin/react-components/Upload.js';
import { createFakeFilesUploadBasic } from './upload-demo-mock-files';
diff --git a/frontend/demo/component/upload/react/upload-button-theme-variant.tsx b/frontend/demo/component/upload/react/upload-button-theme-variant.tsx
index 1280e10d96..74352c4570 100644
--- a/frontend/demo/component/upload/react/upload-button-theme-variant.tsx
+++ b/frontend/demo/component/upload/react/upload-button-theme-variant.tsx
@@ -1,8 +1,8 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useRef } from 'react';
-import { Upload } from '@vaadin/react-components/Upload.js';
import { Button } from '@vaadin/react-components/Button.js';
import { Notification } from '@vaadin/react-components/Notification.js';
+import { Upload } from '@vaadin/react-components/Upload.js';
function Example() {
const maxFilesReached = useRef(false);
diff --git a/frontend/demo/component/upload/react/upload-clear-button.tsx b/frontend/demo/component/upload/react/upload-clear-button.tsx
index 17c4290b0a..bed65cd339 100644
--- a/frontend/demo/component/upload/react/upload-clear-button.tsx
+++ b/frontend/demo/component/upload/react/upload-clear-button.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { useComputed } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useComputed } from '@vaadin/hilla-react-signals';
import { Upload } from '@vaadin/react-components/Upload.js';
import { createFakeUploadFiles } from './upload-demo-helpers';
diff --git a/frontend/demo/component/upload/react/upload-drop-label.tsx b/frontend/demo/component/upload/react/upload-drop-label.tsx
index 8e5f4c9ddf..c0e806a688 100644
--- a/frontend/demo/component/upload/react/upload-drop-label.tsx
+++ b/frontend/demo/component/upload/react/upload-drop-label.tsx
@@ -1,8 +1,8 @@
+import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { Upload } from '@vaadin/react-components/Upload.js';
import { Icon } from '@vaadin/react-components/Icon.js';
-import '@vaadin/icons';
+import { Upload } from '@vaadin/react-components/Upload.js';
function Example() {
return (
diff --git a/frontend/demo/component/upload/react/upload-error-messages.tsx b/frontend/demo/component/upload/react/upload-error-messages.tsx
index 5e93d2128f..2a00676705 100644
--- a/frontend/demo/component/upload/react/upload-error-messages.tsx
+++ b/frontend/demo/component/upload/react/upload-error-messages.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect, useRef } from 'react';
-import { useComputed } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useComputed } from '@vaadin/hilla-react-signals';
import { FormLayout, type FormLayoutResponsiveStep } from '@vaadin/react-components/FormLayout.js';
import { Upload, type UploadElement } from '@vaadin/react-components/Upload.js';
import {
diff --git a/frontend/demo/component/upload/react/upload-file-count.tsx b/frontend/demo/component/upload/react/upload-file-count.tsx
index 3a6de50d08..2013e5e07d 100644
--- a/frontend/demo/component/upload/react/upload-file-count.tsx
+++ b/frontend/demo/component/upload/react/upload-file-count.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { Upload } from '@vaadin/react-components/Upload.js';
import { Notification } from '@vaadin/react-components/Notification.js';
+import { Upload } from '@vaadin/react-components/Upload.js';
function Example() {
// tag::snippet[]
diff --git a/frontend/demo/component/upload/react/upload-file-format.tsx b/frontend/demo/component/upload/react/upload-file-format.tsx
index 903954129c..6dfe562d8b 100644
--- a/frontend/demo/component/upload/react/upload-file-format.tsx
+++ b/frontend/demo/component/upload/react/upload-file-format.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { Upload } from '@vaadin/react-components/Upload.js';
import { Notification } from '@vaadin/react-components/Notification.js';
+import { Upload } from '@vaadin/react-components/Upload.js';
function Example() {
return (
diff --git a/frontend/demo/component/upload/react/upload-helper.tsx b/frontend/demo/component/upload/react/upload-helper.tsx
index 5dc498f6e7..9e963a0f24 100644
--- a/frontend/demo/component/upload/react/upload-helper.tsx
+++ b/frontend/demo/component/upload/react/upload-helper.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect, useRef } from 'react';
-import { Upload } from '@vaadin/react-components/Upload.js';
import { Notification } from '@vaadin/react-components/Notification.js';
+import { Upload } from '@vaadin/react-components/Upload.js';
function Example() {
const maxFileSizeInMB = 1;
diff --git a/frontend/demo/component/upload/react/upload-labelling.tsx b/frontend/demo/component/upload/react/upload-labelling.tsx
index 69e3ff613e..f2252fa85b 100644
--- a/frontend/demo/component/upload/react/upload-labelling.tsx
+++ b/frontend/demo/component/upload/react/upload-labelling.tsx
@@ -1,8 +1,8 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import { Notification } from '@vaadin/react-components/Notification.js';
import React, { useEffect, useRef } from 'react';
-import { Upload } from '@vaadin/react-components/Upload.js';
+import { Notification } from '@vaadin/react-components/Notification.js';
import type { UploadFileRejectEvent } from '@vaadin/react-components/Upload.js';
+import { Upload } from '@vaadin/react-components/Upload.js';
const fileRejectHandler = (event: UploadFileRejectEvent) => {
Notification.show(event.detail.error);
diff --git a/frontend/demo/component/upload/react/upload-start-button.tsx b/frontend/demo/component/upload/react/upload-start-button.tsx
index 511087cd96..ebd533062d 100644
--- a/frontend/demo/component/upload/react/upload-start-button.tsx
+++ b/frontend/demo/component/upload/react/upload-start-button.tsx
@@ -1,7 +1,7 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
-import { useComputed } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useComputed } from '@vaadin/hilla-react-signals';
import { Upload } from '@vaadin/react-components/Upload.js';
import { createFakeUploadFiles } from './upload-demo-helpers';
diff --git a/frontend/demo/component/virtuallist/react/virtual-list-basic.tsx b/frontend/demo/component/virtuallist/react/virtual-list-basic.tsx
index e484ed9aad..aa599c951d 100644
--- a/frontend/demo/component/virtuallist/react/virtual-list-basic.tsx
+++ b/frontend/demo/component/virtuallist/react/virtual-list-basic.tsx
@@ -1,14 +1,14 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
-import { VirtualList } from '@vaadin/react-components/VirtualList.js';
-import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
-import { getPeople } from 'Frontend/demo/domain/DataService';
+import { useSignal } from '@vaadin/hilla-react-signals';
+import { Avatar } from '@vaadin/react-components/Avatar.js';
+import { Details } from '@vaadin/react-components/Details.js';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
-import { Details } from '@vaadin/react-components/Details.js';
-import { Avatar } from '@vaadin/react-components/Avatar.js';
+import { VirtualList } from '@vaadin/react-components/VirtualList.js';
+import { getPeople } from 'Frontend/demo/domain/DataService';
+import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
const avatarStyle = {
height: '64px',
diff --git a/frontend/demo/fusion/forms/formchange/CompanyOfficeView.tsx b/frontend/demo/fusion/forms/formchange/CompanyOfficeView.tsx
index 1f9b1e9e5e..e99aa05995 100644
--- a/frontend/demo/fusion/forms/formchange/CompanyOfficeView.tsx
+++ b/frontend/demo/fusion/forms/formchange/CompanyOfficeView.tsx
@@ -1,13 +1,13 @@
-import { useForm } from '@vaadin/hilla-react-form';
import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
-import { OfficeService } from 'Frontend/generated/endpoints';
+import { useForm } from '@vaadin/hilla-react-form';
+import { useSignal } from '@vaadin/hilla-react-signals';
+import { Button } from '@vaadin/react-components/Button.js';
+import { ComboBox } from '@vaadin/react-components/ComboBox.js';
+import type City from 'Frontend/generated/com/vaadin/demo/fusion/forms/formchange/City';
import CompanyOfficeModel from 'Frontend/generated/com/vaadin/demo/fusion/forms/formchange/CompanyOfficeModel';
import type Country from 'Frontend/generated/com/vaadin/demo/fusion/forms/formchange/Country';
-import type City from 'Frontend/generated/com/vaadin/demo/fusion/forms/formchange/City';
-import { ComboBox } from '@vaadin/react-components/ComboBox.js';
-import { Button } from '@vaadin/react-components/Button.js';
+import { OfficeService } from 'Frontend/generated/endpoints';
export default function CompanyOfficeView() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/react-example.ts b/frontend/demo/react-example.ts
index a312dee9f3..fd63adbfe6 100644
--- a/frontend/demo/react-example.ts
+++ b/frontend/demo/react-example.ts
@@ -1,7 +1,7 @@
import 'Frontend/demo/init';
-import type { CSSResult } from 'lit';
import React, { type ComponentClass, type FunctionComponent } from 'react';
import { createRoot } from 'react-dom/client';
+import type { CSSResult } from 'lit';
import { applyTheme } from 'Frontend/generated/theme';
export function reactExample(
diff --git a/frontend/routes.tsx b/frontend/routes.tsx
index 0fe234131f..a3b9cbe635 100644
--- a/frontend/routes.tsx
+++ b/frontend/routes.tsx
@@ -1,6 +1,4 @@
import { RouterConfigurationBuilder } from '@vaadin/hilla-file-router/runtime.js';
import Flow from 'Frontend/generated/flow/Flow';
-export const { router, routes } = new RouterConfigurationBuilder()
- .withFallback(Flow)
- .build();
+export const { router, routes } = new RouterConfigurationBuilder().withFallback(Flow).build();