@bunnyapp/components 1.0.55 → 1.0.56-beta.0.1

package/dist/esm/index.js

@@ -1,10 +1,10 @@
 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, Tag, Typography, Divider, Popconfirm, Input, Checkbox, Collapse, Skeleton, Modal, Form, Drawer, Card as Card$1, Image, Select, Tooltip, Radio, Space, Dropdown } from 'antd';
-import { DownloadOutlined, CreditCardOutlined, BankOutlined, SearchOutlined, CloseOutlined, CheckCircleFilled, ArrowLeftOutlined } from '@ant-design/icons';
+import { ConfigProvider, Button, Tag, Typography, Dropdown, Input, Checkbox, Collapse, Skeleton, Modal, Form, Drawer, Card as Card$1, Image, Divider, Select, Tooltip, Radio, Space, Popconfirm } from 'antd';
+import { DownloadOutlined, CreditCardOutlined, EllipsisOutlined, BankOutlined, SearchOutlined, CheckCircleFilled, CloseOutlined, ArrowLeftOutlined } 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, sortSubscriptionCharges, Lists, SLATE_500, PRIMARY_COLOR, getAccount, StringUtils, BillingPeriod, ChargeType, SubscriptionState as SubscriptionState$2, PERIOD_LABELS, PricingStyle, PricingModel, SLATE_100, useInfoNotification, MODAL_MAX_HEIGHT, DataInterval, TAG_COLORS, SubscriptionChargeKind } from '@bunnyapp/common';
+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, sortSubscriptionCharges, SLATE_500, PRIMARY_COLOR, Lists, getAccount, StringUtils, BillingPeriod, ChargeType, SubscriptionState as SubscriptionState$2, PERIOD_LABELS, PricingStyle, PricingModel, SLATE_100, useInfoNotification, MODAL_MAX_HEIGHT, DataInterval, TAG_COLORS, SubscriptionChargeKind } from '@bunnyapp/common';
 import { QueryClient, QueryClientProvider, useQuery, useQueryClient, keepPreviousData, useMutation } from '@tanstack/react-query';
 import theme from 'antd/lib/theme/index.js';
 import { RecoilRoot } from 'recoil';
@@ -44,7 +44,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-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  --bunny-blue-500: #3b82f6;\n  --bunny-blue-200: #bfdbfe;\n  --bunny-green-600: #059669;\n  --bunny-green-200: #a7f3d0;\n  --bunny-red-500: #ef4444;\n  --bunny-red-200: #fecaca;\n  --bunny-orange-500: #f97316;\n  --bunny-orange-200: #fed7aa;\n  --bunny-yellow-500: #f59e0b;\n  --bunny-yellow-200: #fde68a;\n  --bunny-purple-500: #8b5cf6;\n  --bunny-purple-200: #ddd6fe;\n  --bunny-black: #000000;\n}\n* {\n  padding: 0;\n  box-sizing: border-box !important;\n  line-height: 1.15;\n}\n.hidden {\n  display: none;\n}\n.bunny-show-on-hover {\n  opacity: 0;\n}\n.bunny-show-on-hover-container:hover .bunny-show-on-hover {\n  opacity: 1;\n}\n.has-tooltip:hover .tooltip {\n  visibility: visible;\n  z-index: 100;\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.bunny-icon-path {\n  transition: fill 0.3s;\n}\n.bunny-shadow-padding-x {\n  padding-right: 1rem;\n  padding-left: 1rem;\n}\n.bunny-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  .bunny-shadow-padding-x {\n    padding-right: 2rem;\n    padding-left: 2rem;\n  }\n  .bunny-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.sticky {\n  position: sticky;\n}\n.-top-0\\.5 {\n  top: -0.125rem;\n}\n.bottom-0 {\n  bottom: 0px;\n}\n.bottom-4 {\n  bottom: 1rem;\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.col-span-full {\n  grid-column: 1 / -1;\n}\n.m-0 {\n  margin: 0px;\n}\n.mx-0 {\n  margin-left: 0px;\n  margin-right: 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-2 {\n  margin-bottom: 0.5rem;\n}\n.mb-4 {\n  margin-bottom: 1rem;\n}\n.mb-8 {\n  margin-bottom: 2rem;\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-12 {\n  width: 3rem;\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.flex-grow {\n  flex-grow: 1;\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-3 {\n  gap: 0.75rem;\n}\n.gap-4 {\n  gap: 1rem;\n}\n.gap-6 {\n  gap: 1.5rem;\n}\n.gap-8 {\n  gap: 2rem;\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-lg {\n  border-radius: 0.5rem;\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-2 {\n  border-width: 2px;\n}\n.border-b {\n  border-bottom-width: 1px;\n}\n.border-t {\n  border-top-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.px-8 {\n  padding-left: 2rem;\n  padding-right: 2rem;\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-orange-600 {\n  --tw-text-opacity: 1;\n  color: rgb(234 88 12 / 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-slate-600 {\n  --tw-text-opacity: 1;\n  color: rgb(71 85 105 / 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-\\[margin\\] {\n  transition-property: margin;\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.duration-300 {\n  transition-duration: 300ms;\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.bunny-invoice-container {\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";
+var css_248z = ".ant-divider-horizontal {\n  margin: 0;\n}\n.ant-divider-horizontal {\n  margin: 0;\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  --bunny-blue-500: #3b82f6;\n  --bunny-blue-200: #bfdbfe;\n  --bunny-green-600: #059669;\n  --bunny-green-200: #a7f3d0;\n  --bunny-red-500: #ef4444;\n  --bunny-red-200: #fecaca;\n  --bunny-orange-500: #f97316;\n  --bunny-orange-200: #fed7aa;\n  --bunny-yellow-500: #f59e0b;\n  --bunny-yellow-200: #fde68a;\n  --bunny-purple-500: #8b5cf6;\n  --bunny-purple-200: #ddd6fe;\n  --bunny-black: #000000;\n}\n* {\n  padding: 0;\n  box-sizing: border-box !important;\n  line-height: 1.15;\n}\n.hidden {\n  display: none;\n}\n.bunny-show-on-hover {\n  opacity: 0;\n}\n.bunny-show-on-hover-container:hover .bunny-show-on-hover {\n  opacity: 1;\n}\n.has-tooltip:hover .tooltip {\n  visibility: visible;\n  z-index: 100;\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.bunny-icon-path {\n  transition: fill 0.3s;\n}\n.bunny-shadow-padding-x {\n  padding-right: 1rem;\n  padding-left: 1rem;\n}\n.bunny-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  .bunny-shadow-padding-x {\n    padding-right: 2rem;\n    padding-left: 2rem;\n  }\n  .bunny-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.sticky {\n  position: sticky;\n}\n.-top-0\\.5 {\n  top: -0.125rem;\n}\n.bottom-0 {\n  bottom: 0px;\n}\n.bottom-4 {\n  bottom: 1rem;\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.col-span-full {\n  grid-column: 1 / -1;\n}\n.m-0 {\n  margin: 0px;\n}\n.mx-0 {\n  margin-left: 0px;\n  margin-right: 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-2 {\n  margin-bottom: 0.5rem;\n}\n.mb-4 {\n  margin-bottom: 1rem;\n}\n.mb-8 {\n  margin-bottom: 2rem;\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-12 {\n  width: 3rem;\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.flex-grow {\n  flex-grow: 1;\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-3 {\n  gap: 0.75rem;\n}\n.gap-4 {\n  gap: 1rem;\n}\n.gap-6 {\n  gap: 1.5rem;\n}\n.gap-8 {\n  gap: 2rem;\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-lg {\n  border-radius: 0.5rem;\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-2 {\n  border-width: 2px;\n}\n.border-b {\n  border-bottom-width: 1px;\n}\n.border-t {\n  border-top-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.px-8 {\n  padding-left: 2rem;\n  padding-right: 2rem;\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-orange-600 {\n  --tw-text-opacity: 1;\n  color: rgb(234 88 12 / 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-slate-600 {\n  --tw-text-opacity: 1;\n  color: rgb(71 85 105 / 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-\\[margin\\] {\n  transition-property: margin;\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.duration-300 {\n  transition-duration: 300ms;\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.hover\\:bg-slate-100:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-slate-200:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-gray-200:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(229 231 235 / 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.bunny-invoice-container {\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);
 
 /******************************************************************************
@@ -141,7 +141,7 @@ var BrandContext = createContext({
     topNavImageUrl: DEFAULT_TOP_NAV_IMAGE_URL,
 });
 
-var MUTATION$9 = "\n  query entityBranding {\n    entityBranding {\n      accentColor\n      brandColor\n      topNavImageUrl\n    }\n  }\n";
+var MUTATION$8 = "\n  query entityBranding {\n    entityBranding {\n      accentColor\n      brandColor\n      topNavImageUrl\n    }\n  }\n";
 var getBranding = function (_a) {
     var token = _a.token, apiHost = _a.apiHost;
     return __awaiter(void 0, void 0, void 0, function () {
@@ -149,7 +149,7 @@ var getBranding = function (_a) {
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0: return [4 /*yield*/, gqlRequest({
-                        query: MUTATION$9,
+                        query: MUTATION$8,
                         token: token,
                         apiHost: apiHost,
                     })];
@@ -413,35 +413,47 @@ function InvoicePDF(_a) {
         }, title: "Invoice PDF", width: "100%" }));
 }
 
-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 paymentMethodsQuery = "query paymentMethods ($filter: String, $sort: String) {\n  paymentMethods (filter: $filter, 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      isDefault\n    }\n  }\n}";
+var getPaymentMethods = function (_a) {
+    var apiHost = _a.apiHost, token = _a.token;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var response, paymentMethods;
+        var _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0: return [4 /*yield*/, gqlRequest({
+                        query: paymentMethodsQuery,
+                        token: token,
+                        apiHost: apiHost,
+                    })];
+                case 1:
+                    response = _c.sent();
+                    paymentMethods = ((_b = response === null || response === void 0 ? void 0 : response.paymentMethods) === null || _b === void 0 ? void 0 : _b.nodes) || [];
+                    return [2 /*return*/, paymentMethods];
+            }
+        });
+    });
+};
 var usePaymentMethod = function (_a) {
-    var accountId = _a.accountId, graphQLClient = _a.graphQLClient, token = _a.token;
+    var accountId = _a.accountId, token = _a.token, apiHost = _a.apiHost;
     var _b = useQuery({
         queryKey: QueryKeyFactory.default.accountPaymentMethodKey({
-            token: token,
             accountId: accountId,
+            token: token,
         }),
-        queryFn: function () {
-            return graphQLClient
-                .request(paymentMethodsQuery, {
-                first: 1,
-                filter: "disabled is false".concat(accountId ? " && accountId=".concat(accountId) : ""),
-            })
-                .then(function (data) {
-                var _a, _b;
-                // TODO error checking of response
-                var paymentMethod = ((_b = (_a = data === null || data === void 0 ? void 0 : data.paymentMethods) === null || _a === void 0 ? void 0 : _a.nodes) === null || _b === void 0 ? void 0 : _b[0]) || null;
-                return paymentMethod;
-            });
-        },
+        queryFn: function () { return getPaymentMethods({ apiHost: apiHost, token: token }); },
     }), data = _b.data, isLoading = _b.isLoading;
-    return { data: data, isLoading: isLoading };
+    return {
+        paymentMethods: data,
+        defaultPaymentMethod: data === null || data === void 0 ? void 0 : data.find(function (paymentMethod) { return paymentMethod.isDefault; }),
+        isLoading: isLoading,
+    };
 };
 
 var usePlugins = function (_a) {
     var apiHost = _a.apiHost, token = _a.token;
     var response = useQuery({
-        queryKey: QueryKeyFactory.default.pluginsKey(token),
+        queryKey: QueryKeyFactory.default.pluginsKey(token || ""),
         queryFn: function () { return __awaiter(void 0, void 0, void 0, function () {
             var plugins;
             return __generator(this, function (_a) {
@@ -490,7 +502,7 @@ var getQuoteAmountDue = function (quote) {
     return quote.amountDue;
 };
 
-var MUTATION$8 = "\n  mutation checkout(\n    $invoiceId: ID,\n    $quoteId: ID,\n    $paymentMethodId: ID,\n    $paymentMethodData: CheckoutPaymentMethodAttributes\n  ) {\n    checkout(\n      invoiceId: $invoiceId,\n      quoteId: $quoteId,\n      paymentMethodId: $paymentMethodId,\n      paymentMethodData: $paymentMethodData\n    ) {\n      invoice {\n        id\n        state\n        amount\n        amountDue\n      }\n      payment {\n        id\n        state\n        amount\n      }\n      paymentApplication {\n        id\n        invoiceId\n        paymentId\n      }\n      transaction {\n        id\n        amount\n      }\n    }\n  }\n";
+var MUTATION$7 = "\n  mutation checkout(\n    $invoiceId: ID,\n    $quoteId: ID,\n    $paymentMethodId: ID,\n    $paymentMethodData: CheckoutPaymentMethodAttributes\n  ) {\n    checkout(\n      invoiceId: $invoiceId,\n      quoteId: $quoteId,\n      paymentMethodId: $paymentMethodId,\n      paymentMethodData: $paymentMethodData\n    ) {\n      invoice {\n        id\n        state\n        amount\n        amountDue\n      }\n      payment {\n        id\n        state\n        amount\n      }\n      paymentApplication {\n        id\n        invoiceId\n        paymentId\n      }\n      transaction {\n        id\n        amount\n      }\n    }\n  }\n";
 var checkout = function (_a) {
     var quoteId = _a.quoteId, invoiceId = _a.invoiceId, paymentMethodId = _a.paymentMethodId, paymentMethodData = _a.paymentMethodData, token = _a.token, apiHost = _a.apiHost;
     return __awaiter(void 0, void 0, void 0, function () {
@@ -507,7 +519,7 @@ var checkout = function (_a) {
                         mutationVars.paymentMethodData = __assign(__assign({}, paymentMethodData), { metadata: paymentMethodData.metadata });
                     }
                     return [4 /*yield*/, gqlRequest({
-                            query: MUTATION$8,
+                            query: MUTATION$7,
                             token: token,
                             vars: mutationVars,
                             apiHost: apiHost,
@@ -620,7 +632,7 @@ var ActualCheckoutFooter = function (_a) {
     var quote = _a.quote, invoice = _a.invoice, onPaymentSuccess = _a.onPaymentSuccess, noPadding = _a.noPadding, plugin = _a.plugin;
     var isMobile = useIsMobile();
     var _b = useState(false), isPaying = _b[0], setIsPaying = _b[1];
-    var storedPaymentMethod = useContext(PaymentContext).storedPaymentMethod;
+    var defaultPaymentMethod = useContext(PaymentContext).defaultPaymentMethod;
     var amountDue = quote ? getQuoteAmountDue(quote) : invoice === null || invoice === void 0 ? void 0 : invoice.amountDue;
     var currencyId = (quote === null || quote === void 0 ? void 0 : quote.currencyId) || (invoice === null || invoice === void 0 ? void 0 : invoice.currencyId);
     // Payment hooks
@@ -632,7 +644,7 @@ var ActualCheckoutFooter = function (_a) {
         },
         quote: quote,
         invoice: invoice,
-        storedPaymentMethod: storedPaymentMethod,
+        storedPaymentMethod: defaultPaymentMethod,
         plugin: plugin,
     }).pay;
     var payStripe = usePay({
@@ -643,7 +655,7 @@ var ActualCheckoutFooter = function (_a) {
         },
         quote: quote,
         invoice: invoice,
-        storedPaymentMethod: storedPaymentMethod,
+        storedPaymentMethod: defaultPaymentMethod,
         plugin: plugin,
     }).pay;
     var handlePaymentSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -673,7 +685,7 @@ var ActualCheckoutFooter = function (_a) {
             }
         });
     }); };
-    return (jsx("div", __assign({ className: "flex justify-end gap-2 ".concat(noPadding ? "" : "pt-6") }, { children: jsx(Button, __assign({ className: "w-full", disabled: isPaying, onClick: function () {
+    return (jsx("div", __assign({ className: "flex justify-end gap-2 ".concat(noPadding ? "" : "") }, { children: jsx(Button, __assign({ className: "w-full", disabled: isPaying, onClick: function () {
                 setIsPaying(true);
                 handlePaymentSubmit();
             }, size: isMobile ? "large" : "middle", type: "primary" }, { children: "".concat(isPaying ? "Paying" : "Pay", " ").concat(amountDue && currencyId ? formatCurrency(amountDue, currencyId) : "") })) })));
@@ -685,6 +697,75 @@ var CheckoutFooter = function (_a) {
     return (jsx(ActualCheckoutFooter, { plugin: plugin, invoice: invoice, quote: quote, onPaymentSuccess: onPaymentSuccess, noPadding: noPadding }));
 };
 
+// Automatically sets the default payment method if there is none currently set
+var useAutoSetDefaultPaymentMethod = function (_a) {
+    var accountId = _a.accountId, token = _a.token, handleSetDefault = _a.handleSetDefault, setDefaultPaymentMethodLoading = _a.setDefaultPaymentMethodLoading;
+    var queryClient = useQueryClient();
+    var apiHost = useContext(BunnyContext).apiHost;
+    var _b = usePaymentMethod({
+        accountId: accountId,
+        token: token,
+        apiHost: apiHost,
+    }), storedPaymentMethods = _b.paymentMethods, defaultPaymentMethod = _b.defaultPaymentMethod;
+    // Set the default payment method on the cache. Prevents 'handleSetDefault' from being called too many times.
+    function setDefaultPaymentMethodOnCache(targetPaymentMethod) {
+        var cachedPaymentMethods = queryClient.getQueryData(QueryKeyFactory.default.accountPaymentMethodKey({
+            accountId: accountId,
+            token: token,
+        }));
+        if (cachedPaymentMethods) {
+            for (var _i = 0, _a = cachedPaymentMethods; _i < _a.length; _i++) {
+                var paymentMethod = _a[_i];
+                paymentMethod.isDefault = paymentMethod.id === targetPaymentMethod.id;
+            }
+            queryClient.setQueryData(QueryKeyFactory.default.accountPaymentMethodKey({
+                accountId: accountId,
+                token: token,
+            }), cachedPaymentMethods);
+        }
+    }
+    useEffect(function () {
+        if (setDefaultPaymentMethodLoading)
+            return;
+        if ((storedPaymentMethods === null || storedPaymentMethods === void 0 ? void 0 : storedPaymentMethods.length) > 0 && !defaultPaymentMethod) {
+            handleSetDefault(storedPaymentMethods[0]);
+            setDefaultPaymentMethodOnCache(storedPaymentMethods[0]);
+        }
+    }, [
+        storedPaymentMethods,
+        defaultPaymentMethod,
+        handleSetDefault,
+        setDefaultPaymentMethodLoading,
+        queryClient,
+        accountId,
+        token,
+    ]);
+};
+
+var usePaymentMethodSelectorPlugin = function (_a) {
+    var defaultPaymentMethod = _a.defaultPaymentMethod, defaultPaymentMethodPlugin = _a.defaultPaymentMethodPlugin, paymentMethodAllowedPlugins = _a.paymentMethodAllowedPlugins;
+    var _b = useState(), selectorPaymentMethodPlugin = _b[0], setSelectorPaymentMethodPlugin = _b[1];
+    useEffect(function () {
+        if (selectorPaymentMethodPlugin) {
+            return;
+        }
+        if (defaultPaymentMethod) {
+            setSelectorPaymentMethodPlugin(defaultPaymentMethodPlugin);
+        }
+        else {
+            setSelectorPaymentMethodPlugin(paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins[0]);
+        }
+    }, [
+        defaultPaymentMethod,
+        defaultPaymentMethodPlugin,
+        paymentMethodAllowedPlugins,
+    ]);
+    return {
+        selectorPaymentMethodPlugin: selectorPaymentMethodPlugin,
+        setSelectorPaymentMethodPlugin: setSelectorPaymentMethodPlugin,
+    };
+};
+
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 function getDefaultExportFromCjs (x) {
@@ -755,7 +836,7 @@ var ChinaUnionPay = function (_a) {
     return (jsxs("svg", __assign({ className: className, width: "60", height: "38", viewBox: "0 0 60 38", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx("rect", { x: "0.5", y: "0.5", width: "59", height: "37", rx: "7.5", fill: "white", stroke: "#D3D3D3" }), jsx("path", { d: "M18.2466 6.855H27.4811C28.7703 6.855 29.5728 7.90603 29.272 9.20036L24.972 27.6585C24.6682 28.949 23.3782 30 22.0886 30H12.8537C11.5641 30 10.7624 28.949 11.0632 27.6585L15.3654 9.20036C15.6653 7.90603 16.9545 6.855 18.2466 6.855Z", fill: "#ED171F" }), jsx("path", { d: "M26.7132 6.855H37.3336C38.6223 6.855 38.0411 7.90603 37.7381 9.20036L33.4385 27.6585C33.1382 28.949 33.2324 30 31.9402 30H21.3206C20.0298 30 19.2303 28.949 19.5336 27.6585L23.8315 9.20036C24.1353 7.90603 25.424 6.855 26.7132 6.855Z", fill: "#082F67" }), jsx("path", { d: "M36.9136 6.855H46.1468C47.4368 6.855 48.2384 7.90603 47.9364 9.20036L43.6372 27.6585C43.3351 28.949 42.0455 30 40.7516 30H31.521C30.2288 30 29.4285 28.949 29.7314 27.6585L34.0293 9.20036C34.3318 7.90603 35.621 6.855 36.9136 6.855Z", fill: "#006A65" }), jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M38.4247 20.4849L37.2994 24.2089H37.6019L37.3681 24.979H37.0656L36.9951 25.218H35.9242L35.9968 24.979H33.82L34.0387 24.2664H34.2587L35.4005 20.4849L35.6286 19.7209H36.7212L36.6071 20.1072C36.6071 20.1072 36.8979 19.8972 37.1741 19.8254C37.4502 19.7528 39.0337 19.7265 39.0337 19.7265L38.799 20.4849H38.4247ZM36.4995 20.4849L36.2103 21.4365C36.2103 21.4365 36.5336 21.2909 36.7112 21.2421C36.8901 21.1958 37.1589 21.1777 37.1589 21.1777L37.3681 20.4849H36.4995ZM36.0669 21.9098L35.7678 22.8994C35.7678 22.8994 36.0984 22.73 36.276 22.6773C36.4549 22.6358 36.7255 22.6021 36.7255 22.6021L36.9377 21.9098H36.0669ZM35.3702 24.2197H36.241L36.4925 23.383H35.6217L35.3702 24.2197Z", fill: "white" }), jsx("path", { d: "M38.9076 19.7265H40.0736L40.0866 20.1613C40.0797 20.2343 40.1427 20.2689 40.2776 20.2689H40.5144L40.2979 20.9863H39.6687C39.1224 21.0265 38.9163 20.7918 38.9284 20.5286L38.9076 19.7265Z", fill: "white" }), jsx("path", { d: "M39.0602 23.1305H37.9487L38.1397 22.4909H39.4099L39.5918 21.9079H38.3368L38.5525 21.1875H42.0439L41.8252 21.9079H40.6545L40.4713 22.4909H41.6446L41.4514 23.1305H40.1808L39.9561 23.3998H40.4713L40.5962 24.2049C40.6096 24.284 40.6121 24.3363 40.6372 24.3708C40.6631 24.4006 40.8174 24.4145 40.9069 24.4145H41.0633L40.8256 25.198H40.4293C40.368 25.198 40.2772 25.1928 40.1532 25.1863C40.033 25.1759 39.9479 25.1064 39.8684 25.0683C39.7958 25.032 39.6869 24.9439 39.6618 24.7939L39.5374 23.9905L38.9608 24.7831C38.7772 25.032 38.5291 25.2226 38.1108 25.2226H37.3009L37.5131 24.5238H37.8221C37.9116 24.5238 37.9906 24.4888 38.0485 24.4586C38.1082 24.4335 38.1605 24.4037 38.2201 24.3155L39.0602 23.1305Z", fill: "white" }), jsx("path", { d: "M26.8864 21.3815H29.8294L29.612 22.0842H28.4348L28.252 22.6818H29.456L29.2365 23.4075H28.0333L27.7416 24.3811C27.7057 24.4892 28.026 24.5043 28.1418 24.5043L28.7451 24.4209L28.5035 25.223H27.1457C27.0389 25.223 26.9555 25.2079 26.8371 25.1811C26.7226 25.1525 26.672 25.1015 26.6214 25.0237C26.5722 24.9438 26.497 24.879 26.548 24.7096L26.9374 23.42H26.2692L26.4909 22.6818H27.1629L27.3414 22.0842H26.672L26.8864 21.3815Z", fill: "white" }), jsx("path", { d: "M28.8682 20.1195H30.0752L29.8544 20.8541H28.2052L28.0259 21.0084C27.9498 21.0832 27.923 21.0516 27.8232 21.1057C27.7303 21.1532 27.5337 21.2461 27.28 21.2461H26.7506L26.9658 20.5395H27.1244C27.2588 20.5395 27.35 20.5283 27.3962 20.4985C27.449 20.4656 27.5073 20.3909 27.5751 20.269L27.8777 19.718H29.0786L28.8682 20.1195Z", fill: "white" }), jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M30.5938 19.7264H31.6223L31.4728 20.2437C31.4728 20.2437 31.7969 19.9848 32.0247 19.8923C32.2511 19.8072 32.7641 19.7311 32.7641 19.7311L34.428 19.7225L33.861 21.6106C33.7659 21.9347 33.6548 22.1439 33.5852 22.239C33.5217 22.3366 33.4482 22.4183 33.3026 22.4974C33.1626 22.5722 33.0351 22.6154 32.9175 22.6275C32.8073 22.6357 32.6388 22.64 32.4046 22.6422H30.8025L30.3501 24.1366C30.3073 24.284 30.2865 24.354 30.3146 24.3937C30.3384 24.43 30.3928 24.4702 30.468 24.4702L31.1746 24.4037L30.9339 25.2226H30.1413C29.8898 25.2226 29.7066 25.2174 29.5778 25.2075C29.4559 25.198 29.3284 25.2075 29.2441 25.1414C29.1694 25.0766 29.0574 24.9918 29.06 24.9041C29.0683 24.8229 29.1011 24.688 29.1534 24.5039L30.5938 19.7264ZM32.7775 21.6344H31.0912L30.9884 21.9749H32.4473C32.6198 21.9533 32.6552 21.9779 32.669 21.9697L32.7775 21.6344ZM31.185 21.3271C31.185 21.3271 31.5139 21.0263 32.0778 20.9286C32.2062 20.9036 33.0083 20.9118 33.0083 20.9118L33.1297 20.5081H31.4305L31.185 21.3271Z", fill: "white" }), jsx("path", { d: "M33.5921 22.7747L33.4979 23.2285C33.4559 23.3693 33.4209 23.4778 33.3138 23.5686C33.2027 23.6632 33.0696 23.763 32.7606 23.763L32.191 23.7859L32.1862 24.2998C32.1785 24.4459 32.2178 24.4303 32.2411 24.4541C32.2675 24.4787 32.2904 24.4904 32.3168 24.4986L32.4961 24.4904L33.0415 24.4584L32.8168 25.2078H32.191C31.7524 25.2078 31.4274 25.1983 31.3202 25.1127C31.2156 25.0466 31.2018 24.9619 31.2048 24.8188L31.2441 22.8201H32.242L32.2295 23.2285H32.4702C32.5523 23.2285 32.6063 23.2198 32.6417 23.1986C32.6707 23.1749 32.6936 23.1437 32.7096 23.0932L32.8068 22.7747H33.5921Z", fill: "white" }), jsx("path", { d: "M19.3395 12.7519C19.3032 12.9127 18.6632 15.8704 18.6606 15.8722C18.5219 16.4698 18.4238 16.8985 18.0824 17.1721C17.8887 17.3311 17.6623 17.4094 17.4008 17.4094C16.9808 17.4094 16.734 17.2006 16.6921 16.8035L16.6843 16.6678C16.6843 16.6678 16.8122 15.8652 16.814 15.8622C16.814 15.8622 17.486 13.1664 17.6065 12.8116C17.6117 12.7917 17.6143 12.7817 17.6169 12.7714C16.3075 12.783 16.0745 12.7714 16.0594 12.7519C16.052 12.7783 16.017 12.946 16.017 12.946L15.3299 15.9815L15.2703 16.2408L15.1579 17.0826C15.1579 17.3311 15.2072 17.536 15.3044 17.7084C15.6177 18.2564 16.511 18.3377 17.0149 18.3377C17.6662 18.3377 18.2751 18.1985 18.6874 17.9478C19.4026 17.5243 19.591 16.8614 19.7583 16.2754L19.8352 15.975C19.8352 15.975 20.5288 13.1759 20.6473 12.8116C20.6507 12.7917 20.6529 12.7817 20.6576 12.7714C19.709 12.7817 19.4298 12.7714 19.3395 12.7519Z", fill: "white" }), jsx("path", { d: "M23.1723 18.3077C22.7073 18.3012 22.5444 18.3012 22.0011 18.3289L21.98 18.2887C22.0279 18.0821 22.0794 17.8785 22.1252 17.6689L22.1917 17.3867C22.2924 16.9464 22.3909 16.4347 22.4026 16.2804C22.4121 16.1862 22.4432 15.952 22.1757 15.952C22.0625 15.952 21.9449 16.0073 21.8265 16.0613C21.7608 16.2955 21.6282 16.9515 21.5672 17.2519C21.432 17.8829 21.4233 17.9542 21.3633 18.2666L21.3244 18.3077C20.8451 18.3012 20.6796 18.3012 20.1286 18.3289L20.1026 18.283C20.1951 17.9079 20.2867 17.5298 20.3749 17.1555C20.6057 16.1395 20.6601 15.7501 20.7245 15.2337L20.7677 15.203C21.3049 15.1278 21.435 15.1131 22.0163 14.9934L22.0655 15.0483L21.9778 15.372C22.0759 15.3141 22.1688 15.2549 22.2704 15.203C22.5444 15.0682 22.8495 15.0284 23.0176 15.0284C23.2713 15.0284 23.5496 15.0997 23.6663 15.394C23.7769 15.6564 23.7039 15.9805 23.5586 16.6175L23.4835 16.9412C23.3344 17.6504 23.3102 17.78 23.2267 18.2666L23.1723 18.3077Z", fill: "white" }), jsx("path", { d: "M25.0585 18.3077C24.7793 18.3064 24.5995 18.3012 24.4232 18.3064C24.2486 18.3077 24.0779 18.3168 23.8182 18.3289L23.8026 18.3064L23.7853 18.283C23.8562 18.0142 23.8964 17.92 23.9309 17.8245C23.9664 17.7299 24.001 17.6339 24.0623 17.3612C24.1436 17.006 24.1937 16.7571 24.2296 16.5397C24.2667 16.3284 24.2879 16.1495 24.3143 15.9416L24.3359 15.9252L24.3592 15.9053C24.6371 15.866 24.8147 15.84 24.9945 15.8124C25.1769 15.786 25.3605 15.7501 25.6488 15.6957L25.66 15.7207L25.6678 15.7462C25.6142 15.9662 25.5598 16.1862 25.5075 16.41C25.4561 16.6326 25.4016 16.8513 25.3532 17.073C25.2478 17.541 25.2067 17.7148 25.1816 17.8396C25.1587 17.9589 25.1509 18.0237 25.1095 18.2666L25.0844 18.2887L25.0585 18.3077Z", fill: "white" }), jsx("path", { d: "M29.2305 16.7091C29.3935 15.9948 29.2686 15.6607 29.1091 15.4563C28.8658 15.1477 28.4397 15.0479 27.9958 15.0479C27.7301 15.0479 27.0952 15.0751 26.5987 15.5332C26.2443 15.8621 26.0779 16.3107 25.9781 16.7389C25.8782 17.175 25.7628 17.9641 26.4867 18.2567C26.7114 18.3509 27.0313 18.3777 27.2396 18.3777C27.7698 18.3777 28.3135 18.2312 28.7206 17.7982C29.0382 17.446 29.1813 16.923 29.2305 16.7091ZM28.0166 16.6573C27.9911 16.777 27.8865 17.2256 27.7426 17.4161C27.6432 17.5562 27.5252 17.6404 27.3947 17.6404C27.358 17.6404 27.1285 17.6404 27.1242 17.2999C27.1216 17.1322 27.1566 16.9576 27.1985 16.7718C27.3208 16.2307 27.4651 15.7769 27.8329 15.7769C28.1225 15.7769 28.1415 16.1145 28.0166 16.6573Z", fill: "white" }), jsx("path", { d: "M40.5855 18.3561C40.0254 18.3509 39.8642 18.3509 39.3465 18.373L39.3115 18.331C39.4532 17.7982 39.595 17.267 39.7199 16.7286C39.8819 16.0298 39.9191 15.7329 39.9736 15.324L40.0155 15.2895C40.5713 15.2095 40.726 15.1875 41.3059 15.0803L41.3241 15.1278C41.2178 15.566 41.1115 16.0047 41.0103 16.4446C40.7964 17.3664 40.7186 17.8349 40.6365 18.3163L40.5855 18.3561Z", fill: "white" }), jsx("path", { d: "M40.8523 16.7721C41.0152 16.0612 40.3601 16.7094 40.2551 16.4748C40.0943 16.1092 40.195 15.3671 39.5493 15.1195C39.3017 15.0231 38.7183 15.148 38.2204 15.6031C37.8682 15.9307 37.7005 16.3736 37.6016 16.8015C37.5013 17.2315 37.3864 18.0189 38.1063 18.3015C38.3337 18.3979 38.5424 18.4256 38.7498 18.4173C39.4741 18.378 40.0265 17.2855 40.434 16.852C40.749 16.5098 40.8043 16.9808 40.8523 16.7721ZM39.7442 16.7189C39.717 16.833 39.612 17.2868 39.4681 17.4744C39.373 17.6088 39.1466 17.6939 39.0169 17.6939C38.9802 17.6939 38.7524 17.6939 38.7442 17.3564C38.7425 17.1904 38.7775 17.0158 38.8207 16.8283C38.943 16.2989 39.0874 15.8468 39.4551 15.8468C39.7451 15.8468 39.8687 16.1761 39.7442 16.7189Z", fill: "white" }), jsx("path", { d: "M32.4031 18.3077C31.9372 18.3012 31.7795 18.3012 31.2319 18.3289L31.2125 18.2887C31.2587 18.0821 31.3114 17.8785 31.3598 17.6689L31.4251 17.3867C31.5262 16.9464 31.6243 16.4347 31.6355 16.2804C31.6446 16.1862 31.6757 15.952 31.4104 15.952C31.2954 15.952 31.1792 16.0073 31.0599 16.0613C30.9951 16.2955 30.862 16.9515 30.798 17.2519C30.6653 17.8829 30.6563 17.9542 30.5962 18.2666L30.5564 18.3077C30.0776 18.3012 29.9134 18.3012 29.3637 18.3289L29.3386 18.283C29.4302 17.9079 29.5201 17.5298 29.6083 17.1555C29.8386 16.1395 29.8935 15.7501 29.9575 15.2337L30.0007 15.203C30.5378 15.1278 30.6684 15.1131 31.2496 14.9934L31.2954 15.0483L31.2112 15.372C31.3067 15.3141 31.4039 15.2549 31.5029 15.203C31.7751 15.0682 32.0828 15.0284 32.2475 15.0284C32.502 15.0284 32.7808 15.0997 32.9005 15.394C33.0098 15.6564 32.9359 15.9805 32.7894 16.6175L32.7164 16.9412C32.5643 17.6504 32.5409 17.78 32.4605 18.2666L32.4031 18.3077Z", fill: "white" }), jsx("path", { d: "M36.9307 14.4822C36.8486 14.8504 36.6096 15.1629 36.3006 15.3137C36.0452 15.4421 35.7344 15.4516 35.4129 15.4516H35.2059L35.2215 15.369C35.2215 15.369 35.6048 13.7048 35.6031 13.71L35.6143 13.6248L35.6212 13.5591L35.7742 13.5751C35.7742 13.5751 36.5616 13.6434 36.5815 13.6456C36.8931 13.764 37.0201 14.0769 36.9307 14.4822ZM36.4276 12.7467C36.4255 12.7467 36.0417 12.7518 36.0417 12.7518C35.0378 12.7631 34.6354 12.7583 34.4703 12.7385C34.4531 12.8119 34.428 12.9424 34.428 12.9424L34.0693 14.6115C34.0693 14.6115 33.2097 18.1565 33.1687 18.3229C34.0447 18.3134 34.4042 18.3134 34.5542 18.3285C34.5883 18.1621 34.7932 17.172 34.7932 17.172C34.7932 17.172 34.9682 16.4447 34.9786 16.4179C34.9786 16.4179 35.0326 16.3436 35.0883 16.3137H35.1683C35.9233 16.3137 36.7781 16.3137 37.4462 15.8206C37.9004 15.4831 38.2138 14.9848 38.3516 14.3802C38.3888 14.2316 38.4147 14.0535 38.4147 13.8772C38.4147 13.6456 38.368 13.4161 38.2323 13.2363C37.8918 12.7583 37.2142 12.7518 36.4276 12.7467Z", fill: "white" }), jsx("path", { d: "M45.1748 15.0751L45.1303 15.0254C44.5581 15.1399 44.4535 15.1598 43.9263 15.2293L43.8865 15.2674C43.8848 15.2739 43.8831 15.2842 43.8818 15.2924L43.8792 15.2842C43.4868 16.1913 43.4993 15.9951 43.1791 16.7073C43.1769 16.6736 43.1765 16.6525 43.1756 16.6187L43.0961 15.0751L43.0455 15.0254C42.4466 15.1399 42.4306 15.1598 41.8761 15.2293L41.8316 15.2674C41.8277 15.2877 41.8264 15.3076 41.8234 15.3292L41.8277 15.3374C41.8968 15.6931 41.8809 15.6131 41.9496 16.171C41.982 16.445 42.0243 16.7225 42.0567 16.9926C42.1121 17.4463 42.1423 17.6706 42.208 18.3612C41.835 18.981 41.7447 19.2148 41.3882 19.7584L41.4072 19.8077C41.9496 19.7874 42.0745 19.7874 42.4755 19.7874L42.5641 19.6884C42.8671 19.0354 45.1748 15.0751 45.1748 15.0751Z", fill: "white" }), jsx("path", { d: "M25.5693 15.4586C25.8753 15.2447 25.9146 14.9491 25.6553 14.7957C25.3926 14.6414 24.9353 14.6898 24.6259 14.9042C24.3143 15.1151 24.2802 15.4115 24.5399 15.5662C24.8001 15.7171 25.2595 15.673 25.5693 15.4586Z", fill: "white" }), jsx("path", { d: "M42.5238 19.7429L42.0727 20.5152C41.93 20.7788 41.6651 20.9771 41.2442 20.9784L40.5255 20.9668L40.7347 20.2706H40.8738C40.9477 20.2706 41.0018 20.2658 41.0432 20.2455C41.0787 20.2343 41.105 20.2062 41.1344 20.1647L41.3993 19.7429H42.5238Z", fill: "white" })] })));
 };
 
-var CreditCard$1 = function (_a) {
+var CreditCard = function (_a) {
     var className = _a.className;
     return (jsxs("svg", __assign({ className: className, width: "60", height: "38", viewBox: "0 0 60 38", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx("rect", { x: "0.5", y: "0.5", width: "59", height: "37", rx: "7.5", fill: "white", stroke: "#D3D3D3" }), jsx("path", { d: "M1 10L59 10", stroke: "#D3D3D3", "stroke-width": "7" }), jsx("path", { d: "M5 20H34", stroke: "#D3D3D3", "stroke-width": "2", "stroke-linecap": "round" }), jsx("path", { d: "M5 27H25", stroke: "#D3D3D3", "stroke-width": "2", "stroke-linecap": "round" }), jsx("rect", { x: "46", y: "21", width: "10", height: "7", rx: "2", fill: "#D9D9D9" })] })));
 };
@@ -785,26 +866,10 @@ var Visa = function (_a) {
     return (jsxs("svg", __assign({ className: className, width: "70", height: "48", viewBox: "0 0 70 48", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx("rect", { x: "0.5", y: "0.5", width: "69", height: "47", rx: "5.5", fill: "white", stroke: "#D9D9D9" }), jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M21.2505 32.5165H17.0099L13.8299 20.3847C13.679 19.8267 13.3585 19.3333 12.8871 19.1008C11.7106 18.5165 10.4142 18.0514 9 17.8169V17.3498H15.8313C16.7742 17.3498 17.4813 18.0514 17.5991 18.8663L19.2491 27.6173L23.4877 17.3498H27.6104L21.2505 32.5165ZM29.9675 32.5165H25.9626L29.2604 17.3498H33.2653L29.9675 32.5165ZM38.4467 21.5514C38.5646 20.7346 39.2717 20.2675 40.0967 20.2675C41.3931 20.1502 42.8052 20.3848 43.9838 20.9671L44.6909 17.7016C43.5123 17.2345 42.216 17 41.0395 17C37.1524 17 34.3239 19.1008 34.3239 22.0165C34.3239 24.2346 36.3274 25.3992 37.7417 26.1008C39.2717 26.8004 39.861 27.2675 39.7431 27.9671C39.7431 29.0165 38.5646 29.4836 37.3881 29.4836C35.9739 29.4836 34.5596 29.1338 33.2653 28.5494L32.5582 31.8169C33.9724 32.3992 35.5025 32.6338 36.9167 32.6338C41.2752 32.749 43.9838 30.6502 43.9838 27.5C43.9838 23.5329 38.4467 23.3004 38.4467 21.5514ZM58 32.5165L54.82 17.3498H51.4044C50.6972 17.3498 49.9901 17.8169 49.7544 18.5165L43.8659 32.5165H47.9887L48.8116 30.3004H53.8772L54.3486 32.5165H58ZM51.9936 21.4342L53.1701 27.1502H49.8723L51.9936 21.4342Z", fill: "#172B85" })] })));
 };
 
-var LargeCardIcon = function () {
-    return (jsx("svg", __assign({ width: "72", height: "56", viewBox: "0 0 72 56", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: jsx("path", { d: "M8 0H64C68.375 0 72 3.625 72 8V12H0V8C0 3.625 3.5 0 8 0ZM72 24V48C72 52.5 68.375 56 64 56H8C3.5 56 0 52.5 0 48V24H72ZM14 40C12.875 40 12 41 12 42C12 43.125 12.875 44 14 44H22C23 44 24 43.125 24 42C24 41 23 40 22 40H14ZM28 42C28 43.125 28.875 44 30 44H46C47 44 48 43.125 48 42C48 41 47 40 46 40H30C28.875 40 28 41 28 42Z", fill: "#E2E8F0" }) })));
-};
-
-var PlusIcon = function (_a) {
-    var color = _a.color;
-    return (jsxs("svg", __assign({ width: "14", height: "15", viewBox: "0 0 14 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx("path", { d: "M2.9165 7.5H11.0832", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M7 3.41663V11.5833", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] })));
-};
-
-var Text$o = Typography.Text;
-var CreditCard = function (_a) {
-    var _b;
-    var onClickRemove = _a.onClickRemove, onClickUpdate = _a.onClickUpdate, paymentMethodData = _a.paymentMethodData, _c = _a.shadow, shadow = _c === void 0 ? "shadow-md" : _c, _d = _a.cardEnabled, cardEnabled = _d === void 0 ? true : _d;
-    var isMobile = useIsMobile();
-    var Wrapper = cardEnabled ? Card : "div";
-    return (jsxs(Wrapper, __assign({ className: "".concat(cardEnabled ? shadow : "", " m-0") }, { children: [jsxs("div", __assign({ className: "flex items-center justify-between gap-4 p-4" }, { children: [jsxs("div", __assign({ className: "flex items-center gap-4" }, { children: [jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [jsx(CardImage, { paymentMethodData: paymentMethodData }), jsx(Text$o, { children: (_b = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _b === void 0 ? void 0 : _b.identifier })] })), jsx(CustomizedTag, __assign({ color: isExpired(paymentMethodData) ? "red" : "green" }, { children: isExpired(paymentMethodData) ? "Expired" : "Valid" }))] })), !isMobile && (jsx(CardActions, { onClickRemove: onClickRemove, onClickUpdate: onClickUpdate }))] })), dayjs(paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.expirationDate).isValid() && (jsxs(Fragment, { children: [jsx(Divider, {}), jsxs("div", __assign({ className: "flex flex-col p-4" }, { children: [jsx(CardAttribute, { title: "EXPIRATION", value: expirationDate(paymentMethodData) }), isMobile && (jsx(CardActions, { onClickRemove: onClickRemove, onClickUpdate: onClickUpdate }))] }))] }))] })));
-};
+var Text$p = Typography.Text;
 var MiniCreditCard = function (_a) {
     var _b, _c;
-    var _d = _a.hideRemoveButton, hideRemoveButton = _d === void 0 ? false : _d, onClickRemove = _a.onClickRemove, paymentMethodData = _a.paymentMethodData;
+    var _d = _a.hideDropdownMenu, hideDropdownMenu = _d === void 0 ? false : _d, onClickRemove = _a.onClickRemove, paymentMethodData = _a.paymentMethodData, onClickSetDefault = _a.onClickSetDefault, id = _a.id;
     var darkMode = useContext(BunnyContext).darkMode;
     var borderColor = useMemo(function () {
         return darkMode ? "border-slate-700" : "border-slate-200";
@@ -815,14 +880,37 @@ var MiniCreditCard = function (_a) {
     function capitalize(str) {
         return str.charAt(0).toUpperCase() + str.slice(1);
     }
-    return (jsx("div", __assign({ className: "flex flex-row justify-between items-center p-1 px-3 border-solid ".concat(backgroundColor, " ").concat(borderColor, " rounded-md border") }, { children: paymentMethodData ? (jsxs(Fragment, { children: [jsx("div", __assign({ className: "flex flex-row gap-4" }, { children: jsxs("div", __assign({ className: "flex items-center gap-2 space-between w-full" }, { children: [jsx(CardImage, { paymentMethodData: paymentMethodData }), jsx(Text$o, { children: capitalize((_b = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _b === void 0 ? void 0 : _b.issuer) }), jsxs("div", { children: [jsx(Text$o, __assign({ className: "relative -top-0.5" }, { children: "****" })), jsx(Text$o, { children: (_c = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _c === void 0 ? void 0 : _c.identifier })] })] })) })), !hideRemoveButton && (jsx(Popconfirm, __assign({ title: "Remove card?", onConfirm: onClickRemove }, { children: jsx(Button, __assign({ className: "font-normal p-0", type: "link" }, { children: "Remove" })) })))] })) : (jsxs("div", __assign({ className: "flex flex-row gap-2 items-center" }, { children: [jsx(CreditCardOutlined, {}), jsx(Text$o, __assign({ className: "text-slate-400", style: { fontSize: "12px" } }, { children: "No payment method selected" })), jsx(Button, { disabled: true, type: "link" })] }))) })));
+    var isDefault = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.isDefault;
+    return (jsx("div", __assign({ className: "flex flex-row justify-between items-center p-1 px-3 border-solid ".concat(backgroundColor, " ").concat(borderColor, " rounded-md border"), id: id }, { children: paymentMethodData ? (jsxs(Fragment, { children: [jsx("div", __assign({ className: "flex flex-row gap-4" }, { children: jsxs("div", __assign({ className: "flex items-center gap-2 space-between w-full" }, { children: [jsx(CardImage, { paymentMethodData: paymentMethodData }), jsx(Text$p, { children: capitalize((_b = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _b === void 0 ? void 0 : _b.issuer) }), jsxs("div", { children: [jsx(Text$p, __assign({ className: "relative -top-0.5" }, { children: "****" })), jsx(Text$p, { children: (_c = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _c === void 0 ? void 0 : _c.identifier })] }), jsx("div", { children: isDefault ? (jsx(Tag, __assign({ bordered: false, color: "blue" }, { children: "Default" }))) : null })] })) })), !hideDropdownMenu && (jsx(DropdownMenu, { setDefault: onClickSetDefault, remove: onClickRemove, isDefault: isDefault !== null && isDefault !== void 0 ? isDefault : false, id: "credit-card-dropdown-".concat(paymentMethodData.id) }))] })) : (jsxs("div", __assign({ className: "flex flex-row gap-2 items-center" }, { children: [jsx(CreditCardOutlined, {}), jsx(Text$p, __assign({ className: "text-slate-400", style: { fontSize: "12px" } }, { children: "No payment methods" })), jsx(Button, { disabled: true, type: "link" })] }))) })));
+};
+var DropdownMenu = function (_a) {
+    var setDefault = _a.setDefault, remove = _a.remove, isDefault = _a.isDefault, id = _a.id;
+    // Define the menu items
+    var items = [
+        {
+            key: "1",
+            label: "Remove",
+            onClick: function () {
+                remove();
+            },
+        },
+        {
+            key: "2",
+            label: "Set as default",
+            onClick: function () {
+                setDefault();
+            },
+            disabled: isDefault,
+        },
+    ];
+    return (jsx(Dropdown, __assign({ menu: { items: items }, trigger: ["click"] }, { children: jsx("a", __assign({ onClick: function (e) { return e.preventDefault(); }, id: id, className: "cursor-pointer hover:bg-gray-100 rounded-md p-1" }, { children: jsx(EllipsisOutlined, { style: { fontSize: "20px" } }) })) })));
 };
 var CardImage = function (_a) {
     var _b;
     var paymentMethodData = _a.paymentMethodData;
     var issuer = (_b = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _b === void 0 ? void 0 : _b.issuer;
     var className = "w-12 h-8";
-    switch (issuer) {
+    switch (issuer.toLowerCase()) {
         case "visa":
             return jsx(Visa, { className: className });
         case "mastercard":
@@ -842,30 +930,9 @@ var CardImage = function (_a) {
         case "china_unionpay":
             return jsx(ChinaUnionPay, { className: className });
         default:
-            return jsx(CreditCard$1, { className: className });
+            return jsx(CreditCard, { className: className });
     }
 };
-var CardAttribute = function (_a) {
-    var title = _a.title, value = _a.value;
-    return (jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsx("div", __assign({ className: "text-slate-400", style: { fontSize: "11px" } }, { children: title })), jsx(Text$o, { children: value })] })));
-};
-var CardActions = function (_a) {
-    var onClickRemove = _a.onClickRemove, onClickUpdate = _a.onClickUpdate;
-    var isMobile = useIsMobile();
-    return (jsxs("div", __assign({ className: "flex items-center gap-6 ".concat(isMobile ? "justify-center mt-4" : "") }, { children: [jsx(Popconfirm, __assign({ title: "Remove card?", onConfirm: onClickRemove }, { children: jsx(Button, __assign({ className: "font-normal p-0", type: "link" }, { children: "Remove payment method" })) })), jsx(Divider, { style: { height: "24px" }, type: "vertical" }), jsx(Button, __assign({ onClick: onClickUpdate, type: "primary" }, { children: "Update" }))] })));
-};
-var EmptyCard = function (_a) {
-    var onClick = _a.onClick, _b = _a.shadow, shadow = _b === void 0 ? "shadow-md" : _b, _c = _a.cardEnabled, cardEnabled = _c === void 0 ? true : _c;
-    var brandColor = useContext(BrandContext).brandColor;
-    return (jsxs("div", __assign({ className: "flex flex-col items-center justify-center w-full pt-8 px-4 pb-6 cursor-pointer ".concat(cardEnabled ? "bg-white ".concat(shadow, " rounded-md") : ""), onClick: onClick }, { children: [jsx(LargeCardIcon, {}), jsx("div", __assign({ className: "text-slate-400 pt-4 pb-8" }, { children: "No payment methods" })), jsx(Button, __assign({ type: "link", id: "openAddPaymentMethodDrawer" }, { children: jsxs("div", __assign({ className: "flex items-center gap-1" }, { children: [jsx(PlusIcon, { color: brandColor }), "Add payment method"] })) }))] })));
-};
-var isExpired = function (paymentMethodData) {
-    var expDate = dayjs(paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.expirationDate);
-    return expDate.isBefore(dayjs());
-};
-var expirationDate = function (storedPaymentMethod) {
-    return dayjs(storedPaymentMethod === null || storedPaymentMethod === void 0 ? void 0 : storedPaymentMethod.expirationDate).format("MM/YY");
-};
 
 var SavePaymentMethodFooter = function (_a) {
     var isSaving = _a.isSaving, onSave = _a.onSave, noPadding = _a.noPadding;
@@ -1028,7 +1095,7 @@ function useSave$1(_a) {
     return { save: save, isSaving: isSaving };
 }
 
-var Text$n = Typography.Text;
+var Text$o = Typography.Text;
 var TEST_CARD = "4242424242424242";
 var DemoPayForm = function (_a) {
     var onFail = _a.onFail, onSavePaymentMethod = _a.onSavePaymentMethod, plugin = _a.plugin;
@@ -1089,7 +1156,7 @@ var DemoPayForm = function (_a) {
     var onCardCvcChange = function (cvc) {
         setCardDetails(__assign(__assign({}, cardDetails), { cvc: cvc }));
     };
-    return (jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsxs(StyledInputs, __assign({ className: "flex flex-col gap-2", darkMode: darkMode !== null && darkMode !== void 0 ? darkMode : false }, { children: [jsx(DemoPayCardNumber, { onChange: onCardNumberChange, value: cardDetails.number }), jsxs("div", __assign({ className: "flex gap-2" }, { children: [jsx(DemoPayExpiry, { onChange: onCardExpiryChange, value: cardDetails.expiry }), jsx(DemoPayCardCvc, { onChange: onCardCvcChange, value: cardDetails.cvc })] }))] })), jsx(Text$n, { children: "DemoPay is for testing only." }), jsx(SavePaymentMethodFooter, { isSaving: isSaving, onSave: onSave })] })));
+    return (jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsxs(StyledInputs, __assign({ className: "flex flex-col gap-2", darkMode: darkMode !== null && darkMode !== void 0 ? darkMode : false }, { children: [jsx(DemoPayCardNumber, { onChange: onCardNumberChange, value: cardDetails.number }), jsxs("div", __assign({ className: "flex gap-2" }, { children: [jsx(DemoPayExpiry, { onChange: onCardExpiryChange, value: cardDetails.expiry }), jsx(DemoPayCardCvc, { onChange: onCardCvcChange, value: cardDetails.cvc })] }))] })), jsx(Text$o, { children: "DemoPay is for testing only." }), jsx(SavePaymentMethodFooter, { isSaving: isSaving, onSave: onSave })] })));
 };
 var StyledInputs = defaultStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  .ant-input {\n    background-color: ", " !important;\n  }\n  .ant-input:not(:focus) {\n    border-color: ", " !important;\n  }\n"], ["\n  .ant-input {\n    background-color: ", " !important;\n  }\n  .ant-input:not(:focus) {\n    border-color: ", " !important;\n  }\n"])), function (_a) {
     var darkMode = _a.darkMode;
@@ -1308,20 +1375,17 @@ var StripeForm = function (_a) {
 
 var PaymentMethodDetails = function (_a) {
     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;
-    switch ((_c = (_b = paymentMethod.components) === null || _b === void 0 ? void 0 : _b.frontend) === null || _c === void 0 ? void 0 : _c[0].name) {
+    var onFail = _a.onFail, plugin = _a.plugin, onSavePaymentMethod = _a.onSavePaymentMethod, customPaymentForms = _a.customPaymentForms;
+    switch ((_c = (_b = plugin.components) === null || _b === void 0 ? void 0 : _b.frontend) === null || _c === void 0 ? void 0 : _c[0].name) {
         case "StripePayment":
-            return (jsx(StripeForm, { onFail: onFail, onSavePaymentMethod: onSavePaymentMethod, plugin: paymentMethod }));
+            return (jsx(StripeForm, { onFail: onFail, onSavePaymentMethod: onSavePaymentMethod, plugin: plugin }));
         case "DemoPayPayment":
-            return (jsx(DemoPayForm, { onFail: onFail, onSavePaymentMethod: onSavePaymentMethod, plugin: paymentMethod }));
+            return (jsx(DemoPayForm, { onFail: onFail, onSavePaymentMethod: onSavePaymentMethod, plugin: plugin }));
         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] }));
+                ((_e = (_d = plugin.components) === null || _d === void 0 ? void 0 : _d.frontend) === null || _e === void 0 ? void 0 : _e[0].name) &&
+                customPaymentForms[(_g = (_f = plugin.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 = plugin.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" });
     }
@@ -1331,7 +1395,7 @@ var CardIcon = function () {
     return (jsxs("svg", __assign({ width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx("path", { d: "M15 3.75H3C2.17157 3.75 1.5 4.42157 1.5 5.25V12.75C1.5 13.5784 2.17157 14.25 3 14.25H15C15.8284 14.25 16.5 13.5784 16.5 12.75V5.25C16.5 4.42157 15.8284 3.75 15 3.75Z", stroke: SLATE_400, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M1.5 7.5H16.5", stroke: SLATE_400, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] })));
 };
 
-var Text$m = Typography.Text;
+var Text$n = Typography.Text;
 var PaymentMethodSelector = function (_a) {
     var paymentMethodAllowedPlugins = _a.paymentMethodAllowedPlugins, onSelect = _a.onSelect, value = _a.value;
     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)); }) })));
@@ -1344,7 +1408,7 @@ var PaymentOption = function (_a) {
     var isCard = name === null || name === void 0 ? void 0 : name.toLowerCase().includes("card");
     return (jsxs(PaymentOptionContainer, __assign({ "$brandColor": brandColor, "$selected": selected, className: "flex justify-between items-center w-full cursor-pointer py-2 px-4 rounded border-solid ".concat(darkMode
             ? "var(--row-background-dark) border-gray-500"
-            : "bg-slate-50 border-slate-200", " border"), onClick: function () { return onClick(paymentPlugin); } }, { children: [jsxs("div", __assign({ className: "flex gap-2 items-center" }, { children: [jsx(Checkbox, { checked: selected, className: darkMode ? "border-gray-400" : "" }), jsx(Text$m, { children: name })] })), isAch ? (jsx(BankOutlined, { className: "text-slate-400" })) : isCard ? (jsx(CardIcon, {})) : (jsx(CardIcon, {}))] })));
+            : "bg-slate-50 border-slate-200", " border"), onClick: function () { return onClick(paymentPlugin); } }, { children: [jsxs("div", __assign({ className: "flex gap-2 items-center" }, { children: [jsx(Checkbox, { checked: selected, className: darkMode ? "border-gray-400" : "" }), jsx(Text$n, { children: name })] })), isAch ? (jsx(BankOutlined, { className: "text-slate-400" })) : isCard ? (jsx(CardIcon, {})) : (jsx(CardIcon, {}))] })));
 };
 var PaymentOptionContainer = defaultStyled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n  transition: border 0.3s ease;\n\n  ", "\n\n  &:hover {\n    border-color: ", ";\n  }\n"], ["\n  transition: border 0.3s ease;\n\n  ", "\n\n  &:hover {\n    border-color: ", ";\n  }\n"])), function (_a) {
     var $brandColor = _a.$brandColor, $selected = _a.$selected;
@@ -1356,7 +1420,7 @@ var PaymentOptionContainer = defaultStyled.div(templateObject_1$9 || (templateOb
 });
 var templateObject_1$9;
 
-function useRemovePaymentMethod(paymentPlugins, apiHost, token, accountId) {
+function useRemovePaymentMethod(paymentPlugins, apiHost, token, accountId, onRemovePaymentMethod) {
     var _this = this;
     var queryClient = useQueryClient();
     var showErrorNotification = useErrorNotification();
@@ -1380,10 +1444,14 @@ function useRemovePaymentMethod(paymentPlugins, apiHost, token, accountId) {
                         })
                             .then(function () {
                             showSuccessNotification("Payment method was removed", "Success");
-                            queryClient.setQueryData(QueryKeyFactory.default.accountPaymentMethodKey({
-                                token: token,
-                                accountId: accountId,
-                            }), null);
+                            // TODO: rename accountPaymentMethodKey to accountPaymentMethodsKey (pluralized)
+                            queryClient.invalidateQueries({
+                                queryKey: QueryKeyFactory.default.accountPaymentMethodKey({
+                                    token: token,
+                                    accountId: accountId,
+                                }),
+                            });
+                            onRemovePaymentMethod === null || onRemovePaymentMethod === void 0 ? void 0 : onRemovePaymentMethod();
                         })
                             .catch(function (error) {
                             showErrorNotification(error.message, "Error removing payment method");
@@ -1398,62 +1466,104 @@ function useRemovePaymentMethod(paymentPlugins, apiHost, token, accountId) {
     return removePaymentMethod;
 }
 
+function useSetDefaultPaymentMethod(paymentPlugins, apiHost, token, accountId) {
+    var _this = this;
+    var queryClient = useQueryClient();
+    var showErrorNotification = useErrorNotification();
+    var showSuccessNotification = useSuccessNotification();
+    var _a = useState(false), loading = _a[0], setLoading = _a[1];
+    var setDefaultPaymentMethod = useCallback(function (data) { return __awaiter(_this, void 0, void 0, function () {
+        var plugin;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    plugin = paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.find(function (paymentPlugin) { var _a; return String(paymentPlugin.id) === ((_a = data === null || data === void 0 ? void 0 : data.plugin) === null || _a === void 0 ? void 0 : _a.id); });
+                    if (!(data && plugin)) return [3 /*break*/, 2];
+                    setLoading(true);
+                    return [4 /*yield*/, invokePlugin({
+                            plugin: plugin,
+                            method: "assign_default_payment_method",
+                            payload: {
+                                payment_method_id: data.id,
+                                account_id: accountId,
+                            },
+                            token: token,
+                            apiHost: apiHost,
+                        })
+                            .then(function () {
+                            showSuccessNotification("Payment method ".concat(data.metadata.identifier, " was set as default"), "Success");
+                            // TODO: rename accountPaymentMethodKey to accountPaymentMethodsKey (pluralized)
+                            queryClient.invalidateQueries({
+                                queryKey: QueryKeyFactory.default.accountPaymentMethodKey({
+                                    token: token,
+                                    accountId: accountId,
+                                }),
+                            });
+                        })
+                            .catch(function (error) {
+                            setLoading(false);
+                            showErrorNotification(error.message, "Error removing payment method");
+                        })
+                            .finally(function () {
+                            setLoading(false);
+                        })];
+                case 1:
+                    _a.sent();
+                    _a.label = 2;
+                case 2: return [2 /*return*/];
+            }
+        });
+    }); }, [paymentPlugins, token, apiHost, queryClient]);
+    return { setDefaultPaymentMethod: setDefaultPaymentMethod, loading: loading };
+}
+
 var Panel = Collapse.Panel;
 var PaymentForm = function (_a) {
     var _b;
-    var 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, _c = _a.useAllPaymentPlugins, useAllPaymentPlugins = _c === void 0 ? false : _c;
+    var invoice = _a.invoice, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, quote = _a.quote, accountId = _a.accountId, onSavePaymentMethod = _a.onSavePaymentMethod, onRemovePaymentMethod = _a.onRemovePaymentMethod, overrideToken = _a.overrideToken, customCheckoutFunction = _a.customCheckoutFunction, currencyIdFromProps = _a.currencyId, customPaymentForms = _a.customPaymentForms, _c = _a.useAllPaymentPlugins, useAllPaymentPlugins = _c === void 0 ? false : _c;
     // Local state
-    var _d = useState(), selectedPaymentMethod = _d[0], setSelectedPaymentMethod = _d[1];
-    var _e = useState(false), showPaymentMethodForm = _e[0], setShowPaymentMethodForm = _e[1];
-    var paying = !!(quote || invoice);
-    var currencyId = (_b = ((quote === null || quote === void 0 ? void 0 : quote.currencyId) ||
-        (invoice === null || invoice === void 0 ? void 0 : invoice.currencyId) ||
-        currencyIdFromProps)) === null || _b === void 0 ? void 0 : _b.toLowerCase();
-    // Hooks
+    var _d = useState(false), showPaymentMethodForm = _d[0], setShowPaymentMethodForm = _d[1];
+    // Simple hooks
+    var queryClient = useQueryClient();
     var apiHost = useContext(BunnyContext).apiHost;
     var tokenFromContexts = useToken();
     var token = overrideToken || tokenFromContexts;
-    var _f = usePaymentMethod({
+    var _e = usePaymentMethod({
         accountId: accountId,
-        graphQLClient: graphQLClient,
         token: token,
-    }), storedPaymentMethod = _f.data, isPaymentMethodLoading = _f.isLoading;
-    var isPaymentMethodFetched = storedPaymentMethod !== undefined;
-    var _g = usePaymentPlugins({ apiHost: apiHost, token: token }), allPaymentMethodAllowedPlugins = _g.paymentMethodAllowedPlugins, allPaymentPlugins = _g.paymentPlugins, arePluginsFetched = _g.isFetched;
+        apiHost: apiHost,
+    }), storedPaymentMethods = _e.paymentMethods, defaultPaymentMethod = _e.defaultPaymentMethod, isPaymentMethodLoading = _e.isLoading;
+    // Complex hooks
+    var _f = usePaymentPlugins({ apiHost: apiHost, token: token }), allPaymentMethodAllowedPlugins = _f.paymentMethodAllowedPlugins, allPaymentPlugins = _f.paymentPlugins;
     var paymentMethodAllowedPlugins = useMemo(function () {
         if (useAllPaymentPlugins) {
             return allPaymentPlugins;
         }
         return allPaymentMethodAllowedPlugins;
     }, [allPaymentMethodAllowedPlugins, allPaymentPlugins, useAllPaymentPlugins]);
-    var onClickRemove = useRemovePaymentMethod(paymentMethodAllowedPlugins || [], apiHost, token, accountId);
-    var queryClient = useQueryClient();
-    // Set default plugin
-    useEffect(function () {
-        if (!arePluginsFetched ||
-            !isPaymentMethodFetched ||
-            selectedPaymentMethod) {
-            return;
-        }
-        var pluginPaymentMethod = paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins.find(function (plugin) { var _a, _b, _c; return ((_a = plugin.id) === null || _a === void 0 ? void 0 : _a.toString()) === ((_c = (_b = storedPaymentMethod === null || storedPaymentMethod === void 0 ? void 0 : storedPaymentMethod.plugin) === null || _b === void 0 ? void 0 : _b.id) === null || _c === void 0 ? void 0 : _c.toString()); });
-        if (pluginPaymentMethod) {
-            setSelectedPaymentMethod(pluginPaymentMethod);
-        }
-        else if (paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins[0]) {
-            setSelectedPaymentMethod(paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins[0]);
-        }
-    }, [
-        arePluginsFetched,
-        isPaymentMethodFetched,
-        paymentMethodAllowedPlugins,
-        selectedPaymentMethod,
-        setSelectedPaymentMethod,
-        storedPaymentMethod,
-    ]);
-    var showPaymentMethodSelector = useMemo(function () {
-        var pluginCount = (paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins.length) || 0;
-        return pluginCount > 1;
-    }, [paymentMethodAllowedPlugins]);
+    var selectedPaymentMethodPlugin = useMemo(function () {
+        return paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins.find(function (plugin) { var _a, _b, _c; return ((_a = plugin.id) === null || _a === void 0 ? void 0 : _a.toString()) === ((_c = (_b = defaultPaymentMethod === null || defaultPaymentMethod === void 0 ? void 0 : defaultPaymentMethod.plugin) === null || _b === void 0 ? void 0 : _b.id) === null || _c === void 0 ? void 0 : _c.toString()); });
+    }, [paymentMethodAllowedPlugins, defaultPaymentMethod]);
+    // Derived state
+    var defaultPaymentMethodPlugin = paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins.find(function (plugin) { var _a, _b, _c; return ((_a = plugin.id) === null || _a === void 0 ? void 0 : _a.toString()) === ((_c = (_b = defaultPaymentMethod === null || defaultPaymentMethod === void 0 ? void 0 : defaultPaymentMethod.plugin) === null || _b === void 0 ? void 0 : _b.id) === null || _c === void 0 ? void 0 : _c.toString()); });
+    var paying = !!(quote || invoice);
+    var currencyId = (_b = ((quote === null || quote === void 0 ? void 0 : quote.currencyId) ||
+        (invoice === null || invoice === void 0 ? void 0 : invoice.currencyId) ||
+        currencyIdFromProps)) === null || _b === void 0 ? void 0 : _b.toLowerCase();
+    // Custom hooks
+    var _g = useSetDefaultPaymentMethod(paymentMethodAllowedPlugins || [], apiHost, token, accountId), handleSetDefault = _g.setDefaultPaymentMethod, setDefaultPaymentMethodLoading = _g.loading;
+    useAutoSetDefaultPaymentMethod({
+        accountId: accountId,
+        token: token,
+        handleSetDefault: handleSetDefault,
+        setDefaultPaymentMethodLoading: setDefaultPaymentMethodLoading,
+    });
+    var _h = usePaymentMethodSelectorPlugin({
+        defaultPaymentMethod: defaultPaymentMethod,
+        defaultPaymentMethodPlugin: defaultPaymentMethodPlugin,
+        paymentMethodAllowedPlugins: paymentMethodAllowedPlugins,
+    }), selectorPaymentMethodPlugin = _h.selectorPaymentMethodPlugin, setSelectorPaymentMethodPlugin = _h.setSelectorPaymentMethodPlugin;
+    var onClickRemove = useRemovePaymentMethod(paymentMethodAllowedPlugins || [], apiHost, token, accountId, onRemovePaymentMethod);
     var handlePaymentSuccess = function () {
         // Hide payment method selector and form
         setShowPaymentMethodForm(false);
@@ -1476,13 +1586,12 @@ var PaymentForm = function (_a) {
             onClickCancel: function () { return setShowPaymentMethodForm(false); },
             accountId: accountId,
             overrideToken: overrideToken,
-            storedPaymentMethod: storedPaymentMethod,
+            storedPaymentMethods: storedPaymentMethods,
+            defaultPaymentMethod: defaultPaymentMethod,
             customCheckoutFunction: customCheckoutFunction,
-        } }, { children: jsx(StripeWrapper, __assign({ plugin: selectedPaymentMethod, token: token, apiHost: apiHost, currencyId: currencyId, accountId: accountId }, { children: jsx("div", __assign({ className: "flex flex-col gap-0 w-full" }, { children: jsxs(Fragment, { children: [jsx("div", __assign({ className: "px-4" }, { children: jsx(MiniCreditCard, { onClickRemove: function () { return onClickRemove(storedPaymentMethod); }, paymentMethodData: storedPaymentMethod }) })), paying && storedPaymentMethod ? (jsx("div", __assign({ className: "px-4" }, { children: jsx(CheckoutFooter, { quote: quote, invoice: invoice, onPaymentSuccess: handlePaymentSuccess, plugin: selectedPaymentMethod }) }))) : (
-                        //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 () {
+        } }, { children: jsx(StripeWrapper, __assign({ plugin: selectorPaymentMethodPlugin, token: token, apiHost: apiHost, currencyId: currencyId, accountId: accountId }, { children: jsx("div", __assign({ className: "flex flex-col gap-0 w-full" }, { children: jsxs(Fragment, { children: [jsxs("div", __assign({ className: "flex flex-col gap-2 px-4" }, { children: [storedPaymentMethods === null || storedPaymentMethods === void 0 ? void 0 : storedPaymentMethods.map(function (paymentMethod) { return (jsx(MiniCreditCard, { onClickRemove: function () { return onClickRemove(paymentMethod); }, onClickSetDefault: function () { return handleSetDefault(paymentMethod); }, paymentMethodData: paymentMethod, id: "payment-method-".concat(paymentMethod.id) }, paymentMethod.id)); }), (storedPaymentMethods === null || storedPaymentMethods === void 0 ? void 0 : storedPaymentMethods.length) === 0 && (jsx(MiniCreditCard, { onClickRemove: function () { }, onClickSetDefault: function () { } }))] })), 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: jsx(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, customPaymentForms: customPaymentForms }) }))] }))) : (jsx("div", { children: "No payment method selected" })) }) }), "1") })))] }) })) })) })));
+                                            }, type: "default", className: "w-full", id: "addPaymentMethod" }, { children: "Add payment method" })) }))) : null }), showArrow: false }, { children: jsxs("div", __assign({ className: "flex flex-col gap-2 mt-2" }, { children: [jsx(PaymentMethodSelector, { onSelect: setSelectorPaymentMethodPlugin, paymentMethodAllowedPlugins: paymentMethodAllowedPlugins, value: selectorPaymentMethodPlugin }), selectorPaymentMethodPlugin && (jsx("div", __assign({ className: "flex flex-col" }, { children: jsx(PaymentMethodDetails, { onFail: onFail, onSavePaymentMethod: handleSavePaymentMethod, plugin: selectorPaymentMethodPlugin, customPaymentForms: customPaymentForms }) })))] })) }), "1") })), paying ? (jsx(Fragment, { children: defaultPaymentMethod ? (jsx("div", __assign({ className: "px-4" }, { children: jsx(CheckoutFooter, { quote: quote, invoice: invoice, onPaymentSuccess: handlePaymentSuccess, plugin: selectedPaymentMethodPlugin }) }))) : null })) : null] }) })) })) })));
 };
 function StripeWrapper(_a) {
     var children = _a.children, plugin = _a.plugin, token = _a.token, apiHost = _a.apiHost, currencyId = _a.currencyId, accountId = _a.accountId;
@@ -1509,7 +1618,7 @@ function ActualInvoice() {
     // Context
     var queryClient = useQueryClient();
     var _a = useContext(InvoiceQuoteContext), id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, onPaymentSuccess = _a.onPaymentSuccess, className = _a.className;
-    var _b = useContext(BunnyContext), apiHost = _b.apiHost, onTokenExpired = _b.onTokenExpired, graphQLClient = _b.graphQLClient;
+    var _b = useContext(BunnyContext), apiHost = _b.apiHost, onTokenExpired = _b.onTokenExpired; _b.graphQLClient;
     var _c = useContext(InvoiceQuoteContext), hideDownloadButton = _c.hideDownloadButton, onInvoiceLoaded = _c.onInvoiceLoaded;
     var token = useToken();
     // Hooks
@@ -1547,10 +1656,10 @@ function ActualInvoice() {
     }, [formattedInvoice]);
     if (!formattedInvoice)
         return jsx(Fragment, {});
-    return (jsx("div", __assign({ className: "bunny-invoice-container" }, { children: jsxs("div", __assign({ className: "flex gap-6 ".concat(isMobile ? "flex-col w-full overflow-hidden" : "", " ").concat(className) }, { children: [formattedInvoice.isLegacy ? (jsx("div", __assign({ className: "flex justify-center w-full" }, { children: jsx(InvoicePDF, { invoiceUuid: formattedInvoice.uuid, apiHost: apiHost, token: token }) }))) : (invoiceQuoteViewComponent || (jsx(InvoiceQuoteView, { html: formattedInvoice.html, formattedInvoice: formattedInvoice, backButtonName: backButtonName, onBackButtonClick: onBackButtonClick }))), isInvoicePayable && (jsx("div", __assign({ className: "w-full ".concat(hideDownloadButton || formattedInvoice.isLegacy ? "" : "pt-12") }, { children: jsx(PaymentForm, { onPaymentSuccess: onSuccess, onFail: onFail, invoice: formattedInvoice, graphQLClient: graphQLClient }) })))] })) })));
+    return (jsx("div", __assign({ className: "bunny-invoice-container" }, { children: jsxs("div", __assign({ className: "flex gap-6 ".concat(isMobile ? "flex-col w-full overflow-hidden" : "", " ").concat(className) }, { children: [formattedInvoice.isLegacy ? (jsx("div", __assign({ className: "flex justify-center w-full" }, { children: jsx(InvoicePDF, { invoiceUuid: formattedInvoice.uuid, apiHost: apiHost, token: token }) }))) : (invoiceQuoteViewComponent || (jsx(InvoiceQuoteView, { html: formattedInvoice.html, formattedInvoice: formattedInvoice, backButtonName: backButtonName, onBackButtonClick: onBackButtonClick }))), isInvoicePayable && (jsx("div", __assign({ className: "w-full ".concat(hideDownloadButton || formattedInvoice.isLegacy ? "" : "pt-12") }, { children: jsx(PaymentForm, { onPaymentSuccess: onSuccess, onFail: onFail, invoice: formattedInvoice }) })))] })) })));
 }
 
-var MUTATION$7 = function (id) { return "\n  query formattedQuote ($id: ID) {\n    formattedQuote (id: $id) {\n      payableId\n      acceptedAt\n      acceptedByName\n      amount\n      amountDue\n      amountsByPeriod {\n        id\n        name\n        amount\n      }\n      object { documents { id filename size date url } }\n      billingCity\n      billingCountry\n      billingState\n      billingStreet\n      billingZip\n      contactName\n      currency\n      customerBillingCity\n      customerBillingCountry\n      customerBillingState\n      customerBillingStreet\n      customerBillingZip\n      customerName\n      discount\n      discountValue\n      duration\n      endDate\n      expiresAt\n      html\n      formattedLines {\n        amount\n        amountsByPeriod {\n          quantity\n          id\n          name\n          startDate\n          endDate\n          amount\n          amountsByTier {\n            id\n            tier {\n              starts\n              ends\n              price\n            }\n            quantity\n            amount\n          }\n          prorationRate\n        }\n        billingPeriodEnd\n        billingPeriodStart\n        chargeType\n        discount\n        frequency\n        isRamp\n        periods\n        planName\n        position\n        price\n        priceDecimals\n        priceListChargeId\n        priceListChargeName\n        priceListId\n        priceListName\n        priceTiers {\n          price\n          starts\n        }\n        pricingModel\n        productName\n        prorationRate\n        quantity\n        showProductNameOnLineItem\n        taxCode\n        trialEndDate\n        trialStartDate\n        unitOfMeasure\n        vatCode\n      }\n      netPaymentDays\n      notes\n      number\n      poNumberRequired\n      salesContactEmail\n      sharedAt\n      startDate\n      state\n      subtotal\n      taxAmount\n      taxNumberLabel\n      taxNumberRequired\n      vendorName\n    }\n  }"; };
+var MUTATION$6 = function (id) { return "\n  query formattedQuote ($id: ID) {\n    formattedQuote (id: $id) {\n      payableId\n      acceptedAt\n      acceptedByName\n      amount\n      amountDue\n      amountsByPeriod {\n        id\n        name\n        amount\n      }\n      object { documents { id filename size date url } }\n      billingCity\n      billingCountry\n      billingState\n      billingStreet\n      billingZip\n      contactName\n      currency\n      customerBillingCity\n      customerBillingCountry\n      customerBillingState\n      customerBillingStreet\n      customerBillingZip\n      customerName\n      discount\n      discountValue\n      duration\n      endDate\n      expiresAt\n      html\n      formattedLines {\n        amount\n        amountsByPeriod {\n          quantity\n          id\n          name\n          startDate\n          endDate\n          amount\n          amountsByTier {\n            id\n            tier {\n              starts\n              ends\n              price\n            }\n            quantity\n            amount\n          }\n          prorationRate\n        }\n        billingPeriodEnd\n        billingPeriodStart\n        chargeType\n        discount\n        frequency\n        isRamp\n        periods\n        planName\n        position\n        price\n        priceDecimals\n        priceListChargeId\n        priceListChargeName\n        priceListId\n        priceListName\n        priceTiers {\n          price\n          starts\n        }\n        pricingModel\n        productName\n        prorationRate\n        quantity\n        showProductNameOnLineItem\n        taxCode\n        trialEndDate\n        trialStartDate\n        unitOfMeasure\n        vatCode\n      }\n      netPaymentDays\n      notes\n      number\n      poNumberRequired\n      salesContactEmail\n      sharedAt\n      startDate\n      state\n      subtotal\n      taxAmount\n      taxNumberLabel\n      taxNumberRequired\n      vendorName\n    }\n  }"; };
 var getFormattedQuote = function (_a) {
     var id = _a.id, token = _a.token, apiHost = _a.apiHost;
     return __awaiter(void 0, void 0, void 0, function () {
@@ -1558,7 +1667,7 @@ var getFormattedQuote = function (_a) {
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0: return [4 /*yield*/, gqlRequest({
-                        query: MUTATION$7(),
+                        query: MUTATION$6(),
                         token: token,
                         apiHost: apiHost,
                         vars: { id: id },
@@ -1808,7 +1917,7 @@ var AcceptQuoteModal = function (_a) {
         }, open: acceptBoxVisible, title: "Accept quote", width: 400 }, { children: jsxs(Form, __assign({ className: "flex flex-col gap-2", form: form, layout: "vertical" }, { children: [jsx(Form.Item, __assign({ label: "Your name", name: "name", rules: createRules(true, "Your name") }, { children: jsx(Input, { autoFocus: true, ref: firstInputRef }) })), jsx(Form.Item, __assign({ label: "Your job title", name: "title", rules: createRules(true, "Your job title") }, { children: jsx(Input, {}) })), jsx(Form.Item, __assign({ label: "Purchase order number", name: "poNumber", rules: createRules(poNumberRequired, "Purchase order number") }, { children: jsx(Input, {}) })), taxNumberRequired && (jsx(Form.Item, __assign({ name: "taxNumber", label: taxNumberLabel, rules: createRules(taxNumberRequired, taxNumberLabel) }, { children: jsx(Input, {}) })))] })) })));
 };
 
-var Text$l = Typography.Text;
+var Text$m = Typography.Text;
 defaultStyled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  span {\n    width: 100%;\n  }\n"], ["\n  span {\n    width: 100%;\n  }\n"])));
 function Quote(_a) {
     var id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, onInvoiceDownloadError = _a.onInvoiceDownloadError, onPaymentSuccess = _a.onPaymentSuccess, _b = _a.shadow, shadow = _b === void 0 ? "shadow-md" : _b, className = _a.className, _c = _a.hideDownloadButton, hideDownloadButton = _c === void 0 ? false : _c, onQuoteLoaded = _a.onQuoteLoaded;
@@ -1877,7 +1986,7 @@ function ActualQuote() {
     var isAccepted = formattedQuote.state === "ACCEPTED";
     return (jsxs(Fragment, { children: [jsxs("div", __assign({ className: "flex flex-col gap-4 ".concat(isMobile ? "w-full overflow-hidden" : "bunny-shadow-padding-xb", " ").concat(className) }, { children: [jsxs("div", __assign({ className: "flex flex-row justify-end items-center gap-4", id: "acceptance", style: {
                             color: entityBranding.secondaryColor,
-                        } }, { children: [isAccepted && formattedQuote.acceptedAt ? (jsx(Text$l, { children: "Quote was accepted by ".concat(formattedQuote.acceptedByName, " on ").concat(formatDate(formattedQuote.acceptedAt)) })) : null, (!isMobile || !isAccepted) && (jsxs("div", __assign({ className: isMobile
+                        } }, { children: [isAccepted && formattedQuote.acceptedAt ? (jsx(Text$m, { children: "Quote was accepted by ".concat(formattedQuote.acceptedByName, " on ").concat(formatDate(formattedQuote.acceptedAt)) })) : null, (!isMobile || !isAccepted) && (jsxs("div", __assign({ className: isMobile
                                     ? "flex w-full justify-end gap-2"
                                     : "flex items-center justify-end gap-2" }, { children: [!isMobile && !hideDownloadButton ? (jsx(Button, __assign({ icon: jsx(DownloadOutlined, {}), onClick: function () {
                                             return downloadFile(apiHost + "/api/pdf/quote", token);
@@ -19183,10 +19292,10 @@ var getColor = function (state) {
     }
 };
 
-var Text$k = Typography.Text;
+var Text$l = Typography.Text;
 var TransactionDate = function (_a) {
     var date = _a.date;
-    return jsx(Text$k, __assign({ className: "text-sm" }, { children: formatDate(date) }));
+    return jsx(Text$l, __assign({ className: "text-sm" }, { children: formatDate(date) }));
 };
 
 var ArrowDownToLine = function (_a) {
@@ -19223,12 +19332,13 @@ var TransactionGridCell = defaultStyled.div.withConfig({
 }, SLATE_600);
 var templateObject_1$6;
 
-var Text$j = Typography.Text;
+var Text$k = Typography.Text;
 var TransactionsEmptyState = function () {
     var noTransactionsMessage = useContext(TransactionsListContext).noTransactionsMessage;
-    return (jsx(Text$j, __assign({ className: "flex justify-center p-4 text-base" }, { children: noTransactionsMessage || "There are no transactions" })));
+    return (jsx(Text$k, __assign({ className: "flex justify-center p-4 text-base" }, { children: noTransactionsMessage || "There are no transactions" })));
 };
 
+var Text$j = Typography.Text;
 var isInvoice = function (transaction) {
     return transaction.kind === "INVOICE";
 };
@@ -19240,7 +19350,7 @@ var TransactionRowTitle = function (_a) {
     if (!isInvoice(transaction) && !isQuote(transaction)) {
         return jsx(Fragment, {});
     }
-    return (jsx("span", __assign({ className: "text-slate-400", style: { fontSize: "11px" } }, { children: transaction.transactionable.number })));
+    return (jsx(Text$j, __assign({ className: "text-slate-400", style: { fontSize: "11px" } }, { children: transaction.transactionable.number })));
 };
 
 function transactionDateToDisplay(transaction, transactionDateType) {
@@ -19551,103 +19661,7 @@ function QuotesWrapper() {
     return (jsx(TransactionsDisplay, { transactions: quotesAsTransactions, onSearchValueChanged: setSearch, search: search }));
 }
 
-// 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}";
-};
-var getBillingDetails = function (_a) {
-    var token = _a.token, apiHost = _a.apiHost;
-    return __awaiter(void 0, void 0, void 0, function () {
-        var response;
-        var _b;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
-                case 0: return [4 /*yield*/, gqlRequest({
-                        query: billingDetailsQuery(),
-                        token: token,
-                        apiHost: apiHost,
-                    })];
-                case 1:
-                    response = _c.sent();
-                    if (response === null || response === void 0 ? void 0 : response.errors) {
-                        throw new Error((_b = response === null || response === void 0 ? void 0 : response.errors[0]) === null || _b === void 0 ? void 0 : _b.message);
-                    }
-                    return [2 /*return*/, response === null || response === void 0 ? void 0 : response.billingDetails];
-            }
-        });
-    });
-};
-
-var Text$f = 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$f, __assign({ className: "text-xl", style: { fontWeight: 400 } }, { children: title })), onClose ? (jsx("button", __assign({ id: "closePayment", onClick: onClose, className: closeButtonClassName }, { children: jsx(CloseOutlined, {}) }))) : null] })), description && jsx("div", __assign({ className: "text-xs" }, { children: description }))] })));
-};
-
-var PaymentMethod = function (_a) {
-    var _b;
-    var 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({ apiHost: apiHost, token: token }).paymentPlugins;
-    var showSuccessNotification = useSuccessNotification();
-    var handleAllErrorFormats = useAllErrorFormats(onTokenExpired);
-    var data = usePaymentMethod({ graphQLClient: graphQLClient, token: token }).data;
-    var onClickRemove = useRemovePaymentMethod(paymentPlugins || [], apiHost, token);
-    // Queries
-    var billingDetails = useQuery({
-        queryKey: QueryKeyFactory.default.billingDetailsKey({ token: token }),
-        queryFn: function () { return getBillingDetails({ token: token, apiHost: apiHost }); },
-    }).data;
-    // Local state
-    var _g = useState(false), showModal = _g[0], setShowModal = _g[1];
-    var onSuccess = function () {
-        queryClient.invalidateQueries({
-            queryKey: QueryKeyFactory.default.accountPaymentMethodKey({ token: token }),
-        });
-        setShowModal(false);
-        showSuccessNotification("Your payment method has been saved");
-    };
-    if (data === undefined)
-        return jsx(Fragment, {});
-    return (jsxs("div", __assign({ className: "".concat(className) }, { children: [data ? (jsx(CreditCard, { onClickRemove: function () { return __awaiter(void 0, void 0, void 0, function () {
-                    return __generator(this, function (_a) {
-                        switch (_a.label) {
-                            case 0: return [4 /*yield*/, onClickRemove(data)];
-                            case 1:
-                                _a.sent();
-                                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(PaymentMethodDisplay, __assign({ useModal: useModal, setShowModal: setShowModal, showModal: showModal }, { children: jsx(PaymentForm, { 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, { closeButtonClassName: "bg-transparent border-none cursor-pointer hover:bg-gray-100 p-2 rounded-sm transition-all duration-200", onClose: function () { return setShowModal(false); }, title: "New payment method" }) })), 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 MUTATION$6 = function () { return "\nmutation AccountSignup (\n  $pluginId: String!,\n  $paymentMethodId: String,\n  $priceListCode: String!,\n  $accountId: ID!,\n  $quoteId: ID!,\n  $entityId: ID!\n) {\n  accountSignup(\n    pluginId: $pluginId,\n    paymentMethodId: $paymentMethodId,\n    priceListCode: $priceListCode,\n    accountId: $accountId,\n    quoteId: $quoteId,\n    entityId: $entityId\n  ) {\n    errors\n    quote {\n      acceptedByName\n      acceptedByTitle\n      accountId\n      amount\n      amountDue\n      applicationDate\n      applied\n      backdatedPeriods\n      backdatedQuote\n      billingDay\n      contactId\n      createdAt\n      credits\n      currencyId\n      dealId\n      discount\n      discountValue\n      endDate\n      evergreen\n      expiresAt\n      id\n      invoiceImmediately\n      invoiceImmediatelyAvailable\n      invoiceUntil\n      isPendingApprovalRequest\n      kind\n      message\n      name\n      netPaymentDays\n      notes\n      number\n      ownerId\n      payableId\n      periodAmount\n      poNumber\n      requiresApproval\n      smallUnitAmountDue\n      splitInvoice\n      startDate\n      state\n      subtotal\n      taxAmount\n      taxCode\n      updatedAt\n      uuid\n    }\n  }\n}"; };
+var MUTATION$5 = function () { return "\nmutation AccountSignup (\n  $pluginId: String!,\n  $paymentMethodId: String,\n  $priceListCode: String!,\n  $accountId: ID!,\n  $quoteId: ID!,\n  $entityId: ID!\n) {\n  accountSignup(\n    pluginId: $pluginId,\n    paymentMethodId: $paymentMethodId,\n    priceListCode: $priceListCode,\n    accountId: $accountId,\n    quoteId: $quoteId,\n    entityId: $entityId\n  ) {\n    errors\n    quote {\n      acceptedByName\n      acceptedByTitle\n      accountId\n      amount\n      amountDue\n      applicationDate\n      applied\n      backdatedPeriods\n      backdatedQuote\n      billingDay\n      contactId\n      createdAt\n      credits\n      currencyId\n      dealId\n      discount\n      discountValue\n      endDate\n      evergreen\n      expiresAt\n      id\n      invoiceImmediately\n      invoiceImmediatelyAvailable\n      invoiceUntil\n      isPendingApprovalRequest\n      kind\n      message\n      name\n      netPaymentDays\n      notes\n      number\n      ownerId\n      payableId\n      periodAmount\n      poNumber\n      requiresApproval\n      smallUnitAmountDue\n      splitInvoice\n      startDate\n      state\n      subtotal\n      taxAmount\n      taxCode\n      updatedAt\n      uuid\n    }\n  }\n}"; };
 var accountSignup = function (_a) {
     var token = _a.token, apiHost = _a.apiHost, accountId = _a.accountId, quoteId = _a.quoteId, paymentToken = _a.paymentToken, paymentMethodId = _a.paymentMethodId, pluginId = _a.pluginId, priceListCode = _a.priceListCode, entityId = _a.entityId;
     return __awaiter(void 0, void 0, void 0, function () {
@@ -19666,7 +19680,7 @@ var accountSignup = function (_a) {
                         entityId: entityId,
                     };
                     return [4 /*yield*/, gqlRequest({
-                            query: MUTATION$6(),
+                            query: MUTATION$5(),
                             token: token,
                             vars: vars,
                             apiHost: apiHost,
@@ -19682,7 +19696,7 @@ var accountSignup = function (_a) {
     });
 };
 
-var MUTATION$5 = function () { return "\nmutation QuoteAccountSignup (\n  $accountName: String!,\n  $billingContact: ContactAttributes!,\n  $priceListCode: String!,\n  $entityId: ID!\n) {\n  quoteAccountSignup(\n    priceListCode: $priceListCode,\n    accountName: $accountName,\n    billingContact: $billingContact,\n    entityId: $entityId\n  ) {\n    account {\n      id\n    }\n    quote {\n      acceptedByName\n      acceptedByTitle\n      accountId\n      amount\n      amountDue\n      applicationDate\n      applied\n      backdatedPeriods\n      backdatedQuote\n      billingDay\n      contactId\n      createdAt\n      credits\n      currencyId\n      dealId\n      discount\n      discountValue\n      endDate\n      evergreen\n      expiresAt\n      id\n      invoiceImmediately\n      invoiceImmediatelyAvailable\n      invoiceUntil\n      isPendingApprovalRequest\n      kind\n      message\n      name\n      netPaymentDays\n      notes\n      number\n      ownerId\n      payableId\n      periodAmount\n      poNumber\n      requiresApproval\n      smallUnitAmountDue\n      splitInvoice\n      startDate\n      state\n      subtotal\n      taxAmount\n      taxCode\n      updatedAt\n      uuid\n    }\n    tenant {\n      code\n    }\n    portalSessionToken\n    errors\n  }\n}"; };
+var MUTATION$4 = function () { return "\nmutation QuoteAccountSignup (\n  $accountName: String!,\n  $billingContact: ContactAttributes!,\n  $priceListCode: String!,\n  $entityId: ID!\n) {\n  quoteAccountSignup(\n    priceListCode: $priceListCode,\n    accountName: $accountName,\n    billingContact: $billingContact,\n    entityId: $entityId\n  ) {\n    account {\n      id\n    }\n    quote {\n      acceptedByName\n      acceptedByTitle\n      accountId\n      amount\n      amountDue\n      applicationDate\n      applied\n      backdatedPeriods\n      backdatedQuote\n      billingDay\n      contactId\n      createdAt\n      credits\n      currencyId\n      dealId\n      discount\n      discountValue\n      endDate\n      evergreen\n      expiresAt\n      id\n      invoiceImmediately\n      invoiceImmediatelyAvailable\n      invoiceUntil\n      isPendingApprovalRequest\n      kind\n      message\n      name\n      netPaymentDays\n      notes\n      number\n      ownerId\n      payableId\n      periodAmount\n      poNumber\n      requiresApproval\n      smallUnitAmountDue\n      splitInvoice\n      startDate\n      state\n      subtotal\n      taxAmount\n      taxCode\n      updatedAt\n      uuid\n    }\n    tenant {\n      code\n    }\n    portalSessionToken\n    errors\n  }\n}"; };
 var quoteAccountSignup = function (_a) {
     var token = _a.token, apiHost = _a.apiHost, priceListCode = _a.priceListCode, accountName = _a.accountName, billingContact = _a.billingContact, entityId = _a.entityId;
     return __awaiter(void 0, void 0, void 0, function () {
@@ -19698,7 +19712,7 @@ var quoteAccountSignup = function (_a) {
                         entityId: entityId,
                     };
                     return [4 /*yield*/, gqlRequest({
-                            query: MUTATION$5(),
+                            query: MUTATION$4(),
                             token: token,
                             vars: vars,
                             apiHost: apiHost,
@@ -19714,7 +19728,7 @@ var quoteAccountSignup = function (_a) {
     });
 };
 
-var MUTATION$4 = function () { return "\nquery PriceList($code: String!) {\n  priceList (code: $code) {\n    basePrice\n    code\n    createdAt\n    currencyId\n    id\n    isVisible\n    name\n    periodMonths\n    planId\n    priceDescription\n    productId\n    sku\n    trialAllowed\n    trialLengthDays\n    updatedAt\n  }\n}"; };
+var MUTATION$3 = function () { return "\nquery PriceList($code: String!) {\n  priceList (code: $code) {\n    basePrice\n    code\n    createdAt\n    currencyId\n    id\n    isVisible\n    name\n    periodMonths\n    planId\n    priceDescription\n    productId\n    sku\n    trialAllowed\n    trialLengthDays\n    updatedAt\n  }\n}"; };
 var getPriceList = function (_a) {
     var token = _a.token, code = _a.code, apiHost = _a.apiHost;
     return __awaiter(void 0, void 0, void 0, function () {
@@ -19722,7 +19736,7 @@ var getPriceList = function (_a) {
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0: return [4 /*yield*/, gqlRequest({
-                        query: MUTATION$4(),
+                        query: MUTATION$3(),
                         token: token,
                         vars: { code: code },
                         apiHost: apiHost,
@@ -19737,8 +19751,8 @@ var getPriceList = function (_a) {
 
 function PaymentForms(_a) {
     var quote = _a.quote, handlePaymentSuccess = _a.handlePaymentSuccess, handlePaymentFail = _a.handlePaymentFail, handleSubmit = _a.handleSubmit, proceedingToPayment = _a.proceedingToPayment, 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, { onFail: handlePaymentFail, onPaymentSuccess: handlePaymentSuccess, accountId: accountId, quote: quote, overrideToken: overrideToken, graphQLClient: createGraphQLClient(apiHost, overrideToken), customCheckoutFunction: customCheckoutFunction })) : null })) : (jsx(InitialSignupForm, { onSubmit: handleSubmit, submitting: proceedingToPayment })) }));
+    useContext(BunnyContext).apiHost;
+    return (jsx(Fragment, { children: quote ? (jsx(Fragment, { children: overrideToken ? (jsx(PaymentForm, { onFail: handlePaymentFail, onPaymentSuccess: handlePaymentSuccess, accountId: accountId, quote: quote, overrideToken: overrideToken, customCheckoutFunction: customCheckoutFunction })) : null })) : (jsx(InitialSignupForm, { onSubmit: handleSubmit, submitting: proceedingToPayment })) }));
 }
 function InitialSignupForm(_a) {
     var onSubmit = _a.onSubmit, submitting = _a.submitting;
@@ -19756,40 +19770,39 @@ function InitialSignupForm(_a) {
                         ] }, { children: jsx(Input, { placeholder: "Company name" }) }))] })), jsx(Form.Item, { children: jsx(Button, __assign({ type: "primary", onClick: handleSubmit, loading: submitting, className: "w-full mt-4" }, { children: "Proceed to payment" })) })] })));
 }
 
-var Title = Typography.Title, Text$e = Typography.Text;
+var Title = Typography.Title, Text$f = Typography.Text;
 function PaymentSuccessDisplay(_a) {
     var amountPaid = _a.amountPaid, className = _a.className, companyName = _a.companyName, returnUrl = _a.returnUrl, style = _a.style, currencyId = _a.currencyId;
-    return (jsxs("div", __assign({ className: "flex flex-col items-center justify-center h-full ".concat(className), style: style }, { children: [jsx(CheckCircleFilled, { style: { fontSize: "48px", color: "rgb(52 211 153)" } }), jsxs(Title, __assign({ level: 3, className: "mt-2 m-0" }, { children: ["Payment of ", formatCurrency(amountPaid, currencyId), " successful"] })), returnUrl && (jsxs(Text$e, __assign({ className: "text-slate-500 cursor-pointer underline", onClick: function () { return (window.location.href = returnUrl); } }, { children: ["Back to ", companyName] })))] })));
+    return (jsxs("div", __assign({ className: "flex flex-col items-center justify-center h-full ".concat(className), style: style }, { children: [jsx(CheckCircleFilled, { style: { fontSize: "48px", color: "rgb(52 211 153)" } }), jsxs(Title, __assign({ level: 3, className: "mt-2 m-0" }, { children: ["Payment of ", formatCurrency(amountPaid, currencyId), " successful"] })), returnUrl && (jsxs(Text$f, __assign({ className: "text-slate-500 cursor-pointer underline", onClick: function () { return (window.location.href = returnUrl); } }, { children: ["Back to ", companyName] })))] })));
 }
 
-var Text$d = Typography.Text;
+var Text$e = Typography.Text;
 function PriceListDisplay(_a) {
     var priceListData = _a.priceListData, topNavImageUrl = _a.topNavImageUrl;
     if (!priceListData)
         return null;
-    return (jsx(Fragment, { children: jsx("div", __assign({ className: "flex flex-col justify-between h-full my-12" }, { children: jsxs("div", __assign({ className: "flex flex-col space-y-8" }, { children: [jsx(Image, { width: 24, src: topNavImageUrl, alt: "Logo", preview: false }), jsxs("div", __assign({ className: "flex flex-col" }, { children: [jsx(Text$d, __assign({ className: "text-slate-500 font-bold text-lg" }, { children: priceListData.name })), jsxs(Text$d, __assign({ className: "font-bold text-xl" }, { children: [formatCurrency(priceListData.basePrice, priceListData.currencyId), " ", "/ month"] }))] })), priceListData.trialAllowed ? (jsxs("div", __assign({ className: "flex flex-col" }, { children: [jsxs(Text$d, __assign({ style: { fontSize: "16px" }, className: "text-slate-500" }, { children: [priceListData.trialLengthDays, " day trial"] })), jsx(Text$d, __assign({ className: "text-slate-500", style: { fontSize: "12px" } }, { children: "You will not be charged until the last day of the trial." }))] }))) : null] })) })) }));
+    return (jsx(Fragment, { children: jsx("div", __assign({ className: "flex flex-col justify-between h-full my-12" }, { children: jsxs("div", __assign({ className: "flex flex-col space-y-8" }, { children: [jsx(Image, { width: 24, src: topNavImageUrl, alt: "Logo", preview: false }), jsxs("div", __assign({ className: "flex flex-col" }, { children: [jsx(Text$e, __assign({ className: "text-slate-500 font-bold text-lg" }, { children: priceListData.name })), jsxs(Text$e, __assign({ className: "font-bold text-xl" }, { children: [formatCurrency(priceListData.basePrice, priceListData.currencyId), " ", "/ month"] }))] })), priceListData.trialAllowed ? (jsxs("div", __assign({ className: "flex flex-col" }, { children: [jsxs(Text$e, __assign({ style: { fontSize: "16px" }, className: "text-slate-500" }, { children: [priceListData.trialLengthDays, " day trial"] })), jsx(Text$e, __assign({ className: "text-slate-500", style: { fontSize: "12px" } }, { children: "You will not be charged until the last day of the trial." }))] }))) : null] })) })) }));
 }
 
 var showErrorNotification = useErrorNotification();
 function Signup(_a) {
     var companyName = _a.companyName, priceListCode = _a.priceListCode, returnUrl = _a.returnUrl, _b = _a.isCardEnabled, isCardEnabled = _b === void 0 ? true : _b, className = _a.className, _c = _a.shadow, shadow = _c === void 0 ? "shadow-md" : _c, style = _a.style, entityId = _a.entityId;
     // Hooks
-    var _d = useContext(BunnyContext), apiHost = _d.apiHost, graphQLClient = _d.graphQLClient;
+    var apiHost = useContext(BunnyContext).apiHost;
     var tokenFromContexts = useToken();
     var isMobile = useIsMobile();
     var topNavImageUrl = useContext(BrandContext).topNavImageUrl;
-    var _e = useState(undefined), quote = _e[0], setQuote = _e[1];
-    var _f = useState(undefined), accountId = _f[0], setAccountId = _f[1];
-    var _g = useState(undefined), portalSessionToken = _g[0], setPortalSessionToken = _g[1];
+    var _d = useState(undefined), quote = _d[0], setQuote = _d[1];
+    var _e = useState(undefined), accountId = _e[0], setAccountId = _e[1];
+    var _f = useState(undefined), portalSessionToken = _f[0], setPortalSessionToken = _f[1];
     var token = portalSessionToken || tokenFromContexts;
-    var _h = useState(false), proceedingToPayment = _h[0], setProceedingToPayment = _h[1];
-    var _j = useState(false), purchaseSucceeded = _j[0], setPurchaseSucceeded = _j[1];
-    var _k = useState(undefined), paymentMethodGraphQLClient = _k[0], setPaymentMethodGraphQLClient = _k[1];
-    var paymentMethod = usePaymentMethod({
+    var _g = useState(false), proceedingToPayment = _g[0], setProceedingToPayment = _g[1];
+    var _h = useState(false), purchaseSucceeded = _h[0], setPurchaseSucceeded = _h[1];
+    var defaultPaymentMethod = usePaymentMethod({
         accountId: accountId,
-        graphQLClient: paymentMethodGraphQLClient || graphQLClient,
         token: token,
-    }).data;
+        apiHost: apiHost,
+    }).defaultPaymentMethod;
     var queryClient = useQueryClient();
     // Queries
     var priceListData = useQuery({
@@ -19820,11 +19833,11 @@ function Signup(_a) {
                         data = _a.sent();
                         setAccountId(data.account.id);
                         setPortalSessionToken(data.portalSessionToken);
-                        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({
                             queryKey: QueryKeyFactory.default.accountPaymentMethodKey({
+                                accountId: accountId,
                                 token: token,
                             }),
                         });
@@ -19863,14 +19876,14 @@ function Signup(_a) {
                         if (!(plugin === null || plugin === void 0 ? void 0 : plugin.id)) {
                             throw new Error("Plugin ID is required");
                         }
-                        if (!(paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id)) {
+                        if (!(defaultPaymentMethod === null || defaultPaymentMethod === void 0 ? void 0 : defaultPaymentMethod.id)) {
                             throw new Error("Payment method ID is required");
                         }
                         return [4 /*yield*/, accountSignup({
                                 token: portalSessionToken,
                                 apiHost: apiHost,
                                 quoteId: quote === null || quote === void 0 ? void 0 : quote.id,
-                                paymentMethodId: paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id,
+                                paymentMethodId: defaultPaymentMethod === null || defaultPaymentMethod === void 0 ? void 0 : defaultPaymentMethod.id,
                                 pluginId: plugin === null || plugin === void 0 ? void 0 : plugin.id.toString(),
                                 priceListCode: priceListCode,
                                 accountId: accountId,
@@ -19894,18 +19907,20 @@ function Signup(_a) {
 }
 
 var createRequestHeaders = function (token) {
-    var bearerToken = "Bearer ".concat(token);
+    var bearerToken = token ? "Bearer ".concat(token) : null;
     var headers = {
         "Content-type": "application/json; charset=utf-8",
     };
-    headers["Authorization"] = bearerToken;
+    if (bearerToken) {
+        headers["Authorization"] = bearerToken;
+    }
     return headers;
 };
 var getGraphQLBaseURL = function (apiHost) {
     return "".concat(apiHost, "/graphql");
 };
 var useGraphQLRequest = function () {
-    return function (query, token, apiHost, variables) { return __awaiter(void 0, void 0, void 0, function () {
+    return function (query, apiHost, token, variables) { return __awaiter(void 0, void 0, void 0, function () {
         var error_1;
         return __generator(this, function (_a) {
             switch (_a.label) {
@@ -19922,13 +19937,27 @@ var useGraphQLRequest = function () {
     }); };
 };
 
+var useQuoteSubscriptionUpgrade = function () {
+    var graphQLRequest = useGraphQLRequest();
+    return function (subscriptionId, priceListId, apiHost, token) { return __awaiter(void 0, void 0, void 0, function () {
+        var data;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, graphQLRequest("\n        mutation QuoteSubscriptionUpgrade($subscriptionId: ID!, $priceListId: ID!) {\n          quoteSubscriptionUpgrade(\n            subscriptionId: $subscriptionId\n            priceListId: $priceListId\n          ) {\n            quote {\n              id\n            }\n          }\n        }\n      ", apiHost, token, { subscriptionId: subscriptionId, priceListId: priceListId })];
+                case 1:
+                    data = _a.sent();
+                    return [2 /*return*/, data];
+            }
+        });
+    }); };
+};
 var useCreateSubscriptionQuote = function () {
     var graphQLRequest = useGraphQLRequest();
-    return function (subscriptionIds, token, apiHost) { return __awaiter(void 0, void 0, void 0, function () {
+    return function (subscriptionIds, apiHost, token) { return __awaiter(void 0, void 0, void 0, function () {
         var data;
         return __generator(this, function (_a) {
             switch (_a.label) {
-                case 0: return [4 /*yield*/, graphQLRequest("\n    mutation quoteSubscriptionUpdate(\n      $subscriptionIds: [ID!]!,\n    ) {\n      quoteSubscriptionUpdate(\n        subscriptionIds: $subscriptionIds,\n      ) {\n        quote {\n          id\n          quoteChanges {\n            id\n            priceList {\n              id\n            }\n            subscription {\n              charges {\n                startDate\n                endDate\n                id\n                priceListCharge {\n                  id\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n      ", token, apiHost, {
+                case 0: return [4 /*yield*/, graphQLRequest("\n    mutation quoteSubscriptionUpdate(\n      $subscriptionIds: [ID!]!,\n    ) {\n      quoteSubscriptionUpdate(\n        subscriptionIds: $subscriptionIds,\n      ) {\n        quote {\n          id\n          quoteChanges {\n            id\n            priceList {\n              id\n            }\n            subscription {\n              charges {\n                startDate\n                endDate\n                id\n                priceListCharge {\n                  id\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n      ", apiHost, token, {
                         subscriptionIds: subscriptionIds,
                     })];
                 case 1:
@@ -19940,11 +19969,11 @@ var useCreateSubscriptionQuote = function () {
 };
 var useQuoteChangeUpdate = function () {
     var graphQLRequest = useGraphQLRequest();
-    return function (charges, quoteChangeId, token, apiHost) { return __awaiter(void 0, void 0, void 0, function () {
+    return function (charges, quoteChangeId, apiHost, token) { return __awaiter(void 0, void 0, void 0, function () {
         var response;
         return __generator(this, function (_a) {
             switch (_a.label) {
-                case 0: return [4 /*yield*/, graphQLRequest("mutation QuoteChangeUpdate($charges:[QuoteChargeAttributes!], $id:ID!) {\n      quoteChangeUpdate(id:$id, charges:$charges) {\n        quoteChange { id quoteId }\n        errors\n      }\n    }", token, apiHost, { charges: charges, id: quoteChangeId })];
+                case 0: return [4 /*yield*/, graphQLRequest("mutation QuoteChangeUpdate($charges:[QuoteChargeAttributes!], $id:ID!) {\n      quoteChangeUpdate(id:$id, charges:$charges) {\n        quoteChange { id quoteId }\n        errors\n      }\n    }", apiHost, token, { charges: charges, id: quoteChangeId })];
                 case 1:
                     response = _a.sent();
                     return [2 /*return*/, response];
@@ -19954,11 +19983,11 @@ var useQuoteChangeUpdate = function () {
 };
 var useQuoteDelete = function () {
     var graphQLRequest = useGraphQLRequest();
-    return function (quoteId, token, apiHost) { return __awaiter(void 0, void 0, void 0, function () {
+    return function (quoteId, apiHost, token) { return __awaiter(void 0, void 0, void 0, function () {
         var response;
         return __generator(this, function (_a) {
             switch (_a.label) {
-                case 0: return [4 /*yield*/, graphQLRequest("mutation QuoteDelete($id: ID!) {\n        quoteDelete(id: $id) {\n          errors\n        }\n      }", token, apiHost, { id: quoteId })];
+                case 0: return [4 /*yield*/, graphQLRequest("mutation QuoteDelete($id: ID!) {\n        quoteDelete(id: $id) {\n          errors\n        }\n      }", apiHost, token, { id: quoteId })];
                 case 1:
                     response = _a.sent();
                     return [2 /*return*/, response];
@@ -19967,7 +19996,7 @@ var useQuoteDelete = function () {
     }); };
 };
 
-var QUOTE_QUERY = function (id) { return "\n        query quote {\n            quote(id: ".concat(id, ") {\n                accountId\n                amount\n                amountDue\n                smallUnitAmountDue\n                currencyId\n                formattedQuote {\n                  html\n                }\n                id\n                payableId\n                periodAmount\n                subtotal\n                taxAmount\n                amountsByPeriod {\n                    amount\n                    startDate\n                }\n                quoteChanges {\n                    currencyId\n                    id\n                    charges {\n                        amountsByPeriod {\n                          amount\n                          startDate\n                        }\n                        amount\n                        billingPeriod\n                        currencyId\n                        feature {\n                          unitName\n                        }\n                        id\n                        name\n                        priceListCharge {\n                          id\n                        }\n                        quantity\n                    }\n                    priceList {\n                        id\n                        plan {\n                            name\n                        }\n                        product {\n                            name\n                        }\n                    }\n\n                }\n            }\n        }"); };
+var QUOTE_QUERY = function (id) { return "\n        query quote {\n            quote(id: ".concat(id, ") {\n                accountId\n                amount\n                amountDue\n                smallUnitAmountDue\n                currencyId\n                formattedQuote {\n                  html\n                }\n                id\n                payableId\n                periodAmount\n                subtotal\n                taxAmount\n                amountsByPeriod {\n                    amount\n                    startDate\n                }\n                quoteChanges {\n                    currencyId\n                    id\n                    charges {\n                        amountsByPeriod {\n                          amount\n                          startDate\n                        }\n                        amount\n                        billingPeriod\n                        currencyId\n                        feature {\n                          unitName\n                        }\n                        id\n                        name\n                        priceListCharge {\n                          id\n                        }\n                        priceList {\n                          id\n                        }\n                        quantity\n                    }\n                    priceList {\n                        id\n                        plan {\n                            name\n                        }\n                        product {\n                            name\n                        }\n                    }\n\n                }\n            }\n        }"); };
 var getQuote = function (_a) {
     var id = _a.id, token = _a.token, apiHost = _a.apiHost;
     return __awaiter(void 0, void 0, void 0, function () {
@@ -20016,35 +20045,10 @@ var pageWrapperClassName = function (isMobile) {
 };
 
 var QUOTE_FIELDS = "quote {\n  formattedQuote {\n    html\n  }\n  acceptedByName\n  acceptedByTitle\n  accountId\n  amount\n  amountDue\n  applicationDate\n  applied\n  billingDay\n  contactId\n  createdAt\n  credits\n  currencyId\n  dealId\n  discount\n  discountValue\n  endDate\n  evergreen\n  expiresAt\n  id\n  invoiceUntil\n  isPendingApprovalRequest\n  kind\n  message\n  name\n  netPaymentDays\n  notes\n  ownerId\n  periodAmount\n  poNumber\n  requiresApproval\n  startDate\n  state\n  subtotal\n  taxAmount\n  updatedAt\n  uuid\n  amountsByPeriod {\n    amount\n    id\n    name\n  }\n  endDateOptions {\n    endDate\n    label\n  }\n  invoiceUntilOptions {\n    endDate\n    label\n  }\n  quoteChanges {\n    id\n    priceListId\n    charges {\n      amount\n      amountsByPeriod { amount startDate }\n      billingPeriod\n      billingPeriodAmounts { id amount prorationRate }\n      chargeType\n      couponId\n      createdAt\n      currencyId\n      discount\n      endDate\n      feature { id name code isUnit unitName }\n      id\n      invoiceLineText\n      name\n      price\n      priceDecimals\n      priceTiers { starts price }\n      pricingModel\n      prorationRate\n      quantity\n      quantityMax\n      quantityMin\n      startDate\n      tieredAveragePrice\n      updatedAt\n    }\n  }\n}";
-var MUTATION$3 = "\nmutation quoteCompose($quoteId: ID, $priceListId: ID, $subscriptionId: ID, $quantity: Int, $accountId: ID) {\n    quoteCompose(quoteId: $quoteId, priceListId: $priceListId, subscriptionId: $subscriptionId, quantity: $quantity, accountId: $accountId) {\n        ".concat(QUOTE_FIELDS, "\n    }\n}\n");
-var quoteCompose = function (_a) {
-    var quoteId = _a.quoteId, priceListId = _a.priceListId, subscriptionId = _a.subscriptionId, quantity = _a.quantity, accountId = _a.accountId, token = _a.token, apiHost = _a.apiHost;
-    return __awaiter(void 0, void 0, void 0, function () {
-        var vars, response, _b, errors, quote;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
-                case 0:
-                    vars = { quoteId: quoteId, priceListId: priceListId, subscriptionId: subscriptionId, quantity: quantity, accountId: accountId };
-                    return [4 /*yield*/, gqlRequest({
-                            query: MUTATION$3,
-                            token: token,
-                            vars: vars,
-                            apiHost: apiHost,
-                        })];
-                case 1:
-                    response = _c.sent();
-                    _b = response === null || response === void 0 ? void 0 : response.quoteCompose, errors = _b.errors, quote = _b.quote;
-                    if (errors)
-                        throw errors;
-                    return [2 /*return*/, quote];
-            }
-        });
-    });
-};
 
 var QUOTE_RECALCULATE_TAXES = "\n  mutation QuoteRecalculateTaxes($id: ID!) {\n    quoteRecalculateTaxes(id: $id) {\n      ".concat(QUOTE_FIELDS, "\n      errors\n    }\n  }\n");
 var quoteRecalculateTaxes = function (_a) {
-    var quoteId = _a.quoteId, token = _a.token, apiHost = _a.apiHost;
+    var quoteId = _a.quoteId, apiHost = _a.apiHost, token = _a.token;
     return __awaiter(void 0, void 0, void 0, function () {
         var vars, response, errors;
         var _b, _c;
@@ -20071,7 +20075,7 @@ var quoteRecalculateTaxes = function (_a) {
 
 var MUTATION$2 = "{\n  currentUser {\n    taxationRequiredAccountFields\n  }\n}";
 var getTaxationRequiredAccountFields = function (_a) {
-    var token = _a.token, apiHost = _a.apiHost;
+    var apiHost = _a.apiHost, token = _a.token;
     return __awaiter(void 0, void 0, void 0, function () {
         var response;
         var _b, _c;
@@ -20102,9 +20106,38 @@ var useHasTaxPlugin = function (_a) {
     return Boolean(plugins === null || plugins === void 0 ? void 0 : plugins.some(function (plugin) { return plugin.type === "taxation"; }));
 };
 
-var MUTATION$1 = "\nmutation accountUpdate(\n    $id: ID!,\n    $attributes: AccountAttributes!) {\n      accountUpdate(\n        id: $id,\n        attributes: $attributes\n      ) {\n        account {\n          id\n          billingCountry\n          billingState\n          billingStreet\n          billingCity\n          billingZip\n          name\n        }\n        errors\n      }\n  }\n";
-var accountUpdate = function (_a) {
-    var accountId = _a.accountId, attributes = _a.attributes, token = _a.token, apiHost = _a.apiHost;
+var useCurrentUserData = function () {
+    var queryClient = useQueryClient();
+    var token = useToken();
+    var currentUser = queryClient.getQueryData(QueryKeyFactory.default.currentUserKey(token));
+    if (!currentUser)
+        return {};
+    return currentUser;
+};
+
+var BunnyFooterIcon = function (_a) {
+    var color = _a.color;
+    return (jsxs("svg", __assign({ width: "45", height: "15", viewBox: "0 0 39 13", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxs("g", __assign({ clipPath: "url(#clip0_6_851)" }, { children: [jsx("path", { className: "bunny-icon-path", d: "M14.5898 7.19708C14.5898 9.35053 13.0926 10.325 11.2495 10.325C9.39955 10.325 7.90234 9.35001 7.90234 7.18967V3.26221H10.1125V7.00052C10.1125 7.87719 10.5855 8.27725 11.2495 8.27725C11.9061 8.27725 12.3865 7.87719 12.3865 7.00052V3.26221H14.5898V7.19708Z", fill: color }), jsx("path", { className: "bunny-icon-path", d: "M31.8943 12.9625H29.4793L31.8523 8.62816L28.9355 3.26221H31.4708L33.0457 6.35524L34.5924 3.26221H37.0075L31.8943 12.9625Z", fill: color }), jsx("path", { className: "bunny-icon-path", d: "M15.1602 5.96827C15.1602 3.8148 16.6574 2.84033 18.5005 2.84033C20.3504 2.84033 21.8476 3.81533 21.8476 5.97568V10.1473H19.6374V6.16483C19.6374 5.28815 19.1645 4.8881 18.5005 4.8881C17.8439 4.8881 17.3634 5.28815 17.3634 6.16483V10.1473H15.1602V5.96827Z", fill: color }), jsx("path", { className: "bunny-icon-path", d: "M22.4316 5.96827C22.4316 3.8148 23.9289 2.84033 25.7719 2.84033C27.6219 2.84033 29.1191 3.81533 29.1191 5.97568V10.1473H26.9089V6.16483C26.9089 5.28815 26.4359 4.8881 25.7719 4.8881C25.1154 4.8881 24.6349 5.28815 24.6349 6.16483V10.1473H22.4316V5.96827Z", fill: color }), jsx("path", { className: "bunny-icon-path", d: "M7.40511 6.68957C7.40511 8.7236 6.02815 10.3227 4.17816 10.3227C3.23907 10.3227 2.61071 9.94378 2.19358 9.40371V10.1404H0.0605469V0.0405273H2.26381V3.91939C2.68041 3.42158 3.28802 3.07069 4.17763 3.07069C6.02759 3.07069 7.40511 4.66981 7.40511 6.68957ZM2.17229 6.69642C2.17229 7.60802 2.77937 8.2744 3.64823 8.2744C4.53783 8.2744 5.13107 7.59372 5.13107 6.69642C5.13107 5.79912 4.53783 5.11844 3.64823 5.11844C2.77937 5.11844 2.17229 5.78482 2.17229 6.69642Z", fill: color }), jsx("path", { className: "bunny-icon-path", d: "M38.966 8.94801C38.966 9.76181 38.2668 10.4631 37.4618 10.4631C36.6499 10.4631 35.9434 9.76181 35.9434 8.94801C35.9434 8.14846 36.6494 7.46094 37.4618 7.46094C38.2668 7.46094 38.966 8.14846 38.966 8.94801Z", fill: color })] })), jsx("defs", { children: jsx("clipPath", __assign({ id: "clip0_6_851" }, { children: jsx("rect", { width: "39", height: "13", fill: "white" }) })) })] })));
+};
+
+var Footer = function (_a) {
+    var className = _a.className;
+    var _b = useCurrentUserData(), privacyUrl = _b.privacyUrl, termsUrl = _b.termsUrl;
+    var isMobile = useIsMobile();
+    return (jsxs("div", __assign({ className: "flex items-center justify-between shrink-0 ".concat(isMobile ? "flex-col gap-2 grow" : "", " ").concat(className) }, { children: [(termsUrl || privacyUrl) && (jsxs("div", __assign({ className: "flex items-center gap-3" }, { children: [termsUrl && (jsx(StyedLink, __assign({ className: "text-xs text-slate-400", href: termsUrl, rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: "Terms" }))), privacyUrl && (jsx(StyedLink, __assign({ className: "text-xs text-slate-400", href: privacyUrl, rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: "Privacy" })))] }))), jsx(BunnyMarketingLink, {})] })));
+};
+var BunnyMarketingLink = function () {
+    var _a = useState(false), isHovered = _a[0], setIsHovered = _a[1];
+    var isMobile = useIsMobile();
+    return (jsx("div", __assign({ className: "flex items-end justify-end ".concat(isMobile ? "" : "grow") }, { children: jsx(StyledBunnyLink, __assign({ className: "flex items-end justify-end text-slate-400", href: "https://bunny.com/", rel: "noopener noreferrer", target: "_blank" }, { children: jsxs("div", __assign({ className: "flex items-center", onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: ["Powered by\u00A0", jsx("div", __assign({ style: { paddingTop: "5px" } }, { children: jsx(BunnyFooterIcon, { color: isHovered ? PRIMARY_COLOR : SLATE_400 }) }))] })) })) })));
+};
+var StyedLink = styled.a(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  color: ", ";\n  transition: color 0.3s;\n  &:hover {\n    color: ", ";\n  }\n  font-family: Inter;\n  text-decoration: none;\n  font-size: 14px;\n"], ["\n  color: ", ";\n  transition: color 0.3s;\n  &:hover {\n    color: ", ";\n  }\n  font-family: Inter;\n  text-decoration: none;\n  font-size: 14px;\n"])), SLATE_400, SLATE_500);
+var StyledBunnyLink = styled(StyedLink)(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n  &:hover {\n    color: ", " !important;\n  }\n"], ["\n  &:hover {\n    color: ", " !important;\n  }\n"])), PRIMARY_COLOR);
+var templateObject_1$5, templateObject_2$1;
+
+var MUTATION$1 = "\nmutation accountUpdate(\n    $id: ID!,\n    $attributes: AccountAttributes!) {\n      accountUpdate(\n        id: $id,\n        attributes: $attributes\n      ) {\n        account {\n          id\n          billingCountry\n          billingState\n          billingStreet\n          billingCity\n          billingZip\n          name\n        }\n        errors\n      }\n  }\n";
+var accountUpdate = function (_a) {
+    var accountId = _a.accountId, attributes = _a.attributes, token = _a.token, apiHost = _a.apiHost;
     return __awaiter(void 0, void 0, void 0, function () {
         var vars, response, errors;
         var _b;
@@ -20176,7 +20209,7 @@ var FormBillingState = function (_a) {
 
 var QuoteCheckout = function (_a) {
     var account = _a.account, onSuccess = _a.onSuccess, onFail = _a.onFail, quote = _a.quote, taxationRequiredAccountFields = _a.taxationRequiredAccountFields;
-    var _b = useContext(BunnyContext), apiHost = _b.apiHost, graphQLClient = _b.graphQLClient;
+    var _b = useContext(BunnyContext), apiHost = _b.apiHost; _b.graphQLClient;
     var token = useToken();
     var isMobile = useIsMobile();
     var _c = useState(false), isSaving = _c[0], setIsSaving = _c[1];
@@ -20210,7 +20243,7 @@ var QuoteCheckout = function (_a) {
     }
     if (taxationRequiredAccountFields)
         return (jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsx(TaxationForm, { account: account, quote: quote }) })));
-    return (jsx(Fragment, { children: paymentRequired ? (jsx(PaymentForm, { onFail: onFail, onPaymentSuccess: onSuccess, quote: quote, graphQLClient: graphQLClient })) : (jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsxs("div", __assign({ className: "flex flex-col gap-2 ".concat(isMobile ? "bunny-shadow-padding-x" : "") }, { children: [jsx(Button, __assign({ onClick: handleCheckoutNoPayment, type: "primary" }, { children: isSaving ? "Processing..." : "Complete order" })), jsx("div", __assign({ className: "text-xs text-slate-500" }, { children: "No payment is required" }))] })) }))) }));
+    return (jsx(Fragment, { children: paymentRequired ? (jsx(PaymentForm, { onFail: onFail, onPaymentSuccess: onSuccess, quote: quote })) : (jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsxs("div", __assign({ className: "flex flex-col gap-2 ".concat(isMobile ? "bunny-shadow-padding-x" : "") }, { children: [jsx(Button, __assign({ onClick: handleCheckoutNoPayment, type: "primary" }, { children: isSaving ? "Processing..." : "Complete order" })), jsx("div", __assign({ className: "text-xs text-slate-500" }, { children: "No payment is required" }))] })) }))) }));
 };
 var PaymentFormWrapper = function (_a) {
     var children = _a.children, setMaxHeight = _a.setMaxHeight, className = _a.className;
@@ -20224,40 +20257,11 @@ var PaymentFormWrapper = function (_a) {
             })) }, { children: children })));
 };
 
-var useCurrentUserData = function () {
-    var queryClient = useQueryClient();
-    var token = useToken();
-    var currentUser = queryClient.getQueryData(QueryKeyFactory.default.currentUserKey(token));
-    if (!currentUser)
-        return {};
-    return currentUser;
-};
-
-var BunnyFooterIcon = function (_a) {
-    var color = _a.color;
-    return (jsxs("svg", __assign({ width: "45", height: "15", viewBox: "0 0 39 13", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxs("g", __assign({ clipPath: "url(#clip0_6_851)" }, { children: [jsx("path", { className: "bunny-icon-path", d: "M14.5898 7.19708C14.5898 9.35053 13.0926 10.325 11.2495 10.325C9.39955 10.325 7.90234 9.35001 7.90234 7.18967V3.26221H10.1125V7.00052C10.1125 7.87719 10.5855 8.27725 11.2495 8.27725C11.9061 8.27725 12.3865 7.87719 12.3865 7.00052V3.26221H14.5898V7.19708Z", fill: color }), jsx("path", { className: "bunny-icon-path", d: "M31.8943 12.9625H29.4793L31.8523 8.62816L28.9355 3.26221H31.4708L33.0457 6.35524L34.5924 3.26221H37.0075L31.8943 12.9625Z", fill: color }), jsx("path", { className: "bunny-icon-path", d: "M15.1602 5.96827C15.1602 3.8148 16.6574 2.84033 18.5005 2.84033C20.3504 2.84033 21.8476 3.81533 21.8476 5.97568V10.1473H19.6374V6.16483C19.6374 5.28815 19.1645 4.8881 18.5005 4.8881C17.8439 4.8881 17.3634 5.28815 17.3634 6.16483V10.1473H15.1602V5.96827Z", fill: color }), jsx("path", { className: "bunny-icon-path", d: "M22.4316 5.96827C22.4316 3.8148 23.9289 2.84033 25.7719 2.84033C27.6219 2.84033 29.1191 3.81533 29.1191 5.97568V10.1473H26.9089V6.16483C26.9089 5.28815 26.4359 4.8881 25.7719 4.8881C25.1154 4.8881 24.6349 5.28815 24.6349 6.16483V10.1473H22.4316V5.96827Z", fill: color }), jsx("path", { className: "bunny-icon-path", d: "M7.40511 6.68957C7.40511 8.7236 6.02815 10.3227 4.17816 10.3227C3.23907 10.3227 2.61071 9.94378 2.19358 9.40371V10.1404H0.0605469V0.0405273H2.26381V3.91939C2.68041 3.42158 3.28802 3.07069 4.17763 3.07069C6.02759 3.07069 7.40511 4.66981 7.40511 6.68957ZM2.17229 6.69642C2.17229 7.60802 2.77937 8.2744 3.64823 8.2744C4.53783 8.2744 5.13107 7.59372 5.13107 6.69642C5.13107 5.79912 4.53783 5.11844 3.64823 5.11844C2.77937 5.11844 2.17229 5.78482 2.17229 6.69642Z", fill: color }), jsx("path", { className: "bunny-icon-path", d: "M38.966 8.94801C38.966 9.76181 38.2668 10.4631 37.4618 10.4631C36.6499 10.4631 35.9434 9.76181 35.9434 8.94801C35.9434 8.14846 36.6494 7.46094 37.4618 7.46094C38.2668 7.46094 38.966 8.14846 38.966 8.94801Z", fill: color })] })), jsx("defs", { children: jsx("clipPath", __assign({ id: "clip0_6_851" }, { children: jsx("rect", { width: "39", height: "13", fill: "white" }) })) })] })));
-};
-
-var Footer = function (_a) {
-    var className = _a.className;
-    var _b = useCurrentUserData(), privacyUrl = _b.privacyUrl, termsUrl = _b.termsUrl;
-    var isMobile = useIsMobile();
-    return (jsxs("div", __assign({ className: "flex items-center justify-between shrink-0 ".concat(isMobile ? "flex-col gap-2 grow" : "", " ").concat(className) }, { children: [(termsUrl || privacyUrl) && (jsxs("div", __assign({ className: "flex items-center gap-3" }, { children: [termsUrl && (jsx(StyedLink, __assign({ className: "text-xs text-slate-400", href: termsUrl, rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: "Terms" }))), privacyUrl && (jsx(StyedLink, __assign({ className: "text-xs text-slate-400", href: privacyUrl, rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: "Privacy" })))] }))), jsx(BunnyMarketingLink, {})] })));
-};
-var BunnyMarketingLink = function () {
-    var _a = useState(false), isHovered = _a[0], setIsHovered = _a[1];
-    var isMobile = useIsMobile();
-    return (jsx("div", __assign({ className: "flex items-end justify-end ".concat(isMobile ? "" : "grow") }, { children: jsx(StyledBunnyLink, __assign({ className: "flex items-end justify-end text-slate-400", href: "https://bunny.com/", rel: "noopener noreferrer", target: "_blank" }, { children: jsxs("div", __assign({ className: "flex items-center", onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: ["Powered by\u00A0", jsx("div", __assign({ style: { paddingTop: "5px" } }, { children: jsx(BunnyFooterIcon, { color: isHovered ? PRIMARY_COLOR : SLATE_400 }) }))] })) })) })));
-};
-var StyedLink = styled.a(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  color: ", ";\n  transition: color 0.3s;\n  &:hover {\n    color: ", ";\n  }\n  font-family: Inter;\n  text-decoration: none;\n  font-size: 14px;\n"], ["\n  color: ", ";\n  transition: color 0.3s;\n  &:hover {\n    color: ", ";\n  }\n  font-family: Inter;\n  text-decoration: none;\n  font-size: 14px;\n"])), SLATE_400, SLATE_500);
-var StyledBunnyLink = styled(StyedLink)(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n  &:hover {\n    color: ", " !important;\n  }\n"], ["\n  &:hover {\n    color: ", " !important;\n  }\n"])), PRIMARY_COLOR);
-var templateObject_1$5, templateObject_2$1;
-
 var queryKeyFactory = QueryKeyFactory.default;
 var Checkout = function (_a) {
     var _b, _c;
-    var onCancel = _a.onCancel, onSuccess = _a.onSuccess, onFail = _a.onFail, invoice = _a.invoice, open = _a.open, quote = _a.quote, selectedPriceList = _a.selectedPriceList, token = _a.token, _d = _a.quantity, quantity = _d === void 0 ? 0 : _d;
-    var _e = useContext(BunnyContext), apiHost = _e.apiHost, graphQLClient = _e.graphQLClient;
+    var onCancel = _a.onCancel, onSuccess = _a.onSuccess, onFail = _a.onFail, invoice = _a.invoice, open = _a.open, quote = _a.quote, selectedPriceList = _a.selectedPriceList, token = _a.token;
+    var apiHost = useContext(BunnyContext).apiHost;
     var isMobile = useIsMobile();
     var hasTaxPlugin = useHasTaxPlugin({
         apiHost: apiHost,
@@ -20265,20 +20269,20 @@ var Checkout = function (_a) {
     });
     var queryClient = useQueryClient();
     // Queries
-    var _f = useQuery({
+    var _d = useQuery({
         queryKey: ["getTaxationRequiredAccountFields", token],
-        queryFn: function () { return getTaxationRequiredAccountFields({ token: token, apiHost: apiHost }); },
+        queryFn: function () { return getTaxationRequiredAccountFields({ apiHost: apiHost, token: token }); },
         enabled: Boolean(quote),
         staleTime: 0,
-    }), taxationRequiredAccountFields = _f.data, isLoadingTaxationRequiredAccountFields = _f.isLoading;
-    var _g = useQuery({
+    }), taxationRequiredAccountFields = _d.data, isLoadingTaxationRequiredAccountFields = _d.isLoading;
+    var _e = useQuery({
         queryKey: ["account", quote === null || quote === void 0 ? void 0 : quote.accountId],
         queryFn: function () {
-            return (quote === null || quote === void 0 ? void 0 : quote.accountId) && getAccount({ id: quote.accountId, token: token, apiHost: apiHost });
+            return (quote === null || quote === void 0 ? void 0 : quote.accountId) && getAccount({ id: quote.accountId, apiHost: apiHost, token: token });
         },
         enabled: Boolean(quote === null || quote === void 0 ? void 0 : quote.accountId) &&
             ((taxationRequiredAccountFields === null || taxationRequiredAccountFields === void 0 ? void 0 : taxationRequiredAccountFields.length) || 0) > 0,
-    }), account = _g.data, isLoadingAccount = _g.isLoading;
+    }), account = _e.data, isLoadingAccount = _e.isLoading;
     useQuery({
         queryKey: queryKeyFactory.createQuoteTaxCalculateKey({
             id: quote === null || quote === void 0 ? void 0 : quote.id,
@@ -20292,8 +20296,8 @@ var Checkout = function (_a) {
                         if (!quote) return [3 /*break*/, 2];
                         return [4 /*yield*/, quoteRecalculateTaxes({
                                 quoteId: quote.id,
-                                token: token,
                                 apiHost: apiHost,
+                                token: token,
                             })];
                     case 1:
                         updatedQuote = _a.sent();
@@ -20304,7 +20308,7 @@ var Checkout = function (_a) {
                                 token: token,
                             });
                             calculatedPricesKey = queryKeyFactory.calculatedPricesKey({
-                                quantity: quantity,
+                                // quantity,
                                 priceListId: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id,
                                 token: token,
                             });
@@ -20328,11 +20332,11 @@ var Checkout = function (_a) {
         return null;
     return (jsx("div", __assign({ className: "flex flex-col fixed top-0 left-0 right-0 bottom-0 bg-slate-50 overflow-auto", style: {
             zIndex: 1001,
-        } }, { children: jsxs("div", __assign({ className: pageWrapperClassName(isMobile) }, { children: [jsx("div", __assign({ className: "flex justify-end w-full" }, { children: jsx(CloseOutlined, { className: "text-base bunny-shadow-padding-xb", onClick: onCancel }) })), jsxs("div", __assign({ className: "flex justify-end gap-6 pt-4 ".concat(isMobile ? "flex-col" : "bunny-shadow-padding-xb") }, { children: [((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_b = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _b === void 0 ? void 0 : _b.html)) && (jsx(InvoiceQuoteView, { html: invoice ? invoice.html : quote ? quote.formattedQuote.html : "" })), !isMobile && ((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_c = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _c === void 0 ? void 0 : _c.html)) && (jsx(Divider, { className: "h-full", type: "vertical" })), invoice ? (jsx("div", __assign({ className: "w-full pt-12" }, { children: jsx(PaymentForm, { onPaymentSuccess: onSuccess, onFail: onFail, invoice: invoice, graphQLClient: graphQLClient }) }))) : quote ? (jsx(QuoteCheckout, { account: account, onFail: function (error) {
+        } }, { children: jsxs("div", __assign({ className: pageWrapperClassName(isMobile) }, { children: [jsx("div", __assign({ className: "flex justify-end w-full" }, { children: jsx(CloseOutlined, { className: "text-base bunny-shadow-padding-xb", onClick: onCancel }) })), jsxs("div", __assign({ className: "flex justify-end gap-6 pt-4 ".concat(isMobile ? "flex-col" : "bunny-shadow-padding-xb") }, { children: [((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_b = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _b === void 0 ? void 0 : _b.html)) && (jsx(InvoiceQuoteView, { html: invoice ? invoice.html : quote ? quote.formattedQuote.html : "" })), !isMobile && ((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_c = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _c === void 0 ? void 0 : _c.html)) && (jsx(Divider, { className: "h-full", type: "vertical" })), invoice ? (jsx("div", __assign({ className: "w-full pt-12" }, { children: jsx(PaymentForm, { onPaymentSuccess: onSuccess, onFail: onFail, invoice: invoice }) }))) : quote ? (jsx(QuoteCheckout, { account: account, onFail: function (error) {
                                 onFail(error);
                             }, onSuccess: onSuccess, quote: quote, taxationRequiredAccountFields: taxationRequiredAccountFields, token: token })) : (jsx(PaymentForm, { onFail: function (error) {
                                 onFail(error);
-                            }, onPaymentSuccess: onSuccess, graphQLClient: graphQLClient }))] })), jsx(Footer, {})] })) })));
+                            }, onPaymentSuccess: onSuccess }))] })), jsx(Footer, {})] })) })));
 };
 
 var PageTitle = function (_a) {
@@ -20351,70 +20355,44 @@ var PageTitle = function (_a) {
 
 var SubscriptionsContext = createContext({});
 
-var calculateNewQuantity = function (priceList, currentQuantity) {
-    if (currentQuantity === void 0) { currentQuantity = 1; }
-    var priceListRecurringCharge = priceList === null || priceList === void 0 ? void 0 : priceList.charges.find(function (priceListCharge) {
-        return priceListCharge.chargeType === "RECURRING" ||
-            priceListCharge.chargeType === "USAGE";
+var QUOTE_CHARGE_UPDATE = "\n  mutation QuoteChargeUpdate (\n    $discount: Float,\n    $endDate: ISO8601Date,\n    $name: String,\n    $price: Float,\n    $quantity: Int,\n    $quoteChargeId: ID!\n    $startDate: ISO8601Date\n    $subtotal: Float,\n  ) {\n    quoteChargeUpdate(\n      discount: $discount\n      endDate: $endDate\n      name: $name\n      price: $price\n      quantity: $quantity\n      quoteChargeId: $quoteChargeId\n      startDate: $startDate\n      subtotal: $subtotal\n    ) {\n      quoteCharge {\n        id\n      }\n    }\n  }\n";
+var quoteChargeUpdate = function (_a) {
+    var discount = _a.discount, 
+    // endDate,
+    name = _a.name, price = _a.price, quantity = _a.quantity, quoteChargeId = _a.quoteChargeId, startDate = _a.startDate, subtotal = _a.subtotal, apiHost = _a.apiHost, token = _a.token;
+    return gqlRequest({
+        query: QUOTE_CHARGE_UPDATE,
+        vars: {
+            subtotal: subtotal,
+            discount: discount,
+            // endDate,
+            name: name,
+            price: price,
+            quantity: quantity,
+            quoteChargeId: quoteChargeId,
+            startDate: startDate,
+        },
+        apiHost: apiHost,
+        token: token,
     });
-    var quantityMax = (priceListRecurringCharge === null || priceListRecurringCharge === void 0 ? void 0 : priceListRecurringCharge.quantityMax) || Number.POSITIVE_INFINITY;
-    var quantityMin = (priceListRecurringCharge === null || priceListRecurringCharge === void 0 ? void 0 : priceListRecurringCharge.quantityMin) || Number.NEGATIVE_INFINITY;
-    var selfServiceQuantity = priceListRecurringCharge === null || priceListRecurringCharge === void 0 ? void 0 : priceListRecurringCharge.selfServiceQuantity;
-    // If self service quantity is disabled, return the min quantity
-    if (!selfServiceQuantity && quantityMin) {
-        return quantityMin;
-    }
-    // If the current quantity is greater than the max quantity, return the max quantity
-    else if (currentQuantity > quantityMax) {
-        return quantityMax;
-    }
-    // If the current quantity is less than the min quantity, return the min quantity
-    else if (currentQuantity < quantityMin) {
-        return quantityMin;
-    }
-    // If the current quantity is between the min and max quantity, return the current quantity
-    else if (currentQuantity <= quantityMax && currentQuantity >= quantityMin) {
-        return currentQuantity;
-    }
-    // If all else fails, return 1
-    else {
-        return 1;
-    }
 };
 
 var CheckoutBarInput = function (_a) {
-    var charge = _a.charge, quantity = _a.quantity, selectedPriceList = _a.selectedPriceList, setQuantity = _a.setQuantity;
+    var disabled = _a.disabled, charge = _a.charge, quantity = _a.quantity, selectedPriceList = _a.selectedPriceList, onQuantityChanged = _a.onQuantityChanged;
+    // State
     var _b = useState(false), isTooltipOpen = _b[0], setIsTooltipOpen = _b[1];
-    // Context
-    var _c = useContext(SubscriptionsContext), setQuotePreviewData = _c.setQuotePreviewData, quotePreviewData = _c.quotePreviewData;
+    var _c = useState(0), quantityLocal = _c[0], setQuantityLocal = _c[1];
     // Hooks
     var isMobile = useIsMobile();
-    // Handlers
-    var onChangeQuantity = function (quantity) {
-        if (quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList) {
-            setQuotePreviewData({
-                priceList: quotePreviewData.priceList,
-                quantity: calculateNewQuantity(quotePreviewData.priceList, quantity),
-            });
-        }
-        else {
-            console.error("No price list found in quote preview data");
-        }
-    };
-    var onBlurUsers = function (e) {
-        var amount = Number(e.target.value);
-        if (!amount) {
-            onChangeQuantity(1);
-        }
-    };
-    // Quantity debounce
-    // eslint-disable-next-line
     var quoteChangeDebounce = useCallback(lodashExports.debounce(function (newQuantity) { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
-            onChangeQuantity(newQuantity);
+            onQuantityChanged(newQuantity);
             return [2 /*return*/];
         });
     }); }, 1000), []);
+    useEffect(function () {
+        setQuantityLocal(quantity);
+    }, [quantity]);
     useEffect(function () {
         setTimeout(function () {
             setIsTooltipOpen(true);
@@ -20430,11 +20408,11 @@ var CheckoutBarInput = function (_a) {
                         paddingTop: "0.75rem",
                         paddingBottom: "0.75rem",
                     },
-                } }, { children: jsx(Input, { className: isMobile ? "text-right" : "", disabled: !selectedPriceList || !charge.selfServiceQuantity, onBlur: onBlurUsers, onChange: function (e) {
+                } }, { children: jsx(Input, { className: isMobile ? "text-right" : "", disabled: disabled || !selectedPriceList || !charge.selfServiceQuantity, onChange: function (e) {
                         var quantity = Number(e.target.value);
-                        setQuantity(quantity);
+                        setQuantityLocal(quantity);
                         quoteChangeDebounce(quantity);
-                    }, min: charge === null || charge === void 0 ? void 0 : charge.quantityMin, max: charge === null || charge === void 0 ? void 0 : charge.quantityMax, style: { minWidth: "120px" }, type: "number", value: quantity, required: true }) }))] })));
+                    }, min: charge === null || charge === void 0 ? void 0 : charge.quantityMin, max: charge === null || charge === void 0 ? void 0 : charge.quantityMax, style: { minWidth: "120px" }, type: "number", value: quantityLocal, required: true }) }))] })));
 };
 var QuantityLabel = function (_a) {
     var _b;
@@ -20554,7 +20532,7 @@ var CheckoutPrice = function (_a) {
 
 var CheckoutBarSummarySection = function (_a) {
     var _b;
-    var open = _a.open, quantityLocal = _a.quantityLocal, quote = _a.quote, selectedPriceList = _a.selectedPriceList, onClickCheckout = _a.onClickCheckout, upgradingSubscription = _a.upgradingSubscription, quotePreviewData = _a.quotePreviewData;
+    var open = _a.open, quote = _a.quote, selectedPriceList = _a.selectedPriceList, onClickCheckout = _a.onClickCheckout, upgradingSubscription = _a.upgradingSubscription, quotePreviewData = _a.quotePreviewData;
     // Context
     var apiHost = useContext(BunnyContext).apiHost;
     // Hooks
@@ -20574,7 +20552,7 @@ var CheckoutBarSummarySection = function (_a) {
     });
     var checkoutButtonDisabled = Boolean(!(quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity) ||
         !selectedPriceList ||
-        quantityLocal !== quotePreviewData.quantity ||
+        // quantityLocal !== quotePreviewData.quantity ||
         isFetching ||
         selectedPriceList.id === (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) ||
         open);
@@ -20595,82 +20573,90 @@ var PlanPickerCheckoutBarWrapper = function (_a) {
     return (jsx(PlanPickerCheckoutBar, { handlePortalErrors: handlePortalErrors, selectedPriceList: selectedPriceList, onCheckoutSuccess: onCheckoutSuccess }));
 };
 var PlanPickerCheckoutBar = function (_a) {
-    var _b;
     var selectedPriceList = _a.selectedPriceList, handlePortalErrors = _a.handlePortalErrors, onCheckoutSuccess = _a.onCheckoutSuccess;
     // Context
     var token = useToken();
-    var _c = useContext(SubscriptionsContext), quotePreviewData = _c.quotePreviewData, upgradingSubscription = _c.upgradingSubscription, shadow = _c.shadow;
-    var _d = useContext(BunnyContext), apiHost = _d.apiHost, graphQLClient = _d.graphQLClient;
+    var _b = useContext(SubscriptionsContext), quotePreviewData = _b.quotePreviewData, upgradingSubscription = _b.upgradingSubscription, shadow = _b.shadow;
+    var apiHost = useContext(BunnyContext).apiHost;
     // Local state
-    var _e = useState(0), quantityLocal = _e[0], setQuantity = _e[1];
-    var _f = useState(0), prevQuantity = _f[0], setPrevQuantity = _f[1];
-    var _g = useState(false), payModalVisible = _g[0], setPayModalVisible = _g[1];
+    var _c = useState(false), payModalVisible = _c[0], setPayModalVisible = _c[1];
+    var quoteIdRef = useRef();
     // Hooks
     var showSuccessNotification = useSuccessNotification();
     var queryClient = useQueryClient();
     var isMobile = useIsMobile();
-    var storedPaymentMethod = usePaymentMethod({
-        graphQLClient: graphQLClient,
+    var defaultPaymentMethod = usePaymentMethod({
         token: token,
-    }).data;
-    // Quote ID ref
-    var quoteIdRef = useRef();
+        apiHost: apiHost,
+    }).defaultPaymentMethod;
+    var createSubscriptionQuote = useQuoteSubscriptionUpgrade();
+    // Mutations
+    var createQuote = useMutation({
+        mutationFn: function (_a) {
+            var subscriptionId = _a.subscriptionId, priceListId = _a.priceListId;
+            return createSubscriptionQuote(subscriptionId, priceListId, apiHost, token);
+        },
+        onSuccess: function (subscriptionUpdateData) {
+            var _a;
+            var quote = (_a = subscriptionUpdateData === null || subscriptionUpdateData === void 0 ? void 0 : subscriptionUpdateData.quoteSubscriptionUpgrade) === null || _a === void 0 ? void 0 : _a.quote;
+            quoteIdRef.current = quote.id;
+        },
+    });
+    var updateCharge = useMutation({
+        mutationFn: quoteChargeUpdate,
+        onSuccess: function () {
+            queryClient.invalidateQueries({
+                queryKey: QueryKeyFactory.default.createQuoteKey({
+                    id: quoteIdRef.current || "",
+                    token: token,
+                }),
+            });
+        },
+    }).mutate;
     // Queries
-    var _h = useQuery({
-        queryKey: QueryKeyFactory.default.calculatedPricesKey({
-            quantity: (quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity) || 0,
-            priceListId: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id,
+    var quote = useQuery({
+        queryKey: QueryKeyFactory.default.createQuoteKey({
+            id: quoteIdRef.current || "",
             token: token,
         }),
         queryFn: function () { return __awaiter(void 0, void 0, void 0, function () {
             var quote;
-            var _a;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0: return [4 /*yield*/, quoteCompose({
-                            priceListId: (_a = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList) === null || _a === void 0 ? void 0 : _a.id,
-                            quantity: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity,
-                            quoteId: quoteIdRef.current,
-                            subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, getQuote({
+                            id: quoteIdRef.current || "",
                             token: token,
                             apiHost: apiHost,
                         })];
                     case 1:
-                        quote = _b.sent();
-                        quoteIdRef.current = quote === null || quote === void 0 ? void 0 : quote.id;
+                        quote = _a.sent();
                         return [2 /*return*/, quote];
                 }
             });
         }); },
-        // 'enabled' is commented out for HACKY FIX
-        // enabled: Boolean(
-        //   quotePreviewData?.priceList?.id &&
-        //     selectedPriceList &&
-        //     selectedPriceList.id !== upgradingSubscription?.priceList.id
-        // ),
-        enabled: false,
-        placeholderData: keepPreviousData,
-    }), quote = _h.data, refetch = _h.refetch;
-    // TODO: eventually solve this hacky fix
-    // THIS IS NOT OKAY (we couldn't find any other solution on short notice)
-    // HACKY FIX START
-    // Essentially this useEffect is doing the work useQuery is supposed to do, but isn't doing properly.
+    }).data;
     useEffect(function () {
-        var _a;
-        if (((_a = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList) === null || _a === void 0 ? void 0 : _a.id) &&
-            selectedPriceList &&
-            selectedPriceList.id !== (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id)) {
-            refetch();
+        if (!(upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id)) {
+            console.error("upgradingSubscription is undefined");
+            return;
         }
-    }, [
-        (_b = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList) === null || _b === void 0 ? void 0 : _b.id,
-        quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity,
-        refetch,
-        selectedPriceList,
-        selectedPriceList.id,
-        upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id,
-    ]);
-    // HACKY FIX END
+        createQuote.mutate({
+            subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
+            priceListId: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id,
+        });
+    }, [selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id, upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id]);
+    // Reset query key on unmount
+    useEffect(function () {
+        return function () {
+            queryClient.invalidateQueries({
+                queryKey: QueryKeyFactory.default.calculatedPricesKey({
+                    priceListId: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id,
+                    quantity: (quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity) || 0,
+                    token: token,
+                }),
+            });
+        };
+    }, [queryClient, selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id, quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity, token]);
     var handleCheckoutSuccess = function () {
         queryClient.invalidateQueries({
             queryKey: QueryKeyFactory.default.createTableKey({
@@ -20688,39 +20674,45 @@ var PlanPickerCheckoutBar = function (_a) {
     var onCheckoutFail = function (error) {
         handlePortalErrors(error);
     };
-    // Set quantity from quote preview data
-    useEffect(function () {
-        if ((quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity) &&
-            prevQuantity !== quotePreviewData.quantity) {
-            setQuantity(quotePreviewData.quantity);
-            setPrevQuantity(quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity);
+    function onChangeQuantity(chargeId, quantity) {
+        var quoteChange = quote === null || quote === void 0 ? void 0 : quote.quoteChanges.find(function (qc) { return qc.priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id); });
+        var quoteCharge = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.find(function (charge) {
+            var _a;
+            return ((_a = charge === null || charge === void 0 ? void 0 : charge.priceListCharge) === null || _a === void 0 ? void 0 : _a.id) === chargeId;
+        });
+        if (!token) {
+            console.error("token is undefined");
+            return;
         }
-    }, [
-        prevQuantity,
-        quantityLocal,
-        quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity,
-        setPrevQuantity,
-        setQuantity,
-    ]);
-    // Reset query key on unmount
-    useEffect(function () {
-        return function () {
-            queryClient.invalidateQueries({
-                queryKey: QueryKeyFactory.default.calculatedPricesKey({
-                    priceListId: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id,
-                    quantity: (quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity) || 0,
-                    token: token,
-                }),
-            });
-        };
-    }, [queryClient, selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id, quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity, token]);
+        if (!quoteCharge) {
+            console.error("quoteCharge not found");
+            return;
+        }
+        updateCharge({
+            quoteChargeId: quoteCharge.id,
+            quantity: quantity,
+            apiHost: apiHost,
+            token: token,
+        });
+    }
     return (jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-col gap-4" : "flex-row", " my-2 p-4 justify-between bg-white rounded-md ").concat(shadow ? "shadow-".concat(shadow) : "") }, { children: [jsx("div", __assign({ className: "".concat(isMobile ? "flex flex-col" : "flex", " gap-4") }, { children: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.charges.map(function (charge, index) {
-                    return (jsx(CheckoutBarInput, { charge: charge, quantity: quantityLocal || 0, selectedPriceList: selectedPriceList, setQuantity: setQuantity }, index));
-                }) })), jsx(CheckoutBarSummarySection, { onClickCheckout: function () { return setPayModalVisible(true); }, open: payModalVisible, quantityLocal: quantityLocal, quote: quote, selectedPriceList: selectedPriceList, upgradingSubscription: upgradingSubscription, quotePreviewData: quotePreviewData }), jsx(Checkout, { isMobile: isMobile, onCancel: function () { return setPayModalVisible(false); }, onFail: onCheckoutFail, onSuccess: handleCheckoutSuccess, open: payModalVisible, quantity: quantityLocal, quote: quote, selectedPriceList: selectedPriceList, storedPaymentMethod: storedPaymentMethod, token: token })] })));
+                    var _a;
+                    var quoteChange = quote === null || quote === void 0 ? void 0 : quote.quoteChanges.find(function (qc) { return qc.priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id); });
+                    var chargeQuantity = (_a = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.find(function (charge) { var _a; return ((_a = charge === null || charge === void 0 ? void 0 : charge.priceList) === null || _a === void 0 ? void 0 : _a.id) === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id); })) === null || _a === void 0 ? void 0 : _a.quantity;
+                    if (charge.chargeType === ChargeType.USAGE)
+                        return null;
+                    if (!quote)
+                        return null;
+                    if (!chargeQuantity)
+                        return null;
+                    return (jsx(CheckoutBarInput, { disabled: !chargeQuantity, charge: charge, quantity: chargeQuantity !== null && chargeQuantity !== void 0 ? chargeQuantity : 0, selectedPriceList: selectedPriceList, onQuantityChanged: function (quantity) {
+                            onChangeQuantity(charge.id, quantity);
+                        } }, index));
+                }) })), jsx(CheckoutBarSummarySection, { onClickCheckout: function () { return setPayModalVisible(true); }, open: payModalVisible, quote: quote, selectedPriceList: selectedPriceList, upgradingSubscription: upgradingSubscription, quotePreviewData: quotePreviewData }), jsx(Checkout, { isMobile: isMobile, onCancel: function () { return setPayModalVisible(false); }, onFail: onCheckoutFail, onSuccess: handleCheckoutSuccess, open: payModalVisible, quote: quote, selectedPriceList: selectedPriceList, storedPaymentMethod: defaultPaymentMethod, token: token })] })));
 };
 
 // WARNING: There is a preview button on APP that will need to be changed if this query is changed
-var PRICE_LIST_CHANGE_OPTIONS_QUERY = "\n  query priceListChangeOptions($subscriptionId: ID, $productId: ID) {\n    priceListChangeOptions(subscriptionId: $subscriptionId, productId: $productId) {\n      products {\n        everythingInPlus\n        id\n        name\n        features(sort: \"position asc\") {\n          description\n          id\n          isVisible\n          kind\n          name\n          position\n        }\n      }\n      priceLists {\n        basePrice\n        id\n        currencyId\n        periodMonths\n        plan {\n          code\n          contactUsLabel\n          contactUsUrl\n          description\n          id\n          name\n          position\n          pricingDescription\n          pricingStyle\n          planFeatures {\n            featureId\n            value\n            feature {\n              name\n            }\n          }\n        }\n        product {\n          id\n        }\n        charges {\n          basePrice\n          billingPeriod\n          chargeType\n          id\n          name\n          priceDecimals\n          pricingModel\n          quantityMax\n          quantityMin\n          selfServiceQuantity\n          feature {\n            name\n            unitName\n          }\n        }\n      }\n    }\n  }";
+var PRICE_LIST_CHANGE_OPTIONS_QUERY = "\n  query priceListChangeOptions($subscriptionId: ID, $productId: ID) {\n    priceListChangeOptions(subscriptionId: $subscriptionId, productId: $productId) {\n      products {\n        everythingInPlus\n        id\n        name\n        plansToDisplay\n        features(sort: \"position asc\") {\n          description\n          id\n          isVisible\n          kind\n          name\n          position\n        }\n      }\n      priceLists {\n        basePrice\n        id\n        currencyId\n        periodMonths\n        plan {\n          code\n          contactUsLabel\n          contactUsUrl\n          description\n          id\n          name\n          position\n          pricingDescription\n          pricingStyle\n          planFeatures {\n            featureId\n            value\n            feature {\n              name\n            }\n          }\n        }\n        product {\n          id\n        }\n        charges {\n          basePrice\n          billingPeriod\n          chargeType\n          id\n          name\n          priceDecimals\n          pricingModel\n          quantityMax\n          quantityMin\n          selfServiceQuantity\n          feature {\n            name\n            unitName\n          }\n        }\n      }\n    }\n  }";
 var getPriceListChangeOptions = function (_a) {
     var apiHost = _a.apiHost, isInPreviewMode = _a.isInPreviewMode, productId = _a.productId, token = _a.token, upgradingSubscription = _a.upgradingSubscription;
     return __awaiter(void 0, void 0, void 0, function () {
@@ -20754,6 +20746,37 @@ var ErrorView = function (_a) {
     return (jsxs("div", __assign({ className: "flex flex-col w-full", style: { marginTop: "80px" } }, { children: [jsx("div", __assign({ style: { fontSize: "32px" } }, { children: message })), children] })));
 };
 
+var calculateNewQuantity = function (priceList, currentQuantity) {
+    if (currentQuantity === void 0) { currentQuantity = 1; }
+    var priceListRecurringCharge = priceList === null || priceList === void 0 ? void 0 : priceList.charges.find(function (priceListCharge) {
+        return priceListCharge.chargeType === "RECURRING" ||
+            priceListCharge.chargeType === "USAGE";
+    });
+    var quantityMax = (priceListRecurringCharge === null || priceListRecurringCharge === void 0 ? void 0 : priceListRecurringCharge.quantityMax) || Number.POSITIVE_INFINITY;
+    var quantityMin = (priceListRecurringCharge === null || priceListRecurringCharge === void 0 ? void 0 : priceListRecurringCharge.quantityMin) || Number.NEGATIVE_INFINITY;
+    var selfServiceQuantity = priceListRecurringCharge === null || priceListRecurringCharge === void 0 ? void 0 : priceListRecurringCharge.selfServiceQuantity;
+    // If self service quantity is disabled, return the min quantity
+    if (!selfServiceQuantity && quantityMin) {
+        return quantityMin;
+    }
+    // If the current quantity is greater than the max quantity, return the max quantity
+    else if (currentQuantity > quantityMax) {
+        return quantityMax;
+    }
+    // If the current quantity is less than the min quantity, return the min quantity
+    else if (currentQuantity < quantityMin) {
+        return quantityMin;
+    }
+    // If the current quantity is between the min and max quantity, return the current quantity
+    else if (currentQuantity <= quantityMax && currentQuantity >= quantityMin) {
+        return currentQuantity;
+    }
+    // If all else fails, return 1
+    else {
+        return 1;
+    }
+};
+
 var BillingPeriodSelector = function (_a) {
     var availableBillingPeriods = _a.availableBillingPeriods, onChangeBillingPeriod = _a.onChangeBillingPeriod, products = _a.products, selectedBillingPeriod = _a.selectedBillingPeriod, selectedProduct = _a.selectedProduct, onChangeProduct = _a.onChangeProduct;
     var _b = useContext(BrandContext), secondaryColor = _b.secondaryColor, brandColor = _b.brandColor;
@@ -20802,22 +20825,22 @@ var PriceListCardPrice = function (_a) {
                 : "Free" })));
 };
 
-var Text$c = Typography.Text;
+var Text$d = Typography.Text;
 var PriceListCardDescription = function (_a) {
     var description = _a.description;
     if (!description)
         return null;
-    return jsx(Text$c, __assign({ className: "text-center" }, { children: description }));
+    return jsx(Text$d, __assign({ className: "text-center" }, { children: description }));
 };
 
-var Text$b = Typography.Text;
+var Text$c = Typography.Text;
 var PriceListCardPriceDescription = function (_a) {
     var feature = _a.feature, priceList = _a.priceList;
     var isMobile = useIsMobile();
     var doesPlanHaveFlatFeeCharges = priceList.charges.some(function (charge) { return charge.pricingModel === PricingModel.FLAT && charge.basePrice > 0; });
     if (priceList.periodMonths <= 0 || priceList.plan.pricingStyle !== PricingStyle.PRICED)
         return null;
-    return (jsx(Text$b, __assign({ className: "text-center text-gray-900", style: {
+    return (jsx(Text$c, __assign({ className: "text-center text-gray-900", style: {
             fontSize: isMobile ? "13px" : "12px",
         } }, { children: priceList.plan.pricingDescription
             ? priceList.plan.pricingDescription
@@ -20890,7 +20913,6 @@ var PriceListCardDesktop = function (_a) {
                 }
             }, style: {
                 height: "100%",
-                maxWidth: "440px",
             } }, { children: [jsxs("div", __assign({ className: "flex flex-col items-center gap-3" }, { children: [jsxs("div", __assign({ className: "flex flex-col items-center gap-2" }, { children: [jsx(PriceListCardTitle, { isPriceListCurrentSubscription: isPriceListCurrentSubscription, priceList: priceList, trialRemainingDays: trialRemainingDays }), jsx(PriceListCardDescription, { description: description })] })), jsxs("div", __assign({ className: "flex flex-col items-center gap-2" }, { children: [jsx(PriceListCardPrice, { priceList: priceList }), jsx(PriceListCardPriceDescription, { feature: feature, priceList: priceList })] }))] })), jsx(PriceListCardButton, { disableOnClick: disableOnClick, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, subscriptionPlan: subscriptionPlan })] })) }));
 };
 
@@ -20924,18 +20946,18 @@ var PriceListCard = function (_a) {
     return isMobile ? (jsx(PriceListCardMobile, { description: description, disableOnClick: disableOnClick, feature: feature, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, onClick: onClick, priceList: priceList, trialRemainingDays: trialRemainingDays, subscriptionPlan: subscriptionPlan })) : (jsx(PriceListCardDesktop, { description: description, disableOnClick: disableOnClick, feature: feature, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, onClick: onClick, priceList: priceList, trialRemainingDays: trialRemainingDays, subscriptionPlan: subscriptionPlan }));
 };
 
-var Text$a = Typography.Text;
+var Text$b = Typography.Text;
 var PriceListCardFeature = function (_a) {
     var index = _a.index, planFeature = _a.planFeature;
     var brandColor = useContext(BrandContext).brandColor;
     if (planFeature.feature.kind === "GROUP")
-        return jsx(Text$a, __assign({ className: "font-medium base-text" }, { children: planFeature.name }));
-    return (jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }), jsx(Text$a, __assign({ className: "text-gray-600" }, { children: planFeature.feature.name }))] }), index));
+        return jsx(Text$b, __assign({ className: "font-medium base-text" }, { children: planFeature.name }));
+    return (jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }), jsx(Text$b, __assign({ className: "text-gray-600" }, { children: planFeature.feature.name }))] }), index));
 };
 
 var getAvailablePlansAndPriceLists = function (_a) {
-    var availablePriceLists = _a.availablePriceLists, priceListChangeOptions = _a.priceListChangeOptions, priceListStart = _a.priceListStart;
-    var displayPriceLists = availablePriceLists.slice(priceListStart, priceListStart + 3);
+    var availablePriceLists = _a.availablePriceLists, priceListChangeOptions = _a.priceListChangeOptions, priceListStart = _a.priceListStart, plansToDisplay = _a.plansToDisplay;
+    var displayPriceLists = availablePriceLists.slice(priceListStart, priceListStart + plansToDisplay);
     var availablePlansArray = displayPriceLists === null || displayPriceLists === void 0 ? void 0 : displayPriceLists.map(function (displayPriceList) {
         var _a;
         var foundPriceList = (_a = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _a === void 0 ? void 0 : _a.find(function (priceList) { return priceList.plan.id === displayPriceList.plan.id; });
@@ -20965,6 +20987,67 @@ var PriceListGridMobile = function (_a) {
                     : "Features" })), jsx("div", __assign({ className: "flex flex-col gap-4 overflow-auto shadow-padding-x" }, { children: (_e = (_d = selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.plan) === null || _d === void 0 ? void 0 : _d.planFeatures) === null || _e === void 0 ? void 0 : _e.map(function (planFeature, index) { return (jsx(PriceListCardFeature, { planFeature: planFeature, index: index }, index)); }) }))] }));
 };
 
+var NextPriceListButton = function (_a) {
+    var availablePriceLists = _a.availablePriceLists, priceListStart = _a.priceListStart, setPriceListStart = _a.setPriceListStart, numberOfPlansToDisplay = _a.numberOfPlansToDisplay;
+    return (jsxs("div", __assign({ className: "absolute flex gap-1", style: { top: "12px", right: "8px", zIndex: 10 } }, { children: [priceListStart > 0 && (jsx("div", __assign({ className: "flex items-center justify-center rounded-full shadow p-1 cursor-pointer", onClick: function () {
+                    setPriceListStart(function (prev) {
+                        var newValue = prev - 1;
+                        if (newValue < 0) {
+                            return prev;
+                        }
+                        return newValue;
+                    });
+                }, style: { width: "22px", height: "22px" } }, { children: jsx(FontAwesomeIcon, { icon: faChevronLeft }) }))), priceListStart < availablePriceLists.length - numberOfPlansToDisplay && (jsx("div", __assign({ className: "flex items-center justify-center rounded-full shadow p-1 cursor-pointer", onClick: function () {
+                    return setPriceListStart(function (prev) {
+                        var newValue = prev + 1;
+                        if (newValue >= availablePriceLists.length) {
+                            return prev;
+                        }
+                        return newValue;
+                    });
+                }, style: { width: "22px", height: "22px" } }, { children: jsx(FontAwesomeIcon, { icon: faChevronRight }) })))] })));
+};
+
+var filterUniqueFeatures = function (_a) {
+    // Remove any features that in previous plans if everythingInPlus is true
+    var availablePriceLists = _a.availablePriceLists;
+    var uniqueFeatures = new Set();
+    var updatedPriceLists = availablePriceLists.map(function (priceList) {
+        var _a;
+        var updatedPlanFeatures = (_a = priceList.plan.planFeatures) === null || _a === void 0 ? void 0 : _a.filter(function (feature) {
+            if (uniqueFeatures.has(feature.featureId)) {
+                return false;
+            }
+            else {
+                uniqueFeatures.add(feature.featureId);
+                return true;
+            }
+        });
+        return __assign(__assign({}, priceList), { plan: __assign(__assign({}, priceList.plan), { planFeatures: updatedPlanFeatures }) });
+    });
+    return updatedPriceLists;
+};
+var EverythingPlanFeatures = function (_a) {
+    var availablePriceLists = _a.availablePriceLists, selectedProduct = _a.selectedProduct, plansToDisplay = _a.plansToDisplay;
+    var brandColor = useContext(BrandContext).brandColor;
+    var uniquePlanFeatures = filterUniqueFeatures({ availablePriceLists: availablePriceLists });
+    return (jsx(Fragment, { children: __spreadArray([], Array(plansToDisplay), true).map(function (_, planIndex) {
+            var priceList = uniquePlanFeatures[planIndex];
+            var prevPriceList = availablePriceLists[planIndex - 1];
+            if (!priceList)
+                return (jsx("div", { style: prevPriceList ? { borderLeft: "1px solid ".concat(SLATE_200) } : {} }, planIndex));
+            if (!priceList.plan.planFeatures)
+                return jsx("div", {}, planIndex);
+            return (jsx("div", __assign({ className: "flex flex-col gap-4 p-4", style: { borderLeft: "1px solid ".concat(SLATE_200) } }, { children: priceList.plan.planFeatures.map(function (planFeature, planFeatureIndex) {
+                    var everythingInPlus = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus;
+                    return (jsxs("div", __assign({ className: "contents" }, { children: [prevPriceList &&
+                                everythingInPlus &&
+                                planIndex > 0 &&
+                                planFeatureIndex === 0 && (jsx("div", __assign({ className: "font-medium", style: { fontSize: "13px" } }, { children: everythingInPlusString({ priceList: prevPriceList }) }))), jsxs("div", __assign({ className: "flex gap-1 text-gray-600", style: { fontSize: "13px" } }, { children: [jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }), planFeature.feature.name] }))] }), planFeatureIndex));
+                }) }), planIndex));
+        }) }));
+};
+
 var shouldColorRow = function (_a) {
     var isFeatureGroup = _a.isFeatureGroup, rowIndex = _a.rowIndex;
     return !isFeatureGroup && rowIndex % 2 === 1;
@@ -20979,12 +21062,10 @@ var FeatureGridCell = function (_a) {
             : {})) }, { children: children })));
 };
 
-var PLANS_TO_DISPLAY$1 = 3;
-
-var Text$9 = Typography.Text;
+var Text$a = Typography.Text;
 var PlanFeatures = function (_a) {
     var _b;
-    var availablePlansArray = _a.availablePlansArray, selectedProduct = _a.selectedProduct;
+    var availablePlansArray = _a.availablePlansArray, selectedProduct = _a.selectedProduct, plansToDisplay = _a.plansToDisplay;
     var featureGroupCounter = useRef(0);
     var visibleFeatureCounter = useRef(1);
     var brandColor = useContext(BrandContext).brandColor;
@@ -21009,7 +21090,7 @@ var PlanFeatures = function (_a) {
             rowIndex = rowIndex + featureGroupCounter.current;
             // Increment the visible feature counter
             visibleFeatureCounter.current = visibleFeatureCounter.current + 1;
-            return (jsxs("div", __assign({ className: "contents" }, { children: [jsx(FeatureGridCell, __assign({ isFeatureGroup: isFeatureGroup, noBorder: true, rowIndex: rowIndex }, { children: jsx(FeatureTitle, { isFeatureGroup: isFeatureGroup, feature: feature }) })), __spreadArray([], Array(PLANS_TO_DISPLAY$1), true).map(function (_, columnIndex) {
+            return (jsxs("div", __assign({ className: "contents" }, { children: [jsx(FeatureGridCell, __assign({ isFeatureGroup: isFeatureGroup, noBorder: true, rowIndex: rowIndex }, { children: jsx(FeatureTitle, { isFeatureGroup: isFeatureGroup, feature: feature }) })), __spreadArray([], Array(plansToDisplay), true).map(function (_, columnIndex) {
                         var _a;
                         var plan = availablePlansArray[columnIndex];
                         var doesHavePrevPlan = availablePlansArray[columnIndex - 1];
@@ -21019,76 +21100,17 @@ var PlanFeatures = function (_a) {
                         if (!plan)
                             return (jsx(FeatureGridCell, { rowIndex: rowIndex, noBorder: !Boolean(doesHavePrevPlan) }, columnIndex));
                         if (isFeatureGroup)
-                            return jsx(FeatureGridCell, { isFeatureGroup: true, rowIndex: rowIndex }, columnIndex);
-                        return (jsx(FeatureGridCell, __assign({ rowIndex: rowIndex }, { children: jsx("div", __assign({ className: "flex justify-center text-center" }, { children: planFeature ? ((planFeature === null || planFeature === void 0 ? void 0 : planFeature.value) ? (planFeature.value) : (jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }))) : (jsx(Text$9, __assign({ className: "text-gray" }, { children: "-" }))) })) }), columnIndex));
+                            return (jsx(FeatureGridCell, { isFeatureGroup: true, rowIndex: rowIndex }, columnIndex));
+                        return (jsx(FeatureGridCell, __assign({ rowIndex: rowIndex }, { children: jsx("div", __assign({ className: "flex justify-center text-center" }, { children: planFeature ? ((planFeature === null || planFeature === void 0 ? void 0 : planFeature.value) ? (planFeature.value) : (jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }))) : (jsx(Text$a, __assign({ className: "text-gray" }, { children: "-" }))) })) }), columnIndex));
                     })] }), rowIndex));
         }) }));
 };
 var FeatureTitle = function (_a) {
     var _b;
     var isFeatureGroup = _a.isFeatureGroup, feature = _a.feature;
-    return (jsx(Text$9, __assign({ className: " ".concat(isFeatureGroup ? "text-slate-500 font-medium pt-4" : ""), style: __assign({}, (isFeatureGroup ? { fontSize: "11px" } : {})) }, { children: isFeatureGroup ? (_b = feature === null || feature === void 0 ? void 0 : feature.name) === null || _b === void 0 ? void 0 : _b.toUpperCase() : feature === null || feature === void 0 ? void 0 : feature.name })));
-};
-
-var NextPriceListButton = function (_a) {
-    var availablePriceLists = _a.availablePriceLists, priceListStart = _a.priceListStart, setPriceListStart = _a.setPriceListStart;
-    return (jsxs("div", __assign({ className: "absolute flex gap-1", style: { top: "12px", right: "8px", zIndex: 10 } }, { children: [priceListStart > 0 && (jsx("div", __assign({ className: "flex items-center justify-center rounded-full shadow p-1 cursor-pointer", onClick: function () {
-                    setPriceListStart(function (prev) {
-                        var newValue = prev - 1;
-                        if (newValue < 0) {
-                            return prev;
-                        }
-                        return newValue;
-                    });
-                }, style: { width: "22px", height: "22px" } }, { children: jsx(FontAwesomeIcon, { icon: faChevronLeft }) }))), priceListStart < availablePriceLists.length - 3 && (jsx("div", __assign({ className: "flex items-center justify-center rounded-full shadow p-1 cursor-pointer", onClick: function () {
-                    return setPriceListStart(function (prev) {
-                        var newValue = prev + 1;
-                        if (newValue >= availablePriceLists.length) {
-                            return prev;
-                        }
-                        return newValue;
-                    });
-                }, style: { width: "22px", height: "22px" } }, { children: jsx(FontAwesomeIcon, { icon: faChevronRight }) })))] })));
-};
-
-var filterUniqueFeatures = function (_a) {
-    // Remove any features that in previous plans if everythingInPlus is true
-    var availablePriceLists = _a.availablePriceLists;
-    var uniqueFeatures = new Set();
-    var updatedPriceLists = availablePriceLists.map(function (priceList) {
-        var _a;
-        var updatedPlanFeatures = (_a = priceList.plan.planFeatures) === null || _a === void 0 ? void 0 : _a.filter(function (feature) {
-            if (uniqueFeatures.has(feature.featureId)) {
-                return false;
-            }
-            else {
-                uniqueFeatures.add(feature.featureId);
-                return true;
-            }
-        });
-        return __assign(__assign({}, priceList), { plan: __assign(__assign({}, priceList.plan), { planFeatures: updatedPlanFeatures }) });
-    });
-    return updatedPriceLists;
-};
-var EverythingPlanFeatures = function (_a) {
-    var availablePriceLists = _a.availablePriceLists, selectedProduct = _a.selectedProduct;
-    var brandColor = useContext(BrandContext).brandColor;
-    var uniquePlanFeatures = filterUniqueFeatures({ availablePriceLists: availablePriceLists });
-    return (jsx(Fragment, { children: __spreadArray([], Array(PLANS_TO_DISPLAY), true).map(function (_, planIndex) {
-            var priceList = uniquePlanFeatures[planIndex];
-            var prevPriceList = availablePriceLists[planIndex - 1];
-            if (!priceList)
-                return (jsx("div", { style: prevPriceList ? { borderLeft: "1px solid ".concat(SLATE_200) } : {} }, planIndex));
-            if (!priceList.plan.planFeatures)
-                return jsx("div", {}, planIndex);
-            return (jsx("div", __assign({ className: "flex flex-col gap-4 p-4", style: { borderLeft: "1px solid ".concat(SLATE_200) } }, { children: priceList.plan.planFeatures.map(function (planFeature, planFeatureIndex) {
-                    var everythingInPlus = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus;
-                    return (jsxs("div", __assign({ className: "contents" }, { children: [prevPriceList && everythingInPlus && planIndex > 0 && planFeatureIndex === 0 && (jsx("div", __assign({ className: "font-medium", style: { fontSize: "13px" } }, { children: everythingInPlusString({ priceList: prevPriceList }) }))), jsxs("div", __assign({ className: "flex gap-1 text-gray-600", style: { fontSize: "13px" } }, { children: [jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }), planFeature.feature.name] }))] }), planFeatureIndex));
-                }) }), planIndex));
-        }) }));
+    return (jsx(Text$a, __assign({ className: " ".concat(isFeatureGroup ? "text-slate-500 font-medium pt-4" : ""), style: __assign({}, (isFeatureGroup ? { fontSize: "11px" } : {})) }, { children: isFeatureGroup ? (_b = feature === null || feature === void 0 ? void 0 : feature.name) === null || _b === void 0 ? void 0 : _b.toUpperCase() : feature === null || feature === void 0 ? void 0 : feature.name })));
 };
 
-var PLANS_TO_DISPLAY = 3;
 var PriceListGridDesktop = function (_a) {
     var availablePriceLists = _a.availablePriceLists, onChangePriceList = _a.onChangePriceList, priceListChangeOptions = _a.priceListChangeOptions, priceListStart = _a.priceListStart, selectedPriceList = _a.selectedPriceList, selectedProduct = _a.selectedProduct, setPriceListStart = _a.setPriceListStart, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays;
     var _b = useMemo(function () {
@@ -21096,20 +21118,22 @@ var PriceListGridDesktop = function (_a) {
             availablePriceLists: availablePriceLists,
             priceListChangeOptions: priceListChangeOptions,
             priceListStart: priceListStart,
+            plansToDisplay: (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.plansToDisplay) || 3,
         });
     }, [availablePriceLists, priceListChangeOptions, priceListStart]), availablePlansArray = _b.availablePlansArray, displayPriceLists = _b.displayPriceLists;
     var everythingInPlus = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus;
-    return (jsxs("div", __assign({ className: "relative flex flex-col rounded-md shadow overflow-hidden bg-white" }, { children: [jsx(NextPriceListButton, { availablePriceLists: availablePriceLists, priceListStart: priceListStart, setPriceListStart: setPriceListStart }), jsxs("div", __assign({ className: "grid w-full", style: {
+    var plansToDisplay = Math.min((selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.plansToDisplay) || 3, availablePriceLists.length);
+    return (jsxs("div", __assign({ className: "relative flex flex-col rounded-md shadow overflow-hidden bg-white" }, { children: [jsx(NextPriceListButton, { availablePriceLists: availablePriceLists, numberOfPlansToDisplay: plansToDisplay, priceListStart: priceListStart, setPriceListStart: setPriceListStart }), jsxs("div", __assign({ className: "grid w-full", style: {
                     gridTemplateColumns: everythingInPlus
-                        ? "repeat(3, minmax(120px, 1fr))"
-                        : "minmax(auto, 400px) repeat(3, minmax(120px, 1fr))",
-                } }, { children: [!everythingInPlus && jsx(PlanPickerGridCell, { noBorder: true }), __spreadArray([], Array(PLANS_TO_DISPLAY), true).map(function (_, index) {
+                        ? "repeat(".concat(plansToDisplay, ", minmax(120px, 1fr))")
+                        : "minmax(auto, 400px) repeat(".concat(plansToDisplay, ", minmax(120px, 1fr))"),
+                } }, { children: [!everythingInPlus && jsx(PlanPickerGridCell, { noBorder: true }), __spreadArray([], Array(plansToDisplay), true).map(function (_, index) {
                         var priceList = displayPriceLists[index];
                         var doesPrevPriceListExist = displayPriceLists[index - 1];
                         if (!priceList)
                             return (jsx(PlanPickerGridCell, { noBorder: !Boolean(doesPrevPriceListExist) }, index));
                         return (jsx(PriceListCard, { isSelected: priceList.plan.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.plan.id), onClick: onChangePriceList, priceList: priceList, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays }, index));
-                    }), (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus) ? (jsx(EverythingPlanFeatures, { availablePriceLists: availablePriceLists, selectedProduct: selectedProduct })) : (jsx(PlanFeatures, { availablePlansArray: availablePlansArray, selectedProduct: selectedProduct }))] }))] })));
+                    }), (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus) ? (jsx(EverythingPlanFeatures, { availablePriceLists: availablePriceLists, plansToDisplay: plansToDisplay, selectedProduct: selectedProduct })) : (jsx(PlanFeatures, { availablePlansArray: availablePlansArray, plansToDisplay: plansToDisplay, selectedProduct: selectedProduct }))] }))] })));
 };
 
 var PriceListGrid = function (_a) {
@@ -21255,7 +21279,6 @@ var PlanPicker = function () {
     var apiHost = useContext(BunnyContext).apiHost;
     var _b = useContext(SubscriptionsContext), isInPreviewMode = _b.isInPreviewMode, productId = _b.productId, quotePreviewData = _b.quotePreviewData, setQuotePreviewData = _b.setQuotePreviewData, upgradingSubscription = _b.upgradingSubscription;
     // Hooks
-    var queryClient = useQueryClient();
     var showInfoNotification = useInfoNotification();
     // Queries
     var _c = useQuery({
@@ -21296,55 +21319,48 @@ var PlanPicker = function () {
             setQuotePreviewData({});
         };
     }, [setQuotePreviewData]);
-    if (queryClient.isFetching({
-        queryKey: QueryKeyFactory.default.planChangeOptionsKey({
-            subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
-            token: token,
-        }),
-    }))
-        return jsx(Fragment, {});
-    else if (((_a = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _a === void 0 ? void 0 : _a.length) === 0)
+    if (((_a = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _a === void 0 ? void 0 : _a.length) === 0)
         return jsx(ErrorView, { message: "There are no plans available" });
     return (jsx(PriceListSelector, { arePlanChangeOptionsLoading: arePlanChangeOptionsLoading, areSubscriptionsLoading: areSubscriptionsLoading, onChangePriceList: onChangePriceList, priceListChangeOptions: priceListChangeOptions, selectedPriceList: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList, subscriptions: subscriptions }));
 };
 
-var Text$8 = Typography.Text;
+var Text$9 = Typography.Text;
 var PreviewModeAdvisary = function (_a) {
     var isInPreviewMode = _a.isInPreviewMode;
     if (!isInPreviewMode)
         return null;
-    return (jsx("div", __assign({ className: "flex justify-center w-full rounded" }, { children: jsx(Text$8, { children: "You are in preview mode. Products, plans and price lists are shown regardless of visibility settings." }) })));
+    return (jsx("div", __assign({ className: "flex justify-center w-full rounded" }, { children: jsx(Text$9, { children: "You are in preview mode. Products, plans and price lists are shown regardless of visibility settings." }) })));
 };
 
 var PlanManager = function (_a) {
     var onChangePlanCancel = _a.onChangePlanCancel, handlePortalErrors = _a.handlePortalErrors;
     // Context
     var token = useToken();
-    var _b = useContext(BunnyContext), apiHost = _b.apiHost, graphQLClient = _b.graphQLClient;
-    var _c = useContext(SubscriptionsContext), isInPreviewMode = _c.isInPreviewMode, upgradingSubscription = _c.upgradingSubscription, setUpgradingSubscription = _c.setUpgradingSubscription, subscriptionUpgradeId = _c.subscriptionUpgradeId, setQuotePreviewData = _c.setQuotePreviewData, quotePreviewData = _c.quotePreviewData, className = _c.className;
+    var apiHost = useContext(BunnyContext).apiHost;
+    var _b = useContext(SubscriptionsContext), isInPreviewMode = _b.isInPreviewMode, upgradingSubscription = _b.upgradingSubscription, setUpgradingSubscription = _b.setUpgradingSubscription, subscriptionUpgradeId = _b.subscriptionUpgradeId, setQuotePreviewData = _b.setQuotePreviewData, quotePreviewData = _b.quotePreviewData, className = _b.className;
     // Local state
-    var _d = useState(), editingQuoteData = _d[0], setEditingQuoteData = _d[1];
-    var _e = useState(false), payModalVisible = _e[0], setPayModalVisible = _e[1];
-    var _f = useState(false), isSticky = _f[0], setIsSticky = _f[1];
+    var _c = useState(), editingQuoteData = _c[0], setEditingQuoteData = _c[1];
+    var _d = useState(false), payModalVisible = _d[0], setPayModalVisible = _d[1];
+    var _e = useState(false), isSticky = _e[0], setIsSticky = _e[1];
     var stickyRef = useRef(null);
     // Hooks
     var queryClient = useQueryClient();
     var showSuccessNotification = useSuccessNotification();
     var showInfoNotification = useInfoNotification();
     var isMobile = useIsMobile();
-    var storedPaymentMethod = usePaymentMethod({
-        graphQLClient: graphQLClient,
+    var defaultPaymentMethod = usePaymentMethod({
         token: token,
-    }).data;
+        apiHost: apiHost,
+    }).defaultPaymentMethod;
     // Queries
-    var _g = useQuery({
+    var _f = useQuery({
         queryKey: QueryKeyFactory.default.createTableKey({
             pluralType: "subscriptions",
             token: token,
         }),
         queryFn: function () { return getSubscriptions({ isInPreviewMode: isInPreviewMode, token: token, apiHost: apiHost }); },
         enabled: false,
-    }), subscriptions = _g.data, subscriptionsAreLoading = _g.isLoading;
+    }), subscriptions = _f.data, subscriptionsAreLoading = _f.isLoading;
     var quote = useQuery({
         queryKey: QueryKeyFactory.default.createObjectKey({
             id: editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id,
@@ -21418,17 +21434,17 @@ var PlanManager = function (_a) {
                         return showInfoNotification("You are in preview mode");
                     setQuotePreviewData(undefined);
                     onChangePlanCancel();
-                }, title: "Change plan" }), jsx(PlanPicker, {}), jsx(Checkout, { onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, quote: quote, token: token, isMobile: isMobile, storedPaymentMethod: storedPaymentMethod, selectedPriceList: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList, quantity: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity }), jsx("div", { ref: stickyRef }), jsx("div", __assign({ className: "sticky bottom-4 transition-[margin] duration-300 ".concat(isSticky ? "mx-4" : "mx-0") }, { children: jsx(PlanPickerCheckoutBarWrapper, { handlePortalErrors: handlePortalErrors, onCheckoutSuccess: function () { return onChangePlanCancel(); } }) }))] })));
+                }, title: "Change plan" }), jsx(PlanPicker, {}), jsx(Checkout, { onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, quote: quote, token: token, isMobile: isMobile, storedPaymentMethod: defaultPaymentMethod, selectedPriceList: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList }), jsx("div", { ref: stickyRef }), jsx("div", __assign({ className: "sticky bottom-4 transition-[margin] duration-300 ".concat(isSticky ? "mx-4" : "mx-0") }, { children: jsx(PlanPickerCheckoutBarWrapper, { handlePortalErrors: handlePortalErrors, onCheckoutSuccess: function () { return onChangePlanCancel(); } }) }))] })));
 };
 
 var useCancelSubscription = function () {
     var graphQLRequest = useGraphQLRequest();
-    return function (subscriptionIds, token, apiHost) { return __awaiter(void 0, void 0, void 0, function () {
+    return function (subscriptionIds, apiHost, token) { return __awaiter(void 0, void 0, void 0, function () {
         var data;
         var _a;
         return __generator(this, function (_b) {
             switch (_b.label) {
-                case 0: return [4 /*yield*/, graphQLRequest("\n    mutation SubscriptionCancel($subscriptionIds: [ID!]!) {\n      subscriptionCancel(ids: $subscriptionIds) {\n        subscriptions {\n          accountId\n          state\n        }\n      }\n    }", token, apiHost, { subscriptionIds: subscriptionIds })];
+                case 0: return [4 /*yield*/, graphQLRequest("\n    mutation SubscriptionCancel($subscriptionIds: [ID!]!) {\n      subscriptionCancel(ids: $subscriptionIds) {\n        subscriptions {\n          accountId\n          state\n        }\n      }\n    }", apiHost, token, { subscriptionIds: subscriptionIds })];
                 case 1:
                     data = _b.sent();
                     return [2 /*return*/, (_a = data === null || data === void 0 ? void 0 : data.subscriptions) === null || _a === void 0 ? void 0 : _a.nodes];
@@ -21628,7 +21644,7 @@ var SubscriptionCardActions = function (_a) {
         canShowSubscriptionActions(subscription) ? (jsxs(Fragment, { children: [canShowCancelButton && (jsx(Popconfirm, __assign({ icon: null, onConfirm: function () { return onCancelSubscriptionClick === null || onCancelSubscriptionClick === void 0 ? void 0 : onCancelSubscriptionClick(subscription); }, title: "Cancel subscription" }, { children: jsx(Button, __assign({ className: "p-0", type: "link" }, { children: "Cancel subscription" })) }))), canShowChangePlanButton && (jsx(Button, __assign({ onClick: function () { return onChangePlanClick(subscription); }, type: "primary" }, { children: "Change plan" })))] })) : ((_c = subscription.state) === null || _c === void 0 ? void 0 : _c.toUpperCase()) === SubscriptionState$2.TRIAL ? (jsx(Button, __assign({ onClick: function () { return onChangePlanClick(subscription); }, type: "primary" }, { children: "Upgrade" }))) : null;
 };
 
-var Text$7 = Typography.Text;
+var Text$8 = Typography.Text;
 var getSubscriptionStatusText = function (subscription) {
     var cancellationDate = subscription.cancellationDate, state = subscription.state, evergreen = subscription.evergreen, endDate = subscription.endDate;
     if (cancellationDate &&
@@ -21657,7 +21673,7 @@ var SubscriptionCardHeader = function (_a) {
     var isTrial = ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$2.TRIAL;
     return (jsxs("div", __assign({ className: "flex items-center justify-between", style: {
             backgroundColor: darkMode ? "var(--row-background-dark)" : "",
-        } }, { children: [jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [((_c = subscription === null || subscription === void 0 ? void 0 : subscription.product) === null || _c === void 0 ? void 0 : _c.name) && (jsx(Text$7, __assign({ style: __assign({ fontSize: "11px", fontWeight: 500, color: brandColor }, subscriptionProductNameStyle) }, { children: (_d = subscription.product.name) === null || _d === void 0 ? void 0 : _d.toUpperCase() }))), jsxs("div", __assign({ className: "flex grow items-center gap-2" }, { children: [((_e = subscription === null || subscription === void 0 ? void 0 : subscription.plan) === null || _e === void 0 ? void 0 : _e.name) && jsx(Text$7, __assign({ className: "text-lg" }, { children: subscription.plan.name })), jsxs(CustomizedTag, __assign({ color: TAG_COLORS[(_f = subscription.state) === null || _f === void 0 ? void 0 : _f.toUpperCase()] }, { children: [lodashExports.capitalize(subscription.state.toLowerCase()), isTrial ? " (".concat(trialDaysLeft, " days left)") : ""] }))] }))] })), jsxs("div", __assign({ className: "flex items-center gap-6" }, { children: [jsx(Text$7, __assign({ className: "grow text-xs" }, { children: getSubscriptionStatusText(subscription) })), !isMobile && priceListChangeOptions && onChangePlanClick && onCancelSubscriptionClick && (jsx(SubscriptionCardActions, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscription: subscription }))] }))] })));
+        } }, { children: [jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [((_c = subscription === null || subscription === void 0 ? void 0 : subscription.product) === null || _c === void 0 ? void 0 : _c.name) && (jsx(Text$8, __assign({ style: __assign({ fontSize: "11px", fontWeight: 500, color: brandColor }, subscriptionProductNameStyle) }, { children: (_d = subscription.product.name) === null || _d === void 0 ? void 0 : _d.toUpperCase() }))), jsxs("div", __assign({ className: "flex grow items-center gap-2" }, { children: [((_e = subscription === null || subscription === void 0 ? void 0 : subscription.plan) === null || _e === void 0 ? void 0 : _e.name) && jsx(Text$8, __assign({ className: "text-lg" }, { children: subscription.plan.name })), jsxs(CustomizedTag, __assign({ color: TAG_COLORS[(_f = subscription.state) === null || _f === void 0 ? void 0 : _f.toUpperCase()] }, { children: [lodashExports.capitalize(subscription.state.toLowerCase()), isTrial ? " (".concat(trialDaysLeft, " days left)") : ""] }))] }))] })), jsxs("div", __assign({ className: "flex items-center gap-6" }, { children: [jsx(Text$8, __assign({ className: "grow text-xs" }, { children: getSubscriptionStatusText(subscription) })), !isMobile && priceListChangeOptions && onChangePlanClick && onCancelSubscriptionClick && (jsx(SubscriptionCardActions, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscription: subscription }))] }))] })));
 };
 
 var BillingPeriodConverter;
@@ -21682,7 +21698,7 @@ var SubscriptionChargeTotal = function (_a) {
                 : "".concat(formattedPeriodPrice, " ").concat(billingPeriod) })));
 };
 
-var Text$6 = Typography.Text;
+var Text$7 = Typography.Text;
 var SubscriptionChargeUnitPrice = function (_a) {
     var charge = _a.charge, subscription = _a.subscription;
     var darkMode = useContext(BunnyContext).darkMode;
@@ -21705,23 +21721,23 @@ var SubscriptionChargeUnitPrice = function (_a) {
                         }) })) })));
             }, onOpenChange: setShowPriceTiers, open: showPriceTiers, trigger: ["click"] }, { children: jsx("div", __assign({ className: "cursor-pointer underline", onClick: function () { return setShowPriceTiers(!showPriceTiers); } }, { children: showPriceTiers ? "Hide tiers" : "Show tiers" })) })));
     else if (charge.chargeType === ChargeType.USAGE || charge.trial)
-        return jsx(Text$6, { children: "-" });
+        return jsx(Text$7, { children: "-" });
     else if (isDiscount)
         return (jsxs(Fragment, { children: ["-", formatCurrency(charge.discountedPrice, subscription.currencyId)] }));
     else
         return (jsx(Fragment, { children: formatCurrency(charge.discountedPrice, subscription.currencyId) }));
 };
 
-var Text$5 = Typography.Text;
+var Text$6 = Typography.Text;
 var SubscriptionCardColumnHeaders = function (_a) {
     var columns = _a.columns;
-    return (jsx(Fragment, { children: columns.map(function (subscriptionColumn, index) { return (jsx(Text$5, __assign({ className: "text-slate-400 ".concat(subscriptionColumn.className), style: { fontSize: "11px" } }, { children: subscriptionColumn.title }), index)); }) }));
+    return (jsx(Fragment, { children: columns.map(function (subscriptionColumn, index) { return (jsx(Text$6, __assign({ className: "text-slate-400 ".concat(subscriptionColumn.className), style: { fontSize: "11px" } }, { children: subscriptionColumn.title }), index)); }) }));
 };
 
-var Text$4 = Typography.Text;
+var Text$5 = Typography.Text;
 var SubscriptionsListCell = function (_a) {
     var children = _a.children, className = _a.className, gridColumn = _a.gridColumn, right = _a.right, style = _a.style;
-    return (jsx(Text$4, __assign({ className: "flex items-center text-sm whitespace-nowrap ".concat(className), style: __assign({ gridColumn: gridColumn, textAlign: right ? "right" : "left", justifyContent: right ? "flex-end" : "flex-start" }, style) }, { children: children })));
+    return (jsx(Text$5, __assign({ className: "flex items-center text-sm whitespace-nowrap ".concat(className), style: __assign({ gridColumn: gridColumn, textAlign: right ? "right" : "left", justifyContent: right ? "flex-end" : "flex-start" }, style) }, { children: children })));
 };
 
 var CARD_COLUMNS = [
@@ -21809,10 +21825,10 @@ var SubscriptionCardDesktopRow = function (_a) {
                             : (_c = charge.quantity) === null || _c === void 0 ? void 0 : _c.toLocaleString() })), jsx(SubscriptionsListCell, __assign({ right: true }, { children: jsx(SubscriptionChargeUnitPrice, { charge: charge, subscription: subscription }) })), jsx(SubscriptionsListCell, __assign({ right: true }, { children: jsx(SubscriptionChargeTotal, { charge: charge, subscription: subscription }) }))] })));
 };
 
-var Text$3 = Typography.Text;
+var Text$4 = Typography.Text;
 var SubscriptionCardCellMobile = function (_a) {
     var children = _a.children, className = _a.className, style = _a.style;
-    return (jsx(Text$3, __assign({ className: className, style: style }, { children: children })));
+    return (jsx(Text$4, __assign({ className: className, style: style }, { children: children })));
 };
 
 var CHARGE_COLUMNS = [
@@ -21885,7 +21901,7 @@ var SubscriptionsListContainer = function (_a) {
     // Queries
     var _c = useQuery({
         queryKey: QueryKeyFactory.default.planChangeOptionsKey({ token: token }),
-        queryFn: function () { return getPriceListChangeOptions({ token: token, apiHost: apiHost }); },
+        queryFn: function () { return getPriceListChangeOptions({ apiHost: apiHost, token: token }); },
         enabled: Boolean(onChangePlanClick),
     }), priceListChangeOptions = _c.data, arePriceListChangeOptionsLoading = _c.isLoading;
     if (subscriptionsAreLoading ||
@@ -21894,13 +21910,21 @@ var SubscriptionsListContainer = function (_a) {
     return (jsx(Fragment, { children: (subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.length) > 0 ? (jsx("div", __assign({ className: "flex flex-col gap-".concat(gap, " shrink overflow-auto") }, { children: jsx(SubscriptionsList, { hideExpired: hideExpired, onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscriptions: subscriptions }) }))) : (noSubscriptionsComponent || (jsx("div", __assign({ className: "flex flex-col items-center w-full" }, { children: jsx(ErrorView, { message: "You have no subscriptions with ".concat(companyName, " yet") }) })))) }));
 };
 
+var Text$3 = 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$3, __assign({ className: "text-xl", style: { fontWeight: 400 } }, { children: title })), onClose ? (jsx("button", __assign({ id: "closePayment", onClick: onClose, className: closeButtonClassName }, { children: jsx(CloseOutlined, {}) }))) : null] })), description && jsx("div", __assign({ className: "text-xs" }, { children: description }))] })));
+};
+
 var QUOTE_CHARGE_CREATE = "\nmutation QuoteChargeCreate ($quoteChangeId: ID!, $startDate: ISO8601Date!, $endDate: ISO8601Date, $priceListChargeId: ID, $subscriptionChargeId: ID, $price: Float, $quantity: Int) {\n  quoteChargeCreate(\n    endDate: $endDate\n    price: $price\n    priceListChargeId: $priceListChargeId\n    quantity: $quantity\n    quoteChangeId: $quoteChangeId\n    startDate: $startDate\n    subscriptionChargeId: $subscriptionChargeId\n  ) {\n    quoteCharge {\n      quoteChange {\n        id\n        quoteId\n      }\n    }\n  }\n}\n\n";
 var quoteChargeCreate = function (_a) {
-    var endDate = _a.endDate, price = _a.price, priceListChargeId = _a.priceListChargeId, quantity = _a.quantity, quoteChangeId = _a.quoteChangeId, startDate = _a.startDate, subscriptionChargeId = _a.subscriptionChargeId, token = _a.token, apiHost = _a.apiHost;
+    var 
+    // endDate,
+    price = _a.price, priceListChargeId = _a.priceListChargeId, quantity = _a.quantity, quoteChangeId = _a.quoteChangeId, startDate = _a.startDate, subscriptionChargeId = _a.subscriptionChargeId, token = _a.token, apiHost = _a.apiHost;
     return gqlRequest({
         query: QUOTE_CHARGE_CREATE,
         vars: {
-            endDate: endDate,
+            // endDate,
             price: price,
             priceListChargeId: priceListChargeId,
             quantity: quantity,
@@ -21933,14 +21957,17 @@ var QuantityInput = function (_a) {
     (updatingChargeQuantityId && updatingChargeQuantityId !== charge.id) ||
         // If the subscription is not self-service, we disable the quantity input
         !charge.selfServiceQuantity;
-    var value = (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.quantity) === undefined ? "" : editedSubscription.quantity;
+    var value = (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.quantity) === undefined
+        ? ""
+        : editedSubscription.quantity;
     // Mutations
     var createCharge = useMutation({
         mutationFn: quoteChargeCreate,
         onSuccess: function (response) {
             var _a, _b, _c, _d, _e, _f, _g, _h;
             if (!(editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id)) {
-                var isTrial = ((_b = (_a = editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.subscription) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$2.TRIAL;
+                var isTrial = ((_b = (_a = editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.subscription) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) ===
+                    SubscriptionState$2.TRIAL;
                 setEditingQuoteData({
                     id: (_e = (_d = (_c = response.quoteChargeCreate) === null || _c === void 0 ? void 0 : _c.quoteCharge) === null || _d === void 0 ? void 0 : _d.quoteChange) === null || _e === void 0 ? void 0 : _e.quoteId,
                     isTrial: isTrial,
@@ -21957,17 +21984,19 @@ var QuantityInput = function (_a) {
     }).mutate;
     var createQuote = useMutation({
         mutationFn: function (subscriptionIds) {
-            return createSubscriptionQuote(subscriptionIds, token, apiHost);
+            return createSubscriptionQuote(subscriptionIds, apiHost, token);
         },
         onSuccess: function (subscriptionUpdateData) {
             var _a, _b;
             var quote = (_a = subscriptionUpdateData === null || subscriptionUpdateData === void 0 ? void 0 : subscriptionUpdateData.quoteSubscriptionUpdate) === null || _a === void 0 ? void 0 : _a.quote;
-            var quoteChange = quote.quoteChanges.find(function (quoteChange) { return quoteChange.priceList.id === (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.subscription.priceList.id); });
+            var quoteChange = quote.quoteChanges.find(function (quoteChange) {
+                return quoteChange.priceList.id ===
+                    (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.subscription.priceList.id);
+            });
             var subscriptionCharge = (_b = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.subscription) === null || _b === void 0 ? void 0 : _b.charges.find(function (charge) { var _a; return ((_a = charge === null || charge === void 0 ? void 0 : charge.priceListCharge) === null || _a === void 0 ? void 0 : _a.id) === (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.chargeId); });
             if (subscriptionCharge && quoteChange && editedSubscription) {
                 createCharge({
                     apiHost: apiHost,
-                    endDate: subscriptionCharge.endDate,
                     quantity: editedSubscription.quantity,
                     quoteChangeId: quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.id,
                     startDate: subscriptionCharge.startDate,
@@ -21980,12 +22009,13 @@ var QuantityInput = function (_a) {
     var updateQuote = useMutation({
         mutationFn: function (_a) {
             var charges = _a.charges, quoteChangeId = _a.quoteChangeId;
-            return quoteChangeUpdate(charges, quoteChangeId, token, apiHost);
+            return quoteChangeUpdate(charges, quoteChangeId, apiHost, token);
         },
         onSuccess: function (response) {
             var _a, _b, _c, _d, _e, _f;
             if (!(editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id)) {
-                var isTrial = ((_b = (_a = editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.subscription) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$2.TRIAL;
+                var isTrial = ((_b = (_a = editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.subscription) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) ===
+                    SubscriptionState$2.TRIAL;
                 setEditingQuoteData({
                     id: (_d = (_c = response.quoteChangeUpdate) === null || _c === void 0 ? void 0 : _c.quoteChange) === null || _d === void 0 ? void 0 : _d.quoteId,
                     isTrial: isTrial,
@@ -22002,7 +22032,8 @@ var QuantityInput = function (_a) {
     });
     // Handlers
     var isQuantityLowerThanOriginal = function (quantity) {
-        return (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.quantity) !== undefined && editedSubscription.quantity <= quantity;
+        return (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.quantity) !== undefined &&
+            editedSubscription.quantity <= quantity;
     };
     var onChangeQuantity = function (chargeIndex, value, priceListChargeId, subscription, subscriptionIndex) {
         var quantity = isNaN(parseInt(value)) ? 0 : parseInt(value);
@@ -22165,7 +22196,10 @@ var QuantityChangeDrawerDesktop = function (_a) {
                         var _a;
                         var isTrial = ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === SubscriptionState$2.TRIAL;
                         return (jsx("div", __assign({ className: "contents" }, { children: subscription.charges.map(function (charge, chargeIndex) {
-                                if ((isTrial && !charge.trial) || (!isTrial && charge.trial))
+                                var _a;
+                                if ((isTrial && !charge.trial) ||
+                                    (!isTrial && charge.trial) ||
+                                    ((_a = charge.chargeType) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === "USAGE")
                                     return null;
                                 return (jsx(QuantityChangeGridRow, { chargeIndex: chargeIndex, editingQuote: editingQuote, setEditingQuoteData: setEditingQuoteData, subscription: subscription, subscriptionCharge: charge, subscriptionIndex: index, subscriptions: subscriptions }, chargeIndex));
                             }) }), index));
@@ -22240,7 +22274,7 @@ var Subscriptions = function (_a) {
     var handlePortalErrors = _a.handlePortalErrors, companyName = _a.companyName, noSubscriptionsComponent = _a.noSubscriptionsComponent, hideTitle = _a.hideTitle;
     // Context
     var token = useToken();
-    var _b = useContext(BunnyContext), apiHost = _b.apiHost, graphQLClient = _b.graphQLClient;
+    var _b = useContext(BunnyContext), apiHost = _b.apiHost; _b.graphQLClient;
     var _c = useContext(SubscriptionsContext), setUpgradingSubscription = _c.setUpgradingSubscription, updatingChargeQuantityId = _c.updatingChargeQuantityId, setUpdatingChargeQuantityId = _c.setUpdatingChargeQuantityId, setSubscriptionUpgradeId = _c.setSubscriptionUpgradeId, className = _c.className, isInPreviewMode = _c.isInPreviewMode;
     // Local state
     var _d = useState(), editingQuoteData = _d[0], setEditingQuoteData = _d[1];
@@ -22254,10 +22288,10 @@ var Subscriptions = function (_a) {
     var showSuccessNotification = useSuccessNotification();
     var quoteDelete = useQuoteDelete();
     var isMobile = useIsMobile();
-    var storedPaymentMethod = usePaymentMethod({
-        graphQLClient: graphQLClient,
+    var defaultPaymentMethod = usePaymentMethod({
         token: token,
-    }).data;
+        apiHost: apiHost,
+    }).defaultPaymentMethod;
     var cancelSubscription = useCancelSubscription();
     // Queries
     var quote = useQuery({
@@ -22283,7 +22317,7 @@ var Subscriptions = function (_a) {
     // Mutations
     var subscriptionCancel = useMutation({
         mutationFn: function (subscription) {
-            return cancelSubscription([subscription.id], token, apiHost);
+            return cancelSubscription([subscription.id], apiHost, token);
         },
         onSuccess: function () {
             queryClient.invalidateQueries({
@@ -22334,7 +22368,7 @@ var Subscriptions = function (_a) {
     };
     var onClose = function () {
         if (editingQuoteData) {
-            quoteDelete(editingQuoteData.id, token, apiHost);
+            quoteDelete(editingQuoteData.id, apiHost, token);
             setEditingQuoteData(undefined);
         }
         if (updatingChargeQuantityId) {
@@ -22365,7 +22399,7 @@ var Subscriptions = function (_a) {
                 setIsChangingPlan(false);
             }, handlePortalErrors: handlePortalErrors }));
     }
-    return (jsxs("div", __assign({ className: "".concat(className) }, { children: [!hideTitle ? jsx(PageTitle, { title: "Subscriptions" }) : null, jsx(PageHeaderWithActions, __assign({ title: jsxs(Text$1, __assign({ className: "flex items-center justify-between", style: { minWidth: "137px" } }, { children: [hideExpired ? "Active subscriptions" : "All subscriptions", isMobile && (jsx(HideExpiredToggle, { hideExpired: hideExpired, setHideExpired: setHideExpired, visible: expiredSwitchVisible }))] })) }, { children: !isMobile && (jsx(SubscriptionsNavigation, { expiredSwitchVisible: expiredSwitchVisible, hideExpired: hideExpired, setHideExpired: setHideExpired, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions })) })), jsx(SubscriptionsListContainer, { companyName: companyName, hideExpired: hideExpired, onCancelSubscriptionClick: onCancelSubscriptionClick, onChangePlanClick: onChangePlanClick, subscriptions: subscriptions, subscriptionsAreLoading: subscriptionsAreLoading, noSubscriptionsComponent: noSubscriptionsComponent }), isMobile && (jsx("div", __assign({ className: "pt-4 pb-2" }, { children: jsx(SubscriptionsNavigation, { expiredSwitchVisible: expiredSwitchVisible, hideExpired: hideExpired, setHideExpired: setHideExpired, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions }) }))), jsx(QuantityChangeDrawerDesktop, { editingQuote: quote, editingQuoteData: editingQuoteData, onClose: onClose, open: quantityDrawerOpen, openCheckout: function () { return setPayModalVisible(true); }, setEditingQuoteData: setEditingQuoteData, subscriptions: subscriptions }), jsx(Checkout, { onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, quote: quote, token: token, isMobile: isMobile, storedPaymentMethod: storedPaymentMethod })] })));
+    return (jsxs("div", __assign({ className: "".concat(className) }, { children: [!hideTitle ? jsx(PageTitle, { title: "Subscriptions" }) : null, jsx(PageHeaderWithActions, __assign({ title: jsxs(Text$1, __assign({ className: "flex items-center justify-between", style: { minWidth: "137px" } }, { children: [hideExpired ? "Active subscriptions" : "All subscriptions", isMobile && (jsx(HideExpiredToggle, { hideExpired: hideExpired, setHideExpired: setHideExpired, visible: expiredSwitchVisible }))] })) }, { children: !isMobile && (jsx(SubscriptionsNavigation, { expiredSwitchVisible: expiredSwitchVisible, hideExpired: hideExpired, setHideExpired: setHideExpired, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions })) })), jsx(SubscriptionsListContainer, { companyName: companyName, hideExpired: hideExpired, onCancelSubscriptionClick: onCancelSubscriptionClick, onChangePlanClick: onChangePlanClick, subscriptions: subscriptions, subscriptionsAreLoading: subscriptionsAreLoading, noSubscriptionsComponent: noSubscriptionsComponent }), isMobile && (jsx("div", __assign({ className: "pt-4 pb-2" }, { children: jsx(SubscriptionsNavigation, { expiredSwitchVisible: expiredSwitchVisible, hideExpired: hideExpired, setHideExpired: setHideExpired, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions }) }))), jsx(QuantityChangeDrawerDesktop, { editingQuote: quote, editingQuoteData: editingQuoteData, onClose: onClose, open: quantityDrawerOpen, openCheckout: function () { return setPayModalVisible(true); }, setEditingQuoteData: setEditingQuoteData, subscriptions: subscriptions }), jsx(Checkout, { onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, quote: quote, token: token, isMobile: isMobile, storedPaymentMethod: defaultPaymentMethod })] })));
 };
 var PageHeaderWithActions = function (_a) {
     var children = _a.children, title = _a.title;
@@ -22405,6 +22439,33 @@ var billingDetailsUpdate = function (_a) {
     });
 };
 
+// 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}";
+};
+var getBillingDetails = function (_a) {
+    var token = _a.token, apiHost = _a.apiHost;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var response;
+        var _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0: return [4 /*yield*/, gqlRequest({
+                        query: billingDetailsQuery(),
+                        token: token,
+                        apiHost: apiHost,
+                    })];
+                case 1:
+                    response = _c.sent();
+                    if (response === null || response === void 0 ? void 0 : response.errors) {
+                        throw new Error((_b = response === null || response === void 0 ? void 0 : response.errors[0]) === null || _b === void 0 ? void 0 : _b.message);
+                    }
+                    return [2 /*return*/, response === null || response === void 0 ? void 0 : response.billingDetails];
+            }
+        });
+    });
+};
+
 var Text = Typography.Text;
 function BillingDetailsSection(_a) {
     var _this = this;
@@ -22588,14 +22649,14 @@ var ResponsiveDivider = function () {
 var PaymentFormSection = function (_a) {
     var hideBillingDetailsForm = _a.hideBillingDetailsForm;
     var isMobile = useIsMobile();
-    var _b = useContext(BunnyContext), onTokenExpired = _b.onTokenExpired, graphQLClient = _b.graphQLClient;
+    var onTokenExpired = useContext(BunnyContext).onTokenExpired;
     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, { onFail: function (error) {
                 handleAllErrorFormats(error);
             }, onSavePaymentMethod: function () {
                 showSuccessNotification("Your payment method has been saved");
-            }, graphQLClient: graphQLClient }) })));
+            } }) })));
 };
 
-export { BillingDetails, BunnyProvider, Footer, Invoice, PaymentForm, PaymentMethod, Quote, Quotes, Signup, SubscriptionsWrapper as Subscriptions, Transactions };
+export { BillingDetails, BunnyProvider, Footer, Invoice, PaymentForm, Quote, Quotes, Signup, SubscriptionsWrapper as Subscriptions, Transactions };