@konstructio/ui 0.1.2-alpha.41 → 0.1.2-alpha.44

package/dist/components/Dropdown/Dropdown.js

@@ -1,44 +1,44 @@
-import { jsx as s, jsxs as w } from "react/jsx-runtime";
+import { jsx as o, jsxs as w } from "react/jsx-runtime";
 import { forwardRef as h } from "react";
-import { cn as o } from "../../utils/index.js";
+import { cn as r } from "../../utils/index.js";
 import { DropdownProvider as v } from "./contexts/dropdown.provider.js";
 import { Wrapper as N } from "./components/Wrapper.js";
 const W = h(
   ({
     error: t,
-    errorClassName: i,
-    helperText: r,
-    helperTextClassName: m,
+    errorClassName: e,
+    helperText: s,
+    helperTextClassName: i,
     highlightSearch: a,
     mainWrapperClassName: p,
     name: l,
     value: d,
     options: n,
     onChange: c,
-    onBlur: e,
+    onBlur: m,
     ...f
-  }, x) => /* @__PURE__ */ s(
+  }, x) => /* @__PURE__ */ o(
     v,
     {
       highlightSearch: a,
       name: l,
       value: d,
       options: n,
-      onBlur: e,
+      onBlur: m,
       onChange: c,
-      children: /* @__PURE__ */ w("div", { className: o("relative w-full", p), children: [
-        /* @__PURE__ */ s(
+      children: /* @__PURE__ */ w("div", { className: r("relative w-full", p), children: [
+        /* @__PURE__ */ o(
           N,
           {
             error: t,
             name: l,
             ref: x,
-            onBlur: e,
+            onBlur: m,
             ...f
           }
         ),
-        t ? /* @__PURE__ */ s("span", { className: o("text-xs text-red-700", i), children: t }) : null,
-        !t && r ? /* @__PURE__ */ s("span", { className: o("text-xs text-slate-600", m), children: r }) : null
+        t ? /* @__PURE__ */ o("span", { className: r("text-xs text-red-700", e), children: t }) : null,
+        !t && s ? /* @__PURE__ */ o("span", { className: r("text-xs text-metal-600", i), children: s }) : null
       ] })
     }
   )

package/dist/components/Dropdown/Dropdown.variants.js

@@ -22,8 +22,9 @@ const a = e(
     "aria-expanded:text-aurora-500",
     "kubefirst:aria-expanded:border-kubefirst-primary",
     "kubefirst:aria-expanded:text-kubefirst-secondary",
-    "dark:border-slate-600",
-    "dark:focus-visible:bg-slate-800"
+    "dark:border-metal-700",
+    "dark:focus-visible:bg-metal-800",
+    "dark:bg-metal-800"
   ],
   {
     variants: {
@@ -37,7 +38,7 @@ const a = e(
         false: ""
       },
       disabled: {
-        true: ["cursor-default", "bg-gray-100", "dark:bg-slate-700/80"],
+        true: ["cursor-default", "bg-gray-100", "dark:bg-metal-700/80"],
         false: []
       }
     },
@@ -57,15 +58,15 @@ const a = e(
   "placeholder:text-sm",
   "placeholder:normal-case",
   "placeholder:select-none",
-  "dark:placeholder:text-slate-400",
-  "dark:text-slate-50"
+  "dark:placeholder:text-metal-400",
+  "dark:text-metal-50"
 ]), d = e([
   "mb-1",
   "cursor-pointer",
   "text-sm",
   "leading-5",
   "tracking-[0.1px]",
-  "dark:text-slate-50"
+  "dark:text-metal-50"
 ]);
 export {
   a as dropdownVariants,

package/dist/components/Dropdown/components/List/List.js

@@ -1,9 +1,9 @@
 import { jsxs as V, jsx as r } from "react/jsx-runtime";
-import { S as Z } from "../../../../index-BtQfgaSF.js";
+import { S as Z } from "../../../../index-BvoZGpli.js";
 import { d as B } from "../../../../debounce-BFejQm9P.js";
 import { forwardRef as G, useRef as C, useState as J, useImperativeHandle as K, useMemo as M, useEffect as Q } from "react";
 import { Loading as R } from "../../../Loading/Loading.js";
-import { cn as a } from "../../../../utils/index.js";
+import { cn as s } from "../../../../utils/index.js";
 import { useNavigationUlList as W } from "../../hooks/useNavigationList.js";
 import { ListItem as b } from "../ListItem/ListItem.js";
 import { listVariants as X } from "./List.variants.js";
@@ -24,11 +24,11 @@ const fe = G(
     onFetchMoreOptions: f,
     noOptionsText: L
   }, O) => {
-    const o = C(null), m = C(null), [p, w] = J(!1), {
+    const n = C(null), m = C(null), [p, w] = J(!1), {
       isOpen: P,
       searchTerm: g,
       canFilter: S,
-      canContinueFetching: n,
+      canContinueFetching: a,
       page: d,
       options: x,
       isTyping: k,
@@ -36,31 +36,31 @@ const fe = G(
       setPage: D,
       setCanContinueFetching: U
     } = $();
-    K(O, () => o.current, [o]);
+    K(O, () => n.current, [n]);
     const h = y && S ? x.filter((e) => {
       const t = g.toLowerCase();
       return (typeof e.label == "string" ? e.label.toLowerCase() : "").includes(t);
     }) : x;
     W({
-      ulRef: o,
+      ulRef: n,
       wrapperInputRef: j,
       searchable: y,
       filteredOptions: h
     });
     const _ = h.filter(
-      (e, t, s) => t === s.findIndex((v) => v.value === e.value)
+      (e, t, o) => t === o.findIndex((v) => v.value === e.value)
     ), q = h.length === 0, z = M(
       () => B(async (e) => {
         const [t] = e;
-        if (t.isIntersecting && !p && f && n)
+        if (t.isIntersecting && !p && f && a)
           try {
             w(!0);
-            const s = d + 1, { data: v, hasMore: A } = await f({
-              page: s,
+            const o = d + 1, { data: v, hasMore: A } = await f({
+              page: o,
               pageSize: Y,
               termOfSearch: g
             });
-            D(s), U(A), T((H) => [...H, ...v]);
+            D(o), U(A), T((H) => [...H, ...v]);
           } catch {
             console.error("Error fetching more options");
           } finally {
@@ -70,7 +70,7 @@ const fe = G(
       [p, f, g, d]
     );
     return Q(() => {
-      if (u && n && m.current && !k) {
+      if (u && a && m.current && !k) {
         const e = new IntersectionObserver(z, {
           threshold: 0.1
         });
@@ -78,23 +78,23 @@ const fe = G(
       }
     }, [
       u,
-      n,
+      a,
       p,
       k,
       d
     ]), /* @__PURE__ */ V(
       "ul",
       {
-        ref: o,
+        ref: n,
         title: I,
         role: "listbox",
-        className: a(X({ className: N })),
+        className: s(X({ className: N })),
         "data-state": P ? "open" : "closed",
         children: [
           E ? /* @__PURE__ */ r(
             b,
             {
-              className: a("select-none", l),
+              className: s("select-none", l),
               isClickable: !1,
               inputRef: i,
               value: "Loading...",
@@ -105,7 +105,7 @@ const fe = G(
             b,
             {
               isEmpty: !0,
-              className: a("select-none", l),
+              className: s("select-none", l),
               isClickable: !1,
               inputRef: i,
               value: L ?? "",
@@ -115,7 +115,7 @@ const fe = G(
           ) : _.map((e) => /* @__PURE__ */ r(
             b,
             {
-              className: a("select-none", l),
+              className: s("select-none", l),
               isClickable: !0,
               inputRef: i,
               listItemSecondRowClassName: c,
@@ -123,7 +123,7 @@ const fe = G(
             },
             e.value
           )),
-          u && n && /* @__PURE__ */ r(
+          u && a && /* @__PURE__ */ r(
             "li",
             {
               ref: m,
@@ -134,7 +134,29 @@ const fe = G(
               children: /* @__PURE__ */ r(R, { className: "w-4 h-4 text-aurora-500 select-none" })
             }
           ),
-          F?.map((e, t) => /* @__PURE__ */ r("li", { role: "option", "data-action": "true", children: /* @__PURE__ */ r(Z, { className: "flex p-2 w-full h-full gap-1 items-center text-sm [&>svg]:w-3.5 [&>svg]:h-3.5 [&>svg]:shrink-0 cursor-pointer select-none hover:bg-gray-50 hover:dark:bg-slate-700 focus:outline-0", children: e }) }, t))
+          F?.map((e, t) => /* @__PURE__ */ r("li", { role: "option", "data-action": "true", children: /* @__PURE__ */ r(
+            Z,
+            {
+              className: s(
+                "flex",
+                "p-2",
+                "w-full",
+                "h-full",
+                "gap-1",
+                "items-center",
+                "text-sm",
+                "[&>svg]:w-3.5",
+                "[&>svg]:h-3.5",
+                "[&>svg]:shrink-0",
+                "cursor-pointer",
+                "select-none",
+                "hover:bg-gray-50",
+                "hover:dark:bg-metal-700",
+                "focus:outline-0"
+              ),
+              children: e
+            }
+          ) }, t))
         ]
       }
     );

package/dist/components/Dropdown/components/List/List.variants.js

@@ -11,17 +11,17 @@ const t = o([
   "top-full",
   "w-full",
   "z-10",
-  "max-h-[185px]",
+  "max-h-46.25",
   "overflow-y-auto",
   "border-gray-200",
   "text-zinc-700",
   "animate-in",
   "fade-in-50",
   "zoom-in-95",
-  "duration-[200ms]",
-  "dark:bg-slate-800",
-  "dark:border-slate-700",
-  "dark:text-slate-50"
+  "duration-200",
+  "dark:bg-metal-800",
+  "dark:border-metal-700",
+  "dark:text-metal-50"
 ]);
 export {
   t as listVariants

package/dist/components/Dropdown/components/ListItem/ListItem.js

@@ -1,23 +1,23 @@
-import { jsx as s, jsxs as d } from "react/jsx-runtime";
+import { jsx as n, jsxs as d } from "react/jsx-runtime";
 import { useRef as I, useCallback as u } from "react";
 import { cn as l } from "../../../../utils/index.js";
 import { Typography as y } from "../../../Typography/Typography.js";
 import { listItemVariants as L } from "./ListItem.variants.js";
 import { useDropdownContext as V } from "../../contexts/dropdown.hook.js";
-function j(c, n) {
-  const i = n.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), o = new RegExp(`(${i})`, "gi");
-  return c.split(o).map((a, t) => a.toLowerCase() === n.toLowerCase() ? /* @__PURE__ */ s(
+function j(c, r) {
+  const i = r.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), o = new RegExp(`(${i})`, "gi");
+  return c.split(o).map((a, t) => a.toLowerCase() === r.toLowerCase() ? /* @__PURE__ */ n(
     "mark",
     {
-      className: "bg-transparent font-semibold text-slate-800 dark:text-slate-50",
+      className: "bg-transparent font-semibold text-metal-800 dark:text-metal-50",
       children: a
     },
     t
-  ) : /* @__PURE__ */ s("span", { children: a }, t));
+  ) : /* @__PURE__ */ n("span", { children: a }, t));
 }
 const K = ({
   isEmpty: c,
-  isClickable: n,
+  isClickable: r,
   className: i,
   inputRef: o,
   listItemSecondRowClassName: a,
@@ -29,18 +29,18 @@ const K = ({
     },
     [p, x]
   ), w = u(
-    (e, r) => {
-      e.key === "Enter" && (e.stopPropagation(), f(r));
+    (e, s) => {
+      e.key === "Enter" && (e.stopPropagation(), f(s));
     },
     [f]
   ), N = u(
-    ({ label: e, rightComponent: r, subLabel: g, rightComponentClassName: C }) => {
+    ({ label: e, rightComponent: s, subLabel: g, rightComponentClassName: C }) => {
       if (c)
-        return /* @__PURE__ */ s(
+        return /* @__PURE__ */ n(
           y,
           {
             variant: "body2",
-            className: "text-zinc-800 dark:text-slate-50 italic",
+            className: "text-zinc-800 dark:text-metal-50 italic",
             children: e
           }
         );
@@ -51,24 +51,24 @@ const K = ({
         y,
         {
           variant: "body2",
-          className: "text-zinc-700 dark:text-slate-50 font-medium",
+          className: "text-zinc-700 dark:text-metal-50 font-medium",
           children: [
-            r ? /* @__PURE__ */ d(
+            s ? /* @__PURE__ */ d(
               "span",
               {
                 className: l("flex gap-2 items-center", C),
                 children: [
                   k,
                   " ",
-                  r
+                  s
                 ]
               }
             ) : k,
-            g ? /* @__PURE__ */ s(
+            g ? /* @__PURE__ */ n(
               "span",
               {
                 className: l(
-                  "block font-normal text-sm text-slate-800 dark:text-slate-50",
+                  "block font-normal text-sm text-metal-800 dark:text-metal-50",
                   a
                 ),
                 children: g
@@ -89,18 +89,18 @@ const K = ({
       className: l(L({ className: i })),
       tabIndex: 0,
       onClick: (e) => {
-        n && (f(t), e.stopPropagation());
+        r && (f(t), e.stopPropagation());
       },
       onKeyDown: (e) => w(e, t),
       children: [
-        t.leftIcon ? /* @__PURE__ */ s(
+        t.leftIcon ? /* @__PURE__ */ n(
           "span",
           {
             className: l(
               "w-4 h-4 flex justify-center",
               {
                 "items-center": !t.subLabel,
-                "items-baseline -translate-y-2": !!t.subLabel
+                "items-baseline -tranmetal-y-2": !!t.subLabel
               },
               t.leftIconClassName
             ),

package/dist/components/Dropdown/components/ListItem/ListItem.variants.js

@@ -14,8 +14,8 @@ const t = r([
   "duration-250",
   "hover:bg-gray-50",
   "focus:bg-gray-50",
-  "dark:hover:bg-slate-700",
-  "dark:focus:bg-slate-700"
+  "dark:hover:bg-metal-700",
+  "dark:focus:bg-metal-700"
 ]);
 export {
   t as listItemVariants

package/dist/components/Dropdown/components/Wrapper.js

@@ -1,18 +1,18 @@
-import { jsxs as m, jsx as r } from "react/jsx-runtime";
+import { jsxs as u, jsx as r } from "react/jsx-runtime";
 import { forwardRef as Z, useId as ee, useRef as C, useMemo as te, useImperativeHandle as ae, useEffect as re } from "react";
 import { S as ne } from "../../../loader-juvMSJ9L.js";
-import { Typography as se } from "../../Typography/Typography.js";
+import { Typography as oe } from "../../Typography/Typography.js";
 import { cn as o } from "../../../utils/index.js";
-import { labelVariants as oe, inputVariants as le, dropdownVariants as ie } from "../Dropdown.variants.js";
+import { labelVariants as le, inputVariants as se, dropdownVariants as ie } from "../Dropdown.variants.js";
 import { useDropdown as ce } from "../hooks/useDropdown.js";
-import { List as pe } from "./List/List.js";
-import { c as ue } from "../../../createLucideIcon-D4r5Phnh.js";
-import { C as me } from "../../../chevron-up-DrQr2Fwd.js";
+import { List as me } from "./List/List.js";
+import { c as pe } from "../../../createLucideIcon-D4r5Phnh.js";
+import { C as ue } from "../../../chevron-up-DrQr2Fwd.js";
 import { useDropdownContext as fe } from "../contexts/dropdown.hook.js";
 const de = [
   ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
-], xe = ue("search", de), je = Z(
+], xe = pe("search", de), je = Z(
   ({
     additionalOptions: b,
     className: z,
@@ -41,49 +41,49 @@ const de = [
     noOptionsText: U,
     ...y
   }, q) => {
-    const I = ee(), l = C(null), L = C(null), A = C(0), {
+    const I = ee(), s = C(null), L = C(null), A = C(0), {
       isOpen: i,
       searchTerm: B,
-      value: s,
+      value: l,
       options: n,
       setValue: c,
       setSearchTerm: G,
       setCanFilter: J,
       toggleOpen: K
-    } = fe(), e = te(() => n.find(({ value: a }) => a === s), [n, s]), { wrapperRef: Q, wrapperInputRef: V, handleOpen: j } = ce({
+    } = fe(), e = te(() => n.find(({ value: a }) => a === l), [n, l]), { wrapperRef: Q, wrapperInputRef: V, handleOpen: j } = ce({
       ulRef: L,
-      inputRef: l,
+      inputRef: s,
       disabled: t,
       internalValue: e,
       onBlur: H
-    }), p = d ? `${I}-${d}` : I;
-    ae(q, () => l.current, [l]), re(() => {
-      if (x && !s) {
-        const a = n && n.find((u) => u.value === x);
+    }), m = d ? `${I}-${d}` : I;
+    ae(q, () => s.current, [s]), re(() => {
+      if (x && !l) {
+        const a = n && n.find((p) => p.value === x);
         a && c(a.value);
       }
-    }, [x, n, c, s]);
+    }, [x, n, c, l]);
     const X = (a) => {
-      const u = a.target.value;
-      J(!0), c(""), G(u ?? ""), P?.(u);
+      const p = a.target.value;
+      J(!0), c(""), G(p ?? ""), P?.(p);
       const O = n.find(
-        (Y) => Y.value.toLocaleLowerCase() === u.toLocaleLowerCase()
+        (Y) => Y.value.toLocaleLowerCase() === p.toLocaleLowerCase()
       );
       c(O ? O.value : e?.value ?? "");
     };
-    return /* @__PURE__ */ m(
+    return /* @__PURE__ */ u(
       "div",
       {
         ref: Q,
         className: o("flex flex-col w-full relative", W),
         "data-theme": M,
         children: [
-          v ? /* @__PURE__ */ m(
+          v ? /* @__PURE__ */ u(
             "label",
             {
-              id: p,
-              className: o(oe({ className: S })),
-              htmlFor: p,
+              id: m,
+              className: o(le({ className: S })),
+              htmlFor: m,
               onClick: () => !t && j(),
               children: [
                 v,
@@ -91,11 +91,11 @@ const de = [
               ]
             }
           ) : null,
-          /* @__PURE__ */ m(
+          /* @__PURE__ */ u(
             "div",
             {
               ref: V,
-              id: p,
+              id: m,
               className: o(
                 ie({ className: z, hasError: !!f, disabled: t })
               ),
@@ -103,26 +103,40 @@ const de = [
               onClick: () => !t && K(!i),
               "aria-expanded": i,
               tabIndex: A.current,
-              "aria-labelledby": p,
+              "aria-labelledby": m,
               children: [
-                /* @__PURE__ */ m("div", { className: "flex gap-2.5 items-center flex-1", children: [
-                  e?.leftIcon && !N && /* @__PURE__ */ r("span", { className: "w-4 h-4 flex justify-center items-center dark:text-slate-50", children: e.leftIcon }),
-                  N && /* @__PURE__ */ r(xe, { className: "w-4 h-4 text-zinc-500 select-none dark:text-slate-300 dark:group-focus-within:text-slate-50 transition-colors duration-300" }),
+                /* @__PURE__ */ u("div", { className: "flex gap-2.5 items-center flex-1", children: [
+                  e?.leftIcon && !N && /* @__PURE__ */ r("span", { className: "w-4 h-4 flex justify-center items-center dark:text-metal-50", children: e.leftIcon }),
+                  N && /* @__PURE__ */ r(
+                    xe,
+                    {
+                      className: o(
+                        "w-4",
+                        "h-4",
+                        "text-zinc-500",
+                        "select-none",
+                        "transition-colors",
+                        "duration-300",
+                        "dark:text-metal-300",
+                        "dark:group-focus-within:text-metal-50"
+                      )
+                    }
+                  ),
                   k ? /* @__PURE__ */ r(
                     "input",
                     {
                       type: "text",
-                      value: i ? B : e?.label ?? s ?? "",
+                      value: i ? B : e?.label ?? l ?? "",
                       onChange: X,
                       placeholder: w,
-                      className: o(le({ className: F }), {
+                      className: o(se({ className: F }), {
                         "text-red-700 placeholder:text-red-700": !!f
                       }),
                       onClick: (a) => {
                         a.stopPropagation(), t || j();
                       },
                       "aria-label": v || w,
-                      "aria-labelledby": p,
+                      "aria-labelledby": m,
                       required: h,
                       autoComplete: "off",
                       autoCapitalize: "words",
@@ -130,17 +144,17 @@ const de = [
                       tabIndex: -1,
                       ...y
                     }
-                  ) : /* @__PURE__ */ m(
-                    se,
+                  ) : /* @__PURE__ */ u(
+                    oe,
                     {
                       variant: "body2",
                       className: o(
-                        "flex-1 text-zinc-400 text-sm dark:text-slate-400 flex gap-2 items-center",
+                        "flex-1 text-zinc-400 text-sm dark:text-metal-400 flex gap-2 items-center",
                         {
                           "text-red-700": !!f,
                           "select-none": !e,
-                          "text-slate-800 dark:text-slate-50": e,
-                          "text-slate-400/50 dark:text-slate-50/50": t
+                          "text-metal-800 dark:text-metal-50": e,
+                          "text-metal-400/50 dark:text-metal-50/50": t
                         },
                         e?.wrapperClassNameOnSelectedValue
                       ),
@@ -152,16 +166,16 @@ const de = [
                     }
                   )
                 ] }),
-                g ? /* @__PURE__ */ r(ne, { className: "w-4 h-4 text-slate-400 animate-spin select-none" }) : !N && /* @__PURE__ */ r(
-                  me,
+                g ? /* @__PURE__ */ r(ne, { className: "w-4 h-4 text-metal-400 animate-spin select-none" }) : !N && /* @__PURE__ */ r(
+                  ue,
                   {
                     "data-state": i ? "open" : "closed",
                     className: o(
-                      "w-4 h-4 text-zinc-500 transition-all duration-100 data-[state=open]:rotate-0 data-[state=closed]:rotate-180 select-none dark:group-focus-within:text-slate-50",
+                      "w-4 h-4 text-zinc-500 transition-all duration-100 data-[state=open]:rotate-0 data-[state=closed]:rotate-180 select-none dark:group-focus-within:text-metal-50",
                       R,
                       {
                         "text-red-700": !!f,
-                        "text-slate-400/50 dark:group-focus-within:text-zinc-500": t
+                        "text-metal-400/50 dark:group-focus-within:text-zinc-500": t
                       }
                     )
                   }
@@ -172,19 +186,19 @@ const de = [
           /* @__PURE__ */ r(
             "input",
             {
-              ref: l,
+              ref: s,
               type: "text",
               name: d,
               className: "hidden",
               "aria-hidden": "true",
               required: h,
               inert: !0,
-              defaultValue: e?.value ?? s ?? void 0,
+              defaultValue: e?.value ?? l ?? void 0,
               ...y
             }
           ),
           i && /* @__PURE__ */ r(
-            pe,
+            me,
             {
               ref: L,
               additionalOptions: b,
@@ -192,7 +206,7 @@ const de = [
               itemClassName: D,
               name: d,
               wrapperInputRef: V,
-              inputRef: l,
+              inputRef: s,
               options: n,
               isLoading: !!g,
               searchable: k,

package/dist/components/DropdownButton/DropdownButton.js

@@ -2,7 +2,7 @@ import { jsxs as h, jsx as p } from "react/jsx-runtime";
 import v, { forwardRef as x, useState as C, useRef as w, useCallback as b, useEffect as E } from "react";
 import { cn as l } from "../../utils/index.js";
 import { Button as P } from "../Button/Button.js";
-import { P as c } from "../../index--V_ZsiQe.js";
+import { P as c } from "../../index-BOE_3f_Z.js";
 function m() {
   return m = Object.assign || function(e) {
     for (var i = 1; i < arguments.length; i++) {

package/dist/components/Filter/Filter.variants.js

@@ -1,13 +1,14 @@
 import { c as t } from "../../index-D29mdTf5.js";
-const a = t(["flex", "gap-8", "items-center"]), n = t([
+const a = t(["flex", "gap-8", "items-center"]), r = t([
   "flex",
   "items-center",
   "gap-1",
   "text-slate-500",
   "cursor-pointer",
   "text-sm",
-  "w-max"
-]), r = t([
+  "w-max",
+  "dark:text-metal-300"
+]), n = t([
   "text-slate-400",
   "h-5",
   "w-5",
@@ -16,7 +17,7 @@ const a = t(["flex", "gap-8", "items-center"]), n = t([
   "ease-in-out"
 ]);
 export {
-  r as filterButtonIconVariants,
-  n as filterButtonVariants,
+  n as filterButtonIconVariants,
+  r as filterButtonVariants,
   a as filterVariants
 };