sveltacular 1.0.36 → 1.0.38

package/dist/forms/bool-box/bool-box.svelte

@@ -2,7 +2,7 @@
 	import ListBox from '../list-box/list-box.svelte';
 	import FormField from '../form-field/form-field.svelte';
 	import { uniqueId } from '../../helpers/unique-id.js';
-	import type { FormFieldSizeOptions } from '../../index.js';
+	import type { ComponentSize } from '../../index.js';
 	import type { FormFieldFeedback } from '../form-field/form-field.svelte';
 
 	type BoolBoxVariant = 'dropdown' | 'switch' | 'checkbox' | 'radio';
@@ -10,7 +10,7 @@
 	let {
 		value = $bindable(false),
 		options = ['Yes', 'No'] as [yes: string, no: string],
-		size = 'md' as FormFieldSizeOptions,
+		size = 'md' as ComponentSize,
 		onChange = undefined,
 		label = undefined,
 		helperText = undefined,
@@ -21,7 +21,7 @@
 	}: {
 		value?: boolean;
 		options?: [yes: string, no: string];
-		size?: FormFieldSizeOptions;
+		size?: ComponentSize;
 		onChange?: ((value: boolean) => void) | undefined;
 		label?: string;
 		helperText?: string;

package/dist/forms/bool-box/bool-box.svelte.d.ts

@@ -1,10 +1,10 @@
-import type { FormFieldSizeOptions } from '../../index.js';
+import type { ComponentSize } from '../../index.js';
 import type { FormFieldFeedback } from '../form-field/form-field.svelte';
 type BoolBoxVariant = 'dropdown' | 'switch' | 'checkbox' | 'radio';
 type $$ComponentProps = {
     value?: boolean;
     options?: [yes: string, no: string];
-    size?: FormFieldSizeOptions;
+    size?: ComponentSize;
     onChange?: ((value: boolean) => void) | undefined;
     label?: string;
     helperText?: string;

package/dist/forms/button/button.svelte

@@ -5,11 +5,10 @@
 	 */
 	import type { Snippet } from 'svelte';
 	import { navigateTo } from '../../helpers/navigate-to.js';
-	import type { ButtonVariant, ComponentWidth, FormFieldSizeOptions } from '../../types/form.js';
+	import type { ButtonVariant, ComponentWidth, ComponentSize } from '../../types/form.js';
 	import type { IconType } from '../../icons/types.js';
 	import Spinner from '../../generic/spinner/spinner.svelte';
 	import Icon from '../../icons/icon.svelte';
-	import type { ComponentSize } from '../../types';
 
 	let {
 		/** Optional href for navigation */
@@ -32,8 +31,6 @@
 		loading = false,
 		/** ARIA label for accessibility (required if button content is not text) */
 		ariaLabel = undefined,
-		/** Remove margins */
-		noMargin = false,
 		/** Collapse padding */
 		collapse = false,
 		/** Delay before re-enabling after click (prevents double-clicks) */
@@ -45,11 +42,13 @@
 		iconSize = 'default',
 		/** Click handler */
 		onClick = undefined,
+		/** Margin around button */
+		margin = 'sm',
 		/** Button content */
 		children
 	}: {
 		href?: string | undefined;
-		size?: FormFieldSizeOptions;
+		size?: ComponentSize;
 		width?: ComponentWidth;
 		variant?: ButtonVariant;
 		type?: 'button' | 'submit' | 'reset';
@@ -58,12 +57,12 @@
 		disabled?: boolean;
 		loading?: boolean;
 		ariaLabel?: string | undefined;
-		noMargin?: boolean;
 		collapse?: boolean;
 		repeatSubmitDelay?: number | 'infinite';
 		icon?: IconType | undefined;
 		iconAlign?: 'left' | 'right' | 'above' | 'below';
 		iconSize?: 'default' | ComponentSize;
+		margin?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 		onClick?: ((e?: Event) => void) | undefined;
 		children?: Snippet;
 	} = $props();
@@ -88,15 +87,16 @@
 		}
 	};
 
-	const _iconSize = $derived<ComponentSize>(iconSize === 'default' ? size : iconSize);
+	const _iconSize = $derived<ComponentSize>(
+		iconSize === 'default' ? (size as ComponentSize) : iconSize
+	);
 </script>
 
 <button
 	{type}
 	onclick={handleClick}
-	class="{size} w-{width} {variant} {flex ? 'flex' : ''} icon-{iconAlign}"
+	class="{size} w-{width} {variant} {flex ? 'flex' : ''} icon-{iconAlign} margin-{margin}"
 	class:block
-	class:noMargin
 	class:collapse
 	class:loading
 	class:has-icon={!!icon}
@@ -155,9 +155,29 @@ button[disabled] {
   opacity: 0.5;
   cursor: not-allowed;
 }
-button.noMargin {
+button.margin-none {
   margin: 0;
 }
+button.margin-xs {
+  margin-top: var(--spacing-xs);
+  margin-bottom: var(--spacing-xs);
+}
+button.margin-sm {
+  margin-top: var(--spacing-sm);
+  margin-bottom: var(--spacing-sm);
+}
+button.margin-md {
+  margin-top: var(--spacing-md);
+  margin-bottom: var(--spacing-md);
+}
+button.margin-lg {
+  margin-top: var(--spacing-lg);
+  margin-bottom: var(--spacing-lg);
+}
+button.margin-xl {
+  margin-top: var(--spacing-xl);
+  margin-bottom: var(--spacing-xl);
+}
 button.collapse {
   min-width: auto;
   padding: var(--spacing-sm);

package/dist/forms/button/button.svelte.d.ts

@@ -3,12 +3,11 @@
      * @component
      */
 import type { Snippet } from 'svelte';
-import type { ButtonVariant, ComponentWidth, FormFieldSizeOptions } from '../../types/form.js';
+import type { ButtonVariant, ComponentWidth, ComponentSize } from '../../types/form.js';
 import type { IconType } from '../../icons/types.js';
-import type { ComponentSize } from '../../types';
 type $$ComponentProps = {
     href?: string | undefined;
-    size?: FormFieldSizeOptions;
+    size?: ComponentSize;
     width?: ComponentWidth;
     variant?: ButtonVariant;
     type?: 'button' | 'submit' | 'reset';
@@ -17,12 +16,12 @@ type $$ComponentProps = {
     disabled?: boolean;
     loading?: boolean;
     ariaLabel?: string | undefined;
-    noMargin?: boolean;
     collapse?: boolean;
     repeatSubmitDelay?: number | 'infinite';
     icon?: IconType | undefined;
     iconAlign?: 'left' | 'right' | 'above' | 'below';
     iconSize?: 'default' | ComponentSize;
+    margin?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     onClick?: ((e?: Event) => void) | undefined;
     children?: Snippet;
 };

package/dist/forms/check-box/check-box-group.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { untrack } from 'svelte';
-	import type { DropdownOption, FormFieldSizeOptions } from '../../types/form.js';
+	import type { DropdownOption, ComponentSize } from '../../types/form.js';
 	import FormField from '../form-field/form-field.svelte';
 	import CheckBox from './check-box.svelte';
 	import { uniqueId } from '../../helpers/unique-id.js';
@@ -10,7 +10,7 @@
 	let {
 		group = $bindable([] as string[]),
 		items = [],
-		size = 'full' as FormFieldSizeOptions,
+		size = 'md' as ComponentSize,
 		disabled = false,
 		required = false,
 		onChange,
@@ -18,7 +18,7 @@
 	}: {
 		group?: string[];
 		items?: DropdownOption[];
-		size?: FormFieldSizeOptions;
+		size?: ComponentSize;
 		disabled?: boolean;
 		required?: boolean;
 		onChange?: ((selected: string[]) => void) | undefined;

package/dist/forms/check-box/check-box-group.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { DropdownOption, FormFieldSizeOptions } from '../../types/form.js';
+import type { DropdownOption, ComponentSize } from '../../types/form.js';
 type $$ComponentProps = {
     group?: string[];
     items?: DropdownOption[];
-    size?: FormFieldSizeOptions;
+    size?: ComponentSize;
     disabled?: boolean;
     required?: boolean;
     onChange?: ((selected: string[]) => void) | undefined;

package/dist/forms/check-box/check-box.svelte

@@ -3,7 +3,7 @@
 	import { uniqueId } from '../../helpers/unique-id.js';
 	import Icon from '../../icons/icon.svelte';
 	import FormField, { type FormFieldFeedback } from '../form-field/form-field.svelte';
-	import type { FormFieldSizeOptions } from '../../types/form.js';
+	import type { ComponentSize } from '../../types/form.js';
 
 	let {
 		value = '',
@@ -14,7 +14,7 @@
 		label,
 		ariaLabel,
 		children,
-		size = 'full' as FormFieldSizeOptions,
+		size = 'md' as ComponentSize,
 		helperText = undefined,
 		feedback = undefined,
 		required = false,
@@ -28,7 +28,7 @@
 		label?: string;
 		ariaLabel?: string;
 		children?: Snippet;
-		size?: FormFieldSizeOptions;
+		size?: ComponentSize;
 		helperText?: string;
 		feedback?: FormFieldFeedback;
 		required?: boolean;

package/dist/forms/check-box/check-box.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import { type FormFieldFeedback } from '../form-field/form-field.svelte';
-import type { FormFieldSizeOptions } from '../../types/form.js';
+import type { ComponentSize } from '../../types/form.js';
 type $$ComponentProps = {
     value?: string;
     isChecked?: boolean;
@@ -13,7 +13,7 @@ type $$ComponentProps = {
     label?: string;
     ariaLabel?: string;
     children?: Snippet;
-    size?: FormFieldSizeOptions;
+    size?: ComponentSize;
     helperText?: string;
     feedback?: FormFieldFeedback;
     required?: boolean;

package/dist/forms/combo/new-or-existing-combo.svelte

@@ -4,7 +4,7 @@
 		ListBox,
 		RadioBox,
 		type DropdownOption,
-		type FormFieldSizeOptions,
+		type ComponentSize,
 		TextBox
 	} from '../../index.js';
 	import FlexCol from '../../layout/flex-col.svelte';
@@ -15,7 +15,7 @@
 		newValue = $bindable('' as string | null),
 		existingValue = $bindable('' as string | null),
 		items = [] as DropdownOption[],
-		size = 'full' as FormFieldSizeOptions,
+		size = 'md' as ComponentSize,
 		disabled = false,
 		required = false,
 		searchable = false,
@@ -27,7 +27,7 @@
 		newValue?: string | null;
 		existingValue?: string | null;
 		items?: DropdownOption[];
-		size?: FormFieldSizeOptions;
+		size?: ComponentSize;
 		disabled?: boolean;
 		required?: boolean;
 		searchable?: boolean;

package/dist/forms/combo/new-or-existing-combo.svelte.d.ts

@@ -1,11 +1,11 @@
-import { type DropdownOption, type FormFieldSizeOptions } from '../../index.js';
+import { type DropdownOption, type ComponentSize } from '../../index.js';
 import type { SearchFunction } from '../../types/form.js';
 type $$ComponentProps = {
     mode?: 'new' | 'existing';
     newValue?: string | null;
     existingValue?: string | null;
     items?: DropdownOption[];
-    size?: FormFieldSizeOptions;
+    size?: ComponentSize;
     disabled?: boolean;
     required?: boolean;
     searchable?: boolean;

package/dist/forms/date-box/date-box.svelte

@@ -10,7 +10,7 @@
 	import { uniqueId } from '../../helpers/unique-id.js';
 	import FormField, { type FormFieldFeedback } from '../form-field/form-field.svelte';
 	import FormInputWrapper from '../form-input-wrapper';
-	import type { DateUnit, FormFieldSizeOptions } from '../../index.js';
+	import type { DateUnit, ComponentSize } from '../../index.js';
 	import Button from '../button/button.svelte';
 
 	type DateIncrementStep = { label: string; value: number; unit: DateUnit };
@@ -20,7 +20,7 @@
 	let {
 		value = $bindable(undefined as string | undefined | null),
 		defaultValue = undefined,
-		size = 'full' as FormFieldSizeOptions,
+		size = 'md' as ComponentSize,
 		placeholder = '',
 		nullable = false,
 		disabled = false,
@@ -40,7 +40,7 @@
 	}: {
 		value?: string | undefined | null;
 		defaultValue?: string | undefined;
-		size?: FormFieldSizeOptions;
+		size?: ComponentSize;
 		placeholder?: string;
 		nullable?: boolean;
 		disabled?: boolean;
@@ -152,11 +152,11 @@
 		</FormInputWrapper>
 		{#if steps.length > 0}
 			<span class="steps">
-			{#each steps as step}
-				<Button noMargin={true} collapse={true} onClick={() => incrementValue(step)}>
-					{step.label}
-				</Button>
-			{/each}
+				{#each steps as step}
+					<Button noMargin={true} collapse={true} onClick={() => incrementValue(step)}>
+						{step.label}
+					</Button>
+				{/each}
 			</span>
 		{/if}
 	</div>

package/dist/forms/date-box/date-box.svelte.d.ts

@@ -1,5 +1,5 @@
 import { type FormFieldFeedback } from '../form-field/form-field.svelte';
-import type { DateUnit, FormFieldSizeOptions } from '../../index.js';
+import type { DateUnit, ComponentSize } from '../../index.js';
 type DateIncrementStep = {
     label: string;
     value: number;
@@ -8,7 +8,7 @@ type DateIncrementStep = {
 type $$ComponentProps = {
     value?: string | undefined | null;
     defaultValue?: string | undefined;
-    size?: FormFieldSizeOptions;
+    size?: ComponentSize;
     placeholder?: string;
     nullable?: boolean;
     disabled?: boolean;

package/dist/forms/dimension-box/dimension-box.svelte

@@ -3,7 +3,7 @@
 	import { uniqueId } from '../../helpers/unique-id.js';
 	import FormField, { type FormFieldFeedback } from '../form-field/form-field.svelte';
 	import FormInputWrapper from '../form-input-wrapper';
-	import type { FormFieldSizeOptions } from '../../types/form.js';
+	import type { ComponentSize } from '../../types/form.js';
 
 	const baseId = uniqueId();
 
@@ -22,7 +22,7 @@
 		prefix = null as string | null,
 		suffix = null as string | null,
 		required = false,
-		size = 'full' as FormFieldSizeOptions,
+		size = 'md' as ComponentSize,
 		label = undefined as string | undefined,
 		helperText = undefined as string | undefined,
 		feedback = undefined as FormFieldFeedback | undefined,
@@ -38,7 +38,7 @@
 		prefix?: string | null;
 		suffix?: string | null;
 		required?: boolean;
-		size?: FormFieldSizeOptions;
+		size?: ComponentSize;
 		label?: string;
 		helperText?: string;
 		feedback?: FormFieldFeedback;

package/dist/forms/dimension-box/dimension-box.svelte.d.ts

@@ -1,5 +1,5 @@
 import { type FormFieldFeedback } from '../form-field/form-field.svelte';
-import type { FormFieldSizeOptions } from '../../types/form.js';
+import type { ComponentSize } from '../../types/form.js';
 type $$ComponentProps = {
     dimensions?: string[];
     value?: (number | null)[];
@@ -10,7 +10,7 @@ type $$ComponentProps = {
     prefix?: string | null;
     suffix?: string | null;
     required?: boolean;
-    size?: FormFieldSizeOptions;
+    size?: ComponentSize;
     label?: string;
     helperText?: string;
     feedback?: FormFieldFeedback;

package/dist/forms/file-box/file-box.svelte

@@ -3,14 +3,14 @@
 	import { uniqueId } from '../../helpers/unique-id.js';
 	import FormField from '../form-field/form-field.svelte';
 	import FormInputWrapper from '../form-input-wrapper';
-	import type { FormFieldSizeOptions } from '../../types/form.js';
+	import type { ComponentSize } from '../../types/form.js';
 
 	const id = uniqueId();
 
 	let {
 		value = $bindable(''),
 		placeholder = '',
-		size = 'full' as FormFieldSizeOptions,
+		size = 'md' as ComponentSize,
 		disabled = false,
 		required = false,
 		readonly = false,
@@ -21,7 +21,7 @@
 	}: {
 		value?: string;
 		placeholder?: string;
-		size?: FormFieldSizeOptions;
+		size?: ComponentSize;
 		disabled?: boolean;
 		required?: boolean;
 		readonly?: boolean;

package/dist/forms/file-box/file-box.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { FormFieldSizeOptions } from '../../types/form.js';
+import type { ComponentSize } from '../../types/form.js';
 type $$ComponentProps = {
     value?: string;
     placeholder?: string;
-    size?: FormFieldSizeOptions;
+    size?: ComponentSize;
     disabled?: boolean;
     required?: boolean;
     readonly?: boolean;

package/dist/forms/form-field/form-field.svelte

@@ -19,10 +19,11 @@
 	 */
 	const getFlexGrow = (size: ComponentSize): number => {
 		const flexMap: Record<ComponentSize, number> = {
-			sm: 1,
-			md: 2,
-			lg: 3,
-			xl: 4
+			xs: 1,
+			sm: 2,
+			md: 3,
+			lg: 6,
+			xl: 8
 		};
 		return flexMap[size];
 	};

package/dist/forms/form.svelte

@@ -1,20 +1,20 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import Section from '../generic/section/section.svelte';
-	import type { FormFieldSizeOptions } from '../index.js';
+	import type { ComponentWidth } from '../index.js';
 
 	let {
 		method = 'get',
 		title = undefined,
 		action = undefined,
-		size = 'md',
+		size = 'full',
 		onSubmit = undefined,
 		children
 	}: {
 		method?: 'get' | 'post' | 'put' | 'delete';
 		title?: string | undefined;
 		action?: string | undefined;
-		size?: FormFieldSizeOptions;
+		size?: ComponentWidth;
 		onSubmit?: (() => void) | undefined;
 		children: Snippet;
 	} = $props();

package/dist/forms/form.svelte.d.ts

@@ -1,10 +1,10 @@
 import type { Snippet } from 'svelte';
-import type { FormFieldSizeOptions } from '../index.js';
+import type { ComponentWidth } from '../index.js';
 type $$ComponentProps = {
     method?: 'get' | 'post' | 'put' | 'delete';
     title?: string | undefined;
     action?: string | undefined;
-    size?: FormFieldSizeOptions;
+    size?: ComponentWidth;
     onSubmit?: (() => void) | undefined;
     children: Snippet;
 };

package/dist/forms/index.d.ts

@@ -10,7 +10,6 @@ export { default as NewOrExistingCombo } from './combo/new-or-existing-combo.sve
 export { default as NumberBox } from './number-box/number-box.svelte';
 export { default as NumberRangeBox } from './number-range-box/number-range-box.svelte';
 export { default as PhoneBox } from './phone-box/phone-box.svelte';
-export { default as ReferenceBox } from './reference-box/reference-box.svelte';
 export { default as Slider } from './slider/slider.svelte';
 export { default as TagBox } from './tag-box/tag-box.svelte';
 export { default as TextArea } from './text-area/text-area.svelte';
@@ -30,4 +29,5 @@ export type { AdditionalButton } from './form-actions/form-actions.svelte';
 export * from './check-box/index.js';
 export * from './phone-box/index.js';
 export * from './radio-group/index.js';
+export * from './reference-box/index.js';
 export * from './validation.js';

package/dist/forms/index.js

@@ -11,7 +11,6 @@ export { default as NewOrExistingCombo } from './combo/new-or-existing-combo.sve
 export { default as NumberBox } from './number-box/number-box.svelte';
 export { default as NumberRangeBox } from './number-range-box/number-range-box.svelte';
 export { default as PhoneBox } from './phone-box/phone-box.svelte';
-export { default as ReferenceBox } from './reference-box/reference-box.svelte';
 export { default as Slider } from './slider/slider.svelte';
 export { default as TagBox } from './tag-box/tag-box.svelte';
 export { default as TextArea } from './text-area/text-area.svelte';
@@ -32,5 +31,6 @@ export { default as FormRow } from './form-row/form-row.svelte';
 export * from './check-box/index.js';
 export * from './phone-box/index.js';
 export * from './radio-group/index.js';
+export * from './reference-box/index.js';
 // Validation utilities
 export * from './validation.js';

package/dist/forms/info-box/info-box.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
 	import Icon from '../../icons/icon.svelte';
-	import type { FormFieldSizeOptions } from '../../index.js';
+	import type { ComponentSize } from '../../index.js';
 	import FormField from '../form-field/form-field.svelte';
 
 	let {
-		size = 'md' as FormFieldSizeOptions,
+		size = 'md' as ComponentSize,
 		value,
 		href = undefined,
 		label = undefined
 	}: {
-		size?: FormFieldSizeOptions;
+		size?: ComponentSize;
 		value: string | null;
 		href?: string;
 		label?: string;

package/dist/forms/info-box/info-box.svelte.d.ts

@@ -1,6 +1,6 @@
-import type { FormFieldSizeOptions } from '../../index.js';
+import type { ComponentSize } from '../../index.js';
 type $$ComponentProps = {
-    size?: FormFieldSizeOptions;
+    size?: ComponentSize;
     value: string | null;
     href?: string;
     label?: string;

package/dist/forms/list-box/list-box.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { DropdownOption, FormFieldSizeOptions, MenuOption } from '../../types/form.js';
+	import type { DropdownOption, ComponentSize, MenuOption } from '../../types/form.js';
 	import FormField, { type FormFieldFeedback } from '../form-field/form-field.svelte';
 	import { uniqueId } from '../../helpers/unique-id.js';
 	import Menu from '../../generic/menu/menu.svelte';
@@ -14,7 +14,7 @@
 	let {
 		value = $bindable(null as string | null),
 		items = [] as DropdownOption[],
-		size = 'full' as FormFieldSizeOptions,
+		size = 'md',
 		disabled = false,
 		required = false,
 		readonly = false,
@@ -34,7 +34,7 @@
 	}: {
 		value?: string | null;
 		items?: DropdownOption[];
-		size?: FormFieldSizeOptions;
+		size?: ComponentSize;
 		disabled?: boolean;
 		required?: boolean;
 		readonly?: boolean;

package/dist/forms/list-box/list-box.svelte.d.ts

@@ -1,10 +1,10 @@
-import type { DropdownOption, FormFieldSizeOptions } from '../../types/form.js';
+import type { DropdownOption, ComponentSize } from '../../types/form.js';
 import { type FormFieldFeedback } from '../form-field/form-field.svelte';
 import type { CreateNewFunction, SearchFunction } from '../../types/form.js';
 type $$ComponentProps = {
     value?: string | null;
     items?: DropdownOption[];
-    size?: FormFieldSizeOptions;
+    size?: ComponentSize;
     disabled?: boolean;
     required?: boolean;
     readonly?: boolean;

package/dist/forms/money-box/money-box.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { uniqueId, type FormFieldSizeOptions } from '../../index.js';
+	import { uniqueId, type ComponentSize } from '../../index.js';
 	import FormField, { type FormFieldFeedback } from '../form-field/form-field.svelte';
 	import FormInputWrapper from '../form-input-wrapper';
 	import { untrack } from 'svelte';
@@ -13,7 +13,7 @@
 		currency = 'USD',
 		allowCents = true,
 		placeholder = '',
-		size = 'full' as FormFieldSizeOptions,
+		size = 'md' as ComponentSize,
 		units = 'ones' as 'ones' | 'cents',
 		min = 0,
 		max = null as number | null,
@@ -36,7 +36,7 @@
 		currency?: string;
 		allowCents?: boolean;
 		placeholder?: string;
-		size?: FormFieldSizeOptions;
+		size?: ComponentSize;
 		units?: 'ones' | 'cents';
 		min?: number;
 		max?: number | null;

package/dist/forms/money-box/money-box.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type FormFieldSizeOptions } from '../../index.js';
+import { type ComponentSize } from '../../index.js';
 import { type FormFieldFeedback } from '../form-field/form-field.svelte';
 type $$ComponentProps = {
     value?: number | null;
@@ -7,7 +7,7 @@ type $$ComponentProps = {
     currency?: string;
     allowCents?: boolean;
     placeholder?: string;
-    size?: FormFieldSizeOptions;
+    size?: ComponentSize;
     units?: 'ones' | 'cents';
     min?: number;
     max?: number | null;

package/dist/forms/number-box/number-box.svelte

@@ -4,7 +4,7 @@
 	import { uniqueId } from '../../helpers/unique-id.js';
 	import FormField, { type FormFieldFeedback } from '../form-field/form-field.svelte';
 	import FormInputWrapper from '../form-input-wrapper';
-	import type { FormFieldSizeOptions } from '../../types/form.js';
+	import type { ComponentSize } from '../../types/form.js';
 	const id = uniqueId();
 
 	type AllowedInputTypes = 'number' | 'currency';
@@ -12,7 +12,7 @@
 	let {
 		value = $bindable(0 as number | null),
 		placeholder = '',
-		size = 'full' as FormFieldSizeOptions,
+		size = 'md' as ComponentSize,
 		type = 'number' as AllowedInputTypes,
 		min = 0,
 		max = 1000000,
@@ -36,7 +36,7 @@
 	}: {
 		value?: number | null;
 		placeholder?: string;
-		size?: FormFieldSizeOptions;
+		size?: ComponentSize;
 		type?: AllowedInputTypes;
 		min?: number;
 		max?: number;