meticulous-ui 2.6.2 → 2.8.0

package/components/Loader/Loader.js

@@ -1,17 +1,17 @@
-import { jsxs as f, jsx as a } from "react/jsx-runtime";
-import { LoaderWrapper as L, VisuallyHidden as g, Dot as A } from "./styles.js";
-import { SIZE as d, MEDIUM as c, THEME_SHADE as s, ANIMATION_DELAYS as D, BLUE as I } from "./constants.js";
-import { getTheme as M } from "./helpers.js";
-const j = ({ size: l = c, theme: n = I, isBounce: i, isMini: m, isMiniDark: p }) => {
-  const { dot: E, gap: h } = d[l] || d[c], t = M(n), r = D, u = (p ? s.slice(2, 6) : m ? s.slice(0, 3) : s).map((o) => t[o] ?? t.m500), $ = r.map(() => E);
-  return /* @__PURE__ */ f(L, { role: "status", $gap: h, children: [
-    /* @__PURE__ */ a(g, { children: "Loading" }),
-    $.map((o, e) => /* @__PURE__ */ a(
-      A,
+import { jsxs as L, jsx as a } from "react/jsx-runtime";
+import { LoaderWrapper as g, VisuallyHidden as A, Dot as D } from "./styles.js";
+import { SIZE as d, MEDIUM as c, THEME_SHADE as s, ANIMATION_DELAYS as I, BLUE as M } from "./constants.js";
+import { getTheme as x } from "./helpers.js";
+const B = ({ size: l = c, theme: n = M, isBounce: i, isMini: m, isMiniDark: p, ...E }) => {
+  const { dot: h, gap: u } = d[l] || d[c], t = x(n), r = I, $ = (p ? s.slice(2, 6) : m ? s.slice(0, 3) : s).map((o) => t[o] ?? t.m500), f = r.map(() => h);
+  return /* @__PURE__ */ L(g, { role: "status", $gap: u, ...E, children: [
+    /* @__PURE__ */ a(A, { children: "Loading" }),
+    f.map((o, e) => /* @__PURE__ */ a(
+      D,
       {
         "aria-hidden": "true",
         $size: o,
-        $color: u[e],
+        $color: $[e],
         $delay: r[e],
         $isBounce: i
       },
@@ -20,5 +20,5 @@ const j = ({ size: l = c, theme: n = I, isBounce: i, isMini: m, isMiniDark: p })
   ] });
 };
 export {
-  j as default
+  B as default
 };

package/components/MenuItem/MenuItem.js

@@ -1,15 +1,15 @@
 import { jsx as c } from "react/jsx-runtime";
 import i from "../../colors/grey.js";
 import m from "../../colors/blue.js";
-import g from "../../colors/white.js";
-import { Wrapper as s, PWrapper as k } from "./styles.js";
-const v = ({ isSelected: o, isDisabled: e }) => o ? i.m700 : e ? i.m300 : i.m500, I = ({
+import s from "../../colors/white.js";
+import { Wrapper as k, PWrapper as v } from "./styles.js";
+const w = ({ isSelected: o, isDisabled: e }) => o ? i.m700 : e ? i.m300 : i.m500, M = ({
   id: o,
   value: e,
   label: l,
   width: n = "20rem",
   isSelected: t,
-  defaultColor: p = g,
+  defaultColor: p = s,
   selectedColor: a = m.m200,
   hoverColor: d = m.m50,
   activeColor: f = m.m100,
@@ -17,9 +17,10 @@ const v = ({ isSelected: o, isDisabled: e }) => o ? i.m700 : e ? i.m300 : i.m500
   size: $ = "1.2rem",
   onSelect: u,
   isDisabled: r,
-  onMouseEnter: C
+  onMouseEnter: C,
+  ...g
 }) => /* @__PURE__ */ c(
-  s,
+  k,
   {
     $isSelected: t,
     $width: n,
@@ -31,6 +32,7 @@ const v = ({ isSelected: o, isDisabled: e }) => o ? i.m700 : e ? i.m300 : i.m500
     $isHighlighted: h,
     id: o,
     role: "option",
+    ...g,
     "aria-selected": t,
     "aria-disabled": r || void 0,
     onClick: () => {
@@ -38,9 +40,9 @@ const v = ({ isSelected: o, isDisabled: e }) => o ? i.m700 : e ? i.m300 : i.m500
     },
     onMouseEnter: C,
     title: l,
-    children: /* @__PURE__ */ c(k, { size: $, color: v({ isSelected: t, isDisabled: r }), $width: n, children: l })
+    children: /* @__PURE__ */ c(v, { size: $, color: w({ isSelected: t, isDisabled: r }), $width: n, children: l })
   }
 );
 export {
-  I as default
+  M as default
 };

package/components/OtpInput/OtpInput.js

@@ -1,13 +1,13 @@
-import { jsx as j } from "react/jsx-runtime";
-import { useState as A, useRef as y, useEffect as E } from "react";
-import { OTPWrapper as I } from "./styles.js";
-import { renderNums as P } from "./helpers.js";
-const T = ({ length: r = 6, value: p = "", onChange: u, onComplete: e }) => {
-  const [a, D] = A(Array(r).fill("")), d = y([]), w = y(a), o = y(!1), f = (s) => {
+import { jsx as A } from "react/jsx-runtime";
+import { useState as E, useRef as y, useEffect as I } from "react";
+import { OTPWrapper as P } from "./styles.js";
+import { renderNums as b } from "./helpers.js";
+const B = ({ length: r = 6, value: p = "", onChange: u, onComplete: e, ...O }) => {
+  const [a, D] = E(Array(r).fill("")), d = y([]), w = y(a), o = y(!1), f = (s) => {
     var t;
     o.current = !0, (t = d.current[s]) == null || t.focus();
   };
-  E(() => {
+  I(() => {
     if (!p) return;
     const s = String(p).replace(/\D/g, "").slice(0, r), t = s.split("");
     for (; t.length < r; ) t.push("");
@@ -17,11 +17,11 @@ const T = ({ length: r = 6, value: p = "", onChange: u, onComplete: e }) => {
     w.current = s, D(s);
     const t = s.join("");
     u == null || u(t), t.length === r && (e == null || e(t));
-  }, O = (s, t) => {
+  }, k = (s, t) => {
     s = s.replace(/\D/g, "").slice(-1);
     const c = [...a];
     c[t] = s, l(c), s && t < r - 1 && f(t + 1);
-  }, k = (s, t) => {
+  }, m = (s, t) => {
     const c = a.findIndex((n) => n === ""), i = c === -1 ? r - 1 : c;
     if (s.key === "Backspace") {
       if (s.preventDefault(), a[t]) {
@@ -30,7 +30,7 @@ const T = ({ length: r = 6, value: p = "", onChange: u, onComplete: e }) => {
       }
       t > 0 && f(t - 1);
     } else s.key === "ArrowLeft" && t > 0 ? (s.preventDefault(), f(t - 1)) : s.key === "ArrowRight" ? (s.preventDefault(), t + 1 <= i && f(t + 1)) : s.key === "Tab" && (s.preventDefault(), s.shiftKey ? t > 0 && f(t - 1) : f(i));
-  }, m = (s) => {
+  }, R = (s) => {
     if (o.current) {
       o.current = !1;
       return;
@@ -38,22 +38,23 @@ const T = ({ length: r = 6, value: p = "", onChange: u, onComplete: e }) => {
     const t = w.current.findIndex((i) => i === ""), c = t === -1 ? r - 1 : t;
     s !== c && f(c);
   };
-  return /* @__PURE__ */ j(
-    I,
+  return /* @__PURE__ */ A(
+    P,
     {
       style: { display: "flex", gap: "10px", justifyContent: "center" },
       onPaste: (s) => {
         const t = s.clipboardData.getData("text").replace(/\D/g, "");
         if (!t) return;
         const c = Array(r).fill("");
-        t.slice(0, r).split("").forEach((n, R) => c[R] = n), l(c);
+        t.slice(0, r).split("").forEach((n, j) => c[j] = n), l(c);
         const i = Math.min(t.length - 1, r - 1);
         f(i);
       },
-      children: a.map(P({ inputsRef: d, handleChange: O, handleKeyDown: k, handleFocus: m }))
+      ...O,
+      children: a.map(b({ inputsRef: d, handleChange: k, handleKeyDown: m, handleFocus: R }))
     }
   );
 };
 export {
-  T as default
+  B as default
 };

package/components/Pagination/Pagination.js

@@ -1,32 +1,33 @@
 import { jsxs as l, jsx as f } from "react/jsx-runtime";
-import { useRef as x, useEffect as _ } from "react";
+import { useRef as E, useEffect as K } from "react";
 import { PrevArrow as M, renderPageNum as d, NextArrow as R, renderThreeDots as $ } from "./helpers.js";
-import K from "../../colors/index.js";
-import a from "../../colors/teal.js";
-import { ICON_SIZE_MAPPING as j, MEDIUM as G, SIZE_REM_MAPPING as L } from "./constants.js";
+import a from "../../colors/index.js";
+import j from "../../colors/teal.js";
+import { ICON_SIZE_MAPPING as G, MEDIUM as L, SIZE_REM_MAPPING as P } from "./constants.js";
 import { AllPages as u, MiddleLayer as v } from "./styles.js";
-const k = ({
+const B = ({
   pageNumber: r,
-  setPageNumber: E,
+  setPageNumber: S,
   totalPages: n,
-  theme: S = "lime",
-  size: o = G,
-  isDisabled: D = !1
+  theme: _ = "lime",
+  size: o = L,
+  isDisabled: D = !1,
+  ...x
 }) => {
-  const s = x(null), h = x(!1);
-  _(() => {
+  const s = E(null), h = E(!1);
+  K(() => {
     var i, w;
     h.current && (h.current = !1, (w = (i = s.current) == null ? void 0 : i.querySelector('[aria-current="page"]')) == null || w.focus());
   }, [r]);
   const c = (i) => {
-    i !== r && E(i);
+    i !== r && S(i);
   }, A = () => {
     r > 1 && c(r - 1);
   }, m = () => {
     r < n && c(r + 1);
   }, y = (i) => {
     ["ArrowLeft", "ArrowUp"].includes(i.code) && (h.current = !0, A()), ["ArrowRight", "ArrowDown"].includes(i.code) && (h.current = !0, m());
-  }, e = K[S] ?? a, I = L[o], t = j[o];
+  }, e = a[_] ?? j, I = P[o], t = G[o];
   return n <= 7 ? /* @__PURE__ */ l(
     u,
     {
@@ -34,6 +35,7 @@ const k = ({
       onKeyDown: y,
       "aria-label": "Pagination",
       $isDisabled: D,
+      ...x,
       children: [
         /* @__PURE__ */ f(M, { iconSize: t, shades: e, setPrevPage: A }),
         /* @__PURE__ */ f(v, { size: `${n * I}rem`, children: Array.from({ length: n }, (i, w) => w + 1).map(
@@ -49,6 +51,7 @@ const k = ({
       onKeyDown: y,
       "aria-label": "Pagination",
       $isDisabled: D,
+      ...x,
       children: [
         /* @__PURE__ */ f(M, { iconSize: t, shades: e, setPrevPage: A }),
         /* @__PURE__ */ l(v, { size: `${9 * I}rem`, children: [
@@ -87,5 +90,5 @@ const k = ({
   );
 };
 export {
-  k as default
+  B as default
 };

package/components/Selectbox/Selectbox.js

@@ -1,12 +1,12 @@
 import { jsxs as $, jsx as i } from "react/jsx-runtime";
-import { useState as C, useId as T, useRef as v, useMemo as se, useEffect as I, useLayoutEffect as ce, useCallback as le } from "react";
+import { useState as C, useId as T, useRef as v, useMemo as ce, useEffect as I, useLayoutEffect as le, useCallback as ae } from "react";
 import O from "../../colors/grey.js";
-import ae from "../../colors/index.js";
-import ue from "../../colors/blue.js";
-import de from "../Input/Checkbox/Checkbox.js";
+import ue from "../../colors/index.js";
+import de from "../../colors/blue.js";
+import pe from "../Input/Checkbox/Checkbox.js";
 import U from "../Spinner/Spinner.js";
-import { SelectBoxWrapper as pe, Box as fe, PWrapper as me, ChevronDownWrapper as he, OptionWrapper as be, SearchContainer as ge, SearchIcon as xe, SearchInput as we, OptionsList as $e, LoadMoreSentinel as Ce, SpinnerWrapper as Ie, CheckboxItem as ke } from "./styles.js";
-const Se = (o) => {
+import { SelectBoxWrapper as fe, Box as me, PWrapper as he, ChevronDownWrapper as be, OptionWrapper as ge, SearchContainer as xe, SearchIcon as we, SearchInput as $e, OptionsList as Ce, LoadMoreSentinel as Ie, SpinnerWrapper as ke, CheckboxItem as Se } from "./styles.js";
+const ye = (o) => {
   if (typeof o != "string") return o;
   if (o.endsWith("px")) return parseFloat(o);
   if (o.endsWith("rem")) {
@@ -14,7 +14,7 @@ const Se = (o) => {
     return E * c;
   }
   return parseFloat(o);
-}, We = ({
+}, Ae = ({
   options: o,
   onChange: E,
   value: c = [],
@@ -29,12 +29,13 @@ const Se = (o) => {
   onLoadMore: l,
   hasMore: b = !1,
   isLoadingMore: a = !1,
-  loaderColor: W
+  loaderColor: W,
+  ...G
 }) => {
-  const [r, g] = C(!1), [G, A] = C(!1), [J, X] = C("bottom"), [S, P] = C(""), [s, x] = C(-1), y = T(), H = T(), u = v(null), w = v(null), z = v(null), V = v(null), Y = () => !m && !k && g((e) => !e), B = (e) => {
+  const [r, g] = C(!1), [J, A] = C(!1), [X, Y] = C("bottom"), [S, P] = C(""), [s, x] = C(-1), y = T(), H = T(), u = v(null), w = v(null), z = v(null), V = v(null), Z = () => !m && !k && g((e) => !e), B = (e) => {
     const t = c.includes(e) ? c.filter((n) => n !== e) : [...c, e];
     E(t);
-  }, d = se(() => {
+  }, d = ce(() => {
     if (!h || !S.trim()) return o;
     const e = S.toLowerCase();
     return o.filter(({ label: t }) => t.toLowerCase().includes(e));
@@ -57,29 +58,29 @@ const Se = (o) => {
       u.current && !u.current.contains(t.target) && g(!1);
     };
     return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-  }, []), ce(() => {
+  }, []), le(() => {
     if (r && w.current && u.current) {
-      const e = u.current.getBoundingClientRect(), t = window.innerHeight, n = Se(F), p = t - e.bottom;
-      X(
+      const e = u.current.getBoundingClientRect(), t = window.innerHeight, n = ye(F), p = t - e.bottom;
+      Y(
         p < n + 8 && e.top > p ? "top" : "bottom"
       );
     }
   }, [r, F]);
-  const Z = (e) => {
+  const _ = (e) => {
     let t = e + 1;
     for (; t < d.length; ) {
       if (!d[t].disabled) return t;
       t++;
     }
     return e;
-  }, _ = (e) => {
+  }, L = (e) => {
     let t = e - 1;
     for (; t >= 0; ) {
       if (!d[t].disabled) return t;
       t--;
     }
     return e;
-  }, j = le(() => {
+  }, j = ae(() => {
     b && !a && l && l();
   }, [b, a, l]);
   I(() => {
@@ -93,7 +94,7 @@ const Se = (o) => {
     );
     return t.observe(e), () => t.disconnect();
   }, [j, l, b, a]);
-  const L = (e) => {
+  const M = (e) => {
     if (!(m || k)) {
       if (!r) {
         (e.key === " " || e.key === "Enter" || e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), g(!0));
@@ -102,12 +103,12 @@ const Se = (o) => {
       switch (e.key) {
         case "ArrowDown": {
           e.preventDefault();
-          const n = Z(s);
+          const n = _(s);
           n === s && b && !a && (l == null || l()), x(n);
           break;
         }
         case "ArrowUp": {
-          e.preventDefault(), x(_(s));
+          e.preventDefault(), x(L(s));
           break;
         }
         case "Enter":
@@ -122,14 +123,14 @@ const Se = (o) => {
       }
     }
   }, {
-    m50: M,
-    m100: ee,
+    m50: ee,
+    m100: te,
     m500: K,
-    m800: te
-  } = ae[N] ?? ue, re = (e, t) => () => !e && x(t), Q = (e) => `${y}-opt-${e}`, ne = c.length === 0 ? q : `${c.length} selected`, oe = ({ value: e, label: t, disabled: n }, p) => {
+    m800: re
+  } = ue[N] ?? de, ne = (e, t) => () => !e && x(t), Q = (e) => `${y}-opt-${e}`, oe = c.length === 0 ? q : `${c.length} selected`, ie = ({ value: e, label: t, disabled: n }, p) => {
     const D = c.includes(e);
     return /* @__PURE__ */ i(
-      ke,
+      Se,
       {
         id: Q(p),
         role: "option",
@@ -138,20 +139,20 @@ const Se = (o) => {
         $width: `calc(${f} + 1rem)`,
         $isHighlighted: p === s,
         $isDisabled: n,
-        $hoverColor: M,
-        $activeColor: ee,
+        $hoverColor: ee,
+        $activeColor: te,
         onClick: () => B(e),
-        onMouseEnter: re(n, p),
+        onMouseEnter: ne(n, p),
         title: t,
-        children: /* @__PURE__ */ i("div", { onClick: (ie) => ie.stopPropagation(), children: /* @__PURE__ */ i(
-          de,
+        children: /* @__PURE__ */ i("div", { onClick: (se) => se.stopPropagation(), children: /* @__PURE__ */ i(
+          pe,
           {
             value: D,
             onChange: () => B(e),
             label: t,
             disabled: n,
             innerShade: K,
-            outerShade: te,
+            outerShade: re,
             tabIndex: -1
           }
         ) })
@@ -160,29 +161,30 @@ const Se = (o) => {
     );
   };
   return /* @__PURE__ */ $(
-    pe,
+    fe,
     {
       ref: u,
       $width: f,
       $isDisabled: m,
       $isLoading: k,
-      onKeyDown: L,
+      onKeyDown: M,
       onBlur: (e) => {
         var t;
         (t = u.current) != null && t.contains(e.relatedTarget) || (A(!1), g(!1));
       },
       onFocus: () => A(!0),
+      ...G,
       children: [
         /* @__PURE__ */ $(
-          fe,
+          me,
           {
             id: H,
             role: "button",
             $width: f,
-            onClick: Y,
+            onClick: Z,
             $isOpen: r,
             $border: K,
-            $isFocused: G && !r,
+            $isFocused: J && !r,
             tabIndex: m ? -1 : 0,
             "aria-haspopup": "listbox",
             "aria-expanded": r,
@@ -190,16 +192,16 @@ const Se = (o) => {
             "aria-disabled": m || void 0,
             "aria-activedescendant": s !== -1 ? Q(s) : void 0,
             children: [
-              /* @__PURE__ */ i(me, { $width: f, color: c.length > 0 ? O.m700 : O.m500, size: "1.2rem", children: ne }),
-              /* @__PURE__ */ i(he, { color: O.m500, size: 22, $isOpen: r, "aria-hidden": !0 })
+              /* @__PURE__ */ i(he, { $width: f, color: c.length > 0 ? O.m700 : O.m500, size: "1.2rem", children: oe }),
+              /* @__PURE__ */ i(be, { color: O.m500, size: 22, $isOpen: r, "aria-hidden": !0 })
             ]
           }
         ),
-        /* @__PURE__ */ $(be, { $isOpen: r, $width: f, $height: F, $top: J === "top", children: [
-          h && /* @__PURE__ */ $(ge, { onClick: (e) => e.stopPropagation(), children: [
-            /* @__PURE__ */ i(xe, { size: 20, color: O.m600, "aria-hidden": !0 }),
+        /* @__PURE__ */ $(ge, { $isOpen: r, $width: f, $height: F, $top: X === "top", children: [
+          h && /* @__PURE__ */ $(xe, { onClick: (e) => e.stopPropagation(), children: [
+            /* @__PURE__ */ i(we, { size: 20, color: O.m600, "aria-hidden": !0 }),
             /* @__PURE__ */ i(
-              we,
+              $e,
               {
                 ref: z,
                 value: S,
@@ -215,7 +217,7 @@ const Se = (o) => {
             )
           ] }),
           /* @__PURE__ */ $(
-            $e,
+            Ce,
             {
               ref: w,
               role: "listbox",
@@ -224,17 +226,17 @@ const Se = (o) => {
               "aria-multiselectable": !0,
               "aria-labelledby": H,
               children: [
-                d.map(oe),
-                l && /* @__PURE__ */ i(Ce, { ref: V, children: a && /* @__PURE__ */ i(U, { size: "small", color: W }) })
+                d.map(ie),
+                l && /* @__PURE__ */ i(Ie, { ref: V, children: a && /* @__PURE__ */ i(U, { size: "small", color: W }) })
               ]
             }
           )
         ] }),
-        k && /* @__PURE__ */ i(Ie, { children: /* @__PURE__ */ i(U, { size: "small", color: W }) })
+        k && /* @__PURE__ */ i(ke, { children: /* @__PURE__ */ i(U, { size: "small", color: W }) })
       ]
     }
   );
 };
 export {
-  We as default
+  Ae as default
 };

package/components/Shimmer/Shimmer.js

@@ -1,9 +1,25 @@
-import { jsx as i } from "react/jsx-runtime";
-import { ShimmerWrapper as m } from "./styles.js";
+import { jsx as n } from "react/jsx-runtime";
+import { ShimmerWrapper as u } from "./styles.js";
 const e = (r) => {
   if (r != null)
     return typeof r == "number" ? `${r}rem` : r;
-}, p = ({ width: r = "100%", height: t = "100%", label: o = "Loading..." }) => /* @__PURE__ */ i(m, { role: "status", "aria-label": o, width: e(r), height: e(t) });
+}, p = ({
+  width: r = "100%",
+  height: t = "100%",
+  borderRadius: o = "0.4rem",
+  label: i = "Loading...",
+  ...m
+}) => /* @__PURE__ */ n(
+  u,
+  {
+    role: "status",
+    "aria-label": i,
+    $width: e(r),
+    $height: e(t),
+    $borderRadius: e(o),
+    ...m
+  }
+);
 export {
   p as default
 };

package/components/Shimmer/styles.js

@@ -7,9 +7,9 @@ const i = o`
   position: relative;
   overflow: hidden;
   background-color: ${e.m300};
-  border-radius: 0.4rem;
-  width: ${({ width: r }) => r};
-  height: ${({ height: r }) => r};
+  border-radius: ${({ $borderRadius: r }) => r};
+  width: ${({ $width: r }) => r};
+  height: ${({ $height: r }) => r};
 
   &:after {
     content: '';

package/components/Spinner/Spinner.js

@@ -1,18 +1,18 @@
 import { jsx as i } from "react/jsx-runtime";
-import { SpinnerSVG as l, SpinnerCircle as s } from "./styles.js";
-import a from "../../colors/index.js";
-import h from "../../colors/green.js";
-import d from "../../colors/white.js";
-import p from "../../colors/grey.js";
-const c = {
+import { SpinnerSVG as s, SpinnerCircle as a } from "./styles.js";
+import h from "../../colors/index.js";
+import d from "../../colors/green.js";
+import p from "../../colors/white.js";
+import c from "../../colors/grey.js";
+const g = {
   small: { strokeWidth: 6, $length: "1rem" },
   medium: { strokeWidth: 5, $length: "2rem" },
   large: { strokeWidth: 5, $length: "3rem" }
-}, W = ({ color: e = "green", size: o = "medium" }) => {
+}, $ = ({ color: e = "green", size: o = "medium", ...n }) => {
   var t;
-  const { strokeWidth: n, $length: r } = c[o], m = [d, p.m600].includes(e) ? e : (t = a[e] ?? h) == null ? void 0 : t.m500;
+  const { strokeWidth: m, $length: r } = g[o], l = [p, c.m600].includes(e) ? e : (t = h[e] ?? d) == null ? void 0 : t.m500;
   return /* @__PURE__ */ i(
-    l,
+    s,
     {
       viewBox: "0 0 50 50",
       width: r,
@@ -20,15 +20,16 @@ const c = {
       role: "status",
       "aria-label": "Loading",
       "aria-live": "polite",
+      ...n,
       children: /* @__PURE__ */ i(
-        s,
+        a,
         {
           cx: "25",
           cy: "25",
           r: "20",
           fill: "none",
-          stroke: m,
-          strokeWidth: n,
+          stroke: l,
+          strokeWidth: m,
           strokeLinecap: "round"
         }
       )
@@ -36,5 +37,5 @@ const c = {
   );
 };
 export {
-  W as default
+  $ as default
 };