@wordpress/components 25.2.0 → 25.3.0

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/range-control/styles/range-control-styles.ts"],"names":["rangeHeightValue","railHeight","rangeHeight","height","minHeight","thumbSize","Root","wrapperColor","color","COLORS","ui","borderFocus","wrapperMargin","marks","__nextHasNoMarginBottom","marginBottom","undefined","Wrapper","BeforeIconWrapper","marginRight","AfterIconWrapper","marginLeft","railBackgroundColor","disabled","railColor","background","backgroundDisabled","Rail","gray","trackBackgroundColor","trackColor","Track","MarksWrapper","markFill","isFilled","backgroundColor","Mark","markLabelFill","MarkLabel","thumbColor","css","theme","ThumbWrapper","transform","thumbFocus","isFocused","Thumb","InputRange","tooltipShow","show","opacity","tooltipPosition","position","isBottom","Tooltip","InputNumber","NumberControl","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.ui.backgroundDisabled;\n\t}\n\n\treturn css( { background } );\n};\n\nexport const Rail = styled.span`\n\tbackground-color: ${ COLORS.gray[ 300 ] };\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.gray[ 400 ];\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.gray[ 300 ];\n\n\tif ( disabled ) {\n\t\tbackgroundColor = COLORS.gray[ 400 ];\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.gray[ 700 ] : COLORS.gray[ 300 ],\n\t} );\n};\n\nexport const MarkLabel = styled.span`\n\tcolor: ${ COLORS.gray[ 300 ] };\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.gray[ 400 ] };\n\t\t  `\n\t\t: css`\n\t\t\t\tbackground-color: ${ COLORS.ui.theme };\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: ${ COLORS.ui.theme };\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"]}
+{"version":3,"sources":["@wordpress/components/src/range-control/styles/range-control-styles.ts"],"names":["rangeHeightValue","railHeight","rangeHeight","height","minHeight","thumbSize","deprecatedHeight","__next40pxDefaultSize","Root","wrapperColor","color","COLORS","ui","borderFocus","wrapperMargin","marks","__nextHasNoMarginBottom","marginBottom","undefined","Wrapper","BeforeIconWrapper","marginRight","AfterIconWrapper","marginLeft","railBackgroundColor","disabled","railColor","background","backgroundDisabled","Rail","gray","trackBackgroundColor","trackColor","Track","MarksWrapper","markFill","isFilled","backgroundColor","Mark","markLabelFill","MarkLabel","thumbColor","css","theme","ThumbWrapper","transform","thumbFocus","isFocused","Thumb","InputRange","tooltipShow","show","opacity","tooltipPosition","position","isBottom","Tooltip","InputNumber","NumberControl","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\tRangeControlProps,\n} from '../types';\n\nconst rangeHeightValue = 30;\nconst railHeight = 4;\nconst rangeHeight = () =>\n\tcss( { height: rangeHeightValue, minHeight: rangeHeightValue } );\nconst thumbSize = 12;\n\nconst deprecatedHeight = ( {\n\t__next40pxDefaultSize,\n}: Pick< RangeControlProps, '__next40pxDefaultSize' > ) =>\n\t! __next40pxDefaultSize && css( { minHeight: rangeHeightValue } );\n\ntype RootProps = Pick< RangeControlProps, '__next40pxDefaultSize' >;\nexport const Root = styled.div< RootProps >`\n\t-webkit-tap-highlight-color: transparent;\n\talign-items: center;\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\tpadding: 0;\n\tposition: relative;\n\ttouch-action: none;\n\twidth: 100%;\n\tmin-height: 40px;\n\t/* TODO: remove after removing the __next40pxDefaultSize prop */\n\t${ deprecatedHeight };\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.ui.backgroundDisabled;\n\t}\n\n\treturn css( { background } );\n};\n\nexport const Rail = styled.span`\n\tbackground-color: ${ COLORS.gray[ 300 ] };\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.gray[ 400 ];\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.gray[ 300 ];\n\n\tif ( disabled ) {\n\t\tbackgroundColor = COLORS.gray[ 400 ];\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.gray[ 700 ] : COLORS.gray[ 300 ],\n\t} );\n};\n\nexport const MarkLabel = styled.span`\n\tcolor: ${ COLORS.gray[ 300 ] };\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.gray[ 400 ] };\n\t\t  `\n\t\t: css`\n\t\t\t\tbackground-color: ${ COLORS.ui.theme };\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: ${ COLORS.ui.theme };\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\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/select-control/index.js

@@ -133,7 +133,8 @@ function UnforwardedSelectControl(props, ref) {
     return (0, _element.createElement)("option", {
       key: key,
       value: option.value,
-      disabled: option.disabled
+      disabled: option.disabled,
+      hidden: option.hidden
     }, option.label);
   }))));
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/select-control/index.tsx"],"names":["noop","useUniqueId","idProp","instanceId","SelectControl","id","UnforwardedSelectControl","props","ref","className","disabled","help","hideLabelFromVision","label","multiple","onBlur","onChange","onFocus","options","size","value","valueProp","labelPosition","children","prefix","suffix","__next36pxDefaultSize","__nextHasNoMarginBottom","restProps","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';\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\tprops: WordPressComponentProps< SelectControlProps, 'select', false >,\n\tref: React.ForwardedRef< HTMLSelectElement >\n) {\n\tconst {\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,\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...restProps\n\t} = props;\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: React.FocusEvent< HTMLSelectElement > ) => {\n\t\tonBlur( event );\n\t\tsetIsFocused( false );\n\t};\n\n\tconst handleOnFocus = ( event: React.FocusEvent< HTMLSelectElement > ) => {\n\t\tonFocus( event );\n\t\tsetIsFocused( true );\n\t};\n\n\tconst handleOnChange = (\n\t\tevent: React.ChangeEvent< HTMLSelectElement >\n\t) => {\n\t\tif ( props.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\tprops.onChange?.( newValues, { event } );\n\t\t\treturn;\n\t\t}\n\n\t\tprops.onChange?.( event.target.value, { event } );\n\t};\n\n\tconst classes = classNames( 'components-select-control', className );\n\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 || ( ! multiple && <SelectControlChevronDown /> )\n\t\t\t\t}\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{ ...restProps }\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}\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":["noop","useUniqueId","idProp","instanceId","SelectControl","id","UnforwardedSelectControl","props","ref","className","disabled","help","hideLabelFromVision","label","multiple","onBlur","onChange","onFocus","options","size","value","valueProp","labelPosition","children","prefix","suffix","__next36pxDefaultSize","__nextHasNoMarginBottom","restProps","isFocused","setIsFocused","helpId","undefined","length","handleOnBlur","event","handleOnFocus","handleOnChange","selectedOptions","Array","from","target","filter","selected","newValues","map","classes","option","index","key","hidden"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classNames from 'classnames';\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\tprops: WordPressComponentProps< SelectControlProps, 'select', false >,\n\tref: React.ForwardedRef< HTMLSelectElement >\n) {\n\tconst {\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,\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...restProps\n\t} = props;\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: React.FocusEvent< HTMLSelectElement > ) => {\n\t\tonBlur( event );\n\t\tsetIsFocused( false );\n\t};\n\n\tconst handleOnFocus = ( event: React.FocusEvent< HTMLSelectElement > ) => {\n\t\tonFocus( event );\n\t\tsetIsFocused( true );\n\t};\n\n\tconst handleOnChange = (\n\t\tevent: React.ChangeEvent< HTMLSelectElement >\n\t) => {\n\t\tif ( props.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\tprops.onChange?.( newValues, { event } );\n\t\t\treturn;\n\t\t}\n\n\t\tprops.onChange?.( event.target.value, { event } );\n\t};\n\n\tconst classes = classNames( 'components-select-control', className );\n\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 || ( ! multiple && <SelectControlChevronDown /> )\n\t\t\t\t}\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{ ...restProps }\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\thidden={ option.hidden }\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}\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"]}

package/build/unit-control/index.js

@@ -35,6 +35,8 @@ var _utils = require("./utils");
 
 var _hooks = require("../utils/hooks");
 
+var _strings = require("../utils/strings");
+
 /**
  * External dependencies
  */
@@ -85,9 +87,9 @@ function UnforwardedUnitControl(unitControlProps, forwardedRef) {
     const firstCharacters = rest.reduce((carry, {
       value
     }) => {
-      const first = value?.substring(0, 1) || '';
+      const first = (0, _strings.escapeRegExp)(value?.substring(0, 1) || '');
       return carry.includes(first) ? carry : `${carry}|${first}`;
-    }, firstUnitValue.substring(0, 1));
+    }, (0, _strings.escapeRegExp)(firstUnitValue.substring(0, 1)));
     return [list, new RegExp(`^(?:${firstCharacters})$`, 'i')];
   }, [nonNullValueProp, unitProp, unitsProp]);
   const [parsedQuantity, parsedUnit] = (0, _utils.getParsedQuantityAndUnit)(nonNullValueProp, unitProp, units);

package/build/unit-control/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/unit-control/index.tsx"],"names":["UnforwardedUnitControl","unitControlProps","forwardedRef","__unstableStateReducer","autoComplete","children","className","disabled","disableUnits","isPressEnterToChange","isResetValueOnUnitChange","isUnitSelectTabbable","label","onChange","onChangeProp","onUnitChange","size","unit","unitProp","units","unitsProp","CSS_UNITS","value","valueProp","onFocus","onFocusProp","props","since","hint","version","nonNullValueProp","undefined","reFirstCharacterOfUnits","list","firstUnitValue","rest","firstCharacters","reduce","carry","first","substring","includes","RegExp","parsedQuantity","parsedUnit","setUnit","length","initial","fallback","classes","handleOnQuantityChange","nextQuantityValue","changeProps","onChangeValue","join","handleOnUnitChange","nextUnitValue","data","nextValue","default","handleOnKeyDown","event","onKeyDown","metaKey","test","key","refInputSuffix","current","focus","inputSuffix","onBlur","step","activeUnit","find","option","UnitControl"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { KeyboardEvent, ForwardedRef, SyntheticEvent } from 'react';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\nimport { forwardRef, useMemo, useRef, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../ui/context';\nimport { ValueInput } from './styles/unit-control-styles';\nimport UnitSelectControl from './unit-select-control';\nimport {\n\tCSS_UNITS,\n\tgetParsedQuantityAndUnit,\n\tgetUnitsWithCurrentUnit,\n\tgetValidParsedQuantityAndUnit,\n} from './utils';\nimport { useControlledState } from '../utils/hooks';\nimport type { UnitControlProps, UnitControlOnChangeCallback } from './types';\n\nfunction UnforwardedUnitControl(\n\tunitControlProps: WordPressComponentProps<\n\t\tUnitControlProps,\n\t\t'input',\n\t\tfalse\n\t>,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\t__unstableStateReducer,\n\t\tautoComplete = 'off',\n\t\t// @ts-expect-error Ensure that children is omitted from restProps\n\t\tchildren,\n\t\tclassName,\n\t\tdisabled = false,\n\t\tdisableUnits = false,\n\t\tisPressEnterToChange = false,\n\t\tisResetValueOnUnitChange = false,\n\t\tisUnitSelectTabbable = true,\n\t\tlabel,\n\t\tonChange: onChangeProp,\n\t\tonUnitChange,\n\t\tsize = 'default',\n\t\tunit: unitProp,\n\t\tunits: unitsProp = CSS_UNITS,\n\t\tvalue: valueProp,\n\t\tonFocus: onFocusProp,\n\t\t...props\n\t} = unitControlProps;\n\n\tif ( 'unit' in unitControlProps ) {\n\t\tdeprecated( 'UnitControl unit prop', {\n\t\t\tsince: '5.6',\n\t\t\thint: 'The unit should be provided within the `value` prop.',\n\t\t\tversion: '6.2',\n\t\t} );\n\t}\n\n\t// The `value` prop, in theory, should not be `null`, but the following line\n\t// ensures it fallback to `undefined` in case a consumer of `UnitControl`\n\t// still passes `null` as a `value`.\n\tconst nonNullValueProp = valueProp ?? undefined;\n\tconst [ units, reFirstCharacterOfUnits ] = useMemo( () => {\n\t\tconst list = getUnitsWithCurrentUnit(\n\t\t\tnonNullValueProp,\n\t\t\tunitProp,\n\t\t\tunitsProp\n\t\t);\n\t\tconst [ { value: firstUnitValue = '' } = {}, ...rest ] = list;\n\t\tconst firstCharacters = rest.reduce( ( carry, { value } ) => {\n\t\t\tconst first = value?.substring( 0, 1 ) || '';\n\t\t\treturn carry.includes( first ) ? carry : `${ carry }|${ first }`;\n\t\t}, firstUnitValue.substring( 0, 1 ) );\n\t\treturn [ list, new RegExp( `^(?:${ firstCharacters })$`, 'i' ) ];\n\t}, [ nonNullValueProp, unitProp, unitsProp ] );\n\tconst [ parsedQuantity, parsedUnit ] = getParsedQuantityAndUnit(\n\t\tnonNullValueProp,\n\t\tunitProp,\n\t\tunits\n\t);\n\n\tconst [ unit, setUnit ] = useControlledState< string | undefined >(\n\t\tunits.length === 1 ? units[ 0 ].value : unitProp,\n\t\t{\n\t\t\tinitial: parsedUnit,\n\t\t\tfallback: '',\n\t\t}\n\t);\n\n\tuseEffect( () => {\n\t\tif ( parsedUnit !== undefined ) {\n\t\t\tsetUnit( parsedUnit );\n\t\t}\n\t}, [ parsedUnit, setUnit ] );\n\n\tconst classes = classnames(\n\t\t'components-unit-control',\n\t\t// This class is added for legacy purposes to maintain it on the outer\n\t\t// wrapper. See: https://github.com/WordPress/gutenberg/pull/45139\n\t\t'components-unit-control-wrapper',\n\t\tclassName\n\t);\n\n\tconst handleOnQuantityChange = (\n\t\tnextQuantityValue: number | string | undefined,\n\t\tchangeProps: {\n\t\t\tevent: SyntheticEvent;\n\t\t}\n\t) => {\n\t\tif (\n\t\t\tnextQuantityValue === '' ||\n\t\t\ttypeof nextQuantityValue === 'undefined' ||\n\t\t\tnextQuantityValue === null\n\t\t) {\n\t\t\tonChangeProp?.( '', changeProps );\n\t\t\treturn;\n\t\t}\n\n\t\t/*\n\t\t * Customizing the onChange callback.\n\t\t * This allows as to broadcast a combined value+unit to onChange.\n\t\t */\n\t\tconst onChangeValue = getValidParsedQuantityAndUnit(\n\t\t\tnextQuantityValue,\n\t\t\tunits,\n\t\t\tparsedQuantity,\n\t\t\tunit\n\t\t).join( '' );\n\n\t\tonChangeProp?.( onChangeValue, changeProps );\n\t};\n\n\tconst handleOnUnitChange: UnitControlOnChangeCallback = (\n\t\tnextUnitValue,\n\t\tchangeProps\n\t) => {\n\t\tconst { data } = changeProps;\n\n\t\tlet nextValue = `${ parsedQuantity ?? '' }${ nextUnitValue }`;\n\n\t\tif ( isResetValueOnUnitChange && data?.default !== undefined ) {\n\t\t\tnextValue = `${ data.default }${ nextUnitValue }`;\n\t\t}\n\n\t\tonChangeProp?.( nextValue, changeProps );\n\t\tonUnitChange?.( nextUnitValue, changeProps );\n\n\t\tsetUnit( nextUnitValue );\n\t};\n\n\tlet handleOnKeyDown;\n\tif ( ! disableUnits && isUnitSelectTabbable && units.length ) {\n\t\thandleOnKeyDown = ( event: KeyboardEvent< HTMLInputElement > ) => {\n\t\t\tprops.onKeyDown?.( event );\n\t\t\t// Unless the meta key was pressed (to avoid interfering with\n\t\t\t// shortcuts, e.g. pastes), moves focus to the unit select if a key\n\t\t\t// matches the first character of a unit.\n\t\t\tif ( ! event.metaKey && reFirstCharacterOfUnits.test( event.key ) )\n\t\t\t\trefInputSuffix.current?.focus();\n\t\t};\n\t}\n\n\tconst refInputSuffix = useRef< HTMLSelectElement >( null );\n\tconst inputSuffix = ! disableUnits ? (\n\t\t<UnitSelectControl\n\t\t\tref={ refInputSuffix }\n\t\t\taria-label={ __( 'Select unit' ) }\n\t\t\tdisabled={ disabled }\n\t\t\tisUnitSelectTabbable={ isUnitSelectTabbable }\n\t\t\tonChange={ handleOnUnitChange }\n\t\t\tsize={ size }\n\t\t\tunit={ unit }\n\t\t\tunits={ units }\n\t\t\tonFocus={ onFocusProp }\n\t\t\tonBlur={ unitControlProps.onBlur }\n\t\t/>\n\t) : null;\n\n\tlet step = props.step;\n\n\t/*\n\t * If no step prop has been passed, lookup the active unit and\n\t * try to get step from `units`, or default to a value of `1`\n\t */\n\tif ( ! step && units ) {\n\t\tconst activeUnit = units.find( ( option ) => option.value === unit );\n\t\tstep = activeUnit?.step ?? 1;\n\t}\n\n\treturn (\n\t\t<ValueInput\n\t\t\t{ ...props }\n\t\t\tautoComplete={ autoComplete }\n\t\t\tclassName={ classes }\n\t\t\tdisabled={ disabled }\n\t\t\tspinControls=\"none\"\n\t\t\tisPressEnterToChange={ isPressEnterToChange }\n\t\t\tlabel={ label }\n\t\t\tonKeyDown={ handleOnKeyDown }\n\t\t\tonChange={ handleOnQuantityChange }\n\t\t\tref={ forwardedRef }\n\t\t\tsize={ size }\n\t\t\tsuffix={ inputSuffix }\n\t\t\ttype={ isPressEnterToChange ? 'text' : 'number' }\n\t\t\tvalue={ parsedQuantity ?? '' }\n\t\t\tstep={ step }\n\t\t\tonFocus={ onFocusProp }\n\t\t\t__unstableStateReducer={ __unstableStateReducer }\n\t\t/>\n\t);\n}\n\n/**\n * `UnitControl` allows the user to set a numeric quantity as well as a unit (e.g. `px`).\n *\n *\n * @example\n * ```jsx\n * import { __experimentalUnitControl as UnitControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n *   const [ value, setValue ] = useState( '10px' );\n *\n *   return <UnitControl onChange={ setValue } value={ value } />;\n * };\n * ```\n */\nexport const UnitControl = forwardRef( UnforwardedUnitControl );\n\nexport { parseQuantityAndUnitFromRawValue, useCustomUnits } from './utils';\nexport default UnitControl;\n"]}
+{"version":3,"sources":["@wordpress/components/src/unit-control/index.tsx"],"names":["UnforwardedUnitControl","unitControlProps","forwardedRef","__unstableStateReducer","autoComplete","children","className","disabled","disableUnits","isPressEnterToChange","isResetValueOnUnitChange","isUnitSelectTabbable","label","onChange","onChangeProp","onUnitChange","size","unit","unitProp","units","unitsProp","CSS_UNITS","value","valueProp","onFocus","onFocusProp","props","since","hint","version","nonNullValueProp","undefined","reFirstCharacterOfUnits","list","firstUnitValue","rest","firstCharacters","reduce","carry","first","substring","includes","RegExp","parsedQuantity","parsedUnit","setUnit","length","initial","fallback","classes","handleOnQuantityChange","nextQuantityValue","changeProps","onChangeValue","join","handleOnUnitChange","nextUnitValue","data","nextValue","default","handleOnKeyDown","event","onKeyDown","metaKey","test","key","refInputSuffix","current","focus","inputSuffix","onBlur","step","activeUnit","find","option","UnitControl"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { KeyboardEvent, ForwardedRef, SyntheticEvent } from 'react';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\nimport { forwardRef, useMemo, useRef, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../ui/context';\nimport { ValueInput } from './styles/unit-control-styles';\nimport UnitSelectControl from './unit-select-control';\nimport {\n\tCSS_UNITS,\n\tgetParsedQuantityAndUnit,\n\tgetUnitsWithCurrentUnit,\n\tgetValidParsedQuantityAndUnit,\n} from './utils';\nimport { useControlledState } from '../utils/hooks';\nimport { escapeRegExp } from '../utils/strings';\nimport type { UnitControlProps, UnitControlOnChangeCallback } from './types';\n\nfunction UnforwardedUnitControl(\n\tunitControlProps: WordPressComponentProps<\n\t\tUnitControlProps,\n\t\t'input',\n\t\tfalse\n\t>,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\t__unstableStateReducer,\n\t\tautoComplete = 'off',\n\t\t// @ts-expect-error Ensure that children is omitted from restProps\n\t\tchildren,\n\t\tclassName,\n\t\tdisabled = false,\n\t\tdisableUnits = false,\n\t\tisPressEnterToChange = false,\n\t\tisResetValueOnUnitChange = false,\n\t\tisUnitSelectTabbable = true,\n\t\tlabel,\n\t\tonChange: onChangeProp,\n\t\tonUnitChange,\n\t\tsize = 'default',\n\t\tunit: unitProp,\n\t\tunits: unitsProp = CSS_UNITS,\n\t\tvalue: valueProp,\n\t\tonFocus: onFocusProp,\n\t\t...props\n\t} = unitControlProps;\n\n\tif ( 'unit' in unitControlProps ) {\n\t\tdeprecated( 'UnitControl unit prop', {\n\t\t\tsince: '5.6',\n\t\t\thint: 'The unit should be provided within the `value` prop.',\n\t\t\tversion: '6.2',\n\t\t} );\n\t}\n\n\t// The `value` prop, in theory, should not be `null`, but the following line\n\t// ensures it fallback to `undefined` in case a consumer of `UnitControl`\n\t// still passes `null` as a `value`.\n\tconst nonNullValueProp = valueProp ?? undefined;\n\tconst [ units, reFirstCharacterOfUnits ] = useMemo( () => {\n\t\tconst list = getUnitsWithCurrentUnit(\n\t\t\tnonNullValueProp,\n\t\t\tunitProp,\n\t\t\tunitsProp\n\t\t);\n\t\tconst [ { value: firstUnitValue = '' } = {}, ...rest ] = list;\n\t\tconst firstCharacters = rest.reduce( ( carry, { value } ) => {\n\t\t\tconst first = escapeRegExp( value?.substring( 0, 1 ) || '' );\n\t\t\treturn carry.includes( first ) ? carry : `${ carry }|${ first }`;\n\t\t}, escapeRegExp( firstUnitValue.substring( 0, 1 ) ) );\n\t\treturn [ list, new RegExp( `^(?:${ firstCharacters })$`, 'i' ) ];\n\t}, [ nonNullValueProp, unitProp, unitsProp ] );\n\tconst [ parsedQuantity, parsedUnit ] = getParsedQuantityAndUnit(\n\t\tnonNullValueProp,\n\t\tunitProp,\n\t\tunits\n\t);\n\n\tconst [ unit, setUnit ] = useControlledState< string | undefined >(\n\t\tunits.length === 1 ? units[ 0 ].value : unitProp,\n\t\t{\n\t\t\tinitial: parsedUnit,\n\t\t\tfallback: '',\n\t\t}\n\t);\n\n\tuseEffect( () => {\n\t\tif ( parsedUnit !== undefined ) {\n\t\t\tsetUnit( parsedUnit );\n\t\t}\n\t}, [ parsedUnit, setUnit ] );\n\n\tconst classes = classnames(\n\t\t'components-unit-control',\n\t\t// This class is added for legacy purposes to maintain it on the outer\n\t\t// wrapper. See: https://github.com/WordPress/gutenberg/pull/45139\n\t\t'components-unit-control-wrapper',\n\t\tclassName\n\t);\n\n\tconst handleOnQuantityChange = (\n\t\tnextQuantityValue: number | string | undefined,\n\t\tchangeProps: {\n\t\t\tevent: SyntheticEvent;\n\t\t}\n\t) => {\n\t\tif (\n\t\t\tnextQuantityValue === '' ||\n\t\t\ttypeof nextQuantityValue === 'undefined' ||\n\t\t\tnextQuantityValue === null\n\t\t) {\n\t\t\tonChangeProp?.( '', changeProps );\n\t\t\treturn;\n\t\t}\n\n\t\t/*\n\t\t * Customizing the onChange callback.\n\t\t * This allows as to broadcast a combined value+unit to onChange.\n\t\t */\n\t\tconst onChangeValue = getValidParsedQuantityAndUnit(\n\t\t\tnextQuantityValue,\n\t\t\tunits,\n\t\t\tparsedQuantity,\n\t\t\tunit\n\t\t).join( '' );\n\n\t\tonChangeProp?.( onChangeValue, changeProps );\n\t};\n\n\tconst handleOnUnitChange: UnitControlOnChangeCallback = (\n\t\tnextUnitValue,\n\t\tchangeProps\n\t) => {\n\t\tconst { data } = changeProps;\n\n\t\tlet nextValue = `${ parsedQuantity ?? '' }${ nextUnitValue }`;\n\n\t\tif ( isResetValueOnUnitChange && data?.default !== undefined ) {\n\t\t\tnextValue = `${ data.default }${ nextUnitValue }`;\n\t\t}\n\n\t\tonChangeProp?.( nextValue, changeProps );\n\t\tonUnitChange?.( nextUnitValue, changeProps );\n\n\t\tsetUnit( nextUnitValue );\n\t};\n\n\tlet handleOnKeyDown;\n\tif ( ! disableUnits && isUnitSelectTabbable && units.length ) {\n\t\thandleOnKeyDown = ( event: KeyboardEvent< HTMLInputElement > ) => {\n\t\t\tprops.onKeyDown?.( event );\n\t\t\t// Unless the meta key was pressed (to avoid interfering with\n\t\t\t// shortcuts, e.g. pastes), moves focus to the unit select if a key\n\t\t\t// matches the first character of a unit.\n\t\t\tif ( ! event.metaKey && reFirstCharacterOfUnits.test( event.key ) )\n\t\t\t\trefInputSuffix.current?.focus();\n\t\t};\n\t}\n\n\tconst refInputSuffix = useRef< HTMLSelectElement >( null );\n\tconst inputSuffix = ! disableUnits ? (\n\t\t<UnitSelectControl\n\t\t\tref={ refInputSuffix }\n\t\t\taria-label={ __( 'Select unit' ) }\n\t\t\tdisabled={ disabled }\n\t\t\tisUnitSelectTabbable={ isUnitSelectTabbable }\n\t\t\tonChange={ handleOnUnitChange }\n\t\t\tsize={ size }\n\t\t\tunit={ unit }\n\t\t\tunits={ units }\n\t\t\tonFocus={ onFocusProp }\n\t\t\tonBlur={ unitControlProps.onBlur }\n\t\t/>\n\t) : null;\n\n\tlet step = props.step;\n\n\t/*\n\t * If no step prop has been passed, lookup the active unit and\n\t * try to get step from `units`, or default to a value of `1`\n\t */\n\tif ( ! step && units ) {\n\t\tconst activeUnit = units.find( ( option ) => option.value === unit );\n\t\tstep = activeUnit?.step ?? 1;\n\t}\n\n\treturn (\n\t\t<ValueInput\n\t\t\t{ ...props }\n\t\t\tautoComplete={ autoComplete }\n\t\t\tclassName={ classes }\n\t\t\tdisabled={ disabled }\n\t\t\tspinControls=\"none\"\n\t\t\tisPressEnterToChange={ isPressEnterToChange }\n\t\t\tlabel={ label }\n\t\t\tonKeyDown={ handleOnKeyDown }\n\t\t\tonChange={ handleOnQuantityChange }\n\t\t\tref={ forwardedRef }\n\t\t\tsize={ size }\n\t\t\tsuffix={ inputSuffix }\n\t\t\ttype={ isPressEnterToChange ? 'text' : 'number' }\n\t\t\tvalue={ parsedQuantity ?? '' }\n\t\t\tstep={ step }\n\t\t\tonFocus={ onFocusProp }\n\t\t\t__unstableStateReducer={ __unstableStateReducer }\n\t\t/>\n\t);\n}\n\n/**\n * `UnitControl` allows the user to set a numeric quantity as well as a unit (e.g. `px`).\n *\n *\n * @example\n * ```jsx\n * import { __experimentalUnitControl as UnitControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n *   const [ value, setValue ] = useState( '10px' );\n *\n *   return <UnitControl onChange={ setValue } value={ value } />;\n * };\n * ```\n */\nexport const UnitControl = forwardRef( UnforwardedUnitControl );\n\nexport { parseQuantityAndUnitFromRawValue, useCustomUnits } from './utils';\nexport default UnitControl;\n"]}

package/build/z-stack/component.js

@@ -36,11 +36,12 @@ function UnconnectedZStack(props, forwardedRef) {
   const validChildren = (0, _getValidChildren.getValidChildren)(children);
   const childrenLastIndex = validChildren.length - 1;
   const clonedChildren = validChildren.map((child, index) => {
-    const zIndex = isReversed ? childrenLastIndex - index : index;
-    const offsetAmount = offset * index;
+    const zIndex = isReversed ? childrenLastIndex - index : index; // Only when the component is layered, the offset needs to be multiplied by
+    // the item's index, so that items can correctly stack at the right distance
+
+    const offsetAmount = isLayered ? offset * index : offset;
     const key = (0, _element.isValidElement)(child) ? child.key : index;
     return (0, _element.createElement)(_styles.ZStackChildView, {
-      isLayered: isLayered,
       offsetAmount: offsetAmount,
       zIndex: zIndex,
       key: key
@@ -48,6 +49,7 @@ function UnconnectedZStack(props, forwardedRef) {
   });
   return (0, _element.createElement)(_styles.ZStackView, { ...otherProps,
     className: className,
+    isLayered: isLayered,
     ref: forwardedRef
   }, clonedChildren);
 }

package/build/z-stack/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/z-stack/component.tsx"],"names":["UnconnectedZStack","props","forwardedRef","children","className","isLayered","isReversed","offset","otherProps","validChildren","childrenLastIndex","length","clonedChildren","map","child","index","zIndex","offsetAmount","key","ZStack"],"mappings":";;;;;;;AAQA;;AAKA;;AACA;;AACA;;AAfA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAOA,SAASA,iBAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAM;AACLC,IAAAA,QADK;AAELC,IAAAA,SAFK;AAGLC,IAAAA,SAAS,GAAG,IAHP;AAILC,IAAAA,UAAU,GAAG,KAJR;AAKLC,IAAAA,MAAM,GAAG,CALJ;AAML,OAAGC;AANE,MAOF,+BAAkBP,KAAlB,EAAyB,QAAzB,CAPJ;AASA,QAAMQ,aAAa,GAAG,wCAAkBN,QAAlB,CAAtB;AACA,QAAMO,iBAAiB,GAAGD,aAAa,CAACE,MAAd,GAAuB,CAAjD;AAEA,QAAMC,cAAc,GAAGH,aAAa,CAACI,GAAd,CAAmB,CAAEC,KAAF,EAASC,KAAT,KAAoB;AAC7D,UAAMC,MAAM,GAAGV,UAAU,GAAGI,iBAAiB,GAAGK,KAAvB,GAA+BA,KAAxD;AACA,UAAME,YAAY,GAAGV,MAAM,GAAGQ,KAA9B;AAEA,UAAMG,GAAG,GAAG,6BAAgBJ,KAAhB,IAA0BA,KAAK,CAACI,GAAhC,GAAsCH,KAAlD;AAEA,WACC,4BAAC,uBAAD;AACC,MAAA,SAAS,EAAGV,SADb;AAEC,MAAA,YAAY,EAAGY,YAFhB;AAGC,MAAA,MAAM,EAAGD,MAHV;AAIC,MAAA,GAAG,EAAGE;AAJP,OAMGJ,KANH,CADD;AAUA,GAhBsB,CAAvB;AAkBA,SACC,4BAAC,kBAAD,OACMN,UADN;AAEC,IAAA,SAAS,EAAGJ,SAFb;AAGC,IAAA,GAAG,EAAGF;AAHP,KAKGU,cALH,CADD;AASA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAMO,MAAM,GAAG,6BAAgBnB,iBAAhB,EAAmC,QAAnC,CAAf;;eAEQmB,M","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { isValidElement } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { getValidChildren } from '../ui/utils/get-valid-children';\nimport { contextConnect, useContextSystem } from '../ui/context';\nimport { ZStackView, ZStackChildView } from './styles';\nimport type { ZStackProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nfunction UnconnectedZStack(\n\tprops: WordPressComponentProps< ZStackProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tchildren,\n\t\tclassName,\n\t\tisLayered = true,\n\t\tisReversed = false,\n\t\toffset = 0,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ZStack' );\n\n\tconst validChildren = getValidChildren( children );\n\tconst childrenLastIndex = validChildren.length - 1;\n\n\tconst clonedChildren = validChildren.map( ( child, index ) => {\n\t\tconst zIndex = isReversed ? childrenLastIndex - index : index;\n\t\tconst offsetAmount = offset * index;\n\n\t\tconst key = isValidElement( child ) ? child.key : index;\n\n\t\treturn (\n\t\t\t<ZStackChildView\n\t\t\t\tisLayered={ isLayered }\n\t\t\t\toffsetAmount={ offsetAmount }\n\t\t\t\tzIndex={ zIndex }\n\t\t\t\tkey={ key }\n\t\t\t>\n\t\t\t\t{ child }\n\t\t\t</ZStackChildView>\n\t\t);\n\t} );\n\n\treturn (\n\t\t<ZStackView\n\t\t\t{ ...otherProps }\n\t\t\tclassName={ className }\n\t\t\tref={ forwardedRef }\n\t\t>\n\t\t\t{ clonedChildren }\n\t\t</ZStackView>\n\t);\n}\n\n/**\n * `ZStack` allows you to stack things along the Z-axis.\n *\n * ```jsx\n * import { __experimentalZStack as ZStack } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ZStack offset={ 20 } isLayered>\n *       <ExampleImage />\n *       <ExampleImage />\n *       <ExampleImage />\n *     </ZStack>\n *   );\n * }\n * ```\n */\nexport const ZStack = contextConnect( UnconnectedZStack, 'ZStack' );\n\nexport default ZStack;\n"]}
+{"version":3,"sources":["@wordpress/components/src/z-stack/component.tsx"],"names":["UnconnectedZStack","props","forwardedRef","children","className","isLayered","isReversed","offset","otherProps","validChildren","childrenLastIndex","length","clonedChildren","map","child","index","zIndex","offsetAmount","key","ZStack"],"mappings":";;;;;;;AAQA;;AAKA;;AACA;;AACA;;AAfA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAOA,SAASA,iBAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAM;AACLC,IAAAA,QADK;AAELC,IAAAA,SAFK;AAGLC,IAAAA,SAAS,GAAG,IAHP;AAILC,IAAAA,UAAU,GAAG,KAJR;AAKLC,IAAAA,MAAM,GAAG,CALJ;AAML,OAAGC;AANE,MAOF,+BAAkBP,KAAlB,EAAyB,QAAzB,CAPJ;AASA,QAAMQ,aAAa,GAAG,wCAAkBN,QAAlB,CAAtB;AACA,QAAMO,iBAAiB,GAAGD,aAAa,CAACE,MAAd,GAAuB,CAAjD;AAEA,QAAMC,cAAc,GAAGH,aAAa,CAACI,GAAd,CAAmB,CAAEC,KAAF,EAASC,KAAT,KAAoB;AAC7D,UAAMC,MAAM,GAAGV,UAAU,GAAGI,iBAAiB,GAAGK,KAAvB,GAA+BA,KAAxD,CAD6D,CAE7D;AACA;;AACA,UAAME,YAAY,GAAGZ,SAAS,GAAGE,MAAM,GAAGQ,KAAZ,GAAoBR,MAAlD;AAEA,UAAMW,GAAG,GAAG,6BAAgBJ,KAAhB,IAA0BA,KAAK,CAACI,GAAhC,GAAsCH,KAAlD;AAEA,WACC,4BAAC,uBAAD;AACC,MAAA,YAAY,EAAGE,YADhB;AAEC,MAAA,MAAM,EAAGD,MAFV;AAGC,MAAA,GAAG,EAAGE;AAHP,OAKGJ,KALH,CADD;AASA,GAjBsB,CAAvB;AAmBA,SACC,4BAAC,kBAAD,OACMN,UADN;AAEC,IAAA,SAAS,EAAGJ,SAFb;AAGC,IAAA,SAAS,EAAGC,SAHb;AAIC,IAAA,GAAG,EAAGH;AAJP,KAMGU,cANH,CADD;AAUA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAMO,MAAM,GAAG,6BAAgBnB,iBAAhB,EAAmC,QAAnC,CAAf;;eAEQmB,M","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { isValidElement } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { getValidChildren } from '../ui/utils/get-valid-children';\nimport { contextConnect, useContextSystem } from '../ui/context';\nimport { ZStackView, ZStackChildView } from './styles';\nimport type { ZStackProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nfunction UnconnectedZStack(\n\tprops: WordPressComponentProps< ZStackProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tchildren,\n\t\tclassName,\n\t\tisLayered = true,\n\t\tisReversed = false,\n\t\toffset = 0,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ZStack' );\n\n\tconst validChildren = getValidChildren( children );\n\tconst childrenLastIndex = validChildren.length - 1;\n\n\tconst clonedChildren = validChildren.map( ( child, index ) => {\n\t\tconst zIndex = isReversed ? childrenLastIndex - index : index;\n\t\t// Only when the component is layered, the offset needs to be multiplied by\n\t\t// the item's index, so that items can correctly stack at the right distance\n\t\tconst offsetAmount = isLayered ? offset * index : offset;\n\n\t\tconst key = isValidElement( child ) ? child.key : index;\n\n\t\treturn (\n\t\t\t<ZStackChildView\n\t\t\t\toffsetAmount={ offsetAmount }\n\t\t\t\tzIndex={ zIndex }\n\t\t\t\tkey={ key }\n\t\t\t>\n\t\t\t\t{ child }\n\t\t\t</ZStackChildView>\n\t\t);\n\t} );\n\n\treturn (\n\t\t<ZStackView\n\t\t\t{ ...otherProps }\n\t\t\tclassName={ className }\n\t\t\tisLayered={ isLayered }\n\t\t\tref={ forwardedRef }\n\t\t>\n\t\t\t{ clonedChildren }\n\t\t</ZStackView>\n\t);\n}\n\n/**\n * `ZStack` allows you to stack things along the Z-axis.\n *\n * ```jsx\n * import { __experimentalZStack as ZStack } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ZStack offset={ 20 } isLayered>\n *       <ExampleImage />\n *       <ExampleImage />\n *       <ExampleImage />\n *     </ZStack>\n *   );\n * }\n * ```\n */\nexport const ZStack = contextConnect( UnconnectedZStack, 'ZStack' );\n\nexport default ZStack;\n"]}

package/build/z-stack/styles.js

@@ -11,61 +11,42 @@ var _base = _interopRequireDefault(require("@emotion/styled/base"));
 
 var _react = require("@emotion/react");
 
-var _utils = require("../utils");
-
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
-const ZStackView = (0, _base.default)("div", process.env.NODE_ENV === "production" ? {
+const ZStackChildView = (0, _base.default)("div", process.env.NODE_ENV === "production" ? {
   target: "ebn2ljm1"
 } : {
   target: "ebn2ljm1",
-  label: "ZStackView"
-})(process.env.NODE_ENV === "production" ? {
-  name: "5ob2ly",
-  styles: "display:flex;position:relative"
-} : {
-  name: "5ob2ly",
-  styles: "display:flex;position:relative",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvei1zdGFjay9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBV29DIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvei1zdGFjay9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IHJ0bCB9IGZyb20gJy4uL3V0aWxzJztcblxuZXhwb3J0IGNvbnN0IFpTdGFja1ZpZXcgPSBzdHlsZWQuZGl2YFxuXHRkaXNwbGF5OiBmbGV4O1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5gO1xuXG5leHBvcnQgY29uc3QgWlN0YWNrQ2hpbGRWaWV3ID0gc3R5bGVkLmRpdjwge1xuXHRpc0xheWVyZWQ6IGJvb2xlYW47XG5cdG9mZnNldEFtb3VudDogbnVtYmVyO1xuXHR6SW5kZXg6IG51bWJlcjtcbn0gPmBcblx0JHsgKCB7IGlzTGF5ZXJlZCwgb2Zmc2V0QW1vdW50IH0gKSA9PlxuXHRcdGlzTGF5ZXJlZFxuXHRcdFx0PyBjc3MoIHJ0bCggeyBtYXJnaW5MZWZ0OiBvZmZzZXRBbW91bnQgfSApKCkgKVxuXHRcdFx0OiBjc3MoIHJ0bCggeyByaWdodDogb2Zmc2V0QW1vdW50ICogLTEgfSApKCkgKSB9XG5cblx0JHsgKCB7IGlzTGF5ZXJlZCB9ICkgPT5cblx0XHRpc0xheWVyZWQgPyBwb3NpdGlvbkFic29sdXRlIDogcG9zaXRpb25SZWxhdGl2ZSB9XG5cblx0JHsgKCB7IHpJbmRleCB9ICkgPT4gY3NzKCB7IHpJbmRleCB9ICkgfVxuYDtcblxuY29uc3QgcG9zaXRpb25BYnNvbHV0ZSA9IGNzc2Bcblx0cG9zaXRpb246IGFic29sdXRlO1xuYDtcblxuY29uc3QgcG9zaXRpb25SZWxhdGl2ZSA9IGNzc2Bcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuYDtcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-exports.ZStackView = ZStackView;
-const ZStackChildView = (0, _base.default)("div", process.env.NODE_ENV === "production" ? {
-  target: "ebn2ljm0"
-} : {
-  target: "ebn2ljm0",
   label: "ZStackChildView"
-})(({
-  isLayered,
+})("&:not( :first-of-type ){", ({
   offsetAmount
-}) => isLayered ? /*#__PURE__*/(0, _react.css)((0, _utils.rtl)({
-  marginLeft: offsetAmount
-})(), process.env.NODE_ENV === "production" ? "" : ";label:ZStackChildView;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvei1zdGFjay9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBdUJLIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvei1zdGFjay9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IHJ0bCB9IGZyb20gJy4uL3V0aWxzJztcblxuZXhwb3J0IGNvbnN0IFpTdGFja1ZpZXcgPSBzdHlsZWQuZGl2YFxuXHRkaXNwbGF5OiBmbGV4O1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5gO1xuXG5leHBvcnQgY29uc3QgWlN0YWNrQ2hpbGRWaWV3ID0gc3R5bGVkLmRpdjwge1xuXHRpc0xheWVyZWQ6IGJvb2xlYW47XG5cdG9mZnNldEFtb3VudDogbnVtYmVyO1xuXHR6SW5kZXg6IG51bWJlcjtcbn0gPmBcblx0JHsgKCB7IGlzTGF5ZXJlZCwgb2Zmc2V0QW1vdW50IH0gKSA9PlxuXHRcdGlzTGF5ZXJlZFxuXHRcdFx0PyBjc3MoIHJ0bCggeyBtYXJnaW5MZWZ0OiBvZmZzZXRBbW91bnQgfSApKCkgKVxuXHRcdFx0OiBjc3MoIHJ0bCggeyByaWdodDogb2Zmc2V0QW1vdW50ICogLTEgfSApKCkgKSB9XG5cblx0JHsgKCB7IGlzTGF5ZXJlZCB9ICkgPT5cblx0XHRpc0xheWVyZWQgPyBwb3NpdGlvbkFic29sdXRlIDogcG9zaXRpb25SZWxhdGl2ZSB9XG5cblx0JHsgKCB7IHpJbmRleCB9ICkgPT4gY3NzKCB7IHpJbmRleCB9ICkgfVxuYDtcblxuY29uc3QgcG9zaXRpb25BYnNvbHV0ZSA9IGNzc2Bcblx0cG9zaXRpb246IGFic29sdXRlO1xuYDtcblxuY29uc3QgcG9zaXRpb25SZWxhdGl2ZSA9IGNzc2Bcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuYDtcbiJdfQ== */") : /*#__PURE__*/(0, _react.css)((0, _utils.rtl)({
-  right: offsetAmount * -1
-})(), process.env.NODE_ENV === "production" ? "" : ";label:ZStackChildView;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvei1zdGFjay9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0JLIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvei1zdGFjay9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IHJ0bCB9IGZyb20gJy4uL3V0aWxzJztcblxuZXhwb3J0IGNvbnN0IFpTdGFja1ZpZXcgPSBzdHlsZWQuZGl2YFxuXHRkaXNwbGF5OiBmbGV4O1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5gO1xuXG5leHBvcnQgY29uc3QgWlN0YWNrQ2hpbGRWaWV3ID0gc3R5bGVkLmRpdjwge1xuXHRpc0xheWVyZWQ6IGJvb2xlYW47XG5cdG9mZnNldEFtb3VudDogbnVtYmVyO1xuXHR6SW5kZXg6IG51bWJlcjtcbn0gPmBcblx0JHsgKCB7IGlzTGF5ZXJlZCwgb2Zmc2V0QW1vdW50IH0gKSA9PlxuXHRcdGlzTGF5ZXJlZFxuXHRcdFx0PyBjc3MoIHJ0bCggeyBtYXJnaW5MZWZ0OiBvZmZzZXRBbW91bnQgfSApKCkgKVxuXHRcdFx0OiBjc3MoIHJ0bCggeyByaWdodDogb2Zmc2V0QW1vdW50ICogLTEgfSApKCkgKSB9XG5cblx0JHsgKCB7IGlzTGF5ZXJlZCB9ICkgPT5cblx0XHRpc0xheWVyZWQgPyBwb3NpdGlvbkFic29sdXRlIDogcG9zaXRpb25SZWxhdGl2ZSB9XG5cblx0JHsgKCB7IHpJbmRleCB9ICkgPT4gY3NzKCB7IHpJbmRleCB9ICkgfVxuYDtcblxuY29uc3QgcG9zaXRpb25BYnNvbHV0ZSA9IGNzc2Bcblx0cG9zaXRpb246IGFic29sdXRlO1xuYDtcblxuY29uc3QgcG9zaXRpb25SZWxhdGl2ZSA9IGNzc2Bcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuYDtcbiJdfQ== */"), " ", ({
-  isLayered
-}) => isLayered ? positionAbsolute : positionRelative, " ", ({
+}) => /*#__PURE__*/(0, _react.css)({
+  marginInlineStart: offsetAmount
+}, process.env.NODE_ENV === "production" ? "" : ";label:ZStackChildView;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvei1zdGFjay9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBWUciLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy96LXN0YWNrL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuZXhwb3J0IGNvbnN0IFpTdGFja0NoaWxkVmlldyA9IHN0eWxlZC5kaXY8IHtcblx0b2Zmc2V0QW1vdW50OiBudW1iZXI7XG5cdHpJbmRleDogbnVtYmVyO1xufSA+YFxuXHQmOm5vdCggOmZpcnN0LW9mLXR5cGUgKSB7XG5cdFx0JHsgKCB7IG9mZnNldEFtb3VudCB9ICkgPT5cblx0XHRcdGNzcygge1xuXHRcdFx0XHRtYXJnaW5JbmxpbmVTdGFydDogb2Zmc2V0QW1vdW50LFxuXHRcdFx0fSApIH07XG5cdH1cblxuXHQkeyAoIHsgekluZGV4IH0gKSA9PiBjc3MoIHsgekluZGV4IH0gKSB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IFpTdGFja1ZpZXcgPSBzdHlsZWQuZGl2PCB7XG5cdGlzTGF5ZXJlZDogYm9vbGVhbjtcbn0gPmBcblx0ZGlzcGxheTogaW5saW5lLWdyaWQ7XG5cdGdyaWQtYXV0by1mbG93OiBjb2x1bW47XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblxuXHQmID4gJHsgWlN0YWNrQ2hpbGRWaWV3IH0ge1xuXHRcdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0XHRqdXN0aWZ5LXNlbGY6IHN0YXJ0O1xuXG5cdFx0JHsgKCB7IGlzTGF5ZXJlZCB9ICkgPT5cblx0XHRcdGlzTGF5ZXJlZFxuXHRcdFx0XHQ/IC8vIFdoZW4gYGlzTGF5ZXJlZGAgaXMgdHJ1ZSwgYWxsIGl0ZW1zIG92ZXJsYXAgaW4gdGhlIHNhbWUgZ3JpZCBjZWxsXG5cdFx0XHRcdCAgY3NzKCB7IGdyaWRSb3dTdGFydDogMSwgZ3JpZENvbHVtblN0YXJ0OiAxIH0gKVxuXHRcdFx0XHQ6IHVuZGVmaW5lZCB9O1xuXHR9XG5gO1xuIl19 */"), ";}", ({
   zIndex
 }) => /*#__PURE__*/(0, _react.css)({
   zIndex
-}, process.env.NODE_ENV === "production" ? "" : ";label:ZStackChildView;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvei1zdGFjay9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNkJzQiIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3otc3RhY2svc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBydGwgfSBmcm9tICcuLi91dGlscyc7XG5cbmV4cG9ydCBjb25zdCBaU3RhY2tWaWV3ID0gc3R5bGVkLmRpdmBcblx0ZGlzcGxheTogZmxleDtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuYDtcblxuZXhwb3J0IGNvbnN0IFpTdGFja0NoaWxkVmlldyA9IHN0eWxlZC5kaXY8IHtcblx0aXNMYXllcmVkOiBib29sZWFuO1xuXHRvZmZzZXRBbW91bnQ6IG51bWJlcjtcblx0ekluZGV4OiBudW1iZXI7XG59ID5gXG5cdCR7ICggeyBpc0xheWVyZWQsIG9mZnNldEFtb3VudCB9ICkgPT5cblx0XHRpc0xheWVyZWRcblx0XHRcdD8gY3NzKCBydGwoIHsgbWFyZ2luTGVmdDogb2Zmc2V0QW1vdW50IH0gKSgpIClcblx0XHRcdDogY3NzKCBydGwoIHsgcmlnaHQ6IG9mZnNldEFtb3VudCAqIC0xIH0gKSgpICkgfVxuXG5cdCR7ICggeyBpc0xheWVyZWQgfSApID0+XG5cdFx0aXNMYXllcmVkID8gcG9zaXRpb25BYnNvbHV0ZSA6IHBvc2l0aW9uUmVsYXRpdmUgfVxuXG5cdCR7ICggeyB6SW5kZXggfSApID0+IGNzcyggeyB6SW5kZXggfSApIH1cbmA7XG5cbmNvbnN0IHBvc2l0aW9uQWJzb2x1dGUgPSBjc3NgXG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcbmA7XG5cbmNvbnN0IHBvc2l0aW9uUmVsYXRpdmUgPSBjc3NgXG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcbmA7XG4iXX0= */"), ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvei1zdGFjay9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0JHIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvei1zdGFjay9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IHJ0bCB9IGZyb20gJy4uL3V0aWxzJztcblxuZXhwb3J0IGNvbnN0IFpTdGFja1ZpZXcgPSBzdHlsZWQuZGl2YFxuXHRkaXNwbGF5OiBmbGV4O1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5gO1xuXG5leHBvcnQgY29uc3QgWlN0YWNrQ2hpbGRWaWV3ID0gc3R5bGVkLmRpdjwge1xuXHRpc0xheWVyZWQ6IGJvb2xlYW47XG5cdG9mZnNldEFtb3VudDogbnVtYmVyO1xuXHR6SW5kZXg6IG51bWJlcjtcbn0gPmBcblx0JHsgKCB7IGlzTGF5ZXJlZCwgb2Zmc2V0QW1vdW50IH0gKSA9PlxuXHRcdGlzTGF5ZXJlZFxuXHRcdFx0PyBjc3MoIHJ0bCggeyBtYXJnaW5MZWZ0OiBvZmZzZXRBbW91bnQgfSApKCkgKVxuXHRcdFx0OiBjc3MoIHJ0bCggeyByaWdodDogb2Zmc2V0QW1vdW50ICogLTEgfSApKCkgKSB9XG5cblx0JHsgKCB7IGlzTGF5ZXJlZCB9ICkgPT5cblx0XHRpc0xheWVyZWQgPyBwb3NpdGlvbkFic29sdXRlIDogcG9zaXRpb25SZWxhdGl2ZSB9XG5cblx0JHsgKCB7IHpJbmRleCB9ICkgPT4gY3NzKCB7IHpJbmRleCB9ICkgfVxuYDtcblxuY29uc3QgcG9zaXRpb25BYnNvbHV0ZSA9IGNzc2Bcblx0cG9zaXRpb246IGFic29sdXRlO1xuYDtcblxuY29uc3QgcG9zaXRpb25SZWxhdGl2ZSA9IGNzc2Bcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuYDtcbiJdfQ== */"));
+}, process.env.NODE_ENV === "production" ? "" : ";label:ZStackChildView;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvei1zdGFjay9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUJzQiIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3otc3RhY2svc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG5leHBvcnQgY29uc3QgWlN0YWNrQ2hpbGRWaWV3ID0gc3R5bGVkLmRpdjwge1xuXHRvZmZzZXRBbW91bnQ6IG51bWJlcjtcblx0ekluZGV4OiBudW1iZXI7XG59ID5gXG5cdCY6bm90KCA6Zmlyc3Qtb2YtdHlwZSApIHtcblx0XHQkeyAoIHsgb2Zmc2V0QW1vdW50IH0gKSA9PlxuXHRcdFx0Y3NzKCB7XG5cdFx0XHRcdG1hcmdpbklubGluZVN0YXJ0OiBvZmZzZXRBbW91bnQsXG5cdFx0XHR9ICkgfTtcblx0fVxuXG5cdCR7ICggeyB6SW5kZXggfSApID0+IGNzcyggeyB6SW5kZXggfSApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgWlN0YWNrVmlldyA9IHN0eWxlZC5kaXY8IHtcblx0aXNMYXllcmVkOiBib29sZWFuO1xufSA+YFxuXHRkaXNwbGF5OiBpbmxpbmUtZ3JpZDtcblx0Z3JpZC1hdXRvLWZsb3c6IGNvbHVtbjtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXG5cdCYgPiAkeyBaU3RhY2tDaGlsZFZpZXcgfSB7XG5cdFx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRcdGp1c3RpZnktc2VsZjogc3RhcnQ7XG5cblx0XHQkeyAoIHsgaXNMYXllcmVkIH0gKSA9PlxuXHRcdFx0aXNMYXllcmVkXG5cdFx0XHRcdD8gLy8gV2hlbiBgaXNMYXllcmVkYCBpcyB0cnVlLCBhbGwgaXRlbXMgb3ZlcmxhcCBpbiB0aGUgc2FtZSBncmlkIGNlbGxcblx0XHRcdFx0ICBjc3MoIHsgZ3JpZFJvd1N0YXJ0OiAxLCBncmlkQ29sdW1uU3RhcnQ6IDEgfSApXG5cdFx0XHRcdDogdW5kZWZpbmVkIH07XG5cdH1cbmA7XG4iXX0= */"), ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvei1zdGFjay9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBU0ciLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy96LXN0YWNrL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuZXhwb3J0IGNvbnN0IFpTdGFja0NoaWxkVmlldyA9IHN0eWxlZC5kaXY8IHtcblx0b2Zmc2V0QW1vdW50OiBudW1iZXI7XG5cdHpJbmRleDogbnVtYmVyO1xufSA+YFxuXHQmOm5vdCggOmZpcnN0LW9mLXR5cGUgKSB7XG5cdFx0JHsgKCB7IG9mZnNldEFtb3VudCB9ICkgPT5cblx0XHRcdGNzcygge1xuXHRcdFx0XHRtYXJnaW5JbmxpbmVTdGFydDogb2Zmc2V0QW1vdW50LFxuXHRcdFx0fSApIH07XG5cdH1cblxuXHQkeyAoIHsgekluZGV4IH0gKSA9PiBjc3MoIHsgekluZGV4IH0gKSB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IFpTdGFja1ZpZXcgPSBzdHlsZWQuZGl2PCB7XG5cdGlzTGF5ZXJlZDogYm9vbGVhbjtcbn0gPmBcblx0ZGlzcGxheTogaW5saW5lLWdyaWQ7XG5cdGdyaWQtYXV0by1mbG93OiBjb2x1bW47XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblxuXHQmID4gJHsgWlN0YWNrQ2hpbGRWaWV3IH0ge1xuXHRcdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0XHRqdXN0aWZ5LXNlbGY6IHN0YXJ0O1xuXG5cdFx0JHsgKCB7IGlzTGF5ZXJlZCB9ICkgPT5cblx0XHRcdGlzTGF5ZXJlZFxuXHRcdFx0XHQ/IC8vIFdoZW4gYGlzTGF5ZXJlZGAgaXMgdHJ1ZSwgYWxsIGl0ZW1zIG92ZXJsYXAgaW4gdGhlIHNhbWUgZ3JpZCBjZWxsXG5cdFx0XHRcdCAgY3NzKCB7IGdyaWRSb3dTdGFydDogMSwgZ3JpZENvbHVtblN0YXJ0OiAxIH0gKVxuXHRcdFx0XHQ6IHVuZGVmaW5lZCB9O1xuXHR9XG5gO1xuIl19 */"));
 exports.ZStackChildView = ZStackChildView;
-const positionAbsolute = process.env.NODE_ENV === "production" ? {
-  name: "a4hmbt",
-  styles: "position:absolute"
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "rs0gp6",
+  styles: "grid-row-start:1;grid-column-start:1"
 } : {
-  name: "nnsxs0-positionAbsolute",
-  styles: "position:absolute;label:positionAbsolute;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvei1zdGFjay9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZ0M0QiIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3otc3RhY2svc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBydGwgfSBmcm9tICcuLi91dGlscyc7XG5cbmV4cG9ydCBjb25zdCBaU3RhY2tWaWV3ID0gc3R5bGVkLmRpdmBcblx0ZGlzcGxheTogZmxleDtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuYDtcblxuZXhwb3J0IGNvbnN0IFpTdGFja0NoaWxkVmlldyA9IHN0eWxlZC5kaXY8IHtcblx0aXNMYXllcmVkOiBib29sZWFuO1xuXHRvZmZzZXRBbW91bnQ6IG51bWJlcjtcblx0ekluZGV4OiBudW1iZXI7XG59ID5gXG5cdCR7ICggeyBpc0xheWVyZWQsIG9mZnNldEFtb3VudCB9ICkgPT5cblx0XHRpc0xheWVyZWRcblx0XHRcdD8gY3NzKCBydGwoIHsgbWFyZ2luTGVmdDogb2Zmc2V0QW1vdW50IH0gKSgpIClcblx0XHRcdDogY3NzKCBydGwoIHsgcmlnaHQ6IG9mZnNldEFtb3VudCAqIC0xIH0gKSgpICkgfVxuXG5cdCR7ICggeyBpc0xheWVyZWQgfSApID0+XG5cdFx0aXNMYXllcmVkID8gcG9zaXRpb25BYnNvbHV0ZSA6IHBvc2l0aW9uUmVsYXRpdmUgfVxuXG5cdCR7ICggeyB6SW5kZXggfSApID0+IGNzcyggeyB6SW5kZXggfSApIH1cbmA7XG5cbmNvbnN0IHBvc2l0aW9uQWJzb2x1dGUgPSBjc3NgXG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcbmA7XG5cbmNvbnN0IHBvc2l0aW9uUmVsYXRpdmUgPSBjc3NgXG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcbmA7XG4iXX0= */",
+  name: "80o7c0-ZStackView",
+  styles: "grid-row-start:1;grid-column-start:1;label:ZStackView;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvei1zdGFjay9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBa0NNIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvei1zdGFjay9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmV4cG9ydCBjb25zdCBaU3RhY2tDaGlsZFZpZXcgPSBzdHlsZWQuZGl2PCB7XG5cdG9mZnNldEFtb3VudDogbnVtYmVyO1xuXHR6SW5kZXg6IG51bWJlcjtcbn0gPmBcblx0Jjpub3QoIDpmaXJzdC1vZi10eXBlICkge1xuXHRcdCR7ICggeyBvZmZzZXRBbW91bnQgfSApID0+XG5cdFx0XHRjc3MoIHtcblx0XHRcdFx0bWFyZ2luSW5saW5lU3RhcnQ6IG9mZnNldEFtb3VudCxcblx0XHRcdH0gKSB9O1xuXHR9XG5cblx0JHsgKCB7IHpJbmRleCB9ICkgPT4gY3NzKCB7IHpJbmRleCB9ICkgfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBaU3RhY2tWaWV3ID0gc3R5bGVkLmRpdjwge1xuXHRpc0xheWVyZWQ6IGJvb2xlYW47XG59ID5gXG5cdGRpc3BsYXk6IGlubGluZS1ncmlkO1xuXHRncmlkLWF1dG8tZmxvdzogY29sdW1uO1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cblx0JiA+ICR7IFpTdGFja0NoaWxkVmlldyB9IHtcblx0XHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdFx0anVzdGlmeS1zZWxmOiBzdGFydDtcblxuXHRcdCR7ICggeyBpc0xheWVyZWQgfSApID0+XG5cdFx0XHRpc0xheWVyZWRcblx0XHRcdFx0PyAvLyBXaGVuIGBpc0xheWVyZWRgIGlzIHRydWUsIGFsbCBpdGVtcyBvdmVybGFwIGluIHRoZSBzYW1lIGdyaWQgY2VsbFxuXHRcdFx0XHQgIGNzcyggeyBncmlkUm93U3RhcnQ6IDEsIGdyaWRDb2x1bW5TdGFydDogMSB9IClcblx0XHRcdFx0OiB1bmRlZmluZWQgfTtcblx0fVxuYDtcbiJdfQ== */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-const positionRelative = process.env.NODE_ENV === "production" ? {
-  name: "bjn8wh",
-  styles: "position:relative"
+
+const ZStackView = (0, _base.default)("div", process.env.NODE_ENV === "production" ? {
+  target: "ebn2ljm0"
 } : {
-  name: "ql4875-positionRelative",
-  styles: "position:relative;label:positionRelative;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvei1zdGFjay9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0M0QiIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3otc3RhY2svc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBydGwgfSBmcm9tICcuLi91dGlscyc7XG5cbmV4cG9ydCBjb25zdCBaU3RhY2tWaWV3ID0gc3R5bGVkLmRpdmBcblx0ZGlzcGxheTogZmxleDtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuYDtcblxuZXhwb3J0IGNvbnN0IFpTdGFja0NoaWxkVmlldyA9IHN0eWxlZC5kaXY8IHtcblx0aXNMYXllcmVkOiBib29sZWFuO1xuXHRvZmZzZXRBbW91bnQ6IG51bWJlcjtcblx0ekluZGV4OiBudW1iZXI7XG59ID5gXG5cdCR7ICggeyBpc0xheWVyZWQsIG9mZnNldEFtb3VudCB9ICkgPT5cblx0XHRpc0xheWVyZWRcblx0XHRcdD8gY3NzKCBydGwoIHsgbWFyZ2luTGVmdDogb2Zmc2V0QW1vdW50IH0gKSgpIClcblx0XHRcdDogY3NzKCBydGwoIHsgcmlnaHQ6IG9mZnNldEFtb3VudCAqIC0xIH0gKSgpICkgfVxuXG5cdCR7ICggeyBpc0xheWVyZWQgfSApID0+XG5cdFx0aXNMYXllcmVkID8gcG9zaXRpb25BYnNvbHV0ZSA6IHBvc2l0aW9uUmVsYXRpdmUgfVxuXG5cdCR7ICggeyB6SW5kZXggfSApID0+IGNzcyggeyB6SW5kZXggfSApIH1cbmA7XG5cbmNvbnN0IHBvc2l0aW9uQWJzb2x1dGUgPSBjc3NgXG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcbmA7XG5cbmNvbnN0IHBvc2l0aW9uUmVsYXRpdmUgPSBjc3NgXG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcbmA7XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
+  target: "ebn2ljm0",
+  label: "ZStackView"
+})("display:inline-grid;grid-auto-flow:column;position:relative;&>", ZStackChildView, "{position:relative;justify-self:start;", ({
+  isLayered
+}) => isLayered ? // When `isLayered` is true, all items overlap in the same grid cell
+_ref : undefined, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvei1zdGFjay9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0JHIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvei1zdGFjay9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmV4cG9ydCBjb25zdCBaU3RhY2tDaGlsZFZpZXcgPSBzdHlsZWQuZGl2PCB7XG5cdG9mZnNldEFtb3VudDogbnVtYmVyO1xuXHR6SW5kZXg6IG51bWJlcjtcbn0gPmBcblx0Jjpub3QoIDpmaXJzdC1vZi10eXBlICkge1xuXHRcdCR7ICggeyBvZmZzZXRBbW91bnQgfSApID0+XG5cdFx0XHRjc3MoIHtcblx0XHRcdFx0bWFyZ2luSW5saW5lU3RhcnQ6IG9mZnNldEFtb3VudCxcblx0XHRcdH0gKSB9O1xuXHR9XG5cblx0JHsgKCB7IHpJbmRleCB9ICkgPT4gY3NzKCB7IHpJbmRleCB9ICkgfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBaU3RhY2tWaWV3ID0gc3R5bGVkLmRpdjwge1xuXHRpc0xheWVyZWQ6IGJvb2xlYW47XG59ID5gXG5cdGRpc3BsYXk6IGlubGluZS1ncmlkO1xuXHRncmlkLWF1dG8tZmxvdzogY29sdW1uO1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cblx0JiA+ICR7IFpTdGFja0NoaWxkVmlldyB9IHtcblx0XHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdFx0anVzdGlmeS1zZWxmOiBzdGFydDtcblxuXHRcdCR7ICggeyBpc0xheWVyZWQgfSApID0+XG5cdFx0XHRpc0xheWVyZWRcblx0XHRcdFx0PyAvLyBXaGVuIGBpc0xheWVyZWRgIGlzIHRydWUsIGFsbCBpdGVtcyBvdmVybGFwIGluIHRoZSBzYW1lIGdyaWQgY2VsbFxuXHRcdFx0XHQgIGNzcyggeyBncmlkUm93U3RhcnQ6IDEsIGdyaWRDb2x1bW5TdGFydDogMSB9IClcblx0XHRcdFx0OiB1bmRlZmluZWQgfTtcblx0fVxuYDtcbiJdfQ== */"));
+exports.ZStackView = ZStackView;
 //# sourceMappingURL=styles.js.map

package/build/z-stack/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/z-stack/styles.ts"],"names":["ZStackView","ZStackChildView","isLayered","offsetAmount","marginLeft","right","positionAbsolute","positionRelative","zIndex"],"mappings":";;;;;;;;;;;AAGA;;AAMA;;;;AAEO,MAAMA,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAhB;;AAKA,MAAMC,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA,GAKxB,CAAE;AAAEC,EAAAA,SAAF;AAAaC,EAAAA;AAAb,CAAF,KACFD,SAAS,gBACN,gBAAK,gBAAK;AAAEE,EAAAA,UAAU,EAAED;AAAd,CAAL,GAAL,q+CADM,gBAEN,gBAAK,gBAAK;AAAEE,EAAAA,KAAK,EAAEF,YAAY,GAAG,CAAC;AAAzB,CAAL,GAAL,q+CARuB,OAUxB,CAAE;AAAED,EAAAA;AAAF,CAAF,KACFA,SAAS,GAAGI,gBAAH,GAAsBC,gBAXL,OAaxB,CAAE;AAAEC,EAAAA;AAAF,CAAF,kBAAkB,gBAAK;AAAEA,EAAAA;AAAF,CAAL,q+CAbM,q6CAArB;;AAgBP,MAAMF,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAtB;AAIA,MAAMC,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAtB","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport { rtl } from '../utils';\n\nexport const ZStackView = styled.div`\n\tdisplay: flex;\n\tposition: relative;\n`;\n\nexport const ZStackChildView = styled.div< {\n\tisLayered: boolean;\n\toffsetAmount: number;\n\tzIndex: number;\n} >`\n\t${ ( { isLayered, offsetAmount } ) =>\n\t\tisLayered\n\t\t\t? css( rtl( { marginLeft: offsetAmount } )() )\n\t\t\t: css( rtl( { right: offsetAmount * -1 } )() ) }\n\n\t${ ( { isLayered } ) =>\n\t\tisLayered ? positionAbsolute : positionRelative }\n\n\t${ ( { zIndex } ) => css( { zIndex } ) }\n`;\n\nconst positionAbsolute = css`\n\tposition: absolute;\n`;\n\nconst positionRelative = css`\n\tposition: relative;\n`;\n"]}
+{"version":3,"sources":["@wordpress/components/src/z-stack/styles.ts"],"names":["ZStackChildView","offsetAmount","marginInlineStart","zIndex","ZStackView","isLayered","undefined"],"mappings":";;;;;;;;;;;AAGA;;;;AAGO,MAAMA,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA,+BAKvB,CAAE;AAAEC,EAAAA;AAAF,CAAF,kBACF,gBAAK;AACJC,EAAAA,iBAAiB,EAAED;AADf,CAAL,ihDANyB,QAWxB,CAAE;AAAEE,EAAAA;AAAF,CAAF,kBAAkB,gBAAK;AAAEA,EAAAA;AAAF,CAAL,qhDAXM,i9CAArB;;;;;;;;;;;;;AAcA,MAAMC,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,qEAOfJ,eAPe,4CAWlB,CAAE;AAAEK,EAAAA;AAAF,CAAF,KACFA,SAAS,GACN;AADM,OAGNC,SAfiB,s9CAAhB","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n\nexport const ZStackChildView = styled.div< {\n\toffsetAmount: number;\n\tzIndex: number;\n} >`\n\t&:not( :first-of-type ) {\n\t\t${ ( { offsetAmount } ) =>\n\t\t\tcss( {\n\t\t\t\tmarginInlineStart: offsetAmount,\n\t\t\t} ) };\n\t}\n\n\t${ ( { zIndex } ) => css( { zIndex } ) };\n`;\n\nexport const ZStackView = styled.div< {\n\tisLayered: boolean;\n} >`\n\tdisplay: inline-grid;\n\tgrid-auto-flow: column;\n\tposition: relative;\n\n\t& > ${ ZStackChildView } {\n\t\tposition: relative;\n\t\tjustify-self: start;\n\n\t\t${ ( { isLayered } ) =>\n\t\t\tisLayered\n\t\t\t\t? // When `isLayered` is true, all items overlap in the same grid cell\n\t\t\t\t  css( { gridRowStart: 1, gridColumnStart: 1 } )\n\t\t\t\t: undefined };\n\t}\n`;\n"]}

package/build-module/button/index.js

@@ -26,11 +26,20 @@ function useDeprecatedProps({
   isSecondary,
   isTertiary,
   isLink,
+  isSmall,
+  size,
   variant,
   ...otherProps
 }) {
+  let computedSize = size;
   let computedVariant = variant;
 
+  if (isSmall) {
+    var _computedSize;
+
+    (_computedSize = computedSize) !== null && _computedSize !== void 0 ? _computedSize : computedSize = 'small';
+  }
+
   if (isPrimary) {
     var _computedVariant;
 
@@ -67,6 +76,7 @@ function useDeprecatedProps({
   }
 
   return { ...otherProps,
+    size: computedSize,
     variant: computedVariant
   };
 }
@@ -74,8 +84,6 @@ function useDeprecatedProps({
 export function UnforwardedButton(props, ref) {
   const {
     __next40pxDefaultSize,
-    __next32pxSmallSize,
-    isSmall,
     isPressed,
     isBusy,
     isDestructive,
@@ -89,6 +97,7 @@ export function UnforwardedButton(props, ref) {
     shortcut,
     label,
     children,
+    size = 'default',
     text,
     variant,
     __experimentalIsFocusable: isFocusable,
@@ -109,10 +118,10 @@ export function UnforwardedButton(props, ref) {
   children?.[0]?.props?.className !== 'components-tooltip';
   const classes = classnames('components-button', className, {
     'is-next-40px-default-size': __next40pxDefaultSize,
-    'is-next-32px-small-size': __next32pxSmallSize,
     'is-secondary': variant === 'secondary',
     'is-primary': variant === 'primary',
-    'is-small': isSmall,
+    'is-small': size === 'small',
+    'is-compact': size === 'compact',
     'is-tertiary': variant === 'tertiary',
     'is-pressed': isPressed,
     'is-busy': isBusy,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/button/index.tsx"],"names":["classnames","deprecated","forwardRef","useInstanceId","Tooltip","Icon","VisuallyHidden","disabledEventsOnDisabledButton","useDeprecatedProps","isDefault","isPrimary","isSecondary","isTertiary","isLink","variant","otherProps","computedVariant","since","alternative","version","UnforwardedButton","props","ref","__next40pxDefaultSize","__next32pxSmallSize","isSmall","isPressed","isBusy","isDestructive","className","disabled","icon","iconPosition","iconSize","showTooltip","tooltipPosition","shortcut","label","children","text","__experimentalIsFocusable","isFocusable","describedBy","buttonOrAnchorProps","href","target","additionalProps","undefined","instanceId","Button","hasChildren","Array","isArray","classes","trulyDisabled","Tag","buttonProps","type","anchorProps","disabledEvent","event","stopPropagation","preventDefault","shouldShowTooltip","length","descriptionId","describedById","commonProps","elementChildren","element"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type {\n\tComponentPropsWithoutRef,\n\tForwardedRef,\n\tHTMLAttributes,\n\tMouseEvent,\n\tReactElement,\n} from 'react';\n\n/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\nimport { forwardRef } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Tooltip from '../tooltip';\nimport Icon from '../icon';\nimport { VisuallyHidden } from '../visually-hidden';\nimport type { ButtonProps, DeprecatedButtonProps } from './types';\n\nconst disabledEventsOnDisabledButton = [ 'onMouseDown', 'onClick' ] as const;\n\nfunction useDeprecatedProps( {\n\tisDefault,\n\tisPrimary,\n\tisSecondary,\n\tisTertiary,\n\tisLink,\n\tvariant,\n\t...otherProps\n}: ButtonProps & DeprecatedButtonProps ): ButtonProps {\n\tlet computedVariant = variant;\n\n\tif ( isPrimary ) {\n\t\tcomputedVariant ??= 'primary';\n\t}\n\n\tif ( isTertiary ) {\n\t\tcomputedVariant ??= 'tertiary';\n\t}\n\n\tif ( isSecondary ) {\n\t\tcomputedVariant ??= 'secondary';\n\t}\n\n\tif ( isDefault ) {\n\t\tdeprecated( 'Button isDefault prop', {\n\t\t\tsince: '5.4',\n\t\t\talternative: 'variant=\"secondary\"',\n\t\t\tversion: '6.2',\n\t\t} );\n\n\t\tcomputedVariant ??= 'secondary';\n\t}\n\n\tif ( isLink ) {\n\t\tcomputedVariant ??= 'link';\n\t}\n\n\treturn {\n\t\t...otherProps,\n\t\tvariant: computedVariant,\n\t};\n}\n\nexport function UnforwardedButton(\n\tprops: ButtonProps,\n\tref: ForwardedRef< any >\n) {\n\tconst {\n\t\t__next40pxDefaultSize,\n\t\t__next32pxSmallSize,\n\t\tisSmall,\n\t\tisPressed,\n\t\tisBusy,\n\t\tisDestructive,\n\t\tclassName,\n\t\tdisabled,\n\t\ticon,\n\t\ticonPosition = 'left',\n\t\ticonSize,\n\t\tshowTooltip,\n\t\ttooltipPosition,\n\t\tshortcut,\n\t\tlabel,\n\t\tchildren,\n\t\ttext,\n\t\tvariant,\n\t\t__experimentalIsFocusable: isFocusable,\n\t\tdescribedBy,\n\t\t...buttonOrAnchorProps\n\t} = useDeprecatedProps( props );\n\n\tconst { href, target, ...additionalProps } =\n\t\t'href' in buttonOrAnchorProps\n\t\t\t? buttonOrAnchorProps\n\t\t\t: { href: undefined, target: undefined, ...buttonOrAnchorProps };\n\n\tconst instanceId = useInstanceId(\n\t\tButton,\n\t\t'components-button__description'\n\t);\n\n\tconst hasChildren =\n\t\t( 'string' === typeof children && !! children ) ||\n\t\t( Array.isArray( children ) &&\n\t\t\tchildren?.[ 0 ] &&\n\t\t\tchildren[ 0 ] !== null &&\n\t\t\t// Tooltip should not considered as a child\n\t\t\tchildren?.[ 0 ]?.props?.className !== 'components-tooltip' );\n\n\tconst classes = classnames( 'components-button', className, {\n\t\t'is-next-40px-default-size': __next40pxDefaultSize,\n\t\t'is-next-32px-small-size': __next32pxSmallSize,\n\t\t'is-secondary': variant === 'secondary',\n\t\t'is-primary': variant === 'primary',\n\t\t'is-small': isSmall,\n\t\t'is-tertiary': variant === 'tertiary',\n\t\t'is-pressed': isPressed,\n\t\t'is-busy': isBusy,\n\t\t'is-link': variant === 'link',\n\t\t'is-destructive': isDestructive,\n\t\t'has-text': !! icon && hasChildren,\n\t\t'has-icon': !! icon,\n\t} );\n\n\tconst trulyDisabled = disabled && ! isFocusable;\n\tconst Tag = href !== undefined && ! trulyDisabled ? 'a' : 'button';\n\tconst buttonProps: ComponentPropsWithoutRef< 'button' > =\n\t\tTag === 'button'\n\t\t\t? {\n\t\t\t\t\ttype: 'button',\n\t\t\t\t\tdisabled: trulyDisabled,\n\t\t\t\t\t'aria-pressed': isPressed,\n\t\t\t  }\n\t\t\t: {};\n\tconst anchorProps: ComponentPropsWithoutRef< 'a' > =\n\t\tTag === 'a' ? { href, target } : {};\n\n\tif ( disabled && isFocusable ) {\n\t\t// In this case, the button will be disabled, but still focusable and\n\t\t// perceivable by screen reader users.\n\t\tbuttonProps[ 'aria-disabled' ] = true;\n\t\tanchorProps[ 'aria-disabled' ] = true;\n\n\t\tfor ( const disabledEvent of disabledEventsOnDisabledButton ) {\n\t\t\tadditionalProps[ disabledEvent ] = ( event: MouseEvent ) => {\n\t\t\t\tif ( event ) {\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t}\n\t\t\t};\n\t\t}\n\t}\n\n\t// Should show the tooltip if...\n\tconst shouldShowTooltip =\n\t\t! trulyDisabled &&\n\t\t// An explicit tooltip is passed or...\n\t\t( ( showTooltip && label ) ||\n\t\t\t// There's a shortcut or...\n\t\t\tshortcut ||\n\t\t\t// There's a label and...\n\t\t\t( !! label &&\n\t\t\t\t// The children are empty and...\n\t\t\t\t! ( children as string | ReactElement[] )?.length &&\n\t\t\t\t// The tooltip is not explicitly disabled.\n\t\t\t\tfalse !== showTooltip ) );\n\n\tconst descriptionId = describedBy ? instanceId : undefined;\n\n\tconst describedById =\n\t\tadditionalProps[ 'aria-describedby' ] || descriptionId;\n\n\tconst commonProps = {\n\t\tclassName: classes,\n\t\t'aria-label': additionalProps[ 'aria-label' ] || label,\n\t\t'aria-describedby': describedById,\n\t\tref,\n\t};\n\n\tconst elementChildren = (\n\t\t<>\n\t\t\t{ icon && iconPosition === 'left' && (\n\t\t\t\t<Icon icon={ icon } size={ iconSize } />\n\t\t\t) }\n\t\t\t{ text && <>{ text }</> }\n\t\t\t{ icon && iconPosition === 'right' && (\n\t\t\t\t<Icon icon={ icon } size={ iconSize } />\n\t\t\t) }\n\t\t\t{ children }\n\t\t</>\n\t);\n\n\tconst element =\n\t\tTag === 'a' ? (\n\t\t\t<a\n\t\t\t\t{ ...anchorProps }\n\t\t\t\t{ ...( additionalProps as HTMLAttributes< HTMLAnchorElement > ) }\n\t\t\t\t{ ...commonProps }\n\t\t\t>\n\t\t\t\t{ elementChildren }\n\t\t\t</a>\n\t\t) : (\n\t\t\t<button\n\t\t\t\t{ ...buttonProps }\n\t\t\t\t{ ...( additionalProps as HTMLAttributes< HTMLButtonElement > ) }\n\t\t\t\t{ ...commonProps }\n\t\t\t>\n\t\t\t\t{ elementChildren }\n\t\t\t</button>\n\t\t);\n\n\tif ( ! shouldShowTooltip ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ element }\n\t\t\t\t{ describedBy && (\n\t\t\t\t\t<VisuallyHidden>\n\t\t\t\t\t\t<span id={ descriptionId }>{ describedBy }</span>\n\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t) }\n\t\t\t</>\n\t\t);\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<Tooltip\n\t\t\t\ttext={\n\t\t\t\t\t( children as string | ReactElement[] )?.length &&\n\t\t\t\t\tdescribedBy\n\t\t\t\t\t\t? describedBy\n\t\t\t\t\t\t: label\n\t\t\t\t}\n\t\t\t\tshortcut={ shortcut }\n\t\t\t\tposition={ tooltipPosition }\n\t\t\t>\n\t\t\t\t{ element }\n\t\t\t</Tooltip>\n\t\t\t{ describedBy && (\n\t\t\t\t<VisuallyHidden>\n\t\t\t\t\t<span id={ descriptionId }>{ describedBy }</span>\n\t\t\t\t</VisuallyHidden>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\n/**\n * Lets users take actions and make choices with a single click or tap.\n *\n * ```jsx\n * import { Button } from '@wordpress/components';\n * const Mybutton = () => (\n *   <Button\n *     variant=\"primary\"\n *     onClick={ handleClick }\n *   >\n *     Click here\n *   </Button>\n * );\n * ```\n */\nexport const Button = forwardRef( UnforwardedButton );\nexport default Button;\n"]}
+{"version":3,"sources":["@wordpress/components/src/button/index.tsx"],"names":["classnames","deprecated","forwardRef","useInstanceId","Tooltip","Icon","VisuallyHidden","disabledEventsOnDisabledButton","useDeprecatedProps","isDefault","isPrimary","isSecondary","isTertiary","isLink","isSmall","size","variant","otherProps","computedSize","computedVariant","since","alternative","version","UnforwardedButton","props","ref","__next40pxDefaultSize","isPressed","isBusy","isDestructive","className","disabled","icon","iconPosition","iconSize","showTooltip","tooltipPosition","shortcut","label","children","text","__experimentalIsFocusable","isFocusable","describedBy","buttonOrAnchorProps","href","target","additionalProps","undefined","instanceId","Button","hasChildren","Array","isArray","classes","trulyDisabled","Tag","buttonProps","type","anchorProps","disabledEvent","event","stopPropagation","preventDefault","shouldShowTooltip","length","descriptionId","describedById","commonProps","elementChildren","element"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type {\n\tComponentPropsWithoutRef,\n\tForwardedRef,\n\tHTMLAttributes,\n\tMouseEvent,\n\tReactElement,\n} from 'react';\n\n/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\nimport { forwardRef } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Tooltip from '../tooltip';\nimport Icon from '../icon';\nimport { VisuallyHidden } from '../visually-hidden';\nimport type { ButtonProps, DeprecatedButtonProps } from './types';\n\nconst disabledEventsOnDisabledButton = [ 'onMouseDown', 'onClick' ] as const;\n\nfunction useDeprecatedProps( {\n\tisDefault,\n\tisPrimary,\n\tisSecondary,\n\tisTertiary,\n\tisLink,\n\tisSmall,\n\tsize,\n\tvariant,\n\t...otherProps\n}: ButtonProps & DeprecatedButtonProps ): ButtonProps {\n\tlet computedSize = size;\n\tlet computedVariant = variant;\n\n\tif ( isSmall ) {\n\t\tcomputedSize ??= 'small';\n\t}\n\n\tif ( isPrimary ) {\n\t\tcomputedVariant ??= 'primary';\n\t}\n\n\tif ( isTertiary ) {\n\t\tcomputedVariant ??= 'tertiary';\n\t}\n\n\tif ( isSecondary ) {\n\t\tcomputedVariant ??= 'secondary';\n\t}\n\n\tif ( isDefault ) {\n\t\tdeprecated( 'Button isDefault prop', {\n\t\t\tsince: '5.4',\n\t\t\talternative: 'variant=\"secondary\"',\n\t\t\tversion: '6.2',\n\t\t} );\n\n\t\tcomputedVariant ??= 'secondary';\n\t}\n\n\tif ( isLink ) {\n\t\tcomputedVariant ??= 'link';\n\t}\n\n\treturn {\n\t\t...otherProps,\n\t\tsize: computedSize,\n\t\tvariant: computedVariant,\n\t};\n}\n\nexport function UnforwardedButton(\n\tprops: ButtonProps,\n\tref: ForwardedRef< any >\n) {\n\tconst {\n\t\t__next40pxDefaultSize,\n\t\tisPressed,\n\t\tisBusy,\n\t\tisDestructive,\n\t\tclassName,\n\t\tdisabled,\n\t\ticon,\n\t\ticonPosition = 'left',\n\t\ticonSize,\n\t\tshowTooltip,\n\t\ttooltipPosition,\n\t\tshortcut,\n\t\tlabel,\n\t\tchildren,\n\t\tsize = 'default',\n\t\ttext,\n\t\tvariant,\n\t\t__experimentalIsFocusable: isFocusable,\n\t\tdescribedBy,\n\t\t...buttonOrAnchorProps\n\t} = useDeprecatedProps( props );\n\n\tconst { href, target, ...additionalProps } =\n\t\t'href' in buttonOrAnchorProps\n\t\t\t? buttonOrAnchorProps\n\t\t\t: { href: undefined, target: undefined, ...buttonOrAnchorProps };\n\n\tconst instanceId = useInstanceId(\n\t\tButton,\n\t\t'components-button__description'\n\t);\n\n\tconst hasChildren =\n\t\t( 'string' === typeof children && !! children ) ||\n\t\t( Array.isArray( children ) &&\n\t\t\tchildren?.[ 0 ] &&\n\t\t\tchildren[ 0 ] !== null &&\n\t\t\t// Tooltip should not considered as a child\n\t\t\tchildren?.[ 0 ]?.props?.className !== 'components-tooltip' );\n\n\tconst classes = classnames( 'components-button', className, {\n\t\t'is-next-40px-default-size': __next40pxDefaultSize,\n\t\t'is-secondary': variant === 'secondary',\n\t\t'is-primary': variant === 'primary',\n\t\t'is-small': size === 'small',\n\t\t'is-compact': size === 'compact',\n\t\t'is-tertiary': variant === 'tertiary',\n\t\t'is-pressed': isPressed,\n\t\t'is-busy': isBusy,\n\t\t'is-link': variant === 'link',\n\t\t'is-destructive': isDestructive,\n\t\t'has-text': !! icon && hasChildren,\n\t\t'has-icon': !! icon,\n\t} );\n\n\tconst trulyDisabled = disabled && ! isFocusable;\n\tconst Tag = href !== undefined && ! trulyDisabled ? 'a' : 'button';\n\tconst buttonProps: ComponentPropsWithoutRef< 'button' > =\n\t\tTag === 'button'\n\t\t\t? {\n\t\t\t\t\ttype: 'button',\n\t\t\t\t\tdisabled: trulyDisabled,\n\t\t\t\t\t'aria-pressed': isPressed,\n\t\t\t  }\n\t\t\t: {};\n\tconst anchorProps: ComponentPropsWithoutRef< 'a' > =\n\t\tTag === 'a' ? { href, target } : {};\n\n\tif ( disabled && isFocusable ) {\n\t\t// In this case, the button will be disabled, but still focusable and\n\t\t// perceivable by screen reader users.\n\t\tbuttonProps[ 'aria-disabled' ] = true;\n\t\tanchorProps[ 'aria-disabled' ] = true;\n\n\t\tfor ( const disabledEvent of disabledEventsOnDisabledButton ) {\n\t\t\tadditionalProps[ disabledEvent ] = ( event: MouseEvent ) => {\n\t\t\t\tif ( event ) {\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t}\n\t\t\t};\n\t\t}\n\t}\n\n\t// Should show the tooltip if...\n\tconst shouldShowTooltip =\n\t\t! trulyDisabled &&\n\t\t// An explicit tooltip is passed or...\n\t\t( ( showTooltip && label ) ||\n\t\t\t// There's a shortcut or...\n\t\t\tshortcut ||\n\t\t\t// There's a label and...\n\t\t\t( !! label &&\n\t\t\t\t// The children are empty and...\n\t\t\t\t! ( children as string | ReactElement[] )?.length &&\n\t\t\t\t// The tooltip is not explicitly disabled.\n\t\t\t\tfalse !== showTooltip ) );\n\n\tconst descriptionId = describedBy ? instanceId : undefined;\n\n\tconst describedById =\n\t\tadditionalProps[ 'aria-describedby' ] || descriptionId;\n\n\tconst commonProps = {\n\t\tclassName: classes,\n\t\t'aria-label': additionalProps[ 'aria-label' ] || label,\n\t\t'aria-describedby': describedById,\n\t\tref,\n\t};\n\n\tconst elementChildren = (\n\t\t<>\n\t\t\t{ icon && iconPosition === 'left' && (\n\t\t\t\t<Icon icon={ icon } size={ iconSize } />\n\t\t\t) }\n\t\t\t{ text && <>{ text }</> }\n\t\t\t{ icon && iconPosition === 'right' && (\n\t\t\t\t<Icon icon={ icon } size={ iconSize } />\n\t\t\t) }\n\t\t\t{ children }\n\t\t</>\n\t);\n\n\tconst element =\n\t\tTag === 'a' ? (\n\t\t\t<a\n\t\t\t\t{ ...anchorProps }\n\t\t\t\t{ ...( additionalProps as HTMLAttributes< HTMLAnchorElement > ) }\n\t\t\t\t{ ...commonProps }\n\t\t\t>\n\t\t\t\t{ elementChildren }\n\t\t\t</a>\n\t\t) : (\n\t\t\t<button\n\t\t\t\t{ ...buttonProps }\n\t\t\t\t{ ...( additionalProps as HTMLAttributes< HTMLButtonElement > ) }\n\t\t\t\t{ ...commonProps }\n\t\t\t>\n\t\t\t\t{ elementChildren }\n\t\t\t</button>\n\t\t);\n\n\tif ( ! shouldShowTooltip ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ element }\n\t\t\t\t{ describedBy && (\n\t\t\t\t\t<VisuallyHidden>\n\t\t\t\t\t\t<span id={ descriptionId }>{ describedBy }</span>\n\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t) }\n\t\t\t</>\n\t\t);\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<Tooltip\n\t\t\t\ttext={\n\t\t\t\t\t( children as string | ReactElement[] )?.length &&\n\t\t\t\t\tdescribedBy\n\t\t\t\t\t\t? describedBy\n\t\t\t\t\t\t: label\n\t\t\t\t}\n\t\t\t\tshortcut={ shortcut }\n\t\t\t\tposition={ tooltipPosition }\n\t\t\t>\n\t\t\t\t{ element }\n\t\t\t</Tooltip>\n\t\t\t{ describedBy && (\n\t\t\t\t<VisuallyHidden>\n\t\t\t\t\t<span id={ descriptionId }>{ describedBy }</span>\n\t\t\t\t</VisuallyHidden>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\n/**\n * Lets users take actions and make choices with a single click or tap.\n *\n * ```jsx\n * import { Button } from '@wordpress/components';\n * const Mybutton = () => (\n *   <Button\n *     variant=\"primary\"\n *     onClick={ handleClick }\n *   >\n *     Click here\n *   </Button>\n * );\n * ```\n */\nexport const Button = forwardRef( UnforwardedButton );\nexport default Button;\n"]}

package/build-module/confirm-dialog/component.js

@@ -8,7 +8,7 @@ import { createElement, Fragment } from "@wordpress/element";
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useCallback, useEffect, useState } from '@wordpress/element';
+import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
@@ -34,6 +34,8 @@ function ConfirmDialog(props, forwardedRef) {
   } = useContextSystem(props, 'ConfirmDialog');
   const cx = useCx();
   const wrapperClassName = cx(styles.wrapper);
+  const cancelButtonRef = useRef();
+  const confirmButtonRef = useRef();
   const [isOpen, setIsOpen] = useState();
   const [shouldSelfClose, setShouldSelfClose] = useState();
   useEffect(() => {
@@ -53,7 +55,11 @@ function ConfirmDialog(props, forwardedRef) {
     }
   }, [shouldSelfClose, setIsOpen]);
   const handleEnter = useCallback(event => {
-    if (event.key === 'Enter') {
+    // Avoid triggering the 'confirm' action when a button is focused,
+    // as this can cause a double submission.
+    const isConfirmOrCancelButton = event.target === cancelButtonRef.current || event.target === confirmButtonRef.current;
+
+    if (!isConfirmOrCancelButton && event.key === 'Enter') {
       handleEvent(onConfirm)(event);
     }
   }, [handleEvent, onConfirm]);
@@ -74,9 +80,11 @@ function ConfirmDialog(props, forwardedRef) {
     direction: "row",
     justify: "flex-end"
   }, createElement(Button, {
+    ref: cancelButtonRef,
     variant: "tertiary",
     onClick: handleEvent(onCancel)
   }, cancelLabel), createElement(Button, {
+    ref: confirmButtonRef,
     variant: "primary",
     onClick: handleEvent(onConfirm)
   }, confirmLabel)))));