import { vars as vars$1 } from "./styles/lib/themes/vars.css.mjs";
import { atoms as atoms$1 } from "./styles/lib/css/atoms/atoms.mjs";
import { colorModeStyle } from "./styles/lib/css/colorModeStyle.mjs";
import { responsiveStyle } from "./styles/lib/css/responsiveStyle.mjs";
import { breakpoints } from "./styles/lib/css/breakpoints.mjs";
import { globalHeadingStyle, globalTextStyle } from "./styles/lib/css/globalTypographyStyles.mjs";
const {
  grid,
  space,
  touchableSize,
  contentWidth,
  // TODO: COLORMODE RELEASE
  // Release new backgrounds
  backgroundColor: { surfaceDark: _, bodyDark: __, ...backgroundColor },
  foregroundColor,
  textWeight,
  borderColor,
  borderRadius,
  borderWidth,
  shadow
} = vars$1;
const vars = {
  grid,
  space,
  touchableSize,
  contentWidth,
  backgroundColor,
  foregroundColor,
  textWeight,
  borderColor,
  borderRadius,
  borderWidth,
  shadow
};
function atoms(props) {
  if (process.env.NODE_ENV !== "production") {
    if ("background" in props) {
      throw new Error(
        `'background' is not available via 'atoms'. This is because Braid uses React context to dynamically apply matching tones to child elements. Please use \`<Box background="...">\` instead.`
      );
    }
  }
  return atoms$1(props);
}
export {
  atoms,
  breakpoints,
  colorModeStyle,
  globalHeadingStyle,
  globalTextStyle,
  responsiveStyle,
  vars
};
