@luxfi/ui 7.3.2 → 7.4.2

package/dist/alert.cjs

@@ -4,7 +4,7 @@
 var React2 = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
-var core = require('@hanzogui/core');
+var gui = require('@hanzo/gui');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespace(e) {
@@ -32,7 +32,7 @@ function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
 var CLOSE_ICON_PATH = "M9.44 8.035a.791.791 0 0 0 1.12 0l3.802-3.803a.791.791 0 0 1 1.119 0l.287.287a.79.79 0 0 1 0 1.119L11.965 9.44a.79.79 0 0 0 0 1.118l3.803 3.803a.791.791 0 0 1 0 1.119l-.287.287a.791.791 0 0 1-1.119 0l-3.803-3.803a.79.79 0 0 0-1.118 0l-3.803 3.803a.79.79 0 0 1-1.119 0l-.287-.287a.791.791 0 0 1 0-1.119l3.803-3.803a.791.791 0 0 0 0-1.118L4.232 5.638a.791.791 0 0 1 0-1.119l.287-.287a.791.791 0 0 1 1.119 0L9.44 8.035Z";
-var CloseButtonFrame = core.styled(core.View, {
+var CloseButtonFrame = gui.styled(gui.View, {
   name: "LuxCloseButton",
   render: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Close" }),
   role: "button",

package/dist/alert.js

@@ -2,7 +2,7 @@
 import * as React2 from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { styled, View } from '@hanzogui/core';
+import { styled, View } from '@hanzo/gui';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/alert.tsx

package/dist/avatar.cjs

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var RadixAvatar = require('@radix-ui/react-avatar');
+var gui = require('@hanzo/gui');
 var React = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
@@ -25,7 +25,6 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var RadixAvatar__namespace = /*#__PURE__*/_interopNamespace(RadixAvatar);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 function cn(...inputs) {
@@ -71,9 +70,10 @@ var Avatar = React__namespace.forwardRef(
     const variant = variantProp ?? group.variant ?? DEFAULT_VARIANT;
     const isBorderless = borderless ?? group.borderless ?? false;
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      RadixAvatar__namespace.Root,
+      gui.Avatar,
       {
         ref,
+        unstyled: true,
         className: cn(
           "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full align-middle",
           SIZE_CLASSES[size],
@@ -84,8 +84,8 @@ var Avatar = React__namespace.forwardRef(
         ...rest,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { name, icon, children: fallback }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            RadixAvatar__namespace.Image,
+          src != null && /* @__PURE__ */ jsxRuntime.jsx(
+            gui.Avatar.Image,
             {
               className: "h-full w-full rounded-[inherit] object-cover",
               src,
@@ -104,9 +104,10 @@ var AvatarFallback = React__namespace.forwardRef(
   function AvatarFallback2(props, ref) {
     const { name, icon, children, className, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      RadixAvatar__namespace.Fallback,
+      gui.Avatar.Fallback,
       {
         ref,
+        unstyled: true,
         className: cn(
           "flex h-full w-full items-center justify-center font-medium",
           className

package/dist/avatar.js

@@ -1,5 +1,5 @@
 "use client";
-import * as RadixAvatar from '@radix-ui/react-avatar';
+import { Avatar as Avatar$1 } from '@hanzo/gui';
 import * as React from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -48,9 +48,10 @@ var Avatar = React.forwardRef(
     const variant = variantProp ?? group.variant ?? DEFAULT_VARIANT;
     const isBorderless = borderless ?? group.borderless ?? false;
     return /* @__PURE__ */ jsxs(
-      RadixAvatar.Root,
+      Avatar$1,
       {
         ref,
+        unstyled: true,
         className: cn(
           "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full align-middle",
           SIZE_CLASSES[size],
@@ -61,8 +62,8 @@ var Avatar = React.forwardRef(
         ...rest,
         children: [
           /* @__PURE__ */ jsx(AvatarFallback, { name, icon, children: fallback }),
-          /* @__PURE__ */ jsx(
-            RadixAvatar.Image,
+          src != null && /* @__PURE__ */ jsx(
+            Avatar$1.Image,
             {
               className: "h-full w-full rounded-[inherit] object-cover",
               src,
@@ -81,9 +82,10 @@ var AvatarFallback = React.forwardRef(
   function AvatarFallback2(props, ref) {
     const { name, icon, children, className, ...rest } = props;
     return /* @__PURE__ */ jsxs(
-      RadixAvatar.Fallback,
+      Avatar$1.Fallback,
       {
         ref,
+        unstyled: true,
         className: cn(
           "flex h-full w-full items-center justify-center font-medium",
           className

package/dist/badge.cjs

@@ -1,11 +1,11 @@
 "use client";
 'use strict';
 
-var React2 = require('react');
+var React3 = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
-var tooltip = require('@hanzogui/tooltip');
+var gui = require('@hanzo/gui');
 var usehooks = require('@uidotdev/usehooks');
 
 function _interopNamespace(e) {
@@ -26,7 +26,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
+var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
 
 // src/badge.tsx
 function cn(...inputs) {
@@ -152,7 +152,7 @@ var SKELETON_CLASSES = [
   "bg-[length:200%_100%]"
 ].join(" ");
 var HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
-var Skeleton = React2__namespace.forwardRef(
+var Skeleton = React3__namespace.forwardRef(
   function Skeleton2(props, ref) {
     const { loading = false, asChild, className, children, style: styleProp, as: Component = "div", ...allRest } = props;
     const shimStyle = shimToStyle(props);
@@ -161,10 +161,10 @@ var Skeleton = React2__namespace.forwardRef(
     const cls = hideBelowClass ? cn(className, hideBelowClass) : className;
     const htmlRest = stripShims(allRest);
     if (!loading) {
-      if (asChild && React2__namespace.isValidElement(children)) return children;
+      if (asChild && React3__namespace.isValidElement(children)) return children;
       return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, className: cls, style: mergedStyle, ...htmlRest, children });
     }
-    if (asChild && React2__namespace.isValidElement(children)) {
+    if (asChild && React3__namespace.isValidElement(children)) {
       return /* @__PURE__ */ jsxRuntime.jsx(
         Component,
         {
@@ -190,7 +190,7 @@ var Skeleton = React2__namespace.forwardRef(
     );
   }
 );
-React2__namespace.forwardRef(
+React3__namespace.forwardRef(
   function SkeletonCircle2(props, ref) {
     const { size = 40, loading = true, className, ...rest } = props;
     const dimension = typeof size === "number" ? `${size}px` : size;
@@ -206,7 +206,7 @@ React2__namespace.forwardRef(
     );
   }
 );
-React2__namespace.forwardRef(
+React3__namespace.forwardRef(
   function SkeletonText2(props, ref) {
     const { noOfLines = 3, loading = true, className, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex w-full flex-col gap-2", className), ...rest, children: Array.from({ length: noOfLines }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -219,26 +219,24 @@ React2__namespace.forwardRef(
     )) });
   }
 );
-var LG_BREAKPOINT = 1024;
-function useIsMobile() {
-  const [isMobile, setIsMobile] = React2__namespace.useState(() => {
-    if (typeof window === "undefined") return false;
-    return window.innerWidth < LG_BREAKPOINT;
-  });
-  React2__namespace.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${LG_BREAKPOINT - 1}px)`);
-    const handler = (e) => setIsMobile(e.matches);
-    setIsMobile(mql.matches);
-    mql.addEventListener("change", handler);
-    return () => mql.removeEventListener("change", handler);
-  }, []);
-  return isMobile;
+var TOUCH_PX = 1024;
+function useBelow(px) {
+  const [below, setBelow] = React3__namespace.useState(false);
+  React3__namespace.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${px - 1}px)`);
+    const apply = () => setBelow(mql.matches);
+    apply();
+    mql.addEventListener("change", apply);
+    return () => mql.removeEventListener("change", apply);
+  }, [px]);
+  return below;
 }
+var useIsTouch = () => useBelow(TOUCH_PX);
 function mapPlacement(p) {
   if (!p) return void 0;
   return p;
 }
-var Tooltip = React2__namespace.forwardRef(
+var Tooltip = React3__namespace.forwardRef(
   function Tooltip2(props, ref) {
     const {
       showArrow: showArrowProp,
@@ -257,28 +255,28 @@ var Tooltip = React2__namespace.forwardRef(
       interactive,
       positioning
     } = props;
-    const [open, setOpen] = React2__namespace.useState(defaultOpen);
-    const timeoutRef = React2__namespace.useRef(null);
-    const isMobile = useIsMobile();
-    const handleOpenChange = React2__namespace.useCallback((nextOpen) => {
+    const [open, setOpen] = React3__namespace.useState(defaultOpen);
+    const timeoutRef = React3__namespace.useRef(null);
+    const isMobile = useIsTouch();
+    const handleOpenChange = React3__namespace.useCallback((nextOpen) => {
       setOpen(nextOpen);
       onOpenChange?.({ open: nextOpen });
     }, [onOpenChange]);
-    const handleOpenChangeManual = React2__namespace.useCallback((nextOpen) => {
+    const handleOpenChangeManual = React3__namespace.useCallback((nextOpen) => {
       timeoutRef.current && window.clearTimeout(timeoutRef.current);
       timeoutRef.current = window.setTimeout(() => {
         setOpen(nextOpen);
         onOpenChange?.({ open: nextOpen });
       }, nextOpen ? openDelay : closeDelay);
     }, [closeDelay, openDelay, onOpenChange]);
-    const handleClickAway = React2__namespace.useCallback(() => {
+    const handleClickAway = React3__namespace.useCallback(() => {
       handleOpenChangeManual(false);
     }, [handleOpenChangeManual]);
     const triggerRef = usehooks.useClickAway(handleClickAway);
-    const handleTriggerClick = React2__namespace.useCallback(() => {
+    const handleTriggerClick = React3__namespace.useCallback(() => {
       handleOpenChangeManual(!open);
     }, [handleOpenChangeManual, open]);
-    const handleContentClick = React2__namespace.useCallback((event) => {
+    const handleContentClick = React3__namespace.useCallback((event) => {
       event.stopPropagation();
       if (interactive) {
         const closestLink = event.target?.closest("a");
@@ -287,7 +285,7 @@ var Tooltip = React2__namespace.forwardRef(
         }
       }
     }, [interactive, handleOpenChangeManual]);
-    React2__namespace.useEffect(() => {
+    React3__namespace.useEffect(() => {
       return () => {
         if (timeoutRef.current) {
           clearTimeout(timeoutRef.current);
@@ -300,8 +298,8 @@ var Tooltip = React2__namespace.forwardRef(
     const isPopover = variant === "popover";
     const placement = mapPlacement(positioning?.placement) ?? "top";
     const offset = positioning?.offset?.mainAxis ?? 4;
-    return /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipGroup, { delay: openDelay, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      tooltip.Tooltip,
+    return /* @__PURE__ */ jsxRuntime.jsx(gui.TooltipGroup, { delay: openDelay, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      gui.Tooltip,
       {
         open,
         onOpenChange: handleOpenChange,
@@ -311,7 +309,7 @@ var Tooltip = React2__namespace.forwardRef(
         unstyled: true,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            tooltip.Tooltip.Trigger,
+            gui.Tooltip.Trigger,
             {
               ref: open ? triggerRef : void 0,
               asChild: true,
@@ -321,7 +319,7 @@ var Tooltip = React2__namespace.forwardRef(
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs(
-            tooltip.Tooltip.Content,
+            gui.Tooltip.Content,
             {
               ref,
               unstyled: true,
@@ -338,7 +336,7 @@ var Tooltip = React2__namespace.forwardRef(
               ...contentProps,
               children: [
                 showArrow && /* @__PURE__ */ jsxRuntime.jsx(
-                  tooltip.Tooltip.Arrow,
+                  gui.Tooltip.Arrow,
                   {
                     unstyled: true,
                     className: cn(
@@ -389,7 +387,7 @@ var COLOR_PALETTE_CLASSES = {
   bright_pink: "bg-badge-bright-pink-bg text-badge-bright-pink-fg"
 };
 var S2 = 4;
-var Badge = React2__namespace.default.forwardRef(
+var Badge = React3__namespace.default.forwardRef(
   function Badge2(props, ref) {
     const {
       loading,

package/dist/badge.js

@@ -1,10 +1,10 @@
 "use client";
-import * as React2 from 'react';
-import React2__default from 'react';
+import * as React3 from 'react';
+import React3__default from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { TooltipGroup, Tooltip as Tooltip$1 } from '@hanzogui/tooltip';
+import { TooltipGroup, Tooltip as Tooltip$1 } from '@hanzo/gui';
 import { useClickAway } from '@uidotdev/usehooks';
 
 // src/badge.tsx
@@ -131,7 +131,7 @@ var SKELETON_CLASSES = [
   "bg-[length:200%_100%]"
 ].join(" ");
 var HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
-var Skeleton = React2.forwardRef(
+var Skeleton = React3.forwardRef(
   function Skeleton2(props, ref) {
     const { loading = false, asChild, className, children, style: styleProp, as: Component = "div", ...allRest } = props;
     const shimStyle = shimToStyle(props);
@@ -140,10 +140,10 @@ var Skeleton = React2.forwardRef(
     const cls = hideBelowClass ? cn(className, hideBelowClass) : className;
     const htmlRest = stripShims(allRest);
     if (!loading) {
-      if (asChild && React2.isValidElement(children)) return children;
+      if (asChild && React3.isValidElement(children)) return children;
       return /* @__PURE__ */ jsx(Component, { ref, className: cls, style: mergedStyle, ...htmlRest, children });
     }
-    if (asChild && React2.isValidElement(children)) {
+    if (asChild && React3.isValidElement(children)) {
       return /* @__PURE__ */ jsx(
         Component,
         {
@@ -169,7 +169,7 @@ var Skeleton = React2.forwardRef(
     );
   }
 );
-React2.forwardRef(
+React3.forwardRef(
   function SkeletonCircle2(props, ref) {
     const { size = 40, loading = true, className, ...rest } = props;
     const dimension = typeof size === "number" ? `${size}px` : size;
@@ -185,7 +185,7 @@ React2.forwardRef(
     );
   }
 );
-React2.forwardRef(
+React3.forwardRef(
   function SkeletonText2(props, ref) {
     const { noOfLines = 3, loading = true, className, ...rest } = props;
     return /* @__PURE__ */ jsx("div", { ref, className: cn("flex w-full flex-col gap-2", className), ...rest, children: Array.from({ length: noOfLines }).map((_, index) => /* @__PURE__ */ jsx(
@@ -198,26 +198,24 @@ React2.forwardRef(
     )) });
   }
 );
-var LG_BREAKPOINT = 1024;
-function useIsMobile() {
-  const [isMobile, setIsMobile] = React2.useState(() => {
-    if (typeof window === "undefined") return false;
-    return window.innerWidth < LG_BREAKPOINT;
-  });
-  React2.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${LG_BREAKPOINT - 1}px)`);
-    const handler = (e) => setIsMobile(e.matches);
-    setIsMobile(mql.matches);
-    mql.addEventListener("change", handler);
-    return () => mql.removeEventListener("change", handler);
-  }, []);
-  return isMobile;
+var TOUCH_PX = 1024;
+function useBelow(px) {
+  const [below, setBelow] = React3.useState(false);
+  React3.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${px - 1}px)`);
+    const apply = () => setBelow(mql.matches);
+    apply();
+    mql.addEventListener("change", apply);
+    return () => mql.removeEventListener("change", apply);
+  }, [px]);
+  return below;
 }
+var useIsTouch = () => useBelow(TOUCH_PX);
 function mapPlacement(p) {
   if (!p) return void 0;
   return p;
 }
-var Tooltip = React2.forwardRef(
+var Tooltip = React3.forwardRef(
   function Tooltip2(props, ref) {
     const {
       showArrow: showArrowProp,
@@ -236,28 +234,28 @@ var Tooltip = React2.forwardRef(
       interactive,
       positioning
     } = props;
-    const [open, setOpen] = React2.useState(defaultOpen);
-    const timeoutRef = React2.useRef(null);
-    const isMobile = useIsMobile();
-    const handleOpenChange = React2.useCallback((nextOpen) => {
+    const [open, setOpen] = React3.useState(defaultOpen);
+    const timeoutRef = React3.useRef(null);
+    const isMobile = useIsTouch();
+    const handleOpenChange = React3.useCallback((nextOpen) => {
       setOpen(nextOpen);
       onOpenChange?.({ open: nextOpen });
     }, [onOpenChange]);
-    const handleOpenChangeManual = React2.useCallback((nextOpen) => {
+    const handleOpenChangeManual = React3.useCallback((nextOpen) => {
       timeoutRef.current && window.clearTimeout(timeoutRef.current);
       timeoutRef.current = window.setTimeout(() => {
         setOpen(nextOpen);
         onOpenChange?.({ open: nextOpen });
       }, nextOpen ? openDelay : closeDelay);
     }, [closeDelay, openDelay, onOpenChange]);
-    const handleClickAway = React2.useCallback(() => {
+    const handleClickAway = React3.useCallback(() => {
       handleOpenChangeManual(false);
     }, [handleOpenChangeManual]);
     const triggerRef = useClickAway(handleClickAway);
-    const handleTriggerClick = React2.useCallback(() => {
+    const handleTriggerClick = React3.useCallback(() => {
       handleOpenChangeManual(!open);
     }, [handleOpenChangeManual, open]);
-    const handleContentClick = React2.useCallback((event) => {
+    const handleContentClick = React3.useCallback((event) => {
       event.stopPropagation();
       if (interactive) {
         const closestLink = event.target?.closest("a");
@@ -266,7 +264,7 @@ var Tooltip = React2.forwardRef(
         }
       }
     }, [interactive, handleOpenChangeManual]);
-    React2.useEffect(() => {
+    React3.useEffect(() => {
       return () => {
         if (timeoutRef.current) {
           clearTimeout(timeoutRef.current);
@@ -368,7 +366,7 @@ var COLOR_PALETTE_CLASSES = {
   bright_pink: "bg-badge-bright-pink-bg text-badge-bright-pink-fg"
 };
 var S2 = 4;
-var Badge = React2__default.forwardRef(
+var Badge = React3__default.forwardRef(
   function Badge2(props, ref) {
     const {
       loading,

package/dist/bank.cjs

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var core = require('@hanzogui/core');
+var gui = require('@hanzo/gui');
 var jsxRuntime = require('react/jsx-runtime');
 
 var bankColors = {
@@ -27,7 +27,7 @@ var bankColors = {
   divider: "#222222",
   disabled: "#444444"
 };
-var BankCard = core.styled(core.View, {
+var BankCard = gui.styled(gui.View, {
   name: "BankCard",
   backgroundColor: bankColors.card,
   borderRadius: 24,
@@ -48,7 +48,7 @@ var BankCard = core.styled(core.View, {
     size: "md"
   }
 });
-var BankInput = core.styled(core.Text, {
+var BankInput = gui.styled(gui.Text, {
   name: "BankInput",
   render: "input",
   backgroundColor: bankColors.input,
@@ -84,7 +84,7 @@ var BankInput = core.styled(core.Text, {
     size: "md"
   }
 });
-var BankButton = core.styled(core.View, {
+var BankButton = gui.styled(gui.View, {
   name: "BankButton",
   render: "button",
   backgroundColor: bankColors.accent,
@@ -129,7 +129,7 @@ var BankButton = core.styled(core.View, {
     variant: "primary"
   }
 });
-var BankButtonText = core.styled(core.Text, {
+var BankButtonText = gui.styled(gui.Text, {
   name: "BankButtonText",
   color: "#000000",
   fontSize: 16,
@@ -143,7 +143,7 @@ var BankButtonText = core.styled(core.Text, {
     }
   }
 });
-var BankHeading = core.styled(core.Text, {
+var BankHeading = gui.styled(gui.Text, {
   name: "BankHeading",
   color: bankColors.text,
   fontWeight: "700",
@@ -160,7 +160,7 @@ var BankHeading = core.styled(core.Text, {
     size: "lg"
   }
 });
-var BankText = core.styled(core.Text, {
+var BankText = gui.styled(gui.Text, {
   name: "BankText",
   color: bankColors.textMuted,
   fontSize: 16,
@@ -184,13 +184,13 @@ function BankField({
   error,
   children
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(core.View, { gap: 8, width: "100%", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(gui.View, { gap: 8, width: "100%", children: [
     label && /* @__PURE__ */ jsxRuntime.jsx(BankText, { variant: "label", children: label }),
     children,
     error && /* @__PURE__ */ jsxRuntime.jsx(BankText, { variant: "error", children: error })
   ] });
 }
-var BankAlert = core.styled(core.View, {
+var BankAlert = gui.styled(gui.View, {
   name: "BankAlert",
   borderRadius: 12,
   padding: 16,
@@ -209,7 +209,7 @@ var BankAlert = core.styled(core.View, {
     }
   }
 });
-var BankAlertText = core.styled(core.Text, {
+var BankAlertText = gui.styled(gui.Text, {
   name: "BankAlertText",
   fontSize: 14,
   variants: {
@@ -219,7 +219,7 @@ var BankAlertText = core.styled(core.Text, {
     }
   }
 });
-var BankPinBox = core.styled(core.Text, {
+var BankPinBox = gui.styled(gui.Text, {
   name: "BankPinBox",
   render: "input",
   backgroundColor: bankColors.input,
@@ -242,13 +242,13 @@ var BankPinBox = core.styled(core.Text, {
     }
   }
 });
-var BankDivider = core.styled(core.View, {
+var BankDivider = gui.styled(gui.View, {
   name: "BankDivider",
   height: 1,
   width: "100%",
   backgroundColor: bankColors.divider
 });
-var BankPage = core.styled(core.View, {
+var BankPage = gui.styled(gui.View, {
   name: "BankPage",
   backgroundColor: bankColors.bg,
   minHeight: "100vh",