fix: stackflow-spa example

examples/stackflow-spa/src/design-system/ui/action-button.tsx

@@ -1,11 +1,10 @@
 "use client";
 
-import "@seed-design/stylesheet/progressCircle.css";
-// TODO: we have to ensure load order between actionButton.css and progressCircle.css. should we bundle them together?
 import "@seed-design/stylesheet/actionButton.css";
 
 import { ActionButton as SeedActionButton } from "@seed-design/react";
 import * as React from "react";
+import { ProgressCircle } from "./progress-circle";
 
 export interface ActionButtonProps extends SeedActionButton.RootProps {
   prefixIcon?: React.ReactNode;
@@ -35,7 +34,11 @@ export const ActionButton = React.forwardRef<
         ) : (
           <SeedActionButton.Icon svg={children} />
         )}
-        {loading ? <SeedActionButton.ProgressCircle /> : null}
+        {loading ? (
+          <SeedActionButton.ProgressIndicator>
+            <ProgressCircle size="inherit" tone="inherit" />
+          </SeedActionButton.ProgressIndicator>
+        ) : null}
       </SeedActionButton.Root>
     );
   },

examples/stackflow-spa/src/design-system/ui/progress-circle.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import "@seed-design/stylesheet/progressCircle.css";
+
+import { ProgressCircle as SeedProgressCircle } from "@seed-design/react";
+import * as React from "react";
+
+export interface ProgressCircleProps extends SeedProgressCircle.RootProps {}
+
+/**
+ * @see https://v3.seed-design.io/docs/react/components/progress-circle
+ */
+export const ProgressCircle = React.forwardRef<
+  SVGSVGElement,
+  ProgressCircleProps
+>((props, ref) => {
+  return (
+    <SeedProgressCircle.Root ref={ref} {...props}>
+      <SeedProgressCircle.Track />
+      <SeedProgressCircle.Range />
+    </SeedProgressCircle.Root>
+  );
+});
+
+ProgressCircle.displayName = "ProgressCircle";
+
+/**
+ * This file is generated snippet from the Seed Design.
+ * You can extend the functionality from this snippet if needed.
+ */