@mxmweb/zui-layouts 1.1.0 → 1.1.2

package/index.js

@@ -1,9 +1,9 @@
-import { jsx as n, jsxs as k, Fragment as ne } from "react/jsx-runtime";
+import { jsx as n, jsxs as k, Fragment as ie } from "react/jsx-runtime";
 import * as u from "react";
-import x, { forwardRef as J, createElement as j } from "react";
+import x, { forwardRef as U, createElement as V } from "react";
 import s from "styled-components";
-import { deepMergeTheme as Q, defaultTheme as z } from "@mxmweb/zui-theme";
-import { GoogleNavbar as le, CustomDock as ie } from "@mxmweb/zui-components";
+import { useTheme as E, deepMergeTheme as O, defaultTheme as L } from "@mxmweb/zui-theme";
+import { GoogleNavbar as re, CustomDock as ae } from "@mxmweb/zui-components";
 /**
  * React Router v6.30.1
  *
@@ -14,33 +14,33 @@ import { GoogleNavbar as le, CustomDock as ie } from "@mxmweb/zui-components";
  *
  * @license MIT
  */
-const re = /* @__PURE__ */ u.createContext(null);
-process.env.NODE_ENV !== "production" && (re.displayName = "DataRouter");
-const ae = /* @__PURE__ */ u.createContext(null);
-process.env.NODE_ENV !== "production" && (ae.displayName = "DataRouterState");
 const ce = /* @__PURE__ */ u.createContext(null);
-process.env.NODE_ENV !== "production" && (ce.displayName = "Await");
+process.env.NODE_ENV !== "production" && (ce.displayName = "DataRouter");
 const se = /* @__PURE__ */ u.createContext(null);
-process.env.NODE_ENV !== "production" && (se.displayName = "Navigation");
+process.env.NODE_ENV !== "production" && (se.displayName = "DataRouterState");
 const de = /* @__PURE__ */ u.createContext(null);
-process.env.NODE_ENV !== "production" && (de.displayName = "Location");
-const U = /* @__PURE__ */ u.createContext({
+process.env.NODE_ENV !== "production" && (de.displayName = "Await");
+const he = /* @__PURE__ */ u.createContext(null);
+process.env.NODE_ENV !== "production" && (he.displayName = "Navigation");
+const fe = /* @__PURE__ */ u.createContext(null);
+process.env.NODE_ENV !== "production" && (fe.displayName = "Location");
+const ee = /* @__PURE__ */ u.createContext({
   outlet: null,
   matches: [],
   isDataRoute: !1
 });
-process.env.NODE_ENV !== "production" && (U.displayName = "Route");
-const he = /* @__PURE__ */ u.createContext(null);
-process.env.NODE_ENV !== "production" && (he.displayName = "RouteError");
-const fe = /* @__PURE__ */ u.createContext(null);
-function pe(t) {
-  let i = u.useContext(U).outlet;
-  return i && /* @__PURE__ */ u.createElement(fe.Provider, {
+process.env.NODE_ENV !== "production" && (ee.displayName = "Route");
+const pe = /* @__PURE__ */ u.createContext(null);
+process.env.NODE_ENV !== "production" && (pe.displayName = "RouteError");
+const ue = /* @__PURE__ */ u.createContext(null);
+function ge(t) {
+  let l = u.useContext(ee).outlet;
+  return l && /* @__PURE__ */ u.createElement(ue.Provider, {
     value: t
-  }, i);
+  }, l);
 }
-function ue(t) {
-  return pe(t.context);
+function xe(t) {
+  return ge(t.context);
 }
 new Promise(() => {
 });
@@ -50,14 +50,14 @@ new Promise(() => {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const ge = (t) => t.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), E = (...t) => t.filter((i, c, d) => !!i && i.trim() !== "" && d.indexOf(i) === c).join(" ").trim();
+const ke = (t) => t.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), te = (...t) => t.filter((l, c, d) => !!l && l.trim() !== "" && d.indexOf(l) === c).join(" ").trim();
 /**
  * @license lucide-react v0.456.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-var xe = {
+var Ce = {
   xmlns: "http://www.w3.org/2000/svg",
   width: 24,
   height: 24,
@@ -74,30 +74,30 @@ var xe = {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const ke = J(
+const we = U(
   ({
     color: t = "currentColor",
-    size: i = 24,
+    size: l = 24,
     strokeWidth: c = 2,
     absoluteStrokeWidth: d,
     className: e = "",
     children: p,
-    iconNode: D,
-    ...N
-  }, $) => j(
+    iconNode: N,
+    ...$
+  }, A) => V(
     "svg",
     {
-      ref: $,
-      ...xe,
-      width: i,
-      height: i,
+      ref: A,
+      ...Ce,
+      width: l,
+      height: l,
       stroke: t,
-      strokeWidth: d ? Number(c) * 24 / Number(i) : c,
-      className: E("lucide", e),
-      ...N
+      strokeWidth: d ? Number(c) * 24 / Number(l) : c,
+      className: te("lucide", e),
+      ...$
     },
     [
-      ...D.map(([a, l]) => j(a, l)),
+      ...N.map(([a, i]) => V(a, i)),
       ...Array.isArray(p) ? p : [p]
     ]
   )
@@ -108,12 +108,12 @@ const ke = J(
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const ee = (t, i) => {
-  const c = J(
-    ({ className: d, ...e }, p) => j(ke, {
+const oe = (t, l) => {
+  const c = U(
+    ({ className: d, ...e }, p) => V(we, {
       ref: p,
-      iconNode: i,
-      className: E(`lucide-${ge(t)}`, d),
+      iconNode: l,
+      className: te(`lucide-${ke(t)}`, d),
       ...e
     })
   );
@@ -125,7 +125,7 @@ const ee = (t, i) => {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Ce = ee("ArrowLeft", [
+const ye = oe("ArrowLeft", [
   ["path", { d: "m12 19-7-7 7-7", key: "1l729n" }],
   ["path", { d: "M19 12H5", key: "x3x0zl" }]
 ]);
@@ -135,9 +135,9 @@ const Ce = ee("ArrowLeft", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const B = ee("ChevronRight", [
+const I = oe("ChevronRight", [
   ["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]
-]), we = s.div`
+]), me = s.div`
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
@@ -147,7 +147,7 @@ const B = ee("ChevronRight", [
   width: 100%;
   max-width: 98%;
   position: relative;
-`, ye = s.div`
+`, ve = s.div`
   display: flex;
   height: 38px;
   z-index: 10;
@@ -158,7 +158,7 @@ const B = ee("ChevronRight", [
   justify-content: flex-start;
   width: 100%;
   min-width: 0; /* 确保 flex 子元素可以收缩 */
-`, ve = s.button`
+`, be = s.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -184,7 +184,7 @@ const B = ee("ChevronRight", [
   &:active svg {
     transform: translateY(0);
   }
-`, me = s.div`
+`, De = s.div`
   line-height: 1.4;
   cursor: pointer;
   transition: color 0.2s ease;
@@ -197,14 +197,14 @@ const B = ee("ChevronRight", [
   &:hover {
     color: #007bff;
   }
-`, be = s.div`
+`, Ne = s.div`
   line-height: 1.4;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   flex: 1;
   min-width: 0;
-`, Z = s.div`
+`, Q = s.div`
   display: flex;
   align-items: center;
   gap: 4px;
@@ -212,7 +212,7 @@ const B = ee("ChevronRight", [
   max-width: 50%;
   min-width: 0;
   overflow: hidden;
-`, I = s.div`
+`, S = s.div`
   display: flex;
   align-items: center;
   gap: 4px;
@@ -229,12 +229,12 @@ const B = ee("ChevronRight", [
   &:hover {
     color: ${(t) => t.$isLast ? "#007bff" : "inherit"};
   }
-`, S = s.div`
+`, z = s.div`
   display: flex;
   align-items: center;
   color: #6c757d;
   margin: 0 2px;
-`, De = s.div`
+`, $e = s.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -249,60 +249,65 @@ s.div`
   transform: translateX(-50%);
   z-index: 1000;
 `;
-const Te = ({
+const Fe = ({
   children: t,
-  goBack: i,
+  goBack: l,
   title: c,
   description: d,
   breadcrumbs: e,
   dockItems: p,
-  dockActiveMode: D = "single",
-  defaultDockActiveId: N,
-  defaultDockActiveIds: $,
+  dockActiveMode: N = "single",
+  defaultDockActiveId: $,
+  defaultDockActiveIds: A,
   styles: a,
-  eventsEmit: l
+  eventsEmit: i
 }) => {
-  var V, _, H, G, P, Y, q, K;
-  const w = Q({ theme: z, mode: "light" }, a), o = (w == null ? void 0 : w.theme) || z, O = x.useRef(null), L = () => {
-    l != null && l.onGoBack ? l.onGoBack() : i && i();
-  }, A = () => {
-    l != null && l.onTitleClick && l.onTitleClick();
-  }, y = (h, b) => {
-    l != null && l.onBreadcrumbClick ? l.onBreadcrumbClick(h, b) : h.onClick && h.onClick();
-  }, g = (h, b) => {
-    l != null && l.onDockItemClick && l.onDockItemClick(h, b);
+  var H, G, P, Y, q, K, X, Z;
+  const b = E(), w = O(
+    // 基础：默认主题 + useTheme的配置
+    O({ theme: L, mode: "light" }, b),
+    // 最高层：用户手动传入的styles
+    a
+  ), o = (w == null ? void 0 : w.theme) || L, W = x.useRef(null), T = () => {
+    i != null && i.onGoBack ? i.onGoBack() : l && l();
+  }, R = () => {
+    i != null && i.onTitleClick && i.onTitleClick();
+  }, y = (h, D) => {
+    i != null && i.onBreadcrumbClick ? i.onBreadcrumbClick(h, D) : h.onClick && h.onClick();
+  }, g = (h, D) => {
+    i != null && i.onDockItemClick && i.onDockItemClick(h, D);
   }, C = () => {
     if (!e || e.length === 0) return null;
-    const h = x.useRef(null), [b, W] = x.useState({ start: 0, end: e.length, showEllipsis: !1 }), M = x.useCallback(() => {
+    const h = x.useRef(null), [D, M] = x.useState({ start: 0, end: e.length, showEllipsis: !1 }), j = x.useCallback(() => {
       if (!h.current || e.length <= 3) {
-        W({ start: 0, end: e.length, showEllipsis: !1 });
+        M({ start: 0, end: e.length, showEllipsis: !1 });
         return;
       }
       const f = h.current.offsetWidth * 0.5;
-      let R = Math.floor((f - 30) / (120 + 20));
-      if (R < 2 && (R = 2), R >= e.length) {
-        W({ start: 0, end: e.length, showEllipsis: !1 });
+      let B = Math.floor((f - 30) / (120 + 20));
+      if (B < 2 && (B = 2), B >= e.length) {
+        M({ start: 0, end: e.length, showEllipsis: !1 });
         return;
       }
-      const oe = 0, X = Math.min(R - 1, e.length);
-      W({
-        start: oe,
-        end: X,
-        showEllipsis: X < e.length - 1
+      const le = 0, J = Math.min(B - 1, e.length);
+      M({
+        start: le,
+        end: J,
+        showEllipsis: J < e.length - 1
       });
     }, [e.length]);
     if (x.useEffect(() => {
-      M();
+      j();
       const r = new ResizeObserver(() => {
-        M();
+        j();
       });
       return h.current && r.observe(h.current), () => {
         r.disconnect();
       };
-    }, [M]), e.length <= 3)
-      return /* @__PURE__ */ n(Z, { children: e.map((r, f) => /* @__PURE__ */ k(x.Fragment, { children: [
+    }, [j]), e.length <= 3)
+      return /* @__PURE__ */ n(Q, { children: e.map((r, f) => /* @__PURE__ */ k(x.Fragment, { children: [
         /* @__PURE__ */ n(
-          I,
+          S,
           {
             $isLast: f === e.length - 1,
             $isClickable: !!(f < e.length - 1 || r.onClick),
@@ -314,30 +319,30 @@ const Te = ({
             children: r.label
           }
         ),
-        f < e.length - 1 && /* @__PURE__ */ n(S, { children: /* @__PURE__ */ n(B, { size: 14 }) })
+        f < e.length - 1 && /* @__PURE__ */ n(z, { children: /* @__PURE__ */ n(I, { size: 14 }) })
       ] }, r.id)) });
-    const { start: v, end: m, showEllipsis: T } = b;
-    return /* @__PURE__ */ k(Z, { children: [
-      e.slice(v, m).map((r, f) => /* @__PURE__ */ k(x.Fragment, { children: [
+    const { start: m, end: v, showEllipsis: F } = D;
+    return /* @__PURE__ */ k(Q, { children: [
+      e.slice(m, v).map((r, f) => /* @__PURE__ */ k(x.Fragment, { children: [
         /* @__PURE__ */ n(
-          I,
+          S,
           {
-            $isLast: f === m - v - 1 && !T,
-            $isClickable: !!(f < m - v - 1 || r.onClick),
-            onClick: () => y(r, v + f),
+            $isLast: f === v - m - 1 && !F,
+            $isClickable: !!(f < v - m - 1 || r.onClick),
+            onClick: () => y(r, m + f),
             style: {
-              color: f === m - v - 1 && !T ? o.colors.text : o.colors.textSecondary || o.colors.disabledText
+              color: f === v - m - 1 && !F ? o.colors.text : o.colors.textSecondary || o.colors.disabledText
             },
             title: r.label,
             children: r.label
           }
         ),
-        f < m - v - 1 && /* @__PURE__ */ n(S, { children: /* @__PURE__ */ n(B, { size: 14 }) })
+        f < v - m - 1 && /* @__PURE__ */ n(z, { children: /* @__PURE__ */ n(I, { size: 14 }) })
       ] }, r.id)),
-      T && /* @__PURE__ */ k(ne, { children: [
-        /* @__PURE__ */ n(S, { children: /* @__PURE__ */ n(B, { size: 14 }) }),
+      F && /* @__PURE__ */ k(ie, { children: [
+        /* @__PURE__ */ n(z, { children: /* @__PURE__ */ n(I, { size: 14 }) }),
         /* @__PURE__ */ n(
-          I,
+          S,
           {
             $isLast: !1,
             $isClickable: !1,
@@ -346,13 +351,13 @@ const Te = ({
               cursor: "default",
               maxWidth: "auto"
             },
-            title: `${e.slice(m, -1).map((r) => r.label).join(" > ")}`,
+            title: `${e.slice(v, -1).map((r) => r.label).join(" > ")}`,
             children: "..."
           }
         ),
-        /* @__PURE__ */ n(S, { children: /* @__PURE__ */ n(B, { size: 14 }) }),
+        /* @__PURE__ */ n(z, { children: /* @__PURE__ */ n(I, { size: 14 }) }),
         /* @__PURE__ */ n(
-          I,
+          S,
           {
             $isLast: !0,
             $isClickable: !!e[e.length - 1].onClick,
@@ -366,58 +371,58 @@ const Te = ({
         )
       ] })
     ] });
-  }, [F, te] = x.useState(!0);
+  }, [_, ne] = x.useState(!0);
   return /* @__PURE__ */ n(
-    we,
+    me,
     {
       style: {
         background: o.colors.appBackground,
         color: o.colors.text,
-        fontFamily: ((_ = (V = o.fonts) == null ? void 0 : V.body) == null ? void 0 : _.family) || "PingFang SC, Microsoft YaHei, Arial, sans-serif"
+        fontFamily: ((G = (H = o.fonts) == null ? void 0 : H.body) == null ? void 0 : G.family) || "PingFang SC, Microsoft YaHei, Arial, sans-serif"
       },
       children: /* @__PURE__ */ k("div", { style: { height: "100%", display: "flex", width: "100%", gap: 12 }, children: [
-        p && p.length > 0 && /* @__PURE__ */ n("div", { style: { flex: `0 0 ${F ? 72 : 28}px`, transition: "flex-basis .2s ease" }, children: /* @__PURE__ */ n(
-          le,
+        p && p.length > 0 && /* @__PURE__ */ n("div", { style: { flex: `0 0 ${_ ? 72 : 28}px`, transition: "flex-basis .2s ease" }, children: /* @__PURE__ */ n(
+          re,
           {
             items: p,
-            open: F,
-            onOpenChange: te,
+            open: _,
+            onOpenChange: ne,
             onItemClick: (h) => g({ id: String(h.key), label: h.name }, 0),
             defaultOpen: !0
           }
         ) }),
         /* @__PURE__ */ k("div", { style: { display: "flex", flexDirection: "column", flex: 1, minWidth: 0 }, children: [
-          (c || d || i || e) && /* @__PURE__ */ k(ye, { ref: O, children: [
-            i && /* @__PURE__ */ n(
-              ve,
+          (c || d || l || e) && /* @__PURE__ */ k(ve, { ref: W, children: [
+            l && /* @__PURE__ */ n(
+              be,
               {
-                onClick: L,
+                onClick: T,
                 style: { color: o.colors.primary, borderRadius: o.space.radius || "6px" },
                 title: "\u8FD4\u56DE",
-                children: /* @__PURE__ */ n(Ce, { size: 18 })
+                children: /* @__PURE__ */ n(ye, { size: 18 })
               }
             ),
             C(),
             c && /* @__PURE__ */ n(
-              me,
+              De,
               {
-                onClick: A,
+                onClick: R,
                 style: {
                   color: o.colors.text,
-                  fontSize: ((G = (H = o.fonts) == null ? void 0 : H.heading) == null ? void 0 : G.size) || "16px",
-                  fontWeight: ((Y = (P = o.fonts) == null ? void 0 : P.heading) == null ? void 0 : Y.weight) || "600"
+                  fontSize: ((Y = (P = o.fonts) == null ? void 0 : P.heading) == null ? void 0 : Y.size) || "16px",
+                  fontWeight: ((K = (q = o.fonts) == null ? void 0 : q.heading) == null ? void 0 : K.weight) || "600"
                 },
                 title: c,
                 children: c
               }
             ),
             d && /* @__PURE__ */ n(
-              be,
+              Ne,
               {
                 style: {
                   color: o.colors.textSecondary || o.colors.disabledText,
                   opacity: 0.7,
-                  fontSize: ((K = (q = o.fonts) == null ? void 0 : q.body) == null ? void 0 : K.size) || "12px"
+                  fontSize: ((Z = (X = o.fonts) == null ? void 0 : X.body) == null ? void 0 : Z.size) || "12px"
                 },
                 title: d,
                 children: d
@@ -425,7 +430,7 @@ const Te = ({
             )
           ] }),
           /* @__PURE__ */ n(
-            De,
+            $e,
             {
               style: {
                 background: o.colors.dashboardBackground || "transparent",
@@ -433,14 +438,14 @@ const Te = ({
                 borderRadius: o.space.radius || void 0,
                 boxShadow: o.colors.shadow || void 0
               },
-              children: t || /* @__PURE__ */ n(ue, {})
+              children: t || /* @__PURE__ */ n(xe, {})
             }
           )
         ] })
       ] })
     }
   );
-}, Ne = s.div.withConfig({
+}, Ae = s.div.withConfig({
   shouldForwardProp: (t) => !["backgroundImage", "backgroundColor"].includes(t)
 })`
   position: fixed;
@@ -453,7 +458,7 @@ const Te = ({
   flex-direction: column;
   overflow: hidden;
   z-index: 1;
-`, $e = s.div`
+`, Re = s.div`
   height: 48px;
   width: 100%;
   display: flex;
@@ -462,7 +467,7 @@ const Te = ({
   background: transparent;
   z-index: 10;
   flex-shrink: 0;
-`, Ae = s.div`
+`, Be = s.div`
   flex: 1;
   width: 100%;
   overflow-y: auto;
@@ -489,7 +494,7 @@ const Te = ({
   &::-webkit-scrollbar-thumb:hover {
     background: rgba(255, 255, 255, 0.5);
   }
-`, Re = s.div`
+`, Ie = s.div`
   height: 80px;
   width: 100%;
   display: flex;
@@ -499,45 +504,50 @@ const Te = ({
   background: transparent;
   z-index: 10;
   flex-shrink: 0;
-`, je = ({
+`, Ve = ({
   children: t,
-  backgroundImage: i,
+  backgroundImage: l,
   backgroundColor: c,
   header: d,
   dockItems: e,
   dockActiveMode: p = "single",
-  defaultDockActiveId: D,
-  defaultDockActiveIds: N,
-  styles: $,
+  defaultDockActiveId: N,
+  defaultDockActiveIds: $,
+  styles: A,
   eventsEmit: a
 }) => {
-  var A, y;
-  const l = Q({ theme: z, mode: "light" }, $), w = (l == null ? void 0 : l.theme) || z, o = (g, C) => {
+  var R, y;
+  const i = E(), b = O(
+    // 基础：默认主题 + useTheme的配置
+    O({ theme: L, mode: "light" }, i),
+    // 最高层：用户手动传入的styles
+    A
+  ), w = (b == null ? void 0 : b.theme) || L, o = (g, C) => {
     a != null && a.onDockItemClick ? a.onDockItemClick(g, C) : g.onClick && g.onClick();
-  }, O = (g, C) => {
+  }, W = (g, C) => {
     a != null && a.onDockActiveChange && a.onDockActiveChange(g, C);
-  }, L = (g, C) => {
+  }, T = (g, C) => {
     a != null && a.onDockActiveChangeMultiple && a.onDockActiveChangeMultiple(g, C);
   };
   return /* @__PURE__ */ k(
-    Ne,
+    Ae,
     {
-      backgroundImage: i,
+      backgroundImage: l,
       backgroundColor: c,
       children: [
-        d && /* @__PURE__ */ n($e, { children: d }),
+        d && /* @__PURE__ */ n(Re, { children: d }),
         /* @__PURE__ */ n(
-          Ae,
+          Be,
           {
             style: {
               color: w.colors.text,
-              fontFamily: ((y = (A = w.fonts) == null ? void 0 : A.body) == null ? void 0 : y.family) || "PingFang SC, Microsoft YaHei, Arial, sans-serif"
+              fontFamily: ((y = (R = w.fonts) == null ? void 0 : R.body) == null ? void 0 : y.family) || "PingFang SC, Microsoft YaHei, Arial, sans-serif"
             },
             children: t
           }
         ),
-        e && e.length > 0 && /* @__PURE__ */ n(Re, { children: /* @__PURE__ */ n(
-          ie,
+        e && e.length > 0 && /* @__PURE__ */ n(Ie, { children: /* @__PURE__ */ n(
+          ae,
           {
             items: e,
             itemWidth: 48,
@@ -545,11 +555,11 @@ const Te = ({
             magnification: 1.5,
             itemGap: 8,
             activeMode: p,
-            defaultActiveId: D,
-            defaultActiveIds: N,
+            defaultActiveId: N,
+            defaultActiveIds: $,
             onItemClick: o,
-            onActiveChange: O,
-            onActiveChangeMultiple: L
+            onActiveChange: W,
+            onActiveChangeMultiple: T
           }
         ) })
       ]
@@ -557,6 +567,6 @@ const Te = ({
   );
 };
 export {
-  Te as DashboardContainer,
-  je as DockContainer
+  Fe as DashboardContainer,
+  Ve as DockContainer
 };

package/package.json

@@ -5,7 +5,7 @@
   "style": "assets/style.css",
   "types": "lib_enter.d.ts",
   "private": false,
-  "version": "1.1.0",
+  "version": "1.1.2",
   "author": "hanfeng_Zhang",
   "type": "module",
   "scripts": {
@@ -24,8 +24,8 @@
     "@mxmweb/zui-components": "*",
     "@mxmweb/zui-elements": "*",
     "@mxmweb/zui-theme": "*",
-    "react": ">=18",
-    "react-dom": ">=18",
+    "react": ">=18 <20",
+    "react-dom": ">=18 <20",
     "styled-components": "^6"
   }
 }