@webiny/app-admin 5.43.2 → 6.0.0-alpha.0

package/components/IconPicker/plugins/emojisPlugin.js

@@ -1,64 +1,17 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.EmojiPlugin = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
-var _react = _interopRequireDefault(require("react"));
-var _mobxReactLite = require("mobx-react-lite");
-var _Menu = require("@webiny/ui/Menu");
-var _ = require("..");
-var _IconPickerTab = require("../IconPickerTab");
-var _IconRenderer = require("../IconRenderer");
-var _IconPickerPresenterProvider = require("../IconPickerPresenterProvider");
-var _config = require("../config");
-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)."; }
-var SKIN_TONES = ["", "\uD83C\uDFFB", "\uD83C\uDFFC", "\uD83C\uDFFD", "\uD83C\uDFFE", "\uD83C\uDFFF"];
-var SkinToneSelectWrapper = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
-  target: "edkk33y2"
-} : {
-  target: "edkk33y2",
-  label: "SkinToneSelectWrapper"
-})(process.env.NODE_ENV === "production" ? {
-  name: "12fvj0x",
-  styles: "padding:4px;width:32px;flex-shrink:0;background:#fff;border-radius:1px;box-shadow:0 0 0 1px rgba(0, 0, 0, 0.1);display:inline-block;cursor:pointer"
-} : {
-  name: "12fvj0x",
-  styles: "padding:4px;width:32px;flex-shrink:0;background:#fff;border-radius:1px;box-shadow:0 0 0 1px rgba(0, 0, 0, 0.1);display:inline-block;cursor:pointer",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImVtb2ppc1BsdWdpbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZXdDIiwiZmlsZSI6ImVtb2ppc1BsdWdpbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyBvYnNlcnZlciB9IGZyb20gXCJtb2J4LXJlYWN0LWxpdGVcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuXG5pbXBvcnQgeyBNZW51IH0gZnJvbSBcIkB3ZWJpbnkvdWkvTWVudVwiO1xuXG5pbXBvcnQgeyB1c2VJY29uIH0gZnJvbSBcIi4uXCI7XG5pbXBvcnQgeyBJY29uUGlja2VyVGFiIH0gZnJvbSBcIi4uL0ljb25QaWNrZXJUYWJcIjtcbmltcG9ydCB7IEljb25Qcm92aWRlciB9IGZyb20gXCIuLi9JY29uUmVuZGVyZXJcIjtcbmltcG9ydCB7IHVzZUljb25QaWNrZXIgfSBmcm9tIFwiLi4vSWNvblBpY2tlclByZXNlbnRlclByb3ZpZGVyXCI7XG5pbXBvcnQgeyBJY29uUGlja2VyQ29uZmlnIH0gZnJvbSBcIi4uL2NvbmZpZ1wiO1xuaW1wb3J0IHsgSWNvbiB9IGZyb20gXCIuLi90eXBlc1wiO1xuXG5jb25zdCBTS0lOX1RPTkVTID0gW1wiXCIsIFwiXFx1ezFmM2ZifVwiLCBcIlxcdXsxZjNmY31cIiwgXCJcXHV7MWYzZmR9XCIsIFwiXFx1ezFmM2ZlfVwiLCBcIlxcdXsxZjNmZn1cIl07XG5cbmNvbnN0IFNraW5Ub25lU2VsZWN0V3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gICAgcGFkZGluZzogNHB4O1xuICAgIHdpZHRoOiAzMnB4O1xuICAgIGZsZXgtc2hyaW5rOiAwO1xuICAgIGJhY2tncm91bmQ6ICNmZmY7XG4gICAgYm9yZGVyLXJhZGl1czogMXB4O1xuICAgIGJveC1zaGFkb3c6IDAgMCAwIDFweCByZ2JhKDAsIDAsIDAsIDAuMSk7XG4gICAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICAgIGN1cnNvcjogcG9pbnRlcjtcbmA7XG5cbmNvbnN0IFNraW5Ub25lc0dyaWQgPSBzdHlsZWQuZGl2YFxuICAgIGRpc3BsYXk6IGdyaWQ7XG4gICAgZ2FwOiA0cHg7XG4gICAgcGFkZGluZzogNHB4O1xuYDtcblxuY29uc3QgU2tpblRvbmUgPSBzdHlsZWQuZGl2YFxuICAgIGN1cnNvcjogcG9pbnRlcjtcbmA7XG5cbi8qKlxuICogTk9URTogQXZvaWQgdXNpbmcgYEBlbW90aW9uL3N0eWxlZGAgaW4gaWNvbiByZW5kZXJlciBjb21wb25lbnRzIGFjcm9zcyBhbGwgcGx1Z2lucy5cbiAqIFRoaXMgaXMgY3J1Y2lhbCBmb3Igc2VyaWFsaXppbmcgY29tcG9uZW50IHJlbmRlcmluZyBpbnRvIGEgc3RyaW5nIHZhbHVlIGFzIHBsYWluIEhUTUwsXG4gKiB3aGljaCBpcyBuZWNlc3NhcnkgZm9yIHVzYWdlIGluIHRoZSB3ZWJzaXRlIGFwcGxpY2F0aW9uLiBQbGVhc2UgdXNlIGlubGluZSBzdHlsZXMgaGVyZVxuICogdG8gZW5zdXJlIHByb3BlciBzZXJpYWxpemF0aW9uLlxuICovXG5cbmludGVyZmFjZSBFbW9qaSBleHRlbmRzIEljb24ge1xuICAgIHNraW5Ub25lOiBzdHJpbmc7XG4gICAgc2tpblRvbmVTdXBwb3J0OiBib29sZWFuO1xufVxuXG5jb25zdCBFbW9qaSA9ICgpID0+IHtcbiAgICBjb25zdCB7IGljb24sIHNpemUgfSA9IHVzZUljb248RW1vamk+KCk7XG5cbiAgICByZXR1cm4gKFxuICAgICAgICA8ZGl2XG4gICAgICAgICAgICBzdHlsZT17e1xuICAgICAgICAgICAgICAgIGRpc3BsYXk6IFwiaW5saW5lLWJsb2NrXCIsXG4gICAgICAgICAgICAgICAgd2lkdGg6IGAke3NpemV9cHhgLFxuICAgICAgICAgICAgICAgIGhlaWdodDogYCR7c2l6ZX1weGAsXG4gICAgICAgICAgICAgICAgZm9udFNpemU6IGAkeyhzaXplICogNCkgLyA1fXB4YCxcbiAgICAgICAgICAgICAgICBsaW5lSGVpZ2h0OiBgJHtzaXplfXB4YCxcbiAgICAgICAgICAgICAgICBjb2xvcjogXCJibGFja1wiXG4gICAgICAgICAgICB9fVxuICAgICAgICA+XG4gICAgICAgICAgICB7aWNvbi5za2luVG9uZSA/IGljb24udmFsdWUgKyBpY29uLnNraW5Ub25lIDogaWNvbi52YWx1ZX1cbiAgICAgICAgPC9kaXY+XG4gICAgKTtcbn07XG5cbmludGVyZmFjZSBTa2luVG9uZVNlbGVjdFByb3BzIHtcbiAgICBpY29uOiBJY29uIHwgbnVsbDtcbiAgICBoYXNTa2luVG9uZVN1cHBvcnQ6IGJvb2xlYW47XG4gICAgb25DaGFuZ2U6IChza2luVG9uZTogc3RyaW5nKSA9PiB2b2lkO1xufVxuXG5jb25zdCBTa2luVG9uZVNlbGVjdCA9ICh7IGljb24sIGhhc1NraW5Ub25lU3VwcG9ydCwgb25DaGFuZ2UgfTogU2tpblRvbmVTZWxlY3RQcm9wcykgPT4ge1xuICAgIGlmICghaWNvbiB8fCAhaXNFbW9qaShpY29uKSkge1xuICAgICAgICByZXR1cm4gPFNraW5Ub25lU2VsZWN0V3JhcHBlciAvPjtcbiAgICB9XG5cbiAgICBpZiAoIWhhc1NraW5Ub25lU3VwcG9ydCkge1xuICAgICAgICByZXR1cm4gKFxuICAgICAgICAgICAgPFNraW5Ub25lU2VsZWN0V3JhcHBlcj5cbiAgICAgICAgICAgICAgICA8SWNvblByb3ZpZGVyIGljb249e2ljb259PlxuICAgICAgICAgICAgICAgICAgICA8RW1vamkgLz5cbiAgICAgICAgICAgICAgICA8L0ljb25Qcm92aWRlcj5cbiAgICAgICAgICAgIDwvU2tpblRvbmVTZWxlY3RXcmFwcGVyPlxuICAgICAgICApO1xuICAgIH1cblxuICAgIHJldHVybiAoXG4gICAgICAgIDxNZW51XG4gICAgICAgICAgICBoYW5kbGU9e1xuICAgICAgICAgICAgICAgIDxTa2luVG9uZVNlbGVjdFdyYXBwZXI+XG4gICAgICAgICAgICAgICAgICAgIDxJY29uUHJvdmlkZXIgaWNvbj17aWNvbn0+XG4gICAgICAgICAgICAgICAgICAgICAgICA8RW1vamkgLz5cbiAgICAgICAgICAgICAgICAgICAgPC9JY29uUHJvdmlkZXI+XG4gICAgICAgICAgICAgICAgPC9Ta2luVG9uZVNlbGVjdFdyYXBwZXI+XG4gICAgICAgICAgICB9XG4gICAgICAgICAgICByZW5kZXI9eyh7IGNsb3NlTWVudSB9KSA9PiAoXG4gICAgICAgICAgICAgICAgPFNraW5Ub25lc0dyaWQ+XG4gICAgICAgICAgICAgICAgICAgIHtTS0lOX1RPTkVTLm1hcCgoc2tpblRvbmUsIGluZGV4KSA9PiAoXG4gICAgICAgICAgICAgICAgICAgICAgICA8U2tpblRvbmVcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBrZXk9e2luZGV4fVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIG9uQ2xpY2s9eygpID0+IHtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgb25DaGFuZ2Uoc2tpblRvbmUpO1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBjbG9zZU1lbnUoKTtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICB9fVxuICAgICAgICAgICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxJY29uUHJvdmlkZXIgaWNvbj17eyAuLi5pY29uLCBza2luVG9uZSB9fT5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPEVtb2ppIC8+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9JY29uUHJvdmlkZXI+XG4gICAgICAgICAgICAgICAgICAgICAgICA8L1NraW5Ub25lPlxuICAgICAgICAgICAgICAgICAgICApKX1cbiAgICAgICAgICAgICAgICA8L1NraW5Ub25lc0dyaWQ+XG4gICAgICAgICAgICApfVxuICAgICAgICAvPlxuICAgICk7XG59O1xuXG4vKipcbiAqIEBzZWUgaHR0cHM6Ly93d3cudHlwZXNjcmlwdGxhbmcub3JnL2RvY3MvaGFuZGJvb2svMi9uYXJyb3dpbmcuaHRtbCN1c2luZy10eXBlLXByZWRpY2F0ZXNcbiAqL1xuY29uc3QgaXNFbW9qaSA9IChpY29uOiBJY29uIHwgbnVsbCk6IGljb24gaXMgRW1vamkgPT4ge1xuICAgIGlmICghaWNvbikge1xuICAgICAgICByZXR1cm4gZmFsc2U7XG4gICAgfVxuICAgIHJldHVybiBpY29uLnR5cGUgPT09IFwiZW1vamlcIjtcbn07XG5cbmNvbnN0IEVtb2ppVGFiID0gb2JzZXJ2ZXIoKCkgPT4ge1xuICAgIGNvbnN0IHByZXNlbnRlciA9IHVzZUljb25QaWNrZXIoKTtcbiAgICBjb25zdCB7IHNlbGVjdGVkSWNvbiB9ID0gcHJlc2VudGVyLnZtO1xuXG4gICAgY29uc3Qgb25Ta2luVG9uZUNoYW5nZSA9IChza2luVG9uZTogc3RyaW5nKSA9PiB7XG4gICAgICAgIGlmIChpc0Vtb2ppKHNlbGVjdGVkSWNvbikpIHtcbiAgICAgICAgICAgIHByZXNlbnRlci5zZXRJY29uKHsgLi4uc2VsZWN0ZWRJY29uLCBza2luVG9uZSB9KTtcbiAgICAgICAgfVxuICAgIH07XG5cbiAgICBjb25zdCBvbkljb25TZWxlY3QgPSAoaWNvbjogSWNvbikgPT4ge1xuICAgICAgICBwcmVzZW50ZXIuc2V0SWNvbihpY29uKTtcbiAgICAgICAgcHJlc2VudGVyLmNsb3NlTWVudSgpO1xuICAgIH07XG5cbiAgICBjb25zdCBoYXNTa2luVG9uZVN1cHBvcnQgPSBpc0Vtb2ppKHNlbGVjdGVkSWNvbikgPyBzZWxlY3RlZEljb24uc2tpblRvbmVTdXBwb3J0IDogZmFsc2U7XG5cbiAgICByZXR1cm4gKFxuICAgICAgICA8SWNvblBpY2tlclRhYlxuICAgICAgICAgICAgbGFiZWw9e1wiRW1vamlzXCJ9XG4gICAgICAgICAgICBvbkNoYW5nZT17b25JY29uU2VsZWN0fVxuICAgICAgICAgICAgYWN0aW9ucz17XG4gICAgICAgICAgICAgICAgPFNraW5Ub25lU2VsZWN0XG4gICAgICAgICAgICAgICAgICAgIGljb249e3NlbGVjdGVkSWNvbn1cbiAgICAgICAgICAgICAgICAgICAgaGFzU2tpblRvbmVTdXBwb3J0PXtoYXNTa2luVG9uZVN1cHBvcnR9XG4gICAgICAgICAgICAgICAgICAgIG9uQ2hhbmdlPXtvblNraW5Ub25lQ2hhbmdlfVxuICAgICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICB9XG4gICAgICAgIC8+XG4gICAgKTtcbn0pO1xuXG5leHBvcnQgY29uc3QgRW1vamlQbHVnaW4gPSAoKSA9PiB7XG4gICAgcmV0dXJuIChcbiAgICAgICAgPEljb25QaWNrZXJDb25maWc+XG4gICAgICAgICAgICA8SWNvblBpY2tlckNvbmZpZy5JY29uVHlwZSBuYW1lPXtcImVtb2ppXCJ9PlxuICAgICAgICAgICAgICAgIDxJY29uUGlja2VyQ29uZmlnLkljb25UeXBlLkljb24gZWxlbWVudD17PEVtb2ppIC8+fSAvPlxuICAgICAgICAgICAgICAgIDxJY29uUGlja2VyQ29uZmlnLkljb25UeXBlLlRhYiBlbGVtZW50PXs8RW1vamlUYWIgLz59IC8+XG4gICAgICAgICAgICA8L0ljb25QaWNrZXJDb25maWcuSWNvblR5cGU+XG4gICAgICAgIDwvSWNvblBpY2tlckNvbmZpZz5cbiAgICApO1xufTtcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-var SkinTonesGrid = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
-  target: "edkk33y1"
-} : {
-  target: "edkk33y1",
-  label: "SkinTonesGrid"
-})(process.env.NODE_ENV === "production" ? {
-  name: "wm0jin",
-  styles: "display:grid;gap:4px;padding:4px"
-} : {
-  name: "wm0jin",
-  styles: "display:grid;gap:4px;padding:4px",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImVtb2ppc1BsdWdpbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMEJnQyIsImZpbGUiOiJlbW9qaXNQbHVnaW4udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHsgb2JzZXJ2ZXIgfSBmcm9tIFwibW9ieC1yZWFjdC1saXRlXCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHsgTWVudSB9IGZyb20gXCJAd2ViaW55L3VpL01lbnVcIjtcblxuaW1wb3J0IHsgdXNlSWNvbiB9IGZyb20gXCIuLlwiO1xuaW1wb3J0IHsgSWNvblBpY2tlclRhYiB9IGZyb20gXCIuLi9JY29uUGlja2VyVGFiXCI7XG5pbXBvcnQgeyBJY29uUHJvdmlkZXIgfSBmcm9tIFwiLi4vSWNvblJlbmRlcmVyXCI7XG5pbXBvcnQgeyB1c2VJY29uUGlja2VyIH0gZnJvbSBcIi4uL0ljb25QaWNrZXJQcmVzZW50ZXJQcm92aWRlclwiO1xuaW1wb3J0IHsgSWNvblBpY2tlckNvbmZpZyB9IGZyb20gXCIuLi9jb25maWdcIjtcbmltcG9ydCB7IEljb24gfSBmcm9tIFwiLi4vdHlwZXNcIjtcblxuY29uc3QgU0tJTl9UT05FUyA9IFtcIlwiLCBcIlxcdXsxZjNmYn1cIiwgXCJcXHV7MWYzZmN9XCIsIFwiXFx1ezFmM2ZkfVwiLCBcIlxcdXsxZjNmZX1cIiwgXCJcXHV7MWYzZmZ9XCJdO1xuXG5jb25zdCBTa2luVG9uZVNlbGVjdFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICAgIHBhZGRpbmc6IDRweDtcbiAgICB3aWR0aDogMzJweDtcbiAgICBmbGV4LXNocmluazogMDtcbiAgICBiYWNrZ3JvdW5kOiAjZmZmO1xuICAgIGJvcmRlci1yYWRpdXM6IDFweDtcbiAgICBib3gtc2hhZG93OiAwIDAgMCAxcHggcmdiYSgwLCAwLCAwLCAwLjEpO1xuICAgIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgICBjdXJzb3I6IHBvaW50ZXI7XG5gO1xuXG5jb25zdCBTa2luVG9uZXNHcmlkID0gc3R5bGVkLmRpdmBcbiAgICBkaXNwbGF5OiBncmlkO1xuICAgIGdhcDogNHB4O1xuICAgIHBhZGRpbmc6IDRweDtcbmA7XG5cbmNvbnN0IFNraW5Ub25lID0gc3R5bGVkLmRpdmBcbiAgICBjdXJzb3I6IHBvaW50ZXI7XG5gO1xuXG4vKipcbiAqIE5PVEU6IEF2b2lkIHVzaW5nIGBAZW1vdGlvbi9zdHlsZWRgIGluIGljb24gcmVuZGVyZXIgY29tcG9uZW50cyBhY3Jvc3MgYWxsIHBsdWdpbnMuXG4gKiBUaGlzIGlzIGNydWNpYWwgZm9yIHNlcmlhbGl6aW5nIGNvbXBvbmVudCByZW5kZXJpbmcgaW50byBhIHN0cmluZyB2YWx1ZSBhcyBwbGFpbiBIVE1MLFxuICogd2hpY2ggaXMgbmVjZXNzYXJ5IGZvciB1c2FnZSBpbiB0aGUgd2Vic2l0ZSBhcHBsaWNhdGlvbi4gUGxlYXNlIHVzZSBpbmxpbmUgc3R5bGVzIGhlcmVcbiAqIHRvIGVuc3VyZSBwcm9wZXIgc2VyaWFsaXphdGlvbi5cbiAqL1xuXG5pbnRlcmZhY2UgRW1vamkgZXh0ZW5kcyBJY29uIHtcbiAgICBza2luVG9uZTogc3RyaW5nO1xuICAgIHNraW5Ub25lU3VwcG9ydDogYm9vbGVhbjtcbn1cblxuY29uc3QgRW1vamkgPSAoKSA9PiB7XG4gICAgY29uc3QgeyBpY29uLCBzaXplIH0gPSB1c2VJY29uPEVtb2ppPigpO1xuXG4gICAgcmV0dXJuIChcbiAgICAgICAgPGRpdlxuICAgICAgICAgICAgc3R5bGU9e3tcbiAgICAgICAgICAgICAgICBkaXNwbGF5OiBcImlubGluZS1ibG9ja1wiLFxuICAgICAgICAgICAgICAgIHdpZHRoOiBgJHtzaXplfXB4YCxcbiAgICAgICAgICAgICAgICBoZWlnaHQ6IGAke3NpemV9cHhgLFxuICAgICAgICAgICAgICAgIGZvbnRTaXplOiBgJHsoc2l6ZSAqIDQpIC8gNX1weGAsXG4gICAgICAgICAgICAgICAgbGluZUhlaWdodDogYCR7c2l6ZX1weGAsXG4gICAgICAgICAgICAgICAgY29sb3I6IFwiYmxhY2tcIlxuICAgICAgICAgICAgfX1cbiAgICAgICAgPlxuICAgICAgICAgICAge2ljb24uc2tpblRvbmUgPyBpY29uLnZhbHVlICsgaWNvbi5za2luVG9uZSA6IGljb24udmFsdWV9XG4gICAgICAgIDwvZGl2PlxuICAgICk7XG59O1xuXG5pbnRlcmZhY2UgU2tpblRvbmVTZWxlY3RQcm9wcyB7XG4gICAgaWNvbjogSWNvbiB8IG51bGw7XG4gICAgaGFzU2tpblRvbmVTdXBwb3J0OiBib29sZWFuO1xuICAgIG9uQ2hhbmdlOiAoc2tpblRvbmU6IHN0cmluZykgPT4gdm9pZDtcbn1cblxuY29uc3QgU2tpblRvbmVTZWxlY3QgPSAoeyBpY29uLCBoYXNTa2luVG9uZVN1cHBvcnQsIG9uQ2hhbmdlIH06IFNraW5Ub25lU2VsZWN0UHJvcHMpID0+IHtcbiAgICBpZiAoIWljb24gfHwgIWlzRW1vamkoaWNvbikpIHtcbiAgICAgICAgcmV0dXJuIDxTa2luVG9uZVNlbGVjdFdyYXBwZXIgLz47XG4gICAgfVxuXG4gICAgaWYgKCFoYXNTa2luVG9uZVN1cHBvcnQpIHtcbiAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICAgIDxTa2luVG9uZVNlbGVjdFdyYXBwZXI+XG4gICAgICAgICAgICAgICAgPEljb25Qcm92aWRlciBpY29uPXtpY29ufT5cbiAgICAgICAgICAgICAgICAgICAgPEVtb2ppIC8+XG4gICAgICAgICAgICAgICAgPC9JY29uUHJvdmlkZXI+XG4gICAgICAgICAgICA8L1NraW5Ub25lU2VsZWN0V3JhcHBlcj5cbiAgICAgICAgKTtcbiAgICB9XG5cbiAgICByZXR1cm4gKFxuICAgICAgICA8TWVudVxuICAgICAgICAgICAgaGFuZGxlPXtcbiAgICAgICAgICAgICAgICA8U2tpblRvbmVTZWxlY3RXcmFwcGVyPlxuICAgICAgICAgICAgICAgICAgICA8SWNvblByb3ZpZGVyIGljb249e2ljb259PlxuICAgICAgICAgICAgICAgICAgICAgICAgPEVtb2ppIC8+XG4gICAgICAgICAgICAgICAgICAgIDwvSWNvblByb3ZpZGVyPlxuICAgICAgICAgICAgICAgIDwvU2tpblRvbmVTZWxlY3RXcmFwcGVyPlxuICAgICAgICAgICAgfVxuICAgICAgICAgICAgcmVuZGVyPXsoeyBjbG9zZU1lbnUgfSkgPT4gKFxuICAgICAgICAgICAgICAgIDxTa2luVG9uZXNHcmlkPlxuICAgICAgICAgICAgICAgICAgICB7U0tJTl9UT05FUy5tYXAoKHNraW5Ub25lLCBpbmRleCkgPT4gKFxuICAgICAgICAgICAgICAgICAgICAgICAgPFNraW5Ub25lXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAga2V5PXtpbmRleH1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBvbkNsaWNrPXsoKSA9PiB7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIG9uQ2hhbmdlKHNraW5Ub25lKTtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgY2xvc2VNZW51KCk7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgfX1cbiAgICAgICAgICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8SWNvblByb3ZpZGVyIGljb249e3sgLi4uaWNvbiwgc2tpblRvbmUgfX0+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxFbW9qaSAvPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvSWNvblByb3ZpZGVyPlxuICAgICAgICAgICAgICAgICAgICAgICAgPC9Ta2luVG9uZT5cbiAgICAgICAgICAgICAgICAgICAgKSl9XG4gICAgICAgICAgICAgICAgPC9Ta2luVG9uZXNHcmlkPlxuICAgICAgICAgICAgKX1cbiAgICAgICAgLz5cbiAgICApO1xufTtcblxuLyoqXG4gKiBAc2VlIGh0dHBzOi8vd3d3LnR5cGVzY3JpcHRsYW5nLm9yZy9kb2NzL2hhbmRib29rLzIvbmFycm93aW5nLmh0bWwjdXNpbmctdHlwZS1wcmVkaWNhdGVzXG4gKi9cbmNvbnN0IGlzRW1vamkgPSAoaWNvbjogSWNvbiB8IG51bGwpOiBpY29uIGlzIEVtb2ppID0+IHtcbiAgICBpZiAoIWljb24pIHtcbiAgICAgICAgcmV0dXJuIGZhbHNlO1xuICAgIH1cbiAgICByZXR1cm4gaWNvbi50eXBlID09PSBcImVtb2ppXCI7XG59O1xuXG5jb25zdCBFbW9qaVRhYiA9IG9ic2VydmVyKCgpID0+IHtcbiAgICBjb25zdCBwcmVzZW50ZXIgPSB1c2VJY29uUGlja2VyKCk7XG4gICAgY29uc3QgeyBzZWxlY3RlZEljb24gfSA9IHByZXNlbnRlci52bTtcblxuICAgIGNvbnN0IG9uU2tpblRvbmVDaGFuZ2UgPSAoc2tpblRvbmU6IHN0cmluZykgPT4ge1xuICAgICAgICBpZiAoaXNFbW9qaShzZWxlY3RlZEljb24pKSB7XG4gICAgICAgICAgICBwcmVzZW50ZXIuc2V0SWNvbih7IC4uLnNlbGVjdGVkSWNvbiwgc2tpblRvbmUgfSk7XG4gICAgICAgIH1cbiAgICB9O1xuXG4gICAgY29uc3Qgb25JY29uU2VsZWN0ID0gKGljb246IEljb24pID0+IHtcbiAgICAgICAgcHJlc2VudGVyLnNldEljb24oaWNvbik7XG4gICAgICAgIHByZXNlbnRlci5jbG9zZU1lbnUoKTtcbiAgICB9O1xuXG4gICAgY29uc3QgaGFzU2tpblRvbmVTdXBwb3J0ID0gaXNFbW9qaShzZWxlY3RlZEljb24pID8gc2VsZWN0ZWRJY29uLnNraW5Ub25lU3VwcG9ydCA6IGZhbHNlO1xuXG4gICAgcmV0dXJuIChcbiAgICAgICAgPEljb25QaWNrZXJUYWJcbiAgICAgICAgICAgIGxhYmVsPXtcIkVtb2ppc1wifVxuICAgICAgICAgICAgb25DaGFuZ2U9e29uSWNvblNlbGVjdH1cbiAgICAgICAgICAgIGFjdGlvbnM9e1xuICAgICAgICAgICAgICAgIDxTa2luVG9uZVNlbGVjdFxuICAgICAgICAgICAgICAgICAgICBpY29uPXtzZWxlY3RlZEljb259XG4gICAgICAgICAgICAgICAgICAgIGhhc1NraW5Ub25lU3VwcG9ydD17aGFzU2tpblRvbmVTdXBwb3J0fVxuICAgICAgICAgICAgICAgICAgICBvbkNoYW5nZT17b25Ta2luVG9uZUNoYW5nZX1cbiAgICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgfVxuICAgICAgICAvPlxuICAgICk7XG59KTtcblxuZXhwb3J0IGNvbnN0IEVtb2ppUGx1Z2luID0gKCkgPT4ge1xuICAgIHJldHVybiAoXG4gICAgICAgIDxJY29uUGlja2VyQ29uZmlnPlxuICAgICAgICAgICAgPEljb25QaWNrZXJDb25maWcuSWNvblR5cGUgbmFtZT17XCJlbW9qaVwifT5cbiAgICAgICAgICAgICAgICA8SWNvblBpY2tlckNvbmZpZy5JY29uVHlwZS5JY29uIGVsZW1lbnQ9ezxFbW9qaSAvPn0gLz5cbiAgICAgICAgICAgICAgICA8SWNvblBpY2tlckNvbmZpZy5JY29uVHlwZS5UYWIgZWxlbWVudD17PEVtb2ppVGFiIC8+fSAvPlxuICAgICAgICAgICAgPC9JY29uUGlja2VyQ29uZmlnLkljb25UeXBlPlxuICAgICAgICA8L0ljb25QaWNrZXJDb25maWc+XG4gICAgKTtcbn07XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-var SkinTone = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
-  target: "edkk33y0"
-} : {
-  target: "edkk33y0",
-  label: "SkinTone"
-})(process.env.NODE_ENV === "production" ? {
-  name: "e0dnmk",
-  styles: "cursor:pointer"
-} : {
-  name: "e0dnmk",
-  styles: "cursor:pointer",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImVtb2ppc1BsdWdpbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZ0MyQiIsImZpbGUiOiJlbW9qaXNQbHVnaW4udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHsgb2JzZXJ2ZXIgfSBmcm9tIFwibW9ieC1yZWFjdC1saXRlXCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHsgTWVudSB9IGZyb20gXCJAd2ViaW55L3VpL01lbnVcIjtcblxuaW1wb3J0IHsgdXNlSWNvbiB9IGZyb20gXCIuLlwiO1xuaW1wb3J0IHsgSWNvblBpY2tlclRhYiB9IGZyb20gXCIuLi9JY29uUGlja2VyVGFiXCI7XG5pbXBvcnQgeyBJY29uUHJvdmlkZXIgfSBmcm9tIFwiLi4vSWNvblJlbmRlcmVyXCI7XG5pbXBvcnQgeyB1c2VJY29uUGlja2VyIH0gZnJvbSBcIi4uL0ljb25QaWNrZXJQcmVzZW50ZXJQcm92aWRlclwiO1xuaW1wb3J0IHsgSWNvblBpY2tlckNvbmZpZyB9IGZyb20gXCIuLi9jb25maWdcIjtcbmltcG9ydCB7IEljb24gfSBmcm9tIFwiLi4vdHlwZXNcIjtcblxuY29uc3QgU0tJTl9UT05FUyA9IFtcIlwiLCBcIlxcdXsxZjNmYn1cIiwgXCJcXHV7MWYzZmN9XCIsIFwiXFx1ezFmM2ZkfVwiLCBcIlxcdXsxZjNmZX1cIiwgXCJcXHV7MWYzZmZ9XCJdO1xuXG5jb25zdCBTa2luVG9uZVNlbGVjdFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICAgIHBhZGRpbmc6IDRweDtcbiAgICB3aWR0aDogMzJweDtcbiAgICBmbGV4LXNocmluazogMDtcbiAgICBiYWNrZ3JvdW5kOiAjZmZmO1xuICAgIGJvcmRlci1yYWRpdXM6IDFweDtcbiAgICBib3gtc2hhZG93OiAwIDAgMCAxcHggcmdiYSgwLCAwLCAwLCAwLjEpO1xuICAgIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgICBjdXJzb3I6IHBvaW50ZXI7XG5gO1xuXG5jb25zdCBTa2luVG9uZXNHcmlkID0gc3R5bGVkLmRpdmBcbiAgICBkaXNwbGF5OiBncmlkO1xuICAgIGdhcDogNHB4O1xuICAgIHBhZGRpbmc6IDRweDtcbmA7XG5cbmNvbnN0IFNraW5Ub25lID0gc3R5bGVkLmRpdmBcbiAgICBjdXJzb3I6IHBvaW50ZXI7XG5gO1xuXG4vKipcbiAqIE5PVEU6IEF2b2lkIHVzaW5nIGBAZW1vdGlvbi9zdHlsZWRgIGluIGljb24gcmVuZGVyZXIgY29tcG9uZW50cyBhY3Jvc3MgYWxsIHBsdWdpbnMuXG4gKiBUaGlzIGlzIGNydWNpYWwgZm9yIHNlcmlhbGl6aW5nIGNvbXBvbmVudCByZW5kZXJpbmcgaW50byBhIHN0cmluZyB2YWx1ZSBhcyBwbGFpbiBIVE1MLFxuICogd2hpY2ggaXMgbmVjZXNzYXJ5IGZvciB1c2FnZSBpbiB0aGUgd2Vic2l0ZSBhcHBsaWNhdGlvbi4gUGxlYXNlIHVzZSBpbmxpbmUgc3R5bGVzIGhlcmVcbiAqIHRvIGVuc3VyZSBwcm9wZXIgc2VyaWFsaXphdGlvbi5cbiAqL1xuXG5pbnRlcmZhY2UgRW1vamkgZXh0ZW5kcyBJY29uIHtcbiAgICBza2luVG9uZTogc3RyaW5nO1xuICAgIHNraW5Ub25lU3VwcG9ydDogYm9vbGVhbjtcbn1cblxuY29uc3QgRW1vamkgPSAoKSA9PiB7XG4gICAgY29uc3QgeyBpY29uLCBzaXplIH0gPSB1c2VJY29uPEVtb2ppPigpO1xuXG4gICAgcmV0dXJuIChcbiAgICAgICAgPGRpdlxuICAgICAgICAgICAgc3R5bGU9e3tcbiAgICAgICAgICAgICAgICBkaXNwbGF5OiBcImlubGluZS1ibG9ja1wiLFxuICAgICAgICAgICAgICAgIHdpZHRoOiBgJHtzaXplfXB4YCxcbiAgICAgICAgICAgICAgICBoZWlnaHQ6IGAke3NpemV9cHhgLFxuICAgICAgICAgICAgICAgIGZvbnRTaXplOiBgJHsoc2l6ZSAqIDQpIC8gNX1weGAsXG4gICAgICAgICAgICAgICAgbGluZUhlaWdodDogYCR7c2l6ZX1weGAsXG4gICAgICAgICAgICAgICAgY29sb3I6IFwiYmxhY2tcIlxuICAgICAgICAgICAgfX1cbiAgICAgICAgPlxuICAgICAgICAgICAge2ljb24uc2tpblRvbmUgPyBpY29uLnZhbHVlICsgaWNvbi5za2luVG9uZSA6IGljb24udmFsdWV9XG4gICAgICAgIDwvZGl2PlxuICAgICk7XG59O1xuXG5pbnRlcmZhY2UgU2tpblRvbmVTZWxlY3RQcm9wcyB7XG4gICAgaWNvbjogSWNvbiB8IG51bGw7XG4gICAgaGFzU2tpblRvbmVTdXBwb3J0OiBib29sZWFuO1xuICAgIG9uQ2hhbmdlOiAoc2tpblRvbmU6IHN0cmluZykgPT4gdm9pZDtcbn1cblxuY29uc3QgU2tpblRvbmVTZWxlY3QgPSAoeyBpY29uLCBoYXNTa2luVG9uZVN1cHBvcnQsIG9uQ2hhbmdlIH06IFNraW5Ub25lU2VsZWN0UHJvcHMpID0+IHtcbiAgICBpZiAoIWljb24gfHwgIWlzRW1vamkoaWNvbikpIHtcbiAgICAgICAgcmV0dXJuIDxTa2luVG9uZVNlbGVjdFdyYXBwZXIgLz47XG4gICAgfVxuXG4gICAgaWYgKCFoYXNTa2luVG9uZVN1cHBvcnQpIHtcbiAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICAgIDxTa2luVG9uZVNlbGVjdFdyYXBwZXI+XG4gICAgICAgICAgICAgICAgPEljb25Qcm92aWRlciBpY29uPXtpY29ufT5cbiAgICAgICAgICAgICAgICAgICAgPEVtb2ppIC8+XG4gICAgICAgICAgICAgICAgPC9JY29uUHJvdmlkZXI+XG4gICAgICAgICAgICA8L1NraW5Ub25lU2VsZWN0V3JhcHBlcj5cbiAgICAgICAgKTtcbiAgICB9XG5cbiAgICByZXR1cm4gKFxuICAgICAgICA8TWVudVxuICAgICAgICAgICAgaGFuZGxlPXtcbiAgICAgICAgICAgICAgICA8U2tpblRvbmVTZWxlY3RXcmFwcGVyPlxuICAgICAgICAgICAgICAgICAgICA8SWNvblByb3ZpZGVyIGljb249e2ljb259PlxuICAgICAgICAgICAgICAgICAgICAgICAgPEVtb2ppIC8+XG4gICAgICAgICAgICAgICAgICAgIDwvSWNvblByb3ZpZGVyPlxuICAgICAgICAgICAgICAgIDwvU2tpblRvbmVTZWxlY3RXcmFwcGVyPlxuICAgICAgICAgICAgfVxuICAgICAgICAgICAgcmVuZGVyPXsoeyBjbG9zZU1lbnUgfSkgPT4gKFxuICAgICAgICAgICAgICAgIDxTa2luVG9uZXNHcmlkPlxuICAgICAgICAgICAgICAgICAgICB7U0tJTl9UT05FUy5tYXAoKHNraW5Ub25lLCBpbmRleCkgPT4gKFxuICAgICAgICAgICAgICAgICAgICAgICAgPFNraW5Ub25lXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAga2V5PXtpbmRleH1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBvbkNsaWNrPXsoKSA9PiB7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIG9uQ2hhbmdlKHNraW5Ub25lKTtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgY2xvc2VNZW51KCk7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgfX1cbiAgICAgICAgICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8SWNvblByb3ZpZGVyIGljb249e3sgLi4uaWNvbiwgc2tpblRvbmUgfX0+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxFbW9qaSAvPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvSWNvblByb3ZpZGVyPlxuICAgICAgICAgICAgICAgICAgICAgICAgPC9Ta2luVG9uZT5cbiAgICAgICAgICAgICAgICAgICAgKSl9XG4gICAgICAgICAgICAgICAgPC9Ta2luVG9uZXNHcmlkPlxuICAgICAgICAgICAgKX1cbiAgICAgICAgLz5cbiAgICApO1xufTtcblxuLyoqXG4gKiBAc2VlIGh0dHBzOi8vd3d3LnR5cGVzY3JpcHRsYW5nLm9yZy9kb2NzL2hhbmRib29rLzIvbmFycm93aW5nLmh0bWwjdXNpbmctdHlwZS1wcmVkaWNhdGVzXG4gKi9cbmNvbnN0IGlzRW1vamkgPSAoaWNvbjogSWNvbiB8IG51bGwpOiBpY29uIGlzIEVtb2ppID0+IHtcbiAgICBpZiAoIWljb24pIHtcbiAgICAgICAgcmV0dXJuIGZhbHNlO1xuICAgIH1cbiAgICByZXR1cm4gaWNvbi50eXBlID09PSBcImVtb2ppXCI7XG59O1xuXG5jb25zdCBFbW9qaVRhYiA9IG9ic2VydmVyKCgpID0+IHtcbiAgICBjb25zdCBwcmVzZW50ZXIgPSB1c2VJY29uUGlja2VyKCk7XG4gICAgY29uc3QgeyBzZWxlY3RlZEljb24gfSA9IHByZXNlbnRlci52bTtcblxuICAgIGNvbnN0IG9uU2tpblRvbmVDaGFuZ2UgPSAoc2tpblRvbmU6IHN0cmluZykgPT4ge1xuICAgICAgICBpZiAoaXNFbW9qaShzZWxlY3RlZEljb24pKSB7XG4gICAgICAgICAgICBwcmVzZW50ZXIuc2V0SWNvbih7IC4uLnNlbGVjdGVkSWNvbiwgc2tpblRvbmUgfSk7XG4gICAgICAgIH1cbiAgICB9O1xuXG4gICAgY29uc3Qgb25JY29uU2VsZWN0ID0gKGljb246IEljb24pID0+IHtcbiAgICAgICAgcHJlc2VudGVyLnNldEljb24oaWNvbik7XG4gICAgICAgIHByZXNlbnRlci5jbG9zZU1lbnUoKTtcbiAgICB9O1xuXG4gICAgY29uc3QgaGFzU2tpblRvbmVTdXBwb3J0ID0gaXNFbW9qaShzZWxlY3RlZEljb24pID8gc2VsZWN0ZWRJY29uLnNraW5Ub25lU3VwcG9ydCA6IGZhbHNlO1xuXG4gICAgcmV0dXJuIChcbiAgICAgICAgPEljb25QaWNrZXJUYWJcbiAgICAgICAgICAgIGxhYmVsPXtcIkVtb2ppc1wifVxuICAgICAgICAgICAgb25DaGFuZ2U9e29uSWNvblNlbGVjdH1cbiAgICAgICAgICAgIGFjdGlvbnM9e1xuICAgICAgICAgICAgICAgIDxTa2luVG9uZVNlbGVjdFxuICAgICAgICAgICAgICAgICAgICBpY29uPXtzZWxlY3RlZEljb259XG4gICAgICAgICAgICAgICAgICAgIGhhc1NraW5Ub25lU3VwcG9ydD17aGFzU2tpblRvbmVTdXBwb3J0fVxuICAgICAgICAgICAgICAgICAgICBvbkNoYW5nZT17b25Ta2luVG9uZUNoYW5nZX1cbiAgICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgfVxuICAgICAgICAvPlxuICAgICk7XG59KTtcblxuZXhwb3J0IGNvbnN0IEVtb2ppUGx1Z2luID0gKCkgPT4ge1xuICAgIHJldHVybiAoXG4gICAgICAgIDxJY29uUGlja2VyQ29uZmlnPlxuICAgICAgICAgICAgPEljb25QaWNrZXJDb25maWcuSWNvblR5cGUgbmFtZT17XCJlbW9qaVwifT5cbiAgICAgICAgICAgICAgICA8SWNvblBpY2tlckNvbmZpZy5JY29uVHlwZS5JY29uIGVsZW1lbnQ9ezxFbW9qaSAvPn0gLz5cbiAgICAgICAgICAgICAgICA8SWNvblBpY2tlckNvbmZpZy5JY29uVHlwZS5UYWIgZWxlbWVudD17PEVtb2ppVGFiIC8+fSAvPlxuICAgICAgICAgICAgPC9JY29uUGlja2VyQ29uZmlnLkljb25UeXBlPlxuICAgICAgICA8L0ljb25QaWNrZXJDb25maWc+XG4gICAgKTtcbn07XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
+import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
+import { cn, PopoverPrimitive } from "@webiny/admin-ui";
+import { useIcon } from "..";
+import { IconPickerTab } from "../IconPickerTab";
+import { IconProvider } from "../IconRenderer";
+import { useIconPicker } from "../IconPickerPresenterProvider";
+import { IconPickerConfig } from "../config";
+const SKIN_TONES = ["", "\u{1f3fb}", "\u{1f3fc}", "\u{1f3fd}", "\u{1f3fe}", "\u{1f3ff}"];
+const SkinToneSelectWrapper = props => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn("wby-size-xl wby-rounded-sm wby-pointer wby-border-solid wby-border-sm wby-border-neutral-muted wby-flex wby-justify-center wby-items-center wby-text-center")
+  }, props.children);
+};
 
 /**
  * NOTE: Avoid using `@emotion/styled` in icon renderer components across all plugins.
@@ -67,97 +20,107 @@ var SkinTone = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "
  * to ensure proper serialization.
  */
 
-var Emoji = function Emoji() {
-  var _useIcon = (0, _.useIcon)(),
-    icon = _useIcon.icon,
-    size = _useIcon.size;
-  return /*#__PURE__*/_react.default.createElement("div", {
+const Emoji = () => {
+  const {
+    icon,
+    size
+  } = useIcon();
+  return /*#__PURE__*/React.createElement("div", {
     style: {
       display: "inline-block",
-      width: "".concat(size, "px"),
-      height: "".concat(size, "px"),
-      fontSize: "".concat(size * 4 / 5, "px"),
-      lineHeight: "".concat(size, "px"),
+      width: `${size}px`,
+      height: `${size}px`,
+      fontSize: `${size * 4 / 5}px`,
+      lineHeight: `${size}px`,
       color: "black"
     }
   }, icon.skinTone ? icon.value + icon.skinTone : icon.value);
 };
-var SkinToneSelect = function SkinToneSelect(_ref) {
-  var icon = _ref.icon,
-    hasSkinToneSupport = _ref.hasSkinToneSupport,
-    onChange = _ref.onChange;
+const SkinToneSelect = ({
+  icon,
+  hasSkinToneSupport,
+  onChange
+}) => {
+  const [open, setOpen] = useState(false);
   if (!icon || !isEmoji(icon)) {
-    return /*#__PURE__*/_react.default.createElement(SkinToneSelectWrapper, null);
+    return /*#__PURE__*/React.createElement(SkinToneSelectWrapper, null);
   }
   if (!hasSkinToneSupport) {
-    return /*#__PURE__*/_react.default.createElement(SkinToneSelectWrapper, null, /*#__PURE__*/_react.default.createElement(_IconRenderer.IconProvider, {
-      icon: icon
-    }, /*#__PURE__*/_react.default.createElement(Emoji, null)));
+    return /*#__PURE__*/React.createElement(SkinToneSelectWrapper, null, /*#__PURE__*/React.createElement(IconProvider, {
+      icon: icon,
+      size: 24
+    }, /*#__PURE__*/React.createElement(Emoji, null)));
   }
-  return /*#__PURE__*/_react.default.createElement(_Menu.Menu, {
-    handle: /*#__PURE__*/_react.default.createElement(SkinToneSelectWrapper, null, /*#__PURE__*/_react.default.createElement(_IconRenderer.IconProvider, {
-      icon: icon
-    }, /*#__PURE__*/_react.default.createElement(Emoji, null))),
-    render: function render(_ref2) {
-      var closeMenu = _ref2.closeMenu;
-      return /*#__PURE__*/_react.default.createElement(SkinTonesGrid, null, SKIN_TONES.map(function (skinTone, index) {
-        return /*#__PURE__*/_react.default.createElement(SkinTone, {
-          key: index,
-          onClick: function onClick() {
-            onChange(skinTone);
-            closeMenu();
-          }
-        }, /*#__PURE__*/_react.default.createElement(_IconRenderer.IconProvider, {
-          icon: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, icon), {}, {
-            skinTone: skinTone
-          })
-        }, /*#__PURE__*/_react.default.createElement(Emoji, null)));
-      }));
-    }
-  });
+  return /*#__PURE__*/React.createElement(PopoverPrimitive, {
+    open: open,
+    onOpenChange: open => setOpen(open)
+  }, /*#__PURE__*/React.createElement(PopoverPrimitive.Trigger, {
+    className: "wby-outline-none"
+  }, /*#__PURE__*/React.createElement(SkinToneSelectWrapper, null, /*#__PURE__*/React.createElement(IconProvider, {
+    icon: icon,
+    size: 24
+  }, /*#__PURE__*/React.createElement(Emoji, null)))), /*#__PURE__*/React.createElement(PopoverPrimitive.Content, null, /*#__PURE__*/React.createElement("div", {
+    className: "wby-bg-neutral-base wby-grid wby-gap-xs wby-p-xs wby-text-center"
+  }, SKIN_TONES.map((skinTone, index) => /*#__PURE__*/React.createElement("div", {
+    key: index,
+    onClick: () => {
+      onChange(skinTone);
+    },
+    className: "wby-cursor-pointer"
+  }, /*#__PURE__*/React.createElement(IconProvider, {
+    icon: {
+      ...icon,
+      skinTone
+    },
+    size: 24
+  }, /*#__PURE__*/React.createElement(Emoji, null)))))));
 };
 
 /**
  * @see https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates
  */
-var isEmoji = function isEmoji(icon) {
+const isEmoji = icon => {
   if (!icon) {
     return false;
   }
   return icon.type === "emoji";
 };
-var EmojiTab = (0, _mobxReactLite.observer)(function () {
-  var presenter = (0, _IconPickerPresenterProvider.useIconPicker)();
-  var selectedIcon = presenter.vm.selectedIcon;
-  var onSkinToneChange = function onSkinToneChange(skinTone) {
+const EmojiTab = observer(() => {
+  const presenter = useIconPicker();
+  const {
+    selectedIcon
+  } = presenter.vm;
+  const onSkinToneChange = skinTone => {
     if (isEmoji(selectedIcon)) {
-      presenter.setIcon((0, _objectSpread2.default)((0, _objectSpread2.default)({}, selectedIcon), {}, {
-        skinTone: skinTone
-      }));
+      presenter.setIcon({
+        ...selectedIcon,
+        skinTone
+      });
     }
   };
-  var onIconSelect = function onIconSelect(icon) {
+  const onIconSelect = icon => {
     presenter.setIcon(icon);
     presenter.closeMenu();
   };
-  var hasSkinToneSupport = isEmoji(selectedIcon) ? selectedIcon.skinToneSupport : false;
-  return /*#__PURE__*/_react.default.createElement(_IconPickerTab.IconPickerTab, {
+  const hasSkinToneSupport = isEmoji(selectedIcon) ? selectedIcon.skinToneSupport : false;
+  return /*#__PURE__*/React.createElement(IconPickerTab, {
+    value: "emoji",
     label: "Emojis",
     onChange: onIconSelect,
-    actions: /*#__PURE__*/_react.default.createElement(SkinToneSelect, {
+    actions: /*#__PURE__*/React.createElement(SkinToneSelect, {
       icon: selectedIcon,
       hasSkinToneSupport: hasSkinToneSupport,
       onChange: onSkinToneChange
     })
   });
 });
-var EmojiPlugin = exports.EmojiPlugin = function EmojiPlugin() {
-  return /*#__PURE__*/_react.default.createElement(_config.IconPickerConfig, null, /*#__PURE__*/_react.default.createElement(_config.IconPickerConfig.IconType, {
+export const EmojiPlugin = () => {
+  return /*#__PURE__*/React.createElement(IconPickerConfig, null, /*#__PURE__*/React.createElement(IconPickerConfig.IconType, {
     name: "emoji"
-  }, /*#__PURE__*/_react.default.createElement(_config.IconPickerConfig.IconType.Icon, {
-    element: /*#__PURE__*/_react.default.createElement(Emoji, null)
-  }), /*#__PURE__*/_react.default.createElement(_config.IconPickerConfig.IconType.Tab, {
-    element: /*#__PURE__*/_react.default.createElement(EmojiTab, null)
+  }, /*#__PURE__*/React.createElement(IconPickerConfig.IconType.Icon, {
+    element: /*#__PURE__*/React.createElement(Emoji, null)
+  }), /*#__PURE__*/React.createElement(IconPickerConfig.IconType.Tab, {
+    element: /*#__PURE__*/React.createElement(EmojiTab, null)
   })));
 };
 

package/components/IconPicker/plugins/emojisPlugin.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_mobxReactLite","_Menu","_","_IconPickerTab","_IconRenderer","_IconPickerPresenterProvider","_config","_EMOTION_STRINGIFIED_CSS_ERROR__","SKIN_TONES","SkinToneSelectWrapper","_base","default","process","env","NODE_ENV","target","label","name","styles","map","toString","SkinTonesGrid","SkinTone","Emoji","_useIcon","useIcon","icon","size","createElement","style","display","width","concat","height","fontSize","lineHeight","color","skinTone","value","SkinToneSelect","_ref","hasSkinToneSupport","onChange","isEmoji","IconProvider","Menu","handle","render","_ref2","closeMenu","index","key","onClick","_objectSpread2","type","EmojiTab","observer","presenter","useIconPicker","selectedIcon","vm","onSkinToneChange","setIcon","onIconSelect","skinToneSupport","IconPickerTab","actions","EmojiPlugin","exports","IconPickerConfig","IconType","Icon","element","Tab"],"sources":["emojisPlugin.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport styled from \"@emotion/styled\";\n\nimport { Menu } from \"@webiny/ui/Menu\";\n\nimport { useIcon } from \"..\";\nimport { IconPickerTab } from \"../IconPickerTab\";\nimport { IconProvider } from \"../IconRenderer\";\nimport { useIconPicker } from \"../IconPickerPresenterProvider\";\nimport { IconPickerConfig } from \"../config\";\nimport { Icon } from \"../types\";\n\nconst SKIN_TONES = [\"\", \"\\u{1f3fb}\", \"\\u{1f3fc}\", \"\\u{1f3fd}\", \"\\u{1f3fe}\", \"\\u{1f3ff}\"];\n\nconst SkinToneSelectWrapper = styled.div`\n    padding: 4px;\n    width: 32px;\n    flex-shrink: 0;\n    background: #fff;\n    border-radius: 1px;\n    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);\n    display: inline-block;\n    cursor: pointer;\n`;\n\nconst SkinTonesGrid = styled.div`\n    display: grid;\n    gap: 4px;\n    padding: 4px;\n`;\n\nconst SkinTone = styled.div`\n    cursor: pointer;\n`;\n\n/**\n * NOTE: Avoid using `@emotion/styled` in icon renderer components across all plugins.\n * This is crucial for serializing component rendering into a string value as plain HTML,\n * which is necessary for usage in the website application. Please use inline styles here\n * to ensure proper serialization.\n */\n\ninterface Emoji extends Icon {\n    skinTone: string;\n    skinToneSupport: boolean;\n}\n\nconst Emoji = () => {\n    const { icon, size } = useIcon<Emoji>();\n\n    return (\n        <div\n            style={{\n                display: \"inline-block\",\n                width: `${size}px`,\n                height: `${size}px`,\n                fontSize: `${(size * 4) / 5}px`,\n                lineHeight: `${size}px`,\n                color: \"black\"\n            }}\n        >\n            {icon.skinTone ? icon.value + icon.skinTone : icon.value}\n        </div>\n    );\n};\n\ninterface SkinToneSelectProps {\n    icon: Icon | null;\n    hasSkinToneSupport: boolean;\n    onChange: (skinTone: string) => void;\n}\n\nconst SkinToneSelect = ({ icon, hasSkinToneSupport, onChange }: SkinToneSelectProps) => {\n    if (!icon || !isEmoji(icon)) {\n        return <SkinToneSelectWrapper />;\n    }\n\n    if (!hasSkinToneSupport) {\n        return (\n            <SkinToneSelectWrapper>\n                <IconProvider icon={icon}>\n                    <Emoji />\n                </IconProvider>\n            </SkinToneSelectWrapper>\n        );\n    }\n\n    return (\n        <Menu\n            handle={\n                <SkinToneSelectWrapper>\n                    <IconProvider icon={icon}>\n                        <Emoji />\n                    </IconProvider>\n                </SkinToneSelectWrapper>\n            }\n            render={({ closeMenu }) => (\n                <SkinTonesGrid>\n                    {SKIN_TONES.map((skinTone, index) => (\n                        <SkinTone\n                            key={index}\n                            onClick={() => {\n                                onChange(skinTone);\n                                closeMenu();\n                            }}\n                        >\n                            <IconProvider icon={{ ...icon, skinTone }}>\n                                <Emoji />\n                            </IconProvider>\n                        </SkinTone>\n                    ))}\n                </SkinTonesGrid>\n            )}\n        />\n    );\n};\n\n/**\n * @see https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates\n */\nconst isEmoji = (icon: Icon | null): icon is Emoji => {\n    if (!icon) {\n        return false;\n    }\n    return icon.type === \"emoji\";\n};\n\nconst EmojiTab = observer(() => {\n    const presenter = useIconPicker();\n    const { selectedIcon } = presenter.vm;\n\n    const onSkinToneChange = (skinTone: string) => {\n        if (isEmoji(selectedIcon)) {\n            presenter.setIcon({ ...selectedIcon, skinTone });\n        }\n    };\n\n    const onIconSelect = (icon: Icon) => {\n        presenter.setIcon(icon);\n        presenter.closeMenu();\n    };\n\n    const hasSkinToneSupport = isEmoji(selectedIcon) ? selectedIcon.skinToneSupport : false;\n\n    return (\n        <IconPickerTab\n            label={\"Emojis\"}\n            onChange={onIconSelect}\n            actions={\n                <SkinToneSelect\n                    icon={selectedIcon}\n                    hasSkinToneSupport={hasSkinToneSupport}\n                    onChange={onSkinToneChange}\n                />\n            }\n        />\n    );\n});\n\nexport const EmojiPlugin = () => {\n    return (\n        <IconPickerConfig>\n            <IconPickerConfig.IconType name={\"emoji\"}>\n                <IconPickerConfig.IconType.Icon element={<Emoji />} />\n                <IconPickerConfig.IconType.Tab element={<EmojiTab />} />\n            </IconPickerConfig.IconType>\n        </IconPickerConfig>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useState","observer","cn","PopoverPrimitive","useIcon","IconPickerTab","IconProvider","useIconPicker","IconPickerConfig","SKIN_TONES","SkinToneSelectWrapper","props","createElement","className","children","Emoji","icon","size","style","display","width","height","fontSize","lineHeight","color","skinTone","value","SkinToneSelect","hasSkinToneSupport","onChange","open","setOpen","isEmoji","onOpenChange","Trigger","Content","map","index","key","onClick","type","EmojiTab","presenter","selectedIcon","vm","onSkinToneChange","setIcon","onIconSelect","closeMenu","skinToneSupport","label","actions","EmojiPlugin","IconType","name","Icon","element","Tab"],"sources":["emojisPlugin.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { cn, PopoverPrimitive } from \"@webiny/admin-ui\";\nimport { useIcon } from \"..\";\nimport { IconPickerTab } from \"../IconPickerTab\";\nimport { IconProvider } from \"../IconRenderer\";\nimport { useIconPicker } from \"../IconPickerPresenterProvider\";\nimport { IconPickerConfig } from \"../config\";\nimport { Icon } from \"../types\";\n\nconst SKIN_TONES = [\"\", \"\\u{1f3fb}\", \"\\u{1f3fc}\", \"\\u{1f3fd}\", \"\\u{1f3fe}\", \"\\u{1f3ff}\"];\n\nconst SkinToneSelectWrapper = (props: React.HTMLAttributes<HTMLDivElement>) => {\n    return (\n        <div\n            className={cn(\n                \"wby-size-xl wby-rounded-sm wby-pointer wby-border-solid wby-border-sm wby-border-neutral-muted wby-flex wby-justify-center wby-items-center wby-text-center\"\n            )}\n        >\n            {props.children}\n        </div>\n    );\n};\n\n/**\n * NOTE: Avoid using `@emotion/styled` in icon renderer components across all plugins.\n * This is crucial for serializing component rendering into a string value as plain HTML,\n * which is necessary for usage in the website application. Please use inline styles here\n * to ensure proper serialization.\n */\n\ninterface Emoji extends Icon {\n    skinTone: string;\n    skinToneSupport: boolean;\n}\n\nconst Emoji = () => {\n    const { icon, size } = useIcon<Emoji>();\n\n    return (\n        <div\n            style={{\n                display: \"inline-block\",\n                width: `${size}px`,\n                height: `${size}px`,\n                fontSize: `${(size * 4) / 5}px`,\n                lineHeight: `${size}px`,\n                color: \"black\"\n            }}\n        >\n            {icon.skinTone ? icon.value + icon.skinTone : icon.value}\n        </div>\n    );\n};\n\ninterface SkinToneSelectProps {\n    icon: Icon | null;\n    hasSkinToneSupport: boolean;\n    onChange: (skinTone: string) => void;\n}\n\nconst SkinToneSelect = ({ icon, hasSkinToneSupport, onChange }: SkinToneSelectProps) => {\n    const [open, setOpen] = useState(false);\n\n    if (!icon || !isEmoji(icon)) {\n        return <SkinToneSelectWrapper />;\n    }\n\n    if (!hasSkinToneSupport) {\n        return (\n            <SkinToneSelectWrapper>\n                <IconProvider icon={icon} size={24}>\n                    <Emoji />\n                </IconProvider>\n            </SkinToneSelectWrapper>\n        );\n    }\n\n    return (\n        <PopoverPrimitive open={open} onOpenChange={open => setOpen(open)}>\n            <PopoverPrimitive.Trigger className={\"wby-outline-none\"}>\n                <SkinToneSelectWrapper>\n                    <IconProvider icon={icon} size={24}>\n                        <Emoji />\n                    </IconProvider>\n                </SkinToneSelectWrapper>\n            </PopoverPrimitive.Trigger>\n            <PopoverPrimitive.Content>\n                <div className={\"wby-bg-neutral-base wby-grid wby-gap-xs wby-p-xs wby-text-center\"}>\n                    {SKIN_TONES.map((skinTone, index) => (\n                        <div\n                            key={index}\n                            onClick={() => {\n                                onChange(skinTone);\n                            }}\n                            className={\"wby-cursor-pointer\"}\n                        >\n                            <IconProvider icon={{ ...icon, skinTone }} size={24}>\n                                <Emoji />\n                            </IconProvider>\n                        </div>\n                    ))}\n                </div>\n            </PopoverPrimitive.Content>\n        </PopoverPrimitive>\n    );\n};\n\n/**\n * @see https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates\n */\nconst isEmoji = (icon: Icon | null): icon is Emoji => {\n    if (!icon) {\n        return false;\n    }\n    return icon.type === \"emoji\";\n};\n\nconst EmojiTab = observer(() => {\n    const presenter = useIconPicker();\n    const { selectedIcon } = presenter.vm;\n\n    const onSkinToneChange = (skinTone: string) => {\n        if (isEmoji(selectedIcon)) {\n            presenter.setIcon({ ...selectedIcon, skinTone });\n        }\n    };\n\n    const onIconSelect = (icon: Icon) => {\n        presenter.setIcon(icon);\n        presenter.closeMenu();\n    };\n\n    const hasSkinToneSupport = isEmoji(selectedIcon) ? selectedIcon.skinToneSupport : false;\n\n    return (\n        <IconPickerTab\n            value={\"emoji\"}\n            label={\"Emojis\"}\n            onChange={onIconSelect}\n            actions={\n                <SkinToneSelect\n                    icon={selectedIcon}\n                    hasSkinToneSupport={hasSkinToneSupport}\n                    onChange={onSkinToneChange}\n                />\n            }\n        />\n    );\n});\n\nexport const EmojiPlugin = () => {\n    return (\n        <IconPickerConfig>\n            <IconPickerConfig.IconType name={\"emoji\"}>\n                <IconPickerConfig.IconType.Icon element={<Emoji />} />\n                <IconPickerConfig.IconType.Tab element={<EmojiTab />} />\n            </IconPickerConfig.IconType>\n        </IconPickerConfig>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/components/IconPicker/plugins/graphql.js

@@ -1,18 +1,27 @@
-"use strict";
+import gql from "graphql-tag";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.LIST_CUSTOM_ICONS = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _graphqlTag = _interopRequireDefault(require("graphql-tag"));
-var _templateObject;
 /**
  * ###########################
  * List Custom Icons Query Response
  */
 
-var LIST_CUSTOM_ICONS = exports.LIST_CUSTOM_ICONS = (0, _graphqlTag.default)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    query ListCustomIcons($limit: Int!) {\n        fileManager {\n            listFiles(where: { tags_startsWith: \"scope:iconPicker\" }, limit: $limit) {\n                data {\n                    name\n                    src\n                    tags\n                }\n                error {\n                    code\n                    data\n                    message\n                }\n            }\n        }\n    }\n"])));
+export const LIST_CUSTOM_ICONS = gql`
+    query ListCustomIcons($limit: Int!) {
+        fileManager {
+            listFiles(where: { tags_startsWith: "scope:iconPicker" }, limit: $limit) {
+                data {
+                    name
+                    src
+                    tags
+                }
+                error {
+                    code
+                    data
+                    message
+                }
+            }
+        }
+    }
+`;
 
 //# sourceMappingURL=graphql.js.map

package/components/IconPicker/plugins/graphql.js.map

@@ -1 +1 @@
-{"version":3,"names":["_graphqlTag","_interopRequireDefault","require","_templateObject","LIST_CUSTOM_ICONS","exports","gql","_taggedTemplateLiteral2","default"],"sources":["graphql.ts"],"sourcesContent":["import gql from \"graphql-tag\";\n\n/**\n * ###########################\n * List Custom Icons Query Response\n */\nexport interface ListCustomIconsQueryResponse {\n    fileManager: {\n        listFiles: {\n            data: [{ name: string; src: string }] | null;\n            error: { message: string; data: Record<string, any>; code: string } | null;\n        };\n    };\n}\n\nexport const LIST_CUSTOM_ICONS = gql`\n    query ListCustomIcons($limit: Int!) {\n        fileManager {\n            listFiles(where: { tags_startsWith: \"scope:iconPicker\" }, limit: $limit) {\n                data {\n                    name\n                    src\n                    tags\n                }\n                error {\n                    code\n                    data\n                    message\n                }\n            }\n        }\n    }\n`;\n"],"mappings":";;;;;;;;AAAA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA8B,IAAAC,eAAA;AAE9B;AACA;AACA;AACA;;AAUO,IAAMC,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,OAAGE,mBAAG,EAAAH,eAAA,KAAAA,eAAA,OAAAI,uBAAA,CAAAC,OAAA,6bAiBnC","ignoreList":[]}
+{"version":3,"names":["gql","LIST_CUSTOM_ICONS"],"sources":["graphql.ts"],"sourcesContent":["import gql from \"graphql-tag\";\n\n/**\n * ###########################\n * List Custom Icons Query Response\n */\nexport interface ListCustomIconsQueryResponse {\n    fileManager: {\n        listFiles: {\n            data: [{ name: string; src: string }] | null;\n            error: { message: string; data: Record<string, any>; code: string } | null;\n        };\n    };\n}\n\nexport const LIST_CUSTOM_ICONS = gql`\n    query ListCustomIcons($limit: Int!) {\n        fileManager {\n            listFiles(where: { tags_startsWith: \"scope:iconPicker\" }, limit: $limit) {\n                data {\n                    name\n                    src\n                    tags\n                }\n                error {\n                    code\n                    data\n                    message\n                }\n            }\n        }\n    }\n`;\n"],"mappings":"AAAA,OAAOA,GAAG,MAAM,aAAa;;AAE7B;AACA;AACA;AACA;;AAUA,OAAO,MAAMC,iBAAiB,GAAGD,GAAG;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/components/IconPicker/plugins/iconsPlugin.js

@@ -1,37 +1,10 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SimpleIconPlugin = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
-var _react = _interopRequireWildcard(require("react"));
-var _mobxReactLite = require("mobx-react-lite");
-var _ColorPicker = require("@webiny/ui/ColorPicker");
-var _DelayedOnChange = require("@webiny/ui/DelayedOnChange");
-var _ = require("..");
-var _IconPickerTab = require("../IconPickerTab");
-var _IconPickerPresenterProvider = require("../IconPickerPresenterProvider");
-var _config = require("../config");
-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)."; }
-var StyledColorPicker = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
-  target: "eybrvil1"
-} : {
-  target: "eybrvil1",
-  label: "StyledColorPicker"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1mfq72v",
-  styles: "[data-role=\"color-picker-swatch\"]{width:30px;height:30px;>div{width:inherit;}}"
-} : {
-  name: "1mfq72v",
-  styles: "[data-role=\"color-picker-swatch\"]{width:30px;height:30px;>div{width:inherit;}}",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImljb25zUGx1Z2luLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFhb0MiLCJmaWxlIjoiaWNvbnNQbHVnaW4udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IHVzZVN0YXRlLCB1c2VFZmZlY3QgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IG9ic2VydmVyIH0gZnJvbSBcIm1vYngtcmVhY3QtbGl0ZVwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmltcG9ydCB7IENvbG9yUGlja2VyIH0gZnJvbSBcIkB3ZWJpbnkvdWkvQ29sb3JQaWNrZXJcIjtcbmltcG9ydCB7IERlbGF5ZWRPbkNoYW5nZSB9IGZyb20gXCJAd2ViaW55L3VpL0RlbGF5ZWRPbkNoYW5nZVwiO1xuXG5pbXBvcnQgeyB1c2VJY29uIH0gZnJvbSBcIi4uXCI7XG5pbXBvcnQgeyBJY29uUGlja2VyVGFiIH0gZnJvbSBcIi4uL0ljb25QaWNrZXJUYWJcIjtcbmltcG9ydCB7IHVzZUljb25QaWNrZXIgfSBmcm9tIFwiLi4vSWNvblBpY2tlclByZXNlbnRlclByb3ZpZGVyXCI7XG5pbXBvcnQgeyBJY29uUGlja2VyQ29uZmlnIH0gZnJvbSBcIi4uL2NvbmZpZ1wiO1xuaW1wb3J0IHsgSWNvbiB9IGZyb20gXCIuLi90eXBlc1wiO1xuXG5jb25zdCBTdHlsZWRDb2xvclBpY2tlciA9IHN0eWxlZC5kaXZgXG4gICAgW2RhdGEtcm9sZT1cImNvbG9yLXBpY2tlci1zd2F0Y2hcIl0ge1xuICAgICAgICB3aWR0aDogMzBweDtcbiAgICAgICAgaGVpZ2h0OiAzMHB4O1xuICAgICAgICA+IGRpdiB7XG4gICAgICAgICAgICB3aWR0aDogaW5oZXJpdDtcbiAgICAgICAgfVxuICAgIH1cbmA7XG5cbi8qKlxuICogTk9URTogQXZvaWQgdXNpbmcgYEBlbW90aW9uL3N0eWxlZGAgaW4gaWNvbiByZW5kZXJlciBjb21wb25lbnRzIGFjcm9zcyBhbGwgcGx1Z2lucy5cbiAqIFRoaXMgaXMgY3J1Y2lhbCBmb3Igc2VyaWFsaXppbmcgY29tcG9uZW50IHJlbmRlcmluZyBpbnRvIGEgc3RyaW5nIHZhbHVlIGFzIHBsYWluIEhUTUwsXG4gKiB3aGljaCBpcyBuZWNlc3NhcnkgZm9yIHVzYWdlIGluIHRoZSB3ZWJzaXRlIGFwcGxpY2F0aW9uLiBQbGVhc2UgdXNlIGlubGluZSBzdHlsZXMgaGVyZVxuICogdG8gZW5zdXJlIHByb3BlciBzZXJpYWxpemF0aW9uLlxuICovXG5cbmludGVyZmFjZSBTaW1wbGVJY29uIGV4dGVuZHMgSWNvbiB7XG4gICAgY29sb3I6IHN0cmluZztcbn1cblxuY29uc3QgSWNvblN2ZyA9ICgpID0+IHtcbiAgICBjb25zdCB7IGljb24sIHNpemUgfSA9IHVzZUljb248U2ltcGxlSWNvbj4oKTtcblxuICAgIHJldHVybiAoXG4gICAgICAgIDxzdmdcbiAgICAgICAgICAgIHdpZHRoPXtzaXplfVxuICAgICAgICAgICAgaGVpZ2h0PXtzaXplfVxuICAgICAgICAgICAgdmlld0JveD17YDAgMCAke2ljb24ud2lkdGggfHwgNTEyfSA1MTJgfVxuICAgICAgICAgICAgY29sb3I9e2ljb24/LmNvbG9yIHx8IFwiaW5oZXJpdFwifVxuICAgICAgICAgICAgZGFuZ2Vyb3VzbHlTZXRJbm5lckhUTUw9e3sgX19odG1sOiBpY29uLnZhbHVlIHx8IFwiXCIgfX1cbiAgICAgICAgICAgIHN0eWxlPXt7XG4gICAgICAgICAgICAgICAgdmVydGljYWxBbGlnbjogXCJtaWRkbGVcIlxuICAgICAgICAgICAgfX1cbiAgICAgICAgLz5cbiAgICApO1xufTtcblxuaW50ZXJmYWNlIEljb25Db2xvclBpY2tlclByb3BzIHtcbiAgICBjb2xvcjogc3RyaW5nO1xuICAgIG9uQ2hhbmdlOiAodmFsdWU6IHN0cmluZykgPT4gdm9pZDtcbn1cblxuY29uc3QgSWNvbkNvbG9yUGlja2VyID0gKHsgY29sb3IsIG9uQ2hhbmdlIH06IEljb25Db2xvclBpY2tlclByb3BzKSA9PiB7XG4gICAgcmV0dXJuIChcbiAgICAgICAgPERlbGF5ZWRPbkNoYW5nZSB2YWx1ZT17Y29sb3J9IG9uQ2hhbmdlPXtvbkNoYW5nZX0+XG4gICAgICAgICAgICB7KHsgdmFsdWUsIG9uQ2hhbmdlIH0pID0+IChcbiAgICAgICAgICAgICAgICA8U3R5bGVkQ29sb3JQaWNrZXI+XG4gICAgICAgICAgICAgICAgICAgIDxDb2xvclBpY2tlciBhbGlnbj17XCJyaWdodFwifSB2YWx1ZT17dmFsdWV9IG9uQ2hhbmdlPXtvbkNoYW5nZX0gLz5cbiAgICAgICAgICAgICAgICA8L1N0eWxlZENvbG9yUGlja2VyPlxuICAgICAgICAgICAgKX1cbiAgICAgICAgPC9EZWxheWVkT25DaGFuZ2U+XG4gICAgKTtcbn07XG5cbmNvbnN0IENvbG9yID0gc3R5bGVkLnNwYW48eyBjb2xvcjogc3RyaW5nIH0+YFxuICAgIGNvbG9yOiAkeyh7IGNvbG9yIH0pID0+IGNvbG9yfTtcbmA7XG5cbi8qKlxuICogQHNlZSBodHRwczovL3d3dy50eXBlc2NyaXB0bGFuZy5vcmcvZG9jcy9oYW5kYm9vay8yL25hcnJvd2luZy5odG1sI3VzaW5nLXR5cGUtcHJlZGljYXRlc1xuICovXG5jb25zdCBpc1NpbXBsZUljb24gPSAoaWNvbjogSWNvbiB8IG51bGwpOiBpY29uIGlzIFNpbXBsZUljb24gPT4ge1xuICAgIGlmICghaWNvbikge1xuICAgICAgICByZXR1cm4gZmFsc2U7XG4gICAgfVxuICAgIHJldHVybiBpY29uLnR5cGUgPT09IFwiaWNvblwiO1xufTtcblxuY29uc3QgSWNvblRhYiA9IG9ic2VydmVyKCgpID0+IHtcbiAgICBjb25zdCBwcmVzZW50ZXIgPSB1c2VJY29uUGlja2VyKCk7XG4gICAgY29uc3QgeyBzZWxlY3RlZEljb24gfSA9IHByZXNlbnRlci52bTtcblxuICAgIGNvbnN0IFtjb2xvciwgc2V0Q29sb3JdID0gdXNlU3RhdGUoXCJpbmhlcml0XCIpO1xuXG4gICAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAgICAgaWYgKGNvbG9yID09PSBcImluaGVyaXRcIiAmJiBpc1NpbXBsZUljb24oc2VsZWN0ZWRJY29uKSkge1xuICAgICAgICAgICAgc2V0Q29sb3Ioc2VsZWN0ZWRJY29uLmNvbG9yKTtcbiAgICAgICAgfVxuICAgIH0sIFtzZWxlY3RlZEljb25dKTtcblxuICAgIGNvbnN0IG9uQ29sb3JDaGFuZ2UgPSAoY29sb3I6IHN0cmluZykgPT4ge1xuICAgICAgICBzZXRDb2xvcihjb2xvcik7XG5cbiAgICAgICAgaWYgKGlzU2ltcGxlSWNvbihzZWxlY3RlZEljb24pKSB7XG4gICAgICAgICAgICBwcmVzZW50ZXIuc2V0SWNvbih7IC4uLnNlbGVjdGVkSWNvbiwgY29sb3IgfSk7XG4gICAgICAgIH1cbiAgICB9O1xuXG4gICAgY29uc3Qgb25JY29uU2VsZWN0ID0gKGljb246IEljb24pID0+IHtcbiAgICAgICAgLy8gU2V0IGljb24gYW5kIGFzc2lnbiBjdXJyZW50IGNvbG9yLlxuICAgICAgICBwcmVzZW50ZXIuc2V0SWNvbih7IC4uLmljb24sIGNvbG9yIH0pO1xuICAgICAgICBwcmVzZW50ZXIuY2xvc2VNZW51KCk7XG4gICAgfTtcblxuICAgIHJldHVybiAoXG4gICAgICAgIDxJY29uUGlja2VyVGFiXG4gICAgICAgICAgICBsYWJlbD17XCJJY29uc1wifVxuICAgICAgICAgICAgb25DaGFuZ2U9e29uSWNvblNlbGVjdH1cbiAgICAgICAgICAgIGNlbGxEZWNvcmF0b3I9e2NlbGwgPT4gPENvbG9yIGNvbG9yPXtjb2xvcn0+e2NlbGx9PC9Db2xvcj59XG4gICAgICAgICAgICBhY3Rpb25zPXs8SWNvbkNvbG9yUGlja2VyIGNvbG9yPXtjb2xvcn0gb25DaGFuZ2U9e29uQ29sb3JDaGFuZ2V9IC8+fVxuICAgICAgICAvPlxuICAgICk7XG59KTtcblxuZXhwb3J0IGNvbnN0IFNpbXBsZUljb25QbHVnaW4gPSAoKSA9PiB7XG4gICAgcmV0dXJuIChcbiAgICAgICAgPEljb25QaWNrZXJDb25maWc+XG4gICAgICAgICAgICA8SWNvblBpY2tlckNvbmZpZy5JY29uVHlwZSBuYW1lPXtcImljb25cIn0+XG4gICAgICAgICAgICAgICAgPEljb25QaWNrZXJDb25maWcuSWNvblR5cGUuSWNvbiBlbGVtZW50PXs8SWNvblN2ZyAvPn0gLz5cbiAgICAgICAgICAgICAgICA8SWNvblBpY2tlckNvbmZpZy5JY29uVHlwZS5UYWIgZWxlbWVudD17PEljb25UYWIgLz59IC8+XG4gICAgICAgICAgICA8L0ljb25QaWNrZXJDb25maWcuSWNvblR5cGU+XG4gICAgICAgIDwvSWNvblBpY2tlckNvbmZpZz5cbiAgICApO1xufTtcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
+import React, { useState, useEffect } from "react";
+import { observer } from "mobx-react-lite";
+import { DelayedOnChange, ColorPicker } from "@webiny/admin-ui";
+import { useIcon } from "..";
+import { IconPickerTab } from "../IconPickerTab";
+import { useIconPicker } from "../IconPickerPresenterProvider";
+import { IconPickerConfig } from "../config";
 
 /**
  * NOTE: Avoid using `@emotion/styled` in icon renderer components across all plugins.
@@ -40,106 +13,102 @@ var StyledColorPicker = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_
  * to ensure proper serialization.
  */
 
-var IconSvg = function IconSvg() {
-  var _useIcon = (0, _.useIcon)(),
-    icon = _useIcon.icon,
-    size = _useIcon.size;
-  return /*#__PURE__*/_react.default.createElement("svg", {
+const IconSvg = () => {
+  const {
+    icon,
+    size
+  } = useIcon();
+  return /*#__PURE__*/React.createElement("svg", {
     width: size,
     height: size,
-    viewBox: "0 0 ".concat(icon.width || 512, " 512"),
+    viewBox: `0 0 ${icon.width || 512} 512`,
     color: icon?.color || "inherit",
     dangerouslySetInnerHTML: {
       __html: icon.value || ""
     },
     style: {
-      verticalAlign: "middle"
+      verticalAlign: "middle",
+      width: "100%",
+      height: "100%"
     }
   });
 };
-var IconColorPicker = function IconColorPicker(_ref) {
-  var color = _ref.color,
-    onChange = _ref.onChange;
-  return /*#__PURE__*/_react.default.createElement(_DelayedOnChange.DelayedOnChange, {
+const IconColorPicker = ({
+  color,
+  onChange
+}) => {
+  return /*#__PURE__*/React.createElement(DelayedOnChange, {
     value: color,
     onChange: onChange
-  }, function (_ref2) {
-    var value = _ref2.value,
-      onChange = _ref2.onChange;
-    return /*#__PURE__*/_react.default.createElement(StyledColorPicker, null, /*#__PURE__*/_react.default.createElement(_ColorPicker.ColorPicker, {
-      align: "right",
-      value: value,
-      onChange: onChange
-    }));
-  });
+  }, ({
+    value,
+    onChange
+  }) => /*#__PURE__*/React.createElement(ColorPicker, {
+    align: "end",
+    value: value,
+    onChange: onChange
+  }));
 };
-var Color = /*#__PURE__*/(0, _base.default)("span", process.env.NODE_ENV === "production" ? {
-  target: "eybrvil0"
-} : {
-  target: "eybrvil0",
-  label: "Color"
-})("color:", function (_ref3) {
-  var color = _ref3.color;
-  return color;
-}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImljb25zUGx1Z2luLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFvRTRDIiwiZmlsZSI6Imljb25zUGx1Z2luLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyB1c2VTdGF0ZSwgdXNlRWZmZWN0IH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyBvYnNlcnZlciB9IGZyb20gXCJtb2J4LXJlYWN0LWxpdGVcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuXG5pbXBvcnQgeyBDb2xvclBpY2tlciB9IGZyb20gXCJAd2ViaW55L3VpL0NvbG9yUGlja2VyXCI7XG5pbXBvcnQgeyBEZWxheWVkT25DaGFuZ2UgfSBmcm9tIFwiQHdlYmlueS91aS9EZWxheWVkT25DaGFuZ2VcIjtcblxuaW1wb3J0IHsgdXNlSWNvbiB9IGZyb20gXCIuLlwiO1xuaW1wb3J0IHsgSWNvblBpY2tlclRhYiB9IGZyb20gXCIuLi9JY29uUGlja2VyVGFiXCI7XG5pbXBvcnQgeyB1c2VJY29uUGlja2VyIH0gZnJvbSBcIi4uL0ljb25QaWNrZXJQcmVzZW50ZXJQcm92aWRlclwiO1xuaW1wb3J0IHsgSWNvblBpY2tlckNvbmZpZyB9IGZyb20gXCIuLi9jb25maWdcIjtcbmltcG9ydCB7IEljb24gfSBmcm9tIFwiLi4vdHlwZXNcIjtcblxuY29uc3QgU3R5bGVkQ29sb3JQaWNrZXIgPSBzdHlsZWQuZGl2YFxuICAgIFtkYXRhLXJvbGU9XCJjb2xvci1waWNrZXItc3dhdGNoXCJdIHtcbiAgICAgICAgd2lkdGg6IDMwcHg7XG4gICAgICAgIGhlaWdodDogMzBweDtcbiAgICAgICAgPiBkaXYge1xuICAgICAgICAgICAgd2lkdGg6IGluaGVyaXQ7XG4gICAgICAgIH1cbiAgICB9XG5gO1xuXG4vKipcbiAqIE5PVEU6IEF2b2lkIHVzaW5nIGBAZW1vdGlvbi9zdHlsZWRgIGluIGljb24gcmVuZGVyZXIgY29tcG9uZW50cyBhY3Jvc3MgYWxsIHBsdWdpbnMuXG4gKiBUaGlzIGlzIGNydWNpYWwgZm9yIHNlcmlhbGl6aW5nIGNvbXBvbmVudCByZW5kZXJpbmcgaW50byBhIHN0cmluZyB2YWx1ZSBhcyBwbGFpbiBIVE1MLFxuICogd2hpY2ggaXMgbmVjZXNzYXJ5IGZvciB1c2FnZSBpbiB0aGUgd2Vic2l0ZSBhcHBsaWNhdGlvbi4gUGxlYXNlIHVzZSBpbmxpbmUgc3R5bGVzIGhlcmVcbiAqIHRvIGVuc3VyZSBwcm9wZXIgc2VyaWFsaXphdGlvbi5cbiAqL1xuXG5pbnRlcmZhY2UgU2ltcGxlSWNvbiBleHRlbmRzIEljb24ge1xuICAgIGNvbG9yOiBzdHJpbmc7XG59XG5cbmNvbnN0IEljb25TdmcgPSAoKSA9PiB7XG4gICAgY29uc3QgeyBpY29uLCBzaXplIH0gPSB1c2VJY29uPFNpbXBsZUljb24+KCk7XG5cbiAgICByZXR1cm4gKFxuICAgICAgICA8c3ZnXG4gICAgICAgICAgICB3aWR0aD17c2l6ZX1cbiAgICAgICAgICAgIGhlaWdodD17c2l6ZX1cbiAgICAgICAgICAgIHZpZXdCb3g9e2AwIDAgJHtpY29uLndpZHRoIHx8IDUxMn0gNTEyYH1cbiAgICAgICAgICAgIGNvbG9yPXtpY29uPy5jb2xvciB8fCBcImluaGVyaXRcIn1cbiAgICAgICAgICAgIGRhbmdlcm91c2x5U2V0SW5uZXJIVE1MPXt7IF9faHRtbDogaWNvbi52YWx1ZSB8fCBcIlwiIH19XG4gICAgICAgICAgICBzdHlsZT17e1xuICAgICAgICAgICAgICAgIHZlcnRpY2FsQWxpZ246IFwibWlkZGxlXCJcbiAgICAgICAgICAgIH19XG4gICAgICAgIC8+XG4gICAgKTtcbn07XG5cbmludGVyZmFjZSBJY29uQ29sb3JQaWNrZXJQcm9wcyB7XG4gICAgY29sb3I6IHN0cmluZztcbiAgICBvbkNoYW5nZTogKHZhbHVlOiBzdHJpbmcpID0+IHZvaWQ7XG59XG5cbmNvbnN0IEljb25Db2xvclBpY2tlciA9ICh7IGNvbG9yLCBvbkNoYW5nZSB9OiBJY29uQ29sb3JQaWNrZXJQcm9wcykgPT4ge1xuICAgIHJldHVybiAoXG4gICAgICAgIDxEZWxheWVkT25DaGFuZ2UgdmFsdWU9e2NvbG9yfSBvbkNoYW5nZT17b25DaGFuZ2V9PlxuICAgICAgICAgICAgeyh7IHZhbHVlLCBvbkNoYW5nZSB9KSA9PiAoXG4gICAgICAgICAgICAgICAgPFN0eWxlZENvbG9yUGlja2VyPlxuICAgICAgICAgICAgICAgICAgICA8Q29sb3JQaWNrZXIgYWxpZ249e1wicmlnaHRcIn0gdmFsdWU9e3ZhbHVlfSBvbkNoYW5nZT17b25DaGFuZ2V9IC8+XG4gICAgICAgICAgICAgICAgPC9TdHlsZWRDb2xvclBpY2tlcj5cbiAgICAgICAgICAgICl9XG4gICAgICAgIDwvRGVsYXllZE9uQ2hhbmdlPlxuICAgICk7XG59O1xuXG5jb25zdCBDb2xvciA9IHN0eWxlZC5zcGFuPHsgY29sb3I6IHN0cmluZyB9PmBcbiAgICBjb2xvcjogJHsoeyBjb2xvciB9KSA9PiBjb2xvcn07XG5gO1xuXG4vKipcbiAqIEBzZWUgaHR0cHM6Ly93d3cudHlwZXNjcmlwdGxhbmcub3JnL2RvY3MvaGFuZGJvb2svMi9uYXJyb3dpbmcuaHRtbCN1c2luZy10eXBlLXByZWRpY2F0ZXNcbiAqL1xuY29uc3QgaXNTaW1wbGVJY29uID0gKGljb246IEljb24gfCBudWxsKTogaWNvbiBpcyBTaW1wbGVJY29uID0+IHtcbiAgICBpZiAoIWljb24pIHtcbiAgICAgICAgcmV0dXJuIGZhbHNlO1xuICAgIH1cbiAgICByZXR1cm4gaWNvbi50eXBlID09PSBcImljb25cIjtcbn07XG5cbmNvbnN0IEljb25UYWIgPSBvYnNlcnZlcigoKSA9PiB7XG4gICAgY29uc3QgcHJlc2VudGVyID0gdXNlSWNvblBpY2tlcigpO1xuICAgIGNvbnN0IHsgc2VsZWN0ZWRJY29uIH0gPSBwcmVzZW50ZXIudm07XG5cbiAgICBjb25zdCBbY29sb3IsIHNldENvbG9yXSA9IHVzZVN0YXRlKFwiaW5oZXJpdFwiKTtcblxuICAgIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgICAgIGlmIChjb2xvciA9PT0gXCJpbmhlcml0XCIgJiYgaXNTaW1wbGVJY29uKHNlbGVjdGVkSWNvbikpIHtcbiAgICAgICAgICAgIHNldENvbG9yKHNlbGVjdGVkSWNvbi5jb2xvcik7XG4gICAgICAgIH1cbiAgICB9LCBbc2VsZWN0ZWRJY29uXSk7XG5cbiAgICBjb25zdCBvbkNvbG9yQ2hhbmdlID0gKGNvbG9yOiBzdHJpbmcpID0+IHtcbiAgICAgICAgc2V0Q29sb3IoY29sb3IpO1xuXG4gICAgICAgIGlmIChpc1NpbXBsZUljb24oc2VsZWN0ZWRJY29uKSkge1xuICAgICAgICAgICAgcHJlc2VudGVyLnNldEljb24oeyAuLi5zZWxlY3RlZEljb24sIGNvbG9yIH0pO1xuICAgICAgICB9XG4gICAgfTtcblxuICAgIGNvbnN0IG9uSWNvblNlbGVjdCA9IChpY29uOiBJY29uKSA9PiB7XG4gICAgICAgIC8vIFNldCBpY29uIGFuZCBhc3NpZ24gY3VycmVudCBjb2xvci5cbiAgICAgICAgcHJlc2VudGVyLnNldEljb24oeyAuLi5pY29uLCBjb2xvciB9KTtcbiAgICAgICAgcHJlc2VudGVyLmNsb3NlTWVudSgpO1xuICAgIH07XG5cbiAgICByZXR1cm4gKFxuICAgICAgICA8SWNvblBpY2tlclRhYlxuICAgICAgICAgICAgbGFiZWw9e1wiSWNvbnNcIn1cbiAgICAgICAgICAgIG9uQ2hhbmdlPXtvbkljb25TZWxlY3R9XG4gICAgICAgICAgICBjZWxsRGVjb3JhdG9yPXtjZWxsID0+IDxDb2xvciBjb2xvcj17Y29sb3J9PntjZWxsfTwvQ29sb3I+fVxuICAgICAgICAgICAgYWN0aW9ucz17PEljb25Db2xvclBpY2tlciBjb2xvcj17Y29sb3J9IG9uQ2hhbmdlPXtvbkNvbG9yQ2hhbmdlfSAvPn1cbiAgICAgICAgLz5cbiAgICApO1xufSk7XG5cbmV4cG9ydCBjb25zdCBTaW1wbGVJY29uUGx1Z2luID0gKCkgPT4ge1xuICAgIHJldHVybiAoXG4gICAgICAgIDxJY29uUGlja2VyQ29uZmlnPlxuICAgICAgICAgICAgPEljb25QaWNrZXJDb25maWcuSWNvblR5cGUgbmFtZT17XCJpY29uXCJ9PlxuICAgICAgICAgICAgICAgIDxJY29uUGlja2VyQ29uZmlnLkljb25UeXBlLkljb24gZWxlbWVudD17PEljb25TdmcgLz59IC8+XG4gICAgICAgICAgICAgICAgPEljb25QaWNrZXJDb25maWcuSWNvblR5cGUuVGFiIGVsZW1lbnQ9ezxJY29uVGFiIC8+fSAvPlxuICAgICAgICAgICAgPC9JY29uUGlja2VyQ29uZmlnLkljb25UeXBlPlxuICAgICAgICA8L0ljb25QaWNrZXJDb25maWc+XG4gICAgKTtcbn07XG4iXX0= */"));
 
 /**
  * @see https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates
  */
-var isSimpleIcon = function isSimpleIcon(icon) {
+const isSimpleIcon = icon => {
   if (!icon) {
     return false;
   }
   return icon.type === "icon";
 };
-var IconTab = (0, _mobxReactLite.observer)(function () {
-  var presenter = (0, _IconPickerPresenterProvider.useIconPicker)();
-  var selectedIcon = presenter.vm.selectedIcon;
-  var _useState = (0, _react.useState)("inherit"),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    color = _useState2[0],
-    setColor = _useState2[1];
-  (0, _react.useEffect)(function () {
+const IconTab = observer(() => {
+  const presenter = useIconPicker();
+  const {
+    selectedIcon
+  } = presenter.vm;
+  const [color, setColor] = useState("inherit");
+  useEffect(() => {
     if (color === "inherit" && isSimpleIcon(selectedIcon)) {
       setColor(selectedIcon.color);
     }
   }, [selectedIcon]);
-  var onColorChange = function onColorChange(color) {
+  const onColorChange = color => {
     setColor(color);
     if (isSimpleIcon(selectedIcon)) {
-      presenter.setIcon((0, _objectSpread2.default)((0, _objectSpread2.default)({}, selectedIcon), {}, {
-        color: color
-      }));
+      presenter.setIcon({
+        ...selectedIcon,
+        color
+      });
     }
   };
-  var onIconSelect = function onIconSelect(icon) {
+  const onIconSelect = icon => {
     // Set icon and assign current color.
-    presenter.setIcon((0, _objectSpread2.default)((0, _objectSpread2.default)({}, icon), {}, {
-      color: color
-    }));
+    presenter.setIcon({
+      ...icon,
+      color
+    });
     presenter.closeMenu();
   };
-  return /*#__PURE__*/_react.default.createElement(_IconPickerTab.IconPickerTab, {
+  return /*#__PURE__*/React.createElement(IconPickerTab, {
+    value: "icon",
     label: "Icons",
     onChange: onIconSelect,
-    cellDecorator: function cellDecorator(cell) {
-      return /*#__PURE__*/_react.default.createElement(Color, {
-        color: color
-      }, cell);
-    },
-    actions: /*#__PURE__*/_react.default.createElement(IconColorPicker, {
+    cellDecorator: cell => /*#__PURE__*/React.createElement("span", {
+      style: {
+        color
+      }
+    }, cell),
+    actions: /*#__PURE__*/React.createElement(IconColorPicker, {
       color: color,
       onChange: onColorChange
     })
   });
 });
-var SimpleIconPlugin = exports.SimpleIconPlugin = function SimpleIconPlugin() {
-  return /*#__PURE__*/_react.default.createElement(_config.IconPickerConfig, null, /*#__PURE__*/_react.default.createElement(_config.IconPickerConfig.IconType, {
+export const SimpleIconPlugin = () => {
+  return /*#__PURE__*/React.createElement(IconPickerConfig, null, /*#__PURE__*/React.createElement(IconPickerConfig.IconType, {
     name: "icon"
-  }, /*#__PURE__*/_react.default.createElement(_config.IconPickerConfig.IconType.Icon, {
-    element: /*#__PURE__*/_react.default.createElement(IconSvg, null)
-  }), /*#__PURE__*/_react.default.createElement(_config.IconPickerConfig.IconType.Tab, {
-    element: /*#__PURE__*/_react.default.createElement(IconTab, null)
+  }, /*#__PURE__*/React.createElement(IconPickerConfig.IconType.Icon, {
+    element: /*#__PURE__*/React.createElement(IconSvg, null)
+  }), /*#__PURE__*/React.createElement(IconPickerConfig.IconType.Tab, {
+    element: /*#__PURE__*/React.createElement(IconTab, null)
   })));
 };