@reportportal/ui-kit 0.0.1-alpha.169 → 0.0.1-alpha.170

package/dist/sortable.js

@@ -1,213 +1,302 @@
-import { jsx as R } from "react/jsx-runtime";
+import { jsx as u, jsxs as q } from "react/jsx-runtime";
 import { c as N } from "./bind-06a7ff84.js";
-import { useRef as k, useState as Z, useEffect as w, useCallback as x } from "react";
-import { useDrag as F, useDrop as Y, useDragLayer as $ } from "react-dnd";
-import { getEmptyImage as V } from "react-dnd-html5-backend";
-import { DROP_POSITIONS as u, DROP_DETECTION_MODE as E } from "./common.js";
-import { createPortal as z } from "react-dom";
-const I = "SORTABLE_ITEM", X = (e) => {
-  if (!e)
-    return {
-      display: "none"
-    };
-  const { x: t, y: o } = e, a = `translate(${t}px, ${o}px)`;
-  return {
-    transform: a,
-    WebkitTransform: a
-  };
-}, U = ({
-  fromIndex: e,
-  targetIndex: t,
-  isTopZone: o
-}) => o ? e < t ? t - 1 : t : e > t ? t + 1 : t, W = (e, t) => e / t < 0.5 ? u.TOP : u.BOTTOM, q = ({
-  id: e,
-  index: t,
-  type: o = I,
-  isDisabled: a = !1,
-  isLast: m = !1,
-  onDrop: c,
-  hideDefaultPreview: p = !1,
-  dropDetectionMode: d = E.INDEX_BASED
-}) => {
-  const i = d === E.HOVER, l = k(null), r = k(null), [g, n] = Z(null), [{ isDragging: _ }, P, T] = F(
-    () => ({
-      type: o,
-      item: { id: e, index: t, type: o },
-      collect: (s) => ({
-        isDragging: s.isDragging()
-      }),
-      canDrag: () => !a
-    }),
-    [e, t, o, a]
-  );
-  w(() => {
-    p && T(V(), { captureDraggingState: !0 });
-  }, [p, T]);
-  const [{ isOver: v, draggedItemIndex: D }, B] = Y(
-    () => ({
-      accept: o,
-      collect: (s) => {
-        const f = s.getItem(), O = (f == null ? void 0 : f.id) !== e ? s.isOver() : !1;
-        return {
-          isOver: O,
-          draggedItemIndex: O ? (f == null ? void 0 : f.index) ?? null : null
-        };
-      },
-      hover: (s, f) => {
-        if (!i)
-          return;
-        if (s.id === e) {
-          n(null);
-          return;
-        }
-        const y = l.current;
-        if (!y) {
-          n(null);
-          return;
-        }
-        const O = y.getBoundingClientRect(), A = O.bottom - O.top, S = f.getClientOffset();
-        if (!S) {
-          n(null);
-          return;
-        }
-        const H = S.y - O.top, C = W(H, A);
-        C === null ? (n(null), r.current = null) : C === u.TOP ? (n(u.TOP), r.current = u.TOP) : (n(u.BOTTOM), r.current = u.BOTTOM);
-      },
-      drop: (s) => {
-        if (!(s.id === e || !c))
-          if (i) {
-            const f = r.current;
-            if (!f)
-              return;
-            const y = f === u.TOP, O = U({
-              fromIndex: s.index,
-              targetIndex: t,
-              isTopZone: y
-            });
-            c(s.index, O);
-          } else
-            c(s.index, t);
-      }
-    }),
-    [e, t, o, c, m, i]
-  ), h = x(
-    (s) => (l.current = s, B(s)),
-    [B]
-  );
-  w(() => {
-    v || n(null);
-  }, [v]);
-  const b = i ? g : (() => D === null ? null : D > t ? u.TOP : u.BOTTOM)();
-  return {
-    isDragging: _,
-    isOver: v,
-    draggedItemIndex: D,
-    dropPosition: b,
-    dragRef: P,
-    dropRef: h,
-    previewRef: T
-  };
-}, G = {
-  "sortable-item": "_sortable-item_k6uy6_1",
-  "sortable-item--drop-target-top": "_sortable-item--drop-target-top_k6uy6_7",
-  "sortable-item--drop-target-bottom": "_sortable-item--drop-target-bottom_k6uy6_20",
-  "sortable-item--hover-mode": "_sortable-item--hover-mode_k6uy6_33",
-  "drag-handle": "_drag-handle_k6uy6_50",
-  "drag-handle--disabled": "_drag-handle--disabled_k6uy6_57"
-}, J = N.bind(G), K = ({
-  id: e,
-  index: t,
-  type: o = I,
-  isDisabled: a = !1,
-  className: m,
-  draggingClassName: c,
+import { isFunction as j } from "es-toolkit";
+import { useCallback as A, createContext as M, useContext as ee, useState as H, useRef as J } from "react";
+import { u as te, D as F, g as re, a as oe } from "./useTreeSortable-70a9c8f5.js";
+import { useDragLayer as se } from "react-dnd";
+import "react-dnd-html5-backend";
+import { DROP_DETECTION_MODE as X, DROP_POSITIONS as Y, DROP_ACTIONS as _, TREE_DROP_POSITIONS as S } from "./common.js";
+import { createPortal as K } from "react-dom";
+import { u as ie } from "./useOnClickOutside-8f7d68a1.js";
+const ne = {
+  "sortable-item": "_sortable-item_b58jz_16",
+  "sortable-item--drop-target-top": "_sortable-item--drop-target-top_b58jz_22",
+  "sortable-item--drop-target-bottom": "_sortable-item--drop-target-bottom_b58jz_35",
+  "sortable-item--hover-mode": "_sortable-item--hover-mode_b58jz_48",
+  "drag-handle": "_drag-handle_b58jz_65",
+  "drag-handle--disabled": "_drag-handle--disabled_b58jz_72"
+}, ae = N.bind(ne), le = ({
+  id: n,
+  index: f,
+  type: v = F,
+  isDisabled: E = !1,
+  className: o,
+  draggingClassName: a,
   dropTargetClassName: p,
-  onDrop: d,
-  hideDefaultPreview: i = !1,
-  dropDetectionMode: l = E.INDEX_BASED,
-  isLast: r = !1,
-  children: g
+  onDrop: e,
+  hideDefaultPreview: c = !1,
+  dropDetectionMode: s = X.INDEX_BASED,
+  isLast: t = !1,
+  children: i
 }) => {
-  const { isDragging: n, dropPosition: _, dragRef: P, dropRef: T, previewRef: v } = q({
-    id: e,
-    index: t,
-    type: o,
-    isDisabled: a,
-    onDrop: d,
-    hideDefaultPreview: i,
-    dropDetectionMode: l,
-    isLast: r
-  }), D = typeof g == "function", B = l === E.HOVER, h = J("sortable-item", m, {
-    "sortable-item--dragging": n,
-    "sortable-item--hover-mode": B,
-    "sortable-item--drop-target-top": _ === u.TOP,
-    "sortable-item--drop-target-bottom": _ === u.BOTTOM,
-    [c || ""]: n && c,
-    [p || ""]: _ && p
+  const { isDragging: l, dropPosition: d, dragRef: R, dropRef: g, previewRef: r } = te({
+    id: n,
+    index: f,
+    type: v,
+    isDisabled: E,
+    onDrop: e,
+    hideDefaultPreview: c,
+    dropDetectionMode: s,
+    isLast: t
+  }), O = j(i), P = s === X.HOVER, T = ae("sortable-item", o, {
+    "sortable-item--dragging": l,
+    "sortable-item--hover-mode": P,
+    "sortable-item--drop-target-top": d === Y.TOP,
+    "sortable-item--drop-target-bottom": d === Y.BOTTOM,
+    [a || ""]: l && a,
+    [p || ""]: d && p
   });
-  return /* @__PURE__ */ R("div", { ref: (b) => {
-    T(b), i || v(b), D || P(b);
-  }, className: h, children: D ? g({
-    isDragging: n,
-    isOver: _ !== null,
-    dragRef: P
-  }) : g });
-}, ie = ({
-  items: e,
-  type: t = I,
-  isDisabled: o = !1,
-  className: a,
-  itemClassName: m,
-  onReorder: c,
+  return /* @__PURE__ */ u("div", { ref: (b) => {
+    g(b), c || r(b), O || R(b);
+  }, className: T, children: O ? i({
+    isDragging: l,
+    isOver: d !== null,
+    dragRef: R
+  }) : i });
+}, Re = ({
+  items: n,
+  type: f = F,
+  isDisabled: v = !1,
+  className: E,
+  itemClassName: o,
+  onReorder: a,
   renderItem: p,
-  keyExtractor: d = (i) => i.id
+  keyExtractor: e = (c) => c.id
 }) => {
-  const i = x(
-    (l, r) => {
-      const g = [...e], [n] = g.splice(l, 1);
-      g.splice(r, 0, n), c(g);
+  const c = A(
+    (s, t) => {
+      const i = [...n], [l] = i.splice(s, 1);
+      i.splice(t, 0, l), a(i);
     },
-    [e, c]
+    [n, a]
   );
-  return /* @__PURE__ */ R("div", { className: a, children: e.map((l, r) => /* @__PURE__ */ R(
-    K,
+  return /* @__PURE__ */ u("div", { className: E, children: n.map((s, t) => /* @__PURE__ */ u(
+    le,
     {
-      id: d(l),
-      index: r,
-      type: t,
-      isDisabled: o,
-      className: m,
-      onDrop: i,
-      isLast: r === e.length - 1,
-      children: ({ dragRef: g, isDragging: n }) => p(l, r, g, n)
+      id: e(s),
+      index: t,
+      type: f,
+      isDisabled: v,
+      className: o,
+      onDrop: c,
+      isLast: t === n.length - 1,
+      children: ({ dragRef: i, isDragging: l }) => p(s, t, i, l)
     },
-    d(l)
+    e(s)
   )) });
-}, Q = {
+}, pe = {
   "drag-layer": "_drag-layer_1izcx_1",
   "drag-preview": "_drag-preview_1izcx_11"
-}, M = N.bind(Q), le = ({
-  type: e,
-  renderPreview: t,
-  className: o,
-  previewClassName: a,
-  portalTarget: m = document.body
+}, G = N.bind(pe), he = ({
+  type: n,
+  renderPreview: f,
+  className: v,
+  previewClassName: E,
+  portalTarget: o = document.body
 }) => {
-  const { itemType: c, isDragging: p, item: d, clientOffset: i } = $(
-    (r) => ({
-      item: r.getItem(),
-      itemType: r.getItemType(),
-      clientOffset: r.getClientOffset(),
-      isDragging: r.isDragging()
+  const { itemType: a, isDragging: p, item: e, clientOffset: c } = se(
+    (t) => ({
+      item: t.getItem(),
+      itemType: t.getItemType(),
+      clientOffset: t.getClientOffset(),
+      isDragging: t.isDragging()
     })
   );
-  if (!p || c !== e || !d || !m)
+  if (!p || a !== n || !e || !o)
     return null;
-  const l = /* @__PURE__ */ R("div", { className: M("drag-layer", o), children: /* @__PURE__ */ R("div", { className: M("drag-preview", a), style: X(i), children: t(d) }) });
-  return z(l, m);
+  const s = /* @__PURE__ */ u("div", { className: G("drag-layer", v), children: /* @__PURE__ */ u("div", { className: G("drag-preview", E), style: re(c), children: f(e) }) });
+  return K(s, o);
+}, Q = M(null), ce = () => ee(Q), de = {
+  "drop-confirmation-popover": "_drop-confirmation-popover_obz3t_16",
+  "drop-confirmation-popover--before": "_drop-confirmation-popover--before_obz3t_31",
+  "drop-confirmation-popover--after": "_drop-confirmation-popover--after_obz3t_35",
+  "drop-confirmation-popover__button": "_drop-confirmation-popover__button_obz3t_59",
+  "drop-confirmation-popover__divider": "_drop-confirmation-popover__divider_obz3t_75"
+}, C = N.bind(de), me = {
+  [_.MOVE]: "Move",
+  [_.DUPLICATE]: "Duplicate",
+  [_.CANCEL]: "Cancel"
+}, Se = ({
+  children: n,
+  showDropConfirmation: f = !1,
+  confirmationLabels: v,
+  portalTarget: E,
+  onMove: o,
+  onDuplicate: a,
+  onCancel: p
+}) => {
+  const [e, c] = H(null), [s, t] = H(
+    null
+  ), i = J(null), l = { ...me, ...v }, d = A(() => {
+    c(null), t(null);
+  }, []), R = A(
+    (P, T, m, b) => {
+      if (!f) {
+        o == null || o(P, T, m);
+        return;
+      }
+      const I = b.getBoundingClientRect(), z = I.left + I.width / 2;
+      let h;
+      m === "before" ? h = I.top : m === "after" ? h = I.top + I.height : h = I.top, t({
+        top: h,
+        left: z
+      }), c({ draggedItem: P, targetId: T, position: m });
+    },
+    [f, o]
+  ), g = A(
+    (P) => {
+      if (!e) {
+        d();
+        return;
+      }
+      const { draggedItem: T, targetId: m, position: b } = e;
+      switch (P) {
+        case _.MOVE:
+          o == null || o(T, m, b);
+          break;
+        case _.DUPLICATE:
+          a == null || a(T, m, b);
+          break;
+        case _.CANCEL:
+          p == null || p();
+          break;
+      }
+      d();
+    },
+    [e, o, a, p, d]
+  );
+  ie(
+    i,
+    e && f ? () => g(_.CANCEL) : void 0
+  );
+  const r = {
+    showDropConfirmation: f,
+    pendingDraggedItemId: (e == null ? void 0 : e.draggedItem.id) ?? null,
+    pendingTargetId: (e == null ? void 0 : e.targetId) ?? null,
+    pendingDropPosition: (e == null ? void 0 : e.position) ?? null,
+    requestDrop: R
+  }, O = E ?? (typeof document < "u" ? document.body : null);
+  return /* @__PURE__ */ q(Q.Provider, { value: r, children: [
+    n,
+    e && s && O && K(
+      /* @__PURE__ */ q(
+        "div",
+        {
+          ref: i,
+          className: C("drop-confirmation-popover", {
+            "drop-confirmation-popover--before": e.position === "before",
+            "drop-confirmation-popover--after": e.position === "after"
+          }),
+          style: {
+            top: s.top,
+            left: s.left
+          },
+          children: [
+            /* @__PURE__ */ u(
+              "button",
+              {
+                type: "button",
+                className: C("drop-confirmation-popover__button"),
+                onClick: () => g(_.MOVE),
+                children: l[_.MOVE]
+              }
+            ),
+            /* @__PURE__ */ u(
+              "button",
+              {
+                type: "button",
+                className: C("drop-confirmation-popover__button"),
+                onClick: () => g(_.DUPLICATE),
+                children: l[_.DUPLICATE]
+              }
+            ),
+            /* @__PURE__ */ u("div", { className: C("drop-confirmation-popover__divider") }),
+            /* @__PURE__ */ u(
+              "button",
+              {
+                type: "button",
+                className: C("drop-confirmation-popover__button"),
+                onClick: () => g(_.CANCEL),
+                children: l[_.CANCEL]
+              }
+            )
+          ]
+        }
+      ),
+      O
+    )
+  ] });
+}, be = {
+  "tree-sortable-item": "_tree-sortable-item_c3l7m_16",
+  "tree-sortable-item--dragging": "_tree-sortable-item--dragging_c3l7m_20",
+  "tree-sortable-item--pending": "_tree-sortable-item--pending_c3l7m_23",
+  "tree-sortable-item--drop-before": "_tree-sortable-item--drop-before_c3l7m_29",
+  "tree-sortable-item--drop-after": "_tree-sortable-item--drop-after_c3l7m_39",
+  "tree-sortable-item--drop-inside": "_tree-sortable-item--drop-inside_c3l7m_49"
+}, _e = N.bind(be), ye = ({
+  id: n,
+  index: f,
+  parentId: v,
+  type: E = F,
+  isDisabled: o = !1,
+  acceptDrop: a = !0,
+  isLast: p = !1,
+  canDropOn: e,
+  className: c,
+  draggingClassName: s,
+  dropBeforeClassName: t,
+  dropInsideClassName: i,
+  dropAfterClassName: l,
+  onDrop: d,
+  hideDefaultPreview: R = !1,
+  children: g
+}) => {
+  const r = ce(), O = J(null), P = A(
+    (D, $, x) => {
+      r != null && r.showDropConfirmation && O.current ? r.requestDrop(D, $, x, O.current) : d == null || d(D, $, x);
+    },
+    [r, d]
+  ), { isDragging: T, isOver: m, dropPosition: b, dragRef: I, dropRef: z, previewRef: h } = oe({
+    id: n,
+    index: f,
+    parentId: v,
+    type: E,
+    isDisabled: o,
+    acceptDrop: a,
+    canDropOn: e,
+    onDrop: P,
+    hideDefaultPreview: R
+  }), k = (r == null ? void 0 : r.pendingDraggedItemId) === n, w = T || k, y = (r == null ? void 0 : r.pendingTargetId) === n, L = r == null ? void 0 : r.pendingDropPosition, B = m && b === S.BEFORE || y && L === S.BEFORE, U = m && b === S.INSIDE || y && L === S.INSIDE, V = p && (m && b === S.AFTER || y && L === S.AFTER), W = j(g) ? g({
+    isDragging: w,
+    isOver: m || y,
+    dropPosition: y ? L ?? null : b,
+    dragRef: I
+  }) : g, Z = _e("tree-sortable-item", c, {
+    "tree-sortable-item--dragging": w,
+    "tree-sortable-item--pending": k,
+    "tree-sortable-item--drop-before": B,
+    "tree-sortable-item--drop-inside": U,
+    "tree-sortable-item--drop-after": V,
+    [s || ""]: w && s,
+    [t || ""]: B && t,
+    [i || ""]: U && i,
+    [l || ""]: V && l
+  });
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      ref: (D) => {
+        O.current = D, z(D), j(g) || (I(D), h(D));
+      },
+      className: Z,
+      children: W
+    }
+  );
 };
 export {
-  le as DragLayer,
-  K as SortableItem,
-  ie as SortableList
+  he as DragLayer,
+  le as SortableItem,
+  Re as SortableList,
+  Se as TreeSortableContainer,
+  ye as TreeSortableItem
 };

package/dist/style.css

@@ -12,4 +12,4 @@
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
-*/._segmented-control_188ud_16{display:inline-flex;gap:4px;border-radius:6px;background-color:var(--rp-ui-color-bg-3);padding:2px}._segmented-control_188ud_16._full-width_188ud_23{width:100%;display:flex}._button_188ud_28{display:inline-flex;flex:1;box-sizing:border-box;gap:8px;padding:8px;border:1px solid transparent;border-radius:4px;background-color:transparent;color:var(--rp-ui-color-text);font-size:13px;line-height:20px;font-family:var(--rp-ui-base-font-family);font-weight:var(--rp-ui-base-fw-regular);white-space:nowrap;align-items:center;justify-content:center;cursor:pointer;outline:none;transition:all .2s ease}._button_188ud_28:hover:not(._disabled_188ud_53):not(._active_188ud_53){background-color:var(--rp-ui-color-field-hover);color:var(--rp-ui-color-text)}._button_188ud_28._active_188ud_53{background-color:var(--rp-ui-color-field-bg);color:var(--rp-ui-color-text);border-radius:4px;box-shadow:0 1px 3px #3743621a}._button_188ud_28:focus-visible:not(._disabled_188ud_53){border-color:var(--rp-ui-color-primary-focused);outline:none;box-shadow:inset 0 0 0 1px var(--rp-ui-color-primary-focused)}._button_188ud_28._disabled_188ud_53{cursor:not-allowed;opacity:.5;color:var(--rp-ui-base-e-300)}._button_188ud_28._disabled_188ud_53:hover{background-color:transparent}._icon_188ud_77{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0}._side-panel_6bj2z_1{position:fixed;display:flex;flex-direction:column;width:max-content;min-width:320px;max-width:700px;height:100vh;background-color:var(--rp-ui-base-bg-100);box-shadow:var(--rp-ui-base-shadow-secondary);overflow:hidden;transition:transform .3s ease-in-out;pointer-events:none}._side-panel_6bj2z_1._active_6bj2z_15{pointer-events:auto}._side-right_6bj2z_19{right:0;transform:translate(100%)}._side-right_6bj2z_19._active_6bj2z_15{transform:translate(0)}._side-left_6bj2z_27{left:0;transform:translate(-100%)}._side-left_6bj2z_27._active_6bj2z_15{transform:translate(0)}._header-section_6bj2z_35{flex-shrink:0;margin-bottom:16px}._header-section_6bj2z_35._compact_6bj2z_39{margin-bottom:8px}._header_6bj2z_35{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:24px 24px 16px;border-bottom:1px solid var(--rp-ui-base-border-100)}._header_6bj2z_35>:first-child{flex:1}._header-content_6bj2z_55{flex:1}._close-button_6bj2z_59{flex-shrink:0;width:32px;height:32px}._title_6bj2z_65{font-size:20px;line-height:31px;font-family:var(--rp-ui-base-font-family-heading);color:var(--rp-ui-base-almost-black);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:100%}._description_6bj2z_76{margin:8px 0 0;font-family:var(--rp-ui-base-font-family);font-weight:var(--rp-ui-base-fw-regular);font-size:var(--rp-ui-base-font-size-md);line-height:var(--rp-ui-base-lh-md);color:var(--rp-ui-base-almost-black)}._content_6bj2z_85{flex:1;overflow-y:auto;padding:16px 24px;min-height:0}._footer_6bj2z_92{flex-shrink:0;padding:12px 24px;border-top:1px solid var(--rp-ui-base-border-100)}._divider_6bj2z_98{flex-shrink:0;height:1px;background-color:var(--rp-ui-base-e-100)}._sortable-item_k6uy6_1{position:relative;width:100%;transition:opacity .2s ease;--sortable-gap: 8px}._sortable-item--drop-target-top_k6uy6_7:before{content:"";position:absolute;top:calc(var(--sortable-gap) / -2);left:0;right:0;height:2px;background-color:var(--rp-ui-color-primary-focused);border-radius:2px;z-index:1;transform:translateY(-50%);pointer-events:none}._sortable-item--drop-target-bottom_k6uy6_20:after{content:"";position:absolute;bottom:calc(var(--sortable-gap) / -2);left:0;right:0;height:2px;background-color:var(--rp-ui-color-primary-focused);border-radius:2px;z-index:1;transform:translateY(50%);pointer-events:none}._sortable-item--hover-mode_k6uy6_33._sortable-item--drop-target-top_k6uy6_7:before{display:block;position:static;top:auto;margin-bottom:var(--sortable-gap);transform:none;z-index:auto}._sortable-item--hover-mode_k6uy6_33._sortable-item--drop-target-bottom_k6uy6_20:after{display:block;position:static;bottom:auto;margin-top:var(--sortable-gap);transform:none;z-index:auto}._drag-handle_k6uy6_50{cursor:grab;touch-action:none}._drag-handle_k6uy6_50:active{cursor:grabbing}._drag-handle--disabled_k6uy6_57{cursor:not-allowed;opacity:.5}._drag-layer_1izcx_1{position:fixed;pointer-events:none;z-index:100;left:0;top:0;width:100%;height:100%}._drag-preview_1izcx_11{display:flex;align-items:center;justify-content:flex-start;gap:8px;width:376px;height:52px;padding-left:12px;background-color:var(--rp-ui-base-bg-000);border:1px solid var(--rp-ui-color-field-border);border-radius:4px;box-shadow:0 4px 12px #00000026;font-size:13px;font-weight:500;color:var(--rp-ui-base-almost-black);white-space:nowrap}._drag-preview_1izcx_11 svg{width:16px;height:16px}._drag-preview_1izcx_11 svg path{fill:var(--rp-ui-color-field-icon)}._system-alert_jbf1d_1{display:flex;box-sizing:border-box;width:600px;padding:16px;gap:16px;border-radius:16px;justify-content:space-between;box-shadow:var(--rp-ui-base-shadow-secondary)}._system-alert--black_jbf1d_11 svg path{fill:var(--rp-ui-base-almost-black)!important}._system-alert_jbf1d_1._error_jbf1d_14{background-color:var(--rp-ui-base-sm-error)}._system-alert_jbf1d_1._success_jbf1d_17{background-color:var(--rp-ui-base-test-execution-status-passed)}._system-alert_jbf1d_1._info_jbf1d_20{background-color:var(--rp-ui-base-no-defect-bug-group)}._system-alert_jbf1d_1._warning_jbf1d_23{background-color:var(--rp-ui-base-defect-type-AB)}._system-alert_jbf1d_1 ._icon-wrapper_jbf1d_26{width:20px;height:24px;display:grid;place-content:center}._system-alert_jbf1d_1 ._content-wrapper_jbf1d_32{display:flex;gap:16px;flex-direction:column;flex:1}._system-alert_jbf1d_1 ._content-wrapper_jbf1d_32 ._title_jbf1d_38{text-align:start;font-family:var(--rp-ui-base-font-family);font-size:15px;line-height:24px;font-weight:var(--rp-ui-base-fw-semi-bold);display:-webkit-box;max-width:100%;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}._system-alert_jbf1d_1 ._content-wrapper_jbf1d_32 ._title--white_jbf1d_50{color:var(--rp-ui-base-bg-000)}._system-alert_jbf1d_1 ._content-wrapper_jbf1d_32 ._title--black_jbf1d_53{color:var(--rp-ui-base-almost-black)}._system-alert_jbf1d_1 ._close-button_jbf1d_56{background:none;border:none;width:24px;height:24px;cursor:pointer}._system-alert_jbf1d_1 ._close-button_jbf1d_56 svg path{fill:var(--rp-ui-base-bg-000)}._tooltip-wrapper_lwpn2_16{display:block;width:100%;height:fit-content;cursor:pointer}._tooltip-content_lwpn2_23{font-size:11px;line-height:16px;padding:16px;border-radius:8px;background-color:var(--rp-ui-base-tooltip-bg);font-family:var(--rp-ui-base-font-family);font-weight:var(--rp-ui-base-fw-medium);color:var(--rp-ui-base-bg-000);word-wrap:break-word;white-space:pre-wrap;box-sizing:border-box;width:100%}
+*/._segmented-control_188ud_16{display:inline-flex;gap:4px;border-radius:6px;background-color:var(--rp-ui-color-bg-3);padding:2px}._segmented-control_188ud_16._full-width_188ud_23{width:100%;display:flex}._button_188ud_28{display:inline-flex;flex:1;box-sizing:border-box;gap:8px;padding:8px;border:1px solid transparent;border-radius:4px;background-color:transparent;color:var(--rp-ui-color-text);font-size:13px;line-height:20px;font-family:var(--rp-ui-base-font-family);font-weight:var(--rp-ui-base-fw-regular);white-space:nowrap;align-items:center;justify-content:center;cursor:pointer;outline:none;transition:all .2s ease}._button_188ud_28:hover:not(._disabled_188ud_53):not(._active_188ud_53){background-color:var(--rp-ui-color-field-hover);color:var(--rp-ui-color-text)}._button_188ud_28._active_188ud_53{background-color:var(--rp-ui-color-field-bg);color:var(--rp-ui-color-text);border-radius:4px;box-shadow:0 1px 3px #3743621a}._button_188ud_28:focus-visible:not(._disabled_188ud_53){border-color:var(--rp-ui-color-primary-focused);outline:none;box-shadow:inset 0 0 0 1px var(--rp-ui-color-primary-focused)}._button_188ud_28._disabled_188ud_53{cursor:not-allowed;opacity:.5;color:var(--rp-ui-base-e-300)}._button_188ud_28._disabled_188ud_53:hover{background-color:transparent}._icon_188ud_77{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0}._side-panel_6bj2z_1{position:fixed;display:flex;flex-direction:column;width:max-content;min-width:320px;max-width:700px;height:100vh;background-color:var(--rp-ui-base-bg-100);box-shadow:var(--rp-ui-base-shadow-secondary);overflow:hidden;transition:transform .3s ease-in-out;pointer-events:none}._side-panel_6bj2z_1._active_6bj2z_15{pointer-events:auto}._side-right_6bj2z_19{right:0;transform:translate(100%)}._side-right_6bj2z_19._active_6bj2z_15{transform:translate(0)}._side-left_6bj2z_27{left:0;transform:translate(-100%)}._side-left_6bj2z_27._active_6bj2z_15{transform:translate(0)}._header-section_6bj2z_35{flex-shrink:0;margin-bottom:16px}._header-section_6bj2z_35._compact_6bj2z_39{margin-bottom:8px}._header_6bj2z_35{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:24px 24px 16px;border-bottom:1px solid var(--rp-ui-base-border-100)}._header_6bj2z_35>:first-child{flex:1}._header-content_6bj2z_55{flex:1}._close-button_6bj2z_59{flex-shrink:0;width:32px;height:32px}._title_6bj2z_65{font-size:20px;line-height:31px;font-family:var(--rp-ui-base-font-family-heading);color:var(--rp-ui-base-almost-black);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:100%}._description_6bj2z_76{margin:8px 0 0;font-family:var(--rp-ui-base-font-family);font-weight:var(--rp-ui-base-fw-regular);font-size:var(--rp-ui-base-font-size-md);line-height:var(--rp-ui-base-lh-md);color:var(--rp-ui-base-almost-black)}._content_6bj2z_85{flex:1;overflow-y:auto;padding:16px 24px;min-height:0}._footer_6bj2z_92{flex-shrink:0;padding:12px 24px;border-top:1px solid var(--rp-ui-base-border-100)}._divider_6bj2z_98{flex-shrink:0;height:1px;background-color:var(--rp-ui-base-e-100)}._sortable-item_b58jz_16{position:relative;width:100%;transition:opacity .2s ease;--sortable-gap: 8px}._sortable-item--drop-target-top_b58jz_22:before{content:"";position:absolute;top:calc(var(--sortable-gap) / -2);left:0;right:0;height:2px;background-color:var(--rp-ui-color-primary-focused);border-radius:2px;z-index:1;transform:translateY(-50%);pointer-events:none}._sortable-item--drop-target-bottom_b58jz_35:after{content:"";position:absolute;bottom:calc(var(--sortable-gap) / -2);left:0;right:0;height:2px;background-color:var(--rp-ui-color-primary-focused);border-radius:2px;z-index:1;transform:translateY(50%);pointer-events:none}._sortable-item--hover-mode_b58jz_48._sortable-item--drop-target-top_b58jz_22:before{display:block;position:static;top:auto;margin-bottom:var(--sortable-gap);transform:none;z-index:auto}._sortable-item--hover-mode_b58jz_48._sortable-item--drop-target-bottom_b58jz_35:after{display:block;position:static;bottom:auto;margin-top:var(--sortable-gap);transform:none;z-index:auto}._drag-handle_b58jz_65{cursor:grab;touch-action:none}._drag-handle_b58jz_65:active{cursor:grabbing}._drag-handle--disabled_b58jz_72{cursor:not-allowed;opacity:.5}._drag-layer_1izcx_1{position:fixed;pointer-events:none;z-index:100;left:0;top:0;width:100%;height:100%}._drag-preview_1izcx_11{display:flex;align-items:center;justify-content:flex-start;gap:8px;width:376px;height:52px;padding-left:12px;background-color:var(--rp-ui-base-bg-000);border:1px solid var(--rp-ui-color-field-border);border-radius:4px;box-shadow:0 4px 12px #00000026;font-size:13px;font-weight:500;color:var(--rp-ui-base-almost-black);white-space:nowrap}._drag-preview_1izcx_11 svg{width:16px;height:16px}._drag-preview_1izcx_11 svg path{fill:var(--rp-ui-color-field-icon)}._drop-confirmation-popover_obz3t_16{position:fixed;transform:translate(-50%,-100%);margin-bottom:8px;z-index:1000;display:flex;flex-direction:column;width:160px;min-width:120px;max-width:480px;padding:8px 0;background-color:var(--rp-ui-base-bg-000);border-radius:8px;box-shadow:0 8px 20px #00000026}._drop-confirmation-popover--before_obz3t_31{transform:translate(-50%,-110%);margin-bottom:0}._drop-confirmation-popover--after_obz3t_35{transform:translate(-50%);margin-top:8px;margin-bottom:0}._drop-confirmation-popover_obz3t_16:after{content:"";position:absolute;bottom:-8px;left:50%;transform:translate(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid var(--rp-ui-base-bg-000);filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}._drop-confirmation-popover--after_obz3t_35:after{top:-8px;bottom:auto;border-top:none;border-bottom:8px solid var(--rp-ui-base-bg-000)}._drop-confirmation-popover__button_obz3t_59{display:block;width:100%;padding:8px 16px;border:none;border-radius:3px;background:none;font-size:13px;text-align:left;cursor:pointer;color:var(--rp-ui-base-almost-black);transition:background-color .15s ease}._drop-confirmation-popover__button_obz3t_59:hover{background-color:var(--rp-ui-color-primary-hover)}._drop-confirmation-popover__divider_obz3t_75{display:block;height:1px;margin:5px 16px;background:var(--rp-ui-divider-bg)}._tree-sortable-item_c3l7m_16{position:relative;transition:opacity .2s ease}._tree-sortable-item--dragging_c3l7m_20{opacity:.5}._tree-sortable-item--pending_c3l7m_23{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none;cursor:not-allowed}._tree-sortable-item--drop-before_c3l7m_29:before{content:"";position:absolute;left:0;right:0;height:2px;background-color:var(--rp-ui-color-primary-focused);z-index:10;top:0}._tree-sortable-item--drop-after_c3l7m_39:after{content:"";position:absolute;left:0;right:0;height:2px;background-color:var(--rp-ui-color-primary-focused);z-index:10;bottom:0}._tree-sortable-item--drop-inside_c3l7m_49{position:relative}._tree-sortable-item--drop-inside_c3l7m_49:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border:2px dashed var(--rp-ui-color-primary-focused);border-radius:4px;pointer-events:none;z-index:1}._tree-sortable-item--drop-inside_c3l7m_49 ._tree-sortable-item_c3l7m_16:before{display:none}._system-alert_jbf1d_1{display:flex;box-sizing:border-box;width:600px;padding:16px;gap:16px;border-radius:16px;justify-content:space-between;box-shadow:var(--rp-ui-base-shadow-secondary)}._system-alert--black_jbf1d_11 svg path{fill:var(--rp-ui-base-almost-black)!important}._system-alert_jbf1d_1._error_jbf1d_14{background-color:var(--rp-ui-base-sm-error)}._system-alert_jbf1d_1._success_jbf1d_17{background-color:var(--rp-ui-base-test-execution-status-passed)}._system-alert_jbf1d_1._info_jbf1d_20{background-color:var(--rp-ui-base-no-defect-bug-group)}._system-alert_jbf1d_1._warning_jbf1d_23{background-color:var(--rp-ui-base-defect-type-AB)}._system-alert_jbf1d_1 ._icon-wrapper_jbf1d_26{width:20px;height:24px;display:grid;place-content:center}._system-alert_jbf1d_1 ._content-wrapper_jbf1d_32{display:flex;gap:16px;flex-direction:column;flex:1}._system-alert_jbf1d_1 ._content-wrapper_jbf1d_32 ._title_jbf1d_38{text-align:start;font-family:var(--rp-ui-base-font-family);font-size:15px;line-height:24px;font-weight:var(--rp-ui-base-fw-semi-bold);display:-webkit-box;max-width:100%;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}._system-alert_jbf1d_1 ._content-wrapper_jbf1d_32 ._title--white_jbf1d_50{color:var(--rp-ui-base-bg-000)}._system-alert_jbf1d_1 ._content-wrapper_jbf1d_32 ._title--black_jbf1d_53{color:var(--rp-ui-base-almost-black)}._system-alert_jbf1d_1 ._close-button_jbf1d_56{background:none;border:none;width:24px;height:24px;cursor:pointer}._system-alert_jbf1d_1 ._close-button_jbf1d_56 svg path{fill:var(--rp-ui-base-bg-000)}._tooltip-wrapper_lwpn2_16{display:block;width:100%;height:fit-content;cursor:pointer}._tooltip-content_lwpn2_23{font-size:11px;line-height:16px;padding:16px;border-radius:8px;background-color:var(--rp-ui-base-tooltip-bg);font-family:var(--rp-ui-base-font-family);font-weight:var(--rp-ui-base-fw-medium);color:var(--rp-ui-base-bg-000);word-wrap:break-word;white-space:pre-wrap;box-sizing:border-box;width:100%}