@public-ui/sample-react 3.0.7-rc.0 → 3.0.7-rc.6

package/src/components/button/routes.ts

@@ -3,11 +3,11 @@ import { ButtonAccessKey } from './access-key';
 import { ButtonAriaDescription } from './aria-description';
 import { ButtonBaselined } from './baselined';
 import { ButtonBasic } from './basic';
-import { ButtonIcons } from './icons';
-import { ButtonWidth } from './width';
-import { ButtonShortKey } from './short-key';
 import { ButtonExpertSlot } from './expert-slot';
+import { ButtonIcons } from './icons';
 import { ButtonRowReverseTooltip } from './row-reverse-tooltip';
+import { ButtonShortKey } from './short-key';
+import { ButtonWidth } from './width';
 
 export const BUTTON_ROUTES: Routes = {
 	button: {

package/src/components/button/row-reverse-tooltip.tsx

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

package/src/components/button/short-key.tsx

@@ -1,12 +1,11 @@
+import type { KoliBriTableHeaders } from '@public-ui/components';
+import { ToasterService } from '@public-ui/components';
 import { createReactRenderElement, KolButton, KolHeading, KolTableStateful } from '@public-ui/react-v19';
 import type { FC } from 'react';
-import { useRef } from 'react';
-import React from 'react';
-import { SampleDescription } from '../SampleDescription';
+import React, { useRef } from 'react';
 import { useToasterService } from '../../hooks/useToasterService';
 import { getRoot } from '../../shares/react-roots';
-import type { KoliBriTableHeaders } from '@public-ui/components';
-import { ToasterService } from '@public-ui/components';
+import { SampleDescription } from '../SampleDescription';
 
 const RowActions: FC<{ label: string }> = ({ label }) => {
 	const toaster = ToasterService.getInstance(document);

package/src/components/button/width.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 import { KolButton } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
-import { SampleDescription } from '../SampleDescription';
 import { useToasterService } from '../../hooks/useToasterService';
+import { SampleDescription } from '../SampleDescription';
 
 export const ButtonWidth: FC = () => {
 	const { dummyClickEventHandler } = useToasterService();

package/src/components/button-link/aria-description.tsx

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

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

@@ -3,8 +3,8 @@ import React from 'react';
 import { KolButtonLink, KolHeading } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
-import { SampleDescription } from '../SampleDescription';
 import { useToasterService } from '../../hooks/useToasterService';
+import { SampleDescription } from '../SampleDescription';
 
 export const ButtonLinkBasic: FC = () => {
 	const { dummyClickEventHandler } = useToasterService();

package/src/components/button-link/icons.tsx

@@ -12,7 +12,7 @@ export const ButtonLinkIcons: FC = () => (
 		</SampleDescription>
 
 		<div className="grid gap-4">
-			<KolButtonLink _icons="codicon codicon-home" _label="Ich bin ein Link mit Icon links" />
+			<KolButtonLink _icons="codicon codicon-home" _label="I am a link with an icon on the left" />
 			<KolButtonLink
 				_icons={{
 					right: 'codicon codicon-home',
@@ -40,6 +40,7 @@ export const ButtonLinkIcons: FC = () => (
 				}}
 				_label="I am a link with all icons"
 			/>
+			<KolButtonLink _icons="codicon codicon-home" _hideLabel _label="I am a link with icon only" />
 		</div>
 	</>
 );

package/src/components/button-link/routes.ts

@@ -1,8 +1,8 @@
 import { Routes } from '../../shares/types';
+import { ButtonLinkAriaDescription } from './aria-description';
 import { ButtonLinkBasic } from './basic';
 import { ButtonLinkIcons } from './icons';
 import { ButtonLinkImage } from './image';
-import { ButtonLinkAriaDescription } from './aria-description';
 
 export const BUTTON_LINK_ROUTES: Routes = {
 	'button-link': {

package/src/components/combobox/basic.tsx

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

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

@@ -2,9 +2,9 @@ import React from 'react';
 
 import { KolCombobox } from '@public-ui/react-v19';
 
+import type { Components } from '@public-ui/components';
 import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 import { COUNTRY_SUGGESTIONS } from '../../../shares/country';
-import type { Components } from '@public-ui/components';
 
 export const ComboboxCases = (props: Partial<Components.KolCombobox>) => {
 	return (

package/src/components/combobox/partials/variants.tsx

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

package/src/components/drawer/basic.tsx

@@ -1,9 +1,9 @@
 import type { FC } from 'react';
-import React, { useRef, useState, useEffect } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
 import type { AlignPropType } from '@public-ui/components';
-import { KolDrawer, KolButton, KolInputCheckbox } from '@public-ui/react-v19';
+import { KolButton, KolDrawer, KolInputCheckbox } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 import { DrawerRadioAlign } from './partials/align';

package/src/components/drawer/controlled.tsx

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
 import type { AlignPropType } from '@public-ui/components';
-import { KolDrawer, KolButton } from '@public-ui/react-v19';
+import { KolButton, KolDrawer } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 import { DrawerRadioAlign } from './partials/align';

package/src/components/form/basic.tsx

@@ -1,7 +1,7 @@
+import { KolForm, KolInputText } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
 import { SampleDescription } from '../SampleDescription';
-import { KolForm, KolInputText } from '@public-ui/react-v19';
 
 export const FormBasic: FC = () => (
 	<>

package/src/components/handout/basic.tsx

@@ -1,6 +1,4 @@
 import type { ButtonProps, KoliBriTableHeaders } from '@public-ui/components';
-import type { FC } from 'react';
-import React from 'react';
 import {
 	KolAbbr,
 	KolAccordion,
@@ -34,11 +32,13 @@ import {
 	KolTextarea,
 	KolVersion,
 } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
 
-import { getTheme, getThemeName } from '../../shares/store';
+import { useToasterService } from '../../hooks/useToasterService';
 import { getRoot } from '../../shares/react-roots';
+import { getTheme, getThemeName } from '../../shares/store';
 import { TABLE_DATA, type TableDataType } from './table-data';
-import { useToasterService } from '../../hooks/useToasterService';
 
 function KolButtonWrapper({ _on, ...other }: ButtonProps & { style: Record<string, unknown> }) {
 	const { dummyClickEventHandler } = useToasterService();

package/src/components/image/basic.tsx

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

package/src/components/input-checkbox/basic.tsx

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

package/src/components/input-checkbox/button.tsx

@@ -1,9 +1,9 @@
 import type { FC } from 'react';
 import React from 'react';
 
+import type { Components } from '@public-ui/components';
 import { FormWrap } from '../FormWrap';
 import { SampleDescription } from '../SampleDescription';
-import type { Components } from '@public-ui/components';
 import { InputCheckboxVariants } from './partials/variants';
 
 export const InputCheckboxButton: FC = () => (

package/src/components/input-checkbox/switch.tsx

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

package/src/components/input-color/basic.tsx

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

package/src/components/input-color/partials/cases.tsx

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

package/src/components/input-date/basic.tsx

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

package/src/components/input-date/copy-paste.tsx

@@ -1,5 +1,5 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { KolButton, KolInputDate, KolInputText } from '@public-ui/react-v19';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { SampleDescription } from '../SampleDescription';
 
 /** -----------------------------

package/src/components/input-date/partials/cases.tsx

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

package/src/components/input-date/partials/minMax.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import { KolInputDate } from '@public-ui/react-v19';
 import type { Components } from '@public-ui/components';
+import { KolInputDate } from '@public-ui/react-v19';
+import React from 'react';
 
 export const InputDateMinMaxCases = (props: Components.KolInputDate) => {
 	const minDateIso = '2024-09-26';

package/src/components/input-date/partials/variants.tsx

@@ -3,8 +3,8 @@ import React, { forwardRef } from 'react';
 import { InputDateCases } from './cases';
 
 import type { Components } from '@public-ui/components';
-import { InputDateMinMaxCases } from './minMax';
 import { SampleColumns } from '../../SampleColumns';
+import { InputDateMinMaxCases } from './minMax';
 export const InputDateVariants = forwardRef<HTMLKolInputDateElement, Components.KolInputDate>(function InputDateVariant(props, ref) {
 	return (
 		<SampleColumns>

package/src/components/input-date/reset.tsx

@@ -1,5 +1,5 @@
-import React, { useRef } from 'react';
 import { KolButton, KolInputDate } from '@public-ui/react-v19';
+import React, { useRef } from 'react';
 import { SampleDescription } from '../SampleDescription';
 
 export const InputDateReset = () => {

package/src/components/input-date/routes.ts

@@ -1,8 +1,8 @@
 import { Routes } from '../../shares/types';
 import { InputDateBasic } from './basic';
+import { InputDateCopyPaste } from './copy-paste';
 import { InputDateReset } from './reset';
 import { InputDateShowHideMsg } from './show-hide-msg';
-import { InputDateCopyPaste } from './copy-paste';
 
 export const INPUT_DATE_ROUTES: Routes = {
 	'input-date': {

package/src/components/input-email/basic.tsx

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

package/src/components/input-email/partials/cases.tsx

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

package/src/components/input-file/basic.tsx

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

package/src/components/input-file/partials/cases.tsx

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

package/src/components/input-file/partials/variants.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 
-import { InputFileCases } from './cases';
 import { SampleColumns } from '../../SampleColumns';
+import { InputFileCases } from './cases';
 
 import type { Components } from '@public-ui/components';
 export const InputFileVariants = forwardRef<HTMLKolInputFileElement, Components.KolInputFile>(function InputFileVariant(props, ref) {

package/src/components/input-password/basic.tsx

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

package/src/components/input-password/partials/cases.tsx

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

package/src/components/input-radio/basic.tsx

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

package/src/components/input-radio/partials/variants.tsx

@@ -3,8 +3,8 @@ import React, { forwardRef } from 'react';
 import { InputRadioCases } from './cases';
 
 import type { Components } from '@public-ui/components';
-import { SampleColumns } from '../../SampleColumns';
 import { KolHeading } from '@public-ui/react-v19';
+import { SampleColumns } from '../../SampleColumns';
 
 export const InputRadioVariants = forwardRef<HTMLKolInputRadioElement, Components.KolInputRadio>(function InputRadioVariant(props, ref) {
 	return (

package/src/components/input-range/basic.tsx

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

package/src/components/input-range/partials/cases.tsx

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

package/src/components/input-text/basic.tsx

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

package/src/components/input-text/expert-slot.tsx

@@ -1,6 +1,6 @@
+import { KolInputText } from '@public-ui/react-v19';
 import * as React from 'react';
 import { SampleDescription } from '../SampleDescription';
-import { KolInputText } from '@public-ui/react-v19';
 
 export const InputTextExpertSlot = () => {
 	return (

package/src/components/input-text/routes.ts

@@ -1,9 +1,10 @@
 import { Routes } from '../../shares/types';
 import { InputTextBasic } from './basic';
+import { InputTextExpertSlot } from './expert-slot';
 import { InputTextHideMsg } from './hide-msg';
-import { InputTextFormatterDemo } from './text-formatter';
+import { InputTextSelectRange } from './select-range';
 import { InputTextSmartButton } from './smart-button';
-import { InputTextExpertSlot } from './expert-slot';
+import { InputTextFormatterDemo } from './text-formatter';
 
 export const INPUT_TEXT_ROUTES: Routes = {
 	'input-text': {
@@ -12,5 +13,6 @@ export const INPUT_TEXT_ROUTES: Routes = {
 		'text-formatter': InputTextFormatterDemo,
 		'smart-button': InputTextSmartButton,
 		'expert-slot': InputTextExpertSlot,
+		'select-range': InputTextSelectRange,
 	},
 };

package/src/components/input-text/select-range.tsx

@@ -0,0 +1,36 @@
+import { KolButtonLink, KolInputText } from '@public-ui/react-v19';
+import * as React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const InputTextSelectRange = () => {
+	const textInput = React.useRef<HTMLKolInputTextElement>(null);
+
+	function setSelectioStart() {
+		textInput.current?.focus();
+		textInput.current?.setSelectionStart(8);
+	}
+
+	function setSelectionRange() {
+		textInput.current?.focus();
+		textInput.current?.setSelectionRange(2, 5);
+	}
+
+	function setRangeText() {
+		textInput.current?.focus();
+		textInput.current?.setRangeText('INSERTED', 5, 9, 'select');
+	}
+
+	return (
+		<>
+			<SampleDescription>
+				<p>This sample shows how to change the selection in a KolInputText.</p>
+			</SampleDescription>
+			<div className="grid gap-4">
+				<KolInputText _value="Very long value" _label="Text Input Label" ref={textInput} />
+				<KolButtonLink _label="Set Start" onClick={setSelectioStart} />
+				<KolButtonLink _label="Set Range" onClick={setSelectionRange} />
+				<KolButtonLink _label="Set Range Text" onClick={setRangeText} />
+			</div>
+		</>
+	);
+};

package/src/components/input-text/smart-button.tsx

@@ -1,7 +1,7 @@
-import * as React from 'react';
-import { SampleDescription } from '../SampleDescription';
 import { ToasterService } from '@public-ui/components';
 import { KolInputText } from '@public-ui/react-v19';
+import * as React from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 const smartButtonProps = {
 	_icons: 'codicon codicon-info',

package/src/components/input-text/text-formatter.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
-import { Formik, Field, type FieldProps } from 'formik';
 import { KolForm, KolHeading, KolInputText } from '@public-ui/react-v19';
+import { Field, Formik, type FieldProps } from 'formik';
+import * as React from 'react';
 import { SampleDescription } from '../SampleDescription';
 
 import { NumericFormat, type NumberFormatValues } from 'react-number-format';
@@ -20,7 +20,11 @@ class IbanFormatter {
 	public parse(value: string): string {
 		return this.electronicFormat(value);
 	}
-	public format(value: string): string {
+	public format(value: string, ref?: HTMLKolInputTextElement | null, selectionStart?: number | null): string {
+		if (ref && selectionStart) {
+			if (selectionStart % 5 === 0) selectionStart++;
+			ref?.setSelectionStart(selectionStart);
+		}
 		return this.printFormat(value);
 	}
 }
@@ -37,6 +41,9 @@ export function InputTextFormatterDemo() {
 	const handleSubmit = async () => {};
 	const formatter = new IbanFormatter();
 
+	const textInput1 = React.useRef<HTMLKolInputTextElement>(null);
+	let textInput1SelectionStart: number | null | undefined;
+
 	const initialIbanExampleValues: IbanExampleFormValues = {
 		iban: 'DE89370400440532013000',
 	};
@@ -64,12 +71,13 @@ export function InputTextFormatterDemo() {
 										{({ field }: FieldProps<IbanExampleFormValues['iban']>) => (
 											<div className="block mt-2">
 												<KolInputText
+													ref={textInput1}
 													onBlur={() => {
 														void form.setFieldTouched('iban', true);
 													}}
 													id="field-iban"
 													_label="IBAN"
-													_value={formatter.format(field.value ?? '')}
+													_value={formatter.format(field.value ?? '', textInput1.current, textInput1SelectionStart)}
 													_msg={{
 														_type: 'error',
 														_description: form.errors.iban || '',
@@ -79,8 +87,10 @@ export function InputTextFormatterDemo() {
 													_on={{
 														onInput: (event, value: unknown) => {
 															if (event.target) {
+																textInput1.current?.selectionStart().then((start) => {
+																	textInput1SelectionStart = start;
+																});
 																const parsed_value = formatter.parse((value as string) ?? '');
-
 																void form.setFieldValue('iban', parsed_value, true);
 															}
 														},

package/src/components/link/aria-description.tsx

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

package/src/components/link/basic.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolLink, KolHeading } from '@public-ui/react-v19';
+import { KolLink } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 export const LinkBasic: FC = () => (
@@ -13,13 +13,10 @@ export const LinkBasic: FC = () => (
 		</SampleDescription>
 
 		<div className="grid gap-4">
-			<KolHeading _level={2} _label="Links with variant 'standalone'" />
 			<KolLink _href="#/back-page" _label="Simple Link" _variant="standalone" />
-			<KolLink _disabled _href="#/back-page" _label="Simple Link (deaktiviert)" _variant="standalone" />
+			<KolLink _disabled _href="#/back-page" _label="Simple Link (disabled)" _variant="standalone" />
 			<KolLink _hideLabel _icons="codicon codicon-home" _href="#/back-page" _label="Icon Link" _variant="standalone" />
-			<KolLink _disabled _hideLabel _icons="codicon codicon-home" _href="#/back-page" _label="Icon Link (deaktiviert)" _variant="standalone" />
-
-			<KolHeading _level={2} _label="Links with variant 'inline'" />
+			<KolLink _disabled _hideLabel _icons="codicon codicon-home" _href="#/back-page" _label="Icon Link (disabled)" _variant="standalone" />
 			<p>
 				In this paragraph, a link is inserted that contains no additional attributes. <KolLink _href="#/back-page" _label="Simple Link" /> It is rendered by
 				default as a <strong>inline element</strong>.