@wordpress/components 22.1.0 → 23.0.0

package/build-module/number-control/styles/number-control-styles.js

@@ -2,8 +2,6 @@ import _styled from "@emotion/styled/base";
 
 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)."; }
 
-// @ts-nocheck
-
 /**
  * External dependencies
  */
@@ -23,7 +21,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
 } : {
   name: "jl4rev-htmlArrowStyles",
   styles: "input[type='number']::-webkit-outer-spin-button,input[type='number']::-webkit-inner-spin-button{-webkit-appearance:none!important;margin:0!important;}input[type='number']{-moz-appearance:textfield;};label:htmlArrowStyles;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvbnVtYmVyLWNvbnRyb2wvc3R5bGVzL251bWJlci1jb250cm9sLXN0eWxlcy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFvQlciLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9udW1iZXItY29udHJvbC9zdHlsZXMvbnVtYmVyLWNvbnRyb2wtc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLy8gQHRzLW5vY2hlY2tcbi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IElucHV0Q29udHJvbCBmcm9tICcuLi8uLi9pbnB1dC1jb250cm9sJztcbmltcG9ydCB7IENPTE9SUyB9IGZyb20gJy4uLy4uL3V0aWxzJztcbmltcG9ydCBCdXR0b24gZnJvbSAnLi4vLi4vYnV0dG9uJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vLi4vdWkvdXRpbHMvc3BhY2UnO1xuXG5jb25zdCBodG1sQXJyb3dTdHlsZXMgPSAoIHsgaGlkZUhUTUxBcnJvd3MgfSApID0+IHtcblx0aWYgKCAhIGhpZGVIVE1MQXJyb3dzICkge1xuXHRcdHJldHVybiBgYDtcblx0fVxuXG5cdHJldHVybiBjc3NgXG5cdFx0aW5wdXRbdHlwZT0nbnVtYmVyJ106Oi13ZWJraXQtb3V0ZXItc3Bpbi1idXR0b24sXG5cdFx0aW5wdXRbdHlwZT0nbnVtYmVyJ106Oi13ZWJraXQtaW5uZXItc3Bpbi1idXR0b24ge1xuXHRcdFx0LXdlYmtpdC1hcHBlYXJhbmNlOiBub25lICFpbXBvcnRhbnQ7XG5cdFx0XHRtYXJnaW46IDAgIWltcG9ydGFudDtcblx0XHR9XG5cblx0XHRpbnB1dFt0eXBlPSdudW1iZXInXSB7XG5cdFx0XHQtbW96LWFwcGVhcmFuY2U6IHRleHRmaWVsZDtcblx0XHR9XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgSW5wdXQgPSBzdHlsZWQoIElucHV0Q29udHJvbCApYFxuXHQkeyBodG1sQXJyb3dTdHlsZXMgfTtcbmA7XG5cbmNvbnN0IHNwaW5CdXR0b25TaXplU3R5bGVzID0gKCB7IHNpemUgfSApID0+IHtcblx0aWYgKCBzaXplICE9PSAnc21hbGwnICkge1xuXHRcdHJldHVybiBgYDtcblx0fVxuXG5cdHJldHVybiBjc3NgXG5cdFx0d2lkdGg6ICR7IHNwYWNlKCA1ICkgfTtcblx0XHRtaW4td2lkdGg6ICR7IHNwYWNlKCA1ICkgfTtcblx0XHRoZWlnaHQ6ICR7IHNwYWNlKCA1ICkgfTtcblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBTcGluQnV0dG9uID0gc3R5bGVkKCBCdXR0b24gKWBcblx0JiYmJiYge1xuXHRcdGNvbG9yOiAkeyBDT0xPUlMudWkudGhlbWUgfTtcblx0XHQkeyBzcGluQnV0dG9uU2l6ZVN0eWxlcyB9XG5cdH1cbmA7XG4iXX0= */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvbnVtYmVyLWNvbnRyb2wvc3R5bGVzL251bWJlci1jb250cm9sLXN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFvQlciLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9udW1iZXItY29udHJvbC9zdHlsZXMvbnVtYmVyLWNvbnRyb2wtc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgSW5wdXRDb250cm9sIGZyb20gJy4uLy4uL2lucHV0LWNvbnRyb2wnO1xuaW1wb3J0IHsgQ09MT1JTIH0gZnJvbSAnLi4vLi4vdXRpbHMnO1xuaW1wb3J0IEJ1dHRvbiBmcm9tICcuLi8uLi9idXR0b24nO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi8uLi91aS91dGlscy9zcGFjZSc7XG5pbXBvcnQgdHlwZSB7IE51bWJlckNvbnRyb2xQcm9wcyB9IGZyb20gJy4uL3R5cGVzJztcblxuY29uc3QgaHRtbEFycm93U3R5bGVzID0gKCB7IGhpZGVIVE1MQXJyb3dzIH06IHsgaGlkZUhUTUxBcnJvd3M6IGJvb2xlYW4gfSApID0+IHtcblx0aWYgKCAhIGhpZGVIVE1MQXJyb3dzICkge1xuXHRcdHJldHVybiBgYDtcblx0fVxuXG5cdHJldHVybiBjc3NgXG5cdFx0aW5wdXRbdHlwZT0nbnVtYmVyJ106Oi13ZWJraXQtb3V0ZXItc3Bpbi1idXR0b24sXG5cdFx0aW5wdXRbdHlwZT0nbnVtYmVyJ106Oi13ZWJraXQtaW5uZXItc3Bpbi1idXR0b24ge1xuXHRcdFx0LXdlYmtpdC1hcHBlYXJhbmNlOiBub25lICFpbXBvcnRhbnQ7XG5cdFx0XHRtYXJnaW46IDAgIWltcG9ydGFudDtcblx0XHR9XG5cblx0XHRpbnB1dFt0eXBlPSdudW1iZXInXSB7XG5cdFx0XHQtbW96LWFwcGVhcmFuY2U6IHRleHRmaWVsZDtcblx0XHR9XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgSW5wdXQgPSBzdHlsZWQoIElucHV0Q29udHJvbCApYFxuXHQkeyBodG1sQXJyb3dTdHlsZXMgfTtcbmA7XG5cbmNvbnN0IHNwaW5CdXR0b25TaXplU3R5bGVzID0gKCB7XG5cdHNpemUsXG59OiBQaWNrPCBOdW1iZXJDb250cm9sUHJvcHMsICdzaXplJyA+ICkgPT4ge1xuXHRpZiAoIHNpemUgIT09ICdzbWFsbCcgKSB7XG5cdFx0cmV0dXJuIGBgO1xuXHR9XG5cblx0cmV0dXJuIGNzc2Bcblx0XHR3aWR0aDogJHsgc3BhY2UoIDUgKSB9O1xuXHRcdG1pbi13aWR0aDogJHsgc3BhY2UoIDUgKSB9O1xuXHRcdGhlaWdodDogJHsgc3BhY2UoIDUgKSB9O1xuXHRgO1xufTtcblxuZXhwb3J0IGNvbnN0IFNwaW5CdXR0b24gPSBzdHlsZWQoIEJ1dHRvbiApYFxuXHQmJiYmJiB7XG5cdFx0Y29sb3I6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHRcdCR7IHNwaW5CdXR0b25TaXplU3R5bGVzIH1cblx0fVxuYDtcbiJdfQ== */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
@@ -40,11 +38,11 @@ const htmlArrowStyles = _ref2 => {
 };
 
 export const Input = /*#__PURE__*/_styled(InputControl, process.env.NODE_ENV === "production" ? {
-  target: "ep48uk91"
+  target: "ep09it41"
 } : {
-  target: "ep48uk91",
+  target: "ep09it41",
   label: "Input"
-})(htmlArrowStyles, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvbnVtYmVyLWNvbnRyb2wvc3R5bGVzL251bWJlci1jb250cm9sLXN0eWxlcy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQzJDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvbnVtYmVyLWNvbnRyb2wvc3R5bGVzL251bWJlci1jb250cm9sLXN0eWxlcy5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8vIEB0cy1ub2NoZWNrXG4vKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBJbnB1dENvbnRyb2wgZnJvbSAnLi4vLi4vaW5wdXQtY29udHJvbCc7XG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgQnV0dG9uIGZyb20gJy4uLy4uL2J1dHRvbic7XG5pbXBvcnQgeyBzcGFjZSB9IGZyb20gJy4uLy4uL3VpL3V0aWxzL3NwYWNlJztcblxuY29uc3QgaHRtbEFycm93U3R5bGVzID0gKCB7IGhpZGVIVE1MQXJyb3dzIH0gKSA9PiB7XG5cdGlmICggISBoaWRlSFRNTEFycm93cyApIHtcblx0XHRyZXR1cm4gYGA7XG5cdH1cblxuXHRyZXR1cm4gY3NzYFxuXHRcdGlucHV0W3R5cGU9J251bWJlciddOjotd2Via2l0LW91dGVyLXNwaW4tYnV0dG9uLFxuXHRcdGlucHV0W3R5cGU9J251bWJlciddOjotd2Via2l0LWlubmVyLXNwaW4tYnV0dG9uIHtcblx0XHRcdC13ZWJraXQtYXBwZWFyYW5jZTogbm9uZSAhaW1wb3J0YW50O1xuXHRcdFx0bWFyZ2luOiAwICFpbXBvcnRhbnQ7XG5cdFx0fVxuXG5cdFx0aW5wdXRbdHlwZT0nbnVtYmVyJ10ge1xuXHRcdFx0LW1vei1hcHBlYXJhbmNlOiB0ZXh0ZmllbGQ7XG5cdFx0fVxuXHRgO1xufTtcblxuZXhwb3J0IGNvbnN0IElucHV0ID0gc3R5bGVkKCBJbnB1dENvbnRyb2wgKWBcblx0JHsgaHRtbEFycm93U3R5bGVzIH07XG5gO1xuXG5jb25zdCBzcGluQnV0dG9uU2l6ZVN0eWxlcyA9ICggeyBzaXplIH0gKSA9PiB7XG5cdGlmICggc2l6ZSAhPT0gJ3NtYWxsJyApIHtcblx0XHRyZXR1cm4gYGA7XG5cdH1cblxuXHRyZXR1cm4gY3NzYFxuXHRcdHdpZHRoOiAkeyBzcGFjZSggNSApIH07XG5cdFx0bWluLXdpZHRoOiAkeyBzcGFjZSggNSApIH07XG5cdFx0aGVpZ2h0OiAkeyBzcGFjZSggNSApIH07XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgU3BpbkJ1dHRvbiA9IHN0eWxlZCggQnV0dG9uIClgXG5cdCYmJiYmIHtcblx0XHRjb2xvcjogJHsgQ09MT1JTLnVpLnRoZW1lIH07XG5cdFx0JHsgc3BpbkJ1dHRvblNpemVTdHlsZXMgfVxuXHR9XG5gO1xuIl19 */"));
+})(htmlArrowStyles, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvbnVtYmVyLWNvbnRyb2wvc3R5bGVzL251bWJlci1jb250cm9sLXN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQzJDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvbnVtYmVyLWNvbnRyb2wvc3R5bGVzL251bWJlci1jb250cm9sLXN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IElucHV0Q29udHJvbCBmcm9tICcuLi8uLi9pbnB1dC1jb250cm9sJztcbmltcG9ydCB7IENPTE9SUyB9IGZyb20gJy4uLy4uL3V0aWxzJztcbmltcG9ydCBCdXR0b24gZnJvbSAnLi4vLi4vYnV0dG9uJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vLi4vdWkvdXRpbHMvc3BhY2UnO1xuaW1wb3J0IHR5cGUgeyBOdW1iZXJDb250cm9sUHJvcHMgfSBmcm9tICcuLi90eXBlcyc7XG5cbmNvbnN0IGh0bWxBcnJvd1N0eWxlcyA9ICggeyBoaWRlSFRNTEFycm93cyB9OiB7IGhpZGVIVE1MQXJyb3dzOiBib29sZWFuIH0gKSA9PiB7XG5cdGlmICggISBoaWRlSFRNTEFycm93cyApIHtcblx0XHRyZXR1cm4gYGA7XG5cdH1cblxuXHRyZXR1cm4gY3NzYFxuXHRcdGlucHV0W3R5cGU9J251bWJlciddOjotd2Via2l0LW91dGVyLXNwaW4tYnV0dG9uLFxuXHRcdGlucHV0W3R5cGU9J251bWJlciddOjotd2Via2l0LWlubmVyLXNwaW4tYnV0dG9uIHtcblx0XHRcdC13ZWJraXQtYXBwZWFyYW5jZTogbm9uZSAhaW1wb3J0YW50O1xuXHRcdFx0bWFyZ2luOiAwICFpbXBvcnRhbnQ7XG5cdFx0fVxuXG5cdFx0aW5wdXRbdHlwZT0nbnVtYmVyJ10ge1xuXHRcdFx0LW1vei1hcHBlYXJhbmNlOiB0ZXh0ZmllbGQ7XG5cdFx0fVxuXHRgO1xufTtcblxuZXhwb3J0IGNvbnN0IElucHV0ID0gc3R5bGVkKCBJbnB1dENvbnRyb2wgKWBcblx0JHsgaHRtbEFycm93U3R5bGVzIH07XG5gO1xuXG5jb25zdCBzcGluQnV0dG9uU2l6ZVN0eWxlcyA9ICgge1xuXHRzaXplLFxufTogUGljazwgTnVtYmVyQ29udHJvbFByb3BzLCAnc2l6ZScgPiApID0+IHtcblx0aWYgKCBzaXplICE9PSAnc21hbGwnICkge1xuXHRcdHJldHVybiBgYDtcblx0fVxuXG5cdHJldHVybiBjc3NgXG5cdFx0d2lkdGg6ICR7IHNwYWNlKCA1ICkgfTtcblx0XHRtaW4td2lkdGg6ICR7IHNwYWNlKCA1ICkgfTtcblx0XHRoZWlnaHQ6ICR7IHNwYWNlKCA1ICkgfTtcblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBTcGluQnV0dG9uID0gc3R5bGVkKCBCdXR0b24gKWBcblx0JiYmJiYge1xuXHRcdGNvbG9yOiAkeyBDT0xPUlMudWkudGhlbWUgfTtcblx0XHQkeyBzcGluQnV0dG9uU2l6ZVN0eWxlcyB9XG5cdH1cbmA7XG4iXX0= */"));
 
 const spinButtonSizeStyles = _ref3 => {
   let {
@@ -55,13 +53,13 @@ const spinButtonSizeStyles = _ref3 => {
     return ``;
   }
 
-  return /*#__PURE__*/css("width:", space(5), ";min-width:", space(5), ";height:", space(5), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:spinButtonSizeStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvbnVtYmVyLWNvbnRyb2wvc3R5bGVzL251bWJlci1jb250cm9sLXN0eWxlcy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEwQ1ciLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9udW1iZXItY29udHJvbC9zdHlsZXMvbnVtYmVyLWNvbnRyb2wtc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLy8gQHRzLW5vY2hlY2tcbi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IElucHV0Q29udHJvbCBmcm9tICcuLi8uLi9pbnB1dC1jb250cm9sJztcbmltcG9ydCB7IENPTE9SUyB9IGZyb20gJy4uLy4uL3V0aWxzJztcbmltcG9ydCBCdXR0b24gZnJvbSAnLi4vLi4vYnV0dG9uJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vLi4vdWkvdXRpbHMvc3BhY2UnO1xuXG5jb25zdCBodG1sQXJyb3dTdHlsZXMgPSAoIHsgaGlkZUhUTUxBcnJvd3MgfSApID0+IHtcblx0aWYgKCAhIGhpZGVIVE1MQXJyb3dzICkge1xuXHRcdHJldHVybiBgYDtcblx0fVxuXG5cdHJldHVybiBjc3NgXG5cdFx0aW5wdXRbdHlwZT0nbnVtYmVyJ106Oi13ZWJraXQtb3V0ZXItc3Bpbi1idXR0b24sXG5cdFx0aW5wdXRbdHlwZT0nbnVtYmVyJ106Oi13ZWJraXQtaW5uZXItc3Bpbi1idXR0b24ge1xuXHRcdFx0LXdlYmtpdC1hcHBlYXJhbmNlOiBub25lICFpbXBvcnRhbnQ7XG5cdFx0XHRtYXJnaW46IDAgIWltcG9ydGFudDtcblx0XHR9XG5cblx0XHRpbnB1dFt0eXBlPSdudW1iZXInXSB7XG5cdFx0XHQtbW96LWFwcGVhcmFuY2U6IHRleHRmaWVsZDtcblx0XHR9XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgSW5wdXQgPSBzdHlsZWQoIElucHV0Q29udHJvbCApYFxuXHQkeyBodG1sQXJyb3dTdHlsZXMgfTtcbmA7XG5cbmNvbnN0IHNwaW5CdXR0b25TaXplU3R5bGVzID0gKCB7IHNpemUgfSApID0+IHtcblx0aWYgKCBzaXplICE9PSAnc21hbGwnICkge1xuXHRcdHJldHVybiBgYDtcblx0fVxuXG5cdHJldHVybiBjc3NgXG5cdFx0d2lkdGg6ICR7IHNwYWNlKCA1ICkgfTtcblx0XHRtaW4td2lkdGg6ICR7IHNwYWNlKCA1ICkgfTtcblx0XHRoZWlnaHQ6ICR7IHNwYWNlKCA1ICkgfTtcblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBTcGluQnV0dG9uID0gc3R5bGVkKCBCdXR0b24gKWBcblx0JiYmJiYge1xuXHRcdGNvbG9yOiAkeyBDT0xPUlMudWkudGhlbWUgfTtcblx0XHQkeyBzcGluQnV0dG9uU2l6ZVN0eWxlcyB9XG5cdH1cbmA7XG4iXX0= */");
+  return /*#__PURE__*/css("width:", space(5), ";min-width:", space(5), ";height:", space(5), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:spinButtonSizeStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvbnVtYmVyLWNvbnRyb2wvc3R5bGVzL251bWJlci1jb250cm9sLXN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE0Q1ciLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9udW1iZXItY29udHJvbC9zdHlsZXMvbnVtYmVyLWNvbnRyb2wtc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgSW5wdXRDb250cm9sIGZyb20gJy4uLy4uL2lucHV0LWNvbnRyb2wnO1xuaW1wb3J0IHsgQ09MT1JTIH0gZnJvbSAnLi4vLi4vdXRpbHMnO1xuaW1wb3J0IEJ1dHRvbiBmcm9tICcuLi8uLi9idXR0b24nO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi8uLi91aS91dGlscy9zcGFjZSc7XG5pbXBvcnQgdHlwZSB7IE51bWJlckNvbnRyb2xQcm9wcyB9IGZyb20gJy4uL3R5cGVzJztcblxuY29uc3QgaHRtbEFycm93U3R5bGVzID0gKCB7IGhpZGVIVE1MQXJyb3dzIH06IHsgaGlkZUhUTUxBcnJvd3M6IGJvb2xlYW4gfSApID0+IHtcblx0aWYgKCAhIGhpZGVIVE1MQXJyb3dzICkge1xuXHRcdHJldHVybiBgYDtcblx0fVxuXG5cdHJldHVybiBjc3NgXG5cdFx0aW5wdXRbdHlwZT0nbnVtYmVyJ106Oi13ZWJraXQtb3V0ZXItc3Bpbi1idXR0b24sXG5cdFx0aW5wdXRbdHlwZT0nbnVtYmVyJ106Oi13ZWJraXQtaW5uZXItc3Bpbi1idXR0b24ge1xuXHRcdFx0LXdlYmtpdC1hcHBlYXJhbmNlOiBub25lICFpbXBvcnRhbnQ7XG5cdFx0XHRtYXJnaW46IDAgIWltcG9ydGFudDtcblx0XHR9XG5cblx0XHRpbnB1dFt0eXBlPSdudW1iZXInXSB7XG5cdFx0XHQtbW96LWFwcGVhcmFuY2U6IHRleHRmaWVsZDtcblx0XHR9XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgSW5wdXQgPSBzdHlsZWQoIElucHV0Q29udHJvbCApYFxuXHQkeyBodG1sQXJyb3dTdHlsZXMgfTtcbmA7XG5cbmNvbnN0IHNwaW5CdXR0b25TaXplU3R5bGVzID0gKCB7XG5cdHNpemUsXG59OiBQaWNrPCBOdW1iZXJDb250cm9sUHJvcHMsICdzaXplJyA+ICkgPT4ge1xuXHRpZiAoIHNpemUgIT09ICdzbWFsbCcgKSB7XG5cdFx0cmV0dXJuIGBgO1xuXHR9XG5cblx0cmV0dXJuIGNzc2Bcblx0XHR3aWR0aDogJHsgc3BhY2UoIDUgKSB9O1xuXHRcdG1pbi13aWR0aDogJHsgc3BhY2UoIDUgKSB9O1xuXHRcdGhlaWdodDogJHsgc3BhY2UoIDUgKSB9O1xuXHRgO1xufTtcblxuZXhwb3J0IGNvbnN0IFNwaW5CdXR0b24gPSBzdHlsZWQoIEJ1dHRvbiApYFxuXHQmJiYmJiB7XG5cdFx0Y29sb3I6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHRcdCR7IHNwaW5CdXR0b25TaXplU3R5bGVzIH1cblx0fVxuYDtcbiJdfQ== */");
 };
 
 export const SpinButton = /*#__PURE__*/_styled(Button, process.env.NODE_ENV === "production" ? {
-  target: "ep48uk90"
+  target: "ep09it40"
 } : {
-  target: "ep48uk90",
+  target: "ep09it40",
   label: "SpinButton"
-})("&&&&&{color:", COLORS.ui.theme, ";", spinButtonSizeStyles, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvbnVtYmVyLWNvbnRyb2wvc3R5bGVzL251bWJlci1jb250cm9sLXN0eWxlcy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpRDBDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvbnVtYmVyLWNvbnRyb2wvc3R5bGVzL251bWJlci1jb250cm9sLXN0eWxlcy5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8vIEB0cy1ub2NoZWNrXG4vKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBJbnB1dENvbnRyb2wgZnJvbSAnLi4vLi4vaW5wdXQtY29udHJvbCc7XG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgQnV0dG9uIGZyb20gJy4uLy4uL2J1dHRvbic7XG5pbXBvcnQgeyBzcGFjZSB9IGZyb20gJy4uLy4uL3VpL3V0aWxzL3NwYWNlJztcblxuY29uc3QgaHRtbEFycm93U3R5bGVzID0gKCB7IGhpZGVIVE1MQXJyb3dzIH0gKSA9PiB7XG5cdGlmICggISBoaWRlSFRNTEFycm93cyApIHtcblx0XHRyZXR1cm4gYGA7XG5cdH1cblxuXHRyZXR1cm4gY3NzYFxuXHRcdGlucHV0W3R5cGU9J251bWJlciddOjotd2Via2l0LW91dGVyLXNwaW4tYnV0dG9uLFxuXHRcdGlucHV0W3R5cGU9J251bWJlciddOjotd2Via2l0LWlubmVyLXNwaW4tYnV0dG9uIHtcblx0XHRcdC13ZWJraXQtYXBwZWFyYW5jZTogbm9uZSAhaW1wb3J0YW50O1xuXHRcdFx0bWFyZ2luOiAwICFpbXBvcnRhbnQ7XG5cdFx0fVxuXG5cdFx0aW5wdXRbdHlwZT0nbnVtYmVyJ10ge1xuXHRcdFx0LW1vei1hcHBlYXJhbmNlOiB0ZXh0ZmllbGQ7XG5cdFx0fVxuXHRgO1xufTtcblxuZXhwb3J0IGNvbnN0IElucHV0ID0gc3R5bGVkKCBJbnB1dENvbnRyb2wgKWBcblx0JHsgaHRtbEFycm93U3R5bGVzIH07XG5gO1xuXG5jb25zdCBzcGluQnV0dG9uU2l6ZVN0eWxlcyA9ICggeyBzaXplIH0gKSA9PiB7XG5cdGlmICggc2l6ZSAhPT0gJ3NtYWxsJyApIHtcblx0XHRyZXR1cm4gYGA7XG5cdH1cblxuXHRyZXR1cm4gY3NzYFxuXHRcdHdpZHRoOiAkeyBzcGFjZSggNSApIH07XG5cdFx0bWluLXdpZHRoOiAkeyBzcGFjZSggNSApIH07XG5cdFx0aGVpZ2h0OiAkeyBzcGFjZSggNSApIH07XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgU3BpbkJ1dHRvbiA9IHN0eWxlZCggQnV0dG9uIClgXG5cdCYmJiYmIHtcblx0XHRjb2xvcjogJHsgQ09MT1JTLnVpLnRoZW1lIH07XG5cdFx0JHsgc3BpbkJ1dHRvblNpemVTdHlsZXMgfVxuXHR9XG5gO1xuIl19 */"));
+})("&&&&&{color:", COLORS.ui.theme, ";", spinButtonSizeStyles, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvbnVtYmVyLWNvbnRyb2wvc3R5bGVzL251bWJlci1jb250cm9sLXN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFtRDBDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvbnVtYmVyLWNvbnRyb2wvc3R5bGVzL251bWJlci1jb250cm9sLXN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IElucHV0Q29udHJvbCBmcm9tICcuLi8uLi9pbnB1dC1jb250cm9sJztcbmltcG9ydCB7IENPTE9SUyB9IGZyb20gJy4uLy4uL3V0aWxzJztcbmltcG9ydCBCdXR0b24gZnJvbSAnLi4vLi4vYnV0dG9uJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vLi4vdWkvdXRpbHMvc3BhY2UnO1xuaW1wb3J0IHR5cGUgeyBOdW1iZXJDb250cm9sUHJvcHMgfSBmcm9tICcuLi90eXBlcyc7XG5cbmNvbnN0IGh0bWxBcnJvd1N0eWxlcyA9ICggeyBoaWRlSFRNTEFycm93cyB9OiB7IGhpZGVIVE1MQXJyb3dzOiBib29sZWFuIH0gKSA9PiB7XG5cdGlmICggISBoaWRlSFRNTEFycm93cyApIHtcblx0XHRyZXR1cm4gYGA7XG5cdH1cblxuXHRyZXR1cm4gY3NzYFxuXHRcdGlucHV0W3R5cGU9J251bWJlciddOjotd2Via2l0LW91dGVyLXNwaW4tYnV0dG9uLFxuXHRcdGlucHV0W3R5cGU9J251bWJlciddOjotd2Via2l0LWlubmVyLXNwaW4tYnV0dG9uIHtcblx0XHRcdC13ZWJraXQtYXBwZWFyYW5jZTogbm9uZSAhaW1wb3J0YW50O1xuXHRcdFx0bWFyZ2luOiAwICFpbXBvcnRhbnQ7XG5cdFx0fVxuXG5cdFx0aW5wdXRbdHlwZT0nbnVtYmVyJ10ge1xuXHRcdFx0LW1vei1hcHBlYXJhbmNlOiB0ZXh0ZmllbGQ7XG5cdFx0fVxuXHRgO1xufTtcblxuZXhwb3J0IGNvbnN0IElucHV0ID0gc3R5bGVkKCBJbnB1dENvbnRyb2wgKWBcblx0JHsgaHRtbEFycm93U3R5bGVzIH07XG5gO1xuXG5jb25zdCBzcGluQnV0dG9uU2l6ZVN0eWxlcyA9ICgge1xuXHRzaXplLFxufTogUGljazwgTnVtYmVyQ29udHJvbFByb3BzLCAnc2l6ZScgPiApID0+IHtcblx0aWYgKCBzaXplICE9PSAnc21hbGwnICkge1xuXHRcdHJldHVybiBgYDtcblx0fVxuXG5cdHJldHVybiBjc3NgXG5cdFx0d2lkdGg6ICR7IHNwYWNlKCA1ICkgfTtcblx0XHRtaW4td2lkdGg6ICR7IHNwYWNlKCA1ICkgfTtcblx0XHRoZWlnaHQ6ICR7IHNwYWNlKCA1ICkgfTtcblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBTcGluQnV0dG9uID0gc3R5bGVkKCBCdXR0b24gKWBcblx0JiYmJiYge1xuXHRcdGNvbG9yOiAkeyBDT0xPUlMudWkudGhlbWUgfTtcblx0XHQkeyBzcGluQnV0dG9uU2l6ZVN0eWxlcyB9XG5cdH1cbmA7XG4iXX0= */"));
 //# sourceMappingURL=number-control-styles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/number-control/styles/number-control-styles.js"],"names":["css","InputControl","COLORS","Button","space","htmlArrowStyles","hideHTMLArrows","Input","spinButtonSizeStyles","size","SpinButton","ui","theme"],"mappings":";;;;AAAA;;AACA;AACA;AACA;AACA,SAASA,GAAT,QAAoB,gBAApB;;AAGA;AACA;AACA;AACA,OAAOC,YAAP,MAAyB,qBAAzB;AACA,SAASC,MAAT,QAAuB,aAAvB;AACA,OAAOC,MAAP,MAAmB,cAAnB;AACA,SAASC,KAAT,QAAsB,sBAAtB;;;;;;;;;;;;AAEA,MAAMC,eAAe,GAAG,SAA0B;AAAA,MAAxB;AAAEC,IAAAA;AAAF,GAAwB;;AACjD,MAAK,CAAEA,cAAP,EAAwB;AACvB,WAAQ,EAAR;AACA;;AAED;AAWA,CAhBD;;AAkBA,OAAO,MAAMC,KAAK,GAAG,qBAAQN,YAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,CACdI,eADc,i8DAAX;;AAIP,MAAMG,oBAAoB,GAAG,SAAgB;AAAA,MAAd;AAAEC,IAAAA;AAAF,GAAc;;AAC5C,MAAKA,IAAI,KAAK,OAAd,EAAwB;AACvB,WAAQ,EAAR;AACA;;AAED,sBAAOT,GAAP,WACWI,KAAK,CAAE,CAAF,CADhB,iBAEeA,KAAK,CAAE,CAAF,CAFpB,cAGYA,KAAK,CAAE,CAAF,CAHjB;AAKA,CAVD;;AAYA,OAAO,MAAMM,UAAU,GAAG,qBAAQP,MAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,iBAEXD,MAAM,CAACS,EAAP,CAAUC,KAFC,OAGlBJ,oBAHkB,k8DAAhB","sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport InputControl from '../../input-control';\nimport { COLORS } from '../../utils';\nimport Button from '../../button';\nimport { space } from '../../ui/utils/space';\n\nconst htmlArrowStyles = ( { hideHTMLArrows } ) => {\n\tif ( ! hideHTMLArrows ) {\n\t\treturn ``;\n\t}\n\n\treturn css`\n\t\tinput[type='number']::-webkit-outer-spin-button,\n\t\tinput[type='number']::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none !important;\n\t\t\tmargin: 0 !important;\n\t\t}\n\n\t\tinput[type='number'] {\n\t\t\t-moz-appearance: textfield;\n\t\t}\n\t`;\n};\n\nexport const Input = styled( InputControl )`\n\t${ htmlArrowStyles };\n`;\n\nconst spinButtonSizeStyles = ( { size } ) => {\n\tif ( size !== 'small' ) {\n\t\treturn ``;\n\t}\n\n\treturn css`\n\t\twidth: ${ space( 5 ) };\n\t\tmin-width: ${ space( 5 ) };\n\t\theight: ${ space( 5 ) };\n\t`;\n};\n\nexport const SpinButton = styled( Button )`\n\t&&&&& {\n\t\tcolor: ${ COLORS.ui.theme };\n\t\t${ spinButtonSizeStyles }\n\t}\n`;\n"]}
+{"version":3,"sources":["@wordpress/components/src/number-control/styles/number-control-styles.ts"],"names":["css","InputControl","COLORS","Button","space","htmlArrowStyles","hideHTMLArrows","Input","spinButtonSizeStyles","size","SpinButton","ui","theme"],"mappings":";;;;AAAA;AACA;AACA;AACA,SAASA,GAAT,QAAoB,gBAApB;;AAGA;AACA;AACA;AACA,OAAOC,YAAP,MAAyB,qBAAzB;AACA,SAASC,MAAT,QAAuB,aAAvB;AACA,OAAOC,MAAP,MAAmB,cAAnB;AACA,SAASC,KAAT,QAAsB,sBAAtB;;;;;;;;;;;;AAGA,MAAMC,eAAe,GAAG,SAAuD;AAAA,MAArD;AAAEC,IAAAA;AAAF,GAAqD;;AAC9E,MAAK,CAAEA,cAAP,EAAwB;AACvB,WAAQ,EAAR;AACA;;AAED;AAWA,CAhBD;;AAkBA,OAAO,MAAMC,KAAK,GAAG,qBAAQN,YAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,CACdI,eADc,ilEAAX;;AAIP,MAAMG,oBAAoB,GAAG,SAEc;AAAA,MAFZ;AAC9BC,IAAAA;AAD8B,GAEY;;AAC1C,MAAKA,IAAI,KAAK,OAAd,EAAwB;AACvB,WAAQ,EAAR;AACA;;AAED,sBAAOT,GAAP,WACWI,KAAK,CAAE,CAAF,CADhB,iBAEeA,KAAK,CAAE,CAAF,CAFpB,cAGYA,KAAK,CAAE,CAAF,CAHjB;AAKA,CAZD;;AAcA,OAAO,MAAMM,UAAU,GAAG,qBAAQP,MAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,iBAEXD,MAAM,CAACS,EAAP,CAAUC,KAFC,OAGlBJ,oBAHkB,klEAAhB","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport InputControl from '../../input-control';\nimport { COLORS } from '../../utils';\nimport Button from '../../button';\nimport { space } from '../../ui/utils/space';\nimport type { NumberControlProps } from '../types';\n\nconst htmlArrowStyles = ( { hideHTMLArrows }: { hideHTMLArrows: boolean } ) => {\n\tif ( ! hideHTMLArrows ) {\n\t\treturn ``;\n\t}\n\n\treturn css`\n\t\tinput[type='number']::-webkit-outer-spin-button,\n\t\tinput[type='number']::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none !important;\n\t\t\tmargin: 0 !important;\n\t\t}\n\n\t\tinput[type='number'] {\n\t\t\t-moz-appearance: textfield;\n\t\t}\n\t`;\n};\n\nexport const Input = styled( InputControl )`\n\t${ htmlArrowStyles };\n`;\n\nconst spinButtonSizeStyles = ( {\n\tsize,\n}: Pick< NumberControlProps, 'size' > ) => {\n\tif ( size !== 'small' ) {\n\t\treturn ``;\n\t}\n\n\treturn css`\n\t\twidth: ${ space( 5 ) };\n\t\tmin-width: ${ space( 5 ) };\n\t\theight: ${ space( 5 ) };\n\t`;\n};\n\nexport const SpinButton = styled( Button )`\n\t&&&&& {\n\t\tcolor: ${ COLORS.ui.theme };\n\t\t${ spinButtonSizeStyles }\n\t}\n`;\n"]}

package/build-module/palette-edit/index.js

@@ -9,7 +9,7 @@ import { kebabCase } from 'lodash';
  * WordPress dependencies
  */
 
-import { useState, useRef, useEffect } from '@wordpress/element';
+import { useState, useRef, useEffect, useCallback } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { lineSolid, moreVertical, plus } from '@wordpress/icons';
 import { __experimentalUseFocusOutside as useFocusOutside, useDebounce } from '@wordpress/compose';
@@ -81,7 +81,37 @@ export function getNameForPosition(elements, slugPrefix) {
   __('Color %s'), position);
 }
 
-function Option(_ref2) {
+function ColorPickerPopover(_ref2) {
+  let {
+    isGradient,
+    element,
+    onChange,
+    onClose = () => {}
+  } = _ref2;
+  return createElement(Popover, {
+    placement: "left-start",
+    offset: 20,
+    className: "components-palette-edit__popover",
+    onClose: onClose
+  }, !isGradient && createElement(ColorPicker, {
+    color: element.color,
+    enableAlpha: true,
+    onChange: newColor => onChange({ ...element,
+      color: newColor
+    })
+  }), isGradient && createElement("div", {
+    className: "components-palette-edit__popover-gradient-picker"
+  }, createElement(CustomGradientPicker, {
+    __nextHasNoMargin: true,
+    __experimentalIsRenderedInSidebar: true,
+    value: element.gradient,
+    onChange: newGradient => onChange({ ...element,
+      gradient: newGradient
+    })
+  })));
+}
+
+function Option(_ref3) {
   let {
     canOnlyChangeValues,
     element,
@@ -92,7 +122,7 @@ function Option(_ref2) {
     onStopEditing,
     slugPrefix,
     isGradient
-  } = _ref2;
+  } = _ref3;
   const focusOutsideProps = useFocusOutside(onStopEditing);
   const value = isGradient ? element.gradient : element.color;
   return createElement(PaletteItem, _extends({
@@ -123,39 +153,24 @@ function Option(_ref2) {
     icon: lineSolid,
     label: __('Remove color'),
     onClick: onRemove
-  }))), isEditing && createElement(Popover, {
-    placement: "left-start",
-    offset: 20,
-    className: "components-palette-edit__popover"
-  }, !isGradient && createElement(ColorPicker, {
-    color: value,
-    enableAlpha: true,
-    onChange: newColor => onChange({ ...element,
-      color: newColor
-    })
-  }), isGradient && createElement("div", {
-    className: "components-palette-edit__popover-gradient-picker"
-  }, createElement(CustomGradientPicker, {
-    __nextHasNoMargin: true,
-    __experimentalIsRenderedInSidebar: true,
-    value: value,
-    onChange: newGradient => onChange({ ...element,
-      gradient: newGradient
-    })
-  }))));
+  }))), isEditing && createElement(ColorPickerPopover, {
+    isGradient: isGradient,
+    onChange: onChange,
+    element: element
+  }));
 }
 
-function isTemporaryElement(slugPrefix, _ref3) {
+function isTemporaryElement(slugPrefix, _ref4) {
   let {
     slug,
     color,
     gradient
-  } = _ref3;
+  } = _ref4;
   const regex = new RegExp(`^${slugPrefix}color-([\\d]+)$`);
   return regex.test(slug) && (!!color && color === DEFAULT_COLOR || !!gradient && gradient === DEFAULT_GRADIENT);
 }
 
-function PaletteEditListView(_ref4) {
+function PaletteEditListView(_ref5) {
   let {
     elements,
     onChange,
@@ -164,7 +179,7 @@ function PaletteEditListView(_ref4) {
     canOnlyChangeValues,
     slugPrefix,
     isGradient
-  } = _ref4;
+  } = _ref5;
   // When unmounting the component if there are empty elements (the user did not complete the insertion) clean them.
   const elementsReference = useRef();
   useEffect(() => {
@@ -226,7 +241,7 @@ function PaletteEditListView(_ref4) {
 }
 
 const EMPTY_ARRAY = [];
-export default function PaletteEdit(_ref5) {
+export default function PaletteEdit(_ref6) {
   let {
     gradients,
     colors = EMPTY_ARRAY,
@@ -236,7 +251,7 @@ export default function PaletteEdit(_ref5) {
     canOnlyChangeValues,
     canReset,
     slugPrefix = ''
-  } = _ref5;
+  } = _ref6;
   const isGradient = !!gradients;
   const elements = isGradient ? gradients : colors;
   const [isEditing, setIsEditing] = useState(false);
@@ -244,6 +259,17 @@ export default function PaletteEdit(_ref5) {
   const isAdding = isEditing && editingElement && elements[editingElement] && !elements[editingElement].slug;
   const elementsLength = elements.length;
   const hasElements = elementsLength > 0;
+  const debounceOnChange = useDebounce(onChange, 100);
+  const onSelectPaletteItem = useCallback((value, newEditingElementIndex) => {
+    const selectedElement = elements[newEditingElementIndex];
+    const key = isGradient ? 'gradient' : 'color'; // Ensures that the index returned matches a known element value.
+
+    if (!!selectedElement && selectedElement[key] === value) {
+      setEditingElement(newEditingElementIndex);
+    } else {
+      setIsEditing(true);
+    }
+  }, [isGradient, elements]);
   return createElement(PaletteEditStyles, null, createElement(PaletteHStackHeader, null, createElement(PaletteHeading, null, paletteLabel), createElement(PaletteActionsContainer, null, hasElements && isEditing && createElement(DoneButton, {
     isSmall: true,
     onClick: () => {
@@ -274,10 +300,10 @@ export default function PaletteEdit(_ref5) {
     toggleProps: {
       isSmall: true
     }
-  }, _ref6 => {
+  }, _ref7 => {
     let {
       onClose
-    } = _ref6;
+    } = _ref7;
     return createElement(Fragment, null, createElement(NavigableMenu, {
       role: "menu"
     }, !isEditing && createElement(Button, {
@@ -287,7 +313,7 @@ export default function PaletteEdit(_ref5) {
         onClose();
       },
       className: "components-palette-edit__menu-button"
-    }, isGradient ? __('Edit gradients') : __('Edit colors')), !canOnlyChangeValues && createElement(Button, {
+    }, __('Show details')), !canOnlyChangeValues && createElement(Button, {
       variant: "tertiary",
       onClick: () => {
         setEditingElement(null);
@@ -312,15 +338,28 @@ export default function PaletteEdit(_ref5) {
     setEditingElement: setEditingElement,
     slugPrefix: slugPrefix,
     isGradient: isGradient
+  }), !isEditing && editingElement !== null && createElement(ColorPickerPopover, {
+    isGradient: isGradient,
+    onClose: () => setEditingElement(null),
+    onChange: newElement => {
+      debounceOnChange(elements.map((currentElement, currentIndex) => {
+        if (currentIndex === editingElement) {
+          return newElement;
+        }
+
+        return currentElement;
+      }));
+    },
+    element: elements[editingElement]
   }), !isEditing && (isGradient ? createElement(GradientPicker, {
     __nextHasNoMargin: true,
     gradients: gradients,
-    onChange: () => {},
+    onChange: onSelectPaletteItem,
     clearable: false,
     disableCustomGradients: true
   }) : createElement(ColorPalette, {
     colors: colors,
-    onChange: () => {},
+    onChange: onSelectPaletteItem,
     clearable: false,
     disableCustomColors: true
   }))), !hasElements && emptyMessage);

package/build-module/palette-edit/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/palette-edit/index.js"],"names":["kebabCase","useState","useRef","useEffect","__","sprintf","lineSolid","moreVertical","plus","__experimentalUseFocusOutside","useFocusOutside","useDebounce","Button","ColorPicker","FlexItem","HStack","ItemGroup","VStack","GradientPicker","ColorPalette","DropdownMenu","Popover","PaletteActionsContainer","PaletteEditStyles","PaletteHeading","PaletteHStackHeader","IndicatorStyled","PaletteItem","NameContainer","NameInputControl","DoneButton","RemoveButton","NavigableMenu","DEFAULT_GRADIENT","CustomGradientPicker","DEFAULT_COLOR","NameInput","value","onChange","label","getNameForPosition","elements","slugPrefix","temporaryNameRegex","RegExp","position","reduce","previousValue","currentValue","slug","matches","match","id","parseInt","Option","canOnlyChangeValues","element","isEditing","onStartEditing","onRemove","onStopEditing","isGradient","focusOutsideProps","gradient","color","undefined","style","cursor","background","name","nextName","newColor","newGradient","isTemporaryElement","regex","test","PaletteEditListView","editingElement","setEditingElement","elementsReference","current","some","index","newElements","filter","length","debounceOnChange","map","newElement","currentElement","currentIndex","_currentElement","EMPTY_ARRAY","PaletteEdit","gradients","colors","paletteLabel","emptyMessage","canReset","setIsEditing","isAdding","elementsLength","hasElements","tempOptionName","isSmall","onClose"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { kebabCase } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useRef, useEffect } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { lineSolid, moreVertical, plus } from '@wordpress/icons';\nimport {\n\t__experimentalUseFocusOutside as useFocusOutside,\n\tuseDebounce,\n} from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { ColorPicker } from '../color-picker';\nimport { FlexItem } from '../flex';\nimport { HStack } from '../h-stack';\nimport { ItemGroup } from '../item-group';\nimport { VStack } from '../v-stack';\nimport GradientPicker from '../gradient-picker';\nimport ColorPalette from '../color-palette';\nimport DropdownMenu from '../dropdown-menu';\nimport Popover from '../popover';\nimport {\n\tPaletteActionsContainer,\n\tPaletteEditStyles,\n\tPaletteHeading,\n\tPaletteHStackHeader,\n\tIndicatorStyled,\n\tPaletteItem,\n\tNameContainer,\n\tNameInputControl,\n\tDoneButton,\n\tRemoveButton,\n} from './styles';\nimport { NavigableMenu } from '../navigable-container';\nimport { DEFAULT_GRADIENT } from '../custom-gradient-picker/constants';\nimport CustomGradientPicker from '../custom-gradient-picker';\n\nconst DEFAULT_COLOR = '#000';\n\nfunction NameInput( { value, onChange, label } ) {\n\treturn (\n\t\t<NameInputControl\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t/>\n\t);\n}\n\n/**\n * Returns a temporary name for a palette item in the format \"Color + id\".\n * To ensure there are no duplicate ids, this function checks all slugs for temporary names.\n * It expects slugs to be in the format: slugPrefix + color- + number.\n * It then sets the id component of the new name based on the incremented id of the highest existing slug id.\n *\n * @param {string} elements   An array of color palette items.\n * @param {string} slugPrefix The slug prefix used to match the element slug.\n *\n * @return {string} A unique name for a palette item.\n */\nexport function getNameForPosition( elements, slugPrefix ) {\n\tconst temporaryNameRegex = new RegExp( `^${ slugPrefix }color-([\\\\d]+)$` );\n\tconst position = elements.reduce( ( previousValue, currentValue ) => {\n\t\tif ( typeof currentValue?.slug === 'string' ) {\n\t\t\tconst matches = currentValue?.slug.match( temporaryNameRegex );\n\t\t\tif ( matches ) {\n\t\t\t\tconst id = parseInt( matches[ 1 ], 10 );\n\t\t\t\tif ( id >= previousValue ) {\n\t\t\t\t\treturn id + 1;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn previousValue;\n\t}, 1 );\n\n\treturn sprintf(\n\t\t/* translators: %s: is a temporary id for a custom color */\n\t\t__( 'Color %s' ),\n\t\tposition\n\t);\n}\n\nfunction Option( {\n\tcanOnlyChangeValues,\n\telement,\n\tonChange,\n\tisEditing,\n\tonStartEditing,\n\tonRemove,\n\tonStopEditing,\n\tslugPrefix,\n\tisGradient,\n} ) {\n\tconst focusOutsideProps = useFocusOutside( onStopEditing );\n\tconst value = isGradient ? element.gradient : element.color;\n\n\treturn (\n\t\t<PaletteItem\n\t\t\tclassName={ isEditing ? 'is-selected' : undefined }\n\t\t\tas=\"div\"\n\t\t\tonClick={ onStartEditing }\n\t\t\t{ ...( isEditing\n\t\t\t\t? { ...focusOutsideProps }\n\t\t\t\t: {\n\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t},\n\t\t\t\t  } ) }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<IndicatorStyled\n\t\t\t\t\t\tstyle={ { background: value, color: 'transparent' } }\n\t\t\t\t\t/>\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t{ isEditing && ! canOnlyChangeValues ? (\n\t\t\t\t\t\t<NameInput\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t? __( 'Gradient name' )\n\t\t\t\t\t\t\t\t\t: __( 'Color name' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ element.name }\n\t\t\t\t\t\t\tonChange={ ( nextName ) =>\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\t\t\tname: nextName,\n\t\t\t\t\t\t\t\t\tslug: slugPrefix + kebabCase( nextName ),\n\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<NameContainer>{ element.name }</NameContainer>\n\t\t\t\t\t) }\n\t\t\t\t</FlexItem>\n\t\t\t\t{ isEditing && ! canOnlyChangeValues && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<RemoveButton\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\ticon={ lineSolid }\n\t\t\t\t\t\t\tlabel={ __( 'Remove color' ) }\n\t\t\t\t\t\t\tonClick={ onRemove }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t\t{ isEditing && (\n\t\t\t\t<Popover\n\t\t\t\t\tplacement=\"left-start\"\n\t\t\t\t\toffset={ 20 }\n\t\t\t\t\tclassName=\"components-palette-edit__popover\"\n\t\t\t\t>\n\t\t\t\t\t{ ! isGradient && (\n\t\t\t\t\t\t<ColorPicker\n\t\t\t\t\t\t\tcolor={ value }\n\t\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t\t\tonChange={ ( newColor ) =>\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\t\t\tcolor: newColor,\n\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ isGradient && (\n\t\t\t\t\t\t<div className=\"components-palette-edit__popover-gradient-picker\">\n\t\t\t\t\t\t\t<CustomGradientPicker\n\t\t\t\t\t\t\t\t__nextHasNoMargin\n\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t\tonChange={ ( newGradient ) =>\n\t\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\t\t\t\tgradient: newGradient,\n\t\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t</Popover>\n\t\t\t) }\n\t\t</PaletteItem>\n\t);\n}\n\nfunction isTemporaryElement( slugPrefix, { slug, color, gradient } ) {\n\tconst regex = new RegExp( `^${ slugPrefix }color-([\\\\d]+)$` );\n\treturn (\n\t\tregex.test( slug ) &&\n\t\t( ( !! color && color === DEFAULT_COLOR ) ||\n\t\t\t( !! gradient && gradient === DEFAULT_GRADIENT ) )\n\t);\n}\n\nfunction PaletteEditListView( {\n\telements,\n\tonChange,\n\teditingElement,\n\tsetEditingElement,\n\tcanOnlyChangeValues,\n\tslugPrefix,\n\tisGradient,\n} ) {\n\t// When unmounting the component if there are empty elements (the user did not complete the insertion) clean them.\n\tconst elementsReference = useRef();\n\tuseEffect( () => {\n\t\telementsReference.current = elements;\n\t}, [ elements ] );\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tif (\n\t\t\t\telementsReference.current.some( ( element, index ) =>\n\t\t\t\t\tisTemporaryElement( slugPrefix, element, index )\n\t\t\t\t)\n\t\t\t) {\n\t\t\t\tconst newElements = elementsReference.current.filter(\n\t\t\t\t\t( element ) => ! isTemporaryElement( slugPrefix, element )\n\t\t\t\t);\n\t\t\t\tonChange( newElements.length ? newElements : undefined );\n\t\t\t}\n\t\t};\n\t\t// Disable reason: adding the missing dependency here would cause breaking changes that will require\n\t\t// a heavier refactor to avoid. See https://github.com/WordPress/gutenberg/pull/43911\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [] );\n\n\tconst debounceOnChange = useDebounce( onChange, 100 );\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<ItemGroup isRounded>\n\t\t\t\t{ elements.map( ( element, index ) => (\n\t\t\t\t\t<Option\n\t\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\t\tcanOnlyChangeValues={ canOnlyChangeValues }\n\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\telement={ element }\n\t\t\t\t\t\tonStartEditing={ () => {\n\t\t\t\t\t\t\tif ( editingElement !== index ) {\n\t\t\t\t\t\t\t\tsetEditingElement( index );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonChange={ ( newElement ) => {\n\t\t\t\t\t\t\tdebounceOnChange(\n\t\t\t\t\t\t\t\telements.map(\n\t\t\t\t\t\t\t\t\t( currentElement, currentIndex ) => {\n\t\t\t\t\t\t\t\t\t\tif ( currentIndex === index ) {\n\t\t\t\t\t\t\t\t\t\t\treturn newElement;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\treturn currentElement;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonRemove={ () => {\n\t\t\t\t\t\t\tsetEditingElement( null );\n\t\t\t\t\t\t\tconst newElements = elements.filter(\n\t\t\t\t\t\t\t\t( _currentElement, currentIndex ) => {\n\t\t\t\t\t\t\t\t\tif ( currentIndex === index ) {\n\t\t\t\t\t\t\t\t\t\treturn false;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\treturn true;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\tnewElements.length ? newElements : undefined\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tisEditing={ index === editingElement }\n\t\t\t\t\t\tonStopEditing={ () => {\n\t\t\t\t\t\t\tif ( index === editingElement ) {\n\t\t\t\t\t\t\t\tsetEditingElement( null );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tslugPrefix={ slugPrefix }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</ItemGroup>\n\t\t</VStack>\n\t);\n}\n\nconst EMPTY_ARRAY = [];\n\nexport default function PaletteEdit( {\n\tgradients,\n\tcolors = EMPTY_ARRAY,\n\tonChange,\n\tpaletteLabel,\n\temptyMessage,\n\tcanOnlyChangeValues,\n\tcanReset,\n\tslugPrefix = '',\n} ) {\n\tconst isGradient = !! gradients;\n\tconst elements = isGradient ? gradients : colors;\n\tconst [ isEditing, setIsEditing ] = useState( false );\n\tconst [ editingElement, setEditingElement ] = useState( null );\n\tconst isAdding =\n\t\tisEditing &&\n\t\teditingElement &&\n\t\telements[ editingElement ] &&\n\t\t! elements[ editingElement ].slug;\n\tconst elementsLength = elements.length;\n\tconst hasElements = elementsLength > 0;\n\n\treturn (\n\t\t<PaletteEditStyles>\n\t\t\t<PaletteHStackHeader>\n\t\t\t\t<PaletteHeading>{ paletteLabel }</PaletteHeading>\n\t\t\t\t<PaletteActionsContainer>\n\t\t\t\t\t{ hasElements && isEditing && (\n\t\t\t\t\t\t<DoneButton\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetIsEditing( false );\n\t\t\t\t\t\t\t\tsetEditingElement( null );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Done' ) }\n\t\t\t\t\t\t</DoneButton>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! canOnlyChangeValues && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\tisPressed={ isAdding }\n\t\t\t\t\t\t\ticon={ plus }\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t? __( 'Add gradient' )\n\t\t\t\t\t\t\t\t\t: __( 'Add color' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tconst tempOptionName = getNameForPosition(\n\t\t\t\t\t\t\t\t\telements,\n\t\t\t\t\t\t\t\t\tslugPrefix\n\t\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\t\tonChange( [\n\t\t\t\t\t\t\t\t\t...elements,\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t...( isGradient\n\t\t\t\t\t\t\t\t\t\t\t? { gradient: DEFAULT_GRADIENT }\n\t\t\t\t\t\t\t\t\t\t\t: { color: DEFAULT_COLOR } ),\n\t\t\t\t\t\t\t\t\t\tname: tempOptionName,\n\t\t\t\t\t\t\t\t\t\tslug:\n\t\t\t\t\t\t\t\t\t\t\tslugPrefix +\n\t\t\t\t\t\t\t\t\t\t\tkebabCase( tempOptionName ),\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t] );\n\t\t\t\t\t\t\t\tsetIsEditing( true );\n\t\t\t\t\t\t\t\tsetEditingElement( elements.length );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ hasElements &&\n\t\t\t\t\t\t( ! isEditing ||\n\t\t\t\t\t\t\t! canOnlyChangeValues ||\n\t\t\t\t\t\t\tcanReset ) && (\n\t\t\t\t\t\t\t<DropdownMenu\n\t\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t\t? __( 'Gradient options' )\n\t\t\t\t\t\t\t\t\t\t: __( 'Color options' )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\ttoggleProps={ {\n\t\t\t\t\t\t\t\t\tisSmall: true,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ ( { onClose } ) => (\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t<NavigableMenu role=\"menu\">\n\t\t\t\t\t\t\t\t\t\t\t{ ! isEditing && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing( true );\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-palette-edit__menu-button\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ isGradient\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? __( 'Edit gradients' )\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: __( 'Edit colors' ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t{ ! canOnlyChangeValues && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetEditingElement(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnull\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing( false );\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChange();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-palette-edit__menu-button\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ isGradient\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Remove all gradients'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Remove all colors'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t  ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t{ canReset && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetEditingElement(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnull\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChange();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ isGradient\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? __( 'Reset gradient' )\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: __( 'Reset colors' ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t</NavigableMenu>\n\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</DropdownMenu>\n\t\t\t\t\t\t) }\n\t\t\t\t</PaletteActionsContainer>\n\t\t\t</PaletteHStackHeader>\n\t\t\t{ hasElements && (\n\t\t\t\t<>\n\t\t\t\t\t{ isEditing && (\n\t\t\t\t\t\t<PaletteEditListView\n\t\t\t\t\t\t\tcanOnlyChangeValues={ canOnlyChangeValues }\n\t\t\t\t\t\t\telements={ elements }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\teditingElement={ editingElement }\n\t\t\t\t\t\t\tsetEditingElement={ setEditingElement }\n\t\t\t\t\t\t\tslugPrefix={ slugPrefix }\n\t\t\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! isEditing &&\n\t\t\t\t\t\t( isGradient ? (\n\t\t\t\t\t\t\t<GradientPicker\n\t\t\t\t\t\t\t\t__nextHasNoMargin\n\t\t\t\t\t\t\t\tgradients={ gradients }\n\t\t\t\t\t\t\t\tonChange={ () => {} }\n\t\t\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\t\t\tdisableCustomGradients={ true }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<ColorPalette\n\t\t\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\t\t\tonChange={ () => {} }\n\t\t\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\t\t\tdisableCustomColors={ true }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) ) }\n\t\t\t\t</>\n\t\t\t) }\n\t\t\t{ ! hasElements && emptyMessage }\n\t\t</PaletteEditStyles>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/palette-edit/index.js"],"names":["kebabCase","useState","useRef","useEffect","useCallback","__","sprintf","lineSolid","moreVertical","plus","__experimentalUseFocusOutside","useFocusOutside","useDebounce","Button","ColorPicker","FlexItem","HStack","ItemGroup","VStack","GradientPicker","ColorPalette","DropdownMenu","Popover","PaletteActionsContainer","PaletteEditStyles","PaletteHeading","PaletteHStackHeader","IndicatorStyled","PaletteItem","NameContainer","NameInputControl","DoneButton","RemoveButton","NavigableMenu","DEFAULT_GRADIENT","CustomGradientPicker","DEFAULT_COLOR","NameInput","value","onChange","label","getNameForPosition","elements","slugPrefix","temporaryNameRegex","RegExp","position","reduce","previousValue","currentValue","slug","matches","match","id","parseInt","ColorPickerPopover","isGradient","element","onClose","color","newColor","gradient","newGradient","Option","canOnlyChangeValues","isEditing","onStartEditing","onRemove","onStopEditing","focusOutsideProps","undefined","style","cursor","background","name","nextName","isTemporaryElement","regex","test","PaletteEditListView","editingElement","setEditingElement","elementsReference","current","some","index","newElements","filter","length","debounceOnChange","map","newElement","currentElement","currentIndex","_currentElement","EMPTY_ARRAY","PaletteEdit","gradients","colors","paletteLabel","emptyMessage","canReset","setIsEditing","isAdding","elementsLength","hasElements","onSelectPaletteItem","newEditingElementIndex","selectedElement","key","tempOptionName","isSmall"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,SAAT,QAA0B,QAA1B;AAEA;AACA;AACA;;AACA,SAASC,QAAT,EAAmBC,MAAnB,EAA2BC,SAA3B,EAAsCC,WAAtC,QAAyD,oBAAzD;AACA,SAASC,EAAT,EAAaC,OAAb,QAA4B,iBAA5B;AACA,SAASC,SAAT,EAAoBC,YAApB,EAAkCC,IAAlC,QAA8C,kBAA9C;AACA,SACCC,6BAA6B,IAAIC,eADlC,EAECC,WAFD,QAGO,oBAHP;AAKA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,SAASC,WAAT,QAA4B,iBAA5B;AACA,SAASC,QAAT,QAAyB,SAAzB;AACA,SAASC,MAAT,QAAuB,YAAvB;AACA,SAASC,SAAT,QAA0B,eAA1B;AACA,SAASC,MAAT,QAAuB,YAAvB;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AACA,OAAOC,YAAP,MAAyB,kBAAzB;AACA,OAAOC,YAAP,MAAyB,kBAAzB;AACA,OAAOC,OAAP,MAAoB,YAApB;AACA,SACCC,uBADD,EAECC,iBAFD,EAGCC,cAHD,EAICC,mBAJD,EAKCC,eALD,EAMCC,WAND,EAOCC,aAPD,EAQCC,gBARD,EASCC,UATD,EAUCC,YAVD,QAWO,UAXP;AAYA,SAASC,aAAT,QAA8B,wBAA9B;AACA,SAASC,gBAAT,QAAiC,qCAAjC;AACA,OAAOC,oBAAP,MAAiC,2BAAjC;AAEA,MAAMC,aAAa,GAAG,MAAtB;;AAEA,SAASC,SAAT,OAAiD;AAAA,MAA7B;AAAEC,IAAAA,KAAF;AAASC,IAAAA,QAAT;AAAmBC,IAAAA;AAAnB,GAA6B;AAChD,SACC,cAAC,gBAAD;AACC,IAAA,KAAK,EAAGA,KADT;AAEC,IAAA,mBAAmB,MAFpB;AAGC,IAAA,KAAK,EAAGF,KAHT;AAIC,IAAA,QAAQ,EAAGC;AAJZ,IADD;AAQA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,OAAO,SAASE,kBAAT,CAA6BC,QAA7B,EAAuCC,UAAvC,EAAoD;AAC1D,QAAMC,kBAAkB,GAAG,IAAIC,MAAJ,CAAa,IAAIF,UAAY,iBAA7B,CAA3B;AACA,QAAMG,QAAQ,GAAGJ,QAAQ,CAACK,MAAT,CAAiB,CAAEC,aAAF,EAAiBC,YAAjB,KAAmC;AACpE,QAAK,QAAOA,YAAP,aAAOA,YAAP,uBAAOA,YAAY,CAAEC,IAArB,MAA8B,QAAnC,EAA8C;AAC7C,YAAMC,OAAO,GAAGF,YAAH,aAAGA,YAAH,uBAAGA,YAAY,CAAEC,IAAd,CAAmBE,KAAnB,CAA0BR,kBAA1B,CAAhB;;AACA,UAAKO,OAAL,EAAe;AACd,cAAME,EAAE,GAAGC,QAAQ,CAAEH,OAAO,CAAE,CAAF,CAAT,EAAgB,EAAhB,CAAnB;;AACA,YAAKE,EAAE,IAAIL,aAAX,EAA2B;AAC1B,iBAAOK,EAAE,GAAG,CAAZ;AACA;AACD;AACD;;AACD,WAAOL,aAAP;AACA,GAXgB,EAWd,CAXc,CAAjB;AAaA,SAAO1C,OAAO;AACb;AACAD,EAAAA,EAAE,CAAE,UAAF,CAFW,EAGbyC,QAHa,CAAd;AAKA;;AAED,SAASS,kBAAT,QAKI;AAAA,MALyB;AAC5BC,IAAAA,UAD4B;AAE5BC,IAAAA,OAF4B;AAG5BlB,IAAAA,QAH4B;AAI5BmB,IAAAA,OAAO,GAAG,MAAM,CAAE;AAJU,GAKzB;AACH,SACC,cAAC,OAAD;AACC,IAAA,SAAS,EAAC,YADX;AAEC,IAAA,MAAM,EAAG,EAFV;AAGC,IAAA,SAAS,EAAC,kCAHX;AAIC,IAAA,OAAO,EAAGA;AAJX,KAMG,CAAEF,UAAF,IACD,cAAC,WAAD;AACC,IAAA,KAAK,EAAGC,OAAO,CAACE,KADjB;AAEC,IAAA,WAAW,MAFZ;AAGC,IAAA,QAAQ,EAAKC,QAAF,IACVrB,QAAQ,CAAE,EACT,GAAGkB,OADM;AAETE,MAAAA,KAAK,EAAEC;AAFE,KAAF;AAJV,IAPF,EAkBGJ,UAAU,IACX;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,cAAC,oBAAD;AACC,IAAA,iBAAiB,MADlB;AAEC,IAAA,iCAAiC,MAFlC;AAGC,IAAA,KAAK,EAAGC,OAAO,CAACI,QAHjB;AAIC,IAAA,QAAQ,EAAKC,WAAF,IACVvB,QAAQ,CAAE,EACT,GAAGkB,OADM;AAETI,MAAAA,QAAQ,EAAEC;AAFD,KAAF;AALV,IADD,CAnBF,CADD;AAoCA;;AAED,SAASC,MAAT,QAUI;AAAA,MAVa;AAChBC,IAAAA,mBADgB;AAEhBP,IAAAA,OAFgB;AAGhBlB,IAAAA,QAHgB;AAIhB0B,IAAAA,SAJgB;AAKhBC,IAAAA,cALgB;AAMhBC,IAAAA,QANgB;AAOhBC,IAAAA,aAPgB;AAQhBzB,IAAAA,UARgB;AAShBa,IAAAA;AATgB,GAUb;AACH,QAAMa,iBAAiB,GAAG1D,eAAe,CAAEyD,aAAF,CAAzC;AACA,QAAM9B,KAAK,GAAGkB,UAAU,GAAGC,OAAO,CAACI,QAAX,GAAsBJ,OAAO,CAACE,KAAtD;AAEA,SACC,cAAC,WAAD;AACC,IAAA,SAAS,EAAGM,SAAS,GAAG,aAAH,GAAmBK,SADzC;AAEC,IAAA,EAAE,EAAC,KAFJ;AAGC,IAAA,OAAO,EAAGJ;AAHX,KAIQD,SAAS,GACb,EAAE,GAAGI;AAAL,GADa,GAEb;AACAE,IAAAA,KAAK,EAAE;AACNC,MAAAA,MAAM,EAAE;AADF;AADP,GANJ,GAYC,cAAC,MAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,cAAC,QAAD,QACC,cAAC,eAAD;AACC,IAAA,KAAK,EAAG;AAAEC,MAAAA,UAAU,EAAEnC,KAAd;AAAqBqB,MAAAA,KAAK,EAAE;AAA5B;AADT,IADD,CADD,EAMC,cAAC,QAAD,QACGM,SAAS,IAAI,CAAED,mBAAf,GACD,cAAC,SAAD;AACC,IAAA,KAAK,EACJR,UAAU,GACPnD,EAAE,CAAE,eAAF,CADK,GAEPA,EAAE,CAAE,YAAF,CAJP;AAMC,IAAA,KAAK,EAAGoD,OAAO,CAACiB,IANjB;AAOC,IAAA,QAAQ,EAAKC,QAAF,IACVpC,QAAQ,CAAE,EACT,GAAGkB,OADM;AAETiB,MAAAA,IAAI,EAAEC,QAFG;AAGTzB,MAAAA,IAAI,EAAEP,UAAU,GAAG3C,SAAS,CAAE2E,QAAF;AAHnB,KAAF;AARV,IADC,GAiBD,cAAC,aAAD,QAAiBlB,OAAO,CAACiB,IAAzB,CAlBF,CAND,EA2BGT,SAAS,IAAI,CAAED,mBAAf,IACD,cAAC,QAAD,QACC,cAAC,YAAD;AACC,IAAA,OAAO,MADR;AAEC,IAAA,IAAI,EAAGzD,SAFR;AAGC,IAAA,KAAK,EAAGF,EAAE,CAAE,cAAF,CAHX;AAIC,IAAA,OAAO,EAAG8D;AAJX,IADD,CA5BF,CAZD,EAkDGF,SAAS,IACV,cAAC,kBAAD;AACC,IAAA,UAAU,EAAGT,UADd;AAEC,IAAA,QAAQ,EAAGjB,QAFZ;AAGC,IAAA,OAAO,EAAGkB;AAHX,IAnDF,CADD;AA4DA;;AAED,SAASmB,kBAAT,CAA6BjC,UAA7B,SAAqE;AAAA,MAA5B;AAAEO,IAAAA,IAAF;AAAQS,IAAAA,KAAR;AAAeE,IAAAA;AAAf,GAA4B;AACpE,QAAMgB,KAAK,GAAG,IAAIhC,MAAJ,CAAa,IAAIF,UAAY,iBAA7B,CAAd;AACA,SACCkC,KAAK,CAACC,IAAN,CAAY5B,IAAZ,MACI,CAAC,CAAES,KAAH,IAAYA,KAAK,KAAKvB,aAAxB,IACC,CAAC,CAAEyB,QAAH,IAAeA,QAAQ,KAAK3B,gBAF/B,CADD;AAKA;;AAED,SAAS6C,mBAAT,QAQI;AAAA,MAR0B;AAC7BrC,IAAAA,QAD6B;AAE7BH,IAAAA,QAF6B;AAG7ByC,IAAAA,cAH6B;AAI7BC,IAAAA,iBAJ6B;AAK7BjB,IAAAA,mBAL6B;AAM7BrB,IAAAA,UAN6B;AAO7Ba,IAAAA;AAP6B,GAQ1B;AACH;AACA,QAAM0B,iBAAiB,GAAGhF,MAAM,EAAhC;AACAC,EAAAA,SAAS,CAAE,MAAM;AAChB+E,IAAAA,iBAAiB,CAACC,OAAlB,GAA4BzC,QAA5B;AACA,GAFQ,EAEN,CAAEA,QAAF,CAFM,CAAT;AAGAvC,EAAAA,SAAS,CAAE,MAAM;AAChB,WAAO,MAAM;AACZ,UACC+E,iBAAiB,CAACC,OAAlB,CAA0BC,IAA1B,CAAgC,CAAE3B,OAAF,EAAW4B,KAAX,KAC/BT,kBAAkB,CAAEjC,UAAF,EAAcc,OAAd,EAAuB4B,KAAvB,CADnB,CADD,EAIE;AACD,cAAMC,WAAW,GAAGJ,iBAAiB,CAACC,OAAlB,CAA0BI,MAA1B,CACjB9B,OAAF,IAAe,CAAEmB,kBAAkB,CAAEjC,UAAF,EAAcc,OAAd,CADhB,CAApB;AAGAlB,QAAAA,QAAQ,CAAE+C,WAAW,CAACE,MAAZ,GAAqBF,WAArB,GAAmChB,SAArC,CAAR;AACA;AACD,KAXD,CADgB,CAahB;AACA;AACA;AACA,GAhBQ,EAgBN,EAhBM,CAAT;AAkBA,QAAMmB,gBAAgB,GAAG7E,WAAW,CAAE2B,QAAF,EAAY,GAAZ,CAApC;AAEA,SACC,cAAC,MAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,cAAC,SAAD;AAAW,IAAA,SAAS;AAApB,KACGG,QAAQ,CAACgD,GAAT,CAAc,CAAEjC,OAAF,EAAW4B,KAAX,KACf,cAAC,MAAD;AACC,IAAA,UAAU,EAAG7B,UADd;AAEC,IAAA,mBAAmB,EAAGQ,mBAFvB;AAGC,IAAA,GAAG,EAAGqB,KAHP;AAIC,IAAA,OAAO,EAAG5B,OAJX;AAKC,IAAA,cAAc,EAAG,MAAM;AACtB,UAAKuB,cAAc,KAAKK,KAAxB,EAAgC;AAC/BJ,QAAAA,iBAAiB,CAAEI,KAAF,CAAjB;AACA;AACD,KATF;AAUC,IAAA,QAAQ,EAAKM,UAAF,IAAkB;AAC5BF,MAAAA,gBAAgB,CACf/C,QAAQ,CAACgD,GAAT,CACC,CAAEE,cAAF,EAAkBC,YAAlB,KAAoC;AACnC,YAAKA,YAAY,KAAKR,KAAtB,EAA8B;AAC7B,iBAAOM,UAAP;AACA;;AACD,eAAOC,cAAP;AACA,OANF,CADe,CAAhB;AAUA,KArBF;AAsBC,IAAA,QAAQ,EAAG,MAAM;AAChBX,MAAAA,iBAAiB,CAAE,IAAF,CAAjB;AACA,YAAMK,WAAW,GAAG5C,QAAQ,CAAC6C,MAAT,CACnB,CAAEO,eAAF,EAAmBD,YAAnB,KAAqC;AACpC,YAAKA,YAAY,KAAKR,KAAtB,EAA8B;AAC7B,iBAAO,KAAP;AACA;;AACD,eAAO,IAAP;AACA,OANkB,CAApB;AAQA9C,MAAAA,QAAQ,CACP+C,WAAW,CAACE,MAAZ,GAAqBF,WAArB,GAAmChB,SAD5B,CAAR;AAGA,KAnCF;AAoCC,IAAA,SAAS,EAAGe,KAAK,KAAKL,cApCvB;AAqCC,IAAA,aAAa,EAAG,MAAM;AACrB,UAAKK,KAAK,KAAKL,cAAf,EAAgC;AAC/BC,QAAAA,iBAAiB,CAAE,IAAF,CAAjB;AACA;AACD,KAzCF;AA0CC,IAAA,UAAU,EAAGtC;AA1Cd,IADC,CADH,CADD,CADD;AAoDA;;AAED,MAAMoD,WAAW,GAAG,EAApB;AAEA,eAAe,SAASC,WAAT,QASX;AAAA,MATiC;AACpCC,IAAAA,SADoC;AAEpCC,IAAAA,MAAM,GAAGH,WAF2B;AAGpCxD,IAAAA,QAHoC;AAIpC4D,IAAAA,YAJoC;AAKpCC,IAAAA,YALoC;AAMpCpC,IAAAA,mBANoC;AAOpCqC,IAAAA,QAPoC;AAQpC1D,IAAAA,UAAU,GAAG;AARuB,GASjC;AACH,QAAMa,UAAU,GAAG,CAAC,CAAEyC,SAAtB;AACA,QAAMvD,QAAQ,GAAGc,UAAU,GAAGyC,SAAH,GAAeC,MAA1C;AACA,QAAM,CAAEjC,SAAF,EAAaqC,YAAb,IAA8BrG,QAAQ,CAAE,KAAF,CAA5C;AACA,QAAM,CAAE+E,cAAF,EAAkBC,iBAAlB,IAAwChF,QAAQ,CAAE,IAAF,CAAtD;AACA,QAAMsG,QAAQ,GACbtC,SAAS,IACTe,cADA,IAEAtC,QAAQ,CAAEsC,cAAF,CAFR,IAGA,CAAEtC,QAAQ,CAAEsC,cAAF,CAAR,CAA2B9B,IAJ9B;AAKA,QAAMsD,cAAc,GAAG9D,QAAQ,CAAC8C,MAAhC;AACA,QAAMiB,WAAW,GAAGD,cAAc,GAAG,CAArC;AACA,QAAMf,gBAAgB,GAAG7E,WAAW,CAAE2B,QAAF,EAAY,GAAZ,CAApC;AACA,QAAMmE,mBAAmB,GAAGtG,WAAW,CACtC,CAAEkC,KAAF,EAASqE,sBAAT,KAAqC;AACpC,UAAMC,eAAe,GAAGlE,QAAQ,CAAEiE,sBAAF,CAAhC;AACA,UAAME,GAAG,GAAGrD,UAAU,GAAG,UAAH,GAAgB,OAAtC,CAFoC,CAGpC;;AACA,QAAK,CAAC,CAAEoD,eAAH,IAAsBA,eAAe,CAAEC,GAAF,CAAf,KAA2BvE,KAAtD,EAA8D;AAC7D2C,MAAAA,iBAAiB,CAAE0B,sBAAF,CAAjB;AACA,KAFD,MAEO;AACNL,MAAAA,YAAY,CAAE,IAAF,CAAZ;AACA;AACD,GAVqC,EAWtC,CAAE9C,UAAF,EAAcd,QAAd,CAXsC,CAAvC;AAcA,SACC,cAAC,iBAAD,QACC,cAAC,mBAAD,QACC,cAAC,cAAD,QAAkByD,YAAlB,CADD,EAEC,cAAC,uBAAD,QACGM,WAAW,IAAIxC,SAAf,IACD,cAAC,UAAD;AACC,IAAA,OAAO,MADR;AAEC,IAAA,OAAO,EAAG,MAAM;AACfqC,MAAAA,YAAY,CAAE,KAAF,CAAZ;AACArB,MAAAA,iBAAiB,CAAE,IAAF,CAAjB;AACA;AALF,KAOG5E,EAAE,CAAE,MAAF,CAPL,CAFF,EAYG,CAAE2D,mBAAF,IACD,cAAC,MAAD;AACC,IAAA,OAAO,MADR;AAEC,IAAA,SAAS,EAAGuC,QAFb;AAGC,IAAA,IAAI,EAAG9F,IAHR;AAIC,IAAA,KAAK,EACJ+C,UAAU,GACPnD,EAAE,CAAE,cAAF,CADK,GAEPA,EAAE,CAAE,WAAF,CAPP;AASC,IAAA,OAAO,EAAG,MAAM;AACf,YAAMyG,cAAc,GAAGrE,kBAAkB,CACxCC,QADwC,EAExCC,UAFwC,CAAzC;AAKAJ,MAAAA,QAAQ,CAAE,CACT,GAAGG,QADM,EAET,EACC,IAAKc,UAAU,GACZ;AAAEK,UAAAA,QAAQ,EAAE3B;AAAZ,SADY,GAEZ;AAAEyB,UAAAA,KAAK,EAAEvB;AAAT,SAFH,CADD;AAICsC,QAAAA,IAAI,EAAEoC,cAJP;AAKC5D,QAAAA,IAAI,EACHP,UAAU,GACV3C,SAAS,CAAE8G,cAAF;AAPX,OAFS,CAAF,CAAR;AAYAR,MAAAA,YAAY,CAAE,IAAF,CAAZ;AACArB,MAAAA,iBAAiB,CAAEvC,QAAQ,CAAC8C,MAAX,CAAjB;AACA;AA7BF,IAbF,EA8CGiB,WAAW,KACV,CAAExC,SAAF,IACD,CAAED,mBADD,IAEDqC,QAHW,CAAX,IAIA,cAAC,YAAD;AACC,IAAA,IAAI,EAAG7F,YADR;AAEC,IAAA,KAAK,EACJgD,UAAU,GACPnD,EAAE,CAAE,kBAAF,CADK,GAEPA,EAAE,CAAE,eAAF,CALP;AAOC,IAAA,WAAW,EAAG;AACb0G,MAAAA,OAAO,EAAE;AADI;AAPf,KAWG;AAAA,QAAE;AAAErD,MAAAA;AAAF,KAAF;AAAA,WACD,8BACC,cAAC,aAAD;AAAe,MAAA,IAAI,EAAC;AAApB,OACG,CAAEO,SAAF,IACD,cAAC,MAAD;AACC,MAAA,OAAO,EAAC,UADT;AAEC,MAAA,OAAO,EAAG,MAAM;AACfqC,QAAAA,YAAY,CAAE,IAAF,CAAZ;AACA5C,QAAAA,OAAO;AACP,OALF;AAMC,MAAA,SAAS,EAAC;AANX,OAQGrD,EAAE,CAAE,cAAF,CARL,CAFF,EAaG,CAAE2D,mBAAF,IACD,cAAC,MAAD;AACC,MAAA,OAAO,EAAC,UADT;AAEC,MAAA,OAAO,EAAG,MAAM;AACfiB,QAAAA,iBAAiB,CAChB,IADgB,CAAjB;AAGAqB,QAAAA,YAAY,CAAE,KAAF,CAAZ;AACA/D,QAAAA,QAAQ;AACRmB,QAAAA,OAAO;AACP,OATF;AAUC,MAAA,SAAS,EAAC;AAVX,OAYGF,UAAU,GACTnD,EAAE,CACF,sBADE,CADO,GAITA,EAAE,CACF,mBADE,CAhBN,CAdF,EAmCGgG,QAAQ,IACT,cAAC,MAAD;AACC,MAAA,OAAO,EAAC,UADT;AAEC,MAAA,OAAO,EAAG,MAAM;AACfpB,QAAAA,iBAAiB,CAChB,IADgB,CAAjB;AAGA1C,QAAAA,QAAQ;AACRmB,QAAAA,OAAO;AACP;AARF,OAUGF,UAAU,GACTnD,EAAE,CAAE,gBAAF,CADO,GAETA,EAAE,CAAE,cAAF,CAZN,CApCF,CADD,CADC;AAAA,GAXH,CAlDH,CAFD,CADD,EA4HGoG,WAAW,IACZ,8BACGxC,SAAS,IACV,cAAC,mBAAD;AACC,IAAA,mBAAmB,EAAGD,mBADvB;AAEC,IAAA,QAAQ,EAAGtB,QAFZ;AAGC,IAAA,QAAQ,EAAGH,QAHZ;AAIC,IAAA,cAAc,EAAGyC,cAJlB;AAKC,IAAA,iBAAiB,EAAGC,iBALrB;AAMC,IAAA,UAAU,EAAGtC,UANd;AAOC,IAAA,UAAU,EAAGa;AAPd,IAFF,EAYG,CAAES,SAAF,IAAee,cAAc,KAAK,IAAlC,IACD,cAAC,kBAAD;AACC,IAAA,UAAU,EAAGxB,UADd;AAEC,IAAA,OAAO,EAAG,MAAMyB,iBAAiB,CAAE,IAAF,CAFlC;AAGC,IAAA,QAAQ,EAAKU,UAAF,IAAkB;AAC5BF,MAAAA,gBAAgB,CACf/C,QAAQ,CAACgD,GAAT,CACC,CAAEE,cAAF,EAAkBC,YAAlB,KAAoC;AACnC,YACCA,YAAY,KAAKb,cADlB,EAEE;AACD,iBAAOW,UAAP;AACA;;AACD,eAAOC,cAAP;AACA,OARF,CADe,CAAhB;AAYA,KAhBF;AAiBC,IAAA,OAAO,EAAGlD,QAAQ,CAAEsC,cAAF;AAjBnB,IAbF,EAiCG,CAAEf,SAAF,KACCT,UAAU,GACX,cAAC,cAAD;AACC,IAAA,iBAAiB,MADlB;AAEC,IAAA,SAAS,EAAGyC,SAFb;AAGC,IAAA,QAAQ,EAAGS,mBAHZ;AAIC,IAAA,SAAS,EAAG,KAJb;AAKC,IAAA,sBAAsB,EAAG;AAL1B,IADW,GASX,cAAC,YAAD;AACC,IAAA,MAAM,EAAGR,MADV;AAEC,IAAA,QAAQ,EAAGQ,mBAFZ;AAGC,IAAA,SAAS,EAAG,KAHb;AAIC,IAAA,mBAAmB,EAAG;AAJvB,IAVA,CAjCH,CA7HF,EAiLG,CAAED,WAAF,IAAiBL,YAjLpB,CADD;AAqLA","sourcesContent":["/**\n * External dependencies\n */\nimport { kebabCase } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useRef, useEffect, useCallback } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { lineSolid, moreVertical, plus } from '@wordpress/icons';\nimport {\n\t__experimentalUseFocusOutside as useFocusOutside,\n\tuseDebounce,\n} from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { ColorPicker } from '../color-picker';\nimport { FlexItem } from '../flex';\nimport { HStack } from '../h-stack';\nimport { ItemGroup } from '../item-group';\nimport { VStack } from '../v-stack';\nimport GradientPicker from '../gradient-picker';\nimport ColorPalette from '../color-palette';\nimport DropdownMenu from '../dropdown-menu';\nimport Popover from '../popover';\nimport {\n\tPaletteActionsContainer,\n\tPaletteEditStyles,\n\tPaletteHeading,\n\tPaletteHStackHeader,\n\tIndicatorStyled,\n\tPaletteItem,\n\tNameContainer,\n\tNameInputControl,\n\tDoneButton,\n\tRemoveButton,\n} from './styles';\nimport { NavigableMenu } from '../navigable-container';\nimport { DEFAULT_GRADIENT } from '../custom-gradient-picker/constants';\nimport CustomGradientPicker from '../custom-gradient-picker';\n\nconst DEFAULT_COLOR = '#000';\n\nfunction NameInput( { value, onChange, label } ) {\n\treturn (\n\t\t<NameInputControl\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t/>\n\t);\n}\n\n/**\n * Returns a temporary name for a palette item in the format \"Color + id\".\n * To ensure there are no duplicate ids, this function checks all slugs for temporary names.\n * It expects slugs to be in the format: slugPrefix + color- + number.\n * It then sets the id component of the new name based on the incremented id of the highest existing slug id.\n *\n * @param {string} elements   An array of color palette items.\n * @param {string} slugPrefix The slug prefix used to match the element slug.\n *\n * @return {string} A unique name for a palette item.\n */\nexport function getNameForPosition( elements, slugPrefix ) {\n\tconst temporaryNameRegex = new RegExp( `^${ slugPrefix }color-([\\\\d]+)$` );\n\tconst position = elements.reduce( ( previousValue, currentValue ) => {\n\t\tif ( typeof currentValue?.slug === 'string' ) {\n\t\t\tconst matches = currentValue?.slug.match( temporaryNameRegex );\n\t\t\tif ( matches ) {\n\t\t\t\tconst id = parseInt( matches[ 1 ], 10 );\n\t\t\t\tif ( id >= previousValue ) {\n\t\t\t\t\treturn id + 1;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn previousValue;\n\t}, 1 );\n\n\treturn sprintf(\n\t\t/* translators: %s: is a temporary id for a custom color */\n\t\t__( 'Color %s' ),\n\t\tposition\n\t);\n}\n\nfunction ColorPickerPopover( {\n\tisGradient,\n\telement,\n\tonChange,\n\tonClose = () => {},\n} ) {\n\treturn (\n\t\t<Popover\n\t\t\tplacement=\"left-start\"\n\t\t\toffset={ 20 }\n\t\t\tclassName=\"components-palette-edit__popover\"\n\t\t\tonClose={ onClose }\n\t\t>\n\t\t\t{ ! isGradient && (\n\t\t\t\t<ColorPicker\n\t\t\t\t\tcolor={ element.color }\n\t\t\t\t\tenableAlpha\n\t\t\t\t\tonChange={ ( newColor ) =>\n\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\tcolor: newColor,\n\t\t\t\t\t\t} )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ isGradient && (\n\t\t\t\t<div className=\"components-palette-edit__popover-gradient-picker\">\n\t\t\t\t\t<CustomGradientPicker\n\t\t\t\t\t\t__nextHasNoMargin\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\tvalue={ element.gradient }\n\t\t\t\t\t\tonChange={ ( newGradient ) =>\n\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\t\tgradient: newGradient,\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</Popover>\n\t);\n}\n\nfunction Option( {\n\tcanOnlyChangeValues,\n\telement,\n\tonChange,\n\tisEditing,\n\tonStartEditing,\n\tonRemove,\n\tonStopEditing,\n\tslugPrefix,\n\tisGradient,\n} ) {\n\tconst focusOutsideProps = useFocusOutside( onStopEditing );\n\tconst value = isGradient ? element.gradient : element.color;\n\n\treturn (\n\t\t<PaletteItem\n\t\t\tclassName={ isEditing ? 'is-selected' : undefined }\n\t\t\tas=\"div\"\n\t\t\tonClick={ onStartEditing }\n\t\t\t{ ...( isEditing\n\t\t\t\t? { ...focusOutsideProps }\n\t\t\t\t: {\n\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t},\n\t\t\t\t  } ) }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<IndicatorStyled\n\t\t\t\t\t\tstyle={ { background: value, color: 'transparent' } }\n\t\t\t\t\t/>\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t{ isEditing && ! canOnlyChangeValues ? (\n\t\t\t\t\t\t<NameInput\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t? __( 'Gradient name' )\n\t\t\t\t\t\t\t\t\t: __( 'Color name' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ element.name }\n\t\t\t\t\t\t\tonChange={ ( nextName ) =>\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\t\t\tname: nextName,\n\t\t\t\t\t\t\t\t\tslug: slugPrefix + kebabCase( nextName ),\n\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<NameContainer>{ element.name }</NameContainer>\n\t\t\t\t\t) }\n\t\t\t\t</FlexItem>\n\t\t\t\t{ isEditing && ! canOnlyChangeValues && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<RemoveButton\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\ticon={ lineSolid }\n\t\t\t\t\t\t\tlabel={ __( 'Remove color' ) }\n\t\t\t\t\t\t\tonClick={ onRemove }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t\t{ isEditing && (\n\t\t\t\t<ColorPickerPopover\n\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\telement={ element }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</PaletteItem>\n\t);\n}\n\nfunction isTemporaryElement( slugPrefix, { slug, color, gradient } ) {\n\tconst regex = new RegExp( `^${ slugPrefix }color-([\\\\d]+)$` );\n\treturn (\n\t\tregex.test( slug ) &&\n\t\t( ( !! color && color === DEFAULT_COLOR ) ||\n\t\t\t( !! gradient && gradient === DEFAULT_GRADIENT ) )\n\t);\n}\n\nfunction PaletteEditListView( {\n\telements,\n\tonChange,\n\teditingElement,\n\tsetEditingElement,\n\tcanOnlyChangeValues,\n\tslugPrefix,\n\tisGradient,\n} ) {\n\t// When unmounting the component if there are empty elements (the user did not complete the insertion) clean them.\n\tconst elementsReference = useRef();\n\tuseEffect( () => {\n\t\telementsReference.current = elements;\n\t}, [ elements ] );\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tif (\n\t\t\t\telementsReference.current.some( ( element, index ) =>\n\t\t\t\t\tisTemporaryElement( slugPrefix, element, index )\n\t\t\t\t)\n\t\t\t) {\n\t\t\t\tconst newElements = elementsReference.current.filter(\n\t\t\t\t\t( element ) => ! isTemporaryElement( slugPrefix, element )\n\t\t\t\t);\n\t\t\t\tonChange( newElements.length ? newElements : undefined );\n\t\t\t}\n\t\t};\n\t\t// Disable reason: adding the missing dependency here would cause breaking changes that will require\n\t\t// a heavier refactor to avoid. See https://github.com/WordPress/gutenberg/pull/43911\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [] );\n\n\tconst debounceOnChange = useDebounce( onChange, 100 );\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<ItemGroup isRounded>\n\t\t\t\t{ elements.map( ( element, index ) => (\n\t\t\t\t\t<Option\n\t\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\t\tcanOnlyChangeValues={ canOnlyChangeValues }\n\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\telement={ element }\n\t\t\t\t\t\tonStartEditing={ () => {\n\t\t\t\t\t\t\tif ( editingElement !== index ) {\n\t\t\t\t\t\t\t\tsetEditingElement( index );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonChange={ ( newElement ) => {\n\t\t\t\t\t\t\tdebounceOnChange(\n\t\t\t\t\t\t\t\telements.map(\n\t\t\t\t\t\t\t\t\t( currentElement, currentIndex ) => {\n\t\t\t\t\t\t\t\t\t\tif ( currentIndex === index ) {\n\t\t\t\t\t\t\t\t\t\t\treturn newElement;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\treturn currentElement;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonRemove={ () => {\n\t\t\t\t\t\t\tsetEditingElement( null );\n\t\t\t\t\t\t\tconst newElements = elements.filter(\n\t\t\t\t\t\t\t\t( _currentElement, currentIndex ) => {\n\t\t\t\t\t\t\t\t\tif ( currentIndex === index ) {\n\t\t\t\t\t\t\t\t\t\treturn false;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\treturn true;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\tnewElements.length ? newElements : undefined\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tisEditing={ index === editingElement }\n\t\t\t\t\t\tonStopEditing={ () => {\n\t\t\t\t\t\t\tif ( index === editingElement ) {\n\t\t\t\t\t\t\t\tsetEditingElement( null );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tslugPrefix={ slugPrefix }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</ItemGroup>\n\t\t</VStack>\n\t);\n}\n\nconst EMPTY_ARRAY = [];\n\nexport default function PaletteEdit( {\n\tgradients,\n\tcolors = EMPTY_ARRAY,\n\tonChange,\n\tpaletteLabel,\n\temptyMessage,\n\tcanOnlyChangeValues,\n\tcanReset,\n\tslugPrefix = '',\n} ) {\n\tconst isGradient = !! gradients;\n\tconst elements = isGradient ? gradients : colors;\n\tconst [ isEditing, setIsEditing ] = useState( false );\n\tconst [ editingElement, setEditingElement ] = useState( null );\n\tconst isAdding =\n\t\tisEditing &&\n\t\teditingElement &&\n\t\telements[ editingElement ] &&\n\t\t! elements[ editingElement ].slug;\n\tconst elementsLength = elements.length;\n\tconst hasElements = elementsLength > 0;\n\tconst debounceOnChange = useDebounce( onChange, 100 );\n\tconst onSelectPaletteItem = useCallback(\n\t\t( value, newEditingElementIndex ) => {\n\t\t\tconst selectedElement = elements[ newEditingElementIndex ];\n\t\t\tconst key = isGradient ? 'gradient' : 'color';\n\t\t\t// Ensures that the index returned matches a known element value.\n\t\t\tif ( !! selectedElement && selectedElement[ key ] === value ) {\n\t\t\t\tsetEditingElement( newEditingElementIndex );\n\t\t\t} else {\n\t\t\t\tsetIsEditing( true );\n\t\t\t}\n\t\t},\n\t\t[ isGradient, elements ]\n\t);\n\n\treturn (\n\t\t<PaletteEditStyles>\n\t\t\t<PaletteHStackHeader>\n\t\t\t\t<PaletteHeading>{ paletteLabel }</PaletteHeading>\n\t\t\t\t<PaletteActionsContainer>\n\t\t\t\t\t{ hasElements && isEditing && (\n\t\t\t\t\t\t<DoneButton\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetIsEditing( false );\n\t\t\t\t\t\t\t\tsetEditingElement( null );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Done' ) }\n\t\t\t\t\t\t</DoneButton>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! canOnlyChangeValues && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\tisPressed={ isAdding }\n\t\t\t\t\t\t\ticon={ plus }\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t? __( 'Add gradient' )\n\t\t\t\t\t\t\t\t\t: __( 'Add color' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tconst tempOptionName = getNameForPosition(\n\t\t\t\t\t\t\t\t\telements,\n\t\t\t\t\t\t\t\t\tslugPrefix\n\t\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\t\tonChange( [\n\t\t\t\t\t\t\t\t\t...elements,\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t...( isGradient\n\t\t\t\t\t\t\t\t\t\t\t? { gradient: DEFAULT_GRADIENT }\n\t\t\t\t\t\t\t\t\t\t\t: { color: DEFAULT_COLOR } ),\n\t\t\t\t\t\t\t\t\t\tname: tempOptionName,\n\t\t\t\t\t\t\t\t\t\tslug:\n\t\t\t\t\t\t\t\t\t\t\tslugPrefix +\n\t\t\t\t\t\t\t\t\t\t\tkebabCase( tempOptionName ),\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t] );\n\t\t\t\t\t\t\t\tsetIsEditing( true );\n\t\t\t\t\t\t\t\tsetEditingElement( elements.length );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ hasElements &&\n\t\t\t\t\t\t( ! isEditing ||\n\t\t\t\t\t\t\t! canOnlyChangeValues ||\n\t\t\t\t\t\t\tcanReset ) && (\n\t\t\t\t\t\t\t<DropdownMenu\n\t\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t\t? __( 'Gradient options' )\n\t\t\t\t\t\t\t\t\t\t: __( 'Color options' )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\ttoggleProps={ {\n\t\t\t\t\t\t\t\t\tisSmall: true,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ ( { onClose } ) => (\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t<NavigableMenu role=\"menu\">\n\t\t\t\t\t\t\t\t\t\t\t{ ! isEditing && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing( true );\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-palette-edit__menu-button\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ __( 'Show details' ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t{ ! canOnlyChangeValues && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetEditingElement(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnull\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing( false );\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChange();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-palette-edit__menu-button\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ isGradient\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Remove all gradients'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Remove all colors'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t  ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t{ canReset && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetEditingElement(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnull\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChange();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ isGradient\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? __( 'Reset gradient' )\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: __( 'Reset colors' ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t</NavigableMenu>\n\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</DropdownMenu>\n\t\t\t\t\t\t) }\n\t\t\t\t</PaletteActionsContainer>\n\t\t\t</PaletteHStackHeader>\n\t\t\t{ hasElements && (\n\t\t\t\t<>\n\t\t\t\t\t{ isEditing && (\n\t\t\t\t\t\t<PaletteEditListView\n\t\t\t\t\t\t\tcanOnlyChangeValues={ canOnlyChangeValues }\n\t\t\t\t\t\t\telements={ elements }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\teditingElement={ editingElement }\n\t\t\t\t\t\t\tsetEditingElement={ setEditingElement }\n\t\t\t\t\t\t\tslugPrefix={ slugPrefix }\n\t\t\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! isEditing && editingElement !== null && (\n\t\t\t\t\t\t<ColorPickerPopover\n\t\t\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\t\t\tonClose={ () => setEditingElement( null ) }\n\t\t\t\t\t\t\tonChange={ ( newElement ) => {\n\t\t\t\t\t\t\t\tdebounceOnChange(\n\t\t\t\t\t\t\t\t\telements.map(\n\t\t\t\t\t\t\t\t\t\t( currentElement, currentIndex ) => {\n\t\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t\tcurrentIndex === editingElement\n\t\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t\treturn newElement;\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\treturn currentElement;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\telement={ elements[ editingElement ] }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! isEditing &&\n\t\t\t\t\t\t( isGradient ? (\n\t\t\t\t\t\t\t<GradientPicker\n\t\t\t\t\t\t\t\t__nextHasNoMargin\n\t\t\t\t\t\t\t\tgradients={ gradients }\n\t\t\t\t\t\t\t\tonChange={ onSelectPaletteItem }\n\t\t\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\t\t\tdisableCustomGradients={ true }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<ColorPalette\n\t\t\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\t\t\tonChange={ onSelectPaletteItem }\n\t\t\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\t\t\tdisableCustomColors={ true }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) ) }\n\t\t\t\t</>\n\t\t\t) }\n\t\t\t{ ! hasElements && emptyMessage }\n\t\t</PaletteEditStyles>\n\t);\n}\n"]}

package/build-module/popover/index.js

@@ -348,6 +348,7 @@ const UnforwardedPopover = (props, forwardedRef) => {
     placement: computedPlacement,
     className: classnames('components-popover', className, {
       'is-expanded': isExpanded,
+      'is-positioned': x !== null && y !== null,
       // Use the 'alternate' classname for 'toolbar' variant for back compat.
       [`is-${computedVariant === 'toolbar' ? 'alternate' : computedVariant}`]: computedVariant
     })
@@ -357,8 +358,15 @@ const UnforwardedPopover = (props, forwardedRef) => {
     tabIndex: -1,
     style: isExpanded ? undefined : {
       position: strategy,
-      left: Number.isNaN(x) ? 0 : x !== null && x !== void 0 ? x : undefined,
-      top: Number.isNaN(y) ? 0 : y !== null && y !== void 0 ? y : undefined
+      top: 0,
+      left: 0,
+      // `x` and `y` are framer-motion specific props and are shorthands
+      // for `translateX` and `translateY`. Currently it is not possible
+      // to use `translateX` and `translateY` because those values would
+      // be overridden by the return value of the
+      // `placementToMotionAnimationProps` function in `AnimatedWrapper`
+      x: Math.round(x !== null && x !== void 0 ? x : 0) || undefined,
+      y: Math.round(y !== null && y !== void 0 ? y : 0) || undefined
     }
   }), isExpanded && createElement(ScrollLock, null), isExpanded && createElement("div", {
     className: "components-popover__header"