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

import './Card.css';const card = "_card_of64j_1";
const styles = {
	card: card,
	"card-section": "_card-section_of64j_27",
	"bg-stronger": "_bg-stronger_of64j_31",
	"bg-strong": "_bg-strong_of64j_31",
	"padding-0": "_padding-0_of64j_39",
	"padding-xsmall": "_padding-xsmall_of64j_45",
	"padding-small": "_padding-small_of64j_51",
	"padding-medium": "_padding-medium_of64j_57",
	"padding-large": "_padding-large_of64j_63"
};

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-Bt0F6RTq.js.map
