@bunnyapp/components 1.0.35 → 1.0.36

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  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";
 styleInject(css_248z);
 
 /******************************************************************************
@@ -229,8 +229,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
@@ -404,7 +408,7 @@ 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({
+    var _a = useQuery({
         queryKey: QueryKeyFactory.default.accountPaymentMethodKey(entityId, token),
         queryFn: function () {
             return graphQLClient
@@ -419,8 +423,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) {
@@ -1302,9 +1306,9 @@ 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), storedPaymentMethod = _e.data, isPaymentMethodLoading = _e.isLoading;
     var isPaymentMethodFetched = storedPaymentMethod !== undefined;
-    var _e = usePaymentPlugins({ entityId: entityId, apiHost: apiHost, token: overrideToken || token }), paymentMethodAllowedPlugins = _e.paymentMethodAllowedPlugins, arePluginsFetched = _e.isFetched;
+    var _f = usePaymentPlugins({ entityId: entityId, apiHost: apiHost, token: overrideToken || token }), paymentMethodAllowedPlugins = _f.paymentMethodAllowedPlugins, arePluginsFetched = _f.isFetched;
     var onClickRemove = useRemovePaymentMethod(paymentMethodAllowedPlugins || [], overrideToken || token, apiHost, entityId, accountId);
     var queryClient = useQueryClient();
     // Set default plugin
@@ -1345,6 +1349,9 @@ var PaymentForm = function (_a) {
         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,
@@ -19396,12 +19403,6 @@ function QuotesWrapper() {
     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,17 +19430,26 @@ 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);
     // Queries
@@ -19448,7 +19458,7 @@ var PaymentMethod = function (_a) {
         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 +19477,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");
@@ -20638,34 +20657,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 +20712,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 +20729,6 @@ var BillingDetails = function (_a) {
             });
         }
     }, [billingDetails]);
-    // Validate form when values change
     useEffect(function () {
         form
             .validateFields({ validateOnly: true })
@@ -20742,13 +20755,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 +20789,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 };

package/dist/esm/src/components/BillingDetails/BillingDetails.d.ts

@@ -1,11 +1,12 @@
 import "../../styles/index.less";
 import { ShadowType } from "../../types/shadowType";
-declare const BillingDetails: ({ entityId, isCardEnabled, shadow, className, hidePaymentMethodForm, countryListFilter, }: {
+declare const BillingDetails: ({ entityId, isCardEnabled, shadow, className, hidePaymentMethodForm, hideBillingDetailsForm, countryListFilter, }: {
     entityId: string;
     isCardEnabled?: boolean | undefined;
     shadow?: ShadowType | undefined;
     className?: string | undefined;
     hidePaymentMethodForm?: boolean | undefined;
+    hideBillingDetailsForm?: boolean | undefined;
     countryListFilter?: ((country: {
         value: string;
         label: string;

package/dist/esm/src/components/BillingDetails/BillingDetails.stories.d.ts

@@ -9,3 +9,6 @@ export declare const CustomClassName: Story;
 export declare const NoCard: Story;
 export declare const Mobile: Story;
 export declare const DarkMode: Story;
+export declare const HidePaymentMethodForm: Story;
+export declare const HideBillingDetailsForm: Story;
+export declare const HideBothForms: Story;

package/dist/esm/src/components/BillingDetails/BillingDetailsForm.d.ts

@@ -0,0 +1,9 @@
+import "../../styles/index.less";
+export default function BillingDetailsSection({ entityId, hidePaymentMethodForm, countryListFilter, }: {
+    entityId: string;
+    hidePaymentMethodForm: boolean;
+    countryListFilter?: (country: {
+        value: string;
+        label: string;
+    }) => boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/esm/src/components/DrawerHeader.d.ts

@@ -1,6 +1,7 @@
-declare const DrawerHeader: ({ description, onClose, title, }: {
+declare const DrawerHeader: ({ description, onClose, title, closeButtonClassName, }: {
     description?: string | undefined;
-    onClose: () => void;
+    onClose?: (() => void) | undefined;
     title: string;
+    closeButtonClassName?: string | undefined;
 }) => import("react/jsx-runtime").JSX.Element;
 export default DrawerHeader;

package/dist/esm/src/components/PaymentForm/PaymentMethod/PaymentMethod.d.ts

@@ -1,8 +1,9 @@
 import "../../../styles/index.less";
 import { ShadowType } from "../../../types/shadowType";
-export declare const PaymentMethod: ({ entityId, className, shadow, cardEnabled, }: {
+export declare const PaymentMethod: ({ entityId, className, shadow, cardEnabled, useModal, }: {
     entityId: string;
     className?: string | undefined;
     shadow?: ShadowType | undefined;
     cardEnabled?: boolean | undefined;
+    useModal?: boolean | undefined;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/src/hooks/usePaymentMethod.d.ts

@@ -1,2 +1,5 @@
 import { GraphQLClient } from "graphql-request";
-export declare const usePaymentMethod: (graphQLClient: GraphQLClient, entityId?: string, token?: string) => import("@tanstack/react-query/build/legacy/types").UseQueryResult<any, Error>;
+export declare const usePaymentMethod: (graphQLClient: GraphQLClient, entityId?: string, token?: string) => {
+    data: any;
+    isLoading: boolean;
+};

package/dist/index.d.ts

@@ -5,7 +5,6 @@ import { QueryClient } from '@tanstack/react-query';
 import { ThemeConfig } from 'antd';
 import * as react from 'react';
 import react__default from 'react';
-import * as _tanstack_react_query_build_legacy_types from '@tanstack/react-query/build/legacy/types';
 import { GraphQLClient } from 'graphql-request';
 
 type ShadowType = "shadow-none" | "shadow-sm" | "shadow-md" | "shadow-lg" | "shadow-xl";
@@ -75,11 +74,12 @@ declare function Quotes({ className, columns, entityId, filter, filterQuotes, so
     entityId: string;
 }): react_jsx_runtime.JSX.Element;
 
-declare const PaymentMethod: ({ entityId, className, shadow, cardEnabled, }: {
+declare const PaymentMethod: ({ entityId, className, shadow, cardEnabled, useModal, }: {
     entityId: string;
     className?: string | undefined;
     shadow?: ShadowType | undefined;
     cardEnabled?: boolean | undefined;
+    useModal?: boolean | undefined;
 }) => react_jsx_runtime.JSX.Element;
 
 type CheckoutProps = {
@@ -197,18 +197,22 @@ declare const Subscriptions: ({ className, companyName, entityId, hideExpired, o
     noSubscriptionsComponent?: React.ReactNode;
 }) => react_jsx_runtime.JSX.Element;
 
-declare const BillingDetails: ({ entityId, isCardEnabled, shadow, className, hidePaymentMethodForm, countryListFilter, }: {
+declare const BillingDetails: ({ entityId, isCardEnabled, shadow, className, hidePaymentMethodForm, hideBillingDetailsForm, countryListFilter, }: {
     entityId: string;
     isCardEnabled?: boolean | undefined;
     shadow?: ShadowType | undefined;
     className?: string | undefined;
     hidePaymentMethodForm?: boolean | undefined;
+    hideBillingDetailsForm?: boolean | undefined;
     countryListFilter?: ((country: {
         value: string;
         label: string;
     }) => boolean) | undefined;
 }) => react_jsx_runtime.JSX.Element;
 
-declare const usePaymentMethod: (graphQLClient: GraphQLClient, entityId?: string, token?: string) => _tanstack_react_query_build_legacy_types.UseQueryResult<any, Error>;
+declare const usePaymentMethod: (graphQLClient: GraphQLClient, entityId?: string, token?: string) => {
+    data: any;
+    isLoading: boolean;
+};
 
 export { BillingDetails, BunnyProvider, Checkout, Invoice, PaymentMethod, Quote, Quotes, Signup, Subscriptions, Transactions, getQuoteAmountDue, usePaymentMethod };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bunnyapp/components",
-  "version": "1.0.35",
+  "version": "1.0.36",
   "description": "Components from the Bunny portal to embed Bunny UI functionality into your application.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",