@pareto-engineering/design-system 4.0.0-alpha.70 → 4.0.0-alpha.72

package/dist/cjs/{c/ContentSlides/common/Slide/Slide.js → a/LexicalPreview/LexicalPreview.js}

@@ -5,49 +5,64 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
+var _LexicalComposer = require("@lexical/react/LexicalComposer");
+var _LexicalRichTextPlugin = require("@lexical/react/LexicalRichTextPlugin");
+var _LexicalContentEditable = require("@lexical/react/LexicalContentEditable");
+var _link = require("@lexical/link");
+var _list = require("@lexical/list");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
-var _useContentSlides = _interopRequireDefault(require("../../useContentSlides"));
+require("./styles.scss");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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 && Object.prototype.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 = styleNames.base
-
-const componentClassName = 'slide';
+const baseClassName = _exports.default.base;
+const componentClassName = 'lexical-preview';
 
 /**
  * This is the component description.
  */
-const Slide = _ref => {
+const LexicalPreview = _ref => {
   let {
     id,
     className: userClassName,
     style,
-    children,
-    index
+    nodes,
+    color
     // ...otherProps
   } = _ref;
-  const {
-    currentStepIndex
-  } = (0, _useContentSlides.default)();
-  const isActive = currentStepIndex === index;
-  return /*#__PURE__*/React.createElement("div", {
+  const initialConfig = {
+    nameSpace: id,
+    editable: false,
+    editorState: nodes,
+    theme: {
+      text: {
+        italic: 'italic',
+        strikethrough: 'strikethrough',
+        underline: 'underlined'
+      }
+    },
+    nodes: [_link.AutoLinkNode, _link.LinkNode, _list.ListNode, _list.ListItemNode]
+  };
+  return /*#__PURE__*/React.createElement(_LexicalComposer.LexicalComposer, {
+    initialConfig: initialConfig
+  }, /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [
-    // baseClassName,
-    isActive && _exports.default.modifierActive, componentClassName, userClassName].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, `y-${color}`].filter(e => e).join(' '),
     style: style
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "wrapper"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "content"
-  }, children)));
+  }, /*#__PURE__*/React.createElement(_LexicalRichTextPlugin.RichTextPlugin, {
+    contentEditable: /*#__PURE__*/React.createElement(_LexicalContentEditable.ContentEditable, {
+      id: id,
+      className: "content-editable"
+    })
+  })));
 };
-Slide.propTypes = {
+LexicalPreview.propTypes = {
   /**
    * The HTML id for this element
    */
@@ -61,15 +76,15 @@ Slide.propTypes = {
    */
   style: _propTypes.default.objectOf(_propTypes.default.string),
   /**
-   *  The children JSX
+   * Color of the text
    */
-  children: _propTypes.default.node,
+  color: _propTypes.default.string,
   /**
-   * The index of this slide
+   * The nodes to render in the form of a json string
    */
-  index: _propTypes.default.number
+  nodes: _propTypes.default.string
 };
-Slide.defaultProps = {
-  // someProp:false
+LexicalPreview.defaultProps = {
+  color: 'paragraph'
 };
-var _default = exports.default = Slide;
+var _default = exports.default = LexicalPreview;

package/dist/cjs/{c/ContentSlides/common/Sidebar → a/LexicalPreview}/index.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "Sidebar", {
+Object.defineProperty(exports, "LexicalPreview", {
   enumerable: true,
   get: function () {
-    return _Sidebar.default;
+    return _LexicalPreview.default;
   }
 });
-var _Sidebar = _interopRequireDefault(require("./Sidebar"));
+var _LexicalPreview = _interopRequireDefault(require("./LexicalPreview"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/cjs/a/LexicalPreview/styles.scss

@@ -0,0 +1,46 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+@use "@pareto-engineering/styles/src/mixins";
+@use "@pareto-engineering/styles/src/globals" as *;
+
+.#{bem.$base}.lexical-preview {
+  > .content-editable {
+    color: var(--y);
+    overflow: auto;
+
+    li:has(ol, ul) {
+      list-style-type: none;
+    }
+
+    p,
+    span,
+    strong,
+    em,
+    li {
+      &.underlined {
+        text-decoration: underline;
+
+        &.strikethrough {
+          text-decoration: underline line-through;
+        }
+      }
+
+      &.strikethrough {
+        text-decoration: line-through;
+      }
+
+      &.italic {
+        font-style: italic;
+      }
+    }
+
+    :first-child {
+      margin-top: 0;
+    }
+
+    &::placeholder {
+      color: var(--metadata);
+    }
+  }
+}

package/dist/cjs/a/People/common/Person/Person.js

@@ -31,14 +31,19 @@ const Person = _ref => {
     color
     // ...otherProps
   } = _ref;
+  const handleImageSrcError = e => {
+    e.target.onerror = null;
+    e.target.src = '/default-avatar.svg';
+  };
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName, `y-${color}`].filter(e => e).join(' '),
     style: style
   }, /*#__PURE__*/React.createElement("img", {
     className: "image v50 mr-v",
-    src: image,
-    alt: `${name}, ${role}`
+    src: image || '/default-avatar.svg',
+    alt: `${name}, ${role}`,
+    onError: handleImageSrcError
   }), /*#__PURE__*/React.createElement("div", {
     className: "details"
   }, name && /*#__PURE__*/React.createElement("p", {

package/dist/cjs/a/ProgressBar/ProgressBar.js

@@ -29,12 +29,13 @@ const ProgressBar = _ref => {
     attached,
     color,
     progress,
-    height
+    height,
+    rounded
     // ...otherProps
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [baseClassName, componentClassName, attached && _exports.default.modifierAttached, color && `x-${color}`, userClassName].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, attached && _exports.default.modifierAttached, color && `x-${color}`, userClassName, rounded && 'rounded'].filter(e => e).join(' '),
     style: {
       '--progress': progress,
       '--height': height,

package/dist/cjs/a/ProgressBar/styles.scss

@@ -5,9 +5,11 @@
 $default-height:var(--height, 1em);
 $default-border:none;//2px solid var(--grid);
 $default-transition-duration:.5s;
-$default-color:var(--x, var(--main1));
+$default-color:var(--x, var(--main));
+$default-border-radius:var(--theme-border-radius, 1.875rem);
 
 .#{bem.$base}.progress-bar {
+  background-color: var(--progress-bar-background-color);
   border: $default-border;
   height: $default-height;
   position: relative;
@@ -28,6 +30,14 @@ $default-color:var(--x, var(--main1));
     z-index: 1;
   }
 
+  &.rounded {
+    border-radius: $default-border-radius;
+
+    &::after {
+      border-radius: $default-border-radius;
+    }
+  }
+
   &.#{bem.$modifier-attached} {
     border: unset;
     border-bottom: $default-border;

package/dist/cjs/a/XMLEditor/XMLEditor.js

@@ -37,18 +37,22 @@ const XMLEditor = _ref => {
     height,
     gutterWidth,
     config,
-    onChange
+    onChange,
+    stopPropagationKeys
   } = _ref;
   const editorRef = (0, _react.useRef)();
   (0, _react.useEffect)(() => {
     const startState = _state.EditorState.create({
       doc: config,
-      extensions: [_view.keymap.of([_commands.defaultKeymap, _commands.indentWithTab]),
-      // TOFIX: Indent with tab prevents indentOnInout from working.
-      // indentOnInput(),
-      (0, _view.lineNumbers)(), (0, _language.bracketMatching)(), (0, _language.foldGutter)(), (0, _view.drawSelection)(), (0, _view.highlightActiveLine)(), (0, _view.highlightActiveLineGutter)(), (0, _view.highlightSpecialChars)(), (0, _view.dropCursor)(), (0, _view.rectangularSelection)(), (0, _view.crosshairCursor)(), (0, _langXml.xml)(), _common.theme, _state.EditorState.readOnly.of(readOnly), _view.EditorView.updateListener.of(view => {
+      extensions: [_view.keymap.of(_commands.defaultKeymap), (0, _language.indentOnInput)(), (0, _view.lineNumbers)(), (0, _language.bracketMatching)(), (0, _language.foldGutter)(), (0, _view.drawSelection)(), (0, _view.highlightActiveLine)(), (0, _view.highlightActiveLineGutter)(), (0, _view.highlightSpecialChars)(), (0, _view.dropCursor)(), (0, _view.rectangularSelection)(), (0, _view.crosshairCursor)(), (0, _langXml.xml)(), _common.theme, _state.EditorState.readOnly.of(readOnly), _view.EditorView.updateListener.of(view => {
         onChange(view);
         // view.state.doc.toString() to receive the current content in the editor.
+      }), _view.EditorView.domEventHandlers({
+        keydown(e) {
+          if (stopPropagationKeys?.includes(e.key)) {
+            e.stopPropagation();
+          }
+        }
       })]
     });
     const view = new _view.EditorView({
@@ -102,7 +106,11 @@ XMLEditor.propTypes = {
   /**
    * The width of the gutter.
    */
-  gutterWidth: _propTypes.default.string
+  gutterWidth: _propTypes.default.string,
+  /**
+   * The keys to stop propagation on.
+   */
+  stopPropagationKeys: _propTypes.default.arrayOf(_propTypes.default.string)
 };
 XMLEditor.defaultProps = {
   config: `<View>

package/dist/cjs/a/index.js

@@ -75,6 +75,12 @@ Object.defineProperty(exports, "Label", {
     return _Label.Label;
   }
 });
+Object.defineProperty(exports, "LexicalPreview", {
+  enumerable: true,
+  get: function () {
+    return _LexicalPreview.LexicalPreview;
+  }
+});
 Object.defineProperty(exports, "LoadingCircle", {
   enumerable: true,
   get: function () {
@@ -202,4 +208,5 @@ var _AnimatedGradient = require("./AnimatedGradient");
 var _TextSteps = require("./TextSteps");
 var _Removable = require("./Removable");
 var _ToggleSwitch = require("./ToggleSwitch");
-var _XMLEditor = require("./XMLEditor");
+var _XMLEditor = require("./XMLEditor");
+var _LexicalPreview = require("./LexicalPreview");

package/dist/cjs/b/ExpandableLexicalPreview/ExpandableLexicalPreview.js

@@ -0,0 +1,125 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _LexicalComposer = require("@lexical/react/LexicalComposer");
+var _LexicalRichTextPlugin = require("@lexical/react/LexicalRichTextPlugin");
+var _LexicalContentEditable = require("@lexical/react/LexicalContentEditable");
+var _link = require("@lexical/link");
+var _list = require("@lexical/list");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+var _designSystem = require("@pareto-engineering/design-system");
+require("./styles.scss");
+var _common = require("./common");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 && Object.prototype.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 = 'expandable-lexical-preview';
+
+/**
+ * This is the component description.
+ */
+const ExpandableLexicalPreview = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    nodes,
+    color,
+    resize,
+    title
+    // ...otherProps
+  } = _ref;
+  const initialConfig = {
+    nameSpace: id,
+    editable: false,
+    editorState: nodes,
+    theme: {
+      text: {
+        italic: 'italic',
+        strikethrough: 'strikethrough',
+        underline: 'underlined'
+      }
+    },
+    nodes: [_link.AutoLinkNode, _link.LinkNode, _list.ListNode, _list.ListItemNode]
+  };
+  const [isExpanded, setIsExpanded] = (0, _react.useState)(false);
+  const handleButtonClick = () => {
+    setIsExpanded(!isExpanded);
+  };
+  const Content = (0, _react.useMemo)(() => /*#__PURE__*/React.createElement("div", {
+    className: "lexical-content"
+  }, /*#__PURE__*/React.createElement(_LexicalRichTextPlugin.RichTextPlugin, {
+    contentEditable: /*#__PURE__*/React.createElement(_LexicalContentEditable.ContentEditable, {
+      id: id,
+      className: "content-editable"
+    })
+  }), /*#__PURE__*/React.createElement(_common.ExpandButton, {
+    title: title,
+    onResolve: handleButtonClick
+  })), [id]);
+  return /*#__PURE__*/React.createElement(_LexicalComposer.LexicalComposer, {
+    initialConfig: initialConfig
+  }, /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, `y-${color}`, isExpanded && 'collapsed'].filter(e => e).join(' '),
+    style: {
+      '--resize': resize,
+      ...style
+    }
+  }, typeof title === 'string' ? /*#__PURE__*/React.createElement("p", {
+    className: "title h2"
+  }, title) : title, isExpanded && /*#__PURE__*/React.createElement(_designSystem.Button, {
+    onClick: handleButtonClick,
+    color: "background-far",
+    isCompact: true
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ai-icon c-x x-paragraph"
+  }, "C")), !isExpanded && Content));
+};
+ExpandableLexicalPreview.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),
+  /**
+   * Color of the text
+   */
+  color: _propTypes.default.string,
+  /**
+   * The nodes to render in the form of a json string
+   */
+  nodes: _propTypes.default.string,
+  /**
+   * The resize property of the textarea
+   */
+  resize: _propTypes.default.string,
+  /**
+   * The title for the preview.
+   */
+  title: _propTypes.default.string
+};
+ExpandableLexicalPreview.defaultProps = {
+  color: 'paragraph',
+  resize: 'vertical'
+};
+var _default = exports.default = ExpandableLexicalPreview;

package/dist/cjs/b/ExpandableLexicalPreview/common/ExpandButton/ExpandButton.js

@@ -0,0 +1,112 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _html = require("@lexical/html");
+var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+var _designSystem = require("@pareto-engineering/design-system");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 && Object.prototype.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 = 'expand-button';
+
+/**
+ * This is the component description.
+ */
+const ExpandButton = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    onResolve,
+    title
+    // ...otherProps
+  } = _ref;
+  const [editor] = (0, _LexicalComposerContext.useLexicalComposerContext)();
+  return /*#__PURE__*/React.createElement(_designSystem.Button, {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, 'ai-icon'].filter(e => e).join(' '),
+    style: style,
+    color: "background-far",
+    isCompact: true,
+    onClick: () => {
+      editor.getEditorState().read(() => {
+        const rawHtml = (0, _html.$generateHtmlFromNodes)(editor);
+        const preview = window.open('', '_blank', 'width=600,height=600');
+        preview.document.write(`<html>
+            <title>${title || 'Preview'}</title>
+            <style>
+              li:has(ol, ul) {
+                list-style-type: none;
+              }
+
+              p,
+              span,
+              strong,
+              em,
+              li {
+                &.underlined {
+                  text-decoration: underline;
+
+                  &.strikethrough {
+                    text-decoration: underline line-through;
+                  }
+                }
+
+                &.strikethrough {
+                  text-decoration: line-through;
+                }
+
+                &.italic {
+                  font-style: italic;
+                }
+              }
+
+              :first-child {
+                margin-top: 0;
+              }
+
+              &::placeholder {
+                color: #abadb3;
+              }
+            </style>
+            <body>
+            <style></style>
+            ${rawHtml}
+            <button onclick="window.close()">Close Preview</button>
+            </body></html>`);
+      });
+      onResolve();
+    }
+  }, "D");
+};
+ExpandButton.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)
+};
+ExpandButton.defaultProps = {
+  // color: 'paragraph',
+  // resize: 'vertical',
+};
+var _default = exports.default = ExpandButton;

package/dist/cjs/{c/ContentSlides/common/Navigator → b/ExpandableLexicalPreview/common/ExpandButton}/index.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "Navigator", {
+Object.defineProperty(exports, "ExpandButton", {
   enumerable: true,
   get: function () {
-    return _Navigator.default;
+    return _ExpandButton.default;
   }
 });
-var _Navigator = _interopRequireDefault(require("./Navigator"));
+var _ExpandButton = _interopRequireDefault(require("./ExpandButton"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/cjs/b/ExpandableLexicalPreview/common/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ExpandButton", {
+  enumerable: true,
+  get: function () {
+    return _ExpandButton.ExpandButton;
+  }
+});
+var _ExpandButton = require("./ExpandButton");

package/dist/cjs/b/ExpandableLexicalPreview/index.js

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

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

@@ -0,0 +1,84 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+/* stylelint-disable max-nesting-depth -- required */
+
+@use "@pareto-engineering/bem";
+@use "@pareto-engineering/styles/src/mixins";
+@use "@pareto-engineering/styles/src/globals" as *;
+
+.#{bem.$base}.expandable-lexical-preview {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  gap: var(--gap);
+  width: 100%;
+
+  &.collapsed {
+    flex-direction: row;
+  }
+
+  > .title {
+    margin: 0;
+  }
+
+
+  > .#{bem.$base}.button {
+    align-items: center;
+    border: 1px solid var(--outline-inputs);
+    display: flex;
+  }
+
+  > .lexical-content {
+    position: relative;
+
+    > .content-editable {
+      background: var(--background-inputs);
+      border: 1px solid var(--outline-inputs);
+      border-radius: var(--theme-default-border-radius);
+      color: var(--y);
+      overflow: auto;
+      padding: var(--gap);
+      resize: var(--resize);
+
+      li:has(ol, ul) {
+        list-style-type: none;
+      }
+
+      p,
+      span,
+      strong,
+      em,
+      li {
+        &.underlined {
+          text-decoration: underline;
+
+          &.strikethrough {
+            text-decoration: underline line-through;
+          }
+        }
+
+        &.strikethrough {
+          text-decoration: line-through;
+        }
+
+        &.italic {
+          font-style: italic;
+        }
+      }
+
+      :first-child {
+        margin-top: 0;
+      }
+
+      &::placeholder {
+        color: var(--metadata);
+      }
+    }
+
+    > .#{bem.$base}.expand-button {
+      border: 1px solid var(--outline-inputs);
+      position: absolute;
+      right: 1em;
+      top: 1em;
+    }
+  }
+}