@wordpress/components 25.5.0 → 25.6.0

package/build-module/flex/flex-item/component.js

@@ -1,5 +1,4 @@
 import { createElement } from "@wordpress/element";
-
 /**
  * External dependencies
  */
@@ -7,16 +6,18 @@ import { createElement } from "@wordpress/element";
 /**
  * Internal dependencies
  */
+
 import { contextConnect } from '../../ui/context';
 import { View } from '../../view';
 import { useFlexItem } from './hook';
-
 function UnconnectedFlexItem(props, forwardedRef) {
   const flexItemProps = useFlexItem(props);
-  return createElement(View, { ...flexItemProps,
+  return createElement(View, {
+    ...flexItemProps,
     ref: forwardedRef
   });
 }
+
 /**
  * `FlexItem` is a primitive layout component that aligns content within layout
  * containers like `Flex`.
@@ -33,8 +34,6 @@ function UnconnectedFlexItem(props, forwardedRef) {
  * }
  * ```
  */
-
-
 export const FlexItem = contextConnect(UnconnectedFlexItem, 'FlexItem');
 export default FlexItem;
 //# sourceMappingURL=component.js.map

package/build-module/flex/flex-item/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/flex/flex-item/component.tsx"],"names":["contextConnect","View","useFlexItem","UnconnectedFlexItem","props","forwardedRef","flexItemProps","FlexItem"],"mappings":";;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,cAAT,QAAwD,kBAAxD;AACA,SAASC,IAAT,QAAqB,YAArB;AACA,SAASC,WAAT,QAA4B,QAA5B;;AAGA,SAASC,mBAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAMC,aAAa,GAAGJ,WAAW,CAAEE,KAAF,CAAjC;AAEA,SAAO,cAAC,IAAD,OAAWE,aAAX;AAA2B,IAAA,GAAG,EAAGD;AAAjC,IAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,OAAO,MAAME,QAAQ,GAAGP,cAAc,CAAEG,mBAAF,EAAuB,UAAvB,CAA/B;AAEP,eAAeI,QAAf","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { View } from '../../view';\nimport { useFlexItem } from './hook';\nimport type { FlexItemProps } from '../types';\n\nfunction UnconnectedFlexItem(\n\tprops: WordPressComponentProps< FlexItemProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst flexItemProps = useFlexItem( props );\n\n\treturn <View { ...flexItemProps } ref={ forwardedRef } />;\n}\n\n/**\n * `FlexItem` is a primitive layout component that aligns content within layout\n * containers like `Flex`.\n *\n * ```jsx\n * import { Flex, FlexItem } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <Flex>\n *       <FlexItem>...</FlexItem>\n *     </Flex>\n *   );\n * }\n * ```\n */\nexport const FlexItem = contextConnect( UnconnectedFlexItem, 'FlexItem' );\n\nexport default FlexItem;\n"]}
+{"version":3,"names":["contextConnect","View","useFlexItem","UnconnectedFlexItem","props","forwardedRef","flexItemProps","createElement","ref","FlexItem"],"sources":["@wordpress/components/src/flex/flex-item/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../ui/context';\nimport { contextConnect } from '../../ui/context';\nimport { View } from '../../view';\nimport { useFlexItem } from './hook';\nimport type { FlexItemProps } from '../types';\n\nfunction UnconnectedFlexItem(\n\tprops: WordPressComponentProps< FlexItemProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst flexItemProps = useFlexItem( props );\n\n\treturn <View { ...flexItemProps } ref={ forwardedRef } />;\n}\n\n/**\n * `FlexItem` is a primitive layout component that aligns content within layout\n * containers like `Flex`.\n *\n * ```jsx\n * import { Flex, FlexItem } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <Flex>\n *       <FlexItem>...</FlexItem>\n *     </Flex>\n *   );\n * }\n * ```\n */\nexport const FlexItem = contextConnect( UnconnectedFlexItem, 'FlexItem' );\n\nexport default FlexItem;\n"],"mappings":";AAAA;AACA;AACA;;AAGA;AACA;AACA;;AAEA,SAASA,cAAc,QAAQ,kBAAkB;AACjD,SAASC,IAAI,QAAQ,YAAY;AACjC,SAASC,WAAW,QAAQ,QAAQ;AAGpC,SAASC,mBAAmBA,CAC3BC,KAAsD,EACtDC,YAAiC,EAChC;EACD,MAAMC,aAAa,GAAGJ,WAAW,CAAEE,KAAM,CAAC;EAE1C,OAAOG,aAAA,CAACN,IAAI;IAAA,GAAMK,aAAa;IAAGE,GAAG,EAAGH;EAAc,CAAE,CAAC;AAC1D;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMI,QAAQ,GAAGT,cAAc,CAAEG,mBAAmB,EAAE,UAAW,CAAC;AAEzE,eAAeM,QAAQ"}

package/build-module/flex/flex-item/hook.js

@@ -1,7 +1,9 @@
 /**
  * External dependencies
  */
+
 import { css } from '@emotion/react';
+
 /**
  * Internal dependencies
  */
@@ -21,10 +23,11 @@ export function useFlexItem(props) {
   const contextDisplay = useFlexContext().flexItemDisplay;
   sx.Base = /*#__PURE__*/css({
     display: displayProp || contextDisplay
-  }, process.env.NODE_ENV === "production" ? "" : ";label:sx-Base;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZmxleC9mbGV4LWl0ZW0vaG9vay50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE4QlciLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9mbGV4L2ZsZXgtaXRlbS9ob29rLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzLCBTZXJpYWxpemVkU3R5bGVzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyB1c2VDb250ZXh0U3lzdGVtLCBXb3JkUHJlc3NDb21wb25lbnRQcm9wcyB9IGZyb20gJy4uLy4uL3VpL2NvbnRleHQnO1xuaW1wb3J0IHsgdXNlRmxleENvbnRleHQgfSBmcm9tICcuLi9jb250ZXh0JztcbmltcG9ydCAqIGFzIHN0eWxlcyBmcm9tICcuLi9zdHlsZXMnO1xuaW1wb3J0IHsgdXNlQ3ggfSBmcm9tICcuLi8uLi91dGlscy9ob29rcy91c2UtY3gnO1xuaW1wb3J0IHR5cGUgeyBGbGV4SXRlbVByb3BzIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG5leHBvcnQgZnVuY3Rpb24gdXNlRmxleEl0ZW0oXG5cdHByb3BzOiBXb3JkUHJlc3NDb21wb25lbnRQcm9wczwgRmxleEl0ZW1Qcm9wcywgJ2RpdicgPlxuKSB7XG5cdGNvbnN0IHtcblx0XHRjbGFzc05hbWUsXG5cdFx0ZGlzcGxheTogZGlzcGxheVByb3AsXG5cdFx0aXNCbG9jayA9IGZhbHNlLFxuXHRcdC4uLm90aGVyUHJvcHNcblx0fSA9IHVzZUNvbnRleHRTeXN0ZW0oIHByb3BzLCAnRmxleEl0ZW0nICk7XG5cblx0Y29uc3Qgc3g6IHtcblx0XHRCYXNlPzogU2VyaWFsaXplZFN0eWxlcztcblx0fSA9IHt9O1xuXG5cdGNvbnN0IGNvbnRleHREaXNwbGF5ID0gdXNlRmxleENvbnRleHQoKS5mbGV4SXRlbURpc3BsYXk7XG5cblx0c3guQmFzZSA9IGNzcygge1xuXHRcdGRpc3BsYXk6IGRpc3BsYXlQcm9wIHx8IGNvbnRleHREaXNwbGF5LFxuXHR9ICk7XG5cblx0Y29uc3QgY3ggPSB1c2VDeCgpO1xuXG5cdGNvbnN0IGNsYXNzZXMgPSBjeChcblx0XHRzdHlsZXMuSXRlbSxcblx0XHRzeC5CYXNlLFxuXHRcdGlzQmxvY2sgJiYgc3R5bGVzLmJsb2NrLFxuXHRcdGNsYXNzTmFtZVxuXHQpO1xuXG5cdHJldHVybiB7XG5cdFx0Li4ub3RoZXJQcm9wcyxcblx0XHRjbGFzc05hbWU6IGNsYXNzZXMsXG5cdH07XG59XG4iXX0= */");
+  }, process.env.NODE_ENV === "production" ? "" : ";label:sx-Base;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZmxleC9mbGV4LWl0ZW0vaG9vay50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnQ1ciLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9mbGV4L2ZsZXgtaXRlbS9ob29rLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHR5cGUgeyBTZXJpYWxpemVkU3R5bGVzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgdHlwZSB7IFdvcmRQcmVzc0NvbXBvbmVudFByb3BzIH0gZnJvbSAnLi4vLi4vdWkvY29udGV4dCc7XG5pbXBvcnQgeyB1c2VDb250ZXh0U3lzdGVtIH0gZnJvbSAnLi4vLi4vdWkvY29udGV4dCc7XG5pbXBvcnQgeyB1c2VGbGV4Q29udGV4dCB9IGZyb20gJy4uL2NvbnRleHQnO1xuaW1wb3J0ICogYXMgc3R5bGVzIGZyb20gJy4uL3N0eWxlcyc7XG5pbXBvcnQgeyB1c2VDeCB9IGZyb20gJy4uLy4uL3V0aWxzL2hvb2tzL3VzZS1jeCc7XG5pbXBvcnQgdHlwZSB7IEZsZXhJdGVtUHJvcHMgfSBmcm9tICcuLi90eXBlcyc7XG5cbmV4cG9ydCBmdW5jdGlvbiB1c2VGbGV4SXRlbShcblx0cHJvcHM6IFdvcmRQcmVzc0NvbXBvbmVudFByb3BzPCBGbGV4SXRlbVByb3BzLCAnZGl2JyA+XG4pIHtcblx0Y29uc3Qge1xuXHRcdGNsYXNzTmFtZSxcblx0XHRkaXNwbGF5OiBkaXNwbGF5UHJvcCxcblx0XHRpc0Jsb2NrID0gZmFsc2UsXG5cdFx0Li4ub3RoZXJQcm9wc1xuXHR9ID0gdXNlQ29udGV4dFN5c3RlbSggcHJvcHMsICdGbGV4SXRlbScgKTtcblxuXHRjb25zdCBzeDoge1xuXHRcdEJhc2U/OiBTZXJpYWxpemVkU3R5bGVzO1xuXHR9ID0ge307XG5cblx0Y29uc3QgY29udGV4dERpc3BsYXkgPSB1c2VGbGV4Q29udGV4dCgpLmZsZXhJdGVtRGlzcGxheTtcblxuXHRzeC5CYXNlID0gY3NzKCB7XG5cdFx0ZGlzcGxheTogZGlzcGxheVByb3AgfHwgY29udGV4dERpc3BsYXksXG5cdH0gKTtcblxuXHRjb25zdCBjeCA9IHVzZUN4KCk7XG5cblx0Y29uc3QgY2xhc3NlcyA9IGN4KFxuXHRcdHN0eWxlcy5JdGVtLFxuXHRcdHN4LkJhc2UsXG5cdFx0aXNCbG9jayAmJiBzdHlsZXMuYmxvY2ssXG5cdFx0Y2xhc3NOYW1lXG5cdCk7XG5cblx0cmV0dXJuIHtcblx0XHQuLi5vdGhlclByb3BzLFxuXHRcdGNsYXNzTmFtZTogY2xhc3Nlcyxcblx0fTtcbn1cbiJdfQ== */");
   const cx = useCx();
   const classes = cx(styles.Item, sx.Base, isBlock && styles.block, className);
-  return { ...otherProps,
+  return {
+    ...otherProps,
     className: classes
   };
 }

package/build-module/flex/flex-item/hook.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/flex/flex-item/hook.ts"],"names":["css","useContextSystem","useFlexContext","styles","useCx","useFlexItem","props","className","display","displayProp","isBlock","otherProps","sx","contextDisplay","flexItemDisplay","Base","cx","classes","Item","block"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,GAAT,QAAsC,gBAAtC;AAEA;AACA;AACA;;AACA,SAASC,gBAAT,QAA0D,kBAA1D;AACA,SAASC,cAAT,QAA+B,YAA/B;AACA,OAAO,KAAKC,MAAZ,MAAwB,WAAxB;AACA,SAASC,KAAT,QAAsB,0BAAtB;AAGA,OAAO,SAASC,WAAT,CACNC,KADM,EAEL;AACD,QAAM;AACLC,IAAAA,SADK;AAELC,IAAAA,OAAO,EAAEC,WAFJ;AAGLC,IAAAA,OAAO,GAAG,KAHL;AAIL,OAAGC;AAJE,MAKFV,gBAAgB,CAAEK,KAAF,EAAS,UAAT,CALpB;AAOA,QAAMM,EAEL,GAAG,EAFJ;AAIA,QAAMC,cAAc,GAAGX,cAAc,GAAGY,eAAxC;AAEAF,EAAAA,EAAE,CAACG,IAAH,gBAAUf,GAAG,CAAE;AACdQ,IAAAA,OAAO,EAAEC,WAAW,IAAII;AADV,GAAF,qwDAAb;AAIA,QAAMG,EAAE,GAAGZ,KAAK,EAAhB;AAEA,QAAMa,OAAO,GAAGD,EAAE,CACjBb,MAAM,CAACe,IADU,EAEjBN,EAAE,CAACG,IAFc,EAGjBL,OAAO,IAAIP,MAAM,CAACgB,KAHD,EAIjBZ,SAJiB,CAAlB;AAOA,SAAO,EACN,GAAGI,UADG;AAENJ,IAAAA,SAAS,EAAEU;AAFL,GAAP;AAIA","sourcesContent":["/**\n * External dependencies\n */\nimport { css, SerializedStyles } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useFlexContext } from '../context';\nimport * as styles from '../styles';\nimport { useCx } from '../../utils/hooks/use-cx';\nimport type { FlexItemProps } from '../types';\n\nexport function useFlexItem(\n\tprops: WordPressComponentProps< FlexItemProps, 'div' >\n) {\n\tconst {\n\t\tclassName,\n\t\tdisplay: displayProp,\n\t\tisBlock = false,\n\t\t...otherProps\n\t} = useContextSystem( props, 'FlexItem' );\n\n\tconst sx: {\n\t\tBase?: SerializedStyles;\n\t} = {};\n\n\tconst contextDisplay = useFlexContext().flexItemDisplay;\n\n\tsx.Base = css( {\n\t\tdisplay: displayProp || contextDisplay,\n\t} );\n\n\tconst cx = useCx();\n\n\tconst classes = cx(\n\t\tstyles.Item,\n\t\tsx.Base,\n\t\tisBlock && styles.block,\n\t\tclassName\n\t);\n\n\treturn {\n\t\t...otherProps,\n\t\tclassName: classes,\n\t};\n}\n"]}
+{"version":3,"names":["css","useContextSystem","useFlexContext","styles","useCx","useFlexItem","props","className","display","displayProp","isBlock","otherProps","sx","contextDisplay","flexItemDisplay","Base","process","env","NODE_ENV","cx","classes","Item","block"],"sources":["@wordpress/components/src/flex/flex-item/hook.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { SerializedStyles } from '@emotion/react';\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../ui/context';\nimport { useContextSystem } from '../../ui/context';\nimport { useFlexContext } from '../context';\nimport * as styles from '../styles';\nimport { useCx } from '../../utils/hooks/use-cx';\nimport type { FlexItemProps } from '../types';\n\nexport function useFlexItem(\n\tprops: WordPressComponentProps< FlexItemProps, 'div' >\n) {\n\tconst {\n\t\tclassName,\n\t\tdisplay: displayProp,\n\t\tisBlock = false,\n\t\t...otherProps\n\t} = useContextSystem( props, 'FlexItem' );\n\n\tconst sx: {\n\t\tBase?: SerializedStyles;\n\t} = {};\n\n\tconst contextDisplay = useFlexContext().flexItemDisplay;\n\n\tsx.Base = css( {\n\t\tdisplay: displayProp || contextDisplay,\n\t} );\n\n\tconst cx = useCx();\n\n\tconst classes = cx(\n\t\tstyles.Item,\n\t\tsx.Base,\n\t\tisBlock && styles.block,\n\t\tclassName\n\t);\n\n\treturn {\n\t\t...otherProps,\n\t\tclassName: classes,\n\t};\n}\n"],"mappings":"AAAA;AACA;AACA;;AAEA,SAASA,GAAG,QAAQ,gBAAgB;;AAEpC;AACA;AACA;;AAEA,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,SAASC,cAAc,QAAQ,YAAY;AAC3C,OAAO,KAAKC,MAAM,MAAM,WAAW;AACnC,SAASC,KAAK,QAAQ,0BAA0B;AAGhD,OAAO,SAASC,WAAWA,CAC1BC,KAAsD,EACrD;EACD,MAAM;IACLC,SAAS;IACTC,OAAO,EAAEC,WAAW;IACpBC,OAAO,GAAG,KAAK;IACf,GAAGC;EACJ,CAAC,GAAGV,gBAAgB,CAAEK,KAAK,EAAE,UAAW,CAAC;EAEzC,MAAMM,EAEL,GAAG,CAAC,CAAC;EAEN,MAAMC,cAAc,GAAGX,cAAc,CAAC,CAAC,CAACY,eAAe;EAEvDF,EAAE,CAACG,IAAI,gBAAGf,GAAG,CAAE;IACdQ,OAAO,EAAEC,WAAW,IAAII;EACzB,CAAC,EAAAG,OAAA,CAAAC,GAAA,CAAAC,QAAA,4CAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA,0xDAAC,CAAC;EAEH,MAAMC,EAAE,GAAGf,KAAK,CAAC,CAAC;EAElB,MAAMgB,OAAO,GAAGD,EAAE,CACjBhB,MAAM,CAACkB,IAAI,EACXT,EAAE,CAACG,IAAI,EACPL,OAAO,IAAIP,MAAM,CAACmB,KAAK,EACvBf,SACD,CAAC;EAED,OAAO;IACN,GAAGI,UAAU;IACbJ,SAAS,EAAEa;EACZ,CAAC;AACF"}

package/build-module/flex/flex-item/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/flex/flex-item/index.ts"],"names":["default","useFlexItem"],"mappings":"AAAA,SAASA,OAAT,QAAwB,aAAxB;AACA,SAASC,WAAT,QAA4B,QAA5B","sourcesContent":["export { default } from './component';\nexport { useFlexItem } from './hook';\n"]}
+{"version":3,"names":["default","useFlexItem"],"sources":["@wordpress/components/src/flex/flex-item/index.ts"],"sourcesContent":["export { default } from './component';\nexport { useFlexItem } from './hook';\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,aAAa;AACrC,SAASC,WAAW,QAAQ,QAAQ"}

package/build-module/flex/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/flex/index.ts"],"names":["default","Flex","useFlex","FlexItem","useFlexItem","FlexBlock","useFlexBlock"],"mappings":"AAAA,SAASA,OAAO,IAAIC,IAApB,EAA0BC,OAA1B,QAAyC,QAAzC;AACA,SAASF,OAAO,IAAIG,QAApB,EAA8BC,WAA9B,QAAiD,aAAjD;AACA,SAASJ,OAAO,IAAIK,SAApB,EAA+BC,YAA/B,QAAmD,cAAnD","sourcesContent":["export { default as Flex, useFlex } from './flex';\nexport { default as FlexItem, useFlexItem } from './flex-item';\nexport { default as FlexBlock, useFlexBlock } from './flex-block';\n"]}
+{"version":3,"names":["default","Flex","useFlex","FlexItem","useFlexItem","FlexBlock","useFlexBlock"],"sources":["@wordpress/components/src/flex/index.ts"],"sourcesContent":["export { default as Flex, useFlex } from './flex';\nexport { default as FlexItem, useFlexItem } from './flex-item';\nexport { default as FlexBlock, useFlexBlock } from './flex-block';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,IAAI,EAAEC,OAAO,QAAQ,QAAQ;AACjD,SAASF,OAAO,IAAIG,QAAQ,EAAEC,WAAW,QAAQ,aAAa;AAC9D,SAASJ,OAAO,IAAIK,SAAS,EAAEC,YAAY,QAAQ,cAAc"}

package/build-module/flex/styles.js

@@ -1,5 +1,4 @@
 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)."; }
-
 /**
  * External dependencies
  */
@@ -31,6 +30,7 @@ export const block = process.env.NODE_ENV === "production" ? {
   map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZmxleC9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUJ3QiIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2ZsZXgvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5leHBvcnQgY29uc3QgRmxleCA9IGNzc2Bcblx0ZGlzcGxheTogZmxleDtcbmA7XG5cbmV4cG9ydCBjb25zdCBJdGVtID0gY3NzYFxuXHRkaXNwbGF5OiBibG9jaztcblx0bWF4LWhlaWdodDogMTAwJTtcblx0bWF4LXdpZHRoOiAxMDAlO1xuXHRtaW4taGVpZ2h0OiAwO1xuXHRtaW4td2lkdGg6IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgYmxvY2sgPSBjc3NgXG5cdGZsZXg6IDE7XG5gO1xuXG4vKipcbiAqIFdvcmthcm91bmQgdG8gb3B0aW1pemUgRE9NIHJlbmRlcmluZy5cbiAqIFdlJ2xsIGVuaGFuY2UgYWxpZ25tZW50IHdpdGggbmFpdmUgcGFyZW50IGZsZXggYXNzdW1wdGlvbnMuXG4gKlxuICogVHJhZGUtb2ZmOlxuICogRmFyIGxlc3MgRE9NIGxlc3MuIEhvd2V2ZXIsIFVJIHJlbmRlcmluZyBpcyBub3QgYXMgcmVsaWFibGUuXG4gKi9cblxuLyoqXG4gKiBJbXByb3ZlcyBzdGFiaWxpdHkgb2Ygd2lkdGgvaGVpZ2h0IHJlbmRlcmluZy5cbiAqIGh0dHBzOi8vZ2l0aHViLmNvbS9JdHNKb25RL2cyL3B1bGwvMTQ5XG4gKi9cbmV4cG9ydCBjb25zdCBJdGVtc0NvbHVtbiA9IGNzc2Bcblx0PiAqIHtcblx0XHRtaW4taGVpZ2h0OiAwO1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgSXRlbXNSb3cgPSBjc3NgXG5cdD4gKiB7XG5cdFx0bWluLXdpZHRoOiAwO1xuXHR9XG5gO1xuIl19 */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
+
 /**
  * Workaround to optimize DOM rendering.
  * We'll enhance alignment with naive parent flex assumptions.
@@ -43,7 +43,6 @@ export const block = process.env.NODE_ENV === "production" ? {
  * Improves stability of width/height rendering.
  * https://github.com/ItsJonQ/g2/pull/149
  */
-
 export const ItemsColumn = process.env.NODE_ENV === "production" ? {
   name: "13nosa1",
   styles: ">*{min-height:0;}"

package/build-module/flex/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/flex/styles.ts"],"names":["css","Flex","Item","block","ItemsColumn","ItemsRow"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,GAAT,QAAoB,gBAApB;AAEA,OAAO,MAAMC,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAV;AAIP,OAAO,MAAMC,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAV;AAQP,OAAO,MAAMC,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAX;AAIP;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AACA,OAAO,MAAMC,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAjB;AAMP,OAAO,MAAMC,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAd","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\nexport const Flex = css`\n\tdisplay: flex;\n`;\n\nexport const Item = css`\n\tdisplay: block;\n\tmax-height: 100%;\n\tmax-width: 100%;\n\tmin-height: 0;\n\tmin-width: 0;\n`;\n\nexport const block = css`\n\tflex: 1;\n`;\n\n/**\n * Workaround to optimize DOM rendering.\n * We'll enhance alignment with naive parent flex assumptions.\n *\n * Trade-off:\n * Far less DOM less. However, UI rendering is not as reliable.\n */\n\n/**\n * Improves stability of width/height rendering.\n * https://github.com/ItsJonQ/g2/pull/149\n */\nexport const ItemsColumn = css`\n\t> * {\n\t\tmin-height: 0;\n\t}\n`;\n\nexport const ItemsRow = css`\n\t> * {\n\t\tmin-width: 0;\n\t}\n`;\n"]}
+{"version":3,"names":["css","Flex","process","env","NODE_ENV","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","Item","block","ItemsColumn","ItemsRow"],"sources":["@wordpress/components/src/flex/styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\nexport const Flex = css`\n\tdisplay: flex;\n`;\n\nexport const Item = css`\n\tdisplay: block;\n\tmax-height: 100%;\n\tmax-width: 100%;\n\tmin-height: 0;\n\tmin-width: 0;\n`;\n\nexport const block = css`\n\tflex: 1;\n`;\n\n/**\n * Workaround to optimize DOM rendering.\n * We'll enhance alignment with naive parent flex assumptions.\n *\n * Trade-off:\n * Far less DOM less. However, UI rendering is not as reliable.\n */\n\n/**\n * Improves stability of width/height rendering.\n * https://github.com/ItsJonQ/g2/pull/149\n */\nexport const ItemsColumn = css`\n\t> * {\n\t\tmin-height: 0;\n\t}\n`;\n\nexport const ItemsRow = css`\n\t> * {\n\t\tmin-width: 0;\n\t}\n`;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,GAAG,QAAQ,gBAAgB;AAEpC,OAAO,MAAMC,IAAI,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAC;AAAA,CAEhB;AAED,OAAO,MAAMC,IAAI,GAAAR,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAC;AAAA,CAMhB;AAED,OAAO,MAAME,KAAK,GAAAT,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAC;AAAA,CAEjB;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,OAAO,MAAMG,WAAW,GAAAV,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAC;AAAA,CAIvB;AAED,OAAO,MAAMI,QAAQ,GAAAX,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAC;AAAA,CAIpB"}

package/build-module/flex/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}
+{"version":3,"names":[],"sources":["@wordpress/components/src/flex/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties, ReactNode } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { ResponsiveCSSValue } from '../ui/utils/types';\nimport type { SpaceInput } from '../ui/utils/space';\n\nexport type FlexDirection = ResponsiveCSSValue<\n\tCSSProperties[ 'flexDirection' ]\n>;\n\nexport type FlexProps = {\n\t/**\n\t * Aligns children using CSS Flexbox `align-items`. Vertically aligns\n\t * content if the `direction` is `row`, or horizontally aligns content if\n\t * the `direction` is `column`.\n\t *\n\t * @default 'center'\n\t */\n\talign?: CSSProperties[ 'alignItems' ];\n\t/**\n\t * The direction flow of the children content can be adjusted with\n\t * `direction`. `column` will align children vertically and `row` will align\n\t * children horizontally.\n\t *\n\t * @default 'row'\n\t */\n\tdirection?: FlexDirection;\n\t/**\n\t * Expands to the maximum available width (if horizontal) or height (if\n\t * vertical).\n\t *\n\t * @default true\n\t */\n\texpanded?: boolean;\n\t/**\n\t * Spacing in between each child can be adjusted by using `gap`.\n\t *\n\t * Can either be a number (which will act as a multiplier to the library's\n\t * grid system base of 4px), or a literal CSS value string.\n\t *\n\t * @default 2\n\t */\n\tgap?: SpaceInput;\n\t/**\n\t * Horizontally aligns content if the `direction` is `row`, or vertically\n\t * aligns content if the `direction` is `column`.\n\t *\n\t * @default 'space-between'\n\t */\n\tjustify?: CSSProperties[ 'justifyContent' ];\n\t/**\n\t * Determines if children should wrap.\n\t *\n\t * @default false\n\t */\n\twrap?: boolean;\n\t/**\n\t * The children elements.\n\t */\n\tchildren: ReactNode;\n\t/**\n\t * @deprecated\n\t */\n\tisReversed?: boolean;\n};\n\nexport type FlexItemProps = {\n\t/**\n\t * The (CSS) display of the `FlexItem`.\n\t */\n\tdisplay?: CSSProperties[ 'display' ];\n\t/**\n\t * Determines if `FlexItem` should render as an adaptive full-width block.\n\t *\n\t * @default true\n\t */\n\tisBlock?: boolean;\n\t/**\n\t * The children elements.\n\t */\n\tchildren?: ReactNode;\n};\n\nexport type FlexBlockProps = Omit< FlexItemProps, 'isBlock' >;\n"],"mappings":""}

package/build-module/focal-point-picker/controls.js

@@ -1,20 +1,17 @@
 import { createElement } from "@wordpress/element";
-
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */
-
 import { StyledUnitControl, ControlWrapper } from './styles/focal-point-picker-style';
 import { fractionToPercentage } from './utils';
 const TEXTCONTROL_MIN = 0;
 const TEXTCONTROL_MAX = 100;
-
 const noop = () => {};
-
 export default function FocalPointPickerControls({
   __nextHasNoMarginBottom,
   hasHelpText,
@@ -26,18 +23,16 @@ export default function FocalPointPickerControls({
 }) {
   const valueX = fractionToPercentage(point.x);
   const valueY = fractionToPercentage(point.y);
-
   const handleChange = (value, axis) => {
     if (value === undefined) return;
     const num = parseInt(value, 10);
-
     if (!isNaN(num)) {
-      onChange({ ...point,
+      onChange({
+        ...point,
         [axis]: num / 100
       });
     }
   };
-
   return createElement(ControlWrapper, {
     className: "focal-point-picker__controls",
     __nextHasNoMarginBottom: __nextHasNoMarginBottom,
@@ -56,7 +51,6 @@ export default function FocalPointPickerControls({
     dragDirection: "s"
   }));
 }
-
 function FocalPointUnitControl(props) {
   return createElement(StyledUnitControl, {
     className: "focal-point-picker__controls-position-unit-control",

package/build-module/focal-point-picker/controls.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/focal-point-picker/controls.tsx"],"names":["__","StyledUnitControl","ControlWrapper","fractionToPercentage","TEXTCONTROL_MIN","TEXTCONTROL_MAX","noop","FocalPointPickerControls","__nextHasNoMarginBottom","hasHelpText","onChange","point","x","y","valueX","valueY","handleChange","value","axis","undefined","num","parseInt","isNaN","join","next","FocalPointUnitControl","props","label"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,SACCC,iBADD,EAECC,cAFD,QAGO,mCAHP;AAIA,SAASC,oBAAT,QAAqC,SAArC;AAOA,MAAMC,eAAe,GAAG,CAAxB;AACA,MAAMC,eAAe,GAAG,GAAxB;;AACA,MAAMC,IAAI,GAAG,MAAM,CAAE,CAArB;;AAEA,eAAe,SAASC,wBAAT,CAAmC;AACjDC,EAAAA,uBADiD;AAEjDC,EAAAA,WAFiD;AAGjDC,EAAAA,QAAQ,GAAGJ,IAHsC;AAIjDK,EAAAA,KAAK,GAAG;AACPC,IAAAA,CAAC,EAAE,GADI;AAEPC,IAAAA,CAAC,EAAE;AAFI;AAJyC,CAAnC,EAQoB;AAClC,QAAMC,MAAM,GAAGX,oBAAoB,CAAEQ,KAAK,CAACC,CAAR,CAAnC;AACA,QAAMG,MAAM,GAAGZ,oBAAoB,CAAEQ,KAAK,CAACE,CAAR,CAAnC;;AAEA,QAAMG,YAAY,GAAG,CACpBC,KADoB,EAEpBC,IAFoB,KAGhB;AACJ,QAAKD,KAAK,KAAKE,SAAf,EAA2B;AAE3B,UAAMC,GAAG,GAAGC,QAAQ,CAAEJ,KAAF,EAAS,EAAT,CAApB;;AAEA,QAAK,CAAEK,KAAK,CAAEF,GAAF,CAAZ,EAAsB;AACrBV,MAAAA,QAAQ,CAAE,EAAE,GAAGC,KAAL;AAAY,SAAEO,IAAF,GAAUE,GAAG,GAAG;AAA5B,OAAF,CAAR;AACA;AACD,GAXD;;AAaA,SACC,cAAC,cAAD;AACC,IAAA,SAAS,EAAC,8BADX;AAEC,IAAA,uBAAuB,EAAGZ,uBAF3B;AAGC,IAAA,WAAW,EAAGC;AAHf,KAKC,cAAC,qBAAD;AACC,IAAA,KAAK,EAAGT,EAAE,CAAE,MAAF,CADX;AAEC,kBAAaA,EAAE,CAAE,2BAAF,CAFhB;AAGC,IAAA,KAAK,EAAG,CAAEc,MAAF,EAAU,GAAV,EAAgBS,IAAhB,CAAsB,EAAtB,CAHT;AAIC,IAAA,QAAQ,EACHC,IAAF,IACDR,YAAY,CACXQ,IADW,EAEX,GAFW,CANf;AAWC,IAAA,aAAa,EAAC;AAXf,IALD,EAkBC,cAAC,qBAAD;AACC,IAAA,KAAK,EAAGxB,EAAE,CAAE,KAAF,CADX;AAEC,kBAAaA,EAAE,CAAE,0BAAF,CAFhB;AAGC,IAAA,KAAK,EAAG,CAAEe,MAAF,EAAU,GAAV,EAAgBQ,IAAhB,CAAsB,EAAtB,CAHT;AAIC,IAAA,QAAQ,EACHC,IAAF,IACDR,YAAY,CACXQ,IADW,EAEX,GAFW,CANf;AAWC,IAAA,aAAa,EAAC;AAXf,IAlBD,CADD;AAkCA;;AAED,SAASC,qBAAT,CAAgCC,KAAhC,EAA0D;AACzD,SACC,cAAC,iBAAD;AACC,IAAA,SAAS,EAAC,oDADX;AAEC,IAAA,aAAa,EAAC,KAFf;AAGC,IAAA,GAAG,EAAGrB,eAHP;AAIC,IAAA,GAAG,EAAGD,eAJP;AAKC,IAAA,KAAK,EAAG,CAAE;AAAEa,MAAAA,KAAK,EAAE,GAAT;AAAcU,MAAAA,KAAK,EAAE;AAArB,KAAF,CALT;AAAA,OAMMD;AANN,IADD;AAUA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport {\n\tStyledUnitControl,\n\tControlWrapper,\n} from './styles/focal-point-picker-style';\nimport { fractionToPercentage } from './utils';\nimport type {\n\tUnitControlProps,\n\tUnitControlOnChangeCallback,\n} from '../unit-control/types';\nimport type { FocalPointAxis, FocalPointPickerControlsProps } from './types';\n\nconst TEXTCONTROL_MIN = 0;\nconst TEXTCONTROL_MAX = 100;\nconst noop = () => {};\n\nexport default function FocalPointPickerControls( {\n\t__nextHasNoMarginBottom,\n\thasHelpText,\n\tonChange = noop,\n\tpoint = {\n\t\tx: 0.5,\n\t\ty: 0.5,\n\t},\n}: FocalPointPickerControlsProps ) {\n\tconst valueX = fractionToPercentage( point.x );\n\tconst valueY = fractionToPercentage( point.y );\n\n\tconst handleChange = (\n\t\tvalue: Parameters< UnitControlOnChangeCallback >[ 0 ],\n\t\taxis: FocalPointAxis\n\t) => {\n\t\tif ( value === undefined ) return;\n\n\t\tconst num = parseInt( value, 10 );\n\n\t\tif ( ! isNaN( num ) ) {\n\t\t\tonChange( { ...point, [ axis ]: num / 100 } );\n\t\t}\n\t};\n\n\treturn (\n\t\t<ControlWrapper\n\t\t\tclassName=\"focal-point-picker__controls\"\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\thasHelpText={ hasHelpText }\n\t\t>\n\t\t\t<FocalPointUnitControl\n\t\t\t\tlabel={ __( 'Left' ) }\n\t\t\t\taria-label={ __( 'Focal point left position' ) }\n\t\t\t\tvalue={ [ valueX, '%' ].join( '' ) }\n\t\t\t\tonChange={\n\t\t\t\t\t( ( next ) =>\n\t\t\t\t\t\thandleChange(\n\t\t\t\t\t\t\tnext,\n\t\t\t\t\t\t\t'x'\n\t\t\t\t\t\t) ) as UnitControlOnChangeCallback\n\t\t\t\t}\n\t\t\t\tdragDirection=\"e\"\n\t\t\t/>\n\t\t\t<FocalPointUnitControl\n\t\t\t\tlabel={ __( 'Top' ) }\n\t\t\t\taria-label={ __( 'Focal point top position' ) }\n\t\t\t\tvalue={ [ valueY, '%' ].join( '' ) }\n\t\t\t\tonChange={\n\t\t\t\t\t( ( next ) =>\n\t\t\t\t\t\thandleChange(\n\t\t\t\t\t\t\tnext,\n\t\t\t\t\t\t\t'y'\n\t\t\t\t\t\t) ) as UnitControlOnChangeCallback\n\t\t\t\t}\n\t\t\t\tdragDirection=\"s\"\n\t\t\t/>\n\t\t</ControlWrapper>\n\t);\n}\n\nfunction FocalPointUnitControl( props: UnitControlProps ) {\n\treturn (\n\t\t<StyledUnitControl\n\t\t\tclassName=\"focal-point-picker__controls-position-unit-control\"\n\t\t\tlabelPosition=\"top\"\n\t\t\tmax={ TEXTCONTROL_MAX }\n\t\t\tmin={ TEXTCONTROL_MIN }\n\t\t\tunits={ [ { value: '%', label: '%' } ] }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n"]}
+{"version":3,"names":["__","StyledUnitControl","ControlWrapper","fractionToPercentage","TEXTCONTROL_MIN","TEXTCONTROL_MAX","noop","FocalPointPickerControls","__nextHasNoMarginBottom","hasHelpText","onChange","point","x","y","valueX","valueY","handleChange","value","axis","undefined","num","parseInt","isNaN","createElement","className","FocalPointUnitControl","label","join","next","dragDirection","props","labelPosition","max","min","units"],"sources":["@wordpress/components/src/focal-point-picker/controls.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport {\n\tStyledUnitControl,\n\tControlWrapper,\n} from './styles/focal-point-picker-style';\nimport { fractionToPercentage } from './utils';\nimport type {\n\tUnitControlProps,\n\tUnitControlOnChangeCallback,\n} from '../unit-control/types';\nimport type { FocalPointAxis, FocalPointPickerControlsProps } from './types';\n\nconst TEXTCONTROL_MIN = 0;\nconst TEXTCONTROL_MAX = 100;\nconst noop = () => {};\n\nexport default function FocalPointPickerControls( {\n\t__nextHasNoMarginBottom,\n\thasHelpText,\n\tonChange = noop,\n\tpoint = {\n\t\tx: 0.5,\n\t\ty: 0.5,\n\t},\n}: FocalPointPickerControlsProps ) {\n\tconst valueX = fractionToPercentage( point.x );\n\tconst valueY = fractionToPercentage( point.y );\n\n\tconst handleChange = (\n\t\tvalue: Parameters< UnitControlOnChangeCallback >[ 0 ],\n\t\taxis: FocalPointAxis\n\t) => {\n\t\tif ( value === undefined ) return;\n\n\t\tconst num = parseInt( value, 10 );\n\n\t\tif ( ! isNaN( num ) ) {\n\t\t\tonChange( { ...point, [ axis ]: num / 100 } );\n\t\t}\n\t};\n\n\treturn (\n\t\t<ControlWrapper\n\t\t\tclassName=\"focal-point-picker__controls\"\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\thasHelpText={ hasHelpText }\n\t\t>\n\t\t\t<FocalPointUnitControl\n\t\t\t\tlabel={ __( 'Left' ) }\n\t\t\t\taria-label={ __( 'Focal point left position' ) }\n\t\t\t\tvalue={ [ valueX, '%' ].join( '' ) }\n\t\t\t\tonChange={\n\t\t\t\t\t( ( next ) =>\n\t\t\t\t\t\thandleChange(\n\t\t\t\t\t\t\tnext,\n\t\t\t\t\t\t\t'x'\n\t\t\t\t\t\t) ) as UnitControlOnChangeCallback\n\t\t\t\t}\n\t\t\t\tdragDirection=\"e\"\n\t\t\t/>\n\t\t\t<FocalPointUnitControl\n\t\t\t\tlabel={ __( 'Top' ) }\n\t\t\t\taria-label={ __( 'Focal point top position' ) }\n\t\t\t\tvalue={ [ valueY, '%' ].join( '' ) }\n\t\t\t\tonChange={\n\t\t\t\t\t( ( next ) =>\n\t\t\t\t\t\thandleChange(\n\t\t\t\t\t\t\tnext,\n\t\t\t\t\t\t\t'y'\n\t\t\t\t\t\t) ) as UnitControlOnChangeCallback\n\t\t\t\t}\n\t\t\t\tdragDirection=\"s\"\n\t\t\t/>\n\t\t</ControlWrapper>\n\t);\n}\n\nfunction FocalPointUnitControl( props: UnitControlProps ) {\n\treturn (\n\t\t<StyledUnitControl\n\t\t\tclassName=\"focal-point-picker__controls-position-unit-control\"\n\t\t\tlabelPosition=\"top\"\n\t\t\tmax={ TEXTCONTROL_MAX }\n\t\t\tmin={ TEXTCONTROL_MIN }\n\t\t\tunits={ [ { value: '%', label: '%' } ] }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,SACCC,iBAAiB,EACjBC,cAAc,QACR,mCAAmC;AAC1C,SAASC,oBAAoB,QAAQ,SAAS;AAO9C,MAAMC,eAAe,GAAG,CAAC;AACzB,MAAMC,eAAe,GAAG,GAAG;AAC3B,MAAMC,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;AAErB,eAAe,SAASC,wBAAwBA,CAAE;EACjDC,uBAAuB;EACvBC,WAAW;EACXC,QAAQ,GAAGJ,IAAI;EACfK,KAAK,GAAG;IACPC,CAAC,EAAE,GAAG;IACNC,CAAC,EAAE;EACJ;AAC8B,CAAC,EAAG;EAClC,MAAMC,MAAM,GAAGX,oBAAoB,CAAEQ,KAAK,CAACC,CAAE,CAAC;EAC9C,MAAMG,MAAM,GAAGZ,oBAAoB,CAAEQ,KAAK,CAACE,CAAE,CAAC;EAE9C,MAAMG,YAAY,GAAGA,CACpBC,KAAqD,EACrDC,IAAoB,KAChB;IACJ,IAAKD,KAAK,KAAKE,SAAS,EAAG;IAE3B,MAAMC,GAAG,GAAGC,QAAQ,CAAEJ,KAAK,EAAE,EAAG,CAAC;IAEjC,IAAK,CAAEK,KAAK,CAAEF,GAAI,CAAC,EAAG;MACrBV,QAAQ,CAAE;QAAE,GAAGC,KAAK;QAAE,CAAEO,IAAI,GAAIE,GAAG,GAAG;MAAI,CAAE,CAAC;IAC9C;EACD,CAAC;EAED,OACCG,aAAA,CAACrB,cAAc;IACdsB,SAAS,EAAC,8BAA8B;IACxChB,uBAAuB,EAAGA,uBAAyB;IACnDC,WAAW,EAAGA;EAAa,GAE3Bc,aAAA,CAACE,qBAAqB;IACrBC,KAAK,EAAG1B,EAAE,CAAE,MAAO,CAAG;IACtB,cAAaA,EAAE,CAAE,2BAA4B,CAAG;IAChDiB,KAAK,EAAG,CAAEH,MAAM,EAAE,GAAG,CAAE,CAACa,IAAI,CAAE,EAAG,CAAG;IACpCjB,QAAQ,EACHkB,IAAI,IACPZ,YAAY,CACXY,IAAI,EACJ,GACD,CACD;IACDC,aAAa,EAAC;EAAG,CACjB,CAAC,EACFN,aAAA,CAACE,qBAAqB;IACrBC,KAAK,EAAG1B,EAAE,CAAE,KAAM,CAAG;IACrB,cAAaA,EAAE,CAAE,0BAA2B,CAAG;IAC/CiB,KAAK,EAAG,CAAEF,MAAM,EAAE,GAAG,CAAE,CAACY,IAAI,CAAE,EAAG,CAAG;IACpCjB,QAAQ,EACHkB,IAAI,IACPZ,YAAY,CACXY,IAAI,EACJ,GACD,CACD;IACDC,aAAa,EAAC;EAAG,CACjB,CACc,CAAC;AAEnB;AAEA,SAASJ,qBAAqBA,CAAEK,KAAuB,EAAG;EACzD,OACCP,aAAA,CAACtB,iBAAiB;IACjBuB,SAAS,EAAC,oDAAoD;IAC9DO,aAAa,EAAC,KAAK;IACnBC,GAAG,EAAG3B,eAAiB;IACvB4B,GAAG,EAAG7B,eAAiB;IACvB8B,KAAK,EAAG,CAAE;MAAEjB,KAAK,EAAE,GAAG;MAAES,KAAK,EAAE;IAAI,CAAC,CAAI;IAAA,GACnCI;EAAK,CACV,CAAC;AAEJ"}

package/build-module/focal-point-picker/focal-point.js

@@ -1,13 +1,12 @@
 import { createElement } from "@wordpress/element";
-
 /**
  * Internal dependencies
  */
 import { PointerCircle } from './styles/focal-point-style';
+
 /**
  * External dependencies
  */
-
 import classnames from 'classnames';
 export default function FocalPoint({
   left = '50%',
@@ -19,7 +18,8 @@ export default function FocalPoint({
     left,
     top
   };
-  return createElement(PointerCircle, { ...props,
+  return createElement(PointerCircle, {
+    ...props,
     className: classes,
     style: style
   });

package/build-module/focal-point-picker/focal-point.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/focal-point-picker/focal-point.tsx"],"names":["PointerCircle","classnames","FocalPoint","left","top","props","classes","style"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,aAAT,QAA8B,4BAA9B;AAEA;AACA;AACA;;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAIA,eAAe,SAASC,UAAT,CAAqB;AACnCC,EAAAA,IAAI,GAAG,KAD4B;AAEnCC,EAAAA,GAAG,GAAG,KAF6B;AAGnC,KAAGC;AAHgC,CAArB,EAIwC;AACtD,QAAMC,OAAO,GAAGL,UAAU,CACzB,+CADyB,CAA1B;AAIA,QAAMM,KAAK,GAAG;AAAEJ,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAd;AAEA,SAAO,cAAC,aAAD,OAAoBC,KAApB;AAA4B,IAAA,SAAS,EAAGC,OAAxC;AAAkD,IAAA,KAAK,EAAGC;AAA1D,IAAP;AACA","sourcesContent":["/**\n * Internal dependencies\n */\nimport { PointerCircle } from './styles/focal-point-style';\n\n/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { FocalPointProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nexport default function FocalPoint( {\n\tleft = '50%',\n\ttop = '50%',\n\t...props\n}: WordPressComponentProps< FocalPointProps, 'div' > ) {\n\tconst classes = classnames(\n\t\t'components-focal-point-picker__icon_container'\n\t);\n\n\tconst style = { left, top };\n\n\treturn <PointerCircle { ...props } className={ classes } style={ style } />;\n}\n"]}
+{"version":3,"names":["PointerCircle","classnames","FocalPoint","left","top","props","classes","style","createElement","className"],"sources":["@wordpress/components/src/focal-point-picker/focal-point.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { PointerCircle } from './styles/focal-point-style';\n\n/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { FocalPointProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nexport default function FocalPoint( {\n\tleft = '50%',\n\ttop = '50%',\n\t...props\n}: WordPressComponentProps< FocalPointProps, 'div' > ) {\n\tconst classes = classnames(\n\t\t'components-focal-point-picker__icon_container'\n\t);\n\n\tconst style = { left, top };\n\n\treturn <PointerCircle { ...props } className={ classes } style={ style } />;\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,aAAa,QAAQ,4BAA4B;;AAE1D;AACA;AACA;AACA,OAAOC,UAAU,MAAM,YAAY;AAInC,eAAe,SAASC,UAAUA,CAAE;EACnCC,IAAI,GAAG,KAAK;EACZC,GAAG,GAAG,KAAK;EACX,GAAGC;AAC+C,CAAC,EAAG;EACtD,MAAMC,OAAO,GAAGL,UAAU,CACzB,+CACD,CAAC;EAED,MAAMM,KAAK,GAAG;IAAEJ,IAAI;IAAEC;EAAI,CAAC;EAE3B,OAAOI,aAAA,CAACR,aAAa;IAAA,GAAMK,KAAK;IAAGI,SAAS,EAAGH,OAAS;IAACC,KAAK,EAAGA;EAAO,CAAE,CAAC;AAC5E"}

package/build-module/focal-point-picker/focal-point.native.js

@@ -1,13 +1,12 @@
 import { createElement } from "@wordpress/element";
-
 /**
  * WordPress dependencies
  */
 import { Path, SVG } from '@wordpress/primitives';
+
 /**
  * Internal dependencies
  */
-
 import styles from './style.scss';
 export default function FocalPoint({
   height,

package/build-module/focal-point-picker/focal-point.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/focal-point-picker/focal-point.native.js"],"names":["Path","SVG","styles","FocalPoint","height","style","width","focalPointIconPathOutline","focalPointIconPathFill"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,IAAT,EAAeC,GAAf,QAA0B,uBAA1B;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,cAAnB;AAEA,eAAe,SAASC,UAAT,CAAqB;AAAEC,EAAAA,MAAF;AAAUC,EAAAA,KAAV;AAAiBC,EAAAA;AAAjB,CAArB,EAAgD;AAC9D,SACC,cAAC,GAAD;AACC,IAAA,MAAM,EAAGF,MADV;AAEC,IAAA,KAAK,EAAGC,KAFT;AAGC,IAAA,OAAO,EAAC,WAHT;AAIC,IAAA,KAAK,EAAGC,KAJT;AAKC,IAAA,KAAK,EAAC;AALP,KAOC,cAAC,IAAD;AACC,IAAA,KAAK,EAAGJ,MAAM,CAACK,yBADhB;AAEC,IAAA,CAAC,EAAC;AAFH,IAPD,EAWC,cAAC,IAAD;AACC,IAAA,KAAK,EAAGL,MAAM,CAACM,sBADhB;AAEC,IAAA,CAAC,EAAC;AAFH,IAXD,CADD;AAkBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Path, SVG } from '@wordpress/primitives';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nexport default function FocalPoint( { height, style, width } ) {\n\treturn (\n\t\t<SVG\n\t\t\theight={ height }\n\t\t\tstyle={ style }\n\t\t\tviewBox=\"0 0 30 30\"\n\t\t\twidth={ width }\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t>\n\t\t\t<Path\n\t\t\t\tstyle={ styles.focalPointIconPathOutline }\n\t\t\t\td=\"M15 1C7.3 1 1 7.3 1 15s6.3 14 14 14 14-6.3 14-14S22.7 1 15 1zm0 22c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8z\"\n\t\t\t/>\n\t\t\t<Path\n\t\t\t\tstyle={ styles.focalPointIconPathFill }\n\t\t\t\td=\"M15 3C8.4 3 3 8.4 3 15s5.4 12 12 12 12-5.4 12-12S21.6 3 15 3zm0 22C9.5 25 5 20.5 5 15S9.5 5 15 5s10 4.5 10 10-4.5 10-10 10z\"\n\t\t\t/>\n\t\t</SVG>\n\t);\n}\n"]}
+{"version":3,"names":["Path","SVG","styles","FocalPoint","height","style","width","createElement","viewBox","xmlns","focalPointIconPathOutline","d","focalPointIconPathFill"],"sources":["@wordpress/components/src/focal-point-picker/focal-point.native.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Path, SVG } from '@wordpress/primitives';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nexport default function FocalPoint( { height, style, width } ) {\n\treturn (\n\t\t<SVG\n\t\t\theight={ height }\n\t\t\tstyle={ style }\n\t\t\tviewBox=\"0 0 30 30\"\n\t\t\twidth={ width }\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t>\n\t\t\t<Path\n\t\t\t\tstyle={ styles.focalPointIconPathOutline }\n\t\t\t\td=\"M15 1C7.3 1 1 7.3 1 15s6.3 14 14 14 14-6.3 14-14S22.7 1 15 1zm0 22c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8z\"\n\t\t\t/>\n\t\t\t<Path\n\t\t\t\tstyle={ styles.focalPointIconPathFill }\n\t\t\t\td=\"M15 3C8.4 3 3 8.4 3 15s5.4 12 12 12 12-5.4 12-12S21.6 3 15 3zm0 22C9.5 25 5 20.5 5 15S9.5 5 15 5s10 4.5 10 10-4.5 10-10 10z\"\n\t\t\t/>\n\t\t</SVG>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,IAAI,EAAEC,GAAG,QAAQ,uBAAuB;;AAEjD;AACA;AACA;AACA,OAAOC,MAAM,MAAM,cAAc;AAEjC,eAAe,SAASC,UAAUA,CAAE;EAAEC,MAAM;EAAEC,KAAK;EAAEC;AAAM,CAAC,EAAG;EAC9D,OACCC,aAAA,CAACN,GAAG;IACHG,MAAM,EAAGA,MAAQ;IACjBC,KAAK,EAAGA,KAAO;IACfG,OAAO,EAAC,WAAW;IACnBF,KAAK,EAAGA,KAAO;IACfG,KAAK,EAAC;EAA4B,GAElCF,aAAA,CAACP,IAAI;IACJK,KAAK,EAAGH,MAAM,CAACQ,yBAA2B;IAC1CC,CAAC,EAAC;EAAoH,CACtH,CAAC,EACFJ,aAAA,CAACP,IAAI;IACJK,KAAK,EAAGH,MAAM,CAACU,sBAAwB;IACvCD,CAAC,EAAC;EAA6H,CAC/H,CACG,CAAC;AAER"}

package/build-module/focal-point-picker/grid.js

@@ -1,5 +1,4 @@
 import { createElement } from "@wordpress/element";
-
 /**
  * Internal dependencies
  */
@@ -8,7 +7,8 @@ export default function FocalPointPickerGrid({
   bounds,
   ...props
 }) {
-  return createElement(GridView, { ...props,
+  return createElement(GridView, {
+    ...props,
     className: "components-focal-point-picker__grid",
     style: {
       width: bounds.width,

package/build-module/focal-point-picker/grid.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/focal-point-picker/grid.tsx"],"names":["GridView","GridLineX","GridLineY","FocalPointPickerGrid","bounds","props","width","height","top","left"],"mappings":";;AAAA;AACA;AACA;AACA,SACCA,QADD,EAECC,SAFD,EAGCC,SAHD,QAIO,mCAJP;AAQA,eAAe,SAASC,oBAAT,CAA+B;AAC7CC,EAAAA,MAD6C;AAE7C,KAAGC;AAF0C,CAA/B,EAGkD;AAChE,SACC,cAAC,QAAD,OACMA,KADN;AAEC,IAAA,SAAS,EAAC,qCAFX;AAGC,IAAA,KAAK,EAAG;AACPC,MAAAA,KAAK,EAAEF,MAAM,CAACE,KADP;AAEPC,MAAAA,MAAM,EAAEH,MAAM,CAACG;AAFR;AAHT,KAQC,cAAC,SAAD;AAAW,IAAA,KAAK,EAAG;AAAEC,MAAAA,GAAG,EAAE;AAAP;AAAnB,IARD,EASC,cAAC,SAAD;AAAW,IAAA,KAAK,EAAG;AAAEA,MAAAA,GAAG,EAAE;AAAP;AAAnB,IATD,EAUC,cAAC,SAAD;AAAW,IAAA,KAAK,EAAG;AAAEC,MAAAA,IAAI,EAAE;AAAR;AAAnB,IAVD,EAWC,cAAC,SAAD;AAAW,IAAA,KAAK,EAAG;AAAEA,MAAAA,IAAI,EAAE;AAAR;AAAnB,IAXD,CADD;AAeA","sourcesContent":["/**\n * Internal dependencies\n */\nimport {\n\tGridView,\n\tGridLineX,\n\tGridLineY,\n} from './styles/focal-point-picker-style';\nimport type { FocalPointPickerGridProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context/wordpress-component';\n\nexport default function FocalPointPickerGrid( {\n\tbounds,\n\t...props\n}: WordPressComponentProps< FocalPointPickerGridProps, 'div' > ) {\n\treturn (\n\t\t<GridView\n\t\t\t{ ...props }\n\t\t\tclassName=\"components-focal-point-picker__grid\"\n\t\t\tstyle={ {\n\t\t\t\twidth: bounds.width,\n\t\t\t\theight: bounds.height,\n\t\t\t} }\n\t\t>\n\t\t\t<GridLineX style={ { top: '33%' } } />\n\t\t\t<GridLineX style={ { top: '66%' } } />\n\t\t\t<GridLineY style={ { left: '33%' } } />\n\t\t\t<GridLineY style={ { left: '66%' } } />\n\t\t</GridView>\n\t);\n}\n"]}
+{"version":3,"names":["GridView","GridLineX","GridLineY","FocalPointPickerGrid","bounds","props","createElement","className","style","width","height","top","left"],"sources":["@wordpress/components/src/focal-point-picker/grid.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport {\n\tGridView,\n\tGridLineX,\n\tGridLineY,\n} from './styles/focal-point-picker-style';\nimport type { FocalPointPickerGridProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context/wordpress-component';\n\nexport default function FocalPointPickerGrid( {\n\tbounds,\n\t...props\n}: WordPressComponentProps< FocalPointPickerGridProps, 'div' > ) {\n\treturn (\n\t\t<GridView\n\t\t\t{ ...props }\n\t\t\tclassName=\"components-focal-point-picker__grid\"\n\t\t\tstyle={ {\n\t\t\t\twidth: bounds.width,\n\t\t\t\theight: bounds.height,\n\t\t\t} }\n\t\t>\n\t\t\t<GridLineX style={ { top: '33%' } } />\n\t\t\t<GridLineX style={ { top: '66%' } } />\n\t\t\t<GridLineY style={ { left: '33%' } } />\n\t\t\t<GridLineY style={ { left: '66%' } } />\n\t\t</GridView>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SACCA,QAAQ,EACRC,SAAS,EACTC,SAAS,QACH,mCAAmC;AAI1C,eAAe,SAASC,oBAAoBA,CAAE;EAC7CC,MAAM;EACN,GAAGC;AACyD,CAAC,EAAG;EAChE,OACCC,aAAA,CAACN,QAAQ;IAAA,GACHK,KAAK;IACVE,SAAS,EAAC,qCAAqC;IAC/CC,KAAK,EAAG;MACPC,KAAK,EAAEL,MAAM,CAACK,KAAK;MACnBC,MAAM,EAAEN,MAAM,CAACM;IAChB;EAAG,GAEHJ,aAAA,CAACL,SAAS;IAACO,KAAK,EAAG;MAAEG,GAAG,EAAE;IAAM;EAAG,CAAE,CAAC,EACtCL,aAAA,CAACL,SAAS;IAACO,KAAK,EAAG;MAAEG,GAAG,EAAE;IAAM;EAAG,CAAE,CAAC,EACtCL,aAAA,CAACJ,SAAS;IAACM,KAAK,EAAG;MAAEI,IAAI,EAAE;IAAM;EAAG,CAAE,CAAC,EACvCN,aAAA,CAACJ,SAAS;IAACM,KAAK,EAAG;MAAEI,IAAI,EAAE;IAAM;EAAG,CAAE,CAC7B,CAAC;AAEb"}

package/build-module/focal-point-picker/index.js

@@ -1,20 +1,19 @@
 import { createElement } from "@wordpress/element";
-
 /**
  * External dependencies
  */
 import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
-
 import { __ } from '@wordpress/i18n';
 import { useEffect, useRef, useState } from '@wordpress/element';
 import { __experimentalUseDragging as useDragging, useInstanceId, useIsomorphicLayoutEffect } from '@wordpress/compose';
+
 /**
  * Internal dependencies
  */
-
 import BaseControl from '../base-control';
 import Controls from './controls';
 import FocalPoint from './focal-point';
@@ -24,6 +23,7 @@ import { MediaWrapper, MediaContainer } from './styles/focal-point-picker-style'
 import { INITIAL_BOUNDS } from './utils';
 import { useUpdateEffect } from '../utils/hooks';
 const GRID_OVERLAY_TIMEOUT = 600;
+
 /**
  * Focal Point Picker is a component which creates a UI for identifying the most important visual point of an image.
  *
@@ -69,7 +69,6 @@ const GRID_OVERLAY_TIMEOUT = 600;
  * };
  * ```
  */
-
 export function FocalPointPicker({
   __nextHasNoMarginBottom,
   autoPlay = true,
@@ -97,9 +96,10 @@ export function FocalPointPicker({
   } = useDragging({
     onDragStart: event => {
       dragAreaRef.current?.focus();
-      const value = getValueWithinDragArea(event); // `value` can technically be undefined if getValueWithinDragArea() is
-      // called before dragAreaRef is set, but this shouldn't happen in reality.
+      const value = getValueWithinDragArea(event);
 
+      // `value` can technically be undefined if getValueWithinDragArea() is
+      // called before dragAreaRef is set, but this shouldn't happen in reality.
       if (!value) return;
       onDragStart?.(value, event);
       setPoint(value);
@@ -116,8 +116,9 @@ export function FocalPointPicker({
       onDragEnd?.();
       onChange?.(point);
     }
-  }); // Uses the internal point while dragging or else the value from props.
+  });
 
+  // Uses the internal point while dragging or else the value from props.
   const {
     x,
     y
@@ -129,14 +130,15 @@ export function FocalPointPicker({
     const {
       clientWidth: width,
       clientHeight: height
-    } = dragAreaRef.current; // Falls back to initial bounds if the ref has no size. Since styles
+    } = dragAreaRef.current;
+    // Falls back to initial bounds if the ref has no size. Since styles
     // give the drag area dimensions even when the media has not loaded
     // this should only happen in unit tests (jsdom).
-
     setBounds(width > 0 && height > 0 ? {
       width,
       height
-    } : { ...INITIAL_BOUNDS
+    } : {
+      ...INITIAL_BOUNDS
     });
   });
   useEffect(() => {
@@ -147,11 +149,13 @@ export function FocalPointPicker({
     } = dragAreaRef.current.ownerDocument;
     defaultView?.addEventListener('resize', updateBounds);
     return () => defaultView?.removeEventListener('resize', updateBounds);
-  }, []); // Updates the bounds to cover cases of unspecified media or load failures.
+  }, []);
 
-  useIsomorphicLayoutEffect(() => void refUpdateBounds.current(), []); // TODO: Consider refactoring getValueWithinDragArea() into a pure function.
-  // https://github.com/WordPress/gutenberg/pull/43872#discussion_r963455173
+  // Updates the bounds to cover cases of unspecified media or load failures.
+  useIsomorphicLayoutEffect(() => void refUpdateBounds.current(), []);
 
+  // TODO: Consider refactoring getValueWithinDragArea() into a pure function.
+  // https://github.com/WordPress/gutenberg/pull/43872#discussion_r963455173
   const getValueWithinDragArea = ({
     clientX,
     clientY,
@@ -163,34 +167,28 @@ export function FocalPointPicker({
       left
     } = dragAreaRef.current.getBoundingClientRect();
     let nextX = (clientX - left) / bounds.width;
-    let nextY = (clientY - top) / bounds.height; // Enables holding shift to jump values by 10%.
-
+    let nextY = (clientY - top) / bounds.height;
+    // Enables holding shift to jump values by 10%.
     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 * 1e2) / 1e2;
-
     return {
       x: roundToTwoDecimalPlaces(resolvedValue.x),
       y: roundToTwoDecimalPlaces(resolvedValue.y)
     };
   };
-
   const arrowKeyStep = event => {
     const {
       code,
@@ -208,7 +206,6 @@ export function FocalPointPicker({
     value[axis] = value[axis] + delta;
     onChange?.(getFinalValue(value));
   };
-
   const focalPointPosition = {
     left: x * bounds.width,
     top: y * bounds.height
@@ -223,7 +220,8 @@ export function FocalPointPicker({
     }, GRID_OVERLAY_TIMEOUT);
     return () => window.clearTimeout(timeout);
   }, [x, y]);
-  return createElement(BaseControl, { ...restProps,
+  return createElement(BaseControl, {
+    ...restProps,
     __nextHasNoMarginBottom: __nextHasNoMarginBottom,
     label: label,
     id: id,
@@ -249,7 +247,8 @@ export function FocalPointPicker({
     autoPlay: autoPlay,
     onLoad: refUpdateBounds.current,
     src: url
-  }), createElement(FocalPoint, { ...focalPointPosition,
+  }), createElement(FocalPoint, {
+    ...focalPointPosition,
     isDragging: isDragging
   }))), createElement(Controls, {
     __nextHasNoMarginBottom: __nextHasNoMarginBottom,

package/build-module/focal-point-picker/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/focal-point-picker/index.tsx"],"names":["classnames","__","useEffect","useRef","useState","__experimentalUseDragging","useDragging","useInstanceId","useIsomorphicLayoutEffect","BaseControl","Controls","FocalPoint","Grid","Media","MediaWrapper","MediaContainer","INITIAL_BOUNDS","useUpdateEffect","GRID_OVERLAY_TIMEOUT","FocalPointPicker","__nextHasNoMarginBottom","autoPlay","className","help","label","onChange","onDrag","onDragEnd","onDragStart","resolvePoint","url","value","valueProp","x","y","restProps","point","setPoint","showGridOverlay","setShowGridOverlay","startDrag","endDrag","isDragging","event","dragAreaRef","current","focus","getValueWithinDragArea","onDragMove","preventDefault","bounds","setBounds","refUpdateBounds","clientWidth","width","clientHeight","height","updateBounds","defaultView","ownerDocument","addEventListener","removeEventListener","clientX","clientY","shiftKey","top","left","getBoundingClientRect","nextX","nextY","Math","round","getFinalValue","resolvedValue","max","min","roundToTwoDecimalPlaces","n","arrowKeyStep","code","includes","step","delta","axis","focalPointPosition","classes","instanceId","id","timeout","window","setTimeout","clearTimeout"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useEffect, useRef, useState } from '@wordpress/element';\nimport {\n\t__experimentalUseDragging as useDragging,\n\tuseInstanceId,\n\tuseIsomorphicLayoutEffect,\n} from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport Controls from './controls';\nimport FocalPoint from './focal-point';\nimport Grid from './grid';\nimport Media from './media';\nimport {\n\tMediaWrapper,\n\tMediaContainer,\n} from './styles/focal-point-picker-style';\nimport { INITIAL_BOUNDS } from './utils';\nimport { useUpdateEffect } from '../utils/hooks';\nimport type { WordPressComponentProps } from '../ui/context/wordpress-component';\nimport type {\n\tFocalPoint as FocalPointType,\n\tFocalPointPickerProps,\n} from './types';\nimport type { KeyboardEventHandler } from 'react';\n\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\t__nextHasNoMarginBottom,\n\tautoPlay = true,\n\tclassName,\n\thelp,\n\tlabel,\n\tonChange,\n\tonDrag,\n\tonDragEnd,\n\tonDragStart,\n\tresolvePoint,\n\turl,\n\tvalue: valueProp = {\n\t\tx: 0.5,\n\t\ty: 0.5,\n\t},\n\t...restProps\n}: WordPressComponentProps< FocalPointPickerProps, 'div', false > ) {\n\tconst [ point, setPoint ] = useState( valueProp );\n\tconst [ showGridOverlay, setShowGridOverlay ] = useState( false );\n\n\tconst { startDrag, endDrag, isDragging } = useDragging( {\n\t\tonDragStart: ( event ) => {\n\t\t\tdragAreaRef.current?.focus();\n\t\t\tconst value = getValueWithinDragArea( event );\n\n\t\t\t// `value` can technically be undefined if getValueWithinDragArea() is\n\t\t\t// called before dragAreaRef is set, but this shouldn't happen in reality.\n\t\t\tif ( ! value ) return;\n\n\t\t\tonDragStart?.( value, event );\n\t\t\tsetPoint( value );\n\t\t},\n\t\tonDragMove: ( event ) => {\n\t\t\t// Prevents text-selection when dragging.\n\t\t\tevent.preventDefault();\n\t\t\tconst value = getValueWithinDragArea( event );\n\t\t\tif ( ! value ) return;\n\t\t\tonDrag?.( value, event );\n\t\t\tsetPoint( value );\n\t\t},\n\t\tonDragEnd: () => {\n\t\t\tonDragEnd?.();\n\t\t\tonChange?.( point );\n\t\t},\n\t} );\n\n\t// Uses the internal point while dragging or else the value from props.\n\tconst { x, y } = isDragging ? point : valueProp;\n\n\tconst dragAreaRef = useRef< HTMLDivElement >( null );\n\tconst [ bounds, setBounds ] = useState( INITIAL_BOUNDS );\n\tconst refUpdateBounds = useRef( () => {\n\t\tif ( ! dragAreaRef.current ) return;\n\n\t\tconst { clientWidth: width, clientHeight: height } =\n\t\t\tdragAreaRef.current;\n\t\t// Falls back to initial bounds if the ref has no size. Since styles\n\t\t// give the drag area dimensions even when the media has not loaded\n\t\t// this should only happen in unit tests (jsdom).\n\t\tsetBounds(\n\t\t\twidth > 0 && height > 0 ? { width, height } : { ...INITIAL_BOUNDS }\n\t\t);\n\t} );\n\n\tuseEffect( () => {\n\t\tconst updateBounds = refUpdateBounds.current;\n\t\tif ( ! dragAreaRef.current ) return;\n\n\t\tconst { defaultView } = dragAreaRef.current.ownerDocument;\n\t\tdefaultView?.addEventListener( 'resize', updateBounds );\n\t\treturn () => defaultView?.removeEventListener( 'resize', updateBounds );\n\t}, [] );\n\n\t// Updates the bounds to cover cases of unspecified media or load failures.\n\tuseIsomorphicLayoutEffect( () => void refUpdateBounds.current(), [] );\n\n\t// TODO: Consider refactoring getValueWithinDragArea() into a pure function.\n\t// https://github.com/WordPress/gutenberg/pull/43872#discussion_r963455173\n\tconst getValueWithinDragArea = ( {\n\t\tclientX,\n\t\tclientY,\n\t\tshiftKey,\n\t}: {\n\t\tclientX: number;\n\t\tclientY: number;\n\t\tshiftKey: boolean;\n\t} ) => {\n\t\tif ( ! dragAreaRef.current ) return;\n\n\t\tconst { top, left } = dragAreaRef.current.getBoundingClientRect();\n\t\tlet nextX = ( clientX - left ) / bounds.width;\n\t\tlet nextY = ( clientY - top ) / bounds.height;\n\t\t// Enables holding shift to jump values by 10%.\n\t\tif ( shiftKey ) {\n\t\t\tnextX = Math.round( nextX / 0.1 ) * 0.1;\n\t\t\tnextY = Math.round( nextY / 0.1 ) * 0.1;\n\t\t}\n\t\treturn getFinalValue( { x: nextX, y: nextY } );\n\t};\n\n\tconst getFinalValue = ( value: FocalPointType ): FocalPointType => {\n\t\tconst resolvedValue = resolvePoint?.( value ) ?? value;\n\t\tresolvedValue.x = Math.max( 0, Math.min( resolvedValue.x, 1 ) );\n\t\tresolvedValue.y = Math.max( 0, Math.min( resolvedValue.y, 1 ) );\n\t\tconst roundToTwoDecimalPlaces = ( n: number ) =>\n\t\t\tMath.round( n * 1e2 ) / 1e2;\n\n\t\treturn {\n\t\t\tx: roundToTwoDecimalPlaces( resolvedValue.x ),\n\t\t\ty: roundToTwoDecimalPlaces( resolvedValue.y ),\n\t\t};\n\t};\n\n\tconst arrowKeyStep: KeyboardEventHandler< HTMLDivElement > = ( event ) => {\n\t\tconst { code, shiftKey } = event;\n\t\tif (\n\t\t\t! [ 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight' ].includes(\n\t\t\t\tcode\n\t\t\t)\n\t\t)\n\t\t\treturn;\n\n\t\tevent.preventDefault();\n\t\tconst value = { x, y };\n\t\tconst step = shiftKey ? 0.1 : 0.01;\n\t\tconst delta =\n\t\t\tcode === 'ArrowUp' || code === 'ArrowLeft' ? -1 * step : step;\n\t\tconst axis = code === 'ArrowUp' || code === 'ArrowDown' ? 'y' : 'x';\n\t\tvalue[ axis ] = value[ axis ] + delta;\n\t\tonChange?.( getFinalValue( value ) );\n\t};\n\n\tconst focalPointPosition = {\n\t\tleft: x * bounds.width,\n\t\ttop: y * bounds.height,\n\t};\n\n\tconst classes = classnames(\n\t\t'components-focal-point-picker-control',\n\t\tclassName\n\t);\n\n\tconst instanceId = useInstanceId( FocalPointPicker );\n\tconst id = `inspector-focal-point-picker-control-${ instanceId }`;\n\n\tuseUpdateEffect( () => {\n\t\tsetShowGridOverlay( true );\n\t\tconst timeout = window.setTimeout( () => {\n\t\t\tsetShowGridOverlay( false );\n\t\t}, GRID_OVERLAY_TIMEOUT );\n\n\t\treturn () => window.clearTimeout( timeout );\n\t}, [ x, y ] );\n\n\treturn (\n\t\t<BaseControl\n\t\t\t{ ...restProps }\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tlabel={ label }\n\t\t\tid={ id }\n\t\t\thelp={ help }\n\t\t\tclassName={ classes }\n\t\t>\n\t\t\t<MediaWrapper className=\"components-focal-point-picker-wrapper\">\n\t\t\t\t<MediaContainer\n\t\t\t\t\tclassName=\"components-focal-point-picker\"\n\t\t\t\t\tonKeyDown={ arrowKeyStep }\n\t\t\t\t\tonMouseDown={ startDrag }\n\t\t\t\t\tonBlur={ () => {\n\t\t\t\t\t\tif ( isDragging ) endDrag();\n\t\t\t\t\t} }\n\t\t\t\t\tref={ dragAreaRef }\n\t\t\t\t\trole=\"button\"\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t>\n\t\t\t\t\t<Grid bounds={ bounds } showOverlay={ showGridOverlay } />\n\t\t\t\t\t<Media\n\t\t\t\t\t\talt={ __( 'Media preview' ) }\n\t\t\t\t\t\tautoPlay={ autoPlay }\n\t\t\t\t\t\tonLoad={ refUpdateBounds.current }\n\t\t\t\t\t\tsrc={ url }\n\t\t\t\t\t/>\n\t\t\t\t\t<FocalPoint\n\t\t\t\t\t\t{ ...focalPointPosition }\n\t\t\t\t\t\tisDragging={ isDragging }\n\t\t\t\t\t/>\n\t\t\t\t</MediaContainer>\n\t\t\t</MediaWrapper>\n\t\t\t<Controls\n\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t\thasHelpText={ !! help }\n\t\t\t\tpoint={ { x, y } }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tonChange?.( getFinalValue( value ) );\n\t\t\t\t} }\n\t\t\t/>\n\t\t</BaseControl>\n\t);\n}\n\nexport default FocalPointPicker;\n"]}
+{"version":3,"names":["classnames","__","useEffect","useRef","useState","__experimentalUseDragging","useDragging","useInstanceId","useIsomorphicLayoutEffect","BaseControl","Controls","FocalPoint","Grid","Media","MediaWrapper","MediaContainer","INITIAL_BOUNDS","useUpdateEffect","GRID_OVERLAY_TIMEOUT","FocalPointPicker","__nextHasNoMarginBottom","autoPlay","className","help","label","onChange","onDrag","onDragEnd","onDragStart","resolvePoint","url","value","valueProp","x","y","restProps","point","setPoint","showGridOverlay","setShowGridOverlay","startDrag","endDrag","isDragging","event","dragAreaRef","current","focus","getValueWithinDragArea","onDragMove","preventDefault","bounds","setBounds","refUpdateBounds","clientWidth","width","clientHeight","height","updateBounds","defaultView","ownerDocument","addEventListener","removeEventListener","clientX","clientY","shiftKey","top","left","getBoundingClientRect","nextX","nextY","Math","round","getFinalValue","_resolvePoint","resolvedValue","max","min","roundToTwoDecimalPlaces","n","arrowKeyStep","code","includes","step","delta","axis","focalPointPosition","classes","instanceId","id","timeout","window","setTimeout","clearTimeout","createElement","onKeyDown","onMouseDown","onBlur","ref","role","tabIndex","showOverlay","alt","onLoad","src","hasHelpText"],"sources":["@wordpress/components/src/focal-point-picker/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useEffect, useRef, useState } from '@wordpress/element';\nimport {\n\t__experimentalUseDragging as useDragging,\n\tuseInstanceId,\n\tuseIsomorphicLayoutEffect,\n} from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport Controls from './controls';\nimport FocalPoint from './focal-point';\nimport Grid from './grid';\nimport Media from './media';\nimport {\n\tMediaWrapper,\n\tMediaContainer,\n} from './styles/focal-point-picker-style';\nimport { INITIAL_BOUNDS } from './utils';\nimport { useUpdateEffect } from '../utils/hooks';\nimport type { WordPressComponentProps } from '../ui/context/wordpress-component';\nimport type {\n\tFocalPoint as FocalPointType,\n\tFocalPointPickerProps,\n} from './types';\nimport type { KeyboardEventHandler } from 'react';\n\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\t__nextHasNoMarginBottom,\n\tautoPlay = true,\n\tclassName,\n\thelp,\n\tlabel,\n\tonChange,\n\tonDrag,\n\tonDragEnd,\n\tonDragStart,\n\tresolvePoint,\n\turl,\n\tvalue: valueProp = {\n\t\tx: 0.5,\n\t\ty: 0.5,\n\t},\n\t...restProps\n}: WordPressComponentProps< FocalPointPickerProps, 'div', false > ) {\n\tconst [ point, setPoint ] = useState( valueProp );\n\tconst [ showGridOverlay, setShowGridOverlay ] = useState( false );\n\n\tconst { startDrag, endDrag, isDragging } = useDragging( {\n\t\tonDragStart: ( event ) => {\n\t\t\tdragAreaRef.current?.focus();\n\t\t\tconst value = getValueWithinDragArea( event );\n\n\t\t\t// `value` can technically be undefined if getValueWithinDragArea() is\n\t\t\t// called before dragAreaRef is set, but this shouldn't happen in reality.\n\t\t\tif ( ! value ) return;\n\n\t\t\tonDragStart?.( value, event );\n\t\t\tsetPoint( value );\n\t\t},\n\t\tonDragMove: ( event ) => {\n\t\t\t// Prevents text-selection when dragging.\n\t\t\tevent.preventDefault();\n\t\t\tconst value = getValueWithinDragArea( event );\n\t\t\tif ( ! value ) return;\n\t\t\tonDrag?.( value, event );\n\t\t\tsetPoint( value );\n\t\t},\n\t\tonDragEnd: () => {\n\t\t\tonDragEnd?.();\n\t\t\tonChange?.( point );\n\t\t},\n\t} );\n\n\t// Uses the internal point while dragging or else the value from props.\n\tconst { x, y } = isDragging ? point : valueProp;\n\n\tconst dragAreaRef = useRef< HTMLDivElement >( null );\n\tconst [ bounds, setBounds ] = useState( INITIAL_BOUNDS );\n\tconst refUpdateBounds = useRef( () => {\n\t\tif ( ! dragAreaRef.current ) return;\n\n\t\tconst { clientWidth: width, clientHeight: height } =\n\t\t\tdragAreaRef.current;\n\t\t// Falls back to initial bounds if the ref has no size. Since styles\n\t\t// give the drag area dimensions even when the media has not loaded\n\t\t// this should only happen in unit tests (jsdom).\n\t\tsetBounds(\n\t\t\twidth > 0 && height > 0 ? { width, height } : { ...INITIAL_BOUNDS }\n\t\t);\n\t} );\n\n\tuseEffect( () => {\n\t\tconst updateBounds = refUpdateBounds.current;\n\t\tif ( ! dragAreaRef.current ) return;\n\n\t\tconst { defaultView } = dragAreaRef.current.ownerDocument;\n\t\tdefaultView?.addEventListener( 'resize', updateBounds );\n\t\treturn () => defaultView?.removeEventListener( 'resize', updateBounds );\n\t}, [] );\n\n\t// Updates the bounds to cover cases of unspecified media or load failures.\n\tuseIsomorphicLayoutEffect( () => void refUpdateBounds.current(), [] );\n\n\t// TODO: Consider refactoring getValueWithinDragArea() into a pure function.\n\t// https://github.com/WordPress/gutenberg/pull/43872#discussion_r963455173\n\tconst getValueWithinDragArea = ( {\n\t\tclientX,\n\t\tclientY,\n\t\tshiftKey,\n\t}: {\n\t\tclientX: number;\n\t\tclientY: number;\n\t\tshiftKey: boolean;\n\t} ) => {\n\t\tif ( ! dragAreaRef.current ) return;\n\n\t\tconst { top, left } = dragAreaRef.current.getBoundingClientRect();\n\t\tlet nextX = ( clientX - left ) / bounds.width;\n\t\tlet nextY = ( clientY - top ) / bounds.height;\n\t\t// Enables holding shift to jump values by 10%.\n\t\tif ( shiftKey ) {\n\t\t\tnextX = Math.round( nextX / 0.1 ) * 0.1;\n\t\t\tnextY = Math.round( nextY / 0.1 ) * 0.1;\n\t\t}\n\t\treturn getFinalValue( { x: nextX, y: nextY } );\n\t};\n\n\tconst getFinalValue = ( value: FocalPointType ): FocalPointType => {\n\t\tconst resolvedValue = resolvePoint?.( value ) ?? value;\n\t\tresolvedValue.x = Math.max( 0, Math.min( resolvedValue.x, 1 ) );\n\t\tresolvedValue.y = Math.max( 0, Math.min( resolvedValue.y, 1 ) );\n\t\tconst roundToTwoDecimalPlaces = ( n: number ) =>\n\t\t\tMath.round( n * 1e2 ) / 1e2;\n\n\t\treturn {\n\t\t\tx: roundToTwoDecimalPlaces( resolvedValue.x ),\n\t\t\ty: roundToTwoDecimalPlaces( resolvedValue.y ),\n\t\t};\n\t};\n\n\tconst arrowKeyStep: KeyboardEventHandler< HTMLDivElement > = ( event ) => {\n\t\tconst { code, shiftKey } = event;\n\t\tif (\n\t\t\t! [ 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight' ].includes(\n\t\t\t\tcode\n\t\t\t)\n\t\t)\n\t\t\treturn;\n\n\t\tevent.preventDefault();\n\t\tconst value = { x, y };\n\t\tconst step = shiftKey ? 0.1 : 0.01;\n\t\tconst delta =\n\t\t\tcode === 'ArrowUp' || code === 'ArrowLeft' ? -1 * step : step;\n\t\tconst axis = code === 'ArrowUp' || code === 'ArrowDown' ? 'y' : 'x';\n\t\tvalue[ axis ] = value[ axis ] + delta;\n\t\tonChange?.( getFinalValue( value ) );\n\t};\n\n\tconst focalPointPosition = {\n\t\tleft: x * bounds.width,\n\t\ttop: y * bounds.height,\n\t};\n\n\tconst classes = classnames(\n\t\t'components-focal-point-picker-control',\n\t\tclassName\n\t);\n\n\tconst instanceId = useInstanceId( FocalPointPicker );\n\tconst id = `inspector-focal-point-picker-control-${ instanceId }`;\n\n\tuseUpdateEffect( () => {\n\t\tsetShowGridOverlay( true );\n\t\tconst timeout = window.setTimeout( () => {\n\t\t\tsetShowGridOverlay( false );\n\t\t}, GRID_OVERLAY_TIMEOUT );\n\n\t\treturn () => window.clearTimeout( timeout );\n\t}, [ x, y ] );\n\n\treturn (\n\t\t<BaseControl\n\t\t\t{ ...restProps }\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tlabel={ label }\n\t\t\tid={ id }\n\t\t\thelp={ help }\n\t\t\tclassName={ classes }\n\t\t>\n\t\t\t<MediaWrapper className=\"components-focal-point-picker-wrapper\">\n\t\t\t\t<MediaContainer\n\t\t\t\t\tclassName=\"components-focal-point-picker\"\n\t\t\t\t\tonKeyDown={ arrowKeyStep }\n\t\t\t\t\tonMouseDown={ startDrag }\n\t\t\t\t\tonBlur={ () => {\n\t\t\t\t\t\tif ( isDragging ) endDrag();\n\t\t\t\t\t} }\n\t\t\t\t\tref={ dragAreaRef }\n\t\t\t\t\trole=\"button\"\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t>\n\t\t\t\t\t<Grid bounds={ bounds } showOverlay={ showGridOverlay } />\n\t\t\t\t\t<Media\n\t\t\t\t\t\talt={ __( 'Media preview' ) }\n\t\t\t\t\t\tautoPlay={ autoPlay }\n\t\t\t\t\t\tonLoad={ refUpdateBounds.current }\n\t\t\t\t\t\tsrc={ url }\n\t\t\t\t\t/>\n\t\t\t\t\t<FocalPoint\n\t\t\t\t\t\t{ ...focalPointPosition }\n\t\t\t\t\t\tisDragging={ isDragging }\n\t\t\t\t\t/>\n\t\t\t\t</MediaContainer>\n\t\t\t</MediaWrapper>\n\t\t\t<Controls\n\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t\thasHelpText={ !! help }\n\t\t\t\tpoint={ { x, y } }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tonChange?.( getFinalValue( value ) );\n\t\t\t\t} }\n\t\t\t/>\n\t\t</BaseControl>\n\t);\n}\n\nexport default FocalPointPicker;\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,YAAY;;AAEnC;AACA;AACA;AACA,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,oBAAoB;AAChE,SACCC,yBAAyB,IAAIC,WAAW,EACxCC,aAAa,EACbC,yBAAyB,QACnB,oBAAoB;;AAE3B;AACA;AACA;AACA,OAAOC,WAAW,MAAM,iBAAiB;AACzC,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,UAAU,MAAM,eAAe;AACtC,OAAOC,IAAI,MAAM,QAAQ;AACzB,OAAOC,KAAK,MAAM,SAAS;AAC3B,SACCC,YAAY,EACZC,cAAc,QACR,mCAAmC;AAC1C,SAASC,cAAc,QAAQ,SAAS;AACxC,SAASC,eAAe,QAAQ,gBAAgB;AAQhD,MAAMC,oBAAoB,GAAG,GAAG;;AAEhC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,gBAAgBA,CAAE;EACjCC,uBAAuB;EACvBC,QAAQ,GAAG,IAAI;EACfC,SAAS;EACTC,IAAI;EACJC,KAAK;EACLC,QAAQ;EACRC,MAAM;EACNC,SAAS;EACTC,WAAW;EACXC,YAAY;EACZC,GAAG;EACHC,KAAK,EAAEC,SAAS,GAAG;IAClBC,CAAC,EAAE,GAAG;IACNC,CAAC,EAAE;EACJ,CAAC;EACD,GAAGC;AAC4D,CAAC,EAAG;EACnE,MAAM,CAAEC,KAAK,EAAEC,QAAQ,CAAE,GAAGjC,QAAQ,CAAE4B,SAAU,CAAC;EACjD,MAAM,CAAEM,eAAe,EAAEC,kBAAkB,CAAE,GAAGnC,QAAQ,CAAE,KAAM,CAAC;EAEjE,MAAM;IAAEoC,SAAS;IAAEC,OAAO;IAAEC;EAAW,CAAC,GAAGpC,WAAW,CAAE;IACvDsB,WAAW,EAAIe,KAAK,IAAM;MACzBC,WAAW,CAACC,OAAO,EAAEC,KAAK,CAAC,CAAC;MAC5B,MAAMf,KAAK,GAAGgB,sBAAsB,CAAEJ,KAAM,CAAC;;MAE7C;MACA;MACA,IAAK,CAAEZ,KAAK,EAAG;MAEfH,WAAW,GAAIG,KAAK,EAAEY,KAAM,CAAC;MAC7BN,QAAQ,CAAEN,KAAM,CAAC;IAClB,CAAC;IACDiB,UAAU,EAAIL,KAAK,IAAM;MACxB;MACAA,KAAK,CAACM,cAAc,CAAC,CAAC;MACtB,MAAMlB,KAAK,GAAGgB,sBAAsB,CAAEJ,KAAM,CAAC;MAC7C,IAAK,CAAEZ,KAAK,EAAG;MACfL,MAAM,GAAIK,KAAK,EAAEY,KAAM,CAAC;MACxBN,QAAQ,CAAEN,KAAM,CAAC;IAClB,CAAC;IACDJ,SAAS,EAAEA,CAAA,KAAM;MAChBA,SAAS,GAAG,CAAC;MACbF,QAAQ,GAAIW,KAAM,CAAC;IACpB;EACD,CAAE,CAAC;;EAEH;EACA,MAAM;IAAEH,CAAC;IAAEC;EAAE,CAAC,GAAGQ,UAAU,GAAGN,KAAK,GAAGJ,SAAS;EAE/C,MAAMY,WAAW,GAAGzC,MAAM,CAAoB,IAAK,CAAC;EACpD,MAAM,CAAE+C,MAAM,EAAEC,SAAS,CAAE,GAAG/C,QAAQ,CAAEY,cAAe,CAAC;EACxD,MAAMoC,eAAe,GAAGjD,MAAM,CAAE,MAAM;IACrC,IAAK,CAAEyC,WAAW,CAACC,OAAO,EAAG;IAE7B,MAAM;MAAEQ,WAAW,EAAEC,KAAK;MAAEC,YAAY,EAAEC;IAAO,CAAC,GACjDZ,WAAW,CAACC,OAAO;IACpB;IACA;IACA;IACAM,SAAS,CACRG,KAAK,GAAG,CAAC,IAAIE,MAAM,GAAG,CAAC,GAAG;MAAEF,KAAK;MAAEE;IAAO,CAAC,GAAG;MAAE,GAAGxC;IAAe,CACnE,CAAC;EACF,CAAE,CAAC;EAEHd,SAAS,CAAE,MAAM;IAChB,MAAMuD,YAAY,GAAGL,eAAe,CAACP,OAAO;IAC5C,IAAK,CAAED,WAAW,CAACC,OAAO,EAAG;IAE7B,MAAM;MAAEa;IAAY,CAAC,GAAGd,WAAW,CAACC,OAAO,CAACc,aAAa;IACzDD,WAAW,EAAEE,gBAAgB,CAAE,QAAQ,EAAEH,YAAa,CAAC;IACvD,OAAO,MAAMC,WAAW,EAAEG,mBAAmB,CAAE,QAAQ,EAAEJ,YAAa,CAAC;EACxE,CAAC,EAAE,EAAG,CAAC;;EAEP;EACAjD,yBAAyB,CAAE,MAAM,KAAK4C,eAAe,CAACP,OAAO,CAAC,CAAC,EAAE,EAAG,CAAC;;EAErE;EACA;EACA,MAAME,sBAAsB,GAAGA,CAAE;IAChCe,OAAO;IACPC,OAAO;IACPC;EAKD,CAAC,KAAM;IACN,IAAK,CAAEpB,WAAW,CAACC,OAAO,EAAG;IAE7B,MAAM;MAAEoB,GAAG;MAAEC;IAAK,CAAC,GAAGtB,WAAW,CAACC,OAAO,CAACsB,qBAAqB,CAAC,CAAC;IACjE,IAAIC,KAAK,GAAG,CAAEN,OAAO,GAAGI,IAAI,IAAKhB,MAAM,CAACI,KAAK;IAC7C,IAAIe,KAAK,GAAG,CAAEN,OAAO,GAAGE,GAAG,IAAKf,MAAM,CAACM,MAAM;IAC7C;IACA,IAAKQ,QAAQ,EAAG;MACfI,KAAK,GAAGE,IAAI,CAACC,KAAK,CAAEH,KAAK,GAAG,GAAI,CAAC,GAAG,GAAG;MACvCC,KAAK,GAAGC,IAAI,CAACC,KAAK,CAAEF,KAAK,GAAG,GAAI,CAAC,GAAG,GAAG;IACxC;IACA,OAAOG,aAAa,CAAE;MAAEvC,CAAC,EAAEmC,KAAK;MAAElC,CAAC,EAAEmC;IAAM,CAAE,CAAC;EAC/C,CAAC;EAED,MAAMG,aAAa,GAAKzC,KAAqB,IAAsB;IAAA,IAAA0C,aAAA;IAClE,MAAMC,aAAa,IAAAD,aAAA,GAAG5C,YAAY,GAAIE,KAAM,CAAC,cAAA0C,aAAA,cAAAA,aAAA,GAAI1C,KAAK;IACtD2C,aAAa,CAACzC,CAAC,GAAGqC,IAAI,CAACK,GAAG,CAAE,CAAC,EAAEL,IAAI,CAACM,GAAG,CAAEF,aAAa,CAACzC,CAAC,EAAE,CAAE,CAAE,CAAC;IAC/DyC,aAAa,CAACxC,CAAC,GAAGoC,IAAI,CAACK,GAAG,CAAE,CAAC,EAAEL,IAAI,CAACM,GAAG,CAAEF,aAAa,CAACxC,CAAC,EAAE,CAAE,CAAE,CAAC;IAC/D,MAAM2C,uBAAuB,GAAKC,CAAS,IAC1CR,IAAI,CAACC,KAAK,CAAEO,CAAC,GAAG,GAAI,CAAC,GAAG,GAAG;IAE5B,OAAO;MACN7C,CAAC,EAAE4C,uBAAuB,CAAEH,aAAa,CAACzC,CAAE,CAAC;MAC7CC,CAAC,EAAE2C,uBAAuB,CAAEH,aAAa,CAACxC,CAAE;IAC7C,CAAC;EACF,CAAC;EAED,MAAM6C,YAAoD,GAAKpC,KAAK,IAAM;IACzE,MAAM;MAAEqC,IAAI;MAAEhB;IAAS,CAAC,GAAGrB,KAAK;IAChC,IACC,CAAE,CAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,CAAE,CAACsC,QAAQ,CAC/DD,IACD,CAAC,EAED;IAEDrC,KAAK,CAACM,cAAc,CAAC,CAAC;IACtB,MAAMlB,KAAK,GAAG;MAAEE,CAAC;MAAEC;IAAE,CAAC;IACtB,MAAMgD,IAAI,GAAGlB,QAAQ,GAAG,GAAG,GAAG,IAAI;IAClC,MAAMmB,KAAK,GACVH,IAAI,KAAK,SAAS,IAAIA,IAAI,KAAK,WAAW,GAAG,CAAC,CAAC,GAAGE,IAAI,GAAGA,IAAI;IAC9D,MAAME,IAAI,GAAGJ,IAAI,KAAK,SAAS,IAAIA,IAAI,KAAK,WAAW,GAAG,GAAG,GAAG,GAAG;IACnEjD,KAAK,CAAEqD,IAAI,CAAE,GAAGrD,KAAK,CAAEqD,IAAI,CAAE,GAAGD,KAAK;IACrC1D,QAAQ,GAAI+C,aAAa,CAAEzC,KAAM,CAAE,CAAC;EACrC,CAAC;EAED,MAAMsD,kBAAkB,GAAG;IAC1BnB,IAAI,EAAEjC,CAAC,GAAGiB,MAAM,CAACI,KAAK;IACtBW,GAAG,EAAE/B,CAAC,GAAGgB,MAAM,CAACM;EACjB,CAAC;EAED,MAAM8B,OAAO,GAAGtF,UAAU,CACzB,uCAAuC,EACvCsB,SACD,CAAC;EAED,MAAMiE,UAAU,GAAGhF,aAAa,CAAEY,gBAAiB,CAAC;EACpD,MAAMqE,EAAE,GAAI,wCAAwCD,UAAY,EAAC;EAEjEtE,eAAe,CAAE,MAAM;IACtBsB,kBAAkB,CAAE,IAAK,CAAC;IAC1B,MAAMkD,OAAO,GAAGC,MAAM,CAACC,UAAU,CAAE,MAAM;MACxCpD,kBAAkB,CAAE,KAAM,CAAC;IAC5B,CAAC,EAAErB,oBAAqB,CAAC;IAEzB,OAAO,MAAMwE,MAAM,CAACE,YAAY,CAAEH,OAAQ,CAAC;EAC5C,CAAC,EAAE,CAAExD,CAAC,EAAEC,CAAC,CAAG,CAAC;EAEb,OACC2D,aAAA,CAACpF,WAAW;IAAA,GACN0B,SAAS;IACdf,uBAAuB,EAAGA,uBAAyB;IACnDI,KAAK,EAAGA,KAAO;IACfgE,EAAE,EAAGA,EAAI;IACTjE,IAAI,EAAGA,IAAM;IACbD,SAAS,EAAGgE;EAAS,GAErBO,aAAA,CAAC/E,YAAY;IAACQ,SAAS,EAAC;EAAuC,GAC9DuE,aAAA,CAAC9E,cAAc;IACdO,SAAS,EAAC,+BAA+B;IACzCwE,SAAS,EAAGf,YAAc;IAC1BgB,WAAW,EAAGvD,SAAW;IACzBwD,MAAM,EAAGA,CAAA,KAAM;MACd,IAAKtD,UAAU,EAAGD,OAAO,CAAC,CAAC;IAC5B,CAAG;IACHwD,GAAG,EAAGrD,WAAa;IACnBsD,IAAI,EAAC,QAAQ;IACbC,QAAQ,EAAG,CAAC;EAAG,GAEfN,aAAA,CAACjF,IAAI;IAACsC,MAAM,EAAGA,MAAQ;IAACkD,WAAW,EAAG9D;EAAiB,CAAE,CAAC,EAC1DuD,aAAA,CAAChF,KAAK;IACLwF,GAAG,EAAGpG,EAAE,CAAE,eAAgB,CAAG;IAC7BoB,QAAQ,EAAGA,QAAU;IACrBiF,MAAM,EAAGlD,eAAe,CAACP,OAAS;IAClC0D,GAAG,EAAGzE;EAAK,CACX,CAAC,EACF+D,aAAA,CAAClF,UAAU;IAAA,GACL0E,kBAAkB;IACvB3C,UAAU,EAAGA;EAAY,CACzB,CACc,CACH,CAAC,EACfmD,aAAA,CAACnF,QAAQ;IACRU,uBAAuB,EAAGA,uBAAyB;IACnDoF,WAAW,EAAG,CAAC,CAAEjF,IAAM;IACvBa,KAAK,EAAG;MAAEH,CAAC;MAAEC;IAAE,CAAG;IAClBT,QAAQ,EAAKM,KAAK,IAAM;MACvBN,QAAQ,GAAI+C,aAAa,CAAEzC,KAAM,CAAE,CAAC;IACrC;EAAG,CACH,CACW,CAAC;AAEhB;AAEA,eAAeZ,gBAAgB"}