@public-ui/sample-react 4.0.0-alpha.2 → 4.0.0-alpha.4

package/src/components/select/basic.tsx

@@ -2,8 +2,8 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { FormWrap } from '../FormWrap';
-import { SelectVariants } from './partials/variants';
 import { SampleDescription } from '../SampleDescription';
+import { SelectVariants } from './partials/variants';
 
 export const SelectBasic: FC = () => (
 	<>

package/src/components/single-select/basic.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import type { FC } from 'react';
+import React from 'react';
 import { FormWrap } from '../FormWrap';
 import { SampleDescription } from '../SampleDescription';
 import { SingleSelectVariants } from './partials/variants';

package/src/components/single-select/partials/cases.tsx

@@ -4,9 +4,8 @@ import { KolSingleSelect } from '@public-ui/react-v19';
 
 import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 
-import type { Option, StencilUnknown } from '@public-ui/components';
+import type { Components, Option, StencilUnknown } from '@public-ui/components';
 import { COUNTRY_OPTIONS } from '../../../shares/country';
-import type { Components } from '@public-ui/components';
 import { LONG_OPTIONS } from '../../../shares/longOptions';
 
 export const SingleSelectCases = (props: Components.KolSingleSelect) => {

package/src/components/single-select/partials/variants.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import { SingleSelectCases } from './cases';
 import type { Components } from '@public-ui/components';
 import { SampleColumns } from '../../SampleColumns';
+import { SingleSelectCases } from './cases';
 
 export const SingleSelectVariants = (props: Components.KolSingleSelect) => {
 	return (

package/src/components/spin/custom.tsx

@@ -1,5 +1,5 @@
-import './custom.css';
 import { SampleDescription } from '../SampleDescription';
+import './custom.css';
 
 import React from 'react';
 

package/src/components/spin/label.tsx

@@ -1,6 +1,6 @@
-import React, { useEffect, useState } from 'react';
 import { KolSpin } from '@public-ui/react-v19';
 import type { FC } from 'react';
+import React, { useEffect, useState } from 'react';
 import { SampleDescription } from '../SampleDescription';
 
 export const SpinLabel: FC = () => {

package/src/components/split-button/basic.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
 import { KolSplitButton, KolToolbar } from '@public-ui/react-v19';
-import { SampleDescription } from '../SampleDescription';
 import { useToasterService } from '../../hooks/useToasterService';
+import { SampleDescription } from '../SampleDescription';
 
 import type { FC } from 'react';
 

package/src/components/table/complex-headers.tsx

@@ -1,6 +1,6 @@
+import { KolTableStateful } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
-import { KolTableStateful } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 export const TableComplexHeaders: FC = () => (

package/src/components/table/horizontal-scrollbar.tsx

@@ -5,8 +5,8 @@ import { KolHeading, KolInputCheckbox, KolTableStateful } from '@public-ui/react
 
 import { SampleDescription } from '../SampleDescription';
 import { DATE_FORMATTER } from './formatter';
-import { DATA as tableData } from './test-data';
 import type { Data } from './test-data';
+import { DATA as tableData } from './test-data';
 
 import type { KoliBriTableHeaders } from '@public-ui/components';
 

package/src/components/table/interactive-child-elements.tsx

@@ -2,9 +2,9 @@ import type { ButtonProps, ButtonVariantPropType, KoliBriTableCell, KoliBriTable
 import { createReactRenderElement, KolButton, KolButtonLink, KolLink, KolLinkButton, KolTableStateless } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
+import { useToasterService } from '../../hooks/useToasterService';
 import { getRoot } from '../../shares/react-roots';
 import { SampleDescription } from '../SampleDescription';
-import { useToasterService } from '../../hooks/useToasterService';
 
 function KolButtonWrapper({ _on, ...other }: ButtonProps) {
 	const { dummyClickEventHandler } = useToasterService();

package/src/components/table/multi-sort.tsx

@@ -1,11 +1,11 @@
 import type { FC } from 'react';
 import React, { useState } from 'react';
 
+import type { KoliBriTableDataType, KoliBriTableHeaders } from '@public-ui/components';
 import { KolHeading, KolInputCheckbox, KolTableStateful } from '@public-ui/react-v19';
-import type { KoliBriTableHeaders, KoliBriTableDataType } from '@public-ui/components';
+import { SampleDescription } from '../SampleDescription';
 import type { Data } from './test-data';
 import { DATA } from './test-data';
-import { SampleDescription } from '../SampleDescription';
 
 const DATE_FORMATTER = Intl.DateTimeFormat('de-DE', {
 	day: '2-digit',

package/src/components/table/predefined-settings.tsx

@@ -1,7 +1,7 @@
-import { SampleDescription } from '../SampleDescription';
 import { KolTableStateful } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 const DATA = [{ columnA: 'Column A', columnB: 'Column B', columnC: 'Column C' }];
 

package/src/components/table/sort-data.tsx

@@ -1,11 +1,11 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolHeading, KolTableStateful } from '@public-ui/react-v19';
 import type { KoliBriTableHeaders } from '@public-ui/components';
+import { KolHeading, KolTableStateful } from '@public-ui/react-v19';
+import { SampleDescription } from '../SampleDescription';
 import type { Data } from './test-data';
 import { DATA } from './test-data';
-import { SampleDescription } from '../SampleDescription';
 
 const DATE_FORMATTER = Intl.DateTimeFormat('de-DE', {
 	day: '2-digit',

package/src/components/table/stateful-with-selection.tsx

@@ -1,11 +1,11 @@
-import type { FC } from 'react';
-import React, { useEffect, useRef, useState } from 'react';
-import { createReactRenderElement, KolButton, KolTableStateful } from '@public-ui/react-v19';
-import { SampleDescription } from '../SampleDescription';
 import type { KoliBriTableCell, KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';
 import { KolEvent } from '@public-ui/components';
-import { getRoot } from '../../shares/react-roots';
+import { createReactRenderElement, KolButton, KolTableStateful } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useToasterService } from '../../hooks/useToasterService';
+import { getRoot } from '../../shares/react-roots';
+import { SampleDescription } from '../SampleDescription';
 
 const DATA = [
 	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },

package/src/components/table/stateful-with-single-selection.tsx

@@ -1,11 +1,11 @@
-import type { FC } from 'react';
-import React, { useEffect, useRef, useState } from 'react';
-import { createReactRenderElement, KolButton, KolTableStateful } from '@public-ui/react-v19';
-import { SampleDescription } from '../SampleDescription';
 import type { KoliBriTableCell, KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';
 import { KolEvent } from '@public-ui/components';
-import { getRoot } from '../../shares/react-roots';
+import { createReactRenderElement, KolButton, KolTableStateful } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useToasterService } from '../../hooks/useToasterService';
+import { getRoot } from '../../shares/react-roots';
+import { SampleDescription } from '../SampleDescription';
 
 const DATA = [
 	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },

package/src/components/table/stateless-with-settings-menu.tsx

@@ -1,6 +1,6 @@
+import { KolTableStateless } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
-import { KolTableStateless } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 type Data = {

package/src/components/table/stateless.tsx

@@ -1,6 +1,6 @@
+import { KolTableStateless } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
-import { KolTableStateless } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 const DATA = [{ left: 'Left Example', center: 'Center Example', right: 'Right Example' }, {}, {}, {}];

package/src/components/table/sticky-header.tsx

@@ -1,8 +1,8 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolHeading, KolTableStateful } from '@public-ui/react-v19';
 import type { KoliBriTableHeaders } from '@public-ui/components';
+import { KolHeading, KolTableStateful } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 import { COMPLEX_DATA } from './test-complex-data';
 

package/src/components/table/with-footer.tsx

@@ -1,6 +1,6 @@
+import { KolTableStateful } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
-import { KolTableStateful } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 export const TableWithFooter: FC = () => (

package/src/components/table/with-pagination.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 
 import { KolTableStateful } from '@public-ui/react-v19';
 
-import { DATE_FORMATTER } from './formatter';
 import { SampleDescription } from '../SampleDescription';
+import { DATE_FORMATTER } from './formatter';
 import type { Data } from './test-data';
 import { DATA } from './test-data';
 

package/src/components/tabs/align.tsx

@@ -1,9 +1,9 @@
 import type { FC } from 'react';
 import React from 'react';
 
+import type { AlignPropType } from '@public-ui/components';
 import { KolHeading, KolTabs } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
-import type { AlignPropType } from '@public-ui/components';
 
 const tabs = [
 	{

package/src/components/tabs/create-button.tsx

@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
-import type { FC } from 'react';
 import { KolTabs } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React, { useState } from 'react';
 import { SampleDescription } from '../SampleDescription';
 
 export const CreateButton: FC = () => {

package/src/components/tabs/routes.ts

@@ -1,9 +1,9 @@
 import { Routes } from '../../shares/types';
-import { TabsBasic } from './basic';
 import { TabsAlign } from './align';
-import { TabsIconsOnly } from './icons-only';
+import { TabsBasic } from './basic';
 import { TabsBehavior } from './behavior';
 import { CreateButton } from './create-button';
+import { TabsIconsOnly } from './icons-only';
 
 export const TABS_ROUTES: Routes = {
 	tabs: {

package/src/components/textarea/basic.tsx

@@ -2,8 +2,8 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { FormWrap } from '../FormWrap';
-import { TextareaVariants } from './partials/variants';
 import { SampleDescription } from '../SampleDescription';
+import { TextareaVariants } from './partials/variants';
 
 export const TextareaBasic: FC = () => (
 	<>

package/src/components/textarea/partials/cases.tsx

@@ -1,6 +1,6 @@
-import React, { forwardRef } from 'react';
-import { KolTextarea } from '@public-ui/react-v19';
 import type { Components } from '@public-ui/components';
+import { KolTextarea } from '@public-ui/react-v19';
+import React, { forwardRef } from 'react';
 
 import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 

package/src/components/textarea/routes.ts

@@ -1,9 +1,9 @@
 import { Routes } from '../../shares/types';
 import { TextareaAdjustHeight } from './adjust-height';
 import { TextareaBasic } from './basic';
-import { TextareaWithCounter } from './with-counter';
 import { TextareaResize } from './resize';
 import { TextareaRows } from './rows';
+import { TextareaWithCounter } from './with-counter';
 
 export const TEXTAREA_ROUTES: Routes = {
 	textarea: {

package/src/components/toast/basic.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
+import type { AlertTypePropType } from '@public-ui/components';
 import { ToasterService } from '@public-ui/components';
 import { KolButton } from '@public-ui/react-v19';
-import type { AlertTypePropType } from '@public-ui/components';
 
 import { getRoot } from '../../shares/react-roots';
 import { SampleDescription } from '../SampleDescription';

package/src/components/toolbar/basic.tsx

@@ -1,6 +1,6 @@
+import { KolHeading, KolToolbar } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
-import { KolHeading, KolToolbar } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 export const ToolbarBasic: FC = () => {

package/src/components/toolbar/disabled.tsx

@@ -1,6 +1,6 @@
+import { KolToolbar } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
-import { KolToolbar } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 export const ToolbarDisabled: FC = () => {

package/src/components/tree/basic.tsx

@@ -1,9 +1,9 @@
+import { KolButton, KolTree, KolTreeItem } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React, { useContext, useState } from 'react';
-import { KolButton, KolTree, KolTreeItem } from '@public-ui/react-v19';
-import { getRandomEmoji } from '../../shares/randomEmoji';
 import { useParams } from 'react-router';
 import { HideMenusContext } from '../../shares/HideMenusContext';
+import { getRandomEmoji } from '../../shares/randomEmoji';
 import { SampleDescription } from '../SampleDescription';
 
 export const TreeBasic: FC = () => {

package/src/scenarios/appointment-form/AppointmentForm.tsx

@@ -1,5 +1,5 @@
 import { Formik } from 'formik';
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import * as Yup from 'yup';
 
 import { KolLink, KolTabs } from '@public-ui/react-v19';
@@ -10,8 +10,8 @@ import { DistrictForm } from './DistrictForm';
 import { PersonalInformationForm } from './PersonalInformationForm';
 import { Summary } from './Summary';
 
-import type { FormikHelpers, FormikProps } from 'formik';
 import type { Iso8601 } from '@public-ui/components';
+import type { FormikHelpers, FormikProps } from 'formik';
 import { SampleDescription } from '../../components/SampleDescription';
 // export interface FormProps {}
 export interface FormValues {

package/src/scenarios/appointment-form/AvailableAppointmentsForm.tsx

@@ -1,13 +1,13 @@
 import { Field, useFormikContext } from 'formik';
-import React, { useEffect, useState, useRef, useCallback } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 
 import { KolButton, KolForm, KolHeading, KolInputDate, KolInputRadio, KolSpin } from '@public-ui/react-v19';
 
 import { fetchAvailableTimes } from './appointmentService';
 
-import type { FormValues } from './AppointmentForm';
-import type { FieldProps, FieldInputProps } from 'formik';
 import type { Option } from '@public-ui/components';
+import type { FieldInputProps, FieldProps } from 'formik';
+import type { FormValues } from './AppointmentForm';
 import { createErrorList, focusErrorList } from './formUtils';
 
 export function AvailableAppointmentsForm() {

package/src/scenarios/appointment-form/DistrictForm.tsx

@@ -1,5 +1,5 @@
 import { Field, useFormikContext } from 'formik';
-import React, { useState, useRef } from 'react';
+import React, { useRef, useState } from 'react';
 
 import { KolButton, KolForm, KolHeading, KolSelect } from '@public-ui/react-v19';
 

package/src/scenarios/appointment-form/PersonalInformationForm.tsx

@@ -1,5 +1,5 @@
 import { Field, useFormikContext } from 'formik';
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import { KolButton, KolForm, KolHeading, KolInputEmail, KolInputText, KolSelect } from '@public-ui/react-v19';
 

package/src/scenarios/change-tabindex.tsx

@@ -1,32 +1,32 @@
 /* eslint-disable jsx-a11y/tabindex-no-positive */
 
-import { SampleDescription } from '../components/SampleDescription';
+import type { Option, StencilUnknown } from '@public-ui/components';
 import {
 	KolButton,
 	KolButtonLink,
 	KolCard,
 	KolCombobox,
 	KolInputCheckbox,
+	KolInputColor,
 	KolInputDate,
 	KolInputEmail,
 	KolInputFile,
-	KolInputColor,
 	KolInputNumber,
 	KolInputPassword,
 	KolInputRadio,
 	KolInputRange,
 	KolInputText,
-	KolLinkButton,
 	KolLink,
+	KolLinkButton,
 	KolSingleSelect,
 	KolSplitButton,
 	KolTextarea,
 } from '@public-ui/react-v19';
-import React from 'react';
 import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../components/SampleDescription';
 import { ERROR_MSG, HINT_MSG } from '../shares/constants';
 import { COUNTRY_OPTIONS, COUNTRY_SUGGESTIONS } from '../shares/country';
-import type { Option, StencilUnknown } from '@public-ui/components';
 
 export const ChangeTabindex: FC = () => {
 	return (

package/src/scenarios/focus-elements.tsx

@@ -1,3 +1,4 @@
+import type { FocusableElement } from '@public-ui/components';
 import {
 	KolAccordion,
 	KolAlert,
@@ -23,11 +24,9 @@ import {
 	KolTextarea,
 } from '@public-ui/react-v19';
 import type { FC, ForwardRefRenderFunction } from 'react';
-import { useMemo } from 'react';
-import React, { forwardRef, useLayoutEffect, useRef } from 'react';
+import React, { forwardRef, useLayoutEffect, useMemo, useRef } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { SampleDescription } from '../components/SampleDescription';
-import type { FocusableElement } from '@public-ui/components';
 
 const getFocusElements = () => {
 	const focusElements = new Map<string, ForwardRefRenderFunction<any, any>>();

package/src/scenarios/horizontal-scrollbar-advanced/TableHorizontalScrollbarAdvanced.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
-import { KolTableStateful, KolTabs, KolNav } from '@public-ui/react-v19';
 import type { KoliBriTableHeaders, TabButtonProps } from '@public-ui/components';
+import { KolNav, KolTableStateful, KolTabs } from '@public-ui/react-v19';
+import * as React from 'react';
 import { SampleDescription } from '../../components/SampleDescription';
 import { LINKS } from '../../components/nav/links';
 import DATA from './databasedata.json';

package/src/scenarios/input-group-with-error.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
-import type { FC } from 'react';
+import type { SelectOption } from '@public-ui/components';
 import { KolAlert, KolInputCheckbox, KolInputText, KolSelect } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
 import { SampleDescription } from '../components/SampleDescription';
-import type { SelectOption } from '@public-ui/components';
 
 export const InputGroupWithError: FC = () => {
 	const phoneError = true;

package/src/scenarios/inputs-get-value.tsx

@@ -5,6 +5,7 @@ import {
 	KolButton,
 	KolButtonLink,
 	KolCard,
+	KolCombobox,
 	KolInputCheckbox,
 	KolInputColor,
 	KolInputDate,
@@ -17,15 +18,14 @@ import {
 	KolInputText,
 	KolSelect,
 	KolSingleSelect,
-	KolCombobox,
 	KolTextarea,
 } from '@public-ui/react-v19';
 
 import { SampleDescription } from '../components/SampleDescription';
 import { COUNTRY_SUGGESTIONS } from '../shares/country';
 
-import type { HTMLStencilElement } from '@stencil/core/internal';
 import type { W3CInputValue } from '@public-ui/components';
+import type { HTMLStencilElement } from '@stencil/core/internal';
 
 const EventTargetContext = createContext<EventTarget | undefined>(undefined);
 const EventLoggerActiveContext = createContext<boolean>(false);

package/src/scenarios/react-hook-form/basic.tsx

@@ -1,24 +1,24 @@
-import type { FC } from 'react';
-import React from 'react';
-import type { SubmitHandler, FieldErrors } from 'react-hook-form';
-import { useForm } from 'react-hook-form';
 import {
-	KolInputTextController,
-	KolInputPasswordController,
+	KolComboboxController,
+	KolInputCheckboxController,
+	KolInputColorController,
+	KolInputDateController,
 	KolInputEmailController,
+	KolInputFileController,
 	KolInputNumberController,
+	KolInputPasswordController,
+	KolInputRadioController,
 	KolInputRangeController,
-	KolInputDateController,
-	KolInputColorController,
-	KolInputFileController,
-	KolTextareaController,
-	KolComboboxController,
+	KolInputTextController,
 	KolSelectController,
 	KolSingleSelectController,
-	KolInputRadioController,
-	KolInputCheckboxController,
+	KolTextareaController,
 } from '@public-ui/react-hook-form-adapter';
 import { KolButton } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import type { FieldErrors, SubmitHandler } from 'react-hook-form';
+import { useForm } from 'react-hook-form';
 
 import { SampleDescription } from '../../components/SampleDescription';
 import { COUNTRY_SUGGESTIONS } from '../../shares/country';

package/src/scenarios/routes.ts

@@ -3,16 +3,16 @@ import { ChangeTabindex } from './change-tabindex';
 import { CustomTooltipWidth } from './custom-tooltip-width';
 import { DisabledInteractiveElements } from './disabled-interactive-elements';
 import { FocusElements } from './focus-elements';
+import { TableHorizontalScrollAdvanced } from './horizontal-scrollbar-advanced';
 import { InputGroupWithError } from './input-group-with-error';
 import { InputsGetValue } from './inputs-get-value';
 import { PerformanceTest } from './performance-test';
+import { RHFBasic } from './react-hook-form/basic';
 import { SameHeightOfAllInteractiveElements } from './same-height-of-all-interactive-elements';
-import { StaticForm } from './static-form';
 import { SampleFormWithValidation } from './sample-form-with-validation';
-import { TableHorizontalScrollAdvanced } from './horizontal-scrollbar-advanced';
+import { StaticForm } from './static-form';
 import { ToolbarItemOrder } from './toolbar-item-order';
 import { TooltipPositioning } from './tooltip-positioning';
-import { RHFBasic } from './react-hook-form/basic';
 
 export const SCENARIO_ROUTES: Routes = {
 	scenarios: {

package/src/scenarios/sample-form-with-validation.tsx

@@ -1,10 +1,14 @@
+import { zodResolver } from '@hookform/resolvers/zod';
 import React from 'react';
-import { useForm } from 'react-hook-form';
 import type { FieldError } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
 import {
+	KolAlert,
+	KolButton,
+	KolCombobox,
+	KolHeading,
 	KolInputCheckbox,
 	KolInputColor,
 	KolInputDate,
@@ -14,19 +18,15 @@ import {
 	KolInputRadio,
 	KolInputRange,
 	KolInputText,
+	KolLink,
 	KolSelect,
 	KolSingleSelect,
-	KolCombobox,
 	KolTextarea,
-	KolButton,
-	KolHeading,
-	KolAlert,
-	KolLink,
 } from '@public-ui/react-v19';
 
 import { SampleDescription } from '../components/SampleDescription';
-import { COUNTRY_SUGGESTIONS } from '../shares/country';
 import { useToasterService } from '../hooks/useToasterService';
+import { COUNTRY_SUGGESTIONS } from '../shares/country';
 
 const formSchema = z.object({
 	date: z.preprocess(

package/src/scenarios/static-form.tsx

@@ -1,5 +1,7 @@
 import {
 	KolButton,
+	KolCombobox,
+	KolHeading,
 	KolInputCheckbox,
 	KolInputColor,
 	KolInputDate,
@@ -12,9 +14,7 @@ import {
 	KolInputText,
 	KolSelect,
 	KolSingleSelect,
-	KolCombobox,
 	KolTextarea,
-	KolHeading,
 } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';

package/src/scenarios/toolbar-item-order.tsx

@@ -1,7 +1,7 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import type { FC } from 'react';
 import type { ToolbarItemsPropType } from '@public-ui/components';
 import { KolHeading, KolToolbar } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 
 export const ToolbarItemOrder: FC = () => {
 	const [isSubmitting, setIsSubmitting] = useState(false);

package/src/scenarios/tooltip-positioning.tsx

@@ -1,6 +1,6 @@
+import { KolPopoverButton } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
-import { KolPopoverButton } from '@public-ui/react-v19';
 import { SampleDescription } from '../components/SampleDescription';
 
 export const TooltipPositioning: FC = () => {