diff --git a/frontend/demo/component/icons/react/icon-basic.tsx b/frontend/demo/component/icons/react/icon-basic.tsx
index b3f9d92f60..b7a8e9a621 100644
--- a/frontend/demo/component/icons/react/icon-basic.tsx
+++ b/frontend/demo/component/icons/react/icon-basic.tsx
@@ -1,8 +1,8 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+import '@vaadin/icons';
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';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
function Example() {
return (
diff --git a/frontend/demo/component/icons/react/icon-fonts.tsx b/frontend/demo/component/icons/react/icon-fonts.tsx
index 353622e0e8..0d92eeab9e 100644
--- a/frontend/demo/component/icons/react/icon-fonts.tsx
+++ b/frontend/demo/component/icons/react/icon-fonts.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 { Icon } from '@vaadin/react-components/Icon.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
function Example() {
return (
diff --git a/frontend/demo/component/icons/react/icons-accessibility.tsx b/frontend/demo/component/icons/react/icons-accessibility.tsx
index b20c527fcc..c682a3e002 100644
--- a/frontend/demo/component/icons/react/icons-accessibility.tsx
+++ b/frontend/demo/component/icons/react/icons-accessibility.tsx
@@ -1,7 +1,7 @@
-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 { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
function Example() {
return (
diff --git a/frontend/demo/component/icons/react/icons-color.tsx b/frontend/demo/component/icons/react/icons-color.tsx
index bb72e68064..6745cc8ead 100644
--- a/frontend/demo/component/icons/react/icons-color.tsx
+++ b/frontend/demo/component/icons/react/icons-color.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 { Icon } from '@vaadin/react-components/Icon.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import codeBranch from '../../../../../src/main/resources/icons/code-branch.svg';
function Example() {
diff --git a/frontend/demo/component/icons/react/icons-padding.tsx b/frontend/demo/component/icons/react/icons-padding.tsx
index 9def8a4bfd..4660283584 100644
--- a/frontend/demo/component/icons/react/icons-padding.tsx
+++ b/frontend/demo/component/icons/react/icons-padding.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 { Icon } from '@vaadin/react-components/Icon.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import codeBranch from '../../../../../src/main/resources/icons/code-branch.svg';
function Example() {
diff --git a/frontend/demo/component/icons/react/icons-sizing.tsx b/frontend/demo/component/icons/react/icons-sizing.tsx
index 3047bfff4d..2dee1db14d 100644
--- a/frontend/demo/component/icons/react/icons-sizing.tsx
+++ b/frontend/demo/component/icons/react/icons-sizing.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 { Icon } from '@vaadin/react-components/Icon.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import codeBranch from '../../../../../src/main/resources/icons/code-branch.svg';
function Example() {
diff --git a/frontend/demo/component/icons/react/lumo-icons.tsx b/frontend/demo/component/icons/react/lumo-icons.tsx
index ed7a25d4c1..d982841148 100644
--- a/frontend/demo/component/icons/react/lumo-icons.tsx
+++ b/frontend/demo/component/icons/react/lumo-icons.tsx
@@ -1,9 +1,9 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+import '@vaadin/vaadin-lumo-styles/vaadin-iconset.js';
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';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
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..7a2a6e83a1 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 { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
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..45863db922 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 { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+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..a7068295f1 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';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
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..4ec871f224 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';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
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..da20858609 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 { useSignals } from '@preact/signals-react/runtime'; // 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 { 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 { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+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..d1d177be8b 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';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
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..28b4781011 100644
--- a/frontend/demo/component/listbox/react/list-box-multi-selection.tsx
+++ b/frontend/demo/component/listbox/react/list-box-multi-selection.tsx
@@ -1,10 +1,10 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+import { useSignals } from '@preact/signals-react/runtime'; // 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 { ListBox } from '@vaadin/react-components/ListBox.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
function Example() {
diff --git a/frontend/demo/component/listbox/react/list-box-separators.tsx b/frontend/demo/component/listbox/react/list-box-separators.tsx
index 612970938f..40c2b36662 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';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
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..72d45f8792 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';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
function Example() {
return (
diff --git a/frontend/demo/component/login/react/login-additional-information.tsx b/frontend/demo/component/login/react/login-additional-information.tsx
index 8210500d8a..ff06e8f1ff 100644
--- a/frontend/demo/component/login/react/login-additional-information.tsx
+++ b/frontend/demo/component/login/react/login-additional-information.tsx
@@ -1,6 +1,6 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React, { useEffect, useRef } from 'react';
import { LoginOverlay, type LoginOverlayElement } from '@vaadin/react-components/LoginOverlay.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
function Example() {
// tag::snippet[]
diff --git a/frontend/demo/component/login/react/login-basic.tsx b/frontend/demo/component/login/react/login-basic.tsx
index 79d5dac07f..99efbb06d4 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 { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+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..88faeac521 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 { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+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..564b9b1d08 100644
--- a/frontend/demo/component/login/react/login-overlay-basic.tsx
+++ b/frontend/demo/component/login/react/login-overlay-basic.tsx
@@ -1,9 +1,9 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+import { useSignals } from '@preact/signals-react/runtime'; // 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 { Button } from '@vaadin/react-components/Button.js';
import { LoginOverlay } from '@vaadin/react-components/LoginOverlay.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/login/react/login-overlay-custom-form-area.tsx b/frontend/demo/component/login/react/login-overlay-custom-form-area.tsx
index fec1b7ddd7..90e5533b02 100644
--- a/frontend/demo/component/login/react/login-overlay-custom-form-area.tsx
+++ b/frontend/demo/component/login/react/login-overlay-custom-form-area.tsx
@@ -1,7 +1,7 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { IntegerField } from '@vaadin/react-components/IntegerField.js';
import { LoginOverlay } from '@vaadin/react-components/LoginOverlay.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import { applyTheme } from 'Frontend/generated/theme';
function Example() {
diff --git a/frontend/demo/component/login/react/login-overlay-footer.tsx b/frontend/demo/component/login/react/login-overlay-footer.tsx
index 6d4ef7d352..aa5a671a69 100644
--- a/frontend/demo/component/login/react/login-overlay-footer.tsx
+++ b/frontend/demo/component/login/react/login-overlay-footer.tsx
@@ -1,6 +1,6 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { LoginOverlay } from '@vaadin/react-components/LoginOverlay.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import { applyTheme } from 'Frontend/generated/theme';
function Example() {
diff --git a/frontend/demo/component/login/react/login-overlay-header.tsx b/frontend/demo/component/login/react/login-overlay-header.tsx
index 6f978c3389..4c7af5863a 100644
--- a/frontend/demo/component/login/react/login-overlay-header.tsx
+++ b/frontend/demo/component/login/react/login-overlay-header.tsx
@@ -1,6 +1,6 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { LoginOverlay } from '@vaadin/react-components/LoginOverlay.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import { applyTheme } from 'Frontend/generated/theme';
function Example() {
diff --git a/frontend/demo/component/login/react/login-overlay-internationalization.tsx b/frontend/demo/component/login/react/login-overlay-internationalization.tsx
index e13e1539af..1489d4ffd5 100644
--- a/frontend/demo/component/login/react/login-overlay-internationalization.tsx
+++ b/frontend/demo/component/login/react/login-overlay-internationalization.tsx
@@ -1,6 +1,6 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { LoginOverlay } from '@vaadin/react-components/LoginOverlay.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
function Example() {
// tag::snippet[]
diff --git a/frontend/demo/component/login/react/login-rich-content.tsx b/frontend/demo/component/login/react/login-rich-content.tsx
index 6f91a9b7c2..b5ec9ef779 100644
--- a/frontend/demo/component/login/react/login-rich-content.tsx
+++ b/frontend/demo/component/login/react/login-rich-content.tsx
@@ -1,6 +1,6 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { LoginForm } from '@vaadin/react-components/LoginForm.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
function Example() {
return (
diff --git a/frontend/demo/component/login/react/login-validation.tsx b/frontend/demo/component/login/react/login-validation.tsx
index 7e47e2405a..a092862285 100644
--- a/frontend/demo/component/login/react/login-validation.tsx
+++ b/frontend/demo/component/login/react/login-validation.tsx
@@ -1,6 +1,6 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { LoginOverlay } from '@vaadin/react-components/LoginOverlay.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
// tag::snippet[]
function Example() {
diff --git a/frontend/demo/component/menubar/react/menu-bar-basic.tsx b/frontend/demo/component/menubar/react/menu-bar-basic.tsx
index c609fd87dc..5dc886c760 100644
--- a/frontend/demo/component/menubar/react/menu-bar-basic.tsx
+++ b/frontend/demo/component/menubar/react/menu-bar-basic.tsx
@@ -1,8 +1,8 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+import { useSignals } from '@preact/signals-react/runtime'; // 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 { MenuBar, type MenuBarItem } from '@vaadin/react-components/MenuBar.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/menubar/react/menu-bar-checkable.tsx b/frontend/demo/component/menubar/react/menu-bar-checkable.tsx
index e4101d20ee..7380a7d512 100644
--- a/frontend/demo/component/menubar/react/menu-bar-checkable.tsx
+++ b/frontend/demo/component/menubar/react/menu-bar-checkable.tsx
@@ -1,12 +1,12 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+import { useSignals } from '@preact/signals-react/runtime'; // 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 {
MenuBar,
- type SubMenuItem,
type MenuBarItemSelectedEvent,
+ type SubMenuItem,
} from '@vaadin/react-components/MenuBar.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
function Example() {
useSignals(); // hidden-source-line
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..dcca33742f 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 { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+import '@vaadin/icons';
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';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
function Example() {
// tag::snippet[]
diff --git a/frontend/demo/component/menubar/react/menu-bar-custom-styling.tsx b/frontend/demo/component/menubar/react/menu-bar-custom-styling.tsx
index 885a449bc8..0d15f926fb 100644
--- a/frontend/demo/component/menubar/react/menu-bar-custom-styling.tsx
+++ b/frontend/demo/component/menubar/react/menu-bar-custom-styling.tsx
@@ -1,6 +1,6 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { MenuBar } from '@vaadin/react-components/MenuBar.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
function Example() {
// tag::snippet[]
diff --git a/frontend/demo/component/menubar/react/menu-bar-disabled.tsx b/frontend/demo/component/menubar/react/menu-bar-disabled.tsx
index 905f0c53c6..2c76631175 100644
--- a/frontend/demo/component/menubar/react/menu-bar-disabled.tsx
+++ b/frontend/demo/component/menubar/react/menu-bar-disabled.tsx
@@ -1,6 +1,6 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { MenuBar } from '@vaadin/react-components/MenuBar.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
function Example() {
// tag::snippet[]
diff --git a/frontend/demo/component/menubar/react/menu-bar-dividers.tsx b/frontend/demo/component/menubar/react/menu-bar-dividers.tsx
index e7955b6f99..a55ac2d47c 100644
--- a/frontend/demo/component/menubar/react/menu-bar-dividers.tsx
+++ b/frontend/demo/component/menubar/react/menu-bar-dividers.tsx
@@ -1,6 +1,6 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { MenuBar } from '@vaadin/react-components/MenuBar.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
function Example() {
// tag::snippet[]
diff --git a/frontend/demo/component/menubar/react/menu-bar-drop-down-indicators.tsx b/frontend/demo/component/menubar/react/menu-bar-drop-down-indicators.tsx
index 563f2760b3..fd6b9169b1 100644
--- a/frontend/demo/component/menubar/react/menu-bar-drop-down-indicators.tsx
+++ b/frontend/demo/component/menubar/react/menu-bar-drop-down-indicators.tsx
@@ -1,6 +1,6 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { MenuBar } from '@vaadin/react-components/MenuBar.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
function Example() {
const items = [
diff --git a/frontend/demo/component/menubar/react/menu-bar-drop-down.tsx b/frontend/demo/component/menubar/react/menu-bar-drop-down.tsx
index 084886d895..aa9e6e2cb6 100644
--- a/frontend/demo/component/menubar/react/menu-bar-drop-down.tsx
+++ b/frontend/demo/component/menubar/react/menu-bar-drop-down.tsx
@@ -1,6 +1,6 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { MenuBar } from '@vaadin/react-components/MenuBar.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
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..aaffb1e470 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 { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+import '@vaadin/icons';
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';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
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..99e77ae097 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 { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+import '@vaadin/icons';
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';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
function createItem(iconName: string, text: string, isChild = false) {
const iconStyle: React.CSSProperties = {
diff --git a/frontend/demo/component/menubar/react/menu-bar-internationalization.tsx b/frontend/demo/component/menubar/react/menu-bar-internationalization.tsx
index 6577c96c3f..dd92809cbd 100644
--- a/frontend/demo/component/menubar/react/menu-bar-internationalization.tsx
+++ b/frontend/demo/component/menubar/react/menu-bar-internationalization.tsx
@@ -1,6 +1,6 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { MenuBar, type MenuBarI18n } from '@vaadin/react-components/MenuBar.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
function Example() {
const items = [
diff --git a/frontend/demo/component/menubar/react/menu-bar-open-on-hover.tsx b/frontend/demo/component/menubar/react/menu-bar-open-on-hover.tsx
index 628fa71f0a..66835cdfdf 100644
--- a/frontend/demo/component/menubar/react/menu-bar-open-on-hover.tsx
+++ b/frontend/demo/component/menubar/react/menu-bar-open-on-hover.tsx
@@ -1,6 +1,6 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { MenuBar } from '@vaadin/react-components/MenuBar.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
function Example() {
// tag::snippet[]
diff --git a/frontend/demo/component/menubar/react/menu-bar-overflow.tsx b/frontend/demo/component/menubar/react/menu-bar-overflow.tsx
index 165f2b1faa..56dc97c33b 100644
--- a/frontend/demo/component/menubar/react/menu-bar-overflow.tsx
+++ b/frontend/demo/component/menubar/react/menu-bar-overflow.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 { SplitLayout } from '@vaadin/react-components/SplitLayout.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
function Example() {
// tag::snippet[]
diff --git a/frontend/demo/component/menubar/react/menu-bar-right-aligned.tsx b/frontend/demo/component/menubar/react/menu-bar-right-aligned.tsx
index b5f430be77..0c58a29f0c 100644
--- a/frontend/demo/component/menubar/react/menu-bar-right-aligned.tsx
+++ b/frontend/demo/component/menubar/react/menu-bar-right-aligned.tsx
@@ -1,6 +1,6 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { MenuBar } from '@vaadin/react-components/MenuBar.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
function Example() {
const items = [
diff --git a/frontend/demo/component/menubar/react/menu-bar-styles.tsx b/frontend/demo/component/menubar/react/menu-bar-styles.tsx
index 4616bfc5cc..a24b266270 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';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
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..c399cfa954 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 { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+import '@vaadin/icons';
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';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
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..1d3bae20d0 100644
--- a/frontend/demo/component/messages/react/message-basic.tsx
+++ b/frontend/demo/component/messages/react/message-basic.tsx
@@ -1,11 +1,11 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+import { useSignals } from '@preact/signals-react/runtime'; // 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 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';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/messages/react/message-input-component.tsx b/frontend/demo/component/messages/react/message-input-component.tsx
index c3555666e6..a391dd8a0d 100644
--- a/frontend/demo/component/messages/react/message-input-component.tsx
+++ b/frontend/demo/component/messages/react/message-input-component.tsx
@@ -1,10 +1,10 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import {
MessageInput,
type MessageInputSubmitEvent,
} from '@vaadin/react-components/MessageInput.js';
import { Notification } from '@vaadin/react-components/Notification.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
function Example() {
// tag::snippet[]
diff --git a/frontend/demo/component/messages/react/message-list-component.tsx b/frontend/demo/component/messages/react/message-list-component.tsx
index 8bb1754fc6..072a0dc42b 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 React, { useEffect } from 'react';
+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 { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+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..34d7035544 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 { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { format, subDays, subMinutes } from 'date-fns';
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 { getPeople } from 'Frontend/demo/domain/DataService';
-import { subDays, subMinutes, format } from 'date-fns';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
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..695606ee24 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,9 +1,9 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+import { useSignals } from '@preact/signals-react/runtime'; // 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 { MultiSelectComboBox } from '@vaadin/react-components/MultiSelectComboBox.js';
import { getCountries } from 'Frontend/demo/domain/DataService';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import type Country from 'Frontend/generated/com/vaadin/demo/domain/Country';
function Example() {
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..accc234a59 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,9 +1,9 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+import { useSignals } from '@preact/signals-react/runtime'; // 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 { MultiSelectComboBox } from '@vaadin/react-components/MultiSelectComboBox.js';
import { getCountries } from 'Frontend/demo/domain/DataService';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import type Country from 'Frontend/generated/com/vaadin/demo/domain/Country';
function Example() {
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..b46cfc1122 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 { useSignals } from '@preact/signals-react/runtime'; // 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 { 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 { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+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-item-class-name.tsx b/frontend/demo/component/multi-select-combo-box/react/multi-select-combo-box-item-class-name.tsx
index c8a022b97d..1bc00ff601 100644
--- a/frontend/demo/component/multi-select-combo-box/react/multi-select-combo-box-item-class-name.tsx
+++ b/frontend/demo/component/multi-select-combo-box/react/multi-select-combo-box-item-class-name.tsx
@@ -1,6 +1,6 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { MultiSelectComboBox } from '@vaadin/react-components/MultiSelectComboBox.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
function Example() {
// tag::snippet[]
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..19165f7650 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 { useSignals } from '@preact/signals-react/runtime'; // 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 { MultiSelectComboBox } from '@vaadin/react-components/MultiSelectComboBox.js';
import { getCountries } from 'Frontend/demo/domain/DataService';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
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..bcf3561793 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,9 +1,9 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+import { useSignals } from '@preact/signals-react/runtime'; // 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 { MultiSelectComboBox } from '@vaadin/react-components/MultiSelectComboBox.js';
import { getCountries } from 'Frontend/demo/domain/DataService';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import type Country from 'Frontend/generated/com/vaadin/demo/domain/Country';
function Example() {
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..d34a09ed96 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,11 +1,11 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+import { useSignals } from '@preact/signals-react/runtime'; // 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 { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
import { MultiSelectComboBox } from '@vaadin/react-components/MultiSelectComboBox.js';
import { TextArea } from '@vaadin/react-components/TextArea.js';
import { getCountries } from 'Frontend/demo/domain/DataService';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import type Country from 'Frontend/generated/com/vaadin/demo/domain/Country';
function Example() {
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..0993e929b1 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,9 +1,9 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+import { useSignals } from '@preact/signals-react/runtime'; // 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 { MultiSelectComboBox } from '@vaadin/react-components/MultiSelectComboBox.js';
import { getCountries } from 'Frontend/demo/domain/DataService';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import type Country from 'Frontend/generated/com/vaadin/demo/domain/Country';
function Example() {
diff --git a/frontend/demo/component/tabs/react/tabs-badges.tsx b/frontend/demo/component/tabs/react/tabs-badges.tsx
index 0b798b1c5e..7a3c456792 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';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
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..882454294d 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';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
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..c156f8b420 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 { useSignals } from '@preact/signals-react/runtime'; // 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 { 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';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
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..49a386140a 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';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
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..6a9be462f5 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';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
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..9485e901b4 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';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
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..00c01643ee 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 { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+import '@vaadin/icons';
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';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
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..1d5a96910d 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 { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+import '@vaadin/icons';
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';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
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..29b1ea064c 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';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
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..217a10e716 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';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
function Example() {
return (
diff --git a/frontend/demo/component/tabs/react/tabs-theme-equal-width.tsx b/frontend/demo/component/tabs/react/tabs-theme-equal-width.tsx
index e7b1caa457..fdfe9debd7 100644
--- a/frontend/demo/component/tabs/react/tabs-theme-equal-width.tsx
+++ b/frontend/demo/component/tabs/react/tabs-theme-equal-width.tsx
@@ -1,7 +1,7 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { Tab } from '@vaadin/react-components/Tab.js';
import { Tabs } from '@vaadin/react-components/Tabs.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
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..e655196503 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';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
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..373cbdce1c 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';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
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..2d9a33d0b3 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';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
function Example() {
return (
diff --git a/frontend/demo/component/tabs/react/tabsheet-basic.tsx b/frontend/demo/component/tabs/react/tabsheet-basic.tsx
index b7fd351d19..89adc592a9 100644
--- a/frontend/demo/component/tabs/react/tabsheet-basic.tsx
+++ b/frontend/demo/component/tabs/react/tabsheet-basic.tsx
@@ -1,6 +1,6 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { TabSheet, TabSheetTab } from '@vaadin/react-components/TabSheet.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
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..1102737227 100644
--- a/frontend/demo/component/tabs/react/tabsheet-lazy-initialization.tsx
+++ b/frontend/demo/component/tabs/react/tabsheet-lazy-initialization.tsx
@@ -1,12 +1,12 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+import { useSignals } from '@preact/signals-react/runtime'; // 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 {
TabSheet,
- TabSheetTab,
type TabSheetSelectedChangedEvent,
+ TabSheetTab,
} from '@vaadin/react-components/TabSheet.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/tabs/react/tabsheet-prefix-suffix.tsx b/frontend/demo/component/tabs/react/tabsheet-prefix-suffix.tsx
index 9231c0ea8d..4977ad6532 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 { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+import '@vaadin/icons';
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';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
function Example() {
return (
diff --git a/frontend/demo/component/tabs/react/tabsheet-theme-bordered.tsx b/frontend/demo/component/tabs/react/tabsheet-theme-bordered.tsx
index 0f44efa41c..a902735771 100644
--- a/frontend/demo/component/tabs/react/tabsheet-theme-bordered.tsx
+++ b/frontend/demo/component/tabs/react/tabsheet-theme-bordered.tsx
@@ -1,6 +1,6 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { TabSheet, TabSheetTab } from '@vaadin/react-components/TabSheet.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
function Example() {
return (
diff --git a/frontend/demo/component/textarea/react/text-area-auto-height.tsx b/frontend/demo/component/textarea/react/text-area-auto-height.tsx
index e5ac073495..1224f4908c 100644
--- a/frontend/demo/component/textarea/react/text-area-auto-height.tsx
+++ b/frontend/demo/component/textarea/react/text-area-auto-height.tsx
@@ -1,6 +1,6 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { TextArea } from '@vaadin/react-components/TextArea.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import templates from '../../../../../src/main/resources/data/templates.json';
function Example() {
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..ef6c1534f8 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 { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+import '@vaadin/icons';
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';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
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..bd52865e33 100644
--- a/frontend/demo/component/textarea/react/text-area-basic.tsx
+++ b/frontend/demo/component/textarea/react/text-area-basic.tsx
@@ -1,8 +1,8 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+import { useSignals } from '@preact/signals-react/runtime'; // 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 { TextArea } from '@vaadin/react-components/TextArea.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
function Example() {
useSignals(); // hidden-source-line
diff --git a/frontend/demo/component/textarea/react/text-area-height.tsx b/frontend/demo/component/textarea/react/text-area-height.tsx
index a7abfba526..8cde9f9397 100644
--- a/frontend/demo/component/textarea/react/text-area-height.tsx
+++ b/frontend/demo/component/textarea/react/text-area-height.tsx
@@ -1,6 +1,6 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { TextArea } from '@vaadin/react-components/TextArea.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import templates from '../../../../../src/main/resources/data/templates.json';
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..e7fd428928 100644
--- a/frontend/demo/component/textarea/react/text-area-helper.tsx
+++ b/frontend/demo/component/textarea/react/text-area-helper.tsx
@@ -1,8 +1,8 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+import { useSignals } from '@preact/signals-react/runtime'; // 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 { TextArea } from '@vaadin/react-components/TextArea.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import templates from '../../../../../src/main/resources/data/templates.json';
function Example() {
diff --git a/frontend/demo/component/textarea/react/text-area-readonly-and-disabled.tsx b/frontend/demo/component/textarea/react/text-area-readonly-and-disabled.tsx
index 9e3945a9dc..7753897934 100644
--- a/frontend/demo/component/textarea/react/text-area-readonly-and-disabled.tsx
+++ b/frontend/demo/component/textarea/react/text-area-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 { TextArea } from '@vaadin/react-components/TextArea.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
function Example() {
return (
diff --git a/frontend/demo/component/textarea/react/text-area-styles.tsx b/frontend/demo/component/textarea/react/text-area-styles.tsx
index 4d851eabc7..535a3ef644 100644
--- a/frontend/demo/component/textarea/react/text-area-styles.tsx
+++ b/frontend/demo/component/textarea/react/text-area-styles.tsx
@@ -1,6 +1,6 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { TextArea } from '@vaadin/react-components/TextArea.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
function Example() {
return (
diff --git a/frontend/demo/component/textarea/react/text-area-validation.tsx b/frontend/demo/component/textarea/react/text-area-validation.tsx
index 497fdf4289..1e2fe7d53a 100644
--- a/frontend/demo/component/textarea/react/text-area-validation.tsx
+++ b/frontend/demo/component/textarea/react/text-area-validation.tsx
@@ -1,6 +1,6 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { TextArea } from '@vaadin/react-components/TextArea.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
function Example() {
return (
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..04542e8ece 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 { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+import '@vaadin/icons';
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';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
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..38a722f270 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 { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+import '@vaadin/icons';
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';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
function Example() {
return (
diff --git a/frontend/demo/component/textfield/react/text-field-readonly-and-disabled.tsx b/frontend/demo/component/textfield/react/text-field-readonly-and-disabled.tsx
index 48cefd26b5..8e9dba3646 100644
--- a/frontend/demo/component/textfield/react/text-field-readonly-and-disabled.tsx
+++ b/frontend/demo/component/textfield/react/text-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 { TextField } from '@vaadin/react-components/TextField.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
function Example() {
return (
diff --git a/frontend/demo/component/textfield/react/text-field-styles.tsx b/frontend/demo/component/textfield/react/text-field-styles.tsx
index acb1b96444..756a8abebd 100644
--- a/frontend/demo/component/textfield/react/text-field-styles.tsx
+++ b/frontend/demo/component/textfield/react/text-field-styles.tsx
@@ -1,6 +1,6 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { TextField } from '@vaadin/react-components/TextField.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
function Example() {
return (
diff --git a/frontend/demo/component/textfield/react/text-field-validation.tsx b/frontend/demo/component/textfield/react/text-field-validation.tsx
index 0cecc4b2ea..b61f862eba 100644
--- a/frontend/demo/component/textfield/react/text-field-validation.tsx
+++ b/frontend/demo/component/textfield/react/text-field-validation.tsx
@@ -1,6 +1,6 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { TextField } from '@vaadin/react-components/TextField.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
function Example() {
return (
diff --git a/frontend/demo/component/timepicker/react/time-picker-auto-open.tsx b/frontend/demo/component/timepicker/react/time-picker-auto-open.tsx
index cb99955842..33cf9015c5 100644
--- a/frontend/demo/component/timepicker/react/time-picker-auto-open.tsx
+++ b/frontend/demo/component/timepicker/react/time-picker-auto-open.tsx
@@ -1,6 +1,6 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { TimePicker } from '@vaadin/react-components/TimePicker.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
const Example = () => (
// tag::snippet[]
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..9736f8a7bc 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 { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+import '@vaadin/icons';
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';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
function Example() {
return (
diff --git a/frontend/demo/component/timepicker/react/time-picker-basic.tsx b/frontend/demo/component/timepicker/react/time-picker-basic.tsx
index 7e0c494d2e..2ac4b1f647 100644
--- a/frontend/demo/component/timepicker/react/time-picker-basic.tsx
+++ b/frontend/demo/component/timepicker/react/time-picker-basic.tsx
@@ -1,6 +1,6 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { TimePicker } from '@vaadin/react-components/TimePicker.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
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..0ca840a46c 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 { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import AppointmentModel from 'Frontend/generated/com/vaadin/demo/domain/AppointmentModel';
function Example() {
diff --git a/frontend/demo/component/timepicker/react/time-picker-minutes-step.tsx b/frontend/demo/component/timepicker/react/time-picker-minutes-step.tsx
index 2fac50ed3d..f303a2b071 100644
--- a/frontend/demo/component/timepicker/react/time-picker-minutes-step.tsx
+++ b/frontend/demo/component/timepicker/react/time-picker-minutes-step.tsx
@@ -1,6 +1,6 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { TimePicker } from '@vaadin/react-components/TimePicker.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
function Example() {
return (
diff --git a/frontend/demo/component/timepicker/react/time-picker-readonly-and-disabled.tsx b/frontend/demo/component/timepicker/react/time-picker-readonly-and-disabled.tsx
index 6b69b5bb97..2106fd2e6c 100644
--- a/frontend/demo/component/timepicker/react/time-picker-readonly-and-disabled.tsx
+++ b/frontend/demo/component/timepicker/react/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 { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
import { TimePicker } from '@vaadin/react-components/TimePicker.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
function Example() {
return (
diff --git a/frontend/demo/component/timepicker/react/time-picker-seconds-step.tsx b/frontend/demo/component/timepicker/react/time-picker-seconds-step.tsx
index d647c2ca64..b0df7a2825 100644
--- a/frontend/demo/component/timepicker/react/time-picker-seconds-step.tsx
+++ b/frontend/demo/component/timepicker/react/time-picker-seconds-step.tsx
@@ -1,6 +1,6 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { TimePicker } from '@vaadin/react-components/TimePicker.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
function Example() {
return (
diff --git a/frontend/demo/component/timepicker/react/time-picker-styles.tsx b/frontend/demo/component/timepicker/react/time-picker-styles.tsx
index dd3eb71e55..941645e96e 100644
--- a/frontend/demo/component/timepicker/react/time-picker-styles.tsx
+++ b/frontend/demo/component/timepicker/react/time-picker-styles.tsx
@@ -1,6 +1,6 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { TimePicker } from '@vaadin/react-components/TimePicker.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
function Example() {
return (
diff --git a/frontend/demo/component/timepicker/react/time-picker-validation.tsx b/frontend/demo/component/timepicker/react/time-picker-validation.tsx
index d252a7ed39..81fab2209c 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 { useSignals } from '@preact/signals-react/runtime'; // 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 type { TimePickerChangeEvent } from '@vaadin/react-components/TimePicker.js';
+import { TimePicker } from '@vaadin/react-components/TimePicker.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
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..df0e6a91a6 100644
--- a/frontend/demo/component/tooltip/react/tooltip-basic.tsx
+++ b/frontend/demo/component/tooltip/react/tooltip-basic.tsx
@@ -1,9 +1,9 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+import '@vaadin/vaadin-lumo-styles/vaadin-iconset';
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';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
function Example() {
return (
diff --git a/frontend/demo/component/tooltip/react/tooltip-html-element.tsx b/frontend/demo/component/tooltip/react/tooltip-html-element.tsx
index 00ee9a4ac5..2bcdf49a72 100644
--- a/frontend/demo/component/tooltip/react/tooltip-html-element.tsx
+++ b/frontend/demo/component/tooltip/react/tooltip-html-element.tsx
@@ -1,6 +1,6 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { Tooltip } from '@vaadin/react-components/Tooltip.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
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..b92af5c10f 100644
--- a/frontend/demo/component/tooltip/react/tooltip-manual.tsx
+++ b/frontend/demo/component/tooltip/react/tooltip-manual.tsx
@@ -1,12 +1,12 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+import '@vaadin/icons';
+import { useSignals } from '@preact/signals-react/runtime'; // 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 { 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';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
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..d4a46eed0a 100644
--- a/frontend/demo/component/tooltip/react/tooltip-positioning.tsx
+++ b/frontend/demo/component/tooltip/react/tooltip-positioning.tsx
@@ -1,12 +1,12 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+import '@vaadin/icons';
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';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
function Example() {
return (
diff --git a/frontend/demo/component/tree-grid/react/tree-grid-basic.tsx b/frontend/demo/component/tree-grid/react/tree-grid-basic.tsx
index edd8e9c8e5..1080b462d6 100644
--- a/frontend/demo/component/tree-grid/react/tree-grid-basic.tsx
+++ b/frontend/demo/component/tree-grid/react/tree-grid-basic.tsx
@@ -1,4 +1,3 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import {
Grid,
@@ -8,6 +7,7 @@ import {
import { GridColumn } from '@vaadin/react-components/GridColumn.js';
import { GridTreeColumn } from '@vaadin/react-components/GridTreeColumn.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
// tag::snippet[]
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..dac1418520 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,7 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+import { useSignals } from '@preact/signals-react/runtime'; // 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 { Button } from '@vaadin/react-components/Button.js';
import {
Grid,
type GridDataProviderCallback,
@@ -9,10 +9,10 @@ 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 { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+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..bc661a1ffb 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 { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+import '@vaadin/icons';
+import { useSignals } from '@preact/signals-react/runtime'; // 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 { 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 { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+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..5022f4d06a 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 { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
import React, { useMemo, useRef } from 'react';
+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 { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
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..5be9f4a556 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 { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import React, { useEffect, useRef } from 'react';
+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 { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
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..011c66b454 100644
--- a/frontend/demo/component/upload/react/upload-auto-upload-disabled.tsx
+++ b/frontend/demo/component/upload/react/upload-auto-upload-disabled.tsx
@@ -1,8 +1,8 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import React, { useRef, useEffect } from 'react';
-import { useComputed } from '@vaadin/hilla-react-signals';
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import React, { useEffect, useRef } from 'react';
+import { useComputed } from '@vaadin/hilla-react-signals';
import { Upload, type UploadElement } from '@vaadin/react-components/Upload.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import { createFakeFilesUploadAutoUploadDisabled } from './upload-demo-mock-files';
function Example() {
diff --git a/frontend/demo/component/upload/react/upload-basic.tsx b/frontend/demo/component/upload/react/upload-basic.tsx
index 5e6d1478ef..32861a02e9 100644
--- a/frontend/demo/component/upload/react/upload-basic.tsx
+++ b/frontend/demo/component/upload/react/upload-basic.tsx
@@ -1,8 +1,8 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+import { useSignals } from '@preact/signals-react/runtime'; // 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 { Upload } from '@vaadin/react-components/Upload.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import { createFakeFilesUploadBasic } from './upload-demo-mock-files';
function Example() {
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..fc30ba84c1 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';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
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..45a8a9c789 100644
--- a/frontend/demo/component/upload/react/upload-clear-button.tsx
+++ b/frontend/demo/component/upload/react/upload-clear-button.tsx
@@ -1,8 +1,8 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+import { useSignals } from '@preact/signals-react/runtime'; // 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 { Upload } from '@vaadin/react-components/Upload.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import { createFakeUploadFiles } from './upload-demo-helpers';
function createFakeFiles() {
diff --git a/frontend/demo/component/upload/react/upload-drag-and-drop.tsx b/frontend/demo/component/upload/react/upload-drag-and-drop.tsx
index 5fcb06055d..f28e1f4884 100644
--- a/frontend/demo/component/upload/react/upload-drag-and-drop.tsx
+++ b/frontend/demo/component/upload/react/upload-drag-and-drop.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 { Upload } from '@vaadin/react-components/Upload.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
const layoutSteps: FormLayoutResponsiveStep[] = [
{ minWidth: 0, columns: 1, labelsPosition: 'top' },
diff --git a/frontend/demo/component/upload/react/upload-drop-label.tsx b/frontend/demo/component/upload/react/upload-drop-label.tsx
index 8e5f4c9ddf..f0a0f46cbe 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 { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+import '@vaadin/icons';
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';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
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..f7bb4fd53d 100644
--- a/frontend/demo/component/upload/react/upload-error-messages.tsx
+++ b/frontend/demo/component/upload/react/upload-error-messages.tsx
@@ -1,9 +1,9 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+import { useSignals } from '@preact/signals-react/runtime'; // 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 { FormLayout, type FormLayoutResponsiveStep } from '@vaadin/react-components/FormLayout.js';
import { Upload, type UploadElement } from '@vaadin/react-components/Upload.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import {
createFakeFilesUploadErrorMessagesA,
createFakeFilesUploadErrorMessagesB,
diff --git a/frontend/demo/component/upload/react/upload-file-count.tsx b/frontend/demo/component/upload/react/upload-file-count.tsx
index 3a6de50d08..3aad0f7a28 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';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
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..4e80dcc7c1 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';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
function Example() {
return (
diff --git a/frontend/demo/component/upload/react/upload-file-size.tsx b/frontend/demo/component/upload/react/upload-file-size.tsx
index 6dab15bd51..b38e4a1100 100644
--- a/frontend/demo/component/upload/react/upload-file-size.tsx
+++ b/frontend/demo/component/upload/react/upload-file-size.tsx
@@ -1,7 +1,7 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { Notification } from '@vaadin/react-components/Notification.js';
import { Upload } from '@vaadin/react-components/Upload.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
function Example() {
// tag::snippet[]
diff --git a/frontend/demo/component/upload/react/upload-helper.tsx b/frontend/demo/component/upload/react/upload-helper.tsx
index 5dc498f6e7..6af356b90d 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';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
function Example() {
const maxFileSizeInMB = 1;
diff --git a/frontend/demo/component/upload/react/upload-internationalization.tsx b/frontend/demo/component/upload/react/upload-internationalization.tsx
index c0d1c605db..9920447c1f 100644
--- a/frontend/demo/component/upload/react/upload-internationalization.tsx
+++ b/frontend/demo/component/upload/react/upload-internationalization.tsx
@@ -1,6 +1,6 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { Upload } from '@vaadin/react-components/Upload.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
function Example() {
// tag::snippet[]
diff --git a/frontend/demo/component/upload/react/upload-labelling.tsx b/frontend/demo/component/upload/react/upload-labelling.tsx
index 69e3ff613e..1b825fdcb4 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';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
const fileRejectHandler = (event: UploadFileRejectEvent) => {
Notification.show(event.detail.error);
diff --git a/frontend/demo/component/upload/react/upload-retry-button.tsx b/frontend/demo/component/upload/react/upload-retry-button.tsx
index 4afd6714b6..b880f91de5 100644
--- a/frontend/demo/component/upload/react/upload-retry-button.tsx
+++ b/frontend/demo/component/upload/react/upload-retry-button.tsx
@@ -1,6 +1,6 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { Upload } from '@vaadin/react-components/Upload.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import { createFakeUploadFiles } from './upload-demo-helpers';
function createFakeFiles() {
diff --git a/frontend/demo/component/upload/react/upload-start-button.tsx b/frontend/demo/component/upload/react/upload-start-button.tsx
index 511087cd96..6c1f95b916 100644
--- a/frontend/demo/component/upload/react/upload-start-button.tsx
+++ b/frontend/demo/component/upload/react/upload-start-button.tsx
@@ -1,8 +1,8 @@
-import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+import { useSignals } from '@preact/signals-react/runtime'; // 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 { Upload } from '@vaadin/react-components/Upload.js';
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import { createFakeUploadFiles } from './upload-demo-helpers';
function createFakeFiles() {