@wordpress/components 19.0.0 → 19.0.4

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

@@ -20,11 +20,12 @@ var _style = _interopRequireDefault(require("./style.scss"));
 /**
  * Internal dependencies
  */
-function FocalPoint({
-  height,
-  style,
-  width
-}) {
+function FocalPoint(_ref) {
+  let {
+    height,
+    style,
+    width
+  } = _ref;
   return (0, _element.createElement)(_primitives.SVG, {
     height: height,
     style: style,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/focal-point-picker/focal-point.native.js"],"names":["FocalPoint","height","style","width","styles","focalPointIconPathOutline","focalPointIconPathFill"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;AAGe,SAASA,UAAT,CAAqB;AAAEC,EAAAA,MAAF;AAAUC,EAAAA,KAAV;AAAiBC,EAAAA;AAAjB,CAArB,EAAgD;AAC9D,SACC,4BAAC,eAAD;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,4BAAC,gBAAD;AACC,IAAA,KAAK,EAAGC,eAAOC,yBADhB;AAEC,IAAA,CAAC,EAAC;AAFH,IAPD,EAWC,4BAAC,gBAAD;AACC,IAAA,KAAK,EAAGD,eAAOE,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,"sources":["@wordpress/components/src/focal-point-picker/focal-point.native.js"],"names":["FocalPoint","height","style","width","styles","focalPointIconPathOutline","focalPointIconPathFill"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;AAGe,SAASA,UAAT,OAAgD;AAAA,MAA3B;AAAEC,IAAAA,MAAF;AAAUC,IAAAA,KAAV;AAAiBC,IAAAA;AAAjB,GAA2B;AAC9D,SACC,4BAAC,eAAD;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,4BAAC,gBAAD;AACC,IAAA,KAAK,EAAGC,eAAOC,yBADhB;AAEC,IAAA,CAAC,EAAC;AAFH,IAPD,EAWC,4BAAC,gBAAD;AACC,IAAA,KAAK,EAAGD,eAAOE,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"]}

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

@@ -27,11 +27,12 @@ const {
   setTimeout
 } = typeof window !== 'undefined' ? window : {};
 
-function FocalPointPickerGrid({
-  bounds = {},
-  value,
-  ...props
-}) {
+function FocalPointPickerGrid(_ref) {
+  let {
+    bounds = {},
+    value,
+    ...props
+  } = _ref;
   const animationProps = useRevealAnimation(value);
   const style = {
     width: bounds.width,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/focal-point-picker/grid.js"],"names":["clearTimeout","setTimeout","window","FocalPointPickerGrid","bounds","value","props","animationProps","useRevealAnimation","style","width","height","top","left","isActive","setIsActive","timeout"],"mappings":";;;;;;;;;AAGA;;;;AAKA;;AAKA;;AAbA;AACA;AACA;;AAGA;AACA;AACA;AAQA,MAAM;AAAEA,EAAAA,YAAF;AAAgBC,EAAAA;AAAhB,IACL,OAAOC,MAAP,KAAkB,WAAlB,GAAgCA,MAAhC,GAAyC,EAD1C;;AAGe,SAASC,oBAAT,CAA+B;AAC7CC,EAAAA,MAAM,GAAG,EADoC;AAE7CC,EAAAA,KAF6C;AAG7C,KAAGC;AAH0C,CAA/B,EAIX;AACH,QAAMC,cAAc,GAAGC,kBAAkB,CAAEH,KAAF,CAAzC;AACA,QAAMI,KAAK,GAAG;AACbC,IAAAA,KAAK,EAAEN,MAAM,CAACM,KADD;AAEbC,IAAAA,MAAM,EAAEP,MAAM,CAACO;AAFF,GAAd;AAKA,SACC,4BAAC,+BAAD,6BACML,KADN,EAEMC,cAFN;AAGC,IAAA,SAAS,EAAC,qCAHX;AAIC,IAAA,KAAK,EAAGE;AAJT,MAMC,4BAAC,gCAAD;AAAW,IAAA,KAAK,EAAG;AAAEG,MAAAA,GAAG,EAAE;AAAP;AAAnB,IAND,EAOC,4BAAC,gCAAD;AAAW,IAAA,KAAK,EAAG;AAAEA,MAAAA,GAAG,EAAE;AAAP;AAAnB,IAPD,EAQC,4BAAC,gCAAD;AAAW,IAAA,KAAK,EAAG;AAAEC,MAAAA,IAAI,EAAE;AAAR;AAAnB,IARD,EASC,4BAAC,gCAAD;AAAW,IAAA,KAAK,EAAG;AAAEA,MAAAA,IAAI,EAAE;AAAR;AAAnB,IATD,CADD;AAaA;AAED;AACA;AACA;AACA;AACA;;;AACA,SAASL,kBAAT,CAA6BH,KAA7B,EAAqC;AACpC,QAAM,CAAES,QAAF,EAAYC,WAAZ,IAA4B,uBAAU,KAAV,CAAlC;AAEA,8BAAiB,MAAM;AACtBA,IAAAA,WAAW,CAAE,IAAF,CAAX;AACA,UAAMC,OAAO,GAAGf,UAAU,CAAE,MAAM;AACjCc,MAAAA,WAAW,CAAE,KAAF,CAAX;AACA,KAFyB,EAEvB,GAFuB,CAA1B;AAIA,WAAO,MAAMf,YAAY,CAAEgB,OAAF,CAAzB;AACA,GAPD,EAOG,CAAEX,KAAF,CAPH;AASA,SAAO;AACNS,IAAAA;AADM,GAAP;AAGA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport {\n\tGridView,\n\tGridLineX,\n\tGridLineY,\n} from './styles/focal-point-picker-style';\nimport { useUpdateEffect } from '../utils/hooks';\n\nconst { clearTimeout, setTimeout } =\n\ttypeof window !== 'undefined' ? window : {};\n\nexport default function FocalPointPickerGrid( {\n\tbounds = {},\n\tvalue,\n\t...props\n} ) {\n\tconst animationProps = useRevealAnimation( value );\n\tconst style = {\n\t\twidth: bounds.width,\n\t\theight: bounds.height,\n\t};\n\n\treturn (\n\t\t<GridView\n\t\t\t{ ...props }\n\t\t\t{ ...animationProps }\n\t\t\tclassName=\"components-focal-point-picker__grid\"\n\t\t\tstyle={ style }\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\n/**\n * Custom hook that renders the \"flash\" animation whenever the value changes.\n *\n * @param {string} value Value of (box) side.\n */\nfunction useRevealAnimation( value ) {\n\tconst [ isActive, setIsActive ] = useState( false );\n\n\tuseUpdateEffect( () => {\n\t\tsetIsActive( true );\n\t\tconst timeout = setTimeout( () => {\n\t\t\tsetIsActive( false );\n\t\t}, 600 );\n\n\t\treturn () => clearTimeout( timeout );\n\t}, [ value ] );\n\n\treturn {\n\t\tisActive,\n\t};\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/focal-point-picker/grid.js"],"names":["clearTimeout","setTimeout","window","FocalPointPickerGrid","bounds","value","props","animationProps","useRevealAnimation","style","width","height","top","left","isActive","setIsActive","timeout"],"mappings":";;;;;;;;;AAGA;;;;AAKA;;AAKA;;AAbA;AACA;AACA;;AAGA;AACA;AACA;AAQA,MAAM;AAAEA,EAAAA,YAAF;AAAgBC,EAAAA;AAAhB,IACL,OAAOC,MAAP,KAAkB,WAAlB,GAAgCA,MAAhC,GAAyC,EAD1C;;AAGe,SAASC,oBAAT,OAIX;AAAA,MAJ0C;AAC7CC,IAAAA,MAAM,GAAG,EADoC;AAE7CC,IAAAA,KAF6C;AAG7C,OAAGC;AAH0C,GAI1C;AACH,QAAMC,cAAc,GAAGC,kBAAkB,CAAEH,KAAF,CAAzC;AACA,QAAMI,KAAK,GAAG;AACbC,IAAAA,KAAK,EAAEN,MAAM,CAACM,KADD;AAEbC,IAAAA,MAAM,EAAEP,MAAM,CAACO;AAFF,GAAd;AAKA,SACC,4BAAC,+BAAD,6BACML,KADN,EAEMC,cAFN;AAGC,IAAA,SAAS,EAAC,qCAHX;AAIC,IAAA,KAAK,EAAGE;AAJT,MAMC,4BAAC,gCAAD;AAAW,IAAA,KAAK,EAAG;AAAEG,MAAAA,GAAG,EAAE;AAAP;AAAnB,IAND,EAOC,4BAAC,gCAAD;AAAW,IAAA,KAAK,EAAG;AAAEA,MAAAA,GAAG,EAAE;AAAP;AAAnB,IAPD,EAQC,4BAAC,gCAAD;AAAW,IAAA,KAAK,EAAG;AAAEC,MAAAA,IAAI,EAAE;AAAR;AAAnB,IARD,EASC,4BAAC,gCAAD;AAAW,IAAA,KAAK,EAAG;AAAEA,MAAAA,IAAI,EAAE;AAAR;AAAnB,IATD,CADD;AAaA;AAED;AACA;AACA;AACA;AACA;;;AACA,SAASL,kBAAT,CAA6BH,KAA7B,EAAqC;AACpC,QAAM,CAAES,QAAF,EAAYC,WAAZ,IAA4B,uBAAU,KAAV,CAAlC;AAEA,8BAAiB,MAAM;AACtBA,IAAAA,WAAW,CAAE,IAAF,CAAX;AACA,UAAMC,OAAO,GAAGf,UAAU,CAAE,MAAM;AACjCc,MAAAA,WAAW,CAAE,KAAF,CAAX;AACA,KAFyB,EAEvB,GAFuB,CAA1B;AAIA,WAAO,MAAMf,YAAY,CAAEgB,OAAF,CAAzB;AACA,GAPD,EAOG,CAAEX,KAAF,CAPH;AASA,SAAO;AACNS,IAAAA;AADM,GAAP;AAGA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport {\n\tGridView,\n\tGridLineX,\n\tGridLineY,\n} from './styles/focal-point-picker-style';\nimport { useUpdateEffect } from '../utils/hooks';\n\nconst { clearTimeout, setTimeout } =\n\ttypeof window !== 'undefined' ? window : {};\n\nexport default function FocalPointPickerGrid( {\n\tbounds = {},\n\tvalue,\n\t...props\n} ) {\n\tconst animationProps = useRevealAnimation( value );\n\tconst style = {\n\t\twidth: bounds.width,\n\t\theight: bounds.height,\n\t};\n\n\treturn (\n\t\t<GridView\n\t\t\t{ ...props }\n\t\t\t{ ...animationProps }\n\t\t\tclassName=\"components-focal-point-picker__grid\"\n\t\t\tstyle={ style }\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\n/**\n * Custom hook that renders the \"flash\" animation whenever the value changes.\n *\n * @param {string} value Value of (box) side.\n */\nfunction useRevealAnimation( value ) {\n\tconst [ isActive, setIsActive ] = useState( false );\n\n\tuseUpdateEffect( () => {\n\t\tsetIsActive( true );\n\t\tconst timeout = setTimeout( () => {\n\t\t\tsetIsActive( false );\n\t\t}, 600 );\n\n\t\treturn () => clearTimeout( timeout );\n\t}, [ value ] );\n\n\treturn {\n\t\tisActive,\n\t};\n}\n"]}

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

@@ -160,7 +160,8 @@ class FocalPointPicker extends _element.Component {
     return bounds;
   }
 
-  updateValue(nextValue = {}) {
+  updateValue() {
+    let nextValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       x,
       y

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/focal-point-picker/index.js"],"names":["FocalPointPicker","Component","constructor","props","arguments","state","isDragging","bounds","INITIAL_BOUNDS","percentages","value","containerRef","mediaRef","onMouseDown","startDrag","bind","onMouseUp","stopDrag","onKeyDown","onMouseMove","doDrag","ifDraggingStop","onChangeAtControls","updateValue","onChange","updateBounds","componentDidMount","defaultView","current","ownerDocument","addEventListener","componentDidUpdate","prevProps","url","x","y","setState","componentWillUnmount","removeEventListener","calculateBounds","clientWidth","clientHeight","dimensions","width","height","pickerDimensions","widthRatio","heightRatio","right","top","bottom","left","nextValue","nextPercentage","parseFloat","toFixed","event","persist","focus","getValueFromPoint","pageX","pageY","shiftKey","onDragStart","onDragEnd","keyCode","UP","DOWN","LEFT","RIGHT","includes","preventDefault","next","step","delta","axis","onDrag","point","byTenths","relativePoint","Math","max","min","nextX","nextY","containerNode","getBoundingClientRect","document","body","scrollTop","iconCoordinates","undefined","render","autoPlay","className","help","instanceId","label","classes","id","defaultProps"],"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 { Component, createRef } from '@wordpress/element';\nimport { withInstanceId } from '@wordpress/compose';\nimport { UP, DOWN, LEFT, RIGHT } from '@wordpress/keycodes';\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 { roundClamp } from '../utils/math';\nimport { INITIAL_BOUNDS } from './utils';\n\nexport class FocalPointPicker extends Component {\n\tconstructor( props ) {\n\t\tsuper( ...arguments );\n\n\t\tthis.state = {\n\t\t\tisDragging: false,\n\t\t\tbounds: INITIAL_BOUNDS,\n\t\t\tpercentages: props.value,\n\t\t};\n\n\t\tthis.containerRef = createRef();\n\t\tthis.mediaRef = createRef();\n\n\t\tthis.onMouseDown = this.startDrag.bind( this );\n\t\tthis.onMouseUp = this.stopDrag.bind( this );\n\t\tthis.onKeyDown = this.onKeyDown.bind( this );\n\t\tthis.onMouseMove = this.doDrag.bind( this );\n\t\tthis.ifDraggingStop = () => {\n\t\t\tif ( this.state.isDragging ) {\n\t\t\t\tthis.stopDrag();\n\t\t\t}\n\t\t};\n\t\tthis.onChangeAtControls = ( value ) => {\n\t\t\tthis.updateValue( value );\n\t\t\tthis.props.onChange( value );\n\t\t};\n\n\t\tthis.updateBounds = this.updateBounds.bind( this );\n\t\tthis.updateValue = this.updateValue.bind( this );\n\t}\n\tcomponentDidMount() {\n\t\tconst { defaultView } = this.containerRef.current.ownerDocument;\n\t\tdefaultView.addEventListener( 'resize', this.updateBounds );\n\n\t\t/*\n\t\t * Set initial bound values.\n\t\t *\n\t\t * This is necessary for Safari:\n\t\t * https://github.com/WordPress/gutenberg/issues/25814\n\t\t */\n\t\tthis.updateBounds();\n\t}\n\tcomponentDidUpdate( prevProps ) {\n\t\tif ( prevProps.url !== this.props.url ) {\n\t\t\tthis.ifDraggingStop();\n\t\t}\n\t\t/*\n\t\t * Handles cases where the incoming value changes.\n\t\t * An example is the values resetting based on an UNDO action.\n\t\t */\n\t\tconst {\n\t\t\tisDragging,\n\t\t\tpercentages: { x, y },\n\t\t} = this.state;\n\t\tconst { value } = this.props;\n\t\tif ( ! isDragging && ( value.x !== x || value.y !== y ) ) {\n\t\t\tthis.setState( { percentages: this.props.value } );\n\t\t}\n\t}\n\tcomponentWillUnmount() {\n\t\tconst { defaultView } = this.containerRef.current.ownerDocument;\n\t\tdefaultView.removeEventListener( 'resize', this.updateBounds );\n\t\tthis.ifDraggingStop();\n\t}\n\tcalculateBounds() {\n\t\tconst bounds = INITIAL_BOUNDS;\n\n\t\tif ( ! this.mediaRef.current ) {\n\t\t\treturn bounds;\n\t\t}\n\n\t\t// Prevent division by zero when updateBounds runs in componentDidMount\n\t\tif (\n\t\t\tthis.mediaRef.current.clientWidth === 0 ||\n\t\t\tthis.mediaRef.current.clientHeight === 0\n\t\t) {\n\t\t\treturn bounds;\n\t\t}\n\n\t\tconst dimensions = {\n\t\t\twidth: this.mediaRef.current.clientWidth,\n\t\t\theight: this.mediaRef.current.clientHeight,\n\t\t};\n\n\t\tconst pickerDimensions = this.pickerDimensions();\n\n\t\tconst widthRatio = pickerDimensions.width / dimensions.width;\n\t\tconst heightRatio = pickerDimensions.height / dimensions.height;\n\n\t\tif ( heightRatio >= widthRatio ) {\n\t\t\tbounds.width = bounds.right = pickerDimensions.width;\n\t\t\tbounds.height = dimensions.height * widthRatio;\n\t\t\tbounds.top = ( pickerDimensions.height - bounds.height ) / 2;\n\t\t\tbounds.bottom = bounds.top + bounds.height;\n\t\t} else {\n\t\t\tbounds.height = bounds.bottom = pickerDimensions.height;\n\t\t\tbounds.width = dimensions.width * heightRatio;\n\t\t\tbounds.left = ( pickerDimensions.width - bounds.width ) / 2;\n\t\t\tbounds.right = bounds.left + bounds.width;\n\t\t}\n\t\treturn bounds;\n\t}\n\tupdateValue( nextValue = {} ) {\n\t\tconst { x, y } = nextValue;\n\n\t\tconst nextPercentage = {\n\t\t\tx: parseFloat( x ).toFixed( 2 ),\n\t\t\ty: parseFloat( y ).toFixed( 2 ),\n\t\t};\n\n\t\tthis.setState( { percentages: nextPercentage } );\n\t}\n\tupdateBounds() {\n\t\tthis.setState( {\n\t\t\tbounds: this.calculateBounds(),\n\t\t} );\n\t}\n\tstartDrag( event ) {\n\t\tevent.persist();\n\t\tthis.containerRef.current.focus();\n\t\tthis.setState( { isDragging: true } );\n\t\tconst { ownerDocument } = this.containerRef.current;\n\t\townerDocument.addEventListener( 'mouseup', this.onMouseUp );\n\t\townerDocument.addEventListener( 'mousemove', this.onMouseMove );\n\t\tconst value = this.getValueFromPoint(\n\t\t\t{ x: event.pageX, y: event.pageY },\n\t\t\tevent.shiftKey\n\t\t);\n\t\tthis.updateValue( value );\n\t\tthis.props.onDragStart?.( value, event );\n\t}\n\tstopDrag( event ) {\n\t\tconst { ownerDocument } = this.containerRef.current;\n\t\townerDocument.removeEventListener( 'mouseup', this.onMouseUp );\n\t\townerDocument.removeEventListener( 'mousemove', this.onMouseMove );\n\t\tthis.setState( { isDragging: false }, () => {\n\t\t\tthis.props.onChange( this.state.percentages );\n\t\t} );\n\t\tthis.props.onDragEnd?.( event );\n\t}\n\tonKeyDown( event ) {\n\t\tconst { keyCode, shiftKey } = event;\n\t\tif ( ! [ UP, DOWN, LEFT, RIGHT ].includes( keyCode ) ) return;\n\n\t\tevent.preventDefault();\n\n\t\tconst next = { ...this.state.percentages };\n\t\tconst step = shiftKey ? 0.1 : 0.01;\n\t\tconst delta = keyCode === UP || keyCode === LEFT ? -1 * step : step;\n\t\tconst axis = keyCode === UP || keyCode === DOWN ? 'y' : 'x';\n\t\tconst value = parseFloat( next[ axis ] ) + delta;\n\n\t\tnext[ axis ] = roundClamp( value, 0, 1, step );\n\n\t\tthis.updateValue( next );\n\t\tthis.props.onChange( next );\n\t}\n\tdoDrag( event ) {\n\t\t// Prevents text-selection when dragging.\n\t\tevent.preventDefault();\n\t\tconst value = this.getValueFromPoint(\n\t\t\t{ x: event.pageX, y: event.pageY },\n\t\t\tevent.shiftKey\n\t\t);\n\t\tthis.updateValue( value );\n\t\tthis.props.onDrag?.( value, event );\n\t}\n\tgetValueFromPoint( point, byTenths ) {\n\t\tconst { bounds } = this.state;\n\n\t\tconst pickerDimensions = this.pickerDimensions();\n\t\tconst relativePoint = {\n\t\t\tleft: point.x - pickerDimensions.left,\n\t\t\ttop: point.y - pickerDimensions.top,\n\t\t};\n\n\t\tconst left = Math.max(\n\t\t\tbounds.left,\n\t\t\tMath.min( relativePoint.left, bounds.right )\n\t\t);\n\t\tconst top = Math.max(\n\t\t\tbounds.top,\n\t\t\tMath.min( relativePoint.top, bounds.bottom )\n\t\t);\n\n\t\tlet nextX =\n\t\t\t( left - bounds.left ) /\n\t\t\t( pickerDimensions.width - bounds.left * 2 );\n\t\tlet nextY =\n\t\t\t( top - bounds.top ) / ( pickerDimensions.height - bounds.top * 2 );\n\n\t\t// Enables holding shift to jump values by 10%\n\t\tconst step = byTenths ? 0.1 : 0.01;\n\n\t\tnextX = roundClamp( nextX, 0, 1, step );\n\t\tnextY = roundClamp( nextY, 0, 1, step );\n\n\t\treturn { x: nextX, y: nextY };\n\t}\n\tpickerDimensions() {\n\t\tconst containerNode = this.containerRef.current;\n\n\t\tif ( ! containerNode ) {\n\t\t\treturn {\n\t\t\t\twidth: 0,\n\t\t\t\theight: 0,\n\t\t\t\tleft: 0,\n\t\t\t\ttop: 0,\n\t\t\t};\n\t\t}\n\n\t\tconst { clientHeight, clientWidth } = containerNode;\n\t\tconst { top, left } = containerNode.getBoundingClientRect();\n\n\t\treturn {\n\t\t\twidth: clientWidth,\n\t\t\theight: clientHeight,\n\t\t\ttop: top + document.body.scrollTop,\n\t\t\tleft,\n\t\t};\n\t}\n\ticonCoordinates() {\n\t\tconst {\n\t\t\tbounds,\n\t\t\tpercentages: { x, y },\n\t\t} = this.state;\n\n\t\tif ( bounds.left === undefined || bounds.top === undefined ) {\n\t\t\treturn {\n\t\t\t\tleft: '50%',\n\t\t\t\ttop: '50%',\n\t\t\t};\n\t\t}\n\n\t\tconst { width, height } = this.pickerDimensions();\n\t\treturn {\n\t\t\tleft: x * ( width - bounds.left * 2 ) + bounds.left,\n\t\t\ttop: y * ( height - bounds.top * 2 ) + bounds.top,\n\t\t};\n\t}\n\trender() {\n\t\tconst {\n\t\t\tautoPlay,\n\t\t\tclassName,\n\t\t\thelp,\n\t\t\tinstanceId,\n\t\t\tlabel,\n\t\t\turl,\n\t\t} = this.props;\n\t\tconst { bounds, isDragging, percentages } = this.state;\n\t\tconst iconCoordinates = this.iconCoordinates();\n\n\t\tconst classes = classnames(\n\t\t\t'components-focal-point-picker-control',\n\t\t\tclassName\n\t\t);\n\n\t\tconst id = `inspector-focal-point-picker-control-${ instanceId }`;\n\n\t\treturn (\n\t\t\t<BaseControl\n\t\t\t\tlabel={ label }\n\t\t\t\tid={ id }\n\t\t\t\thelp={ help }\n\t\t\t\tclassName={ classes }\n\t\t\t>\n\t\t\t\t<MediaWrapper className=\"components-focal-point-picker-wrapper\">\n\t\t\t\t\t<MediaContainer\n\t\t\t\t\t\tclassName=\"components-focal-point-picker\"\n\t\t\t\t\t\tonKeyDown={ this.onKeyDown }\n\t\t\t\t\t\tonMouseDown={ this.onMouseDown }\n\t\t\t\t\t\tonBlur={ this.ifDraggingStop }\n\t\t\t\t\t\tref={ this.containerRef }\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<Grid\n\t\t\t\t\t\t\tbounds={ bounds }\n\t\t\t\t\t\t\tvalue={ percentages.x + percentages.y }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Media\n\t\t\t\t\t\t\talt={ __( 'Media preview' ) }\n\t\t\t\t\t\t\tautoPlay={ autoPlay }\n\t\t\t\t\t\t\tmediaRef={ this.mediaRef }\n\t\t\t\t\t\t\tonLoad={ this.updateBounds }\n\t\t\t\t\t\t\tsrc={ url }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<FocalPoint\n\t\t\t\t\t\t\tcoordinates={ iconCoordinates }\n\t\t\t\t\t\t\tisDragging={ isDragging }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</MediaContainer>\n\t\t\t\t</MediaWrapper>\n\t\t\t\t<Controls\n\t\t\t\t\tpercentages={ percentages }\n\t\t\t\t\tonChange={ this.onChangeAtControls }\n\t\t\t\t/>\n\t\t\t</BaseControl>\n\t\t);\n\t}\n}\n\nFocalPointPicker.defaultProps = {\n\tautoPlay: true,\n\tvalue: {\n\t\tx: 0.5,\n\t\ty: 0.5,\n\t},\n\turl: null,\n};\n\nexport default withInstanceId( FocalPointPicker );\n"]}
+{"version":3,"sources":["@wordpress/components/src/focal-point-picker/index.js"],"names":["FocalPointPicker","Component","constructor","props","arguments","state","isDragging","bounds","INITIAL_BOUNDS","percentages","value","containerRef","mediaRef","onMouseDown","startDrag","bind","onMouseUp","stopDrag","onKeyDown","onMouseMove","doDrag","ifDraggingStop","onChangeAtControls","updateValue","onChange","updateBounds","componentDidMount","defaultView","current","ownerDocument","addEventListener","componentDidUpdate","prevProps","url","x","y","setState","componentWillUnmount","removeEventListener","calculateBounds","clientWidth","clientHeight","dimensions","width","height","pickerDimensions","widthRatio","heightRatio","right","top","bottom","left","nextValue","nextPercentage","parseFloat","toFixed","event","persist","focus","getValueFromPoint","pageX","pageY","shiftKey","onDragStart","onDragEnd","keyCode","UP","DOWN","LEFT","RIGHT","includes","preventDefault","next","step","delta","axis","onDrag","point","byTenths","relativePoint","Math","max","min","nextX","nextY","containerNode","getBoundingClientRect","document","body","scrollTop","iconCoordinates","undefined","render","autoPlay","className","help","instanceId","label","classes","id","defaultProps"],"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 { Component, createRef } from '@wordpress/element';\nimport { withInstanceId } from '@wordpress/compose';\nimport { UP, DOWN, LEFT, RIGHT } from '@wordpress/keycodes';\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 { roundClamp } from '../utils/math';\nimport { INITIAL_BOUNDS } from './utils';\n\nexport class FocalPointPicker extends Component {\n\tconstructor( props ) {\n\t\tsuper( ...arguments );\n\n\t\tthis.state = {\n\t\t\tisDragging: false,\n\t\t\tbounds: INITIAL_BOUNDS,\n\t\t\tpercentages: props.value,\n\t\t};\n\n\t\tthis.containerRef = createRef();\n\t\tthis.mediaRef = createRef();\n\n\t\tthis.onMouseDown = this.startDrag.bind( this );\n\t\tthis.onMouseUp = this.stopDrag.bind( this );\n\t\tthis.onKeyDown = this.onKeyDown.bind( this );\n\t\tthis.onMouseMove = this.doDrag.bind( this );\n\t\tthis.ifDraggingStop = () => {\n\t\t\tif ( this.state.isDragging ) {\n\t\t\t\tthis.stopDrag();\n\t\t\t}\n\t\t};\n\t\tthis.onChangeAtControls = ( value ) => {\n\t\t\tthis.updateValue( value );\n\t\t\tthis.props.onChange( value );\n\t\t};\n\n\t\tthis.updateBounds = this.updateBounds.bind( this );\n\t\tthis.updateValue = this.updateValue.bind( this );\n\t}\n\tcomponentDidMount() {\n\t\tconst { defaultView } = this.containerRef.current.ownerDocument;\n\t\tdefaultView.addEventListener( 'resize', this.updateBounds );\n\n\t\t/*\n\t\t * Set initial bound values.\n\t\t *\n\t\t * This is necessary for Safari:\n\t\t * https://github.com/WordPress/gutenberg/issues/25814\n\t\t */\n\t\tthis.updateBounds();\n\t}\n\tcomponentDidUpdate( prevProps ) {\n\t\tif ( prevProps.url !== this.props.url ) {\n\t\t\tthis.ifDraggingStop();\n\t\t}\n\t\t/*\n\t\t * Handles cases where the incoming value changes.\n\t\t * An example is the values resetting based on an UNDO action.\n\t\t */\n\t\tconst {\n\t\t\tisDragging,\n\t\t\tpercentages: { x, y },\n\t\t} = this.state;\n\t\tconst { value } = this.props;\n\t\tif ( ! isDragging && ( value.x !== x || value.y !== y ) ) {\n\t\t\tthis.setState( { percentages: this.props.value } );\n\t\t}\n\t}\n\tcomponentWillUnmount() {\n\t\tconst { defaultView } = this.containerRef.current.ownerDocument;\n\t\tdefaultView.removeEventListener( 'resize', this.updateBounds );\n\t\tthis.ifDraggingStop();\n\t}\n\tcalculateBounds() {\n\t\tconst bounds = INITIAL_BOUNDS;\n\n\t\tif ( ! this.mediaRef.current ) {\n\t\t\treturn bounds;\n\t\t}\n\n\t\t// Prevent division by zero when updateBounds runs in componentDidMount\n\t\tif (\n\t\t\tthis.mediaRef.current.clientWidth === 0 ||\n\t\t\tthis.mediaRef.current.clientHeight === 0\n\t\t) {\n\t\t\treturn bounds;\n\t\t}\n\n\t\tconst dimensions = {\n\t\t\twidth: this.mediaRef.current.clientWidth,\n\t\t\theight: this.mediaRef.current.clientHeight,\n\t\t};\n\n\t\tconst pickerDimensions = this.pickerDimensions();\n\n\t\tconst widthRatio = pickerDimensions.width / dimensions.width;\n\t\tconst heightRatio = pickerDimensions.height / dimensions.height;\n\n\t\tif ( heightRatio >= widthRatio ) {\n\t\t\tbounds.width = bounds.right = pickerDimensions.width;\n\t\t\tbounds.height = dimensions.height * widthRatio;\n\t\t\tbounds.top = ( pickerDimensions.height - bounds.height ) / 2;\n\t\t\tbounds.bottom = bounds.top + bounds.height;\n\t\t} else {\n\t\t\tbounds.height = bounds.bottom = pickerDimensions.height;\n\t\t\tbounds.width = dimensions.width * heightRatio;\n\t\t\tbounds.left = ( pickerDimensions.width - bounds.width ) / 2;\n\t\t\tbounds.right = bounds.left + bounds.width;\n\t\t}\n\t\treturn bounds;\n\t}\n\tupdateValue( nextValue = {} ) {\n\t\tconst { x, y } = nextValue;\n\n\t\tconst nextPercentage = {\n\t\t\tx: parseFloat( x ).toFixed( 2 ),\n\t\t\ty: parseFloat( y ).toFixed( 2 ),\n\t\t};\n\n\t\tthis.setState( { percentages: nextPercentage } );\n\t}\n\tupdateBounds() {\n\t\tthis.setState( {\n\t\t\tbounds: this.calculateBounds(),\n\t\t} );\n\t}\n\tstartDrag( event ) {\n\t\tevent.persist();\n\t\tthis.containerRef.current.focus();\n\t\tthis.setState( { isDragging: true } );\n\t\tconst { ownerDocument } = this.containerRef.current;\n\t\townerDocument.addEventListener( 'mouseup', this.onMouseUp );\n\t\townerDocument.addEventListener( 'mousemove', this.onMouseMove );\n\t\tconst value = this.getValueFromPoint(\n\t\t\t{ x: event.pageX, y: event.pageY },\n\t\t\tevent.shiftKey\n\t\t);\n\t\tthis.updateValue( value );\n\t\tthis.props.onDragStart?.( value, event );\n\t}\n\tstopDrag( event ) {\n\t\tconst { ownerDocument } = this.containerRef.current;\n\t\townerDocument.removeEventListener( 'mouseup', this.onMouseUp );\n\t\townerDocument.removeEventListener( 'mousemove', this.onMouseMove );\n\t\tthis.setState( { isDragging: false }, () => {\n\t\t\tthis.props.onChange( this.state.percentages );\n\t\t} );\n\t\tthis.props.onDragEnd?.( event );\n\t}\n\tonKeyDown( event ) {\n\t\tconst { keyCode, shiftKey } = event;\n\t\tif ( ! [ UP, DOWN, LEFT, RIGHT ].includes( keyCode ) ) return;\n\n\t\tevent.preventDefault();\n\n\t\tconst next = { ...this.state.percentages };\n\t\tconst step = shiftKey ? 0.1 : 0.01;\n\t\tconst delta = keyCode === UP || keyCode === LEFT ? -1 * step : step;\n\t\tconst axis = keyCode === UP || keyCode === DOWN ? 'y' : 'x';\n\t\tconst value = parseFloat( next[ axis ] ) + delta;\n\n\t\tnext[ axis ] = roundClamp( value, 0, 1, step );\n\n\t\tthis.updateValue( next );\n\t\tthis.props.onChange( next );\n\t}\n\tdoDrag( event ) {\n\t\t// Prevents text-selection when dragging.\n\t\tevent.preventDefault();\n\t\tconst value = this.getValueFromPoint(\n\t\t\t{ x: event.pageX, y: event.pageY },\n\t\t\tevent.shiftKey\n\t\t);\n\t\tthis.updateValue( value );\n\t\tthis.props.onDrag?.( value, event );\n\t}\n\tgetValueFromPoint( point, byTenths ) {\n\t\tconst { bounds } = this.state;\n\n\t\tconst pickerDimensions = this.pickerDimensions();\n\t\tconst relativePoint = {\n\t\t\tleft: point.x - pickerDimensions.left,\n\t\t\ttop: point.y - pickerDimensions.top,\n\t\t};\n\n\t\tconst left = Math.max(\n\t\t\tbounds.left,\n\t\t\tMath.min( relativePoint.left, bounds.right )\n\t\t);\n\t\tconst top = Math.max(\n\t\t\tbounds.top,\n\t\t\tMath.min( relativePoint.top, bounds.bottom )\n\t\t);\n\n\t\tlet nextX =\n\t\t\t( left - bounds.left ) /\n\t\t\t( pickerDimensions.width - bounds.left * 2 );\n\t\tlet nextY =\n\t\t\t( top - bounds.top ) / ( pickerDimensions.height - bounds.top * 2 );\n\n\t\t// Enables holding shift to jump values by 10%\n\t\tconst step = byTenths ? 0.1 : 0.01;\n\n\t\tnextX = roundClamp( nextX, 0, 1, step );\n\t\tnextY = roundClamp( nextY, 0, 1, step );\n\n\t\treturn { x: nextX, y: nextY };\n\t}\n\tpickerDimensions() {\n\t\tconst containerNode = this.containerRef.current;\n\n\t\tif ( ! containerNode ) {\n\t\t\treturn {\n\t\t\t\twidth: 0,\n\t\t\t\theight: 0,\n\t\t\t\tleft: 0,\n\t\t\t\ttop: 0,\n\t\t\t};\n\t\t}\n\n\t\tconst { clientHeight, clientWidth } = containerNode;\n\t\tconst { top, left } = containerNode.getBoundingClientRect();\n\n\t\treturn {\n\t\t\twidth: clientWidth,\n\t\t\theight: clientHeight,\n\t\t\ttop: top + document.body.scrollTop,\n\t\t\tleft,\n\t\t};\n\t}\n\ticonCoordinates() {\n\t\tconst {\n\t\t\tbounds,\n\t\t\tpercentages: { x, y },\n\t\t} = this.state;\n\n\t\tif ( bounds.left === undefined || bounds.top === undefined ) {\n\t\t\treturn {\n\t\t\t\tleft: '50%',\n\t\t\t\ttop: '50%',\n\t\t\t};\n\t\t}\n\n\t\tconst { width, height } = this.pickerDimensions();\n\t\treturn {\n\t\t\tleft: x * ( width - bounds.left * 2 ) + bounds.left,\n\t\t\ttop: y * ( height - bounds.top * 2 ) + bounds.top,\n\t\t};\n\t}\n\trender() {\n\t\tconst {\n\t\t\tautoPlay,\n\t\t\tclassName,\n\t\t\thelp,\n\t\t\tinstanceId,\n\t\t\tlabel,\n\t\t\turl,\n\t\t} = this.props;\n\t\tconst { bounds, isDragging, percentages } = this.state;\n\t\tconst iconCoordinates = this.iconCoordinates();\n\n\t\tconst classes = classnames(\n\t\t\t'components-focal-point-picker-control',\n\t\t\tclassName\n\t\t);\n\n\t\tconst id = `inspector-focal-point-picker-control-${ instanceId }`;\n\n\t\treturn (\n\t\t\t<BaseControl\n\t\t\t\tlabel={ label }\n\t\t\t\tid={ id }\n\t\t\t\thelp={ help }\n\t\t\t\tclassName={ classes }\n\t\t\t>\n\t\t\t\t<MediaWrapper className=\"components-focal-point-picker-wrapper\">\n\t\t\t\t\t<MediaContainer\n\t\t\t\t\t\tclassName=\"components-focal-point-picker\"\n\t\t\t\t\t\tonKeyDown={ this.onKeyDown }\n\t\t\t\t\t\tonMouseDown={ this.onMouseDown }\n\t\t\t\t\t\tonBlur={ this.ifDraggingStop }\n\t\t\t\t\t\tref={ this.containerRef }\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<Grid\n\t\t\t\t\t\t\tbounds={ bounds }\n\t\t\t\t\t\t\tvalue={ percentages.x + percentages.y }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Media\n\t\t\t\t\t\t\talt={ __( 'Media preview' ) }\n\t\t\t\t\t\t\tautoPlay={ autoPlay }\n\t\t\t\t\t\t\tmediaRef={ this.mediaRef }\n\t\t\t\t\t\t\tonLoad={ this.updateBounds }\n\t\t\t\t\t\t\tsrc={ url }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<FocalPoint\n\t\t\t\t\t\t\tcoordinates={ iconCoordinates }\n\t\t\t\t\t\t\tisDragging={ isDragging }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</MediaContainer>\n\t\t\t\t</MediaWrapper>\n\t\t\t\t<Controls\n\t\t\t\t\tpercentages={ percentages }\n\t\t\t\t\tonChange={ this.onChangeAtControls }\n\t\t\t\t/>\n\t\t\t</BaseControl>\n\t\t);\n\t}\n}\n\nFocalPointPicker.defaultProps = {\n\tautoPlay: true,\n\tvalue: {\n\t\tx: 0.5,\n\t\ty: 0.5,\n\t},\n\turl: null,\n};\n\nexport default withInstanceId( FocalPointPicker );\n"]}

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

@@ -28,17 +28,19 @@ var _utils = require("./utils");
 /**
  * Internal dependencies
  */
-function Media({
-  alt,
-  autoPlay,
-  src,
-  onLoad = _lodash.noop,
-  mediaRef,
-  // Exposing muted prop for test rendering purposes
-  // https://github.com/testing-library/react-testing-library/issues/470
-  muted = true,
-  ...props
-}) {
+function Media(_ref) {
+  let {
+    alt,
+    autoPlay,
+    src,
+    onLoad = _lodash.noop,
+    mediaRef,
+    // Exposing muted prop for test rendering purposes
+    // https://github.com/testing-library/react-testing-library/issues/470
+    muted = true,
+    ...props
+  } = _ref;
+
   if (!src) {
     return (0, _element.createElement)(MediaPlaceholderElement, {
       className: "components-focal-point-picker__media components-focal-point-picker__media--placeholder",
@@ -65,11 +67,12 @@ function Media({
   }));
 }
 
-function MediaPlaceholderElement({
-  mediaRef,
-  onLoad = _lodash.noop,
-  ...props
-}) {
+function MediaPlaceholderElement(_ref2) {
+  let {
+    mediaRef,
+    onLoad = _lodash.noop,
+    ...props
+  } = _ref2;
   const onLoadRef = (0, _element.useRef)(onLoad);
   /**
    * This async callback mimics the onLoad (img) / onLoadedData (video) callback

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/focal-point-picker/media.js"],"names":["Media","alt","autoPlay","src","onLoad","noop","mediaRef","muted","props","isVideo","MediaPlaceholderElement","onLoadRef","window","requestAnimationFrame","current"],"mappings":";;;;;;;;;AAQA;;;;AALA;;AAUA;;AACA;;AAdA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAIe,SAASA,KAAT,CAAgB;AAC9BC,EAAAA,GAD8B;AAE9BC,EAAAA,QAF8B;AAG9BC,EAAAA,GAH8B;AAI9BC,EAAAA,MAAM,GAAGC,YAJqB;AAK9BC,EAAAA,QAL8B;AAM9B;AACA;AACAC,EAAAA,KAAK,GAAG,IARsB;AAS9B,KAAGC;AAT2B,CAAhB,EAUX;AACH,MAAK,CAAEL,GAAP,EAAa;AACZ,WACC,4BAAC,uBAAD;AACC,MAAA,SAAS,EAAC,wFADX;AAEC,MAAA,MAAM,EAAGC,MAFV;AAGC,MAAA,QAAQ,EAAGE;AAHZ,MADD;AAOA;;AAED,QAAMG,OAAO,GAAG,wBAAaN,GAAb,CAAhB;AAEA,SAAOM,OAAO,GACb,gEACMD,KADN;AAEC,IAAA,QAAQ,EAAGN,QAFZ;AAGC,IAAA,SAAS,EAAC,kFAHX;AAIC,IAAA,IAAI,MAJL;AAKC,IAAA,KAAK,EAAGK,KALT;AAMC,IAAA,YAAY,EAAGH,MANhB;AAOC,IAAA,GAAG,EAAGE,QAPP;AAQC,IAAA,GAAG,EAAGH;AARP,KADa,GAYb,8DACMK,KADN;AAEC,IAAA,GAAG,EAAGP,GAFP;AAGC,IAAA,SAAS,EAAC,kFAHX;AAIC,IAAA,MAAM,EAAGG,MAJV;AAKC,IAAA,GAAG,EAAGE,QALP;AAMC,IAAA,GAAG,EAAGH;AANP,KAZD;AAqBA;;AAED,SAASO,uBAAT,CAAkC;AAAEJ,EAAAA,QAAF;AAAYF,EAAAA,MAAM,GAAGC,YAArB;AAA2B,KAAGG;AAA9B,CAAlC,EAA0E;AACzE,QAAMG,SAAS,GAAG,qBAAQP,MAAR,CAAlB;AAEA;AACD;AACA;AACA;AACA;;AACC,gCAAiB,MAAM;AACtBQ,IAAAA,MAAM,CAACC,qBAAP,CAA8B,MAAM;AACnCF,MAAAA,SAAS,CAACG,OAAV;AACA,KAFD;AAGA,GAJD,EAIG,EAJH;AAMA,SAAO,4BAAC,uCAAD;AAAkB,IAAA,GAAG,EAAGR;AAAxB,KAAwCE,KAAxC,EAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport { noop } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useLayoutEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { MediaPlaceholder } from './styles/focal-point-picker-style';\nimport { isVideoType } from './utils';\n\nexport default function Media( {\n\talt,\n\tautoPlay,\n\tsrc,\n\tonLoad = noop,\n\tmediaRef,\n\t// Exposing muted prop for test rendering purposes\n\t// https://github.com/testing-library/react-testing-library/issues/470\n\tmuted = true,\n\t...props\n} ) {\n\tif ( ! src ) {\n\t\treturn (\n\t\t\t<MediaPlaceholderElement\n\t\t\t\tclassName=\"components-focal-point-picker__media components-focal-point-picker__media--placeholder\"\n\t\t\t\tonLoad={ onLoad }\n\t\t\t\tmediaRef={ mediaRef }\n\t\t\t/>\n\t\t);\n\t}\n\n\tconst isVideo = isVideoType( src );\n\n\treturn isVideo ? (\n\t\t<video\n\t\t\t{ ...props }\n\t\t\tautoPlay={ autoPlay }\n\t\t\tclassName=\"components-focal-point-picker__media components-focal-point-picker__media--video\"\n\t\t\tloop\n\t\t\tmuted={ muted }\n\t\t\tonLoadedData={ onLoad }\n\t\t\tref={ mediaRef }\n\t\t\tsrc={ src }\n\t\t/>\n\t) : (\n\t\t<img\n\t\t\t{ ...props }\n\t\t\talt={ alt }\n\t\t\tclassName=\"components-focal-point-picker__media components-focal-point-picker__media--image\"\n\t\t\tonLoad={ onLoad }\n\t\t\tref={ mediaRef }\n\t\t\tsrc={ src }\n\t\t/>\n\t);\n}\n\nfunction MediaPlaceholderElement( { mediaRef, onLoad = noop, ...props } ) {\n\tconst onLoadRef = useRef( onLoad );\n\n\t/**\n\t * This async callback mimics the onLoad (img) / onLoadedData (video) callback\n\t * for media elements. It is used in the main <FocalPointPicker /> component\n\t * to calculate the dimensions + boundaries for positioning.\n\t */\n\tuseLayoutEffect( () => {\n\t\twindow.requestAnimationFrame( () => {\n\t\t\tonLoadRef.current();\n\t\t} );\n\t}, [] );\n\n\treturn <MediaPlaceholder ref={ mediaRef } { ...props } />;\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/focal-point-picker/media.js"],"names":["Media","alt","autoPlay","src","onLoad","noop","mediaRef","muted","props","isVideo","MediaPlaceholderElement","onLoadRef","window","requestAnimationFrame","current"],"mappings":";;;;;;;;;AAQA;;;;AALA;;AAUA;;AACA;;AAdA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAIe,SAASA,KAAT,OAUX;AAAA,MAV2B;AAC9BC,IAAAA,GAD8B;AAE9BC,IAAAA,QAF8B;AAG9BC,IAAAA,GAH8B;AAI9BC,IAAAA,MAAM,GAAGC,YAJqB;AAK9BC,IAAAA,QAL8B;AAM9B;AACA;AACAC,IAAAA,KAAK,GAAG,IARsB;AAS9B,OAAGC;AAT2B,GAU3B;;AACH,MAAK,CAAEL,GAAP,EAAa;AACZ,WACC,4BAAC,uBAAD;AACC,MAAA,SAAS,EAAC,wFADX;AAEC,MAAA,MAAM,EAAGC,MAFV;AAGC,MAAA,QAAQ,EAAGE;AAHZ,MADD;AAOA;;AAED,QAAMG,OAAO,GAAG,wBAAaN,GAAb,CAAhB;AAEA,SAAOM,OAAO,GACb,gEACMD,KADN;AAEC,IAAA,QAAQ,EAAGN,QAFZ;AAGC,IAAA,SAAS,EAAC,kFAHX;AAIC,IAAA,IAAI,MAJL;AAKC,IAAA,KAAK,EAAGK,KALT;AAMC,IAAA,YAAY,EAAGH,MANhB;AAOC,IAAA,GAAG,EAAGE,QAPP;AAQC,IAAA,GAAG,EAAGH;AARP,KADa,GAYb,8DACMK,KADN;AAEC,IAAA,GAAG,EAAGP,GAFP;AAGC,IAAA,SAAS,EAAC,kFAHX;AAIC,IAAA,MAAM,EAAGG,MAJV;AAKC,IAAA,GAAG,EAAGE,QALP;AAMC,IAAA,GAAG,EAAGH;AANP,KAZD;AAqBA;;AAED,SAASO,uBAAT,QAA0E;AAAA,MAAxC;AAAEJ,IAAAA,QAAF;AAAYF,IAAAA,MAAM,GAAGC,YAArB;AAA2B,OAAGG;AAA9B,GAAwC;AACzE,QAAMG,SAAS,GAAG,qBAAQP,MAAR,CAAlB;AAEA;AACD;AACA;AACA;AACA;;AACC,gCAAiB,MAAM;AACtBQ,IAAAA,MAAM,CAACC,qBAAP,CAA8B,MAAM;AACnCF,MAAAA,SAAS,CAACG,OAAV;AACA,KAFD;AAGA,GAJD,EAIG,EAJH;AAMA,SAAO,4BAAC,uCAAD;AAAkB,IAAA,GAAG,EAAGR;AAAxB,KAAwCE,KAAxC,EAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport { noop } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useLayoutEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { MediaPlaceholder } from './styles/focal-point-picker-style';\nimport { isVideoType } from './utils';\n\nexport default function Media( {\n\talt,\n\tautoPlay,\n\tsrc,\n\tonLoad = noop,\n\tmediaRef,\n\t// Exposing muted prop for test rendering purposes\n\t// https://github.com/testing-library/react-testing-library/issues/470\n\tmuted = true,\n\t...props\n} ) {\n\tif ( ! src ) {\n\t\treturn (\n\t\t\t<MediaPlaceholderElement\n\t\t\t\tclassName=\"components-focal-point-picker__media components-focal-point-picker__media--placeholder\"\n\t\t\t\tonLoad={ onLoad }\n\t\t\t\tmediaRef={ mediaRef }\n\t\t\t/>\n\t\t);\n\t}\n\n\tconst isVideo = isVideoType( src );\n\n\treturn isVideo ? (\n\t\t<video\n\t\t\t{ ...props }\n\t\t\tautoPlay={ autoPlay }\n\t\t\tclassName=\"components-focal-point-picker__media components-focal-point-picker__media--video\"\n\t\t\tloop\n\t\t\tmuted={ muted }\n\t\t\tonLoadedData={ onLoad }\n\t\t\tref={ mediaRef }\n\t\t\tsrc={ src }\n\t\t/>\n\t) : (\n\t\t<img\n\t\t\t{ ...props }\n\t\t\talt={ alt }\n\t\t\tclassName=\"components-focal-point-picker__media components-focal-point-picker__media--image\"\n\t\t\tonLoad={ onLoad }\n\t\t\tref={ mediaRef }\n\t\t\tsrc={ src }\n\t\t/>\n\t);\n}\n\nfunction MediaPlaceholderElement( { mediaRef, onLoad = noop, ...props } ) {\n\tconst onLoadRef = useRef( onLoad );\n\n\t/**\n\t * This async callback mimics the onLoad (img) / onLoadedData (video) callback\n\t * for media elements. It is used in the main <FocalPointPicker /> component\n\t * to calculate the dimensions + boundaries for positioning.\n\t */\n\tuseLayoutEffect( () => {\n\t\twindow.requestAnimationFrame( () => {\n\t\t\tonLoadRef.current();\n\t\t} );\n\t}, [] );\n\n\treturn <MediaPlaceholder ref={ mediaRef } { ...props } />;\n}\n"]}

package/build/focal-point-picker/styles/focal-point-picker-style.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GridLineY = exports.GridLineX = exports.GridLine = exports.GridView = exports.ControlWrapper = exports.UnitControl = exports.MediaPlaceholder = exports.MediaContainer = exports.MediaWrapper = void 0;
+exports.UnitControl = exports.MediaWrapper = exports.MediaPlaceholder = exports.MediaContainer = exports.GridView = exports.GridLineY = exports.GridLineX = exports.GridLine = exports.ControlWrapper = void 0;
 
 var _base = _interopRequireDefault(require("@emotion/styled/base"));
 
@@ -89,11 +89,14 @@ const GridView = (0, _base.default)("div", process.env.NODE_ENV === "production"
 } : {
   target: "e11wezi73",
   label: "GridView"
-})("box-sizing:border-box;left:50%;opacity:0;overflow:hidden;pointer-events:none;position:absolute;top:50%;transform:translate3d( -50%, -50%, 0 );transition:opacity 120ms linear;z-index:1;", ({
-  isActive
-}) => isActive && `
+})("box-sizing:border-box;left:50%;opacity:0;overflow:hidden;pointer-events:none;position:absolute;top:50%;transform:translate3d( -50%, -50%, 0 );transition:opacity 120ms linear;z-index:1;", _ref => {
+  let {
+    isActive
+  } = _ref;
+  return isActive && `
 		opacity: 1;
-	`, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9jYWwtcG9pbnQtcGlja2VyL3N0eWxlcy9mb2NhbC1wb2ludC1waWNrZXItc3R5bGUuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBOERrQyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2ZvY2FsLXBvaW50LXBpY2tlci9zdHlsZXMvZm9jYWwtcG9pbnQtcGlja2VyLXN0eWxlLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBGbGV4IH0gZnJvbSAnLi4vLi4vZmxleCc7XG5pbXBvcnQgQmFzZVVuaXRDb250cm9sIGZyb20gJy4uLy4uL3VuaXQtY29udHJvbCc7XG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tICcuLi8uLi91dGlscyc7XG5cbmV4cG9ydCBjb25zdCBNZWRpYVdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuXHRiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0dGV4dC1hbGlnbjogY2VudGVyO1xuXHR3aWR0aDogMTAwJTtcbmA7XG5cbmV4cG9ydCBjb25zdCBNZWRpYUNvbnRhaW5lciA9IHN0eWxlZC5kaXZgXG5cdGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGJveC1zaGFkb3c6IDAgMCAwIDFweCByZ2JhKCAwLCAwLCAwLCAwLjIgKTtcblx0Y3Vyc29yOiBwb2ludGVyO1xuXHRkaXNwbGF5OiBpbmxpbmUtZmxleDtcblx0anVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5cdG1hcmdpbjogYXV0bztcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRoZWlnaHQ6IDEwMCU7XG5cblx0aW1nLFxuXHR2aWRlbyB7XG5cdFx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0XHRkaXNwbGF5OiBibG9jaztcblx0XHRoZWlnaHQ6IGF1dG87XG5cdFx0bWFyZ2luOiAwO1xuXHRcdG1heC1oZWlnaHQ6IDEwMCU7XG5cdFx0bWF4LXdpZHRoOiAxMDAlO1xuXHRcdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHRcdHVzZXItc2VsZWN0OiBub25lO1xuXHRcdHdpZHRoOiBhdXRvO1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgTWVkaWFQbGFjZWhvbGRlciA9IHN0eWxlZC5kaXZgXG5cdGJhY2tncm91bmQ6ICR7IENPTE9SUy5saWdodEdyYXlbIDMwMCBdIH07XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGhlaWdodDogMTcwcHg7XG5cdG1heC13aWR0aDogMjgwcHg7XG5cdG1pbi13aWR0aDogMjAwcHg7XG5cdHdpZHRoOiAxMDAlO1xuYDtcblxuZXhwb3J0IGNvbnN0IFVuaXRDb250cm9sID0gc3R5bGVkKCBCYXNlVW5pdENvbnRyb2wgKWBcblx0d2lkdGg6IDEwMHB4O1xuYDtcblxuZXhwb3J0IGNvbnN0IENvbnRyb2xXcmFwcGVyID0gc3R5bGVkKCBGbGV4IClgXG5cdG1heC13aWR0aDogMzIwcHg7XG5cdHBhZGRpbmc6IDFlbSAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IEdyaWRWaWV3ID0gc3R5bGVkLmRpdmBcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0bGVmdDogNTAlO1xuXHRvcGFjaXR5OiAwO1xuXHRvdmVyZmxvdzogaGlkZGVuO1xuXHRwb2ludGVyLWV2ZW50czogbm9uZTtcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHR0b3A6IDUwJTtcblx0dHJhbnNmb3JtOiB0cmFuc2xhdGUzZCggLTUwJSwgLTUwJSwgMCApO1xuXHR0cmFuc2l0aW9uOiBvcGFjaXR5IDEyMG1zIGxpbmVhcjtcblx0ei1pbmRleDogMTtcblxuXHQkeyAoIHsgaXNBY3RpdmUgfSApID0+XG5cdFx0aXNBY3RpdmUgJiZcblx0XHRgXG5cdFx0b3BhY2l0eTogMTtcblx0YCB9XG5gO1xuXG5leHBvcnQgY29uc3QgR3JpZExpbmUgPSBzdHlsZWQuZGl2YFxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRiYWNrZ3JvdW5kOiB3aGl0ZTtcblx0Ym94LXNoYWRvdzogMCAwIDJweCByZ2JhKCAwLCAwLCAwLCAwLjYgKTtcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHRvcGFjaXR5OiAwLjQ7XG5cdHRyYW5zZm9ybTogdHJhbnNsYXRlWiggMCApO1xuYDtcblxuZXhwb3J0IGNvbnN0IEdyaWRMaW5lWCA9IHN0eWxlZCggR3JpZExpbmUgKWBcblx0aGVpZ2h0OiAxcHg7XG5cdGxlZnQ6IDA7XG5cdHJpZ2h0OiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IEdyaWRMaW5lWSA9IHN0eWxlZCggR3JpZExpbmUgKWBcblx0d2lkdGg6IDFweDtcblx0dG9wOiAwO1xuXHRib3R0b206IDA7XG5gO1xuIl19 */"));
+	`;
+}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9jYWwtcG9pbnQtcGlja2VyL3N0eWxlcy9mb2NhbC1wb2ludC1waWNrZXItc3R5bGUuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBOERrQyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2ZvY2FsLXBvaW50LXBpY2tlci9zdHlsZXMvZm9jYWwtcG9pbnQtcGlja2VyLXN0eWxlLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBGbGV4IH0gZnJvbSAnLi4vLi4vZmxleCc7XG5pbXBvcnQgQmFzZVVuaXRDb250cm9sIGZyb20gJy4uLy4uL3VuaXQtY29udHJvbCc7XG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tICcuLi8uLi91dGlscyc7XG5cbmV4cG9ydCBjb25zdCBNZWRpYVdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuXHRiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0dGV4dC1hbGlnbjogY2VudGVyO1xuXHR3aWR0aDogMTAwJTtcbmA7XG5cbmV4cG9ydCBjb25zdCBNZWRpYUNvbnRhaW5lciA9IHN0eWxlZC5kaXZgXG5cdGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGJveC1zaGFkb3c6IDAgMCAwIDFweCByZ2JhKCAwLCAwLCAwLCAwLjIgKTtcblx0Y3Vyc29yOiBwb2ludGVyO1xuXHRkaXNwbGF5OiBpbmxpbmUtZmxleDtcblx0anVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5cdG1hcmdpbjogYXV0bztcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRoZWlnaHQ6IDEwMCU7XG5cblx0aW1nLFxuXHR2aWRlbyB7XG5cdFx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0XHRkaXNwbGF5OiBibG9jaztcblx0XHRoZWlnaHQ6IGF1dG87XG5cdFx0bWFyZ2luOiAwO1xuXHRcdG1heC1oZWlnaHQ6IDEwMCU7XG5cdFx0bWF4LXdpZHRoOiAxMDAlO1xuXHRcdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHRcdHVzZXItc2VsZWN0OiBub25lO1xuXHRcdHdpZHRoOiBhdXRvO1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgTWVkaWFQbGFjZWhvbGRlciA9IHN0eWxlZC5kaXZgXG5cdGJhY2tncm91bmQ6ICR7IENPTE9SUy5saWdodEdyYXlbIDMwMCBdIH07XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGhlaWdodDogMTcwcHg7XG5cdG1heC13aWR0aDogMjgwcHg7XG5cdG1pbi13aWR0aDogMjAwcHg7XG5cdHdpZHRoOiAxMDAlO1xuYDtcblxuZXhwb3J0IGNvbnN0IFVuaXRDb250cm9sID0gc3R5bGVkKCBCYXNlVW5pdENvbnRyb2wgKWBcblx0d2lkdGg6IDEwMHB4O1xuYDtcblxuZXhwb3J0IGNvbnN0IENvbnRyb2xXcmFwcGVyID0gc3R5bGVkKCBGbGV4IClgXG5cdG1heC13aWR0aDogMzIwcHg7XG5cdHBhZGRpbmc6IDFlbSAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IEdyaWRWaWV3ID0gc3R5bGVkLmRpdmBcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0bGVmdDogNTAlO1xuXHRvcGFjaXR5OiAwO1xuXHRvdmVyZmxvdzogaGlkZGVuO1xuXHRwb2ludGVyLWV2ZW50czogbm9uZTtcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHR0b3A6IDUwJTtcblx0dHJhbnNmb3JtOiB0cmFuc2xhdGUzZCggLTUwJSwgLTUwJSwgMCApO1xuXHR0cmFuc2l0aW9uOiBvcGFjaXR5IDEyMG1zIGxpbmVhcjtcblx0ei1pbmRleDogMTtcblxuXHQkeyAoIHsgaXNBY3RpdmUgfSApID0+XG5cdFx0aXNBY3RpdmUgJiZcblx0XHRgXG5cdFx0b3BhY2l0eTogMTtcblx0YCB9XG5gO1xuXG5leHBvcnQgY29uc3QgR3JpZExpbmUgPSBzdHlsZWQuZGl2YFxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRiYWNrZ3JvdW5kOiB3aGl0ZTtcblx0Ym94LXNoYWRvdzogMCAwIDJweCByZ2JhKCAwLCAwLCAwLCAwLjYgKTtcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHRvcGFjaXR5OiAwLjQ7XG5cdHRyYW5zZm9ybTogdHJhbnNsYXRlWiggMCApO1xuYDtcblxuZXhwb3J0IGNvbnN0IEdyaWRMaW5lWCA9IHN0eWxlZCggR3JpZExpbmUgKWBcblx0aGVpZ2h0OiAxcHg7XG5cdGxlZnQ6IDA7XG5cdHJpZ2h0OiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IEdyaWRMaW5lWSA9IHN0eWxlZCggR3JpZExpbmUgKWBcblx0d2lkdGg6IDFweDtcblx0dG9wOiAwO1xuXHRib3R0b206IDA7XG5gO1xuIl19 */"));
 exports.GridView = GridView;
 const GridLine = (0, _base.default)("div", process.env.NODE_ENV === "production" ? {
   target: "e11wezi72"

package/build/focal-point-picker/styles/focal-point-picker-style.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/focal-point-picker/styles/focal-point-picker-style.js"],"names":["MediaWrapper","MediaContainer","MediaPlaceholder","COLORS","lightGray","UnitControl","BaseUnitControl","ControlWrapper","Flex","GridView","isActive","GridLine","GridLineX","GridLineY"],"mappings":";;;;;;;;;;;AAQA;;AACA;;AACA;;;;AAEO,MAAMA,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;;AAOA,MAAMC,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAApB;;AAyBA,MAAMC,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,kBACbC,cAAOC,SAAP,CAAkB,GAAlB,CADa,uoGAAtB;;AASA,MAAMC,WAAW,GAAG,iCAAQC,oBAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAjB;;AAIA,MAAMC,cAAc,GAAG,iCAAQC,UAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAApB;;AAKA,MAAMC,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,+LAYjB,CAAE;AAAEC,EAAAA;AAAF,CAAF,KACFA,QAAQ,IACP;AACH;AACA,EAhBqB,yjGAAd;;AAmBA,MAAMC,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAd;;AASA,MAAMC,SAAS,GAAG,iCAAQD,QAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAf;;AAMA,MAAME,SAAS,GAAG,iCAAQF,QAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAf","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport { Flex } from '../../flex';\nimport BaseUnitControl from '../../unit-control';\nimport { COLORS } from '../../utils';\n\nexport const MediaWrapper = styled.div`\n\tbackground-color: transparent;\n\tbox-sizing: border-box;\n\ttext-align: center;\n\twidth: 100%;\n`;\n\nexport const MediaContainer = styled.div`\n\talign-items: center;\n\tbox-sizing: border-box;\n\tbox-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.2 );\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\tjustify-content: center;\n\tmargin: auto;\n\tposition: relative;\n\theight: 100%;\n\n\timg,\n\tvideo {\n\t\tbox-sizing: border-box;\n\t\tdisplay: block;\n\t\theight: auto;\n\t\tmargin: 0;\n\t\tmax-height: 100%;\n\t\tmax-width: 100%;\n\t\tpointer-events: none;\n\t\tuser-select: none;\n\t\twidth: auto;\n\t}\n`;\n\nexport const MediaPlaceholder = styled.div`\n\tbackground: ${ COLORS.lightGray[ 300 ] };\n\tbox-sizing: border-box;\n\theight: 170px;\n\tmax-width: 280px;\n\tmin-width: 200px;\n\twidth: 100%;\n`;\n\nexport const UnitControl = styled( BaseUnitControl )`\n\twidth: 100px;\n`;\n\nexport const ControlWrapper = styled( Flex )`\n\tmax-width: 320px;\n\tpadding: 1em 0;\n`;\n\nexport const GridView = styled.div`\n\tbox-sizing: border-box;\n\tleft: 50%;\n\topacity: 0;\n\toverflow: hidden;\n\tpointer-events: none;\n\tposition: absolute;\n\ttop: 50%;\n\ttransform: translate3d( -50%, -50%, 0 );\n\ttransition: opacity 120ms linear;\n\tz-index: 1;\n\n\t${ ( { isActive } ) =>\n\t\tisActive &&\n\t\t`\n\t\topacity: 1;\n\t` }\n`;\n\nexport const GridLine = styled.div`\n\tbox-sizing: border-box;\n\tbackground: white;\n\tbox-shadow: 0 0 2px rgba( 0, 0, 0, 0.6 );\n\tposition: absolute;\n\topacity: 0.4;\n\ttransform: translateZ( 0 );\n`;\n\nexport const GridLineX = styled( GridLine )`\n\theight: 1px;\n\tleft: 0;\n\tright: 0;\n`;\n\nexport const GridLineY = styled( GridLine )`\n\twidth: 1px;\n\ttop: 0;\n\tbottom: 0;\n`;\n"]}
+{"version":3,"sources":["@wordpress/components/src/focal-point-picker/styles/focal-point-picker-style.js"],"names":["MediaWrapper","MediaContainer","MediaPlaceholder","COLORS","lightGray","UnitControl","BaseUnitControl","ControlWrapper","Flex","GridView","isActive","GridLine","GridLineX","GridLineY"],"mappings":";;;;;;;;;;;AAQA;;AACA;;AACA;;;;AAEO,MAAMA,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;;AAOA,MAAMC,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAApB;;AAyBA,MAAMC,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,kBACbC,cAAOC,SAAP,CAAkB,GAAlB,CADa,uoGAAtB;;AASA,MAAMC,WAAW,GAAG,iCAAQC,oBAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAjB;;AAIA,MAAMC,cAAc,GAAG,iCAAQC,UAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAApB;;AAKA,MAAMC,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,+LAYjB;AAAA,MAAE;AAAEC,IAAAA;AAAF,GAAF;AAAA,SACFA,QAAQ,IACP;AACH;AACA,EAJI;AAAA,CAZiB,yjGAAd;;AAmBA,MAAMC,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAd;;AASA,MAAMC,SAAS,GAAG,iCAAQD,QAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAf;;AAMA,MAAME,SAAS,GAAG,iCAAQF,QAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAf","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport { Flex } from '../../flex';\nimport BaseUnitControl from '../../unit-control';\nimport { COLORS } from '../../utils';\n\nexport const MediaWrapper = styled.div`\n\tbackground-color: transparent;\n\tbox-sizing: border-box;\n\ttext-align: center;\n\twidth: 100%;\n`;\n\nexport const MediaContainer = styled.div`\n\talign-items: center;\n\tbox-sizing: border-box;\n\tbox-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.2 );\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\tjustify-content: center;\n\tmargin: auto;\n\tposition: relative;\n\theight: 100%;\n\n\timg,\n\tvideo {\n\t\tbox-sizing: border-box;\n\t\tdisplay: block;\n\t\theight: auto;\n\t\tmargin: 0;\n\t\tmax-height: 100%;\n\t\tmax-width: 100%;\n\t\tpointer-events: none;\n\t\tuser-select: none;\n\t\twidth: auto;\n\t}\n`;\n\nexport const MediaPlaceholder = styled.div`\n\tbackground: ${ COLORS.lightGray[ 300 ] };\n\tbox-sizing: border-box;\n\theight: 170px;\n\tmax-width: 280px;\n\tmin-width: 200px;\n\twidth: 100%;\n`;\n\nexport const UnitControl = styled( BaseUnitControl )`\n\twidth: 100px;\n`;\n\nexport const ControlWrapper = styled( Flex )`\n\tmax-width: 320px;\n\tpadding: 1em 0;\n`;\n\nexport const GridView = styled.div`\n\tbox-sizing: border-box;\n\tleft: 50%;\n\topacity: 0;\n\toverflow: hidden;\n\tpointer-events: none;\n\tposition: absolute;\n\ttop: 50%;\n\ttransform: translate3d( -50%, -50%, 0 );\n\ttransition: opacity 120ms linear;\n\tz-index: 1;\n\n\t${ ( { isActive } ) =>\n\t\tisActive &&\n\t\t`\n\t\topacity: 1;\n\t` }\n`;\n\nexport const GridLine = styled.div`\n\tbox-sizing: border-box;\n\tbackground: white;\n\tbox-shadow: 0 0 2px rgba( 0, 0, 0, 0.6 );\n\tposition: absolute;\n\topacity: 0.4;\n\ttransform: translateZ( 0 );\n`;\n\nexport const GridLineX = styled( GridLine )`\n\theight: 1px;\n\tleft: 0;\n\tright: 0;\n`;\n\nexport const GridLineY = styled( GridLine )`\n\twidth: 1px;\n\ttop: 0;\n\tbottom: 0;\n`;\n"]}

package/build/focal-point-picker/styles/focal-point-style.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PointerIconPathFill = exports.PointerIconPathOutline = exports.PointerIconSVG = exports.FocalPointWrapper = void 0;
+exports.PointerIconSVG = exports.PointerIconPathOutline = exports.PointerIconPathFill = exports.FocalPointWrapper = void 0;
 
 var _base = _interopRequireDefault(require("@emotion/styled/base"));
 
@@ -20,9 +20,12 @@ const FocalPointWrapper = (0, _base.default)("div", process.env.NODE_ENV === "pr
 } : {
   target: "eas61re3",
   label: "FocalPointWrapper"
-})("background-color:transparent;box-sizing:border-box;cursor:grab;height:30px;margin:-15px 0 0 -15px;opacity:0.8;position:absolute;user-select:none;width:30px;will-change:transform;z-index:10000;", ({
-  isDragging
-}) => isDragging && 'cursor: grabbing;', ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9jYWwtcG9pbnQtcGlja2VyL3N0eWxlcy9mb2NhbC1wb2ludC1zdHlsZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFlMkMiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9mb2NhbC1wb2ludC1waWNrZXIvc3R5bGVzL2ZvY2FsLXBvaW50LXN0eWxlLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIFdvcmRQcmVzcyBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgUGF0aCwgU1ZHIH0gZnJvbSAnQHdvcmRwcmVzcy9wcmltaXRpdmVzJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09MT1JTIH0gZnJvbSAnLi4vLi4vdXRpbHMnO1xuXG5leHBvcnQgY29uc3QgRm9jYWxQb2ludFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuXHRiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0Y3Vyc29yOiBncmFiO1xuXHRoZWlnaHQ6IDMwcHg7XG5cdG1hcmdpbjogLTE1cHggMCAwIC0xNXB4O1xuXHRvcGFjaXR5OiAwLjg7XG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0dXNlci1zZWxlY3Q6IG5vbmU7XG5cdHdpZHRoOiAzMHB4O1xuXHR3aWxsLWNoYW5nZTogdHJhbnNmb3JtO1xuXHR6LWluZGV4OiAxMDAwMDtcblxuXHQkeyAoIHsgaXNEcmFnZ2luZyB9ICkgPT4gaXNEcmFnZ2luZyAmJiAnY3Vyc29yOiBncmFiYmluZzsnIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBQb2ludGVySWNvblNWRyA9IHN0eWxlZCggU1ZHIClgXG5cdGRpc3BsYXk6IGJsb2NrO1xuXHRoZWlnaHQ6IDEwMCU7XG5cdGxlZnQ6IDA7XG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0dG9wOiAwO1xuXHR3aWR0aDogMTAwJTtcbmA7XG5cbmV4cG9ydCBjb25zdCBQb2ludGVySWNvblBhdGhPdXRsaW5lID0gc3R5bGVkKCBQYXRoIClgXG5cdGZpbGw6IHdoaXRlO1xuYDtcblxuZXhwb3J0IGNvbnN0IFBvaW50ZXJJY29uUGF0aEZpbGwgPSBzdHlsZWQoIFBhdGggKWBcblx0ZmlsbDogJHsgQ09MT1JTLmJsdWUud29yZHByZXNzWyA3MDAgXSB9O1xuXHRmaWxsOiAkeyBDT0xPUlMudWkudGhlbWUgfTtcbmA7XG4iXX0= */"));
+})("background-color:transparent;box-sizing:border-box;cursor:grab;height:30px;margin:-15px 0 0 -15px;opacity:0.8;position:absolute;user-select:none;width:30px;will-change:transform;z-index:10000;", _ref => {
+  let {
+    isDragging
+  } = _ref;
+  return isDragging && 'cursor: grabbing;';
+}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9jYWwtcG9pbnQtcGlja2VyL3N0eWxlcy9mb2NhbC1wb2ludC1zdHlsZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFlMkMiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9mb2NhbC1wb2ludC1waWNrZXIvc3R5bGVzL2ZvY2FsLXBvaW50LXN0eWxlLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIFdvcmRQcmVzcyBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgUGF0aCwgU1ZHIH0gZnJvbSAnQHdvcmRwcmVzcy9wcmltaXRpdmVzJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09MT1JTIH0gZnJvbSAnLi4vLi4vdXRpbHMnO1xuXG5leHBvcnQgY29uc3QgRm9jYWxQb2ludFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuXHRiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0Y3Vyc29yOiBncmFiO1xuXHRoZWlnaHQ6IDMwcHg7XG5cdG1hcmdpbjogLTE1cHggMCAwIC0xNXB4O1xuXHRvcGFjaXR5OiAwLjg7XG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0dXNlci1zZWxlY3Q6IG5vbmU7XG5cdHdpZHRoOiAzMHB4O1xuXHR3aWxsLWNoYW5nZTogdHJhbnNmb3JtO1xuXHR6LWluZGV4OiAxMDAwMDtcblxuXHQkeyAoIHsgaXNEcmFnZ2luZyB9ICkgPT4gaXNEcmFnZ2luZyAmJiAnY3Vyc29yOiBncmFiYmluZzsnIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBQb2ludGVySWNvblNWRyA9IHN0eWxlZCggU1ZHIClgXG5cdGRpc3BsYXk6IGJsb2NrO1xuXHRoZWlnaHQ6IDEwMCU7XG5cdGxlZnQ6IDA7XG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0dG9wOiAwO1xuXHR3aWR0aDogMTAwJTtcbmA7XG5cbmV4cG9ydCBjb25zdCBQb2ludGVySWNvblBhdGhPdXRsaW5lID0gc3R5bGVkKCBQYXRoIClgXG5cdGZpbGw6IHdoaXRlO1xuYDtcblxuZXhwb3J0IGNvbnN0IFBvaW50ZXJJY29uUGF0aEZpbGwgPSBzdHlsZWQoIFBhdGggKWBcblx0ZmlsbDogJHsgQ09MT1JTLmJsdWUud29yZHByZXNzWyA3MDAgXSB9O1xuXHRmaWxsOiAkeyBDT0xPUlMudWkudGhlbWUgfTtcbmA7XG4iXX0= */"));
 exports.FocalPointWrapper = FocalPointWrapper;
 const PointerIconSVG = ( /*#__PURE__*/0, _base.default)(_primitives.SVG, process.env.NODE_ENV === "production" ? {
   target: "eas61re2"

package/build/focal-point-picker/styles/focal-point-style.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/focal-point-picker/styles/focal-point-style.js"],"names":["FocalPointWrapper","isDragging","PointerIconSVG","SVG","PointerIconPathOutline","Path","PointerIconPathFill","COLORS","blue","wordpress","ui","theme"],"mappings":";;;;;;;;;;;AAQA;;AAKA;;;;AAEO,MAAMA,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA,uMAa1B,CAAE;AAAEC,EAAAA;AAAF,CAAF,KAAsBA,UAAU,IAAI,mBAbV,isDAAvB;;AAgBA,MAAMC,cAAc,GAAG,iCAAQC,eAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAApB;;AASA,MAAMC,sBAAsB,GAAG,iCAAQC,gBAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA5B;;AAIA,MAAMC,mBAAmB,GAAG,iCAAQD,gBAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,UACtBE,cAAOC,IAAP,CAAYC,SAAZ,CAAuB,GAAvB,CADsB,YAEtBF,cAAOG,EAAP,CAAUC,KAFY,isDAAzB","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\n\n/**\n * WordPress dependencies\n */\nimport { Path, SVG } from '@wordpress/primitives';\n\n/**\n * Internal dependencies\n */\nimport { COLORS } from '../../utils';\n\nexport const FocalPointWrapper = styled.div`\n\tbackground-color: transparent;\n\tbox-sizing: border-box;\n\tcursor: grab;\n\theight: 30px;\n\tmargin: -15px 0 0 -15px;\n\topacity: 0.8;\n\tposition: absolute;\n\tuser-select: none;\n\twidth: 30px;\n\twill-change: transform;\n\tz-index: 10000;\n\n\t${ ( { isDragging } ) => isDragging && 'cursor: grabbing;' }\n`;\n\nexport const PointerIconSVG = styled( SVG )`\n\tdisplay: block;\n\theight: 100%;\n\tleft: 0;\n\tposition: absolute;\n\ttop: 0;\n\twidth: 100%;\n`;\n\nexport const PointerIconPathOutline = styled( Path )`\n\tfill: white;\n`;\n\nexport const PointerIconPathFill = styled( Path )`\n\tfill: ${ COLORS.blue.wordpress[ 700 ] };\n\tfill: ${ COLORS.ui.theme };\n`;\n"]}
+{"version":3,"sources":["@wordpress/components/src/focal-point-picker/styles/focal-point-style.js"],"names":["FocalPointWrapper","isDragging","PointerIconSVG","SVG","PointerIconPathOutline","Path","PointerIconPathFill","COLORS","blue","wordpress","ui","theme"],"mappings":";;;;;;;;;;;AAQA;;AAKA;;;;AAEO,MAAMA,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA,uMAa1B;AAAA,MAAE;AAAEC,IAAAA;AAAF,GAAF;AAAA,SAAsBA,UAAU,IAAI,mBAApC;AAAA,CAb0B,isDAAvB;;AAgBA,MAAMC,cAAc,GAAG,iCAAQC,eAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAApB;;AASA,MAAMC,sBAAsB,GAAG,iCAAQC,gBAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA5B;;AAIA,MAAMC,mBAAmB,GAAG,iCAAQD,gBAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,UACtBE,cAAOC,IAAP,CAAYC,SAAZ,CAAuB,GAAvB,CADsB,YAEtBF,cAAOG,EAAP,CAAUC,KAFY,isDAAzB","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\n\n/**\n * WordPress dependencies\n */\nimport { Path, SVG } from '@wordpress/primitives';\n\n/**\n * Internal dependencies\n */\nimport { COLORS } from '../../utils';\n\nexport const FocalPointWrapper = styled.div`\n\tbackground-color: transparent;\n\tbox-sizing: border-box;\n\tcursor: grab;\n\theight: 30px;\n\tmargin: -15px 0 0 -15px;\n\topacity: 0.8;\n\tposition: absolute;\n\tuser-select: none;\n\twidth: 30px;\n\twill-change: transform;\n\tz-index: 10000;\n\n\t${ ( { isDragging } ) => isDragging && 'cursor: grabbing;' }\n`;\n\nexport const PointerIconSVG = styled( SVG )`\n\tdisplay: block;\n\theight: 100%;\n\tleft: 0;\n\tposition: absolute;\n\ttop: 0;\n\twidth: 100%;\n`;\n\nexport const PointerIconPathOutline = styled( Path )`\n\tfill: white;\n`;\n\nexport const PointerIconPathFill = styled( Path )`\n\tfill: ${ COLORS.blue.wordpress[ 700 ] };\n\tfill: ${ COLORS.ui.theme };\n`;\n"]}

package/build/focal-point-picker/tooltip/index.native.js

@@ -28,12 +28,13 @@ var _style = _interopRequireDefault(require("./style.scss"));
  */
 const TooltipContext = (0, _element.createContext)();
 
-function Tooltip({
-  children,
-  onPress,
-  style,
-  visible
-}) {
+function Tooltip(_ref) {
+  let {
+    children,
+    onPress,
+    style,
+    visible
+  } = _ref;
   const panResponder = (0, _element.useRef)(_reactNative.PanResponder.create({
     /**
      * To allow dimissing the tooltip on press while also avoiding blocking
@@ -59,14 +60,15 @@ function Tooltip({
   }), children));
 }
 
-function Label({
-  align,
-  text,
-  xOffset,
-  yOffset
-}) {
+function Label(_ref2) {
   var _styles$tooltipShadow;
 
+  let {
+    align,
+    text,
+    xOffset,
+    yOffset
+  } = _ref2;
   const animationValue = (0, _element.useRef)(new _reactNative.Animated.Value(0)).current;
   const [dimensions, setDimensions] = (0, _element.useState)(null);
   const visible = (0, _element.useContext)(TooltipContext);
@@ -123,9 +125,10 @@ function Label({
       }]
     }
   }, (0, _element.createElement)(_reactNative.View, {
-    onLayout: ({
-      nativeEvent
-    }) => {
+    onLayout: _ref3 => {
+      let {
+        nativeEvent
+      } = _ref3;
       const {
         height,
         width

package/build/focal-point-picker/tooltip/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/focal-point-picker/tooltip/index.native.js"],"names":["TooltipContext","Tooltip","children","onPress","style","visible","panResponder","PanResponder","create","onStartShouldSetPanResponderCapture","current","panHandlers","Label","align","text","xOffset","yOffset","animationValue","Animated","Value","dimensions","setDimensions","Error","startAnimation","timing","toValue","duration","useNativeDriver","delay","easing","Easing","out","quad","start","tooltipTransforms","translateX","width","translateY","height","tooltipStyles","styles","tooltip","shadowColor","tooltipShadow","color","shadowOffset","shadowOpacity","shadowRadius","elevation","transform","tooltipLeftAlign","arrowStyles","arrow","arrowLeftAlign","opacity","interpolate","inputRange","outputRange","nativeEvent","layout","defaultProps"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { Animated, Easing, PanResponder, Text, View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tcreateContext,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n\tuseContext,\n} from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nconst TooltipContext = createContext();\n\nfunction Tooltip( { children, onPress, style, visible } ) {\n\tconst panResponder = useRef(\n\t\tPanResponder.create( {\n\t\t\t/**\n\t\t\t * To allow dimissing the tooltip on press while also avoiding blocking\n\t\t\t * interactivity within the child context, we place this `onPress` side\n\t\t\t * effect within the `onStartShouldSetPanResponderCapture` callback.\n\t\t\t *\n\t\t\t * This is a bit unorthodox, but may be the simplest approach to achieving\n\t\t\t * this outcome. This is effectively a gesture responder that never\n\t\t\t * becomes the controlling responder. https://bit.ly/2J3ugKF\n\t\t\t */\n\t\t\tonStartShouldSetPanResponderCapture: () => {\n\t\t\t\tif ( onPress ) {\n\t\t\t\t\tonPress();\n\t\t\t\t}\n\t\t\t\treturn false;\n\t\t\t},\n\t\t} )\n\t).current;\n\n\treturn (\n\t\t<TooltipContext.Provider value={ visible }>\n\t\t\t<View\n\t\t\t\t{ ...( visible ? panResponder.panHandlers : {} ) }\n\t\t\t\tstyle={ style }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</View>\n\t\t</TooltipContext.Provider>\n\t);\n}\n\nfunction Label( { align, text, xOffset, yOffset } ) {\n\tconst animationValue = useRef( new Animated.Value( 0 ) ).current;\n\tconst [ dimensions, setDimensions ] = useState( null );\n\tconst visible = useContext( TooltipContext );\n\n\tif ( typeof visible === 'undefined' ) {\n\t\tthrow new Error(\n\t\t\t'Tooltip.Label cannot be rendered outside of the Tooltip component'\n\t\t);\n\t}\n\n\tuseEffect( () => {\n\t\tstartAnimation();\n\t}, [ visible ] );\n\n\tconst startAnimation = () => {\n\t\tAnimated.timing( animationValue, {\n\t\t\ttoValue: visible ? 1 : 0,\n\t\t\tduration: visible ? 300 : 150,\n\t\t\tuseNativeDriver: true,\n\t\t\tdelay: visible ? 500 : 0,\n\t\t\teasing: Easing.out( Easing.quad ),\n\t\t} ).start();\n\t};\n\n\t// Transforms rely upon onLayout to enable custom offsets additions\n\tlet tooltipTransforms;\n\tif ( dimensions ) {\n\t\ttooltipTransforms = [\n\t\t\t{\n\t\t\t\ttranslateX:\n\t\t\t\t\t( align === 'center' ? -dimensions.width / 2 : 0 ) +\n\t\t\t\t\txOffset,\n\t\t\t},\n\t\t\t{ translateY: -dimensions.height + yOffset },\n\t\t];\n\t}\n\n\tconst tooltipStyles = [\n\t\tstyles.tooltip,\n\t\t{\n\t\t\tshadowColor: styles.tooltipShadow?.color,\n\t\t\tshadowOffset: {\n\t\t\t\twidth: 0,\n\t\t\t\theight: 2,\n\t\t\t},\n\t\t\tshadowOpacity: 0.25,\n\t\t\tshadowRadius: 2,\n\t\t\televation: 2,\n\t\t\ttransform: tooltipTransforms,\n\t\t},\n\t\talign === 'left' && styles.tooltipLeftAlign,\n\t];\n\tconst arrowStyles = [\n\t\tstyles.arrow,\n\t\talign === 'left' && styles.arrowLeftAlign,\n\t];\n\n\treturn (\n\t\t<Animated.View\n\t\t\tstyle={ {\n\t\t\t\topacity: animationValue,\n\t\t\t\ttransform: [\n\t\t\t\t\t{\n\t\t\t\t\t\ttranslateY: animationValue.interpolate( {\n\t\t\t\t\t\t\tinputRange: [ 0, 1 ],\n\t\t\t\t\t\t\toutputRange: [ visible ? 4 : -8, -8 ],\n\t\t\t\t\t\t} ),\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t} }\n\t\t>\n\t\t\t<View\n\t\t\t\tonLayout={ ( { nativeEvent } ) => {\n\t\t\t\t\tconst { height, width } = nativeEvent.layout;\n\t\t\t\t\tsetDimensions( { height, width } );\n\t\t\t\t} }\n\t\t\t\tstyle={ tooltipStyles }\n\t\t\t>\n\t\t\t\t<Text style={ styles.text }>{ text }</Text>\n\t\t\t\t<View style={ arrowStyles } />\n\t\t\t</View>\n\t\t</Animated.View>\n\t);\n}\n\nLabel.defaultProps = {\n\talign: 'center',\n\txOffset: 0,\n\tyOffset: 0,\n};\n\nTooltip.Label = Label;\n\nexport default Tooltip;\n"]}
+{"version":3,"sources":["@wordpress/components/src/focal-point-picker/tooltip/index.native.js"],"names":["TooltipContext","Tooltip","children","onPress","style","visible","panResponder","PanResponder","create","onStartShouldSetPanResponderCapture","current","panHandlers","Label","align","text","xOffset","yOffset","animationValue","Animated","Value","dimensions","setDimensions","Error","startAnimation","timing","toValue","duration","useNativeDriver","delay","easing","Easing","out","quad","start","tooltipTransforms","translateX","width","translateY","height","tooltipStyles","styles","tooltip","shadowColor","tooltipShadow","color","shadowOffset","shadowOpacity","shadowRadius","elevation","transform","tooltipLeftAlign","arrowStyles","arrow","arrowLeftAlign","opacity","interpolate","inputRange","outputRange","nativeEvent","layout","defaultProps"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { Animated, Easing, PanResponder, Text, View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tcreateContext,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n\tuseContext,\n} from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nconst TooltipContext = createContext();\n\nfunction Tooltip( { children, onPress, style, visible } ) {\n\tconst panResponder = useRef(\n\t\tPanResponder.create( {\n\t\t\t/**\n\t\t\t * To allow dimissing the tooltip on press while also avoiding blocking\n\t\t\t * interactivity within the child context, we place this `onPress` side\n\t\t\t * effect within the `onStartShouldSetPanResponderCapture` callback.\n\t\t\t *\n\t\t\t * This is a bit unorthodox, but may be the simplest approach to achieving\n\t\t\t * this outcome. This is effectively a gesture responder that never\n\t\t\t * becomes the controlling responder. https://bit.ly/2J3ugKF\n\t\t\t */\n\t\t\tonStartShouldSetPanResponderCapture: () => {\n\t\t\t\tif ( onPress ) {\n\t\t\t\t\tonPress();\n\t\t\t\t}\n\t\t\t\treturn false;\n\t\t\t},\n\t\t} )\n\t).current;\n\n\treturn (\n\t\t<TooltipContext.Provider value={ visible }>\n\t\t\t<View\n\t\t\t\t{ ...( visible ? panResponder.panHandlers : {} ) }\n\t\t\t\tstyle={ style }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</View>\n\t\t</TooltipContext.Provider>\n\t);\n}\n\nfunction Label( { align, text, xOffset, yOffset } ) {\n\tconst animationValue = useRef( new Animated.Value( 0 ) ).current;\n\tconst [ dimensions, setDimensions ] = useState( null );\n\tconst visible = useContext( TooltipContext );\n\n\tif ( typeof visible === 'undefined' ) {\n\t\tthrow new Error(\n\t\t\t'Tooltip.Label cannot be rendered outside of the Tooltip component'\n\t\t);\n\t}\n\n\tuseEffect( () => {\n\t\tstartAnimation();\n\t}, [ visible ] );\n\n\tconst startAnimation = () => {\n\t\tAnimated.timing( animationValue, {\n\t\t\ttoValue: visible ? 1 : 0,\n\t\t\tduration: visible ? 300 : 150,\n\t\t\tuseNativeDriver: true,\n\t\t\tdelay: visible ? 500 : 0,\n\t\t\teasing: Easing.out( Easing.quad ),\n\t\t} ).start();\n\t};\n\n\t// Transforms rely upon onLayout to enable custom offsets additions\n\tlet tooltipTransforms;\n\tif ( dimensions ) {\n\t\ttooltipTransforms = [\n\t\t\t{\n\t\t\t\ttranslateX:\n\t\t\t\t\t( align === 'center' ? -dimensions.width / 2 : 0 ) +\n\t\t\t\t\txOffset,\n\t\t\t},\n\t\t\t{ translateY: -dimensions.height + yOffset },\n\t\t];\n\t}\n\n\tconst tooltipStyles = [\n\t\tstyles.tooltip,\n\t\t{\n\t\t\tshadowColor: styles.tooltipShadow?.color,\n\t\t\tshadowOffset: {\n\t\t\t\twidth: 0,\n\t\t\t\theight: 2,\n\t\t\t},\n\t\t\tshadowOpacity: 0.25,\n\t\t\tshadowRadius: 2,\n\t\t\televation: 2,\n\t\t\ttransform: tooltipTransforms,\n\t\t},\n\t\talign === 'left' && styles.tooltipLeftAlign,\n\t];\n\tconst arrowStyles = [\n\t\tstyles.arrow,\n\t\talign === 'left' && styles.arrowLeftAlign,\n\t];\n\n\treturn (\n\t\t<Animated.View\n\t\t\tstyle={ {\n\t\t\t\topacity: animationValue,\n\t\t\t\ttransform: [\n\t\t\t\t\t{\n\t\t\t\t\t\ttranslateY: animationValue.interpolate( {\n\t\t\t\t\t\t\tinputRange: [ 0, 1 ],\n\t\t\t\t\t\t\toutputRange: [ visible ? 4 : -8, -8 ],\n\t\t\t\t\t\t} ),\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t} }\n\t\t>\n\t\t\t<View\n\t\t\t\tonLayout={ ( { nativeEvent } ) => {\n\t\t\t\t\tconst { height, width } = nativeEvent.layout;\n\t\t\t\t\tsetDimensions( { height, width } );\n\t\t\t\t} }\n\t\t\t\tstyle={ tooltipStyles }\n\t\t\t>\n\t\t\t\t<Text style={ styles.text }>{ text }</Text>\n\t\t\t\t<View style={ arrowStyles } />\n\t\t\t</View>\n\t\t</Animated.View>\n\t);\n}\n\nLabel.defaultProps = {\n\talign: 'center',\n\txOffset: 0,\n\tyOffset: 0,\n};\n\nTooltip.Label = Label;\n\nexport default Tooltip;\n"]}

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

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.INITIAL_BOUNDS = void 0;
+exports.fractionToPercentage = fractionToPercentage;
 exports.getExtension = getExtension;
 exports.isVideoType = isVideoType;
-exports.fractionToPercentage = fractionToPercentage;
-exports.INITIAL_BOUNDS = void 0;
 const INITIAL_BOUNDS = {
   top: 0,
   left: 0,
@@ -24,7 +24,8 @@ const VIDEO_EXTENSIONS = ['avi', 'mpg', 'mpeg', 'mov', 'mp4', 'm4v', 'ogg', 'ogv
  * @return {string} The extension of the file name.
  */
 
-function getExtension(filename = '') {
+function getExtension() {
+  let filename = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   const parts = filename.split('.');
   return parts[parts.length - 1];
 }
@@ -36,7 +37,8 @@ function getExtension(filename = '') {
  */
 
 
-function isVideoType(filename = '') {
+function isVideoType() {
+  let filename = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   if (!filename) return false;
   return VIDEO_EXTENSIONS.includes(getExtension(filename));
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/focal-point-picker/utils.js"],"names":["INITIAL_BOUNDS","top","left","bottom","right","width","height","VIDEO_EXTENSIONS","getExtension","filename","parts","split","length","isVideoType","includes","fractionToPercentage","fraction","Math","round"],"mappings":";;;;;;;;;AAAO,MAAMA,cAAc,GAAG;AAC7BC,EAAAA,GAAG,EAAE,CADwB;AAE7BC,EAAAA,IAAI,EAAE,CAFuB;AAG7BC,EAAAA,MAAM,EAAE,CAHqB;AAI7BC,EAAAA,KAAK,EAAE,CAJsB;AAK7BC,EAAAA,KAAK,EAAE,CALsB;AAM7BC,EAAAA,MAAM,EAAE;AANqB,CAAvB;;AASP,MAAMC,gBAAgB,GAAG,CACxB,KADwB,EAExB,KAFwB,EAGxB,MAHwB,EAIxB,KAJwB,EAKxB,KALwB,EAMxB,KANwB,EAOxB,KAPwB,EAQxB,KARwB,EASxB,MATwB,EAUxB,KAVwB,CAAzB;AAaA;AACA;AACA;AACA;AACA;AACA;;AACO,SAASC,YAAT,CAAuBC,QAAQ,GAAG,EAAlC,EAAuC;AAC7C,QAAMC,KAAK,GAAGD,QAAQ,CAACE,KAAT,CAAgB,GAAhB,CAAd;AACA,SAAOD,KAAK,CAAEA,KAAK,CAACE,MAAN,GAAe,CAAjB,CAAZ;AACA;AAED;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASC,WAAT,CAAsBJ,QAAQ,GAAG,EAAjC,EAAsC;AAC5C,MAAK,CAAEA,QAAP,EAAkB,OAAO,KAAP;AAClB,SAAOF,gBAAgB,CAACO,QAAjB,CAA2BN,YAAY,CAAEC,QAAF,CAAvC,CAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASM,oBAAT,CAA+BC,QAA/B,EAA0C;AAChD,SAAOC,IAAI,CAACC,KAAL,CAAYF,QAAQ,GAAG,GAAvB,CAAP;AACA","sourcesContent":["export const INITIAL_BOUNDS = {\n\ttop: 0,\n\tleft: 0,\n\tbottom: 0,\n\tright: 0,\n\twidth: 0,\n\theight: 0,\n};\n\nconst VIDEO_EXTENSIONS = [\n\t'avi',\n\t'mpg',\n\t'mpeg',\n\t'mov',\n\t'mp4',\n\t'm4v',\n\t'ogg',\n\t'ogv',\n\t'webm',\n\t'wmv',\n];\n\n/**\n * Gets the extension of a file name.\n *\n * @param {string} filename The file name.\n * @return {string} The extension of the file name.\n */\nexport function getExtension( filename = '' ) {\n\tconst parts = filename.split( '.' );\n\treturn parts[ parts.length - 1 ];\n}\n\n/**\n * Checks if a file is a video.\n *\n * @param {string} filename The file name.\n * @return {boolean} Whether the file is a video.\n */\nexport function isVideoType( filename = '' ) {\n\tif ( ! filename ) return false;\n\treturn VIDEO_EXTENSIONS.includes( getExtension( filename ) );\n}\n\n/**\n * Transforms a fraction value to a percentage value.\n *\n * @param {number} fraction The fraction value.\n * @return {number} A percentage value.\n */\nexport function fractionToPercentage( fraction ) {\n\treturn Math.round( fraction * 100 );\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/focal-point-picker/utils.js"],"names":["INITIAL_BOUNDS","top","left","bottom","right","width","height","VIDEO_EXTENSIONS","getExtension","filename","parts","split","length","isVideoType","includes","fractionToPercentage","fraction","Math","round"],"mappings":";;;;;;;;;AAAO,MAAMA,cAAc,GAAG;AAC7BC,EAAAA,GAAG,EAAE,CADwB;AAE7BC,EAAAA,IAAI,EAAE,CAFuB;AAG7BC,EAAAA,MAAM,EAAE,CAHqB;AAI7BC,EAAAA,KAAK,EAAE,CAJsB;AAK7BC,EAAAA,KAAK,EAAE,CALsB;AAM7BC,EAAAA,MAAM,EAAE;AANqB,CAAvB;;AASP,MAAMC,gBAAgB,GAAG,CACxB,KADwB,EAExB,KAFwB,EAGxB,MAHwB,EAIxB,KAJwB,EAKxB,KALwB,EAMxB,KANwB,EAOxB,KAPwB,EAQxB,KARwB,EASxB,MATwB,EAUxB,KAVwB,CAAzB;AAaA;AACA;AACA;AACA;AACA;AACA;;AACO,SAASC,YAAT,GAAuC;AAAA,MAAhBC,QAAgB,uEAAL,EAAK;AAC7C,QAAMC,KAAK,GAAGD,QAAQ,CAACE,KAAT,CAAgB,GAAhB,CAAd;AACA,SAAOD,KAAK,CAAEA,KAAK,CAACE,MAAN,GAAe,CAAjB,CAAZ;AACA;AAED;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASC,WAAT,GAAsC;AAAA,MAAhBJ,QAAgB,uEAAL,EAAK;AAC5C,MAAK,CAAEA,QAAP,EAAkB,OAAO,KAAP;AAClB,SAAOF,gBAAgB,CAACO,QAAjB,CAA2BN,YAAY,CAAEC,QAAF,CAAvC,CAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASM,oBAAT,CAA+BC,QAA/B,EAA0C;AAChD,SAAOC,IAAI,CAACC,KAAL,CAAYF,QAAQ,GAAG,GAAvB,CAAP;AACA","sourcesContent":["export const INITIAL_BOUNDS = {\n\ttop: 0,\n\tleft: 0,\n\tbottom: 0,\n\tright: 0,\n\twidth: 0,\n\theight: 0,\n};\n\nconst VIDEO_EXTENSIONS = [\n\t'avi',\n\t'mpg',\n\t'mpeg',\n\t'mov',\n\t'mp4',\n\t'm4v',\n\t'ogg',\n\t'ogv',\n\t'webm',\n\t'wmv',\n];\n\n/**\n * Gets the extension of a file name.\n *\n * @param {string} filename The file name.\n * @return {string} The extension of the file name.\n */\nexport function getExtension( filename = '' ) {\n\tconst parts = filename.split( '.' );\n\treturn parts[ parts.length - 1 ];\n}\n\n/**\n * Checks if a file is a video.\n *\n * @param {string} filename The file name.\n * @return {boolean} Whether the file is a video.\n */\nexport function isVideoType( filename = '' ) {\n\tif ( ! filename ) return false;\n\treturn VIDEO_EXTENSIONS.includes( getExtension( filename ) );\n}\n\n/**\n * Transforms a fraction value to a percentage value.\n *\n * @param {number} fraction The fraction value.\n * @return {number} A percentage value.\n */\nexport function fractionToPercentage( fraction ) {\n\treturn Math.round( fraction * 100 );\n}\n"]}

package/build/focusable-iframe/index.js

@@ -18,10 +18,11 @@ var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
 /**
  * WordPress dependencies
  */
-function FocusableIframe({
-  iframeRef,
-  ...props
-}) {
+function FocusableIframe(_ref) {
+  let {
+    iframeRef,
+    ...props
+  } = _ref;
   const ref = (0, _compose.useMergeRefs)([iframeRef, (0, _compose.useFocusableIframe)()]);
   (0, _deprecated.default)('wp.components.FocusableIframe', {
     alternative: 'wp.compose.useFocusableIframe'

package/build/focusable-iframe/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/focusable-iframe/index.js"],"names":["FocusableIframe","iframeRef","props","ref","alternative"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AAJA;AACA;AACA;AAIe,SAASA,eAAT,CAA0B;AAAEC,EAAAA,SAAF;AAAa,KAAGC;AAAhB,CAA1B,EAAoD;AAClE,QAAMC,GAAG,GAAG,2BAAc,CAAEF,SAAF,EAAa,kCAAb,CAAd,CAAZ;AACA,2BAAY,+BAAZ,EAA6C;AAC5CG,IAAAA,WAAW,EAAE;AAD+B,GAA7C,EAFkE,CAKlE;AACA;AACA;AACA;;AACA,SAAO;AAAQ,IAAA,GAAG,EAAGD;AAAd,KAAyBD,KAAzB,EAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMergeRefs, useFocusableIframe } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\n\nexport default function FocusableIframe( { iframeRef, ...props } ) {\n\tconst ref = useMergeRefs( [ iframeRef, useFocusableIframe() ] );\n\tdeprecated( 'wp.components.FocusableIframe', {\n\t\talternative: 'wp.compose.useFocusableIframe',\n\t} );\n\t// Disable reason: The rendered iframe is a pass-through component,\n\t// assigning props inherited from the rendering parent. It's the\n\t// responsibility of the parent to assign a title.\n\t// eslint-disable-next-line jsx-a11y/iframe-has-title\n\treturn <iframe ref={ ref } { ...props } />;\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/focusable-iframe/index.js"],"names":["FocusableIframe","iframeRef","props","ref","alternative"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AAJA;AACA;AACA;AAIe,SAASA,eAAT,OAAoD;AAAA,MAA1B;AAAEC,IAAAA,SAAF;AAAa,OAAGC;AAAhB,GAA0B;AAClE,QAAMC,GAAG,GAAG,2BAAc,CAAEF,SAAF,EAAa,kCAAb,CAAd,CAAZ;AACA,2BAAY,+BAAZ,EAA6C;AAC5CG,IAAAA,WAAW,EAAE;AAD+B,GAA7C,EAFkE,CAKlE;AACA;AACA;AACA;;AACA,SAAO;AAAQ,IAAA,GAAG,EAAGD;AAAd,KAAyBD,KAAzB,EAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMergeRefs, useFocusableIframe } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\n\nexport default function FocusableIframe( { iframeRef, ...props } ) {\n\tconst ref = useMergeRefs( [ iframeRef, useFocusableIframe() ] );\n\tdeprecated( 'wp.components.FocusableIframe', {\n\t\talternative: 'wp.compose.useFocusableIframe',\n\t} );\n\t// Disable reason: The rendered iframe is a pass-through component,\n\t// assigning props inherited from the rendering parent. It's the\n\t// responsibility of the parent to assign a title.\n\t// eslint-disable-next-line jsx-a11y/iframe-has-title\n\treturn <iframe ref={ ref } { ...props } />;\n}\n"]}

package/build/font-size-picker/index.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
@@ -33,6 +31,10 @@ var _toggleGroupControl = require("../toggle-group-control");
 
 var _utils = require("./utils");
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 /**
  * WordPress dependencies
  */
@@ -40,17 +42,18 @@ var _utils = require("./utils");
 /**
  * Internal dependencies
  */
-function FontSizePicker({
-  fallbackFontSize,
-  fontSizes = [],
-  disableCustomFontSizes = false,
-  onChange,
-  value,
-  withSlider = false,
-  withReset = true
-}, ref) {
+function FontSizePicker(_ref, ref) {
   var _fontSizes$, _value$endsWith;
 
+  let {
+    fallbackFontSize,
+    fontSizes = [],
+    disableCustomFontSizes = false,
+    onChange,
+    value,
+    withSlider = false,
+    withReset = true
+  } = _ref;
   const hasUnits = [typeof value, typeof (fontSizes === null || fontSizes === void 0 ? void 0 : (_fontSizes$ = fontSizes[0]) === null || _fontSizes$ === void 0 ? void 0 : _fontSizes$.size)].includes('string');
   const noUnitsValue = !hasUnits ? value : parseInt(value);
   const isPixelValue = typeof value === 'number' || (value === null || value === void 0 ? void 0 : (_value$endsWith = value.endsWith) === null || _value$endsWith === void 0 ? void 0 : _value$endsWith.call(value, 'px'));
@@ -62,9 +65,12 @@ function FontSizePicker({
   // A select control is also used when the value of a preset cannot be
   // immediately computed (eg. 'calc', 'var').
 
-  const shouldUseSelectControl = fontSizes.length > 5 || fontSizes.some(({
-    size
-  }) => !(0, _utils.isSimpleCssValue)(size));
+  const shouldUseSelectControl = fontSizes.length > 5 || fontSizes.some(_ref2 => {
+    let {
+      size
+    } = _ref2;
+    return !(0, _utils.isSimpleCssValue)(size);
+  });
   const options = (0, _element.useMemo)(() => (0, _utils.getFontSizeOptions)(shouldUseSelectControl, fontSizes, disableCustomFontSizes), [shouldUseSelectControl, fontSizes, disableCustomFontSizes]);
   const selectedOption = (0, _utils.getSelectedOption)(fontSizes, value);
   const isCustomValue = selectedOption.slug === _utils.CUSTOM_FONT_SIZE;
@@ -133,9 +139,10 @@ function FontSizePicker({
     describedBy: currentFontSizeSR,
     options: options,
     value: options.find(option => option.key === selectedOption.slug),
-    onChange: ({
-      selectedItem
-    }) => {
+    onChange: _ref3 => {
+      let {
+        selectedItem
+      } = _ref3;
       onChange(hasUnits ? selectedItem.size : Number(selectedItem.size));
 
       if (selectedItem.key === _utils.CUSTOM_FONT_SIZE) {