refactor: sort imports in React examples (3)

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 (

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 (

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 (

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() {

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() {

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() {

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 (

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() {

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 (

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 (

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 (

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

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 (

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() {

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 (

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 (

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[]

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 (

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 = {

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

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() {

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() {

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() {

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[]

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 (

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() {

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

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

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[]

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[]

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[]

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[]

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 = [

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[]

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 <Icon icon={`vaadin:${iconName}`} aria-label={ariaLabel} />;

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 = {

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 = [

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[]

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[]