@wordpress/components 25.1.0 → 25.1.1

package/build-module/dropdown-menu-v2/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/dropdown-menu-v2/styles.ts"],"names":["css","keyframes","DropdownMenu","COLORS","font","rtl","CONFIG","space","Icon","ANIMATION_PARAMS","SLIDE_AMOUNT","DURATION","EASING","CONTENT_WRAPPER_PADDING","ITEM_PREFIX_WIDTH","ITEM_PADDING_INLINE_START","ITEM_PADDING_INLINE_END","DEFAULT_BORDER_COLOR","ui","borderDisabled","TOOLBAR_VARIANT_BORDER_COLOR","gray","DEFAULT_BOX_SHADOW","borderWidth","popoverShadow","TOOLBAR_VARIANT_BOX_SHADOW","slideUpAndFade","opacity","transform","slideRightAndFade","slideDownAndFade","slideLeftAndFade","baseContent","variant","background","radiusBlockUi","itemPrefix","itemSuffix","ItemPrefixWrapper","ItemSuffixWrapper","baseItem","Content","props","SubContent","Item","CheckboxItem","RadioItem","SubTrigger","Label","Separator","ItemIndicator","SubmenuRtlChevronIcon"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\nimport { css, keyframes } from '@emotion/react';\nimport * as DropdownMenu from '@radix-ui/react-dropdown-menu';\n\n/**\n * Internal dependencies\n */\nimport { COLORS, font, rtl, CONFIG } from '../utils';\nimport { space } from '../ui/utils/space';\nimport Icon from '../icon';\nimport type { DropdownMenuContext } from './types';\n\nconst ANIMATION_PARAMS = {\n\tSLIDE_AMOUNT: '2px',\n\tDURATION: '400ms',\n\tEASING: 'cubic-bezier( 0.16, 1, 0.3, 1 )',\n};\n\nconst CONTENT_WRAPPER_PADDING = space( 2 );\nconst ITEM_PREFIX_WIDTH = space( 7 );\nconst ITEM_PADDING_INLINE_START = space( 2 );\nconst ITEM_PADDING_INLINE_END = space( 2.5 );\n\n// TODO: should bring this into the config, and make themeable\nconst DEFAULT_BORDER_COLOR = COLORS.ui.borderDisabled;\nconst TOOLBAR_VARIANT_BORDER_COLOR = COLORS.gray[ '900' ];\nconst DEFAULT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ DEFAULT_BORDER_COLOR }, ${ CONFIG.popoverShadow }`;\nconst TOOLBAR_VARIANT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ TOOLBAR_VARIANT_BORDER_COLOR }`;\n\nconst slideUpAndFade = keyframes( {\n\t'0%': {\n\t\topacity: 0,\n\t\ttransform: `translateY(${ ANIMATION_PARAMS.SLIDE_AMOUNT })`,\n\t},\n\t'100%': { opacity: 1, transform: 'translateY(0)' },\n} );\n\nconst slideRightAndFade = keyframes( {\n\t'0%': {\n\t\topacity: 0,\n\t\ttransform: `translateX(-${ ANIMATION_PARAMS.SLIDE_AMOUNT })`,\n\t},\n\t'100%': { opacity: 1, transform: 'translateX(0)' },\n} );\n\nconst slideDownAndFade = keyframes( {\n\t'0%': {\n\t\topacity: 0,\n\t\ttransform: `translateY(-${ ANIMATION_PARAMS.SLIDE_AMOUNT })`,\n\t},\n\t'100%': { opacity: 1, transform: 'translateY(0)' },\n} );\n\nconst slideLeftAndFade = keyframes( {\n\t'0%': {\n\t\topacity: 0,\n\t\ttransform: `translateX(${ ANIMATION_PARAMS.SLIDE_AMOUNT })`,\n\t},\n\t'100%': { opacity: 1, transform: 'translateX(0)' },\n} );\n\nconst baseContent = ( variant: DropdownMenuContext[ 'variant' ] ) => css`\n\tmin-width: 220px;\n\tbackground-color: ${ COLORS.ui.background };\n\tborder-radius: ${ CONFIG.radiusBlockUi };\n\tpadding: ${ CONTENT_WRAPPER_PADDING };\n\tbox-shadow: ${ variant === 'toolbar'\n\t\t? TOOLBAR_VARIANT_BOX_SHADOW\n\t\t: DEFAULT_BOX_SHADOW };\n\tanimation-duration: ${ ANIMATION_PARAMS.DURATION };\n\tanimation-timing-function: ${ ANIMATION_PARAMS.EASING };\n\twill-change: transform, opacity;\n\n\t&[data-side='top'] {\n\t\tanimation-name: ${ slideDownAndFade };\n\t}\n\n\t&[data-side='right'] {\n\t\tanimation-name: ${ slideLeftAndFade };\n\t}\n\n\t&[data-side='bottom'] {\n\t\tanimation-name: ${ slideUpAndFade };\n\t}\n\n\t&[data-side='left'] {\n\t\tanimation-name: ${ slideRightAndFade };\n\t}\n\n\t@media ( prefers-reduced-motion ) {\n\t\tanimation-duration: 0s;\n\t}\n`;\n\nconst itemPrefix = css`\n\twidth: ${ ITEM_PREFIX_WIDTH };\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\t/* Prefixes don't get affected by the item's inline start padding */\n\tmargin-inline-start: calc( -1 * ${ ITEM_PADDING_INLINE_START } );\n\t/*\n\t\tNegative margin allows the suffix to be as tall as the whole item\n\t\t(incl. padding) before increasing the items' height. This can be useful,\n\t\te.g., when using icons that are bigger than 20x20 px\n\t*/\n\tmargin-top: ${ space( -2 ) };\n\tmargin-bottom: ${ space( -2 ) };\n`;\n\nconst itemSuffix = css`\n\twidth: max-content;\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\t/* Push prefix to the inline-end of the item */\n\tmargin-inline-start: auto;\n\t/* Minimum space between the item's content and suffix */\n\tpadding-inline-start: ${ space( 6 ) };\n\t/*\n\t\tNegative margin allows the suffix to be as tall as the whole item\n\t\t(incl. padding) before increasing the items' height. This can be useful,\n\t\te.g., when using icons that are bigger than 20x20 px\n\t*/\n\tmargin-top: ${ space( -2 ) };\n\tmargin-bottom: ${ space( -2 ) };\n\n\t/*\n\t\tOverride color in normal conditions, but inherit the item's color\n\t  for altered conditions.\n\n\t\tTODO:\n\t\t  - For now, used opacity like for disabled item, which makes it work\n\t\t\t  regardless of the theme\n\t\t  - how do we translate this for themes? Should we have a new variable\n\t\tfor \"secondary\" text?\n\t*/\n\topacity: 0.6;\n\n\t[data-highlighted] > &,\n\t[data-state='open'] > &,\n\t[data-disabled] > & {\n\t\topacity: 1;\n\t}\n`;\n\nexport const ItemPrefixWrapper = styled.span`\n\t${ itemPrefix }\n`;\n\nexport const ItemSuffixWrapper = styled.span`\n\t${ itemSuffix }\n`;\n\nconst baseItem = css`\n\tall: unset;\n\tfont-size: ${ font( 'default.fontSize' ) };\n\tfont-family: inherit;\n\tfont-weight: normal;\n\tline-height: 20px;\n\tcolor: ${ COLORS.gray[ 900 ] };\n\tborder-radius: ${ CONFIG.radiusBlockUi };\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: ${ space( 2 ) } ${ ITEM_PADDING_INLINE_END } ${ space( 2 ) }\n\t\t${ ITEM_PADDING_INLINE_START };\n\tposition: relative;\n\tuser-select: none;\n\toutline: none;\n\n\t&[data-disabled] {\n\t\t/*\n\t\t\tTODO:\n\t\t\t  - we need a disabled color in the Theme variables\n\t\t\t  - design specs use opacity instead of setting a new text color\n\t\t*/\n\t\topacity: 0.5;\n\t\tpointer-events: none;\n\t}\n\n\t/* Hover and Focus styles */\n\t&[data-highlighted] {\n\t\t/* TODO: reconcile with global focus styles */\n\t\tbackground-color: ${ COLORS.gray[ '100' ] };\n\n\t\t/* Only visible in Windows High Contrast mode */\n\t\toutline: 2px solid transparent;\n\t}\n\n\tsvg {\n\t\tfill: currentColor;\n\t}\n\n\t&:not( :has( ${ ItemPrefixWrapper } ) ) {\n\t\tpadding-inline-start: ${ ITEM_PREFIX_WIDTH };\n\t}\n`;\n\nexport const Content = styled( DropdownMenu.Content )<\n\tPick< DropdownMenuContext, 'variant' >\n>`\n\t${ ( props ) => baseContent( props.variant ) }\n`;\nexport const SubContent = styled( DropdownMenu.SubContent )<\n\tPick< DropdownMenuContext, 'variant' >\n>`\n\t${ ( props ) => baseContent( props.variant ) }\n`;\n\nexport const Item = styled( DropdownMenu.Item )`\n\t${ baseItem }\n`;\nexport const CheckboxItem = styled( DropdownMenu.CheckboxItem )`\n\t${ baseItem }\n`;\nexport const RadioItem = styled( DropdownMenu.RadioItem )`\n\t${ baseItem }\n`;\nexport const SubTrigger = styled( DropdownMenu.SubTrigger )`\n\t${ baseItem }\n\n\t&[data-state='open'] {\n\t\tbackground-color: ${ COLORS.gray[ '100' ] };\n\t}\n`;\n\nexport const Label = styled( DropdownMenu.Label )`\n\tbox-sizing: border-box;\n\tdisplay: flex;\n\talign-items: center;\n\tmin-height: ${ space( 8 ) };\n\n\tpadding: ${ space( 2 ) } ${ ITEM_PADDING_INLINE_END } ${ space( 2 ) }\n\t\t${ ITEM_PREFIX_WIDTH };\n\t/* TODO: color doesn't match available UI variables */\n\tcolor: ${ COLORS.gray[ 700 ] };\n\n\t/* TODO: font size doesn't match available ones via \"font\" utils */\n\tfont-size: 11px;\n\tline-height: 1.4;\n\tfont-weight: 500;\n\ttext-transform: uppercase;\n`;\n\nexport const Separator = styled( DropdownMenu.Separator )<\n\tPick< DropdownMenuContext, 'variant' >\n>`\n\theight: ${ CONFIG.borderWidth };\n\t/* TODO: doesn't match border color from variables */\n\tbackground-color: ${ ( props ) =>\n\t\tprops.variant === 'toolbar'\n\t\t\t? TOOLBAR_VARIANT_BORDER_COLOR\n\t\t\t: DEFAULT_BORDER_COLOR };\n\t/* Negative horizontal margin to make separator go from side to side */\n\tmargin: ${ space( 2 ) } calc( -1 * ${ CONTENT_WRAPPER_PADDING } );\n`;\n\nexport const ItemIndicator = styled( DropdownMenu.ItemIndicator )`\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n`;\n\nexport const SubmenuRtlChevronIcon = styled( Icon )`\n\t${ rtl(\n\t\t{\n\t\t\ttransform: `scaleX(1) translateX(${ space( 2 ) })`,\n\t\t},\n\t\t{\n\t\t\ttransform: `scaleX(-1) translateX(${ space( 2 ) })`,\n\t\t}\n\t)() }\n`;\n"]}
+{"version":3,"sources":["@wordpress/components/src/dropdown-menu-v2/styles.ts"],"names":["css","keyframes","DropdownMenu","COLORS","font","rtl","CONFIG","space","Icon","ANIMATION_PARAMS","SLIDE_AMOUNT","DURATION","EASING","CONTENT_WRAPPER_PADDING","ITEM_PREFIX_WIDTH","ITEM_PADDING_INLINE_START","ITEM_PADDING_INLINE_END","DEFAULT_BORDER_COLOR","ui","borderDisabled","TOOLBAR_VARIANT_BORDER_COLOR","gray","DEFAULT_BOX_SHADOW","borderWidth","popoverShadow","TOOLBAR_VARIANT_BOX_SHADOW","slideUpAndFade","opacity","transform","slideRightAndFade","slideDownAndFade","slideLeftAndFade","baseContent","variant","background","radiusBlockUi","itemPrefix","itemSuffix","ItemPrefixWrapper","ItemSuffixWrapper","baseItem","Content","props","SubContent","Item","CheckboxItem","RadioItem","SubTrigger","Label","Separator","ItemIndicator","SubmenuRtlChevronIcon"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\nimport { css, keyframes } from '@emotion/react';\nimport * as DropdownMenu from '@radix-ui/react-dropdown-menu';\n\n/**\n * Internal dependencies\n */\nimport { COLORS, font, rtl, CONFIG } from '../utils';\nimport { space } from '../ui/utils/space';\nimport Icon from '../icon';\nimport type { DropdownMenuInternalContext } from './types';\n\nconst ANIMATION_PARAMS = {\n\tSLIDE_AMOUNT: '2px',\n\tDURATION: '400ms',\n\tEASING: 'cubic-bezier( 0.16, 1, 0.3, 1 )',\n};\n\nconst CONTENT_WRAPPER_PADDING = space( 2 );\nconst ITEM_PREFIX_WIDTH = space( 7 );\nconst ITEM_PADDING_INLINE_START = space( 2 );\nconst ITEM_PADDING_INLINE_END = space( 2.5 );\n\n// TODO: should bring this into the config, and make themeable\nconst DEFAULT_BORDER_COLOR = COLORS.ui.borderDisabled;\nconst TOOLBAR_VARIANT_BORDER_COLOR = COLORS.gray[ '900' ];\nconst DEFAULT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ DEFAULT_BORDER_COLOR }, ${ CONFIG.popoverShadow }`;\nconst TOOLBAR_VARIANT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ TOOLBAR_VARIANT_BORDER_COLOR }`;\n\nconst slideUpAndFade = keyframes( {\n\t'0%': {\n\t\topacity: 0,\n\t\ttransform: `translateY(${ ANIMATION_PARAMS.SLIDE_AMOUNT })`,\n\t},\n\t'100%': { opacity: 1, transform: 'translateY(0)' },\n} );\n\nconst slideRightAndFade = keyframes( {\n\t'0%': {\n\t\topacity: 0,\n\t\ttransform: `translateX(-${ ANIMATION_PARAMS.SLIDE_AMOUNT })`,\n\t},\n\t'100%': { opacity: 1, transform: 'translateX(0)' },\n} );\n\nconst slideDownAndFade = keyframes( {\n\t'0%': {\n\t\topacity: 0,\n\t\ttransform: `translateY(-${ ANIMATION_PARAMS.SLIDE_AMOUNT })`,\n\t},\n\t'100%': { opacity: 1, transform: 'translateY(0)' },\n} );\n\nconst slideLeftAndFade = keyframes( {\n\t'0%': {\n\t\topacity: 0,\n\t\ttransform: `translateX(${ ANIMATION_PARAMS.SLIDE_AMOUNT })`,\n\t},\n\t'100%': { opacity: 1, transform: 'translateX(0)' },\n} );\n\nconst baseContent = (\n\tvariant: DropdownMenuInternalContext[ 'variant' ]\n) => css`\n\tmin-width: 220px;\n\tbackground-color: ${ COLORS.ui.background };\n\tborder-radius: ${ CONFIG.radiusBlockUi };\n\tpadding: ${ CONTENT_WRAPPER_PADDING };\n\tbox-shadow: ${ variant === 'toolbar'\n\t\t? TOOLBAR_VARIANT_BOX_SHADOW\n\t\t: DEFAULT_BOX_SHADOW };\n\tanimation-duration: ${ ANIMATION_PARAMS.DURATION };\n\tanimation-timing-function: ${ ANIMATION_PARAMS.EASING };\n\twill-change: transform, opacity;\n\n\t&[data-side='top'] {\n\t\tanimation-name: ${ slideDownAndFade };\n\t}\n\n\t&[data-side='right'] {\n\t\tanimation-name: ${ slideLeftAndFade };\n\t}\n\n\t&[data-side='bottom'] {\n\t\tanimation-name: ${ slideUpAndFade };\n\t}\n\n\t&[data-side='left'] {\n\t\tanimation-name: ${ slideRightAndFade };\n\t}\n\n\t@media ( prefers-reduced-motion ) {\n\t\tanimation-duration: 0s;\n\t}\n`;\n\nconst itemPrefix = css`\n\twidth: ${ ITEM_PREFIX_WIDTH };\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\t/* Prefixes don't get affected by the item's inline start padding */\n\tmargin-inline-start: calc( -1 * ${ ITEM_PADDING_INLINE_START } );\n\t/*\n\t\tNegative margin allows the suffix to be as tall as the whole item\n\t\t(incl. padding) before increasing the items' height. This can be useful,\n\t\te.g., when using icons that are bigger than 20x20 px\n\t*/\n\tmargin-top: ${ space( -2 ) };\n\tmargin-bottom: ${ space( -2 ) };\n`;\n\nconst itemSuffix = css`\n\twidth: max-content;\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\t/* Push prefix to the inline-end of the item */\n\tmargin-inline-start: auto;\n\t/* Minimum space between the item's content and suffix */\n\tpadding-inline-start: ${ space( 6 ) };\n\t/*\n\t\tNegative margin allows the suffix to be as tall as the whole item\n\t\t(incl. padding) before increasing the items' height. This can be useful,\n\t\te.g., when using icons that are bigger than 20x20 px\n\t*/\n\tmargin-top: ${ space( -2 ) };\n\tmargin-bottom: ${ space( -2 ) };\n\n\t/*\n\t\tOverride color in normal conditions, but inherit the item's color\n\t  for altered conditions.\n\n\t\tTODO:\n\t\t  - For now, used opacity like for disabled item, which makes it work\n\t\t\t  regardless of the theme\n\t\t  - how do we translate this for themes? Should we have a new variable\n\t\tfor \"secondary\" text?\n\t*/\n\topacity: 0.6;\n\n\t[data-highlighted] > &,\n\t[data-state='open'] > &,\n\t[data-disabled] > & {\n\t\topacity: 1;\n\t}\n`;\n\nexport const ItemPrefixWrapper = styled.span`\n\t${ itemPrefix }\n`;\n\nexport const ItemSuffixWrapper = styled.span`\n\t${ itemSuffix }\n`;\n\nconst baseItem = css`\n\tall: unset;\n\tfont-size: ${ font( 'default.fontSize' ) };\n\tfont-family: inherit;\n\tfont-weight: normal;\n\tline-height: 20px;\n\tcolor: ${ COLORS.gray[ 900 ] };\n\tborder-radius: ${ CONFIG.radiusBlockUi };\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: ${ space( 2 ) } ${ ITEM_PADDING_INLINE_END } ${ space( 2 ) }\n\t\t${ ITEM_PADDING_INLINE_START };\n\tposition: relative;\n\tuser-select: none;\n\toutline: none;\n\n\t&[data-disabled] {\n\t\t/*\n\t\t\tTODO:\n\t\t\t  - we need a disabled color in the Theme variables\n\t\t\t  - design specs use opacity instead of setting a new text color\n\t\t*/\n\t\topacity: 0.5;\n\t\tpointer-events: none;\n\t}\n\n\t/* Hover and Focus styles */\n\t&[data-highlighted] {\n\t\t/* TODO: reconcile with global focus styles */\n\t\tbackground-color: ${ COLORS.gray[ '100' ] };\n\n\t\t/* Only visible in Windows High Contrast mode */\n\t\toutline: 2px solid transparent;\n\t}\n\n\tsvg {\n\t\tfill: currentColor;\n\t}\n\n\t&:not( :has( ${ ItemPrefixWrapper } ) ) {\n\t\tpadding-inline-start: ${ ITEM_PREFIX_WIDTH };\n\t}\n`;\n\nexport const Content = styled( DropdownMenu.Content )<\n\tPick< DropdownMenuInternalContext, 'variant' >\n>`\n\t${ ( props ) => baseContent( props.variant ) }\n`;\nexport const SubContent = styled( DropdownMenu.SubContent )<\n\tPick< DropdownMenuInternalContext, 'variant' >\n>`\n\t${ ( props ) => baseContent( props.variant ) }\n`;\n\nexport const Item = styled( DropdownMenu.Item )`\n\t${ baseItem }\n`;\nexport const CheckboxItem = styled( DropdownMenu.CheckboxItem )`\n\t${ baseItem }\n`;\nexport const RadioItem = styled( DropdownMenu.RadioItem )`\n\t${ baseItem }\n`;\nexport const SubTrigger = styled( DropdownMenu.SubTrigger )`\n\t${ baseItem }\n\n\t&[data-state='open'] {\n\t\tbackground-color: ${ COLORS.gray[ '100' ] };\n\t}\n`;\n\nexport const Label = styled( DropdownMenu.Label )`\n\tbox-sizing: border-box;\n\tdisplay: flex;\n\talign-items: center;\n\tmin-height: ${ space( 8 ) };\n\n\tpadding: ${ space( 2 ) } ${ ITEM_PADDING_INLINE_END } ${ space( 2 ) }\n\t\t${ ITEM_PREFIX_WIDTH };\n\t/* TODO: color doesn't match available UI variables */\n\tcolor: ${ COLORS.gray[ 700 ] };\n\n\t/* TODO: font size doesn't match available ones via \"font\" utils */\n\tfont-size: 11px;\n\tline-height: 1.4;\n\tfont-weight: 500;\n\ttext-transform: uppercase;\n`;\n\nexport const Separator = styled( DropdownMenu.Separator )<\n\tPick< DropdownMenuInternalContext, 'variant' >\n>`\n\theight: ${ CONFIG.borderWidth };\n\t/* TODO: doesn't match border color from variables */\n\tbackground-color: ${ ( props ) =>\n\t\tprops.variant === 'toolbar'\n\t\t\t? TOOLBAR_VARIANT_BORDER_COLOR\n\t\t\t: DEFAULT_BORDER_COLOR };\n\t/* Negative horizontal margin to make separator go from side to side */\n\tmargin: ${ space( 2 ) } calc( -1 * ${ CONTENT_WRAPPER_PADDING } );\n`;\n\nexport const ItemIndicator = styled( DropdownMenu.ItemIndicator )`\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n`;\n\nexport const SubmenuRtlChevronIcon = styled( Icon )`\n\t${ rtl(\n\t\t{\n\t\t\ttransform: `scaleX(1) translateX(${ space( 2 ) })`,\n\t\t},\n\t\t{\n\t\t\ttransform: `scaleX(-1) translateX(${ space( 2 ) })`,\n\t\t}\n\t)() }\n`;\n"]}

package/build-module/elevation/component.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
 /**
@@ -14,9 +13,9 @@ import { useElevation } from './hook';
 
 function UnconnectedElevation(props, forwardedRef) {
   const elevationProps = useElevation(props);
-  return createElement(View, _extends({}, elevationProps, {
+  return createElement(View, { ...elevationProps,
     ref: forwardedRef
-  }));
+  });
 }
 /**
  * `Elevation` is a core component that renders shadow, using the component

package/build-module/elevation/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/elevation/component.tsx"],"names":["contextConnect","View","useElevation","UnconnectedElevation","props","forwardedRef","elevationProps","Elevation"],"mappings":";;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,cAAT,QAAwD,eAAxD;AACA,SAASC,IAAT,QAAqB,SAArB;AACA,SAASC,YAAT,QAA6B,QAA7B;;AAGA,SAASC,oBAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAMC,cAAc,GAAGJ,YAAY,CAAEE,KAAF,CAAnC;AAEA,SAAO,cAAC,IAAD,eAAWE,cAAX;AAA4B,IAAA,GAAG,EAAGD;AAAlC,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,OAAO,MAAME,SAAS,GAAGP,cAAc,CAAEG,oBAAF,EAAwB,WAAxB,CAAhC;AAEP,eAAeI,SAAf","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 { useElevation } from './hook';\nimport type { ElevationProps } from './types';\n\nfunction UnconnectedElevation(\n\tprops: WordPressComponentProps< ElevationProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst elevationProps = useElevation( props );\n\n\treturn <View { ...elevationProps } ref={ forwardedRef } />;\n}\n\n/**\n * `Elevation` is a core component that renders shadow, using the component\n * system's shadow system.\n *\n * The shadow effect is generated using the `value` prop.\n *\n * ```jsx\n * import {\n *\t__experimentalElevation as Elevation,\n *\t__experimentalSurface as Surface,\n *\t__experimentalText as Text,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <Surface>\n *       <Text>Code is Poetry</Text>\n *       <Elevation value={ 5 } />\n *     </Surface>\n *   );\n * }\n * ```\n */\nexport const Elevation = contextConnect( UnconnectedElevation, 'Elevation' );\n\nexport default Elevation;\n"]}
+{"version":3,"sources":["@wordpress/components/src/elevation/component.tsx"],"names":["contextConnect","View","useElevation","UnconnectedElevation","props","forwardedRef","elevationProps","Elevation"],"mappings":";;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,cAAT,QAAwD,eAAxD;AACA,SAASC,IAAT,QAAqB,SAArB;AACA,SAASC,YAAT,QAA6B,QAA7B;;AAGA,SAASC,oBAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAMC,cAAc,GAAGJ,YAAY,CAAEE,KAAF,CAAnC;AAEA,SAAO,cAAC,IAAD,OAAWE,cAAX;AAA4B,IAAA,GAAG,EAAGD;AAAlC,IAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,OAAO,MAAME,SAAS,GAAGP,cAAc,CAAEG,oBAAF,EAAwB,WAAxB,CAAhC;AAEP,eAAeI,SAAf","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 { useElevation } from './hook';\nimport type { ElevationProps } from './types';\n\nfunction UnconnectedElevation(\n\tprops: WordPressComponentProps< ElevationProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst elevationProps = useElevation( props );\n\n\treturn <View { ...elevationProps } ref={ forwardedRef } />;\n}\n\n/**\n * `Elevation` is a core component that renders shadow, using the component\n * system's shadow system.\n *\n * The shadow effect is generated using the `value` prop.\n *\n * ```jsx\n * import {\n *\t__experimentalElevation as Elevation,\n *\t__experimentalSurface as Surface,\n *\t__experimentalText as Text,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <Surface>\n *       <Text>Code is Poetry</Text>\n *       <Elevation value={ 5 } />\n *     </Surface>\n *   );\n * }\n * ```\n */\nexport const Elevation = contextConnect( UnconnectedElevation, 'Elevation' );\n\nexport default Elevation;\n"]}

package/build-module/external-link/index.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
 /**
@@ -47,14 +46,14 @@ function UnforwardedExternalLink(props, ref) {
 
   return (
     /* eslint-disable react/jsx-no-target-blank */
-    createElement("a", _extends({}, additionalProps, {
+    createElement("a", { ...additionalProps,
       className: classes,
       href: href,
       onClick: onClickHandler,
       target: "_blank",
       rel: optimizedRel,
       ref: ref
-    }), children, createElement(VisuallyHidden, {
+    }, children, createElement(VisuallyHidden, {
       as: "span"
     },
     /* translators: accessibility text */

package/build-module/external-link/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/external-link/index.tsx"],"names":["classnames","__","forwardRef","external","VisuallyHidden","StyledIcon","UnforwardedExternalLink","props","ref","href","children","className","rel","additionalProps","optimizedRel","Set","split","filter","Boolean","join","classes","isInternalAnchor","startsWith","onClickHandler","event","preventDefault","onClick","ExternalLink"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;;AAGA;AACA;AACA;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,UAAT,QAA2B,oBAA3B;AACA,SAASC,QAAT,QAAyB,kBAAzB;AAEA;AACA;AACA;;AACA,SAASC,cAAT,QAA+B,oBAA/B;AACA,SAASC,UAAT,QAA2B,+BAA3B;;AAIA,SAASC,uBAAT,CACCC,KADD,EAKCC,GALD,EAME;AACD,QAAM;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,QAAR;AAAkBC,IAAAA,SAAlB;AAA6BC,IAAAA,GAAG,GAAG,EAAnC;AAAuC,OAAGC;AAA1C,MAA8DN,KAApE;AACA,QAAMO,YAAY,GAAG,CACpB,GAAG,IAAIC,GAAJ,CACF,CACC,GAAGH,GAAG,CAACI,KAAJ,CAAW,GAAX,CADJ,EAEC,UAFD,EAGC,YAHD,EAIC,UAJD,EAKEC,MALF,CAKUC,OALV,CADE,CADiB,EASnBC,IATmB,CASb,GATa,CAArB;AAUA,QAAMC,OAAO,GAAGpB,UAAU,CAAE,0BAAF,EAA8BW,SAA9B,CAA1B;AACA;AACD;AACA;;AACC,QAAMU,gBAAgB,GAAG,CAAC,CAAEZ,IAAI,EAAEa,UAAN,CAAkB,GAAlB,CAA5B;;AAEA,QAAMC,cAAc,GACnBC,KADsB,IAElB;AACJ,QAAKH,gBAAL,EAAwB;AACvBG,MAAAA,KAAK,CAACC,cAAN;AACA;;AAED,QAAKlB,KAAK,CAACmB,OAAX,EAAqB;AACpBnB,MAAAA,KAAK,CAACmB,OAAN,CAAeF,KAAf;AACA;AACD,GAVD;;AAYA;AACC;AACA,oCACMX,eADN;AAEC,MAAA,SAAS,EAAGO,OAFb;AAGC,MAAA,IAAI,EAAGX,IAHR;AAIC,MAAA,OAAO,EAAGc,cAJX;AAKC,MAAA,MAAM,EAAC,QALR;AAMC,MAAA,GAAG,EAAGT,YANP;AAOC,MAAA,GAAG,EAAGN;AAPP,QASGE,QATH,EAUC,cAAC,cAAD;AAAgB,MAAA,EAAE,EAAC;AAAnB;AAEE;AACAT,IAAAA,EAAE,CAAE,sBAAF,CAHJ,CAVD,EAgBC,cAAC,UAAD;AACC,MAAA,IAAI,EAAGE,QADR;AAEC,MAAA,SAAS,EAAC;AAFX,MAhBD;AAqBA;;AAvBD;AAyBA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,OAAO,MAAMwB,YAAY,GAAGzB,UAAU,CAAEI,uBAAF,CAA/B;AAEP,eAAeqB,YAAf","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { forwardRef } from '@wordpress/element';\nimport { external } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { VisuallyHidden } from '../visually-hidden';\nimport { StyledIcon } from './styles/external-link-styles';\nimport type { ExternalLinkProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nfunction UnforwardedExternalLink(\n\tprops: Omit<\n\t\tWordPressComponentProps< ExternalLinkProps, 'a', false >,\n\t\t'target'\n\t>,\n\tref: ForwardedRef< HTMLAnchorElement >\n) {\n\tconst { href, children, className, rel = '', ...additionalProps } = props;\n\tconst optimizedRel = [\n\t\t...new Set(\n\t\t\t[\n\t\t\t\t...rel.split( ' ' ),\n\t\t\t\t'external',\n\t\t\t\t'noreferrer',\n\t\t\t\t'noopener',\n\t\t\t].filter( Boolean )\n\t\t),\n\t].join( ' ' );\n\tconst classes = classnames( 'components-external-link', className );\n\t/* Anchor links are perceived as external links.\n\tThis constant helps check for on page anchor links,\n\tto prevent them from being opened in the editor. */\n\tconst isInternalAnchor = !! href?.startsWith( '#' );\n\n\tconst onClickHandler = (\n\t\tevent: React.MouseEvent< HTMLAnchorElement, MouseEvent >\n\t) => {\n\t\tif ( isInternalAnchor ) {\n\t\t\tevent.preventDefault();\n\t\t}\n\n\t\tif ( props.onClick ) {\n\t\t\tprops.onClick( event );\n\t\t}\n\t};\n\n\treturn (\n\t\t/* eslint-disable react/jsx-no-target-blank */\n\t\t<a\n\t\t\t{ ...additionalProps }\n\t\t\tclassName={ classes }\n\t\t\thref={ href }\n\t\t\tonClick={ onClickHandler }\n\t\t\ttarget=\"_blank\"\n\t\t\trel={ optimizedRel }\n\t\t\tref={ ref }\n\t\t>\n\t\t\t{ children }\n\t\t\t<VisuallyHidden as=\"span\">\n\t\t\t\t{\n\t\t\t\t\t/* translators: accessibility text */\n\t\t\t\t\t__( '(opens in a new tab)' )\n\t\t\t\t}\n\t\t\t</VisuallyHidden>\n\t\t\t<StyledIcon\n\t\t\t\ticon={ external }\n\t\t\t\tclassName=\"components-external-link__icon\"\n\t\t\t/>\n\t\t</a>\n\t\t/* eslint-enable react/jsx-no-target-blank */\n\t);\n}\n\n/**\n * Link to an external resource.\n *\n * ```jsx\n * import { ExternalLink } from '@wordpress/components';\n *\n * const MyExternalLink = () => (\n *   <ExternalLink href=\"https://wordpress.org\">WordPress.org</ExternalLink>\n * );\n * ```\n */\nexport const ExternalLink = forwardRef( UnforwardedExternalLink );\n\nexport default ExternalLink;\n"]}
+{"version":3,"sources":["@wordpress/components/src/external-link/index.tsx"],"names":["classnames","__","forwardRef","external","VisuallyHidden","StyledIcon","UnforwardedExternalLink","props","ref","href","children","className","rel","additionalProps","optimizedRel","Set","split","filter","Boolean","join","classes","isInternalAnchor","startsWith","onClickHandler","event","preventDefault","onClick","ExternalLink"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;;AAGA;AACA;AACA;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,UAAT,QAA2B,oBAA3B;AACA,SAASC,QAAT,QAAyB,kBAAzB;AAEA;AACA;AACA;;AACA,SAASC,cAAT,QAA+B,oBAA/B;AACA,SAASC,UAAT,QAA2B,+BAA3B;;AAIA,SAASC,uBAAT,CACCC,KADD,EAKCC,GALD,EAME;AACD,QAAM;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,QAAR;AAAkBC,IAAAA,SAAlB;AAA6BC,IAAAA,GAAG,GAAG,EAAnC;AAAuC,OAAGC;AAA1C,MAA8DN,KAApE;AACA,QAAMO,YAAY,GAAG,CACpB,GAAG,IAAIC,GAAJ,CACF,CACC,GAAGH,GAAG,CAACI,KAAJ,CAAW,GAAX,CADJ,EAEC,UAFD,EAGC,YAHD,EAIC,UAJD,EAKEC,MALF,CAKUC,OALV,CADE,CADiB,EASnBC,IATmB,CASb,GATa,CAArB;AAUA,QAAMC,OAAO,GAAGpB,UAAU,CAAE,0BAAF,EAA8BW,SAA9B,CAA1B;AACA;AACD;AACA;;AACC,QAAMU,gBAAgB,GAAG,CAAC,CAAEZ,IAAI,EAAEa,UAAN,CAAkB,GAAlB,CAA5B;;AAEA,QAAMC,cAAc,GACnBC,KADsB,IAElB;AACJ,QAAKH,gBAAL,EAAwB;AACvBG,MAAAA,KAAK,CAACC,cAAN;AACA;;AAED,QAAKlB,KAAK,CAACmB,OAAX,EAAqB;AACpBnB,MAAAA,KAAK,CAACmB,OAAN,CAAeF,KAAf;AACA;AACD,GAVD;;AAYA;AACC;AACA,4BACMX,eADN;AAEC,MAAA,SAAS,EAAGO,OAFb;AAGC,MAAA,IAAI,EAAGX,IAHR;AAIC,MAAA,OAAO,EAAGc,cAJX;AAKC,MAAA,MAAM,EAAC,QALR;AAMC,MAAA,GAAG,EAAGT,YANP;AAOC,MAAA,GAAG,EAAGN;AAPP,OASGE,QATH,EAUC,cAAC,cAAD;AAAgB,MAAA,EAAE,EAAC;AAAnB;AAEE;AACAT,IAAAA,EAAE,CAAE,sBAAF,CAHJ,CAVD,EAgBC,cAAC,UAAD;AACC,MAAA,IAAI,EAAGE,QADR;AAEC,MAAA,SAAS,EAAC;AAFX,MAhBD;AAqBA;;AAvBD;AAyBA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,OAAO,MAAMwB,YAAY,GAAGzB,UAAU,CAAEI,uBAAF,CAA/B;AAEP,eAAeqB,YAAf","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { forwardRef } from '@wordpress/element';\nimport { external } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { VisuallyHidden } from '../visually-hidden';\nimport { StyledIcon } from './styles/external-link-styles';\nimport type { ExternalLinkProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nfunction UnforwardedExternalLink(\n\tprops: Omit<\n\t\tWordPressComponentProps< ExternalLinkProps, 'a', false >,\n\t\t'target'\n\t>,\n\tref: ForwardedRef< HTMLAnchorElement >\n) {\n\tconst { href, children, className, rel = '', ...additionalProps } = props;\n\tconst optimizedRel = [\n\t\t...new Set(\n\t\t\t[\n\t\t\t\t...rel.split( ' ' ),\n\t\t\t\t'external',\n\t\t\t\t'noreferrer',\n\t\t\t\t'noopener',\n\t\t\t].filter( Boolean )\n\t\t),\n\t].join( ' ' );\n\tconst classes = classnames( 'components-external-link', className );\n\t/* Anchor links are perceived as external links.\n\tThis constant helps check for on page anchor links,\n\tto prevent them from being opened in the editor. */\n\tconst isInternalAnchor = !! href?.startsWith( '#' );\n\n\tconst onClickHandler = (\n\t\tevent: React.MouseEvent< HTMLAnchorElement, MouseEvent >\n\t) => {\n\t\tif ( isInternalAnchor ) {\n\t\t\tevent.preventDefault();\n\t\t}\n\n\t\tif ( props.onClick ) {\n\t\t\tprops.onClick( event );\n\t\t}\n\t};\n\n\treturn (\n\t\t/* eslint-disable react/jsx-no-target-blank */\n\t\t<a\n\t\t\t{ ...additionalProps }\n\t\t\tclassName={ classes }\n\t\t\thref={ href }\n\t\t\tonClick={ onClickHandler }\n\t\t\ttarget=\"_blank\"\n\t\t\trel={ optimizedRel }\n\t\t\tref={ ref }\n\t\t>\n\t\t\t{ children }\n\t\t\t<VisuallyHidden as=\"span\">\n\t\t\t\t{\n\t\t\t\t\t/* translators: accessibility text */\n\t\t\t\t\t__( '(opens in a new tab)' )\n\t\t\t\t}\n\t\t\t</VisuallyHidden>\n\t\t\t<StyledIcon\n\t\t\t\ticon={ external }\n\t\t\t\tclassName=\"components-external-link__icon\"\n\t\t\t/>\n\t\t</a>\n\t\t/* eslint-enable react/jsx-no-target-blank */\n\t);\n}\n\n/**\n * Link to an external resource.\n *\n * ```jsx\n * import { ExternalLink } from '@wordpress/components';\n *\n * const MyExternalLink = () => (\n *   <ExternalLink href=\"https://wordpress.org\">WordPress.org</ExternalLink>\n * );\n * ```\n */\nexport const ExternalLink = forwardRef( UnforwardedExternalLink );\n\nexport default ExternalLink;\n"]}

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

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
 /**
@@ -23,9 +22,9 @@ function UnconnectedFlex(props, forwardedRef) {
     value: {
       flexItemDisplay: isColumn ? 'block' : undefined
     }
-  }, createElement(View, _extends({}, otherProps, {
+  }, createElement(View, { ...otherProps,
     ref: forwardedRef
-  }), children));
+  }, children));
 }
 /**
  * `Flex` is a primitive layout component that adaptively aligns child content

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/flex/flex/component.tsx"],"names":["contextConnect","useFlex","FlexContext","View","UnconnectedFlex","props","forwardedRef","children","isColumn","otherProps","flexItemDisplay","undefined","Flex"],"mappings":";;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,cAAT,QAAwD,kBAAxD;AACA,SAASC,OAAT,QAAwB,QAAxB;AACA,SAASC,WAAT,QAA4B,cAA5B;AACA,SAASC,IAAT,QAAqB,YAArB;;AAGA,SAASC,eAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,QAAZ;AAAsB,OAAGC;AAAzB,MAAwCR,OAAO,CAAEI,KAAF,CAArD;AAEA,SACC,cAAC,WAAD,CAAa,QAAb;AACC,IAAA,KAAK,EAAG;AAAEK,MAAAA,eAAe,EAAEF,QAAQ,GAAG,OAAH,GAAaG;AAAxC;AADT,KAGC,cAAC,IAAD,eAAWF,UAAX;AAAwB,IAAA,GAAG,EAAGH;AAA9B,MACGC,QADH,CAHD,CADD;AASA;AAED;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,MAAMK,IAAI,GAAGZ,cAAc,CAAEI,eAAF,EAAmB,MAAnB,CAA3B;AAEP,eAAeQ,IAAf","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useFlex } from './hook';\nimport { FlexContext } from './../context';\nimport { View } from '../../view';\nimport type { FlexProps } from '../types';\n\nfunction UnconnectedFlex(\n\tprops: WordPressComponentProps< FlexProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { children, isColumn, ...otherProps } = useFlex( props );\n\n\treturn (\n\t\t<FlexContext.Provider\n\t\t\tvalue={ { flexItemDisplay: isColumn ? 'block' : undefined } }\n\t\t>\n\t\t\t<View { ...otherProps } ref={ forwardedRef }>\n\t\t\t\t{ children }\n\t\t\t</View>\n\t\t</FlexContext.Provider>\n\t);\n}\n\n/**\n * `Flex` is a primitive layout component that adaptively aligns child content\n * horizontally or vertically. `Flex` powers components like `HStack` and\n * `VStack`.\n *\n * `Flex` is used with any of its two sub-components, `FlexItem` and\n * `FlexBlock`.\n *\n * ```jsx\n * import { Flex, FlexBlock, FlexItem } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <Flex>\n *       <FlexItem>\n *         <p>Code</p>\n *       </FlexItem>\n *       <FlexBlock>\n *         <p>Poetry</p>\n *       </FlexBlock>\n *     </Flex>\n *   );\n * }\n * ```\n */\nexport const Flex = contextConnect( UnconnectedFlex, 'Flex' );\n\nexport default Flex;\n"]}
+{"version":3,"sources":["@wordpress/components/src/flex/flex/component.tsx"],"names":["contextConnect","useFlex","FlexContext","View","UnconnectedFlex","props","forwardedRef","children","isColumn","otherProps","flexItemDisplay","undefined","Flex"],"mappings":";;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,cAAT,QAAwD,kBAAxD;AACA,SAASC,OAAT,QAAwB,QAAxB;AACA,SAASC,WAAT,QAA4B,cAA5B;AACA,SAASC,IAAT,QAAqB,YAArB;;AAGA,SAASC,eAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,QAAZ;AAAsB,OAAGC;AAAzB,MAAwCR,OAAO,CAAEI,KAAF,CAArD;AAEA,SACC,cAAC,WAAD,CAAa,QAAb;AACC,IAAA,KAAK,EAAG;AAAEK,MAAAA,eAAe,EAAEF,QAAQ,GAAG,OAAH,GAAaG;AAAxC;AADT,KAGC,cAAC,IAAD,OAAWF,UAAX;AAAwB,IAAA,GAAG,EAAGH;AAA9B,KACGC,QADH,CAHD,CADD;AASA;AAED;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,MAAMK,IAAI,GAAGZ,cAAc,CAAEI,eAAF,EAAmB,MAAnB,CAA3B;AAEP,eAAeQ,IAAf","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useFlex } from './hook';\nimport { FlexContext } from './../context';\nimport { View } from '../../view';\nimport type { FlexProps } from '../types';\n\nfunction UnconnectedFlex(\n\tprops: WordPressComponentProps< FlexProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { children, isColumn, ...otherProps } = useFlex( props );\n\n\treturn (\n\t\t<FlexContext.Provider\n\t\t\tvalue={ { flexItemDisplay: isColumn ? 'block' : undefined } }\n\t\t>\n\t\t\t<View { ...otherProps } ref={ forwardedRef }>\n\t\t\t\t{ children }\n\t\t\t</View>\n\t\t</FlexContext.Provider>\n\t);\n}\n\n/**\n * `Flex` is a primitive layout component that adaptively aligns child content\n * horizontally or vertically. `Flex` powers components like `HStack` and\n * `VStack`.\n *\n * `Flex` is used with any of its two sub-components, `FlexItem` and\n * `FlexBlock`.\n *\n * ```jsx\n * import { Flex, FlexBlock, FlexItem } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <Flex>\n *       <FlexItem>\n *         <p>Code</p>\n *       </FlexItem>\n *       <FlexBlock>\n *         <p>Poetry</p>\n *       </FlexBlock>\n *     </Flex>\n *   );\n * }\n * ```\n */\nexport const Flex = contextConnect( UnconnectedFlex, 'Flex' );\n\nexport default Flex;\n"]}

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

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
 /**
@@ -14,9 +13,9 @@ import { useFlexBlock } from './hook';
 
 function UnconnectedFlexBlock(props, forwardedRef) {
   const flexBlockProps = useFlexBlock(props);
-  return createElement(View, _extends({}, flexBlockProps, {
+  return createElement(View, { ...flexBlockProps,
     ref: forwardedRef
-  }));
+  });
 }
 /**
  * `FlexBlock` is a primitive layout component that adaptively resizes content

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/flex/flex-block/component.tsx"],"names":["contextConnect","View","useFlexBlock","UnconnectedFlexBlock","props","forwardedRef","flexBlockProps","FlexBlock"],"mappings":";;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,cAAT,QAAwD,kBAAxD;AACA,SAASC,IAAT,QAAqB,YAArB;AAEA,SAASC,YAAT,QAA6B,QAA7B;;AAEA,SAASC,oBAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAMC,cAAc,GAAGJ,YAAY,CAAEE,KAAF,CAAnC;AAEA,SAAO,cAAC,IAAD,eAAWE,cAAX;AAA4B,IAAA,GAAG,EAAGD;AAAlC,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,OAAO,MAAME,SAAS,GAAGP,cAAc,CAAEG,oBAAF,EAAwB,WAAxB,CAAhC;AAEP,eAAeI,SAAf","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 type { FlexBlockProps } from '../types';\nimport { useFlexBlock } from './hook';\n\nfunction UnconnectedFlexBlock(\n\tprops: WordPressComponentProps< FlexBlockProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst flexBlockProps = useFlexBlock( props );\n\n\treturn <View { ...flexBlockProps } ref={ forwardedRef } />;\n}\n\n/**\n * `FlexBlock` is a primitive layout component that adaptively resizes content\n * within layout containers like `Flex`.\n *\n * ```jsx\n * import { Flex, FlexBlock } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <Flex>\n *       <FlexBlock>...</FlexBlock>\n *     </Flex>\n *   );\n * }\n * ```\n */\nexport const FlexBlock = contextConnect( UnconnectedFlexBlock, 'FlexBlock' );\n\nexport default FlexBlock;\n"]}
+{"version":3,"sources":["@wordpress/components/src/flex/flex-block/component.tsx"],"names":["contextConnect","View","useFlexBlock","UnconnectedFlexBlock","props","forwardedRef","flexBlockProps","FlexBlock"],"mappings":";;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,cAAT,QAAwD,kBAAxD;AACA,SAASC,IAAT,QAAqB,YAArB;AAEA,SAASC,YAAT,QAA6B,QAA7B;;AAEA,SAASC,oBAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAMC,cAAc,GAAGJ,YAAY,CAAEE,KAAF,CAAnC;AAEA,SAAO,cAAC,IAAD,OAAWE,cAAX;AAA4B,IAAA,GAAG,EAAGD;AAAlC,IAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,OAAO,MAAME,SAAS,GAAGP,cAAc,CAAEG,oBAAF,EAAwB,WAAxB,CAAhC;AAEP,eAAeI,SAAf","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 type { FlexBlockProps } from '../types';\nimport { useFlexBlock } from './hook';\n\nfunction UnconnectedFlexBlock(\n\tprops: WordPressComponentProps< FlexBlockProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst flexBlockProps = useFlexBlock( props );\n\n\treturn <View { ...flexBlockProps } ref={ forwardedRef } />;\n}\n\n/**\n * `FlexBlock` is a primitive layout component that adaptively resizes content\n * within layout containers like `Flex`.\n *\n * ```jsx\n * import { Flex, FlexBlock } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <Flex>\n *       <FlexBlock>...</FlexBlock>\n *     </Flex>\n *   );\n * }\n * ```\n */\nexport const FlexBlock = contextConnect( UnconnectedFlexBlock, 'FlexBlock' );\n\nexport default FlexBlock;\n"]}

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

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
 /**
@@ -14,9 +13,9 @@ import { useFlexItem } from './hook';
 
 function UnconnectedFlexItem(props, forwardedRef) {
   const flexItemProps = useFlexItem(props);
-  return createElement(View, _extends({}, flexItemProps, {
+  return createElement(View, { ...flexItemProps,
     ref: forwardedRef
-  }));
+  });
 }
 /**
  * `FlexItem` is a primitive layout component that aligns content within layout

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,eAAWE,aAAX;AAA2B,IAAA,GAAG,EAAGD;AAAjC,KAAP;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,"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"]}

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

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
 /**
@@ -59,7 +58,7 @@ export default function FocalPointPickerControls({
 }
 
 function FocalPointUnitControl(props) {
-  return createElement(StyledUnitControl, _extends({
+  return createElement(StyledUnitControl, {
     className: "focal-point-picker__controls-position-unit-control",
     labelPosition: "top",
     max: TEXTCONTROL_MAX,
@@ -67,7 +66,8 @@ function FocalPointUnitControl(props) {
     units: [{
       value: '%',
       label: '%'
-    }]
-  }, props));
+    }],
+    ...props
+  });
 }
 //# sourceMappingURL=controls.js.map

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;AALT,KAMMD,KANN,EADD;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,"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"]}

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

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
 /**
@@ -20,9 +19,9 @@ export default function FocalPoint({
     left,
     top
   };
-  return createElement(PointerCircle, _extends({}, props, {
+  return createElement(PointerCircle, { ...props,
     className: classes,
     style: style
-  }));
+  });
 }
 //# sourceMappingURL=focal-point.js.map

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,eAAoBC,KAApB;AAA4B,IAAA,SAAS,EAAGC,OAAxC;AAAkD,IAAA,KAAK,EAAGC;AAA1D,KAAP;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,"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"]}

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

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
 /**
@@ -9,13 +8,13 @@ export default function FocalPointPickerGrid({
   bounds,
   ...props
 }) {
-  return createElement(GridView, _extends({}, props, {
+  return createElement(GridView, { ...props,
     className: "components-focal-point-picker__grid",
     style: {
       width: bounds.width,
       height: bounds.height
     }
-  }), createElement(GridLineX, {
+  }, createElement(GridLineX, {
     style: {
       top: '33%'
     }

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,eACMA,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,MAQC,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,"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"]}

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

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
 /**
@@ -224,13 +223,13 @@ export function FocalPointPicker({
     }, GRID_OVERLAY_TIMEOUT);
     return () => window.clearTimeout(timeout);
   }, [x, y]);
-  return createElement(BaseControl, _extends({}, restProps, {
+  return createElement(BaseControl, { ...restProps,
     __nextHasNoMarginBottom: __nextHasNoMarginBottom,
     label: label,
     id: id,
     help: help,
     className: classes
-  }), createElement(MediaWrapper, {
+  }, createElement(MediaWrapper, {
     className: "components-focal-point-picker-wrapper"
   }, createElement(MediaContainer, {
     className: "components-focal-point-picker",
@@ -250,9 +249,9 @@ export function FocalPointPicker({
     autoPlay: autoPlay,
     onLoad: refUpdateBounds.current,
     src: url
-  }), createElement(FocalPoint, _extends({}, focalPointPosition, {
+  }), createElement(FocalPoint, { ...focalPointPosition,
     isDragging: isDragging
-  })))), createElement(Controls, {
+  }))), createElement(Controls, {
     __nextHasNoMarginBottom: __nextHasNoMarginBottom,
     hasHelpText: !!help,
     point: {

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,"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"]}

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

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
 /**
@@ -205,10 +204,10 @@ function FocalPointPicker(props) {
     visible: tooltipVisible
   }, createElement(View, {
     style: [styles.media, mediaBackground]
-  }, createElement(View, _extends({}, panResponder.panHandlers, {
+  }, createElement(View, { ...panResponder.panHandlers,
     onLayout: onMediaLayout,
     style: styles.mediaContainer
-  }), !isVideo && createElement(Image, {
+  }, !isVideo && createElement(Image, {
     editButton: false,
     highlightSelected: false,
     isSelected: !displayPlaceholder,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/focal-point-picker/index.native.js"],"names":["Animated","PanResponder","View","Video","requestFocalPointPickerTooltipShown","setFocalPointPickerTooltipShown","__","Image","UnitControl","useRef","useState","useMemo","useEffect","usePreferredColorSchemeStyle","FocalPoint","Tooltip","styles","isVideoType","clamp","MIN_POSITION_VALUE","MAX_POSITION_VALUE","FOCAL_POINT_UNITS","default","label","value","FocalPointPicker","props","focalPoint","onChange","shouldEnableBottomSheetScroll","url","isVideo","containerSize","setContainerSize","sliderKey","setSliderKey","displayPlaceholder","setDisplayPlaceholder","videoNaturalSize","setVideoNaturalSize","tooltipVisible","setTooltipVisible","locationPageOffsetX","locationPageOffsetY","videoRef","tooltipShown","pan","ValueXY","current","setValue","x","width","y","height","panResponder","create","onStartShouldSetPanResponder","onStartShouldSetPanResponderCapture","onMoveShouldSetPanResponder","onMoveShouldSetPanResponderCapture","onPanResponderGrant","event","locationX","locationY","pageX","pageY","nativeEvent","extractOffset","onPanResponderMove","dx","dy","useNativeDriver","onPanResponderRelease","flattenOffset","toFixed","prevState","mediaBackground","mediaBackgroundDark","imagePreviewStyles","mediaPlaceholder","image","videoPreviewStyles","aspectRatio","opacity","video","focalPointGroupStyles","focalPointGroup","transform","translateX","interpolate","inputRange","outputRange","extrapolate","translateY","FOCAL_POINT_SIZE","focalPointStyles","marginLeft","marginTop","onTooltipPress","onMediaLayout","layout","onImageDataLoad","onVideoLoad","naturalSize","seek","onXCoordinateChange","onYCoordinateChange","container","media","panHandlers","mediaContainer","uri","Math","round"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { Animated, PanResponder, View } from 'react-native';\nimport Video from 'react-native-video';\n\n/**\n * WordPress dependencies\n */\nimport {\n\trequestFocalPointPickerTooltipShown,\n\tsetFocalPointPickerTooltipShown,\n} from '@wordpress/react-native-bridge';\nimport { __ } from '@wordpress/i18n';\nimport { Image, UnitControl } from '@wordpress/components';\nimport { useRef, useState, useMemo, useEffect } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport FocalPoint from './focal-point';\nimport Tooltip from './tooltip';\nimport styles from './style.scss';\nimport { isVideoType } from './utils';\nimport { clamp } from '../utils/math';\n\nconst MIN_POSITION_VALUE = 0;\nconst MAX_POSITION_VALUE = 100;\nconst FOCAL_POINT_UNITS = [ { default: 50, label: '%', value: '%' } ];\n\nfunction FocalPointPicker( props ) {\n\tconst { focalPoint, onChange, shouldEnableBottomSheetScroll, url } = props;\n\n\tconst isVideo = isVideoType( url );\n\n\tconst [ containerSize, setContainerSize ] = useState( null );\n\tconst [ sliderKey, setSliderKey ] = useState( 0 );\n\tconst [ displayPlaceholder, setDisplayPlaceholder ] = useState( true );\n\tconst [ videoNaturalSize, setVideoNaturalSize ] = useState( null );\n\tconst [ tooltipVisible, setTooltipVisible ] = useState( false );\n\n\tconst locationPageOffsetX = useRef();\n\tconst locationPageOffsetY = useRef();\n\tconst videoRef = useRef( null );\n\n\tuseEffect( () => {\n\t\trequestFocalPointPickerTooltipShown( ( tooltipShown ) => {\n\t\t\tif ( ! tooltipShown ) {\n\t\t\t\tsetTooltipVisible( true );\n\t\t\t\tsetFocalPointPickerTooltipShown( true );\n\t\t\t}\n\t\t} );\n\t}, [] );\n\n\t// Animated coordinates for drag handle.\n\tconst pan = useRef( new Animated.ValueXY() ).current;\n\n\t/**\n\t * Set drag handle position anytime focal point coordinates change.\n\t * E.g. initial render, dragging range sliders.\n\t */\n\tuseEffect( () => {\n\t\tif ( containerSize ) {\n\t\t\tpan.setValue( {\n\t\t\t\tx: focalPoint.x * containerSize.width,\n\t\t\t\ty: focalPoint.y * containerSize.height,\n\t\t\t} );\n\t\t}\n\t}, [ focalPoint, containerSize, pan ] );\n\n\t// Pan responder to manage drag handle interactivity.\n\tconst panResponder = useMemo(\n\t\t() =>\n\t\t\tPanResponder.create( {\n\t\t\t\tonStartShouldSetPanResponder: () => true,\n\t\t\t\tonStartShouldSetPanResponderCapture: () => true,\n\t\t\t\tonMoveShouldSetPanResponder: () => true,\n\t\t\t\tonMoveShouldSetPanResponderCapture: () => true,\n\n\t\t\t\tonPanResponderGrant: ( event ) => {\n\t\t\t\t\tshouldEnableBottomSheetScroll( false );\n\t\t\t\t\tconst {\n\t\t\t\t\t\tlocationX: x,\n\t\t\t\t\t\tlocationY: y,\n\t\t\t\t\t\tpageX,\n\t\t\t\t\t\tpageY,\n\t\t\t\t\t} = event.nativeEvent;\n\t\t\t\t\tlocationPageOffsetX.current = pageX - x;\n\t\t\t\t\tlocationPageOffsetY.current = pageY - y;\n\t\t\t\t\tpan.setValue( { x, y } ); // Set cursor to tap location.\n\t\t\t\t\tpan.extractOffset(); // Set offset to current value.\n\t\t\t\t},\n\t\t\t\t// Move cursor to match delta drag.\n\t\t\t\tonPanResponderMove: Animated.event(\n\t\t\t\t\t[ null, { dx: pan.x, dy: pan.y } ],\n\t\t\t\t\t{ useNativeDriver: false }\n\t\t\t\t),\n\t\t\t\tonPanResponderRelease: ( event ) => {\n\t\t\t\t\tshouldEnableBottomSheetScroll( true );\n\t\t\t\t\tpan.flattenOffset(); // Flatten offset into value.\n\t\t\t\t\tconst { pageX, pageY } = event.nativeEvent;\n\t\t\t\t\t// Ideally, x and y below are merely locationX and locationY from the\n\t\t\t\t\t// nativeEvent. However, we are required to compute these relative\n\t\t\t\t\t// coordinates to workaround a bug affecting Android's PanResponder.\n\t\t\t\t\t// Specifically, dragging the handle outside the bounds of the image\n\t\t\t\t\t// results in inaccurate locationX and locationY coordinates to be\n\t\t\t\t\t// reported. https://github.com/facebook/react-native/issues/15290#issuecomment-435494944\n\t\t\t\t\tconst x = pageX - locationPageOffsetX.current;\n\t\t\t\t\tconst y = pageY - locationPageOffsetY.current;\n\t\t\t\t\tonChange( {\n\t\t\t\t\t\tx: clamp( x / containerSize?.width, 0, 1 ).toFixed( 2 ),\n\t\t\t\t\t\ty: clamp( y / containerSize?.height, 0, 1 ).toFixed(\n\t\t\t\t\t\t\t2\n\t\t\t\t\t\t),\n\t\t\t\t\t} );\n\t\t\t\t\t// Slider (child of RangeCell) is uncontrolled, so we must increment a\n\t\t\t\t\t// key to re-mount and sync the pan gesture values to the sliders\n\t\t\t\t\t// https://github.com/callstack/react-native-slider/tree/v3.0.3#value\n\t\t\t\t\tsetSliderKey( ( prevState ) => prevState + 1 );\n\t\t\t\t},\n\t\t\t} ),\n\t\t[ containerSize, pan, onChange, shouldEnableBottomSheetScroll ]\n\t);\n\n\tconst mediaBackground = usePreferredColorSchemeStyle(\n\t\tstyles.mediaBackground,\n\t\tstyles.mediaBackgroundDark\n\t);\n\tconst imagePreviewStyles = [\n\t\tdisplayPlaceholder && styles.mediaPlaceholder,\n\t\tstyles.image,\n\t];\n\tconst videoPreviewStyles = [\n\t\t{\n\t\t\taspectRatio:\n\t\t\t\tvideoNaturalSize &&\n\t\t\t\tvideoNaturalSize.width / videoNaturalSize.height,\n\t\t\t// Hide Video component since it has black background while loading the source\n\t\t\topacity: displayPlaceholder ? 0 : 1,\n\t\t},\n\t\tstyles.video,\n\t\tdisplayPlaceholder && styles.mediaPlaceholder,\n\t];\n\tconst focalPointGroupStyles = [\n\t\tstyles.focalPointGroup,\n\t\t{\n\t\t\ttransform: [\n\t\t\t\t{\n\t\t\t\t\ttranslateX: pan.x.interpolate( {\n\t\t\t\t\t\tinputRange: [ 0, containerSize?.width || 0 ],\n\t\t\t\t\t\toutputRange: [ 0, containerSize?.width || 0 ],\n\t\t\t\t\t\textrapolate: 'clamp',\n\t\t\t\t\t} ),\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttranslateY: pan.y.interpolate( {\n\t\t\t\t\t\tinputRange: [ 0, containerSize?.height || 0 ],\n\t\t\t\t\t\toutputRange: [ 0, containerSize?.height || 0 ],\n\t\t\t\t\t\textrapolate: 'clamp',\n\t\t\t\t\t} ),\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t];\n\tconst FOCAL_POINT_SIZE = 50;\n\tconst focalPointStyles = [\n\t\tstyles.focalPoint,\n\t\t{\n\t\t\theight: FOCAL_POINT_SIZE,\n\t\t\tmarginLeft: -( FOCAL_POINT_SIZE / 2 ),\n\t\t\tmarginTop: -( FOCAL_POINT_SIZE / 2 ),\n\t\t\twidth: FOCAL_POINT_SIZE,\n\t\t},\n\t];\n\n\tconst onTooltipPress = () => setTooltipVisible( false );\n\tconst onMediaLayout = ( event ) => {\n\t\tconst { height, width } = event.nativeEvent.layout;\n\n\t\tif (\n\t\t\twidth !== 0 &&\n\t\t\theight !== 0 &&\n\t\t\t( containerSize?.width !== width ||\n\t\t\t\tcontainerSize?.height !== height )\n\t\t) {\n\t\t\tsetContainerSize( { width, height } );\n\t\t}\n\t};\n\tconst onImageDataLoad = () => setDisplayPlaceholder( false );\n\tconst onVideoLoad = ( event ) => {\n\t\tconst { height, width } = event.naturalSize;\n\t\tsetVideoNaturalSize( { height, width } );\n\t\tsetDisplayPlaceholder( false );\n\t\t// Avoid invisible, paused video on Android, presumably related to\n\t\t// https://github.com/react-native-video/react-native-video/issues/1979\n\t\tvideoRef?.current.seek( 0 );\n\t};\n\tconst onXCoordinateChange = ( x ) =>\n\t\tonChange( { x: ( x / 100 ).toFixed( 2 ) } );\n\tconst onYCoordinateChange = ( y ) =>\n\t\tonChange( { y: ( y / 100 ).toFixed( 2 ) } );\n\n\treturn (\n\t\t<View style={ styles.container }>\n\t\t\t<Tooltip onPress={ onTooltipPress } visible={ tooltipVisible }>\n\t\t\t\t<View style={ [ styles.media, mediaBackground ] }>\n\t\t\t\t\t<View\n\t\t\t\t\t\t{ ...panResponder.panHandlers }\n\t\t\t\t\t\tonLayout={ onMediaLayout }\n\t\t\t\t\t\tstyle={ styles.mediaContainer }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! isVideo && (\n\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\teditButton={ false }\n\t\t\t\t\t\t\t\thighlightSelected={ false }\n\t\t\t\t\t\t\t\tisSelected={ ! displayPlaceholder }\n\t\t\t\t\t\t\t\theight=\"100%\"\n\t\t\t\t\t\t\t\turl={ url }\n\t\t\t\t\t\t\t\tstyle={ imagePreviewStyles }\n\t\t\t\t\t\t\t\tonImageDataLoad={ onImageDataLoad }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ isVideo && (\n\t\t\t\t\t\t\t<Video\n\t\t\t\t\t\t\t\tmuted\n\t\t\t\t\t\t\t\tpaused\n\t\t\t\t\t\t\t\tdisableFocus\n\t\t\t\t\t\t\t\tonLoad={ onVideoLoad }\n\t\t\t\t\t\t\t\tref={ videoRef }\n\t\t\t\t\t\t\t\tresizeMode=\"contain\"\n\t\t\t\t\t\t\t\tsource={ { uri: url } }\n\t\t\t\t\t\t\t\tstyle={ videoPreviewStyles }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ ! displayPlaceholder && (\n\t\t\t\t\t\t\t<Animated.View\n\t\t\t\t\t\t\t\tpointerEvents=\"none\"\n\t\t\t\t\t\t\t\tstyle={ focalPointGroupStyles }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Tooltip.Label\n\t\t\t\t\t\t\t\t\ttext={ __( 'Drag to adjust focal point' ) }\n\t\t\t\t\t\t\t\t\tyOffset={ -( FOCAL_POINT_SIZE / 2 ) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<FocalPoint\n\t\t\t\t\t\t\t\t\theight={ styles.focalPoint?.height }\n\t\t\t\t\t\t\t\t\tstyle={ focalPointStyles }\n\t\t\t\t\t\t\t\t\twidth={ styles.focalPoint?.width }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</Animated.View>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</View>\n\t\t\t\t</View>\n\t\t\t\t<UnitControl\n\t\t\t\t\tkey={ `xAxis-${ sliderKey }` }\n\t\t\t\t\tlabel={ __( 'X-Axis Position' ) }\n\t\t\t\t\tmax={ MAX_POSITION_VALUE }\n\t\t\t\t\tmin={ MIN_POSITION_VALUE }\n\t\t\t\t\tonChange={ onXCoordinateChange }\n\t\t\t\t\tunit=\"%\"\n\t\t\t\t\tunits={ FOCAL_POINT_UNITS }\n\t\t\t\t\tvalue={ Math.round( focalPoint.x * 100 ) }\n\t\t\t\t/>\n\t\t\t\t<UnitControl\n\t\t\t\t\tkey={ `yAxis-${ sliderKey }` }\n\t\t\t\t\tlabel={ __( 'Y-Axis Position' ) }\n\t\t\t\t\tmax={ MAX_POSITION_VALUE }\n\t\t\t\t\tmin={ MIN_POSITION_VALUE }\n\t\t\t\t\tonChange={ onYCoordinateChange }\n\t\t\t\t\tunit=\"%\"\n\t\t\t\t\tunits={ FOCAL_POINT_UNITS }\n\t\t\t\t\tvalue={ Math.round( focalPoint.y * 100 ) }\n\t\t\t\t/>\n\t\t\t</Tooltip>\n\t\t</View>\n\t);\n}\n\nexport default FocalPointPicker;\n"]}
+{"version":3,"sources":["@wordpress/components/src/focal-point-picker/index.native.js"],"names":["Animated","PanResponder","View","Video","requestFocalPointPickerTooltipShown","setFocalPointPickerTooltipShown","__","Image","UnitControl","useRef","useState","useMemo","useEffect","usePreferredColorSchemeStyle","FocalPoint","Tooltip","styles","isVideoType","clamp","MIN_POSITION_VALUE","MAX_POSITION_VALUE","FOCAL_POINT_UNITS","default","label","value","FocalPointPicker","props","focalPoint","onChange","shouldEnableBottomSheetScroll","url","isVideo","containerSize","setContainerSize","sliderKey","setSliderKey","displayPlaceholder","setDisplayPlaceholder","videoNaturalSize","setVideoNaturalSize","tooltipVisible","setTooltipVisible","locationPageOffsetX","locationPageOffsetY","videoRef","tooltipShown","pan","ValueXY","current","setValue","x","width","y","height","panResponder","create","onStartShouldSetPanResponder","onStartShouldSetPanResponderCapture","onMoveShouldSetPanResponder","onMoveShouldSetPanResponderCapture","onPanResponderGrant","event","locationX","locationY","pageX","pageY","nativeEvent","extractOffset","onPanResponderMove","dx","dy","useNativeDriver","onPanResponderRelease","flattenOffset","toFixed","prevState","mediaBackground","mediaBackgroundDark","imagePreviewStyles","mediaPlaceholder","image","videoPreviewStyles","aspectRatio","opacity","video","focalPointGroupStyles","focalPointGroup","transform","translateX","interpolate","inputRange","outputRange","extrapolate","translateY","FOCAL_POINT_SIZE","focalPointStyles","marginLeft","marginTop","onTooltipPress","onMediaLayout","layout","onImageDataLoad","onVideoLoad","naturalSize","seek","onXCoordinateChange","onYCoordinateChange","container","media","panHandlers","mediaContainer","uri","Math","round"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,QAAT,EAAmBC,YAAnB,EAAiCC,IAAjC,QAA6C,cAA7C;AACA,OAAOC,KAAP,MAAkB,oBAAlB;AAEA;AACA;AACA;;AACA,SACCC,mCADD,EAECC,+BAFD,QAGO,gCAHP;AAIA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,KAAT,EAAgBC,WAAhB,QAAmC,uBAAnC;AACA,SAASC,MAAT,EAAiBC,QAAjB,EAA2BC,OAA3B,EAAoCC,SAApC,QAAqD,oBAArD;AACA,SAASC,4BAAT,QAA6C,oBAA7C;AAEA;AACA;AACA;;AACA,OAAOC,UAAP,MAAuB,eAAvB;AACA,OAAOC,OAAP,MAAoB,WAApB;AACA,OAAOC,MAAP,MAAmB,cAAnB;AACA,SAASC,WAAT,QAA4B,SAA5B;AACA,SAASC,KAAT,QAAsB,eAAtB;AAEA,MAAMC,kBAAkB,GAAG,CAA3B;AACA,MAAMC,kBAAkB,GAAG,GAA3B;AACA,MAAMC,iBAAiB,GAAG,CAAE;AAAEC,EAAAA,OAAO,EAAE,EAAX;AAAeC,EAAAA,KAAK,EAAE,GAAtB;AAA2BC,EAAAA,KAAK,EAAE;AAAlC,CAAF,CAA1B;;AAEA,SAASC,gBAAT,CAA2BC,KAA3B,EAAmC;AAClC,QAAM;AAAEC,IAAAA,UAAF;AAAcC,IAAAA,QAAd;AAAwBC,IAAAA,6BAAxB;AAAuDC,IAAAA;AAAvD,MAA+DJ,KAArE;AAEA,QAAMK,OAAO,GAAGd,WAAW,CAAEa,GAAF,CAA3B;AAEA,QAAM,CAAEE,aAAF,EAAiBC,gBAAjB,IAAsCvB,QAAQ,CAAE,IAAF,CAApD;AACA,QAAM,CAAEwB,SAAF,EAAaC,YAAb,IAA8BzB,QAAQ,CAAE,CAAF,CAA5C;AACA,QAAM,CAAE0B,kBAAF,EAAsBC,qBAAtB,IAAgD3B,QAAQ,CAAE,IAAF,CAA9D;AACA,QAAM,CAAE4B,gBAAF,EAAoBC,mBAApB,IAA4C7B,QAAQ,CAAE,IAAF,CAA1D;AACA,QAAM,CAAE8B,cAAF,EAAkBC,iBAAlB,IAAwC/B,QAAQ,CAAE,KAAF,CAAtD;AAEA,QAAMgC,mBAAmB,GAAGjC,MAAM,EAAlC;AACA,QAAMkC,mBAAmB,GAAGlC,MAAM,EAAlC;AACA,QAAMmC,QAAQ,GAAGnC,MAAM,CAAE,IAAF,CAAvB;AAEAG,EAAAA,SAAS,CAAE,MAAM;AAChBR,IAAAA,mCAAmC,CAAIyC,YAAF,IAAoB;AACxD,UAAK,CAAEA,YAAP,EAAsB;AACrBJ,QAAAA,iBAAiB,CAAE,IAAF,CAAjB;AACApC,QAAAA,+BAA+B,CAAE,IAAF,CAA/B;AACA;AACD,KALkC,CAAnC;AAMA,GAPQ,EAON,EAPM,CAAT,CAfkC,CAwBlC;;AACA,QAAMyC,GAAG,GAAGrC,MAAM,CAAE,IAAIT,QAAQ,CAAC+C,OAAb,EAAF,CAAN,CAAiCC,OAA7C;AAEA;AACD;AACA;AACA;;AACCpC,EAAAA,SAAS,CAAE,MAAM;AAChB,QAAKoB,aAAL,EAAqB;AACpBc,MAAAA,GAAG,CAACG,QAAJ,CAAc;AACbC,QAAAA,CAAC,EAAEvB,UAAU,CAACuB,CAAX,GAAelB,aAAa,CAACmB,KADnB;AAEbC,QAAAA,CAAC,EAAEzB,UAAU,CAACyB,CAAX,GAAepB,aAAa,CAACqB;AAFnB,OAAd;AAIA;AACD,GAPQ,EAON,CAAE1B,UAAF,EAAcK,aAAd,EAA6Bc,GAA7B,CAPM,CAAT,CA/BkC,CAwClC;;AACA,QAAMQ,YAAY,GAAG3C,OAAO,CAC3B,MACCV,YAAY,CAACsD,MAAb,CAAqB;AACpBC,IAAAA,4BAA4B,EAAE,MAAM,IADhB;AAEpBC,IAAAA,mCAAmC,EAAE,MAAM,IAFvB;AAGpBC,IAAAA,2BAA2B,EAAE,MAAM,IAHf;AAIpBC,IAAAA,kCAAkC,EAAE,MAAM,IAJtB;AAMpBC,IAAAA,mBAAmB,EAAIC,KAAF,IAAa;AACjChC,MAAAA,6BAA6B,CAAE,KAAF,CAA7B;AACA,YAAM;AACLiC,QAAAA,SAAS,EAAEZ,CADN;AAELa,QAAAA,SAAS,EAAEX,CAFN;AAGLY,QAAAA,KAHK;AAILC,QAAAA;AAJK,UAKFJ,KAAK,CAACK,WALV;AAMAxB,MAAAA,mBAAmB,CAACM,OAApB,GAA8BgB,KAAK,GAAGd,CAAtC;AACAP,MAAAA,mBAAmB,CAACK,OAApB,GAA8BiB,KAAK,GAAGb,CAAtC;AACAN,MAAAA,GAAG,CAACG,QAAJ,CAAc;AAAEC,QAAAA,CAAF;AAAKE,QAAAA;AAAL,OAAd,EAViC,CAUP;;AAC1BN,MAAAA,GAAG,CAACqB,aAAJ,GAXiC,CAWZ;AACrB,KAlBmB;AAmBpB;AACAC,IAAAA,kBAAkB,EAAEpE,QAAQ,CAAC6D,KAAT,CACnB,CAAE,IAAF,EAAQ;AAAEQ,MAAAA,EAAE,EAAEvB,GAAG,CAACI,CAAV;AAAaoB,MAAAA,EAAE,EAAExB,GAAG,CAACM;AAArB,KAAR,CADmB,EAEnB;AAAEmB,MAAAA,eAAe,EAAE;AAAnB,KAFmB,CApBA;AAwBpBC,IAAAA,qBAAqB,EAAIX,KAAF,IAAa;AACnChC,MAAAA,6BAA6B,CAAE,IAAF,CAA7B;AACAiB,MAAAA,GAAG,CAAC2B,aAAJ,GAFmC,CAEd;;AACrB,YAAM;AAAET,QAAAA,KAAF;AAASC,QAAAA;AAAT,UAAmBJ,KAAK,CAACK,WAA/B,CAHmC,CAInC;AACA;AACA;AACA;AACA;AACA;;AACA,YAAMhB,CAAC,GAAGc,KAAK,GAAGtB,mBAAmB,CAACM,OAAtC;AACA,YAAMI,CAAC,GAAGa,KAAK,GAAGtB,mBAAmB,CAACK,OAAtC;AACApB,MAAAA,QAAQ,CAAE;AACTsB,QAAAA,CAAC,EAAEhC,KAAK,CAAEgC,CAAC,GAAGlB,aAAa,EAAEmB,KAArB,EAA4B,CAA5B,EAA+B,CAA/B,CAAL,CAAwCuB,OAAxC,CAAiD,CAAjD,CADM;AAETtB,QAAAA,CAAC,EAAElC,KAAK,CAAEkC,CAAC,GAAGpB,aAAa,EAAEqB,MAArB,EAA6B,CAA7B,EAAgC,CAAhC,CAAL,CAAyCqB,OAAzC,CACF,CADE;AAFM,OAAF,CAAR,CAZmC,CAkBnC;AACA;AACA;;AACAvC,MAAAA,YAAY,CAAIwC,SAAF,IAAiBA,SAAS,GAAG,CAA/B,CAAZ;AACA;AA9CmB,GAArB,CAF0B,EAkD3B,CAAE3C,aAAF,EAAiBc,GAAjB,EAAsBlB,QAAtB,EAAgCC,6BAAhC,CAlD2B,CAA5B;AAqDA,QAAM+C,eAAe,GAAG/D,4BAA4B,CACnDG,MAAM,CAAC4D,eAD4C,EAEnD5D,MAAM,CAAC6D,mBAF4C,CAApD;AAIA,QAAMC,kBAAkB,GAAG,CAC1B1C,kBAAkB,IAAIpB,MAAM,CAAC+D,gBADH,EAE1B/D,MAAM,CAACgE,KAFmB,CAA3B;AAIA,QAAMC,kBAAkB,GAAG,CAC1B;AACCC,IAAAA,WAAW,EACV5C,gBAAgB,IAChBA,gBAAgB,CAACa,KAAjB,GAAyBb,gBAAgB,CAACe,MAH5C;AAIC;AACA8B,IAAAA,OAAO,EAAE/C,kBAAkB,GAAG,CAAH,GAAO;AALnC,GAD0B,EAQ1BpB,MAAM,CAACoE,KARmB,EAS1BhD,kBAAkB,IAAIpB,MAAM,CAAC+D,gBATH,CAA3B;AAWA,QAAMM,qBAAqB,GAAG,CAC7BrE,MAAM,CAACsE,eADsB,EAE7B;AACCC,IAAAA,SAAS,EAAE,CACV;AACCC,MAAAA,UAAU,EAAE1C,GAAG,CAACI,CAAJ,CAAMuC,WAAN,CAAmB;AAC9BC,QAAAA,UAAU,EAAE,CAAE,CAAF,EAAK1D,aAAa,EAAEmB,KAAf,IAAwB,CAA7B,CADkB;AAE9BwC,QAAAA,WAAW,EAAE,CAAE,CAAF,EAAK3D,aAAa,EAAEmB,KAAf,IAAwB,CAA7B,CAFiB;AAG9ByC,QAAAA,WAAW,EAAE;AAHiB,OAAnB;AADb,KADU,EAQV;AACCC,MAAAA,UAAU,EAAE/C,GAAG,CAACM,CAAJ,CAAMqC,WAAN,CAAmB;AAC9BC,QAAAA,UAAU,EAAE,CAAE,CAAF,EAAK1D,aAAa,EAAEqB,MAAf,IAAyB,CAA9B,CADkB;AAE9BsC,QAAAA,WAAW,EAAE,CAAE,CAAF,EAAK3D,aAAa,EAAEqB,MAAf,IAAyB,CAA9B,CAFiB;AAG9BuC,QAAAA,WAAW,EAAE;AAHiB,OAAnB;AADb,KARU;AADZ,GAF6B,CAA9B;AAqBA,QAAME,gBAAgB,GAAG,EAAzB;AACA,QAAMC,gBAAgB,GAAG,CACxB/E,MAAM,CAACW,UADiB,EAExB;AACC0B,IAAAA,MAAM,EAAEyC,gBADT;AAECE,IAAAA,UAAU,EAAE,EAAGF,gBAAgB,GAAG,CAAtB,CAFb;AAGCG,IAAAA,SAAS,EAAE,EAAGH,gBAAgB,GAAG,CAAtB,CAHZ;AAIC3C,IAAAA,KAAK,EAAE2C;AAJR,GAFwB,CAAzB;;AAUA,QAAMI,cAAc,GAAG,MAAMzD,iBAAiB,CAAE,KAAF,CAA9C;;AACA,QAAM0D,aAAa,GAAKtC,KAAF,IAAa;AAClC,UAAM;AAAER,MAAAA,MAAF;AAAUF,MAAAA;AAAV,QAAoBU,KAAK,CAACK,WAAN,CAAkBkC,MAA5C;;AAEA,QACCjD,KAAK,KAAK,CAAV,IACAE,MAAM,KAAK,CADX,KAEErB,aAAa,EAAEmB,KAAf,KAAyBA,KAAzB,IACDnB,aAAa,EAAEqB,MAAf,KAA0BA,MAH3B,CADD,EAKE;AACDpB,MAAAA,gBAAgB,CAAE;AAAEkB,QAAAA,KAAF;AAASE,QAAAA;AAAT,OAAF,CAAhB;AACA;AACD,GAXD;;AAYA,QAAMgD,eAAe,GAAG,MAAMhE,qBAAqB,CAAE,KAAF,CAAnD;;AACA,QAAMiE,WAAW,GAAKzC,KAAF,IAAa;AAChC,UAAM;AAAER,MAAAA,MAAF;AAAUF,MAAAA;AAAV,QAAoBU,KAAK,CAAC0C,WAAhC;AACAhE,IAAAA,mBAAmB,CAAE;AAAEc,MAAAA,MAAF;AAAUF,MAAAA;AAAV,KAAF,CAAnB;AACAd,IAAAA,qBAAqB,CAAE,KAAF,CAArB,CAHgC,CAIhC;AACA;;AACAO,IAAAA,QAAQ,EAAEI,OAAV,CAAkBwD,IAAlB,CAAwB,CAAxB;AACA,GAPD;;AAQA,QAAMC,mBAAmB,GAAKvD,CAAF,IAC3BtB,QAAQ,CAAE;AAAEsB,IAAAA,CAAC,EAAE,CAAEA,CAAC,GAAG,GAAN,EAAYwB,OAAZ,CAAqB,CAArB;AAAL,GAAF,CADT;;AAEA,QAAMgC,mBAAmB,GAAKtD,CAAF,IAC3BxB,QAAQ,CAAE;AAAEwB,IAAAA,CAAC,EAAE,CAAEA,CAAC,GAAG,GAAN,EAAYsB,OAAZ,CAAqB,CAArB;AAAL,GAAF,CADT;;AAGA,SACC,cAAC,IAAD;AAAM,IAAA,KAAK,EAAG1D,MAAM,CAAC2F;AAArB,KACC,cAAC,OAAD;AAAS,IAAA,OAAO,EAAGT,cAAnB;AAAoC,IAAA,OAAO,EAAG1D;AAA9C,KACC,cAAC,IAAD;AAAM,IAAA,KAAK,EAAG,CAAExB,MAAM,CAAC4F,KAAT,EAAgBhC,eAAhB;AAAd,KACC,cAAC,IAAD,OACMtB,YAAY,CAACuD,WADnB;AAEC,IAAA,QAAQ,EAAGV,aAFZ;AAGC,IAAA,KAAK,EAAGnF,MAAM,CAAC8F;AAHhB,KAKG,CAAE/E,OAAF,IACD,cAAC,KAAD;AACC,IAAA,UAAU,EAAG,KADd;AAEC,IAAA,iBAAiB,EAAG,KAFrB;AAGC,IAAA,UAAU,EAAG,CAAEK,kBAHhB;AAIC,IAAA,MAAM,EAAC,MAJR;AAKC,IAAA,GAAG,EAAGN,GALP;AAMC,IAAA,KAAK,EAAGgD,kBANT;AAOC,IAAA,eAAe,EAAGuB;AAPnB,IANF,EAgBGtE,OAAO,IACR,cAAC,KAAD;AACC,IAAA,KAAK,MADN;AAEC,IAAA,MAAM,MAFP;AAGC,IAAA,YAAY,MAHb;AAIC,IAAA,MAAM,EAAGuE,WAJV;AAKC,IAAA,GAAG,EAAG1D,QALP;AAMC,IAAA,UAAU,EAAC,SANZ;AAOC,IAAA,MAAM,EAAG;AAAEmE,MAAAA,GAAG,EAAEjF;AAAP,KAPV;AAQC,IAAA,KAAK,EAAGmD;AART,IAjBF,EA4BG,CAAE7C,kBAAF,IACD,cAAC,QAAD,CAAU,IAAV;AACC,IAAA,aAAa,EAAC,MADf;AAEC,IAAA,KAAK,EAAGiD;AAFT,KAIC,cAAC,OAAD,CAAS,KAAT;AACC,IAAA,IAAI,EAAG/E,EAAE,CAAE,4BAAF,CADV;AAEC,IAAA,OAAO,EAAG,EAAGwF,gBAAgB,GAAG,CAAtB;AAFX,IAJD,EAQC,cAAC,UAAD;AACC,IAAA,MAAM,EAAG9E,MAAM,CAACW,UAAP,EAAmB0B,MAD7B;AAEC,IAAA,KAAK,EAAG0C,gBAFT;AAGC,IAAA,KAAK,EAAG/E,MAAM,CAACW,UAAP,EAAmBwB;AAH5B,IARD,CA7BF,CADD,CADD,EAgDC,cAAC,WAAD;AACC,IAAA,GAAG,EAAI,SAASjB,SAAW,EAD5B;AAEC,IAAA,KAAK,EAAG5B,EAAE,CAAE,iBAAF,CAFX;AAGC,IAAA,GAAG,EAAGc,kBAHP;AAIC,IAAA,GAAG,EAAGD,kBAJP;AAKC,IAAA,QAAQ,EAAGsF,mBALZ;AAMC,IAAA,IAAI,EAAC,GANN;AAOC,IAAA,KAAK,EAAGpF,iBAPT;AAQC,IAAA,KAAK,EAAG2F,IAAI,CAACC,KAAL,CAAYtF,UAAU,CAACuB,CAAX,GAAe,GAA3B;AART,IAhDD,EA0DC,cAAC,WAAD;AACC,IAAA,GAAG,EAAI,SAAShB,SAAW,EAD5B;AAEC,IAAA,KAAK,EAAG5B,EAAE,CAAE,iBAAF,CAFX;AAGC,IAAA,GAAG,EAAGc,kBAHP;AAIC,IAAA,GAAG,EAAGD,kBAJP;AAKC,IAAA,QAAQ,EAAGuF,mBALZ;AAMC,IAAA,IAAI,EAAC,GANN;AAOC,IAAA,KAAK,EAAGrF,iBAPT;AAQC,IAAA,KAAK,EAAG2F,IAAI,CAACC,KAAL,CAAYtF,UAAU,CAACyB,CAAX,GAAe,GAA3B;AART,IA1DD,CADD,CADD;AAyEA;;AAED,eAAe3B,gBAAf","sourcesContent":["/**\n * External dependencies\n */\nimport { Animated, PanResponder, View } from 'react-native';\nimport Video from 'react-native-video';\n\n/**\n * WordPress dependencies\n */\nimport {\n\trequestFocalPointPickerTooltipShown,\n\tsetFocalPointPickerTooltipShown,\n} from '@wordpress/react-native-bridge';\nimport { __ } from '@wordpress/i18n';\nimport { Image, UnitControl } from '@wordpress/components';\nimport { useRef, useState, useMemo, useEffect } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport FocalPoint from './focal-point';\nimport Tooltip from './tooltip';\nimport styles from './style.scss';\nimport { isVideoType } from './utils';\nimport { clamp } from '../utils/math';\n\nconst MIN_POSITION_VALUE = 0;\nconst MAX_POSITION_VALUE = 100;\nconst FOCAL_POINT_UNITS = [ { default: 50, label: '%', value: '%' } ];\n\nfunction FocalPointPicker( props ) {\n\tconst { focalPoint, onChange, shouldEnableBottomSheetScroll, url } = props;\n\n\tconst isVideo = isVideoType( url );\n\n\tconst [ containerSize, setContainerSize ] = useState( null );\n\tconst [ sliderKey, setSliderKey ] = useState( 0 );\n\tconst [ displayPlaceholder, setDisplayPlaceholder ] = useState( true );\n\tconst [ videoNaturalSize, setVideoNaturalSize ] = useState( null );\n\tconst [ tooltipVisible, setTooltipVisible ] = useState( false );\n\n\tconst locationPageOffsetX = useRef();\n\tconst locationPageOffsetY = useRef();\n\tconst videoRef = useRef( null );\n\n\tuseEffect( () => {\n\t\trequestFocalPointPickerTooltipShown( ( tooltipShown ) => {\n\t\t\tif ( ! tooltipShown ) {\n\t\t\t\tsetTooltipVisible( true );\n\t\t\t\tsetFocalPointPickerTooltipShown( true );\n\t\t\t}\n\t\t} );\n\t}, [] );\n\n\t// Animated coordinates for drag handle.\n\tconst pan = useRef( new Animated.ValueXY() ).current;\n\n\t/**\n\t * Set drag handle position anytime focal point coordinates change.\n\t * E.g. initial render, dragging range sliders.\n\t */\n\tuseEffect( () => {\n\t\tif ( containerSize ) {\n\t\t\tpan.setValue( {\n\t\t\t\tx: focalPoint.x * containerSize.width,\n\t\t\t\ty: focalPoint.y * containerSize.height,\n\t\t\t} );\n\t\t}\n\t}, [ focalPoint, containerSize, pan ] );\n\n\t// Pan responder to manage drag handle interactivity.\n\tconst panResponder = useMemo(\n\t\t() =>\n\t\t\tPanResponder.create( {\n\t\t\t\tonStartShouldSetPanResponder: () => true,\n\t\t\t\tonStartShouldSetPanResponderCapture: () => true,\n\t\t\t\tonMoveShouldSetPanResponder: () => true,\n\t\t\t\tonMoveShouldSetPanResponderCapture: () => true,\n\n\t\t\t\tonPanResponderGrant: ( event ) => {\n\t\t\t\t\tshouldEnableBottomSheetScroll( false );\n\t\t\t\t\tconst {\n\t\t\t\t\t\tlocationX: x,\n\t\t\t\t\t\tlocationY: y,\n\t\t\t\t\t\tpageX,\n\t\t\t\t\t\tpageY,\n\t\t\t\t\t} = event.nativeEvent;\n\t\t\t\t\tlocationPageOffsetX.current = pageX - x;\n\t\t\t\t\tlocationPageOffsetY.current = pageY - y;\n\t\t\t\t\tpan.setValue( { x, y } ); // Set cursor to tap location.\n\t\t\t\t\tpan.extractOffset(); // Set offset to current value.\n\t\t\t\t},\n\t\t\t\t// Move cursor to match delta drag.\n\t\t\t\tonPanResponderMove: Animated.event(\n\t\t\t\t\t[ null, { dx: pan.x, dy: pan.y } ],\n\t\t\t\t\t{ useNativeDriver: false }\n\t\t\t\t),\n\t\t\t\tonPanResponderRelease: ( event ) => {\n\t\t\t\t\tshouldEnableBottomSheetScroll( true );\n\t\t\t\t\tpan.flattenOffset(); // Flatten offset into value.\n\t\t\t\t\tconst { pageX, pageY } = event.nativeEvent;\n\t\t\t\t\t// Ideally, x and y below are merely locationX and locationY from the\n\t\t\t\t\t// nativeEvent. However, we are required to compute these relative\n\t\t\t\t\t// coordinates to workaround a bug affecting Android's PanResponder.\n\t\t\t\t\t// Specifically, dragging the handle outside the bounds of the image\n\t\t\t\t\t// results in inaccurate locationX and locationY coordinates to be\n\t\t\t\t\t// reported. https://github.com/facebook/react-native/issues/15290#issuecomment-435494944\n\t\t\t\t\tconst x = pageX - locationPageOffsetX.current;\n\t\t\t\t\tconst y = pageY - locationPageOffsetY.current;\n\t\t\t\t\tonChange( {\n\t\t\t\t\t\tx: clamp( x / containerSize?.width, 0, 1 ).toFixed( 2 ),\n\t\t\t\t\t\ty: clamp( y / containerSize?.height, 0, 1 ).toFixed(\n\t\t\t\t\t\t\t2\n\t\t\t\t\t\t),\n\t\t\t\t\t} );\n\t\t\t\t\t// Slider (child of RangeCell) is uncontrolled, so we must increment a\n\t\t\t\t\t// key to re-mount and sync the pan gesture values to the sliders\n\t\t\t\t\t// https://github.com/callstack/react-native-slider/tree/v3.0.3#value\n\t\t\t\t\tsetSliderKey( ( prevState ) => prevState + 1 );\n\t\t\t\t},\n\t\t\t} ),\n\t\t[ containerSize, pan, onChange, shouldEnableBottomSheetScroll ]\n\t);\n\n\tconst mediaBackground = usePreferredColorSchemeStyle(\n\t\tstyles.mediaBackground,\n\t\tstyles.mediaBackgroundDark\n\t);\n\tconst imagePreviewStyles = [\n\t\tdisplayPlaceholder && styles.mediaPlaceholder,\n\t\tstyles.image,\n\t];\n\tconst videoPreviewStyles = [\n\t\t{\n\t\t\taspectRatio:\n\t\t\t\tvideoNaturalSize &&\n\t\t\t\tvideoNaturalSize.width / videoNaturalSize.height,\n\t\t\t// Hide Video component since it has black background while loading the source\n\t\t\topacity: displayPlaceholder ? 0 : 1,\n\t\t},\n\t\tstyles.video,\n\t\tdisplayPlaceholder && styles.mediaPlaceholder,\n\t];\n\tconst focalPointGroupStyles = [\n\t\tstyles.focalPointGroup,\n\t\t{\n\t\t\ttransform: [\n\t\t\t\t{\n\t\t\t\t\ttranslateX: pan.x.interpolate( {\n\t\t\t\t\t\tinputRange: [ 0, containerSize?.width || 0 ],\n\t\t\t\t\t\toutputRange: [ 0, containerSize?.width || 0 ],\n\t\t\t\t\t\textrapolate: 'clamp',\n\t\t\t\t\t} ),\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttranslateY: pan.y.interpolate( {\n\t\t\t\t\t\tinputRange: [ 0, containerSize?.height || 0 ],\n\t\t\t\t\t\toutputRange: [ 0, containerSize?.height || 0 ],\n\t\t\t\t\t\textrapolate: 'clamp',\n\t\t\t\t\t} ),\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t];\n\tconst FOCAL_POINT_SIZE = 50;\n\tconst focalPointStyles = [\n\t\tstyles.focalPoint,\n\t\t{\n\t\t\theight: FOCAL_POINT_SIZE,\n\t\t\tmarginLeft: -( FOCAL_POINT_SIZE / 2 ),\n\t\t\tmarginTop: -( FOCAL_POINT_SIZE / 2 ),\n\t\t\twidth: FOCAL_POINT_SIZE,\n\t\t},\n\t];\n\n\tconst onTooltipPress = () => setTooltipVisible( false );\n\tconst onMediaLayout = ( event ) => {\n\t\tconst { height, width } = event.nativeEvent.layout;\n\n\t\tif (\n\t\t\twidth !== 0 &&\n\t\t\theight !== 0 &&\n\t\t\t( containerSize?.width !== width ||\n\t\t\t\tcontainerSize?.height !== height )\n\t\t) {\n\t\t\tsetContainerSize( { width, height } );\n\t\t}\n\t};\n\tconst onImageDataLoad = () => setDisplayPlaceholder( false );\n\tconst onVideoLoad = ( event ) => {\n\t\tconst { height, width } = event.naturalSize;\n\t\tsetVideoNaturalSize( { height, width } );\n\t\tsetDisplayPlaceholder( false );\n\t\t// Avoid invisible, paused video on Android, presumably related to\n\t\t// https://github.com/react-native-video/react-native-video/issues/1979\n\t\tvideoRef?.current.seek( 0 );\n\t};\n\tconst onXCoordinateChange = ( x ) =>\n\t\tonChange( { x: ( x / 100 ).toFixed( 2 ) } );\n\tconst onYCoordinateChange = ( y ) =>\n\t\tonChange( { y: ( y / 100 ).toFixed( 2 ) } );\n\n\treturn (\n\t\t<View style={ styles.container }>\n\t\t\t<Tooltip onPress={ onTooltipPress } visible={ tooltipVisible }>\n\t\t\t\t<View style={ [ styles.media, mediaBackground ] }>\n\t\t\t\t\t<View\n\t\t\t\t\t\t{ ...panResponder.panHandlers }\n\t\t\t\t\t\tonLayout={ onMediaLayout }\n\t\t\t\t\t\tstyle={ styles.mediaContainer }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! isVideo && (\n\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\teditButton={ false }\n\t\t\t\t\t\t\t\thighlightSelected={ false }\n\t\t\t\t\t\t\t\tisSelected={ ! displayPlaceholder }\n\t\t\t\t\t\t\t\theight=\"100%\"\n\t\t\t\t\t\t\t\turl={ url }\n\t\t\t\t\t\t\t\tstyle={ imagePreviewStyles }\n\t\t\t\t\t\t\t\tonImageDataLoad={ onImageDataLoad }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ isVideo && (\n\t\t\t\t\t\t\t<Video\n\t\t\t\t\t\t\t\tmuted\n\t\t\t\t\t\t\t\tpaused\n\t\t\t\t\t\t\t\tdisableFocus\n\t\t\t\t\t\t\t\tonLoad={ onVideoLoad }\n\t\t\t\t\t\t\t\tref={ videoRef }\n\t\t\t\t\t\t\t\tresizeMode=\"contain\"\n\t\t\t\t\t\t\t\tsource={ { uri: url } }\n\t\t\t\t\t\t\t\tstyle={ videoPreviewStyles }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ ! displayPlaceholder && (\n\t\t\t\t\t\t\t<Animated.View\n\t\t\t\t\t\t\t\tpointerEvents=\"none\"\n\t\t\t\t\t\t\t\tstyle={ focalPointGroupStyles }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Tooltip.Label\n\t\t\t\t\t\t\t\t\ttext={ __( 'Drag to adjust focal point' ) }\n\t\t\t\t\t\t\t\t\tyOffset={ -( FOCAL_POINT_SIZE / 2 ) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<FocalPoint\n\t\t\t\t\t\t\t\t\theight={ styles.focalPoint?.height }\n\t\t\t\t\t\t\t\t\tstyle={ focalPointStyles }\n\t\t\t\t\t\t\t\t\twidth={ styles.focalPoint?.width }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</Animated.View>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</View>\n\t\t\t\t</View>\n\t\t\t\t<UnitControl\n\t\t\t\t\tkey={ `xAxis-${ sliderKey }` }\n\t\t\t\t\tlabel={ __( 'X-Axis Position' ) }\n\t\t\t\t\tmax={ MAX_POSITION_VALUE }\n\t\t\t\t\tmin={ MIN_POSITION_VALUE }\n\t\t\t\t\tonChange={ onXCoordinateChange }\n\t\t\t\t\tunit=\"%\"\n\t\t\t\t\tunits={ FOCAL_POINT_UNITS }\n\t\t\t\t\tvalue={ Math.round( focalPoint.x * 100 ) }\n\t\t\t\t/>\n\t\t\t\t<UnitControl\n\t\t\t\t\tkey={ `yAxis-${ sliderKey }` }\n\t\t\t\t\tlabel={ __( 'Y-Axis Position' ) }\n\t\t\t\t\tmax={ MAX_POSITION_VALUE }\n\t\t\t\t\tmin={ MIN_POSITION_VALUE }\n\t\t\t\t\tonChange={ onYCoordinateChange }\n\t\t\t\t\tunit=\"%\"\n\t\t\t\t\tunits={ FOCAL_POINT_UNITS }\n\t\t\t\t\tvalue={ Math.round( focalPoint.y * 100 ) }\n\t\t\t\t/>\n\t\t\t</Tooltip>\n\t\t</View>\n\t);\n}\n\nexport default FocalPointPicker;\n"]}