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

package/build/box-control/styles/box-control-visualizer-styles.js

@@ -21,7 +21,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
 } : {
   name: "1webrrd-containerPositionStyles",
   styles: "bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:1;label:containerPositionStyles;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm94LWNvbnRyb2wvc3R5bGVzL2JveC1jb250cm9sLXZpc3VhbGl6ZXItc3R5bGVzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWNXIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm94LWNvbnRyb2wvc3R5bGVzL2JveC1jb250cm9sLXZpc3VhbGl6ZXItc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMsIHJ0bCB9IGZyb20gJy4uLy4uL3V0aWxzJztcblxuY29uc3QgY29udGFpbmVyUG9zaXRpb25TdHlsZXMgPSAoIHsgaXNQb3NpdGlvbkFic29sdXRlIH0gKSA9PiB7XG5cdGlmICggISBpc1Bvc2l0aW9uQWJzb2x1dGUgKSByZXR1cm4gJyc7XG5cblx0cmV0dXJuIGNzc2Bcblx0XHRib3R0b206IDA7XG5cdFx0bGVmdDogMDtcblx0XHRwb2ludGVyLWV2ZW50czogbm9uZTtcblx0XHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdFx0cmlnaHQ6IDA7XG5cdFx0dG9wOiAwO1xuXHRcdHotaW5kZXg6IDE7XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgQ29udGFpbmVyID0gc3R5bGVkLmRpdmBcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHQkeyBjb250YWluZXJQb3NpdGlvblN0eWxlcyB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IFNpZGUgPSBzdHlsZWQuZGl2YFxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRiYWNrZ3JvdW5kOiAkeyBDT0xPUlMuYmx1ZS53b3JkcHJlc3NbIDcwMCBdIH07XG5cdGJhY2tncm91bmQ6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHRmaWx0ZXI6IGJyaWdodG5lc3MoIDEgKTtcblx0b3BhY2l0eTogMDtcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHRwb2ludGVyLWV2ZW50czogbm9uZTtcblx0dHJhbnNpdGlvbjogb3BhY2l0eSAxMjBtcyBsaW5lYXI7XG5cdHotaW5kZXg6IDE7XG5cblx0JHsgKCB7IGlzQWN0aXZlIH0gKSA9PlxuXHRcdGlzQWN0aXZlICYmXG5cdFx0YFxuXHRcdG9wYWNpdHk6IDAuMztcblx0YCB9XG5gO1xuXG5leHBvcnQgY29uc3QgVG9wVmlldyA9IHN0eWxlZCggU2lkZSApYFxuXHR0b3A6IDA7XG5cdGxlZnQ6IDA7XG5cdHJpZ2h0OiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IFJpZ2h0VmlldyA9IHN0eWxlZCggU2lkZSApYFxuXHR0b3A6IDA7XG5cdGJvdHRvbTogMDtcblx0JHsgcnRsKCB7IHJpZ2h0OiAwIH0gKSB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IEJvdHRvbVZpZXcgPSBzdHlsZWQoIFNpZGUgKWBcblx0Ym90dG9tOiAwO1xuXHRsZWZ0OiAwO1xuXHRyaWdodDogMDtcbmA7XG5cbmV4cG9ydCBjb25zdCBMZWZ0VmlldyA9IHN0eWxlZCggU2lkZSApYFxuXHR0b3A6IDA7XG5cdGJvdHRvbTogMDtcblx0JHsgcnRsKCB7IGxlZnQ6IDAgfSApIH07XG5gO1xuIl19 */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm94LWNvbnRyb2wvc3R5bGVzL2JveC1jb250cm9sLXZpc3VhbGl6ZXItc3R5bGVzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWNXIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm94LWNvbnRyb2wvc3R5bGVzL2JveC1jb250cm9sLXZpc3VhbGl6ZXItc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMsIHJ0bCB9IGZyb20gJy4uLy4uL3V0aWxzJztcblxuY29uc3QgY29udGFpbmVyUG9zaXRpb25TdHlsZXMgPSAoIHsgaXNQb3NpdGlvbkFic29sdXRlIH0gKSA9PiB7XG5cdGlmICggISBpc1Bvc2l0aW9uQWJzb2x1dGUgKSByZXR1cm4gJyc7XG5cblx0cmV0dXJuIGNzc2Bcblx0XHRib3R0b206IDA7XG5cdFx0bGVmdDogMDtcblx0XHRwb2ludGVyLWV2ZW50czogbm9uZTtcblx0XHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdFx0cmlnaHQ6IDA7XG5cdFx0dG9wOiAwO1xuXHRcdHotaW5kZXg6IDE7XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgQ29udGFpbmVyID0gc3R5bGVkLmRpdmBcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHQkeyBjb250YWluZXJQb3NpdGlvblN0eWxlcyB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IFNpZGUgPSBzdHlsZWQuZGl2YFxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRiYWNrZ3JvdW5kOiAkeyBDT0xPUlMudWkudGhlbWUgfTtcblx0ZmlsdGVyOiBicmlnaHRuZXNzKCAxICk7XG5cdG9wYWNpdHk6IDA7XG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0cG9pbnRlci1ldmVudHM6IG5vbmU7XG5cdHRyYW5zaXRpb246IG9wYWNpdHkgMTIwbXMgbGluZWFyO1xuXHR6LWluZGV4OiAxO1xuXG5cdCR7ICggeyBpc0FjdGl2ZSB9ICkgPT5cblx0XHRpc0FjdGl2ZSAmJlxuXHRcdGBcblx0XHRvcGFjaXR5OiAwLjM7XG5cdGAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IFRvcFZpZXcgPSBzdHlsZWQoIFNpZGUgKWBcblx0dG9wOiAwO1xuXHRsZWZ0OiAwO1xuXHRyaWdodDogMDtcbmA7XG5cbmV4cG9ydCBjb25zdCBSaWdodFZpZXcgPSBzdHlsZWQoIFNpZGUgKWBcblx0dG9wOiAwO1xuXHRib3R0b206IDA7XG5cdCR7IHJ0bCggeyByaWdodDogMCB9ICkgfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBCb3R0b21WaWV3ID0gc3R5bGVkKCBTaWRlIClgXG5cdGJvdHRvbTogMDtcblx0bGVmdDogMDtcblx0cmlnaHQ6IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgTGVmdFZpZXcgPSBzdHlsZWQoIFNpZGUgKWBcblx0dG9wOiAwO1xuXHRib3R0b206IDA7XG5cdCR7IHJ0bCggeyBsZWZ0OiAwIH0gKSB9O1xuYDtcbiJdfQ== */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
@@ -38,21 +38,21 @@ const Container = (0, _base.default)("div", process.env.NODE_ENV === "production
 } : {
   target: "e1df9b4q5",
   label: "Container"
-})("box-sizing:border-box;position:relative;", containerPositionStyles, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm94LWNvbnRyb2wvc3R5bGVzL2JveC1jb250cm9sLXZpc3VhbGl6ZXItc3R5bGVzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlCbUMiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9ib3gtY29udHJvbC9zdHlsZXMvYm94LWNvbnRyb2wtdmlzdWFsaXplci1zdHlsZXMuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUywgcnRsIH0gZnJvbSAnLi4vLi4vdXRpbHMnO1xuXG5jb25zdCBjb250YWluZXJQb3NpdGlvblN0eWxlcyA9ICggeyBpc1Bvc2l0aW9uQWJzb2x1dGUgfSApID0+IHtcblx0aWYgKCAhIGlzUG9zaXRpb25BYnNvbHV0ZSApIHJldHVybiAnJztcblxuXHRyZXR1cm4gY3NzYFxuXHRcdGJvdHRvbTogMDtcblx0XHRsZWZ0OiAwO1xuXHRcdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHRcdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0XHRyaWdodDogMDtcblx0XHR0b3A6IDA7XG5cdFx0ei1pbmRleDogMTtcblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdCR7IGNvbnRhaW5lclBvc2l0aW9uU3R5bGVzIH07XG5gO1xuXG5leHBvcnQgY29uc3QgU2lkZSA9IHN0eWxlZC5kaXZgXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGJhY2tncm91bmQ6ICR7IENPTE9SUy5ibHVlLndvcmRwcmVzc1sgNzAwIF0gfTtcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLnVpLnRoZW1lIH07XG5cdGZpbHRlcjogYnJpZ2h0bmVzcyggMSApO1xuXHRvcGFjaXR5OiAwO1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHR0cmFuc2l0aW9uOiBvcGFjaXR5IDEyMG1zIGxpbmVhcjtcblx0ei1pbmRleDogMTtcblxuXHQkeyAoIHsgaXNBY3RpdmUgfSApID0+XG5cdFx0aXNBY3RpdmUgJiZcblx0XHRgXG5cdFx0b3BhY2l0eTogMC4zO1xuXHRgIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBUb3BWaWV3ID0gc3R5bGVkKCBTaWRlIClgXG5cdHRvcDogMDtcblx0bGVmdDogMDtcblx0cmlnaHQ6IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgUmlnaHRWaWV3ID0gc3R5bGVkKCBTaWRlIClgXG5cdHRvcDogMDtcblx0Ym90dG9tOiAwO1xuXHQkeyBydGwoIHsgcmlnaHQ6IDAgfSApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQm90dG9tVmlldyA9IHN0eWxlZCggU2lkZSApYFxuXHRib3R0b206IDA7XG5cdGxlZnQ6IDA7XG5cdHJpZ2h0OiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IExlZnRWaWV3ID0gc3R5bGVkKCBTaWRlIClgXG5cdHRvcDogMDtcblx0Ym90dG9tOiAwO1xuXHQkeyBydGwoIHsgbGVmdDogMCB9ICkgfTtcbmA7XG4iXX0= */"));
+})("box-sizing:border-box;position:relative;", containerPositionStyles, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm94LWNvbnRyb2wvc3R5bGVzL2JveC1jb250cm9sLXZpc3VhbGl6ZXItc3R5bGVzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlCbUMiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9ib3gtY29udHJvbC9zdHlsZXMvYm94LWNvbnRyb2wtdmlzdWFsaXplci1zdHlsZXMuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUywgcnRsIH0gZnJvbSAnLi4vLi4vdXRpbHMnO1xuXG5jb25zdCBjb250YWluZXJQb3NpdGlvblN0eWxlcyA9ICggeyBpc1Bvc2l0aW9uQWJzb2x1dGUgfSApID0+IHtcblx0aWYgKCAhIGlzUG9zaXRpb25BYnNvbHV0ZSApIHJldHVybiAnJztcblxuXHRyZXR1cm4gY3NzYFxuXHRcdGJvdHRvbTogMDtcblx0XHRsZWZ0OiAwO1xuXHRcdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHRcdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0XHRyaWdodDogMDtcblx0XHR0b3A6IDA7XG5cdFx0ei1pbmRleDogMTtcblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdCR7IGNvbnRhaW5lclBvc2l0aW9uU3R5bGVzIH07XG5gO1xuXG5leHBvcnQgY29uc3QgU2lkZSA9IHN0eWxlZC5kaXZgXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGJhY2tncm91bmQ6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHRmaWx0ZXI6IGJyaWdodG5lc3MoIDEgKTtcblx0b3BhY2l0eTogMDtcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHRwb2ludGVyLWV2ZW50czogbm9uZTtcblx0dHJhbnNpdGlvbjogb3BhY2l0eSAxMjBtcyBsaW5lYXI7XG5cdHotaW5kZXg6IDE7XG5cblx0JHsgKCB7IGlzQWN0aXZlIH0gKSA9PlxuXHRcdGlzQWN0aXZlICYmXG5cdFx0YFxuXHRcdG9wYWNpdHk6IDAuMztcblx0YCB9XG5gO1xuXG5leHBvcnQgY29uc3QgVG9wVmlldyA9IHN0eWxlZCggU2lkZSApYFxuXHR0b3A6IDA7XG5cdGxlZnQ6IDA7XG5cdHJpZ2h0OiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IFJpZ2h0VmlldyA9IHN0eWxlZCggU2lkZSApYFxuXHR0b3A6IDA7XG5cdGJvdHRvbTogMDtcblx0JHsgcnRsKCB7IHJpZ2h0OiAwIH0gKSB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IEJvdHRvbVZpZXcgPSBzdHlsZWQoIFNpZGUgKWBcblx0Ym90dG9tOiAwO1xuXHRsZWZ0OiAwO1xuXHRyaWdodDogMDtcbmA7XG5cbmV4cG9ydCBjb25zdCBMZWZ0VmlldyA9IHN0eWxlZCggU2lkZSApYFxuXHR0b3A6IDA7XG5cdGJvdHRvbTogMDtcblx0JHsgcnRsKCB7IGxlZnQ6IDAgfSApIH07XG5gO1xuIl19 */"));
 exports.Container = Container;
 const Side = (0, _base.default)("div", process.env.NODE_ENV === "production" ? {
   target: "e1df9b4q4"
 } : {
   target: "e1df9b4q4",
   label: "Side"
-})("box-sizing:border-box;background:", _utils.COLORS.blue.wordpress[700], ";background:", _utils.COLORS.ui.theme, ";filter:brightness( 1 );opacity:0;position:absolute;pointer-events:none;transition:opacity 120ms linear;z-index:1;", _ref3 => {
+})("box-sizing:border-box;background:", _utils.COLORS.ui.theme, ";filter:brightness( 1 );opacity:0;position:absolute;pointer-events:none;transition:opacity 120ms linear;z-index:1;", _ref3 => {
   let {
     isActive
   } = _ref3;
   return isActive && `
 		opacity: 0.3;
 	`;
-}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm94LWNvbnRyb2wvc3R5bGVzL2JveC1jb250cm9sLXZpc3VhbGl6ZXItc3R5bGVzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQStCOEIiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9ib3gtY29udHJvbC9zdHlsZXMvYm94LWNvbnRyb2wtdmlzdWFsaXplci1zdHlsZXMuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUywgcnRsIH0gZnJvbSAnLi4vLi4vdXRpbHMnO1xuXG5jb25zdCBjb250YWluZXJQb3NpdGlvblN0eWxlcyA9ICggeyBpc1Bvc2l0aW9uQWJzb2x1dGUgfSApID0+IHtcblx0aWYgKCAhIGlzUG9zaXRpb25BYnNvbHV0ZSApIHJldHVybiAnJztcblxuXHRyZXR1cm4gY3NzYFxuXHRcdGJvdHRvbTogMDtcblx0XHRsZWZ0OiAwO1xuXHRcdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHRcdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0XHRyaWdodDogMDtcblx0XHR0b3A6IDA7XG5cdFx0ei1pbmRleDogMTtcblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdCR7IGNvbnRhaW5lclBvc2l0aW9uU3R5bGVzIH07XG5gO1xuXG5leHBvcnQgY29uc3QgU2lkZSA9IHN0eWxlZC5kaXZgXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGJhY2tncm91bmQ6ICR7IENPTE9SUy5ibHVlLndvcmRwcmVzc1sgNzAwIF0gfTtcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLnVpLnRoZW1lIH07XG5cdGZpbHRlcjogYnJpZ2h0bmVzcyggMSApO1xuXHRvcGFjaXR5OiAwO1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHR0cmFuc2l0aW9uOiBvcGFjaXR5IDEyMG1zIGxpbmVhcjtcblx0ei1pbmRleDogMTtcblxuXHQkeyAoIHsgaXNBY3RpdmUgfSApID0+XG5cdFx0aXNBY3RpdmUgJiZcblx0XHRgXG5cdFx0b3BhY2l0eTogMC4zO1xuXHRgIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBUb3BWaWV3ID0gc3R5bGVkKCBTaWRlIClgXG5cdHRvcDogMDtcblx0bGVmdDogMDtcblx0cmlnaHQ6IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgUmlnaHRWaWV3ID0gc3R5bGVkKCBTaWRlIClgXG5cdHRvcDogMDtcblx0Ym90dG9tOiAwO1xuXHQkeyBydGwoIHsgcmlnaHQ6IDAgfSApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQm90dG9tVmlldyA9IHN0eWxlZCggU2lkZSApYFxuXHRib3R0b206IDA7XG5cdGxlZnQ6IDA7XG5cdHJpZ2h0OiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IExlZnRWaWV3ID0gc3R5bGVkKCBTaWRlIClgXG5cdHRvcDogMDtcblx0Ym90dG9tOiAwO1xuXHQkeyBydGwoIHsgbGVmdDogMCB9ICkgfTtcbmA7XG4iXX0= */"));
+}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm94LWNvbnRyb2wvc3R5bGVzL2JveC1jb250cm9sLXZpc3VhbGl6ZXItc3R5bGVzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQStCOEIiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9ib3gtY29udHJvbC9zdHlsZXMvYm94LWNvbnRyb2wtdmlzdWFsaXplci1zdHlsZXMuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUywgcnRsIH0gZnJvbSAnLi4vLi4vdXRpbHMnO1xuXG5jb25zdCBjb250YWluZXJQb3NpdGlvblN0eWxlcyA9ICggeyBpc1Bvc2l0aW9uQWJzb2x1dGUgfSApID0+IHtcblx0aWYgKCAhIGlzUG9zaXRpb25BYnNvbHV0ZSApIHJldHVybiAnJztcblxuXHRyZXR1cm4gY3NzYFxuXHRcdGJvdHRvbTogMDtcblx0XHRsZWZ0OiAwO1xuXHRcdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHRcdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0XHRyaWdodDogMDtcblx0XHR0b3A6IDA7XG5cdFx0ei1pbmRleDogMTtcblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdCR7IGNvbnRhaW5lclBvc2l0aW9uU3R5bGVzIH07XG5gO1xuXG5leHBvcnQgY29uc3QgU2lkZSA9IHN0eWxlZC5kaXZgXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGJhY2tncm91bmQ6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHRmaWx0ZXI6IGJyaWdodG5lc3MoIDEgKTtcblx0b3BhY2l0eTogMDtcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHRwb2ludGVyLWV2ZW50czogbm9uZTtcblx0dHJhbnNpdGlvbjogb3BhY2l0eSAxMjBtcyBsaW5lYXI7XG5cdHotaW5kZXg6IDE7XG5cblx0JHsgKCB7IGlzQWN0aXZlIH0gKSA9PlxuXHRcdGlzQWN0aXZlICYmXG5cdFx0YFxuXHRcdG9wYWNpdHk6IDAuMztcblx0YCB9XG5gO1xuXG5leHBvcnQgY29uc3QgVG9wVmlldyA9IHN0eWxlZCggU2lkZSApYFxuXHR0b3A6IDA7XG5cdGxlZnQ6IDA7XG5cdHJpZ2h0OiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IFJpZ2h0VmlldyA9IHN0eWxlZCggU2lkZSApYFxuXHR0b3A6IDA7XG5cdGJvdHRvbTogMDtcblx0JHsgcnRsKCB7IHJpZ2h0OiAwIH0gKSB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IEJvdHRvbVZpZXcgPSBzdHlsZWQoIFNpZGUgKWBcblx0Ym90dG9tOiAwO1xuXHRsZWZ0OiAwO1xuXHRyaWdodDogMDtcbmA7XG5cbmV4cG9ydCBjb25zdCBMZWZ0VmlldyA9IHN0eWxlZCggU2lkZSApYFxuXHR0b3A6IDA7XG5cdGJvdHRvbTogMDtcblx0JHsgcnRsKCB7IGxlZnQ6IDAgfSApIH07XG5gO1xuIl19 */"));
 exports.Side = Side;
 const TopView = ( /*#__PURE__*/0, _base.default)(Side, process.env.NODE_ENV === "production" ? {
   target: "e1df9b4q3"
@@ -65,7 +65,7 @@ const TopView = ( /*#__PURE__*/0, _base.default)(Side, process.env.NODE_ENV ===
 } : {
   name: "5i97ct",
   styles: "top:0;left:0;right:0",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm94LWNvbnRyb2wvc3R5bGVzL2JveC1jb250cm9sLXZpc3VhbGl6ZXItc3R5bGVzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlEcUMiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9ib3gtY29udHJvbC9zdHlsZXMvYm94LWNvbnRyb2wtdmlzdWFsaXplci1zdHlsZXMuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUywgcnRsIH0gZnJvbSAnLi4vLi4vdXRpbHMnO1xuXG5jb25zdCBjb250YWluZXJQb3NpdGlvblN0eWxlcyA9ICggeyBpc1Bvc2l0aW9uQWJzb2x1dGUgfSApID0+IHtcblx0aWYgKCAhIGlzUG9zaXRpb25BYnNvbHV0ZSApIHJldHVybiAnJztcblxuXHRyZXR1cm4gY3NzYFxuXHRcdGJvdHRvbTogMDtcblx0XHRsZWZ0OiAwO1xuXHRcdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHRcdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0XHRyaWdodDogMDtcblx0XHR0b3A6IDA7XG5cdFx0ei1pbmRleDogMTtcblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdCR7IGNvbnRhaW5lclBvc2l0aW9uU3R5bGVzIH07XG5gO1xuXG5leHBvcnQgY29uc3QgU2lkZSA9IHN0eWxlZC5kaXZgXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGJhY2tncm91bmQ6ICR7IENPTE9SUy5ibHVlLndvcmRwcmVzc1sgNzAwIF0gfTtcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLnVpLnRoZW1lIH07XG5cdGZpbHRlcjogYnJpZ2h0bmVzcyggMSApO1xuXHRvcGFjaXR5OiAwO1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHR0cmFuc2l0aW9uOiBvcGFjaXR5IDEyMG1zIGxpbmVhcjtcblx0ei1pbmRleDogMTtcblxuXHQkeyAoIHsgaXNBY3RpdmUgfSApID0+XG5cdFx0aXNBY3RpdmUgJiZcblx0XHRgXG5cdFx0b3BhY2l0eTogMC4zO1xuXHRgIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBUb3BWaWV3ID0gc3R5bGVkKCBTaWRlIClgXG5cdHRvcDogMDtcblx0bGVmdDogMDtcblx0cmlnaHQ6IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgUmlnaHRWaWV3ID0gc3R5bGVkKCBTaWRlIClgXG5cdHRvcDogMDtcblx0Ym90dG9tOiAwO1xuXHQkeyBydGwoIHsgcmlnaHQ6IDAgfSApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQm90dG9tVmlldyA9IHN0eWxlZCggU2lkZSApYFxuXHRib3R0b206IDA7XG5cdGxlZnQ6IDA7XG5cdHJpZ2h0OiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IExlZnRWaWV3ID0gc3R5bGVkKCBTaWRlIClgXG5cdHRvcDogMDtcblx0Ym90dG9tOiAwO1xuXHQkeyBydGwoIHsgbGVmdDogMCB9ICkgfTtcbmA7XG4iXX0= */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm94LWNvbnRyb2wvc3R5bGVzL2JveC1jb250cm9sLXZpc3VhbGl6ZXItc3R5bGVzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdEcUMiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9ib3gtY29udHJvbC9zdHlsZXMvYm94LWNvbnRyb2wtdmlzdWFsaXplci1zdHlsZXMuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUywgcnRsIH0gZnJvbSAnLi4vLi4vdXRpbHMnO1xuXG5jb25zdCBjb250YWluZXJQb3NpdGlvblN0eWxlcyA9ICggeyBpc1Bvc2l0aW9uQWJzb2x1dGUgfSApID0+IHtcblx0aWYgKCAhIGlzUG9zaXRpb25BYnNvbHV0ZSApIHJldHVybiAnJztcblxuXHRyZXR1cm4gY3NzYFxuXHRcdGJvdHRvbTogMDtcblx0XHRsZWZ0OiAwO1xuXHRcdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHRcdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0XHRyaWdodDogMDtcblx0XHR0b3A6IDA7XG5cdFx0ei1pbmRleDogMTtcblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdCR7IGNvbnRhaW5lclBvc2l0aW9uU3R5bGVzIH07XG5gO1xuXG5leHBvcnQgY29uc3QgU2lkZSA9IHN0eWxlZC5kaXZgXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGJhY2tncm91bmQ6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHRmaWx0ZXI6IGJyaWdodG5lc3MoIDEgKTtcblx0b3BhY2l0eTogMDtcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHRwb2ludGVyLWV2ZW50czogbm9uZTtcblx0dHJhbnNpdGlvbjogb3BhY2l0eSAxMjBtcyBsaW5lYXI7XG5cdHotaW5kZXg6IDE7XG5cblx0JHsgKCB7IGlzQWN0aXZlIH0gKSA9PlxuXHRcdGlzQWN0aXZlICYmXG5cdFx0YFxuXHRcdG9wYWNpdHk6IDAuMztcblx0YCB9XG5gO1xuXG5leHBvcnQgY29uc3QgVG9wVmlldyA9IHN0eWxlZCggU2lkZSApYFxuXHR0b3A6IDA7XG5cdGxlZnQ6IDA7XG5cdHJpZ2h0OiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IFJpZ2h0VmlldyA9IHN0eWxlZCggU2lkZSApYFxuXHR0b3A6IDA7XG5cdGJvdHRvbTogMDtcblx0JHsgcnRsKCB7IHJpZ2h0OiAwIH0gKSB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IEJvdHRvbVZpZXcgPSBzdHlsZWQoIFNpZGUgKWBcblx0Ym90dG9tOiAwO1xuXHRsZWZ0OiAwO1xuXHRyaWdodDogMDtcbmA7XG5cbmV4cG9ydCBjb25zdCBMZWZ0VmlldyA9IHN0eWxlZCggU2lkZSApYFxuXHR0b3A6IDA7XG5cdGJvdHRvbTogMDtcblx0JHsgcnRsKCB7IGxlZnQ6IDAgfSApIH07XG5gO1xuIl19 */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 exports.TopView = TopView;
@@ -76,7 +76,7 @@ const RightView = ( /*#__PURE__*/0, _base.default)(Side, process.env.NODE_ENV ==
   label: "RightView"
 })("top:0;bottom:0;", (0, _utils.rtl)({
   right: 0
-}), ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm94LWNvbnRyb2wvc3R5bGVzL2JveC1jb250cm9sLXZpc3VhbGl6ZXItc3R5bGVzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXVEdUMiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9ib3gtY29udHJvbC9zdHlsZXMvYm94LWNvbnRyb2wtdmlzdWFsaXplci1zdHlsZXMuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUywgcnRsIH0gZnJvbSAnLi4vLi4vdXRpbHMnO1xuXG5jb25zdCBjb250YWluZXJQb3NpdGlvblN0eWxlcyA9ICggeyBpc1Bvc2l0aW9uQWJzb2x1dGUgfSApID0+IHtcblx0aWYgKCAhIGlzUG9zaXRpb25BYnNvbHV0ZSApIHJldHVybiAnJztcblxuXHRyZXR1cm4gY3NzYFxuXHRcdGJvdHRvbTogMDtcblx0XHRsZWZ0OiAwO1xuXHRcdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHRcdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0XHRyaWdodDogMDtcblx0XHR0b3A6IDA7XG5cdFx0ei1pbmRleDogMTtcblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdCR7IGNvbnRhaW5lclBvc2l0aW9uU3R5bGVzIH07XG5gO1xuXG5leHBvcnQgY29uc3QgU2lkZSA9IHN0eWxlZC5kaXZgXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGJhY2tncm91bmQ6ICR7IENPTE9SUy5ibHVlLndvcmRwcmVzc1sgNzAwIF0gfTtcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLnVpLnRoZW1lIH07XG5cdGZpbHRlcjogYnJpZ2h0bmVzcyggMSApO1xuXHRvcGFjaXR5OiAwO1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHR0cmFuc2l0aW9uOiBvcGFjaXR5IDEyMG1zIGxpbmVhcjtcblx0ei1pbmRleDogMTtcblxuXHQkeyAoIHsgaXNBY3RpdmUgfSApID0+XG5cdFx0aXNBY3RpdmUgJiZcblx0XHRgXG5cdFx0b3BhY2l0eTogMC4zO1xuXHRgIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBUb3BWaWV3ID0gc3R5bGVkKCBTaWRlIClgXG5cdHRvcDogMDtcblx0bGVmdDogMDtcblx0cmlnaHQ6IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgUmlnaHRWaWV3ID0gc3R5bGVkKCBTaWRlIClgXG5cdHRvcDogMDtcblx0Ym90dG9tOiAwO1xuXHQkeyBydGwoIHsgcmlnaHQ6IDAgfSApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQm90dG9tVmlldyA9IHN0eWxlZCggU2lkZSApYFxuXHRib3R0b206IDA7XG5cdGxlZnQ6IDA7XG5cdHJpZ2h0OiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IExlZnRWaWV3ID0gc3R5bGVkKCBTaWRlIClgXG5cdHRvcDogMDtcblx0Ym90dG9tOiAwO1xuXHQkeyBydGwoIHsgbGVmdDogMCB9ICkgfTtcbmA7XG4iXX0= */"));
+}), ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm94LWNvbnRyb2wvc3R5bGVzL2JveC1jb250cm9sLXZpc3VhbGl6ZXItc3R5bGVzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNEdUMiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9ib3gtY29udHJvbC9zdHlsZXMvYm94LWNvbnRyb2wtdmlzdWFsaXplci1zdHlsZXMuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUywgcnRsIH0gZnJvbSAnLi4vLi4vdXRpbHMnO1xuXG5jb25zdCBjb250YWluZXJQb3NpdGlvblN0eWxlcyA9ICggeyBpc1Bvc2l0aW9uQWJzb2x1dGUgfSApID0+IHtcblx0aWYgKCAhIGlzUG9zaXRpb25BYnNvbHV0ZSApIHJldHVybiAnJztcblxuXHRyZXR1cm4gY3NzYFxuXHRcdGJvdHRvbTogMDtcblx0XHRsZWZ0OiAwO1xuXHRcdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHRcdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0XHRyaWdodDogMDtcblx0XHR0b3A6IDA7XG5cdFx0ei1pbmRleDogMTtcblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdCR7IGNvbnRhaW5lclBvc2l0aW9uU3R5bGVzIH07XG5gO1xuXG5leHBvcnQgY29uc3QgU2lkZSA9IHN0eWxlZC5kaXZgXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGJhY2tncm91bmQ6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHRmaWx0ZXI6IGJyaWdodG5lc3MoIDEgKTtcblx0b3BhY2l0eTogMDtcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHRwb2ludGVyLWV2ZW50czogbm9uZTtcblx0dHJhbnNpdGlvbjogb3BhY2l0eSAxMjBtcyBsaW5lYXI7XG5cdHotaW5kZXg6IDE7XG5cblx0JHsgKCB7IGlzQWN0aXZlIH0gKSA9PlxuXHRcdGlzQWN0aXZlICYmXG5cdFx0YFxuXHRcdG9wYWNpdHk6IDAuMztcblx0YCB9XG5gO1xuXG5leHBvcnQgY29uc3QgVG9wVmlldyA9IHN0eWxlZCggU2lkZSApYFxuXHR0b3A6IDA7XG5cdGxlZnQ6IDA7XG5cdHJpZ2h0OiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IFJpZ2h0VmlldyA9IHN0eWxlZCggU2lkZSApYFxuXHR0b3A6IDA7XG5cdGJvdHRvbTogMDtcblx0JHsgcnRsKCB7IHJpZ2h0OiAwIH0gKSB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IEJvdHRvbVZpZXcgPSBzdHlsZWQoIFNpZGUgKWBcblx0Ym90dG9tOiAwO1xuXHRsZWZ0OiAwO1xuXHRyaWdodDogMDtcbmA7XG5cbmV4cG9ydCBjb25zdCBMZWZ0VmlldyA9IHN0eWxlZCggU2lkZSApYFxuXHR0b3A6IDA7XG5cdGJvdHRvbTogMDtcblx0JHsgcnRsKCB7IGxlZnQ6IDAgfSApIH07XG5gO1xuIl19 */"));
 exports.RightView = RightView;
 const BottomView = ( /*#__PURE__*/0, _base.default)(Side, process.env.NODE_ENV === "production" ? {
   target: "e1df9b4q1"
@@ -89,7 +89,7 @@ const BottomView = ( /*#__PURE__*/0, _base.default)(Side, process.env.NODE_ENV =
 } : {
   name: "8cxke2",
   styles: "bottom:0;left:0;right:0",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm94LWNvbnRyb2wvc3R5bGVzL2JveC1jb250cm9sLXZpc3VhbGl6ZXItc3R5bGVzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTZEd0MiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9ib3gtY29udHJvbC9zdHlsZXMvYm94LWNvbnRyb2wtdmlzdWFsaXplci1zdHlsZXMuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUywgcnRsIH0gZnJvbSAnLi4vLi4vdXRpbHMnO1xuXG5jb25zdCBjb250YWluZXJQb3NpdGlvblN0eWxlcyA9ICggeyBpc1Bvc2l0aW9uQWJzb2x1dGUgfSApID0+IHtcblx0aWYgKCAhIGlzUG9zaXRpb25BYnNvbHV0ZSApIHJldHVybiAnJztcblxuXHRyZXR1cm4gY3NzYFxuXHRcdGJvdHRvbTogMDtcblx0XHRsZWZ0OiAwO1xuXHRcdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHRcdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0XHRyaWdodDogMDtcblx0XHR0b3A6IDA7XG5cdFx0ei1pbmRleDogMTtcblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdCR7IGNvbnRhaW5lclBvc2l0aW9uU3R5bGVzIH07XG5gO1xuXG5leHBvcnQgY29uc3QgU2lkZSA9IHN0eWxlZC5kaXZgXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGJhY2tncm91bmQ6ICR7IENPTE9SUy5ibHVlLndvcmRwcmVzc1sgNzAwIF0gfTtcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLnVpLnRoZW1lIH07XG5cdGZpbHRlcjogYnJpZ2h0bmVzcyggMSApO1xuXHRvcGFjaXR5OiAwO1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHR0cmFuc2l0aW9uOiBvcGFjaXR5IDEyMG1zIGxpbmVhcjtcblx0ei1pbmRleDogMTtcblxuXHQkeyAoIHsgaXNBY3RpdmUgfSApID0+XG5cdFx0aXNBY3RpdmUgJiZcblx0XHRgXG5cdFx0b3BhY2l0eTogMC4zO1xuXHRgIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBUb3BWaWV3ID0gc3R5bGVkKCBTaWRlIClgXG5cdHRvcDogMDtcblx0bGVmdDogMDtcblx0cmlnaHQ6IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgUmlnaHRWaWV3ID0gc3R5bGVkKCBTaWRlIClgXG5cdHRvcDogMDtcblx0Ym90dG9tOiAwO1xuXHQkeyBydGwoIHsgcmlnaHQ6IDAgfSApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQm90dG9tVmlldyA9IHN0eWxlZCggU2lkZSApYFxuXHRib3R0b206IDA7XG5cdGxlZnQ6IDA7XG5cdHJpZ2h0OiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IExlZnRWaWV3ID0gc3R5bGVkKCBTaWRlIClgXG5cdHRvcDogMDtcblx0Ym90dG9tOiAwO1xuXHQkeyBydGwoIHsgbGVmdDogMCB9ICkgfTtcbmA7XG4iXX0= */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm94LWNvbnRyb2wvc3R5bGVzL2JveC1jb250cm9sLXZpc3VhbGl6ZXItc3R5bGVzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTREd0MiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9ib3gtY29udHJvbC9zdHlsZXMvYm94LWNvbnRyb2wtdmlzdWFsaXplci1zdHlsZXMuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUywgcnRsIH0gZnJvbSAnLi4vLi4vdXRpbHMnO1xuXG5jb25zdCBjb250YWluZXJQb3NpdGlvblN0eWxlcyA9ICggeyBpc1Bvc2l0aW9uQWJzb2x1dGUgfSApID0+IHtcblx0aWYgKCAhIGlzUG9zaXRpb25BYnNvbHV0ZSApIHJldHVybiAnJztcblxuXHRyZXR1cm4gY3NzYFxuXHRcdGJvdHRvbTogMDtcblx0XHRsZWZ0OiAwO1xuXHRcdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHRcdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0XHRyaWdodDogMDtcblx0XHR0b3A6IDA7XG5cdFx0ei1pbmRleDogMTtcblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdCR7IGNvbnRhaW5lclBvc2l0aW9uU3R5bGVzIH07XG5gO1xuXG5leHBvcnQgY29uc3QgU2lkZSA9IHN0eWxlZC5kaXZgXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGJhY2tncm91bmQ6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHRmaWx0ZXI6IGJyaWdodG5lc3MoIDEgKTtcblx0b3BhY2l0eTogMDtcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHRwb2ludGVyLWV2ZW50czogbm9uZTtcblx0dHJhbnNpdGlvbjogb3BhY2l0eSAxMjBtcyBsaW5lYXI7XG5cdHotaW5kZXg6IDE7XG5cblx0JHsgKCB7IGlzQWN0aXZlIH0gKSA9PlxuXHRcdGlzQWN0aXZlICYmXG5cdFx0YFxuXHRcdG9wYWNpdHk6IDAuMztcblx0YCB9XG5gO1xuXG5leHBvcnQgY29uc3QgVG9wVmlldyA9IHN0eWxlZCggU2lkZSApYFxuXHR0b3A6IDA7XG5cdGxlZnQ6IDA7XG5cdHJpZ2h0OiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IFJpZ2h0VmlldyA9IHN0eWxlZCggU2lkZSApYFxuXHR0b3A6IDA7XG5cdGJvdHRvbTogMDtcblx0JHsgcnRsKCB7IHJpZ2h0OiAwIH0gKSB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IEJvdHRvbVZpZXcgPSBzdHlsZWQoIFNpZGUgKWBcblx0Ym90dG9tOiAwO1xuXHRsZWZ0OiAwO1xuXHRyaWdodDogMDtcbmA7XG5cbmV4cG9ydCBjb25zdCBMZWZ0VmlldyA9IHN0eWxlZCggU2lkZSApYFxuXHR0b3A6IDA7XG5cdGJvdHRvbTogMDtcblx0JHsgcnRsKCB7IGxlZnQ6IDAgfSApIH07XG5gO1xuIl19 */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 exports.BottomView = BottomView;
@@ -100,6 +100,6 @@ const LeftView = ( /*#__PURE__*/0, _base.default)(Side, process.env.NODE_ENV ===
   label: "LeftView"
 })("top:0;bottom:0;", (0, _utils.rtl)({
   left: 0
-}), ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm94LWNvbnRyb2wvc3R5bGVzL2JveC1jb250cm9sLXZpc3VhbGl6ZXItc3R5bGVzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1Fc0MiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9ib3gtY29udHJvbC9zdHlsZXMvYm94LWNvbnRyb2wtdmlzdWFsaXplci1zdHlsZXMuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUywgcnRsIH0gZnJvbSAnLi4vLi4vdXRpbHMnO1xuXG5jb25zdCBjb250YWluZXJQb3NpdGlvblN0eWxlcyA9ICggeyBpc1Bvc2l0aW9uQWJzb2x1dGUgfSApID0+IHtcblx0aWYgKCAhIGlzUG9zaXRpb25BYnNvbHV0ZSApIHJldHVybiAnJztcblxuXHRyZXR1cm4gY3NzYFxuXHRcdGJvdHRvbTogMDtcblx0XHRsZWZ0OiAwO1xuXHRcdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHRcdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0XHRyaWdodDogMDtcblx0XHR0b3A6IDA7XG5cdFx0ei1pbmRleDogMTtcblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdCR7IGNvbnRhaW5lclBvc2l0aW9uU3R5bGVzIH07XG5gO1xuXG5leHBvcnQgY29uc3QgU2lkZSA9IHN0eWxlZC5kaXZgXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGJhY2tncm91bmQ6ICR7IENPTE9SUy5ibHVlLndvcmRwcmVzc1sgNzAwIF0gfTtcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLnVpLnRoZW1lIH07XG5cdGZpbHRlcjogYnJpZ2h0bmVzcyggMSApO1xuXHRvcGFjaXR5OiAwO1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHR0cmFuc2l0aW9uOiBvcGFjaXR5IDEyMG1zIGxpbmVhcjtcblx0ei1pbmRleDogMTtcblxuXHQkeyAoIHsgaXNBY3RpdmUgfSApID0+XG5cdFx0aXNBY3RpdmUgJiZcblx0XHRgXG5cdFx0b3BhY2l0eTogMC4zO1xuXHRgIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBUb3BWaWV3ID0gc3R5bGVkKCBTaWRlIClgXG5cdHRvcDogMDtcblx0bGVmdDogMDtcblx0cmlnaHQ6IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgUmlnaHRWaWV3ID0gc3R5bGVkKCBTaWRlIClgXG5cdHRvcDogMDtcblx0Ym90dG9tOiAwO1xuXHQkeyBydGwoIHsgcmlnaHQ6IDAgfSApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQm90dG9tVmlldyA9IHN0eWxlZCggU2lkZSApYFxuXHRib3R0b206IDA7XG5cdGxlZnQ6IDA7XG5cdHJpZ2h0OiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IExlZnRWaWV3ID0gc3R5bGVkKCBTaWRlIClgXG5cdHRvcDogMDtcblx0Ym90dG9tOiAwO1xuXHQkeyBydGwoIHsgbGVmdDogMCB9ICkgfTtcbmA7XG4iXX0= */"));
+}), ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm94LWNvbnRyb2wvc3R5bGVzL2JveC1jb250cm9sLXZpc3VhbGl6ZXItc3R5bGVzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtFc0MiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9ib3gtY29udHJvbC9zdHlsZXMvYm94LWNvbnRyb2wtdmlzdWFsaXplci1zdHlsZXMuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUywgcnRsIH0gZnJvbSAnLi4vLi4vdXRpbHMnO1xuXG5jb25zdCBjb250YWluZXJQb3NpdGlvblN0eWxlcyA9ICggeyBpc1Bvc2l0aW9uQWJzb2x1dGUgfSApID0+IHtcblx0aWYgKCAhIGlzUG9zaXRpb25BYnNvbHV0ZSApIHJldHVybiAnJztcblxuXHRyZXR1cm4gY3NzYFxuXHRcdGJvdHRvbTogMDtcblx0XHRsZWZ0OiAwO1xuXHRcdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHRcdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0XHRyaWdodDogMDtcblx0XHR0b3A6IDA7XG5cdFx0ei1pbmRleDogMTtcblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdCR7IGNvbnRhaW5lclBvc2l0aW9uU3R5bGVzIH07XG5gO1xuXG5leHBvcnQgY29uc3QgU2lkZSA9IHN0eWxlZC5kaXZgXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGJhY2tncm91bmQ6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHRmaWx0ZXI6IGJyaWdodG5lc3MoIDEgKTtcblx0b3BhY2l0eTogMDtcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHRwb2ludGVyLWV2ZW50czogbm9uZTtcblx0dHJhbnNpdGlvbjogb3BhY2l0eSAxMjBtcyBsaW5lYXI7XG5cdHotaW5kZXg6IDE7XG5cblx0JHsgKCB7IGlzQWN0aXZlIH0gKSA9PlxuXHRcdGlzQWN0aXZlICYmXG5cdFx0YFxuXHRcdG9wYWNpdHk6IDAuMztcblx0YCB9XG5gO1xuXG5leHBvcnQgY29uc3QgVG9wVmlldyA9IHN0eWxlZCggU2lkZSApYFxuXHR0b3A6IDA7XG5cdGxlZnQ6IDA7XG5cdHJpZ2h0OiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IFJpZ2h0VmlldyA9IHN0eWxlZCggU2lkZSApYFxuXHR0b3A6IDA7XG5cdGJvdHRvbTogMDtcblx0JHsgcnRsKCB7IHJpZ2h0OiAwIH0gKSB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IEJvdHRvbVZpZXcgPSBzdHlsZWQoIFNpZGUgKWBcblx0Ym90dG9tOiAwO1xuXHRsZWZ0OiAwO1xuXHRyaWdodDogMDtcbmA7XG5cbmV4cG9ydCBjb25zdCBMZWZ0VmlldyA9IHN0eWxlZCggU2lkZSApYFxuXHR0b3A6IDA7XG5cdGJvdHRvbTogMDtcblx0JHsgcnRsKCB7IGxlZnQ6IDAgfSApIH07XG5gO1xuIl19 */"));
 exports.LeftView = LeftView;
 //# sourceMappingURL=box-control-visualizer-styles.js.map

package/build/box-control/styles/box-control-visualizer-styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/box-control/styles/box-control-visualizer-styles.js"],"names":["containerPositionStyles","isPositionAbsolute","Container","Side","COLORS","blue","wordpress","ui","theme","isActive","TopView","RightView","right","BottomView","LeftView","left"],"mappings":";;;;;;;;;;;AAGA;;AAMA;;;;;;;;;;;;;;AAEA,MAAMA,uBAAuB,GAAG,SAA8B;AAAA,MAA5B;AAAEC,IAAAA;AAAF,GAA4B;AAC7D,MAAK,CAAEA,kBAAP,EAA4B,OAAO,EAAP;AAE5B;AASA,CAZD;;AAcO,MAAMC,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,+CAGlBF,uBAHkB,qrEAAf;;AAMA,MAAMG,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,wCAEDC,cAAOC,IAAP,CAAYC,SAAZ,CAAuB,GAAvB,CAFC,kBAGDF,cAAOG,EAAP,CAAUC,KAHT,wHAWb;AAAA,MAAE;AAAEC,IAAAA;AAAF,GAAF;AAAA,SACFA,QAAQ,IACP;AACH;AACA,EAJI;AAAA,CAXa,qrEAAV;;AAkBA,MAAMC,OAAO,GAAG,iCAAQP,IAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAb;;AAMA,MAAMQ,SAAS,GAAG,iCAAQR,IAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,oBAGlB,gBAAK;AAAES,EAAAA,KAAK,EAAE;AAAT,CAAL,CAHkB,qrEAAf;;AAMA,MAAMC,UAAU,GAAG,iCAAQV,IAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAhB;;AAMA,MAAMW,QAAQ,GAAG,iCAAQX,IAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,oBAGjB,gBAAK;AAAEY,EAAAA,IAAI,EAAE;AAAR,CAAL,CAHiB,qrEAAd","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport { COLORS, rtl } from '../../utils';\n\nconst containerPositionStyles = ( { isPositionAbsolute } ) => {\n\tif ( ! isPositionAbsolute ) return '';\n\n\treturn css`\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\tpointer-events: none;\n\t\tposition: absolute;\n\t\tright: 0;\n\t\ttop: 0;\n\t\tz-index: 1;\n\t`;\n};\n\nexport const Container = styled.div`\n\tbox-sizing: border-box;\n\tposition: relative;\n\t${ containerPositionStyles };\n`;\n\nexport const Side = styled.div`\n\tbox-sizing: border-box;\n\tbackground: ${ COLORS.blue.wordpress[ 700 ] };\n\tbackground: ${ COLORS.ui.theme };\n\tfilter: brightness( 1 );\n\topacity: 0;\n\tposition: absolute;\n\tpointer-events: none;\n\ttransition: opacity 120ms linear;\n\tz-index: 1;\n\n\t${ ( { isActive } ) =>\n\t\tisActive &&\n\t\t`\n\t\topacity: 0.3;\n\t` }\n`;\n\nexport const TopView = styled( Side )`\n\ttop: 0;\n\tleft: 0;\n\tright: 0;\n`;\n\nexport const RightView = styled( Side )`\n\ttop: 0;\n\tbottom: 0;\n\t${ rtl( { right: 0 } ) };\n`;\n\nexport const BottomView = styled( Side )`\n\tbottom: 0;\n\tleft: 0;\n\tright: 0;\n`;\n\nexport const LeftView = styled( Side )`\n\ttop: 0;\n\tbottom: 0;\n\t${ rtl( { left: 0 } ) };\n`;\n"]}
+{"version":3,"sources":["@wordpress/components/src/box-control/styles/box-control-visualizer-styles.js"],"names":["containerPositionStyles","isPositionAbsolute","Container","Side","COLORS","ui","theme","isActive","TopView","RightView","right","BottomView","LeftView","left"],"mappings":";;;;;;;;;;;AAGA;;AAMA;;;;;;;;;;;;;;AAEA,MAAMA,uBAAuB,GAAG,SAA8B;AAAA,MAA5B;AAAEC,IAAAA;AAAF,GAA4B;AAC7D,MAAK,CAAEA,kBAAP,EAA4B,OAAO,EAAP;AAE5B;AASA,CAZD;;AAcO,MAAMC,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,+CAGlBF,uBAHkB,inEAAf;;AAMA,MAAMG,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,wCAEDC,cAAOC,EAAP,CAAUC,KAFT,wHAUb;AAAA,MAAE;AAAEC,IAAAA;AAAF,GAAF;AAAA,SACFA,QAAQ,IACP;AACH;AACA,EAJI;AAAA,CAVa,inEAAV;;AAiBA,MAAMC,OAAO,GAAG,iCAAQL,IAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAb;;AAMA,MAAMM,SAAS,GAAG,iCAAQN,IAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,oBAGlB,gBAAK;AAAEO,EAAAA,KAAK,EAAE;AAAT,CAAL,CAHkB,inEAAf;;AAMA,MAAMC,UAAU,GAAG,iCAAQR,IAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAhB;;AAMA,MAAMS,QAAQ,GAAG,iCAAQT,IAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,oBAGjB,gBAAK;AAAEU,EAAAA,IAAI,EAAE;AAAR,CAAL,CAHiB,inEAAd","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport { COLORS, rtl } from '../../utils';\n\nconst containerPositionStyles = ( { isPositionAbsolute } ) => {\n\tif ( ! isPositionAbsolute ) return '';\n\n\treturn css`\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\tpointer-events: none;\n\t\tposition: absolute;\n\t\tright: 0;\n\t\ttop: 0;\n\t\tz-index: 1;\n\t`;\n};\n\nexport const Container = styled.div`\n\tbox-sizing: border-box;\n\tposition: relative;\n\t${ containerPositionStyles };\n`;\n\nexport const Side = styled.div`\n\tbox-sizing: border-box;\n\tbackground: ${ COLORS.ui.theme };\n\tfilter: brightness( 1 );\n\topacity: 0;\n\tposition: absolute;\n\tpointer-events: none;\n\ttransition: opacity 120ms linear;\n\tz-index: 1;\n\n\t${ ( { isActive } ) =>\n\t\tisActive &&\n\t\t`\n\t\topacity: 0.3;\n\t` }\n`;\n\nexport const TopView = styled( Side )`\n\ttop: 0;\n\tleft: 0;\n\tright: 0;\n`;\n\nexport const RightView = styled( Side )`\n\ttop: 0;\n\tbottom: 0;\n\t${ rtl( { right: 0 } ) };\n`;\n\nexport const BottomView = styled( Side )`\n\tbottom: 0;\n\tleft: 0;\n\tright: 0;\n`;\n\nexport const LeftView = styled( Side )`\n\ttop: 0;\n\tbottom: 0;\n\t${ rtl( { left: 0 } ) };\n`;\n"]}

package/build/box-control/utils.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.LABELS = exports.DEFAULT_VALUES = exports.ALL_SIDES = void 0;
+exports.applyValueToSides = applyValueToSides;
 exports.getAllUnitFallback = getAllUnitFallback;
 exports.getAllValue = getAllValue;
 exports.getInitialSide = getInitialSide;
@@ -11,16 +12,10 @@ exports.isValuesDefined = isValuesDefined;
 exports.isValuesMixed = isValuesMixed;
 exports.normalizeSides = normalizeSides;
 
-var _lodash = require("lodash");
-
 var _i18n = require("@wordpress/i18n");
 
 var _utils = require("../unit-control/utils");
 
-/**
- * External dependencies
- */
-
 /**
  * WordPress dependencies
  */
@@ -153,10 +148,10 @@ function isValuesMixed() {
 
 
 function isValuesDefined(values) {
-  return values !== undefined && !(0, _lodash.isEmpty)(Object.values(values).filter( // Switching units when input is empty causes values only
+  return values !== undefined && Object.values(values).filter( // Switching units when input is empty causes values only
   // containing units. This gives false positive on mixed values
   // unless filtered.
-  value => !!value && /\d/.test(value)));
+  value => !!value && /\d/.test(value)).length > 0;
 }
 /**
  * Get initial selected side, factoring in whether the sides are linked,
@@ -206,4 +201,38 @@ function normalizeSides(sides) {
 
   return filteredSides;
 }
+/**
+ * Applies a value to an object representing top, right, bottom and left sides
+ * while taking into account any custom side configuration.
+ *
+ * @param {Object}        currentValues The current values for each side.
+ * @param {string|number} newValue      The value to apply to the sides object.
+ * @param {string[]}      sides         Array defining valid sides.
+ *
+ * @return {Object} Object containing the updated values for each side.
+ */
+
+
+function applyValueToSides(currentValues, newValue, sides) {
+  const newValues = { ...currentValues
+  };
+
+  if (sides !== null && sides !== void 0 && sides.length) {
+    sides.forEach(side => {
+      if (side === 'vertical') {
+        newValues.top = newValue;
+        newValues.bottom = newValue;
+      } else if (side === 'horizontal') {
+        newValues.left = newValue;
+        newValues.right = newValue;
+      } else {
+        newValues[side] = newValue;
+      }
+    });
+  } else {
+    ALL_SIDES.forEach(side => newValues[side] = newValue);
+  }
+
+  return newValues;
+}
 //# sourceMappingURL=utils.js.map

package/build/box-control/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/box-control/utils.js"],"names":["LABELS","all","top","bottom","left","right","mixed","vertical","horizontal","DEFAULT_VALUES","undefined","ALL_SIDES","mode","arr","sort","a","b","filter","v","length","pop","getAllValue","values","selectedUnits","availableSides","sides","normalizeSides","parsedQuantitiesAndUnits","map","side","allParsedQuantities","value","allParsedUnits","commonQuantity","every","commonUnit","getAllUnitFallback","join","filteredUnits","Object","Boolean","isValuesMixed","allValue","isMixed","isNaN","parseFloat","isValuesDefined","test","getInitialSide","isLinked","splitOnAxis","initialSide","filteredSides","includes","push","newSides"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { isEmpty } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\n\nexport const LABELS = {\n\tall: __( 'All' ),\n\ttop: __( 'Top' ),\n\tbottom: __( 'Bottom' ),\n\tleft: __( 'Left' ),\n\tright: __( 'Right' ),\n\tmixed: __( 'Mixed' ),\n\tvertical: __( 'Vertical' ),\n\thorizontal: __( 'Horizontal' ),\n};\n\nexport const DEFAULT_VALUES = {\n\ttop: undefined,\n\tright: undefined,\n\tbottom: undefined,\n\tleft: undefined,\n};\n\nexport const ALL_SIDES = [ 'top', 'right', 'bottom', 'left' ];\n\n/**\n * Gets an items with the most occurrence within an array\n * https://stackoverflow.com/a/20762713\n *\n * @param {Array<any>} arr Array of items to check.\n * @return {any} The item with the most occurrences.\n */\nfunction mode( arr ) {\n\treturn arr\n\t\t.sort(\n\t\t\t( a, b ) =>\n\t\t\t\tarr.filter( ( v ) => v === a ).length -\n\t\t\t\tarr.filter( ( v ) => v === b ).length\n\t\t)\n\t\t.pop();\n}\n\n/**\n * Gets the 'all' input value and unit from values data.\n *\n * @param {Object} values         Box values.\n * @param {Object} selectedUnits  Box units.\n * @param {Array}  availableSides Available box sides to evaluate.\n *\n * @return {string} A value + unit for the 'all' input.\n */\nexport function getAllValue(\n\tvalues = {},\n\tselectedUnits,\n\tavailableSides = ALL_SIDES\n) {\n\tconst sides = normalizeSides( availableSides );\n\tconst parsedQuantitiesAndUnits = sides.map( ( side ) =>\n\t\tparseQuantityAndUnitFromRawValue( values[ side ] )\n\t);\n\tconst allParsedQuantities = parsedQuantitiesAndUnits.map(\n\t\t( value ) => value[ 0 ] ?? ''\n\t);\n\tconst allParsedUnits = parsedQuantitiesAndUnits.map(\n\t\t( value ) => value[ 1 ]\n\t);\n\n\tconst commonQuantity = allParsedQuantities.every(\n\t\t( v ) => v === allParsedQuantities[ 0 ]\n\t)\n\t\t? allParsedQuantities[ 0 ]\n\t\t: '';\n\n\t/**\n\t * The typeof === 'number' check is important. On reset actions, the incoming value\n\t * may be null or an empty string.\n\t *\n\t * Also, the value may also be zero (0), which is considered a valid unit value.\n\t *\n\t * typeof === 'number' is more specific for these cases, rather than relying on a\n\t * simple truthy check.\n\t */\n\tlet commonUnit;\n\tif ( typeof commonQuantity === 'number' ) {\n\t\tcommonUnit = mode( allParsedUnits );\n\t} else {\n\t\t// Set meaningful unit selection if no commonQuantity and user has previously\n\t\t// selected units without assigning values while controls were unlinked.\n\t\tcommonUnit =\n\t\t\tgetAllUnitFallback( selectedUnits ) ?? mode( allParsedUnits );\n\t}\n\n\treturn [ commonQuantity, commonUnit ].join( '' );\n}\n\n/**\n * Determine the most common unit selection to use as a fallback option.\n *\n * @param {Object} selectedUnits Current unit selections for individual sides.\n * @return {string} Most common unit selection.\n */\nexport function getAllUnitFallback( selectedUnits ) {\n\tif ( ! selectedUnits || typeof selectedUnits !== 'object' ) {\n\t\treturn undefined;\n\t}\n\n\tconst filteredUnits = Object.values( selectedUnits ).filter( Boolean );\n\n\treturn mode( filteredUnits );\n}\n\n/**\n * Checks to determine if values are mixed.\n *\n * @param {Object} values        Box values.\n * @param {Object} selectedUnits Box units.\n * @param {Array}  sides         Available box sides to evaluate.\n *\n * @return {boolean} Whether values are mixed.\n */\nexport function isValuesMixed( values = {}, selectedUnits, sides = ALL_SIDES ) {\n\tconst allValue = getAllValue( values, selectedUnits, sides );\n\tconst isMixed = isNaN( parseFloat( allValue ) );\n\n\treturn isMixed;\n}\n\n/**\n * Checks to determine if values are defined.\n *\n * @param {Object} values Box values.\n *\n * @return {boolean} Whether values are mixed.\n */\nexport function isValuesDefined( values ) {\n\treturn (\n\t\tvalues !== undefined &&\n\t\t! isEmpty(\n\t\t\tObject.values( values ).filter(\n\t\t\t\t// Switching units when input is empty causes values only\n\t\t\t\t// containing units. This gives false positive on mixed values\n\t\t\t\t// unless filtered.\n\t\t\t\t( value ) => !! value && /\\d/.test( value )\n\t\t\t)\n\t\t)\n\t);\n}\n\n/**\n * Get initial selected side, factoring in whether the sides are linked,\n * and whether the vertical / horizontal directions are grouped via splitOnAxis.\n *\n * @param {boolean} isLinked    Whether the box control's fields are linked.\n * @param {boolean} splitOnAxis Whether splitting by horizontal or vertical axis.\n * @return {string} The initial side.\n */\nexport function getInitialSide( isLinked, splitOnAxis ) {\n\tlet initialSide = 'all';\n\n\tif ( ! isLinked ) {\n\t\tinitialSide = splitOnAxis ? 'vertical' : 'top';\n\t}\n\n\treturn initialSide;\n}\n\n/**\n * Normalizes provided sides configuration to an array containing only top,\n * right, bottom and left. This essentially just maps `horizontal` or `vertical`\n * to their appropriate sides to facilitate correctly determining value for\n * all input control.\n *\n * @param {Array} sides Available sides for box control.\n * @return {Array} Normalized sides configuration.\n */\nexport function normalizeSides( sides ) {\n\tconst filteredSides = [];\n\n\tif ( ! sides?.length ) {\n\t\treturn ALL_SIDES;\n\t}\n\n\tif ( sides.includes( 'vertical' ) ) {\n\t\tfilteredSides.push( ...[ 'top', 'bottom' ] );\n\t} else if ( sides.includes( 'horizontal' ) ) {\n\t\tfilteredSides.push( ...[ 'left', 'right' ] );\n\t} else {\n\t\tconst newSides = ALL_SIDES.filter( ( side ) => sides.includes( side ) );\n\t\tfilteredSides.push( ...newSides );\n\t}\n\n\treturn filteredSides;\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/box-control/utils.js"],"names":["LABELS","all","top","bottom","left","right","mixed","vertical","horizontal","DEFAULT_VALUES","undefined","ALL_SIDES","mode","arr","sort","a","b","filter","v","length","pop","getAllValue","values","selectedUnits","availableSides","sides","normalizeSides","parsedQuantitiesAndUnits","map","side","allParsedQuantities","value","allParsedUnits","commonQuantity","every","commonUnit","getAllUnitFallback","join","filteredUnits","Object","Boolean","isValuesMixed","allValue","isMixed","isNaN","parseFloat","isValuesDefined","test","getInitialSide","isLinked","splitOnAxis","initialSide","filteredSides","includes","push","newSides","applyValueToSides","currentValues","newValue","newValues","forEach"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\n\nexport const LABELS = {\n\tall: __( 'All' ),\n\ttop: __( 'Top' ),\n\tbottom: __( 'Bottom' ),\n\tleft: __( 'Left' ),\n\tright: __( 'Right' ),\n\tmixed: __( 'Mixed' ),\n\tvertical: __( 'Vertical' ),\n\thorizontal: __( 'Horizontal' ),\n};\n\nexport const DEFAULT_VALUES = {\n\ttop: undefined,\n\tright: undefined,\n\tbottom: undefined,\n\tleft: undefined,\n};\n\nexport const ALL_SIDES = [ 'top', 'right', 'bottom', 'left' ];\n\n/**\n * Gets an items with the most occurrence within an array\n * https://stackoverflow.com/a/20762713\n *\n * @param {Array<any>} arr Array of items to check.\n * @return {any} The item with the most occurrences.\n */\nfunction mode( arr ) {\n\treturn arr\n\t\t.sort(\n\t\t\t( a, b ) =>\n\t\t\t\tarr.filter( ( v ) => v === a ).length -\n\t\t\t\tarr.filter( ( v ) => v === b ).length\n\t\t)\n\t\t.pop();\n}\n\n/**\n * Gets the 'all' input value and unit from values data.\n *\n * @param {Object} values         Box values.\n * @param {Object} selectedUnits  Box units.\n * @param {Array}  availableSides Available box sides to evaluate.\n *\n * @return {string} A value + unit for the 'all' input.\n */\nexport function getAllValue(\n\tvalues = {},\n\tselectedUnits,\n\tavailableSides = ALL_SIDES\n) {\n\tconst sides = normalizeSides( availableSides );\n\tconst parsedQuantitiesAndUnits = sides.map( ( side ) =>\n\t\tparseQuantityAndUnitFromRawValue( values[ side ] )\n\t);\n\tconst allParsedQuantities = parsedQuantitiesAndUnits.map(\n\t\t( value ) => value[ 0 ] ?? ''\n\t);\n\tconst allParsedUnits = parsedQuantitiesAndUnits.map(\n\t\t( value ) => value[ 1 ]\n\t);\n\n\tconst commonQuantity = allParsedQuantities.every(\n\t\t( v ) => v === allParsedQuantities[ 0 ]\n\t)\n\t\t? allParsedQuantities[ 0 ]\n\t\t: '';\n\n\t/**\n\t * The typeof === 'number' check is important. On reset actions, the incoming value\n\t * may be null or an empty string.\n\t *\n\t * Also, the value may also be zero (0), which is considered a valid unit value.\n\t *\n\t * typeof === 'number' is more specific for these cases, rather than relying on a\n\t * simple truthy check.\n\t */\n\tlet commonUnit;\n\tif ( typeof commonQuantity === 'number' ) {\n\t\tcommonUnit = mode( allParsedUnits );\n\t} else {\n\t\t// Set meaningful unit selection if no commonQuantity and user has previously\n\t\t// selected units without assigning values while controls were unlinked.\n\t\tcommonUnit =\n\t\t\tgetAllUnitFallback( selectedUnits ) ?? mode( allParsedUnits );\n\t}\n\n\treturn [ commonQuantity, commonUnit ].join( '' );\n}\n\n/**\n * Determine the most common unit selection to use as a fallback option.\n *\n * @param {Object} selectedUnits Current unit selections for individual sides.\n * @return {string} Most common unit selection.\n */\nexport function getAllUnitFallback( selectedUnits ) {\n\tif ( ! selectedUnits || typeof selectedUnits !== 'object' ) {\n\t\treturn undefined;\n\t}\n\n\tconst filteredUnits = Object.values( selectedUnits ).filter( Boolean );\n\n\treturn mode( filteredUnits );\n}\n\n/**\n * Checks to determine if values are mixed.\n *\n * @param {Object} values        Box values.\n * @param {Object} selectedUnits Box units.\n * @param {Array}  sides         Available box sides to evaluate.\n *\n * @return {boolean} Whether values are mixed.\n */\nexport function isValuesMixed( values = {}, selectedUnits, sides = ALL_SIDES ) {\n\tconst allValue = getAllValue( values, selectedUnits, sides );\n\tconst isMixed = isNaN( parseFloat( allValue ) );\n\n\treturn isMixed;\n}\n\n/**\n * Checks to determine if values are defined.\n *\n * @param {Object} values Box values.\n *\n * @return {boolean} Whether values are mixed.\n */\nexport function isValuesDefined( values ) {\n\treturn (\n\t\tvalues !== undefined &&\n\t\tObject.values( values ).filter(\n\t\t\t// Switching units when input is empty causes values only\n\t\t\t// containing units. This gives false positive on mixed values\n\t\t\t// unless filtered.\n\t\t\t( value ) => !! value && /\\d/.test( value )\n\t\t).length > 0\n\t);\n}\n\n/**\n * Get initial selected side, factoring in whether the sides are linked,\n * and whether the vertical / horizontal directions are grouped via splitOnAxis.\n *\n * @param {boolean} isLinked    Whether the box control's fields are linked.\n * @param {boolean} splitOnAxis Whether splitting by horizontal or vertical axis.\n * @return {string} The initial side.\n */\nexport function getInitialSide( isLinked, splitOnAxis ) {\n\tlet initialSide = 'all';\n\n\tif ( ! isLinked ) {\n\t\tinitialSide = splitOnAxis ? 'vertical' : 'top';\n\t}\n\n\treturn initialSide;\n}\n\n/**\n * Normalizes provided sides configuration to an array containing only top,\n * right, bottom and left. This essentially just maps `horizontal` or `vertical`\n * to their appropriate sides to facilitate correctly determining value for\n * all input control.\n *\n * @param {Array} sides Available sides for box control.\n * @return {Array} Normalized sides configuration.\n */\nexport function normalizeSides( sides ) {\n\tconst filteredSides = [];\n\n\tif ( ! sides?.length ) {\n\t\treturn ALL_SIDES;\n\t}\n\n\tif ( sides.includes( 'vertical' ) ) {\n\t\tfilteredSides.push( ...[ 'top', 'bottom' ] );\n\t} else if ( sides.includes( 'horizontal' ) ) {\n\t\tfilteredSides.push( ...[ 'left', 'right' ] );\n\t} else {\n\t\tconst newSides = ALL_SIDES.filter( ( side ) => sides.includes( side ) );\n\t\tfilteredSides.push( ...newSides );\n\t}\n\n\treturn filteredSides;\n}\n\n/**\n * Applies a value to an object representing top, right, bottom and left sides\n * while taking into account any custom side configuration.\n *\n * @param {Object}        currentValues The current values for each side.\n * @param {string|number} newValue      The value to apply to the sides object.\n * @param {string[]}      sides         Array defining valid sides.\n *\n * @return {Object} Object containing the updated values for each side.\n */\nexport function applyValueToSides( currentValues, newValue, sides ) {\n\tconst newValues = { ...currentValues };\n\n\tif ( sides?.length ) {\n\t\tsides.forEach( ( side ) => {\n\t\t\tif ( side === 'vertical' ) {\n\t\t\t\tnewValues.top = newValue;\n\t\t\t\tnewValues.bottom = newValue;\n\t\t\t} else if ( side === 'horizontal' ) {\n\t\t\t\tnewValues.left = newValue;\n\t\t\t\tnewValues.right = newValue;\n\t\t\t} else {\n\t\t\t\tnewValues[ side ] = newValue;\n\t\t\t}\n\t\t} );\n\t} else {\n\t\tALL_SIDES.forEach( ( side ) => ( newValues[ side ] = newValue ) );\n\t}\n\n\treturn newValues;\n}\n"]}

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

@@ -9,11 +9,17 @@ exports.default = void 0;
 
 var _element = require("@wordpress/element");
 
+var _icons = require("@wordpress/icons");
+
 var _button = _interopRequireDefault(require("../button"));
 
 var _colorPalette = _interopRequireDefault(require("../color-palette"));
 
-var _swatch = _interopRequireDefault(require("../swatch"));
+var _colorIndicator = _interopRequireDefault(require("../color-indicator"));
+
+var _icon = _interopRequireDefault(require("../icon"));
+
+var _hStack = require("../h-stack");
 
 /**
  * WordPress dependencies
@@ -34,11 +40,16 @@ function ColorOption(_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",
-    icon: (0, _element.createElement)(_swatch.default, {
-      fill: value
-    }),
     onClick: () => setIsOpen(prev => !prev)
-  }, label), isOpen && (0, _element.createElement)(_colorPalette.default, {
+  }, (0, _element.createElement)(_hStack.HStack, {
+    justify: "flex-start",
+    spacing: 2
+  }, value ? (0, _element.createElement)(_colorIndicator.default, {
+    colorValue: value,
+    className: "components-color-list-picker__swatch-color"
+  }) : (0, _element.createElement)(_icon.default, {
+    icon: _icons.swatch
+  }), (0, _element.createElement)("span", null, label))), isOpen && (0, _element.createElement)(_colorPalette.default, {
     className: "components-color-list-picker__color-picker",
     colors: colors,
     value: value,

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","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"]}
+{"version":3,"sources":["@wordpress/components/src/color-list-picker/index.js"],"names":["ColorOption","label","value","colors","disableCustomColors","enableAlpha","onChange","isOpen","setIsOpen","prev","swatch","ColorListPicker","labels","map","index","newColor","newColors","slice"],"mappings":";;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAbA;AACA;AACA;;AAIA;AACA;AACA;AAOA,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,OAAO,EAAG,MAAMA,SAAS,CAAIC,IAAF,IAAY,CAAEA,IAAhB;AAF1B,KAIC,4BAAC,cAAD;AAAQ,IAAA,OAAO,EAAC,YAAhB;AAA6B,IAAA,OAAO,EAAG;AAAvC,KACGP,KAAK,GACN,4BAAC,uBAAD;AACC,IAAA,UAAU,EAAGA,KADd;AAEC,IAAA,SAAS,EAAC;AAFX,IADM,GAMN,4BAAC,aAAD;AAAM,IAAA,IAAI,EAAGQ;AAAb,IAPF,EASC,0CAAQT,KAAR,CATD,CAJD,CADD,EAiBGM,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,IAlBF,CADD;AA+BA;;AAED,SAASM,eAAT,QAOI;AAAA,MAPsB;AACzBR,IAAAA,MADyB;AAEzBS,IAAAA,MAFyB;AAGzBV,IAAAA,KAAK,GAAG,EAHiB;AAIzBE,IAAAA,mBAJyB;AAKzBC,IAAAA,WALyB;AAMzBC,IAAAA;AANyB,GAOtB;AACH,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGM,MAAM,CAACC,GAAP,CAAY,CAAEZ,KAAF,EAASa,KAAT,KACb,4BAAC,WAAD;AACC,IAAA,GAAG,EAAGA,KADP;AAEC,IAAA,KAAK,EAAGb,KAFT;AAGC,IAAA,KAAK,EAAGC,KAAK,CAAEY,KAAF,CAHd;AAIC,IAAA,MAAM,EAAGX,MAJV;AAKC,IAAA,mBAAmB,EAAGC,mBALvB;AAMC,IAAA,WAAW,EAAGC,WANf;AAOC,IAAA,QAAQ,EAAKU,QAAF,IAAgB;AAC1B,YAAMC,SAAS,GAAGd,KAAK,CAACe,KAAN,EAAlB;AACAD,MAAAA,SAAS,CAAEF,KAAF,CAAT,GAAqBC,QAArB;AACAT,MAAAA,QAAQ,CAAEU,SAAF,CAAR;AACA;AAXF,IADC,CADH,CADD;AAmBA;;eAEcL,e","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport { swatch } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport ColorPalette from '../color-palette';\nimport ColorIndicator from '../color-indicator';\nimport Icon from '../icon';\nimport { HStack } from '../h-stack';\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\tonClick={ () => setIsOpen( ( prev ) => ! prev ) }\n\t\t\t>\n\t\t\t\t<HStack justify=\"flex-start\" spacing={ 2 }>\n\t\t\t\t\t{ value ? (\n\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\tcolorValue={ value }\n\t\t\t\t\t\t\tclassName=\"components-color-list-picker__swatch-color\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<Icon icon={ swatch } />\n\t\t\t\t\t) }\n\t\t\t\t\t<span>{ label }</span>\n\t\t\t\t</HStack>\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

@@ -7,14 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CustomColorPickerDropdown = CustomColorPickerDropdown;
 exports.default = ColorPalette;
-exports.extractColorNameFromCurrentValue = void 0;
+exports.showTransparentBackground = exports.extractColorNameFromCurrentValue = void 0;
 
 var _element = require("@wordpress/element");
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _lodash = require("lodash");
-
 var _colord = require("colord");
 
 var _names = _interopRequireDefault(require("colord/plugins/names"));
@@ -62,16 +60,17 @@ function SinglePalette(_ref) {
     actions
   } = _ref;
   const colorOptions = (0, _element.useMemo)(() => {
-    return (0, _lodash.map)(colors, _ref2 => {
+    return colors.map((_ref2, index) => {
       let {
         color,
         name
       } = _ref2;
       const colordColor = (0, _colord.colord)(color);
+      const isSelected = value === color;
       return (0, _element.createElement)(_circularOptionPicker.default.Option, {
-        key: color,
-        isSelected: value === color,
-        selectedIconProps: value === color ? {
+        key: `${color}-${index}`,
+        isSelected: isSelected,
+        selectedIconProps: isSelected ? {
           fill: colordColor.contrast() > colordColor.contrast('#000') ? '#fff' : '#000'
         } : {},
         tooltipText: name || // translators: %s: color hex code e.g: "#f00".
@@ -80,7 +79,7 @@ function SinglePalette(_ref) {
           backgroundColor: color,
           color
         },
-        onClick: value === color ? clearColor : () => onChange(color),
+        onClick: isSelected ? clearColor : () => onChange(color),
         "aria-label": name ? // translators: %s: The name of the color e.g: "vivid red".
         (0, _i18n.sprintf)((0, _i18n.__)('Color: %s'), name) : // translators: %s: color hex code e.g: "#f00".
         (0, _i18n.sprintf)((0, _i18n.__)('Color code: %s'), color)
@@ -127,15 +126,26 @@ function MultiplePalettes(_ref3) {
 function CustomColorPickerDropdown(_ref5) {
   let {
     isRenderedInSidebar,
+    popoverProps: receivedPopoverProps,
     ...props
   } = _ref5;
+  const popoverProps = (0, _element.useMemo)(() => ({
+    __unstableShift: true,
+    ...(isRenderedInSidebar ? {
+      // When in the sidebar: open to the left (stacking),
+      // leaving the same gap as the parent popover.
+      placement: 'left-start',
+      offset: 34
+    } : {
+      // Default behavior: open below the anchor
+      placement: 'bottom',
+      offset: 8
+    }),
+    ...receivedPopoverProps
+  }), [isRenderedInSidebar, receivedPopoverProps]);
   return (0, _element.createElement)(_dropdown.default, (0, _extends2.default)({
     contentClassName: "components-color-palette__custom-color-dropdown-content",
-    popoverProps: isRenderedInSidebar ? {
-      placement: 'left-start',
-      offset: 20,
-      __unstableShift: true
-    } : undefined
+    popoverProps: popoverProps
   }, props));
 }
 
@@ -175,6 +185,16 @@ const extractColorNameFromCurrentValue = function (currentValue) {
 
 exports.extractColorNameFromCurrentValue = extractColorNameFromCurrentValue;
 
+const showTransparentBackground = currentValue => {
+  if (typeof currentValue === 'undefined') {
+    return true;
+  }
+
+  return (0, _colord.colord)(currentValue).alpha() === 0;
+};
+
+exports.showTransparentBackground = showTransparentBackground;
+
 function ColorPalette(_ref6) {
   let {
     clearable = true,
@@ -222,7 +242,9 @@ function ColorPalette(_ref6) {
         "aria-haspopup": "true",
         onClick: onToggle,
         "aria-label": customColorAccessibleLabel,
-        style: {
+        style: showTransparentBackground(value) ? {
+          color: '#000'
+        } : {
           background: value,
           color: colordColor.contrast() > colordColor.contrast('#000') ? '#fff' : '#000'
         }

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

@@ -1 +1 @@
-{"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","CustomColorPickerDropdown","isRenderedInSidebar","props","placement","offset","__unstableShift","undefined","extractColorNameFromCurrentValue","currentValue","showMultiplePalettes","currentValueIsCssVariable","test","normalizedCurrentValue","toHex","colorPalettes","paletteColors","colorName","colorValue","normalizedColorValue","ColorPalette","clearable","disableCustomColors","enableAlpha","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","Component","renderCustomColorPicker","valueWithoutLeadingHash","startsWith","substring","buttonLabelName","customColorAccessibleLabel","isOpen","onToggle","background","Truncate"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/**\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 { Flex, FlexItem } from '../flex';\nimport { Truncate } from '../truncate';\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\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 function CustomColorPickerDropdown( { isRenderedInSidebar, ...props } ) {\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName=\"components-color-palette__custom-color-dropdown-content\"\n\t\t\tpopoverProps={\n\t\t\t\tisRenderedInSidebar\n\t\t\t\t\t? {\n\t\t\t\t\t\t\tplacement: 'left-start',\n\t\t\t\t\t\t\toffset: 20,\n\t\t\t\t\t\t\t__unstableShift: true,\n\t\t\t\t\t  }\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nexport const extractColorNameFromCurrentValue = (\n\tcurrentValue,\n\tcolors = [],\n\tshowMultiplePalettes = false\n) => {\n\tif ( ! currentValue ) {\n\t\treturn '';\n\t}\n\n\tconst currentValueIsCssVariable = /^var\\(/.test( currentValue );\n\tconst normalizedCurrentValue = currentValueIsCssVariable\n\t\t? currentValue\n\t\t: colord( currentValue ).toHex();\n\n\t// Normalize format of `colors` to simplify the following loop\n\tconst colorPalettes = showMultiplePalettes ? colors : [ { colors } ];\n\tfor ( const { colors: paletteColors } of colorPalettes ) {\n\t\tfor ( const { name: colorName, color: colorValue } of paletteColors ) {\n\t\t\tconst normalizedColorValue = currentValueIsCssVariable\n\t\t\t\t? colorValue\n\t\t\t\t: colord( colorValue ).toHex();\n\n\t\t\tif ( normalizedCurrentValue === normalizedColorValue ) {\n\t\t\t\treturn colorName;\n\t\t\t}\n\t\t}\n\t}\n\n\t// translators: shown when the user has picked a custom color (i.e not in the palette of colors).\n\treturn __( 'Custom' );\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\t__experimentalIsRenderedInSidebar = false,\n} ) {\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\tconst showMultiplePalettes =\n\t\t__experimentalHasMultipleOrigins && colors?.length;\n\tconst Component = showMultiplePalettes ? MultiplePalettes : 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\tconst colordColor = colord( value );\n\n\tconst valueWithoutLeadingHash = value?.startsWith( '#' )\n\t\t? value.substring( 1 )\n\t\t: value ?? '';\n\tconst buttonLabelName = useMemo(\n\t\t() =>\n\t\t\textractColorNameFromCurrentValue(\n\t\t\t\tvalue,\n\t\t\t\tcolors,\n\t\t\t\tshowMultiplePalettes\n\t\t\t),\n\t\t[ value, colors, showMultiplePalettes ]\n\t);\n\n\tconst customColorAccessibleLabel = !! valueWithoutLeadingHash\n\t\t? sprintf(\n\t\t\t\t// translators: %1$s: The name of the color e.g: \"vivid red\". %2$s: The color's hex code e.g: \"#f00\".\n\t\t\t\t__(\n\t\t\t\t\t'Custom color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'\n\t\t\t\t),\n\t\t\t\tbuttonLabelName,\n\t\t\t\tvalueWithoutLeadingHash\n\t\t  )\n\t\t: __( 'Custom color picker.' );\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ ! disableCustomColors && (\n\t\t\t\t<CustomColorPickerDropdown\n\t\t\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\t\t\trenderContent={ renderCustomColorPicker }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\tas={ 'button' }\n\t\t\t\t\t\t\tjustify=\"space-between\"\n\t\t\t\t\t\t\talign=\"flex-start\"\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={ customColorAccessibleLabel }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tbackground: value,\n\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t? '#fff'\n\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>\n\t\t\t\t\t\t\t<FlexItem\n\t\t\t\t\t\t\t\tisBlock\n\t\t\t\t\t\t\t\tas={ Truncate }\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-name\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ buttonLabelName }\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t<FlexItem\n\t\t\t\t\t\t\t\tas=\"span\"\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-value\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ valueWithoutLeadingHash }\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t</Flex>\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"]}
+{"version":3,"sources":["@wordpress/components/src/color-palette/index.js"],"names":["namesPlugin","a11yPlugin","SinglePalette","className","clearColor","colors","onChange","value","actions","colorOptions","map","index","color","name","colordColor","isSelected","fill","contrast","backgroundColor","MultiplePalettes","colorPalette","length","CustomColorPickerDropdown","isRenderedInSidebar","popoverProps","receivedPopoverProps","props","__unstableShift","placement","offset","extractColorNameFromCurrentValue","currentValue","showMultiplePalettes","currentValueIsCssVariable","test","normalizedCurrentValue","toHex","colorPalettes","paletteColors","colorName","colorValue","normalizedColorValue","showTransparentBackground","alpha","ColorPalette","clearable","disableCustomColors","enableAlpha","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","undefined","Component","renderCustomColorPicker","valueWithoutLeadingHash","startsWith","substring","buttonLabelName","customColorAccessibleLabel","isOpen","onToggle","background","Truncate"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\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 { Flex, FlexItem } from '../flex';\nimport { Truncate } from '../truncate';\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 colors.map( ( { color, name }, index ) => {\n\t\t\tconst colordColor = colord( color );\n\t\t\tconst isSelected = value === color;\n\n\t\t\treturn (\n\t\t\t\t<CircularOptionPicker.Option\n\t\t\t\t\tkey={ `${ color }-${ index }` }\n\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\tselectedIconProps={\n\t\t\t\t\t\tisSelected\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\tisSelected ? 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 function CustomColorPickerDropdown( {\n\tisRenderedInSidebar,\n\tpopoverProps: receivedPopoverProps,\n\t...props\n} ) {\n\tconst popoverProps = useMemo(\n\t\t() => ( {\n\t\t\t__unstableShift: true,\n\t\t\t...( isRenderedInSidebar\n\t\t\t\t? {\n\t\t\t\t\t\t// When in the sidebar: open to the left (stacking),\n\t\t\t\t\t\t// leaving the same gap as the parent popover.\n\t\t\t\t\t\tplacement: 'left-start',\n\t\t\t\t\t\toffset: 34,\n\t\t\t\t  }\n\t\t\t\t: {\n\t\t\t\t\t\t// Default behavior: open below the anchor\n\t\t\t\t\t\tplacement: 'bottom',\n\t\t\t\t\t\toffset: 8,\n\t\t\t\t  } ),\n\t\t\t...receivedPopoverProps,\n\t\t} ),\n\t\t[ isRenderedInSidebar, receivedPopoverProps ]\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName=\"components-color-palette__custom-color-dropdown-content\"\n\t\t\tpopoverProps={ popoverProps }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nexport const extractColorNameFromCurrentValue = (\n\tcurrentValue,\n\tcolors = [],\n\tshowMultiplePalettes = false\n) => {\n\tif ( ! currentValue ) {\n\t\treturn '';\n\t}\n\n\tconst currentValueIsCssVariable = /^var\\(/.test( currentValue );\n\tconst normalizedCurrentValue = currentValueIsCssVariable\n\t\t? currentValue\n\t\t: colord( currentValue ).toHex();\n\n\t// Normalize format of `colors` to simplify the following loop\n\tconst colorPalettes = showMultiplePalettes ? colors : [ { colors } ];\n\tfor ( const { colors: paletteColors } of colorPalettes ) {\n\t\tfor ( const { name: colorName, color: colorValue } of paletteColors ) {\n\t\t\tconst normalizedColorValue = currentValueIsCssVariable\n\t\t\t\t? colorValue\n\t\t\t\t: colord( colorValue ).toHex();\n\n\t\t\tif ( normalizedCurrentValue === normalizedColorValue ) {\n\t\t\t\treturn colorName;\n\t\t\t}\n\t\t}\n\t}\n\n\t// translators: shown when the user has picked a custom color (i.e not in the palette of colors).\n\treturn __( 'Custom' );\n};\n\nexport const showTransparentBackground = ( currentValue ) => {\n\tif ( typeof currentValue === 'undefined' ) {\n\t\treturn true;\n\t}\n\treturn colord( currentValue ).alpha() === 0;\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\t__experimentalIsRenderedInSidebar = false,\n} ) {\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\tconst showMultiplePalettes =\n\t\t__experimentalHasMultipleOrigins && colors?.length;\n\tconst Component = showMultiplePalettes ? MultiplePalettes : 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\tconst colordColor = colord( value );\n\n\tconst valueWithoutLeadingHash = value?.startsWith( '#' )\n\t\t? value.substring( 1 )\n\t\t: value ?? '';\n\tconst buttonLabelName = useMemo(\n\t\t() =>\n\t\t\textractColorNameFromCurrentValue(\n\t\t\t\tvalue,\n\t\t\t\tcolors,\n\t\t\t\tshowMultiplePalettes\n\t\t\t),\n\t\t[ value, colors, showMultiplePalettes ]\n\t);\n\n\tconst customColorAccessibleLabel = !! valueWithoutLeadingHash\n\t\t? sprintf(\n\t\t\t\t// translators: %1$s: The name of the color e.g: \"vivid red\". %2$s: The color's hex code e.g: \"#f00\".\n\t\t\t\t__(\n\t\t\t\t\t'Custom color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'\n\t\t\t\t),\n\t\t\t\tbuttonLabelName,\n\t\t\t\tvalueWithoutLeadingHash\n\t\t  )\n\t\t: __( 'Custom color picker.' );\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ ! disableCustomColors && (\n\t\t\t\t<CustomColorPickerDropdown\n\t\t\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\t\t\trenderContent={ renderCustomColorPicker }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\tas={ 'button' }\n\t\t\t\t\t\t\tjustify=\"space-between\"\n\t\t\t\t\t\t\talign=\"flex-start\"\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={ customColorAccessibleLabel }\n\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\tshowTransparentBackground( value )\n\t\t\t\t\t\t\t\t\t? { color: '#000' }\n\t\t\t\t\t\t\t\t\t: {\n\t\t\t\t\t\t\t\t\t\t\tbackground: value,\n\t\t\t\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\t\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<FlexItem\n\t\t\t\t\t\t\t\tisBlock\n\t\t\t\t\t\t\t\tas={ Truncate }\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-name\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ buttonLabelName }\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t<FlexItem\n\t\t\t\t\t\t\t\tas=\"span\"\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-value\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ valueWithoutLeadingHash }\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t</Flex>\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/color-palette/index.native.js

@@ -62,9 +62,9 @@ function ColorPalette(_ref) {
   const isGradientSegment = currentSegment === _utils.colorsUtils.segments[1];
   const scale = (0, _element.useRef)(new _reactNative.Animated.Value(1)).current;
   const opacity = (0, _element.useRef)(new _reactNative.Animated.Value(1)).current;
-  const defaultColors = (0, _lodash.uniq)((0, _lodash.map)(defaultSettings.colors, 'color'));
-  const mergedColors = (0, _lodash.uniq)((0, _lodash.map)(defaultSettings.allColors, 'color'));
-  const defaultGradientColors = (0, _lodash.uniq)((0, _lodash.map)(defaultSettings.gradients, 'gradient'));
+  const defaultColors = [...new Set((0, _lodash.map)(defaultSettings.colors, 'color'))];
+  const mergedColors = [...new Set((0, _lodash.map)(defaultSettings.allColors, 'color'))];
+  const defaultGradientColors = [...new Set((0, _lodash.map)(defaultSettings.gradients, 'gradient'))];
   const colors = isGradientSegment ? defaultGradientColors : defaultColors;
   const customIndicatorColor = isGradientSegment ? activeColor : customSwatchGradients;
   const isCustomGradientColor = isGradientColor && isSelectedCustom();