Add Box component

package.json

@@ -81,6 +81,7 @@
     "@vanilla-extract/webpack-plugin": "^2.3.6",
     "babel-loader": "^9.1.0",
     "classnames": "^2.3.2",
+    "clsx": "^2.1.1",
     "codemirror": "^5.65.10",
     "command-line-args": "^5.2.1",
     "command-line-usage": "^6.1.3",

src/Playroom/Box/Box.tsx

@@ -0,0 +1,36 @@
+import clsx, { type ClassValue } from 'clsx';
+import type { AllHTMLAttributes, ElementType } from 'react';
+import { sprinkles, type Sprinkles } from '../sprinkles.css';
+
+interface BoxProps
+  extends Omit<
+      AllHTMLAttributes<HTMLElement>,
+      'width' | 'height' | 'className' | 'data'
+    >,
+    Sprinkles {
+  className?: ClassValue;
+  component?: ElementType;
+}
+
+export const Box = ({
+  component = 'div',
+  className,
+  ...restProps
+}: BoxProps) => {
+  const atomProps: Record<string, unknown> = {};
+
+  for (const key in restProps) {
+    if (sprinkles.properties.has(key as keyof Sprinkles)) {
+      atomProps[key] = restProps[key as keyof typeof restProps];
+      delete restProps[key as keyof typeof restProps];
+    }
+  }
+
+  const userClasses = clsx(className);
+  const atomClasses = clsx(sprinkles({ ...atomProps }));
+  const classes = clsx(userClasses, atomClasses);
+
+  const Component = component;
+
+  return <Component className={classes} {...restProps} />;
+};

src/Playroom/sprinkles.css.ts

@@ -105,3 +105,5 @@ const responsiveProperties = defineProperties({
 });
 
 export const sprinkles = createSprinkles(responsiveProperties);
+
+export type Sprinkles = Parameters<typeof sprinkles>[0];