@public-ui/sample-react 2.2.14 → 2.2.15-rc.1

package/src/components/drawer/scrolled.tsx

@@ -0,0 +1,131 @@
+import type { AlignPropType } from '@public-ui/components';
+import { KolButton, KolDrawer, KolInputCheckbox } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React, { useRef, useState } from 'react';
+import { SampleDescription } from '../SampleDescription';
+import { DrawerRadioAlign } from './partials/align';
+
+export const DrawerScrolled: FC = () => {
+	const drawerElement = useRef<HTMLKolDrawerElement>(null);
+	const [align, setAlign] = useState<AlignPropType>('bottom');
+	const [useOverflowHandling, setUseOverflowHandling] = useState(true);
+
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					This sample demonstrates how KolDrawer handles content that exceeds the drawer dimensions and shows the correct way to handle overflow. Use the
+					&#34;Enable Overflow Handling&#34; toggle to see the difference between problematic behavior (content exceeding drawer bounds) and the proper solution
+					(overflow handling within the slot content).
+				</p>
+			</SampleDescription>
+
+			<div className="flex flex-col gap-4 mb-4">
+				<DrawerRadioAlign value={align} onChange={(_, value) => setAlign(value as AlignPropType)} />
+				<KolInputCheckbox
+					_label="Enable Overflow Handling (Recommended)"
+					_checked={useOverflowHandling}
+					_on={{ onChange: (_, value) => setUseOverflowHandling(!!value) }}
+				/>
+			</div>
+			<div className="flex flex-wrap gap-4">
+				<KolDrawer ref={drawerElement} _label="Scrollable Drawer" _align={align}>
+					{useOverflowHandling ? (
+						// ✅ Correct approach: Outer container with fixed dimensions and overflow handling
+						<div
+							style={{
+								width: align === 'left' || align === 'right' ? '90vw' : undefined,
+								height: align === 'top' || align === 'bottom' ? '90vh' : undefined,
+								overflow: 'auto',
+								padding: '0',
+								border: '1px solid #999',
+							}}
+						>
+							<div
+								style={{
+									width: align === 'left' || align === 'right' ? '150vw' : undefined,
+									height: align === 'top' || align === 'bottom' ? '150vh' : undefined,
+									background:
+										'linear-gradient(45deg, #f0f0f0 25%, transparent 25%), linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f0f0f0 75%), linear-gradient(-45deg, transparent 75%, #f0f0f0 75%)',
+									backgroundSize: '20px 20px',
+									backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0px',
+									border: '2px dashed #ccc',
+									padding: '20px',
+									display: 'flex',
+									flexDirection: 'column',
+									gap: '20px',
+								}}
+							>
+								<p>✅ Content with proper overflow handling - scrollable within drawer bounds</p>
+								<div>
+									<h3>Large Content Area (Scrollable)</h3>
+									<p>
+										Container: {align === 'left' || align === 'right' ? '400px wide' : '90vw wide'} ×{' '}
+										{align === 'top' || align === 'bottom' ? '90vh high' : '400px high'}
+									</p>
+									<p>
+										Content: {align === 'left' || align === 'right' ? '150vw wide' : '400px wide'} ×{' '}
+										{align === 'top' || align === 'bottom' ? '150vh high' : '400px high'}
+									</p>
+									<p>
+										<strong>Overflow Handling:</strong> Enabled - Container has fixed size with overflow: auto
+									</p>
+									<p>
+										Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
+										diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
+										dolor sit amet.
+									</p>
+									<p>
+										With overflow handling enabled, this content scrolls properly within the drawer container. You can scroll horizontally/vertically to see all
+										content.
+									</p>
+									<div style={{ marginTop: 'auto', paddingTop: '40px' }}>
+										<KolButton _label="Close drawer" _on={{ onClick: () => drawerElement.current?.close() }} />
+									</div>
+								</div>
+							</div>
+						</div>
+					) : (
+						// ❌ Problematic approach: Content directly exceeds drawer bounds
+						<div
+							style={{
+								width: align === 'left' || align === 'right' ? '150vw' : '400px',
+								height: align === 'top' || align === 'bottom' ? '150vh' : '400px',
+								background:
+									'linear-gradient(45deg, #f0f0f0 25%, transparent 25%), linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f0f0f0 75%), linear-gradient(-45deg, transparent 75%, #f0f0f0 75%)',
+								backgroundSize: '20px 20px',
+								backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0px',
+								border: '2px dashed #ccc',
+								padding: '20px',
+								display: 'flex',
+								flexDirection: 'column',
+								gap: '20px',
+							}}
+						>
+							<p>❌ Content exceeding drawer bounds - problematic behavior</p>
+							<div>
+								<h3>Large Content Area</h3>
+								<p>Width: {align === 'left' || align === 'right' ? '150vw (exceeds drawer width)' : '400px'}</p>
+								<p>Height: {align === 'top' || align === 'bottom' ? '150vh (exceeds drawer height)' : '400px'}</p>
+								<p>
+									<strong>Overflow Handling:</strong> Disabled - Content extends beyond drawer boundaries
+								</p>
+								<p>
+									Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
+									diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
+									dolor sit amet.
+								</p>
+								<p>Without overflow handling, this content may extend beyond the drawer boundaries, causing layout issues.</p>
+								<div style={{ marginTop: 'auto', paddingTop: '40px' }}>
+									<KolButton _label="Close drawer" _on={{ onClick: () => drawerElement.current?.close() }} />
+								</div>
+							</div>
+						</div>
+					)}
+				</KolDrawer>
+
+				<KolButton _label="Open scrollable drawer" _on={{ onClick: () => drawerElement.current?.open() }} />
+			</div>
+		</>
+	);
+};

package/src/components/form/basic.tsx

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

package/src/components/form/error-list.tsx

@@ -1,4 +1,4 @@
-import { KolButton, KolForm, KolInputText } from '@public-ui/react';
+import { KolButton, KolForm, KolInputText } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React, { useEffect, useRef } from 'react';
 import { SampleDescription } from '../SampleDescription';

package/src/components/handout/basic.tsx

@@ -33,7 +33,7 @@ import {
 	KolTabs,
 	KolTextarea,
 	KolVersion,
-} from '@public-ui/react';
+} from '@public-ui/react-v19';
 
 import { getTheme, getThemeName } from '../../shares/store';
 import { getRoot } from '../../shares/react-roots';

package/src/components/heading/badged.tsx

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

package/src/components/heading/basic.tsx

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

package/src/components/heading/paragraph.tsx

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

package/src/components/heading/secondary.tsx

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

package/src/components/icon/basic.tsx

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

package/src/components/image/basic.tsx

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

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

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

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

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

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

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

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

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

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

@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react';
-import { KolInputDate } from '@public-ui/react';
+import { KolInputDate } from '@public-ui/react-v19';
 import type { Components } from '@public-ui/components';
 
 export const InputDateMinMaxCases = forwardRef<HTMLKolInputDateElement, Components.KolInputDate>(function InputDateCases(props) {

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

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

package/src/components/input-date/show-hide-msg.tsx

@@ -1,4 +1,4 @@
-import { KolInputCheckbox, KolInputDate } from '@public-ui/react';
+import { KolInputCheckbox, KolInputDate } from '@public-ui/react-v19';
 import React, { useState } from 'react';
 import { SampleDescription } from '../SampleDescription';
 

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

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

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

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

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

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

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

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

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

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

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

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React, { useState } from 'react';
 
-import { KolButton, KolForm, KolInputCheckbox, KolInputRadio } from '@public-ui/react';
+import { KolButton, KolForm, KolInputCheckbox, KolInputRadio } from '@public-ui/react-v19';
 
 import { SampleDescription } from '../SampleDescription';
 

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

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolForm, KolInputRadio } from '@public-ui/react';
+import { KolForm, KolInputRadio } from '@public-ui/react-v19';
 
 import { SampleDescription } from '../SampleDescription';
 

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

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

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

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

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

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

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

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

package/src/components/input-text/hide-errors.tsx

@@ -1,4 +1,4 @@
-import { KolAlert, KolCard, KolInputText } from '@public-ui/react';
+import { KolAlert, KolCard, KolInputText } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
 import { SampleDescription } from '../SampleDescription';

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

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

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';
+import { KolInputText } from '@public-ui/react-v19';
 
 export const InputTextSmartButton = () => {
 	const toaster = ToasterService.getInstance(document);

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';
+import { KolForm, KolHeading, KolInputText } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 import { NumericFormat, type NumberFormatValues } from 'react-number-format';

package/src/components/kolibri/basic.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolHeading, KolKolibri } from '@public-ui/react';
+import { KolHeading, KolKolibri } from '@public-ui/react-v19';
 
 import { SampleDescription } from '../SampleDescription';
 

package/src/components/link/access-key.tsx

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

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

@@ -1,4 +1,4 @@
-import { KolLink } from '@public-ui/react';
+import { KolLink } from '@public-ui/react-v19';
 import React from 'react';
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';

package/src/components/link/basic.tsx

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

package/src/components/link/icons.tsx

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

package/src/components/link/image.tsx

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

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

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

package/src/components/link/target.tsx

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

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

@@ -1,4 +1,4 @@
-import { KolLinkButton } from '@public-ui/react';
+import { KolLinkButton } from '@public-ui/react-v19';
 import React from 'react';
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';

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

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

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

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolBadge, KolLinkGroup } from '@public-ui/react';
+import { KolBadge, KolLinkGroup } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 const links = [

package/src/components/link-group/horizontal.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolBadge, KolLinkGroup } from '@public-ui/react';
+import { KolBadge, KolLinkGroup } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 const links = [

package/src/components/modal/basic.tsx

@@ -2,7 +2,7 @@ import type { FC } from 'react';
 import React, { useEffect, useRef } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
-import { KolButton, KolCard, KolModal } from '@public-ui/react';
+import { KolButton, KolCard, KolModal } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 export const ModalBasic: FC = () => {
@@ -10,6 +10,8 @@ export const ModalBasic: FC = () => {
 	const modalState = searchParams.get('show-modal') as string;
 	const modalElement = useRef<HTMLKolModalElement>(null);
 	const stackedModalElement = useRef<HTMLKolModalElement>(null);
+	const simpleModalElement = useRef<HTMLKolModalElement>(null);
+	const closerCardModalElement = useRef<HTMLKolModalElement>(null);
 
 	useEffect(() => {
 		if (modalState === 'true') {
@@ -26,7 +28,7 @@ export const ModalBasic: FC = () => {
 				</p>
 			</SampleDescription>
 
-			<div className="flex">
+			<div className="flex flex-col gap-4">
 				<KolModal _label="Primary modal" _width="80%" ref={modalElement} _on={{ onClose: () => console.log('Modal closed') }}>
 					<KolCard _label="I am a modal.">
 						<KolButton
@@ -63,14 +65,52 @@ export const ModalBasic: FC = () => {
 					</KolCard>
 				</KolModal>
 
-				<KolButton
-					_label="Open modal"
-					_on={{
-						onClick: () => {
-							modalElement.current?.openModal();
-						},
-					}}
-				/>
+				<KolModal _label="Simple modal" _width="80%" ref={simpleModalElement}>
+					<div className="p-4">
+						<p>This modal does not contain a KolCard.</p>
+						<KolButton
+							_label="Close modal"
+							_on={{
+								onClick: () => {
+									simpleModalElement.current?.closeModal();
+								},
+							}}
+						/>
+					</div>
+				</KolModal>
+
+				<KolModal _label="Modal with KolCard" _width="80%" ref={closerCardModalElement}>
+					<KolCard _label="Closable modal" _hasCloser _on={{ onClose: () => closerCardModalElement.current?.closeModal() }}>
+						<p>This KolCard has a closer button.</p>
+					</KolCard>
+				</KolModal>
+
+				<div className="flex flex-wrap gap-4">
+					<KolButton
+						_label="Open modal"
+						_on={{
+							onClick: () => {
+								modalElement.current?.openModal();
+							},
+						}}
+					/>
+					<KolButton
+						_label="Open simple modal"
+						_on={{
+							onClick: () => {
+								simpleModalElement.current?.openModal();
+							},
+						}}
+					/>
+					<KolButton
+						_label="Open closer modal"
+						_on={{
+							onClick: () => {
+								closerCardModalElement.current?.openModal();
+							},
+						}}
+					/>
+				</div>
 			</div>
 		</>
 	);

package/src/components/nav/aria-current.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KolNav } from '@public-ui/react';
+import { KolNav } from '@public-ui/react-v19';
 
 import { SampleDescription } from '../SampleDescription';
 

package/src/components/nav/basic.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import { KolHeading, KolInputCheckbox, KolNav } from '@public-ui/react';
+import { KolHeading, KolInputCheckbox, KolNav } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 import { LINKS, LINKS_WITHOUT_SUBMENU } from './links';