@wordpress/components 19.15.0 → 20.0.0

package/build-module/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":["Flex","BaseUnitControl","COLORS","MediaWrapper","MediaContainer","MediaPlaceholder","lightGray","UnitControl","ControlWrapper","GridView","isActive","GridLine","GridLineX","GridLineY"],"mappings":";;;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,IAAT,QAAqB,YAArB;AACA,OAAOC,eAAP,MAA4B,oBAA5B;AACA,SAASC,MAAT,QAAuB,aAAvB;AAEA,OAAO,MAAMC,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAOP,OAAO,MAAMC,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAApB;AAyBP,OAAO,MAAMC,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,kBACbH,MAAM,CAACI,SAAP,CAAkB,GAAlB,CADa,uoGAAtB;AASP,OAAO,MAAMC,WAAW,GAAG,qBAAQN,eAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAjB;AAIP,OAAO,MAAMO,cAAc,GAAG,qBAAQR,IAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAApB;AAKP,OAAO,MAAMS,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,+LAYjB;AAAA,MAAE;AAAEC,IAAAA;AAAF,GAAF;AAAA,SACFA,QAAQ,IACP;AACH;AACA,EAJI;AAAA,CAZiB,yjGAAd;AAmBP,OAAO,MAAMC,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAd;AASP,OAAO,MAAMC,SAAS,GAAG,qBAAQD,QAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAf;AAMP,OAAO,MAAME,SAAS,GAAG,qBAAQF,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":["Flex","BaseUnitControl","COLORS","MediaWrapper","MediaContainer","MediaPlaceholder","lightGray","UnitControl","ControlWrapper","GridView","isActive","GridLine","GridLineX","GridLineY"],"mappings":";;;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,IAAT,QAAqB,YAArB;AACA,OAAOC,eAAP,MAA4B,oBAA5B;AACA,SAASC,MAAT,QAAuB,aAAvB;AAEA,OAAO,MAAMC,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAMP,OAAO,MAAMC,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAApB;AAwBP,OAAO,MAAMC,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,kBACbH,MAAM,CAACI,SAAP,CAAkB,GAAlB,CADa,67FAAtB;AAQP,OAAO,MAAMC,WAAW,GAAG,qBAAQN,eAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAjB;AAIP,OAAO,MAAMO,cAAc,GAAG,qBAAQR,IAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAApB;AAKP,OAAO,MAAMS,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,yKAWjB;AAAA,MAAE;AAAEC,IAAAA;AAAF,GAAF;AAAA,SACFA,QAAQ,IACP;AACH;AACA,EAJI;AAAA,CAXiB,q4FAAd;AAkBP,OAAO,MAAMC,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAd;AAQP,OAAO,MAAMC,SAAS,GAAG,qBAAQD,QAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAf;AAMP,OAAO,MAAME,SAAS,GAAG,qBAAQF,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-module/focal-point-picker/styles/focal-point-style.js

@@ -20,12 +20,12 @@ export const FocalPointWrapper = _styled("div", process.env.NODE_ENV === "produc
 } : {
   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 */"));
 export const PointerIconSVG = /*#__PURE__*/_styled(SVG, process.env.NODE_ENV === "production" ? {
   target: "eas61re2"
 } : {
@@ -37,7 +37,7 @@ export const PointerIconSVG = /*#__PURE__*/_styled(SVG, process.env.NODE_ENV ===
 } : {
   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__
 });
 export const PointerIconPathOutline = /*#__PURE__*/_styled(Path, process.env.NODE_ENV === "production" ? {
@@ -51,7 +51,7 @@ export const PointerIconPathOutline = /*#__PURE__*/_styled(Path, process.env.NOD
 } : {
   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__
 });
 export const PointerIconPathFill = /*#__PURE__*/_styled(Path, process.env.NODE_ENV === "production" ? {
@@ -59,5 +59,5 @@ export const PointerIconPathFill = /*#__PURE__*/_styled(Path, process.env.NODE_E
 } : {
   target: "eas61re0",
   label: "PointerIconPathFill"
-})("fill:", COLORS.blue.wordpress[700], ";fill:", COLORS.ui.theme, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9jYWwtcG9pbnQtcGlja2VyL3N0eWxlcy9mb2NhbC1wb2ludC1zdHlsZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE0Q2lEIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9jYWwtcG9pbnQtcGlja2VyL3N0eWxlcy9mb2NhbC1wb2ludC1zdHlsZS5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBXb3JkUHJlc3MgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IFBhdGgsIFNWRyB9IGZyb20gJ0B3b3JkcHJlc3MvcHJpbWl0aXZlcyc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUyB9IGZyb20gJy4uLy4uL3V0aWxzJztcblxuZXhwb3J0IGNvbnN0IEZvY2FsUG9pbnRXcmFwcGVyID0gc3R5bGVkLmRpdmBcblx0YmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGN1cnNvcjogZ3JhYjtcblx0aGVpZ2h0OiAzMHB4O1xuXHRtYXJnaW46IC0xNXB4IDAgMCAtMTVweDtcblx0b3BhY2l0eTogMC44O1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHVzZXItc2VsZWN0OiBub25lO1xuXHR3aWR0aDogMzBweDtcblx0d2lsbC1jaGFuZ2U6IHRyYW5zZm9ybTtcblx0ei1pbmRleDogMTAwMDA7XG5cblx0JHsgKCB7IGlzRHJhZ2dpbmcgfSApID0+IGlzRHJhZ2dpbmcgJiYgJ2N1cnNvcjogZ3JhYmJpbmc7JyB9XG5gO1xuXG5leHBvcnQgY29uc3QgUG9pbnRlckljb25TVkcgPSBzdHlsZWQoIFNWRyApYFxuXHRkaXNwbGF5OiBibG9jaztcblx0aGVpZ2h0OiAxMDAlO1xuXHRsZWZ0OiAwO1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHRvcDogMDtcblx0d2lkdGg6IDEwMCU7XG5gO1xuXG5leHBvcnQgY29uc3QgUG9pbnRlckljb25QYXRoT3V0bGluZSA9IHN0eWxlZCggUGF0aCApYFxuXHRmaWxsOiB3aGl0ZTtcbmA7XG5cbmV4cG9ydCBjb25zdCBQb2ludGVySWNvblBhdGhGaWxsID0gc3R5bGVkKCBQYXRoIClgXG5cdGZpbGw6ICR7IENPTE9SUy5ibHVlLndvcmRwcmVzc1sgNzAwIF0gfTtcblx0ZmlsbDogJHsgQ09MT1JTLnVpLnRoZW1lIH07XG5gO1xuIl19 */"));
+})("fill:", COLORS.ui.theme, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9jYWwtcG9pbnQtcGlja2VyL3N0eWxlcy9mb2NhbC1wb2ludC1zdHlsZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEyQ2lEIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9jYWwtcG9pbnQtcGlja2VyL3N0eWxlcy9mb2NhbC1wb2ludC1zdHlsZS5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBXb3JkUHJlc3MgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IFBhdGgsIFNWRyB9IGZyb20gJ0B3b3JkcHJlc3MvcHJpbWl0aXZlcyc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUyB9IGZyb20gJy4uLy4uL3V0aWxzJztcblxuZXhwb3J0IGNvbnN0IEZvY2FsUG9pbnRXcmFwcGVyID0gc3R5bGVkLmRpdmBcblx0YmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG5cdGN1cnNvcjogZ3JhYjtcblx0aGVpZ2h0OiAzMHB4O1xuXHRtYXJnaW46IC0xNXB4IDAgMCAtMTVweDtcblx0b3BhY2l0eTogMC44O1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHVzZXItc2VsZWN0OiBub25lO1xuXHR3aWR0aDogMzBweDtcblx0d2lsbC1jaGFuZ2U6IHRyYW5zZm9ybTtcblx0ei1pbmRleDogMTAwMDA7XG5cblx0JHsgKCB7IGlzRHJhZ2dpbmcgfSApID0+IGlzRHJhZ2dpbmcgJiYgJ2N1cnNvcjogZ3JhYmJpbmc7JyB9XG5gO1xuXG5leHBvcnQgY29uc3QgUG9pbnRlckljb25TVkcgPSBzdHlsZWQoIFNWRyApYFxuXHRkaXNwbGF5OiBibG9jaztcblx0aGVpZ2h0OiAxMDAlO1xuXHRsZWZ0OiAwO1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHRvcDogMDtcblx0d2lkdGg6IDEwMCU7XG5gO1xuXG5leHBvcnQgY29uc3QgUG9pbnRlckljb25QYXRoT3V0bGluZSA9IHN0eWxlZCggUGF0aCApYFxuXHRmaWxsOiB3aGl0ZTtcbmA7XG5cbmV4cG9ydCBjb25zdCBQb2ludGVySWNvblBhdGhGaWxsID0gc3R5bGVkKCBQYXRoIClgXG5cdGZpbGw6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuYDtcbiJdfQ== */"));
 //# sourceMappingURL=focal-point-style.js.map

package/build-module/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":["Path","SVG","COLORS","FocalPointWrapper","isDragging","PointerIconSVG","PointerIconPathOutline","PointerIconPathFill","blue","wordpress","ui","theme"],"mappings":";;;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,IAAT,EAAeC,GAAf,QAA0B,uBAA1B;AAEA;AACA;AACA;;AACA,SAASC,MAAT,QAAuB,aAAvB;AAEA,OAAO,MAAMC,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA,uMAa1B;AAAA,MAAE;AAAEC,IAAAA;AAAF,GAAF;AAAA,SAAsBA,UAAU,IAAI,mBAApC;AAAA,CAb0B,isDAAvB;AAgBP,OAAO,MAAMC,cAAc,GAAG,qBAAQJ,GAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAApB;AASP,OAAO,MAAMK,sBAAsB,GAAG,qBAAQN,IAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA5B;AAIP,OAAO,MAAMO,mBAAmB,GAAG,qBAAQP,IAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,UACtBE,MAAM,CAACM,IAAP,CAAYC,SAAZ,CAAuB,GAAvB,CADsB,YAEtBP,MAAM,CAACQ,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":["Path","SVG","COLORS","FocalPointWrapper","isDragging","PointerIconSVG","PointerIconPathOutline","PointerIconPathFill","ui","theme"],"mappings":";;;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,IAAT,EAAeC,GAAf,QAA0B,uBAA1B;AAEA;AACA;AACA;;AACA,SAASC,MAAT,QAAuB,aAAvB;AAEA,OAAO,MAAMC,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA,iLAY1B;AAAA,MAAE;AAAEC,IAAAA;AAAF,GAAF;AAAA,SAAsBA,UAAU,IAAI,mBAApC;AAAA,CAZ0B,imDAAvB;AAeP,OAAO,MAAMC,cAAc,GAAG,qBAAQJ,GAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAApB;AASP,OAAO,MAAMK,sBAAsB,GAAG,qBAAQN,IAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA5B;AAIP,OAAO,MAAMO,mBAAmB,GAAG,qBAAQP,IAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,UACtBE,MAAM,CAACM,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-module/font-size-picker/index.js

@@ -1,9 +1,14 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
 /**
  * WordPress dependencies
  */
+
 import { __, sprintf } from '@wordpress/i18n';
 import { settings } from '@wordpress/icons';
 import { useState, useMemo, forwardRef } from '@wordpress/element';
@@ -11,6 +16,7 @@ import { useState, useMemo, forwardRef } from '@wordpress/element';
  * Internal dependencies
  */
 
+import { BaseControl } from '../base-control';
 import Button from '../button';
 import RangeControl from '../range-control';
 import { Flex, FlexItem } from '../flex';
@@ -19,19 +25,37 @@ import CustomSelectControl from '../custom-select-control';
 import { VisuallyHidden } from '../visually-hidden';
 import { ToggleGroupControl, ToggleGroupControlOption } from '../toggle-group-control';
 import { getFontSizeOptions, getSelectedOption, splitValueAndUnitFromSize, isSimpleCssValue, CUSTOM_FONT_SIZE } from './utils';
+import { VStack } from '../v-stack';
+import { HStack } from '../h-stack'; // 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 : createElement(VStack, {
+    spacing: 6,
+    children: children
+  });
+};
 
-function FontSizePicker(_ref, ref) {
+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'));
@@ -43,14 +67,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 !isSimpleCssValue(size);
+      size: sizeArg
+    } = _ref3;
+    return !isSimpleCssValue(sizeArg);
   });
   const shouldUseSelectControl = fontSizes.length > 5;
-  const options = useMemo(() => getFontSizeOptions(shouldUseSelectControl, fontSizes, disableCustomFontSizes, fontSizesContainComplexValues), [shouldUseSelectControl, fontSizes, disableCustomFontSizes, fontSizesContainComplexValues]);
+  const options = useMemo(() => getFontSizeOptions(shouldUseSelectControl, fontSizes, disableCustomFontSizes), [shouldUseSelectControl, fontSizes, disableCustomFontSizes]);
   const selectedOption = getSelectedOption(fontSizes, value);
   const isCustomValue = selectedOption.slug === CUSTOM_FONT_SIZE;
   const [showCustomValueControl, setShowCustomValueControl] = useState(!disableCustomFontSizes && isCustomValue);
@@ -95,12 +119,11 @@ function FontSizePicker(_ref, ref) {
     ref
   }), createElement(VisuallyHidden, {
     as: "legend"
-  }, __('Font size')), createElement(Flex, {
-    justify: "space-between",
+  }, __('Font size')), createElement(HStack, {
     className: `${baseClassName}__header`
-  }, createElement(FlexItem, null, __('Size'), headerHint && createElement("span", {
+  }, createElement(BaseControl.VisualLabel, null, __('Size'), headerHint && createElement("span", {
     className: `${baseClassName}__header__hint`
-  }, headerHint)), !disableCustomFontSizes && createElement(FlexItem, null, createElement(Button, {
+  }, headerHint)), !disableCustomFontSizes && createElement(Button, {
     label: showCustomValueControl ? __('Use size preset') : __('Set custom size'),
     icon: settings,
     onClick: () => {
@@ -108,33 +131,41 @@ function FontSizePicker(_ref, ref) {
     },
     isPressed: showCustomValueControl,
     isSmall: true
-  }))), createElement("div", {
-    className: `${baseClassName}__controls`
+  })), createElement(MaybeVStack, {
+    __nextHasNoMarginBottom: __nextHasNoMarginBottom
+  }, createElement("div", {
+    className: classNames(`${baseClassName}__controls`, {
+      'is-next-has-no-margin-bottom': __nextHasNoMarginBottom
+    })
   }, !!fontSizes.length && shouldUseSelectControl && !showCustomValueControl && createElement(CustomSelectControl, {
+    __nextUnconstrainedWidth: true,
     className: `${baseClassName}__select`,
     label: __('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 === CUSTOM_FONT_SIZE) {
         setShowCustomValueControl(true);
       }
-    }
+    },
+    size: size
   }), !shouldUseSelectControl && !showCustomValueControl && createElement(ToggleGroupControl, {
+    __nextHasNoMarginBottom: __nextHasNoMarginBottom,
     label: __('Font size'),
     hideLabelFromVision: true,
     value: value,
     onChange: newValue => {
       onChange(hasUnits ? newValue : Number(newValue));
     },
-    isBlock: true
+    isBlock: true,
+    size: size
   }, options.map(option => createElement(ToggleGroupControlOption, {
     key: option.key,
     value: option.value,
@@ -158,6 +189,7 @@ function FontSizePicker(_ref, ref) {
         onChange(hasUnits ? nextSize : parseInt(nextSize, 10));
       }
     },
+    size: size,
     units: hasUnits ? units : []
   })), withReset && createElement(FlexItem, {
     isBlock: true
@@ -170,6 +202,7 @@ function FontSizePicker(_ref, ref) {
     isSmall: true,
     variant: "secondary"
   }, __('Reset'))))), withSlider && createElement(RangeControl, {
+    __nextHasNoMarginBottom: __nextHasNoMarginBottom,
     className: `${baseClassName}__custom-input`,
     label: __('Custom Size'),
     value: isPixelValue && noUnitsValue || '',
@@ -179,7 +212,7 @@ function FontSizePicker(_ref, ref) {
     },
     min: 12,
     max: 100
-  }));
+  })));
 }
 
 export default forwardRef(FontSizePicker);

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/font-size-picker/index.js"],"names":["__","sprintf","settings","useState","useMemo","forwardRef","Button","RangeControl","Flex","FlexItem","default","UnitControl","useCustomUnits","CustomSelectControl","VisuallyHidden","ToggleGroupControl","ToggleGroupControlOption","getFontSizeOptions","getSelectedOption","splitValueAndUnitFromSize","isSimpleCssValue","CUSTOM_FONT_SIZE","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","showCustomValueControl","setShowCustomValueControl","headerHint","hint","name","unit","currentFontSizeSR","baseClassName","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":["classNames","__","sprintf","settings","useState","useMemo","forwardRef","BaseControl","Button","RangeControl","Flex","FlexItem","default","UnitControl","useCustomUnits","CustomSelectControl","VisuallyHidden","ToggleGroupControl","ToggleGroupControlOption","getFontSizeOptions","getSelectedOption","splitValueAndUnitFromSize","isSimpleCssValue","CUSTOM_FONT_SIZE","VStack","HStack","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","showCustomValueControl","setShowCustomValueControl","headerHint","hint","name","unit","currentFontSizeSR","baseClassName","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-module/font-size-picker/utils.js

@@ -13,14 +13,22 @@ const CUSTOM_FONT_SIZE_OPTION = {
   name: __('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. */
+__('S'),
+/* translators: M stands for 'medium' and is a size label. */
+__('M'),
+/* translators: L stands for 'large' and is a size label. */
+__('L'),
+/* translators: XL stands for 'extra large' and is a size label. */
+__('XL'),
+/* translators: XXL stands for 'extra extra large' and is a size label. */
+__('XXL')];
 /**
  * Helper util to split a font size to its numeric value
  * and its `unit`, if exists.
@@ -54,19 +62,18 @@ export 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.
  */
 
-export function getFontSizeOptions(useSelectControl, optionsArray, disableCustomFontSizes, optionsContainComplexCssValues) {
+export 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) {
@@ -85,30 +92,31 @@ 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) {
+export 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
     };
   });
 }
-
 export function getSelectedOption(fontSizes, value) {
   if (!value) {
     return DEFAULT_FONT_SIZE_OPTION;

package/build-module/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"]}