// packages/block-editor/src/components/responsive-block-control/label.js
import { useInstanceId } from "@wordpress/compose";
import { VisuallyHidden } from "@wordpress/components";
import { _x, sprintf } from "@wordpress/i18n";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
function ResponsiveBlockControlLabel({
  property,
  viewport,
  desc
}) {
  const instanceId = useInstanceId(ResponsiveBlockControlLabel);
  const accessibleLabel = desc || sprintf(
    /* translators: 1: property name. 2: viewport name. */
    _x(
      "Controls the %1$s property for %2$s viewports.",
      "Text labelling a interface as controlling a given layout property (eg: margin) for a given screen size."
    ),
    property,
    viewport.label
  );
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx("span", { "aria-describedby": `rbc-desc-${instanceId}`, children: viewport.label }),
    /* @__PURE__ */ jsx(VisuallyHidden, { as: "span", id: `rbc-desc-${instanceId}`, children: accessibleLabel })
  ] });
}
export {
  ResponsiveBlockControlLabel as default
};
//# sourceMappingURL=label.js.map
