@wordpress/components 30.0.0 → 30.1.1-next.46f643fa0.0

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

@@ -1 +1 @@
-{"version":3,"names":["css","NumberControl","COLORS","rtl","CONFIG","space","rangeHeightValue","railHeight","rangeHeight","height","minHeight","process","env","NODE_ENV","thumbSize","deprecatedHeight","__next40pxDefaultSize","Root","_styled","target","label","wrapperColor","color","ui","borderFocus","wrapperMargin","marks","__nextHasNoMarginBottom","marginBottom","undefined","Wrapper","shouldForwardProp","prop","includes","BeforeIconWrapper","marginRight","AfterIconWrapper","marginLeft","railBackgroundColor","disabled","railColor","background","backgroundDisabled","Rail","gray","radiusFull","trackBackgroundColor","trackColor","Track","MarksWrapper","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","Mark","markLabelFill","isFilled","MarkLabel","left","transform","thumbColor","theme","accent","ThumbWrapper","radiusRound","thumbFocus","isFocused","Thumb","elevationXSmall","InputRange","tooltipShow","show","_ref","_ref2","tooltipPosition","position","isBottom","Tooltip","radiusSmall","InputNumber","ActionRightWrapper"],"sources":["@wordpress/components/src/range-control/styles/range-control-styles.ts"],"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, rtl, CONFIG } from '../../utils';\nimport { space } from '../../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', {\n\tshouldForwardProp: ( prop: string ) =>\n\t\t! [ 'color', '__nextHasNoMarginBottom', 'marks' ].includes( prop ),\n} )< 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: ${ CONFIG.radiusFull };\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: ${ CONFIG.radiusFull };\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.is-marked & {\n\t\t@media not ( prefers-reduced-motion ) {\n\t\t\ttransition: width ease 0.1s;\n\t\t}\n\t}\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\tmargin-top: 17px;\n`;\n\nexport const Mark = styled.span`\n\tposition: absolute;\n\tleft: 0;\n\ttop: -4px;\n\theight: 4px;\n\twidth: 2px;\n\ttransform: translateX( -50% );\n\tbackground-color: ${ COLORS.ui.background };\n\tz-index: 1;\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\tfont-size: 11px;\n\tposition: absolute;\n\ttop: 8px;\n\twhite-space: nowrap;\n\n\t${ rtl( { left: 0 } ) };\n\t${ rtl(\n\t\t{ transform: 'translateX( -50% )' },\n\t\t{ transform: 'translateX( 50% )' }\n\t) };\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.theme.accent };\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: ${ CONFIG.radiusRound };\n\tz-index: 3;\n\n\t.is-marked & {\n\t\t@media not ( prefers-reduced-motion ) {\n\t\t\ttransition: left ease 0.1s;\n\t\t}\n\t}\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.theme.accent };\n\t\t\t\t\topacity: 0.4;\n\t\t\t\t\tborder-radius: ${ CONFIG.radiusRound };\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: ${ CONFIG.radiusRound };\n\theight: 100%;\n\toutline: 0;\n\tposition: absolute;\n\tuser-select: none;\n\twidth: 100%;\n\tbox-shadow: ${ CONFIG.elevationXSmall };\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\tdisplay: ${ show ? 'inline-block' : 'none' };\n\t\topacity: ${ show ? 1 : 0 };\n\n\t\t@media not ( prefers-reduced-motion ) {\n\t\t\ttransition:\n\t\t\t\topacity 120ms ease,\n\t\t\t\tdisplay 120ms ease allow-discrete;\n\t\t}\n\n\t\t@starting-style {\n\t\t\topacity: 0;\n\t\t}\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: ${ CONFIG.radiusSmall };\n\tcolor: white;\n\tfont-size: 12px;\n\tmin-width: 32px;\n\tpadding: 4px 8px;\n\tpointer-events: none;\n\tposition: absolute;\n\ttext-align: center;\n\tuser-select: none;\n\tline-height: 1.4;\n\n\t${ tooltipShow };\n\n\t${ tooltipPosition };\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// @see: packages/components/src/h-stack\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"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["css","NumberControl","COLORS","rtl","CONFIG","space","rangeHeightValue","railHeight","rangeHeight","height","minHeight","process","env","NODE_ENV","thumbSize","deprecatedHeight","__next40pxDefaultSize","Root","_styled","target","label","wrapperColor","color","ui","borderFocus","wrapperMargin","marks","__nextHasNoMarginBottom","marginBottom","undefined","Wrapper","shouldForwardProp","prop","includes","BeforeIconWrapper","marginRight","AfterIconWrapper","marginLeft","railBackgroundColor","disabled","railColor","background","backgroundDisabled","Rail","gray","radiusFull","trackBackgroundColor","trackColor","Track","MarksWrapper","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","Mark","markLabelFill","isFilled","MarkLabel","left","transform","thumbColor","theme","accent","ThumbWrapper","radiusRound","thumbFocus","isFocused","Thumb","elevationXSmall","InputRange","tooltipShow","show","_ref","_ref2","tooltipPlacement","placement","isBottom","Tooltip","radiusSmall","InputNumber","ActionRightWrapper"],"sources":["@wordpress/components/src/range-control/styles/range-control-styles.ts"],"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, rtl, CONFIG } from '../../utils';\nimport { space } from '../../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', {\n\tshouldForwardProp: ( prop: string ) =>\n\t\t! [ 'color', '__nextHasNoMarginBottom', 'marks' ].includes( prop ),\n} )< 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: ${ CONFIG.radiusFull };\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: ${ CONFIG.radiusFull };\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.is-marked & {\n\t\t@media not ( prefers-reduced-motion ) {\n\t\t\ttransition: width ease 0.1s;\n\t\t}\n\t}\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\tmargin-top: 17px;\n`;\n\nexport const Mark = styled.span`\n\tposition: absolute;\n\tleft: 0;\n\ttop: -4px;\n\theight: 4px;\n\twidth: 2px;\n\ttransform: translateX( -50% );\n\tbackground-color: ${ COLORS.ui.background };\n\tz-index: 1;\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\tfont-size: 11px;\n\tposition: absolute;\n\ttop: 8px;\n\twhite-space: nowrap;\n\n\t${ rtl( { left: 0 } ) };\n\t${ rtl(\n\t\t{ transform: 'translateX( -50% )' },\n\t\t{ transform: 'translateX( 50% )' }\n\t) };\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.theme.accent };\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: ${ CONFIG.radiusRound };\n\tz-index: 3;\n\n\t.is-marked & {\n\t\t@media not ( prefers-reduced-motion ) {\n\t\t\ttransition: left ease 0.1s;\n\t\t}\n\t}\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.theme.accent };\n\t\t\t\t\topacity: 0.4;\n\t\t\t\t\tborder-radius: ${ CONFIG.radiusRound };\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: ${ CONFIG.radiusRound };\n\theight: 100%;\n\toutline: 0;\n\tposition: absolute;\n\tuser-select: none;\n\twidth: 100%;\n\tbox-shadow: ${ CONFIG.elevationXSmall };\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\tdisplay: ${ show ? 'inline-block' : 'none' };\n\t\topacity: ${ show ? 1 : 0 };\n\n\t\t@media not ( prefers-reduced-motion ) {\n\t\t\ttransition:\n\t\t\t\topacity 120ms ease,\n\t\t\t\tdisplay 120ms ease allow-discrete;\n\t\t}\n\n\t\t@starting-style {\n\t\t\topacity: 0;\n\t\t}\n\t`;\n};\n\nconst tooltipPlacement = ( { placement }: TooltipProps ) => {\n\tconst isBottom = placement === '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: ${ CONFIG.radiusSmall };\n\tcolor: white;\n\tfont-size: 12px;\n\tmin-width: 32px;\n\tpadding: 4px 8px;\n\tpointer-events: none;\n\tposition: absolute;\n\ttext-align: center;\n\tuser-select: none;\n\tline-height: 1.4;\n\n\t${ tooltipShow };\n\n\t${ tooltipPlacement };\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// @see: packages/components/src/h-stack\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"],"mappings":"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","ignoreList":[]}

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

@@ -17,7 +17,7 @@ export default function SimpleTooltip(props) {
   const {
     className,
     inputRef,
-    tooltipPosition,
+    tooltipPlacement,
     show = false,
     style = {},
     value = 0,
@@ -25,9 +25,9 @@ export default function SimpleTooltip(props) {
     zIndex = 100,
     ...restProps
   } = props;
-  const position = useTooltipPosition({
+  const placement = useTooltipPlacement({
     inputRef,
-    tooltipPosition
+    tooltipPlacement
   });
   const classes = clsx('components-simple-tooltip', className);
   const styles = {
@@ -38,32 +38,32 @@ export default function SimpleTooltip(props) {
     ...restProps,
     "aria-hidden": "false",
     className: classes,
-    position: position,
+    placement: placement,
     show: show,
     role: "tooltip",
     style: styles,
     children: renderTooltipContent(value)
   });
 }
-function useTooltipPosition({
+function useTooltipPlacement({
   inputRef,
-  tooltipPosition
+  tooltipPlacement
 }) {
-  const [position, setPosition] = useState();
-  const setTooltipPosition = useCallback(() => {
+  const [placement, setPlacement] = useState();
+  const setTooltipPlacement = useCallback(() => {
     if (inputRef && inputRef.current) {
-      setPosition(tooltipPosition);
+      setPlacement(tooltipPlacement);
     }
-  }, [tooltipPosition, inputRef]);
+  }, [tooltipPlacement, inputRef]);
   useEffect(() => {
-    setTooltipPosition();
-  }, [setTooltipPosition]);
+    setTooltipPlacement();
+  }, [setTooltipPlacement]);
   useEffect(() => {
-    window.addEventListener('resize', setTooltipPosition);
+    window.addEventListener('resize', setTooltipPlacement);
     return () => {
-      window.removeEventListener('resize', setTooltipPosition);
+      window.removeEventListener('resize', setTooltipPlacement);
     };
   });
-  return position;
+  return placement;
 }
 //# sourceMappingURL=tooltip.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["clsx","useCallback","useEffect","useState","Tooltip","jsx","_jsx","SimpleTooltip","props","className","inputRef","tooltipPosition","show","style","value","renderTooltipContent","v","zIndex","restProps","position","useTooltipPosition","classes","styles","role","children","setPosition","setTooltipPosition","current","window","addEventListener","removeEventListener"],"sources":["@wordpress/components/src/range-control/tooltip.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useEffect, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { Tooltip } from './styles/range-control-styles';\n\nimport type { TooltipProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nexport default function SimpleTooltip(\n\tprops: WordPressComponentProps< TooltipProps, 'span' >\n) {\n\tconst {\n\t\tclassName,\n\t\tinputRef,\n\t\ttooltipPosition,\n\t\tshow = false,\n\t\tstyle = {},\n\t\tvalue = 0,\n\t\trenderTooltipContent = ( v ) => v,\n\t\tzIndex = 100,\n\t\t...restProps\n\t} = props;\n\tconst position = useTooltipPosition( { inputRef, tooltipPosition } );\n\tconst classes = clsx( 'components-simple-tooltip', className );\n\tconst styles = {\n\t\t...style,\n\t\tzIndex,\n\t};\n\n\treturn (\n\t\t<Tooltip\n\t\t\t{ ...restProps }\n\t\t\taria-hidden=\"false\"\n\t\t\tclassName={ classes }\n\t\t\tposition={ position }\n\t\t\tshow={ show }\n\t\t\trole=\"tooltip\"\n\t\t\tstyle={ styles }\n\t\t>\n\t\t\t{ renderTooltipContent( value ) }\n\t\t</Tooltip>\n\t);\n}\n\nfunction useTooltipPosition( { inputRef, tooltipPosition }: TooltipProps ) {\n\tconst [ position, setPosition ] = useState< string >();\n\n\tconst setTooltipPosition = useCallback( () => {\n\t\tif ( inputRef && inputRef.current ) {\n\t\t\tsetPosition( tooltipPosition );\n\t\t}\n\t}, [ tooltipPosition, inputRef ] );\n\n\tuseEffect( () => {\n\t\tsetTooltipPosition();\n\t}, [ setTooltipPosition ] );\n\n\tuseEffect( () => {\n\t\twindow.addEventListener( 'resize', setTooltipPosition );\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener( 'resize', setTooltipPosition );\n\t\t};\n\t} );\n\n\treturn position;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,oBAAoB;;AAErE;AACA;AACA;AACA,SAASC,OAAO,QAAQ,+BAA+B;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAKxD,eAAe,SAASC,aAAaA,CACpCC,KAAsD,EACrD;EACD,MAAM;IACLC,SAAS;IACTC,QAAQ;IACRC,eAAe;IACfC,IAAI,GAAG,KAAK;IACZC,KAAK,GAAG,CAAC,CAAC;IACVC,KAAK,GAAG,CAAC;IACTC,oBAAoB,GAAKC,CAAC,IAAMA,CAAC;IACjCC,MAAM,GAAG,GAAG;IACZ,GAAGC;EACJ,CAAC,GAAGV,KAAK;EACT,MAAMW,QAAQ,GAAGC,kBAAkB,CAAE;IAAEV,QAAQ;IAAEC;EAAgB,CAAE,CAAC;EACpE,MAAMU,OAAO,GAAGrB,IAAI,CAAE,2BAA2B,EAAES,SAAU,CAAC;EAC9D,MAAMa,MAAM,GAAG;IACd,GAAGT,KAAK;IACRI;EACD,CAAC;EAED,oBACCX,IAAA,CAACF,OAAO;IAAA,GACFc,SAAS;IACd,eAAY,OAAO;IACnBT,SAAS,EAAGY,OAAS;IACrBF,QAAQ,EAAGA,QAAU;IACrBP,IAAI,EAAGA,IAAM;IACbW,IAAI,EAAC,SAAS;IACdV,KAAK,EAAGS,MAAQ;IAAAE,QAAA,EAEdT,oBAAoB,CAAED,KAAM;EAAC,CACvB,CAAC;AAEZ;AAEA,SAASM,kBAAkBA,CAAE;EAAEV,QAAQ;EAAEC;AAA8B,CAAC,EAAG;EAC1E,MAAM,CAAEQ,QAAQ,EAAEM,WAAW,CAAE,GAAGtB,QAAQ,CAAW,CAAC;EAEtD,MAAMuB,kBAAkB,GAAGzB,WAAW,CAAE,MAAM;IAC7C,IAAKS,QAAQ,IAAIA,QAAQ,CAACiB,OAAO,EAAG;MACnCF,WAAW,CAAEd,eAAgB,CAAC;IAC/B;EACD,CAAC,EAAE,CAAEA,eAAe,EAAED,QAAQ,CAAG,CAAC;EAElCR,SAAS,CAAE,MAAM;IAChBwB,kBAAkB,CAAC,CAAC;EACrB,CAAC,EAAE,CAAEA,kBAAkB,CAAG,CAAC;EAE3BxB,SAAS,CAAE,MAAM;IAChB0B,MAAM,CAACC,gBAAgB,CAAE,QAAQ,EAAEH,kBAAmB,CAAC;IAEvD,OAAO,MAAM;MACZE,MAAM,CAACE,mBAAmB,CAAE,QAAQ,EAAEJ,kBAAmB,CAAC;IAC3D,CAAC;EACF,CAAE,CAAC;EAEH,OAAOP,QAAQ;AAChB","ignoreList":[]}
+{"version":3,"names":["clsx","useCallback","useEffect","useState","Tooltip","jsx","_jsx","SimpleTooltip","props","className","inputRef","tooltipPlacement","show","style","value","renderTooltipContent","v","zIndex","restProps","placement","useTooltipPlacement","classes","styles","role","children","setPlacement","setTooltipPlacement","current","window","addEventListener","removeEventListener"],"sources":["@wordpress/components/src/range-control/tooltip.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useEffect, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { Tooltip } from './styles/range-control-styles';\n\nimport type { TooltipProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nexport default function SimpleTooltip(\n\tprops: WordPressComponentProps< TooltipProps, 'span' >\n) {\n\tconst {\n\t\tclassName,\n\t\tinputRef,\n\t\ttooltipPlacement,\n\t\tshow = false,\n\t\tstyle = {},\n\t\tvalue = 0,\n\t\trenderTooltipContent = ( v ) => v,\n\t\tzIndex = 100,\n\t\t...restProps\n\t} = props;\n\tconst placement = useTooltipPlacement( { inputRef, tooltipPlacement } );\n\tconst classes = clsx( 'components-simple-tooltip', className );\n\tconst styles = {\n\t\t...style,\n\t\tzIndex,\n\t};\n\n\treturn (\n\t\t<Tooltip\n\t\t\t{ ...restProps }\n\t\t\taria-hidden=\"false\"\n\t\t\tclassName={ classes }\n\t\t\tplacement={ placement }\n\t\t\tshow={ show }\n\t\t\trole=\"tooltip\"\n\t\t\tstyle={ styles }\n\t\t>\n\t\t\t{ renderTooltipContent( value ) }\n\t\t</Tooltip>\n\t);\n}\n\nfunction useTooltipPlacement( { inputRef, tooltipPlacement }: TooltipProps ) {\n\tconst [ placement, setPlacement ] = useState< string >();\n\n\tconst setTooltipPlacement = useCallback( () => {\n\t\tif ( inputRef && inputRef.current ) {\n\t\t\tsetPlacement( tooltipPlacement );\n\t\t}\n\t}, [ tooltipPlacement, inputRef ] );\n\n\tuseEffect( () => {\n\t\tsetTooltipPlacement();\n\t}, [ setTooltipPlacement ] );\n\n\tuseEffect( () => {\n\t\twindow.addEventListener( 'resize', setTooltipPlacement );\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener( 'resize', setTooltipPlacement );\n\t\t};\n\t} );\n\n\treturn placement;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,oBAAoB;;AAErE;AACA;AACA;AACA,SAASC,OAAO,QAAQ,+BAA+B;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAKxD,eAAe,SAASC,aAAaA,CACpCC,KAAsD,EACrD;EACD,MAAM;IACLC,SAAS;IACTC,QAAQ;IACRC,gBAAgB;IAChBC,IAAI,GAAG,KAAK;IACZC,KAAK,GAAG,CAAC,CAAC;IACVC,KAAK,GAAG,CAAC;IACTC,oBAAoB,GAAKC,CAAC,IAAMA,CAAC;IACjCC,MAAM,GAAG,GAAG;IACZ,GAAGC;EACJ,CAAC,GAAGV,KAAK;EACT,MAAMW,SAAS,GAAGC,mBAAmB,CAAE;IAAEV,QAAQ;IAAEC;EAAiB,CAAE,CAAC;EACvE,MAAMU,OAAO,GAAGrB,IAAI,CAAE,2BAA2B,EAAES,SAAU,CAAC;EAC9D,MAAMa,MAAM,GAAG;IACd,GAAGT,KAAK;IACRI;EACD,CAAC;EAED,oBACCX,IAAA,CAACF,OAAO;IAAA,GACFc,SAAS;IACd,eAAY,OAAO;IACnBT,SAAS,EAAGY,OAAS;IACrBF,SAAS,EAAGA,SAAW;IACvBP,IAAI,EAAGA,IAAM;IACbW,IAAI,EAAC,SAAS;IACdV,KAAK,EAAGS,MAAQ;IAAAE,QAAA,EAEdT,oBAAoB,CAAED,KAAM;EAAC,CACvB,CAAC;AAEZ;AAEA,SAASM,mBAAmBA,CAAE;EAAEV,QAAQ;EAAEC;AAA+B,CAAC,EAAG;EAC5E,MAAM,CAAEQ,SAAS,EAAEM,YAAY,CAAE,GAAGtB,QAAQ,CAAW,CAAC;EAExD,MAAMuB,mBAAmB,GAAGzB,WAAW,CAAE,MAAM;IAC9C,IAAKS,QAAQ,IAAIA,QAAQ,CAACiB,OAAO,EAAG;MACnCF,YAAY,CAAEd,gBAAiB,CAAC;IACjC;EACD,CAAC,EAAE,CAAEA,gBAAgB,EAAED,QAAQ,CAAG,CAAC;EAEnCR,SAAS,CAAE,MAAM;IAChBwB,mBAAmB,CAAC,CAAC;EACtB,CAAC,EAAE,CAAEA,mBAAmB,CAAG,CAAC;EAE5BxB,SAAS,CAAE,MAAM;IAChB0B,MAAM,CAACC,gBAAgB,CAAE,QAAQ,EAAEH,mBAAoB,CAAC;IAExD,OAAO,MAAM;MACZE,MAAM,CAACE,mBAAmB,CAAE,QAAQ,EAAEJ,mBAAoB,CAAC;IAC5D,CAAC;EACF,CAAE,CAAC;EAEH,OAAOP,SAAS;AACjB","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/range-control/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type {\n\tCSSProperties,\n\tFocusEventHandler,\n\tMouseEventHandler,\n\tMutableRefObject,\n} from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { BaseControlProps } from '../base-control/types';\nimport type { IconType } from '../icon';\n\nexport type NumericProps = {\n\t/**\n\t * The minimum `value` allowed.\n\t *\n\t * @default 0\n\t */\n\tmin?: number;\n\t/**\n\t * The maximum `value` allowed.\n\t *\n\t * @default 100\n\t */\n\tmax?: number;\n\t/**\n\t * The current value of the range slider.\n\t */\n\tvalue?: number;\n};\n\nexport type RangeMark = { value: number; label?: string };\n// An expanded definition of this type is used in MarkProps to improve Storybook\n// generated docs.\nexport type RangeMarks = boolean | RangeMark[];\n\nexport type MarksProps = NumericProps & {\n\t/**\n\t * Disables the `input`, preventing new values from being applied.\n\t *\n\t * @default false\n\t */\n\tdisabled?: boolean;\n\t/**\n\t * Renders a visual representation of `step` ticks. Custom mark indicators\n\t * can be provided by an `Array`.\n\t *\n\t * @default false\n\t */\n\tmarks?: boolean | { value: number; label?: string }[];\n\t/**\n\t * The minimum amount by which `value` changes. It is also a factor in\n\t * validation as `value` must be a multiple of `step` (offset by `min`) to\n\t * be valid. Accepts the special string value `any` that voids the\n\t * validation constraint and overrides both `withInputField` and\n\t * `showTooltip` props to `false`.\n\t *\n\t * @default 1\n\t */\n\tstep?: number | 'any';\n};\n\nexport type RangeMarkProps = {\n\tisFilled?: boolean;\n\tlabel?: string;\n\tdisabled?: boolean;\n\tkey?: string;\n\tstyle?: CSSProperties;\n};\n\nexport type ControlledRangeValue = number | '' | null;\n\nexport type RangeControlProps = Pick<\n\tBaseControlProps,\n\t'hideLabelFromVision' | 'help' | '__nextHasNoMarginBottom'\n> &\n\tMarksProps & {\n\t\t/**\n\t\t * If this property is added, an Icon component will be rendered\n\t\t * after the slider with the icon equal to afterIcon.\n\t\t *\n\t\t * For more information on `IconType` see the Icon component:\n\t\t * /packages/components/src/icon/index.tsx\n\t\t */\n\t\tafterIcon?: IconType;\n\t\t/**\n\t\t * If this property is true, a button to reset the slider is\n\t\t * rendered.\n\t\t *\n\t\t * @default false\n\t\t */\n\t\tallowReset?: boolean;\n\t\t/**\n\t\t * If this property is added, an Icon component will be rendered\n\t\t * before the slider with the icon equal to beforeIcon.\n\t\t *\n\t\t * For more information on `IconType` see the Icon component:\n\t\t * /packages/components/src/icon/index.tsx\n\t\t */\n\t\tbeforeIcon?: IconType;\n\t\t/**\n\t\t * CSS color string for the `RangeControl` wrapper.\n\t\t *\n\t\t * @default COLORS.theme.accent\n\t\t * @see /packages/components/src/utils/colors-values.js\n\t\t */\n\t\tcolor?: CSSProperties[ 'color' ];\n\t\t/**\n\t\t * The current input to use as a fallback if `value` is currently\n\t\t * `undefined`.\n\t\t */\n\t\tcurrentInput?: number;\n\t\t/**\n\t\t * An icon to be shown above the slider next to its container title.\n\t\t */\n\t\ticon?: string;\n\t\t/**\n\t\t * The slider starting position, used when no `value` is passed.\n\t\t * The `initialPosition` will be clamped between the provided `min`\n\t\t * and `max` prop values.\n\t\t */\n\t\tinitialPosition?: number;\n\t\t/**\n\t\t * Passed as a prop to the `NumberControl` component and is only\n\t\t * applicable if `withInputField` is true. If true, while the number\n\t\t * input has focus, pressing `UP` or `DOWN` along with the `SHIFT` key\n\t\t * will change the value by the `shiftStep` value.\n\t\t *\n\t\t * @default true\n\t\t */\n\t\tisShiftStepEnabled?: boolean;\n\t\t/**\n\t\t * If this property is added, a label will be generated using label\n\t\t * property as the content.\n\t\t */\n\t\tlabel?: string;\n\t\t/**\n\t\t * Callback for when `RangeControl` input loses focus.\n\t\t *\n\t\t * @default () => void\n\t\t */\n\t\tonBlur?: FocusEventHandler< HTMLInputElement >;\n\t\t/**\n\t\t * A function that receives the new value. The value will be less than\n\t\t * `max` and more than `min` unless a reset (enabled by `allowReset`)\n\t\t * has occurred. In which case the value will be either that of\n\t\t * `resetFallbackValue` if it has been specified or otherwise\n\t\t * `undefined`.\n\t\t *\n\t\t * @default () => void\n\t\t */\n\t\tonChange?: ( value?: number ) => void;\n\t\t/**\n\t\t * Callback for when `RangeControl` input gains focus.\n\t\t *\n\t\t * @default () => void\n\t\t */\n\t\tonFocus?: FocusEventHandler< HTMLInputElement >;\n\t\t/**\n\t\t * Callback for when mouse exits the `RangeControl`.\n\t\t *\n\t\t * @default () => void\n\t\t */\n\t\tonMouseLeave?: MouseEventHandler< HTMLInputElement >;\n\t\t/**\n\t\t * Callback for when mouse moves within the `RangeControl`.\n\t\t *\n\t\t * @default () => void\n\t\t */\n\t\tonMouseMove?: MouseEventHandler< HTMLInputElement >;\n\t\t/**\n\t\t * CSS color string to customize the rail element's background.\n\t\t */\n\t\trailColor?: CSSProperties[ 'color' ];\n\t\t/**\n\t\t * A way to customize the rendered UI of the value.\n\t\t *\n\t\t * @default ( value ) => value\n\t\t */\n\t\trenderTooltipContent?: (\n\t\t\tvalue?: ControlledRangeValue\n\t\t) => string | number | null | undefined;\n\t\t/**\n\t\t * The value to revert to if the Reset button is clicked (enabled by\n\t\t * `allowReset`)\n\t\t */\n\t\tresetFallbackValue?: number;\n\t\t/**\n\t\t * Define if separator line under/above control row should be disabled\n\t\t * or full width. By default it is placed below excluding underline the\n\t\t * control icon.\n\t\t */\n\t\tseparatorType?: 'none' | 'fullWidth' | 'topFullWidth';\n\t\t/**\n\t\t * Passed as a prop to the `NumberControl` component and is only\n\t\t * applicable if `withInputField` and `isShiftStepEnabled` are both true\n\t\t * and while the number input has focus. Acts as a multiplier of `step`.\n\t\t *\n\t\t * @default 10\n\t\t */\n\t\tshiftStep?: number;\n\t\t/**\n\t\t * Start opting into the larger default height that will become the default size in a future version.\n\t\t *\n\t\t * @default false\n\t\t */\n\t\t__next40pxDefaultSize?: boolean;\n\t\t/**\n\t\t * Forcing the Tooltip UI to show or hide. This is overridden to `false`\n\t\t * when `step` is set to the special string value `any`.\n\t\t */\n\t\tshowTooltip?: boolean;\n\t\t/**\n\t\t * CSS color string to customize the track element's background.\n\t\t */\n\t\ttrackColor?: CSSProperties[ 'color' ];\n\t\t/**\n\t\t * Define if the value selection should present a stepper control or a\n\t\t * slider control in the bottom sheet on mobile. To use the stepper set\n\t\t * the type value as `stepper`. Defaults to slider if no option is\n\t\t * provided.\n\t\t */\n\t\ttype?: 'stepper';\n\t\t/**\n\t\t * Determines if the `input` number field will render next to the\n\t\t * RangeControl. This is overridden to `false` when `step` is set to the\n\t\t * special string value `any`.\n\t\t *\n\t\t * @default true\n\t\t */\n\t\twithInputField?: boolean;\n\t\t/**\n\t\t * Do not throw a warning for the deprecated 36px default size.\n\t\t * For internal components of other components that already throw the warning.\n\t\t *\n\t\t * @ignore\n\t\t */\n\t\t__shouldNotWarnDeprecated36pxSize?: boolean;\n\t};\n\nexport type RailProps = MarksProps & {\n\trailColor?: CSSProperties[ 'color' ];\n};\n\nexport type InputRangeProps = {\n\tdescribedBy?: string;\n\tlabel?: string;\n\tonMouseLeave?: MouseEventHandler< HTMLInputElement >;\n\tonMouseMove?: MouseEventHandler< HTMLInputElement >;\n\tvalue?: number | '';\n};\n\nexport type WrapperProps = Pick<\n\tBaseControlProps,\n\t'__nextHasNoMarginBottom'\n> & {\n\tcolor?: CSSProperties[ 'color' ];\n\tmarks?: RangeMarks;\n};\n\nexport type ThumbProps = {\n\tisFocused?: boolean;\n\tdisabled?: boolean;\n};\n\nexport type TooltipProps = {\n\tshow?: boolean;\n\tposition?: string;\n\tinputRef?: MutableRefObject< HTMLElement | undefined >;\n\ttooltipPosition?: string;\n\tvalue?: ControlledRangeValue;\n\trenderTooltipContent?: (\n\t\tvalue?: ControlledRangeValue\n\t) => string | number | null | undefined;\n\tzIndex?: number;\n};\n\nexport type TrackProps = {\n\tdisabled: boolean;\n\ttrackColor: CSSProperties[ 'color' ];\n};\n\nexport type UseControlledRangeValueArgs = {\n\t/**\n\t * The initial value.\n\t */\n\tinitial?: number;\n\t/**\n\t * The maximum value.\n\t */\n\tmax: number;\n\t/**\n\t * The minimum value.\n\t */\n\tmin: number;\n\t/**\n\t * The current value.\n\t */\n\tvalue: number | null;\n};\n\nexport type UseMarksArgs = NumericProps & {\n\tmarks: RangeMarks;\n\tstep: number;\n};\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["@wordpress/components/src/range-control/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type {\n\tCSSProperties,\n\tFocusEventHandler,\n\tMouseEventHandler,\n\tMutableRefObject,\n} from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { BaseControlProps } from '../base-control/types';\nimport type { IconType } from '../icon';\n\nexport type NumericProps = {\n\t/**\n\t * The minimum `value` allowed.\n\t *\n\t * @default 0\n\t */\n\tmin?: number;\n\t/**\n\t * The maximum `value` allowed.\n\t *\n\t * @default 100\n\t */\n\tmax?: number;\n\t/**\n\t * The current value of the range slider.\n\t */\n\tvalue?: number;\n};\n\nexport type RangeMark = { value: number; label?: string };\n// An expanded definition of this type is used in MarkProps to improve Storybook\n// generated docs.\nexport type RangeMarks = boolean | RangeMark[];\n\nexport type MarksProps = NumericProps & {\n\t/**\n\t * Disables the `input`, preventing new values from being applied.\n\t *\n\t * @default false\n\t */\n\tdisabled?: boolean;\n\t/**\n\t * Renders a visual representation of `step` ticks. Custom mark indicators\n\t * can be provided by an `Array`.\n\t *\n\t * @default false\n\t */\n\tmarks?: boolean | { value: number; label?: string }[];\n\t/**\n\t * The minimum amount by which `value` changes. It is also a factor in\n\t * validation as `value` must be a multiple of `step` (offset by `min`) to\n\t * be valid. Accepts the special string value `any` that voids the\n\t * validation constraint and overrides both `withInputField` and\n\t * `showTooltip` props to `false`.\n\t *\n\t * @default 1\n\t */\n\tstep?: number | 'any';\n};\n\nexport type RangeMarkProps = {\n\tisFilled?: boolean;\n\tlabel?: string;\n\tdisabled?: boolean;\n\tkey?: string;\n\tstyle?: CSSProperties;\n};\n\nexport type ControlledRangeValue = number | '' | null;\n\nexport type RangeControlProps = Pick<\n\tBaseControlProps,\n\t'hideLabelFromVision' | 'help' | '__nextHasNoMarginBottom'\n> &\n\tMarksProps & {\n\t\t/**\n\t\t * If this property is added, an Icon component will be rendered\n\t\t * after the slider with the icon equal to afterIcon.\n\t\t *\n\t\t * For more information on `IconType` see the Icon component:\n\t\t * /packages/components/src/icon/index.tsx\n\t\t */\n\t\tafterIcon?: IconType;\n\t\t/**\n\t\t * If this property is true, a button to reset the slider is\n\t\t * rendered.\n\t\t *\n\t\t * @default false\n\t\t */\n\t\tallowReset?: boolean;\n\t\t/**\n\t\t * If this property is added, an Icon component will be rendered\n\t\t * before the slider with the icon equal to beforeIcon.\n\t\t *\n\t\t * For more information on `IconType` see the Icon component:\n\t\t * /packages/components/src/icon/index.tsx\n\t\t */\n\t\tbeforeIcon?: IconType;\n\t\t/**\n\t\t * CSS color string for the `RangeControl` wrapper.\n\t\t *\n\t\t * @default COLORS.theme.accent\n\t\t * @see /packages/components/src/utils/colors-values.js\n\t\t */\n\t\tcolor?: CSSProperties[ 'color' ];\n\t\t/**\n\t\t * The current input to use as a fallback if `value` is currently\n\t\t * `undefined`.\n\t\t */\n\t\tcurrentInput?: number;\n\t\t/**\n\t\t * An icon to be shown above the slider next to its container title.\n\t\t */\n\t\ticon?: string;\n\t\t/**\n\t\t * The slider starting position, used when no `value` is passed.\n\t\t * The `initialPosition` will be clamped between the provided `min`\n\t\t * and `max` prop values.\n\t\t */\n\t\tinitialPosition?: number;\n\t\t/**\n\t\t * Passed as a prop to the `NumberControl` component and is only\n\t\t * applicable if `withInputField` is true. If true, while the number\n\t\t * input has focus, pressing `UP` or `DOWN` along with the `SHIFT` key\n\t\t * will change the value by the `shiftStep` value.\n\t\t *\n\t\t * @default true\n\t\t */\n\t\tisShiftStepEnabled?: boolean;\n\t\t/**\n\t\t * If this property is added, a label will be generated using label\n\t\t * property as the content.\n\t\t */\n\t\tlabel?: string;\n\t\t/**\n\t\t * Callback for when `RangeControl` input loses focus.\n\t\t *\n\t\t * @default () => void\n\t\t */\n\t\tonBlur?: FocusEventHandler< HTMLInputElement >;\n\t\t/**\n\t\t * A function that receives the new value. The value will be less than\n\t\t * `max` and more than `min` unless a reset (enabled by `allowReset`)\n\t\t * has occurred. In which case the value will be either that of\n\t\t * `resetFallbackValue` if it has been specified or otherwise\n\t\t * `undefined`.\n\t\t *\n\t\t * @default () => void\n\t\t */\n\t\tonChange?: ( value?: number ) => void;\n\t\t/**\n\t\t * Callback for when `RangeControl` input gains focus.\n\t\t *\n\t\t * @default () => void\n\t\t */\n\t\tonFocus?: FocusEventHandler< HTMLInputElement >;\n\t\t/**\n\t\t * Callback for when mouse exits the `RangeControl`.\n\t\t *\n\t\t * @default () => void\n\t\t */\n\t\tonMouseLeave?: MouseEventHandler< HTMLInputElement >;\n\t\t/**\n\t\t * Callback for when mouse moves within the `RangeControl`.\n\t\t *\n\t\t * @default () => void\n\t\t */\n\t\tonMouseMove?: MouseEventHandler< HTMLInputElement >;\n\t\t/**\n\t\t * CSS color string to customize the rail element's background.\n\t\t */\n\t\trailColor?: CSSProperties[ 'color' ];\n\t\t/**\n\t\t * A way to customize the rendered UI of the value.\n\t\t *\n\t\t * @default ( value ) => value\n\t\t */\n\t\trenderTooltipContent?: (\n\t\t\tvalue?: ControlledRangeValue\n\t\t) => string | number | null | undefined;\n\t\t/**\n\t\t * The value to revert to if the Reset button is clicked (enabled by\n\t\t * `allowReset`)\n\t\t */\n\t\tresetFallbackValue?: number;\n\t\t/**\n\t\t * Define if separator line under/above control row should be disabled\n\t\t * or full width. By default it is placed below excluding underline the\n\t\t * control icon.\n\t\t */\n\t\tseparatorType?: 'none' | 'fullWidth' | 'topFullWidth';\n\t\t/**\n\t\t * Passed as a prop to the `NumberControl` component and is only\n\t\t * applicable if `withInputField` and `isShiftStepEnabled` are both true\n\t\t * and while the number input has focus. Acts as a multiplier of `step`.\n\t\t *\n\t\t * @default 10\n\t\t */\n\t\tshiftStep?: number;\n\t\t/**\n\t\t * Start opting into the larger default height that will become the default size in a future version.\n\t\t *\n\t\t * @default false\n\t\t */\n\t\t__next40pxDefaultSize?: boolean;\n\t\t/**\n\t\t * Forcing the Tooltip UI to show or hide. This is overridden to `false`\n\t\t * when `step` is set to the special string value `any`.\n\t\t */\n\t\tshowTooltip?: boolean;\n\t\t/**\n\t\t * CSS color string to customize the track element's background.\n\t\t */\n\t\ttrackColor?: CSSProperties[ 'color' ];\n\t\t/**\n\t\t * Define if the value selection should present a stepper control or a\n\t\t * slider control in the bottom sheet on mobile. To use the stepper set\n\t\t * the type value as `stepper`. Defaults to slider if no option is\n\t\t * provided.\n\t\t */\n\t\ttype?: 'stepper';\n\t\t/**\n\t\t * Determines if the `input` number field will render next to the\n\t\t * RangeControl. This is overridden to `false` when `step` is set to the\n\t\t * special string value `any`.\n\t\t *\n\t\t * @default true\n\t\t */\n\t\twithInputField?: boolean;\n\t\t/**\n\t\t * Do not throw a warning for the deprecated 36px default size.\n\t\t * For internal components of other components that already throw the warning.\n\t\t *\n\t\t * @ignore\n\t\t */\n\t\t__shouldNotWarnDeprecated36pxSize?: boolean;\n\t};\n\nexport type RailProps = MarksProps & {\n\trailColor?: CSSProperties[ 'color' ];\n};\n\nexport type InputRangeProps = {\n\tdescribedBy?: string;\n\tlabel?: string;\n\tonMouseLeave?: MouseEventHandler< HTMLInputElement >;\n\tonMouseMove?: MouseEventHandler< HTMLInputElement >;\n\tvalue?: number | '';\n};\n\nexport type WrapperProps = Pick<\n\tBaseControlProps,\n\t'__nextHasNoMarginBottom'\n> & {\n\tcolor?: CSSProperties[ 'color' ];\n\tmarks?: RangeMarks;\n};\n\nexport type ThumbProps = {\n\tisFocused?: boolean;\n\tdisabled?: boolean;\n};\n\nexport type TooltipProps = {\n\tshow?: boolean;\n\tplacement?: string;\n\tinputRef?: MutableRefObject< HTMLElement | undefined >;\n\ttooltipPlacement?: string;\n\tvalue?: ControlledRangeValue;\n\trenderTooltipContent?: (\n\t\tvalue?: ControlledRangeValue\n\t) => string | number | null | undefined;\n\tzIndex?: number;\n};\n\nexport type TrackProps = {\n\tdisabled: boolean;\n\ttrackColor: CSSProperties[ 'color' ];\n};\n\nexport type UseControlledRangeValueArgs = {\n\t/**\n\t * The initial value.\n\t */\n\tinitial?: number;\n\t/**\n\t * The maximum value.\n\t */\n\tmax: number;\n\t/**\n\t * The minimum value.\n\t */\n\tmin: number;\n\t/**\n\t * The current value.\n\t */\n\tvalue: number | null;\n};\n\nexport type UseMarksArgs = NumericProps & {\n\tmarks: RangeMarks;\n\tstep: number;\n};\n"],"mappings":"","ignoreList":[]}

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

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
@@ -25,6 +30,7 @@ function UnforwardedTextareaControl(props, ref) {
   const instanceId = useInstanceId(TextareaControl);
   const id = `inspector-textarea-control-${instanceId}`;
   const onChangeValue = event => onChange(event.target.value);
+  const classes = clsx('components-textarea-control', className);
   return /*#__PURE__*/_jsx(BaseControl, {
     __nextHasNoMarginBottom: __nextHasNoMarginBottom,
     __associatedWPComponentName: "TextareaControl",
@@ -32,7 +38,7 @@ function UnforwardedTextareaControl(props, ref) {
     hideLabelFromVision: hideLabelFromVision,
     id: id,
     help: help,
-    className: className,
+    className: classes,
     children: /*#__PURE__*/_jsx(StyledTextarea, {
       className: "components-textarea-control__input",
       id: id,

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

@@ -1 +1 @@
-{"version":3,"names":["useInstanceId","forwardRef","BaseControl","StyledTextarea","jsx","_jsx","UnforwardedTextareaControl","props","ref","__nextHasNoMarginBottom","label","hideLabelFromVision","value","help","onChange","rows","className","additionalProps","instanceId","TextareaControl","id","onChangeValue","event","target","__associatedWPComponentName","children","undefined"],"sources":["@wordpress/components/src/textarea-control/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport { StyledTextarea } from './styles/textarea-control-styles';\nimport type { TextareaControlProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nfunction UnforwardedTextareaControl(\n\tprops: WordPressComponentProps< TextareaControlProps, 'textarea', false >,\n\tref: React.ForwardedRef< HTMLTextAreaElement >\n) {\n\tconst {\n\t\t__nextHasNoMarginBottom,\n\t\tlabel,\n\t\thideLabelFromVision,\n\t\tvalue,\n\t\thelp,\n\t\tonChange,\n\t\trows = 4,\n\t\tclassName,\n\t\t...additionalProps\n\t} = props;\n\tconst instanceId = useInstanceId( TextareaControl );\n\tconst id = `inspector-textarea-control-${ instanceId }`;\n\tconst onChangeValue = ( event: React.ChangeEvent< HTMLTextAreaElement > ) =>\n\t\tonChange( event.target.value );\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t__associatedWPComponentName=\"TextareaControl\"\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tid={ id }\n\t\t\thelp={ help }\n\t\t\tclassName={ className }\n\t\t>\n\t\t\t<StyledTextarea\n\t\t\t\tclassName=\"components-textarea-control__input\"\n\t\t\t\tid={ id }\n\t\t\t\trows={ rows }\n\t\t\t\tonChange={ onChangeValue }\n\t\t\t\taria-describedby={ !! help ? id + '__help' : undefined }\n\t\t\t\tvalue={ value }\n\t\t\t\tref={ ref }\n\t\t\t\t{ ...additionalProps }\n\t\t\t/>\n\t\t</BaseControl>\n\t);\n}\n\n/**\n * TextareaControls are TextControls that allow for multiple lines of text, and\n * wrap overflow text onto a new line. They are a fixed height and scroll\n * vertically when the cursor reaches the bottom of the field.\n *\n * ```jsx\n * import { TextareaControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyTextareaControl = () => {\n *   const [ text, setText ] = useState( '' );\n *\n *   return (\n *     <TextareaControl\n *       __nextHasNoMarginBottom\n *       label=\"Text\"\n *       help=\"Enter some text\"\n *       value={ text }\n *       onChange={ ( value ) => setText( value ) }\n *     />\n *   );\n * };\n * ```\n */\nexport const TextareaControl = forwardRef( UnforwardedTextareaControl );\n\nexport default TextareaControl;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,aAAa,QAAQ,oBAAoB;AAClD,SAASC,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;AACA,OAAOC,WAAW,MAAM,iBAAiB;AACzC,SAASC,cAAc,QAAQ,kCAAkC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAIlE,SAASC,0BAA0BA,CAClCC,KAAyE,EACzEC,GAA8C,EAC7C;EACD,MAAM;IACLC,uBAAuB;IACvBC,KAAK;IACLC,mBAAmB;IACnBC,KAAK;IACLC,IAAI;IACJC,QAAQ;IACRC,IAAI,GAAG,CAAC;IACRC,SAAS;IACT,GAAGC;EACJ,CAAC,GAAGV,KAAK;EACT,MAAMW,UAAU,GAAGlB,aAAa,CAAEmB,eAAgB,CAAC;EACnD,MAAMC,EAAE,GAAG,8BAA+BF,UAAU,EAAG;EACvD,MAAMG,aAAa,GAAKC,KAA+C,IACtER,QAAQ,CAAEQ,KAAK,CAACC,MAAM,CAACX,KAAM,CAAC;EAE/B,oBACCP,IAAA,CAACH,WAAW;IACXO,uBAAuB,EAAGA,uBAAyB;IACnDe,2BAA2B,EAAC,iBAAiB;IAC7Cd,KAAK,EAAGA,KAAO;IACfC,mBAAmB,EAAGA,mBAAqB;IAC3CS,EAAE,EAAGA,EAAI;IACTP,IAAI,EAAGA,IAAM;IACbG,SAAS,EAAGA,SAAW;IAAAS,QAAA,eAEvBpB,IAAA,CAACF,cAAc;MACda,SAAS,EAAC,oCAAoC;MAC9CI,EAAE,EAAGA,EAAI;MACTL,IAAI,EAAGA,IAAM;MACbD,QAAQ,EAAGO,aAAe;MAC1B,oBAAmB,CAAC,CAAER,IAAI,GAAGO,EAAE,GAAG,QAAQ,GAAGM,SAAW;MACxDd,KAAK,EAAGA,KAAO;MACfJ,GAAG,EAAGA,GAAK;MAAA,GACNS;IAAe,CACpB;EAAC,CACU,CAAC;AAEhB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAME,eAAe,GAAGlB,UAAU,CAAEK,0BAA2B,CAAC;AAEvE,eAAea,eAAe","ignoreList":[]}
+{"version":3,"names":["clsx","useInstanceId","forwardRef","BaseControl","StyledTextarea","jsx","_jsx","UnforwardedTextareaControl","props","ref","__nextHasNoMarginBottom","label","hideLabelFromVision","value","help","onChange","rows","className","additionalProps","instanceId","TextareaControl","id","onChangeValue","event","target","classes","__associatedWPComponentName","children","undefined"],"sources":["@wordpress/components/src/textarea-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport { StyledTextarea } from './styles/textarea-control-styles';\nimport type { TextareaControlProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nfunction UnforwardedTextareaControl(\n\tprops: WordPressComponentProps< TextareaControlProps, 'textarea', false >,\n\tref: React.ForwardedRef< HTMLTextAreaElement >\n) {\n\tconst {\n\t\t__nextHasNoMarginBottom,\n\t\tlabel,\n\t\thideLabelFromVision,\n\t\tvalue,\n\t\thelp,\n\t\tonChange,\n\t\trows = 4,\n\t\tclassName,\n\t\t...additionalProps\n\t} = props;\n\tconst instanceId = useInstanceId( TextareaControl );\n\tconst id = `inspector-textarea-control-${ instanceId }`;\n\tconst onChangeValue = ( event: React.ChangeEvent< HTMLTextAreaElement > ) =>\n\t\tonChange( event.target.value );\n\n\tconst classes = clsx( 'components-textarea-control', className );\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t__associatedWPComponentName=\"TextareaControl\"\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tid={ id }\n\t\t\thelp={ help }\n\t\t\tclassName={ classes }\n\t\t>\n\t\t\t<StyledTextarea\n\t\t\t\tclassName=\"components-textarea-control__input\"\n\t\t\t\tid={ id }\n\t\t\t\trows={ rows }\n\t\t\t\tonChange={ onChangeValue }\n\t\t\t\taria-describedby={ !! help ? id + '__help' : undefined }\n\t\t\t\tvalue={ value }\n\t\t\t\tref={ ref }\n\t\t\t\t{ ...additionalProps }\n\t\t\t/>\n\t\t</BaseControl>\n\t);\n}\n\n/**\n * TextareaControls are TextControls that allow for multiple lines of text, and\n * wrap overflow text onto a new line. They are a fixed height and scroll\n * vertically when the cursor reaches the bottom of the field.\n *\n * ```jsx\n * import { TextareaControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyTextareaControl = () => {\n *   const [ text, setText ] = useState( '' );\n *\n *   return (\n *     <TextareaControl\n *       __nextHasNoMarginBottom\n *       label=\"Text\"\n *       help=\"Enter some text\"\n *       value={ text }\n *       onChange={ ( value ) => setText( value ) }\n *     />\n *   );\n * };\n * ```\n */\nexport const TextareaControl = forwardRef( UnforwardedTextareaControl );\n\nexport default TextareaControl;\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,aAAa,QAAQ,oBAAoB;AAClD,SAASC,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;AACA,OAAOC,WAAW,MAAM,iBAAiB;AACzC,SAASC,cAAc,QAAQ,kCAAkC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAIlE,SAASC,0BAA0BA,CAClCC,KAAyE,EACzEC,GAA8C,EAC7C;EACD,MAAM;IACLC,uBAAuB;IACvBC,KAAK;IACLC,mBAAmB;IACnBC,KAAK;IACLC,IAAI;IACJC,QAAQ;IACRC,IAAI,GAAG,CAAC;IACRC,SAAS;IACT,GAAGC;EACJ,CAAC,GAAGV,KAAK;EACT,MAAMW,UAAU,GAAGlB,aAAa,CAAEmB,eAAgB,CAAC;EACnD,MAAMC,EAAE,GAAG,8BAA+BF,UAAU,EAAG;EACvD,MAAMG,aAAa,GAAKC,KAA+C,IACtER,QAAQ,CAAEQ,KAAK,CAACC,MAAM,CAACX,KAAM,CAAC;EAE/B,MAAMY,OAAO,GAAGzB,IAAI,CAAE,6BAA6B,EAAEiB,SAAU,CAAC;EAEhE,oBACCX,IAAA,CAACH,WAAW;IACXO,uBAAuB,EAAGA,uBAAyB;IACnDgB,2BAA2B,EAAC,iBAAiB;IAC7Cf,KAAK,EAAGA,KAAO;IACfC,mBAAmB,EAAGA,mBAAqB;IAC3CS,EAAE,EAAGA,EAAI;IACTP,IAAI,EAAGA,IAAM;IACbG,SAAS,EAAGQ,OAAS;IAAAE,QAAA,eAErBrB,IAAA,CAACF,cAAc;MACda,SAAS,EAAC,oCAAoC;MAC9CI,EAAE,EAAGA,EAAI;MACTL,IAAI,EAAGA,IAAM;MACbD,QAAQ,EAAGO,aAAe;MAC1B,oBAAmB,CAAC,CAAER,IAAI,GAAGO,EAAE,GAAG,QAAQ,GAAGO,SAAW;MACxDf,KAAK,EAAGA,KAAO;MACfJ,GAAG,EAAGA,GAAK;MAAA,GACNS;IAAe,CACpB;EAAC,CACU,CAAC;AAEhB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAME,eAAe,GAAGlB,UAAU,CAAEK,0BAA2B,CAAC;AAEvE,eAAea,eAAe","ignoreList":[]}

package/build-style/style-rtl.css

@@ -2018,7 +2018,7 @@ body.is-dragging-components-draggable {
   border-bottom: none;
   padding: 0;
   position: sticky;
-  height: 60px;
+  height: 64px;
 }
 .components-guide .components-modal__header .components-button {
   align-self: flex-start;
@@ -2032,7 +2032,7 @@ body.is-dragging-components-draggable {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  margin-top: -60px;
+  margin-top: -64px;
   min-height: 100%;
 }
 .components-guide .components-guide__page {
@@ -2329,7 +2329,7 @@ body.is-dragging-components-draggable {
     width: auto;
     min-width: 350px;
     max-width: calc(100% - 32px);
-    max-height: calc(100% - 120px);
+    max-height: calc(100% - 128px);
   }
 }
 @media (min-width: 600px) and (min-width: 600px) {
@@ -3501,6 +3501,7 @@ body.lockscroll {
   box-shadow: 0 0 0 transparent;
   border-radius: 2px;
   border: 1px solid #949494;
+  border-color: var(--wp-components-color-gray-600, #949494);
 }
 @media not (prefers-reduced-motion) {
   .components-text-control__input,
@@ -3558,53 +3559,21 @@ body.lockscroll {
   box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: 2px solid transparent;
 }
-.components-text-control__input::-webkit-input-placeholder,
-.components-text-control__input[type=text]::-webkit-input-placeholder,
-.components-text-control__input[type=tel]::-webkit-input-placeholder,
-.components-text-control__input[type=time]::-webkit-input-placeholder,
-.components-text-control__input[type=url]::-webkit-input-placeholder,
-.components-text-control__input[type=week]::-webkit-input-placeholder,
-.components-text-control__input[type=password]::-webkit-input-placeholder,
-.components-text-control__input[type=color]::-webkit-input-placeholder,
-.components-text-control__input[type=date]::-webkit-input-placeholder,
-.components-text-control__input[type=datetime]::-webkit-input-placeholder,
-.components-text-control__input[type=datetime-local]::-webkit-input-placeholder,
-.components-text-control__input[type=email]::-webkit-input-placeholder,
-.components-text-control__input[type=month]::-webkit-input-placeholder,
-.components-text-control__input[type=number]::-webkit-input-placeholder {
-  color: rgba(30, 30, 30, 0.62);
-}
-.components-text-control__input::-moz-placeholder,
-.components-text-control__input[type=text]::-moz-placeholder,
-.components-text-control__input[type=tel]::-moz-placeholder,
-.components-text-control__input[type=time]::-moz-placeholder,
-.components-text-control__input[type=url]::-moz-placeholder,
-.components-text-control__input[type=week]::-moz-placeholder,
-.components-text-control__input[type=password]::-moz-placeholder,
-.components-text-control__input[type=color]::-moz-placeholder,
-.components-text-control__input[type=date]::-moz-placeholder,
-.components-text-control__input[type=datetime]::-moz-placeholder,
-.components-text-control__input[type=datetime-local]::-moz-placeholder,
-.components-text-control__input[type=email]::-moz-placeholder,
-.components-text-control__input[type=month]::-moz-placeholder,
-.components-text-control__input[type=number]::-moz-placeholder {
-  color: rgba(30, 30, 30, 0.62);
-}
-.components-text-control__input:-ms-input-placeholder,
-.components-text-control__input[type=text]:-ms-input-placeholder,
-.components-text-control__input[type=tel]:-ms-input-placeholder,
-.components-text-control__input[type=time]:-ms-input-placeholder,
-.components-text-control__input[type=url]:-ms-input-placeholder,
-.components-text-control__input[type=week]:-ms-input-placeholder,
-.components-text-control__input[type=password]:-ms-input-placeholder,
-.components-text-control__input[type=color]:-ms-input-placeholder,
-.components-text-control__input[type=date]:-ms-input-placeholder,
-.components-text-control__input[type=datetime]:-ms-input-placeholder,
-.components-text-control__input[type=datetime-local]:-ms-input-placeholder,
-.components-text-control__input[type=email]:-ms-input-placeholder,
-.components-text-control__input[type=month]:-ms-input-placeholder,
-.components-text-control__input[type=number]:-ms-input-placeholder {
-  color: rgba(30, 30, 30, 0.62);
+.components-text-control__input::placeholder,
+.components-text-control__input[type=text]::placeholder,
+.components-text-control__input[type=tel]::placeholder,
+.components-text-control__input[type=time]::placeholder,
+.components-text-control__input[type=url]::placeholder,
+.components-text-control__input[type=week]::placeholder,
+.components-text-control__input[type=password]::placeholder,
+.components-text-control__input[type=color]::placeholder,
+.components-text-control__input[type=date]::placeholder,
+.components-text-control__input[type=datetime]::placeholder,
+.components-text-control__input[type=datetime-local]::placeholder,
+.components-text-control__input[type=email]::placeholder,
+.components-text-control__input[type=month]::placeholder,
+.components-text-control__input[type=number]::placeholder {
+  color: color-mix(in srgb, var(--wp-components-color-foreground, #1e1e1e), transparent 38%);
 }
 .components-text-control__input.is-next-40px-default-size,
 .components-text-control__input[type=text].is-next-40px-default-size,

package/build-style/style.css

@@ -2023,7 +2023,7 @@ body.is-dragging-components-draggable {
   border-bottom: none;
   padding: 0;
   position: sticky;
-  height: 60px;
+  height: 64px;
 }
 .components-guide .components-modal__header .components-button {
   align-self: flex-start;
@@ -2037,7 +2037,7 @@ body.is-dragging-components-draggable {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  margin-top: -60px;
+  margin-top: -64px;
   min-height: 100%;
 }
 .components-guide .components-guide__page {
@@ -2334,7 +2334,7 @@ body.is-dragging-components-draggable {
     width: auto;
     min-width: 350px;
     max-width: calc(100% - 32px);
-    max-height: calc(100% - 120px);
+    max-height: calc(100% - 128px);
   }
 }
 @media (min-width: 600px) and (min-width: 600px) {
@@ -3513,6 +3513,7 @@ body.lockscroll {
   box-shadow: 0 0 0 transparent;
   border-radius: 2px;
   border: 1px solid #949494;
+  border-color: var(--wp-components-color-gray-600, #949494);
 }
 @media not (prefers-reduced-motion) {
   .components-text-control__input,
@@ -3570,53 +3571,21 @@ body.lockscroll {
   box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: 2px solid transparent;
 }
-.components-text-control__input::-webkit-input-placeholder,
-.components-text-control__input[type=text]::-webkit-input-placeholder,
-.components-text-control__input[type=tel]::-webkit-input-placeholder,
-.components-text-control__input[type=time]::-webkit-input-placeholder,
-.components-text-control__input[type=url]::-webkit-input-placeholder,
-.components-text-control__input[type=week]::-webkit-input-placeholder,
-.components-text-control__input[type=password]::-webkit-input-placeholder,
-.components-text-control__input[type=color]::-webkit-input-placeholder,
-.components-text-control__input[type=date]::-webkit-input-placeholder,
-.components-text-control__input[type=datetime]::-webkit-input-placeholder,
-.components-text-control__input[type=datetime-local]::-webkit-input-placeholder,
-.components-text-control__input[type=email]::-webkit-input-placeholder,
-.components-text-control__input[type=month]::-webkit-input-placeholder,
-.components-text-control__input[type=number]::-webkit-input-placeholder {
-  color: rgba(30, 30, 30, 0.62);
-}
-.components-text-control__input::-moz-placeholder,
-.components-text-control__input[type=text]::-moz-placeholder,
-.components-text-control__input[type=tel]::-moz-placeholder,
-.components-text-control__input[type=time]::-moz-placeholder,
-.components-text-control__input[type=url]::-moz-placeholder,
-.components-text-control__input[type=week]::-moz-placeholder,
-.components-text-control__input[type=password]::-moz-placeholder,
-.components-text-control__input[type=color]::-moz-placeholder,
-.components-text-control__input[type=date]::-moz-placeholder,
-.components-text-control__input[type=datetime]::-moz-placeholder,
-.components-text-control__input[type=datetime-local]::-moz-placeholder,
-.components-text-control__input[type=email]::-moz-placeholder,
-.components-text-control__input[type=month]::-moz-placeholder,
-.components-text-control__input[type=number]::-moz-placeholder {
-  color: rgba(30, 30, 30, 0.62);
-}
-.components-text-control__input:-ms-input-placeholder,
-.components-text-control__input[type=text]:-ms-input-placeholder,
-.components-text-control__input[type=tel]:-ms-input-placeholder,
-.components-text-control__input[type=time]:-ms-input-placeholder,
-.components-text-control__input[type=url]:-ms-input-placeholder,
-.components-text-control__input[type=week]:-ms-input-placeholder,
-.components-text-control__input[type=password]:-ms-input-placeholder,
-.components-text-control__input[type=color]:-ms-input-placeholder,
-.components-text-control__input[type=date]:-ms-input-placeholder,
-.components-text-control__input[type=datetime]:-ms-input-placeholder,
-.components-text-control__input[type=datetime-local]:-ms-input-placeholder,
-.components-text-control__input[type=email]:-ms-input-placeholder,
-.components-text-control__input[type=month]:-ms-input-placeholder,
-.components-text-control__input[type=number]:-ms-input-placeholder {
-  color: rgba(30, 30, 30, 0.62);
+.components-text-control__input::placeholder,
+.components-text-control__input[type=text]::placeholder,
+.components-text-control__input[type=tel]::placeholder,
+.components-text-control__input[type=time]::placeholder,
+.components-text-control__input[type=url]::placeholder,
+.components-text-control__input[type=week]::placeholder,
+.components-text-control__input[type=password]::placeholder,
+.components-text-control__input[type=color]::placeholder,
+.components-text-control__input[type=date]::placeholder,
+.components-text-control__input[type=datetime]::placeholder,
+.components-text-control__input[type=datetime-local]::placeholder,
+.components-text-control__input[type=email]::placeholder,
+.components-text-control__input[type=month]::placeholder,
+.components-text-control__input[type=number]::placeholder {
+  color: color-mix(in srgb, var(--wp-components-color-foreground, #1e1e1e), transparent 38%);
 }
 .components-text-control__input.is-next-40px-default-size,
 .components-text-control__input[type=text].is-next-40px-default-size,

package/build-types/box-control/utils.d.ts

@@ -4,13 +4,13 @@
 import type { BoxControlInputControlProps, BoxControlProps, BoxControlValue, CustomValueUnits, Preset } from './types';
 export declare const CUSTOM_VALUE_SETTINGS: CustomValueUnits;
 export declare const LABELS: {
-    all: import("@wordpress/i18n/build-types/types").TranslatableText<"All sides">;
-    top: import("@wordpress/i18n/build-types/types").TranslatableText<"Top side">;
-    bottom: import("@wordpress/i18n/build-types/types").TranslatableText<"Bottom side">;
-    left: import("@wordpress/i18n/build-types/types").TranslatableText<"Left side">;
-    right: import("@wordpress/i18n/build-types/types").TranslatableText<"Right side">;
-    vertical: import("@wordpress/i18n/build-types/types").TranslatableText<"Top and bottom sides">;
-    horizontal: import("@wordpress/i18n/build-types/types").TranslatableText<"Left and right sides">;
+    all: import("@wordpress/i18n").TranslatableText<"All sides">;
+    top: import("@wordpress/i18n").TranslatableText<"Top side">;
+    bottom: import("@wordpress/i18n").TranslatableText<"Bottom side">;
+    left: import("@wordpress/i18n").TranslatableText<"Left side">;
+    right: import("@wordpress/i18n").TranslatableText<"Right side">;
+    vertical: import("@wordpress/i18n").TranslatableText<"Top and bottom sides">;
+    horizontal: import("@wordpress/i18n").TranslatableText<"Left and right sides">;
 };
 export declare const DEFAULT_VALUES: {
     top: undefined;

package/build-types/calendar/utils/use-localization-props.d.ts

@@ -24,7 +24,7 @@ export declare const useLocalizationProps: ({ locale, timeZone, mode, }: {
     timeZone: BaseProps["timeZone"];
     mode: "single" | "range";
 }) => {
-    readonly 'aria-label': import("@wordpress/i18n/build-types/types").TranslatableText<"Date calendar"> | import("@wordpress/i18n/build-types/types").TranslatableText<"Date range calendar">;
+    readonly 'aria-label': import("@wordpress/i18n").TranslatableText<"Date calendar"> | import("@wordpress/i18n").TranslatableText<"Date range calendar">;
     readonly labels: {
         /**
          * The label for the month grid.
@@ -38,9 +38,9 @@ export declare const useLocalizationProps: ({ locale, timeZone, mode, }: {
          */
         readonly labelGridcell: (date: Date, modifiers?: Modifiers) => string;
         /** The label for the "next month" button. */
-        readonly labelNext: () => import("@wordpress/i18n/build-types/types").TranslatableText<"Go to the Next Month">;
+        readonly labelNext: () => import("@wordpress/i18n").TranslatableText<"Go to the Next Month">;
         /** The label for the "previous month" button. */
-        readonly labelPrevious: () => import("@wordpress/i18n/build-types/types").TranslatableText<"Go to the Previous Month">;
+        readonly labelPrevious: () => import("@wordpress/i18n").TranslatableText<"Go to the Previous Month">;
         /**
          * The label for the day button.
          * @param date

package/build-types/color-picker/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/color-picker/styles.ts"],"names":[],"mappings":"AAiBA,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;UAEhC,CAAC;AAEF,eAAO,MAAM,aAAa;UAgFq6E,MAAO,GAAG;;;UA9Ex8E,CAAC;AAEF,eAAO,MAAM,YAAY;;;;aAmBZ,CAAA;;;;;;;;;;;;;;qBAyDwxD,CAAC;;;;;iCAAmuB,CAAC;;;;;;;;;;;;UAzEzgF,CAAC;AASF,eAAO,MAAM,6BAA6B;;SAnB7B,MAAQ,WAGpB;yGAqBA,CAAC;AAEF,eAAO,MAAM,kCAAkC;;;;;;;UAG9C,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;UAK7B,CAAC;AAEF,eAAO,MAAM,eAAe;;SAtCf,MAAQ,WAGpB;yGA+EA,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/color-picker/styles.ts"],"names":[],"mappings":"AAiBA,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;UAEhC,CAAC;AAEF,eAAO,MAAM,aAAa;UA0FwjE,MAAO,GAAG;;;UAxF3lE,CAAC;AAEF,eAAO,MAAM,YAAY;;;;aAmBZ,CAAA;;;;;;;;;;;;;;qBAmE26C,CAAC;;;;;iCAAmuB,CAAC;;;;;;;;;;;;UAnF5pE,CAAC;AASF,eAAO,MAAM,6BAA6B;;SAnB7B,MAAQ,WAGpB;yGAqBA,CAAC;AAEF,eAAO,MAAM,kCAAkC;;;;;;;UAG9C,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;UAK7B,CAAC;AAEF,eAAO,MAAM,eAAe;;SAtCf,MAAQ,WAGpB;yGAyFA,CAAC"}

package/build-types/custom-gradient-picker/constants.d.ts

@@ -6,10 +6,10 @@ export declare const HORIZONTAL_GRADIENT_ORIENTATION: {
 };
 export declare const GRADIENT_OPTIONS: ({
     value: string;
-    label: import("@wordpress/i18n/build-types/types").TranslatableText<"Linear">;
+    label: import("@wordpress/i18n").TranslatableText<"Linear">;
 } | {
     value: string;
-    label: import("@wordpress/i18n/build-types/types").TranslatableText<"Radial">;
+    label: import("@wordpress/i18n").TranslatableText<"Radial">;
 })[];
 export declare const DIRECTIONAL_ORIENTATION_ANGLE_MAP: {
     top: number;

package/build-types/dimension-control/sizes.d.ts

@@ -19,19 +19,19 @@ import type { Size } from './types';
  */
 export declare const findSizeBySlug: (sizes: Size[], slug: string) => Size | undefined;
 declare const _default: ({
-    name: import("@wordpress/i18n/build-types/types").TranslatableText<"None">;
+    name: import("@wordpress/i18n").TranslatableText<"None">;
     slug: string;
 } | {
-    name: import("@wordpress/i18n/build-types/types").TranslatableText<"Small">;
+    name: import("@wordpress/i18n").TranslatableText<"Small">;
     slug: string;
 } | {
-    name: import("@wordpress/i18n/build-types/types").TranslatableText<"Medium">;
+    name: import("@wordpress/i18n").TranslatableText<"Medium">;
     slug: string;
 } | {
-    name: import("@wordpress/i18n/build-types/types").TranslatableText<"Large">;
+    name: import("@wordpress/i18n").TranslatableText<"Large">;
     slug: string;
 } | {
-    name: import("@wordpress/i18n/build-types/types").TranslatableText<"Extra Large">;
+    name: import("@wordpress/i18n").TranslatableText<"Extra Large">;
     slug: string;
 })[];
 export default _default;

package/build-types/font-size-picker/constants.d.ts

@@ -4,12 +4,12 @@
  * When there are 5 font sizes or fewer, we assume that the font sizes are
  * ordered by size and show T-shirt labels.
  */
-export declare const T_SHIRT_ABBREVIATIONS: (import("@wordpress/i18n/build-types/types").TranslatableText<"S"> | import("@wordpress/i18n/build-types/types").TranslatableText<"M"> | import("@wordpress/i18n/build-types/types").TranslatableText<"L"> | import("@wordpress/i18n/build-types/types").TranslatableText<"XL"> | import("@wordpress/i18n/build-types/types").TranslatableText<"XXL">)[];
+export declare const T_SHIRT_ABBREVIATIONS: (import("@wordpress/i18n").TranslatableText<"S"> | import("@wordpress/i18n").TranslatableText<"M"> | import("@wordpress/i18n").TranslatableText<"L"> | import("@wordpress/i18n").TranslatableText<"XL"> | import("@wordpress/i18n").TranslatableText<"XXL">)[];
 /**
  * List of T-shirt names.
  *
  * When there are 5 font sizes or fewer, we assume that the font sizes are
  * ordered by size and show T-shirt labels.
  */
-export declare const T_SHIRT_NAMES: (import("@wordpress/i18n/build-types/types").TranslatableText<"Small"> | import("@wordpress/i18n/build-types/types").TranslatableText<"Medium"> | import("@wordpress/i18n/build-types/types").TranslatableText<"Large"> | import("@wordpress/i18n/build-types/types").TranslatableText<"Extra Large"> | import("@wordpress/i18n/build-types/types").TranslatableText<"Extra Extra Large">)[];
+export declare const T_SHIRT_NAMES: (import("@wordpress/i18n").TranslatableText<"Small"> | import("@wordpress/i18n").TranslatableText<"Medium"> | import("@wordpress/i18n").TranslatableText<"Large"> | import("@wordpress/i18n").TranslatableText<"Extra Large"> | import("@wordpress/i18n").TranslatableText<"Extra Extra Large">)[];
 //# sourceMappingURL=constants.d.ts.map

package/build-types/font-size-picker/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/font-size-picker/constants.ts"],"names":[],"mappings":"AAKA;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,0VAWjC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,aAAa,8XAMzB,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/font-size-picker/constants.ts"],"names":[],"mappings":"AAKA;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,gQAWjC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,aAAa,oSAMzB,CAAC"}

package/build-types/private-apis.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"private-apis.d.ts","sourceRoot":"","sources":["../src/private-apis.ts"],"names":[],"mappings":"AAeA,eAAO,MAAM,WAAW,IAAK,CAAC"}
+{"version":3,"file":"private-apis.d.ts","sourceRoot":"","sources":["../src/private-apis.ts"],"names":[],"mappings":"AAoBA,eAAO,MAAM,WAAW,IAAK,CAAC"}

package/build-types/range-control/types.d.ts

@@ -247,9 +247,9 @@ export type ThumbProps = {
 };
 export type TooltipProps = {
     show?: boolean;
-    position?: string;
+    placement?: string;
     inputRef?: MutableRefObject<HTMLElement | undefined>;
-    tooltipPosition?: string;
+    tooltipPlacement?: string;
     value?: ControlledRangeValue;
     renderTooltipContent?: (value?: ControlledRangeValue) => string | number | null | undefined;
     zIndex?: number;