From 18ca222557d678af388a9eb564f2a35337024629 Mon Sep 17 00:00:00 2001
From: Segun Adebayo <joseshegs@gmail.com>
Date: Mon, 9 Sep 2024 20:14:27 +0100
Subject: [PATCH] fix: svelte examples

---
 examples/svelte-ts/src/routes/combobox.svelte        | 2 +-
 examples/svelte-ts/src/routes/timer-countdown.svelte | 8 ++++----
 examples/svelte-ts/src/routes/timer-stopwatch.svelte | 8 ++++----
 packages/utilities/stringify-state/src/index.ts      | 1 +
 4 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/examples/svelte-ts/src/routes/combobox.svelte b/examples/svelte-ts/src/routes/combobox.svelte
index 50e9c9d83b..4a68d117e5 100644
--- a/examples/svelte-ts/src/routes/combobox.svelte
+++ b/examples/svelte-ts/src/routes/combobox.svelte
@@ -9,7 +9,7 @@
 
   const controls = useControls(comboboxControls)
 
-  let options = $state.frozen(comboboxData)
+  let options = $state.raw(comboboxData)
 
   const collection = combobox.collection({
     items: comboboxData,
diff --git a/examples/svelte-ts/src/routes/timer-countdown.svelte b/examples/svelte-ts/src/routes/timer-countdown.svelte
index 1bcc955d56..6ae6c240f1 100644
--- a/examples/svelte-ts/src/routes/timer-countdown.svelte
+++ b/examples/svelte-ts/src/routes/timer-countdown.svelte
@@ -21,13 +21,13 @@
 
 <main class="timer">
   <div {...api.getRootProps()}>
-    <div {...api.getSegmentProps({ type: "days" })}>{api.formattedTime.days}</div>
+    <div {...api.getItemProps({ type: "days" })}>{api.formattedTime.days}</div>
     <div {...api.getSeparatorProps()}>:</div>
-    <div {...api.getSegmentProps({ type: "hours" })}>{api.formattedTime.hours}</div>
+    <div {...api.getItemProps({ type: "hours" })}>{api.formattedTime.hours}</div>
     <div {...api.getSeparatorProps()}>:</div>
-    <div {...api.getSegmentProps({ type: "minutes" })}>{api.formattedTime.minutes}</div>
+    <div {...api.getItemProps({ type: "minutes" })}>{api.formattedTime.minutes}</div>
     <div {...api.getSeparatorProps()}>:</div>
-    <div {...api.getSegmentProps({ type: "seconds" })}>{api.formattedTime.seconds}</div>
+    <div {...api.getItemProps({ type: "seconds" })}>{api.formattedTime.seconds}</div>
   </div>
 
   <div style="display:flex; gap: 4px">
diff --git a/examples/svelte-ts/src/routes/timer-stopwatch.svelte b/examples/svelte-ts/src/routes/timer-stopwatch.svelte
index 8d55dcc096..8f83994afd 100644
--- a/examples/svelte-ts/src/routes/timer-stopwatch.svelte
+++ b/examples/svelte-ts/src/routes/timer-stopwatch.svelte
@@ -16,13 +16,13 @@
 
 <main class="timer">
   <div {...api.getRootProps()}>
-    <div {...api.getSegmentProps({ type: "days" })}>{api.formattedTime.days}</div>
+    <div {...api.getItemProps({ type: "days" })}>{api.formattedTime.days}</div>
     <div {...api.getSeparatorProps()}>:</div>
-    <div {...api.getSegmentProps({ type: "hours" })}>{api.formattedTime.hours}</div>
+    <div {...api.getItemProps({ type: "hours" })}>{api.formattedTime.hours}</div>
     <div {...api.getSeparatorProps()}>:</div>
-    <div {...api.getSegmentProps({ type: "minutes" })}>{api.formattedTime.minutes}</div>
+    <div {...api.getItemProps({ type: "minutes" })}>{api.formattedTime.minutes}</div>
     <div {...api.getSeparatorProps()}>:</div>
-    <div {...api.getSegmentProps({ type: "seconds" })}>{api.formattedTime.seconds}</div>
+    <div {...api.getItemProps({ type: "seconds" })}>{api.formattedTime.seconds}</div>
   </div>
 
   <div style="display:flex; gap: 4px">
diff --git a/packages/utilities/stringify-state/src/index.ts b/packages/utilities/stringify-state/src/index.ts
index bd41aaf0b2..4dc9e45377 100644
--- a/packages/utilities/stringify-state/src/index.ts
+++ b/packages/utilities/stringify-state/src/index.ts
@@ -1,3 +1,4 @@
+// @ts-ignore
 import formatHighlight from "json-format-highlight"
 
 interface Dict {