import { K as x, H as f, j as n } from "./index-b203ecbb.js";
import { useCallback as l } from "react";
import { P as g } from "./index-56e81c67.js";
import "react-dom";
const h = x`
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  width: 100%;
`, v = /^\d+(\.\d+)?(px|vh|vw|%|em|rem|cm|mm|in|pt|pc)$/, y = (o) => {
  const {
    handleUpdateMultiAttrDSL: e,
    attrName: s,
    value: c,
    // icon,
    labelName: i,
    labelSize: m = "small",
    labelDesc: p
  } = o, u = l(
    (a) => {
      e == null || e({
        [s]: a
      });
    },
    [s, e]
  ), d = l(
    (a) => {
      let t = a.target.value.toLocaleLowerCase().replace(/\s*/g, "");
      if (t && !v.test(t)) {
        const r = t.match(/\d+(\.\d+)?/g);
        r && (t = r.join("") + "px");
      }
      e == null || e({
        [s]: t
      });
    },
    [s, e]
  );
  return /* @__PURE__ */ f("div", { css: h, children: [
    /* @__PURE__ */ n(
      g,
      {
        labelName: i,
        labelDesc: p,
        labelSize: m
      }
    ),
    /* @__PURE__ */ n(
      "input",
      {
        onChange: (a) => u(a.target.value),
        value: c,
        width: "170px",
        onBlur: d
      }
    )
  ] });
};
export {
  y as default
};
//# sourceMappingURL=index-9fb74f80.js.map
