@wordpress/components 28.6.0 → 28.7.0

package/build/alignment-matrix-control/styles.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Point = exports.GridRow = exports.GridContainer = exports.Cell = void 0;
+var _base = _interopRequireDefault(require("@emotion/styled/base"));
+var _react = require("@emotion/react");
+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)."; } /**
+ * External dependencies
+ */ /**
+ * Internal dependencies
+ */
+// Grid structure
+
+const rootBase = ({
+  size = 92
+}) => /*#__PURE__*/(0, _react.css)("direction:ltr;display:grid;grid-template-columns:repeat( 3, 1fr );grid-template-rows:repeat( 3, 1fr );box-sizing:border-box;width:", size, "px;aspect-ratio:1;border-radius:", _utils.CONFIG.radiusMedium, ";outline:none;" + (process.env.NODE_ENV === "production" ? "" : ";label:rootBase;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYWxpZ25tZW50LW1hdHJpeC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQnlDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYWxpZ25tZW50LW1hdHJpeC1jb250cm9sL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09MT1JTLCBDT05GSUcgfSBmcm9tICcuLi91dGlscyc7XG5pbXBvcnQgdHlwZSB7XG5cdEFsaWdubWVudE1hdHJpeENvbnRyb2xQcm9wcyxcblx0QWxpZ25tZW50TWF0cml4Q29udHJvbEljb25Qcm9wcyxcbn0gZnJvbSAnLi90eXBlcyc7XG5cbi8vIEdyaWQgc3RydWN0dXJlXG5cbmNvbnN0IHJvb3RCYXNlID0gKCB7IHNpemUgPSA5MiB9ICkgPT4gY3NzYFxuXHRkaXJlY3Rpb246IGx0cjtcblxuXHRkaXNwbGF5OiBncmlkO1xuXHRncmlkLXRlbXBsYXRlLWNvbHVtbnM6IHJlcGVhdCggMywgMWZyICk7XG5cdGdyaWQtdGVtcGxhdGUtcm93czogcmVwZWF0KCAzLCAxZnIgKTtcblxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHR3aWR0aDogJHsgc2l6ZSB9cHg7XG5cdGFzcGVjdC1yYXRpbzogMTtcblxuXHRib3JkZXItcmFkaXVzOiAkeyBDT05GSUcucmFkaXVzTWVkaXVtIH07XG5cdG91dGxpbmU6IG5vbmU7XG5gO1xuXG5leHBvcnQgY29uc3QgR3JpZENvbnRhaW5lciA9IHN0eWxlZC5kaXY8IHtcblx0c2l6ZT86IEFsaWdubWVudE1hdHJpeENvbnRyb2xQcm9wc1sgJ3dpZHRoJyBdO1xuXHRkaXNhYmxlUG9pbnRlckV2ZW50cz86IEFsaWdubWVudE1hdHJpeENvbnRyb2xJY29uUHJvcHNbICdkaXNhYmxlUG9pbnRlckV2ZW50cycgXTtcbn0gPmBcblx0JHsgcm9vdEJhc2UgfVxuXG5cdGJvcmRlcjogMXB4IHNvbGlkIHRyYW5zcGFyZW50O1xuXG5cdCR7ICggcHJvcHMgKSA9PlxuXHRcdHByb3BzLmRpc2FibGVQb2ludGVyRXZlbnRzXG5cdFx0XHQ/IGNzc2BgXG5cdFx0XHQ6IGNzc2Bcblx0XHRcdFx0XHRjdXJzb3I6IHBvaW50ZXI7XG5cdFx0XHQgIGAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IEdyaWRSb3cgPSBzdHlsZWQuZGl2YFxuXHRncmlkLWNvbHVtbjogMSAvIC0xO1xuXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGRpc3BsYXk6IGdyaWQ7XG5cdGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KCAzLCAxZnIgKTtcbmA7XG5cbi8vIENlbGxcbmV4cG9ydCBjb25zdCBDZWxsID0gc3R5bGVkLnNwYW5gXG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblxuXHRkaXNwbGF5OiBmbGV4O1xuXHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcblxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRtYXJnaW46IDA7XG5cdHBhZGRpbmc6IDA7XG5cblx0YXBwZWFyYW5jZTogbm9uZTtcblx0Ym9yZGVyOiBub25lO1xuXHRvdXRsaW5lOiBub25lO1xuYDtcblxuY29uc3QgUE9JTlRfU0laRSA9IDY7XG5leHBvcnQgY29uc3QgUG9pbnQgPSBzdHlsZWQuc3BhbmBcblx0ZGlzcGxheTogYmxvY2s7XG5cdGNvbnRhaW46IHN0cmljdDtcblxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHR3aWR0aDogJHsgUE9JTlRfU0laRSB9cHg7XG5cdGFzcGVjdC1yYXRpbzogMTtcblxuXHRtYXJnaW46IGF1dG87XG5cblx0Y29sb3I6ICR7IENPTE9SUy50aGVtZS5ncmF5WyA0MDAgXSB9O1xuXG5cdC8qIFVzZSBib3JkZXIgaW5zdGVhZCBvZiBiYWNrZ3JvdW5kIGNvbG9yIHNvIHRoYXQgdGhlIHBvaW50IHNob3dzXG5cdGluIFdpbmRvd3MgSGlnaCBDb250cmFzdCBNb2RlICovXG5cdGJvcmRlcjogJHsgUE9JTlRfU0laRSAvIDIgfXB4IHNvbGlkIGN1cnJlbnRDb2xvcjtcblxuXHQvKiBIaWdobGlnaHQgYWN0aXZlIGl0ZW0gKi9cblx0JHsgQ2VsbCB9W2RhdGEtYWN0aXZlLWl0ZW1dICYge1xuXHRcdGNvbG9yOiAkeyBDT0xPUlMuZ3JheVsgOTAwIF0gfTtcblx0XHR0cmFuc2Zvcm06IHNjYWxlKCBjYWxjKCA1IC8gMyApICk7XG5cdH1cblxuXHQvKiBIb3ZlciBzdHlsZXMgZm9yIG5vbi1hY3RpdmUgaXRlbXMgKi9cblx0JHsgQ2VsbCB9Om5vdChbZGF0YS1hY3RpdmUtaXRlbV0pOmhvdmVyICYge1xuXHRcdGNvbG9yOiAkeyBDT0xPUlMudGhlbWUuYWNjZW50IH07XG5cdH1cblxuXHQvKiBTaG93IGFuIG91dGxpbmUgb25seSB3aGVuIGludGVyYWN0aW5nIHdpdGgga2V5Ym9hcmQgKi9cblx0JHsgQ2VsbCB9W2RhdGEtZm9jdXMtdmlzaWJsZV0gJiB7XG5cdFx0b3V0bGluZTogMXB4IHNvbGlkICR7IENPTE9SUy50aGVtZS5hY2NlbnQgfTtcblx0XHRvdXRsaW5lLW9mZnNldDogMXB4O1xuXHR9XG5cblx0QG1lZGlhIG5vdCAoIHByZWZlcnMtcmVkdWNlZC1tb3Rpb24gKSB7XG5cdFx0dHJhbnNpdGlvbi1wcm9wZXJ0eTogY29sb3IsIHRyYW5zZm9ybTtcblx0XHR0cmFuc2l0aW9uLWR1cmF0aW9uOiAxMjBtcztcblx0XHR0cmFuc2l0aW9uLXRpbWluZy1mdW5jdGlvbjogbGluZWFyO1xuXHR9XG5gO1xuIl19 */");
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "e0dnmk",
+  styles: "cursor:pointer"
+} : {
+  name: "1h7pcau-GridContainer",
+  styles: "cursor:pointer;label:GridContainer;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYWxpZ25tZW50LW1hdHJpeC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEyQ1EiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9hbGlnbm1lbnQtbWF0cml4LWNvbnRyb2wvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMsIENPTkZJRyB9IGZyb20gJy4uL3V0aWxzJztcbmltcG9ydCB0eXBlIHtcblx0QWxpZ25tZW50TWF0cml4Q29udHJvbFByb3BzLFxuXHRBbGlnbm1lbnRNYXRyaXhDb250cm9sSWNvblByb3BzLFxufSBmcm9tICcuL3R5cGVzJztcblxuLy8gR3JpZCBzdHJ1Y3R1cmVcblxuY29uc3Qgcm9vdEJhc2UgPSAoIHsgc2l6ZSA9IDkyIH0gKSA9PiBjc3NgXG5cdGRpcmVjdGlvbjogbHRyO1xuXG5cdGRpc3BsYXk6IGdyaWQ7XG5cdGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KCAzLCAxZnIgKTtcblx0Z3JpZC10ZW1wbGF0ZS1yb3dzOiByZXBlYXQoIDMsIDFmciApO1xuXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdHdpZHRoOiAkeyBzaXplIH1weDtcblx0YXNwZWN0LXJhdGlvOiAxO1xuXG5cdGJvcmRlci1yYWRpdXM6ICR7IENPTkZJRy5yYWRpdXNNZWRpdW0gfTtcblx0b3V0bGluZTogbm9uZTtcbmA7XG5cbmV4cG9ydCBjb25zdCBHcmlkQ29udGFpbmVyID0gc3R5bGVkLmRpdjwge1xuXHRzaXplPzogQWxpZ25tZW50TWF0cml4Q29udHJvbFByb3BzWyAnd2lkdGgnIF07XG5cdGRpc2FibGVQb2ludGVyRXZlbnRzPzogQWxpZ25tZW50TWF0cml4Q29udHJvbEljb25Qcm9wc1sgJ2Rpc2FibGVQb2ludGVyRXZlbnRzJyBdO1xufSA+YFxuXHQkeyByb290QmFzZSB9XG5cblx0Ym9yZGVyOiAxcHggc29saWQgdHJhbnNwYXJlbnQ7XG5cblx0JHsgKCBwcm9wcyApID0+XG5cdFx0cHJvcHMuZGlzYWJsZVBvaW50ZXJFdmVudHNcblx0XHRcdD8gY3NzYGBcblx0XHRcdDogY3NzYFxuXHRcdFx0XHRcdGN1cnNvcjogcG9pbnRlcjtcblx0XHRcdCAgYCB9XG5gO1xuXG5leHBvcnQgY29uc3QgR3JpZFJvdyA9IHN0eWxlZC5kaXZgXG5cdGdyaWQtY29sdW1uOiAxIC8gLTE7XG5cblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0ZGlzcGxheTogZ3JpZDtcblx0Z3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiByZXBlYXQoIDMsIDFmciApO1xuYDtcblxuLy8gQ2VsbFxuZXhwb3J0IGNvbnN0IENlbGwgPSBzdHlsZWQuc3BhbmBcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXG5cdGRpc3BsYXk6IGZsZXg7XG5cdGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cdGp1c3RpZnktY29udGVudDogY2VudGVyO1xuXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdG1hcmdpbjogMDtcblx0cGFkZGluZzogMDtcblxuXHRhcHBlYXJhbmNlOiBub25lO1xuXHRib3JkZXI6IG5vbmU7XG5cdG91dGxpbmU6IG5vbmU7XG5gO1xuXG5jb25zdCBQT0lOVF9TSVpFID0gNjtcbmV4cG9ydCBjb25zdCBQb2ludCA9IHN0eWxlZC5zcGFuYFxuXHRkaXNwbGF5OiBibG9jaztcblx0Y29udGFpbjogc3RyaWN0O1xuXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdHdpZHRoOiAkeyBQT0lOVF9TSVpFIH1weDtcblx0YXNwZWN0LXJhdGlvOiAxO1xuXG5cdG1hcmdpbjogYXV0bztcblxuXHRjb2xvcjogJHsgQ09MT1JTLnRoZW1lLmdyYXlbIDQwMCBdIH07XG5cblx0LyogVXNlIGJvcmRlciBpbnN0ZWFkIG9mIGJhY2tncm91bmQgY29sb3Igc28gdGhhdCB0aGUgcG9pbnQgc2hvd3Ncblx0aW4gV2luZG93cyBIaWdoIENvbnRyYXN0IE1vZGUgKi9cblx0Ym9yZGVyOiAkeyBQT0lOVF9TSVpFIC8gMiB9cHggc29saWQgY3VycmVudENvbG9yO1xuXG5cdC8qIEhpZ2hsaWdodCBhY3RpdmUgaXRlbSAqL1xuXHQkeyBDZWxsIH1bZGF0YS1hY3RpdmUtaXRlbV0gJiB7XG5cdFx0Y29sb3I6ICR7IENPTE9SUy5ncmF5WyA5MDAgXSB9O1xuXHRcdHRyYW5zZm9ybTogc2NhbGUoIGNhbGMoIDUgLyAzICkgKTtcblx0fVxuXG5cdC8qIEhvdmVyIHN0eWxlcyBmb3Igbm9uLWFjdGl2ZSBpdGVtcyAqL1xuXHQkeyBDZWxsIH06bm90KFtkYXRhLWFjdGl2ZS1pdGVtXSk6aG92ZXIgJiB7XG5cdFx0Y29sb3I6ICR7IENPTE9SUy50aGVtZS5hY2NlbnQgfTtcblx0fVxuXG5cdC8qIFNob3cgYW4gb3V0bGluZSBvbmx5IHdoZW4gaW50ZXJhY3Rpbmcgd2l0aCBrZXlib2FyZCAqL1xuXHQkeyBDZWxsIH1bZGF0YS1mb2N1cy12aXNpYmxlXSAmIHtcblx0XHRvdXRsaW5lOiAxcHggc29saWQgJHsgQ09MT1JTLnRoZW1lLmFjY2VudCB9O1xuXHRcdG91dGxpbmUtb2Zmc2V0OiAxcHg7XG5cdH1cblxuXHRAbWVkaWEgbm90ICggcHJlZmVycy1yZWR1Y2VkLW1vdGlvbiApIHtcblx0XHR0cmFuc2l0aW9uLXByb3BlcnR5OiBjb2xvciwgdHJhbnNmb3JtO1xuXHRcdHRyYW5zaXRpb24tZHVyYXRpb246IDEyMG1zO1xuXHRcdHRyYW5zaXRpb24tdGltaW5nLWZ1bmN0aW9uOiBsaW5lYXI7XG5cdH1cbmA7XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+const GridContainer = exports.GridContainer = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
+  target: "e1r95csn3"
+} : {
+  target: "e1r95csn3",
+  label: "GridContainer"
+})(rootBase, " border:1px solid transparent;", props => props.disablePointerEvents ? /*#__PURE__*/(0, _react.css)(process.env.NODE_ENV === "production" ? "" : ";label:GridContainer;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYWxpZ25tZW50LW1hdHJpeC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEwQ1EiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9hbGlnbm1lbnQtbWF0cml4LWNvbnRyb2wvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMsIENPTkZJRyB9IGZyb20gJy4uL3V0aWxzJztcbmltcG9ydCB0eXBlIHtcblx0QWxpZ25tZW50TWF0cml4Q29udHJvbFByb3BzLFxuXHRBbGlnbm1lbnRNYXRyaXhDb250cm9sSWNvblByb3BzLFxufSBmcm9tICcuL3R5cGVzJztcblxuLy8gR3JpZCBzdHJ1Y3R1cmVcblxuY29uc3Qgcm9vdEJhc2UgPSAoIHsgc2l6ZSA9IDkyIH0gKSA9PiBjc3NgXG5cdGRpcmVjdGlvbjogbHRyO1xuXG5cdGRpc3BsYXk6IGdyaWQ7XG5cdGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KCAzLCAxZnIgKTtcblx0Z3JpZC10ZW1wbGF0ZS1yb3dzOiByZXBlYXQoIDMsIDFmciApO1xuXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdHdpZHRoOiAkeyBzaXplIH1weDtcblx0YXNwZWN0LXJhdGlvOiAxO1xuXG5cdGJvcmRlci1yYWRpdXM6ICR7IENPTkZJRy5yYWRpdXNNZWRpdW0gfTtcblx0b3V0bGluZTogbm9uZTtcbmA7XG5cbmV4cG9ydCBjb25zdCBHcmlkQ29udGFpbmVyID0gc3R5bGVkLmRpdjwge1xuXHRzaXplPzogQWxpZ25tZW50TWF0cml4Q29udHJvbFByb3BzWyAnd2lkdGgnIF07XG5cdGRpc2FibGVQb2ludGVyRXZlbnRzPzogQWxpZ25tZW50TWF0cml4Q29udHJvbEljb25Qcm9wc1sgJ2Rpc2FibGVQb2ludGVyRXZlbnRzJyBdO1xufSA+YFxuXHQkeyByb290QmFzZSB9XG5cblx0Ym9yZGVyOiAxcHggc29saWQgdHJhbnNwYXJlbnQ7XG5cblx0JHsgKCBwcm9wcyApID0+XG5cdFx0cHJvcHMuZGlzYWJsZVBvaW50ZXJFdmVudHNcblx0XHRcdD8gY3NzYGBcblx0XHRcdDogY3NzYFxuXHRcdFx0XHRcdGN1cnNvcjogcG9pbnRlcjtcblx0XHRcdCAgYCB9XG5gO1xuXG5leHBvcnQgY29uc3QgR3JpZFJvdyA9IHN0eWxlZC5kaXZgXG5cdGdyaWQtY29sdW1uOiAxIC8gLTE7XG5cblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0ZGlzcGxheTogZ3JpZDtcblx0Z3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiByZXBlYXQoIDMsIDFmciApO1xuYDtcblxuLy8gQ2VsbFxuZXhwb3J0IGNvbnN0IENlbGwgPSBzdHlsZWQuc3BhbmBcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXG5cdGRpc3BsYXk6IGZsZXg7XG5cdGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cdGp1c3RpZnktY29udGVudDogY2VudGVyO1xuXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdG1hcmdpbjogMDtcblx0cGFkZGluZzogMDtcblxuXHRhcHBlYXJhbmNlOiBub25lO1xuXHRib3JkZXI6IG5vbmU7XG5cdG91dGxpbmU6IG5vbmU7XG5gO1xuXG5jb25zdCBQT0lOVF9TSVpFID0gNjtcbmV4cG9ydCBjb25zdCBQb2ludCA9IHN0eWxlZC5zcGFuYFxuXHRkaXNwbGF5OiBibG9jaztcblx0Y29udGFpbjogc3RyaWN0O1xuXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdHdpZHRoOiAkeyBQT0lOVF9TSVpFIH1weDtcblx0YXNwZWN0LXJhdGlvOiAxO1xuXG5cdG1hcmdpbjogYXV0bztcblxuXHRjb2xvcjogJHsgQ09MT1JTLnRoZW1lLmdyYXlbIDQwMCBdIH07XG5cblx0LyogVXNlIGJvcmRlciBpbnN0ZWFkIG9mIGJhY2tncm91bmQgY29sb3Igc28gdGhhdCB0aGUgcG9pbnQgc2hvd3Ncblx0aW4gV2luZG93cyBIaWdoIENvbnRyYXN0IE1vZGUgKi9cblx0Ym9yZGVyOiAkeyBQT0lOVF9TSVpFIC8gMiB9cHggc29saWQgY3VycmVudENvbG9yO1xuXG5cdC8qIEhpZ2hsaWdodCBhY3RpdmUgaXRlbSAqL1xuXHQkeyBDZWxsIH1bZGF0YS1hY3RpdmUtaXRlbV0gJiB7XG5cdFx0Y29sb3I6ICR7IENPTE9SUy5ncmF5WyA5MDAgXSB9O1xuXHRcdHRyYW5zZm9ybTogc2NhbGUoIGNhbGMoIDUgLyAzICkgKTtcblx0fVxuXG5cdC8qIEhvdmVyIHN0eWxlcyBmb3Igbm9uLWFjdGl2ZSBpdGVtcyAqL1xuXHQkeyBDZWxsIH06bm90KFtkYXRhLWFjdGl2ZS1pdGVtXSk6aG92ZXIgJiB7XG5cdFx0Y29sb3I6ICR7IENPTE9SUy50aGVtZS5hY2NlbnQgfTtcblx0fVxuXG5cdC8qIFNob3cgYW4gb3V0bGluZSBvbmx5IHdoZW4gaW50ZXJhY3Rpbmcgd2l0aCBrZXlib2FyZCAqL1xuXHQkeyBDZWxsIH1bZGF0YS1mb2N1cy12aXNpYmxlXSAmIHtcblx0XHRvdXRsaW5lOiAxcHggc29saWQgJHsgQ09MT1JTLnRoZW1lLmFjY2VudCB9O1xuXHRcdG91dGxpbmUtb2Zmc2V0OiAxcHg7XG5cdH1cblxuXHRAbWVkaWEgbm90ICggcHJlZmVycy1yZWR1Y2VkLW1vdGlvbiApIHtcblx0XHR0cmFuc2l0aW9uLXByb3BlcnR5OiBjb2xvciwgdHJhbnNmb3JtO1xuXHRcdHRyYW5zaXRpb24tZHVyYXRpb246IDEyMG1zO1xuXHRcdHRyYW5zaXRpb24tdGltaW5nLWZ1bmN0aW9uOiBsaW5lYXI7XG5cdH1cbmA7XG4iXX0= */") : _ref, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYWxpZ25tZW50LW1hdHJpeC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFtQ0ciLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9hbGlnbm1lbnQtbWF0cml4LWNvbnRyb2wvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMsIENPTkZJRyB9IGZyb20gJy4uL3V0aWxzJztcbmltcG9ydCB0eXBlIHtcblx0QWxpZ25tZW50TWF0cml4Q29udHJvbFByb3BzLFxuXHRBbGlnbm1lbnRNYXRyaXhDb250cm9sSWNvblByb3BzLFxufSBmcm9tICcuL3R5cGVzJztcblxuLy8gR3JpZCBzdHJ1Y3R1cmVcblxuY29uc3Qgcm9vdEJhc2UgPSAoIHsgc2l6ZSA9IDkyIH0gKSA9PiBjc3NgXG5cdGRpcmVjdGlvbjogbHRyO1xuXG5cdGRpc3BsYXk6IGdyaWQ7XG5cdGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KCAzLCAxZnIgKTtcblx0Z3JpZC10ZW1wbGF0ZS1yb3dzOiByZXBlYXQoIDMsIDFmciApO1xuXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdHdpZHRoOiAkeyBzaXplIH1weDtcblx0YXNwZWN0LXJhdGlvOiAxO1xuXG5cdGJvcmRlci1yYWRpdXM6ICR7IENPTkZJRy5yYWRpdXNNZWRpdW0gfTtcblx0b3V0bGluZTogbm9uZTtcbmA7XG5cbmV4cG9ydCBjb25zdCBHcmlkQ29udGFpbmVyID0gc3R5bGVkLmRpdjwge1xuXHRzaXplPzogQWxpZ25tZW50TWF0cml4Q29udHJvbFByb3BzWyAnd2lkdGgnIF07XG5cdGRpc2FibGVQb2ludGVyRXZlbnRzPzogQWxpZ25tZW50TWF0cml4Q29udHJvbEljb25Qcm9wc1sgJ2Rpc2FibGVQb2ludGVyRXZlbnRzJyBdO1xufSA+YFxuXHQkeyByb290QmFzZSB9XG5cblx0Ym9yZGVyOiAxcHggc29saWQgdHJhbnNwYXJlbnQ7XG5cblx0JHsgKCBwcm9wcyApID0+XG5cdFx0cHJvcHMuZGlzYWJsZVBvaW50ZXJFdmVudHNcblx0XHRcdD8gY3NzYGBcblx0XHRcdDogY3NzYFxuXHRcdFx0XHRcdGN1cnNvcjogcG9pbnRlcjtcblx0XHRcdCAgYCB9XG5gO1xuXG5leHBvcnQgY29uc3QgR3JpZFJvdyA9IHN0eWxlZC5kaXZgXG5cdGdyaWQtY29sdW1uOiAxIC8gLTE7XG5cblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0ZGlzcGxheTogZ3JpZDtcblx0Z3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiByZXBlYXQoIDMsIDFmciApO1xuYDtcblxuLy8gQ2VsbFxuZXhwb3J0IGNvbnN0IENlbGwgPSBzdHlsZWQuc3BhbmBcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXG5cdGRpc3BsYXk6IGZsZXg7XG5cdGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cdGp1c3RpZnktY29udGVudDogY2VudGVyO1xuXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdG1hcmdpbjogMDtcblx0cGFkZGluZzogMDtcblxuXHRhcHBlYXJhbmNlOiBub25lO1xuXHRib3JkZXI6IG5vbmU7XG5cdG91dGxpbmU6IG5vbmU7XG5gO1xuXG5jb25zdCBQT0lOVF9TSVpFID0gNjtcbmV4cG9ydCBjb25zdCBQb2ludCA9IHN0eWxlZC5zcGFuYFxuXHRkaXNwbGF5OiBibG9jaztcblx0Y29udGFpbjogc3RyaWN0O1xuXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdHdpZHRoOiAkeyBQT0lOVF9TSVpFIH1weDtcblx0YXNwZWN0LXJhdGlvOiAxO1xuXG5cdG1hcmdpbjogYXV0bztcblxuXHRjb2xvcjogJHsgQ09MT1JTLnRoZW1lLmdyYXlbIDQwMCBdIH07XG5cblx0LyogVXNlIGJvcmRlciBpbnN0ZWFkIG9mIGJhY2tncm91bmQgY29sb3Igc28gdGhhdCB0aGUgcG9pbnQgc2hvd3Ncblx0aW4gV2luZG93cyBIaWdoIENvbnRyYXN0IE1vZGUgKi9cblx0Ym9yZGVyOiAkeyBQT0lOVF9TSVpFIC8gMiB9cHggc29saWQgY3VycmVudENvbG9yO1xuXG5cdC8qIEhpZ2hsaWdodCBhY3RpdmUgaXRlbSAqL1xuXHQkeyBDZWxsIH1bZGF0YS1hY3RpdmUtaXRlbV0gJiB7XG5cdFx0Y29sb3I6ICR7IENPTE9SUy5ncmF5WyA5MDAgXSB9O1xuXHRcdHRyYW5zZm9ybTogc2NhbGUoIGNhbGMoIDUgLyAzICkgKTtcblx0fVxuXG5cdC8qIEhvdmVyIHN0eWxlcyBmb3Igbm9uLWFjdGl2ZSBpdGVtcyAqL1xuXHQkeyBDZWxsIH06bm90KFtkYXRhLWFjdGl2ZS1pdGVtXSk6aG92ZXIgJiB7XG5cdFx0Y29sb3I6ICR7IENPTE9SUy50aGVtZS5hY2NlbnQgfTtcblx0fVxuXG5cdC8qIFNob3cgYW4gb3V0bGluZSBvbmx5IHdoZW4gaW50ZXJhY3Rpbmcgd2l0aCBrZXlib2FyZCAqL1xuXHQkeyBDZWxsIH1bZGF0YS1mb2N1cy12aXNpYmxlXSAmIHtcblx0XHRvdXRsaW5lOiAxcHggc29saWQgJHsgQ09MT1JTLnRoZW1lLmFjY2VudCB9O1xuXHRcdG91dGxpbmUtb2Zmc2V0OiAxcHg7XG5cdH1cblxuXHRAbWVkaWEgbm90ICggcHJlZmVycy1yZWR1Y2VkLW1vdGlvbiApIHtcblx0XHR0cmFuc2l0aW9uLXByb3BlcnR5OiBjb2xvciwgdHJhbnNmb3JtO1xuXHRcdHRyYW5zaXRpb24tZHVyYXRpb246IDEyMG1zO1xuXHRcdHRyYW5zaXRpb24tdGltaW5nLWZ1bmN0aW9uOiBsaW5lYXI7XG5cdH1cbmA7XG4iXX0= */"));
+const GridRow = exports.GridRow = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
+  target: "e1r95csn2"
+} : {
+  target: "e1r95csn2",
+  label: "GridRow"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1fbxn64",
+  styles: "grid-column:1/-1;box-sizing:border-box;display:grid;grid-template-columns:repeat( 3, 1fr )"
+} : {
+  name: "1fbxn64",
+  styles: "grid-column:1/-1;box-sizing:border-box;display:grid;grid-template-columns:repeat( 3, 1fr )",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYWxpZ25tZW50LW1hdHJpeC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnRGlDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYWxpZ25tZW50LW1hdHJpeC1jb250cm9sL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09MT1JTLCBDT05GSUcgfSBmcm9tICcuLi91dGlscyc7XG5pbXBvcnQgdHlwZSB7XG5cdEFsaWdubWVudE1hdHJpeENvbnRyb2xQcm9wcyxcblx0QWxpZ25tZW50TWF0cml4Q29udHJvbEljb25Qcm9wcyxcbn0gZnJvbSAnLi90eXBlcyc7XG5cbi8vIEdyaWQgc3RydWN0dXJlXG5cbmNvbnN0IHJvb3RCYXNlID0gKCB7IHNpemUgPSA5MiB9ICkgPT4gY3NzYFxuXHRkaXJlY3Rpb246IGx0cjtcblxuXHRkaXNwbGF5OiBncmlkO1xuXHRncmlkLXRlbXBsYXRlLWNvbHVtbnM6IHJlcGVhdCggMywgMWZyICk7XG5cdGdyaWQtdGVtcGxhdGUtcm93czogcmVwZWF0KCAzLCAxZnIgKTtcblxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHR3aWR0aDogJHsgc2l6ZSB9cHg7XG5cdGFzcGVjdC1yYXRpbzogMTtcblxuXHRib3JkZXItcmFkaXVzOiAkeyBDT05GSUcucmFkaXVzTWVkaXVtIH07XG5cdG91dGxpbmU6IG5vbmU7XG5gO1xuXG5leHBvcnQgY29uc3QgR3JpZENvbnRhaW5lciA9IHN0eWxlZC5kaXY8IHtcblx0c2l6ZT86IEFsaWdubWVudE1hdHJpeENvbnRyb2xQcm9wc1sgJ3dpZHRoJyBdO1xuXHRkaXNhYmxlUG9pbnRlckV2ZW50cz86IEFsaWdubWVudE1hdHJpeENvbnRyb2xJY29uUHJvcHNbICdkaXNhYmxlUG9pbnRlckV2ZW50cycgXTtcbn0gPmBcblx0JHsgcm9vdEJhc2UgfVxuXG5cdGJvcmRlcjogMXB4IHNvbGlkIHRyYW5zcGFyZW50O1xuXG5cdCR7ICggcHJvcHMgKSA9PlxuXHRcdHByb3BzLmRpc2FibGVQb2ludGVyRXZlbnRzXG5cdFx0XHQ/IGNzc2BgXG5cdFx0XHQ6IGNzc2Bcblx0XHRcdFx0XHRjdXJzb3I6IHBvaW50ZXI7XG5cdFx0XHQgIGAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IEdyaWRSb3cgPSBzdHlsZWQuZGl2YFxuXHRncmlkLWNvbHVtbjogMSAvIC0xO1xuXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGRpc3BsYXk6IGdyaWQ7XG5cdGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KCAzLCAxZnIgKTtcbmA7XG5cbi8vIENlbGxcbmV4cG9ydCBjb25zdCBDZWxsID0gc3R5bGVkLnNwYW5gXG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblxuXHRkaXNwbGF5OiBmbGV4O1xuXHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcblxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRtYXJnaW46IDA7XG5cdHBhZGRpbmc6IDA7XG5cblx0YXBwZWFyYW5jZTogbm9uZTtcblx0Ym9yZGVyOiBub25lO1xuXHRvdXRsaW5lOiBub25lO1xuYDtcblxuY29uc3QgUE9JTlRfU0laRSA9IDY7XG5leHBvcnQgY29uc3QgUG9pbnQgPSBzdHlsZWQuc3BhbmBcblx0ZGlzcGxheTogYmxvY2s7XG5cdGNvbnRhaW46IHN0cmljdDtcblxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHR3aWR0aDogJHsgUE9JTlRfU0laRSB9cHg7XG5cdGFzcGVjdC1yYXRpbzogMTtcblxuXHRtYXJnaW46IGF1dG87XG5cblx0Y29sb3I6ICR7IENPTE9SUy50aGVtZS5ncmF5WyA0MDAgXSB9O1xuXG5cdC8qIFVzZSBib3JkZXIgaW5zdGVhZCBvZiBiYWNrZ3JvdW5kIGNvbG9yIHNvIHRoYXQgdGhlIHBvaW50IHNob3dzXG5cdGluIFdpbmRvd3MgSGlnaCBDb250cmFzdCBNb2RlICovXG5cdGJvcmRlcjogJHsgUE9JTlRfU0laRSAvIDIgfXB4IHNvbGlkIGN1cnJlbnRDb2xvcjtcblxuXHQvKiBIaWdobGlnaHQgYWN0aXZlIGl0ZW0gKi9cblx0JHsgQ2VsbCB9W2RhdGEtYWN0aXZlLWl0ZW1dICYge1xuXHRcdGNvbG9yOiAkeyBDT0xPUlMuZ3JheVsgOTAwIF0gfTtcblx0XHR0cmFuc2Zvcm06IHNjYWxlKCBjYWxjKCA1IC8gMyApICk7XG5cdH1cblxuXHQvKiBIb3ZlciBzdHlsZXMgZm9yIG5vbi1hY3RpdmUgaXRlbXMgKi9cblx0JHsgQ2VsbCB9Om5vdChbZGF0YS1hY3RpdmUtaXRlbV0pOmhvdmVyICYge1xuXHRcdGNvbG9yOiAkeyBDT0xPUlMudGhlbWUuYWNjZW50IH07XG5cdH1cblxuXHQvKiBTaG93IGFuIG91dGxpbmUgb25seSB3aGVuIGludGVyYWN0aW5nIHdpdGgga2V5Ym9hcmQgKi9cblx0JHsgQ2VsbCB9W2RhdGEtZm9jdXMtdmlzaWJsZV0gJiB7XG5cdFx0b3V0bGluZTogMXB4IHNvbGlkICR7IENPTE9SUy50aGVtZS5hY2NlbnQgfTtcblx0XHRvdXRsaW5lLW9mZnNldDogMXB4O1xuXHR9XG5cblx0QG1lZGlhIG5vdCAoIHByZWZlcnMtcmVkdWNlZC1tb3Rpb24gKSB7XG5cdFx0dHJhbnNpdGlvbi1wcm9wZXJ0eTogY29sb3IsIHRyYW5zZm9ybTtcblx0XHR0cmFuc2l0aW9uLWR1cmF0aW9uOiAxMjBtcztcblx0XHR0cmFuc2l0aW9uLXRpbWluZy1mdW5jdGlvbjogbGluZWFyO1xuXHR9XG5gO1xuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+
+// Cell
+const Cell = exports.Cell = /*#__PURE__*/(0, _base.default)("span", process.env.NODE_ENV === "production" ? {
+  target: "e1r95csn1"
+} : {
+  target: "e1r95csn1",
+  label: "Cell"
+})(process.env.NODE_ENV === "production" ? {
+  name: "e2kws5",
+  styles: "position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding:0;appearance:none;border:none;outline:none"
+} : {
+  name: "e2kws5",
+  styles: "position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding:0;appearance:none;border:none;outline:none",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYWxpZ25tZW50LW1hdHJpeC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF5RCtCIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYWxpZ25tZW50LW1hdHJpeC1jb250cm9sL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09MT1JTLCBDT05GSUcgfSBmcm9tICcuLi91dGlscyc7XG5pbXBvcnQgdHlwZSB7XG5cdEFsaWdubWVudE1hdHJpeENvbnRyb2xQcm9wcyxcblx0QWxpZ25tZW50TWF0cml4Q29udHJvbEljb25Qcm9wcyxcbn0gZnJvbSAnLi90eXBlcyc7XG5cbi8vIEdyaWQgc3RydWN0dXJlXG5cbmNvbnN0IHJvb3RCYXNlID0gKCB7IHNpemUgPSA5MiB9ICkgPT4gY3NzYFxuXHRkaXJlY3Rpb246IGx0cjtcblxuXHRkaXNwbGF5OiBncmlkO1xuXHRncmlkLXRlbXBsYXRlLWNvbHVtbnM6IHJlcGVhdCggMywgMWZyICk7XG5cdGdyaWQtdGVtcGxhdGUtcm93czogcmVwZWF0KCAzLCAxZnIgKTtcblxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHR3aWR0aDogJHsgc2l6ZSB9cHg7XG5cdGFzcGVjdC1yYXRpbzogMTtcblxuXHRib3JkZXItcmFkaXVzOiAkeyBDT05GSUcucmFkaXVzTWVkaXVtIH07XG5cdG91dGxpbmU6IG5vbmU7XG5gO1xuXG5leHBvcnQgY29uc3QgR3JpZENvbnRhaW5lciA9IHN0eWxlZC5kaXY8IHtcblx0c2l6ZT86IEFsaWdubWVudE1hdHJpeENvbnRyb2xQcm9wc1sgJ3dpZHRoJyBdO1xuXHRkaXNhYmxlUG9pbnRlckV2ZW50cz86IEFsaWdubWVudE1hdHJpeENvbnRyb2xJY29uUHJvcHNbICdkaXNhYmxlUG9pbnRlckV2ZW50cycgXTtcbn0gPmBcblx0JHsgcm9vdEJhc2UgfVxuXG5cdGJvcmRlcjogMXB4IHNvbGlkIHRyYW5zcGFyZW50O1xuXG5cdCR7ICggcHJvcHMgKSA9PlxuXHRcdHByb3BzLmRpc2FibGVQb2ludGVyRXZlbnRzXG5cdFx0XHQ/IGNzc2BgXG5cdFx0XHQ6IGNzc2Bcblx0XHRcdFx0XHRjdXJzb3I6IHBvaW50ZXI7XG5cdFx0XHQgIGAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IEdyaWRSb3cgPSBzdHlsZWQuZGl2YFxuXHRncmlkLWNvbHVtbjogMSAvIC0xO1xuXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGRpc3BsYXk6IGdyaWQ7XG5cdGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KCAzLCAxZnIgKTtcbmA7XG5cbi8vIENlbGxcbmV4cG9ydCBjb25zdCBDZWxsID0gc3R5bGVkLnNwYW5gXG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblxuXHRkaXNwbGF5OiBmbGV4O1xuXHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcblxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRtYXJnaW46IDA7XG5cdHBhZGRpbmc6IDA7XG5cblx0YXBwZWFyYW5jZTogbm9uZTtcblx0Ym9yZGVyOiBub25lO1xuXHRvdXRsaW5lOiBub25lO1xuYDtcblxuY29uc3QgUE9JTlRfU0laRSA9IDY7XG5leHBvcnQgY29uc3QgUG9pbnQgPSBzdHlsZWQuc3BhbmBcblx0ZGlzcGxheTogYmxvY2s7XG5cdGNvbnRhaW46IHN0cmljdDtcblxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHR3aWR0aDogJHsgUE9JTlRfU0laRSB9cHg7XG5cdGFzcGVjdC1yYXRpbzogMTtcblxuXHRtYXJnaW46IGF1dG87XG5cblx0Y29sb3I6ICR7IENPTE9SUy50aGVtZS5ncmF5WyA0MDAgXSB9O1xuXG5cdC8qIFVzZSBib3JkZXIgaW5zdGVhZCBvZiBiYWNrZ3JvdW5kIGNvbG9yIHNvIHRoYXQgdGhlIHBvaW50IHNob3dzXG5cdGluIFdpbmRvd3MgSGlnaCBDb250cmFzdCBNb2RlICovXG5cdGJvcmRlcjogJHsgUE9JTlRfU0laRSAvIDIgfXB4IHNvbGlkIGN1cnJlbnRDb2xvcjtcblxuXHQvKiBIaWdobGlnaHQgYWN0aXZlIGl0ZW0gKi9cblx0JHsgQ2VsbCB9W2RhdGEtYWN0aXZlLWl0ZW1dICYge1xuXHRcdGNvbG9yOiAkeyBDT0xPUlMuZ3JheVsgOTAwIF0gfTtcblx0XHR0cmFuc2Zvcm06IHNjYWxlKCBjYWxjKCA1IC8gMyApICk7XG5cdH1cblxuXHQvKiBIb3ZlciBzdHlsZXMgZm9yIG5vbi1hY3RpdmUgaXRlbXMgKi9cblx0JHsgQ2VsbCB9Om5vdChbZGF0YS1hY3RpdmUtaXRlbV0pOmhvdmVyICYge1xuXHRcdGNvbG9yOiAkeyBDT0xPUlMudGhlbWUuYWNjZW50IH07XG5cdH1cblxuXHQvKiBTaG93IGFuIG91dGxpbmUgb25seSB3aGVuIGludGVyYWN0aW5nIHdpdGgga2V5Ym9hcmQgKi9cblx0JHsgQ2VsbCB9W2RhdGEtZm9jdXMtdmlzaWJsZV0gJiB7XG5cdFx0b3V0bGluZTogMXB4IHNvbGlkICR7IENPTE9SUy50aGVtZS5hY2NlbnQgfTtcblx0XHRvdXRsaW5lLW9mZnNldDogMXB4O1xuXHR9XG5cblx0QG1lZGlhIG5vdCAoIHByZWZlcnMtcmVkdWNlZC1tb3Rpb24gKSB7XG5cdFx0dHJhbnNpdGlvbi1wcm9wZXJ0eTogY29sb3IsIHRyYW5zZm9ybTtcblx0XHR0cmFuc2l0aW9uLWR1cmF0aW9uOiAxMjBtcztcblx0XHR0cmFuc2l0aW9uLXRpbWluZy1mdW5jdGlvbjogbGluZWFyO1xuXHR9XG5gO1xuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const POINT_SIZE = 6;
+const Point = exports.Point = /*#__PURE__*/(0, _base.default)("span", process.env.NODE_ENV === "production" ? {
+  target: "e1r95csn0"
+} : {
+  target: "e1r95csn0",
+  label: "Point"
+})("display:block;contain:strict;box-sizing:border-box;width:", POINT_SIZE, "px;aspect-ratio:1;margin:auto;color:", _utils.COLORS.theme.gray[400], ";border:", POINT_SIZE / 2, "px solid currentColor;", Cell, "[data-active-item] &{color:", _utils.COLORS.gray[900], ";transform:scale( calc( 5 / 3 ) );}", Cell, ":not([data-active-item]):hover &{color:", _utils.COLORS.theme.accent, ";}", Cell, "[data-focus-visible] &{outline:1px solid ", _utils.COLORS.theme.accent, ";outline-offset:1px;}@media not ( prefers-reduced-motion ){transition-property:color,transform;transition-duration:120ms;transition-timing-function:linear;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYWxpZ25tZW50LW1hdHJpeC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEwRWdDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYWxpZ25tZW50LW1hdHJpeC1jb250cm9sL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09MT1JTLCBDT05GSUcgfSBmcm9tICcuLi91dGlscyc7XG5pbXBvcnQgdHlwZSB7XG5cdEFsaWdubWVudE1hdHJpeENvbnRyb2xQcm9wcyxcblx0QWxpZ25tZW50TWF0cml4Q29udHJvbEljb25Qcm9wcyxcbn0gZnJvbSAnLi90eXBlcyc7XG5cbi8vIEdyaWQgc3RydWN0dXJlXG5cbmNvbnN0IHJvb3RCYXNlID0gKCB7IHNpemUgPSA5MiB9ICkgPT4gY3NzYFxuXHRkaXJlY3Rpb246IGx0cjtcblxuXHRkaXNwbGF5OiBncmlkO1xuXHRncmlkLXRlbXBsYXRlLWNvbHVtbnM6IHJlcGVhdCggMywgMWZyICk7XG5cdGdyaWQtdGVtcGxhdGUtcm93czogcmVwZWF0KCAzLCAxZnIgKTtcblxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHR3aWR0aDogJHsgc2l6ZSB9cHg7XG5cdGFzcGVjdC1yYXRpbzogMTtcblxuXHRib3JkZXItcmFkaXVzOiAkeyBDT05GSUcucmFkaXVzTWVkaXVtIH07XG5cdG91dGxpbmU6IG5vbmU7XG5gO1xuXG5leHBvcnQgY29uc3QgR3JpZENvbnRhaW5lciA9IHN0eWxlZC5kaXY8IHtcblx0c2l6ZT86IEFsaWdubWVudE1hdHJpeENvbnRyb2xQcm9wc1sgJ3dpZHRoJyBdO1xuXHRkaXNhYmxlUG9pbnRlckV2ZW50cz86IEFsaWdubWVudE1hdHJpeENvbnRyb2xJY29uUHJvcHNbICdkaXNhYmxlUG9pbnRlckV2ZW50cycgXTtcbn0gPmBcblx0JHsgcm9vdEJhc2UgfVxuXG5cdGJvcmRlcjogMXB4IHNvbGlkIHRyYW5zcGFyZW50O1xuXG5cdCR7ICggcHJvcHMgKSA9PlxuXHRcdHByb3BzLmRpc2FibGVQb2ludGVyRXZlbnRzXG5cdFx0XHQ/IGNzc2BgXG5cdFx0XHQ6IGNzc2Bcblx0XHRcdFx0XHRjdXJzb3I6IHBvaW50ZXI7XG5cdFx0XHQgIGAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IEdyaWRSb3cgPSBzdHlsZWQuZGl2YFxuXHRncmlkLWNvbHVtbjogMSAvIC0xO1xuXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGRpc3BsYXk6IGdyaWQ7XG5cdGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KCAzLCAxZnIgKTtcbmA7XG5cbi8vIENlbGxcbmV4cG9ydCBjb25zdCBDZWxsID0gc3R5bGVkLnNwYW5gXG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblxuXHRkaXNwbGF5OiBmbGV4O1xuXHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcblxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRtYXJnaW46IDA7XG5cdHBhZGRpbmc6IDA7XG5cblx0YXBwZWFyYW5jZTogbm9uZTtcblx0Ym9yZGVyOiBub25lO1xuXHRvdXRsaW5lOiBub25lO1xuYDtcblxuY29uc3QgUE9JTlRfU0laRSA9IDY7XG5leHBvcnQgY29uc3QgUG9pbnQgPSBzdHlsZWQuc3BhbmBcblx0ZGlzcGxheTogYmxvY2s7XG5cdGNvbnRhaW46IHN0cmljdDtcblxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHR3aWR0aDogJHsgUE9JTlRfU0laRSB9cHg7XG5cdGFzcGVjdC1yYXRpbzogMTtcblxuXHRtYXJnaW46IGF1dG87XG5cblx0Y29sb3I6ICR7IENPTE9SUy50aGVtZS5ncmF5WyA0MDAgXSB9O1xuXG5cdC8qIFVzZSBib3JkZXIgaW5zdGVhZCBvZiBiYWNrZ3JvdW5kIGNvbG9yIHNvIHRoYXQgdGhlIHBvaW50IHNob3dzXG5cdGluIFdpbmRvd3MgSGlnaCBDb250cmFzdCBNb2RlICovXG5cdGJvcmRlcjogJHsgUE9JTlRfU0laRSAvIDIgfXB4IHNvbGlkIGN1cnJlbnRDb2xvcjtcblxuXHQvKiBIaWdobGlnaHQgYWN0aXZlIGl0ZW0gKi9cblx0JHsgQ2VsbCB9W2RhdGEtYWN0aXZlLWl0ZW1dICYge1xuXHRcdGNvbG9yOiAkeyBDT0xPUlMuZ3JheVsgOTAwIF0gfTtcblx0XHR0cmFuc2Zvcm06IHNjYWxlKCBjYWxjKCA1IC8gMyApICk7XG5cdH1cblxuXHQvKiBIb3ZlciBzdHlsZXMgZm9yIG5vbi1hY3RpdmUgaXRlbXMgKi9cblx0JHsgQ2VsbCB9Om5vdChbZGF0YS1hY3RpdmUtaXRlbV0pOmhvdmVyICYge1xuXHRcdGNvbG9yOiAkeyBDT0xPUlMudGhlbWUuYWNjZW50IH07XG5cdH1cblxuXHQvKiBTaG93IGFuIG91dGxpbmUgb25seSB3aGVuIGludGVyYWN0aW5nIHdpdGgga2V5Ym9hcmQgKi9cblx0JHsgQ2VsbCB9W2RhdGEtZm9jdXMtdmlzaWJsZV0gJiB7XG5cdFx0b3V0bGluZTogMXB4IHNvbGlkICR7IENPTE9SUy50aGVtZS5hY2NlbnQgfTtcblx0XHRvdXRsaW5lLW9mZnNldDogMXB4O1xuXHR9XG5cblx0QG1lZGlhIG5vdCAoIHByZWZlcnMtcmVkdWNlZC1tb3Rpb24gKSB7XG5cdFx0dHJhbnNpdGlvbi1wcm9wZXJ0eTogY29sb3IsIHRyYW5zZm9ybTtcblx0XHR0cmFuc2l0aW9uLWR1cmF0aW9uOiAxMjBtcztcblx0XHR0cmFuc2l0aW9uLXRpbWluZy1mdW5jdGlvbjogbGluZWFyO1xuXHR9XG5gO1xuIl19 */"));
+//# sourceMappingURL=styles.js.map

package/build/alignment-matrix-control/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_utils","_EMOTION_STRINGIFIED_CSS_ERROR__","rootBase","size","css","CONFIG","radiusMedium","process","env","NODE_ENV","_ref","name","styles","map","toString","GridContainer","exports","_base","default","target","label","props","disablePointerEvents","GridRow","Cell","POINT_SIZE","Point","COLORS","theme","gray","accent"],"sources":["@wordpress/components/src/alignment-matrix-control/styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport { COLORS, CONFIG } from '../utils';\nimport type {\n\tAlignmentMatrixControlProps,\n\tAlignmentMatrixControlIconProps,\n} from './types';\n\n// Grid structure\n\nconst rootBase = ( { size = 92 } ) => css`\n\tdirection: ltr;\n\n\tdisplay: grid;\n\tgrid-template-columns: repeat( 3, 1fr );\n\tgrid-template-rows: repeat( 3, 1fr );\n\n\tbox-sizing: border-box;\n\twidth: ${ size }px;\n\taspect-ratio: 1;\n\n\tborder-radius: ${ CONFIG.radiusMedium };\n\toutline: none;\n`;\n\nexport const GridContainer = styled.div< {\n\tsize?: AlignmentMatrixControlProps[ 'width' ];\n\tdisablePointerEvents?: AlignmentMatrixControlIconProps[ 'disablePointerEvents' ];\n} >`\n\t${ rootBase }\n\n\tborder: 1px solid transparent;\n\n\t${ ( props ) =>\n\t\tprops.disablePointerEvents\n\t\t\t? css``\n\t\t\t: css`\n\t\t\t\t\tcursor: pointer;\n\t\t\t  ` }\n`;\n\nexport const GridRow = styled.div`\n\tgrid-column: 1 / -1;\n\n\tbox-sizing: border-box;\n\tdisplay: grid;\n\tgrid-template-columns: repeat( 3, 1fr );\n`;\n\n// Cell\nexport const Cell = styled.span`\n\tposition: relative;\n\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\n\tbox-sizing: border-box;\n\tmargin: 0;\n\tpadding: 0;\n\n\tappearance: none;\n\tborder: none;\n\toutline: none;\n`;\n\nconst POINT_SIZE = 6;\nexport const Point = styled.span`\n\tdisplay: block;\n\tcontain: strict;\n\n\tbox-sizing: border-box;\n\twidth: ${ POINT_SIZE }px;\n\taspect-ratio: 1;\n\n\tmargin: auto;\n\n\tcolor: ${ COLORS.theme.gray[ 400 ] };\n\n\t/* Use border instead of background color so that the point shows\n\tin Windows High Contrast Mode */\n\tborder: ${ POINT_SIZE / 2 }px solid currentColor;\n\n\t/* Highlight active item */\n\t${ Cell }[data-active-item] & {\n\t\tcolor: ${ COLORS.gray[ 900 ] };\n\t\ttransform: scale( calc( 5 / 3 ) );\n\t}\n\n\t/* Hover styles for non-active items */\n\t${ Cell }:not([data-active-item]):hover & {\n\t\tcolor: ${ COLORS.theme.accent };\n\t}\n\n\t/* Show an outline only when interacting with keyboard */\n\t${ Cell }[data-focus-visible] & {\n\t\toutline: 1px solid ${ COLORS.theme.accent };\n\t\toutline-offset: 1px;\n\t}\n\n\t@media not ( prefers-reduced-motion ) {\n\t\ttransition-property: color, transform;\n\t\ttransition-duration: 120ms;\n\t\ttransition-timing-function: linear;\n\t}\n`;\n"],"mappings":";;;;;;;;AAIA,IAAAA,MAAA,GAAAC,OAAA;AAKA,IAAAC,MAAA,GAAAD,OAAA;AAA0C,SAAAE,iCAAA,gPAT1C;AACA;AACA,GAFA,CAMA;AACA;AACA;AAOA;;AAEA,MAAMC,QAAQ,GAAGA,CAAE;EAAEC,IAAI,GAAG;AAAG,CAAC,sBAAMC,UAAG,wIAQ9BD,IAAI,sCAGIE,aAAM,CAACC,YAAY,sBAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,8CAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA,2jHAErC;AAAC,IAAAC,IAAA,GAAAH,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAE,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAb;AAAA;AAEK,MAAMc,aAAa,GAAAC,OAAA,CAAAD,aAAA,oBAAAE,KAAA,CAAAC,OAAA,SAAAX,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAU,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,GAItBlB,QAAQ,oCAINmB,KAAK,IACTA,KAAK,CAACC,oBAAoB,oBACvBlB,UAAG,EAAAG,OAAA,CAAAC,GAAA,CAAAC,QAAA,kDAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA,8jHAAAC,IAGF,SAAAH,OAAA,CAAAC,GAAA,CAAAC,QAAA,4jHACL;AAEM,MAAMc,OAAO,GAAAP,OAAA,CAAAO,OAAA,oBAAAN,KAAA,CAAAC,OAAA,SAAAX,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAU,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,GAAAb,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAE,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAb;AAAA,EAMnB;;AAED;AACO,MAAMuB,IAAI,GAAAR,OAAA,CAAAQ,IAAA,oBAAAP,KAAA,CAAAC,OAAA,UAAAX,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAU,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,GAAAb,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAE,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAb;AAAA,EAchB;AAED,MAAMwB,UAAU,GAAG,CAAC;AACb,MAAMC,KAAK,GAAAV,OAAA,CAAAU,KAAA,oBAAAT,KAAA,CAAAC,OAAA,UAAAX,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAU,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,gEAKPK,UAAU,0CAKVE,aAAM,CAACC,KAAK,CAACC,IAAI,CAAE,GAAG,CAAE,cAIvBJ,UAAU,GAAG,CAAC,4BAGtBD,IAAI,iCACIG,aAAM,CAACE,IAAI,CAAE,GAAG,CAAE,yCAK1BL,IAAI,6CACIG,aAAM,CAACC,KAAK,CAACE,MAAM,QAI3BN,IAAI,+CACgBG,aAAM,CAACC,KAAK,CAACE,MAAM,oKAAAvB,OAAA,CAAAC,GAAA,CAAAC,QAAA,4jHAS1C","ignoreList":[]}

package/build/alignment-matrix-control/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/alignment-matrix-control/types.ts"],"sourcesContent":["export type AlignmentMatrixControlValue =\n\t| 'top left'\n\t| 'top center'\n\t| 'top right'\n\t| 'center left'\n\t| 'center'\n\t| 'center center'\n\t| 'center right'\n\t| 'bottom left'\n\t| 'bottom center'\n\t| 'bottom right';\n\nexport type AlignmentMatrixControlProps = {\n\t/**\n\t * Accessible label. If provided, sets the `aria-label` attribute of the\n\t * underlying `grid` widget.\n\t *\n\t * @default 'Alignment Matrix Control'\n\t */\n\tlabel?: string;\n\t/**\n\t * If provided, sets the default alignment value.\n\t *\n\t * @default 'center center'\n\t */\n\tdefaultValue?: AlignmentMatrixControlValue;\n\t/**\n\t * The current alignment value.\n\t */\n\tvalue?: AlignmentMatrixControlValue;\n\t/**\n\t * A function that receives the updated alignment value.\n\t */\n\tonChange?: ( newValue: AlignmentMatrixControlValue ) => void;\n\t/**\n\t * If provided, sets the width of the control.\n\t *\n\t * @default 92\n\t */\n\twidth?: number;\n};\n\nexport type AlignmentMatrixControlIconProps = Pick<\n\tAlignmentMatrixControlProps,\n\t'value'\n> & {\n\tdisablePointerEvents?: boolean;\n\tsize?: number;\n};\n\nexport type AlignmentMatrixControlCellProps = {\n\tisActive?: boolean;\n\tvalue: NonNullable< AlignmentMatrixControlProps[ 'value' ] >;\n};\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["@wordpress/components/src/alignment-matrix-control/types.ts"],"sourcesContent":["export type AlignmentMatrixControlValue =\n\t| 'top left'\n\t| 'top center'\n\t| 'top right'\n\t| 'center left'\n\t| 'center'\n\t| 'center center'\n\t| 'center right'\n\t| 'bottom left'\n\t| 'bottom center'\n\t| 'bottom right';\n\nexport type AlignmentMatrixControlProps = {\n\t/**\n\t * Accessible label. If provided, sets the `aria-label` attribute of the\n\t * underlying `grid` widget.\n\t *\n\t * @default 'Alignment Matrix Control'\n\t */\n\tlabel?: string;\n\t/**\n\t * If provided, sets the default alignment value.\n\t *\n\t * @default 'center center'\n\t */\n\tdefaultValue?: AlignmentMatrixControlValue;\n\t/**\n\t * The current alignment value.\n\t */\n\tvalue?: AlignmentMatrixControlValue;\n\t/**\n\t * A function that receives the updated alignment value.\n\t */\n\tonChange?: ( newValue: AlignmentMatrixControlValue ) => void;\n\t/**\n\t * If provided, sets the width of the control.\n\t *\n\t * @default 92\n\t */\n\twidth?: number;\n};\n\nexport type AlignmentMatrixControlIconProps = Pick<\n\tAlignmentMatrixControlProps,\n\t'value'\n> & {\n\t/**\n\t * If `true`, disables pointer events on the icon.\n\t * @default true\n\t */\n\tdisablePointerEvents?: boolean;\n\t/**\n\t * _Note: this prop is deprecated. Use the `size` prop on the parent `Icon`\n\t * component instead_\n\t *\n\t * The size of the icon.\n\t * @ignore\n\t * @default 24\n\t */\n\tsize?: number;\n};\n\nexport type AlignmentMatrixControlCellProps = {\n\tvalue: NonNullable< AlignmentMatrixControlProps[ 'value' ] >;\n};\n"],"mappings":"","ignoreList":[]}

package/build/angle-picker-control/angle-circle.js

@@ -22,14 +22,14 @@ function AngleCircle({
   ...props
 }) {
   const angleCircleRef = (0, _element.useRef)(null);
-  const angleCircleCenter = (0, _element.useRef)();
-  const previousCursorValue = (0, _element.useRef)();
+  const angleCircleCenterRef = (0, _element.useRef)();
+  const previousCursorValueRef = (0, _element.useRef)();
   const setAngleCircleCenter = () => {
     if (angleCircleRef.current === null) {
       return;
     }
     const rect = angleCircleRef.current.getBoundingClientRect();
-    angleCircleCenter.current = {
+    angleCircleCenterRef.current = {
       x: rect.x + rect.width / 2,
       y: rect.y + rect.height / 2
     };
@@ -44,11 +44,11 @@ function AngleCircle({
     event.preventDefault();
     // Input control needs to lose focus and by preventDefault above, it doesn't.
     event.target?.focus();
-    if (angleCircleCenter.current !== undefined && onChange !== undefined) {
+    if (angleCircleCenterRef.current !== undefined && onChange !== undefined) {
       const {
         x: centerX,
         y: centerY
-      } = angleCircleCenter.current;
+      } = angleCircleCenterRef.current;
       onChange(getAngle(centerX, centerY, event.clientX, event.clientY));
     }
   };
@@ -65,13 +65,13 @@ function AngleCircle({
   });
   (0, _element.useEffect)(() => {
     if (isDragging) {
-      if (previousCursorValue.current === undefined) {
-        previousCursorValue.current = document.body.style.cursor;
+      if (previousCursorValueRef.current === undefined) {
+        previousCursorValueRef.current = document.body.style.cursor;
       }
       document.body.style.cursor = 'grabbing';
     } else {
-      document.body.style.cursor = previousCursorValue.current || '';
-      previousCursorValue.current = undefined;
+      document.body.style.cursor = previousCursorValueRef.current || '';
+      previousCursorValueRef.current = undefined;
     }
   }, [isDragging]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_anglePickerControlStyles.CircleRoot, {

package/build/angle-picker-control/angle-circle.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_compose","_anglePickerControlStyles","_jsxRuntime","AngleCircle","value","onChange","props","angleCircleRef","useRef","angleCircleCenter","previousCursorValue","setAngleCircleCenter","current","rect","getBoundingClientRect","x","width","y","height","changeAngleToPosition","event","undefined","preventDefault","target","focus","centerX","centerY","getAngle","clientX","clientY","startDrag","isDragging","useDragging","onDragStart","onDragMove","onDragEnd","useEffect","document","body","style","cursor","jsx","CircleRoot","ref","onMouseDown","className","children","CircleIndicatorWrapper","transform","tabIndex","CircleIndicator","pointX","pointY","angleInRadians","Math","atan2","angleInDeg","round","PI","_default","exports","default"],"sources":["@wordpress/components/src/angle-picker-control/angle-circle.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { __experimentalUseDragging as useDragging } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport {\n\tCircleRoot,\n\tCircleIndicatorWrapper,\n\tCircleIndicator,\n} from './styles/angle-picker-control-styles';\n\nimport type { WordPressComponentProps } from '../context';\nimport type { AngleCircleProps } from './types';\n\ntype UseDraggingArgumentType = Parameters< typeof useDragging >[ 0 ];\ntype UseDraggingCallbackEvent =\n\t| Parameters< UseDraggingArgumentType[ 'onDragStart' ] >[ 0 ]\n\t| Parameters< UseDraggingArgumentType[ 'onDragMove' ] >[ 0 ]\n\t| Parameters< UseDraggingArgumentType[ 'onDragEnd' ] >[ 0 ];\n\nfunction AngleCircle( {\n\tvalue,\n\tonChange,\n\t...props\n}: WordPressComponentProps< AngleCircleProps, 'div' > ) {\n\tconst angleCircleRef = useRef< HTMLDivElement | null >( null );\n\tconst angleCircleCenter = useRef< { x: number; y: number } | undefined >();\n\tconst previousCursorValue = useRef< CSSStyleDeclaration[ 'cursor' ] >();\n\n\tconst setAngleCircleCenter = () => {\n\t\tif ( angleCircleRef.current === null ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst rect = angleCircleRef.current.getBoundingClientRect();\n\t\tangleCircleCenter.current = {\n\t\t\tx: rect.x + rect.width / 2,\n\t\t\ty: rect.y + rect.height / 2,\n\t\t};\n\t};\n\n\tconst changeAngleToPosition = ( event: UseDraggingCallbackEvent ) => {\n\t\tif ( event === undefined ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Prevent (drag) mouse events from selecting and accidentally\n\t\t// triggering actions from other elements.\n\t\tevent.preventDefault();\n\t\t// Input control needs to lose focus and by preventDefault above, it doesn't.\n\t\t( event.target as HTMLDivElement | null )?.focus();\n\n\t\tif (\n\t\t\tangleCircleCenter.current !== undefined &&\n\t\t\tonChange !== undefined\n\t\t) {\n\t\t\tconst { x: centerX, y: centerY } = angleCircleCenter.current;\n\t\t\tonChange(\n\t\t\t\tgetAngle( centerX, centerY, event.clientX, event.clientY )\n\t\t\t);\n\t\t}\n\t};\n\n\tconst { startDrag, isDragging } = useDragging( {\n\t\tonDragStart: ( event ) => {\n\t\t\tsetAngleCircleCenter();\n\t\t\tchangeAngleToPosition( event );\n\t\t},\n\t\tonDragMove: changeAngleToPosition,\n\t\tonDragEnd: changeAngleToPosition,\n\t} );\n\n\tuseEffect( () => {\n\t\tif ( isDragging ) {\n\t\t\tif ( previousCursorValue.current === undefined ) {\n\t\t\t\tpreviousCursorValue.current = document.body.style.cursor;\n\t\t\t}\n\t\t\tdocument.body.style.cursor = 'grabbing';\n\t\t} else {\n\t\t\tdocument.body.style.cursor = previousCursorValue.current || '';\n\t\t\tpreviousCursorValue.current = undefined;\n\t\t}\n\t}, [ isDragging ] );\n\n\treturn (\n\t\t<CircleRoot\n\t\t\tref={ angleCircleRef }\n\t\t\tonMouseDown={ startDrag }\n\t\t\tclassName=\"components-angle-picker-control__angle-circle\"\n\t\t\t{ ...props }\n\t\t>\n\t\t\t<CircleIndicatorWrapper\n\t\t\t\tstyle={\n\t\t\t\t\tvalue ? { transform: `rotate(${ value }deg)` } : undefined\n\t\t\t\t}\n\t\t\t\tclassName=\"components-angle-picker-control__angle-circle-indicator-wrapper\"\n\t\t\t\ttabIndex={ -1 }\n\t\t\t>\n\t\t\t\t<CircleIndicator className=\"components-angle-picker-control__angle-circle-indicator\" />\n\t\t\t</CircleIndicatorWrapper>\n\t\t</CircleRoot>\n\t);\n}\n\nfunction getAngle(\n\tcenterX: number,\n\tcenterY: number,\n\tpointX: number,\n\tpointY: number\n) {\n\tconst y = pointY - centerY;\n\tconst x = pointX - centerX;\n\n\tconst angleInRadians = Math.atan2( y, x );\n\tconst angleInDeg = Math.round( angleInRadians * ( 180 / Math.PI ) ) + 90;\n\tif ( angleInDeg < 0 ) {\n\t\treturn 360 + angleInDeg;\n\t}\n\treturn angleInDeg;\n}\n\nexport default AngleCircle;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_element","require","_compose","_anglePickerControlStyles","_jsxRuntime","AngleCircle","value","onChange","props","angleCircleRef","useRef","angleCircleCenterRef","previousCursorValueRef","setAngleCircleCenter","current","rect","getBoundingClientRect","x","width","y","height","changeAngleToPosition","event","undefined","preventDefault","target","focus","centerX","centerY","getAngle","clientX","clientY","startDrag","isDragging","useDragging","onDragStart","onDragMove","onDragEnd","useEffect","document","body","style","cursor","jsx","CircleRoot","ref","onMouseDown","className","children","CircleIndicatorWrapper","transform","tabIndex","CircleIndicator","pointX","pointY","angleInRadians","Math","atan2","angleInDeg","round","PI","_default","exports","default"],"sources":["@wordpress/components/src/angle-picker-control/angle-circle.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { __experimentalUseDragging as useDragging } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport {\n\tCircleRoot,\n\tCircleIndicatorWrapper,\n\tCircleIndicator,\n} from './styles/angle-picker-control-styles';\n\nimport type { WordPressComponentProps } from '../context';\nimport type { AngleCircleProps } from './types';\n\ntype UseDraggingArgumentType = Parameters< typeof useDragging >[ 0 ];\ntype UseDraggingCallbackEvent =\n\t| Parameters< UseDraggingArgumentType[ 'onDragStart' ] >[ 0 ]\n\t| Parameters< UseDraggingArgumentType[ 'onDragMove' ] >[ 0 ]\n\t| Parameters< UseDraggingArgumentType[ 'onDragEnd' ] >[ 0 ];\n\nfunction AngleCircle( {\n\tvalue,\n\tonChange,\n\t...props\n}: WordPressComponentProps< AngleCircleProps, 'div' > ) {\n\tconst angleCircleRef = useRef< HTMLDivElement | null >( null );\n\tconst angleCircleCenterRef = useRef<\n\t\t{ x: number; y: number } | undefined\n\t>();\n\tconst previousCursorValueRef = useRef< CSSStyleDeclaration[ 'cursor' ] >();\n\n\tconst setAngleCircleCenter = () => {\n\t\tif ( angleCircleRef.current === null ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst rect = angleCircleRef.current.getBoundingClientRect();\n\t\tangleCircleCenterRef.current = {\n\t\t\tx: rect.x + rect.width / 2,\n\t\t\ty: rect.y + rect.height / 2,\n\t\t};\n\t};\n\n\tconst changeAngleToPosition = ( event: UseDraggingCallbackEvent ) => {\n\t\tif ( event === undefined ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Prevent (drag) mouse events from selecting and accidentally\n\t\t// triggering actions from other elements.\n\t\tevent.preventDefault();\n\t\t// Input control needs to lose focus and by preventDefault above, it doesn't.\n\t\t( event.target as HTMLDivElement | null )?.focus();\n\n\t\tif (\n\t\t\tangleCircleCenterRef.current !== undefined &&\n\t\t\tonChange !== undefined\n\t\t) {\n\t\t\tconst { x: centerX, y: centerY } = angleCircleCenterRef.current;\n\t\t\tonChange(\n\t\t\t\tgetAngle( centerX, centerY, event.clientX, event.clientY )\n\t\t\t);\n\t\t}\n\t};\n\n\tconst { startDrag, isDragging } = useDragging( {\n\t\tonDragStart: ( event ) => {\n\t\t\tsetAngleCircleCenter();\n\t\t\tchangeAngleToPosition( event );\n\t\t},\n\t\tonDragMove: changeAngleToPosition,\n\t\tonDragEnd: changeAngleToPosition,\n\t} );\n\n\tuseEffect( () => {\n\t\tif ( isDragging ) {\n\t\t\tif ( previousCursorValueRef.current === undefined ) {\n\t\t\t\tpreviousCursorValueRef.current = document.body.style.cursor;\n\t\t\t}\n\t\t\tdocument.body.style.cursor = 'grabbing';\n\t\t} else {\n\t\t\tdocument.body.style.cursor = previousCursorValueRef.current || '';\n\t\t\tpreviousCursorValueRef.current = undefined;\n\t\t}\n\t}, [ isDragging ] );\n\n\treturn (\n\t\t<CircleRoot\n\t\t\tref={ angleCircleRef }\n\t\t\tonMouseDown={ startDrag }\n\t\t\tclassName=\"components-angle-picker-control__angle-circle\"\n\t\t\t{ ...props }\n\t\t>\n\t\t\t<CircleIndicatorWrapper\n\t\t\t\tstyle={\n\t\t\t\t\tvalue ? { transform: `rotate(${ value }deg)` } : undefined\n\t\t\t\t}\n\t\t\t\tclassName=\"components-angle-picker-control__angle-circle-indicator-wrapper\"\n\t\t\t\ttabIndex={ -1 }\n\t\t\t>\n\t\t\t\t<CircleIndicator className=\"components-angle-picker-control__angle-circle-indicator\" />\n\t\t\t</CircleIndicatorWrapper>\n\t\t</CircleRoot>\n\t);\n}\n\nfunction getAngle(\n\tcenterX: number,\n\tcenterY: number,\n\tpointX: number,\n\tpointY: number\n) {\n\tconst y = pointY - centerY;\n\tconst x = pointX - centerX;\n\n\tconst angleInRadians = Math.atan2( y, x );\n\tconst angleInDeg = Math.round( angleInRadians * ( 180 / Math.PI ) ) + 90;\n\tif ( angleInDeg < 0 ) {\n\t\treturn 360 + angleInDeg;\n\t}\n\treturn angleInDeg;\n}\n\nexport default AngleCircle;\n"],"mappings":"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","ignoreList":[]}

package/build/border-control/border-control/component.js

@@ -15,6 +15,7 @@ var _view = require("../../view");
 var _visuallyHidden = require("../../visually-hidden");
 var _context = require("../../context");
 var _hook = require("./hook");
+var _spacer = require("../../spacer");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
@@ -80,19 +81,23 @@ const UnconnectedBorderControl = (props, forwardedRef) => {
       spacing: 4,
       className: innerWrapperClassName,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_unitControl.default, {
-        prefix: /*#__PURE__*/(0, _jsxRuntime.jsx)(_borderControlDropdown.default, {
-          border: border,
-          colors: colors,
-          __unstablePopoverProps: __unstablePopoverProps,
-          disableCustomColors: disableCustomColors,
-          enableAlpha: enableAlpha,
-          enableStyle: enableStyle,
-          isStyleSettable: isStyleSettable,
-          onChange: onBorderChange,
-          previousStyleSelection: previousStyleSelection,
-          showDropdownHeader: showDropdownHeader,
-          __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
-          size: size
+        prefix: /*#__PURE__*/(0, _jsxRuntime.jsx)(_spacer.Spacer, {
+          marginRight: 1,
+          marginBottom: 0,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_borderControlDropdown.default, {
+            border: border,
+            colors: colors,
+            __unstablePopoverProps: __unstablePopoverProps,
+            disableCustomColors: disableCustomColors,
+            enableAlpha: enableAlpha,
+            enableStyle: enableStyle,
+            isStyleSettable: isStyleSettable,
+            onChange: onBorderChange,
+            previousStyleSelection: previousStyleSelection,
+            showDropdownHeader: showDropdownHeader,
+            __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
+            size: size
+          })
         }),
         label: (0, _i18n.__)('Border width'),
         hideLabelFromVision: true,

package/build/border-control/border-control/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["_i18n","require","_borderControlDropdown","_interopRequireDefault","_unitControl","_rangeControl","_hStack","_baseControlStyles","_view","_visuallyHidden","_context","_hook","_jsxRuntime","BorderLabel","props","label","hideLabelFromVision","jsx","VisuallyHidden","as","children","StyledLabel","UnconnectedBorderControl","forwardedRef","__next40pxDefaultSize","colors","disableCustomColors","disableUnits","enableAlpha","enableStyle","innerWrapperClassName","inputWidth","isStyleSettable","onBorderChange","onSliderChange","onWidthChange","placeholder","__unstablePopoverProps","previousStyleSelection","showDropdownHeader","size","sliderClassName","value","border","widthUnit","widthValue","withSlider","__experimentalIsRenderedInSidebar","otherProps","useBorderControl","jsxs","View","ref","HStack","spacing","className","default","prefix","onChange","__","min","width","__unstableInputWidth","__nextHasNoMarginBottom","initialPosition","max","step","includes","undefined","withInputField","BorderControl","exports","contextConnect","_default"],"sources":["@wordpress/components/src/border-control/border-control/component.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport BorderControlDropdown from '../border-control-dropdown';\nimport UnitControl from '../../unit-control';\nimport RangeControl from '../../range-control';\nimport { HStack } from '../../h-stack';\nimport { StyledLabel } from '../../base-control/styles/base-control-styles';\nimport { View } from '../../view';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { useBorderControl } from './hook';\n\nimport type { BorderControlProps, LabelProps } from '../types';\n\nconst BorderLabel = ( props: LabelProps ) => {\n\tconst { label, hideLabelFromVision } = props;\n\n\tif ( ! label ) {\n\t\treturn null;\n\t}\n\n\treturn hideLabelFromVision ? (\n\t\t<VisuallyHidden as=\"legend\">{ label }</VisuallyHidden>\n\t) : (\n\t\t<StyledLabel as=\"legend\">{ label }</StyledLabel>\n\t);\n};\n\nconst UnconnectedBorderControl = (\n\tprops: WordPressComponentProps< BorderControlProps, 'div', false >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\t__next40pxDefaultSize = false,\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tdisableUnits,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\thideLabelFromVision,\n\t\tinnerWrapperClassName,\n\t\tinputWidth,\n\t\tisStyleSettable,\n\t\tlabel,\n\t\tonBorderChange,\n\t\tonSliderChange,\n\t\tonWidthChange,\n\t\tplaceholder,\n\t\t__unstablePopoverProps,\n\t\tpreviousStyleSelection,\n\t\tshowDropdownHeader,\n\t\tsize,\n\t\tsliderClassName,\n\t\tvalue: border,\n\t\twidthUnit,\n\t\twidthValue,\n\t\twithSlider,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t...otherProps\n\t} = useBorderControl( props );\n\n\treturn (\n\t\t<View as=\"fieldset\" { ...otherProps } ref={ forwardedRef }>\n\t\t\t<BorderLabel\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t/>\n\t\t\t<HStack spacing={ 4 } className={ innerWrapperClassName }>\n\t\t\t\t<UnitControl\n\t\t\t\t\tprefix={\n\t\t\t\t\t\t<BorderControlDropdown\n\t\t\t\t\t\t\tborder={ border }\n\t\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\t\t__unstablePopoverProps={ __unstablePopoverProps }\n\t\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\t\tenableStyle={ enableStyle }\n\t\t\t\t\t\t\tisStyleSettable={ isStyleSettable }\n\t\t\t\t\t\t\tonChange={ onBorderChange }\n\t\t\t\t\t\t\tpreviousStyleSelection={ previousStyleSelection }\n\t\t\t\t\t\t\tshowDropdownHeader={ showDropdownHeader }\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t\tlabel={ __( 'Border width' ) }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tonChange={ onWidthChange }\n\t\t\t\t\tvalue={ border?.width || '' }\n\t\t\t\t\tplaceholder={ placeholder }\n\t\t\t\t\tdisableUnits={ disableUnits }\n\t\t\t\t\t__unstableInputWidth={ inputWidth }\n\t\t\t\t\tsize={ size }\n\t\t\t\t/>\n\t\t\t\t{ withSlider && (\n\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\tlabel={ __( 'Border width' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\tclassName={ sliderClassName }\n\t\t\t\t\t\tinitialPosition={ 0 }\n\t\t\t\t\t\tmax={ 100 }\n\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\tonChange={ onSliderChange }\n\t\t\t\t\t\tstep={ [ 'px', '%' ].includes( widthUnit ) ? 1 : 0.1 }\n\t\t\t\t\t\tvalue={ widthValue || undefined }\n\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t</View>\n\t);\n};\n\n/**\n * The `BorderControl` brings together internal sub-components which allow users to\n * set the various properties of a border. The first sub-component, a\n * `BorderDropdown` contains options representing border color and style. The\n * border width is controlled via a `UnitControl` and an optional `RangeControl`.\n *\n * Border radius is not covered by this control as it may be desired separate to\n * color, style, and width. For example, the border radius may be absorbed under\n * a \"shape\" abstraction.\n *\n * ```jsx\n * import { __experimentalBorderControl as BorderControl } from '@wordpress/components';\n * import { __ } from '@wordpress/i18n';\n *\n * const colors = [\n * \t{ name: 'Blue 20', color: '#72aee6' },\n * \t// ...\n * ];\n *\n * const MyBorderControl = () => {\n * \tconst [ border, setBorder ] = useState();\n * \tconst onChange = ( newBorder ) => setBorder( newBorder );\n *\n * \treturn (\n * \t\t<BorderControl\n * \t\t\tcolors={ colors }\n * \t\t\tlabel={ __( 'Border' ) }\n * \t\t\tonChange={ onChange }\n * \t\t\tvalue={ border }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport const BorderControl = contextConnect(\n\tUnconnectedBorderControl,\n\t'BorderControl'\n);\n\nexport default BorderControl;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_i18n","require","_borderControlDropdown","_interopRequireDefault","_unitControl","_rangeControl","_hStack","_baseControlStyles","_view","_visuallyHidden","_context","_hook","_spacer","_jsxRuntime","BorderLabel","props","label","hideLabelFromVision","jsx","VisuallyHidden","as","children","StyledLabel","UnconnectedBorderControl","forwardedRef","__next40pxDefaultSize","colors","disableCustomColors","disableUnits","enableAlpha","enableStyle","innerWrapperClassName","inputWidth","isStyleSettable","onBorderChange","onSliderChange","onWidthChange","placeholder","__unstablePopoverProps","previousStyleSelection","showDropdownHeader","size","sliderClassName","value","border","widthUnit","widthValue","withSlider","__experimentalIsRenderedInSidebar","otherProps","useBorderControl","jsxs","View","ref","HStack","spacing","className","default","prefix","Spacer","marginRight","marginBottom","onChange","__","min","width","__unstableInputWidth","__nextHasNoMarginBottom","initialPosition","max","step","includes","undefined","withInputField","BorderControl","exports","contextConnect","_default"],"sources":["@wordpress/components/src/border-control/border-control/component.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport BorderControlDropdown from '../border-control-dropdown';\nimport UnitControl from '../../unit-control';\nimport RangeControl from '../../range-control';\nimport { HStack } from '../../h-stack';\nimport { StyledLabel } from '../../base-control/styles/base-control-styles';\nimport { View } from '../../view';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { useBorderControl } from './hook';\n\nimport type { BorderControlProps, LabelProps } from '../types';\nimport { Spacer } from '../../spacer';\n\nconst BorderLabel = ( props: LabelProps ) => {\n\tconst { label, hideLabelFromVision } = props;\n\n\tif ( ! label ) {\n\t\treturn null;\n\t}\n\n\treturn hideLabelFromVision ? (\n\t\t<VisuallyHidden as=\"legend\">{ label }</VisuallyHidden>\n\t) : (\n\t\t<StyledLabel as=\"legend\">{ label }</StyledLabel>\n\t);\n};\n\nconst UnconnectedBorderControl = (\n\tprops: WordPressComponentProps< BorderControlProps, 'div', false >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\t__next40pxDefaultSize = false,\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tdisableUnits,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\thideLabelFromVision,\n\t\tinnerWrapperClassName,\n\t\tinputWidth,\n\t\tisStyleSettable,\n\t\tlabel,\n\t\tonBorderChange,\n\t\tonSliderChange,\n\t\tonWidthChange,\n\t\tplaceholder,\n\t\t__unstablePopoverProps,\n\t\tpreviousStyleSelection,\n\t\tshowDropdownHeader,\n\t\tsize,\n\t\tsliderClassName,\n\t\tvalue: border,\n\t\twidthUnit,\n\t\twidthValue,\n\t\twithSlider,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t...otherProps\n\t} = useBorderControl( props );\n\n\treturn (\n\t\t<View as=\"fieldset\" { ...otherProps } ref={ forwardedRef }>\n\t\t\t<BorderLabel\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t/>\n\t\t\t<HStack spacing={ 4 } className={ innerWrapperClassName }>\n\t\t\t\t<UnitControl\n\t\t\t\t\tprefix={\n\t\t\t\t\t\t<Spacer marginRight={ 1 } marginBottom={ 0 }>\n\t\t\t\t\t\t\t<BorderControlDropdown\n\t\t\t\t\t\t\t\tborder={ border }\n\t\t\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\t\t\t__unstablePopoverProps={\n\t\t\t\t\t\t\t\t\t__unstablePopoverProps\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\t\t\tenableStyle={ enableStyle }\n\t\t\t\t\t\t\t\tisStyleSettable={ isStyleSettable }\n\t\t\t\t\t\t\t\tonChange={ onBorderChange }\n\t\t\t\t\t\t\t\tpreviousStyleSelection={\n\t\t\t\t\t\t\t\t\tpreviousStyleSelection\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tshowDropdownHeader={ showDropdownHeader }\n\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t}\n\t\t\t\t\tlabel={ __( 'Border width' ) }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tonChange={ onWidthChange }\n\t\t\t\t\tvalue={ border?.width || '' }\n\t\t\t\t\tplaceholder={ placeholder }\n\t\t\t\t\tdisableUnits={ disableUnits }\n\t\t\t\t\t__unstableInputWidth={ inputWidth }\n\t\t\t\t\tsize={ size }\n\t\t\t\t/>\n\t\t\t\t{ withSlider && (\n\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\tlabel={ __( 'Border width' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\tclassName={ sliderClassName }\n\t\t\t\t\t\tinitialPosition={ 0 }\n\t\t\t\t\t\tmax={ 100 }\n\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\tonChange={ onSliderChange }\n\t\t\t\t\t\tstep={ [ 'px', '%' ].includes( widthUnit ) ? 1 : 0.1 }\n\t\t\t\t\t\tvalue={ widthValue || undefined }\n\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t</View>\n\t);\n};\n\n/**\n * The `BorderControl` brings together internal sub-components which allow users to\n * set the various properties of a border. The first sub-component, a\n * `BorderDropdown` contains options representing border color and style. The\n * border width is controlled via a `UnitControl` and an optional `RangeControl`.\n *\n * Border radius is not covered by this control as it may be desired separate to\n * color, style, and width. For example, the border radius may be absorbed under\n * a \"shape\" abstraction.\n *\n * ```jsx\n * import { __experimentalBorderControl as BorderControl } from '@wordpress/components';\n * import { __ } from '@wordpress/i18n';\n *\n * const colors = [\n * \t{ name: 'Blue 20', color: '#72aee6' },\n * \t// ...\n * ];\n *\n * const MyBorderControl = () => {\n * \tconst [ border, setBorder ] = useState();\n * \tconst onChange = ( newBorder ) => setBorder( newBorder );\n *\n * \treturn (\n * \t\t<BorderControl\n * \t\t\tcolors={ colors }\n * \t\t\tlabel={ __( 'Border' ) }\n * \t\t\tonChange={ onChange }\n * \t\t\tvalue={ border }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport const BorderControl = contextConnect(\n\tUnconnectedBorderControl,\n\t'BorderControl'\n);\n\nexport default BorderControl;\n"],"mappings":"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","ignoreList":[]}

package/build/circular-option-picker/circular-option-picker-option.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Option = Option;
 var _clsx = _interopRequireDefault(require("clsx"));
-var _react = require("@ariakit/react");
 var _compose = require("@wordpress/compose");
 var _element = require("@wordpress/element");
 var _icons = require("@wordpress/icons");
@@ -43,13 +42,20 @@ function UnforwardedOptionAsOption(props, forwardedRef) {
   const {
     id,
     isSelected,
-    compositeStore,
     ...additionalProps
   } = props;
-  const activeId = (0, _react.useStoreState)(compositeStore, 'activeId');
-  if (isSelected && !activeId) {
-    compositeStore.setActiveId(id);
-  }
+  const {
+    setActiveId,
+    activeId
+  } = (0, _element.useContext)(_circularOptionPickerContext.CircularOptionPickerContext);
+  (0, _element.useEffect)(() => {
+    if (isSelected && !activeId) {
+      // The setTimeout call is necessary to make sure that this update
+      // doesn't get overridden by `Composite`'s internal logic, which picks
+      // an initial active item if one is not specifically set.
+      window.setTimeout(() => setActiveId?.(id), 0);
+    }
+  }, [isSelected, setActiveId, activeId, id]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_composite.Composite.Item, {
     render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
       ...additionalProps,
@@ -70,7 +76,7 @@ function Option({
 }) {
   const {
     baseId,
-    compositeStore
+    setActiveId
   } = (0, _element.useContext)(_circularOptionPickerContext.CircularOptionPickerContext);
   const id = (0, _compose.useInstanceId)(Option, baseId || 'components-circular-option-picker__option');
   const commonProps = {
@@ -78,9 +84,9 @@ function Option({
     className: 'components-circular-option-picker__option',
     ...additionalProps
   };
-  const optionControl = compositeStore ? /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionAsOption, {
+  const isListbox = setActiveId !== undefined;
+  const optionControl = isListbox ? /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionAsOption, {
     ...commonProps,
-    compositeStore: compositeStore,
     isSelected: isSelected
   }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionAsButton, {
     ...commonProps,

package/build/circular-option-picker/circular-option-picker-option.js.map

@@ -1 +1 @@
-{"version":3,"names":["_clsx","_interopRequireDefault","require","_react","_compose","_element","_icons","_circularOptionPickerContext","_button","_composite","_tooltip","_jsxRuntime","UnforwardedOptionAsButton","props","forwardedRef","isPressed","additionalProps","jsx","default","ref","OptionAsButton","forwardRef","UnforwardedOptionAsOption","id","isSelected","compositeStore","activeId","useStoreState","setActiveId","Composite","Item","render","role","OptionAsOption","Option","className","selectedIconProps","tooltipText","baseId","useContext","CircularOptionPickerContext","useInstanceId","commonProps","optionControl","jsxs","clsx","children","text","Icon","icon","check"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker-option.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport { useStoreState } from '@ariakit/react';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useContext } from '@wordpress/element';\nimport { Icon, check } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { CircularOptionPickerContext } from './circular-option-picker-context';\nimport Button from '../button';\nimport { Composite } from '../composite';\nimport Tooltip from '../tooltip';\nimport type { OptionProps } from './types';\n\nfunction UnforwardedOptionAsButton(\n\tprops: {\n\t\tid?: string;\n\t\tclassName?: string;\n\t\tisPressed?: boolean;\n\t},\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { isPressed, ...additionalProps } = props;\n\treturn (\n\t\t<Button\n\t\t\t{ ...additionalProps }\n\t\t\taria-pressed={ isPressed }\n\t\t\tref={ forwardedRef }\n\t\t/>\n\t);\n}\n\nconst OptionAsButton = forwardRef( UnforwardedOptionAsButton );\n\nfunction UnforwardedOptionAsOption(\n\tprops: {\n\t\tid: string;\n\t\tclassName?: string;\n\t\tisSelected?: boolean;\n\t\tcompositeStore: NonNullable<\n\t\t\tReact.ComponentProps< typeof Composite >[ 'store' ]\n\t\t>;\n\t},\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { id, isSelected, compositeStore, ...additionalProps } = props;\n\tconst activeId = useStoreState( compositeStore, 'activeId' );\n\n\tif ( isSelected && ! activeId ) {\n\t\tcompositeStore.setActiveId( id );\n\t}\n\n\treturn (\n\t\t<Composite.Item\n\t\t\trender={\n\t\t\t\t<Button\n\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\trole=\"option\"\n\t\t\t\t\taria-selected={ !! isSelected }\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t/>\n\t\t\t}\n\t\t\tid={ id }\n\t\t/>\n\t);\n}\n\nconst OptionAsOption = forwardRef( UnforwardedOptionAsOption );\n\nexport function Option( {\n\tclassName,\n\tisSelected,\n\tselectedIconProps = {},\n\ttooltipText,\n\t...additionalProps\n}: OptionProps ) {\n\tconst { baseId, compositeStore } = useContext(\n\t\tCircularOptionPickerContext\n\t);\n\tconst id = useInstanceId(\n\t\tOption,\n\t\tbaseId || 'components-circular-option-picker__option'\n\t);\n\n\tconst commonProps = {\n\t\tid,\n\t\tclassName: 'components-circular-option-picker__option',\n\t\t...additionalProps,\n\t};\n\n\tconst optionControl = compositeStore ? (\n\t\t<OptionAsOption\n\t\t\t{ ...commonProps }\n\t\t\tcompositeStore={ compositeStore }\n\t\t\tisSelected={ isSelected }\n\t\t/>\n\t) : (\n\t\t<OptionAsButton { ...commonProps } isPressed={ isSelected } />\n\t);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ clsx(\n\t\t\t\tclassName,\n\t\t\t\t'components-circular-option-picker__option-wrapper'\n\t\t\t) }\n\t\t>\n\t\t\t{ tooltipText ? (\n\t\t\t\t<Tooltip text={ tooltipText }>{ optionControl }</Tooltip>\n\t\t\t) : (\n\t\t\t\toptionControl\n\t\t\t) }\n\t\t\t{ isSelected && <Icon icon={ check } { ...selectedIconProps } /> }\n\t\t</div>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_compose","_element","_icons","_circularOptionPickerContext","_button","_composite","_tooltip","_jsxRuntime","UnforwardedOptionAsButton","props","forwardedRef","isPressed","additionalProps","jsx","default","ref","OptionAsButton","forwardRef","UnforwardedOptionAsOption","id","isSelected","setActiveId","activeId","useContext","CircularOptionPickerContext","useEffect","window","setTimeout","Composite","Item","render","role","OptionAsOption","Option","className","selectedIconProps","tooltipText","baseId","useInstanceId","commonProps","isListbox","undefined","optionControl","jsxs","clsx","children","text","Icon","icon","check"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker-option.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useContext, useEffect } from '@wordpress/element';\nimport { Icon, check } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { CircularOptionPickerContext } from './circular-option-picker-context';\nimport Button from '../button';\nimport { Composite } from '../composite';\nimport Tooltip from '../tooltip';\nimport type { OptionProps } from './types';\n\nfunction UnforwardedOptionAsButton(\n\tprops: {\n\t\tid?: string;\n\t\tclassName?: string;\n\t\tisPressed?: boolean;\n\t},\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { isPressed, ...additionalProps } = props;\n\treturn (\n\t\t<Button\n\t\t\t{ ...additionalProps }\n\t\t\taria-pressed={ isPressed }\n\t\t\tref={ forwardedRef }\n\t\t/>\n\t);\n}\n\nconst OptionAsButton = forwardRef( UnforwardedOptionAsButton );\n\nfunction UnforwardedOptionAsOption(\n\tprops: {\n\t\tid: string;\n\t\tclassName?: string;\n\t\tisSelected?: boolean;\n\t},\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { id, isSelected, ...additionalProps } = props;\n\n\tconst { setActiveId, activeId } = useContext( CircularOptionPickerContext );\n\n\tuseEffect( () => {\n\t\tif ( isSelected && ! activeId ) {\n\t\t\t// The setTimeout call is necessary to make sure that this update\n\t\t\t// doesn't get overridden by `Composite`'s internal logic, which picks\n\t\t\t// an initial active item if one is not specifically set.\n\t\t\twindow.setTimeout( () => setActiveId?.( id ), 0 );\n\t\t}\n\t}, [ isSelected, setActiveId, activeId, id ] );\n\n\treturn (\n\t\t<Composite.Item\n\t\t\trender={\n\t\t\t\t<Button\n\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\trole=\"option\"\n\t\t\t\t\taria-selected={ !! isSelected }\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t/>\n\t\t\t}\n\t\t\tid={ id }\n\t\t/>\n\t);\n}\n\nconst OptionAsOption = forwardRef( UnforwardedOptionAsOption );\n\nexport function Option( {\n\tclassName,\n\tisSelected,\n\tselectedIconProps = {},\n\ttooltipText,\n\t...additionalProps\n}: OptionProps ) {\n\tconst { baseId, setActiveId } = useContext( CircularOptionPickerContext );\n\tconst id = useInstanceId(\n\t\tOption,\n\t\tbaseId || 'components-circular-option-picker__option'\n\t);\n\n\tconst commonProps = {\n\t\tid,\n\t\tclassName: 'components-circular-option-picker__option',\n\t\t...additionalProps,\n\t};\n\n\tconst isListbox = setActiveId !== undefined;\n\tconst optionControl = isListbox ? (\n\t\t<OptionAsOption { ...commonProps } isSelected={ isSelected } />\n\t) : (\n\t\t<OptionAsButton { ...commonProps } isPressed={ isSelected } />\n\t);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ clsx(\n\t\t\t\tclassName,\n\t\t\t\t'components-circular-option-picker__option-wrapper'\n\t\t\t) }\n\t\t>\n\t\t\t{ tooltipText ? (\n\t\t\t\t<Tooltip text={ tooltipText }>{ optionControl }</Tooltip>\n\t\t\t) : (\n\t\t\t\toptionControl\n\t\t\t) }\n\t\t\t{ isSelected && <Icon icon={ check } { ...selectedIconProps } /> }\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAMA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAKA,IAAAI,4BAAA,GAAAJ,OAAA;AACA,IAAAK,OAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,UAAA,GAAAN,OAAA;AACA,IAAAO,QAAA,GAAAR,sBAAA,CAAAC,OAAA;AAAiC,IAAAQ,WAAA,GAAAR,OAAA;AAnBjC;AACA;AACA;;AAIA;AACA;AACA;;AAKA;AACA;AACA;;AAOA,SAASS,yBAAyBA,CACjCC,KAIC,EACDC,YAAiC,EAChC;EACD,MAAM;IAAEC,SAAS;IAAE,GAAGC;EAAgB,CAAC,GAAGH,KAAK;EAC/C,oBACC,IAAAF,WAAA,CAAAM,GAAA,EAACT,OAAA,CAAAU,OAAM;IAAA,GACDF,eAAe;IACpB,gBAAeD,SAAW;IAC1BI,GAAG,EAAGL;EAAc,CACpB,CAAC;AAEJ;AAEA,MAAMM,cAAc,GAAG,IAAAC,mBAAU,EAAET,yBAA0B,CAAC;AAE9D,SAASU,yBAAyBA,CACjCT,KAIC,EACDC,YAAiC,EAChC;EACD,MAAM;IAAES,EAAE;IAAEC,UAAU;IAAE,GAAGR;EAAgB,CAAC,GAAGH,KAAK;EAEpD,MAAM;IAAEY,WAAW;IAAEC;EAAS,CAAC,GAAG,IAAAC,mBAAU,EAAEC,wDAA4B,CAAC;EAE3E,IAAAC,kBAAS,EAAE,MAAM;IAChB,IAAKL,UAAU,IAAI,CAAEE,QAAQ,EAAG;MAC/B;MACA;MACA;MACAI,MAAM,CAACC,UAAU,CAAE,MAAMN,WAAW,GAAIF,EAAG,CAAC,EAAE,CAAE,CAAC;IAClD;EACD,CAAC,EAAE,CAAEC,UAAU,EAAEC,WAAW,EAAEC,QAAQ,EAAEH,EAAE,CAAG,CAAC;EAE9C,oBACC,IAAAZ,WAAA,CAAAM,GAAA,EAACR,UAAA,CAAAuB,SAAS,CAACC,IAAI;IACdC,MAAM,eACL,IAAAvB,WAAA,CAAAM,GAAA,EAACT,OAAA,CAAAU,OAAM;MAAA,GACDF,eAAe;MACpBmB,IAAI,EAAC,QAAQ;MACb,iBAAgB,CAAC,CAAEX,UAAY;MAC/BL,GAAG,EAAGL;IAAc,CACpB,CACD;IACDS,EAAE,EAAGA;EAAI,CACT,CAAC;AAEJ;AAEA,MAAMa,cAAc,GAAG,IAAAf,mBAAU,EAAEC,yBAA0B,CAAC;AAEvD,SAASe,MAAMA,CAAE;EACvBC,SAAS;EACTd,UAAU;EACVe,iBAAiB,GAAG,CAAC,CAAC;EACtBC,WAAW;EACX,GAAGxB;AACS,CAAC,EAAG;EAChB,MAAM;IAAEyB,MAAM;IAAEhB;EAAY,CAAC,GAAG,IAAAE,mBAAU,EAAEC,wDAA4B,CAAC;EACzE,MAAML,EAAE,GAAG,IAAAmB,sBAAa,EACvBL,MAAM,EACNI,MAAM,IAAI,2CACX,CAAC;EAED,MAAME,WAAW,GAAG;IACnBpB,EAAE;IACFe,SAAS,EAAE,2CAA2C;IACtD,GAAGtB;EACJ,CAAC;EAED,MAAM4B,SAAS,GAAGnB,WAAW,KAAKoB,SAAS;EAC3C,MAAMC,aAAa,GAAGF,SAAS,gBAC9B,IAAAjC,WAAA,CAAAM,GAAA,EAACmB,cAAc;IAAA,GAAMO,WAAW;IAAGnB,UAAU,EAAGA;EAAY,CAAE,CAAC,gBAE/D,IAAAb,WAAA,CAAAM,GAAA,EAACG,cAAc;IAAA,GAAMuB,WAAW;IAAG5B,SAAS,EAAGS;EAAY,CAAE,CAC7D;EAED,oBACC,IAAAb,WAAA,CAAAoC,IAAA;IACCT,SAAS,EAAG,IAAAU,aAAI,EACfV,SAAS,EACT,mDACD,CAAG;IAAAW,QAAA,GAEDT,WAAW,gBACZ,IAAA7B,WAAA,CAAAM,GAAA,EAACP,QAAA,CAAAQ,OAAO;MAACgC,IAAI,EAAGV,WAAa;MAAAS,QAAA,EAAGH;IAAa,CAAW,CAAC,GAEzDA,aACA,EACCtB,UAAU,iBAAI,IAAAb,WAAA,CAAAM,GAAA,EAACX,MAAA,CAAA6C,IAAI;MAACC,IAAI,EAAGC,YAAO;MAAA,GAAMd;IAAiB,CAAI,CAAC;EAAA,CAC5D,CAAC;AAER","ignoreList":[]}

package/build/circular-option-picker/circular-option-picker.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _clsx = _interopRequireDefault(require("clsx"));
 var _compose = require("@wordpress/compose");
 var _i18n = require("@wordpress/i18n");
+var _element = require("@wordpress/element");
 var _circularOptionPickerContext = require("./circular-option-picker-context");
 var _composite = require("../composite");
 var _circularOptionPickerOption = require("./circular-option-picker-option");
@@ -80,23 +81,24 @@ var _jsxRuntime = require("react/jsx-runtime");
     children,
     ...additionalProps
   } = props;
-  const compositeStore = (0, _composite.useCompositeStore)({
-    focusLoop: loop,
-    rtl: (0, _i18n.isRTL)()
-  });
-  const compositeContext = {
+  const [activeId, setActiveId] = (0, _element.useState)(undefined);
+  const contextValue = (0, _element.useMemo)(() => ({
     baseId,
-    compositeStore
-  };
+    activeId,
+    setActiveId
+  }), [baseId, activeId, setActiveId]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: className,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_circularOptionPickerContext.CircularOptionPickerContext.Provider, {
-      value: compositeContext,
+      value: contextValue,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_composite.Composite, {
         ...additionalProps,
         id: baseId,
-        store: compositeStore,
+        focusLoop: loop,
+        rtl: (0, _i18n.isRTL)(),
         role: "listbox",
+        activeId: activeId,
+        setActiveId: setActiveId,
         children: options
       }), children, actions]
     })
@@ -110,13 +112,14 @@ function ButtonsCircularOptionPicker(props) {
     baseId,
     ...additionalProps
   } = props;
+  const contextValue = (0, _element.useMemo)(() => ({
+    baseId
+  }), [baseId]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     ...additionalProps,
     id: baseId,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_circularOptionPickerContext.CircularOptionPickerContext.Provider, {
-      value: {
-        baseId
-      },
+      value: contextValue,
       children: [options, children, actions]
     })
   });

package/build/circular-option-picker/circular-option-picker.js.map

@@ -1 +1 @@
-{"version":3,"names":["_clsx","_interopRequireDefault","require","_compose","_i18n","_circularOptionPickerContext","_composite","_circularOptionPickerOption","_circularOptionPickerOptionGroup","_circularOptionPickerActions","_jsxRuntime","ListboxCircularOptionPicker","props","actions","options","baseId","className","loop","children","additionalProps","compositeStore","useCompositeStore","focusLoop","rtl","isRTL","compositeContext","jsx","jsxs","CircularOptionPickerContext","Provider","value","Composite","id","store","role","ButtonsCircularOptionPicker","CircularOptionPicker","asButtons","actionsProp","optionsProp","useInstanceId","OptionPickerImplementation","undefined","clsx","Option","OptionGroup","ButtonAction","DropdownLinkAction","_default","exports","default"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { CircularOptionPickerContext } from './circular-option-picker-context';\nimport { Composite, useCompositeStore } from '../composite';\nimport type {\n\tCircularOptionPickerProps,\n\tListboxCircularOptionPickerProps,\n\tButtonsCircularOptionPickerProps,\n} from './types';\nimport { Option } from './circular-option-picker-option';\nimport { OptionGroup } from './circular-option-picker-option-group';\nimport {\n\tButtonAction,\n\tDropdownLinkAction,\n} from './circular-option-picker-actions';\n\n/**\n *`CircularOptionPicker` is a component that displays a set of options as circular buttons.\n *\n * ```jsx\n * import { CircularOptionPicker } from '../circular-option-picker';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ currentColor, setCurrentColor ] = useState();\n * \tconst colors = [\n * \t\t{ color: '#f00', name: 'Red' },\n * \t\t{ color: '#0f0', name: 'Green' },\n * \t\t{ color: '#00f', name: 'Blue' },\n * \t];\n * \tconst colorOptions = (\n * \t\t<>\n * \t\t\t{ colors.map( ( { color, name }, index ) => {\n * \t\t\t\treturn (\n * \t\t\t\t\t<CircularOptionPicker.Option\n * \t\t\t\t\t\tkey={ `${ color }-${ index }` }\n * \t\t\t\t\t\ttooltipText={ name }\n * \t\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n * \t\t\t\t\t\tisSelected={ index === currentColor }\n * \t\t\t\t\t\tonClick={ () => setCurrentColor( index ) }\n * \t\t\t\t\t\taria-label={ name }\n * \t\t\t\t\t/>\n * \t\t\t\t);\n * \t\t\t} ) }\n * \t\t</>\n * \t);\n * \treturn (\n * \t\t<CircularOptionPicker\n * \t\t\t\toptions={ colorOptions }\n * \t\t\t\tactions={\n * \t\t\t\t\t<CircularOptionPicker.ButtonAction\n * \t\t\t\t\t\tonClick={ () => setCurrentColor( undefined ) }\n * \t\t\t\t\t>\n * \t\t\t\t\t\t{ 'Clear' }\n * \t\t\t\t\t</CircularOptionPicker.ButtonAction>\n * \t\t\t\t}\n * \t\t\t/>\n * \t);\n * };\n * ```\n */\n\nfunction ListboxCircularOptionPicker(\n\tprops: ListboxCircularOptionPickerProps\n) {\n\tconst {\n\t\tactions,\n\t\toptions,\n\t\tbaseId,\n\t\tclassName,\n\t\tloop = true,\n\t\tchildren,\n\t\t...additionalProps\n\t} = props;\n\n\tconst compositeStore = useCompositeStore( {\n\t\tfocusLoop: loop,\n\t\trtl: isRTL(),\n\t} );\n\n\tconst compositeContext = {\n\t\tbaseId,\n\t\tcompositeStore,\n\t};\n\n\treturn (\n\t\t<div className={ className }>\n\t\t\t<CircularOptionPickerContext.Provider value={ compositeContext }>\n\t\t\t\t<Composite\n\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\tid={ baseId }\n\t\t\t\t\tstore={ compositeStore }\n\t\t\t\t\trole=\"listbox\"\n\t\t\t\t>\n\t\t\t\t\t{ options }\n\t\t\t\t</Composite>\n\t\t\t\t{ children }\n\t\t\t\t{ actions }\n\t\t\t</CircularOptionPickerContext.Provider>\n\t\t</div>\n\t);\n}\n\nfunction ButtonsCircularOptionPicker(\n\tprops: ButtonsCircularOptionPickerProps\n) {\n\tconst { actions, options, children, baseId, ...additionalProps } = props;\n\n\treturn (\n\t\t<div { ...additionalProps } id={ baseId }>\n\t\t\t<CircularOptionPickerContext.Provider value={ { baseId } }>\n\t\t\t\t{ options }\n\t\t\t\t{ children }\n\t\t\t\t{ actions }\n\t\t\t</CircularOptionPickerContext.Provider>\n\t\t</div>\n\t);\n}\n\nfunction CircularOptionPicker( props: CircularOptionPickerProps ) {\n\tconst {\n\t\tasButtons,\n\t\tactions: actionsProp,\n\t\toptions: optionsProp,\n\t\tchildren,\n\t\tclassName,\n\t\t...additionalProps\n\t} = props;\n\n\tconst baseId = useInstanceId(\n\t\tCircularOptionPicker,\n\t\t'components-circular-option-picker',\n\t\tadditionalProps.id\n\t);\n\n\tconst OptionPickerImplementation = asButtons\n\t\t? ButtonsCircularOptionPicker\n\t\t: ListboxCircularOptionPicker;\n\n\tconst actions = actionsProp ? (\n\t\t<div className=\"components-circular-option-picker__custom-clear-wrapper\">\n\t\t\t{ actionsProp }\n\t\t</div>\n\t) : undefined;\n\n\tconst options = (\n\t\t<div className=\"components-circular-option-picker__swatches\">\n\t\t\t{ optionsProp }\n\t\t</div>\n\t);\n\n\treturn (\n\t\t<OptionPickerImplementation\n\t\t\t{ ...additionalProps }\n\t\t\tbaseId={ baseId }\n\t\t\tclassName={ clsx( 'components-circular-option-picker', className ) }\n\t\t\tactions={ actions }\n\t\t\toptions={ options }\n\t\t>\n\t\t\t{ children }\n\t\t</OptionPickerImplementation>\n\t);\n}\n\nCircularOptionPicker.Option = Option;\nCircularOptionPicker.OptionGroup = OptionGroup;\nCircularOptionPicker.ButtonAction = ButtonAction;\nCircularOptionPicker.DropdownLinkAction = DropdownLinkAction;\n\nexport default CircularOptionPicker;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_compose","_i18n","_element","_circularOptionPickerContext","_composite","_circularOptionPickerOption","_circularOptionPickerOptionGroup","_circularOptionPickerActions","_jsxRuntime","ListboxCircularOptionPicker","props","actions","options","baseId","className","loop","children","additionalProps","activeId","setActiveId","useState","undefined","contextValue","useMemo","jsx","jsxs","CircularOptionPickerContext","Provider","value","Composite","id","focusLoop","rtl","isRTL","role","ButtonsCircularOptionPicker","CircularOptionPicker","asButtons","actionsProp","optionsProp","useInstanceId","OptionPickerImplementation","clsx","Option","OptionGroup","ButtonAction","DropdownLinkAction","_default","exports","default"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { isRTL } from '@wordpress/i18n';\nimport { useMemo, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { CircularOptionPickerContext } from './circular-option-picker-context';\nimport { Composite } from '../composite';\nimport type {\n\tCircularOptionPickerProps,\n\tListboxCircularOptionPickerProps,\n\tButtonsCircularOptionPickerProps,\n} from './types';\nimport { Option } from './circular-option-picker-option';\nimport { OptionGroup } from './circular-option-picker-option-group';\nimport {\n\tButtonAction,\n\tDropdownLinkAction,\n} from './circular-option-picker-actions';\n\n/**\n *`CircularOptionPicker` is a component that displays a set of options as circular buttons.\n *\n * ```jsx\n * import { CircularOptionPicker } from '../circular-option-picker';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ currentColor, setCurrentColor ] = useState();\n * \tconst colors = [\n * \t\t{ color: '#f00', name: 'Red' },\n * \t\t{ color: '#0f0', name: 'Green' },\n * \t\t{ color: '#00f', name: 'Blue' },\n * \t];\n * \tconst colorOptions = (\n * \t\t<>\n * \t\t\t{ colors.map( ( { color, name }, index ) => {\n * \t\t\t\treturn (\n * \t\t\t\t\t<CircularOptionPicker.Option\n * \t\t\t\t\t\tkey={ `${ color }-${ index }` }\n * \t\t\t\t\t\ttooltipText={ name }\n * \t\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n * \t\t\t\t\t\tisSelected={ index === currentColor }\n * \t\t\t\t\t\tonClick={ () => setCurrentColor( index ) }\n * \t\t\t\t\t\taria-label={ name }\n * \t\t\t\t\t/>\n * \t\t\t\t);\n * \t\t\t} ) }\n * \t\t</>\n * \t);\n * \treturn (\n * \t\t<CircularOptionPicker\n * \t\t\t\toptions={ colorOptions }\n * \t\t\t\tactions={\n * \t\t\t\t\t<CircularOptionPicker.ButtonAction\n * \t\t\t\t\t\tonClick={ () => setCurrentColor( undefined ) }\n * \t\t\t\t\t>\n * \t\t\t\t\t\t{ 'Clear' }\n * \t\t\t\t\t</CircularOptionPicker.ButtonAction>\n * \t\t\t\t}\n * \t\t\t/>\n * \t);\n * };\n * ```\n */\n\nfunction ListboxCircularOptionPicker(\n\tprops: ListboxCircularOptionPickerProps\n) {\n\tconst {\n\t\tactions,\n\t\toptions,\n\t\tbaseId,\n\t\tclassName,\n\t\tloop = true,\n\t\tchildren,\n\t\t...additionalProps\n\t} = props;\n\n\tconst [ activeId, setActiveId ] = useState< string | null | undefined >(\n\t\tundefined\n\t);\n\n\tconst contextValue = useMemo(\n\t\t() => ( {\n\t\t\tbaseId,\n\t\t\tactiveId,\n\t\t\tsetActiveId,\n\t\t} ),\n\t\t[ baseId, activeId, setActiveId ]\n\t);\n\n\treturn (\n\t\t<div className={ className }>\n\t\t\t<CircularOptionPickerContext.Provider value={ contextValue }>\n\t\t\t\t<Composite\n\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\tid={ baseId }\n\t\t\t\t\tfocusLoop={ loop }\n\t\t\t\t\trtl={ isRTL() }\n\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\tactiveId={ activeId }\n\t\t\t\t\tsetActiveId={ setActiveId }\n\t\t\t\t>\n\t\t\t\t\t{ options }\n\t\t\t\t</Composite>\n\t\t\t\t{ children }\n\t\t\t\t{ actions }\n\t\t\t</CircularOptionPickerContext.Provider>\n\t\t</div>\n\t);\n}\n\nfunction ButtonsCircularOptionPicker(\n\tprops: ButtonsCircularOptionPickerProps\n) {\n\tconst { actions, options, children, baseId, ...additionalProps } = props;\n\n\tconst contextValue = useMemo(\n\t\t() => ( {\n\t\t\tbaseId,\n\t\t} ),\n\t\t[ baseId ]\n\t);\n\n\treturn (\n\t\t<div { ...additionalProps } id={ baseId }>\n\t\t\t<CircularOptionPickerContext.Provider value={ contextValue }>\n\t\t\t\t{ options }\n\t\t\t\t{ children }\n\t\t\t\t{ actions }\n\t\t\t</CircularOptionPickerContext.Provider>\n\t\t</div>\n\t);\n}\n\nfunction CircularOptionPicker( props: CircularOptionPickerProps ) {\n\tconst {\n\t\tasButtons,\n\t\tactions: actionsProp,\n\t\toptions: optionsProp,\n\t\tchildren,\n\t\tclassName,\n\t\t...additionalProps\n\t} = props;\n\n\tconst baseId = useInstanceId(\n\t\tCircularOptionPicker,\n\t\t'components-circular-option-picker',\n\t\tadditionalProps.id\n\t);\n\n\tconst OptionPickerImplementation = asButtons\n\t\t? ButtonsCircularOptionPicker\n\t\t: ListboxCircularOptionPicker;\n\n\tconst actions = actionsProp ? (\n\t\t<div className=\"components-circular-option-picker__custom-clear-wrapper\">\n\t\t\t{ actionsProp }\n\t\t</div>\n\t) : undefined;\n\n\tconst options = (\n\t\t<div className=\"components-circular-option-picker__swatches\">\n\t\t\t{ optionsProp }\n\t\t</div>\n\t);\n\n\treturn (\n\t\t<OptionPickerImplementation\n\t\t\t{ ...additionalProps }\n\t\t\tbaseId={ baseId }\n\t\t\tclassName={ clsx( 'components-circular-option-picker', className ) }\n\t\t\tactions={ actions }\n\t\t\toptions={ options }\n\t\t>\n\t\t\t{ children }\n\t\t</OptionPickerImplementation>\n\t);\n}\n\nCircularOptionPicker.Option = Option;\nCircularOptionPicker.OptionGroup = OptionGroup;\nCircularOptionPicker.ButtonAction = ButtonAction;\nCircularOptionPicker.DropdownLinkAction = DropdownLinkAction;\n\nexport default CircularOptionPicker;\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AAKA,IAAAI,4BAAA,GAAAJ,OAAA;AACA,IAAAK,UAAA,GAAAL,OAAA;AAMA,IAAAM,2BAAA,GAAAN,OAAA;AACA,IAAAO,gCAAA,GAAAP,OAAA;AACA,IAAAQ,4BAAA,GAAAR,OAAA;AAG0C,IAAAS,WAAA,GAAAT,OAAA;AA3B1C;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;;AAeA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAEA,SAASU,2BAA2BA,CACnCC,KAAuC,EACtC;EACD,MAAM;IACLC,OAAO;IACPC,OAAO;IACPC,MAAM;IACNC,SAAS;IACTC,IAAI,GAAG,IAAI;IACXC,QAAQ;IACR,GAAGC;EACJ,CAAC,GAAGP,KAAK;EAET,MAAM,CAAEQ,QAAQ,EAAEC,WAAW,CAAE,GAAG,IAAAC,iBAAQ,EACzCC,SACD,CAAC;EAED,MAAMC,YAAY,GAAG,IAAAC,gBAAO,EAC3B,OAAQ;IACPV,MAAM;IACNK,QAAQ;IACRC;EACD,CAAC,CAAE,EACH,CAAEN,MAAM,EAAEK,QAAQ,EAAEC,WAAW,CAChC,CAAC;EAED,oBACC,IAAAX,WAAA,CAAAgB,GAAA;IAAKV,SAAS,EAAGA,SAAW;IAAAE,QAAA,eAC3B,IAAAR,WAAA,CAAAiB,IAAA,EAACtB,4BAAA,CAAAuB,2BAA2B,CAACC,QAAQ;MAACC,KAAK,EAAGN,YAAc;MAAAN,QAAA,gBAC3D,IAAAR,WAAA,CAAAgB,GAAA,EAACpB,UAAA,CAAAyB,SAAS;QAAA,GACJZ,eAAe;QACpBa,EAAE,EAAGjB,MAAQ;QACbkB,SAAS,EAAGhB,IAAM;QAClBiB,GAAG,EAAG,IAAAC,WAAK,EAAC,CAAG;QACfC,IAAI,EAAC,SAAS;QACdhB,QAAQ,EAAGA,QAAU;QACrBC,WAAW,EAAGA,WAAa;QAAAH,QAAA,EAEzBJ;MAAO,CACC,CAAC,EACVI,QAAQ,EACRL,OAAO;IAAA,CAC4B;EAAC,CACnC,CAAC;AAER;AAEA,SAASwB,2BAA2BA,CACnCzB,KAAuC,EACtC;EACD,MAAM;IAAEC,OAAO;IAAEC,OAAO;IAAEI,QAAQ;IAAEH,MAAM;IAAE,GAAGI;EAAgB,CAAC,GAAGP,KAAK;EAExE,MAAMY,YAAY,GAAG,IAAAC,gBAAO,EAC3B,OAAQ;IACPV;EACD,CAAC,CAAE,EACH,CAAEA,MAAM,CACT,CAAC;EAED,oBACC,IAAAL,WAAA,CAAAgB,GAAA;IAAA,GAAUP,eAAe;IAAGa,EAAE,EAAGjB,MAAQ;IAAAG,QAAA,eACxC,IAAAR,WAAA,CAAAiB,IAAA,EAACtB,4BAAA,CAAAuB,2BAA2B,CAACC,QAAQ;MAACC,KAAK,EAAGN,YAAc;MAAAN,QAAA,GACzDJ,OAAO,EACPI,QAAQ,EACRL,OAAO;IAAA,CAC4B;EAAC,CACnC,CAAC;AAER;AAEA,SAASyB,oBAAoBA,CAAE1B,KAAgC,EAAG;EACjE,MAAM;IACL2B,SAAS;IACT1B,OAAO,EAAE2B,WAAW;IACpB1B,OAAO,EAAE2B,WAAW;IACpBvB,QAAQ;IACRF,SAAS;IACT,GAAGG;EACJ,CAAC,GAAGP,KAAK;EAET,MAAMG,MAAM,GAAG,IAAA2B,sBAAa,EAC3BJ,oBAAoB,EACpB,mCAAmC,EACnCnB,eAAe,CAACa,EACjB,CAAC;EAED,MAAMW,0BAA0B,GAAGJ,SAAS,GACzCF,2BAA2B,GAC3B1B,2BAA2B;EAE9B,MAAME,OAAO,GAAG2B,WAAW,gBAC1B,IAAA9B,WAAA,CAAAgB,GAAA;IAAKV,SAAS,EAAC,yDAAyD;IAAAE,QAAA,EACrEsB;EAAW,CACT,CAAC,GACHjB,SAAS;EAEb,MAAMT,OAAO,gBACZ,IAAAJ,WAAA,CAAAgB,GAAA;IAAKV,SAAS,EAAC,6CAA6C;IAAAE,QAAA,EACzDuB;EAAW,CACT,CACL;EAED,oBACC,IAAA/B,WAAA,CAAAgB,GAAA,EAACiB,0BAA0B;IAAA,GACrBxB,eAAe;IACpBJ,MAAM,EAAGA,MAAQ;IACjBC,SAAS,EAAG,IAAA4B,aAAI,EAAE,mCAAmC,EAAE5B,SAAU,CAAG;IACpEH,OAAO,EAAGA,OAAS;IACnBC,OAAO,EAAGA,OAAS;IAAAI,QAAA,EAEjBA;EAAQ,CACiB,CAAC;AAE/B;AAEAoB,oBAAoB,CAACO,MAAM,GAAGA,kCAAM;AACpCP,oBAAoB,CAACQ,WAAW,GAAGA,4CAAW;AAC9CR,oBAAoB,CAACS,YAAY,GAAGA,yCAAY;AAChDT,oBAAoB,CAACU,kBAAkB,GAAGA,+CAAkB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAE9Cb,oBAAoB","ignoreList":[]}

package/build/circular-option-picker/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/circular-option-picker/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport type { Icon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport type { ButtonAsButtonProps } from '../button/types';\nimport type { DropdownProps } from '../dropdown/types';\nimport type { WordPressComponentProps } from '../context';\nimport type { Composite } from '../composite';\n\ntype CommonCircularOptionPickerProps = {\n\t/**\n\t * An ID to apply to the component.\n\t */\n\tid?: string;\n\t/**\n\t * A CSS class to apply to the wrapper element.\n\t */\n\tclassName?: string;\n\t/**\n\t * The action(s) to be rendered after the options,\n\t * such as a 'clear' button as seen in `ColorPalette`.\n\t * Usually a `CircularOptionPicker.ButtonAction` or\n\t * `CircularOptionPicker.DropdownLinkAction` component.\n\t */\n\tactions?: ReactNode;\n\t/**\n\t * The options to be rendered, such as color swatches.\n\t * Usually a `CircularOptionPicker.Option` component.\n\t */\n\toptions: ReactNode;\n\t/**\n\t * The child elements.\n\t */\n\tchildren?: ReactNode;\n};\n\ntype WithBaseId = {\n\tbaseId: string;\n};\n\ntype FullListboxCircularOptionPickerProps = CommonCircularOptionPickerProps & {\n\t/**\n\t * Whether the control should present as a set of buttons,\n\t * each with its own tab stop.\n\t */\n\tasButtons?: false;\n\t/**\n\t * Prevents keyboard interaction from wrapping around.\n\t * Only used when `asButtons` is not true.\n\t *\n\t * @default true\n\t */\n\tloop?: boolean;\n} & (\n\t\t| {\n\t\t\t\t'aria-label': string;\n\t\t\t\t'aria-labelledby'?: never;\n\t\t  }\n\t\t| {\n\t\t\t\t'aria-label'?: never;\n\t\t\t\t'aria-labelledby': string;\n\t\t  }\n\t);\n\nexport type ListboxCircularOptionPickerProps = WithBaseId &\n\tOmit< FullListboxCircularOptionPickerProps, 'asButtons' >;\n\ntype FullButtonsCircularOptionPickerProps = CommonCircularOptionPickerProps & {\n\t/**\n\t * Whether the control should present as a set of buttons,\n\t * each with its own tab stop.\n\t *\n\t * @default false\n\t */\n\tasButtons: true;\n};\n\nexport type ButtonsCircularOptionPickerProps = WithBaseId &\n\tOmit< FullButtonsCircularOptionPickerProps, 'asButtons' >;\n\nexport type CircularOptionPickerProps =\n\t| FullListboxCircularOptionPickerProps\n\t| FullButtonsCircularOptionPickerProps;\n\nexport type DropdownLinkActionProps = {\n\tbuttonProps?: Omit<\n\t\tWordPressComponentProps< ButtonAsButtonProps, 'button', false >,\n\t\t'children'\n\t>;\n\tlinkText: string;\n\tdropdownProps: Omit< DropdownProps, 'className' | 'renderToggle' >;\n\tclassName?: string;\n};\n\nexport type OptionGroupProps = {\n\tclassName?: string;\n\toptions: ReactNode;\n};\n\nexport type OptionProps = Omit<\n\tWordPressComponentProps< ButtonAsButtonProps, 'button', false >,\n\t'isPressed' | 'className'\n> & {\n\tclassName?: string;\n\ttooltipText?: string;\n\tisSelected?: boolean;\n\t// `icon` is explicitly defined as 'check' by CircleOptionPicker.Option\n\t// and is not intended to be overridden.\n\t// `size` relies on the `Icon` component's default size of `24` to fit\n\t// `CircularOptionPicker`'s design, and should not be explicitly set.\n\tselectedIconProps?: Omit<\n\t\tReact.ComponentProps< typeof Icon >,\n\t\t'icon' | 'size'\n\t>;\n};\n\nexport type CircularOptionPickerContextProps = {\n\tbaseId?: string;\n\tcompositeStore?: React.ComponentProps< typeof Composite >[ 'store' ];\n};\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["@wordpress/components/src/circular-option-picker/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport type { Icon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport type { ButtonAsButtonProps } from '../button/types';\nimport type { DropdownProps } from '../dropdown/types';\nimport type { WordPressComponentProps } from '../context';\n\ntype CommonCircularOptionPickerProps = {\n\t/**\n\t * An ID to apply to the component.\n\t */\n\tid?: string;\n\t/**\n\t * A CSS class to apply to the wrapper element.\n\t */\n\tclassName?: string;\n\t/**\n\t * The action(s) to be rendered after the options,\n\t * such as a 'clear' button as seen in `ColorPalette`.\n\t * Usually a `CircularOptionPicker.ButtonAction` or\n\t * `CircularOptionPicker.DropdownLinkAction` component.\n\t */\n\tactions?: ReactNode;\n\t/**\n\t * The options to be rendered, such as color swatches.\n\t * Usually a `CircularOptionPicker.Option` component.\n\t */\n\toptions: ReactNode;\n\t/**\n\t * The child elements.\n\t */\n\tchildren?: ReactNode;\n};\n\ntype WithBaseId = {\n\tbaseId: string;\n};\n\ntype FullListboxCircularOptionPickerProps = CommonCircularOptionPickerProps & {\n\t/**\n\t * Whether the control should present as a set of buttons,\n\t * each with its own tab stop.\n\t */\n\tasButtons?: false;\n\t/**\n\t * Prevents keyboard interaction from wrapping around.\n\t * Only used when `asButtons` is not true.\n\t *\n\t * @default true\n\t */\n\tloop?: boolean;\n} & (\n\t\t| {\n\t\t\t\t'aria-label': string;\n\t\t\t\t'aria-labelledby'?: never;\n\t\t  }\n\t\t| {\n\t\t\t\t'aria-label'?: never;\n\t\t\t\t'aria-labelledby': string;\n\t\t  }\n\t);\n\nexport type ListboxCircularOptionPickerProps = WithBaseId &\n\tOmit< FullListboxCircularOptionPickerProps, 'asButtons' >;\n\ntype FullButtonsCircularOptionPickerProps = CommonCircularOptionPickerProps & {\n\t/**\n\t * Whether the control should present as a set of buttons,\n\t * each with its own tab stop.\n\t *\n\t * @default false\n\t */\n\tasButtons: true;\n};\n\nexport type ButtonsCircularOptionPickerProps = WithBaseId &\n\tOmit< FullButtonsCircularOptionPickerProps, 'asButtons' >;\n\nexport type CircularOptionPickerProps =\n\t| FullListboxCircularOptionPickerProps\n\t| FullButtonsCircularOptionPickerProps;\n\nexport type DropdownLinkActionProps = {\n\tbuttonProps?: Omit<\n\t\tWordPressComponentProps< ButtonAsButtonProps, 'button', false >,\n\t\t'children'\n\t>;\n\tlinkText: string;\n\tdropdownProps: Omit< DropdownProps, 'className' | 'renderToggle' >;\n\tclassName?: string;\n};\n\nexport type OptionGroupProps = {\n\tclassName?: string;\n\toptions: ReactNode;\n};\n\nexport type OptionProps = Omit<\n\tWordPressComponentProps< ButtonAsButtonProps, 'button', false >,\n\t'isPressed' | 'className'\n> & {\n\tclassName?: string;\n\ttooltipText?: string;\n\tisSelected?: boolean;\n\t// `icon` is explicitly defined as 'check' by CircleOptionPicker.Option\n\t// and is not intended to be overridden.\n\t// `size` relies on the `Icon` component's default size of `24` to fit\n\t// `CircularOptionPicker`'s design, and should not be explicitly set.\n\tselectedIconProps?: Omit<\n\t\tReact.ComponentProps< typeof Icon >,\n\t\t'icon' | 'size'\n\t>;\n};\n\nexport type CircularOptionPickerContextProps = {\n\tbaseId?: string;\n\tactiveId?: string | null | undefined;\n\tsetActiveId?: ( newId: string | null | undefined ) => void;\n};\n"],"mappings":"","ignoreList":[]}

package/build/clipboard-button/index.js

@@ -36,19 +36,19 @@ function ClipboardButton({
     since: '5.8',
     alternative: 'wp.compose.useCopyToClipboard'
   });
-  const timeoutId = (0, _element.useRef)();
+  const timeoutIdRef = (0, _element.useRef)();
   const ref = (0, _compose.useCopyToClipboard)(text, () => {
     onCopy();
-    if (timeoutId.current) {
-      clearTimeout(timeoutId.current);
+    if (timeoutIdRef.current) {
+      clearTimeout(timeoutIdRef.current);
     }
     if (onFinishCopy) {
-      timeoutId.current = setTimeout(() => onFinishCopy(), TIMEOUT);
+      timeoutIdRef.current = setTimeout(() => onFinishCopy(), TIMEOUT);
     }
   });
   (0, _element.useEffect)(() => {
-    if (timeoutId.current) {
-      clearTimeout(timeoutId.current);
+    if (timeoutIdRef.current) {
+      clearTimeout(timeoutIdRef.current);
     }
   }, []);
   const classes = (0, _clsx.default)('components-clipboard-button', className);