"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var Placeholder_exports = {};
__export(Placeholder_exports, {
  default: () => Placeholder_default
});
module.exports = __toCommonJS(Placeholder_exports);
var import_jsx_runtime = require("react/jsx-runtime");
var import_css = require("@emotion/css");
var import_react = require("react");
var import_use_style = require("../../../../../runtimes/react/use-style");
function Label() {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    "div",
    {
      className: (0, import_use_style.useStyle)({
        maxWidth: 120,
        minWidth: 60,
        height: 8,
        borderRadius: 2,
        backgroundColor: "#a1a8c2",
        opacity: 0.4,
        marginBottom: 8
      })
    }
  );
}
function Input() {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    "div",
    {
      className: (0, import_use_style.useStyle)({
        minWidth: 80,
        height: 32,
        borderRadius: 4,
        borderWidth: 2,
        borderStyle: "solid",
        borderColor: "#a1a8c2",
        opacity: 0.4
      })
    }
  );
}
function Button() {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    "div",
    {
      className: (0, import_use_style.useStyle)({
        minWidth: 140,
        height: 32,
        borderRadius: 4,
        backgroundColor: "#a1a8c2",
        opacity: 0.4
      })
    }
  );
}
var Placeholder_default = (0, import_react.forwardRef)(function Placeholder({ className, width, margin }, ref) {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
    "div",
    {
      ref,
      className: (0, import_css.cx)(
        (0, import_use_style.useStyle)({ display: "flex", flexDirection: "column" }),
        width,
        margin,
        className
      ),
      children: [
        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", marginBottom: 16 }, children: [
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, {}),
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {})
        ] }),
        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", marginBottom: 16 }, children: [
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, {}),
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {})
        ] }),
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", flexDirection: "column", justifyContent: "flex-end" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {}) })
      ]
    }
  );
});
//# sourceMappingURL=index.js.map