Fix expandable box button being wrong

src/components/ui/Button.tsx

@@ -2,6 +2,7 @@ import { Slot } from "@radix-ui/react-slot";
 import { Loader2 } from "lucide-react";
 import { ButtonHTMLAttributes, forwardRef } from "react";
 import { cva, VariantProps } from "^/lib/cva";
+import Contents from "./Contents";
 
 export const buttonVariants = cva(
     "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
@@ -87,9 +88,9 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
                         <Loader2 className="animate-spin" />
                     </div>
                 ) : null}
-                <span className={spinner ? "invisible" : undefined}>
+                <Contents className={spinner ? "invisible" : undefined}>
                     {children}
-                </span>
+                </Contents>
             </Comp>
         );
     },

src/components/ui/Contents.tsx

@@ -0,0 +1,13 @@
+import { forwardRef, HTMLAttributes } from "react";
+import { cx } from "^/lib/cva";
+
+export interface ContentsProps extends HTMLAttributes<HTMLSpanElement> {}
+
+const Contents = forwardRef<HTMLSpanElement, ContentsProps>(
+    ({ className, ...props }, ref) => (
+        <span className={cx("contents", className)} ref={ref} {...props} />
+    ),
+);
+Contents.displayName = "Contents";
+
+export default Contents;