separate out inline code and code block components

components/Loading/Loading.tsx

@@ -1,6 +1,6 @@
 import { memo } from "react";
 import { styled, keyframes } from "../../lib/styles/stitches.config";
-import type * as Stitches from "@stitches/react";
+import type { ComponentProps } from "react";
 
 const pulse = keyframes({
   "0%, 80%, 100%": {
@@ -23,15 +23,13 @@ const Box = styled("div", {
   backgroundColor: "$mediumLight",
 });
 
-export type LoadingProps = {
+export type LoadingProps = ComponentProps<typeof Wrapper> & {
   width: number; // of entire container, in pixels
   boxes?: number; // total number of boxes (default: 3)
   timing?: number; // staggered timing between each box's pulse, in seconds (default: 0.1s)
-  css?: Stitches.CSS;
-  className?: string;
 };
 
-const Loading = ({ width, boxes = 3, timing = 0.1, css, className }: LoadingProps) => {
+const Loading = ({ width, boxes = 3, timing = 0.1, css, ...rest }: LoadingProps) => {
   // each box is just an empty div
   const divs = [];
 
@@ -52,12 +50,12 @@ const Loading = ({ width, boxes = 3, timing = 0.1, css, className }: LoadingProp
 
   return (
     <Wrapper
-      className={className}
       css={{
         width: `${width}px`,
         height: `${width / 2}px`,
         ...css,
       }}
+      {...rest}
     >
       {divs}
     </Wrapper>