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

import './Card.css';const card = "_card_gi462_2";
const styles = {
	card: card,
	"card-section": "_card-section_gi462_25",
	"bg-stronger": "_bg-stronger_gi462_30",
	"bg-strong": "_bg-strong_gi462_30",
	"padding-0": "_padding-0_gi462_36",
	"padding-xsmall": "_padding-xsmall_gi462_42",
	"padding-small": "_padding-small_gi462_48",
	"padding-medium": "_padding-medium_gi462_54",
	"padding-large": "_padding-large_gi462_60"
};

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