welcome-ui 10.0.0-alpha.11 → 10.0.0-alpha.12

package/dist/Swiper.js

@@ -1,268 +1,278 @@
 "use client";
 import './Swiper.css';
 import { jsxs as le, jsx as A } from "react/jsx-runtime";
-import { a as K, g as ce, c as ue } from "./index-PAaZGbyz.js";
-import { useRef as se, useEffect as q, useState as Z, useMemo as de, Children as oe, cloneElement as pe, useCallback as X } from "react";
-import { Button as re } from "./Button.js";
-import { Icon as ne } from "./Icon.js";
-import { u as fe } from "./use-viewport-CgrficYB.js";
+import { a as K, g as ce, c as de } from "./index-PAaZGbyz.js";
+import { useEffect as z, useLayoutEffect as ue, useState as Q, useRef as se, useMemo as pe, Children as ne, cloneElement as fe, useCallback as X } from "react";
+import { Button as oe } from "./Button.js";
+import { Icon as re } from "./Icon.js";
 var ee, ie;
-function me() {
+function he() {
   if (ie) return ee;
   ie = 1;
-  var i = "Expected a function", s = NaN, p = "[object Symbol]", h = /^\s+|\s+$/g, W = /^[-+]0x[0-9a-f]+$/i, L = /^0b[01]+$/i, m = /^0o[0-7]+$/i, v = parseInt, G = typeof K == "object" && K && K.Object === Object && K, T = typeof self == "object" && self && self.Object === Object && self, B = G || T || Function("return this")(), D = Object.prototype, C = D.toString, c = Math.max, F = Math.min, w = function() {
+  var s = "Expected a function", i = NaN, a = "[object Symbol]", b = /^\s+|\s+$/g, x = /^[-+]0x[0-9a-f]+$/i, L = /^0b[01]+$/i, h = /^0o[0-7]+$/i, _ = parseInt, G = typeof K == "object" && K && K.Object === Object && K, S = typeof self == "object" && self && self.Object === Object && self, B = G || S || Function("return this")(), D = Object.prototype, C = D.toString, d = Math.max, F = Math.min, w = function() {
     return B.Date.now();
   };
-  function P(e, o, a) {
-    var k, I, E, b, g, S, H = 0, M = !1, N = !1, U = !0;
+  function E(e, n, l) {
+    var k, I, P, g, m, T, H = 0, M = !1, N = !1, q = !0;
     if (typeof e != "function")
-      throw new TypeError(i);
-    o = u(o) || 0, _(a) && (M = !!a.leading, N = "maxWait" in a, E = N ? c(u(a.maxWait) || 0, o) : E, U = "trailing" in a ? !!a.trailing : U);
+      throw new TypeError(s);
+    n = u(n) || 0, v(l) && (M = !!l.leading, N = "maxWait" in l, P = N ? d(u(l.maxWait) || 0, n) : P, q = "trailing" in l ? !!l.trailing : q);
     function j(t) {
-      var l = k, f = I;
-      return k = I = void 0, H = t, b = e.apply(f, l), b;
-    }
-    function Q(t) {
-      return H = t, g = setTimeout(x, o), M ? j(t) : b;
+      var c = k, f = I;
+      return k = I = void 0, H = t, g = e.apply(f, c), g;
     }
     function Y(t) {
-      var l = t - S, f = t - H, $ = o - l;
-      return N ? F($, E - f) : $;
+      return H = t, m = setTimeout(W, n), M ? j(t) : g;
+    }
+    function Z(t) {
+      var c = t - T, f = t - H, $ = n - c;
+      return N ? F($, P - f) : $;
     }
     function y(t) {
-      var l = t - S, f = t - H;
-      return S === void 0 || l >= o || l < 0 || N && f >= E;
+      var c = t - T, f = t - H;
+      return T === void 0 || c >= n || c < 0 || N && f >= P;
     }
-    function x() {
+    function W() {
       var t = w();
       if (y(t))
         return O(t);
-      g = setTimeout(x, Y(t));
+      m = setTimeout(W, Z(t));
     }
     function O(t) {
-      return g = void 0, U && k ? j(t) : (k = I = void 0, b);
+      return m = void 0, q && k ? j(t) : (k = I = void 0, g);
     }
-    function d() {
-      g !== void 0 && clearTimeout(g), H = 0, k = S = I = g = void 0;
+    function p() {
+      m !== void 0 && clearTimeout(m), H = 0, k = T = I = m = void 0;
     }
-    function r() {
-      return g === void 0 ? b : O(w());
+    function o() {
+      return m === void 0 ? g : O(w());
     }
-    function n() {
-      var t = w(), l = y(t);
-      if (k = arguments, I = this, S = t, l) {
-        if (g === void 0)
-          return Q(S);
+    function r() {
+      var t = w(), c = y(t);
+      if (k = arguments, I = this, T = t, c) {
+        if (m === void 0)
+          return Y(T);
         if (N)
-          return g = setTimeout(x, o), j(S);
+          return m = setTimeout(W, n), j(T);
       }
-      return g === void 0 && (g = setTimeout(x, o)), b;
+      return m === void 0 && (m = setTimeout(W, n)), g;
     }
-    return n.cancel = d, n.flush = r, n;
+    return r.cancel = p, r.flush = o, r;
   }
-  function _(e) {
-    var o = typeof e;
-    return !!e && (o == "object" || o == "function");
+  function v(e) {
+    var n = typeof e;
+    return !!e && (n == "object" || n == "function");
   }
-  function z(e) {
+  function V(e) {
     return !!e && typeof e == "object";
   }
-  function V(e) {
-    return typeof e == "symbol" || z(e) && C.call(e) == p;
+  function U(e) {
+    return typeof e == "symbol" || V(e) && C.call(e) == a;
   }
   function u(e) {
     if (typeof e == "number")
       return e;
-    if (V(e))
-      return s;
-    if (_(e)) {
-      var o = typeof e.valueOf == "function" ? e.valueOf() : e;
-      e = _(o) ? o + "" : o;
+    if (U(e))
+      return i;
+    if (v(e)) {
+      var n = typeof e.valueOf == "function" ? e.valueOf() : e;
+      e = v(n) ? n + "" : n;
     }
     if (typeof e != "string")
       return e === 0 ? e : +e;
-    e = e.replace(h, "");
-    var a = L.test(e);
-    return a || m.test(e) ? v(e.slice(2), a ? 2 : 8) : W.test(e) ? s : +e;
+    e = e.replace(b, "");
+    var l = L.test(e);
+    return l || h.test(e) ? _(e.slice(2), l ? 2 : 8) : x.test(e) ? i : +e;
   }
-  return ee = P, ee;
+  return ee = E, ee;
 }
-var be = me();
-const ge = /* @__PURE__ */ ce(be), he = { xs: { value: "0px", type: "dimension", scope: ["WIDTH_HEIGHT"] }, sm: { value: "480px", type: "dimension", scope: ["WIDTH_HEIGHT"] }, md: { value: "736px", type: "dimension", scope: ["WIDTH_HEIGHT"] }, lg: { value: "980px", type: "dimension", scope: ["WIDTH_HEIGHT"] }, xl: { value: "1280px", type: "dimension", scope: ["WIDTH_HEIGHT"] }, "2xl": { value: "1440px", type: "dimension", scope: ["WIDTH_HEIGHT"] }, "3xl": { value: "1620px", type: "dimension", scope: ["WIDTH_HEIGHT"] }, "4xl": { value: "1920px", type: "dimension", scope: ["WIDTH_HEIGHT"] } }, we = {
-  breakpoint: he
+var ge = he();
+const me = /* @__PURE__ */ ce(ge), be = { xs: { value: "0px", type: "dimension", scope: ["WIDTH_HEIGHT"] }, sm: { value: "480px", type: "dimension", scope: ["WIDTH_HEIGHT"] }, md: { value: "736px", type: "dimension", scope: ["WIDTH_HEIGHT"] }, lg: { value: "980px", type: "dimension", scope: ["WIDTH_HEIGHT"] }, xl: { value: "1280px", type: "dimension", scope: ["WIDTH_HEIGHT"] }, "2xl": { value: "1440px", type: "dimension", scope: ["WIDTH_HEIGHT"] }, "3xl": { value: "1620px", type: "dimension", scope: ["WIDTH_HEIGHT"] }, "4xl": { value: "1920px", type: "dimension", scope: ["WIDTH_HEIGHT"] } }, we = {
+  breakpoint: be
 };
-function _e() {
-  return Object.entries(we.breakpoint).reduce((i, [s, p]) => {
-    if (s !== "$type" && typeof p == "object" && "value" in p) {
-      const h = typeof p.value == "string" ? Number(p.value.replace("px", "")) : p.value;
-      isNaN(h) || (i[s] = h);
+function ve() {
+  return Object.entries(we.breakpoint).reduce((s, [i, a]) => {
+    if (i !== "$type" && typeof a == "object" && "value" in a) {
+      const b = typeof a.value == "string" ? Number(a.value.replace("px", "")) : a.value;
+      isNaN(b) || (s[i] = b);
     }
-    return i;
+    return s;
   }, {});
 }
-const ve = "_root_1uvp8_3", ke = "_dark_1uvp8_9", ye = "_bullet_1uvp8_9", Te = "_container_1uvp8_15", Se = "_arrow_1uvp8_80", Ie = "_pagination_1uvp8_117", xe = {
-  root: ve,
-  dark: ke,
-  bullet: ye,
+const _e = typeof window > "u" ? z : ue;
+function ke() {
+  const [s, i] = Q({ height: void 0, width: void 0 });
+  return _e(() => {
+    i({ height: window.innerHeight, width: window.innerWidth });
+    function a() {
+      i({ height: window.innerHeight, width: window.innerWidth });
+    }
+    return window.addEventListener("resize", a), () => window.removeEventListener("resize", a);
+  }, []), s;
+}
+const ye = "_root_1uvp8_3", Se = "_dark_1uvp8_9", Te = "_bullet_1uvp8_9", Ie = "_container_1uvp8_15", We = "_arrow_1uvp8_80", xe = "_pagination_1uvp8_117", He = {
+  root: ye,
+  dark: Se,
+  bullet: Te,
   "bullet-active": "_bullet-active_1uvp8_12",
-  container: Te,
+  container: Ie,
   "container-mobile": "_container-mobile_1uvp8_44",
   "container-tablet": "_container-tablet_1uvp8_53",
   "container-desktop": "_container-desktop_1uvp8_62",
   "container-full-width": "_container-full-width_1uvp8_75",
-  arrow: Se,
+  arrow: We,
   "arrow-left": "_arrow-left_1uvp8_91",
   "arrow-right": "_arrow-right_1uvp8_94",
   "arrow-mobile": "_arrow-mobile_1uvp8_97",
   "arrow-desktop": "_arrow-desktop_1uvp8_106",
   "arrow-background": "_arrow-background_1uvp8_111",
-  pagination: Ie,
+  pagination: xe,
   "pagination-mobile": "_pagination-mobile_1uvp8_126",
   "pagination-desktop": "_pagination-desktop_1uvp8_135"
-}, We = (i, s) => {
-  const p = se();
-  q(() => {
-    p.current = i;
-  }, [i]), q(() => {
-    function h() {
-      p.current();
+}, Le = (s, i) => {
+  const a = se();
+  z(() => {
+    a.current = s;
+  }, [s]), z(() => {
+    function b() {
+      a.current();
     }
-    if (s !== null) {
-      const W = setInterval(h, s);
-      return () => clearInterval(W);
+    if (i !== null) {
+      const x = setInterval(b, i);
+      return () => clearInterval(x);
     }
-  }, [s]);
-}, J = (i, s) => {
-  if (s === 0)
-    return `${100 / i}%`;
-  const h = s * (i === 1 ? 4 : 2) / 16;
-  return `calc(${100 / i}% - ${h}rem)`;
-}, R = ue(xe), De = (i = {}) => {
+  }, [i]);
+}, J = (s, i) => {
+  if (i === 0)
+    return `${100 / s}%`;
+  const b = i * (s === 1 ? 4 : 2) / 16;
+  return `calc(${100 / s}% - ${b}rem)`;
+}, R = de(He), Ce = (s = {}) => {
   const {
-    autoplay: s = !1,
-    centeredSlides: p = !1,
-    duration: h = 5e3,
-    firstSlideToShow: W = 0,
+    autoplay: i = !1,
+    centeredSlides: a = !1,
+    duration: b = 5e3,
+    firstSlideToShow: x = 0,
     fullWidth: L = !1,
-    id: m = "swiper",
-    loop: v = !1,
+    id: h = "swiper",
+    loop: _ = !1,
     navigationSize: G = "md",
-    slidesPerView: T = { desktop: 1, mobile: 1, tablet: 1 },
+    slidesPerView: S = { desktop: 1, mobile: 1, tablet: 1 },
     spaceBetween: B = 20,
     withDarkUI: D = !1,
     withNavigation: C = { desktop: !0, mobile: !0 },
-    withPagination: c = { desktop: !1, mobile: !1 }
-  } = i, F = v || s, { width: w } = fe(), [P, _] = Z(0), [z, V] = Z(!1), [u, e] = Z(!1), o = se(), a = _e(), k = de(() => w <= a.md ? T.mobile : w <= a.lg ? T.tablet : w >= a["4xl"] && L ? T.desktop + 2 : T.desktop, [w, a, L, T]);
+    withPagination: d = { desktop: !1, mobile: !1 }
+  } = s, F = _ || i, { width: w } = ke(), [E, v] = Q(0), [V, U] = Q(!1), [u, e] = Q(!1), n = se(), l = ve(), k = pe(() => w <= l.md ? S.mobile : w <= l.lg ? S.tablet : w >= l["4xl"] && L ? S.desktop + 2 : S.desktop, [w, l, L, S]);
   return {
-    autoplay: s,
-    centeredSlides: p,
-    currentPage: P,
+    autoplay: i,
+    centeredSlides: a,
+    currentPage: E,
     currentSlidesPerView: k,
-    duration: h,
-    firstSlideToShow: W,
+    duration: b,
+    firstSlideToShow: x,
     fullWidth: L,
-    id: m,
+    id: h,
     navigationSize: G,
-    ref: o,
-    setCurrentPage: _,
-    setShowLeftArrow: V,
+    ref: n,
+    setCurrentPage: v,
+    setShowLeftArrow: U,
     setShowRightArrow: e,
     shouldLoop: F,
-    showLeftArrow: z,
+    showLeftArrow: V,
     showRightArrow: u,
-    slidesPerView: T,
+    slidesPerView: S,
     spaceBetween: B,
     withDarkUI: D,
     withNavigation: C,
-    withPagination: c
+    withPagination: d
   };
-}, He = ({ children: i, className: s, store: p, ...h }) => {
+}, Ee = ({ children: s, className: i, store: a, ...b }) => {
   const {
-    autoplay: W,
+    autoplay: x,
     centeredSlides: L,
-    currentPage: m,
-    currentSlidesPerView: v,
+    currentPage: h,
+    currentSlidesPerView: _,
     duration: G,
-    firstSlideToShow: T,
+    firstSlideToShow: S,
     fullWidth: B,
     id: D,
     navigationSize: C,
-    ref: c,
+    ref: d,
     setCurrentPage: F,
     setShowLeftArrow: w,
-    setShowRightArrow: P,
-    shouldLoop: _,
-    showLeftArrow: z,
-    showRightArrow: V,
+    setShowRightArrow: E,
+    shouldLoop: v,
+    showLeftArrow: V,
+    showRightArrow: U,
     slidesPerView: u,
     spaceBetween: e,
-    withDarkUI: o,
-    withNavigation: a,
+    withDarkUI: n,
+    withNavigation: l,
     withPagination: k
-  } = p, I = oe.toArray(i).length, E = Math.ceil(I / v), b = Array.from(Array(E).keys()), g = a.mobile || !1, S = a.desktop || !1, H = m === 0, M = m === b.length - 1, N = oe.map(i, (d, r) => {
-    const n = `${D}-${r}`, t = r + 1, l = Math.ceil(t / v) - 1, f = M ? I - t >= v : l !== m;
-    return pe(d, {
-      ...d.props,
+  } = a, I = ne.toArray(s).length, P = Math.ceil(I / _), g = Array.from(Array(P).keys()), m = l.mobile || !1, T = l.desktop || !1, H = h === 0, M = h === g.length - 1, N = ne.map(s, (p, o) => {
+    const r = `${D}-${o}`, t = o + 1, c = Math.ceil(t / _) - 1, f = M ? I - t >= _ : c !== h;
+    return fe(p, {
+      ...p.props,
       "aria-hidden": f,
       "aria-label": `${t} of ${I}`,
       "aria-roledescription": "slide",
-      id: n,
-      key: n
+      id: r,
+      key: r
     });
-  }), U = L ? (
+  }), q = L ? (
     // if centeredSlides is true, we calculate which number is the middle page
-    Math.floor(E / 2)
+    Math.floor(P / 2)
   ) : (
     // if centeredSlides is false, we calculate on which page the number in firstSlideToShow props is
-    Math.ceil(T / v) - 1
+    Math.ceil(S / _) - 1
   ), j = X(() => {
-    const d = c == null ? void 0 : c.current;
-    if (d && !_) {
-      const { offsetWidth: r, scrollLeft: n, scrollWidth: t } = d, l = !(n > e), f = !(t - (n + r) > e);
-      w(!l), P(!f);
+    const p = d == null ? void 0 : d.current;
+    if (p && !v) {
+      const { offsetWidth: o, scrollLeft: r, scrollWidth: t } = p, c = !(r > e), f = !(t - (r + o) > e);
+      w(!c), E(!f);
     } else
-      w(!0), P(!0);
-  }, [c, w, P, _, e]), Q = () => {
-    var r, n;
-    const d = c == null ? void 0 : c.current;
-    if (d) {
-      const { children: t, offsetWidth: l, scrollLeft: f, scrollWidth: $ } = d, ae = (n = (r = t == null ? void 0 : t[0]) == null ? void 0 : r.getBoundingClientRect()) == null ? void 0 : n.width, te = !($ - (f + l) > e) ? b.length - 1 : Math.round(f / ((ae + e) * v));
-      te !== m && F(te);
+      w(!0), E(!0);
+  }, [d, w, E, v, e]), Y = () => {
+    var o, r;
+    const p = d == null ? void 0 : d.current;
+    if (p) {
+      const { children: t, offsetWidth: c, scrollLeft: f, scrollWidth: $ } = p, ae = (r = (o = t == null ? void 0 : t[0]) == null ? void 0 : o.getBoundingClientRect()) == null ? void 0 : r.width, te = !($ - (f + c) > e) ? g.length - 1 : Math.round(f / ((ae + e) * _));
+      te !== h && F(te);
     }
-  }, Y = ge(() => {
-    j(), Q();
+  }, Z = me(() => {
+    j(), Y();
   }, 100), y = X(
-    (d, r = !1) => {
-      var l, f, $;
-      const n = c == null ? void 0 : c.current, t = ($ = (f = (l = n == null ? void 0 : n.children) == null ? void 0 : l[0]) == null ? void 0 : f.getBoundingClientRect()) == null ? void 0 : $.width;
-      n == null || n.scrollTo({
+    (p, o = !1) => {
+      var c, f, $;
+      const r = d == null ? void 0 : d.current, t = ($ = (f = (c = r == null ? void 0 : r.children) == null ? void 0 : c[0]) == null ? void 0 : f.getBoundingClientRect()) == null ? void 0 : $.width;
+      r == null || r.scrollTo({
         // We don't want to have a scroll effect when we first render the swiper
-        behavior: r ? "auto" : "smooth",
-        left: d * (t + e) * v,
+        behavior: o ? "auto" : "smooth",
+        left: p * (t + e) * _,
         top: 0
       });
     },
-    [v, e, c]
-  ), x = X(() => {
-    y(_ && M ? 0 : m + 1);
-  }, [m, y, M, _]), O = X(() => {
-    y(H && _ ? b.length - 1 : m - 1);
-  }, [b.length, m, y, H, _]);
-  return We(
+    [_, e, d]
+  ), W = X(() => {
+    y(v && M ? 0 : h + 1);
+  }, [h, y, M, v]), O = X(() => {
+    y(H && v ? g.length - 1 : h - 1);
+  }, [g.length, h, y, H, v]);
+  return Le(
     () => {
-      W && x();
+      x && W();
     },
-    W ? G : null
-  ), q(() => {
-    const d = (r) => {
-      r.code === "ArrowLeft" && O(), r.code === "ArrowRight" && x();
+    x ? G : null
+  ), z(() => {
+    const p = (o) => {
+      o.code === "ArrowLeft" && O(), o.code === "ArrowRight" && W();
     };
-    return window.addEventListener("keydown", d), () => window.removeEventListener("keydown", d);
-  }, [O, x]), q(() => {
-    y(U, !0);
-  }, []), q(() => {
+    return window.addEventListener("keydown", p), () => window.removeEventListener("keydown", p);
+  }, [O, W]), z(() => {
+    y(q, !0);
+  }, []), z(() => {
     j();
-  }, [j, i]), /* @__PURE__ */ le("div", { className: R("root", o && "dark", s), ...h, children: [
+  }, [j, s]), /* @__PURE__ */ le("div", { className: R("root", n && "dark", i), ...b, children: [
     /* @__PURE__ */ A(
       "ul",
       {
@@ -273,8 +283,8 @@ const ve = "_root_1uvp8_3", ke = "_dark_1uvp8_9", ye = "_bullet_1uvp8_9", Te = "
           u.tablet && "container-tablet",
           u.desktop && B && "container-full-width"
         ),
-        onScroll: Y,
-        ref: c,
+        onScroll: Z,
+        ref: d,
         style: {
           "--slideDesktop": u.desktop,
           "--slideMobile": u.mobile,
@@ -289,39 +299,39 @@ const ve = "_root_1uvp8_3", ke = "_dark_1uvp8_9", ye = "_bullet_1uvp8_9", Te = "
       }
     ),
     /* @__PURE__ */ A(
-      re,
+      oe,
       {
         "aria-label": "Previous slide",
         className: R(
           "arrow",
           "arrow-left",
-          !o && "arrow-background",
-          g && "arrow-mobile",
-          S && "arrow-desktop"
+          !n && "arrow-background",
+          m && "arrow-mobile",
+          T && "arrow-desktop"
         ),
-        disabled: !z,
+        disabled: !V,
         onClick: O,
         size: C,
-        variant: o ? "primary-neutral" : "tertiary",
-        children: /* @__PURE__ */ A(ne, { name: "angle-left-b" })
+        variant: n ? "primary-neutral" : "tertiary",
+        children: /* @__PURE__ */ A(re, { name: "angle-left-b" })
       }
     ),
     /* @__PURE__ */ A(
-      re,
+      oe,
       {
         "aria-label": "Next slide",
         className: R(
           "arrow",
           "arrow-right",
-          !o && "arrow-background",
-          g && "arrow-mobile",
-          S && "arrow-desktop"
+          !n && "arrow-background",
+          m && "arrow-mobile",
+          T && "arrow-desktop"
         ),
-        disabled: !V,
-        onClick: x,
+        disabled: !U,
+        onClick: W,
         size: C,
-        variant: o ? "primary-neutral" : "tertiary",
-        children: /* @__PURE__ */ A(ne, { name: "angle-right-b" })
+        variant: n ? "primary-neutral" : "tertiary",
+        children: /* @__PURE__ */ A(re, { name: "angle-right-b" })
       }
     ),
     /* @__PURE__ */ A(
@@ -333,30 +343,30 @@ const ve = "_root_1uvp8_3", ke = "_dark_1uvp8_9", ye = "_bullet_1uvp8_9", Te = "
           k.desktop && "pagination-desktop"
         ),
         role: "tablist",
-        children: b.length > 1 && b.map((d, r) => {
-          const n = {
-            "aria-controls": `${D}-${r}`,
-            "aria-label": `${r + 1} of ${b.length}`,
-            "aria-selected": r === m,
-            idx: r,
-            onClick: () => y(r),
+        children: g.length > 1 && g.map((p, o) => {
+          const r = {
+            "aria-controls": `${D}-${o}`,
+            "aria-label": `${o + 1} of ${g.length}`,
+            "aria-selected": o === h,
+            idx: o,
+            onClick: () => y(o),
             role: "tab"
           };
           return /* @__PURE__ */ A(
             "div",
             {
-              className: R("bullet", r === m && "bullet-active"),
-              ...n
+              className: R("bullet", o === h && "bullet-active"),
+              ...r
             },
-            `bullet-${r + 1}`
+            `bullet-${o + 1}`
           );
         })
       }
     )
   ] });
 };
-He.displayName = "Swiper";
+Ee.displayName = "Swiper";
 export {
-  He as Swiper,
-  De as useSwiper
+  Ee as Swiper,
+  Ce as useSwiper
 };

package/dist/Tabs.css

@@ -1 +1 @@
-@layer components{._root_156xk_2{position:absolute;will-change:width,transform;transition-property:all;transition-duration:var(--duration-medium);transition-timing-function:var(--timing-primary);background-color:var(--components-colors-tab-color-background-checked-pressed)}[aria-orientation=horizontal] ._root_156xk_2{width:var(--activeBarSize);height:var(--components-dimensions-tab-border-width-checked);left:0;bottom:0;transform:translate(var(--activeBarOffset))}[aria-orientation=vertical] ._root_156xk_2{width:var(--components-dimensions-tab-border-width-checked);height:var(--activeBarSize);right:0;top:0;transform:translateY(var(--activeBarOffset))}}@layer components{._root_3pg7f_2{width:100%;position:relative;display:flex;overflow-x:auto;border:0;gap:var(--components-dimensions-tab-size-icon-lg);--tabFontSize: var(--components-dimensions-tab-padding-inline-lg);--tabBoxShadow: inset 0 calc(-1 * var(--components-dimensions-tab-border-width-unchecked)) 0 var(--color-background-neutral-subtlest);font-size:var(--tabFontSize);box-shadow:var(--tabBoxShadow)}._root_3pg7f_2[aria-orientation=vertical]{flex-direction:column;--tabBoxShadow: inset calc(-1 * var(--components-dimensions-tab-border-width-unchecked)) 0 0 var(--color-background-neutral-subtlest)}._size-md_3pg7f_20{--tabFontSize: var(--components-dimensions-tab-padding-inline-lg)}._size-sm_3pg7f_23{--tabFontSize: var(--font-size-14)}}@layer components{._root_etkg6_2:focus{outline:none}[aria-orientation=horizontal] ._root_etkg6_2{margin-top:var(--components-dimensions-tab-size-icon-lg)}[aria-orientation=vertical] ._root_etkg6_2{margin-left:var(--components-dimensions-tab-size-icon-lg)}}@layer components{._root_86cgt_2{border:0;background:none;color:var(--tabsColor, var(--color-background-neutral-tertiary));font-weight:var(--font-weight-medium);line-height:var(--font-size-lg);text-decoration:none;display:flex;align-items:center;flex:none;padding:var(--components-dimensions-tab-padding-inline-md) 0;transition:var(--duration-medium);text-transform:none;cursor:pointer;gap:var(--components-dimensions-tab-padding-block-md)}._root_86cgt_2:focus{outline:none!important}._root_86cgt_2:focus:not([aria-selected=true]){--tabsColor: var(--components-colors-tab-color-text-unchecked-pressed)}._root_86cgt_2[aria-selected=true]{--tabsColor: var(--components-colors-tab-color-text-unchecked-pressed)}._root_86cgt_2[aria-disabled=true]{--tabsColor: var(--color-icon-neutral-subtle);cursor:not-allowed}._root_86cgt_2:hover:not([aria-selected=true]):not([aria-disabled=true]){--tabsColor: var(--components-colors-tab-color-text-unchecked-pressed)}._root_86cgt_2>svg,._root_86cgt_2 img{max-height:var(--components-dimensions-tab-padding-inline-lg);max-width:var(--components-dimensions-tab-padding-inline-lg)}._root_86cgt_2>span{max-height:var(--components-dimensions-tab-padding-inline-lg)}}
+@layer components{._root_nt8z5_2{display:flex;align-items:center;transition-property:background-color,border-color,color,box-shadow;transition-timing-function:ease-in-out;border-radius:var(--radius-md);transition-duration:var(--duration-medium);font-weight:var(--font-weight-medium);gap:var(--tabGap);max-height:var(--tabItemMaxHeight);padding-block:var(--tabPaddingBlock);padding-inline:var(--tabPaddingInline);font-size:var(--tabFontSize);background-color:var(--tabItemBackgroundColor, var(--components-colors-tab-color-background-unchecked-default));color:var(--tabItemColor, var(--components-colors-tab-color-text-unchecked-default));box-shadow:inset 0 0 0 var(--tabItemBorderSize, var(--components-dimensions-tab-border-width-unchecked)) var(--tabItemBorderColor, var(--components-colors-tab-color-border-unchecked-default)),var(--tabItemBoxShadow, var(--elevation-10))}._root_nt8z5_2:focus{outline:none!important;--tabItemColor: var(--components-colors-tab-color-text-unchecked-pressed);--tabItemBackgroundColor: var(--components-colors-tab-color-background-unchecked-pressed);--tabItemBorderColor: var(--components-colors-tab-color-border-unchecked-pressed)}._root_nt8z5_2:focus[aria-selected=true]{--tabItemColor: var(--components-colors-tab-color-text-checked-pressed);--tabItemBackgroundColor: var(--components-colors-tab-color-background-checked-pressed);--tabItemBorderColor: var(--components-colors-tab-color-border-checked-pressed)}._root_nt8z5_2[aria-selected=true]{--tabItemColor: var(--components-colors-tab-color-text-checked-default);--tabItemBackgroundColor: var(--components-colors-tab-color-background-checked-default);--tabItemBorderColor: var(--components-colors-tab-color-border-checked-default);--tabItemBorderSize: var(--components-dimensions-tab-border-width-checked)}._root_nt8z5_2[aria-selected=true]:hover{--tabItemColor: var(--components-colors-tab-color-text-checked-hover);--tabItemBackgroundColor: var(--components-colors-tab-color-background-checked-hover);--tabItemBorderColor: var(--components-colors-tab-color-border-checked-hover);--tabItemBorderSize: var(--components-dimensions-tab-border-width-checked);--tabItemBoxShadow: var(--elevation-20)}._root_nt8z5_2[aria-disabled=true]{--tabItemColor: var(--color-icon-neutral-subtle);cursor:not-allowed}._root_nt8z5_2:hover:not([aria-selected=true]):not([aria-disabled=true]){--tabItemColor: var(--components-colors-tab-color-text-unchecked-hover);--tabItemBackgroundColor: var(--components-colors-tab-color-background-unchecked-hover);--tabItemBorderColor: var(--components-colors-tab-color-border-unchecked-hover);--tabItemBoxShadow: var(--elevation-20)}._size-lg_nt8z5_55{--tabItemMaxHeight: var(--components-dimensions-tab-size-max-height-lg);--tabPaddingBlock: var(--components-dimensions-tab-padding-block-lg);--tabPaddingInline: var(--components-dimensions-tab-padding-inline-lg);--tabFontSize: var(--font-size-sm);--tabGap: var(--components-dimensions-tab-gap-content-lg)}._size-md_nt8z5_62{--tabItemMaxHeight: var(--components-dimensions-tab-size-max-height-md);--tabPaddingBlock: var(--components-dimensions-tab-padding-block-md);--tabPaddingInline: var(--components-dimensions-tab-padding-inline-md);--tabFontSize: var(--font-size-xs);--tabGap: var(--components-dimensions-tab-gap-content-md)}._tab-list_nt8z5_72{display:flex;align-items:center;gap:var(--tabsGap, 0)}._tab-list_nt8z5_72._size-lg_nt8z5_55{--tabsGap: var(--components-dimensions-tab-gap-content-lg)}._tab-list_nt8z5_72._size-md_nt8z5_62{--tabsGap: var(--components-dimensions-tab-gap-content-md)}}