@pareto-engineering/design-system 5.3.0 → 5.4.0

package/dist/cjs/f/fields/EditorInput/EditorInput.js

@@ -1,238 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var React = _react;
-var _lexical = require("lexical");
-var _formik = require("formik");
-var _LexicalComposer = require("@lexical/react/LexicalComposer");
-var _LexicalRichTextPlugin = require("@lexical/react/LexicalRichTextPlugin");
-var _LexicalContentEditable = require("@lexical/react/LexicalContentEditable");
-var _LexicalOnChangePlugin = require("@lexical/react/LexicalOnChangePlugin");
-var _LexicalHistoryPlugin = require("@lexical/react/LexicalHistoryPlugin");
-var _LexicalLinkPlugin = require("@lexical/react/LexicalLinkPlugin");
-var _LexicalClickableLinkPlugin = _interopRequireDefault(require("@lexical/react/LexicalClickableLinkPlugin"));
-var _LexicalListPlugin = require("@lexical/react/LexicalListPlugin");
-var _LexicalErrorBoundary = _interopRequireDefault(require("@lexical/react/LexicalErrorBoundary"));
-var _LexicalTabIndentationPlugin = require("@lexical/react/LexicalTabIndentationPlugin");
-var _link = require("@lexical/link");
-var _list = require("@lexical/list");
-var _LexicalCheckListPlugin = require("@lexical/react/LexicalCheckListPlugin");
-var _richText = require("@lexical/rich-text");
-var _code = require("@lexical/code");
-var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
-var _common = require("../../common");
-var _common2 = require("./common");
-require("./styles.scss");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/* @pareto-engineering/generator-front 1.0.12 */
-/* eslint-disable import/no-extraneous-dependencies -- required here */
-
-// Local Definitions
-
-const baseClassName = _exports.default.base;
-const componentClassName = 'editor-input';
-const ExposeEditorStatePlugin = _ref => {
-  let {
-    setEditorState
-  } = _ref;
-  const [editor] = (0, _LexicalComposerContext.useLexicalComposerContext)();
-  (0, _react.useEffect)(() => {
-    setEditorState(editor);
-  }, [editor]);
-  return null;
-};
-
-/**
- * This is the component description.
- */
-const EditorInput = _ref2 => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    name,
-    label,
-    resize,
-    color,
-    rows,
-    optional,
-    labelColor,
-    description,
-    disabled,
-    showDebugger,
-    setEditorState,
-    setPlainTextKey,
-    validate
-    // ...otherProps
-  } = _ref2;
-  const [field,,] = (0, _formik.useField)(name);
-  const {
-    setFieldValue
-  } = (0, _formik.useFormikContext)();
-  const setInitialValue = () => {
-    try {
-      const parsedValue = JSON.parse(field.value);
-      // A pure number value will break the editor, so we throw an error to return
-      // the default value in the catch block.
-      if (typeof parsedValue === 'number') {
-        throw new Error('Number');
-      }
-      return field.value;
-    } catch {
-      const defaultValue = {
-        root: {
-          children: [{
-            children: [{
-              detail: 0,
-              format: 0,
-              mode: 'normal',
-              style: '',
-              text: field.value,
-              type: 'text',
-              version: 1
-            }],
-            direction: 'ltr',
-            format: '',
-            indent: 0,
-            type: 'paragraph',
-            version: 1
-          }],
-          direction: 'ltr',
-          format: '',
-          indent: 0,
-          type: 'root',
-          version: 1
-        }
-      };
-      return JSON.stringify(defaultValue);
-    }
-  };
-  const onChange = state => {
-    setFieldValue(name, JSON.stringify(state));
-    validate?.(state.read(() => {
-      const root = (0, _lexical.$getRoot)();
-      const textContent = root.getTextContent();
-      return textContent;
-    }));
-  };
-  const initialConfig = {
-    nameSpace: name,
-    editable: !disabled,
-    editorState: setInitialValue(),
-    theme: {
-      text: {
-        italic: 'italic',
-        strikethrough: 'strikethrough',
-        underline: 'underlined'
-      },
-      list: {
-        listitemChecked: 'lexical-list-item-checked',
-        listitemUnchecked: 'lexical-list-item-unchecked'
-      },
-      code: 'lexical-code'
-    },
-    nodes: [_richText.HeadingNode, _richText.QuoteNode, _code.CodeNode, _code.CodeHighlightNode, _link.AutoLinkNode, _link.LinkNode, _list.ListNode, _list.ListItemNode]
-  };
-  return /*#__PURE__*/React.createElement(_LexicalComposer.LexicalComposer, {
-    initialConfig: initialConfig
-  }, /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, `y-${color}`, disabled && 'disabled'].filter(e => e).join(' '),
-    style: {
-      ...style,
-      '--resize': resize,
-      '--rows': `${rows}em`
-    }
-  }, label && /*#__PURE__*/React.createElement(_common.FormLabel, {
-    name: name,
-    color: labelColor,
-    optional: optional
-  }, label), !disabled && /*#__PURE__*/React.createElement(_common2.ToolbarPlugin, null), /*#__PURE__*/React.createElement(_LexicalRichTextPlugin.RichTextPlugin, {
-    contentEditable: /*#__PURE__*/React.createElement(_LexicalContentEditable.ContentEditable, {
-      className: "content-editable",
-      id: name,
-      name: name
-    }),
-    ErrorBoundary: _LexicalErrorBoundary.default
-  }), /*#__PURE__*/React.createElement(_LexicalListPlugin.ListPlugin, null), /*#__PURE__*/React.createElement(_LexicalCheckListPlugin.CheckListPlugin, null), /*#__PURE__*/React.createElement(_LexicalOnChangePlugin.OnChangePlugin, {
-    onChange: onChange
-  }), /*#__PURE__*/React.createElement(_LexicalLinkPlugin.LinkPlugin, null), /*#__PURE__*/React.createElement(_LexicalClickableLinkPlugin.default, null), /*#__PURE__*/React.createElement(_LexicalTabIndentationPlugin.TabIndentationPlugin, null), setEditorState && /*#__PURE__*/React.createElement(ExposeEditorStatePlugin, {
-    setEditorState: setEditorState
-  }), /*#__PURE__*/React.createElement(_LexicalHistoryPlugin.HistoryPlugin, null), /*#__PURE__*/React.createElement(_common2.StopPropagationPlugin, null), /*#__PURE__*/React.createElement(_common.FormDescription, {
-    className: "s-1",
-    description: description,
-    name: name
-  }), showDebugger && /*#__PURE__*/React.createElement(_common2.TreeViewPlugin, null), setPlainTextKey && /*#__PURE__*/React.createElement(_common2.ExposePlainTextPlugin, {
-    setFieldValue: setFieldValue,
-    setPlainTextKey: setPlainTextKey
-  })));
-};
-EditorInput.propTypes = {
-  /**
-   * The HTML id for this element
-   */
-  id: _propTypes.default.string,
-  /**
-   * The HTML class names for this element
-   */
-  className: _propTypes.default.string,
-  /**
-   * The React-written, css properties for this element.
-   */
-  style: _propTypes.default.objectOf(_propTypes.default.string),
-  /**
-   * The input name (html - and Formik state)
-   */
-  name: _propTypes.default.string.isRequired,
-  /**
-   * The input label
-   */
-  label: _propTypes.default.string.isRequired,
-  /**
-   * The number of rows int the text area
-   */
-  rows: _propTypes.default.number,
-  /**
-   * Color of the text
-   */
-  color: _propTypes.default.string,
-  /**
-   * Label base color
-   */
-  labelColor: _propTypes.default.string,
-  /**
-   * Text area description
-   */
-  description: _propTypes.default.string,
-  /**
-   * Whether the text area should be disabled
-   */
-  disabled: _propTypes.default.bool,
-  /**
-  * Whether the input is optional or not
-  */
-  optional: _propTypes.default.bool,
-  /**
-   * The resize property of the text area
-   */
-  resize: _propTypes.default.oneOf(['none', 'both', 'horizontal', 'vertical']),
-  /**
-   * Whether to show the debugger or not
-   */
-  showDebugger: _propTypes.default.bool
-};
-EditorInput.defaultProps = {
-  rows: 10,
-  disabled: false,
-  color: 'paragraph',
-  resize: 'vertical'
-};
-var _default = exports.default = /*#__PURE__*/(0, _react.memo)(EditorInput);

package/dist/cjs/f/fields/EditorInput/common/BlockFormatDropDown/BlockFormatDropDown.js

@@ -1,256 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var React = _react;
-var _lexical = require("lexical");
-var _richText = require("@lexical/rich-text");
-var _selection = require("@lexical/selection");
-var _list = require("@lexical/list");
-var _code = require("@lexical/code");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
-require("./styles.scss");
-var _a = require("../../../../../a");
-var _utils = require("../../../../../utils");
-var _ToolbarPlugin = require("../ToolbarPlugin/ToolbarPlugin");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/* @pareto-engineering/generator-front 1.0.12 */
-
-// Local Definitions
-
-const baseClassName = _exports.default.base;
-const componentClassName = 'block-format-drop-down';
-const iconsMap = {
-  bullet: {
-    icon: '.',
-    className: 'icon'
-  },
-  check: {
-    icon: '4',
-    className: 'ai-icon'
-  },
-  code: {
-    icon: '6',
-    className: 'ai-icon'
-  },
-  h1: {
-    icon: '1',
-    className: 'ai-icon'
-  },
-  h2: {
-    icon: '2',
-    className: 'ai-icon'
-  },
-  h3: {
-    icon: '3',
-    className: 'ai-icon'
-  },
-  number: {
-    icon: '-',
-    className: 'icon'
-  },
-  paragraph: {
-    icon: 'N',
-    className: 'ai-icon'
-  },
-  quote: {
-    icon: '5',
-    className: 'ai-icon'
-  }
-};
-/**
- * This is the component description.
- */
-const BlockFormatDropDown = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    editor,
-    blockType
-    // ...otherProps
-  } = _ref;
-  const formatParagraph = () => {
-    editor.update(() => {
-      const selection = (0, _lexical.$getSelection)();
-      if ((0, _lexical.$isRangeSelection)(selection) || (0, _lexical.DEPRECATED_$isGridSelection)(selection)) {
-        (0, _selection.$setBlocksType)(selection, () => (0, _lexical.$createParagraphNode)());
-      }
-    });
-  };
-  const formatHeading = headingSize => {
-    if (blockType !== headingSize) {
-      editor.update(() => {
-        const selection = (0, _lexical.$getSelection)();
-        if ((0, _lexical.$isRangeSelection)(selection) || (0, _lexical.DEPRECATED_$isGridSelection)(selection)) {
-          (0, _selection.$setBlocksType)(selection, () => (0, _richText.$createHeadingNode)(headingSize));
-        }
-      });
-    }
-  };
-  const formatBulletList = () => {
-    if (blockType !== 'bullet') {
-      editor.dispatchCommand(_list.INSERT_UNORDERED_LIST_COMMAND, undefined);
-    } else {
-      editor.dispatchCommand(_list.REMOVE_LIST_COMMAND, undefined);
-    }
-  };
-  const formatCheckList = () => {
-    if (blockType !== 'check') {
-      editor.dispatchCommand(_list.INSERT_CHECK_LIST_COMMAND, undefined);
-    } else {
-      editor.dispatchCommand(_list.REMOVE_LIST_COMMAND, undefined);
-    }
-  };
-  const formatNumberedList = () => {
-    if (blockType !== 'number') {
-      editor.dispatchCommand(_list.INSERT_ORDERED_LIST_COMMAND, undefined);
-    } else {
-      editor.dispatchCommand(_list.REMOVE_LIST_COMMAND, undefined);
-    }
-  };
-  const formatQuote = () => {
-    if (blockType !== 'quote') {
-      editor.update(() => {
-        const selection = (0, _lexical.$getSelection)();
-        if ((0, _lexical.$isRangeSelection)(selection) || (0, _lexical.DEPRECATED_$isGridSelection)(selection)) {
-          (0, _selection.$setBlocksType)(selection, () => (0, _richText.$createQuoteNode)());
-        }
-      });
-    }
-  };
-  const formatCode = () => {
-    if (blockType !== 'code') {
-      editor.update(() => {
-        let selection = (0, _lexical.$getSelection)();
-        if ((0, _lexical.$isRangeSelection)(selection) || (0, _lexical.DEPRECATED_$isGridSelection)(selection)) {
-          if (selection.isCollapsed()) {
-            (0, _selection.$setBlocksType)(selection, () => (0, _code.$createCodeNode)());
-          } else {
-            const textContent = selection.getTextContent();
-            const codeNode = (0, _code.$createCodeNode)();
-            selection.insertNodes([codeNode]);
-            selection = (0, _lexical.$getSelection)();
-            if ((0, _lexical.$isRangeSelection)(selection)) selection.insertRawText(textContent);
-          }
-        }
-      });
-    }
-  };
-  const parentRef = (0, _react.useRef)(null);
-  const [isOpen, setIsOpen] = (0, _react.useState)(false);
-  (0, _utils.useOutsideClick)(parentRef, () => setIsOpen(false));
-  return /*#__PURE__*/React.createElement("button", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, 'group'].filter(e => e).join(' '),
-    style: style,
-    ref: parentRef,
-    type: "button",
-    onClick: () => setIsOpen(!isOpen)
-    // {...otherProps}
-  }, /*#__PURE__*/React.createElement("span", {
-    className: iconsMap[blockType].className
-  }, iconsMap[blockType].icon), /*#__PURE__*/React.createElement("span", null, _ToolbarPlugin.blockTypeToBlockName[blockType]), /*#__PURE__*/React.createElement("span", {
-    className: "icon"
-  }, "V"), isOpen && /*#__PURE__*/React.createElement(_a.Popover, {
-    parentRef: parentRef,
-    isOpen: isOpen,
-    color: "background-far"
-  }, /*#__PURE__*/React.createElement("button", {
-    className: `item ${blockType === 'paragraph' ? 'active' : ''}`,
-    onClick: formatParagraph,
-    type: "button"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "ai-icon"
-  }, "N"), /*#__PURE__*/React.createElement("span", {
-    className: "text"
-  }, "Normal")), /*#__PURE__*/React.createElement("button", {
-    className: `item ${blockType === 'h1' ? 'active' : ''}`,
-    onClick: () => formatHeading('h1'),
-    type: "button"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "ai-icon"
-  }, "1"), /*#__PURE__*/React.createElement("span", {
-    className: "text"
-  }, "Heading 1")), /*#__PURE__*/React.createElement("button", {
-    className: `item ${blockType === 'h2' ? 'active' : ''}`,
-    onClick: () => formatHeading('h2'),
-    type: "button"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "ai-icon"
-  }, "2"), /*#__PURE__*/React.createElement("span", {
-    className: "text"
-  }, "Heading 2")), /*#__PURE__*/React.createElement("button", {
-    className: `item ${blockType === 'h3' ? 'active' : ''}`,
-    onClick: () => formatHeading('h3'),
-    type: "button"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "ai-icon"
-  }, "3"), /*#__PURE__*/React.createElement("span", {
-    className: "text"
-  }, "Heading 3")), /*#__PURE__*/React.createElement("button", {
-    className: `item ${blockType === 'bullet' ? 'active' : ''}`,
-    onClick: formatBulletList,
-    type: "button"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "icon"
-  }, "."), /*#__PURE__*/React.createElement("span", {
-    className: "text"
-  }, "Bullet List")), /*#__PURE__*/React.createElement("button", {
-    className: `item ${blockType === 'number' ? 'active' : ''}`,
-    onClick: formatNumberedList,
-    type: "button"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "icon"
-  }, "-"), /*#__PURE__*/React.createElement("span", {
-    className: "text"
-  }, "Numbered List")), /*#__PURE__*/React.createElement("button", {
-    className: `item ${blockType === 'check' ? 'active' : ''}`,
-    onClick: formatCheckList,
-    type: "button"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "ai-icon"
-  }, "4"), /*#__PURE__*/React.createElement("span", {
-    className: "text"
-  }, "Check List")), /*#__PURE__*/React.createElement("button", {
-    className: `item ${blockType === 'quote' ? 'active' : ''}`,
-    onClick: formatQuote,
-    type: "button"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "ai-icon"
-  }, "5"), /*#__PURE__*/React.createElement("span", {
-    className: "text"
-  }, "Quote")), /*#__PURE__*/React.createElement("button", {
-    className: `item ${blockType === 'code' ? 'active' : ''}`,
-    onClick: formatCode,
-    type: "button"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "ai-icon"
-  }, "6"), /*#__PURE__*/React.createElement("span", {
-    className: "text"
-  }, "Code Block"))));
-};
-BlockFormatDropDown.propTypes = {
-  /**
-   * The HTML id for this element
-   */
-  id: _propTypes.default.string,
-  /**
-   * The HTML class names for this element
-   */
-  className: _propTypes.default.string,
-  /**
-   * The React-written, css properties for this element.
-   */
-  style: _propTypes.default.objectOf(_propTypes.default.string)
-};
-BlockFormatDropDown.defaultProps = {
-  // someProp:false
-};
-var _default = exports.default = BlockFormatDropDown;

package/dist/cjs/f/fields/EditorInput/common/BlockFormatDropDown/index.js

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "BlockFormatDropDown", {
-  enumerable: true,
-  get: function () {
-    return _BlockFormatDropDown.default;
-  }
-});
-var _BlockFormatDropDown = _interopRequireDefault(require("./BlockFormatDropDown"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/cjs/f/fields/EditorInput/common/BlockFormatDropDown/styles.scss

@@ -1,55 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-
-@use "@pareto-engineering/bem";
-
-$default-width: 15em;
-
-.#{bem.$base}.block-format-drop-down {
-  align-items: center;
-  background-color: var(--x);
-  border: 0;
-  color: var(--on-background-inputs);
-  cursor: pointer;
-  display: flex;
-  gap: calc(var(--gap) / 2);
-  margin-inline: calc(var(--theme-default-padding) / 4);
-  padding: calc(var(--theme-default-padding) / 2);
-  position: relative;
-
-  &:hover {
-    background: var(--hard-x);
-    border-radius: calc(var(--theme-default-border-radius) / 2);
-  }
-
-  > .#{bem.$base}.popover {
-    background-color: var(--background-far);
-    border: 1px solid var(--hard-background-cards);
-    border-radius: calc(var(--theme-default-border-radius) / 2);
-    color: var(--heading);
-    display: flex;
-    flex-direction: column;
-    padding: calc(var(--theme-default-padding) / 2);
-    width: $default-width;
-
-    > .item {
-      align-items: center;
-      background-color: var(--x);
-      border: 0;
-      border-radius: calc(var(--theme-default-border-radius) / 2);
-      color: var(--paragraph);
-      cursor: pointer;
-      display: flex;
-      gap: calc(var(--gap) / 2);
-      padding: calc(var(--theme-default-padding) / 2);
-      transition: all .2s;
-
-      &:hover {
-        background-color: var(--hard-x);
-      }
-
-      &.active {
-        background-color: var(--hard-ui-main);
-      }
-    }
-  }
-}

package/dist/cjs/f/fields/EditorInput/common/ColorPicker/ColorPicker.js

@@ -1,98 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var React = _react;
-var _reactColorPalette = require("react-color-palette");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
-require("./styles.scss");
-var _a = require("../../../../../a");
-var _utils = require("../../../../../utils");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/* @pareto-engineering/generator-front 1.0.12 */
-
-// Local Definitions
-
-const baseClassName = _exports.default.base;
-const componentClassName = 'color-picker';
-
-/**
- * This is the component description.
- */
-const ColorPicker = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    icon,
-    defaultColorHex,
-    onChange
-    // ...otherProps
-  } = _ref;
-  const [colorValue, setColor] = (0, _reactColorPalette.useColor)(defaultColorHex);
-  const parentRef = (0, _react.useRef)(null);
-  const [isOpen, setIsOpen] = (0, _react.useState)(false);
-  (0, _utils.useOutsideClick)(parentRef, () => setIsOpen(false));
-  (0, _react.useEffect)(() => {
-    const {
-      hex
-    } = colorValue;
-    if (hex) {
-      onChange(hex);
-    }
-  }, [colorValue]);
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line jsx-a11y/control-has-associated-label
-    React.createElement("div", {
-      id: id,
-      className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-      style: style,
-      ref: parentRef
-      // {...otherProps}
-    }, /*#__PURE__*/React.createElement("button", {
-      type: "button",
-      onClick: () => setIsOpen(!isOpen)
-    }, /*#__PURE__*/React.createElement("span", {
-      className: "icon"
-    }, icon), /*#__PURE__*/React.createElement("span", {
-      className: "icon"
-    }, "V")), /*#__PURE__*/React.createElement(_a.Popover, {
-      parentRef: parentRef,
-      isOpen: isOpen,
-      color: "background-far"
-    }, /*#__PURE__*/React.createElement(_reactColorPalette.ColorPicker, {
-      color: colorValue,
-      onChange: setColor,
-      hideInput: true
-    })))
-  );
-};
-ColorPicker.propTypes = {
-  /**
-   * The HTML id for this element
-   */
-  id: _propTypes.default.string,
-  /**
-   * The HTML class names for this element
-   */
-  className: _propTypes.default.string,
-  /**
-   * The React-written, css properties for this element.
-   */
-  style: _propTypes.default.objectOf(_propTypes.default.string),
-  /**
-   * The required default hex value for the color picker
-   */
-  defaultColorHex: _propTypes.default.string
-};
-ColorPicker.defaultProps = {
-  defaultColorHex: '#ffffff'
-};
-var _default = exports.default = ColorPicker;

package/dist/cjs/f/fields/EditorInput/common/ColorPicker/index.js

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "ColorPicker", {
-  enumerable: true,
-  get: function () {
-    return _ColorPicker.default;
-  }
-});
-var _ColorPicker = _interopRequireDefault(require("./ColorPicker"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }