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

package/build/text/styles.js

@@ -11,7 +11,7 @@ var _utils = require("../utils");
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
-const Text = /*#__PURE__*/(0, _react.css)("color:", _utils.COLORS.gray[900], ";line-height:", _utils.CONFIG.fontLineHeightBase, ";margin:0;" + (process.env.NODE_ENV === "production" ? "" : ";label:Text;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdGV4dC9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVXVCIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdGV4dC9zdHlsZXMuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUywgQ09ORklHIH0gZnJvbSAnLi4vdXRpbHMnO1xuXG5leHBvcnQgY29uc3QgVGV4dCA9IGNzc2Bcblx0Y29sb3I6ICR7IENPTE9SUy5ncmF5WyA5MDAgXSB9O1xuXHRsaW5lLWhlaWdodDogJHsgQ09ORklHLmZvbnRMaW5lSGVpZ2h0QmFzZSB9O1xuXHRtYXJnaW46IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgYmxvY2sgPSBjc3NgXG5cdGRpc3BsYXk6IGJsb2NrO1xuYDtcblxuZXhwb3J0IGNvbnN0IHBvc2l0aXZlID0gY3NzYFxuXHRjb2xvcjogJHsgQ09MT1JTLmFsZXJ0LmdyZWVuIH07XG5gO1xuXG5leHBvcnQgY29uc3QgZGVzdHJ1Y3RpdmUgPSBjc3NgXG5cdGNvbG9yOiAkeyBDT0xPUlMuYWxlcnQucmVkIH07XG5gO1xuXG5leHBvcnQgY29uc3QgbXV0ZWQgPSBjc3NgXG5cdGNvbG9yOiAkeyBDT0xPUlMubWVkaXVtR3JheS50ZXh0IH07XG5gO1xuXG5leHBvcnQgY29uc3QgaGlnaGxpZ2h0ZXJUZXh0ID0gY3NzYFxuXHRtYXJrIHtcblx0XHRiYWNrZ3JvdW5kOiAkeyBDT0xPUlMuYWxlcnQueWVsbG93IH07XG5cdFx0Ym9yZGVyLXJhZGl1czogMnB4O1xuXHRcdGJveC1zaGFkb3c6IDAgMCAwIDFweCByZ2JhKCAwLCAwLCAwLCAwLjA1ICkgaW5zZXQsXG5cdFx0XHQwIC0xcHggMCByZ2JhKCAwLCAwLCAwLCAwLjEgKSBpbnNldDtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IHVwcGVyQ2FzZSA9IGNzc2Bcblx0dGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcbmA7XG4iXX0= */");
+const Text = /*#__PURE__*/(0, _react.css)("color:", _utils.COLORS.gray[900], ";line-height:", _utils.CONFIG.fontLineHeightBase, ";margin:0;" + (process.env.NODE_ENV === "production" ? "" : ";label:Text;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdGV4dC9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVXVCIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdGV4dC9zdHlsZXMuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUywgQ09ORklHIH0gZnJvbSAnLi4vdXRpbHMnO1xuXG5leHBvcnQgY29uc3QgVGV4dCA9IGNzc2Bcblx0Y29sb3I6ICR7IENPTE9SUy5ncmF5WyA5MDAgXSB9O1xuXHRsaW5lLWhlaWdodDogJHsgQ09ORklHLmZvbnRMaW5lSGVpZ2h0QmFzZSB9O1xuXHRtYXJnaW46IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgYmxvY2sgPSBjc3NgXG5cdGRpc3BsYXk6IGJsb2NrO1xuYDtcblxuZXhwb3J0IGNvbnN0IHBvc2l0aXZlID0gY3NzYFxuXHRjb2xvcjogJHsgQ09MT1JTLmFsZXJ0LmdyZWVuIH07XG5gO1xuXG5leHBvcnQgY29uc3QgZGVzdHJ1Y3RpdmUgPSBjc3NgXG5cdGNvbG9yOiAkeyBDT0xPUlMuYWxlcnQucmVkIH07XG5gO1xuXG5leHBvcnQgY29uc3QgbXV0ZWQgPSBjc3NgXG5cdGNvbG9yOiAkeyBDT0xPUlMuZ3JheVsgNzAwIF0gfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBoaWdobGlnaHRlclRleHQgPSBjc3NgXG5cdG1hcmsge1xuXHRcdGJhY2tncm91bmQ6ICR7IENPTE9SUy5hbGVydC55ZWxsb3cgfTtcblx0XHRib3JkZXItcmFkaXVzOiAycHg7XG5cdFx0Ym94LXNoYWRvdzogMCAwIDAgMXB4IHJnYmEoIDAsIDAsIDAsIDAuMDUgKSBpbnNldCxcblx0XHRcdDAgLTFweCAwIHJnYmEoIDAsIDAsIDAsIDAuMSApIGluc2V0O1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgdXBwZXJDYXNlID0gY3NzYFxuXHR0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuYDtcbiJdfQ== */");
 exports.Text = Text;
 const block = process.env.NODE_ENV === "production" ? {
   name: "4zleql",
@@ -19,17 +19,17 @@ const block = process.env.NODE_ENV === "production" ? {
 } : {
   name: "14aceuy-block",
   styles: "display:block;label:block;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdGV4dC9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZ0J3QiIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3RleHQvc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMsIENPTkZJRyB9IGZyb20gJy4uL3V0aWxzJztcblxuZXhwb3J0IGNvbnN0IFRleHQgPSBjc3NgXG5cdGNvbG9yOiAkeyBDT0xPUlMuZ3JheVsgOTAwIF0gfTtcblx0bGluZS1oZWlnaHQ6ICR7IENPTkZJRy5mb250TGluZUhlaWdodEJhc2UgfTtcblx0bWFyZ2luOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IGJsb2NrID0gY3NzYFxuXHRkaXNwbGF5OiBibG9jaztcbmA7XG5cbmV4cG9ydCBjb25zdCBwb3NpdGl2ZSA9IGNzc2Bcblx0Y29sb3I6ICR7IENPTE9SUy5hbGVydC5ncmVlbiB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IGRlc3RydWN0aXZlID0gY3NzYFxuXHRjb2xvcjogJHsgQ09MT1JTLmFsZXJ0LnJlZCB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IG11dGVkID0gY3NzYFxuXHRjb2xvcjogJHsgQ09MT1JTLm1lZGl1bUdyYXkudGV4dCB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IGhpZ2hsaWdodGVyVGV4dCA9IGNzc2Bcblx0bWFyayB7XG5cdFx0YmFja2dyb3VuZDogJHsgQ09MT1JTLmFsZXJ0LnllbGxvdyB9O1xuXHRcdGJvcmRlci1yYWRpdXM6IDJweDtcblx0XHRib3gtc2hhZG93OiAwIDAgMCAxcHggcmdiYSggMCwgMCwgMCwgMC4wNSApIGluc2V0LFxuXHRcdFx0MCAtMXB4IDAgcmdiYSggMCwgMCwgMCwgMC4xICkgaW5zZXQ7XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCB1cHBlckNhc2UgPSBjc3NgXG5cdHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG5gO1xuIl19 */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdGV4dC9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZ0J3QiIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3RleHQvc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMsIENPTkZJRyB9IGZyb20gJy4uL3V0aWxzJztcblxuZXhwb3J0IGNvbnN0IFRleHQgPSBjc3NgXG5cdGNvbG9yOiAkeyBDT0xPUlMuZ3JheVsgOTAwIF0gfTtcblx0bGluZS1oZWlnaHQ6ICR7IENPTkZJRy5mb250TGluZUhlaWdodEJhc2UgfTtcblx0bWFyZ2luOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IGJsb2NrID0gY3NzYFxuXHRkaXNwbGF5OiBibG9jaztcbmA7XG5cbmV4cG9ydCBjb25zdCBwb3NpdGl2ZSA9IGNzc2Bcblx0Y29sb3I6ICR7IENPTE9SUy5hbGVydC5ncmVlbiB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IGRlc3RydWN0aXZlID0gY3NzYFxuXHRjb2xvcjogJHsgQ09MT1JTLmFsZXJ0LnJlZCB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IG11dGVkID0gY3NzYFxuXHRjb2xvcjogJHsgQ09MT1JTLmdyYXlbIDcwMCBdIH07XG5gO1xuXG5leHBvcnQgY29uc3QgaGlnaGxpZ2h0ZXJUZXh0ID0gY3NzYFxuXHRtYXJrIHtcblx0XHRiYWNrZ3JvdW5kOiAkeyBDT0xPUlMuYWxlcnQueWVsbG93IH07XG5cdFx0Ym9yZGVyLXJhZGl1czogMnB4O1xuXHRcdGJveC1zaGFkb3c6IDAgMCAwIDFweCByZ2JhKCAwLCAwLCAwLCAwLjA1ICkgaW5zZXQsXG5cdFx0XHQwIC0xcHggMCByZ2JhKCAwLCAwLCAwLCAwLjEgKSBpbnNldDtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IHVwcGVyQ2FzZSA9IGNzc2Bcblx0dGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcbmA7XG4iXX0= */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 exports.block = block;
-const positive = /*#__PURE__*/(0, _react.css)("color:", _utils.COLORS.alert.green, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:positive;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdGV4dC9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0IyQiIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3RleHQvc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMsIENPTkZJRyB9IGZyb20gJy4uL3V0aWxzJztcblxuZXhwb3J0IGNvbnN0IFRleHQgPSBjc3NgXG5cdGNvbG9yOiAkeyBDT0xPUlMuZ3JheVsgOTAwIF0gfTtcblx0bGluZS1oZWlnaHQ6ICR7IENPTkZJRy5mb250TGluZUhlaWdodEJhc2UgfTtcblx0bWFyZ2luOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IGJsb2NrID0gY3NzYFxuXHRkaXNwbGF5OiBibG9jaztcbmA7XG5cbmV4cG9ydCBjb25zdCBwb3NpdGl2ZSA9IGNzc2Bcblx0Y29sb3I6ICR7IENPTE9SUy5hbGVydC5ncmVlbiB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IGRlc3RydWN0aXZlID0gY3NzYFxuXHRjb2xvcjogJHsgQ09MT1JTLmFsZXJ0LnJlZCB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IG11dGVkID0gY3NzYFxuXHRjb2xvcjogJHsgQ09MT1JTLm1lZGl1bUdyYXkudGV4dCB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IGhpZ2hsaWdodGVyVGV4dCA9IGNzc2Bcblx0bWFyayB7XG5cdFx0YmFja2dyb3VuZDogJHsgQ09MT1JTLmFsZXJ0LnllbGxvdyB9O1xuXHRcdGJvcmRlci1yYWRpdXM6IDJweDtcblx0XHRib3gtc2hhZG93OiAwIDAgMCAxcHggcmdiYSggMCwgMCwgMCwgMC4wNSApIGluc2V0LFxuXHRcdFx0MCAtMXB4IDAgcmdiYSggMCwgMCwgMCwgMC4xICkgaW5zZXQ7XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCB1cHBlckNhc2UgPSBjc3NgXG5cdHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG5gO1xuIl19 */");
+const positive = /*#__PURE__*/(0, _react.css)("color:", _utils.COLORS.alert.green, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:positive;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdGV4dC9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0IyQiIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3RleHQvc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMsIENPTkZJRyB9IGZyb20gJy4uL3V0aWxzJztcblxuZXhwb3J0IGNvbnN0IFRleHQgPSBjc3NgXG5cdGNvbG9yOiAkeyBDT0xPUlMuZ3JheVsgOTAwIF0gfTtcblx0bGluZS1oZWlnaHQ6ICR7IENPTkZJRy5mb250TGluZUhlaWdodEJhc2UgfTtcblx0bWFyZ2luOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IGJsb2NrID0gY3NzYFxuXHRkaXNwbGF5OiBibG9jaztcbmA7XG5cbmV4cG9ydCBjb25zdCBwb3NpdGl2ZSA9IGNzc2Bcblx0Y29sb3I6ICR7IENPTE9SUy5hbGVydC5ncmVlbiB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IGRlc3RydWN0aXZlID0gY3NzYFxuXHRjb2xvcjogJHsgQ09MT1JTLmFsZXJ0LnJlZCB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IG11dGVkID0gY3NzYFxuXHRjb2xvcjogJHsgQ09MT1JTLmdyYXlbIDcwMCBdIH07XG5gO1xuXG5leHBvcnQgY29uc3QgaGlnaGxpZ2h0ZXJUZXh0ID0gY3NzYFxuXHRtYXJrIHtcblx0XHRiYWNrZ3JvdW5kOiAkeyBDT0xPUlMuYWxlcnQueWVsbG93IH07XG5cdFx0Ym9yZGVyLXJhZGl1czogMnB4O1xuXHRcdGJveC1zaGFkb3c6IDAgMCAwIDFweCByZ2JhKCAwLCAwLCAwLCAwLjA1ICkgaW5zZXQsXG5cdFx0XHQwIC0xcHggMCByZ2JhKCAwLCAwLCAwLCAwLjEgKSBpbnNldDtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IHVwcGVyQ2FzZSA9IGNzc2Bcblx0dGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcbmA7XG4iXX0= */");
 exports.positive = positive;
-const destructive = /*#__PURE__*/(0, _react.css)("color:", _utils.COLORS.alert.red, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:destructive;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdGV4dC9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0I4QiIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3RleHQvc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMsIENPTkZJRyB9IGZyb20gJy4uL3V0aWxzJztcblxuZXhwb3J0IGNvbnN0IFRleHQgPSBjc3NgXG5cdGNvbG9yOiAkeyBDT0xPUlMuZ3JheVsgOTAwIF0gfTtcblx0bGluZS1oZWlnaHQ6ICR7IENPTkZJRy5mb250TGluZUhlaWdodEJhc2UgfTtcblx0bWFyZ2luOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IGJsb2NrID0gY3NzYFxuXHRkaXNwbGF5OiBibG9jaztcbmA7XG5cbmV4cG9ydCBjb25zdCBwb3NpdGl2ZSA9IGNzc2Bcblx0Y29sb3I6ICR7IENPTE9SUy5hbGVydC5ncmVlbiB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IGRlc3RydWN0aXZlID0gY3NzYFxuXHRjb2xvcjogJHsgQ09MT1JTLmFsZXJ0LnJlZCB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IG11dGVkID0gY3NzYFxuXHRjb2xvcjogJHsgQ09MT1JTLm1lZGl1bUdyYXkudGV4dCB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IGhpZ2hsaWdodGVyVGV4dCA9IGNzc2Bcblx0bWFyayB7XG5cdFx0YmFja2dyb3VuZDogJHsgQ09MT1JTLmFsZXJ0LnllbGxvdyB9O1xuXHRcdGJvcmRlci1yYWRpdXM6IDJweDtcblx0XHRib3gtc2hhZG93OiAwIDAgMCAxcHggcmdiYSggMCwgMCwgMCwgMC4wNSApIGluc2V0LFxuXHRcdFx0MCAtMXB4IDAgcmdiYSggMCwgMCwgMCwgMC4xICkgaW5zZXQ7XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCB1cHBlckNhc2UgPSBjc3NgXG5cdHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG5gO1xuIl19 */");
+const destructive = /*#__PURE__*/(0, _react.css)("color:", _utils.COLORS.alert.red, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:destructive;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdGV4dC9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0I4QiIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3RleHQvc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMsIENPTkZJRyB9IGZyb20gJy4uL3V0aWxzJztcblxuZXhwb3J0IGNvbnN0IFRleHQgPSBjc3NgXG5cdGNvbG9yOiAkeyBDT0xPUlMuZ3JheVsgOTAwIF0gfTtcblx0bGluZS1oZWlnaHQ6ICR7IENPTkZJRy5mb250TGluZUhlaWdodEJhc2UgfTtcblx0bWFyZ2luOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IGJsb2NrID0gY3NzYFxuXHRkaXNwbGF5OiBibG9jaztcbmA7XG5cbmV4cG9ydCBjb25zdCBwb3NpdGl2ZSA9IGNzc2Bcblx0Y29sb3I6ICR7IENPTE9SUy5hbGVydC5ncmVlbiB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IGRlc3RydWN0aXZlID0gY3NzYFxuXHRjb2xvcjogJHsgQ09MT1JTLmFsZXJ0LnJlZCB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IG11dGVkID0gY3NzYFxuXHRjb2xvcjogJHsgQ09MT1JTLmdyYXlbIDcwMCBdIH07XG5gO1xuXG5leHBvcnQgY29uc3QgaGlnaGxpZ2h0ZXJUZXh0ID0gY3NzYFxuXHRtYXJrIHtcblx0XHRiYWNrZ3JvdW5kOiAkeyBDT0xPUlMuYWxlcnQueWVsbG93IH07XG5cdFx0Ym9yZGVyLXJhZGl1czogMnB4O1xuXHRcdGJveC1zaGFkb3c6IDAgMCAwIDFweCByZ2JhKCAwLCAwLCAwLCAwLjA1ICkgaW5zZXQsXG5cdFx0XHQwIC0xcHggMCByZ2JhKCAwLCAwLCAwLCAwLjEgKSBpbnNldDtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IHVwcGVyQ2FzZSA9IGNzc2Bcblx0dGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcbmA7XG4iXX0= */");
 exports.destructive = destructive;
-const muted = /*#__PURE__*/(0, _react.css)("color:", _utils.COLORS.mediumGray.text, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:muted;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdGV4dC9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNEJ3QiIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3RleHQvc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMsIENPTkZJRyB9IGZyb20gJy4uL3V0aWxzJztcblxuZXhwb3J0IGNvbnN0IFRleHQgPSBjc3NgXG5cdGNvbG9yOiAkeyBDT0xPUlMuZ3JheVsgOTAwIF0gfTtcblx0bGluZS1oZWlnaHQ6ICR7IENPTkZJRy5mb250TGluZUhlaWdodEJhc2UgfTtcblx0bWFyZ2luOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IGJsb2NrID0gY3NzYFxuXHRkaXNwbGF5OiBibG9jaztcbmA7XG5cbmV4cG9ydCBjb25zdCBwb3NpdGl2ZSA9IGNzc2Bcblx0Y29sb3I6ICR7IENPTE9SUy5hbGVydC5ncmVlbiB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IGRlc3RydWN0aXZlID0gY3NzYFxuXHRjb2xvcjogJHsgQ09MT1JTLmFsZXJ0LnJlZCB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IG11dGVkID0gY3NzYFxuXHRjb2xvcjogJHsgQ09MT1JTLm1lZGl1bUdyYXkudGV4dCB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IGhpZ2hsaWdodGVyVGV4dCA9IGNzc2Bcblx0bWFyayB7XG5cdFx0YmFja2dyb3VuZDogJHsgQ09MT1JTLmFsZXJ0LnllbGxvdyB9O1xuXHRcdGJvcmRlci1yYWRpdXM6IDJweDtcblx0XHRib3gtc2hhZG93OiAwIDAgMCAxcHggcmdiYSggMCwgMCwgMCwgMC4wNSApIGluc2V0LFxuXHRcdFx0MCAtMXB4IDAgcmdiYSggMCwgMCwgMCwgMC4xICkgaW5zZXQ7XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCB1cHBlckNhc2UgPSBjc3NgXG5cdHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG5gO1xuIl19 */");
+const muted = /*#__PURE__*/(0, _react.css)("color:", _utils.COLORS.gray[700], ";" + (process.env.NODE_ENV === "production" ? "" : ";label:muted;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdGV4dC9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNEJ3QiIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3RleHQvc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMsIENPTkZJRyB9IGZyb20gJy4uL3V0aWxzJztcblxuZXhwb3J0IGNvbnN0IFRleHQgPSBjc3NgXG5cdGNvbG9yOiAkeyBDT0xPUlMuZ3JheVsgOTAwIF0gfTtcblx0bGluZS1oZWlnaHQ6ICR7IENPTkZJRy5mb250TGluZUhlaWdodEJhc2UgfTtcblx0bWFyZ2luOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IGJsb2NrID0gY3NzYFxuXHRkaXNwbGF5OiBibG9jaztcbmA7XG5cbmV4cG9ydCBjb25zdCBwb3NpdGl2ZSA9IGNzc2Bcblx0Y29sb3I6ICR7IENPTE9SUy5hbGVydC5ncmVlbiB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IGRlc3RydWN0aXZlID0gY3NzYFxuXHRjb2xvcjogJHsgQ09MT1JTLmFsZXJ0LnJlZCB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IG11dGVkID0gY3NzYFxuXHRjb2xvcjogJHsgQ09MT1JTLmdyYXlbIDcwMCBdIH07XG5gO1xuXG5leHBvcnQgY29uc3QgaGlnaGxpZ2h0ZXJUZXh0ID0gY3NzYFxuXHRtYXJrIHtcblx0XHRiYWNrZ3JvdW5kOiAkeyBDT0xPUlMuYWxlcnQueWVsbG93IH07XG5cdFx0Ym9yZGVyLXJhZGl1czogMnB4O1xuXHRcdGJveC1zaGFkb3c6IDAgMCAwIDFweCByZ2JhKCAwLCAwLCAwLCAwLjA1ICkgaW5zZXQsXG5cdFx0XHQwIC0xcHggMCByZ2JhKCAwLCAwLCAwLCAwLjEgKSBpbnNldDtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IHVwcGVyQ2FzZSA9IGNzc2Bcblx0dGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcbmA7XG4iXX0= */");
 exports.muted = muted;
-const highlighterText = /*#__PURE__*/(0, _react.css)("mark{background:", _utils.COLORS.alert.yellow, ";border-radius:2px;box-shadow:0 0 0 1px rgba( 0, 0, 0, 0.05 ) inset,0 -1px 0 rgba( 0, 0, 0, 0.1 ) inset;}" + (process.env.NODE_ENV === "production" ? "" : ";label:highlighterText;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdGV4dC9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZ0NrQyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3RleHQvc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMsIENPTkZJRyB9IGZyb20gJy4uL3V0aWxzJztcblxuZXhwb3J0IGNvbnN0IFRleHQgPSBjc3NgXG5cdGNvbG9yOiAkeyBDT0xPUlMuZ3JheVsgOTAwIF0gfTtcblx0bGluZS1oZWlnaHQ6ICR7IENPTkZJRy5mb250TGluZUhlaWdodEJhc2UgfTtcblx0bWFyZ2luOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IGJsb2NrID0gY3NzYFxuXHRkaXNwbGF5OiBibG9jaztcbmA7XG5cbmV4cG9ydCBjb25zdCBwb3NpdGl2ZSA9IGNzc2Bcblx0Y29sb3I6ICR7IENPTE9SUy5hbGVydC5ncmVlbiB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IGRlc3RydWN0aXZlID0gY3NzYFxuXHRjb2xvcjogJHsgQ09MT1JTLmFsZXJ0LnJlZCB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IG11dGVkID0gY3NzYFxuXHRjb2xvcjogJHsgQ09MT1JTLm1lZGl1bUdyYXkudGV4dCB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IGhpZ2hsaWdodGVyVGV4dCA9IGNzc2Bcblx0bWFyayB7XG5cdFx0YmFja2dyb3VuZDogJHsgQ09MT1JTLmFsZXJ0LnllbGxvdyB9O1xuXHRcdGJvcmRlci1yYWRpdXM6IDJweDtcblx0XHRib3gtc2hhZG93OiAwIDAgMCAxcHggcmdiYSggMCwgMCwgMCwgMC4wNSApIGluc2V0LFxuXHRcdFx0MCAtMXB4IDAgcmdiYSggMCwgMCwgMCwgMC4xICkgaW5zZXQ7XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCB1cHBlckNhc2UgPSBjc3NgXG5cdHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG5gO1xuIl19 */");
+const highlighterText = /*#__PURE__*/(0, _react.css)("mark{background:", _utils.COLORS.alert.yellow, ";border-radius:2px;box-shadow:0 0 0 1px rgba( 0, 0, 0, 0.05 ) inset,0 -1px 0 rgba( 0, 0, 0, 0.1 ) inset;}" + (process.env.NODE_ENV === "production" ? "" : ";label:highlighterText;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdGV4dC9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZ0NrQyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3RleHQvc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMsIENPTkZJRyB9IGZyb20gJy4uL3V0aWxzJztcblxuZXhwb3J0IGNvbnN0IFRleHQgPSBjc3NgXG5cdGNvbG9yOiAkeyBDT0xPUlMuZ3JheVsgOTAwIF0gfTtcblx0bGluZS1oZWlnaHQ6ICR7IENPTkZJRy5mb250TGluZUhlaWdodEJhc2UgfTtcblx0bWFyZ2luOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IGJsb2NrID0gY3NzYFxuXHRkaXNwbGF5OiBibG9jaztcbmA7XG5cbmV4cG9ydCBjb25zdCBwb3NpdGl2ZSA9IGNzc2Bcblx0Y29sb3I6ICR7IENPTE9SUy5hbGVydC5ncmVlbiB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IGRlc3RydWN0aXZlID0gY3NzYFxuXHRjb2xvcjogJHsgQ09MT1JTLmFsZXJ0LnJlZCB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IG11dGVkID0gY3NzYFxuXHRjb2xvcjogJHsgQ09MT1JTLmdyYXlbIDcwMCBdIH07XG5gO1xuXG5leHBvcnQgY29uc3QgaGlnaGxpZ2h0ZXJUZXh0ID0gY3NzYFxuXHRtYXJrIHtcblx0XHRiYWNrZ3JvdW5kOiAkeyBDT0xPUlMuYWxlcnQueWVsbG93IH07XG5cdFx0Ym9yZGVyLXJhZGl1czogMnB4O1xuXHRcdGJveC1zaGFkb3c6IDAgMCAwIDFweCByZ2JhKCAwLCAwLCAwLCAwLjA1ICkgaW5zZXQsXG5cdFx0XHQwIC0xcHggMCByZ2JhKCAwLCAwLCAwLCAwLjEgKSBpbnNldDtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IHVwcGVyQ2FzZSA9IGNzc2Bcblx0dGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcbmA7XG4iXX0= */");
 exports.highlighterText = highlighterText;
 const upperCase = process.env.NODE_ENV === "production" ? {
   name: "50zrmy",
@@ -37,7 +37,7 @@ const upperCase = process.env.NODE_ENV === "production" ? {
 } : {
   name: "1mrt3zt-upperCase",
   styles: "text-transform:uppercase;label:upperCase;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdGV4dC9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBeUM0QiIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3RleHQvc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMsIENPTkZJRyB9IGZyb20gJy4uL3V0aWxzJztcblxuZXhwb3J0IGNvbnN0IFRleHQgPSBjc3NgXG5cdGNvbG9yOiAkeyBDT0xPUlMuZ3JheVsgOTAwIF0gfTtcblx0bGluZS1oZWlnaHQ6ICR7IENPTkZJRy5mb250TGluZUhlaWdodEJhc2UgfTtcblx0bWFyZ2luOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IGJsb2NrID0gY3NzYFxuXHRkaXNwbGF5OiBibG9jaztcbmA7XG5cbmV4cG9ydCBjb25zdCBwb3NpdGl2ZSA9IGNzc2Bcblx0Y29sb3I6ICR7IENPTE9SUy5hbGVydC5ncmVlbiB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IGRlc3RydWN0aXZlID0gY3NzYFxuXHRjb2xvcjogJHsgQ09MT1JTLmFsZXJ0LnJlZCB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IG11dGVkID0gY3NzYFxuXHRjb2xvcjogJHsgQ09MT1JTLm1lZGl1bUdyYXkudGV4dCB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IGhpZ2hsaWdodGVyVGV4dCA9IGNzc2Bcblx0bWFyayB7XG5cdFx0YmFja2dyb3VuZDogJHsgQ09MT1JTLmFsZXJ0LnllbGxvdyB9O1xuXHRcdGJvcmRlci1yYWRpdXM6IDJweDtcblx0XHRib3gtc2hhZG93OiAwIDAgMCAxcHggcmdiYSggMCwgMCwgMCwgMC4wNSApIGluc2V0LFxuXHRcdFx0MCAtMXB4IDAgcmdiYSggMCwgMCwgMCwgMC4xICkgaW5zZXQ7XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCB1cHBlckNhc2UgPSBjc3NgXG5cdHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG5gO1xuIl19 */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdGV4dC9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBeUM0QiIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3RleHQvc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMsIENPTkZJRyB9IGZyb20gJy4uL3V0aWxzJztcblxuZXhwb3J0IGNvbnN0IFRleHQgPSBjc3NgXG5cdGNvbG9yOiAkeyBDT0xPUlMuZ3JheVsgOTAwIF0gfTtcblx0bGluZS1oZWlnaHQ6ICR7IENPTkZJRy5mb250TGluZUhlaWdodEJhc2UgfTtcblx0bWFyZ2luOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IGJsb2NrID0gY3NzYFxuXHRkaXNwbGF5OiBibG9jaztcbmA7XG5cbmV4cG9ydCBjb25zdCBwb3NpdGl2ZSA9IGNzc2Bcblx0Y29sb3I6ICR7IENPTE9SUy5hbGVydC5ncmVlbiB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IGRlc3RydWN0aXZlID0gY3NzYFxuXHRjb2xvcjogJHsgQ09MT1JTLmFsZXJ0LnJlZCB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IG11dGVkID0gY3NzYFxuXHRjb2xvcjogJHsgQ09MT1JTLmdyYXlbIDcwMCBdIH07XG5gO1xuXG5leHBvcnQgY29uc3QgaGlnaGxpZ2h0ZXJUZXh0ID0gY3NzYFxuXHRtYXJrIHtcblx0XHRiYWNrZ3JvdW5kOiAkeyBDT0xPUlMuYWxlcnQueWVsbG93IH07XG5cdFx0Ym9yZGVyLXJhZGl1czogMnB4O1xuXHRcdGJveC1zaGFkb3c6IDAgMCAwIDFweCByZ2JhKCAwLCAwLCAwLCAwLjA1ICkgaW5zZXQsXG5cdFx0XHQwIC0xcHggMCByZ2JhKCAwLCAwLCAwLCAwLjEgKSBpbnNldDtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IHVwcGVyQ2FzZSA9IGNzc2Bcblx0dGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcbmA7XG4iXX0= */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 exports.upperCase = upperCase;

package/build/text/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/text/styles.js"],"names":["Text","css","COLORS","gray","CONFIG","fontLineHeightBase","block","positive","alert","green","destructive","red","muted","mediumGray","text","highlighterText","yellow","upperCase"],"mappings":";;;;;;;AAGA;;AAKA;;;;AAEO,MAAMA,IAAI,oBAAGC,UAAH,YACNC,cAAOC,IAAP,CAAa,GAAb,CADM,mBAEAC,cAAOC,kBAFP,+gDAAV;;AAMA,MAAMC,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAX;;AAIA,MAAMC,QAAQ,oBAAGN,UAAH,YACVC,cAAOM,KAAP,CAAaC,KADH,0gDAAd;;AAIA,MAAMC,WAAW,oBAAGT,UAAH,YACbC,cAAOM,KAAP,CAAaG,GADA,6gDAAjB;;AAIA,MAAMC,KAAK,oBAAGX,UAAH,YACPC,cAAOW,UAAP,CAAkBC,IADX,ugDAAX;;AAIA,MAAMC,eAAe,oBAAGd,UAAH,sBAEXC,cAAOM,KAAP,CAAaQ,MAFF,ynDAArB;;AASA,MAAMC,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAf","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport { COLORS, CONFIG } from '../utils';\n\nexport const Text = css`\n\tcolor: ${ COLORS.gray[ 900 ] };\n\tline-height: ${ CONFIG.fontLineHeightBase };\n\tmargin: 0;\n`;\n\nexport const block = css`\n\tdisplay: block;\n`;\n\nexport const positive = css`\n\tcolor: ${ COLORS.alert.green };\n`;\n\nexport const destructive = css`\n\tcolor: ${ COLORS.alert.red };\n`;\n\nexport const muted = css`\n\tcolor: ${ COLORS.mediumGray.text };\n`;\n\nexport const highlighterText = css`\n\tmark {\n\t\tbackground: ${ COLORS.alert.yellow };\n\t\tborder-radius: 2px;\n\t\tbox-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.05 ) inset,\n\t\t\t0 -1px 0 rgba( 0, 0, 0, 0.1 ) inset;\n\t}\n`;\n\nexport const upperCase = css`\n\ttext-transform: uppercase;\n`;\n"]}
+{"version":3,"sources":["@wordpress/components/src/text/styles.js"],"names":["Text","css","COLORS","gray","CONFIG","fontLineHeightBase","block","positive","alert","green","destructive","red","muted","highlighterText","yellow","upperCase"],"mappings":";;;;;;;AAGA;;AAKA;;;;AAEO,MAAMA,IAAI,oBAAGC,UAAH,YACNC,cAAOC,IAAP,CAAa,GAAb,CADM,mBAEAC,cAAOC,kBAFP,2gDAAV;;AAMA,MAAMC,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAX;;AAIA,MAAMC,QAAQ,oBAAGN,UAAH,YACVC,cAAOM,KAAP,CAAaC,KADH,sgDAAd;;AAIA,MAAMC,WAAW,oBAAGT,UAAH,YACbC,cAAOM,KAAP,CAAaG,GADA,ygDAAjB;;AAIA,MAAMC,KAAK,oBAAGX,UAAH,YACPC,cAAOC,IAAP,CAAa,GAAb,CADO,mgDAAX;;AAIA,MAAMU,eAAe,oBAAGZ,UAAH,sBAEXC,cAAOM,KAAP,CAAaM,MAFF,qnDAArB;;AASA,MAAMC,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAf","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport { COLORS, CONFIG } from '../utils';\n\nexport const Text = css`\n\tcolor: ${ COLORS.gray[ 900 ] };\n\tline-height: ${ CONFIG.fontLineHeightBase };\n\tmargin: 0;\n`;\n\nexport const block = css`\n\tdisplay: block;\n`;\n\nexport const positive = css`\n\tcolor: ${ COLORS.alert.green };\n`;\n\nexport const destructive = css`\n\tcolor: ${ COLORS.alert.red };\n`;\n\nexport const muted = css`\n\tcolor: ${ COLORS.gray[ 700 ] };\n`;\n\nexport const highlighterText = css`\n\tmark {\n\t\tbackground: ${ COLORS.alert.yellow };\n\t\tborder-radius: 2px;\n\t\tbox-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.05 ) inset,\n\t\t\t0 -1px 0 rgba( 0, 0, 0, 0.1 ) inset;\n\t}\n`;\n\nexport const upperCase = css`\n\ttext-transform: uppercase;\n`;\n"]}

package/build/toggle-group-control/toggle-group-control/component.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.ToggleGroupControl = void 0;
 
 var _element = require("@wordpress/element");
 
@@ -43,11 +43,13 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  */
 const noop = () => {};
 
-function ToggleGroupControl(props, forwardedRef) {
+function UnconnectedToggleGroupControl(props, forwardedRef) {
   const {
+    __nextHasNoMarginBottom = false,
     className,
     isAdaptiveWidth = false,
     isBlock = false,
+    __experimentalIsIconGroup = false,
     label,
     hideLabelFromVision = false,
     help,
@@ -82,12 +84,14 @@ function ToggleGroupControl(props, forwardedRef) {
   }, [value]);
   const classes = (0, _element.useMemo)(() => cx(styles.ToggleGroupControl({
     size
-  }), isBlock && styles.block, className), [className, cx, isBlock, size]);
+  }), !__experimentalIsIconGroup && styles.border, isBlock && styles.block, className), [className, cx, isBlock, __experimentalIsIconGroup, size]);
   return (0, _element.createElement)(_baseControl.default, {
-    help: help
+    help: help,
+    __nextHasNoMarginBottom: __nextHasNoMarginBottom
   }, (0, _element.createElement)(_context2.default.Provider, {
     value: { ...radio,
-      isBlock: !isAdaptiveWidth
+      isBlock: !isAdaptiveWidth,
+      size
     }
   }, !hideLabelFromVision && (0, _element.createElement)("div", null, (0, _element.createElement)(_baseControl.default.VisualLabel, null, label)), (0, _element.createElement)(_reakit.RadioGroup, (0, _extends2.default)({}, radio, {
     "aria-label": label,
@@ -106,11 +110,14 @@ function ToggleGroupControl(props, forwardedRef) {
  * represented in horizontal segments. To render options for this control use
  * `ToggleGroupControlOption` component.
  *
+ * This component is intended for selecting a single persistent value from a set of options,
+ * similar to a how a radio button group would work. If you simply want a toggle to switch between views,
+ * use a `TabPanel` instead.
+ *
  * Only use this control when you know for sure the labels of items inside won't
  * wrap. For items with longer labels, you can consider a `SelectControl` or a
  * `CustomSelectControl` component instead.
  *
- * @example
  * ```jsx
  * import {
  *   __experimentalToggleGroupControl as ToggleGroupControl,
@@ -129,7 +136,8 @@ function ToggleGroupControl(props, forwardedRef) {
  */
 
 
-const ConnectedToggleGroupControl = (0, _context.contextConnect)(ToggleGroupControl, 'ToggleGroupControl');
-var _default = ConnectedToggleGroupControl;
+const ToggleGroupControl = (0, _context.contextConnect)(UnconnectedToggleGroupControl, 'ToggleGroupControl');
+exports.ToggleGroupControl = ToggleGroupControl;
+var _default = ToggleGroupControl;
 exports.default = _default;
 //# sourceMappingURL=component.js.map

package/build/toggle-group-control/toggle-group-control/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/component.tsx"],"names":["noop","ToggleGroupControl","props","forwardedRef","className","isAdaptiveWidth","isBlock","label","hideLabelFromVision","help","onChange","size","value","children","otherProps","cx","containerRef","resizeListener","sizes","baseId","toString","radio","state","previousValue","setState","classes","styles","block","View","width","ConnectedToggleGroupControl"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n// eslint-disable-next-line no-restricted-imports\nimport { RadioGroup, useRadioState } from 'reakit';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useRef, useMemo } from '@wordpress/element';\nimport {\n\tuseMergeRefs,\n\tuseInstanceId,\n\tusePrevious,\n\tuseResizeObserver,\n} from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport {\n\tcontextConnect,\n\tuseContextSystem,\n\tWordPressComponentProps,\n} from '../../ui/context';\nimport { useUpdateEffect, useCx } from '../../utils/hooks';\nimport { View } from '../../view';\nimport BaseControl from '../../base-control';\nimport type { ToggleGroupControlProps } from '../types';\nimport ToggleGroupControlBackdrop from './toggle-group-control-backdrop';\nimport ToggleGroupControlContext from '../context';\nimport * as styles from './styles';\n\nconst noop = () => {};\n\nfunction ToggleGroupControl(\n\tprops: WordPressComponentProps< ToggleGroupControlProps, 'input' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tclassName,\n\t\tisAdaptiveWidth = false,\n\t\tisBlock = false,\n\t\tlabel,\n\t\thideLabelFromVision = false,\n\t\thelp,\n\t\tonChange = noop,\n\t\tsize = 'default',\n\t\tvalue,\n\t\tchildren,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ToggleGroupControl' );\n\tconst cx = useCx();\n\tconst containerRef = useRef();\n\tconst [ resizeListener, sizes ] = useResizeObserver();\n\tconst baseId = useInstanceId(\n\t\tToggleGroupControl,\n\t\t'toggle-group-control'\n\t).toString();\n\tconst radio = useRadioState( {\n\t\tbaseId,\n\t\tstate: value,\n\t} );\n\tconst previousValue = usePrevious( value );\n\n\t// Propagate radio.state change.\n\tuseUpdateEffect( () => {\n\t\t// Avoid calling onChange if radio state changed\n\t\t// from incoming value.\n\t\tif ( previousValue !== radio.state ) {\n\t\t\tonChange( radio.state );\n\t\t}\n\t}, [ radio.state ] );\n\n\t// Sync incoming value with radio.state.\n\tuseUpdateEffect( () => {\n\t\tif ( value !== radio.state ) {\n\t\t\tradio.setState( value );\n\t\t}\n\t}, [ value ] );\n\n\tconst classes = useMemo(\n\t\t() =>\n\t\t\tcx(\n\t\t\t\tstyles.ToggleGroupControl( { size } ),\n\t\t\t\tisBlock && styles.block,\n\t\t\t\tclassName\n\t\t\t),\n\t\t[ className, cx, isBlock, size ]\n\t);\n\treturn (\n\t\t<BaseControl help={ help }>\n\t\t\t<ToggleGroupControlContext.Provider\n\t\t\t\tvalue={ { ...radio, isBlock: ! isAdaptiveWidth } }\n\t\t\t>\n\t\t\t\t{ ! hideLabelFromVision && (\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<BaseControl.VisualLabel>\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t\t<RadioGroup\n\t\t\t\t\t{ ...radio }\n\t\t\t\t\taria-label={ label }\n\t\t\t\t\tas={ View }\n\t\t\t\t\tclassName={ classes }\n\t\t\t\t\t{ ...otherProps }\n\t\t\t\t\tref={ useMergeRefs( [ containerRef, forwardedRef ] ) }\n\t\t\t\t>\n\t\t\t\t\t{ resizeListener }\n\t\t\t\t\t<ToggleGroupControlBackdrop\n\t\t\t\t\t\t{ ...radio }\n\t\t\t\t\t\tcontainerRef={ containerRef }\n\t\t\t\t\t\tcontainerWidth={ sizes.width }\n\t\t\t\t\t\tisAdaptiveWidth={ isAdaptiveWidth }\n\t\t\t\t\t/>\n\t\t\t\t\t{ children }\n\t\t\t\t</RadioGroup>\n\t\t\t</ToggleGroupControlContext.Provider>\n\t\t</BaseControl>\n\t);\n}\n\n/**\n * `ToggleGroupControl` is a form component that lets users choose options\n * represented in horizontal segments. To render options for this control use\n * `ToggleGroupControlOption` component.\n *\n * Only use this control when you know for sure the labels of items inside won't\n * wrap. For items with longer labels, you can consider a `SelectControl` or a\n * `CustomSelectControl` component instead.\n *\n * @example\n * ```jsx\n * import {\n *   __experimentalToggleGroupControl as ToggleGroupControl,\n *   __experimentalToggleGroupControlOption as ToggleGroupControlOption,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ToggleGroupControl label=\"my label\" value=\"vertical\" isBlock>\n *       <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n *       <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n *     </ToggleGroupControl>\n *   );\n * }\n * ```\n */\nconst ConnectedToggleGroupControl = contextConnect(\n\tToggleGroupControl,\n\t'ToggleGroupControl'\n);\n\nexport default ConnectedToggleGroupControl;\n"]}
+{"version":3,"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/component.tsx"],"names":["noop","UnconnectedToggleGroupControl","props","forwardedRef","__nextHasNoMarginBottom","className","isAdaptiveWidth","isBlock","__experimentalIsIconGroup","label","hideLabelFromVision","help","onChange","size","value","children","otherProps","cx","containerRef","resizeListener","sizes","baseId","ToggleGroupControl","toString","radio","state","previousValue","setState","classes","styles","border","block","View","width"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n// eslint-disable-next-line no-restricted-imports\nimport { RadioGroup, useRadioState } from 'reakit';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useRef, useMemo } from '@wordpress/element';\nimport {\n\tuseMergeRefs,\n\tuseInstanceId,\n\tusePrevious,\n\tuseResizeObserver,\n} from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport {\n\tcontextConnect,\n\tuseContextSystem,\n\tWordPressComponentProps,\n} from '../../ui/context';\nimport { useUpdateEffect, useCx } from '../../utils/hooks';\nimport { View } from '../../view';\nimport BaseControl from '../../base-control';\nimport type { ToggleGroupControlProps } from '../types';\nimport ToggleGroupControlBackdrop from './toggle-group-control-backdrop';\nimport ToggleGroupControlContext from '../context';\nimport * as styles from './styles';\n\nconst noop = () => {};\n\nfunction UnconnectedToggleGroupControl(\n\tprops: WordPressComponentProps< ToggleGroupControlProps, 'input', false >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\t__nextHasNoMarginBottom = false,\n\t\tclassName,\n\t\tisAdaptiveWidth = false,\n\t\tisBlock = false,\n\t\t__experimentalIsIconGroup = false,\n\t\tlabel,\n\t\thideLabelFromVision = false,\n\t\thelp,\n\t\tonChange = noop,\n\t\tsize = 'default',\n\t\tvalue,\n\t\tchildren,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ToggleGroupControl' );\n\tconst cx = useCx();\n\tconst containerRef = useRef();\n\tconst [ resizeListener, sizes ] = useResizeObserver();\n\tconst baseId = useInstanceId(\n\t\tToggleGroupControl,\n\t\t'toggle-group-control'\n\t).toString();\n\tconst radio = useRadioState( {\n\t\tbaseId,\n\t\tstate: value,\n\t} );\n\tconst previousValue = usePrevious( value );\n\n\t// Propagate radio.state change.\n\tuseUpdateEffect( () => {\n\t\t// Avoid calling onChange if radio state changed\n\t\t// from incoming value.\n\t\tif ( previousValue !== radio.state ) {\n\t\t\tonChange( radio.state );\n\t\t}\n\t}, [ radio.state ] );\n\n\t// Sync incoming value with radio.state.\n\tuseUpdateEffect( () => {\n\t\tif ( value !== radio.state ) {\n\t\t\tradio.setState( value );\n\t\t}\n\t}, [ value ] );\n\n\tconst classes = useMemo(\n\t\t() =>\n\t\t\tcx(\n\t\t\t\tstyles.ToggleGroupControl( { size } ),\n\t\t\t\t! __experimentalIsIconGroup && styles.border,\n\t\t\t\tisBlock && styles.block,\n\t\t\t\tclassName\n\t\t\t),\n\t\t[ className, cx, isBlock, __experimentalIsIconGroup, size ]\n\t);\n\treturn (\n\t\t<BaseControl\n\t\t\thelp={ help }\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t>\n\t\t\t<ToggleGroupControlContext.Provider\n\t\t\t\tvalue={ { ...radio, isBlock: ! isAdaptiveWidth, size } }\n\t\t\t>\n\t\t\t\t{ ! hideLabelFromVision && (\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<BaseControl.VisualLabel>\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t\t<RadioGroup\n\t\t\t\t\t{ ...radio }\n\t\t\t\t\taria-label={ label }\n\t\t\t\t\tas={ View }\n\t\t\t\t\tclassName={ classes }\n\t\t\t\t\t{ ...otherProps }\n\t\t\t\t\tref={ useMergeRefs( [ containerRef, forwardedRef ] ) }\n\t\t\t\t>\n\t\t\t\t\t{ resizeListener }\n\t\t\t\t\t<ToggleGroupControlBackdrop\n\t\t\t\t\t\t{ ...radio }\n\t\t\t\t\t\tcontainerRef={ containerRef }\n\t\t\t\t\t\tcontainerWidth={ sizes.width }\n\t\t\t\t\t\tisAdaptiveWidth={ isAdaptiveWidth }\n\t\t\t\t\t/>\n\t\t\t\t\t{ children }\n\t\t\t\t</RadioGroup>\n\t\t\t</ToggleGroupControlContext.Provider>\n\t\t</BaseControl>\n\t);\n}\n\n/**\n * `ToggleGroupControl` is a form component that lets users choose options\n * represented in horizontal segments. To render options for this control use\n * `ToggleGroupControlOption` component.\n *\n * This component is intended for selecting a single persistent value from a set of options,\n * similar to a how a radio button group would work. If you simply want a toggle to switch between views,\n * use a `TabPanel` instead.\n *\n * Only use this control when you know for sure the labels of items inside won't\n * wrap. For items with longer labels, you can consider a `SelectControl` or a\n * `CustomSelectControl` component instead.\n *\n * ```jsx\n * import {\n *   __experimentalToggleGroupControl as ToggleGroupControl,\n *   __experimentalToggleGroupControlOption as ToggleGroupControlOption,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ToggleGroupControl label=\"my label\" value=\"vertical\" isBlock>\n *       <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n *       <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n *     </ToggleGroupControl>\n *   );\n * }\n * ```\n */\nexport const ToggleGroupControl = contextConnect(\n\tUnconnectedToggleGroupControl,\n\t'ToggleGroupControl'\n);\n\nexport default ToggleGroupControl;\n"]}

package/build/toggle-group-control/toggle-group-control/styles.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.toggleGroupControlSize = exports.block = exports.ToggleGroupControl = exports.BackdropView = void 0;
+exports.toggleGroupControlSize = exports.border = exports.block = exports.ToggleGroupControl = exports.BackdropView = void 0;
 
 var _base = _interopRequireDefault(require("@emotion/styled/base"));
 
@@ -19,17 +19,19 @@ const ToggleGroupControl = _ref => {
   let {
     size
   } = _ref;
-  return /*#__PURE__*/(0, _react.css)("background:", _utils.COLORS.ui.background, ";border:1px solid;border-color:", _utils.COLORS.ui.border, ";border-radius:", _utils.CONFIG.controlBorderRadius, ";display:inline-flex;min-width:0;padding:2px;position:relative;transition:transform ", _utils.CONFIG.transitionDurationFastest, " linear;", (0, _utils.reduceMotion)('transition'), " ", toggleGroupControlSize(size), " &:hover{border-color:", _utils.COLORS.ui.borderHover, ";}&:focus-within{border-color:", _utils.COLORS.ui.borderFocus, ";box-shadow:", _utils.CONFIG.controlBoxShadowFocus, ";outline:none;z-index:1;}" + (process.env.NODE_ENV === "production" ? "" : ";label:ToggleGroupControl;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdCVSIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3RvZ2dsZS1ncm91cC1jb250cm9sL3RvZ2dsZS1ncm91cC1jb250cm9sL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09ORklHLCBDT0xPUlMsIHJlZHVjZU1vdGlvbiB9IGZyb20gJy4uLy4uL3V0aWxzJztcbmltcG9ydCB0eXBlIHsgVG9nZ2xlR3JvdXBDb250cm9sUHJvcHMgfSBmcm9tICcuLi90eXBlcyc7XG5cbmV4cG9ydCBjb25zdCBUb2dnbGVHcm91cENvbnRyb2wgPSAoIHtcblx0c2l6ZSxcbn06IHtcblx0c2l6ZTogTm9uTnVsbGFibGU8IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzWyAnc2l6ZScgXSA+O1xufSApID0+IGNzc2Bcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLnVpLmJhY2tncm91bmQgfTtcblx0Ym9yZGVyOiAxcHggc29saWQ7XG5cdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnVpLmJvcmRlciB9O1xuXHRib3JkZXItcmFkaXVzOiAkeyBDT05GSUcuY29udHJvbEJvcmRlclJhZGl1cyB9O1xuXHRkaXNwbGF5OiBpbmxpbmUtZmxleDtcblx0bWluLXdpZHRoOiAwO1xuXHRwYWRkaW5nOiAycHg7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0dHJhbnNpdGlvbjogdHJhbnNmb3JtICR7IENPTkZJRy50cmFuc2l0aW9uRHVyYXRpb25GYXN0ZXN0IH0gbGluZWFyO1xuXHQkeyByZWR1Y2VNb3Rpb24oICd0cmFuc2l0aW9uJyApIH1cblxuXHQkeyB0b2dnbGVHcm91cENvbnRyb2xTaXplKCBzaXplICkgfVxuXG5cdCY6aG92ZXIge1xuXHRcdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnVpLmJvcmRlckhvdmVyIH07XG5cdH1cblxuXHQmOmZvY3VzLXdpdGhpbiB7XG5cdFx0Ym9yZGVyLWNvbG9yOiAkeyBDT0xPUlMudWkuYm9yZGVyRm9jdXMgfTtcblx0XHRib3gtc2hhZG93OiAkeyBDT05GSUcuY29udHJvbEJveFNoYWRvd0ZvY3VzIH07XG5cdFx0b3V0bGluZTogbm9uZTtcblx0XHR6LWluZGV4OiAxO1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgdG9nZ2xlR3JvdXBDb250cm9sU2l6ZSA9IChcblx0c2l6ZTogTm9uTnVsbGFibGU8IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzWyAnc2l6ZScgXSA+XG4pID0+IHtcblx0Y29uc3QgaGVpZ2h0cyA9IHtcblx0XHRkZWZhdWx0OiAnMzZweCcsXG5cdFx0J19fdW5zdGFibGUtbGFyZ2UnOiAnNDBweCcsXG5cdH07XG5cblx0cmV0dXJuIGNzc2Bcblx0XHRtaW4taGVpZ2h0OiAkeyBoZWlnaHRzWyBzaXplIF0gfTtcblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBibG9jayA9IGNzc2Bcblx0ZGlzcGxheTogZmxleDtcblx0d2lkdGg6IDEwMCU7XG5gO1xuXG5leHBvcnQgY29uc3QgQmFja2Ryb3BWaWV3ID0gc3R5bGVkLmRpdmBcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLmdyYXlbIDkwMCBdIH07XG5cdGJvcmRlci1yYWRpdXM6ICR7IENPTkZJRy5jb250cm9sQm9yZGVyUmFkaXVzIH07XG5cdGJveC1zaGFkb3c6ICR7IENPTkZJRy50b2dnbGVHcm91cENvbnRyb2xCYWNrZHJvcEJveFNoYWRvdyB9O1xuXHRsZWZ0OiAwO1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHRvcDogMnB4O1xuXHRib3R0b206IDJweDtcblx0dHJhbnNpdGlvbjogdHJhbnNmb3JtICR7IENPTkZJRy50cmFuc2l0aW9uRHVyYXRpb25GYXN0IH0gZWFzZTtcblx0JHsgcmVkdWNlTW90aW9uKCAndHJhbnNpdGlvbicgKSB9XG5cdHotaW5kZXg6IDE7XG5gO1xuIl19 */");
+  return /*#__PURE__*/(0, _react.css)("background:", _utils.COLORS.ui.background, ";border:1px solid transparent;border-radius:", _utils.CONFIG.controlBorderRadius, ";display:inline-flex;min-width:0;padding:2px;position:relative;transition:transform ", _utils.CONFIG.transitionDurationFastest, " linear;", (0, _utils.reduceMotion)('transition'), " ", toggleGroupControlSize(size), " &:focus-within{border-color:", _utils.COLORS.ui.borderFocus, ";box-shadow:", _utils.CONFIG.controlBoxShadowFocus, ";outline:none;z-index:1;}" + (process.env.NODE_ENV === "production" ? "" : ";label:ToggleGroupControl;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdCVSIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3RvZ2dsZS1ncm91cC1jb250cm9sL3RvZ2dsZS1ncm91cC1jb250cm9sL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09ORklHLCBDT0xPUlMsIHJlZHVjZU1vdGlvbiB9IGZyb20gJy4uLy4uL3V0aWxzJztcbmltcG9ydCB0eXBlIHsgVG9nZ2xlR3JvdXBDb250cm9sUHJvcHMgfSBmcm9tICcuLi90eXBlcyc7XG5cbmV4cG9ydCBjb25zdCBUb2dnbGVHcm91cENvbnRyb2wgPSAoIHtcblx0c2l6ZSxcbn06IHtcblx0c2l6ZTogTm9uTnVsbGFibGU8IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzWyAnc2l6ZScgXSA+O1xufSApID0+IGNzc2Bcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLnVpLmJhY2tncm91bmQgfTtcblx0Ym9yZGVyOiAxcHggc29saWQgdHJhbnNwYXJlbnQ7XG5cdGJvcmRlci1yYWRpdXM6ICR7IENPTkZJRy5jb250cm9sQm9yZGVyUmFkaXVzIH07XG5cdGRpc3BsYXk6IGlubGluZS1mbGV4O1xuXHRtaW4td2lkdGg6IDA7XG5cdHBhZGRpbmc6IDJweDtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHR0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gJHsgQ09ORklHLnRyYW5zaXRpb25EdXJhdGlvbkZhc3Rlc3QgfSBsaW5lYXI7XG5cdCR7IHJlZHVjZU1vdGlvbiggJ3RyYW5zaXRpb24nICkgfVxuXG5cdCR7IHRvZ2dsZUdyb3VwQ29udHJvbFNpemUoIHNpemUgKSB9XG5cblx0Jjpmb2N1cy13aXRoaW4ge1xuXHRcdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnVpLmJvcmRlckZvY3VzIH07XG5cdFx0Ym94LXNoYWRvdzogJHsgQ09ORklHLmNvbnRyb2xCb3hTaGFkb3dGb2N1cyB9O1xuXHRcdG91dGxpbmU6IG5vbmU7XG5cdFx0ei1pbmRleDogMTtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IGJvcmRlciA9IGNzc2Bcblx0Ym9yZGVyLWNvbG9yOiAkeyBDT0xPUlMudWkuYm9yZGVyIH07XG5cblx0Jjpob3ZlciB7XG5cdFx0Ym9yZGVyLWNvbG9yOiAkeyBDT0xPUlMudWkuYm9yZGVySG92ZXIgfTtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IHRvZ2dsZUdyb3VwQ29udHJvbFNpemUgPSAoXG5cdHNpemU6IE5vbk51bGxhYmxlPCBUb2dnbGVHcm91cENvbnRyb2xQcm9wc1sgJ3NpemUnIF0gPlxuKSA9PiB7XG5cdGNvbnN0IGhlaWdodHMgPSB7XG5cdFx0ZGVmYXVsdDogJzM2cHgnLFxuXHRcdCdfX3Vuc3RhYmxlLWxhcmdlJzogJzQwcHgnLFxuXHR9O1xuXG5cdHJldHVybiBjc3NgXG5cdFx0bWluLWhlaWdodDogJHsgaGVpZ2h0c1sgc2l6ZSBdIH07XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgYmxvY2sgPSBjc3NgXG5cdGRpc3BsYXk6IGZsZXg7XG5cdHdpZHRoOiAxMDAlO1xuYDtcblxuZXhwb3J0IGNvbnN0IEJhY2tkcm9wVmlldyA9IHN0eWxlZC5kaXZgXG5cdGJhY2tncm91bmQ6ICR7IENPTE9SUy5ncmF5WyA5MDAgXSB9O1xuXHRib3JkZXItcmFkaXVzOiAkeyBDT05GSUcuY29udHJvbEJvcmRlclJhZGl1cyB9O1xuXHRib3gtc2hhZG93OiAkeyBDT05GSUcudG9nZ2xlR3JvdXBDb250cm9sQmFja2Ryb3BCb3hTaGFkb3cgfTtcblx0bGVmdDogMDtcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHR0b3A6IDJweDtcblx0Ym90dG9tOiAycHg7XG5cdHRyYW5zaXRpb246IHRyYW5zZm9ybSAkeyBDT05GSUcudHJhbnNpdGlvbkR1cmF0aW9uRmFzdCB9IGVhc2U7XG5cdCR7IHJlZHVjZU1vdGlvbiggJ3RyYW5zaXRpb24nICkgfVxuXHR6LWluZGV4OiAxO1xuYDtcbiJdfQ== */");
 };
 
 exports.ToggleGroupControl = ToggleGroupControl;
+const border = /*#__PURE__*/(0, _react.css)("border-color:", _utils.COLORS.ui.border, ";&:hover{border-color:", _utils.COLORS.ui.borderHover, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:border;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFDeUIiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy90b2dnbGUtZ3JvdXAtY29udHJvbC90b2dnbGUtZ3JvdXAtY29udHJvbC9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTkZJRywgQ09MT1JTLCByZWR1Y2VNb3Rpb24gfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgdHlwZSB7IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgVG9nZ2xlR3JvdXBDb250cm9sID0gKCB7XG5cdHNpemUsXG59OiB7XG5cdHNpemU6IE5vbk51bGxhYmxlPCBUb2dnbGVHcm91cENvbnRyb2xQcm9wc1sgJ3NpemUnIF0gPjtcbn0gKSA9PiBjc3NgXG5cdGJhY2tncm91bmQ6ICR7IENPTE9SUy51aS5iYWNrZ3JvdW5kIH07XG5cdGJvcmRlcjogMXB4IHNvbGlkIHRyYW5zcGFyZW50O1xuXHRib3JkZXItcmFkaXVzOiAkeyBDT05GSUcuY29udHJvbEJvcmRlclJhZGl1cyB9O1xuXHRkaXNwbGF5OiBpbmxpbmUtZmxleDtcblx0bWluLXdpZHRoOiAwO1xuXHRwYWRkaW5nOiAycHg7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0dHJhbnNpdGlvbjogdHJhbnNmb3JtICR7IENPTkZJRy50cmFuc2l0aW9uRHVyYXRpb25GYXN0ZXN0IH0gbGluZWFyO1xuXHQkeyByZWR1Y2VNb3Rpb24oICd0cmFuc2l0aW9uJyApIH1cblxuXHQkeyB0b2dnbGVHcm91cENvbnRyb2xTaXplKCBzaXplICkgfVxuXG5cdCY6Zm9jdXMtd2l0aGluIHtcblx0XHRib3JkZXItY29sb3I6ICR7IENPTE9SUy51aS5ib3JkZXJGb2N1cyB9O1xuXHRcdGJveC1zaGFkb3c6ICR7IENPTkZJRy5jb250cm9sQm94U2hhZG93Rm9jdXMgfTtcblx0XHRvdXRsaW5lOiBub25lO1xuXHRcdHotaW5kZXg6IDE7XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBib3JkZXIgPSBjc3NgXG5cdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnVpLmJvcmRlciB9O1xuXG5cdCY6aG92ZXIge1xuXHRcdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnVpLmJvcmRlckhvdmVyIH07XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCB0b2dnbGVHcm91cENvbnRyb2xTaXplID0gKFxuXHRzaXplOiBOb25OdWxsYWJsZTwgVG9nZ2xlR3JvdXBDb250cm9sUHJvcHNbICdzaXplJyBdID5cbikgPT4ge1xuXHRjb25zdCBoZWlnaHRzID0ge1xuXHRcdGRlZmF1bHQ6ICczNnB4Jyxcblx0XHQnX191bnN0YWJsZS1sYXJnZSc6ICc0MHB4Jyxcblx0fTtcblxuXHRyZXR1cm4gY3NzYFxuXHRcdG1pbi1oZWlnaHQ6ICR7IGhlaWdodHNbIHNpemUgXSB9O1xuXHRgO1xufTtcblxuZXhwb3J0IGNvbnN0IGJsb2NrID0gY3NzYFxuXHRkaXNwbGF5OiBmbGV4O1xuXHR3aWR0aDogMTAwJTtcbmA7XG5cbmV4cG9ydCBjb25zdCBCYWNrZHJvcFZpZXcgPSBzdHlsZWQuZGl2YFxuXHRiYWNrZ3JvdW5kOiAkeyBDT0xPUlMuZ3JheVsgOTAwIF0gfTtcblx0Ym9yZGVyLXJhZGl1czogJHsgQ09ORklHLmNvbnRyb2xCb3JkZXJSYWRpdXMgfTtcblx0Ym94LXNoYWRvdzogJHsgQ09ORklHLnRvZ2dsZUdyb3VwQ29udHJvbEJhY2tkcm9wQm94U2hhZG93IH07XG5cdGxlZnQ6IDA7XG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0dG9wOiAycHg7XG5cdGJvdHRvbTogMnB4O1xuXHR0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gJHsgQ09ORklHLnRyYW5zaXRpb25EdXJhdGlvbkZhc3QgfSBlYXNlO1xuXHQkeyByZWR1Y2VNb3Rpb24oICd0cmFuc2l0aW9uJyApIH1cblx0ei1pbmRleDogMTtcbmA7XG4iXX0= */");
+exports.border = border;
 
 const toggleGroupControlSize = size => {
   const heights = {
     default: '36px',
     '__unstable-large': '40px'
   };
-  return /*#__PURE__*/(0, _react.css)("min-height:", heights[size], ";" + (process.env.NODE_ENV === "production" ? "" : ";label:toggleGroupControlSize;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtEVyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3RvZ2dsZS1ncm91cC1jb250cm9sL3RvZ2dsZS1ncm91cC1jb250cm9sL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09ORklHLCBDT0xPUlMsIHJlZHVjZU1vdGlvbiB9IGZyb20gJy4uLy4uL3V0aWxzJztcbmltcG9ydCB0eXBlIHsgVG9nZ2xlR3JvdXBDb250cm9sUHJvcHMgfSBmcm9tICcuLi90eXBlcyc7XG5cbmV4cG9ydCBjb25zdCBUb2dnbGVHcm91cENvbnRyb2wgPSAoIHtcblx0c2l6ZSxcbn06IHtcblx0c2l6ZTogTm9uTnVsbGFibGU8IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzWyAnc2l6ZScgXSA+O1xufSApID0+IGNzc2Bcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLnVpLmJhY2tncm91bmQgfTtcblx0Ym9yZGVyOiAxcHggc29saWQ7XG5cdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnVpLmJvcmRlciB9O1xuXHRib3JkZXItcmFkaXVzOiAkeyBDT05GSUcuY29udHJvbEJvcmRlclJhZGl1cyB9O1xuXHRkaXNwbGF5OiBpbmxpbmUtZmxleDtcblx0bWluLXdpZHRoOiAwO1xuXHRwYWRkaW5nOiAycHg7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0dHJhbnNpdGlvbjogdHJhbnNmb3JtICR7IENPTkZJRy50cmFuc2l0aW9uRHVyYXRpb25GYXN0ZXN0IH0gbGluZWFyO1xuXHQkeyByZWR1Y2VNb3Rpb24oICd0cmFuc2l0aW9uJyApIH1cblxuXHQkeyB0b2dnbGVHcm91cENvbnRyb2xTaXplKCBzaXplICkgfVxuXG5cdCY6aG92ZXIge1xuXHRcdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnVpLmJvcmRlckhvdmVyIH07XG5cdH1cblxuXHQmOmZvY3VzLXdpdGhpbiB7XG5cdFx0Ym9yZGVyLWNvbG9yOiAkeyBDT0xPUlMudWkuYm9yZGVyRm9jdXMgfTtcblx0XHRib3gtc2hhZG93OiAkeyBDT05GSUcuY29udHJvbEJveFNoYWRvd0ZvY3VzIH07XG5cdFx0b3V0bGluZTogbm9uZTtcblx0XHR6LWluZGV4OiAxO1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgdG9nZ2xlR3JvdXBDb250cm9sU2l6ZSA9IChcblx0c2l6ZTogTm9uTnVsbGFibGU8IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzWyAnc2l6ZScgXSA+XG4pID0+IHtcblx0Y29uc3QgaGVpZ2h0cyA9IHtcblx0XHRkZWZhdWx0OiAnMzZweCcsXG5cdFx0J19fdW5zdGFibGUtbGFyZ2UnOiAnNDBweCcsXG5cdH07XG5cblx0cmV0dXJuIGNzc2Bcblx0XHRtaW4taGVpZ2h0OiAkeyBoZWlnaHRzWyBzaXplIF0gfTtcblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBibG9jayA9IGNzc2Bcblx0ZGlzcGxheTogZmxleDtcblx0d2lkdGg6IDEwMCU7XG5gO1xuXG5leHBvcnQgY29uc3QgQmFja2Ryb3BWaWV3ID0gc3R5bGVkLmRpdmBcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLmdyYXlbIDkwMCBdIH07XG5cdGJvcmRlci1yYWRpdXM6ICR7IENPTkZJRy5jb250cm9sQm9yZGVyUmFkaXVzIH07XG5cdGJveC1zaGFkb3c6ICR7IENPTkZJRy50b2dnbGVHcm91cENvbnRyb2xCYWNrZHJvcEJveFNoYWRvdyB9O1xuXHRsZWZ0OiAwO1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHRvcDogMnB4O1xuXHRib3R0b206IDJweDtcblx0dHJhbnNpdGlvbjogdHJhbnNmb3JtICR7IENPTkZJRy50cmFuc2l0aW9uRHVyYXRpb25GYXN0IH0gZWFzZTtcblx0JHsgcmVkdWNlTW90aW9uKCAndHJhbnNpdGlvbicgKSB9XG5cdHotaW5kZXg6IDE7XG5gO1xuIl19 */");
+  return /*#__PURE__*/(0, _react.css)("min-height:", heights[size], ";" + (process.env.NODE_ENV === "production" ? "" : ";label:toggleGroupControlSize;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFEVyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3RvZ2dsZS1ncm91cC1jb250cm9sL3RvZ2dsZS1ncm91cC1jb250cm9sL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09ORklHLCBDT0xPUlMsIHJlZHVjZU1vdGlvbiB9IGZyb20gJy4uLy4uL3V0aWxzJztcbmltcG9ydCB0eXBlIHsgVG9nZ2xlR3JvdXBDb250cm9sUHJvcHMgfSBmcm9tICcuLi90eXBlcyc7XG5cbmV4cG9ydCBjb25zdCBUb2dnbGVHcm91cENvbnRyb2wgPSAoIHtcblx0c2l6ZSxcbn06IHtcblx0c2l6ZTogTm9uTnVsbGFibGU8IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzWyAnc2l6ZScgXSA+O1xufSApID0+IGNzc2Bcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLnVpLmJhY2tncm91bmQgfTtcblx0Ym9yZGVyOiAxcHggc29saWQgdHJhbnNwYXJlbnQ7XG5cdGJvcmRlci1yYWRpdXM6ICR7IENPTkZJRy5jb250cm9sQm9yZGVyUmFkaXVzIH07XG5cdGRpc3BsYXk6IGlubGluZS1mbGV4O1xuXHRtaW4td2lkdGg6IDA7XG5cdHBhZGRpbmc6IDJweDtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHR0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gJHsgQ09ORklHLnRyYW5zaXRpb25EdXJhdGlvbkZhc3Rlc3QgfSBsaW5lYXI7XG5cdCR7IHJlZHVjZU1vdGlvbiggJ3RyYW5zaXRpb24nICkgfVxuXG5cdCR7IHRvZ2dsZUdyb3VwQ29udHJvbFNpemUoIHNpemUgKSB9XG5cblx0Jjpmb2N1cy13aXRoaW4ge1xuXHRcdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnVpLmJvcmRlckZvY3VzIH07XG5cdFx0Ym94LXNoYWRvdzogJHsgQ09ORklHLmNvbnRyb2xCb3hTaGFkb3dGb2N1cyB9O1xuXHRcdG91dGxpbmU6IG5vbmU7XG5cdFx0ei1pbmRleDogMTtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IGJvcmRlciA9IGNzc2Bcblx0Ym9yZGVyLWNvbG9yOiAkeyBDT0xPUlMudWkuYm9yZGVyIH07XG5cblx0Jjpob3ZlciB7XG5cdFx0Ym9yZGVyLWNvbG9yOiAkeyBDT0xPUlMudWkuYm9yZGVySG92ZXIgfTtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IHRvZ2dsZUdyb3VwQ29udHJvbFNpemUgPSAoXG5cdHNpemU6IE5vbk51bGxhYmxlPCBUb2dnbGVHcm91cENvbnRyb2xQcm9wc1sgJ3NpemUnIF0gPlxuKSA9PiB7XG5cdGNvbnN0IGhlaWdodHMgPSB7XG5cdFx0ZGVmYXVsdDogJzM2cHgnLFxuXHRcdCdfX3Vuc3RhYmxlLWxhcmdlJzogJzQwcHgnLFxuXHR9O1xuXG5cdHJldHVybiBjc3NgXG5cdFx0bWluLWhlaWdodDogJHsgaGVpZ2h0c1sgc2l6ZSBdIH07XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgYmxvY2sgPSBjc3NgXG5cdGRpc3BsYXk6IGZsZXg7XG5cdHdpZHRoOiAxMDAlO1xuYDtcblxuZXhwb3J0IGNvbnN0IEJhY2tkcm9wVmlldyA9IHN0eWxlZC5kaXZgXG5cdGJhY2tncm91bmQ6ICR7IENPTE9SUy5ncmF5WyA5MDAgXSB9O1xuXHRib3JkZXItcmFkaXVzOiAkeyBDT05GSUcuY29udHJvbEJvcmRlclJhZGl1cyB9O1xuXHRib3gtc2hhZG93OiAkeyBDT05GSUcudG9nZ2xlR3JvdXBDb250cm9sQmFja2Ryb3BCb3hTaGFkb3cgfTtcblx0bGVmdDogMDtcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHR0b3A6IDJweDtcblx0Ym90dG9tOiAycHg7XG5cdHRyYW5zaXRpb246IHRyYW5zZm9ybSAkeyBDT05GSUcudHJhbnNpdGlvbkR1cmF0aW9uRmFzdCB9IGVhc2U7XG5cdCR7IHJlZHVjZU1vdGlvbiggJ3RyYW5zaXRpb24nICkgfVxuXHR6LWluZGV4OiAxO1xuYDtcbiJdfQ== */");
 };
 
 exports.toggleGroupControlSize = toggleGroupControlSize;
@@ -39,7 +41,7 @@ const block = process.env.NODE_ENV === "production" ? {
 } : {
   name: "2dfrl8-block",
   styles: "display:flex;width:100%;label:block;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXVEd0IiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy90b2dnbGUtZ3JvdXAtY29udHJvbC90b2dnbGUtZ3JvdXAtY29udHJvbC9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTkZJRywgQ09MT1JTLCByZWR1Y2VNb3Rpb24gfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgdHlwZSB7IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgVG9nZ2xlR3JvdXBDb250cm9sID0gKCB7XG5cdHNpemUsXG59OiB7XG5cdHNpemU6IE5vbk51bGxhYmxlPCBUb2dnbGVHcm91cENvbnRyb2xQcm9wc1sgJ3NpemUnIF0gPjtcbn0gKSA9PiBjc3NgXG5cdGJhY2tncm91bmQ6ICR7IENPTE9SUy51aS5iYWNrZ3JvdW5kIH07XG5cdGJvcmRlcjogMXB4IHNvbGlkO1xuXHRib3JkZXItY29sb3I6ICR7IENPTE9SUy51aS5ib3JkZXIgfTtcblx0Ym9yZGVyLXJhZGl1czogJHsgQ09ORklHLmNvbnRyb2xCb3JkZXJSYWRpdXMgfTtcblx0ZGlzcGxheTogaW5saW5lLWZsZXg7XG5cdG1pbi13aWR0aDogMDtcblx0cGFkZGluZzogMnB4O1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdHRyYW5zaXRpb246IHRyYW5zZm9ybSAkeyBDT05GSUcudHJhbnNpdGlvbkR1cmF0aW9uRmFzdGVzdCB9IGxpbmVhcjtcblx0JHsgcmVkdWNlTW90aW9uKCAndHJhbnNpdGlvbicgKSB9XG5cblx0JHsgdG9nZ2xlR3JvdXBDb250cm9sU2l6ZSggc2l6ZSApIH1cblxuXHQmOmhvdmVyIHtcblx0XHRib3JkZXItY29sb3I6ICR7IENPTE9SUy51aS5ib3JkZXJIb3ZlciB9O1xuXHR9XG5cblx0Jjpmb2N1cy13aXRoaW4ge1xuXHRcdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnVpLmJvcmRlckZvY3VzIH07XG5cdFx0Ym94LXNoYWRvdzogJHsgQ09ORklHLmNvbnRyb2xCb3hTaGFkb3dGb2N1cyB9O1xuXHRcdG91dGxpbmU6IG5vbmU7XG5cdFx0ei1pbmRleDogMTtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IHRvZ2dsZUdyb3VwQ29udHJvbFNpemUgPSAoXG5cdHNpemU6IE5vbk51bGxhYmxlPCBUb2dnbGVHcm91cENvbnRyb2xQcm9wc1sgJ3NpemUnIF0gPlxuKSA9PiB7XG5cdGNvbnN0IGhlaWdodHMgPSB7XG5cdFx0ZGVmYXVsdDogJzM2cHgnLFxuXHRcdCdfX3Vuc3RhYmxlLWxhcmdlJzogJzQwcHgnLFxuXHR9O1xuXG5cdHJldHVybiBjc3NgXG5cdFx0bWluLWhlaWdodDogJHsgaGVpZ2h0c1sgc2l6ZSBdIH07XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgYmxvY2sgPSBjc3NgXG5cdGRpc3BsYXk6IGZsZXg7XG5cdHdpZHRoOiAxMDAlO1xuYDtcblxuZXhwb3J0IGNvbnN0IEJhY2tkcm9wVmlldyA9IHN0eWxlZC5kaXZgXG5cdGJhY2tncm91bmQ6ICR7IENPTE9SUy5ncmF5WyA5MDAgXSB9O1xuXHRib3JkZXItcmFkaXVzOiAkeyBDT05GSUcuY29udHJvbEJvcmRlclJhZGl1cyB9O1xuXHRib3gtc2hhZG93OiAkeyBDT05GSUcudG9nZ2xlR3JvdXBDb250cm9sQmFja2Ryb3BCb3hTaGFkb3cgfTtcblx0bGVmdDogMDtcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHR0b3A6IDJweDtcblx0Ym90dG9tOiAycHg7XG5cdHRyYW5zaXRpb246IHRyYW5zZm9ybSAkeyBDT05GSUcudHJhbnNpdGlvbkR1cmF0aW9uRmFzdCB9IGVhc2U7XG5cdCR7IHJlZHVjZU1vdGlvbiggJ3RyYW5zaXRpb24nICkgfVxuXHR6LWluZGV4OiAxO1xuYDtcbiJdfQ== */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTBEd0IiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy90b2dnbGUtZ3JvdXAtY29udHJvbC90b2dnbGUtZ3JvdXAtY29udHJvbC9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTkZJRywgQ09MT1JTLCByZWR1Y2VNb3Rpb24gfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgdHlwZSB7IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgVG9nZ2xlR3JvdXBDb250cm9sID0gKCB7XG5cdHNpemUsXG59OiB7XG5cdHNpemU6IE5vbk51bGxhYmxlPCBUb2dnbGVHcm91cENvbnRyb2xQcm9wc1sgJ3NpemUnIF0gPjtcbn0gKSA9PiBjc3NgXG5cdGJhY2tncm91bmQ6ICR7IENPTE9SUy51aS5iYWNrZ3JvdW5kIH07XG5cdGJvcmRlcjogMXB4IHNvbGlkIHRyYW5zcGFyZW50O1xuXHRib3JkZXItcmFkaXVzOiAkeyBDT05GSUcuY29udHJvbEJvcmRlclJhZGl1cyB9O1xuXHRkaXNwbGF5OiBpbmxpbmUtZmxleDtcblx0bWluLXdpZHRoOiAwO1xuXHRwYWRkaW5nOiAycHg7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0dHJhbnNpdGlvbjogdHJhbnNmb3JtICR7IENPTkZJRy50cmFuc2l0aW9uRHVyYXRpb25GYXN0ZXN0IH0gbGluZWFyO1xuXHQkeyByZWR1Y2VNb3Rpb24oICd0cmFuc2l0aW9uJyApIH1cblxuXHQkeyB0b2dnbGVHcm91cENvbnRyb2xTaXplKCBzaXplICkgfVxuXG5cdCY6Zm9jdXMtd2l0aGluIHtcblx0XHRib3JkZXItY29sb3I6ICR7IENPTE9SUy51aS5ib3JkZXJGb2N1cyB9O1xuXHRcdGJveC1zaGFkb3c6ICR7IENPTkZJRy5jb250cm9sQm94U2hhZG93Rm9jdXMgfTtcblx0XHRvdXRsaW5lOiBub25lO1xuXHRcdHotaW5kZXg6IDE7XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBib3JkZXIgPSBjc3NgXG5cdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnVpLmJvcmRlciB9O1xuXG5cdCY6aG92ZXIge1xuXHRcdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnVpLmJvcmRlckhvdmVyIH07XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCB0b2dnbGVHcm91cENvbnRyb2xTaXplID0gKFxuXHRzaXplOiBOb25OdWxsYWJsZTwgVG9nZ2xlR3JvdXBDb250cm9sUHJvcHNbICdzaXplJyBdID5cbikgPT4ge1xuXHRjb25zdCBoZWlnaHRzID0ge1xuXHRcdGRlZmF1bHQ6ICczNnB4Jyxcblx0XHQnX191bnN0YWJsZS1sYXJnZSc6ICc0MHB4Jyxcblx0fTtcblxuXHRyZXR1cm4gY3NzYFxuXHRcdG1pbi1oZWlnaHQ6ICR7IGhlaWdodHNbIHNpemUgXSB9O1xuXHRgO1xufTtcblxuZXhwb3J0IGNvbnN0IGJsb2NrID0gY3NzYFxuXHRkaXNwbGF5OiBmbGV4O1xuXHR3aWR0aDogMTAwJTtcbmA7XG5cbmV4cG9ydCBjb25zdCBCYWNrZHJvcFZpZXcgPSBzdHlsZWQuZGl2YFxuXHRiYWNrZ3JvdW5kOiAkeyBDT0xPUlMuZ3JheVsgOTAwIF0gfTtcblx0Ym9yZGVyLXJhZGl1czogJHsgQ09ORklHLmNvbnRyb2xCb3JkZXJSYWRpdXMgfTtcblx0Ym94LXNoYWRvdzogJHsgQ09ORklHLnRvZ2dsZUdyb3VwQ29udHJvbEJhY2tkcm9wQm94U2hhZG93IH07XG5cdGxlZnQ6IDA7XG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0dG9wOiAycHg7XG5cdGJvdHRvbTogMnB4O1xuXHR0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gJHsgQ09ORklHLnRyYW5zaXRpb25EdXJhdGlvbkZhc3QgfSBlYXNlO1xuXHQkeyByZWR1Y2VNb3Rpb24oICd0cmFuc2l0aW9uJyApIH1cblx0ei1pbmRleDogMTtcbmA7XG4iXX0= */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 exports.block = block;
@@ -48,6 +50,6 @@ const BackdropView = (0, _base.default)("div", process.env.NODE_ENV === "product
 } : {
   target: "eakva830",
   label: "BackdropView"
-})("background:", _utils.COLORS.gray[900], ";border-radius:", _utils.CONFIG.controlBorderRadius, ";box-shadow:", _utils.CONFIG.toggleGroupControlBackdropBoxShadow, ";left:0;position:absolute;top:2px;bottom:2px;transition:transform ", _utils.CONFIG.transitionDurationFast, " ease;", (0, _utils.reduceMotion)('transition'), " z-index:1;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTREc0MiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy90b2dnbGUtZ3JvdXAtY29udHJvbC90b2dnbGUtZ3JvdXAtY29udHJvbC9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTkZJRywgQ09MT1JTLCByZWR1Y2VNb3Rpb24gfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgdHlwZSB7IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgVG9nZ2xlR3JvdXBDb250cm9sID0gKCB7XG5cdHNpemUsXG59OiB7XG5cdHNpemU6IE5vbk51bGxhYmxlPCBUb2dnbGVHcm91cENvbnRyb2xQcm9wc1sgJ3NpemUnIF0gPjtcbn0gKSA9PiBjc3NgXG5cdGJhY2tncm91bmQ6ICR7IENPTE9SUy51aS5iYWNrZ3JvdW5kIH07XG5cdGJvcmRlcjogMXB4IHNvbGlkO1xuXHRib3JkZXItY29sb3I6ICR7IENPTE9SUy51aS5ib3JkZXIgfTtcblx0Ym9yZGVyLXJhZGl1czogJHsgQ09ORklHLmNvbnRyb2xCb3JkZXJSYWRpdXMgfTtcblx0ZGlzcGxheTogaW5saW5lLWZsZXg7XG5cdG1pbi13aWR0aDogMDtcblx0cGFkZGluZzogMnB4O1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdHRyYW5zaXRpb246IHRyYW5zZm9ybSAkeyBDT05GSUcudHJhbnNpdGlvbkR1cmF0aW9uRmFzdGVzdCB9IGxpbmVhcjtcblx0JHsgcmVkdWNlTW90aW9uKCAndHJhbnNpdGlvbicgKSB9XG5cblx0JHsgdG9nZ2xlR3JvdXBDb250cm9sU2l6ZSggc2l6ZSApIH1cblxuXHQmOmhvdmVyIHtcblx0XHRib3JkZXItY29sb3I6ICR7IENPTE9SUy51aS5ib3JkZXJIb3ZlciB9O1xuXHR9XG5cblx0Jjpmb2N1cy13aXRoaW4ge1xuXHRcdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnVpLmJvcmRlckZvY3VzIH07XG5cdFx0Ym94LXNoYWRvdzogJHsgQ09ORklHLmNvbnRyb2xCb3hTaGFkb3dGb2N1cyB9O1xuXHRcdG91dGxpbmU6IG5vbmU7XG5cdFx0ei1pbmRleDogMTtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IHRvZ2dsZUdyb3VwQ29udHJvbFNpemUgPSAoXG5cdHNpemU6IE5vbk51bGxhYmxlPCBUb2dnbGVHcm91cENvbnRyb2xQcm9wc1sgJ3NpemUnIF0gPlxuKSA9PiB7XG5cdGNvbnN0IGhlaWdodHMgPSB7XG5cdFx0ZGVmYXVsdDogJzM2cHgnLFxuXHRcdCdfX3Vuc3RhYmxlLWxhcmdlJzogJzQwcHgnLFxuXHR9O1xuXG5cdHJldHVybiBjc3NgXG5cdFx0bWluLWhlaWdodDogJHsgaGVpZ2h0c1sgc2l6ZSBdIH07XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgYmxvY2sgPSBjc3NgXG5cdGRpc3BsYXk6IGZsZXg7XG5cdHdpZHRoOiAxMDAlO1xuYDtcblxuZXhwb3J0IGNvbnN0IEJhY2tkcm9wVmlldyA9IHN0eWxlZC5kaXZgXG5cdGJhY2tncm91bmQ6ICR7IENPTE9SUy5ncmF5WyA5MDAgXSB9O1xuXHRib3JkZXItcmFkaXVzOiAkeyBDT05GSUcuY29udHJvbEJvcmRlclJhZGl1cyB9O1xuXHRib3gtc2hhZG93OiAkeyBDT05GSUcudG9nZ2xlR3JvdXBDb250cm9sQmFja2Ryb3BCb3hTaGFkb3cgfTtcblx0bGVmdDogMDtcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHR0b3A6IDJweDtcblx0Ym90dG9tOiAycHg7XG5cdHRyYW5zaXRpb246IHRyYW5zZm9ybSAkeyBDT05GSUcudHJhbnNpdGlvbkR1cmF0aW9uRmFzdCB9IGVhc2U7XG5cdCR7IHJlZHVjZU1vdGlvbiggJ3RyYW5zaXRpb24nICkgfVxuXHR6LWluZGV4OiAxO1xuYDtcbiJdfQ== */"));
+})("background:", _utils.COLORS.gray[900], ";border-radius:", _utils.CONFIG.controlBorderRadius, ";box-shadow:", _utils.CONFIG.toggleGroupControlBackdropBoxShadow, ";left:0;position:absolute;top:2px;bottom:2px;transition:transform ", _utils.CONFIG.transitionDurationFast, " ease;", (0, _utils.reduceMotion)('transition'), " z-index:1;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQStEc0MiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy90b2dnbGUtZ3JvdXAtY29udHJvbC90b2dnbGUtZ3JvdXAtY29udHJvbC9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTkZJRywgQ09MT1JTLCByZWR1Y2VNb3Rpb24gfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgdHlwZSB7IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgVG9nZ2xlR3JvdXBDb250cm9sID0gKCB7XG5cdHNpemUsXG59OiB7XG5cdHNpemU6IE5vbk51bGxhYmxlPCBUb2dnbGVHcm91cENvbnRyb2xQcm9wc1sgJ3NpemUnIF0gPjtcbn0gKSA9PiBjc3NgXG5cdGJhY2tncm91bmQ6ICR7IENPTE9SUy51aS5iYWNrZ3JvdW5kIH07XG5cdGJvcmRlcjogMXB4IHNvbGlkIHRyYW5zcGFyZW50O1xuXHRib3JkZXItcmFkaXVzOiAkeyBDT05GSUcuY29udHJvbEJvcmRlclJhZGl1cyB9O1xuXHRkaXNwbGF5OiBpbmxpbmUtZmxleDtcblx0bWluLXdpZHRoOiAwO1xuXHRwYWRkaW5nOiAycHg7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0dHJhbnNpdGlvbjogdHJhbnNmb3JtICR7IENPTkZJRy50cmFuc2l0aW9uRHVyYXRpb25GYXN0ZXN0IH0gbGluZWFyO1xuXHQkeyByZWR1Y2VNb3Rpb24oICd0cmFuc2l0aW9uJyApIH1cblxuXHQkeyB0b2dnbGVHcm91cENvbnRyb2xTaXplKCBzaXplICkgfVxuXG5cdCY6Zm9jdXMtd2l0aGluIHtcblx0XHRib3JkZXItY29sb3I6ICR7IENPTE9SUy51aS5ib3JkZXJGb2N1cyB9O1xuXHRcdGJveC1zaGFkb3c6ICR7IENPTkZJRy5jb250cm9sQm94U2hhZG93Rm9jdXMgfTtcblx0XHRvdXRsaW5lOiBub25lO1xuXHRcdHotaW5kZXg6IDE7XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBib3JkZXIgPSBjc3NgXG5cdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnVpLmJvcmRlciB9O1xuXG5cdCY6aG92ZXIge1xuXHRcdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnVpLmJvcmRlckhvdmVyIH07XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCB0b2dnbGVHcm91cENvbnRyb2xTaXplID0gKFxuXHRzaXplOiBOb25OdWxsYWJsZTwgVG9nZ2xlR3JvdXBDb250cm9sUHJvcHNbICdzaXplJyBdID5cbikgPT4ge1xuXHRjb25zdCBoZWlnaHRzID0ge1xuXHRcdGRlZmF1bHQ6ICczNnB4Jyxcblx0XHQnX191bnN0YWJsZS1sYXJnZSc6ICc0MHB4Jyxcblx0fTtcblxuXHRyZXR1cm4gY3NzYFxuXHRcdG1pbi1oZWlnaHQ6ICR7IGhlaWdodHNbIHNpemUgXSB9O1xuXHRgO1xufTtcblxuZXhwb3J0IGNvbnN0IGJsb2NrID0gY3NzYFxuXHRkaXNwbGF5OiBmbGV4O1xuXHR3aWR0aDogMTAwJTtcbmA7XG5cbmV4cG9ydCBjb25zdCBCYWNrZHJvcFZpZXcgPSBzdHlsZWQuZGl2YFxuXHRiYWNrZ3JvdW5kOiAkeyBDT0xPUlMuZ3JheVsgOTAwIF0gfTtcblx0Ym9yZGVyLXJhZGl1czogJHsgQ09ORklHLmNvbnRyb2xCb3JkZXJSYWRpdXMgfTtcblx0Ym94LXNoYWRvdzogJHsgQ09ORklHLnRvZ2dsZUdyb3VwQ29udHJvbEJhY2tkcm9wQm94U2hhZG93IH07XG5cdGxlZnQ6IDA7XG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0dG9wOiAycHg7XG5cdGJvdHRvbTogMnB4O1xuXHR0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gJHsgQ09ORklHLnRyYW5zaXRpb25EdXJhdGlvbkZhc3QgfSBlYXNlO1xuXHQkeyByZWR1Y2VNb3Rpb24oICd0cmFuc2l0aW9uJyApIH1cblx0ei1pbmRleDogMTtcbmA7XG4iXX0= */"));
 exports.BackdropView = BackdropView;
 //# sourceMappingURL=styles.js.map

package/build/toggle-group-control/toggle-group-control/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/styles.ts"],"names":["ToggleGroupControl","size","css","COLORS","ui","background","border","CONFIG","controlBorderRadius","transitionDurationFastest","toggleGroupControlSize","borderHover","borderFocus","controlBoxShadowFocus","heights","default","block","BackdropView","gray","toggleGroupControlBackdropBoxShadow","transitionDurationFast"],"mappings":";;;;;;;;;;;AAGA;;AAMA;;;;AAGO,MAAMA,kBAAkB,GAAG;AAAA,MAAE;AACnCC,IAAAA;AADmC,GAAF;AAAA,0BAI3BC,UAJ2B,iBAKlBC,cAAOC,EAAP,CAAUC,UALQ,qCAOhBF,cAAOC,EAAP,CAAUE,MAPM,qBAQfC,cAAOC,mBARQ,0FAaRD,cAAOE,yBAbC,cAc9B,yBAAc,YAAd,CAd8B,OAgB9BC,sBAAsB,CAAET,IAAF,CAhBQ,4BAmBfE,cAAOC,EAAP,CAAUO,WAnBK,oCAuBfR,cAAOC,EAAP,CAAUQ,WAvBK,kBAwBjBL,cAAOM,qBAxBU;AAAA,CAA3B;;;;AA8BA,MAAMH,sBAAsB,GAClCT,IADqC,IAEjC;AACJ,QAAMa,OAAO,GAAG;AACfC,IAAAA,OAAO,EAAE,MADM;AAEf,wBAAoB;AAFL,GAAhB;AAKA,0BAAOb,UAAP,iBACgBY,OAAO,CAAEb,IAAF,CADvB;AAGA,CAXM;;;AAaA,MAAMe,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAX;;AAKA,MAAMC,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,kBACTd,cAAOe,IAAP,CAAa,GAAb,CADS,qBAENX,cAAOC,mBAFD,kBAGTD,cAAOY,mCAHE,wEAQCZ,cAAOa,sBARR,YASrB,yBAAc,YAAd,CATqB,+sFAAlB","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport { CONFIG, COLORS, reduceMotion } from '../../utils';\nimport type { ToggleGroupControlProps } from '../types';\n\nexport const ToggleGroupControl = ( {\n\tsize,\n}: {\n\tsize: NonNullable< ToggleGroupControlProps[ 'size' ] >;\n} ) => css`\n\tbackground: ${ COLORS.ui.background };\n\tborder: 1px solid;\n\tborder-color: ${ COLORS.ui.border };\n\tborder-radius: ${ CONFIG.controlBorderRadius };\n\tdisplay: inline-flex;\n\tmin-width: 0;\n\tpadding: 2px;\n\tposition: relative;\n\ttransition: transform ${ CONFIG.transitionDurationFastest } linear;\n\t${ reduceMotion( 'transition' ) }\n\n\t${ toggleGroupControlSize( size ) }\n\n\t&:hover {\n\t\tborder-color: ${ COLORS.ui.borderHover };\n\t}\n\n\t&:focus-within {\n\t\tborder-color: ${ COLORS.ui.borderFocus };\n\t\tbox-shadow: ${ CONFIG.controlBoxShadowFocus };\n\t\toutline: none;\n\t\tz-index: 1;\n\t}\n`;\n\nexport const toggleGroupControlSize = (\n\tsize: NonNullable< ToggleGroupControlProps[ 'size' ] >\n) => {\n\tconst heights = {\n\t\tdefault: '36px',\n\t\t'__unstable-large': '40px',\n\t};\n\n\treturn css`\n\t\tmin-height: ${ heights[ size ] };\n\t`;\n};\n\nexport const block = css`\n\tdisplay: flex;\n\twidth: 100%;\n`;\n\nexport const BackdropView = styled.div`\n\tbackground: ${ COLORS.gray[ 900 ] };\n\tborder-radius: ${ CONFIG.controlBorderRadius };\n\tbox-shadow: ${ CONFIG.toggleGroupControlBackdropBoxShadow };\n\tleft: 0;\n\tposition: absolute;\n\ttop: 2px;\n\tbottom: 2px;\n\ttransition: transform ${ CONFIG.transitionDurationFast } ease;\n\t${ reduceMotion( 'transition' ) }\n\tz-index: 1;\n`;\n"]}
+{"version":3,"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/styles.ts"],"names":["ToggleGroupControl","size","css","COLORS","ui","background","CONFIG","controlBorderRadius","transitionDurationFastest","toggleGroupControlSize","borderFocus","controlBoxShadowFocus","border","borderHover","heights","default","block","BackdropView","gray","toggleGroupControlBackdropBoxShadow","transitionDurationFast"],"mappings":";;;;;;;;;;;AAGA;;AAMA;;;;AAGO,MAAMA,kBAAkB,GAAG;AAAA,MAAE;AACnCC,IAAAA;AADmC,GAAF;AAAA,0BAI3BC,UAJ2B,iBAKlBC,cAAOC,EAAP,CAAUC,UALQ,kDAOfC,cAAOC,mBAPQ,0FAYRD,cAAOE,yBAZC,cAa9B,yBAAc,YAAd,CAb8B,OAe9BC,sBAAsB,CAAER,IAAF,CAfQ,mCAkBfE,cAAOC,EAAP,CAAUM,WAlBK,kBAmBjBJ,cAAOK,qBAnBU;AAAA,CAA3B;;;AAyBA,MAAMC,MAAM,oBAAGV,UAAH,mBACDC,cAAOC,EAAP,CAAUQ,MADT,4BAIAT,cAAOC,EAAP,CAAUS,WAJV,i0FAAZ;;;AAQA,MAAMJ,sBAAsB,GAClCR,IADqC,IAEjC;AACJ,QAAMa,OAAO,GAAG;AACfC,IAAAA,OAAO,EAAE,MADM;AAEf,wBAAoB;AAFL,GAAhB;AAKA,0BAAOb,UAAP,iBACgBY,OAAO,CAAEb,IAAF,CADvB;AAGA,CAXM;;;AAaA,MAAMe,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAX;;AAKA,MAAMC,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,kBACTd,cAAOe,IAAP,CAAa,GAAb,CADS,qBAENZ,cAAOC,mBAFD,kBAGTD,cAAOa,mCAHE,wEAQCb,cAAOc,sBARR,YASrB,yBAAc,YAAd,CATqB,2wFAAlB","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport { CONFIG, COLORS, reduceMotion } from '../../utils';\nimport type { ToggleGroupControlProps } from '../types';\n\nexport const ToggleGroupControl = ( {\n\tsize,\n}: {\n\tsize: NonNullable< ToggleGroupControlProps[ 'size' ] >;\n} ) => css`\n\tbackground: ${ COLORS.ui.background };\n\tborder: 1px solid transparent;\n\tborder-radius: ${ CONFIG.controlBorderRadius };\n\tdisplay: inline-flex;\n\tmin-width: 0;\n\tpadding: 2px;\n\tposition: relative;\n\ttransition: transform ${ CONFIG.transitionDurationFastest } linear;\n\t${ reduceMotion( 'transition' ) }\n\n\t${ toggleGroupControlSize( size ) }\n\n\t&:focus-within {\n\t\tborder-color: ${ COLORS.ui.borderFocus };\n\t\tbox-shadow: ${ CONFIG.controlBoxShadowFocus };\n\t\toutline: none;\n\t\tz-index: 1;\n\t}\n`;\n\nexport const border = css`\n\tborder-color: ${ COLORS.ui.border };\n\n\t&:hover {\n\t\tborder-color: ${ COLORS.ui.borderHover };\n\t}\n`;\n\nexport const toggleGroupControlSize = (\n\tsize: NonNullable< ToggleGroupControlProps[ 'size' ] >\n) => {\n\tconst heights = {\n\t\tdefault: '36px',\n\t\t'__unstable-large': '40px',\n\t};\n\n\treturn css`\n\t\tmin-height: ${ heights[ size ] };\n\t`;\n};\n\nexport const block = css`\n\tdisplay: flex;\n\twidth: 100%;\n`;\n\nexport const BackdropView = styled.div`\n\tbackground: ${ COLORS.gray[ 900 ] };\n\tborder-radius: ${ CONFIG.controlBorderRadius };\n\tbox-shadow: ${ CONFIG.toggleGroupControlBackdropBoxShadow };\n\tleft: 0;\n\tposition: absolute;\n\ttop: 2px;\n\tbottom: 2px;\n\ttransition: transform ${ CONFIG.transitionDurationFast } ease;\n\t${ reduceMotion( 'transition' ) }\n\tz-index: 1;\n`;\n"]}

package/build/toggle-group-control/toggle-group-control-option/component.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = ToggleGroupControlOption;
+exports.default = exports.ToggleGroupControlOption = void 0;
 
 var _element = require("@wordpress/element");
 
@@ -14,23 +14,27 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _toggleGroupControlOptionBase = require("../toggle-group-control-option-base");
 
 /**
- * Internal dependencies
+ * External dependencies
  */
-function ToggleGroupControlOption(props) {
+
+/**
+ * WordPress dependencies
+ */
+function UnforwardedToggleGroupControlOption(props, ref) {
   const {
     label,
     ...restProps
   } = props;
   const optionLabel = restProps['aria-label'] || label;
   return (0, _element.createElement)(_toggleGroupControlOptionBase.ToggleGroupControlOptionBase, (0, _extends2.default)({}, restProps, {
-    "aria-label": optionLabel
+    "aria-label": optionLabel,
+    ref: ref
   }), label);
 }
 /**
  * `ToggleGroupControlOption` is a form component and is meant to be used as a
  * child of `ToggleGroupControl`.
  *
- * @example
  * ```jsx
  * import {
  *   __experimentalToggleGroupControl as ToggleGroupControl,
@@ -47,4 +51,10 @@ function ToggleGroupControlOption(props) {
  * }
  * ```
  */
+
+
+const ToggleGroupControlOption = (0, _element.forwardRef)(UnforwardedToggleGroupControlOption);
+exports.ToggleGroupControlOption = ToggleGroupControlOption;
+var _default = ToggleGroupControlOption;
+exports.default = _default;
 //# sourceMappingURL=component.js.map

package/build/toggle-group-control/toggle-group-control-option/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control-option/component.tsx"],"names":["ToggleGroupControlOption","props","label","restProps","optionLabel"],"mappings":";;;;;;;;;;;;;AAKA;;AALA;AACA;AACA;AAKe,SAASA,wBAAT,CACdC,KADc,EAMb;AACD,QAAM;AAAEC,IAAAA,KAAF;AAAS,OAAGC;AAAZ,MAA0BF,KAAhC;AACA,QAAMG,WAAW,GAAGD,SAAS,CAAE,YAAF,CAAT,IAA6BD,KAAjD;AACA,SACC,4BAAC,0DAAD,6BACMC,SADN;AAEC,kBAAaC;AAFd,MAIGF,KAJH,CADD;AAQA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","sourcesContent":["/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../ui/context';\nimport type { ToggleGroupControlOptionProps } from '../types';\nimport { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';\n\nexport default function ToggleGroupControlOption(\n\tprops: WordPressComponentProps<\n\t\tToggleGroupControlOptionProps,\n\t\t'button',\n\t\tfalse\n\t>\n) {\n\tconst { label, ...restProps } = props;\n\tconst optionLabel = restProps[ 'aria-label' ] || label;\n\treturn (\n\t\t<ToggleGroupControlOptionBase\n\t\t\t{ ...restProps }\n\t\t\taria-label={ optionLabel }\n\t\t>\n\t\t\t{ label }\n\t\t</ToggleGroupControlOptionBase>\n\t);\n}\n\n/**\n * `ToggleGroupControlOption` is a form component and is meant to be used as a\n * child of `ToggleGroupControl`.\n *\n * @example\n * ```jsx\n * import {\n *   __experimentalToggleGroupControl as ToggleGroupControl,\n *   __experimentalToggleGroupControlOption as ToggleGroupControlOption,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ToggleGroupControl label=\"my label\" value=\"vertical\" isBlock>\n *       <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n *       <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n *     </ToggleGroupControl>\n *   );\n * }\n * ```\n */\n"]}
+{"version":3,"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control-option/component.tsx"],"names":["UnforwardedToggleGroupControlOption","props","ref","label","restProps","optionLabel","ToggleGroupControlOption"],"mappings":";;;;;;;;;AAQA;;;;AAOA;;AAfA;AACA;AACA;;AAGA;AACA;AACA;AAUA,SAASA,mCAAT,CACCC,KADD,EAMCC,GAND,EAOE;AACD,QAAM;AAAEC,IAAAA,KAAF;AAAS,OAAGC;AAAZ,MAA0BH,KAAhC;AACA,QAAMI,WAAW,GAAGD,SAAS,CAAE,YAAF,CAAT,IAA6BD,KAAjD;AACA,SACC,4BAAC,0DAAD,6BACMC,SADN;AAEC,kBAAaC,WAFd;AAGC,IAAA,GAAG,EAAGH;AAHP,MAKGC,KALH,CADD;AASA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAMG,wBAAwB,GAAG,yBACvCN,mCADuC,CAAjC;;eAIQM,wB","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../ui/context';\nimport type { ToggleGroupControlOptionProps } from '../types';\nimport { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';\n\nfunction UnforwardedToggleGroupControlOption(\n\tprops: WordPressComponentProps<\n\t\tToggleGroupControlOptionProps,\n\t\t'button',\n\t\tfalse\n\t>,\n\tref: ForwardedRef< any >\n) {\n\tconst { label, ...restProps } = props;\n\tconst optionLabel = restProps[ 'aria-label' ] || label;\n\treturn (\n\t\t<ToggleGroupControlOptionBase\n\t\t\t{ ...restProps }\n\t\t\taria-label={ optionLabel }\n\t\t\tref={ ref }\n\t\t>\n\t\t\t{ label }\n\t\t</ToggleGroupControlOptionBase>\n\t);\n}\n\n/**\n * `ToggleGroupControlOption` is a form component and is meant to be used as a\n * child of `ToggleGroupControl`.\n *\n * ```jsx\n * import {\n *   __experimentalToggleGroupControl as ToggleGroupControl,\n *   __experimentalToggleGroupControlOption as ToggleGroupControlOption,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ToggleGroupControl label=\"my label\" value=\"vertical\" isBlock>\n *       <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n *       <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n *     </ToggleGroupControl>\n *   );\n * }\n * ```\n */\nexport const ToggleGroupControlOption = forwardRef(\n\tUnforwardedToggleGroupControlOption\n);\n\nexport default ToggleGroupControlOption;\n"]}

package/build/toggle-group-control/toggle-group-control-option-base/component.js

@@ -72,8 +72,10 @@ function ToggleGroupControlOptionBase(props, forwardedRef) {
   const {
     className,
     isBlock = false,
+    isIcon = false,
     value,
     children,
+    size = 'default',
     showTooltip = false,
     ...radioProps
   } = { ...toggleGroupControlContext,
@@ -82,7 +84,9 @@ function ToggleGroupControlOptionBase(props, forwardedRef) {
   const isActive = radioProps.state === value;
   const cx = (0, _hooks.useCx)();
   const labelViewClasses = cx(isBlock && styles.labelBlock);
-  const classes = cx(styles.buttonView, className, isActive && styles.buttonActive);
+  const classes = cx(styles.buttonView, isIcon && styles.isIcon({
+    size
+  }), className, isActive && styles.buttonActive);
   return (0, _element.createElement)(LabelView, {
     className: labelViewClasses,
     "data-active": isActive

package/build/toggle-group-control/toggle-group-control-option-base/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx"],"names":["ButtonContentView","LabelView","styles","WithToolTip","showTooltip","text","children","ToggleGroupControlOptionBase","props","forwardedRef","toggleGroupControlContext","id","baseId","buttonProps","className","isBlock","value","radioProps","isActive","state","cx","labelViewClasses","labelBlock","classes","buttonView","buttonActive","ConnectedToggleGroupControlOptionBase"],"mappings":";;;;;;;;;;;;;AAKA;;AAKA;;AAKA;;AASA;;AACA;;AACA;;AACA;;;;;;AA3BA;AACA;AACA;AAEA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAeA,MAAM;AAAEA,EAAAA,iBAAF;AAAqBC,EAAAA;AAArB,IAAmCC,MAAzC;;AAEA,MAAMC,WAAW,GAAG,QAAyD;AAAA,MAAvD;AAAEC,IAAAA,WAAF;AAAeC,IAAAA,IAAf;AAAqBC,IAAAA;AAArB,GAAuD;;AAC5E,MAAKF,WAAW,IAAIC,IAApB,EAA2B;AAC1B,WACC,4BAAC,gBAAD;AAAS,MAAA,IAAI,EAAGA,IAAhB;AAAuB,MAAA,QAAQ,EAAC;AAAhC,OACGC,QADH,CADD;AAKA;;AACD,SAAO,qDAAIA,QAAJ,CAAP;AACA,CATD;;AAWA,SAASC,4BAAT,CACCC,KADD,EAMCC,YAND,EAOE;AACD,QAAMC,yBAAyB,GAAG,6CAAlC;AACA,QAAMC,EAAE,GAAG,4BACVJ,4BADU,EAEVG,yBAAyB,CAACE,MAA1B,IAAoC,kCAF1B,CAAX;AAIA,QAAMC,WAAW,GAAG,+BACnB,EAAE,GAAGL,KAAL;AAAYG,IAAAA;AAAZ,GADmB,EAEnB,8BAFmB,CAApB;AAIA,QAAM;AACLG,IAAAA,SADK;AAELC,IAAAA,OAAO,GAAG,KAFL;AAGLC,IAAAA,KAHK;AAILV,IAAAA,QAJK;AAKLF,IAAAA,WAAW,GAAG,KALT;AAML,OAAGa;AANE,MAOF,EACH,GAAGP,yBADA;AAEH,OAAGG;AAFA,GAPJ;AAYA,QAAMK,QAAQ,GAAGD,UAAU,CAACE,KAAX,KAAqBH,KAAtC;AACA,QAAMI,EAAE,GAAG,mBAAX;AACA,QAAMC,gBAAgB,GAAGD,EAAE,CAAEL,OAAO,IAAIb,MAAM,CAACoB,UAApB,CAA3B;AACA,QAAMC,OAAO,GAAGH,EAAE,CACjBlB,MAAM,CAACsB,UADU,EAEjBV,SAFiB,EAGjBI,QAAQ,IAAIhB,MAAM,CAACuB,YAHF,CAAlB;AAMA,SACC,4BAAC,SAAD;AAAW,IAAA,SAAS,EAAGJ,gBAAvB;AAA0C,mBAAcH;AAAxD,KACC,4BAAC,WAAD;AACC,IAAA,WAAW,EAAGd,WADf;AAEC,IAAA,IAAI,EAAGa,UAAU,CAAE,YAAF;AAFlB,KAIC,4BAAC,aAAD,6BACMA,UADN;AAEC,IAAA,EAAE,EAAC,QAFJ;AAGC,kBAAaA,UAAU,CAAE,YAAF,CAHxB;AAIC,IAAA,SAAS,EAAGM,OAJb;AAKC,kBAAaP,KALd;AAMC,IAAA,GAAG,EAAGP,YANP;AAOC,IAAA,KAAK,EAAGO;AAPT,MASC,4BAAC,iBAAD,QAAqBV,QAArB,CATD,CAJD,CADD,CADD;AAoBA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAMoB,qCAAqC,GAAG,6BAC7CnB,4BAD6C,EAE7C,8BAF6C,CAA9C;eAKemB,qC","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n// eslint-disable-next-line no-restricted-imports\nimport { Radio } from 'reakit';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport {\n\tcontextConnect,\n\tuseContextSystem,\n\tWordPressComponentProps,\n} from '../../ui/context';\nimport type {\n\tToggleGroupControlOptionBaseProps,\n\tWithToolTipProps,\n} from '../types';\nimport { useToggleGroupControlContext } from '../context';\nimport * as styles from './styles';\nimport { useCx } from '../../utils/hooks';\nimport Tooltip from '../../tooltip';\n\nconst { ButtonContentView, LabelView } = styles;\n\nconst WithToolTip = ( { showTooltip, text, children }: WithToolTipProps ) => {\n\tif ( showTooltip && text ) {\n\t\treturn (\n\t\t\t<Tooltip text={ text } position=\"top center\">\n\t\t\t\t{ children }\n\t\t\t</Tooltip>\n\t\t);\n\t}\n\treturn <>{ children }</>;\n};\n\nfunction ToggleGroupControlOptionBase(\n\tprops: WordPressComponentProps<\n\t\tToggleGroupControlOptionBaseProps,\n\t\t'button',\n\t\tfalse\n\t>,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst toggleGroupControlContext = useToggleGroupControlContext();\n\tconst id = useInstanceId(\n\t\tToggleGroupControlOptionBase,\n\t\ttoggleGroupControlContext.baseId || 'toggle-group-control-option-base'\n\t) as string;\n\tconst buttonProps = useContextSystem(\n\t\t{ ...props, id },\n\t\t'ToggleGroupControlOptionBase'\n\t);\n\tconst {\n\t\tclassName,\n\t\tisBlock = false,\n\t\tvalue,\n\t\tchildren,\n\t\tshowTooltip = false,\n\t\t...radioProps\n\t} = {\n\t\t...toggleGroupControlContext,\n\t\t...buttonProps,\n\t};\n\n\tconst isActive = radioProps.state === value;\n\tconst cx = useCx();\n\tconst labelViewClasses = cx( isBlock && styles.labelBlock );\n\tconst classes = cx(\n\t\tstyles.buttonView,\n\t\tclassName,\n\t\tisActive && styles.buttonActive\n\t);\n\n\treturn (\n\t\t<LabelView className={ labelViewClasses } data-active={ isActive }>\n\t\t\t<WithToolTip\n\t\t\t\tshowTooltip={ showTooltip }\n\t\t\t\ttext={ radioProps[ 'aria-label' ] }\n\t\t\t>\n\t\t\t\t<Radio\n\t\t\t\t\t{ ...radioProps }\n\t\t\t\t\tas=\"button\"\n\t\t\t\t\taria-label={ radioProps[ 'aria-label' ] }\n\t\t\t\t\tclassName={ classes }\n\t\t\t\t\tdata-value={ value }\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t>\n\t\t\t\t\t<ButtonContentView>{ children }</ButtonContentView>\n\t\t\t\t</Radio>\n\t\t\t</WithToolTip>\n\t\t</LabelView>\n\t);\n}\n\n/**\n * `ToggleGroupControlOptionBase` is a form component and is meant to be used as an internal,\n * generic component for any children of `ToggleGroupControl`.\n *\n * @example\n * ```jsx\n * import {\n *   __experimentalToggleGroupControl as ToggleGroupControl,\n *   __experimentalToggleGroupControlOptionBase as ToggleGroupControlOptionBase,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ToggleGroupControl label=\"my label\" value=\"vertical\" isBlock>\n *       <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n *       <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n *     </ToggleGroupControl>\n *   );\n * }\n * ```\n */\nconst ConnectedToggleGroupControlOptionBase = contextConnect(\n\tToggleGroupControlOptionBase,\n\t'ToggleGroupControlOptionBase'\n);\n\nexport default ConnectedToggleGroupControlOptionBase;\n"]}
+{"version":3,"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx"],"names":["ButtonContentView","LabelView","styles","WithToolTip","showTooltip","text","children","ToggleGroupControlOptionBase","props","forwardedRef","toggleGroupControlContext","id","baseId","buttonProps","className","isBlock","isIcon","value","size","radioProps","isActive","state","cx","labelViewClasses","labelBlock","classes","buttonView","buttonActive","ConnectedToggleGroupControlOptionBase"],"mappings":";;;;;;;;;;;;;AAKA;;AAKA;;AAKA;;AASA;;AACA;;AACA;;AACA;;;;;;AA3BA;AACA;AACA;AAEA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAeA,MAAM;AAAEA,EAAAA,iBAAF;AAAqBC,EAAAA;AAArB,IAAmCC,MAAzC;;AAEA,MAAMC,WAAW,GAAG,QAAyD;AAAA,MAAvD;AAAEC,IAAAA,WAAF;AAAeC,IAAAA,IAAf;AAAqBC,IAAAA;AAArB,GAAuD;;AAC5E,MAAKF,WAAW,IAAIC,IAApB,EAA2B;AAC1B,WACC,4BAAC,gBAAD;AAAS,MAAA,IAAI,EAAGA,IAAhB;AAAuB,MAAA,QAAQ,EAAC;AAAhC,OACGC,QADH,CADD;AAKA;;AACD,SAAO,qDAAIA,QAAJ,CAAP;AACA,CATD;;AAWA,SAASC,4BAAT,CACCC,KADD,EAMCC,YAND,EAOE;AACD,QAAMC,yBAAyB,GAAG,6CAAlC;AACA,QAAMC,EAAE,GAAG,4BACVJ,4BADU,EAEVG,yBAAyB,CAACE,MAA1B,IAAoC,kCAF1B,CAAX;AAIA,QAAMC,WAAW,GAAG,+BACnB,EAAE,GAAGL,KAAL;AAAYG,IAAAA;AAAZ,GADmB,EAEnB,8BAFmB,CAApB;AAIA,QAAM;AACLG,IAAAA,SADK;AAELC,IAAAA,OAAO,GAAG,KAFL;AAGLC,IAAAA,MAAM,GAAG,KAHJ;AAILC,IAAAA,KAJK;AAKLX,IAAAA,QALK;AAMLY,IAAAA,IAAI,GAAG,SANF;AAOLd,IAAAA,WAAW,GAAG,KAPT;AAQL,OAAGe;AARE,MASF,EACH,GAAGT,yBADA;AAEH,OAAGG;AAFA,GATJ;AAcA,QAAMO,QAAQ,GAAGD,UAAU,CAACE,KAAX,KAAqBJ,KAAtC;AACA,QAAMK,EAAE,GAAG,mBAAX;AACA,QAAMC,gBAAgB,GAAGD,EAAE,CAAEP,OAAO,IAAIb,MAAM,CAACsB,UAApB,CAA3B;AACA,QAAMC,OAAO,GAAGH,EAAE,CACjBpB,MAAM,CAACwB,UADU,EAEjBV,MAAM,IAAId,MAAM,CAACc,MAAP,CAAe;AAAEE,IAAAA;AAAF,GAAf,CAFO,EAGjBJ,SAHiB,EAIjBM,QAAQ,IAAIlB,MAAM,CAACyB,YAJF,CAAlB;AAOA,SACC,4BAAC,SAAD;AAAW,IAAA,SAAS,EAAGJ,gBAAvB;AAA0C,mBAAcH;AAAxD,KACC,4BAAC,WAAD;AACC,IAAA,WAAW,EAAGhB,WADf;AAEC,IAAA,IAAI,EAAGe,UAAU,CAAE,YAAF;AAFlB,KAIC,4BAAC,aAAD,6BACMA,UADN;AAEC,IAAA,EAAE,EAAC,QAFJ;AAGC,kBAAaA,UAAU,CAAE,YAAF,CAHxB;AAIC,IAAA,SAAS,EAAGM,OAJb;AAKC,kBAAaR,KALd;AAMC,IAAA,GAAG,EAAGR,YANP;AAOC,IAAA,KAAK,EAAGQ;AAPT,MASC,4BAAC,iBAAD,QAAqBX,QAArB,CATD,CAJD,CADD,CADD;AAoBA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAMsB,qCAAqC,GAAG,6BAC7CrB,4BAD6C,EAE7C,8BAF6C,CAA9C;eAKeqB,qC","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n// eslint-disable-next-line no-restricted-imports\nimport { Radio } from 'reakit';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport {\n\tcontextConnect,\n\tuseContextSystem,\n\tWordPressComponentProps,\n} from '../../ui/context';\nimport type {\n\tToggleGroupControlOptionBaseProps,\n\tWithToolTipProps,\n} from '../types';\nimport { useToggleGroupControlContext } from '../context';\nimport * as styles from './styles';\nimport { useCx } from '../../utils/hooks';\nimport Tooltip from '../../tooltip';\n\nconst { ButtonContentView, LabelView } = styles;\n\nconst WithToolTip = ( { showTooltip, text, children }: WithToolTipProps ) => {\n\tif ( showTooltip && text ) {\n\t\treturn (\n\t\t\t<Tooltip text={ text } position=\"top center\">\n\t\t\t\t{ children }\n\t\t\t</Tooltip>\n\t\t);\n\t}\n\treturn <>{ children }</>;\n};\n\nfunction ToggleGroupControlOptionBase(\n\tprops: WordPressComponentProps<\n\t\tToggleGroupControlOptionBaseProps,\n\t\t'button',\n\t\tfalse\n\t>,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst toggleGroupControlContext = useToggleGroupControlContext();\n\tconst id = useInstanceId(\n\t\tToggleGroupControlOptionBase,\n\t\ttoggleGroupControlContext.baseId || 'toggle-group-control-option-base'\n\t) as string;\n\tconst buttonProps = useContextSystem(\n\t\t{ ...props, id },\n\t\t'ToggleGroupControlOptionBase'\n\t);\n\tconst {\n\t\tclassName,\n\t\tisBlock = false,\n\t\tisIcon = false,\n\t\tvalue,\n\t\tchildren,\n\t\tsize = 'default',\n\t\tshowTooltip = false,\n\t\t...radioProps\n\t} = {\n\t\t...toggleGroupControlContext,\n\t\t...buttonProps,\n\t};\n\n\tconst isActive = radioProps.state === value;\n\tconst cx = useCx();\n\tconst labelViewClasses = cx( isBlock && styles.labelBlock );\n\tconst classes = cx(\n\t\tstyles.buttonView,\n\t\tisIcon && styles.isIcon( { size } ),\n\t\tclassName,\n\t\tisActive && styles.buttonActive\n\t);\n\n\treturn (\n\t\t<LabelView className={ labelViewClasses } data-active={ isActive }>\n\t\t\t<WithToolTip\n\t\t\t\tshowTooltip={ showTooltip }\n\t\t\t\ttext={ radioProps[ 'aria-label' ] }\n\t\t\t>\n\t\t\t\t<Radio\n\t\t\t\t\t{ ...radioProps }\n\t\t\t\t\tas=\"button\"\n\t\t\t\t\taria-label={ radioProps[ 'aria-label' ] }\n\t\t\t\t\tclassName={ classes }\n\t\t\t\t\tdata-value={ value }\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t>\n\t\t\t\t\t<ButtonContentView>{ children }</ButtonContentView>\n\t\t\t\t</Radio>\n\t\t\t</WithToolTip>\n\t\t</LabelView>\n\t);\n}\n\n/**\n * `ToggleGroupControlOptionBase` is a form component and is meant to be used as an internal,\n * generic component for any children of `ToggleGroupControl`.\n *\n * @example\n * ```jsx\n * import {\n *   __experimentalToggleGroupControl as ToggleGroupControl,\n *   __experimentalToggleGroupControlOptionBase as ToggleGroupControlOptionBase,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ToggleGroupControl label=\"my label\" value=\"vertical\" isBlock>\n *       <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n *       <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n *     </ToggleGroupControl>\n *   );\n * }\n * ```\n */\nconst ConnectedToggleGroupControlOptionBase = contextConnect(\n\tToggleGroupControlOptionBase,\n\t'ToggleGroupControlOptionBase'\n);\n\nexport default ConnectedToggleGroupControlOptionBase;\n"]}