import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { useFormContext, Sizes, Shapes } from "../../../../context/FormContext";
import { getSizeHeight as getLabelSizeHeight } from "../Label";
import { getSizeHeight as getInputSizeHeight } from "../Input";
import { getShapeBorderRadius } from "../../services/responsiveField";
import { useStyle } from "../../../../../../../runtimes/react/use-style";
import { useResponsiveStyle } from "../../../../../../utils/responsive-style";
import { cx } from "@emotion/css";
function Label({ size }) {
  return /* @__PURE__ */ jsx(
    "div",
    {
      className: cx(
        useStyle({
          display: "block",
          maxWidth: 120,
          minWidth: 60,
          borderRadius: 2,
          backgroundColor: "#5f49f4",
          opacity: 0.4
        }),
        useStyle(
          useResponsiveStyle([size], ([size2 = Sizes.MEDIUM]) => ({
            margin: `calc(0.25 * ${getLabelSizeHeight(size2)}px + 2px) 0`,
            minHeight: 0.5 * getLabelSizeHeight(size2),
            maxHeight: 0.5 * getLabelSizeHeight(size2)
          }))
        )
      )
    }
  );
}
function Input({ shape, size }) {
  return /* @__PURE__ */ jsx(
    "div",
    {
      className: cx(
        useStyle({
          display: "block",
          width: "100%",
          borderWidth: 2,
          borderStyle: "solid",
          borderColor: "#5f49f4",
          opacity: 0.4
        }),
        useStyle(
          useResponsiveStyle(
            [shape, size],
            ([shape2 = Shapes.ROUNDED, size2 = Sizes.MEDIUM]) => ({
              minHeight: getInputSizeHeight(size2),
              maxHeight: getInputSizeHeight(size2),
              borderRadius: getShapeBorderRadius(shape2)
            })
          )
        )
      )
    }
  );
}
function PlaceholderTableField() {
  const { size, shape } = useFormContext();
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(Label, { size }),
    /* @__PURE__ */ jsx(Input, { shape, size })
  ] });
}
export {
  PlaceholderTableField as default
};
//# sourceMappingURL=index.js.map