negodesign 0.0.71 → 0.0.72

package/dist/components/ui/input-otp/input-otp-separator.svelte

@@ -2,8 +2,8 @@
 	import type { HTMLAttributes } from "svelte/elements";
 	import type { WithElementRef } from "../../../utils.js";
 	import { cn } from "../../../utils.js";
-	import { HugeiconsIcon } from "@hugeicons/svelte"
-	import { MinusSignIcon } from '@hugeicons/core-free-icons';
+	import { HugeiconsIcon } from "@hugeicons/svelte";
+	import { MinusSignIcon } from "@hugeicons/core-free-icons";
 
 	let {
 		ref = $bindable(null),
@@ -17,12 +17,12 @@
 	bind:this={ref}
 	data-slot="input-otp-separator"
 	role="separator"
-	class={cn("[&_svg:not([class*='size-'])]:size-4 flex items-center", className)}
+	class={cn("flex items-center -mx-1 [&_svg:not([class*='size-'])]:size-4", className)}
 	{...restProps}
 >
 	{#if children}
 		{@render children?.()}
 	{:else}
-		<HugeiconsIcon icon={MinusSignIcon} strokeWidth={2}  />
+		<HugeiconsIcon icon={MinusSignIcon} strokeWidth={2} />
 	{/if}
-</div>
+</div>

package/dist/components/ui/input-otp/input-otp-slot.svelte

@@ -1,31 +1,64 @@
 <script lang="ts">
-	import { PinInput as InputOTPPrimitive } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import type { HTMLInputAttributes } from "svelte/elements";
+	import { cn, type WithElementRef, type WithoutChildren } from "../../../utils.js";
+	import { getInputOTPContext, type OtpCell } from "./context.svelte.js";
 
 	let {
 		ref = $bindable(null),
 		cell,
 		class: className,
 		...restProps
-	}: InputOTPPrimitive.CellProps = $props();
+	}: WithoutChildren<WithElementRef<HTMLInputAttributes, HTMLInputElement>> & {
+		cell: OtpCell;
+	} = $props();
+
+	const ctx = getInputOTPContext();
+	const index = $derived(cell.index);
+
+	$effect(() => {
+		ctx.registerInput(index, ref);
+	});
+
+	function handleInput(event: Event & { currentTarget: HTMLInputElement }) {
+		ctx.setValueAt(index, event.currentTarget.value);
+	}
+
+	function handleFocus() {
+		ctx.setActive(index);
+		ref?.select();
+	}
+
+	function handleBlur() {
+		ctx.setActive(null);
+	}
+
+	function handleKeyDown(event: KeyboardEvent) {
+		ctx.handleKeyDown(index, event);
+	}
+
+	function handlePaste(event: ClipboardEvent) {
+		ctx.handlePaste(index, event);
+	}
 </script>
 
-<InputOTPPrimitive.Cell
-	{cell}
-	bind:ref
+<input
+	bind:this={ref}
 	data-slot="input-otp-slot"
+	type="text"
+	inputmode="numeric"
+	autocomplete="one-time-code"
+	maxlength={1}
+	value={cell.char}
+	placeholder={ctx.placeholder}
+	disabled={ctx.disabled}
+	oninput={handleInput}
+	onfocus={handleFocus}
+	onblur={handleBlur}
+	onkeydown={handleKeyDown}
+	onpaste={handlePaste}
 	class={cn(
-		"bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-9 border-y border-r text-sm transition-all outline-none first:rounded-l-4xl first:border-l last:rounded-r-4xl data-[active=true]:ring-[3px] relative flex items-center justify-center data-[active=true]:z-10",
+		"border-input text-foreground bg-input/30 size-10 rounded-md border text-center text-lg shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
 		className
 	)}
 	{...restProps}
->
-	{cell.char}
-	{#if cell.hasFakeCaret}
-		<div
-			class="cn-input-otp-caret pointer-events-none absolute inset-0 flex items-center justify-center"
-		>
-			<div class="animate-caret-blink bg-foreground h-4 w-px duration-1000 bg-foreground h-4 w-px"></div>
-		</div>
-	{/if}
-</InputOTPPrimitive.Cell>
+/>

package/dist/components/ui/input-otp/input-otp-slot.svelte.d.ts

@@ -1,4 +1,9 @@
-import { PinInput as InputOTPPrimitive } from "bits-ui";
-declare const InputOtpSlot: import("svelte").Component<InputOTPPrimitive.CellProps, {}, "ref">;
+import type { HTMLInputAttributes } from "svelte/elements";
+import { type WithElementRef, type WithoutChildren } from "../../../utils.js";
+import { type OtpCell } from "./context.svelte.js";
+type $$ComponentProps = WithoutChildren<WithElementRef<HTMLInputAttributes, HTMLInputElement>> & {
+    cell: OtpCell;
+};
+declare const InputOtpSlot: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type InputOtpSlot = ReturnType<typeof InputOtpSlot>;
 export default InputOtpSlot;

package/dist/components/ui/input-otp/input-otp.svelte

@@ -1,18 +1,167 @@
 <script lang="ts">
-	import { PinInput as InputOTPPrimitive } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef, type WithoutChildren } from "../../../utils.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { setInputOTPContext, type OtpCell } from "./context.svelte.js";
 
 	let {
 		ref = $bindable(null),
-		class: className,
 		value = $bindable(""),
+		maxlength = 6,
+		length,
+		placeholder = "",
+		disabled = false,
+		id,
+		onValueChange,
+		class: className,
+		children,
 		...restProps
-	}: InputOTPPrimitive.RootProps = $props();
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> & {
+		value?: string;
+		maxlength?: number;
+		length?: number;
+		placeholder?: string;
+		disabled?: boolean;
+		id?: string;
+		onValueChange?: (value: string) => void;
+		children?: Snippet<[{ cells: OtpCell[] }]>;
+	} = $props();
+
+	const total = $derived(length ?? maxlength);
+	let activeIndex = $state<number | null>(null);
+	const inputs = $state<Array<HTMLInputElement | null>>([]);
+
+	const cells = $derived(
+		Array.from({ length: total }, (_, index) => ({
+			index,
+			char: value[index] ?? "",
+			hasFakeCaret: activeIndex === index && value[index] === "",
+		}))
+	);
+
+	function focusIndex(index: number) {
+		if (index < 0 || index >= total) return;
+		const el = inputs[index];
+		el?.focus();
+		el?.select();
+	}
+
+	function focusNext(index: number) {
+		focusIndex(Math.min(index + 1, total - 1));
+	}
+
+	function focusPrev(index: number) {
+		focusIndex(index - 1);
+	}
+
+	function registerInput(index: number, el: HTMLInputElement | null) {
+		inputs[index] = el;
+	}
+
+	function setActive(index: number | null) {
+		activeIndex = index;
+	}
+
+	function setValueAt(index: number, char: string) {
+		if (index < 0 || index >= total) return;
+		const chars = value.split("");
+		chars[index] = char.slice(0, 1);
+		value = chars.join("");
+		activeIndex = Math.min(index + 1, total - 1);
+		focusNext(index);
+	}
+
+	function clearValueAt(index: number) {
+		if (index < 0 || index >= total) return;
+		const chars = value.split("");
+		chars[index] = "";
+		value = chars.join("");
+	}
+
+	function handleKeyDown(index: number, event: KeyboardEvent) {
+		if (event.key === "Backspace") {
+			event.preventDefault();
+			if (value[index]) {
+				clearValueAt(index);
+			} else {
+				clearValueAt(index - 1);
+				focusPrev(index);
+			}
+		} else if (event.key === "Delete") {
+			event.preventDefault();
+			clearValueAt(index);
+		} else if (event.key === "ArrowLeft") {
+			event.preventDefault();
+			focusPrev(index);
+		} else if (event.key === "ArrowRight") {
+			event.preventDefault();
+			focusNext(index);
+		} else if (event.key === "Home") {
+			event.preventDefault();
+			focusIndex(0);
+		} else if (event.key === "End") {
+			event.preventDefault();
+			focusIndex(total - 1);
+		}
+	}
+
+	function handlePaste(index: number, event: ClipboardEvent) {
+		event.preventDefault();
+		const digits = (event.clipboardData?.getData("text") ?? "")
+			.replace(/\D/g, "")
+			.split("");
+		if (!digits.length) return;
+		const chars = value.split("");
+		let cursor = index;
+		for (const digit of digits) {
+			if (cursor >= total) break;
+			chars[cursor] = digit;
+			cursor++;
+		}
+		value = chars.join("");
+		activeIndex = cursor - 1;
+		focusIndex(cursor - 1);
+	}
+
+	// svelte-ignore state_referenced_locally
+	let ctxState = $state({
+		value,
+		maxlength: total,
+		placeholder,
+		disabled,
+		activeIndex: null as number | null,
+		setActive,
+		setValueAt,
+		clearValueAt,
+		focusNext,
+		focusPrev,
+		handleKeyDown,
+		handlePaste,
+		registerInput,
+	});
+
+	const ctx = setInputOTPContext(ctxState);
+
+	$effect(() => {
+		ctx.value = value;
+		ctx.maxlength = total;
+		ctx.placeholder = placeholder;
+		ctx.disabled = disabled;
+		ctx.activeIndex = activeIndex;
+	});
+
+	let isInitialValue = true;
+	$effect(() => {
+		if (isInitialValue) {
+			isInitialValue = false;
+			return;
+		}
+		onValueChange?.(value);
+	});
 </script>
 
-<InputOTPPrimitive.Root
-	bind:ref
-	bind:value
+<div
+	bind:this={ref}
 	data-slot="input-otp"
 	spellcheck={false}
 	class={cn(
@@ -20,4 +169,14 @@
 		className
 	)}
 	{...restProps}
-/>
+>
+	{@render children?.({ cells })}
+	<input
+		type="hidden"
+		data-slot="input-otp-input"
+		value={value}
+		{id}
+		disabled={disabled}
+		aria-hidden={true}
+	/>
+</div>

package/dist/components/ui/input-otp/input-otp.svelte.d.ts

@@ -1,4 +1,19 @@
-import { PinInput as InputOTPPrimitive } from "bits-ui";
-declare const InputOtp: import("svelte").Component<InputOTPPrimitive.RootProps, {}, "ref" | "value">;
+import { type WithElementRef, type WithoutChildren } from "../../../utils.js";
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import { type OtpCell } from "./context.svelte.js";
+type $$ComponentProps = WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> & {
+    value?: string;
+    maxlength?: number;
+    length?: number;
+    placeholder?: string;
+    disabled?: boolean;
+    id?: string;
+    onValueChange?: (value: string) => void;
+    children?: Snippet<[{
+        cells: OtpCell[];
+    }]>;
+};
+declare const InputOtp: import("svelte").Component<$$ComponentProps, {}, "ref" | "value">;
 type InputOtp = ReturnType<typeof InputOtp>;
 export default InputOtp;

package/dist/components/ui/label/label.svelte

@@ -1,20 +1,20 @@
 <script lang="ts">
-	import { Label as LabelPrimitive } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLLabelAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
 		class: className,
+		children,
 		...restProps
-	}: LabelPrimitive.RootProps = $props();
+	}: WithElementRef<HTMLLabelAttributes> = $props();
 </script>
 
-<LabelPrimitive.Root
-	bind:ref
+<label
+	bind:this={ref}
 	data-slot="label"
-	class={cn(
-		"gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed",
-		className
-	)}
+	class={cn("text-sm font-medium leading-4 text-foreground", className)}
 	{...restProps}
-/>
+>
+	{@render children?.()}
+</label>

package/dist/components/ui/label/label.svelte.d.ts

@@ -1,4 +1,5 @@
-import { Label as LabelPrimitive } from "bits-ui";
-declare const Label: import("svelte").Component<LabelPrimitive.RootProps, {}, "ref">;
+import { type WithElementRef } from "../../../utils.js";
+import type { HTMLLabelAttributes } from "svelte/elements";
+declare const Label: import("svelte").Component<WithElementRef<HTMLLabelAttributes>, {}, "ref">;
 type Label = ReturnType<typeof Label>;
 export default Label;

package/dist/components/ui/language-switcher/language-switcher.svelte

@@ -11,7 +11,8 @@
 </script>
 
 <script lang="ts">
-  import GlobeIcon from "@lucide/svelte/icons/globe";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import { GlobalIcon } from "@hugeicons/core-free-icons";
   import * as DropdownMenu from "../dropdown-menu";
   import { buttonVariants } from "../button";
   import { t, locale, locales } from "../../../i18n";
@@ -33,7 +34,7 @@
     )}
     aria-label="Change language"
   >
-    <GlobeIcon class="size-4" />
+    <HugeiconsIcon icon={GlobalIcon} class="size-4" />
     <span class="sr-only">Change language</span>
   </DropdownMenu.Trigger>
   <DropdownMenu.Content {align}>
@@ -45,4 +46,4 @@
       {/each}
     </DropdownMenu.RadioGroup>
   </DropdownMenu.Content>
-</DropdownMenu.Root>
+</DropdownMenu.Root>

package/dist/components/ui/light-switch/light-switch.svelte

@@ -8,9 +8,9 @@
 </script>
 
 <script lang="ts">
-  import SunIcon from "@lucide/svelte/icons/sun";
-  import MoonIcon from "@lucide/svelte/icons/moon";
-  import { toggleMode } from "mode-watcher";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import { Sun01Icon, Moon01Icon } from "@hugeicons/core-free-icons";
+  import { toggleMode } from "../../../theme.svelte";
   import Button from "../button/button.svelte";
 
   let { variant = "outline", size = "default" }: LightSwitchProps = $props();
@@ -25,18 +25,24 @@
     "icon-sm": "icon-sm",
     "icon-lg": "icon-lg",
   };
+
+  function handleClick() {
+    toggleMode();
+  }
 </script>
 
 <Button
-  onclick={toggleMode}
+  onclick={handleClick}
   {variant}
   size={sizeMap[size] as ButtonSize}
   class="relative rounded-full bg-input"
 >
-  <SunIcon
+  <HugeiconsIcon
+    icon={Sun01Icon}
     class="scale-100 rotate-0 transition-all! dark:scale-0 dark:-rotate-90"
   />
-  <MoonIcon
+  <HugeiconsIcon
+    icon={Moon01Icon}
     class="absolute scale-0 rotate-90 transition-all! dark:scale-100 dark:rotate-0"
   />
   <span class="sr-only">Toggle theme</span>

package/dist/components/ui/phone-input/country-selector.svelte

@@ -1,101 +1,87 @@
+<script lang="ts" module>
+	import type { Country } from './types';
+
+	export const COUNTRIES: Country[] = [
+		{ id: 'ao', iso2: 'ao', name: 'Angola', dialCode: '244' },
+		{ id: 'br', iso2: 'br', name: 'Brazil', dialCode: '55' },
+		{ id: 'cv', iso2: 'cv', name: 'Cape Verde', dialCode: '238' },
+		{ id: 'cn', iso2: 'cn', name: 'China', dialCode: '86' },
+		{ id: 'fr', iso2: 'fr', name: 'France', dialCode: '33' },
+		{ id: 'gw', iso2: 'gw', name: 'Guinea-Bissau', dialCode: '245' },
+		{ id: 'jp', iso2: 'jp', name: 'Japan', dialCode: '81' },
+		{ id: 'mz', iso2: 'mz', name: 'Mozambique', dialCode: '258' },
+		{ id: 'pt', iso2: 'pt', name: 'Portugal', dialCode: '351' },
+		{ id: 'st', iso2: 'st', name: 'São Tomé and Príncipe', dialCode: '239' },
+		{ id: 'za', iso2: 'za', name: 'South Africa', dialCode: '27' },
+		{ id: 'es', iso2: 'es', name: 'Spain', dialCode: '34' },
+		{ id: 'gb', iso2: 'gb', name: 'United Kingdom', dialCode: '44' },
+		{ id: 'us', iso2: 'us', name: 'United States', dialCode: '1' }
+	];
+</script>
+
 <script lang="ts">
-	import * as Popover from '../popover';
-	import Button from '../button/button.svelte';
-	import * as Command from '../command';
-	import { ScrollArea } from '../scroll-area';
-	import CheckIcon from '@lucide/svelte/icons/check';
-	import ChevronsUpDownIcon from '@lucide/svelte/icons/chevrons-up-down';
 	import { cn } from '../../../utils.js';
-	import Flag from './flag.svelte';
-	import type { Country, CountryCode } from 'svelte-tel-input/types';
+	import { HugeiconsIcon } from '@hugeicons/svelte';
+	import { GlobalIcon, UnfoldMoreIcon } from '@hugeicons/core-free-icons';
+	import type { CountryCode } from './types';
 
 	interface Props {
-		/** List of countries */
-		countries: Country[];
-		disabled?: boolean;
 		selected?: CountryCode | null;
+		dialCode?: string;
+		disabled?: boolean;
 		onselect?: (val: CountryCode | null) => void;
-		/** Default ordering is alphabetical by country name supply this function to customize the sorting behavior  */
 		order?: (a: Country, b: Country) => number;
 	}
 
 	let {
-		countries,
-		disabled = false,
 		selected = $bindable(null),
+		// eslint-disable-next-line no-useless-assignment
+	dialCode = $bindable(''),
+		disabled = false,
 		onselect = undefined,
 		order = (a, b) => {
 			return a.name.localeCompare(b.name);
 		}
 	}: Props = $props();
 
-	let selectedCountry = $derived(countries.find((a) => a.iso2 == selected));
+	let ordered = $derived(COUNTRIES.slice().sort(order));
 
-	let open = $state(false);
-	let selectedValue = $state(false);
-
-	function selectCountry(country: Country) {
-		selected = country.iso2;
-		selectedValue = true;
-		open = false;
+	function handleChange(e: Event) {
+		selected = (e.currentTarget as HTMLSelectElement).value;
 		onselect?.(selected);
 	}
+
+	$effect(() => {
+		const country = COUNTRIES.find((c) => c.iso2 === selected);
+		dialCode = country?.dialCode ?? '';
+	});
 </script>
 
-<Popover.Root bind:open>
-	<Popover.Trigger>
-		{#snippet child({ props })}
-			<Button
-				{...props}
-				type="button"
-				variant="outline"
-				class={cn('flex shrink-0 gap-1 rounded-l-lg rounded-r-none px-3')}
-				{disabled}
-			>
-				<Flag country={selectedCountry} />
-				<ChevronsUpDownIcon
-					class={cn('-mr-2 h-4 w-4 opacity-50', disabled ? 'hidden' : 'opacity-100')}
-				/>
-			</Button>
-		{/snippet}
-	</Popover.Trigger>
-	<Popover.Content
-		class="w-[300px] p-0"
-		align="start"
-		onCloseAutoFocus={(e) => {
-			if (selectedValue) {
-				selectedValue = false;
-				e.preventDefault();
-			}
-		}}
+<div class="relative flex shrink-0 items-center">
+	<HugeiconsIcon
+		icon={GlobalIcon}
+		strokeWidth={2}
+		class="text-muted-foreground pointer-events-none absolute left-2.5 size-4"
+	/>
+	<select
+		value={selected ?? ''}
+		onchange={handleChange}
+		aria-label="Country code"
+		{disabled}
+		class={cn(
+			'border-input bg-input/30 focus-visible:ring-ring/50 dark:bg-input/30 focus-visible:border-ring h-9 w-fit appearance-none rounded-l-md rounded-r-none border py-1 pr-8 pl-8 text-sm transition-[color,box-shadow] focus-visible:ring-[3px] outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>option]:bg-background',
+			disabled ? 'cursor-not-allowed opacity-50' : ''
+		)}
 	>
-		<Command.Root>
-			<Command.Input placeholder="Search..." />
-			<Command.List>
-				<ScrollArea class="h-72">
-					<Command.Empty>No country found.</Command.Empty>
-					<Command.Group class="overflow-clip">
-						{#each countries.sort(order) as country (country.id)}
-							<Command.Item
-								class="gap-2 [&_.cn-command-item-indicator]:hidden"
-								value={country.name}
-								onSelect={() => selectCountry(country)}
-							>
-								<Flag {country} />
-								<span class="flex-1 text-sm">{country.name}</span>
-								<span class="text-foreground/50 text-sm">
-									+{country.dialCode}
-								</span>
-								<div class="w-4">
-									{#if country.iso2 == selected}
-										<CheckIcon class="phone-input-check-icon size-4" />
-									{/if}
-								</div>
-							</Command.Item>
-						{/each}
-					</Command.Group>
-				</ScrollArea>
-			</Command.List>
-		</Command.Root>
-	</Popover.Content>
-</Popover.Root>
+		{#each ordered as country (country.id)}
+			<option value={country.iso2}>
+				{country.name} (+{country.dialCode})
+			</option>
+		{/each}
+	</select>
+	<HugeiconsIcon
+		icon={UnfoldMoreIcon}
+		strokeWidth={2}
+		class="text-muted-foreground pointer-events-none absolute right-2.5 size-4"
+	/>
+</div>

package/dist/components/ui/phone-input/country-selector.svelte.d.ts

@@ -1,13 +1,13 @@
-import type { Country, CountryCode } from 'svelte-tel-input/types';
+import type { Country } from './types';
+export declare const COUNTRIES: Country[];
+import type { CountryCode } from './types';
 interface Props {
-    /** List of countries */
-    countries: Country[];
-    disabled?: boolean;
     selected?: CountryCode | null;
+    dialCode?: string;
+    disabled?: boolean;
     onselect?: (val: CountryCode | null) => void;
-    /** Default ordering is alphabetical by country name supply this function to customize the sorting behavior  */
     order?: (a: Country, b: Country) => number;
 }
-declare const CountrySelector: import("svelte").Component<Props, {}, "selected">;
+declare const CountrySelector: import("svelte").Component<Props, {}, "selected" | "dialCode">;
 type CountrySelector = ReturnType<typeof CountrySelector>;
 export default CountrySelector;

package/dist/components/ui/phone-input/flag.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-	import type { Country } from 'svelte-tel-input/types';
-	import { getFlag } from './flags';
+	import type { Country } from './types';
 
 	interface Props {
 		country?: Country | null;
@@ -9,13 +8,5 @@
 	let { country = null }: Props = $props();
 </script>
 
-<span
-	class="bg-foreground/20 flex h-4 w-6 shrink-0 overflow-clip rounded-sm [&>svg]:h-4! [&>svg]:w-6!"
->
-	{#await getFlag(country) then flag}
-		{#if flag}
-			<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-			{@html flag}
-		{/if}
-	{/await}
-</span>
+<span class="bg-foreground/20 flex h-4 w-6 shrink-0 overflow-clip rounded-sm">
+</span>

package/dist/components/ui/phone-input/flag.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Country } from 'svelte-tel-input/types';
+import type { Country } from './types';
 interface Props {
     country?: Country | null;
 }

package/dist/components/ui/phone-input/flags.d.ts

@@ -1,2 +1,3 @@
-import type { Country } from 'svelte-tel-input/types';
+import type { Country, CountryCode } from './types';
+export declare function hasFlag(code: CountryCode): boolean;
 export declare function getFlag(country: Country | null): Promise<string | null>;