@wordpress/components 31.0.1-next.6deb34194.0 → 31.0.1-next.76cff8c98.0

package/build/flex/index.cjs

@@ -0,0 +1,53 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/components/src/flex/index.ts
+var flex_exports = {};
+__export(flex_exports, {
+  Flex: () => import_flex.default,
+  FlexBlock: () => import_flex_block.default,
+  FlexItem: () => import_flex_item.default,
+  useFlex: () => import_flex.useFlex,
+  useFlexBlock: () => import_flex_block.useFlexBlock,
+  useFlexItem: () => import_flex_item.useFlexItem
+});
+module.exports = __toCommonJS(flex_exports);
+var import_flex = __toESM(require("./flex/index.cjs"));
+var import_flex_item = __toESM(require("./flex-item/index.cjs"));
+var import_flex_block = __toESM(require("./flex-block/index.cjs"));
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Flex,
+  FlexBlock,
+  FlexItem,
+  useFlex,
+  useFlexBlock,
+  useFlexItem
+});
+//# sourceMappingURL=index.cjs.map

package/build/flex/styles.cjs

@@ -0,0 +1,87 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/components/src/flex/styles.ts
+var styles_exports = {};
+__export(styles_exports, {
+  Flex: () => Flex,
+  Item: () => Item,
+  ItemsColumn: () => ItemsColumn,
+  ItemsRow: () => ItemsRow,
+  block: () => block
+});
+module.exports = __toCommonJS(styles_exports);
+var import_react = require("@emotion/react");
+function _EMOTION_STRINGIFIED_CSS_ERROR__() {
+  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
+}
+var Flex = process.env.NODE_ENV === "production" ? {
+  name: "zjik7",
+  styles: "display:flex"
+} : {
+  name: "a57899-Flex",
+  styles: "display:flex;label:Flex;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLdUIiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5leHBvcnQgY29uc3QgRmxleCA9IGNzc2Bcblx0ZGlzcGxheTogZmxleDtcbmA7XG5cbmV4cG9ydCBjb25zdCBJdGVtID0gY3NzYFxuXHRkaXNwbGF5OiBibG9jaztcblx0bWF4LWhlaWdodDogMTAwJTtcblx0bWF4LXdpZHRoOiAxMDAlO1xuXHRtaW4taGVpZ2h0OiAwO1xuXHRtaW4td2lkdGg6IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgYmxvY2sgPSBjc3NgXG5cdGZsZXg6IDE7XG5gO1xuXG4vKipcbiAqIFdvcmthcm91bmQgdG8gb3B0aW1pemUgRE9NIHJlbmRlcmluZy5cbiAqIFdlJ2xsIGVuaGFuY2UgYWxpZ25tZW50IHdpdGggbmFpdmUgcGFyZW50IGZsZXggYXNzdW1wdGlvbnMuXG4gKlxuICogVHJhZGUtb2ZmOlxuICogRmFyIGxlc3MgRE9NIGxlc3MuIEhvd2V2ZXIsIFVJIHJlbmRlcmluZyBpcyBub3QgYXMgcmVsaWFibGUuXG4gKi9cblxuLyoqXG4gKiBJbXByb3ZlcyBzdGFiaWxpdHkgb2Ygd2lkdGgvaGVpZ2h0IHJlbmRlcmluZy5cbiAqIGh0dHBzOi8vZ2l0aHViLmNvbS9JdHNKb25RL2cyL3B1bGwvMTQ5XG4gKi9cbmV4cG9ydCBjb25zdCBJdGVtc0NvbHVtbiA9IGNzc2Bcblx0PiAqIHtcblx0XHRtaW4taGVpZ2h0OiAwO1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgSXRlbXNSb3cgPSBjc3NgXG5cdD4gKiB7XG5cdFx0bWluLXdpZHRoOiAwO1xuXHR9XG5gO1xuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var Item = process.env.NODE_ENV === "production" ? {
+  name: "qgaee5",
+  styles: "display:block;max-height:100%;max-width:100%;min-height:0;min-width:0"
+} : {
+  name: "14ac8g8-Item",
+  styles: "display:block;max-height:100%;max-width:100%;min-height:0;min-width:0;label:Item;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFTdUIiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5leHBvcnQgY29uc3QgRmxleCA9IGNzc2Bcblx0ZGlzcGxheTogZmxleDtcbmA7XG5cbmV4cG9ydCBjb25zdCBJdGVtID0gY3NzYFxuXHRkaXNwbGF5OiBibG9jaztcblx0bWF4LWhlaWdodDogMTAwJTtcblx0bWF4LXdpZHRoOiAxMDAlO1xuXHRtaW4taGVpZ2h0OiAwO1xuXHRtaW4td2lkdGg6IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgYmxvY2sgPSBjc3NgXG5cdGZsZXg6IDE7XG5gO1xuXG4vKipcbiAqIFdvcmthcm91bmQgdG8gb3B0aW1pemUgRE9NIHJlbmRlcmluZy5cbiAqIFdlJ2xsIGVuaGFuY2UgYWxpZ25tZW50IHdpdGggbmFpdmUgcGFyZW50IGZsZXggYXNzdW1wdGlvbnMuXG4gKlxuICogVHJhZGUtb2ZmOlxuICogRmFyIGxlc3MgRE9NIGxlc3MuIEhvd2V2ZXIsIFVJIHJlbmRlcmluZyBpcyBub3QgYXMgcmVsaWFibGUuXG4gKi9cblxuLyoqXG4gKiBJbXByb3ZlcyBzdGFiaWxpdHkgb2Ygd2lkdGgvaGVpZ2h0IHJlbmRlcmluZy5cbiAqIGh0dHBzOi8vZ2l0aHViLmNvbS9JdHNKb25RL2cyL3B1bGwvMTQ5XG4gKi9cbmV4cG9ydCBjb25zdCBJdGVtc0NvbHVtbiA9IGNzc2Bcblx0PiAqIHtcblx0XHRtaW4taGVpZ2h0OiAwO1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgSXRlbXNSb3cgPSBjc3NgXG5cdD4gKiB7XG5cdFx0bWluLXdpZHRoOiAwO1xuXHR9XG5gO1xuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var block = process.env.NODE_ENV === "production" ? {
+  name: "82a6rk",
+  styles: "flex:1"
+} : {
+  name: "1ya6i3g-block",
+  styles: "flex:1;label:block;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQndCIiwiZmlsZSI6InN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuZXhwb3J0IGNvbnN0IEZsZXggPSBjc3NgXG5cdGRpc3BsYXk6IGZsZXg7XG5gO1xuXG5leHBvcnQgY29uc3QgSXRlbSA9IGNzc2Bcblx0ZGlzcGxheTogYmxvY2s7XG5cdG1heC1oZWlnaHQ6IDEwMCU7XG5cdG1heC13aWR0aDogMTAwJTtcblx0bWluLWhlaWdodDogMDtcblx0bWluLXdpZHRoOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IGJsb2NrID0gY3NzYFxuXHRmbGV4OiAxO1xuYDtcblxuLyoqXG4gKiBXb3JrYXJvdW5kIHRvIG9wdGltaXplIERPTSByZW5kZXJpbmcuXG4gKiBXZSdsbCBlbmhhbmNlIGFsaWdubWVudCB3aXRoIG5haXZlIHBhcmVudCBmbGV4IGFzc3VtcHRpb25zLlxuICpcbiAqIFRyYWRlLW9mZjpcbiAqIEZhciBsZXNzIERPTSBsZXNzLiBIb3dldmVyLCBVSSByZW5kZXJpbmcgaXMgbm90IGFzIHJlbGlhYmxlLlxuICovXG5cbi8qKlxuICogSW1wcm92ZXMgc3RhYmlsaXR5IG9mIHdpZHRoL2hlaWdodCByZW5kZXJpbmcuXG4gKiBodHRwczovL2dpdGh1Yi5jb20vSXRzSm9uUS9nMi9wdWxsLzE0OVxuICovXG5leHBvcnQgY29uc3QgSXRlbXNDb2x1bW4gPSBjc3NgXG5cdD4gKiB7XG5cdFx0bWluLWhlaWdodDogMDtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IEl0ZW1zUm93ID0gY3NzYFxuXHQ+ICoge1xuXHRcdG1pbi13aWR0aDogMDtcblx0fVxuYDtcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var ItemsColumn = process.env.NODE_ENV === "production" ? {
+  name: "13nosa1",
+  styles: ">*{min-height:0;}"
+} : {
+  name: "9k4k7f-ItemsColumn",
+  styles: ">*{min-height:0;};label:ItemsColumn;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQzhCIiwiZmlsZSI6InN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuZXhwb3J0IGNvbnN0IEZsZXggPSBjc3NgXG5cdGRpc3BsYXk6IGZsZXg7XG5gO1xuXG5leHBvcnQgY29uc3QgSXRlbSA9IGNzc2Bcblx0ZGlzcGxheTogYmxvY2s7XG5cdG1heC1oZWlnaHQ6IDEwMCU7XG5cdG1heC13aWR0aDogMTAwJTtcblx0bWluLWhlaWdodDogMDtcblx0bWluLXdpZHRoOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IGJsb2NrID0gY3NzYFxuXHRmbGV4OiAxO1xuYDtcblxuLyoqXG4gKiBXb3JrYXJvdW5kIHRvIG9wdGltaXplIERPTSByZW5kZXJpbmcuXG4gKiBXZSdsbCBlbmhhbmNlIGFsaWdubWVudCB3aXRoIG5haXZlIHBhcmVudCBmbGV4IGFzc3VtcHRpb25zLlxuICpcbiAqIFRyYWRlLW9mZjpcbiAqIEZhciBsZXNzIERPTSBsZXNzLiBIb3dldmVyLCBVSSByZW5kZXJpbmcgaXMgbm90IGFzIHJlbGlhYmxlLlxuICovXG5cbi8qKlxuICogSW1wcm92ZXMgc3RhYmlsaXR5IG9mIHdpZHRoL2hlaWdodCByZW5kZXJpbmcuXG4gKiBodHRwczovL2dpdGh1Yi5jb20vSXRzSm9uUS9nMi9wdWxsLzE0OVxuICovXG5leHBvcnQgY29uc3QgSXRlbXNDb2x1bW4gPSBjc3NgXG5cdD4gKiB7XG5cdFx0bWluLWhlaWdodDogMDtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IEl0ZW1zUm93ID0gY3NzYFxuXHQ+ICoge1xuXHRcdG1pbi13aWR0aDogMDtcblx0fVxuYDtcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var ItemsRow = process.env.NODE_ENV === "production" ? {
+  name: "1pwxzk4",
+  styles: ">*{min-width:0;}"
+} : {
+  name: "1ozeagb-ItemsRow",
+  styles: ">*{min-width:0;};label:ItemsRow;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF1QzJCIiwiZmlsZSI6InN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuZXhwb3J0IGNvbnN0IEZsZXggPSBjc3NgXG5cdGRpc3BsYXk6IGZsZXg7XG5gO1xuXG5leHBvcnQgY29uc3QgSXRlbSA9IGNzc2Bcblx0ZGlzcGxheTogYmxvY2s7XG5cdG1heC1oZWlnaHQ6IDEwMCU7XG5cdG1heC13aWR0aDogMTAwJTtcblx0bWluLWhlaWdodDogMDtcblx0bWluLXdpZHRoOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IGJsb2NrID0gY3NzYFxuXHRmbGV4OiAxO1xuYDtcblxuLyoqXG4gKiBXb3JrYXJvdW5kIHRvIG9wdGltaXplIERPTSByZW5kZXJpbmcuXG4gKiBXZSdsbCBlbmhhbmNlIGFsaWdubWVudCB3aXRoIG5haXZlIHBhcmVudCBmbGV4IGFzc3VtcHRpb25zLlxuICpcbiAqIFRyYWRlLW9mZjpcbiAqIEZhciBsZXNzIERPTSBsZXNzLiBIb3dldmVyLCBVSSByZW5kZXJpbmcgaXMgbm90IGFzIHJlbGlhYmxlLlxuICovXG5cbi8qKlxuICogSW1wcm92ZXMgc3RhYmlsaXR5IG9mIHdpZHRoL2hlaWdodCByZW5kZXJpbmcuXG4gKiBodHRwczovL2dpdGh1Yi5jb20vSXRzSm9uUS9nMi9wdWxsLzE0OVxuICovXG5leHBvcnQgY29uc3QgSXRlbXNDb2x1bW4gPSBjc3NgXG5cdD4gKiB7XG5cdFx0bWluLWhlaWdodDogMDtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IEl0ZW1zUm93ID0gY3NzYFxuXHQ+ICoge1xuXHRcdG1pbi13aWR0aDogMDtcblx0fVxuYDtcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Flex,
+  Item,
+  ItemsColumn,
+  ItemsRow,
+  block
+});
+//# sourceMappingURL=styles.cjs.map

package/build/flex/types.cjs

@@ -0,0 +1,19 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/components/src/flex/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);
+//# sourceMappingURL=types.cjs.map

package/build/focal-point-picker/controls.cjs

@@ -0,0 +1,89 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/components/src/focal-point-picker/controls.tsx
+var controls_exports = {};
+__export(controls_exports, {
+  default: () => FocalPointPickerControls
+});
+module.exports = __toCommonJS(controls_exports);
+var import_i18n = require("@wordpress/i18n");
+var import_focal_point_picker_style = require("./styles/focal-point-picker-style.cjs");
+var import_utils = require("./utils.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+var TEXTCONTROL_MIN = 0;
+var TEXTCONTROL_MAX = 100;
+var noop = () => {
+};
+function FocalPointPickerControls({
+  hasHelpText,
+  onChange = noop,
+  point = {
+    x: 0.5,
+    y: 0.5
+  }
+}) {
+  const valueX = (0, import_utils.fractionToPercentage)(point.x);
+  const valueY = (0, import_utils.fractionToPercentage)(point.y);
+  const handleChange = (value, axis) => {
+    if (value === void 0) {
+      return;
+    }
+    const num = parseInt(value, 10);
+    if (!isNaN(num)) {
+      onChange({
+        ...point,
+        [axis]: num / 100
+      });
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_focal_point_picker_style.ControlWrapper, {
+    className: "focal-point-picker__controls",
+    hasHelpText,
+    gap: 4,
+    children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FocalPointUnitControl, {
+      label: (0, import_i18n.__)("Left"),
+      "aria-label": (0, import_i18n.__)("Focal point left position"),
+      value: [valueX, "%"].join(""),
+      onChange: (next) => handleChange(next, "x"),
+      dragDirection: "e"
+    }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FocalPointUnitControl, {
+      label: (0, import_i18n.__)("Top"),
+      "aria-label": (0, import_i18n.__)("Focal point top position"),
+      value: [valueY, "%"].join(""),
+      onChange: (next) => handleChange(next, "y"),
+      dragDirection: "s"
+    })]
+  });
+}
+function FocalPointUnitControl(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_focal_point_picker_style.StyledUnitControl, {
+    __next40pxDefaultSize: true,
+    className: "focal-point-picker__controls-position-unit-control",
+    labelPosition: "top",
+    max: TEXTCONTROL_MAX,
+    min: TEXTCONTROL_MIN,
+    units: [{
+      value: "%",
+      label: "%"
+    }],
+    ...props
+  });
+}
+//# sourceMappingURL=controls.cjs.map

package/build/focal-point-picker/controls.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/focal-point-picker/controls.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { StyledUnitControl, ControlWrapper } from './styles/focal-point-picker-style';\nimport { fractionToPercentage } from './utils';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst TEXTCONTROL_MIN = 0;\nconst TEXTCONTROL_MAX = 100;\nconst noop = () => {};\nexport default function FocalPointPickerControls({\n  hasHelpText,\n  onChange = noop,\n  point = {\n    x: 0.5,\n    y: 0.5\n  }\n}) {\n  const valueX = fractionToPercentage(point.x);\n  const valueY = fractionToPercentage(point.y);\n  const handleChange = (value, axis) => {\n    if (value === undefined) {\n      return;\n    }\n    const num = parseInt(value, 10);\n    if (!isNaN(num)) {\n      onChange({\n        ...point,\n        [axis]: num / 100\n      });\n    }\n  };\n  return /*#__PURE__*/_jsxs(ControlWrapper, {\n    className: \"focal-point-picker__controls\",\n    hasHelpText: hasHelpText,\n    gap: 4,\n    children: [/*#__PURE__*/_jsx(FocalPointUnitControl, {\n      label: __('Left'),\n      \"aria-label\": __('Focal point left position'),\n      value: [valueX, '%'].join(''),\n      onChange: next => handleChange(next, 'x'),\n      dragDirection: \"e\"\n    }), /*#__PURE__*/_jsx(FocalPointUnitControl, {\n      label: __('Top'),\n      \"aria-label\": __('Focal point top position'),\n      value: [valueY, '%'].join(''),\n      onChange: next => handleChange(next, 'y'),\n      dragDirection: \"s\"\n    })]\n  });\n}\nfunction FocalPointUnitControl(props) {\n  return /*#__PURE__*/_jsx(StyledUnitControl, {\n    __next40pxDefaultSize: true,\n    className: \"focal-point-picker__controls-position-unit-control\",\n    labelPosition: \"top\",\n    max: TEXTCONTROL_MAX,\n    min: TEXTCONTROL_MIN,\n    units: [{\n      value: '%',\n      label: '%'\n    }],\n    ...props\n  });\n}"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAmB;AAKnB,sCAAkD;AAClD,mBAAqC;AACrC,yBAA2C;AAC3C,IAAM,kBAAkB;AACxB,IAAM,kBAAkB;AACxB,IAAM,OAAO,MAAM;AAAC;AACL,SAAR,yBAA0C;AAAA,EAC/C;AAAA,EACA,WAAW;AAAA,EACX,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AACF,GAAG;AACD,QAAM,aAAS,mCAAqB,MAAM,CAAC;AAC3C,QAAM,aAAS,mCAAqB,MAAM,CAAC;AAC3C,QAAM,eAAe,CAAC,OAAO,SAAS;AACpC,QAAI,UAAU,QAAW;AACvB;AAAA,IACF;AACA,UAAM,MAAM,SAAS,OAAO,EAAE;AAC9B,QAAI,CAAC,MAAM,GAAG,GAAG;AACf,eAAS;AAAA,QACP,GAAG;AAAA,QACH,CAAC,IAAI,GAAG,MAAM;AAAA,MAChB,CAAC;AAAA,IACH;AAAA,EACF;AACA,SAAoB,uCAAAA,MAAM,gDAAgB;AAAA,IACxC,WAAW;AAAA,IACX;AAAA,IACA,KAAK;AAAA,IACL,UAAU,CAAc,uCAAAC,KAAK,uBAAuB;AAAA,MAClD,WAAO,gBAAG,MAAM;AAAA,MAChB,kBAAc,gBAAG,2BAA2B;AAAA,MAC5C,OAAO,CAAC,QAAQ,GAAG,EAAE,KAAK,EAAE;AAAA,MAC5B,UAAU,UAAQ,aAAa,MAAM,GAAG;AAAA,MACxC,eAAe;AAAA,IACjB,CAAC,GAAgB,uCAAAA,KAAK,uBAAuB;AAAA,MAC3C,WAAO,gBAAG,KAAK;AAAA,MACf,kBAAc,gBAAG,0BAA0B;AAAA,MAC3C,OAAO,CAAC,QAAQ,GAAG,EAAE,KAAK,EAAE;AAAA,MAC5B,UAAU,UAAQ,aAAa,MAAM,GAAG;AAAA,MACxC,eAAe;AAAA,IACjB,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACA,SAAS,sBAAsB,OAAO;AACpC,SAAoB,uCAAAA,KAAK,mDAAmB;AAAA,IAC1C,uBAAuB;AAAA,IACvB,WAAW;AAAA,IACX,eAAe;AAAA,IACf,KAAK;AAAA,IACL,KAAK;AAAA,IACL,OAAO,CAAC;AAAA,MACN,OAAO;AAAA,MACP,OAAO;AAAA,IACT,CAAC;AAAA,IACD,GAAG;AAAA,EACL,CAAC;AACH;",
+  "names": ["_jsxs", "_jsx"]
+}

package/build/focal-point-picker/focal-point.cjs

@@ -0,0 +1,43 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/components/src/focal-point-picker/focal-point.tsx
+var focal_point_exports = {};
+__export(focal_point_exports, {
+  default: () => FocalPoint
+});
+module.exports = __toCommonJS(focal_point_exports);
+var import_focal_point_style = require("./styles/focal-point-style.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+function FocalPoint({
+  left = "50%",
+  top = "50%",
+  ...props
+}) {
+  const style = {
+    left,
+    top
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_focal_point_style.PointerCircle, {
+    ...props,
+    className: "components-focal-point-picker__icon_container",
+    style
+  });
+}
+//# sourceMappingURL=focal-point.cjs.map

package/build/focal-point-picker/grid.cjs

@@ -0,0 +1,58 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/components/src/focal-point-picker/grid.tsx
+var grid_exports = {};
+__export(grid_exports, {
+  default: () => FocalPointPickerGrid
+});
+module.exports = __toCommonJS(grid_exports);
+var import_focal_point_picker_style = require("./styles/focal-point-picker-style.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+function FocalPointPickerGrid({
+  bounds,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_focal_point_picker_style.GridView, {
+    ...props,
+    className: "components-focal-point-picker__grid",
+    style: {
+      width: bounds.width,
+      height: bounds.height
+    },
+    children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_focal_point_picker_style.GridLineX, {
+      style: {
+        top: "33%"
+      }
+    }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_focal_point_picker_style.GridLineX, {
+      style: {
+        top: "66%"
+      }
+    }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_focal_point_picker_style.GridLineY, {
+      style: {
+        left: "33%"
+      }
+    }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_focal_point_picker_style.GridLineY, {
+      style: {
+        left: "66%"
+      }
+    })]
+  });
+}
+//# sourceMappingURL=grid.cjs.map

package/build/focal-point-picker/index.cjs

@@ -0,0 +1,254 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/components/src/focal-point-picker/index.tsx
+var focal_point_picker_exports = {};
+__export(focal_point_picker_exports, {
+  FocalPointPicker: () => FocalPointPicker,
+  default: () => focal_point_picker_default
+});
+module.exports = __toCommonJS(focal_point_picker_exports);
+var import_clsx = __toESM(require("clsx"));
+var import_i18n = require("@wordpress/i18n");
+var import_element = require("@wordpress/element");
+var import_compose = require("@wordpress/compose");
+var import_controls = __toESM(require("./controls.cjs"));
+var import_focal_point = __toESM(require("./focal-point.cjs"));
+var import_grid = __toESM(require("./grid.cjs"));
+var import_media = __toESM(require("./media.cjs"));
+var import_focal_point_picker_style = require("./styles/focal-point-picker-style.cjs");
+var import_utils = require("./utils.cjs");
+var import_hooks = require("../utils/hooks/index.cjs");
+var import_base_control_styles = require("../base-control/styles/base-control-styles.cjs");
+var import_visually_hidden = require("../visually-hidden/index.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+var GRID_OVERLAY_TIMEOUT = 600;
+function FocalPointPicker({
+  // Prevent passing to internal component.
+  __nextHasNoMarginBottom: _,
+  autoPlay = true,
+  className,
+  help,
+  hideLabelFromVision,
+  label,
+  onChange,
+  onDrag,
+  onDragEnd,
+  onDragStart,
+  resolvePoint,
+  url,
+  value: valueProp = {
+    x: 0.5,
+    y: 0.5
+  },
+  ...restProps
+}) {
+  const [point, setPoint] = (0, import_element.useState)(valueProp);
+  const [showGridOverlay, setShowGridOverlay] = (0, import_element.useState)(false);
+  const {
+    startDrag,
+    endDrag,
+    isDragging
+  } = (0, import_compose.__experimentalUseDragging)({
+    onDragStart: (event) => {
+      dragAreaRef.current?.focus();
+      const value = getValueWithinDragArea(event);
+      if (!value) {
+        return;
+      }
+      onDragStart?.(value, event);
+      setPoint(value);
+    },
+    onDragMove: (event) => {
+      event.preventDefault();
+      const value = getValueWithinDragArea(event);
+      if (!value) {
+        return;
+      }
+      onDrag?.(value, event);
+      setPoint(value);
+    },
+    onDragEnd: () => {
+      onDragEnd?.();
+      onChange?.(point);
+    }
+  });
+  const {
+    x,
+    y
+  } = isDragging ? point : valueProp;
+  const dragAreaRef = (0, import_element.useRef)(null);
+  const [bounds, setBounds] = (0, import_element.useState)(import_utils.INITIAL_BOUNDS);
+  const refUpdateBounds = (0, import_element.useRef)(() => {
+    if (!dragAreaRef.current) {
+      return;
+    }
+    const {
+      clientWidth: width,
+      clientHeight: height
+    } = dragAreaRef.current;
+    setBounds(width > 0 && height > 0 ? {
+      width,
+      height
+    } : {
+      ...import_utils.INITIAL_BOUNDS
+    });
+  });
+  (0, import_element.useEffect)(() => {
+    const updateBounds = refUpdateBounds.current;
+    if (!dragAreaRef.current) {
+      return;
+    }
+    const {
+      defaultView
+    } = dragAreaRef.current.ownerDocument;
+    defaultView?.addEventListener("resize", updateBounds);
+    return () => defaultView?.removeEventListener("resize", updateBounds);
+  }, []);
+  (0, import_compose.useIsomorphicLayoutEffect)(() => void refUpdateBounds.current(), []);
+  const getValueWithinDragArea = ({
+    clientX,
+    clientY,
+    shiftKey
+  }) => {
+    if (!dragAreaRef.current) {
+      return;
+    }
+    const {
+      top,
+      left
+    } = dragAreaRef.current.getBoundingClientRect();
+    let nextX = (clientX - left) / bounds.width;
+    let nextY = (clientY - top) / bounds.height;
+    if (shiftKey) {
+      nextX = Math.round(nextX / 0.1) * 0.1;
+      nextY = Math.round(nextY / 0.1) * 0.1;
+    }
+    return getFinalValue({
+      x: nextX,
+      y: nextY
+    });
+  };
+  const getFinalValue = (value) => {
+    var _resolvePoint;
+    const resolvedValue = (_resolvePoint = resolvePoint?.(value)) !== null && _resolvePoint !== void 0 ? _resolvePoint : value;
+    resolvedValue.x = Math.max(0, Math.min(resolvedValue.x, 1));
+    resolvedValue.y = Math.max(0, Math.min(resolvedValue.y, 1));
+    const roundToTwoDecimalPlaces = (n) => Math.round(n * 100) / 100;
+    return {
+      x: roundToTwoDecimalPlaces(resolvedValue.x),
+      y: roundToTwoDecimalPlaces(resolvedValue.y)
+    };
+  };
+  const arrowKeyStep = (event) => {
+    const {
+      code,
+      shiftKey
+    } = event;
+    if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(code)) {
+      return;
+    }
+    event.preventDefault();
+    const value = {
+      x,
+      y
+    };
+    const step = shiftKey ? 0.1 : 0.01;
+    const delta = code === "ArrowUp" || code === "ArrowLeft" ? -1 * step : step;
+    const axis = code === "ArrowUp" || code === "ArrowDown" ? "y" : "x";
+    value[axis] = value[axis] + delta;
+    onChange?.(getFinalValue(value));
+  };
+  const focalPointPosition = {
+    left: x !== void 0 ? x * bounds.width : 0.5 * bounds.width,
+    top: y !== void 0 ? y * bounds.height : 0.5 * bounds.height
+  };
+  const classes = (0, import_clsx.default)("components-focal-point-picker-control", className);
+  const Label = hideLabelFromVision ? import_visually_hidden.VisuallyHidden : import_base_control_styles.StyledLabel;
+  (0, import_hooks.useUpdateEffect)(() => {
+    setShowGridOverlay(true);
+    const timeout = window.setTimeout(() => {
+      setShowGridOverlay(false);
+    }, GRID_OVERLAY_TIMEOUT);
+    return () => window.clearTimeout(timeout);
+  }, [x, y]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_focal_point_picker_style.Container, {
+    ...restProps,
+    as: "fieldset",
+    className: classes,
+    children: [!!label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, {
+      as: "legend",
+      children: label
+    }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_focal_point_picker_style.MediaWrapper, {
+      className: "components-focal-point-picker-wrapper",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_focal_point_picker_style.MediaContainer, {
+        className: "components-focal-point-picker",
+        onKeyDown: arrowKeyStep,
+        onMouseDown: startDrag,
+        onBlur: () => {
+          if (isDragging) {
+            endDrag();
+          }
+        },
+        ref: dragAreaRef,
+        role: "button",
+        tabIndex: -1,
+        children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_grid.default, {
+          bounds,
+          showOverlay: showGridOverlay
+        }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_media.default, {
+          alt: (0, import_i18n.__)("Media preview"),
+          autoPlay,
+          onLoad: refUpdateBounds.current,
+          src: url
+        }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_focal_point.default, {
+          ...focalPointPosition,
+          isDragging
+        })]
+      })
+    }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_controls.default, {
+      hasHelpText: !!help,
+      point: {
+        x,
+        y
+      },
+      onChange: (value) => {
+        onChange?.(getFinalValue(value));
+      }
+    }), !!help && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_base_control_styles.StyledHelp, {
+      children: help
+    })]
+  });
+}
+var focal_point_picker_default = FocalPointPicker;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FocalPointPicker
+});
+//# sourceMappingURL=index.cjs.map

package/build/focal-point-picker/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/focal-point-picker/index.tsx"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useEffect, useRef, useState } from '@wordpress/element';\nimport { __experimentalUseDragging as useDragging, useIsomorphicLayoutEffect } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Controls from './controls';\nimport FocalPoint from './focal-point';\nimport Grid from './grid';\nimport Media from './media';\nimport { Container, MediaWrapper, MediaContainer } from './styles/focal-point-picker-style';\nimport { INITIAL_BOUNDS } from './utils';\nimport { useUpdateEffect } from '../utils/hooks';\nimport { StyledLabel, StyledHelp } from '../base-control/styles/base-control-styles';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst GRID_OVERLAY_TIMEOUT = 600;\n\n/**\n * Focal Point Picker is a component which creates a UI for identifying the most important visual point of an image.\n *\n * This component addresses a specific problem: with large background images it is common to see undesirable crops,\n * especially when viewing on smaller viewports such as mobile phones. This component allows the selection of\n * the point with the most important visual information and returns it as a pair of numbers between 0 and 1.\n * This value can be easily converted into the CSS `background-position` attribute, and will ensure that the\n * focal point is never cropped out, regardless of viewport.\n *\n * - Example focal point picker value: `{ x: 0.5, y: 0.1 }`\n * - Corresponding CSS: `background-position: 50% 10%;`\n *\n * ```jsx\n * import { FocalPointPicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ focalPoint, setFocalPoint ] = useState( {\n * \t\tx: 0.5,\n * \t\ty: 0.5,\n * \t} );\n *\n * \tconst url = '/path/to/image';\n *\n * \t// Example function to render the CSS styles based on Focal Point Picker value\n * \tconst style = {\n * \t\tbackgroundImage: `url(${ url })`,\n * \t\tbackgroundPosition: `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`,\n * \t};\n *\n * \treturn (\n * \t\t<>\n * \t\t\t<FocalPointPicker\n * \t\t\t\turl={ url }\n * \t\t\t\tvalue={ focalPoint }\n * \t\t\t\tonDragStart={ setFocalPoint }\n * \t\t\t\tonDrag={ setFocalPoint }\n * \t\t\t\tonChange={ setFocalPoint }\n * \t\t\t/>\n * \t\t\t<div style={ style } />\n * \t\t</>\n * \t);\n * };\n * ```\n */\nexport function FocalPointPicker({\n  // Prevent passing to internal component.\n  __nextHasNoMarginBottom: _,\n  autoPlay = true,\n  className,\n  help,\n  hideLabelFromVision,\n  label,\n  onChange,\n  onDrag,\n  onDragEnd,\n  onDragStart,\n  resolvePoint,\n  url,\n  value: valueProp = {\n    x: 0.5,\n    y: 0.5\n  },\n  ...restProps\n}) {\n  const [point, setPoint] = useState(valueProp);\n  const [showGridOverlay, setShowGridOverlay] = useState(false);\n  const {\n    startDrag,\n    endDrag,\n    isDragging\n  } = useDragging({\n    onDragStart: event => {\n      dragAreaRef.current?.focus();\n      const value = getValueWithinDragArea(event);\n\n      // `value` can technically be undefined if getValueWithinDragArea() is\n      // called before dragAreaRef is set, but this shouldn't happen in reality.\n      if (!value) {\n        return;\n      }\n      onDragStart?.(value, event);\n      setPoint(value);\n    },\n    onDragMove: event => {\n      // Prevents text-selection when dragging.\n      event.preventDefault();\n      const value = getValueWithinDragArea(event);\n      if (!value) {\n        return;\n      }\n      onDrag?.(value, event);\n      setPoint(value);\n    },\n    onDragEnd: () => {\n      onDragEnd?.();\n      onChange?.(point);\n    }\n  });\n\n  // Uses the internal point while dragging or else the value from props.\n  const {\n    x,\n    y\n  } = isDragging ? point : valueProp;\n  const dragAreaRef = useRef(null);\n  const [bounds, setBounds] = useState(INITIAL_BOUNDS);\n  const refUpdateBounds = useRef(() => {\n    if (!dragAreaRef.current) {\n      return;\n    }\n    const {\n      clientWidth: width,\n      clientHeight: height\n    } = dragAreaRef.current;\n    // Falls back to initial bounds if the ref has no size. Since styles\n    // give the drag area dimensions even when the media has not loaded\n    // this should only happen in unit tests (jsdom).\n    setBounds(width > 0 && height > 0 ? {\n      width,\n      height\n    } : {\n      ...INITIAL_BOUNDS\n    });\n  });\n  useEffect(() => {\n    const updateBounds = refUpdateBounds.current;\n    if (!dragAreaRef.current) {\n      return;\n    }\n    const {\n      defaultView\n    } = dragAreaRef.current.ownerDocument;\n    defaultView?.addEventListener('resize', updateBounds);\n    return () => defaultView?.removeEventListener('resize', updateBounds);\n  }, []);\n\n  // Updates the bounds to cover cases of unspecified media or load failures.\n  useIsomorphicLayoutEffect(() => void refUpdateBounds.current(), []);\n\n  // TODO: Consider refactoring getValueWithinDragArea() into a pure function.\n  // https://github.com/WordPress/gutenberg/pull/43872#discussion_r963455173\n  const getValueWithinDragArea = ({\n    clientX,\n    clientY,\n    shiftKey\n  }) => {\n    if (!dragAreaRef.current) {\n      return;\n    }\n    const {\n      top,\n      left\n    } = dragAreaRef.current.getBoundingClientRect();\n    let nextX = (clientX - left) / bounds.width;\n    let nextY = (clientY - top) / bounds.height;\n    // Enables holding shift to jump values by 10%.\n    if (shiftKey) {\n      nextX = Math.round(nextX / 0.1) * 0.1;\n      nextY = Math.round(nextY / 0.1) * 0.1;\n    }\n    return getFinalValue({\n      x: nextX,\n      y: nextY\n    });\n  };\n  const getFinalValue = value => {\n    var _resolvePoint;\n    const resolvedValue = (_resolvePoint = resolvePoint?.(value)) !== null && _resolvePoint !== void 0 ? _resolvePoint : value;\n    resolvedValue.x = Math.max(0, Math.min(resolvedValue.x, 1));\n    resolvedValue.y = Math.max(0, Math.min(resolvedValue.y, 1));\n    const roundToTwoDecimalPlaces = n => Math.round(n * 1e2) / 1e2;\n    return {\n      x: roundToTwoDecimalPlaces(resolvedValue.x),\n      y: roundToTwoDecimalPlaces(resolvedValue.y)\n    };\n  };\n  const arrowKeyStep = event => {\n    const {\n      code,\n      shiftKey\n    } = event;\n    if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(code)) {\n      return;\n    }\n    event.preventDefault();\n    const value = {\n      x,\n      y\n    };\n    const step = shiftKey ? 0.1 : 0.01;\n    const delta = code === 'ArrowUp' || code === 'ArrowLeft' ? -1 * step : step;\n    const axis = code === 'ArrowUp' || code === 'ArrowDown' ? 'y' : 'x';\n    value[axis] = value[axis] + delta;\n    onChange?.(getFinalValue(value));\n  };\n  const focalPointPosition = {\n    left: x !== undefined ? x * bounds.width : 0.5 * bounds.width,\n    top: y !== undefined ? y * bounds.height : 0.5 * bounds.height\n  };\n  const classes = clsx('components-focal-point-picker-control', className);\n  const Label = hideLabelFromVision ? VisuallyHidden : StyledLabel;\n  useUpdateEffect(() => {\n    setShowGridOverlay(true);\n    const timeout = window.setTimeout(() => {\n      setShowGridOverlay(false);\n    }, GRID_OVERLAY_TIMEOUT);\n    return () => window.clearTimeout(timeout);\n  }, [x, y]);\n  return /*#__PURE__*/_jsxs(Container, {\n    ...restProps,\n    as: \"fieldset\",\n    className: classes,\n    children: [!!label && /*#__PURE__*/_jsx(Label, {\n      as: \"legend\",\n      children: label\n    }), /*#__PURE__*/_jsx(MediaWrapper, {\n      className: \"components-focal-point-picker-wrapper\",\n      children: /*#__PURE__*/_jsxs(MediaContainer, {\n        className: \"components-focal-point-picker\",\n        onKeyDown: arrowKeyStep,\n        onMouseDown: startDrag,\n        onBlur: () => {\n          if (isDragging) {\n            endDrag();\n          }\n        },\n        ref: dragAreaRef,\n        role: \"button\",\n        tabIndex: -1,\n        children: [/*#__PURE__*/_jsx(Grid, {\n          bounds: bounds,\n          showOverlay: showGridOverlay\n        }), /*#__PURE__*/_jsx(Media, {\n          alt: __('Media preview'),\n          autoPlay: autoPlay,\n          onLoad: refUpdateBounds.current,\n          src: url\n        }), /*#__PURE__*/_jsx(FocalPoint, {\n          ...focalPointPosition,\n          isDragging: isDragging\n        })]\n      })\n    }), /*#__PURE__*/_jsx(Controls, {\n      hasHelpText: !!help,\n      point: {\n        x,\n        y\n      },\n      onChange: value => {\n        onChange?.(getFinalValue(value));\n      }\n    }), !!help && /*#__PURE__*/_jsx(StyledHelp, {\n      children: help\n    })]\n  });\n}\nexport default FocalPointPicker;"],
+  "mappings": "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",
+  "names": ["useDragging", "clsx", "_jsxs", "_jsx", "Grid", "Media", "FocalPoint", "Controls"]
+}