npm - @bunnyapp/components - Versions diffs - 1.6.0 → 1.7.0-beta.2 - Mend

@bunnyapp/components 1.6.0 → 1.7.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (99) hide show

package/dist/esm/index.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { isValidElement, createContext, useContext, useMemo, useState, useEffect, useRef, createElement, useCallback, Fragment as Fragment$1 } from 'react';
 import { DownloadOutlined, CreditCardOutlined, EllipsisOutlined, BankOutlined, SearchOutlined, CloseOutlined, CheckCircleFilled, InfoCircleOutlined } from '@ant-design/icons';
-import { useErrorNotification, DEFAULT_CONFIG, createClientDevHeaders as createClientDevHeaders$1, X_BUNNY_COMPONENTS_VERSION_HEADER_NAME, QueryKeyFactory as QueryKeyFactory$1, useIsMobile as useIsMobile$1, DEFAULT_BRAND_COLOR, isColorTooDark, DEFAULT_TOP_NAV_IMAGE_URL, DEFAULT_ACCENT_COLOR, INPUT_BORDER_COLOR, SLATE_50, SLATE_400, SLATE_200, DEFAULT_SECONDARY_COLOR, request as request$1, useAllErrorFormats as useAllErrorFormats$1, formatCurrency as formatCurrency$1, GRAY_500, GRAY_200, useSuccessNotification, PAYABLE_INVOICE_STATES, BreakpointNumbers as BreakpointNumbers$1, useGraphQLmutation, useInfoNotification, formatDate, TransactionState, SLATE_600, WHITE, TransactionKind, QuoteChangeKind, SLATE_500, PRIMARY_COLOR, Lists, getAccount, ChargeType, PERIOD_LABELS, MODAL_MAX_HEIGHT, DataInterval, SLATE_100 } from '@bunnyapp/common';
+import { useErrorNotification, DEFAULT_CONFIG, createClientDevHeaders as createClientDevHeaders$1, X_BUNNY_COMPONENTS_VERSION_HEADER_NAME, QueryKeyFactory as QueryKeyFactory$1, useIsMobile as useIsMobile$1, DEFAULT_BRAND_COLOR, isColorTooDark, DEFAULT_TOP_NAV_IMAGE_URL, DEFAULT_ACCENT_COLOR, INPUT_BORDER_COLOR, SLATE_50, SLATE_400, SLATE_200, DEFAULT_SECONDARY_COLOR, request as request$1, useAllErrorFormats as useAllErrorFormats$1, formatCurrency as formatCurrency$1, GRAY_500, GRAY_200, useSuccessNotification, PAYABLE_INVOICE_STATES, BreakpointNumbers as BreakpointNumbers$1, useGraphQLmutation, useInfoNotification, formatDate, TransactionState, SLATE_600, WHITE, TransactionKind, QuoteChangeKind, ChargeType, PERIOD_LABELS, SLATE_500, PRIMARY_COLOR, Lists, getAccount as getAccount$1, MODAL_MAX_HEIGHT, DataInterval, SLATE_100 } from '@bunnyapp/common';
 import { ConfigProvider, Spin, Typography, Button, theme as theme$1, Tag, Dropdown, Input, Modal, Checkbox, Skeleton, Collapse, Form, Tooltip, Drawer, Card as Card$1, Select, Divider, Popconfirm, Table, Radio, Space, Switch } from 'antd';
 import { Markup } from 'interweave';
 import request from 'graphql-request';
@@ -46,7 +46,7 @@ function styleInject(css, ref) {
   }
 }
-var css_248z = ":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.bunny-component-wrapper {\n  box-sizing: border-box;\n}\n.bunny-component-wrapper * {\n  box-sizing: border-box;\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.bunny-shadow,\n.bunny-shadow-md {\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.bunny-fixed {\n  position: fixed;\n}\n.bunny-absolute {\n  position: absolute;\n}\n.bunny-relative {\n  position: relative;\n}\n.bunny-sticky {\n  position: sticky;\n}\n.bunny-bottom-0 {\n  bottom: 0px;\n}\n.bunny-bottom-4 {\n  bottom: 1rem;\n}\n.bunny-left-0 {\n  left: 0px;\n}\n.bunny-right-0 {\n  right: 0px;\n}\n.bunny-top-0 {\n  top: 0px;\n}\n.bunny-col-span-1 {\n  grid-column: span 1 / span 1;\n}\n.bunny-col-span-full {\n  grid-column: 1 / -1;\n}\n.bunny-m-0 {\n  margin: 0px;\n}\n.bunny-mx-0 {\n  margin-left: 0px;\n  margin-right: 0px;\n}\n.bunny-mx-4 {\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n.bunny-mx-auto {\n  margin-left: auto;\n  margin-right: auto;\n}\n.bunny-my-0 {\n  margin-top: 0px;\n  margin-bottom: 0px;\n}\n.bunny-my-2 {\n  margin-top: 0.5rem;\n  margin-bottom: 0.5rem;\n}\n.bunny-my-24 {\n  margin-top: 6rem;\n  margin-bottom: 6rem;\n}\n.bunny-my-4 {\n  margin-top: 1rem;\n  margin-bottom: 1rem;\n}\n.bunny-mb-2 {\n  margin-bottom: 0.5rem;\n}\n.bunny-mb-3 {\n  margin-bottom: 0.75rem;\n}\n.bunny-mb-4 {\n  margin-bottom: 1rem;\n}\n.bunny-mb-8 {\n  margin-bottom: 2rem;\n}\n.bunny-ml-auto {\n  margin-left: auto;\n}\n.bunny-mt-0 {\n  margin-top: 0px;\n}\n.bunny-mt-2 {\n  margin-top: 0.5rem;\n}\n.bunny-mt-24 {\n  margin-top: 6rem;\n}\n.bunny-mt-4 {\n  margin-top: 1rem;\n}\n.bunny-mt-5 {\n  margin-top: 1.25rem;\n}\n.bunny-box-border {\n  box-sizing: border-box;\n}\n.bunny-flex {\n  display: flex;\n}\n.bunny-grid {\n  display: grid;\n}\n.bunny-contents {\n  display: contents;\n}\n.bunny-h-0\\.5 {\n  height: 0.125rem;\n}\n.bunny-h-1\\/2 {\n  height: 50%;\n}\n.bunny-h-8 {\n  height: 2rem;\n}\n.bunny-h-full {\n  height: 100%;\n}\n.bunny-h-screen {\n  height: 100vh;\n}\n.bunny-max-h-\\[calc\\(100vh-10rem\\)\\] {\n  max-height: calc(100vh - 10rem);\n}\n.bunny-min-h-0 {\n  min-height: 0px;\n}\n.bunny-w-0\\.5 {\n  width: 0.125rem;\n}\n.bunny-w-1\\/2 {\n  width: 50%;\n}\n.bunny-w-3\\/5 {\n  width: 60%;\n}\n.bunny-w-full {\n  width: 100%;\n}\n.bunny-w-screen {\n  width: 100vw;\n}\n.bunny-flex-1 {\n  flex: 1 1 0%;\n}\n.bunny-shrink {\n  flex-shrink: 1;\n}\n.bunny-shrink-0 {\n  flex-shrink: 0;\n}\n.bunny-grow {\n  flex-grow: 1;\n}\n.bunny-cursor-pointer {\n  cursor: pointer;\n}\n.bunny-grid-cols-3 {\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.bunny-flex-row {\n  flex-direction: row;\n}\n.bunny-flex-col {\n  flex-direction: column;\n}\n.bunny-flex-wrap {\n  flex-wrap: wrap;\n}\n.bunny-items-start {\n  align-items: flex-start;\n}\n.bunny-items-end {\n  align-items: flex-end;\n}\n.bunny-items-center {\n  align-items: center;\n}\n.bunny-justify-end {\n  justify-content: flex-end;\n}\n.bunny-justify-center {\n  justify-content: center;\n}\n.bunny-justify-between {\n  justify-content: space-between;\n}\n.bunny-gap-0 {\n  gap: 0px;\n}\n.bunny-gap-1 {\n  gap: 0.25rem;\n}\n.bunny-gap-2 {\n  gap: 0.5rem;\n}\n.bunny-gap-3 {\n  gap: 0.75rem;\n}\n.bunny-gap-4 {\n  gap: 1rem;\n}\n.bunny-gap-6 {\n  gap: 1.5rem;\n}\n.bunny-gap-8 {\n  gap: 2rem;\n}\n.bunny-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.bunny-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.bunny-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.bunny-overflow-auto {\n  overflow: auto;\n}\n.bunny-overflow-hidden {\n  overflow: hidden;\n}\n.bunny-overflow-y-auto {\n  overflow-y: auto;\n}\n.bunny-whitespace-nowrap {\n  white-space: nowrap;\n}\n.bunny-text-nowrap {\n  text-wrap: nowrap;\n}\n.bunny-rounded {\n  border-radius: 0.25rem;\n}\n.bunny-rounded-full {\n  border-radius: 9999px;\n}\n.bunny-rounded-lg {\n  border-radius: 0.5rem;\n}\n.bunny-rounded-md {\n  border-radius: 0.375rem;\n}\n.bunny-border {\n  border-width: 1px;\n}\n.bunny-border-2 {\n  border-width: 2px;\n}\n.bunny-border-solid {\n  border-style: solid;\n}\n.bunny-border-none {\n  border-style: none;\n}\n.bunny-border-slate-200 {\n  --tw-border-opacity: 1;\n  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));\n}\n.bunny-bg-gray-300 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));\n}\n.bunny-bg-slate-50 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));\n}\n.bunny-bg-transparent {\n  background-color: transparent;\n}\n.bunny-bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bunny-p-0 {\n  padding: 0px;\n}\n.bunny-p-1 {\n  padding: 0.25rem;\n}\n.bunny-p-2 {\n  padding: 0.5rem;\n}\n.bunny-p-4 {\n  padding: 1rem;\n}\n.bunny-px-12 {\n  padding-left: 3rem;\n  padding-right: 3rem;\n}\n.bunny-px-3 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n.bunny-px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n.bunny-px-6 {\n  padding-left: 1.5rem;\n  padding-right: 1.5rem;\n}\n.bunny-py-2 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n.bunny-py-4 {\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n}\n.bunny-py-6 {\n  padding-top: 1.5rem;\n  padding-bottom: 1.5rem;\n}\n.bunny-pb-2 {\n  padding-bottom: 0.5rem;\n}\n.bunny-pb-4 {\n  padding-bottom: 1rem;\n}\n.bunny-pb-6 {\n  padding-bottom: 1.5rem;\n}\n.bunny-pb-8 {\n  padding-bottom: 2rem;\n}\n.bunny-pl-0 {\n  padding-left: 0px;\n}\n.bunny-pl-1 {\n  padding-left: 0.25rem;\n}\n.bunny-pl-4 {\n  padding-left: 1rem;\n}\n.bunny-pr-4 {\n  padding-right: 1rem;\n}\n.bunny-pt-1 {\n  padding-top: 0.25rem;\n}\n.bunny-pt-12 {\n  padding-top: 3rem;\n}\n.bunny-pt-2 {\n  padding-top: 0.5rem;\n}\n.bunny-pt-4 {\n  padding-top: 1rem;\n}\n.bunny-pt-5 {\n  padding-top: 1.25rem;\n}\n.bunny-pt-\\[25vh\\] {\n  padding-top: 25vh;\n}\n.bunny-text-left {\n  text-align: left;\n}\n.bunny-text-center {\n  text-align: center;\n}\n.bunny-text-right {\n  text-align: right;\n}\n.bunny-text-start {\n  text-align: start;\n}\n.bunny-text-2xl {\n  font-size: 1.5rem;\n  line-height: 2rem;\n}\n.bunny-text-3xl {\n  font-size: 1.875rem;\n  line-height: 2.25rem;\n}\n.bunny-text-base {\n  font-size: 1rem;\n  line-height: 1.5rem;\n}\n.bunny-text-lg {\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n}\n.bunny-text-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.bunny-text-sm\\/5 {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.bunny-text-xl {\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n}\n.bunny-text-xs {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n.bunny-text-xs\\/3 {\n  font-size: 0.75rem;\n  line-height: 0.75rem;\n}\n.bunny-font-bold {\n  font-weight: 700;\n}\n.bunny-font-medium {\n  font-weight: 500;\n}\n.bunny-font-normal {\n  font-weight: 400;\n}\n.bunny-text-gray-400 {\n  --tw-text-opacity: 1;\n  color: rgb(156 163 175 / var(--tw-text-opacity, 1));\n}\n.bunny-text-gray-500 {\n  --tw-text-opacity: 1;\n  color: rgb(107 114 128 / var(--tw-text-opacity, 1));\n}\n.bunny-text-gray-600 {\n  --tw-text-opacity: 1;\n  color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.bunny-text-gray-900 {\n  --tw-text-opacity: 1;\n  color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.bunny-text-orange-500 {\n  --tw-text-opacity: 1;\n  color: rgb(249 115 22 / var(--tw-text-opacity, 1));\n}\n.bunny-text-orange-600 {\n  --tw-text-opacity: 1;\n  color: rgb(234 88 12 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-400 {\n  --tw-text-opacity: 1;\n  color: rgb(148 163 184 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-500 {\n  --tw-text-opacity: 1;\n  color: rgb(100 116 139 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-600 {\n  --tw-text-opacity: 1;\n  color: rgb(71 85 105 / var(--tw-text-opacity, 1));\n}\n.bunny-text-white {\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.bunny-underline {\n  text-decoration-line: underline;\n}\n.bunny-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.bunny-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.bunny-transition-\\[margin\\] {\n  transition-property: margin;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.bunny-duration-300 {\n  transition-duration: 300ms;\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, 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.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.hover\\:bunny-text-orange-400:hover {\n  --tw-text-opacity: 1;\n  color: rgb(251 146 60 / var(--tw-text-opacity, 1));\n}\n.bunny-components .ant-upload-select-picture-card {\n  margin: 0 !important;\n}\n.bunny-components .ant-upload {\n  border-radius: 0.5rem !important;\n}\n.bunny-components .ant-row {\n  margin-bottom: 0px;\n}\n.bunny-components .ant-select-disabled .ant-select-selector .ant-select-selection-item {\n  color: rgba(0, 0, 0, 0.25) !important;\n}\n.bunny-components .ant-input-number,\n.bunny-components .ant-input,\n.bunny-components .ant-picker,\n.bunny-components .ant-input-affix-wrapper,\n.bunny-components .ant-select-selector {\n  font-size: 0.875rem !important;\n  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n  color: #232323 !important;\n}\n.bunny-components .ant-input-affix-wrapper {\n  padding-top: 0 !important;\n  padding-bottom: 0 !important;\n}\n.bunny-components .ant-input-group-addon,\n.bunny-components .ant-input-number-group-addon {\n  color: #475569 !important;\n}\n.bunny-components .ant-input-number-group-wrapper,\n.bunny-components .ant-input-number-affix-wrapper {\n  width: 100%;\n}\n.bunny-components .ant-input-affix-wrapper input {\n  border: none !important;\n}\n.bunny-components .ant-form-item {\n  margin-bottom: 0;\n}\n.bunny-components .ant-form-item-label {\n  text-transform: none !important;\n  font-size: 0.75rem;\n  padding-bottom: 2px !important;\n}\n.bunny-components .ant-form-item-label > label {\n  width: 100%;\n  color: #4b5563 !important;\n}\n.bunny-components .form .ant-form-item-label label {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  box-sizing: border-box;\n}\n.bunny-components .ant-form-item-explain,\n.bunny-components .ant-form-item-explain-error {\n  font-size: 11px;\n  min-height: 11px;\n  line-height: 11px;\n  padding-top: 2px;\n}\n.bunny-components .ant-timeline-item-content {\n  font-size: smaller;\n}\n.bunny-components .ant-tree {\n  font-size: 0.875rem;\n}\n.bunny-components .ant-tree-treenode {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.bunny-components .ant-tree-draggable-icon {\n  height: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.bunny-components .ant-tree-node-content-wrapper {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.bunny-components .ant-tree-switcher {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.bunny-components .ant-page-header {\n  padding-left: 0;\n  padding-right: 0;\n  padding-top: 0;\n}\n.bunny-components .ant-tag {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  border-radius: 14px;\n  font-weight: 500;\n  white-space: nowrap;\n  padding-inline-start: 0.625rem;\n  padding-inline-end: 0.625rem;\n  margin: 0;\n}\n.bunny-components .ant-tag-blue {\n  color: #3b82f6 !important;\n  background: #bfdbfe !important;\n}\n.bunny-components .ant-tag-green {\n  color: #059669 !important;\n  background: #a7f3d0 !important;\n}\n.bunny-components .ant-tag-red {\n  color: #ef4444 !important;\n  background: #fecaca !important;\n}\n.bunny-components .ant-tag-orange {\n  color: #f97316 !important;\n  background: #fed7aa !important;\n}\n.bunny-components .ant-tag-yellow {\n  color: #f59e0b !important;\n  background: #fde68a !important;\n}\n.bunny-components .ant-tag-purple {\n  color: #8b5cf6 !important;\n  background: #ddd6fe !important;\n}\n.bunny-components .ant-tag-gray {\n  color: #6b7280 !important;\n  background: #e5e7eb !important;\n}\n.bunny-components .ant-tag-black {\n  color: white !important;\n  background: black !important;\n}\n.bunny-components .ant-picker {\n  width: 100%;\n}\n.bunny-components .ant-input,\n.bunny-components .ant-select,\n.bunny-components .ant-picker {\n  height: 32px !important;\n}\n.bunny-components .ant-slider-dot {\n  border: 2px solid #f0f0f0;\n}\n.bunny-components .ant-slider-dot-active {\n  border-color: #ff5833;\n}\n.bunny-components .ant-slider-mark :last-child {\n  transform: translateX(-75%) !important;\n}\n.bunny-components .ant-drawer-content {\n  background: #f3f3f9ff;\n}\n.bunny-components .ant-drawer-body,\n.bunny-components .ant-layout {\n  background: #f8fafc;\n}\n.bunny-components .vista-link {\n  color: #1890ff;\n}\n.bunny-components .vista-link:hover {\n  text-decoration: underline;\n  cursor: pointer;\n}\n.bunny-components .ant-popover-inner-content {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  max-width: 300px;\n}\n.bunny-components .ant-popconfirm-message-text {\n  width: 100% !important;\n}\n.bunny-components .ant-popconfirm-title {\n  padding: 0;\n  text-align: center;\n  font-size: 0.875rem !important;\n  width: 100% !important;\n}\n.bunny-components .ant-popconfirm-buttons {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n}\n.bunny-components .ant-popconfirm-buttons button {\n  margin-inline-start: 0 !important;\n}\n.bunny-components .ant-pagination-item {\n  display: flex !important;\n  align-items: center;\n  justify-content: center;\n}\n.bunny-components .ant-btn-primary:disabled {\n  background: #eef0f2 !important;\n  color: rgba(0, 0, 0, 0.25) !important;\n  border: none;\n}\n.bunny-components .ant-btn {\n  box-shadow: none;\n  text-shadow: none;\n  outline: none !important;\n  line-height: 1;\n  font-weight: normal;\n}\n.bunny-components .ant-btn-default .ant-btn-icon {\n  color: #94a3b8;\n  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n}\n.bunny-components .ant-btn-default:hover .ant-btn-icon {\n  color: #ff7f5c;\n}\n.bunny-components .ant-btn-default:disabled {\n  border-color: rgba(113, 125, 148, 0.2) !important;\n}\n.bunny-components .ant-btn-primary:disabled {\n  background-color: rgba(113, 125, 148, 0.1) !important;\n  border-color: rgba(113, 125, 148, 0.1) !important;\n}\n.bunny-components .ant-btn-primary:hover:disabled,\n.bunny-components .ant-btn-primary:disabled {\n  background-clip: padding-box;\n}\n.bunny-components .ant-select-selection-item-content {\n  display: flex !important;\n  align-items: center;\n}\n.bunny-components .ant-select-item {\n  font-size: 0.875rem;\n}\n.bunny-components .ant-select-item-option-content {\n  display: flex;\n  align-items: center;\n  white-space: nowrap !important;\n  overflow: visible !important;\n  text-overflow: default !important;\n  font-size: 0.875rem;\n}\n.bunny-components .ant-select-arrow .anticon:not(.ant-select-suffix) {\n  pointer-events: none;\n}\n.bunny-components .select-dropdown-blue-gray .ant-select-item-option {\n  background-color: #fff !important;\n}\n.bunny-components .select-dropdown-blue-gray .ant-select-item-option-active {\n  color: #ff5833;\n}\n.bunny-components .ant-dropdown-menu-items {\n  padding-left: 0 !important;\n}\n.bunny-components .ant-dropdown-menu-item-active {\n  background-color: transparent !important;\n}\n.bunny-components .ant-input-affix-wrapper.searchfield {\n  background: white !important;\n}\n.bunny-components .ant-input-affix-wrapper.searchfield input {\n  background: white !important;\n}\n.bunny-components .ant-input-affix-wrapper-focused {\n  background: white !important;\n}\n.bunny-components .panel .ant-input-affix-wrapper.searchfield {\n  background: #f8f8f8 !important;\n}\n.bunny-components .panel .ant-input-affix-wrapper.searchfield input {\n  background: #f8f8f8 !important;\n}\n.bunny-components .ant-input-steps-hidden .ant-input-number-handler-wrap {\n  display: none;\n}\n.bunny-components .ant-layout-header {\n  height: 48px;\n}\n.bunny-components .ant-layout-sider-children {\n  width: inherit;\n  position: fixed;\n}\n.bunny-components .ant-menu-item-group-list {\n  display: flex !important;\n  flex-direction: column !important;\n  align-items: flex-start !important;\n  gap: 4px !important;\n}\n.bunny-components .group {\n  display: flex;\n  flex-direction: row;\n  flex-flow: row wrap;\n  box-sizing: border-box;\n}\n.bunny-components .select-datepicker {\n  animation-duration: 0.35s !important;\n}\n.bunny-components .header-datepicker {\n  top: 96px !important;\n  animation-duration: 0s !important;\n}\n.bunny-components .ant-picker-header {\n  border-bottom: none !important;\n}\n.bunny-components .ant-picker-content thead tr th {\n  font-weight: 500;\n}\n.bunny-components .ant-picker-panel-container {\n  border-radius: 0.375rem;\n}\n.bunny-components .ant-picker-cell-selected .custom-date-display {\n  color: #ffffff;\n  background-color: #ff5833;\n}\n.bunny-components .ant-picker-cell-today .custom-date-display {\n  border: 1px solid #ff5833;\n}\n.bunny-components .ant-select:hover,\n.bunny-components * .cardElement:hover {\n  border-color: #ff5833;\n}\n.bunny-components .ant-input-number {\n  width: 100%;\n}\n.bunny-components .ant-input-number-focused {\n  border-color: #ff5833 !important;\n  background-color: #ffffff !important;\n}\n.bunny-components .ant-input-affix-wrapper-focused,\n.bunny-components .ant-input-number-focused,\n.bunny-components .ant-picker,\n.bunny-components .ant-input,\n.bunny-components .ant-select-focused .ant-select-selector,\n.bunny-components .ant-select-selector:focus,\n.bunny-components .ant-select-selector:active,\n.bunny-components .ant-select-open .ant-select-selector {\n  box-shadow: none !important;\n}\n.bunny-components .ant-select-item-option-selected .ant-select-item-option-state {\n  display: none !important;\n}\n.bunny-components .ant-form * input[type='text'].ant-input:not(:disabled),\n.bunny-components .ant-select-selection-item:not(:disabled) {\n  color: #232323;\n}\n.bunny-components .ant-tabs-ink-bar {\n  display: none !important;\n}\n.bunny-components .ant-tabs-tab.ant-tabs-tab-active {\n  border-bottom: 2px solid #ff5833 !important;\n}\n.bunny-components .ant-tabs-tab {\n  border-bottom: 2px solid transparent !important;\n  padding-bottom: 14px !important;\n}\n.bunny-components .ant-upload-wrapper {\n  display: flex;\n}\n.bunny-components .ant-form-item-label > label::after {\n  display: none !important;\n}\n.bunny-components .ant-menu-item {\n  display: flex !important;\n  align-items: center !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  border-radius: 8px !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  font-size: 14px !important;\n  overflow-wrap: break-word;\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: #ff5833 !important;\n  font-weight: 500 !important;\n}\n.ant-notification-notice-error .ant-notification-notice-icon {\n  color: #ff5833;\n}\n.ant-notification-notice-success .ant-notification-notice-message {\n  color: #00b76a !important;\n  font-weight: 500 !important;\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.bunny-invoice-container {\n  padding: 0;\n  box-sizing: border-box !important;\n  line-height: 1.15;\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 = ":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.bunny-component-wrapper {\n  box-sizing: border-box;\n}\n.bunny-component-wrapper * {\n  box-sizing: border-box;\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.bunny-shadow,\n.bunny-shadow-md {\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.bunny-fixed {\n  position: fixed;\n}\n.bunny-absolute {\n  position: absolute;\n}\n.bunny-relative {\n  position: relative;\n}\n.bunny-sticky {\n  position: sticky;\n}\n.bunny-bottom-0 {\n  bottom: 0px;\n}\n.bunny-bottom-4 {\n  bottom: 1rem;\n}\n.bunny-left-0 {\n  left: 0px;\n}\n.bunny-right-0 {\n  right: 0px;\n}\n.bunny-top-0 {\n  top: 0px;\n}\n.bunny-col-span-1 {\n  grid-column: span 1 / span 1;\n}\n.bunny-col-span-full {\n  grid-column: 1 / -1;\n}\n.bunny-m-0 {\n  margin: 0px;\n}\n.bunny-mx-0 {\n  margin-left: 0px;\n  margin-right: 0px;\n}\n.bunny-mx-4 {\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n.bunny-mx-auto {\n  margin-left: auto;\n  margin-right: auto;\n}\n.bunny-my-0 {\n  margin-top: 0px;\n  margin-bottom: 0px;\n}\n.bunny-my-2 {\n  margin-top: 0.5rem;\n  margin-bottom: 0.5rem;\n}\n.bunny-my-24 {\n  margin-top: 6rem;\n  margin-bottom: 6rem;\n}\n.bunny-my-4 {\n  margin-top: 1rem;\n  margin-bottom: 1rem;\n}\n.bunny-mb-2 {\n  margin-bottom: 0.5rem;\n}\n.bunny-mb-3 {\n  margin-bottom: 0.75rem;\n}\n.bunny-mb-4 {\n  margin-bottom: 1rem;\n}\n.bunny-mb-8 {\n  margin-bottom: 2rem;\n}\n.bunny-ml-auto {\n  margin-left: auto;\n}\n.bunny-mt-0 {\n  margin-top: 0px;\n}\n.bunny-mt-2 {\n  margin-top: 0.5rem;\n}\n.bunny-mt-24 {\n  margin-top: 6rem;\n}\n.bunny-mt-4 {\n  margin-top: 1rem;\n}\n.bunny-mt-5 {\n  margin-top: 1.25rem;\n}\n.bunny-box-border {\n  box-sizing: border-box;\n}\n.bunny-flex {\n  display: flex;\n}\n.bunny-grid {\n  display: grid;\n}\n.bunny-contents {\n  display: contents;\n}\n.bunny-h-0\\.5 {\n  height: 0.125rem;\n}\n.bunny-h-1\\/2 {\n  height: 50%;\n}\n.bunny-h-8 {\n  height: 2rem;\n}\n.bunny-h-full {\n  height: 100%;\n}\n.bunny-h-screen {\n  height: 100vh;\n}\n.bunny-max-h-\\[calc\\(100vh-10rem\\)\\] {\n  max-height: calc(100vh - 10rem);\n}\n.bunny-min-h-0 {\n  min-height: 0px;\n}\n.bunny-w-0\\.5 {\n  width: 0.125rem;\n}\n.bunny-w-1\\/2 {\n  width: 50%;\n}\n.bunny-w-3\\/5 {\n  width: 60%;\n}\n.bunny-w-full {\n  width: 100%;\n}\n.bunny-w-screen {\n  width: 100vw;\n}\n.bunny-flex-1 {\n  flex: 1 1 0%;\n}\n.bunny-shrink {\n  flex-shrink: 1;\n}\n.bunny-shrink-0 {\n  flex-shrink: 0;\n}\n.bunny-grow {\n  flex-grow: 1;\n}\n.bunny-cursor-pointer {\n  cursor: pointer;\n}\n.bunny-grid-cols-3 {\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.bunny-flex-row {\n  flex-direction: row;\n}\n.bunny-flex-col {\n  flex-direction: column;\n}\n.bunny-flex-wrap {\n  flex-wrap: wrap;\n}\n.bunny-items-start {\n  align-items: flex-start;\n}\n.bunny-items-end {\n  align-items: flex-end;\n}\n.bunny-items-center {\n  align-items: center;\n}\n.bunny-justify-end {\n  justify-content: flex-end;\n}\n.bunny-justify-center {\n  justify-content: center;\n}\n.bunny-justify-between {\n  justify-content: space-between;\n}\n.bunny-gap-0 {\n  gap: 0px;\n}\n.bunny-gap-1 {\n  gap: 0.25rem;\n}\n.bunny-gap-2 {\n  gap: 0.5rem;\n}\n.bunny-gap-3 {\n  gap: 0.75rem;\n}\n.bunny-gap-4 {\n  gap: 1rem;\n}\n.bunny-gap-6 {\n  gap: 1.5rem;\n}\n.bunny-gap-8 {\n  gap: 2rem;\n}\n.bunny-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.bunny-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.bunny-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.bunny-overflow-auto {\n  overflow: auto;\n}\n.bunny-overflow-hidden {\n  overflow: hidden;\n}\n.bunny-overflow-y-auto {\n  overflow-y: auto;\n}\n.bunny-whitespace-nowrap {\n  white-space: nowrap;\n}\n.bunny-text-nowrap {\n  text-wrap: nowrap;\n}\n.bunny-rounded {\n  border-radius: 0.25rem;\n}\n.bunny-rounded-full {\n  border-radius: 9999px;\n}\n.bunny-rounded-lg {\n  border-radius: 0.5rem;\n}\n.bunny-rounded-md {\n  border-radius: 0.375rem;\n}\n.bunny-border {\n  border-width: 1px;\n}\n.bunny-border-2 {\n  border-width: 2px;\n}\n.bunny-border-t {\n  border-top-width: 1px;\n}\n.bunny-border-solid {\n  border-style: solid;\n}\n.bunny-border-none {\n  border-style: none;\n}\n.bunny-border-gray-200 {\n  --tw-border-opacity: 1;\n  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));\n}\n.bunny-border-slate-200 {\n  --tw-border-opacity: 1;\n  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));\n}\n.bunny-bg-gray-300 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));\n}\n.bunny-bg-slate-50 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));\n}\n.bunny-bg-transparent {\n  background-color: transparent;\n}\n.bunny-bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bunny-p-0 {\n  padding: 0px;\n}\n.bunny-p-1 {\n  padding: 0.25rem;\n}\n.bunny-p-2 {\n  padding: 0.5rem;\n}\n.bunny-p-4 {\n  padding: 1rem;\n}\n.bunny-px-12 {\n  padding-left: 3rem;\n  padding-right: 3rem;\n}\n.bunny-px-3 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n.bunny-px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n.bunny-px-6 {\n  padding-left: 1.5rem;\n  padding-right: 1.5rem;\n}\n.bunny-py-2 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n.bunny-py-4 {\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n}\n.bunny-py-6 {\n  padding-top: 1.5rem;\n  padding-bottom: 1.5rem;\n}\n.bunny-pb-2 {\n  padding-bottom: 0.5rem;\n}\n.bunny-pb-4 {\n  padding-bottom: 1rem;\n}\n.bunny-pb-6 {\n  padding-bottom: 1.5rem;\n}\n.bunny-pb-8 {\n  padding-bottom: 2rem;\n}\n.bunny-pl-0 {\n  padding-left: 0px;\n}\n.bunny-pl-1 {\n  padding-left: 0.25rem;\n}\n.bunny-pl-4 {\n  padding-left: 1rem;\n}\n.bunny-pr-4 {\n  padding-right: 1rem;\n}\n.bunny-pt-1 {\n  padding-top: 0.25rem;\n}\n.bunny-pt-12 {\n  padding-top: 3rem;\n}\n.bunny-pt-2 {\n  padding-top: 0.5rem;\n}\n.bunny-pt-4 {\n  padding-top: 1rem;\n}\n.bunny-pt-5 {\n  padding-top: 1.25rem;\n}\n.bunny-pt-\\[25vh\\] {\n  padding-top: 25vh;\n}\n.bunny-text-left {\n  text-align: left;\n}\n.bunny-text-center {\n  text-align: center;\n}\n.bunny-text-right {\n  text-align: right;\n}\n.bunny-text-start {\n  text-align: start;\n}\n.bunny-text-2xl {\n  font-size: 1.5rem;\n  line-height: 2rem;\n}\n.bunny-text-3xl {\n  font-size: 1.875rem;\n  line-height: 2.25rem;\n}\n.bunny-text-base {\n  font-size: 1rem;\n  line-height: 1.5rem;\n}\n.bunny-text-lg {\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n}\n.bunny-text-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.bunny-text-sm\\/5 {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.bunny-text-xl {\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n}\n.bunny-text-xs {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n.bunny-text-xs\\/3 {\n  font-size: 0.75rem;\n  line-height: 0.75rem;\n}\n.bunny-font-bold {\n  font-weight: 700;\n}\n.bunny-font-medium {\n  font-weight: 500;\n}\n.bunny-font-normal {\n  font-weight: 400;\n}\n.bunny-text-gray-400 {\n  --tw-text-opacity: 1;\n  color: rgb(156 163 175 / var(--tw-text-opacity, 1));\n}\n.bunny-text-gray-500 {\n  --tw-text-opacity: 1;\n  color: rgb(107 114 128 / var(--tw-text-opacity, 1));\n}\n.bunny-text-gray-600 {\n  --tw-text-opacity: 1;\n  color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.bunny-text-gray-900 {\n  --tw-text-opacity: 1;\n  color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.bunny-text-orange-500 {\n  --tw-text-opacity: 1;\n  color: rgb(249 115 22 / var(--tw-text-opacity, 1));\n}\n.bunny-text-orange-600 {\n  --tw-text-opacity: 1;\n  color: rgb(234 88 12 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-400 {\n  --tw-text-opacity: 1;\n  color: rgb(148 163 184 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-500 {\n  --tw-text-opacity: 1;\n  color: rgb(100 116 139 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-600 {\n  --tw-text-opacity: 1;\n  color: rgb(71 85 105 / var(--tw-text-opacity, 1));\n}\n.bunny-text-white {\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.bunny-underline {\n  text-decoration-line: underline;\n}\n.bunny-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.bunny-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.bunny-transition-\\[margin\\] {\n  transition-property: margin;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.bunny-duration-300 {\n  transition-duration: 300ms;\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, 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.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.hover\\:bunny-text-orange-400:hover {\n  --tw-text-opacity: 1;\n  color: rgb(251 146 60 / var(--tw-text-opacity, 1));\n}\n.bunny-components .ant-upload-select-picture-card {\n  margin: 0 !important;\n}\n.bunny-components .ant-upload {\n  border-radius: 0.5rem !important;\n}\n.bunny-components .ant-row {\n  margin-bottom: 0px;\n}\n.bunny-components .ant-select-disabled .ant-select-selector .ant-select-selection-item {\n  color: rgba(0, 0, 0, 0.25) !important;\n}\n.bunny-components .ant-input-number,\n.bunny-components .ant-input,\n.bunny-components .ant-picker,\n.bunny-components .ant-input-affix-wrapper,\n.bunny-components .ant-select-selector {\n  font-size: 0.875rem !important;\n  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n  color: #232323 !important;\n}\n.bunny-components .ant-input-affix-wrapper {\n  padding-top: 0 !important;\n  padding-bottom: 0 !important;\n}\n.bunny-components .ant-input-group-addon,\n.bunny-components .ant-input-number-group-addon {\n  color: #475569 !important;\n}\n.bunny-components .ant-input-number-group-wrapper,\n.bunny-components .ant-input-number-affix-wrapper {\n  width: 100%;\n}\n.bunny-components .ant-input-affix-wrapper input {\n  border: none !important;\n}\n.bunny-components .ant-form-item {\n  margin-bottom: 0;\n}\n.bunny-components .ant-form-item-label {\n  text-transform: none !important;\n  font-size: 0.75rem;\n  padding-bottom: 2px !important;\n}\n.bunny-components .ant-form-item-label > label {\n  width: 100%;\n  color: #4b5563 !important;\n}\n.bunny-components .form .ant-form-item-label label {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  box-sizing: border-box;\n}\n.bunny-components .ant-form-item-explain,\n.bunny-components .ant-form-item-explain-error {\n  font-size: 11px;\n  min-height: 11px;\n  line-height: 11px;\n  padding-top: 2px;\n}\n.bunny-components .ant-timeline-item-content {\n  font-size: smaller;\n}\n.bunny-components .ant-tree {\n  font-size: 0.875rem;\n}\n.bunny-components .ant-tree-treenode {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.bunny-components .ant-tree-draggable-icon {\n  height: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.bunny-components .ant-tree-node-content-wrapper {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.bunny-components .ant-tree-switcher {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.bunny-components .ant-page-header {\n  padding-left: 0;\n  padding-right: 0;\n  padding-top: 0;\n}\n.bunny-components .ant-tag {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  border-radius: 14px;\n  font-weight: 500;\n  white-space: nowrap;\n  padding-inline-start: 0.625rem;\n  padding-inline-end: 0.625rem;\n  margin: 0;\n}\n.bunny-components .ant-tag-blue {\n  color: #3b82f6 !important;\n  background: #bfdbfe !important;\n}\n.bunny-components .ant-tag-green {\n  color: #059669 !important;\n  background: #a7f3d0 !important;\n}\n.bunny-components .ant-tag-red {\n  color: #ef4444 !important;\n  background: #fecaca !important;\n}\n.bunny-components .ant-tag-orange {\n  color: #f97316 !important;\n  background: #fed7aa !important;\n}\n.bunny-components .ant-tag-yellow {\n  color: #f59e0b !important;\n  background: #fde68a !important;\n}\n.bunny-components .ant-tag-purple {\n  color: #8b5cf6 !important;\n  background: #ddd6fe !important;\n}\n.bunny-components .ant-tag-gray {\n  color: #6b7280 !important;\n  background: #e5e7eb !important;\n}\n.bunny-components .ant-tag-black {\n  color: white !important;\n  background: black !important;\n}\n.bunny-components .ant-picker {\n  width: 100%;\n}\n.bunny-components .ant-input,\n.bunny-components .ant-select,\n.bunny-components .ant-picker {\n  height: 32px !important;\n}\n.bunny-components .ant-slider-dot {\n  border: 2px solid #f0f0f0;\n}\n.bunny-components .ant-slider-dot-active {\n  border-color: #ff5833;\n}\n.bunny-components .ant-slider-mark :last-child {\n  transform: translateX(-75%) !important;\n}\n.bunny-components .ant-drawer-content {\n  background: #f3f3f9ff;\n}\n.bunny-components .ant-drawer-body,\n.bunny-components .ant-layout {\n  background: #f8fafc;\n}\n.bunny-components .vista-link {\n  color: #1890ff;\n}\n.bunny-components .vista-link:hover {\n  text-decoration: underline;\n  cursor: pointer;\n}\n.bunny-components .ant-popover-inner-content {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  max-width: 300px;\n}\n.bunny-components .ant-popconfirm-message-text {\n  width: 100% !important;\n}\n.bunny-components .ant-popconfirm-title {\n  padding: 0;\n  text-align: center;\n  font-size: 0.875rem !important;\n  width: 100% !important;\n}\n.bunny-components .ant-popconfirm-buttons {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n}\n.bunny-components .ant-popconfirm-buttons button {\n  margin-inline-start: 0 !important;\n}\n.bunny-components .ant-pagination-item {\n  display: flex !important;\n  align-items: center;\n  justify-content: center;\n}\n.bunny-components .ant-btn-primary:disabled {\n  background: #eef0f2 !important;\n  color: rgba(0, 0, 0, 0.25) !important;\n  border: none;\n}\n.bunny-components .ant-btn {\n  box-shadow: none;\n  text-shadow: none;\n  outline: none !important;\n  line-height: 1;\n  font-weight: normal;\n}\n.bunny-components .ant-btn-default .ant-btn-icon {\n  color: #94a3b8;\n  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n}\n.bunny-components .ant-btn-default:hover .ant-btn-icon {\n  color: #ff7f5c;\n}\n.bunny-components .ant-btn-default:disabled {\n  border-color: rgba(113, 125, 148, 0.2) !important;\n}\n.bunny-components .ant-btn-primary:disabled {\n  background-color: rgba(113, 125, 148, 0.1) !important;\n  border-color: rgba(113, 125, 148, 0.1) !important;\n}\n.bunny-components .ant-btn-primary:hover:disabled,\n.bunny-components .ant-btn-primary:disabled {\n  background-clip: padding-box;\n}\n.bunny-components .ant-select-selection-item-content {\n  display: flex !important;\n  align-items: center;\n}\n.bunny-components .ant-select-item {\n  font-size: 0.875rem;\n}\n.bunny-components .ant-select-item-option-content {\n  display: flex;\n  align-items: center;\n  white-space: nowrap !important;\n  overflow: visible !important;\n  text-overflow: default !important;\n  font-size: 0.875rem;\n}\n.bunny-components .ant-select-arrow .anticon:not(.ant-select-suffix) {\n  pointer-events: none;\n}\n.bunny-components .select-dropdown-blue-gray .ant-select-item-option {\n  background-color: #fff !important;\n}\n.bunny-components .select-dropdown-blue-gray .ant-select-item-option-active {\n  color: #ff5833;\n}\n.bunny-components .ant-dropdown-menu-items {\n  padding-left: 0 !important;\n}\n.bunny-components .ant-dropdown-menu-item-active {\n  background-color: transparent !important;\n}\n.bunny-components .ant-input-affix-wrapper.searchfield {\n  background: white !important;\n}\n.bunny-components .ant-input-affix-wrapper.searchfield input {\n  background: white !important;\n}\n.bunny-components .ant-input-affix-wrapper-focused {\n  background: white !important;\n}\n.bunny-components .panel .ant-input-affix-wrapper.searchfield {\n  background: #f8f8f8 !important;\n}\n.bunny-components .panel .ant-input-affix-wrapper.searchfield input {\n  background: #f8f8f8 !important;\n}\n.bunny-components .ant-input-steps-hidden .ant-input-number-handler-wrap {\n  display: none;\n}\n.bunny-components .ant-layout-header {\n  height: 48px;\n}\n.bunny-components .ant-layout-sider-children {\n  width: inherit;\n  position: fixed;\n}\n.bunny-components .ant-menu-item-group-list {\n  display: flex !important;\n  flex-direction: column !important;\n  align-items: flex-start !important;\n  gap: 4px !important;\n}\n.bunny-components .group {\n  display: flex;\n  flex-direction: row;\n  flex-flow: row wrap;\n  box-sizing: border-box;\n}\n.bunny-components .select-datepicker {\n  animation-duration: 0.35s !important;\n}\n.bunny-components .header-datepicker {\n  top: 96px !important;\n  animation-duration: 0s !important;\n}\n.bunny-components .ant-picker-header {\n  border-bottom: none !important;\n}\n.bunny-components .ant-picker-content thead tr th {\n  font-weight: 500;\n}\n.bunny-components .ant-picker-panel-container {\n  border-radius: 0.375rem;\n}\n.bunny-components .ant-picker-cell-selected .custom-date-display {\n  color: #ffffff;\n  background-color: #ff5833;\n}\n.bunny-components .ant-picker-cell-today .custom-date-display {\n  border: 1px solid #ff5833;\n}\n.bunny-components .ant-select:hover,\n.bunny-components * .cardElement:hover {\n  border-color: #ff5833;\n}\n.bunny-components .ant-input-number {\n  width: 100%;\n}\n.bunny-components .ant-input-number-focused {\n  border-color: #ff5833 !important;\n  background-color: #ffffff !important;\n}\n.bunny-components .ant-input-affix-wrapper-focused,\n.bunny-components .ant-input-number-focused,\n.bunny-components .ant-picker,\n.bunny-components .ant-input,\n.bunny-components .ant-select-focused .ant-select-selector,\n.bunny-components .ant-select-selector:focus,\n.bunny-components .ant-select-selector:active,\n.bunny-components .ant-select-open .ant-select-selector {\n  box-shadow: none !important;\n}\n.bunny-components .ant-select-item-option-selected .ant-select-item-option-state {\n  display: none !important;\n}\n.bunny-components .ant-form * input[type='text'].ant-input:not(:disabled),\n.bunny-components .ant-select-selection-item:not(:disabled) {\n  color: #232323;\n}\n.bunny-components .ant-tabs-ink-bar {\n  display: none !important;\n}\n.bunny-components .ant-tabs-tab.ant-tabs-tab-active {\n  border-bottom: 2px solid #ff5833 !important;\n}\n.bunny-components .ant-tabs-tab {\n  border-bottom: 2px solid transparent !important;\n  padding-bottom: 14px !important;\n}\n.bunny-components .ant-upload-wrapper {\n  display: flex;\n}\n.bunny-components .ant-form-item-label > label::after {\n  display: none !important;\n}\n.bunny-components .ant-menu-item {\n  display: flex !important;\n  align-items: center !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  border-radius: 8px !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  font-size: 14px !important;\n  overflow-wrap: break-word;\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: #ff5833 !important;\n  font-weight: 500 !important;\n}\n.ant-notification-notice-error .ant-notification-notice-icon {\n  color: #ff5833;\n}\n.ant-notification-notice-success .ant-notification-notice-message {\n  color: #00b76a !important;\n  font-weight: 500 !important;\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.bunny-invoice-container {\n  padding: 0;\n  box-sizing: border-box !important;\n  line-height: 1.15;\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);
 const IGNORE_ERRORS = ['Invalid or missing authorization', '["Not found"]'];
@@ -141,7 +141,7 @@ const useAllErrorFormats = () => {
 };
 // This will be replaced at build time by rollup-plugin-replace
-const PACKAGE_VERSION = '1.6.0-beta.23';
+const PACKAGE_VERSION = '1.7.0-beta.1';
 const createRequestHeaders = (token) => {
     const headers = createClientDevHeaders({ token });
     // Add the components version header
@@ -927,7 +927,7 @@ function readFragment(...r) {
 var t = initGraphQLTada();
-const query$7 = t(`
+const query$9 = t(`
   query entityBranding {
     entityBranding {
       accentColor
@@ -937,7 +937,7 @@ const query$7 = t(`
   }
 `);
 const getBranding = async ({ token, apiHost }) => {
-    return await execute(query$7, { apiHost, token }, {});
+    return await execute(query$9, { apiHost, token }, {});
 };
 const BunnyContext = createContext({});
@@ -1141,10 +1141,10 @@ const DocumentTemplatePreview = ({ targetUrl }) => {
                         }, children: jsx(RPPages, {}) }))] }) }) }));
 };
-const { Text: Text$A } = Typography;
+const { Text: Text$B } = Typography;
 function BackButton({ onClick, title }) {
     const { brandColor } = useBrand();
-    return (jsxs(StyledBackButton, { brandColor: brandColor, className: "bunny-flex bunny-items-center bunny-gap-2 bunny-p-0 bunny-text-gray-400", onClick: onClick, children: [jsx(FontAwesomeIcon, { className: "pt-0.5", icon: faArrowLeft }), jsx(Text$A, { className: "bunny-text-sm bunny-text-gray-400", children: title || 'back' })] }));
+    return (jsxs(StyledBackButton, { brandColor: brandColor, className: "bunny-flex bunny-items-center bunny-gap-2 bunny-p-0 bunny-text-gray-400", onClick: onClick, children: [jsx(FontAwesomeIcon, { className: "pt-0.5", icon: faArrowLeft }), jsx(Text$B, { className: "bunny-text-sm bunny-text-gray-400 bunny-text-nowrap", children: title || 'back' })] }));
 }
 const StyledBackButton = styled.button.withConfig({
     shouldForwardProp: prop => !['brandColor'].includes(prop),
@@ -1180,7 +1180,7 @@ const InvoiceQuoteView = ({ children, formattedInvoice, html, backButtonName, on
                 }, children: [targetUrl ? (jsx(DocumentTemplatePreview, { targetUrl: targetUrl })) : (jsx(Markup, { content: html })), children] }))] }));
 };
-const MUTATION$9 = `
+const MUTATION$8 = `
 query FormattedInvoice($id: ID) {
   formattedInvoice(id: $id) {
     amount
@@ -1248,7 +1248,7 @@ query FormattedInvoice($id: ID) {
 const getFormattedInvoice = async ({ id, token, apiHost, }) => {
     const vars = { id };
     const response = await gqlRequest({
-        query: MUTATION$9,
+        query: MUTATION$8,
         token,
         vars,
         apiHost,
@@ -18614,7 +18614,7 @@ function CardImage({ paymentMethod: maskedPaymentMethod, }) {
     }
 }
-const { Text: Text$z } = Typography;
+const { Text: Text$A } = Typography;
 const MiniCreditCard_PaymentMethodFragment = t(`
     fragment MiniCreditCard_PaymentMethodFragment on PaymentMethod {
       ...CardImage_PaymentMethodFragment
@@ -18640,22 +18640,22 @@ function MiniCreditCard({ className, buttons, hideDropdownMenu = false, hideDefa
         return darkMode ? 'var(--row-background-alternate)' : 'bg-slate-50';
     }, [darkMode]);
     const isDefault = paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.isDefault;
-    return (jsx("div", { className: `bunny-flex bunny-flex-row bunny-justify-between bunny-items-center bunny-p-1 bunny-px-3 bunny-border-solid ${backgroundColor} bunny-${borderColor} bunny-rounded-md bunny-border ${className}`, id: id, children: paymentMethod ? (jsxs(Fragment, { children: [jsx("div", { className: "bunny-flex bunny-flex-row bunny-gap-4", children: jsxs("div", { className: "bunny-flex bunny-items-center bunny-gap-2 bunny-space-between bunny-w-full", children: [jsx(CardImage, { paymentMethod: paymentMethod }), jsx(Issuer, { issuer: (_a = paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.metadata) === null || _a === void 0 ? void 0 : _a.issuer }), jsx(Identifier, { type: (_b = paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.metadata) === null || _b === void 0 ? void 0 : _b.type, identifier: (_c = paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.metadata) === null || _c === void 0 ? void 0 : _c.identifier }), !hideDefaultTag && (jsx("div", { children: isDefault ? (jsx(Tag, { bordered: false, style: { color: brandColor, backgroundColor: `${brandColor}30` }, children: "Default" })) : null }))] }) }), buttons ? (buttons) : (jsx(Fragment, { children: !hideDropdownMenu && (jsx(DropdownMenu, { setDefault: onClickSetDefault, remove: onClickRemove, isDefault: isDefault !== null && isDefault !== void 0 ? isDefault : false, id: `credit-card-dropdown-${paymentMethod.id}` })) }))] })) : (jsxs("div", { className: "bunny-flex bunny-flex-row bunny-items-center justify-between w-full", children: [jsxs("div", { className: "bunny-flex bunny-flex-row bunny-gap-2 bunny-items-center", children: [jsx(CreditCardOutlined, {}), jsx(Text$z, { className: "bunny-text-slate-400 bunny-text-sm", children: "No payment methods" })] }), jsx(Button, { disabled: true, type: "link" }), buttons] })) }));
+    return (jsx("div", { className: `bunny-flex bunny-flex-row bunny-justify-between bunny-items-center bunny-p-1 bunny-px-3 bunny-border-solid ${backgroundColor} bunny-${borderColor} bunny-rounded-md bunny-border ${className}`, id: id, children: paymentMethod ? (jsxs(Fragment, { children: [jsx("div", { className: "bunny-flex bunny-flex-row bunny-gap-4", children: jsxs("div", { className: "bunny-flex bunny-items-center bunny-gap-2 bunny-space-between bunny-w-full", children: [jsx(CardImage, { paymentMethod: paymentMethod }), jsx(Issuer, { issuer: (_a = paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.metadata) === null || _a === void 0 ? void 0 : _a.issuer }), jsx(Identifier, { type: (_b = paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.metadata) === null || _b === void 0 ? void 0 : _b.type, identifier: (_c = paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.metadata) === null || _c === void 0 ? void 0 : _c.identifier }), !hideDefaultTag && (jsx("div", { children: isDefault ? (jsx(Tag, { bordered: false, style: { color: brandColor, backgroundColor: `${brandColor}30` }, children: "Default" })) : null }))] }) }), buttons ? (buttons) : (jsx(Fragment, { children: !hideDropdownMenu && (jsx(DropdownMenu, { setDefault: onClickSetDefault, remove: onClickRemove, isDefault: isDefault !== null && isDefault !== void 0 ? isDefault : false, id: `credit-card-dropdown-${paymentMethod.id}` })) }))] })) : (jsxs("div", { className: "bunny-flex bunny-flex-row bunny-items-center justify-between w-full", children: [jsxs("div", { className: "bunny-flex bunny-flex-row bunny-gap-2 bunny-items-center", children: [jsx(CreditCardOutlined, {}), jsx(Text$A, { className: "bunny-text-slate-400 bunny-text-sm", children: "No payment methods" })] }), jsx(Button, { disabled: true, type: "link" }), buttons] })) }));
 }
 const Identifier = ({ type, identifier, }) => {
     if (type === 'link') {
         return null;
     }
     if (type === 'cashapp') {
-        return jsx(Text$z, { children: "Cashapp" });
+        return jsx(Text$A, { children: "Cashapp" });
     }
-    return (jsxs("div", { children: [jsx(Text$z, { className: "relative -top-0.5", children: "****" }), jsx(Text$z, { children: identifier })] }));
+    return (jsxs("div", { children: [jsx(Text$A, { className: "relative -top-0.5", children: "****" }), jsx(Text$A, { children: identifier })] }));
 };
 const Issuer = ({ issuer }) => {
     const list = ['visa', 'link', 'jcb', 'discover', 'sepa'];
     if (!issuer || issuer.length == 0 || list.includes(issuer === null || issuer === void 0 ? void 0 : issuer.toLowerCase()))
         return null;
-    return jsx(Text$z, { children: lodashExports.capitalize(issuer) });
+    return jsx(Text$A, { children: lodashExports.capitalize(issuer) });
 };
 const DropdownMenu = ({ setDefault, remove, isDefault, id, }) => {
     const { brandColor } = useBrand();
@@ -18700,6 +18700,16 @@ const QueryKeyFactory = {
         ...(entityId ? [entityId] : []),
         ...(token ? [token] : []),
     ],
+    accountBillingDetailsKey: ({ accountId, token }) => [
+        'accountBillingDetails',
+        ...(accountId ? [accountId] : []),
+        ...(token ? [token] : []),
+    ],
+    accountContactsKey: ({ accountId, token }) => [
+        'accountContacts',
+        ...(accountId ? [accountId] : []),
+        ...(token ? [token] : []),
+    ],
     brandingKey: (token) => ['branding', ...(token ? [token] : [])],
     calculatedPricesKey: ({ priceListId, quantity, token }) => [
         'calculatedPrices',
@@ -18766,7 +18776,7 @@ const QueryKeyFactory = {
     paymentPluginsKey: (token) => ['paymentPlugins', ...(token ? [token] : [])],
 };
-const query$6 = t(`
+const query$8 = t(`
     query PaymentMethods($accountId: ID) {
       paymentMethods(accountId: $accountId) {
         nodes {
@@ -18795,7 +18805,7 @@ const query$6 = t(`
   `, [PaymentForm_PaymentMethodsFragment]);
 const getPaymentMethods = async ({ apiHost, token, accountId, }) => {
     var _a, _b, _c;
-    const response = await execute(query$6, { apiHost, token }, { accountId });
+    const response = await execute(query$8, { apiHost, token }, { accountId });
     // Filter out null values that are technically possible due to api schema
     return (_c = (_b = (_a = response === null || response === void 0 ? void 0 : response.paymentMethods) === null || _a === void 0 ? void 0 : _a.nodes) === null || _b === void 0 ? void 0 : _b.filter(paymentMethod => paymentMethod !== null)) !== null && _c !== void 0 ? _c : [];
 };
@@ -18820,7 +18830,7 @@ const usePaymentMethod = ({ accountId, enabled = true, }) => {
     };
 };
-const mutation$5 = t(`
+const mutation$d = t(`
   query PaymentPlugins($accountId: ID) {
     paymentPlugins(accountId: $accountId) {
       enabled
@@ -18848,7 +18858,7 @@ const mutation$5 = t(`
 //   }[];
 // };
 const getPaymentPlugins = async ({ apiHost, token, accountId, }) => {
-    const response = await execute(mutation$5, { apiHost, token }, { accountId });
+    const response = await execute(mutation$d, { apiHost, token }, { accountId });
     return response === null || response === void 0 ? void 0 : response.paymentPlugins;
 };
 const usePaymentPlugins = (accountId) => {
@@ -19072,7 +19082,7 @@ function useSave$1({ onSaveSuccess, onSaveError, accountId, }) {
     return { save, isSaving };
 }
-const MUTATION$8 = `
+const MUTATION$7 = `
   mutation checkout(
     $invoiceId: ID,
     $quoteId: ID,
@@ -19121,7 +19131,7 @@ const checkout = async ({ quoteId, invoiceId, paymentMethodId, paymentMethodData
         };
     }
     const response = await gqlRequest({
-        query: MUTATION$8,
+        query: MUTATION$7,
         token,
         vars: mutationVars,
         apiHost: apiHost,
@@ -19838,7 +19848,7 @@ const DemoPayExpiry = ({ autoFocus, onChange, placeholder, value, }) => {
     return (jsx("div", { className: "bunny-grow", children: jsx(Input, { name: "expiry", autoFocus: autoFocus, onKeyDown: onKeyPress, onKeyUp: onKeyPress, onChange: onNumberChange, value: formatCardExpiry(value), maxLength: 5, placeholder: placeholder || "MM/YY" }) }));
 };
-const { Text: Text$y } = Typography;
+const { Text: Text$z } = Typography;
 const handleAllErrorFormats = useAllErrorFormats$1();
 const TEST_CARD = '4242424242424242';
 const DemoPayForm = () => {
@@ -19878,7 +19888,7 @@ const DemoPayForm = () => {
     const onCardCvcChange = (cvc) => {
         setCardDetails({ ...cardDetails, cvc });
     };
-    return (jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2", children: [jsxs(StyledInputs, { className: "bunny-flex bunny-flex-col bunny-gap-2", darkMode: darkMode !== null && darkMode !== void 0 ? darkMode : false, children: [jsx(DemoPayCardNumber, { onChange: onCardNumberChange, value: cardDetails.number }), jsxs("div", { className: "bunny-flex bunny-gap-2", children: [jsx(DemoPayExpiry, { onChange: onCardExpiryChange, value: cardDetails.expiry }), jsx(DemoPayCardCvc, { onChange: onCardCvcChange, value: cardDetails.cvc })] })] }), jsx(Text$y, { children: "DemoPay is for testing only." }), jsx(PaymentMethodFooter, { onSubmit: onSubmit })] }));
+    return (jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2", children: [jsxs(StyledInputs, { className: "bunny-flex bunny-flex-col bunny-gap-2", darkMode: darkMode !== null && darkMode !== void 0 ? darkMode : false, children: [jsx(DemoPayCardNumber, { onChange: onCardNumberChange, value: cardDetails.number }), jsxs("div", { className: "bunny-flex bunny-gap-2", children: [jsx(DemoPayExpiry, { onChange: onCardExpiryChange, value: cardDetails.expiry }), jsx(DemoPayCardCvc, { onChange: onCardCvcChange, value: cardDetails.cvc })] })] }), jsx(Text$z, { children: "DemoPay is for testing only." }), jsx(PaymentMethodFooter, { onSubmit: onSubmit })] }));
 };
 const StyledInputs = defaultStyled.div `
   .ant-input {
@@ -19927,7 +19937,7 @@ const CardIcon = ({ className }) => {
     return (jsxs("svg", { className: className, 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" })] }));
 };
-const { Text: Text$x } = Typography;
+const { Text: Text$y } = Typography;
 const PaymentMethodSelector = () => {
     const accountId = useAccountId();
     const { paymentPlugins } = usePaymentPlugins(accountId);
@@ -19941,7 +19951,7 @@ const PaymentOption = ({ selected, paymentPluginId, onClick, name, }) => {
     const isCard = name === null || name === void 0 ? void 0 : name.toLowerCase().includes('card');
     return (jsxs(PaymentOptionContainer, { "$brandColor": brandColor, "$selected": selected, className: `bunny-flex bunny-justify-between bunny-items-center bunny-cursor-pointer bunny-py-2 bunny-rounded bunny-border-solid ${darkMode
             ? `var(--row-background-dark) border-gray-500`
-            : 'bunny-bg-slate-50 bunny-border-slate-200'} bunny-border`, onClick: () => onClick(paymentPluginId), children: [jsxs("div", { className: "bunny-flex bunny-gap-2 bunny-items-center bunny-pl-4", children: [jsx(Checkbox, { checked: selected, className: darkMode ? 'border-gray-400' : '' }), jsx(Text$x, { children: name })] }), isAch ? (jsx(BankOutlined, { className: "bunny-pr-4" })) : isCard ? (jsx(CardIcon, { className: "bunny-pr-4" })) : (jsx(CardIcon, { className: "bunny-pr-4" }))] }));
+            : 'bunny-bg-slate-50 bunny-border-slate-200'} bunny-border`, onClick: () => onClick(paymentPluginId), children: [jsxs("div", { className: "bunny-flex bunny-gap-2 bunny-items-center bunny-pl-4", children: [jsx(Checkbox, { checked: selected, className: darkMode ? 'border-gray-400' : '' }), jsx(Text$y, { children: name })] }), isAch ? (jsx(BankOutlined, { className: "bunny-pr-4" })) : isCard ? (jsx(CardIcon, { className: "bunny-pr-4" })) : (jsx(CardIcon, { className: "bunny-pr-4" }))] }));
 };
 const PaymentOptionContainer = defaultStyled.div `
   transition: border 0.3s ease;
@@ -19999,7 +20009,7 @@ const useAutoSetDefaultPaymentMethod = ({ handleSetDefault, setDefaultPaymentMet
     ]);
 };
-const query$5 = t(`
+const query$7 = t(`
   query GetCurrentUserData {
     company {
       name
@@ -20022,7 +20032,7 @@ const query$5 = t(`
 `);
 const getCurrentUserData = async ({ token, apiHost }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    const response = await execute(query$5, { apiHost, token }, {});
+    const response = await execute(query$7, { apiHost, token }, {});
     return {
         authObjectName: (_a = response === null || response === void 0 ? void 0 : response.currentUser) === null || _a === void 0 ? void 0 : _a.authObjectName,
         account: (_b = response === null || response === void 0 ? void 0 : response.currentUser) === null || _b === void 0 ? void 0 : _b.account,
@@ -20190,6 +20200,8 @@ function PaymentFormContent({ onRemovePaymentMethod, onSetDefaultPaymentMethod,
     const { paymentMethods: maskedPaymentMethods, isLoading: isPaymentMethodLoading } = usePaymentMethod({ accountId });
     // Read fragments
     const paymentMethods = useMemo(() => maskedPaymentMethods === null || maskedPaymentMethods === void 0 ? void 0 : maskedPaymentMethods.map(paymentMethod => readFragment(PaymentForm_PaymentMethodsFragment, paymentMethod)), [maskedPaymentMethods]);
+    // Derived state
+    const hasPaymentMethods = (paymentMethods === null || paymentMethods === void 0 ? void 0 : paymentMethods.length) && (paymentMethods === null || paymentMethods === void 0 ? void 0 : paymentMethods.length) > 0;
     // Custom hooks
     const { setDefaultPaymentMethod: handleSetDefault, loading: setDefaultPaymentMethodLoading } = useSetDefaultPaymentMethod(message => {
         showErrorNotification$4(message, 'Error setting default payment method');
@@ -20228,7 +20240,7 @@ function PaymentFormContent({ onRemovePaymentMethod, onSetDefaultPaymentMethod,
                             label: !showPaymentMethodForm ? (jsx("div", { className: "bunny-pt-2", children: jsx(Button, { onClick: handleClickAddPaymentMethod, type: "default", className: "bunny-w-full", id: "addPaymentMethod", children: "Add payment method" }) })) : null,
                             children: (jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-mt-2", children: [jsx(PaymentMethodSelector, {}), selectedPlugin && (jsx("div", { className: "bunny-flex bunny-flex-col", children: jsx(PaymentMethodDetails, {}) }))] })),
                         },
-                    ] }), formattedAmountDue !== undefined && !showPaymentMethodForm && (jsx("div", { className: "bunny-px-4", children: jsx(CheckoutFooter, {}) }))] })) : (jsx(Button, { style: { margin: '0 16px' }, loading: isPaying, onClick: () => onPaymentFormSubmit(), type: "primary", children: isPaying ? 'Processing...' : 'Complete Order' })) }));
+                    ] }), formattedAmountDue !== undefined && !showPaymentMethodForm && hasPaymentMethods ? (jsx("div", { className: "bunny-px-4", children: jsx(CheckoutFooter, {}) })) : null] })) : (jsx(Button, { style: { margin: '0 16px' }, loading: isPaying, onClick: () => onPaymentFormSubmit(), type: "primary", children: isPaying ? 'Processing...' : 'Complete Order' })) }));
 }
 function Invoice({ id, invoiceQuoteViewComponent, backButtonName, onBackButtonClick, onInvoiceDownloadError, onPaymentSuccess, shadow = 'shadow-md', className, hideDownloadButton = false, hidePaymentForm = false, onInvoiceLoaded, }) {
@@ -20286,7 +20298,7 @@ function ActualInvoice({ hidePaymentForm }) {
     return (jsx("div", { className: "bunny-invoice-container", children: jsxs("div", { className: `bunny-flex bunny-gap-6 ${isMobile ? 'bunny-flex-col bunny-w-full' : ''} ${className}`, children: [formattedInvoice.isLegacy ? (jsx("div", { className: "bunny-flex bunny-justify-center bunny-w-full", children: jsx(LegacyDocument, { documentUuid: formattedInvoice.uuid, documentType: "invoice" }) })) : (invoiceQuoteViewComponent || (jsx(InvoiceQuoteView, { html: formattedInvoice.html, formattedInvoice: formattedInvoice, backButtonName: backButtonName, onBackButtonClick: onBackButtonClick }))), isInvoicePayable && !hidePaymentForm && (jsx("div", { className: `bunny-w-full ${hideDownloadButton || formattedInvoice.isLegacy ? '' : 'pt-12'}`, children: jsx(PaymentForm, { onPaymentSuccess: handlePaymentSuccess, invoice: formattedInvoice }) }))] }) }));
 }
-const query$4 = t(`
+const query$6 = t(`
   query formattedQuote($id: ID) {
     formattedQuote(id: $id) {
       quote {
@@ -20430,7 +20442,7 @@ const query$4 = t(`
   }
 `);
 const getFormattedQuote = async ({ token, apiHost, id, }) => {
-    const response = await execute(query$4, { apiHost, token }, { id });
+    const response = await execute(query$6, { apiHost, token }, { id });
     return response === null || response === void 0 ? void 0 : response.formattedQuote;
 };
@@ -20766,14 +20778,14 @@ const AcceptQuoteModal = ({ acceptBoxVisible, formattedQuote, sendAccept, setAcc
         }, open: acceptBoxVisible, title: (signingPlugins === null || signingPlugins === void 0 ? void 0 : signingPlugins.length) ? 'Start signing' : 'Accept quote', width: 400, children: jsxs(Form, { className: "bunny-flex bunny-flex-col bunny-gap-2", form: form, layout: "vertical", children: [jsx(Form.Item, { label: "Your name", name: "name", rules: createRules(true, 'Your name'), children: jsx(Input, { autoFocus: true, ref: firstInputRef }) }), jsx(Form.Item, { label: "Your job title", name: "title", rules: createRules(true, 'Your job title'), children: jsx(Input, {}) }), jsx(Form.Item, { label: "Purchase order number", name: "poNumber", rules: createRules(poNumberRequired, 'Purchase order number'), children: jsx(Input, {}) }), taxNumberRequired && (jsx(Form.Item, { name: "taxNumber", label: taxNumberLabel, rules: createRules(taxNumberRequired, taxNumberLabel), children: jsx(Input, {}) }))] }) }));
 };
-const { Title: Title$2, Text: Text$w } = Typography;
+const { Title: Title$2, Text: Text$x } = Typography;
 const showSuccessNotification$2 = useSuccessNotification();
 const PaymentHoldModal = ({ visible, setVisible, quote, }) => {
     const queryClient = useQueryClient();
     const token = useToken();
     return (jsxs(StyledModal$2, { centered: true, onCancel: () => {
             setVisible(false);
-        }, footer: null, open: visible, width: 600, children: [jsxs("div", { className: "bunny-mt-5 bunny-pb-4 bunny-mx-4", children: [jsx(Title$2, { className: "bunny-mt-0", level: 5, children: "Pay and sign" }), jsxs(Text$w, { className: "bunny-bt-2 bunny-text-sm/5 bunny-text-gray-500", children: ["To accept this quote, approve a payment hold for", ' ', formatCurrency$1(quote.amount, quote.currency), ". This amount will be charged to your payment method once the quote is signed."] })] }), jsx("div", { className: "bunny-mb-3", children: jsx(PaymentForm, { quote: {
+        }, footer: null, open: visible, width: 600, children: [jsxs("div", { className: "bunny-mt-5 bunny-pb-4 bunny-mx-4", children: [jsx(Title$2, { className: "bunny-mt-0", level: 5, children: "Pay and sign" }), jsxs(Text$x, { className: "bunny-bt-2 bunny-text-sm/5 bunny-text-gray-500", children: ["To accept this quote, approve a payment hold for", ' ', formatCurrency$1(quote.amount, quote.currency), ". This amount will be charged to your payment method once the quote is signed."] })] }), jsx("div", { className: "bunny-mb-3", children: jsx(PaymentForm, { quote: {
                         amount: quote.amount,
                         currencyId: quote.currency,
                         id: quote.quote.id,
@@ -20823,7 +20835,7 @@ const StyledModal$2 = (props) => {
     return jsx(ModalOverrideBrandStylings, { closable: false, ...props });
 };
-const { Text: Text$v } = Typography;
+const { Text: Text$w } = Typography;
 defaultStyled.div `
   Text {
     width: 100%;
@@ -20915,7 +20927,7 @@ function QuoteButtons({ isAccepted, formattedQuote, isMobile, hideDownloadButton
     const signingPlugins = useSigningPlugins({ apiHost, token });
     return (jsxs("div", { className: "flex flex-row justify-end items-center gap-4", id: "acceptance", style: {
             color: secondaryColor,
-        }, children: [isAccepted && formattedQuote.acceptedAt ? (jsx(Text$v, { children: `Quote was accepted by ${formattedQuote.acceptedByName} on ${formatDate(formattedQuote.acceptedAt)}` })) : null, (!isMobile || !isAccepted) && (jsxs("div", { className: isMobile ? 'flex w-full justify-end gap-2' : 'flex items-center justify-end gap-2', children: [paymentHold ? (jsx(PaymentHoldDisplay, { paymentHold: paymentHold, currency: formattedQuote.currency, amount: formattedQuote.amount })) : null, !isMobile && !hideDownloadButton ? (jsx(Button, { icon: jsx(DownloadOutlined, {}), onClick: () => downloadFile(apiHost + '/api/pdf/quote', token), children: "Download" })) : null, shouldDoPaymentHold && !paymentHoldCompleted ? (jsx(Button, { disabled: isExpired, onClick: () => setPaymentHoldModalVisible(true), type: "primary", children: "Pay and sign" })) : (jsx(Fragment, { children: !isAccepted ? (jsx(Button, { disabled: isExpired || isAccepting, onClick: handleClickAccept, type: "primary", children: isExpired
+        }, children: [isAccepted && formattedQuote.acceptedAt ? (jsx(Text$w, { children: `Quote was accepted by ${formattedQuote.acceptedByName} on ${formatDate(formattedQuote.acceptedAt)}` })) : null, (!isMobile || !isAccepted) && (jsxs("div", { className: isMobile ? 'flex w-full justify-end gap-2' : 'flex items-center justify-end gap-2', children: [paymentHold ? (jsx(PaymentHoldDisplay, { paymentHold: paymentHold, currency: formattedQuote.currency, amount: formattedQuote.amount })) : null, !isMobile && !hideDownloadButton ? (jsx(Button, { icon: jsx(DownloadOutlined, {}), onClick: () => downloadFile(apiHost + '/api/pdf/quote', token), children: "Download" })) : null, shouldDoPaymentHold && !paymentHoldCompleted ? (jsx(Button, { disabled: isExpired, onClick: () => setPaymentHoldModalVisible(true), type: "primary", children: "Pay and sign" })) : (jsx(Fragment, { children: !isAccepted ? (jsx(Button, { disabled: isExpired || isAccepting, onClick: handleClickAccept, type: "primary", children: isExpired
                                 ? 'Quote is expired'
                                 : (signingPlugins === null || signingPlugins === void 0 ? void 0 : signingPlugins.length)
                                     ? 'Start signing'
@@ -21036,9 +21048,9 @@ const getColor = (state) => {
     }
 };
-const { Text: Text$u } = Typography;
+const { Text: Text$v } = Typography;
 const TransactionDate = ({ date }) => {
-    return jsx(Text$u, { className: "bunny-text-sm", children: formatDate(date) });
+    return jsx(Text$v, { className: "bunny-text-sm", children: formatDate(date) });
 };
 const ArrowDownToLine = ({ className, color = SLATE_600, }) => {
@@ -21082,13 +21094,13 @@ const TransactionGridCell = defaultStyled.div.withConfig({
   min-width: 48px;
 `;
-const { Text: Text$t } = Typography;
+const { Text: Text$u } = Typography;
 const TransactionsEmptyState = () => {
     const { noTransactionsMessage } = useContext(TransactionsListContext);
-    return (jsx(Text$t, { className: "bunny-flex bunny-justify-center bunny-p-4 bunny-text-base", children: noTransactionsMessage || 'There are no transactions' }));
+    return (jsx(Text$u, { className: "bunny-flex bunny-justify-center bunny-p-4 bunny-text-base", children: noTransactionsMessage || 'There are no transactions' }));
 };
-const { Text: Text$s } = Typography;
+const { Text: Text$t } = Typography;
 const isInvoice = (transaction) => {
     return transaction.kind === 'INVOICE';
 };
@@ -21096,7 +21108,7 @@ const TransactionRowTitle = ({ transaction }) => {
     if (!isInvoice(transaction)) {
         return jsx(Fragment, {});
     }
-    return (jsx(Text$s, { className: "bunny-text-slate-400", style: { fontSize: '11px' }, children: transaction.transactionable.number }));
+    return (jsx(Text$t, { className: "bunny-text-slate-400", style: { fontSize: '11px' }, children: transaction.transactionable.number }));
 };
 function transactionDateToDisplay(transaction, transactionDateType) {
@@ -21114,7 +21126,7 @@ function transactionDateToDisplay(transaction, transactionDateType) {
     }
 }
-const { Text: Text$r } = Typography;
+const { Text: Text$s } = Typography;
 const TransactionsListDesktop = ({ transactions, onTransactionClick, }) => {
     const { columns, transactionDateType } = useContext(TransactionsListContext);
     const { apiHost, darkMode } = useContext(BunnyContext);
@@ -21142,11 +21154,11 @@ const TransactionsListDesktop = ({ transactions, onTransactionClick, }) => {
                         !showState &&
                         !showAmount &&
                         !showDownload &&
-                        !showAccountName && (jsx(TransactionGridCell, { children: jsx(Text$r, { children: "No columns selected" }) })), showDate && (jsx(TransactionGridCell, { right: false, children: jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) }) })), showTitle && (jsx(Fragment, { children: jsxs(TransactionGridCell, { right: false, className: "bunny-flex bunny-items-center bunny-gap-2", children: [jsx(Text$r, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsx(TransactionRowTitle, { transaction: transaction })] }) })), showAccountName && (jsx(TransactionGridCell, { right: false, children: jsx(Text$r, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }) })), !showDate && !showTitle && !showAccountName && jsx(TransactionGridCell, { right: false }), showDownload && (jsx(TransactionGridCell, { children: jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })), showState ? (jsx(TransactionGridCell, { right: false, children: jsx(StateTag, { state: transaction.state }) })) : null, showAmount && (jsx(TransactionGridCell, { right: true, children: jsx(Text$r, { children: formatCurrency$1(((_b = transaction === null || transaction === void 0 ? void 0 : transaction.transactionable) === null || _b === void 0 ? void 0 : _b.amount) || transaction.amount, transaction.currencyId) }) }))] }, index));
+                        !showAccountName && (jsx(TransactionGridCell, { children: jsx(Text$s, { children: "No columns selected" }) })), showDate && (jsx(TransactionGridCell, { right: false, children: jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) }) })), showTitle && (jsx(Fragment, { children: jsxs(TransactionGridCell, { right: false, className: "bunny-flex bunny-items-center bunny-gap-2", children: [jsx(Text$s, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsx(TransactionRowTitle, { transaction: transaction })] }) })), showAccountName && (jsx(TransactionGridCell, { right: false, children: jsx(Text$s, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }) })), !showDate && !showTitle && !showAccountName && jsx(TransactionGridCell, { right: false }), showDownload && (jsx(TransactionGridCell, { children: jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })), showState ? (jsx(TransactionGridCell, { right: false, children: jsx(StateTag, { state: transaction.state }) })) : null, showAmount && (jsx(TransactionGridCell, { right: true, children: jsx(Text$s, { children: formatCurrency$1(((_b = transaction === null || transaction === void 0 ? void 0 : transaction.transactionable) === null || _b === void 0 ? void 0 : _b.amount) || transaction.amount, transaction.currencyId) }) }))] }, index));
         }) }));
 };
-const { Text: Text$q } = Typography;
+const { Text: Text$r } = Typography;
 const TransactionsListMobile = ({ transactions, onTransactionClick, }) => {
     const { columns, transactionDateType } = useContext(TransactionsListContext);
     const { apiHost, darkMode } = useContext(BunnyContext);
@@ -21168,11 +21180,11 @@ const TransactionsListMobile = ({ transactions, onTransactionClick, }) => {
                     backgroundColor: index % 2 === 0
                         ? `var(--row-background${darkMode ? '-dark' : ''})`
                         : `var(--row-background-alternate${darkMode ? '-dark' : ''})`,
-                }, children: [jsx(TransactionGridCell, { children: jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2", children: [(showTitle || showState) && (jsxs("div", { className: "bunny-flex bunny-items-center bunny-gap-2", children: [showTitle && (jsxs(Fragment, { children: [jsx(Text$q, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsx(TransactionRowTitle, { transaction: transaction })] })), showState && jsx(StateTag, { state: transaction.state })] })), jsxs("div", { className: "bunny-flex bunny-items-center bunny-gap-2", children: [showAccountName && jsx(Text$q, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }), showAccountName && showDate && jsx(Text$q, { children: "\u00B7" }), showDate && (jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) })), showDate && showAmount && jsx(Text$q, { children: "\u00B7" }), showAmount && (jsx(Text$q, { children: formatCurrency$1(transaction.transactionable.amount || transaction.amount, transaction.currencyId) }))] })] }) }), showDownload && (jsx(TransactionGridCell, { right: true, children: jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) }))] }, index));
+                }, children: [jsx(TransactionGridCell, { children: jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2", children: [(showTitle || showState) && (jsxs("div", { className: "bunny-flex bunny-items-center bunny-gap-2", children: [showTitle && (jsxs(Fragment, { children: [jsx(Text$r, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsx(TransactionRowTitle, { transaction: transaction })] })), showState && jsx(StateTag, { state: transaction.state })] })), jsxs("div", { className: "bunny-flex bunny-items-center bunny-gap-2", children: [showAccountName && jsx(Text$r, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }), showAccountName && showDate && jsx(Text$r, { children: "\u00B7" }), showDate && (jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) })), showDate && showAmount && jsx(Text$r, { children: "\u00B7" }), showAmount && (jsx(Text$r, { children: formatCurrency$1(transaction.transactionable.amount || transaction.amount, transaction.currencyId) }))] })] }) }), showDownload && (jsx(TransactionGridCell, { right: true, children: jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) }))] }, index));
         }) }));
 };
-const { Text: Text$p } = Typography;
+const { Text: Text$q } = Typography;
 const DISPLAY_WIDTH = 1200;
 function Transactions({ transactionComponent, showSearchBar = true, showTitle = true, title = 'Past transactions', columns = ['date', 'title', 'state', 'amount', 'download'], className, shadow = 'shadow-md', searchBarClassName, useModal = false, onTransactionClick, suppressTransactionDisplay = false, kindsToShow = [
     TransactionKind.INVOICE,
@@ -21276,7 +21288,7 @@ function TransactionsDisplay({ transactions, onSearchValueChanged, search, }) {
         onTransactionDisplayClose === null || onTransactionDisplayClose === void 0 ? void 0 : onTransactionDisplayClose(selectedTransaction);
         setDrawerOpen(false);
     }
-    return (jsxs("div", { style: style, children: [jsxs("div", { className: `bunny-flex bunny-flex-col bunny-w-full bunny-shadow-padding-xb bunny-gap-2 ${isMobile ? 'bunny-overflow-hidden' : ''} ${className}`, children: [showTitle || showSearchBar ? (jsxs("div", { className: `bunny-flex ${isMobile ? 'bunny-flex-col bunny-gap-1' : 'bunny-flex-row bunny-items-center'} bunny-justify-between`, children: [showTitle ? (jsx(Text$p, { className: "bunny-shrink-0 bunny-font-medium", style: { color: darkMode ? undefined : secondaryColor }, children: title })) : (jsx("div", {}) // Empty div so justify-between works
+    return (jsxs("div", { style: style, children: [jsxs("div", { className: `bunny-flex bunny-flex-col bunny-w-full bunny-shadow-padding-xb bunny-gap-2 ${isMobile ? 'bunny-overflow-hidden' : ''} ${className}`, children: [showTitle || showSearchBar ? (jsxs("div", { className: `bunny-flex ${isMobile ? 'bunny-flex-col bunny-gap-1' : 'bunny-flex-row bunny-items-center'} bunny-justify-between`, children: [showTitle ? (jsx(Text$q, { className: "bunny-shrink-0 bunny-font-medium", style: { color: darkMode ? undefined : secondaryColor }, children: title })) : (jsx("div", {}) // Empty div so justify-between works
                             ), showSearchBar && (jsx("div", { className: `${isMobile ? 'bunny-w-full' : ''}`, children: jsx(Input, { className: searchBarClassName ? searchBarClassName : '', onChange: e => {
                                         const value = e.target.value;
                                         // Allow empty string, numbers, and decimal point
@@ -21399,7 +21411,7 @@ const useHasTaxPlugin = ({ apiHost, token, }) => {
     return Boolean(plugins === null || plugins === void 0 ? void 0 : plugins.some((plugin) => plugin.type === "taxation"));
 };
-const MUTATION$7 = () => `
+const MUTATION$6 = () => `
 mutation AccountSignup (
   $pluginId: String!,
   $paymentMethodId: String,
@@ -21473,7 +21485,7 @@ const accountSignup = async ({ token, apiHost, accountId, quoteId, paymentToken,
         priceListCode,
     };
     const response = await gqlRequest({
-        query: MUTATION$7(),
+        query: MUTATION$6(),
         token,
         vars,
         apiHost,
@@ -21484,7 +21496,7 @@ const accountSignup = async ({ token, apiHost, accountId, quoteId, paymentToken,
     return response === null || response === void 0 ? void 0 : response.accountSignup;
 };
-const MUTATION$6 = () => `
+const MUTATION$5 = () => `
 mutation QuoteAccountSignup (
   $accountName: String!,
   $billingContact: ContactAttributes!,
@@ -21561,7 +21573,7 @@ const quoteAccountSignup = async ({ token, apiHost, priceListCode, accountName,
         billingDetails,
     };
     const response = await gqlRequest({
-        query: MUTATION$6(),
+        query: MUTATION$5(),
         token,
         vars,
         apiHost,
@@ -21639,7 +21651,7 @@ const QUOTE_RECALCULATE_TAXES = `
     }
   }
 `;
-const quoteRecalculateTaxes = async ({ quoteId, apiHost, token, }) => {
+const quoteRecalculateTaxes$2 = async ({ quoteId, apiHost, token, }) => {
     var _a, _b;
     const vars = { id: quoteId };
     const response = await gqlRequest({
@@ -21654,7 +21666,7 @@ const quoteRecalculateTaxes = async ({ quoteId, apiHost, token, }) => {
     return (_b = response.quoteRecalculateTaxes) === null || _b === void 0 ? void 0 : _b.quote;
 };
-const MUTATION$5 = () => `
+const MUTATION$4 = () => `
 query PriceList($code: String!) {
   priceList (code: $code) {
     basePrice
@@ -21679,7 +21691,7 @@ query PriceList($code: String!) {
 }`;
 const getPriceList = async ({ token, code, apiHost, }) => {
     const response = await gqlRequest({
-        query: MUTATION$5(),
+        query: MUTATION$4(),
         token,
         vars: { code },
         apiHost,
@@ -21689,16 +21701,60 @@ const getPriceList = async ({ token, code, apiHost, }) => {
 const SubscriptionsContext = createContext({});
+const QuoteContext = createContext({});
 const graphql = initGraphQLTada();
-function canEditChargeQuantity(charge) {
-    if (!charge)
-        return false;
-    if (charge.chargeType === graphql.scalar('ChargeType', 'USAGE'))
-        return false;
-    if (charge.pricingModel === graphql.scalar('PricingModel', 'FLAT'))
-        return false;
-    return true;
+const periodMonthsConverter = (period) => {
+    if (period === 0)
+        return graphql.scalar('BillingPeriod', 'ONCE');
+    else if (period === 1)
+        return graphql.scalar('BillingPeriod', 'MONTHLY');
+    else if (period === 3)
+        return graphql.scalar('BillingPeriod', 'QUARTERLY');
+    else if (period === 6)
+        return graphql.scalar('BillingPeriod', 'SEMI_ANNUAL');
+    else if (period === 12)
+        return graphql.scalar('BillingPeriod', 'ANNUAL');
+    else
+        return null;
+};
+const billingPeriodConverter = (period) => {
+    if (period === graphql.scalar('BillingPeriod', 'ONCE'))
+        return 0;
+    else if (period === graphql.scalar('BillingPeriod', 'MONTHLY'))
+        return 1;
+    else if (period === graphql.scalar('BillingPeriod', 'QUARTERLY'))
+        return 3;
+    else if (period === graphql.scalar('BillingPeriod', 'SEMI_ANNUAL'))
+        return 6;
+    else
+        return 12;
+};
+function getAddonsForBillingPeriod(billingPeriod, addonPlans) {
+    const flattenedPriceLists = addonPlans.flatMap(addonPlan => addonPlan.priceLists);
+    return flattenedPriceLists.filter(priceList => priceList.periodMonths === billingPeriodConverter(billingPeriod));
+}
+const hasUnpurchasedAddonPriceLists_PlanFragment = t(`
+    fragment hasUnpurchasedAddonPriceLists_PlanFragment on Plan {
+      priceLists {
+        id
+        isVisible
+        periodMonths
+      }
+    }
+  `);
+function hasUnpurchasedAddonPriceLists(maskedPriceListAddonPlans, currentSubscription, billingPeriod) {
+    // Read fragments
+    const priceListAddonPlans = maskedPriceListAddonPlans.map(maskedAddonPlan => readFragment(hasUnpurchasedAddonPriceLists_PlanFragment, maskedAddonPlan));
+    const addonPriceLists = getAddonsForBillingPeriod(billingPeriod, priceListAddonPlans).filter(priceList => priceList.isVisible);
+    const unpurchasedAddonPriceLists = addonPriceLists === null || addonPriceLists === void 0 ? void 0 : addonPriceLists.filter(addonPriceList => {
+        var _a;
+        return !((_a = currentSubscription === null || currentSubscription === void 0 ? void 0 : currentSubscription.addonSubscriptions) === null || _a === void 0 ? void 0 : _a.some(addonSubscription => addonSubscription.priceList.id === addonPriceList.id));
+    });
+    return unpurchasedAddonPriceLists.length > 0;
 }
 function hasUnpurchasedFeatureAddons(priceList, currentSubscription) {
@@ -21725,110 +21781,317 @@ function featureAddonSwitchTestId(addonName) {
     return `feature-addon-switch-${name}`;
 }
-const MUTATION$4 = `{
-  currentUser {
-    taxationRequiredAccountFields
-  }
-}`;
-const getTaxationRequiredAccountFields = async ({ apiHost, token, }) => {
-    var _a, _b;
-    const response = await gqlRequest({
-        query: MUTATION$4,
-        token,
-        apiHost: apiHost,
-    });
-    return ((_b = (_a = response === null || response === void 0 ? void 0 : response.currentUser) === null || _a === void 0 ? void 0 : _a.taxationRequiredAccountFields) === null || _b === void 0 ? void 0 : _b.length) > 0
-        ? response.currentUser.taxationRequiredAccountFields
-        : null;
+const canSubscriptionUpgradeFromTrial = (subscription) => {
+    var _a;
+    return (((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === t.scalar('SubscriptionState', 'TRIAL') &&
+        subscription.plan.selfServiceBuy) ||
+        false;
 };
-const BunnyFooterIcon = ({ color }) => {
-    return (jsxs("svg", { width: "45", height: "15", viewBox: "0 0 39 13", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxs("g", { 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", { id: "clip0_6_851", children: jsx("rect", { width: "39", height: "13", fill: "white" }) }) })] }));
+const canSubscriptionUpgradeFromTrialExpired = (subscription) => {
+    var _a;
+    return (((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === t.scalar('SubscriptionState', 'TRIAL_EXPIRED') &&
+        subscription.plan.selfServiceBuy) ||
+        false;
 };
-const { Text: Text$o } = Typography;
-const Footer = ({ className }) => {
-    const token = useToken();
-    const { currentUser } = useCurrentUserData(token);
-    const { privacyUrl, termsUrl } = currentUser;
-    const isMobile = useIsMobile$1();
-    return (jsxs("div", { className: `bunny-flex bunny-items-center bunny-justify-between bunny-shrink-0 ${isMobile ? 'bunny-flex-col bunny-gap-2' : ''} ${className}`, children: [(termsUrl || privacyUrl) && (jsxs("div", { className: "bunny-flex bunny-items-center bunny-gap-3", children: [termsUrl && (jsx(StyedLink, { className: "bunny-text-xs bunny-text-slate-400", href: termsUrl, rel: "noopener noreferrer", target: "_blank", type: "text", children: "Terms" })), privacyUrl && (jsx(StyedLink, { className: "bunny-text-xs bunny-text-slate-400", href: privacyUrl, rel: "noopener noreferrer", target: "_blank", type: "text", children: "Privacy" }))] })), jsx(BunnyMarketingLink, {})] }));
+const isSubscriptionNotActive = (subscription) => {
+    var _a, _b, _c;
+    return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === t.scalar('SubscriptionState', 'EXPIRED') ||
+        ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === t.scalar('SubscriptionState', 'CANCELED') ||
+        ((_c = subscription.state) === null || _c === void 0 ? void 0 : _c.toUpperCase()) === t.scalar('SubscriptionState', 'TRIAL_EXPIRED');
 };
-const BunnyMarketingLink = () => {
-    const [isHovered, setIsHovered] = useState(false);
-    const isMobile = useIsMobile$1();
-    return (jsx("div", { className: `bunny-flex bunny-items-end bunny-justify-end ${isMobile ? '' : 'grow'}`, children: jsx(StyledBunnyLink, { className: "bunny-flex bunny-items-end bunny-justify-end bunny-text-slate-400", href: "https://bunny.com/", rel: "noopener noreferrer", target: "_blank", children: jsxs("div", { className: "bunny-flex bunny-items-center", onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [jsx(Text$o, { className: "bunny-text-slate-400", children: "Powered by\u00A0" }), jsx("div", { style: { paddingTop: '5px' }, children: jsx(BunnyFooterIcon, { color: isHovered ? PRIMARY_COLOR : SLATE_400 }) })] }) }) }));
+const isSubscriptionActiveOrPending = (subscription) => {
+    var _a, _b;
+    return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === t.scalar('SubscriptionState', 'ACTIVE') ||
+        ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === t.scalar('SubscriptionState', 'PENDING');
 };
-const StyedLink = styled.a `
-  color: ${SLATE_400};
-  transition: color 0.3s;
-  &:hover {
-    color: ${SLATE_500};
-  }
-  text-decoration: none;
-`;
-const StyledBunnyLink = styled(StyedLink) `
-  &:hover {
-    color: ${PRIMARY_COLOR} !important;
-  }
-`;
-const MUTATION$3 = `mutation quoteChangeAddCoupon($couponCode: String!, $quoteChangeId: ID!) {
-    quoteChangeAddCoupon(couponCode: $couponCode, quoteChangeId: $quoteChangeId) {
-      quoteChange {
-        id
-        charges {
-          id
-          amount
-          couponId
-        }
-      }
-    }
-}`;
-const quoteChangeAddCoupon = async ({ quoteChangeId, couponCode, token, apiHost, }) => {
+const isSubscriptionTrial = (subscription) => { var _a; return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === t.scalar('SubscriptionState', 'TRIAL'); };
+const isSubscriptionTrialExpired = (subscription) => { var _a; return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === t.scalar('SubscriptionState', 'TRIAL_EXPIRED'); };
+// Helper function to check if charge is a discount
+const isDiscount$1 = (kind) => kind === QuoteChangeKind.DISCOUNT || kind === QuoteChangeKind.FREE_PERIOD_DISCOUNT;
+const hasPriceTiers = (charge) => {
     var _a;
-    const vars = { couponCode, quoteChangeId };
-    const response = await gqlRequest({
-        query: MUTATION$3,
-        token,
-        vars,
-        apiHost,
-    });
-    const errors = (_a = response === null || response === void 0 ? void 0 : response.quoteAddCoupon) === null || _a === void 0 ? void 0 : _a.errors;
-    if (errors)
-        throw errors;
-    return response.quote;
+    return Boolean((_a = charge === null || charge === void 0 ? void 0 : charge.priceTiers) === null || _a === void 0 ? void 0 : _a.length);
 };
-const MUTATION$2 = `mutation quoteChangeRemoveCoupon($quoteChangeId: ID!, $couponCode: String!) {
-    quoteChangeRemoveCoupon(quoteChangeId: $quoteChangeId, couponCode: $couponCode) {
-        errors
-    }
-}
-`;
-const quoteChangeRemoveCoupon = async ({ quoteChangeId, couponCode, token, apiHost, }) => {
-    var _a;
-    const vars = { couponCode, quoteChangeId };
-    const response = await gqlRequest({
-        query: MUTATION$2,
-        token,
-        vars,
-        apiHost,
-    });
-    const errors = (_a = response === null || response === void 0 ? void 0 : response.quoteChangeRemoveCoupon) === null || _a === void 0 ? void 0 : _a.errors;
-    if (errors)
-        throw errors;
-    return response.quote;
+const removeHTMLTagsRegex = /<br>(?=(?:\s*<[^>]*>)*$)|(<br>)|<[^>]*>/gi;
+// Description is a string that can contain HTML tags. We want to remove all HTML tags except <br> tags.
+const createPlanDescription = (planDescription) => {
+    return (planDescription || '').replace(removeHTMLTagsRegex, (_, y) => (y ? ' & ' : ''));
 };
-const COUPONS_QUERY = (filter) => `
-    query Coupons {
-        coupons(filter: ${filter ? `"${filter}"` : 'null'}) {
-            totalCount
+const getActivePlanPriceData = (priceList, selectedPriceList) => {
+    if (!priceList) {
+        return;
+    }
+    // If a period option is selected, return the charge that matches the selected period option
+    let activeBillingPLCharge;
+    // Default to first price list charge
+    let lowestPLCharge;
+    // Find the lowest price list charge with a billing period that matches the selected period option
+    if (priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id)) {
+        activeBillingPLCharge = priceList.charges[0];
+    }
+    for (let j = 0; j < priceList.charges.length; j++) {
+        const charge = priceList.charges[j];
+        if (charge.chargeType === ChargeType.USAGE || charge.featureAddon === true)
+            continue;
+        if (activeBillingPLCharge) {
+            // If we already found a charge with the same billing period check if this charge is lower
+            if (charge.basePrice < activeBillingPLCharge.basePrice &&
+                charge.billingPeriod === (activeBillingPLCharge === null || activeBillingPLCharge === void 0 ? void 0 : activeBillingPLCharge.billingPeriod)) {
+                activeBillingPLCharge = charge;
+            }
+        }
+        // If a period option is selected, only return the charge if it matches the selected period option
+        else if (selectedPriceList &&
+            charge.billingPeriod === periodMonthsConverter(selectedPriceList.periodMonths)) {
+            activeBillingPLCharge = charge;
+        }
+        // Otherwise, return the lowest price list charge
+        else if (charge.basePrice < ((lowestPLCharge === null || lowestPLCharge === void 0 ? void 0 : lowestPLCharge.basePrice) || -1)) {
+            lowestPLCharge = charge;
         }
     }
-`;
-const getCoupons = async ({ token, apiHost, filter, }) => {
+    return {
+        activeCharge: activeBillingPLCharge || lowestPLCharge,
+    };
+};
+const showErrorNotification$3 = useErrorNotification();
+const isPriceListDisabled = ({ priceList, upgradingSubscription, }) => {
+    const priceListAddonPlans = priceList === null || priceList === void 0 ? void 0 : priceList.plan.addonPlans;
+    if (!priceListAddonPlans) {
+        showErrorNotification$3('Price list addon plans are undefined');
+        return false;
+    }
+    const canPurchaseFeatureAddons = hasUnpurchasedFeatureAddons(priceList, upgradingSubscription);
+    const canPurchasePlanAddons = hasUnpurchasedAddonPriceLists(priceListAddonPlans, upgradingSubscription, periodMonthsConverter(priceList.periodMonths));
+    const existingSubscriptionInTrial = upgradingSubscription && canSubscriptionUpgradeFromTrial(upgradingSubscription);
+    const existingSubscriptionInTrialExpired = upgradingSubscription && canSubscriptionUpgradeFromTrialExpired(upgradingSubscription);
+    const isUpgradingSubscriptionPriceList = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === priceList.id;
+    // When should priceList be disabled?
+    // if upgradingSubscription?.priceList.id === priceList.id
+    //     AND the upgradingSubscription is not in trial
+    //     AND cannot purchase feature addons
+    //     AND cannot purchase add-on plans
+    //     AND selfServiceBuy is false
+    // if upgradingSubscription?.priceList.id != priceList.id
+    //     AND upgradingSubscription is expired trial
+    if (isUpgradingSubscriptionPriceList) {
+        return (!existingSubscriptionInTrial &&
+            !existingSubscriptionInTrialExpired &&
+            !canPurchaseFeatureAddons &&
+            !canPurchasePlanAddons);
+    }
+    else {
+        return false;
+    }
+};
+const CheckoutButton = ({ disabled, onClickCheckout, loading, tooltipText, }) => {
+    const isMobile = useIsMobile$1();
+    const TooltipWrapper = ({ children }) => {
+        if (tooltipText) {
+            return jsx(Tooltip, { title: tooltipText, children: children });
+        }
+        return jsx("div", { children: children });
+    };
+    return (jsx(TooltipWrapper, { children: jsx(Button, { className: isMobile ? 'w-full' : '', disabled: disabled, onClick: onClickCheckout, size: isMobile ? 'large' : 'middle', type: "primary", loading: loading, children: "Proceed to checkout" }) }));
+};
+var localizedFormat$2 = {exports: {}};
+var localizedFormat$1 = localizedFormat$2.exports;
+var hasRequiredLocalizedFormat;
+function requireLocalizedFormat () {
+	if (hasRequiredLocalizedFormat) return localizedFormat$2.exports;
+	hasRequiredLocalizedFormat = 1;
+	(function (module, exports) {
+		!function(e,t){module.exports=t();}(localizedFormat$1,(function(){var e={LTS:"h:mm:ss A",LT:"h:mm A",L:"MM/DD/YYYY",LL:"MMMM D, YYYY",LLL:"MMMM D, YYYY h:mm A",LLLL:"dddd, MMMM D, YYYY h:mm A"};return function(t,o,n){var r=o.prototype,i=r.format;n.en.formats=e,r.format=function(t){void 0===t&&(t="YYYY-MM-DDTHH:mm:ssZ");var o=this.$locale().formats,n=function(t,o){return t.replace(/(\[[^\]]+])|(LTS?|l{1,4}|L{1,4})/g,(function(t,n,r){var i=r&&r.toUpperCase();return n||o[r]||e[r]||o[i].replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g,(function(e,t,o){return t||o.slice(1)}))}))}(t,void 0===o?{}:o);return i.call(this,n)};}}));
+	} (localizedFormat$2));
+	return localizedFormat$2.exports;
+}
+var localizedFormatExports = requireLocalizedFormat();
+var localizedFormat = /*@__PURE__*/getDefaultExportFromCjs(localizedFormatExports);
+dayjs.extend(localizedFormat);
+const formatCurrency = (value, currencyIsoCode, decimals = 2) => {
+    if (value !== 0 && !value)
+        return '';
+    const currencyValue = typeof value === 'string' ? parseFloat(value) : value;
+    if (isNaN(currencyValue))
+        return value;
+    const localeOptions = {
+        minimumFractionDigits: decimals,
+        maximumFractionDigits: decimals,
+    };
+    localeOptions.style = 'currency';
+    localeOptions.currency = currencyIsoCode;
+    return currencyValue.toLocaleString(navigator.language, localeOptions);
+};
+const CheckoutPrice_QuoteFragment = t(`
+    fragment CheckoutPrice_QuoteFragment on Quote {
+      periodAmount
+      amountDue
+    }
+  `);
+const CheckoutPrice = ({ isUsage, quote: maskedQuote, selectedPriceList, }) => {
+    var _a;
+    // Read fragments
+    const quote = readFragment(CheckoutPrice_QuoteFragment, maskedQuote);
+    // Hooks
+    const isMobile = useIsMobile$1();
+    // amountDue might not be available, so we use periodAmount as a fallback
+    const displayAmount = (_a = quote === null || quote === void 0 ? void 0 : quote.amountDue) !== null && _a !== void 0 ? _a : quote === null || quote === void 0 ? void 0 : quote.periodAmount;
+    if (!isUsage && (!selectedPriceList || displayAmount === undefined))
+        return null;
+    const convertedPeriodMonths = periodMonthsConverter(selectedPriceList.periodMonths);
+    const periodLabel = convertedPeriodMonths ? PERIOD_LABELS[convertedPeriodMonths] : 'undefined';
+    return (jsx("div", { className: `bunny-font-medium ${isMobile ? 'bunny-text-2xl' : ''}`, children: isUsage
+            ? 'Usage based pricing'
+            : selectedPriceList && displayAmount !== undefined
+                ? `${formatCurrency(displayAmount, selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.currencyId, undefined)} / ${periodLabel}`
+                : '' }));
+};
+const { Text: Text$p } = Typography;
+const CheckoutBarSummarySection_QuoteFragment = t(`
+    fragment CheckoutBarSummarySection_QuoteFragment on Quote {
+      quoteChanges {
+        charges {
+          id
+        }
+      }
+      ...CheckoutPrice_QuoteFragment
+    }
+  `, [CheckoutPrice_QuoteFragment]);
+const CheckoutBarSummarySection = ({ selectedPriceList, onClickCheckout, }) => {
+    var _a, _b;
+    // Context
+    const { quote: maskedQuote, isQuotePending, isUpdatingQuote } = useContext(QuoteContext);
+    const quote = readFragment(CheckoutBarSummarySection_QuoteFragment, maskedQuote);
+    const { isInPreviewMode } = useContext(SubscriptionsContext);
+    // Hooks
+    const { paymentPlugins } = usePaymentPlugins(undefined);
+    const isMobile = useIsMobile$1();
+    const hasPaymentPlugins = Boolean(paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.length);
+    const quoteHasCharges = Boolean((_a = quote === null || quote === void 0 ? void 0 : quote.quoteChanges) === null || _a === void 0 ? void 0 : _a.some(qc => qc.charges.length > 0));
+    const checkoutButtonDisabled = Boolean(!selectedPriceList || !quoteHasCharges || !hasPaymentPlugins || isInPreviewMode);
+    const activeCharge = (_b = getActivePlanPriceData(selectedPriceList, selectedPriceList)) === null || _b === void 0 ? void 0 : _b.activeCharge;
+    const isUsage = (activeCharge === null || activeCharge === void 0 ? void 0 : activeCharge.chargeType) === ChargeType.USAGE;
+    return (jsxs(Text$p, { className: `bunny-flex bunny-items-center bunny-gap-4 ${isMobile ? 'bunny-flex-col' : ''}`, children: [quote && (jsxs("div", { className: `bunny-flex ${isMobile ? 'items-center justify-between w-full' : 'flex-col'}`, children: [jsx("div", { className: "bunny-text-slate-500 bunny-font-medium bunny-text-right", style: { fontSize: '11px' }, children: "TOTAL" }), jsx(CheckoutPrice, { isUsage: isUsage, quote: quote, selectedPriceList: selectedPriceList })] })), jsx(CheckoutButton, { disabled: checkoutButtonDisabled, onClickCheckout: onClickCheckout, loading: isQuotePending || isUpdatingQuote, tooltipText: isInPreviewMode
+                    ? 'Checkout is disabled in preview mode'
+                    : !hasPaymentPlugins
+                        ? 'Cannot checkout. No valid payment plugins found. Please contact your administrator.'
+                        : undefined })] }));
+};
+const MUTATION$3 = `{
+  currentUser {
+    taxationRequiredAccountFields
+  }
+}`;
+const getTaxationRequiredAccountFields = async ({ apiHost, token, }) => {
+    var _a, _b;
+    const response = await gqlRequest({
+        query: MUTATION$3,
+        token,
+        apiHost: apiHost,
+    });
+    return ((_b = (_a = response === null || response === void 0 ? void 0 : response.currentUser) === null || _a === void 0 ? void 0 : _a.taxationRequiredAccountFields) === null || _b === void 0 ? void 0 : _b.length) > 0
+        ? response.currentUser.taxationRequiredAccountFields
+        : null;
+};
+const BunnyFooterIcon = ({ color }) => {
+    return (jsxs("svg", { width: "45", height: "15", viewBox: "0 0 39 13", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxs("g", { 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", { id: "clip0_6_851", children: jsx("rect", { width: "39", height: "13", fill: "white" }) }) })] }));
+};
+const { Text: Text$o } = Typography;
+const Footer = ({ className }) => {
+    const token = useToken();
+    const { currentUser } = useCurrentUserData(token);
+    const { privacyUrl, termsUrl } = currentUser;
+    const isMobile = useIsMobile$1();
+    return (jsxs("div", { className: `bunny-flex bunny-items-center bunny-justify-between bunny-shrink-0 ${isMobile ? 'bunny-flex-col bunny-gap-2' : ''} ${className}`, children: [(termsUrl || privacyUrl) && (jsxs("div", { className: "bunny-flex bunny-items-center bunny-gap-3", children: [termsUrl && (jsx(StyedLink, { className: "bunny-text-xs bunny-text-slate-400", href: termsUrl, rel: "noopener noreferrer", target: "_blank", type: "text", children: "Terms" })), privacyUrl && (jsx(StyedLink, { className: "bunny-text-xs bunny-text-slate-400", href: privacyUrl, rel: "noopener noreferrer", target: "_blank", type: "text", children: "Privacy" }))] })), jsx(BunnyMarketingLink, {})] }));
+};
+const BunnyMarketingLink = () => {
+    const [isHovered, setIsHovered] = useState(false);
+    const isMobile = useIsMobile$1();
+    return (jsx("div", { className: `bunny-flex bunny-items-end bunny-justify-end ${isMobile ? '' : 'grow'}`, children: jsx(StyledBunnyLink, { className: "bunny-flex bunny-items-end bunny-justify-end bunny-text-slate-400", href: "https://bunny.com/", rel: "noopener noreferrer", target: "_blank", children: jsxs("div", { className: "bunny-flex bunny-items-center", onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [jsx(Text$o, { className: "bunny-text-slate-400", children: "Powered by\u00A0" }), jsx("div", { style: { paddingTop: '5px' }, children: jsx(BunnyFooterIcon, { color: isHovered ? PRIMARY_COLOR : SLATE_400 }) })] }) }) }));
+};
+const StyedLink = styled.a `
+  color: ${SLATE_400};
+  transition: color 0.3s;
+  &:hover {
+    color: ${SLATE_500};
+  }
+  text-decoration: none;
+`;
+const StyledBunnyLink = styled(StyedLink) `
+  &:hover {
+    color: ${PRIMARY_COLOR} !important;
+  }
+`;
+const MUTATION$2 = `mutation quoteChangeAddCoupon($couponCode: String!, $quoteChangeId: ID!) {
+    quoteChangeAddCoupon(couponCode: $couponCode, quoteChangeId: $quoteChangeId) {
+      quoteChange {
+        id
+        charges {
+          id
+          amount
+          couponId
+        }
+      }
+    }
+}`;
+const quoteChangeAddCoupon = async ({ quoteChangeId, couponCode, token, apiHost, }) => {
+    var _a;
+    const vars = { couponCode, quoteChangeId };
+    const response = await gqlRequest({
+        query: MUTATION$2,
+        token,
+        vars,
+        apiHost,
+    });
+    const errors = (_a = response === null || response === void 0 ? void 0 : response.quoteAddCoupon) === null || _a === void 0 ? void 0 : _a.errors;
+    if (errors)
+        throw errors;
+    return response.quote;
+};
+const MUTATION$1 = `mutation quoteChangeRemoveCoupon($quoteChangeId: ID!, $couponCode: String!) {
+    quoteChangeRemoveCoupon(quoteChangeId: $quoteChangeId, couponCode: $couponCode) {
+        errors
+    }
+}
+`;
+const quoteChangeRemoveCoupon = async ({ quoteChangeId, couponCode, token, apiHost, }) => {
+    var _a;
+    const vars = { couponCode, quoteChangeId };
+    const response = await gqlRequest({
+        query: MUTATION$1,
+        token,
+        vars,
+        apiHost,
+    });
+    const errors = (_a = response === null || response === void 0 ? void 0 : response.quoteChangeRemoveCoupon) === null || _a === void 0 ? void 0 : _a.errors;
+    if (errors)
+        throw errors;
+    return response.quote;
+};
+const COUPONS_QUERY = (filter) => `
+    query Coupons {
+        coupons(filter: ${filter ? `"${filter}"` : 'null'}) {
+            totalCount
+        }
+    }
+`;
+const getCoupons = async ({ token, apiHost, filter, }) => {
     const response = await gqlRequest({
         query: COUPONS_QUERY(filter),
         token,
@@ -21838,7 +22101,7 @@ const getCoupons = async ({ token, apiHost, filter, }) => {
     return response === null || response === void 0 ? void 0 : response.coupons;
 };
-const showErrorNotification$3 = useErrorNotification();
+const showErrorNotification$2 = useErrorNotification();
 const useUpdateCoupons = ({ apiHost, token, quoteChangeId, onCouponAdded, onCouponRemoved, }) => {
     const { data: coupons } = useQuery({
         queryKey: ['coupons', token],
@@ -21864,7 +22127,7 @@ const useUpdateCoupons = ({ apiHost, token, quoteChangeId, onCouponAdded, onCoup
         },
         onError: (error) => {
             var _a, _b;
-            showErrorNotification$3((_b = (_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.errors[0]) === null || _b === void 0 ? void 0 : _b.message, 'Error adding coupon');
+            showErrorNotification$2((_b = (_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.errors[0]) === null || _b === void 0 ? void 0 : _b.message, 'Error adding coupon');
         },
     });
     const { mutate: removeCoupon, isPending: isRemovingCoupon } = useMutation({
@@ -21884,7 +22147,7 @@ const useUpdateCoupons = ({ apiHost, token, quoteChangeId, onCouponAdded, onCoup
         },
         onError: (error) => {
             var _a, _b;
-            showErrorNotification$3((_b = (_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.errors[0]) === null || _b === void 0 ? void 0 : _b.message, 'Error removing coupon');
+            showErrorNotification$2((_b = (_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.errors[0]) === null || _b === void 0 ? void 0 : _b.message, 'Error removing coupon');
         },
     });
     return {
@@ -21984,7 +22247,7 @@ const QuoteFields_QuoteFragment = t(`
     }
   `);
-const MUTATION$1 = `
+const MUTATION = `
 mutation accountUpdate(
     $id: ID!,
     $attributes: AccountAttributes!) {
@@ -22005,11 +22268,11 @@ mutation accountUpdate(
       }
   }
 `;
-const accountUpdate = async ({ accountId, attributes, token, apiHost, }) => {
+const accountUpdate$1 = async ({ accountId, attributes, token, apiHost, }) => {
     var _a;
     const vars = { id: accountId, attributes };
     const response = await gqlRequest({
-        query: MUTATION$1,
+        query: MUTATION,
         token,
         vars,
         apiHost,
@@ -22030,7 +22293,7 @@ const TaxationForm = ({ account, accountId }) => {
     // Mutations
     const { mutate: updateAccount, isPending: isUpdatingAccount } = useMutation({
         mutationFn: async (changedFormData) => {
-            const account = await accountUpdate({
+            const account = await accountUpdate$1({
                 accountId,
                 attributes: changedFormData,
                 token,
@@ -22056,6 +22319,7 @@ const FormBillingState = () => {
     return (jsx(Form.Item, { label: "Billing state", name: "billingState", rules: [{ required: billingStateRequired }], children: jsx(Input, { placeholder: "State" }) }));
 };
+const { Text: Text$n } = Typography;
 // HACK: I have imported QuoteFields_QuoteFragment here as a hack to ensure I have all of the quote data needed for
 // the eventual children of this component.
 // Solution: Eventually all children of this component should be using query fragments to avoid this
@@ -22141,7 +22405,7 @@ const QuoteCheckout = ({ account, onSuccess, onFail, quote: maskedQuote, taxatio
     }
     if (taxationRequiredAccountFields)
         return (jsx(PaymentFormWrapper, { setMaxHeight: false, children: jsx(TaxationForm, { account: account, accountId: quote.accountId }) }));
-    return (jsx(Fragment, { children: paymentRequired ? (jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-w-full", children: [jsx(PaymentForm, { onPaymentSuccess: onSuccess, quote: quote }), (couponsOnQuote === null || couponsOnQuote === void 0 ? void 0 : couponsOnQuote.length) === 0 ? (jsx(Fragment, { children: upgradingSubscription &&
+    return (jsx(PaymentFormWrapper, { setMaxHeight: false, children: paymentRequired ? (jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-w-full", children: [jsx(PaymentForm, { onPaymentSuccess: onSuccess, quote: quote }), (couponsOnQuote === null || couponsOnQuote === void 0 ? void 0 : couponsOnQuote.length) === 0 ? (jsx(Fragment, { children: upgradingSubscription &&
                         shouldShowCouponEditor(quote, activeCouponsExist, upgradingSubscription) && (jsx(CouponEditor, { className: "bunny-px-4 bunny-pt-1", quote: quote, onAddCoupon: addCoupon, isAddingCoupon: isAddingCoupon, couponCode: couponCode, setCouponCode: setCouponCode })) })) : (jsx(Button, { type: "link", loading: isRemovingCoupon, onClick: () => {
                         couponsOnQuote === null || couponsOnQuote === void 0 ? void 0 : couponsOnQuote.forEach(couponCharge => {
                             var _a;
@@ -22150,7 +22414,7 @@ const QuoteCheckout = ({ account, onSuccess, onFail, quote: maskedQuote, taxatio
                                 removeCoupon(couponCode);
                             }
                         });
-                    }, children: "Remove coupon(s)" }))] })) : (jsx(PaymentFormWrapper, { setMaxHeight: false, children: jsxs("div", { className: `bunny-flex bunny-flex-col bunny-gap-2 bunny-px-4 ${isMobile ? 'bunny-shadow-padding-x' : ''}`, children: [jsx(Button, { onClick: handleCheckoutNoPayment, type: "primary", children: isSaving ? 'Processing...' : 'Complete order' }), jsx("div", { className: "bunny-text-xs bunny-text-slate-500", children: "No payment is required" })] }) })) }));
+                    }, children: "Remove coupon(s)" }))] })) : (jsxs("div", { className: `bunny-flex bunny-flex-col bunny-gap-2 bunny-px-4 ${isMobile ? 'bunny-shadow-padding-x' : ''}`, children: [jsx(Button, { onClick: handleCheckoutNoPayment, type: "primary", children: isSaving ? 'Processing...' : 'Complete order' }), jsx(Text$n, { className: "bunny-text-xs bunny-text-slate-500", children: "No payment is required" })] })) }));
 };
 const PaymentFormWrapper = ({ children, setMaxHeight, className, }) => {
     const isMobile = useIsMobile$1();
@@ -22161,7 +22425,7 @@ const PaymentFormWrapper = ({ children, setMaxHeight, className, }) => {
                     : {}
                 : {
                     width: '100%',
-                    maxWidth: '350px',
+                    maxWidth: '400px',
                 }),
         }, children: children }));
 };
@@ -22177,7 +22441,7 @@ const Checkout_QuoteFragment = t(`
       ...QuoteCheckout_QuoteFragment
     }
   `, [QuoteCheckout_QuoteFragment]);
-const Checkout = ({ onCancel, onSuccess, onFail, invoice, open, quote: maskedQuote, isUpdatingQuote, }) => {
+const Checkout = ({ onCancel, onSuccess, onFail, onRecalculateTaxes, invoice, open, quote: maskedQuote, isUpdatingQuote, }) => {
     var _a, _b, _c, _d, _e;
     const { apiHost } = useContext(BunnyContext);
     const isMobile = useIsMobile$1();
@@ -22188,7 +22452,6 @@ const Checkout = ({ onCancel, onSuccess, onFail, invoice, open, quote: maskedQuo
         apiHost,
         token,
     });
-    const queryClient = useQueryClient();
     // Queries
     const { data: taxationRequiredAccountFields, isLoading: isLoadingTaxationRequiredAccountFields } = useQuery({
         queryKey: ['getTaxationRequiredAccountFields', token],
@@ -22199,26 +22462,15 @@ const Checkout = ({ onCancel, onSuccess, onFail, invoice, open, quote: maskedQuo
     const { data: account, isLoading: isLoadingAccount } = useQuery({
         queryKey: ['account', quote === null || quote === void 0 ? void 0 : quote.accountId],
         queryFn: () => (quote === null || quote === void 0 ? void 0 : quote.accountId) &&
-            getAccount({ id: quote.accountId, apiHost, token, componentsVersion: PACKAGE_VERSION }),
+            getAccount$1({ id: quote.accountId, apiHost, token, componentsVersion: PACKAGE_VERSION }),
         enabled: Boolean(quote === null || quote === void 0 ? void 0 : quote.accountId) && ((taxationRequiredAccountFields === null || taxationRequiredAccountFields === void 0 ? void 0 : taxationRequiredAccountFields.length) || 0) > 0,
     });
+    // Use onRecalculateTaxes callback because parents need to define recalculateTaxes to get and set the right quote data they need
     async function recalculateTaxes() {
         if (quote) {
             if (!quote.id)
                 throw new Error('Quote ID is required');
-            const updatedQuote = await quoteRecalculateTaxes({
-                quoteId: quote.id,
-                apiHost,
-                token,
-            });
-            if (updatedQuote) {
-                const quoteKey = queryKeyFactory.createObjectKey({
-                    id: updatedQuote.id,
-                    objectName: 'editingQuote',
-                    token,
-                });
-                queryClient.setQueryData(quoteKey, updatedQuote);
-            }
+            onRecalculateTaxes(quote.id);
         }
         return {};
     }
@@ -22252,9 +22504,17 @@ const Checkout = ({ onCancel, onSuccess, onFail, invoice, open, quote: maskedQuo
                             } })) : (jsx(PaymentForm, { onPaymentSuccess: onSuccess }))] }), jsx(Footer, { className: "bunny-px-12" })] }) }));
 };
-const QuoteContext = createContext({});
+function canEditChargeQuantity(charge) {
+    if (!charge)
+        return false;
+    if (charge.chargeType === graphql.scalar('ChargeType', 'USAGE'))
+        return false;
+    if (charge.pricingModel === graphql.scalar('PricingModel', 'FLAT'))
+        return false;
+    return true;
+}
-const { Text: Text$n } = Typography;
+const { Text: Text$m } = Typography;
 const CheckoutBarInput = ({ disabled, priceListCharge, quantity, onQuantityChanged, }) => {
     var _a;
     const [isTooltipOpen, setIsTooltipOpen] = useState(false);
@@ -22267,7 +22527,7 @@ const CheckoutBarInput = ({ disabled, priceListCharge, quantity, onQuantityChang
             setIsTooltipOpen(false);
         }, 6000);
     }, []);
-    return (jsxs(Text$n, { className: `bunny-flex bunny-items-center bunny-gap-2 ${isMobile ? 'bunny-justify-between' : ''}`, children: [jsx(QuantityLabel, { activeCharge: priceListCharge }), jsx(Tooltip, { onOpenChange: setIsTooltipOpen, open: isTooltipOpen, title: "Change quantity here", styles: {
+    return (jsxs(Text$m, { className: `bunny-flex bunny-items-center bunny-gap-2 ${isMobile ? 'bunny-justify-between' : ''}`, children: [jsx(QuantityLabel, { activeCharge: priceListCharge }), jsx(Tooltip, { onOpenChange: setIsTooltipOpen, open: isTooltipOpen, title: "Change quantity here", styles: {
                     body: {
                         paddingTop: '0.75rem',
                         paddingBottom: '0.75rem',
@@ -22278,222 +22538,7 @@ const CheckoutBarInput = ({ disabled, priceListCharge, quantity, onQuantityChang
 };
 const QuantityLabel = ({ activeCharge }) => {
     const chargeName = activeCharge.name;
-    return (jsx(Text$n, { className: "bunny-text-slate-500 bunny-font-medium bunny-text-nowrap", style: { fontSize: '11px' }, children: chargeName.toUpperCase() }));
-};
-const periodMonthsConverter = (period) => {
-    if (period === 0)
-        return graphql.scalar('BillingPeriod', 'ONCE');
-    else if (period === 1)
-        return graphql.scalar('BillingPeriod', 'MONTHLY');
-    else if (period === 3)
-        return graphql.scalar('BillingPeriod', 'QUARTERLY');
-    else if (period === 6)
-        return graphql.scalar('BillingPeriod', 'SEMI_ANNUAL');
-    else if (period === 12)
-        return graphql.scalar('BillingPeriod', 'ANNUAL');
-    else
-        return null;
-};
-const billingPeriodConverter = (period) => {
-    if (period === graphql.scalar('BillingPeriod', 'ONCE'))
-        return 0;
-    else if (period === graphql.scalar('BillingPeriod', 'MONTHLY'))
-        return 1;
-    else if (period === graphql.scalar('BillingPeriod', 'QUARTERLY'))
-        return 3;
-    else if (period === graphql.scalar('BillingPeriod', 'SEMI_ANNUAL'))
-        return 6;
-    else
-        return 12;
-};
-function getAddonsForBillingPeriod(billingPeriod, addonPlans) {
-    const flattenedPriceLists = addonPlans.flatMap(addonPlan => addonPlan.priceLists);
-    return flattenedPriceLists.filter(priceList => priceList.periodMonths === billingPeriodConverter(billingPeriod));
-}
-const hasUnpurchasedAddonPriceLists_PlanFragment = t(`
-    fragment hasUnpurchasedAddonPriceLists_PlanFragment on Plan {
-      priceLists {
-        id
-        isVisible
-        periodMonths
-      }
-    }
-  `);
-function hasUnpurchasedAddonPriceLists(maskedPriceListAddonPlans, currentSubscription, billingPeriod) {
-    // Read fragments
-    const priceListAddonPlans = maskedPriceListAddonPlans.map(maskedAddonPlan => readFragment(hasUnpurchasedAddonPriceLists_PlanFragment, maskedAddonPlan));
-    const addonPriceLists = getAddonsForBillingPeriod(billingPeriod, priceListAddonPlans).filter(priceList => priceList.isVisible);
-    const unpurchasedAddonPriceLists = addonPriceLists === null || addonPriceLists === void 0 ? void 0 : addonPriceLists.filter(addonPriceList => {
-        var _a;
-        return !((_a = currentSubscription === null || currentSubscription === void 0 ? void 0 : currentSubscription.addonSubscriptions) === null || _a === void 0 ? void 0 : _a.some(addonSubscription => addonSubscription.priceList.id === addonPriceList.id));
-    });
-    return unpurchasedAddonPriceLists.length > 0;
-}
-const canSubscriptionUpgradeFromTrial = (subscription) => {
-    var _a;
-    return (((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === t.scalar('SubscriptionState', 'TRIAL') &&
-        subscription.plan.selfServiceBuy) ||
-        false;
-};
-const canSubscriptionUpgradeFromTrialExpired = (subscription) => {
-    var _a;
-    return (((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === t.scalar('SubscriptionState', 'TRIAL_EXPIRED') &&
-        subscription.plan.selfServiceBuy) ||
-        false;
-};
-const isSubscriptionNotActive = (subscription) => {
-    var _a, _b, _c;
-    return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === t.scalar('SubscriptionState', 'EXPIRED') ||
-        ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === t.scalar('SubscriptionState', 'CANCELED') ||
-        ((_c = subscription.state) === null || _c === void 0 ? void 0 : _c.toUpperCase()) === t.scalar('SubscriptionState', 'TRIAL_EXPIRED');
-};
-const isSubscriptionActiveOrPending = (subscription) => {
-    var _a, _b;
-    return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === t.scalar('SubscriptionState', 'ACTIVE') ||
-        ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === t.scalar('SubscriptionState', 'PENDING');
-};
-const isSubscriptionTrial = (subscription) => { var _a; return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === t.scalar('SubscriptionState', 'TRIAL'); };
-const isSubscriptionTrialExpired = (subscription) => { var _a; return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === t.scalar('SubscriptionState', 'TRIAL_EXPIRED'); };
-// Helper function to check if charge is a discount
-const isDiscount$1 = (kind) => kind === QuoteChangeKind.DISCOUNT || kind === QuoteChangeKind.FREE_PERIOD_DISCOUNT;
-const hasPriceTiers = (charge) => {
-    var _a;
-    return Boolean((_a = charge === null || charge === void 0 ? void 0 : charge.priceTiers) === null || _a === void 0 ? void 0 : _a.length);
-};
-const removeHTMLTagsRegex = /<br>(?=(?:\s*<[^>]*>)*$)|(<br>)|<[^>]*>/gi;
-// Description is a string that can contain HTML tags. We want to remove all HTML tags except <br> tags.
-const createPlanDescription = (planDescription) => {
-    return (planDescription || '').replace(removeHTMLTagsRegex, (_, y) => (y ? ' & ' : ''));
-};
-const getActivePlanPriceData = (priceList, selectedPriceList) => {
-    if (!priceList) {
-        return;
-    }
-    // If a period option is selected, return the charge that matches the selected period option
-    let activeBillingPLCharge;
-    // Default to first price list charge
-    let lowestPLCharge;
-    // Find the lowest price list charge with a billing period that matches the selected period option
-    if (priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id)) {
-        activeBillingPLCharge = priceList.charges[0];
-    }
-    for (let j = 0; j < priceList.charges.length; j++) {
-        const charge = priceList.charges[j];
-        if (charge.chargeType === ChargeType.USAGE || charge.featureAddon === true)
-            continue;
-        if (activeBillingPLCharge) {
-            // If we already found a charge with the same billing period check if this charge is lower
-            if (charge.basePrice < activeBillingPLCharge.basePrice &&
-                charge.billingPeriod === (activeBillingPLCharge === null || activeBillingPLCharge === void 0 ? void 0 : activeBillingPLCharge.billingPeriod)) {
-                activeBillingPLCharge = charge;
-            }
-        }
-        // If a period option is selected, only return the charge if it matches the selected period option
-        else if (selectedPriceList &&
-            charge.billingPeriod === periodMonthsConverter(selectedPriceList.periodMonths)) {
-            activeBillingPLCharge = charge;
-        }
-        // Otherwise, return the lowest price list charge
-        else if (charge.basePrice < ((lowestPLCharge === null || lowestPLCharge === void 0 ? void 0 : lowestPLCharge.basePrice) || -1)) {
-            lowestPLCharge = charge;
-        }
-    }
-    return {
-        activeCharge: activeBillingPLCharge || lowestPLCharge,
-    };
-};
-const showErrorNotification$2 = useErrorNotification();
-const isPriceListDisabled = ({ priceList, upgradingSubscription, }) => {
-    const priceListAddonPlans = priceList === null || priceList === void 0 ? void 0 : priceList.plan.addonPlans;
-    if (!priceListAddonPlans) {
-        showErrorNotification$2('Price list addon plans are undefined');
-        return false;
-    }
-    const canPurchaseFeatureAddons = hasUnpurchasedFeatureAddons(priceList, upgradingSubscription);
-    const canPurchasePlanAddons = hasUnpurchasedAddonPriceLists(priceListAddonPlans, upgradingSubscription, periodMonthsConverter(priceList.periodMonths));
-    const existingSubscriptionInTrial = upgradingSubscription && canSubscriptionUpgradeFromTrial(upgradingSubscription);
-    const existingSubscriptionInTrialExpired = upgradingSubscription && canSubscriptionUpgradeFromTrialExpired(upgradingSubscription);
-    const isUpgradingSubscriptionPriceList = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === priceList.id;
-    // When should priceList be disabled?
-    // if upgradingSubscription?.priceList.id === priceList.id
-    //     AND the upgradingSubscription is not in trial
-    //     AND cannot purchase feature addons
-    //     AND cannot purchase add-on plans
-    //     AND selfServiceBuy is false
-    // if upgradingSubscription?.priceList.id != priceList.id
-    //     AND upgradingSubscription is expired trial
-    if (isUpgradingSubscriptionPriceList) {
-        return (!existingSubscriptionInTrial &&
-            !existingSubscriptionInTrialExpired &&
-            !canPurchaseFeatureAddons &&
-            !canPurchasePlanAddons);
-    }
-    else {
-        return false;
-    }
-};
-const CheckoutButton = ({ checkoutButtonDisabled, onClickCheckout, loading, tooltipText, }) => {
-    const isMobile = useIsMobile$1();
-    const TooltipWrapper = ({ children }) => {
-        if (tooltipText) {
-            return jsx(Tooltip, { title: tooltipText, children: children });
-        }
-        return jsx("div", { children: children });
-    };
-    return (jsx(TooltipWrapper, { children: jsx(Button, { className: isMobile ? 'w-full' : '', disabled: checkoutButtonDisabled, onClick: onClickCheckout, size: isMobile ? 'large' : 'middle', type: "primary", loading: loading, children: "Proceed to checkout" }) }));
-};
-const CheckoutPrice = ({ isUsage, quote, selectedPriceList, }) => {
-    const isMobile = useIsMobile$1();
-    if (!isUsage && (!selectedPriceList || (quote === null || quote === void 0 ? void 0 : quote.periodAmount) === undefined))
-        return null;
-    const convertedPeriodMonths = periodMonthsConverter(selectedPriceList.periodMonths);
-    const periodLabel = convertedPeriodMonths ? PERIOD_LABELS[convertedPeriodMonths] : 'undefined';
-    return (jsx("div", { className: `bunny-font-medium ${isMobile ? 'bunny-text-2xl' : ''}`, children: isUsage
-            ? 'Usage based pricing'
-            : selectedPriceList && (quote === null || quote === void 0 ? void 0 : quote.periodAmount) !== undefined
-                ? `${formatCurrency$1(quote.periodAmount, selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.currencyId, 0)} / ${periodLabel}`
-                : '' }));
-};
-const { Text: Text$m } = Typography;
-const CheckoutBarSummarySection = ({ open, selectedPriceList, onClickCheckout, }) => {
-    var _a;
-    // Context
-    const { quote: quoteData, isQuotePending, isUpdatingQuote } = useContext(QuoteContext);
-    const quote = quoteData;
-    const { upgradingSubscription, isInPreviewMode } = useContext(SubscriptionsContext);
-    // Hooks
-    const token = useToken();
-    const { paymentPlugins } = usePaymentPlugins(undefined);
-    const queryClient = useQueryClient();
-    const isMobile = useIsMobile$1();
-    // Derived state
-    const isFetching = queryClient.isFetching({
-        queryKey: QueryKeyFactory$1.default.planChangeOptionsKey({
-            subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
-            token,
-        }),
-    });
-    // When should checkout button be disabled?
-    const isUpdatingCharges = (quote === null || quote === void 0 ? void 0 : quote.quoteChanges.some(qc => qc.kind === 'UPDATE' && qc.charges.length > 0)) || false;
-    const isUpgradingSubscription = selectedPriceList.id !== (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id);
-    const disableCheckoutButton = Boolean(!selectedPriceList || isFetching || !(isUpgradingSubscription || isUpdatingCharges) || open);
-    const checkoutButtonDisabled = (quote === null || quote === void 0 ? void 0 : quote.amountDue) && (quote === null || quote === void 0 ? void 0 : quote.amountDue) > 0 ? false : disableCheckoutButton;
-    const activeCharge = (_a = getActivePlanPriceData(selectedPriceList, selectedPriceList)) === null || _a === void 0 ? void 0 : _a.activeCharge;
-    const isUsage = (activeCharge === null || activeCharge === void 0 ? void 0 : activeCharge.chargeType) === ChargeType.USAGE;
-    const hasPaymentPlugins = Boolean(paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.length);
-    return (jsxs(Text$m, { className: `bunny-flex bunny-items-center bunny-gap-4 ${isMobile ? 'bunny-flex-col' : ''}`, children: [quote && (jsxs("div", { className: `bunny-flex ${isMobile ? 'items-center justify-between w-full' : 'flex-col'}`, children: [jsx("div", { className: "bunny-text-slate-500 bunny-font-medium bunny-text-right", style: { fontSize: '11px' }, children: "TOTAL" }), jsx(CheckoutPrice, { isUsage: isUsage, quote: quote, selectedPriceList: selectedPriceList })] })), jsx(CheckoutButton, { checkoutButtonDisabled: checkoutButtonDisabled || !hasPaymentPlugins || isInPreviewMode, onClickCheckout: onClickCheckout, loading: isQuotePending || isUpdatingQuote, tooltipText: isInPreviewMode
-                    ? 'Checkout is disabled in preview mode'
-                    : !hasPaymentPlugins
-                        ? 'Cannot checkout. No valid payment plugins found. Please contact your administrator.'
-                        : undefined })] }));
+    return (jsx(Text$m, { className: "bunny-text-slate-500 bunny-font-medium bunny-text-nowrap", style: { fontSize: '11px' }, children: chargeName.toUpperCase() }));
 };
 const PlanPickerCheckoutBar_QuoteFragment = t(`
@@ -22513,8 +22558,8 @@ const PlanPickerCheckoutBar_QuoteFragment = t(`
   `, [Checkout_QuoteFragment]);
 const PlanPickerCheckoutBar = ({ selectedPriceList, handlePortalErrors, onCheckoutSuccess, }) => {
     // Context
-    const { shadow, upgradingSubscription } = useContext(SubscriptionsContext);
-    const { quote: maskedQuote, onChangeQuantity, getFeatureQuantity, isFeatureAddonsLoading, isUpdatingQuote, } = useContext(QuoteContext);
+    const { shadow } = useContext(SubscriptionsContext);
+    const { quote: maskedQuote, onChangeQuantity, getFeatureQuantity, onRecalculateTaxes, isFeatureAddonsLoading, isUpdatingQuote, } = useContext(QuoteContext);
     // Read fragments
     const quote = readFragment(PlanPickerCheckoutBar_QuoteFragment, maskedQuote);
     // Local state
@@ -22562,9 +22607,6 @@ const PlanPickerCheckoutBar = ({ selectedPriceList, handlePortalErrors, onChecko
                     const isFeatureAddon = charge.featureAddon;
                     const quantity = getFeatureQuantity((_d = charge.feature) === null || _d === void 0 ? void 0 : _d.id, charge.id);
                     const maybeIsChargeLoading = isFeatureAddon && isFeatureAddonsLoading;
-                    const showInput = selectedPriceList.id !== (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id);
-                    if (!isFeatureAddon && !showInput)
-                        return null;
                     if (!quantity)
                         return null;
                     // if charge is a feature addon, and a corresponding quote charge is not found in quote, return null
@@ -22575,9 +22617,40 @@ const PlanPickerCheckoutBar = ({ selectedPriceList, handlePortalErrors, onChecko
                     return (jsx(CheckoutBarInput, { disabled: isDisabled, priceListCharge: charge, quantity: quantity, onQuantityChanged: quantity => {
                             onChangeQuantity(charge.id, quantity);
                         } }, index));
-                }) }), jsx(CheckoutBarSummarySection, { onClickCheckout: () => setPayModalVisible(true), open: payModalVisible, selectedPriceList: selectedPriceList }), jsx(Checkout, { onCancel: () => setPayModalVisible(false), onFail: error => handlePortalErrors === null || handlePortalErrors === void 0 ? void 0 : handlePortalErrors(error), onSuccess: handleCheckoutSuccess, open: payModalVisible, quote: quote, token: token, isUpdatingQuote: isUpdatingQuote })] }));
+                }) }), jsx(CheckoutBarSummarySection, { onClickCheckout: () => setPayModalVisible(true), selectedPriceList: selectedPriceList }), jsx(Checkout, { onCancel: () => setPayModalVisible(false), onFail: error => handlePortalErrors === null || handlePortalErrors === void 0 ? void 0 : handlePortalErrors(error), onSuccess: handleCheckoutSuccess, onRecalculateTaxes: onRecalculateTaxes, open: payModalVisible, quote: quote, token: token, isUpdatingQuote: isUpdatingQuote })] }));
 };
+const useQuoteUpdateFeatureAddon_QuoteFragment = t(`
+    fragment useQuoteUpdateFeatureAddon_QuoteFragment on Quote {
+      id
+      startDate
+    }
+  `);
+const FeatureAddonRow_QuoteFragment = t(`
+    fragment FeatureAddonRow_QuoteFragment on Quote {
+      ...useQuoteUpdateFeatureAddon_QuoteFragment
+    }
+  `, [useQuoteUpdateFeatureAddon_QuoteFragment]);
+const useToggleAddonPlan_QuoteFragment = t(`
+    fragment useToggleAddonPlan_QuoteFragment on Quote {
+      quoteChanges {
+        priceList {
+          id
+        }
+        id
+      }
+      id
+    }
+  `);
+const AddonPlanRow_QuoteFragment = t(`
+    fragment AddonPlanRow_QuoteFragment on Quote {
+      ...useToggleAddonPlan_QuoteFragment
+    }
+  `, [useToggleAddonPlan_QuoteFragment]);
 /**
  * Central quote fragment for QuoteProvider context.
  *
@@ -22595,6 +22668,7 @@ const QuoteContext_QuoteFragment = t(`
       id
       currencyId
       amountDue
+      startDate
       quoteChanges {
         id
         kind
@@ -22618,75 +22692,17 @@ const QuoteContext_QuoteFragment = t(`
         }
       }
       ...PlanPickerCheckoutBar_QuoteFragment
-    }
-  `, [QuoteFields_QuoteFragment, PlanPickerCheckoutBar_QuoteFragment]);
-// Deprecated: Keeping this for now because its used in many places
-const QUOTE_FIELDS = (removeFormattedQuoteField) => `
-  fragment QuoteFields on Quote {
-    accountId
-    amount
-    amountDue
-    smallUnitAmountDue
-    currencyId
-    ${removeFormattedQuoteField ? '' : `formattedQuote { html }`}
-    id
-    payableId
-    periodAmount
-    subtotal
-    taxAmount
-    startDate
-    amountsByPeriod {
-      amount
-      startDate
-    }
-    kind
-    quoteChanges {
-      currencyId
-      id
-      kind
-      charges {
-        subtotal
-        amountsByPeriod {
-          amount
-          startDate
-        }
-        amount
-        billingPeriod
-        currencyId
-        feature {
-          id
-          unitName
-        }
-        id
-        name
-        priceListCharge {
-          id
-          quantityMax
-          quantityMin
-          selfServiceQuantity
-        }
-        priceList {
-          id
-        }
-        coupon {
-          couponCode
-        }
-        quantity
-        kind
-      }
-      priceList {
-        id
-        plan {
-            name
-        }
-        product {
-            name
-        }
-      }
-    }
-  }
-`;
+      ...CheckoutBarSummarySection_QuoteFragment
+      ...AddonPlanRow_QuoteFragment
+      ...FeatureAddonRow_QuoteFragment
+    }
+  `, [
+    PlanPickerCheckoutBar_QuoteFragment,
+    CheckoutBarSummarySection_QuoteFragment,
+    AddonPlanRow_QuoteFragment,
+    FeatureAddonRow_QuoteFragment,
+]);
 const FormattedQuoteField_QuoteFragment = t(`
   fragment FormattedQuoteField_QuoteFragment on Quote {
     formattedQuote {
@@ -22694,7 +22710,7 @@ const FormattedQuoteField_QuoteFragment = t(`
     }
   }
 `);
-const query$3 = t(`
+const query$5 = t(`
     query quote($id: ID, $removeFormattedQuoteField: Boolean!) {
       quote(id: $id) {
         ...QuoteContext_QuoteFragment
@@ -22703,7 +22719,7 @@ const query$3 = t(`
     }
   `, [QuoteContext_QuoteFragment, FormattedQuoteField_QuoteFragment]);
 const getQuote$1 = async ({ id, token, apiHost, removeFormattedQuoteField = false, }) => {
-    const response = await execute(query$3, { apiHost, token }, { id, removeFormattedQuoteField });
+    const response = await execute(query$5, { apiHost, token }, { id, removeFormattedQuoteField });
     return response === null || response === void 0 ? void 0 : response.quote;
 };
@@ -22808,7 +22824,7 @@ function Signup({ companyName, priceListCode, returnUrl, couponCode, className,
     });
     const { mutate: recalculateTaxesMutation } = useMutation({
         mutationFn: (quoteId) => {
-            return quoteRecalculateTaxes({ token, apiHost, quoteId });
+            return quoteRecalculateTaxes$2({ token, apiHost, quoteId });
         },
         onError: (error) => {
             if (!error[0].message.includes('Ensure that you have a taxation plugin')) {
@@ -22989,7 +23005,7 @@ const useQuoteQueryData = (quoteId) => {
     return data;
 };
-const useSetQuoteQueryData = () => {
+const useSetQuoteQueryData$1 = () => {
     const token = useToken();
     const queryClient = useQueryClient();
     const setQuoteQueryData = (quoteId, quote) => {
@@ -23028,6 +23044,9 @@ const QuantityInput_QuoteFragment = t(`
     }
   `, []);
+const useQuoteIsLoadingState = (isLoading) => useState(isLoading !== null && isLoading !== void 0 ? isLoading : false);
+const [QuoteIsLoadingProvider, useQuoteIsLoading] = createStateContext(useQuoteIsLoadingState);
 const QuoteChangeSummarySection_QuoteFragment = t(`
     fragment QuoteChangeSummarySection_QuoteFragment on Quote {
       id
@@ -23039,10 +23058,11 @@ const QuoteChangeSummarySection_QuoteFragment = t(`
 const QuoteChangeSummarySection = ({ openCheckout, errorUpdatingQuantity, }) => {
     const isMobile = useIsMobile$1();
     const [quoteId] = useQuoteId();
+    const [isQuoteLoading] = useQuoteIsLoading();
     const maskedQuote = useQuoteQueryData(quoteId);
     const quote = readFragment(QuoteChangeSummarySection_QuoteFragment, maskedQuote);
-    const disabled = !quoteId || !quote || errorUpdatingQuantity;
-    return (jsxs("div", { className: "bunny-flex bunny-flex-col bunny-items-end", children: [quote && !disabled && (jsxs("div", { className: "bunny-flex bunny-flex-col bunny-mb-8", children: [jsx("div", { className: "bunny-text-slate-500 bunny-text-right bunny-text-xs bunny-mb-2", children: "TOTAL" }), jsx("div", { className: `bunny-text-right ${isMobile ? 'bunny-text-2xl' : 'bunny-text-xl'}`, children: formatCurrency$1(getQuoteAmountDue(quote), (quote === null || quote === void 0 ? void 0 : quote.currencyId) || '') })] })), jsx("div", { className: `bunny-flex bunny-items-center bunny-justify-end ${isMobile ? 'bunny-w-full' : ''}`, children: jsx(Button, { className: "bunny-w-full", onClick: openCheckout, disabled: disabled, size: isMobile ? 'large' : 'middle', type: "primary", children: "Proceed to checkout" }) })] }));
+    const disabled = !quoteId || !quote || errorUpdatingQuantity || isQuoteLoading;
+    return (jsxs("div", { className: "bunny-flex bunny-flex-col bunny-items-end", children: [quote && !disabled && (jsxs("div", { className: "bunny-flex bunny-flex-col bunny-mb-8", children: [jsx("div", { className: "bunny-text-slate-500 bunny-text-right bunny-text-xs bunny-mb-2", children: "TOTAL" }), jsx("div", { className: `bunny-text-right ${isMobile ? 'bunny-text-2xl' : 'bunny-text-xl'}`, children: formatCurrency$1(getQuoteAmountDue(quote), (quote === null || quote === void 0 ? void 0 : quote.currencyId) || '') })] })), jsx("div", { className: `bunny-flex bunny-items-center bunny-justify-end ${isMobile ? 'bunny-w-full' : ''}`, children: jsx(Button, { className: "bunny-w-full", onClick: openCheckout, disabled: disabled, size: isMobile ? 'large' : 'middle', type: "primary", loading: isQuoteLoading, children: "Proceed to checkout" }) })] }));
 };
 const QuantityDrawer_QuoteFragment = t(`
@@ -23054,7 +23074,7 @@ const QuantityDrawer_QuoteFragment = t(`
     }
   `, [Checkout_QuoteFragment, QuantityInput_QuoteFragment, QuoteChangeSummarySection_QuoteFragment]);
-const mutation$4 = t(`
+const mutation$c = t(`
     mutation QuoteChargeCreate(
       $quoteChangeId: ID!
       $startDate: ISO8601Date!
@@ -23089,11 +23109,11 @@ const mutation$4 = t(`
   `, [QuantityDrawer_QuoteFragment]);
 const quoteChargeCreate$1 = async ({ price, priceListChargeId, quantity, quoteChangeId, startDate, subscriptionChargeId, token, apiHost, }) => {
     var _a;
-    const response = await execute(mutation$4, { apiHost, token }, { price, priceListChargeId, quantity, quoteChangeId, startDate, subscriptionChargeId });
+    const response = await execute(mutation$c, { apiHost, token }, { price, priceListChargeId, quantity, quoteChangeId, startDate, subscriptionChargeId });
     return (_a = response.quoteChargeCreate) === null || _a === void 0 ? void 0 : _a.quoteCharge;
 };
-const mutation$3 = t(`
+const mutation$b = t(`
     mutation QuoteChargeUpdate($quoteChargeId: ID!, $quantity: Int) {
       quoteChargeUpdate(quoteChargeId: $quoteChargeId, quantity: $quantity) {
         quoteCharge {
@@ -23112,14 +23132,29 @@ const mutation$3 = t(`
   `, [QuantityDrawer_QuoteFragment]);
 const quoteChargeUpdate = async (quoteChargeId, quantity, apiHost, token) => {
     var _a, _b;
-    const response = await execute(mutation$3, { apiHost, token }, { quoteChargeId, quantity });
+    const response = await execute(mutation$b, { apiHost, token }, { quoteChargeId, quantity });
     if ((_a = response.quoteChargeUpdate) === null || _a === void 0 ? void 0 : _a.errors) {
         throw new Error(response.quoteChargeUpdate.errors[0]);
     }
     return (_b = response.quoteChargeUpdate) === null || _b === void 0 ? void 0 : _b.quoteCharge;
 };
-const mutation$2 = t(`
+const mutation$a = t(`
+    mutation QuoteDelete($id: ID!) {
+      quoteDelete(id: $id) {
+        errors
+        quote {
+          id
+        }
+      }
+    }
+  `, []);
+const quoteDelete = async ({ id, token, apiHost }) => {
+    const response = await execute(mutation$a, { apiHost, token }, { id });
+    return response.quoteDelete;
+};
+const mutation$9 = t(`
     mutation quoteSubscriptionUpdate($subscriptionIds: [ID!]!) {
       quoteSubscriptionUpdate(subscriptionIds: $subscriptionIds) {
         quote {
@@ -23148,7 +23183,7 @@ const mutation$2 = t(`
   `, [QuantityDrawer_QuoteFragment]);
 const quoteSubscriptionUpdate = async (subscriptionIds, apiHost, token) => {
     var _a, _b;
-    const response = await execute(mutation$2, { apiHost, token }, { subscriptionIds });
+    const response = await execute(mutation$9, { apiHost, token }, { subscriptionIds });
     if ((_a = response.quoteSubscriptionUpdate) === null || _a === void 0 ? void 0 : _a.errors) {
         throw new Error(response.quoteSubscriptionUpdate.errors[0]);
     }
@@ -23217,6 +23252,23 @@ const canShowChangeQuantities = ({ subscriptions, }) => {
     });
 };
+/**
+ * Note: It is good practice to isolate useEffects into their own components.
+ * This approach helps prevent unnecessary re-renders when data is unchanged,
+ * since useEffect will only be triggered in this dedicated sibling component.
+ */
+const QuoteIsLoadingUpdater = ({ quoteIsPending }) => {
+    const [, setQuoteIsLoading] = useQuoteIsLoading();
+    const prevValue = useRef(quoteIsPending);
+    useEffect(() => {
+        if (prevValue.current !== quoteIsPending) {
+            setQuoteIsLoading(quoteIsPending);
+            prevValue.current = quoteIsPending;
+        }
+    }, [quoteIsPending, setQuoteIsLoading]);
+    return null;
+};
 const QuantityInput_SubscriptionChargeFragment = t(`
   fragment QuantityInput_SubscriptionChargeFragment on SubscriptionCharge {
     id
@@ -23228,7 +23280,6 @@ const QuantityInput_SubscriptionChargeFragment = t(`
 const QuantityInput_SubscriptionFragment = t(`
     fragment QuantityInput_SubscriptionFragment on Subscription {
       id
-      state
       priceList {
         id
       }
@@ -23244,6 +23295,16 @@ const QuantityInput_SubscriptionFragment = t(`
     CanShowQuantitiesInput_SubscriptionFragment,
 ]);
 const DEBOUNCE_TIME$1 = 1000;
+/**
+ * Design note:
+ * If the quantity is cleared by the user (quantity becomes undefined), we delete the quote.
+ *
+ * Rationale:
+ * The user may next change the quantity for a charge on a different subscription, and we need to
+ * allow creating a new quote/quoteChange in that context. Currently there is no way to create a
+ * quoteChange of kind "update" without first calling `quoteSubscriptionUpdate`, so we delete the
+ * existing quote to reset the flow.
+ */
 const QuantityInput = ({ charge: maskedCharge, subscription: maskedSubscription, setUpdatingChargeQuantityId, updatingChargeQuantityId, setErrorUpdatingQuantity, }) => {
     // Context
     const token = useToken();
@@ -23258,7 +23319,7 @@ const QuantityInput = ({ charge: maskedCharge, subscription: maskedSubscription,
     const quote = readFragment(QuantityInput_QuoteFragment, maskedQuote);
     // Hooks
     const showErrorNotification = useErrorNotification();
-    const { setQuoteQueryData } = useSetQuoteQueryData();
+    const { setQuoteQueryData } = useSetQuoteQueryData$1();
     const quantityDisabled =
     // If we are editing a quote, we disable the quantity input
     // If we don't have a quantity, we disable the quantity input
@@ -23271,7 +23332,7 @@ const QuantityInput = ({ charge: maskedCharge, subscription: maskedSubscription,
         !charge.selfServiceQuantity;
     const value = quantity === undefined ? '' : quantity;
     // Mutations
-    const { mutate: createCharge } = useMutation({
+    const { mutate: createCharge, isPending: isCreatingCharge } = useMutation({
         mutationFn: quoteChargeCreate$1,
         onSuccess: response => {
             var _a, _b;
@@ -23286,7 +23347,23 @@ const QuantityInput = ({ charge: maskedCharge, subscription: maskedSubscription,
             setErrorUpdatingQuantity(true);
         },
     });
-    const createQuote = useMutation({
+    const { mutate: deleteQuote, isPending: isDeletingQuote } = useMutation({
+        mutationFn: quoteDelete,
+        onSuccess: response => {
+            var _a;
+            const quoteId = (_a = response === null || response === void 0 ? void 0 : response.quote) === null || _a === void 0 ? void 0 : _a.id;
+            if (!quoteId) {
+                showErrorNotification('quoteId is required');
+                return;
+            }
+            setQuoteQueryData(quoteId, null);
+            setQuoteId(undefined);
+        },
+        onError: () => {
+            setErrorUpdatingQuantity(true);
+        },
+    });
+    const { mutate: createQuote, isPending: isCreatingQuote } = useMutation({
         mutationFn: (subscriptionId) => quoteSubscriptionUpdate([subscriptionId], apiHost, token),
         onSuccess: quote => {
             var _a, _b, _c;
@@ -23314,7 +23391,7 @@ const QuantityInput = ({ charge: maskedCharge, subscription: maskedSubscription,
             setErrorUpdatingQuantity(true);
         },
     });
-    const updateQuoteCharge = useMutation({
+    const { mutate: updateQuoteCharge, isPending: isUpdatingQuoteCharge } = useMutation({
         mutationFn: ({ quoteChargeId, quantity, }) => {
             if (!quoteChargeId)
                 throw new Error('quoteChargeId is required');
@@ -23336,26 +23413,35 @@ const QuantityInput = ({ charge: maskedCharge, subscription: maskedSubscription,
     });
     const onChangeQuantity = (value) => {
         var _a;
+        // Cancel all debounced functions first
+        debouncedQuantityUpdate.cancel();
+        debouncedDeleteQuote.cancel();
         // Handle empty string - don't convert to 0, keep it as undefined
         const quantity = value === '' ? undefined : isNaN(parseInt(value)) ? 0 : parseInt(value);
         setQuantity(quantity);
         if (quantity === undefined) {
             setUpdatingChargeQuantityId(undefined);
+            if (quoteId) {
+                // Only delete the quote if it exists
+                debouncedDeleteQuote(quoteId);
+            }
         }
         else {
             if (!(charge === null || charge === void 0 ? void 0 : charge.priceListChargeId)) {
                 showErrorNotification('Charge ID is not found');
                 return;
             }
-            // The set charge id is used to disable all other quantity inputs
+            // Used to disable all other quantity inputs for this subscription
             setUpdatingChargeQuantityId(getUpdatingChargeQuantityId(charge.priceListChargeId, subscription.id));
             const quantityDelta = quantity - ((_a = charge.quantity) !== null && _a !== void 0 ? _a : 0);
-            debouncedQuantityUpdate.cancel();
-            debouncedQuantityUpdate(charge.priceListChargeId, quantityDelta, quantity, subscription.id, quote, quoteId);
+            debouncedQuantityUpdate(charge.priceListChargeId, quantityDelta, subscription.id, quote, quoteId);
         }
     };
-    const debouncedQuantityUpdate = useCallback(lodashExports.debounce((priceListChargeId, quantityDelta, quantity, subscriptionId, quote, quoteId) => {
-        var _a, _b, _c;
+    const debouncedDeleteQuote = useCallback(lodashExports.debounce((quoteId) => {
+        deleteQuote({ id: quoteId, apiHost, token });
+    }, DEBOUNCE_TIME$1), []);
+    const debouncedQuantityUpdate = useCallback(lodashExports.debounce((priceListChargeId, quantityDelta, subscriptionId, quote, quoteId) => {
+        var _a;
         if (quantityDelta === 0) {
             setErrorUpdatingQuantity(true);
             showErrorNotification('New quantity cannot be the same as current');
@@ -23363,37 +23449,22 @@ const QuantityInput = ({ charge: maskedCharge, subscription: maskedSubscription,
         }
         // If we are not editing a quote, we create a new one
         if (quoteId === undefined) {
-            createQuote.mutate(subscriptionId);
+            createQuote(subscriptionId);
         }
         else {
             const quoteChange = (_a = quote === null || quote === void 0 ? void 0 : quote.quoteChanges) === null || _a === void 0 ? void 0 : _a.find(quoteChange => { var _a, _b; return ((_a = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.priceList) === null || _a === void 0 ? void 0 : _a.id) === ((_b = subscription.priceList) === null || _b === void 0 ? void 0 : _b.id); });
             const quoteCharge = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.find(charge => { var _a; return ((_a = charge === null || charge === void 0 ? void 0 : charge.priceListCharge) === null || _a === void 0 ? void 0 : _a.id) === priceListChargeId; });
             if (quoteCharge) {
-                updateQuoteCharge.mutate({
+                updateQuoteCharge({
                     quoteChargeId: quoteCharge.id,
                     quantity: quantityDelta,
                 });
             }
-            else {
-                const subscriptionCharge = (_c = (_b = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.subscription) === null || _b === void 0 ? void 0 : _b.charges) === null || _c === void 0 ? void 0 : _c.find(subscriptionCharge => { var _a; return ((_a = subscriptionCharge === null || subscriptionCharge === void 0 ? void 0 : subscriptionCharge.priceListCharge) === null || _a === void 0 ? void 0 : _a.id) === priceListChargeId; });
-                if (!(subscriptionCharge === null || subscriptionCharge === void 0 ? void 0 : subscriptionCharge.id))
-                    throw new Error('subscriptionCharge id is required');
-                if (!(quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.id))
-                    throw new Error('quoteChange id is required');
-                createCharge({
-                    apiHost,
-                    quantity, // This is a new charge so use quantity instead of quantityDelta
-                    quoteChangeId: quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.id,
-                    startDate: formatDateForApi(dayjs()),
-                    subscriptionChargeId: subscriptionCharge.id,
-                    token,
-                });
-            }
         }
     }, DEBOUNCE_TIME$1), []);
-    return (jsx(Fragment, { children: jsx(Input, { className: "bunny-text-right", disabled: quantityDisabled, onChange: e => {
-                onChangeQuantity(e.target.value);
-            }, style: { width: '96px' }, value: value }) }));
+    return (jsxs(Fragment, { children: [jsx(Input, { className: "bunny-text-right", disabled: quantityDisabled, onChange: e => {
+                    onChangeQuantity(e.target.value);
+                }, style: { width: '96px' }, value: value }), jsx(QuoteIsLoadingUpdater, { quoteIsPending: isCreatingCharge || isDeletingQuote || isCreatingQuote || isUpdatingQuoteCharge })] }));
 };
 const QuantityChangeGridRow_SubscriptionChargeFragment = t(`
@@ -23520,6 +23591,46 @@ function invalidateSubscriptionsQueryKeys(queryClient, token) {
     });
 }
+const [QuoteRecalculateTaxesProvider, useQuoteRecalculateTaxes$2] = createValueContext();
+const mutation$8 = t(`
+    mutation QuoteRecalculateTaxes($id: ID!) {
+      quoteRecalculateTaxes(id: $id) {
+        quote {
+          ...QuantityDrawer_QuoteFragment
+          id
+        }
+        errors
+      }
+    }
+  `, [QuantityDrawer_QuoteFragment]);
+const quoteRecalculateTaxes$1 = async ({ quoteId, apiHost, token, }) => {
+    var _a;
+    const response = await execute(mutation$8, { apiHost, token }, { id: quoteId });
+    return (_a = response.quoteRecalculateTaxes) === null || _a === void 0 ? void 0 : _a.quote;
+};
+const useQuoteRecalculateTaxes$1 = () => {
+    const token = useToken();
+    const { apiHost } = useContext(BunnyContext);
+    const { setQuoteQueryData } = useSetQuoteQueryData$1();
+    const { mutate: quoteRecalculateTaxesMutation, isPending: isRecalculatingTaxes } = useMutation({
+        mutationFn: async ({ quoteId }) => {
+            return await quoteRecalculateTaxes$1({ quoteId, apiHost, token });
+        },
+        onSuccess: quote => {
+            if (!(quote === null || quote === void 0 ? void 0 : quote.id)) {
+                throw new Error('Quote ID is undefined');
+            }
+            setQuoteQueryData(quote === null || quote === void 0 ? void 0 : quote.id, quote);
+        },
+    });
+    return {
+        quoteRecalculateTaxesMutation,
+        isRecalculatingTaxes,
+    };
+};
 const QuantityDrawerContent = ({ subscriptions, quantityDrawerOpen, setQuantityDrawerOpen, handlePortalErrors, setShowInactive, }) => {
     const token = useToken();
     const queryClient = useQueryClient();
@@ -23529,6 +23640,8 @@ const QuantityDrawerContent = ({ subscriptions, quantityDrawerOpen, setQuantityD
     const [payModalVisible, setPayModalVisible] = useState(false);
     const [updatingChargeQuantityId, setUpdatingChargeQuantityId] = useState(undefined);
     const quote = useQuoteQueryData(quoteId);
+    // Context
+    const onRecalculateTaxes = useQuoteRecalculateTaxes$2();
     // Handlers
     const onSuccess = () => {
         setQuantityDrawerOpen(false);
@@ -23558,10 +23671,11 @@ const QuantityDrawerContent = ({ subscriptions, quantityDrawerOpen, setQuantityD
     const handleOpenCheckout = () => {
         setPayModalVisible(true);
     };
-    return (jsxs(Fragment, { children: [jsx(QuantityChangeDrawerDesktop, { onClose: handleDrawerClose, open: quantityDrawerOpen, openCheckout: handleOpenCheckout, subscriptions: subscriptions, setUpdatingChargeQuantityId: setUpdatingChargeQuantityId, updatingChargeQuantityId: updatingChargeQuantityId }), jsx(Checkout, { onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, quote: quote, token: token, isUpdatingQuote: false })] }));
+    return (jsxs(Fragment, { children: [jsx(QuantityChangeDrawerDesktop, { onClose: handleDrawerClose, open: quantityDrawerOpen, openCheckout: handleOpenCheckout, subscriptions: subscriptions, setUpdatingChargeQuantityId: setUpdatingChargeQuantityId, updatingChargeQuantityId: updatingChargeQuantityId }), jsx(Checkout, { onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, onRecalculateTaxes: onRecalculateTaxes, open: payModalVisible, quote: quote, token: token, isUpdatingQuote: false })] }));
 };
 const QuantityDrawer = ({ subscriptions, quantityDrawerOpen, setQuantityDrawerOpen, handlePortalErrors, setShowInactive, }) => {
-    return (jsx(QuoteIdProvider, { children: jsx(QuantityDrawerContent, { subscriptions: subscriptions, quantityDrawerOpen: quantityDrawerOpen, setQuantityDrawerOpen: setQuantityDrawerOpen, handlePortalErrors: handlePortalErrors, setShowInactive: setShowInactive }) }));
+    const { quoteRecalculateTaxesMutation } = useQuoteRecalculateTaxes$1();
+    return (jsx(QuoteIdProvider, { children: jsx(QuoteIsLoadingProvider, { children: jsx(QuoteRecalculateTaxesProvider, { value: quoteId => quoteRecalculateTaxesMutation({ quoteId }), children: jsx(QuantityDrawerContent, { subscriptions: subscriptions, quantityDrawerOpen: quantityDrawerOpen, setQuantityDrawerOpen: setQuantityDrawerOpen, handlePortalErrors: handlePortalErrors, setShowInactive: setShowInactive }) }) }) }));
 };
 const useCancelSubscription = () => {
@@ -23825,14 +23939,27 @@ const SubscriptionCardActions = ({ onChangePlanClick, onCancelSubscriptionClick,
     const isInTrial = isSubscriptionTrial(subscription);
     const isTrialExpired = isSubscriptionTrialExpired(subscription);
     const isActiveOrPending = isSubscriptionActiveOrPending(subscription);
+    const getButtonLabel = () => {
+        if (isInTrial) {
+            return 'Upgrade from trial';
+        }
+        if (isTrialExpired) {
+            return 'Upgrade';
+        }
+        // If the subscription is an addon, we should show the "Adjust plan" button since we don't support changing add-on plans.
+        if (subscription.priceList.plan.addon === true) {
+            return 'Adjust plan';
+        }
+        return 'Change plan';
+    };
     if (isPaymentMethodLoading)
         return null;
     return (jsxs(Fragment, { children: [isSelfServiceCancelable && onCancelSubscriptionClick && (isInTrial || isActiveOrPending) && (jsx(Popconfirm, { icon: null, onConfirm: () => onCancelSubscriptionClick(subscription), title: "Cancel subscription", children: jsx(Button, { className: "bunny-p-0", type: "link", children: "Cancel subscription" }) })), arePlansAvailable &&
                 onChangePlanClick &&
-                (isActiveOrPending || isInTrial || isTrialExpired) && (jsx(Button, { onClick: () => onChangePlanClick(subscription), type: 'primary', children: isInTrial ? 'Upgrade from trial' : isTrialExpired ? 'Upgrade' : 'Change plan' })), !arePlansAvailable && isInTrial && jsx(Tag, { color: "warning", children: "Cannot upgrade" })] }));
+                (isActiveOrPending || isInTrial || isTrialExpired) && (jsx(Button, { onClick: () => onChangePlanClick(subscription), type: 'primary', children: getButtonLabel() })), !arePlansAvailable && isInTrial && jsx(Tag, { color: "warning", children: "Cannot upgrade" })] }));
 };
-const query$2 = t(`
+const query$4 = t(`
     query priceListChangeOptions($productId: ID!) {
       priceListChangeOptions(productId: $productId) {
         ...SubscriptionCardActions_PriceListChangeOptionsFragment
@@ -23840,7 +23967,7 @@ const query$2 = t(`
     }
   `, [SubscriptionCardActions_PriceListChangeOptionsFragment]);
 const getPriceListChangeOptions$1 = async ({ apiHost, productId, token, }) => {
-    const response = await execute(query$2, { apiHost, token }, { productId });
+    const response = await execute(query$4, { apiHost, token }, { productId });
     return response.priceListChangeOptions;
 };
@@ -23874,7 +24001,7 @@ const getSubscriptionStatusText = (subscription) => {
                 return `Trial expires on ${formatDate(trialEndDate)}`;
         }
     }
-    if (evergreen) {
+    if (evergreen && subscription.state === t.scalar('SubscriptionState', 'ACTIVE')) {
         return `Renews on ${formatDate(endDate)}`;
     }
     return `Ends on ${formatDate(endDate || trialEndDate)}`;
@@ -23952,40 +24079,66 @@ const formatNumber = (num, decimals = 2) => {
     });
 };
+const getPricingModelDescription = (pricingModel) => {
+    switch (pricingModel) {
+        case 'TIERED':
+            return 'units in each tier are priced separately.';
+        case 'VOLUME':
+            return 'the highest tier reached prices all units.';
+        case 'BANDS':
+            return 'the quantity indexes to a flat price.';
+        default:
+            return '';
+    }
+};
+const getPricingModelTitle = (pricingModel) => {
+    switch (pricingModel) {
+        case 'TIERED':
+            return 'Tiered';
+        case 'VOLUME':
+            return 'Volume';
+        case 'BANDS':
+            return 'Bands';
+        default:
+            return '';
+    }
+};
 const StyledTable = styled(Table) `
   .ant-table-cell {
     border-bottom: none !important;
   }
 `;
-const TieredDisplayDropdown = ({ priceTiers, currencyId, priceDecimals, truncatedText, }) => {
+const TieredDisplayDropdown = ({ pricingModel, priceTiers, currencyId, priceDecimals, truncatedText, }) => {
     const onlyHasOneTier = (priceTiers === null || priceTiers === void 0 ? void 0 : priceTiers.length) === 1;
     const dropdownTrigger = (jsx("div", { className: `w-full ${onlyHasOneTier ? '' : 'underline cursor-pointer'}`, children: truncatedText }));
     if (onlyHasOneTier) {
         return dropdownTrigger;
     }
     return (jsx(Dropdown, { popupRender: () => {
-            return (jsx("div", { className: "rounded border border-solid border-slate-200 bg-white overflow-hidden", children: jsx(StyledTable, { columns: [
-                        {
-                            dataIndex: 'starts',
-                            title: 'From # of units',
-                            align: 'right',
-                            render: (_, record, index) => {
-                                record = record;
-                                const nextRecord = priceTiers === null || priceTiers === void 0 ? void 0 : priceTiers[index + 1];
-                                const starts = record.starts;
-                                const ends = (nextRecord === null || nextRecord === void 0 ? void 0 : nextRecord.starts) ? nextRecord.starts - 1 : '∞';
-                                return (jsxs(Fragment, { children: [formatNumber(starts, 0), " -", ' ', typeof ends === 'number' ? formatNumber(ends, 0) : '∞'] }));
+            return (jsxs("div", { className: "rounded border border-solid border-slate-200 bg-white overflow-hidden", children: [jsxs("div", { className: "bunny-text-gray-400 bunny-p-2", children: [getPricingModelTitle(pricingModel), " pricing -", ' ', getPricingModelDescription(pricingModel)] }), jsx(StyledTable, { columns: [
+                            {
+                                dataIndex: 'starts',
+                                title: 'From # of units',
+                                align: 'right',
+                                render: (_, record, index) => {
+                                    record = record;
+                                    const nextRecord = priceTiers === null || priceTiers === void 0 ? void 0 : priceTiers[index + 1];
+                                    const starts = record.starts;
+                                    const ends = (nextRecord === null || nextRecord === void 0 ? void 0 : nextRecord.starts) ? nextRecord.starts - 1 : '+';
+                                    return (jsxs(Fragment, { children: [formatNumber(starts, 0), typeof ends === 'number' ? formatNumber(ends, 0) : '+'] }));
+                                },
                             },
-                        },
-                        {
-                            dataIndex: 'price',
-                            title: 'Unit price',
-                            align: 'right',
-                            render: value => {
-                                return jsx(Fragment, { children: formatCurrency$1(value, currencyId, priceDecimals) });
+                            {
+                                dataIndex: 'price',
+                                title: 'Unit price',
+                                align: 'right',
+                                render: value => {
+                                    return jsx(Fragment, { children: formatCurrency$1(value, currencyId, priceDecimals) });
+                                },
                             },
-                        },
-                    ], dataSource: priceTiers, rowKey: "starts", pagination: false, size: "small" }) }));
+                        ], dataSource: priceTiers, rowKey: "starts", pagination: false, size: "small" })] }));
         }, children: dropdownTrigger }));
 };
@@ -24036,7 +24189,7 @@ const SubscriptionChargeUnitPrice = ({ charge, currencyId, }) => {
         ? '-'
         : formatCurrency$1(charge.discountedPrice, currencyId, charge.priceDecimals);
     const isChargeDiscount = isDiscount$1(charge.kind);
-    return (jsx(Fragment, { children: hasPriceTiers(charge) ? (jsx(TieredDisplayDropdown, { priceTiers: charge.priceTiers, currencyId: currencyId, priceDecimals: charge.priceDecimals, truncatedText: `${charge.kind === QuoteChangeKind.PRICE_UPDATE ? 'new ' : ''}${getApplicablePriceTier(charge, currencyId, charge.priceDecimals)}` })) : isChargeDiscount ? (`-${price}`) : (price) }));
+    return (jsx(Fragment, { children: hasPriceTiers(charge) ? (jsx(TieredDisplayDropdown, { pricingModel: charge.pricingModel, priceTiers: charge.priceTiers, currencyId: currencyId, priceDecimals: charge.priceDecimals, truncatedText: `${charge.kind === QuoteChangeKind.PRICE_UPDATE ? 'new ' : ''}${getApplicablePriceTier(charge, currencyId, charge.priceDecimals)}` })) : isChargeDiscount ? (`-${price}`) : (price) }));
 };
 const { Text: Text$e } = Typography;
@@ -24173,7 +24326,7 @@ const SubscriptionCardDesktopRow = ({ charge, chargeIndex, charges, currencyId,
                             : (_b = charge.quantity) === null || _b === void 0 ? void 0 : _b.toLocaleString() }), jsx(SubscriptionsListCell, { right: true, children: jsx(SubscriptionChargeUnitPrice, { charge: charge, currencyId: currencyId }) }), jsx(SubscriptionsListCell, { right: true, children: jsx(SubscriptionChargeTotal, { charge: charge, currencyId: currencyId }) })] }));
 };
-function AddonSubscriptionsCards({ onCancelSubscriptionClick, subscriptions, subscription, showInactive, }) {
+function AddonSubscriptionsCards({ onCancelSubscriptionClick, onChangePlanClick, subscriptions, subscription, showInactive, }) {
     const addonSubscriptions = findAddonSubscriptions(subscription, subscriptions);
     if (addonSubscriptions.length === 0) {
         return null;
@@ -24182,7 +24335,7 @@ function AddonSubscriptionsCards({ onCancelSubscriptionClick, subscriptions, sub
             if (!showInactive && isSubscriptionNotActive(addonSubscription))
                 return null;
             const isLast = addonSubscriptionIndex === addonSubscriptions.length - 1;
-            return (jsxs("div", { className: "bunny-flex bunny-flex-row", children: [jsx(AddonIndentation, { isLast: isLast, indentation: ADDON_INDENTATION, verticalMargin: "-1rem" }), jsx("div", { className: "bunny-flex-1", children: jsx(SubscriptionCardDesktop, { onCancelSubscriptionClick: onCancelSubscriptionClick, subscription: addonSubscription, isAddon: true }) })] }, addonSubscriptionIndex));
+            return (jsxs("div", { className: "bunny-flex bunny-flex-row", children: [jsx(AddonIndentation, { isLast: isLast, indentation: ADDON_INDENTATION, verticalMargin: "-1rem" }), jsx("div", { className: "bunny-flex-1", children: jsx(SubscriptionCardDesktop, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, subscription: addonSubscription, isAddon: true }) })] }, addonSubscriptionIndex));
         }) }));
 }
@@ -24241,8 +24394,8 @@ const SubscriptionsList = ({ showInactive, onChangePlanClick, onCancelSubscripti
             if (!showInactive && isSubscriptionNotActive(subscription))
                 return null;
             if (isMobile)
-                return (jsxs("div", { className: `bunny-flex bunny-flex-col bunny-gap-${gap}`, children: [jsx(SubscriptionCard, { subscription: subscription }), jsx(AddonSubscriptionsCards, { onCancelSubscriptionClick: onCancelSubscriptionClick, subscription: subscription, subscriptions: subscriptions, showInactive: showInactive })] }, subscriptionIndex));
-            return (jsxs("div", { className: `bunny-flex bunny-flex-col bunny-gap-${gap}`, children: [jsx(SubscriptionCardDesktop, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, subscription: subscription }), jsx(AddonSubscriptionsCards, { onCancelSubscriptionClick: onCancelSubscriptionClick, subscription: subscription, subscriptions: subscriptions, showInactive: showInactive })] }, subscriptionIndex));
+                return (jsxs("div", { className: `bunny-flex bunny-flex-col bunny-gap-${gap}`, children: [jsx(SubscriptionCard, { subscription: subscription }), jsx(AddonSubscriptionsCards, { onCancelSubscriptionClick: onCancelSubscriptionClick, onChangePlanClick: onChangePlanClick, subscription: subscription, subscriptions: subscriptions, showInactive: showInactive })] }, subscriptionIndex));
+            return (jsxs("div", { className: `bunny-flex bunny-flex-col bunny-gap-${gap}`, children: [jsx(SubscriptionCardDesktop, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, subscription: subscription }), jsx(AddonSubscriptionsCards, { onCancelSubscriptionClick: onCancelSubscriptionClick, onChangePlanClick: onChangePlanClick, subscription: subscription, subscriptions: subscriptions, showInactive: showInactive })] }, subscriptionIndex));
         }) }));
 };
@@ -24313,7 +24466,7 @@ const FormattedQuoteFields_QuoteFragment = t(`
     }
   }
 `);
-const query$1 = t(`
+const query$3 = t(`
     query quote($id: ID, $includeHtmlField: Boolean!) {
       quote(id: $id) {
         ...FormattedQuoteFields_QuoteFragment @include(if: $includeHtmlField)
@@ -24322,7 +24475,7 @@ const query$1 = t(`
     }
   `, [FormattedQuoteFields_QuoteFragment, QuoteContext_QuoteFragment]);
 const getQuote = async ({ id, token, apiHost, includeHtmlField = false, }) => {
-    const response = await execute(query$1, { apiHost, token }, { id, includeHtmlField });
+    const response = await execute(query$3, { apiHost, token }, { id, includeHtmlField });
     return response === null || response === void 0 ? void 0 : response.quote;
 };
@@ -24427,7 +24580,7 @@ const calculateNewQuantity = (priceListCharge, currentQuantity = 1) => {
     return quantityMin;
 };
-const mutation$1 = t(`
+const mutation$7 = t(`
     mutation QuoteChangeUpdate($id: ID!, $charges: [QuoteChargeAttributes!]!) {
       quoteChangeUpdate(id: $id, charges: $charges) {
         quoteChange {
@@ -24441,7 +24594,7 @@ const mutation$1 = t(`
   `, [QuoteContext_QuoteFragment]);
 const quoteChangeUpdate = async ({ quoteChangeId, charges, apiHost, token, }) => {
     var _a, _b;
-    const response = await execute(mutation$1, {
+    const response = await execute(mutation$7, {
         apiHost,
         token,
     }, {
@@ -24497,6 +24650,19 @@ function useFeatureQuantities({ onFeatureQuantitiesChanged, }) {
     };
 }
+const useSetQuoteQueryData = () => {
+    const token = useToken();
+    const queryClient = useQueryClient();
+    const setQuoteQueryData = (quoteId, quote) => {
+        queryClient.setQueryData(QueryKeyFactory$1.default.createObjectKey({
+            id: quoteId,
+            objectName: 'editingQuote',
+            token,
+        }), quote);
+    };
+    return { setQuoteQueryData };
+};
 // Functionality:
 // 1: keep track of quantities set for features based on feature.id
 //    a. copy those quantities over to charges with same feature when initializing
@@ -24509,9 +24675,9 @@ function useFeatureQuantities({ onFeatureQuantitiesChanged, }) {
 const showErrorNotification = useErrorNotification();
 const DEBOUNCE_TIME = 1000;
 const useQuoteQuantities = ({ selectedPriceList, quote, }) => {
-    const queryClient = useQueryClient();
     const token = useToken();
     const { apiHost } = useContext(BunnyContext);
+    const { setQuoteQueryData } = useSetQuoteQueryData();
     // Derived state
     const selectedPriceListQuoteChange = useMemo(() => {
         var _a;
@@ -24530,23 +24696,27 @@ const useQuoteQuantities = ({ selectedPriceList, quote, }) => {
             });
         },
         onSuccess: quoteChange => {
-            var _a;
-            queryClient.setQueryData(QueryKeyFactory$1.default.createObjectKey({
-                objectName: 'editingQuote',
-                id: (_a = quote === null || quote === void 0 ? void 0 : quote.id) !== null && _a !== void 0 ? _a : undefined,
-                token,
-            }), quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.quote);
+            if (!(quote === null || quote === void 0 ? void 0 : quote.id)) {
+                throw new Error('Quote ID is undefined');
+            }
+            if (!(quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.quote)) {
+                throw new Error('Quote is undefined');
+            }
+            setQuoteQueryData(quote === null || quote === void 0 ? void 0 : quote.id, quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.quote);
         },
     });
     function handleUpdateQuoteQuantities(featureQuantities) {
         if (!selectedPriceListQuoteChange) {
-            throw new Error('Quote change is undefined');
+            console.error('Quote change is undefined');
+            return;
         }
         if (!(quote === null || quote === void 0 ? void 0 : quote.id)) {
-            throw new Error('Quote ID is undefined');
+            console.error('Quote ID is undefined');
+            return;
         }
         if (!(selectedPriceListQuoteChange === null || selectedPriceListQuoteChange === void 0 ? void 0 : selectedPriceListQuoteChange.id)) {
-            throw new Error('Quote change ID is undefined');
+            console.error('Quote change ID is undefined');
+            return;
         }
         const featureIdsToUpdate = Object.keys(featureQuantities).filter(featureId => {
             // If the quantities differ, then update quote with the quantities present in useFeatureQuantities
@@ -24558,20 +24728,24 @@ const useQuoteQuantities = ({ selectedPriceList, quote, }) => {
             const quoteCharge = selectedPriceListQuoteChange === null || selectedPriceListQuoteChange === void 0 ? void 0 : selectedPriceListQuoteChange.charges.find(charge => { var _a; return ((_a = charge === null || charge === void 0 ? void 0 : charge.feature) === null || _a === void 0 ? void 0 : _a.id) === featureId; });
             return quoteCharge !== undefined && localAndQuoteQuantitiesDiffer;
         });
-        const charges = featureIdsToUpdate.map(featureId => {
+        const charges = featureIdsToUpdate
+            .map(featureId => {
             const quoteCharge = selectedPriceListQuoteChange === null || selectedPriceListQuoteChange === void 0 ? void 0 : selectedPriceListQuoteChange.charges.find(charge => { var _a; return ((_a = charge === null || charge === void 0 ? void 0 : charge.feature) === null || _a === void 0 ? void 0 : _a.id) === featureId; });
             const quantity = getFeatureQuantity(featureId, featureQuantities);
             if (!quantity) {
-                throw new Error('Quantity is undefined');
+                console.error('Quantity is undefined');
+                return;
             }
             if (!(quoteCharge === null || quoteCharge === void 0 ? void 0 : quoteCharge.id)) {
-                throw new Error('Quote charge for featureId is undefined');
+                console.error('Quote charge for featureId is undefined');
+                return;
             }
             return {
                 id: quoteCharge.id,
                 quantity: quantity,
             };
-        });
+        })
+            .filter(charge => charge !== undefined);
         if (charges.length === 0) {
             return;
         }
@@ -24639,6 +24813,44 @@ const useQuoteQuantities = ({ selectedPriceList, quote, }) => {
     };
 };
+const mutation$6 = t(`
+    mutation QuoteRecalculateTaxes($id: ID!) {
+      quoteRecalculateTaxes(id: $id) {
+        quote {
+          ...QuoteContext_QuoteFragment
+          id
+        }
+        errors
+      }
+    }
+  `, [QuoteContext_QuoteFragment]);
+const quoteRecalculateTaxes = async ({ quoteId, apiHost, token, }) => {
+    var _a;
+    const response = await execute(mutation$6, { apiHost, token }, { id: quoteId });
+    return (_a = response.quoteRecalculateTaxes) === null || _a === void 0 ? void 0 : _a.quote;
+};
+const useQuoteRecalculateTaxes = () => {
+    const token = useToken();
+    const { apiHost } = useContext(BunnyContext);
+    const { setQuoteQueryData } = useSetQuoteQueryData();
+    const { mutate: quoteRecalculateTaxesMutation, isPending: isRecalculatingTaxes } = useMutation({
+        mutationFn: async ({ quoteId }) => {
+            return await quoteRecalculateTaxes({ quoteId, apiHost, token });
+        },
+        onSuccess: quote => {
+            if (!(quote === null || quote === void 0 ? void 0 : quote.id)) {
+                throw new Error('Quote ID is undefined');
+            }
+            setQuoteQueryData(quote === null || quote === void 0 ? void 0 : quote.id, quote);
+        },
+    });
+    return {
+        quoteRecalculateTaxesMutation,
+        isRecalculatingTaxes,
+    };
+};
 function useFeatureAddonsPending() {
     const [featureAddonsLoading, setFeatureAddonsLoading] = useState([]);
     const addFeatureAddonLoading = (featureAddonId) => {
@@ -24662,6 +24874,7 @@ function QuoteProvider({ children }) {
     // Hooks
     const token = useToken();
     const { isFeatureAddonsLoading, addFeatureAddonLoading, removeFeatureAddonLoading } = useFeatureAddonsPending();
+    const { quoteRecalculateTaxesMutation } = useQuoteRecalculateTaxes();
     const { quote: maskedQuote, isQuotePending } = useQuoteCreate({
         upgradingSubscription,
         selectedPriceList: selectedPriceList,
@@ -24697,6 +24910,7 @@ function QuoteProvider({ children }) {
             onChangeSelectedPriceList: handleChangeSelectedPriceList,
             onChangeQuantity,
             getFeatureQuantity,
+            onRecalculateTaxes: (id) => quoteRecalculateTaxesMutation({ quoteId: id }),
         }, children: children }));
 }
@@ -24723,40 +24937,6 @@ function priceDescriptionString({ unitName, showPriceAsMonthly, periodMonths, pr
     return `Per ${unitName && !priceListHasFlatFeeCharges ? `${unitName.toLowerCase()} / ` : ''}${showPriceAsMonthly ? 'month' : periodLabel}`;
 }
-var localizedFormat$2 = {exports: {}};
-var localizedFormat$1 = localizedFormat$2.exports;
-var hasRequiredLocalizedFormat;
-function requireLocalizedFormat () {
-	if (hasRequiredLocalizedFormat) return localizedFormat$2.exports;
-	hasRequiredLocalizedFormat = 1;
-	(function (module, exports) {
-		!function(e,t){module.exports=t();}(localizedFormat$1,(function(){var e={LTS:"h:mm:ss A",LT:"h:mm A",L:"MM/DD/YYYY",LL:"MMMM D, YYYY",LLL:"MMMM D, YYYY h:mm A",LLLL:"dddd, MMMM D, YYYY h:mm A"};return function(t,o,n){var r=o.prototype,i=r.format;n.en.formats=e,r.format=function(t){void 0===t&&(t="YYYY-MM-DDTHH:mm:ssZ");var o=this.$locale().formats,n=function(t,o){return t.replace(/(\[[^\]]+])|(LTS?|l{1,4}|L{1,4})/g,(function(t,n,r){var i=r&&r.toUpperCase();return n||o[r]||e[r]||o[i].replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g,(function(e,t,o){return t||o.slice(1)}))}))}(t,void 0===o?{}:o);return i.call(this,n)};}}));
-	} (localizedFormat$2));
-	return localizedFormat$2.exports;
-}
-var localizedFormatExports = requireLocalizedFormat();
-var localizedFormat = /*@__PURE__*/getDefaultExportFromCjs(localizedFormatExports);
-dayjs.extend(localizedFormat);
-const formatCurrency = (value, currencyIsoCode, decimals = 2) => {
-    if (value !== 0 && !value)
-        return '';
-    const currencyValue = typeof value === 'string' ? parseFloat(value) : value;
-    if (isNaN(currencyValue))
-        return value;
-    const localeOptions = {
-        minimumFractionDigits: decimals,
-        maximumFractionDigits: decimals,
-    };
-    localeOptions.style = 'currency';
-    localeOptions.currency = currencyIsoCode;
-    return currencyValue.toLocaleString(navigator.language, localeOptions);
-};
 const { Text: Text$b } = Typography;
 const PriceTierPrice = ({ currencyId, priceDecimals, tier, }) => {
     return (jsx(Text$b, { className: "bunny-text-white", children: formatCurrency(tier.price, currencyId, priceDecimals) }));
@@ -24780,32 +24960,6 @@ const PriceTierRow = ({ tier: maskedTier, nextTier: maskedNextTier, }) => {
     return jsx(Text$a, { className: "bunny-text-white", children: text });
 };
-const getPricingModelTitle = (pricingModel) => {
-    switch (pricingModel) {
-        case 'TIERED':
-            return 'Tiered';
-        case 'VOLUME':
-            return 'Volume';
-        case 'BANDS':
-            return 'Bands';
-        default:
-            return '';
-    }
-};
-const getPricingModelDescription = (pricingModel) => {
-    switch (pricingModel) {
-        case 'TIERED':
-            return 'units in each tier are priced separately.';
-        case 'VOLUME':
-            return 'the highest tier reached prices all units.';
-        case 'BANDS':
-            return 'the quantity indexes to a flat price.';
-        default:
-            return '';
-    }
-};
 const { Text: Text$9 } = Typography;
 const ChargePriceTiers_PriceListChargeFragment = t(`
     fragment ChargePriceTiers_PriceListChargeFragment on PriceListCharge {
@@ -25440,57 +25594,13 @@ const getAvailablePlansAndPriceLists = ({ availablePriceLists, priceListChangeOp
     return {
         availablePriceListsArray,
         displayPriceLists,
-    };
-};
-const everythingInPlusString = ({ priceList }) => {
-    return `Everything in ${priceList.plan.name}, plus`;
-};
-const QUOTE_CHARGE_CREATE = `
-${QUOTE_FIELDS()}
-mutation QuoteChargeCreate ($quoteChangeId: ID!, $startDate: ISO8601Date!, $endDate: ISO8601Date, $priceListChargeId: ID, $subscriptionChargeId: ID, $price: Float, $quantity: Int) {
-  quoteChargeCreate(
-    endDate: $endDate
-    price: $price
-    priceListChargeId: $priceListChargeId
-    quantity: $quantity
-    quoteChangeId: $quoteChangeId
-    startDate: $startDate
-    subscriptionChargeId: $subscriptionChargeId
-  ) {
-    quoteCharge {
-      quoteChange {
-        id
-        quoteId
-        quote {
-          ...QuoteFields
-        }
-      }
-      id
-    }
-  }
-}
-`;
-const quoteChargeCreate = async ({ price, priceListChargeId, quantity, quoteChangeId, startDate, subscriptionChargeId, token, apiHost, }) => {
-    var _a;
-    const response = await gqlRequest({
-        query: QUOTE_CHARGE_CREATE,
-        vars: {
-            price,
-            priceListChargeId,
-            quantity,
-            quoteChangeId,
-            startDate,
-            subscriptionChargeId,
-        },
-        apiHost,
-        token,
-    });
-    return (_a = response === null || response === void 0 ? void 0 : response.quoteChargeCreate) === null || _a === void 0 ? void 0 : _a.quoteCharge;
+    };
+};
+const everythingInPlusString = ({ priceList }) => {
+    return `Everything in ${priceList.plan.name}, plus`;
 };
-const mutation = t(`
+const mutation$5 = t(`
     mutation QuoteChargeDelete($quoteChargeId: ID!) {
       quoteChargeDelete(quoteChargeId: $quoteChargeId) {
         errors
@@ -25508,21 +25618,76 @@ const mutation = t(`
   `, [QuoteContext_QuoteFragment]);
 const quoteChargeDelete = async ({ quoteChargeId, token, apiHost }) => {
     var _a, _b, _c, _d;
-    const response = await execute(mutation, { apiHost, token }, { quoteChargeId });
+    const response = await execute(mutation$5, { apiHost, token }, { quoteChargeId });
     if ((_a = response.quoteChargeDelete) === null || _a === void 0 ? void 0 : _a.errors) {
         throw new Error((_c = (_b = response.quoteChargeDelete) === null || _b === void 0 ? void 0 : _b.errors) === null || _c === void 0 ? void 0 : _c[0]);
     }
     return (_d = response.quoteChargeDelete) === null || _d === void 0 ? void 0 : _d.quoteCharge;
 };
-const useQuoteUpdateFeatureAddon = (quote, featureAddon) => {
+const mutation$4 = t(`
+    mutation QuoteChargeCreate(
+      $quoteChangeId: ID!
+      $startDate: ISO8601Date!
+      $endDate: ISO8601Date
+      $priceListChargeId: ID
+      $subscriptionChargeId: ID
+      $price: Float
+      $quantity: Int
+    ) {
+      quoteChargeCreate(
+        endDate: $endDate
+        price: $price
+        priceListChargeId: $priceListChargeId
+        quantity: $quantity
+        quoteChangeId: $quoteChangeId
+        startDate: $startDate
+        subscriptionChargeId: $subscriptionChargeId
+      ) {
+        quoteCharge {
+          quoteChange {
+            id
+            quoteId
+            quote {
+              ...QuoteContext_QuoteFragment
+            }
+          }
+          id
+        }
+      }
+    }
+  `, [QuoteContext_QuoteFragment]);
+const quoteChargeCreate = async ({ price, priceListChargeId, quantity, quoteChangeId, startDate, subscriptionChargeId, token, apiHost, }) => {
+    var _a;
+    const response = await execute(mutation$4, { apiHost, token }, { price, priceListChargeId, quantity, quoteChangeId, startDate, subscriptionChargeId });
+    return (_a = response === null || response === void 0 ? void 0 : response.quoteChargeCreate) === null || _a === void 0 ? void 0 : _a.quoteCharge;
+};
+const useQuoteUpdateFeatureAddon = (maskedQuote, featureAddon) => {
     const { apiHost } = useContext(BunnyContext);
     const { addFeatureAddonLoading, removeFeatureAddonLoading } = useContext(QuoteContext);
     const token = useToken();
-    const queryClient = useQueryClient();
+    const { setQuoteQueryData } = useSetQuoteQueryData();
+    // Read fragments
+    const quote = readFragment(useQuoteUpdateFeatureAddon_QuoteFragment, maskedQuote);
     const addedQuoteChargeId = useRef();
     function handleAddFeatureAddon() {
-        quoteChargeCreateMutation();
+        if (!token)
+            throw new Error('Token is required');
+        if (!quote)
+            throw new Error('Editing quote is required');
+        const quoteChangeId = findQuoteChangeForFeatureAddon(quote);
+        if (!quoteChangeId)
+            throw new Error('No available quote change for feature add-on');
+        console.log('quote', quote);
+        console.log('startDate', quote === null || quote === void 0 ? void 0 : quote.startDate);
+        quoteChargeCreateMutation({
+            quoteChangeId: quoteChangeId.id,
+            priceListChargeId: featureAddon.id,
+            startDate: quote === null || quote === void 0 ? void 0 : quote.startDate,
+            apiHost,
+            token,
+        });
     }
     function handleRemoveFeatureAddon() {
         if (!addedQuoteChargeId.current)
@@ -25530,30 +25695,16 @@ const useQuoteUpdateFeatureAddon = (quote, featureAddon) => {
         quoteChargeDeleteMutation({ quoteChargeId: addedQuoteChargeId.current });
     }
     const { mutate: quoteChargeCreateMutation, isPending: isCreatingFeatureAddon } = useMutation({
-        mutationFn: async () => {
-            if (!token)
-                throw new Error('Token is required');
-            if (!quote)
-                throw new Error('Editing quote is required');
-            const quoteChangeId = findQuoteChangeForFeatureAddon(quote);
-            if (!quoteChangeId)
-                throw new Error('No available quote change for feature add-on');
-            const quoteCharge = await quoteChargeCreate({
-                quoteChangeId: quoteChangeId.id,
-                priceListChargeId: featureAddon.id,
-                startDate: quote === null || quote === void 0 ? void 0 : quote.startDate,
-                apiHost,
-                token,
-            });
-            return { quoteCharge };
-        },
-        onSuccess: ({ quoteCharge }) => {
-            addedQuoteChargeId.current = quoteCharge.id;
-            queryClient.setQueryData(QueryKeyFactory$1.default.createObjectKey({
-                objectName: 'editingQuote',
-                id: quote === null || quote === void 0 ? void 0 : quote.id,
-                token,
-            }), quoteCharge.quoteChange.quote);
+        mutationFn: quoteChargeCreate,
+        onSuccess: quoteCharge => {
+            addedQuoteChargeId.current = quoteCharge === null || quoteCharge === void 0 ? void 0 : quoteCharge.id;
+            if (!(quote === null || quote === void 0 ? void 0 : quote.id)) {
+                throw new Error('Quote ID is undefined');
+            }
+            if (!(quoteCharge === null || quoteCharge === void 0 ? void 0 : quoteCharge.quoteChange.quote)) {
+                throw new Error('Quote is undefined');
+            }
+            setQuoteQueryData(quote === null || quote === void 0 ? void 0 : quote.id, quoteCharge === null || quoteCharge === void 0 ? void 0 : quoteCharge.quoteChange.quote);
         },
     });
     const { mutate: quoteChargeDeleteMutation, isPending: isDeletingFeatureAddon } = useMutation({
@@ -25563,11 +25714,13 @@ const useQuoteUpdateFeatureAddon = (quote, featureAddon) => {
         },
         onSuccess: quoteCharge => {
             addedQuoteChargeId.current = undefined;
-            queryClient.setQueryData(QueryKeyFactory$1.default.createObjectKey({
-                objectName: 'editingQuote',
-                id: quote === null || quote === void 0 ? void 0 : quote.id,
-                token,
-            }), quoteCharge === null || quoteCharge === void 0 ? void 0 : quoteCharge.quoteChange.quote);
+            if (!(quote === null || quote === void 0 ? void 0 : quote.id)) {
+                throw new Error('Quote ID is undefined');
+            }
+            if (!(quoteCharge === null || quoteCharge === void 0 ? void 0 : quoteCharge.quoteChange.quote)) {
+                throw new Error('Quote is undefined');
+            }
+            setQuoteQueryData(quote === null || quote === void 0 ? void 0 : quote.id, quoteCharge === null || quoteCharge === void 0 ? void 0 : quoteCharge.quoteChange.quote);
         },
     });
     const isPending = isCreatingFeatureAddon || isDeletingFeatureAddon;
@@ -25647,10 +25800,11 @@ const FeatureAddonRow_PriceListChargeFragment = t(`
     }
   `, [isAddonPurchased_PriceListChargeFragment, PricingTooltip_PriceListChargeFragment]);
 function FeatureAddonRow({ featureAddon: maskedFeatureAddon, priceList: maskedPriceList, }) {
+    const { quote: maskedQuote, selectedPriceList } = useContext(QuoteContext);
     // Read fragments
     const featureAddon = readFragment(FeatureAddonRow_PriceListChargeFragment, maskedFeatureAddon);
     const priceList = readFragment(FeatureAddonRow_PriceListFragment, maskedPriceList);
-    const { quote, selectedPriceList } = useContext(QuoteContext);
+    const quote = readFragment(FeatureAddonRow_QuoteFragment, maskedQuote);
     const { handleAddFeatureAddon, handleRemoveFeatureAddon, isPending, isChecked } = useQuoteUpdateFeatureAddon(quote, featureAddon);
     const { brandColor } = useBrand();
     const { upgradingSubscription } = useContext(SubscriptionsContext);
@@ -25865,107 +26019,84 @@ function AddonPlanModal({ onClose, priceList: maskedPriceList, }) {
     return (jsx(StyledModal, { open: !!priceList, onCancel: onClose, footer: null, centered: true, children: jsxs("div", { className: `bunny-w-full bunny-overflow-hidden`, children: [jsx(GridTemplateColumnsWrapper, { className: "bunny-grid bunny-w-full", everythingInPlus: false, plansToDisplay: 1, children: priceList && (jsx(PriceListCard, { isSelected: true, priceList: priceList, noBorder: true, hideButton: true, disableCurrentPlan: true })) }), hasFeatureAddons && (jsxs(Fragment, { children: [jsx(Divider, { className: "bunny-my-0" }), jsx("div", { className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-p-4", children: jsx(FeatureAddonsList, { priceList: priceList }) })] }))] }) }));
 }
-const QUOTE_CHANGE_CREATE = `
-${QUOTE_FIELDS()}
-mutation QuoteChangeCreate(
-  $quoteId: ID!
-  $priceListId: ID!
-  $parentQuoteChangeId: ID!
-) {
-  quoteChangeCreate(
-    quoteId: $quoteId
-    priceListId: $priceListId
-    parentQuoteChangeId: $parentQuoteChangeId
-  ) {
-    errors
-    quoteChange {
-      id
-      quote {
-        ...QuoteFields
+const mutation$3 = t(`
+    mutation QuoteChangeCreate($quoteId: ID!, $priceListId: ID!, $parentQuoteChangeId: ID!) {
+      quoteChangeCreate(
+        quoteId: $quoteId
+        priceListId: $priceListId
+        parentQuoteChangeId: $parentQuoteChangeId
+      ) {
+        errors
+        quoteChange {
+          id
+          quote {
+            ...QuoteContext_QuoteFragment
+          }
+        }
       }
     }
-  }
-}
-`;
+  `, [QuoteContext_QuoteFragment]);
 const quoteChangeCreate = async ({ parentQuoteChangeId, priceListId, apiHost, token, quoteId, }) => {
-    var _a;
-    const vars = {
-        parentQuoteChangeId,
-        priceListId,
-        quoteId,
-    };
-    const response = await gqlRequest({
-        query: QUOTE_CHANGE_CREATE,
-        token,
-        vars,
-        apiHost,
-    });
-    const errors = (_a = response === null || response === void 0 ? void 0 : response.quoteChangeCreate) === null || _a === void 0 ? void 0 : _a.errors;
-    if (errors)
-        throw errors;
+    const response = await execute(mutation$3, { apiHost, token }, { parentQuoteChangeId, priceListId, quoteId });
     return response.quoteChangeCreate;
 };
-const QUOTE_CHANGE_DELETE = `
-${QUOTE_FIELDS()}
-  mutation QuoteChangeDelete($id: ID!) {
-    quoteChangeDelete(id: $id) {
-      errors
-      quoteChange {
-        quote {
-          ...QuoteFields
+const mutation$2 = t(`
+    mutation QuoteChangeDelete($id: ID!) {
+      quoteChangeDelete(id: $id) {
+        errors
+        quoteChange {
+          quote {
+            ...QuoteContext_QuoteFragment
+          }
         }
       }
     }
-  }
-`;
+  `, [QuoteContext_QuoteFragment]);
 const quoteChangeDelete = async ({ id, apiHost, token, }) => {
-    var _a;
-    const vars = {
-        id,
-    };
-    const response = await gqlRequest({
-        query: QUOTE_CHANGE_DELETE,
-        token,
-        vars,
-        apiHost,
-    });
-    const errors = (_a = response === null || response === void 0 ? void 0 : response.quoteChangeDelete) === null || _a === void 0 ? void 0 : _a.errors;
-    if (errors)
-        throw errors;
+    const response = await execute(mutation$2, { apiHost, token }, { id });
     return response.quoteChangeDelete;
 };
-const useToggleAddonPlan = (quote, addonPriceListId, selectedPriceList, setIsAddonPlanLoading) => {
+const useToggleAddonPlan = (maskedQuote, addonPriceListId, selectedPriceList, setIsAddonPlanLoading) => {
     const token = useToken();
     const isAdded = useRef(false);
-    const queryClient = useQueryClient();
     const { apiHost } = useContext(BunnyContext);
+    const { setQuoteQueryData } = useSetQuoteQueryData();
+    // Read fragments
+    const quote = readFragment(useToggleAddonPlan_QuoteFragment, maskedQuote);
     const parentQuoteChange = useMemo(() => {
-        return quote === null || quote === void 0 ? void 0 : quote.quoteChanges.find(qc => qc.priceList.id === selectedPriceList.id);
+        var _a;
+        return (_a = quote === null || quote === void 0 ? void 0 : quote.quoteChanges) === null || _a === void 0 ? void 0 : _a.find(qc => { var _a; return ((_a = qc.priceList) === null || _a === void 0 ? void 0 : _a.id) === selectedPriceList.id; });
     }, [quote, selectedPriceList]);
     const { mutate: addAddonQuoteChange, isPending: isAddingAddonQuoteChange } = useMutation({
         mutationFn: quoteChangeCreate,
-        onSuccess: (quoteChangeCreate) => {
+        onSuccess: quoteChangeCreate => {
+            var _a;
             isAdded.current = true;
-            const updatedQuote = quoteChangeCreate.quoteChange.quote;
-            queryClient.setQueryData(QueryKeyFactory$1.default.createObjectKey({
-                objectName: 'editingQuote',
-                id: quote === null || quote === void 0 ? void 0 : quote.id,
-                token,
-            }), updatedQuote);
+            const updatedQuote = (_a = quoteChangeCreate === null || quoteChangeCreate === void 0 ? void 0 : quoteChangeCreate.quoteChange) === null || _a === void 0 ? void 0 : _a.quote;
+            if (!(quote === null || quote === void 0 ? void 0 : quote.id)) {
+                throw new Error('Updated quote ID not found');
+            }
+            if (!updatedQuote) {
+                throw new Error('Updated quote not found');
+            }
+            setQuoteQueryData(quote === null || quote === void 0 ? void 0 : quote.id, updatedQuote);
         },
     });
     const { mutate: deleteQuoteChange, isPending: isDeletingQuoteChange } = useMutation({
         mutationFn: quoteChangeDelete,
-        onSuccess: (quoteChangeDelete) => {
+        onSuccess: quoteChangeDelete => {
+            var _a;
             isAdded.current = false;
-            const updatedQuote = quoteChangeDelete.quoteChange.quote;
-            queryClient.setQueryData(QueryKeyFactory$1.default.createObjectKey({
-                objectName: 'editingQuote',
-                id: quote === null || quote === void 0 ? void 0 : quote.id,
-                token,
-            }), updatedQuote);
+            const updatedQuote = (_a = quoteChangeDelete === null || quoteChangeDelete === void 0 ? void 0 : quoteChangeDelete.quoteChange) === null || _a === void 0 ? void 0 : _a.quote;
+            if (!(quote === null || quote === void 0 ? void 0 : quote.id)) {
+                throw new Error('Updated quote ID not found');
+            }
+            if (!updatedQuote) {
+                throw new Error('Updated quote not found');
+            }
+            setQuoteQueryData(quote === null || quote === void 0 ? void 0 : quote.id, updatedQuote);
         },
     });
     function handleAddAddonQuoteChange() {
@@ -25975,6 +26106,9 @@ const useToggleAddonPlan = (quote, addonPriceListId, selectedPriceList, setIsAdd
         if (!(quote === null || quote === void 0 ? void 0 : quote.id)) {
             throw new Error('Quote ID not found');
         }
+        if (!parentQuoteChange.id) {
+            throw new Error('Parent quote change ID not found');
+        }
         addAddonQuoteChange({
             parentQuoteChangeId: parentQuoteChange.id,
             priceListId: addonPriceListId,
@@ -25984,9 +26118,10 @@ const useToggleAddonPlan = (quote, addonPriceListId, selectedPriceList, setIsAdd
         });
     }
     function handleDeleteQuoteChange() {
-        const quoteChange = quote === null || quote === void 0 ? void 0 : quote.quoteChanges.find(qc => qc.priceList.id === addonPriceListId);
-        if (!quoteChange) {
-            throw new Error('Quote change not found');
+        var _a;
+        const quoteChange = (_a = quote === null || quote === void 0 ? void 0 : quote.quoteChanges) === null || _a === void 0 ? void 0 : _a.find(qc => { var _a; return ((_a = qc.priceList) === null || _a === void 0 ? void 0 : _a.id) === addonPriceListId; });
+        if (!(quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.id)) {
+            throw new Error('Quote change ID not found');
         }
         deleteQuoteChange({
             id: quoteChange.id,
@@ -26020,6 +26155,7 @@ const AddonPlanRow_PriceListFragment = t(`
       plan {
         description
         name
+        pricingDescription
       }
       ...PriceListCardPriceDescription_PriceListFragment
       ...PriceListCardPrice_PriceListFragment
@@ -26033,16 +26169,18 @@ const AddonPlanRow_PriceListFragment = t(`
     PriceListCardPriceDescription_PriceListFragment,
 ]);
 function AddonPlanRow({ addonPriceList: maskedAddonPriceList, selectedPriceList, onClickSelect, isPurchased, }) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     // Read fragments
     const addonPriceList = readFragment(AddonPlanRow_PriceListFragment, maskedAddonPriceList);
-    const { quote, setIsAddonPlanLoading } = useContext(QuoteContext);
+    const { quote: maskedQuote, setIsAddonPlanLoading } = useContext(QuoteContext);
+    const quote = readFragment(AddonPlanRow_QuoteFragment, maskedQuote);
     const { shadow, isInPreviewMode } = useContext(SubscriptionsContext);
     const { isPending, addedQuoteChange, addAddonQuoteChange, deleteQuoteChange } = useToggleAddonPlan(quote, addonPriceList.id, selectedPriceList, setIsAddonPlanLoading);
     const activeCharge = (_a = getActivePlanPriceData(addonPriceList, selectedPriceList)) === null || _a === void 0 ? void 0 : _a.activeCharge;
     // Derived state
     const switchDisabled = isInPreviewMode || isPurchased;
-    return (jsxs("div", { className: `bunny-flex bunny-flex-row bunny-gap-2 bunny-justify-between bunny-items-center bunny-p-4 bunny-rounded-md bunny-bg-white ${shadow ? `shadow-${shadow}` : ''} bunny-mb-2`, children: [jsxs("div", { className: "bunny-flex bunny-flex-row bunny-gap-2 bunny-items-center", children: [jsx("div", { className: `bunny-font-medium bunny-text-center bunny-text-orange-600`, children: (_b = addonPriceList.plan) === null || _b === void 0 ? void 0 : _b.name }), jsx(PriceListCardDescription, { description: (_d = (_c = addonPriceList.plan) === null || _c === void 0 ? void 0 : _c.description) !== null && _d !== void 0 ? _d : '' }), jsx(PriceListCardPrice, { priceList: addonPriceList, className: "bunny-text-sm bunny-font-medium bunny-text-gray-900" }), jsx(PriceListCardPriceDescription, { feature: activeCharge === null || activeCharge === void 0 ? void 0 : activeCharge.feature, priceList: addonPriceList }), jsx(Button, { type: "link", onClick: onClickSelect, children: jsx(InfoCircleOutlined, {}) })] }), jsx(Switch, { id: addonPlanSwitchTestId((_f = (_e = addonPriceList.plan) === null || _e === void 0 ? void 0 : _e.name) !== null && _f !== void 0 ? _f : ''), loading: isPending && !switchDisabled, checked: addedQuoteChange || isPurchased, onChange: (checked) => {
+    const hasCustomPrice = ((_b = addonPriceList.plan) === null || _b === void 0 ? void 0 : _b.pricingDescription) != null;
+    return (jsxs("div", { className: `bunny-flex bunny-flex-row bunny-gap-2 bunny-justify-between bunny-items-center bunny-p-4 bunny-rounded-md bunny-bg-white ${shadow ? `shadow-${shadow}` : ''} bunny-mb-2`, children: [jsxs("div", { className: "bunny-flex bunny-flex-row bunny-gap-2 bunny-items-center", children: [jsx("div", { className: `bunny-font-medium bunny-text-center bunny-text-orange-600`, children: (_c = addonPriceList.plan) === null || _c === void 0 ? void 0 : _c.name }), jsx(PriceListCardDescription, { description: (_e = (_d = addonPriceList.plan) === null || _d === void 0 ? void 0 : _d.description) !== null && _e !== void 0 ? _e : '' }), !hasCustomPrice && (jsx(PriceListCardPrice, { priceList: addonPriceList, className: "bunny-text-sm bunny-font-medium bunny-text-gray-900" })), jsx(PriceListCardPriceDescription, { feature: activeCharge === null || activeCharge === void 0 ? void 0 : activeCharge.feature, priceList: addonPriceList }), jsx(Button, { type: "link", onClick: onClickSelect, children: jsx(InfoCircleOutlined, {}) })] }), jsx(Switch, { id: addonPlanSwitchTestId((_g = (_f = addonPriceList.plan) === null || _f === void 0 ? void 0 : _f.name) !== null && _g !== void 0 ? _g : ''), loading: isPending && !switchDisabled, checked: addedQuoteChange || isPurchased, onChange: (checked) => {
                     if (checked) {
                         addAddonQuoteChange();
                     }
@@ -26066,7 +26204,7 @@ const AddonPlans_PlanFragment = t(`
     }
   `, [AddonPlanModal_PriceListFragment, AddonPlanRow_PriceListFragment]);
-const query = t(`
+const query$2 = t(`
     query PriceList($id: ID!) {
       priceList(id: $id) {
         addonPlans {
@@ -26080,7 +26218,7 @@ const query = t(`
   `, [AddonPlans_PlanFragment]);
 const getAddonPlans = async ({ token, id, apiHost, }) => {
     var _a;
-    const response = await execute(query, { apiHost, token }, { id });
+    const response = await execute(query$2, { apiHost, token }, { id });
     const addonPlans = (_a = response === null || response === void 0 ? void 0 : response.priceList) === null || _a === void 0 ? void 0 : _a.addonPlans;
     // for each addon plan, filter out the price lists that are not visible
     const visibleAddonPlans = addonPlans === null || addonPlans === void 0 ? void 0 : addonPlans.map(addonPlan => {
@@ -26188,7 +26326,10 @@ const PriceListGrid = ({ availablePriceLists, priceListChangeOptions, priceListS
         onClickPriceListCard: onClickPriceListCard })) : (jsx(PriceListGridDesktop, { availablePriceLists: availablePriceLists, priceListChangeOptions: priceListChangeOptions, priceListStart: priceListStart, selectedPriceList: selectedPriceList, selectedProduct: selectedProduct, setPriceListStart: setPriceListStart, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays, selectedBillingPeriod: selectedBillingPeriod, onClickPriceListCard: onClickPriceListCard }));
 };
-const createAvailableBillingPeriods = (priceLists, selectedProduct) => {
+const createAvailableBillingPeriods = (priceLists, selectedProduct, upgradingSubscription) => {
+    if ((upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.plan.addon) === true) {
+        return [upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.periodMonths];
+    }
     return priceLists === null || priceLists === void 0 ? void 0 : priceLists.filter(priceList => priceList.product.id === (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.id)).map(priceList => priceList.periodMonths).sort((a, b) => a - b).filter((currentValue, index, array) => index === array.indexOf(currentValue));
 };
 const showInfoNotification$1 = useInfoNotification();
@@ -26202,11 +26343,18 @@ const PriceListSelector = ({ arePlanChangeOptionsLoading, areSubscriptionsLoadin
     const [selectedBillingPeriod, setSelectedBillingPeriod] = useState(null);
     const [priceListStart, setPriceListStart] = useState(0);
     // Derived state
-    const availableBillingPeriods = useMemo(() => createAvailableBillingPeriods(priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists, selectedProduct), [priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists, selectedProduct]);
+    const availableBillingPeriods = useMemo(() => createAvailableBillingPeriods(priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists, selectedProduct, upgradingSubscription), [priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists, selectedProduct]);
+    // TODO: clean up available pricelists calculation. We should calculate it once, not three times.
+    const subscriptionIsAddon = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.plan.addon) === true;
     const availablePriceLists = useMemo(() => {
         var _a;
-        return (((_a = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _a === void 0 ? void 0 : _a.filter(priceList => periodMonthsConverter(priceList.periodMonths) === selectedBillingPeriod &&
-            priceList.product.id === (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.id)).filter(priceList => priceList.plan.addon !== true)) || []);
+        const priceLists = (_a = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _a === void 0 ? void 0 : _a.filter(priceList => periodMonthsConverter(priceList.periodMonths) === selectedBillingPeriod &&
+            priceList.product.id === (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.id));
+        // If the subscription is an addon, we should only show its price lists because we don't support changing add-on plans.
+        if (subscriptionIsAddon) {
+            return ((priceLists === null || priceLists === void 0 ? void 0 : priceLists.filter(priceList => priceList.plan.id === (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.plan.id))) || []);
+        }
+        return priceLists.filter(priceList => priceList.plan.addon !== true) || [];
     }, [priceListChangeOptions, selectedBillingPeriod, selectedProduct]);
     // Handlers
     const onChangeBillingPeriod = useCallback((billingPeriod) => {
@@ -26235,7 +26383,7 @@ const PriceListSelector = ({ arePlanChangeOptionsLoading, areSubscriptionsLoadin
         }
     }, [selectedPriceList, priceListChangeOptions, upgradingSubscription]);
     const onChangeProduct = useCallback((product) => {
-        const newAvailableBillingPeriods = createAvailableBillingPeriods(priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists, product);
+        const newAvailableBillingPeriods = createAvailableBillingPeriods(priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists, product, upgradingSubscription);
         if (selectedBillingPeriod &&
             !(newAvailableBillingPeriods === null || newAvailableBillingPeriods === void 0 ? void 0 : newAvailableBillingPeriods.includes(billingPeriodConverter(selectedBillingPeriod)))) {
             onChangeBillingPeriod(periodMonthsConverter((newAvailableBillingPeriods === null || newAvailableBillingPeriods === void 0 ? void 0 : newAvailableBillingPeriods[0]) !== undefined ? newAvailableBillingPeriods[0] : 1));
@@ -26246,7 +26394,7 @@ const PriceListSelector = ({ arePlanChangeOptionsLoading, areSubscriptionsLoadin
     const initialProduct = (_a = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.products) === null || _a === void 0 ? void 0 : _a[0];
     const initialBillingPeriod = useMemo(() => {
         var _a, _b, _c;
-        const initialAvailableBillingPeriods = createAvailableBillingPeriods(priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists, initialProduct);
+        const initialAvailableBillingPeriods = createAvailableBillingPeriods(priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists, initialProduct, upgradingSubscription);
         const periodMonthsConverted = periodMonthsConverter((_b = (_a = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList) === null || _a === void 0 ? void 0 : _a.periodMonths) !== null && _b !== void 0 ? _b : null);
         if ((upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList) &&
             periodMonthsConverted &&
@@ -26902,80 +27050,177 @@ const PageSubTitle = ({ title }) => {
     return (jsx("div", { className: "bunny-shrink-0", style: { color: secondaryColor }, children: title }));
 };
-const MUTATION = `
-mutation BillingDetailsUpdate(
-    $attributes: BillingDetailsAttributes!) {
-      billingDetailsUpdate(
-        attributes: $attributes
-      ) {
-        billingDetails {
-          billingCity
-          billingContact {
-            email
+const AccountContactsFragment = t(`
+    fragment AccountContactsFragment on Contact {
+      id
+      email
+      firstName
+    }
+  `, []);
+const AddContactButton = ({ onClick }) => {
+    return (jsx("div", { className: "bunny-border-t bunny-border-gray-200 bunny-p-2", children: jsx(Button, { type: "text", className: "bunny-w-full bunny-text-left", onClick: onClick, children: "+ Add new contact" }) }));
+};
+const useSetAccountContactsQueryData = () => {
+    const token = useToken();
+    const queryClient = useQueryClient();
+    const setAccountContactsQueryData = (accountId, updater) => {
+        queryClient.setQueryData(QueryKeyFactory.accountContactsKey({ accountId, token }), updater);
+    };
+    return { setAccountContactsQueryData };
+};
+const mutation$1 = t(`
+    mutation ContactCreate($attributes: ContactAttributes!) {
+      contactCreate(attributes: $attributes) {
+        contact {
+          id
+          account {
+            contacts {
+              ...AccountContactsFragment
+            }
           }
-          billingCountry
-          billingState
-          billingStreet
-          billingZip
-          name
-          taxNumber
         }
         errors
       }
-  }
-`;
-const billingDetailsUpdate = async ({ attributes, token, apiHost, }) => {
-    var _a;
-    const vars = { attributes };
-    const response = await gqlRequest({
-        query: MUTATION,
-        token,
-        vars,
-        apiHost,
+    }
+  `, [AccountContactsFragment]);
+const contactCreate = async ({ attributes, apiHost, token }) => {
+    var _a, _b;
+    const response = await execute(mutation$1, { apiHost, token }, { attributes });
+    if ((_a = response.contactCreate) === null || _a === void 0 ? void 0 : _a.errors) {
+        throw new Error(response.contactCreate.errors[0]);
+    }
+    return (_b = response.contactCreate) === null || _b === void 0 ? void 0 : _b.contact;
+};
+const AddContactModal = ({ open, onClose, accountId, onContactCreated, }) => {
+    const [form] = Form.useForm();
+    const { apiHost } = useContext(BunnyContext);
+    const token = useToken();
+    const showErrorNotification = useErrorNotification();
+    const showSuccessNotification = useSuccessNotification();
+    const { setAccountContactsQueryData } = useSetAccountContactsQueryData();
+    const { mutate: createContact, isPending: isCreatingContact } = useMutation({
+        mutationFn: (attributes) => contactCreate({ attributes, apiHost, token }),
+        onSuccess: newContact => {
+            var _a, _b;
+            showSuccessNotification('Contact created successfully');
+            // Add the new contact to the cache
+            if (newContact && accountId) {
+                setAccountContactsQueryData(accountId, (_b = (_a = newContact === null || newContact === void 0 ? void 0 : newContact.account) === null || _a === void 0 ? void 0 : _a.contacts) !== null && _b !== void 0 ? _b : null);
+            }
+            onClose();
+            form.resetFields();
+            const newContactData = newContact ? readFragment(AccountContactsFragment, newContact) : null;
+            if (newContactData === null || newContactData === void 0 ? void 0 : newContactData.id) {
+                onContactCreated === null || onContactCreated === void 0 ? void 0 : onContactCreated(newContactData.id);
+            }
+        },
     });
-    const errors = (_a = response === null || response === void 0 ? void 0 : response.billingDetailsUpdate) === null || _a === void 0 ? void 0 : _a.errors;
-    if (errors)
-        throw errors;
-    return response.billingDetailsUpdate;
+    const handleAddContact = () => {
+        if (!accountId) {
+            showErrorNotification('Account ID is required to create a contact');
+            return;
+        }
+        form.validateFields().then(values => {
+            createContact({
+                email: values.email || null,
+                firstName: values.firstName || null,
+                lastName: values.lastName || null,
+                accountId: accountId,
+                portalAccess: true,
+            });
+        });
+    };
+    return (jsx(Modal, { title: "Add new contact", open: open, onCancel: () => {
+            onClose();
+            form.resetFields();
+        }, footer: [
+            jsx(Button, { onClick: () => {
+                    onClose();
+                    form.resetFields();
+                }, children: "Cancel" }, "cancel"),
+            jsx(Button, { type: "primary", loading: isCreatingContact, onClick: handleAddContact, children: "Add contact" }, "submit"),
+        ], children: jsxs(Form, { form: form, layout: "vertical", className: "bunny-flex bunny-flex-col bunny-gap-2", children: [jsx(Form.Item, { label: "First name", name: "firstName", rules: [{ required: false }], children: jsx(Input, { placeholder: "Enter first name" }) }), jsx(Form.Item, { label: "Last name", name: "lastName", rules: [{ required: false }], children: jsx(Input, { placeholder: "Enter last name" }) }), jsx(Form.Item, { label: "Email", name: "email", rules: [
+                        { required: true, message: 'Email is required' },
+                        { type: 'email', message: 'Please enter a valid email' },
+                    ], children: jsx(Input, { placeholder: "Enter email" }) })] }) }));
 };
-const billingDetailsQuery = () => `
-query BillingDetails {
-  billingDetails {
-    billingCity
-    billingContact {
-      email
-    }
-    billingCountry
-    billingState
-    billingStreet
-    billingZip
-    name
-    taxNumber
-    currency {
+const BillingDetailsSection_AccountFragment = t(`
+    fragment BillingDetailsSection_AccountFragment on Account {
       id
+      name
+      billingStreet
+      billingCity
+      billingState
+      billingZip
+      billingCountry
+      taxNumber
+      billingContactId
+      secondaryBillingContactIds
+      billingContact {
+        email
+        firstName
+      }
     }
-  }
-}`;
-const getBillingDetails = async ({ token, apiHost }) => {
+  `, []);
+const mutation = t(`
+    mutation AccountUpdate($id: ID!, $attributes: AccountAttributes!) {
+      accountUpdate(id: $id, attributes: $attributes) {
+        account {
+          ...BillingDetailsSection_AccountFragment
+        }
+        errors
+      }
+    }
+  `, [BillingDetailsSection_AccountFragment]);
+const accountUpdate = async ({ accountId, attributes, apiHost, token, }) => {
     var _a;
-    const response = await gqlRequest({
-        query: billingDetailsQuery(),
-        token,
-        apiHost,
-    });
-    if (response === null || response === void 0 ? void 0 : response.errors) {
-        throw new Error((_a = response === null || response === void 0 ? void 0 : response.errors[0]) === null || _a === void 0 ? void 0 : _a.message);
+    const response = await execute(mutation, { apiHost, token }, { id: accountId, attributes });
+    return (_a = response.accountUpdate) === null || _a === void 0 ? void 0 : _a.account;
+};
+const query$1 = t(`
+    query GetAccount($id: ID!) {
+      account(id: $id) {
+        ...BillingDetailsSection_AccountFragment
+      }
+    }
+  `, [BillingDetailsSection_AccountFragment]);
+const getAccount = async ({ accountId, apiHost, token, }) => {
+    const response = await execute(query$1, { apiHost, token }, { id: accountId });
+    return response.account;
+};
+const query = t(`
+    query GetAccountContacts($accountId: ID!) {
+      account(id: $accountId) {
+        id
+        contacts {
+          ...AccountContactsFragment
+        }
+      }
     }
-    return response === null || response === void 0 ? void 0 : response.billingDetails;
+  `, [AccountContactsFragment]);
+const getAccountContacts = async ({ accountId, apiHost, token, }) => {
+    var _a;
+    const response = await execute(query, { apiHost, token }, { accountId });
+    return (_a = response.account) === null || _a === void 0 ? void 0 : _a.contacts;
 };
 const { Text } = Typography;
 function BillingDetailsSection({ hidePaymentMethodForm, countryListFilter, }) {
+    var _a, _b, _c;
     // State
     const [isFormEdited, setIsFormEdited] = useState(false);
     const [form] = Form.useForm();
     const values = Form.useWatch([], form);
+    const [isAddContactModalOpen, setIsAddContactModalOpen] = useState(false);
+    const [contactFieldType, setContactFieldType] = useState(null);
     // Context
     const { apiHost } = useContext(BunnyContext);
     const token = useToken();
@@ -26984,14 +27229,37 @@ function BillingDetailsSection({ hidePaymentMethodForm, countryListFilter, }) {
     const queryClient = useQueryClient();
     const showErrorNotification = useErrorNotification();
     const showSuccessNotification = useSuccessNotification();
+    const { currentUser } = useCurrentUserData(token);
+    const accountId = (_a = currentUser === null || currentUser === void 0 ? void 0 : currentUser.account) === null || _a === void 0 ? void 0 : _a.id;
     // Queries
-    const { data: billingDetails, isLoading: isLoadingBillingDetails } = useQuery({
-        queryKey: QueryKeyFactory$1.default.billingDetailsKey({ token }),
-        queryFn: () => getBillingDetails({ token, apiHost }),
+    const { data: maskedAccount, isLoading: isLoadingAccount } = useQuery({
+        queryKey: QueryKeyFactory.accountBillingDetailsKey({ accountId, token }),
+        queryFn: () => {
+            if (!accountId) {
+                throw new Error('Account ID is required');
+            }
+            return getAccount({ accountId, apiHost, token });
+        },
+        enabled: !!accountId,
+    });
+    const account = readFragment(BillingDetailsSection_AccountFragment, maskedAccount);
+    const { data: contacts, isLoading: isLoadingContacts } = useQuery({
+        queryKey: QueryKeyFactory.accountContactsKey({ accountId, token }),
+        queryFn: () => {
+            if (!accountId) {
+                throw new Error('Account ID is required');
+            }
+            return getAccountContacts({ accountId, apiHost, token });
+        },
+        enabled: !!accountId,
     });
-    const { mutate: updateBillingDetails, isPending: isUpdatingBillingDetails } = useMutation({
+    const { mutate: updateAccount, isPending: isUpdatingAccount } = useMutation({
         mutationFn: async (changedFormData) => {
-            const updatedBillingDetails = await billingDetailsUpdate({
+            if (!accountId) {
+                throw new Error('Account ID is required');
+            }
+            const updatedAccount = await accountUpdate({
+                accountId,
                 attributes: {
                     name: changedFormData.name,
                     billingStreet: changedFormData.billingStreet,
@@ -26999,77 +27267,92 @@ function BillingDetailsSection({ hidePaymentMethodForm, countryListFilter, }) {
                     billingZip: changedFormData.billingZip,
                     billingState: changedFormData.billingState,
                     billingCountry: changedFormData.billingCountry,
-                    billingContactEmail: changedFormData.billingContactEmail,
                     taxNumber: changedFormData.taxNumber,
+                    billingContactId: changedFormData.billingContactId || null,
+                    secondaryBillingContactIds: Array.isArray(changedFormData.secondaryBillingContactIds)
+                        ? changedFormData.secondaryBillingContactIds
+                        : null,
                 },
                 token,
                 apiHost,
             });
-            queryClient.setQueryData(QueryKeyFactory$1.default.billingDetailsKey({ token }), (old) => {
-                return {
-                    ...old,
-                    ...updatedBillingDetails.billingDetails,
-                };
-            });
-            return updatedBillingDetails;
+            queryClient.setQueryData(QueryKeyFactory.accountBillingDetailsKey({ accountId, token }), updatedAccount);
+            return updatedAccount;
         },
         onSuccess: () => {
             showSuccessNotification('Your account details have been saved');
             queryClient.invalidateQueries({
-                queryKey: QueryKeyFactory$1.default.taxationRequiredAccountFieldsKey({
+                queryKey: QueryKeyFactory.taxationRequiredAccountFieldsKey({
                     token,
                 }),
             });
         },
     });
-    // Set form values when billing details are loaded
+    // Set form values when account is loaded
     useEffect(() => {
-        var _a;
-        if (billingDetails) {
+        if (account) {
             form.setFieldsValue({
-                billingStreet: billingDetails.billingStreet,
-                billingCity: billingDetails.billingCity,
-                billingZip: billingDetails.billingZip,
-                billingState: billingDetails.billingState,
-                billingCountry: billingDetails.billingCountry,
-                billingContactEmail: (_a = billingDetails.billingContact) === null || _a === void 0 ? void 0 : _a.email,
-                taxNumber: billingDetails.taxNumber,
+                billingStreet: account.billingStreet,
+                billingCity: account.billingCity,
+                billingZip: account.billingZip,
+                billingState: account.billingState,
+                billingCountry: account.billingCountry,
+                billingContactId: account.billingContactId,
+                secondaryBillingContactIds: account.secondaryBillingContactIds,
+                taxNumber: account.taxNumber,
             });
         }
-    }, [billingDetails]);
+    }, [account]);
     useEffect(() => {
         form.validateFields({ validateOnly: true });
         const isFormEdited = () => {
-            var _a;
-            if (!billingDetails)
+            if (!account)
                 return false;
             const currentValues = form.getFieldsValue();
             const accountValues = {
-                billingStreet: billingDetails.billingStreet,
-                billingCity: billingDetails.billingCity,
-                billingZip: billingDetails.billingZip,
-                billingState: billingDetails.billingState,
-                billingCountry: billingDetails.billingCountry,
-                billingContactEmail: (_a = billingDetails.billingContact) === null || _a === void 0 ? void 0 : _a.email,
-                taxNumber: billingDetails.taxNumber,
+                billingStreet: account.billingStreet,
+                billingCity: account.billingCity,
+                billingZip: account.billingZip,
+                billingState: account.billingState,
+                billingCountry: account.billingCountry,
+                billingContactId: account.billingContactId,
+                secondaryBillingContactIds: account.secondaryBillingContactIds,
+                taxNumber: account.taxNumber,
             };
-            return Object.keys(currentValues).some(key => {
+            return Object.keys(accountValues).some(key => {
                 const value = accountValues[key];
-                return currentValues[key] !== value;
+                const currentValue = currentValues[key];
+                // Handle array comparison for secondaryBillingContactIds
+                if (Array.isArray(value) && Array.isArray(currentValue)) {
+                    return JSON.stringify(value === null || value === void 0 ? void 0 : value.sort()) !== JSON.stringify(currentValue === null || currentValue === void 0 ? void 0 : currentValue.sort());
+                }
+                return currentValue !== value;
             });
         };
         setIsFormEdited(isFormEdited());
-    }, [form, values, billingDetails]);
+    }, [form, values, account]);
     // Validate form fields when isFormEdited changes
     useEffect(() => {
         const validateOnly = isFormEdited ? false : true;
         form.validateFields({ validateOnly: validateOnly });
     }, [isFormEdited]);
+    const handleContactCreated = (contactId) => {
+        if (contactFieldType === 'primary') {
+            form.setFieldValue('billingContactId', contactId);
+        }
+        else if (contactFieldType === 'secondary') {
+            const currentSecondaryContacts = form.getFieldValue('secondaryBillingContactIds') || [];
+            if (!currentSecondaryContacts.includes(contactId)) {
+                form.setFieldValue('secondaryBillingContactIds', [...currentSecondaryContacts, contactId]);
+            }
+        }
+        setContactFieldType(null);
+    };
     const saveBillingDetails = async () => {
         form.validateFields({ validateOnly: false }).then(async () => {
             try {
                 await form.validateFields();
-                updateBillingDetails(form.getFieldsValue());
+                updateAccount(form.getFieldsValue());
             }
             catch (error) {
                 if (error instanceof Error) {
@@ -27087,21 +27370,38 @@ function BillingDetailsSection({ hidePaymentMethodForm, countryListFilter, }) {
     const filteredCountryList = useMemo(() => {
         return countryListFilter ? Lists.COUNTRY_LIST.filter(countryListFilter) : Lists.COUNTRY_LIST;
     }, [countryListFilter]);
-    return (jsx("div", { className: `${isMobile || hidePaymentMethodForm ? 'bunny-w-full' : 'bunny-w-1/2'}`, children: jsxs("div", { className: "bunny-px-4", children: [jsxs(Skeleton, { loading: isLoadingBillingDetails, children: [jsx("div", { className: "bunny-mb-2 bunny-pl-1", children: jsx(Text, { className: "bunny-font-medium bunny-text-lg", children: (billingDetails === null || billingDetails === void 0 ? void 0 : billingDetails.name) || 'No company name' }) }), jsxs(Form, { className: "bunny-flex bunny-flex-col bunny-gap-2", form: form, layout: "vertical", disabled: isUpdatingBillingDetails, autoComplete: "off", requiredMark: false, children: [jsx(Form.Item, { label: "Street address", name: "billingStreet", rules: [{ required: true, message: 'Street address is required' }], children: jsx(Input, {}) }), jsxs("div", { className: "bunny-flex bunny-gap-4", children: [jsx(Form.Item, { label: "City", name: "billingCity", rules: [{ required: true, message: 'City is required' }], className: "bunny-flex-1", children: jsx(Input, {}) }), jsx(Form.Item, { label: "Zipcode", name: "billingZip", rules: [{ required: true, message: 'Zipcode is required' }], className: "bunny-flex-1", children: jsx(Input, {}) })] }), jsxs("div", { className: `bunny-flex ${isMobile ? 'bunny-flex-row bunny-pb-2' : 'bunny-flex-row'} bunny-gap-4`, children: [jsx("div", { className: "bunny-flex-1 bunny-w-1/2", children: jsx(Form.Item, { label: "State", name: "billingState", rules: [
-                                                    {
-                                                        required: false,
-                                                    },
-                                                ], children: jsx(Input, {}) }) }), jsx("div", { className: "bunny-flex-1 bunny-w-1/2", children: jsx(Form.Item, { label: "Country", name: "billingCountry", rules: [{ required: true, message: 'Country is required' }], children: jsx(Select, { className: "bunny-w-full", options: filteredCountryList, placeholder: "Select a country", popupMatchSelectWidth: false, showSearch: true, filterOption: (input, option) => {
-                                                        var _a, _b;
-                                                        return ((_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : '').toLowerCase().includes(input.toLowerCase()) ||
-                                                            ((_b = option === null || option === void 0 ? void 0 : option.value) !== null && _b !== void 0 ? _b : '').toLowerCase().includes(input.toLowerCase());
-                                                    } }) }) })] }), jsx(Form.Item, { label: "Email", name: "billingContactEmail", rules: [
-                                        {
-                                            required: true,
-                                            message: 'Email is required',
-                                            type: 'email',
-                                        },
-                                    ], children: jsx(Input, {}) }), jsx(Form.Item, { label: "Tax ID", name: "taxNumber", tooltip: "Tax ID will be printed on quotes and invoices below the account's address", rules: [{ required: false }], children: jsx(Input, {}) })] })] }), jsx(Button, { disabled: !isFormEdited || isUpdatingBillingDetails, className: "bunny-w-full bunny-mt-4", type: "primary", onClick: saveBillingDetails, children: "Save" })] }) }));
+    const isLoading = isLoadingAccount || isLoadingContacts;
+    return (jsxs("div", { className: `${isMobile || hidePaymentMethodForm ? 'bunny-w-full' : 'bunny-w-1/2'}`, children: [jsxs("div", { className: "bunny-px-4", children: [jsxs(Skeleton, { loading: isLoading || account === undefined, children: [jsx("div", { className: "bunny-mb-2 bunny-pl-1", children: jsx(Text, { className: "bunny-font-medium bunny-text-lg", children: (account === null || account === void 0 ? void 0 : account.name) || 'No company name' }) }), jsxs(Form, { className: "bunny-flex bunny-flex-col bunny-gap-2", form: form, layout: "vertical", disabled: isUpdatingAccount, autoComplete: "off", requiredMark: false, children: [jsx(Form.Item, { label: "Street address", name: "billingStreet", rules: [{ required: true, message: 'Street address is required' }], children: jsx(Input, {}) }), jsxs("div", { className: "bunny-flex bunny-gap-4", children: [jsx(Form.Item, { label: "City", name: "billingCity", rules: [{ required: true, message: 'City is required' }], className: "bunny-flex-1", children: jsx(Input, {}) }), jsx(Form.Item, { label: "Zipcode", name: "billingZip", rules: [{ required: true, message: 'Zipcode is required' }], className: "bunny-flex-1", children: jsx(Input, {}) })] }), jsxs("div", { className: `bunny-flex ${isMobile ? 'bunny-flex-row bunny-pb-2' : 'bunny-flex-row'} bunny-gap-4`, children: [jsx("div", { className: "bunny-flex-1 bunny-w-1/2", children: jsx(Form.Item, { label: "State", name: "billingState", rules: [
+                                                        {
+                                                            required: false,
+                                                        },
+                                                    ], children: jsx(Input, {}) }) }), jsx("div", { className: "bunny-flex-1 bunny-w-1/2", children: jsx(Form.Item, { label: "Country", name: "billingCountry", rules: [{ required: true, message: 'Country is required' }], children: jsx(Select, { className: "bunny-w-full", options: filteredCountryList, placeholder: "Select a country", popupMatchSelectWidth: false, showSearch: true, filterOption: (input, option) => {
+                                                            var _a, _b;
+                                                            return ((_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : '').toLowerCase().includes(input.toLowerCase()) ||
+                                                                ((_b = option === null || option === void 0 ? void 0 : option.value) !== null && _b !== void 0 ? _b : '').toLowerCase().includes(input.toLowerCase());
+                                                        } }) }) })] }), jsx(Form.Item, { label: "Primary billing contact", name: "billingContactId", rules: [{ required: true, message: 'Primary billing contact is required' }], children: jsx(Select, { className: "bunny-w-full", placeholder: "Select a contact", options: (_b = contacts === null || contacts === void 0 ? void 0 : contacts.map(contact => {
+                                                const contactData = readFragment(AccountContactsFragment, contact);
+                                                return {
+                                                    label: (contactData === null || contactData === void 0 ? void 0 : contactData.firstName)
+                                                        ? `${contactData.firstName}`
+                                                        : contactData === null || contactData === void 0 ? void 0 : contactData.email,
+                                                    value: contactData === null || contactData === void 0 ? void 0 : contactData.id,
+                                                };
+                                            })) !== null && _b !== void 0 ? _b : [], popupRender: menu => (jsxs(Fragment, { children: [menu, jsx(AddContactButton, { onClick: () => setIsAddContactModalOpen(true) })] })) }) }), jsx(Form.Item, { label: "Secondary billing contacts", name: "secondaryBillingContactIds", children: jsx(Select, { className: "bunny-w-full", mode: "multiple", maxTagCount: "responsive", placeholder: "Select contacts", options: (_c = contacts === null || contacts === void 0 ? void 0 : contacts.map(contact => {
+                                                const contactData = readFragment(AccountContactsFragment, contact);
+                                                return {
+                                                    label: (contactData === null || contactData === void 0 ? void 0 : contactData.firstName)
+                                                        ? `${contactData.firstName}`
+                                                        : contactData === null || contactData === void 0 ? void 0 : contactData.email,
+                                                    value: contactData === null || contactData === void 0 ? void 0 : contactData.id,
+                                                };
+                                            })) !== null && _c !== void 0 ? _c : [], popupRender: menu => (jsxs(Fragment, { children: [menu, jsx(AddContactButton, { onClick: () => {
+                                                            setContactFieldType('secondary');
+                                                            setIsAddContactModalOpen(true);
+                                                        } })] })) }) }), jsx(Form.Item, { label: "Tax ID", name: "taxNumber", tooltip: "Tax ID will be printed on quotes and invoices below the account's address", rules: [{ required: false }], children: jsx(Input, {}) })] })] }), jsx(Button, { disabled: !isFormEdited || isUpdatingAccount || isLoading, className: "bunny-w-full bunny-mt-4", type: "primary", onClick: saveBillingDetails, children: "Save" })] }), jsx(AddContactModal, { open: isAddContactModalOpen, onClose: () => {
+                    setIsAddContactModalOpen(false);
+                    setContactFieldType(null);
+                }, accountId: accountId, onContactCreated: handleContactCreated })] }));
 }
 const BillingDetails = ({ className, countryListFilter, hideBillingDetailsForm = false, hidePaymentMethodForm = false, isCardEnabled = true, isUpgradeFromTrial = false, shadow = 'shadow-md', onSavePaymentMethod, }) => {