@pareto-engineering/design-system 4.0.0-alpha.63 → 4.0.0-alpha.64

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

@@ -1,197 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var React = _react;
-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 _LexicalListPlugin = require("@lexical/react/LexicalListPlugin");
-var _LexicalTabIndentationPlugin = require("@lexical/react/LexicalTabIndentationPlugin");
-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 _common = require("../../../common");
-var _common2 = 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 = 'editor-input';
-
-/**
- * This is the component description.
- */
-const EditorInput = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    name,
-    label,
-    // validate,
-    resize,
-    color,
-    rows,
-    optional,
-    labelColor,
-    description,
-    disabled,
-    showDebugger
-    // ...otherProps
-  } = _ref;
-  (0, _react.useInsertionEffect)(() => {
-    Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
-  }, []);
-  const formik = (0, _formik.useFormikContext)();
-  const setInitialValue = () => {
-    const value = formik.values[name];
-    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({
-      ...formik.values,
-      [name]: JSON.stringify(state)
-    });
-  };
-  const initialConfig = {
-    nameSpace: name,
-    editable: !disabled,
-    editorState: setInitialValue(),
-    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, componentClassName, userClassName, `y-${color}`, disabled && 'disabled'].filter(e => e).join(' '),
-    style: {
-      ...style,
-      '--resize': resize,
-      '--rows': `${rows}em`
-    }
-  }, /*#__PURE__*/React.createElement(_common.FormLabelV2, {
-    name: name,
-    color: labelColor,
-    optional: optional
-  }, label), !disabled && /*#__PURE__*/React.createElement(_common2.Toolbar, null), /*#__PURE__*/React.createElement(_LexicalRichTextPlugin.RichTextPlugin, {
-    contentEditable: /*#__PURE__*/React.createElement(_LexicalContentEditable.ContentEditable, {
-      id: name,
-      className: "content-editable"
-    })
-  }), /*#__PURE__*/React.createElement(_LexicalOnChangePlugin.OnChangePlugin, {
-    onChange: onChange
-  }), /*#__PURE__*/React.createElement(_LexicalLinkPlugin.LinkPlugin, null), /*#__PURE__*/React.createElement(_LexicalListPlugin.ListPlugin, null), /*#__PURE__*/React.createElement(_LexicalTabIndentationPlugin.TabIndentationPlugin, null), /*#__PURE__*/React.createElement(_LexicalHistoryPlugin.HistoryPlugin, null), /*#__PURE__*/React.createElement(_common.FormDescriptionV2, {
-    className: "s-1",
-    description: description,
-    name: name
-  }), showDebugger && /*#__PURE__*/React.createElement(_common2.TreeViewPlugin, null)));
-};
-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 input value validator function
-   */
-  // validate:PropTypes.func,
-
-  /**
-   * 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'])
-};
-EditorInput.defaultProps = {
-  rows: 10,
-  disabled: false,
-  color: 'paragraph',
-  resize: 'vertical'
-};
-var _default = exports.default = /*#__PURE__*/(0, _react.memo)(EditorInput);

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

@@ -1,257 +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 _list = require("@lexical/list");
-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(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; }
-/* eslint-disable import/no-extraneous-dependencies -- required here */
-
-const baseClassName = _exports.default.base;
-const componentClassName = 'toolbar';
-const getSelectedNode = selection => {
-  const {
-    anchor,
-    focus
-  } = selection;
-  const anchorNode = selection.anchor.getNode();
-  const focusNode = selection.focus.getNode();
-  if (anchorNode === focusNode) {
-    return anchorNode;
-  }
-  const isBackward = selection.isBackward();
-  if (isBackward) {
-    return (0, _selection.$isAtNodeEnd)(focus) ? anchorNode : focusNode;
-  }
-  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);
-  const [isItalic, setIsItalic] = (0, _react.useState)(false);
-  const [isStrikethrough, setIsStrikethrough] = (0, _react.useState)(false);
-  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);
-    } else {
-      editor.dispatchCommand(_list.REMOVE_LIST_COMMAND);
-    }
-  };
-  const formatNumberedList = () => {
-    if (blockType !== 'ol') {
-      editor.dispatchCommand(_list.INSERT_ORDERED_LIST_COMMAND);
-    } else {
-      editor.dispatchCommand(_list.REMOVE_LIST_COMMAND);
-    }
-  };
-  const formatLink = (0, _react.useCallback)(() => {
-    if (!isLink) {
-      // eslint-disable-next-line no-alert
-      const path = prompt('Enter the full URL. Ex: https://www.example.com');
-      editor.dispatchCommand(_link.TOGGLE_LINK_COMMAND, path);
-    } else {
-      editor.dispatchCommand(_link.TOGGLE_LINK_COMMAND, null);
-    }
-  }, [editor, isLink]);
-  const updateToolbar = (0, _react.useCallback)(() => {
-    const selection = (0, _lexical.$getSelection)();
-
-    // Check list selection
-    if ((0, _lexical.$isRangeSelection)(selection)) {
-      const anchorNode = selection.anchor.getNode();
-      const element = anchorNode.getKey() === 'root' ? anchorNode : anchorNode.getTopLevelElementOrThrow();
-      if ((0, _list.$isListNode)(element)) {
-        const parentList = (0, _utils.$getNearestNodeOfType)(anchorNode, _list.ListNode);
-        const type = parentList ? parentList.getTag() : element.getTag();
-        setBlockType(type);
-      } else {
-        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'));
-      setIsStrikethrough(selection.hasFormat('strikethrough'));
-      setIsUnderline(selection.hasFormat('underline'));
-      setIsLink(selection.hasFormat('link'));
-
-      // Check links
-      const node = getSelectedNode(selection);
-      const parent = node.getParent();
-      if ((0, _link.$isLinkNode)(parent) || (0, _link.$isLinkNode)(node)) {
-        setIsLink(true);
-      } else {
-        setIsLink(false);
-      }
-    }
-  }, [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
-    } = _ref;
-    editorState.read(() => {
-      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", {
-    className: "group"
-  }, /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: isBold ? 'active' : undefined,
-    onClick: () => editor.dispatchCommand(_lexical.FORMAT_TEXT_COMMAND, 'bold')
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "icon"
-  }, "|")), /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: isItalic ? 'active' : undefined,
-    onClick: () => editor.dispatchCommand(_lexical.FORMAT_TEXT_COMMAND, 'italic')
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "icon"
-  }, "}")), /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: isUnderline ? 'active' : undefined,
-    onClick: () => editor.dispatchCommand(_lexical.FORMAT_TEXT_COMMAND, 'underline')
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "icon"
-  }, "~")), /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: isStrikethrough ? 'active' : undefined,
-    onClick: () => editor.dispatchCommand(_lexical.FORMAT_TEXT_COMMAND, 'strikethrough')
-  }, /*#__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()
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "icon"
-  }, "]")), /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: blockType === 'ul' ? 'active' : undefined,
-    onClick: () => formatBulletList()
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "icon"
-  }, ".")), /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: blockType === 'ol' ? 'active' : undefined,
-    onClick: () => formatNumberedList()
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "icon"
-  }, "-"))), /*#__PURE__*/React.createElement("div", {
-    className: "group"
-  }, /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    onClick: () => editor.dispatchCommand(_lexical.FORMAT_ELEMENT_COMMAND, 'left')
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "icon"
-  }, "^")), /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    onClick: () => editor.dispatchCommand(_lexical.FORMAT_ELEMENT_COMMAND, 'center')
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "icon"
-  }, "_")), /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    onClick: () => editor.dispatchCommand(_lexical.FORMAT_ELEMENT_COMMAND, 'right')
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "icon"
-  }, "`")), /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    onClick: () => editor.dispatchCommand(_lexical.FORMAT_ELEMENT_COMMAND, 'justify')
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "icon"
-  }, "{"))), /*#__PURE__*/React.createElement("div", {
-    className: "group"
-  }, /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    onClick: () => editor.dispatchCommand(_lexical.UNDO_COMMAND)
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "icon"
-  }, "\\")), /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: "flip",
-    onClick: () => editor.dispatchCommand(_lexical.REDO_COMMAND)
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "icon"
-  }, "\\"))));
-};
-var _default = exports.default = Toolbar;

package/dist/cjs/f/fields/V2/EditorInput/common/TreeViewPlugin.js

@@ -1,18 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
-var _LexicalTreeView = require("@lexical/react/LexicalTreeView");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const TreeViewPlugin = () => {
-  const [editor] = (0, _LexicalComposerContext.useLexicalComposerContext)();
-  return /*#__PURE__*/_react.default.createElement(_LexicalTreeView.TreeView, {
-    viewClassName: "tree-view-output",
-    editor: editor
-  });
-};
-var _default = exports.default = TreeViewPlugin;

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

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

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

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

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

@@ -1,149 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-
-@use "@pareto-engineering/bem";
-@use "@pareto-engineering/styles/src/mixins";
-@use "@pareto-engineering/styles/src/globals" as *;
-
-$default-gap: calc(var(--gap) / 2);
-$default-padding: .55em .75em;
-$default-border: 1px solid var(--outline-inputs);
-$default-input-border-radius: var(--theme-default-input-border-radius);
-$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 {
-  display: flex;
-  flex-direction: column;
-
-  > .#{bem.$base}.form-label {
-    margin-bottom: var(--gap);
-  }
-
-  > .#{bem.$base}.toolbar {
-    display: flex;
-    gap: $default-gap;
-    margin-bottom: .25em;
-
-    > .group {
-      > button {
-        background: $default-background;
-        border: $default-border;
-        color: $default-icon-color;
-        padding: $default-padding;
-
-        &.active {
-          background-color: $active-background;
-        }
-      }
-    }
-
-    .flip {
-      transform: scaleX(-1);
-    }
-  }
-
-  &:not(.disabled) {
-    &:hover,
-    &:focus,
-    &:active {
-      > .textarea {
-        border: $focus-border;
-      }
-    }
-  }
-
-  &.disabled {
-    > .textarea {
-      background: $disabled-background;
-      color: var(--metadata);
-      cursor: not-allowed;
-    }
-  }
-
-  .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;
-    border-radius: $default-input-border-radius;
-    color: var(--y);
-    height: var(--rows);
-    outline: none;
-    overflow: auto;
-    padding: $default-padding;
-    resize: var(--resize);
-    width: 100%;
-
-    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);
-    }
-  }
-
-
-  > .tree-view-output {
-    background: $default-background;
-    border: $default-border;
-    border-radius: $default-input-border-radius;
-    max-height: 20em;
-    overflow: auto;
-    padding: $default-padding;
-  }
-}