bits-ui 2.10.0 → 2.11.0

package/dist/bits/date-range-field/components/date-range-field.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { watch } from "runed";
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { DateValue } from "@internationalized/date";
 	import { DateRangeFieldRootState } from "../date-range-field.svelte.js";
 	import type { DateRangeFieldRootProps } from "../types.js";
@@ -80,52 +80,52 @@
 	);
 
 	const rootState = DateRangeFieldRootState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		disabled: box.with(() => disabled),
-		readonly: box.with(() => readonly),
-		required: box.with(() => required),
-		hourCycle: box.with(() => hourCycle),
-		granularity: box.with(() => granularity),
+		disabled: boxWith(() => disabled),
+		readonly: boxWith(() => readonly),
+		required: boxWith(() => required),
+		hourCycle: boxWith(() => hourCycle),
+		granularity: boxWith(() => granularity),
 		locale: resolveLocaleProp(() => locale),
-		hideTimeZone: box.with(() => hideTimeZone),
-		validate: box.with(() => validate),
-		maxValue: box.with(() => maxValue),
-		minValue: box.with(() => minValue),
-		placeholder: box.with(
+		hideTimeZone: boxWith(() => hideTimeZone),
+		validate: boxWith(() => validate),
+		maxValue: boxWith(() => maxValue),
+		minValue: boxWith(() => minValue),
+		placeholder: boxWith(
 			() => placeholder as DateValue,
 			(v) => {
 				placeholder = v;
 				onPlaceholderChange(v);
 			}
 		),
-		readonlySegments: box.with(() => readonlySegments),
-		value: box.with(
+		readonlySegments: boxWith(() => readonlySegments),
+		value: boxWith(
 			() => value as DateRange,
 			(v) => {
 				value = v;
 				onValueChange(v);
 			}
 		),
-		startValue: box.with(
+		startValue: boxWith(
 			() => startValue,
 			(v) => {
 				startValue = v;
 				onStartValueChange(v);
 			}
 		),
-		endValue: box.with(
+		endValue: boxWith(
 			() => endValue,
 			(v) => {
 				endValue = v;
 				onEndValueChange(v);
 			}
 		),
-		onInvalid: box.with(() => onInvalid),
-		errorMessageId: box.with(() => errorMessageId),
+		onInvalid: boxWith(() => onInvalid),
+		errorMessageId: boxWith(() => errorMessageId),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, rootState.props));

package/dist/bits/date-range-field/components/date-range-field.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { DateRangeFieldRootProps } from "../types.js";
-declare const DateRangeField: import("svelte").Component<DateRangeFieldRootProps, {}, "value" | "placeholder" | "ref">;
+declare const DateRangeField: import("svelte").Component<DateRangeFieldRootProps, {}, "ref" | "value" | "placeholder">;
 type DateRangeField = ReturnType<typeof DateRangeField>;
 export default DateRangeField;

package/dist/bits/date-range-field/date-range-field.svelte.js

@@ -1,8 +1,8 @@
-import { box, onDestroyEffect, attachRef, DOMContext, } from "svelte-toolbelt";
+import { boxWith, onDestroyEffect, attachRef, DOMContext, } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { DateFieldInputState, DateFieldRootState } from "../date-field/date-field.svelte.js";
 import { useId } from "../../internal/use-id.js";
-import { createBitsAttrs, getDataDisabled, getDataInvalid } from "../../internal/attrs.js";
+import { createBitsAttrs, boolToEmptyStrOrUndef } from "../../internal/attrs.js";
 import { createFormatter } from "../../internal/date-time/formatter.js";
 import { removeDescriptionElement } from "../../internal/date-time/field/helpers.js";
 import { isBefore } from "../../internal/date-time/utils.js";
@@ -33,8 +33,8 @@ export class DateRangeFieldRootState {
         this.opts = opts;
         this.formatter = createFormatter({
             initialLocale: this.opts.locale.current,
-            monthFormat: box.with(() => "long"),
-            yearFormat: box.with(() => "numeric"),
+            monthFormat: boxWith(() => "long"),
+            yearFormat: boxWith(() => "numeric"),
         });
         this.domContext = new DOMContext(this.opts.ref);
         this.attachment = attachRef(this.opts.ref, (v) => (this.fieldNode = v));
@@ -143,7 +143,7 @@ export class DateRangeFieldRootState {
         id: this.opts.id.current,
         role: "group",
         [dateRangeFieldAttrs.root]: "",
-        "data-invalid": getDataInvalid(this.isInvalid),
+        "data-invalid": boolToEmptyStrOrUndef(this.isInvalid),
         ...this.attachment,
     }));
 }
@@ -169,8 +169,8 @@ export class DateRangeFieldLabelState {
     };
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        "data-invalid": getDataInvalid(this.root.isInvalid),
-        "data-disabled": getDataDisabled(this.root.opts.disabled.current),
+        "data-invalid": boolToEmptyStrOrUndef(this.root.isInvalid),
+        "data-disabled": boolToEmptyStrOrUndef(this.root.opts.disabled.current),
         [dateRangeFieldAttrs.label]: "",
         onclick: this.#onclick,
         ...this.attachment,
@@ -184,7 +184,7 @@ export class DateRangeFieldInputState {
             disabled: root.opts.disabled,
             readonly: root.opts.readonly,
             readonlySegments: root.opts.readonlySegments,
-            validate: box.with(() => undefined),
+            validate: boxWith(() => undefined),
             minValue: root.opts.minValue,
             maxValue: root.opts.maxValue,
             hourCycle: root.opts.hourCycle,
@@ -195,7 +195,7 @@ export class DateRangeFieldInputState {
             placeholder: root.opts.placeholder,
             onInvalid: root.opts.onInvalid,
             errorMessageId: root.opts.errorMessageId,
-            isInvalidProp: box.with(() => root.isInvalid),
+            isInvalidProp: boxWith(() => root.isInvalid),
         }, root);
         return new DateFieldInputState({ name: opts.name, id: opts.id, ref: opts.ref }, fieldState);
     }

package/dist/bits/date-range-picker/components/date-range-picker-calendar.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { DateRangePickerCalendarProps } from "../types.js";
 	import { DateRangePickerRootContext } from "../date-range-picker.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -18,8 +18,8 @@
 	const dateRangePickerRootState = DateRangePickerRootContext.get();
 
 	const rangeCalendarState = RangeCalendarRootState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

package/dist/bits/date-range-picker/components/date-range-picker.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { watch } from "runed";
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { DateValue } from "@internationalized/date";
 	import { DateRangePickerRootState } from "../date-range-picker.svelte.js";
 	import type { DateRangePickerRootProps } from "../types.js";
@@ -114,73 +114,73 @@
 	}
 
 	const pickerRootState = DateRangePickerRootState.create({
-		open: box.with(
+		open: boxWith(
 			() => open,
 			(v) => {
 				open = v;
 				onOpenChange(v);
 			}
 		),
-		value: box.with(
+		value: boxWith(
 			() => value as DateRange,
 			(v) => {
 				value = v;
 				onValueChange(v);
 			}
 		),
-		placeholder: box.with(
+		placeholder: boxWith(
 			() => placeholder as DateValue,
 			(v) => {
 				placeholder = v;
 				onPlaceholderChange(v as DateValue);
 			}
 		),
-		isDateUnavailable: box.with(() => isDateUnavailable),
-		minValue: box.with(() => minValue),
-		maxValue: box.with(() => maxValue),
-		minDays: box.with(() => minDays),
-		maxDays: box.with(() => maxDays),
-		disabled: box.with(() => disabled),
-		readonly: box.with(() => readonly),
-		granularity: box.with(() => granularity),
-		readonlySegments: box.with(() => readonlySegments),
-		hourCycle: box.with(() => hourCycle),
+		isDateUnavailable: boxWith(() => isDateUnavailable),
+		minValue: boxWith(() => minValue),
+		maxValue: boxWith(() => maxValue),
+		minDays: boxWith(() => minDays),
+		maxDays: boxWith(() => maxDays),
+		disabled: boxWith(() => disabled),
+		readonly: boxWith(() => readonly),
+		granularity: boxWith(() => granularity),
+		readonlySegments: boxWith(() => readonlySegments),
+		hourCycle: boxWith(() => hourCycle),
 		locale: resolveLocaleProp(() => locale),
-		hideTimeZone: box.with(() => hideTimeZone),
-		required: box.with(() => required),
-		calendarLabel: box.with(() => calendarLabel),
-		disableDaysOutsideMonth: box.with(() => disableDaysOutsideMonth),
-		preventDeselect: box.with(() => preventDeselect),
-		pagedNavigation: box.with(() => pagedNavigation),
-		weekStartsOn: box.with(() => weekStartsOn),
-		weekdayFormat: box.with(() => weekdayFormat),
-		isDateDisabled: box.with(() => isDateDisabled),
-		fixedWeeks: box.with(() => fixedWeeks),
-		numberOfMonths: box.with(() => numberOfMonths),
-		excludeDisabled: box.with(() => excludeDisabled),
-		onRangeSelect: box.with(() => onRangeSelect),
-		startValue: box.with(
+		hideTimeZone: boxWith(() => hideTimeZone),
+		required: boxWith(() => required),
+		calendarLabel: boxWith(() => calendarLabel),
+		disableDaysOutsideMonth: boxWith(() => disableDaysOutsideMonth),
+		preventDeselect: boxWith(() => preventDeselect),
+		pagedNavigation: boxWith(() => pagedNavigation),
+		weekStartsOn: boxWith(() => weekStartsOn),
+		weekdayFormat: boxWith(() => weekdayFormat),
+		isDateDisabled: boxWith(() => isDateDisabled),
+		fixedWeeks: boxWith(() => fixedWeeks),
+		numberOfMonths: boxWith(() => numberOfMonths),
+		excludeDisabled: boxWith(() => excludeDisabled),
+		onRangeSelect: boxWith(() => onRangeSelect),
+		startValue: boxWith(
 			() => startValue,
 			(v) => {
 				startValue = v;
 				onStartValueChange(v);
 			}
 		),
-		endValue: box.with(
+		endValue: boxWith(
 			() => endValue,
 			(v) => {
 				endValue = v;
 				onEndValueChange(v);
 			}
 		),
-		monthFormat: box.with(() => monthFormat),
-		yearFormat: box.with(() => yearFormat),
+		monthFormat: boxWith(() => monthFormat),
+		yearFormat: boxWith(() => yearFormat),
 		defaultPlaceholder,
 	});
 
 	PopoverRootState.create({
 		open: pickerRootState.opts.open,
-		onOpenChangeComplete: box.with(() => onOpenChangeComplete),
+		onOpenChangeComplete: boxWith(() => onOpenChangeComplete),
 	});
 
 	const fieldRootState = DateRangeFieldRootState.create({
@@ -188,7 +188,7 @@
 		disabled: pickerRootState.opts.disabled,
 		readonly: pickerRootState.opts.readonly,
 		readonlySegments: pickerRootState.opts.readonlySegments,
-		validate: box.with(() => validate),
+		validate: boxWith(() => validate),
 		minValue: pickerRootState.opts.minValue,
 		maxValue: pickerRootState.opts.maxValue,
 		granularity: pickerRootState.opts.granularity,
@@ -197,15 +197,15 @@
 		locale: pickerRootState.opts.locale,
 		required: pickerRootState.opts.required,
 		placeholder: pickerRootState.opts.placeholder,
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
 		startValue: pickerRootState.opts.startValue,
 		endValue: pickerRootState.opts.endValue,
-		onInvalid: box.with(() => onInvalid),
-		errorMessageId: box.with(() => errorMessageId),
+		onInvalid: boxWith(() => onInvalid),
+		errorMessageId: boxWith(() => errorMessageId),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, fieldRootState.props));

package/dist/bits/date-range-picker/components/date-range-picker.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { DateRangePickerRootProps } from "../types.js";
-declare const DateRangePicker: import("svelte").Component<DateRangePickerRootProps, {}, "value" | "placeholder" | "ref" | "open">;
+declare const DateRangePicker: import("svelte").Component<DateRangePickerRootProps, {}, "ref" | "value" | "placeholder" | "open">;
 type DateRangePicker = ReturnType<typeof DateRangePicker>;
 export default DateRangePicker;

package/dist/bits/dialog/components/dialog-close.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import { DialogCloseState } from "../dialog.svelte.js";
 	import type { DialogCloseProps } from "../types.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -16,13 +16,13 @@
 	}: DialogCloseProps = $props();
 
 	const closeState = DialogCloseState.create({
-		variant: box.with(() => "close"),
-		id: box.with(() => id),
-		ref: box.with(
+		variant: boxWith(() => "close"),
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		disabled: box.with(() => Boolean(disabled)),
+		disabled: boxWith(() => Boolean(disabled)),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, closeState.props));

package/dist/bits/dialog/components/dialog-content.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import { DialogContentState } from "../dialog.svelte.js";
 	import type { DialogContentProps } from "../types.js";
 	import DismissibleLayer from "../../utilities/dismissible-layer/dismissible-layer.svelte";
@@ -30,8 +30,8 @@
 	}: DialogContentProps = $props();
 
 	const contentState = DialogContentState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

package/dist/bits/dialog/components/dialog-description.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import { DialogDescriptionState } from "../dialog.svelte.js";
 	import type { DialogDescriptionProps } from "../types.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -15,8 +15,8 @@
 	}: DialogDescriptionProps = $props();
 
 	const descriptionState = DialogDescriptionState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

package/dist/bits/dialog/components/dialog-overlay.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import { DialogOverlayState } from "../dialog.svelte.js";
 	import type { DialogOverlayProps } from "../types.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -17,8 +17,8 @@
 	}: DialogOverlayProps = $props();
 
 	const overlayState = DialogOverlayState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

package/dist/bits/dialog/components/dialog-title.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import { DialogTitleState } from "../dialog.svelte.js";
 	import type { DialogTitleProps } from "../types.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -16,9 +16,9 @@
 	}: DialogTitleProps = $props();
 
 	const titleState = DialogTitleState.create({
-		id: box.with(() => id),
-		level: box.with(() => level),
-		ref: box.with(
+		id: boxWith(() => id),
+		level: boxWith(() => level),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

package/dist/bits/dialog/components/dialog-trigger.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import { DialogTriggerState } from "../dialog.svelte.js";
 	import type { DialogTriggerProps } from "../types.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -16,12 +16,12 @@
 	}: DialogTriggerProps = $props();
 
 	const triggerState = DialogTriggerState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		disabled: box.with(() => Boolean(disabled)),
+		disabled: boxWith(() => Boolean(disabled)),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, triggerState.props));

package/dist/bits/dialog/components/dialog.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
+	import { boxWith } from "svelte-toolbelt";
 	import { DialogRootState } from "../dialog.svelte.js";
 	import type { DialogRootProps } from "../types.js";
 	import { noop } from "../../../internal/noop.js";
@@ -12,15 +12,15 @@
 	}: DialogRootProps = $props();
 
 	DialogRootState.create({
-		variant: box.with(() => "dialog"),
-		open: box.with(
+		variant: boxWith(() => "dialog"),
+		open: boxWith(
 			() => open,
 			(v) => {
 				open = v;
 				onOpenChange(v);
 			}
 		),
-		onOpenChangeComplete: box.with(() => onOpenChangeComplete),
+		onOpenChangeComplete: boxWith(() => onOpenChangeComplete),
 	});
 </script>
 

package/dist/bits/dialog/dialog.svelte.d.ts

@@ -100,7 +100,7 @@ export declare class DialogTitleState {
         readonly "data-state": "open" | "closed";
         readonly id: string;
         readonly role: "heading";
-        readonly "aria-level": 1 | 2 | 3 | 4 | 6 | 5;
+        readonly "aria-level": 1 | 2 | 3 | 4 | 5 | 6;
     };
 }
 interface DialogDescriptionStateOpts extends WithRefOpts {

package/dist/bits/dialog/dialog.svelte.js

@@ -1,6 +1,6 @@
-import { attachRef, box, } from "svelte-toolbelt";
+import { attachRef, boxWith, } from "svelte-toolbelt";
 import { Context, watch } from "runed";
-import { createBitsAttrs, getAriaExpanded, getDataOpenClosed } from "../../internal/attrs.js";
+import { createBitsAttrs, boolToStr, getDataOpenClosed } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
 import { OpenChangeComplete } from "../../internal/open-change-complete.js";
 const dialogAttrs = createBitsAttrs({
@@ -26,7 +26,7 @@ export class DialogRootState {
         this.handleOpen = this.handleOpen.bind(this);
         this.handleClose = this.handleClose.bind(this);
         new OpenChangeComplete({
-            ref: box.with(() => this.contentNode),
+            ref: boxWith(() => this.contentNode),
             open: this.opts.open,
             enabled: true,
             onComplete: () => {
@@ -86,7 +86,7 @@ export class DialogTriggerState {
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "aria-haspopup": "dialog",
-        "aria-expanded": getAriaExpanded(this.root.opts.open.current),
+        "aria-expanded": boolToStr(this.root.opts.open.current),
         "aria-controls": this.root.contentId,
         [this.root.getBitsAttr("trigger")]: "",
         onkeydown: this.onkeydown,

package/dist/bits/dropdown-menu/components/dropdown-menu-content-static.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { DropdownMenuContentStaticProps } from "../types.js";
 	import { MenuContentState } from "../../menu/menu.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -24,13 +24,13 @@
 	}: DropdownMenuContentStaticProps = $props();
 
 	const contentState = MenuContentState.create({
-		id: box.with(() => id),
-		loop: box.with(() => loop),
-		ref: box.with(
+		id: boxWith(() => id),
+		loop: boxWith(() => loop),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		onCloseAutoFocus: box.with(() => onCloseAutoFocus),
+		onCloseAutoFocus: boxWith(() => onCloseAutoFocus),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));

package/dist/bits/dropdown-menu/components/dropdown-menu-content.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { DropdownMenuContentProps } from "../types.js";
 	import { MenuContentState } from "../../menu/menu.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -25,13 +25,13 @@
 	}: DropdownMenuContentProps = $props();
 
 	const contentState = MenuContentState.create({
-		id: box.with(() => id),
-		loop: box.with(() => loop),
-		ref: box.with(
+		id: boxWith(() => id),
+		loop: boxWith(() => loop),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		onCloseAutoFocus: box.with(() => onCloseAutoFocus),
+		onCloseAutoFocus: boxWith(() => onCloseAutoFocus),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));

package/dist/bits/label/components/label.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { LabelRootProps } from "../types.js";
 	import { LabelRootState } from "../label.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -16,8 +16,8 @@
 	}: LabelRootProps = $props();
 
 	const rootState = LabelRootState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

package/dist/bits/link-preview/components/link-preview-content-static.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { LinkPreviewContentStaticProps } from "../types.js";
 	import { LinkPreviewContentState } from "../link-preview.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -23,13 +23,13 @@
 	}: LinkPreviewContentStaticProps = $props();
 
 	const contentState = LinkPreviewContentState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		onInteractOutside: box.with(() => onInteractOutside),
-		onEscapeKeydown: box.with(() => onEscapeKeydown),
+		onInteractOutside: boxWith(() => onInteractOutside),
+		onEscapeKeydown: boxWith(() => onEscapeKeydown),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));

package/dist/bits/link-preview/components/link-preview-content.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { LinkPreviewContentProps } from "../types.js";
 	import { LinkPreviewContentState } from "../link-preview.svelte.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
@@ -31,13 +31,13 @@
 	}: LinkPreviewContentProps = $props();
 
 	const contentState = LinkPreviewContentState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		onInteractOutside: box.with(() => onInteractOutside),
-		onEscapeKeydown: box.with(() => onEscapeKeydown),
+		onInteractOutside: boxWith(() => onInteractOutside),
+		onEscapeKeydown: boxWith(() => onEscapeKeydown),
 	});
 
 	const floatingProps = $derived({

package/dist/bits/link-preview/components/link-preview-trigger.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { LinkPreviewTriggerProps } from "../types.js";
 	import { LinkPreviewTriggerState } from "../link-preview.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -16,8 +16,8 @@
 	}: LinkPreviewTriggerProps = $props();
 
 	const triggerState = LinkPreviewTriggerState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),