@public-ui/sample-react 3.0.0-rc.2 → 3.0.0-rc.4

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

@@ -3,9 +3,10 @@ import React, { forwardRef } from 'react';
 import { InputRadioCases } from './cases';
 
 import type { Components } from '@public-ui/components';
+import { SampleColumns } from '../../SampleColumns';
 export const InputRadioVariants = forwardRef<HTMLKolInputRadioElement, Components.KolInputRadio>(function InputRadioVariant(props, ref) {
 	return (
-		<div className="grid md:grid-cols-2 gap-4">
+		<SampleColumns>
 			<fieldset>
 				<legend>Radio</legend>
 				<InputRadioCases {...props} />
@@ -14,6 +15,6 @@ export const InputRadioVariants = forwardRef<HTMLKolInputRadioElement, Component
 				<legend>Radio (hideLabel)</legend>
 				<InputRadioCases ref={ref} {...props} _hideLabel />
 			</fieldset>
-		</div>
+		</SampleColumns>
 	);
 });

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

@@ -1,10 +1,9 @@
 import React, { forwardRef } from 'react';
-
 import { KolInputRange } from '@public-ui/react';
+import type { Components } from '@public-ui/components';
 
-import { ERROR_MSG } from '../../../shares/constants';
+import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 
-import type { Components } from '@public-ui/components';
 export const InputRangeCases = forwardRef<HTMLKolInputRangeElement, Components.KolInputRange>(function InputRangeCases(props, ref) {
 	return (
 		<div className="grid gap-4">
@@ -33,10 +32,14 @@ export const InputRangeCases = forwardRef<HTMLKolInputRangeElement, Components.K
 				_min={0}
 				_max={50}
 				_step={10}
+				_hint={HINT_MSG}
 				_msg={{ _type: 'error', _description: ERROR_MSG }}
 				_label="Slider with error"
 				_touched
 			/>
+			<KolInputRange {...props} _msg={{ _type: 'info', _description: 'Just a hint' }} _label="Slider" />
+			<KolInputRange {...props} _msg={{ _type: 'warning', _description: 'Small warning' }} _label="Slider" />
+			<KolInputRange {...props} _msg={{ _type: 'success', _description: 'Success message' }} _label="Slider" />
 			<KolInputRange {...props} _disabled _min={0} _max={50} _label="Slider (disabled)" />
 			<KolInputRange {...props} _min={0} _max={50} _label="With access key" _accessKey="c" />
 			<KolInputRange {...props} _min={0} _max={50} _label="With short key" _shortKey="s" />

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

@@ -3,9 +3,10 @@ import React, { forwardRef } from 'react';
 import { InputRangeCases } from './cases';
 
 import type { Components } from '@public-ui/components';
+import { SampleColumns } from '../../SampleColumns';
 export const InputRangeVariants = forwardRef<HTMLKolInputRangeElement, Components.KolInputRange>(function InputRangeVariant(props, ref) {
 	return (
-		<div className="grid md:grid-cols-2 gap-4">
+		<SampleColumns>
 			<fieldset>
 				<legend>Range</legend>
 				<InputRangeCases {...props} />
@@ -14,6 +15,6 @@ export const InputRangeVariants = forwardRef<HTMLKolInputRangeElement, Component
 				<legend>Range (hideLabel)</legend>
 				<InputRangeCases ref={ref} {...props} _hideLabel />
 			</fieldset>
-		</div>
+		</SampleColumns>
 	);
 });

package/src/components/input-text/{hide-errors.tsx → hide-msg.tsx}

@@ -3,12 +3,12 @@ import type { FC } from 'react';
 import React from 'react';
 import { SampleDescription } from '../SampleDescription';
 
-export const InputTextHideErrors: FC = () => (
+export const InputTextHideMsg: FC = () => (
 	<div className="grid gap-4">
 		<SampleDescription>
 			<p>
-				This sample shows the <code>_hideError</code> feature for KolInputText. It allows to hide the error message from an input field and can be used, when
-				the error is already shown somewhere else, e.g. for a group of inputs.
+				This sample shows the <code>_hideMsg</code> feature for KolInputText. It allows to hide the message from an input field and can be used, when the
+				message (e.g. error) is already shown somewhere else, e.g. for a group of inputs.
 			</p>
 		</SampleDescription>
 
@@ -21,8 +21,8 @@ export const InputTextHideErrors: FC = () => (
 				<KolAlert className="col-span-2" _level={0} _type="error">
 					This is a combined error message
 				</KolAlert>
-				<KolInputText _msg={{ _type: 'error', _description: 'This is a combined error message' }} _hideError _label="First input" _touched />
-				<KolInputText _msg={{ _type: 'error', _description: 'This is a combined error message' }} _hideError _label="Second input with error" _touched />
+				<KolInputText _msg={{ _type: 'error', _description: 'This is a combined error message' }} _hideMsg _label="First input" _touched />
+				<KolInputText _msg={{ _type: 'error', _description: 'This is a combined error message' }} _hideMsg _label="Second input with error" _touched />
 			</fieldset>
 		</KolCard>
 	</div>

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

@@ -3,9 +3,10 @@ import React, { forwardRef } from 'react';
 import { InputTextCases } from './cases';
 
 import type { Components } from '@public-ui/components';
+import { SampleColumns } from '../../SampleColumns';
 export const InputTextVariants = forwardRef<HTMLKolInputTextElement, Components.KolInputText>(function InputTextVariant(props, ref) {
 	return (
-		<div className="grid md:grid-cols-2 gap-4">
+		<SampleColumns>
 			<fieldset>
 				<legend>Text</legend>
 				<InputTextCases {...props} />
@@ -14,6 +15,6 @@ export const InputTextVariants = forwardRef<HTMLKolInputTextElement, Components.
 				<legend>Text (hideLabel)</legend>
 				<InputTextCases ref={ref} {...props} _hideLabel />
 			</fieldset>
-		</div>
+		</SampleColumns>
 	);
 });

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

@@ -1,6 +1,6 @@
 import { Routes } from '../../shares/types';
 import { InputTextBasic } from './basic';
-import { InputTextHideErrors } from './hide-errors';
+import { InputTextHideMsg } from './hide-msg';
 import { InputTextFormatterDemo } from './text-formatter';
 import { InputTextSmartButton } from './smart-button';
 import { InputTextExpertSlot } from './expert-slot';
@@ -8,7 +8,7 @@ import { InputTextExpertSlot } from './expert-slot';
 export const INPUT_TEXT_ROUTES: Routes = {
 	'input-text': {
 		basic: InputTextBasic,
-		'hide-errors': InputTextHideErrors,
+		'hide-msg': InputTextHideMsg,
 		'text-formatter': InputTextFormatterDemo,
 		'smart-button': InputTextSmartButton,
 		'expert-slot': InputTextExpertSlot,

package/src/components/modal/basic.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
 import { KolButton, KolCard, KolModal } from '@public-ui/react';
@@ -8,14 +8,18 @@ import { SampleDescription } from '../SampleDescription';
 export const ModalBasic: FC = () => {
 	const [searchParams] = useSearchParams();
 	const modalState = searchParams.get('show-modal') as string;
+	const defaultVariant = searchParams.get('variant') as string;
 	const modalElement = useRef<HTMLKolModalElement>(null);
 	const stackedModalElement = useRef<HTMLKolModalElement>(null);
-
+	const [variant, setVariant] = useState<'card' | 'blank'>('blank');
 	useEffect(() => {
 		if (modalState === 'true') {
 			modalElement.current?.openModal();
 		}
-	}, [modalState]);
+		if (defaultVariant === 'card') {
+			setVariant(defaultVariant);
+		}
+	}, [modalState, defaultVariant]);
 
 	return (
 		<>
@@ -27,7 +31,7 @@ export const ModalBasic: FC = () => {
 			</SampleDescription>
 
 			<div className="flex">
-				<KolModal _label="Primary modal" _width="80%" ref={modalElement} _on={{ onClose: () => console.log('Modal closed') }}>
+				<KolModal _label="Primary modal" _width="80%" ref={modalElement} _on={{ onClose: () => console.log('Modal closed') }} _variant={variant}>
 					<KolCard _label="I am a modal.">
 						<KolButton
 							_label="Open stacked modal"
@@ -62,15 +66,27 @@ export const ModalBasic: FC = () => {
 						/>
 					</KolCard>
 				</KolModal>
+				<div className="grid gap-4">
+					<KolButton
+						_label="Open modal"
+						_on={{
+							onClick: () => {
+								setVariant('blank');
+								modalElement.current?.openModal();
+							},
+						}}
+					/>
 
-				<KolButton
-					_label="Open modal"
-					_on={{
-						onClick: () => {
-							modalElement.current?.openModal();
-						},
-					}}
-				/>
+					<KolButton
+						_label="Open card modal"
+						_on={{
+							onClick: () => {
+								setVariant('card');
+								modalElement.current?.openModal();
+							},
+						}}
+					/>
+				</div>
 			</div>
 		</>
 	);

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

@@ -3,9 +3,10 @@ import React, { forwardRef } from 'react';
 import { SelectCases } from './cases';
 
 import type { Components } from '@public-ui/components';
+import { SampleColumns } from '../../SampleColumns';
 export const SelectVariants = forwardRef<HTMLKolSelectElement, Components.KolSelect>(function SelectVariant(props, ref) {
 	return (
-		<div className="grid md:grid-cols-2 gap-4">
+		<SampleColumns>
 			<fieldset>
 				<legend>Text</legend>
 				<SelectCases {...props} />
@@ -14,6 +15,6 @@ export const SelectVariants = forwardRef<HTMLKolSelectElement, Components.KolSel
 				<legend>Text (hideLabel)</legend>
 				<SelectCases ref={ref} {...props} _hideLabel />
 			</fieldset>
-		</div>
+		</SampleColumns>
 	);
 });

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

@@ -2,10 +2,11 @@ import React from 'react';
 
 import { SingleSelectCases } from './cases';
 import type { Components } from '@public-ui/components';
+import { SampleColumns } from '../../SampleColumns';
 
 export const SingleSelectVariants = (props: Components.KolSingleSelect) => {
 	return (
-		<div className="grid md:grid-cols-2 gap-4">
+		<SampleColumns>
 			<fieldset>
 				<legend>Text</legend>
 				<SingleSelectCases {...props} />
@@ -14,6 +15,6 @@ export const SingleSelectVariants = (props: Components.KolSingleSelect) => {
 				<legend>Text (hideLabel)</legend>
 				<SingleSelectCases {...props} _hideLabel />
 			</fieldset>
-		</div>
+		</SampleColumns>
 	);
 };

package/src/components/table/column-alignment.tsx

@@ -18,6 +18,7 @@ export const TableColumnAlignment: FC = () => (
 			<KolHeading _label="Simple table" _level={3}></KolHeading>
 			<KolTableStateful
 				_label="Table for demonstration purposes with different text align properties"
+				_minWidth="auto"
 				_headers={{
 					horizontal: [
 						[
@@ -35,6 +36,7 @@ export const TableColumnAlignment: FC = () => (
 			<KolHeading _label="Table with sortable columns" _level={3} className="block mt-6"></KolHeading>
 			<KolTableStateful
 				_label="Table for demonstration purposes with sortable columns"
+				_minWidth="auto"
 				_headers={{
 					horizontal: [
 						[
@@ -52,6 +54,7 @@ export const TableColumnAlignment: FC = () => (
 			<KolHeading _label="Table some sortable columns" _level={3} className="block mt-6"></KolHeading>
 			<KolTableStateful
 				_label="Table for demonstration purposes with some but not all columns sortable"
+				_minWidth="auto"
 				_headers={{
 					horizontal: [
 						[
@@ -69,6 +72,7 @@ export const TableColumnAlignment: FC = () => (
 			<KolHeading _label="Table with vertical heading" _level={3} className="block mt-6"></KolHeading>
 			<KolTableStateful
 				_label="Table for demonstration purposes with vertical heading"
+				_minWidth="auto"
 				_headers={{
 					horizontal: [
 						[

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

@@ -12,6 +12,7 @@ export const TableComplexHeaders: FC = () => (
 		<section className="w-full flex flex-col">
 			<KolTableStateful
 				_label="Business hours"
+				_minWidth="auto"
 				_data={[
 					{
 						asp: 'Center',

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

@@ -46,6 +46,7 @@ export const InteractiveChildElements: FC = () => (
 		<section className="w-full flex flex-col">
 			<KolTableStateless
 				_label="Button styles"
+				_minWidth="auto"
 				_headerCells={{
 					horizontal: [
 						[
@@ -79,6 +80,7 @@ export const InteractiveChildElements: FC = () => (
 
 			<KolTableStateless
 				_label="Link styles"
+				_minWidth="auto"
 				_headerCells={{
 					horizontal: [
 						[

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

@@ -88,6 +88,7 @@ export const MultiSortTable: FC = () => {
 					></KolInputCheckbox>
 					<KolTableStateful
 						_label="Sort Table with Order and Date"
+						_minWidth="auto"
 						_data={DATA.slice(0, 10)}
 						_headers={HEADERS_VERTICAL}
 						className="block"
@@ -104,6 +105,7 @@ export const MultiSortTable: FC = () => {
 					></KolInputCheckbox>
 					<KolTableStateful
 						_label="Sort Table with Order and Date"
+						_minWidth="auto"
 						_data={DATA}
 						_headers={HEADERS_HORIZONTAL}
 						className="block"

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

@@ -31,6 +31,7 @@ export const PaginationPosition: FC = () => (
 				<KolHeading _level={2} _label="Table with pagination at the bottom."></KolHeading>
 				<KolTableStateful
 					_label="Sample table with pagination at the bottom"
+					_minWidth="auto"
 					_data={DATA}
 					_headers={HEADERS}
 					_pagination={PAGINATION}
@@ -41,6 +42,7 @@ export const PaginationPosition: FC = () => (
 				<KolHeading _level={2} _label="Table with pagination at the top."></KolHeading>
 				<KolTableStateful
 					_label="Sample table with pagination at the top"
+					_minWidth="auto"
 					_data={DATA}
 					_headers={HEADERS}
 					_pagination={PAGINATION}
@@ -51,6 +53,7 @@ export const PaginationPosition: FC = () => (
 				<KolHeading _level={2} _label="Table with pagination at both top and bottom."></KolHeading>
 				<KolTableStateful
 					_label="Sample table with pagination at both top and bottom"
+					_minWidth="auto"
 					_data={DATA}
 					_headers={HEADERS}
 					_pagination={PAGINATION}

package/src/components/table/render-cell.tsx

@@ -115,6 +115,6 @@ export const TableRenderCell: FC = () => (
 			<p>This sample shows KolTableStateful using React render functions for the cell contents.</p>
 		</SampleDescription>
 
-		<KolTableStateful _label="Sort by date column" _data={DATA} _headers={HEADERS} className="w-full" />
+		<KolTableStateful _label="Sort by date column" _minWidth="auto" _data={DATA} _headers={HEADERS} className="w-full" />
 	</>
 );

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

@@ -60,11 +60,11 @@ export const TableSortData: FC = () => (
 		<section className="w-full grid gap-4">
 			<section className="grid gap-4">
 				<KolHeading _level={2} _label="Vertical" />
-				<KolTableStateful _label="Sort a date column" _data={DATA.slice(0, 10)} _headers={HEADERS_VERTICAL} className="block" />
+				<KolTableStateful _label="Sort a date column" _minWidth="auto" _data={DATA.slice(0, 10)} _headers={HEADERS_VERTICAL} className="block" />
 			</section>
 			<section className="grid gap-4">
 				<KolHeading _level={2} _label="Horizontal" />
-				<KolTableStateful _label="Sort a date column" _data={DATA} _headers={HEADERS_HORIZONTAL} className="block" />
+				<KolTableStateful _label="Sort a date column" _minWidth="auto" _data={DATA} _headers={HEADERS_HORIZONTAL} className="block" />
 			</section>
 		</section>
 	</>

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

@@ -69,6 +69,7 @@ export const TableStatefulWithSelection: FC = () => {
 			<section className="w-full">
 				<KolTableStateful
 					_label="Table with selection checkboxes"
+					_minWidth="auto"
 					_headers={{
 						horizontal: [
 							[

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

@@ -71,6 +71,7 @@ export const TableStatefulWithSingleSelection: FC = () => {
 			<section className="w-full">
 				<KolTableStateful
 					_label="Table with selection radio"
+					_minWidth="auto"
 					_headers={{
 						horizontal: [
 							[

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

@@ -65,6 +65,7 @@ export const TableStatelessWithSelection: FC = () => {
 			<section className="w-full">
 				<KolTableStateless
 					_label="Table with selection checkboxes"
+					_minWidth="auto"
 					_headerCells={{
 						horizontal: [
 							[

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

@@ -66,6 +66,7 @@ export const TableStatelessWithSingleSelection: FC = () => {
 			<section className="w-full">
 				<KolTableStateless
 					_label="Table with selection checkboxes"
+					_minWidth="auto"
 					_headerCells={{
 						horizontal: [
 							[

package/src/components/table/stateless.tsx

@@ -14,6 +14,7 @@ export const TableStateless: FC = () => (
 		<section className="w-full">
 			<KolTableStateless
 				_label="Table for demonstration purposes"
+				_minWidth="auto"
 				_headerCells={{
 					horizontal: [
 						[

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

@@ -12,6 +12,7 @@ export const TableWithFooter: FC = () => (
 		<KolTableStateful
 			className="w-full"
 			_label="Business hours"
+			_minWidth="auto"
 			_headers={{
 				horizontal: [
 					[

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

@@ -26,7 +26,7 @@ export const TableWithPagination: FC = () => (
 			<p>This sample shows how KolTableStateful can be navigated using a pagination.</p>
 		</SampleDescription>
 		<div className="w-full">
-			<KolTableStateful _label="Table description" _data={DATA} _headers={HEADERS} _pagination={PAGINATION}></KolTableStateful>
+			<KolTableStateful _label="Table description" _minWidth="auto" _data={DATA} _headers={HEADERS} _pagination={PAGINATION}></KolTableStateful>
 		</div>
 	</>
 );

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

@@ -1,14 +1,19 @@
 import React, { forwardRef } from 'react';
-
 import { KolTextarea } from '@public-ui/react';
+import type { Components } from '@public-ui/components';
 
-import { ERROR_MSG } from '../../../shares/constants';
+import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 
-import type { Components } from '@public-ui/components';
 export const TextareaCases = forwardRef<HTMLKolTextareaElement, Components.KolTextarea>(function TextareaCases(props, ref) {
 	return (
 		<div className="grid gap-4">
-			<KolTextarea {...props} _msg={{ _type: 'error', _description: ERROR_MSG }} _label="Text" _touched />
+			<div className="black-background">
+				<KolTextarea {...props} ref={ref} _placeholder="Placeholder" _label="Text" />
+			</div>
+			<KolTextarea {...props} _placeholder="Placeholder" _required _msg={{ _type: 'error', _description: ERROR_MSG }} _label="Text" _touched _hint={HINT_MSG} />
+			<KolTextarea {...props} _placeholder="Placeholder" _label="Text" _msg={{ _type: 'info', _description: 'Just a hint' }} />
+			<KolTextarea {...props} _placeholder="Placeholder" _label="Text" _msg={{ _type: 'warning', _description: 'Small warning' }} />
+			<KolTextarea {...props} _placeholder="Placeholder" _label="Text" _msg={{ _type: 'success', _description: 'Success message' }} />
 			<KolTextarea {...props} ref={ref} _accessKey="T" _label="Text (3 rows)" _rows={3} />
 			<KolTextarea {...props} ref={ref} _label="Text (placeholder)" _rows={3} _placeholder="Placeholder" />
 			<KolTextarea {...props} ref={ref} _label="Text (disabled & placeholder)" _rows={3} _placeholder="Placeholder" _disabled />

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

@@ -3,9 +3,10 @@ import React, { forwardRef } from 'react';
 import { TextareaCases } from './cases';
 
 import type { Components } from '@public-ui/components';
+import { SampleColumns } from '../../SampleColumns';
 export const TextareaVariants = forwardRef<HTMLKolTextareaElement, Components.KolTextarea>(function TextareaVariant(props, ref) {
 	return (
-		<div className="grid md:grid-cols-2 gap-4">
+		<SampleColumns>
 			<fieldset>
 				<legend>Text</legend>
 				<TextareaCases {...props} />
@@ -14,6 +15,6 @@ export const TextareaVariants = forwardRef<HTMLKolTextareaElement, Components.Ko
 				<legend>Text (hideLabel)</legend>
 				<TextareaCases ref={ref} {...props} _hideLabel />
 			</fieldset>
-		</div>
+		</SampleColumns>
 	);
 });

package/src/react.main.tsx

@@ -5,7 +5,8 @@ import { setTagNameTransformer } from '@public-ui/react';
 
 import { bootstrap, KoliBriDevHelper } from '@public-ui/components';
 import { defineCustomElements } from '@public-ui/components/dist/loader';
-import { DEFAULT, ECL_EC, ECL_EU, ITZBund } from '@public-ui/themes';
+import { DEFAULT } from '@public-ui/theme-default';
+import { ECL_EC, ECL_EU } from '@public-ui-/theme-ecl';
 
 import { App } from './App';
 
@@ -35,7 +36,7 @@ const getThemes = async () => {
 	}
 
 	/* List of regular sample app themes */
-	return [DEFAULT, ECL_EC, ECL_EU, ITZBund] as Theme[];
+	return [DEFAULT, ECL_EC, ECL_EU] as Theme[];
 };
 
 void (async () => {

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

@@ -42,9 +42,9 @@ export const InputGroupWithError: FC = () => {
 				{phoneError && <KolAlert _alert _type="error" _label={phoneErrorMessage} />}
 
 				<div className="grid grid-cols-3 gap-4 max-w-2xl">
-					<KolSelect _options={countryCodes} _label="CountryCode " _msg={{ _description: phoneErrorMessage, _type: 'error' }} _touched _hideError />
-					<KolInputText _label="Area code" _msg={{ _description: phoneErrorMessage, _type: 'error' }} _touched _hideError />
-					<KolInputText _label="Local number" _msg={{ _description: phoneErrorMessage, _type: 'error' }} _touched _hideError />
+					<KolSelect _options={countryCodes} _label="CountryCode " _msg={{ _description: phoneErrorMessage, _type: 'error' }} _touched _hideMsg />
+					<KolInputText _label="Area code" _msg={{ _description: phoneErrorMessage, _type: 'error' }} _touched _hideMsg />
+					<KolInputText _label="Local number" _msg={{ _description: phoneErrorMessage, _type: 'error' }} _touched _hideMsg />
 				</div>
 			</fieldset>
 
@@ -53,7 +53,7 @@ export const InputGroupWithError: FC = () => {
 				{pizzaError && <KolAlert _alert _type="error" _label={pizzaErrorMessage} />}
 
 				{pizzaToppings.map((topping) => (
-					<KolInputCheckbox key={topping} _label={topping} _msg={{ _description: phoneErrorMessage, _type: 'error' }} _touched _hideError />
+					<KolInputCheckbox key={topping} _label={topping} _msg={{ _description: phoneErrorMessage, _type: 'error' }} _touched _hideMsg />
 				))}
 			</fieldset>
 		</>

package/src/shares/theme.ts

@@ -1,10 +1,10 @@
 import { SelectOption } from '@public-ui/components';
 
-export const THEMES = ['default', 'ecl-ec', 'ecl-eu', 'itzbund', 'unstyled'] as const;
+export const THEMES = ['default', 'ecl-ec', 'ecl-eu', 'unstyled'] as const;
 export type Theme = (typeof THEMES)[number];
 export type ThemeAndUnstyled = Theme | 'unstyled';
 
-const drafts: ThemeAndUnstyled[] = ['ecl-ec', 'ecl-eu', 'itzbund'];
+const drafts: ThemeAndUnstyled[] = ['ecl-ec', 'ecl-eu'];
 
 export const isDraftTheme = (theme: ThemeAndUnstyled) => drafts.includes(theme);
 
@@ -27,15 +27,11 @@ export const THEME_OPTIONS: SelectOption<ThemeAndUnstyled>[] = [
 		value: 'default',
 	},
 	{
-		label: 'European Commission (Draft)',
+		label: 'European Commission (in progress)',
 		value: 'ecl-ec',
 	},
 	{
-		label: 'European Union (Draft)',
+		label: 'European Union (in progress)',
 		value: 'ecl-eu',
 	},
-	{
-		label: 'Informationstechnikzentrum Bund (Draft)',
-		value: 'itzbund',
-	},
 ];

package/dist/1258.js

@@ -1,2 +0,0 @@
-/*! For license information please see 1258.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[1258],{9246:(t,e,n)=>{n.d(e,{a:()=>i,v:()=>l});var o=n(5800);const i=(t,e,n)=>{(0,o.w)(t,e,(t=>"string"==typeof t&&r.includes(t)),new Set(r),n,{defaultValue:"top"})},r=["left","right","top","bottom"],l=(t,e)=>{i(t,"_align",e)}},7189:(t,e,n)=>{n.d(e,{a:()=>bt,b:()=>yt});var o=n(5687),i=Object.defineProperty,r=Object.defineProperties,l=Object.getOwnPropertyDescriptors,c=Object.getOwnPropertySymbols,s=Object.prototype.hasOwnProperty,f=Object.prototype.propertyIsEnumerable,a=(t,e,n)=>e in t?i(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n,u=(t,e)=>{for(var n in e||(e={}))s.call(e,n)&&a(t,n,e[n]);if(c)for(var n of c(e))f.call(e,n)&&a(t,n,e[n]);return t},d=(t,e)=>r(t,l(e)),p=(t,e)=>{var n={};for(var o in t)s.call(t,o)&&e.indexOf(o)<0&&(n[o]=t[o]);if(null!=t&&c)for(var o of c(t))e.indexOf(o)<0&&f.call(t,o)&&(n[o]=t[o]);return n},h=(t,e,n)=>new Promise(((o,i)=>{var r=t=>{try{c(n.next(t))}catch(t){i(t)}},l=t=>{try{c(n.throw(t))}catch(t){i(t)}},c=t=>t.done?o(t.value):Promise.resolve(t.value).then(r,l);c((n=n.apply(t,e)).next())}));const m=Math.min,g=Math.max,y=Math.round,x=Math.floor,v=t=>({x:t,y:t}),w={left:"right",right:"left",bottom:"top",top:"bottom"},b={start:"end",end:"start"};function R(t,e,n){return g(t,m(e,n))}function O(t,e){return"function"==typeof t?t(e):t}function T(t){return t.split("-")[0]}function E(t){return t.split("-")[1]}function L(t){return"x"===t?"y":"x"}function A(t){return"y"===t?"height":"width"}function P(t){return["top","bottom"].includes(T(t))?"y":"x"}function D(t){return L(P(t))}function S(t){return t.replace(/start|end/g,(t=>b[t]))}function k(t){return t.replace(/left|right|bottom|top/g,(t=>w[t]))}function C(t){return"number"!=typeof t?function(t){return u({top:0,right:0,bottom:0,left:0},t)}(t):{top:t,right:t,bottom:t,left:t}}function F(t){const{x:e,y:n,width:o,height:i}=t;return{width:o,height:i,top:n,left:e,right:e+o,bottom:n+i,x:e,y:n}}function H(t,e,n){let{reference:o,floating:i}=t;const r=P(e),l=D(e),c=A(l),s=T(e),f="y"===r,a=o.x+o.width/2-i.width/2,u=o.y+o.height/2-i.height/2,d=o[c]/2-i[c]/2;let p;switch(s){case"top":p={x:a,y:o.y-i.height};break;case"bottom":p={x:a,y:o.y+o.height};break;case"right":p={x:o.x+o.width,y:u};break;case"left":p={x:o.x-i.width,y:u};break;default:p={x:o.x,y:o.y}}switch(E(e)){case"start":p[l]-=d*(n&&f?-1:1);break;case"end":p[l]+=d*(n&&f?-1:1)}return p}function W(t,e){return h(this,null,(function*(){var n;void 0===e&&(e={});const{x:o,y:i,platform:r,rects:l,elements:c,strategy:s}=t,{boundary:f="clippingAncestors",rootBoundary:a="viewport",elementContext:u="floating",altBoundary:d=!1,padding:p=0}=O(e,t),h=C(p),m=c[d?"floating"===u?"reference":"floating":u],g=F(yield r.getClippingRect({element:null==(n=yield null==r.isElement?void 0:r.isElement(m))||n?m:m.contextElement||(yield null==r.getDocumentElement?void 0:r.getDocumentElement(c.floating)),boundary:f,rootBoundary:a,strategy:s})),y="floating"===u?{x:o,y:i,width:l.floating.width,height:l.floating.height}:l.reference,x=yield null==r.getOffsetParent?void 0:r.getOffsetParent(c.floating),v=(yield null==r.isElement?void 0:r.isElement(x))&&(yield null==r.getScale?void 0:r.getScale(x))||{x:1,y:1},w=F(r.convertOffsetParentRelativeRectToViewportRelativeRect?yield r.convertOffsetParentRelativeRectToViewportRelativeRect({elements:c,rect:y,offsetParent:x,strategy:s}):y);return{top:(g.top-w.top+h.top)/v.y,bottom:(w.bottom-g.bottom+h.bottom)/v.y,left:(g.left-w.left+h.left)/v.x,right:(w.right-g.right+h.right)/v.x}}))}function j(){return"undefined"!=typeof window}function _(t){return M(t)?(t.nodeName||"").toLowerCase():"#document"}function B(t){var e;return(null==t||null==(e=t.ownerDocument)?void 0:e.defaultView)||window}function V(t){var e;return null==(e=(M(t)?t.ownerDocument:t.document)||window.document)?void 0:e.documentElement}function M(t){return!!j()&&(t instanceof Node||t instanceof B(t).Node)}function z(t){return!!j()&&(t instanceof Element||t instanceof B(t).Element)}function N(t){return!!j()&&(t instanceof HTMLElement||t instanceof B(t).HTMLElement)}function $(t){return!(!j()||"undefined"==typeof ShadowRoot)&&(t instanceof ShadowRoot||t instanceof B(t).ShadowRoot)}function I(t){const{overflow:e,overflowX:n,overflowY:o,display:i}=K(t);return/auto|scroll|overlay|hidden|clip/.test(e+o+n)&&!["inline","contents"].includes(i)}function q(t){return["table","td","th"].includes(_(t))}function X(t){return[":popover-open",":modal"].some((e=>{try{return t.matches(e)}catch(t){return!1}}))}function Y(t){const e=G(),n=z(t)?K(t):t;return"none"!==n.transform||"none"!==n.perspective||!!n.containerType&&"normal"!==n.containerType||!e&&!!n.backdropFilter&&"none"!==n.backdropFilter||!e&&!!n.filter&&"none"!==n.filter||["transform","perspective","filter"].some((t=>(n.willChange||"").includes(t)))||["paint","layout","strict","content"].some((t=>(n.contain||"").includes(t)))}function G(){return!("undefined"==typeof CSS||!CSS.supports)&&CSS.supports("-webkit-backdrop-filter","none")}function J(t){return["html","body","#document"].includes(_(t))}function K(t){return B(t).getComputedStyle(t)}function Q(t){return z(t)?{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}:{scrollLeft:t.scrollX,scrollTop:t.scrollY}}function U(t){if("html"===_(t))return t;const e=t.assignedSlot||t.parentNode||$(t)&&t.host||V(t);return $(e)?e.host:e}function Z(t){const e=U(t);return J(e)?t.ownerDocument?t.ownerDocument.body:t.body:N(e)&&I(e)?e:Z(e)}function tt(t,e,n){var o;void 0===e&&(e=[]),void 0===n&&(n=!0);const i=Z(t),r=i===(null==(o=t.ownerDocument)?void 0:o.body),l=B(i);if(r){const t=et(l);return e.concat(l,l.visualViewport||[],I(i)?i:[],t&&n?tt(t):[])}return e.concat(i,tt(i,[],n))}function et(t){return t.parent&&Object.getPrototypeOf(t.parent)?t.frameElement:null}function nt(t){const e=K(t);let n=parseFloat(e.width)||0,o=parseFloat(e.height)||0;const i=N(t),r=i?t.offsetWidth:n,l=i?t.offsetHeight:o,c=y(n)!==r||y(o)!==l;return c&&(n=r,o=l),{width:n,height:o,$:c}}function ot(t){return z(t)?t:t.contextElement}function it(t){const e=ot(t);if(!N(e))return v(1);const n=e.getBoundingClientRect(),{width:o,height:i,$:r}=nt(e);let l=(r?y(n.width):n.width)/o,c=(r?y(n.height):n.height)/i;return l&&Number.isFinite(l)||(l=1),c&&Number.isFinite(c)||(c=1),{x:l,y:c}}const rt=v(0);function lt(t){const e=B(t);return G()&&e.visualViewport?{x:e.visualViewport.offsetLeft,y:e.visualViewport.offsetTop}:rt}function ct(t,e,n,o){void 0===e&&(e=!1),void 0===n&&(n=!1);const i=t.getBoundingClientRect(),r=ot(t);let l=v(1);e&&(o?z(o)&&(l=it(o)):l=it(t));const c=function(t,e,n){return void 0===e&&(e=!1),!(!n||e&&n!==B(t))&&e}(r,n,o)?lt(r):v(0);let s=(i.left+c.x)/l.x,f=(i.top+c.y)/l.y,a=i.width/l.x,u=i.height/l.y;if(r){const t=B(r),e=o&&z(o)?B(o):o;let n=t,i=et(n);for(;i&&o&&e!==n;){const t=it(i),e=i.getBoundingClientRect(),o=K(i),r=e.left+(i.clientLeft+parseFloat(o.paddingLeft))*t.x,l=e.top+(i.clientTop+parseFloat(o.paddingTop))*t.y;s*=t.x,f*=t.y,a*=t.x,u*=t.y,s+=r,f+=l,n=B(i),i=et(n)}}return F({width:a,height:u,x:s,y:f})}function st(t,e){const n=Q(t).scrollLeft;return e?e.left+n:ct(V(t)).left+n}function ft(t,e,n){void 0===n&&(n=!1);const o=t.getBoundingClientRect();return{x:o.left+e.scrollLeft-(n?0:st(t,o)),y:o.top+e.scrollTop}}function at(t,e,n){let o;if("viewport"===e)o=function(t,e){const n=B(t),o=V(t),i=n.visualViewport;let r=o.clientWidth,l=o.clientHeight,c=0,s=0;if(i){r=i.width,l=i.height;const t=G();(!t||t&&"fixed"===e)&&(c=i.offsetLeft,s=i.offsetTop)}return{width:r,height:l,x:c,y:s}}(t,n);else if("document"===e)o=function(t){const e=V(t),n=Q(t),o=t.ownerDocument.body,i=g(e.scrollWidth,e.clientWidth,o.scrollWidth,o.clientWidth),r=g(e.scrollHeight,e.clientHeight,o.scrollHeight,o.clientHeight);let l=-n.scrollLeft+st(t);const c=-n.scrollTop;return"rtl"===K(o).direction&&(l+=g(e.clientWidth,o.clientWidth)-i),{width:i,height:r,x:l,y:c}}(V(t));else if(z(e))o=function(t,e){const n=ct(t,!0,"fixed"===e),o=n.top+t.clientTop,i=n.left+t.clientLeft,r=N(t)?it(t):v(1);return{width:t.clientWidth*r.x,height:t.clientHeight*r.y,x:i*r.x,y:o*r.y}}(e,n);else{const n=lt(t);o={x:e.x-n.x,y:e.y-n.y,width:e.width,height:e.height}}return F(o)}function ut(t,e){const n=U(t);return!(n===e||!z(n)||J(n))&&("fixed"===K(n).position||ut(n,e))}function dt(t,e,n){const o=N(e),i=V(e),r="fixed"===n,l=ct(t,!0,r,e);let c={scrollLeft:0,scrollTop:0};const s=v(0);if(o||!o&&!r)if(("body"!==_(e)||I(i))&&(c=Q(e)),o){const t=ct(e,!0,r,e);s.x=t.x+e.clientLeft,s.y=t.y+e.clientTop}else i&&(s.x=st(i));const f=!i||o||r?v(0):ft(i,c);return{x:l.left+c.scrollLeft-s.x-f.x,y:l.top+c.scrollTop-s.y-f.y,width:l.width,height:l.height}}function pt(t){return"static"===K(t).position}function ht(t,e){if(!N(t)||"fixed"===K(t).position)return null;if(e)return e(t);let n=t.offsetParent;return V(t)===n&&(n=n.ownerDocument.body),n}function mt(t,e){const n=B(t);if(X(t))return n;if(!N(t)){let e=U(t);for(;e&&!J(e);){if(z(e)&&!pt(e))return e;e=U(e)}return n}let o=ht(t,e);for(;o&&q(o)&&pt(o);)o=ht(o,e);return o&&J(o)&&pt(o)&&!Y(o)?n:o||function(t){let e=U(t);for(;N(e)&&!J(e);){if(Y(e))return e;if(X(e))return null;e=U(e)}return null}(t)||n}const gt={convertOffsetParentRelativeRectToViewportRelativeRect:function(t){let{elements:e,rect:n,offsetParent:o,strategy:i}=t;const r="fixed"===i,l=V(o),c=!!e&&X(e.floating);if(o===l||c&&r)return n;let s={scrollLeft:0,scrollTop:0},f=v(1);const a=v(0),u=N(o);if((u||!u&&!r)&&(("body"!==_(o)||I(l))&&(s=Q(o)),N(o))){const t=ct(o);f=it(o),a.x=t.x+o.clientLeft,a.y=t.y+o.clientTop}const d=!l||u||r?v(0):ft(l,s,!0);return{width:n.width*f.x,height:n.height*f.y,x:n.x*f.x-s.scrollLeft*f.x+a.x+d.x,y:n.y*f.y-s.scrollTop*f.y+a.y+d.y}},getDocumentElement:V,getClippingRect:function(t){let{element:e,boundary:n,rootBoundary:o,strategy:i}=t;const r=[..."clippingAncestors"===n?X(e)?[]:function(t,e){const n=e.get(t);if(n)return n;let o=tt(t,[],!1).filter((t=>z(t)&&"body"!==_(t))),i=null;const r="fixed"===K(t).position;let l=r?U(t):t;for(;z(l)&&!J(l);){const e=K(l),n=Y(l);n||"fixed"!==e.position||(i=null),(r?!n&&!i:!n&&"static"===e.position&&i&&["absolute","fixed"].includes(i.position)||I(l)&&!n&&ut(t,l))?o=o.filter((t=>t!==l)):i=e,l=U(l)}return e.set(t,o),o}(e,this._c):[].concat(n),o],l=r[0],c=r.reduce(((t,n)=>{const o=at(e,n,i);return t.top=g(o.top,t.top),t.right=m(o.right,t.right),t.bottom=m(o.bottom,t.bottom),t.left=g(o.left,t.left),t}),at(e,l,i));return{width:c.right-c.left,height:c.bottom-c.top,x:c.left,y:c.top}},getOffsetParent:mt,getElementRects:function(t){return h(this,null,(function*(){const e=this.getOffsetParent||mt,n=this.getDimensions,o=yield n(t.floating);return{reference:dt(t.reference,yield e(t.floating),t.strategy),floating:{x:0,y:0,width:o.width,height:o.height}}}))},getClientRects:function(t){return Array.from(t.getClientRects())},getDimensions:function(t){const{width:e,height:n}=nt(t);return{width:e,height:n}},getScale:it,isElement:z,isRTL:function(t){return"rtl"===K(t).direction}};function yt(t,e,n,o){void 0===o&&(o={});const{ancestorScroll:i=!0,ancestorResize:r=!0,elementResize:l="function"==typeof ResizeObserver,layoutShift:c="function"==typeof IntersectionObserver,animationFrame:s=!1}=o,f=ot(t),a=i||r?[...f?tt(f):[],...tt(e)]:[];a.forEach((t=>{i&&t.addEventListener("scroll",n,{passive:!0}),r&&t.addEventListener("resize",n)}));const p=f&&c?function(t,e){let n,o=null;const i=V(t);function r(){var t;clearTimeout(n),null==(t=o)||t.disconnect(),o=null}return function l(c,s){void 0===c&&(c=!1),void 0===s&&(s=1),r();const{left:f,top:a,width:p,height:h}=t.getBoundingClientRect();if(c||e(),!p||!h)return;const y={rootMargin:-x(a)+"px "+-x(i.clientWidth-(f+p))+"px "+-x(i.clientHeight-(a+h))+"px "+-x(f)+"px",threshold:g(0,m(1,s))||1};let v=!0;function w(t){const e=t[0].intersectionRatio;if(e!==s){if(!v)return l();e?l(!1,e):n=setTimeout((()=>{l(!1,1e-7)}),1e3)}v=!1}try{o=new IntersectionObserver(w,d(u({},y),{root:i.ownerDocument}))}catch(t){o=new IntersectionObserver(w,y)}o.observe(t)}(!0),r}(f,n):null;let h,y=-1,v=null;l&&(v=new ResizeObserver((t=>{let[o]=t;o&&o.target===f&&v&&(v.unobserve(e),cancelAnimationFrame(y),y=requestAnimationFrame((()=>{var t;null==(t=v)||t.observe(e)}))),n()})),f&&!s&&v.observe(f),v.observe(e));let w=s?ct(t):null;return s&&function e(){const o=ct(t);!w||o.x===w.x&&o.y===w.y&&o.width===w.width&&o.height===w.height||n(),w=o,h=requestAnimationFrame(e)}(),n(),()=>{var t;a.forEach((t=>{i&&t.removeEventListener("scroll",n),r&&t.removeEventListener("resize",n)})),null==p||p(),null==(t=v)||t.disconnect(),v=null,s&&cancelAnimationFrame(h)}}const xt=function(t){return void 0===t&&(t={}),{name:"shift",options:t,fn(e){return h(this,null,(function*(){const{x:n,y:o,placement:i}=e,r=O(t,e),{mainAxis:l=!0,crossAxis:c=!1,limiter:s={fn:t=>{let{x:e,y:n}=t;return{x:e,y:n}}}}=r,f=p(r,["mainAxis","crossAxis","limiter"]),a={x:n,y:o},h=yield W(e,f),m=P(T(i)),g=L(m);let y=a[g],x=a[m];if(l){const t="y"===g?"bottom":"right";y=R(y+h["y"===g?"top":"left"],y,y-h[t])}if(c){const t="y"===m?"bottom":"right";x=R(x+h["y"===m?"top":"left"],x,x-h[t])}const v=s.fn(d(u({},e),{[g]:y,[m]:x}));return d(u({},v),{data:{x:v.x-n,y:v.y-o}})}))}}},vt=function(t){return void 0===t&&(t={}),{name:"flip",options:t,fn(e){return h(this,null,(function*(){var n,o;const{placement:i,middlewareData:r,rects:l,initialPlacement:c,platform:s,elements:f}=e,a=O(t,e),{mainAxis:u=!0,crossAxis:d=!0,fallbackPlacements:h,fallbackStrategy:m="bestFit",fallbackAxisSideDirection:g="none",flipAlignment:y=!0}=a,x=p(a,["mainAxis","crossAxis","fallbackPlacements","fallbackStrategy","fallbackAxisSideDirection","flipAlignment"]);if(null!=(n=r.arrow)&&n.alignmentOffset)return{};const v=T(i),w=P(c),b=T(c)===c,R=yield null==s.isRTL?void 0:s.isRTL(f.floating),L=h||(b||!y?[k(c)]:function(t){const e=k(t);return[S(t),e,S(e)]}(c)),C="none"!==g;!h&&C&&L.push(...function(t,e,n,o){const i=E(t);let r=function(t,e,n){const o=["left","right"],i=["right","left"],r=["top","bottom"],l=["bottom","top"];switch(t){case"top":case"bottom":return n?e?i:o:e?o:i;case"left":case"right":return e?r:l;default:return[]}}(T(t),"start"===n,o);return i&&(r=r.map((t=>t+"-"+i)),e&&(r=r.concat(r.map(S)))),r}(c,y,g,R));const F=[c,...L],H=yield W(e,x),j=[];let _=(null==(o=r.flip)?void 0:o.overflows)||[];if(u&&j.push(H[v]),d){const t=function(t,e,n){void 0===n&&(n=!1);const o=E(t),i=D(t),r=A(i);let l="x"===i?o===(n?"end":"start")?"right":"left":"start"===o?"bottom":"top";return e.reference[r]>e.floating[r]&&(l=k(l)),[l,k(l)]}(i,l,R);j.push(H[t[0]],H[t[1]])}if(_=[..._,{placement:i,overflows:j}],!j.every((t=>t<=0))){var B,V;const t=((null==(B=r.flip)?void 0:B.index)||0)+1,e=F[t];if(e)return{data:{index:t,overflows:_},reset:{placement:e}};let n=null==(V=_.filter((t=>t.overflows[0]<=0)).sort(((t,e)=>t.overflows[1]-e.overflows[1]))[0])?void 0:V.placement;if(!n)switch(m){case"bestFit":{var M;const t=null==(M=_.filter((t=>{if(C){const e=P(t.placement);return e===w||"y"===e}return!0})).map((t=>[t.placement,t.overflows.filter((t=>t>0)).reduce(((t,e)=>t+e),0)])).sort(((t,e)=>t[1]-e[1]))[0])?void 0:M[0];t&&(n=t);break}case"initialPlacement":n=c}if(i!==n)return{reset:{placement:n}}}return{}}))}}},wt=t=>({name:"arrow",options:t,fn(e){return h(this,null,(function*(){const{x:n,y:o,placement:i,rects:r,platform:l,elements:c,middlewareData:s}=e,{element:f,padding:a=0}=O(t,e)||{};if(null==f)return{};const d=C(a),p={x:n,y:o},h=D(i),g=A(h),y=yield l.getDimensions(f),x="y"===h,v=x?"top":"left",w=x?"bottom":"right",b=x?"clientHeight":"clientWidth",T=r.reference[g]+r.reference[h]-p[h]-r.floating[g],L=p[h]-r.reference[h],P=yield null==l.getOffsetParent?void 0:l.getOffsetParent(f);let S=P?P[b]:0;S&&(yield null==l.isElement?void 0:l.isElement(P))||(S=c.floating[b]||r.floating[g]);const k=T/2-L/2,F=S/2-y[g]/2-1,H=m(d[v],F),W=m(d[w],F),j=H,_=S-y[g]-W,B=S/2-y[g]/2+k,V=R(j,B,_),M=!s.arrow&&null!=E(i)&&B!==V&&r.reference[g]/2-(B<j?H:W)-y[g]/2<0,z=M?B<j?B-j:B-_:0;return{[h]:p[h]+z,data:u({[h]:V,centerOffset:B-V-z},M&&{alignmentOffset:z}),reset:M}}))}}),bt=t=>h(void 0,[t],(function*({floatingElement:t,referenceElement:e,arrowElement:n,align:i="top"}){var r,l,c,s;if("test"!==o.p){const o=[(s=null!==(r=null==n?void 0:n.offsetHeight)&&void 0!==r?r:10,void 0===s&&(s=0),{name:"offset",options:s,fn(t){return h(this,null,(function*(){var e,n;const{x:o,y:i,placement:r,middlewareData:l}=t,c=yield function(t,e){return h(this,null,(function*(){const{placement:n,platform:o,elements:i}=t,r=yield null==o.isRTL?void 0:o.isRTL(i.floating),l=T(n),c=E(n),s="y"===P(n),f=["left","top"].includes(l)?-1:1,a=r&&s?-1:1,d=O(e,t);let{mainAxis:p,crossAxis:h,alignmentAxis:m}="number"==typeof d?{mainAxis:d,crossAxis:0,alignmentAxis:null}:u({mainAxis:0,crossAxis:0,alignmentAxis:null},d);return c&&"number"==typeof m&&(h="end"===c?-1*m:m),s?{x:h*a,y:p*f}:{x:p*f,y:h*a}}))}(t,s);return r===(null==(e=l.offset)?void 0:e.placement)&&null!=(n=l.arrow)&&n.alignmentOffset?{}:{x:o+c.x,y:i+c.y,data:d(u({},c),{placement:r})}}))}}),vt(),xt()];n&&o.push(wt({element:n}));const{x:f,y:a,middlewareData:p,placement:m}=yield((t,e,n)=>{const o=new Map,i=u({platform:gt},n),r=d(u({},i.platform),{_c:o});return((t,e,n)=>h(void 0,null,(function*(){const{placement:o="bottom",strategy:i="absolute",middleware:r=[],platform:l}=n,c=r.filter(Boolean),s=yield null==l.isRTL?void 0:l.isRTL(e);let f=yield l.getElementRects({reference:t,floating:e,strategy:i}),{x:a,y:p}=H(f,o,s),h=o,m={},g=0;for(let n=0;n<c.length;n++){const{name:r,fn:y}=c[n],{x,y:v,data:w,reset:b}=yield y({x:a,y:p,initialPlacement:o,placement:h,strategy:i,middlewareData:m,rects:f,platform:l,elements:{reference:t,floating:e}});a=null!=x?x:a,p=null!=v?v:p,m=d(u({},m),{[r]:u(u({},m[r]),w)}),b&&g<=50&&(g++,"object"==typeof b&&(b.placement&&(h=b.placement),b.rects&&(f=!0===b.rects?yield l.getElementRects({reference:t,floating:e,strategy:i}):b.rects),({x:a,y:p}=H(f,h,s))),n=-1)}return{x:a,y:p,placement:h,strategy:i,middlewareData:m}})))(t,e,d(u({},i),{platform:r}))})(e,t,{placement:i,middleware:o,strategy:"fixed"});Object.assign(t.style,{left:`${f}px`,top:`${a}px`,visibility:"visible"}),n&&((null===(l=p.arrow)||void 0===l?void 0:l.x)?Object.assign(n.style,{left:`${p.arrow.x}px`,top:"bottom"===m?-n.offsetHeight/2+"px":"",bottom:"top"===m?-n.offsetHeight/2+"px":""}):(null===(c=p.arrow)||void 0===c?void 0:c.y)&&Object.assign(n.style,{left:"right"===m?-n.offsetWidth/2+"px":"",right:"left"===m?-n.offsetWidth/2+"px":"",top:`${p.arrow.y}px`}))}}))}}]);