@mci-ui/mci-ui 0.0.88 → 0.0.90

package/dist/shared/ui/mciTable/MciTableColumnsPanel.js

@@ -1,122 +1,142 @@
-import { jsxs as g, jsx as l } from "react/jsx-runtime";
-import { useRef as K, useEffect as _, useMemo as F, useState as p, useCallback as d } from "react";
-import { TransferVertical as q } from "@solar-icons/react";
-import { useClickOutside as H, cn as s } from "../../lib/utils.js";
+import { jsxs as g, jsx as s } from "react/jsx-runtime";
+import { useRef as K, useEffect as q, useMemo as Y, useState as p, useCallback as h } from "react";
+import { TransferVertical as J } from "@solar-icons/react";
+import { useClickOutside as U, cn as l } from "../../lib/utils.js";
 /* empty css                 */
-import J from "../mciCheck/MciCheck.js";
-const U = {
+import V from "../mciCheck/MciCheck.js";
+const W = {
   ru: {
     title: "Настройки",
     close: "Закрыть",
     activeColumns: "Активные колонки",
-    minColumns: (c) => `Минимум ${c} колонок`,
+    minColumns: (u) => `Минимум ${u} колонок`,
     drag: "Перетащить"
   },
   uz: {
     title: "Sozlamalar",
     close: "Yopish",
     activeColumns: "Aktiv ustunlar",
-    minColumns: (c) => `Kamida ${c} ta ustun`,
+    minColumns: (u) => `Kamida ${u} ta ustun`,
     drag: "Sudrash"
   }
+}, X = {
+  blue: {
+    dropIndicator: "bg-blue-300",
+    darkDropIndicator: "bg-blue-500",
+    close: "hover:bg-blue-50 hover:text-blue-600 focus-visible:ring-2 focus-visible:ring-[rgba(21,93,252,0.25)]",
+    darkClose: "hover:bg-blue-500/20 hover:text-blue-400 focus-visible:ring-2 focus-visible:ring-[rgba(21,93,252,0.25)]"
+  },
+  yellow: {
+    dropIndicator: "bg-yellow-400",
+    darkDropIndicator: "bg-yellow-500",
+    close: "hover:bg-yellow-50 hover:text-yellow-600 focus-visible:ring-2 focus-visible:ring-yellow-200",
+    darkClose: "hover:bg-yellow-500/20 hover:text-yellow-300 focus-visible:ring-2 focus-visible:ring-yellow-300/40"
+  },
+  orange: {
+    dropIndicator: "bg-orange-400",
+    darkDropIndicator: "bg-orange-600",
+    close: "hover:bg-orange-50 hover:text-orange-600 focus-visible:ring-2 focus-visible:ring-[rgba(227,98,12,0.25)]",
+    darkClose: "hover:bg-orange-600/20 hover:text-orange-400 focus-visible:ring-2 focus-visible:ring-[rgba(227,98,12,0.25)]"
+  }
 };
-function te({
-  open: c,
-  onClose: C,
+function ae({
+  open: u,
+  onClose: N,
   columns: i,
-  hidden: y,
-  onToggle: T,
-  onMove: k,
+  hidden: k,
+  onToggle: I,
+  onMove: T,
   onMoveByKey: x,
   minVisible: S = 5,
-  locale: Q = "ru",
-  darkMode: r = !1
+  locale: _ = "ru",
+  darkMode: r = !1,
+  variant: E = "orange"
 }) {
-  const I = K(null), { handleClick: v } = H(I, C), m = U[Q];
-  _(() => {
-    if (c)
-      return document.addEventListener("mousedown", v), () => document.removeEventListener("mousedown", v);
-  }, [c, v]);
-  const w = F(() => new Set(y), [y]), O = F(() => {
+  const L = K(null), { handleClick: w } = U(L, N), f = W[_], v = X[E];
+  q(() => {
+    if (u)
+      return document.addEventListener("mousedown", w), () => document.removeEventListener("mousedown", w);
+  }, [u, w]);
+  const D = Y(() => new Set(k), [k]), O = Y(() => {
     let e = 0;
-    for (const t of i) w.has(t.key) || e++;
+    for (const t of i) D.has(t.key) || e++;
     return e;
-  }, [i, w]), [A, E] = p(null), [L, N] = p(null), [Y, z] = p(null), [f, D] = p("before"), P = d(
+  }, [i, D]), [y, P] = p(null), [z, A] = p(null), [$, R] = p(null), [m, C] = p("before"), j = h(
     (e, t, a) => {
       let n = a === "after" ? t + 1 : t;
       return e < n && (n -= 1), n;
     },
     []
-  ), h = d(() => {
-    E(null), z(null), N(null), D("before");
-  }, []), $ = d(
+  ), d = h(() => {
+    P(null), R(null), A(null), C("before");
+  }, []), B = h(
     (e, t, a) => {
-      E(t), z(String(a)), N(null), D("before"), e.dataTransfer.effectAllowed = "move", e.dataTransfer.setData("text/plain", String(t));
+      P(t), R(String(a)), A(null), C("before"), e.dataTransfer.effectAllowed = "move", e.dataTransfer.setData("text/plain", String(t));
       const n = new Image();
       n.src = "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=", e.dataTransfer.setDragImage(n, 0, 0);
     },
     []
-  ), B = d(
+  ), G = h(
     (e, t) => {
       e.preventDefault();
-      const a = A ?? Number.parseInt(e.dataTransfer.getData("text/plain") || "-1", 10);
+      const a = y ?? Number.parseInt(e.dataTransfer.getData("text/plain") || "-1", 10);
       if (!Number.isFinite(a) || a < 0) {
-        h();
+        d();
         return;
       }
       const n = i[a], b = i[t];
       if (!n || !b) {
-        h();
+        d();
         return;
       }
-      const o = P(a, t, f);
-      o !== a && (x ? x(n.key, b.key, f) : k(a, o)), h();
+      const o = j(a, t, m);
+      o !== a && (x ? x(n.key, b.key, m) : T(a, o)), d();
     },
-    [i, P, A, f, k, x, h]
-  ), G = d(
+    [i, j, y, m, T, x, d]
+  ), H = h(
     (e, t) => {
-      t || T(e);
+      t || I(e);
     },
-    [T]
+    [I]
   );
-  return c ? /* @__PURE__ */ g(
+  return u ? /* @__PURE__ */ g(
     "div",
     {
-      ref: I,
-      className: s(
+      ref: L,
+      className: l(
         "absolute right-0 top-full z-50 mt-2 w-[320px]",
         "rounded-2xl p-4",
         r ? "border border-neutral-200 bg-[#22242A] shadow-xl" : "border border-slate-200 bg-white"
       ),
       children: [
         /* @__PURE__ */ g("div", { className: "flex items-center justify-between gap-4", children: [
-          /* @__PURE__ */ l("h4", { className: s("text-large font-normal", r ? "text-neutral-50" : "text-slate-600"), children: m.title }),
-          /* @__PURE__ */ l(
+          /* @__PURE__ */ s("h4", { className: l("text-large font-normal", r ? "text-neutral-50" : "text-slate-600"), children: f.title }),
+          /* @__PURE__ */ s(
             "button",
             {
               type: "button",
-              onClick: C,
-              className: s(
-                "rounded-lg px-2 py-1",
-                r ? "text-neutral-100 hover:bg-neutral-300" : "text-slate-500 hover:bg-slate-100"
+              onClick: N,
+              className: l(
+                "cursor-pointer rounded-lg px-2 py-1",
+                r ? l("text-neutral-100 hover:bg-neutral-300", v.darkClose) : l("text-slate-500 hover:bg-slate-100", v.close)
               ),
-              "aria-label": m.close,
+              "aria-label": f.close,
               children: "✕"
             }
           )
         ] }),
-        /* @__PURE__ */ l("div", { className: s("my-4 h-px", r ? "bg-neutral-200" : "bg-slate-100") }),
-        /* @__PURE__ */ g("p", { className: s("mb-3 text-xs", r ? "text-neutral-100" : "text-slate-500"), children: [
-          m.activeColumns,
+        /* @__PURE__ */ s("div", { className: l("my-4 h-px", r ? "bg-neutral-200" : "bg-slate-100") }),
+        /* @__PURE__ */ g("p", { className: l("mb-3 text-xs", r ? "text-neutral-100" : "text-slate-500"), children: [
+          f.activeColumns,
           ": ",
           O,
           "/",
           i.length
         ] }),
-        /* @__PURE__ */ l(
+        /* @__PURE__ */ s(
           "div",
           {
-            className: s(
+            className: l(
               "max-h-[275px] overflow-auto",
               "[&::-webkit-scrollbar]:w-1.5",
               "[&::-webkit-scrollbar-track]:bg-transparent",
@@ -125,15 +145,15 @@ function te({
               r ? "hover:[&::-webkit-scrollbar-thumb]:bg-neutral-100" : "hover:[&::-webkit-scrollbar-thumb]:bg-slate-300"
             ),
             children: i.map((e, t) => {
-              const a = !w.has(e.key), n = a && O <= S, b = L === t, o = Y === e.key;
+              const a = !D.has(e.key), n = a && O <= S, b = z === t, o = $ === e.key;
               return /* @__PURE__ */ g("div", { className: "relative", children: [
-                b && !o && /* @__PURE__ */ l(
+                b && !o && /* @__PURE__ */ s(
                   "div",
                   {
-                    className: s(
+                    className: l(
                       "pointer-events-none absolute left-2 right-2 z-10 h-0.5 rounded-full",
-                      r ? "bg-blue-500" : "bg-blue-300",
-                      f === "before" ? "top-0" : "bottom-0"
+                      r ? v.darkDropIndicator : v.dropIndicator,
+                      m === "before" ? "top-0" : "bottom-0"
                     )
                   }
                 ),
@@ -141,57 +161,58 @@ function te({
                   "div",
                   {
                     draggable: !0,
-                    onDragStart: (u) => $(u, t, e.key),
-                    onDragOver: (u) => {
-                      if (A == null) return;
-                      u.preventDefault(), u.dataTransfer.dropEffect = "move";
-                      const R = u.currentTarget.getBoundingClientRect(), j = u.clientY - R.top > R.height / 2 ? "after" : "before";
-                      L !== t && N(t), f !== j && D(j);
+                    onDragStart: (c) => B(c, t, e.key),
+                    onDragOver: (c) => {
+                      if (y == null) return;
+                      c.preventDefault(), c.dataTransfer.dropEffect = "move";
+                      const F = c.currentTarget.getBoundingClientRect(), Q = c.clientY - F.top > F.height / 2 ? "after" : "before";
+                      z !== t && A(t), m !== Q && C(Q);
                     },
-                    onDrop: (u) => B(u, t),
-                    onDragEnd: h,
-                    className: s(
+                    onDrop: (c) => G(c, t),
+                    onDragEnd: d,
+                    className: l(
                       "group flex items-center py-2 px-1 gap-4",
                       "rounded-md box-border overflow-visible",
                       "transition-[background,transform] duration-150",
+                      !o && "cursor-grab",
                       !o && !b && (r ? "hover:bg-neutral-300/60" : "hover:bg-slate-50"),
                       b && !o && (r ? "bg-neutral-300/60" : "bg-slate-50"),
                       o && (r ? "bg-neutral-300 opacity-100 scale-[0.99] cursor-grabbing" : "bg-slate-50 opacity-100 scale-[0.99] cursor-grabbing")
                     ),
                     children: [
-                      /* @__PURE__ */ l(
+                      /* @__PURE__ */ s(
                         "button",
                         {
                           type: "button",
-                          className: s(
+                          className: l(
                             "shrink-0",
                             r ? "text-neutral-100" : "text-slate-400",
                             "cursor-grab active:cursor-grabbing",
                             r ? "rounded-lg p-1 hover:bg-neutral-200" : "rounded-lg p-1 hover:bg-slate-100",
                             o && "cursor-grabbing"
                           ),
-                          "aria-label": m.drag,
-                          children: /* @__PURE__ */ l(q, { weight: "Linear", size: 20 })
+                          "aria-label": f.drag,
+                          children: /* @__PURE__ */ s(J, { weight: "Linear", size: 20 })
                         }
                       ),
-                      /* @__PURE__ */ l("div", { className: "shrink-0", children: /* @__PURE__ */ l(
-                        J,
+                      /* @__PURE__ */ s("div", { className: "shrink-0", children: /* @__PURE__ */ s(
+                        V,
                         {
                           checked: a,
                           disabled: n,
-                          onChange: () => G(e.key, n),
-                          variant: "blue",
+                          onChange: () => H(e.key, n),
+                          variant: E,
                           darkMode: r
                         }
                       ) }),
                       /* @__PURE__ */ g("div", { className: "min-w-0 flex-1", children: [
-                        /* @__PURE__ */ l("h4", { className: s("truncate text-base font-medium", r ? "text-neutral-50" : "text-slate-700"), title: e.title, children: e.title }),
-                        n && /* @__PURE__ */ l("p", { className: s("mt-0.5 text-xs", r ? "text-neutral-100" : "text-slate-400"), children: m.minColumns(S) })
+                        /* @__PURE__ */ s("h4", { className: l("truncate text-base font-medium", r ? "text-neutral-50" : "text-slate-700"), title: e.title, children: e.title }),
+                        n && /* @__PURE__ */ s("p", { className: l("mt-0.5 text-xs", r ? "text-neutral-100" : "text-slate-400"), children: f.minColumns(S) })
                       ] })
                     ]
                   }
                 ),
-                t !== i.length - 1 && /* @__PURE__ */ l("div", { className: s("mx-2 h-px", r ? "bg-neutral-200" : "bg-slate-100") })
+                t !== i.length - 1 && /* @__PURE__ */ s("div", { className: l("mx-2 h-px", r ? "bg-neutral-200" : "bg-slate-100") })
               ] }, e.key);
             })
           }
@@ -201,5 +222,5 @@ function te({
   ) : null;
 }
 export {
-  te as default
+  ae as default
 };

package/dist/shared/ui/mciTabs/FilledTabs.js

@@ -0,0 +1,161 @@
+import { jsxs as u, jsx as r } from "react/jsx-runtime";
+import { useState as v, useRef as p, useCallback as I, useEffect as x, useMemo as O } from "react";
+import { cn as l } from "../../lib/utils.js";
+const j = {
+  top: "flex-col",
+  bottom: "flex-col-reverse",
+  left: "flex-row",
+  right: "flex-row-reverse"
+}, _ = {
+  top: "flex-row",
+  bottom: "flex-row",
+  left: "flex-col",
+  right: "flex-col"
+}, $ = {
+  top: "mt-4",
+  bottom: "mb-4",
+  left: "ml-4",
+  right: "mr-4"
+};
+function B({
+  tabs: t,
+  defaultTab: N,
+  position: c = "top",
+  darkMode: d = !1,
+  className: b,
+  tabListClassName: g,
+  contentClassName: S,
+  extra: w,
+  onChange: y
+}) {
+  const [i, E] = v(N || t[0]?.id), [A, T] = v({}), a = p([]), h = p(null), s = I(() => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        const e = t.findIndex((R) => R?.id === i), n = a.current[e];
+        if (!n) return;
+        const { offsetLeft: f, offsetTop: m, offsetWidth: z, offsetHeight: L } = n;
+        T({
+          left: `${f}px`,
+          top: `${m}px`,
+          width: `${z}px`,
+          height: `${L}px`,
+          transition: "all 0.35s cubic-bezier(0.25, 1, 0.5, 1)"
+        });
+      });
+    });
+  }, [i, t]);
+  x(() => (s(), window.addEventListener("resize", s), "fonts" in document && document.fonts.ready.then(s), () => window.removeEventListener("resize", s)), [c, s]), x(() => {
+    const e = h.current;
+    if (!e || typeof ResizeObserver > "u") return;
+    const n = new ResizeObserver(() => {
+      s();
+    });
+    return n.observe(e), a.current.forEach((f) => {
+      f && n.observe(f);
+    }), () => n.disconnect();
+  }, [t, s]), x(() => {
+    a.current = a.current.slice(0, t.length);
+  }, [t]);
+  const o = c === "left" || c === "right", C = O(
+    () => t.find((e) => e.id === i)?.content,
+    [i, t]
+  );
+  return /* @__PURE__ */ u("div", { className: l("flex w-full", j[c], b), children: [
+    /* @__PURE__ */ u(
+      "div",
+      {
+        className: l(
+          "flex w-full gap-4",
+          o ? "flex-col items-start" : "flex-row flex-wrap items-center"
+        ),
+        children: [
+          /* @__PURE__ */ r("div", { className: l("flex-1", o ? "w-full" : "min-w-[520px]"), children: /* @__PURE__ */ u(
+            "div",
+            {
+              ref: h,
+              className: l(
+                "relative flex rounded-xl p-1",
+                d ? "bg-neutral-300" : "bg-slate-100",
+                _[c],
+                !o && "w-full overflow-hidden",
+                o ? "min-w-48" : "",
+                g
+              ),
+              children: [
+                /* @__PURE__ */ r(
+                  "div",
+                  {
+                    className: l(
+                      "absolute rounded-lg",
+                      d ? "bg-black" : "bg-white",
+                      o ? "w-full" : "h-full"
+                    ),
+                    style: A
+                  }
+                ),
+                t?.map((e, n) => {
+                  const f = i === e.id;
+                  return /* @__PURE__ */ u(
+                    "button",
+                    {
+                      ref: (m) => {
+                        a.current[n] = m;
+                      },
+                      onClick: () => {
+                        e?.disabled || (E(e?.id), y?.(e?.id));
+                      },
+                      disabled: e?.disabled,
+                      className: l(
+                        "relative z-10 flex items-center justify-center px-3 py-2 text-base font-normal whitespace-nowrap transition-colors duration-300 hover:cursor-pointer",
+                        d ? "text-white" : "text-black",
+                        e?.disabled && (d ? "cursor-not-allowed text-neutral-100/50 opacity-60" : "cursor-not-allowed opacity-50"),
+                        o ? "w-full justify-start" : "min-w-0 flex-1"
+                      ),
+                      children: [
+                        e?.icon && /* @__PURE__ */ r(
+                          "span",
+                          {
+                            className: l(
+                              "shrink-0 transition-transform duration-200",
+                              f && "scale-110"
+                            ),
+                            children: e?.icon
+                          }
+                        ),
+                        /* @__PURE__ */ r("span", { className: "relative z-10 truncate", title: e?.label, children: e?.label })
+                      ]
+                    },
+                    e?.id
+                  );
+                })
+              ]
+            }
+          ) }),
+          w && /* @__PURE__ */ r("div", { className: l("ml-auto shrink-0", o ? "w-full" : "max-w-full"), children: /* @__PURE__ */ r("div", { className: "flex flex-wrap items-center justify-end gap-2", children: w }) })
+        ]
+      }
+    ),
+    C && /* @__PURE__ */ r(
+      "div",
+      {
+        className: l(
+          "w-full flex-1 overflow-hidden",
+          $[c],
+          S
+        ),
+        children: /* @__PURE__ */ r(
+          "div",
+          {
+            className: "w-full animate-fade-in",
+            style: { animationDuration: "0.35s" },
+            children: t?.find((e) => e.id === i)?.content
+          },
+          i
+        )
+      }
+    )
+  ] });
+}
+export {
+  B as default
+};

package/dist/shared/ui/mciTabs/MciTabs.js

@@ -1,149 +1,7 @@
-import { jsxs as u, jsx as i } from "react/jsx-runtime";
-import { useState as v, useRef as p, useCallback as R, useEffect as x } from "react";
-import { cn as t } from "../../lib/utils.js";
-const I = {
-  top: "flex-col",
-  bottom: "flex-col-reverse",
-  left: "flex-row",
-  right: "flex-row-reverse"
-}, O = {
-  top: "flex-row",
-  bottom: "flex-row",
-  left: "flex-col",
-  right: "flex-col"
-}, j = {
-  top: "mt-4",
-  bottom: "mb-4",
-  left: "ml-4",
-  right: "mr-4"
-};
-function q({
-  tabs: l,
-  defaultTab: N,
-  position: c = "top",
-  darkMode: d = !1,
-  className: b,
-  tabListClassName: g,
-  contentClassName: S,
-  extra: w,
-  onChange: y
-}) {
-  const [a, E] = v(N || l[0]?.id), [A, T] = v({}), f = p([]), h = p(null), n = R(() => {
-    requestAnimationFrame(() => {
-      requestAnimationFrame(() => {
-        const e = l.findIndex((L) => L?.id === a), r = f.current[e];
-        if (!r) return;
-        const { offsetLeft: o, offsetTop: m, offsetWidth: z, offsetHeight: C } = r;
-        T({
-          left: `${o}px`,
-          top: `${m}px`,
-          width: `${z}px`,
-          height: `${C}px`,
-          transition: "all 0.35s cubic-bezier(0.25, 1, 0.5, 1)"
-        });
-      });
-    });
-  }, [a, l]);
-  x(() => (n(), window.addEventListener("resize", n), "fonts" in document && document.fonts.ready.then(n), () => window.removeEventListener("resize", n)), [c, n]), x(() => {
-    const e = h.current;
-    if (!e || typeof ResizeObserver > "u") return;
-    const r = new ResizeObserver(() => {
-      n();
-    });
-    return r.observe(e), f.current.forEach((o) => {
-      o && r.observe(o);
-    }), () => r.disconnect();
-  }, [l, n]), x(() => {
-    f.current = f.current.slice(0, l.length);
-  }, [l]);
-  const s = c === "left" || c === "right";
-  return /* @__PURE__ */ u("div", { className: t("flex w-full", I[c], b), children: [
-    /* @__PURE__ */ u(
-      "div",
-      {
-        className: t(
-          "flex w-full gap-4",
-          s ? "flex-col items-start" : "flex-row flex-wrap items-center"
-        ),
-        children: [
-          /* @__PURE__ */ i(
-            "div",
-            {
-              className: t(
-                "flex-1",
-                s ? "w-full" : "min-w-[520px]"
-              ),
-              children: /* @__PURE__ */ u(
-                "div",
-                {
-                  ref: h,
-                  className: t(
-                    "relative flex rounded-xl p-1",
-                    d ? "bg-neutral-300" : "bg-slate-100",
-                    O[c],
-                    !s && "w-full overflow-hidden",
-                    s ? "min-w-48" : "",
-                    g
-                  ),
-                  children: [
-                    /* @__PURE__ */ i(
-                      "div",
-                      {
-                        className: t(
-                          "absolute rounded-lg",
-                          d ? "bg-black" : "bg-white",
-                          s ? "w-full" : "h-full"
-                        ),
-                        style: A
-                      }
-                    ),
-                    l?.map((e, r) => {
-                      const o = a === e.id;
-                      return /* @__PURE__ */ u(
-                        "button",
-                        {
-                          ref: (m) => {
-                            f.current[r] = m;
-                          },
-                          onClick: () => {
-                            e?.disabled || (E(e?.id), y?.(e?.id));
-                          },
-                          disabled: e?.disabled,
-                          className: t(
-                            "relative z-10 flex items-center justify-center whitespace-nowrap px-3 py-2 text-base font-normal transition-colors duration-300 hover:cursor-pointer",
-                            d ? "text-white" : "text-black",
-                            e?.disabled && (d ? "cursor-not-allowed text-neutral-100/50 opacity-60" : "cursor-not-allowed opacity-50"),
-                            s ? "w-full justify-start" : "flex-1 min-w-0"
-                          ),
-                          children: [
-                            e?.icon && /* @__PURE__ */ i("span", { className: t("shrink-0 transition-transform duration-200", o && "scale-110"), children: e?.icon }),
-                            /* @__PURE__ */ i("span", { className: "relative z-10 truncate", title: e?.label, children: e?.label })
-                          ]
-                        },
-                        e?.id
-                      );
-                    })
-                  ]
-                }
-              )
-            }
-          ),
-          w && /* @__PURE__ */ i(
-            "div",
-            {
-              className: t(
-                "shrink-0 ml-auto",
-                s ? "w-full" : "max-w-full"
-              ),
-              children: /* @__PURE__ */ i("div", { className: "flex flex-wrap items-center justify-end gap-2", children: w })
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ i("div", { className: t("w-full flex-1 overflow-hidden", j[c], S), children: /* @__PURE__ */ i("div", { className: "animate-fade-in w-full", style: { animationDuration: "0.35s" }, children: l?.find((e) => e.id === a)?.content }, a) })
-  ] });
-}
+import { jsx as r } from "react/jsx-runtime";
+import i from "./FilledTabs.js";
+import a from "./OutlinedTabs.js";
+const n = (t) => t.variant === "outlined" ? /* @__PURE__ */ r(a, { ...t }) : /* @__PURE__ */ r(i, { ...t });
 export {
-  q as default
+  n as default
 };