@wordpress/components 19.0.0 → 19.0.4

package/build/color-edit/styles.js

@@ -0,0 +1,112 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RemoveButton = exports.DoneButton = exports.ColorNameInputControl = exports.ColorNameContainer = exports.ColorItem = exports.ColorIndicatorStyled = exports.ColorHeading = exports.ColorHStackHeader = exports.ColorEditStyles = exports.ColorActionsContainer = void 0;
+
+var _base = _interopRequireDefault(require("@emotion/styled/base"));
+
+var _button = _interopRequireDefault(require("../button"));
+
+var _heading = require("../heading");
+
+var _hStack = require("../h-stack");
+
+var _space = require("../ui/utils/space");
+
+var _utils = require("../utils");
+
+var _view = require("../view");
+
+var _colorIndicator = _interopRequireDefault(require("../color-indicator"));
+
+var _inputControl = _interopRequireDefault(require("../input-control"));
+
+var _item = _interopRequireDefault(require("../item-group/item"));
+
+var _inputControlStyles = require("../input-control/styles/input-control-styles");
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+const ColorIndicatorStyled = ( /*#__PURE__*/0, _base.default)(_colorIndicator.default, process.env.NODE_ENV === "production" ? {
+  target: "e3doru19"
+} : {
+  target: "e3doru19",
+  label: "ColorIndicatorStyled"
+})("&&{display:block;border-radius:50%;border:0;height:", (0, _space.space)(6), ";width:", (0, _space.space)(6), ";margin-left:0;padding:0;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY29sb3ItZWRpdC9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBdUI0RCIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2NvbG9yLWVkaXQvc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgQnV0dG9uIGZyb20gJy4uL2J1dHRvbic7XG5pbXBvcnQgeyBIZWFkaW5nIH0gZnJvbSAnLi4vaGVhZGluZyc7XG5pbXBvcnQgeyBIU3RhY2sgfSBmcm9tICcuLi9oLXN0YWNrJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdWkvdXRpbHMvc3BhY2UnO1xuaW1wb3J0IHsgQ09MT1JTLCBDT05GSUcgfSBmcm9tICcuLi91dGlscyc7XG5pbXBvcnQgeyBWaWV3IH0gZnJvbSAnLi4vdmlldyc7XG5pbXBvcnQgQ29sb3JJbmRpY2F0b3IgZnJvbSAnLi4vY29sb3ItaW5kaWNhdG9yJztcbmltcG9ydCBJbnB1dENvbnRyb2wgZnJvbSAnLi4vaW5wdXQtY29udHJvbCc7XG5pbXBvcnQgSXRlbSBmcm9tICcuLi9pdGVtLWdyb3VwL2l0ZW0nO1xuaW1wb3J0IHtcblx0Q29udGFpbmVyIGFzIElucHV0Q29udHJvbENvbnRhaW5lcixcblx0SW5wdXQsXG5cdEJhY2tkcm9wVUkgYXMgSW5wdXRCYWNrZHJvcFVJLFxufSBmcm9tICcuLi9pbnB1dC1jb250cm9sL3N0eWxlcy9pbnB1dC1jb250cm9sLXN0eWxlcyc7XG5cbmV4cG9ydCBjb25zdCBDb2xvckluZGljYXRvclN0eWxlZCA9IHN0eWxlZCggQ29sb3JJbmRpY2F0b3IgKWBcblx0JiYge1xuXHRcdGRpc3BsYXk6IGJsb2NrO1xuXHRcdGJvcmRlci1yYWRpdXM6IDUwJTtcblx0XHRib3JkZXI6IDA7XG5cdFx0aGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdFx0d2lkdGg6ICR7IHNwYWNlKCA2ICkgfTtcblx0XHRtYXJnaW4tbGVmdDogMDtcblx0XHRwYWRkaW5nOiAwO1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JOYW1lSW5wdXRDb250cm9sID0gc3R5bGVkKCBJbnB1dENvbnRyb2wgKWBcblx0JHsgSW5wdXRDb250cm9sQ29udGFpbmVyIH0ge1xuXHRcdGJhY2tncm91bmQ6ICR7IENPTE9SUy5ncmF5WyAxMDAgXSB9O1xuXHRcdGJvcmRlci1yYWRpdXM6IDJweDtcblx0XHQkeyBJbnB1dCB9JHsgSW5wdXQgfSR7IElucHV0IH0keyBJbnB1dCB9IHtcblx0XHRcdGhlaWdodDogJHsgc3BhY2UoIDggKSB9O1xuXHRcdH1cblx0XHQkeyBJbnB1dEJhY2tkcm9wVUkgfSR7IElucHV0QmFja2Ryb3BVSSB9JHsgSW5wdXRCYWNrZHJvcFVJIH0ge1xuXHRcdFx0Ym9yZGVyLWNvbG9yOiB0cmFuc3BhcmVudDtcblx0XHRcdGJveC1zaGFkb3c6IG5vbmU7XG5cdFx0fVxuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JJdGVtID0gc3R5bGVkKCBJdGVtIClgXG5cdHBhZGRpbmc6IDNweCAwIDNweCAkeyBzcGFjZSggMyApIH07XG5cdGhlaWdodDogY2FsYyggNDBweCAtICR7IENPTkZJRy5ib3JkZXJXaWR0aCB9ICk7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JOYW1lQ29udGFpbmVyID0gc3R5bGVkLnNwYW5gXG5cdGxpbmUtaGVpZ2h0OiAkeyBzcGFjZSggOCApIH07XG5cdG1hcmdpbi1sZWZ0OiAkeyBzcGFjZSggMiApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JIZWFkaW5nID0gc3R5bGVkKCBIZWFkaW5nIClgXG5cdHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG5cdGxpbmUtaGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdGZvbnQtd2VpZ2h0OiA1MDA7XG5cdCYmJiB7XG5cdFx0Zm9udC1zaXplOiAxMXB4O1xuXHRcdG1hcmdpbi1ib3R0b206IDA7XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBDb2xvckFjdGlvbnNDb250YWluZXIgPSBzdHlsZWQoIFZpZXcgKWBcblx0aGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdGRpc3BsYXk6IGZsZXg7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JIU3RhY2tIZWFkZXIgPSBzdHlsZWQoIEhTdGFjayApYFxuXHRtYXJnaW4tYm90dG9tOiAkeyBzcGFjZSggMiApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JFZGl0U3R5bGVzID0gc3R5bGVkKCBWaWV3IClgXG5cdCYmJiB7XG5cdFx0LmNvbXBvbmVudHMtYnV0dG9uLmhhcy1pY29uIHtcblx0XHRtaW4td2lkdGg6IDA7XG5cdFx0cGFkZGluZzogMDtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IERvbmVCdXR0b24gPSBzdHlsZWQoIEJ1dHRvbiApYFxuXHQmJiB7XG5cdFx0Y29sb3I6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgUmVtb3ZlQnV0dG9uID0gc3R5bGVkKCBCdXR0b24gKWBcblx0JiYge1xuXHRcdG1hcmdpbi10b3A6ICR7IHNwYWNlKCAxICkgfTtcblx0fVxuYDtcbiJdfQ== */"));
+exports.ColorIndicatorStyled = ColorIndicatorStyled;
+const ColorNameInputControl = ( /*#__PURE__*/0, _base.default)(_inputControl.default, process.env.NODE_ENV === "production" ? {
+  target: "e3doru18"
+} : {
+  target: "e3doru18",
+  label: "ColorNameInputControl"
+})(_inputControlStyles.Container, "{background:", _utils.COLORS.gray[100], ";border-radius:2px;", _inputControlStyles.Input, _inputControlStyles.Input, _inputControlStyles.Input, _inputControlStyles.Input, "{height:", (0, _space.space)(8), ";}", _inputControlStyles.BackdropUI, _inputControlStyles.BackdropUI, _inputControlStyles.BackdropUI, "{border-color:transparent;box-shadow:none;}}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY29sb3ItZWRpdC9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBbUMyRCIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2NvbG9yLWVkaXQvc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgQnV0dG9uIGZyb20gJy4uL2J1dHRvbic7XG5pbXBvcnQgeyBIZWFkaW5nIH0gZnJvbSAnLi4vaGVhZGluZyc7XG5pbXBvcnQgeyBIU3RhY2sgfSBmcm9tICcuLi9oLXN0YWNrJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdWkvdXRpbHMvc3BhY2UnO1xuaW1wb3J0IHsgQ09MT1JTLCBDT05GSUcgfSBmcm9tICcuLi91dGlscyc7XG5pbXBvcnQgeyBWaWV3IH0gZnJvbSAnLi4vdmlldyc7XG5pbXBvcnQgQ29sb3JJbmRpY2F0b3IgZnJvbSAnLi4vY29sb3ItaW5kaWNhdG9yJztcbmltcG9ydCBJbnB1dENvbnRyb2wgZnJvbSAnLi4vaW5wdXQtY29udHJvbCc7XG5pbXBvcnQgSXRlbSBmcm9tICcuLi9pdGVtLWdyb3VwL2l0ZW0nO1xuaW1wb3J0IHtcblx0Q29udGFpbmVyIGFzIElucHV0Q29udHJvbENvbnRhaW5lcixcblx0SW5wdXQsXG5cdEJhY2tkcm9wVUkgYXMgSW5wdXRCYWNrZHJvcFVJLFxufSBmcm9tICcuLi9pbnB1dC1jb250cm9sL3N0eWxlcy9pbnB1dC1jb250cm9sLXN0eWxlcyc7XG5cbmV4cG9ydCBjb25zdCBDb2xvckluZGljYXRvclN0eWxlZCA9IHN0eWxlZCggQ29sb3JJbmRpY2F0b3IgKWBcblx0JiYge1xuXHRcdGRpc3BsYXk6IGJsb2NrO1xuXHRcdGJvcmRlci1yYWRpdXM6IDUwJTtcblx0XHRib3JkZXI6IDA7XG5cdFx0aGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdFx0d2lkdGg6ICR7IHNwYWNlKCA2ICkgfTtcblx0XHRtYXJnaW4tbGVmdDogMDtcblx0XHRwYWRkaW5nOiAwO1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JOYW1lSW5wdXRDb250cm9sID0gc3R5bGVkKCBJbnB1dENvbnRyb2wgKWBcblx0JHsgSW5wdXRDb250cm9sQ29udGFpbmVyIH0ge1xuXHRcdGJhY2tncm91bmQ6ICR7IENPTE9SUy5ncmF5WyAxMDAgXSB9O1xuXHRcdGJvcmRlci1yYWRpdXM6IDJweDtcblx0XHQkeyBJbnB1dCB9JHsgSW5wdXQgfSR7IElucHV0IH0keyBJbnB1dCB9IHtcblx0XHRcdGhlaWdodDogJHsgc3BhY2UoIDggKSB9O1xuXHRcdH1cblx0XHQkeyBJbnB1dEJhY2tkcm9wVUkgfSR7IElucHV0QmFja2Ryb3BVSSB9JHsgSW5wdXRCYWNrZHJvcFVJIH0ge1xuXHRcdFx0Ym9yZGVyLWNvbG9yOiB0cmFuc3BhcmVudDtcblx0XHRcdGJveC1zaGFkb3c6IG5vbmU7XG5cdFx0fVxuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JJdGVtID0gc3R5bGVkKCBJdGVtIClgXG5cdHBhZGRpbmc6IDNweCAwIDNweCAkeyBzcGFjZSggMyApIH07XG5cdGhlaWdodDogY2FsYyggNDBweCAtICR7IENPTkZJRy5ib3JkZXJXaWR0aCB9ICk7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JOYW1lQ29udGFpbmVyID0gc3R5bGVkLnNwYW5gXG5cdGxpbmUtaGVpZ2h0OiAkeyBzcGFjZSggOCApIH07XG5cdG1hcmdpbi1sZWZ0OiAkeyBzcGFjZSggMiApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JIZWFkaW5nID0gc3R5bGVkKCBIZWFkaW5nIClgXG5cdHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG5cdGxpbmUtaGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdGZvbnQtd2VpZ2h0OiA1MDA7XG5cdCYmJiB7XG5cdFx0Zm9udC1zaXplOiAxMXB4O1xuXHRcdG1hcmdpbi1ib3R0b206IDA7XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBDb2xvckFjdGlvbnNDb250YWluZXIgPSBzdHlsZWQoIFZpZXcgKWBcblx0aGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdGRpc3BsYXk6IGZsZXg7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JIU3RhY2tIZWFkZXIgPSBzdHlsZWQoIEhTdGFjayApYFxuXHRtYXJnaW4tYm90dG9tOiAkeyBzcGFjZSggMiApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JFZGl0U3R5bGVzID0gc3R5bGVkKCBWaWV3IClgXG5cdCYmJiB7XG5cdFx0LmNvbXBvbmVudHMtYnV0dG9uLmhhcy1pY29uIHtcblx0XHRtaW4td2lkdGg6IDA7XG5cdFx0cGFkZGluZzogMDtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IERvbmVCdXR0b24gPSBzdHlsZWQoIEJ1dHRvbiApYFxuXHQmJiB7XG5cdFx0Y29sb3I6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgUmVtb3ZlQnV0dG9uID0gc3R5bGVkKCBCdXR0b24gKWBcblx0JiYge1xuXHRcdG1hcmdpbi10b3A6ICR7IHNwYWNlKCAxICkgfTtcblx0fVxuYDtcbiJdfQ== */"));
+exports.ColorNameInputControl = ColorNameInputControl;
+const ColorItem = ( /*#__PURE__*/0, _base.default)(_item.default, process.env.NODE_ENV === "production" ? {
+  target: "e3doru17"
+} : {
+  target: "e3doru17",
+  label: "ColorItem"
+})("padding:3px 0 3px ", (0, _space.space)(3), ";height:calc( 40px - ", _utils.CONFIG.borderWidth, " );" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY29sb3ItZWRpdC9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUR1QyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2NvbG9yLWVkaXQvc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgQnV0dG9uIGZyb20gJy4uL2J1dHRvbic7XG5pbXBvcnQgeyBIZWFkaW5nIH0gZnJvbSAnLi4vaGVhZGluZyc7XG5pbXBvcnQgeyBIU3RhY2sgfSBmcm9tICcuLi9oLXN0YWNrJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdWkvdXRpbHMvc3BhY2UnO1xuaW1wb3J0IHsgQ09MT1JTLCBDT05GSUcgfSBmcm9tICcuLi91dGlscyc7XG5pbXBvcnQgeyBWaWV3IH0gZnJvbSAnLi4vdmlldyc7XG5pbXBvcnQgQ29sb3JJbmRpY2F0b3IgZnJvbSAnLi4vY29sb3ItaW5kaWNhdG9yJztcbmltcG9ydCBJbnB1dENvbnRyb2wgZnJvbSAnLi4vaW5wdXQtY29udHJvbCc7XG5pbXBvcnQgSXRlbSBmcm9tICcuLi9pdGVtLWdyb3VwL2l0ZW0nO1xuaW1wb3J0IHtcblx0Q29udGFpbmVyIGFzIElucHV0Q29udHJvbENvbnRhaW5lcixcblx0SW5wdXQsXG5cdEJhY2tkcm9wVUkgYXMgSW5wdXRCYWNrZHJvcFVJLFxufSBmcm9tICcuLi9pbnB1dC1jb250cm9sL3N0eWxlcy9pbnB1dC1jb250cm9sLXN0eWxlcyc7XG5cbmV4cG9ydCBjb25zdCBDb2xvckluZGljYXRvclN0eWxlZCA9IHN0eWxlZCggQ29sb3JJbmRpY2F0b3IgKWBcblx0JiYge1xuXHRcdGRpc3BsYXk6IGJsb2NrO1xuXHRcdGJvcmRlci1yYWRpdXM6IDUwJTtcblx0XHRib3JkZXI6IDA7XG5cdFx0aGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdFx0d2lkdGg6ICR7IHNwYWNlKCA2ICkgfTtcblx0XHRtYXJnaW4tbGVmdDogMDtcblx0XHRwYWRkaW5nOiAwO1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JOYW1lSW5wdXRDb250cm9sID0gc3R5bGVkKCBJbnB1dENvbnRyb2wgKWBcblx0JHsgSW5wdXRDb250cm9sQ29udGFpbmVyIH0ge1xuXHRcdGJhY2tncm91bmQ6ICR7IENPTE9SUy5ncmF5WyAxMDAgXSB9O1xuXHRcdGJvcmRlci1yYWRpdXM6IDJweDtcblx0XHQkeyBJbnB1dCB9JHsgSW5wdXQgfSR7IElucHV0IH0keyBJbnB1dCB9IHtcblx0XHRcdGhlaWdodDogJHsgc3BhY2UoIDggKSB9O1xuXHRcdH1cblx0XHQkeyBJbnB1dEJhY2tkcm9wVUkgfSR7IElucHV0QmFja2Ryb3BVSSB9JHsgSW5wdXRCYWNrZHJvcFVJIH0ge1xuXHRcdFx0Ym9yZGVyLWNvbG9yOiB0cmFuc3BhcmVudDtcblx0XHRcdGJveC1zaGFkb3c6IG5vbmU7XG5cdFx0fVxuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JJdGVtID0gc3R5bGVkKCBJdGVtIClgXG5cdHBhZGRpbmc6IDNweCAwIDNweCAkeyBzcGFjZSggMyApIH07XG5cdGhlaWdodDogY2FsYyggNDBweCAtICR7IENPTkZJRy5ib3JkZXJXaWR0aCB9ICk7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JOYW1lQ29udGFpbmVyID0gc3R5bGVkLnNwYW5gXG5cdGxpbmUtaGVpZ2h0OiAkeyBzcGFjZSggOCApIH07XG5cdG1hcmdpbi1sZWZ0OiAkeyBzcGFjZSggMiApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JIZWFkaW5nID0gc3R5bGVkKCBIZWFkaW5nIClgXG5cdHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG5cdGxpbmUtaGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdGZvbnQtd2VpZ2h0OiA1MDA7XG5cdCYmJiB7XG5cdFx0Zm9udC1zaXplOiAxMXB4O1xuXHRcdG1hcmdpbi1ib3R0b206IDA7XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBDb2xvckFjdGlvbnNDb250YWluZXIgPSBzdHlsZWQoIFZpZXcgKWBcblx0aGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdGRpc3BsYXk6IGZsZXg7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JIU3RhY2tIZWFkZXIgPSBzdHlsZWQoIEhTdGFjayApYFxuXHRtYXJnaW4tYm90dG9tOiAkeyBzcGFjZSggMiApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JFZGl0U3R5bGVzID0gc3R5bGVkKCBWaWV3IClgXG5cdCYmJiB7XG5cdFx0LmNvbXBvbmVudHMtYnV0dG9uLmhhcy1pY29uIHtcblx0XHRtaW4td2lkdGg6IDA7XG5cdFx0cGFkZGluZzogMDtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IERvbmVCdXR0b24gPSBzdHlsZWQoIEJ1dHRvbiApYFxuXHQmJiB7XG5cdFx0Y29sb3I6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgUmVtb3ZlQnV0dG9uID0gc3R5bGVkKCBCdXR0b24gKWBcblx0JiYge1xuXHRcdG1hcmdpbi10b3A6ICR7IHNwYWNlKCAxICkgfTtcblx0fVxuYDtcbiJdfQ== */"));
+exports.ColorItem = ColorItem;
+const ColorNameContainer = (0, _base.default)("span", process.env.NODE_ENV === "production" ? {
+  target: "e3doru16"
+} : {
+  target: "e3doru16",
+  label: "ColorNameContainer"
+})("line-height:", (0, _space.space)(8), ";margin-left:", (0, _space.space)(2), ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY29sb3ItZWRpdC9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0Q2QyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2NvbG9yLWVkaXQvc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgQnV0dG9uIGZyb20gJy4uL2J1dHRvbic7XG5pbXBvcnQgeyBIZWFkaW5nIH0gZnJvbSAnLi4vaGVhZGluZyc7XG5pbXBvcnQgeyBIU3RhY2sgfSBmcm9tICcuLi9oLXN0YWNrJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdWkvdXRpbHMvc3BhY2UnO1xuaW1wb3J0IHsgQ09MT1JTLCBDT05GSUcgfSBmcm9tICcuLi91dGlscyc7XG5pbXBvcnQgeyBWaWV3IH0gZnJvbSAnLi4vdmlldyc7XG5pbXBvcnQgQ29sb3JJbmRpY2F0b3IgZnJvbSAnLi4vY29sb3ItaW5kaWNhdG9yJztcbmltcG9ydCBJbnB1dENvbnRyb2wgZnJvbSAnLi4vaW5wdXQtY29udHJvbCc7XG5pbXBvcnQgSXRlbSBmcm9tICcuLi9pdGVtLWdyb3VwL2l0ZW0nO1xuaW1wb3J0IHtcblx0Q29udGFpbmVyIGFzIElucHV0Q29udHJvbENvbnRhaW5lcixcblx0SW5wdXQsXG5cdEJhY2tkcm9wVUkgYXMgSW5wdXRCYWNrZHJvcFVJLFxufSBmcm9tICcuLi9pbnB1dC1jb250cm9sL3N0eWxlcy9pbnB1dC1jb250cm9sLXN0eWxlcyc7XG5cbmV4cG9ydCBjb25zdCBDb2xvckluZGljYXRvclN0eWxlZCA9IHN0eWxlZCggQ29sb3JJbmRpY2F0b3IgKWBcblx0JiYge1xuXHRcdGRpc3BsYXk6IGJsb2NrO1xuXHRcdGJvcmRlci1yYWRpdXM6IDUwJTtcblx0XHRib3JkZXI6IDA7XG5cdFx0aGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdFx0d2lkdGg6ICR7IHNwYWNlKCA2ICkgfTtcblx0XHRtYXJnaW4tbGVmdDogMDtcblx0XHRwYWRkaW5nOiAwO1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JOYW1lSW5wdXRDb250cm9sID0gc3R5bGVkKCBJbnB1dENvbnRyb2wgKWBcblx0JHsgSW5wdXRDb250cm9sQ29udGFpbmVyIH0ge1xuXHRcdGJhY2tncm91bmQ6ICR7IENPTE9SUy5ncmF5WyAxMDAgXSB9O1xuXHRcdGJvcmRlci1yYWRpdXM6IDJweDtcblx0XHQkeyBJbnB1dCB9JHsgSW5wdXQgfSR7IElucHV0IH0keyBJbnB1dCB9IHtcblx0XHRcdGhlaWdodDogJHsgc3BhY2UoIDggKSB9O1xuXHRcdH1cblx0XHQkeyBJbnB1dEJhY2tkcm9wVUkgfSR7IElucHV0QmFja2Ryb3BVSSB9JHsgSW5wdXRCYWNrZHJvcFVJIH0ge1xuXHRcdFx0Ym9yZGVyLWNvbG9yOiB0cmFuc3BhcmVudDtcblx0XHRcdGJveC1zaGFkb3c6IG5vbmU7XG5cdFx0fVxuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JJdGVtID0gc3R5bGVkKCBJdGVtIClgXG5cdHBhZGRpbmc6IDNweCAwIDNweCAkeyBzcGFjZSggMyApIH07XG5cdGhlaWdodDogY2FsYyggNDBweCAtICR7IENPTkZJRy5ib3JkZXJXaWR0aCB9ICk7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JOYW1lQ29udGFpbmVyID0gc3R5bGVkLnNwYW5gXG5cdGxpbmUtaGVpZ2h0OiAkeyBzcGFjZSggOCApIH07XG5cdG1hcmdpbi1sZWZ0OiAkeyBzcGFjZSggMiApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JIZWFkaW5nID0gc3R5bGVkKCBIZWFkaW5nIClgXG5cdHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG5cdGxpbmUtaGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdGZvbnQtd2VpZ2h0OiA1MDA7XG5cdCYmJiB7XG5cdFx0Zm9udC1zaXplOiAxMXB4O1xuXHRcdG1hcmdpbi1ib3R0b206IDA7XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBDb2xvckFjdGlvbnNDb250YWluZXIgPSBzdHlsZWQoIFZpZXcgKWBcblx0aGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdGRpc3BsYXk6IGZsZXg7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JIU3RhY2tIZWFkZXIgPSBzdHlsZWQoIEhTdGFjayApYFxuXHRtYXJnaW4tYm90dG9tOiAkeyBzcGFjZSggMiApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JFZGl0U3R5bGVzID0gc3R5bGVkKCBWaWV3IClgXG5cdCYmJiB7XG5cdFx0LmNvbXBvbmVudHMtYnV0dG9uLmhhcy1pY29uIHtcblx0XHRtaW4td2lkdGg6IDA7XG5cdFx0cGFkZGluZzogMDtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IERvbmVCdXR0b24gPSBzdHlsZWQoIEJ1dHRvbiApYFxuXHQmJiB7XG5cdFx0Y29sb3I6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgUmVtb3ZlQnV0dG9uID0gc3R5bGVkKCBCdXR0b24gKWBcblx0JiYge1xuXHRcdG1hcmdpbi10b3A6ICR7IHNwYWNlKCAxICkgfTtcblx0fVxuYDtcbiJdfQ== */"));
+exports.ColorNameContainer = ColorNameContainer;
+const ColorHeading = ( /*#__PURE__*/0, _base.default)(_heading.Heading, process.env.NODE_ENV === "production" ? {
+  target: "e3doru15"
+} : {
+  target: "e3doru15",
+  label: "ColorHeading"
+})("text-transform:uppercase;line-height:", (0, _space.space)(6), ";font-weight:500;&&&{font-size:11px;margin-bottom:0;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY29sb3ItZWRpdC9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMkQ2QyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2NvbG9yLWVkaXQvc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgQnV0dG9uIGZyb20gJy4uL2J1dHRvbic7XG5pbXBvcnQgeyBIZWFkaW5nIH0gZnJvbSAnLi4vaGVhZGluZyc7XG5pbXBvcnQgeyBIU3RhY2sgfSBmcm9tICcuLi9oLXN0YWNrJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdWkvdXRpbHMvc3BhY2UnO1xuaW1wb3J0IHsgQ09MT1JTLCBDT05GSUcgfSBmcm9tICcuLi91dGlscyc7XG5pbXBvcnQgeyBWaWV3IH0gZnJvbSAnLi4vdmlldyc7XG5pbXBvcnQgQ29sb3JJbmRpY2F0b3IgZnJvbSAnLi4vY29sb3ItaW5kaWNhdG9yJztcbmltcG9ydCBJbnB1dENvbnRyb2wgZnJvbSAnLi4vaW5wdXQtY29udHJvbCc7XG5pbXBvcnQgSXRlbSBmcm9tICcuLi9pdGVtLWdyb3VwL2l0ZW0nO1xuaW1wb3J0IHtcblx0Q29udGFpbmVyIGFzIElucHV0Q29udHJvbENvbnRhaW5lcixcblx0SW5wdXQsXG5cdEJhY2tkcm9wVUkgYXMgSW5wdXRCYWNrZHJvcFVJLFxufSBmcm9tICcuLi9pbnB1dC1jb250cm9sL3N0eWxlcy9pbnB1dC1jb250cm9sLXN0eWxlcyc7XG5cbmV4cG9ydCBjb25zdCBDb2xvckluZGljYXRvclN0eWxlZCA9IHN0eWxlZCggQ29sb3JJbmRpY2F0b3IgKWBcblx0JiYge1xuXHRcdGRpc3BsYXk6IGJsb2NrO1xuXHRcdGJvcmRlci1yYWRpdXM6IDUwJTtcblx0XHRib3JkZXI6IDA7XG5cdFx0aGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdFx0d2lkdGg6ICR7IHNwYWNlKCA2ICkgfTtcblx0XHRtYXJnaW4tbGVmdDogMDtcblx0XHRwYWRkaW5nOiAwO1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JOYW1lSW5wdXRDb250cm9sID0gc3R5bGVkKCBJbnB1dENvbnRyb2wgKWBcblx0JHsgSW5wdXRDb250cm9sQ29udGFpbmVyIH0ge1xuXHRcdGJhY2tncm91bmQ6ICR7IENPTE9SUy5ncmF5WyAxMDAgXSB9O1xuXHRcdGJvcmRlci1yYWRpdXM6IDJweDtcblx0XHQkeyBJbnB1dCB9JHsgSW5wdXQgfSR7IElucHV0IH0keyBJbnB1dCB9IHtcblx0XHRcdGhlaWdodDogJHsgc3BhY2UoIDggKSB9O1xuXHRcdH1cblx0XHQkeyBJbnB1dEJhY2tkcm9wVUkgfSR7IElucHV0QmFja2Ryb3BVSSB9JHsgSW5wdXRCYWNrZHJvcFVJIH0ge1xuXHRcdFx0Ym9yZGVyLWNvbG9yOiB0cmFuc3BhcmVudDtcblx0XHRcdGJveC1zaGFkb3c6IG5vbmU7XG5cdFx0fVxuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JJdGVtID0gc3R5bGVkKCBJdGVtIClgXG5cdHBhZGRpbmc6IDNweCAwIDNweCAkeyBzcGFjZSggMyApIH07XG5cdGhlaWdodDogY2FsYyggNDBweCAtICR7IENPTkZJRy5ib3JkZXJXaWR0aCB9ICk7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JOYW1lQ29udGFpbmVyID0gc3R5bGVkLnNwYW5gXG5cdGxpbmUtaGVpZ2h0OiAkeyBzcGFjZSggOCApIH07XG5cdG1hcmdpbi1sZWZ0OiAkeyBzcGFjZSggMiApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JIZWFkaW5nID0gc3R5bGVkKCBIZWFkaW5nIClgXG5cdHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG5cdGxpbmUtaGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdGZvbnQtd2VpZ2h0OiA1MDA7XG5cdCYmJiB7XG5cdFx0Zm9udC1zaXplOiAxMXB4O1xuXHRcdG1hcmdpbi1ib3R0b206IDA7XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBDb2xvckFjdGlvbnNDb250YWluZXIgPSBzdHlsZWQoIFZpZXcgKWBcblx0aGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdGRpc3BsYXk6IGZsZXg7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JIU3RhY2tIZWFkZXIgPSBzdHlsZWQoIEhTdGFjayApYFxuXHRtYXJnaW4tYm90dG9tOiAkeyBzcGFjZSggMiApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JFZGl0U3R5bGVzID0gc3R5bGVkKCBWaWV3IClgXG5cdCYmJiB7XG5cdFx0LmNvbXBvbmVudHMtYnV0dG9uLmhhcy1pY29uIHtcblx0XHRtaW4td2lkdGg6IDA7XG5cdFx0cGFkZGluZzogMDtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IERvbmVCdXR0b24gPSBzdHlsZWQoIEJ1dHRvbiApYFxuXHQmJiB7XG5cdFx0Y29sb3I6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgUmVtb3ZlQnV0dG9uID0gc3R5bGVkKCBCdXR0b24gKWBcblx0JiYge1xuXHRcdG1hcmdpbi10b3A6ICR7IHNwYWNlKCAxICkgfTtcblx0fVxuYDtcbiJdfQ== */"));
+exports.ColorHeading = ColorHeading;
+const ColorActionsContainer = ( /*#__PURE__*/0, _base.default)(_view.View, process.env.NODE_ENV === "production" ? {
+  target: "e3doru14"
+} : {
+  target: "e3doru14",
+  label: "ColorActionsContainer"
+})("height:", (0, _space.space)(6), ";display:flex;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY29sb3ItZWRpdC9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUVtRCIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2NvbG9yLWVkaXQvc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgQnV0dG9uIGZyb20gJy4uL2J1dHRvbic7XG5pbXBvcnQgeyBIZWFkaW5nIH0gZnJvbSAnLi4vaGVhZGluZyc7XG5pbXBvcnQgeyBIU3RhY2sgfSBmcm9tICcuLi9oLXN0YWNrJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdWkvdXRpbHMvc3BhY2UnO1xuaW1wb3J0IHsgQ09MT1JTLCBDT05GSUcgfSBmcm9tICcuLi91dGlscyc7XG5pbXBvcnQgeyBWaWV3IH0gZnJvbSAnLi4vdmlldyc7XG5pbXBvcnQgQ29sb3JJbmRpY2F0b3IgZnJvbSAnLi4vY29sb3ItaW5kaWNhdG9yJztcbmltcG9ydCBJbnB1dENvbnRyb2wgZnJvbSAnLi4vaW5wdXQtY29udHJvbCc7XG5pbXBvcnQgSXRlbSBmcm9tICcuLi9pdGVtLWdyb3VwL2l0ZW0nO1xuaW1wb3J0IHtcblx0Q29udGFpbmVyIGFzIElucHV0Q29udHJvbENvbnRhaW5lcixcblx0SW5wdXQsXG5cdEJhY2tkcm9wVUkgYXMgSW5wdXRCYWNrZHJvcFVJLFxufSBmcm9tICcuLi9pbnB1dC1jb250cm9sL3N0eWxlcy9pbnB1dC1jb250cm9sLXN0eWxlcyc7XG5cbmV4cG9ydCBjb25zdCBDb2xvckluZGljYXRvclN0eWxlZCA9IHN0eWxlZCggQ29sb3JJbmRpY2F0b3IgKWBcblx0JiYge1xuXHRcdGRpc3BsYXk6IGJsb2NrO1xuXHRcdGJvcmRlci1yYWRpdXM6IDUwJTtcblx0XHRib3JkZXI6IDA7XG5cdFx0aGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdFx0d2lkdGg6ICR7IHNwYWNlKCA2ICkgfTtcblx0XHRtYXJnaW4tbGVmdDogMDtcblx0XHRwYWRkaW5nOiAwO1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JOYW1lSW5wdXRDb250cm9sID0gc3R5bGVkKCBJbnB1dENvbnRyb2wgKWBcblx0JHsgSW5wdXRDb250cm9sQ29udGFpbmVyIH0ge1xuXHRcdGJhY2tncm91bmQ6ICR7IENPTE9SUy5ncmF5WyAxMDAgXSB9O1xuXHRcdGJvcmRlci1yYWRpdXM6IDJweDtcblx0XHQkeyBJbnB1dCB9JHsgSW5wdXQgfSR7IElucHV0IH0keyBJbnB1dCB9IHtcblx0XHRcdGhlaWdodDogJHsgc3BhY2UoIDggKSB9O1xuXHRcdH1cblx0XHQkeyBJbnB1dEJhY2tkcm9wVUkgfSR7IElucHV0QmFja2Ryb3BVSSB9JHsgSW5wdXRCYWNrZHJvcFVJIH0ge1xuXHRcdFx0Ym9yZGVyLWNvbG9yOiB0cmFuc3BhcmVudDtcblx0XHRcdGJveC1zaGFkb3c6IG5vbmU7XG5cdFx0fVxuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JJdGVtID0gc3R5bGVkKCBJdGVtIClgXG5cdHBhZGRpbmc6IDNweCAwIDNweCAkeyBzcGFjZSggMyApIH07XG5cdGhlaWdodDogY2FsYyggNDBweCAtICR7IENPTkZJRy5ib3JkZXJXaWR0aCB9ICk7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JOYW1lQ29udGFpbmVyID0gc3R5bGVkLnNwYW5gXG5cdGxpbmUtaGVpZ2h0OiAkeyBzcGFjZSggOCApIH07XG5cdG1hcmdpbi1sZWZ0OiAkeyBzcGFjZSggMiApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JIZWFkaW5nID0gc3R5bGVkKCBIZWFkaW5nIClgXG5cdHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG5cdGxpbmUtaGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdGZvbnQtd2VpZ2h0OiA1MDA7XG5cdCYmJiB7XG5cdFx0Zm9udC1zaXplOiAxMXB4O1xuXHRcdG1hcmdpbi1ib3R0b206IDA7XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBDb2xvckFjdGlvbnNDb250YWluZXIgPSBzdHlsZWQoIFZpZXcgKWBcblx0aGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdGRpc3BsYXk6IGZsZXg7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JIU3RhY2tIZWFkZXIgPSBzdHlsZWQoIEhTdGFjayApYFxuXHRtYXJnaW4tYm90dG9tOiAkeyBzcGFjZSggMiApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JFZGl0U3R5bGVzID0gc3R5bGVkKCBWaWV3IClgXG5cdCYmJiB7XG5cdFx0LmNvbXBvbmVudHMtYnV0dG9uLmhhcy1pY29uIHtcblx0XHRtaW4td2lkdGg6IDA7XG5cdFx0cGFkZGluZzogMDtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IERvbmVCdXR0b24gPSBzdHlsZWQoIEJ1dHRvbiApYFxuXHQmJiB7XG5cdFx0Y29sb3I6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgUmVtb3ZlQnV0dG9uID0gc3R5bGVkKCBCdXR0b24gKWBcblx0JiYge1xuXHRcdG1hcmdpbi10b3A6ICR7IHNwYWNlKCAxICkgfTtcblx0fVxuYDtcbiJdfQ== */"));
+exports.ColorActionsContainer = ColorActionsContainer;
+const ColorHStackHeader = ( /*#__PURE__*/0, _base.default)(_hStack.HStack, process.env.NODE_ENV === "production" ? {
+  target: "e3doru13"
+} : {
+  target: "e3doru13",
+  label: "ColorHStackHeader"
+})("margin-bottom:", (0, _space.space)(2), ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY29sb3ItZWRpdC9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMEVpRCIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2NvbG9yLWVkaXQvc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgQnV0dG9uIGZyb20gJy4uL2J1dHRvbic7XG5pbXBvcnQgeyBIZWFkaW5nIH0gZnJvbSAnLi4vaGVhZGluZyc7XG5pbXBvcnQgeyBIU3RhY2sgfSBmcm9tICcuLi9oLXN0YWNrJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdWkvdXRpbHMvc3BhY2UnO1xuaW1wb3J0IHsgQ09MT1JTLCBDT05GSUcgfSBmcm9tICcuLi91dGlscyc7XG5pbXBvcnQgeyBWaWV3IH0gZnJvbSAnLi4vdmlldyc7XG5pbXBvcnQgQ29sb3JJbmRpY2F0b3IgZnJvbSAnLi4vY29sb3ItaW5kaWNhdG9yJztcbmltcG9ydCBJbnB1dENvbnRyb2wgZnJvbSAnLi4vaW5wdXQtY29udHJvbCc7XG5pbXBvcnQgSXRlbSBmcm9tICcuLi9pdGVtLWdyb3VwL2l0ZW0nO1xuaW1wb3J0IHtcblx0Q29udGFpbmVyIGFzIElucHV0Q29udHJvbENvbnRhaW5lcixcblx0SW5wdXQsXG5cdEJhY2tkcm9wVUkgYXMgSW5wdXRCYWNrZHJvcFVJLFxufSBmcm9tICcuLi9pbnB1dC1jb250cm9sL3N0eWxlcy9pbnB1dC1jb250cm9sLXN0eWxlcyc7XG5cbmV4cG9ydCBjb25zdCBDb2xvckluZGljYXRvclN0eWxlZCA9IHN0eWxlZCggQ29sb3JJbmRpY2F0b3IgKWBcblx0JiYge1xuXHRcdGRpc3BsYXk6IGJsb2NrO1xuXHRcdGJvcmRlci1yYWRpdXM6IDUwJTtcblx0XHRib3JkZXI6IDA7XG5cdFx0aGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdFx0d2lkdGg6ICR7IHNwYWNlKCA2ICkgfTtcblx0XHRtYXJnaW4tbGVmdDogMDtcblx0XHRwYWRkaW5nOiAwO1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JOYW1lSW5wdXRDb250cm9sID0gc3R5bGVkKCBJbnB1dENvbnRyb2wgKWBcblx0JHsgSW5wdXRDb250cm9sQ29udGFpbmVyIH0ge1xuXHRcdGJhY2tncm91bmQ6ICR7IENPTE9SUy5ncmF5WyAxMDAgXSB9O1xuXHRcdGJvcmRlci1yYWRpdXM6IDJweDtcblx0XHQkeyBJbnB1dCB9JHsgSW5wdXQgfSR7IElucHV0IH0keyBJbnB1dCB9IHtcblx0XHRcdGhlaWdodDogJHsgc3BhY2UoIDggKSB9O1xuXHRcdH1cblx0XHQkeyBJbnB1dEJhY2tkcm9wVUkgfSR7IElucHV0QmFja2Ryb3BVSSB9JHsgSW5wdXRCYWNrZHJvcFVJIH0ge1xuXHRcdFx0Ym9yZGVyLWNvbG9yOiB0cmFuc3BhcmVudDtcblx0XHRcdGJveC1zaGFkb3c6IG5vbmU7XG5cdFx0fVxuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JJdGVtID0gc3R5bGVkKCBJdGVtIClgXG5cdHBhZGRpbmc6IDNweCAwIDNweCAkeyBzcGFjZSggMyApIH07XG5cdGhlaWdodDogY2FsYyggNDBweCAtICR7IENPTkZJRy5ib3JkZXJXaWR0aCB9ICk7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JOYW1lQ29udGFpbmVyID0gc3R5bGVkLnNwYW5gXG5cdGxpbmUtaGVpZ2h0OiAkeyBzcGFjZSggOCApIH07XG5cdG1hcmdpbi1sZWZ0OiAkeyBzcGFjZSggMiApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JIZWFkaW5nID0gc3R5bGVkKCBIZWFkaW5nIClgXG5cdHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG5cdGxpbmUtaGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdGZvbnQtd2VpZ2h0OiA1MDA7XG5cdCYmJiB7XG5cdFx0Zm9udC1zaXplOiAxMXB4O1xuXHRcdG1hcmdpbi1ib3R0b206IDA7XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBDb2xvckFjdGlvbnNDb250YWluZXIgPSBzdHlsZWQoIFZpZXcgKWBcblx0aGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdGRpc3BsYXk6IGZsZXg7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JIU3RhY2tIZWFkZXIgPSBzdHlsZWQoIEhTdGFjayApYFxuXHRtYXJnaW4tYm90dG9tOiAkeyBzcGFjZSggMiApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JFZGl0U3R5bGVzID0gc3R5bGVkKCBWaWV3IClgXG5cdCYmJiB7XG5cdFx0LmNvbXBvbmVudHMtYnV0dG9uLmhhcy1pY29uIHtcblx0XHRtaW4td2lkdGg6IDA7XG5cdFx0cGFkZGluZzogMDtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IERvbmVCdXR0b24gPSBzdHlsZWQoIEJ1dHRvbiApYFxuXHQmJiB7XG5cdFx0Y29sb3I6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgUmVtb3ZlQnV0dG9uID0gc3R5bGVkKCBCdXR0b24gKWBcblx0JiYge1xuXHRcdG1hcmdpbi10b3A6ICR7IHNwYWNlKCAxICkgfTtcblx0fVxuYDtcbiJdfQ== */"));
+exports.ColorHStackHeader = ColorHStackHeader;
+const ColorEditStyles = ( /*#__PURE__*/0, _base.default)(_view.View, process.env.NODE_ENV === "production" ? {
+  target: "e3doru12"
+} : {
+  target: "e3doru12",
+  label: "ColorEditStyles"
+})(process.env.NODE_ENV === "production" ? {
+  name: "u6wnko",
+  styles: "&&&{.components-button.has-icon{min-width:0;padding:0;}}"
+} : {
+  name: "u6wnko",
+  styles: "&&&{.components-button.has-icon{min-width:0;padding:0;}}",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY29sb3ItZWRpdC9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBOEU2QyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2NvbG9yLWVkaXQvc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgQnV0dG9uIGZyb20gJy4uL2J1dHRvbic7XG5pbXBvcnQgeyBIZWFkaW5nIH0gZnJvbSAnLi4vaGVhZGluZyc7XG5pbXBvcnQgeyBIU3RhY2sgfSBmcm9tICcuLi9oLXN0YWNrJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdWkvdXRpbHMvc3BhY2UnO1xuaW1wb3J0IHsgQ09MT1JTLCBDT05GSUcgfSBmcm9tICcuLi91dGlscyc7XG5pbXBvcnQgeyBWaWV3IH0gZnJvbSAnLi4vdmlldyc7XG5pbXBvcnQgQ29sb3JJbmRpY2F0b3IgZnJvbSAnLi4vY29sb3ItaW5kaWNhdG9yJztcbmltcG9ydCBJbnB1dENvbnRyb2wgZnJvbSAnLi4vaW5wdXQtY29udHJvbCc7XG5pbXBvcnQgSXRlbSBmcm9tICcuLi9pdGVtLWdyb3VwL2l0ZW0nO1xuaW1wb3J0IHtcblx0Q29udGFpbmVyIGFzIElucHV0Q29udHJvbENvbnRhaW5lcixcblx0SW5wdXQsXG5cdEJhY2tkcm9wVUkgYXMgSW5wdXRCYWNrZHJvcFVJLFxufSBmcm9tICcuLi9pbnB1dC1jb250cm9sL3N0eWxlcy9pbnB1dC1jb250cm9sLXN0eWxlcyc7XG5cbmV4cG9ydCBjb25zdCBDb2xvckluZGljYXRvclN0eWxlZCA9IHN0eWxlZCggQ29sb3JJbmRpY2F0b3IgKWBcblx0JiYge1xuXHRcdGRpc3BsYXk6IGJsb2NrO1xuXHRcdGJvcmRlci1yYWRpdXM6IDUwJTtcblx0XHRib3JkZXI6IDA7XG5cdFx0aGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdFx0d2lkdGg6ICR7IHNwYWNlKCA2ICkgfTtcblx0XHRtYXJnaW4tbGVmdDogMDtcblx0XHRwYWRkaW5nOiAwO1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JOYW1lSW5wdXRDb250cm9sID0gc3R5bGVkKCBJbnB1dENvbnRyb2wgKWBcblx0JHsgSW5wdXRDb250cm9sQ29udGFpbmVyIH0ge1xuXHRcdGJhY2tncm91bmQ6ICR7IENPTE9SUy5ncmF5WyAxMDAgXSB9O1xuXHRcdGJvcmRlci1yYWRpdXM6IDJweDtcblx0XHQkeyBJbnB1dCB9JHsgSW5wdXQgfSR7IElucHV0IH0keyBJbnB1dCB9IHtcblx0XHRcdGhlaWdodDogJHsgc3BhY2UoIDggKSB9O1xuXHRcdH1cblx0XHQkeyBJbnB1dEJhY2tkcm9wVUkgfSR7IElucHV0QmFja2Ryb3BVSSB9JHsgSW5wdXRCYWNrZHJvcFVJIH0ge1xuXHRcdFx0Ym9yZGVyLWNvbG9yOiB0cmFuc3BhcmVudDtcblx0XHRcdGJveC1zaGFkb3c6IG5vbmU7XG5cdFx0fVxuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JJdGVtID0gc3R5bGVkKCBJdGVtIClgXG5cdHBhZGRpbmc6IDNweCAwIDNweCAkeyBzcGFjZSggMyApIH07XG5cdGhlaWdodDogY2FsYyggNDBweCAtICR7IENPTkZJRy5ib3JkZXJXaWR0aCB9ICk7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JOYW1lQ29udGFpbmVyID0gc3R5bGVkLnNwYW5gXG5cdGxpbmUtaGVpZ2h0OiAkeyBzcGFjZSggOCApIH07XG5cdG1hcmdpbi1sZWZ0OiAkeyBzcGFjZSggMiApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JIZWFkaW5nID0gc3R5bGVkKCBIZWFkaW5nIClgXG5cdHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG5cdGxpbmUtaGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdGZvbnQtd2VpZ2h0OiA1MDA7XG5cdCYmJiB7XG5cdFx0Zm9udC1zaXplOiAxMXB4O1xuXHRcdG1hcmdpbi1ib3R0b206IDA7XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBDb2xvckFjdGlvbnNDb250YWluZXIgPSBzdHlsZWQoIFZpZXcgKWBcblx0aGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdGRpc3BsYXk6IGZsZXg7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JIU3RhY2tIZWFkZXIgPSBzdHlsZWQoIEhTdGFjayApYFxuXHRtYXJnaW4tYm90dG9tOiAkeyBzcGFjZSggMiApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JFZGl0U3R5bGVzID0gc3R5bGVkKCBWaWV3IClgXG5cdCYmJiB7XG5cdFx0LmNvbXBvbmVudHMtYnV0dG9uLmhhcy1pY29uIHtcblx0XHRtaW4td2lkdGg6IDA7XG5cdFx0cGFkZGluZzogMDtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IERvbmVCdXR0b24gPSBzdHlsZWQoIEJ1dHRvbiApYFxuXHQmJiB7XG5cdFx0Y29sb3I6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgUmVtb3ZlQnV0dG9uID0gc3R5bGVkKCBCdXR0b24gKWBcblx0JiYge1xuXHRcdG1hcmdpbi10b3A6ICR7IHNwYWNlKCAxICkgfTtcblx0fVxuYDtcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+exports.ColorEditStyles = ColorEditStyles;
+const DoneButton = ( /*#__PURE__*/0, _base.default)(_button.default, process.env.NODE_ENV === "production" ? {
+  target: "e3doru11"
+} : {
+  target: "e3doru11",
+  label: "DoneButton"
+})("&&{color:", _utils.COLORS.ui.theme, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY29sb3ItZWRpdC9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0YwQyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2NvbG9yLWVkaXQvc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgQnV0dG9uIGZyb20gJy4uL2J1dHRvbic7XG5pbXBvcnQgeyBIZWFkaW5nIH0gZnJvbSAnLi4vaGVhZGluZyc7XG5pbXBvcnQgeyBIU3RhY2sgfSBmcm9tICcuLi9oLXN0YWNrJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdWkvdXRpbHMvc3BhY2UnO1xuaW1wb3J0IHsgQ09MT1JTLCBDT05GSUcgfSBmcm9tICcuLi91dGlscyc7XG5pbXBvcnQgeyBWaWV3IH0gZnJvbSAnLi4vdmlldyc7XG5pbXBvcnQgQ29sb3JJbmRpY2F0b3IgZnJvbSAnLi4vY29sb3ItaW5kaWNhdG9yJztcbmltcG9ydCBJbnB1dENvbnRyb2wgZnJvbSAnLi4vaW5wdXQtY29udHJvbCc7XG5pbXBvcnQgSXRlbSBmcm9tICcuLi9pdGVtLWdyb3VwL2l0ZW0nO1xuaW1wb3J0IHtcblx0Q29udGFpbmVyIGFzIElucHV0Q29udHJvbENvbnRhaW5lcixcblx0SW5wdXQsXG5cdEJhY2tkcm9wVUkgYXMgSW5wdXRCYWNrZHJvcFVJLFxufSBmcm9tICcuLi9pbnB1dC1jb250cm9sL3N0eWxlcy9pbnB1dC1jb250cm9sLXN0eWxlcyc7XG5cbmV4cG9ydCBjb25zdCBDb2xvckluZGljYXRvclN0eWxlZCA9IHN0eWxlZCggQ29sb3JJbmRpY2F0b3IgKWBcblx0JiYge1xuXHRcdGRpc3BsYXk6IGJsb2NrO1xuXHRcdGJvcmRlci1yYWRpdXM6IDUwJTtcblx0XHRib3JkZXI6IDA7XG5cdFx0aGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdFx0d2lkdGg6ICR7IHNwYWNlKCA2ICkgfTtcblx0XHRtYXJnaW4tbGVmdDogMDtcblx0XHRwYWRkaW5nOiAwO1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JOYW1lSW5wdXRDb250cm9sID0gc3R5bGVkKCBJbnB1dENvbnRyb2wgKWBcblx0JHsgSW5wdXRDb250cm9sQ29udGFpbmVyIH0ge1xuXHRcdGJhY2tncm91bmQ6ICR7IENPTE9SUy5ncmF5WyAxMDAgXSB9O1xuXHRcdGJvcmRlci1yYWRpdXM6IDJweDtcblx0XHQkeyBJbnB1dCB9JHsgSW5wdXQgfSR7IElucHV0IH0keyBJbnB1dCB9IHtcblx0XHRcdGhlaWdodDogJHsgc3BhY2UoIDggKSB9O1xuXHRcdH1cblx0XHQkeyBJbnB1dEJhY2tkcm9wVUkgfSR7IElucHV0QmFja2Ryb3BVSSB9JHsgSW5wdXRCYWNrZHJvcFVJIH0ge1xuXHRcdFx0Ym9yZGVyLWNvbG9yOiB0cmFuc3BhcmVudDtcblx0XHRcdGJveC1zaGFkb3c6IG5vbmU7XG5cdFx0fVxuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JJdGVtID0gc3R5bGVkKCBJdGVtIClgXG5cdHBhZGRpbmc6IDNweCAwIDNweCAkeyBzcGFjZSggMyApIH07XG5cdGhlaWdodDogY2FsYyggNDBweCAtICR7IENPTkZJRy5ib3JkZXJXaWR0aCB9ICk7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JOYW1lQ29udGFpbmVyID0gc3R5bGVkLnNwYW5gXG5cdGxpbmUtaGVpZ2h0OiAkeyBzcGFjZSggOCApIH07XG5cdG1hcmdpbi1sZWZ0OiAkeyBzcGFjZSggMiApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JIZWFkaW5nID0gc3R5bGVkKCBIZWFkaW5nIClgXG5cdHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG5cdGxpbmUtaGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdGZvbnQtd2VpZ2h0OiA1MDA7XG5cdCYmJiB7XG5cdFx0Zm9udC1zaXplOiAxMXB4O1xuXHRcdG1hcmdpbi1ib3R0b206IDA7XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBDb2xvckFjdGlvbnNDb250YWluZXIgPSBzdHlsZWQoIFZpZXcgKWBcblx0aGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdGRpc3BsYXk6IGZsZXg7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JIU3RhY2tIZWFkZXIgPSBzdHlsZWQoIEhTdGFjayApYFxuXHRtYXJnaW4tYm90dG9tOiAkeyBzcGFjZSggMiApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JFZGl0U3R5bGVzID0gc3R5bGVkKCBWaWV3IClgXG5cdCYmJiB7XG5cdFx0LmNvbXBvbmVudHMtYnV0dG9uLmhhcy1pY29uIHtcblx0XHRtaW4td2lkdGg6IDA7XG5cdFx0cGFkZGluZzogMDtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IERvbmVCdXR0b24gPSBzdHlsZWQoIEJ1dHRvbiApYFxuXHQmJiB7XG5cdFx0Y29sb3I6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgUmVtb3ZlQnV0dG9uID0gc3R5bGVkKCBCdXR0b24gKWBcblx0JiYge1xuXHRcdG1hcmdpbi10b3A6ICR7IHNwYWNlKCAxICkgfTtcblx0fVxuYDtcbiJdfQ== */"));
+exports.DoneButton = DoneButton;
+const RemoveButton = ( /*#__PURE__*/0, _base.default)(_button.default, process.env.NODE_ENV === "production" ? {
+  target: "e3doru10"
+} : {
+  target: "e3doru10",
+  label: "RemoveButton"
+})("&&{margin-top:", (0, _space.space)(1), ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY29sb3ItZWRpdC9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNEY0QyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2NvbG9yLWVkaXQvc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgQnV0dG9uIGZyb20gJy4uL2J1dHRvbic7XG5pbXBvcnQgeyBIZWFkaW5nIH0gZnJvbSAnLi4vaGVhZGluZyc7XG5pbXBvcnQgeyBIU3RhY2sgfSBmcm9tICcuLi9oLXN0YWNrJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdWkvdXRpbHMvc3BhY2UnO1xuaW1wb3J0IHsgQ09MT1JTLCBDT05GSUcgfSBmcm9tICcuLi91dGlscyc7XG5pbXBvcnQgeyBWaWV3IH0gZnJvbSAnLi4vdmlldyc7XG5pbXBvcnQgQ29sb3JJbmRpY2F0b3IgZnJvbSAnLi4vY29sb3ItaW5kaWNhdG9yJztcbmltcG9ydCBJbnB1dENvbnRyb2wgZnJvbSAnLi4vaW5wdXQtY29udHJvbCc7XG5pbXBvcnQgSXRlbSBmcm9tICcuLi9pdGVtLWdyb3VwL2l0ZW0nO1xuaW1wb3J0IHtcblx0Q29udGFpbmVyIGFzIElucHV0Q29udHJvbENvbnRhaW5lcixcblx0SW5wdXQsXG5cdEJhY2tkcm9wVUkgYXMgSW5wdXRCYWNrZHJvcFVJLFxufSBmcm9tICcuLi9pbnB1dC1jb250cm9sL3N0eWxlcy9pbnB1dC1jb250cm9sLXN0eWxlcyc7XG5cbmV4cG9ydCBjb25zdCBDb2xvckluZGljYXRvclN0eWxlZCA9IHN0eWxlZCggQ29sb3JJbmRpY2F0b3IgKWBcblx0JiYge1xuXHRcdGRpc3BsYXk6IGJsb2NrO1xuXHRcdGJvcmRlci1yYWRpdXM6IDUwJTtcblx0XHRib3JkZXI6IDA7XG5cdFx0aGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdFx0d2lkdGg6ICR7IHNwYWNlKCA2ICkgfTtcblx0XHRtYXJnaW4tbGVmdDogMDtcblx0XHRwYWRkaW5nOiAwO1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JOYW1lSW5wdXRDb250cm9sID0gc3R5bGVkKCBJbnB1dENvbnRyb2wgKWBcblx0JHsgSW5wdXRDb250cm9sQ29udGFpbmVyIH0ge1xuXHRcdGJhY2tncm91bmQ6ICR7IENPTE9SUy5ncmF5WyAxMDAgXSB9O1xuXHRcdGJvcmRlci1yYWRpdXM6IDJweDtcblx0XHQkeyBJbnB1dCB9JHsgSW5wdXQgfSR7IElucHV0IH0keyBJbnB1dCB9IHtcblx0XHRcdGhlaWdodDogJHsgc3BhY2UoIDggKSB9O1xuXHRcdH1cblx0XHQkeyBJbnB1dEJhY2tkcm9wVUkgfSR7IElucHV0QmFja2Ryb3BVSSB9JHsgSW5wdXRCYWNrZHJvcFVJIH0ge1xuXHRcdFx0Ym9yZGVyLWNvbG9yOiB0cmFuc3BhcmVudDtcblx0XHRcdGJveC1zaGFkb3c6IG5vbmU7XG5cdFx0fVxuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JJdGVtID0gc3R5bGVkKCBJdGVtIClgXG5cdHBhZGRpbmc6IDNweCAwIDNweCAkeyBzcGFjZSggMyApIH07XG5cdGhlaWdodDogY2FsYyggNDBweCAtICR7IENPTkZJRy5ib3JkZXJXaWR0aCB9ICk7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JOYW1lQ29udGFpbmVyID0gc3R5bGVkLnNwYW5gXG5cdGxpbmUtaGVpZ2h0OiAkeyBzcGFjZSggOCApIH07XG5cdG1hcmdpbi1sZWZ0OiAkeyBzcGFjZSggMiApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JIZWFkaW5nID0gc3R5bGVkKCBIZWFkaW5nIClgXG5cdHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG5cdGxpbmUtaGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdGZvbnQtd2VpZ2h0OiA1MDA7XG5cdCYmJiB7XG5cdFx0Zm9udC1zaXplOiAxMXB4O1xuXHRcdG1hcmdpbi1ib3R0b206IDA7XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBDb2xvckFjdGlvbnNDb250YWluZXIgPSBzdHlsZWQoIFZpZXcgKWBcblx0aGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdGRpc3BsYXk6IGZsZXg7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JIU3RhY2tIZWFkZXIgPSBzdHlsZWQoIEhTdGFjayApYFxuXHRtYXJnaW4tYm90dG9tOiAkeyBzcGFjZSggMiApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JFZGl0U3R5bGVzID0gc3R5bGVkKCBWaWV3IClgXG5cdCYmJiB7XG5cdFx0LmNvbXBvbmVudHMtYnV0dG9uLmhhcy1pY29uIHtcblx0XHRtaW4td2lkdGg6IDA7XG5cdFx0cGFkZGluZzogMDtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IERvbmVCdXR0b24gPSBzdHlsZWQoIEJ1dHRvbiApYFxuXHQmJiB7XG5cdFx0Y29sb3I6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgUmVtb3ZlQnV0dG9uID0gc3R5bGVkKCBCdXR0b24gKWBcblx0JiYge1xuXHRcdG1hcmdpbi10b3A6ICR7IHNwYWNlKCAxICkgfTtcblx0fVxuYDtcbiJdfQ== */"));
+exports.RemoveButton = RemoveButton;
+//# sourceMappingURL=styles.js.map

package/build/color-edit/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/color-edit/styles.js"],"names":["ColorIndicatorStyled","ColorIndicator","ColorNameInputControl","InputControl","InputControlContainer","COLORS","gray","Input","InputBackdropUI","ColorItem","Item","CONFIG","borderWidth","ColorNameContainer","ColorHeading","Heading","ColorActionsContainer","View","ColorHStackHeader","HStack","ColorEditStyles","DoneButton","Button","ui","theme","RemoveButton"],"mappings":";;;;;;;;;;;AAQA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAMO,MAAMA,oBAAoB,GAAG,iCAAQC,uBAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,wDAKpB,kBAAO,CAAP,CALoB,aAMrB,kBAAO,CAAP,CANqB,00GAA1B;;AAYA,MAAMC,qBAAqB,GAAG,iCAAQC,qBAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,CAC9BC,6BAD8B,kBAEjBC,cAAOC,IAAP,CAAa,GAAb,CAFiB,yBAI7BC,yBAJ6B,EAInBA,yBAJmB,EAITA,yBAJS,EAICA,yBAJD,cAKpB,kBAAO,CAAP,CALoB,QAO7BC,8BAP6B,EAOTA,8BAPS,EAOWA,8BAPX,41GAA3B;;AAcA,MAAMC,SAAS,GAAG,iCAAQC,aAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,uBACC,kBAAO,CAAP,CADD,2BAEGC,cAAOC,WAFV,mzGAAf;;AAKA,MAAMC,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,mBACd,kBAAO,CAAP,CADc,mBAEd,kBAAO,CAAP,CAFc,izGAAxB;;AAKA,MAAMC,YAAY,GAAG,iCAAQC,gBAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,0CAER,kBAAO,CAAP,CAFQ,q2GAAlB;;AAUA,MAAMC,qBAAqB,GAAG,iCAAQC,UAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,YACtB,kBAAO,CAAP,CADsB,8zGAA3B;;AAKA,MAAMC,iBAAiB,GAAG,iCAAQC,cAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,mBACX,kBAAO,CAAP,CADW,izGAAvB;;AAIA,MAAMC,eAAe,GAAG,iCAAQH,UAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAArB;;AAQA,MAAMI,UAAU,GAAG,iCAAQC,eAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,cAEXjB,cAAOkB,EAAP,CAAUC,KAFC,kzGAAhB;;AAMA,MAAMC,YAAY,GAAG,iCAAQH,eAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,mBAER,kBAAO,CAAP,CAFQ,kzGAAlB","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { Heading } from '../heading';\nimport { HStack } from '../h-stack';\nimport { space } from '../ui/utils/space';\nimport { COLORS, CONFIG } from '../utils';\nimport { View } from '../view';\nimport ColorIndicator from '../color-indicator';\nimport InputControl from '../input-control';\nimport Item from '../item-group/item';\nimport {\n\tContainer as InputControlContainer,\n\tInput,\n\tBackdropUI as InputBackdropUI,\n} from '../input-control/styles/input-control-styles';\n\nexport const ColorIndicatorStyled = styled( ColorIndicator )`\n\t&& {\n\t\tdisplay: block;\n\t\tborder-radius: 50%;\n\t\tborder: 0;\n\t\theight: ${ space( 6 ) };\n\t\twidth: ${ space( 6 ) };\n\t\tmargin-left: 0;\n\t\tpadding: 0;\n\t}\n`;\n\nexport const ColorNameInputControl = styled( InputControl )`\n\t${ InputControlContainer } {\n\t\tbackground: ${ COLORS.gray[ 100 ] };\n\t\tborder-radius: 2px;\n\t\t${ Input }${ Input }${ Input }${ Input } {\n\t\t\theight: ${ space( 8 ) };\n\t\t}\n\t\t${ InputBackdropUI }${ InputBackdropUI }${ InputBackdropUI } {\n\t\t\tborder-color: transparent;\n\t\t\tbox-shadow: none;\n\t\t}\n\t}\n`;\n\nexport const ColorItem = styled( Item )`\n\tpadding: 3px 0 3px ${ space( 3 ) };\n\theight: calc( 40px - ${ CONFIG.borderWidth } );\n`;\n\nexport const ColorNameContainer = styled.span`\n\tline-height: ${ space( 8 ) };\n\tmargin-left: ${ space( 2 ) };\n`;\n\nexport const ColorHeading = styled( Heading )`\n\ttext-transform: uppercase;\n\tline-height: ${ space( 6 ) };\n\tfont-weight: 500;\n\t&&& {\n\t\tfont-size: 11px;\n\t\tmargin-bottom: 0;\n\t}\n`;\n\nexport const ColorActionsContainer = styled( View )`\n\theight: ${ space( 6 ) };\n\tdisplay: flex;\n`;\n\nexport const ColorHStackHeader = styled( HStack )`\n\tmargin-bottom: ${ space( 2 ) };\n`;\n\nexport const ColorEditStyles = styled( View )`\n\t&&& {\n\t\t.components-button.has-icon {\n\t\tmin-width: 0;\n\t\tpadding: 0;\n\t}\n`;\n\nexport const DoneButton = styled( Button )`\n\t&& {\n\t\tcolor: ${ COLORS.ui.theme };\n\t}\n`;\n\nexport const RemoveButton = styled( Button )`\n\t&& {\n\t\tmargin-top: ${ space( 1 ) };\n\t}\n`;\n"]}

package/build/color-indicator/index.js

@@ -16,16 +16,19 @@ var _classnames = _interopRequireDefault(require("classnames"));
 /**
  * External dependencies
  */
-const ColorIndicator = ({
-  className,
-  colorValue,
-  ...props
-}) => (0, _element.createElement)("span", (0, _extends2.default)({
-  className: (0, _classnames.default)('component-color-indicator', className),
-  style: {
-    background: colorValue
-  }
-}, props));
+const ColorIndicator = _ref => {
+  let {
+    className,
+    colorValue,
+    ...props
+  } = _ref;
+  return (0, _element.createElement)("span", (0, _extends2.default)({
+    className: (0, _classnames.default)('component-color-indicator', className),
+    style: {
+      background: colorValue
+    }
+  }, props));
+};
 
 var _default = ColorIndicator;
 exports.default = _default;

package/build/color-indicator/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-indicator/index.js"],"names":["ColorIndicator","className","colorValue","props","background"],"mappings":";;;;;;;;;;;;;AAGA;;AAHA;AACA;AACA;AAGA,MAAMA,cAAc,GAAG,CAAE;AAAEC,EAAAA,SAAF;AAAaC,EAAAA,UAAb;AAAyB,KAAGC;AAA5B,CAAF,KACtB;AACC,EAAA,SAAS,EAAG,yBAAY,2BAAZ,EAAyCF,SAAzC,CADb;AAEC,EAAA,KAAK,EAAG;AAAEG,IAAAA,UAAU,EAAEF;AAAd;AAFT,GAGMC,KAHN,EADD;;eAQeH,c","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\nconst ColorIndicator = ( { className, colorValue, ...props } ) => (\n\t<span\n\t\tclassName={ classnames( 'component-color-indicator', className ) }\n\t\tstyle={ { background: colorValue } }\n\t\t{ ...props }\n\t/>\n);\n\nexport default ColorIndicator;\n"]}
+{"version":3,"sources":["@wordpress/components/src/color-indicator/index.js"],"names":["ColorIndicator","className","colorValue","props","background"],"mappings":";;;;;;;;;;;;;AAGA;;AAHA;AACA;AACA;AAGA,MAAMA,cAAc,GAAG;AAAA,MAAE;AAAEC,IAAAA,SAAF;AAAaC,IAAAA,UAAb;AAAyB,OAAGC;AAA5B,GAAF;AAAA,SACtB;AACC,IAAA,SAAS,EAAG,yBAAY,2BAAZ,EAAyCF,SAAzC,CADb;AAEC,IAAA,KAAK,EAAG;AAAEG,MAAAA,UAAU,EAAEF;AAAd;AAFT,KAGMC,KAHN,EADsB;AAAA,CAAvB;;eAQeH,c","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\nconst ColorIndicator = ( { className, colorValue, ...props } ) => (\n\t<span\n\t\tclassName={ classnames( 'component-color-indicator', className ) }\n\t\tstyle={ { background: colorValue } }\n\t\t{ ...props }\n\t/>\n);\n\nexport default ColorIndicator;\n"]}

package/build/color-indicator/index.native.js

@@ -32,9 +32,10 @@ var _utils = require("../mobile/color-settings/utils");
 /**
  * Internal dependencies
  */
-function SelectedIcon({
-  opacity
-}) {
+function SelectedIcon(_ref) {
+  let {
+    opacity
+  } = _ref;
   return (0, _element.createElement)(_reactNative.Animated.View, {
     style: [_style.default.selected, {
       opacity
@@ -48,13 +49,14 @@ function SelectedIcon({
   }));
 }
 
-function ColorIndicator({
-  color,
-  isSelected,
-  withCustomPicker,
-  style,
-  opacity
-}) {
+function ColorIndicator(_ref2) {
+  let {
+    color,
+    isSelected,
+    withCustomPicker,
+    style,
+    opacity
+  } = _ref2;
   const {
     isGradient
   } = _utils.colorsUtils;

package/build/color-indicator/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-indicator/index.native.js"],"names":["SelectedIcon","opacity","styles","selected","outline","selectedOutline","check","icon","ColorIndicator","color","isSelected","withCustomPicker","style","isGradient","colorsUtils","outlineStyle","outlineDark","circleOption","map","gradientValue","absolute","backgroundColor"],"mappings":";;;;;;;;;;;AAGA;;AAIA;;AACA;;AACA;;AAIA;;AACA;;AAdA;AACA;AACA;;AAEA;AACA;AACA;;AAIA;AACA;AACA;AAIA,SAASA,YAAT,CAAuB;AAAEC,EAAAA;AAAF,CAAvB,EAAqC;AACpC,SACC,4BAAC,qBAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAG,CAAEC,eAAOC,QAAT,EAAmB;AAAEF,MAAAA;AAAF,KAAnB;AAAvB,KACC,4BAAC,iBAAD;AAAM,IAAA,KAAK,EAAG,CAAEC,eAAOE,OAAT,EAAkBF,eAAOG,eAAzB;AAAd,IADD,EAEC,4BAAC,WAAD;AAAM,IAAA,IAAI,EAAGC,YAAb;AAAqB,IAAA,KAAK,EAAGJ,eAAOK,IAApC;AAA2C,IAAA,IAAI,EAAG;AAAlD,IAFD,CADD;AAMA;;AAED,SAASC,cAAT,CAAyB;AACxBC,EAAAA,KADwB;AAExBC,EAAAA,UAFwB;AAGxBC,EAAAA,gBAHwB;AAIxBC,EAAAA,KAJwB;AAKxBX,EAAAA;AALwB,CAAzB,EAMI;AACH,QAAM;AAAEY,IAAAA;AAAF,MAAiBC,kBAAvB;AAEA,QAAMC,YAAY,GAAG,2CACpBb,eAAOE,OADa,EAEpBF,eAAOc,WAFa,CAArB;;AAKA,MAAKH,UAAU,CAAEJ,KAAF,CAAf,EAA2B;AAC1B,WACC,4BAAC,oBAAD;AACC,MAAA,KAAK,EAAG,CAAEP,eAAOe,YAAT,EAAuBL,KAAvB,CADT;AAEC,MAAA,aAAa,EAAGH;AAFjB,OAIC,4BAAC,iBAAD;AAAM,MAAA,KAAK,EAAGM;AAAd,MAJD,EAKGL,UAAU,IAAI,4BAAC,YAAD;AAAc,MAAA,OAAO,EAAGT;AAAxB,MALjB,CADD;AASA,GAVD,MAUO,IAAKU,gBAAL,EAAwB;AAC9B,WACC,4BAAC,iBAAD;AAAM,MAAA,KAAK,EAAG,CAAET,eAAOe,YAAT,EAAuBL,KAAvB;AAAd,OACC,4BAAC,iBAAD;AAAM,MAAA,KAAK,EAAGG;AAAd,MADD,EAEGN,KAAK,CAACS,GAAN,CAAaC,aAAF,IAAqB;AACjC,aACC,4BAAC,oBAAD;AACC,QAAA,aAAa,EAAGA,aADjB;AAEC,QAAA,KAAK,EAAG,CACPjB,eAAOe,YADA,EAEPf,eAAOkB,QAFA,EAGPR,KAHO,CAFT;AAOC,QAAA,GAAG,EAAGO;AAPP,QADD;AAWA,KAZC,CAFH,EAeGT,UAAU,IAAI,4BAAC,YAAD,OAfjB,CADD;AAmBA;;AACD,SACC,4BAAC,iBAAD;AACC,IAAA,KAAK,EAAG,CAAER,eAAOe,YAAT,EAAuBL,KAAvB,EAA8B;AAAES,MAAAA,eAAe,EAAEZ;AAAnB,KAA9B;AADT,KAGC,4BAAC,iBAAD;AAAM,IAAA,KAAK,EAAGM;AAAd,IAHD,EAIGL,UAAU,IAAI,4BAAC,YAAD;AAAc,IAAA,OAAO,EAAGT;AAAxB,IAJjB,CADD;AAQA;;eACcO,c","sourcesContent":["/**\n * External dependencies\n */\nimport { View, Animated } from 'react-native';\n/**\n * WordPress dependencies\n */\nimport { Icon, check } from '@wordpress/icons';\nimport { Gradient } from '@wordpress/components';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\nimport { colorsUtils } from '../mobile/color-settings/utils';\n\nfunction SelectedIcon( { opacity } ) {\n\treturn (\n\t\t<Animated.View style={ [ styles.selected, { opacity } ] }>\n\t\t\t<View style={ [ styles.outline, styles.selectedOutline ] } />\n\t\t\t<Icon icon={ check } style={ styles.icon } size={ 24 } />\n\t\t</Animated.View>\n\t);\n}\n\nfunction ColorIndicator( {\n\tcolor,\n\tisSelected,\n\twithCustomPicker,\n\tstyle,\n\topacity,\n} ) {\n\tconst { isGradient } = colorsUtils;\n\n\tconst outlineStyle = usePreferredColorSchemeStyle(\n\t\tstyles.outline,\n\t\tstyles.outlineDark\n\t);\n\n\tif ( isGradient( color ) ) {\n\t\treturn (\n\t\t\t<Gradient\n\t\t\t\tstyle={ [ styles.circleOption, style ] }\n\t\t\t\tgradientValue={ color }\n\t\t\t>\n\t\t\t\t<View style={ outlineStyle } />\n\t\t\t\t{ isSelected && <SelectedIcon opacity={ opacity } /> }\n\t\t\t</Gradient>\n\t\t);\n\t} else if ( withCustomPicker ) {\n\t\treturn (\n\t\t\t<View style={ [ styles.circleOption, style ] }>\n\t\t\t\t<View style={ outlineStyle } />\n\t\t\t\t{ color.map( ( gradientValue ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Gradient\n\t\t\t\t\t\t\tgradientValue={ gradientValue }\n\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\tstyles.circleOption,\n\t\t\t\t\t\t\t\tstyles.absolute,\n\t\t\t\t\t\t\t\tstyle,\n\t\t\t\t\t\t\t] }\n\t\t\t\t\t\t\tkey={ gradientValue }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t\t{ isSelected && <SelectedIcon /> }\n\t\t\t</View>\n\t\t);\n\t}\n\treturn (\n\t\t<View\n\t\t\tstyle={ [ styles.circleOption, style, { backgroundColor: color } ] }\n\t\t>\n\t\t\t<View style={ outlineStyle } />\n\t\t\t{ isSelected && <SelectedIcon opacity={ opacity } /> }\n\t\t</View>\n\t);\n}\nexport default ColorIndicator;\n"]}
+{"version":3,"sources":["@wordpress/components/src/color-indicator/index.native.js"],"names":["SelectedIcon","opacity","styles","selected","outline","selectedOutline","check","icon","ColorIndicator","color","isSelected","withCustomPicker","style","isGradient","colorsUtils","outlineStyle","outlineDark","circleOption","map","gradientValue","absolute","backgroundColor"],"mappings":";;;;;;;;;;;AAGA;;AAIA;;AACA;;AACA;;AAIA;;AACA;;AAdA;AACA;AACA;;AAEA;AACA;AACA;;AAIA;AACA;AACA;AAIA,SAASA,YAAT,OAAqC;AAAA,MAAd;AAAEC,IAAAA;AAAF,GAAc;AACpC,SACC,4BAAC,qBAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAG,CAAEC,eAAOC,QAAT,EAAmB;AAAEF,MAAAA;AAAF,KAAnB;AAAvB,KACC,4BAAC,iBAAD;AAAM,IAAA,KAAK,EAAG,CAAEC,eAAOE,OAAT,EAAkBF,eAAOG,eAAzB;AAAd,IADD,EAEC,4BAAC,WAAD;AAAM,IAAA,IAAI,EAAGC,YAAb;AAAqB,IAAA,KAAK,EAAGJ,eAAOK,IAApC;AAA2C,IAAA,IAAI,EAAG;AAAlD,IAFD,CADD;AAMA;;AAED,SAASC,cAAT,QAMI;AAAA,MANqB;AACxBC,IAAAA,KADwB;AAExBC,IAAAA,UAFwB;AAGxBC,IAAAA,gBAHwB;AAIxBC,IAAAA,KAJwB;AAKxBX,IAAAA;AALwB,GAMrB;AACH,QAAM;AAAEY,IAAAA;AAAF,MAAiBC,kBAAvB;AAEA,QAAMC,YAAY,GAAG,2CACpBb,eAAOE,OADa,EAEpBF,eAAOc,WAFa,CAArB;;AAKA,MAAKH,UAAU,CAAEJ,KAAF,CAAf,EAA2B;AAC1B,WACC,4BAAC,oBAAD;AACC,MAAA,KAAK,EAAG,CAAEP,eAAOe,YAAT,EAAuBL,KAAvB,CADT;AAEC,MAAA,aAAa,EAAGH;AAFjB,OAIC,4BAAC,iBAAD;AAAM,MAAA,KAAK,EAAGM;AAAd,MAJD,EAKGL,UAAU,IAAI,4BAAC,YAAD;AAAc,MAAA,OAAO,EAAGT;AAAxB,MALjB,CADD;AASA,GAVD,MAUO,IAAKU,gBAAL,EAAwB;AAC9B,WACC,4BAAC,iBAAD;AAAM,MAAA,KAAK,EAAG,CAAET,eAAOe,YAAT,EAAuBL,KAAvB;AAAd,OACC,4BAAC,iBAAD;AAAM,MAAA,KAAK,EAAGG;AAAd,MADD,EAEGN,KAAK,CAACS,GAAN,CAAaC,aAAF,IAAqB;AACjC,aACC,4BAAC,oBAAD;AACC,QAAA,aAAa,EAAGA,aADjB;AAEC,QAAA,KAAK,EAAG,CACPjB,eAAOe,YADA,EAEPf,eAAOkB,QAFA,EAGPR,KAHO,CAFT;AAOC,QAAA,GAAG,EAAGO;AAPP,QADD;AAWA,KAZC,CAFH,EAeGT,UAAU,IAAI,4BAAC,YAAD,OAfjB,CADD;AAmBA;;AACD,SACC,4BAAC,iBAAD;AACC,IAAA,KAAK,EAAG,CAAER,eAAOe,YAAT,EAAuBL,KAAvB,EAA8B;AAAES,MAAAA,eAAe,EAAEZ;AAAnB,KAA9B;AADT,KAGC,4BAAC,iBAAD;AAAM,IAAA,KAAK,EAAGM;AAAd,IAHD,EAIGL,UAAU,IAAI,4BAAC,YAAD;AAAc,IAAA,OAAO,EAAGT;AAAxB,IAJjB,CADD;AAQA;;eACcO,c","sourcesContent":["/**\n * External dependencies\n */\nimport { View, Animated } from 'react-native';\n/**\n * WordPress dependencies\n */\nimport { Icon, check } from '@wordpress/icons';\nimport { Gradient } from '@wordpress/components';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\nimport { colorsUtils } from '../mobile/color-settings/utils';\n\nfunction SelectedIcon( { opacity } ) {\n\treturn (\n\t\t<Animated.View style={ [ styles.selected, { opacity } ] }>\n\t\t\t<View style={ [ styles.outline, styles.selectedOutline ] } />\n\t\t\t<Icon icon={ check } style={ styles.icon } size={ 24 } />\n\t\t</Animated.View>\n\t);\n}\n\nfunction ColorIndicator( {\n\tcolor,\n\tisSelected,\n\twithCustomPicker,\n\tstyle,\n\topacity,\n} ) {\n\tconst { isGradient } = colorsUtils;\n\n\tconst outlineStyle = usePreferredColorSchemeStyle(\n\t\tstyles.outline,\n\t\tstyles.outlineDark\n\t);\n\n\tif ( isGradient( color ) ) {\n\t\treturn (\n\t\t\t<Gradient\n\t\t\t\tstyle={ [ styles.circleOption, style ] }\n\t\t\t\tgradientValue={ color }\n\t\t\t>\n\t\t\t\t<View style={ outlineStyle } />\n\t\t\t\t{ isSelected && <SelectedIcon opacity={ opacity } /> }\n\t\t\t</Gradient>\n\t\t);\n\t} else if ( withCustomPicker ) {\n\t\treturn (\n\t\t\t<View style={ [ styles.circleOption, style ] }>\n\t\t\t\t<View style={ outlineStyle } />\n\t\t\t\t{ color.map( ( gradientValue ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Gradient\n\t\t\t\t\t\t\tgradientValue={ gradientValue }\n\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\tstyles.circleOption,\n\t\t\t\t\t\t\t\tstyles.absolute,\n\t\t\t\t\t\t\t\tstyle,\n\t\t\t\t\t\t\t] }\n\t\t\t\t\t\t\tkey={ gradientValue }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t\t{ isSelected && <SelectedIcon /> }\n\t\t\t</View>\n\t\t);\n\t}\n\treturn (\n\t\t<View\n\t\t\tstyle={ [ styles.circleOption, style, { backgroundColor: color } ] }\n\t\t>\n\t\t\t<View style={ outlineStyle } />\n\t\t\t{ isSelected && <SelectedIcon opacity={ opacity } /> }\n\t\t</View>\n\t);\n}\nexport default ColorIndicator;\n"]}

package/build/color-list-picker/index.js

@@ -22,13 +22,15 @@ var _swatch = _interopRequireDefault(require("../swatch"));
 /**
  * Internal dependencies
  */
-function ColorOption({
-  label,
-  value,
-  colors,
-  disableCustomColors,
-  onChange
-}) {
+function ColorOption(_ref) {
+  let {
+    label,
+    value,
+    colors,
+    disableCustomColors,
+    enableAlpha,
+    onChange
+  } = _ref;
   const [isOpen, setIsOpen] = (0, _element.useState)(false);
   return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_button.default, {
     className: "components-color-list-picker__swatch-button",
@@ -37,21 +39,25 @@ function ColorOption({
     }),
     onClick: () => setIsOpen(prev => !prev)
   }, label), isOpen && (0, _element.createElement)(_colorPalette.default, {
+    className: "components-color-list-picker__color-picker",
     colors: colors,
     value: value,
     clearable: false,
     onChange: onChange,
-    disableCustomColors: disableCustomColors
+    disableCustomColors: disableCustomColors,
+    enableAlpha: enableAlpha
   }));
 }
 
-function ColorListPicker({
-  colors,
-  labels,
-  value = [],
-  disableCustomColors,
-  onChange
-}) {
+function ColorListPicker(_ref2) {
+  let {
+    colors,
+    labels,
+    value = [],
+    disableCustomColors,
+    enableAlpha,
+    onChange
+  } = _ref2;
   return (0, _element.createElement)("div", {
     className: "components-color-list-picker"
   }, labels.map((label, index) => (0, _element.createElement)(ColorOption, {
@@ -60,6 +66,7 @@ function ColorListPicker({
     value: value[index],
     colors: colors,
     disableCustomColors: disableCustomColors,
+    enableAlpha: enableAlpha,
     onChange: newColor => {
       const newColors = value.slice();
       newColors[index] = newColor;

package/build/color-list-picker/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-list-picker/index.js"],"names":["ColorOption","label","value","colors","disableCustomColors","onChange","isOpen","setIsOpen","prev","ColorListPicker","labels","map","index","newColor","newColors","slice"],"mappings":";;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAKA,SAASA,WAAT,CAAsB;AACrBC,EAAAA,KADqB;AAErBC,EAAAA,KAFqB;AAGrBC,EAAAA,MAHqB;AAIrBC,EAAAA,mBAJqB;AAKrBC,EAAAA;AALqB,CAAtB,EAMI;AACH,QAAM,CAAEC,MAAF,EAAUC,SAAV,IAAwB,uBAAU,KAAV,CAA9B;AACA,SACC,qDACC,4BAAC,eAAD;AACC,IAAA,SAAS,EAAC,6CADX;AAEC,IAAA,IAAI,EAAG,4BAAC,eAAD;AAAQ,MAAA,IAAI,EAAGL;AAAf,MAFR;AAGC,IAAA,OAAO,EAAG,MAAMK,SAAS,CAAIC,IAAF,IAAY,CAAEA,IAAhB;AAH1B,KAKGP,KALH,CADD,EAQGK,MAAM,IACP,4BAAC,qBAAD;AACC,IAAA,MAAM,EAAGH,MADV;AAEC,IAAA,KAAK,EAAGD,KAFT;AAGC,IAAA,SAAS,EAAG,KAHb;AAIC,IAAA,QAAQ,EAAGG,QAJZ;AAKC,IAAA,mBAAmB,EAAGD;AALvB,IATF,CADD;AAoBA;;AAED,SAASK,eAAT,CAA0B;AACzBN,EAAAA,MADyB;AAEzBO,EAAAA,MAFyB;AAGzBR,EAAAA,KAAK,GAAG,EAHiB;AAIzBE,EAAAA,mBAJyB;AAKzBC,EAAAA;AALyB,CAA1B,EAMI;AACH,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGK,MAAM,CAACC,GAAP,CAAY,CAAEV,KAAF,EAASW,KAAT,KACb,4BAAC,WAAD;AACC,IAAA,GAAG,EAAGA,KADP;AAEC,IAAA,KAAK,EAAGX,KAFT;AAGC,IAAA,KAAK,EAAGC,KAAK,CAAEU,KAAF,CAHd;AAIC,IAAA,MAAM,EAAGT,MAJV;AAKC,IAAA,mBAAmB,EAAGC,mBALvB;AAMC,IAAA,QAAQ,EAAKS,QAAF,IAAgB;AAC1B,YAAMC,SAAS,GAAGZ,KAAK,CAACa,KAAN,EAAlB;AACAD,MAAAA,SAAS,CAAEF,KAAF,CAAT,GAAqBC,QAArB;AACAR,MAAAA,QAAQ,CAAES,SAAF,CAAR;AACA;AAVF,IADC,CADH,CADD;AAkBA;;eAEcL,e","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport ColorPalette from '../color-palette';\nimport Swatch from '../swatch';\n\nfunction ColorOption( {\n\tlabel,\n\tvalue,\n\tcolors,\n\tdisableCustomColors,\n\tonChange,\n} ) {\n\tconst [ isOpen, setIsOpen ] = useState( false );\n\treturn (\n\t\t<>\n\t\t\t<Button\n\t\t\t\tclassName=\"components-color-list-picker__swatch-button\"\n\t\t\t\ticon={ <Swatch fill={ value } /> }\n\t\t\t\tonClick={ () => setIsOpen( ( prev ) => ! prev ) }\n\t\t\t>\n\t\t\t\t{ label }\n\t\t\t</Button>\n\t\t\t{ isOpen && (\n\t\t\t\t<ColorPalette\n\t\t\t\t\tcolors={ colors }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tclearable={ false }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nfunction ColorListPicker( {\n\tcolors,\n\tlabels,\n\tvalue = [],\n\tdisableCustomColors,\n\tonChange,\n} ) {\n\treturn (\n\t\t<div className=\"components-color-list-picker\">\n\t\t\t{ labels.map( ( label, index ) => (\n\t\t\t\t<ColorOption\n\t\t\t\t\tkey={ index }\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tvalue={ value[ index ] }\n\t\t\t\t\tcolors={ colors }\n\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\tonChange={ ( newColor ) => {\n\t\t\t\t\t\tconst newColors = value.slice();\n\t\t\t\t\t\tnewColors[ index ] = newColor;\n\t\t\t\t\t\tonChange( newColors );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</div>\n\t);\n}\n\nexport default ColorListPicker;\n"]}
+{"version":3,"sources":["@wordpress/components/src/color-list-picker/index.js"],"names":["ColorOption","label","value","colors","disableCustomColors","enableAlpha","onChange","isOpen","setIsOpen","prev","ColorListPicker","labels","map","index","newColor","newColors","slice"],"mappings":";;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAKA,SAASA,WAAT,OAOI;AAAA,MAPkB;AACrBC,IAAAA,KADqB;AAErBC,IAAAA,KAFqB;AAGrBC,IAAAA,MAHqB;AAIrBC,IAAAA,mBAJqB;AAKrBC,IAAAA,WALqB;AAMrBC,IAAAA;AANqB,GAOlB;AACH,QAAM,CAAEC,MAAF,EAAUC,SAAV,IAAwB,uBAAU,KAAV,CAA9B;AACA,SACC,qDACC,4BAAC,eAAD;AACC,IAAA,SAAS,EAAC,6CADX;AAEC,IAAA,IAAI,EAAG,4BAAC,eAAD;AAAQ,MAAA,IAAI,EAAGN;AAAf,MAFR;AAGC,IAAA,OAAO,EAAG,MAAMM,SAAS,CAAIC,IAAF,IAAY,CAAEA,IAAhB;AAH1B,KAKGR,KALH,CADD,EAQGM,MAAM,IACP,4BAAC,qBAAD;AACC,IAAA,SAAS,EAAC,4CADX;AAEC,IAAA,MAAM,EAAGJ,MAFV;AAGC,IAAA,KAAK,EAAGD,KAHT;AAIC,IAAA,SAAS,EAAG,KAJb;AAKC,IAAA,QAAQ,EAAGI,QALZ;AAMC,IAAA,mBAAmB,EAAGF,mBANvB;AAOC,IAAA,WAAW,EAAGC;AAPf,IATF,CADD;AAsBA;;AAED,SAASK,eAAT,QAOI;AAAA,MAPsB;AACzBP,IAAAA,MADyB;AAEzBQ,IAAAA,MAFyB;AAGzBT,IAAAA,KAAK,GAAG,EAHiB;AAIzBE,IAAAA,mBAJyB;AAKzBC,IAAAA,WALyB;AAMzBC,IAAAA;AANyB,GAOtB;AACH,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGK,MAAM,CAACC,GAAP,CAAY,CAAEX,KAAF,EAASY,KAAT,KACb,4BAAC,WAAD;AACC,IAAA,GAAG,EAAGA,KADP;AAEC,IAAA,KAAK,EAAGZ,KAFT;AAGC,IAAA,KAAK,EAAGC,KAAK,CAAEW,KAAF,CAHd;AAIC,IAAA,MAAM,EAAGV,MAJV;AAKC,IAAA,mBAAmB,EAAGC,mBALvB;AAMC,IAAA,WAAW,EAAGC,WANf;AAOC,IAAA,QAAQ,EAAKS,QAAF,IAAgB;AAC1B,YAAMC,SAAS,GAAGb,KAAK,CAACc,KAAN,EAAlB;AACAD,MAAAA,SAAS,CAAEF,KAAF,CAAT,GAAqBC,QAArB;AACAR,MAAAA,QAAQ,CAAES,SAAF,CAAR;AACA;AAXF,IADC,CADH,CADD;AAmBA;;eAEcL,e","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport ColorPalette from '../color-palette';\nimport Swatch from '../swatch';\n\nfunction ColorOption( {\n\tlabel,\n\tvalue,\n\tcolors,\n\tdisableCustomColors,\n\tenableAlpha,\n\tonChange,\n} ) {\n\tconst [ isOpen, setIsOpen ] = useState( false );\n\treturn (\n\t\t<>\n\t\t\t<Button\n\t\t\t\tclassName=\"components-color-list-picker__swatch-button\"\n\t\t\t\ticon={ <Swatch fill={ value } /> }\n\t\t\t\tonClick={ () => setIsOpen( ( prev ) => ! prev ) }\n\t\t\t>\n\t\t\t\t{ label }\n\t\t\t</Button>\n\t\t\t{ isOpen && (\n\t\t\t\t<ColorPalette\n\t\t\t\t\tclassName=\"components-color-list-picker__color-picker\"\n\t\t\t\t\tcolors={ colors }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tclearable={ false }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nfunction ColorListPicker( {\n\tcolors,\n\tlabels,\n\tvalue = [],\n\tdisableCustomColors,\n\tenableAlpha,\n\tonChange,\n} ) {\n\treturn (\n\t\t<div className=\"components-color-list-picker\">\n\t\t\t{ labels.map( ( label, index ) => (\n\t\t\t\t<ColorOption\n\t\t\t\t\tkey={ index }\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tvalue={ value[ index ] }\n\t\t\t\t\tcolors={ colors }\n\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\tonChange={ ( newColor ) => {\n\t\t\t\t\t\tconst newColors = value.slice();\n\t\t\t\t\t\tnewColors[ index ] = newColor;\n\t\t\t\t\t\tonChange( newColors );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</div>\n\t);\n}\n\nexport default ColorListPicker;\n"]}

package/build/color-palette/index.js

@@ -19,10 +19,16 @@ var _a11y = _interopRequireDefault(require("colord/plugins/a11y"));
 
 var _i18n = require("@wordpress/i18n");
 
+var _dropdown = _interopRequireDefault(require("../dropdown"));
+
 var _colorPicker = require("../color-picker");
 
 var _circularOptionPicker = _interopRequireDefault(require("../circular-option-picker"));
 
+var _vStack = require("../v-stack");
+
+var _styles = require("./styles");
+
 /**
  * External dependencies
  */
@@ -36,20 +42,21 @@ var _circularOptionPicker = _interopRequireDefault(require("../circular-option-p
  */
 (0, _colord.extend)([_names.default, _a11y.default]);
 
-function ColorPalette({
-  clearable = true,
-  className,
-  colors,
-  disableCustomColors = false,
-  onChange,
-  value
-}) {
-  const clearColor = (0, _element.useCallback)(() => onChange(undefined), [onChange]);
+function SinglePalette(_ref) {
+  let {
+    className,
+    clearColor,
+    colors,
+    onChange,
+    value,
+    actions
+  } = _ref;
   const colorOptions = (0, _element.useMemo)(() => {
-    return (0, _lodash.map)(colors, ({
-      color,
-      name
-    }) => {
+    return (0, _lodash.map)(colors, _ref2 => {
+      let {
+        color,
+        name
+      } = _ref2;
       const colordColor = (0, _colord.colord)(color);
       return (0, _element.createElement)(_circularOptionPicker.default.Option, {
         key: color,
@@ -70,27 +77,93 @@ function ColorPalette({
       });
     });
   }, [colors, value, onChange, clearColor]);
+  return (0, _element.createElement)(_circularOptionPicker.default, {
+    className: className,
+    options: colorOptions,
+    actions: actions
+  });
+}
+
+function MultiplePalettes(_ref3) {
+  let {
+    className,
+    clearColor,
+    colors,
+    onChange,
+    value,
+    actions
+  } = _ref3;
+  return (0, _element.createElement)(_vStack.VStack, {
+    spacing: 3,
+    className: className
+  }, colors.map((_ref4, index) => {
+    let {
+      name,
+      colors: colorPalette
+    } = _ref4;
+    return (0, _element.createElement)(_vStack.VStack, {
+      spacing: 2,
+      key: index
+    }, (0, _element.createElement)(_styles.ColorHeading, null, name), (0, _element.createElement)(SinglePalette, {
+      clearColor: clearColor,
+      colors: colorPalette,
+      onChange: onChange,
+      value: value,
+      actions: colors.length === index + 1 ? actions : null
+    }));
+  }));
+}
+
+function ColorPalette(_ref5) {
+  let {
+    clearable = true,
+    className,
+    colors,
+    disableCustomColors = false,
+    enableAlpha,
+    onChange,
+    value,
+    __experimentalHasMultipleOrigins = false
+  } = _ref5;
+  const clearColor = (0, _element.useCallback)(() => onChange(undefined), [onChange]);
+  const Component = __experimentalHasMultipleOrigins ? MultiplePalettes : SinglePalette;
 
   const renderCustomColorPicker = () => (0, _element.createElement)(_colorPicker.ColorPicker, {
     color: value,
-    onChange: color => onChange(color)
+    onChange: color => onChange(color),
+    enableAlpha: enableAlpha
   });
 
-  return (0, _element.createElement)(_circularOptionPicker.default, {
-    className: className,
-    options: colorOptions,
-    actions: (0, _element.createElement)(_element.Fragment, null, !disableCustomColors && (0, _element.createElement)(_circularOptionPicker.default.DropdownLinkAction, {
-      dropdownProps: {
-        renderContent: renderCustomColorPicker,
-        contentClassName: 'components-color-palette__picker'
-      },
-      buttonProps: {
-        'aria-label': (0, _i18n.__)('Custom color picker')
-      },
-      linkText: (0, _i18n.__)('Custom color')
-    }), !!clearable && (0, _element.createElement)(_circularOptionPicker.default.ButtonAction, {
+  return (0, _element.createElement)(_vStack.VStack, {
+    spacing: 3,
+    className: className
+  }, !disableCustomColors && (0, _element.createElement)(_dropdown.default, {
+    renderContent: renderCustomColorPicker,
+    renderToggle: _ref6 => {
+      let {
+        isOpen,
+        onToggle
+      } = _ref6;
+      return (0, _element.createElement)("button", {
+        className: "components-color-palette__custom-color",
+        "aria-expanded": isOpen,
+        "aria-haspopup": "true",
+        onClick: onToggle,
+        "aria-label": (0, _i18n.__)('Custom color picker'),
+        style: {
+          background: value
+        }
+      }, value);
+    }
+  }), (0, _element.createElement)(Component, {
+    clearable: clearable,
+    clearColor: clearColor,
+    colors: colors,
+    onChange: onChange,
+    value: value,
+    actions: !!clearable && (0, _element.createElement)(_circularOptionPicker.default.ButtonAction, {
       onClick: clearColor
-    }, (0, _i18n.__)('Clear')))
-  });
+    }, (0, _i18n.__)('Clear'))
+  }));
 }
 //# sourceMappingURL=index.js.map

package/build/color-palette/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-palette/index.js"],"names":["namesPlugin","a11yPlugin","ColorPalette","clearable","className","colors","disableCustomColors","onChange","value","clearColor","undefined","colorOptions","color","name","colordColor","fill","contrast","backgroundColor","renderCustomColorPicker","renderContent","contentClassName"],"mappings":";;;;;;;;;AAYA;;AATA;;AACA;;AACA;;AACA;;AAKA;;AAMA;;AACA;;AAlBA;AACA;AACA;;AAMA;AACA;AACA;;AAIA;AACA;AACA;AAIA,oBAAQ,CAAEA,cAAF,EAAeC,aAAf,CAAR;;AAEe,SAASC,YAAT,CAAuB;AACrCC,EAAAA,SAAS,GAAG,IADyB;AAErCC,EAAAA,SAFqC;AAGrCC,EAAAA,MAHqC;AAIrCC,EAAAA,mBAAmB,GAAG,KAJe;AAKrCC,EAAAA,QALqC;AAMrCC,EAAAA;AANqC,CAAvB,EAOX;AACH,QAAMC,UAAU,GAAG,0BAAa,MAAMF,QAAQ,CAAEG,SAAF,CAA3B,EAA0C,CAAEH,QAAF,CAA1C,CAAnB;AACA,QAAMI,YAAY,GAAG,sBAAS,MAAM;AACnC,WAAO,iBAAKN,MAAL,EAAa,CAAE;AAAEO,MAAAA,KAAF;AAASC,MAAAA;AAAT,KAAF,KAAuB;AAC1C,YAAMC,WAAW,GAAG,oBAAQF,KAAR,CAApB;AACA,aACC,4BAAC,6BAAD,CAAsB,MAAtB;AACC,QAAA,GAAG,EAAGA,KADP;AAEC,QAAA,UAAU,EAAGJ,KAAK,KAAKI,KAFxB;AAGC,QAAA,iBAAiB,EAChBJ,KAAK,KAAKI,KAAV,GACG;AACAG,UAAAA,IAAI,EACHD,WAAW,CAACE,QAAZ,KACAF,WAAW,CAACE,QAAZ,CAAsB,MAAtB,CADA,GAEG,MAFH,GAGG;AALJ,SADH,GAQG,EAZL;AAcC,QAAA,WAAW,EACVH,IAAI,IACJ;AACA,2BAAS,cAAI,gBAAJ,CAAT,EAAiCD,KAAjC,CAjBF;AAmBC,QAAA,KAAK,EAAG;AAAEK,UAAAA,eAAe,EAAEL,KAAnB;AAA0BA,UAAAA;AAA1B,SAnBT;AAoBC,QAAA,OAAO,EACNJ,KAAK,KAAKI,KAAV,GAAkBH,UAAlB,GAA+B,MAAMF,QAAQ,CAAEK,KAAF,CArB/C;AAuBC,sBACCC,IAAI,GACD;AACA,2BAAS,cAAI,WAAJ,CAAT,EAA4BA,IAA5B,CAFC,GAGD;AACA,2BAAS,cAAI,gBAAJ,CAAT,EAAiCD,KAAjC;AA5BL,QADD;AAiCA,KAnCM,CAAP;AAoCA,GArCoB,EAqClB,CAAEP,MAAF,EAAUG,KAAV,EAAiBD,QAAjB,EAA2BE,UAA3B,CArCkB,CAArB;;AAsCA,QAAMS,uBAAuB,GAAG,MAC/B,4BAAC,wBAAD;AACC,IAAA,KAAK,EAAGV,KADT;AAEC,IAAA,QAAQ,EAAKI,KAAF,IAAaL,QAAQ,CAAEK,KAAF;AAFjC,IADD;;AAOA,SACC,4BAAC,6BAAD;AACC,IAAA,SAAS,EAAGR,SADb;AAEC,IAAA,OAAO,EAAGO,YAFX;AAGC,IAAA,OAAO,EACN,qDACG,CAAEL,mBAAF,IACD,4BAAC,6BAAD,CAAsB,kBAAtB;AACC,MAAA,aAAa,EAAG;AACfa,QAAAA,aAAa,EAAED,uBADA;AAEfE,QAAAA,gBAAgB,EACf;AAHc,OADjB;AAMC,MAAA,WAAW,EAAG;AACb,sBAAc,cAAI,qBAAJ;AADD,OANf;AASC,MAAA,QAAQ,EAAG,cAAI,cAAJ;AATZ,MAFF,EAcG,CAAC,CAAEjB,SAAH,IACD,4BAAC,6BAAD,CAAsB,YAAtB;AACC,MAAA,OAAO,EAAGM;AADX,OAGG,cAAI,OAAJ,CAHH,CAfF;AAJF,IADD;AA8BA","sourcesContent":["/**\n * External dependencies\n */\nimport { map } from 'lodash';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ColorPicker } from '../color-picker';\nimport CircularOptionPicker from '../circular-option-picker';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nexport default function ColorPalette( {\n\tclearable = true,\n\tclassName,\n\tcolors,\n\tdisableCustomColors = false,\n\tonChange,\n\tvalue,\n} ) {\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\tconst colorOptions = useMemo( () => {\n\t\treturn map( colors, ( { color, name } ) => {\n\t\t\tconst colordColor = colord( color );\n\t\t\treturn (\n\t\t\t\t<CircularOptionPicker.Option\n\t\t\t\t\tkey={ color }\n\t\t\t\t\tisSelected={ value === color }\n\t\t\t\t\tselectedIconProps={\n\t\t\t\t\t\tvalue === color\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tfill:\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t: {}\n\t\t\t\t\t}\n\t\t\t\t\ttooltipText={\n\t\t\t\t\t\tname ||\n\t\t\t\t\t\t// translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\tsprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n\t\t\t\t\tonClick={\n\t\t\t\t\t\tvalue === color ? clearColor : () => onChange( color )\n\t\t\t\t\t}\n\t\t\t\t\taria-label={\n\t\t\t\t\t\tname\n\t\t\t\t\t\t\t? // translators: %s: The name of the color e.g: \"vivid red\".\n\t\t\t\t\t\t\t  sprintf( __( 'Color: %s' ), name )\n\t\t\t\t\t\t\t: // translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\t\t  sprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\t}, [ colors, value, onChange, clearColor ] );\n\tconst renderCustomColorPicker = () => (\n\t\t<ColorPicker\n\t\t\tcolor={ value }\n\t\t\tonChange={ ( color ) => onChange( color ) }\n\t\t/>\n\t);\n\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\tclassName={ className }\n\t\t\toptions={ colorOptions }\n\t\t\tactions={\n\t\t\t\t<>\n\t\t\t\t\t{ ! disableCustomColors && (\n\t\t\t\t\t\t<CircularOptionPicker.DropdownLinkAction\n\t\t\t\t\t\t\tdropdownProps={ {\n\t\t\t\t\t\t\t\trenderContent: renderCustomColorPicker,\n\t\t\t\t\t\t\t\tcontentClassName:\n\t\t\t\t\t\t\t\t\t'components-color-palette__picker',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tbuttonProps={ {\n\t\t\t\t\t\t\t\t'aria-label': __( 'Custom color picker' ),\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tlinkText={ __( 'Custom color' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ !! clearable && (\n\t\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\t\tonClick={ clearColor }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t\t) }\n\t\t\t\t</>\n\t\t\t}\n\t\t/>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/color-palette/index.js"],"names":["namesPlugin","a11yPlugin","SinglePalette","className","clearColor","colors","onChange","value","actions","colorOptions","color","name","colordColor","fill","contrast","backgroundColor","MultiplePalettes","map","index","colorPalette","length","ColorPalette","clearable","disableCustomColors","enableAlpha","__experimentalHasMultipleOrigins","undefined","Component","renderCustomColorPicker","isOpen","onToggle","background"],"mappings":";;;;;;;;;AAYA;;AATA;;AACA;;AACA;;AACA;;AAKA;;AAMA;;AACA;;AACA;;AACA;;AACA;;AArBA;AACA;AACA;;AAMA;AACA;AACA;;AAIA;AACA;AACA;AAOA,oBAAQ,CAAEA,cAAF,EAAeC,aAAf,CAAR;;AAEA,SAASC,aAAT,OAOI;AAAA,MAPoB;AACvBC,IAAAA,SADuB;AAEvBC,IAAAA,UAFuB;AAGvBC,IAAAA,MAHuB;AAIvBC,IAAAA,QAJuB;AAKvBC,IAAAA,KALuB;AAMvBC,IAAAA;AANuB,GAOpB;AACH,QAAMC,YAAY,GAAG,sBAAS,MAAM;AACnC,WAAO,iBAAKJ,MAAL,EAAa,SAAuB;AAAA,UAArB;AAAEK,QAAAA,KAAF;AAASC,QAAAA;AAAT,OAAqB;AAC1C,YAAMC,WAAW,GAAG,oBAAQF,KAAR,CAApB;AACA,aACC,4BAAC,6BAAD,CAAsB,MAAtB;AACC,QAAA,GAAG,EAAGA,KADP;AAEC,QAAA,UAAU,EAAGH,KAAK,KAAKG,KAFxB;AAGC,QAAA,iBAAiB,EAChBH,KAAK,KAAKG,KAAV,GACG;AACAG,UAAAA,IAAI,EACHD,WAAW,CAACE,QAAZ,KACAF,WAAW,CAACE,QAAZ,CAAsB,MAAtB,CADA,GAEG,MAFH,GAGG;AALJ,SADH,GAQG,EAZL;AAcC,QAAA,WAAW,EACVH,IAAI,IACJ;AACA,2BAAS,cAAI,gBAAJ,CAAT,EAAiCD,KAAjC,CAjBF;AAmBC,QAAA,KAAK,EAAG;AAAEK,UAAAA,eAAe,EAAEL,KAAnB;AAA0BA,UAAAA;AAA1B,SAnBT;AAoBC,QAAA,OAAO,EACNH,KAAK,KAAKG,KAAV,GAAkBN,UAAlB,GAA+B,MAAME,QAAQ,CAAEI,KAAF,CArB/C;AAuBC,sBACCC,IAAI,GACD;AACA,2BAAS,cAAI,WAAJ,CAAT,EAA4BA,IAA5B,CAFC,GAGD;AACA,2BAAS,cAAI,gBAAJ,CAAT,EAAiCD,KAAjC;AA5BL,QADD;AAiCA,KAnCM,CAAP;AAoCA,GArCoB,EAqClB,CAAEL,MAAF,EAAUE,KAAV,EAAiBD,QAAjB,EAA2BF,UAA3B,CArCkB,CAArB;AAsCA,SACC,4BAAC,6BAAD;AACC,IAAA,SAAS,EAAGD,SADb;AAEC,IAAA,OAAO,EAAGM,YAFX;AAGC,IAAA,OAAO,EAAGD;AAHX,IADD;AAOA;;AAED,SAASQ,gBAAT,QAOI;AAAA,MAPuB;AAC1Bb,IAAAA,SAD0B;AAE1BC,IAAAA,UAF0B;AAG1BC,IAAAA,MAH0B;AAI1BC,IAAAA,QAJ0B;AAK1BC,IAAAA,KAL0B;AAM1BC,IAAAA;AAN0B,GAOvB;AACH,SACC,4BAAC,cAAD;AAAQ,IAAA,OAAO,EAAG,CAAlB;AAAsB,IAAA,SAAS,EAAGL;AAAlC,KACGE,MAAM,CAACY,GAAP,CAAY,QAAkCC,KAAlC,KAA6C;AAAA,QAA3C;AAAEP,MAAAA,IAAF;AAAQN,MAAAA,MAAM,EAAEc;AAAhB,KAA2C;AAC1D,WACC,4BAAC,cAAD;AAAQ,MAAA,OAAO,EAAG,CAAlB;AAAsB,MAAA,GAAG,EAAGD;AAA5B,OACC,4BAAC,oBAAD,QAAgBP,IAAhB,CADD,EAEC,4BAAC,aAAD;AACC,MAAA,UAAU,EAAGP,UADd;AAEC,MAAA,MAAM,EAAGe,YAFV;AAGC,MAAA,QAAQ,EAAGb,QAHZ;AAIC,MAAA,KAAK,EAAGC,KAJT;AAKC,MAAA,OAAO,EACNF,MAAM,CAACe,MAAP,KAAkBF,KAAK,GAAG,CAA1B,GAA8BV,OAA9B,GAAwC;AAN1C,MAFD,CADD;AAcA,GAfC,CADH,CADD;AAoBA;;AAEc,SAASa,YAAT,QASX;AAAA,MATkC;AACrCC,IAAAA,SAAS,GAAG,IADyB;AAErCnB,IAAAA,SAFqC;AAGrCE,IAAAA,MAHqC;AAIrCkB,IAAAA,mBAAmB,GAAG,KAJe;AAKrCC,IAAAA,WALqC;AAMrClB,IAAAA,QANqC;AAOrCC,IAAAA,KAPqC;AAQrCkB,IAAAA,gCAAgC,GAAG;AARE,GASlC;AACH,QAAMrB,UAAU,GAAG,0BAAa,MAAME,QAAQ,CAAEoB,SAAF,CAA3B,EAA0C,CAAEpB,QAAF,CAA1C,CAAnB;AACA,QAAMqB,SAAS,GAAGF,gCAAgC,GAC/CT,gBAD+C,GAE/Cd,aAFH;;AAIA,QAAM0B,uBAAuB,GAAG,MAC/B,4BAAC,wBAAD;AACC,IAAA,KAAK,EAAGrB,KADT;AAEC,IAAA,QAAQ,EAAKG,KAAF,IAAaJ,QAAQ,CAAEI,KAAF,CAFjC;AAGC,IAAA,WAAW,EAAGc;AAHf,IADD;;AAQA,SACC,4BAAC,cAAD;AAAQ,IAAA,OAAO,EAAG,CAAlB;AAAsB,IAAA,SAAS,EAAGrB;AAAlC,KACG,CAAEoB,mBAAF,IACD,4BAAC,iBAAD;AACC,IAAA,aAAa,EAAGK,uBADjB;AAEC,IAAA,YAAY,EAAG;AAAA,UAAE;AAAEC,QAAAA,MAAF;AAAUC,QAAAA;AAAV,OAAF;AAAA,aACd;AACC,QAAA,SAAS,EAAC,wCADX;AAEC,yBAAgBD,MAFjB;AAGC,yBAAc,MAHf;AAIC,QAAA,OAAO,EAAGC,QAJX;AAKC,sBAAa,cAAI,qBAAJ,CALd;AAMC,QAAA,KAAK,EAAG;AAAEC,UAAAA,UAAU,EAAExB;AAAd;AANT,SAQGA,KARH,CADc;AAAA;AAFhB,IAFF,EAkBC,4BAAC,SAAD;AACC,IAAA,SAAS,EAAGe,SADb;AAEC,IAAA,UAAU,EAAGlB,UAFd;AAGC,IAAA,MAAM,EAAGC,MAHV;AAIC,IAAA,QAAQ,EAAGC,QAJZ;AAKC,IAAA,KAAK,EAAGC,KALT;AAMC,IAAA,OAAO,EACN,CAAC,CAAEe,SAAH,IACC,4BAAC,6BAAD,CAAsB,YAAtB;AACC,MAAA,OAAO,EAAGlB;AADX,OAGG,cAAI,OAAJ,CAHH;AARH,IAlBD,CADD;AAqCA","sourcesContent":["/**\n * External dependencies\n */\nimport { map } from 'lodash';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Dropdown from '../dropdown';\nimport { ColorPicker } from '../color-picker';\nimport CircularOptionPicker from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport { ColorHeading } from './styles';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction SinglePalette( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\n} ) {\n\tconst colorOptions = useMemo( () => {\n\t\treturn map( colors, ( { color, name } ) => {\n\t\t\tconst colordColor = colord( color );\n\t\t\treturn (\n\t\t\t\t<CircularOptionPicker.Option\n\t\t\t\t\tkey={ color }\n\t\t\t\t\tisSelected={ value === color }\n\t\t\t\t\tselectedIconProps={\n\t\t\t\t\t\tvalue === color\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tfill:\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t: {}\n\t\t\t\t\t}\n\t\t\t\t\ttooltipText={\n\t\t\t\t\t\tname ||\n\t\t\t\t\t\t// translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\tsprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n\t\t\t\t\tonClick={\n\t\t\t\t\t\tvalue === color ? clearColor : () => onChange( color )\n\t\t\t\t\t}\n\t\t\t\t\taria-label={\n\t\t\t\t\t\tname\n\t\t\t\t\t\t\t? // translators: %s: The name of the color e.g: \"vivid red\".\n\t\t\t\t\t\t\t  sprintf( __( 'Color: %s' ), name )\n\t\t\t\t\t\t\t: // translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\t\t  sprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\t}, [ colors, value, onChange, clearColor ] );\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\tclassName={ className }\n\t\t\toptions={ colorOptions }\n\t\t\tactions={ actions }\n\t\t/>\n\t);\n}\n\nfunction MultiplePalettes( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\n} ) {\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ colors.map( ( { name, colors: colorPalette }, index ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading>{ name }</ColorHeading>\n\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\tclearColor={ clearColor }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\tactions={\n\t\t\t\t\t\t\t\tcolors.length === index + 1 ? actions : null\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nexport default function ColorPalette( {\n\tclearable = true,\n\tclassName,\n\tcolors,\n\tdisableCustomColors = false,\n\tenableAlpha,\n\tonChange,\n\tvalue,\n\t__experimentalHasMultipleOrigins = false,\n} ) {\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\tconst Component = __experimentalHasMultipleOrigins\n\t\t? MultiplePalettes\n\t\t: SinglePalette;\n\n\tconst renderCustomColorPicker = () => (\n\t\t<ColorPicker\n\t\t\tcolor={ value }\n\t\t\tonChange={ ( color ) => onChange( color ) }\n\t\t\tenableAlpha={ enableAlpha }\n\t\t/>\n\t);\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ ! disableCustomColors && (\n\t\t\t\t<Dropdown\n\t\t\t\t\trenderContent={ renderCustomColorPicker }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color\"\n\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\taria-label={ __( 'Custom color picker' ) }\n\t\t\t\t\t\t\tstyle={ { background: value } }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ value }\n\t\t\t\t\t\t</button>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<Component\n\t\t\t\tclearable={ clearable }\n\t\t\t\tclearColor={ clearColor }\n\t\t\t\tcolors={ colors }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tvalue={ value }\n\t\t\t\tactions={\n\t\t\t\t\t!! clearable && (\n\t\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\t\tonClick={ clearColor }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t/>\n\t\t</VStack>\n\t);\n}\n"]}