@wordpress/components 25.13.0 → 25.14.0

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

@@ -1 +1 @@
-{"version":3,"names":["css","COLORS","CONFIG","boxSizingReset","rtl","space","StyledLabel","ValueInput","UnitControlWrapper","UnitSelect","labelStyles","process","env","NODE_ENV","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","focusBoxShadow","controlBoxShadowFocus","borderControl","innerWrapper","wrapperWidth","wrapperHeight","size","borderControlDropdown","borderRadius","borderWidth","ui","border","borderFocus","colorIndicatorBorder","color","style","fallbackColor","gray","undefined","colorIndicatorWrapper","swatchSize","swatchGap","borderControlPopoverControls","borderControlPopoverContent","borderColorIndicator","resetButton","borderControlStylePicker","borderStyleButton","borderSlider","marginRight"],"sources":["@wordpress/components/src/border-control/styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport { COLORS, CONFIG, boxSizingReset, rtl } from '../utils';\nimport { space } from '../utils/space';\nimport { StyledLabel } from '../base-control/styles/base-control-styles';\nimport {\n\tValueInput as UnitControlWrapper,\n\tUnitSelect,\n} from '../unit-control/styles/unit-control-styles';\n\nimport type { Border } from './types';\n\nconst labelStyles = css`\n\tfont-weight: 500;\n`;\n\nconst focusBoxShadow = css`\n\tbox-shadow: inset ${ CONFIG.controlBoxShadowFocus };\n`;\n\nexport const borderControl = css`\n\tborder: 0;\n\tpadding: 0;\n\tmargin: 0;\n\t${ boxSizingReset }\n`;\n\nexport const innerWrapper = () => css`\n\t${ UnitControlWrapper } {\n\t\tflex: 1 1 40%;\n\t}\n\t&& ${ UnitSelect } {\n\t\t/* Prevent unit select forcing min height larger than its UnitControl */\n\t\tmin-height: 0;\n\t}\n`;\n\n/*\n * This style is only applied to the UnitControl wrapper when the border width\n * field should be a set width. Omitting this allows the UnitControl &\n * RangeControl to share the available width in a 40/60 split respectively.\n */\nexport const wrapperWidth = css`\n\t${ UnitControlWrapper } {\n\t\t/* Force the UnitControl's set width. */\n\t\tflex: 0 0 auto;\n\t}\n`;\n\nexport const wrapperHeight = ( size?: 'default' | '__unstable-large' ) => {\n\treturn css`\n\t\theight: ${ size === '__unstable-large' ? '40px' : '30px' };\n\t`;\n};\n\nexport const borderControlDropdown = (\n\tsize?: 'default' | '__unstable-large'\n) => css`\n\tbackground: #fff;\n\n\t&& > button {\n\t\t/*\n\t\t * Override button component styles to fit within BorderControl\n\t\t * regardless of size.\n\t\t */\n\t\theight: ${ size === '__unstable-large' ? '40px' : '30px' };\n\t\twidth: ${ size === '__unstable-large' ? '40px' : '30px' };\n\t\tpadding: 0;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\t${ rtl(\n\t\t\t{ borderRadius: `2px 0 0 2px` },\n\t\t\t{ borderRadius: `0 2px 2px 0` }\n\t\t)() }\n\t\tborder: ${ CONFIG.borderWidth } solid ${ COLORS.ui.border };\n\n\t\t&:focus,\n\t\t&:hover:not( :disabled ) {\n\t\t\t${ focusBoxShadow }\n\t\t\tborder-color: ${ COLORS.ui.borderFocus };\n\t\t\tz-index: 1;\n\t\t\tposition: relative;\n\t\t}\n\t}\n`;\n\nexport const colorIndicatorBorder = ( border?: Border ) => {\n\tconst { color, style } = border || {};\n\n\tconst fallbackColor =\n\t\t!! style && style !== 'none' ? COLORS.gray[ 300 ] : undefined;\n\n\treturn css`\n\t\tborder-style: ${ style === 'none' ? 'solid' : style };\n\t\tborder-color: ${ color || fallbackColor };\n\t`;\n};\n\nexport const colorIndicatorWrapper = (\n\tborder?: Border,\n\tsize?: 'default' | '__unstable-large'\n) => {\n\tconst { style } = border || {};\n\n\treturn css`\n\t\tborder-radius: 9999px;\n\t\tborder: 2px solid transparent;\n\t\t${ style ? colorIndicatorBorder( border ) : undefined }\n\t\twidth: ${ size === '__unstable-large' ? '24px' : '22px' };\n\t\theight: ${ size === '__unstable-large' ? '24px' : '22px' };\n\t\tpadding: ${ size === '__unstable-large' ? '2px' : '1px' };\n\n\t\t/*\n\t\t * ColorIndicator\n\t\t *\n\t\t * The transparent colors used here ensure visibility of the indicator\n\t\t * over the active state of the border control dropdown's toggle button.\n\t\t */\n\t\t& > span {\n\t\t\theight: ${ space( 4 ) };\n\t\t\twidth: ${ space( 4 ) };\n\t\t\tbackground: linear-gradient(\n\t\t\t\t-45deg,\n\t\t\t\ttransparent 48%,\n\t\t\t\trgb( 0 0 0 / 20% ) 48%,\n\t\t\t\trgb( 0 0 0 / 20% ) 52%,\n\t\t\t\ttransparent 52%\n\t\t\t);\n\t\t}\n\t`;\n};\n\n// Must equal $color-palette-circle-size from:\n// @wordpress/components/src/circular-option-picker/style.scss\nconst swatchSize = 28;\nconst swatchGap = 12;\n\nexport const borderControlPopoverControls = css`\n\twidth: ${ swatchSize * 6 + swatchGap * 5 }px;\n\n\t> div:first-of-type > ${ StyledLabel } {\n\t\tmargin-bottom: 0;\n\t\t${ labelStyles }\n\t}\n\n\t&& ${ StyledLabel } + button:not( .has-text ) {\n\t\tmin-width: 24px;\n\t\tpadding: 0;\n\t}\n`;\n\nexport const borderControlPopoverContent = css``;\nexport const borderColorIndicator = css``;\n\nexport const resetButton = css`\n\tjustify-content: center;\n\twidth: 100%;\n\n\t/* Override button component styling */\n\t&& {\n\t\tborder-top: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 400 ] };\n\t\tborder-top-left-radius: 0;\n\t\tborder-top-right-radius: 0;\n\t\theight: 40px;\n\t}\n`;\n\nexport const borderControlStylePicker = css`\n\t${ StyledLabel } {\n\t\t${ labelStyles }\n\t}\n`;\n\nexport const borderStyleButton = css`\n\t&&&&& {\n\t\tmin-width: 32px;\n\t\twidth: 32px;\n\t\theight: 32px;\n\t\tpadding: 4px;\n\t}\n`;\n\nexport const borderSlider = () => css`\n\tflex: 1 1 60%;\n\t${ rtl( { marginRight: space( 3 ) } )() }\n`;\n"],"mappings":"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"}
+{"version":3,"names":["css","COLORS","CONFIG","boxSizingReset","rtl","space","StyledLabel","ValueInput","UnitControlWrapper","UnitSelect","labelStyles","process","env","NODE_ENV","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","focusBoxShadow","controlBoxShadowFocus","borderControl","innerWrapper","wrapperWidth","wrapperHeight","size","borderControlDropdown","borderRadius","borderWidth","ui","border","borderFocus","colorIndicatorBorder","color","style","fallbackColor","gray","undefined","colorIndicatorWrapper","swatchSize","swatchGap","borderControlPopoverControls","borderControlPopoverContent","borderColorIndicator","resetButton","borderControlStylePicker","borderStyleButton","borderSlider","marginRight"],"sources":["@wordpress/components/src/border-control/styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport { COLORS, CONFIG, boxSizingReset, rtl } from '../utils';\nimport { space } from '../utils/space';\nimport { StyledLabel } from '../base-control/styles/base-control-styles';\nimport {\n\tValueInput as UnitControlWrapper,\n\tUnitSelect,\n} from '../unit-control/styles/unit-control-styles';\n\nimport type { Border } from './types';\n\nconst labelStyles = css`\n\tfont-weight: 500;\n`;\n\nconst focusBoxShadow = css`\n\tbox-shadow: inset ${ CONFIG.controlBoxShadowFocus };\n`;\n\nexport const borderControl = css`\n\tborder: 0;\n\tpadding: 0;\n\tmargin: 0;\n\t${ boxSizingReset }\n`;\n\nexport const innerWrapper = () => css`\n\t${ UnitControlWrapper } {\n\t\tflex: 1 1 40%;\n\t}\n\t&& ${ UnitSelect } {\n\t\t/* Prevent unit select forcing min height larger than its UnitControl */\n\t\tmin-height: 0;\n\t}\n`;\n\n/*\n * This style is only applied to the UnitControl wrapper when the border width\n * field should be a set width. Omitting this allows the UnitControl &\n * RangeControl to share the available width in a 40/60 split respectively.\n */\nexport const wrapperWidth = css`\n\t${ UnitControlWrapper } {\n\t\t/* Force the UnitControl's set width. */\n\t\tflex: 0 0 auto;\n\t}\n`;\n\nexport const wrapperHeight = ( size?: 'default' | '__unstable-large' ) => {\n\treturn css`\n\t\theight: ${ size === '__unstable-large' ? '40px' : '30px' };\n\t`;\n};\n\nexport const borderControlDropdown = css`\n\tbackground: #fff;\n\n\t&& > button {\n\t\taspect-ratio: 1;\n\t\tpadding: 0;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\t${ rtl(\n\t\t\t{ borderRadius: `2px 0 0 2px` },\n\t\t\t{ borderRadius: `0 2px 2px 0` }\n\t\t)() }\n\t\tborder: ${ CONFIG.borderWidth } solid ${ COLORS.ui.border };\n\n\t\t&:focus,\n\t\t&:hover:not( :disabled ) {\n\t\t\t${ focusBoxShadow }\n\t\t\tborder-color: ${ COLORS.ui.borderFocus };\n\t\t\tz-index: 1;\n\t\t\tposition: relative;\n\t\t}\n\t}\n`;\n\nexport const colorIndicatorBorder = ( border?: Border ) => {\n\tconst { color, style } = border || {};\n\n\tconst fallbackColor =\n\t\t!! style && style !== 'none' ? COLORS.gray[ 300 ] : undefined;\n\n\treturn css`\n\t\tborder-style: ${ style === 'none' ? 'solid' : style };\n\t\tborder-color: ${ color || fallbackColor };\n\t`;\n};\n\nexport const colorIndicatorWrapper = (\n\tborder?: Border,\n\tsize?: 'default' | '__unstable-large'\n) => {\n\tconst { style } = border || {};\n\n\treturn css`\n\t\tborder-radius: 9999px;\n\t\tborder: 2px solid transparent;\n\t\t${ style ? colorIndicatorBorder( border ) : undefined }\n\t\twidth: ${ size === '__unstable-large' ? '24px' : '22px' };\n\t\theight: ${ size === '__unstable-large' ? '24px' : '22px' };\n\t\tpadding: ${ size === '__unstable-large' ? '2px' : '1px' };\n\n\t\t/*\n\t\t * ColorIndicator\n\t\t *\n\t\t * The transparent colors used here ensure visibility of the indicator\n\t\t * over the active state of the border control dropdown's toggle button.\n\t\t */\n\t\t& > span {\n\t\t\theight: ${ space( 4 ) };\n\t\t\twidth: ${ space( 4 ) };\n\t\t\tbackground: linear-gradient(\n\t\t\t\t-45deg,\n\t\t\t\ttransparent 48%,\n\t\t\t\trgb( 0 0 0 / 20% ) 48%,\n\t\t\t\trgb( 0 0 0 / 20% ) 52%,\n\t\t\t\ttransparent 52%\n\t\t\t);\n\t\t}\n\t`;\n};\n\n// Must equal $color-palette-circle-size from:\n// @wordpress/components/src/circular-option-picker/style.scss\nconst swatchSize = 28;\nconst swatchGap = 12;\n\nexport const borderControlPopoverControls = css`\n\twidth: ${ swatchSize * 6 + swatchGap * 5 }px;\n\n\t> div:first-of-type > ${ StyledLabel } {\n\t\tmargin-bottom: 0;\n\t\t${ labelStyles }\n\t}\n\n\t&& ${ StyledLabel } + button:not( .has-text ) {\n\t\tmin-width: 24px;\n\t\tpadding: 0;\n\t}\n`;\n\nexport const borderControlPopoverContent = css``;\nexport const borderColorIndicator = css``;\n\nexport const resetButton = css`\n\tjustify-content: center;\n\twidth: 100%;\n\n\t/* Override button component styling */\n\t&& {\n\t\tborder-top: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 400 ] };\n\t\tborder-top-left-radius: 0;\n\t\tborder-top-right-radius: 0;\n\t\theight: 40px;\n\t}\n`;\n\nexport const borderControlStylePicker = css`\n\t${ StyledLabel } {\n\t\t${ labelStyles }\n\t}\n`;\n\nexport const borderStyleButton = css`\n\t&&&&& {\n\t\tmin-width: 32px;\n\t\twidth: 32px;\n\t\theight: 32px;\n\t\tpadding: 4px;\n\t}\n`;\n\nexport const borderSlider = () => css`\n\tflex: 1 1 60%;\n\t${ rtl( { marginRight: space( 3 ) } )() }\n`;\n"],"mappings":"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"}

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

@@ -97,7 +97,7 @@ export function CheckboxControl(props) {
     icon: check,
     className: "components-checkbox-control__checked",
     role: "presentation"
-  }) : null), createElement("label", {
+  }) : null), label && createElement("label", {
     className: "components-checkbox-control__label",
     htmlFor: id
   }, label));

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

@@ -1 +1 @@
-{"version":3,"names":["classnames","useState","useInstanceId","useRefEffect","deprecated","Icon","check","reset","BaseControl","CheckboxControl","props","__nextHasNoMarginBottom","label","className","heading","checked","indeterminate","help","id","idProp","onChange","additionalProps","alternative","since","showCheckedIcon","setShowCheckedIcon","showIndeterminateIcon","setShowIndeterminateIcon","ref","node","matches","onChangeValue","event","target","createElement","type","value","undefined","icon","role","htmlFor"],"sources":["@wordpress/components/src/checkbox-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { ChangeEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport { useInstanceId, useRefEffect } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\nimport { Icon, check, reset } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport type { CheckboxControlProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\n/**\n * Checkboxes allow the user to select one or more items from a set.\n *\n * ```jsx\n * import { CheckboxControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyCheckboxControl = () => {\n *   const [ isChecked, setChecked ] = useState( true );\n *   return (\n *     <CheckboxControl\n *       label=\"Is author\"\n *       help=\"Is the user a author or not?\"\n *       checked={ isChecked }\n *       onChange={ setChecked }\n *     />\n *   );\n * };\n * ```\n */\nexport function CheckboxControl(\n\tprops: WordPressComponentProps< CheckboxControlProps, 'input', false >\n) {\n\tconst {\n\t\t__nextHasNoMarginBottom,\n\t\tlabel,\n\t\tclassName,\n\t\theading,\n\t\tchecked,\n\t\tindeterminate,\n\t\thelp,\n\t\tid: idProp,\n\t\tonChange,\n\t\t...additionalProps\n\t} = props;\n\n\tif ( heading ) {\n\t\tdeprecated( '`heading` prop in `CheckboxControl`', {\n\t\t\talternative: 'a separate element to implement a heading',\n\t\t\tsince: '5.8',\n\t\t} );\n\t}\n\n\tconst [ showCheckedIcon, setShowCheckedIcon ] = useState( false );\n\tconst [ showIndeterminateIcon, setShowIndeterminateIcon ] =\n\t\tuseState( false );\n\n\t// Run the following callback every time the `ref` (and the additional\n\t// dependencies) change.\n\tconst ref = useRefEffect< HTMLInputElement >(\n\t\t( node ) => {\n\t\t\tif ( ! node ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// It cannot be set using an HTML attribute.\n\t\t\tnode.indeterminate = !! indeterminate;\n\n\t\t\tsetShowCheckedIcon( node.matches( ':checked' ) );\n\t\t\tsetShowIndeterminateIcon( node.matches( ':indeterminate' ) );\n\t\t},\n\t\t[ checked, indeterminate ]\n\t);\n\tconst id = useInstanceId(\n\t\tCheckboxControl,\n\t\t'inspector-checkbox-control',\n\t\tidProp\n\t);\n\tconst onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>\n\t\tonChange( event.target.checked );\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tlabel={ heading }\n\t\t\tid={ id }\n\t\t\thelp={ help }\n\t\t\tclassName={ classnames( 'components-checkbox-control', className ) }\n\t\t>\n\t\t\t<span className=\"components-checkbox-control__input-container\">\n\t\t\t\t<input\n\t\t\t\t\tref={ ref }\n\t\t\t\t\tid={ id }\n\t\t\t\t\tclassName=\"components-checkbox-control__input\"\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\tvalue=\"1\"\n\t\t\t\t\tonChange={ onChangeValue }\n\t\t\t\t\tchecked={ checked }\n\t\t\t\t\taria-describedby={ !! help ? id + '__help' : undefined }\n\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t/>\n\t\t\t\t{ showIndeterminateIcon ? (\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={ reset }\n\t\t\t\t\t\tclassName=\"components-checkbox-control__indeterminate\"\n\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t/>\n\t\t\t\t) : null }\n\t\t\t\t{ showCheckedIcon ? (\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={ check }\n\t\t\t\t\t\tclassName=\"components-checkbox-control__checked\"\n\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t/>\n\t\t\t\t) : null }\n\t\t\t</span>\n\t\t\t<label\n\t\t\t\tclassName=\"components-checkbox-control__label\"\n\t\t\t\thtmlFor={ id }\n\t\t\t>\n\t\t\t\t{ label }\n\t\t\t</label>\n\t\t</BaseControl>\n\t);\n}\n\nexport default CheckboxControl;\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,YAAY;AAGnC;AACA;AACA;AACA,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,aAAa,EAAEC,YAAY,QAAQ,oBAAoB;AAChE,OAAOC,UAAU,MAAM,uBAAuB;AAC9C,SAASC,IAAI,EAAEC,KAAK,EAAEC,KAAK,QAAQ,kBAAkB;;AAErD;AACA;AACA;AACA,OAAOC,WAAW,MAAM,iBAAiB;AAIzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,eAAeA,CAC9BC,KAAsE,EACrE;EACD,MAAM;IACLC,uBAAuB;IACvBC,KAAK;IACLC,SAAS;IACTC,OAAO;IACPC,OAAO;IACPC,aAAa;IACbC,IAAI;IACJC,EAAE,EAAEC,MAAM;IACVC,QAAQ;IACR,GAAGC;EACJ,CAAC,GAAGX,KAAK;EAET,IAAKI,OAAO,EAAG;IACdV,UAAU,CAAE,qCAAqC,EAAE;MAClDkB,WAAW,EAAE,2CAA2C;MACxDC,KAAK,EAAE;IACR,CAAE,CAAC;EACJ;EAEA,MAAM,CAAEC,eAAe,EAAEC,kBAAkB,CAAE,GAAGxB,QAAQ,CAAE,KAAM,CAAC;EACjE,MAAM,CAAEyB,qBAAqB,EAAEC,wBAAwB,CAAE,GACxD1B,QAAQ,CAAE,KAAM,CAAC;;EAElB;EACA;EACA,MAAM2B,GAAG,GAAGzB,YAAY,CACrB0B,IAAI,IAAM;IACX,IAAK,CAAEA,IAAI,EAAG;MACb;IACD;;IAEA;IACAA,IAAI,CAACb,aAAa,GAAG,CAAC,CAAEA,aAAa;IAErCS,kBAAkB,CAAEI,IAAI,CAACC,OAAO,CAAE,UAAW,CAAE,CAAC;IAChDH,wBAAwB,CAAEE,IAAI,CAACC,OAAO,CAAE,gBAAiB,CAAE,CAAC;EAC7D,CAAC,EACD,CAAEf,OAAO,EAAEC,aAAa,CACzB,CAAC;EACD,MAAME,EAAE,GAAGhB,aAAa,CACvBO,eAAe,EACf,4BAA4B,EAC5BU,MACD,CAAC;EACD,MAAMY,aAAa,GAAKC,KAAsC,IAC7DZ,QAAQ,CAAEY,KAAK,CAACC,MAAM,CAAClB,OAAQ,CAAC;EAEjC,OACCmB,aAAA,CAAC1B,WAAW;IACXG,uBAAuB,EAAGA,uBAAyB;IACnDC,KAAK,EAAGE,OAAS;IACjBI,EAAE,EAAGA,EAAI;IACTD,IAAI,EAAGA,IAAM;IACbJ,SAAS,EAAGb,UAAU,CAAE,6BAA6B,EAAEa,SAAU;EAAG,GAEpEqB,aAAA;IAAMrB,SAAS,EAAC;EAA8C,GAC7DqB,aAAA;IACCN,GAAG,EAAGA,GAAK;IACXV,EAAE,EAAGA,EAAI;IACTL,SAAS,EAAC,oCAAoC;IAC9CsB,IAAI,EAAC,UAAU;IACfC,KAAK,EAAC,GAAG;IACThB,QAAQ,EAAGW,aAAe;IAC1BhB,OAAO,EAAGA,OAAS;IACnB,oBAAmB,CAAC,CAAEE,IAAI,GAAGC,EAAE,GAAG,QAAQ,GAAGmB,SAAW;IAAA,GACnDhB;EAAe,CACpB,CAAC,EACAK,qBAAqB,GACtBQ,aAAA,CAAC7B,IAAI;IACJiC,IAAI,EAAG/B,KAAO;IACdM,SAAS,EAAC,4CAA4C;IACtD0B,IAAI,EAAC;EAAc,CACnB,CAAC,GACC,IAAI,EACNf,eAAe,GAChBU,aAAA,CAAC7B,IAAI;IACJiC,IAAI,EAAGhC,KAAO;IACdO,SAAS,EAAC,sCAAsC;IAChD0B,IAAI,EAAC;EAAc,CACnB,CAAC,GACC,IACC,CAAC,EACPL,aAAA;IACCrB,SAAS,EAAC,oCAAoC;IAC9C2B,OAAO,EAAGtB;EAAI,GAEZN,KACI,CACK,CAAC;AAEhB;AAEA,eAAeH,eAAe"}
+{"version":3,"names":["classnames","useState","useInstanceId","useRefEffect","deprecated","Icon","check","reset","BaseControl","CheckboxControl","props","__nextHasNoMarginBottom","label","className","heading","checked","indeterminate","help","id","idProp","onChange","additionalProps","alternative","since","showCheckedIcon","setShowCheckedIcon","showIndeterminateIcon","setShowIndeterminateIcon","ref","node","matches","onChangeValue","event","target","createElement","type","value","undefined","icon","role","htmlFor"],"sources":["@wordpress/components/src/checkbox-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { ChangeEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport { useInstanceId, useRefEffect } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\nimport { Icon, check, reset } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport type { CheckboxControlProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\n/**\n * Checkboxes allow the user to select one or more items from a set.\n *\n * ```jsx\n * import { CheckboxControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyCheckboxControl = () => {\n *   const [ isChecked, setChecked ] = useState( true );\n *   return (\n *     <CheckboxControl\n *       label=\"Is author\"\n *       help=\"Is the user a author or not?\"\n *       checked={ isChecked }\n *       onChange={ setChecked }\n *     />\n *   );\n * };\n * ```\n */\nexport function CheckboxControl(\n\tprops: WordPressComponentProps< CheckboxControlProps, 'input', false >\n) {\n\tconst {\n\t\t__nextHasNoMarginBottom,\n\t\tlabel,\n\t\tclassName,\n\t\theading,\n\t\tchecked,\n\t\tindeterminate,\n\t\thelp,\n\t\tid: idProp,\n\t\tonChange,\n\t\t...additionalProps\n\t} = props;\n\n\tif ( heading ) {\n\t\tdeprecated( '`heading` prop in `CheckboxControl`', {\n\t\t\talternative: 'a separate element to implement a heading',\n\t\t\tsince: '5.8',\n\t\t} );\n\t}\n\n\tconst [ showCheckedIcon, setShowCheckedIcon ] = useState( false );\n\tconst [ showIndeterminateIcon, setShowIndeterminateIcon ] =\n\t\tuseState( false );\n\n\t// Run the following callback every time the `ref` (and the additional\n\t// dependencies) change.\n\tconst ref = useRefEffect< HTMLInputElement >(\n\t\t( node ) => {\n\t\t\tif ( ! node ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// It cannot be set using an HTML attribute.\n\t\t\tnode.indeterminate = !! indeterminate;\n\n\t\t\tsetShowCheckedIcon( node.matches( ':checked' ) );\n\t\t\tsetShowIndeterminateIcon( node.matches( ':indeterminate' ) );\n\t\t},\n\t\t[ checked, indeterminate ]\n\t);\n\tconst id = useInstanceId(\n\t\tCheckboxControl,\n\t\t'inspector-checkbox-control',\n\t\tidProp\n\t);\n\tconst onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>\n\t\tonChange( event.target.checked );\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tlabel={ heading }\n\t\t\tid={ id }\n\t\t\thelp={ help }\n\t\t\tclassName={ classnames( 'components-checkbox-control', className ) }\n\t\t>\n\t\t\t<span className=\"components-checkbox-control__input-container\">\n\t\t\t\t<input\n\t\t\t\t\tref={ ref }\n\t\t\t\t\tid={ id }\n\t\t\t\t\tclassName=\"components-checkbox-control__input\"\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\tvalue=\"1\"\n\t\t\t\t\tonChange={ onChangeValue }\n\t\t\t\t\tchecked={ checked }\n\t\t\t\t\taria-describedby={ !! help ? id + '__help' : undefined }\n\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t/>\n\t\t\t\t{ showIndeterminateIcon ? (\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={ reset }\n\t\t\t\t\t\tclassName=\"components-checkbox-control__indeterminate\"\n\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t/>\n\t\t\t\t) : null }\n\t\t\t\t{ showCheckedIcon ? (\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={ check }\n\t\t\t\t\t\tclassName=\"components-checkbox-control__checked\"\n\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t/>\n\t\t\t\t) : null }\n\t\t\t</span>\n\t\t\t{ label && (\n\t\t\t\t<label\n\t\t\t\t\tclassName=\"components-checkbox-control__label\"\n\t\t\t\t\thtmlFor={ id }\n\t\t\t\t>\n\t\t\t\t\t{ label }\n\t\t\t\t</label>\n\t\t\t) }\n\t\t</BaseControl>\n\t);\n}\n\nexport default CheckboxControl;\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/checkbox-control/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { BaseControlProps } from '../base-control/types';\n\nexport type CheckboxControlProps = Pick<\n\tBaseControlProps,\n\t'help' | '__nextHasNoMarginBottom'\n> & {\n\t/**\n\t * A function that receives the checked state (boolean) as input.\n\t */\n\tonChange: ( value: boolean ) => void;\n\t/**\n\t * A label for the input field, that appears at the side of the checkbox.\n\t * The prop will be rendered as content a label element. If no prop is\n\t * passed an empty label is rendered.\n\t */\n\tlabel?: string;\n\t/**\n\t * If checked is true the checkbox will be checked. If checked is false the\n\t * checkbox will be unchecked. If no value is passed the checkbox will be\n\t * unchecked.\n\t */\n\tchecked?: boolean;\n\t/**\n\t * If indeterminate is true the state of the checkbox will be indeterminate.\n\t */\n\tindeterminate?: boolean;\n\t/**\n\t * @deprecated\n\t */\n\theading?: ReactNode;\n};\n"],"mappings":""}
+{"version":3,"names":[],"sources":["@wordpress/components/src/checkbox-control/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { BaseControlProps } from '../base-control/types';\n\nexport type CheckboxControlProps = Pick<\n\tBaseControlProps,\n\t'help' | '__nextHasNoMarginBottom'\n> & {\n\t/**\n\t * A function that receives the checked state (boolean) as input.\n\t */\n\tonChange: ( value: boolean ) => void;\n\t/**\n\t * A label for the input field, that appears at the side of the checkbox.\n\t * The prop will be rendered as content a label element. If no prop is\n\t * passed an empty label is rendered. If the prop is set to false no label\n\t * is rendered.\n\t */\n\tlabel?: string | false;\n\t/**\n\t * If checked is true the checkbox will be checked. If checked is false the\n\t * checkbox will be unchecked. If no value is passed the checkbox will be\n\t * unchecked.\n\t */\n\tchecked?: boolean;\n\t/**\n\t * If indeterminate is true the state of the checkbox will be indeterminate.\n\t */\n\tindeterminate?: boolean;\n\t/**\n\t * @deprecated\n\t */\n\theading?: ReactNode;\n};\n"],"mappings":""}

package/build-module/date-time/time/timezone.js

@@ -30,8 +30,17 @@ const TimeZone = () => {
   }
   const offsetSymbol = Number(timezone.offset) >= 0 ? '+' : '';
   const zoneAbbr = '' !== timezone.abbr && isNaN(Number(timezone.abbr)) ? timezone.abbr : `UTC${offsetSymbol}${timezone.offset}`;
-  const timezoneDetail = 'UTC' === timezone.string ? __('Coordinated Universal Time') : `(${zoneAbbr}) ${timezone.string.replace('_', ' ')}`;
-  return createElement(Tooltip, {
+
+  // Replace underscore with space in strings like `America/Costa_Rica`.
+  const prettyTimezoneString = timezone.string.replace('_', ' ');
+  const timezoneDetail = 'UTC' === timezone.string ? __('Coordinated Universal Time') : `(${zoneAbbr}) ${prettyTimezoneString}`;
+
+  // When the prettyTimezoneString is empty, there is no additional timezone
+  // detail information to show in a Tooltip.
+  const hasNoAdditionalTimezoneDetail = prettyTimezoneString.trim().length === 0;
+  return hasNoAdditionalTimezoneDetail ? createElement(StyledComponent, {
+    className: "components-datetime__timezone"
+  }, zoneAbbr) : createElement(Tooltip, {
     placement: "top",
     text: timezoneDetail
   }, createElement(StyledComponent, {

package/build-module/date-time/time/timezone.js.map

@@ -1 +1 @@
-{"version":3,"names":["__","getSettings","getDateSettings","Tooltip","TimeZone","StyledComponent","timezone","userTimezoneOffset","Date","getTimezoneOffset","Number","offset","offsetSymbol","zoneAbbr","abbr","isNaN","timezoneDetail","string","replace","createElement","placement","text","className"],"sources":["@wordpress/components/src/date-time/time/timezone.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { getSettings as getDateSettings } from '@wordpress/date';\n\n/**\n * Internal dependencies\n */\nimport Tooltip from '../../tooltip';\nimport { TimeZone as StyledComponent } from './styles';\n\n/**\n * Displays timezone information when user timezone is different from site\n * timezone.\n */\nconst TimeZone = () => {\n\tconst { timezone } = getDateSettings();\n\n\t// Convert timezone offset to hours.\n\tconst userTimezoneOffset = -1 * ( new Date().getTimezoneOffset() / 60 );\n\n\t// System timezone and user timezone match, nothing needed.\n\t// Compare as numbers because it comes over as string.\n\tif ( Number( timezone.offset ) === userTimezoneOffset ) {\n\t\treturn null;\n\t}\n\n\tconst offsetSymbol = Number( timezone.offset ) >= 0 ? '+' : '';\n\tconst zoneAbbr =\n\t\t'' !== timezone.abbr && isNaN( Number( timezone.abbr ) )\n\t\t\t? timezone.abbr\n\t\t\t: `UTC${ offsetSymbol }${ timezone.offset }`;\n\n\tconst timezoneDetail =\n\t\t'UTC' === timezone.string\n\t\t\t? __( 'Coordinated Universal Time' )\n\t\t\t: `(${ zoneAbbr }) ${ timezone.string.replace( '_', ' ' ) }`;\n\n\treturn (\n\t\t<Tooltip placement=\"top\" text={ timezoneDetail }>\n\t\t\t<StyledComponent className=\"components-datetime__timezone\">\n\t\t\t\t{ zoneAbbr }\n\t\t\t</StyledComponent>\n\t\t</Tooltip>\n\t);\n};\n\nexport default TimeZone;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,WAAW,IAAIC,eAAe,QAAQ,iBAAiB;;AAEhE;AACA;AACA;AACA,OAAOC,OAAO,MAAM,eAAe;AACnC,SAASC,QAAQ,IAAIC,eAAe,QAAQ,UAAU;;AAEtD;AACA;AACA;AACA;AACA,MAAMD,QAAQ,GAAGA,CAAA,KAAM;EACtB,MAAM;IAAEE;EAAS,CAAC,GAAGJ,eAAe,CAAC,CAAC;;EAEtC;EACA,MAAMK,kBAAkB,GAAG,CAAC,CAAC,IAAK,IAAIC,IAAI,CAAC,CAAC,CAACC,iBAAiB,CAAC,CAAC,GAAG,EAAE,CAAE;;EAEvE;EACA;EACA,IAAKC,MAAM,CAAEJ,QAAQ,CAACK,MAAO,CAAC,KAAKJ,kBAAkB,EAAG;IACvD,OAAO,IAAI;EACZ;EAEA,MAAMK,YAAY,GAAGF,MAAM,CAAEJ,QAAQ,CAACK,MAAO,CAAC,IAAI,CAAC,GAAG,GAAG,GAAG,EAAE;EAC9D,MAAME,QAAQ,GACb,EAAE,KAAKP,QAAQ,CAACQ,IAAI,IAAIC,KAAK,CAAEL,MAAM,CAAEJ,QAAQ,CAACQ,IAAK,CAAE,CAAC,GACrDR,QAAQ,CAACQ,IAAI,GACZ,MAAMF,YAAc,GAAGN,QAAQ,CAACK,MAAQ,EAAC;EAE9C,MAAMK,cAAc,GACnB,KAAK,KAAKV,QAAQ,CAACW,MAAM,GACtBjB,EAAE,CAAE,4BAA6B,CAAC,GACjC,IAAIa,QAAU,KAAKP,QAAQ,CAACW,MAAM,CAACC,OAAO,CAAE,GAAG,EAAE,GAAI,CAAG,EAAC;EAE9D,OACCC,aAAA,CAAChB,OAAO;IAACiB,SAAS,EAAC,KAAK;IAACC,IAAI,EAAGL;EAAgB,GAC/CG,aAAA,CAACd,eAAe;IAACiB,SAAS,EAAC;EAA+B,GACvDT,QACc,CACT,CAAC;AAEZ,CAAC;AAED,eAAeT,QAAQ"}
+{"version":3,"names":["__","getSettings","getDateSettings","Tooltip","TimeZone","StyledComponent","timezone","userTimezoneOffset","Date","getTimezoneOffset","Number","offset","offsetSymbol","zoneAbbr","abbr","isNaN","prettyTimezoneString","string","replace","timezoneDetail","hasNoAdditionalTimezoneDetail","trim","length","createElement","className","placement","text"],"sources":["@wordpress/components/src/date-time/time/timezone.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { getSettings as getDateSettings } from '@wordpress/date';\n\n/**\n * Internal dependencies\n */\nimport Tooltip from '../../tooltip';\nimport { TimeZone as StyledComponent } from './styles';\n\n/**\n * Displays timezone information when user timezone is different from site\n * timezone.\n */\nconst TimeZone = () => {\n\tconst { timezone } = getDateSettings();\n\n\t// Convert timezone offset to hours.\n\tconst userTimezoneOffset = -1 * ( new Date().getTimezoneOffset() / 60 );\n\n\t// System timezone and user timezone match, nothing needed.\n\t// Compare as numbers because it comes over as string.\n\tif ( Number( timezone.offset ) === userTimezoneOffset ) {\n\t\treturn null;\n\t}\n\n\tconst offsetSymbol = Number( timezone.offset ) >= 0 ? '+' : '';\n\tconst zoneAbbr =\n\t\t'' !== timezone.abbr && isNaN( Number( timezone.abbr ) )\n\t\t\t? timezone.abbr\n\t\t\t: `UTC${ offsetSymbol }${ timezone.offset }`;\n\n\t// Replace underscore with space in strings like `America/Costa_Rica`.\n\tconst prettyTimezoneString = timezone.string.replace( '_', ' ' );\n\n\tconst timezoneDetail =\n\t\t'UTC' === timezone.string\n\t\t\t? __( 'Coordinated Universal Time' )\n\t\t\t: `(${ zoneAbbr }) ${ prettyTimezoneString }`;\n\n\t// When the prettyTimezoneString is empty, there is no additional timezone\n\t// detail information to show in a Tooltip.\n\tconst hasNoAdditionalTimezoneDetail =\n\t\tprettyTimezoneString.trim().length === 0;\n\n\treturn hasNoAdditionalTimezoneDetail ? (\n\t\t<StyledComponent className=\"components-datetime__timezone\">\n\t\t\t{ zoneAbbr }\n\t\t</StyledComponent>\n\t) : (\n\t\t<Tooltip placement=\"top\" text={ timezoneDetail }>\n\t\t\t<StyledComponent className=\"components-datetime__timezone\">\n\t\t\t\t{ zoneAbbr }\n\t\t\t</StyledComponent>\n\t\t</Tooltip>\n\t);\n};\n\nexport default TimeZone;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,WAAW,IAAIC,eAAe,QAAQ,iBAAiB;;AAEhE;AACA;AACA;AACA,OAAOC,OAAO,MAAM,eAAe;AACnC,SAASC,QAAQ,IAAIC,eAAe,QAAQ,UAAU;;AAEtD;AACA;AACA;AACA;AACA,MAAMD,QAAQ,GAAGA,CAAA,KAAM;EACtB,MAAM;IAAEE;EAAS,CAAC,GAAGJ,eAAe,CAAC,CAAC;;EAEtC;EACA,MAAMK,kBAAkB,GAAG,CAAC,CAAC,IAAK,IAAIC,IAAI,CAAC,CAAC,CAACC,iBAAiB,CAAC,CAAC,GAAG,EAAE,CAAE;;EAEvE;EACA;EACA,IAAKC,MAAM,CAAEJ,QAAQ,CAACK,MAAO,CAAC,KAAKJ,kBAAkB,EAAG;IACvD,OAAO,IAAI;EACZ;EAEA,MAAMK,YAAY,GAAGF,MAAM,CAAEJ,QAAQ,CAACK,MAAO,CAAC,IAAI,CAAC,GAAG,GAAG,GAAG,EAAE;EAC9D,MAAME,QAAQ,GACb,EAAE,KAAKP,QAAQ,CAACQ,IAAI,IAAIC,KAAK,CAAEL,MAAM,CAAEJ,QAAQ,CAACQ,IAAK,CAAE,CAAC,GACrDR,QAAQ,CAACQ,IAAI,GACZ,MAAMF,YAAc,GAAGN,QAAQ,CAACK,MAAQ,EAAC;;EAE9C;EACA,MAAMK,oBAAoB,GAAGV,QAAQ,CAACW,MAAM,CAACC,OAAO,CAAE,GAAG,EAAE,GAAI,CAAC;EAEhE,MAAMC,cAAc,GACnB,KAAK,KAAKb,QAAQ,CAACW,MAAM,GACtBjB,EAAE,CAAE,4BAA6B,CAAC,GACjC,IAAIa,QAAU,KAAKG,oBAAsB,EAAC;;EAE/C;EACA;EACA,MAAMI,6BAA6B,GAClCJ,oBAAoB,CAACK,IAAI,CAAC,CAAC,CAACC,MAAM,KAAK,CAAC;EAEzC,OAAOF,6BAA6B,GACnCG,aAAA,CAAClB,eAAe;IAACmB,SAAS,EAAC;EAA+B,GACvDX,QACc,CAAC,GAElBU,aAAA,CAACpB,OAAO;IAACsB,SAAS,EAAC,KAAK;IAACC,IAAI,EAAGP;EAAgB,GAC/CI,aAAA,CAAClB,eAAe;IAACmB,SAAS,EAAC;EAA+B,GACvDX,QACc,CACT,CACT;AACF,CAAC;AAED,eAAeT,QAAQ"}

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

@@ -40,6 +40,7 @@ import sizesTable, { findSizeBySlug } from './sizes';
  */
 export function DimensionControl(props) {
   const {
+    __next40pxDefaultSize = false,
     label,
     value,
     sizes = sizesTable,
@@ -72,6 +73,7 @@ export function DimensionControl(props) {
     icon: icon
   }), label);
   return createElement(SelectControl, {
+    __next40pxDefaultSize: __next40pxDefaultSize,
     className: classnames(className, 'block-editor-dimension-control'),
     label: selectLabel,
     hideLabelFromVision: false,

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

@@ -1 +1 @@
-{"version":3,"names":["classnames","__","Icon","SelectControl","sizesTable","findSizeBySlug","DimensionControl","props","label","value","sizes","icon","onChange","className","onChangeSpacingSize","val","theSize","slug","undefined","formatSizesAsOptions","theSizes","options","map","name","selectLabel","createElement","Fragment","hideLabelFromVision"],"sources":["@wordpress/components/src/dimension-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Icon from '../icon';\nimport SelectControl from '../select-control';\nimport sizesTable, { findSizeBySlug } from './sizes';\nimport type { DimensionControlProps, Size } from './types';\nimport type { SelectControlSingleSelectionProps } from '../select-control/types';\n\n/**\n * `DimensionControl` is a component designed to provide a UI to control spacing and/or dimensions.\n *\n * This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.\n *\n * ```jsx\n * import { __experimentalDimensionControl as DimensionControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * export default function MyCustomDimensionControl() {\n * \tconst [ paddingSize, setPaddingSize ] = useState( '' );\n *\n * \treturn (\n * \t\t<DimensionControl\n * \t\t\tlabel={ 'Padding' }\n * \t\t\ticon={ 'desktop' }\n * \t\t\tonChange={ ( value ) => setPaddingSize( value ) }\n * \t\t\tvalue={ paddingSize }\n * \t\t/>\n * \t);\n * }\n * ```\n */\nexport function DimensionControl( props: DimensionControlProps ) {\n\tconst {\n\t\tlabel,\n\t\tvalue,\n\t\tsizes = sizesTable,\n\t\ticon,\n\t\tonChange,\n\t\tclassName = '',\n\t} = props;\n\n\tconst onChangeSpacingSize: SelectControlSingleSelectionProps[ 'onChange' ] =\n\t\t( val ) => {\n\t\t\tconst theSize = findSizeBySlug( sizes, val );\n\n\t\t\tif ( ! theSize || value === theSize.slug ) {\n\t\t\t\tonChange?.( undefined );\n\t\t\t} else if ( typeof onChange === 'function' ) {\n\t\t\t\tonChange( theSize.slug );\n\t\t\t}\n\t\t};\n\n\tconst formatSizesAsOptions = ( theSizes: Size[] ) => {\n\t\tconst options = theSizes.map( ( { name, slug } ) => ( {\n\t\t\tlabel: name,\n\t\t\tvalue: slug,\n\t\t} ) );\n\n\t\treturn [\n\t\t\t{\n\t\t\t\tlabel: __( 'Default' ),\n\t\t\t\tvalue: '',\n\t\t\t},\n\t\t\t...options,\n\t\t];\n\t};\n\n\tconst selectLabel = (\n\t\t<>\n\t\t\t{ icon && <Icon icon={ icon } /> }\n\t\t\t{ label }\n\t\t</>\n\t);\n\n\treturn (\n\t\t<SelectControl\n\t\t\tclassName={ classnames(\n\t\t\t\tclassName,\n\t\t\t\t'block-editor-dimension-control'\n\t\t\t) }\n\t\t\tlabel={ selectLabel }\n\t\t\thideLabelFromVision={ false }\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChangeSpacingSize }\n\t\t\toptions={ formatSizesAsOptions( sizes ) }\n\t\t/>\n\t);\n}\n\nexport default DimensionControl;\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,YAAY;;AAEnC;AACA;AACA;AACA,SAASC,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,OAAOC,IAAI,MAAM,SAAS;AAC1B,OAAOC,aAAa,MAAM,mBAAmB;AAC7C,OAAOC,UAAU,IAAIC,cAAc,QAAQ,SAAS;AAIpD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,gBAAgBA,CAAEC,KAA4B,EAAG;EAChE,MAAM;IACLC,KAAK;IACLC,KAAK;IACLC,KAAK,GAAGN,UAAU;IAClBO,IAAI;IACJC,QAAQ;IACRC,SAAS,GAAG;EACb,CAAC,GAAGN,KAAK;EAET,MAAMO,mBAAoE,GACvEC,GAAG,IAAM;IACV,MAAMC,OAAO,GAAGX,cAAc,CAAEK,KAAK,EAAEK,GAAI,CAAC;IAE5C,IAAK,CAAEC,OAAO,IAAIP,KAAK,KAAKO,OAAO,CAACC,IAAI,EAAG;MAC1CL,QAAQ,GAAIM,SAAU,CAAC;IACxB,CAAC,MAAM,IAAK,OAAON,QAAQ,KAAK,UAAU,EAAG;MAC5CA,QAAQ,CAAEI,OAAO,CAACC,IAAK,CAAC;IACzB;EACD,CAAC;EAEF,MAAME,oBAAoB,GAAKC,QAAgB,IAAM;IACpD,MAAMC,OAAO,GAAGD,QAAQ,CAACE,GAAG,CAAE,CAAE;MAAEC,IAAI;MAAEN;IAAK,CAAC,MAAQ;MACrDT,KAAK,EAAEe,IAAI;MACXd,KAAK,EAAEQ;IACR,CAAC,CAAG,CAAC;IAEL,OAAO,CACN;MACCT,KAAK,EAAEP,EAAE,CAAE,SAAU,CAAC;MACtBQ,KAAK,EAAE;IACR,CAAC,EACD,GAAGY,OAAO,CACV;EACF,CAAC;EAED,MAAMG,WAAW,GAChBC,aAAA,CAAAC,QAAA,QACGf,IAAI,IAAIc,aAAA,CAACvB,IAAI;IAACS,IAAI,EAAGA;EAAM,CAAE,CAAC,EAC9BH,KACD,CACF;EAED,OACCiB,aAAA,CAACtB,aAAa;IACbU,SAAS,EAAGb,UAAU,CACrBa,SAAS,EACT,gCACD,CAAG;IACHL,KAAK,EAAGgB,WAAa;IACrBG,mBAAmB,EAAG,KAAO;IAC7BlB,KAAK,EAAGA,KAAO;IACfG,QAAQ,EAAGE,mBAAqB;IAChCO,OAAO,EAAGF,oBAAoB,CAAET,KAAM;EAAG,CACzC,CAAC;AAEJ;AAEA,eAAeJ,gBAAgB"}
+{"version":3,"names":["classnames","__","Icon","SelectControl","sizesTable","findSizeBySlug","DimensionControl","props","__next40pxDefaultSize","label","value","sizes","icon","onChange","className","onChangeSpacingSize","val","theSize","slug","undefined","formatSizesAsOptions","theSizes","options","map","name","selectLabel","createElement","Fragment","hideLabelFromVision"],"sources":["@wordpress/components/src/dimension-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Icon from '../icon';\nimport SelectControl from '../select-control';\nimport sizesTable, { findSizeBySlug } from './sizes';\nimport type { DimensionControlProps, Size } from './types';\nimport type { SelectControlSingleSelectionProps } from '../select-control/types';\n\n/**\n * `DimensionControl` is a component designed to provide a UI to control spacing and/or dimensions.\n *\n * This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.\n *\n * ```jsx\n * import { __experimentalDimensionControl as DimensionControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * export default function MyCustomDimensionControl() {\n * \tconst [ paddingSize, setPaddingSize ] = useState( '' );\n *\n * \treturn (\n * \t\t<DimensionControl\n * \t\t\tlabel={ 'Padding' }\n * \t\t\ticon={ 'desktop' }\n * \t\t\tonChange={ ( value ) => setPaddingSize( value ) }\n * \t\t\tvalue={ paddingSize }\n * \t\t/>\n * \t);\n * }\n * ```\n */\nexport function DimensionControl( props: DimensionControlProps ) {\n\tconst {\n\t\t__next40pxDefaultSize = false,\n\t\tlabel,\n\t\tvalue,\n\t\tsizes = sizesTable,\n\t\ticon,\n\t\tonChange,\n\t\tclassName = '',\n\t} = props;\n\n\tconst onChangeSpacingSize: SelectControlSingleSelectionProps[ 'onChange' ] =\n\t\t( val ) => {\n\t\t\tconst theSize = findSizeBySlug( sizes, val );\n\n\t\t\tif ( ! theSize || value === theSize.slug ) {\n\t\t\t\tonChange?.( undefined );\n\t\t\t} else if ( typeof onChange === 'function' ) {\n\t\t\t\tonChange( theSize.slug );\n\t\t\t}\n\t\t};\n\n\tconst formatSizesAsOptions = ( theSizes: Size[] ) => {\n\t\tconst options = theSizes.map( ( { name, slug } ) => ( {\n\t\t\tlabel: name,\n\t\t\tvalue: slug,\n\t\t} ) );\n\n\t\treturn [\n\t\t\t{\n\t\t\t\tlabel: __( 'Default' ),\n\t\t\t\tvalue: '',\n\t\t\t},\n\t\t\t...options,\n\t\t];\n\t};\n\n\tconst selectLabel = (\n\t\t<>\n\t\t\t{ icon && <Icon icon={ icon } /> }\n\t\t\t{ label }\n\t\t</>\n\t);\n\n\treturn (\n\t\t<SelectControl\n\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\tclassName={ classnames(\n\t\t\t\tclassName,\n\t\t\t\t'block-editor-dimension-control'\n\t\t\t) }\n\t\t\tlabel={ selectLabel }\n\t\t\thideLabelFromVision={ false }\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChangeSpacingSize }\n\t\t\toptions={ formatSizesAsOptions( sizes ) }\n\t\t/>\n\t);\n}\n\nexport default DimensionControl;\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,YAAY;;AAEnC;AACA;AACA;AACA,SAASC,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,OAAOC,IAAI,MAAM,SAAS;AAC1B,OAAOC,aAAa,MAAM,mBAAmB;AAC7C,OAAOC,UAAU,IAAIC,cAAc,QAAQ,SAAS;AAIpD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,gBAAgBA,CAAEC,KAA4B,EAAG;EAChE,MAAM;IACLC,qBAAqB,GAAG,KAAK;IAC7BC,KAAK;IACLC,KAAK;IACLC,KAAK,GAAGP,UAAU;IAClBQ,IAAI;IACJC,QAAQ;IACRC,SAAS,GAAG;EACb,CAAC,GAAGP,KAAK;EAET,MAAMQ,mBAAoE,GACvEC,GAAG,IAAM;IACV,MAAMC,OAAO,GAAGZ,cAAc,CAAEM,KAAK,EAAEK,GAAI,CAAC;IAE5C,IAAK,CAAEC,OAAO,IAAIP,KAAK,KAAKO,OAAO,CAACC,IAAI,EAAG;MAC1CL,QAAQ,GAAIM,SAAU,CAAC;IACxB,CAAC,MAAM,IAAK,OAAON,QAAQ,KAAK,UAAU,EAAG;MAC5CA,QAAQ,CAAEI,OAAO,CAACC,IAAK,CAAC;IACzB;EACD,CAAC;EAEF,MAAME,oBAAoB,GAAKC,QAAgB,IAAM;IACpD,MAAMC,OAAO,GAAGD,QAAQ,CAACE,GAAG,CAAE,CAAE;MAAEC,IAAI;MAAEN;IAAK,CAAC,MAAQ;MACrDT,KAAK,EAAEe,IAAI;MACXd,KAAK,EAAEQ;IACR,CAAC,CAAG,CAAC;IAEL,OAAO,CACN;MACCT,KAAK,EAAER,EAAE,CAAE,SAAU,CAAC;MACtBS,KAAK,EAAE;IACR,CAAC,EACD,GAAGY,OAAO,CACV;EACF,CAAC;EAED,MAAMG,WAAW,GAChBC,aAAA,CAAAC,QAAA,QACGf,IAAI,IAAIc,aAAA,CAACxB,IAAI;IAACU,IAAI,EAAGA;EAAM,CAAE,CAAC,EAC9BH,KACD,CACF;EAED,OACCiB,aAAA,CAACvB,aAAa;IACbK,qBAAqB,EAAGA,qBAAuB;IAC/CM,SAAS,EAAGd,UAAU,CACrBc,SAAS,EACT,gCACD,CAAG;IACHL,KAAK,EAAGgB,WAAa;IACrBG,mBAAmB,EAAG,KAAO;IAC7BlB,KAAK,EAAGA,KAAO;IACfG,QAAQ,EAAGE,mBAAqB;IAChCO,OAAO,EAAGF,oBAAoB,CAAET,KAAM;EAAG,CACzC,CAAC;AAEJ;AAEA,eAAeL,gBAAgB"}

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/dimension-control/types.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { IconType } from '../icon';\n\nexport type Size = {\n\t/**\n\t * Human-readable name of the size.\n\t */\n\tname: string;\n\t/**\n\t * Short unique identifying name of the size.\n\t */\n\tslug: string;\n};\n\nexport type DimensionControlProps = {\n\t/**\n\t * Label for the control.\n\t */\n\tlabel: string;\n\t/**\n\t * An array of sizes to choose from.\n\t *\n\t * @default DEFAULT_SIZES\n\t *\n\t * @see packages/components/src/dimension-control/sizes.ts\n\t */\n\tsizes?: Size[];\n\t/**\n\t * Optional icon rendered in front on the label.\n\t */\n\ticon?: IconType;\n\t/**\n\t * Used to externally control the current value of the control.\n\t */\n\tvalue?: string;\n\t/**\n\t * Function called with the control's internal state changes. The `value` property is equal to a given size slug.\n\t */\n\tonChange?: ( value?: string ) => void;\n\t/**\n\t * CSS class applied to `SelectControl`.\n\t *\n\t * @default ''\n\t */\n\tclassName?: string;\n};\n"],"mappings":""}
+{"version":3,"names":[],"sources":["@wordpress/components/src/dimension-control/types.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { IconType } from '../icon';\n\nexport type Size = {\n\t/**\n\t * Human-readable name of the size.\n\t */\n\tname: string;\n\t/**\n\t * Short unique identifying name of the size.\n\t */\n\tslug: string;\n};\n\nexport type DimensionControlProps = {\n\t/**\n\t * Label for the control.\n\t */\n\tlabel: string;\n\t/**\n\t * An array of sizes to choose from.\n\t *\n\t * @default DEFAULT_SIZES\n\t *\n\t * @see packages/components/src/dimension-control/sizes.ts\n\t */\n\tsizes?: Size[];\n\t/**\n\t * Optional icon rendered in front on the label.\n\t */\n\ticon?: IconType;\n\t/**\n\t * Used to externally control the current value of the control.\n\t */\n\tvalue?: string;\n\t/**\n\t * Function called with the control's internal state changes. The `value` property is equal to a given size slug.\n\t */\n\tonChange?: ( value?: string ) => void;\n\t/**\n\t * CSS class applied to `SelectControl`.\n\t *\n\t * @default ''\n\t */\n\tclassName?: string;\n\t/**\n\t * Start opting into the larger default height that will become the default size in a future version.\n\t *\n\t * @default false\n\t */\n\t__next40pxDefaultSize?: boolean;\n};\n"],"mappings":""}