@bunnyapp/components 1.0.35 → 1.0.37

package/dist/esm/index.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createContext, useEffect, useState, useContext, useMemo, useCallback, useRef } from 'react';
 import { Markup } from 'interweave';
-import { ConfigProvider, Button, Typography, Tag, Divider, Popconfirm, Input, Checkbox, Collapse, Modal, Form, Drawer, Card as Card$1, Select, Image, Dropdown, Skeleton } from 'antd';
+import { ConfigProvider, Button, Typography, Tag, Divider, Popconfirm, Input, Checkbox, Collapse, Skeleton, Modal, Form, Drawer, Card as Card$1, Select, Image, Dropdown } from 'antd';
 import { DownloadOutlined, CreditCardOutlined, BankOutlined, SearchOutlined, CloseOutlined, CheckCircleFilled } from '@ant-design/icons';
 import styled from 'styled-components';
 import { DEFAULT_ACCENT_COLOR, DEFAULT_BRAND_COLOR, DEFAULT_SECONDARY_COLOR, DEFAULT_TOP_NAV_IMAGE_URL, gqlRequest, QueryKeyFactory, useIsMobile, isColorTooDark, MARK_PRO, INPUT_BORDER_COLOR, SLATE_50, SLATE_400, SLATE_200, getPlugins, useAllErrorFormats, formatCurrency, invokePlugin, GRAY_500, GRAY_200, useErrorNotification, useSuccessNotification, getFormattedInvoice, PAYABLE_INVOICE_STATES, BreakpointNumbers, useGraphQLmutation, formatDate, FrontendTransaction, SLATE_600, WHITE, TransactionKind, Lists, getAccount, SubscriptionChargeKind, SubscriptionState as SubscriptionState$2, MODAL_MAX_HEIGHT, SLATE_500, DataInterval, TAG_COLORS, ChargeType, PricingModel } from '@bunnyapp/common';
@@ -42,7 +42,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = ".ant-divider-horizontal {\n  margin: 0;\n}\n.ant-divider-horizontal {\n  margin: 0;\n}\n.ant-tag {\n  border: none;\n  border-radius: 14px;\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n  font-weight: 500;\n  white-space: nowrap;\n  margin: 0;\n}\n.ant-tag-blue {\n  color: #3b82f6 !important;\n  background: #bfdbfe !important;\n}\n.ant-tag-green {\n  color: #059669 !important;\n  background: #a7f3d0 !important;\n}\n.ant-tag-red {\n  color: #ef4444 !important;\n  background: #fecaca !important;\n}\n.ant-tag-orange {\n  color: #f97316 !important;\n  background: #fed7aa !important;\n}\n.ant-tag-yellow {\n  color: #f59e0b !important;\n  background: #fde68a !important;\n}\n.ant-tag-purple {\n  color: #8b5cf6 !important;\n  background: #ddd6fe !important;\n}\n.ant-tag-black {\n  color: white !important;\n  background: black !important;\n}\n.ant-popover {\n  z-index: 1050;\n}\n.ant-popover-inner-content {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  max-width: 300px;\n}\n.ant-popover-message-title {\n  padding: 0;\n  text-align: center;\n  font-size: 1rem;\n}\n.ant-popover-buttons {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.ant-btn-link:disabled {\n  color: #717d94 !important;\n}\n.ant-btn-link:disabled:hover {\n  background-color: transparent !important;\n}\n.ant-notification {\n  width: min-content;\n}\n.ant-notification-topRight {\n  right: 0 !important;\n  left: 0 !important;\n  margin-left: auto !important;\n  margin-right: auto !important;\n}\n.ant-notification-notice-wrapper {\n  width: 350px !important;\n  overflow: hidden !important;\n}\n.ant-notification-notice {\n  padding: 16px !important;\n  width: 350px !important;\n  display: flex !important;\n  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.08), 0px 1px 18px rgba(0, 0, 0, 0.08), 0px 3px 5px rgba(0, 0, 0, 0.16) !important;\n}\n.ant-notification-notice-description {\n  padding: 0 14px 0 0 !important;\n  color: #232323 !important;\n  font-size: 14px !important;\n  word-break: break-all !important;\n  overflow-wrap: break-word !important;\n}\n.ant-notification-notice-success {\n  background-color: #edfffa !important;\n}\n.ant-notification-notice-error {\n  background-color: #fff8f4 !important;\n}\n.ant-notification-notice-error .ant-notification-notice-message {\n  color: #ff6e1c !important;\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !important;\n  font-weight: 500;\n}\n.ant-notification-notice-error .ant-notification-notice-icon {\n  color: #ff6e1c;\n}\n.ant-notification-notice-success .ant-notification-notice-message {\n  color: #00b76a !important;\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !important;\n  font-weight: 500;\n}\n.ant-notification-notice-success .ant-notification-notice-icon {\n  color: #00b76a !important;\n}\n.ant-notification-notice-message {\n  margin-bottom: 0 !important;\n}\n.ant-notification-notice-close {\n  top: 16px !important;\n  right: 16px !important;\n}\n.ant-menu-submenu-popup > .ant-menu .ant-menu-item {\n  display: flex !important;\n  align-items: center !important;\n}\n.ant-menu-submenu::after {\n  display: none !important;\n}\n:root {\n  --row-background: #ffffff;\n  --row-background-alternate: rgba(100, 116, 139, 0.04);\n  --row-background-dark: #121212;\n  --row-background-alternate-dark: #1e1e1e;\n}\n.plan-step-line {\n  height: 1px;\n  min-width: 128px;\n  background: #717d94;\n}\n.plan-step-number {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 9999px;\n  border: 1px solid #717d94;\n  background: white;\n  width: 24px;\n  height: 24px;\n  color: #717d94;\n}\n.plan-step-number.active {\n  border: none;\n  color: white;\n  background: #ff6e1c;\n}\n.hidden {\n  display: none;\n}\n.cardElement {\n  padding: 8px 11px;\n  border: 1px solid #e5e7eb;\n  background-color: white;\n  font-family: Inter !important;\n}\n.tooltip {\n  visibility: hidden;\n  position: absolute !important;\n}\n.has-tooltip:hover .tooltip {\n  visibility: visible;\n  z-index: 100;\n}\n.show-on-hover {\n  opacity: 0;\n}\n.show-on-hover-container:hover .show-on-hover {\n  opacity: 1;\n}\n.pdf-only {\n  display: none !important;\n}\n.notes p {\n  margin: 0;\n  padding: 0;\n  padding-bottom: 0.25rem;\n}\n#form-element #finix-form-container .field-holder label {\n  color: #717d94 !important;\n  font-size: 12px !important;\n}\n#form-element #finix-form-container > *:first-child,\n#form-element #finix-form-container > *:last-child {\n  margin-top: 0 !important;\n}\n#form-element #finix-form-container > *:not(:first-child):not(:last-child) {\n  margin-top: 12px !important;\n}\n#form-element #finix-form-container .field-array > * {\n  margin-top: 0 !important;\n}\n#form-element #finix-form-container .field-holder .field,\n#form-element #finix-form-container iframe {\n  height: 34px !important;\n}\n#form-element #finix-form-container .field {\n  margin-top: 0 !important;\n  padding-top: 2px !important;\n}\n#form-element #finix-form-container .field-holder .validation {\n  font-size: 11px !important;\n  color: #ff4d4f !important;\n}\n.icon-path {\n  transition: fill 0.3s;\n}\n.shadow-padding-x {\n  padding-right: 1rem;\n  padding-left: 1rem;\n}\n.shadow-padding-xb {\n  padding-right: 1rem;\n  padding-left: 1rem;\n  padding-bottom: 0.5rem;\n}\n.content-container {\n  width: 100%;\n  margin: 0 auto;\n}\n@media (min-width: 1220px) {\n  .content-container {\n    width: 1220px !important;\n    margin: 0 auto;\n  }\n}\n@media (min-width: 768px) {\n  .shadow-padding-x {\n    padding-right: 2rem;\n    padding-left: 2rem;\n  }\n  .shadow-padding-xb {\n    padding-right: 2rem;\n    padding-left: 2rem;\n    padding-bottom: 0.5rem;\n  }\n  .sm\\:flex {\n    display: flex !important;\n  }\n  .sm\\:hidden {\n    display: none !important;\n  }\n}\n.rotate-45,\n.transform {\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n}\n.shadow,\n.shadow-lg,\n.shadow-md,\n.shadow-none,\n.shadow-sm,\n.shadow-xl {\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n}\n.container {\n  width: 100%;\n}\n@media (min-width: 768px) {\n  .container {\n    max-width: 768px;\n  }\n}\n@media (min-width: 1024px) {\n  .container {\n    max-width: 1024px;\n  }\n}\n@media (min-width: 1280px) {\n  .container {\n    max-width: 1280px;\n  }\n}\n@media (min-width: 1536px) {\n  .container {\n    max-width: 1536px;\n  }\n}\n.visible {\n  visibility: visible;\n}\n.fixed {\n  position: fixed;\n}\n.absolute {\n  position: absolute;\n}\n.relative {\n  position: relative;\n}\n.bottom-0 {\n  bottom: 0px;\n}\n.left-0 {\n  left: 0px;\n}\n.right-0 {\n  right: 0px;\n}\n.top-0 {\n  top: 0px;\n}\n.z-50 {\n  z-index: 50;\n}\n.col-span-2 {\n  grid-column: span 2 / span 2;\n}\n.col-span-3 {\n  grid-column: span 3 / span 3;\n}\n.m-0 {\n  margin: 0px;\n}\n.mx-4 {\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n.my-12 {\n  margin-top: 3rem;\n  margin-bottom: 3rem;\n}\n.my-2 {\n  margin-top: 0.5rem;\n  margin-bottom: 0.5rem;\n}\n.my-4 {\n  margin-top: 1rem;\n  margin-bottom: 1rem;\n}\n.mb-4 {\n  margin-bottom: 1rem;\n}\n.ml-2 {\n  margin-left: 0.5rem;\n}\n.mr-8 {\n  margin-right: 2rem;\n}\n.mt-1 {\n  margin-top: 0.25rem;\n}\n.mt-2 {\n  margin-top: 0.5rem;\n}\n.mt-4 {\n  margin-top: 1rem;\n}\n.mt-6 {\n  margin-top: 1.5rem;\n}\n.mt-8 {\n  margin-top: 2rem;\n}\n.block {\n  display: block;\n}\n.flex {\n  display: flex;\n}\n.table {\n  display: table;\n}\n.grid {\n  display: grid;\n}\n.contents {\n  display: contents;\n}\n.hidden {\n  display: none;\n}\n.h-4 {\n  height: 1rem;\n}\n.h-5 {\n  height: 1.25rem;\n}\n.h-8 {\n  height: 2rem;\n}\n.h-full {\n  height: 100%;\n}\n.w-1\\/2 {\n  width: 50%;\n}\n.w-1\\/3 {\n  width: 33.333333%;\n}\n.w-2\\/3 {\n  width: 66.666667%;\n}\n.w-4 {\n  width: 1rem;\n}\n.w-full {\n  width: 100%;\n}\n.max-w-32 {\n  max-width: 8rem;\n}\n.flex-1 {\n  flex: 1 1 0%;\n}\n.shrink-0 {\n  flex-shrink: 0;\n}\n.grow {\n  flex-grow: 1;\n}\n.border-collapse {\n  border-collapse: collapse;\n}\n.rotate-45 {\n  --tw-rotate: 45deg;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.transform {\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.cursor-pointer {\n  cursor: pointer;\n}\n.grid-cols-2 {\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.grid-cols-3 {\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.flex-row {\n  flex-direction: row;\n}\n.flex-col {\n  flex-direction: column;\n}\n.items-end {\n  align-items: flex-end;\n}\n.items-center {\n  align-items: center;\n}\n.justify-start {\n  justify-content: flex-start;\n}\n.justify-end {\n  justify-content: flex-end;\n}\n.justify-center {\n  justify-content: center;\n}\n.justify-between {\n  justify-content: space-between;\n}\n.gap-0 {\n  gap: 0px;\n}\n.gap-1 {\n  gap: 0.25rem;\n}\n.gap-2 {\n  gap: 0.5rem;\n}\n.gap-4 {\n  gap: 1rem;\n}\n.gap-6 {\n  gap: 1.5rem;\n}\n.space-y-2 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.space-y-4 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n.space-y-8 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(2rem * var(--tw-space-y-reverse));\n}\n.overflow-auto {\n  overflow: auto;\n}\n.overflow-hidden {\n  overflow: hidden;\n}\n.overflow-visible {\n  overflow: visible;\n}\n.whitespace-nowrap {\n  white-space: nowrap;\n}\n.text-nowrap {\n  text-wrap: nowrap;\n}\n.rounded {\n  border-radius: 0.25rem;\n}\n.rounded-full {\n  border-radius: 9999px;\n}\n.rounded-md {\n  border-radius: 0.375rem;\n}\n.border {\n  border-width: 1px;\n}\n.border-solid {\n  border-style: solid;\n}\n.border-gray-400 {\n  --tw-border-opacity: 1;\n  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));\n}\n.border-gray-500 {\n  --tw-border-opacity: 1;\n  border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));\n}\n.border-slate-200 {\n  --tw-border-opacity: 1;\n  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));\n}\n.border-slate-300 {\n  --tw-border-opacity: 1;\n  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));\n}\n.border-slate-700 {\n  --tw-border-opacity: 1;\n  border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));\n}\n.bg-black {\n  --tw-bg-opacity: 1;\n  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));\n}\n.bg-emerald-200 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(167 243 208 / var(--tw-bg-opacity, 1));\n}\n.bg-green-200 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1));\n}\n.bg-orange-200 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(254 215 170 / var(--tw-bg-opacity, 1));\n}\n.bg-red-200 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));\n}\n.bg-red-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));\n}\n.bg-slate-50 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));\n}\n.bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bg-yellow-200 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(254 240 138 / var(--tw-bg-opacity, 1));\n}\n.p-0 {\n  padding: 0px;\n}\n.p-1 {\n  padding: 0.25rem;\n}\n.p-2 {\n  padding: 0.5rem;\n}\n.p-4 {\n  padding: 1rem;\n}\n.p-8 {\n  padding: 2rem;\n}\n.px-2 {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.px-3 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n.px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n.px-6 {\n  padding-left: 1.5rem;\n  padding-right: 1.5rem;\n}\n.py-1 {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n.py-2 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n.py-4 {\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n}\n.py-6 {\n  padding-top: 1.5rem;\n  padding-bottom: 1.5rem;\n}\n.pb-2 {\n  padding-bottom: 0.5rem;\n}\n.pb-4 {\n  padding-bottom: 1rem;\n}\n.pb-6 {\n  padding-bottom: 1.5rem;\n}\n.pb-8 {\n  padding-bottom: 2rem;\n}\n.pl-0 {\n  padding-left: 0px;\n}\n.pl-2 {\n  padding-left: 0.5rem;\n}\n.pl-4 {\n  padding-left: 1rem;\n}\n.pt-1 {\n  padding-top: 0.25rem;\n}\n.pt-12 {\n  padding-top: 3rem;\n}\n.pt-2 {\n  padding-top: 0.5rem;\n}\n.pt-4 {\n  padding-top: 1rem;\n}\n.pt-5 {\n  padding-top: 1.25rem;\n}\n.pt-6 {\n  padding-top: 1.5rem;\n}\n.pt-8 {\n  padding-top: 2rem;\n}\n.text-left {\n  text-align: left;\n}\n.text-center {\n  text-align: center;\n}\n.text-right {\n  text-align: right;\n}\n.align-middle {\n  vertical-align: middle;\n}\n.text-2xl {\n  font-size: 1.5rem;\n  line-height: 2rem;\n}\n.text-base {\n  font-size: 1rem;\n  line-height: 1.5rem;\n}\n.text-lg {\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n}\n.text-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.text-xl {\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n}\n.text-xs {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n.font-bold {\n  font-weight: 700;\n}\n.font-medium {\n  font-weight: 500;\n}\n.font-normal {\n  font-weight: 400;\n}\n.capitalize {\n  text-transform: capitalize;\n}\n.text-emerald-600 {\n  --tw-text-opacity: 1;\n  color: rgb(5 150 105 / var(--tw-text-opacity, 1));\n}\n.text-emerald-700 {\n  --tw-text-opacity: 1;\n  color: rgb(4 120 87 / var(--tw-text-opacity, 1));\n}\n.text-gray-600 {\n  --tw-text-opacity: 1;\n  color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.text-gray-900 {\n  --tw-text-opacity: 1;\n  color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.text-green-600 {\n  --tw-text-opacity: 1;\n  color: rgb(22 163 74 / var(--tw-text-opacity, 1));\n}\n.text-orange-500 {\n  --tw-text-opacity: 1;\n  color: rgb(249 115 22 / var(--tw-text-opacity, 1));\n}\n.text-red-500 {\n  --tw-text-opacity: 1;\n  color: rgb(239 68 68 / var(--tw-text-opacity, 1));\n}\n.text-slate-400 {\n  --tw-text-opacity: 1;\n  color: rgb(148 163 184 / var(--tw-text-opacity, 1));\n}\n.text-slate-500 {\n  --tw-text-opacity: 1;\n  color: rgb(100 116 139 / var(--tw-text-opacity, 1));\n}\n.text-white {\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.text-yellow-500 {\n  --tw-text-opacity: 1;\n  color: rgb(234 179 8 / var(--tw-text-opacity, 1));\n}\n.underline {\n  text-decoration-line: underline;\n}\n.shadow {\n  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-lg {\n  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);\n  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-md {\n  --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-none {\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-sm {\n  --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-xl {\n  --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.transition {\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.font-light {\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n}\n.font-medium {\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n}\n.font-bold {\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n}\n@media (min-width: 768px) {\n  .sm\\:flex {\n    display: flex;\n  }\n  .sm\\:hidden {\n    display: none;\n  }\n}\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box !important;\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n  line-height: 1.15;\n}\nbody {\n  color: #232323;\n  background-color: #f8fafc;\n}\nth {\n  font-weight: normal;\n}\ncode {\n  font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\", monospace;\n}\n@media only screen and (max-width: 768px) {\n  select,\n  textarea,\n  input[type=\"text\"],\n  input[type=\"password\"],\n  input[type=\"datetime\"],\n  input[type=\"datetime-local\"],\n  input[type=\"date\"],\n  input[type=\"month\"],\n  input[type=\"time\"],\n  input[type=\"week\"],\n  input[type=\"number\"],\n  input[type=\"email\"],\n  input[type=\"url\"],\n  input[type=\"search\"],\n  input[type=\"tel\"],\n  input[type=\"color\"] {\n    font-size: 16px !important;\n  }\n}\n@keyframes App-logo-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n";
+var css_248z = ".ant-divider-horizontal {\n  margin: 0;\n}\n.ant-divider-horizontal {\n  margin: 0;\n}\n.ant-tag {\n  border: none;\n  border-radius: 14px;\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n  font-weight: 500;\n  white-space: nowrap;\n  margin: 0;\n}\n.ant-tag-blue {\n  color: #3b82f6 !important;\n  background: #bfdbfe !important;\n}\n.ant-tag-green {\n  color: #059669 !important;\n  background: #a7f3d0 !important;\n}\n.ant-tag-red {\n  color: #ef4444 !important;\n  background: #fecaca !important;\n}\n.ant-tag-orange {\n  color: #f97316 !important;\n  background: #fed7aa !important;\n}\n.ant-tag-yellow {\n  color: #f59e0b !important;\n  background: #fde68a !important;\n}\n.ant-tag-purple {\n  color: #8b5cf6 !important;\n  background: #ddd6fe !important;\n}\n.ant-tag-black {\n  color: white !important;\n  background: black !important;\n}\n.ant-popover {\n  z-index: 1050;\n}\n.ant-popover-inner-content {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  max-width: 300px;\n}\n.ant-popover-message-title {\n  padding: 0;\n  text-align: center;\n  font-size: 1rem;\n}\n.ant-popover-buttons {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.ant-btn-link:disabled {\n  color: #717d94 !important;\n}\n.ant-btn-link:disabled:hover {\n  background-color: transparent !important;\n}\n.ant-notification {\n  width: min-content;\n}\n.ant-notification-topRight {\n  right: 0 !important;\n  left: 0 !important;\n  margin-left: auto !important;\n  margin-right: auto !important;\n}\n.ant-notification-notice-wrapper {\n  width: 350px !important;\n  overflow: hidden !important;\n}\n.ant-notification-notice {\n  padding: 16px !important;\n  width: 350px !important;\n  display: flex !important;\n  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.08), 0px 1px 18px rgba(0, 0, 0, 0.08), 0px 3px 5px rgba(0, 0, 0, 0.16) !important;\n}\n.ant-notification-notice-description {\n  padding: 0 14px 0 0 !important;\n  color: #232323 !important;\n  font-size: 14px !important;\n  word-break: break-all !important;\n  overflow-wrap: break-word !important;\n}\n.ant-notification-notice-success {\n  background-color: #edfffa !important;\n}\n.ant-notification-notice-error {\n  background-color: #fff8f4 !important;\n}\n.ant-notification-notice-error .ant-notification-notice-message {\n  color: #ff6e1c !important;\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !important;\n  font-weight: 500;\n}\n.ant-notification-notice-error .ant-notification-notice-icon {\n  color: #ff6e1c;\n}\n.ant-notification-notice-success .ant-notification-notice-message {\n  color: #00b76a !important;\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !important;\n  font-weight: 500;\n}\n.ant-notification-notice-success .ant-notification-notice-icon {\n  color: #00b76a !important;\n}\n.ant-notification-notice-message {\n  margin-bottom: 0 !important;\n}\n.ant-notification-notice-close {\n  top: 16px !important;\n  right: 16px !important;\n}\n.ant-menu-submenu-popup > .ant-menu .ant-menu-item {\n  display: flex !important;\n  align-items: center !important;\n}\n.ant-menu-submenu::after {\n  display: none !important;\n}\n:root {\n  --row-background: #ffffff;\n  --row-background-alternate: rgba(100, 116, 139, 0.04);\n  --row-background-dark: #121212;\n  --row-background-alternate-dark: #1e1e1e;\n}\n.plan-step-line {\n  height: 1px;\n  min-width: 128px;\n  background: #717d94;\n}\n.plan-step-number {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 9999px;\n  border: 1px solid #717d94;\n  background: white;\n  width: 24px;\n  height: 24px;\n  color: #717d94;\n}\n.plan-step-number.active {\n  border: none;\n  color: white;\n  background: #ff6e1c;\n}\n.hidden {\n  display: none;\n}\n.cardElement {\n  padding: 8px 11px;\n  border: 1px solid #e5e7eb;\n  background-color: white;\n  font-family: Inter !important;\n}\n.tooltip {\n  visibility: hidden;\n  position: absolute !important;\n}\n.has-tooltip:hover .tooltip {\n  visibility: visible;\n  z-index: 100;\n}\n.show-on-hover {\n  opacity: 0;\n}\n.show-on-hover-container:hover .show-on-hover {\n  opacity: 1;\n}\n.pdf-only {\n  display: none !important;\n}\n.notes p {\n  margin: 0;\n  padding: 0;\n  padding-bottom: 0.25rem;\n}\n#form-element #finix-form-container .field-holder label {\n  color: #717d94 !important;\n  font-size: 12px !important;\n}\n#form-element #finix-form-container > *:first-child,\n#form-element #finix-form-container > *:last-child {\n  margin-top: 0 !important;\n}\n#form-element #finix-form-container > *:not(:first-child):not(:last-child) {\n  margin-top: 12px !important;\n}\n#form-element #finix-form-container .field-array > * {\n  margin-top: 0 !important;\n}\n#form-element #finix-form-container .field-holder .field,\n#form-element #finix-form-container iframe {\n  height: 34px !important;\n}\n#form-element #finix-form-container .field {\n  margin-top: 0 !important;\n  padding-top: 2px !important;\n}\n#form-element #finix-form-container .field-holder .validation {\n  font-size: 11px !important;\n  color: #ff4d4f !important;\n}\n.icon-path {\n  transition: fill 0.3s;\n}\n.shadow-padding-x {\n  padding-right: 1rem;\n  padding-left: 1rem;\n}\n.shadow-padding-xb {\n  padding-right: 1rem;\n  padding-left: 1rem;\n  padding-bottom: 0.5rem;\n}\n.content-container {\n  width: 100%;\n  margin: 0 auto;\n}\n@media (min-width: 1220px) {\n  .content-container {\n    width: 1220px !important;\n    margin: 0 auto;\n  }\n}\n@media (min-width: 768px) {\n  .shadow-padding-x {\n    padding-right: 2rem;\n    padding-left: 2rem;\n  }\n  .shadow-padding-xb {\n    padding-right: 2rem;\n    padding-left: 2rem;\n    padding-bottom: 0.5rem;\n  }\n  .sm\\:flex {\n    display: flex !important;\n  }\n  .sm\\:hidden {\n    display: none !important;\n  }\n}\n.rotate-45,\n.transform {\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n}\n.shadow,\n.shadow-lg,\n.shadow-md,\n.shadow-none,\n.shadow-sm,\n.shadow-xl {\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n}\n.container {\n  width: 100%;\n}\n@media (min-width: 768px) {\n  .container {\n    max-width: 768px;\n  }\n}\n@media (min-width: 1024px) {\n  .container {\n    max-width: 1024px;\n  }\n}\n@media (min-width: 1280px) {\n  .container {\n    max-width: 1280px;\n  }\n}\n@media (min-width: 1536px) {\n  .container {\n    max-width: 1536px;\n  }\n}\n.visible {\n  visibility: visible;\n}\n.fixed {\n  position: fixed;\n}\n.absolute {\n  position: absolute;\n}\n.relative {\n  position: relative;\n}\n.bottom-0 {\n  bottom: 0px;\n}\n.left-0 {\n  left: 0px;\n}\n.right-0 {\n  right: 0px;\n}\n.top-0 {\n  top: 0px;\n}\n.z-50 {\n  z-index: 50;\n}\n.col-span-2 {\n  grid-column: span 2 / span 2;\n}\n.col-span-3 {\n  grid-column: span 3 / span 3;\n}\n.m-0 {\n  margin: 0px;\n}\n.mx-4 {\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n.my-12 {\n  margin-top: 3rem;\n  margin-bottom: 3rem;\n}\n.my-2 {\n  margin-top: 0.5rem;\n  margin-bottom: 0.5rem;\n}\n.my-4 {\n  margin-top: 1rem;\n  margin-bottom: 1rem;\n}\n.mb-4 {\n  margin-bottom: 1rem;\n}\n.ml-2 {\n  margin-left: 0.5rem;\n}\n.mr-8 {\n  margin-right: 2rem;\n}\n.mt-1 {\n  margin-top: 0.25rem;\n}\n.mt-2 {\n  margin-top: 0.5rem;\n}\n.mt-4 {\n  margin-top: 1rem;\n}\n.mt-6 {\n  margin-top: 1.5rem;\n}\n.mt-8 {\n  margin-top: 2rem;\n}\n.block {\n  display: block;\n}\n.flex {\n  display: flex;\n}\n.table {\n  display: table;\n}\n.grid {\n  display: grid;\n}\n.contents {\n  display: contents;\n}\n.hidden {\n  display: none;\n}\n.h-4 {\n  height: 1rem;\n}\n.h-full {\n  height: 100%;\n}\n.w-1\\/2 {\n  width: 50%;\n}\n.w-1\\/3 {\n  width: 33.333333%;\n}\n.w-2\\/3 {\n  width: 66.666667%;\n}\n.w-4 {\n  width: 1rem;\n}\n.w-full {\n  width: 100%;\n}\n.max-w-32 {\n  max-width: 8rem;\n}\n.flex-1 {\n  flex: 1 1 0%;\n}\n.shrink {\n  flex-shrink: 1;\n}\n.shrink-0 {\n  flex-shrink: 0;\n}\n.grow {\n  flex-grow: 1;\n}\n.border-collapse {\n  border-collapse: collapse;\n}\n.rotate-45 {\n  --tw-rotate: 45deg;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.transform {\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.cursor-pointer {\n  cursor: pointer;\n}\n.grid-cols-2 {\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.grid-cols-3 {\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.flex-row {\n  flex-direction: row;\n}\n.flex-col {\n  flex-direction: column;\n}\n.items-end {\n  align-items: flex-end;\n}\n.items-center {\n  align-items: center;\n}\n.justify-start {\n  justify-content: flex-start;\n}\n.justify-end {\n  justify-content: flex-end;\n}\n.justify-center {\n  justify-content: center;\n}\n.justify-between {\n  justify-content: space-between;\n}\n.gap-0 {\n  gap: 0px;\n}\n.gap-1 {\n  gap: 0.25rem;\n}\n.gap-2 {\n  gap: 0.5rem;\n}\n.gap-4 {\n  gap: 1rem;\n}\n.gap-6 {\n  gap: 1.5rem;\n}\n.space-y-2 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.space-y-4 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n.space-y-8 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(2rem * var(--tw-space-y-reverse));\n}\n.overflow-auto {\n  overflow: auto;\n}\n.overflow-hidden {\n  overflow: hidden;\n}\n.overflow-visible {\n  overflow: visible;\n}\n.whitespace-nowrap {\n  white-space: nowrap;\n}\n.text-nowrap {\n  text-wrap: nowrap;\n}\n.rounded {\n  border-radius: 0.25rem;\n}\n.rounded-full {\n  border-radius: 9999px;\n}\n.rounded-md {\n  border-radius: 0.375rem;\n}\n.rounded-sm {\n  border-radius: 0.125rem;\n}\n.border {\n  border-width: 1px;\n}\n.border-solid {\n  border-style: solid;\n}\n.border-none {\n  border-style: none;\n}\n.border-gray-400 {\n  --tw-border-opacity: 1;\n  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));\n}\n.border-gray-500 {\n  --tw-border-opacity: 1;\n  border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));\n}\n.border-slate-200 {\n  --tw-border-opacity: 1;\n  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));\n}\n.border-slate-300 {\n  --tw-border-opacity: 1;\n  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));\n}\n.border-slate-700 {\n  --tw-border-opacity: 1;\n  border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));\n}\n.bg-black {\n  --tw-bg-opacity: 1;\n  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));\n}\n.bg-emerald-200 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(167 243 208 / var(--tw-bg-opacity, 1));\n}\n.bg-green-200 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1));\n}\n.bg-orange-200 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(254 215 170 / var(--tw-bg-opacity, 1));\n}\n.bg-red-200 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));\n}\n.bg-red-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));\n}\n.bg-slate-50 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));\n}\n.bg-transparent {\n  background-color: transparent;\n}\n.bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bg-yellow-200 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(254 240 138 / var(--tw-bg-opacity, 1));\n}\n.p-0 {\n  padding: 0px;\n}\n.p-1 {\n  padding: 0.25rem;\n}\n.p-2 {\n  padding: 0.5rem;\n}\n.p-4 {\n  padding: 1rem;\n}\n.p-8 {\n  padding: 2rem;\n}\n.px-2 {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.px-3 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n.px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n.px-6 {\n  padding-left: 1.5rem;\n  padding-right: 1.5rem;\n}\n.py-1 {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n.py-2 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n.py-4 {\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n}\n.py-6 {\n  padding-top: 1.5rem;\n  padding-bottom: 1.5rem;\n}\n.pb-2 {\n  padding-bottom: 0.5rem;\n}\n.pb-4 {\n  padding-bottom: 1rem;\n}\n.pb-6 {\n  padding-bottom: 1.5rem;\n}\n.pb-8 {\n  padding-bottom: 2rem;\n}\n.pl-0 {\n  padding-left: 0px;\n}\n.pl-2 {\n  padding-left: 0.5rem;\n}\n.pl-4 {\n  padding-left: 1rem;\n}\n.pt-1 {\n  padding-top: 0.25rem;\n}\n.pt-12 {\n  padding-top: 3rem;\n}\n.pt-2 {\n  padding-top: 0.5rem;\n}\n.pt-4 {\n  padding-top: 1rem;\n}\n.pt-6 {\n  padding-top: 1.5rem;\n}\n.pt-8 {\n  padding-top: 2rem;\n}\n.pb-1 {\n  padding-bottom: 0.25rem;\n}\n.text-left {\n  text-align: left;\n}\n.text-center {\n  text-align: center;\n}\n.text-right {\n  text-align: right;\n}\n.align-middle {\n  vertical-align: middle;\n}\n.text-2xl {\n  font-size: 1.5rem;\n  line-height: 2rem;\n}\n.text-base {\n  font-size: 1rem;\n  line-height: 1.5rem;\n}\n.text-lg {\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n}\n.text-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.text-xl {\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n}\n.text-xs {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n.font-bold {\n  font-weight: 700;\n}\n.font-medium {\n  font-weight: 500;\n}\n.font-normal {\n  font-weight: 400;\n}\n.capitalize {\n  text-transform: capitalize;\n}\n.text-emerald-600 {\n  --tw-text-opacity: 1;\n  color: rgb(5 150 105 / var(--tw-text-opacity, 1));\n}\n.text-emerald-700 {\n  --tw-text-opacity: 1;\n  color: rgb(4 120 87 / var(--tw-text-opacity, 1));\n}\n.text-gray-600 {\n  --tw-text-opacity: 1;\n  color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.text-gray-900 {\n  --tw-text-opacity: 1;\n  color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.text-green-600 {\n  --tw-text-opacity: 1;\n  color: rgb(22 163 74 / var(--tw-text-opacity, 1));\n}\n.text-orange-500 {\n  --tw-text-opacity: 1;\n  color: rgb(249 115 22 / var(--tw-text-opacity, 1));\n}\n.text-red-500 {\n  --tw-text-opacity: 1;\n  color: rgb(239 68 68 / var(--tw-text-opacity, 1));\n}\n.text-slate-400 {\n  --tw-text-opacity: 1;\n  color: rgb(148 163 184 / var(--tw-text-opacity, 1));\n}\n.text-slate-500 {\n  --tw-text-opacity: 1;\n  color: rgb(100 116 139 / var(--tw-text-opacity, 1));\n}\n.text-white {\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.text-yellow-500 {\n  --tw-text-opacity: 1;\n  color: rgb(234 179 8 / var(--tw-text-opacity, 1));\n}\n.underline {\n  text-decoration-line: underline;\n}\n.shadow {\n  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-lg {\n  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);\n  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-md {\n  --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-none {\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-sm {\n  --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-xl {\n  --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.transition {\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.transition-all {\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.duration-200 {\n  transition-duration: 200ms;\n}\n.font-light {\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n}\n.font-medium {\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n}\n.font-bold {\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n}\n.hover\\:bg-gray-100:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));\n}\n@media (min-width: 768px) {\n  .sm\\:flex {\n    display: flex;\n  }\n  .sm\\:hidden {\n    display: none;\n  }\n}\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box !important;\n  line-height: 1.15;\n}\nbody {\n  color: #232323;\n  background-color: #f8fafc;\n}\nth {\n  font-weight: normal;\n}\ncode {\n  font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\", monospace;\n}\n@media only screen and (max-width: 768px) {\n  select,\n  textarea,\n  input[type=\"text\"],\n  input[type=\"password\"],\n  input[type=\"datetime\"],\n  input[type=\"datetime-local\"],\n  input[type=\"date\"],\n  input[type=\"month\"],\n  input[type=\"time\"],\n  input[type=\"week\"],\n  input[type=\"number\"],\n  input[type=\"email\"],\n  input[type=\"url\"],\n  input[type=\"search\"],\n  input[type=\"tel\"],\n  input[type=\"color\"] {\n    font-size: 16px !important;\n  }\n}\n@keyframes App-logo-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n";
 styleInject(css_248z);
 
 /******************************************************************************
@@ -109,6 +109,16 @@ function __generator(thisArg, body) {
   }
 }
 
+function __spreadArray(to, from, pack) {
+  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+      if (ar || !(i in from)) {
+          if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+          ar[i] = from[i];
+      }
+  }
+  return to.concat(ar || Array.prototype.slice.call(from));
+}
+
 function __makeTemplateObject(cooked, raw) {
   if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
   return cooked;
@@ -149,11 +159,13 @@ var getBranding = function (_a) {
     });
 };
 
-var createGraphQLClient = function (token, apiHost) {
+var createGraphQLClient = function (apiHost, token) {
     return new GraphQLClient(apiHost + "/graphql", {
-        headers: {
-            Authorization: token,
-        },
+        headers: token
+            ? {
+                Authorization: token,
+            }
+            : undefined,
     });
 };
 
@@ -162,7 +174,7 @@ var extraQueryClient = new QueryClient();
 // Every component shares similar props and functionality, which this wrapper handles.
 function BunnyProvider(_a) {
     var children = _a.children, _b = _a.darkMode, darkMode = _b === void 0 ? false : _b, queryClient = _a.queryClient, apiHost = _a.apiHost, token = _a.token, onTokenExpired = _a.onTokenExpired, configProviderProps = _a.configProviderProps;
-    var graphQLClient = createGraphQLClient(token, apiHost || "");
+    var graphQLClient = createGraphQLClient(apiHost || "", token);
     useEffect(function () {
         var script = document.createElement("script");
         script.src = "https://js.finix.com/v/1/0/6/finix.js";
@@ -229,8 +241,12 @@ function ContextualWrapper(_a) {
                             boxShadowSecondary: "none",
                             fontWeight: "normal",
                             contentFontSizeLG: 14,
-                            colorBgContainerDisabled: "#eef0f2",
-                            borderColorDisabled: "#eef0f2",
+                            colorBgContainerDisabled: darkMode
+                                ? "var(--row-background-dark)"
+                                : "#eef0f2",
+                            borderColorDisabled: darkMode
+                                ? "var(--row-background-dark)"
+                                : "#eef0f2",
                         },
                         Drawer: {
                             colorBgElevated: darkMode
@@ -403,14 +419,14 @@ function InvoicePDF(_a) {
 }
 
 var paymentMethodsQuery = "query paymentMethods ($filter: String, $first: Int, $sort: String) {\n  paymentMethods (filter: $filter, first: $first, sort: $sort) {\n    nodes {\n      id\n      disabled\n      pluginId\n      accountId\n      expirationDate\n      plugin {\n        guid\n        id\n      }\n      state\n      metadata {\n        issuer\n        identifier\n        kind\n        description\n        icon\n      }\n    }\n  }\n}";
-var usePaymentMethod = function (graphQLClient, entityId, token) {
-    var result = useQuery({
-        queryKey: QueryKeyFactory.default.accountPaymentMethodKey(entityId, token),
+var usePaymentMethod = function (graphQLClient, entityId, token, accountId) {
+    var _a = useQuery({
+        queryKey: QueryKeyFactory.default.accountPaymentMethodKey(entityId, token, accountId),
         queryFn: function () {
             return graphQLClient
                 .request(paymentMethodsQuery, {
                 first: 1,
-                filter: "disabled is false",
+                filter: "disabled is false".concat(accountId ? " && accountId=".concat(accountId) : ""),
             })
                 .then(function (data) {
                 var _a, _b;
@@ -419,8 +435,8 @@ var usePaymentMethod = function (graphQLClient, entityId, token) {
                 return paymentMethod;
             });
         },
-    });
-    return result;
+    }), data = _a.data, isLoading = _a.isLoading;
+    return { data: data, isLoading: isLoading };
 };
 
 var usePlugins = function (_a) {
@@ -518,7 +534,7 @@ function usePay$1(_a) {
             switch (_a.label) {
                 case 0:
                     amountDue = quote ? getQuoteAmountDue(quote) : invoice === null || invoice === void 0 ? void 0 : invoice.amountDue;
-                    currencyId = (quote === null || quote === void 0 ? void 0 : quote.currencyId) || (invoice === null || invoice === void 0 ? void 0 : invoice.currency);
+                    currencyId = (quote === null || quote === void 0 ? void 0 : quote.currencyId) || (invoice === null || invoice === void 0 ? void 0 : invoice.currencyId);
                     if (!amountDue || !currencyId) {
                         throw new Error("No amount or currencyId");
                     }
@@ -1022,7 +1038,7 @@ var createPaymentMethod = function (_a) {
         });
     });
 };
-var createSetupIntent = function (plugin, token, apiHost, accountId) {
+var createSetupIntent = function (plugin, apiHost, token, accountId) {
     return invokePlugin({
         plugin: plugin,
         method: "create_setup_intent",
@@ -1033,7 +1049,7 @@ var createSetupIntent = function (plugin, token, apiHost, accountId) {
         },
     });
 };
-var fetchStripeKey = function (plugin, token, apiHost, accountId) { return __awaiter(void 0, void 0, void 0, function () {
+var fetchStripeKey = function (plugin, apiHost, token, accountId) { return __awaiter(void 0, void 0, void 0, function () {
     var response;
     return __generator(this, function (_a) {
         switch (_a.label) {
@@ -1053,7 +1069,7 @@ var fetchStripeKey = function (plugin, token, apiHost, accountId) { return __awa
     });
 }); };
 loadStripe.setLoadParameters({ advancedFraudSignals: false });
-var useStripePlugin = function (plugin, token, apiHost, currencyId, accountId) {
+var useStripePlugin = function (plugin, apiHost, currencyId, token, accountId) {
     var _a = useState(null), stripe = _a[0], setStripe = _a[1];
     var showErrorNotification = useErrorNotification();
     var options = {
@@ -1067,7 +1083,7 @@ var useStripePlugin = function (plugin, token, apiHost, currencyId, accountId) {
             return;
         if (((_b = (_a = plugin.components) === null || _a === void 0 ? void 0 : _a.frontend) === null || _b === void 0 ? void 0 : _b[0].name) !== "StripePayment")
             return;
-        fetchStripeKey(plugin, token, apiHost || "", accountId)
+        fetchStripeKey(plugin, apiHost || "", token, accountId)
             .then(function (_a) {
             var payload = _a.payload;
             return loadStripe(payload.publishable_key).then(setStripe);
@@ -1110,7 +1126,7 @@ function useSave(_a) {
                         submitError = (_d.sent()).error;
                         if (submitError)
                             throw new Error(submitError.message);
-                        return [4 /*yield*/, createSetupIntent(plugin, token, apiHost, accountId)];
+                        return [4 /*yield*/, createSetupIntent(plugin, apiHost, token, accountId)];
                     case 2:
                         response = _d.sent();
                         if (response.status !== "success")
@@ -1205,8 +1221,8 @@ var StripeForm = function (_a) {
 };
 
 var PaymentMethodDetails = function (_a) {
-    var _b, _c;
-    var onFail = _a.onFail, paymentMethod = _a.paymentMethod, onSavePaymentMethod = _a.onSavePaymentMethod;
+    var _b, _c, _d, _e, _f, _g, _h, _j;
+    var onFail = _a.onFail, paymentMethod = _a.paymentMethod, onSavePaymentMethod = _a.onSavePaymentMethod, customPaymentForms = _a.customPaymentForms;
     if (!paymentMethod)
         return null;
     paymentMethod = paymentMethod;
@@ -1216,6 +1232,11 @@ var PaymentMethodDetails = function (_a) {
         case "DemoPayPayment":
             return (jsx(DemoPayForm, { onFail: onFail, onSavePaymentMethod: onSavePaymentMethod, plugin: paymentMethod }));
         default:
+            if (customPaymentForms &&
+                ((_e = (_d = paymentMethod.components) === null || _d === void 0 ? void 0 : _d.frontend) === null || _e === void 0 ? void 0 : _e[0].name) &&
+                customPaymentForms[(_g = (_f = paymentMethod.components) === null || _f === void 0 ? void 0 : _f.frontend) === null || _g === void 0 ? void 0 : _g[0].name]) {
+                return (jsx(Fragment, { children: customPaymentForms[(_j = (_h = paymentMethod.components) === null || _h === void 0 ? void 0 : _h.frontend) === null || _j === void 0 ? void 0 : _j[0].name] }));
+            }
             return jsx("p", { children: "Can not find form for plugin" });
     }
 };
@@ -1227,6 +1248,7 @@ var CardIcon = function () {
 var Text$c = Typography.Text;
 var PaymentMethodSelector = function (_a) {
     var paymentMethodAllowedPlugins = _a.paymentMethodAllowedPlugins, onSelect = _a.onSelect, value = _a.value;
+    console.log("COMPS paymentMethodAllowedPlugins", paymentMethodAllowedPlugins);
     return (jsx("div", __assign({ className: "flex flex-col gap-2" }, { children: paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins.map(function (plugin, index) { return (jsx(PaymentOption, { name: plugin.name, onClick: onSelect, paymentPlugin: plugin, selected: (value === null || value === void 0 ? void 0 : value.id) === plugin.id }, index)); }) })));
 };
 var PaymentOption = function (_a) {
@@ -1249,7 +1271,7 @@ var PaymentOptionContainer = defaultStyled.div(templateObject_1$5 || (templateOb
 });
 var templateObject_1$5;
 
-function useRemovePaymentMethod(paymentPlugins, token, apiHost, entityId, accountId) {
+function useRemovePaymentMethod(paymentPlugins, apiHost, entityId, token, accountId) {
     var _this = this;
     var queryClient = useQueryClient();
     var showErrorNotification = useErrorNotification();
@@ -1273,7 +1295,7 @@ function useRemovePaymentMethod(paymentPlugins, token, apiHost, entityId, accoun
                         })
                             .then(function () {
                             showSuccessNotification("Payment method was removed", "Success");
-                            queryClient.setQueryData(QueryKeyFactory.default.accountPaymentMethodKey(entityId, token), null);
+                            queryClient.setQueryData(QueryKeyFactory.default.accountPaymentMethodKey(entityId, token, accountId), null);
                         })
                             .catch(function (error) {
                             showErrorNotification(error.message, "Error removing payment method");
@@ -1291,7 +1313,7 @@ function useRemovePaymentMethod(paymentPlugins, token, apiHost, entityId, accoun
 var Panel = Collapse.Panel;
 var PaymentForm = function (_a) {
     var _b;
-    var entityId = _a.entityId, invoice = _a.invoice, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, quote = _a.quote, accountId = _a.accountId, onSavePaymentMethod = _a.onSavePaymentMethod, overrideToken = _a.overrideToken, graphQLClient = _a.graphQLClient, customCheckoutFunction = _a.customCheckoutFunction, currencyIdFromProps = _a.currencyId;
+    var entityId = _a.entityId, invoice = _a.invoice, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, quote = _a.quote, accountId = _a.accountId, onSavePaymentMethod = _a.onSavePaymentMethod, overrideToken = _a.overrideToken, graphQLClient = _a.graphQLClient, customCheckoutFunction = _a.customCheckoutFunction, currencyIdFromProps = _a.currencyId, customPaymentForms = _a.customPaymentForms;
     // Local state
     var _c = useState(), selectedPaymentMethod = _c[0], setSelectedPaymentMethod = _c[1];
     var _d = useState(false), showPaymentMethodForm = _d[0], setShowPaymentMethodForm = _d[1];
@@ -1302,10 +1324,12 @@ var PaymentForm = function (_a) {
     // Hooks
     var apiHost = useContext(BunnyContext).apiHost;
     var token = useToken();
-    var storedPaymentMethod = usePaymentMethod(graphQLClient, entityId, overrideToken || token).data;
+    var _e = usePaymentMethod(graphQLClient, entityId, overrideToken || token, accountId), storedPaymentMethod = _e.data, isPaymentMethodLoading = _e.isLoading;
+    console.log("COMPS accountId", accountId);
+    console.log("COMPS storedPaymentMethod", storedPaymentMethod);
     var isPaymentMethodFetched = storedPaymentMethod !== undefined;
-    var _e = usePaymentPlugins({ entityId: entityId, apiHost: apiHost, token: overrideToken || token }), paymentMethodAllowedPlugins = _e.paymentMethodAllowedPlugins, arePluginsFetched = _e.isFetched;
-    var onClickRemove = useRemovePaymentMethod(paymentMethodAllowedPlugins || [], overrideToken || token, apiHost, entityId, accountId);
+    var _f = usePaymentPlugins({ entityId: entityId, apiHost: apiHost, token: overrideToken || token }), paymentMethodAllowedPlugins = _f.paymentPlugins, arePluginsFetched = _f.isFetched;
+    var onClickRemove = useRemovePaymentMethod(paymentMethodAllowedPlugins || [], apiHost, entityId, overrideToken || token, accountId);
     var queryClient = useQueryClient();
     // Set default plugin
     useEffect(function () {
@@ -1340,11 +1364,14 @@ var PaymentForm = function (_a) {
     };
     var handleSavePaymentMethod = function () {
         queryClient.invalidateQueries({
-            queryKey: QueryKeyFactory.default.accountPaymentMethodKey(entityId, token),
+            queryKey: QueryKeyFactory.default.accountPaymentMethodKey(entityId, token, accountId),
         });
         onSavePaymentMethod === null || onSavePaymentMethod === void 0 ? void 0 : onSavePaymentMethod();
         setShowPaymentMethodForm(false);
     };
+    if (isPaymentMethodLoading) {
+        return jsx(Skeleton, { active: true, className: "p-4" });
+    }
     return (jsx(PaymentContext.Provider, __assign({ value: {
             onClickCancel: function () { return setShowPaymentMethodForm(false); },
             accountId: accountId,
@@ -1355,11 +1382,11 @@ var PaymentForm = function (_a) {
                         //if not paying and payment method is saved, show Collapse
                         jsx(Collapse, __assign({ bordered: false, activeKey: showPaymentMethodForm ? "1" : undefined, ghost: true, collapsible: "disabled", destroyInactivePanel: true }, { children: jsx(Panel, __assign({ header: jsx(Fragment, { children: !showPaymentMethodForm ? (jsx("div", __assign({ className: "pt-2" }, { children: jsxs(Button, __assign({ onClick: function () {
                                                 setShowPaymentMethodForm(true);
-                                            }, type: "default", className: "w-full", id: "addPaymentMethod" }, { children: [storedPaymentMethod ? "Update" : "Add", " payment method"] })) }))) : null }), showArrow: false }, { children: jsx("div", { children: selectedPaymentMethod ? (jsxs("div", __assign({ className: "flex flex-col gap-2 mt-2" }, { children: [showPaymentMethodSelector && (jsx(PaymentMethodSelector, { onSelect: setSelectedPaymentMethod, paymentMethodAllowedPlugins: paymentMethodAllowedPlugins, value: selectedPaymentMethod })), jsx("div", __assign({ className: "flex flex-col" }, { children: jsx(PaymentMethodDetails, { onFail: onFail, onSavePaymentMethod: handleSavePaymentMethod, paymentMethod: selectedPaymentMethod }) }))] }))) : (jsx("div", { children: "No payment method selected" })) }) }), "1") })))] }) })) })) })));
+                                            }, type: "default", className: "w-full", id: "addPaymentMethod" }, { children: [storedPaymentMethod ? "Update" : "Add", " payment method"] })) }))) : null }), showArrow: false }, { children: jsx("div", { children: selectedPaymentMethod ? (jsxs("div", __assign({ className: "flex flex-col gap-2 mt-2" }, { children: [showPaymentMethodSelector && (jsx(PaymentMethodSelector, { onSelect: setSelectedPaymentMethod, paymentMethodAllowedPlugins: paymentMethodAllowedPlugins, value: selectedPaymentMethod })), jsx("div", __assign({ className: "flex flex-col" }, { children: jsx(PaymentMethodDetails, { onFail: onFail, onSavePaymentMethod: handleSavePaymentMethod, paymentMethod: selectedPaymentMethod, customPaymentForms: customPaymentForms }) }))] }))) : (jsx("div", { children: "No payment method selected" })) }) }), "1") })))] }) })) })) })));
 };
 function StripeWrapper(_a) {
     var children = _a.children, plugin = _a.plugin, token = _a.token, apiHost = _a.apiHost, currencyId = _a.currencyId, accountId = _a.accountId;
-    var _b = useStripePlugin(plugin, token, apiHost, currencyId || "usd", accountId), stripe = _b.stripe, options = _b.options;
+    var _b = useStripePlugin(plugin, apiHost, currencyId || "usd", token, accountId), stripe = _b.stripe, options = _b.options;
     return (jsx(Elements, __assign({ options: options, stripe: stripe }, { children: children })));
 }
 
@@ -1478,7 +1505,7 @@ var useSendAcceptQuote = function (_a) {
         var variables = {
             quoteId: quoteId,
         };
-        graphQLMutation(token, mutation, variables, function (rsp) {
+        graphQLMutation(mutation, variables, function (rsp) {
             if (rsp.errors)
                 console.log("rsp.errors", rsp.errors);
             else {
@@ -1492,7 +1519,7 @@ var useSendAcceptQuote = function (_a) {
                     window.location.href = rsp.data.quoteSigningUrlCreate.redirectUri;
                 }
             }
-        });
+        }, token);
     };
     var openDropboxSignModal = function (clientId, url) { return __awaiter(void 0, void 0, void 0, function () {
         var HelloSign, client;
@@ -1528,7 +1555,7 @@ var useSendAcceptQuote = function (_a) {
     var sendAccept = function (changedFormItems) {
         var mutation = "mutation quoteAccept($name: String!, $title: String!, $poNumber: String, $taxNumber: String, $quoteId: ID) {\n        quoteAccept(name: $name, title: $title, poNumber: $poNumber, taxNumber: $taxNumber, quoteId: $quoteId) {\n          errors\n        }\n      }";
         var variables = __assign(__assign({}, changedFormItems), { quoteId: quoteId });
-        graphQLMutation(token, mutation, variables, function (rsp) {
+        graphQLMutation(mutation, variables, function (rsp) {
             if (rsp.errors)
                 handleAllErrorFormats(rsp.errors);
             else {
@@ -1540,7 +1567,7 @@ var useSendAcceptQuote = function (_a) {
                     queryKey: QueryKeyFactory.default.createQuoteKey(token),
                 });
             }
-        });
+        }, token);
     };
     var startAcceptance = function () {
         setIsAccepting(true);
@@ -1603,7 +1630,7 @@ var PandadocPollingModal = function (_a) {
             var variables = {
                 id: id,
             };
-            graphQLMutation(token, mutation, variables, function (rsp) {
+            graphQLMutation(mutation, variables, function (rsp) {
                 if (rsp.errors)
                     handleAllErrorFormats(rsp.errors);
                 else if (rsp.data.quotePollSigningUrl.status === "document.sent") {
@@ -1611,7 +1638,7 @@ var PandadocPollingModal = function (_a) {
                     window.location.href = rsp.data.quotePollSigningUrl.redirectUri;
                 }
                 setInfoMessage(rsp.data.quotePollSigningUrl.infoMessage || "");
-            });
+            }, token);
             setNumberOfPolls(numberOfPolls + 1);
         };
         var interval = setInterval(pollPandadocMutation, 1000);
@@ -1769,8 +1796,8 @@ var getQuotes = function (_a) {
     });
 };
 
-var transactionMutation = function (filter) { return "\nquery transactions {\n  transactions ".concat(filter ? "(".concat(filter, ")") : "", " {\n    nodes {\n      amount\n      createdAt\n      currencyId\n      description\n      id\n      kind\n      state\n      transactionableId\n      transactionable {\n        ...on Payment { amount }\n        ...on Invoice { amount number dueAt issuedAt isLegacy }\n        ...on CreditNote { amount number issuedAt }\n      }\n    }\n  }\n}"); };
-var getTransactions = function (filter, token, apiHost) { return __awaiter(void 0, void 0, void 0, function () {
+var transactionMutation = function (filter) { return "\nquery transactions {\n  transactions ".concat(filter ? "(".concat(filter, ")") : "", " {\n    nodes {\n      amount\n      createdAt\n      currencyId\n      description\n      id\n      kind\n      state\n      transactionableId\n      transactionable {\n        ...on Payment { amount }\n        ...on Invoice { amount number dueAt issuedAt isLegacy }\n        ...on CreditNote { amount number issuedAt }\n      }\n      account {\n        name\n        id\n      }\n    }\n  }\n}"); };
+var getTransactions = function (filter, apiHost, token) { return __awaiter(void 0, void 0, void 0, function () {
     var response, _a, data, errors;
     return __generator(this, function (_b) {
         switch (_b.label) {
@@ -19127,14 +19154,17 @@ var TransactionsListDesktop = function (_a) {
     var _b = useContext(TransactionsListContext), columns = _b.columns, transactionDateType = _b.transactionDateType;
     var _c = useContext(BunnyContext), apiHost = _c.apiHost, darkMode = _c.darkMode;
     var token = useToken();
-    var showAmount = columns.includes("amount");
-    var showDateAndTitle = columns.includes("date-and-title");
+    // Columns to show
+    var showDate = columns.includes("date");
+    var showTitle = columns.includes("title");
+    var showAccountName = columns.includes("accountName");
     var showDownload = columns.includes("download");
+    var showAmount = columns.includes("amount");
     var showState = columns.includes("state");
     if ((transactions === null || transactions === void 0 ? void 0 : transactions.length) === 0)
         return jsx(TransactionsEmptyState, {});
     return (jsx(Fragment, { children: transactions === null || transactions === void 0 ? void 0 : transactions.map(function (transaction, index) {
-            var _a;
+            var _a, _b;
             var isClickable = onTransactionClick !== undefined;
             return (jsxs("div", __assign({ className: "contents ".concat(isClickable && "cursor-pointer", " show-on-hover-container"), onClick: function () {
                     onTransactionClick === null || onTransactionClick === void 0 ? void 0 : onTransactionClick(transaction);
@@ -19142,10 +19172,12 @@ var TransactionsListDesktop = function (_a) {
                     backgroundColor: index % 2 === 0
                         ? "var(--row-background".concat(darkMode ? "-dark" : "", ")")
                         : "var(--row-background-alternate".concat(darkMode ? "-dark" : "", ")"),
-                } }, { children: [!showDateAndTitle &&
+                } }, { children: [!showDate &&
+                        !showTitle &&
                         !showState &&
                         !showAmount &&
-                        !showDownload && (jsx(TransactionGridCell, { children: jsx(Text$8, { children: "No columns selected" }) })), showDateAndTitle && (jsxs(Fragment, { children: [jsx(TransactionGridCell, __assign({ right: false }, { children: jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) }) })), jsxs(TransactionGridCell, __assign({ right: false, className: "flex items-center gap-2" }, { children: [jsx(Text$8, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsx(TransactionRowTitle, { transaction: transaction })] }))] })), showDownload && (jsx(TransactionGridCell, { children: jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })), showState ? (jsx(TransactionGridCell, __assign({ right: true }, { children: jsx(StateTag, { state: transaction.state }) }))) : null, showAmount && (jsx(TransactionGridCell, __assign({ right: true }, { children: jsx(Text$8, { children: formatCurrency(((_a = transaction === null || transaction === void 0 ? void 0 : transaction.transactionable) === null || _a === void 0 ? void 0 : _a.amount) || transaction.amount, transaction.currencyId) }) })))] }), index));
+                        !showDownload &&
+                        !showAccountName && (jsx(TransactionGridCell, { children: jsx(Text$8, { children: "No columns selected" }) })), showDate && (jsx(TransactionGridCell, __assign({ right: false }, { children: jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) }) }))), showTitle && (jsx(Fragment, { children: jsxs(TransactionGridCell, __assign({ right: false, className: "flex items-center gap-2" }, { children: [jsx(Text$8, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsx(TransactionRowTitle, { transaction: transaction })] })) })), showAccountName && (jsx(TransactionGridCell, __assign({ right: false }, { children: jsx(Text$8, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }) }))), !showDate && !showTitle && !showAccountName && (jsx(TransactionGridCell, { right: false })), showDownload && (jsx(TransactionGridCell, { children: jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })), showState ? (jsx(TransactionGridCell, __assign({ right: true }, { children: jsx(StateTag, { state: transaction.state }) }))) : null, showAmount && (jsx(TransactionGridCell, __assign({ right: true }, { children: jsx(Text$8, { children: formatCurrency(((_b = transaction === null || transaction === void 0 ? void 0 : transaction.transactionable) === null || _b === void 0 ? void 0 : _b.amount) || transaction.amount, transaction.currencyId) }) })))] }), index));
         }) }));
 };
 
@@ -19156,12 +19188,15 @@ var TransactionsListMobile = function (_a) {
     var _c = useContext(BunnyContext), apiHost = _c.apiHost, darkMode = _c.darkMode;
     var token = useToken();
     var showAmount = columns.includes("amount");
-    var showDateAndTitle = columns.includes("date-and-title");
+    var showDate = columns.includes("date");
+    var showTitle = columns.includes("title");
+    var showAccountName = columns.includes("accountName");
     var showDownload = columns.includes("download");
     var showState = columns.includes("state");
     if ((transactions === null || transactions === void 0 ? void 0 : transactions.length) === 0)
         return jsx(TransactionsEmptyState, {});
     return (jsx(Fragment, { children: transactions === null || transactions === void 0 ? void 0 : transactions.map(function (transaction, index) {
+            var _a;
             var isClickable = transaction.kind === "INVOICE";
             return (jsxs("div", __assign({ className: "contents ".concat(isClickable && "cursor-pointer", " show-on-hover-container"), onClick: function () {
                     onTransactionClick(transaction);
@@ -19169,7 +19204,7 @@ var TransactionsListMobile = function (_a) {
                     backgroundColor: index % 2 === 0
                         ? "var(--row-background".concat(darkMode ? "-dark" : "", ")")
                         : "var(--row-background-alternate".concat(darkMode ? "-dark" : "", ")"),
-                } }, { children: [jsx(TransactionGridCell, { children: jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [showDateAndTitle && (jsxs(Fragment, { children: [jsx(Text$7, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsx(TransactionRowTitle, { transaction: transaction })] })), showState && jsx(StateTag, { state: transaction.state })] })), jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [showDateAndTitle && (jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) })), showAmount && showDateAndTitle && jsx(Text$7, { children: "\u00B7" }), showAmount && (jsx(Text$7, { children: formatCurrency(transaction.transactionable.amount ||
+                } }, { children: [jsx(TransactionGridCell, { children: jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [(showTitle || showState) && (jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [showTitle && (jsxs(Fragment, { children: [jsx(Text$7, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsx(TransactionRowTitle, { transaction: transaction })] })), showState && jsx(StateTag, { state: transaction.state })] }))), jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [showAccountName && jsx(Text$7, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }), showAccountName && showDate && jsx(Text$7, { children: "\u00B7" }), showDate && (jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) })), showDate && showAmount && jsx(Text$7, { children: "\u00B7" }), showAmount && (jsx(Text$7, { children: formatCurrency(transaction.transactionable.amount ||
                                                 transaction.amount, transaction.currencyId) }))] }))] })) }), showDownload && (jsx(TransactionGridCell, __assign({ right: true }, { children: jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })))] }), index));
         }) }));
 };
@@ -19177,7 +19212,7 @@ var TransactionsListMobile = function (_a) {
 var Text$6 = Typography.Text;
 var DISPLAY_WIDTH = 1200;
 function Transactions(_a) {
-    var transactionComponent = _a.transactionComponent, _b = _a.showSearchBar, showSearchBar = _b === void 0 ? true : _b, _c = _a.showTitle, showTitle = _c === void 0 ? true : _c, _d = _a.title, title = _d === void 0 ? "Past transactions" : _d, _e = _a.columns, columns = _e === void 0 ? ["date-and-title", "state", "amount", "download"] : _e, className = _a.className, _f = _a.shadow, shadow = _f === void 0 ? "shadow-md" : _f, searchBarClassName = _a.searchBarClassName, _g = _a.useModal, useModal = _g === void 0 ? false : _g, onTransactionClick = _a.onTransactionClick, _h = _a.suppressTransactionDisplay, suppressTransactionDisplay = _h === void 0 ? false : _h, _j = _a.kindsToShow, kindsToShow = _j === void 0 ? [
+    var transactionComponent = _a.transactionComponent, _b = _a.showSearchBar, showSearchBar = _b === void 0 ? true : _b, _c = _a.showTitle, showTitle = _c === void 0 ? true : _c, _d = _a.title, title = _d === void 0 ? "Past transactions" : _d, _e = _a.columns, columns = _e === void 0 ? ["date", "title", "state", "amount", "download"] : _e, className = _a.className, _f = _a.shadow, shadow = _f === void 0 ? "shadow-md" : _f, searchBarClassName = _a.searchBarClassName, _g = _a.useModal, useModal = _g === void 0 ? false : _g, onTransactionClick = _a.onTransactionClick, _h = _a.suppressTransactionDisplay, suppressTransactionDisplay = _h === void 0 ? false : _h, _j = _a.kindsToShow, kindsToShow = _j === void 0 ? [
         TransactionKind.INVOICE,
         TransactionKind.PAYMENT,
         TransactionKind.REFUND,
@@ -19215,7 +19250,7 @@ function Transactions(_a) {
     // Queries
     var data = useQuery({
         queryKey: ["transactions", token, filterValue],
-        queryFn: function () { return getTransactions(filterValue, token, apiHost); },
+        queryFn: function () { return getTransactions(filterValue, apiHost, token); },
         placeholderData: keepPreviousData,
     }).data;
     return (jsx(TransactionsListContext.Provider, __assign({ value: contextValues }, { children: jsx(TransactionsDisplay, { transactions: data || [], onSearchValueChanged: setSearch, search: search }) })));
@@ -19249,7 +19284,8 @@ function TransactionsDisplay(_a) {
     var gridTemplateColumns = function () {
         var templateColumns = [];
         if (isMobile) {
-            if (columns.includes("date-and-title") ||
+            if (columns.includes("date") ||
+                columns.includes("title") ||
                 columns.includes("state") ||
                 columns.includes("amount")) {
                 templateColumns.push("auto");
@@ -19259,18 +19295,21 @@ function TransactionsDisplay(_a) {
             }
         }
         else {
-            if (columns.includes("date-and-title")) {
-                templateColumns.push("auto 3fr");
+            var leftColumns = ["accountName", "date", "title"].filter(function (column) {
+                return columns.includes(column);
+            }).length;
+            // The rightmost column (for left columns) should be 3fr, the rest should be auto
+            if (leftColumns === 0 || leftColumns === 1) {
+                templateColumns.push("3fr");
             }
-            if (columns.includes("download")) {
-                templateColumns.push("auto");
-            }
-            if (columns.includes("state")) {
-                templateColumns.push("auto");
-            }
-            if (columns.includes("amount")) {
-                templateColumns.push("auto");
+            else {
+                templateColumns.push.apply(templateColumns, __spreadArray(__spreadArray([], Array(leftColumns - 1).fill("auto"), false), ["3fr"], false));
             }
+            // Right columns are only auto
+            var rightColumns = ["download", "state", "amount"].filter(function (column) {
+                return columns.includes(column);
+            }).length;
+            templateColumns.push.apply(templateColumns, Array(rightColumns).fill("auto"));
         }
         return templateColumns.join(" ");
     };
@@ -19301,7 +19340,7 @@ function TransactionsDisplay(_a) {
 }
 
 function Quotes(_a) {
-    var className = _a.className, _b = _a.columns, columns = _b === void 0 ? ["date-and-title", "amount", "download", "state"] : _b, entityId = _a.entityId, filter = _a.filter, filterQuotes = _a.filterQuotes, _c = _a.sort, sort = _c === void 0 ? function (a, b) {
+    var className = _a.className, _b = _a.columns, columns = _b === void 0 ? ["date", "title", "amount", "download", "state"] : _b, entityId = _a.entityId, filter = _a.filter, filterQuotes = _a.filterQuotes, _c = _a.sort, sort = _c === void 0 ? function (a, b) {
         return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
     } : _c, _d = _a.noQuotesMessage, noQuotesMessage = _d === void 0 ? "There are no quotes" : _d, onQuoteClick = _a.onQuoteClick, quoteComponent = _a.quoteComponent, searchBarClassName = _a.searchBarClassName, _e = _a.shadow, shadow = _e === void 0 ? "shadow-md" : _e, _f = _a.showSearchBar, showSearchBar = _f === void 0 ? true : _f, _g = _a.showTitle, showTitle = _g === void 0 ? true : _g, _h = _a.title, title = _h === void 0 ? "Past quotes" : _h, style = _a.style, _j = _a.suppressQuoteDisplay, suppressQuoteDisplay = _j === void 0 ? false : _j, _k = _a.useModal, useModal = _k === void 0 ? false : _k;
     var apiHost = useContext(BunnyContext).apiHost;
@@ -19382,26 +19421,27 @@ function QuotesWrapper() {
     var quotes = data.nodes.filter(function (quote) {
         return quote.state !== "DRAFT";
     });
-    var quotesAsTransactions = quotes.map(function (quote) { return ({
-        transactionableId: quote.id,
-        state: quote.state,
-        amount: quote.amount || quote.amountDue,
-        kind: "QUOTE",
-        currencyId: quote.currencyId,
-        transactionable: {
-            number: quote.number,
-        },
-        createdAt: quote.createdAt,
-    }); });
+    var quotesAsTransactions = quotes.map(function (quote) {
+        var _a, _b;
+        return ({
+            transactionableId: quote.id,
+            state: quote.state,
+            amount: quote.amount || quote.amountDue,
+            kind: "QUOTE",
+            currencyId: quote.currencyId,
+            transactionable: {
+                number: quote.number,
+            },
+            createdAt: quote.createdAt,
+            account: {
+                name: (_a = quote.account) === null || _a === void 0 ? void 0 : _a.name,
+                id: (_b = quote.account) === null || _b === void 0 ? void 0 : _b.id,
+            },
+        });
+    });
     return (jsx(TransactionsDisplay, { transactions: quotesAsTransactions, onSearchValueChanged: setSearch, search: search }));
 }
 
-var Text$5 = Typography.Text;
-var DrawerHeader = function (_a) {
-    var description = _a.description, onClose = _a.onClose, title = _a.title;
-    return (jsxs("div", __assign({ className: "flex flex-col gap-4" }, { children: [jsxs("div", __assign({ className: "flex items-center justify-between gap-2" }, { children: [jsx(Text$5, __assign({ className: "text-xl", style: { fontWeight: 400 } }, { children: title })), jsx("button", __assign({ onClick: onClose, className: "ant-drawer-close" }, { children: jsx(CloseOutlined, {}) }))] })), description && jsx("div", __assign({ className: "text-xs" }, { children: description }))] })));
-};
-
 // TODO: move this to common
 var billingDetailsQuery = function () {
     return "\nquery BillingDetails {\n  billingDetails {\n    billingCity\n    billingContact {\n      email\n    }\n    billingCountry\n    billingState\n    billingStreet\n    billingZip\n    name\n    taxNumber\n    currency {\n      id\n    }\n  }\n}";
@@ -19429,26 +19469,35 @@ var getBillingDetails = function (_a) {
     });
 };
 
+var Text$5 = Typography.Text;
+var DrawerHeader = function (_a) {
+    var description = _a.description, onClose = _a.onClose, title = _a.title, closeButtonClassName = _a.closeButtonClassName;
+    return (jsxs("div", __assign({ className: "flex flex-col gap-4" }, { children: [jsxs("div", __assign({ className: "flex items-center justify-between gap-2" }, { children: [jsx(Text$5, __assign({ className: "text-xl", style: { fontWeight: 400 } }, { children: title })), onClose ? (jsx("button", __assign({ onClick: onClose, className: closeButtonClassName }, { children: jsx(CloseOutlined, {}) }))) : null] })), description && jsx("div", __assign({ className: "text-xs" }, { children: description }))] })));
+};
+
 var PaymentMethod = function (_a) {
     var _b;
-    var entityId = _a.entityId, className = _a.className, _c = _a.shadow, shadow = _c === void 0 ? "shadow-md" : _c, _d = _a.cardEnabled, cardEnabled = _d === void 0 ? true : _d;
-    var _e = useContext(BunnyContext), apiHost = _e.apiHost, graphQLClient = _e.graphQLClient, onTokenExpired = _e.onTokenExpired;
+    var entityId = _a.entityId, className = _a.className, _c = _a.shadow, shadow = _c === void 0 ? "shadow-md" : _c, _d = _a.cardEnabled, cardEnabled = _d === void 0 ? true : _d, 
+    /** Whether to use a modal instead of a drawer for the payment method form */
+    _e = _a.useModal, 
+    /** Whether to use a modal instead of a drawer for the payment method form */
+    useModal = _e === void 0 ? true : _e;
+    var _f = useContext(BunnyContext), apiHost = _f.apiHost, graphQLClient = _f.graphQLClient, onTokenExpired = _f.onTokenExpired;
     var token = useToken();
     // Hooks
     var queryClient = useQueryClient();
     var paymentPlugins = usePaymentPlugins({ entityId: entityId, apiHost: apiHost, token: token }).paymentPlugins;
     var showSuccessNotification = useSuccessNotification();
     var handleAllErrorFormats = useAllErrorFormats(onTokenExpired);
-    var isMobile = useIsMobile();
     var data = usePaymentMethod(graphQLClient, entityId, token).data;
-    var onClickRemove = useRemovePaymentMethod(paymentPlugins || [], token, apiHost, entityId);
+    var onClickRemove = useRemovePaymentMethod(paymentPlugins || [], apiHost, entityId, token);
     // Queries
     var billingDetails = useQuery({
         queryKey: QueryKeyFactory.default.billingDetailsKey(entityId, token),
         queryFn: function () { return getBillingDetails({ token: token, apiHost: apiHost }); },
     }).data;
     // Local state
-    var _f = useState(false), showModal = _f[0], setShowModal = _f[1];
+    var _g = useState(false), showModal = _g[0], setShowModal = _g[1];
     var onSuccess = function () {
         queryClient.invalidateQueries({
             queryKey: QueryKeyFactory.default.accountPaymentMethodKey(entityId, token),
@@ -19467,18 +19516,27 @@ var PaymentMethod = function (_a) {
                                 return [2 /*return*/];
                         }
                     });
-                }); }, onClickUpdate: function () { return setShowModal(true); }, paymentMethodData: data, shadow: shadow, cardEnabled: cardEnabled })) : (jsx(EmptyCard, { onClick: function () { return setShowModal(true); }, shadow: shadow, cardEnabled: cardEnabled })), jsx(Drawer, __assign({ closeIcon: null, onClose: function () { return setShowModal(false); }, open: showModal, styles: {
-                    body: isMobile
-                        ? {
-                            padding: "1rem 0 0",
-                        }
-                        : {},
-                }, title: jsx(DrawerHeader, { onClose: function () { return setShowModal(false); }, title: "New payment method" }) }, { children: jsx(PaymentForm, { entityId: entityId, onFail: function (error) {
+                }); }, onClickUpdate: function () { return setShowModal(true); }, paymentMethodData: data, shadow: shadow, cardEnabled: cardEnabled })) : (jsx(EmptyCard, { onClick: function () { return setShowModal(true); }, shadow: shadow, cardEnabled: cardEnabled })), jsx(PaymentMethodDisplay, __assign({ useModal: useModal, setShowModal: setShowModal, showModal: showModal }, { children: jsx(PaymentForm, { entityId: entityId, onFail: function (error) {
                         handleAllErrorFormats(error);
                     }, onPaymentSuccess: function () {
                         onSuccess();
                     }, graphQLClient: graphQLClient, currencyId: (_b = billingDetails === null || billingDetails === void 0 ? void 0 : billingDetails.currency) === null || _b === void 0 ? void 0 : _b.id }) }))] })));
 };
+var PaymentMethodDisplay = function (_a) {
+    var children = _a.children, useModal = _a.useModal, setShowModal = _a.setShowModal, showModal = _a.showModal;
+    if (useModal) {
+        return (jsx(Modal, __assign({ closeIcon: null, open: showModal, onClose: function () { return setShowModal(false); }, onCancel: function () { return setShowModal(false); }, styles: {
+                body: {
+                    padding: "1rem 0 0 0",
+                },
+            }, title: jsx("div", __assign({ className: "px-4" }, { children: jsx(DrawerHeader, { title: "New payment method", onClose: function () { return setShowModal(false); }, closeButtonClassName: "bg-transparent border-none cursor-pointer hover:bg-gray-100 p-2 rounded-sm transition-all duration-200" }) })), footer: null }, { children: children })));
+    }
+    return (jsx(Drawer, __assign({ closeIcon: null, onClose: function () { return setShowModal(false); }, open: showModal, styles: {
+            body: {
+                padding: "1rem 0.5rem 0",
+            },
+        }, title: jsx(DrawerHeader, { onClose: function () { return setShowModal(false); }, title: "New payment method", closeButtonClassName: "ant-drawer-close" }) }, { children: children })));
+};
 
 var pageWrapperClassName = function (isMobile) {
     return "flex flex-col grow pt-4 ".concat(isMobile ? "pb-4 overflow-hidden" : "pb-8", " ").concat("content-container");
@@ -19830,7 +19888,7 @@ var getPriceList = function (_a) {
 function PaymentForms(_a) {
     var quote = _a.quote, handlePaymentSuccess = _a.handlePaymentSuccess, handlePaymentFail = _a.handlePaymentFail, handleSubmit = _a.handleSubmit, proceedingToPayment = _a.proceedingToPayment, entityId = _a.entityId, accountId = _a.accountId, overrideToken = _a.overrideToken, customCheckoutFunction = _a.customCheckoutFunction;
     var apiHost = useContext(BunnyContext).apiHost;
-    return (jsx(Fragment, { children: quote ? (jsx(Fragment, { children: overrideToken ? (jsx(PaymentForm, { entityId: entityId, onFail: handlePaymentFail, onPaymentSuccess: handlePaymentSuccess, accountId: accountId, quote: quote, overrideToken: overrideToken, graphQLClient: createGraphQLClient(overrideToken, apiHost), customCheckoutFunction: customCheckoutFunction })) : null })) : (jsx(InitialSignupForm, { onSubmit: handleSubmit, submitting: proceedingToPayment })) }));
+    return (jsx(Fragment, { children: quote ? (jsx(Fragment, { children: overrideToken ? (jsx(PaymentForm, { entityId: entityId, onFail: handlePaymentFail, onPaymentSuccess: handlePaymentSuccess, accountId: accountId, quote: quote, overrideToken: overrideToken, graphQLClient: createGraphQLClient(apiHost, overrideToken), customCheckoutFunction: customCheckoutFunction })) : null })) : (jsx(InitialSignupForm, { onSubmit: handleSubmit, submitting: proceedingToPayment })) }));
 }
 function InitialSignupForm(_a) {
     var onSubmit = _a.onSubmit, submitting = _a.submitting;
@@ -19908,7 +19966,7 @@ function Signup(_a) {
                         data = _a.sent();
                         setAccountId(data.account.id);
                         setPortalSessionToken(data.portalSessionToken);
-                        setPaymentMethodGraphQLClient(createGraphQLClient(data.portalSessionToken, apiHost || ""));
+                        setPaymentMethodGraphQLClient(createGraphQLClient(apiHost || "", data.portalSessionToken));
                         // We must invalidate the accountPaymentMethodKey query in order to clear payment methods from the provided api token,
                         // to instead use paymentMethods from portalSessionToken.
                         queryClient.invalidateQueries({
@@ -20131,73 +20189,6 @@ var getFeatureUsage = function (_a) {
                         })];
                 case 1:
                     response = _c.sent();
-                    // const test = {
-                    //   featureUsageHistogram: {
-                    //     subscriptionCharge: {
-                    //       id: "37",
-                    //       name: "Users",
-                    //       amount: 0,
-                    //       currentPeriodPriceByTiers: null,
-                    //     },
-                    //     feature: {
-                    //       id: "1",
-                    //       name: "User",
-                    //     },
-                    //     periodRange: "2023-07-20..2024-07-19",
-                    //     dataInterval: "MONTHLY",
-                    //     data: [
-                    //       {
-                    //         periodStart: "2024-01-01T00:00:00+00:00",
-                    //         periodEnd: "2024-03-31T00:00:00+00:00",
-                    //         intervals: [
-                    //           {
-                    //             intervalStart: "2024-01-01T00:00:00Z",
-                    //             intervalUsage: 1061,
-                    //           },
-                    //           {
-                    //             intervalStart: "2024-02-01T00:00:00Z",
-                    //             intervalUsage: 1107,
-                    //           },
-                    //           {
-                    //             intervalStart: "2024-03-01T00:00:00Z",
-                    //             intervalUsage: 1130,
-                    //           },
-                    //         ],
-                    //         intervalsTotal: 3298,
-                    //       },
-                    //       {
-                    //         periodStart: "2024-04-01T00:00:00+00:00",
-                    //         periodEnd: "2024-06-30T00:00:00+00:00",
-                    //         intervals: [
-                    //           {
-                    //             intervalStart: "2024-05-01T00:00:00Z",
-                    //             intervalUsage: 1068,
-                    //           },
-                    //           {
-                    //             intervalStart: "2024-04-01T00:00:00Z",
-                    //             intervalUsage: 794,
-                    //           },
-                    //           {
-                    //             intervalStart: "2024-06-01T00:00:00Z",
-                    //             intervalUsage: 871,
-                    //           },
-                    //         ],
-                    //         intervalsTotal: 2733,
-                    //       },
-                    //       {
-                    //         periodStart: "2024-07-01T00:00:00+00:00",
-                    //         periodEnd: "2024-09-30T00:00:00+00:00",
-                    //         intervals: [
-                    //           {
-                    //             intervalStart: "2024-07-01T00:00:00Z",
-                    //             intervalUsage: 950,
-                    //           },
-                    //         ],
-                    //         intervalsTotal: 950,
-                    //       },
-                    //     ],
-                    //   },
-                    // };
                     if ((_b = response.featureUsageHistogram) === null || _b === void 0 ? void 0 : _b.data)
                         return [2 /*return*/, response.featureUsageHistogram];
                     else
@@ -20638,34 +20629,29 @@ var billingDetailsUpdate = function (_a) {
     });
 };
 
-var BillingDetails = function (_a) {
-    var entityId = _a.entityId, _b = _a.isCardEnabled, isCardEnabled = _b === void 0 ? true : _b, _c = _a.shadow, shadow = _c === void 0 ? "shadow-md" : _c, className = _a.className, hidePaymentMethodForm = _a.hidePaymentMethodForm, countryListFilter = _a.countryListFilter;
-    // Hooks
-    var _d = useContext(BunnyContext), apiHost = _d.apiHost, onTokenExpired = _d.onTokenExpired, graphQLClient = _d.graphQLClient;
+function BillingDetailsSection(_a) {
+    var _this = this;
+    var entityId = _a.entityId, hidePaymentMethodForm = _a.hidePaymentMethodForm, countryListFilter = _a.countryListFilter;
+    // State
+    var _b = useState(false), isFormEdited = _b[0], setIsFormEdited = _b[1];
+    var _c = useState(false), formIsValid = _c[0], setFormIsValid = _c[1];
+    var form = Form.useForm()[0];
+    var values = Form.useWatch([], form);
+    // Context
+    var apiHost = useContext(BunnyContext).apiHost;
     var token = useToken();
     // Hooks
     var isMobile = useIsMobile();
     var queryClient = useQueryClient();
-    var showSuccessNotification = useSuccessNotification();
     var showErrorNotification = useErrorNotification();
-    var handleAllErrorFormats = useAllErrorFormats(onTokenExpired);
-    // State
-    var form = Form.useForm()[0];
-    var _e = useState(false), isFormEdited = _e[0], setIsFormEdited = _e[1];
-    var _f = useState(false), formIsValid = _f[0], setFormIsValid = _f[1];
-    useMemo(function () {
-        return countryListFilter
-            ? Lists.COUNTRY_LIST.filter(countryListFilter)
-            : Lists.COUNTRY_LIST;
-    }, [countryListFilter]);
-    var values = Form.useWatch([], form);
+    var showSuccessNotification = useSuccessNotification();
     // Queries
-    var _g = useQuery({
+    var _d = useQuery({
         queryKey: QueryKeyFactory.default.billingDetailsKey(entityId, token),
         queryFn: function () { return getBillingDetails({ token: token, apiHost: apiHost }); },
-    }), billingDetails = _g.data, isLoadingBillingDetails = _g.isLoading;
-    var _h = useMutation({
-        mutationFn: function (changedFormData) { return __awaiter(void 0, void 0, void 0, function () {
+    }), billingDetails = _d.data, isLoadingBillingDetails = _d.isLoading;
+    var _e = useMutation({
+        mutationFn: function (changedFormData) { return __awaiter(_this, void 0, void 0, function () {
             var updatedBillingDetails;
             return __generator(this, function (_a) {
                 switch (_a.label) {
@@ -20698,7 +20684,7 @@ var BillingDetails = function (_a) {
                 queryKey: QueryKeyFactory.default.taxationRequiredAccountFieldsKey(entityId, token),
             });
         },
-    }), updateBillingDetails = _h.mutate, isUpdatingBillingDetails = _h.isPending;
+    }), updateBillingDetails = _e.mutate, isUpdatingBillingDetails = _e.isPending;
     // Set form values when billing details are loaded
     useEffect(function () {
         var _a;
@@ -20715,7 +20701,6 @@ var BillingDetails = function (_a) {
             });
         }
     }, [billingDetails]);
-    // Validate form when values change
     useEffect(function () {
         form
             .validateFields({ validateOnly: true })
@@ -20742,13 +20727,11 @@ var BillingDetails = function (_a) {
             });
         };
         setIsFormEdited(isFormEdited());
-    }, [form, values]);
-    var onSuccess = useCallback(function () {
-        showSuccessNotification("Your payment method has been saved");
-    }, [queryClient]);
-    var saveBillingDetails = function () { return __awaiter(void 0, void 0, void 0, function () {
+    }, [form, values, billingDetails]);
+    var saveBillingDetails = function () { return __awaiter(_this, void 0, void 0, function () {
+        var _this = this;
         return __generator(this, function (_a) {
-            form.validateFields({ validateOnly: false }).then(function () { return __awaiter(void 0, void 0, void 0, function () {
+            form.validateFields({ validateOnly: false }).then(function () { return __awaiter(_this, void 0, void 0, function () {
                 var error_1;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
@@ -20778,37 +20761,57 @@ var BillingDetails = function (_a) {
             return [2 /*return*/];
         });
     }); };
-    return (jsx(WrapperComponent, __assign({ isCardEnabled: isCardEnabled, shadow: shadow, className: className }, { children: jsxs("div", __assign({ className: "flex p-2 my-2 ".concat(isMobile ? "flex-col space-y-4" : "flex-row", " gap-4") }, { children: [jsxs("div", __assign({ className: "".concat(isMobile || hidePaymentMethodForm ? "w-full" : "w-1/2", " px-4") }, { children: [jsx(Skeleton, __assign({ loading: isLoadingBillingDetails }, { children: jsxs(Form, __assign({ className: "flex flex-col gap-2", form: form, layout: "vertical", disabled: isUpdatingBillingDetails, autoComplete: "off" }, { children: [jsx(Form.Item, __assign({ label: "Account name", name: "name", rules: [
-                                            { required: true, message: "Account name is required" },
-                                        ] }, { children: jsx(Input, {}) })), jsx(Form.Item, __assign({ label: "Street address", name: "billingStreet", rules: [
-                                            { required: true, message: "Street address is required" },
-                                        ] }, { children: jsx(Input, {}) })), jsxs("div", __assign({ className: "flex gap-4" }, { children: [jsx(Form.Item, __assign({ label: "City", name: "billingCity", rules: [{ required: true, message: "City is required" }], className: "flex-1" }, { children: jsx(Input, {}) })), jsx(Form.Item, __assign({ label: "Zipcode", name: "billingZip", rules: [{ required: true, message: "Zipcode is required" }], className: "flex-1" }, { children: jsx(Input, {}) }))] })), jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-col pb-2" : "flex-row", " gap-4") }, { children: [jsx(Form.Item, __assign({ label: "State", name: "billingState", className: "flex-1", rules: [
-                                                    {
-                                                        required: false,
-                                                    },
-                                                ] }, { children: jsx(Input, {}) })), jsx(Form.Item, __assign({ label: "Country", name: "billingCountry", className: "flex-1", rules: [{ required: true, message: "Country is required" }] }, { children: jsx(Select, { options: Lists.COUNTRY_LIST, placeholder: "Select a country", showSearch: true, filterOption: function (input, option) {
-                                                        var _a, _b;
-                                                        return ((_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : "")
-                                                            .toLowerCase()
-                                                            .includes(input.toLowerCase()) ||
-                                                            ((_b = option === null || option === void 0 ? void 0 : option.value) !== null && _b !== void 0 ? _b : "")
-                                                                .toLowerCase()
-                                                                .includes(input.toLowerCase());
-                                                    } }) }))] })), jsx(Form.Item, __assign({ label: "Email", name: "billingContactEmail", rules: [
-                                            {
-                                                required: true,
-                                                message: "Email is required",
-                                                type: "email",
-                                            },
-                                        ] }, { children: jsx(Input, {}) })), jsx(Form.Item, __assign({ label: "Tax ID", name: "taxNumber", tooltip: "Tax ID will be printed on quotes and invoices below the account's address", rules: [{ required: false }] }, { children: jsx(Input, {}) }))] })) })), jsx(Button, __assign({ disabled: !isFormEdited || isUpdatingBillingDetails || !formIsValid, className: "w-full mt-4", type: "primary", onClick: saveBillingDetails }, { children: "Save" }))] })), isMobile ? (jsx("div", __assign({ className: "mx-4" }, { children: jsx(Divider, {}) }))) : (jsx("div", { children: jsx(Divider, { className: "h-full", type: "vertical" }) })), jsx("div", __assign({ className: "".concat(isMobile ? "w-full" : "w-1/2 pt-4", " flex justify-center") }, { children: jsx(PaymentForm, { entityId: entityId, onFail: function (error) {
-                            handleAllErrorFormats(error);
-                        }, onSavePaymentMethod: function () {
-                            onSuccess();
-                        }, graphQLClient: graphQLClient }) }))] })) })));
+    var filteredCountryList = useMemo(function () {
+        return countryListFilter
+            ? Lists.COUNTRY_LIST.filter(countryListFilter)
+            : Lists.COUNTRY_LIST;
+    }, [countryListFilter]);
+    return (jsxs("div", __assign({ className: "".concat(isMobile || hidePaymentMethodForm ? "w-full" : "w-1/2", " px-4") }, { children: [jsx(Skeleton, __assign({ loading: isLoadingBillingDetails }, { children: jsxs(Form, __assign({ className: "flex flex-col gap-2", form: form, layout: "vertical", disabled: isUpdatingBillingDetails, autoComplete: "off" }, { children: [jsx(Form.Item, __assign({ label: "Account name", name: "name", rules: [{ required: true, message: "Account name is required" }] }, { children: jsx(Input, {}) })), jsx(Form.Item, __assign({ label: "Street address", name: "billingStreet", rules: [{ required: true, message: "Street address is required" }] }, { children: jsx(Input, {}) })), jsxs("div", __assign({ className: "flex gap-4" }, { children: [jsx(Form.Item, __assign({ label: "City", name: "billingCity", rules: [{ required: true, message: "City is required" }], className: "flex-1" }, { children: jsx(Input, {}) })), jsx(Form.Item, __assign({ label: "Zipcode", name: "billingZip", rules: [{ required: true, message: "Zipcode is required" }], className: "flex-1" }, { children: jsx(Input, {}) }))] })), jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-col pb-2" : "flex-row", " gap-4") }, { children: [jsx(Form.Item, __assign({ label: "State", name: "billingState", className: "flex-1", rules: [
+                                        {
+                                            required: false,
+                                        },
+                                    ] }, { children: jsx(Input, {}) })), jsx(Form.Item, __assign({ label: "Country", name: "billingCountry", className: "flex-1", rules: [{ required: true, message: "Country is required" }] }, { children: jsx(Select, { options: filteredCountryList, placeholder: "Select a country", showSearch: true, filterOption: function (input, option) {
+                                            var _a, _b;
+                                            return ((_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : "")
+                                                .toLowerCase()
+                                                .includes(input.toLowerCase()) ||
+                                                ((_b = option === null || option === void 0 ? void 0 : option.value) !== null && _b !== void 0 ? _b : "")
+                                                    .toLowerCase()
+                                                    .includes(input.toLowerCase());
+                                        } }) }))] })), jsx(Form.Item, __assign({ label: "Email", name: "billingContactEmail", rules: [
+                                {
+                                    required: true,
+                                    message: "Email is required",
+                                    type: "email",
+                                },
+                            ] }, { children: jsx(Input, {}) })), jsx(Form.Item, __assign({ label: "Tax ID", name: "taxNumber", tooltip: "Tax ID will be printed on quotes and invoices below the account's address", rules: [{ required: false }] }, { children: jsx(Input, {}) }))] })) })), jsx(Button, __assign({ disabled: !isFormEdited || isUpdatingBillingDetails || !formIsValid, className: "w-full mt-4", type: "primary", onClick: saveBillingDetails }, { children: "Save" }))] })));
+}
+
+var BillingDetails = function (_a) {
+    var entityId = _a.entityId, _b = _a.isCardEnabled, isCardEnabled = _b === void 0 ? true : _b, _c = _a.shadow, shadow = _c === void 0 ? "shadow-md" : _c, className = _a.className, _d = _a.hidePaymentMethodForm, hidePaymentMethodForm = _d === void 0 ? false : _d, _e = _a.hideBillingDetailsForm, hideBillingDetailsForm = _e === void 0 ? false : _e, countryListFilter = _a.countryListFilter;
+    // Hooks
+    var isMobile = useIsMobile();
+    return (jsx(WrapperComponent, __assign({ isCardEnabled: isCardEnabled, shadow: shadow, className: className }, { children: jsxs("div", __assign({ className: "flex p-2 my-2 ".concat(isMobile ? "flex-col space-y-4" : "flex-row", " gap-4") }, { children: [!hideBillingDetailsForm ? (jsx(BillingDetailsSection, { hidePaymentMethodForm: hidePaymentMethodForm, countryListFilter: countryListFilter, entityId: entityId })) : null, !hideBillingDetailsForm && !hidePaymentMethodForm ? (jsx(ResponsiveDivider, {})) : null, !hidePaymentMethodForm ? (jsx(PaymentFormSection, { entityId: entityId, hideBillingDetailsForm: hideBillingDetailsForm })) : null] })) })));
 };
 var WrapperComponent = function (_a) {
     var children = _a.children, isCardEnabled = _a.isCardEnabled, shadow = _a.shadow, className = _a.className;
     return (jsx("div", __assign({ className: "".concat(className) }, { children: isCardEnabled ? (jsx(Card, __assign({ className: "".concat(shadow) }, { children: children }))) : (jsx("div", { children: children })) })));
 };
+var ResponsiveDivider = function () {
+    var isMobile = useIsMobile();
+    return isMobile ? (jsx("div", __assign({ className: "mx-4" }, { children: jsx(Divider, {}) }))) : (jsx("div", { children: jsx(Divider, { className: "h-full", type: "vertical" }) }));
+};
+var PaymentFormSection = function (_a) {
+    var entityId = _a.entityId, hideBillingDetailsForm = _a.hideBillingDetailsForm;
+    var isMobile = useIsMobile();
+    var _b = useContext(BunnyContext), onTokenExpired = _b.onTokenExpired, graphQLClient = _b.graphQLClient;
+    var handleAllErrorFormats = useAllErrorFormats(onTokenExpired);
+    var showSuccessNotification = useSuccessNotification();
+    return (jsx("div", __assign({ className: "".concat(isMobile || hideBillingDetailsForm ? "w-full" : "w-1/2 pt-4", " flex justify-center") }, { children: jsx(PaymentForm, { entityId: entityId, onFail: function (error) {
+                handleAllErrorFormats(error);
+            }, onSavePaymentMethod: function () {
+                showSuccessNotification("Your payment method has been saved");
+            }, graphQLClient: graphQLClient }) })));
+};
 
-export { BillingDetails, BunnyProvider, Checkout, Invoice, PaymentMethod, Quote, Quotes, Signup, Subscriptions, Transactions, getQuoteAmountDue, usePaymentMethod };
+export { BillingDetails, BunnyProvider, Checkout, Invoice, PaymentForm, PaymentMethod, Quote, Quotes, Signup, Subscriptions, Transactions, getQuoteAmountDue, usePaymentMethod };