import { jsx } from 'react/jsx-runtime';
import { forwardRef } from 'react';
import { c as cx } from './index-De1g9FRV.js';
import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-CB_zHDbW.js';

import './Card.css';const card = "_card_ujr80_1";
const styles = {
	card: card,
	"card-section": "_card-section_ujr80_28",
	"bg-stronger": "_bg-stronger_ujr80_32",
	"bg-strong": "_bg-strong_ujr80_32",
	"padding-0": "_padding-0_ujr80_40",
	"padding-xsmall": "_padding-xsmall_ujr80_46",
	"padding-small": "_padding-small_ujr80_52",
	"padding-medium": "_padding-medium_ujr80_58",
	"padding-large": "_padding-large_ujr80_64"
};

const Card = forwardRef((props, ref) => {
  const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
  const {
    children,
    className,
    padding = "medium",
    background,
    style,
    ...rest
  } = componentProps;
  const cardClassNames = cx(
    [styles["card"]],
    [styles[`padding-${padding}`]],
    className,
    {
      [styles[`bg-${background}`]]: !!background
    }
  );
  const styleCombined = {
    ...style,
    ...layoutStyles
  };
  return /* @__PURE__ */ jsx(
    "div",
    {
      className: cardClassNames,
      "data-anv": "card",
      style: styleCombined,
      ref,
      ...rest,
      children
    }
  );
});
Card.displayName = "Card";

export { Card as C };
//# sourceMappingURL=Card-DSFuXUGk.js.map
