"use client";
import { jsxs as i, jsx as e, Fragment as c } from "react/jsx-runtime";
import { useSettings as d } from "../../hooks/use-settings.js";
import { Unit as n } from "../../types/style.js";
import { ColorControl as m } from "./color.control.js";
import { SelectControl as u } from "./select.control.js";
import { SpacingControl as s } from "./spacing.control.js";
import { classNames as p } from "../../../../../utils.js";
const g = ({ fieldName: o, mode: r, type: t, className: a }) => {
  const [l] = d(
    r ? `${o}.type.${r}` : `${o}.type`,
    t
  );
  return /* @__PURE__ */ i("div", { className: p(a), children: [
    /* @__PURE__ */ e(
      u,
      {
        type: t,
        options: [
          { content: "None", value: "none" },
          { content: "Solid", value: "solid" },
          { content: "Double", value: "double" },
          { content: "Dotted", value: "dotted" },
          { content: "Groove", value: "groove" }
        ],
        fieldName: `${o}.type`,
        label: "Border Type",
        mode: r
      }
    ),
    l && l !== "none" && /* @__PURE__ */ i(c, { children: [
      /* @__PURE__ */ e(
        s,
        {
          type: t,
          fieldName: `${o}.width`,
          label: "Border Width",
          mode: r,
          responsive: !0,
          min: 0
        }
      ),
      /* @__PURE__ */ e(
        m,
        {
          type: t,
          label: "Border Color",
          fieldName: `${o}.color`,
          mode: r
        }
      )
    ] }),
    /* @__PURE__ */ e(
      s,
      {
        type: t,
        fieldName: `${o}.radius`,
        label: "Border Radius",
        mode: r,
        min: 0,
        units: [n.PX, n.PERCENTAGE, n.REM, n.EM]
      }
    )
  ] });
};
export {
  g as BorderControl
};
//# sourceMappingURL=border.control.js.map
