@wordpress/components 19.15.0 → 20.0.1-next.d6164808d3.0

package/build/focal-point-picker/styles/focal-point-picker-style.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/focal-point-picker/styles/focal-point-picker-style.js"],"names":["MediaWrapper","MediaContainer","MediaPlaceholder","COLORS","lightGray","UnitControl","BaseUnitControl","ControlWrapper","Flex","GridView","isActive","GridLine","GridLineX","GridLineY"],"mappings":";;;;;;;;;;;AAQA;;AACA;;AACA;;;;AAEO,MAAMA,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;;AAOA,MAAMC,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAApB;;AAyBA,MAAMC,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,kBACbC,cAAOC,SAAP,CAAkB,GAAlB,CADa,uoGAAtB;;AASA,MAAMC,WAAW,GAAG,iCAAQC,oBAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAjB;;AAIA,MAAMC,cAAc,GAAG,iCAAQC,UAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAApB;;AAKA,MAAMC,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,+LAYjB;AAAA,MAAE;AAAEC,IAAAA;AAAF,GAAF;AAAA,SACFA,QAAQ,IACP;AACH;AACA,EAJI;AAAA,CAZiB,yjGAAd;;AAmBA,MAAMC,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAd;;AASA,MAAMC,SAAS,GAAG,iCAAQD,QAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAf;;AAMA,MAAME,SAAS,GAAG,iCAAQF,QAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAf","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport { Flex } from '../../flex';\nimport BaseUnitControl from '../../unit-control';\nimport { COLORS } from '../../utils';\n\nexport const MediaWrapper = styled.div`\n\tbackground-color: transparent;\n\tbox-sizing: border-box;\n\ttext-align: center;\n\twidth: 100%;\n`;\n\nexport const MediaContainer = styled.div`\n\talign-items: center;\n\tbox-sizing: border-box;\n\tbox-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.2 );\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\tjustify-content: center;\n\tmargin: auto;\n\tposition: relative;\n\theight: 100%;\n\n\timg,\n\tvideo {\n\t\tbox-sizing: border-box;\n\t\tdisplay: block;\n\t\theight: auto;\n\t\tmargin: 0;\n\t\tmax-height: 100%;\n\t\tmax-width: 100%;\n\t\tpointer-events: none;\n\t\tuser-select: none;\n\t\twidth: auto;\n\t}\n`;\n\nexport const MediaPlaceholder = styled.div`\n\tbackground: ${ COLORS.lightGray[ 300 ] };\n\tbox-sizing: border-box;\n\theight: 170px;\n\tmax-width: 280px;\n\tmin-width: 200px;\n\twidth: 100%;\n`;\n\nexport const UnitControl = styled( BaseUnitControl )`\n\twidth: 100px;\n`;\n\nexport const ControlWrapper = styled( Flex )`\n\tmax-width: 320px;\n\tpadding: 1em 0;\n`;\n\nexport const GridView = styled.div`\n\tbox-sizing: border-box;\n\tleft: 50%;\n\topacity: 0;\n\toverflow: hidden;\n\tpointer-events: none;\n\tposition: absolute;\n\ttop: 50%;\n\ttransform: translate3d( -50%, -50%, 0 );\n\ttransition: opacity 120ms linear;\n\tz-index: 1;\n\n\t${ ( { isActive } ) =>\n\t\tisActive &&\n\t\t`\n\t\topacity: 1;\n\t` }\n`;\n\nexport const GridLine = styled.div`\n\tbox-sizing: border-box;\n\tbackground: white;\n\tbox-shadow: 0 0 2px rgba( 0, 0, 0, 0.6 );\n\tposition: absolute;\n\topacity: 0.4;\n\ttransform: translateZ( 0 );\n`;\n\nexport const GridLineX = styled( GridLine )`\n\theight: 1px;\n\tleft: 0;\n\tright: 0;\n`;\n\nexport const GridLineY = styled( GridLine )`\n\twidth: 1px;\n\ttop: 0;\n\tbottom: 0;\n`;\n"]}
+{"version":3,"sources":["@wordpress/components/src/focal-point-picker/styles/focal-point-picker-style.js"],"names":["MediaWrapper","MediaContainer","MediaPlaceholder","COLORS","lightGray","UnitControl","BaseUnitControl","ControlWrapper","Flex","GridView","isActive","GridLine","GridLineX","GridLineY"],"mappings":";;;;;;;;;;;AAQA;;AACA;;AACA;;;;AAEO,MAAMA,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;;AAMA,MAAMC,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAApB;;AAwBA,MAAMC,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,kBACbC,cAAOC,SAAP,CAAkB,GAAlB,CADa,67FAAtB;;AAQA,MAAMC,WAAW,GAAG,iCAAQC,oBAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAjB;;AAIA,MAAMC,cAAc,GAAG,iCAAQC,UAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAApB;;AAKA,MAAMC,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,yKAWjB;AAAA,MAAE;AAAEC,IAAAA;AAAF,GAAF;AAAA,SACFA,QAAQ,IACP;AACH;AACA,EAJI;AAAA,CAXiB,q4FAAd;;AAkBA,MAAMC,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAd;;AAQA,MAAMC,SAAS,GAAG,iCAAQD,QAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAf;;AAMA,MAAME,SAAS,GAAG,iCAAQF,QAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAf","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport { Flex } from '../../flex';\nimport BaseUnitControl from '../../unit-control';\nimport { COLORS } from '../../utils';\n\nexport const MediaWrapper = styled.div`\n\tbackground-color: transparent;\n\ttext-align: center;\n\twidth: 100%;\n`;\n\nexport const MediaContainer = styled.div`\n\talign-items: center;\n\tbox-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.2 );\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\tjustify-content: center;\n\tmargin: auto;\n\tposition: relative;\n\theight: 100%;\n\n\timg,\n\tvideo {\n\t\tbox-sizing: border-box;\n\t\tdisplay: block;\n\t\theight: auto;\n\t\tmargin: 0;\n\t\tmax-height: 100%;\n\t\tmax-width: 100%;\n\t\tpointer-events: none;\n\t\tuser-select: none;\n\t\twidth: auto;\n\t}\n`;\n\nexport const MediaPlaceholder = styled.div`\n\tbackground: ${ COLORS.lightGray[ 300 ] };\n\theight: 170px;\n\tmax-width: 280px;\n\tmin-width: 200px;\n\twidth: 100%;\n`;\n\nexport const UnitControl = styled( BaseUnitControl )`\n\twidth: 100px;\n`;\n\nexport const ControlWrapper = styled( Flex )`\n\tmax-width: 320px;\n\tpadding: 1em 0;\n`;\n\nexport const GridView = styled.div`\n\tleft: 50%;\n\topacity: 0;\n\toverflow: hidden;\n\tpointer-events: none;\n\tposition: absolute;\n\ttop: 50%;\n\ttransform: translate3d( -50%, -50%, 0 );\n\ttransition: opacity 120ms linear;\n\tz-index: 1;\n\n\t${ ( { isActive } ) =>\n\t\tisActive &&\n\t\t`\n\t\topacity: 1;\n\t` }\n`;\n\nexport const GridLine = styled.div`\n\tbackground: white;\n\tbox-shadow: 0 0 2px rgba( 0, 0, 0, 0.6 );\n\tposition: absolute;\n\topacity: 0.4;\n\ttransform: translateZ( 0 );\n`;\n\nexport const GridLineX = styled( GridLine )`\n\theight: 1px;\n\tleft: 0;\n\tright: 0;\n`;\n\nexport const GridLineY = styled( GridLine )`\n\twidth: 1px;\n\ttop: 0;\n\tbottom: 0;\n`;\n"]}

package/build/focal-point-picker/styles/focal-point-style.js

@@ -20,12 +20,12 @@ const FocalPointWrapper = (0, _base.default)("div", process.env.NODE_ENV === "pr
 } : {
   target: "eas61re3",
   label: "FocalPointWrapper"
-})("background-color:transparent;box-sizing:border-box;cursor:grab;height:30px;margin:-15px 0 0 -15px;opacity:0.8;position:absolute;user-select:none;width:30px;will-change:transform;z-index:10000;", _ref => {
+})("background-color:transparent;cursor:grab;height:30px;margin:-15px 0 0 -15px;opacity:0.8;position:absolute;user-select:none;width:30px;will-change:transform;z-index:10000;", _ref => {
   let {
     isDragging
   } = _ref;
   return isDragging && 'cursor: grabbing;';
-}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9jYWwtcG9pbnQtcGlja2VyL3N0eWxlcy9mb2NhbC1wb2ludC1zdHlsZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFlMkMiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9mb2NhbC1wb2ludC1waWNrZXIvc3R5bGVzL2ZvY2FsLXBvaW50LXN0eWxlLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIFdvcmRQcmVzcyBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgUGF0aCwgU1ZHIH0gZnJvbSAnQHdvcmRwcmVzcy9wcmltaXRpdmVzJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09MT1JTIH0gZnJvbSAnLi4vLi4vdXRpbHMnO1xuXG5leHBvcnQgY29uc3QgRm9jYWxQb2ludFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuXHRiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0Y3Vyc29yOiBncmFiO1xuXHRoZWlnaHQ6IDMwcHg7XG5cdG1hcmdpbjogLTE1cHggMCAwIC0xNXB4O1xuXHRvcGFjaXR5OiAwLjg7XG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0dXNlci1zZWxlY3Q6IG5vbmU7XG5cdHdpZHRoOiAzMHB4O1xuXHR3aWxsLWNoYW5nZTogdHJhbnNmb3JtO1xuXHR6LWluZGV4OiAxMDAwMDtcblxuXHQkeyAoIHsgaXNEcmFnZ2luZyB9ICkgPT4gaXNEcmFnZ2luZyAmJiAnY3Vyc29yOiBncmFiYmluZzsnIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBQb2ludGVySWNvblNWRyA9IHN0eWxlZCggU1ZHIClgXG5cdGRpc3BsYXk6IGJsb2NrO1xuXHRoZWlnaHQ6IDEwMCU7XG5cdGxlZnQ6IDA7XG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0dG9wOiAwO1xuXHR3aWR0aDogMTAwJTtcbmA7XG5cbmV4cG9ydCBjb25zdCBQb2ludGVySWNvblBhdGhPdXRsaW5lID0gc3R5bGVkKCBQYXRoIClgXG5cdGZpbGw6IHdoaXRlO1xuYDtcblxuZXhwb3J0IGNvbnN0IFBvaW50ZXJJY29uUGF0aEZpbGwgPSBzdHlsZWQoIFBhdGggKWBcblx0ZmlsbDogJHsgQ09MT1JTLmJsdWUud29yZHByZXNzWyA3MDAgXSB9O1xuXHRmaWxsOiAkeyBDT0xPUlMudWkudGhlbWUgfTtcbmA7XG4iXX0= */"));
+}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9jYWwtcG9pbnQtcGlja2VyL3N0eWxlcy9mb2NhbC1wb2ludC1zdHlsZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFlMkMiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9mb2NhbC1wb2ludC1waWNrZXIvc3R5bGVzL2ZvY2FsLXBvaW50LXN0eWxlLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIFdvcmRQcmVzcyBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgUGF0aCwgU1ZHIH0gZnJvbSAnQHdvcmRwcmVzcy9wcmltaXRpdmVzJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09MT1JTIH0gZnJvbSAnLi4vLi4vdXRpbHMnO1xuXG5leHBvcnQgY29uc3QgRm9jYWxQb2ludFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuXHRiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcblx0Y3Vyc29yOiBncmFiO1xuXHRoZWlnaHQ6IDMwcHg7XG5cdG1hcmdpbjogLTE1cHggMCAwIC0xNXB4O1xuXHRvcGFjaXR5OiAwLjg7XG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0dXNlci1zZWxlY3Q6IG5vbmU7XG5cdHdpZHRoOiAzMHB4O1xuXHR3aWxsLWNoYW5nZTogdHJhbnNmb3JtO1xuXHR6LWluZGV4OiAxMDAwMDtcblxuXHQkeyAoIHsgaXNEcmFnZ2luZyB9ICkgPT4gaXNEcmFnZ2luZyAmJiAnY3Vyc29yOiBncmFiYmluZzsnIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBQb2ludGVySWNvblNWRyA9IHN0eWxlZCggU1ZHIClgXG5cdGRpc3BsYXk6IGJsb2NrO1xuXHRoZWlnaHQ6IDEwMCU7XG5cdGxlZnQ6IDA7XG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0dG9wOiAwO1xuXHR3aWR0aDogMTAwJTtcbmA7XG5cbmV4cG9ydCBjb25zdCBQb2ludGVySWNvblBhdGhPdXRsaW5lID0gc3R5bGVkKCBQYXRoIClgXG5cdGZpbGw6IHdoaXRlO1xuYDtcblxuZXhwb3J0IGNvbnN0IFBvaW50ZXJJY29uUGF0aEZpbGwgPSBzdHlsZWQoIFBhdGggKWBcblx0ZmlsbDogJHsgQ09MT1JTLnVpLnRoZW1lIH07XG5gO1xuIl19 */"));
 exports.FocalPointWrapper = FocalPointWrapper;
 const PointerIconSVG = ( /*#__PURE__*/0, _base.default)(_primitives.SVG, process.env.NODE_ENV === "production" ? {
   target: "eas61re2"
@@ -38,7 +38,7 @@ const PointerIconSVG = ( /*#__PURE__*/0, _base.default)(_primitives.SVG, process
 } : {
   name: "qkx60y",
   styles: "display:block;height:100%;left:0;position:absolute;top:0;width:100%",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9jYWwtcG9pbnQtcGlja2VyL3N0eWxlcy9mb2NhbC1wb2ludC1zdHlsZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUErQjJDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9jYWwtcG9pbnQtcGlja2VyL3N0eWxlcy9mb2NhbC1wb2ludC1zdHlsZS5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBXb3JkUHJlc3MgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IFBhdGgsIFNWRyB9IGZyb20gJ0B3b3JkcHJlc3MvcHJpbWl0aXZlcyc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUyB9IGZyb20gJy4uLy4uL3V0aWxzJztcblxuZXhwb3J0IGNvbnN0IEZvY2FsUG9pbnRXcmFwcGVyID0gc3R5bGVkLmRpdmBcblx0YmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGN1cnNvcjogZ3JhYjtcblx0aGVpZ2h0OiAzMHB4O1xuXHRtYXJnaW46IC0xNXB4IDAgMCAtMTVweDtcblx0b3BhY2l0eTogMC44O1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHVzZXItc2VsZWN0OiBub25lO1xuXHR3aWR0aDogMzBweDtcblx0d2lsbC1jaGFuZ2U6IHRyYW5zZm9ybTtcblx0ei1pbmRleDogMTAwMDA7XG5cblx0JHsgKCB7IGlzRHJhZ2dpbmcgfSApID0+IGlzRHJhZ2dpbmcgJiYgJ2N1cnNvcjogZ3JhYmJpbmc7JyB9XG5gO1xuXG5leHBvcnQgY29uc3QgUG9pbnRlckljb25TVkcgPSBzdHlsZWQoIFNWRyApYFxuXHRkaXNwbGF5OiBibG9jaztcblx0aGVpZ2h0OiAxMDAlO1xuXHRsZWZ0OiAwO1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHRvcDogMDtcblx0d2lkdGg6IDEwMCU7XG5gO1xuXG5leHBvcnQgY29uc3QgUG9pbnRlckljb25QYXRoT3V0bGluZSA9IHN0eWxlZCggUGF0aCApYFxuXHRmaWxsOiB3aGl0ZTtcbmA7XG5cbmV4cG9ydCBjb25zdCBQb2ludGVySWNvblBhdGhGaWxsID0gc3R5bGVkKCBQYXRoIClgXG5cdGZpbGw6ICR7IENPTE9SUy5ibHVlLndvcmRwcmVzc1sgNzAwIF0gfTtcblx0ZmlsbDogJHsgQ09MT1JTLnVpLnRoZW1lIH07XG5gO1xuIl19 */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9jYWwtcG9pbnQtcGlja2VyL3N0eWxlcy9mb2NhbC1wb2ludC1zdHlsZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE4QjJDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9jYWwtcG9pbnQtcGlja2VyL3N0eWxlcy9mb2NhbC1wb2ludC1zdHlsZS5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBXb3JkUHJlc3MgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IFBhdGgsIFNWRyB9IGZyb20gJ0B3b3JkcHJlc3MvcHJpbWl0aXZlcyc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUyB9IGZyb20gJy4uLy4uL3V0aWxzJztcblxuZXhwb3J0IGNvbnN0IEZvY2FsUG9pbnRXcmFwcGVyID0gc3R5bGVkLmRpdmBcblx0YmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG5cdGN1cnNvcjogZ3JhYjtcblx0aGVpZ2h0OiAzMHB4O1xuXHRtYXJnaW46IC0xNXB4IDAgMCAtMTVweDtcblx0b3BhY2l0eTogMC44O1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHVzZXItc2VsZWN0OiBub25lO1xuXHR3aWR0aDogMzBweDtcblx0d2lsbC1jaGFuZ2U6IHRyYW5zZm9ybTtcblx0ei1pbmRleDogMTAwMDA7XG5cblx0JHsgKCB7IGlzRHJhZ2dpbmcgfSApID0+IGlzRHJhZ2dpbmcgJiYgJ2N1cnNvcjogZ3JhYmJpbmc7JyB9XG5gO1xuXG5leHBvcnQgY29uc3QgUG9pbnRlckljb25TVkcgPSBzdHlsZWQoIFNWRyApYFxuXHRkaXNwbGF5OiBibG9jaztcblx0aGVpZ2h0OiAxMDAlO1xuXHRsZWZ0OiAwO1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHRvcDogMDtcblx0d2lkdGg6IDEwMCU7XG5gO1xuXG5leHBvcnQgY29uc3QgUG9pbnRlckljb25QYXRoT3V0bGluZSA9IHN0eWxlZCggUGF0aCApYFxuXHRmaWxsOiB3aGl0ZTtcbmA7XG5cbmV4cG9ydCBjb25zdCBQb2ludGVySWNvblBhdGhGaWxsID0gc3R5bGVkKCBQYXRoIClgXG5cdGZpbGw6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuYDtcbiJdfQ== */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 exports.PointerIconSVG = PointerIconSVG;
@@ -53,7 +53,7 @@ const PointerIconPathOutline = ( /*#__PURE__*/0, _base.default)(_primitives.Path
 } : {
   name: "1b3qpiw",
   styles: "fill:white",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9jYWwtcG9pbnQtcGlja2VyL3N0eWxlcy9mb2NhbC1wb2ludC1zdHlsZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF3Q29EIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9jYWwtcG9pbnQtcGlja2VyL3N0eWxlcy9mb2NhbC1wb2ludC1zdHlsZS5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBXb3JkUHJlc3MgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IFBhdGgsIFNWRyB9IGZyb20gJ0B3b3JkcHJlc3MvcHJpbWl0aXZlcyc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUyB9IGZyb20gJy4uLy4uL3V0aWxzJztcblxuZXhwb3J0IGNvbnN0IEZvY2FsUG9pbnRXcmFwcGVyID0gc3R5bGVkLmRpdmBcblx0YmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGN1cnNvcjogZ3JhYjtcblx0aGVpZ2h0OiAzMHB4O1xuXHRtYXJnaW46IC0xNXB4IDAgMCAtMTVweDtcblx0b3BhY2l0eTogMC44O1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHVzZXItc2VsZWN0OiBub25lO1xuXHR3aWR0aDogMzBweDtcblx0d2lsbC1jaGFuZ2U6IHRyYW5zZm9ybTtcblx0ei1pbmRleDogMTAwMDA7XG5cblx0JHsgKCB7IGlzRHJhZ2dpbmcgfSApID0+IGlzRHJhZ2dpbmcgJiYgJ2N1cnNvcjogZ3JhYmJpbmc7JyB9XG5gO1xuXG5leHBvcnQgY29uc3QgUG9pbnRlckljb25TVkcgPSBzdHlsZWQoIFNWRyApYFxuXHRkaXNwbGF5OiBibG9jaztcblx0aGVpZ2h0OiAxMDAlO1xuXHRsZWZ0OiAwO1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHRvcDogMDtcblx0d2lkdGg6IDEwMCU7XG5gO1xuXG5leHBvcnQgY29uc3QgUG9pbnRlckljb25QYXRoT3V0bGluZSA9IHN0eWxlZCggUGF0aCApYFxuXHRmaWxsOiB3aGl0ZTtcbmA7XG5cbmV4cG9ydCBjb25zdCBQb2ludGVySWNvblBhdGhGaWxsID0gc3R5bGVkKCBQYXRoIClgXG5cdGZpbGw6ICR7IENPTE9SUy5ibHVlLndvcmRwcmVzc1sgNzAwIF0gfTtcblx0ZmlsbDogJHsgQ09MT1JTLnVpLnRoZW1lIH07XG5gO1xuIl19 */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9jYWwtcG9pbnQtcGlja2VyL3N0eWxlcy9mb2NhbC1wb2ludC1zdHlsZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF1Q29EIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9jYWwtcG9pbnQtcGlja2VyL3N0eWxlcy9mb2NhbC1wb2ludC1zdHlsZS5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBXb3JkUHJlc3MgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IFBhdGgsIFNWRyB9IGZyb20gJ0B3b3JkcHJlc3MvcHJpbWl0aXZlcyc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUyB9IGZyb20gJy4uLy4uL3V0aWxzJztcblxuZXhwb3J0IGNvbnN0IEZvY2FsUG9pbnRXcmFwcGVyID0gc3R5bGVkLmRpdmBcblx0YmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG5cdGN1cnNvcjogZ3JhYjtcblx0aGVpZ2h0OiAzMHB4O1xuXHRtYXJnaW46IC0xNXB4IDAgMCAtMTVweDtcblx0b3BhY2l0eTogMC44O1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHVzZXItc2VsZWN0OiBub25lO1xuXHR3aWR0aDogMzBweDtcblx0d2lsbC1jaGFuZ2U6IHRyYW5zZm9ybTtcblx0ei1pbmRleDogMTAwMDA7XG5cblx0JHsgKCB7IGlzRHJhZ2dpbmcgfSApID0+IGlzRHJhZ2dpbmcgJiYgJ2N1cnNvcjogZ3JhYmJpbmc7JyB9XG5gO1xuXG5leHBvcnQgY29uc3QgUG9pbnRlckljb25TVkcgPSBzdHlsZWQoIFNWRyApYFxuXHRkaXNwbGF5OiBibG9jaztcblx0aGVpZ2h0OiAxMDAlO1xuXHRsZWZ0OiAwO1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHRvcDogMDtcblx0d2lkdGg6IDEwMCU7XG5gO1xuXG5leHBvcnQgY29uc3QgUG9pbnRlckljb25QYXRoT3V0bGluZSA9IHN0eWxlZCggUGF0aCApYFxuXHRmaWxsOiB3aGl0ZTtcbmA7XG5cbmV4cG9ydCBjb25zdCBQb2ludGVySWNvblBhdGhGaWxsID0gc3R5bGVkKCBQYXRoIClgXG5cdGZpbGw6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuYDtcbiJdfQ== */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 exports.PointerIconPathOutline = PointerIconPathOutline;
@@ -62,6 +62,6 @@ const PointerIconPathFill = ( /*#__PURE__*/0, _base.default)(_primitives.Path, p
 } : {
   target: "eas61re0",
   label: "PointerIconPathFill"
-})("fill:", _utils.COLORS.blue.wordpress[700], ";fill:", _utils.COLORS.ui.theme, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9jYWwtcG9pbnQtcGlja2VyL3N0eWxlcy9mb2NhbC1wb2ludC1zdHlsZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE0Q2lEIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9jYWwtcG9pbnQtcGlja2VyL3N0eWxlcy9mb2NhbC1wb2ludC1zdHlsZS5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBXb3JkUHJlc3MgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IFBhdGgsIFNWRyB9IGZyb20gJ0B3b3JkcHJlc3MvcHJpbWl0aXZlcyc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUyB9IGZyb20gJy4uLy4uL3V0aWxzJztcblxuZXhwb3J0IGNvbnN0IEZvY2FsUG9pbnRXcmFwcGVyID0gc3R5bGVkLmRpdmBcblx0YmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGN1cnNvcjogZ3JhYjtcblx0aGVpZ2h0OiAzMHB4O1xuXHRtYXJnaW46IC0xNXB4IDAgMCAtMTVweDtcblx0b3BhY2l0eTogMC44O1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHVzZXItc2VsZWN0OiBub25lO1xuXHR3aWR0aDogMzBweDtcblx0d2lsbC1jaGFuZ2U6IHRyYW5zZm9ybTtcblx0ei1pbmRleDogMTAwMDA7XG5cblx0JHsgKCB7IGlzRHJhZ2dpbmcgfSApID0+IGlzRHJhZ2dpbmcgJiYgJ2N1cnNvcjogZ3JhYmJpbmc7JyB9XG5gO1xuXG5leHBvcnQgY29uc3QgUG9pbnRlckljb25TVkcgPSBzdHlsZWQoIFNWRyApYFxuXHRkaXNwbGF5OiBibG9jaztcblx0aGVpZ2h0OiAxMDAlO1xuXHRsZWZ0OiAwO1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHRvcDogMDtcblx0d2lkdGg6IDEwMCU7XG5gO1xuXG5leHBvcnQgY29uc3QgUG9pbnRlckljb25QYXRoT3V0bGluZSA9IHN0eWxlZCggUGF0aCApYFxuXHRmaWxsOiB3aGl0ZTtcbmA7XG5cbmV4cG9ydCBjb25zdCBQb2ludGVySWNvblBhdGhGaWxsID0gc3R5bGVkKCBQYXRoIClgXG5cdGZpbGw6ICR7IENPTE9SUy5ibHVlLndvcmRwcmVzc1sgNzAwIF0gfTtcblx0ZmlsbDogJHsgQ09MT1JTLnVpLnRoZW1lIH07XG5gO1xuIl19 */"));
+})("fill:", _utils.COLORS.ui.theme, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9jYWwtcG9pbnQtcGlja2VyL3N0eWxlcy9mb2NhbC1wb2ludC1zdHlsZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEyQ2lEIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9jYWwtcG9pbnQtcGlja2VyL3N0eWxlcy9mb2NhbC1wb2ludC1zdHlsZS5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBXb3JkUHJlc3MgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IFBhdGgsIFNWRyB9IGZyb20gJ0B3b3JkcHJlc3MvcHJpbWl0aXZlcyc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUyB9IGZyb20gJy4uLy4uL3V0aWxzJztcblxuZXhwb3J0IGNvbnN0IEZvY2FsUG9pbnRXcmFwcGVyID0gc3R5bGVkLmRpdmBcblx0YmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG5cdGN1cnNvcjogZ3JhYjtcblx0aGVpZ2h0OiAzMHB4O1xuXHRtYXJnaW46IC0xNXB4IDAgMCAtMTVweDtcblx0b3BhY2l0eTogMC44O1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHVzZXItc2VsZWN0OiBub25lO1xuXHR3aWR0aDogMzBweDtcblx0d2lsbC1jaGFuZ2U6IHRyYW5zZm9ybTtcblx0ei1pbmRleDogMTAwMDA7XG5cblx0JHsgKCB7IGlzRHJhZ2dpbmcgfSApID0+IGlzRHJhZ2dpbmcgJiYgJ2N1cnNvcjogZ3JhYmJpbmc7JyB9XG5gO1xuXG5leHBvcnQgY29uc3QgUG9pbnRlckljb25TVkcgPSBzdHlsZWQoIFNWRyApYFxuXHRkaXNwbGF5OiBibG9jaztcblx0aGVpZ2h0OiAxMDAlO1xuXHRsZWZ0OiAwO1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHRvcDogMDtcblx0d2lkdGg6IDEwMCU7XG5gO1xuXG5leHBvcnQgY29uc3QgUG9pbnRlckljb25QYXRoT3V0bGluZSA9IHN0eWxlZCggUGF0aCApYFxuXHRmaWxsOiB3aGl0ZTtcbmA7XG5cbmV4cG9ydCBjb25zdCBQb2ludGVySWNvblBhdGhGaWxsID0gc3R5bGVkKCBQYXRoIClgXG5cdGZpbGw6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuYDtcbiJdfQ== */"));
 exports.PointerIconPathFill = PointerIconPathFill;
 //# sourceMappingURL=focal-point-style.js.map

package/build/focal-point-picker/styles/focal-point-style.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/focal-point-picker/styles/focal-point-style.js"],"names":["FocalPointWrapper","isDragging","PointerIconSVG","SVG","PointerIconPathOutline","Path","PointerIconPathFill","COLORS","blue","wordpress","ui","theme"],"mappings":";;;;;;;;;;;AAQA;;AAKA;;;;AAEO,MAAMA,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA,uMAa1B;AAAA,MAAE;AAAEC,IAAAA;AAAF,GAAF;AAAA,SAAsBA,UAAU,IAAI,mBAApC;AAAA,CAb0B,isDAAvB;;AAgBA,MAAMC,cAAc,GAAG,iCAAQC,eAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAApB;;AASA,MAAMC,sBAAsB,GAAG,iCAAQC,gBAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA5B;;AAIA,MAAMC,mBAAmB,GAAG,iCAAQD,gBAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,UACtBE,cAAOC,IAAP,CAAYC,SAAZ,CAAuB,GAAvB,CADsB,YAEtBF,cAAOG,EAAP,CAAUC,KAFY,isDAAzB","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\n\n/**\n * WordPress dependencies\n */\nimport { Path, SVG } from '@wordpress/primitives';\n\n/**\n * Internal dependencies\n */\nimport { COLORS } from '../../utils';\n\nexport const FocalPointWrapper = styled.div`\n\tbackground-color: transparent;\n\tbox-sizing: border-box;\n\tcursor: grab;\n\theight: 30px;\n\tmargin: -15px 0 0 -15px;\n\topacity: 0.8;\n\tposition: absolute;\n\tuser-select: none;\n\twidth: 30px;\n\twill-change: transform;\n\tz-index: 10000;\n\n\t${ ( { isDragging } ) => isDragging && 'cursor: grabbing;' }\n`;\n\nexport const PointerIconSVG = styled( SVG )`\n\tdisplay: block;\n\theight: 100%;\n\tleft: 0;\n\tposition: absolute;\n\ttop: 0;\n\twidth: 100%;\n`;\n\nexport const PointerIconPathOutline = styled( Path )`\n\tfill: white;\n`;\n\nexport const PointerIconPathFill = styled( Path )`\n\tfill: ${ COLORS.blue.wordpress[ 700 ] };\n\tfill: ${ COLORS.ui.theme };\n`;\n"]}
+{"version":3,"sources":["@wordpress/components/src/focal-point-picker/styles/focal-point-style.js"],"names":["FocalPointWrapper","isDragging","PointerIconSVG","SVG","PointerIconPathOutline","Path","PointerIconPathFill","COLORS","ui","theme"],"mappings":";;;;;;;;;;;AAQA;;AAKA;;;;AAEO,MAAMA,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA,iLAY1B;AAAA,MAAE;AAAEC,IAAAA;AAAF,GAAF;AAAA,SAAsBA,UAAU,IAAI,mBAApC;AAAA,CAZ0B,imDAAvB;;AAeA,MAAMC,cAAc,GAAG,iCAAQC,eAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAApB;;AASA,MAAMC,sBAAsB,GAAG,iCAAQC,gBAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA5B;;AAIA,MAAMC,mBAAmB,GAAG,iCAAQD,gBAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,UACtBE,cAAOC,EAAP,CAAUC,KADY,qmDAAzB","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\n\n/**\n * WordPress dependencies\n */\nimport { Path, SVG } from '@wordpress/primitives';\n\n/**\n * Internal dependencies\n */\nimport { COLORS } from '../../utils';\n\nexport const FocalPointWrapper = styled.div`\n\tbackground-color: transparent;\n\tcursor: grab;\n\theight: 30px;\n\tmargin: -15px 0 0 -15px;\n\topacity: 0.8;\n\tposition: absolute;\n\tuser-select: none;\n\twidth: 30px;\n\twill-change: transform;\n\tz-index: 10000;\n\n\t${ ( { isDragging } ) => isDragging && 'cursor: grabbing;' }\n`;\n\nexport const PointerIconSVG = styled( SVG )`\n\tdisplay: block;\n\theight: 100%;\n\tleft: 0;\n\tposition: absolute;\n\ttop: 0;\n\twidth: 100%;\n`;\n\nexport const PointerIconPathOutline = styled( Path )`\n\tfill: white;\n`;\n\nexport const PointerIconPathFill = styled( Path )`\n\tfill: ${ COLORS.ui.theme };\n`;\n"]}

package/build/font-size-picker/index.js

@@ -11,10 +11,14 @@ var _element = require("@wordpress/element");
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _i18n = require("@wordpress/i18n");
 
 var _icons = require("@wordpress/icons");
 
+var _baseControl = require("../base-control");
+
 var _button = _interopRequireDefault(require("../button"));
 
 var _rangeControl = _interopRequireDefault(require("../range-control"));
@@ -31,10 +35,18 @@ var _toggleGroupControl = require("../toggle-group-control");
 
 var _utils = require("./utils");
 
+var _vStack = require("../v-stack");
+
+var _hStack = require("../h-stack");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+/**
+ * External dependencies
+ */
+
 /**
  * WordPress dependencies
  */
@@ -42,18 +54,35 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /**
  * Internal dependencies
  */
-function FontSizePicker(_ref, ref) {
+// This conditional is needed to maintain the spacing before the slider in the `withSlider` case.
+const MaybeVStack = _ref => {
+  let {
+    __nextHasNoMarginBottom,
+    children
+  } = _ref;
+  return !__nextHasNoMarginBottom ? children : (0, _element.createElement)(_vStack.VStack, {
+    spacing: 6,
+    children: children
+  });
+};
+
+function FontSizePicker(_ref2, ref) {
   var _fontSizes$, _value$endsWith;
 
   let {
+    /** Start opting into the new margin-free styles that will become the default in a future version. */
+    __nextHasNoMarginBottom = false,
     fallbackFontSize,
     fontSizes = [],
     disableCustomFontSizes = false,
     onChange,
+
+    /** @type {'default' | '__unstable-large'} */
+    size = 'default',
     value,
     withSlider = false,
     withReset = true
-  } = _ref;
+  } = _ref2;
   const hasUnits = [typeof value, typeof (fontSizes === null || fontSizes === void 0 ? void 0 : (_fontSizes$ = fontSizes[0]) === null || _fontSizes$ === void 0 ? void 0 : _fontSizes$.size)].includes('string');
   const noUnitsValue = !hasUnits ? value : parseInt(value);
   const isPixelValue = typeof value === 'number' || (value === null || value === void 0 ? void 0 : (_value$endsWith = value.endsWith) === null || _value$endsWith === void 0 ? void 0 : _value$endsWith.call(value, 'px'));
@@ -65,14 +94,14 @@ function FontSizePicker(_ref, ref) {
    * than six and a select control when they are more.
    */
 
-  const fontSizesContainComplexValues = fontSizes.some(_ref2 => {
+  const fontSizesContainComplexValues = fontSizes.some(_ref3 => {
     let {
-      size
-    } = _ref2;
-    return !(0, _utils.isSimpleCssValue)(size);
+      size: sizeArg
+    } = _ref3;
+    return !(0, _utils.isSimpleCssValue)(sizeArg);
   });
   const shouldUseSelectControl = fontSizes.length > 5;
-  const options = (0, _element.useMemo)(() => (0, _utils.getFontSizeOptions)(shouldUseSelectControl, fontSizes, disableCustomFontSizes, fontSizesContainComplexValues), [shouldUseSelectControl, fontSizes, disableCustomFontSizes, fontSizesContainComplexValues]);
+  const options = (0, _element.useMemo)(() => (0, _utils.getFontSizeOptions)(shouldUseSelectControl, fontSizes, disableCustomFontSizes), [shouldUseSelectControl, fontSizes, disableCustomFontSizes]);
   const selectedOption = (0, _utils.getSelectedOption)(fontSizes, value);
   const isCustomValue = selectedOption.slug === _utils.CUSTOM_FONT_SIZE;
   const [showCustomValueControl, setShowCustomValueControl] = (0, _element.useState)(!disableCustomFontSizes && isCustomValue);
@@ -117,12 +146,11 @@ function FontSizePicker(_ref, ref) {
     ref
   }), (0, _element.createElement)(_visuallyHidden.VisuallyHidden, {
     as: "legend"
-  }, (0, _i18n.__)('Font size')), (0, _element.createElement)(_flex.Flex, {
-    justify: "space-between",
+  }, (0, _i18n.__)('Font size')), (0, _element.createElement)(_hStack.HStack, {
     className: `${baseClassName}__header`
-  }, (0, _element.createElement)(_flex.FlexItem, null, (0, _i18n.__)('Size'), headerHint && (0, _element.createElement)("span", {
+  }, (0, _element.createElement)(_baseControl.BaseControl.VisualLabel, null, (0, _i18n.__)('Size'), headerHint && (0, _element.createElement)("span", {
     className: `${baseClassName}__header__hint`
-  }, headerHint)), !disableCustomFontSizes && (0, _element.createElement)(_flex.FlexItem, null, (0, _element.createElement)(_button.default, {
+  }, headerHint)), !disableCustomFontSizes && (0, _element.createElement)(_button.default, {
     label: showCustomValueControl ? (0, _i18n.__)('Use size preset') : (0, _i18n.__)('Set custom size'),
     icon: _icons.settings,
     onClick: () => {
@@ -130,33 +158,41 @@ function FontSizePicker(_ref, ref) {
     },
     isPressed: showCustomValueControl,
     isSmall: true
-  }))), (0, _element.createElement)("div", {
-    className: `${baseClassName}__controls`
+  })), (0, _element.createElement)(MaybeVStack, {
+    __nextHasNoMarginBottom: __nextHasNoMarginBottom
+  }, (0, _element.createElement)("div", {
+    className: (0, _classnames.default)(`${baseClassName}__controls`, {
+      'is-next-has-no-margin-bottom': __nextHasNoMarginBottom
+    })
   }, !!fontSizes.length && shouldUseSelectControl && !showCustomValueControl && (0, _element.createElement)(_customSelectControl.default, {
+    __nextUnconstrainedWidth: true,
     className: `${baseClassName}__select`,
     label: (0, _i18n.__)('Font size'),
     hideLabelFromVision: true,
     describedBy: currentFontSizeSR,
     options: options,
     value: options.find(option => option.key === selectedOption.slug),
-    onChange: _ref3 => {
+    onChange: _ref4 => {
       let {
         selectedItem
-      } = _ref3;
+      } = _ref4;
       onChange(hasUnits ? selectedItem.size : Number(selectedItem.size));
 
       if (selectedItem.key === _utils.CUSTOM_FONT_SIZE) {
         setShowCustomValueControl(true);
       }
-    }
+    },
+    size: size
   }), !shouldUseSelectControl && !showCustomValueControl && (0, _element.createElement)(_toggleGroupControl.ToggleGroupControl, {
+    __nextHasNoMarginBottom: __nextHasNoMarginBottom,
     label: (0, _i18n.__)('Font size'),
     hideLabelFromVision: true,
     value: value,
     onChange: newValue => {
       onChange(hasUnits ? newValue : Number(newValue));
     },
-    isBlock: true
+    isBlock: true,
+    size: size
   }, options.map(option => (0, _element.createElement)(_toggleGroupControl.ToggleGroupControlOption, {
     key: option.key,
     value: option.value,
@@ -180,6 +216,7 @@ function FontSizePicker(_ref, ref) {
         onChange(hasUnits ? nextSize : parseInt(nextSize, 10));
       }
     },
+    size: size,
     units: hasUnits ? units : []
   })), withReset && (0, _element.createElement)(_flex.FlexItem, {
     isBlock: true
@@ -192,6 +229,7 @@ function FontSizePicker(_ref, ref) {
     isSmall: true,
     variant: "secondary"
   }, (0, _i18n.__)('Reset'))))), withSlider && (0, _element.createElement)(_rangeControl.default, {
+    __nextHasNoMarginBottom: __nextHasNoMarginBottom,
     className: `${baseClassName}__custom-input`,
     label: (0, _i18n.__)('Custom Size'),
     value: isPixelValue && noUnitsValue || '',
@@ -201,7 +239,7 @@ function FontSizePicker(_ref, ref) {
     },
     min: 12,
     max: 100
-  }));
+  })));
 }
 
 var _default = (0, _element.forwardRef)(FontSizePicker);

package/build/font-size-picker/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/font-size-picker/index.js"],"names":["FontSizePicker","ref","fallbackFontSize","fontSizes","disableCustomFontSizes","onChange","value","withSlider","withReset","hasUnits","size","includes","noUnitsValue","parseInt","isPixelValue","endsWith","units","availableUnits","fontSizesContainComplexValues","some","shouldUseSelectControl","length","options","selectedOption","isCustomValue","slug","CUSTOM_FONT_SIZE","showCustomValueControl","setShowCustomValueControl","headerHint","hint","name","unit","currentFontSizeSR","baseClassName","settings","find","option","key","selectedItem","Number","newValue","map","label","nextSize","parseFloat","undefined"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { settings } from '@wordpress/icons';\nimport { useState, useMemo, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport RangeControl from '../range-control';\nimport { Flex, FlexItem } from '../flex';\nimport { default as UnitControl, useCustomUnits } from '../unit-control';\nimport CustomSelectControl from '../custom-select-control';\nimport { VisuallyHidden } from '../visually-hidden';\nimport {\n\tToggleGroupControl,\n\tToggleGroupControlOption,\n} from '../toggle-group-control';\nimport {\n\tgetFontSizeOptions,\n\tgetSelectedOption,\n\tsplitValueAndUnitFromSize,\n\tisSimpleCssValue,\n\tCUSTOM_FONT_SIZE,\n} from './utils';\n\nfunction FontSizePicker(\n\t{\n\t\tfallbackFontSize,\n\t\tfontSizes = [],\n\t\tdisableCustomFontSizes = false,\n\t\tonChange,\n\t\tvalue,\n\t\twithSlider = false,\n\t\twithReset = true,\n\t},\n\tref\n) {\n\tconst hasUnits = [ typeof value, typeof fontSizes?.[ 0 ]?.size ].includes(\n\t\t'string'\n\t);\n\tconst noUnitsValue = ! hasUnits ? value : parseInt( value );\n\tconst isPixelValue = typeof value === 'number' || value?.endsWith?.( 'px' );\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: [ 'px', 'em', 'rem' ],\n\t} );\n\n\t/**\n\t * The main font size UI displays a toggle group when the presets are less\n\t * than six and a select control when they are more.\n\t */\n\tconst fontSizesContainComplexValues = fontSizes.some(\n\t\t( { size } ) => ! isSimpleCssValue( size )\n\t);\n\tconst shouldUseSelectControl = fontSizes.length > 5;\n\tconst options = useMemo(\n\t\t() =>\n\t\t\tgetFontSizeOptions(\n\t\t\t\tshouldUseSelectControl,\n\t\t\t\tfontSizes,\n\t\t\t\tdisableCustomFontSizes,\n\t\t\t\tfontSizesContainComplexValues\n\t\t\t),\n\t\t[\n\t\t\tshouldUseSelectControl,\n\t\t\tfontSizes,\n\t\t\tdisableCustomFontSizes,\n\t\t\tfontSizesContainComplexValues,\n\t\t]\n\t);\n\tconst selectedOption = getSelectedOption( fontSizes, value );\n\tconst isCustomValue = selectedOption.slug === CUSTOM_FONT_SIZE;\n\tconst [ showCustomValueControl, setShowCustomValueControl ] = useState(\n\t\t! disableCustomFontSizes && isCustomValue\n\t);\n\tconst headerHint = useMemo( () => {\n\t\tif ( showCustomValueControl ) {\n\t\t\treturn `(${ __( 'Custom' ) })`;\n\t\t}\n\n\t\t// If we have a custom value that is not available in the font sizes,\n\t\t// show it as a hint as long as it's a simple CSS value.\n\t\tif ( isCustomValue ) {\n\t\t\treturn isSimpleCssValue( value ) && `(${ value })`;\n\t\t}\n\t\tif ( shouldUseSelectControl ) {\n\t\t\treturn (\n\t\t\t\tisSimpleCssValue( selectedOption?.size ) &&\n\t\t\t\t`(${ selectedOption?.size })`\n\t\t\t);\n\t\t}\n\t\t// Calculate the `hint` for toggle group control.\n\t\tlet hint = selectedOption.name;\n\t\tif (\n\t\t\t! fontSizesContainComplexValues &&\n\t\t\ttypeof selectedOption.size === 'string'\n\t\t) {\n\t\t\tconst [ , unit ] = splitValueAndUnitFromSize( selectedOption.size );\n\t\t\thint += `(${ unit })`;\n\t\t}\n\t\treturn hint;\n\t}, [\n\t\tshowCustomValueControl,\n\t\tselectedOption?.name,\n\t\tselectedOption?.size,\n\t\tvalue,\n\t\tisCustomValue,\n\t\tshouldUseSelectControl,\n\t\tfontSizesContainComplexValues,\n\t] );\n\n\tif ( ! options ) {\n\t\treturn null;\n\t}\n\n\t// This is used for select control only. We need to add support\n\t// for ToggleGroupControl.\n\tconst currentFontSizeSR = sprintf(\n\t\t// translators: %s: Currently selected font size.\n\t\t__( 'Currently selected font size: %s' ),\n\t\tselectedOption.name\n\t);\n\tconst baseClassName = 'components-font-size-picker';\n\treturn (\n\t\t<fieldset className={ baseClassName } { ...( ref ? {} : { ref } ) }>\n\t\t\t<VisuallyHidden as=\"legend\">{ __( 'Font size' ) }</VisuallyHidden>\n\t\t\t<Flex\n\t\t\t\tjustify=\"space-between\"\n\t\t\t\tclassName={ `${ baseClassName }__header` }\n\t\t\t>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t{ __( 'Size' ) }\n\t\t\t\t\t{ headerHint && (\n\t\t\t\t\t\t<span className={ `${ baseClassName }__header__hint` }>\n\t\t\t\t\t\t\t{ headerHint }\n\t\t\t\t\t\t</span>\n\t\t\t\t\t) }\n\t\t\t\t</FlexItem>\n\t\t\t\t{ ! disableCustomFontSizes && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tshowCustomValueControl\n\t\t\t\t\t\t\t\t\t? __( 'Use size preset' )\n\t\t\t\t\t\t\t\t\t: __( 'Set custom size' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ticon={ settings }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetShowCustomValueControl(\n\t\t\t\t\t\t\t\t\t! showCustomValueControl\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tisPressed={ showCustomValueControl }\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</Flex>\n\t\t\t<div className={ `${ baseClassName }__controls` }>\n\t\t\t\t{ !! fontSizes.length &&\n\t\t\t\t\tshouldUseSelectControl &&\n\t\t\t\t\t! showCustomValueControl && (\n\t\t\t\t\t\t<CustomSelectControl\n\t\t\t\t\t\t\tclassName={ `${ baseClassName }__select` }\n\t\t\t\t\t\t\tlabel={ __( 'Font size' ) }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\tdescribedBy={ currentFontSizeSR }\n\t\t\t\t\t\t\toptions={ options }\n\t\t\t\t\t\t\tvalue={ options.find(\n\t\t\t\t\t\t\t\t( option ) => option.key === selectedOption.slug\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tonChange={ ( { selectedItem } ) => {\n\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\thasUnits\n\t\t\t\t\t\t\t\t\t\t? selectedItem.size\n\t\t\t\t\t\t\t\t\t\t: Number( selectedItem.size )\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\tif ( selectedItem.key === CUSTOM_FONT_SIZE ) {\n\t\t\t\t\t\t\t\t\tsetShowCustomValueControl( true );\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t{ ! shouldUseSelectControl && ! showCustomValueControl && (\n\t\t\t\t\t<ToggleGroupControl\n\t\t\t\t\t\tlabel={ __( 'Font size' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\thasUnits ? newValue : Number( newValue )\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tisBlock\n\t\t\t\t\t>\n\t\t\t\t\t\t{ options.map( ( option ) => (\n\t\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\t\tkey={ option.key }\n\t\t\t\t\t\t\t\tvalue={ option.value }\n\t\t\t\t\t\t\t\tlabel={ option.label }\n\t\t\t\t\t\t\t\taria-label={ option.name }\n\t\t\t\t\t\t\t\tshowTooltip={ true }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</ToggleGroupControl>\n\t\t\t\t) }\n\t\t\t\t{ ! withSlider &&\n\t\t\t\t\t! disableCustomFontSizes &&\n\t\t\t\t\tshowCustomValueControl && (\n\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\tjustify=\"space-between\"\n\t\t\t\t\t\t\tclassName={ `${ baseClassName }__custom-size-control` }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Custom' ) }\n\t\t\t\t\t\t\t\t\tlabelPosition=\"top\"\n\t\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t\t\tonChange={ ( nextSize ) => {\n\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t0 === parseFloat( nextSize ) ||\n\t\t\t\t\t\t\t\t\t\t\t! nextSize\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\tonChange( undefined );\n\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\t\thasUnits\n\t\t\t\t\t\t\t\t\t\t\t\t\t? nextSize\n\t\t\t\t\t\t\t\t\t\t\t\t\t: parseInt( nextSize, 10 )\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tunits={ hasUnits ? units : [] }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t{ withReset && (\n\t\t\t\t\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tclassName=\"components-color-palette__clear\"\n\t\t\t\t\t\t\t\t\t\tdisabled={ value === undefined }\n\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\tonChange( undefined );\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t) }\n\t\t\t</div>\n\t\t\t{ withSlider && (\n\t\t\t\t<RangeControl\n\t\t\t\t\tclassName={ `${ baseClassName }__custom-input` }\n\t\t\t\t\tlabel={ __( 'Custom Size' ) }\n\t\t\t\t\tvalue={ ( isPixelValue && noUnitsValue ) || '' }\n\t\t\t\t\tinitialPosition={ fallbackFontSize }\n\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\tonChange( hasUnits ? newValue + 'px' : newValue );\n\t\t\t\t\t} }\n\t\t\t\t\tmin={ 12 }\n\t\t\t\t\tmax={ 100 }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</fieldset>\n\t);\n}\n\nexport default forwardRef( FontSizePicker );\n"]}
+{"version":3,"sources":["@wordpress/components/src/font-size-picker/index.js"],"names":["MaybeVStack","__nextHasNoMarginBottom","children","FontSizePicker","ref","fallbackFontSize","fontSizes","disableCustomFontSizes","onChange","size","value","withSlider","withReset","hasUnits","includes","noUnitsValue","parseInt","isPixelValue","endsWith","units","availableUnits","fontSizesContainComplexValues","some","sizeArg","shouldUseSelectControl","length","options","selectedOption","isCustomValue","slug","CUSTOM_FONT_SIZE","showCustomValueControl","setShowCustomValueControl","headerHint","hint","name","unit","currentFontSizeSR","baseClassName","settings","find","option","key","selectedItem","Number","newValue","map","label","nextSize","parseFloat","undefined"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classNames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { settings } from '@wordpress/icons';\nimport { useState, useMemo, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { BaseControl } from '../base-control';\nimport Button from '../button';\nimport RangeControl from '../range-control';\nimport { Flex, FlexItem } from '../flex';\nimport { default as UnitControl, useCustomUnits } from '../unit-control';\nimport CustomSelectControl from '../custom-select-control';\nimport { VisuallyHidden } from '../visually-hidden';\nimport {\n\tToggleGroupControl,\n\tToggleGroupControlOption,\n} from '../toggle-group-control';\nimport {\n\tgetFontSizeOptions,\n\tgetSelectedOption,\n\tsplitValueAndUnitFromSize,\n\tisSimpleCssValue,\n\tCUSTOM_FONT_SIZE,\n} from './utils';\nimport { VStack } from '../v-stack';\nimport { HStack } from '../h-stack';\n\n// This conditional is needed to maintain the spacing before the slider in the `withSlider` case.\nconst MaybeVStack = ( { __nextHasNoMarginBottom, children } ) =>\n\t! __nextHasNoMarginBottom ? (\n\t\tchildren\n\t) : (\n\t\t<VStack spacing={ 6 } children={ children } />\n\t);\n\nfunction FontSizePicker(\n\t{\n\t\t/** Start opting into the new margin-free styles that will become the default in a future version. */\n\t\t__nextHasNoMarginBottom = false,\n\t\tfallbackFontSize,\n\t\tfontSizes = [],\n\t\tdisableCustomFontSizes = false,\n\t\tonChange,\n\t\t/** @type {'default' | '__unstable-large'} */\n\t\tsize = 'default',\n\t\tvalue,\n\t\twithSlider = false,\n\t\twithReset = true,\n\t},\n\tref\n) {\n\tconst hasUnits = [ typeof value, typeof fontSizes?.[ 0 ]?.size ].includes(\n\t\t'string'\n\t);\n\tconst noUnitsValue = ! hasUnits ? value : parseInt( value );\n\tconst isPixelValue = typeof value === 'number' || value?.endsWith?.( 'px' );\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: [ 'px', 'em', 'rem' ],\n\t} );\n\n\t/**\n\t * The main font size UI displays a toggle group when the presets are less\n\t * than six and a select control when they are more.\n\t */\n\tconst fontSizesContainComplexValues = fontSizes.some(\n\t\t( { size: sizeArg } ) => ! isSimpleCssValue( sizeArg )\n\t);\n\tconst shouldUseSelectControl = fontSizes.length > 5;\n\tconst options = useMemo(\n\t\t() =>\n\t\t\tgetFontSizeOptions(\n\t\t\t\tshouldUseSelectControl,\n\t\t\t\tfontSizes,\n\t\t\t\tdisableCustomFontSizes\n\t\t\t),\n\t\t[ shouldUseSelectControl, fontSizes, disableCustomFontSizes ]\n\t);\n\tconst selectedOption = getSelectedOption( fontSizes, value );\n\tconst isCustomValue = selectedOption.slug === CUSTOM_FONT_SIZE;\n\tconst [ showCustomValueControl, setShowCustomValueControl ] = useState(\n\t\t! disableCustomFontSizes && isCustomValue\n\t);\n\tconst headerHint = useMemo( () => {\n\t\tif ( showCustomValueControl ) {\n\t\t\treturn `(${ __( 'Custom' ) })`;\n\t\t}\n\n\t\t// If we have a custom value that is not available in the font sizes,\n\t\t// show it as a hint as long as it's a simple CSS value.\n\t\tif ( isCustomValue ) {\n\t\t\treturn isSimpleCssValue( value ) && `(${ value })`;\n\t\t}\n\t\tif ( shouldUseSelectControl ) {\n\t\t\treturn (\n\t\t\t\tisSimpleCssValue( selectedOption?.size ) &&\n\t\t\t\t`(${ selectedOption?.size })`\n\t\t\t);\n\t\t}\n\n\t\t// Calculate the `hint` for toggle group control.\n\t\tlet hint = selectedOption.name;\n\t\tif (\n\t\t\t! fontSizesContainComplexValues &&\n\t\t\ttypeof selectedOption.size === 'string'\n\t\t) {\n\t\t\tconst [ , unit ] = splitValueAndUnitFromSize( selectedOption.size );\n\t\t\thint += `(${ unit })`;\n\t\t}\n\t\treturn hint;\n\t}, [\n\t\tshowCustomValueControl,\n\t\tselectedOption?.name,\n\t\tselectedOption?.size,\n\t\tvalue,\n\t\tisCustomValue,\n\t\tshouldUseSelectControl,\n\t\tfontSizesContainComplexValues,\n\t] );\n\n\tif ( ! options ) {\n\t\treturn null;\n\t}\n\n\t// This is used for select control only. We need to add support\n\t// for ToggleGroupControl.\n\tconst currentFontSizeSR = sprintf(\n\t\t// translators: %s: Currently selected font size.\n\t\t__( 'Currently selected font size: %s' ),\n\t\tselectedOption.name\n\t);\n\tconst baseClassName = 'components-font-size-picker';\n\treturn (\n\t\t<fieldset className={ baseClassName } { ...( ref ? {} : { ref } ) }>\n\t\t\t<VisuallyHidden as=\"legend\">{ __( 'Font size' ) }</VisuallyHidden>\n\t\t\t<HStack className={ `${ baseClassName }__header` }>\n\t\t\t\t<BaseControl.VisualLabel>\n\t\t\t\t\t{ __( 'Size' ) }\n\t\t\t\t\t{ headerHint && (\n\t\t\t\t\t\t<span className={ `${ baseClassName }__header__hint` }>\n\t\t\t\t\t\t\t{ headerHint }\n\t\t\t\t\t\t</span>\n\t\t\t\t\t) }\n\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t{ ! disableCustomFontSizes && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\tshowCustomValueControl\n\t\t\t\t\t\t\t\t? __( 'Use size preset' )\n\t\t\t\t\t\t\t\t: __( 'Set custom size' )\n\t\t\t\t\t\t}\n\t\t\t\t\t\ticon={ settings }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tsetShowCustomValueControl(\n\t\t\t\t\t\t\t\t! showCustomValueControl\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tisPressed={ showCustomValueControl }\n\t\t\t\t\t\tisSmall\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t\t<MaybeVStack __nextHasNoMarginBottom={ __nextHasNoMarginBottom }>\n\t\t\t\t<div\n\t\t\t\t\tclassName={ classNames( `${ baseClassName }__controls`, {\n\t\t\t\t\t\t'is-next-has-no-margin-bottom': __nextHasNoMarginBottom,\n\t\t\t\t\t} ) }\n\t\t\t\t>\n\t\t\t\t\t{ !! fontSizes.length &&\n\t\t\t\t\t\tshouldUseSelectControl &&\n\t\t\t\t\t\t! showCustomValueControl && (\n\t\t\t\t\t\t\t<CustomSelectControl\n\t\t\t\t\t\t\t\t__nextUnconstrainedWidth\n\t\t\t\t\t\t\t\tclassName={ `${ baseClassName }__select` }\n\t\t\t\t\t\t\t\tlabel={ __( 'Font size' ) }\n\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t\tdescribedBy={ currentFontSizeSR }\n\t\t\t\t\t\t\t\toptions={ options }\n\t\t\t\t\t\t\t\tvalue={ options.find(\n\t\t\t\t\t\t\t\t\t( option ) =>\n\t\t\t\t\t\t\t\t\t\toption.key === selectedOption.slug\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tonChange={ ( { selectedItem } ) => {\n\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\thasUnits\n\t\t\t\t\t\t\t\t\t\t\t? selectedItem.size\n\t\t\t\t\t\t\t\t\t\t\t: Number( selectedItem.size )\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\tselectedItem.key === CUSTOM_FONT_SIZE\n\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\tsetShowCustomValueControl( true );\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t{ ! shouldUseSelectControl && ! showCustomValueControl && (\n\t\t\t\t\t\t<ToggleGroupControl\n\t\t\t\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t\t\t\t\tlabel={ __( 'Font size' ) }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\thasUnits ? newValue : Number( newValue )\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tisBlock\n\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ options.map( ( option ) => (\n\t\t\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\t\t\tkey={ option.key }\n\t\t\t\t\t\t\t\t\tvalue={ option.value }\n\t\t\t\t\t\t\t\t\tlabel={ option.label }\n\t\t\t\t\t\t\t\t\taria-label={ option.name }\n\t\t\t\t\t\t\t\t\tshowTooltip={ true }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t</ToggleGroupControl>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! withSlider &&\n\t\t\t\t\t\t! disableCustomFontSizes &&\n\t\t\t\t\t\tshowCustomValueControl && (\n\t\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\t\tjustify=\"space-between\"\n\t\t\t\t\t\t\t\tclassName={ `${ baseClassName }__custom-size-control` }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Custom' ) }\n\t\t\t\t\t\t\t\t\t\tlabelPosition=\"top\"\n\t\t\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t\t\t\tonChange={ ( nextSize ) => {\n\t\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t\t0 === parseFloat( nextSize ) ||\n\t\t\t\t\t\t\t\t\t\t\t\t! nextSize\n\t\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t\tonChange( undefined );\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\t\t\thasUnits\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? nextSize\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: parseInt(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnextSize,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t10\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t\t\t\t\tunits={ hasUnits ? units : [] }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t{ withReset && (\n\t\t\t\t\t\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-color-palette__clear\"\n\t\t\t\t\t\t\t\t\t\t\tdisabled={ value === undefined }\n\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\tonChange( undefined );\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t\t{ withSlider && (\n\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t\t\t\tclassName={ `${ baseClassName }__custom-input` }\n\t\t\t\t\t\tlabel={ __( 'Custom Size' ) }\n\t\t\t\t\t\tvalue={ ( isPixelValue && noUnitsValue ) || '' }\n\t\t\t\t\t\tinitialPosition={ fallbackFontSize }\n\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\tonChange( hasUnits ? newValue + 'px' : newValue );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tmin={ 12 }\n\t\t\t\t\t\tmax={ 100 }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</MaybeVStack>\n\t\t</fieldset>\n\t);\n}\n\nexport default forwardRef( FontSizePicker );\n"]}

package/build/font-size-picker/utils.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.CUSTOM_FONT_SIZE = void 0;
 exports.getFontSizeOptions = getFontSizeOptions;
 exports.getSelectedOption = getSelectedOption;
+exports.getToggleGroupOptions = getToggleGroupOptions;
 exports.isSimpleCssValue = isSimpleCssValue;
 exports.splitValueAndUnitFromSize = splitValueAndUnitFromSize;
 
@@ -26,14 +27,22 @@ const CUSTOM_FONT_SIZE_OPTION = {
   name: (0, _i18n.__)('Custom')
 };
 /**
- * In case we have at most five font sizes, where at least one the them
- * contain a complex css value(clamp, var, etc..) show a incremental sequence
- * of numbers as a label of the font size. We do this because complex css values
- * cannot be caluclated properly and the incremental sequence of numbers as labels
- * can help the user better mentally map the different available font sizes.
+ * In case we have at most five font sizes, show a `T-shirt size`
+ * alias as a label of the font size. The label assumes that the font sizes
+ * are ordered accordingly - from smallest to largest.
  */
 
-const FONT_SIZES_ALIASES = ['1', '2', '3', '4', '5'];
+const FONT_SIZES_ALIASES = [
+/* translators: S stands for 'small' and is a size label. */
+(0, _i18n.__)('S'),
+/* translators: M stands for 'medium' and is a size label. */
+(0, _i18n.__)('M'),
+/* translators: L stands for 'large' and is a size label. */
+(0, _i18n.__)('L'),
+/* translators: XL stands for 'extra large' and is a size label. */
+(0, _i18n.__)('XL'),
+/* translators: XXL stands for 'extra extra large' and is a size label. */
+(0, _i18n.__)('XXL')];
 /**
  * Helper util to split a font size to its numeric value
  * and its `unit`, if exists.
@@ -68,20 +77,19 @@ function isSimpleCssValue(value) {
  * Return font size options in the proper format depending
  * on the currently used control (select, toggle group).
  *
- * @param {boolean}  useSelectControl               Whether to use a select control.
- * @param {Object[]} optionsArray                   Array of available font sizes objects.
- * @param {*}        disableCustomFontSizes         Flag that indicates if custom font sizes are disabled.
- * @param {boolean}  optionsContainComplexCssValues Whether font sizes contain at least one complex css value(clamp, var, etc..).
- * @return {Object[]|null} Array of font sizes in proper format for the used control.
+ * @param {boolean}  useSelectControl       Whether to use a select control.
+ * @param {Object[]} optionsArray           Array of available font sizes objects.
+ * @param {boolean}  disableCustomFontSizes Flag that indicates if custom font sizes are disabled.
+ * @return {Object[]|null}                  Array of font sizes in proper format for the used control.
  */
 
 
-function getFontSizeOptions(useSelectControl, optionsArray, disableCustomFontSizes, optionsContainComplexCssValues) {
+function getFontSizeOptions(useSelectControl, optionsArray, disableCustomFontSizes) {
   if (disableCustomFontSizes && !optionsArray.length) {
     return null;
   }
 
-  return useSelectControl ? getSelectOptions(optionsArray, disableCustomFontSizes) : getToggleGroupOptions(optionsArray, optionsContainComplexCssValues);
+  return useSelectControl ? getSelectOptions(optionsArray, disableCustomFontSizes) : getToggleGroupOptions(optionsArray);
 }
 
 function getSelectOptions(optionsArray, disableCustomFontSizes) {
@@ -100,25 +108,27 @@ function getSelectOptions(optionsArray, disableCustomFontSizes) {
     };
   });
 }
+/**
+ * Build options for the toggle group options.
+ *
+ * @param {Array}    optionsArray An array of font size options.
+ * @param {string[]} labelAliases An array of alternative labels.
+ * @return {Array}   Remapped optionsArray.
+ */
 
-function getToggleGroupOptions(optionsArray, optionsContainComplexCssValues) {
+
+function getToggleGroupOptions(optionsArray) {
+  let labelAliases = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : FONT_SIZES_ALIASES;
   return optionsArray.map((_ref2, index) => {
     let {
       slug,
       size,
       name
     } = _ref2;
-    let label = optionsContainComplexCssValues ? FONT_SIZES_ALIASES[index] : size;
-
-    if (!optionsContainComplexCssValues && typeof size === 'string') {
-      const [numericValue] = splitValueAndUnitFromSize(size);
-      label = numericValue;
-    }
-
     return {
       key: slug,
       value: size,
-      label,
+      label: labelAliases[index],
       name
     };
   });

package/build/font-size-picker/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/font-size-picker/utils.js"],"names":["DEFAULT_FONT_SIZE","DEFAULT_FONT_SIZE_OPTION","slug","name","CUSTOM_FONT_SIZE","CUSTOM_FONT_SIZE_OPTION","FONT_SIZES_ALIASES","splitValueAndUnitFromSize","size","numericValue","unit","match","isNaN","parseFloat","isFinite","isSimpleCssValue","value","sizeRegex","test","getFontSizeOptions","useSelectControl","optionsArray","disableCustomFontSizes","optionsContainComplexCssValues","length","getSelectOptions","getToggleGroupOptions","options","map","key","__experimentalHint","index","label","getSelectedOption","fontSizes","find","font"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\nconst DEFAULT_FONT_SIZE = 'default';\nconst DEFAULT_FONT_SIZE_OPTION = {\n\tslug: DEFAULT_FONT_SIZE,\n\tname: __( 'Default' ),\n};\nexport const CUSTOM_FONT_SIZE = 'custom';\nconst CUSTOM_FONT_SIZE_OPTION = {\n\tslug: CUSTOM_FONT_SIZE,\n\tname: __( 'Custom' ),\n};\n\n/**\n * In case we have at most five font sizes, where at least one the them\n * contain a complex css value(clamp, var, etc..) show a incremental sequence\n * of numbers as a label of the font size. We do this because complex css values\n * cannot be caluclated properly and the incremental sequence of numbers as labels\n * can help the user better mentally map the different available font sizes.\n */\nconst FONT_SIZES_ALIASES = [ '1', '2', '3', '4', '5' ];\n\n/**\n * Helper util to split a font size to its numeric value\n * and its `unit`, if exists.\n *\n * @param {string|number} size Font size.\n * @return {[number, string]} An array with the numeric value and the unit if exists.\n */\nexport function splitValueAndUnitFromSize( size ) {\n\tconst [ numericValue, unit ] = `${ size }`.match( /[\\d\\.]+|\\D+/g );\n\n\tif ( ! isNaN( parseFloat( numericValue ) ) && isFinite( numericValue ) ) {\n\t\treturn [ numericValue, unit ];\n\t}\n\n\treturn [];\n}\n\n/**\n * Some themes use css vars for their font sizes, so until we\n * have the way of calculating them don't display them.\n *\n * @param {string|number} value The value that is checked.\n * @return {boolean} Whether the value is a simple css value.\n */\nexport function isSimpleCssValue( value ) {\n\tconst sizeRegex = /^[\\d\\.]+(px|em|rem|vw|vh|%)?$/i;\n\treturn sizeRegex.test( value );\n}\n\n/**\n * Return font size options in the proper format depending\n * on the currently used control (select, toggle group).\n *\n * @param {boolean}  useSelectControl               Whether to use a select control.\n * @param {Object[]} optionsArray                   Array of available font sizes objects.\n * @param {*}        disableCustomFontSizes         Flag that indicates if custom font sizes are disabled.\n * @param {boolean}  optionsContainComplexCssValues Whether font sizes contain at least one complex css value(clamp, var, etc..).\n * @return {Object[]|null} Array of font sizes in proper format for the used control.\n */\nexport function getFontSizeOptions(\n\tuseSelectControl,\n\toptionsArray,\n\tdisableCustomFontSizes,\n\toptionsContainComplexCssValues\n) {\n\tif ( disableCustomFontSizes && ! optionsArray.length ) {\n\t\treturn null;\n\t}\n\treturn useSelectControl\n\t\t? getSelectOptions( optionsArray, disableCustomFontSizes )\n\t\t: getToggleGroupOptions( optionsArray, optionsContainComplexCssValues );\n}\n\nfunction getSelectOptions( optionsArray, disableCustomFontSizes ) {\n\tconst options = [\n\t\tDEFAULT_FONT_SIZE_OPTION,\n\t\t...optionsArray,\n\t\t...( disableCustomFontSizes ? [] : [ CUSTOM_FONT_SIZE_OPTION ] ),\n\t];\n\treturn options.map( ( { slug, name, size } ) => ( {\n\t\tkey: slug,\n\t\tname,\n\t\tsize,\n\t\t__experimentalHint:\n\t\t\tsize && isSimpleCssValue( size ) && parseFloat( size ),\n\t} ) );\n}\n\nfunction getToggleGroupOptions( optionsArray, optionsContainComplexCssValues ) {\n\treturn optionsArray.map( ( { slug, size, name }, index ) => {\n\t\tlet label = optionsContainComplexCssValues\n\t\t\t? FONT_SIZES_ALIASES[ index ]\n\t\t\t: size;\n\t\tif ( ! optionsContainComplexCssValues && typeof size === 'string' ) {\n\t\t\tconst [ numericValue ] = splitValueAndUnitFromSize( size );\n\t\t\tlabel = numericValue;\n\t\t}\n\t\treturn { key: slug, value: size, label, name };\n\t} );\n}\n\nexport function getSelectedOption( fontSizes, value ) {\n\tif ( ! value ) {\n\t\treturn DEFAULT_FONT_SIZE_OPTION;\n\t}\n\treturn (\n\t\tfontSizes.find( ( font ) => font.size === value ) ||\n\t\tCUSTOM_FONT_SIZE_OPTION\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/font-size-picker/utils.js"],"names":["DEFAULT_FONT_SIZE","DEFAULT_FONT_SIZE_OPTION","slug","name","CUSTOM_FONT_SIZE","CUSTOM_FONT_SIZE_OPTION","FONT_SIZES_ALIASES","splitValueAndUnitFromSize","size","numericValue","unit","match","isNaN","parseFloat","isFinite","isSimpleCssValue","value","sizeRegex","test","getFontSizeOptions","useSelectControl","optionsArray","disableCustomFontSizes","length","getSelectOptions","getToggleGroupOptions","options","map","key","__experimentalHint","labelAliases","index","label","getSelectedOption","fontSizes","find","font"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\nconst DEFAULT_FONT_SIZE = 'default';\nconst DEFAULT_FONT_SIZE_OPTION = {\n\tslug: DEFAULT_FONT_SIZE,\n\tname: __( 'Default' ),\n};\nexport const CUSTOM_FONT_SIZE = 'custom';\nconst CUSTOM_FONT_SIZE_OPTION = {\n\tslug: CUSTOM_FONT_SIZE,\n\tname: __( 'Custom' ),\n};\n\n/**\n * In case we have at most five font sizes, show a `T-shirt size`\n * alias as a label of the font size. The label assumes that the font sizes\n * are ordered accordingly - from smallest to largest.\n */\nconst FONT_SIZES_ALIASES = [\n\t/* translators: S stands for 'small' and is a size label. */\n\t__( 'S' ),\n\t/* translators: M stands for 'medium' and is a size label. */\n\t__( 'M' ),\n\t/* translators: L stands for 'large' and is a size label. */\n\t__( 'L' ),\n\t/* translators: XL stands for 'extra large' and is a size label. */\n\t__( 'XL' ),\n\t/* translators: XXL stands for 'extra extra large' and is a size label. */\n\t__( 'XXL' ),\n];\n\n/**\n * Helper util to split a font size to its numeric value\n * and its `unit`, if exists.\n *\n * @param {string|number} size Font size.\n * @return {[number, string]} An array with the numeric value and the unit if exists.\n */\nexport function splitValueAndUnitFromSize( size ) {\n\tconst [ numericValue, unit ] = `${ size }`.match( /[\\d\\.]+|\\D+/g );\n\n\tif ( ! isNaN( parseFloat( numericValue ) ) && isFinite( numericValue ) ) {\n\t\treturn [ numericValue, unit ];\n\t}\n\n\treturn [];\n}\n\n/**\n * Some themes use css vars for their font sizes, so until we\n * have the way of calculating them don't display them.\n *\n * @param {string|number} value The value that is checked.\n * @return {boolean} Whether the value is a simple css value.\n */\nexport function isSimpleCssValue( value ) {\n\tconst sizeRegex = /^[\\d\\.]+(px|em|rem|vw|vh|%)?$/i;\n\treturn sizeRegex.test( value );\n}\n\n/**\n * Return font size options in the proper format depending\n * on the currently used control (select, toggle group).\n *\n * @param {boolean}  useSelectControl       Whether to use a select control.\n * @param {Object[]} optionsArray           Array of available font sizes objects.\n * @param {boolean}  disableCustomFontSizes Flag that indicates if custom font sizes are disabled.\n * @return {Object[]|null}                  Array of font sizes in proper format for the used control.\n */\nexport function getFontSizeOptions(\n\tuseSelectControl,\n\toptionsArray,\n\tdisableCustomFontSizes\n) {\n\tif ( disableCustomFontSizes && ! optionsArray.length ) {\n\t\treturn null;\n\t}\n\treturn useSelectControl\n\t\t? getSelectOptions( optionsArray, disableCustomFontSizes )\n\t\t: getToggleGroupOptions( optionsArray );\n}\n\nfunction getSelectOptions( optionsArray, disableCustomFontSizes ) {\n\tconst options = [\n\t\tDEFAULT_FONT_SIZE_OPTION,\n\t\t...optionsArray,\n\t\t...( disableCustomFontSizes ? [] : [ CUSTOM_FONT_SIZE_OPTION ] ),\n\t];\n\treturn options.map( ( { slug, name, size } ) => ( {\n\t\tkey: slug,\n\t\tname,\n\t\tsize,\n\t\t__experimentalHint:\n\t\t\tsize && isSimpleCssValue( size ) && parseFloat( size ),\n\t} ) );\n}\n\n/**\n * Build options for the toggle group options.\n *\n * @param {Array}    optionsArray An array of font size options.\n * @param {string[]} labelAliases An array of alternative labels.\n * @return {Array}   Remapped optionsArray.\n */\nexport function getToggleGroupOptions(\n\toptionsArray,\n\tlabelAliases = FONT_SIZES_ALIASES\n) {\n\treturn optionsArray.map( ( { slug, size, name }, index ) => {\n\t\treturn {\n\t\t\tkey: slug,\n\t\t\tvalue: size,\n\t\t\tlabel: labelAliases[ index ],\n\t\t\tname,\n\t\t};\n\t} );\n}\n\nexport function getSelectedOption( fontSizes, value ) {\n\tif ( ! value ) {\n\t\treturn DEFAULT_FONT_SIZE_OPTION;\n\t}\n\treturn (\n\t\tfontSizes.find( ( font ) => font.size === value ) ||\n\t\tCUSTOM_FONT_SIZE_OPTION\n\t);\n}\n"]}

package/build/form-token-field/index.js

@@ -36,6 +36,8 @@ var _suggestionsList = _interopRequireDefault(require("./suggestions-list"));
 
 var _flex = require("../flex");
 
+var _baseControlStyles = require("../base-control/styles/base-control-styles");
+
 /**
  * External dependencies
  */
@@ -85,10 +87,12 @@ function FormTokenField(props) {
       remove: (0, _i18n.__)('Remove item'),
       __experimentalInvalid: (0, _i18n.__)('Invalid item')
     },
+    __experimentalRenderItem,
     __experimentalExpandOnFocus = false,
     __experimentalValidateInput = () => true,
     __experimentalShowHowTo = true,
-    __next36pxDefaultSize = false
+    __next36pxDefaultSize = false,
+    __experimentalAutoSelectFirstMatch = false
   } = props;
   const instanceId = (0, _compose.useInstanceId)(FormTokenField); // We reset to these initial values again in the onBlur
 
@@ -406,7 +410,7 @@ function FormTokenField(props) {
   }
 
   function addNewTokens(tokens) {
-    const tokensToAdd = (0, _lodash.uniq)(tokens.map(saveTransform).filter(Boolean).filter(token => !valueContainsToken(token)));
+    const tokensToAdd = [...new Set(tokens.map(saveTransform).filter(Boolean).filter(token => !valueContainsToken(token)))];
 
     if (tokensToAdd.length > 0) {
       const newValue = (0, _lodash.clone)(value);
@@ -474,7 +478,7 @@ function FormTokenField(props) {
     });
 
     if (match.length === 0) {
-      _suggestions = (0, _lodash.difference)(_suggestions, normalizedValue);
+      _suggestions = _suggestions.filter(suggestion => !normalizedValue.includes(suggestion));
     } else {
       match = match.toLocaleLowerCase();
 
@@ -530,8 +534,13 @@ function FormTokenField(props) {
     setIsExpanded(__experimentalExpandOnFocus || inputHasMinimumChars && hasMatchingSuggestions);
 
     if (resetSelectedSuggestion) {
-      setSelectedSuggestionIndex(-1);
-      setSelectedSuggestionScroll(false);
+      if (__experimentalAutoSelectFirstMatch && inputHasMinimumChars && hasMatchingSuggestions) {
+        setSelectedSuggestionIndex(0);
+        setSelectedSuggestionScroll(true);
+      } else {
+        setSelectedSuggestionIndex(-1);
+        setSelectedSuggestionScroll(false);
+      }
     }
 
     if (inputHasMinimumChars) {
@@ -614,7 +623,7 @@ function FormTokenField(props) {
   /* eslint-disable jsx-a11y/no-static-element-interactions */
 
 
-  return (0, _element.createElement)("div", tokenFieldProps, (0, _element.createElement)("label", {
+  return (0, _element.createElement)("div", tokenFieldProps, (0, _element.createElement)(_baseControlStyles.StyledLabel, {
     htmlFor: `components-form-token-input-${instanceId}`,
     className: "components-form-token-field__label"
   }, label), (0, _element.createElement)("div", {
@@ -638,7 +647,8 @@ function FormTokenField(props) {
     selectedIndex: selectedSuggestionIndex,
     scrollIntoView: selectedSuggestionScroll,
     onHover: onSuggestionHovered,
-    onSelect: onSuggestionSelected
+    onSelect: onSuggestionSelected,
+    __experimentalRenderItem: __experimentalRenderItem
   })), __experimentalShowHowTo && (0, _element.createElement)("p", {
     id: `components-form-token-suggestions-howto-${instanceId}`,
     className: "components-form-token-field__help"