@wordpress/components 19.15.0 → 20.0.0

package/build-module/range-control/styles/range-control-styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/range-control/styles/range-control-styles.ts"],"names":["css","NumberControl","COLORS","reduceMotion","rtl","space","rangeHeightValue","railHeight","rangeHeight","height","minHeight","thumbSize","Root","wrapperColor","color","ui","borderFocus","wrapperMargin","marks","marginBottom","undefined","Wrapper","blue","medium","focus","BeforeIconWrapper","marginRight","AfterIconWrapper","marginLeft","railBackgroundColor","disabled","railColor","background","lightGray","Rail","trackBackgroundColor","trackColor","Track","MarksWrapper","markFill","isFilled","backgroundColor","Mark","markLabelFill","darkGray","MarkLabel","thumbColor","ThumbWrapper","transform","thumbFocus","isFocused","Thumb","InputRange","tooltipShow","show","opacity","tooltipPosition","position","isBottom","Tooltip","InputNumber","ActionRightWrapper"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport NumberControl from '../../number-control';\nimport { COLORS, reduceMotion, rtl } from '../../utils';\nimport { space } from '../../ui/utils/space';\n\nimport type {\n\tRangeMarkProps,\n\tRailProps,\n\tThumbProps,\n\tTooltipProps,\n\tTrackProps,\n\tWrapperProps,\n} from '../types';\n\nconst rangeHeightValue = 30;\nconst railHeight = 4;\nconst rangeHeight = () =>\n\tcss( { height: rangeHeightValue, minHeight: rangeHeightValue } );\nconst thumbSize = 12;\n\nexport const Root = styled.div`\n\t-webkit-tap-highlight-color: transparent;\n\tbox-sizing: border-box;\n\talign-items: flex-start;\n\tdisplay: inline-flex;\n\tjustify-content: flex-start;\n\tpadding: 0;\n\tposition: relative;\n\ttouch-action: none;\n\twidth: 100%;\n`;\n\nconst wrapperColor = ( { color = COLORS.ui.borderFocus }: WrapperProps ) =>\n\tcss( { color } );\n\nconst wrapperMargin = ( { marks }: WrapperProps ) =>\n\tcss( { marginBottom: marks ? 16 : undefined } );\n\nexport const Wrapper = styled.div< WrapperProps >`\n\tbox-sizing: border-box;\n\tcolor: ${ COLORS.blue.medium.focus };\n\tdisplay: block;\n\tflex: 1;\n\tposition: relative;\n\twidth: 100%;\n\n\t${ wrapperColor };\n\t${ rangeHeight };\n\t${ wrapperMargin };\n`;\n\nexport const BeforeIconWrapper = styled.span`\n\tmargin-top: ${ railHeight }px;\n\n\t${ rtl( { marginRight: 6 } ) }\n`;\n\nexport const AfterIconWrapper = styled.span`\n\tmargin-top: ${ railHeight }px;\n\n\t${ rtl( { marginLeft: 6 } ) }\n`;\n\nconst railBackgroundColor = ( { disabled, railColor }: RailProps ) => {\n\tlet background = railColor || '';\n\n\tif ( disabled ) {\n\t\tbackground = COLORS.lightGray[ 400 ];\n\t}\n\n\treturn css( { background } );\n};\n\nexport const Rail = styled.span`\n\tbackground-color: ${ COLORS.lightGray[ 600 ] };\n\tbox-sizing: border-box;\n\tleft: 0;\n\tpointer-events: none;\n\tright: 0;\n\tdisplay: block;\n\theight: ${ railHeight }px;\n\tposition: absolute;\n\tmargin-top: ${ ( rangeHeightValue - railHeight ) / 2 }px;\n\ttop: 0;\n\tborder-radius: ${ railHeight }px;\n\n\t${ railBackgroundColor };\n`;\n\nconst trackBackgroundColor = ( { disabled, trackColor }: TrackProps ) => {\n\tlet background = trackColor || 'currentColor';\n\n\tif ( disabled ) {\n\t\tbackground = COLORS.lightGray[ 800 ];\n\t}\n\n\treturn css( { background } );\n};\n\nexport const Track = styled.span`\n\tbackground-color: currentColor;\n\tborder-radius: ${ railHeight }px;\n\tbox-sizing: border-box;\n\theight: ${ railHeight }px;\n\tpointer-events: none;\n\tdisplay: block;\n\tposition: absolute;\n\tmargin-top: ${ ( rangeHeightValue - railHeight ) / 2 }px;\n\ttop: 0;\n\n\t${ trackBackgroundColor };\n`;\n\nexport const MarksWrapper = styled.span`\n\tbox-sizing: border-box;\n\tdisplay: block;\n\tpointer-events: none;\n\tposition: relative;\n\twidth: 100%;\n\tuser-select: none;\n`;\n\nconst markFill = ( { disabled, isFilled }: RangeMarkProps ) => {\n\tlet backgroundColor = isFilled ? 'currentColor' : COLORS.lightGray[ 600 ];\n\n\tif ( disabled ) {\n\t\tbackgroundColor = COLORS.lightGray[ 800 ];\n\t}\n\n\treturn css( {\n\t\tbackgroundColor,\n\t} );\n};\n\nexport const Mark = styled.span`\n\tbox-sizing: border-box;\n\theight: ${ thumbSize }px;\n\tleft: 0;\n\tposition: absolute;\n\ttop: -4px;\n\twidth: 1px;\n\n\t${ markFill };\n`;\n\nconst markLabelFill = ( { isFilled }: RangeMarkProps ) => {\n\treturn css( {\n\t\tcolor: isFilled ? COLORS.darkGray[ 300 ] : COLORS.lightGray[ 600 ],\n\t} );\n};\n\nexport const MarkLabel = styled.span`\n\tbox-sizing: border-box;\n\tcolor: ${ COLORS.lightGray[ 600 ] };\n\tleft: 0;\n\tfont-size: 11px;\n\tposition: absolute;\n\ttop: 12px;\n\ttransform: translateX( -50% );\n\twhite-space: nowrap;\n\n\t${ markLabelFill };\n`;\n\nconst thumbColor = ( { disabled }: ThumbProps ) =>\n\tdisabled\n\t\t? css`\n\t\t\t\tbackground-color: ${ COLORS.lightGray[ 800 ] };\n\t\t  `\n\t\t: css`\n\t\t\t\tbackground-color: var( --wp-admin-theme-color );\n\t\t  `;\n\nexport const ThumbWrapper = styled.span`\n\talign-items: center;\n\tbox-sizing: border-box;\n\tdisplay: flex;\n\theight: ${ thumbSize }px;\n\tjustify-content: center;\n\tmargin-top: ${ ( rangeHeightValue - thumbSize ) / 2 }px;\n\toutline: 0;\n\tpointer-events: none;\n\tposition: absolute;\n\ttop: 0;\n\tuser-select: none;\n\twidth: ${ thumbSize }px;\n\tborder-radius: 50%;\n\n\t${ thumbColor };\n\t${ rtl( { marginLeft: -10 } ) };\n\t${ rtl(\n\t\t{ transform: 'translateX( 4.5px )' },\n\t\t{ transform: 'translateX( -4.5px )' }\n\t) };\n`;\n\nconst thumbFocus = ( { isFocused }: ThumbProps ) => {\n\treturn isFocused\n\t\t? css`\n\t\t\t\t&::before {\n\t\t\t\t\tcontent: ' ';\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tbackground-color: var( --wp-admin-theme-color );\n\t\t\t\t\topacity: 0.4;\n\t\t\t\t\tborder-radius: 50%;\n\t\t\t\t\theight: ${ thumbSize + 8 }px;\n\t\t\t\t\twidth: ${ thumbSize + 8 }px;\n\t\t\t\t\ttop: -4px;\n\t\t\t\t\tleft: -4px;\n\t\t\t\t}\n\t\t  `\n\t\t: '';\n};\n\nexport const Thumb = styled.span< ThumbProps >`\n\talign-items: center;\n\tborder-radius: 50%;\n\tbox-sizing: border-box;\n\theight: 100%;\n\toutline: 0;\n\tposition: absolute;\n\tuser-select: none;\n\twidth: 100%;\n\n\t${ thumbColor };\n\t${ thumbFocus };\n`;\n\nexport const InputRange = styled.input`\n\tbox-sizing: border-box;\n\tcursor: pointer;\n\tdisplay: block;\n\theight: 100%;\n\tleft: 0;\n\tmargin: 0 -${ thumbSize / 2 }px;\n\topacity: 0;\n\toutline: none;\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n\twidth: calc( 100% + ${ thumbSize }px );\n`;\n\nconst tooltipShow = ( { show }: TooltipProps ) => {\n\treturn css( {\n\t\topacity: show ? 1 : 0,\n\t} );\n};\n\nconst tooltipPosition = ( { position }: TooltipProps ) => {\n\tconst isBottom = position === 'bottom';\n\n\tif ( isBottom ) {\n\t\treturn css`\n\t\t\tbottom: -80%;\n\t\t`;\n\t}\n\n\treturn css`\n\t\ttop: -80%;\n\t`;\n};\n\nexport const Tooltip = styled.span< TooltipProps >`\n\tbackground: rgba( 0, 0, 0, 0.8 );\n\tborder-radius: 2px;\n\tbox-sizing: border-box;\n\tcolor: white;\n\tdisplay: inline-block;\n\tfont-size: 12px;\n\tmin-width: 32px;\n\topacity: 0;\n\tpadding: 4px 8px;\n\tpointer-events: none;\n\tposition: absolute;\n\ttext-align: center;\n\ttransition: opacity 120ms ease;\n\tuser-select: none;\n\tline-height: 1.4;\n\n\t${ tooltipShow };\n\t${ tooltipPosition };\n\t${ reduceMotion( 'transition' ) };\n\t${ rtl(\n\t\t{ transform: 'translateX(-50%)' },\n\t\t{ transform: 'translateX(50%)' }\n\t) }\n`;\n\n// @todo: Refactor RangeControl with latest HStack configuration\n// @wordpress/components/ui/hstack.\nexport const InputNumber = styled( NumberControl )`\n\tbox-sizing: border-box;\n\tdisplay: inline-block;\n\tfont-size: 13px;\n\tmargin-top: 0;\n\twidth: ${ space( 16 ) } !important;\n\n\tinput[type='number']& {\n\t\t${ rangeHeight };\n\t}\n\n\t${ rtl( { marginLeft: `${ space( 4 ) } !important` } ) }\n`;\n\nexport const ActionRightWrapper = styled.span`\n\tbox-sizing: border-box;\n\tdisplay: block;\n\tmargin-top: 0;\n\n\tbutton,\n\tbutton.is-small {\n\t\tmargin-left: 0;\n\t\t${ rangeHeight };\n\t}\n\n\t${ rtl( { marginLeft: 8 } ) }\n`;\n"]}
+{"version":3,"sources":["@wordpress/components/src/range-control/styles/range-control-styles.ts"],"names":["css","NumberControl","COLORS","reduceMotion","rtl","space","rangeHeightValue","railHeight","rangeHeight","height","minHeight","thumbSize","Root","wrapperColor","color","ui","borderFocus","wrapperMargin","marks","__nextHasNoMarginBottom","marginBottom","undefined","Wrapper","BeforeIconWrapper","marginRight","AfterIconWrapper","marginLeft","railBackgroundColor","disabled","railColor","background","lightGray","Rail","trackBackgroundColor","trackColor","Track","MarksWrapper","markFill","isFilled","backgroundColor","Mark","markLabelFill","darkGray","MarkLabel","thumbColor","ThumbWrapper","transform","thumbFocus","isFocused","Thumb","InputRange","tooltipShow","show","opacity","tooltipPosition","position","isBottom","Tooltip","InputNumber","ActionRightWrapper"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport NumberControl from '../../number-control';\nimport { COLORS, reduceMotion, rtl } from '../../utils';\nimport { space } from '../../ui/utils/space';\n\nimport type {\n\tRangeMarkProps,\n\tRailProps,\n\tThumbProps,\n\tTooltipProps,\n\tTrackProps,\n\tWrapperProps,\n} from '../types';\n\nconst rangeHeightValue = 30;\nconst railHeight = 4;\nconst rangeHeight = () =>\n\tcss( { height: rangeHeightValue, minHeight: rangeHeightValue } );\nconst thumbSize = 12;\n\nexport const Root = styled.div`\n\t-webkit-tap-highlight-color: transparent;\n\talign-items: flex-start;\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\tpadding: 0;\n\tposition: relative;\n\ttouch-action: none;\n\twidth: 100%;\n`;\n\nconst wrapperColor = ( { color = COLORS.ui.borderFocus }: WrapperProps ) =>\n\tcss( { color } );\n\nconst wrapperMargin = ( { marks, __nextHasNoMarginBottom }: WrapperProps ) => {\n\tif ( ! __nextHasNoMarginBottom ) {\n\t\treturn css( { marginBottom: marks ? 16 : undefined } );\n\t}\n\treturn '';\n};\n\nexport const Wrapper = styled.div< WrapperProps >`\n\tdisplay: block;\n\tflex: 1;\n\tposition: relative;\n\twidth: 100%;\n\n\t${ wrapperColor };\n\t${ rangeHeight };\n\t${ wrapperMargin };\n`;\n\nexport const BeforeIconWrapper = styled.span`\n\tdisplay: flex; // ensures the height isn't affected by line-height\n\tmargin-top: ${ railHeight }px;\n\n\t${ rtl( { marginRight: 6 } ) }\n`;\n\nexport const AfterIconWrapper = styled.span`\n\tdisplay: flex; // ensures the height isn't affected by line-height\n\tmargin-top: ${ railHeight }px;\n\n\t${ rtl( { marginLeft: 6 } ) }\n`;\n\nconst railBackgroundColor = ( { disabled, railColor }: RailProps ) => {\n\tlet background = railColor || '';\n\n\tif ( disabled ) {\n\t\tbackground = COLORS.lightGray[ 400 ];\n\t}\n\n\treturn css( { background } );\n};\n\nexport const Rail = styled.span`\n\tbackground-color: ${ COLORS.lightGray[ 600 ] };\n\tleft: 0;\n\tpointer-events: none;\n\tright: 0;\n\tdisplay: block;\n\theight: ${ railHeight }px;\n\tposition: absolute;\n\tmargin-top: ${ ( rangeHeightValue - railHeight ) / 2 }px;\n\ttop: 0;\n\tborder-radius: ${ railHeight }px;\n\n\t${ railBackgroundColor };\n`;\n\nconst trackBackgroundColor = ( { disabled, trackColor }: TrackProps ) => {\n\tlet background = trackColor || 'currentColor';\n\n\tif ( disabled ) {\n\t\tbackground = COLORS.lightGray[ 800 ];\n\t}\n\n\treturn css( { background } );\n};\n\nexport const Track = styled.span`\n\tbackground-color: currentColor;\n\tborder-radius: ${ railHeight }px;\n\theight: ${ railHeight }px;\n\tpointer-events: none;\n\tdisplay: block;\n\tposition: absolute;\n\tmargin-top: ${ ( rangeHeightValue - railHeight ) / 2 }px;\n\ttop: 0;\n\n\t${ trackBackgroundColor };\n`;\n\nexport const MarksWrapper = styled.span`\n\tdisplay: block;\n\tpointer-events: none;\n\tposition: relative;\n\twidth: 100%;\n\tuser-select: none;\n`;\n\nconst markFill = ( { disabled, isFilled }: RangeMarkProps ) => {\n\tlet backgroundColor = isFilled ? 'currentColor' : COLORS.lightGray[ 600 ];\n\n\tif ( disabled ) {\n\t\tbackgroundColor = COLORS.lightGray[ 800 ];\n\t}\n\n\treturn css( {\n\t\tbackgroundColor,\n\t} );\n};\n\nexport const Mark = styled.span`\n\theight: ${ thumbSize }px;\n\tleft: 0;\n\tposition: absolute;\n\ttop: -4px;\n\twidth: 1px;\n\n\t${ markFill };\n`;\n\nconst markLabelFill = ( { isFilled }: RangeMarkProps ) => {\n\treturn css( {\n\t\tcolor: isFilled ? COLORS.darkGray[ 300 ] : COLORS.lightGray[ 600 ],\n\t} );\n};\n\nexport const MarkLabel = styled.span`\n\tcolor: ${ COLORS.lightGray[ 600 ] };\n\tleft: 0;\n\tfont-size: 11px;\n\tposition: absolute;\n\ttop: 12px;\n\ttransform: translateX( -50% );\n\twhite-space: nowrap;\n\n\t${ markLabelFill };\n`;\n\nconst thumbColor = ( { disabled }: ThumbProps ) =>\n\tdisabled\n\t\t? css`\n\t\t\t\tbackground-color: ${ COLORS.lightGray[ 800 ] };\n\t\t  `\n\t\t: css`\n\t\t\t\tbackground-color: var( --wp-admin-theme-color );\n\t\t  `;\n\nexport const ThumbWrapper = styled.span`\n\talign-items: center;\n\tdisplay: flex;\n\theight: ${ thumbSize }px;\n\tjustify-content: center;\n\tmargin-top: ${ ( rangeHeightValue - thumbSize ) / 2 }px;\n\toutline: 0;\n\tpointer-events: none;\n\tposition: absolute;\n\ttop: 0;\n\tuser-select: none;\n\twidth: ${ thumbSize }px;\n\tborder-radius: 50%;\n\n\t${ thumbColor };\n\t${ rtl( { marginLeft: -10 } ) };\n\t${ rtl(\n\t\t{ transform: 'translateX( 4.5px )' },\n\t\t{ transform: 'translateX( -4.5px )' }\n\t) };\n`;\n\nconst thumbFocus = ( { isFocused }: ThumbProps ) => {\n\treturn isFocused\n\t\t? css`\n\t\t\t\t&::before {\n\t\t\t\t\tcontent: ' ';\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tbackground-color: var( --wp-admin-theme-color );\n\t\t\t\t\topacity: 0.4;\n\t\t\t\t\tborder-radius: 50%;\n\t\t\t\t\theight: ${ thumbSize + 8 }px;\n\t\t\t\t\twidth: ${ thumbSize + 8 }px;\n\t\t\t\t\ttop: -4px;\n\t\t\t\t\tleft: -4px;\n\t\t\t\t}\n\t\t  `\n\t\t: '';\n};\n\nexport const Thumb = styled.span< ThumbProps >`\n\talign-items: center;\n\tborder-radius: 50%;\n\theight: 100%;\n\toutline: 0;\n\tposition: absolute;\n\tuser-select: none;\n\twidth: 100%;\n\n\t${ thumbColor };\n\t${ thumbFocus };\n`;\n\nexport const InputRange = styled.input`\n\tbox-sizing: border-box;\n\tcursor: pointer;\n\tdisplay: block;\n\theight: 100%;\n\tleft: 0;\n\tmargin: 0 -${ thumbSize / 2 }px;\n\topacity: 0;\n\toutline: none;\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n\twidth: calc( 100% + ${ thumbSize }px );\n`;\n\nconst tooltipShow = ( { show }: TooltipProps ) => {\n\treturn css( {\n\t\topacity: show ? 1 : 0,\n\t} );\n};\n\nconst tooltipPosition = ( { position }: TooltipProps ) => {\n\tconst isBottom = position === 'bottom';\n\n\tif ( isBottom ) {\n\t\treturn css`\n\t\t\tbottom: -80%;\n\t\t`;\n\t}\n\n\treturn css`\n\t\ttop: -80%;\n\t`;\n};\n\nexport const Tooltip = styled.span< TooltipProps >`\n\tbackground: rgba( 0, 0, 0, 0.8 );\n\tborder-radius: 2px;\n\tcolor: white;\n\tdisplay: inline-block;\n\tfont-size: 12px;\n\tmin-width: 32px;\n\topacity: 0;\n\tpadding: 4px 8px;\n\tpointer-events: none;\n\tposition: absolute;\n\ttext-align: center;\n\ttransition: opacity 120ms ease;\n\tuser-select: none;\n\tline-height: 1.4;\n\n\t${ tooltipShow };\n\t${ tooltipPosition };\n\t${ reduceMotion( 'transition' ) };\n\t${ rtl(\n\t\t{ transform: 'translateX(-50%)' },\n\t\t{ transform: 'translateX(50%)' }\n\t) }\n`;\n\n// @todo: Refactor RangeControl with latest HStack configuration\n// @wordpress/components/ui/hstack.\nexport const InputNumber = styled( NumberControl )`\n\tdisplay: inline-block;\n\tfont-size: 13px;\n\tmargin-top: 0;\n\twidth: ${ space( 16 ) } !important;\n\n\tinput[type='number']& {\n\t\t${ rangeHeight };\n\t}\n\n\t${ rtl( { marginLeft: `${ space( 4 ) } !important` } ) }\n`;\n\nexport const ActionRightWrapper = styled.span`\n\tdisplay: block;\n\tmargin-top: 0;\n\n\tbutton,\n\tbutton.is-small {\n\t\tmargin-left: 0;\n\t\t${ rangeHeight };\n\t}\n\n\t${ rtl( { marginLeft: 8 } ) }\n`;\n"]}

package/build-module/range-control/utils.js

@@ -47,7 +47,7 @@ export function useControlledRangeValue(settings) {
     initial
   } = settings;
   const [state, setInternalState] = useControlledState(floatClamp(valueProp, min, max), {
-    initial,
+    initial: floatClamp(initial !== null && initial !== void 0 ? initial : null, min, max),
     fallback: null
   });
   const setState = useCallback(nextValue => {

package/build-module/range-control/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/range-control/utils.ts"],"names":["useCallback","useRef","useEffect","useState","useControlledState","clamp","noop","floatClamp","value","min","max","parseFloat","useControlledRangeValue","settings","valueProp","initial","state","setInternalState","fallback","setState","nextValue","useDebouncedHoverInteraction","onHide","onMouseLeave","onMouseMove","onShow","timeout","show","setShow","timeoutRef","setDebouncedTimeout","callback","window","clearTimeout","current","setTimeout","handleOnMouseMove","event","handleOnMouseLeave"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { MouseEventHandler } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useRef, useEffect, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useControlledState } from '../utils/hooks';\nimport { clamp } from '../utils/math';\n\nimport type {\n\tUseControlledRangeValueArgs,\n\tUseDebouncedHoverInteractionArgs,\n} from './types';\n\nconst noop = () => {};\n\n/**\n * A float supported clamp function for a specific value.\n *\n * @param  value The value to clamp.\n * @param  min   The minimum value.\n * @param  max   The maximum value.\n *\n * @return A (float) number\n */\nexport function floatClamp( value: number | null, min: number, max: number ) {\n\tif ( typeof value !== 'number' ) {\n\t\treturn null;\n\t}\n\n\treturn parseFloat( `${ clamp( value, min, max ) }` );\n}\n\n/**\n * Hook to store a clamped value, derived from props.\n *\n * @param  settings\n * @return The controlled value and the value setter.\n */\nexport function useControlledRangeValue(\n\tsettings: UseControlledRangeValueArgs\n) {\n\tconst { min, max, value: valueProp, initial } = settings;\n\tconst [ state, setInternalState ] = useControlledState(\n\t\tfloatClamp( valueProp, min, max ),\n\t\t{ initial, fallback: null }\n\t);\n\n\tconst setState = useCallback(\n\t\t( nextValue: number | null ) => {\n\t\t\tif ( nextValue === null ) {\n\t\t\t\tsetInternalState( null );\n\t\t\t} else {\n\t\t\t\tsetInternalState( floatClamp( nextValue, min, max ) );\n\t\t\t}\n\t\t},\n\t\t[ min, max ]\n\t);\n\n\t// `state` can't be an empty string because we specified a fallback value of\n\t// `null` in `useControlledState`\n\treturn [ state as Exclude< typeof state, '' >, setState ] as const;\n}\n\n/**\n * Hook to encapsulate the debouncing \"hover\" to better handle the showing\n * and hiding of the Tooltip.\n *\n * @param  settings\n * @return Bound properties for use on a React.Node.\n */\nexport function useDebouncedHoverInteraction(\n\tsettings: UseDebouncedHoverInteractionArgs\n) {\n\tconst {\n\t\tonHide = noop,\n\t\tonMouseLeave = noop as MouseEventHandler,\n\t\tonMouseMove = noop as MouseEventHandler,\n\t\tonShow = noop,\n\t\ttimeout = 300,\n\t} = settings;\n\n\tconst [ show, setShow ] = useState( false );\n\tconst timeoutRef = useRef< number | undefined >();\n\n\tconst setDebouncedTimeout = useCallback(\n\t\t( callback ) => {\n\t\t\twindow.clearTimeout( timeoutRef.current );\n\n\t\t\ttimeoutRef.current = window.setTimeout( callback, timeout );\n\t\t},\n\t\t[ timeout ]\n\t);\n\n\tconst handleOnMouseMove = useCallback( ( event ) => {\n\t\tonMouseMove( event );\n\n\t\tsetDebouncedTimeout( () => {\n\t\t\tif ( ! show ) {\n\t\t\t\tsetShow( true );\n\t\t\t\tonShow();\n\t\t\t}\n\t\t} );\n\t}, [] );\n\n\tconst handleOnMouseLeave = useCallback( ( event ) => {\n\t\tonMouseLeave( event );\n\n\t\tsetDebouncedTimeout( () => {\n\t\t\tsetShow( false );\n\t\t\tonHide();\n\t\t} );\n\t}, [] );\n\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\twindow.clearTimeout( timeoutRef.current );\n\t\t};\n\t} );\n\n\treturn {\n\t\tonMouseMove: handleOnMouseMove,\n\t\tonMouseLeave: handleOnMouseLeave,\n\t};\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/range-control/utils.ts"],"names":["useCallback","useRef","useEffect","useState","useControlledState","clamp","noop","floatClamp","value","min","max","parseFloat","useControlledRangeValue","settings","valueProp","initial","state","setInternalState","fallback","setState","nextValue","useDebouncedHoverInteraction","onHide","onMouseLeave","onMouseMove","onShow","timeout","show","setShow","timeoutRef","setDebouncedTimeout","callback","window","clearTimeout","current","setTimeout","handleOnMouseMove","event","handleOnMouseLeave"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { MouseEventHandler } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useRef, useEffect, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useControlledState } from '../utils/hooks';\nimport { clamp } from '../utils/math';\n\nimport type {\n\tUseControlledRangeValueArgs,\n\tUseDebouncedHoverInteractionArgs,\n} from './types';\n\nconst noop = () => {};\n\n/**\n * A float supported clamp function for a specific value.\n *\n * @param  value The value to clamp.\n * @param  min   The minimum value.\n * @param  max   The maximum value.\n *\n * @return A (float) number\n */\nexport function floatClamp( value: number | null, min: number, max: number ) {\n\tif ( typeof value !== 'number' ) {\n\t\treturn null;\n\t}\n\n\treturn parseFloat( `${ clamp( value, min, max ) }` );\n}\n\n/**\n * Hook to store a clamped value, derived from props.\n *\n * @param  settings\n * @return The controlled value and the value setter.\n */\nexport function useControlledRangeValue(\n\tsettings: UseControlledRangeValueArgs\n) {\n\tconst { min, max, value: valueProp, initial } = settings;\n\tconst [ state, setInternalState ] = useControlledState(\n\t\tfloatClamp( valueProp, min, max ),\n\t\t{\n\t\t\tinitial: floatClamp( initial ?? null, min, max ),\n\t\t\tfallback: null,\n\t\t}\n\t);\n\n\tconst setState = useCallback(\n\t\t( nextValue: number | null ) => {\n\t\t\tif ( nextValue === null ) {\n\t\t\t\tsetInternalState( null );\n\t\t\t} else {\n\t\t\t\tsetInternalState( floatClamp( nextValue, min, max ) );\n\t\t\t}\n\t\t},\n\t\t[ min, max ]\n\t);\n\n\t// `state` can't be an empty string because we specified a fallback value of\n\t// `null` in `useControlledState`\n\treturn [ state as Exclude< typeof state, '' >, setState ] as const;\n}\n\n/**\n * Hook to encapsulate the debouncing \"hover\" to better handle the showing\n * and hiding of the Tooltip.\n *\n * @param  settings\n * @return Bound properties for use on a React.Node.\n */\nexport function useDebouncedHoverInteraction(\n\tsettings: UseDebouncedHoverInteractionArgs\n) {\n\tconst {\n\t\tonHide = noop,\n\t\tonMouseLeave = noop as MouseEventHandler,\n\t\tonMouseMove = noop as MouseEventHandler,\n\t\tonShow = noop,\n\t\ttimeout = 300,\n\t} = settings;\n\n\tconst [ show, setShow ] = useState( false );\n\tconst timeoutRef = useRef< number | undefined >();\n\n\tconst setDebouncedTimeout = useCallback(\n\t\t( callback ) => {\n\t\t\twindow.clearTimeout( timeoutRef.current );\n\n\t\t\ttimeoutRef.current = window.setTimeout( callback, timeout );\n\t\t},\n\t\t[ timeout ]\n\t);\n\n\tconst handleOnMouseMove = useCallback( ( event ) => {\n\t\tonMouseMove( event );\n\n\t\tsetDebouncedTimeout( () => {\n\t\t\tif ( ! show ) {\n\t\t\t\tsetShow( true );\n\t\t\t\tonShow();\n\t\t\t}\n\t\t} );\n\t}, [] );\n\n\tconst handleOnMouseLeave = useCallback( ( event ) => {\n\t\tonMouseLeave( event );\n\n\t\tsetDebouncedTimeout( () => {\n\t\t\tsetShow( false );\n\t\t\tonHide();\n\t\t} );\n\t}, [] );\n\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\twindow.clearTimeout( timeoutRef.current );\n\t\t};\n\t} );\n\n\treturn {\n\t\tonMouseMove: handleOnMouseMove,\n\t\tonMouseLeave: handleOnMouseLeave,\n\t};\n}\n"]}

package/build-module/resizable-box/resize-tooltip/styles/resize-tooltip.styles.js

@@ -22,7 +22,7 @@ export const Root = _styled("div", process.env.NODE_ENV === "production" ? {
 } : {
   name: "1cd7zoc",
   styles: "bottom:0;box-sizing:border-box;left:0;pointer-events:none;position:absolute;right:0;top:0",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvcmVzaXphYmxlLWJveC9yZXNpemUtdG9vbHRpcC9zdHlsZXMvcmVzaXplLXRvb2x0aXAuc3R5bGVzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVc4QiIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3Jlc2l6YWJsZS1ib3gvcmVzaXplLXRvb2x0aXAvc3R5bGVzL3Jlc2l6ZS10b29sdGlwLnN0eWxlcy5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgVGV4dCB9IGZyb20gJy4uLy4uLy4uL3RleHQnO1xuaW1wb3J0IHsgQ09MT1JTIH0gZnJvbSAnLi4vLi4vLi4vdXRpbHMnO1xuXG5leHBvcnQgY29uc3QgUm9vdCA9IHN0eWxlZC5kaXZgXG5cdGJvdHRvbTogMDtcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0bGVmdDogMDtcblx0cG9pbnRlci1ldmVudHM6IG5vbmU7XG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0cmlnaHQ6IDA7XG5cdHRvcDogMDtcbmA7XG5cbmV4cG9ydCBjb25zdCBUb29sdGlwV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGRpc3BsYXk6IGlubGluZS1mbGV4O1xuXHRqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcblx0b3BhY2l0eTogMDtcblx0cG9pbnRlci1ldmVudHM6IG5vbmU7XG5cdHRyYW5zaXRpb246IG9wYWNpdHkgMTIwbXMgbGluZWFyO1xuYDtcblxuZXhwb3J0IGNvbnN0IFRvb2x0aXAgPSBzdHlsZWQuZGl2YFxuXHRiYWNrZ3JvdW5kOiAkeyBDT0xPUlMudWkuYm9yZGVyIH07XG5cdGJvcmRlci1yYWRpdXM6IDJweDtcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0Zm9udC1zaXplOiAxMnB4O1xuXHRjb2xvcjogJHsgQ09MT1JTLnVpLnRleHREYXJrIH07XG5cdHBhZGRpbmc6IDRweCA4cHg7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcbmA7XG5cbi8vIFRPRE86IFJlc29sdmUgbmVlZCB0byB1c2UgJiYmIHRvIGluY3JlYXNlIHNwZWNpZmljaXR5XG4vLyBodHRwczovL2dpdGh1Yi5jb20vV29yZFByZXNzL2d1dGVuYmVyZy9pc3N1ZXMvMTg0ODNcblxuZXhwb3J0IGNvbnN0IExhYmVsVGV4dCA9IHN0eWxlZCggVGV4dCApYFxuXHQmJiYge1xuXHRcdGNvbG9yOiAkeyBDT0xPUlMudWkudGV4dERhcmsgfTtcblx0XHRkaXNwbGF5OiBibG9jaztcblx0XHRmb250LXNpemU6IDEzcHg7XG5cdFx0bGluZS1oZWlnaHQ6IDEuNDtcblx0XHR3aGl0ZS1zcGFjZTogbm93cmFwO1xuXHR9XG5gO1xuIl19 */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvcmVzaXphYmxlLWJveC9yZXNpemUtdG9vbHRpcC9zdHlsZXMvcmVzaXplLXRvb2x0aXAuc3R5bGVzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVc4QiIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3Jlc2l6YWJsZS1ib3gvcmVzaXplLXRvb2x0aXAvc3R5bGVzL3Jlc2l6ZS10b29sdGlwLnN0eWxlcy5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgVGV4dCB9IGZyb20gJy4uLy4uLy4uL3RleHQnO1xuaW1wb3J0IHsgQ09MT1JTIH0gZnJvbSAnLi4vLi4vLi4vdXRpbHMnO1xuXG5leHBvcnQgY29uc3QgUm9vdCA9IHN0eWxlZC5kaXZgXG5cdGJvdHRvbTogMDtcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0bGVmdDogMDtcblx0cG9pbnRlci1ldmVudHM6IG5vbmU7XG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0cmlnaHQ6IDA7XG5cdHRvcDogMDtcbmA7XG5cbmV4cG9ydCBjb25zdCBUb29sdGlwV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGRpc3BsYXk6IGlubGluZS1mbGV4O1xuXHRqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcblx0b3BhY2l0eTogMDtcblx0cG9pbnRlci1ldmVudHM6IG5vbmU7XG5cdHRyYW5zaXRpb246IG9wYWNpdHkgMTIwbXMgbGluZWFyO1xuYDtcblxuZXhwb3J0IGNvbnN0IFRvb2x0aXAgPSBzdHlsZWQuZGl2YFxuXHRiYWNrZ3JvdW5kOiAkeyBDT0xPUlMuZ3JheVsgOTAwIF0gfTtcblx0Ym9yZGVyLXJhZGl1czogMnB4O1xuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRmb250LXNpemU6IDEycHg7XG5cdGNvbG9yOiAkeyBDT0xPUlMudWkudGV4dERhcmsgfTtcblx0cGFkZGluZzogNHB4IDhweDtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuYDtcblxuLy8gVE9ETzogUmVzb2x2ZSBuZWVkIHRvIHVzZSAmJiYgdG8gaW5jcmVhc2Ugc3BlY2lmaWNpdHlcbi8vIGh0dHBzOi8vZ2l0aHViLmNvbS9Xb3JkUHJlc3MvZ3V0ZW5iZXJnL2lzc3Vlcy8xODQ4M1xuXG5leHBvcnQgY29uc3QgTGFiZWxUZXh0ID0gc3R5bGVkKCBUZXh0IClgXG5cdCYmJiB7XG5cdFx0Y29sb3I6ICR7IENPTE9SUy51aS50ZXh0RGFyayB9O1xuXHRcdGRpc3BsYXk6IGJsb2NrO1xuXHRcdGZvbnQtc2l6ZTogMTNweDtcblx0XHRsaW5lLWhlaWdodDogMS40O1xuXHRcdHdoaXRlLXNwYWNlOiBub3dyYXA7XG5cdH1cbmA7XG4iXX0= */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 export const TooltipWrapper = _styled("div", process.env.NODE_ENV === "production" ? {
@@ -36,7 +36,7 @@ export const TooltipWrapper = _styled("div", process.env.NODE_ENV === "productio
 } : {
   name: "ajymcs",
   styles: "align-items:center;box-sizing:border-box;display:inline-flex;justify-content:center;opacity:0;pointer-events:none;transition:opacity 120ms linear",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvcmVzaXphYmxlLWJveC9yZXNpemUtdG9vbHRpcC9zdHlsZXMvcmVzaXplLXRvb2x0aXAuc3R5bGVzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFCd0MiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9yZXNpemFibGUtYm94L3Jlc2l6ZS10b29sdGlwL3N0eWxlcy9yZXNpemUtdG9vbHRpcC5zdHlsZXMuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IFRleHQgfSBmcm9tICcuLi8uLi8uLi90ZXh0JztcbmltcG9ydCB7IENPTE9SUyB9IGZyb20gJy4uLy4uLy4uL3V0aWxzJztcblxuZXhwb3J0IGNvbnN0IFJvb3QgPSBzdHlsZWQuZGl2YFxuXHRib3R0b206IDA7XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGxlZnQ6IDA7XG5cdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHJpZ2h0OiAwO1xuXHR0b3A6IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgVG9vbHRpcFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuXHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRkaXNwbGF5OiBpbmxpbmUtZmxleDtcblx0anVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5cdG9wYWNpdHk6IDA7XG5cdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHR0cmFuc2l0aW9uOiBvcGFjaXR5IDEyMG1zIGxpbmVhcjtcbmA7XG5cbmV4cG9ydCBjb25zdCBUb29sdGlwID0gc3R5bGVkLmRpdmBcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLnVpLmJvcmRlciB9O1xuXHRib3JkZXItcmFkaXVzOiAycHg7XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGZvbnQtc2l6ZTogMTJweDtcblx0Y29sb3I6ICR7IENPTE9SUy51aS50ZXh0RGFyayB9O1xuXHRwYWRkaW5nOiA0cHggOHB4O1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5gO1xuXG4vLyBUT0RPOiBSZXNvbHZlIG5lZWQgdG8gdXNlICYmJiB0byBpbmNyZWFzZSBzcGVjaWZpY2l0eVxuLy8gaHR0cHM6Ly9naXRodWIuY29tL1dvcmRQcmVzcy9ndXRlbmJlcmcvaXNzdWVzLzE4NDgzXG5cbmV4cG9ydCBjb25zdCBMYWJlbFRleHQgPSBzdHlsZWQoIFRleHQgKWBcblx0JiYmIHtcblx0XHRjb2xvcjogJHsgQ09MT1JTLnVpLnRleHREYXJrIH07XG5cdFx0ZGlzcGxheTogYmxvY2s7XG5cdFx0Zm9udC1zaXplOiAxM3B4O1xuXHRcdGxpbmUtaGVpZ2h0OiAxLjQ7XG5cdFx0d2hpdGUtc3BhY2U6IG5vd3JhcDtcblx0fVxuYDtcbiJdfQ== */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvcmVzaXphYmxlLWJveC9yZXNpemUtdG9vbHRpcC9zdHlsZXMvcmVzaXplLXRvb2x0aXAuc3R5bGVzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFCd0MiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9yZXNpemFibGUtYm94L3Jlc2l6ZS10b29sdGlwL3N0eWxlcy9yZXNpemUtdG9vbHRpcC5zdHlsZXMuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IFRleHQgfSBmcm9tICcuLi8uLi8uLi90ZXh0JztcbmltcG9ydCB7IENPTE9SUyB9IGZyb20gJy4uLy4uLy4uL3V0aWxzJztcblxuZXhwb3J0IGNvbnN0IFJvb3QgPSBzdHlsZWQuZGl2YFxuXHRib3R0b206IDA7XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGxlZnQ6IDA7XG5cdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHJpZ2h0OiAwO1xuXHR0b3A6IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgVG9vbHRpcFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuXHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRkaXNwbGF5OiBpbmxpbmUtZmxleDtcblx0anVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5cdG9wYWNpdHk6IDA7XG5cdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHR0cmFuc2l0aW9uOiBvcGFjaXR5IDEyMG1zIGxpbmVhcjtcbmA7XG5cbmV4cG9ydCBjb25zdCBUb29sdGlwID0gc3R5bGVkLmRpdmBcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLmdyYXlbIDkwMCBdIH07XG5cdGJvcmRlci1yYWRpdXM6IDJweDtcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0Zm9udC1zaXplOiAxMnB4O1xuXHRjb2xvcjogJHsgQ09MT1JTLnVpLnRleHREYXJrIH07XG5cdHBhZGRpbmc6IDRweCA4cHg7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcbmA7XG5cbi8vIFRPRE86IFJlc29sdmUgbmVlZCB0byB1c2UgJiYmIHRvIGluY3JlYXNlIHNwZWNpZmljaXR5XG4vLyBodHRwczovL2dpdGh1Yi5jb20vV29yZFByZXNzL2d1dGVuYmVyZy9pc3N1ZXMvMTg0ODNcblxuZXhwb3J0IGNvbnN0IExhYmVsVGV4dCA9IHN0eWxlZCggVGV4dCApYFxuXHQmJiYge1xuXHRcdGNvbG9yOiAkeyBDT0xPUlMudWkudGV4dERhcmsgfTtcblx0XHRkaXNwbGF5OiBibG9jaztcblx0XHRmb250LXNpemU6IDEzcHg7XG5cdFx0bGluZS1oZWlnaHQ6IDEuNDtcblx0XHR3aGl0ZS1zcGFjZTogbm93cmFwO1xuXHR9XG5gO1xuIl19 */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 export const Tooltip = _styled("div", process.env.NODE_ENV === "production" ? {
@@ -44,7 +44,7 @@ export const Tooltip = _styled("div", process.env.NODE_ENV === "production" ? {
 } : {
   target: "ekdag501",
   label: "Tooltip"
-})("background:", COLORS.ui.border, ";border-radius:2px;box-sizing:border-box;font-size:12px;color:", COLORS.ui.textDark, ";padding:4px 8px;position:relative;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvcmVzaXphYmxlLWJveC9yZXNpemUtdG9vbHRpcC9zdHlsZXMvcmVzaXplLXRvb2x0aXAuc3R5bGVzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQStCaUMiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9yZXNpemFibGUtYm94L3Jlc2l6ZS10b29sdGlwL3N0eWxlcy9yZXNpemUtdG9vbHRpcC5zdHlsZXMuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IFRleHQgfSBmcm9tICcuLi8uLi8uLi90ZXh0JztcbmltcG9ydCB7IENPTE9SUyB9IGZyb20gJy4uLy4uLy4uL3V0aWxzJztcblxuZXhwb3J0IGNvbnN0IFJvb3QgPSBzdHlsZWQuZGl2YFxuXHRib3R0b206IDA7XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGxlZnQ6IDA7XG5cdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHJpZ2h0OiAwO1xuXHR0b3A6IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgVG9vbHRpcFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuXHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRkaXNwbGF5OiBpbmxpbmUtZmxleDtcblx0anVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5cdG9wYWNpdHk6IDA7XG5cdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHR0cmFuc2l0aW9uOiBvcGFjaXR5IDEyMG1zIGxpbmVhcjtcbmA7XG5cbmV4cG9ydCBjb25zdCBUb29sdGlwID0gc3R5bGVkLmRpdmBcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLnVpLmJvcmRlciB9O1xuXHRib3JkZXItcmFkaXVzOiAycHg7XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGZvbnQtc2l6ZTogMTJweDtcblx0Y29sb3I6ICR7IENPTE9SUy51aS50ZXh0RGFyayB9O1xuXHRwYWRkaW5nOiA0cHggOHB4O1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5gO1xuXG4vLyBUT0RPOiBSZXNvbHZlIG5lZWQgdG8gdXNlICYmJiB0byBpbmNyZWFzZSBzcGVjaWZpY2l0eVxuLy8gaHR0cHM6Ly9naXRodWIuY29tL1dvcmRQcmVzcy9ndXRlbmJlcmcvaXNzdWVzLzE4NDgzXG5cbmV4cG9ydCBjb25zdCBMYWJlbFRleHQgPSBzdHlsZWQoIFRleHQgKWBcblx0JiYmIHtcblx0XHRjb2xvcjogJHsgQ09MT1JTLnVpLnRleHREYXJrIH07XG5cdFx0ZGlzcGxheTogYmxvY2s7XG5cdFx0Zm9udC1zaXplOiAxM3B4O1xuXHRcdGxpbmUtaGVpZ2h0OiAxLjQ7XG5cdFx0d2hpdGUtc3BhY2U6IG5vd3JhcDtcblx0fVxuYDtcbiJdfQ== */")); // TODO: Resolve need to use &&& to increase specificity
+})("background:", COLORS.gray[900], ";border-radius:2px;box-sizing:border-box;font-size:12px;color:", COLORS.ui.textDark, ";padding:4px 8px;position:relative;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvcmVzaXphYmxlLWJveC9yZXNpemUtdG9vbHRpcC9zdHlsZXMvcmVzaXplLXRvb2x0aXAuc3R5bGVzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQStCaUMiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9yZXNpemFibGUtYm94L3Jlc2l6ZS10b29sdGlwL3N0eWxlcy9yZXNpemUtdG9vbHRpcC5zdHlsZXMuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IFRleHQgfSBmcm9tICcuLi8uLi8uLi90ZXh0JztcbmltcG9ydCB7IENPTE9SUyB9IGZyb20gJy4uLy4uLy4uL3V0aWxzJztcblxuZXhwb3J0IGNvbnN0IFJvb3QgPSBzdHlsZWQuZGl2YFxuXHRib3R0b206IDA7XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGxlZnQ6IDA7XG5cdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHJpZ2h0OiAwO1xuXHR0b3A6IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgVG9vbHRpcFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuXHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRkaXNwbGF5OiBpbmxpbmUtZmxleDtcblx0anVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5cdG9wYWNpdHk6IDA7XG5cdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHR0cmFuc2l0aW9uOiBvcGFjaXR5IDEyMG1zIGxpbmVhcjtcbmA7XG5cbmV4cG9ydCBjb25zdCBUb29sdGlwID0gc3R5bGVkLmRpdmBcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLmdyYXlbIDkwMCBdIH07XG5cdGJvcmRlci1yYWRpdXM6IDJweDtcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0Zm9udC1zaXplOiAxMnB4O1xuXHRjb2xvcjogJHsgQ09MT1JTLnVpLnRleHREYXJrIH07XG5cdHBhZGRpbmc6IDRweCA4cHg7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcbmA7XG5cbi8vIFRPRE86IFJlc29sdmUgbmVlZCB0byB1c2UgJiYmIHRvIGluY3JlYXNlIHNwZWNpZmljaXR5XG4vLyBodHRwczovL2dpdGh1Yi5jb20vV29yZFByZXNzL2d1dGVuYmVyZy9pc3N1ZXMvMTg0ODNcblxuZXhwb3J0IGNvbnN0IExhYmVsVGV4dCA9IHN0eWxlZCggVGV4dCApYFxuXHQmJiYge1xuXHRcdGNvbG9yOiAkeyBDT0xPUlMudWkudGV4dERhcmsgfTtcblx0XHRkaXNwbGF5OiBibG9jaztcblx0XHRmb250LXNpemU6IDEzcHg7XG5cdFx0bGluZS1oZWlnaHQ6IDEuNDtcblx0XHR3aGl0ZS1zcGFjZTogbm93cmFwO1xuXHR9XG5gO1xuIl19 */")); // TODO: Resolve need to use &&& to increase specificity
 // https://github.com/WordPress/gutenberg/issues/18483
 
 export const LabelText = /*#__PURE__*/_styled(Text, process.env.NODE_ENV === "production" ? {
@@ -52,5 +52,5 @@ export const LabelText = /*#__PURE__*/_styled(Text, process.env.NODE_ENV === "pr
 } : {
   target: "ekdag500",
   label: "LabelText"
-})("&&&{color:", COLORS.ui.textDark, ";display:block;font-size:13px;line-height:1.4;white-space:nowrap;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvcmVzaXphYmxlLWJveC9yZXNpemUtdG9vbHRpcC9zdHlsZXMvcmVzaXplLXRvb2x0aXAuc3R5bGVzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTRDdUMiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9yZXNpemFibGUtYm94L3Jlc2l6ZS10b29sdGlwL3N0eWxlcy9yZXNpemUtdG9vbHRpcC5zdHlsZXMuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IFRleHQgfSBmcm9tICcuLi8uLi8uLi90ZXh0JztcbmltcG9ydCB7IENPTE9SUyB9IGZyb20gJy4uLy4uLy4uL3V0aWxzJztcblxuZXhwb3J0IGNvbnN0IFJvb3QgPSBzdHlsZWQuZGl2YFxuXHRib3R0b206IDA7XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGxlZnQ6IDA7XG5cdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHJpZ2h0OiAwO1xuXHR0b3A6IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgVG9vbHRpcFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuXHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRkaXNwbGF5OiBpbmxpbmUtZmxleDtcblx0anVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5cdG9wYWNpdHk6IDA7XG5cdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHR0cmFuc2l0aW9uOiBvcGFjaXR5IDEyMG1zIGxpbmVhcjtcbmA7XG5cbmV4cG9ydCBjb25zdCBUb29sdGlwID0gc3R5bGVkLmRpdmBcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLnVpLmJvcmRlciB9O1xuXHRib3JkZXItcmFkaXVzOiAycHg7XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGZvbnQtc2l6ZTogMTJweDtcblx0Y29sb3I6ICR7IENPTE9SUy51aS50ZXh0RGFyayB9O1xuXHRwYWRkaW5nOiA0cHggOHB4O1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5gO1xuXG4vLyBUT0RPOiBSZXNvbHZlIG5lZWQgdG8gdXNlICYmJiB0byBpbmNyZWFzZSBzcGVjaWZpY2l0eVxuLy8gaHR0cHM6Ly9naXRodWIuY29tL1dvcmRQcmVzcy9ndXRlbmJlcmcvaXNzdWVzLzE4NDgzXG5cbmV4cG9ydCBjb25zdCBMYWJlbFRleHQgPSBzdHlsZWQoIFRleHQgKWBcblx0JiYmIHtcblx0XHRjb2xvcjogJHsgQ09MT1JTLnVpLnRleHREYXJrIH07XG5cdFx0ZGlzcGxheTogYmxvY2s7XG5cdFx0Zm9udC1zaXplOiAxM3B4O1xuXHRcdGxpbmUtaGVpZ2h0OiAxLjQ7XG5cdFx0d2hpdGUtc3BhY2U6IG5vd3JhcDtcblx0fVxuYDtcbiJdfQ== */"));
+})("&&&{color:", COLORS.ui.textDark, ";display:block;font-size:13px;line-height:1.4;white-space:nowrap;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvcmVzaXphYmxlLWJveC9yZXNpemUtdG9vbHRpcC9zdHlsZXMvcmVzaXplLXRvb2x0aXAuc3R5bGVzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTRDdUMiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9yZXNpemFibGUtYm94L3Jlc2l6ZS10b29sdGlwL3N0eWxlcy9yZXNpemUtdG9vbHRpcC5zdHlsZXMuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IFRleHQgfSBmcm9tICcuLi8uLi8uLi90ZXh0JztcbmltcG9ydCB7IENPTE9SUyB9IGZyb20gJy4uLy4uLy4uL3V0aWxzJztcblxuZXhwb3J0IGNvbnN0IFJvb3QgPSBzdHlsZWQuZGl2YFxuXHRib3R0b206IDA7XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGxlZnQ6IDA7XG5cdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHJpZ2h0OiAwO1xuXHR0b3A6IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgVG9vbHRpcFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuXHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRkaXNwbGF5OiBpbmxpbmUtZmxleDtcblx0anVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5cdG9wYWNpdHk6IDA7XG5cdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHR0cmFuc2l0aW9uOiBvcGFjaXR5IDEyMG1zIGxpbmVhcjtcbmA7XG5cbmV4cG9ydCBjb25zdCBUb29sdGlwID0gc3R5bGVkLmRpdmBcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLmdyYXlbIDkwMCBdIH07XG5cdGJvcmRlci1yYWRpdXM6IDJweDtcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0Zm9udC1zaXplOiAxMnB4O1xuXHRjb2xvcjogJHsgQ09MT1JTLnVpLnRleHREYXJrIH07XG5cdHBhZGRpbmc6IDRweCA4cHg7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcbmA7XG5cbi8vIFRPRE86IFJlc29sdmUgbmVlZCB0byB1c2UgJiYmIHRvIGluY3JlYXNlIHNwZWNpZmljaXR5XG4vLyBodHRwczovL2dpdGh1Yi5jb20vV29yZFByZXNzL2d1dGVuYmVyZy9pc3N1ZXMvMTg0ODNcblxuZXhwb3J0IGNvbnN0IExhYmVsVGV4dCA9IHN0eWxlZCggVGV4dCApYFxuXHQmJiYge1xuXHRcdGNvbG9yOiAkeyBDT0xPUlMudWkudGV4dERhcmsgfTtcblx0XHRkaXNwbGF5OiBibG9jaztcblx0XHRmb250LXNpemU6IDEzcHg7XG5cdFx0bGluZS1oZWlnaHQ6IDEuNDtcblx0XHR3aGl0ZS1zcGFjZTogbm93cmFwO1xuXHR9XG5gO1xuIl19 */"));
 //# sourceMappingURL=resize-tooltip.styles.js.map

package/build-module/resizable-box/resize-tooltip/styles/resize-tooltip.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/resizable-box/resize-tooltip/styles/resize-tooltip.styles.js"],"names":["Text","COLORS","Root","TooltipWrapper","Tooltip","ui","border","textDark","LabelText"],"mappings":";;;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,IAAT,QAAqB,eAArB;AACA,SAASC,MAAT,QAAuB,gBAAvB;AAEA,OAAO,MAAMC,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAV;AAUP,OAAO,MAAMC,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAApB;AAUP,OAAO,MAAMC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,kBACJH,MAAM,CAACI,EAAP,CAAUC,MADN,oEAKTL,MAAM,CAACI,EAAP,CAAUE,QALD,29DAAb,C,CAUP;AACA;;AAEA,OAAO,MAAMC,SAAS,GAAG,qBAAQR,IAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,eAEVC,MAAM,CAACI,EAAP,CAAUE,QAFA,0/DAAf","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport { Text } from '../../../text';\nimport { COLORS } from '../../../utils';\n\nexport const Root = styled.div`\n\tbottom: 0;\n\tbox-sizing: border-box;\n\tleft: 0;\n\tpointer-events: none;\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n`;\n\nexport const TooltipWrapper = styled.div`\n\talign-items: center;\n\tbox-sizing: border-box;\n\tdisplay: inline-flex;\n\tjustify-content: center;\n\topacity: 0;\n\tpointer-events: none;\n\ttransition: opacity 120ms linear;\n`;\n\nexport const Tooltip = styled.div`\n\tbackground: ${ COLORS.ui.border };\n\tborder-radius: 2px;\n\tbox-sizing: border-box;\n\tfont-size: 12px;\n\tcolor: ${ COLORS.ui.textDark };\n\tpadding: 4px 8px;\n\tposition: relative;\n`;\n\n// TODO: Resolve need to use &&& to increase specificity\n// https://github.com/WordPress/gutenberg/issues/18483\n\nexport const LabelText = styled( Text )`\n\t&&& {\n\t\tcolor: ${ COLORS.ui.textDark };\n\t\tdisplay: block;\n\t\tfont-size: 13px;\n\t\tline-height: 1.4;\n\t\twhite-space: nowrap;\n\t}\n`;\n"]}
+{"version":3,"sources":["@wordpress/components/src/resizable-box/resize-tooltip/styles/resize-tooltip.styles.js"],"names":["Text","COLORS","Root","TooltipWrapper","Tooltip","gray","ui","textDark","LabelText"],"mappings":";;;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,IAAT,QAAqB,eAArB;AACA,SAASC,MAAT,QAAuB,gBAAvB;AAEA,OAAO,MAAMC,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAV;AAUP,OAAO,MAAMC,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAApB;AAUP,OAAO,MAAMC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,kBACJH,MAAM,CAACI,IAAP,CAAa,GAAb,CADI,oEAKTJ,MAAM,CAACK,EAAP,CAAUC,QALD,29DAAb,C,CAUP;AACA;;AAEA,OAAO,MAAMC,SAAS,GAAG,qBAAQR,IAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,eAEVC,MAAM,CAACK,EAAP,CAAUC,QAFA,0/DAAf","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport { Text } from '../../../text';\nimport { COLORS } from '../../../utils';\n\nexport const Root = styled.div`\n\tbottom: 0;\n\tbox-sizing: border-box;\n\tleft: 0;\n\tpointer-events: none;\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n`;\n\nexport const TooltipWrapper = styled.div`\n\talign-items: center;\n\tbox-sizing: border-box;\n\tdisplay: inline-flex;\n\tjustify-content: center;\n\topacity: 0;\n\tpointer-events: none;\n\ttransition: opacity 120ms linear;\n`;\n\nexport const Tooltip = styled.div`\n\tbackground: ${ COLORS.gray[ 900 ] };\n\tborder-radius: 2px;\n\tbox-sizing: border-box;\n\tfont-size: 12px;\n\tcolor: ${ COLORS.ui.textDark };\n\tpadding: 4px 8px;\n\tposition: relative;\n`;\n\n// TODO: Resolve need to use &&& to increase specificity\n// https://github.com/WordPress/gutenberg/issues/18483\n\nexport const LabelText = styled( Text )`\n\t&&& {\n\t\tcolor: ${ COLORS.ui.textDark };\n\t\tdisplay: block;\n\t\tfont-size: 13px;\n\t\tline-height: 1.4;\n\t\twhite-space: nowrap;\n\t}\n`;\n"]}

package/build-module/sandbox/index.native.js

@@ -3,13 +3,13 @@ import { createElement } from "@wordpress/element";
 /**
  * External dependencies
  */
-import { Dimensions, Platform } from 'react-native';
+import { Dimensions, StyleSheet } from 'react-native';
 import { WebView } from 'react-native-webview';
 /**
  * WordPress dependencies
  */
 
-import { renderToString, memo, useRef, useState, useEffect } from '@wordpress/element';
+import { Platform, renderToString, memo, useRef, useState, useEffect } from '@wordpress/element';
 import { usePreferredColorScheme } from '@wordpress/compose';
 /**
  * Internal dependencies
@@ -288,7 +288,7 @@ function Sandbox(_ref) {
     // Reference: https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md#source
     ,
     originWhitelist: ['*'],
-    style: [sandboxStyles['sandbox-webview__content'], getSizeStyle()],
+    style: [sandboxStyles['sandbox-webview__content'], getSizeStyle(), Platform.isAndroid && workaroundStyles.webView],
     onMessage: checkMessageForResize,
     scrollEnabled: false,
     setBuiltInZoomControls: false,
@@ -297,5 +297,15 @@ function Sandbox(_ref) {
   });
 }
 
+const workaroundStyles = StyleSheet.create({
+  webView: {
+    /**
+     * The slight opacity below is a workaround for an Android crash caused from combining Android
+     * 12's new scroll overflow behavior and webviews.
+     * https://github.com/react-native-webview/react-native-webview/issues/1915#issuecomment-808869253
+     */
+    opacity: 0.99
+  }
+});
 export default memo(Sandbox);
 //# sourceMappingURL=index.native.js.map

package/build-module/sandbox/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/sandbox/index.native.js"],"names":["Dimensions","Platform","WebView","renderToString","memo","useRef","useState","useEffect","usePreferredColorScheme","sandboxStyles","observeAndResizeJS","style","EMPTY_ARRAY","Sandbox","containerStyle","customJS","html","lang","providerUrl","scripts","styles","title","type","url","colorScheme","ref","height","setHeight","contentHtml","setContentHtml","getHtmlDoc","windowSize","get","isLandscape","setIsLandscape","width","wasLandscape","key","select","android","ios","htmlDoc","__html","map","rules","i","src","updateContentHtml","forceRerender","newContentHtml","setImmediate","checkMessageForResize","event","data","nativeEvent","JSON","parse","e","action","getSizeStyle","contentHeight","Math","ceil","aspectRatio","onChangeDimensions","dimensions","window","dimensionsChangeSubscription","addEventListener","remove","current","baseUrl"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,UAAT,EAAqBC,QAArB,QAAqC,cAArC;AACA,SAASC,OAAT,QAAwB,sBAAxB;AAEA;AACA;AACA;;AACA,SACCC,cADD,EAECC,IAFD,EAGCC,MAHD,EAICC,QAJD,EAKCC,SALD,QAMO,oBANP;AAOA,SAASC,uBAAT,QAAwC,oBAAxC;AAEA;AACA;AACA;;AACA,OAAOC,aAAP,MAA0B,cAA1B;AAEA,MAAMC,kBAAkB,GAAI;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OA5DA;AA8DA,MAAMC,KAAK,GAAI;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAjEA;AAmEA,MAAMC,WAAW,GAAG,EAApB;;AAEA,SAASC,OAAT,OAWI;AAAA,MAXc;AACjBC,IAAAA,cADiB;AAEjBC,IAAAA,QAFiB;AAGjBC,IAAAA,IAAI,GAAG,EAHU;AAIjBC,IAAAA,IAAI,GAAG,IAJU;AAKjBC,IAAAA,WAAW,GAAG,EALG;AAMjBC,IAAAA,OAAO,GAAGP,WANO;AAOjBQ,IAAAA,MAAM,GAAGR,WAPQ;AAQjBS,IAAAA,KAAK,GAAG,EARS;AASjBC,IAAAA,IATiB;AAUjBC,IAAAA;AAViB,GAWd;AACH,QAAMC,WAAW,GAAGhB,uBAAuB,EAA3C;AACA,QAAMiB,GAAG,GAAGpB,MAAM,EAAlB;AACA,QAAM,CAAEqB,MAAF,EAAUC,SAAV,IAAwBrB,QAAQ,CAAE,CAAF,CAAtC;AACA,QAAM,CAAEsB,WAAF,EAAeC,cAAf,IAAkCvB,QAAQ,CAAEwB,UAAU,EAAZ,CAAhD;AAEA,QAAMC,UAAU,GAAG/B,UAAU,CAACgC,GAAX,CAAgB,QAAhB,CAAnB;AACA,QAAM,CAAEC,WAAF,EAAeC,cAAf,IAAkC5B,QAAQ,CAC/CyB,UAAU,CAACI,KAAX,IAAoBJ,UAAU,CAACL,MADgB,CAAhD;AAGA,QAAMU,YAAY,GAAG/B,MAAM,CAAE4B,WAAF,CAA3B,CAVG,CAWH;AACA;AACA;AACA;;AACA,QAAMI,GAAG,GAAGpC,QAAQ,CAACqC,MAAT,CAAiB;AAC5BC,IAAAA,OAAO,EAAG,GAAGhB,GAAK,IACjBU,WAAW,GAAG,WAAH,GAAiB,UAC5B,IAAIT,WAAa,EAHU;AAI5BgB,IAAAA,GAAG,EAAEjB;AAJuB,GAAjB,CAAZ;;AAOA,WAASO,UAAT,GAAsB;AACrB;AACA;AACA;AACA;AACA,UAAMW,OAAO,GACZ;AAAM,MAAA,IAAI,EAAGxB;AAAb,OACC,4BACC,6BAASI,KAAT,CADD,EAEC;AACC,MAAA,IAAI,EAAC,UADN;AAEC,MAAA,OAAO,EAAC;AAFT,MAFD,EAMC;AAAO,MAAA,uBAAuB,EAAG;AAAEqB,QAAAA,MAAM,EAAE/B;AAAV;AAAjC,MAND,EAOGS,MAAM,CAACuB,GAAP,CAAY,CAAEC,KAAF,EAASC,CAAT,KACb;AACC,MAAA,GAAG,EAAGA,CADP;AAEC,MAAA,uBAAuB,EAAG;AAAEH,QAAAA,MAAM,EAAEE;AAAV;AAF3B,MADC,CAPH,CADD,EAeC;AACC,yCAAgC,iCADjC;AAEC,MAAA,SAAS,EAAGtB;AAFb,OAIC;AAAK,MAAA,uBAAuB,EAAG;AAAEoB,QAAAA,MAAM,EAAE1B;AAAV;AAA/B,MAJD,EAKC;AACC,MAAA,IAAI,EAAC,iBADN;AAEC,MAAA,uBAAuB,EAAG;AACzB0B,QAAAA,MAAM,EAAE3B,QAAQ,IAAIL;AADK;AAF3B,MALD,EAWGS,OAAO,CAACwB,GAAR,CAAeG,GAAF,IACd;AAAQ,MAAA,GAAG,EAAGA,GAAd;AAAoB,MAAA,GAAG,EAAGA;AAA1B,MADC,CAXH,CAfD,CADD;AAiCA,WAAO,oBAAoB3C,cAAc,CAAEsC,OAAF,CAAzC;AACA;;AAED,WAASM,iBAAT,GAAoD;AAAA,QAAxBC,aAAwB,uEAAR,KAAQ;AACnD,UAAMC,cAAc,GAAGnB,UAAU,EAAjC;;AAEA,QAAKkB,aAAa,IAAIpB,WAAW,KAAKqB,cAAtC,EAAuD;AACtD;AACA;AACA;AACApB,MAAAA,cAAc,CAAE,EAAF,CAAd;AACAqB,MAAAA,YAAY,CAAE,MAAMrB,cAAc,CAAEoB,cAAF,CAAtB,CAAZ;AACA,KAND,MAMO;AACNpB,MAAAA,cAAc,CAAEoB,cAAF,CAAd;AACA;AACD;;AAED,WAASE,qBAAT,CAAgCC,KAAhC,EAAwC;AACvC;AACA,QAAIC,IAAI,GAAGD,KAAK,CAACE,WAAN,CAAkBD,IAAlB,IAA0B,EAArC;;AAEA,QAAK,aAAa,OAAOA,IAAzB,EAAgC;AAC/B,UAAI;AACHA,QAAAA,IAAI,GAAGE,IAAI,CAACC,KAAL,CAAYH,IAAZ,CAAP;AACA,OAFD,CAEE,OAAQI,CAAR,EAAY,CAAE;AAChB,KARsC,CAUvC;AACA;;;AACA,QAAK,aAAaJ,IAAI,CAACK,MAAvB,EAAgC;AAC/B;AACA;;AAED/B,IAAAA,SAAS,CAAE0B,IAAI,CAAC3B,MAAP,CAAT;AACA;;AAED,WAASiC,YAAT,GAAwB;AACvB,UAAMC,aAAa,GAAGC,IAAI,CAACC,IAAL,CAAWpC,MAAX,CAAtB;AAEA,WAAOkC,aAAa,GAAG;AAAElC,MAAAA,MAAM,EAAEkC;AAAV,KAAH,GAA+B;AAAEG,MAAAA,WAAW,EAAE;AAAf,KAAnD;AACA;;AAED,WAASC,kBAAT,CAA6BC,UAA7B,EAA0C;AACzC/B,IAAAA,cAAc,CAAE+B,UAAU,CAACC,MAAX,CAAkB/B,KAAlB,IAA2B8B,UAAU,CAACC,MAAX,CAAkBxC,MAA/C,CAAd;AACA;;AAEDnB,EAAAA,SAAS,CAAE,MAAM;AAChB,UAAM4D,4BAA4B,GAAGnE,UAAU,CAACoE,gBAAX,CACpC,QADoC,EAEpCJ,kBAFoC,CAArC;AAIA,WAAO,MAAM;AACZG,MAAAA,4BAA4B,CAACE,MAA7B;AACA,KAFD;AAGA,GARQ,EAQN,EARM,CAAT;AAUA9D,EAAAA,SAAS,CAAE,MAAM;AAChBwC,IAAAA,iBAAiB;AACjB,GAFQ,EAEN,CAAE/B,IAAF,EAAQK,KAAR,EAAeC,IAAf,EAAqBF,MAArB,EAA6BD,OAA7B,CAFM,CAAT;AAIAZ,EAAAA,SAAS,CAAE,MAAM;AAChB;AACA;AACA,QAAK6B,YAAY,CAACkC,OAAb,KAAyBrC,WAA9B,EAA4C;AAC3CN,MAAAA,SAAS,CAAE,CAAF,CAAT;AACA;;AACDS,IAAAA,YAAY,CAACkC,OAAb,GAAuBrC,WAAvB;AACA,GAPQ,EAON,CAAEA,WAAF,CAPM,CAAT;AASA,SACC,cAAC,OAAD;AACC,IAAA,cAAc,EAAG,CAChBxB,aAAa,CAAE,4BAAF,CADG,EAEhBK,cAFgB,CADlB;AAKC,IAAA,GAAG,EAAGuB,GALP;AAMC,IAAA,GAAG,EAAGZ,GANP;AAOC,IAAA,MAAM,EAAG;AAAE8C,MAAAA,OAAO,EAAErD,WAAX;AAAwBF,MAAAA,IAAI,EAAEY;AAA9B,KAPV,CAQC;AACA;AATD;AAUC,IAAA,eAAe,EAAG,CAAE,GAAF,CAVnB;AAWC,IAAA,KAAK,EAAG,CACPnB,aAAa,CAAE,0BAAF,CADN,EAEPkD,YAAY,EAFL,CAXT;AAeC,IAAA,SAAS,EAAGR,qBAfb;AAgBC,IAAA,aAAa,EAAG,KAhBjB;AAiBC,IAAA,sBAAsB,EAAG,KAjB1B;AAkBC,IAAA,8BAA8B,EAAG,KAlBlC;AAmBC,IAAA,4BAA4B,EAAG;AAnBhC,IADD;AAuBA;;AAED,eAAe/C,IAAI,CAAES,OAAF,CAAnB","sourcesContent":["/**\n * External dependencies\n */\nimport { Dimensions, Platform } from 'react-native';\nimport { WebView } from 'react-native-webview';\n\n/**\n * WordPress dependencies\n */\nimport {\n\trenderToString,\n\tmemo,\n\tuseRef,\n\tuseState,\n\tuseEffect,\n} from '@wordpress/element';\nimport { usePreferredColorScheme } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport sandboxStyles from './style.scss';\n\nconst observeAndResizeJS = `\n\t( function() {\n\t\tvar observer;\n\n\t\tif ( ! window.MutationObserver || ! document.body || ! window.parent ) {\n\t\t\treturn;\n\t\t}\n\n\t\tfunction sendResize() {\n\t\t\tvar clientBoundingRect = document.body.getBoundingClientRect();\n\n\t\t\t// The function postMessage is exposed by the react-native-webview library\n\t\t\t// to communicate between React Native and the WebView, in this case,\n\t\t\t// we use it for notifying resize changes.\n            window.ReactNativeWebView.postMessage(JSON.stringify( {\n                action: 'resize',\n\t\t\t\twidth: clientBoundingRect.width,\n\t\t\t\theight: clientBoundingRect.height,\n            }));\n\t\t}\n\n\t\tobserver = new MutationObserver( sendResize );\n\t\tobserver.observe( document.body, {\n\t\t\tattributes: true,\n\t\t\tattributeOldValue: false,\n\t\t\tcharacterData: true,\n\t\t\tcharacterDataOldValue: false,\n\t\t\tchildList: true,\n\t\t\tsubtree: true\n\t\t} );\n\n\t\twindow.addEventListener( 'load', sendResize, true );\n\n\t\t// Hack: Remove viewport unit styles, as these are relative\n\t\t// the iframe root and interfere with our mechanism for\n\t\t// determining the unconstrained page bounds.\n\t\tfunction removeViewportStyles( ruleOrNode ) {\n\t\t\tif( ruleOrNode.style ) {\n\t\t\t\t[ 'width', 'height', 'minHeight', 'maxHeight' ].forEach( function( style ) {\n\t\t\t\t\tif ( /^\\\\d+(vmin|vmax|vh|vw)$/.test( ruleOrNode.style[ style ] ) ) {\n\t\t\t\t\t\truleOrNode.style[ style ] = '';\n\t\t\t\t\t}\n\t\t\t\t} );\n\t\t\t}\n\t\t}\n\n\t\tArray.prototype.forEach.call( document.querySelectorAll( '[style]' ), removeViewportStyles );\n\t\tArray.prototype.forEach.call( document.styleSheets, function( stylesheet ) {\n\t\t\tArray.prototype.forEach.call( stylesheet.cssRules || stylesheet.rules, removeViewportStyles );\n\t\t} );\n\n\t\tdocument.body.style.position = 'absolute';\n\t\tdocument.body.style.width = '100%';\n\t\tdocument.body.setAttribute( 'data-resizable-iframe-connected', '' );\n\n\t\tsendResize();\n\n\t\t// Resize events can change the width of elements with 100% width, but we don't\n\t\t// get an DOM mutations for that, so do the resize when the window is resized, too.\n\t\twindow.addEventListener( 'resize', sendResize, true );\n} )();`;\n\nconst style = `\n\tbody {\n\t\tmargin: 0;\n\t}\n\thtml,\n\tbody,\n\tbody > div,\n\tbody > div iframe {\n\t\twidth: 100%;\n\t}\n\tbody > div > * {\n\t\tmargin-top: 0 !important; /* Has to have !important to override inline styles. */\n\t\tmargin-bottom: 0 !important;\n\t}\n\n\t.wp-block-embed__wrapper {\n\t\tposition: relative;\n\t}\n\n\tbody.wp-has-aspect-ratio > div iframe {\n\t\theight: 100%;\n\t\toverflow: hidden; /* If it has an aspect ratio, it shouldn't scroll. */\n\t}\n\n\t/**\n\t * Add responsiveness to embeds with aspect ratios.\n\t *\n\t * These styles have been copied from the web version (https://github.com/WordPress/gutenberg/blob/7901895ca20cf61e402925e31571d659dab64721/packages/block-library/src/embed/style.scss#L42-L89) and\n\t * adapted for the native version.\n\t */\n\t.wp-has-aspect-ratio.wp-block-embed__wrapper::before {\n\t\tcontent: \"\";\n\t\tdisplay: block;\n\t\tpadding-top: 50%; // Default to 2:1 aspect ratio.\n\t}\n\t.wp-has-aspect-ratio iframe {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n\t.wp-embed-aspect-21-9.wp-block-embed__wrapper::before {\n\t\tpadding-top: 42.85%; // 9 / 21 * 100\n\t}\n\t.wp-embed-aspect-18-9.wp-block-embed__wrapper::before {\n\t\tpadding-top: 50%; // 9 / 18 * 100\n\t}\n\t.wp-embed-aspect-16-9.wp-block-embed__wrapper::before {\n\t\tpadding-top: 56.25%; // 9 / 16 * 100\n\t}\n\t.wp-embed-aspect-4-3.wp-block-embed__wrapper::before {\n\t\tpadding-top: 75%; // 3 / 4 * 100\n\t}\n\t.wp-embed-aspect-1-1.wp-block-embed__wrapper::before {\n\t\tpadding-top: 100%; // 1 / 1 * 100\n\t}\n\t.wp-embed-aspect-9-16.wp-block-embed__wrapper::before {\n\t\tpadding-top: 177.77%; // 16 / 9 * 100\n\t}\n\t.wp-embed-aspect-1-2.wp-block-embed__wrapper::before {\n\t\tpadding-top: 200%; // 2 / 1 * 100\n\t}\n`;\n\nconst EMPTY_ARRAY = [];\n\nfunction Sandbox( {\n\tcontainerStyle,\n\tcustomJS,\n\thtml = '',\n\tlang = 'en',\n\tproviderUrl = '',\n\tscripts = EMPTY_ARRAY,\n\tstyles = EMPTY_ARRAY,\n\ttitle = '',\n\ttype,\n\turl,\n} ) {\n\tconst colorScheme = usePreferredColorScheme();\n\tconst ref = useRef();\n\tconst [ height, setHeight ] = useState( 0 );\n\tconst [ contentHtml, setContentHtml ] = useState( getHtmlDoc() );\n\n\tconst windowSize = Dimensions.get( 'window' );\n\tconst [ isLandscape, setIsLandscape ] = useState(\n\t\twindowSize.width >= windowSize.height\n\t);\n\tconst wasLandscape = useRef( isLandscape );\n\t// On Android, we need to recreate the WebView on any of the following actions, otherwise it disappears:\n\t// - Device rotation\n\t// - Light/dark mode changes\n\t// For this purpose, the key prop used in the WebView will be updated with the value of the actions.\n\tconst key = Platform.select( {\n\t\tandroid: `${ url }-${\n\t\t\tisLandscape ? 'landscape' : 'portrait'\n\t\t}-${ colorScheme }`,\n\t\tios: url,\n\t} );\n\n\tfunction getHtmlDoc() {\n\t\t// Put the html snippet into a html document, and update the state to refresh the WebView,\n\t\t// we can use this in the future to inject custom styles or scripts.\n\t\t// Scripts go into the body rather than the head, to support embedded content such as Instagram\n\t\t// that expect the scripts to be part of the body.\n\t\tconst htmlDoc = (\n\t\t\t<html lang={ lang }>\n\t\t\t\t<head>\n\t\t\t\t\t<title>{ title }</title>\n\t\t\t\t\t<meta\n\t\t\t\t\t\tname=\"viewport\"\n\t\t\t\t\t\tcontent=\"width=device-width, initial-scale=1\"\n\t\t\t\t\t></meta>\n\t\t\t\t\t<style dangerouslySetInnerHTML={ { __html: style } } />\n\t\t\t\t\t{ styles.map( ( rules, i ) => (\n\t\t\t\t\t\t<style\n\t\t\t\t\t\t\tkey={ i }\n\t\t\t\t\t\t\tdangerouslySetInnerHTML={ { __html: rules } }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t\t</head>\n\t\t\t\t<body\n\t\t\t\t\tdata-resizable-iframe-connected=\"data-resizable-iframe-connected\"\n\t\t\t\t\tclassName={ type }\n\t\t\t\t>\n\t\t\t\t\t<div dangerouslySetInnerHTML={ { __html: html } } />\n\t\t\t\t\t<script\n\t\t\t\t\t\ttype=\"text/javascript\"\n\t\t\t\t\t\tdangerouslySetInnerHTML={ {\n\t\t\t\t\t\t\t__html: customJS || observeAndResizeJS,\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t\t{ scripts.map( ( src ) => (\n\t\t\t\t\t\t<script key={ src } src={ src } />\n\t\t\t\t\t) ) }\n\t\t\t\t</body>\n\t\t\t</html>\n\t\t);\n\t\treturn '<!DOCTYPE html>' + renderToString( htmlDoc );\n\t}\n\n\tfunction updateContentHtml( forceRerender = false ) {\n\t\tconst newContentHtml = getHtmlDoc();\n\n\t\tif ( forceRerender && contentHtml === newContentHtml ) {\n\t\t\t// The re-render is forced by updating the state with empty HTML,\n\t\t\t// waiting for the JS code to be executed with \"setImmediate\" and then\n\t\t\t// setting the content HTML again.\n\t\t\tsetContentHtml( '' );\n\t\t\tsetImmediate( () => setContentHtml( newContentHtml ) );\n\t\t} else {\n\t\t\tsetContentHtml( newContentHtml );\n\t\t}\n\t}\n\n\tfunction checkMessageForResize( event ) {\n\t\t// Attempt to parse the message data as JSON if passed as string.\n\t\tlet data = event.nativeEvent.data || {};\n\n\t\tif ( 'string' === typeof data ) {\n\t\t\ttry {\n\t\t\t\tdata = JSON.parse( data );\n\t\t\t} catch ( e ) {}\n\t\t}\n\n\t\t// Update the state only if the message is formatted as we expect,\n\t\t// i.e. as an object with a 'resize' action.\n\t\tif ( 'resize' !== data.action ) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetHeight( data.height );\n\t}\n\n\tfunction getSizeStyle() {\n\t\tconst contentHeight = Math.ceil( height );\n\n\t\treturn contentHeight ? { height: contentHeight } : { aspectRatio: 1 };\n\t}\n\n\tfunction onChangeDimensions( dimensions ) {\n\t\tsetIsLandscape( dimensions.window.width >= dimensions.window.height );\n\t}\n\n\tuseEffect( () => {\n\t\tconst dimensionsChangeSubscription = Dimensions.addEventListener(\n\t\t\t'change',\n\t\t\tonChangeDimensions\n\t\t);\n\t\treturn () => {\n\t\t\tdimensionsChangeSubscription.remove();\n\t\t};\n\t}, [] );\n\n\tuseEffect( () => {\n\t\tupdateContentHtml();\n\t}, [ html, title, type, styles, scripts ] );\n\n\tuseEffect( () => {\n\t\t// When device orientation changes we have to recalculate the size,\n\t\t// for this purpose we reset the current size value.\n\t\tif ( wasLandscape.current !== isLandscape ) {\n\t\t\tsetHeight( 0 );\n\t\t}\n\t\twasLandscape.current = isLandscape;\n\t}, [ isLandscape ] );\n\n\treturn (\n\t\t<WebView\n\t\t\tcontainerStyle={ [\n\t\t\t\tsandboxStyles[ 'sandbox-webview__container' ],\n\t\t\t\tcontainerStyle,\n\t\t\t] }\n\t\t\tkey={ key }\n\t\t\tref={ ref }\n\t\t\tsource={ { baseUrl: providerUrl, html: contentHtml } }\n\t\t\t// Wildcard value is required for static HTML\n\t\t\t// Reference: https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md#source\n\t\t\toriginWhitelist={ [ '*' ] }\n\t\t\tstyle={ [\n\t\t\t\tsandboxStyles[ 'sandbox-webview__content' ],\n\t\t\t\tgetSizeStyle(),\n\t\t\t] }\n\t\t\tonMessage={ checkMessageForResize }\n\t\t\tscrollEnabled={ false }\n\t\t\tsetBuiltInZoomControls={ false }\n\t\t\tshowsHorizontalScrollIndicator={ false }\n\t\t\tshowsVerticalScrollIndicator={ false }\n\t\t/>\n\t);\n}\n\nexport default memo( Sandbox );\n"]}
+{"version":3,"sources":["@wordpress/components/src/sandbox/index.native.js"],"names":["Dimensions","StyleSheet","WebView","Platform","renderToString","memo","useRef","useState","useEffect","usePreferredColorScheme","sandboxStyles","observeAndResizeJS","style","EMPTY_ARRAY","Sandbox","containerStyle","customJS","html","lang","providerUrl","scripts","styles","title","type","url","colorScheme","ref","height","setHeight","contentHtml","setContentHtml","getHtmlDoc","windowSize","get","isLandscape","setIsLandscape","width","wasLandscape","key","select","android","ios","htmlDoc","__html","map","rules","i","src","updateContentHtml","forceRerender","newContentHtml","setImmediate","checkMessageForResize","event","data","nativeEvent","JSON","parse","e","action","getSizeStyle","contentHeight","Math","ceil","aspectRatio","onChangeDimensions","dimensions","window","dimensionsChangeSubscription","addEventListener","remove","current","baseUrl","isAndroid","workaroundStyles","webView","create","opacity"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,UAAT,EAAqBC,UAArB,QAAuC,cAAvC;AACA,SAASC,OAAT,QAAwB,sBAAxB;AAEA;AACA;AACA;;AACA,SACCC,QADD,EAECC,cAFD,EAGCC,IAHD,EAICC,MAJD,EAKCC,QALD,EAMCC,SAND,QAOO,oBAPP;AAQA,SAASC,uBAAT,QAAwC,oBAAxC;AAEA;AACA;AACA;;AACA,OAAOC,aAAP,MAA0B,cAA1B;AAEA,MAAMC,kBAAkB,GAAI;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OA5DA;AA8DA,MAAMC,KAAK,GAAI;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAjEA;AAmEA,MAAMC,WAAW,GAAG,EAApB;;AAEA,SAASC,OAAT,OAWI;AAAA,MAXc;AACjBC,IAAAA,cADiB;AAEjBC,IAAAA,QAFiB;AAGjBC,IAAAA,IAAI,GAAG,EAHU;AAIjBC,IAAAA,IAAI,GAAG,IAJU;AAKjBC,IAAAA,WAAW,GAAG,EALG;AAMjBC,IAAAA,OAAO,GAAGP,WANO;AAOjBQ,IAAAA,MAAM,GAAGR,WAPQ;AAQjBS,IAAAA,KAAK,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","sourcesContent":["/**\n * External dependencies\n */\nimport { Dimensions, StyleSheet } from 'react-native';\nimport { WebView } from 'react-native-webview';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tPlatform,\n\trenderToString,\n\tmemo,\n\tuseRef,\n\tuseState,\n\tuseEffect,\n} from '@wordpress/element';\nimport { usePreferredColorScheme } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport sandboxStyles from './style.scss';\n\nconst observeAndResizeJS = `\n\t( function() {\n\t\tvar observer;\n\n\t\tif ( ! window.MutationObserver || ! document.body || ! window.parent ) {\n\t\t\treturn;\n\t\t}\n\n\t\tfunction sendResize() {\n\t\t\tvar clientBoundingRect = document.body.getBoundingClientRect();\n\n\t\t\t// The function postMessage is exposed by the react-native-webview library\n\t\t\t// to communicate between React Native and the WebView, in this case,\n\t\t\t// we use it for notifying resize changes.\n            window.ReactNativeWebView.postMessage(JSON.stringify( {\n                action: 'resize',\n\t\t\t\twidth: clientBoundingRect.width,\n\t\t\t\theight: clientBoundingRect.height,\n            }));\n\t\t}\n\n\t\tobserver = new MutationObserver( sendResize );\n\t\tobserver.observe( document.body, {\n\t\t\tattributes: true,\n\t\t\tattributeOldValue: false,\n\t\t\tcharacterData: true,\n\t\t\tcharacterDataOldValue: false,\n\t\t\tchildList: true,\n\t\t\tsubtree: true\n\t\t} );\n\n\t\twindow.addEventListener( 'load', sendResize, true );\n\n\t\t// Hack: Remove viewport unit styles, as these are relative\n\t\t// the iframe root and interfere with our mechanism for\n\t\t// determining the unconstrained page bounds.\n\t\tfunction removeViewportStyles( ruleOrNode ) {\n\t\t\tif( ruleOrNode.style ) {\n\t\t\t\t[ 'width', 'height', 'minHeight', 'maxHeight' ].forEach( function( style ) {\n\t\t\t\t\tif ( /^\\\\d+(vmin|vmax|vh|vw)$/.test( ruleOrNode.style[ style ] ) ) {\n\t\t\t\t\t\truleOrNode.style[ style ] = '';\n\t\t\t\t\t}\n\t\t\t\t} );\n\t\t\t}\n\t\t}\n\n\t\tArray.prototype.forEach.call( document.querySelectorAll( '[style]' ), removeViewportStyles );\n\t\tArray.prototype.forEach.call( document.styleSheets, function( stylesheet ) {\n\t\t\tArray.prototype.forEach.call( stylesheet.cssRules || stylesheet.rules, removeViewportStyles );\n\t\t} );\n\n\t\tdocument.body.style.position = 'absolute';\n\t\tdocument.body.style.width = '100%';\n\t\tdocument.body.setAttribute( 'data-resizable-iframe-connected', '' );\n\n\t\tsendResize();\n\n\t\t// Resize events can change the width of elements with 100% width, but we don't\n\t\t// get an DOM mutations for that, so do the resize when the window is resized, too.\n\t\twindow.addEventListener( 'resize', sendResize, true );\n} )();`;\n\nconst style = `\n\tbody {\n\t\tmargin: 0;\n\t}\n\thtml,\n\tbody,\n\tbody > div,\n\tbody > div iframe {\n\t\twidth: 100%;\n\t}\n\tbody > div > * {\n\t\tmargin-top: 0 !important; /* Has to have !important to override inline styles. */\n\t\tmargin-bottom: 0 !important;\n\t}\n\n\t.wp-block-embed__wrapper {\n\t\tposition: relative;\n\t}\n\n\tbody.wp-has-aspect-ratio > div iframe {\n\t\theight: 100%;\n\t\toverflow: hidden; /* If it has an aspect ratio, it shouldn't scroll. */\n\t}\n\n\t/**\n\t * Add responsiveness to embeds with aspect ratios.\n\t *\n\t * These styles have been copied from the web version (https://github.com/WordPress/gutenberg/blob/7901895ca20cf61e402925e31571d659dab64721/packages/block-library/src/embed/style.scss#L42-L89) and\n\t * adapted for the native version.\n\t */\n\t.wp-has-aspect-ratio.wp-block-embed__wrapper::before {\n\t\tcontent: \"\";\n\t\tdisplay: block;\n\t\tpadding-top: 50%; // Default to 2:1 aspect ratio.\n\t}\n\t.wp-has-aspect-ratio iframe {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n\t.wp-embed-aspect-21-9.wp-block-embed__wrapper::before {\n\t\tpadding-top: 42.85%; // 9 / 21 * 100\n\t}\n\t.wp-embed-aspect-18-9.wp-block-embed__wrapper::before {\n\t\tpadding-top: 50%; // 9 / 18 * 100\n\t}\n\t.wp-embed-aspect-16-9.wp-block-embed__wrapper::before {\n\t\tpadding-top: 56.25%; // 9 / 16 * 100\n\t}\n\t.wp-embed-aspect-4-3.wp-block-embed__wrapper::before {\n\t\tpadding-top: 75%; // 3 / 4 * 100\n\t}\n\t.wp-embed-aspect-1-1.wp-block-embed__wrapper::before {\n\t\tpadding-top: 100%; // 1 / 1 * 100\n\t}\n\t.wp-embed-aspect-9-16.wp-block-embed__wrapper::before {\n\t\tpadding-top: 177.77%; // 16 / 9 * 100\n\t}\n\t.wp-embed-aspect-1-2.wp-block-embed__wrapper::before {\n\t\tpadding-top: 200%; // 2 / 1 * 100\n\t}\n`;\n\nconst EMPTY_ARRAY = [];\n\nfunction Sandbox( {\n\tcontainerStyle,\n\tcustomJS,\n\thtml = '',\n\tlang = 'en',\n\tproviderUrl = '',\n\tscripts = EMPTY_ARRAY,\n\tstyles = EMPTY_ARRAY,\n\ttitle = '',\n\ttype,\n\turl,\n} ) {\n\tconst colorScheme = usePreferredColorScheme();\n\tconst ref = useRef();\n\tconst [ height, setHeight ] = useState( 0 );\n\tconst [ contentHtml, setContentHtml ] = useState( getHtmlDoc() );\n\n\tconst windowSize = Dimensions.get( 'window' );\n\tconst [ isLandscape, setIsLandscape ] = useState(\n\t\twindowSize.width >= windowSize.height\n\t);\n\tconst wasLandscape = useRef( isLandscape );\n\t// On Android, we need to recreate the WebView on any of the following actions, otherwise it disappears:\n\t// - Device rotation\n\t// - Light/dark mode changes\n\t// For this purpose, the key prop used in the WebView will be updated with the value of the actions.\n\tconst key = Platform.select( {\n\t\tandroid: `${ url }-${\n\t\t\tisLandscape ? 'landscape' : 'portrait'\n\t\t}-${ colorScheme }`,\n\t\tios: url,\n\t} );\n\n\tfunction getHtmlDoc() {\n\t\t// Put the html snippet into a html document, and update the state to refresh the WebView,\n\t\t// we can use this in the future to inject custom styles or scripts.\n\t\t// Scripts go into the body rather than the head, to support embedded content such as Instagram\n\t\t// that expect the scripts to be part of the body.\n\t\tconst htmlDoc = (\n\t\t\t<html lang={ lang }>\n\t\t\t\t<head>\n\t\t\t\t\t<title>{ title }</title>\n\t\t\t\t\t<meta\n\t\t\t\t\t\tname=\"viewport\"\n\t\t\t\t\t\tcontent=\"width=device-width, initial-scale=1\"\n\t\t\t\t\t></meta>\n\t\t\t\t\t<style dangerouslySetInnerHTML={ { __html: style } } />\n\t\t\t\t\t{ styles.map( ( rules, i ) => (\n\t\t\t\t\t\t<style\n\t\t\t\t\t\t\tkey={ i }\n\t\t\t\t\t\t\tdangerouslySetInnerHTML={ { __html: rules } }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t\t</head>\n\t\t\t\t<body\n\t\t\t\t\tdata-resizable-iframe-connected=\"data-resizable-iframe-connected\"\n\t\t\t\t\tclassName={ type }\n\t\t\t\t>\n\t\t\t\t\t<div dangerouslySetInnerHTML={ { __html: html } } />\n\t\t\t\t\t<script\n\t\t\t\t\t\ttype=\"text/javascript\"\n\t\t\t\t\t\tdangerouslySetInnerHTML={ {\n\t\t\t\t\t\t\t__html: customJS || observeAndResizeJS,\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t\t{ scripts.map( ( src ) => (\n\t\t\t\t\t\t<script key={ src } src={ src } />\n\t\t\t\t\t) ) }\n\t\t\t\t</body>\n\t\t\t</html>\n\t\t);\n\t\treturn '<!DOCTYPE html>' + renderToString( htmlDoc );\n\t}\n\n\tfunction updateContentHtml( forceRerender = false ) {\n\t\tconst newContentHtml = getHtmlDoc();\n\n\t\tif ( forceRerender && contentHtml === newContentHtml ) {\n\t\t\t// The re-render is forced by updating the state with empty HTML,\n\t\t\t// waiting for the JS code to be executed with \"setImmediate\" and then\n\t\t\t// setting the content HTML again.\n\t\t\tsetContentHtml( '' );\n\t\t\tsetImmediate( () => setContentHtml( newContentHtml ) );\n\t\t} else {\n\t\t\tsetContentHtml( newContentHtml );\n\t\t}\n\t}\n\n\tfunction checkMessageForResize( event ) {\n\t\t// Attempt to parse the message data as JSON if passed as string.\n\t\tlet data = event.nativeEvent.data || {};\n\n\t\tif ( 'string' === typeof data ) {\n\t\t\ttry {\n\t\t\t\tdata = JSON.parse( data );\n\t\t\t} catch ( e ) {}\n\t\t}\n\n\t\t// Update the state only if the message is formatted as we expect,\n\t\t// i.e. as an object with a 'resize' action.\n\t\tif ( 'resize' !== data.action ) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetHeight( data.height );\n\t}\n\n\tfunction getSizeStyle() {\n\t\tconst contentHeight = Math.ceil( height );\n\n\t\treturn contentHeight ? { height: contentHeight } : { aspectRatio: 1 };\n\t}\n\n\tfunction onChangeDimensions( dimensions ) {\n\t\tsetIsLandscape( dimensions.window.width >= dimensions.window.height );\n\t}\n\n\tuseEffect( () => {\n\t\tconst dimensionsChangeSubscription = Dimensions.addEventListener(\n\t\t\t'change',\n\t\t\tonChangeDimensions\n\t\t);\n\t\treturn () => {\n\t\t\tdimensionsChangeSubscription.remove();\n\t\t};\n\t}, [] );\n\n\tuseEffect( () => {\n\t\tupdateContentHtml();\n\t}, [ html, title, type, styles, scripts ] );\n\n\tuseEffect( () => {\n\t\t// When device orientation changes we have to recalculate the size,\n\t\t// for this purpose we reset the current size value.\n\t\tif ( wasLandscape.current !== isLandscape ) {\n\t\t\tsetHeight( 0 );\n\t\t}\n\t\twasLandscape.current = isLandscape;\n\t}, [ isLandscape ] );\n\n\treturn (\n\t\t<WebView\n\t\t\tcontainerStyle={ [\n\t\t\t\tsandboxStyles[ 'sandbox-webview__container' ],\n\t\t\t\tcontainerStyle,\n\t\t\t] }\n\t\t\tkey={ key }\n\t\t\tref={ ref }\n\t\t\tsource={ { baseUrl: providerUrl, html: contentHtml } }\n\t\t\t// Wildcard value is required for static HTML\n\t\t\t// Reference: https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md#source\n\t\t\toriginWhitelist={ [ '*' ] }\n\t\t\tstyle={ [\n\t\t\t\tsandboxStyles[ 'sandbox-webview__content' ],\n\t\t\t\tgetSizeStyle(),\n\t\t\t\tPlatform.isAndroid && workaroundStyles.webView,\n\t\t\t] }\n\t\t\tonMessage={ checkMessageForResize }\n\t\t\tscrollEnabled={ false }\n\t\t\tsetBuiltInZoomControls={ false }\n\t\t\tshowsHorizontalScrollIndicator={ false }\n\t\t\tshowsVerticalScrollIndicator={ false }\n\t\t/>\n\t);\n}\n\nconst workaroundStyles = StyleSheet.create( {\n\twebView: {\n\t\t/**\n\t\t * The slight opacity below is a workaround for an Android crash caused from combining Android\n\t\t * 12's new scroll overflow behavior and webviews.\n\t\t * https://github.com/react-native-webview/react-native-webview/issues/1915#issuecomment-808869253\n\t\t */\n\t\topacity: 0.99,\n\t},\n} );\n\nexport default memo( Sandbox );\n"]}

package/build-module/scroll-lock/index.js

@@ -11,9 +11,6 @@ import { useEffect } from '@wordpress/element';
  */
 
 let previousScrollTop = 0;
-/**
- * @param {boolean} locked
- */
 
 function setLocked(locked) {
   const scrollingElement = document.scrollingElement || document.body;
@@ -34,12 +31,40 @@ function setLocked(locked) {
 
 let lockCounter = 0;
 /**
- * A component that will lock scrolling when it is mounted and unlock scrolling when it is unmounted.
+ * ScrollLock is a content-free React component for declaratively preventing
+ * scroll bleed from modal UI to the page body. This component applies a
+ * `lockscroll` class to the `document.documentElement` and
+ * `document.scrollingElement` elements to stop the body from scrolling. When it
+ * is present, the lock is applied.
+ *
+ * ```jsx
+ * import { ScrollLock, Button } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyScrollLock = () => {
+ *   const [ isScrollLocked, setIsScrollLocked ] = useState( false );
+ *
+ *   const toggleLock = () => {
+ *     setIsScrollLocked( ( locked ) => ! locked ) );
+ *   };
  *
- * @return {null} Render nothing.
+ *   return (
+ *     <div>
+ *       <Button variant="secondary" onClick={ toggleLock }>
+ *         Toggle scroll lock
+ *       </Button>
+ *       { isScrollLocked && <ScrollLock /> }
+ *       <p>
+ *         Scroll locked:
+ *         <strong>{ isScrollLocked ? 'Yes' : 'No' }</strong>
+ *       </p>
+ *     </div>
+ *   );
+ * };
+ * ```
  */
 
-export default function ScrollLock() {
+export function ScrollLock() {
   useEffect(() => {
     if (lockCounter === 0) {
       setLocked(true);
@@ -56,4 +81,5 @@ export default function ScrollLock() {
   }, []);
   return null;
 }
+export default ScrollLock;
 //# sourceMappingURL=index.js.map

package/build-module/scroll-lock/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/scroll-lock/index.js"],"names":["useEffect","previousScrollTop","setLocked","locked","scrollingElement","document","body","scrollTop","methodName","classList","documentElement","lockCounter","ScrollLock"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAT,QAA0B,oBAA1B;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,IAAIC,iBAAiB,GAAG,CAAxB;AAEA;AACA;AACA;;AACA,SAASC,SAAT,CAAoBC,MAApB,EAA6B;AAC5B,QAAMC,gBAAgB,GAAGC,QAAQ,CAACD,gBAAT,IAA6BC,QAAQ,CAACC,IAA/D;;AAEA,MAAKH,MAAL,EAAc;AACbF,IAAAA,iBAAiB,GAAGG,gBAAgB,CAACG,SAArC;AACA;;AAED,QAAMC,UAAU,GAAGL,MAAM,GAAG,KAAH,GAAW,QAApC;AACAC,EAAAA,gBAAgB,CAACK,SAAjB,CAA4BD,UAA5B,EAA0C,YAA1C,EAR4B,CAU5B;;AACAH,EAAAA,QAAQ,CAACK,eAAT,CAAyBD,SAAzB,CAAoCD,UAApC,EAAkD,YAAlD;;AAEA,MAAK,CAAEL,MAAP,EAAgB;AACfC,IAAAA,gBAAgB,CAACG,SAAjB,GAA6BN,iBAA7B;AACA;AACD;;AAED,IAAIU,WAAW,GAAG,CAAlB;AAEA;AACA;AACA;AACA;AACA;;AACA,eAAe,SAASC,UAAT,GAAsB;AACpCZ,EAAAA,SAAS,CAAE,MAAM;AAChB,QAAKW,WAAW,KAAK,CAArB,EAAyB;AACxBT,MAAAA,SAAS,CAAE,IAAF,CAAT;AACA;;AAED,MAAES,WAAF;AAEA,WAAO,MAAM;AACZ,UAAKA,WAAW,KAAK,CAArB,EAAyB;AACxBT,QAAAA,SAAS,CAAE,KAAF,CAAT;AACA;;AAED,QAAES,WAAF;AACA,KAND;AAOA,GAdQ,EAcN,EAdM,CAAT;AAgBA,SAAO,IAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect } from '@wordpress/element';\n\n/*\n * Setting `overflow: hidden` on html and body elements resets body scroll in iOS.\n * Save scroll top so we can restore it after locking scroll.\n *\n * NOTE: It would be cleaner and possibly safer to find a localized solution such\n * as preventing default on certain touchmove events.\n */\nlet previousScrollTop = 0;\n\n/**\n * @param {boolean} locked\n */\nfunction setLocked( locked ) {\n\tconst scrollingElement = document.scrollingElement || document.body;\n\n\tif ( locked ) {\n\t\tpreviousScrollTop = scrollingElement.scrollTop;\n\t}\n\n\tconst methodName = locked ? 'add' : 'remove';\n\tscrollingElement.classList[ methodName ]( 'lockscroll' );\n\n\t// Adding the class to the document element seems to be necessary in iOS.\n\tdocument.documentElement.classList[ methodName ]( 'lockscroll' );\n\n\tif ( ! locked ) {\n\t\tscrollingElement.scrollTop = previousScrollTop;\n\t}\n}\n\nlet lockCounter = 0;\n\n/**\n * A component that will lock scrolling when it is mounted and unlock scrolling when it is unmounted.\n *\n * @return {null} Render nothing.\n */\nexport default function ScrollLock() {\n\tuseEffect( () => {\n\t\tif ( lockCounter === 0 ) {\n\t\t\tsetLocked( true );\n\t\t}\n\n\t\t++lockCounter;\n\n\t\treturn () => {\n\t\t\tif ( lockCounter === 1 ) {\n\t\t\t\tsetLocked( false );\n\t\t\t}\n\n\t\t\t--lockCounter;\n\t\t};\n\t}, [] );\n\n\treturn null;\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/scroll-lock/index.tsx"],"names":["useEffect","previousScrollTop","setLocked","locked","scrollingElement","document","body","scrollTop","methodName","classList","documentElement","lockCounter","ScrollLock"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAT,QAA0B,oBAA1B;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,IAAIC,iBAAiB,GAAG,CAAxB;;AAEA,SAASC,SAAT,CAAoBC,MAApB,EAAsC;AACrC,QAAMC,gBAAgB,GAAGC,QAAQ,CAACD,gBAAT,IAA6BC,QAAQ,CAACC,IAA/D;;AAEA,MAAKH,MAAL,EAAc;AACbF,IAAAA,iBAAiB,GAAGG,gBAAgB,CAACG,SAArC;AACA;;AAED,QAAMC,UAAU,GAAGL,MAAM,GAAG,KAAH,GAAW,QAApC;AACAC,EAAAA,gBAAgB,CAACK,SAAjB,CAA4BD,UAA5B,EAA0C,YAA1C,EARqC,CAUrC;;AACAH,EAAAA,QAAQ,CAACK,eAAT,CAAyBD,SAAzB,CAAoCD,UAApC,EAAkD,YAAlD;;AAEA,MAAK,CAAEL,MAAP,EAAgB;AACfC,IAAAA,gBAAgB,CAACG,SAAjB,GAA6BN,iBAA7B;AACA;AACD;;AAED,IAAIU,WAAW,GAAG,CAAlB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,UAAT,GAA4B;AAClCZ,EAAAA,SAAS,CAAE,MAAM;AAChB,QAAKW,WAAW,KAAK,CAArB,EAAyB;AACxBT,MAAAA,SAAS,CAAE,IAAF,CAAT;AACA;;AAED,MAAES,WAAF;AAEA,WAAO,MAAM;AACZ,UAAKA,WAAW,KAAK,CAArB,EAAyB;AACxBT,QAAAA,SAAS,CAAE,KAAF,CAAT;AACA;;AAED,QAAES,WAAF;AACA,KAND;AAOA,GAdQ,EAcN,EAdM,CAAT;AAgBA,SAAO,IAAP;AACA;AAED,eAAeC,UAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect } from '@wordpress/element';\n\n/*\n * Setting `overflow: hidden` on html and body elements resets body scroll in iOS.\n * Save scroll top so we can restore it after locking scroll.\n *\n * NOTE: It would be cleaner and possibly safer to find a localized solution such\n * as preventing default on certain touchmove events.\n */\nlet previousScrollTop = 0;\n\nfunction setLocked( locked: boolean ) {\n\tconst scrollingElement = document.scrollingElement || document.body;\n\n\tif ( locked ) {\n\t\tpreviousScrollTop = scrollingElement.scrollTop;\n\t}\n\n\tconst methodName = locked ? 'add' : 'remove';\n\tscrollingElement.classList[ methodName ]( 'lockscroll' );\n\n\t// Adding the class to the document element seems to be necessary in iOS.\n\tdocument.documentElement.classList[ methodName ]( 'lockscroll' );\n\n\tif ( ! locked ) {\n\t\tscrollingElement.scrollTop = previousScrollTop;\n\t}\n}\n\nlet lockCounter = 0;\n\n/**\n * ScrollLock is a content-free React component for declaratively preventing\n * scroll bleed from modal UI to the page body. This component applies a\n * `lockscroll` class to the `document.documentElement` and\n * `document.scrollingElement` elements to stop the body from scrolling. When it\n * is present, the lock is applied.\n *\n * ```jsx\n * import { ScrollLock, Button } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyScrollLock = () => {\n *   const [ isScrollLocked, setIsScrollLocked ] = useState( false );\n *\n *   const toggleLock = () => {\n *     setIsScrollLocked( ( locked ) => ! locked ) );\n *   };\n *\n *   return (\n *     <div>\n *       <Button variant=\"secondary\" onClick={ toggleLock }>\n *         Toggle scroll lock\n *       </Button>\n *       { isScrollLocked && <ScrollLock /> }\n *       <p>\n *         Scroll locked:\n *         <strong>{ isScrollLocked ? 'Yes' : 'No' }</strong>\n *       </p>\n *     </div>\n *   );\n * };\n * ```\n */\nexport function ScrollLock(): null {\n\tuseEffect( () => {\n\t\tif ( lockCounter === 0 ) {\n\t\t\tsetLocked( true );\n\t\t}\n\n\t\t++lockCounter;\n\n\t\treturn () => {\n\t\t\tif ( lockCounter === 1 ) {\n\t\t\t\tsetLocked( false );\n\t\t\t}\n\n\t\t\t--lockCounter;\n\t\t};\n\t}, [] );\n\n\treturn null;\n}\n\nexport default ScrollLock;\n"]}

package/build-module/select-control/chevron-down.js

@@ -0,0 +1,21 @@
+import { createElement } from "@wordpress/element";
+
+/**
+ * WordPress dependencies
+ */
+import { chevronDown, Icon } from '@wordpress/icons';
+/**
+ * Internal dependencies
+ */
+
+import { chevronIconSize, DownArrowWrapper, InputControlSuffixWrapperWithClickThrough } from './styles/select-control-styles';
+
+const SelectControlChevronDown = () => {
+  return createElement(InputControlSuffixWrapperWithClickThrough, null, createElement(DownArrowWrapper, null, createElement(Icon, {
+    icon: chevronDown,
+    size: chevronIconSize
+  })));
+};
+
+export default SelectControlChevronDown;
+//# sourceMappingURL=chevron-down.js.map

package/build-module/select-control/chevron-down.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/select-control/chevron-down.tsx"],"names":["chevronDown","Icon","chevronIconSize","DownArrowWrapper","InputControlSuffixWrapperWithClickThrough","SelectControlChevronDown"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,WAAT,EAAsBC,IAAtB,QAAkC,kBAAlC;AAEA;AACA;AACA;;AACA,SACCC,eADD,EAECC,gBAFD,EAGCC,yCAHD,QAIO,gCAJP;;AAMA,MAAMC,wBAAwB,GAAG,MAAM;AACtC,SACC,cAAC,yCAAD,QACC,cAAC,gBAAD,QACC,cAAC,IAAD;AAAM,IAAA,IAAI,EAAGL,WAAb;AAA2B,IAAA,IAAI,EAAGE;AAAlC,IADD,CADD,CADD;AAOA,CARD;;AAUA,eAAeG,wBAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { chevronDown, Icon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport {\n\tchevronIconSize,\n\tDownArrowWrapper,\n\tInputControlSuffixWrapperWithClickThrough,\n} from './styles/select-control-styles';\n\nconst SelectControlChevronDown = () => {\n\treturn (\n\t\t<InputControlSuffixWrapperWithClickThrough>\n\t\t\t<DownArrowWrapper>\n\t\t\t\t<Icon icon={ chevronDown } size={ chevronIconSize } />\n\t\t\t</DownArrowWrapper>\n\t\t</InputControlSuffixWrapperWithClickThrough>\n\t);\n};\n\nexport default SelectControlChevronDown;\n"]}

package/build-module/select-control/index.js

@@ -4,7 +4,6 @@ import { createElement } from "@wordpress/element";
 /**
  * External dependencies
  */
-import { isEmpty } from 'lodash';
 import classNames from 'classnames';
 
 /**
@@ -12,14 +11,14 @@ import classNames from 'classnames';
  */
 import { useInstanceId } from '@wordpress/compose';
 import { useState, forwardRef } from '@wordpress/element';
-import { Icon, chevronDown } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
 
 import BaseControl from '../base-control';
 import InputBase from '../input-control/input-base';
-import { Select, DownArrowWrapper } from './styles/select-control-styles';
+import { Select } from './styles/select-control-styles';
+import SelectControlChevronDown from './chevron-down';
 
 const noop = () => {};
 
@@ -48,6 +47,7 @@ function UnforwardedSelectControl(_ref, ref) {
     children,
     prefix,
     suffix,
+    __next36pxDefaultSize = false,
     __nextHasNoMarginBottom = false,
     ...props
   } = _ref;
@@ -55,7 +55,7 @@ function UnforwardedSelectControl(_ref, ref) {
   const id = useUniqueId(idProp);
   const helpId = help ? `${id}__help` : undefined; // Disable reason: A select with an onchange throws a warning.
 
-  if (isEmpty(options) && !children) return null;
+  if (!(options !== null && options !== void 0 && options.length) && !children) return null;
 
   const handleOnBlur = event => {
     onBlur(event);
@@ -105,13 +105,12 @@ function UnforwardedSelectControl(_ref, ref) {
     isFocused: isFocused,
     label: label,
     size: size,
-    suffix: suffix || createElement(DownArrowWrapper, null, createElement(Icon, {
-      icon: chevronDown,
-      size: 18
-    })),
+    suffix: suffix || createElement(SelectControlChevronDown, null),
     prefix: prefix,
-    labelPosition: labelPosition
+    labelPosition: labelPosition,
+    __next36pxDefaultSize: __next36pxDefaultSize
   }, createElement(Select, _extends({}, props, {
+    __next36pxDefaultSize: __next36pxDefaultSize,
     "aria-describedby": helpId,
     className: "components-select-control__input",
     disabled: disabled,

package/build-module/select-control/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/select-control/index.tsx"],"names":["isEmpty","classNames","useInstanceId","useState","forwardRef","Icon","chevronDown","BaseControl","InputBase","Select","DownArrowWrapper","noop","useUniqueId","idProp","instanceId","SelectControl","id","UnforwardedSelectControl","ref","className","disabled","help","hideLabelFromVision","label","multiple","onBlur","onChange","onFocus","options","size","value","valueProp","labelPosition","children","prefix","suffix","__nextHasNoMarginBottom","props","isFocused","setIsFocused","helpId","undefined","handleOnBlur","event","handleOnFocus","handleOnChange","selectedOptions","Array","from","target","filter","selected","newValues","map","classes","option","index","key"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { isEmpty } from 'lodash';\nimport classNames from 'classnames';\nimport type { ChangeEvent, FocusEvent, ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useState, forwardRef } from '@wordpress/element';\nimport { Icon, chevronDown } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport InputBase from '../input-control/input-base';\nimport { Select, DownArrowWrapper } from './styles/select-control-styles';\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { SelectControlProps } from './types';\n\nconst noop = () => {};\n\nfunction useUniqueId( idProp?: string ) {\n\tconst instanceId = useInstanceId( SelectControl );\n\tconst id = `inspector-select-control-${ instanceId }`;\n\n\treturn idProp || id;\n}\n\nfunction UnforwardedSelectControl(\n\t{\n\t\tclassName,\n\t\tdisabled = false,\n\t\thelp,\n\t\thideLabelFromVision,\n\t\tid: idProp,\n\t\tlabel,\n\t\tmultiple = false,\n\t\tonBlur = noop,\n\t\tonChange = noop,\n\t\tonFocus = noop,\n\t\toptions = [],\n\t\tsize = 'default',\n\t\tvalue: valueProp,\n\t\tlabelPosition = 'top',\n\t\tchildren,\n\t\tprefix,\n\t\tsuffix,\n\t\t__nextHasNoMarginBottom = false,\n\t\t...props\n\t}: WordPressComponentProps< SelectControlProps, 'select', false >,\n\tref: ForwardedRef< HTMLSelectElement >\n) {\n\tconst [ isFocused, setIsFocused ] = useState( false );\n\tconst id = useUniqueId( idProp );\n\tconst helpId = help ? `${ id }__help` : undefined;\n\n\t// Disable reason: A select with an onchange throws a warning.\n\tif ( isEmpty( options ) && ! children ) return null;\n\n\tconst handleOnBlur = ( event: FocusEvent< HTMLSelectElement > ) => {\n\t\tonBlur( event );\n\t\tsetIsFocused( false );\n\t};\n\n\tconst handleOnFocus = ( event: FocusEvent< HTMLSelectElement > ) => {\n\t\tonFocus( event );\n\t\tsetIsFocused( true );\n\t};\n\n\tconst handleOnChange = ( event: ChangeEvent< HTMLSelectElement > ) => {\n\t\tif ( multiple ) {\n\t\t\tconst selectedOptions = Array.from( event.target.options ).filter(\n\t\t\t\t( { selected } ) => selected\n\t\t\t);\n\t\t\tconst newValues = selectedOptions.map( ( { value } ) => value );\n\t\t\tonChange( newValues );\n\t\t\treturn;\n\t\t}\n\n\t\tonChange( event.target.value, { event } );\n\t};\n\n\tconst classes = classNames( 'components-select-control', className );\n\n\t/* eslint-disable jsx-a11y/no-onchange */\n\treturn (\n\t\t<BaseControl\n\t\t\thelp={ help }\n\t\t\tid={ id }\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t>\n\t\t\t<InputBase\n\t\t\t\tclassName={ classes }\n\t\t\t\tdisabled={ disabled }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\tid={ id }\n\t\t\t\tisFocused={ isFocused }\n\t\t\t\tlabel={ label }\n\t\t\t\tsize={ size }\n\t\t\t\tsuffix={\n\t\t\t\t\tsuffix || (\n\t\t\t\t\t\t<DownArrowWrapper>\n\t\t\t\t\t\t\t<Icon icon={ chevronDown } size={ 18 } />\n\t\t\t\t\t\t</DownArrowWrapper>\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t\tprefix={ prefix }\n\t\t\t\tlabelPosition={ labelPosition }\n\t\t\t>\n\t\t\t\t<Select\n\t\t\t\t\t{ ...props }\n\t\t\t\t\taria-describedby={ helpId }\n\t\t\t\t\tclassName=\"components-select-control__input\"\n\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\tid={ id }\n\t\t\t\t\tmultiple={ multiple }\n\t\t\t\t\tonBlur={ handleOnBlur }\n\t\t\t\t\tonChange={ handleOnChange }\n\t\t\t\t\tonFocus={ handleOnFocus }\n\t\t\t\t\tref={ ref }\n\t\t\t\t\tselectSize={ size }\n\t\t\t\t\tvalue={ valueProp }\n\t\t\t\t>\n\t\t\t\t\t{ children ||\n\t\t\t\t\t\toptions.map( ( option, index ) => {\n\t\t\t\t\t\t\tconst key =\n\t\t\t\t\t\t\t\toption.id ||\n\t\t\t\t\t\t\t\t`${ option.label }-${ option.value }-${ index }`;\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\t\tkey={ key }\n\t\t\t\t\t\t\t\t\tvalue={ option.value }\n\t\t\t\t\t\t\t\t\tdisabled={ option.disabled }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ option.label }\n\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t</Select>\n\t\t\t</InputBase>\n\t\t</BaseControl>\n\t);\n\t/* eslint-enable jsx-a11y/no-onchange */\n}\n\n/**\n * `SelectControl` allows users to select from a single or multiple option menu.\n * It functions as a wrapper around the browser's native `<select>` element.\n *\n * @example\n * import { SelectControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MySelectControl = () => {\n *   const [ size, setSize ] = useState( '50%' );\n *\n *   return (\n *     <SelectControl\n *       label=\"Size\"\n *       value={ size }\n *       options={ [\n *         { label: 'Big', value: '100%' },\n *         { label: 'Medium', value: '50%' },\n *         { label: 'Small', value: '25%' },\n *       ] }\n *       onChange={ setSize }\n *     />\n *   );\n * };\n */\nexport const SelectControl = forwardRef( UnforwardedSelectControl );\n\nexport default SelectControl;\n"]}
+{"version":3,"sources":["@wordpress/components/src/select-control/index.tsx"],"names":["classNames","useInstanceId","useState","forwardRef","BaseControl","InputBase","Select","SelectControlChevronDown","noop","useUniqueId","idProp","instanceId","SelectControl","id","UnforwardedSelectControl","ref","className","disabled","help","hideLabelFromVision","label","multiple","onBlur","onChange","onFocus","options","size","value","valueProp","labelPosition","children","prefix","suffix","__next36pxDefaultSize","__nextHasNoMarginBottom","props","isFocused","setIsFocused","helpId","undefined","length","handleOnBlur","event","handleOnFocus","handleOnChange","selectedOptions","Array","from","target","filter","selected","newValues","map","classes","option","index","key"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classNames from 'classnames';\nimport type { ChangeEvent, FocusEvent, ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useState, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport InputBase from '../input-control/input-base';\nimport { Select } from './styles/select-control-styles';\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { SelectControlProps } from './types';\nimport SelectControlChevronDown from './chevron-down';\n\nconst noop = () => {};\n\nfunction useUniqueId( idProp?: string ) {\n\tconst instanceId = useInstanceId( SelectControl );\n\tconst id = `inspector-select-control-${ instanceId }`;\n\n\treturn idProp || id;\n}\n\nfunction UnforwardedSelectControl(\n\t{\n\t\tclassName,\n\t\tdisabled = false,\n\t\thelp,\n\t\thideLabelFromVision,\n\t\tid: idProp,\n\t\tlabel,\n\t\tmultiple = false,\n\t\tonBlur = noop,\n\t\tonChange = noop,\n\t\tonFocus = noop,\n\t\toptions = [],\n\t\tsize = 'default',\n\t\tvalue: valueProp,\n\t\tlabelPosition = 'top',\n\t\tchildren,\n\t\tprefix,\n\t\tsuffix,\n\t\t__next36pxDefaultSize = false,\n\t\t__nextHasNoMarginBottom = false,\n\t\t...props\n\t}: WordPressComponentProps< SelectControlProps, 'select', false >,\n\tref: ForwardedRef< HTMLSelectElement >\n) {\n\tconst [ isFocused, setIsFocused ] = useState( false );\n\tconst id = useUniqueId( idProp );\n\tconst helpId = help ? `${ id }__help` : undefined;\n\n\t// Disable reason: A select with an onchange throws a warning.\n\tif ( ! options?.length && ! children ) return null;\n\n\tconst handleOnBlur = ( event: FocusEvent< HTMLSelectElement > ) => {\n\t\tonBlur( event );\n\t\tsetIsFocused( false );\n\t};\n\n\tconst handleOnFocus = ( event: FocusEvent< HTMLSelectElement > ) => {\n\t\tonFocus( event );\n\t\tsetIsFocused( true );\n\t};\n\n\tconst handleOnChange = ( event: ChangeEvent< HTMLSelectElement > ) => {\n\t\tif ( multiple ) {\n\t\t\tconst selectedOptions = Array.from( event.target.options ).filter(\n\t\t\t\t( { selected } ) => selected\n\t\t\t);\n\t\t\tconst newValues = selectedOptions.map( ( { value } ) => value );\n\t\t\tonChange( newValues );\n\t\t\treturn;\n\t\t}\n\n\t\tonChange( event.target.value, { event } );\n\t};\n\n\tconst classes = classNames( 'components-select-control', className );\n\n\t/* eslint-disable jsx-a11y/no-onchange */\n\treturn (\n\t\t<BaseControl\n\t\t\thelp={ help }\n\t\t\tid={ id }\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t>\n\t\t\t<InputBase\n\t\t\t\tclassName={ classes }\n\t\t\t\tdisabled={ disabled }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\tid={ id }\n\t\t\t\tisFocused={ isFocused }\n\t\t\t\tlabel={ label }\n\t\t\t\tsize={ size }\n\t\t\t\tsuffix={ suffix || <SelectControlChevronDown /> }\n\t\t\t\tprefix={ prefix }\n\t\t\t\tlabelPosition={ labelPosition }\n\t\t\t\t__next36pxDefaultSize={ __next36pxDefaultSize }\n\t\t\t>\n\t\t\t\t<Select\n\t\t\t\t\t{ ...props }\n\t\t\t\t\t__next36pxDefaultSize={ __next36pxDefaultSize }\n\t\t\t\t\taria-describedby={ helpId }\n\t\t\t\t\tclassName=\"components-select-control__input\"\n\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\tid={ id }\n\t\t\t\t\tmultiple={ multiple }\n\t\t\t\t\tonBlur={ handleOnBlur }\n\t\t\t\t\tonChange={ handleOnChange }\n\t\t\t\t\tonFocus={ handleOnFocus }\n\t\t\t\t\tref={ ref }\n\t\t\t\t\tselectSize={ size }\n\t\t\t\t\tvalue={ valueProp }\n\t\t\t\t>\n\t\t\t\t\t{ children ||\n\t\t\t\t\t\toptions.map( ( option, index ) => {\n\t\t\t\t\t\t\tconst key =\n\t\t\t\t\t\t\t\toption.id ||\n\t\t\t\t\t\t\t\t`${ option.label }-${ option.value }-${ index }`;\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\t\tkey={ key }\n\t\t\t\t\t\t\t\t\tvalue={ option.value }\n\t\t\t\t\t\t\t\t\tdisabled={ option.disabled }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ option.label }\n\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t</Select>\n\t\t\t</InputBase>\n\t\t</BaseControl>\n\t);\n\t/* eslint-enable jsx-a11y/no-onchange */\n}\n\n/**\n * `SelectControl` allows users to select from a single or multiple option menu.\n * It functions as a wrapper around the browser's native `<select>` element.\n *\n * @example\n * import { SelectControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MySelectControl = () => {\n *   const [ size, setSize ] = useState( '50%' );\n *\n *   return (\n *     <SelectControl\n *       label=\"Size\"\n *       value={ size }\n *       options={ [\n *         { label: 'Big', value: '100%' },\n *         { label: 'Medium', value: '50%' },\n *         { label: 'Small', value: '25%' },\n *       ] }\n *       onChange={ setSize }\n *     />\n *   );\n * };\n */\nexport const SelectControl = forwardRef( UnforwardedSelectControl );\n\nexport default SelectControl;\n"]}