import { jsx, jsxs } from "react/jsx-runtime";
import { cx } from "@emotion/css";
import { forwardRef } from "react";
import { useStyle } from "../../../../../runtimes/react/use-style";
function Label() {
  return /* @__PURE__ */ jsx(
    "div",
    {
      className: useStyle({
        maxWidth: 120,
        minWidth: 60,
        height: 8,
        borderRadius: 2,
        backgroundColor: "#a1a8c2",
        opacity: 0.4,
        marginBottom: 8
      })
    }
  );
}
function Input() {
  return /* @__PURE__ */ jsx(
    "div",
    {
      className: useStyle({
        minWidth: 80,
        height: 32,
        borderRadius: 4,
        borderWidth: 2,
        borderStyle: "solid",
        borderColor: "#a1a8c2",
        opacity: 0.4
      })
    }
  );
}
function Button() {
  return /* @__PURE__ */ jsx(
    "div",
    {
      className: useStyle({
        minWidth: 140,
        height: 32,
        borderRadius: 4,
        backgroundColor: "#a1a8c2",
        opacity: 0.4
      })
    }
  );
}
var Placeholder_default = forwardRef(function Placeholder({ className, width, margin }, ref) {
  return /* @__PURE__ */ jsxs(
    "div",
    {
      ref,
      className: cx(
        useStyle({ display: "flex", flexDirection: "column" }),
        width,
        margin,
        className
      ),
      children: [
        /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", marginBottom: 16 }, children: [
          /* @__PURE__ */ jsx(Label, {}),
          /* @__PURE__ */ jsx(Input, {})
        ] }),
        /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", marginBottom: 16 }, children: [
          /* @__PURE__ */ jsx(Label, {}),
          /* @__PURE__ */ jsx(Input, {})
        ] }),
        /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsx(Button, {}) })
      ]
    }
  );
});
export {
  Placeholder_default as default
};
//# sourceMappingURL=index.js.map