braid-design-system/dist/lib/components/Box/Box.playroom.mjs

Themeable design system for the SEEK Group

import { jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import { atoms } from "../../css/atoms/atoms.mjs";
import { Box as Box$1 } from "./Box.mjs";
import { sprinkles } from "../../css/atoms/sprinkles.css.mjs";
const Box = forwardRef((props, ref) => {
  const sprinklesProps = {};
  const otherProps = {};
  for (const key in props) {
    if (sprinkles.properties.has(key)) {
      const value = props[key];
      try {
        atoms({ [key]: value });
        sprinklesProps[key] = value;
      } catch {
        if (key === "background") {
          if (typeof value === "string" && /^customDark|customLight$/.test(value) || typeof value === "object" && (value.darkMode || value.lightMode)) {
            sprinklesProps[key] = value;
          }
        }
      }
    } else {
      otherProps[key] = props[key];
    }
  }
  return /* @__PURE__ */ jsx(Box$1, { ref, ...sprinklesProps, ...otherProps });
});
Box.displayName = "Box";
export {
  Box
};