welcome-ui 10.0.0-alpha.13 → 10.0.0-alpha.15

package/dist/Tabs.js

@@ -1,235 +1,33 @@
 "use client";
 import './Tabs.css';
-import { jsx as T, jsxs as pe } from "react/jsx-runtime";
-import { C as X, a as Y, h as A, b as fe, j as ve } from "./SBSPVDDI-CmtnvvUX.js";
-import { e as ee, y as Ie, f as W, c as j, b as z, _ as B, i as H, l as te, F as ge, d as S, a as f, u as F, k as oe, af as xe, v as Se, Z as Pe, M as Ce, A as $, z as O, B as V, V as U, C as Z } from "./OE2EFRVA-Dg1R6gaC.js";
-import { u as Te, b as _e } from "./OLVWQA7U-Dia3UUnG.js";
-import he, { useCallback as ne, useRef as q, useEffect as G, useState as Ee, createContext as se, useMemo as ke, forwardRef as re, cloneElement as ye, isValidElement as we } from "react";
-import { c as ae } from "./index-PAaZGbyz.js";
-import { b as M, m as Ne, o as J, c as Re, s as D, d as k, f as Le, u as ce, a as Q } from "./RTNCFSKZ-BywELldk.js";
-import { Badge as Oe } from "./Badge.js";
-import { f as Ve } from "./forwardRefWithAs-8eP3ZN15.js";
-import { Icon as De } from "./Icon.js";
-import { u as Me, d as $e } from "./T22PY7TE-gLuJpoOm.js";
-import { P as Fe, b as We } from "./Y67KZUMI-BwLWwpNF.js";
-import { c as je, a as ze, u as Be } from "./B7UTNDHN-BghjolIs.js";
-var K = ee(
-  [Y],
-  [X]
-), He = K.useScopedContext, ie = K.useProviderContext, le = K.ScopedContextProvider, Ke = "button", Ae = j(function(r) {
-  var t = r, {
-    store: e,
-    getItem: n
-  } = t, a = B(t, [
-    "store",
-    "getItem"
-  ]), b;
-  const c = He();
-  e = e || c, H(
-    e,
-    process.env.NODE_ENV !== "production" && "Tab must be wrapped in a TabList component."
-  );
-  const u = te(), s = a.id || u, _ = ge(a), i = ne(
-    (m) => {
-      const y = S(f({}, m), { dimmed: _ });
-      return n ? n(y) : y;
-    },
-    [_, n]
-  ), v = a.onClick, I = F((m) => {
-    v == null || v(m), !m.defaultPrevented && (e == null || e.setSelectedId(s));
-  }), d = e.panels.useState(
-    (m) => {
-      var y;
-      return (y = m.items.find((l) => l.tabId === s)) == null ? void 0 : y.id;
-    }
-  ), p = u ? a.shouldRegisterItem : !1, g = e.useState((m) => !!s && m.activeId === s), x = e.useState((m) => !!s && m.selectedId === s), h = e.useState((m) => !!e.item(m.activeId)), P = g || x && !h, w = x || ((b = a.accessibleWhenDisabled) != null ? b : !0);
-  if (M(
-    e.combobox || e.composite,
-    "virtualFocus"
-  ) && (a = S(f({}, a), {
-    tabIndex: -1
-  })), a = S(f({
-    id: s,
-    role: "tab",
-    "aria-selected": x,
-    "aria-controls": d || void 0
-  }, a), {
-    onClick: I
-  }), e.composite) {
-    const m = {
-      id: s,
-      accessibleWhenDisabled: w,
-      store: e.composite,
-      shouldRegisterItem: P && p,
-      rowId: a.rowId,
-      render: a.render
-    };
-    a = S(f({}, a), {
-      render: /* @__PURE__ */ T(
-        A,
-        S(f({}, m), {
-          render: e.combobox && e.composite !== e.combobox ? /* @__PURE__ */ T(A, S(f({}, m), { store: e.combobox })) : m.render
-        })
-      )
-    });
-  }
-  return a = fe(S(f({
-    store: e
-  }, a), {
-    accessibleWhenDisabled: w,
-    getItem: i,
-    shouldRegisterItem: p
-  })), a;
-}), Ue = Ie(
-  W(function(r) {
-    const t = Ae(r);
-    return z(Ke, t);
-  })
-), Ze = "div", qe = j(
-  function(r) {
-    var t = r, { store: e } = t, n = B(t, ["store"]);
-    const a = ie();
-    e = e || a, H(
-      e,
-      process.env.NODE_ENV !== "production" && "TabList must receive a `store` prop or be wrapped in a TabProvider component."
-    );
-    const b = e.useState(
-      (c) => c.orientation === "both" ? void 0 : c.orientation
-    );
-    return n = oe(
-      n,
-      (c) => /* @__PURE__ */ T(le, { value: e, children: c }),
-      [e]
-    ), e.composite && (n = f({
-      focusable: !1
-    }, n)), n = f({
-      role: "tablist",
-      "aria-orientation": b
-    }, n), n = Te(f({ store: e }, n)), n;
-  }
-), Ge = W(function(r) {
-  const t = qe(r);
-  return z(Ze, t);
-}), Je = "div", Qe = j(
-  function(r) {
-    var t = r, {
-      store: e,
-      unmountOnHide: n,
-      tabId: a,
-      getItem: b,
-      scrollRestoration: c,
-      scrollElement: u
-    } = t, s = B(t, [
-      "store",
-      "unmountOnHide",
-      "tabId",
-      "getItem",
-      "scrollRestoration",
-      "scrollElement"
-    ]);
-    const _ = ie();
-    e = e || _, H(
-      e,
-      process.env.NODE_ENV !== "production" && "TabPanel must receive a `store` prop or be wrapped in a TabProvider component."
-    );
-    const i = q(null), v = te(s.id), I = M(
-      e.panels,
-      () => {
-        var l;
-        return a || ((l = e == null ? void 0 : e.panels.item(v)) == null ? void 0 : l.tabId);
-      }
-    ), d = M(
-      e,
-      (l) => !!I && l.selectedId === I
-    ), p = Me({ open: d }), g = M(p, "mounted"), x = q(
-      /* @__PURE__ */ new Map()
-    ), h = F(() => {
-      const l = i.current;
-      return l ? u ? typeof u == "function" ? u(l) : "current" in u ? u.current : u : l : null;
-    });
-    G(() => {
-      var l, E;
-      if (!c || !g) return;
-      const C = h();
-      if (!C) return;
-      if (c === "reset") {
-        C.scroll(0, 0);
-        return;
-      }
-      if (!I) return;
-      const N = x.current.get(I);
-      C.scroll((l = N == null ? void 0 : N.x) != null ? l : 0, (E = N == null ? void 0 : N.y) != null ? E : 0);
-      const L = () => {
-        x.current.set(I, {
-          x: C.scrollLeft,
-          y: C.scrollTop
-        });
-      };
-      return C.addEventListener("scroll", L), () => {
-        C.removeEventListener("scroll", L);
-      };
-    }, [c, g, I, h, e]);
-    const [P, w] = Ee(!1);
-    G(() => {
-      const l = i.current;
-      if (!l) return;
-      const E = xe(l);
-      w(!!E.length);
-    }, []);
-    const R = ne(
-      (l) => {
-        const E = S(f({}, l), { id: v || l.id, tabId: a });
-        return b ? b(E) : E;
-      },
-      [v, a, b]
-    ), m = s.onKeyDown, y = F((l) => {
-      if (m == null || m(l), l.defaultPrevented || !(e != null && e.composite)) return;
-      const C = {
-        ArrowLeft: e.previous,
-        ArrowRight: e.next,
-        Home: e.first,
-        End: e.last
-      }[l.key];
-      if (!C) return;
-      const { selectedId: N } = e.getState(), L = C({ activeId: N });
-      L && (l.preventDefault(), e.move(L));
-    });
-    return s = oe(
-      s,
-      (l) => /* @__PURE__ */ T(le, { value: e, children: l }),
-      [e]
-    ), s = S(f({
-      id: v,
-      role: "tabpanel",
-      "aria-labelledby": I || void 0
-    }, s), {
-      children: n && !g ? null : s.children,
-      ref: Se(i, s.ref),
-      onKeyDown: y
-    }), s = Pe(f({
-      // If the tab panel is rendered as part of another composite widget such
-      // as combobox, it should not be focusable.
-      focusable: !e.composite && !P
-    }, s)), s = $e(f({ store: p }, s)), s = ve(S(f({ store: e.panels }, s), { getItem: R })), s;
-  }
-), Xe = W(function(r) {
-  const t = Qe(r);
-  return z(Je, t);
-}), Ye = ee(
-  [We, Y],
-  [Fe, X]
-), et = Ye.useContext;
-se(!1);
-se(null);
-function tt(o = {}) {
-  var r = o, {
+import { jsx as _, jsxs as K } from "react/jsx-runtime";
+import { T as U, a as q, b as D } from "./tab-panel-B8NigruF.js";
+import G, { createContext as V, useMemo as H, forwardRef as M, cloneElement as J, isValidElement as Q } from "react";
+import { c as $ } from "./index-PAaZGbyz.js";
+import { m as X, o as y, c as Y, s as x, d as m, f as Z, u as w, a as E, b as A } from "./RTNCFSKZ-BywELldk.js";
+import { Badge as ee } from "./Badge.js";
+import { f as te } from "./forwardRefWithAs-8eP3ZN15.js";
+import { Icon as oe } from "./Icon.js";
+import { P as se, b as ae } from "./Y67KZUMI-BwLWwpNF.js";
+import { C as ne, a as re } from "./SBSPVDDI-CmtnvvUX.js";
+import { e as ce, M as de, A as P, z as S, B as v, V as O, d as z, a as B, C as N } from "./OE2EFRVA-Dg1R6gaC.js";
+import { c as le, a as ie, u as ue } from "./B7UTNDHN-DDN2hpM5.js";
+import { a as me } from "./OLVWQA7U-UYYsJnlv.js";
+var be = ce(
+  [ae, re],
+  [se, ne]
+), fe = be.useContext;
+V(!1);
+V(null);
+function pe(e = {}) {
+  var r = e, {
     composite: t,
-    combobox: e
-  } = r, n = Ce(r, [
+    combobox: c
+  } = r, s = de(r, [
     "composite",
     "combobox"
   ]);
-  const a = [
+  const p = [
     "items",
     "renderedItems",
     "moves",
@@ -240,143 +38,144 @@ function tt(o = {}) {
     "focusLoop",
     "focusShift",
     "focusWrap"
-  ], b = Ne(
-    n.store,
-    J(t, a),
-    J(e, a)
-  ), c = b == null ? void 0 : b.getState(), u = je($(V({}, n), {
-    store: b,
+  ], l = X(
+    s.store,
+    y(t, p),
+    y(c, p)
+  ), n = l == null ? void 0 : l.getState(), i = le(P(v({}, s), {
+    store: l,
     // We need to explicitly set the default value of `includesBaseElement` to
     // `false` since we don't want the composite store to default it to `true`
     // when the activeId state is null, which could be the case when rendering
     // combobox with tab.
-    includesBaseElement: O(
-      n.includesBaseElement,
-      c == null ? void 0 : c.includesBaseElement,
+    includesBaseElement: S(
+      s.includesBaseElement,
+      n == null ? void 0 : n.includesBaseElement,
       !1
     ),
-    orientation: O(
-      n.orientation,
-      c == null ? void 0 : c.orientation,
+    orientation: S(
+      s.orientation,
+      n == null ? void 0 : n.orientation,
       "horizontal"
     ),
-    focusLoop: O(n.focusLoop, c == null ? void 0 : c.focusLoop, !0)
-  })), s = ze(), _ = $(V({}, u.getState()), {
-    selectedId: O(
-      n.selectedId,
-      c == null ? void 0 : c.selectedId,
-      n.defaultSelectedId
+    focusLoop: S(s.focusLoop, n == null ? void 0 : n.focusLoop, !0)
+  })), g = ie(), k = P(v({}, i.getState()), {
+    selectedId: S(
+      s.selectedId,
+      n == null ? void 0 : n.selectedId,
+      s.defaultSelectedId
     ),
-    selectOnMove: O(
-      n.selectOnMove,
-      c == null ? void 0 : c.selectOnMove,
+    selectOnMove: S(
+      s.selectOnMove,
+      n == null ? void 0 : n.selectOnMove,
       !0
     )
-  }), i = Re(_, u, b);
-  D(
-    i,
-    () => k(i, ["moves"], () => {
-      const { activeId: d, selectOnMove: p } = i.getState();
-      if (!p || !d) return;
-      const g = u.item(d);
-      g && (g.dimmed || g.disabled || i.setState("selectedId", g.id));
+  }), o = Y(k, i, l);
+  x(
+    o,
+    () => m(o, ["moves"], () => {
+      const { activeId: a, selectOnMove: d } = o.getState();
+      if (!d || !a) return;
+      const u = i.item(a);
+      u && (u.dimmed || u.disabled || o.setState("selectedId", u.id));
     })
   );
-  let v = !0;
-  D(
-    i,
-    () => Le(i, ["selectedId"], (d, p) => {
-      if (!v) {
-        v = !0;
+  let I = !0;
+  x(
+    o,
+    () => Z(o, ["selectedId"], (a, d) => {
+      if (!I) {
+        I = !0;
         return;
       }
-      t && d.selectedId === p.selectedId || i.setState("activeId", d.selectedId);
+      t && a.selectedId === d.selectedId || o.setState("activeId", a.selectedId);
     })
-  ), D(
-    i,
-    () => k(i, ["selectedId", "renderedItems"], (d) => {
-      if (d.selectedId !== void 0) return;
-      const { activeId: p, renderedItems: g } = i.getState(), x = u.item(p);
-      if (x && !x.disabled && !x.dimmed)
-        i.setState("selectedId", x.id);
+  ), x(
+    o,
+    () => m(o, ["selectedId", "renderedItems"], (a) => {
+      if (a.selectedId !== void 0) return;
+      const { activeId: d, renderedItems: u } = o.getState(), b = i.item(d);
+      if (b && !b.disabled && !b.dimmed)
+        o.setState("selectedId", b.id);
       else {
-        const h = g.find(
-          (P) => !P.disabled && !P.dimmed
+        const h = u.find(
+          (f) => !f.disabled && !f.dimmed
         );
-        i.setState("selectedId", h == null ? void 0 : h.id);
+        o.setState("selectedId", h == null ? void 0 : h.id);
       }
     })
-  ), D(
-    i,
-    () => k(i, ["renderedItems"], (d) => {
-      const p = d.renderedItems;
-      if (p.length)
-        return k(s, ["renderedItems"], (g) => {
-          const x = g.renderedItems;
-          x.some((P) => !P.tabId) && x.forEach((P, w) => {
-            if (P.tabId) return;
-            const R = p[w];
-            R && s.renderItem($(V({}, P), { tabId: R.id }));
+  ), x(
+    o,
+    () => m(o, ["renderedItems"], (a) => {
+      const d = a.renderedItems;
+      if (d.length)
+        return m(g, ["renderedItems"], (u) => {
+          const b = u.renderedItems;
+          b.some((f) => !f.tabId) && b.forEach((f, F) => {
+            if (f.tabId) return;
+            const T = d[F];
+            T && g.renderItem(P(v({}, f), { tabId: T.id }));
           });
         });
     })
   );
-  let I = null;
-  return D(i, () => {
-    const d = () => {
-      I = i.getState().selectedId;
-    }, p = () => {
-      v = !1, i.setState("selectedId", I);
+  let C = null;
+  return x(o, () => {
+    const a = () => {
+      C = o.getState().selectedId;
+    }, d = () => {
+      I = !1, o.setState("selectedId", C);
     };
     if (t && "setSelectElement" in t)
-      return U(
-        k(t, ["value"], d),
-        k(t, ["mounted"], p)
+      return O(
+        m(t, ["value"], a),
+        m(t, ["mounted"], d)
       );
-    if (e)
-      return U(
-        k(e, ["selectedValue"], d),
-        k(e, ["mounted"], p)
+    if (c)
+      return O(
+        m(c, ["selectedValue"], a),
+        m(c, ["mounted"], d)
       );
-  }), $(V(V({}, u), i), {
-    panels: s,
-    setSelectedId: (d) => i.setState("selectedId", d),
-    select: (d) => {
-      i.setState("selectedId", d), u.move(d);
+  }), P(v(v({}, i), o), {
+    panels: g,
+    setSelectedId: (a) => o.setState("selectedId", a),
+    select: (a) => {
+      o.setState("selectedId", a), i.move(a);
     }
   });
 }
-function ot(o, r, t) {
-  Z(r, [t.composite, t.combobox]), o = Be(o, r, t), Q(o, t, "selectedId", "setSelectedId"), Q(o, t, "selectOnMove");
-  const [e, n] = ce(() => o.panels, {});
-  return Z(n, [o, n]), Object.assign(
-    ke(() => S(f({}, o), { panels: e }), [o, e]),
+function Ie(e, r, t) {
+  N(r, [t.composite, t.combobox]), e = ue(e, r, t), E(e, t, "selectedId", "setSelectedId"), E(e, t, "selectOnMove");
+  const [c, s] = w(() => e.panels, {});
+  return N(s, [e, s]), Object.assign(
+    H(() => z(B({}, e), { panels: c }), [e, c]),
     { composite: t.composite, combobox: t.combobox }
   );
 }
-function St(o = {}) {
-  const r = _e(), t = et() || r;
-  o = S(f({}, o), {
-    composite: o.composite !== void 0 ? o.composite : t,
-    combobox: o.combobox !== void 0 ? o.combobox : r
+function we(e = {}) {
+  const r = me(), t = fe() || r;
+  e = z(B({}, e), {
+    composite: e.composite !== void 0 ? e.composite : t,
+    combobox: e.combobox !== void 0 ? e.combobox : r
   });
-  const [e, n] = ce(tt, o);
-  return ot(e, n, o);
+  const [c, s] = w(pe, e);
+  return Ie(c, s, e);
 }
-const nt = "_root_peui8_2", de = {
-  root: nt,
+const ge = "_root_peui8_2", j = {
+  root: ge,
   "size-lg": "_size-lg_peui8_56",
   "size-md": "_size-md_peui8_63",
   "tab-list": "_tab-list_peui8_73"
 };
-function st({
-  icon: o,
+function xe({
+  icon: e,
   iconColor: r,
-  isActive: t
+  isActive: t,
+  size: c
 }) {
-  if (!o) return null;
-  if (typeof o != "string") return o;
-  const e = (() => {
+  if (!e) return null;
+  if (typeof e != "string") return e;
+  const s = (() => {
     switch (r) {
       case "blue":
         return t ? "text-background-accent-blue-strong" : "text-background-accent-blue-primary";
@@ -396,69 +195,70 @@ function st({
         return "";
     }
   })();
-  return /* @__PURE__ */ T(De, { className: e, name: o });
+  return /* @__PURE__ */ _(oe, { className: s, name: e, size: c });
 }
-const rt = ae(de), ue = Ve(
+const Se = $(j), L = te(
   ({
-    as: o,
+    as: e,
     badge: r,
     children: t,
-    className: e,
-    icon: n,
-    iconColor: a = "violet",
-    id: b,
-    size: c = "lg",
-    store: u,
-    ...s
-  }, _) => {
-    const { selectedId: i } = M(u), v = i === b, I = st({
-      icon: n,
-      iconColor: a,
-      isActive: v
-    }), d = v ? "neutral" : "warm";
-    return /* @__PURE__ */ pe(
-      Ue,
+    className: c,
+    icon: s,
+    iconColor: p = "violet",
+    id: l,
+    size: n = "lg",
+    store: i,
+    ...g
+  }, k) => {
+    const { selectedId: o } = A(i), I = o === l, C = xe({
+      icon: s,
+      iconColor: p,
+      isActive: I,
+      size: n
+    }), a = I ? "neutral" : "warm";
+    return /* @__PURE__ */ K(
+      U,
       {
-        className: rt("root", `size-${c}`, e),
-        id: b,
-        ref: _,
-        render: o ? /* @__PURE__ */ T(o, {}) : void 0,
-        store: u,
-        ...s,
+        className: Se("root", `size-${n}`, c),
+        id: l,
+        ref: k,
+        render: e ? /* @__PURE__ */ _(e, {}) : void 0,
+        store: i,
+        ...g,
         children: [
-          I,
+          C,
           t,
-          r ? /* @__PURE__ */ T(Oe, { size: c, variant: d, children: r }) : null
+          r ? /* @__PURE__ */ _(ee, { size: n, variant: a, children: r }) : null
         ]
       }
     );
   }
 );
-ue.displayName = "Tabs.Tab";
-const me = re(({ children: o, ...r }, t) => /* @__PURE__ */ T(Xe, { ref: t, ...r, children: o }));
-me.displayName = "Tabs.Panel";
-const at = ae(de), be = re(
-  ({ children: o, className: r, size: t = "lg", store: e, ...n }, a) => {
-    const b = he.Children.map(
-      o,
-      (c) => we(c) ? ye(c, { size: t }) : c
+L.displayName = "Tabs.Tab";
+const R = M(({ children: e, ...r }, t) => /* @__PURE__ */ _(q, { ref: t, ...r, children: e }));
+R.displayName = "Tabs.Panel";
+const ve = $(j), W = M(
+  ({ children: e, className: r, size: t = "lg", store: c, ...s }, p) => {
+    const l = G.Children.map(
+      e,
+      (n) => Q(n) ? J(n, { size: t }) : n
     );
-    return /* @__PURE__ */ T(
-      Ge,
+    return /* @__PURE__ */ _(
+      D,
       {
-        className: at("tab-list", `size-${t}`, r),
-        ref: a,
-        store: e,
-        ...n,
-        children: b
+        className: ve("tab-list", `size-${t}`, r),
+        ref: p,
+        store: c,
+        ...s,
+        children: l
       }
     );
   }
 );
-be.displayName = "Tabs";
-const Pt = Object.assign(be, { Panel: me, Tab: ue });
+W.displayName = "Tabs";
+const ze = Object.assign(W, { Panel: R, Tab: L });
 export {
-  Pt as Tabs,
-  be as TabsComponent,
-  St as useTab
+  ze as Tabs,
+  W as TabsComponent,
+  we as useTab
 };

package/dist/Window.css

@@ -0,0 +1 @@
+@layer components{._root_j3c87_2{border-style:solid;background-color:var(--components-colors-window-body-color-background-default);border-width:var(--components-dimensions-window-border-width);border-color:var(--components-colors-window-color-border-default);border-radius:var(--radius-lg);box-shadow:var(--elevation-10)}._header_j3c87_10{display:flex;align-items:center;justify-content:space-between;min-height:var(--components-dimensions-window-header-size-min-height);border-bottom:var(--components-dimensions-window-border-width) solid;border-color:var(--components-colors-window-color-border-default);padding-inline:var(--components-dimensions-window-header-padding-inline-xs);padding-block:var(--components-dimensions-window-header-padding-block-xs);gap:var(--components-dimensions-window-header-gap-content)}._header-title_j3c87_21{display:flex;flex:1;justify-content:center}._header-tabs_j3c87_26{display:flex;gap:var(--spacing-sm)}._header-tab-item_j3c87_30{cursor:pointer;display:flex;align-items:center;justify-content:center;transition-property:border-color,background-color,box-shadow;transition-timing-function:ease-in-out;border-radius:var(--radius-md);border-width:var(--components-dimensions-window-header-tab-border-width-active);gap:var(--spacing-xs);padding-block:var(--spacing-xs);padding-inline:var(--spacing-sm);transition-duration:var(--duration-fast);border-color:var(--windowTabItemBorderColor, transparent);background-color:var(--windowTabItemBackgroundColor, transparent);color:var(--windowTabItemColor, var(--components-colors-window-header-tab-color-text-default))}._header-tab-item_j3c87_30:hover{--windowTabItemBackgroundColor: var( --components-colors-window-header-tab-color-background-hover );--windowTabItemColor: var(--components-colors-window-header-tab-color-text-hover)}._header-tab-item_j3c87_30[aria-selected=true]{--windowTabItemBorderColor: var(--color-border-brand-primary);--windowTabItemBackgroundColor: var( --components-colors-window-header-tab-color-background-active );--windowTabItemColor: var(--components-colors-window-header-tab-color-text-active)}._header-action-button_j3c87_62{cursor:pointer;display:flex;justify-content:center;align-items:center;transition-property:border-color,background-color,box-shadow;transition-timing-function:ease-in-out;transition-duration:var(--duration-fast);width:var(--components-dimensions-window-header-action-size-container);height:var(--components-dimensions-window-header-action-size-container);border-radius:var(--components-dimensions-window-header-action-border-radius);outline:transparent solid var(--border-width-md);background-color:var(--windowButtonBackgroundColor, transparent)}._header-action-button_j3c87_62 svg{color:var(--windowButtonIconColor, var(--components-colors-window-header-action-color-icon-common-default))}._header-action-button_j3c87_62[data-focus-visible],._header-action-button_j3c87_62:focus-visible{outline-width:var(--components-dimensions-button-border-width-focused);outline-color:var(--components-colors-button-color-border-focused)}._header-action-button_j3c87_62:hover{--windowButtonBackgroundColor: var( --components-colors-window-header-action-color-background-common-hover );--windowButtonIconColor: var( --components-colors-window-header-action-color-icon-common-hover )}._header-action-button_j3c87_62:active{--windowButtonBackgroundColor: var( --components-colors-window-header-action-color-background-common-pressed );--windowButtonIconColor: var( --components-colors-window-header-action-color-icon-common-pressed )}._header-close-button_j3c87_101{border:1px solid var(--components-colors-window-header-action-color-border-close-default);--windowButtonIconColor: var(--components-colors-window-header-action-color-icon-close-default)}._header-close-button_j3c87_101:hover{--windowButtonBackgroundColor: var( --components-colors-window-header-action-color-background-close-hover );--windowButtonIconColor: var(--components-colors-window-header-action-color-icon-close-hover)}._header-close-button_j3c87_101:active{--windowButtonBackgroundColor: var( --components-colors-window-header-action-color-background-close-pressed );--windowButtonIconColor: var( --components-colors-window-header-action-color-icon-close-pressed )}._header-actions_j3c87_119{display:flex;gap:var(--components-dimensions-window-header-gap-content)}._tab-panel_j3c87_123[hidden]{display:none}._media_j3c87_126,._box-text_j3c87_127{margin-block:var(--components-dimensions-window-body-padding-block-xs);margin-inline:var(--components-dimensions-window-body-padding-inline-xs)}._media_j3c87_126 :first-child{border-radius:var(--components-dimensions-window-border-radius);max-width:100%;height:auto}._box-text_j3c87_127{border-radius:var(--components-dimensions-window-border-radius);background-color:var(--color-background-warm-primary);padding-block:var(--components-dimensions-window-body-padding-block-sm);padding-inline:var(--components-dimensions-window-body-padding-inline-sm)}._size-xl_j3c87_142{padding-block:var(--components-dimensions-window-body-padding-block-xl);padding-inline:var(--components-dimensions-window-body-padding-inline-xl)}._size-lg_j3c87_146{padding-block:var(--components-dimensions-window-body-padding-block-lg);padding-inline:var(--components-dimensions-window-body-padding-inline-lg)}._size-md_j3c87_150{padding-block:var(--components-dimensions-window-body-padding-block-md);padding-inline:var(--components-dimensions-window-body-padding-inline-md)}._size-sm_j3c87_154{padding-block:var(--components-dimensions-window-body-padding-block-sm);padding-inline:var(--components-dimensions-window-body-padding-inline-sm)}._size-xs_j3c87_158{padding-block:var(--components-dimensions-window-body-padding-block-xs);padding-inline:var(--components-dimensions-window-body-padding-inline-xs)}}