@atlaskit/navigation-system 0.166.0

package/dist/cjs/ui/menu-item/flyout-menu-item/flyout-menu-item-content.js

@@ -0,0 +1,60 @@
+/* flyout-menu-item-content.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FlyoutMenuItemContent = void 0;
+require("./flyout-menu-item-content.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireWildcard(require("react"));
+var _experimental = require("@atlaskit/popup/experimental");
+var _flyoutMenuItemContext = require("./flyout-menu-item-context");
+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); }
+var flyoutMenuItemContentStyles = {
+  root: "_1q51u2gc _85i5u2gc _bozgu2gc _y4tiu2gc _14b51kdj"
+};
+/**
+ * __FlyoutMenuItemContent__
+ *
+ * The content that appears when the flyout menu is open.
+ */
+var FlyoutMenuItemContent = exports.FlyoutMenuItemContent = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, forwardedRef) {
+  var children = _ref.children,
+    containerTestId = _ref.containerTestId,
+    onClose = _ref.onClose,
+    autoFocus = _ref.autoFocus;
+  var setIsOpen = (0, _react.useContext)(_flyoutMenuItemContext.SetIsOpenContext);
+  var handleClose = (0, _react.useCallback)(function () {
+    onClose === null || onClose === void 0 || onClose();
+    setIsOpen(false);
+  }, [setIsOpen, onClose]);
+  return /*#__PURE__*/_react.default.createElement(_experimental.PopupContent, {
+    appearance: "UNSAFE_modal-below-sm",
+    onClose: handleClose,
+    placement: "right-start",
+    shouldFitViewport: true,
+    testId: containerTestId,
+    xcss: flyoutMenuItemContentStyles.root,
+    autoFocus: autoFocus
+    /**
+     * Disabling GPU acceleration removes the use of `transform` by popper.js for this popup.
+     *
+     * This allows makers to use popups with `shouldRenderToParent` inside the flyout.
+     *
+     * Without this, the `transform` makes the flyout the containing element for fixed positioning.
+     * Because the flyout is also a scroll container then any nested, layered element is unable to
+     * escape the flyout.
+     *
+     * Disabling the `transform` is the simplest way to resolve this layering issue,
+     * and should have negligible performance impacts, because the flyout menus should rarely
+     * need to be repositioned.
+     */,
+    shouldDisableGpuAcceleration: true
+  }, function () {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      ref: forwardedRef
+    }, children);
+  });
+});

package/dist/cjs/ui/menu-item/flyout-menu-item/flyout-menu-item-context.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSetFlyoutMenuOpen = exports.useFlyoutMenuOpen = exports.SetIsOpenContext = exports.IsOpenContext = void 0;
+var _react = require("react");
+var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+/**
+ * __Is open context__
+ *
+ * A context for storing the isOpen value of the FlyoutMenuItem.
+ */
+var IsOpenContext = exports.IsOpenContext = /*#__PURE__*/(0, _react.createContext)(false);
+
+/**
+ * __Set is open context__
+ *
+ * A context for storing a function that sets isOpen value of the FlyoutMenuItem.
+ */
+var SetIsOpenContext = exports.SetIsOpenContext = /*#__PURE__*/(0, _react.createContext)(_noop.default);
+var useFlyoutMenuOpen = exports.useFlyoutMenuOpen = function useFlyoutMenuOpen() {
+  return (0, _react.useContext)(IsOpenContext);
+};
+var useSetFlyoutMenuOpen = exports.useSetFlyoutMenuOpen = function useSetFlyoutMenuOpen() {
+  return (0, _react.useContext)(SetIsOpenContext);
+};

package/dist/cjs/ui/menu-item/flyout-menu-item/flyout-menu-item-trigger.compiled.css

@@ -0,0 +1,2 @@
+._18zr12x7{padding-inline:var(--ds-space-075,6px)}
+[dir=rtl] ._1tz3r0mg{transform:scaleX(-1)}

package/dist/cjs/ui/menu-item/flyout-menu-item/flyout-menu-item-trigger.js

@@ -0,0 +1,68 @@
+/* flyout-menu-item-trigger.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FlyoutMenuItemTrigger = void 0;
+require("./flyout-menu-item-trigger.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
+var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
+var _experimental = require("@atlaskit/popup/experimental");
+var _menuItem = require("../menu-item");
+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); }
+var elemAfterStyles = {
+  root: "_18zr12x7 _1tz3r0mg"
+};
+/**
+ * __FlyoutMenuItemTrigger__
+ *
+ * The button that toggles the flyout menu.
+ */
+var FlyoutMenuItemTrigger = exports.FlyoutMenuItemTrigger = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, forwardedRef) {
+  var children = _ref.children,
+    elemBefore = _ref.elemBefore,
+    onClick = _ref.onClick,
+    isSelected = _ref.isSelected,
+    interactionName = _ref.interactionName,
+    testId = _ref.testId,
+    isContentTooltipDisabled = _ref.isContentTooltipDisabled,
+    visualContentRef = _ref.visualContentRef,
+    isDragging = _ref.isDragging,
+    hasDragIndicator = _ref.hasDragIndicator,
+    dropIndicator = _ref.dropIndicator;
+  return /*#__PURE__*/React.createElement(_experimental.PopupTrigger, null, function (_ref2) {
+    var ref = _ref2.ref,
+      ariaControls = _ref2['aria-controls'],
+      ariaExpanded = _ref2['aria-expanded'],
+      ariaHasPopup = _ref2['aria-haspopup'];
+    return /*#__PURE__*/React.createElement(_menuItem.MenuItemBase, {
+      testId: testId,
+      ref: (0, _mergeRefs.default)([ref, forwardedRef]),
+      visualContentRef: visualContentRef,
+      elemBefore: elemBefore,
+      elemAfter: /*#__PURE__*/React.createElement("div", {
+        className: (0, _runtime.ax)([elemAfterStyles.root])
+      }, /*#__PURE__*/React.createElement(_chevronRight.default, {
+        label: "",
+        color: "var(--ds-icon, #44546F)",
+        size: "small"
+      })),
+      onClick: onClick,
+      ariaControls: ariaControls,
+      ariaExpanded: ariaExpanded,
+      ariaHasPopup: ariaHasPopup,
+      interactionName: interactionName,
+      isContentTooltipDisabled: isContentTooltipDisabled,
+      isSelected: isSelected,
+      isDragging: isDragging,
+      hasDragIndicator: hasDragIndicator,
+      dropIndicator: dropIndicator
+    }, children);
+  });
+});

package/dist/cjs/ui/menu-item/flyout-menu-item/flyout-menu-item.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FlyoutMenuItem = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _useControlled3 = _interopRequireDefault(require("@atlaskit/ds-lib/use-controlled"));
+var _usePreviousValue = _interopRequireDefault(require("@atlaskit/ds-lib/use-previous-value"));
+var _experimental = require("@atlaskit/popup/experimental");
+var _menuListItem = require("../menu-list-item");
+var _flyoutMenuItemContext = require("./flyout-menu-item-context");
+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); }
+/**
+ * __FlyoutMenuItem__
+ *
+ * Displays content in a flyout menu, triggered by a button.
+ *
+ * The top-level component that contains the trigger and content of a flyout menu.
+ *
+ * Usage example:
+ * ```tsx
+ * <FlyoutMenuItem>
+ *   <FlyoutMenuItemTrigger>Trigger</FlyoutMenuItemTrigger>
+ *   <FlyoutMenuItemContent>
+ *     <MenuList>
+ *       <ButtonMenuItem>Item 1</ButtonMenuItem>
+ *       <ButtonMenuItem>Item 2</ButtonMenuItem>
+ *     </MenuList>
+ *   </FlyoutMenuItemContent>
+ * </FlyoutMenuItem>
+ * ```
+ */
+var FlyoutMenuItem = exports.FlyoutMenuItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, forwardedRef) {
+  var children = _ref.children,
+    id = _ref.id,
+    isOpenControlled = _ref.isOpen,
+    _ref$isDefaultOpen = _ref.isDefaultOpen,
+    isDefaultOpen = _ref$isDefaultOpen === void 0 ? false : _ref$isDefaultOpen,
+    onOpenChange = _ref.onOpenChange;
+  var _useControlled = (0, _useControlled3.default)(isOpenControlled, function () {
+      return isDefaultOpen;
+    }),
+    _useControlled2 = (0, _slicedToArray2.default)(_useControlled, 2),
+    isOpen = _useControlled2[0],
+    setIsOpen = _useControlled2[1];
+  var previousIsOpen = (0, _usePreviousValue.default)(isOpen);
+  (0, _react.useEffect)(function () {
+    if (previousIsOpen === undefined || previousIsOpen === isOpen) {
+      /**
+       * The previous value is `undefined` on initialization, so if it is `undefined` then the value hasn't changed.
+       *
+       * The previous value can be equal to the current one if the component re-renders due to something else changing.
+       *
+       * In both cases the value hasn't changed and we don't want to notify consumers.
+       */
+      return;
+    }
+    onOpenChange === null || onOpenChange === void 0 || onOpenChange(isOpen);
+  }, [isOpen, onOpenChange, previousIsOpen]);
+  return /*#__PURE__*/_react.default.createElement(_flyoutMenuItemContext.IsOpenContext.Provider, {
+    value: isOpen
+  }, /*#__PURE__*/_react.default.createElement(_flyoutMenuItemContext.SetIsOpenContext.Provider, {
+    value: setIsOpen
+  }, /*#__PURE__*/_react.default.createElement(_menuListItem.MenuListItem, {
+    ref: forwardedRef
+  }, /*#__PURE__*/_react.default.createElement(_experimental.Popup, {
+    id: id,
+    isOpen: isOpen
+  }, children))));
+});

package/dist/cjs/ui/menu-item/link-menu-item.compiled.css

@@ -0,0 +1 @@
+._10m98stt{scroll-margin-inline:750pt}

package/dist/cjs/ui/menu-item/link-menu-item.js

@@ -0,0 +1,81 @@
+/* link-menu-item.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LinkMenuItem = void 0;
+require("./link-menu-item.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
+var _forwardRefWithGeneric = require("../../components/forward-ref-with-generic");
+var _listItem = require("../../components/list-item");
+var _menuItem = require("./menu-item");
+var _useScrollMenuItemIntoView = require("./use-scroll-menu-item-into-view");
+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); }
+var listItemStyles = {
+  root: "_10m98stt"
+};
+var LinkMenuItemNoRef = function LinkMenuItemNoRef(_ref, forwardedRef) {
+  var testId = _ref.testId,
+    actions = _ref.actions,
+    children = _ref.children,
+    description = _ref.description,
+    elemAfter = _ref.elemAfter,
+    elemBefore = _ref.elemBefore,
+    href = _ref.href,
+    target = _ref.target,
+    actionsOnHover = _ref.actionsOnHover,
+    isSelected = _ref.isSelected,
+    onClick = _ref.onClick,
+    interactionName = _ref.interactionName,
+    isContentTooltipDisabled = _ref.isContentTooltipDisabled,
+    visualContentRef = _ref.visualContentRef,
+    listItemRef = _ref.listItemRef,
+    isDragging = _ref.isDragging,
+    hasDragIndicator = _ref.hasDragIndicator,
+    dropIndicator = _ref.dropIndicator;
+  var itemRef = (0, _react.useRef)(null);
+  (0, _useScrollMenuItemIntoView.useScrollMenuItemIntoView)({
+    elementRef: itemRef,
+    isSelected: isSelected !== null && isSelected !== void 0 ? isSelected : false
+  });
+  var ref = (0, _react.useMemo)(function () {
+    return (0, _mergeRefs.default)([itemRef, listItemRef !== null && listItemRef !== void 0 ? listItemRef : null]);
+  }, [itemRef, listItemRef]);
+  return /*#__PURE__*/React.createElement(_listItem.ListItem, {
+    ref: ref,
+    xcss: listItemStyles.root
+  }, /*#__PURE__*/React.createElement(_menuItem.MenuItemBase, {
+    testId: testId,
+    description: description,
+    actions: actions,
+    elemAfter: elemAfter
+    // TODO Always use "open in new window" icon when `openInNewWindow` prop is true
+    ,
+    elemBefore: elemBefore,
+    href: href,
+    target: target,
+    actionsOnHover: actionsOnHover,
+    isSelected: isSelected,
+    onClick: onClick,
+    ref: forwardedRef,
+    visualContentRef: visualContentRef,
+    interactionName: interactionName,
+    isContentTooltipDisabled: isContentTooltipDisabled,
+    isDragging: isDragging,
+    hasDragIndicator: hasDragIndicator,
+    dropIndicator: dropIndicator
+  }, children));
+};
+
+/**
+ * LinkMenuItem
+ *
+ * A menu item link. It should be used within a `ul`.
+ */
+var LinkMenuItem = exports.LinkMenuItem = (0, _forwardRefWithGeneric.forwardRefWithGeneric)(LinkMenuItemNoRef);

package/dist/cjs/ui/menu-item/menu-item-signals.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.COLLAPSE_ELEM_BEFORE = void 0;
+/**
+ * A symbol to collapse the `elemBefore` slot.
+ * This should be placed in the `elemBefore` prop of supported menu items.
+ */
+var COLLAPSE_ELEM_BEFORE = exports.COLLAPSE_ELEM_BEFORE = Symbol('collapse-elem-before');

package/dist/cjs/ui/menu-item/menu-item.compiled.css

@@ -0,0 +1,95 @@
+._11c8dcr7{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._1r04ze3t{inset:var(--ds-space-0,0)}
+._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
+._nd5l16dh{grid-area:elem-after}
+._nd5l17zh{grid-area:elem-before}
+._nd5l19l3{grid-area:interactive}
+._nd5lbc26{grid-area:actions}
+._zulp1b66{gap:var(--ds-space-050,4px)}
+._zulpv77o{gap:var(--ds-space-025,2px)}
+._1ii7kb7n{grid-row:1}
+._yyhyjvu9{grid-column:1/-1}
+._14iu19ru:active:not(:disabled){background-color:var(--ds-background-selected-pressed,#85b8ff)}
+._14iu1ji5:active:not(:disabled){background-color:var(--ds-surface-pressed,#dcdfe4)}
+._152t1ssb{inset-block-start:50%}
+._152tze3t{inset-block-start:var(--ds-space-0,0)}
+._18m915vq{overflow-y:hidden}
+._18ukglyw:not(:has(button,a)){pointer-events:none}
+._1bah1h6o{justify-content:center}
+._1bsb1tcg{width:24px}
+._1bsbyh40{width:2px}
+._1cykglyw{--drag-handle-display:none}
+._1djyglyw:has([aria-expanded=true][aria-haspopup=true]){--elem-after-display:none}
+._1e02ze3t{inset-inline-start:var(--ds-space-0,0)}
+._1e0c11p5{display:grid}
+._1e0c13yo{display:var(--elem-after-display)}
+._1e0c1c3z{display:var(--actions-on-hover-display)}
+._1e0c1txw{display:flex}
+._1i4q1hna{overflow-wrap:break-word}
+._1ifmglyw{-webkit-touch-callout:none}
+._1lmcu4vt{grid-template-areas:"elem-before interactive elem-after actions"}
+._1o9zidpf{flex-shrink:0}
+._1ojv1txw:has([aria-expanded=true][aria-haspopup=true]){--actions-on-hover-display:flex}
+._1q511b66{padding-block-start:var(--ds-space-050,4px)}
+._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
+._1reo15vq{overflow-x:hidden}
+._1swv108i:has([aria-expanded=true][aria-haspopup=true]){background-color:var(--ds-surface-hovered,#f1f2f4)}
+._1swvi1yw:has([aria-expanded=true][aria-haspopup=true]){background-color:var(--ds-background-selected-hovered,#cce0ff)}
+._1tkezwfg{min-height:2pc}
+._1ul91c9m{min-width:1ch}
+._1ul9t9kd{min-width:72px}
+._1yyu1fvw{--notch-color:var(--ds-background-selected-bold,#0c66e4)}
+._1yyu1j28{--notch-color:transparent}
+._2lx21bp4{flex-direction:column}
+._2z05hkll{grid-template-rows:1fr}
+._2z05nbh3{grid-template-rows:subgrid}
+._4cvr1h6o{align-items:center}
+._4t3i1crf{height:9pt}
+._4t3i1tcg{height:24px}
+._4t3ickbl{height:3pc}
+._4t3izwfg{height:2pc}
+._85i51b66{padding-block-end:var(--ds-space-050,4px)}
+._85i5v77o{padding-block-end:var(--ds-space-025,2px)}
+._91ju1txw{--elem-after-display:flex}
+._91juglyw{--elem-after-display:none}
+._ae4v1h6o{align-content:center}
+._bfhk1j28{background-color:transparent}
+._bfhk1o0g{background-color:var(--notch-color)}
+._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
+._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
+._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}
+._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
+._ek6g1txw{--actions-on-hover-display:flex}
+._ek6gglyw{--actions-on-hover-display:none}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
+._p12f1pna{max-width:420px}
+._slp31hna{word-wrap:break-word}
+._syaz15cr{color:var(--ds-text-inverse,#fff)}
+._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
+._syaz1lh4{color:var(--ds-text-disabled,#091e424f)}
+._syazaqb7{color:var(--ds-text-selected,#0c66e4)}
+._t9ec1i34{transform:translateY(-50%)}
+._tzy41ou4{opacity:.4}
+._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
+._vchh1ntv{box-sizing:content-box}
+._vchhusvi{box-sizing:border-box}
+._y3gnv2br{text-align:start}
+._y4ti12x7{padding-inline-end:var(--ds-space-075,6px)}
+._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}
+._yv0e7dup{grid-template-columns:minmax(0,auto) 1fr minmax(0,auto) minmax(0,auto)}
+._yv0enbh3{grid-template-columns:subgrid}
+._12s918uv:focus-within{overflow-y:initial}
+._1brr1txw:focus-within, ._109x1txw:hover{--actions-on-hover-display:flex}
+._1guo18uv:focus-within{overflow-x:initial}
+._1mfcglyw:focus-within, ._1sjuglyw:hover{--elem-after-display:none}
+._11om6b4r:hover{animation-name:k1xyysw3}
+._1uy01amc:hover{animation-delay:.8s}
+._30l3aqb7:hover{color:var(--ds-text-selected,#0c66e4)}
+._7psyru3m:hover{animation-duration:0s}
+._bir2q7pw:hover{animation-fill-mode:forwards}
+._irr3108i:hover{background-color:var(--ds-surface-hovered,#f1f2f4)}
+._irr3i1yw:hover{background-color:var(--ds-background-selected-hovered,#cce0ff)}
+._irr3n7od:hover{background-color:unset}
+._x0kw1txw:hover{--drag-handle-display:flex}
+@keyframes k1xyysw3{to{cursor:grab}}