@wordpress/components 19.0.0 → 19.0.1

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

@@ -0,0 +1,90 @@
+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)."; }
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+import Button from '../button';
+import { Heading } from '../heading';
+import { HStack } from '../h-stack';
+import { space } from '../ui/utils/space';
+import { COLORS, CONFIG } from '../utils';
+import { View } from '../view';
+import ColorIndicator from '../color-indicator';
+import InputControl from '../input-control';
+import Item from '../item-group/item';
+import { Container as InputControlContainer, Input, BackdropUI as InputBackdropUI } from '../input-control/styles/input-control-styles';
+export const ColorIndicatorStyled = /*#__PURE__*/_styled(ColorIndicator, process.env.NODE_ENV === "production" ? {
+  target: "e3doru19"
+} : {
+  target: "e3doru19",
+  label: "ColorIndicatorStyled"
+})("&&{display:block;border-radius:50%;border:0;height:", space(6), ";width:", space(6), ";margin-left:0;padding:0;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY29sb3ItZWRpdC9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBdUI0RCIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2NvbG9yLWVkaXQvc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgQnV0dG9uIGZyb20gJy4uL2J1dHRvbic7XG5pbXBvcnQgeyBIZWFkaW5nIH0gZnJvbSAnLi4vaGVhZGluZyc7XG5pbXBvcnQgeyBIU3RhY2sgfSBmcm9tICcuLi9oLXN0YWNrJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdWkvdXRpbHMvc3BhY2UnO1xuaW1wb3J0IHsgQ09MT1JTLCBDT05GSUcgfSBmcm9tICcuLi91dGlscyc7XG5pbXBvcnQgeyBWaWV3IH0gZnJvbSAnLi4vdmlldyc7XG5pbXBvcnQgQ29sb3JJbmRpY2F0b3IgZnJvbSAnLi4vY29sb3ItaW5kaWNhdG9yJztcbmltcG9ydCBJbnB1dENvbnRyb2wgZnJvbSAnLi4vaW5wdXQtY29udHJvbCc7XG5pbXBvcnQgSXRlbSBmcm9tICcuLi9pdGVtLWdyb3VwL2l0ZW0nO1xuaW1wb3J0IHtcblx0Q29udGFpbmVyIGFzIElucHV0Q29udHJvbENvbnRhaW5lcixcblx0SW5wdXQsXG5cdEJhY2tkcm9wVUkgYXMgSW5wdXRCYWNrZHJvcFVJLFxufSBmcm9tICcuLi9pbnB1dC1jb250cm9sL3N0eWxlcy9pbnB1dC1jb250cm9sLXN0eWxlcyc7XG5cbmV4cG9ydCBjb25zdCBDb2xvckluZGljYXRvclN0eWxlZCA9IHN0eWxlZCggQ29sb3JJbmRpY2F0b3IgKWBcblx0JiYge1xuXHRcdGRpc3BsYXk6IGJsb2NrO1xuXHRcdGJvcmRlci1yYWRpdXM6IDUwJTtcblx0XHRib3JkZXI6IDA7XG5cdFx0aGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdFx0d2lkdGg6ICR7IHNwYWNlKCA2ICkgfTtcblx0XHRtYXJnaW4tbGVmdDogMDtcblx0XHRwYWRkaW5nOiAwO1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JOYW1lSW5wdXRDb250cm9sID0gc3R5bGVkKCBJbnB1dENvbnRyb2wgKWBcblx0JHsgSW5wdXRDb250cm9sQ29udGFpbmVyIH0ge1xuXHRcdGJhY2tncm91bmQ6ICR7IENPTE9SUy5ncmF5WyAxMDAgXSB9O1xuXHRcdGJvcmRlci1yYWRpdXM6IDJweDtcblx0XHQkeyBJbnB1dCB9JHsgSW5wdXQgfSR7IElucHV0IH0keyBJbnB1dCB9IHtcblx0XHRcdGhlaWdodDogJHsgc3BhY2UoIDggKSB9O1xuXHRcdH1cblx0XHQkeyBJbnB1dEJhY2tkcm9wVUkgfSR7IElucHV0QmFja2Ryb3BVSSB9JHsgSW5wdXRCYWNrZHJvcFVJIH0ge1xuXHRcdFx0Ym9yZGVyLWNvbG9yOiB0cmFuc3BhcmVudDtcblx0XHRcdGJveC1zaGFkb3c6IG5vbmU7XG5cdFx0fVxuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JJdGVtID0gc3R5bGVkKCBJdGVtIClgXG5cdHBhZGRpbmc6IDNweCAwIDNweCAkeyBzcGFjZSggMyApIH07XG5cdGhlaWdodDogY2FsYyggNDBweCAtICR7IENPTkZJRy5ib3JkZXJXaWR0aCB9ICk7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JOYW1lQ29udGFpbmVyID0gc3R5bGVkLnNwYW5gXG5cdGxpbmUtaGVpZ2h0OiAkeyBzcGFjZSggOCApIH07XG5cdG1hcmdpbi1sZWZ0OiAkeyBzcGFjZSggMiApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JIZWFkaW5nID0gc3R5bGVkKCBIZWFkaW5nIClgXG5cdHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG5cdGxpbmUtaGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdGZvbnQtd2VpZ2h0OiA1MDA7XG5cdCYmJiB7XG5cdFx0Zm9udC1zaXplOiAxMXB4O1xuXHRcdG1hcmdpbi1ib3R0b206IDA7XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBDb2xvckFjdGlvbnNDb250YWluZXIgPSBzdHlsZWQoIFZpZXcgKWBcblx0aGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdGRpc3BsYXk6IGZsZXg7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JIU3RhY2tIZWFkZXIgPSBzdHlsZWQoIEhTdGFjayApYFxuXHRtYXJnaW4tYm90dG9tOiAkeyBzcGFjZSggMiApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JFZGl0U3R5bGVzID0gc3R5bGVkKCBWaWV3IClgXG5cdCYmJiB7XG5cdFx0LmNvbXBvbmVudHMtYnV0dG9uLmhhcy1pY29uIHtcblx0XHRtaW4td2lkdGg6IDA7XG5cdFx0cGFkZGluZzogMDtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IERvbmVCdXR0b24gPSBzdHlsZWQoIEJ1dHRvbiApYFxuXHQmJiB7XG5cdFx0Y29sb3I6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgUmVtb3ZlQnV0dG9uID0gc3R5bGVkKCBCdXR0b24gKWBcblx0JiYge1xuXHRcdG1hcmdpbi10b3A6ICR7IHNwYWNlKCAxICkgfTtcblx0fVxuYDtcbiJdfQ== */"));
+export const ColorNameInputControl = /*#__PURE__*/_styled(InputControl, process.env.NODE_ENV === "production" ? {
+  target: "e3doru18"
+} : {
+  target: "e3doru18",
+  label: "ColorNameInputControl"
+})(InputControlContainer, "{background:", COLORS.gray[100], ";border-radius:2px;", Input, Input, Input, Input, "{height:", space(8), ";}", InputBackdropUI, InputBackdropUI, InputBackdropUI, "{border-color:transparent;box-shadow:none;}}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY29sb3ItZWRpdC9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBbUMyRCIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2NvbG9yLWVkaXQvc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgQnV0dG9uIGZyb20gJy4uL2J1dHRvbic7XG5pbXBvcnQgeyBIZWFkaW5nIH0gZnJvbSAnLi4vaGVhZGluZyc7XG5pbXBvcnQgeyBIU3RhY2sgfSBmcm9tICcuLi9oLXN0YWNrJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdWkvdXRpbHMvc3BhY2UnO1xuaW1wb3J0IHsgQ09MT1JTLCBDT05GSUcgfSBmcm9tICcuLi91dGlscyc7XG5pbXBvcnQgeyBWaWV3IH0gZnJvbSAnLi4vdmlldyc7XG5pbXBvcnQgQ29sb3JJbmRpY2F0b3IgZnJvbSAnLi4vY29sb3ItaW5kaWNhdG9yJztcbmltcG9ydCBJbnB1dENvbnRyb2wgZnJvbSAnLi4vaW5wdXQtY29udHJvbCc7XG5pbXBvcnQgSXRlbSBmcm9tICcuLi9pdGVtLWdyb3VwL2l0ZW0nO1xuaW1wb3J0IHtcblx0Q29udGFpbmVyIGFzIElucHV0Q29udHJvbENvbnRhaW5lcixcblx0SW5wdXQsXG5cdEJhY2tkcm9wVUkgYXMgSW5wdXRCYWNrZHJvcFVJLFxufSBmcm9tICcuLi9pbnB1dC1jb250cm9sL3N0eWxlcy9pbnB1dC1jb250cm9sLXN0eWxlcyc7XG5cbmV4cG9ydCBjb25zdCBDb2xvckluZGljYXRvclN0eWxlZCA9IHN0eWxlZCggQ29sb3JJbmRpY2F0b3IgKWBcblx0JiYge1xuXHRcdGRpc3BsYXk6IGJsb2NrO1xuXHRcdGJvcmRlci1yYWRpdXM6IDUwJTtcblx0XHRib3JkZXI6IDA7XG5cdFx0aGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdFx0d2lkdGg6ICR7IHNwYWNlKCA2ICkgfTtcblx0XHRtYXJnaW4tbGVmdDogMDtcblx0XHRwYWRkaW5nOiAwO1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JOYW1lSW5wdXRDb250cm9sID0gc3R5bGVkKCBJbnB1dENvbnRyb2wgKWBcblx0JHsgSW5wdXRDb250cm9sQ29udGFpbmVyIH0ge1xuXHRcdGJhY2tncm91bmQ6ICR7IENPTE9SUy5ncmF5WyAxMDAgXSB9O1xuXHRcdGJvcmRlci1yYWRpdXM6IDJweDtcblx0XHQkeyBJbnB1dCB9JHsgSW5wdXQgfSR7IElucHV0IH0keyBJbnB1dCB9IHtcblx0XHRcdGhlaWdodDogJHsgc3BhY2UoIDggKSB9O1xuXHRcdH1cblx0XHQkeyBJbnB1dEJhY2tkcm9wVUkgfSR7IElucHV0QmFja2Ryb3BVSSB9JHsgSW5wdXRCYWNrZHJvcFVJIH0ge1xuXHRcdFx0Ym9yZGVyLWNvbG9yOiB0cmFuc3BhcmVudDtcblx0XHRcdGJveC1zaGFkb3c6IG5vbmU7XG5cdFx0fVxuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JJdGVtID0gc3R5bGVkKCBJdGVtIClgXG5cdHBhZGRpbmc6IDNweCAwIDNweCAkeyBzcGFjZSggMyApIH07XG5cdGhlaWdodDogY2FsYyggNDBweCAtICR7IENPTkZJRy5ib3JkZXJXaWR0aCB9ICk7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JOYW1lQ29udGFpbmVyID0gc3R5bGVkLnNwYW5gXG5cdGxpbmUtaGVpZ2h0OiAkeyBzcGFjZSggOCApIH07XG5cdG1hcmdpbi1sZWZ0OiAkeyBzcGFjZSggMiApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JIZWFkaW5nID0gc3R5bGVkKCBIZWFkaW5nIClgXG5cdHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG5cdGxpbmUtaGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdGZvbnQtd2VpZ2h0OiA1MDA7XG5cdCYmJiB7XG5cdFx0Zm9udC1zaXplOiAxMXB4O1xuXHRcdG1hcmdpbi1ib3R0b206IDA7XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBDb2xvckFjdGlvbnNDb250YWluZXIgPSBzdHlsZWQoIFZpZXcgKWBcblx0aGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdGRpc3BsYXk6IGZsZXg7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JIU3RhY2tIZWFkZXIgPSBzdHlsZWQoIEhTdGFjayApYFxuXHRtYXJnaW4tYm90dG9tOiAkeyBzcGFjZSggMiApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JFZGl0U3R5bGVzID0gc3R5bGVkKCBWaWV3IClgXG5cdCYmJiB7XG5cdFx0LmNvbXBvbmVudHMtYnV0dG9uLmhhcy1pY29uIHtcblx0XHRtaW4td2lkdGg6IDA7XG5cdFx0cGFkZGluZzogMDtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IERvbmVCdXR0b24gPSBzdHlsZWQoIEJ1dHRvbiApYFxuXHQmJiB7XG5cdFx0Y29sb3I6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgUmVtb3ZlQnV0dG9uID0gc3R5bGVkKCBCdXR0b24gKWBcblx0JiYge1xuXHRcdG1hcmdpbi10b3A6ICR7IHNwYWNlKCAxICkgfTtcblx0fVxuYDtcbiJdfQ== */"));
+export const ColorItem = /*#__PURE__*/_styled(Item, process.env.NODE_ENV === "production" ? {
+  target: "e3doru17"
+} : {
+  target: "e3doru17",
+  label: "ColorItem"
+})("padding:3px 0 3px ", space(3), ";height:calc( 40px - ", CONFIG.borderWidth, " );" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY29sb3ItZWRpdC9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUR1QyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2NvbG9yLWVkaXQvc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgQnV0dG9uIGZyb20gJy4uL2J1dHRvbic7XG5pbXBvcnQgeyBIZWFkaW5nIH0gZnJvbSAnLi4vaGVhZGluZyc7XG5pbXBvcnQgeyBIU3RhY2sgfSBmcm9tICcuLi9oLXN0YWNrJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdWkvdXRpbHMvc3BhY2UnO1xuaW1wb3J0IHsgQ09MT1JTLCBDT05GSUcgfSBmcm9tICcuLi91dGlscyc7XG5pbXBvcnQgeyBWaWV3IH0gZnJvbSAnLi4vdmlldyc7XG5pbXBvcnQgQ29sb3JJbmRpY2F0b3IgZnJvbSAnLi4vY29sb3ItaW5kaWNhdG9yJztcbmltcG9ydCBJbnB1dENvbnRyb2wgZnJvbSAnLi4vaW5wdXQtY29udHJvbCc7XG5pbXBvcnQgSXRlbSBmcm9tICcuLi9pdGVtLWdyb3VwL2l0ZW0nO1xuaW1wb3J0IHtcblx0Q29udGFpbmVyIGFzIElucHV0Q29udHJvbENvbnRhaW5lcixcblx0SW5wdXQsXG5cdEJhY2tkcm9wVUkgYXMgSW5wdXRCYWNrZHJvcFVJLFxufSBmcm9tICcuLi9pbnB1dC1jb250cm9sL3N0eWxlcy9pbnB1dC1jb250cm9sLXN0eWxlcyc7XG5cbmV4cG9ydCBjb25zdCBDb2xvckluZGljYXRvclN0eWxlZCA9IHN0eWxlZCggQ29sb3JJbmRpY2F0b3IgKWBcblx0JiYge1xuXHRcdGRpc3BsYXk6IGJsb2NrO1xuXHRcdGJvcmRlci1yYWRpdXM6IDUwJTtcblx0XHRib3JkZXI6IDA7XG5cdFx0aGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdFx0d2lkdGg6ICR7IHNwYWNlKCA2ICkgfTtcblx0XHRtYXJnaW4tbGVmdDogMDtcblx0XHRwYWRkaW5nOiAwO1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JOYW1lSW5wdXRDb250cm9sID0gc3R5bGVkKCBJbnB1dENvbnRyb2wgKWBcblx0JHsgSW5wdXRDb250cm9sQ29udGFpbmVyIH0ge1xuXHRcdGJhY2tncm91bmQ6ICR7IENPTE9SUy5ncmF5WyAxMDAgXSB9O1xuXHRcdGJvcmRlci1yYWRpdXM6IDJweDtcblx0XHQkeyBJbnB1dCB9JHsgSW5wdXQgfSR7IElucHV0IH0keyBJbnB1dCB9IHtcblx0XHRcdGhlaWdodDogJHsgc3BhY2UoIDggKSB9O1xuXHRcdH1cblx0XHQkeyBJbnB1dEJhY2tkcm9wVUkgfSR7IElucHV0QmFja2Ryb3BVSSB9JHsgSW5wdXRCYWNrZHJvcFVJIH0ge1xuXHRcdFx0Ym9yZGVyLWNvbG9yOiB0cmFuc3BhcmVudDtcblx0XHRcdGJveC1zaGFkb3c6IG5vbmU7XG5cdFx0fVxuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JJdGVtID0gc3R5bGVkKCBJdGVtIClgXG5cdHBhZGRpbmc6IDNweCAwIDNweCAkeyBzcGFjZSggMyApIH07XG5cdGhlaWdodDogY2FsYyggNDBweCAtICR7IENPTkZJRy5ib3JkZXJXaWR0aCB9ICk7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JOYW1lQ29udGFpbmVyID0gc3R5bGVkLnNwYW5gXG5cdGxpbmUtaGVpZ2h0OiAkeyBzcGFjZSggOCApIH07XG5cdG1hcmdpbi1sZWZ0OiAkeyBzcGFjZSggMiApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JIZWFkaW5nID0gc3R5bGVkKCBIZWFkaW5nIClgXG5cdHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG5cdGxpbmUtaGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdGZvbnQtd2VpZ2h0OiA1MDA7XG5cdCYmJiB7XG5cdFx0Zm9udC1zaXplOiAxMXB4O1xuXHRcdG1hcmdpbi1ib3R0b206IDA7XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBDb2xvckFjdGlvbnNDb250YWluZXIgPSBzdHlsZWQoIFZpZXcgKWBcblx0aGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdGRpc3BsYXk6IGZsZXg7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JIU3RhY2tIZWFkZXIgPSBzdHlsZWQoIEhTdGFjayApYFxuXHRtYXJnaW4tYm90dG9tOiAkeyBzcGFjZSggMiApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JFZGl0U3R5bGVzID0gc3R5bGVkKCBWaWV3IClgXG5cdCYmJiB7XG5cdFx0LmNvbXBvbmVudHMtYnV0dG9uLmhhcy1pY29uIHtcblx0XHRtaW4td2lkdGg6IDA7XG5cdFx0cGFkZGluZzogMDtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IERvbmVCdXR0b24gPSBzdHlsZWQoIEJ1dHRvbiApYFxuXHQmJiB7XG5cdFx0Y29sb3I6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgUmVtb3ZlQnV0dG9uID0gc3R5bGVkKCBCdXR0b24gKWBcblx0JiYge1xuXHRcdG1hcmdpbi10b3A6ICR7IHNwYWNlKCAxICkgfTtcblx0fVxuYDtcbiJdfQ== */"));
+export const ColorNameContainer = _styled("span", process.env.NODE_ENV === "production" ? {
+  target: "e3doru16"
+} : {
+  target: "e3doru16",
+  label: "ColorNameContainer"
+})("line-height:", space(8), ";margin-left:", space(2), ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY29sb3ItZWRpdC9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0Q2QyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2NvbG9yLWVkaXQvc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgQnV0dG9uIGZyb20gJy4uL2J1dHRvbic7XG5pbXBvcnQgeyBIZWFkaW5nIH0gZnJvbSAnLi4vaGVhZGluZyc7XG5pbXBvcnQgeyBIU3RhY2sgfSBmcm9tICcuLi9oLXN0YWNrJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdWkvdXRpbHMvc3BhY2UnO1xuaW1wb3J0IHsgQ09MT1JTLCBDT05GSUcgfSBmcm9tICcuLi91dGlscyc7XG5pbXBvcnQgeyBWaWV3IH0gZnJvbSAnLi4vdmlldyc7XG5pbXBvcnQgQ29sb3JJbmRpY2F0b3IgZnJvbSAnLi4vY29sb3ItaW5kaWNhdG9yJztcbmltcG9ydCBJbnB1dENvbnRyb2wgZnJvbSAnLi4vaW5wdXQtY29udHJvbCc7XG5pbXBvcnQgSXRlbSBmcm9tICcuLi9pdGVtLWdyb3VwL2l0ZW0nO1xuaW1wb3J0IHtcblx0Q29udGFpbmVyIGFzIElucHV0Q29udHJvbENvbnRhaW5lcixcblx0SW5wdXQsXG5cdEJhY2tkcm9wVUkgYXMgSW5wdXRCYWNrZHJvcFVJLFxufSBmcm9tICcuLi9pbnB1dC1jb250cm9sL3N0eWxlcy9pbnB1dC1jb250cm9sLXN0eWxlcyc7XG5cbmV4cG9ydCBjb25zdCBDb2xvckluZGljYXRvclN0eWxlZCA9IHN0eWxlZCggQ29sb3JJbmRpY2F0b3IgKWBcblx0JiYge1xuXHRcdGRpc3BsYXk6IGJsb2NrO1xuXHRcdGJvcmRlci1yYWRpdXM6IDUwJTtcblx0XHRib3JkZXI6IDA7XG5cdFx0aGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdFx0d2lkdGg6ICR7IHNwYWNlKCA2ICkgfTtcblx0XHRtYXJnaW4tbGVmdDogMDtcblx0XHRwYWRkaW5nOiAwO1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JOYW1lSW5wdXRDb250cm9sID0gc3R5bGVkKCBJbnB1dENvbnRyb2wgKWBcblx0JHsgSW5wdXRDb250cm9sQ29udGFpbmVyIH0ge1xuXHRcdGJhY2tncm91bmQ6ICR7IENPTE9SUy5ncmF5WyAxMDAgXSB9O1xuXHRcdGJvcmRlci1yYWRpdXM6IDJweDtcblx0XHQkeyBJbnB1dCB9JHsgSW5wdXQgfSR7IElucHV0IH0keyBJbnB1dCB9IHtcblx0XHRcdGhlaWdodDogJHsgc3BhY2UoIDggKSB9O1xuXHRcdH1cblx0XHQkeyBJbnB1dEJhY2tkcm9wVUkgfSR7IElucHV0QmFja2Ryb3BVSSB9JHsgSW5wdXRCYWNrZHJvcFVJIH0ge1xuXHRcdFx0Ym9yZGVyLWNvbG9yOiB0cmFuc3BhcmVudDtcblx0XHRcdGJveC1zaGFkb3c6IG5vbmU7XG5cdFx0fVxuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JJdGVtID0gc3R5bGVkKCBJdGVtIClgXG5cdHBhZGRpbmc6IDNweCAwIDNweCAkeyBzcGFjZSggMyApIH07XG5cdGhlaWdodDogY2FsYyggNDBweCAtICR7IENPTkZJRy5ib3JkZXJXaWR0aCB9ICk7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JOYW1lQ29udGFpbmVyID0gc3R5bGVkLnNwYW5gXG5cdGxpbmUtaGVpZ2h0OiAkeyBzcGFjZSggOCApIH07XG5cdG1hcmdpbi1sZWZ0OiAkeyBzcGFjZSggMiApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JIZWFkaW5nID0gc3R5bGVkKCBIZWFkaW5nIClgXG5cdHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG5cdGxpbmUtaGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdGZvbnQtd2VpZ2h0OiA1MDA7XG5cdCYmJiB7XG5cdFx0Zm9udC1zaXplOiAxMXB4O1xuXHRcdG1hcmdpbi1ib3R0b206IDA7XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBDb2xvckFjdGlvbnNDb250YWluZXIgPSBzdHlsZWQoIFZpZXcgKWBcblx0aGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdGRpc3BsYXk6IGZsZXg7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JIU3RhY2tIZWFkZXIgPSBzdHlsZWQoIEhTdGFjayApYFxuXHRtYXJnaW4tYm90dG9tOiAkeyBzcGFjZSggMiApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JFZGl0U3R5bGVzID0gc3R5bGVkKCBWaWV3IClgXG5cdCYmJiB7XG5cdFx0LmNvbXBvbmVudHMtYnV0dG9uLmhhcy1pY29uIHtcblx0XHRtaW4td2lkdGg6IDA7XG5cdFx0cGFkZGluZzogMDtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IERvbmVCdXR0b24gPSBzdHlsZWQoIEJ1dHRvbiApYFxuXHQmJiB7XG5cdFx0Y29sb3I6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgUmVtb3ZlQnV0dG9uID0gc3R5bGVkKCBCdXR0b24gKWBcblx0JiYge1xuXHRcdG1hcmdpbi10b3A6ICR7IHNwYWNlKCAxICkgfTtcblx0fVxuYDtcbiJdfQ== */"));
+export const ColorHeading = /*#__PURE__*/_styled(Heading, process.env.NODE_ENV === "production" ? {
+  target: "e3doru15"
+} : {
+  target: "e3doru15",
+  label: "ColorHeading"
+})("text-transform:uppercase;line-height:", 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== */"));
+export const ColorActionsContainer = /*#__PURE__*/_styled(View, process.env.NODE_ENV === "production" ? {
+  target: "e3doru14"
+} : {
+  target: "e3doru14",
+  label: "ColorActionsContainer"
+})("height:", space(6), ";display:flex;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY29sb3ItZWRpdC9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUVtRCIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2NvbG9yLWVkaXQvc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgQnV0dG9uIGZyb20gJy4uL2J1dHRvbic7XG5pbXBvcnQgeyBIZWFkaW5nIH0gZnJvbSAnLi4vaGVhZGluZyc7XG5pbXBvcnQgeyBIU3RhY2sgfSBmcm9tICcuLi9oLXN0YWNrJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdWkvdXRpbHMvc3BhY2UnO1xuaW1wb3J0IHsgQ09MT1JTLCBDT05GSUcgfSBmcm9tICcuLi91dGlscyc7XG5pbXBvcnQgeyBWaWV3IH0gZnJvbSAnLi4vdmlldyc7XG5pbXBvcnQgQ29sb3JJbmRpY2F0b3IgZnJvbSAnLi4vY29sb3ItaW5kaWNhdG9yJztcbmltcG9ydCBJbnB1dENvbnRyb2wgZnJvbSAnLi4vaW5wdXQtY29udHJvbCc7XG5pbXBvcnQgSXRlbSBmcm9tICcuLi9pdGVtLWdyb3VwL2l0ZW0nO1xuaW1wb3J0IHtcblx0Q29udGFpbmVyIGFzIElucHV0Q29udHJvbENvbnRhaW5lcixcblx0SW5wdXQsXG5cdEJhY2tkcm9wVUkgYXMgSW5wdXRCYWNrZHJvcFVJLFxufSBmcm9tICcuLi9pbnB1dC1jb250cm9sL3N0eWxlcy9pbnB1dC1jb250cm9sLXN0eWxlcyc7XG5cbmV4cG9ydCBjb25zdCBDb2xvckluZGljYXRvclN0eWxlZCA9IHN0eWxlZCggQ29sb3JJbmRpY2F0b3IgKWBcblx0JiYge1xuXHRcdGRpc3BsYXk6IGJsb2NrO1xuXHRcdGJvcmRlci1yYWRpdXM6IDUwJTtcblx0XHRib3JkZXI6IDA7XG5cdFx0aGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdFx0d2lkdGg6ICR7IHNwYWNlKCA2ICkgfTtcblx0XHRtYXJnaW4tbGVmdDogMDtcblx0XHRwYWRkaW5nOiAwO1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JOYW1lSW5wdXRDb250cm9sID0gc3R5bGVkKCBJbnB1dENvbnRyb2wgKWBcblx0JHsgSW5wdXRDb250cm9sQ29udGFpbmVyIH0ge1xuXHRcdGJhY2tncm91bmQ6ICR7IENPTE9SUy5ncmF5WyAxMDAgXSB9O1xuXHRcdGJvcmRlci1yYWRpdXM6IDJweDtcblx0XHQkeyBJbnB1dCB9JHsgSW5wdXQgfSR7IElucHV0IH0keyBJbnB1dCB9IHtcblx0XHRcdGhlaWdodDogJHsgc3BhY2UoIDggKSB9O1xuXHRcdH1cblx0XHQkeyBJbnB1dEJhY2tkcm9wVUkgfSR7IElucHV0QmFja2Ryb3BVSSB9JHsgSW5wdXRCYWNrZHJvcFVJIH0ge1xuXHRcdFx0Ym9yZGVyLWNvbG9yOiB0cmFuc3BhcmVudDtcblx0XHRcdGJveC1zaGFkb3c6IG5vbmU7XG5cdFx0fVxuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JJdGVtID0gc3R5bGVkKCBJdGVtIClgXG5cdHBhZGRpbmc6IDNweCAwIDNweCAkeyBzcGFjZSggMyApIH07XG5cdGhlaWdodDogY2FsYyggNDBweCAtICR7IENPTkZJRy5ib3JkZXJXaWR0aCB9ICk7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JOYW1lQ29udGFpbmVyID0gc3R5bGVkLnNwYW5gXG5cdGxpbmUtaGVpZ2h0OiAkeyBzcGFjZSggOCApIH07XG5cdG1hcmdpbi1sZWZ0OiAkeyBzcGFjZSggMiApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JIZWFkaW5nID0gc3R5bGVkKCBIZWFkaW5nIClgXG5cdHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG5cdGxpbmUtaGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdGZvbnQtd2VpZ2h0OiA1MDA7XG5cdCYmJiB7XG5cdFx0Zm9udC1zaXplOiAxMXB4O1xuXHRcdG1hcmdpbi1ib3R0b206IDA7XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBDb2xvckFjdGlvbnNDb250YWluZXIgPSBzdHlsZWQoIFZpZXcgKWBcblx0aGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdGRpc3BsYXk6IGZsZXg7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JIU3RhY2tIZWFkZXIgPSBzdHlsZWQoIEhTdGFjayApYFxuXHRtYXJnaW4tYm90dG9tOiAkeyBzcGFjZSggMiApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JFZGl0U3R5bGVzID0gc3R5bGVkKCBWaWV3IClgXG5cdCYmJiB7XG5cdFx0LmNvbXBvbmVudHMtYnV0dG9uLmhhcy1pY29uIHtcblx0XHRtaW4td2lkdGg6IDA7XG5cdFx0cGFkZGluZzogMDtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IERvbmVCdXR0b24gPSBzdHlsZWQoIEJ1dHRvbiApYFxuXHQmJiB7XG5cdFx0Y29sb3I6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgUmVtb3ZlQnV0dG9uID0gc3R5bGVkKCBCdXR0b24gKWBcblx0JiYge1xuXHRcdG1hcmdpbi10b3A6ICR7IHNwYWNlKCAxICkgfTtcblx0fVxuYDtcbiJdfQ== */"));
+export const ColorHStackHeader = /*#__PURE__*/_styled(HStack, process.env.NODE_ENV === "production" ? {
+  target: "e3doru13"
+} : {
+  target: "e3doru13",
+  label: "ColorHStackHeader"
+})("margin-bottom:", space(2), ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY29sb3ItZWRpdC9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMEVpRCIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2NvbG9yLWVkaXQvc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgQnV0dG9uIGZyb20gJy4uL2J1dHRvbic7XG5pbXBvcnQgeyBIZWFkaW5nIH0gZnJvbSAnLi4vaGVhZGluZyc7XG5pbXBvcnQgeyBIU3RhY2sgfSBmcm9tICcuLi9oLXN0YWNrJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdWkvdXRpbHMvc3BhY2UnO1xuaW1wb3J0IHsgQ09MT1JTLCBDT05GSUcgfSBmcm9tICcuLi91dGlscyc7XG5pbXBvcnQgeyBWaWV3IH0gZnJvbSAnLi4vdmlldyc7XG5pbXBvcnQgQ29sb3JJbmRpY2F0b3IgZnJvbSAnLi4vY29sb3ItaW5kaWNhdG9yJztcbmltcG9ydCBJbnB1dENvbnRyb2wgZnJvbSAnLi4vaW5wdXQtY29udHJvbCc7XG5pbXBvcnQgSXRlbSBmcm9tICcuLi9pdGVtLWdyb3VwL2l0ZW0nO1xuaW1wb3J0IHtcblx0Q29udGFpbmVyIGFzIElucHV0Q29udHJvbENvbnRhaW5lcixcblx0SW5wdXQsXG5cdEJhY2tkcm9wVUkgYXMgSW5wdXRCYWNrZHJvcFVJLFxufSBmcm9tICcuLi9pbnB1dC1jb250cm9sL3N0eWxlcy9pbnB1dC1jb250cm9sLXN0eWxlcyc7XG5cbmV4cG9ydCBjb25zdCBDb2xvckluZGljYXRvclN0eWxlZCA9IHN0eWxlZCggQ29sb3JJbmRpY2F0b3IgKWBcblx0JiYge1xuXHRcdGRpc3BsYXk6IGJsb2NrO1xuXHRcdGJvcmRlci1yYWRpdXM6IDUwJTtcblx0XHRib3JkZXI6IDA7XG5cdFx0aGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdFx0d2lkdGg6ICR7IHNwYWNlKCA2ICkgfTtcblx0XHRtYXJnaW4tbGVmdDogMDtcblx0XHRwYWRkaW5nOiAwO1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JOYW1lSW5wdXRDb250cm9sID0gc3R5bGVkKCBJbnB1dENvbnRyb2wgKWBcblx0JHsgSW5wdXRDb250cm9sQ29udGFpbmVyIH0ge1xuXHRcdGJhY2tncm91bmQ6ICR7IENPTE9SUy5ncmF5WyAxMDAgXSB9O1xuXHRcdGJvcmRlci1yYWRpdXM6IDJweDtcblx0XHQkeyBJbnB1dCB9JHsgSW5wdXQgfSR7IElucHV0IH0keyBJbnB1dCB9IHtcblx0XHRcdGhlaWdodDogJHsgc3BhY2UoIDggKSB9O1xuXHRcdH1cblx0XHQkeyBJbnB1dEJhY2tkcm9wVUkgfSR7IElucHV0QmFja2Ryb3BVSSB9JHsgSW5wdXRCYWNrZHJvcFVJIH0ge1xuXHRcdFx0Ym9yZGVyLWNvbG9yOiB0cmFuc3BhcmVudDtcblx0XHRcdGJveC1zaGFkb3c6IG5vbmU7XG5cdFx0fVxuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JJdGVtID0gc3R5bGVkKCBJdGVtIClgXG5cdHBhZGRpbmc6IDNweCAwIDNweCAkeyBzcGFjZSggMyApIH07XG5cdGhlaWdodDogY2FsYyggNDBweCAtICR7IENPTkZJRy5ib3JkZXJXaWR0aCB9ICk7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JOYW1lQ29udGFpbmVyID0gc3R5bGVkLnNwYW5gXG5cdGxpbmUtaGVpZ2h0OiAkeyBzcGFjZSggOCApIH07XG5cdG1hcmdpbi1sZWZ0OiAkeyBzcGFjZSggMiApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JIZWFkaW5nID0gc3R5bGVkKCBIZWFkaW5nIClgXG5cdHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG5cdGxpbmUtaGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdGZvbnQtd2VpZ2h0OiA1MDA7XG5cdCYmJiB7XG5cdFx0Zm9udC1zaXplOiAxMXB4O1xuXHRcdG1hcmdpbi1ib3R0b206IDA7XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBDb2xvckFjdGlvbnNDb250YWluZXIgPSBzdHlsZWQoIFZpZXcgKWBcblx0aGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdGRpc3BsYXk6IGZsZXg7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JIU3RhY2tIZWFkZXIgPSBzdHlsZWQoIEhTdGFjayApYFxuXHRtYXJnaW4tYm90dG9tOiAkeyBzcGFjZSggMiApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JFZGl0U3R5bGVzID0gc3R5bGVkKCBWaWV3IClgXG5cdCYmJiB7XG5cdFx0LmNvbXBvbmVudHMtYnV0dG9uLmhhcy1pY29uIHtcblx0XHRtaW4td2lkdGg6IDA7XG5cdFx0cGFkZGluZzogMDtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IERvbmVCdXR0b24gPSBzdHlsZWQoIEJ1dHRvbiApYFxuXHQmJiB7XG5cdFx0Y29sb3I6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgUmVtb3ZlQnV0dG9uID0gc3R5bGVkKCBCdXR0b24gKWBcblx0JiYge1xuXHRcdG1hcmdpbi10b3A6ICR7IHNwYWNlKCAxICkgfTtcblx0fVxuYDtcbiJdfQ== */"));
+export const ColorEditStyles = /*#__PURE__*/_styled(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__
+});
+export const DoneButton = /*#__PURE__*/_styled(Button, process.env.NODE_ENV === "production" ? {
+  target: "e3doru11"
+} : {
+  target: "e3doru11",
+  label: "DoneButton"
+})("&&{color:", COLORS.ui.theme, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY29sb3ItZWRpdC9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0YwQyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2NvbG9yLWVkaXQvc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgQnV0dG9uIGZyb20gJy4uL2J1dHRvbic7XG5pbXBvcnQgeyBIZWFkaW5nIH0gZnJvbSAnLi4vaGVhZGluZyc7XG5pbXBvcnQgeyBIU3RhY2sgfSBmcm9tICcuLi9oLXN0YWNrJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdWkvdXRpbHMvc3BhY2UnO1xuaW1wb3J0IHsgQ09MT1JTLCBDT05GSUcgfSBmcm9tICcuLi91dGlscyc7XG5pbXBvcnQgeyBWaWV3IH0gZnJvbSAnLi4vdmlldyc7XG5pbXBvcnQgQ29sb3JJbmRpY2F0b3IgZnJvbSAnLi4vY29sb3ItaW5kaWNhdG9yJztcbmltcG9ydCBJbnB1dENvbnRyb2wgZnJvbSAnLi4vaW5wdXQtY29udHJvbCc7XG5pbXBvcnQgSXRlbSBmcm9tICcuLi9pdGVtLWdyb3VwL2l0ZW0nO1xuaW1wb3J0IHtcblx0Q29udGFpbmVyIGFzIElucHV0Q29udHJvbENvbnRhaW5lcixcblx0SW5wdXQsXG5cdEJhY2tkcm9wVUkgYXMgSW5wdXRCYWNrZHJvcFVJLFxufSBmcm9tICcuLi9pbnB1dC1jb250cm9sL3N0eWxlcy9pbnB1dC1jb250cm9sLXN0eWxlcyc7XG5cbmV4cG9ydCBjb25zdCBDb2xvckluZGljYXRvclN0eWxlZCA9IHN0eWxlZCggQ29sb3JJbmRpY2F0b3IgKWBcblx0JiYge1xuXHRcdGRpc3BsYXk6IGJsb2NrO1xuXHRcdGJvcmRlci1yYWRpdXM6IDUwJTtcblx0XHRib3JkZXI6IDA7XG5cdFx0aGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdFx0d2lkdGg6ICR7IHNwYWNlKCA2ICkgfTtcblx0XHRtYXJnaW4tbGVmdDogMDtcblx0XHRwYWRkaW5nOiAwO1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JOYW1lSW5wdXRDb250cm9sID0gc3R5bGVkKCBJbnB1dENvbnRyb2wgKWBcblx0JHsgSW5wdXRDb250cm9sQ29udGFpbmVyIH0ge1xuXHRcdGJhY2tncm91bmQ6ICR7IENPTE9SUy5ncmF5WyAxMDAgXSB9O1xuXHRcdGJvcmRlci1yYWRpdXM6IDJweDtcblx0XHQkeyBJbnB1dCB9JHsgSW5wdXQgfSR7IElucHV0IH0keyBJbnB1dCB9IHtcblx0XHRcdGhlaWdodDogJHsgc3BhY2UoIDggKSB9O1xuXHRcdH1cblx0XHQkeyBJbnB1dEJhY2tkcm9wVUkgfSR7IElucHV0QmFja2Ryb3BVSSB9JHsgSW5wdXRCYWNrZHJvcFVJIH0ge1xuXHRcdFx0Ym9yZGVyLWNvbG9yOiB0cmFuc3BhcmVudDtcblx0XHRcdGJveC1zaGFkb3c6IG5vbmU7XG5cdFx0fVxuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JJdGVtID0gc3R5bGVkKCBJdGVtIClgXG5cdHBhZGRpbmc6IDNweCAwIDNweCAkeyBzcGFjZSggMyApIH07XG5cdGhlaWdodDogY2FsYyggNDBweCAtICR7IENPTkZJRy5ib3JkZXJXaWR0aCB9ICk7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JOYW1lQ29udGFpbmVyID0gc3R5bGVkLnNwYW5gXG5cdGxpbmUtaGVpZ2h0OiAkeyBzcGFjZSggOCApIH07XG5cdG1hcmdpbi1sZWZ0OiAkeyBzcGFjZSggMiApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JIZWFkaW5nID0gc3R5bGVkKCBIZWFkaW5nIClgXG5cdHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG5cdGxpbmUtaGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdGZvbnQtd2VpZ2h0OiA1MDA7XG5cdCYmJiB7XG5cdFx0Zm9udC1zaXplOiAxMXB4O1xuXHRcdG1hcmdpbi1ib3R0b206IDA7XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBDb2xvckFjdGlvbnNDb250YWluZXIgPSBzdHlsZWQoIFZpZXcgKWBcblx0aGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdGRpc3BsYXk6IGZsZXg7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JIU3RhY2tIZWFkZXIgPSBzdHlsZWQoIEhTdGFjayApYFxuXHRtYXJnaW4tYm90dG9tOiAkeyBzcGFjZSggMiApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JFZGl0U3R5bGVzID0gc3R5bGVkKCBWaWV3IClgXG5cdCYmJiB7XG5cdFx0LmNvbXBvbmVudHMtYnV0dG9uLmhhcy1pY29uIHtcblx0XHRtaW4td2lkdGg6IDA7XG5cdFx0cGFkZGluZzogMDtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IERvbmVCdXR0b24gPSBzdHlsZWQoIEJ1dHRvbiApYFxuXHQmJiB7XG5cdFx0Y29sb3I6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgUmVtb3ZlQnV0dG9uID0gc3R5bGVkKCBCdXR0b24gKWBcblx0JiYge1xuXHRcdG1hcmdpbi10b3A6ICR7IHNwYWNlKCAxICkgfTtcblx0fVxuYDtcbiJdfQ== */"));
+export const RemoveButton = /*#__PURE__*/_styled(Button, process.env.NODE_ENV === "production" ? {
+  target: "e3doru10"
+} : {
+  target: "e3doru10",
+  label: "RemoveButton"
+})("&&{margin-top:", space(1), ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY29sb3ItZWRpdC9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNEY0QyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2NvbG9yLWVkaXQvc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgQnV0dG9uIGZyb20gJy4uL2J1dHRvbic7XG5pbXBvcnQgeyBIZWFkaW5nIH0gZnJvbSAnLi4vaGVhZGluZyc7XG5pbXBvcnQgeyBIU3RhY2sgfSBmcm9tICcuLi9oLXN0YWNrJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdWkvdXRpbHMvc3BhY2UnO1xuaW1wb3J0IHsgQ09MT1JTLCBDT05GSUcgfSBmcm9tICcuLi91dGlscyc7XG5pbXBvcnQgeyBWaWV3IH0gZnJvbSAnLi4vdmlldyc7XG5pbXBvcnQgQ29sb3JJbmRpY2F0b3IgZnJvbSAnLi4vY29sb3ItaW5kaWNhdG9yJztcbmltcG9ydCBJbnB1dENvbnRyb2wgZnJvbSAnLi4vaW5wdXQtY29udHJvbCc7XG5pbXBvcnQgSXRlbSBmcm9tICcuLi9pdGVtLWdyb3VwL2l0ZW0nO1xuaW1wb3J0IHtcblx0Q29udGFpbmVyIGFzIElucHV0Q29udHJvbENvbnRhaW5lcixcblx0SW5wdXQsXG5cdEJhY2tkcm9wVUkgYXMgSW5wdXRCYWNrZHJvcFVJLFxufSBmcm9tICcuLi9pbnB1dC1jb250cm9sL3N0eWxlcy9pbnB1dC1jb250cm9sLXN0eWxlcyc7XG5cbmV4cG9ydCBjb25zdCBDb2xvckluZGljYXRvclN0eWxlZCA9IHN0eWxlZCggQ29sb3JJbmRpY2F0b3IgKWBcblx0JiYge1xuXHRcdGRpc3BsYXk6IGJsb2NrO1xuXHRcdGJvcmRlci1yYWRpdXM6IDUwJTtcblx0XHRib3JkZXI6IDA7XG5cdFx0aGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdFx0d2lkdGg6ICR7IHNwYWNlKCA2ICkgfTtcblx0XHRtYXJnaW4tbGVmdDogMDtcblx0XHRwYWRkaW5nOiAwO1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JOYW1lSW5wdXRDb250cm9sID0gc3R5bGVkKCBJbnB1dENvbnRyb2wgKWBcblx0JHsgSW5wdXRDb250cm9sQ29udGFpbmVyIH0ge1xuXHRcdGJhY2tncm91bmQ6ICR7IENPTE9SUy5ncmF5WyAxMDAgXSB9O1xuXHRcdGJvcmRlci1yYWRpdXM6IDJweDtcblx0XHQkeyBJbnB1dCB9JHsgSW5wdXQgfSR7IElucHV0IH0keyBJbnB1dCB9IHtcblx0XHRcdGhlaWdodDogJHsgc3BhY2UoIDggKSB9O1xuXHRcdH1cblx0XHQkeyBJbnB1dEJhY2tkcm9wVUkgfSR7IElucHV0QmFja2Ryb3BVSSB9JHsgSW5wdXRCYWNrZHJvcFVJIH0ge1xuXHRcdFx0Ym9yZGVyLWNvbG9yOiB0cmFuc3BhcmVudDtcblx0XHRcdGJveC1zaGFkb3c6IG5vbmU7XG5cdFx0fVxuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JJdGVtID0gc3R5bGVkKCBJdGVtIClgXG5cdHBhZGRpbmc6IDNweCAwIDNweCAkeyBzcGFjZSggMyApIH07XG5cdGhlaWdodDogY2FsYyggNDBweCAtICR7IENPTkZJRy5ib3JkZXJXaWR0aCB9ICk7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JOYW1lQ29udGFpbmVyID0gc3R5bGVkLnNwYW5gXG5cdGxpbmUtaGVpZ2h0OiAkeyBzcGFjZSggOCApIH07XG5cdG1hcmdpbi1sZWZ0OiAkeyBzcGFjZSggMiApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JIZWFkaW5nID0gc3R5bGVkKCBIZWFkaW5nIClgXG5cdHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG5cdGxpbmUtaGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdGZvbnQtd2VpZ2h0OiA1MDA7XG5cdCYmJiB7XG5cdFx0Zm9udC1zaXplOiAxMXB4O1xuXHRcdG1hcmdpbi1ib3R0b206IDA7XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBDb2xvckFjdGlvbnNDb250YWluZXIgPSBzdHlsZWQoIFZpZXcgKWBcblx0aGVpZ2h0OiAkeyBzcGFjZSggNiApIH07XG5cdGRpc3BsYXk6IGZsZXg7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JIU3RhY2tIZWFkZXIgPSBzdHlsZWQoIEhTdGFjayApYFxuXHRtYXJnaW4tYm90dG9tOiAkeyBzcGFjZSggMiApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ29sb3JFZGl0U3R5bGVzID0gc3R5bGVkKCBWaWV3IClgXG5cdCYmJiB7XG5cdFx0LmNvbXBvbmVudHMtYnV0dG9uLmhhcy1pY29uIHtcblx0XHRtaW4td2lkdGg6IDA7XG5cdFx0cGFkZGluZzogMDtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IERvbmVCdXR0b24gPSBzdHlsZWQoIEJ1dHRvbiApYFxuXHQmJiB7XG5cdFx0Y29sb3I6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgUmVtb3ZlQnV0dG9uID0gc3R5bGVkKCBCdXR0b24gKWBcblx0JiYge1xuXHRcdG1hcmdpbi10b3A6ICR7IHNwYWNlKCAxICkgfTtcblx0fVxuYDtcbiJdfQ== */"));
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/color-edit/styles.js"],"names":["Button","Heading","HStack","space","COLORS","CONFIG","View","ColorIndicator","InputControl","Item","Container","InputControlContainer","Input","BackdropUI","InputBackdropUI","ColorIndicatorStyled","ColorNameInputControl","gray","ColorItem","borderWidth","ColorNameContainer","ColorHeading","ColorActionsContainer","ColorHStackHeader","ColorEditStyles","DoneButton","ui","theme","RemoveButton"],"mappings":";;;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,OAAOA,MAAP,MAAmB,WAAnB;AACA,SAASC,OAAT,QAAwB,YAAxB;AACA,SAASC,MAAT,QAAuB,YAAvB;AACA,SAASC,KAAT,QAAsB,mBAAtB;AACA,SAASC,MAAT,EAAiBC,MAAjB,QAA+B,UAA/B;AACA,SAASC,IAAT,QAAqB,SAArB;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AACA,OAAOC,YAAP,MAAyB,kBAAzB;AACA,OAAOC,IAAP,MAAiB,oBAAjB;AACA,SACCC,SAAS,IAAIC,qBADd,EAECC,KAFD,EAGCC,UAAU,IAAIC,eAHf,QAIO,8CAJP;AAMA,OAAO,MAAMC,oBAAoB,GAAG,qBAAQR,cAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,wDAKpBJ,KAAK,CAAE,CAAF,CALe,aAMrBA,KAAK,CAAE,CAAF,CANgB,00GAA1B;AAYP,OAAO,MAAMa,qBAAqB,GAAG,qBAAQR,YAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,CAC9BG,qBAD8B,kBAEjBP,MAAM,CAACa,IAAP,CAAa,GAAb,CAFiB,yBAI7BL,KAJ6B,EAInBA,KAJmB,EAITA,KAJS,EAICA,KAJD,cAKpBT,KAAK,CAAE,CAAF,CALe,QAO7BW,eAP6B,EAOTA,eAPS,EAOWA,eAPX,41GAA3B;AAcP,OAAO,MAAMI,SAAS,GAAG,qBAAQT,IAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,uBACCN,KAAK,CAAE,CAAF,CADN,2BAEGE,MAAM,CAACc,WAFV,mzGAAf;AAKP,OAAO,MAAMC,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,mBACdjB,KAAK,CAAE,CAAF,CADS,mBAEdA,KAAK,CAAE,CAAF,CAFS,izGAAxB;AAKP,OAAO,MAAMkB,YAAY,GAAG,qBAAQpB,OAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,0CAERE,KAAK,CAAE,CAAF,CAFG,q2GAAlB;AAUP,OAAO,MAAMmB,qBAAqB,GAAG,qBAAQhB,IAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,YACtBH,KAAK,CAAE,CAAF,CADiB,8zGAA3B;AAKP,OAAO,MAAMoB,iBAAiB,GAAG,qBAAQrB,MAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,mBACXC,KAAK,CAAE,CAAF,CADM,izGAAvB;AAIP,OAAO,MAAMqB,eAAe,GAAG,qBAAQlB,IAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAArB;AAQP,OAAO,MAAMmB,UAAU,GAAG,qBAAQzB,MAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,cAEXI,MAAM,CAACsB,EAAP,CAAUC,KAFC,kzGAAhB;AAMP,OAAO,MAAMC,YAAY,GAAG,qBAAQ5B,MAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,mBAERG,KAAK,CAAE,CAAF,CAFG,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-module/color-list-picker/index.js

@@ -17,6 +17,7 @@ function ColorOption({
   value,
   colors,
   disableCustomColors,
+  enableAlpha,
   onChange
 }) {
   const [isOpen, setIsOpen] = useState(false);
@@ -27,11 +28,13 @@ function ColorOption({
     }),
     onClick: () => setIsOpen(prev => !prev)
   }, label), isOpen && createElement(ColorPalette, {
+    className: "components-color-list-picker__color-picker",
     colors: colors,
     value: value,
     clearable: false,
     onChange: onChange,
-    disableCustomColors: disableCustomColors
+    disableCustomColors: disableCustomColors,
+    enableAlpha: enableAlpha
   }));
 }
 
@@ -40,6 +43,7 @@ function ColorListPicker({
   labels,
   value = [],
   disableCustomColors,
+  enableAlpha,
   onChange
 }) {
   return createElement("div", {
@@ -50,6 +54,7 @@ function ColorListPicker({
     value: value[index],
     colors: colors,
     disableCustomColors: disableCustomColors,
+    enableAlpha: enableAlpha,
     onChange: newColor => {
       const newColors = value.slice();
       newColors[index] = newColor;

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-list-picker/index.js"],"names":["useState","Button","ColorPalette","Swatch","ColorOption","label","value","colors","disableCustomColors","onChange","isOpen","setIsOpen","prev","ColorListPicker","labels","map","index","newColor","newColors","slice"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,QAAT,QAAyB,oBAAzB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,YAAP,MAAyB,kBAAzB;AACA,OAAOC,MAAP,MAAmB,WAAnB;;AAEA,SAASC,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,IAAwBX,QAAQ,CAAE,KAAF,CAAtC;AACA,SACC,8BACC,cAAC,MAAD;AACC,IAAA,SAAS,EAAC,6CADX;AAEC,IAAA,IAAI,EAAG,cAAC,MAAD;AAAQ,MAAA,IAAI,EAAGM;AAAf,MAFR;AAGC,IAAA,OAAO,EAAG,MAAMK,SAAS,CAAIC,IAAF,IAAY,CAAEA,IAAhB;AAH1B,KAKGP,KALH,CADD,EAQGK,MAAM,IACP,cAAC,YAAD;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,cAAC,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;;AAED,eAAeL,eAAf","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":["useState","Button","ColorPalette","Swatch","ColorOption","label","value","colors","disableCustomColors","enableAlpha","onChange","isOpen","setIsOpen","prev","ColorListPicker","labels","map","index","newColor","newColors","slice"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,QAAT,QAAyB,oBAAzB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,YAAP,MAAyB,kBAAzB;AACA,OAAOC,MAAP,MAAmB,WAAnB;;AAEA,SAASC,WAAT,CAAsB;AACrBC,EAAAA,KADqB;AAErBC,EAAAA,KAFqB;AAGrBC,EAAAA,MAHqB;AAIrBC,EAAAA,mBAJqB;AAKrBC,EAAAA,WALqB;AAMrBC,EAAAA;AANqB,CAAtB,EAOI;AACH,QAAM,CAAEC,MAAF,EAAUC,SAAV,IAAwBZ,QAAQ,CAAE,KAAF,CAAtC;AACA,SACC,8BACC,cAAC,MAAD;AACC,IAAA,SAAS,EAAC,6CADX;AAEC,IAAA,IAAI,EAAG,cAAC,MAAD;AAAQ,MAAA,IAAI,EAAGM;AAAf,MAFR;AAGC,IAAA,OAAO,EAAG,MAAMM,SAAS,CAAIC,IAAF,IAAY,CAAEA,IAAhB;AAH1B,KAKGR,KALH,CADD,EAQGM,MAAM,IACP,cAAC,YAAD;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,CAA0B;AACzBP,EAAAA,MADyB;AAEzBQ,EAAAA,MAFyB;AAGzBT,EAAAA,KAAK,GAAG,EAHiB;AAIzBE,EAAAA,mBAJyB;AAKzBC,EAAAA,WALyB;AAMzBC,EAAAA;AANyB,CAA1B,EAOI;AACH,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGK,MAAM,CAACC,GAAP,CAAY,CAAEX,KAAF,EAASY,KAAT,KACb,cAAC,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;;AAED,eAAeL,eAAf","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-module/color-palette/index.js

@@ -1,4 +1,4 @@
-import { createElement, Fragment } from "@wordpress/element";
+import { createElement } from "@wordpress/element";
 
 /**
  * External dependencies
@@ -17,18 +17,21 @@ import { useCallback, useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 
+import Dropdown from '../dropdown';
 import { ColorPicker } from '../color-picker';
 import CircularOptionPicker from '../circular-option-picker';
+import { VStack } from '../v-stack';
+import { ColorHeading } from './styles';
 extend([namesPlugin, a11yPlugin]);
-export default function ColorPalette({
-  clearable = true,
+
+function SinglePalette({
   className,
+  clearColor,
   colors,
-  disableCustomColors = false,
   onChange,
-  value
+  value,
+  actions
 }) {
-  const clearColor = useCallback(() => onChange(undefined), [onChange]);
   const colorOptions = useMemo(() => {
     return map(colors, ({
       color,
@@ -54,27 +57,87 @@ export default function ColorPalette({
       });
     });
   }, [colors, value, onChange, clearColor]);
+  return createElement(CircularOptionPicker, {
+    className: className,
+    options: colorOptions,
+    actions: actions
+  });
+}
+
+function MultiplePalettes({
+  className,
+  clearColor,
+  colors,
+  onChange,
+  value,
+  actions
+}) {
+  return createElement(VStack, {
+    spacing: 3,
+    className: className
+  }, colors.map(({
+    name,
+    colors: colorPalette
+  }, index) => {
+    return createElement(VStack, {
+      spacing: 2,
+      key: index
+    }, createElement(ColorHeading, null, name), createElement(SinglePalette, {
+      clearColor: clearColor,
+      colors: colorPalette,
+      onChange: onChange,
+      value: value,
+      actions: colors.length === index + 1 ? actions : null
+    }));
+  }));
+}
+
+export default function ColorPalette({
+  clearable = true,
+  className,
+  colors,
+  disableCustomColors = false,
+  enableAlpha,
+  onChange,
+  value,
+  __experimentalHasMultipleOrigins = false
+}) {
+  const clearColor = useCallback(() => onChange(undefined), [onChange]);
+  const Component = __experimentalHasMultipleOrigins ? MultiplePalettes : SinglePalette;
 
   const renderCustomColorPicker = () => createElement(ColorPicker, {
     color: value,
-    onChange: color => onChange(color)
+    onChange: color => onChange(color),
+    enableAlpha: enableAlpha
   });
 
-  return createElement(CircularOptionPicker, {
-    className: className,
-    options: colorOptions,
-    actions: createElement(Fragment, null, !disableCustomColors && createElement(CircularOptionPicker.DropdownLinkAction, {
-      dropdownProps: {
-        renderContent: renderCustomColorPicker,
-        contentClassName: 'components-color-palette__picker'
-      },
-      buttonProps: {
-        'aria-label': __('Custom color picker')
-      },
-      linkText: __('Custom color')
-    }), !!clearable && createElement(CircularOptionPicker.ButtonAction, {
+  return createElement(VStack, {
+    spacing: 3,
+    className: className
+  }, !disableCustomColors && createElement(Dropdown, {
+    renderContent: renderCustomColorPicker,
+    renderToggle: ({
+      isOpen,
+      onToggle
+    }) => createElement("button", {
+      className: "components-color-palette__custom-color",
+      "aria-expanded": isOpen,
+      "aria-haspopup": "true",
+      onClick: onToggle,
+      "aria-label": __('Custom color picker'),
+      style: {
+        background: value
+      }
+    }, value)
+  }), createElement(Component, {
+    clearable: clearable,
+    clearColor: clearColor,
+    colors: colors,
+    onChange: onChange,
+    value: value,
+    actions: !!clearable && createElement(CircularOptionPicker.ButtonAction, {
       onClick: clearColor
-    }, __('Clear')))
-  });
+    }, __('Clear'))
+  }));
 }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-palette/index.js"],"names":["map","colord","extend","namesPlugin","a11yPlugin","__","sprintf","useCallback","useMemo","ColorPicker","CircularOptionPicker","ColorPalette","clearable","className","colors","disableCustomColors","onChange","value","clearColor","undefined","colorOptions","color","name","colordColor","fill","contrast","backgroundColor","renderCustomColorPicker","renderContent","contentClassName"],"mappings":"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","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":["map","colord","extend","namesPlugin","a11yPlugin","__","sprintf","useCallback","useMemo","Dropdown","ColorPicker","CircularOptionPicker","VStack","ColorHeading","SinglePalette","className","clearColor","colors","onChange","value","actions","colorOptions","color","name","colordColor","fill","contrast","backgroundColor","MultiplePalettes","colorPalette","index","length","ColorPalette","clearable","disableCustomColors","enableAlpha","__experimentalHasMultipleOrigins","undefined","Component","renderCustomColorPicker","isOpen","onToggle","background"],"mappings":"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","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"]}

package/build-module/color-palette/styles.js

@@ -0,0 +1,27 @@
+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)."; }
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+import { Heading } from '../heading';
+export const ColorHeading = /*#__PURE__*/_styled(Heading, process.env.NODE_ENV === "production" ? {
+  target: "e1uu5br00"
+} : {
+  target: "e1uu5br00",
+  label: "ColorHeading"
+})(process.env.NODE_ENV === "production" ? {
+  name: "13lxv2o",
+  styles: "text-transform:uppercase;line-height:24px;font-weight:500;&&&{font-size:11px;margin-bottom:0;}"
+} : {
+  name: "13lxv2o",
+  styles: "text-transform:uppercase;line-height:24px;font-weight:500;&&&{font-size:11px;margin-bottom:0;}",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY29sb3ItcGFsZXR0ZS9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVTZDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY29sb3ItcGFsZXR0ZS9zdHlsZXMuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IEhlYWRpbmcgfSBmcm9tICcuLi9oZWFkaW5nJztcblxuZXhwb3J0IGNvbnN0IENvbG9ySGVhZGluZyA9IHN0eWxlZCggSGVhZGluZyApYFxuXHR0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuXHRsaW5lLWhlaWdodDogMjRweDtcblx0Zm9udC13ZWlnaHQ6IDUwMDtcblx0JiYmIHtcblx0XHRmb250LXNpemU6IDExcHg7XG5cdFx0bWFyZ2luLWJvdHRvbTogMDtcblx0fVxuYDtcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+//# sourceMappingURL=styles.js.map

package/build-module/color-palette/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/color-palette/styles.js"],"names":["Heading","ColorHeading"],"mappings":";;;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,OAAT,QAAwB,YAAxB;AAEA,OAAO,MAAMC,YAAY,GAAG,qBAAQD,OAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport { Heading } from '../heading';\n\nexport const ColorHeading = styled( Heading )`\n\ttext-transform: uppercase;\n\tline-height: 24px;\n\tfont-weight: 500;\n\t&&& {\n\t\tfont-size: 11px;\n\t\tmargin-bottom: 0;\n\t}\n`;\n"]}

package/build-module/color-picker/component.js

@@ -14,7 +14,6 @@ import namesPlugin from 'colord/plugins/names';
 
 import { useState, useMemo } from '@wordpress/element';
 import { settings } from '@wordpress/icons';
-import { useDebounce } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
@@ -27,7 +26,6 @@ import { ColorfulWrapper, SelectControl, AuxiliaryColorArtefactWrapper, DetailsC
 import { ColorDisplay } from './color-display';
 import { ColorInput } from './color-input';
 import { Picker } from './picker';
-import { useControlledValue } from '../utils/hooks';
 extend([namesPlugin]);
 const options = [{
   label: 'RGB',
@@ -43,26 +41,19 @@ const options = [{
 const ColorPicker = (props, forwardedRef) => {
   const {
     enableAlpha = false,
-    color: colorProp,
+    color,
     onChange,
-    defaultValue,
+    defaultValue = '#fff',
     copyFormat,
     ...divProps
-  } = useContextSystem(props, 'ColorPicker');
-  const [color, setColor] = useControlledValue({
-    onChange,
-    value: colorProp,
-    defaultValue
-  }); // Use a safe default value for the color and remove the possibility of `undefined`.
+  } = useContextSystem(props, 'ColorPicker'); // Use a safe default value for the color and remove the possibility of `undefined`.
 
   const safeColordColor = useMemo(() => {
-    return color ? colord(color) : colord('#fff');
-  }, [color]); // Debounce to prevent rapid changes from conflicting with one another.
-
-  const debouncedSetColor = useDebounce(setColor);
+    return color ? colord(color) : colord(defaultValue);
+  }, [color, defaultValue]);
   const handleChange = useCallback(nextValue => {
-    debouncedSetColor(nextValue.toHex());
-  }, [debouncedSetColor]);
+    onChange(nextValue.toHex());
+  }, [onChange]);
   const [showInputs, setShowInputs] = useState(false);
   const [colorType, setColorType] = useState(copyFormat || 'hex');
   return createElement(ColorfulWrapper, _extends({

package/build-module/color-picker/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-picker/component.tsx"],"names":["useCallback","colord","extend","namesPlugin","useState","useMemo","settings","useDebounce","__","useContextSystem","contextConnect","HStack","Spacer","ColorfulWrapper","SelectControl","AuxiliaryColorArtefactWrapper","DetailsControlButton","ColorDisplay","ColorInput","Picker","useControlledValue","options","label","value","ColorPicker","props","forwardedRef","enableAlpha","color","colorProp","onChange","defaultValue","copyFormat","divProps","setColor","safeColordColor","debouncedSetColor","handleChange","nextValue","toHex","showInputs","setShowInputs","colorType","setColorType","nextColorType","ConnectedColorPicker"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA,SAAcA,WAAd,QAAiC,OAAjC;AACA,SAASC,MAAT,EAAiBC,MAAjB,QAAuC,QAAvC;AACA,OAAOC,WAAP,MAAwB,sBAAxB;AAEA;AACA;AACA;;AACA,SAASC,QAAT,EAAmBC,OAAnB,QAAkC,oBAAlC;AACA,SAASC,QAAT,QAAyB,kBAAzB;AACA,SAASC,WAAT,QAA4B,oBAA5B;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,SACCC,gBADD,EAECC,cAFD,QAIO,eAJP;AAKA,SAASC,MAAT,QAAuB,YAAvB;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SACCC,eADD,EAECC,aAFD,EAGCC,6BAHD,EAICC,oBAJD,QAKO,UALP;AAMA,SAASC,YAAT,QAA6B,iBAA7B;AACA,SAASC,UAAT,QAA2B,eAA3B;AACA,SAASC,MAAT,QAAuB,UAAvB;AACA,SAASC,kBAAT,QAAmC,gBAAnC;AAIAlB,MAAM,CAAE,CAAEC,WAAF,CAAF,CAAN;AAUA,MAAMkB,OAAO,GAAG,CACf;AAAEC,EAAAA,KAAK,EAAE,KAAT;AAAgBC,EAAAA,KAAK,EAAE;AAAvB,CADe,EAEf;AAAED,EAAAA,KAAK,EAAE,KAAT;AAAgBC,EAAAA,KAAK,EAAE;AAAvB,CAFe,EAGf;AAAED,EAAAA,KAAK,EAAE,KAAT;AAAgBC,EAAAA,KAAK,EAAE;AAAvB,CAHe,CAAhB;;AAMA,MAAMC,WAAW,GAAG,CACnBC,KADmB,EAEnBC,YAFmB,KAGf;AACJ,QAAM;AACLC,IAAAA,WAAW,GAAG,KADT;AAELC,IAAAA,KAAK,EAAEC,SAFF;AAGLC,IAAAA,QAHK;AAILC,IAAAA,YAJK;AAKLC,IAAAA,UALK;AAML,OAAGC;AANE,MAOFxB,gBAAgB,CAAEgB,KAAF,EAAS,aAAT,CAPpB;AASA,QAAM,CAAEG,KAAF,EAASM,QAAT,IAAsBd,kBAAkB,CAAE;AAC/CU,IAAAA,QAD+C;AAE/CP,IAAAA,KAAK,EAAEM,SAFwC;AAG/CE,IAAAA;AAH+C,GAAF,CAA9C,CAVI,CAgBJ;;AACA,QAAMI,eAAe,GAAG9B,OAAO,CAAE,MAAM;AACtC,WAAOuB,KAAK,GAAG3B,MAAM,CAAE2B,KAAF,CAAT,GAAqB3B,MAAM,CAAE,MAAF,CAAvC;AACA,GAF8B,EAE5B,CAAE2B,KAAF,CAF4B,CAA/B,CAjBI,CAqBJ;;AACA,QAAMQ,iBAAiB,GAAG7B,WAAW,CAAE2B,QAAF,CAArC;AAEA,QAAMG,YAAY,GAAGrC,WAAW,CAC7BsC,SAAF,IAAyB;AACxBF,IAAAA,iBAAiB,CAAEE,SAAS,CAACC,KAAV,EAAF,CAAjB;AACA,GAH8B,EAI/B,CAAEH,iBAAF,CAJ+B,CAAhC;AAOA,QAAM,CAAEI,UAAF,EAAcC,aAAd,IAAgCrC,QAAQ,CAAa,KAAb,CAA9C;AACA,QAAM,CAAEsC,SAAF,EAAaC,YAAb,IAA8BvC,QAAQ,CAC3C4B,UAAU,IAAI,KAD6B,CAA5C;AAIA,SACC,cAAC,eAAD;AAAiB,IAAA,GAAG,EAAGN;AAAvB,KAA2CO,QAA3C,GACC,cAAC,MAAD;AACC,IAAA,QAAQ,EAAGI,YADZ;AAEC,IAAA,KAAK,EAAGF,eAFT;AAGC,IAAA,WAAW,EAAGR;AAHf,IADD,EAMC,cAAC,6BAAD,QACC,cAAC,MAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACGa,UAAU,GACX,cAAC,aAAD;AACC,IAAA,OAAO,EAAGnB,OADX;AAEC,IAAA,KAAK,EAAGqB,SAFT;AAGC,IAAA,QAAQ,EAAKE,aAAF,IACVD,YAAY,CAAEC,aAAF,CAJd;AAMC,IAAA,KAAK,EAAGpC,EAAE,CAAE,cAAF,CANX;AAOC,IAAA,mBAAmB;AAPpB,IADW,GAWX,cAAC,YAAD;AACC,IAAA,KAAK,EAAG2B,eADT;AAEC,IAAA,SAAS,EAAGH,UAAU,IAAIU,SAF3B;AAGC,IAAA,WAAW,EAAGf;AAHf,IAZF,EAkBC,cAAC,oBAAD;AACC,IAAA,OAAO,MADR;AAEC,IAAA,OAAO,EAAG,MAAMc,aAAa,CAAE,CAAED,UAAJ,CAF9B;AAGC,IAAA,IAAI,EAAGlC,QAHR;AAIC,IAAA,SAAS,EAAGkC,UAJb;AAKC,IAAA,KAAK,EACJA,UAAU,GACPhC,EAAE,CAAE,sBAAF,CADK,GAEPA,EAAE,CAAE,sBAAF;AARP,IAlBD,CADD,EA+BC,cAAC,MAAD;AAAQ,IAAA,MAAM,EAAG;AAAjB,IA/BD,EAgCGgC,UAAU,IACX,cAAC,UAAD;AACC,IAAA,SAAS,EAAGE,SADb;AAEC,IAAA,KAAK,EAAGP,eAFT;AAGC,IAAA,QAAQ,EAAGE,YAHZ;AAIC,IAAA,WAAW,EAAGV;AAJf,IAjCF,CAND,CADD;AAkDA,CAzFD;;AA2FA,MAAMkB,oBAAoB,GAAGnC,cAAc,CAAEc,WAAF,EAAe,aAAf,CAA3C;AAEA,eAAeqB,oBAAf","sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport { Ref, useCallback } from 'react';\nimport { colord, extend, Colord } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useMemo } from '@wordpress/element';\nimport { settings } from '@wordpress/icons';\nimport { useDebounce } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport {\n\tuseContextSystem,\n\tcontextConnect,\n\tWordPressComponentProps,\n} from '../ui/context';\nimport { HStack } from '../h-stack';\nimport { Spacer } from '../spacer';\nimport {\n\tColorfulWrapper,\n\tSelectControl,\n\tAuxiliaryColorArtefactWrapper,\n\tDetailsControlButton,\n} from './styles';\nimport { ColorDisplay } from './color-display';\nimport { ColorInput } from './color-input';\nimport { Picker } from './picker';\nimport { useControlledValue } from '../utils/hooks';\n\nimport type { ColorType } from './types';\n\nextend( [ namesPlugin ] );\n\nexport interface ColorPickerProps {\n\tenableAlpha?: boolean;\n\tcolor?: string;\n\tonChange?: ( color: string ) => void;\n\tdefaultValue?: string;\n\tcopyFormat?: ColorType;\n}\n\nconst options = [\n\t{ label: 'RGB', value: 'rgb' as const },\n\t{ label: 'HSL', value: 'hsl' as const },\n\t{ label: 'Hex', value: 'hex' as const },\n];\n\nconst ColorPicker = (\n\tprops: WordPressComponentProps< ColorPickerProps, 'div', false >,\n\tforwardedRef: Ref< any >\n) => {\n\tconst {\n\t\tenableAlpha = false,\n\t\tcolor: colorProp,\n\t\tonChange,\n\t\tdefaultValue,\n\t\tcopyFormat,\n\t\t...divProps\n\t} = useContextSystem( props, 'ColorPicker' );\n\n\tconst [ color, setColor ] = useControlledValue( {\n\t\tonChange,\n\t\tvalue: colorProp,\n\t\tdefaultValue,\n\t} );\n\n\t// Use a safe default value for the color and remove the possibility of `undefined`.\n\tconst safeColordColor = useMemo( () => {\n\t\treturn color ? colord( color ) : colord( '#fff' );\n\t}, [ color ] );\n\n\t// Debounce to prevent rapid changes from conflicting with one another.\n\tconst debouncedSetColor = useDebounce( setColor );\n\n\tconst handleChange = useCallback(\n\t\t( nextValue: Colord ) => {\n\t\t\tdebouncedSetColor( nextValue.toHex() );\n\t\t},\n\t\t[ debouncedSetColor ]\n\t);\n\n\tconst [ showInputs, setShowInputs ] = useState< boolean >( false );\n\tconst [ colorType, setColorType ] = useState< ColorType >(\n\t\tcopyFormat || 'hex'\n\t);\n\n\treturn (\n\t\t<ColorfulWrapper ref={ forwardedRef } { ...divProps }>\n\t\t\t<Picker\n\t\t\t\tonChange={ handleChange }\n\t\t\t\tcolor={ safeColordColor }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t\t<AuxiliaryColorArtefactWrapper>\n\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t{ showInputs ? (\n\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\toptions={ options }\n\t\t\t\t\t\t\tvalue={ colorType }\n\t\t\t\t\t\t\tonChange={ ( nextColorType ) =>\n\t\t\t\t\t\t\t\tsetColorType( nextColorType as ColorType )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tlabel={ __( 'Color format' ) }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<ColorDisplay\n\t\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\t\tcolorType={ copyFormat || colorType }\n\t\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t<DetailsControlButton\n\t\t\t\t\t\tisSmall\n\t\t\t\t\t\tonClick={ () => setShowInputs( ! showInputs ) }\n\t\t\t\t\t\ticon={ settings }\n\t\t\t\t\t\tisPressed={ showInputs }\n\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\tshowInputs\n\t\t\t\t\t\t\t\t? __( 'Hide detailed inputs' )\n\t\t\t\t\t\t\t\t: __( 'Show detailed inputs' )\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</HStack>\n\t\t\t\t<Spacer margin={ 4 } />\n\t\t\t\t{ showInputs && (\n\t\t\t\t\t<ColorInput\n\t\t\t\t\t\tcolorType={ colorType }\n\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\tonChange={ handleChange }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</AuxiliaryColorArtefactWrapper>\n\t\t</ColorfulWrapper>\n\t);\n};\n\nconst ConnectedColorPicker = contextConnect( ColorPicker, 'ColorPicker' );\n\nexport default ConnectedColorPicker;\n"]}
+{"version":3,"sources":["@wordpress/components/src/color-picker/component.tsx"],"names":["useCallback","colord","extend","namesPlugin","useState","useMemo","settings","__","useContextSystem","contextConnect","HStack","Spacer","ColorfulWrapper","SelectControl","AuxiliaryColorArtefactWrapper","DetailsControlButton","ColorDisplay","ColorInput","Picker","options","label","value","ColorPicker","props","forwardedRef","enableAlpha","color","onChange","defaultValue","copyFormat","divProps","safeColordColor","handleChange","nextValue","toHex","showInputs","setShowInputs","colorType","setColorType","nextColorType","ConnectedColorPicker"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport { Ref, useCallback } from 'react';\nimport { colord, extend, Colord } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useMemo } from '@wordpress/element';\nimport { settings } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport {\n\tuseContextSystem,\n\tcontextConnect,\n\tWordPressComponentProps,\n} from '../ui/context';\nimport { HStack } from '../h-stack';\nimport { Spacer } from '../spacer';\nimport {\n\tColorfulWrapper,\n\tSelectControl,\n\tAuxiliaryColorArtefactWrapper,\n\tDetailsControlButton,\n} from './styles';\nimport { ColorDisplay } from './color-display';\nimport { ColorInput } from './color-input';\nimport { Picker } from './picker';\n\nimport type { ColorType } from './types';\n\nextend( [ namesPlugin ] );\n\nexport interface ColorPickerProps {\n\tenableAlpha?: boolean;\n\tcolor?: string;\n\tonChange?: ( color: string ) => void;\n\tdefaultValue?: string;\n\tcopyFormat?: ColorType;\n}\n\nconst options = [\n\t{ label: 'RGB', value: 'rgb' as const },\n\t{ label: 'HSL', value: 'hsl' as const },\n\t{ label: 'Hex', value: 'hex' as const },\n];\n\nconst ColorPicker = (\n\tprops: WordPressComponentProps< ColorPickerProps, 'div', false >,\n\tforwardedRef: Ref< any >\n) => {\n\tconst {\n\t\tenableAlpha = false,\n\t\tcolor,\n\t\tonChange,\n\t\tdefaultValue = '#fff',\n\t\tcopyFormat,\n\t\t...divProps\n\t} = useContextSystem( props, 'ColorPicker' );\n\n\t// Use a safe default value for the color and remove the possibility of `undefined`.\n\tconst safeColordColor = useMemo( () => {\n\t\treturn color ? colord( color ) : colord( defaultValue );\n\t}, [ color, defaultValue ] );\n\n\tconst handleChange = useCallback(\n\t\t( nextValue: Colord ) => {\n\t\t\tonChange( nextValue.toHex() );\n\t\t},\n\t\t[ onChange ]\n\t);\n\n\tconst [ showInputs, setShowInputs ] = useState< boolean >( false );\n\tconst [ colorType, setColorType ] = useState< ColorType >(\n\t\tcopyFormat || 'hex'\n\t);\n\n\treturn (\n\t\t<ColorfulWrapper ref={ forwardedRef } { ...divProps }>\n\t\t\t<Picker\n\t\t\t\tonChange={ handleChange }\n\t\t\t\tcolor={ safeColordColor }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t\t<AuxiliaryColorArtefactWrapper>\n\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t{ showInputs ? (\n\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\toptions={ options }\n\t\t\t\t\t\t\tvalue={ colorType }\n\t\t\t\t\t\t\tonChange={ ( nextColorType ) =>\n\t\t\t\t\t\t\t\tsetColorType( nextColorType as ColorType )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tlabel={ __( 'Color format' ) }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<ColorDisplay\n\t\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\t\tcolorType={ copyFormat || colorType }\n\t\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t<DetailsControlButton\n\t\t\t\t\t\tisSmall\n\t\t\t\t\t\tonClick={ () => setShowInputs( ! showInputs ) }\n\t\t\t\t\t\ticon={ settings }\n\t\t\t\t\t\tisPressed={ showInputs }\n\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\tshowInputs\n\t\t\t\t\t\t\t\t? __( 'Hide detailed inputs' )\n\t\t\t\t\t\t\t\t: __( 'Show detailed inputs' )\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</HStack>\n\t\t\t\t<Spacer margin={ 4 } />\n\t\t\t\t{ showInputs && (\n\t\t\t\t\t<ColorInput\n\t\t\t\t\t\tcolorType={ colorType }\n\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\tonChange={ handleChange }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</AuxiliaryColorArtefactWrapper>\n\t\t</ColorfulWrapper>\n\t);\n};\n\nconst ConnectedColorPicker = contextConnect( ColorPicker, 'ColorPicker' );\n\nexport default ConnectedColorPicker;\n"]}

package/build-module/color-picker/picker.js

@@ -3,7 +3,7 @@ import { createElement } from "@wordpress/element";
 /**
  * External dependencies
  */
-import { HslColorPicker, HslaColorPicker } from 'react-colorful';
+import { RgbStringColorPicker, RgbaStringColorPicker } from 'react-colorful';
 import { colord } from 'colord';
 /**
  * WordPress dependencies
@@ -15,10 +15,10 @@ export const Picker = ({
   enableAlpha,
   onChange
 }) => {
-  const Component = enableAlpha ? HslaColorPicker : HslColorPicker;
-  const hslColor = useMemo(() => color.toHsl(), [color]);
+  const Component = enableAlpha ? RgbaStringColorPicker : RgbStringColorPicker;
+  const rgbColor = useMemo(() => color.toRgbString(), [color]);
   return createElement(Component, {
-    color: hslColor,
+    color: rgbColor,
     onChange: nextColor => {
       onChange(colord(nextColor));
     }

package/build-module/color-picker/picker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-picker/picker.tsx"],"names":["HslColorPicker","HslaColorPicker","colord","useMemo","Picker","color","enableAlpha","onChange","Component","hslColor","toHsl","nextColor"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,cAAT,EAAyBC,eAAzB,QAAgD,gBAAhD;AACA,SAASC,MAAT,QAA+B,QAA/B;AAEA;AACA;AACA;;AACA,SAASC,OAAT,QAAwB,oBAAxB;AAOA,OAAO,MAAMC,MAAM,GAAG,CAAE;AAAEC,EAAAA,KAAF;AAASC,EAAAA,WAAT;AAAsBC,EAAAA;AAAtB,CAAF,KAAqD;AAC1E,QAAMC,SAAS,GAAGF,WAAW,GAAGL,eAAH,GAAqBD,cAAlD;AACA,QAAMS,QAAQ,GAAGN,OAAO,CAAE,MAAME,KAAK,CAACK,KAAN,EAAR,EAAuB,CAAEL,KAAF,CAAvB,CAAxB;AAEA,SACC,cAAC,SAAD;AACC,IAAA,KAAK,EAAGI,QADT;AAEC,IAAA,QAAQ,EAAKE,SAAF,IAAiB;AAC3BJ,MAAAA,QAAQ,CAAEL,MAAM,CAAES,SAAF,CAAR,CAAR;AACA;AAJF,IADD;AAQA,CAZM","sourcesContent":["/**\n * External dependencies\n */\nimport { HslColorPicker, HslaColorPicker } from 'react-colorful';\nimport { colord, Colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\ninterface PickerProps {\n\tcolor: Colord;\n\tenableAlpha: boolean;\n\tonChange: ( nextColor: Colord ) => void;\n}\n\nexport const Picker = ( { color, enableAlpha, onChange }: PickerProps ) => {\n\tconst Component = enableAlpha ? HslaColorPicker : HslColorPicker;\n\tconst hslColor = useMemo( () => color.toHsl(), [ color ] );\n\n\treturn (\n\t\t<Component\n\t\t\tcolor={ hslColor }\n\t\t\tonChange={ ( nextColor ) => {\n\t\t\t\tonChange( colord( nextColor ) );\n\t\t\t} }\n\t\t/>\n\t);\n};\n"]}
+{"version":3,"sources":["@wordpress/components/src/color-picker/picker.tsx"],"names":["RgbStringColorPicker","RgbaStringColorPicker","colord","useMemo","Picker","color","enableAlpha","onChange","Component","rgbColor","toRgbString","nextColor"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,oBAAT,EAA+BC,qBAA/B,QAA4D,gBAA5D;AACA,SAASC,MAAT,QAA+B,QAA/B;AAEA;AACA;AACA;;AACA,SAASC,OAAT,QAAwB,oBAAxB;AAOA,OAAO,MAAMC,MAAM,GAAG,CAAE;AAAEC,EAAAA,KAAF;AAASC,EAAAA,WAAT;AAAsBC,EAAAA;AAAtB,CAAF,KAAqD;AAC1E,QAAMC,SAAS,GAAGF,WAAW,GAC1BL,qBAD0B,GAE1BD,oBAFH;AAGA,QAAMS,QAAQ,GAAGN,OAAO,CAAE,MAAME,KAAK,CAACK,WAAN,EAAR,EAA6B,CAAEL,KAAF,CAA7B,CAAxB;AAEA,SACC,cAAC,SAAD;AACC,IAAA,KAAK,EAAGI,QADT;AAEC,IAAA,QAAQ,EAAKE,SAAF,IAAiB;AAC3BJ,MAAAA,QAAQ,CAAEL,MAAM,CAAES,SAAF,CAAR,CAAR;AACA;AAJF,IADD;AAQA,CAdM","sourcesContent":["/**\n * External dependencies\n */\nimport { RgbStringColorPicker, RgbaStringColorPicker } from 'react-colorful';\nimport { colord, Colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\ninterface PickerProps {\n\tcolor: Colord;\n\tenableAlpha: boolean;\n\tonChange: ( nextColor: Colord ) => void;\n}\n\nexport const Picker = ( { color, enableAlpha, onChange }: PickerProps ) => {\n\tconst Component = enableAlpha\n\t\t? RgbaStringColorPicker\n\t\t: RgbStringColorPicker;\n\tconst rgbColor = useMemo( () => color.toRgbString(), [ color ] );\n\n\treturn (\n\t\t<Component\n\t\t\tcolor={ rgbColor }\n\t\t\tonChange={ ( nextColor ) => {\n\t\t\t\tonChange( colord( nextColor ) );\n\t\t\t} }\n\t\t/>\n\t);\n};\n"]}

package/build-module/duotone-picker/custom-duotone-bar.js

@@ -16,7 +16,6 @@ export default function CustomDuotoneBar({
   const controlPoints = getColorStopsFromColors(values);
   return createElement(CustomGradientBar, {
     disableInserter: true,
-    disableAlpha: true,
     background: background,
     hasGradient: hasGradient,
     value: controlPoints,

package/build-module/duotone-picker/custom-duotone-bar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/duotone-picker/custom-duotone-bar.js"],"names":["CustomGradientBar","getColorStopsFromColors","getGradientFromCSSColors","getColorsFromColorStops","PLACEHOLDER_VALUES","CustomDuotoneBar","value","onChange","hasGradient","values","background","controlPoints","newColorStops","newValue"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,iBAAP,MAA8B,wBAA9B;AAEA,SACCC,uBADD,EAECC,wBAFD,EAGCC,uBAHD,QAIO,SAJP;AAMA,MAAMC,kBAAkB,GAAG,CAAE,MAAF,EAAU,MAAV,CAA3B;AAEA,eAAe,SAASC,gBAAT,CAA2B;AAAEC,EAAAA,KAAF;AAASC,EAAAA;AAAT,CAA3B,EAAiD;AAC/D,QAAMC,WAAW,GAAG,CAAC,CAAEF,KAAvB;AACA,QAAMG,MAAM,GAAGD,WAAW,GAAGF,KAAH,GAAWF,kBAArC;AACA,QAAMM,UAAU,GAAGR,wBAAwB,CAAEO,MAAF,CAA3C;AACA,QAAME,aAAa,GAAGV,uBAAuB,CAAEQ,MAAF,CAA7C;AACA,SACC,cAAC,iBAAD;AACC,IAAA,eAAe,MADhB;AAEC,IAAA,YAAY,MAFb;AAGC,IAAA,UAAU,EAAGC,UAHd;AAIC,IAAA,WAAW,EAAGF,WAJf;AAKC,IAAA,KAAK,EAAGG,aALT;AAMC,IAAA,QAAQ,EAAKC,aAAF,IAAqB;AAC/B,YAAMC,QAAQ,GAAGV,uBAAuB,CAAES,aAAF,CAAxC;AACAL,MAAAA,QAAQ,CAAEM,QAAF,CAAR;AACA;AATF,IADD;AAaA","sourcesContent":["/**\n * Internal dependencies\n */\nimport CustomGradientBar from '../custom-gradient-bar';\n\nimport {\n\tgetColorStopsFromColors,\n\tgetGradientFromCSSColors,\n\tgetColorsFromColorStops,\n} from './utils';\n\nconst PLACEHOLDER_VALUES = [ '#333', '#CCC' ];\n\nexport default function CustomDuotoneBar( { value, onChange } ) {\n\tconst hasGradient = !! value;\n\tconst values = hasGradient ? value : PLACEHOLDER_VALUES;\n\tconst background = getGradientFromCSSColors( values );\n\tconst controlPoints = getColorStopsFromColors( values );\n\treturn (\n\t\t<CustomGradientBar\n\t\t\tdisableInserter\n\t\t\tdisableAlpha\n\t\t\tbackground={ background }\n\t\t\thasGradient={ hasGradient }\n\t\t\tvalue={ controlPoints }\n\t\t\tonChange={ ( newColorStops ) => {\n\t\t\t\tconst newValue = getColorsFromColorStops( newColorStops );\n\t\t\t\tonChange( newValue );\n\t\t\t} }\n\t\t/>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/duotone-picker/custom-duotone-bar.js"],"names":["CustomGradientBar","getColorStopsFromColors","getGradientFromCSSColors","getColorsFromColorStops","PLACEHOLDER_VALUES","CustomDuotoneBar","value","onChange","hasGradient","values","background","controlPoints","newColorStops","newValue"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,iBAAP,MAA8B,wBAA9B;AAEA,SACCC,uBADD,EAECC,wBAFD,EAGCC,uBAHD,QAIO,SAJP;AAMA,MAAMC,kBAAkB,GAAG,CAAE,MAAF,EAAU,MAAV,CAA3B;AAEA,eAAe,SAASC,gBAAT,CAA2B;AAAEC,EAAAA,KAAF;AAASC,EAAAA;AAAT,CAA3B,EAAiD;AAC/D,QAAMC,WAAW,GAAG,CAAC,CAAEF,KAAvB;AACA,QAAMG,MAAM,GAAGD,WAAW,GAAGF,KAAH,GAAWF,kBAArC;AACA,QAAMM,UAAU,GAAGR,wBAAwB,CAAEO,MAAF,CAA3C;AACA,QAAME,aAAa,GAAGV,uBAAuB,CAAEQ,MAAF,CAA7C;AACA,SACC,cAAC,iBAAD;AACC,IAAA,eAAe,MADhB;AAEC,IAAA,UAAU,EAAGC,UAFd;AAGC,IAAA,WAAW,EAAGF,WAHf;AAIC,IAAA,KAAK,EAAGG,aAJT;AAKC,IAAA,QAAQ,EAAKC,aAAF,IAAqB;AAC/B,YAAMC,QAAQ,GAAGV,uBAAuB,CAAES,aAAF,CAAxC;AACAL,MAAAA,QAAQ,CAAEM,QAAF,CAAR;AACA;AARF,IADD;AAYA","sourcesContent":["/**\n * Internal dependencies\n */\nimport CustomGradientBar from '../custom-gradient-bar';\n\nimport {\n\tgetColorStopsFromColors,\n\tgetGradientFromCSSColors,\n\tgetColorsFromColorStops,\n} from './utils';\n\nconst PLACEHOLDER_VALUES = [ '#333', '#CCC' ];\n\nexport default function CustomDuotoneBar( { value, onChange } ) {\n\tconst hasGradient = !! value;\n\tconst values = hasGradient ? value : PLACEHOLDER_VALUES;\n\tconst background = getGradientFromCSSColors( values );\n\tconst controlPoints = getColorStopsFromColors( values );\n\treturn (\n\t\t<CustomGradientBar\n\t\t\tdisableInserter\n\t\t\tbackground={ background }\n\t\t\thasGradient={ hasGradient }\n\t\t\tvalue={ controlPoints }\n\t\t\tonChange={ ( newColorStops ) => {\n\t\t\t\tconst newValue = getColorsFromColorStops( newColorStops );\n\t\t\t\tonChange( newValue );\n\t\t\t} }\n\t\t/>\n\t);\n}\n"]}

package/build-module/duotone-picker/duotone-picker.js

@@ -66,6 +66,7 @@ function DuotonePicker({
     colors: colorPalette,
     value: value,
     disableCustomColors: disableCustomColors,
+    enableAlpha: true,
     onChange: newColors => {
       if (!newColors[0]) {
         newColors[0] = defaultDark;