@pareto-engineering/design-system 4.0.0-alpha.41 → 4.0.0-alpha.43

package/dist/cjs/b/Button/Button.js

@@ -25,6 +25,7 @@ const Button = _ref => {
     children,
     isLoading,
     color,
+    textColor,
     isCompact,
     isGhost,
     isSimple,
@@ -41,7 +42,7 @@ const Button = _ref => {
   }, children) : children;
   return /*#__PURE__*/React.createElement("button", _extends({
     id: id,
-    className: [baseClassName, componentClassName, userClassName, `x-${color}`, isGhost && _exports.default.modifierGhost, isCompact && _exports.default.modifierCompact, isSimple && _exports.default.modifierSimple, isGradient && _exports.default.modifierGradient, isSpaced && _exports.default.modifierSpaced, !isLoading && arrowDirection && `arrow-${arrowDirection}`].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, `x-${color}`, textColor && `y-${textColor}`, isGhost && _exports.default.modifierGhost, isCompact && _exports.default.modifierCompact, isSimple && _exports.default.modifierSimple, isGradient && _exports.default.modifierGradient, isSpaced && _exports.default.modifierSpaced, !isLoading && arrowDirection && `arrow-${arrowDirection}`].filter(e => e).join(' '),
     style: style,
     type: "button"
   }, otherProps), isLoading ? /*#__PURE__*/React.createElement(_.LoadingCircle, {

package/dist/cjs/b/Button/styles.scss

@@ -92,7 +92,7 @@ $default-animation-time: .31s;
   &.#{bem.$modifier-ghost} {
     background: transparent;
     border: 1px solid var(--x, var(--#{$default-color}));
-    color: var(--x, var(--#{$default-color}));
+    color: var(--y, var(--x, var(--#{$default-color})));
 
     &:hover,
     &:focus,
@@ -103,12 +103,12 @@ $default-animation-time: .31s;
     &:not(:disabled) {
       &:hover {
         border: 1px solid var(--soft-x, var(--soft-#{$default-color}));
-        color: var(--soft-x, var(--soft-#{$default-color}));
+        color: var(--soft-y, var(--soft-x, var(--soft-#{$default-color})));
       }
 
       &:focus {
         border: 1px solid var(--hard-x, var(--hard-#{$default-color}));
-        color: var(--hard-x, var(--hard-#{$default-color}));
+        color: var(--hard-y, var(--hard-x, var(--hard-#{$default-color})));
       }
     }
 

package/dist/cjs/f/FormInput/FormInput.js

@@ -83,6 +83,12 @@ const FormInput = _ref => {
       disabled: disabled
     }, otherProps));
   }
+  if (type === 'editor') {
+    return /*#__PURE__*/React.createElement(_fields.EditorInput, _extends({
+      className: newClassName,
+      disabled: disabled
+    }, otherProps));
+  }
   if (extraTypes?.[type]) {
     const Component = extraTypes[type];
     return /*#__PURE__*/React.createElement(Component, _extends({

package/dist/cjs/f/common/Description/Description.js

@@ -32,13 +32,14 @@ const Description = _ref => {
   (0, React.useInsertionEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
-  const [field, meta] = (0, _formik.useField)(name);
-  if (description || (meta.touched || field.value) && meta.error) {
+  const [, meta] = (0, _formik.useField)(name);
+  const hasError = meta.touched && meta.error;
+  if (hasError || description) {
     return /*#__PURE__*/React.createElement("div", {
       id: id,
-      className: [baseClassName, componentClassName, userClassName, meta.error ? 'x-error' : `x-${color}`].filter(e => e).join(' '),
+      className: [baseClassName, componentClassName, userClassName, hasError ? 'x-error' : `x-${color}`].filter(e => e).join(' '),
       style: style
-    }, meta.error || description);
+    }, hasError ? meta.error : description);
   }
   return null;
 };

package/dist/cjs/f/fields/ChoicesInput/styles.scss

@@ -36,7 +36,7 @@ $disabled-background: var(--background-inputs-30);
 
         input {
           opacity: 0;
-          position: absolute;
+          position: fixed;
           visibility: none;
           z-index: -1;
         }

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

@@ -57,7 +57,38 @@ const EditorInput = _ref => {
   const formik = (0, _formik.useFormikContext)();
   const setInitialValue = () => {
     const value = formik.values[name];
-    return value || undefined;
+    try {
+      JSON.parse(value);
+      return value;
+    } catch {
+      const defaultValue = {
+        root: {
+          children: [{
+            children: [{
+              detail: 0,
+              format: 0,
+              mode: 'normal',
+              style: '',
+              text: '',
+              type: 'text',
+              version: 1
+            }],
+            direction: 'ltr',
+            format: '',
+            indent: 0,
+            type: 'paragraph',
+            version: 1
+          }],
+          direction: 'ltr',
+          format: '',
+          indent: 0,
+          type: 'root',
+          version: 1
+        }
+      };
+      defaultValue.root.children[0].children[0].text = value;
+      return JSON.stringify(defaultValue);
+    }
   };
   const onChange = state => {
     formik.setValues({

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

@@ -11,6 +11,7 @@ var _selection = require("@lexical/selection");
 var _link = require("@lexical/link");
 var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
 var _utils = require("@lexical/utils");
+var _ = require("../../../..");
 var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -35,6 +36,8 @@ const getSelectedNode = selection => {
   }
   return (0, _selection.$isAtNodeEnd)(anchor) ? focusNode : anchorNode;
 };
+const defaultColor = 'var(--paragraph)';
+const colorOptions = ['red', 'blue', 'green', 'yellow', 'orange', 'purple', 'pink', 'brown'];
 const Toolbar = () => {
   const [editor] = (0, _LexicalComposerContext.useLexicalComposerContext)();
   const [isBold, setIsBold] = (0, React.useState)(false);
@@ -43,6 +46,8 @@ const Toolbar = () => {
   const [blockType, setBlockType] = (0, React.useState)('paragraph');
   const [isLink, setIsLink] = (0, React.useState)(false);
   const [isUnderline, setIsUnderline] = (0, React.useState)(false);
+  const [color, setColor] = (0, React.useState)(defaultColor);
+  const colorMenuRef = (0, React.useRef)(false);
   const formatBulletList = () => {
     if (blockType !== 'ul') {
       editor.dispatchCommand(_list.INSERT_UNORDERED_LIST_COMMAND);
@@ -81,6 +86,18 @@ const Toolbar = () => {
         setBlockType(element);
       }
 
+      // Check nodes for color
+      const nodes = selection.getNodes().filter(node => node.getType() === 'text');
+      nodes.forEach(node => {
+        const style = node.getStyle();
+        const colorProperty = style.match(/color: ([^;]+)/);
+        if (colorProperty) {
+          setColor(colorProperty[1]);
+          return;
+        }
+        setColor(false);
+      });
+
       // Check selection text styles
       setIsBold(selection.hasFormat('bold'));
       setIsItalic(selection.hasFormat('italic'));
@@ -98,6 +115,22 @@ const Toolbar = () => {
       }
     }
   }, [editor]);
+  const UPDATE_COLOR_COMMAND = (0, _lexical.createCommand)();
+  editor.registerCommand(UPDATE_COLOR_COMMAND, payload => {
+    const selection = (0, _lexical.$getSelection)();
+    const nodes = selection?.extract().filter(node => node.getType() === 'text');
+    nodes?.forEach(node => {
+      const style = node.getStyle();
+      const colorProperty = style?.match(/color: ([^;]+)/);
+      if (colorProperty && color !== payload) {
+        node.setStyle(style.replace(colorProperty[0], `color: ${payload}`));
+      } else if (colorProperty) {
+        node.setStyle(`color: ${defaultColor}`);
+      } else {
+        node.setStyle(`color: ${payload}`);
+      }
+    });
+  }, _lexical.COMMAND_PRIORITY_NORMAL);
   (0, React.useEffect)(() => (0, _utils.mergeRegister)(editor.registerUpdateListener(_ref => {
     let {
       editorState
@@ -106,6 +139,10 @@ const Toolbar = () => {
       updateToolbar();
     });
   })), [updateToolbar, editor]);
+  const dispatchUpdateColor = (0, React.useCallback)((e, payload) => {
+    e.stopPropagation();
+    editor.dispatchCommand(UPDATE_COLOR_COMMAND, payload);
+  }, [editor]);
   return /*#__PURE__*/React.createElement("div", {
     className: `${baseClassName} ${componentClassName}`
   }, /*#__PURE__*/React.createElement("div", {
@@ -135,6 +172,33 @@ const Toolbar = () => {
   }, /*#__PURE__*/React.createElement("span", {
     className: "icon"
   }, "?")), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: color && color !== defaultColor ? 'active color-menu-button' : 'color-menu-button',
+    onClick: () => editor.dispatchCommand(UPDATE_COLOR_COMMAND, color !== defaultColor ? defaultColor : color),
+    ref: colorMenuRef,
+    style: {
+      position: 'relative'
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "icon",
+    style: {
+      color
+    }
+  }, "Q"), /*#__PURE__*/React.createElement(_.Popover, {
+    parentRef: colorMenuRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "color-menu"
+  }, colorOptions.map(option => /*#__PURE__*/React.createElement("span", {
+    role: "button",
+    className: "icon color-option",
+    style: {
+      color: option
+    },
+    onClick: e => dispatchUpdateColor(e, option),
+    onKeyDown: e => dispatchUpdateColor(e, option),
+    tabIndex: 0,
+    key: option
+  }, "o"))))), /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: isLink ? 'active' : undefined,
     onClick: () => formatLink()

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

@@ -13,7 +13,9 @@ $default-border: var(--theme-default-input-border);
 $focus-border: var(--theme-focus-input-border);
 $active-background: var(--hard-background-inputs);
 $default-background: var(--background-inputs);
+$default-icon-color: var(--on-background-inputs);
 $disabled-background: var(--background-inputs-30);
+$default-color-menu-padding: .5em .25em;
 
 .#{bem.$base}.editor-input {
   &.#{bem.$base}.input-wrapper {
@@ -29,6 +31,7 @@ $disabled-background: var(--background-inputs-30);
         > button {
           background: $default-background;
           border: $default-border;
+          color: $default-icon-color;
           padding: $default-padding;
 
           &.active {
@@ -60,6 +63,31 @@ $disabled-background: var(--background-inputs-30);
       }
     }
 
+    .color-menu-button {
+      &:hover {
+        > .#{bem.$base}.popover {
+          display: block;
+        }
+      }
+
+      > .#{bem.$base}.popover {
+        padding: $default-color-menu-padding;
+
+        .color-menu {
+          display: flex;
+          flex-wrap: wrap;
+          gap: calc($default-gap / 2);
+          justify-content: center;
+          max-width: 10em;
+          min-width: 5em;
+        }
+
+        .color-option:hover {
+          opacity: .5;
+        }
+      }
+    }
+
     > .content-editable {
       background: $default-background;
       border: $default-border;

package/dist/es/b/Button/Button.js

@@ -20,6 +20,7 @@ const Button = ({
   children,
   isLoading,
   color,
+  textColor,
   isCompact,
   isGhost,
   isSimple,
@@ -36,7 +37,7 @@ const Button = ({
   }, children) : children;
   return /*#__PURE__*/React.createElement("button", _extends({
     id: id,
-    className: [baseClassName, componentClassName, userClassName, `x-${color}`, isGhost && styleNames.modifierGhost, isCompact && styleNames.modifierCompact, isSimple && styleNames.modifierSimple, isGradient && styleNames.modifierGradient, isSpaced && styleNames.modifierSpaced, !isLoading && arrowDirection && `arrow-${arrowDirection}`].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, `x-${color}`, textColor && `y-${textColor}`, isGhost && styleNames.modifierGhost, isCompact && styleNames.modifierCompact, isSimple && styleNames.modifierSimple, isGradient && styleNames.modifierGradient, isSpaced && styleNames.modifierSpaced, !isLoading && arrowDirection && `arrow-${arrowDirection}`].filter(e => e).join(' '),
     style: style,
     type: "button"
   }, otherProps), isLoading ? /*#__PURE__*/React.createElement(LoadingCircle, {

package/dist/es/b/Button/styles.scss

@@ -92,7 +92,7 @@ $default-animation-time: .31s;
   &.#{bem.$modifier-ghost} {
     background: transparent;
     border: 1px solid var(--x, var(--#{$default-color}));
-    color: var(--x, var(--#{$default-color}));
+    color: var(--y, var(--x, var(--#{$default-color})));
 
     &:hover,
     &:focus,
@@ -103,12 +103,12 @@ $default-animation-time: .31s;
     &:not(:disabled) {
       &:hover {
         border: 1px solid var(--soft-x, var(--soft-#{$default-color}));
-        color: var(--soft-x, var(--soft-#{$default-color}));
+        color: var(--soft-y, var(--soft-x, var(--soft-#{$default-color})));
       }
 
       &:focus {
         border: 1px solid var(--hard-x, var(--hard-#{$default-color}));
-        color: var(--hard-x, var(--hard-#{$default-color}));
+        color: var(--hard-y, var(--hard-x, var(--hard-#{$default-color})));
       }
     }
 

package/dist/es/f/FormInput/FormInput.js

@@ -3,7 +3,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import * as React from 'react';
 import { memo, useInsertionEffect } from 'react';
 import PropTypes from 'prop-types';
-import { TextInput, TextareaInput, ChoicesInput, SelectInput, QueryCombobox, QuerySelect, RatingsInput, Checkbox, QueryChoices, LinkInput } from "../fields";
+import { TextInput, TextareaInput, ChoicesInput, SelectInput, QueryCombobox, QuerySelect, RatingsInput, Checkbox, QueryChoices, LinkInput, EditorInput } from "../fields";
 
 // Local Definitions
 
@@ -78,6 +78,12 @@ const FormInput = ({
       disabled: disabled
     }, otherProps));
   }
+  if (type === 'editor') {
+    return /*#__PURE__*/React.createElement(EditorInput, _extends({
+      className: newClassName,
+      disabled: disabled
+    }, otherProps));
+  }
   if (extraTypes?.[type]) {
     const Component = extraTypes[type];
     return /*#__PURE__*/React.createElement(Component, _extends({

package/dist/es/f/common/Description/Description.js

@@ -25,13 +25,14 @@ const Description = ({
   useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
-  const [field, meta] = useField(name);
-  if (description || (meta.touched || field.value) && meta.error) {
+  const [, meta] = useField(name);
+  const hasError = meta.touched && meta.error;
+  if (hasError || description) {
     return /*#__PURE__*/React.createElement("div", {
       id: id,
-      className: [baseClassName, componentClassName, userClassName, meta.error ? 'x-error' : `x-${color}`].filter(e => e).join(' '),
+      className: [baseClassName, componentClassName, userClassName, hasError ? 'x-error' : `x-${color}`].filter(e => e).join(' '),
       style: style
-    }, meta.error || description);
+    }, hasError ? meta.error : description);
   }
   return null;
 };

package/dist/es/f/fields/ChoicesInput/styles.scss

@@ -36,7 +36,7 @@ $disabled-background: var(--background-inputs-30);
 
         input {
           opacity: 0;
-          position: absolute;
+          position: fixed;
           visibility: none;
           z-index: -1;
         }

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

@@ -53,7 +53,38 @@ const EditorInput = ({
   const formik = useFormikContext();
   const setInitialValue = () => {
     const value = formik.values[name];
-    return value || undefined;
+    try {
+      JSON.parse(value);
+      return value;
+    } catch {
+      const defaultValue = {
+        root: {
+          children: [{
+            children: [{
+              detail: 0,
+              format: 0,
+              mode: 'normal',
+              style: '',
+              text: '',
+              type: 'text',
+              version: 1
+            }],
+            direction: 'ltr',
+            format: '',
+            indent: 0,
+            type: 'paragraph',
+            version: 1
+          }],
+          direction: 'ltr',
+          format: '',
+          indent: 0,
+          type: 'root',
+          version: 1
+        }
+      };
+      defaultValue.root.children[0].children[0].text = value;
+      return JSON.stringify(defaultValue);
+    }
   };
   const onChange = state => {
     formik.setValues({

package/dist/es/f/fields/EditorInput/common/Toolbar.js

@@ -1,12 +1,13 @@
 /* eslint-disable import/no-extraneous-dependencies -- required here */
 import * as React from 'react';
-import { useEffect, useState, useCallback } from 'react';
-import { $getSelection, $isRangeSelection, FORMAT_TEXT_COMMAND, FORMAT_ELEMENT_COMMAND, UNDO_COMMAND, REDO_COMMAND } from 'lexical';
+import { useEffect, useState, useCallback, useRef } from 'react';
+import { $getSelection, $isRangeSelection, FORMAT_TEXT_COMMAND, FORMAT_ELEMENT_COMMAND, UNDO_COMMAND, REDO_COMMAND, COMMAND_PRIORITY_NORMAL, createCommand } from 'lexical';
 import { INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND, $isListNode, ListNode } from '@lexical/list';
 import { $isAtNodeEnd } from '@lexical/selection';
 import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { mergeRegister, $getNearestNodeOfType } from '@lexical/utils';
+import { Popover } from "../../../..";
 import styleNames from '@pareto-engineering/bem/exports';
 const baseClassName = styleNames.base;
 const componentClassName = 'toolbar';
@@ -26,6 +27,8 @@ const getSelectedNode = selection => {
   }
   return $isAtNodeEnd(anchor) ? focusNode : anchorNode;
 };
+const defaultColor = 'var(--paragraph)';
+const colorOptions = ['red', 'blue', 'green', 'yellow', 'orange', 'purple', 'pink', 'brown'];
 const Toolbar = () => {
   const [editor] = useLexicalComposerContext();
   const [isBold, setIsBold] = useState(false);
@@ -34,6 +37,8 @@ const Toolbar = () => {
   const [blockType, setBlockType] = useState('paragraph');
   const [isLink, setIsLink] = useState(false);
   const [isUnderline, setIsUnderline] = useState(false);
+  const [color, setColor] = useState(defaultColor);
+  const colorMenuRef = useRef(false);
   const formatBulletList = () => {
     if (blockType !== 'ul') {
       editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND);
@@ -72,6 +77,18 @@ const Toolbar = () => {
         setBlockType(element);
       }
 
+      // Check nodes for color
+      const nodes = selection.getNodes().filter(node => node.getType() === 'text');
+      nodes.forEach(node => {
+        const style = node.getStyle();
+        const colorProperty = style.match(/color: ([^;]+)/);
+        if (colorProperty) {
+          setColor(colorProperty[1]);
+          return;
+        }
+        setColor(false);
+      });
+
       // Check selection text styles
       setIsBold(selection.hasFormat('bold'));
       setIsItalic(selection.hasFormat('italic'));
@@ -89,6 +106,22 @@ const Toolbar = () => {
       }
     }
   }, [editor]);
+  const UPDATE_COLOR_COMMAND = createCommand();
+  editor.registerCommand(UPDATE_COLOR_COMMAND, payload => {
+    const selection = $getSelection();
+    const nodes = selection?.extract().filter(node => node.getType() === 'text');
+    nodes?.forEach(node => {
+      const style = node.getStyle();
+      const colorProperty = style?.match(/color: ([^;]+)/);
+      if (colorProperty && color !== payload) {
+        node.setStyle(style.replace(colorProperty[0], `color: ${payload}`));
+      } else if (colorProperty) {
+        node.setStyle(`color: ${defaultColor}`);
+      } else {
+        node.setStyle(`color: ${payload}`);
+      }
+    });
+  }, COMMAND_PRIORITY_NORMAL);
   useEffect(() => mergeRegister(editor.registerUpdateListener(({
     editorState
   }) => {
@@ -96,6 +129,10 @@ const Toolbar = () => {
       updateToolbar();
     });
   })), [updateToolbar, editor]);
+  const dispatchUpdateColor = useCallback((e, payload) => {
+    e.stopPropagation();
+    editor.dispatchCommand(UPDATE_COLOR_COMMAND, payload);
+  }, [editor]);
   return /*#__PURE__*/React.createElement("div", {
     className: `${baseClassName} ${componentClassName}`
   }, /*#__PURE__*/React.createElement("div", {
@@ -125,6 +162,33 @@ const Toolbar = () => {
   }, /*#__PURE__*/React.createElement("span", {
     className: "icon"
   }, "?")), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: color && color !== defaultColor ? 'active color-menu-button' : 'color-menu-button',
+    onClick: () => editor.dispatchCommand(UPDATE_COLOR_COMMAND, color !== defaultColor ? defaultColor : color),
+    ref: colorMenuRef,
+    style: {
+      position: 'relative'
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "icon",
+    style: {
+      color
+    }
+  }, "Q"), /*#__PURE__*/React.createElement(Popover, {
+    parentRef: colorMenuRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "color-menu"
+  }, colorOptions.map(option => /*#__PURE__*/React.createElement("span", {
+    role: "button",
+    className: "icon color-option",
+    style: {
+      color: option
+    },
+    onClick: e => dispatchUpdateColor(e, option),
+    onKeyDown: e => dispatchUpdateColor(e, option),
+    tabIndex: 0,
+    key: option
+  }, "o"))))), /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: isLink ? 'active' : undefined,
     onClick: () => formatLink()

package/dist/es/f/fields/EditorInput/styles.scss

@@ -13,7 +13,9 @@ $default-border: var(--theme-default-input-border);
 $focus-border: var(--theme-focus-input-border);
 $active-background: var(--hard-background-inputs);
 $default-background: var(--background-inputs);
+$default-icon-color: var(--on-background-inputs);
 $disabled-background: var(--background-inputs-30);
+$default-color-menu-padding: .5em .25em;
 
 .#{bem.$base}.editor-input {
   &.#{bem.$base}.input-wrapper {
@@ -29,6 +31,7 @@ $disabled-background: var(--background-inputs-30);
         > button {
           background: $default-background;
           border: $default-border;
+          color: $default-icon-color;
           padding: $default-padding;
 
           &.active {
@@ -60,6 +63,31 @@ $disabled-background: var(--background-inputs-30);
       }
     }
 
+    .color-menu-button {
+      &:hover {
+        > .#{bem.$base}.popover {
+          display: block;
+        }
+      }
+
+      > .#{bem.$base}.popover {
+        padding: $default-color-menu-padding;
+
+        .color-menu {
+          display: flex;
+          flex-wrap: wrap;
+          gap: calc($default-gap / 2);
+          justify-content: center;
+          max-width: 10em;
+          min-width: 5em;
+        }
+
+        .color-option:hover {
+          opacity: .5;
+        }
+      }
+    }
+
     > .content-editable {
       background: $default-background;
       border: $default-border;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "4.0.0-alpha.41",
+  "version": "4.0.0-alpha.43",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -51,7 +51,7 @@
   },
   "dependencies": {
     "@lexical/react": "^0.11.3",
-    "@pareto-engineering/assets": "^4.0.0-alpha.40",
+    "@pareto-engineering/assets": "^4.0.0-alpha.43",
     "@pareto-engineering/bem": "^4.0.0-alpha.20",
     "@pareto-engineering/styles": "^4.0.0-alpha.39",
     "@pareto-engineering/utils": "^4.0.0-alpha.33",
@@ -70,5 +70,5 @@
     "relay-test-utils": "^15.0.0"
   },
   "browserslist": "> 2%",
-  "gitHead": "d02bcd514202331d31637ec62653fb2ce4f33c93"
+  "gitHead": "7923a68d7f59211ebbac6f90efaaaf89f744fb17"
 }

package/src/stories/a/AppContext.stories.jsx

@@ -22,7 +22,7 @@ export const Base = () => (
     config={{
       APP:{
         NAME         :'Pareto',
-        CANONICAL    :'https://hellopareto.com',
+        CANONICAL    :'https://pareto.ai',
         SUPPORT_EMAIL:'support@hellopareto.com',
         TITLE_SUFFIX :'| Pareto',
       },
@@ -32,7 +32,7 @@ export const Base = () => (
         TWITTER  :'https://www.twitter.com/hellopareto',
       },
       EXTRA:{
-        SURVEY:'https://survey.hellopareto.com',
+        SURVEY:'https://survey.pareto.ai',
       },
     }}
 

package/src/stories/b/SocialMediaButton.stories.jsx

@@ -33,7 +33,7 @@ Base.args = {
   config:{
     SITE:{
       NAME         :'Pareto',
-      CANONICAL    :'https://hellopareto.com',
+      CANONICAL    :'https://pareto.ai',
       SUPPORT_EMAIL:'support@hellopareto.com',
       TITLE_SUFFIX :'| Pareto',
     },
@@ -44,7 +44,7 @@ Base.args = {
       LINKEDIN :'https://www.linkedin.com/company/hellopareto',
     },
     EXTRA:{
-      SURVEY:'https://survey.hellopareto.com',
+      SURVEY:'https://survey.pareto.ai',
     },
   },
 }

package/src/stories/colors.js

@@ -51,6 +51,8 @@ const UI = [
   'transparent',
   'highlighted',
   'disabled',
+  'ui-main',
+  'ui-main-2',
 ]
 
 const SM = [

package/src/stories/f/EditorInput.stories.jsx

@@ -14,7 +14,7 @@ export default {
   decorators:[
     (storyfn) => (
       <Formik
-        initialValues={{ feedback: '' }}
+        initialValues={{ instructions: '' }}
       >
         <Form>
           { storyfn() }