@atlaskit/editor-plugin-show-diff 14.5.1 → 15.0.0

package/dist/cjs/ui/ContributorTag/ContributorTag.js

@@ -1,383 +0,0 @@
-/* ContributorTag.tsx generated by @compiled/babel-plugin v2.0.0 */
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ContributorTag = ContributorTag;
-require("./ContributorTag.compiled.css");
-var _react = _interopRequireWildcard(require("react"));
-var React = _react;
-var _runtime = require("@compiled/react/runtime");
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _bindEventListener = require("bind-event-listener");
-var _reactIntl = require("react-intl");
-var _avatar = _interopRequireDefault(require("@atlaskit/avatar/avatar"));
-var _avatarContent = require("@atlaskit/avatar/avatar-content");
-var _aiBot = _interopRequireDefault(require("@atlaskit/icon-lab/core/ai-bot"));
-var _icon = require("@atlaskit/logo/rovo-hex/icon");
-var _Tooltip = _interopRequireDefault(require("@atlaskit/tooltip/Tooltip"));
-var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden/visually-hidden"));
-var _factory = require("../../pm-plugins/decorations/colorSchemes/factory");
-var _schemes = require("../../pm-plugins/decorations/colorSchemes/schemes");
-var _messages = require("./messages");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-// Floor for the tag width (~one 16px avatar plus padding), so the highlight-width clamp below
-// cannot collapse the box on a very short highlight.
-var MIN_TAG_WIDTH = '28px';
-var styles = {
-  constraint: "_1e0c1ule _kqswstnw _94n51osq _1e02idpf _1ul9idpf _1pbykb7n _uiztglyw",
-  tag: "_zulp1b66 _1reo15vq _18m915vq _2rko12b0 _11c8wadc _18zr1b66 _1rjcv77o _1e0c116y _4cvr1h6o _p12f1osq _1ul9idpf _1il9nqa1 _1doc1dm9 _16qs130s _o5721q9c _vchhusvi",
-  hidden: "_tzy4idpf _lcxvglyw",
-  visible: "_tzy4kb7n _lcxv1wug",
-  avatars: "_1e0c116y _4cvr1h6o _1o9zidpf",
-  leadingAvatar: "_1e0c116y _12l2r5cr",
-  name: "_1reo15vq _18m915vq _1e0c1ule _1ul9idpf _1bto1l2s _o5721q9c"
-};
-var getContributorName = function getContributorName(contributor, formatMessage) {
-  var _contributor$name, _contributor$agentKin;
-  var name = (_contributor$name = contributor.name) === null || _contributor$name === void 0 ? void 0 : _contributor$name.trim();
-  if (name) {
-    return name;
-  }
-
-  // `agentKind` defaults to `'external'` per the plugin type contract; an unidentified external
-  // agent falls back to a generic label rather than rendering a nameless tag.
-  if (contributor.kind === 'agent' && ((_contributor$agentKin = contributor.agentKind) !== null && _contributor$agentKin !== void 0 ? _contributor$agentKin : 'external') === 'external') {
-    return formatMessage(_messages.contributorTagMessages.externalAgentName);
-  }
-  return '';
-};
-var ContributorAvatar = function ContributorAvatar(_ref) {
-  var contributor = _ref.contributor,
-    name = _ref.name,
-    ringColor = _ref.ringColor,
-    stackIndex = _ref.stackIndex;
-  if (contributor.kind === 'user') {
-    return /*#__PURE__*/React.createElement(_avatar.default, {
-      appearance: "circle",
-      size: "xxsmall",
-      src: contributor.avatarUrl,
-      name: name,
-      stackIndex: stackIndex,
-      borderColor: ringColor
-    });
-  }
-  return /*#__PURE__*/React.createElement(_avatar.default, {
-    appearance: "hexagon",
-    size: "xxsmall",
-    src: contributor.avatarUrl,
-    name: name,
-    stackIndex: stackIndex,
-    borderColor: ringColor
-  }, contributor.avatarUrl ? undefined : /*#__PURE__*/React.createElement(_avatarContent.AvatarContent, null, contributor.agentKind === 'rovo' ? /*#__PURE__*/React.createElement(_icon.RovoHexIcon, {
-    size: "xxsmall",
-    label: ""
-  }) :
-  /*#__PURE__*/
-  // `small` (12px) fits inside the 16px hexagon.
-  React.createElement(_aiBot.default, {
-    label: "",
-    size: "small"
-  })));
-};
-/**
- * Resolves the tag's accent from the same scheme value and token maps the highlight used, so the two
- * can never drift.
- */
-var getTagAccent = function getTagAccent(_ref2) {
-  var colorScheme = _ref2.colorScheme,
-    isActive = _ref2.isActive,
-    isInserted = _ref2.isInserted;
-  var colors = _schemes.colorSchemeRegistry[colorScheme !== null && colorScheme !== void 0 ? colorScheme : 'standard'];
-  var accent = isInserted ? isActive ? colors.insertActiveColor : colors.insertColor : isActive ? colors.deleteActiveColor : colors.deleteColor;
-  return (0, _factory.getAccentTokens)(accent);
-};
-
-/** The line the change starts on: topmost of its fragments, leftmost among those. */
-var findChangeStartLine = function findChangeStartLine(highlights) {
-  var start;
-  var _iterator = _createForOfIteratorHelper(highlights),
-    _step;
-  try {
-    for (_iterator.s(); !(_step = _iterator.n()).done;) {
-      var highlight = _step.value;
-      var _iterator2 = _createForOfIteratorHelper(highlight.getClientRects()),
-        _step2;
-      try {
-        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-          var rect = _step2.value;
-          if (!start || rect.top < start.top - 1 || Math.abs(rect.top - start.top) <= 1 && rect.left < start.left) {
-            start = rect;
-          }
-        }
-      } catch (err) {
-        _iterator2.e(err);
-      } finally {
-        _iterator2.f();
-      }
-    }
-  } catch (err) {
-    _iterator.e(err);
-  } finally {
-    _iterator.f();
-  }
-  return start;
-};
-
-/**
- * Observes the highlight this tag describes, for what CSS here cannot see: its hover state (the
- * highlight is a ProseMirror decoration in a different DOM subtree, so listeners are bound
- * imperatively via `data-diff-id`) and the width the tag is clamped to.
- *
- * Deliberately not routed through plugin state: a transaction per pointer move would re-run the
- * memoised decoration calculation.
- */
-var useHighlightState = function useHighlightState(diffId, highlightSelector, getEditorRoot) {
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isHovered = _useState2[0],
-    setIsHovered = _useState2[1];
-  var _useState3 = (0, _react.useState)(undefined),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    maxWidthPx = _useState4[0],
-    setMaxWidthPx = _useState4[1];
-  (0, _react.useEffect)(function () {
-    // Both queries are scoped to this editor's content root, so a tag can only ever bind to the
-    // decorations its own plugin instance rendered — another editor on the page, or one nested
-    // inside this one, cannot supply the geometry.
-    var editorRoot = getEditorRoot();
-    var highlights = editorRoot === null || editorRoot === void 0 ? void 0 : editorRoot.querySelectorAll(highlightSelector);
-    if (!editorRoot || !(highlights !== null && highlights !== void 0 && highlights.length)) {
-      return;
-    }
-    var elements = Array.from(highlights);
-    // The width comes from this tag's OWN decoration; sibling halves of the change are here for
-    // hover only.
-    var ownElements = Array.from(editorRoot.querySelectorAll("[data-diff-id=\"".concat(diffId, "\"]")));
-    var measure = function measure() {
-      var _findChangeStartLine;
-      // Counted by distinct line box, not by client rect: an inline node inside the change (a
-      // mention, emoji, date) splits the highlight into several rects on the same line, and
-      // treating that as a wrap would drop the width clamp on changes that never wrapped.
-      var lineTops = new Set();
-      for (var _i = 0, _ownElements = ownElements; _i < _ownElements.length; _i++) {
-        var highlight = _ownElements[_i];
-        var _iterator3 = _createForOfIteratorHelper(highlight.getClientRects()),
-          _step3;
-        try {
-          for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-            var rect = _step3.value;
-            lineTops.add(Math.round(rect.top));
-          }
-        } catch (err) {
-          _iterator3.e(err);
-        } finally {
-          _iterator3.f();
-        }
-      }
-
-      // A wrapped change's first line says nothing useful about how wide the tag may be.
-      var width = lineTops.size > 1 ? undefined : (_findChangeStartLine = findChangeStartLine(ownElements)) === null || _findChangeStartLine === void 0 ? void 0 : _findChangeStartLine.width;
-      setMaxWidthPx(width);
-    };
-    measure();
-
-    // An inline element cannot be observed itself (ResizeObserver skips boxes with no principal
-    // box), so the block it sits in is observed instead.
-    var resizeObserver = new ResizeObserver(measure);
-    var _iterator4 = _createForOfIteratorHelper(new Set(ownElements.map(function (_ref3) {
-        var parentElement = _ref3.parentElement;
-        return parentElement;
-      }))),
-      _step4;
-    try {
-      for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
-        var parent = _step4.value;
-        if (parent) {
-          resizeObserver.observe(parent);
-        }
-      }
-
-      // `bindAll` takes a single target, and a change can render more than one highlight.
-    } catch (err) {
-      _iterator4.e(err);
-    } finally {
-      _iterator4.f();
-    }
-    var unbinds = elements.map(function (highlight) {
-      return (0, _bindEventListener.bindAll)(highlight, [{
-        type: 'mouseenter',
-        listener: function listener() {
-          return setIsHovered(true);
-        }
-      }, {
-        type: 'mouseleave',
-        listener: function listener() {
-          return setIsHovered(false);
-        }
-      }]);
-    });
-    return function () {
-      resizeObserver.disconnect();
-      unbinds.forEach(function (unbind) {
-        return unbind();
-      });
-    };
-  }, [diffId, getEditorRoot, highlightSelector]);
-  return {
-    isHovered: isHovered,
-    maxWidthPx: maxWidthPx
-  };
-};
-
-/**
- * A small tag naming who made one diff, rendered into the host widget its decoration places on the
- * change's first character and positioned above it.
- */
-function ContributorTag(_ref4) {
-  var colorScheme = _ref4.colorScheme,
-    connectedContributor = _ref4.connectedContributor,
-    contributor = _ref4.contributor,
-    diffId = _ref4.diffId,
-    getEditorRoot = _ref4.getEditorRoot,
-    isActive = _ref4.isActive,
-    _ref4$isInserted = _ref4.isInserted,
-    isInserted = _ref4$isInserted === void 0 ? true : _ref4$isInserted,
-    linkedDiffIds = _ref4.linkedDiffIds;
-  var _useIntl = (0, _reactIntl.useIntl)(),
-    formatMessage = _useIntl.formatMessage;
-  // A plain string, so the hook's effect is not re-run by a fresh array on every render.
-  var highlightSelector = [diffId].concat((0, _toConsumableArray2.default)(linkedDiffIds !== null && linkedDiffIds !== void 0 ? linkedDiffIds : [])).map(function (id) {
-    return "[data-diff-id=\"".concat(id, "\"]");
-  }).join(', ');
-  var _useHighlightState = useHighlightState(diffId, highlightSelector, getEditorRoot),
-    isHighlightHovered = _useHighlightState.isHovered,
-    maxWidthPx = _useHighlightState.maxWidthPx;
-  var accent = getTagAccent({
-    colorScheme: colorScheme,
-    isActive: Boolean(isActive),
-    isInserted: isInserted
-  });
-  var nameRef = (0, _react.useRef)(null);
-  var _useState5 = (0, _react.useState)(false),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    isTruncated = _useState6[0],
-    setIsTruncated = _useState6[1];
-  var _useState7 = (0, _react.useState)(false),
-    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    isHoveredOrFocused = _useState8[0],
-    setIsHoveredOrFocused = _useState8[1];
-  var isConnectedPair = Boolean(connectedContributor);
-  var isPrimaryAgent = contributor.kind === 'agent';
-  var primaryName = getContributorName(contributor, formatMessage);
-  var secondaryName = connectedContributor ? getContributorName(connectedContributor, formatMessage) : '';
-
-  // Resolved by `kind` so a reverse `connectedTo` (an attributed user pointing at its agent)
-  // renders identically.
-  var agentName = isPrimaryAgent ? primaryName : secondaryName;
-  var userName = isPrimaryAgent ? secondaryName : primaryName;
-  var userContributor = isPrimaryAgent ? connectedContributor : contributor;
-  var agentContributor = isPrimaryAgent ? contributor : connectedContributor;
-  var displayName = isConnectedPair ? agentName || primaryName : primaryName;
-  var fullLabel = isConnectedPair ? formatMessage(_messages.contributorTagMessages.changedByConnected, {
-    agentName: agentName,
-    userName: userName
-  }) : formatMessage(_messages.contributorTagMessages.changedBy, {
-    name: primaryName
-  });
-  var measureTruncation = (0, _react.useCallback)(function () {
-    var element = nameRef.current;
-    if (element) {
-      setIsTruncated(element.scrollWidth > element.clientWidth);
-    }
-  }, []);
-  var isVisible = Boolean(isActive) || isHighlightHovered || isHoveredOrFocused;
-
-  // A connected pair only ever renders the agent name, so it always gets a tooltip; a single
-  // contributor only when its name is clipped.
-  var tooltipContent = isTruncated || isConnectedPair ? fullLabel : null;
-  return /*#__PURE__*/React.createElement("span", {
-    style: {
-      // Clamped to the highlight's own width, floored at `MIN_TAG_WIDTH` so a one-character
-      // change still shows an avatar.
-      maxWidth: maxWidthPx === undefined ? undefined : "max(".concat(Math.round(maxWidthPx), "px, ").concat(MIN_TAG_WIDTH, ")")
-    },
-    className: (0, _runtime.ax)([styles.constraint])
-  }, /*#__PURE__*/React.createElement(_Tooltip.default, {
-    content: tooltipContent
-    // A tooltip below would cover the highlighted text the tag describes.
-    ,
-    position: "top"
-    // The label is already exposed by the visually hidden text below.
-    ,
-    isScreenReaderAnnouncementDisabled: true
-  }, function (tooltipProps) {
-    return /*#__PURE__*/React.createElement("span", (0, _extends2.default)({}, tooltipProps, {
-      "data-testid": "diff-contributor-tag"
-      // Deliberately no `aria-label`: it would be announced ahead of the element's
-      // contents, but design requires the contributor *after* the change — hence the
-      // visually hidden last child.
-      ,
-      role: "note"
-      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex, @atlassian/a11y/no-noninteractive-tabindex
-      ,
-      tabIndex: 0,
-      style: {
-        backgroundColor: accent.background,
-        borderBottomColor: accent.border
-      },
-      onMouseOver: function onMouseOver(event) {
-        tooltipProps.onMouseOver(event);
-        measureTruncation();
-        setIsHoveredOrFocused(true);
-      },
-      onMouseOut: function onMouseOut(event) {
-        tooltipProps.onMouseOut(event);
-        setIsHoveredOrFocused(false);
-      },
-      onFocus: function onFocus(event) {
-        tooltipProps.onFocus(event);
-        measureTruncation();
-        setIsHoveredOrFocused(true);
-      },
-      onBlur: function onBlur(event) {
-        tooltipProps.onBlur(event);
-        setIsHoveredOrFocused(false);
-      },
-      className: (0, _runtime.ax)([styles.tag, isVisible ? styles.visible : styles.hidden])
-    }), /*#__PURE__*/React.createElement("span", {
-      className: (0, _runtime.ax)([styles.avatars])
-    }, isConnectedPair && userContributor ? /*#__PURE__*/React.createElement("span", {
-      className: (0, _runtime.ax)([styles.leadingAvatar])
-    }, /*#__PURE__*/React.createElement(ContributorAvatar, {
-      contributor: userContributor,
-      name: userName,
-      ringColor: accent.background,
-      stackIndex: 1
-    })) : null, isConnectedPair && agentContributor ? /*#__PURE__*/React.createElement(ContributorAvatar, {
-      contributor: agentContributor,
-      name: agentName,
-      ringColor: accent.background,
-      stackIndex: 0
-    }) : null, !isConnectedPair ? /*#__PURE__*/React.createElement(ContributorAvatar, {
-      contributor: contributor,
-      name: primaryName,
-      ringColor: accent.background
-    }) : null), /*#__PURE__*/React.createElement("span", {
-      "data-testid": "diff-contributor-tag-name",
-      ref: nameRef,
-      style: {
-        color: accent.text
-      },
-      className: (0, _runtime.ax)([styles.name])
-    }, displayName), /*#__PURE__*/React.createElement(_visuallyHidden.default, null, fullLabel));
-  }));
-}

package/dist/cjs/ui/ContributorTag/ContributorTagWidget.js

@@ -1,50 +0,0 @@
-/* ContributorTagWidget.tsx generated by @compiled/babel-plugin v2.0.0 */
-"use strict";
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ContributorTagWidget = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _runtime = require("@compiled/react/runtime");
-var _hooks = require("@atlaskit/editor-common/hooks");
-var _ContributorTag = require("./ContributorTag");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-/**
- * One contributor tag, mounted by its diff decoration into the host element that decoration draws
- * (see `mountContributorTag`).
- *
- * The model is read from plugin state here rather than passed in, because ProseMirror skips `toDOM`
- * for a widget it reuses: stepping to the next change republishes the tags without redrawing their
- * hosts, so anything the tag needs to react to — `isActive` above all — has to arrive through a
- * subscription of its own. Renders nothing when this diff has no tag, which is the case for the
- * deleted half of a replacement: that half is folded into the inline tag.
- */
-var ContributorTagWidget = exports.ContributorTagWidget = function ContributorTagWidget(_ref) {
-  var api = _ref.api,
-    diffId = _ref.diffId,
-    getEditorRoot = _ref.getEditorRoot;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['showDiff'], function (state) {
-      var _state$showDiffState;
-      return {
-        model: (_state$showDiffState = state.showDiffState) === null || _state$showDiffState === void 0 || (_state$showDiffState = _state$showDiffState.contributorTags) === null || _state$showDiffState === void 0 ? void 0 : _state$showDiffState.find(function (tag) {
-          return tag.diffId === diffId;
-        })
-      };
-    }),
-    model = _useSharedPluginState.model;
-  if (!model) {
-    return null;
-  }
-  return /*#__PURE__*/React.createElement(_ContributorTag.ContributorTag, {
-    colorScheme: model.colorScheme,
-    connectedContributor: model.connectedContributor,
-    contributor: model.contributor,
-    diffId: model.diffId,
-    getEditorRoot: getEditorRoot,
-    isActive: model.isActive,
-    isInserted: model.isInserted,
-    linkedDiffIds: model.linkedDiffIds
-  });
-};

package/dist/es2019/ui/ContributorTag/ContributorTag.compiled.css

@@ -1,29 +0,0 @@
-._11c8wadc{font:var(--ds-font-body-small,normal 400 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._2rko12b0{border-radius:var(--ds-radius-small,4px)}
-._zulp1b66{gap:var(--ds-space-050,4px)}
-._18zr1b66{padding-inline:var(--ds-space-050,4px)}
-._1rjcv77o{padding-block:var(--ds-space-025,2px)}
-._12l2r5cr{margin-inline-end:var(--ds-space-negative-050,-4px)}
-._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
-._18m915vq{overflow-y:hidden}
-._1bto1l2s{text-overflow:ellipsis}
-._1doc1dm9{border-bottom-width:var(--ds-border-width-selected,2px)}
-._1e02idpf{inset-inline-start:0}
-._1e0c116y{display:inline-flex}
-._1e0c1ule{display:block}
-._1il9nqa1{border-bottom-style:solid}
-._1o9zidpf{flex-shrink:0}
-._1pbykb7n{z-index:1}
-._1reo15vq{overflow-x:hidden}
-._1ul9idpf{min-width:0}
-._4cvr1h6o{align-items:center}
-._94n51osq{bottom:100%}
-._kqswstnw{position:absolute}
-._lcxv1wug{pointer-events:auto}
-._lcxvglyw{pointer-events:none}
-._o5721q9c{white-space:nowrap}
-._p12f1osq{max-width:100%}
-._tzy4idpf{opacity:0}
-._tzy4kb7n{opacity:1}
-._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
-._vchhusvi{box-sizing:border-box}