import { j as jsxRuntimeExports } from "../../../../../../../_virtual/jsx-runtime.js";
import EnumField from "./enum.js";
import { FieldTitle } from "../field-factory.js";
import { ColorElementPreviewPill } from "./color.js";
function BorderField(props) {
  const { currentValue, onChange, schema, title, description } = props;
  const onPropsChange = (newVal) => onChange({ ...currentValue, ...newVal });
  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between flex-1 gap-1 flex-wrap", children: [
    /* @__PURE__ */ jsxRuntimeExports.jsx(FieldTitle, { title, description }),
    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 gap-3 flex items-center justify-end", children: [
      currentValue?.width && currentValue.width !== "border-0" && /* @__PURE__ */ jsxRuntimeExports.jsx(
        ColorElementPreviewPill,
        {
          elementColorType: "border",
          onChange: (color) => {
            onPropsChange({ color: color || void 0 });
          },
          color: currentValue?.color,
          hideColorLabel: true
        }
      ),
      /* @__PURE__ */ jsxRuntimeExports.jsx(
        EnumField,
        {
          ...props,
          title: void 0,
          schema: schema.properties.width,
          currentValue: currentValue?.width,
          onChange: (value) => onPropsChange({ width: value }),
          noFieldGrow: true
        }
      )
    ] })
  ] });
}
export {
  BorderField as default
};
//# sourceMappingURL=border.js.map
