@luxfi/ui 6.1.3 → 7.1.0

package/dist/badge.js

@@ -0,0 +1,431 @@
+"use client";
+import * as React2 from 'react';
+import React2__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 { useClickAway } from '@uidotdev/usehooks';
+
+// src/badge.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var SHIM_PROPS = [
+  "w",
+  "h",
+  "minW",
+  "maxW",
+  "display",
+  "flexGrow",
+  "flexShrink",
+  "flexBasis",
+  "fontWeight",
+  "textStyle",
+  "borderRadius",
+  "alignSelf",
+  "alignItems",
+  "justifyContent",
+  "color",
+  "mt",
+  "mb",
+  "ml",
+  "mr",
+  "height",
+  "overflow",
+  "whiteSpace",
+  "textOverflow",
+  "textTransform",
+  "gap",
+  "gridTemplateColumns",
+  "minWidth",
+  "boxSize",
+  "py",
+  "px",
+  "p",
+  "hideBelow",
+  "fontSize",
+  "flexWrap",
+  "wordBreak",
+  "lineHeight",
+  "marginRight",
+  "position",
+  "background"
+];
+var S = 4;
+function dim(v) {
+  if (v == null) return void 0;
+  if (typeof v === "number") return `${v * S}px`;
+  if (typeof v === "string") return v;
+  if (typeof v === "object") {
+    const o = v;
+    return o.base ?? o.lg ?? o.xl ?? Object.values(o)[0];
+  }
+  return void 0;
+}
+function sp(v) {
+  if (v === void 0) return void 0;
+  return typeof v === "number" ? `${v * S}px` : v;
+}
+function shimToStyle(props) {
+  const s = {};
+  if (props.w !== void 0) s.width = dim(props.w);
+  if (props.h !== void 0) s.height = dim(props.h);
+  if (props.minW !== void 0) s.minWidth = dim(props.minW);
+  if (props.maxW !== void 0) s.maxWidth = dim(props.maxW);
+  if (props.display !== void 0) s.display = props.display;
+  if (props.flexGrow !== void 0) s.flexGrow = props.flexGrow;
+  if (props.flexShrink !== void 0) s.flexShrink = props.flexShrink;
+  if (props.flexBasis !== void 0) s.flexBasis = props.flexBasis;
+  if (props.fontWeight !== void 0) s.fontWeight = props.fontWeight;
+  if (props.borderRadius !== void 0) s.borderRadius = props.borderRadius;
+  if (props.alignSelf !== void 0) s.alignSelf = props.alignSelf;
+  if (props.alignItems !== void 0) s.alignItems = props.alignItems;
+  if (props.justifyContent !== void 0) s.justifyContent = props.justifyContent;
+  if (props.color !== void 0) s.color = props.color;
+  if (props.mt !== void 0) s.marginTop = sp(props.mt);
+  if (props.mb !== void 0) s.marginBottom = sp(props.mb);
+  if (props.ml !== void 0) s.marginLeft = sp(props.ml);
+  if (props.mr !== void 0) s.marginRight = sp(props.mr);
+  if (props.height !== void 0) s.height = props.height;
+  if (props.overflow !== void 0) s.overflow = props.overflow;
+  if (props.whiteSpace !== void 0) s.whiteSpace = props.whiteSpace;
+  if (props.textOverflow !== void 0) s.textOverflow = props.textOverflow;
+  if (props.textTransform !== void 0) s.textTransform = props.textTransform;
+  if (props.gap !== void 0) s.gap = sp(props.gap);
+  if (props.gridTemplateColumns !== void 0) s.gridTemplateColumns = props.gridTemplateColumns;
+  if (props.minWidth !== void 0) s.minWidth = props.minWidth;
+  if (props.boxSize !== void 0) {
+    const v = typeof props.boxSize === "number" ? `${props.boxSize * S}px` : props.boxSize;
+    s.width = v;
+    s.height = v;
+  }
+  if (props.py !== void 0) {
+    const v = sp(props.py);
+    s.paddingTop = v;
+    s.paddingBottom = v;
+  }
+  if (props.px !== void 0) {
+    const v = sp(props.px);
+    s.paddingLeft = v;
+    s.paddingRight = v;
+  }
+  if (props.p !== void 0) s.padding = sp(props.p);
+  if (props.fontSize !== void 0) s.fontSize = props.fontSize;
+  if (props.flexWrap !== void 0) s.flexWrap = props.flexWrap;
+  if (props.wordBreak !== void 0) s.wordBreak = props.wordBreak;
+  if (props.lineHeight !== void 0) s.lineHeight = props.lineHeight;
+  if (props.marginRight !== void 0) s.marginRight = props.marginRight;
+  if (props.position !== void 0) s.position = props.position;
+  if (props.background !== void 0) s.background = props.background;
+  return s;
+}
+function stripShims(props) {
+  const out = { ...props };
+  for (const k of SHIM_PROPS) delete out[k];
+  return out;
+}
+var SKELETON_CLASSES = [
+  "animate-skeleton-shimmer rounded-sm",
+  "bg-[linear-gradient(90deg,var(--color-skeleton-start)_0%,var(--color-skeleton-end)_50%,var(--color-skeleton-start)_100%)]",
+  "bg-[length:200%_100%]"
+].join(" ");
+var HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
+var Skeleton = React2.forwardRef(
+  function Skeleton2(props, ref) {
+    const { loading = false, asChild, className, children, style: styleProp, as: Component = "div", ...allRest } = props;
+    const shimStyle = shimToStyle(props);
+    const mergedStyle = Object.keys(shimStyle).length > 0 || styleProp ? { ...shimStyle, ...styleProp } : void 0;
+    const hideBelowClass = props.hideBelow ? HIDE_BELOW_MAP[props.hideBelow] : void 0;
+    const cls = hideBelowClass ? cn(className, hideBelowClass) : className;
+    const htmlRest = stripShims(allRest);
+    if (!loading) {
+      if (asChild && React2.isValidElement(children)) return children;
+      return /* @__PURE__ */ jsx(Component, { ref, className: cls, style: mergedStyle, ...htmlRest, children });
+    }
+    if (asChild && React2.isValidElement(children)) {
+      return /* @__PURE__ */ jsx(
+        Component,
+        {
+          ref,
+          "data-loading": true,
+          className: cn(SKELETON_CLASSES, "text-transparent [&_*]:invisible", cls),
+          style: mergedStyle,
+          ...htmlRest,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref,
+        "data-loading": true,
+        className: cn(SKELETON_CLASSES, children ? "text-transparent [&_*]:invisible" : "min-h-5", cls),
+        style: mergedStyle,
+        ...htmlRest,
+        children
+      }
+    );
+  }
+);
+React2.forwardRef(
+  function SkeletonCircle2(props, ref) {
+    const { size = 40, loading = true, className, ...rest } = props;
+    const dimension = typeof size === "number" ? `${size}px` : size;
+    return /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        ref,
+        loading,
+        className: cn("rounded-full shrink-0", className),
+        style: { width: dimension, height: dimension, ...rest.style },
+        ...rest
+      }
+    );
+  }
+);
+React2.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(
+      Skeleton,
+      {
+        loading,
+        className: cn("h-4", index === noOfLines - 1 && "max-w-[80%]")
+      },
+      index
+    )) });
+  }
+);
+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;
+}
+function mapPlacement(p) {
+  if (!p) return void 0;
+  return p;
+}
+var Tooltip = React2.forwardRef(
+  function Tooltip2(props, ref) {
+    const {
+      showArrow: showArrowProp,
+      onOpenChange,
+      variant,
+      selected,
+      children,
+      disabled,
+      disableOnMobile,
+      content,
+      contentProps,
+      defaultOpen = false,
+      triggerProps,
+      closeDelay = 100,
+      openDelay = 100,
+      interactive,
+      positioning
+    } = props;
+    const [open, setOpen] = React2.useState(defaultOpen);
+    const timeoutRef = React2.useRef(null);
+    const isMobile = useIsMobile();
+    const handleOpenChange = React2.useCallback((nextOpen) => {
+      setOpen(nextOpen);
+      onOpenChange?.({ open: nextOpen });
+    }, [onOpenChange]);
+    const handleOpenChangeManual = React2.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(() => {
+      handleOpenChangeManual(false);
+    }, [handleOpenChangeManual]);
+    const triggerRef = useClickAway(handleClickAway);
+    const handleTriggerClick = React2.useCallback(() => {
+      handleOpenChangeManual(!open);
+    }, [handleOpenChangeManual, open]);
+    const handleContentClick = React2.useCallback((event) => {
+      event.stopPropagation();
+      if (interactive) {
+        const closestLink = event.target?.closest("a");
+        if (closestLink) {
+          handleOpenChangeManual(false);
+        }
+      }
+    }, [interactive, handleOpenChangeManual]);
+    React2.useEffect(() => {
+      return () => {
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+      };
+    }, []);
+    if (disabled || disableOnMobile && isMobile) return children;
+    const defaultShowArrow = variant === "popover" ? false : true;
+    const showArrow = showArrowProp !== void 0 ? showArrowProp : defaultShowArrow;
+    const isPopover = variant === "popover";
+    const placement = mapPlacement(positioning?.placement) ?? "top";
+    const offset = positioning?.offset?.mainAxis ?? 4;
+    return /* @__PURE__ */ jsx(TooltipGroup, { delay: openDelay, children: /* @__PURE__ */ jsxs(
+      Tooltip$1,
+      {
+        open,
+        onOpenChange: handleOpenChange,
+        delay: { open: openDelay, close: closeDelay },
+        placement,
+        offset,
+        unstyled: true,
+        children: [
+          /* @__PURE__ */ jsx(
+            Tooltip$1.Trigger,
+            {
+              ref: open ? triggerRef : void 0,
+              asChild: true,
+              ...isMobile ? { onPress: handleTriggerClick } : {},
+              ...triggerProps,
+              children
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Tooltip$1.Content,
+            {
+              ref,
+              unstyled: true,
+              className: cn(
+                "z-[9999] overflow-hidden rounded-lg px-3 py-2 text-sm",
+                "animate-in fade-in-0 zoom-in-95",
+                isPopover && "bg-[var(--color-popover-bg)] text-[var(--color-text-primary)]",
+                isPopover && "shadow-[var(--shadow-popover)] border border-[var(--color-border-divider)] max-w-sm",
+                !isPopover && "bg-[var(--color-tooltip-bg)] text-[var(--color-tooltip-fg)] max-w-xs",
+                contentProps?.className
+              ),
+              onClick: interactive ? handleContentClick : void 0,
+              ...selected ? { "data-selected": true } : {},
+              ...contentProps,
+              children: [
+                showArrow && /* @__PURE__ */ jsx(
+                  Tooltip$1.Arrow,
+                  {
+                    unstyled: true,
+                    className: cn(
+                      isPopover ? "fill-[var(--color-popover-bg)]" : "fill-[var(--color-tooltip-bg)]"
+                    )
+                  }
+                ),
+                content
+              ]
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+function TruncatedTextTooltip({ label, children }) {
+  return /* @__PURE__ */ jsx(Tooltip, { content: label, positioning: { placement: "top" }, children });
+}
+var BASE_CLASSES = "inline-flex items-center rounded-sm gap-1 font-medium w-fit max-w-full whitespace-nowrap select-text";
+var SIZE_CLASSES = {
+  sm: "text-xs p-1 h-[18px] min-h-[18px]",
+  md: "text-sm px-1 py-0.5 min-h-6",
+  lg: "text-sm px-2 py-1 min-h-7 font-semibold"
+};
+var COLOR_PALETTE_CLASSES = {
+  gray: "bg-badge-gray-bg text-badge-gray-fg",
+  green: "bg-badge-green-bg text-badge-green-fg",
+  red: "bg-badge-red-bg text-badge-red-fg",
+  purple: "bg-badge-purple-bg text-badge-purple-fg",
+  orange: "bg-badge-orange-bg text-badge-orange-fg",
+  blue: "bg-badge-blue-bg text-badge-blue-fg",
+  yellow: "bg-badge-yellow-bg text-badge-yellow-fg",
+  teal: "bg-badge-teal-bg text-badge-teal-fg",
+  cyan: "bg-badge-cyan-bg text-badge-cyan-fg",
+  pink: "bg-badge-pink-bg text-badge-pink-fg",
+  purple_alt: "bg-badge-purple-alt-bg text-badge-purple-alt-fg",
+  blue_alt: "bg-badge-blue-alt-bg text-badge-blue-alt-fg",
+  bright_gray: "bg-badge-bright-gray-bg text-badge-bright-gray-fg",
+  bright_green: "bg-badge-bright-green-bg text-badge-bright-green-fg",
+  bright_red: "bg-badge-bright-red-bg text-badge-bright-red-fg",
+  bright_blue: "bg-badge-bright-blue-bg text-badge-bright-blue-fg",
+  bright_yellow: "bg-badge-bright-yellow-bg text-badge-bright-yellow-fg",
+  bright_teal: "bg-badge-bright-teal-bg text-badge-bright-teal-fg",
+  bright_cyan: "bg-badge-bright-cyan-bg text-badge-bright-cyan-fg",
+  bright_orange: "bg-badge-bright-orange-bg text-badge-bright-orange-fg",
+  bright_purple: "bg-badge-bright-purple-bg text-badge-bright-purple-fg",
+  bright_pink: "bg-badge-bright-pink-bg text-badge-bright-pink-fg"
+};
+var S2 = 4;
+var Badge = React2__default.forwardRef(
+  function Badge2(props, ref) {
+    const {
+      loading,
+      startElement,
+      children,
+      truncated = false,
+      endElement,
+      variant: _variant,
+      size = "md",
+      colorPalette = "gray",
+      className,
+      flexShrink: _flexShrink,
+      gap: _gap,
+      ml: _ml,
+      mr: _mr,
+      style: styleProp,
+      ...rest
+    } = props;
+    const shimStyle = { ...styleProp };
+    if (_flexShrink !== void 0) shimStyle.flexShrink = _flexShrink;
+    if (_gap !== void 0) shimStyle.gap = typeof _gap === "number" ? `${_gap * S2}px` : _gap;
+    if (_ml !== void 0) {
+      if (typeof _ml === "object") {
+        const obj = _ml;
+        shimStyle.marginLeft = `${(obj.base ?? obj.lg ?? 0) * S2}px`;
+      } else {
+        shimStyle.marginLeft = typeof _ml === "number" ? `${_ml * S2}px` : _ml;
+      }
+    }
+    if (_mr !== void 0) shimStyle.marginRight = typeof _mr === "number" ? `${_mr * S2}px` : _mr;
+    const badgeStyle = Object.keys(shimStyle).length > 0 ? shimStyle : void 0;
+    const child = children ? /* @__PURE__ */ jsx("span", { className: "overflow-hidden text-ellipsis", children }) : null;
+    const childrenElement = truncated ? /* @__PURE__ */ jsx(TruncatedTextTooltip, { label: children, children: child }) : child;
+    const badgeElement = /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        className: cn(
+          BASE_CLASSES,
+          SIZE_CLASSES[size],
+          COLOR_PALETTE_CLASSES[colorPalette],
+          className
+        ),
+        style: badgeStyle,
+        ...rest,
+        children: [
+          startElement,
+          childrenElement,
+          endElement
+        ]
+      }
+    );
+    if (loading) {
+      return /* @__PURE__ */ jsx(Skeleton, { loading, asChild: true, children: badgeElement });
+    }
+    return badgeElement;
+  }
+);
+
+export { Badge };

package/dist/bank.cjs

@@ -0,0 +1,272 @@
+"use client";
+'use strict';
+
+var core = require('@hanzogui/core');
+var jsxRuntime = require('react/jsx-runtime');
+
+var bankColors = {
+  bg: "#000000",
+  card: "#111111",
+  cardBorder: "#222222",
+  input: "#1A1A1A",
+  inputBorder: "#333333",
+  inputFocus: "#555555",
+  inputPlaceholder: "#666666",
+  text: "#FFFFFF",
+  textMuted: "#888888",
+  textLabel: "#CCCCCC",
+  accent: "#FFFFFF",
+  accentPress: "#E0E0E0",
+  accentHover: "#F0F0F0",
+  error: "#FF4444",
+  errorBg: "#1C0A0A",
+  errorBorder: "#441111",
+  success: "#44FF44",
+  successBg: "#0A1C0A",
+  successBorder: "#114411",
+  divider: "#222222",
+  disabled: "#444444"
+};
+var BankCard = core.styled(core.View, {
+  name: "BankCard",
+  backgroundColor: bankColors.card,
+  borderRadius: 24,
+  borderWidth: 1,
+  borderColor: bankColors.cardBorder,
+  padding: 32,
+  gap: 32,
+  width: "100%",
+  maxWidth: 512,
+  variants: {
+    size: {
+      sm: { padding: 24, gap: 24, maxWidth: 448 },
+      md: { padding: 32, gap: 32, maxWidth: 512 },
+      lg: { padding: 40, gap: 40, maxWidth: 640 }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var BankInput = core.styled(core.Text, {
+  name: "BankInput",
+  render: "input",
+  backgroundColor: bankColors.input,
+  color: bankColors.text,
+  borderWidth: 1,
+  borderColor: bankColors.inputBorder,
+  borderRadius: 12,
+  paddingHorizontal: 16,
+  paddingVertical: 14,
+  fontSize: 16,
+  lineHeight: 24,
+  outlineStyle: "none",
+  width: "100%",
+  hoverStyle: {
+    borderColor: bankColors.inputFocus
+  },
+  focusStyle: {
+    borderColor: bankColors.inputFocus
+  },
+  variants: {
+    invalid: {
+      true: {
+        borderColor: bankColors.error
+      }
+    },
+    size: {
+      sm: { paddingVertical: 10, fontSize: 14 },
+      md: { paddingVertical: 14, fontSize: 16 },
+      lg: { paddingVertical: 18, fontSize: 18 }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var BankButton = core.styled(core.View, {
+  name: "BankButton",
+  render: "button",
+  backgroundColor: bankColors.accent,
+  borderRadius: 16,
+  height: 56,
+  alignItems: "center",
+  justifyContent: "center",
+  cursor: "pointer",
+  width: "100%",
+  userSelect: "none",
+  borderWidth: 0,
+  pressStyle: {
+    backgroundColor: bankColors.accentPress,
+    scale: 0.98
+  },
+  hoverStyle: {
+    backgroundColor: bankColors.accentHover
+  },
+  variants: {
+    variant: {
+      primary: {
+        backgroundColor: bankColors.accent
+      },
+      secondary: {
+        backgroundColor: bankColors.cardBorder
+      },
+      ghost: {
+        backgroundColor: "transparent",
+        borderWidth: 1,
+        borderColor: bankColors.cardBorder
+      }
+    },
+    disabled: {
+      true: {
+        opacity: 0.3,
+        cursor: "not-allowed",
+        pointerEvents: "none"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "primary"
+  }
+});
+var BankButtonText = core.styled(core.Text, {
+  name: "BankButtonText",
+  color: "#000000",
+  fontSize: 16,
+  fontWeight: "700",
+  textAlign: "center",
+  variants: {
+    variant: {
+      primary: { color: "#000000" },
+      secondary: { color: bankColors.text },
+      ghost: { color: bankColors.text }
+    }
+  }
+});
+var BankHeading = core.styled(core.Text, {
+  name: "BankHeading",
+  color: bankColors.text,
+  fontWeight: "700",
+  variants: {
+    size: {
+      xs: { fontSize: 18, lineHeight: 24 },
+      sm: { fontSize: 24, lineHeight: 32 },
+      md: { fontSize: 30, lineHeight: 38 },
+      lg: { fontSize: 36, lineHeight: 44 },
+      xl: { fontSize: 48, lineHeight: 56 }
+    }
+  },
+  defaultVariants: {
+    size: "lg"
+  }
+});
+var BankText = core.styled(core.Text, {
+  name: "BankText",
+  color: bankColors.textMuted,
+  fontSize: 16,
+  lineHeight: 24,
+  variants: {
+    variant: {
+      default: { color: bankColors.textMuted },
+      label: { color: bankColors.textLabel, fontSize: 14, fontWeight: "500" },
+      error: { color: bankColors.error, fontSize: 13 },
+      success: { color: bankColors.success, fontSize: 13 },
+      link: { color: bankColors.text, fontWeight: "600", cursor: "pointer" },
+      muted: { color: bankColors.disabled }
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+function BankField({
+  label,
+  error,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(core.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, {
+  name: "BankAlert",
+  borderRadius: 12,
+  padding: 16,
+  borderWidth: 1,
+  gap: 4,
+  variants: {
+    status: {
+      error: {
+        backgroundColor: bankColors.errorBg,
+        borderColor: bankColors.errorBorder
+      },
+      success: {
+        backgroundColor: bankColors.successBg,
+        borderColor: bankColors.successBorder
+      }
+    }
+  }
+});
+var BankAlertText = core.styled(core.Text, {
+  name: "BankAlertText",
+  fontSize: 14,
+  variants: {
+    status: {
+      error: { color: bankColors.error },
+      success: { color: bankColors.success }
+    }
+  }
+});
+var BankPinBox = core.styled(core.Text, {
+  name: "BankPinBox",
+  render: "input",
+  backgroundColor: bankColors.input,
+  color: bankColors.text,
+  borderWidth: 1,
+  borderColor: bankColors.inputBorder,
+  borderRadius: 12,
+  width: 48,
+  height: 48,
+  textAlign: "center",
+  fontSize: 20,
+  fontWeight: "600",
+  outlineStyle: "none",
+  focusStyle: {
+    borderColor: bankColors.inputFocus
+  },
+  variants: {
+    invalid: {
+      true: { borderColor: bankColors.error }
+    }
+  }
+});
+var BankDivider = core.styled(core.View, {
+  name: "BankDivider",
+  height: 1,
+  width: "100%",
+  backgroundColor: bankColors.divider
+});
+var BankPage = core.styled(core.View, {
+  name: "BankPage",
+  backgroundColor: bankColors.bg,
+  minHeight: "100vh",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: 16
+});
+
+exports.BankAlert = BankAlert;
+exports.BankAlertText = BankAlertText;
+exports.BankButton = BankButton;
+exports.BankButtonText = BankButtonText;
+exports.BankCard = BankCard;
+exports.BankDivider = BankDivider;
+exports.BankField = BankField;
+exports.BankHeading = BankHeading;
+exports.BankInput = BankInput;
+exports.BankPage = BankPage;
+exports.BankPinBox = BankPinBox;
+exports.BankText = BankText;
+exports.bankColors = bankColors;