import { jsxs as s, jsx as o } from "@emotion/react/jsx-runtime";
import { useBase as y, evaluateWithContext as u } from "@m4l/core";
import { getSize as r } from "../../utils/getSize/index.js";
import { PropertyValueNodeRootStyled as c, PropertyValueNodeTitleStyled as h, PropertyValueNodeContentStyled as S } from "../../slots/PrintingSystemSlots.js";
const P = (i) => {
  const {
    property: d,
    children: n,
    direction: l,
    propertyWidth: e = "auto"
  } = i, { unitSize: t, mainColor: p, sourceData: a } = y(), m = u(a, d);
  return /* @__PURE__ */ s(
    c,
    {
      ownerState: { direction: l },
      children: [
        /* @__PURE__ */ o(
          h,
          {
            style: {
              width: r(e, t),
              minWidth: r(e, t),
              borderColor: p
            },
            children: m
          }
        ),
        /* @__PURE__ */ o(
          S,
          {
            children: n
          }
        )
      ]
    }
  );
};
export {
  P as PropertyValueNode
};
