@tcn/ui 0.3.0 → 0.3.1

package/dist/inputs/select/select.js

@@ -2,7 +2,7 @@ import { jsxs as z, Fragment as G, jsx as u } from "react/jsx-runtime";
 import "../../utils/click_away_listener.js";
 import "../../utils/focus_redirect.js";
 import "../../utils/scroll_away_listener.js";
-import w, { useRef as c, useState as L } from "react";
+import F, { useRef as c, useState as w } from "react";
 import { useForkRef as H } from "../../utils/hooks/use_fork_ref.js";
 import "../../utils/hooks/use_resize_observer.js";
 import { clsx as J } from "clsx";
@@ -13,16 +13,16 @@ import "../../actions/button/slim_button/slim_button.js";
 import { Button as W } from "../../actions/button/button/button.js";
 import "../../actions/button/select_group/select_group.js";
 import "../../actions/button/select_group/single_select_group.js";
-import '../../select.css';const X = "_select_aabe288", Y = "_selectedLabel_b92ff3e", O = { select: X, selectedLabel: Y };
+import '../../select.css';const X = "_select_aabe288", Y = "_selectedLabel_b92ff3e", L = { select: X, selectedLabel: Y };
 function Z(a, t) {
   return a.find((n) => n.props.value === t);
 }
-const pe = w.forwardRef(function({
+const pe = F.forwardRef(function({
   children: t = [],
   onKeyDown: n,
   onKeyUp: f,
   value: m,
-  placeholder: _ = "-- Select --",
+  placeholder: O = "-- Select --",
   noOptionMatchedMessage: x,
   trimCustomInput: C = !1,
   className: E,
@@ -31,10 +31,10 @@ const pe = w.forwardRef(function({
   onChange: g,
   ...T
 }, D) {
-  const K = w.Children.toArray(
+  const K = F.Children.toArray(
     t
-  ), l = c(""), M = c(!1), h = c(!1), [j, S] = L(null), i = c(null), [y, b] = L(!1), q = H(D, i), R = Z(K, m || ""), k = R == null ? _ || "" : R.props.label;
-  function A() {
+  ), l = c(""), M = c(!1), h = c(!1), [j, S] = w(null), i = c(null), [y, b] = w(!1), q = H(D, i), R = Z(K, m || ""), k = R == null ? O || "" : R.props.label;
+  function _() {
     b(!0);
   }
   function o() {
@@ -47,9 +47,9 @@ const pe = w.forwardRef(function({
     }), o();
   }
   function N(e, s, r) {
-    const F = i.current;
-    F != null && requestAnimationFrame(() => {
-      r && g && g(e), F.focus();
+    const A = i.current;
+    A != null && requestAnimationFrame(() => {
+      r && g && g(e), A.focus();
     }), o();
   }
   function U(e) {
@@ -61,20 +61,20 @@ const pe = w.forwardRef(function({
     const s = l.current = e.key;
     l.current = "";
     const r = e.key;
-    s && (r === "Enter" || r === " ") && (y ? o() : A()), f && f(e);
+    s && (r === "Enter" || r === " ") && (y ? o() : _()), f && f(e);
   }
   function I(e) {
     S(e.currentTarget), M.current = document.activeElement === e.currentTarget, p && p(e);
   }
   function P(e) {
-    h.current && (h.current = !1, o()), A(), d && d(e);
+    h.current && (h.current = !1, o()), _(), d && d(e);
   }
   return /* @__PURE__ */ z(G, { children: [
     /* @__PURE__ */ u(
       W,
       {
         ref: q,
-        className: J(E, "select", O.select),
+        className: J(E, "select", L.select),
         width: "100%",
         ...T,
         hAlign: "start",
@@ -83,7 +83,7 @@ const pe = w.forwardRef(function({
         onKeyUp: V,
         onMouseDown: I,
         onMouseUp: P,
-        children: /* @__PURE__ */ u("span", { className: O.selectedLabel, children: k })
+        children: /* @__PURE__ */ u("span", { className: L.selectedLabel, children: k })
       }
     ),
     y && /* @__PURE__ */ u(

package/dist/inputs/slider/slider.js

@@ -6,33 +6,33 @@ import "../../utils/focus_redirect.js";
 import "../../utils/scroll_away_listener.js";
 import { useForkRef as R } from "../../utils/hooks/use_fork_ref.js";
 import "../../utils/hooks/use_resize_observer.js";
-import '../../slider.css';const S = "_slider_eb84151", b = { slider: S }, N = g.forwardRef(function({ style: l, className: a, width: u, min: r = 0, max: t = 100, onChange: o, ...n }, c) {
-  const i = v(null), d = R(c, i);
+import '../../slider.css';const S = "_slider_eb84151", _ = { slider: S }, N = g.forwardRef(function({ style: i, className: a, width: u, min: t = 0, max: r = 100, onChange: o, ...n }, d) {
+  const l = v(null), c = R(d, l);
   return y(() => {
-    const e = i.current;
+    const e = l.current;
     if (e == null) return;
     const s = () => {
-      const f = (parseFloat(e.value) - r) / (t - r) * 100;
+      const f = (parseFloat(e.value) - t) / (r - t) * 100;
       e.style.setProperty("--progress", `${f}%`);
     };
     return e.addEventListener("input", s), s(), () => {
       e.removeEventListener("input", s);
     };
-  }, [r, t]), /* @__PURE__ */ p(
+  }, [t, r]), /* @__PURE__ */ p(
     "input",
     {
       type: "range",
-      className: m(a, b.slider, "slider"),
+      className: m(a, _.slider, "slider"),
       "data-is-disabled": n.disabled || !1,
-      ref: d,
+      ref: c,
       onChange: (e) => {
         o && o(e.currentTarget.value, e);
       },
       ...n,
-      min: String(r),
-      max: String(t),
+      min: String(t),
+      max: String(r),
       "data-width": "100%",
-      style: { width: u, ...l }
+      style: { width: u, ...i }
     }
   );
 });

package/dist/inputs/switch/switch.js

@@ -19,10 +19,10 @@ import '../../switch.css';const g = "_switch-wrapper_db1838e", j = "_switch_bf67
   ...t
 }, h) {
   const [m, a] = k(!1), p = B(null), b = y(d, p), r = {};
-  function I(s) {
+  function _(s) {
     t.onBlur && t.onBlur(s), a(!1);
   }
-  function _(s) {
+  function I(s) {
     t.onFocus && t.onFocus(s), a(!0);
   }
   i != null && (r["--accent-color"] = i);
@@ -50,8 +50,8 @@ import '../../switch.css';const g = "_switch-wrapper_db1838e", j = "_switch_bf67
             ref: b,
             type: "checkbox",
             className: o(e.switch, "switch"),
-            onBlur: I,
-            onFocus: _,
+            onBlur: _,
+            onFocus: I,
             style: { ...f, ...r },
             checked: c,
             "data-is-disabled": t.disabled || !1,

package/dist/inputs/textarea/textarea.js

@@ -1,14 +1,14 @@
-import { jsx as l } from "react/jsx-runtime";
+import { jsx as c } from "react/jsx-runtime";
 import { clsx as f } from "clsx";
-import i from "react";
-import '../../textarea.css';const m = "_textarea_8286394", n = { textarea: m }, p = i.forwardRef(function({ className: r, width: s, height: o, style: x, onChange: t, ...e }, c) {
-  return /* @__PURE__ */ l(
+import d from "react";
+import '../../textarea.css';const i = "_textarea_8286394", m = { textarea: i }, b = d.forwardRef(function({ className: r, width: s, height: o, style: x, onChange: t, ...e }, l) {
+  return /* @__PURE__ */ c(
     "textarea",
     {
       style: { width: s, height: o, ...x },
-      className: f(r, n.textarea, "textarea"),
+      className: f(r, m.textarea, "textarea"),
       "data-is-disabled": e.disabled || !1,
-      ref: c,
+      ref: l,
       onChange: (a) => {
         t && t(a.currentTarget.value, a);
       },
@@ -17,6 +17,6 @@ import '../../textarea.css';const m = "_textarea_8286394", n = { textarea: m },
   );
 });
 export {
-  p as Textarea
+  b as Textarea
 };
 //# sourceMappingURL=textarea.js.map

package/dist/inputs/unit_input/unit_input.js

@@ -25,13 +25,13 @@ const O = y.forwardRef(function({
   ...R
 }, N) {
   const a = k(null), S = E(b, a);
-  function I(e, u) {
+  function _(e, u) {
     if (u == null)
       return;
     const n = u.currentTarget, f = n.selectionStart || 0, i = A(e), m = Number(i);
     n.value = i, i.length < e.length && n.setSelectionRange(f - 1, f - 1), i === "" ? t && t(null, r || "") : isNaN(m) || t && t(m, r || "");
   }
-  function _(e) {
+  function I(e) {
     const u = a.current;
     if (u == null)
       return;
@@ -51,7 +51,7 @@ const O = y.forwardRef(function({
           {
             className: o(s["unit-input-number"], "unit-input-number"),
             ref: S,
-            onChange: I,
+            onChange: _,
             disabled: c,
             style: {
               borderEndEndRadius: 0,
@@ -67,7 +67,7 @@ const O = y.forwardRef(function({
             ref: x,
             width: "auto",
             value: r,
-            onChange: _,
+            onChange: I,
             disabled: c,
             style: { borderStartStartRadius: 0, borderEndStartRadius: 0 },
             children: d

package/dist/layouts/body/h_body.js

@@ -1,15 +1,15 @@
-import { jsx as c } from "react/jsx-runtime";
-import { HStack as f } from "../../stacks/h_stack.js";
+import { jsx as s } from "react/jsx-runtime";
+import { HStack as c } from "../../stacks/h_stack.js";
 import m from "react";
 import { clsx as y } from "clsx";
-import '../../h_body.css';const a = "_h-body_d56f4f1", n = { "h-body": a }, l = m.forwardRef(function({ children: o, className: t, overflowX: r = "auto", ...d }, s) {
-  return /* @__PURE__ */ c(
-    f,
+import '../../h_body.css';const a = "_h-body_d56f4f1", e = { "h-body": a }, l = m.forwardRef(function({ children: o, className: t, overflowX: r = "auto", ...d }, f) {
+  return /* @__PURE__ */ s(
+    c,
     {
-      ref: s,
+      ref: f,
       as: "div",
       overflowX: r,
-      className: y(n["h-body"], t, "tcn-h-body", "body"),
+      className: y(e["h-body"], t, "tcn-h-body", "body"),
       ...d,
       children: o
     }

package/dist/layouts/body/v_body.js

@@ -1,15 +1,15 @@
 import { jsx as s } from "react/jsx-runtime";
-import { VStack as m } from "../../stacks/v_stack.js";
-import y from "react";
-import { clsx as f } from "clsx";
-import '../../v_body.css';const n = "_v-body_d8f1917", a = { "v-body": n }, l = y.forwardRef(function({ children: o, className: t, overflowY: r = "auto", ...d }, c) {
+import { VStack as f } from "../../stacks/v_stack.js";
+import m from "react";
+import { clsx as y } from "clsx";
+import '../../v_body.css';const a = "_v-body_d8f1917", n = { "v-body": a }, l = m.forwardRef(function({ children: o, className: t, overflowY: r = "auto", ...d }, c) {
   return /* @__PURE__ */ s(
-    m,
+    f,
     {
       ref: c,
       as: "div",
       overflowY: r,
-      className: f(a["v-body"], t, "tcn-body", "tcn-v-body"),
+      className: y(n["v-body"], t, "tcn-body", "tcn-v-body"),
       ...d,
       children: o
     }

package/dist/layouts/column/column.js

@@ -1,46 +1,46 @@
-import { jsx as s } from "react/jsx-runtime";
-import { clsx as t } from "clsx";
+import { jsx as n } from "react/jsx-runtime";
+import { clsx as s } from "clsx";
 import x from "react";
 import { Box as b } from "../../stacks/box/box.js";
-import { VStack as i } from "../../stacks/v_stack.js";
-import '../../column.css';const C = "_column_ce05462", N = "_column-stack_80b940b", r = { column: C, "column-stack": N }, z = x.forwardRef(function({
-  children: l,
+import { VStack as d } from "../../stacks/v_stack.js";
+import '../../column.css';const i = "_column_ce05462", C = "_column-stack_80b940b", l = { column: i, "column-stack": C }, z = x.forwardRef(function({
+  children: r,
   width: u,
   height: a,
   minWidth: o,
   maxWidth: c,
-  minHeight: m,
-  maxHeight: n,
+  minHeight: t,
+  maxHeight: m,
   hAlign: e,
   vAlign: f = "start",
   className: k,
   ...p
 }, _) {
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ n(
     b,
     {
       width: u,
       height: a,
       minWidth: o,
       maxWidth: c,
-      minHeight: m,
-      maxHeight: n,
-      className: t(k, r.column, "column"),
+      minHeight: t,
+      maxHeight: m,
+      className: s(k, l.column, "column"),
       ...p,
-      children: /* @__PURE__ */ s(
-        i,
+      children: /* @__PURE__ */ n(
+        d,
         {
           minWidth: o,
           maxWidth: c,
-          minHeight: m,
-          maxHeight: n,
+          minHeight: t,
+          maxHeight: m,
           hAlign: e,
           vAlign: f,
           ref: _,
           as: "section",
-          className: t(r["column-stack"], "column-stack"),
+          className: s(l["column-stack"], "column-stack"),
           zIndex: 0,
-          children: l
+          children: r
         }
       )
     }

package/dist/layouts/footer/footer.js

@@ -1,22 +1,22 @@
-import { jsx as f } from "react/jsx-runtime";
+import { jsx as c } from "react/jsx-runtime";
 import s from "react";
 import { clsx as m } from "clsx";
 import { HStack as n } from "../../stacks/h_stack.js";
-import '../../footer.css';const i = "_footer_4a43c3e", d = { footer: i }, u = s.forwardRef(function({ hierarchy: o = "secondary", size: r = "md", children: t, className: e, ...a }, c) {
-  return /* @__PURE__ */ f(
+import '../../footer.css';const i = "_footer_4a43c3e", d = { footer: i }, y = s.forwardRef(function({ hierarchy: o = "secondary", size: t = "md", children: r, className: e, ...a }, f) {
+  return /* @__PURE__ */ c(
     n,
     {
-      ref: c,
+      ref: f,
       as: "footer",
       className: m(d.footer, e, "tcn-footer"),
       "data-hierarchy": o,
-      "data-size": r,
+      "data-size": t,
       ...a,
-      children: t
+      children: r
     }
   );
 });
 export {
-  u as Footer
+  y as Footer
 };
 //# sourceMappingURL=footer.js.map

package/dist/layouts/grid/grid.js

@@ -4,13 +4,13 @@ import c from "react";
 import { removeUndefinedProperties as z } from "../../stacks/utils/remove_undefined_properties.js";
 import '../../grid.css';const B = "_grid_d0ae3e3", D = { grid: B }, L = c.forwardRef(function({
   as: l = "div",
-  children: e,
+  children: r,
   style: d,
   className: a,
   itemHeight: m,
   itemWidth: o,
   columnAmount: i,
-  gap: r,
+  gap: e,
   rowGap: f,
   columnGap: p,
   padding: h,
@@ -18,27 +18,27 @@ import '../../grid.css';const B = "_grid_d0ae3e3", D = { grid: B }, L = c.forwar
   paddingBlock: y,
   paddingInlineStart: g,
   paddingInlineEnd: u,
-  paddingTop: $,
-  paddingBottom: A,
-  margin: v,
-  marginInline: w,
-  marginBlock: C,
-  marginInlineStart: G,
-  marginInlineEnd: R,
-  marginTop: S,
-  marginBottom: _,
+  paddingTop: _,
+  paddingBottom: $,
+  margin: A,
+  marginInline: v,
+  marginBlock: w,
+  marginInlineStart: C,
+  marginInlineEnd: G,
+  marginTop: R,
+  marginBottom: S,
   zIndex: j,
   ...M
 }, N) {
-  const P = l, U = c.Children.toArray(e).length, W = `repeat(auto-fill, ${o}px)`;
+  const P = l, U = c.Children.toArray(r).length, W = `repeat(auto-fill, ${o}px)`;
   let t;
   if (i) {
     const n = Math.min(i, U), s = String(n * o) + "px";
-    r ? t = `calc(${s} + ${r} * ${n - 1})` : t = s;
+    e ? t = `calc(${s} + ${e} * ${n - 1})` : t = s;
   } else
     t = "100%";
   const b = z({
-    gap: r,
+    gap: e,
     rowGap: f,
     columnGap: p,
     "--item-height": m + "px",
@@ -49,19 +49,19 @@ import '../../grid.css';const B = "_grid_d0ae3e3", D = { grid: B }, L = c.forwar
     paddingBlock: y,
     paddingInlineStart: g,
     paddingInlineEnd: u,
-    paddingTop: $,
-    paddingBottom: A,
-    margin: v,
-    marginInline: w,
-    marginBlock: C,
-    marginInlineStart: G,
-    marginInlineEnd: R,
-    marginTop: S,
-    marginBottom: _,
+    paddingTop: _,
+    paddingBottom: $,
+    margin: A,
+    marginInline: v,
+    marginBlock: w,
+    marginInlineStart: C,
+    marginInlineEnd: G,
+    marginTop: R,
+    marginBottom: S,
     zIndex: j,
     ...d
   });
-  return /* @__PURE__ */ k(P, { ref: N, className: q(D.grid, a), style: b, ...M, children: e });
+  return /* @__PURE__ */ k(P, { ref: N, className: q(D.grid, a), style: b, ...M, children: r });
 });
 export {
   L as Grid

package/dist/layouts/header/header.js

@@ -2,7 +2,7 @@ import { jsx as c } from "react/jsx-runtime";
 import m from "react";
 import { clsx as f } from "clsx";
 import { HStack as h } from "../../stacks/h_stack.js";
-import '../../header.css';const n = "_header_3155fa4", i = { header: n }, H = m.forwardRef(function({
+import '../../header.css';const n = "_header_3155fa4", i = { header: n }, y = m.forwardRef(function({
   hierarchy: e = "secondary",
   height: r = "auto",
   children: a,
@@ -25,6 +25,6 @@ import '../../header.css';const n = "_header_3155fa4", i = { header: n }, H = m.
   );
 });
 export {
-  H as Header
+  y as Header
 };
 //# sourceMappingURL=header.js.map

package/dist/layouts/list/item.js

@@ -2,7 +2,7 @@ import { jsx as m } from "react/jsx-runtime";
 import o from "react";
 import { HStack as c } from "../../stacks/h_stack.js";
 import { clsx as f } from "clsx";
-const x = o.forwardRef(function({ children: r, className: a, selected: t = !1, ...e }, i) {
+const u = o.forwardRef(function({ children: r, className: a, selected: t = !1, ...e }, i) {
   return /* @__PURE__ */ m(
     c,
     {
@@ -17,6 +17,6 @@ const x = o.forwardRef(function({ children: r, className: a, selected: t = !1, .
   );
 });
 export {
-  x as Item
+  u as Item
 };
 //# sourceMappingURL=item.js.map

package/dist/layouts/list/list.js

@@ -1,14 +1,14 @@
-import { jsx as f } from "react/jsx-runtime";
-import i from "react";
-import { clsx as a } from "clsx";
+import { jsx as m } from "react/jsx-runtime";
+import a from "react";
+import { clsx as i } from "clsx";
 import { VStack as c } from "../../stacks/v_stack.js";
-const x = i.forwardRef(function({ children: t, className: o, isOrdered: r = !1, ...s }, m) {
-  return /* @__PURE__ */ f(
+const x = a.forwardRef(function({ children: t, className: o, isOrdered: r = !1, ...s }, f) {
+  return /* @__PURE__ */ m(
     c,
     {
-      ref: m,
+      ref: f,
       as: r ? "ol" : "ul",
-      className: a("tcn-list", o),
+      className: i("tcn-list", o),
       ...s,
       children: t
     }

package/dist/layouts/list/section_header.js

@@ -1,12 +1,12 @@
-import { jsx as i } from "react/jsx-runtime";
-import a from "react";
-import { HStack as c } from "../../stacks/h_stack.js";
-const d = a.forwardRef(
+import { jsx as a } from "react/jsx-runtime";
+import f from "react";
+import { HStack as i } from "../../stacks/h_stack.js";
+const p = f.forwardRef(
   function({ children: r, className: o, ...t }, e) {
-    return /* @__PURE__ */ i(c, { ref: e, as: "li", className: o, ...t, children: r });
+    return /* @__PURE__ */ a(i, { ref: e, as: "li", className: o, ...t, children: r });
   }
 );
 export {
-  d as SectionHeader
+  p as SectionHeader
 };
 //# sourceMappingURL=section_header.js.map

package/dist/layouts/scaffold/scaffold.js

@@ -1,47 +1,47 @@
 import { jsx as l } from "react/jsx-runtime";
 import S from "react";
 import { clsx as d } from "clsx";
-import { Box as x } from "../../stacks/box/box.js";
-import { VStack as i } from "../../stacks/v_stack.js";
-import '../../scaffold.css';const u = "_scaffold-stack_8f97a6a", N = { "scaffold-stack": u }, B = S.forwardRef(function({
+import { Box as _ } from "../../stacks/box/box.js";
+import { VStack as u } from "../../stacks/v_stack.js";
+import '../../scaffold.css';const x = "_scaffold-stack_8f97a6a", i = { "scaffold-stack": x }, B = S.forwardRef(function({
   children: n,
-  width: m,
-  height: e = "100%",
+  width: e,
+  height: m = "100%",
   minWidth: a,
   maxWidth: c,
   minHeight: o,
   maxHeight: f,
-  hAlign: s,
-  vAlign: t = "start",
+  hAlign: t,
+  vAlign: s = "start",
   className: k,
   ...p
 }, r) {
   return /* @__PURE__ */ l(
-    x,
+    _,
     {
       ref: r,
-      width: m,
-      height: e,
+      width: e,
+      height: m,
       minWidth: a,
       maxWidth: c,
       minHeight: o,
       maxHeight: f,
-      "data-h-alignment": s,
-      "data-v-alignment": t,
+      "data-h-alignment": t,
+      "data-v-alignment": s,
       className: d(k, "tcn-scaffold"),
       ...p,
       children: /* @__PURE__ */ l(
-        i,
+        u,
         {
           as: "section",
           minWidth: a,
           maxWidth: c,
           minHeight: o,
           maxHeight: f,
-          hAlign: s,
-          vAlign: t,
+          hAlign: t,
+          vAlign: s,
           ref: r,
-          className: d(N["scaffold-stack"], "tcn-scaffold-stack"),
+          className: d(i["scaffold-stack"], "tcn-scaffold-stack"),
           zIndex: 0,
           children: n
         }

package/dist/layouts/sidebar_end/sidebar_end.js

@@ -1,9 +1,9 @@
 import { jsx as n } from "react/jsx-runtime";
-import { Box as x } from "../../stacks/box/box.js";
-import { VStack as l } from "../../stacks/v_stack.js";
-import { clsx as B } from "clsx";
-import _ from "react";
-import '../../sidebar_end.css';const y = "_sidebarEndBox_25f69cc", S = "_sidebarEnd_cb253a2", c = { sidebarEndBox: y, sidebarEnd: S }, I = _.forwardRef(
+import { Box as p } from "../../stacks/box/box.js";
+import { VStack as x } from "../../stacks/v_stack.js";
+import { clsx as _ } from "clsx";
+import B from "react";
+import '../../sidebar_end.css';const u = "_sidebarEndBox_25f69cc", y = "_sidebarEnd_cb253a2", c = { sidebarEndBox: u, sidebarEnd: y }, I = B.forwardRef(
   function({
     hierarchy: t = "secondary",
     children: b,
@@ -13,13 +13,13 @@ import '../../sidebar_end.css';const y = "_sidebarEndBox_25f69cc", S = "_sidebar
     maxWidth: a,
     minHeight: d,
     maxHeight: e,
-    hAlign: i,
-    vAlign: f = "start",
+    hAlign: f,
+    vAlign: i = "start",
     className: m,
     ...E
-  }, p) {
+  }, l) {
     return /* @__PURE__ */ n(
-      x,
+      p,
       {
         width: r,
         height: o,
@@ -31,7 +31,7 @@ import '../../sidebar_end.css';const y = "_sidebarEndBox_25f69cc", S = "_sidebar
         as: "section",
         ...E,
         children: /* @__PURE__ */ n(
-          l,
+          x,
           {
             width: r,
             height: o,
@@ -39,11 +39,11 @@ import '../../sidebar_end.css';const y = "_sidebarEndBox_25f69cc", S = "_sidebar
             maxWidth: a,
             minHeight: d,
             maxHeight: e,
-            hAlign: i,
-            vAlign: f,
-            ref: p,
+            hAlign: f,
+            vAlign: i,
+            ref: l,
             "data-hierarchy": t,
-            className: B(c.sidebarEnd, m, "sidebar-end"),
+            className: _(c.sidebarEnd, m, "sidebar-end"),
             zIndex: 0,
             children: b
           }