@reshape-biotech/design-system 1.2.5 → 1.2.7

package/dist/components/select-new/components/SelectGroupHeading.svelte

@@ -1,19 +1,19 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from 'bits-ui';
-	import type { GroupHeadingProps } from '../types';
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import type { GroupHeadingProps } from '../types';
 
-	import type { Snippet } from 'svelte';
+  import type { Snippet } from 'svelte';
 
-	interface Props extends GroupHeadingProps {
-		children: Snippet;
-		class?: string;
-	}
+  interface Props extends GroupHeadingProps {
+    children: Snippet;
+    class?: string;
+  }
 
-	let { class: className = '', children, ...restProps }: Props = $props();
+  let { class: className = '', children, ...restProps }: Props = $props();
 
-	const baseClasses = 'py-1.5 pl-2 pr-2 text-sm font-semibold text-muted-foreground';
+  const baseClasses = 'py-1.5 pl-2 pr-2 text-sm font-semibold text-muted-foreground';
 </script>
 
 <SelectPrimitive.GroupHeading {...restProps} class="{baseClasses} {className}">
-	{@render children()}
+  {@render children()}
 </SelectPrimitive.GroupHeading>

package/dist/components/select-new/components/SelectItem.svelte

@@ -1,18 +1,18 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from 'bits-ui';
-	import type { ItemProps, ItemSlotProps } from '../types';
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import type { ItemProps, ItemSlotProps } from '../types';
 
-	import type { Snippet } from 'svelte';
-	import Icon from '../../icons/Icon.svelte';
+  import type { Snippet } from 'svelte';
+  import Icon from '../../icons/Icon.svelte';
 
-	interface Props extends ItemProps {
-		children?: Snippet<[ItemSlotProps]>;
-		class?: string;
-	}
+  interface Props extends ItemProps {
+    children?: Snippet<[ItemSlotProps]>;
+    class?: string;
+  }
 
-	let { class: className = '', children, ...restProps }: Props = $props();
+  let { class: className = '', children, ...restProps }: Props = $props();
 
-	const baseClasses = `
+  const baseClasses = `
         relative flex w-full h-auto gap-2 cursor-default select-none items-center justify-between rounded-lg p-3 text-sm outline-none 
         focus:bg-neutral focus:text-accent-foreground 
         data-[disabled]:pointer-events-none data-[disabled]:opacity-50
@@ -21,19 +21,19 @@
 </script>
 
 <SelectPrimitive.Item {...restProps} class={baseClasses + ' ' + className}>
-	{#snippet children(params: ItemSlotProps)}
-		{#if children}
-			{@render children(params)}
-		{:else}
-			<span>
-				{restProps.label ??
-					(typeof restProps.value === 'string' || typeof restProps.value === 'number'
-						? restProps.value
-						: 'Item')}</span
-			>
-		{/if}
-		{#if params.selected}
-			<Icon iconName="Check" color="accent" />
-		{/if}
-	{/snippet}
+  {#snippet children(params: ItemSlotProps)}
+    {#if children}
+      {@render children(params)}
+    {:else}
+      <span>
+        {restProps.label ??
+          (typeof restProps.value === 'string' || typeof restProps.value === 'number'
+            ? restProps.value
+            : 'Item')}</span
+      >
+    {/if}
+    {#if params.selected}
+      <Icon iconName="Check" color="accent" />
+    {/if}
+  {/snippet}
 </SelectPrimitive.Item>

package/dist/components/select-new/components/SelectTrigger.svelte

@@ -1,48 +1,48 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from 'bits-ui';
-	import type { TriggerProps, IconSnippet } from '../types';
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import type { TriggerProps, IconSnippet } from '../types';
 
-	import type { Snippet } from 'svelte';
-	import { Icon } from '../../icons';
+  import type { Snippet } from 'svelte';
+  import { Icon } from '../../icons';
 
-	interface Props extends TriggerProps {
-		TriggerIcon?: IconSnippet;
-		children?: Snippet;
-		class?: string;
-		placeholder?: string;
-		displayValue?: string;
-	}
+  interface Props extends TriggerProps {
+    TriggerIcon?: IconSnippet;
+    children?: Snippet;
+    class?: string;
+    placeholder?: string;
+    displayValue?: string;
+  }
 
-	let {
-		class: className = '',
-		TriggerIcon = undefined,
-		children,
-		placeholder = 'Select an option',
-		displayValue = undefined,
-		...restProps
-	}: Props = $props();
+  let {
+    class: className = '',
+    TriggerIcon = undefined,
+    children,
+    placeholder = 'Select an option',
+    displayValue = undefined,
+    ...restProps
+  }: Props = $props();
 
-	const baseClasses =
-		'flex h-10 w-full items-center justify-between rounded-lg border border-input bg-surface p-2 text-sm placeholder:text-tertiary focus:outline-none hover:border-hover focus:border-accent disabled:cursor-not-allowed disabled:opacity-50 transition-colors shadow-input';
+  const baseClasses =
+    'flex h-10 w-full items-center justify-between rounded-lg border border-input bg-surface p-2 text-sm placeholder:text-tertiary focus:outline-none hover:border-hover focus:border-accent disabled:cursor-not-allowed disabled:opacity-50 transition-colors shadow-input';
 </script>
 
 <SelectPrimitive.Trigger
-	{...restProps}
-	class={baseClasses + ' ' + className}
-	aria-label={placeholder}
+  {...restProps}
+  class={baseClasses + ' ' + className}
+  aria-label={placeholder}
 >
-	<div class="flex-1 truncate text-left">
-		{#if children}
-			{@render children()}
-		{:else if displayValue !== undefined}
-			{displayValue}
-		{:else}
-			<span class="text-tertiary">{placeholder}</span>
-		{/if}
-	</div>
-	{#if TriggerIcon}
-		{@render TriggerIcon()}
-	{:else}
-		<Icon iconName="CaretDown" color="secondary" class="mx-1 shrink-0" />
-	{/if}
+  <div class="flex-1 truncate text-left">
+    {#if children}
+      {@render children()}
+    {:else if displayValue !== undefined}
+      {displayValue}
+    {:else}
+      <span class="text-tertiary">{placeholder}</span>
+    {/if}
+  </div>
+  {#if TriggerIcon}
+    {@render TriggerIcon()}
+  {:else}
+    <Icon iconName="CaretDown" color="secondary" class="mx-1 shrink-0" />
+  {/if}
 </SelectPrimitive.Trigger>

package/dist/components/sjsf-wrappers/SjsfNumberInputWrapper.svelte

@@ -1,92 +1,92 @@
 <script lang="ts">
-	import type { ComponentProps } from '@sjsf/form';
-	import { getFormContext, inputAttributes } from '@sjsf/form';
-	import Input from '../input/Input.svelte';
-	import type { FocusEventHandler } from 'svelte/elements';
+  import type { ComponentProps } from '@sjsf/form';
+  import { getFormContext, inputAttributes } from '@sjsf/form';
+  import Input from '../input/Input.svelte';
+  import type { FocusEventHandler } from 'svelte/elements';
 
-	type Props = ComponentProps['numberWidget'];
+  type Props = ComponentProps['numberWidget'];
 
-	let { value = $bindable(), config, handlers, errors }: Props = $props();
+  let { value = $bindable(), config, handlers, errors }: Props = $props();
 
-	const ctx = getFormContext();
+  const ctx = getFormContext();
 
-	const derivedAttrs = $derived(
-		inputAttributes(ctx, config, 'number', handlers, {
-			type: 'number'
-		})
-	);
-	const placeholder = $derived(
-		config?.uiSchema?.['ui:placeholder'] ||
-			config?.schema?.description ||
-			(Array.isArray(config?.schema?.examples) && config.schema.examples.length > 0
-				? String(config.schema.examples[0]) // Ensure the example is also a string
-				: '') ||
-			''
-	);
+  const derivedAttrs = $derived(
+    inputAttributes(ctx, config, 'number', handlers, {
+      type: 'number',
+    })
+  );
+  const placeholder = $derived(
+    config?.uiSchema?.['ui:placeholder'] ||
+      config?.schema?.description ||
+      (Array.isArray(config?.schema?.examples) && config.schema.examples.length > 0
+        ? String(config.schema.examples[0]) // Ensure the example is also a string
+        : '') ||
+      ''
+  );
 
-	const readonly = $derived(config?.schema?.readOnly ?? false);
-	const currentClass = $derived(derivedAttrs?.class ?? 'w-full');
+  const readonly = $derived(config?.schema?.readOnly ?? false);
+  const currentClass = $derived(derivedAttrs?.class ?? 'w-full');
 
-	const onBlurHandler = $derived(
-		derivedAttrs.onblur
-			? (event: FocusEvent) =>
-					(derivedAttrs.onblur as FocusEventHandler<HTMLInputElement>)(event as any)
-			: undefined
-	);
+  const onBlurHandler = $derived(
+    derivedAttrs.onblur
+      ? (event: FocusEvent) =>
+          (derivedAttrs.onblur as FocusEventHandler<HTMLInputElement>)(event as any)
+      : undefined
+  );
 
-	const onChangeHandler = $derived(
-		derivedAttrs.onchange
-			? (event: Event) =>
-					(derivedAttrs.onchange as FocusEventHandler<HTMLInputElement>)(event as any)
-			: undefined
-	);
+  const onChangeHandler = $derived(
+    derivedAttrs.onchange
+      ? (event: Event) =>
+          (derivedAttrs.onchange as FocusEventHandler<HTMLInputElement>)(event as any)
+      : undefined
+  );
 
-	const onInputHandler = $derived(
-		derivedAttrs.oninput
-			? (event: Event) =>
-					(derivedAttrs.oninput as FocusEventHandler<HTMLInputElement>)(event as any)
-			: undefined
-	);
+  const onInputHandler = $derived(
+    derivedAttrs.oninput
+      ? (event: Event) =>
+          (derivedAttrs.oninput as FocusEventHandler<HTMLInputElement>)(event as any)
+      : undefined
+  );
 
-	const getStringValue = () => {
-		if (value === undefined || value === null || isNaN(value)) {
-			return '';
-		}
-		return String(value);
-	};
+  const getStringValue = () => {
+    if (value === undefined || value === null || isNaN(value)) {
+      return '';
+    }
+    return String(value);
+  };
 
-	const setNumericValue = (newValueFromInput: unknown) => {
-		const stringifiedInput =
-			newValueFromInput === null || newValueFromInput === undefined
-				? ''
-				: String(newValueFromInput);
+  const setNumericValue = (newValueFromInput: unknown) => {
+    const stringifiedInput =
+      newValueFromInput === null || newValueFromInput === undefined
+        ? ''
+        : String(newValueFromInput);
 
-		if (stringifiedInput.trim() === '') {
-			value = undefined;
-		} else {
-			const num = parseFloat(stringifiedInput);
-			value = isNaN(num) ? undefined : num;
-		}
-	};
+    if (stringifiedInput.trim() === '') {
+      value = undefined;
+    } else {
+      const num = parseFloat(stringifiedInput);
+      value = isNaN(num) ? undefined : num;
+    }
+  };
 </script>
 
 <Input
-	bind:value={() => getStringValue(), (v) => setNumericValue(v)}
-	placeholder={String(placeholder)}
-	type={'number'}
-	{readonly}
-	id={String(derivedAttrs.id)}
-	name={String(derivedAttrs.name)}
-	disabled={derivedAttrs.disabled}
-	required={derivedAttrs.required}
-	step={config?.schema?.multipleOf ?? (config?.schema?.type === 'integer' ? 1 : 'any')}
-	min={config?.schema?.minimum ?? config?.schema?.exclusiveMinimum}
-	max={config?.schema?.maximum ?? config?.schema?.exclusiveMaximum}
-	aria-invalid={errors && errors.length > 0 ? true : undefined}
-	aria-describedby={errors && errors.length > 0 ? `${String(derivedAttrs.id)}-errors` : undefined}
-	class={String(currentClass)}
-	autocomplete="off"
-	oninput={onInputHandler}
-	onchange={onChangeHandler}
-	onblur={onBlurHandler}
+  bind:value={() => getStringValue(), (v) => setNumericValue(v)}
+  placeholder={String(placeholder)}
+  type={'number'}
+  {readonly}
+  id={String(derivedAttrs.id)}
+  name={String(derivedAttrs.name)}
+  disabled={derivedAttrs.disabled}
+  required={derivedAttrs.required}
+  step={config?.schema?.multipleOf ?? (config?.schema?.type === 'integer' ? 1 : 'any')}
+  min={config?.schema?.minimum ?? config?.schema?.exclusiveMinimum}
+  max={config?.schema?.maximum ?? config?.schema?.exclusiveMaximum}
+  aria-invalid={errors && errors.length > 0 ? true : undefined}
+  aria-describedby={errors && errors.length > 0 ? `${String(derivedAttrs.id)}-errors` : undefined}
+  class={String(currentClass)}
+  autocomplete="off"
+  oninput={onInputHandler}
+  onchange={onChangeHandler}
+  onblur={onBlurHandler}
 />

package/dist/components/sjsf-wrappers/SjsfNumberInputWrapper.svelte.d.ts

@@ -1,3 +1,3 @@
-declare const SjsfNumberInputWrapper: import("svelte").Component<any, {}, "value">;
+declare const SjsfNumberInputWrapper: import("svelte").Component<ComponentProps, {}, "value">;
 type SjsfNumberInputWrapper = ReturnType<typeof SjsfNumberInputWrapper>;
 export default SjsfNumberInputWrapper;

package/dist/components/sjsf-wrappers/SjsfTextInputWrapper.svelte

@@ -1,65 +1,65 @@
 <script lang="ts">
-	import type { ComponentProps } from '@sjsf/form';
-	import { getFormContext, inputAttributes } from '@sjsf/form';
-	import Input from '../input/Input.svelte';
-	import type { FormEventHandler, FocusEventHandler } from 'svelte/elements';
+  import type { ComponentProps } from '@sjsf/form';
+  import { getFormContext, inputAttributes } from '@sjsf/form';
+  import Input from '../input/Input.svelte';
+  import type { FormEventHandler, FocusEventHandler } from 'svelte/elements';
 
-	type Props = ComponentProps['textWidget'];
+  type Props = ComponentProps['textWidget'];
 
-	let { value = $bindable(), config, handlers, errors }: Props = $props();
+  let { value = $bindable(), config, handlers, errors }: Props = $props();
 
-	const ctx = getFormContext();
+  const ctx = getFormContext();
 
-	const derivedAttrs = $derived(
-		inputAttributes(ctx, config, 'text', handlers, {
-			type: 'text'
-		})
-	);
+  const derivedAttrs = $derived(
+    inputAttributes(ctx, config, 'text', handlers, {
+      type: 'text',
+    })
+  );
 
-	const placeholder = $derived(
-		config?.uiSchema?.['ui:placeholder'] ||
-			config?.schema?.description ||
-			(Array.isArray(config?.schema?.examples) && config.schema.examples.length > 0
-				? String(config.schema.examples[0])
-				: '') ||
-			''
-	);
+  const placeholder = $derived(
+    config?.uiSchema?.['ui:placeholder'] ||
+      config?.schema?.description ||
+      (Array.isArray(config?.schema?.examples) && config.schema.examples.length > 0
+        ? String(config.schema.examples[0])
+        : '') ||
+      ''
+  );
 
-	const readonly = $derived(config?.schema?.readOnly ?? false);
-	const currentClass = $derived(derivedAttrs?.class ?? 'w-full');
+  const readonly = $derived(config?.schema?.readOnly ?? false);
+  const currentClass = $derived(derivedAttrs?.class ?? 'w-full');
 
-	const onInput = $derived(
-		derivedAttrs.oninput
-			? (event: Event) => (derivedAttrs.oninput as FormEventHandler<HTMLInputElement>)(event as any)
-			: undefined
-	);
-	const onChange = $derived(
-		derivedAttrs.onchange
-			? (event: Event) =>
-					(derivedAttrs.onchange as FormEventHandler<HTMLInputElement>)(event as any)
-			: undefined
-	);
-	const onBlur = $derived(
-		derivedAttrs.onblur
-			? (event: FocusEvent) =>
-					(derivedAttrs.onblur as FocusEventHandler<HTMLInputElement>)(event as any)
-			: undefined
-	);
+  const onInput = $derived(
+    derivedAttrs.oninput
+      ? (event: Event) => (derivedAttrs.oninput as FormEventHandler<HTMLInputElement>)(event as any)
+      : undefined
+  );
+  const onChange = $derived(
+    derivedAttrs.onchange
+      ? (event: Event) =>
+          (derivedAttrs.onchange as FormEventHandler<HTMLInputElement>)(event as any)
+      : undefined
+  );
+  const onBlur = $derived(
+    derivedAttrs.onblur
+      ? (event: FocusEvent) =>
+          (derivedAttrs.onblur as FocusEventHandler<HTMLInputElement>)(event as any)
+      : undefined
+  );
 </script>
 
 <Input
-	bind:value
-	placeholder={String(placeholder)}
-	type="text"
-	{readonly}
-	id={String(derivedAttrs.id)}
-	name={String(derivedAttrs.name)}
-	disabled={derivedAttrs.disabled}
-	required={derivedAttrs.required}
-	oninput={onInput}
-	onchange={onChange}
-	onblur={onBlur}
-	aria-invalid={errors && errors.length > 0 ? true : undefined}
-	aria-describedby={errors && errors.length > 0 ? `${String(derivedAttrs.id)}-errors` : undefined}
-	class={String(currentClass)}
+  bind:value
+  placeholder={String(placeholder)}
+  type="text"
+  {readonly}
+  id={String(derivedAttrs.id)}
+  name={String(derivedAttrs.name)}
+  disabled={derivedAttrs.disabled}
+  required={derivedAttrs.required}
+  oninput={onInput}
+  onchange={onChange}
+  onblur={onBlur}
+  aria-invalid={errors && errors.length > 0 ? true : undefined}
+  aria-describedby={errors && errors.length > 0 ? `${String(derivedAttrs.id)}-errors` : undefined}
+  class={String(currentClass)}
 />

package/dist/components/sjsf-wrappers/SjsfTextInputWrapper.svelte.d.ts

@@ -1,3 +1,3 @@
-declare const SjsfTextInputWrapper: import("svelte").Component<any, {}, "value">;
+declare const SjsfTextInputWrapper: import("svelte").Component<ComponentProps, {}, "value">;
 type SjsfTextInputWrapper = ReturnType<typeof SjsfTextInputWrapper>;
 export default SjsfTextInputWrapper;

package/dist/components/sjsf-wrappers/sjsfCustomTheme.js

@@ -4,5 +4,5 @@ import SjsfNumberInputWrapper from './SjsfNumberInputWrapper.svelte';
 import SjsfTextInputWrapper from './SjsfTextInputWrapper.svelte';
 export const sjsfCustomTheme = overrideByRecord(BasicTheme, {
     numberWidget: SjsfNumberInputWrapper,
-    textWidget: SjsfTextInputWrapper
+    textWidget: SjsfTextInputWrapper,
 });

package/dist/components/skeleton-loader/SkeletonLoader.stories.svelte

@@ -1,45 +1,45 @@
 <script module>
-	import SkeletonLoader from './SkeletonLoader.svelte';
-	import StatcardSkeleton from './StatcardSkeleton.svelte';
+  import SkeletonLoader from './SkeletonLoader.svelte';
+  import StatcardSkeleton from './StatcardSkeleton.svelte';
 
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
-	const { Story } = defineMeta({
-		component: SkeletonLoader,
-		title: 'Design System/SkeletonLoader'
-	});
+  const { Story } = defineMeta({
+    component: SkeletonLoader,
+    title: 'Design System/SkeletonLoader',
+  });
 </script>
 
 <Story name="Primary" asChild>
-	<SkeletonLoader class="h-[50px] w-[200px]">
-		{#snippet children({ Skeleton })}
-			<Skeleton class="h-full w-full" />
-		{/snippet}
-	</SkeletonLoader>
+  <SkeletonLoader class="h-[50px] w-[200px]">
+    {#snippet children({ Skeleton })}
+      <Skeleton class="h-full w-full" />
+    {/snippet}
+  </SkeletonLoader>
 </Story>
 
 <Story name="ImagePlaceholder" asChild>
-	<SkeletonLoader class="h-[100px] w-[500px]">
-		{#snippet children({ Skeleton, SkeletonImage })}
-			<div class="flex h-full gap-2">
-				<Skeleton class="flex h-full w-[160px] items-center justify-center">
-					<SkeletonImage />
-				</Skeleton>
-				<div class="flex flex-1 flex-col gap-2">
-					<Skeleton class="flex h-[20px] w-full" />
-					<Skeleton class="flex h-[20px] w-full" />
-					<Skeleton class="flex h-[20px] w-full" />
-					<Skeleton class="flex h-[20px] w-full" />
-				</div>
-			</div>
-		{/snippet}
-	</SkeletonLoader>
+  <SkeletonLoader class="h-[100px] w-[500px]">
+    {#snippet children({ Skeleton, SkeletonImage })}
+      <div class="flex h-full gap-2">
+        <Skeleton class="flex h-full w-[160px] items-center justify-center">
+          <SkeletonImage />
+        </Skeleton>
+        <div class="flex flex-1 flex-col gap-2">
+          <Skeleton class="flex h-[20px] w-full" />
+          <Skeleton class="flex h-[20px] w-full" />
+          <Skeleton class="flex h-[20px] w-full" />
+          <Skeleton class="flex h-[20px] w-full" />
+        </div>
+      </div>
+    {/snippet}
+  </SkeletonLoader>
 </Story>
 
 <Story name="StatCard" asChild>
-	<div class="flex w-[900px] gap-4">
-		<StatcardSkeleton />
-		<StatcardSkeleton />
-		<StatcardSkeleton />
-	</div>
+  <div class="flex w-[900px] gap-4">
+    <StatcardSkeleton />
+    <StatcardSkeleton />
+    <StatcardSkeleton />
+  </div>
 </Story>

package/dist/components/skeleton-loader/SkeletonLoader.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
-	import Skeleton from './components/Skeleton.svelte';
-	import SkeletonImage from './components/SkeletonImage.svelte';
+  import type { Snippet } from 'svelte';
+  import Skeleton from './components/Skeleton.svelte';
+  import SkeletonImage from './components/SkeletonImage.svelte';
 
-	interface Props {
-		class?: string;
-		dataTestId?: string;
-		children?: Snippet<[{ Skeleton: typeof Skeleton; SkeletonImage: typeof SkeletonImage }]>;
-	}
+  interface Props {
+    class?: string;
+    dataTestId?: string;
+    children?: Snippet<[{ Skeleton: typeof Skeleton; SkeletonImage: typeof SkeletonImage }]>;
+  }
 
-	let { class: className = '', dataTestId = '', children }: Props = $props();
+  let { class: className = '', dataTestId = '', children }: Props = $props();
 </script>
 
 <div role="status" class={`h-full w-full animate-pulse ${className}`} data-testid={dataTestId}>
-	{@render children?.({ Skeleton, SkeletonImage })}
+  {@render children?.({ Skeleton, SkeletonImage })}
 </div>

package/dist/components/skeleton-loader/StatcardSkeleton.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-	import SkeletonLoader from './SkeletonLoader.svelte';
+  import SkeletonLoader from './SkeletonLoader.svelte';
 </script>
 
 <SkeletonLoader>
-	{#snippet children({ Skeleton })}
-		<div class="flex h-[92px] flex-1 flex-col justify-between gap-2 rounded-lg bg-neutral p-4">
-			<Skeleton class="h-4 w-1/2 "></Skeleton>
-			<div class="flex items-baseline gap-2">
-				<Skeleton class="h-8 w-16" />
-			</div>
-		</div>
-	{/snippet}
+  {#snippet children({ Skeleton })}
+    <div class="flex h-[92px] flex-1 flex-col justify-between gap-2 rounded-lg bg-neutral p-4">
+      <Skeleton class="h-4 w-1/2 "></Skeleton>
+      <div class="flex items-baseline gap-2">
+        <Skeleton class="h-8 w-16" />
+      </div>
+    </div>
+  {/snippet}
 </SkeletonLoader>

package/dist/components/skeleton-loader/components/Skeleton.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
+  import type { Snippet } from 'svelte';
 
-	interface Props {
-		class?: string;
-		children?: Snippet;
-	}
+  interface Props {
+    class?: string;
+    children?: Snippet;
+  }
 
-	let { class: className = '', children }: Props = $props();
+  let { class: className = '', children }: Props = $props();
 </script>
 
 <div class={`bg-neutral ${className}`}>
-	{@render children?.()}
+  {@render children?.()}
 </div>