@wordpress/components 28.8.6 → 28.10.0

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

@@ -1 +1 @@
-{"version":3,"names":["Ariakit","css","COLORS","font","rtl","CONFIG","space","Icon","Truncate","ANIMATION_PARAMS","SCALE_AMOUNT_OUTER","SCALE_AMOUNT_CONTENT","DURATION","IN","OUT","EASING","CONTENT_WRAPPER_PADDING","ITEM_PADDING_BLOCK","ITEM_PADDING_INLINE","DEFAULT_BORDER_COLOR","theme","gray","DIVIDER_COLOR","LIGHTER_TEXT_COLOR","LIGHT_BACKGROUND_COLOR","TOOLBAR_VARIANT_BORDER_COLOR","foreground","DEFAULT_BOX_SHADOW","borderWidth","elevationMedium","TOOLBAR_VARIANT_BOX_SHADOW","GRID_TEMPLATE_COLS","MenuPopoverOuterWrapper","_styled","process","env","NODE_ENV","target","label","ui","background","radiusMedium","props","variant","MenuPopoverInnerWrapper","baseItem","radiusSmall","textDisabled","accent","white","DropdownMenuItem","MenuItem","DropdownMenuCheckboxItem","MenuItemCheckbox","DropdownMenuRadioItem","MenuItemRadio","ItemPrefixWrapper","DropdownMenuItemContentWrapper","DropdownMenuItemChildrenWrapper","ItemSuffixWrapper","DropdownMenuGroup","MenuGroup","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","DropdownMenuGroupLabel","MenuGroupLabel","DropdownMenuSeparator","MenuSeparator","SubmenuChevronIcon","transform","DropdownMenuItemLabel","DropdownMenuItemHelpText"],"sources":["@wordpress/components/src/dropdown-menu-v2/styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport { COLORS, font, rtl, CONFIG } from '../utils';\nimport { space } from '../utils/space';\nimport Icon from '../icon';\nimport { Truncate } from '../truncate';\nimport type { DropdownMenuContext } from './types';\n\nconst ANIMATION_PARAMS = {\n\tSCALE_AMOUNT_OUTER: 0.82,\n\tSCALE_AMOUNT_CONTENT: 0.9,\n\tDURATION: {\n\t\tIN: '400ms',\n\t\tOUT: '200ms',\n\t},\n\tEASING: 'cubic-bezier(0.33, 0, 0, 1)',\n};\n\nconst CONTENT_WRAPPER_PADDING = space( 1 );\nconst ITEM_PADDING_BLOCK = space( 2 );\nconst ITEM_PADDING_INLINE = space( 3 );\n\n// TODO:\n// - border color and divider color are different from COLORS.theme variables\n// - lighter text color is not defined in COLORS.theme, should it be?\n// - lighter background color is not defined in COLORS.theme, should it be?\nconst DEFAULT_BORDER_COLOR = COLORS.theme.gray[ 300 ];\nconst DIVIDER_COLOR = COLORS.theme.gray[ 200 ];\nconst LIGHTER_TEXT_COLOR = COLORS.theme.gray[ 700 ];\nconst LIGHT_BACKGROUND_COLOR = COLORS.theme.gray[ 100 ];\nconst TOOLBAR_VARIANT_BORDER_COLOR = COLORS.theme.foreground;\nconst DEFAULT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ DEFAULT_BORDER_COLOR }, ${ CONFIG.elevationMedium }`;\nconst TOOLBAR_VARIANT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ TOOLBAR_VARIANT_BORDER_COLOR }`;\n\nconst GRID_TEMPLATE_COLS = 'minmax( 0, max-content ) 1fr';\n\nexport const MenuPopoverOuterWrapper = styled.div<\n\tPick< DropdownMenuContext, 'variant' >\n>`\n\tposition: relative;\n\n\tbackground-color: ${ COLORS.ui.background };\n\tborder-radius: ${ CONFIG.radiusMedium };\n\t${ ( props ) => css`\n\t\tbox-shadow: ${ props.variant === 'toolbar'\n\t\t\t? TOOLBAR_VARIANT_BOX_SHADOW\n\t\t\t: DEFAULT_BOX_SHADOW };\n\t` }\n\n\toverflow: hidden;\n\n\t/* Open/close animation (outer wrapper) */\n\t@media not ( prefers-reduced-motion ) {\n\t\ttransition-property: transform, opacity;\n\t\ttransition-timing-function: ${ ANIMATION_PARAMS.EASING };\n\t\ttransition-duration: ${ ANIMATION_PARAMS.DURATION.IN };\n\t\twill-change: transform, opacity;\n\n\t\t/* Regardless of the side, fade in and out. */\n\t\topacity: 0;\n\t\t&:has( [data-enter] ) {\n\t\t\topacity: 1;\n\t\t}\n\n\t\t&:has( [data-leave] ) {\n\t\t\ttransition-duration: ${ ANIMATION_PARAMS.DURATION.OUT };\n\t\t}\n\n\t\t/* For menus opening on top and bottom side, animate the scale Y too. */\n\t\t&:has( [data-side='bottom'] ),\n\t\t&:has( [data-side='top'] ) {\n\t\t\ttransform: scaleY( ${ ANIMATION_PARAMS.SCALE_AMOUNT_OUTER } );\n\t\t}\n\t\t&:has( [data-side='bottom'] ) {\n\t\t\ttransform-origin: top;\n\t\t}\n\t\t&:has( [data-side='top'] ) {\n\t\t\ttransform-origin: bottom;\n\t\t}\n\t\t&:has( [data-enter][data-side='bottom'] ),\n\t\t&:has( [data-enter][data-side='top'] ),\n\t\t/* Do not animate the scaleY when closing the menu */\n\t\t&:has( [data-leave][data-side='bottom'] ),\n\t\t&:has( [data-leave][data-side='top'] ) {\n\t\t\ttransform: scaleY( 1 );\n\t\t}\n\t}\n`;\n\nexport const MenuPopoverInnerWrapper = styled.div`\n\tposition: relative;\n\t/* Same as popover component */\n\t/* TODO: is there a way to read the sass variable? */\n\tz-index: 1000000;\n\n\tdisplay: grid;\n\tgrid-template-columns: ${ GRID_TEMPLATE_COLS };\n\tgrid-template-rows: auto;\n\n\tbox-sizing: border-box;\n\tmin-width: 160px;\n\tmax-width: 320px;\n\tmax-height: var( --popover-available-height );\n\n\tpadding: ${ CONTENT_WRAPPER_PADDING };\n\n\toverscroll-behavior: contain;\n\toverflow: auto;\n\n\t/* Only visible in Windows High Contrast mode */\n\toutline: 2px solid transparent !important;\n\n\t/* Open/close animation (inner content wrapper) */\n\t@media not ( prefers-reduced-motion ) {\n\t\ttransition: inherit;\n\t\ttransform-origin: inherit;\n\n\t\t/*\n\t\t * For menus opening on top and bottom side, animate the scale Y too.\n\t\t * The content scales at a different rate than the outer container:\n\t\t * - first, counter the outer scale factor by doing \"1 / scaleAmountOuter\"\n\t\t * - then, apply the content scale factor.\n\t\t */\n\t\t&[data-side='bottom'],\n\t\t&[data-side='top'] {\n\t\t\ttransform: scaleY(\n\t\t\t\tcalc(\n\t\t\t\t\t1 / ${ ANIMATION_PARAMS.SCALE_AMOUNT_OUTER } *\n\t\t\t\t\t\t${ ANIMATION_PARAMS.SCALE_AMOUNT_CONTENT }\n\t\t\t\t)\n\t\t\t);\n\t\t}\n\t\t&[data-enter][data-side='bottom'],\n\t\t&[data-enter][data-side='top'],\n\t\t/* Do not animate the scaleY when closing the menu */\n\t\t&[data-leave][data-side='bottom'],\n\t\t&[data-leave][data-side='top'] {\n\t\t\ttransform: scaleY( 1 );\n\t\t}\n\t}\n`;\n\nconst baseItem = css`\n\tall: unset;\n\n\tposition: relative;\n\tmin-height: ${ space( 10 ) };\n\tbox-sizing: border-box;\n\n\t/* Occupy the width of all grid columns (ie. full width) */\n\tgrid-column: 1 / -1;\n\n\tdisplay: grid;\n\tgrid-template-columns: ${ GRID_TEMPLATE_COLS };\n\talign-items: center;\n\n\t@supports ( grid-template-columns: subgrid ) {\n\t\t/*\n\t\t * Define a grid layout which inherits the same columns configuration\n\t\t * from the parent layout (ie. subgrid). This allows the menu\n\t\t * to synchronize the indentation of all its items.\n\t\t */\n\t\tgrid-template-columns: subgrid;\n\t}\n\n\tfont-size: ${ font( 'default.fontSize' ) };\n\tfont-family: inherit;\n\tfont-weight: normal;\n\tline-height: 20px;\n\n\tcolor: ${ COLORS.theme.foreground };\n\tborder-radius: ${ CONFIG.radiusSmall };\n\n\tpadding-block: ${ ITEM_PADDING_BLOCK };\n\tpadding-inline: ${ ITEM_PADDING_INLINE };\n\n\t/*\n\t * Make sure that, when an item is scrolled into view (eg. while using the\n\t * keyboard to move focus), the whole item comes into view\n\t */\n\tscroll-margin: ${ CONTENT_WRAPPER_PADDING };\n\n\tuser-select: none;\n\toutline: none;\n\n\t&[aria-disabled='true'] {\n\t\tcolor: ${ COLORS.ui.textDisabled };\n\t\tcursor: not-allowed;\n\t}\n\n\t/* Active item (including hover) */\n\t&[data-active-item]:not( [data-focus-visible] ):not(\n\t\t\t[aria-disabled='true']\n\t\t) {\n\t\tbackground-color: ${ COLORS.theme.accent };\n\t\tcolor: ${ COLORS.white };\n\t}\n\n\t/* Keyboard focus (focus-visible) */\n\t&[data-focus-visible] {\n\t\tbox-shadow: 0 0 0 1.5px ${ COLORS.theme.accent };\n\n\t\t/* Only visible in Windows High Contrast mode */\n\t\toutline: 2px solid transparent;\n\t}\n\n\t/* Active (ie. pressed, mouse down) */\n\t&:active,\n\t&[data-active] {\n\t\t/* TODO: should there be a visual active state? */\n\t}\n\n\t/* When the item is the trigger of an open submenu */\n\t${ MenuPopoverInnerWrapper }:not(:focus) &:not(:focus)[aria-expanded=\"true\"] {\n\t\tbackground-color: ${ LIGHT_BACKGROUND_COLOR };\n\t\tcolor: ${ COLORS.theme.foreground };\n\t}\n\n\tsvg {\n\t\tfill: currentColor;\n\t}\n`;\n\nexport const DropdownMenuItem = styled( Ariakit.MenuItem )`\n\t${ baseItem };\n`;\n\nexport const DropdownMenuCheckboxItem = styled( Ariakit.MenuItemCheckbox )`\n\t${ baseItem };\n`;\n\nexport const DropdownMenuRadioItem = styled( Ariakit.MenuItemRadio )`\n\t${ baseItem };\n`;\n\nexport const ItemPrefixWrapper = styled.span`\n\t/* Always occupy the first column, even when auto-collapsing */\n\tgrid-column: 1;\n\n\t/*\n\t * Even when the item is not checked, occupy the same screen space to avoid\n\t * the space collapside when no items are checked.\n\t */\n\t${ DropdownMenuCheckboxItem } > &,\n\t${ DropdownMenuRadioItem } > & {\n\t\t/* Same width as the check icons */\n\t\tmin-width: ${ space( 6 ) };\n\t}\n\n\t${ DropdownMenuCheckboxItem } > &,\n\t${ DropdownMenuRadioItem } > &,\n\t&:not( :empty ) {\n\t\tmargin-inline-end: ${ space( 2 ) };\n\t}\n\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\n\tcolor: ${ LIGHTER_TEXT_COLOR };\n\n\t/*\n\t* When the parent menu item is active, except when it's a non-focused/hovered\n\t* submenu trigger (in that case, color should not be inherited)\n\t*/\n\t[data-active-item]:not( [data-focus-visible] ) > &,\n\t/* When the parent menu item is disabled */\n\t[aria-disabled='true'] > & {\n\t\tcolor: inherit;\n\t}\n`;\n\nexport const DropdownMenuItemContentWrapper = styled.div`\n\t/*\n\t * Always occupy the second column, since the first column\n\t * is taken by the prefix wrapper (when displayed).\n\t */\n\tgrid-column: 2;\n\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tgap: ${ space( 3 ) };\n\n\tpointer-events: none;\n`;\n\nexport const DropdownMenuItemChildrenWrapper = styled.div`\n\tflex: 1;\n\n\tdisplay: inline-flex;\n\tflex-direction: column;\n\tgap: ${ space( 1 ) };\n`;\n\nexport const ItemSuffixWrapper = styled.span`\n\tflex: 0 1 fit-content;\n\tmin-width: 0;\n\twidth: fit-content;\n\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: ${ space( 3 ) };\n\n\tcolor: ${ LIGHTER_TEXT_COLOR };\n\n\t/*\n\t * When the parent menu item is active, except when it's a non-focused/hovered\n\t * submenu trigger (in that case, color should not be inherited)\n\t */\n\t[data-active-item]:not( [data-focus-visible] ) *:not(${ MenuPopoverInnerWrapper }) &,\n\t/* When the parent menu item is disabled */\n\t[aria-disabled='true'] *:not(${ MenuPopoverInnerWrapper }) & {\n\t\tcolor: inherit;\n\t}\n`;\n\nexport const DropdownMenuGroup = styled( Ariakit.MenuGroup )`\n\t/* Ignore this element when calculating the layout. Useful for subgrid */\n\tdisplay: contents;\n`;\n\nexport const DropdownMenuGroupLabel = styled( Ariakit.MenuGroupLabel )`\n\t/* Occupy the width of all grid columns (ie. full width) */\n\tgrid-column: 1 / -1;\n\n\tpadding-block-start: ${ space( 3 ) };\n\tpadding-block-end: ${ space( 2 ) };\n\tpadding-inline: ${ ITEM_PADDING_INLINE };\n`;\n\nexport const DropdownMenuSeparator = styled( Ariakit.MenuSeparator )<\n\tPick< DropdownMenuContext, 'variant' >\n>`\n\t/* Occupy the width of all grid columns (ie. full width) */\n\tgrid-column: 1 / -1;\n\n\tborder: none;\n\theight: ${ CONFIG.borderWidth };\n\tbackground-color: ${ ( props ) =>\n\t\tprops.variant === 'toolbar'\n\t\t\t? TOOLBAR_VARIANT_BORDER_COLOR\n\t\t\t: DIVIDER_COLOR };\n\t/* Align with menu items' content */\n\tmargin-block: ${ space( 2 ) };\n\tmargin-inline: ${ ITEM_PADDING_INLINE };\n\n\t/* Only visible in Windows High Contrast mode */\n\toutline: 2px solid transparent;\n`;\n\nexport const SubmenuChevronIcon = styled( Icon )`\n\twidth: ${ space( 1.5 ) };\n\t${ rtl(\n\t\t{\n\t\t\ttransform: `scaleX(1)`,\n\t\t},\n\t\t{\n\t\t\ttransform: `scaleX(-1)`,\n\t\t}\n\t) };\n`;\n\nexport const DropdownMenuItemLabel = styled( Truncate )`\n\tfont-size: ${ font( 'default.fontSize' ) };\n\tline-height: 20px;\n\tcolor: inherit;\n`;\n\nexport const DropdownMenuItemHelpText = styled( Truncate )`\n\tfont-size: ${ font( 'helpText.fontSize' ) };\n\tline-height: 16px;\n\tcolor: ${ LIGHTER_TEXT_COLOR };\n\tword-break: break-all;\n\n\t[data-active-item]:not( [data-focus-visible] )\n\t\t*:not( ${ MenuPopoverInnerWrapper } )\n\t\t&,\n\t[aria-disabled='true'] *:not( ${ MenuPopoverInnerWrapper } ) & {\n\t\tcolor: inherit;\n\t}\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Ariakit","css","COLORS","font","rtl","CONFIG","space","Icon","Truncate","ANIMATION_PARAMS","SCALE_AMOUNT_OUTER","SCALE_AMOUNT_CONTENT","DURATION","IN","OUT","EASING","CONTENT_WRAPPER_PADDING","ITEM_PADDING_BLOCK","ITEM_PADDING_INLINE","DEFAULT_BORDER_COLOR","theme","gray","DIVIDER_COLOR","LIGHTER_TEXT_COLOR","LIGHT_BACKGROUND_COLOR","TOOLBAR_VARIANT_BORDER_COLOR","foreground","DEFAULT_BOX_SHADOW","borderWidth","elevationMedium","TOOLBAR_VARIANT_BOX_SHADOW","GRID_TEMPLATE_COLS","MenuPopoverOuterWrapper","_styled","process","env","NODE_ENV","target","label","ui","background","radiusMedium","props","variant","MenuPopoverInnerWrapper","baseItem","radiusSmall","textDisabled","accent","white","DropdownMenuItem","MenuItem","DropdownMenuCheckboxItem","MenuItemCheckbox","DropdownMenuRadioItem","MenuItemRadio","ItemPrefixWrapper","DropdownMenuItemContentWrapper","DropdownMenuItemChildrenWrapper","ItemSuffixWrapper","DropdownMenuGroup","MenuGroup","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","DropdownMenuGroupLabel","MenuGroupLabel","DropdownMenuSeparator","MenuSeparator","SubmenuChevronIcon","transform","DropdownMenuItemLabel","DropdownMenuItemHelpText"],"sources":["@wordpress/components/src/dropdown-menu-v2/styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport { COLORS, font, rtl, CONFIG } from '../utils';\nimport { space } from '../utils/space';\nimport Icon from '../icon';\nimport { Truncate } from '../truncate';\nimport type { DropdownMenuContext } from './types';\n\nconst ANIMATION_PARAMS = {\n\tSCALE_AMOUNT_OUTER: 0.82,\n\tSCALE_AMOUNT_CONTENT: 0.9,\n\tDURATION: {\n\t\tIN: '400ms',\n\t\tOUT: '200ms',\n\t},\n\tEASING: 'cubic-bezier(0.33, 0, 0, 1)',\n};\n\nconst CONTENT_WRAPPER_PADDING = space( 1 );\nconst ITEM_PADDING_BLOCK = space( 2 );\nconst ITEM_PADDING_INLINE = space( 3 );\n\n// TODO:\n// - border color and divider color are different from COLORS.theme variables\n// - lighter text color is not defined in COLORS.theme, should it be?\n// - lighter background color is not defined in COLORS.theme, should it be?\nconst DEFAULT_BORDER_COLOR = COLORS.theme.gray[ 300 ];\nconst DIVIDER_COLOR = COLORS.theme.gray[ 200 ];\nconst LIGHTER_TEXT_COLOR = COLORS.theme.gray[ 700 ];\nconst LIGHT_BACKGROUND_COLOR = COLORS.theme.gray[ 100 ];\nconst TOOLBAR_VARIANT_BORDER_COLOR = COLORS.theme.foreground;\nconst DEFAULT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ DEFAULT_BORDER_COLOR }, ${ CONFIG.elevationMedium }`;\nconst TOOLBAR_VARIANT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ TOOLBAR_VARIANT_BORDER_COLOR }`;\n\nconst GRID_TEMPLATE_COLS = 'minmax( 0, max-content ) 1fr';\n\nexport const MenuPopoverOuterWrapper = styled.div<\n\tPick< DropdownMenuContext, 'variant' >\n>`\n\tposition: relative;\n\n\tbackground-color: ${ COLORS.ui.background };\n\tborder-radius: ${ CONFIG.radiusMedium };\n\t${ ( props ) => css`\n\t\tbox-shadow: ${ props.variant === 'toolbar'\n\t\t\t? TOOLBAR_VARIANT_BOX_SHADOW\n\t\t\t: DEFAULT_BOX_SHADOW };\n\t` }\n\n\toverflow: hidden;\n\n\t/* Open/close animation (outer wrapper) */\n\t@media not ( prefers-reduced-motion ) {\n\t\ttransition-property: transform, opacity;\n\t\ttransition-timing-function: ${ ANIMATION_PARAMS.EASING };\n\t\ttransition-duration: ${ ANIMATION_PARAMS.DURATION.IN };\n\t\twill-change: transform, opacity;\n\n\t\t/* Regardless of the side, fade in and out. */\n\t\topacity: 0;\n\t\t&:has( [data-enter] ) {\n\t\t\topacity: 1;\n\t\t}\n\n\t\t&:has( [data-leave] ) {\n\t\t\ttransition-duration: ${ ANIMATION_PARAMS.DURATION.OUT };\n\t\t}\n\n\t\t/* For menus opening on top and bottom side, animate the scale Y too. */\n\t\t&:has( [data-side='bottom'] ),\n\t\t&:has( [data-side='top'] ) {\n\t\t\ttransform: scaleY( ${ ANIMATION_PARAMS.SCALE_AMOUNT_OUTER } );\n\t\t}\n\t\t&:has( [data-side='bottom'] ) {\n\t\t\ttransform-origin: top;\n\t\t}\n\t\t&:has( [data-side='top'] ) {\n\t\t\ttransform-origin: bottom;\n\t\t}\n\t\t&:has( [data-enter][data-side='bottom'] ),\n\t\t&:has( [data-enter][data-side='top'] ),\n\t\t/* Do not animate the scaleY when closing the menu */\n\t\t&:has( [data-leave][data-side='bottom'] ),\n\t\t&:has( [data-leave][data-side='top'] ) {\n\t\t\ttransform: scaleY( 1 );\n\t\t}\n\t}\n`;\n\nexport const MenuPopoverInnerWrapper = styled.div`\n\tposition: relative;\n\t/* Same as popover component */\n\t/* TODO: is there a way to read the sass variable? */\n\tz-index: 1000000;\n\n\tdisplay: grid;\n\tgrid-template-columns: ${ GRID_TEMPLATE_COLS };\n\tgrid-template-rows: auto;\n\n\tbox-sizing: border-box;\n\tmin-width: 160px;\n\tmax-width: 320px;\n\tmax-height: var( --popover-available-height );\n\n\tpadding: ${ CONTENT_WRAPPER_PADDING };\n\n\toverscroll-behavior: contain;\n\toverflow: auto;\n\n\t/* Only visible in Windows High Contrast mode */\n\toutline: 2px solid transparent !important;\n\n\t/* Open/close animation (inner content wrapper) */\n\t@media not ( prefers-reduced-motion ) {\n\t\ttransition: inherit;\n\t\ttransform-origin: inherit;\n\n\t\t/*\n\t\t * For menus opening on top and bottom side, animate the scale Y too.\n\t\t * The content scales at a different rate than the outer container:\n\t\t * - first, counter the outer scale factor by doing \"1 / scaleAmountOuter\"\n\t\t * - then, apply the content scale factor.\n\t\t */\n\t\t&[data-side='bottom'],\n\t\t&[data-side='top'] {\n\t\t\ttransform: scaleY(\n\t\t\t\tcalc(\n\t\t\t\t\t1 / ${ ANIMATION_PARAMS.SCALE_AMOUNT_OUTER } *\n\t\t\t\t\t\t${ ANIMATION_PARAMS.SCALE_AMOUNT_CONTENT }\n\t\t\t\t)\n\t\t\t);\n\t\t}\n\t\t&[data-enter][data-side='bottom'],\n\t\t&[data-enter][data-side='top'],\n\t\t/* Do not animate the scaleY when closing the menu */\n\t\t&[data-leave][data-side='bottom'],\n\t\t&[data-leave][data-side='top'] {\n\t\t\ttransform: scaleY( 1 );\n\t\t}\n\t}\n`;\n\nconst baseItem = css`\n\tall: unset;\n\n\tposition: relative;\n\tmin-height: ${ space( 10 ) };\n\tbox-sizing: border-box;\n\n\t/* Occupy the width of all grid columns (ie. full width) */\n\tgrid-column: 1 / -1;\n\n\tdisplay: grid;\n\tgrid-template-columns: ${ GRID_TEMPLATE_COLS };\n\talign-items: center;\n\n\t@supports ( grid-template-columns: subgrid ) {\n\t\t/*\n\t\t * Define a grid layout which inherits the same columns configuration\n\t\t * from the parent layout (ie. subgrid). This allows the menu\n\t\t * to synchronize the indentation of all its items.\n\t\t */\n\t\tgrid-template-columns: subgrid;\n\t}\n\n\tfont-size: ${ font( 'default.fontSize' ) };\n\tfont-family: inherit;\n\tfont-weight: normal;\n\tline-height: 20px;\n\n\tcolor: ${ COLORS.theme.foreground };\n\tborder-radius: ${ CONFIG.radiusSmall };\n\n\tpadding-block: ${ ITEM_PADDING_BLOCK };\n\tpadding-inline: ${ ITEM_PADDING_INLINE };\n\n\t/*\n\t * Make sure that, when an item is scrolled into view (eg. while using the\n\t * keyboard to move focus), the whole item comes into view\n\t */\n\tscroll-margin: ${ CONTENT_WRAPPER_PADDING };\n\n\tuser-select: none;\n\toutline: none;\n\n\t&[aria-disabled='true'] {\n\t\tcolor: ${ COLORS.ui.textDisabled };\n\t\tcursor: not-allowed;\n\t}\n\n\t/* Active item (including hover) */\n\t&[data-active-item]:not( [data-focus-visible] ):not(\n\t\t\t[aria-disabled='true']\n\t\t) {\n\t\tbackground-color: ${ COLORS.theme.accent };\n\t\tcolor: ${ COLORS.white };\n\t}\n\n\t/* Keyboard focus (focus-visible) */\n\t&[data-focus-visible] {\n\t\tbox-shadow: 0 0 0 1.5px ${ COLORS.theme.accent };\n\n\t\t/* Only visible in Windows High Contrast mode */\n\t\toutline: 2px solid transparent;\n\t}\n\n\t/* Active (ie. pressed, mouse down) */\n\t&:active,\n\t&[data-active] {\n\t\t/* TODO: should there be a visual active state? */\n\t}\n\n\t/* When the item is the trigger of an open submenu */\n\t${ MenuPopoverInnerWrapper }:not(:focus) &:not(:focus)[aria-expanded=\"true\"] {\n\t\tbackground-color: ${ LIGHT_BACKGROUND_COLOR };\n\t\tcolor: ${ COLORS.theme.foreground };\n\t}\n\n\tsvg {\n\t\tfill: currentColor;\n\t}\n`;\n\nexport const DropdownMenuItem = styled( Ariakit.MenuItem )`\n\t${ baseItem };\n`;\n\nexport const DropdownMenuCheckboxItem = styled( Ariakit.MenuItemCheckbox )`\n\t${ baseItem };\n`;\n\nexport const DropdownMenuRadioItem = styled( Ariakit.MenuItemRadio )`\n\t${ baseItem };\n`;\n\nexport const ItemPrefixWrapper = styled.span`\n\t/* Always occupy the first column, even when auto-collapsing */\n\tgrid-column: 1;\n\n\t/*\n\t * Even when the item is not checked, occupy the same screen space to avoid\n\t * the space collapside when no items are checked.\n\t */\n\t${ DropdownMenuCheckboxItem } > &,\n\t${ DropdownMenuRadioItem } > & {\n\t\t/* Same width as the check icons */\n\t\tmin-width: ${ space( 6 ) };\n\t}\n\n\t${ DropdownMenuCheckboxItem } > &,\n\t${ DropdownMenuRadioItem } > &,\n\t&:not( :empty ) {\n\t\tmargin-inline-end: ${ space( 2 ) };\n\t}\n\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\n\tcolor: ${ LIGHTER_TEXT_COLOR };\n\n\t/*\n\t* When the parent menu item is active, except when it's a non-focused/hovered\n\t* submenu trigger (in that case, color should not be inherited)\n\t*/\n\t[data-active-item]:not( [data-focus-visible] ) > &,\n\t/* When the parent menu item is disabled */\n\t[aria-disabled='true'] > & {\n\t\tcolor: inherit;\n\t}\n`;\n\nexport const DropdownMenuItemContentWrapper = styled.div`\n\t/*\n\t * Always occupy the second column, since the first column\n\t * is taken by the prefix wrapper (when displayed).\n\t */\n\tgrid-column: 2;\n\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tgap: ${ space( 3 ) };\n\n\tpointer-events: none;\n`;\n\nexport const DropdownMenuItemChildrenWrapper = styled.div`\n\tflex: 1;\n\n\tdisplay: inline-flex;\n\tflex-direction: column;\n\tgap: ${ space( 1 ) };\n`;\n\nexport const ItemSuffixWrapper = styled.span`\n\tflex: 0 1 fit-content;\n\tmin-width: 0;\n\twidth: fit-content;\n\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: ${ space( 3 ) };\n\n\tcolor: ${ LIGHTER_TEXT_COLOR };\n\n\t/*\n\t * When the parent menu item is active, except when it's a non-focused/hovered\n\t * submenu trigger (in that case, color should not be inherited)\n\t */\n\t[data-active-item]:not( [data-focus-visible] ) *:not(${ MenuPopoverInnerWrapper }) &,\n\t/* When the parent menu item is disabled */\n\t[aria-disabled='true'] *:not(${ MenuPopoverInnerWrapper }) & {\n\t\tcolor: inherit;\n\t}\n`;\n\nexport const DropdownMenuGroup = styled( Ariakit.MenuGroup )`\n\t/* Ignore this element when calculating the layout. Useful for subgrid */\n\tdisplay: contents;\n`;\n\nexport const DropdownMenuGroupLabel = styled( Ariakit.MenuGroupLabel )`\n\t/* Occupy the width of all grid columns (ie. full width) */\n\tgrid-column: 1 / -1;\n\n\tpadding-block-start: ${ space( 3 ) };\n\tpadding-block-end: ${ space( 2 ) };\n\tpadding-inline: ${ ITEM_PADDING_INLINE };\n`;\n\nexport const DropdownMenuSeparator = styled( Ariakit.MenuSeparator )<\n\tPick< DropdownMenuContext, 'variant' >\n>`\n\t/* Occupy the width of all grid columns (ie. full width) */\n\tgrid-column: 1 / -1;\n\n\tborder: none;\n\theight: ${ CONFIG.borderWidth };\n\tbackground-color: ${ ( props ) =>\n\t\tprops.variant === 'toolbar'\n\t\t\t? TOOLBAR_VARIANT_BORDER_COLOR\n\t\t\t: DIVIDER_COLOR };\n\t/* Align with menu items' content */\n\tmargin-block: ${ space( 2 ) };\n\tmargin-inline: ${ ITEM_PADDING_INLINE };\n\n\t/* Only visible in Windows High Contrast mode */\n\toutline: 2px solid transparent;\n`;\n\nexport const SubmenuChevronIcon = styled( Icon )`\n\twidth: ${ space( 1.5 ) };\n\t${ rtl(\n\t\t{\n\t\t\ttransform: `scaleX(1)`,\n\t\t},\n\t\t{\n\t\t\ttransform: `scaleX(-1)`,\n\t\t}\n\t) };\n`;\n\nexport const DropdownMenuItemLabel = styled( Truncate )`\n\tfont-size: ${ font( 'default.fontSize' ) };\n\tline-height: 20px;\n\tcolor: inherit;\n`;\n\nexport const DropdownMenuItemHelpText = styled( Truncate )`\n\tfont-size: ${ font( 'helpText.fontSize' ) };\n\tline-height: 16px;\n\tcolor: ${ LIGHTER_TEXT_COLOR };\n\tword-break: break-all;\n\n\t[data-active-item]:not( [data-focus-visible] )\n\t\t*:not( ${ MenuPopoverInnerWrapper } )\n\t\t&,\n\t[aria-disabled='true'] *:not( ${ MenuPopoverInnerWrapper } ) & {\n\t\tcolor: inherit;\n\t}\n`;\n"],"mappings":"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","ignoreList":[]}

package/build-module/duotone-picker/color-list-picker/index.js

@@ -14,9 +14,7 @@ import ColorIndicator from '../../color-indicator';
 import Icon from '../../icon';
 import { HStack } from '../../h-stack';
 import { useInstanceId } from '@wordpress/compose';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 function ColorOption({
   label,
   value,

package/build-module/duotone-picker/color-list-picker/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["useState","swatch","__","Button","ColorPalette","ColorIndicator","Icon","HStack","useInstanceId","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","ColorOption","label","value","colors","disableCustomColors","enableAlpha","onChange","isOpen","setIsOpen","idRoot","labelId","contentId","children","className","onClick","prev","justify","spacing","colorValue","icon","id","role","clearable","ColorListPicker","labels","map","index","newColor","newColors","slice"],"sources":["@wordpress/components/src/duotone-picker/color-list-picker/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport { swatch } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport ColorPalette from '../../color-palette';\nimport ColorIndicator from '../../color-indicator';\nimport Icon from '../../icon';\nimport { HStack } from '../../h-stack';\nimport type { ColorListPickerProps, ColorOptionProps } from './types';\nimport { useInstanceId } from '@wordpress/compose';\n\nfunction ColorOption( {\n\tlabel,\n\tvalue,\n\tcolors,\n\tdisableCustomColors,\n\tenableAlpha,\n\tonChange,\n}: ColorOptionProps ) {\n\tconst [ isOpen, setIsOpen ] = useState( false );\n\tconst idRoot = useInstanceId( ColorOption, 'color-list-picker-option' );\n\tconst labelId = `${ idRoot }__label`;\n\tconst contentId = `${ idRoot }__content`;\n\n\treturn (\n\t\t<>\n\t\t\t<Button\n\t\t\t\tclassName=\"components-color-list-picker__swatch-button\"\n\t\t\t\tonClick={ () => setIsOpen( ( prev ) => ! prev ) }\n\t\t\t\taria-expanded={ isOpen }\n\t\t\t\taria-controls={ contentId }\n\t\t\t>\n\t\t\t\t<HStack justify=\"flex-start\" spacing={ 2 }>\n\t\t\t\t\t{ value ? (\n\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\tcolorValue={ value }\n\t\t\t\t\t\t\tclassName=\"components-color-list-picker__swatch-color\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<Icon icon={ swatch } />\n\t\t\t\t\t) }\n\t\t\t\t\t<span id={ labelId }>{ label }</span>\n\t\t\t\t</HStack>\n\t\t\t</Button>\n\t\t\t<div\n\t\t\t\trole=\"group\"\n\t\t\t\tid={ contentId }\n\t\t\t\taria-labelledby={ labelId }\n\t\t\t\taria-hidden={ ! isOpen }\n\t\t\t>\n\t\t\t\t{ isOpen && (\n\t\t\t\t\t<ColorPalette\n\t\t\t\t\t\taria-label={ __( 'Color options' ) }\n\t\t\t\t\t\tclassName=\"components-color-list-picker__color-picker\"\n\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nfunction ColorListPicker( {\n\tcolors,\n\tlabels,\n\tvalue = [],\n\tdisableCustomColors,\n\tenableAlpha,\n\tonChange,\n}: ColorListPickerProps ) {\n\treturn (\n\t\t<div className=\"components-color-list-picker\">\n\t\t\t{ labels.map( ( label, index ) => (\n\t\t\t\t<ColorOption\n\t\t\t\t\tkey={ index }\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tvalue={ value[ index ] }\n\t\t\t\t\tcolors={ colors }\n\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\tonChange={ ( newColor ) => {\n\t\t\t\t\t\tconst newColors: ( string | undefined )[] =\n\t\t\t\t\t\t\tvalue.slice();\n\t\t\t\t\t\tnewColors[ index ] = newColor;\n\t\t\t\t\t\tonChange( newColors );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</div>\n\t);\n}\n\nexport default ColorListPicker;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useState","swatch","__","Button","ColorPalette","ColorIndicator","Icon","HStack","useInstanceId","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","ColorOption","label","value","colors","disableCustomColors","enableAlpha","onChange","isOpen","setIsOpen","idRoot","labelId","contentId","children","className","onClick","prev","justify","spacing","colorValue","icon","id","role","clearable","ColorListPicker","labels","map","index","newColor","newColors","slice"],"sources":["@wordpress/components/src/duotone-picker/color-list-picker/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport { swatch } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport ColorPalette from '../../color-palette';\nimport ColorIndicator from '../../color-indicator';\nimport Icon from '../../icon';\nimport { HStack } from '../../h-stack';\nimport type { ColorListPickerProps, ColorOptionProps } from './types';\nimport { useInstanceId } from '@wordpress/compose';\n\nfunction ColorOption( {\n\tlabel,\n\tvalue,\n\tcolors,\n\tdisableCustomColors,\n\tenableAlpha,\n\tonChange,\n}: ColorOptionProps ) {\n\tconst [ isOpen, setIsOpen ] = useState( false );\n\tconst idRoot = useInstanceId( ColorOption, 'color-list-picker-option' );\n\tconst labelId = `${ idRoot }__label`;\n\tconst contentId = `${ idRoot }__content`;\n\n\treturn (\n\t\t<>\n\t\t\t<Button\n\t\t\t\tclassName=\"components-color-list-picker__swatch-button\"\n\t\t\t\tonClick={ () => setIsOpen( ( prev ) => ! prev ) }\n\t\t\t\taria-expanded={ isOpen }\n\t\t\t\taria-controls={ contentId }\n\t\t\t>\n\t\t\t\t<HStack justify=\"flex-start\" spacing={ 2 }>\n\t\t\t\t\t{ value ? (\n\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\tcolorValue={ value }\n\t\t\t\t\t\t\tclassName=\"components-color-list-picker__swatch-color\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<Icon icon={ swatch } />\n\t\t\t\t\t) }\n\t\t\t\t\t<span id={ labelId }>{ label }</span>\n\t\t\t\t</HStack>\n\t\t\t</Button>\n\t\t\t<div\n\t\t\t\trole=\"group\"\n\t\t\t\tid={ contentId }\n\t\t\t\taria-labelledby={ labelId }\n\t\t\t\taria-hidden={ ! isOpen }\n\t\t\t>\n\t\t\t\t{ isOpen && (\n\t\t\t\t\t<ColorPalette\n\t\t\t\t\t\taria-label={ __( 'Color options' ) }\n\t\t\t\t\t\tclassName=\"components-color-list-picker__color-picker\"\n\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nfunction ColorListPicker( {\n\tcolors,\n\tlabels,\n\tvalue = [],\n\tdisableCustomColors,\n\tenableAlpha,\n\tonChange,\n}: ColorListPickerProps ) {\n\treturn (\n\t\t<div className=\"components-color-list-picker\">\n\t\t\t{ labels.map( ( label, index ) => (\n\t\t\t\t<ColorOption\n\t\t\t\t\tkey={ index }\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tvalue={ value[ index ] }\n\t\t\t\t\tcolors={ colors }\n\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\tonChange={ ( newColor ) => {\n\t\t\t\t\t\tconst newColors: ( string | undefined )[] =\n\t\t\t\t\t\t\tvalue.slice();\n\t\t\t\t\t\tnewColors[ index ] = newColor;\n\t\t\t\t\t\tonChange( newColors );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</div>\n\t);\n}\n\nexport default ColorListPicker;\n"],"mappings":"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","ignoreList":[]}

package/build-module/duotone-picker/duotone-picker.js

@@ -18,8 +18,7 @@ import { VStack } from '../v-stack';
 import CustomDuotoneBar from './custom-duotone-bar';
 import { getDefaultColors, getGradientFromCSSColors } from './utils';
 import { Spacer } from '../spacer';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * ```jsx
  * import { DuotonePicker, DuotoneSwatch } from '@wordpress/components';

package/build-module/duotone-picker/duotone-picker.js.map

@@ -1 +1 @@
-{"version":3,"names":["fastDeepEqual","useMemo","__","sprintf","ColorListPicker","CircularOptionPicker","VStack","CustomDuotoneBar","getDefaultColors","getGradientFromCSSColors","Spacer","jsx","_jsx","jsxs","_jsxs","DuotonePicker","asButtons","loop","clearable","unsetable","colorPalette","duotonePalette","disableCustomColors","disableCustomDuotone","value","onChange","ariaLabel","ariaLabelledby","otherProps","defaultDark","defaultLight","isUnset","unsetOptionLabel","unsetOption","Option","isSelected","tooltipText","className","onClick","undefined","duotoneOptions","map","colors","slug","name","style","background","color","label","metaProps","_metaProps","options","actions","ButtonAction","children","paddingTop","length","spacing","labels","enableAlpha","newColors","newValue"],"sources":["@wordpress/components/src/duotone-picker/duotone-picker.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport fastDeepEqual from 'fast-deep-equal/es6';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport ColorListPicker from './color-list-picker';\nimport CircularOptionPicker from '../circular-option-picker';\nimport { VStack } from '../v-stack';\n\nimport CustomDuotoneBar from './custom-duotone-bar';\nimport { getDefaultColors, getGradientFromCSSColors } from './utils';\nimport { Spacer } from '../spacer';\nimport type { DuotonePickerProps } from './types';\n\n/**\n * ```jsx\n * import { DuotonePicker, DuotoneSwatch } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const DUOTONE_PALETTE = [\n * \t{ colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' },\n * \t{ colors: [ '#000097', '#ff4747' ], name: 'Blue and red', slug: 'blue-red' },\n * ];\n *\n * const COLOR_PALETTE = [\n * \t{ color: '#ff4747', name: 'Red', slug: 'red' },\n * \t{ color: '#fcff41', name: 'Yellow', slug: 'yellow' },\n * \t{ color: '#000097', name: 'Blue', slug: 'blue' },\n * \t{ color: '#8c00b7', name: 'Purple', slug: 'purple' },\n * ];\n *\n * const Example = () => {\n * \tconst [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] );\n * \treturn (\n * \t\t<>\n * \t\t\t<DuotonePicker\n * \t\t\t\tduotonePalette={ DUOTONE_PALETTE }\n * \t\t\t\tcolorPalette={ COLOR_PALETTE }\n * \t\t\t\tvalue={ duotone }\n * \t\t\t\tonChange={ setDuotone }\n * \t\t\t/>\n * \t\t\t<DuotoneSwatch values={ duotone } />\n * \t\t</>\n * \t);\n * };\n * ```\n */\nfunction DuotonePicker( {\n\tasButtons,\n\tloop,\n\tclearable = true,\n\tunsetable = true,\n\tcolorPalette,\n\tduotonePalette,\n\tdisableCustomColors,\n\tdisableCustomDuotone,\n\tvalue,\n\tonChange,\n\t'aria-label': ariaLabel,\n\t'aria-labelledby': ariaLabelledby,\n\t...otherProps\n}: DuotonePickerProps ) {\n\tconst [ defaultDark, defaultLight ] = useMemo(\n\t\t() => getDefaultColors( colorPalette ),\n\t\t[ colorPalette ]\n\t);\n\n\tconst isUnset = value === 'unset';\n\tconst unsetOptionLabel = __( 'Unset' );\n\n\tconst unsetOption = (\n\t\t<CircularOptionPicker.Option\n\t\t\tkey=\"unset\"\n\t\t\tvalue=\"unset\"\n\t\t\tisSelected={ isUnset }\n\t\t\ttooltipText={ unsetOptionLabel }\n\t\t\taria-label={ unsetOptionLabel }\n\t\t\tclassName=\"components-duotone-picker__color-indicator\"\n\t\t\tonClick={ () => {\n\t\t\t\tonChange( isUnset ? undefined : 'unset' );\n\t\t\t} }\n\t\t/>\n\t);\n\n\tconst duotoneOptions = duotonePalette.map( ( { colors, slug, name } ) => {\n\t\tconst style = {\n\t\t\tbackground: getGradientFromCSSColors( colors, '135deg' ),\n\t\t\tcolor: 'transparent',\n\t\t};\n\t\tconst tooltipText =\n\t\t\tname ??\n\t\t\tsprintf(\n\t\t\t\t// translators: %s: duotone code e.g: \"dark-grayscale\" or \"7f7f7f-ffffff\".\n\t\t\t\t__( 'Duotone code: %s' ),\n\t\t\t\tslug\n\t\t\t);\n\t\tconst label = name\n\t\t\t? sprintf(\n\t\t\t\t\t// translators: %s: The name of the option e.g: \"Dark grayscale\".\n\t\t\t\t\t__( 'Duotone: %s' ),\n\t\t\t\t\tname\n\t\t\t  )\n\t\t\t: tooltipText;\n\t\tconst isSelected = fastDeepEqual( colors, value );\n\n\t\treturn (\n\t\t\t<CircularOptionPicker.Option\n\t\t\t\tkey={ slug }\n\t\t\t\tvalue={ colors }\n\t\t\t\tisSelected={ isSelected }\n\t\t\t\taria-label={ label }\n\t\t\t\ttooltipText={ tooltipText }\n\t\t\t\tstyle={ style }\n\t\t\t\tonClick={ () => {\n\t\t\t\t\tonChange( isSelected ? undefined : colors );\n\t\t\t\t} }\n\t\t\t/>\n\t\t);\n\t} );\n\n\tlet metaProps:\n\t\t| { asButtons: false; loop?: boolean; 'aria-label': string }\n\t\t| { asButtons: false; loop?: boolean; 'aria-labelledby': string }\n\t\t| { asButtons: true };\n\n\tif ( asButtons ) {\n\t\tmetaProps = { asButtons: true };\n\t} else {\n\t\tconst _metaProps: { asButtons: false; loop?: boolean } = {\n\t\t\tasButtons: false,\n\t\t\tloop,\n\t\t};\n\n\t\tif ( ariaLabel ) {\n\t\t\tmetaProps = { ..._metaProps, 'aria-label': ariaLabel };\n\t\t} else if ( ariaLabelledby ) {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-labelledby': ariaLabelledby,\n\t\t\t};\n\t\t} else {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-label': __( 'Custom color picker.' ),\n\t\t\t};\n\t\t}\n\t}\n\n\tconst options = unsetable\n\t\t? [ unsetOption, ...duotoneOptions ]\n\t\t: duotoneOptions;\n\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\t{ ...otherProps }\n\t\t\t{ ...metaProps }\n\t\t\toptions={ options }\n\t\t\tactions={\n\t\t\t\t!! clearable && (\n\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\tonClick={ () => onChange( undefined ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t)\n\t\t\t}\n\t\t>\n\t\t\t<Spacer paddingTop={ options.length === 0 ? 0 : 4 }>\n\t\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t\t{ ! disableCustomColors && ! disableCustomDuotone && (\n\t\t\t\t\t\t<CustomDuotoneBar\n\t\t\t\t\t\t\tvalue={ isUnset ? undefined : value }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! disableCustomDuotone && (\n\t\t\t\t\t\t<ColorListPicker\n\t\t\t\t\t\t\tlabels={ [ __( 'Shadows' ), __( 'Highlights' ) ] }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tvalue={ isUnset ? undefined : value }\n\t\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t\t\tonChange={ ( newColors ) => {\n\t\t\t\t\t\t\t\tif ( ! newColors[ 0 ] ) {\n\t\t\t\t\t\t\t\t\tnewColors[ 0 ] = defaultDark;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tif ( ! newColors[ 1 ] ) {\n\t\t\t\t\t\t\t\t\tnewColors[ 1 ] = defaultLight;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tconst newValue =\n\t\t\t\t\t\t\t\t\tnewColors.length >= 2\n\t\t\t\t\t\t\t\t\t\t? newColors\n\t\t\t\t\t\t\t\t\t\t: undefined;\n\t\t\t\t\t\t\t\t// @ts-expect-error TODO: The color arrays for a DuotonePicker should be a tuple of two colors,\n\t\t\t\t\t\t\t\t// but it's currently typed as a string[].\n\t\t\t\t\t\t\t\t// See also https://github.com/WordPress/gutenberg/pull/49060#discussion_r1136951035\n\t\t\t\t\t\t\t\tonChange( newValue );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</VStack>\n\t\t\t</Spacer>\n\t\t</CircularOptionPicker>\n\t);\n}\n\nexport default DuotonePicker;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["fastDeepEqual","useMemo","__","sprintf","ColorListPicker","CircularOptionPicker","VStack","CustomDuotoneBar","getDefaultColors","getGradientFromCSSColors","Spacer","jsx","_jsx","jsxs","_jsxs","DuotonePicker","asButtons","loop","clearable","unsetable","colorPalette","duotonePalette","disableCustomColors","disableCustomDuotone","value","onChange","ariaLabel","ariaLabelledby","otherProps","defaultDark","defaultLight","isUnset","unsetOptionLabel","unsetOption","Option","isSelected","tooltipText","className","onClick","undefined","duotoneOptions","map","colors","slug","name","style","background","color","label","metaProps","_metaProps","options","actions","ButtonAction","children","paddingTop","length","spacing","labels","enableAlpha","newColors","newValue"],"sources":["@wordpress/components/src/duotone-picker/duotone-picker.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport fastDeepEqual from 'fast-deep-equal/es6';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport ColorListPicker from './color-list-picker';\nimport CircularOptionPicker from '../circular-option-picker';\nimport { VStack } from '../v-stack';\n\nimport CustomDuotoneBar from './custom-duotone-bar';\nimport { getDefaultColors, getGradientFromCSSColors } from './utils';\nimport { Spacer } from '../spacer';\nimport type { DuotonePickerProps } from './types';\n\n/**\n * ```jsx\n * import { DuotonePicker, DuotoneSwatch } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const DUOTONE_PALETTE = [\n * \t{ colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' },\n * \t{ colors: [ '#000097', '#ff4747' ], name: 'Blue and red', slug: 'blue-red' },\n * ];\n *\n * const COLOR_PALETTE = [\n * \t{ color: '#ff4747', name: 'Red', slug: 'red' },\n * \t{ color: '#fcff41', name: 'Yellow', slug: 'yellow' },\n * \t{ color: '#000097', name: 'Blue', slug: 'blue' },\n * \t{ color: '#8c00b7', name: 'Purple', slug: 'purple' },\n * ];\n *\n * const Example = () => {\n * \tconst [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] );\n * \treturn (\n * \t\t<>\n * \t\t\t<DuotonePicker\n * \t\t\t\tduotonePalette={ DUOTONE_PALETTE }\n * \t\t\t\tcolorPalette={ COLOR_PALETTE }\n * \t\t\t\tvalue={ duotone }\n * \t\t\t\tonChange={ setDuotone }\n * \t\t\t/>\n * \t\t\t<DuotoneSwatch values={ duotone } />\n * \t\t</>\n * \t);\n * };\n * ```\n */\nfunction DuotonePicker( {\n\tasButtons,\n\tloop,\n\tclearable = true,\n\tunsetable = true,\n\tcolorPalette,\n\tduotonePalette,\n\tdisableCustomColors,\n\tdisableCustomDuotone,\n\tvalue,\n\tonChange,\n\t'aria-label': ariaLabel,\n\t'aria-labelledby': ariaLabelledby,\n\t...otherProps\n}: DuotonePickerProps ) {\n\tconst [ defaultDark, defaultLight ] = useMemo(\n\t\t() => getDefaultColors( colorPalette ),\n\t\t[ colorPalette ]\n\t);\n\n\tconst isUnset = value === 'unset';\n\tconst unsetOptionLabel = __( 'Unset' );\n\n\tconst unsetOption = (\n\t\t<CircularOptionPicker.Option\n\t\t\tkey=\"unset\"\n\t\t\tvalue=\"unset\"\n\t\t\tisSelected={ isUnset }\n\t\t\ttooltipText={ unsetOptionLabel }\n\t\t\taria-label={ unsetOptionLabel }\n\t\t\tclassName=\"components-duotone-picker__color-indicator\"\n\t\t\tonClick={ () => {\n\t\t\t\tonChange( isUnset ? undefined : 'unset' );\n\t\t\t} }\n\t\t/>\n\t);\n\n\tconst duotoneOptions = duotonePalette.map( ( { colors, slug, name } ) => {\n\t\tconst style = {\n\t\t\tbackground: getGradientFromCSSColors( colors, '135deg' ),\n\t\t\tcolor: 'transparent',\n\t\t};\n\t\tconst tooltipText =\n\t\t\tname ??\n\t\t\tsprintf(\n\t\t\t\t// translators: %s: duotone code e.g: \"dark-grayscale\" or \"7f7f7f-ffffff\".\n\t\t\t\t__( 'Duotone code: %s' ),\n\t\t\t\tslug\n\t\t\t);\n\t\tconst label = name\n\t\t\t? sprintf(\n\t\t\t\t\t// translators: %s: The name of the option e.g: \"Dark grayscale\".\n\t\t\t\t\t__( 'Duotone: %s' ),\n\t\t\t\t\tname\n\t\t\t  )\n\t\t\t: tooltipText;\n\t\tconst isSelected = fastDeepEqual( colors, value );\n\n\t\treturn (\n\t\t\t<CircularOptionPicker.Option\n\t\t\t\tkey={ slug }\n\t\t\t\tvalue={ colors }\n\t\t\t\tisSelected={ isSelected }\n\t\t\t\taria-label={ label }\n\t\t\t\ttooltipText={ tooltipText }\n\t\t\t\tstyle={ style }\n\t\t\t\tonClick={ () => {\n\t\t\t\t\tonChange( isSelected ? undefined : colors );\n\t\t\t\t} }\n\t\t\t/>\n\t\t);\n\t} );\n\n\tlet metaProps:\n\t\t| { asButtons: false; loop?: boolean; 'aria-label': string }\n\t\t| { asButtons: false; loop?: boolean; 'aria-labelledby': string }\n\t\t| { asButtons: true };\n\n\tif ( asButtons ) {\n\t\tmetaProps = { asButtons: true };\n\t} else {\n\t\tconst _metaProps: { asButtons: false; loop?: boolean } = {\n\t\t\tasButtons: false,\n\t\t\tloop,\n\t\t};\n\n\t\tif ( ariaLabel ) {\n\t\t\tmetaProps = { ..._metaProps, 'aria-label': ariaLabel };\n\t\t} else if ( ariaLabelledby ) {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-labelledby': ariaLabelledby,\n\t\t\t};\n\t\t} else {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-label': __( 'Custom color picker.' ),\n\t\t\t};\n\t\t}\n\t}\n\n\tconst options = unsetable\n\t\t? [ unsetOption, ...duotoneOptions ]\n\t\t: duotoneOptions;\n\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\t{ ...otherProps }\n\t\t\t{ ...metaProps }\n\t\t\toptions={ options }\n\t\t\tactions={\n\t\t\t\t!! clearable && (\n\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\tonClick={ () => onChange( undefined ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t)\n\t\t\t}\n\t\t>\n\t\t\t<Spacer paddingTop={ options.length === 0 ? 0 : 4 }>\n\t\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t\t{ ! disableCustomColors && ! disableCustomDuotone && (\n\t\t\t\t\t\t<CustomDuotoneBar\n\t\t\t\t\t\t\tvalue={ isUnset ? undefined : value }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! disableCustomDuotone && (\n\t\t\t\t\t\t<ColorListPicker\n\t\t\t\t\t\t\tlabels={ [ __( 'Shadows' ), __( 'Highlights' ) ] }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tvalue={ isUnset ? undefined : value }\n\t\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t\t\tonChange={ ( newColors ) => {\n\t\t\t\t\t\t\t\tif ( ! newColors[ 0 ] ) {\n\t\t\t\t\t\t\t\t\tnewColors[ 0 ] = defaultDark;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tif ( ! newColors[ 1 ] ) {\n\t\t\t\t\t\t\t\t\tnewColors[ 1 ] = defaultLight;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tconst newValue =\n\t\t\t\t\t\t\t\t\tnewColors.length >= 2\n\t\t\t\t\t\t\t\t\t\t? newColors\n\t\t\t\t\t\t\t\t\t\t: undefined;\n\t\t\t\t\t\t\t\t// @ts-expect-error TODO: The color arrays for a DuotonePicker should be a tuple of two colors,\n\t\t\t\t\t\t\t\t// but it's currently typed as a string[].\n\t\t\t\t\t\t\t\t// See also https://github.com/WordPress/gutenberg/pull/49060#discussion_r1136951035\n\t\t\t\t\t\t\t\tonChange( newValue );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</VStack>\n\t\t\t</Spacer>\n\t\t</CircularOptionPicker>\n\t);\n}\n\nexport default DuotonePicker;\n"],"mappings":"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","ignoreList":[]}

package/build-module/duotone-picker/utils.js.map

@@ -1 +1 @@
-{"version":3,"names":["colord","extend","namesPlugin","getDefaultColors","palette","length","map","color","brightness","reduce","min","max","current","getGradientFromCSSColors","colors","angle","l","stops","c","i","join","getColorStopsFromColors","position","getColorsFromColorStops","colorStops"],"sources":["@wordpress/components/src/duotone-picker/utils.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * Internal dependencies\n */\nimport type { DuotonePickerProps } from './types';\n\nextend( [ namesPlugin ] );\n\n/**\n * Object representation for a color.\n *\n * @typedef {Object} RGBColor\n * @property {number} r Red component of the color in the range [0,1].\n * @property {number} g Green component of the color in the range [0,1].\n * @property {number} b Blue component of the color in the range [0,1].\n */\n\n/**\n * Calculate the brightest and darkest values from a color palette.\n *\n * @param palette Color palette for the theme.\n *\n * @return Tuple of the darkest color and brightest color.\n */\nexport function getDefaultColors(\n\tpalette: DuotonePickerProps[ 'colorPalette' ]\n) {\n\t// A default dark and light color are required.\n\tif ( ! palette || palette.length < 2 ) {\n\t\treturn [ '#000', '#fff' ];\n\t}\n\n\treturn palette\n\t\t.map( ( { color } ) => ( {\n\t\t\tcolor,\n\t\t\tbrightness: colord( color ).brightness(),\n\t\t} ) )\n\t\t.reduce(\n\t\t\t( [ min, max ], current ) => {\n\t\t\t\treturn [\n\t\t\t\t\tcurrent.brightness <= min.brightness ? current : min,\n\t\t\t\t\tcurrent.brightness >= max.brightness ? current : max,\n\t\t\t\t];\n\t\t\t},\n\t\t\t[\n\t\t\t\t{ brightness: 1, color: '' },\n\t\t\t\t{ brightness: 0, color: '' },\n\t\t\t]\n\t\t)\n\t\t.map( ( { color } ) => color );\n}\n\n/**\n * Generate a duotone gradient from a list of colors.\n *\n * @param colors CSS color strings.\n * @param angle  CSS gradient angle.\n *\n * @return  CSS gradient string for the duotone swatch.\n */\nexport function getGradientFromCSSColors(\n\tcolors: string[] = [],\n\tangle = '90deg'\n) {\n\tconst l = 100 / colors.length;\n\n\tconst stops = colors\n\t\t.map( ( c, i ) => `${ c } ${ i * l }%, ${ c } ${ ( i + 1 ) * l }%` )\n\t\t.join( ', ' );\n\n\treturn `linear-gradient( ${ angle }, ${ stops } )`;\n}\n\n/**\n * Convert a color array to an array of color stops.\n *\n * @param colors CSS colors array\n *\n * @return Color stop information.\n */\nexport function getColorStopsFromColors( colors: string[] ) {\n\treturn colors.map( ( color, i ) => ( {\n\t\tposition: ( i * 100 ) / ( colors.length - 1 ),\n\t\tcolor,\n\t} ) );\n}\n\n/**\n * Convert a color stop array to an array colors.\n *\n * @param colorStops Color stop information.\n *\n * @return CSS colors array.\n */\nexport function getColorsFromColorStops(\n\tcolorStops: { position: number; color: string }[] = []\n) {\n\treturn colorStops.map( ( { color } ) => color );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAM,EAAEC,MAAM,QAAQ,QAAQ;AACvC,OAAOC,WAAW,MAAM,sBAAsB;;AAE9C;AACA;AACA;;AAGAD,MAAM,CAAE,CAAEC,WAAW,CAAG,CAAC;;AAEzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,gBAAgBA,CAC/BC,OAA6C,EAC5C;EACD;EACA,IAAK,CAAEA,OAAO,IAAIA,OAAO,CAACC,MAAM,GAAG,CAAC,EAAG;IACtC,OAAO,CAAE,MAAM,EAAE,MAAM,CAAE;EAC1B;EAEA,OAAOD,OAAO,CACZE,GAAG,CAAE,CAAE;IAAEC;EAAM,CAAC,MAAQ;IACxBA,KAAK;IACLC,UAAU,EAAER,MAAM,CAAEO,KAAM,CAAC,CAACC,UAAU,CAAC;EACxC,CAAC,CAAG,CAAC,CACJC,MAAM,CACN,CAAE,CAAEC,GAAG,EAAEC,GAAG,CAAE,EAAEC,OAAO,KAAM;IAC5B,OAAO,CACNA,OAAO,CAACJ,UAAU,IAAIE,GAAG,CAACF,UAAU,GAAGI,OAAO,GAAGF,GAAG,EACpDE,OAAO,CAACJ,UAAU,IAAIG,GAAG,CAACH,UAAU,GAAGI,OAAO,GAAGD,GAAG,CACpD;EACF,CAAC,EACD,CACC;IAAEH,UAAU,EAAE,CAAC;IAAED,KAAK,EAAE;EAAG,CAAC,EAC5B;IAAEC,UAAU,EAAE,CAAC;IAAED,KAAK,EAAE;EAAG,CAAC,CAE9B,CAAC,CACAD,GAAG,CAAE,CAAE;IAAEC;EAAM,CAAC,KAAMA,KAAM,CAAC;AAChC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASM,wBAAwBA,CACvCC,MAAgB,GAAG,EAAE,EACrBC,KAAK,GAAG,OAAO,EACd;EACD,MAAMC,CAAC,GAAG,GAAG,GAAGF,MAAM,CAACT,MAAM;EAE7B,MAAMY,KAAK,GAAGH,MAAM,CAClBR,GAAG,CAAE,CAAEY,CAAC,EAAEC,CAAC,KAAO,GAAGD,CAAG,IAAIC,CAAC,GAAGH,CAAG,MAAME,CAAG,IAAI,CAAEC,CAAC,GAAG,CAAC,IAAKH,CAAG,GAAG,CAAC,CACnEI,IAAI,CAAE,IAAK,CAAC;EAEd,OAAQ,oBAAoBL,KAAO,KAAKE,KAAO,IAAG;AACnD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASI,uBAAuBA,CAAEP,MAAgB,EAAG;EAC3D,OAAOA,MAAM,CAACR,GAAG,CAAE,CAAEC,KAAK,EAAEY,CAAC,MAAQ;IACpCG,QAAQ,EAAIH,CAAC,GAAG,GAAG,IAAOL,MAAM,CAACT,MAAM,GAAG,CAAC,CAAE;IAC7CE;EACD,CAAC,CAAG,CAAC;AACN;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASgB,uBAAuBA,CACtCC,UAAiD,GAAG,EAAE,EACrD;EACD,OAAOA,UAAU,CAAClB,GAAG,CAAE,CAAE;IAAEC;EAAM,CAAC,KAAMA,KAAM,CAAC;AAChD","ignoreList":[]}
+{"version":3,"names":["colord","extend","namesPlugin","getDefaultColors","palette","length","map","color","brightness","reduce","min","max","current","getGradientFromCSSColors","colors","angle","l","stops","c","i","join","getColorStopsFromColors","position","getColorsFromColorStops","colorStops"],"sources":["@wordpress/components/src/duotone-picker/utils.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * Internal dependencies\n */\nimport type { DuotonePickerProps } from './types';\n\nextend( [ namesPlugin ] );\n\n/**\n * Object representation for a color.\n *\n * @typedef {Object} RGBColor\n * @property {number} r Red component of the color in the range [0,1].\n * @property {number} g Green component of the color in the range [0,1].\n * @property {number} b Blue component of the color in the range [0,1].\n */\n\n/**\n * Calculate the brightest and darkest values from a color palette.\n *\n * @param palette Color palette for the theme.\n *\n * @return Tuple of the darkest color and brightest color.\n */\nexport function getDefaultColors(\n\tpalette: DuotonePickerProps[ 'colorPalette' ]\n) {\n\t// A default dark and light color are required.\n\tif ( ! palette || palette.length < 2 ) {\n\t\treturn [ '#000', '#fff' ];\n\t}\n\n\treturn palette\n\t\t.map( ( { color } ) => ( {\n\t\t\tcolor,\n\t\t\tbrightness: colord( color ).brightness(),\n\t\t} ) )\n\t\t.reduce(\n\t\t\t( [ min, max ], current ) => {\n\t\t\t\treturn [\n\t\t\t\t\tcurrent.brightness <= min.brightness ? current : min,\n\t\t\t\t\tcurrent.brightness >= max.brightness ? current : max,\n\t\t\t\t];\n\t\t\t},\n\t\t\t[\n\t\t\t\t{ brightness: 1, color: '' },\n\t\t\t\t{ brightness: 0, color: '' },\n\t\t\t]\n\t\t)\n\t\t.map( ( { color } ) => color );\n}\n\n/**\n * Generate a duotone gradient from a list of colors.\n *\n * @param colors CSS color strings.\n * @param angle  CSS gradient angle.\n *\n * @return  CSS gradient string for the duotone swatch.\n */\nexport function getGradientFromCSSColors(\n\tcolors: string[] = [],\n\tangle = '90deg'\n) {\n\tconst l = 100 / colors.length;\n\n\tconst stops = colors\n\t\t.map( ( c, i ) => `${ c } ${ i * l }%, ${ c } ${ ( i + 1 ) * l }%` )\n\t\t.join( ', ' );\n\n\treturn `linear-gradient( ${ angle }, ${ stops } )`;\n}\n\n/**\n * Convert a color array to an array of color stops.\n *\n * @param colors CSS colors array\n *\n * @return Color stop information.\n */\nexport function getColorStopsFromColors( colors: string[] ) {\n\treturn colors.map( ( color, i ) => ( {\n\t\tposition: ( i * 100 ) / ( colors.length - 1 ),\n\t\tcolor,\n\t} ) );\n}\n\n/**\n * Convert a color stop array to an array colors.\n *\n * @param colorStops Color stop information.\n *\n * @return CSS colors array.\n */\nexport function getColorsFromColorStops(\n\tcolorStops: { position: number; color: string }[] = []\n) {\n\treturn colorStops.map( ( { color } ) => color );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAM,EAAEC,MAAM,QAAQ,QAAQ;AACvC,OAAOC,WAAW,MAAM,sBAAsB;;AAE9C;AACA;AACA;;AAGAD,MAAM,CAAE,CAAEC,WAAW,CAAG,CAAC;;AAEzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,gBAAgBA,CAC/BC,OAA6C,EAC5C;EACD;EACA,IAAK,CAAEA,OAAO,IAAIA,OAAO,CAACC,MAAM,GAAG,CAAC,EAAG;IACtC,OAAO,CAAE,MAAM,EAAE,MAAM,CAAE;EAC1B;EAEA,OAAOD,OAAO,CACZE,GAAG,CAAE,CAAE;IAAEC;EAAM,CAAC,MAAQ;IACxBA,KAAK;IACLC,UAAU,EAAER,MAAM,CAAEO,KAAM,CAAC,CAACC,UAAU,CAAC;EACxC,CAAC,CAAG,CAAC,CACJC,MAAM,CACN,CAAE,CAAEC,GAAG,EAAEC,GAAG,CAAE,EAAEC,OAAO,KAAM;IAC5B,OAAO,CACNA,OAAO,CAACJ,UAAU,IAAIE,GAAG,CAACF,UAAU,GAAGI,OAAO,GAAGF,GAAG,EACpDE,OAAO,CAACJ,UAAU,IAAIG,GAAG,CAACH,UAAU,GAAGI,OAAO,GAAGD,GAAG,CACpD;EACF,CAAC,EACD,CACC;IAAEH,UAAU,EAAE,CAAC;IAAED,KAAK,EAAE;EAAG,CAAC,EAC5B;IAAEC,UAAU,EAAE,CAAC;IAAED,KAAK,EAAE;EAAG,CAAC,CAE9B,CAAC,CACAD,GAAG,CAAE,CAAE;IAAEC;EAAM,CAAC,KAAMA,KAAM,CAAC;AAChC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASM,wBAAwBA,CACvCC,MAAgB,GAAG,EAAE,EACrBC,KAAK,GAAG,OAAO,EACd;EACD,MAAMC,CAAC,GAAG,GAAG,GAAGF,MAAM,CAACT,MAAM;EAE7B,MAAMY,KAAK,GAAGH,MAAM,CAClBR,GAAG,CAAE,CAAEY,CAAC,EAAEC,CAAC,KAAM,GAAID,CAAC,IAAMC,CAAC,GAAGH,CAAC,MAAQE,CAAC,IAAM,CAAEC,CAAC,GAAG,CAAC,IAAKH,CAAC,GAAK,CAAC,CACnEI,IAAI,CAAE,IAAK,CAAC;EAEd,OAAO,oBAAqBL,KAAK,KAAOE,KAAK,IAAK;AACnD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASI,uBAAuBA,CAAEP,MAAgB,EAAG;EAC3D,OAAOA,MAAM,CAACR,GAAG,CAAE,CAAEC,KAAK,EAAEY,CAAC,MAAQ;IACpCG,QAAQ,EAAIH,CAAC,GAAG,GAAG,IAAOL,MAAM,CAACT,MAAM,GAAG,CAAC,CAAE;IAC7CE;EACD,CAAC,CAAG,CAAC;AACN;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASgB,uBAAuBA,CACtCC,UAAiD,GAAG,EAAE,EACrD;EACD,OAAOA,UAAU,CAAClB,GAAG,CAAE,CAAE;IAAEC;EAAM,CAAC,KAAMA,KAAM,CAAC;AAChD","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"names":["css","useMemo","useContextSystem","styles","CONFIG","useCx","isValueDefined","getBoxShadow","value","boxShadowColor","boxShadow","useElevation","props","active","borderRadius","className","focus","hover","isInteractive","offset","otherProps","cx","classes","hoverValue","activeValue","undefined","transition","transitionDuration","transitionTimingFunction","sx","Base","bottom","opacity","elevationIntensity","left","right","top","process","env","NODE_ENV","Elevation"],"sources":["@wordpress/components/src/elevation/hook.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { SerializedStyles } from '@emotion/react';\nimport { css } from '@emotion/react';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { useContextSystem } from '../context';\nimport * as styles from './styles';\nimport { CONFIG } from '../utils';\nimport { useCx } from '../utils/hooks/use-cx';\nimport { isValueDefined } from '../utils/values';\nimport type { ElevationProps } from './types';\n\nexport function getBoxShadow( value: number ) {\n\tconst boxShadowColor = `rgba(0, 0, 0, ${ value / 20 })`;\n\tconst boxShadow = `0 ${ value }px ${ value * 2 }px 0\n\t${ boxShadowColor }`;\n\n\treturn boxShadow;\n}\n\nexport function useElevation(\n\tprops: WordPressComponentProps< ElevationProps, 'div' >\n) {\n\tconst {\n\t\tactive,\n\t\tborderRadius = 'inherit',\n\t\tclassName,\n\t\tfocus,\n\t\thover,\n\t\tisInteractive = false,\n\t\toffset = 0,\n\t\tvalue = 0,\n\t\t...otherProps\n\t} = useContextSystem( props, 'Elevation' );\n\n\tconst cx = useCx();\n\n\tconst classes = useMemo( () => {\n\t\tlet hoverValue: number | undefined = isValueDefined( hover )\n\t\t\t? hover\n\t\t\t: value * 2;\n\t\tlet activeValue: number | undefined = isValueDefined( active )\n\t\t\t? active\n\t\t\t: value / 2;\n\n\t\tif ( ! isInteractive ) {\n\t\t\thoverValue = isValueDefined( hover ) ? hover : undefined;\n\t\t\tactiveValue = isValueDefined( active ) ? active : undefined;\n\t\t}\n\n\t\tconst transition = `box-shadow ${ CONFIG.transitionDuration } ${ CONFIG.transitionTimingFunction }`;\n\n\t\tconst sx: {\n\t\t\tBase?: SerializedStyles;\n\t\t\thover?: SerializedStyles;\n\t\t\tactive?: SerializedStyles;\n\t\t\tfocus?: SerializedStyles;\n\t\t} = {};\n\n\t\tsx.Base = css(\n\t\t\t{\n\t\t\t\tborderRadius,\n\t\t\t\tbottom: offset,\n\t\t\t\tboxShadow: getBoxShadow( value ),\n\t\t\t\topacity: CONFIG.elevationIntensity,\n\t\t\t\tleft: offset,\n\t\t\t\tright: offset,\n\t\t\t\ttop: offset,\n\t\t\t},\n\t\t\tcss`\n\t\t\t\t@media not ( prefers-reduced-motion ) {\n\t\t\t\t\ttransition: ${ transition };\n\t\t\t\t}\n\t\t\t`\n\t\t);\n\n\t\tif ( isValueDefined( hoverValue ) ) {\n\t\t\tsx.hover = css`\n\t\t\t\t*:hover > & {\n\t\t\t\t\tbox-shadow: ${ getBoxShadow( hoverValue ) };\n\t\t\t\t}\n\t\t\t`;\n\t\t}\n\n\t\tif ( isValueDefined( activeValue ) ) {\n\t\t\tsx.active = css`\n\t\t\t\t*:active > & {\n\t\t\t\t\tbox-shadow: ${ getBoxShadow( activeValue ) };\n\t\t\t\t}\n\t\t\t`;\n\t\t}\n\n\t\tif ( isValueDefined( focus ) ) {\n\t\t\tsx.focus = css`\n\t\t\t\t*:focus > & {\n\t\t\t\t\tbox-shadow: ${ getBoxShadow( focus ) };\n\t\t\t\t}\n\t\t\t`;\n\t\t}\n\n\t\treturn cx(\n\t\t\tstyles.Elevation,\n\t\t\tsx.Base,\n\t\t\tsx.hover,\n\t\t\tsx.focus,\n\t\t\tsx.active,\n\t\t\tclassName\n\t\t);\n\t}, [\n\t\tactive,\n\t\tborderRadius,\n\t\tclassName,\n\t\tcx,\n\t\tfocus,\n\t\thover,\n\t\tisInteractive,\n\t\toffset,\n\t\tvalue,\n\t] );\n\n\treturn { ...otherProps, className: classes, 'aria-hidden': true };\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["css","useMemo","useContextSystem","styles","CONFIG","useCx","isValueDefined","getBoxShadow","value","boxShadowColor","boxShadow","useElevation","props","active","borderRadius","className","focus","hover","isInteractive","offset","otherProps","cx","classes","hoverValue","activeValue","undefined","transition","transitionDuration","transitionTimingFunction","sx","Base","bottom","opacity","elevationIntensity","left","right","top","process","env","NODE_ENV","Elevation"],"sources":["@wordpress/components/src/elevation/hook.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { SerializedStyles } from '@emotion/react';\nimport { css } from '@emotion/react';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { useContextSystem } from '../context';\nimport * as styles from './styles';\nimport { CONFIG } from '../utils';\nimport { useCx } from '../utils/hooks/use-cx';\nimport { isValueDefined } from '../utils/values';\nimport type { ElevationProps } from './types';\n\nexport function getBoxShadow( value: number ) {\n\tconst boxShadowColor = `rgba(0, 0, 0, ${ value / 20 })`;\n\tconst boxShadow = `0 ${ value }px ${ value * 2 }px 0\n\t${ boxShadowColor }`;\n\n\treturn boxShadow;\n}\n\nexport function useElevation(\n\tprops: WordPressComponentProps< ElevationProps, 'div' >\n) {\n\tconst {\n\t\tactive,\n\t\tborderRadius = 'inherit',\n\t\tclassName,\n\t\tfocus,\n\t\thover,\n\t\tisInteractive = false,\n\t\toffset = 0,\n\t\tvalue = 0,\n\t\t...otherProps\n\t} = useContextSystem( props, 'Elevation' );\n\n\tconst cx = useCx();\n\n\tconst classes = useMemo( () => {\n\t\tlet hoverValue: number | undefined = isValueDefined( hover )\n\t\t\t? hover\n\t\t\t: value * 2;\n\t\tlet activeValue: number | undefined = isValueDefined( active )\n\t\t\t? active\n\t\t\t: value / 2;\n\n\t\tif ( ! isInteractive ) {\n\t\t\thoverValue = isValueDefined( hover ) ? hover : undefined;\n\t\t\tactiveValue = isValueDefined( active ) ? active : undefined;\n\t\t}\n\n\t\tconst transition = `box-shadow ${ CONFIG.transitionDuration } ${ CONFIG.transitionTimingFunction }`;\n\n\t\tconst sx: {\n\t\t\tBase?: SerializedStyles;\n\t\t\thover?: SerializedStyles;\n\t\t\tactive?: SerializedStyles;\n\t\t\tfocus?: SerializedStyles;\n\t\t} = {};\n\n\t\tsx.Base = css(\n\t\t\t{\n\t\t\t\tborderRadius,\n\t\t\t\tbottom: offset,\n\t\t\t\tboxShadow: getBoxShadow( value ),\n\t\t\t\topacity: CONFIG.elevationIntensity,\n\t\t\t\tleft: offset,\n\t\t\t\tright: offset,\n\t\t\t\ttop: offset,\n\t\t\t},\n\t\t\tcss`\n\t\t\t\t@media not ( prefers-reduced-motion ) {\n\t\t\t\t\ttransition: ${ transition };\n\t\t\t\t}\n\t\t\t`\n\t\t);\n\n\t\tif ( isValueDefined( hoverValue ) ) {\n\t\t\tsx.hover = css`\n\t\t\t\t*:hover > & {\n\t\t\t\t\tbox-shadow: ${ getBoxShadow( hoverValue ) };\n\t\t\t\t}\n\t\t\t`;\n\t\t}\n\n\t\tif ( isValueDefined( activeValue ) ) {\n\t\t\tsx.active = css`\n\t\t\t\t*:active > & {\n\t\t\t\t\tbox-shadow: ${ getBoxShadow( activeValue ) };\n\t\t\t\t}\n\t\t\t`;\n\t\t}\n\n\t\tif ( isValueDefined( focus ) ) {\n\t\t\tsx.focus = css`\n\t\t\t\t*:focus > & {\n\t\t\t\t\tbox-shadow: ${ getBoxShadow( focus ) };\n\t\t\t\t}\n\t\t\t`;\n\t\t}\n\n\t\treturn cx(\n\t\t\tstyles.Elevation,\n\t\t\tsx.Base,\n\t\t\tsx.hover,\n\t\t\tsx.focus,\n\t\t\tsx.active,\n\t\t\tclassName\n\t\t);\n\t}, [\n\t\tactive,\n\t\tborderRadius,\n\t\tclassName,\n\t\tcx,\n\t\tfocus,\n\t\thover,\n\t\tisInteractive,\n\t\toffset,\n\t\tvalue,\n\t] );\n\n\treturn { ...otherProps, className: classes, 'aria-hidden': true };\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,3 +1,4 @@
+/* wp:polyfill */
 /**
  * External dependencies
  */
@@ -11,8 +12,7 @@ import { forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function UnforwardedExternalLink(props, ref) {
   const {
     href,
@@ -35,29 +35,25 @@ function UnforwardedExternalLink(props, ref) {
       props.onClick(event);
     }
   };
-  return (
-    /*#__PURE__*/
-    /* eslint-disable react/jsx-no-target-blank */
-    _jsxs("a", {
-      ...additionalProps,
-      className: classes,
-      href: href,
-      onClick: onClickHandler,
-      target: "_blank",
-      rel: optimizedRel,
-      ref: ref,
-      children: [/*#__PURE__*/_jsx("span", {
-        className: "components-external-link__contents",
-        children: children
-      }), /*#__PURE__*/_jsx("span", {
-        className: "components-external-link__icon",
-        "aria-label": /* translators: accessibility text */
-        __('(opens in a new tab)'),
-        children: "\u2197"
-      })]
-    })
-    /* eslint-enable react/jsx-no-target-blank */
-  );
+  return /*#__PURE__*/ /* eslint-disable react/jsx-no-target-blank */_jsxs("a", {
+    ...additionalProps,
+    className: classes,
+    href: href,
+    onClick: onClickHandler,
+    target: "_blank",
+    rel: optimizedRel,
+    ref: ref,
+    children: [/*#__PURE__*/_jsx("span", {
+      className: "components-external-link__contents",
+      children: children
+    }), /*#__PURE__*/_jsx("span", {
+      className: "components-external-link__icon",
+      "aria-label": /* translators: accessibility text */
+      __('(opens in a new tab)'),
+      children: "\u2197"
+    })]
+  })
+  /* eslint-enable react/jsx-no-target-blank */;
 }
 
 /**

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

@@ -1 +1 @@
-{"version":3,"names":["clsx","__","forwardRef","jsx","_jsx","jsxs","_jsxs","UnforwardedExternalLink","props","ref","href","children","className","rel","additionalProps","optimizedRel","Set","split","filter","Boolean","join","classes","isInternalAnchor","startsWith","onClickHandler","event","preventDefault","onClick","target","ExternalLink"],"sources":["@wordpress/components/src/external-link/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { ExternalLinkProps } from './types';\nimport type { WordPressComponentProps } from '../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 = clsx( '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<span className=\"components-external-link__contents\">\n\t\t\t\t{ children }\n\t\t\t</span>\n\t\t\t<span\n\t\t\t\tclassName=\"components-external-link__icon\"\n\t\t\t\taria-label={\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>\n\t\t\t\t&#8599;\n\t\t\t</span>\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"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;AAGvB;AACA;AACA;AACA,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;AAFA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAMA,SAASC,uBAAuBA,CAC/BC,KAGC,EACDC,GAAsC,EACrC;EACD,MAAM;IAAEC,IAAI;IAAEC,QAAQ;IAAEC,SAAS;IAAEC,GAAG,GAAG,EAAE;IAAE,GAAGC;EAAgB,CAAC,GAAGN,KAAK;EACzE,MAAMO,YAAY,GAAG,CACpB,GAAG,IAAIC,GAAG,CACT,CACC,GAAGH,GAAG,CAACI,KAAK,CAAE,GAAI,CAAC,EACnB,UAAU,EACV,YAAY,EACZ,UAAU,CACV,CAACC,MAAM,CAAEC,OAAQ,CACnB,CAAC,CACD,CAACC,IAAI,CAAE,GAAI,CAAC;EACb,MAAMC,OAAO,GAAGrB,IAAI,CAAE,0BAA0B,EAAEY,SAAU,CAAC;EAC7D;AACD;AACA;EACC,MAAMU,gBAAgB,GAAG,CAAC,CAAEZ,IAAI,EAAEa,UAAU,CAAE,GAAI,CAAC;EAEnD,MAAMC,cAAc,GACnBC,KAAwD,IACpD;IACJ,IAAKH,gBAAgB,EAAG;MACvBG,KAAK,CAACC,cAAc,CAAC,CAAC;IACvB;IAEA,IAAKlB,KAAK,CAACmB,OAAO,EAAG;MACpBnB,KAAK,CAACmB,OAAO,CAAEF,KAAM,CAAC;IACvB;EACD,CAAC;EAED;IAAA;IACC;IACAnB,KAAA;MAAA,GACMQ,eAAe;MACpBF,SAAS,EAAGS,OAAS;MACrBX,IAAI,EAAGA,IAAM;MACbiB,OAAO,EAAGH,cAAgB;MAC1BI,MAAM,EAAC,QAAQ;MACff,GAAG,EAAGE,YAAc;MACpBN,GAAG,EAAGA,GAAK;MAAAE,QAAA,gBAEXP,IAAA;QAAMQ,SAAS,EAAC,oCAAoC;QAAAD,QAAA,EACjDA;MAAQ,CACL,CAAC,eACPP,IAAA;QACCQ,SAAS,EAAC,gCAAgC;QAC1C,cACC;QACAX,EAAE,CAAE,sBAAuB,CAC3B;QAAAU,QAAA,EACD;MAED,CAAM,CAAC;IAAA,CACL;IACH;EAAA;AAEF;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMkB,YAAY,GAAG3B,UAAU,CAAEK,uBAAwB,CAAC;AAEjE,eAAesB,YAAY","ignoreList":[]}
+{"version":3,"names":["clsx","__","forwardRef","jsx","_jsx","jsxs","_jsxs","UnforwardedExternalLink","props","ref","href","children","className","rel","additionalProps","optimizedRel","Set","split","filter","Boolean","join","classes","isInternalAnchor","startsWith","onClickHandler","event","preventDefault","onClick","target","ExternalLink"],"sources":["@wordpress/components/src/external-link/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { ExternalLinkProps } from './types';\nimport type { WordPressComponentProps } from '../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 = clsx( '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<span className=\"components-external-link__contents\">\n\t\t\t\t{ children }\n\t\t\t</span>\n\t\t\t<span\n\t\t\t\tclassName=\"components-external-link__icon\"\n\t\t\t\taria-label={\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>\n\t\t\t\t&#8599;\n\t\t\t</span>\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"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;AAGvB;AACA;AACA;AACA,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;AAFA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAMA,SAASC,uBAAuBA,CAC/BC,KAGC,EACDC,GAAsC,EACrC;EACD,MAAM;IAAEC,IAAI;IAAEC,QAAQ;IAAEC,SAAS;IAAEC,GAAG,GAAG,EAAE;IAAE,GAAGC;EAAgB,CAAC,GAAGN,KAAK;EACzE,MAAMO,YAAY,GAAG,CACpB,GAAG,IAAIC,GAAG,CACT,CACC,GAAGH,GAAG,CAACI,KAAK,CAAE,GAAI,CAAC,EACnB,UAAU,EACV,YAAY,EACZ,UAAU,CACV,CAACC,MAAM,CAAEC,OAAQ,CACnB,CAAC,CACD,CAACC,IAAI,CAAE,GAAI,CAAC;EACb,MAAMC,OAAO,GAAGrB,IAAI,CAAE,0BAA0B,EAAEY,SAAU,CAAC;EAC7D;AACD;AACA;EACC,MAAMU,gBAAgB,GAAG,CAAC,CAAEZ,IAAI,EAAEa,UAAU,CAAE,GAAI,CAAC;EAEnD,MAAMC,cAAc,GACnBC,KAAwD,IACpD;IACJ,IAAKH,gBAAgB,EAAG;MACvBG,KAAK,CAACC,cAAc,CAAC,CAAC;IACvB;IAEA,IAAKlB,KAAK,CAACmB,OAAO,EAAG;MACpBnB,KAAK,CAACmB,OAAO,CAAEF,KAAM,CAAC;IACvB;EACD,CAAC;EAED,qBACC,8CACAnB,KAAA;IAAA,GACMQ,eAAe;IACpBF,SAAS,EAAGS,OAAS;IACrBX,IAAI,EAAGA,IAAM;IACbiB,OAAO,EAAGH,cAAgB;IAC1BI,MAAM,EAAC,QAAQ;IACff,GAAG,EAAGE,YAAc;IACpBN,GAAG,EAAGA,GAAK;IAAAE,QAAA,gBAEXP,IAAA;MAAMQ,SAAS,EAAC,oCAAoC;MAAAD,QAAA,EACjDA;IAAQ,CACL,CAAC,eACPP,IAAA;MACCQ,SAAS,EAAC,gCAAgC;MAC1C,cACC;MACAX,EAAE,CAAE,sBAAuB,CAC3B;MAAAU,QAAA,EACD;IAED,CAAM,CAAC;EAAA,CACL;EACH;AAEF;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMkB,YAAY,GAAG3B,UAAU,CAAEK,uBAAwB,CAAC;AAEjE,eAAesB,YAAY","ignoreList":[]}

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

@@ -9,8 +9,7 @@ import { TouchableOpacity, Text, Linking } from 'react-native';
  */
 import { __ } from '@wordpress/i18n';
 import { external, Icon } from '@wordpress/icons';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function ExternalLink({
   href,
   children

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

@@ -1 +1 @@
-{"version":3,"names":["TouchableOpacity","Text","Linking","__","external","Icon","jsx","_jsx","jsxs","_jsxs","ExternalLink","href","children","onPress","openURL","accessibilityLabel","icon"],"sources":["@wordpress/components/src/external-link/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\n\nimport { TouchableOpacity, Text, Linking } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { external, Icon } from '@wordpress/icons';\n\nexport function ExternalLink( { href, children } ) {\n\treturn (\n\t\t<TouchableOpacity\n\t\t\tonPress={ () => Linking.openURL( href ) }\n\t\t\taccessibilityLabel={ __( 'Open link in a browser' ) }\n\t\t>\n\t\t\t<Text>{ children }</Text>\n\t\t\t<Icon icon={ external } />\n\t\t</TouchableOpacity>\n\t);\n}\n\nexport default ExternalLink;\n"],"mappings":"AAAA;AACA;AACA;;AAEA,SAASA,gBAAgB,EAAEC,IAAI,EAAEC,OAAO,QAAQ,cAAc;;AAE9D;AACA;AACA;AACA,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,QAAQ,EAAEC,IAAI,QAAQ,kBAAkB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAElD,OAAO,SAASC,YAAYA,CAAE;EAAEC,IAAI;EAAEC;AAAS,CAAC,EAAG;EAClD,oBACCH,KAAA,CAACT,gBAAgB;IAChBa,OAAO,EAAGA,CAAA,KAAMX,OAAO,CAACY,OAAO,CAAEH,IAAK,CAAG;IACzCI,kBAAkB,EAAGZ,EAAE,CAAE,wBAAyB,CAAG;IAAAS,QAAA,gBAErDL,IAAA,CAACN,IAAI;MAAAW,QAAA,EAAGA;IAAQ,CAAQ,CAAC,eACzBL,IAAA,CAACF,IAAI;MAACW,IAAI,EAAGZ;IAAU,CAAE,CAAC;EAAA,CACT,CAAC;AAErB;AAEA,eAAeM,YAAY","ignoreList":[]}
+{"version":3,"names":["TouchableOpacity","Text","Linking","__","external","Icon","jsx","_jsx","jsxs","_jsxs","ExternalLink","href","children","onPress","openURL","accessibilityLabel","icon"],"sources":["@wordpress/components/src/external-link/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\n\nimport { TouchableOpacity, Text, Linking } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { external, Icon } from '@wordpress/icons';\n\nexport function ExternalLink( { href, children } ) {\n\treturn (\n\t\t<TouchableOpacity\n\t\t\tonPress={ () => Linking.openURL( href ) }\n\t\t\taccessibilityLabel={ __( 'Open link in a browser' ) }\n\t\t>\n\t\t\t<Text>{ children }</Text>\n\t\t\t<Icon icon={ external } />\n\t\t</TouchableOpacity>\n\t);\n}\n\nexport default ExternalLink;\n"],"mappings":"AAAA;AACA;AACA;;AAEA,SAASA,gBAAgB,EAAEC,IAAI,EAAEC,OAAO,QAAQ,cAAc;;AAE9D;AACA;AACA;AACA,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,QAAQ,EAAEC,IAAI,QAAQ,kBAAkB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAElD,OAAO,SAASC,YAAYA,CAAE;EAAEC,IAAI;EAAEC;AAAS,CAAC,EAAG;EAClD,oBACCH,KAAA,CAACT,gBAAgB;IAChBa,OAAO,EAAGA,CAAA,KAAMX,OAAO,CAACY,OAAO,CAAEH,IAAK,CAAG;IACzCI,kBAAkB,EAAGZ,EAAE,CAAE,wBAAyB,CAAG;IAAAS,QAAA,gBAErDL,IAAA,CAACN,IAAI;MAAAW,QAAA,EAAGA;IAAQ,CAAQ,CAAC,eACzBL,IAAA,CAACF,IAAI;MAACW,IAAI,EAAGZ;IAAU,CAAE,CAAC;EAAA,CACT,CAAC;AAErB;AAEA,eAAeM,YAAY","ignoreList":[]}

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

@@ -8,8 +8,7 @@ import { __ } from '@wordpress/i18n';
  */
 import { StyledUnitControl, ControlWrapper } from './styles/focal-point-picker-style';
 import { fractionToPercentage } from './utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const TEXTCONTROL_MIN = 0;
 const TEXTCONTROL_MAX = 100;
 const noop = () => {};

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

@@ -1 +1 @@
-{"version":3,"names":["__","StyledUnitControl","ControlWrapper","fractionToPercentage","jsx","_jsx","jsxs","_jsxs","TEXTCONTROL_MIN","TEXTCONTROL_MAX","noop","FocalPointPickerControls","__nextHasNoMarginBottom","hasHelpText","onChange","point","x","y","valueX","valueY","handleChange","value","axis","undefined","num","parseInt","isNaN","className","gap","children","FocalPointUnitControl","label","join","next","dragDirection","props","__next40pxDefaultSize","labelPosition","max","min","units"],"sources":["@wordpress/components/src/focal-point-picker/controls.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport {\n\tStyledUnitControl,\n\tControlWrapper,\n} from './styles/focal-point-picker-style';\nimport { fractionToPercentage } from './utils';\nimport type {\n\tUnitControlProps,\n\tUnitControlOnChangeCallback,\n} from '../unit-control/types';\nimport type { FocalPointAxis, FocalPointPickerControlsProps } from './types';\n\nconst TEXTCONTROL_MIN = 0;\nconst TEXTCONTROL_MAX = 100;\nconst noop = () => {};\n\nexport default function FocalPointPickerControls( {\n\t__nextHasNoMarginBottom,\n\thasHelpText,\n\tonChange = noop,\n\tpoint = {\n\t\tx: 0.5,\n\t\ty: 0.5,\n\t},\n}: FocalPointPickerControlsProps ) {\n\tconst valueX = fractionToPercentage( point.x );\n\tconst valueY = fractionToPercentage( point.y );\n\n\tconst handleChange = (\n\t\tvalue: Parameters< UnitControlOnChangeCallback >[ 0 ],\n\t\taxis: FocalPointAxis\n\t) => {\n\t\tif ( value === undefined ) {\n\t\t\treturn;\n\t\t}\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\tgap={ 4 }\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\t__next40pxDefaultSize\n\t\t\tclassName=\"focal-point-picker__controls-position-unit-control\"\n\t\t\tlabelPosition=\"top\"\n\t\t\tmax={ TEXTCONTROL_MAX }\n\t\t\tmin={ TEXTCONTROL_MIN }\n\t\t\tunits={ [ { value: '%', label: '%' } ] }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,SACCC,iBAAiB,EACjBC,cAAc,QACR,mCAAmC;AAC1C,SAASC,oBAAoB,QAAQ,SAAS;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAO/C,MAAMC,eAAe,GAAG,CAAC;AACzB,MAAMC,eAAe,GAAG,GAAG;AAC3B,MAAMC,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;AAErB,eAAe,SAASC,wBAAwBA,CAAE;EACjDC,uBAAuB;EACvBC,WAAW;EACXC,QAAQ,GAAGJ,IAAI;EACfK,KAAK,GAAG;IACPC,CAAC,EAAE,GAAG;IACNC,CAAC,EAAE;EACJ;AAC8B,CAAC,EAAG;EAClC,MAAMC,MAAM,GAAGf,oBAAoB,CAAEY,KAAK,CAACC,CAAE,CAAC;EAC9C,MAAMG,MAAM,GAAGhB,oBAAoB,CAAEY,KAAK,CAACE,CAAE,CAAC;EAE9C,MAAMG,YAAY,GAAGA,CACpBC,KAAqD,EACrDC,IAAoB,KAChB;IACJ,IAAKD,KAAK,KAAKE,SAAS,EAAG;MAC1B;IACD;IAEA,MAAMC,GAAG,GAAGC,QAAQ,CAAEJ,KAAK,EAAE,EAAG,CAAC;IAEjC,IAAK,CAAEK,KAAK,CAAEF,GAAI,CAAC,EAAG;MACrBV,QAAQ,CAAE;QAAE,GAAGC,KAAK;QAAE,CAAEO,IAAI,GAAIE,GAAG,GAAG;MAAI,CAAE,CAAC;IAC9C;EACD,CAAC;EAED,oBACCjB,KAAA,CAACL,cAAc;IACdyB,SAAS,EAAC,8BAA8B;IACxCf,uBAAuB,EAAGA,uBAAyB;IACnDC,WAAW,EAAGA,WAAa;IAC3Be,GAAG,EAAG,CAAG;IAAAC,QAAA,gBAETxB,IAAA,CAACyB,qBAAqB;MACrBC,KAAK,EAAG/B,EAAE,CAAE,MAAO,CAAG;MACtB,cAAaA,EAAE,CAAE,2BAA4B,CAAG;MAChDqB,KAAK,EAAG,CAAEH,MAAM,EAAE,GAAG,CAAE,CAACc,IAAI,CAAE,EAAG,CAAG;MACpClB,QAAQ,EACHmB,IAAI,IACPb,YAAY,CACXa,IAAI,EACJ,GACD,CACD;MACDC,aAAa,EAAC;IAAG,CACjB,CAAC,eACF7B,IAAA,CAACyB,qBAAqB;MACrBC,KAAK,EAAG/B,EAAE,CAAE,KAAM,CAAG;MACrB,cAAaA,EAAE,CAAE,0BAA2B,CAAG;MAC/CqB,KAAK,EAAG,CAAEF,MAAM,EAAE,GAAG,CAAE,CAACa,IAAI,CAAE,EAAG,CAAG;MACpClB,QAAQ,EACHmB,IAAI,IACPb,YAAY,CACXa,IAAI,EACJ,GACD,CACD;MACDC,aAAa,EAAC;IAAG,CACjB,CAAC;EAAA,CACa,CAAC;AAEnB;AAEA,SAASJ,qBAAqBA,CAAEK,KAAuB,EAAG;EACzD,oBACC9B,IAAA,CAACJ,iBAAiB;IACjBmC,qBAAqB;IACrBT,SAAS,EAAC,oDAAoD;IAC9DU,aAAa,EAAC,KAAK;IACnBC,GAAG,EAAG7B,eAAiB;IACvB8B,GAAG,EAAG/B,eAAiB;IACvBgC,KAAK,EAAG,CAAE;MAAEnB,KAAK,EAAE,GAAG;MAAEU,KAAK,EAAE;IAAI,CAAC,CAAI;IAAA,GACnCI;EAAK,CACV,CAAC;AAEJ","ignoreList":[]}
+{"version":3,"names":["__","StyledUnitControl","ControlWrapper","fractionToPercentage","jsx","_jsx","jsxs","_jsxs","TEXTCONTROL_MIN","TEXTCONTROL_MAX","noop","FocalPointPickerControls","__nextHasNoMarginBottom","hasHelpText","onChange","point","x","y","valueX","valueY","handleChange","value","axis","undefined","num","parseInt","isNaN","className","gap","children","FocalPointUnitControl","label","join","next","dragDirection","props","__next40pxDefaultSize","labelPosition","max","min","units"],"sources":["@wordpress/components/src/focal-point-picker/controls.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport {\n\tStyledUnitControl,\n\tControlWrapper,\n} from './styles/focal-point-picker-style';\nimport { fractionToPercentage } from './utils';\nimport type {\n\tUnitControlProps,\n\tUnitControlOnChangeCallback,\n} from '../unit-control/types';\nimport type { FocalPointAxis, FocalPointPickerControlsProps } from './types';\n\nconst TEXTCONTROL_MIN = 0;\nconst TEXTCONTROL_MAX = 100;\nconst noop = () => {};\n\nexport default function FocalPointPickerControls( {\n\t__nextHasNoMarginBottom,\n\thasHelpText,\n\tonChange = noop,\n\tpoint = {\n\t\tx: 0.5,\n\t\ty: 0.5,\n\t},\n}: FocalPointPickerControlsProps ) {\n\tconst valueX = fractionToPercentage( point.x );\n\tconst valueY = fractionToPercentage( point.y );\n\n\tconst handleChange = (\n\t\tvalue: Parameters< UnitControlOnChangeCallback >[ 0 ],\n\t\taxis: FocalPointAxis\n\t) => {\n\t\tif ( value === undefined ) {\n\t\t\treturn;\n\t\t}\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\tgap={ 4 }\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\t__next40pxDefaultSize\n\t\t\tclassName=\"focal-point-picker__controls-position-unit-control\"\n\t\t\tlabelPosition=\"top\"\n\t\t\tmax={ TEXTCONTROL_MAX }\n\t\t\tmin={ TEXTCONTROL_MIN }\n\t\t\tunits={ [ { value: '%', label: '%' } ] }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,SACCC,iBAAiB,EACjBC,cAAc,QACR,mCAAmC;AAC1C,SAASC,oBAAoB,QAAQ,SAAS;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAO/C,MAAMC,eAAe,GAAG,CAAC;AACzB,MAAMC,eAAe,GAAG,GAAG;AAC3B,MAAMC,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;AAErB,eAAe,SAASC,wBAAwBA,CAAE;EACjDC,uBAAuB;EACvBC,WAAW;EACXC,QAAQ,GAAGJ,IAAI;EACfK,KAAK,GAAG;IACPC,CAAC,EAAE,GAAG;IACNC,CAAC,EAAE;EACJ;AAC8B,CAAC,EAAG;EAClC,MAAMC,MAAM,GAAGf,oBAAoB,CAAEY,KAAK,CAACC,CAAE,CAAC;EAC9C,MAAMG,MAAM,GAAGhB,oBAAoB,CAAEY,KAAK,CAACE,CAAE,CAAC;EAE9C,MAAMG,YAAY,GAAGA,CACpBC,KAAqD,EACrDC,IAAoB,KAChB;IACJ,IAAKD,KAAK,KAAKE,SAAS,EAAG;MAC1B;IACD;IAEA,MAAMC,GAAG,GAAGC,QAAQ,CAAEJ,KAAK,EAAE,EAAG,CAAC;IAEjC,IAAK,CAAEK,KAAK,CAAEF,GAAI,CAAC,EAAG;MACrBV,QAAQ,CAAE;QAAE,GAAGC,KAAK;QAAE,CAAEO,IAAI,GAAIE,GAAG,GAAG;MAAI,CAAE,CAAC;IAC9C;EACD,CAAC;EAED,oBACCjB,KAAA,CAACL,cAAc;IACdyB,SAAS,EAAC,8BAA8B;IACxCf,uBAAuB,EAAGA,uBAAyB;IACnDC,WAAW,EAAGA,WAAa;IAC3Be,GAAG,EAAG,CAAG;IAAAC,QAAA,gBAETxB,IAAA,CAACyB,qBAAqB;MACrBC,KAAK,EAAG/B,EAAE,CAAE,MAAO,CAAG;MACtB,cAAaA,EAAE,CAAE,2BAA4B,CAAG;MAChDqB,KAAK,EAAG,CAAEH,MAAM,EAAE,GAAG,CAAE,CAACc,IAAI,CAAE,EAAG,CAAG;MACpClB,QAAQ,EACHmB,IAAI,IACPb,YAAY,CACXa,IAAI,EACJ,GACD,CACD;MACDC,aAAa,EAAC;IAAG,CACjB,CAAC,eACF7B,IAAA,CAACyB,qBAAqB;MACrBC,KAAK,EAAG/B,EAAE,CAAE,KAAM,CAAG;MACrB,cAAaA,EAAE,CAAE,0BAA2B,CAAG;MAC/CqB,KAAK,EAAG,CAAEF,MAAM,EAAE,GAAG,CAAE,CAACa,IAAI,CAAE,EAAG,CAAG;MACpClB,QAAQ,EACHmB,IAAI,IACPb,YAAY,CACXa,IAAI,EACJ,GACD,CACD;MACDC,aAAa,EAAC;IAAG,CACjB,CAAC;EAAA,CACa,CAAC;AAEnB;AAEA,SAASJ,qBAAqBA,CAAEK,KAAuB,EAAG;EACzD,oBACC9B,IAAA,CAACJ,iBAAiB;IACjBmC,qBAAqB;IACrBT,SAAS,EAAC,oDAAoD;IAC9DU,aAAa,EAAC,KAAK;IACnBC,GAAG,EAAG7B,eAAiB;IACvB8B,GAAG,EAAG/B,eAAiB;IACvBgC,KAAK,EAAG,CAAE;MAAEnB,KAAK,EAAE,GAAG;MAAEU,KAAK,EAAE;IAAI,CAAC,CAAI;IAAA,GACnCI;EAAK,CACV,CAAC;AAEJ","ignoreList":[]}

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

@@ -7,8 +7,7 @@ import { Path, SVG } from '@wordpress/primitives';
  * Internal dependencies
  */
 import styles from './style.scss';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function FocalPoint({
   height,
   style,

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

@@ -1 +1 @@
-{"version":3,"names":["Path","SVG","styles","jsx","_jsx","jsxs","_jsxs","FocalPoint","height","style","width","viewBox","xmlns","children","focalPointIconPathOutline","d","focalPointIconPathFill"],"sources":["@wordpress/components/src/focal-point-picker/focal-point.native.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Path, SVG } from '@wordpress/primitives';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nexport default function FocalPoint( { height, style, width } ) {\n\treturn (\n\t\t<SVG\n\t\t\theight={ height }\n\t\t\tstyle={ style }\n\t\t\tviewBox=\"0 0 30 30\"\n\t\t\twidth={ width }\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t>\n\t\t\t<Path\n\t\t\t\tstyle={ styles.focalPointIconPathOutline }\n\t\t\t\td=\"M15 1C7.3 1 1 7.3 1 15s6.3 14 14 14 14-6.3 14-14S22.7 1 15 1zm0 22c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8z\"\n\t\t\t/>\n\t\t\t<Path\n\t\t\t\tstyle={ styles.focalPointIconPathFill }\n\t\t\t\td=\"M15 3C8.4 3 3 8.4 3 15s5.4 12 12 12 12-5.4 12-12S21.6 3 15 3zm0 22C9.5 25 5 20.5 5 15S9.5 5 15 5s10 4.5 10 10-4.5 10-10 10z\"\n\t\t\t/>\n\t\t</SVG>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,IAAI,EAAEC,GAAG,QAAQ,uBAAuB;;AAEjD;AACA;AACA;AACA,OAAOC,MAAM,MAAM,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAElC,eAAe,SAASC,UAAUA,CAAE;EAAEC,MAAM;EAAEC,KAAK;EAAEC;AAAM,CAAC,EAAG;EAC9D,oBACCJ,KAAA,CAACL,GAAG;IACHO,MAAM,EAAGA,MAAQ;IACjBC,KAAK,EAAGA,KAAO;IACfE,OAAO,EAAC,WAAW;IACnBD,KAAK,EAAGA,KAAO;IACfE,KAAK,EAAC,4BAA4B;IAAAC,QAAA,gBAElCT,IAAA,CAACJ,IAAI;MACJS,KAAK,EAAGP,MAAM,CAACY,yBAA2B;MAC1CC,CAAC,EAAC;IAAoH,CACtH,CAAC,eACFX,IAAA,CAACJ,IAAI;MACJS,KAAK,EAAGP,MAAM,CAACc,sBAAwB;MACvCD,CAAC,EAAC;IAA6H,CAC/H,CAAC;EAAA,CACE,CAAC;AAER","ignoreList":[]}
+{"version":3,"names":["Path","SVG","styles","jsx","_jsx","jsxs","_jsxs","FocalPoint","height","style","width","viewBox","xmlns","children","focalPointIconPathOutline","d","focalPointIconPathFill"],"sources":["@wordpress/components/src/focal-point-picker/focal-point.native.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Path, SVG } from '@wordpress/primitives';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nexport default function FocalPoint( { height, style, width } ) {\n\treturn (\n\t\t<SVG\n\t\t\theight={ height }\n\t\t\tstyle={ style }\n\t\t\tviewBox=\"0 0 30 30\"\n\t\t\twidth={ width }\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t>\n\t\t\t<Path\n\t\t\t\tstyle={ styles.focalPointIconPathOutline }\n\t\t\t\td=\"M15 1C7.3 1 1 7.3 1 15s6.3 14 14 14 14-6.3 14-14S22.7 1 15 1zm0 22c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8z\"\n\t\t\t/>\n\t\t\t<Path\n\t\t\t\tstyle={ styles.focalPointIconPathFill }\n\t\t\t\td=\"M15 3C8.4 3 3 8.4 3 15s5.4 12 12 12 12-5.4 12-12S21.6 3 15 3zm0 22C9.5 25 5 20.5 5 15S9.5 5 15 5s10 4.5 10 10-4.5 10-10 10z\"\n\t\t\t/>\n\t\t</SVG>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,IAAI,EAAEC,GAAG,QAAQ,uBAAuB;;AAEjD;AACA;AACA;AACA,OAAOC,MAAM,MAAM,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAElC,eAAe,SAASC,UAAUA,CAAE;EAAEC,MAAM;EAAEC,KAAK;EAAEC;AAAM,CAAC,EAAG;EAC9D,oBACCJ,KAAA,CAACL,GAAG;IACHO,MAAM,EAAGA,MAAQ;IACjBC,KAAK,EAAGA,KAAO;IACfE,OAAO,EAAC,WAAW;IACnBD,KAAK,EAAGA,KAAO;IACfE,KAAK,EAAC,4BAA4B;IAAAC,QAAA,gBAElCT,IAAA,CAACJ,IAAI;MACJS,KAAK,EAAGP,MAAM,CAACY,yBAA2B;MAC1CC,CAAC,EAAC;IAAoH,CACtH,CAAC,eACFX,IAAA,CAACJ,IAAI;MACJS,KAAK,EAAGP,MAAM,CAACc,sBAAwB;MACvCD,CAAC,EAAC;IAA6H,CAC/H,CAAC;EAAA,CACE,CAAC;AAER","ignoreList":[]}

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

@@ -2,8 +2,7 @@
  * Internal dependencies
  */
 import { GridView, GridLineX, GridLineY } from './styles/focal-point-picker-style';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function FocalPointPickerGrid({
   bounds,
   ...props

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

@@ -1 +1 @@
-{"version":3,"names":["GridView","GridLineX","GridLineY","jsx","_jsx","jsxs","_jsxs","FocalPointPickerGrid","bounds","props","className","style","width","height","children","top","left"],"sources":["@wordpress/components/src/focal-point-picker/grid.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport {\n\tGridView,\n\tGridLineX,\n\tGridLineY,\n} from './styles/focal-point-picker-style';\nimport type { FocalPointPickerGridProps } from './types';\nimport type { WordPressComponentProps } from '../context/wordpress-component';\n\nexport default function FocalPointPickerGrid( {\n\tbounds,\n\t...props\n}: WordPressComponentProps< FocalPointPickerGridProps, 'div' > ) {\n\treturn (\n\t\t<GridView\n\t\t\t{ ...props }\n\t\t\tclassName=\"components-focal-point-picker__grid\"\n\t\t\tstyle={ {\n\t\t\t\twidth: bounds.width,\n\t\t\t\theight: bounds.height,\n\t\t\t} }\n\t\t>\n\t\t\t<GridLineX style={ { top: '33%' } } />\n\t\t\t<GridLineX style={ { top: '66%' } } />\n\t\t\t<GridLineY style={ { left: '33%' } } />\n\t\t\t<GridLineY style={ { left: '66%' } } />\n\t\t</GridView>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SACCA,QAAQ,EACRC,SAAS,EACTC,SAAS,QACH,mCAAmC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAI3C,eAAe,SAASC,oBAAoBA,CAAE;EAC7CC,MAAM;EACN,GAAGC;AACyD,CAAC,EAAG;EAChE,oBACCH,KAAA,CAACN,QAAQ;IAAA,GACHS,KAAK;IACVC,SAAS,EAAC,qCAAqC;IAC/CC,KAAK,EAAG;MACPC,KAAK,EAAEJ,MAAM,CAACI,KAAK;MACnBC,MAAM,EAAEL,MAAM,CAACK;IAChB,CAAG;IAAAC,QAAA,gBAEHV,IAAA,CAACH,SAAS;MAACU,KAAK,EAAG;QAAEI,GAAG,EAAE;MAAM;IAAG,CAAE,CAAC,eACtCX,IAAA,CAACH,SAAS;MAACU,KAAK,EAAG;QAAEI,GAAG,EAAE;MAAM;IAAG,CAAE,CAAC,eACtCX,IAAA,CAACF,SAAS;MAACS,KAAK,EAAG;QAAEK,IAAI,EAAE;MAAM;IAAG,CAAE,CAAC,eACvCZ,IAAA,CAACF,SAAS;MAACS,KAAK,EAAG;QAAEK,IAAI,EAAE;MAAM;IAAG,CAAE,CAAC;EAAA,CAC9B,CAAC;AAEb","ignoreList":[]}
+{"version":3,"names":["GridView","GridLineX","GridLineY","jsx","_jsx","jsxs","_jsxs","FocalPointPickerGrid","bounds","props","className","style","width","height","children","top","left"],"sources":["@wordpress/components/src/focal-point-picker/grid.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport {\n\tGridView,\n\tGridLineX,\n\tGridLineY,\n} from './styles/focal-point-picker-style';\nimport type { FocalPointPickerGridProps } from './types';\nimport type { WordPressComponentProps } from '../context/wordpress-component';\n\nexport default function FocalPointPickerGrid( {\n\tbounds,\n\t...props\n}: WordPressComponentProps< FocalPointPickerGridProps, 'div' > ) {\n\treturn (\n\t\t<GridView\n\t\t\t{ ...props }\n\t\t\tclassName=\"components-focal-point-picker__grid\"\n\t\t\tstyle={ {\n\t\t\t\twidth: bounds.width,\n\t\t\t\theight: bounds.height,\n\t\t\t} }\n\t\t>\n\t\t\t<GridLineX style={ { top: '33%' } } />\n\t\t\t<GridLineX style={ { top: '66%' } } />\n\t\t\t<GridLineY style={ { left: '33%' } } />\n\t\t\t<GridLineY style={ { left: '66%' } } />\n\t\t</GridView>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SACCA,QAAQ,EACRC,SAAS,EACTC,SAAS,QACH,mCAAmC;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAI3C,eAAe,SAASC,oBAAoBA,CAAE;EAC7CC,MAAM;EACN,GAAGC;AACyD,CAAC,EAAG;EAChE,oBACCH,KAAA,CAACN,QAAQ;IAAA,GACHS,KAAK;IACVC,SAAS,EAAC,qCAAqC;IAC/CC,KAAK,EAAG;MACPC,KAAK,EAAEJ,MAAM,CAACI,KAAK;MACnBC,MAAM,EAAEL,MAAM,CAACK;IAChB,CAAG;IAAAC,QAAA,gBAEHV,IAAA,CAACH,SAAS;MAACU,KAAK,EAAG;QAAEI,GAAG,EAAE;MAAM;IAAG,CAAE,CAAC,eACtCX,IAAA,CAACH,SAAS;MAACU,KAAK,EAAG;QAAEI,GAAG,EAAE;MAAM;IAAG,CAAE,CAAC,eACtCX,IAAA,CAACF,SAAS;MAACS,KAAK,EAAG;QAAEK,IAAI,EAAE;MAAM;IAAG,CAAE,CAAC,eACvCZ,IAAA,CAACF,SAAS;MAACS,KAAK,EAAG;QAAEK,IAAI,EAAE;MAAM;IAAG,CAAE,CAAC;EAAA,CAC9B,CAAC;AAEb","ignoreList":[]}

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

@@ -21,8 +21,7 @@ import Media from './media';
 import { MediaWrapper, MediaContainer } from './styles/focal-point-picker-style';
 import { INITIAL_BOUNDS } from './utils';
 import { useUpdateEffect } from '../utils/hooks';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const GRID_OVERLAY_TIMEOUT = 600;
 
 /**

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

@@ -1 +1 @@
-{"version":3,"names":["clsx","__","useEffect","useRef","useState","__experimentalUseDragging","useDragging","useInstanceId","useIsomorphicLayoutEffect","BaseControl","Controls","FocalPoint","Grid","Media","MediaWrapper","MediaContainer","INITIAL_BOUNDS","useUpdateEffect","jsx","_jsx","jsxs","_jsxs","GRID_OVERLAY_TIMEOUT","FocalPointPicker","__nextHasNoMarginBottom","autoPlay","className","help","label","onChange","onDrag","onDragEnd","onDragStart","resolvePoint","url","value","valueProp","x","y","restProps","point","setPoint","showGridOverlay","setShowGridOverlay","startDrag","endDrag","isDragging","event","dragAreaRef","current","focus","getValueWithinDragArea","onDragMove","preventDefault","bounds","setBounds","refUpdateBounds","clientWidth","width","clientHeight","height","updateBounds","defaultView","ownerDocument","addEventListener","removeEventListener","clientX","clientY","shiftKey","top","left","getBoundingClientRect","nextX","nextY","Math","round","getFinalValue","_resolvePoint","resolvedValue","max","min","roundToTwoDecimalPlaces","n","arrowKeyStep","code","includes","step","delta","axis","focalPointPosition","undefined","classes","instanceId","id","timeout","window","setTimeout","clearTimeout","__associatedWPComponentName","children","onKeyDown","onMouseDown","onBlur","ref","role","tabIndex","showOverlay","alt","onLoad","src","hasHelpText"],"sources":["@wordpress/components/src/focal-point-picker/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\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 '../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 *        __nextHasNoMarginBottom\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 ) {\n\t\t\t\treturn;\n\t\t\t}\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 ) {\n\t\t\t\treturn;\n\t\t\t}\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 ) {\n\t\t\treturn;\n\t\t}\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 ) {\n\t\t\treturn;\n\t\t}\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 ) {\n\t\t\treturn;\n\t\t}\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\t\t}\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 !== undefined ? x * bounds.width : 0.5 * bounds.width,\n\t\ttop: y !== undefined ? y * bounds.height : 0.5 * bounds.height,\n\t};\n\n\tconst classes = clsx( 'components-focal-point-picker-control', className );\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\t__associatedWPComponentName=\"FocalPointPicker\"\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 ) {\n\t\t\t\t\t\t\tendDrag();\n\t\t\t\t\t\t}\n\t\t\t\t\t} }\n\t\t\t\t\tref={ dragAreaRef }\n\t\t\t\t\trole=\"button\"\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t>\n\t\t\t\t\t<Grid bounds={ bounds } showOverlay={ showGridOverlay } />\n\t\t\t\t\t<Media\n\t\t\t\t\t\talt={ __( 'Media preview' ) }\n\t\t\t\t\t\tautoPlay={ autoPlay }\n\t\t\t\t\t\tonLoad={ refUpdateBounds.current }\n\t\t\t\t\t\tsrc={ url }\n\t\t\t\t\t/>\n\t\t\t\t\t<FocalPoint\n\t\t\t\t\t\t{ ...focalPointPosition }\n\t\t\t\t\t\tisDragging={ isDragging }\n\t\t\t\t\t/>\n\t\t\t\t</MediaContainer>\n\t\t\t</MediaWrapper>\n\t\t\t<Controls\n\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t\thasHelpText={ !! help }\n\t\t\t\tpoint={ { x, y } }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tonChange?.( getFinalValue( value ) );\n\t\t\t\t} }\n\t\t\t/>\n\t\t</BaseControl>\n\t);\n}\n\nexport default FocalPointPicker;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["clsx","__","useEffect","useRef","useState","__experimentalUseDragging","useDragging","useInstanceId","useIsomorphicLayoutEffect","BaseControl","Controls","FocalPoint","Grid","Media","MediaWrapper","MediaContainer","INITIAL_BOUNDS","useUpdateEffect","jsx","_jsx","jsxs","_jsxs","GRID_OVERLAY_TIMEOUT","FocalPointPicker","__nextHasNoMarginBottom","autoPlay","className","help","label","onChange","onDrag","onDragEnd","onDragStart","resolvePoint","url","value","valueProp","x","y","restProps","point","setPoint","showGridOverlay","setShowGridOverlay","startDrag","endDrag","isDragging","event","dragAreaRef","current","focus","getValueWithinDragArea","onDragMove","preventDefault","bounds","setBounds","refUpdateBounds","clientWidth","width","clientHeight","height","updateBounds","defaultView","ownerDocument","addEventListener","removeEventListener","clientX","clientY","shiftKey","top","left","getBoundingClientRect","nextX","nextY","Math","round","getFinalValue","_resolvePoint","resolvedValue","max","min","roundToTwoDecimalPlaces","n","arrowKeyStep","code","includes","step","delta","axis","focalPointPosition","undefined","classes","instanceId","id","timeout","window","setTimeout","clearTimeout","__associatedWPComponentName","children","onKeyDown","onMouseDown","onBlur","ref","role","tabIndex","showOverlay","alt","onLoad","src","hasHelpText"],"sources":["@wordpress/components/src/focal-point-picker/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\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 '../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 *        __nextHasNoMarginBottom\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 ) {\n\t\t\t\treturn;\n\t\t\t}\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 ) {\n\t\t\t\treturn;\n\t\t\t}\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 ) {\n\t\t\treturn;\n\t\t}\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 ) {\n\t\t\treturn;\n\t\t}\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 ) {\n\t\t\treturn;\n\t\t}\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\t\t}\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 !== undefined ? x * bounds.width : 0.5 * bounds.width,\n\t\ttop: y !== undefined ? y * bounds.height : 0.5 * bounds.height,\n\t};\n\n\tconst classes = clsx( 'components-focal-point-picker-control', className );\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\t__associatedWPComponentName=\"FocalPointPicker\"\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 ) {\n\t\t\t\t\t\t\tendDrag();\n\t\t\t\t\t\t}\n\t\t\t\t\t} }\n\t\t\t\t\tref={ dragAreaRef }\n\t\t\t\t\trole=\"button\"\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t>\n\t\t\t\t\t<Grid bounds={ bounds } showOverlay={ showGridOverlay } />\n\t\t\t\t\t<Media\n\t\t\t\t\t\talt={ __( 'Media preview' ) }\n\t\t\t\t\t\tautoPlay={ autoPlay }\n\t\t\t\t\t\tonLoad={ refUpdateBounds.current }\n\t\t\t\t\t\tsrc={ url }\n\t\t\t\t\t/>\n\t\t\t\t\t<FocalPoint\n\t\t\t\t\t\t{ ...focalPointPosition }\n\t\t\t\t\t\tisDragging={ isDragging }\n\t\t\t\t\t/>\n\t\t\t\t</MediaContainer>\n\t\t\t</MediaWrapper>\n\t\t\t<Controls\n\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t\thasHelpText={ !! help }\n\t\t\t\tpoint={ { x, y } }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tonChange?.( getFinalValue( value ) );\n\t\t\t\t} }\n\t\t\t/>\n\t\t</BaseControl>\n\t);\n}\n\nexport default FocalPointPicker;\n"],"mappings":"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","ignoreList":[]}

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

@@ -22,8 +22,7 @@ import { isVideoType } from './utils';
 import { clamp } from '../utils/math';
 import Image from '../mobile/image';
 import UnitControl from '../unit-control';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const MIN_POSITION_VALUE = 0;
 const MAX_POSITION_VALUE = 100;
 const FOCAL_POINT_UNITS = [{