npm - @webiny/lexical-editor-actions - Versions diffs - 0.0.0-unstable.496cf268ac → 0.0.0-unstable.61c048f412 - Mend

@webiny/lexical-editor-actions 0.0.0-unstable.496cf268ac → 0.0.0-unstable.61c048f412

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/LexicalEditorActions.d.ts +2 -2
package/LexicalEditorActions.js +15 -13
package/LexicalEditorActions.js.map +1 -1
package/README.md +6 -10
package/components/LexicalColorPicker/LexicalColorPicker.d.ts +4 -3
package/components/LexicalColorPicker/LexicalColorPicker.js +126 -135
package/components/LexicalColorPicker/LexicalColorPicker.js.map +1 -1
package/components/LexicalColorPickerDropdown.d.ts +5 -2
package/components/LexicalColorPickerDropdown.js +22 -20
package/components/LexicalColorPickerDropdown.js.map +1 -1
package/components/TextAlignmentDropdown.d.ts +2 -0
package/components/TextAlignmentDropdown.js +78 -0
package/components/TextAlignmentDropdown.js.map +1 -0
package/index.d.ts +1 -1
package/index.js +2 -11
package/index.js.map +1 -1
package/package.json +10 -14

package/LexicalEditorActions.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export declare const LexicalEditorActions: () => JSX.Element;
+import React from "react";
+export declare const LexicalEditorActions: () => React.JSX.Element;

package/LexicalEditorActions.js CHANGED Viewed

@@ -1,16 +1,18 @@
-"use strict";
+import { TextAlignmentAction } from "@webiny/lexical-editor";
+import React from "react";
+import { LexicalColorPickerDropdown } from "./components/LexicalColorPickerDropdown.js";
+import { FontColorAction } from "@webiny/lexical-editor";
+import { TextAlignmentDropdown } from "./components/TextAlignmentDropdown.js";
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.LexicalEditorActions = void 0;
-var _lexicalEditor = require("@webiny/lexical-editor");
-var _react = _interopRequireDefault(require("react"));
-var _LexicalColorPickerDropdown = require("./components/LexicalColorPickerDropdown");
-var LexicalEditorActions = function LexicalEditorActions() {
-  return /*#__PURE__*/_react.default.createElement(_lexicalEditor.LexicalEditorConfig, null, /*#__PURE__*/_react.default.createElement(_lexicalEditor.FontColorAction.ColorPicker, {
-    element: /*#__PURE__*/_react.default.createElement(_LexicalColorPickerDropdown.LexicalColorPickerDropdown, null)
+/*
+ * Lexical editor configuration and components with global composition scope
+ */
+export const LexicalEditorActions = () => {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FontColorAction.ColorPicker, {
+    element: /*#__PURE__*/React.createElement(LexicalColorPickerDropdown, null)
+  }), /*#__PURE__*/React.createElement(TextAlignmentAction.TextAlignmentDropDown, {
+    element: /*#__PURE__*/React.createElement(TextAlignmentDropdown, null)
   }));
 };
-exports.LexicalEditorActions = LexicalEditorActions;
+//# sourceMappingURL=LexicalEditorActions.js.map

package/LexicalEditorActions.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["LexicalEditorActions"],"sources":["LexicalEditorActions.tsx"],"sourcesContent":["import { ~~LexicalEditorConfig~~ } from \"@webiny/lexical-editor\";\nimport React from \"react\";\nimport { LexicalColorPickerDropdown } from \"~/components/LexicalColorPickerDropdown\";\nimport { FontColorAction } from \"@webiny/lexical-editor\";\n\nexport const LexicalEditorActions = () => {\n return (\n ~~<LexicalEditorConfig>\~~n <FontColorAction.ColorPicker element={<LexicalColorPickerDropdown />} />\n ~~</LexicalEditorConfig>\~~n );\n};\n"],"mappings":"~~;;;;;;;~~AAAA;AACA;AACA;~~AAGO~~,~~IAAMA~~,oBAAoB,~~GAAG~~,~~SAAvBA~~,~~oBAAoB,GAAS~~;EACtC,~~oBACI~~,~~6BAAC~~,~~kCAAmB~~,~~qBAChB~~,~~6BAAC~~,~~8BAAe~~,~~CAAC~~,WAAW;~~IAAC~~,OAAO,~~eAAE~~,~~6BAAC~~,~~sDAA0B~~;~~EAAI~~,~~EAAG~~,~~CACtD~~;~~AAE9B~~,CAAC;~~AAAC~~"}
1	+ {"version":3,"names":["TextAlignmentAction","React","LexicalColorPickerDropdown","FontColorAction","TextAlignmentDropdown","LexicalEditorActions","createElement","Fragment","ColorPicker","element","TextAlignmentDropDown"],"sources":["LexicalEditorActions.tsx"],"sourcesContent":["import { TextAlignmentAction } from \"@webiny/lexical-editor\";\nimport React from \"react\";\nimport { LexicalColorPickerDropdown } from \"~/components/LexicalColorPickerDropdown.js\";\nimport { FontColorAction } from \"@webiny/lexical-editor\";\nimport { TextAlignmentDropdown } from \"~/components/TextAlignmentDropdown.js\";\n\n/\n Lexical editor configuration and components with global composition scope\n */\nexport const LexicalEditorActions = () => {\n return (\n <>\n <FontColorAction.ColorPicker element={<LexicalColorPickerDropdown />} />\n <TextAlignmentAction.TextAlignmentDropDown element={<TextAlignmentDropdown />} />\n </>\n );\n};\n"],"mappings":"AAAA,SAASA,mBAAmB,QAAQ,wBAAwB;AAC5D,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,0BAA0B;AACnC,SAASC,eAAe,QAAQ,wBAAwB;AACxD,SAASC,qBAAqB;;AAE9B;AACA;AACA;AACA,OAAO,MAAMC,oBAAoB,GAAGA,CAAA,KAAM;EACtC,oBACIJ,KAAA,CAAAK,aAAA,CAAAL,KAAA,CAAAM,QAAA,qBACIN,KAAA,CAAAK,aAAA,CAACH,eAAe,CAACK,WAAW;IAACC,OAAO,eAAER,KAAA,CAAAK,aAAA,CAACJ,0BAA0B,MAAE;EAAE,CAAE,CAAC,eACxED,KAAA,CAAAK,aAAA,CAACN,mBAAmB,CAACU,qBAAqB;IAACD,OAAO,eAAER,KAAA,CAAAK,aAAA,CAACF,qBAAqB,MAAE;EAAE,CAAE,CAClF,CAAC;AAEX,CAAC","ignoreList":[]}

package/README.md CHANGED Viewed

@@ -1,15 +1,11 @@
 # @webiny/lexical-editor-actions
-[![](https://img.shields.io/npm/dw/@webiny/lexical-editor-actions.svg)](https://www.npmjs.com/package/@webiny/lexical-editor)
-[![](https://img.shields.io/npm/v/@webiny/lexical-editor-actions.svg)](https://www.npmjs.com/package/@webiny/lexical-editor)
-[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
-[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
+> [!NOTE]
+> This package is part of the [Webiny](https://www.webiny.com) monorepo.
+> It’s **included in every Webiny project by default** and is not meant to be used as a standalone package.
-## About
+📘 **Documentation:** [https://www.webiny.com/docs](https://www.webiny.com/docs)
-This package provides actions plugins for Lexical editor.
+---
-## Where is it used?
-Currently, this packaged is used in [@webiny/app-serverless-cms](../app-serverless-cms).
+_This README file is automatically generated during the publish process._

package/components/LexicalColorPicker/LexicalColorPicker.d.ts CHANGED Viewed

@@ -1,9 +1,10 @@
 import React from "react";
 interface LexicalColorPickerProps {
     value: string;
-    onChange?: Function;
-    onChangeComplete: Function;
+    onChange?: (color: string) => void;
+    onChangeComplete: (color: string, name?: string) => void;
     handlerClassName?: string;
+    allowCustomColor?: boolean;
 }
-export declare const LexicalColorPicker: React.FC<LexicalColorPickerProps>;
+export declare const LexicalColorPicker: ({ value, onChange, onChangeComplete, allowCustomColor }: LexicalColorPickerProps) => React.JSX.Element;
 export {};

package/components/LexicalColorPicker/LexicalColorPicker.js CHANGED Viewed

@@ -1,59 +1,54 @@
-"use strict";
+import _styled from "@emotion/styled/base";
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+import React, { useCallback, useState, useEffect, useMemo } from "react";
+import { css } from "emotion";
+import { ChromePicker } from "react-color";
+import { Tooltip } from "@webiny/ui/Tooltip/index.js";
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.LexicalColorPicker = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _emotion = require("emotion");
-var _usePageBuilder2 = require("@webiny/app-page-builder/hooks/usePageBuilder");
-var _usePageElements = require("@webiny/app-page-builder-elements/hooks/usePageElements");
-var _utils = require("@webiny/app-page-builder/utils");
-var _classnames2 = _interopRequireDefault(require("classnames"));
-var _reactColor = require("react-color");
-var _roundColor_lens24px = require("./round-color_lens-24px.svg");
 // Icons
-var ColorPickerStyle = /*#__PURE__*/(0, _styled.default)("div", {
-  target: "ewrv11k0",
+import { ReactComponent as IconPalette } from "./round-color_lens-24px.svg";
+import { useRichTextEditor } from "@webiny/lexical-editor";
+const ColorPickerStyle = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "ewrv11k2"
+} : {
+  target: "ewrv11k2",
   label: "ColorPickerStyle"
-})({
-  position: "relative",
-  display: "flex",
-  flexWrap: "wrap",
-  justifyContent: "space-between",
-  width: 225,
-  padding: 0,
-  backgroundColor: "#fff"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1tb6adp",
+  styles: "position:relative;display:flex;flex-wrap:wrap;justify-content:flex-start;width:240px;padding:15px;background-color:#fff"
+} : {
+  name: "1tb6adp",
+  styles: "position:relative;display:flex;flex-wrap:wrap;justify-content:flex-start;width:240px;padding:15px;background-color:#fff/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkxleGljYWxDb2xvclBpY2tlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBYXlCIiwiZmlsZSI6IkxleGljYWxDb2xvclBpY2tlci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IFN5bnRoZXRpY0V2ZW50IH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgUmVhY3QsIHsgdXNlQ2FsbGJhY2ssIHVzZVN0YXRlLCB1c2VFZmZlY3QsIHVzZU1lbW8gfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSBcImVtb3Rpb25cIjtcbmltcG9ydCB0eXBlIHsgQ29sb3JTdGF0ZSwgUkdCQ29sb3IgfSBmcm9tIFwicmVhY3QtY29sb3JcIjtcbmltcG9ydCB7IENocm9tZVBpY2tlciB9IGZyb20gXCJyZWFjdC1jb2xvclwiO1xuaW1wb3J0IHR5cGUgeyBPbkNoYW5nZUhhbmRsZXIgfSBmcm9tIFwicmVhY3QtY29sb3IvbGliL2NvbXBvbmVudHMvY29tbW9uL0NvbG9yV3JhcC5qc1wiO1xuaW1wb3J0IHsgVG9vbHRpcCB9IGZyb20gXCJAd2ViaW55L3VpL1Rvb2x0aXAvaW5kZXguanNcIjtcblxuLy8gSWNvbnNcbmltcG9ydCB7IFJlYWN0Q29tcG9uZW50IGFzIEljb25QYWxldHRlIH0gZnJvbSBcIi4vcm91bmQtY29sb3JfbGVucy0yNHB4LnN2Z1wiO1xuaW1wb3J0IHsgdXNlUmljaFRleHRFZGl0b3IgfSBmcm9tIFwiQHdlYmlueS9sZXhpY2FsLWVkaXRvclwiO1xuXG5jb25zdCBDb2xvclBpY2tlclN0eWxlID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxuICAgIGRpc3BsYXk6IFwiZmxleFwiLFxuICAgIGZsZXhXcmFwOiBcIndyYXBcIixcbiAgICBqdXN0aWZ5Q29udGVudDogXCJmbGV4LXN0YXJ0XCIsXG4gICAgd2lkdGg6IDI0MCxcbiAgICBwYWRkaW5nOiAxNSxcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IFwiI2ZmZlwiXG59KTtcblxuY29uc3QgQ29sb3JCb3ggPSBzdHlsZWQoXCJkaXZcIikoe1xuICAgIGN1cnNvcjogXCJwb2ludGVyXCIsXG4gICAgd2lkdGg6IDQwLFxuICAgIGhlaWdodDogNDAsXG4gICAgYm9yZGVyUmFkaXVzOiBcIjUwJVwiLFxuICAgIG1hcmdpbjogNSxcbiAgICBib3JkZXI6IFwiMXB4IHNvbGlkIHZhcigtLW1kYy10aGVtZS1vbi1iYWNrZ3JvdW5kKVwiLFxuICAgIHBhZGRpbmc6IDMsXG4gICAgYm94U2l6aW5nOiBcImNvbnRlbnQtYm94XCJcbn0pO1xuXG5jb25zdCBDb2xvciA9IHN0eWxlZChcImJ1dHRvblwiKSh7XG4gICAgY3Vyc29yOiBcInBvaW50ZXJcIixcbiAgICB3aWR0aDogNDAsXG4gICAgaGVpZ2h0OiA0MCxcbiAgICB0cmFuc2l0aW9uOiBcInRyYW5zZm9ybSAwLjFzLCBib3JkZXIgMC4yc1wiLFxuICAgIGJvcmRlckNvbG9yOiBcInRyYW5zcGFyZW50XCIsXG4gICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAgICBib3JkZXJSYWRpdXM6IFwiNTAlXCIsXG4gICAgXCImOjphZnRlclwiOiB7XG4gICAgICAgIHRyYW5zaXRpb246IFwib3BhY2l0eSAwLjVzIGN1YmljLWJlemllcigwLjE2NSwgMC44NCwgMC40NCwgMSlcIixcbiAgICAgICAgY29udGVudDogJ1wiXCInLFxuICAgICAgICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICAgICAgICB0b3A6IDAsXG4gICAgICAgIGxlZnQ6IDAsXG4gICAgICAgIHdpZHRoOiBcIjEwMCVcIixcbiAgICAgICAgaGVpZ2h0OiBcIjEwMCVcIixcbiAgICAgICAgekluZGV4OiAtMSxcbiAgICAgICAgb3BhY2l0eTogMFxuICAgIH0sXG4gICAgXCImOmhvdmVyXCI6IHtcbiAgICAgICAgdHJhbnNmb3JtOiBcInNjYWxlKDEuMSlcIixcbiAgICAgICAgYm94U2hhZG93OiBcIjAgMC4yNXJlbSAwLjEyNXJlbSAwIHJnYmEoMCwwLDAsMC4wNSlcIixcbiAgICAgICAgXCImOjphZnRlclwiOiB7XG4gICAgICAgICAgICBvcGFjaXR5OiAxXG4gICAgICAgIH1cbiAgICB9XG59KTtcblxuY29uc3QgaWNvblBhbGV0dGVTdHlsZSA9IGNzcyh7XG4gICAgaGVpZ2h0OiAyMCxcbiAgICB3aWR0aDogXCIxMDAlXCIsXG4gICAgbWFyZ2luVG9wOiAxLFxuICAgIGNvbG9yOiBcInZhcigtLW1kYy10aGVtZS1zZWNvbmRhcnkpXCJcbn0pO1xuXG5jb25zdCBDT0xPUlMgPSB7XG4gICAgbGlnaHRHcmF5OiBcImhzbGEoMCwgMCUsIDk3JSwgMSlcIixcbiAgICBncmF5OiBcImhzbGEoMzAwLCAyJSwgOTIlLCAxKVwiLFxuICAgIGRhcmtHcmF5OiBcImhzbGEoMCwgMCUsIDcwJSwgMSlcIixcbiAgICBkYXJrZXN0R3JheTogXCJoc2xhKDAsIDAlLCAyMCUsIDEpXCIsXG4gICAgYmxhY2s6IFwiaHNsYSgyMDgsIDEwMCUsIDUlLCAxKVwiXG59O1xuXG5jb25zdCBzdHlsZXMgPSB7XG4gICAgc2VsZWN0ZWRDb2xvcjogY3NzKHtcbiAgICAgICAgYm94U2hhZG93OiBcImluc2V0IDBweCAwcHggMHB4IDEwcHggdmFyKC0tbWRjLXRoZW1lLXNlY29uZGFyeSlcIixcbiAgICAgICAgYnV0dG9uOiB7XG4gICAgICAgICAgICBib3JkZXI6IFwiNXB4IHNvbGlkIHZhcigtLW1kYy10aGVtZS1zdXJmYWNlKVwiXG4gICAgICAgIH1cbiAgICB9KSxcbiAgICBidXR0b246IGNzcyh7XG4gICAgICAgIGN1cnNvcjogXCJwb2ludGVyXCIsXG4gICAgICAgIGhlaWdodDogMzAsXG4gICAgICAgIGJveFNpemluZzogXCJib3JkZXItYm94XCIsXG4gICAgICAgIFwiJjpob3Zlcjpub3QoOmRpc2FibGVkKVwiOiB7IGJhY2tncm91bmRDb2xvcjogQ09MT1JTLmdyYXkgfSxcbiAgICAgICAgXCImOmZvY3VzOm5vdCg6ZGlzYWJsZWQpXCI6IHtcbiAgICAgICAgICAgIG91dGxpbmU6IFwibm9uZVwiXG4gICAgICAgIH0sXG4gICAgICAgIFwiJjpkaXNhYmxlZFwiOiB7XG4gICAgICAgICAgICBvcGFjaXR5OiAwLjUsXG4gICAgICAgICAgICBjdXJzb3I6IFwibm90LWFsbG93ZWRcIlxuICAgICAgICB9LFxuICAgICAgICBcIiYgc3ZnXCI6IHtcbiAgICAgICAgICAgIHdpZHRoOiAxNixcbiAgICAgICAgICAgIGhlaWdodDogMTZcbiAgICAgICAgfVxuICAgIH0pLFxuICAgIGNvbG9yOiBjc3Moe1xuICAgICAgICB3aWR0aDogXCI0MHB4XCIsXG4gICAgICAgIGhlaWdodDogXCIxMDAlXCJcbiAgICB9KVxufTtcblxuY29uc3QgY2hyb21lUGlja2VyU3R5bGUgPSBjc3Moe1xuICAgIHdpZHRoOiBcIjI3MHB4ICFpbXBvcnRhbnRcIixcbiAgICBtYXJnaW46IFwiMTVweCAtMTVweCAtMTVweCAtMTVweFwiXG59KTtcblxuaW50ZXJmYWNlIExleGljYWxDb2xvclBpY2tlclByb3BzIHtcbiAgICB2YWx1ZTogc3RyaW5nO1xuICAgIG9uQ2hhbmdlPzogKGNvbG9yOiBzdHJpbmcpID0+IHZvaWQ7XG4gICAgb25DaGFuZ2VDb21wbGV0ZTogKGNvbG9yOiBzdHJpbmcsIG5hbWU/OiBzdHJpbmcpID0+IHZvaWQ7XG4gICAgaGFuZGxlckNsYXNzTmFtZT86IHN0cmluZztcbiAgICBhbGxvd0N1c3RvbUNvbG9yPzogYm9vbGVhbjtcbn1cblxuY29uc3Qgc2hvd1BpY2tlclN0eWxlID0geyBkaXNwbGF5OiBcImJsb2NrXCIgfTtcbmNvbnN0IGhpZGVQaWNrZXJTdHlsZSA9IHsgZGlzcGxheTogXCJub25lXCIgfTtcblxuZXhwb3J0IGNvbnN0IExleGljYWxDb2xvclBpY2tlciA9ICh7XG4gICAgdmFsdWUsXG4gICAgb25DaGFuZ2UsXG4gICAgb25DaGFuZ2VDb21wbGV0ZSxcbiAgICBhbGxvd0N1c3RvbUNvbG9yXG59OiBMZXhpY2FsQ29sb3JQaWNrZXJQcm9wcykgPT4ge1xuICAgIGNvbnN0IFtzaG93UGlja2VyLCBzZXRTaG93UGlja2VyXSA9IHVzZVN0YXRlKGZhbHNlKTtcbiAgICAvLyBFaXRoZXIgYSBjdXN0b20gY29sb3Igb3IgYSBjb2xvciBjb21pbmcgZnJvbSB0aGUgdGhlbWUgb2JqZWN0LlxuICAgIGNvbnN0IFthY3R1YWxTZWxlY3RlZENvbG9yLCBzZXRBY3R1YWxTZWxlY3RlZENvbG9yXSA9IHVzZVN0YXRlKHZhbHVlIHx8IFwiI2ZmZlwiKTtcbiAgICBjb25zdCBbaXNUaGVtZUNvbG9yLCBzZXRJc1RoZW1lQ29sb3JdID0gdXNlU3RhdGUoZmFsc2UpO1xuXG4gICAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAgICAgaWYgKHZhbHVlKSB7XG4gICAgICAgICAgICBzZXRBY3R1YWxTZWxlY3RlZENvbG9yKHZhbHVlKTtcbiAgICAgICAgfVxuICAgIH0sIFt2YWx1ZV0pO1xuXG4gICAgY29uc3QgZ2V0Q29sb3JWYWx1ZSA9IHVzZUNhbGxiYWNrKChyZ2I6IFJHQkNvbG9yLCBhbHBoYT86IG51bWJlcikgPT4ge1xuICAgICAgICByZXR1cm4gYHJnYmEoJHtyZ2Iucn0sICR7cmdiLmd9LCAke3JnYi5ifSwgJHthbHBoYSA/PyByZ2IuYX0pYDtcbiAgICB9LCBbXSk7XG5cbiAgICBjb25zdCBvbkNvbG9yQ2hhbmdlID0gdXNlQ2FsbGJhY2soXG4gICAgICAgIChjb2xvcjogQ29sb3JTdGF0ZSwgZXZlbnQ6IFJlYWN0LlN5bnRoZXRpY0V2ZW50KSA9PiB7XG4gICAgICAgICAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xuICAgICAgICAgICAgLy8gY29udHJvbHMgb2YgdGhlIHBpY2tlciBhcmUgdXBkYXRlZCBhcyB1c2VyIG1vdmVzIHRoZSBtb3VzZVxuICAgICAgICAgICAgY29uc3QgY3VzdG9tQ29sb3IgPSBnZXRDb2xvclZhbHVlKGNvbG9yLnJnYiwgY29sb3IucmdiLmEgPT09IDAgPyAxIDogY29sb3IucmdiLmEpO1xuICAgICAgICAgICAgc2V0QWN0dWFsU2VsZWN0ZWRDb2xvcihjdXN0b21Db2xvcik7XG4gICAgICAgICAgICBpZiAodHlwZW9mIG9uQ2hhbmdlID09PSBcImZ1bmN0aW9uXCIpIHtcbiAgICAgICAgICAgICAgICBvbkNoYW5nZShjdXN0b21Db2xvcik7XG4gICAgICAgICAgICB9XG4gICAgICAgIH0sXG4gICAgICAgIFtvbkNoYW5nZV1cbiAgICApO1xuXG4gICAgY29uc3Qgb25Db2xvckNoYW5nZUNvbXBsZXRlID0gdXNlQ2FsbGJhY2soXG4gICAgICAgICh7IHJnYiB9OiBDb2xvclN0YXRlLCBldmVudDogUmVhY3QuU3ludGhldGljRXZlbnQpID0+IHtcbiAgICAgICAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG4gICAgICAgICAgICBjb25zdCBjb2xvciA9IGdldENvbG9yVmFsdWUocmdiLCByZ2IuYSA9PT0gMCA/IDEgOiByZ2IuYSk7XG4gICAgICAgICAgICBzZXRBY3R1YWxTZWxlY3RlZENvbG9yKGNvbG9yKTtcbiAgICAgICAgICAgIG9uQ2hhbmdlQ29tcGxldGUoY29sb3IpO1xuICAgICAgICB9LFxuICAgICAgICBbb25DaGFuZ2VDb21wbGV0ZV1cbiAgICApO1xuXG4gICAgY29uc3QgdG9nZ2xlUGlja2VyID0gdXNlQ2FsbGJhY2soKGU6IFN5bnRoZXRpY0V2ZW50KSA9PiB7XG4gICAgICAgIGUuc3RvcFByb3BhZ2F0aW9uKCk7XG4gICAgICAgIHNldFNob3dQaWNrZXIoc3RhdGUgPT4gIXN0YXRlKTtcbiAgICB9LCBbXSk7XG5cbiAgICBjb25zdCB7IHRoZW1lIH0gPSB1c2VSaWNoVGV4dEVkaXRvcigpO1xuXG4gICAgY29uc3QgdGhlbWVDb2xvcnMgPSB1c2VNZW1vKCgpID0+IHRoZW1lPy5jb2xvcnMgPz8gW10sIFtdKTtcblxuICAgIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgICAgIGNvbnN0IGlzVGhlbWVDb2xvciA9IHRoZW1lQ29sb3JzLnNvbWUoY29sb3IgPT4gY29sb3IuaWQgPT09IHZhbHVlKTtcbiAgICAgICAgc2V0SXNUaGVtZUNvbG9yKGlzVGhlbWVDb2xvcik7XG4gICAgfSwgW3RoZW1lQ29sb3JzLCB2YWx1ZV0pO1xuXG4gICAgcmV0dXJuIChcbiAgICAgICAgPENvbG9yUGlja2VyU3R5bGU+XG4gICAgICAgICAgICB7dGhlbWVDb2xvcnMubWFwKGNvbG9yID0+IHtcbiAgICAgICAgICAgICAgICByZXR1cm4gKFxuICAgICAgICAgICAgICAgICAgICA8Q29sb3JCb3hcbiAgICAgICAgICAgICAgICAgICAgICAgIGtleT17Y29sb3IuaWR9XG4gICAgICAgICAgICAgICAgICAgICAgICBjbGFzc05hbWU9e2NvbG9yLmlkID09PSB2YWx1ZSA/IHN0eWxlcy5zZWxlY3RlZENvbG9yIDogXCJcIn1cbiAgICAgICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgICAgICAgPFRvb2x0aXAgY29udGVudD17PHNwYW4+e2NvbG9yLmxhYmVsfTwvc3Bhbj59IHBsYWNlbWVudD1cImJvdHRvbVwiPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxDb2xvclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBzdHlsZT17eyBiYWNrZ3JvdW5kQ29sb3I6IGNvbG9yLnZhbHVlIH19XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIG9uQ2xpY2s9eygpID0+IHtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIG9uQ2hhbmdlQ29tcGxldGUoY29sb3IudmFsdWUsIGNvbG9yLmlkKTtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgfX1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgICAgICAgICAgICAgPC9Ub29sdGlwPlxuICAgICAgICAgICAgICAgICAgICA8L0NvbG9yQm94PlxuICAgICAgICAgICAgICAgICk7XG4gICAgICAgICAgICB9KX1cblxuICAgICAgICAgICAge2FsbG93Q3VzdG9tQ29sb3IgPyAoXG4gICAgICAgICAgICAgICAgPENvbG9yQm94IGNsYXNzTmFtZT17dmFsdWUgJiYgIWlzVGhlbWVDb2xvciA/IHN0eWxlcy5zZWxlY3RlZENvbG9yIDogXCJcIn0+XG4gICAgICAgICAgICAgICAgICAgIDxUb29sdGlwIGNvbnRlbnQ9ezxzcGFuPkNvbG9yIHBpY2tlcjwvc3Bhbj59IHBsYWNlbWVudD1cImJvdHRvbVwiPlxuICAgICAgICAgICAgICAgICAgICAgICAgPENvbG9yXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgc3R5bGU9e3sgYmFja2dyb3VuZENvbG9yOiBpc1RoZW1lQ29sb3IgPyBcIiNmZmZcIiA6IHZhbHVlIH19XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgb25DbGljaz17dG9nZ2xlUGlja2VyfVxuICAgICAgICAgICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxJY29uUGFsZXR0ZSBjbGFzc05hbWU9e2ljb25QYWxldHRlU3R5bGV9IC8+XG4gICAgICAgICAgICAgICAgICAgICAgICA8L0NvbG9yPlxuICAgICAgICAgICAgICAgICAgICA8L1Rvb2x0aXA+XG4gICAgICAgICAgICAgICAgPC9Db2xvckJveD5cbiAgICAgICAgICAgICkgOiBudWxsfVxuXG4gICAgICAgICAgICA8ZGl2IHN0eWxlPXtzaG93UGlja2VyID8gc2hvd1BpY2tlclN0eWxlIDogaGlkZVBpY2tlclN0eWxlfT5cbiAgICAgICAgICAgICAgICA8Q2hyb21lUGlja2VyXG4gICAgICAgICAgICAgICAgICAgIGNsYXNzTmFtZT17Y2hyb21lUGlja2VyU3R5bGV9XG4gICAgICAgICAgICAgICAgICAgIGNvbG9yPXthY3R1YWxTZWxlY3RlZENvbG9yfVxuICAgICAgICAgICAgICAgICAgICBkaXNhYmxlQWxwaGE9e3RydWV9XG4gICAgICAgICAgICAgICAgICAgIG9uQ2hhbmdlPXtvbkNvbG9yQ2hhbmdlIGFzIE9uQ2hhbmdlSGFuZGxlcn1cbiAgICAgICAgICAgICAgICAgICAgb25DaGFuZ2VDb21wbGV0ZT17b25Db2xvckNoYW5nZUNvbXBsZXRlIGFzIE9uQ2hhbmdlSGFuZGxlcn1cbiAgICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvQ29sb3JQaWNrZXJTdHlsZT5cbiAgICApO1xufTtcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-var ColorBox = /*#__PURE__*/(0, _styled.default)("div", {
+const ColorBox = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "ewrv11k1"
+} : {
   target: "ewrv11k1",
   label: "ColorBox"
-})({
-  cursor: "pointer",
-  width: 50,
-  height: 40,
-  margin: 10,
-  borderRadius: 2
+})(process.env.NODE_ENV === "production" ? {
+  name: "tujbiz",
+  styles: "cursor:pointer;width:40px;height:40px;border-radius:50%;margin:5px;border:1px solid var(--mdc-theme-on-background);padding:3px;box-sizing:content-box"
+} : {
+  name: "tujbiz",
+  styles: "cursor:pointer;width:40px;height:40px;border-radius:50%;margin:5px;border:1px solid var(--mdc-theme-on-background);padding:3px;box-sizing:content-box/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkxleGljYWxDb2xvclBpY2tlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBdUJpQiIsImZpbGUiOiJMZXhpY2FsQ29sb3JQaWNrZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHR5cGUgeyBTeW50aGV0aWNFdmVudCB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IFJlYWN0LCB7IHVzZUNhbGxiYWNrLCB1c2VTdGF0ZSwgdXNlRWZmZWN0LCB1c2VNZW1vIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IGNzcyB9IGZyb20gXCJlbW90aW9uXCI7XG5pbXBvcnQgdHlwZSB7IENvbG9yU3RhdGUsIFJHQkNvbG9yIH0gZnJvbSBcInJlYWN0LWNvbG9yXCI7XG5pbXBvcnQgeyBDaHJvbWVQaWNrZXIgfSBmcm9tIFwicmVhY3QtY29sb3JcIjtcbmltcG9ydCB0eXBlIHsgT25DaGFuZ2VIYW5kbGVyIH0gZnJvbSBcInJlYWN0LWNvbG9yL2xpYi9jb21wb25lbnRzL2NvbW1vbi9Db2xvcldyYXAuanNcIjtcbmltcG9ydCB7IFRvb2x0aXAgfSBmcm9tIFwiQHdlYmlueS91aS9Ub29sdGlwL2luZGV4LmpzXCI7XG5cbi8vIEljb25zXG5pbXBvcnQgeyBSZWFjdENvbXBvbmVudCBhcyBJY29uUGFsZXR0ZSB9IGZyb20gXCIuL3JvdW5kLWNvbG9yX2xlbnMtMjRweC5zdmdcIjtcbmltcG9ydCB7IHVzZVJpY2hUZXh0RWRpdG9yIH0gZnJvbSBcIkB3ZWJpbnkvbGV4aWNhbC1lZGl0b3JcIjtcblxuY29uc3QgQ29sb3JQaWNrZXJTdHlsZSA9IHN0eWxlZChcImRpdlwiKSh7XG4gICAgcG9zaXRpb246IFwicmVsYXRpdmVcIixcbiAgICBkaXNwbGF5OiBcImZsZXhcIixcbiAgICBmbGV4V3JhcDogXCJ3cmFwXCIsXG4gICAganVzdGlmeUNvbnRlbnQ6IFwiZmxleC1zdGFydFwiLFxuICAgIHdpZHRoOiAyNDAsXG4gICAgcGFkZGluZzogMTUsXG4gICAgYmFja2dyb3VuZENvbG9yOiBcIiNmZmZcIlxufSk7XG5cbmNvbnN0IENvbG9yQm94ID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgICBjdXJzb3I6IFwicG9pbnRlclwiLFxuICAgIHdpZHRoOiA0MCxcbiAgICBoZWlnaHQ6IDQwLFxuICAgIGJvcmRlclJhZGl1czogXCI1MCVcIixcbiAgICBtYXJnaW46IDUsXG4gICAgYm9yZGVyOiBcIjFweCBzb2xpZCB2YXIoLS1tZGMtdGhlbWUtb24tYmFja2dyb3VuZClcIixcbiAgICBwYWRkaW5nOiAzLFxuICAgIGJveFNpemluZzogXCJjb250ZW50LWJveFwiXG59KTtcblxuY29uc3QgQ29sb3IgPSBzdHlsZWQoXCJidXR0b25cIikoe1xuICAgIGN1cnNvcjogXCJwb2ludGVyXCIsXG4gICAgd2lkdGg6IDQwLFxuICAgIGhlaWdodDogNDAsXG4gICAgdHJhbnNpdGlvbjogXCJ0cmFuc2Zvcm0gMC4xcywgYm9yZGVyIDAuMnNcIixcbiAgICBib3JkZXJDb2xvcjogXCJ0cmFuc3BhcmVudFwiLFxuICAgIGRpc3BsYXk6IFwiZmxleFwiLFxuICAgIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsXG4gICAgYm9yZGVyUmFkaXVzOiBcIjUwJVwiLFxuICAgIFwiJjo6YWZ0ZXJcIjoge1xuICAgICAgICB0cmFuc2l0aW9uOiBcIm9wYWNpdHkgMC41cyBjdWJpYy1iZXppZXIoMC4xNjUsIDAuODQsIDAuNDQsIDEpXCIsXG4gICAgICAgIGNvbnRlbnQ6ICdcIlwiJyxcbiAgICAgICAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgICAgICAgdG9wOiAwLFxuICAgICAgICBsZWZ0OiAwLFxuICAgICAgICB3aWR0aDogXCIxMDAlXCIsXG4gICAgICAgIGhlaWdodDogXCIxMDAlXCIsXG4gICAgICAgIHpJbmRleDogLTEsXG4gICAgICAgIG9wYWNpdHk6IDBcbiAgICB9LFxuICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICAgIHRyYW5zZm9ybTogXCJzY2FsZSgxLjEpXCIsXG4gICAgICAgIGJveFNoYWRvdzogXCIwIDAuMjVyZW0gMC4xMjVyZW0gMCByZ2JhKDAsMCwwLDAuMDUpXCIsXG4gICAgICAgIFwiJjo6YWZ0ZXJcIjoge1xuICAgICAgICAgICAgb3BhY2l0eTogMVxuICAgICAgICB9XG4gICAgfVxufSk7XG5cbmNvbnN0IGljb25QYWxldHRlU3R5bGUgPSBjc3Moe1xuICAgIGhlaWdodDogMjAsXG4gICAgd2lkdGg6IFwiMTAwJVwiLFxuICAgIG1hcmdpblRvcDogMSxcbiAgICBjb2xvcjogXCJ2YXIoLS1tZGMtdGhlbWUtc2Vjb25kYXJ5KVwiXG59KTtcblxuY29uc3QgQ09MT1JTID0ge1xuICAgIGxpZ2h0R3JheTogXCJoc2xhKDAsIDAlLCA5NyUsIDEpXCIsXG4gICAgZ3JheTogXCJoc2xhKDMwMCwgMiUsIDkyJSwgMSlcIixcbiAgICBkYXJrR3JheTogXCJoc2xhKDAsIDAlLCA3MCUsIDEpXCIsXG4gICAgZGFya2VzdEdyYXk6IFwiaHNsYSgwLCAwJSwgMjAlLCAxKVwiLFxuICAgIGJsYWNrOiBcImhzbGEoMjA4LCAxMDAlLCA1JSwgMSlcIlxufTtcblxuY29uc3Qgc3R5bGVzID0ge1xuICAgIHNlbGVjdGVkQ29sb3I6IGNzcyh7XG4gICAgICAgIGJveFNoYWRvdzogXCJpbnNldCAwcHggMHB4IDBweCAxMHB4IHZhcigtLW1kYy10aGVtZS1zZWNvbmRhcnkpXCIsXG4gICAgICAgIGJ1dHRvbjoge1xuICAgICAgICAgICAgYm9yZGVyOiBcIjVweCBzb2xpZCB2YXIoLS1tZGMtdGhlbWUtc3VyZmFjZSlcIlxuICAgICAgICB9XG4gICAgfSksXG4gICAgYnV0dG9uOiBjc3Moe1xuICAgICAgICBjdXJzb3I6IFwicG9pbnRlclwiLFxuICAgICAgICBoZWlnaHQ6IDMwLFxuICAgICAgICBib3hTaXppbmc6IFwiYm9yZGVyLWJveFwiLFxuICAgICAgICBcIiY6aG92ZXI6bm90KDpkaXNhYmxlZClcIjogeyBiYWNrZ3JvdW5kQ29sb3I6IENPTE9SUy5ncmF5IH0sXG4gICAgICAgIFwiJjpmb2N1czpub3QoOmRpc2FibGVkKVwiOiB7XG4gICAgICAgICAgICBvdXRsaW5lOiBcIm5vbmVcIlxuICAgICAgICB9LFxuICAgICAgICBcIiY6ZGlzYWJsZWRcIjoge1xuICAgICAgICAgICAgb3BhY2l0eTogMC41LFxuICAgICAgICAgICAgY3Vyc29yOiBcIm5vdC1hbGxvd2VkXCJcbiAgICAgICAgfSxcbiAgICAgICAgXCImIHN2Z1wiOiB7XG4gICAgICAgICAgICB3aWR0aDogMTYsXG4gICAgICAgICAgICBoZWlnaHQ6IDE2XG4gICAgICAgIH1cbiAgICB9KSxcbiAgICBjb2xvcjogY3NzKHtcbiAgICAgICAgd2lkdGg6IFwiNDBweFwiLFxuICAgICAgICBoZWlnaHQ6IFwiMTAwJVwiXG4gICAgfSlcbn07XG5cbmNvbnN0IGNocm9tZVBpY2tlclN0eWxlID0gY3NzKHtcbiAgICB3aWR0aDogXCIyNzBweCAhaW1wb3J0YW50XCIsXG4gICAgbWFyZ2luOiBcIjE1cHggLTE1cHggLTE1cHggLTE1cHhcIlxufSk7XG5cbmludGVyZmFjZSBMZXhpY2FsQ29sb3JQaWNrZXJQcm9wcyB7XG4gICAgdmFsdWU6IHN0cmluZztcbiAgICBvbkNoYW5nZT86IChjb2xvcjogc3RyaW5nKSA9PiB2b2lkO1xuICAgIG9uQ2hhbmdlQ29tcGxldGU6IChjb2xvcjogc3RyaW5nLCBuYW1lPzogc3RyaW5nKSA9PiB2b2lkO1xuICAgIGhhbmRsZXJDbGFzc05hbWU/OiBzdHJpbmc7XG4gICAgYWxsb3dDdXN0b21Db2xvcj86IGJvb2xlYW47XG59XG5cbmNvbnN0IHNob3dQaWNrZXJTdHlsZSA9IHsgZGlzcGxheTogXCJibG9ja1wiIH07XG5jb25zdCBoaWRlUGlja2VyU3R5bGUgPSB7IGRpc3BsYXk6IFwibm9uZVwiIH07XG5cbmV4cG9ydCBjb25zdCBMZXhpY2FsQ29sb3JQaWNrZXIgPSAoe1xuICAgIHZhbHVlLFxuICAgIG9uQ2hhbmdlLFxuICAgIG9uQ2hhbmdlQ29tcGxldGUsXG4gICAgYWxsb3dDdXN0b21Db2xvclxufTogTGV4aWNhbENvbG9yUGlja2VyUHJvcHMpID0+IHtcbiAgICBjb25zdCBbc2hvd1BpY2tlciwgc2V0U2hvd1BpY2tlcl0gPSB1c2VTdGF0ZShmYWxzZSk7XG4gICAgLy8gRWl0aGVyIGEgY3VzdG9tIGNvbG9yIG9yIGEgY29sb3IgY29taW5nIGZyb20gdGhlIHRoZW1lIG9iamVjdC5cbiAgICBjb25zdCBbYWN0dWFsU2VsZWN0ZWRDb2xvciwgc2V0QWN0dWFsU2VsZWN0ZWRDb2xvcl0gPSB1c2VTdGF0ZSh2YWx1ZSB8fCBcIiNmZmZcIik7XG4gICAgY29uc3QgW2lzVGhlbWVDb2xvciwgc2V0SXNUaGVtZUNvbG9yXSA9IHVzZVN0YXRlKGZhbHNlKTtcblxuICAgIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgICAgIGlmICh2YWx1ZSkge1xuICAgICAgICAgICAgc2V0QWN0dWFsU2VsZWN0ZWRDb2xvcih2YWx1ZSk7XG4gICAgICAgIH1cbiAgICB9LCBbdmFsdWVdKTtcblxuICAgIGNvbnN0IGdldENvbG9yVmFsdWUgPSB1c2VDYWxsYmFjaygocmdiOiBSR0JDb2xvciwgYWxwaGE/OiBudW1iZXIpID0+IHtcbiAgICAgICAgcmV0dXJuIGByZ2JhKCR7cmdiLnJ9LCAke3JnYi5nfSwgJHtyZ2IuYn0sICR7YWxwaGEgPz8gcmdiLmF9KWA7XG4gICAgfSwgW10pO1xuXG4gICAgY29uc3Qgb25Db2xvckNoYW5nZSA9IHVzZUNhbGxiYWNrKFxuICAgICAgICAoY29sb3I6IENvbG9yU3RhdGUsIGV2ZW50OiBSZWFjdC5TeW50aGV0aWNFdmVudCkgPT4ge1xuICAgICAgICAgICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcbiAgICAgICAgICAgIC8vIGNvbnRyb2xzIG9mIHRoZSBwaWNrZXIgYXJlIHVwZGF0ZWQgYXMgdXNlciBtb3ZlcyB0aGUgbW91c2VcbiAgICAgICAgICAgIGNvbnN0IGN1c3RvbUNvbG9yID0gZ2V0Q29sb3JWYWx1ZShjb2xvci5yZ2IsIGNvbG9yLnJnYi5hID09PSAwID8gMSA6IGNvbG9yLnJnYi5hKTtcbiAgICAgICAgICAgIHNldEFjdHVhbFNlbGVjdGVkQ29sb3IoY3VzdG9tQ29sb3IpO1xuICAgICAgICAgICAgaWYgKHR5cGVvZiBvbkNoYW5nZSA9PT0gXCJmdW5jdGlvblwiKSB7XG4gICAgICAgICAgICAgICAgb25DaGFuZ2UoY3VzdG9tQ29sb3IpO1xuICAgICAgICAgICAgfVxuICAgICAgICB9LFxuICAgICAgICBbb25DaGFuZ2VdXG4gICAgKTtcblxuICAgIGNvbnN0IG9uQ29sb3JDaGFuZ2VDb21wbGV0ZSA9IHVzZUNhbGxiYWNrKFxuICAgICAgICAoeyByZ2IgfTogQ29sb3JTdGF0ZSwgZXZlbnQ6IFJlYWN0LlN5bnRoZXRpY0V2ZW50KSA9PiB7XG4gICAgICAgICAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xuICAgICAgICAgICAgY29uc3QgY29sb3IgPSBnZXRDb2xvclZhbHVlKHJnYiwgcmdiLmEgPT09IDAgPyAxIDogcmdiLmEpO1xuICAgICAgICAgICAgc2V0QWN0dWFsU2VsZWN0ZWRDb2xvcihjb2xvcik7XG4gICAgICAgICAgICBvbkNoYW5nZUNvbXBsZXRlKGNvbG9yKTtcbiAgICAgICAgfSxcbiAgICAgICAgW29uQ2hhbmdlQ29tcGxldGVdXG4gICAgKTtcblxuICAgIGNvbnN0IHRvZ2dsZVBpY2tlciA9IHVzZUNhbGxiYWNrKChlOiBTeW50aGV0aWNFdmVudCkgPT4ge1xuICAgICAgICBlLnN0b3BQcm9wYWdhdGlvbigpO1xuICAgICAgICBzZXRTaG93UGlja2VyKHN0YXRlID0+ICFzdGF0ZSk7XG4gICAgfSwgW10pO1xuXG4gICAgY29uc3QgeyB0aGVtZSB9ID0gdXNlUmljaFRleHRFZGl0b3IoKTtcblxuICAgIGNvbnN0IHRoZW1lQ29sb3JzID0gdXNlTWVtbygoKSA9PiB0aGVtZT8uY29sb3JzID8/IFtdLCBbXSk7XG5cbiAgICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgICAgICBjb25zdCBpc1RoZW1lQ29sb3IgPSB0aGVtZUNvbG9ycy5zb21lKGNvbG9yID0+IGNvbG9yLmlkID09PSB2YWx1ZSk7XG4gICAgICAgIHNldElzVGhlbWVDb2xvcihpc1RoZW1lQ29sb3IpO1xuICAgIH0sIFt0aGVtZUNvbG9ycywgdmFsdWVdKTtcblxuICAgIHJldHVybiAoXG4gICAgICAgIDxDb2xvclBpY2tlclN0eWxlPlxuICAgICAgICAgICAge3RoZW1lQ29sb3JzLm1hcChjb2xvciA9PiB7XG4gICAgICAgICAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICAgICAgICAgICAgPENvbG9yQm94XG4gICAgICAgICAgICAgICAgICAgICAgICBrZXk9e2NvbG9yLmlkfVxuICAgICAgICAgICAgICAgICAgICAgICAgY2xhc3NOYW1lPXtjb2xvci5pZCA9PT0gdmFsdWUgPyBzdHlsZXMuc2VsZWN0ZWRDb2xvciA6IFwiXCJ9XG4gICAgICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxUb29sdGlwIGNvbnRlbnQ9ezxzcGFuPntjb2xvci5sYWJlbH08L3NwYW4+fSBwbGFjZW1lbnQ9XCJib3R0b21cIj5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8Q29sb3JcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgc3R5bGU9e3sgYmFja2dyb3VuZENvbG9yOiBjb2xvci52YWx1ZSB9fVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBvbkNsaWNrPXsoKSA9PiB7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBvbkNoYW5nZUNvbXBsZXRlKGNvbG9yLnZhbHVlLCBjb2xvci5pZCk7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIH19XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgLz5cbiAgICAgICAgICAgICAgICAgICAgICAgIDwvVG9vbHRpcD5cbiAgICAgICAgICAgICAgICAgICAgPC9Db2xvckJveD5cbiAgICAgICAgICAgICAgICApO1xuICAgICAgICAgICAgfSl9XG5cbiAgICAgICAgICAgIHthbGxvd0N1c3RvbUNvbG9yID8gKFxuICAgICAgICAgICAgICAgIDxDb2xvckJveCBjbGFzc05hbWU9e3ZhbHVlICYmICFpc1RoZW1lQ29sb3IgPyBzdHlsZXMuc2VsZWN0ZWRDb2xvciA6IFwiXCJ9PlxuICAgICAgICAgICAgICAgICAgICA8VG9vbHRpcCBjb250ZW50PXs8c3Bhbj5Db2xvciBwaWNrZXI8L3NwYW4+fSBwbGFjZW1lbnQ9XCJib3R0b21cIj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxDb2xvclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIHN0eWxlPXt7IGJhY2tncm91bmRDb2xvcjogaXNUaGVtZUNvbG9yID8gXCIjZmZmXCIgOiB2YWx1ZSB9fVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIG9uQ2xpY2s9e3RvZ2dsZVBpY2tlcn1cbiAgICAgICAgICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8SWNvblBhbGV0dGUgY2xhc3NOYW1lPXtpY29uUGFsZXR0ZVN0eWxlfSAvPlxuICAgICAgICAgICAgICAgICAgICAgICAgPC9Db2xvcj5cbiAgICAgICAgICAgICAgICAgICAgPC9Ub29sdGlwPlxuICAgICAgICAgICAgICAgIDwvQ29sb3JCb3g+XG4gICAgICAgICAgICApIDogbnVsbH1cblxuICAgICAgICAgICAgPGRpdiBzdHlsZT17c2hvd1BpY2tlciA/IHNob3dQaWNrZXJTdHlsZSA6IGhpZGVQaWNrZXJTdHlsZX0+XG4gICAgICAgICAgICAgICAgPENocm9tZVBpY2tlclxuICAgICAgICAgICAgICAgICAgICBjbGFzc05hbWU9e2Nocm9tZVBpY2tlclN0eWxlfVxuICAgICAgICAgICAgICAgICAgICBjb2xvcj17YWN0dWFsU2VsZWN0ZWRDb2xvcn1cbiAgICAgICAgICAgICAgICAgICAgZGlzYWJsZUFscGhhPXt0cnVlfVxuICAgICAgICAgICAgICAgICAgICBvbkNoYW5nZT17b25Db2xvckNoYW5nZSBhcyBPbkNoYW5nZUhhbmRsZXJ9XG4gICAgICAgICAgICAgICAgICAgIG9uQ2hhbmdlQ29tcGxldGU9e29uQ29sb3JDaGFuZ2VDb21wbGV0ZSBhcyBPbkNoYW5nZUhhbmRsZXJ9XG4gICAgICAgICAgICAgICAgLz5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L0NvbG9yUGlja2VyU3R5bGU+XG4gICAgKTtcbn07XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-var Color = /*#__PURE__*/(0, _styled.default)("button", {
-  target: "ewrv11k2",
+const Color = /*#__PURE__*/_styled("button", process.env.NODE_ENV === "production" ? {
+  target: "ewrv11k0"
+} : {
+  target: "ewrv11k0",
   label: "Color"
 })({
   cursor: "pointer",
   width: 40,
-  height: 30,
-  border: "1px solid var(--mdc-theme-on-background)",
-  transition: "transform 0.2s, scale 0.2s",
+  height: 40,
+  transition: "transform 0.1s, border 0.2s",
+  borderColor: "transparent",
   display: "flex",
   alignItems: "center",
+  borderRadius: "50%",
   "&::after": {
-    boxShadow: "0 0.25rem 0.125rem 0 rgba(0,0,0,0.05)",
     transition: "opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)",
     content: '""',
     position: "absolute",
@@ -65,34 +60,34 @@ var Color = /*#__PURE__*/(0, _styled.default)("button", {
     opacity: 0
   },
   "&:hover": {
-    transform: "scale(1.25)",
+    transform: "scale(1.1)",
+    boxShadow: "0 0.25rem 0.125rem 0 rgba(0,0,0,0.05)",
     "&::after": {
       opacity: 1
     }
   }
-});
-var transparent = /*#__PURE__*/(0, _emotion.css)({
-  backgroundSize: "10px 10px",
-  backgroundImage: "linear-gradient( 45deg, #555 25%, transparent 25%, transparent)," + "linear-gradient(-45deg, #555 25%, transparent 25%, transparent)," + "linear-gradient( 45deg, transparent 75%, #555 75%)," + "linear-gradient(-45deg, transparent 75%, #555 75%)"
-}, "label:transparent;");
-var iconPaletteStyle = /*#__PURE__*/(0, _emotion.css)({
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkxleGljYWxDb2xvclBpY2tlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBa0NjIiwiZmlsZSI6IkxleGljYWxDb2xvclBpY2tlci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IFN5bnRoZXRpY0V2ZW50IH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgUmVhY3QsIHsgdXNlQ2FsbGJhY2ssIHVzZVN0YXRlLCB1c2VFZmZlY3QsIHVzZU1lbW8gfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSBcImVtb3Rpb25cIjtcbmltcG9ydCB0eXBlIHsgQ29sb3JTdGF0ZSwgUkdCQ29sb3IgfSBmcm9tIFwicmVhY3QtY29sb3JcIjtcbmltcG9ydCB7IENocm9tZVBpY2tlciB9IGZyb20gXCJyZWFjdC1jb2xvclwiO1xuaW1wb3J0IHR5cGUgeyBPbkNoYW5nZUhhbmRsZXIgfSBmcm9tIFwicmVhY3QtY29sb3IvbGliL2NvbXBvbmVudHMvY29tbW9uL0NvbG9yV3JhcC5qc1wiO1xuaW1wb3J0IHsgVG9vbHRpcCB9IGZyb20gXCJAd2ViaW55L3VpL1Rvb2x0aXAvaW5kZXguanNcIjtcblxuLy8gSWNvbnNcbmltcG9ydCB7IFJlYWN0Q29tcG9uZW50IGFzIEljb25QYWxldHRlIH0gZnJvbSBcIi4vcm91bmQtY29sb3JfbGVucy0yNHB4LnN2Z1wiO1xuaW1wb3J0IHsgdXNlUmljaFRleHRFZGl0b3IgfSBmcm9tIFwiQHdlYmlueS9sZXhpY2FsLWVkaXRvclwiO1xuXG5jb25zdCBDb2xvclBpY2tlclN0eWxlID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxuICAgIGRpc3BsYXk6IFwiZmxleFwiLFxuICAgIGZsZXhXcmFwOiBcIndyYXBcIixcbiAgICBqdXN0aWZ5Q29udGVudDogXCJmbGV4LXN0YXJ0XCIsXG4gICAgd2lkdGg6IDI0MCxcbiAgICBwYWRkaW5nOiAxNSxcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IFwiI2ZmZlwiXG59KTtcblxuY29uc3QgQ29sb3JCb3ggPSBzdHlsZWQoXCJkaXZcIikoe1xuICAgIGN1cnNvcjogXCJwb2ludGVyXCIsXG4gICAgd2lkdGg6IDQwLFxuICAgIGhlaWdodDogNDAsXG4gICAgYm9yZGVyUmFkaXVzOiBcIjUwJVwiLFxuICAgIG1hcmdpbjogNSxcbiAgICBib3JkZXI6IFwiMXB4IHNvbGlkIHZhcigtLW1kYy10aGVtZS1vbi1iYWNrZ3JvdW5kKVwiLFxuICAgIHBhZGRpbmc6IDMsXG4gICAgYm94U2l6aW5nOiBcImNvbnRlbnQtYm94XCJcbn0pO1xuXG5jb25zdCBDb2xvciA9IHN0eWxlZChcImJ1dHRvblwiKSh7XG4gICAgY3Vyc29yOiBcInBvaW50ZXJcIixcbiAgICB3aWR0aDogNDAsXG4gICAgaGVpZ2h0OiA0MCxcbiAgICB0cmFuc2l0aW9uOiBcInRyYW5zZm9ybSAwLjFzLCBib3JkZXIgMC4yc1wiLFxuICAgIGJvcmRlckNvbG9yOiBcInRyYW5zcGFyZW50XCIsXG4gICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAgICBib3JkZXJSYWRpdXM6IFwiNTAlXCIsXG4gICAgXCImOjphZnRlclwiOiB7XG4gICAgICAgIHRyYW5zaXRpb246IFwib3BhY2l0eSAwLjVzIGN1YmljLWJlemllcigwLjE2NSwgMC44NCwgMC40NCwgMSlcIixcbiAgICAgICAgY29udGVudDogJ1wiXCInLFxuICAgICAgICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICAgICAgICB0b3A6IDAsXG4gICAgICAgIGxlZnQ6IDAsXG4gICAgICAgIHdpZHRoOiBcIjEwMCVcIixcbiAgICAgICAgaGVpZ2h0OiBcIjEwMCVcIixcbiAgICAgICAgekluZGV4OiAtMSxcbiAgICAgICAgb3BhY2l0eTogMFxuICAgIH0sXG4gICAgXCImOmhvdmVyXCI6IHtcbiAgICAgICAgdHJhbnNmb3JtOiBcInNjYWxlKDEuMSlcIixcbiAgICAgICAgYm94U2hhZG93OiBcIjAgMC4yNXJlbSAwLjEyNXJlbSAwIHJnYmEoMCwwLDAsMC4wNSlcIixcbiAgICAgICAgXCImOjphZnRlclwiOiB7XG4gICAgICAgICAgICBvcGFjaXR5OiAxXG4gICAgICAgIH1cbiAgICB9XG59KTtcblxuY29uc3QgaWNvblBhbGV0dGVTdHlsZSA9IGNzcyh7XG4gICAgaGVpZ2h0OiAyMCxcbiAgICB3aWR0aDogXCIxMDAlXCIsXG4gICAgbWFyZ2luVG9wOiAxLFxuICAgIGNvbG9yOiBcInZhcigtLW1kYy10aGVtZS1zZWNvbmRhcnkpXCJcbn0pO1xuXG5jb25zdCBDT0xPUlMgPSB7XG4gICAgbGlnaHRHcmF5OiBcImhzbGEoMCwgMCUsIDk3JSwgMSlcIixcbiAgICBncmF5OiBcImhzbGEoMzAwLCAyJSwgOTIlLCAxKVwiLFxuICAgIGRhcmtHcmF5OiBcImhzbGEoMCwgMCUsIDcwJSwgMSlcIixcbiAgICBkYXJrZXN0R3JheTogXCJoc2xhKDAsIDAlLCAyMCUsIDEpXCIsXG4gICAgYmxhY2s6IFwiaHNsYSgyMDgsIDEwMCUsIDUlLCAxKVwiXG59O1xuXG5jb25zdCBzdHlsZXMgPSB7XG4gICAgc2VsZWN0ZWRDb2xvcjogY3NzKHtcbiAgICAgICAgYm94U2hhZG93OiBcImluc2V0IDBweCAwcHggMHB4IDEwcHggdmFyKC0tbWRjLXRoZW1lLXNlY29uZGFyeSlcIixcbiAgICAgICAgYnV0dG9uOiB7XG4gICAgICAgICAgICBib3JkZXI6IFwiNXB4IHNvbGlkIHZhcigtLW1kYy10aGVtZS1zdXJmYWNlKVwiXG4gICAgICAgIH1cbiAgICB9KSxcbiAgICBidXR0b246IGNzcyh7XG4gICAgICAgIGN1cnNvcjogXCJwb2ludGVyXCIsXG4gICAgICAgIGhlaWdodDogMzAsXG4gICAgICAgIGJveFNpemluZzogXCJib3JkZXItYm94XCIsXG4gICAgICAgIFwiJjpob3Zlcjpub3QoOmRpc2FibGVkKVwiOiB7IGJhY2tncm91bmRDb2xvcjogQ09MT1JTLmdyYXkgfSxcbiAgICAgICAgXCImOmZvY3VzOm5vdCg6ZGlzYWJsZWQpXCI6IHtcbiAgICAgICAgICAgIG91dGxpbmU6IFwibm9uZVwiXG4gICAgICAgIH0sXG4gICAgICAgIFwiJjpkaXNhYmxlZFwiOiB7XG4gICAgICAgICAgICBvcGFjaXR5OiAwLjUsXG4gICAgICAgICAgICBjdXJzb3I6IFwibm90LWFsbG93ZWRcIlxuICAgICAgICB9LFxuICAgICAgICBcIiYgc3ZnXCI6IHtcbiAgICAgICAgICAgIHdpZHRoOiAxNixcbiAgICAgICAgICAgIGhlaWdodDogMTZcbiAgICAgICAgfVxuICAgIH0pLFxuICAgIGNvbG9yOiBjc3Moe1xuICAgICAgICB3aWR0aDogXCI0MHB4XCIsXG4gICAgICAgIGhlaWdodDogXCIxMDAlXCJcbiAgICB9KVxufTtcblxuY29uc3QgY2hyb21lUGlja2VyU3R5bGUgPSBjc3Moe1xuICAgIHdpZHRoOiBcIjI3MHB4ICFpbXBvcnRhbnRcIixcbiAgICBtYXJnaW46IFwiMTVweCAtMTVweCAtMTVweCAtMTVweFwiXG59KTtcblxuaW50ZXJmYWNlIExleGljYWxDb2xvclBpY2tlclByb3BzIHtcbiAgICB2YWx1ZTogc3RyaW5nO1xuICAgIG9uQ2hhbmdlPzogKGNvbG9yOiBzdHJpbmcpID0+IHZvaWQ7XG4gICAgb25DaGFuZ2VDb21wbGV0ZTogKGNvbG9yOiBzdHJpbmcsIG5hbWU/OiBzdHJpbmcpID0+IHZvaWQ7XG4gICAgaGFuZGxlckNsYXNzTmFtZT86IHN0cmluZztcbiAgICBhbGxvd0N1c3RvbUNvbG9yPzogYm9vbGVhbjtcbn1cblxuY29uc3Qgc2hvd1BpY2tlclN0eWxlID0geyBkaXNwbGF5OiBcImJsb2NrXCIgfTtcbmNvbnN0IGhpZGVQaWNrZXJTdHlsZSA9IHsgZGlzcGxheTogXCJub25lXCIgfTtcblxuZXhwb3J0IGNvbnN0IExleGljYWxDb2xvclBpY2tlciA9ICh7XG4gICAgdmFsdWUsXG4gICAgb25DaGFuZ2UsXG4gICAgb25DaGFuZ2VDb21wbGV0ZSxcbiAgICBhbGxvd0N1c3RvbUNvbG9yXG59OiBMZXhpY2FsQ29sb3JQaWNrZXJQcm9wcykgPT4ge1xuICAgIGNvbnN0IFtzaG93UGlja2VyLCBzZXRTaG93UGlja2VyXSA9IHVzZVN0YXRlKGZhbHNlKTtcbiAgICAvLyBFaXRoZXIgYSBjdXN0b20gY29sb3Igb3IgYSBjb2xvciBjb21pbmcgZnJvbSB0aGUgdGhlbWUgb2JqZWN0LlxuICAgIGNvbnN0IFthY3R1YWxTZWxlY3RlZENvbG9yLCBzZXRBY3R1YWxTZWxlY3RlZENvbG9yXSA9IHVzZVN0YXRlKHZhbHVlIHx8IFwiI2ZmZlwiKTtcbiAgICBjb25zdCBbaXNUaGVtZUNvbG9yLCBzZXRJc1RoZW1lQ29sb3JdID0gdXNlU3RhdGUoZmFsc2UpO1xuXG4gICAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAgICAgaWYgKHZhbHVlKSB7XG4gICAgICAgICAgICBzZXRBY3R1YWxTZWxlY3RlZENvbG9yKHZhbHVlKTtcbiAgICAgICAgfVxuICAgIH0sIFt2YWx1ZV0pO1xuXG4gICAgY29uc3QgZ2V0Q29sb3JWYWx1ZSA9IHVzZUNhbGxiYWNrKChyZ2I6IFJHQkNvbG9yLCBhbHBoYT86IG51bWJlcikgPT4ge1xuICAgICAgICByZXR1cm4gYHJnYmEoJHtyZ2Iucn0sICR7cmdiLmd9LCAke3JnYi5ifSwgJHthbHBoYSA/PyByZ2IuYX0pYDtcbiAgICB9LCBbXSk7XG5cbiAgICBjb25zdCBvbkNvbG9yQ2hhbmdlID0gdXNlQ2FsbGJhY2soXG4gICAgICAgIChjb2xvcjogQ29sb3JTdGF0ZSwgZXZlbnQ6IFJlYWN0LlN5bnRoZXRpY0V2ZW50KSA9PiB7XG4gICAgICAgICAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xuICAgICAgICAgICAgLy8gY29udHJvbHMgb2YgdGhlIHBpY2tlciBhcmUgdXBkYXRlZCBhcyB1c2VyIG1vdmVzIHRoZSBtb3VzZVxuICAgICAgICAgICAgY29uc3QgY3VzdG9tQ29sb3IgPSBnZXRDb2xvclZhbHVlKGNvbG9yLnJnYiwgY29sb3IucmdiLmEgPT09IDAgPyAxIDogY29sb3IucmdiLmEpO1xuICAgICAgICAgICAgc2V0QWN0dWFsU2VsZWN0ZWRDb2xvcihjdXN0b21Db2xvcik7XG4gICAgICAgICAgICBpZiAodHlwZW9mIG9uQ2hhbmdlID09PSBcImZ1bmN0aW9uXCIpIHtcbiAgICAgICAgICAgICAgICBvbkNoYW5nZShjdXN0b21Db2xvcik7XG4gICAgICAgICAgICB9XG4gICAgICAgIH0sXG4gICAgICAgIFtvbkNoYW5nZV1cbiAgICApO1xuXG4gICAgY29uc3Qgb25Db2xvckNoYW5nZUNvbXBsZXRlID0gdXNlQ2FsbGJhY2soXG4gICAgICAgICh7IHJnYiB9OiBDb2xvclN0YXRlLCBldmVudDogUmVhY3QuU3ludGhldGljRXZlbnQpID0+IHtcbiAgICAgICAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG4gICAgICAgICAgICBjb25zdCBjb2xvciA9IGdldENvbG9yVmFsdWUocmdiLCByZ2IuYSA9PT0gMCA/IDEgOiByZ2IuYSk7XG4gICAgICAgICAgICBzZXRBY3R1YWxTZWxlY3RlZENvbG9yKGNvbG9yKTtcbiAgICAgICAgICAgIG9uQ2hhbmdlQ29tcGxldGUoY29sb3IpO1xuICAgICAgICB9LFxuICAgICAgICBbb25DaGFuZ2VDb21wbGV0ZV1cbiAgICApO1xuXG4gICAgY29uc3QgdG9nZ2xlUGlja2VyID0gdXNlQ2FsbGJhY2soKGU6IFN5bnRoZXRpY0V2ZW50KSA9PiB7XG4gICAgICAgIGUuc3RvcFByb3BhZ2F0aW9uKCk7XG4gICAgICAgIHNldFNob3dQaWNrZXIoc3RhdGUgPT4gIXN0YXRlKTtcbiAgICB9LCBbXSk7XG5cbiAgICBjb25zdCB7IHRoZW1lIH0gPSB1c2VSaWNoVGV4dEVkaXRvcigpO1xuXG4gICAgY29uc3QgdGhlbWVDb2xvcnMgPSB1c2VNZW1vKCgpID0+IHRoZW1lPy5jb2xvcnMgPz8gW10sIFtdKTtcblxuICAgIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgICAgIGNvbnN0IGlzVGhlbWVDb2xvciA9IHRoZW1lQ29sb3JzLnNvbWUoY29sb3IgPT4gY29sb3IuaWQgPT09IHZhbHVlKTtcbiAgICAgICAgc2V0SXNUaGVtZUNvbG9yKGlzVGhlbWVDb2xvcik7XG4gICAgfSwgW3RoZW1lQ29sb3JzLCB2YWx1ZV0pO1xuXG4gICAgcmV0dXJuIChcbiAgICAgICAgPENvbG9yUGlja2VyU3R5bGU+XG4gICAgICAgICAgICB7dGhlbWVDb2xvcnMubWFwKGNvbG9yID0+IHtcbiAgICAgICAgICAgICAgICByZXR1cm4gKFxuICAgICAgICAgICAgICAgICAgICA8Q29sb3JCb3hcbiAgICAgICAgICAgICAgICAgICAgICAgIGtleT17Y29sb3IuaWR9XG4gICAgICAgICAgICAgICAgICAgICAgICBjbGFzc05hbWU9e2NvbG9yLmlkID09PSB2YWx1ZSA/IHN0eWxlcy5zZWxlY3RlZENvbG9yIDogXCJcIn1cbiAgICAgICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgICAgICAgPFRvb2x0aXAgY29udGVudD17PHNwYW4+e2NvbG9yLmxhYmVsfTwvc3Bhbj59IHBsYWNlbWVudD1cImJvdHRvbVwiPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxDb2xvclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBzdHlsZT17eyBiYWNrZ3JvdW5kQ29sb3I6IGNvbG9yLnZhbHVlIH19XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIG9uQ2xpY2s9eygpID0+IHtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIG9uQ2hhbmdlQ29tcGxldGUoY29sb3IudmFsdWUsIGNvbG9yLmlkKTtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgfX1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgICAgICAgICAgICAgPC9Ub29sdGlwPlxuICAgICAgICAgICAgICAgICAgICA8L0NvbG9yQm94PlxuICAgICAgICAgICAgICAgICk7XG4gICAgICAgICAgICB9KX1cblxuICAgICAgICAgICAge2FsbG93Q3VzdG9tQ29sb3IgPyAoXG4gICAgICAgICAgICAgICAgPENvbG9yQm94IGNsYXNzTmFtZT17dmFsdWUgJiYgIWlzVGhlbWVDb2xvciA/IHN0eWxlcy5zZWxlY3RlZENvbG9yIDogXCJcIn0+XG4gICAgICAgICAgICAgICAgICAgIDxUb29sdGlwIGNvbnRlbnQ9ezxzcGFuPkNvbG9yIHBpY2tlcjwvc3Bhbj59IHBsYWNlbWVudD1cImJvdHRvbVwiPlxuICAgICAgICAgICAgICAgICAgICAgICAgPENvbG9yXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgc3R5bGU9e3sgYmFja2dyb3VuZENvbG9yOiBpc1RoZW1lQ29sb3IgPyBcIiNmZmZcIiA6IHZhbHVlIH19XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgb25DbGljaz17dG9nZ2xlUGlja2VyfVxuICAgICAgICAgICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxJY29uUGFsZXR0ZSBjbGFzc05hbWU9e2ljb25QYWxldHRlU3R5bGV9IC8+XG4gICAgICAgICAgICAgICAgICAgICAgICA8L0NvbG9yPlxuICAgICAgICAgICAgICAgICAgICA8L1Rvb2x0aXA+XG4gICAgICAgICAgICAgICAgPC9Db2xvckJveD5cbiAgICAgICAgICAgICkgOiBudWxsfVxuXG4gICAgICAgICAgICA8ZGl2IHN0eWxlPXtzaG93UGlja2VyID8gc2hvd1BpY2tlclN0eWxlIDogaGlkZVBpY2tlclN0eWxlfT5cbiAgICAgICAgICAgICAgICA8Q2hyb21lUGlja2VyXG4gICAgICAgICAgICAgICAgICAgIGNsYXNzTmFtZT17Y2hyb21lUGlja2VyU3R5bGV9XG4gICAgICAgICAgICAgICAgICAgIGNvbG9yPXthY3R1YWxTZWxlY3RlZENvbG9yfVxuICAgICAgICAgICAgICAgICAgICBkaXNhYmxlQWxwaGE9e3RydWV9XG4gICAgICAgICAgICAgICAgICAgIG9uQ2hhbmdlPXtvbkNvbG9yQ2hhbmdlIGFzIE9uQ2hhbmdlSGFuZGxlcn1cbiAgICAgICAgICAgICAgICAgICAgb25DaGFuZ2VDb21wbGV0ZT17b25Db2xvckNoYW5nZUNvbXBsZXRlIGFzIE9uQ2hhbmdlSGFuZGxlcn1cbiAgICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvQ29sb3JQaWNrZXJTdHlsZT5cbiAgICApO1xufTtcbiJdfQ== */");
+const iconPaletteStyle = css({
   height: 20,
   width: "100%",
   marginTop: 1,
   color: "var(--mdc-theme-secondary)"
-}, "label:iconPaletteStyle;");
-var COLORS = {
+});
+const COLORS = {
   lightGray: "hsla(0, 0%, 97%, 1)",
   gray: "hsla(300, 2%, 92%, 1)",
   darkGray: "hsla(0, 0%, 70%, 1)",
   darkestGray: "hsla(0, 0%, 20%, 1)",
   black: "hsla(208, 100%, 5%, 1)"
 };
-var styles = {
-  selectedColor: /*#__PURE__*/(0, _emotion.css)({
-    boxShadow: "0px 0px 0px 2px var(--mdc-theme-secondary)"
-  }, "label:selectedColor;"),
-  button: /*#__PURE__*/(0, _emotion.css)({
+const styles = {
+  selectedColor: css({
+    boxShadow: "inset 0px 0px 0px 10px var(--mdc-theme-secondary)",
+    button: {
+      border: "5px solid var(--mdc-theme-surface)"
+    }
+  }),
+  button: css({
     cursor: "pointer",
     height: 30,
     boxSizing: "border-box",
@@ -110,109 +105,105 @@ var styles = {
       width: 16,
       height: 16
     }
-  }, "label:button;"),
-  color: /*#__PURE__*/(0, _emotion.css)({
+  }),
+  color: css({
     width: "40px",
     height: "100%"
-  }, "label:color;")
+  })
 };
-var LexicalColorPicker = function LexicalColorPicker(_ref) {
-  var value = _ref.value,
-    onChange = _ref.onChange,
-    onChangeComplete = _ref.onChangeComplete;
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    showPicker = _useState2[0],
-    setShowPicker = _useState2[1];
+const chromePickerStyle = css({
+  width: "270px !important",
+  margin: "15px -15px -15px -15px"
+});
+const showPickerStyle = {
+  display: "block"
+};
+const hidePickerStyle = {
+  display: "none"
+};
+export const LexicalColorPicker = ({
+  value,
+  onChange,
+  onChangeComplete,
+  allowCustomColor
+}) => {
+  const [showPicker, setShowPicker] = useState(false);
   // Either a custom color or a color coming from the theme object.
-  var _useState3 = (0, _react.useState)(value || "#fff"),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    actualSelectedColor = _useState4[0],
-    setActualSelectedColor = _useState4[1];
-  var themeColor = false;
-  var getColorValue = (0, _react.useCallback)(function (rgb) {
-    return "rgba(".concat(rgb.r, ", ").concat(rgb.g, ", ").concat(rgb.b, ", ").concat(rgb.a, ")");
+  const [actualSelectedColor, setActualSelectedColor] = useState(value || "#fff");
+  const [isThemeColor, setIsThemeColor] = useState(false);
+  useEffect(() => {
+    if (value) {
+      setActualSelectedColor(value);
+    }
+  }, [value]);
+  const getColorValue = useCallback((rgb, alpha) => {
+    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha ?? rgb.a})`;
   }, []);
-  var onColorChange = (0, _react.useCallback)(function (color, event) {
+  const onColorChange = useCallback((color, event) => {
     event.preventDefault();
     // controls of the picker are updated as user moves the mouse
-    var customColor = getColorValue(color.rgb);
+    const customColor = getColorValue(color.rgb, color.rgb.a === 0 ? 1 : color.rgb.a);
     setActualSelectedColor(customColor);
     if (typeof onChange === "function") {
       onChange(customColor);
     }
   }, [onChange]);
-  var onColorChangeComplete = (0, _react.useCallback)(function (_ref2, event) {
-    var rgb = _ref2.rgb;
-    setActualSelectedColor(value);
-    onChangeComplete(getColorValue(rgb));
+  const onColorChangeComplete = useCallback(({
+    rgb
+  }, event) => {
     event.preventDefault();
+    const color = getColorValue(rgb, rgb.a === 0 ? 1 : rgb.a);
+    setActualSelectedColor(color);
+    onChangeComplete(color);
   }, [onChangeComplete]);
-  var togglePicker = (0, _react.useCallback)(function (e) {
+  const togglePicker = useCallback(e => {
     e.stopPropagation();
-    setShowPicker(!showPicker);
+    setShowPicker(state => !state);
   }, []);
-  var _usePageBuilder = (0, _usePageBuilder2.usePageBuilder)(),
-    theme = _usePageBuilder.theme;
-  var pageElements = (0, _usePageElements.usePageElements)();
-  var themeColors = {};
-  if (_utils.isLegacyRenderingEngine) {
-    var legacyTheme = theme;
-    themeColors = (legacyTheme === null || legacyTheme === void 0 ? void 0 : legacyTheme.colors) || {};
-  } else {
-    var _pageElements$theme, _pageElements$theme$s;
-    var colors = (_pageElements$theme = pageElements.theme) === null || _pageElements$theme === void 0 ? void 0 : (_pageElements$theme$s = _pageElements$theme.styles) === null || _pageElements$theme$s === void 0 ? void 0 : _pageElements$theme$s.colors;
-    if (colors) {
-      for (var key in colors) {
-        if (colors[key]) {
-          themeColors[key] = colors[key];
-        }
-      }
-    }
-  }
-  return /*#__PURE__*/_react.default.createElement(ColorPickerStyle, null, Object.keys(themeColors).map(function (key, index) {
-    var color = themeColors[key];
-    if (color === value || value === "transparent") {
-      themeColor = true;
-    }
-    return /*#__PURE__*/_react.default.createElement(ColorBox, {
-      key: index
-    }, /*#__PURE__*/_react.default.createElement(Color, {
-      className: key === value ? styles.selectedColor : "",
+  const {
+    theme
+  } = useRichTextEditor();
+  const themeColors = useMemo(() => theme?.colors ?? [], []);
+  useEffect(() => {
+    const isThemeColor = themeColors.some(color => color.id === value);
+    setIsThemeColor(isThemeColor);
+  }, [themeColors, value]);
+  return /*#__PURE__*/React.createElement(ColorPickerStyle, null, themeColors.map(color => {
+    return /*#__PURE__*/React.createElement(ColorBox, {
+      key: color.id,
+      className: color.id === value ? styles.selectedColor : ""
+    }, /*#__PURE__*/React.createElement(Tooltip, {
+      content: /*#__PURE__*/React.createElement("span", null, color.label),
+      placement: "bottom"
+    }, /*#__PURE__*/React.createElement(Color, {
       style: {
-        backgroundColor: color
+        backgroundColor: color.value
       },
-      onClick: function onClick() {
-        // With page elements implementation, we want to store the color key and
-        // then the actual color will be retrieved from the theme object.
-        var value = color;
-        var themeColorName;
-        if (!_utils.isLegacyRenderingEngine) {
-          var _pageElements$theme2, _pageElements$theme2$;
-          var _colors = (_pageElements$theme2 = pageElements.theme) === null || _pageElements$theme2 === void 0 ? void 0 : (_pageElements$theme2$ = _pageElements$theme2.styles) === null || _pageElements$theme2$ === void 0 ? void 0 : _pageElements$theme2$.colors;
-          themeColorName = key;
-          value = _colors[key];
-        }
-        onChangeComplete(value, themeColorName);
+      onClick: () => {
+        onChangeComplete(color.value, color.id);
       }
-    }));
-  }), /*#__PURE__*/_react.default.createElement(ColorBox, null, /*#__PURE__*/_react.default.createElement(Color, {
-    className: (0, _classnames2.default)(transparent, (0, _defineProperty2.default)({}, styles.selectedColor, value === "transparent")),
-    onClick: function onClick() {
-      onChangeComplete("transparent");
-    }
-  })), /*#__PURE__*/_react.default.createElement(ColorBox, null, /*#__PURE__*/_react.default.createElement(Color, {
-    className: value && !themeColor ? styles.selectedColor : "",
+    })));
+  }), allowCustomColor ? /*#__PURE__*/React.createElement(ColorBox, {
+    className: value && !isThemeColor ? styles.selectedColor : ""
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    content: /*#__PURE__*/React.createElement("span", null, "Color picker"),
+    placement: "bottom"
+  }, /*#__PURE__*/React.createElement(Color, {
     style: {
-      backgroundColor: themeColor ? "#fff" : value
+      backgroundColor: isThemeColor ? "#fff" : value
     },
     onClick: togglePicker
-  }, /*#__PURE__*/_react.default.createElement(_roundColor_lens24px.ReactComponent, {
+  }, /*#__PURE__*/React.createElement(IconPalette, {
     className: iconPaletteStyle
-  }))), showPicker && /*#__PURE__*/_react.default.createElement(_reactColor.ChromePicker, {
+  })))) : null, /*#__PURE__*/React.createElement("div", {
+    style: showPicker ? showPickerStyle : hidePickerStyle
+  }, /*#__PURE__*/React.createElement(ChromePicker, {
+    className: chromePickerStyle,
     color: actualSelectedColor,
+    disableAlpha: true,
     onChange: onColorChange,
     onChangeComplete: onColorChangeComplete
-  }));
+  })));
 };
-exports.LexicalColorPicker = LexicalColorPicker;
+//# sourceMappingURL=LexicalColorPicker.js.map

package/components/LexicalColorPicker/LexicalColorPicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["ColorPickerStyle","styled","position","display","flexWrap","justifyContent","width","padding","backgroundColor","ColorBox","cursor","height","margin","borderRadius","Color","border","transition","alignItems","boxShadow","content","top","left","zIndex","opacity","transform","transparent","css","backgroundSize","backgroundImage","iconPaletteStyle","marginTop","color","COLORS","lightGray","gray","darkGray","darkestGray","black","styles","selectedColor","button","boxSizing","outline","LexicalColorPicker","value","onChange","onChangeComplete","useState","showPicker","setShowPicker","actualSelectedColor","setActualSelectedColor","themeColor","getColorValue","useCallback","rgb","r","g","b","a","onColorChange","event","preventDefault","customColor","onColorChangeComplete","togglePicker","e","stopPropagation","usePageBuilder","theme","pageElements","usePageElements","themeColors","isLegacyRenderingEngine","legacyTheme","colors","key","Object","keys","map","index","themeColorName","classnames"],"sources":["LexicalColorPicker.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { css } from \"emotion\";\nimport { usePageBuilder } from \"@webiny/app-page-builder/hooks/usePageBuilder\";\nimport { usePageElements } from \"@webiny/app-page-builder-elements/hooks/usePageElements\";\nimport { PbTheme } from \"@webiny/app-page-builder/types\";\nimport { isLegacyRenderingEngine } from \"@webiny/app-page-builder/utils\";\nimport classnames from \"classnames\";\nimport { ChromePicker } from \"react-color\";\n\n// Icons\nimport { ReactComponent as IconPalette } from \"./round-color_lens-24px.svg\";\n\nconst ColorPickerStyle = styled(\"div\")({\n position: \"relative\",\n display: \"flex\",\n flexWrap: \"wrap\",\n justifyContent: \"space-between\",\n width: 225,\n padding: 0,\n backgroundColor: \"#fff\"\n});\n\nconst ColorBox = styled(\"div\")({\n cursor: \"pointer\",\n width: 50,\n height: 40,\n margin: 10,\n borderRadius: 2\n});\n\nconst Color = styled(\"button\")({\n cursor: \"pointer\",\n width: 40,\n height: 30,\n border: \"1px solid var(--mdc-theme-on-background)\",\n transition: \"transform 0.2s, scale 0.2s\",\n display: \"flex\",\n alignItems: \"center\",\n \"&::after\": {\n boxShadow: \"0 0.25rem 0.125rem 0 rgba(0,0,0,0.05)\",\n transition: \"opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)\",\n content: '\"\"',\n position: \"absolute\",\n top: 0,\n left: 0,\n width: \"100%\",\n height: \"100%\",\n zIndex: -1,\n opacity: 0\n },\n \"&:hover\": {\n transform: \"scale(1.25)\",\n \"&::after\": {\n opacity: 1\n }\n }\n});\n\nconst transparent = css({\n backgroundSize: \"10px 10px\",\n backgroundImage:\n \"linear-gradient( 45deg, #555 25%, transparent 25%, transparent),\" +\n \"linear-gradient(-45deg, #555 25%, transparent 25%, transparent),\" +\n \"linear-gradient( 45deg, transparent 75%, #555 75%),\" +\n \"linear-gradient(-45deg, transparent 75%, #555 75%)\"\n});\n\nconst iconPaletteStyle = css({\n height: 20,\n width: \"100%\",\n marginTop: 1,\n color: \"var(--mdc-theme-secondary)\"\n});\n\nconst COLORS = {\n lightGray: \"hsla(0, 0%, 97%, 1)\",\n gray: \"hsla(300, 2%, 92%, 1)\",\n darkGray: \"hsla(0, 0%, 70%, 1)\",\n darkestGray: \"hsla(0, 0%, 20%, 1)\",\n black: \"hsla(208, 100%, 5%, 1)\"\n};\n\nconst styles = {\n selectedColor: css({\n boxShadow: \"0px 0px 0px 2px var(--mdc-theme-secondary)\"\n }),\n button: css({\n cursor: \"pointer\",\n height: 30,\n boxSizing: \"border-box\",\n \"&:hover:not(:disabled)\": { backgroundColor: COLORS.gray },\n \"&:focus:not(:disabled)\": {\n outline: \"none\"\n },\n \"&:disabled\": {\n opacity: 0.5,\n cursor: \"not-allowed\"\n },\n \"& svg\": {\n width: 16,\n height: 16\n }\n }),\n color: css({\n width: \"40px\",\n height: \"100%\"\n })\n};\n\ninterface LexicalColorPickerProps {\n value: string;\n onChange?: Function;\n onChangeComplete: Function;\n handlerClassName?: string;\n}\n\nexport const LexicalColorPicker: React.FC<LexicalColorPickerProps> = ({\n value,\n onChange,\n onChangeComplete\n}) => {\n const [showPicker, setShowPicker] = useState(false);\n // Either a custom color or a color coming from the theme object.\n const [actualSelectedColor, setActualSelectedColor] = useState(value \|\| \"#fff\");\n let themeColor = false;\n\n const getColorValue = useCallback(rgb => {\n return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${rgb.a})`;\n }, []);\n\n const onColorChange = useCallback(\n (color, event) => {\n event.preventDefault();\n // controls of the picker are updated as user moves the mouse\n const customColor = getColorValue(color.rgb);\n setActualSelectedColor(customColor);\n if (typeof onChange === \"function\") {\n onChange(customColor);\n }\n },\n [onChange]\n );\n\n const onColorChangeComplete = useCallback(\n ({ rgb }, event) => {\n setActualSelectedColor(value);\n onChangeComplete(getColorValue(rgb));\n event.preventDefault();\n },\n [onChangeComplete]\n );\n\n const togglePicker = useCallback(e => {\n e.stopPropagation();\n setShowPicker(!showPicker);\n }, []);\n\n const { theme } = usePageBuilder();\n\n const pageElements = usePageElements();\n\n let themeColors: Record<string, any> = {};\n\n if (isLegacyRenderingEngine) {\n const legacyTheme = theme as PbTheme;\n themeColors = legacyTheme?.colors \|\| {};\n } else {\n const colors = pageElements.theme?.styles?.colors;\n if (colors) {\n for (const key in colors) {\n if (colors[key]) {\n themeColors[key] = colors[key];\n }\n }\n }\n }\n\n return (\n <ColorPickerStyle>\n {Object.keys(themeColors).map((key, index) => {\n const color = themeColors[key];\n\n if (color === value \|\| value === \"transparent\") {\n themeColor = true;\n }\n return (\n <ColorBox key={index}>\n <Color\n className={key === value ? styles.selectedColor : \"\"}\n style={{ backgroundColor: color }}\n onClick={() => {\n // With page elements implementation, we want to store the color key and\n // then the actual color will be retrieved from the theme object.\n let value = color;\n let themeColorName;\n if (!isLegacyRenderingEngine) {\n const colors = pageElements.theme?.styles?.colors;\n themeColorName = key;\n value = colors[key];\n }\n\n onChangeComplete(value, themeColorName);\n }}\n />\n </ColorBox>\n );\n })}\n\n <ColorBox>\n <Color\n className={classnames(transparent, {\n [styles.selectedColor]: value === \"transparent\"\n })}\n onClick={() => {\n onChangeComplete(\"transparent\");\n }}\n />\n </ColorBox>\n\n <ColorBox>\n <Color\n className={value && !themeColor ? styles.selectedColor : \"\"}\n style={{ backgroundColor: themeColor ? \"#fff\" : value }}\n onClick={togglePicker}\n >\n <IconPalette className={iconPaletteStyle} />\n </Color>\n </ColorBox>\n\n {showPicker && (\n <ChromePicker\n color={actualSelectedColor}\n onChange={onColorChange}\n onChangeComplete={onColorChangeComplete}\n />\n )}\n </ColorPickerStyle>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"names":["React","useCallback","useState","useEffect","useMemo","css","ChromePicker","Tooltip","ReactComponent","IconPalette","useRichTextEditor","ColorPickerStyle","_styled","process","env","NODE_ENV","target","label","name","styles","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","ColorBox","Color","cursor","width","height","transition","borderColor","display","alignItems","borderRadius","content","position","top","left","zIndex","opacity","transform","boxShadow","iconPaletteStyle","marginTop","color","COLORS","lightGray","gray","darkGray","darkestGray","black","selectedColor","button","border","boxSizing","backgroundColor","outline","chromePickerStyle","margin","showPickerStyle","hidePickerStyle","LexicalColorPicker","value","onChange","onChangeComplete","allowCustomColor","showPicker","setShowPicker","actualSelectedColor","setActualSelectedColor","isThemeColor","setIsThemeColor","getColorValue","rgb","alpha","r","g","b","a","onColorChange","event","preventDefault","customColor","onColorChangeComplete","togglePicker","e","stopPropagation","state","theme","themeColors","colors","some","id","createElement","map","key","className","placement","style","onClick","disableAlpha"],"sources":["LexicalColorPicker.tsx"],"sourcesContent":["import type { SyntheticEvent } from \"react\";\nimport React, { useCallback, useState, useEffect, useMemo } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { css } from \"emotion\";\nimport type { ColorState, RGBColor } from \"react-color\";\nimport { ChromePicker } from \"react-color\";\nimport type { OnChangeHandler } from \"react-color/lib/components/common/ColorWrap.js\";\nimport { Tooltip } from \"@webiny/ui/Tooltip/index.js\";\n\n// Icons\nimport { ReactComponent as IconPalette } from \"./round-color_lens-24px.svg\";\nimport { useRichTextEditor } from \"@webiny/lexical-editor\";\n\nconst ColorPickerStyle = styled(\"div\")({\n position: \"relative\",\n display: \"flex\",\n flexWrap: \"wrap\",\n justifyContent: \"flex-start\",\n width: 240,\n padding: 15,\n backgroundColor: \"#fff\"\n});\n\nconst ColorBox = styled(\"div\")({\n cursor: \"pointer\",\n width: 40,\n height: 40,\n borderRadius: \"50%\",\n margin: 5,\n border: \"1px solid var(--mdc-theme-on-background)\",\n padding: 3,\n boxSizing: \"content-box\"\n});\n\nconst Color = styled(\"button\")({\n cursor: \"pointer\",\n width: 40,\n height: 40,\n transition: \"transform 0.1s, border 0.2s\",\n borderColor: \"transparent\",\n display: \"flex\",\n alignItems: \"center\",\n borderRadius: \"50%\",\n \"&::after\": {\n transition: \"opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)\",\n content: '\"\"',\n position: \"absolute\",\n top: 0,\n left: 0,\n width: \"100%\",\n height: \"100%\",\n zIndex: -1,\n opacity: 0\n },\n \"&:hover\": {\n transform: \"scale(1.1)\",\n boxShadow: \"0 0.25rem 0.125rem 0 rgba(0,0,0,0.05)\",\n \"&::after\": {\n opacity: 1\n }\n }\n});\n\nconst iconPaletteStyle = css({\n height: 20,\n width: \"100%\",\n marginTop: 1,\n color: \"var(--mdc-theme-secondary)\"\n});\n\nconst COLORS = {\n lightGray: \"hsla(0, 0%, 97%, 1)\",\n gray: \"hsla(300, 2%, 92%, 1)\",\n darkGray: \"hsla(0, 0%, 70%, 1)\",\n darkestGray: \"hsla(0, 0%, 20%, 1)\",\n black: \"hsla(208, 100%, 5%, 1)\"\n};\n\nconst styles = {\n selectedColor: css({\n boxShadow: \"inset 0px 0px 0px 10px var(--mdc-theme-secondary)\",\n button: {\n border: \"5px solid var(--mdc-theme-surface)\"\n }\n }),\n button: css({\n cursor: \"pointer\",\n height: 30,\n boxSizing: \"border-box\",\n \"&:hover:not(:disabled)\": { backgroundColor: COLORS.gray },\n \"&:focus:not(:disabled)\": {\n outline: \"none\"\n },\n \"&:disabled\": {\n opacity: 0.5,\n cursor: \"not-allowed\"\n },\n \"& svg\": {\n width: 16,\n height: 16\n }\n }),\n color: css({\n width: \"40px\",\n height: \"100%\"\n })\n};\n\nconst chromePickerStyle = css({\n width: \"270px !important\",\n margin: \"15px -15px -15px -15px\"\n});\n\ninterface LexicalColorPickerProps {\n value: string;\n onChange?: (color: string) => void;\n onChangeComplete: (color: string, name?: string) => void;\n handlerClassName?: string;\n allowCustomColor?: boolean;\n}\n\nconst showPickerStyle = { display: \"block\" };\nconst hidePickerStyle = { display: \"none\" };\n\nexport const LexicalColorPicker = ({\n value,\n onChange,\n onChangeComplete,\n allowCustomColor\n}: LexicalColorPickerProps) => {\n const [showPicker, setShowPicker] = useState(false);\n // Either a custom color or a color coming from the theme object.\n const [actualSelectedColor, setActualSelectedColor] = useState(value \|\| \"#fff\");\n const [isThemeColor, setIsThemeColor] = useState(false);\n\n useEffect(() => {\n if (value) {\n setActualSelectedColor(value);\n }\n }, [value]);\n\n const getColorValue = useCallback((rgb: RGBColor, alpha?: number) => {\n return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha ?? rgb.a})`;\n }, []);\n\n const onColorChange = useCallback(\n (color: ColorState, event: React.SyntheticEvent) => {\n event.preventDefault();\n // controls of the picker are updated as user moves the mouse\n const customColor = getColorValue(color.rgb, color.rgb.a === 0 ? 1 : color.rgb.a);\n setActualSelectedColor(customColor);\n if (typeof onChange === \"function\") {\n onChange(customColor);\n }\n },\n [onChange]\n );\n\n const onColorChangeComplete = useCallback(\n ({ rgb }: ColorState, event: React.SyntheticEvent) => {\n event.preventDefault();\n const color = getColorValue(rgb, rgb.a === 0 ? 1 : rgb.a);\n setActualSelectedColor(color);\n onChangeComplete(color);\n },\n [onChangeComplete]\n );\n\n const togglePicker = useCallback((e: SyntheticEvent) => {\n e.stopPropagation();\n setShowPicker(state => !state);\n }, []);\n\n const { theme } = useRichTextEditor();\n\n const themeColors = useMemo(() => theme?.colors ?? [], []);\n\n useEffect(() => {\n const isThemeColor = themeColors.some(color => color.id === value);\n setIsThemeColor(isThemeColor);\n }, [themeColors, value]);\n\n return (\n <ColorPickerStyle>\n {themeColors.map(color => {\n return (\n <ColorBox\n key={color.id}\n className={color.id === value ? styles.selectedColor : \"\"}\n >\n <Tooltip content={<span>{color.label}</span>} placement=\"bottom\">\n <Color\n style={{ backgroundColor: color.value }}\n onClick={() => {\n onChangeComplete(color.value, color.id);\n }}\n />\n </Tooltip>\n </ColorBox>\n );\n })}\n\n {allowCustomColor ? (\n <ColorBox className={value && !isThemeColor ? styles.selectedColor : \"\"}>\n <Tooltip content={<span>Color picker</span>} placement=\"bottom\">\n <Color\n style={{ backgroundColor: isThemeColor ? \"#fff\" : value }}\n onClick={togglePicker}\n >\n <IconPalette className={iconPaletteStyle} />\n </Color>\n </Tooltip>\n </ColorBox>\n ) : null}\n\n <div style={showPicker ? showPickerStyle : hidePickerStyle}>\n <ChromePicker\n className={chromePickerStyle}\n color={actualSelectedColor}\n disableAlpha={true}\n onChange={onColorChange as OnChangeHandler}\n onChangeComplete={onColorChangeComplete as OnChangeHandler}\n />\n </div>\n </ColorPickerStyle>\n );\n};\n"],"mappings":"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","ignoreList":[]}

package/components/LexicalColorPickerDropdown.d.ts CHANGED Viewed

@@ -1,2 +1,5 @@
-/// <reference types="react" />
-export declare const LexicalColorPickerDropdown: () => JSX.Element;
+import React from "react";
+export interface LexicalColorPickerDropdownProps {
+    allowCustomColor?: boolean;
+}
+export declare const LexicalColorPickerDropdown: ({ allowCustomColor }: LexicalColorPickerDropdownProps) => React.JSX.Element;

package/components/LexicalColorPickerDropdown.js CHANGED Viewed

@@ -1,27 +1,29 @@
-"use strict";
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.LexicalColorPickerDropdown = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _lexicalEditor = require("@webiny/lexical-editor");
-var _LexicalColorPicker = require("./LexicalColorPicker/LexicalColorPicker");
-var LexicalColorPickerDropdown = function LexicalColorPickerDropdown() {
-  var _useFontColorPicker = (0, _lexicalEditor.useFontColorPicker)(),
-    value = _useFontColorPicker.value,
-    applyColor = _useFontColorPicker.applyColor;
-  return /*#__PURE__*/_react.default.createElement(_lexicalEditor.DropDown, {
+import React from "react";
+import { useFontColorPicker, DropDown } from "@webiny/lexical-editor";
+import { LexicalColorPicker } from "./LexicalColorPicker/LexicalColorPicker.js";
+import { css } from "emotion";
+export const LexicalColorPickerDropdown = ({
+  allowCustomColor = false
+}) => {
+  const {
+    value,
+    applyColor
+  } = useFontColorPicker();
+  const buttonColorSelection = css({
+    borderBottom: "3px solid " + value
+  });
+  return /*#__PURE__*/React.createElement(DropDown, {
     buttonClassName: "toolbar-item color-picker",
-    buttonAriaLabel: "Formatting options for font size",
-    buttonIconClassName: "icon font-color",
+    buttonAriaLabel: "Formatting options for text color",
+    buttonIconClassName: "icon font-color " + buttonColorSelection,
     stopCloseOnClickSelf: true,
     disabled: false,
     showScroll: false
-  }, /*#__PURE__*/_react.default.createElement(_LexicalColorPicker.LexicalColorPicker, {
+  }, /*#__PURE__*/React.createElement(LexicalColorPicker, {
     value: value,
-    onChangeComplete: applyColor
+    onChangeComplete: applyColor,
+    allowCustomColor: allowCustomColor
   }));
 };
-exports.LexicalColorPickerDropdown = LexicalColorPickerDropdown;
+//# sourceMappingURL=LexicalColorPickerDropdown.js.map

package/components/LexicalColorPickerDropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["~~LexicalColorPickerDropdown~~","useFontColorPicker","value","applyColor"],"sources":["LexicalColorPickerDropdown.tsx"],"sourcesContent":["import React from \"react\";\nimport { useFontColorPicker, DropDown } from \"@webiny/lexical-editor\";\nimport { LexicalColorPicker } from \"~/components/LexicalColorPicker/LexicalColorPicker\";\n\nexport const LexicalColorPickerDropdown = () => {\n const { value, applyColor } = useFontColorPicker();\n\n return (\n <DropDown\n buttonClassName=\"toolbar-item color-picker\"\n buttonAriaLabel={\"Formatting options for ~~font~~ ~~size~~\"}\n buttonIconClassName=\"icon font-color\"\n stopCloseOnClickSelf={true}\n disabled={false}\n showScroll={false}\n >\n <LexicalColorPicker value={value} onChangeComplete={applyColor} />\n </DropDown>\n );\n};\n"],"mappings":"~~;;;;;;;~~AAAA;~~AACA~~;~~AACA~~;~~AAEO~~,~~IAAMA~~,~~0BAA0B,~~GAAG,~~SAA7BA~~,0BAA0B,~~GAAS~~;~~EAC5C~~,~~0BAA8B~~,~~IAAAC~~,~~iCAAkB~~,~~GAAE~~;~~IAA1CC~~,~~KAAK~~,~~uBAALA,~~KAAK;IAAEC,~~UAAU~~,~~uBAAVA~~,~~UAAU~~;~~EAEzB~~,~~oBACI~~,~~6BAAC~~,~~uBAAQ~~;~~IACL~~,eAAe,EAAC,2BAA2B;~~IAC3C~~,eAAe,EAAE,~~kCAAmC~~;~~IACpD~~,mBAAmB,~~EAAC~~,~~iBAAiB~~;~~IACrC~~,oBAAoB,EAAE,IAAK;~~IAC3B~~,QAAQ,EAAE,KAAM;~~IAChB~~,UAAU,EAAE;EAAM,~~gBAElB~~,~~6BAAC~~,~~sCAAkB~~;~~IAAC~~,KAAK,~~EAAED~~,KAAM;~~IAAC~~,gBAAgB,~~EAAEC~~;~~EAAW~~,~~EAAG~~,~~CAC3D~~;AAEnB,CAAC~~;AAAC~~"}
1	+ {"version":3,"names":["React","useFontColorPicker","DropDown","LexicalColorPicker","css","LexicalColorPickerDropdown","allowCustomColor","value","applyColor","buttonColorSelection","borderBottom","createElement","buttonClassName","buttonAriaLabel","buttonIconClassName","stopCloseOnClickSelf","disabled","showScroll","onChangeComplete"],"sources":["LexicalColorPickerDropdown.tsx"],"sourcesContent":["import React from \"react\";\nimport { useFontColorPicker, DropDown } from \"@webiny/lexical-editor\";\nimport { LexicalColorPicker } from \"~/components/LexicalColorPicker/LexicalColorPicker.js\";\nimport { css } from \"emotion\";\n\nexport interface LexicalColorPickerDropdownProps {\n allowCustomColor?: boolean;\n}\n\nexport const LexicalColorPickerDropdown = ({\n allowCustomColor = false\n}: LexicalColorPickerDropdownProps) => {\n const { value, applyColor } = useFontColorPicker();\n\n const buttonColorSelection = css({\n borderBottom: \"3px solid \" + value\n });\n\n return (\n <DropDown\n buttonClassName=\"toolbar-item color-picker\"\n buttonAriaLabel={\"Formatting options for text color\"}\n buttonIconClassName={\"icon font-color \" + buttonColorSelection}\n stopCloseOnClickSelf={true}\n disabled={false}\n showScroll={false}\n >\n <LexicalColorPicker\n value={value}\n onChangeComplete={applyColor}\n allowCustomColor={allowCustomColor}\n />\n </DropDown>\n );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,kBAAkB,EAAEC,QAAQ,QAAQ,wBAAwB;AACrE,SAASC,kBAAkB;AAC3B,SAASC,GAAG,QAAQ,SAAS;AAM7B,OAAO,MAAMC,0BAA0B,GAAGA,CAAC;EACvCC,gBAAgB,GAAG;AACU,CAAC,KAAK;EACnC,MAAM;IAAEC,KAAK;IAAEC;EAAW,CAAC,GAAGP,kBAAkB,CAAC,CAAC;EAElD,MAAMQ,oBAAoB,GAAGL,GAAG,CAAC;IAC7BM,YAAY,EAAE,YAAY,GAAGH;EACjC,CAAC,CAAC;EAEF,oBACIP,KAAA,CAAAW,aAAA,CAACT,QAAQ;IACLU,eAAe,EAAC,2BAA2B;IAC3CC,eAAe,EAAE,mCAAoC;IACrDC,mBAAmB,EAAE,kBAAkB,GAAGL,oBAAqB;IAC/DM,oBAAoB,EAAE,IAAK;IAC3BC,QAAQ,EAAE,KAAM;IAChBC,UAAU,EAAE;EAAM,gBAElBjB,KAAA,CAAAW,aAAA,CAACR,kBAAkB;IACfI,KAAK,EAAEA,KAAM;IACbW,gBAAgB,EAAEV,UAAW;IAC7BF,gBAAgB,EAAEA;EAAiB,CACtC,CACK,CAAC;AAEnB,CAAC","ignoreList":[]}

package/components/TextAlignmentDropdown.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import React from "react";
2	+ export declare const TextAlignmentDropdown: () => React.JSX.Element;

package/components/TextAlignmentDropdown.js ADDED Viewed

@@ -0,0 +1,78 @@
+import React from "react";
+import { $isParentElementRTL } from "@lexical/selection";
+import { Divider, DropDown, DropDownItem, useTextAlignmentAction } from "@webiny/lexical-editor";
+import { useDeriveValueFromSelection } from "@webiny/lexical-editor/hooks/useCurrentSelection.js";
+export const TextAlignmentDropdown = () => {
+  const {
+    applyTextAlignment,
+    outdentText,
+    indentText
+  } = useTextAlignmentAction();
+  const isRTL = useDeriveValueFromSelection(({
+    rangeSelection
+  }) => {
+    return rangeSelection ? $isParentElementRTL(rangeSelection) : false;
+  });
+  return /*#__PURE__*/React.createElement(DropDown, {
+    buttonLabel: "Align",
+    buttonIconClassName: "icon left-align",
+    buttonClassName: "toolbar-item spaced alignment",
+    buttonAriaLabel: "Formatting options for text alignment"
+  }, /*#__PURE__*/React.createElement(DropDownItem, {
+    onClick: () => {
+      applyTextAlignment("left");
+    },
+    className: "item"
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "icon left-align"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "text"
+  }, "Left Align")), /*#__PURE__*/React.createElement(DropDownItem, {
+    onClick: () => {
+      applyTextAlignment("center");
+    },
+    className: "item"
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "icon center-align"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "text"
+  }, "Center Align")), /*#__PURE__*/React.createElement(DropDownItem, {
+    onClick: () => {
+      applyTextAlignment("right");
+    },
+    className: "item"
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "icon right-align"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "text"
+  }, "Right Align")), /*#__PURE__*/React.createElement(DropDownItem, {
+    onClick: () => {
+      applyTextAlignment("justify");
+    },
+    className: "item"
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "icon justify-align"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "text"
+  }, "Justify Align")), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(DropDownItem, {
+    onClick: () => {
+      outdentText();
+    },
+    className: "item"
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "icon " + (isRTL ? "indent" : "outdent")
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "text"
+  }, "Outdent")), /*#__PURE__*/React.createElement(DropDownItem, {
+    onClick: () => {
+      indentText();
+    },
+    className: "item"
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "icon " + (isRTL ? "outdent" : "indent")
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "text"
+  }, "Indent")));
+};
+//# sourceMappingURL=TextAlignmentDropdown.js.map

package/components/TextAlignmentDropdown.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["React","$isParentElementRTL","Divider","DropDown","DropDownItem","useTextAlignmentAction","useDeriveValueFromSelection","TextAlignmentDropdown","applyTextAlignment","outdentText","indentText","isRTL","rangeSelection","createElement","buttonLabel","buttonIconClassName","buttonClassName","buttonAriaLabel","onClick","className"],"sources":["TextAlignmentDropdown.tsx"],"sourcesContent":["import React from \"react\";\nimport { $isParentElementRTL } from \"@lexical/selection\";\nimport { Divider, DropDown, DropDownItem, useTextAlignmentAction } from \"@webiny/lexical-editor\";\nimport { useDeriveValueFromSelection } from \"@webiny/lexical-editor/hooks/useCurrentSelection.js\";\n\nexport const TextAlignmentDropdown = () => {\n const { applyTextAlignment, outdentText, indentText } = useTextAlignmentAction();\n\n const isRTL = useDeriveValueFromSelection(({ rangeSelection }) => {\n return rangeSelection ? $isParentElementRTL(rangeSelection) : false;\n });\n\n return (\n <DropDown\n buttonLabel=\"Align\"\n buttonIconClassName=\"icon left-align\"\n buttonClassName=\"toolbar-item spaced alignment\"\n buttonAriaLabel=\"Formatting options for text alignment\"\n >\n <DropDownItem\n onClick={() => {\n applyTextAlignment(\"left\");\n }}\n className=\"item\"\n >\n \n Left Align\n </DropDownItem>\n <DropDownItem\n onClick={() => {\n applyTextAlignment(\"center\");\n }}\n className=\"item\"\n >\n \n Center Align\n </DropDownItem>\n <DropDownItem\n onClick={() => {\n applyTextAlignment(\"right\");\n }}\n className=\"item\"\n >\n \n Right Align\n </DropDownItem>\n <DropDownItem\n onClick={() => {\n applyTextAlignment(\"justify\");\n }}\n className=\"item\"\n >\n \n Justify Align\n </DropDownItem>\n <Divider />\n <DropDownItem\n onClick={() => {\n outdentText();\n }}\n className=\"item\"\n >\n \n Outdent\n </DropDownItem>\n <DropDownItem\n onClick={() => {\n indentText();\n }}\n className=\"item\"\n >\n \n Indent\n </DropDownItem>\n </DropDown>\n );\n};\n"],"mappings":"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","ignoreList":[]}

package/index.d.ts CHANGED Viewed

	@@ -1 +1 @@
1	- export { LexicalEditorActions } from "./LexicalEditorActions";
1	+ export { LexicalEditorActions } from "./LexicalEditorActions.js";

package/index.js CHANGED Viewed

@@ -1,12 +1,3 @@
-"use strict";
+export { LexicalEditorActions } from "./LexicalEditorActions.js";
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "LexicalEditorActions", {
-  enumerable: true,
-  get: function get() {
-    return _LexicalEditorActions.LexicalEditorActions;
-  }
-});
-var _LexicalEditorActions = require("./LexicalEditorActions");
+//# sourceMappingURL=index.js.map

package/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { LexicalEditorActions } from \"~/LexicalEditorActions\";\n"],"mappings":"~~;;;;;;;;;;;~~AAAA"}
1	+ {"version":3,"names":["LexicalEditorActions"],"sources":["index.ts"],"sourcesContent":["export { LexicalEditorActions } from \"~/LexicalEditorActions.js\";\n"],"mappings":"AAAA,SAASA,oBAAoB","ignoreList":[]}

package/package.json CHANGED Viewed

@@ -1,28 +1,24 @@
 {
 	"name": "@webiny/lexical-editor-actions",
-	"version": "0.0.0-unstable.496cf268ac",
+	"version": "0.0.0-unstable.61c048f412",
+	"type": "module",
 	"dependencies": {
 		"@emotion/styled": "11.10.6",
-		"@webiny/app-page-builder": "0.0.0-unstable.496cf268ac",
-		"@webiny/app-page-builder-elements": "0.0.0-unstable.496cf268ac",
-		"@webiny/lexical-editor": "0.0.0-unstable.496cf268ac",
-		"classnames": "2.3.2",
+		"@lexical/selection": "0.39.0",
+		"@webiny/lexical-editor": "0.0.0-unstable.61c048f412",
+		"@webiny/ui": "0.0.0-unstable.61c048f412",
 		"emotion": "10.0.27",
-		"react": "17.0.2",
+		"react": "18.2.0",
 		"react-color": "2.19.3",
-		"react-dom": "17.0.2"
+		"react-dom": "18.2.0"
 	},
 	"devDependencies": {
-		"@webiny/cli": "^0.0.0-unstable.496cf268ac",
-		"@webiny/project-utils": "^0.0.0-unstable.496cf268ac"
+		"@types/react-color": "2.17.12",
+		"@webiny/build-tools": "0.0.0-unstable.61c048f412"
 	},
 	"publishConfig": {
 		"access": "public",
 		"directory": "dist"
 	},
-	"scripts": {
-		"build": "yarn webiny run build",
-		"watch": "yarn webiny run watch"
-	},
-	"gitHead": "496cf268acd5b092c860b62d75c7d765c9472043"
+	"gitHead": "61c048f412d6b4aa70c1d105aab21e3fa69730f3"
 }