npm - @bunnyapp/components - Versions diffs - 1.0.60 → 1.0.62-beta.1 - Mend

@bunnyapp/components 1.0.60 → 1.0.62-beta.1

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 (112) hide show

package/dist/cjs/index.js CHANGED Viewed

@@ -73,7 +73,7 @@ function styleInject(css, ref) {
   }
 }
-var css_248z = ".ant-popover {\n  z-index: 1050;\n}\n.ant-popover-inner-content {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  max-width: 300px;\n}\n.ant-popover-message-title {\n  padding: 0;\n  text-align: center;\n  font-size: 1rem;\n}\n.ant-popover-buttons {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.ant-btn-link:disabled {\n  color: #717d94 !important;\n}\n.ant-btn-link:disabled:hover {\n  background-color: transparent !important;\n}\n.ant-notification {\n  width: min-content;\n}\n.ant-notification-topRight {\n  right: 0 !important;\n  left: 0 !important;\n  margin-left: auto !important;\n  margin-right: auto !important;\n}\n.ant-notification-notice-wrapper {\n  width: 350px !important;\n  overflow: hidden !important;\n}\n.ant-notification-notice {\n  padding: 16px !important;\n  width: 350px !important;\n  display: flex !important;\n  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.08), 0px 1px 18px rgba(0, 0, 0, 0.08), 0px 3px 5px rgba(0, 0, 0, 0.16) !important;\n}\n.ant-notification-notice-description {\n  padding: 0 14px 0 0 !important;\n  color: #232323 !important;\n  font-size: 14px !important;\n  word-break: break-all !important;\n  overflow-wrap: break-word !important;\n}\n.ant-notification-notice-success {\n  background-color: #edfffa !important;\n}\n.ant-notification-notice-error {\n  background-color: #fff8f4 !important;\n}\n.ant-notification-notice-error .ant-notification-notice-message {\n  color: #ff6e1c !important;\n  font-weight: 500;\n}\n.ant-notification-notice-error .ant-notification-notice-icon {\n  color: #ff6e1c;\n}\n.ant-notification-notice-success .ant-notification-notice-message {\n  color: #00b76a !important;\n  font-weight: 500;\n}\n.ant-notification-notice-success .ant-notification-notice-icon {\n  color: #00b76a !important;\n}\n.ant-notification-notice-message {\n  margin-bottom: 0 !important;\n}\n.ant-notification-notice-close {\n  top: 16px !important;\n  right: 16px !important;\n}\n.ant-menu-submenu-popup > .ant-menu .ant-menu-item {\n  display: flex !important;\n  align-items: center !important;\n}\n.ant-menu-submenu::after {\n  display: none !important;\n}\n:root {\n  --row-background: #ffffff;\n  --row-background-alternate: rgba(100, 116, 139, 0.04);\n  --row-background-dark: #121212;\n  --row-background-alternate-dark: #1e1e1e;\n  --bunny-blue-500: #3b82f6;\n  --bunny-blue-200: #bfdbfe;\n  --bunny-green-600: #059669;\n  --bunny-green-200: #a7f3d0;\n  --bunny-red-500: #ef4444;\n  --bunny-red-200: #fecaca;\n  --bunny-orange-500: #f97316;\n  --bunny-orange-200: #fed7aa;\n  --bunny-yellow-500: #f59e0b;\n  --bunny-yellow-200: #fde68a;\n  --bunny-purple-500: #8b5cf6;\n  --bunny-purple-200: #ddd6fe;\n  --bunny-black: #000000;\n}\n.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-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-my-12 {\n  margin-top: 3rem;\n  margin-bottom: 3rem;\n}\n.bunny-my-2 {\n  margin-top: 0.5rem;\n  margin-bottom: 0.5rem;\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-4 {\n  margin-bottom: 1rem;\n}\n.bunny-mb-8 {\n  margin-bottom: 2rem;\n}\n.bunny-mt-2 {\n  margin-top: 0.5rem;\n}\n.bunny-mt-4 {\n  margin-top: 1rem;\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-5 {\n  height: 1.25rem;\n}\n.bunny-h-8 {\n  height: 2rem;\n}\n.bunny-h-full {\n  height: 100%;\n}\n.bunny-w-1\\/2 {\n  width: 50%;\n}\n.bunny-w-full {\n  width: 100%;\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-2 {\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.bunny-flex-row {\n  flex-direction: row;\n}\n.bunny-flex-col {\n  flex-direction: column;\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-visible {\n  overflow: visible;\n}\n.bunny-whitespace-nowrap {\n  white-space: 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-slate-50 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));\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-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-4 {\n  padding-left: 1rem;\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-6 {\n  padding-top: 1.5rem;\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-2xl {\n  font-size: 1.5rem;\n  line-height: 2rem;\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-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-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-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-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-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, -webkit-backdrop-filter;\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.transition-\\[margin\\] {\n  transition-property: margin;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.transition-all {\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.duration-200 {\n  transition-duration: 200ms;\n}\n.duration-300 {\n  transition-duration: 300ms;\n}\n.hover\\:bg-gray-100:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-slate-100:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-slate-200:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-gray-200:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));\n}\n@media (min-width: 768px) {\n  .sm\\:flex {\n    display: flex;\n  }\n  .sm\\:hidden {\n    display: none;\n  }\n}\n.bunny-invoice-container {\n  padding: 0;\n  box-sizing: border-box !important;\n  line-height: 1.15;\n}\n@media only screen and (max-width: 768px) {\n  select,\n  textarea,\n  input[type='text'],\n  input[type='password'],\n  input[type='datetime'],\n  input[type='datetime-local'],\n  input[type='date'],\n  input[type='month'],\n  input[type='time'],\n  input[type='week'],\n  input[type='number'],\n  input[type='email'],\n  input[type='url'],\n  input[type='search'],\n  input[type='tel'],\n  input[type='color'] {\n    font-size: 16px !important;\n  }\n}\n@keyframes App-logo-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n";
+var css_248z = ".ant-popover {\n  z-index: 1050;\n}\n.ant-popover-inner-content {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  max-width: 300px;\n}\n.ant-popover-message-title {\n  padding: 0;\n  text-align: center;\n  font-size: 1rem;\n}\n.ant-popover-buttons {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.ant-btn-link:disabled {\n  color: #717d94 !important;\n}\n.ant-btn-link:disabled:hover {\n  background-color: transparent !important;\n}\n.ant-notification {\n  width: min-content;\n}\n.ant-notification-topRight {\n  right: 0 !important;\n  left: 0 !important;\n  margin-left: auto !important;\n  margin-right: auto !important;\n}\n.ant-notification-notice-wrapper {\n  width: 350px !important;\n  overflow: hidden !important;\n}\n.ant-notification-notice {\n  padding: 16px !important;\n  width: 350px !important;\n  display: flex !important;\n  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.08), 0px 1px 18px rgba(0, 0, 0, 0.08), 0px 3px 5px rgba(0, 0, 0, 0.16) !important;\n}\n.ant-notification-notice-description {\n  padding: 0 14px 0 0 !important;\n  color: #232323 !important;\n  font-size: 14px !important;\n  word-break: break-all !important;\n  overflow-wrap: break-word !important;\n}\n.ant-notification-notice-success {\n  background-color: #edfffa !important;\n}\n.ant-notification-notice-error {\n  background-color: #fff8f4 !important;\n}\n.ant-notification-notice-error .ant-notification-notice-message {\n  color: #ff6e1c !important;\n  font-weight: 500;\n}\n.ant-notification-notice-error .ant-notification-notice-icon {\n  color: #ff6e1c;\n}\n.ant-notification-notice-success .ant-notification-notice-message {\n  color: #00b76a !important;\n  font-weight: 500;\n}\n.ant-notification-notice-success .ant-notification-notice-icon {\n  color: #00b76a !important;\n}\n.ant-notification-notice-message {\n  margin-bottom: 0 !important;\n}\n.ant-notification-notice-close {\n  top: 16px !important;\n  right: 16px !important;\n}\n.ant-menu-submenu-popup > .ant-menu .ant-menu-item {\n  display: flex !important;\n  align-items: center !important;\n}\n.ant-menu-submenu::after {\n  display: none !important;\n}\n:root {\n  --row-background: #ffffff;\n  --row-background-alternate: rgba(100, 116, 139, 0.04);\n  --row-background-dark: #121212;\n  --row-background-alternate-dark: #1e1e1e;\n  --bunny-blue-500: #3b82f6;\n  --bunny-blue-200: #bfdbfe;\n  --bunny-green-600: #059669;\n  --bunny-green-200: #a7f3d0;\n  --bunny-red-500: #ef4444;\n  --bunny-red-200: #fecaca;\n  --bunny-orange-500: #f97316;\n  --bunny-orange-200: #fed7aa;\n  --bunny-yellow-500: #f59e0b;\n  --bunny-yellow-200: #fde68a;\n  --bunny-purple-500: #8b5cf6;\n  --bunny-purple-200: #ddd6fe;\n  --bunny-black: #000000;\n}\n.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-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-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-4 {\n  margin-bottom: 1rem;\n}\n.bunny-mb-8 {\n  margin-bottom: 2rem;\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-flex {\n  display: flex;\n}\n.bunny-grid {\n  display: grid;\n}\n.bunny-contents {\n  display: contents;\n}\n.bunny-h-1\\/2 {\n  height: 50%;\n}\n.bunny-h-5 {\n  height: 1.25rem;\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-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-2 {\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.bunny-flex-row {\n  flex-direction: row;\n}\n.bunny-flex-col {\n  flex-direction: column;\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-visible {\n  overflow: visible;\n}\n.bunny-whitespace-nowrap {\n  white-space: 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-slate-50 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));\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-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-4 {\n  padding-left: 1rem;\n}\n.bunny-pr-4 {\n  padding-right: 1rem;\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-6 {\n  padding-top: 1.5rem;\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-2xl {\n  font-size: 1.5rem;\n  line-height: 2rem;\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-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-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-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-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-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-0 {\n  margin-top: 0px;\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.mr-4 {\n  margin-right: 1rem;\n}\n.mb-0 {\n  margin-bottom: 0px;\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.whitespace-pre-wrap {\n  white-space: pre-wrap;\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.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-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.bg-red-400 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(248 113 113 / 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-500 {\n  --tw-text-opacity: 1;\n  color: rgb(107 114 128 / var(--tw-text-opacity, 1));\n}\n.text-gray-600 {\n  --tw-text-opacity: 1;\n  color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.text-gray-900 {\n  --tw-text-opacity: 1;\n  color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.text-green-600 {\n  --tw-text-opacity: 1;\n  color: rgb(22 163 74 / var(--tw-text-opacity, 1));\n}\n.text-orange-500 {\n  --tw-text-opacity: 1;\n  color: rgb(249 115 22 / var(--tw-text-opacity, 1));\n}\n.text-orange-600 {\n  --tw-text-opacity: 1;\n  color: rgb(234 88 12 / var(--tw-text-opacity, 1));\n}\n.text-red-500 {\n  --tw-text-opacity: 1;\n  color: rgb(239 68 68 / var(--tw-text-opacity, 1));\n}\n.text-slate-400 {\n  --tw-text-opacity: 1;\n  color: rgb(148 163 184 / var(--tw-text-opacity, 1));\n}\n.text-slate-500 {\n  --tw-text-opacity: 1;\n  color: rgb(100 116 139 / var(--tw-text-opacity, 1));\n}\n.text-slate-600 {\n  --tw-text-opacity: 1;\n  color: rgb(71 85 105 / var(--tw-text-opacity, 1));\n}\n.text-white {\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.text-yellow-500 {\n  --tw-text-opacity: 1;\n  color: rgb(234 179 8 / var(--tw-text-opacity, 1));\n}\n.underline {\n  text-decoration-line: underline;\n}\n.shadow {\n  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-lg {\n  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);\n  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-md {\n  --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-none {\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-sm {\n  --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-xl {\n  --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.transition {\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.transition-\\[margin\\] {\n  transition-property: margin;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.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@media (min-width: 768px) {\n  .sm\\:flex {\n    display: flex;\n  }\n  .sm\\:hidden {\n    display: none;\n  }\n}\n.bunny-invoice-container {\n  padding: 0;\n  box-sizing: border-box !important;\n  line-height: 1.15;\n}\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);
 /******************************************************************************
@@ -170,15 +170,67 @@ var BrandContext = react.createContext({
     topNavImageUrl: common.DEFAULT_TOP_NAV_IMAGE_URL,
 });
-var MUTATION$9 = "\n  query entityBranding {\n    entityBranding {\n      accentColor\n      brandColor\n      topNavImageUrl\n    }\n  }\n";
+// This will be replaced at build time by rollup-plugin-replace
+var PACKAGE_VERSION = '1.0.62-beta.1';
+var createRequestHeaders = function (token) {
+    var _a;
+    var bearerToken = token ? "Bearer ".concat(token) : null;
+    var headers = (_a = {
+            'Content-type': 'application/json; charset=utf-8'
+        },
+        _a[common.X_BUNNY_COMPONENTS_VERSION_HEADER_NAME] = PACKAGE_VERSION,
+        _a);
+    if (bearerToken) {
+        headers['Authorization'] = bearerToken;
+    }
+    return headers;
+};
+var getGraphQLBaseURL = function (apiHost) {
+    return "".concat(apiHost, "/graphql");
+};
+var useGraphQLRequest = function () { return function (query, apiHost, token, variables) { return __awaiter(void 0, void 0, void 0, function () {
+    var error_1;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                _a.trys.push([0, 2, , 3]);
+                return [4 /*yield*/, request__default["default"](getGraphQLBaseURL(apiHost), query, variables, createRequestHeaders(token))];
+            case 1: return [2 /*return*/, _a.sent()];
+            case 2:
+                error_1 = _a.sent();
+                throw error_1;
+            case 3: return [2 /*return*/];
+        }
+    });
+}); }; };
+var gqlRequest = function (_a) {
+    var query = _a.query, apiHost = _a.apiHost, token = _a.token, vars = _a.vars, isInPreviewMode = _a.isInPreviewMode;
+    return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0: return [4 /*yield*/, common.gqlRequest({
+                        query: query,
+                        apiHost: apiHost,
+                        token: token,
+                        vars: vars,
+                        componentsVersion: PACKAGE_VERSION,
+                        isInPreviewMode: isInPreviewMode,
+                    })];
+                case 1: return [2 /*return*/, _b.sent()];
+            }
+        });
+    });
+};
+var MUTATION$a = "\n  query entityBranding {\n    entityBranding {\n      accentColor\n      brandColor\n      topNavImageUrl\n    }\n  }\n";
 var getBranding = function (_a) {
     var token = _a.token, apiHost = _a.apiHost;
     return __awaiter(void 0, void 0, void 0, function () {
         var response;
         return __generator(this, function (_b) {
             switch (_b.label) {
-                case 0: return [4 /*yield*/, common.gqlRequest({
-                        query: MUTATION$9,
+                case 0: return [4 /*yield*/, gqlRequest({
+                        query: MUTATION$a,
                         token: token,
                         apiHost: apiHost,
                     })];
@@ -221,7 +273,7 @@ function BunnyProvider(_a) {
             apiHost: apiHost,
             token: token,
             onTokenExpired: onTokenExpired,
-        } }, { children: jsxRuntime.jsx(reactQuery.QueryClientProvider, __assign({ client: queryClient || extraQueryClient }, { children: jsxRuntime.jsx(ContextualWrapper, __assign({ darkMode: darkMode, configProviderProps: configProviderProps }, { children: children })) })) })));
+        } }, { children: jsxRuntime.jsx(reactQuery.QueryClientProvider, __assign({ client: queryClient || extraQueryClient }, { children: jsxRuntime.jsx(ContextualWrapper, __assign({ darkMode: darkMode, configProviderProps: configProviderProps }, { children: jsxRuntime.jsx("div", __assign({ className: "bunny-component-wrapper" }, { children: children })) })) })) })));
 }
 function ContextualWrapper(_a) {
     var children = _a.children, darkMode = _a.darkMode, configProviderProps = _a.configProviderProps;
@@ -229,6 +281,7 @@ function ContextualWrapper(_a) {
     var branding = reactQuery.useQuery({
         queryKey: common.QueryKeyFactory.default.brandingKey(token),
         queryFn: function () { return getBranding({ token: token, apiHost: apiHost }); },
+        staleTime: 1000 * 60 * 5, // 5 minutes
     }).data;
     var isMobile = common.useIsMobile();
     var entityBranding = react.useMemo(function () {
@@ -355,7 +408,7 @@ function useToken() {
     return overrideToken || tokenFromContext;
 }
-var MarkupContainer = defaultStyled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n  span {\n    width: 100%;\n  }\n"], ["\n  span {\n    width: 100%;\n  }\n"])));
+var MarkupContainer = defaultStyled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  span {\n    width: 100%;\n  }\n"], ["\n  span {\n    width: 100%;\n  }\n"])));
 var InvoiceQuoteView = function (_a) {
     var children = _a.children, formattedInvoice = _a.formattedInvoice, html = _a.html, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, onDownloadError = _a.onDownloadError;
     var downloadFile = useDownloadFile(formattedInvoice === null || formattedInvoice === void 0 ? void 0 : formattedInvoice.id, onDownloadError);
@@ -365,49 +418,46 @@ var InvoiceQuoteView = function (_a) {
     var _b = react.useContext(InvoiceQuoteContext), shadow = _b.shadow, hideDownloadButton = _b.hideDownloadButton;
     var isMobile = common.useIsMobile();
     var buttonsVisible = formattedInvoice && (!hideDownloadButton || onBackButtonClick);
-    return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-w-full bunny-grow ".concat(isMobile ? "bunny-overflow-hidden" : "") }, { children: [buttonsVisible ? (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-justify-between bunny-items-center bunny-pb-4 ".concat(isMobile ? "bunny-shadow-padding-x" : ""), id: "acceptance" }, { children: [jsxRuntime.jsx("div", { children: onBackButtonClick ? (jsxRuntime.jsx(antd.Button, __assign({ className: "bunny-pl-0", onClick: onBackButtonClick, style: {
+    return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-w-full bunny-grow ".concat(isMobile ? 'bunny-overflow-hidden' : '') }, { children: [buttonsVisible ? (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-justify-between bunny-items-center bunny-pb-4 ".concat(isMobile ? 'bunny-shadow-padding-x' : ''), id: "acceptance" }, { children: [jsxRuntime.jsx("div", { children: onBackButtonClick ? (jsxRuntime.jsx(antd.Button, __assign({ className: "bunny-pl-0", onClick: onBackButtonClick, style: {
                                 color: secondaryColor,
-                            }, type: "link" }, { children: backButtonName || "Back" }))) : null }), !hideDownloadButton ? (jsxRuntime.jsx(antd.Button, __assign({ icon: jsxRuntime.jsx(icons.DownloadOutlined, {}), onClick: function () {
-                            return downloadFile(apiHost + "/api/pdf/invoice/" + formattedInvoice.id, token);
-                        } }, { children: "Download" }))) : null] }))) : null, isMobile ? (jsxRuntime.jsxs(MarkupContainer, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-grow bunny-w-full bunny-shadow-padding-xb bunny-overflow-auto" }, { children: [jsxRuntime.jsx(interweave.Markup, { content: html }), children] }))) : (jsxRuntime.jsxs(MarkupContainer, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-p-4 bunny-w-full bunny-bg-white ".concat(shadow ? shadow : "bunny-shadow-md", " bunny-rounded-md"), style: {
-                    minWidth: "750px",
+                            }, type: "link" }, { children: backButtonName || 'Back' }))) : null }), !hideDownloadButton ? (jsxRuntime.jsx(antd.Button, __assign({ icon: jsxRuntime.jsx(icons.DownloadOutlined, {}), onClick: function () {
+                            return downloadFile(apiHost + '/api/pdf/invoice/' + formattedInvoice.id, token);
+                        } }, { children: "Download" }))) : null] }))) : null, isMobile ? (jsxRuntime.jsxs(MarkupContainer, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-grow bunny-w-full bunny-shadow-padding-xb bunny-overflow-auto" }, { children: [jsxRuntime.jsx(interweave.Markup, { content: html }), children] }))) : (jsxRuntime.jsxs(MarkupContainer, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-p-4 bunny-w-full bunny-bg-white ".concat(shadow ? shadow : 'bunny-shadow-md', " bunny-rounded-md"), style: {
+                    minWidth: '750px',
                 } }, { children: [jsxRuntime.jsx(interweave.Markup, { content: html }), children] })))] })));
 };
-var templateObject_1$b;
+var templateObject_1$c;
-var fetchPDF = function (apiEndpoint, invoiceUuid, token) { return __awaiter(void 0, void 0, void 0, function () {
+var fetchPDF = function (apiHost, documentUuid, documentType, token) { return __awaiter(void 0, void 0, void 0, function () {
     var response;
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0:
-                if (!invoiceUuid) {
-                    throw new Error("Invoice ID is required to fetch PDF");
+                if (!documentUuid) {
+                    throw new Error('Invoice ID is required to fetch PDF');
                 }
-                return [4 /*yield*/, fetch("".concat(apiEndpoint, "/api/legacy_invoices/").concat(invoiceUuid), {
-                        method: "GET",
+                return [4 /*yield*/, fetch("".concat(apiHost, "/api/legacy_documents/").concat(documentUuid, "?type=").concat(documentType), {
                         headers: {
-                            "Content-type": "application/json; charset=utf-8",
                             Authorization: "Bearer ".concat(token),
                         },
-                        // body: JSON.stringify({
-                        //   query: transactionMutation(filter),
-                        // }),
                     })];
             case 1:
                 response = _a.sent();
                 if (!response.ok)
-                    throw new Error("Failed to fetch PDF");
+                    throw new Error('Failed to fetch PDF');
                 return [2 /*return*/, response.blob()]; // Return the PDF as a blob
         }
     });
 }); };
-function InvoicePDF(_a) {
-    var invoiceUuid = _a.invoiceUuid, apiHost = _a.apiHost, token = _a.token;
+function LegacyDocument(_a) {
+    var documentUuid = _a.documentUuid, documentType = _a.documentType;
+    var apiHost = react.useContext(BunnyContext).apiHost;
     var _b = react.useState(undefined), pdfUrl = _b[0], setPdfUrl = _b[1];
+    var token = useToken();
     var _c = reactQuery.useQuery({
-        queryKey: ["invoicePDF", invoiceUuid],
-        queryFn: function () { return fetchPDF(apiHost || "", invoiceUuid, token); },
-        enabled: Boolean(invoiceUuid),
+        queryKey: ['documentPDF', documentUuid],
+        queryFn: function () { return fetchPDF(apiHost, documentUuid, documentType, token); },
+        enabled: Boolean(documentUuid),
     }), pdfBlob = _c.data, isLoading = _c.isLoading;
     react.useEffect(function () {
         if (pdfBlob) {
@@ -419,10 +469,10 @@ function InvoicePDF(_a) {
     if (isLoading || !pdfUrl)
         return jsxRuntime.jsx(jsxRuntime.Fragment, {});
     return (jsxRuntime.jsx("iframe", { src: pdfUrl, style: {
-            border: "none",
-            gridColumn: "1/-1",
-            minHeight: "1000px",
-            minWidth: "780px",
+            border: 'none',
+            gridColumn: '1/-1',
+            minHeight: '1000px',
+            minWidth: '780px',
         }, title: "Invoice PDF", width: "100%" }));
 }
@@ -434,7 +484,7 @@ var getPaymentMethods = function (_a) {
         var _b;
         return __generator(this, function (_c) {
             switch (_c.label) {
-                case 0: return [4 /*yield*/, common.gqlRequest({
+                case 0: return [4 /*yield*/, gqlRequest({
                         query: paymentMethodsQuery(accountId ? "filter: \"accountId is ".concat(accountId, "\"") : ''),
                         token: token,
                         apiHost: apiHost,
@@ -455,6 +505,7 @@ var usePaymentMethod = function (_a) {
             token: token,
         }),
         queryFn: function () { return getPaymentMethods({ apiHost: apiHost, token: token, accountId: accountId }); },
+        staleTime: 5 * 60 * 1000, // Consider data fresh for 5 minutes
     }), data = _b.data, isLoading = _b.isLoading;
     return {
         paymentMethods: data,
@@ -471,7 +522,7 @@ var filterPaymentPlugins = function (plugins) {
             ((_d = (_c = plugin.components) === null || _c === void 0 ? void 0 : _c.frontend) === null || _d === void 0 ? void 0 : _d.length);
     });
 };
-var MUTATION$8 = "{\n  paymentPlugins {\n    enabled\n    entities\n    guid\n    hidden\n    id\n    name\n    status\n    type\n    webhookEnabled\n    components\n  }\n}";
+var MUTATION$9 = "{\n  paymentPlugins {\n    enabled\n    entities\n    guid\n    hidden\n    id\n    name\n    status\n    type\n    webhookEnabled\n    components\n  }\n}";
 var getPaymentPlugins = function (_a) {
     var apiHost = _a.apiHost, token = _a.token;
     return __awaiter(void 0, void 0, void 0, function () {
@@ -480,8 +531,8 @@ var getPaymentPlugins = function (_a) {
             switch (_b.label) {
                 case 0:
                     _b.trys.push([0, 2, , 3]);
-                    return [4 /*yield*/, common.gqlRequest({
-                            query: MUTATION$8,
+                    return [4 /*yield*/, gqlRequest({
+                            query: MUTATION$9,
                             token: token,
                             apiHost: apiHost,
                         })];
@@ -501,6 +552,7 @@ var usePaymentPlugins = function (_a) {
     var _b = reactQuery.useQuery({
         queryKey: ['paymentPlugins', token],
         queryFn: function () { return getPaymentPlugins({ apiHost: apiHost, token: token }); },
+        staleTime: 5 * 60 * 1000, // Consider data fresh for 5 minutes
     }), paymentPlugins = _b.data, isFetched = _b.isFetched;
     var filteredPaymentPlugins = filterPaymentPlugins(paymentPlugins);
     var paymentMethodAllowedPlugins = filteredPaymentPlugins === null || filteredPaymentPlugins === void 0 ? void 0 : filteredPaymentPlugins.filter(function (plugin) {
@@ -514,10 +566,10 @@ var usePaymentPlugins = function (_a) {
 };
 var getQuoteAmountDue = function (quote) {
-    return quote.amountDue;
+    return quote.amountDue || quote.amount;
 };
-var MUTATION$7 = "\n  mutation checkout(\n    $invoiceId: ID,\n    $quoteId: ID,\n    $paymentMethodId: ID,\n    $paymentMethodData: CheckoutPaymentMethodAttributes\n  ) {\n    checkout(\n      invoiceId: $invoiceId,\n      quoteId: $quoteId,\n      paymentMethodId: $paymentMethodId,\n      paymentMethodData: $paymentMethodData\n    ) {\n      invoice {\n        id\n        state\n        amount\n        amountDue\n      }\n      payment {\n        id\n        state\n        amount\n      }\n      paymentApplication {\n        id\n        invoiceId\n        paymentId\n      }\n      transaction {\n        id\n        amount\n      }\n    }\n  }\n";
+var MUTATION$8 = "\n  mutation checkout(\n    $invoiceId: ID,\n    $quoteId: ID,\n    $paymentMethodId: ID,\n    $paymentMethodData: CheckoutPaymentMethodAttributes\n  ) {\n    checkout(\n      invoiceId: $invoiceId,\n      quoteId: $quoteId,\n      paymentMethodId: $paymentMethodId,\n      paymentMethodData: $paymentMethodData\n    ) {\n      invoice {\n        id\n        state\n        amount\n        amountDue\n      }\n      payment {\n        id\n        state\n        amount\n      }\n      paymentApplication {\n        id\n        invoiceId\n        paymentId\n      }\n      transaction {\n        id\n        amount\n      }\n    }\n  }\n";
 var checkout = function (_a) {
     var quoteId = _a.quoteId, invoiceId = _a.invoiceId, paymentMethodId = _a.paymentMethodId, paymentMethodData = _a.paymentMethodData, token = _a.token, apiHost = _a.apiHost;
     return __awaiter(void 0, void 0, void 0, function () {
@@ -533,8 +585,8 @@ var checkout = function (_a) {
                     if (paymentMethodData) {
                         mutationVars.paymentMethodData = __assign(__assign({}, paymentMethodData), { metadata: paymentMethodData.metadata });
                     }
-                    return [4 /*yield*/, common.gqlRequest({
-                            query: MUTATION$7,
+                    return [4 /*yield*/, gqlRequest({
+                            query: MUTATION$8,
                             token: token,
                             vars: mutationVars,
                             apiHost: apiHost,
@@ -559,14 +611,13 @@ function usePay$1(_a) {
     var customCheckoutFunction = react.useContext(PaymentContext).customCheckoutFunction;
     var token = useToken();
     var pay = function () { return __awaiter(_this, void 0, void 0, function () {
-        var amountDue, currencyId, response, response, error_1;
+        var currencyId, response, response, error_1;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    amountDue = quote ? getQuoteAmountDue(quote) : invoice === null || invoice === void 0 ? void 0 : invoice.amountDue;
                     currencyId = (quote === null || quote === void 0 ? void 0 : quote.currencyId) || (invoice === null || invoice === void 0 ? void 0 : invoice.currencyId);
-                    if (!amountDue || !currencyId) {
-                        throw new Error("No amount or currencyId");
+                    if (!currencyId) {
+                        throw new Error('No currencyId');
                     }
                     _a.label = 1;
                 case 1:
@@ -600,6 +651,212 @@ function usePay$1(_a) {
     return { pay: pay };
 }
+var createPaymentMethod = function (_a) {
+    var paymentMethodId = _a.paymentMethodId, plugin = _a.plugin, token = _a.token, apiHost = _a.apiHost, accountId = _a.accountId;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var response;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0: return [4 /*yield*/, common.invokePlugin({
+                        plugin: plugin,
+                        method: 'store_payment_method',
+                        payload: {
+                            payment_method_id: paymentMethodId,
+                            account_id: accountId,
+                        },
+                        token: token,
+                        apiHost: apiHost,
+                    })];
+                case 1:
+                    response = _b.sent();
+                    if (response.status !== 'success')
+                        throw new Error(response.message || 'Unknown error');
+                    return [2 /*return*/, response];
+            }
+        });
+    });
+};
+var createSetupIntent = function (plugin, apiHost, token, accountId) {
+    return common.invokePlugin({
+        plugin: plugin,
+        method: 'create_setup_intent',
+        token: token,
+        apiHost: apiHost,
+        payload: {
+            account_id: accountId,
+        },
+    });
+};
+var createPaymentHold = function (_a) {
+    var quote = _a.quote, plugin = _a.plugin, token = _a.token, apiHost = _a.apiHost, paymentMethodId = _a.paymentMethodId;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var payload, response;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    payload = {
+                        quote_id: quote.id,
+                        amount: quote.amount,
+                        payment_method_id: paymentMethodId,
+                    };
+                    return [4 /*yield*/, common.invokePlugin({
+                            plugin: plugin,
+                            method: 'create_payment_hold',
+                            payload: payload,
+                            token: token,
+                            apiHost: apiHost,
+                        })];
+                case 1:
+                    response = _b.sent();
+                    if (response.status !== 'success')
+                        throw new Error(response.message || 'Unknown error');
+                    return [2 /*return*/, response];
+            }
+        });
+    });
+};
+var fetchStripeKey = function (plugin, apiHost, token, accountId) { return __awaiter(void 0, void 0, void 0, function () {
+    var response;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0: return [4 /*yield*/, common.invokePlugin({
+                    plugin: plugin,
+                    method: 'retrieve_config',
+                    token: token,
+                    apiHost: apiHost,
+                    payload: {
+                        account_id: accountId,
+                    },
+                })];
+            case 1:
+                response = _a.sent();
+                return [2 /*return*/, response];
+        }
+    });
+}); };
+index_js.loadStripe.setLoadParameters({ advancedFraudSignals: false });
+var useStripePlugin = function (plugin, apiHost, currencyId, token, accountId) {
+    var _a = react.useState(null), stripe = _a[0], setStripe = _a[1];
+    var showErrorNotification = common.useErrorNotification();
+    var options = {
+        mode: 'setup',
+        currency: currencyId,
+        setupFutureUsage: 'off_session',
+    };
+    react.useEffect(function () {
+        var _a, _b;
+        if (!plugin)
+            return;
+        if (((_b = (_a = plugin.components) === null || _a === void 0 ? void 0 : _a.frontend) === null || _b === void 0 ? void 0 : _b[0].name) !== 'StripePayment')
+            return;
+        fetchStripeKey(plugin, apiHost || '', token, accountId)
+            .then(function (_a) {
+            var payload = _a.payload;
+            return index_js.loadStripe(payload.publishable_key).then(setStripe);
+        })
+            .catch(function (error) {
+            console.error('Caught Error in fetching stripe key: ', error);
+            showErrorNotification(error.message, 'Unexpected Error fetching key');
+        });
+        // eslint-disable-next-line
+    }, [plugin, token]);
+    return { stripe: stripe, options: options };
+};
+function useApproveHold$1(_a) {
+    var _this = this;
+    var onApproveHoldSuccess = _a.onApproveHoldSuccess, onApproveHoldError = _a.onApproveHoldError;
+    // Hooks
+    var _b = react.useState(false), isSaving = _b[0], setIsSaving = _b[1];
+    var apiHost = react.useContext(BunnyContext).apiHost;
+    var token = useToken();
+    var approveHold = function (_a) {
+        var plugin = _a.plugin, quote = _a.quote, paymentMethodId = _a.paymentMethodId;
+        return __awaiter(_this, void 0, void 0, function () {
+            var response, error_1;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _b.trys.push([0, 2, 3, 4]);
+                        if (!token)
+                            throw new Error("Token couldn't be retrieved");
+                        setIsSaving(true);
+                        return [4 /*yield*/, createPaymentHold({
+                                quote: quote,
+                                plugin: plugin,
+                                token: token,
+                                apiHost: apiHost,
+                                paymentMethodId: paymentMethodId,
+                            })];
+                    case 1:
+                        response = _b.sent();
+                        if (response.status !== 'success')
+                            throw new Error(response === null || response === void 0 ? void 0 : response.message);
+                        onApproveHoldSuccess === null || onApproveHoldSuccess === void 0 ? void 0 : onApproveHoldSuccess(response);
+                        return [3 /*break*/, 4];
+                    case 2:
+                        error_1 = _b.sent();
+                        console.error(error_1);
+                        onApproveHoldError === null || onApproveHoldError === void 0 ? void 0 : onApproveHoldError(error_1);
+                        return [3 /*break*/, 4];
+                    case 3:
+                        setIsSaving(false);
+                        return [7 /*endfinally*/];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    return { approveHold: approveHold, isSaving: isSaving };
+}
+function useApproveHold(_a) {
+    var _this = this;
+    var onApproveHoldSuccess = _a.onApproveHoldSuccess, onApproveHoldError = _a.onApproveHoldError;
+    // Hooks
+    var _b = react.useState(false), isSaving = _b[0], setIsSaving = _b[1];
+    var apiHost = react.useContext(BunnyContext).apiHost;
+    var token = useToken();
+    var approveHold = function (_a) {
+        var plugin = _a.plugin, quote = _a.quote, paymentMethodId = _a.paymentMethodId;
+        return __awaiter(_this, void 0, void 0, function () {
+            var response, error_1;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _b.trys.push([0, 2, 3, 4]);
+                        if (!token)
+                            throw new Error("Token couldn't be retrieved");
+                        setIsSaving(true);
+                        return [4 /*yield*/, createPaymentHold({
+                                quote: quote,
+                                plugin: plugin,
+                                token: token,
+                                apiHost: apiHost,
+                                paymentMethodId: paymentMethodId,
+                            })];
+                    case 1:
+                        response = _b.sent();
+                        if (response.status !== 'success')
+                            throw new Error(response === null || response === void 0 ? void 0 : response.message);
+                        onApproveHoldSuccess === null || onApproveHoldSuccess === void 0 ? void 0 : onApproveHoldSuccess(response);
+                        return [3 /*break*/, 4];
+                    case 2:
+                        error_1 = _b.sent();
+                        console.error(error_1);
+                        onApproveHoldError === null || onApproveHoldError === void 0 ? void 0 : onApproveHoldError(error_1);
+                        return [3 /*break*/, 4];
+                    case 3:
+                        setIsSaving(false);
+                        return [7 /*endfinally*/];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    return { approveHold: approveHold, isSaving: isSaving };
+}
 function usePay(_a) {
     var _this = this;
     var onPaymentSuccess = _a.onPaymentSuccess, onPaymentError = _a.onPaymentError, quote = _a.quote, invoice = _a.invoice, storedPaymentMethod = _a.storedPaymentMethod, plugin = _a.plugin;
@@ -643,8 +900,9 @@ function usePay(_a) {
 }
 var handleAllErrorFormats = common.useAllErrorFormats();
+var showErrorNotification$2 = common.useErrorNotification();
 var ActualCheckoutFooter = function (_a) {
-    var quote = _a.quote, invoice = _a.invoice, onPaymentSuccess = _a.onPaymentSuccess; _a.noPadding; var plugin = _a.plugin;
+    var quote = _a.quote, invoice = _a.invoice, onPaymentSuccess = _a.onPaymentSuccess, onPaymentHoldSuccess = _a.onPaymentHoldSuccess, noPadding = _a.noPadding, plugin = _a.plugin, paymentHoldOptions = _a.paymentHoldOptions;
     var isMobile = common.useIsMobile();
     var _b = react.useState(false), isPaying = _b[0], setIsPaying = _b[1];
     var defaultPaymentMethod = react.useContext(PaymentContext).defaultPaymentMethod;
@@ -673,6 +931,70 @@ var ActualCheckoutFooter = function (_a) {
         storedPaymentMethod: defaultPaymentMethod,
         plugin: plugin,
     }).pay;
+    // Approve hold hooks
+    var approveHoldStripe = useApproveHold$1({
+        onApproveHoldSuccess: function (response) {
+            onPaymentHoldSuccess === null || onPaymentHoldSuccess === void 0 ? void 0 : onPaymentHoldSuccess(response);
+        },
+        onApproveHoldError: function (error) {
+            setIsPaying(false);
+            handleAllErrorFormats(error);
+        },
+    }).approveHold;
+    var approveHoldDemoPay = useApproveHold({
+        onApproveHoldSuccess: function (response) {
+            onPaymentHoldSuccess === null || onPaymentHoldSuccess === void 0 ? void 0 : onPaymentHoldSuccess(response);
+        },
+        onApproveHoldError: function (error) {
+            setIsPaying(false);
+            handleAllErrorFormats(error);
+        },
+    }).approveHold;
+    var handleApproveHold = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a;
+        var _b, _c, _d, _e;
+        return __generator(this, function (_f) {
+            switch (_f.label) {
+                case 0:
+                    if (!plugin)
+                        return [2 /*return*/, console.error('plugin is undefined')];
+                    if (!quote)
+                        return [2 /*return*/, console.error('quote is undefined')];
+                    if (!(defaultPaymentMethod === null || defaultPaymentMethod === void 0 ? void 0 : defaultPaymentMethod.id))
+                        return [2 /*return*/, console.error('defaultPaymentMethod is undefined')];
+                    _a = (_c = (_b = plugin.components) === null || _b === void 0 ? void 0 : _b.frontend) === null || _c === void 0 ? void 0 : _c[0].name;
+                    switch (_a) {
+                        case 'StripePayment': return [3 /*break*/, 1];
+                        case 'DemoPayPayment': return [3 /*break*/, 3];
+                    }
+                    return [3 /*break*/, 5];
+                case 1:
+                    setIsPaying(true);
+                    return [4 /*yield*/, approveHoldStripe({
+                            plugin: plugin,
+                            quote: quote,
+                            paymentMethodId: defaultPaymentMethod === null || defaultPaymentMethod === void 0 ? void 0 : defaultPaymentMethod.id,
+                        })];
+                case 2:
+                    _f.sent();
+                    return [3 /*break*/, 6];
+                case 3:
+                    setIsPaying(true);
+                    return [4 /*yield*/, approveHoldDemoPay({
+                            plugin: plugin,
+                            quote: quote,
+                            paymentMethodId: defaultPaymentMethod === null || defaultPaymentMethod === void 0 ? void 0 : defaultPaymentMethod.id,
+                        })];
+                case 4:
+                    _f.sent();
+                    return [3 /*break*/, 6];
+                case 5:
+                    showErrorNotification$2("Payment holds are not supported by ".concat((_e = (_d = plugin.components) === null || _d === void 0 ? void 0 : _d.frontend) === null || _e === void 0 ? void 0 : _e[0].name));
+                    return [3 /*break*/, 6];
+                case 6: return [2 /*return*/];
+            }
+        });
+    }); };
     var handlePaymentSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
         var _a;
         var _b, _c;
@@ -700,86 +1022,22 @@ var ActualCheckoutFooter = function (_a) {
                 case 6: return [2 /*return*/];
             }
         });
-    }); };
-    return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-justify-end bunny-gap-2" }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "bunny-w-full", disabled: isPaying, onClick: function () {
-                setIsPaying(true);
-                handlePaymentSubmit();
-            }, size: isMobile ? 'large' : 'middle', type: "primary" }, { children: "".concat(isPaying ? 'Paying' : 'Pay', " ").concat(amountDue && currencyId ? common.formatCurrency(amountDue, currencyId) : '') })) })));
-};
-var CheckoutFooter = function (_a) {
-    var quote = _a.quote, invoice = _a.invoice, onPaymentSuccess = _a.onPaymentSuccess, noPadding = _a.noPadding, plugin = _a.plugin;
-    if (!plugin)
-        return null;
-    return (jsxRuntime.jsx(ActualCheckoutFooter, { plugin: plugin, invoice: invoice, quote: quote, onPaymentSuccess: onPaymentSuccess, noPadding: noPadding }));
-};
-// Automatically sets the default payment method if there is none currently set
-var useAutoSetDefaultPaymentMethod = function (_a) {
-    var accountId = _a.accountId, token = _a.token, handleSetDefault = _a.handleSetDefault, setDefaultPaymentMethodLoading = _a.setDefaultPaymentMethodLoading, _b = _a.enabled, enabled = _b === void 0 ? true : _b;
-    var queryClient = reactQuery.useQueryClient();
-    var apiHost = react.useContext(BunnyContext).apiHost;
-    var _c = usePaymentMethod({
-        accountId: accountId,
-        token: token,
-        apiHost: apiHost,
-    }), storedPaymentMethods = _c.paymentMethods, defaultPaymentMethod = _c.defaultPaymentMethod;
-    // Set the default payment method on the cache. Prevents 'handleSetDefault' from being called too many times.
-    function setDefaultPaymentMethodOnCache(targetPaymentMethod) {
-        var cachedPaymentMethods = queryClient.getQueryData(common.QueryKeyFactory.default.accountPaymentMethodKey({
-            accountId: accountId,
-            token: token,
-        }));
-        if (cachedPaymentMethods) {
-            for (var _i = 0, _a = cachedPaymentMethods; _i < _a.length; _i++) {
-                var paymentMethod = _a[_i];
-                paymentMethod.isDefault = paymentMethod.id === targetPaymentMethod.id;
-            }
-            queryClient.setQueryData(common.QueryKeyFactory.default.accountPaymentMethodKey({
-                accountId: accountId,
-                token: token,
-            }), cachedPaymentMethods);
-        }
-    }
-    react.useEffect(function () {
-        if (setDefaultPaymentMethodLoading || !enabled)
-            return;
-        if ((storedPaymentMethods === null || storedPaymentMethods === void 0 ? void 0 : storedPaymentMethods.length) > 0 && !defaultPaymentMethod) {
-            handleSetDefault(storedPaymentMethods[0]);
-            setDefaultPaymentMethodOnCache(storedPaymentMethods[0]);
-        }
-    }, [
-        storedPaymentMethods,
-        defaultPaymentMethod,
-        handleSetDefault,
-        setDefaultPaymentMethodLoading,
-        queryClient,
-        accountId,
-        token,
-    ]);
-};
-var usePaymentMethodSelectorPlugin = function (_a) {
-    var defaultPaymentMethod = _a.defaultPaymentMethod, defaultPaymentMethodPlugin = _a.defaultPaymentMethodPlugin, paymentMethodAllowedPlugins = _a.paymentMethodAllowedPlugins;
-    var _b = react.useState(), selectorPaymentMethodPlugin = _b[0], setSelectorPaymentMethodPlugin = _b[1];
-    react.useEffect(function () {
-        if (selectorPaymentMethodPlugin) {
-            return;
-        }
-        if (defaultPaymentMethod) {
-            setSelectorPaymentMethodPlugin(defaultPaymentMethodPlugin);
-        }
-        else {
-            setSelectorPaymentMethodPlugin(paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins[0]);
-        }
-    }, [
-        defaultPaymentMethod,
-        defaultPaymentMethodPlugin,
-        paymentMethodAllowedPlugins,
-    ]);
-    return {
-        selectorPaymentMethodPlugin: selectorPaymentMethodPlugin,
-        setSelectorPaymentMethodPlugin: setSelectorPaymentMethodPlugin,
-    };
+    }); };
+    if (paymentHoldOptions === null || paymentHoldOptions === void 0 ? void 0 : paymentHoldOptions.payToAccept) {
+        return (jsxRuntime.jsx("div", __assign({ className: "flex justify-end gap-2 ".concat(noPadding ? '' : '') }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "w-full", disabled: isPaying, onClick: function () {
+                    handleApproveHold();
+                }, size: isMobile ? 'large' : 'middle', type: "primary" }, { children: "".concat(isPaying ? 'Approving hold for' : 'Approve hold for', " ").concat(amountDue && currencyId ? common.formatCurrency(amountDue, currencyId) : '') })) })));
+    }
+    return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-justify-end bunny-gap-2" }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "bunny-w-full", disabled: isPaying, onClick: function () {
+                setIsPaying(true);
+                handlePaymentSubmit();
+            }, size: isMobile ? 'large' : 'middle', type: "primary" }, { children: "".concat(isPaying ? 'Paying' : 'Pay', " ").concat(amountDue && currencyId ? common.formatCurrency(amountDue, currencyId) : '') })) })));
+};
+var CheckoutFooter = function (_a) {
+    var quote = _a.quote, invoice = _a.invoice, onPaymentSuccess = _a.onPaymentSuccess, onPaymentHoldSuccess = _a.onPaymentHoldSuccess, noPadding = _a.noPadding, plugin = _a.plugin, paymentHoldOptions = _a.paymentHoldOptions;
+    if (!plugin)
+        return null;
+    return (jsxRuntime.jsx(ActualCheckoutFooter, { paymentHoldOptions: paymentHoldOptions, plugin: plugin, invoice: invoice, quote: quote, onPaymentSuccess: onPaymentSuccess, onPaymentHoldSuccess: onPaymentHoldSuccess, noPadding: noPadding }));
 };
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -18026,31 +18284,31 @@ var Card = function (_a) {
 };
 var tagStyleMap = {
-    blue: { color: "var(--bunny-blue-500)", background: "var(--bunny-blue-200)" },
+    blue: { color: 'var(--bunny-blue-500)', background: 'var(--bunny-blue-200)' },
     green: {
-        color: "var(--bunny-green-600)",
-        background: "var(--bunny-green-200)",
+        color: 'var(--bunny-green-600)',
+        background: 'var(--bunny-green-200)',
     },
-    red: { color: "var(--bunny-red-500)", background: "var(--bunny-red-200)" },
+    red: { color: 'var(--bunny-red-500)', background: 'var(--bunny-red-200)' },
     orange: {
-        color: "var(--bunny-orange-500)",
-        background: "var(--bunny-orange-200)",
+        color: 'var(--bunny-orange-500)',
+        background: 'var(--bunny-orange-200)',
     },
     yellow: {
-        color: "var(--bunny-yellow-500)",
-        background: "var(--bunny-yellow-200)",
+        color: 'var(--bunny-yellow-500)',
+        background: 'var(--bunny-yellow-200)',
     },
     purple: {
-        color: "var(--bunny-purple-500)",
-        background: "var(--bunny-purple-200)",
+        color: 'var(--bunny-purple-500)',
+        background: 'var(--bunny-purple-200)',
     },
-    black: { color: "white", background: "var(--bunny-black)" },
+    black: { color: 'white', background: 'var(--bunny-black)' },
 };
 // This component provides custom styling for antd Tag components without using antd overwrites.
 // Please use this component instead of the antd Tag component directly to maintain consistent styling.
 var CustomizedTag = function (_a) {
-    var children = _a.children, color = _a.color, className = _a.className;
-    return (jsxRuntime.jsx(antd.Tag, __assign({ color: color, style: color ? tagStyleMap[color] : undefined, className: "bunny-m-0 bunny-font-medium bunny-rounded-full bunny-border-none bunny-whitespace-nowrap ".concat(className) }, { children: children })));
+    var children = _a.children, color = _a.color, className = _a.className, style = _a.style;
+    return (jsxRuntime.jsx(antd.Tag, __assign({ color: color, style: __assign(__assign({}, (color ? tagStyleMap[color] : undefined)), style), className: "bunny-m-0 bunny-font-medium bunny-rounded-full bunny-border-none bunny-whitespace-nowrap ".concat(className) }, { children: children })));
 };
 var Amex = function (_a) {
@@ -18103,7 +18361,7 @@ var Visa = function (_a) {
     return (jsxRuntime.jsxs("svg", __assign({ className: className, width: "70", height: "48", viewBox: "0 0 70 48", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("rect", { x: "0.5", y: "0.5", width: "69", height: "47", rx: "5.5", fill: "white", stroke: "#D9D9D9" }), jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M21.2505 32.5165H17.0099L13.8299 20.3847C13.679 19.8267 13.3585 19.3333 12.8871 19.1008C11.7106 18.5165 10.4142 18.0514 9 17.8169V17.3498H15.8313C16.7742 17.3498 17.4813 18.0514 17.5991 18.8663L19.2491 27.6173L23.4877 17.3498H27.6104L21.2505 32.5165ZM29.9675 32.5165H25.9626L29.2604 17.3498H33.2653L29.9675 32.5165ZM38.4467 21.5514C38.5646 20.7346 39.2717 20.2675 40.0967 20.2675C41.3931 20.1502 42.8052 20.3848 43.9838 20.9671L44.6909 17.7016C43.5123 17.2345 42.216 17 41.0395 17C37.1524 17 34.3239 19.1008 34.3239 22.0165C34.3239 24.2346 36.3274 25.3992 37.7417 26.1008C39.2717 26.8004 39.861 27.2675 39.7431 27.9671C39.7431 29.0165 38.5646 29.4836 37.3881 29.4836C35.9739 29.4836 34.5596 29.1338 33.2653 28.5494L32.5582 31.8169C33.9724 32.3992 35.5025 32.6338 36.9167 32.6338C41.2752 32.749 43.9838 30.6502 43.9838 27.5C43.9838 23.5329 38.4467 23.3004 38.4467 21.5514ZM58 32.5165L54.82 17.3498H51.4044C50.6972 17.3498 49.9901 17.8169 49.7544 18.5165L43.8659 32.5165H47.9887L48.8116 30.3004H53.8772L54.3486 32.5165H58ZM51.9936 21.4342L53.1701 27.1502H49.8723L51.9936 21.4342Z", fill: "#172B85" })] })));
 };
-var Text$p = antd.Typography.Text;
+var Text$q = antd.Typography.Text;
 var MiniCreditCard = function (_a) {
     var className = _a.className, buttons = _a.buttons, _b = _a.hideDropdownMenu, hideDropdownMenu = _b === void 0 ? false : _b, _c = _a.hideDefaultTag, hideDefaultTag = _c === void 0 ? false : _c, onClickRemove = _a.onClickRemove, paymentMethodData = _a.paymentMethodData, onClickSetDefault = _a.onClickSetDefault, id = _a.id;
     var darkMode = react.useContext(BunnyContext).darkMode;
@@ -18114,7 +18372,7 @@ var MiniCreditCard = function (_a) {
         return darkMode ? 'var(--row-background-alternate)' : 'bg-slate-50';
     }, [darkMode]);
     var isDefault = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.isDefault;
-    return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-row bunny-justify-between bunny-items-center bunny-p-1 bunny-px-3 bunny-border-solid ".concat(backgroundColor, " bunny-").concat(borderColor, " bunny-rounded-md bunny-border ").concat(className), id: id }, { children: paymentMethodData ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-row bunny-gap-4" }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2 bunny-space-between bunny-w-full" }, { children: [jsxRuntime.jsx(CardImage, { paymentMethodData: paymentMethodData }), jsxRuntime.jsx(Issuer, { paymentMethodData: paymentMethodData }), jsxRuntime.jsx(Identifier, { paymentMethodData: paymentMethodData }), !hideDefaultTag && (jsxRuntime.jsx("div", { children: isDefault ? (jsxRuntime.jsx(antd.Tag, __assign({ bordered: false, color: "blue" }, { children: "Default" }))) : null }))] })) })), buttons ? (buttons) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: !hideDropdownMenu && (jsxRuntime.jsx(DropdownMenu, { setDefault: onClickSetDefault, remove: onClickRemove, isDefault: isDefault !== null && isDefault !== void 0 ? isDefault : false, id: "credit-card-dropdown-".concat(paymentMethodData.id) })) }))] })) : (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-items-center justify-between w-full" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-gap-2 bunny-items-center" }, { children: [jsxRuntime.jsx(icons.CreditCardOutlined, {}), jsxRuntime.jsx(Text$p, __assign({ className: "bunny-text-slate-400", style: { fontSize: '12px' } }, { children: "No payment methods" }))] })), jsxRuntime.jsx(antd.Button, { disabled: true, type: "link" }), buttons] }))) })));
+    return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-row bunny-justify-between bunny-items-center bunny-p-1 bunny-px-3 bunny-border-solid ".concat(backgroundColor, " bunny-").concat(borderColor, " bunny-rounded-md bunny-border ").concat(className), id: id }, { children: paymentMethodData ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-row bunny-gap-4" }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2 bunny-space-between bunny-w-full" }, { children: [jsxRuntime.jsx(CardImage, { paymentMethodData: paymentMethodData }), jsxRuntime.jsx(Issuer, { paymentMethodData: paymentMethodData }), jsxRuntime.jsx(Identifier, { paymentMethodData: paymentMethodData }), !hideDefaultTag && (jsxRuntime.jsx("div", { children: isDefault ? (jsxRuntime.jsx(antd.Tag, __assign({ bordered: false, color: "blue" }, { children: "Default" }))) : null }))] })) })), buttons ? (buttons) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: !hideDropdownMenu && (jsxRuntime.jsx(DropdownMenu, { setDefault: onClickSetDefault, remove: onClickRemove, isDefault: isDefault !== null && isDefault !== void 0 ? isDefault : false, id: "credit-card-dropdown-".concat(paymentMethodData.id) })) }))] })) : (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-items-center justify-between w-full" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-gap-2 bunny-items-center" }, { children: [jsxRuntime.jsx(icons.CreditCardOutlined, {}), jsxRuntime.jsx(Text$q, __assign({ className: "bunny-text-slate-400", style: { fontSize: '12px' } }, { children: "No payment methods" }))] })), jsxRuntime.jsx(antd.Button, { disabled: true, type: "link" }), buttons] }))) })));
 };
 var Identifier = function (_a) {
     var _b, _c, _d;
@@ -18123,9 +18381,9 @@ var Identifier = function (_a) {
         return null;
     }
     if (((_c = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _c === void 0 ? void 0 : _c.type) === 'cashapp') {
-        return jsxRuntime.jsx(Text$p, { children: "Cashapp" });
+        return jsxRuntime.jsx(Text$q, { children: "Cashapp" });
     }
-    return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Text$p, __assign({ className: "relative -top-0.5" }, { children: "****" })), jsxRuntime.jsx(Text$p, { children: (_d = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _d === void 0 ? void 0 : _d.identifier })] }));
+    return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Text$q, __assign({ className: "relative -top-0.5" }, { children: "****" })), jsxRuntime.jsx(Text$q, { children: (_d = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _d === void 0 ? void 0 : _d.identifier })] }));
 };
 var Issuer = function (_a) {
     var _b;
@@ -18134,7 +18392,7 @@ var Issuer = function (_a) {
     var issuer = (_b = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _b === void 0 ? void 0 : _b.issuer;
     if (issuer.length == 0 || list.includes(issuer.toLowerCase()))
         return null;
-    return jsxRuntime.jsx(Text$p, { children: lodashExports.capitalize(issuer) });
+    return jsxRuntime.jsx(Text$q, { children: lodashExports.capitalize(issuer) });
 };
 var DropdownMenu = function (_a) {
     var setDefault = _a.setDefault, remove = _a.remove, isDefault = _a.isDefault, id = _a.id;
@@ -18195,6 +18453,75 @@ var CardImage = function (_a) {
     }
 };
+// Automatically sets the default payment method if there is none currently set
+var useAutoSetDefaultPaymentMethod = function (_a) {
+    var accountId = _a.accountId, token = _a.token, handleSetDefault = _a.handleSetDefault, setDefaultPaymentMethodLoading = _a.setDefaultPaymentMethodLoading, _b = _a.enabled, enabled = _b === void 0 ? true : _b;
+    var queryClient = reactQuery.useQueryClient();
+    var apiHost = react.useContext(BunnyContext).apiHost;
+    var _c = usePaymentMethod({
+        accountId: accountId,
+        token: token,
+        apiHost: apiHost,
+    }), storedPaymentMethods = _c.paymentMethods, defaultPaymentMethod = _c.defaultPaymentMethod;
+    // Set the default payment method on the cache. Prevents 'handleSetDefault' from being called too many times.
+    function setDefaultPaymentMethodOnCache(targetPaymentMethod) {
+        var cachedPaymentMethods = queryClient.getQueryData(common.QueryKeyFactory.default.accountPaymentMethodKey({
+            accountId: accountId,
+            token: token,
+        }));
+        if (cachedPaymentMethods) {
+            for (var _i = 0, _a = cachedPaymentMethods; _i < _a.length; _i++) {
+                var paymentMethod = _a[_i];
+                paymentMethod.isDefault = paymentMethod.id === targetPaymentMethod.id;
+            }
+            queryClient.setQueryData(common.QueryKeyFactory.default.accountPaymentMethodKey({
+                accountId: accountId,
+                token: token,
+            }), cachedPaymentMethods);
+        }
+    }
+    react.useEffect(function () {
+        if (setDefaultPaymentMethodLoading || !enabled)
+            return;
+        if ((storedPaymentMethods === null || storedPaymentMethods === void 0 ? void 0 : storedPaymentMethods.length) > 0 && !defaultPaymentMethod) {
+            handleSetDefault(storedPaymentMethods[0]);
+            setDefaultPaymentMethodOnCache(storedPaymentMethods[0]);
+        }
+    }, [
+        storedPaymentMethods,
+        defaultPaymentMethod,
+        handleSetDefault,
+        setDefaultPaymentMethodLoading,
+        queryClient,
+        accountId,
+        token,
+    ]);
+};
+var usePaymentMethodSelectorPlugin = function (_a) {
+    var defaultPaymentMethod = _a.defaultPaymentMethod, defaultPaymentMethodPlugin = _a.defaultPaymentMethodPlugin, paymentMethodAllowedPlugins = _a.paymentMethodAllowedPlugins;
+    var _b = react.useState(), selectorPaymentMethodPlugin = _b[0], setSelectorPaymentMethodPlugin = _b[1];
+    react.useEffect(function () {
+        if (selectorPaymentMethodPlugin) {
+            return;
+        }
+        if (defaultPaymentMethod) {
+            setSelectorPaymentMethodPlugin(defaultPaymentMethodPlugin);
+        }
+        else {
+            setSelectorPaymentMethodPlugin(paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins[0]);
+        }
+    }, [
+        defaultPaymentMethod,
+        defaultPaymentMethodPlugin,
+        paymentMethodAllowedPlugins,
+    ]);
+    return {
+        selectorPaymentMethodPlugin: selectorPaymentMethodPlugin,
+        setSelectorPaymentMethodPlugin: setSelectorPaymentMethodPlugin,
+    };
+};
 var SavePaymentMethodFooter = function (_a) {
     var isSaving = _a.isSaving, onSave = _a.onSave, noPadding = _a.noPadding;
     var isMobile = common.useIsMobile();
@@ -18356,7 +18683,7 @@ function useSave$1(_a) {
     return { save: save, isSaving: isSaving };
 }
-var Text$o = antd.Typography.Text;
+var Text$p = antd.Typography.Text;
 var TEST_CARD = '4242424242424242';
 var DemoPayForm = function (_a) {
     var onFail = _a.onFail, onSavePaymentMethod = _a.onSavePaymentMethod, plugin = _a.plugin;
@@ -18418,100 +18745,16 @@ var DemoPayForm = function (_a) {
     var onCardCvcChange = function (cvc) {
         setCardDetails(__assign(__assign({}, cardDetails), { cvc: cvc }));
     };
-    return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [jsxRuntime.jsxs(StyledInputs, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2", darkMode: darkMode !== null && darkMode !== void 0 ? darkMode : false }, { children: [jsxRuntime.jsx(DemoPayCardNumber, { onChange: onCardNumberChange, value: cardDetails.number }), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-2" }, { children: [jsxRuntime.jsx(DemoPayExpiry, { onChange: onCardExpiryChange, value: cardDetails.expiry }), jsxRuntime.jsx(DemoPayCardCvc, { onChange: onCardCvcChange, value: cardDetails.cvc })] }))] })), jsxRuntime.jsx(Text$o, { children: "DemoPay is for testing only." }), jsxRuntime.jsx(SavePaymentMethodFooter, { isSaving: isSaving, onSave: onSave })] })));
+    return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [jsxRuntime.jsxs(StyledInputs, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2", darkMode: darkMode !== null && darkMode !== void 0 ? darkMode : false }, { children: [jsxRuntime.jsx(DemoPayCardNumber, { onChange: onCardNumberChange, value: cardDetails.number }), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-2" }, { children: [jsxRuntime.jsx(DemoPayExpiry, { onChange: onCardExpiryChange, value: cardDetails.expiry }), jsxRuntime.jsx(DemoPayCardCvc, { onChange: onCardCvcChange, value: cardDetails.cvc })] }))] })), jsxRuntime.jsx(Text$p, { children: "DemoPay is for testing only." }), jsxRuntime.jsx(SavePaymentMethodFooter, { isSaving: isSaving, onSave: onSave })] })));
 };
-var StyledInputs = defaultStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  .ant-input {\n    background-color: ", " !important;\n  }\n  .ant-input:not(:focus) {\n    border-color: ", " !important;\n  }\n"], ["\n  .ant-input {\n    background-color: ", " !important;\n  }\n  .ant-input:not(:focus) {\n    border-color: ", " !important;\n  }\n"])), function (_a) {
+var StyledInputs = defaultStyled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n  .ant-input {\n    background-color: ", " !important;\n  }\n  .ant-input:not(:focus) {\n    border-color: ", " !important;\n  }\n"], ["\n  .ant-input {\n    background-color: ", " !important;\n  }\n  .ant-input:not(:focus) {\n    border-color: ", " !important;\n  }\n"])), function (_a) {
     var darkMode = _a.darkMode;
     return darkMode ? 'var(--row-background-dark)' : 'white';
 }, function (_a) {
     var darkMode = _a.darkMode;
     return darkMode ? common.GRAY_500 : common.GRAY_200;
 });
-var templateObject_1$a;
-var createPaymentMethod = function (_a) {
-    var paymentMethodId = _a.paymentMethodId, plugin = _a.plugin, token = _a.token, apiHost = _a.apiHost, accountId = _a.accountId;
-    return __awaiter(void 0, void 0, void 0, function () {
-        var response;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
-                case 0: return [4 /*yield*/, common.invokePlugin({
-                        plugin: plugin,
-                        method: "store_payment_method",
-                        payload: {
-                            payment_method_id: paymentMethodId,
-                            account_id: accountId,
-                        },
-                        token: token,
-                        apiHost: apiHost,
-                    })];
-                case 1:
-                    response = _b.sent();
-                    if (response.status !== "success")
-                        throw new Error(response.message || "Unknown error");
-                    return [2 /*return*/, response];
-            }
-        });
-    });
-};
-var createSetupIntent = function (plugin, apiHost, token, accountId) {
-    return common.invokePlugin({
-        plugin: plugin,
-        method: "create_setup_intent",
-        token: token,
-        apiHost: apiHost,
-        payload: {
-            account_id: accountId,
-        },
-    });
-};
-var fetchStripeKey = function (plugin, apiHost, token, accountId) { return __awaiter(void 0, void 0, void 0, function () {
-    var response;
-    return __generator(this, function (_a) {
-        switch (_a.label) {
-            case 0: return [4 /*yield*/, common.invokePlugin({
-                    plugin: plugin,
-                    method: "retrieve_config",
-                    token: token,
-                    apiHost: apiHost,
-                    payload: {
-                        account_id: accountId,
-                    },
-                })];
-            case 1:
-                response = _a.sent();
-                return [2 /*return*/, response];
-        }
-    });
-}); };
-index_js.loadStripe.setLoadParameters({ advancedFraudSignals: false });
-var useStripePlugin = function (plugin, apiHost, currencyId, token, accountId) {
-    var _a = react.useState(null), stripe = _a[0], setStripe = _a[1];
-    var showErrorNotification = common.useErrorNotification();
-    var options = {
-        mode: "setup",
-        currency: currencyId,
-        setupFutureUsage: "off_session",
-    };
-    react.useEffect(function () {
-        var _a, _b;
-        if (!plugin)
-            return;
-        if (((_b = (_a = plugin.components) === null || _a === void 0 ? void 0 : _a.frontend) === null || _b === void 0 ? void 0 : _b[0].name) !== "StripePayment")
-            return;
-        fetchStripeKey(plugin, apiHost || "", token, accountId)
-            .then(function (_a) {
-            var payload = _a.payload;
-            return index_js.loadStripe(payload.publishable_key).then(setStripe);
-        })
-            .catch(function (error) {
-            console.error("Caught Error in fetching stripe key: ", error);
-            showErrorNotification(error.message, "Unexpected Error fetching key");
-        });
-        // eslint-disable-next-line
-    }, [plugin, token]);
-    return { stripe: stripe, options: options };
-};
+var templateObject_1$b;
 function useSave(_a) {
     var _this = this;
@@ -18649,11 +18892,12 @@ var PaymentMethodDetails = function (_a) {
     }
 };
-var CardIcon = function () {
-    return (jsxRuntime.jsxs("svg", __assign({ width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.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: common.SLATE_400, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M1.5 7.5H16.5", stroke: common.SLATE_400, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] })));
+var CardIcon = function (_a) {
+    var className = _a.className;
+    return (jsxRuntime.jsxs("svg", __assign({ className: className, width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.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: common.SLATE_400, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M1.5 7.5H16.5", stroke: common.SLATE_400, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] })));
 };
-var Text$n = antd.Typography.Text;
+var Text$o = antd.Typography.Text;
 var PaymentMethodSelector = function (_a) {
     var paymentMethodAllowedPlugins = _a.paymentMethodAllowedPlugins, onSelect = _a.onSelect, value = _a.value;
     return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins.map(function (plugin, index) { return (jsxRuntime.jsx(PaymentOption, { name: plugin.name, onClick: onSelect, paymentPlugin: plugin, selected: (value === null || value === void 0 ? void 0 : value.id) === plugin.id }, index)); }) })));
@@ -18662,13 +18906,13 @@ var PaymentOption = function (_a) {
     var selected = _a.selected, paymentPlugin = _a.paymentPlugin, onClick = _a.onClick, name = _a.name;
     var brandColor = react.useContext(BrandContext).brandColor;
     var darkMode = react.useContext(BunnyContext).darkMode;
-    var isAch = name === null || name === void 0 ? void 0 : name.toLowerCase().includes("ach");
-    var isCard = name === null || name === void 0 ? void 0 : name.toLowerCase().includes("card");
-    return (jsxRuntime.jsxs(PaymentOptionContainer, __assign({ "$brandColor": brandColor, "$selected": selected, className: "bunny-flex bunny-justify-between bunny-items-center bunny-w-full bunny-cursor-pointer bunny-py-2 bunny-px-4 bunny-rounded bunny-border-solid ".concat(darkMode
+    var isAch = name === null || name === void 0 ? void 0 : name.toLowerCase().includes('ach');
+    var isCard = name === null || name === void 0 ? void 0 : name.toLowerCase().includes('card');
+    return (jsxRuntime.jsxs(PaymentOptionContainer, __assign({ "$brandColor": brandColor, "$selected": selected, className: "bunny-flex bunny-justify-between bunny-items-center bunny-cursor-pointer bunny-py-2 bunny-rounded bunny-border-solid ".concat(darkMode
             ? "var(--row-background-dark) border-gray-500"
-            : "bunny-bg-slate-50 bunny-border-slate-200", " bunny-border"), onClick: function () { return onClick(paymentPlugin); } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-2 bunny-items-center" }, { children: [jsxRuntime.jsx(antd.Checkbox, { checked: selected, className: darkMode ? "border-gray-400" : "" }), jsxRuntime.jsx(Text$n, { children: name })] })), isAch ? (jsxRuntime.jsx(icons.BankOutlined, { className: "bunny-text-slate-400" })) : isCard ? (jsxRuntime.jsx(CardIcon, {})) : (jsxRuntime.jsx(CardIcon, {}))] })));
+            : 'bunny-bg-slate-50 bunny-border-slate-200', " bunny-border"), onClick: function () { return onClick(paymentPlugin); } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-2 bunny-items-center bunny-pl-4" }, { children: [jsxRuntime.jsx(antd.Checkbox, { checked: selected, className: darkMode ? 'border-gray-400' : '' }), jsxRuntime.jsx(Text$o, { children: name })] })), isAch ? (jsxRuntime.jsx(icons.BankOutlined, { className: "bunny-pr-4" })) : isCard ? (jsxRuntime.jsx(CardIcon, { className: "bunny-pr-4" })) : (jsxRuntime.jsx(CardIcon, { className: "bunny-pr-4" }))] })));
 };
-var PaymentOptionContainer = defaultStyled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n  transition: border 0.3s ease;\n\n  ", "\n\n  &:hover {\n    border-color: ", ";\n  }\n"], ["\n  transition: border 0.3s ease;\n\n  ", "\n\n  &:hover {\n    border-color: ", ";\n  }\n"])), function (_a) {
+var PaymentOptionContainer = defaultStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  transition: border 0.3s ease;\n\n  ", "\n\n  &:hover {\n    border-color: ", ";\n  }\n"], ["\n  transition: border 0.3s ease;\n\n  ", "\n\n  &:hover {\n    border-color: ", ";\n  }\n"])), function (_a) {
     var $brandColor = _a.$brandColor, $selected = _a.$selected;
     return $selected &&
         "\n    border-color: ".concat($brandColor, ";\n  ");
@@ -18676,7 +18920,7 @@ var PaymentOptionContainer = defaultStyled.div(templateObject_1$9 || (templateOb
     var $brandColor = _a.$brandColor;
     return $brandColor;
 });
-var templateObject_1$9;
+var templateObject_1$a;
 function useRemovePaymentMethod(paymentPlugins, apiHost, token, accountId, onRemovePaymentMethod, onError) {
     var _this = this;
@@ -18788,7 +19032,7 @@ var Panel = antd.Collapse.Panel;
 var showErrorNotification$1 = common.useErrorNotification();
 var PaymentForm = function (_a) {
     var _b;
-    var invoice = _a.invoice, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, quote = _a.quote, accountId = _a.accountId, onSavePaymentMethod = _a.onSavePaymentMethod, onRemovePaymentMethod = _a.onRemovePaymentMethod, onSetDefaultPaymentMethod = _a.onSetDefaultPaymentMethod, overrideToken = _a.overrideToken, customCheckoutFunction = _a.customCheckoutFunction, currencyIdFromProps = _a.currencyId;
+    var invoice = _a.invoice, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, onPaymentHoldSuccess = _a.onPaymentHoldSuccess, quote = _a.quote, accountId = _a.accountId, onSavePaymentMethod = _a.onSavePaymentMethod, onRemovePaymentMethod = _a.onRemovePaymentMethod, onSetDefaultPaymentMethod = _a.onSetDefaultPaymentMethod, overrideToken = _a.overrideToken, customCheckoutFunction = _a.customCheckoutFunction, currencyIdFromProps = _a.currencyId, paymentHoldOptions = _a.paymentHoldOptions;
     // Local state
     var _c = react.useState(false), showPaymentMethodForm = _c[0], setShowPaymentMethodForm = _c[1];
     // Simple hooks
@@ -18867,7 +19111,7 @@ var PaymentForm = function (_a) {
             storedPaymentMethods: storedPaymentMethods,
             defaultPaymentMethod: defaultPaymentMethod,
             customCheckoutFunction: customCheckoutFunction,
-        } }, { children: jsxRuntime.jsx(StripeWrapper, __assign({ plugin: selectorPaymentMethodPlugin, token: token, apiHost: apiHost, currencyId: currencyId, accountId: accountId }, { children: jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-0 bunny-w-full" }, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-px-4" }, { children: [storedPaymentMethods === null || storedPaymentMethods === void 0 ? void 0 : storedPaymentMethods.map(function (paymentMethod) { return (jsxRuntime.jsx(MiniCreditCard, { onClickRemove: function () { return onClickRemove(paymentMethod); }, onClickSetDefault: function () { return handleSetDefault(paymentMethod); }, paymentMethodData: paymentMethod, id: "payment-method-".concat(paymentMethod.id) }, paymentMethod.id)); }), (storedPaymentMethods === null || storedPaymentMethods === void 0 ? void 0 : storedPaymentMethods.length) === 0 && (jsxRuntime.jsx(MiniCreditCard, { onClickRemove: function () { }, onClickSetDefault: function () { } }))] })), jsxRuntime.jsx(antd.Collapse, __assign({ bordered: false, activeKey: showPaymentMethodForm ? '1' : undefined, ghost: true, collapsible: "disabled", destroyInactivePanel: true }, { children: jsxRuntime.jsx(Panel, __assign({ header: jsxRuntime.jsx(jsxRuntime.Fragment, { children: !showPaymentMethodForm ? (jsxRuntime.jsx("div", __assign({ className: "bunny-pt-2" }, { children: jsxRuntime.jsx(antd.Button, __assign({ onClick: handleClickAddPaymentMethod, type: "default", className: "bunny-w-full", id: "addPaymentMethod" }, { children: "Add payment method" })) }))) : null }), showArrow: false }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-mt-2" }, { children: [jsxRuntime.jsx(PaymentMethodSelector, { onSelect: setSelectorPaymentMethodPlugin, paymentMethodAllowedPlugins: paymentPlugins, value: selectorPaymentMethodPlugin }), selectorPaymentMethodPlugin && (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col" }, { children: jsxRuntime.jsx(PaymentMethodDetails, { onFail: onFail, onSavePaymentMethod: handleSavePaymentMethod, plugin: selectorPaymentMethodPlugin }) })))] })) }), "1") })), paying && !selectedPaymentPluginIsManualPayment ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: defaultPaymentMethod ? (jsxRuntime.jsx("div", __assign({ className: "bunny-px-4" }, { children: jsxRuntime.jsx(CheckoutFooter, { quote: quote, invoice: invoice, onPaymentSuccess: handlePaymentSuccess, plugin: selectedPaymentMethodPlugin }) }))) : null })) : null] }) })) })) })));
+        } }, { children: jsxRuntime.jsx(StripeWrapper, __assign({ plugin: selectorPaymentMethodPlugin, token: token, apiHost: apiHost, currencyId: currencyId, accountId: accountId }, { children: jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-0 bunny-w-full" }, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-px-4" }, { children: [storedPaymentMethods === null || storedPaymentMethods === void 0 ? void 0 : storedPaymentMethods.map(function (paymentMethod) { return (jsxRuntime.jsx(MiniCreditCard, { onClickRemove: function () { return onClickRemove(paymentMethod); }, onClickSetDefault: function () { return handleSetDefault(paymentMethod); }, paymentMethodData: paymentMethod, id: "payment-method-".concat(paymentMethod.id) }, paymentMethod.id)); }), (storedPaymentMethods === null || storedPaymentMethods === void 0 ? void 0 : storedPaymentMethods.length) === 0 && (jsxRuntime.jsx(MiniCreditCard, { onClickRemove: function () { }, onClickSetDefault: function () { } }))] })), jsxRuntime.jsx(antd.Collapse, __assign({ bordered: false, activeKey: showPaymentMethodForm ? '1' : undefined, ghost: true, collapsible: "disabled", destroyInactivePanel: true }, { children: jsxRuntime.jsx(Panel, __assign({ header: jsxRuntime.jsx(jsxRuntime.Fragment, { children: !showPaymentMethodForm ? (jsxRuntime.jsx("div", __assign({ className: "bunny-pt-2" }, { children: jsxRuntime.jsx(antd.Button, __assign({ onClick: handleClickAddPaymentMethod, type: "default", className: "bunny-w-full", id: "addPaymentMethod" }, { children: "Add payment method" })) }))) : null }), showArrow: false }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-mt-2" }, { children: [jsxRuntime.jsx(PaymentMethodSelector, { onSelect: setSelectorPaymentMethodPlugin, paymentMethodAllowedPlugins: paymentPlugins, value: selectorPaymentMethodPlugin }), selectorPaymentMethodPlugin && (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col" }, { children: jsxRuntime.jsx(PaymentMethodDetails, { onFail: onFail, onSavePaymentMethod: handleSavePaymentMethod, plugin: selectorPaymentMethodPlugin }) })))] })) }), "1") })), paying && !selectedPaymentPluginIsManualPayment ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: defaultPaymentMethod && selectedPaymentMethodPlugin ? (jsxRuntime.jsx("div", __assign({ className: "bunny-px-4" }, { children: jsxRuntime.jsx(CheckoutFooter, { quote: quote, invoice: invoice, onPaymentSuccess: handlePaymentSuccess, onPaymentHoldSuccess: onPaymentHoldSuccess, plugin: selectedPaymentMethodPlugin, paymentHoldOptions: paymentHoldOptions }) }))) : null })) : null] }) })) })) })));
 };
 function StripeWrapper(_a) {
     var children = _a.children, plugin = _a.plugin, token = _a.token, apiHost = _a.apiHost, currencyId = _a.currencyId, accountId = _a.accountId;
@@ -18876,7 +19120,7 @@ function StripeWrapper(_a) {
 }
 function Invoice(_a) {
-    var id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, onInvoiceDownloadError = _a.onInvoiceDownloadError, onPaymentSuccess = _a.onPaymentSuccess, _b = _a.shadow, shadow = _b === void 0 ? "shadow-md" : _b, className = _a.className, _c = _a.hideDownloadButton, hideDownloadButton = _c === void 0 ? false : _c, onInvoiceLoaded = _a.onInvoiceLoaded;
+    var id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, onInvoiceDownloadError = _a.onInvoiceDownloadError, onPaymentSuccess = _a.onPaymentSuccess, _b = _a.shadow, shadow = _b === void 0 ? 'shadow-md' : _b, className = _a.className, _c = _a.hideDownloadButton, hideDownloadButton = _c === void 0 ? false : _c, onInvoiceLoaded = _a.onInvoiceLoaded;
     return (jsxRuntime.jsx(InvoiceQuoteContext.Provider, __assign({ value: {
             id: id,
             invoiceQuoteViewComponent: invoiceQuoteViewComponent,
@@ -18903,10 +19147,10 @@ function ActualInvoice() {
     // Queries
     var formattedInvoice = reactQuery.useQuery({
         queryKey: common.QueryKeyFactory.default.createFormattedInvoiceKey({ id: id, token: token }),
-        queryFn: function () { return common.getFormattedInvoice({ id: id, token: token, apiHost: apiHost }); },
+        queryFn: function () { return common.getFormattedInvoice({ id: id, token: token, apiHost: apiHost, componentsVersion: PACKAGE_VERSION }); },
     }).data;
     // Derived state
-    var isInvoicePayable = common.PAYABLE_INVOICE_STATES.includes((formattedInvoice === null || formattedInvoice === void 0 ? void 0 : formattedInvoice.state) || "");
+    var isInvoicePayable = common.PAYABLE_INVOICE_STATES.includes((formattedInvoice === null || formattedInvoice === void 0 ? void 0 : formattedInvoice.state) || '');
     // Local state
     var isMobile = common.useIsMobile(isInvoicePayable ? common.BreakpointNumbers.lg : undefined);
     var onSuccess = function () {
@@ -18919,7 +19163,7 @@ function ActualInvoice() {
                 token: token,
             }),
         });
-        showSuccessNotification("Your invoice has been paid", "Payment successful");
+        showSuccessNotification('Your invoice has been paid', 'Payment successful');
         onPaymentSuccess === null || onPaymentSuccess === void 0 ? void 0 : onPaymentSuccess();
     };
     var onFail = function (error) {
@@ -18932,18 +19176,18 @@ function ActualInvoice() {
     }, [formattedInvoice]);
     if (!formattedInvoice)
         return jsxRuntime.jsx(jsxRuntime.Fragment, {});
-    return (jsxRuntime.jsx("div", __assign({ className: "bunny-invoice-container" }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-6 ".concat(isMobile ? "bunny-flex-col bunny-w-full bunny-overflow-hidden" : "", " ").concat(className) }, { children: [formattedInvoice.isLegacy ? (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-justify-center bunny-w-full" }, { children: jsxRuntime.jsx(InvoicePDF, { invoiceUuid: formattedInvoice.uuid, apiHost: apiHost, token: token }) }))) : (invoiceQuoteViewComponent || (jsxRuntime.jsx(InvoiceQuoteView, { html: formattedInvoice.html, formattedInvoice: formattedInvoice, backButtonName: backButtonName, onBackButtonClick: onBackButtonClick }))), isInvoicePayable && (jsxRuntime.jsx("div", __assign({ className: "bunny-w-full ".concat(hideDownloadButton || formattedInvoice.isLegacy ? "" : "pt-12") }, { children: jsxRuntime.jsx(PaymentForm, { onPaymentSuccess: onSuccess, onFail: onFail, invoice: formattedInvoice }) })))] })) })));
+    return (jsxRuntime.jsx("div", __assign({ className: "bunny-invoice-container" }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-6 bunny-overflow-hidden ".concat(isMobile ? 'bunny-flex-col bunny-w-full' : '', " ").concat(className) }, { children: [formattedInvoice.isLegacy ? (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-justify-center bunny-w-full" }, { children: jsxRuntime.jsx(LegacyDocument, { documentUuid: formattedInvoice.uuid, documentType: "invoice" }) }))) : (invoiceQuoteViewComponent || (jsxRuntime.jsx(InvoiceQuoteView, { html: formattedInvoice.html, formattedInvoice: formattedInvoice, backButtonName: backButtonName, onBackButtonClick: onBackButtonClick }))), isInvoicePayable && (jsxRuntime.jsx("div", __assign({ className: "bunny-w-full ".concat(hideDownloadButton || formattedInvoice.isLegacy ? '' : 'pt-12') }, { children: jsxRuntime.jsx(PaymentForm, { onPaymentSuccess: onSuccess, onFail: onFail, invoice: formattedInvoice }) })))] })) })));
 }
-var MUTATION$6 = function (id) { return "\n  query formattedQuote ($id: ID) {\n    formattedQuote (id: $id) {\n      payableId\n      acceptedAt\n      acceptedByName\n      amount\n      amountDue\n      amountsByPeriod {\n        id\n        name\n        amount\n      }\n      object { documents { id filename size date url } }\n      billingCity\n      billingCountry\n      billingState\n      billingStreet\n      billingZip\n      contactName\n      currency\n      customerBillingCity\n      customerBillingCountry\n      customerBillingState\n      customerBillingStreet\n      customerBillingZip\n      customerName\n      discount\n      discountValue\n      duration\n      endDate\n      expiresAt\n      html\n      formattedLines {\n        amount\n        amountsByPeriod {\n          quantity\n          id\n          name\n          startDate\n          endDate\n          amount\n          amountsByTier {\n            id\n            tier {\n              starts\n              ends\n              price\n            }\n            quantity\n            amount\n          }\n          prorationRate\n        }\n        billingPeriodEnd\n        billingPeriodStart\n        chargeType\n        discount\n        frequency\n        isRamp\n        periods\n        planName\n        position\n        price\n        priceDecimals\n        priceListChargeId\n        priceListChargeName\n        priceListId\n        priceListName\n        priceTiers {\n          price\n          starts\n        }\n        pricingModel\n        productName\n        prorationRate\n        quantity\n        showProductNameOnLineItem\n        taxCode\n        trialEndDate\n        trialStartDate\n        unitOfMeasure\n        vatCode\n      }\n      netPaymentDays\n      notes\n      number\n      poNumberRequired\n      salesContactEmail\n      sharedAt\n      startDate\n      state\n      subtotal\n      taxAmount\n      taxNumberLabel\n      taxNumberRequired\n      vendorName\n    }\n  }"; };
+var MUTATION$7 = function (id) { return "\n  query formattedQuote ($id: ID) {\n    formattedQuote (id: $id) {\n      object {\n        firstInvoice {\n          id\n          state\n        }\n        payableId\n        id\n        payToAccept\n        currentPaymentHold {\n          createdAt\n          expiresAt\n          id\n          updatedAt\n          paymentMethod {\n            accountId\n            createdAt\n            expirationDate\n            failureCode\n            id\n            isDefault\n            lastSuccess\n            paymentType\n            pluginId\n            state\n            updatedAt\n            metadata {\n              description\n              expiration\n              icon\n              identifier\n              issuer\n              kind\n            }\n          }\n        }\n      }\n      payableId\n      acceptedAt\n      acceptedByName\n      amount\n      amountDue\n      amountsByPeriod {\n        id\n        name\n        amount\n      }\n      object { documents { id filename size date url } }\n      billingCity\n      billingCountry\n      billingState\n      billingStreet\n      billingZip\n      contactName\n      currency\n      customerBillingCity\n      customerBillingCountry\n      customerBillingState\n      customerBillingStreet\n      customerBillingZip\n      customerName\n      discount\n      discountValue\n      duration\n      endDate\n      expiresAt\n      html\n      formattedLines {\n        amount\n        amountsByPeriod {\n          quantity\n          id\n          name\n          startDate\n          endDate\n          amount\n          amountsByTier {\n            id\n            tier {\n              starts\n              ends\n              price\n            }\n            quantity\n            amount\n          }\n          prorationRate\n        }\n        billingPeriodEnd\n        billingPeriodStart\n        chargeType\n        discount\n        frequency\n        isRamp\n        periods\n        planName\n        position\n        price\n        priceDecimals\n        priceListChargeId\n        priceListChargeName\n        priceListId\n        priceListName\n        priceTiers {\n          price\n          starts\n        }\n        pricingModel\n        productName\n        prorationRate\n        quantity\n        showProductNameOnLineItem\n        taxCode\n        trialEndDate\n        trialStartDate\n        unitOfMeasure\n        vatCode\n      }\n      netPaymentDays\n      notes\n      number\n      poNumberRequired\n      salesContactEmail\n      sharedAt\n      startDate\n      state\n      subtotal\n      taxAmount\n      taxNumberLabel\n      taxNumberRequired\n      vendorName\n    }\n  }"; };
 var getFormattedQuote = function (_a) {
     var id = _a.id, token = _a.token, apiHost = _a.apiHost;
     return __awaiter(void 0, void 0, void 0, function () {
         var response;
         return __generator(this, function (_b) {
             switch (_b.label) {
-                case 0: return [4 /*yield*/, common.gqlRequest({
-                        query: MUTATION$6(),
+                case 0: return [4 /*yield*/, gqlRequest({
+                        query: MUTATION$7(),
                         token: token,
                         apiHost: apiHost,
                         vars: { id: id },
@@ -18967,12 +19211,13 @@ var usePlugins = function (_a) {
             var plugins;
             return __generator(this, function (_a) {
                 switch (_a.label) {
-                    case 0: return [4 /*yield*/, common.getPlugins({
+                    case 0: return [4 /*yield*/, getPlugins({
                             token: token,
                             apiHost: apiHost,
                         })];
                     case 1:
                         plugins = _a.sent();
+                        console.log("plugins in usePlugins: ", plugins);
                         return [2 /*return*/, plugins];
                 }
             });
@@ -18980,6 +19225,39 @@ var usePlugins = function (_a) {
     });
     return response;
 };
+var getPlugins = function (_a) {
+    var entityId = _a.entityId, token = _a.token, apiHost = _a.apiHost;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var response, plugins, filteredPlugins, error;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0: return [4 /*yield*/, common.request({
+                        endpoint: "/plugins",
+                        token: token,
+                        apiHost: apiHost,
+                    })];
+                case 1:
+                    response = _b.sent();
+                    if (!response.ok) return [3 /*break*/, 3];
+                    return [4 /*yield*/, response.json()];
+                case 2:
+                    plugins = _b.sent();
+                    filteredPlugins = plugins.filter(function (plugin) {
+                        var _a, _b;
+                        var result = ((_a = plugin.entities) === null || _a === void 0 ? void 0 : _a.includes(Number(entityId))) ||
+                            ((_b = plugin.entities) === null || _b === void 0 ? void 0 : _b.length) === 0 ||
+                            !entityId;
+                        return result;
+                    });
+                    return [2 /*return*/, filteredPlugins];
+                case 3: return [4 /*yield*/, response.json()];
+                case 4:
+                    error = _b.sent();
+                    throw error;
+            }
+        });
+    });
+};
 var filterSigningPlugins = function (plugins) {
     return plugins === null || plugins === void 0 ? void 0 : plugins.filter(function (plugin) {
@@ -18994,15 +19272,41 @@ var useSigningPlugins = function (_a) {
     return filterSigningPlugins(plugins.data);
 };
+var QUOTE_ACCEPT = "\n  mutation quoteAccept($name: String!, $title: String!, $poNumber: String, $taxNumber: String, $quoteId: ID) {\n    quoteAccept(name: $name, title: $title, poNumber: $poNumber, taxNumber: $taxNumber, quoteId: $quoteId) {\n      errors\n    }\n  }\n";
+var quoteAccept = function (_a) {
+    var quoteId = _a.quoteId, apiHost = _a.apiHost, token = _a.token, changedFormItems = _a.changedFormItems;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var vars, response, errors;
+        var _b, _c;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
+                case 0:
+                    vars = __assign(__assign({}, changedFormItems), { quoteId: quoteId });
+                    return [4 /*yield*/, common.gqlRequest({
+                            query: QUOTE_ACCEPT,
+                            token: token,
+                            vars: vars,
+                            apiHost: apiHost,
+                        })];
+                case 1:
+                    response = _d.sent();
+                    errors = (_b = response === null || response === void 0 ? void 0 : response.quoteAccept) === null || _b === void 0 ? void 0 : _b.errors;
+                    if (errors)
+                        throw errors;
+                    return [2 /*return*/, (_c = response.quoteAccept) === null || _c === void 0 ? void 0 : _c.quote];
+            }
+        });
+    });
+};
+// export default quoteAccept;
 var useSendAcceptQuote = function (_a) {
-    var onTokenExpired = _a.onTokenExpired, quoteId = _a.quoteId, apiHost = _a.apiHost, token = _a.token;
+    _a.onTokenExpired; var quoteId = _a.quoteId, apiHost = _a.apiHost, token = _a.token;
     // Hooks
     var graphQLMutation = common.useGraphQLmutation(function () {
         console.log("navigate in useGraphQLmutation in useSendAcceptQuote is not yet implemented");
     }, apiHost || "", function () {
         console.log("onError in useGraphQLmutation in useSendAcceptQuote is not yet implemented");
     });
-    var handleAllErrorFormats = common.useAllErrorFormats(onTokenExpired);
     var signingPlugins = useSigningPlugins({ apiHost: apiHost, token: token });
     var queryClient = reactQuery.useQueryClient();
     // Local state
@@ -19052,12 +19356,6 @@ var useSendAcceptQuote = function (_a) {
                                 token: token,
                             }),
                         });
-                        queryClient.refetchQueries({
-                            queryKey: common.QueryKeyFactory.default.createQuoteKey({
-                                id: quoteId,
-                                token: token,
-                            }),
-                        });
                     });
                     // Open the DropboxSign modal
                     client.open(url, {
@@ -19068,29 +19366,27 @@ var useSendAcceptQuote = function (_a) {
             }
         });
     }); };
-    var sendAccept = function (changedFormItems) {
-        var mutation = "mutation quoteAccept($name: String!, $title: String!, $poNumber: String, $taxNumber: String, $quoteId: ID) {\n        quoteAccept(name: $name, title: $title, poNumber: $poNumber, taxNumber: $taxNumber, quoteId: $quoteId) {\n          errors\n        }\n      }";
-        var variables = __assign(__assign({}, changedFormItems), { quoteId: quoteId });
-        graphQLMutation(mutation, variables, function (rsp) {
-            if (rsp.errors)
-                handleAllErrorFormats(rsp.errors);
-            else {
-                setAcceptBoxVisible(false);
-                queryClient.invalidateQueries({
-                    queryKey: common.QueryKeyFactory.default.createQuoteKey({
-                        id: quoteId,
-                        token: token,
-                    }),
-                });
-                queryClient.invalidateQueries({
-                    queryKey: common.QueryKeyFactory.default.createQuoteKey({
-                        id: quoteId,
+    var _e = reactQuery.useMutation({
+        mutationFn: function (changedFormItems) { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                return [2 /*return*/, quoteAccept({
+                        quoteId: quoteId,
+                        apiHost: apiHost,
                         token: token,
-                    }),
-                });
-            }
-        }, token);
-    };
+                        changedFormItems: changedFormItems,
+                    })];
+            });
+        }); },
+        onSuccess: function () {
+            setAcceptBoxVisible(false);
+            queryClient.invalidateQueries({
+                queryKey: common.QueryKeyFactory.default.createQuoteKey({
+                    id: quoteId,
+                    token: token,
+                }),
+            });
+        },
+    }), sendAcceptMutation = _e.mutate, isSendAcceptPending = _e.isPending;
     var startAcceptance = function () {
         setIsAccepting(true);
         if (signingPlugins === null || signingPlugins === void 0 ? void 0 : signingPlugins.length) {
@@ -19103,12 +19399,13 @@ var useSendAcceptQuote = function (_a) {
     return {
         acceptBoxVisible: acceptBoxVisible,
         isAccepting: isAccepting,
-        sendAccept: sendAccept,
+        sendAccept: sendAcceptMutation,
         setAcceptBoxVisible: setAcceptBoxVisible,
         setIsAccepting: setIsAccepting,
         startAcceptance: startAcceptance,
         pandadocPollingModalVisible: pandadocPollingModalVisible,
         setPandadocPollingModalVisible: setPandadocPollingModalVisible,
+        isSendAcceptPending: isSendAcceptPending,
     };
 };
@@ -19176,11 +19473,11 @@ var PandadocPollingModal = function (_a) {
     return (jsxRuntime.jsxs(antd.Modal, __assign({ title: "Uploading quote to Pandadoc", open: isVisible, closable: false, footer: null }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-py-4 bunny-text-center" }, { children: ["This may take a few seconds", ".".repeat(numberOfPolls)] })), jsxRuntime.jsx("div", __assign({ className: "bunny-text-center" }, { children: infoMessage }))] })));
 };
-var ModalOverrideBrandStylings = defaultStyled(antd.Modal)(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  .ant-modal-content {\n    border-radius: 0.75rem;\n    overflow: hidden;\n    padding: 0 !important;\n  }\n\n  .ant-modal-header {\n    border-bottom: none;\n    padding: 1.5rem 1.5rem 0;\n    margin: 0 !important;\n  }\n  .ant-modal-body {\n    padding: 1rem 1.5rem 1.5rem;\n  }\n  .ant-modal-footer {\n    border-top: none;\n    padding: 0 1.5rem 1.5rem;\n    margin: 0 !important;\n  }\n"], ["\n  .ant-modal-content {\n    border-radius: 0.75rem;\n    overflow: hidden;\n    padding: 0 !important;\n  }\n\n  .ant-modal-header {\n    border-bottom: none;\n    padding: 1.5rem 1.5rem 0;\n    margin: 0 !important;\n  }\n  .ant-modal-body {\n    padding: 1rem 1.5rem 1.5rem;\n  }\n  .ant-modal-footer {\n    border-top: none;\n    padding: 0 1.5rem 1.5rem;\n    margin: 0 !important;\n  }\n"])));
+var ModalOverrideBrandStylings = defaultStyled(antd.Modal)(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n  .ant-modal-content {\n    border-radius: 0.75rem;\n    overflow: hidden;\n    padding: 0 !important;\n  }\n\n  .ant-modal-header {\n    border-bottom: none;\n    padding: 1.5rem 1.5rem 0;\n    margin: 0 !important;\n  }\n  .ant-modal-body {\n    padding: 1rem 1.5rem 1.5rem;\n  }\n  .ant-modal-footer {\n    border-top: none;\n    padding: 0 1.5rem 1.5rem;\n    margin: 0 !important;\n  }\n"], ["\n  .ant-modal-content {\n    border-radius: 0.75rem;\n    overflow: hidden;\n    padding: 0 !important;\n  }\n\n  .ant-modal-header {\n    border-bottom: none;\n    padding: 1.5rem 1.5rem 0;\n    margin: 0 !important;\n  }\n  .ant-modal-body {\n    padding: 1rem 1.5rem 1.5rem;\n  }\n  .ant-modal-footer {\n    border-top: none;\n    padding: 0 1.5rem 1.5rem;\n    margin: 0 !important;\n  }\n"])));
 var StyledModal$1 = function (props) {
     return jsxRuntime.jsx(ModalOverrideBrandStylings, __assign({ closable: false }, props));
 };
-var templateObject_1$8;
+var templateObject_1$9;
 var useFocusFirstInput = function (_a) {
     var firstInputRef = _a.firstInputRef, isVisible = _a.isVisible;
@@ -19191,7 +19488,7 @@ var useFocusFirstInput = function (_a) {
 };
 var AcceptQuoteModal = function (_a) {
-    var acceptBoxVisible = _a.acceptBoxVisible, formattedQuote = _a.formattedQuote, sendAccept = _a.sendAccept, setAcceptBoxVisible = _a.setAcceptBoxVisible, setIsAccepting = _a.setIsAccepting;
+    var acceptBoxVisible = _a.acceptBoxVisible, formattedQuote = _a.formattedQuote, sendAccept = _a.sendAccept, setAcceptBoxVisible = _a.setAcceptBoxVisible, setIsAccepting = _a.setIsAccepting, isSendAcceptPending = _a.isSendAcceptPending;
     // Refs
     var firstInputRef = react.useRef(null);
     // Hooks
@@ -19202,7 +19499,10 @@ var AcceptQuoteModal = function (_a) {
     var createRules = function (required, title) {
         return required ? [{ required: true, message: "".concat(title, " is required") }] : [];
     };
-    return (jsxRuntime.jsx(StyledModal$1, __assign({ centered: true, okText: "Accept", onCancel: function () {
+    return (jsxRuntime.jsx(StyledModal$1, __assign({ centered: true, okText: isSendAcceptPending ? "Accepting..." : "Accept", okButtonProps: {
+            loading: isSendAcceptPending,
+            disabled: isSendAcceptPending,
+        }, onCancel: function () {
             setAcceptBoxVisible(false);
             setIsAccepting(false);
         }, onOk: function () {
@@ -19215,8 +19515,39 @@ var AcceptQuoteModal = function (_a) {
         }, open: acceptBoxVisible, title: "Accept quote", width: 400 }, { children: jsxRuntime.jsxs(antd.Form, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2", form: form, layout: "vertical" }, { children: [jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Your name", name: "name", rules: createRules(true, "Your name") }, { children: jsxRuntime.jsx(antd.Input, { autoFocus: true, ref: firstInputRef }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Your job title", name: "title", rules: createRules(true, "Your job title") }, { children: jsxRuntime.jsx(antd.Input, {}) })), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Purchase order number", name: "poNumber", rules: createRules(poNumberRequired, "Purchase order number") }, { children: jsxRuntime.jsx(antd.Input, {}) })), taxNumberRequired && (jsxRuntime.jsx(antd.Form.Item, __assign({ name: "taxNumber", label: taxNumberLabel, rules: createRules(taxNumberRequired, taxNumberLabel) }, { children: jsxRuntime.jsx(antd.Input, {}) })))] })) })));
 };
-var Text$m = antd.Typography.Text;
-defaultStyled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  span {\n    width: 100%;\n  }\n"], ["\n  span {\n    width: 100%;\n  }\n"])));
+var Title$2 = antd.Typography.Title;
+var showSuccessNotification$1 = common.useSuccessNotification();
+var PaymentHoldModal = function (_a) {
+    var visible = _a.visible, setVisible = _a.setVisible, quote = _a.quote;
+    var queryClient = reactQuery.useQueryClient();
+    var token = useToken();
+    return (jsxRuntime.jsxs(StyledModal$1, __assign({ centered: true, onCancel: function () {
+            setVisible(false);
+        }, footer: null, open: visible, width: 600 }, { children: [jsxRuntime.jsx(Title$2, __assign({ className: "mt-4 pb-4 mx-4", level: 5 }, { children: "Pay to accept" })), jsxRuntime.jsx("div", __assign({ className: "mb-4" }, { children: jsxRuntime.jsx(PaymentForm, { quote: {
+                        amount: quote.amount,
+                        currencyId: quote.currency,
+                        id: quote.object.id,
+                    }, paymentHoldOptions: {
+                        payToAccept: true,
+                        amountToHold: quote.amount,
+                    }, onFail: function () {
+                        setVisible(false);
+                    }, onPaymentSuccess: function () {
+                        setVisible(false);
+                    }, onPaymentHoldSuccess: function () {
+                        setVisible(false);
+                        showSuccessNotification$1("Approved payment hold for ".concat(common.formatCurrency(quote.amount, quote.currency)));
+                        queryClient.invalidateQueries({
+                            queryKey: common.QueryKeyFactory.default.createQuoteKey({
+                                id: quote.id,
+                                token: token,
+                            }),
+                        });
+                    } }) }))] })));
+};
+var Text$n = antd.Typography.Text;
+defaultStyled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  span {\n    width: 100%;\n  }\n"], ["\n  span {\n    width: 100%;\n  }\n"])));
 function Quote(_a) {
     var id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, onInvoiceDownloadError = _a.onInvoiceDownloadError, onPaymentSuccess = _a.onPaymentSuccess, _b = _a.shadow, shadow = _b === void 0 ? 'shadow-md' : _b, className = _a.className, _c = _a.hideDownloadButton, hideDownloadButton = _c === void 0 ? false : _c, onQuoteLoaded = _a.onQuoteLoaded;
     return (jsxRuntime.jsx(InvoiceQuoteContext.Provider, __assign({ value: {
@@ -19230,16 +19561,29 @@ function Quote(_a) {
             onQuoteLoaded: onQuoteLoaded,
         } }, { children: jsxRuntime.jsx(ActualQuote, {}) })));
 }
+// TODO: dissolve this hook
+var useQuotePaymentHold = function (formattedQuote) {
+    var _a = react.useState(false), paymentHoldModalVisible = _a[0], setPaymentHoldModalVisible = _a[1];
+    var shouldDoPaymentHold = (formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.object.payToAccept) == true;
+    var currentPaymentHold = formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.object.currentPaymentHold;
+    return {
+        paymentHold: currentPaymentHold,
+        paymentHoldModalVisible: paymentHoldModalVisible,
+        setPaymentHoldModalVisible: setPaymentHoldModalVisible,
+        shouldDoPaymentHold: shouldDoPaymentHold,
+        paymentHoldCompleted: currentPaymentHold ? true : false,
+    };
+};
 function ActualQuote() {
     var _this = this;
-    var _a, _b;
+    var _a, _b, _c;
     // Context
-    var _c = react.useContext(BunnyContext), apiHost = _c.apiHost, onTokenExpired = _c.onTokenExpired;
+    var _d = react.useContext(BunnyContext), apiHost = _d.apiHost, onTokenExpired = _d.onTokenExpired;
     var token = useToken();
-    var entityBranding = react.useContext(BrandContext);
-    var _d = react.useContext(InvoiceQuoteContext), className = _d.className, id = _d.id, hideDownloadButton = _d.hideDownloadButton, onQuoteLoaded = _d.onQuoteLoaded;
+    react.useContext(BrandContext);
+    var _e = react.useContext(InvoiceQuoteContext), className = _e.className, id = _e.id, hideDownloadButton = _e.hideDownloadButton, onQuoteLoaded = _e.onQuoteLoaded;
     // Queries
-    var _e = reactQuery.useQuery({
+    var _f = reactQuery.useQuery({
         queryKey: common.QueryKeyFactory.default.createQuoteKey({ id: id, token: token }),
         queryFn: function () { return __awaiter(_this, void 0, void 0, function () {
             var error_1;
@@ -19258,17 +19602,15 @@ function ActualQuote() {
             });
         }); },
         placeholderData: reactQuery.keepPreviousData,
-    }), data = _e.data, isLoading = _e.isLoading;
+    }), data = _f.data, isLoading = _f.isLoading;
     var formattedQuote = data;
-    // Hooks
-    var downloadFile = useDownloadFile(id);
-    var isExpired = useIsExpired(formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.expiresAt);
-    var _f = useSendAcceptQuote({
+    // Hooks
+    var _g = useSendAcceptQuote({
         token: token,
         onTokenExpired: onTokenExpired,
         apiHost: apiHost,
         quoteId: id,
-    }), acceptBoxVisible = _f.acceptBoxVisible, isAccepting = _f.isAccepting, sendAccept = _f.sendAccept, setAcceptBoxVisible = _f.setAcceptBoxVisible, setIsAccepting = _f.setIsAccepting, startAcceptance = _f.startAcceptance, pandadocPollingModalVisible = _f.pandadocPollingModalVisible, setPandadocPollingModalVisible = _f.setPandadocPollingModalVisible;
+    }), acceptBoxVisible = _g.acceptBoxVisible, isAccepting = _g.isAccepting, sendAccept = _g.sendAccept, setAcceptBoxVisible = _g.setAcceptBoxVisible, setIsAccepting = _g.setIsAccepting, startAcceptance = _g.startAcceptance, pandadocPollingModalVisible = _g.pandadocPollingModalVisible, setPandadocPollingModalVisible = _g.setPandadocPollingModalVisible, isSendAcceptPending = _g.isSendAcceptPending;
     useSigningComplete({ data: formattedQuote, token: token });
     var isMobile = common.useIsMobile();
     var showErrorNotification = common.useErrorNotification();
@@ -19277,27 +19619,61 @@ function ActualQuote() {
             onQuoteLoaded === null || onQuoteLoaded === void 0 ? void 0 : onQuoteLoaded(formattedQuote);
         }
     }, [formattedQuote]);
+    // Payment hold stuff here
+    var _h = useQuotePaymentHold(formattedQuote), paymentHoldModalVisible = _h.paymentHoldModalVisible, setPaymentHoldModalVisible = _h.setPaymentHoldModalVisible, shouldDoPaymentHold = _h.shouldDoPaymentHold, paymentHoldCompleted = _h.paymentHoldCompleted, paymentHold = _h.paymentHold;
+    var handleClickAccept = function () {
+        if (shouldDoPaymentHold && !paymentHoldCompleted) {
+            setPaymentHoldModalVisible(true);
+        }
+        else {
+            startAcceptance();
+        }
+    };
     if (!formattedQuote || isLoading) {
         return jsxRuntime.jsx(jsxRuntime.Fragment, {});
     }
     // Derived state
     var isAccepted = formattedQuote.state === 'ACCEPTED';
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 ".concat(isMobile ? 'bunny-w-full bunny-overflow-hidden' : '', " ").concat(className) }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-justify-end bunny-items-center bunny-gap-4", id: "acceptance", style: {
-                            color: entityBranding.secondaryColor,
-                        } }, { children: [isAccepted && formattedQuote.acceptedAt ? (jsxRuntime.jsx(Text$m, { children: "Quote was accepted by ".concat(formattedQuote.acceptedByName, " on ").concat(common.formatDate(formattedQuote.acceptedAt)) })) : null, (!isMobile || !isAccepted) && (jsxRuntime.jsxs("div", __assign({ className: isMobile ? 'flex w-full justify-end gap-2' : 'flex items-center justify-end gap-2' }, { children: [!isMobile && !hideDownloadButton ? (jsxRuntime.jsx(antd.Button, __assign({ icon: jsxRuntime.jsx(icons.DownloadOutlined, {}), onClick: function () { return downloadFile(apiHost + '/api/pdf/quote', token); } }, { children: "Download" }))) : null, !isAccepted ? (jsxRuntime.jsx(antd.Button, __assign({ disabled: isExpired || isAccepting, onClick: function () { return startAcceptance(); }, type: "primary" }, { children: isExpired ? 'Quote is expired' : 'Accept quote' }))) : null] })))] })), jsxRuntime.jsx(InvoiceQuoteView, __assign({ html: formattedQuote.html }, { children: ((_b = (_a = formattedQuote.object) === null || _a === void 0 ? void 0 : _a.documents) === null || _b === void 0 ? void 0 : _b.length) > 0 ? (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-end" }, { children: formattedQuote.object.documents.map(function (doc, index) {
+    var firstInvoice = (_a = formattedQuote.object) === null || _a === void 0 ? void 0 : _a.firstInvoice;
+    if ((firstInvoice === null || firstInvoice === void 0 ? void 0 : firstInvoice.state) === 'PAID' && paymentHoldCompleted) {
+        return jsxRuntime.jsx(Invoice, { id: firstInvoice.id });
+    }
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 ".concat(isMobile ? 'bunny-w-full bunny-overflow-hidden' : '', " ").concat(className) }, { children: [jsxRuntime.jsx(QuoteButtons, { isAccepted: isAccepted, formattedQuote: formattedQuote, isMobile: isMobile, hideDownloadButton: hideDownloadButton, id: id, isAccepting: isAccepting, handleClickAccept: handleClickAccept, setPaymentHoldModalVisible: setPaymentHoldModalVisible, shouldDoPaymentHold: shouldDoPaymentHold, paymentHoldCompleted: paymentHoldCompleted, paymentHold: paymentHold }), jsxRuntime.jsx(InvoiceQuoteView, __assign({ html: formattedQuote.html }, { children: ((_c = (_b = formattedQuote.object) === null || _b === void 0 ? void 0 : _b.documents) === null || _c === void 0 ? void 0 : _c.length) > 0 ? (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-end" }, { children: formattedQuote.object.documents.map(function (doc, index) {
                                 return (jsxRuntime.jsx(antd.Button, __assign({ download: doc.filename, href: doc.url, type: "link" }, { children: doc.filename }), index));
-                            }) }))) : null }))] })), jsxRuntime.jsx(AcceptQuoteModal, { acceptBoxVisible: acceptBoxVisible, formattedQuote: formattedQuote, setAcceptBoxVisible: setAcceptBoxVisible, setIsAccepting: setIsAccepting, sendAccept: sendAccept }), jsxRuntime.jsx(PandadocPollingModal, { isVisible: pandadocPollingModalVisible, setVisible: setPandadocPollingModalVisible, id: id })] }));
+                            }) }))) : null }))] })), jsxRuntime.jsx(AcceptQuoteModal, { acceptBoxVisible: acceptBoxVisible, formattedQuote: formattedQuote, setAcceptBoxVisible: setAcceptBoxVisible, setIsAccepting: setIsAccepting, sendAccept: sendAccept, isSendAcceptPending: isSendAcceptPending }), jsxRuntime.jsx(PaymentHoldModal, { visible: paymentHoldModalVisible, setVisible: setPaymentHoldModalVisible, quote: formattedQuote }), jsxRuntime.jsx(PandadocPollingModal, { isVisible: pandadocPollingModalVisible, setVisible: setPandadocPollingModalVisible, id: id })] }));
 }
-var templateObject_1$7;
+// TODO: clean up the logic here. Its quite confusing
+function QuoteButtons(_a) {
+    var isAccepted = _a.isAccepted, formattedQuote = _a.formattedQuote, isMobile = _a.isMobile, hideDownloadButton = _a.hideDownloadButton, id = _a.id, isAccepting = _a.isAccepting, handleClickAccept = _a.handleClickAccept, setPaymentHoldModalVisible = _a.setPaymentHoldModalVisible, shouldDoPaymentHold = _a.shouldDoPaymentHold, paymentHoldCompleted = _a.paymentHoldCompleted, paymentHold = _a.paymentHold;
+    var apiHost = react.useContext(BunnyContext).apiHost;
+    var token = useToken();
+    var entityBranding = react.useContext(BrandContext);
+    var downloadFile = useDownloadFile(id);
+    var isExpired = useIsExpired(formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.expiresAt);
+    return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-row justify-end items-center gap-4", id: "acceptance", style: {
+            color: entityBranding.secondaryColor,
+        } }, { children: [isAccepted && formattedQuote.acceptedAt ? (jsxRuntime.jsx(Text$n, { children: "Quote was accepted by ".concat(formattedQuote.acceptedByName, " on ").concat(common.formatDate(formattedQuote.acceptedAt)) })) : null, (!isMobile || !isAccepted) && (jsxRuntime.jsxs("div", __assign({ className: isMobile ? 'flex w-full justify-end gap-2' : 'flex items-center justify-end gap-2' }, { children: [paymentHold ? (jsxRuntime.jsx(PaymentHoldDisplay, { paymentHold: paymentHold, currency: formattedQuote.currency, amount: formattedQuote.amount })) : null, !isMobile && !hideDownloadButton ? (jsxRuntime.jsx(antd.Button, __assign({ icon: jsxRuntime.jsx(icons.DownloadOutlined, {}), onClick: function () { return downloadFile(apiHost + '/api/pdf/quote', token); } }, { children: "Download" }))) : null, shouldDoPaymentHold && !paymentHoldCompleted ? (jsxRuntime.jsx(antd.Button, __assign({ disabled: isExpired, onClick: function () { return setPaymentHoldModalVisible(true); }, type: "primary" }, { children: "Pay to accept" }))) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: !isAccepted ? (jsxRuntime.jsx(antd.Button, __assign({ disabled: isExpired || isAccepting, onClick: handleClickAccept, type: "primary" }, { children: isExpired ? 'Quote is expired' : 'Accept quote' }))) : null }))] })))] })));
+}
+function PaymentHoldDisplay(_a) {
+    var _b, _c, _d, _e;
+    var paymentHold = _a.paymentHold, currency = _a.currency, amount = _a.amount;
+    var paymentMethod = ((_c = (_b = paymentHold.paymentMethod) === null || _b === void 0 ? void 0 : _b.metadata) === null || _c === void 0 ? void 0 : _c.identifier)
+        ? (_e = (_d = paymentHold.paymentMethod) === null || _d === void 0 ? void 0 : _d.metadata) === null || _e === void 0 ? void 0 : _e.identifier
+        : 'N/A';
+    var formattedAmount = currency ? common.formatCurrency(amount, currency) : 'N/A';
+    var expirationDate = paymentHold.expiresAt ? common.formatDate(paymentHold.expiresAt) : 'N/A';
+    return (jsxRuntime.jsx(antd.Tooltip, __assign({ title: "".concat(formattedAmount, " will be charged to ").concat(paymentMethod, " once the quote is accepted. Hold will be released on ").concat(expirationDate, " if not accepted.") }, { children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(CustomizedTag, __assign({ color: 'orange', className: "rounded-md", style: { padding: 6 } }, { children: ["Hold of ", formattedAmount, " on ****", paymentMethod] })) }) })));
+}
+var templateObject_1$8;
-var QUOTES_QUERY = function (filter) { return "\n  query quotes {\n    quotes ".concat(filter ? "(".concat(filter, ")") : "", " {\n      pageInfo {\n        startCursor\n        endCursor\n        hasNextPage\n        hasPreviousPage\n      }\n      nodes {\n        id\n        name\n        account {\n          name\n          id\n        }\n        applicationDate\n        state\n        createdAt\n        expiresAt\n        currencyId\n        amount\n        number\n      }\n    }\n  }"); };
+var QUOTES_QUERY = function (filter) { return "\n  query quotes {\n    quotes ".concat(filter ? "(".concat(filter, ")") : '', " {\n      pageInfo {\n        startCursor\n        endCursor\n        hasNextPage\n        hasPreviousPage\n      }\n      nodes {\n        id\n        name\n        account {\n          name\n          id\n        }\n        applicationDate\n        state\n        createdAt\n        expiresAt\n        currencyId\n        amount\n        number\n      }\n    }\n  }"); };
 var getQuotes = function (_a) {
     var token = _a.token, apiHost = _a.apiHost, filter = _a.filter;
     return __awaiter(void 0, void 0, void 0, function () {
         var response;
         return __generator(this, function (_b) {
             switch (_b.label) {
-                case 0: return [4 /*yield*/, common.gqlRequest({
+                case 0: return [4 /*yield*/, gqlRequest({
                         query: QUOTES_QUERY(filter),
                         token: token,
                         vars: {},
@@ -19375,10 +19751,10 @@ var getColor = function (state) {
     }
 };
-var Text$l = antd.Typography.Text;
+var Text$m = antd.Typography.Text;
 var TransactionDate = function (_a) {
     var date = _a.date;
-    return jsxRuntime.jsx(Text$l, __assign({ className: "bunny-text-sm" }, { children: common.formatDate(date) }));
+    return jsxRuntime.jsx(Text$m, __assign({ className: "bunny-text-sm" }, { children: common.formatDate(date) }));
 };
 var ArrowDownToLine = function (_a) {
@@ -19408,20 +19784,20 @@ var TransactionGridCell = defaultStyled.div.withConfig({
     shouldForwardProp: function (prop) {
         return !["gridColumn", "padding", "right"].includes(prop);
     },
-})(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n  ", "\n\n  display: flex;\n  align-items: center;\n  justify-content: ", ";\n\n  text-align: ", ";\n  white-space: nowrap;\n  font-size: 14px;\n  color: ", ";\n\n  background-color: inherit;\n\n  padding: 1rem;\n  min-width: 48px;\n"], ["\n  ", "\n\n  display: flex;\n  align-items: center;\n  justify-content: ", ";\n\n  text-align: ", ";\n  white-space: nowrap;\n  font-size: 14px;\n  color: ", ";\n\n  background-color: inherit;\n\n  padding: 1rem;\n  min-width: 48px;\n"])), function (props) { return props.gridColumn && "grid-column: ".concat(props.gridColumn, ";"); }, function (props) {
+})(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  ", "\n\n  display: flex;\n  align-items: center;\n  justify-content: ", ";\n\n  text-align: ", ";\n  white-space: nowrap;\n  font-size: 14px;\n  color: ", ";\n\n  background-color: inherit;\n\n  padding: 1rem;\n  min-width: 48px;\n"], ["\n  ", "\n\n  display: flex;\n  align-items: center;\n  justify-content: ", ";\n\n  text-align: ", ";\n  white-space: nowrap;\n  font-size: 14px;\n  color: ", ";\n\n  background-color: inherit;\n\n  padding: 1rem;\n  min-width: 48px;\n"])), function (props) { return props.gridColumn && "grid-column: ".concat(props.gridColumn, ";"); }, function (props) {
     return props.right ? "flex-end" : "flex-start";
 }, function (props) {
     return props.right ? "right" : "left";
 }, common.SLATE_600);
-var templateObject_1$6;
+var templateObject_1$7;
-var Text$k = antd.Typography.Text;
+var Text$l = antd.Typography.Text;
 var TransactionsEmptyState = function () {
     var noTransactionsMessage = react.useContext(TransactionsListContext).noTransactionsMessage;
-    return (jsxRuntime.jsx(Text$k, __assign({ className: "bunny-flex bunny-justify-center bunny-p-4 bunny-text-base" }, { children: noTransactionsMessage || "There are no transactions" })));
+    return (jsxRuntime.jsx(Text$l, __assign({ className: "bunny-flex bunny-justify-center bunny-p-4 bunny-text-base" }, { children: noTransactionsMessage || "There are no transactions" })));
 };
-var Text$j = antd.Typography.Text;
+var Text$k = antd.Typography.Text;
 var isInvoice = function (transaction) {
     return transaction.kind === "INVOICE";
 };
@@ -19433,7 +19809,7 @@ var TransactionRowTitle = function (_a) {
     if (!isInvoice(transaction) && !isQuote(transaction)) {
         return jsxRuntime.jsx(jsxRuntime.Fragment, {});
     }
-    return (jsxRuntime.jsx(Text$j, __assign({ className: "bunny-text-slate-400", style: { fontSize: "11px" } }, { children: transaction.transactionable.number })));
+    return (jsxRuntime.jsx(Text$k, __assign({ className: "bunny-text-slate-400", style: { fontSize: "11px" } }, { children: transaction.transactionable.number })));
 };
 function transactionDateToDisplay(transaction, transactionDateType) {
@@ -19452,7 +19828,7 @@ function transactionDateToDisplay(transaction, transactionDateType) {
     }
 }
-var Text$i = antd.Typography.Text;
+var Text$j = antd.Typography.Text;
 var TransactionsListDesktop = function (_a) {
     var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
     var _b = react.useContext(TransactionsListContext), columns = _b.columns, transactionDateType = _b.transactionDateType;
@@ -19481,11 +19857,11 @@ var TransactionsListDesktop = function (_a) {
                         !showState &&
                         !showAmount &&
                         !showDownload &&
-                        !showAccountName && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(Text$i, { children: "No columns selected" }) })), showDate && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: false }, { children: jsxRuntime.jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) }) }))), showTitle && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(TransactionGridCell, __assign({ right: false, className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [jsxRuntime.jsx(Text$i, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] })) })), showAccountName && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: false }, { children: jsxRuntime.jsx(Text$i, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }) }))), !showDate && !showTitle && !showAccountName && (jsxRuntime.jsx(TransactionGridCell, { right: false })), showDownload && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })), showState ? (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(StateTag, { state: transaction.state }) }))) : null, showAmount && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(Text$i, { children: common.formatCurrency(((_b = transaction === null || transaction === void 0 ? void 0 : transaction.transactionable) === null || _b === void 0 ? void 0 : _b.amount) || transaction.amount, transaction.currencyId) }) })))] }), index));
+                        !showAccountName && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(Text$j, { children: "No columns selected" }) })), showDate && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: false }, { children: jsxRuntime.jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) }) }))), showTitle && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(TransactionGridCell, __assign({ right: false, className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [jsxRuntime.jsx(Text$j, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] })) })), showAccountName && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: false }, { children: jsxRuntime.jsx(Text$j, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }) }))), !showDate && !showTitle && !showAccountName && (jsxRuntime.jsx(TransactionGridCell, { right: false })), showDownload && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })), showState ? (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(StateTag, { state: transaction.state }) }))) : null, showAmount && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(Text$j, { children: common.formatCurrency(((_b = transaction === null || transaction === void 0 ? void 0 : transaction.transactionable) === null || _b === void 0 ? void 0 : _b.amount) || transaction.amount, transaction.currencyId) }) })))] }), index));
         }) }));
 };
-var Text$h = antd.Typography.Text;
+var Text$i = antd.Typography.Text;
 var TransactionsListMobile = function (_a) {
     var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
     var _b = react.useContext(TransactionsListContext), columns = _b.columns, transactionDateType = _b.transactionDateType;
@@ -19508,12 +19884,12 @@ var TransactionsListMobile = function (_a) {
                     backgroundColor: index % 2 === 0
                         ? "var(--row-background".concat(darkMode ? "-dark" : "", ")")
                         : "var(--row-background-alternate".concat(darkMode ? "-dark" : "", ")"),
-                } }, { children: [jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [(showTitle || showState) && (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [showTitle && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text$h, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] })), showState && jsxRuntime.jsx(StateTag, { state: transaction.state })] }))), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [showAccountName && jsxRuntime.jsx(Text$h, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }), showAccountName && showDate && jsxRuntime.jsx(Text$h, { children: "\u00B7" }), showDate && (jsxRuntime.jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) })), showDate && showAmount && jsxRuntime.jsx(Text$h, { children: "\u00B7" }), showAmount && (jsxRuntime.jsx(Text$h, { children: common.formatCurrency(transaction.transactionable.amount ||
+                } }, { children: [jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [(showTitle || showState) && (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [showTitle && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text$i, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] })), showState && jsxRuntime.jsx(StateTag, { state: transaction.state })] }))), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [showAccountName && jsxRuntime.jsx(Text$i, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }), showAccountName && showDate && jsxRuntime.jsx(Text$i, { children: "\u00B7" }), showDate && (jsxRuntime.jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) })), showDate && showAmount && jsxRuntime.jsx(Text$i, { children: "\u00B7" }), showAmount && (jsxRuntime.jsx(Text$i, { children: common.formatCurrency(transaction.transactionable.amount ||
                                                 transaction.amount, transaction.currencyId) }))] }))] })) }), showDownload && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })))] }), index));
         }) }));
 };
-var Text$g = antd.Typography.Text;
+var Text$h = antd.Typography.Text;
 var DISPLAY_WIDTH = 1200;
 function Transactions(_a) {
     var transactionComponent = _a.transactionComponent, _b = _a.showSearchBar, showSearchBar = _b === void 0 ? true : _b, _c = _a.showTitle, showTitle = _c === void 0 ? true : _c, _d = _a.title, title = _d === void 0 ? "Past transactions" : _d, _e = _a.columns, columns = _e === void 0 ? ["date", "title", "state", "amount", "download"] : _e, className = _a.className, _f = _a.shadow, shadow = _f === void 0 ? "shadow-md" : _f, searchBarClassName = _a.searchBarClassName, _g = _a.useModal, useModal = _g === void 0 ? false : _g, onTransactionClick = _a.onTransactionClick, _h = _a.suppressTransactionDisplay, suppressTransactionDisplay = _h === void 0 ? false : _h, _j = _a.kindsToShow, kindsToShow = _j === void 0 ? [
@@ -19626,7 +20002,7 @@ function TransactionsDisplay(_a) {
         onTransactionDisplayClose === null || onTransactionDisplayClose === void 0 ? void 0 : onTransactionDisplayClose(selectedTransaction);
         setDrawerOpen(false);
     }
-    return (jsxRuntime.jsxs("div", __assign({ style: style }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-w-full bunny-shadow-padding-xb bunny-gap-2 ".concat(isMobile ? "bunny-overflow-hidden" : "", " ").concat(className) }, { children: [showTitle || showSearchBar ? (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex ".concat(isMobile ? "bunny-flex-col bunny-gap-1" : "bunny-flex-row bunny-items-center", " bunny-justify-between") }, { children: [showTitle ? (jsxRuntime.jsx(Text$g, __assign({ className: "bunny-shrink-0 bunny-font-medium", style: { color: darkMode ? undefined : secondaryColor } }, { children: title }))) : (jsxRuntime.jsx("div", {}) // Empty div so justify-between works
+    return (jsxRuntime.jsxs("div", __assign({ style: style }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-w-full bunny-shadow-padding-xb bunny-gap-2 ".concat(isMobile ? "bunny-overflow-hidden" : "", " ").concat(className) }, { children: [showTitle || showSearchBar ? (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex ".concat(isMobile ? "bunny-flex-col bunny-gap-1" : "bunny-flex-row bunny-items-center", " bunny-justify-between") }, { children: [showTitle ? (jsxRuntime.jsx(Text$h, __assign({ className: "bunny-shrink-0 bunny-font-medium", style: { color: darkMode ? undefined : secondaryColor } }, { children: title }))) : (jsxRuntime.jsx("div", {}) // Empty div so justify-between works
                             ), showSearchBar && (jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile ? "bunny-w-full" : "") }, { children: jsxRuntime.jsx(antd.Input, { className: searchBarClassName
                                         ? searchBarClassName
                                         : "border border-slate-200", onChange: function (e) {
@@ -19744,7 +20120,7 @@ function QuotesWrapper() {
     return (jsxRuntime.jsx(TransactionsDisplay, { transactions: quotesAsTransactions, onSearchValueChanged: setSearch, search: search }));
 }
-var MUTATION$5 = function () { return "\nmutation AccountSignup (\n  $pluginId: String!,\n  $paymentMethodId: String,\n  $priceListCode: String!,\n  $accountId: ID!,\n  $quoteId: ID!,\n  $entityId: ID!\n) {\n  accountSignup(\n    pluginId: $pluginId,\n    paymentMethodId: $paymentMethodId,\n    priceListCode: $priceListCode,\n    accountId: $accountId,\n    quoteId: $quoteId,\n    entityId: $entityId\n  ) {\n    errors\n    quote {\n      acceptedByName\n      acceptedByTitle\n      accountId\n      amount\n      amountDue\n      applicationDate\n      applied\n      backdatedPeriods\n      backdatedQuote\n      billingDay\n      contactId\n      createdAt\n      credits\n      currencyId\n      dealId\n      discount\n      discountValue\n      endDate\n      evergreen\n      expiresAt\n      id\n      invoiceImmediately\n      invoiceImmediatelyAvailable\n      invoiceUntil\n      isPendingApprovalRequest\n      kind\n      message\n      name\n      netPaymentDays\n      notes\n      number\n      ownerId\n      payableId\n      periodAmount\n      poNumber\n      requiresApproval\n      smallUnitAmountDue\n      splitInvoice\n      startDate\n      state\n      subtotal\n      taxAmount\n      taxCode\n      updatedAt\n      uuid\n    }\n  }\n}"; };
+var MUTATION$6 = function () { return "\nmutation AccountSignup (\n  $pluginId: String!,\n  $paymentMethodId: String,\n  $priceListCode: String!,\n  $accountId: ID!,\n  $quoteId: ID!,\n  $entityId: ID!\n) {\n  accountSignup(\n    pluginId: $pluginId,\n    paymentMethodId: $paymentMethodId,\n    priceListCode: $priceListCode,\n    accountId: $accountId,\n    quoteId: $quoteId,\n    entityId: $entityId\n  ) {\n    errors\n    quote {\n      accountId\n      amount\n      amountDue\n      applicationDate\n      applied\n      backdatedPeriods\n      backdatedQuote\n      billingDay\n      contactId\n      createdAt\n      credits\n      currencyId\n      dealId\n      discount\n      discountValue\n      endDate\n      evergreen\n      expiresAt\n      id\n      invoiceImmediately\n      invoiceImmediatelyAvailable\n      invoiceUntil\n      isPendingApprovalRequest\n      kind\n      message\n      name\n      netPaymentDays\n      notes\n      number\n      ownerId\n      payableId\n      periodAmount\n      poNumber\n      requiresApproval\n      smallUnitAmountDue\n      splitInvoice\n      startDate\n      state\n      subtotal\n      taxAmount\n      taxCode\n      updatedAt\n      uuid\n    }\n  }\n}"; };
 var accountSignup = function (_a) {
     var token = _a.token, apiHost = _a.apiHost, accountId = _a.accountId, quoteId = _a.quoteId, paymentToken = _a.paymentToken, paymentMethodId = _a.paymentMethodId, pluginId = _a.pluginId, priceListCode = _a.priceListCode, entityId = _a.entityId;
     return __awaiter(void 0, void 0, void 0, function () {
@@ -19762,8 +20138,8 @@ var accountSignup = function (_a) {
                         priceListCode: priceListCode,
                         entityId: entityId,
                     };
-                    return [4 /*yield*/, common.gqlRequest({
-                            query: MUTATION$5(),
+                    return [4 /*yield*/, gqlRequest({
+                            query: MUTATION$6(),
                             token: token,
                             vars: vars,
                             apiHost: apiHost,
@@ -19779,7 +20155,7 @@ var accountSignup = function (_a) {
     });
 };
-var MUTATION$4 = function () { return "\nmutation QuoteAccountSignup (\n  $accountName: String!,\n  $billingContact: ContactAttributes!,\n  $priceListCode: String!,\n  $entityId: ID!\n) {\n  quoteAccountSignup(\n    priceListCode: $priceListCode,\n    accountName: $accountName,\n    billingContact: $billingContact,\n    entityId: $entityId\n  ) {\n    account {\n      id\n    }\n    quote {\n      acceptedByName\n      acceptedByTitle\n      accountId\n      amount\n      amountDue\n      applicationDate\n      applied\n      backdatedPeriods\n      backdatedQuote\n      billingDay\n      contactId\n      createdAt\n      credits\n      currencyId\n      dealId\n      discount\n      discountValue\n      endDate\n      evergreen\n      expiresAt\n      id\n      invoiceImmediately\n      invoiceImmediatelyAvailable\n      invoiceUntil\n      isPendingApprovalRequest\n      kind\n      message\n      name\n      netPaymentDays\n      notes\n      number\n      ownerId\n      payableId\n      periodAmount\n      poNumber\n      requiresApproval\n      smallUnitAmountDue\n      splitInvoice\n      startDate\n      state\n      subtotal\n      taxAmount\n      taxCode\n      updatedAt\n      uuid\n    }\n    tenant {\n      code\n    }\n    portalSessionToken\n    errors\n  }\n}"; };
+var MUTATION$5 = function () { return "\nmutation QuoteAccountSignup (\n  $accountName: String!,\n  $billingContact: ContactAttributes!,\n  $priceListCode: String!,\n  $entityId: ID!\n) {\n  quoteAccountSignup(\n    priceListCode: $priceListCode,\n    accountName: $accountName,\n    billingContact: $billingContact,\n    entityId: $entityId\n  ) {\n    account {\n      id\n    }\n    quote {\n      accountId\n      amount\n      amountDue\n      applicationDate\n      applied\n      backdatedPeriods\n      backdatedQuote\n      billingDay\n      contactId\n      createdAt\n      credits\n      currencyId\n      dealId\n      discount\n      discountValue\n      endDate\n      evergreen\n      expiresAt\n      id\n      invoiceImmediately\n      invoiceImmediatelyAvailable\n      invoiceUntil\n      isPendingApprovalRequest\n      kind\n      message\n      name\n      netPaymentDays\n      notes\n      number\n      ownerId\n      payableId\n      periodAmount\n      poNumber\n      requiresApproval\n      smallUnitAmountDue\n      splitInvoice\n      startDate\n      state\n      subtotal\n      taxAmount\n      taxCode\n      updatedAt\n      uuid\n    }\n    tenant {\n      code\n    }\n    portalSessionToken\n    errors\n  }\n}"; };
 var quoteAccountSignup = function (_a) {
     var token = _a.token, apiHost = _a.apiHost, priceListCode = _a.priceListCode, accountName = _a.accountName, billingContact = _a.billingContact, entityId = _a.entityId;
     return __awaiter(void 0, void 0, void 0, function () {
@@ -19794,8 +20170,8 @@ var quoteAccountSignup = function (_a) {
                         billingContact: billingContact,
                         entityId: entityId,
                     };
-                    return [4 /*yield*/, common.gqlRequest({
-                            query: MUTATION$4(),
+                    return [4 /*yield*/, gqlRequest({
+                            query: MUTATION$5(),
                             token: token,
                             vars: vars,
                             apiHost: apiHost,
@@ -19811,14 +20187,41 @@ var quoteAccountSignup = function (_a) {
     });
 };
-var MUTATION$3 = function () { return "\nquery PriceList($code: String!) {\n  priceList (code: $code) {\n    basePrice\n    code\n    createdAt\n    currencyId\n    id\n    isVisible\n    name\n    periodMonths\n    planId\n    priceDescription\n    productId\n    sku\n    trialAllowed\n    trialLengthDays\n    updatedAt\n  }\n}"; };
+var MUTATION$4 = "mutation quoteAddCoupon($couponCode: String!, $quoteId: ID!) {\n    quoteAddCoupon(couponCode: $couponCode, quoteId: $quoteId) {\n      quote {\n        id\n        subtotal\n        taxAmount\n        amount\n        quoteChanges {\n          id\n          charges {\n            id\n            amount\n            couponId\n          }\n        }\n      }\n    }\n}";
+var quoteAddCoupon = function (_a) {
+    var quoteId = _a.quoteId, couponCode = _a.couponCode, token = _a.token, apiHost = _a.apiHost;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var vars, response, errors;
+        var _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    vars = { quoteId: quoteId, couponCode: couponCode };
+                    return [4 /*yield*/, gqlRequest({
+                            query: MUTATION$4,
+                            token: token,
+                            vars: vars,
+                            apiHost: apiHost,
+                        })];
+                case 1:
+                    response = _c.sent();
+                    errors = (_b = response === null || response === void 0 ? void 0 : response.quoteAddCoupon) === null || _b === void 0 ? void 0 : _b.errors;
+                    if (errors)
+                        throw errors;
+                    return [2 /*return*/, response.quote];
+            }
+        });
+    });
+};
+var MUTATION$3 = function () { return "\nquery PriceList($code: String!) {\n  priceList (code: $code) {\n    basePrice\n    code\n    createdAt\n    currencyId\n    id\n    isVisible\n    name\n    periodMonths\n    planId\n    priceDescription\n    productId\n    product {\n      name\n    }\n    sku\n    trialAllowed\n    trialLengthDays\n    updatedAt\n  }\n}"; };
 var getPriceList = function (_a) {
     var token = _a.token, code = _a.code, apiHost = _a.apiHost;
     return __awaiter(void 0, void 0, void 0, function () {
         var response;
         return __generator(this, function (_b) {
             switch (_b.label) {
-                case 0: return [4 /*yield*/, common.gqlRequest({
+                case 0: return [4 /*yield*/, gqlRequest({
                         query: MUTATION$3(),
                         token: token,
                         vars: { code: code },
@@ -19832,22 +20235,74 @@ var getPriceList = function (_a) {
     });
 };
+var QUOTE_QUERY = function (id) { return "\n        query quote {\n            quote ".concat(id ? "(id: ".concat(id, ")") : '', " {\n                accountId\n                amount\n                amountDue\n                smallUnitAmountDue\n                currencyId\n                formattedQuote {\n                  html\n                }\n                id\n                payableId\n                periodAmount\n                subtotal\n                taxAmount\n                amountsByPeriod {\n                    amount\n                    startDate\n                }\n                quoteChanges {\n                    currencyId\n                    id\n                    kind\n                    charges {\n                        amountsByPeriod {\n                          amount\n                          startDate\n                        }\n                        amount\n                        billingPeriod\n                        currencyId\n                        feature {\n                          unitName\n                        }\n                        id\n                        name\n                        priceListCharge {\n                          id\n                        }\n                        priceList {\n                          id\n                        }\n                        couponId\n                        quantity\n                        kind\n                    }\n                    priceList {\n                        id\n                        plan {\n                            name\n                        }\n                        product {\n                            name\n                        }\n                    }\n\n                }\n            }\n        }"); };
+var getQuote = function (_a) {
+    var id = _a.id, token = _a.token, apiHost = _a.apiHost;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var response;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0: return [4 /*yield*/, gqlRequest({
+                        query: QUOTE_QUERY(id),
+                        token: token,
+                        vars: {},
+                        apiHost: apiHost,
+                    })];
+                case 1:
+                    response = _b.sent();
+                    return [2 /*return*/, response === null || response === void 0 ? void 0 : response.quote];
+            }
+        });
+    });
+};
+var useCurrentUserData = function () {
+    var queryClient = reactQuery.useQueryClient();
+    var token = useToken();
+    var currentUser = queryClient.getQueryData(common.QueryKeyFactory.default.currentUserKey(token));
+    if (!currentUser)
+        return {};
+    return currentUser;
+};
+var BunnyFooterIcon = function (_a) {
+    var color = _a.color;
+    return (jsxRuntime.jsxs("svg", __assign({ width: "45", height: "15", viewBox: "0 0 39 13", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsxs("g", __assign({ clipPath: "url(#clip0_6_851)" }, { children: [jsxRuntime.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 }), jsxRuntime.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 }), jsxRuntime.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 }), jsxRuntime.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 }), jsxRuntime.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 }), jsxRuntime.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 })] })), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", __assign({ id: "clip0_6_851" }, { children: jsxRuntime.jsx("rect", { width: "39", height: "13", fill: "white" }) })) })] })));
+};
+var Text$g = antd.Typography.Text;
+var Footer = function (_a) {
+    var className = _a.className;
+    var _b = useCurrentUserData(), privacyUrl = _b.privacyUrl, termsUrl = _b.termsUrl;
+    var isMobile = common.useIsMobile();
+    return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-between bunny-shrink-0 ".concat(isMobile ? 'bunny-flex-col bunny-gap-2 bunny-grow' : '', " ").concat(className) }, { children: [(termsUrl || privacyUrl) && (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-3" }, { children: [termsUrl && (jsxRuntime.jsx(StyedLink, __assign({ className: "bunny-text-xs bunny-text-slate-400", href: termsUrl, rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: "Terms" }))), privacyUrl && (jsxRuntime.jsx(StyedLink, __assign({ className: "bunny-text-xs bunny-text-slate-400", href: privacyUrl, rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: "Privacy" })))] }))), jsxRuntime.jsx(BunnyMarketingLink, {})] })));
+};
+var BunnyMarketingLink = function () {
+    var _a = react.useState(false), isHovered = _a[0], setIsHovered = _a[1];
+    var isMobile = common.useIsMobile();
+    return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-items-end bunny-justify-end ".concat(isMobile ? '' : 'grow') }, { children: jsxRuntime.jsx(StyledBunnyLink, __assign({ className: "bunny-flex bunny-items-end bunny-justify-end bunny-text-slate-400", href: "https://bunny.com/", rel: "noopener noreferrer", target: "_blank" }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center", onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: [jsxRuntime.jsx(Text$g, __assign({ className: "bunny-text-xs bunny-text-slate-400" }, { children: "Powered by\u00A0" })), jsxRuntime.jsx("div", __assign({ style: { paddingTop: '5px' } }, { children: jsxRuntime.jsx(BunnyFooterIcon, { color: isHovered ? common.PRIMARY_COLOR : common.SLATE_400 }) }))] })) })) })));
+};
+var StyedLink = styled__default["default"].a(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n  color: ", ";\n  transition: color 0.3s;\n  &:hover {\n    color: ", ";\n  }\n  text-decoration: none;\n  font-size: 14px;\n"], ["\n  color: ", ";\n  transition: color 0.3s;\n  &:hover {\n    color: ", ";\n  }\n  text-decoration: none;\n  font-size: 14px;\n"])), common.SLATE_400, common.SLATE_500);
+var StyledBunnyLink = styled__default["default"](StyedLink)(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n  &:hover {\n    color: ", " !important;\n  }\n"], ["\n  &:hover {\n    color: ", " !important;\n  }\n"])), common.PRIMARY_COLOR);
+var templateObject_1$6, templateObject_2$1;
+var Title$1 = antd.Typography.Title;
 function PaymentForms(_a) {
     var quote = _a.quote, handlePaymentSuccess = _a.handlePaymentSuccess, handlePaymentFail = _a.handlePaymentFail, handleSubmit = _a.handleSubmit, proceedingToPayment = _a.proceedingToPayment, accountId = _a.accountId, overrideToken = _a.overrideToken, customCheckoutFunction = _a.customCheckoutFunction;
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: quote ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: overrideToken ? (jsxRuntime.jsx(PaymentForm, { onFail: handlePaymentFail, onPaymentSuccess: handlePaymentSuccess, accountId: accountId, quote: quote, overrideToken: overrideToken, customCheckoutFunction: customCheckoutFunction })) : null })) : (jsxRuntime.jsx(InitialSignupForm, { onSubmit: handleSubmit, submitting: proceedingToPayment })) }));
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: quote ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: overrideToken ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Title$1, __assign({ className: "bunny-px-4 bunny-m-0", level: 2 }, { children: "Payment" })), jsxRuntime.jsx(PaymentForm, { onFail: handlePaymentFail, onPaymentSuccess: handlePaymentSuccess, accountId: accountId, quote: quote, overrideToken: overrideToken, customCheckoutFunction: customCheckoutFunction })] })) : null })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Title$1, __assign({ className: "bunny-px-4 bunny-m-0", level: 2 }, { children: "Signup" })), jsxRuntime.jsx(InitialSignupForm, { className: "bunny-px-4", onSubmit: handleSubmit, submitting: proceedingToPayment })] })) }));
 }
 function InitialSignupForm(_a) {
-    var onSubmit = _a.onSubmit, submitting = _a.submitting;
+    var className = _a.className, onSubmit = _a.onSubmit, submitting = _a.submitting;
     var form = antd.Form.useForm()[0];
     function handleSubmit() {
         form.validateFields({ validateOnly: false }).then(function () {
             onSubmit(form.getFieldsValue());
         });
     }
-    return (jsxRuntime.jsxs(antd.Form, __assign({ className: "bunny-flex bunny-flex-col bunny-justify-between bunny-h-full bunny-w-full", form: form, layout: "vertical", autoComplete: "off" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-space-y-2" }, { children: [jsxRuntime.jsx(antd.Form.Item, __assign({ name: "firstName", rules: [{ required: true, message: 'Please input your first name!' }] }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "First name" }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ name: "lastName", rules: [{ required: true, message: 'Please input your last name!' }] }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Last name" }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ name: "email", rules: [
-                            { required: true, message: 'Please input your email!' },
-                            { type: 'email', message: 'Please enter a valid email!' },
-                        ] }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Email" }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ name: "accountName", rules: [{ required: true, message: 'Please input your company name!' }] }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Company name" }) }))] })), jsxRuntime.jsx(antd.Form.Item, { children: jsxRuntime.jsx(antd.Button, __assign({ type: "primary", onClick: handleSubmit, loading: submitting, className: "bunny-w-full bunny-mt-4" }, { children: "Proceed to payment" })) })] })));
+    return (jsxRuntime.jsx(antd.Form, __assign({ className: "bunny-flex bunny-flex-col bunny-h-full bunny-w-full ".concat(className), form: form, layout: "vertical", autoComplete: "off" }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-space-y-2" }, { children: [jsxRuntime.jsx(antd.Form.Item, __assign({ name: "firstName", rules: [{ required: true, message: 'First name is required' }] }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "First name" }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ name: "lastName", rules: [{ required: true, message: 'Last name is required' }] }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Last name" }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ name: "email", rules: [
+                        { required: true, message: 'Email is required' },
+                        { type: 'email', message: 'Please enter a valid email' },
+                    ] }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Email" }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ name: "accountName", rules: [{ required: true, message: 'Company name is required' }] }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Company name" }) })), jsxRuntime.jsx(antd.Form.Item, { children: jsxRuntime.jsx(antd.Button, __assign({ type: "primary", onClick: handleSubmit, loading: submitting, className: "bunny-w-full" }, { children: "Proceed to payment" })) })] })) })));
 }
 var Title = antd.Typography.Title, Text$f = antd.Typography.Text;
@@ -19858,26 +20313,27 @@ function PaymentSuccessDisplay(_a) {
 var Text$e = antd.Typography.Text;
 function PriceListDisplay(_a) {
-    var priceListData = _a.priceListData, topNavImageUrl = _a.topNavImageUrl;
+    var priceListData = _a.priceListData;
     if (!priceListData)
         return null;
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-justify-between bunny-h-full bunny-my-12" }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-space-y-8" }, { children: [jsxRuntime.jsx(antd.Image, { width: 24, src: topNavImageUrl, alt: "Logo", preview: false }), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col" }, { children: [jsxRuntime.jsx(Text$e, __assign({ className: "bunny-text-slate-500 bunny-font-bold bunny-text-lg" }, { children: priceListData.name })), jsxRuntime.jsxs(Text$e, __assign({ className: "bunny-font-bold bunny-text-xl" }, { children: [common.formatCurrency(priceListData.basePrice, priceListData.currencyId), " ", "/ month"] }))] })), priceListData.trialAllowed ? (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col" }, { children: [jsxRuntime.jsxs(Text$e, __assign({ style: { fontSize: "16px" }, className: "bunny-text-slate-500" }, { children: [priceListData.trialLengthDays, " day trial"] })), jsxRuntime.jsx(Text$e, __assign({ className: "bunny-text-slate-500", style: { fontSize: "12px" } }, { children: "You will not be charged until the last day of the trial." }))] }))) : null] })) })) }));
+    return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-space-y-8" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [jsxRuntime.jsxs(Text$e, __assign({ className: "bunny-text-slate-500 bunny-font-bold bunny-text-lg" }, { children: [priceListData.product.name, " ", priceListData.name] })), jsxRuntime.jsxs(Text$e, __assign({ className: "bunny-font-bold bunny-text-xl" }, { children: [common.formatCurrency(priceListData.basePrice, priceListData.currencyId), " / month"] }))] })), priceListData.trialAllowed ? (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col" }, { children: [jsxRuntime.jsxs(Text$e, __assign({ style: { fontSize: '16px' }, className: "bunny-text-slate-500" }, { children: [priceListData.trialLengthDays, " day trial"] })), jsxRuntime.jsx(Text$e, __assign({ className: "bunny-text-slate-500", style: { fontSize: '12px' } }, { children: "You will not be charged until the last day of the trial." }))] }))) : null] })));
 }
 var showErrorNotification = common.useErrorNotification();
 function Signup(_a) {
-    var companyName = _a.companyName, priceListCode = _a.priceListCode, returnUrl = _a.returnUrl, _b = _a.isCardEnabled, isCardEnabled = _b === void 0 ? true : _b, className = _a.className, _c = _a.shadow, shadow = _c === void 0 ? "shadow-md" : _c, style = _a.style, entityId = _a.entityId;
+    var companyName = _a.companyName, priceListCode = _a.priceListCode, returnUrl = _a.returnUrl, couponCode = _a.couponCode, className = _a.className, _b = _a.shadow, shadow = _b === void 0 ? 'shadow-md' : _b, style = _a.style, entityId = _a.entityId;
     // Hooks
     var apiHost = react.useContext(BunnyContext).apiHost;
     var tokenFromContexts = useToken();
     var isMobile = common.useIsMobile();
     var topNavImageUrl = react.useContext(BrandContext).topNavImageUrl;
-    var _d = react.useState(undefined), quote = _d[0], setQuote = _d[1];
-    var _e = react.useState(undefined), accountId = _e[0], setAccountId = _e[1];
-    var _f = react.useState(undefined), portalSessionToken = _f[0], setPortalSessionToken = _f[1];
+    var _c = react.useState(undefined), initialQuote = _c[0], setInitialQuote = _c[1];
+    var _d = react.useState(undefined), accountId = _d[0], setAccountId = _d[1];
+    var _e = react.useState(undefined), portalSessionToken = _e[0], setPortalSessionToken = _e[1];
     var token = portalSessionToken || tokenFromContexts;
-    var _g = react.useState(false), proceedingToPayment = _g[0], setProceedingToPayment = _g[1];
-    var _h = react.useState(false), purchaseSucceeded = _h[0], setPurchaseSucceeded = _h[1];
+    var _f = react.useState(false), proceedingToPayment = _f[0], setProceedingToPayment = _f[1];
+    var _g = react.useState(false), purchaseSucceeded = _g[0], setPurchaseSucceeded = _g[1];
+    var defaultCouponAppliedRef = react.useRef(undefined);
     var defaultPaymentMethod = usePaymentMethod({
         accountId: accountId,
         token: token,
@@ -19885,13 +20341,57 @@ function Signup(_a) {
     }).defaultPaymentMethod;
     var queryClient = reactQuery.useQueryClient();
     // Queries
-    var priceListData = reactQuery.useQuery({
-        queryKey: ["priceList", priceListCode],
+    var _h = reactQuery.useQuery({
+        queryKey: ['priceList', priceListCode],
         queryFn: function () { return getPriceList({ token: token, apiHost: apiHost, code: priceListCode }); },
-    }).data;
+    }), priceListData = _h.data, isLoadingPriceList = _h.isLoading;
+    var _j = reactQuery.useQuery({
+        queryKey: ['quote', initialQuote === null || initialQuote === void 0 ? void 0 : initialQuote.id],
+        queryFn: function () {
+            if (!(initialQuote === null || initialQuote === void 0 ? void 0 : initialQuote.id)) {
+                throw new Error('Quote ID is required');
+            }
+            return getQuote({ token: token, apiHost: apiHost, id: initialQuote === null || initialQuote === void 0 ? void 0 : initialQuote.id });
+        },
+        enabled: !!(initialQuote === null || initialQuote === void 0 ? void 0 : initialQuote.id),
+    }), data = _j.data, isLoadingQuote = _j.isLoading;
+    var quote = data || initialQuote;
+    var _k = reactQuery.useMutation({
+        mutationFn: function (couponCode) {
+            if (!quote) {
+                throw new Error('Quote is required');
+            }
+            if (!token) {
+                throw new Error('Token is required');
+            }
+            return quoteAddCoupon({
+                quoteId: quote.id,
+                couponCode: couponCode,
+                apiHost: apiHost,
+                token: token,
+            });
+        },
+        onSuccess: function () {
+            queryClient.refetchQueries({
+                queryKey: ['quote', quote === null || quote === void 0 ? void 0 : quote.id],
+            });
+            showSuccessNotification('Coupon applied');
+        },
+        onError: function (error) {
+            var _a, _b;
+            showErrorNotification((_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');
+        },
+    }), addCoupon = _k.mutate, isAddingCoupon = _k.isPending;
+    // Handle default coupon application
+    react.useEffect(function () {
+        if (couponCode && (quote === null || quote === void 0 ? void 0 : quote.id) && defaultCouponAppliedRef.current !== couponCode) {
+            addCoupon(couponCode);
+            defaultCouponAppliedRef.current = couponCode;
+        }
+    }, [couponCode, quote === null || quote === void 0 ? void 0 : quote.id]);
     function handleSubmit(formData) {
         return __awaiter(this, void 0, void 0, function () {
-            var data, error_1;
+            var data_1, error_1;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
@@ -19910,9 +20410,9 @@ function Signup(_a) {
                                 entityId: entityId,
                             })];
                     case 1:
-                        data = _a.sent();
-                        setAccountId(data.account.id);
-                        setPortalSessionToken(data.portalSessionToken);
+                        data_1 = _a.sent();
+                        setAccountId(data_1.account.id);
+                        setPortalSessionToken(data_1.portalSessionToken);
                         // We must invalidate the accountPaymentMethodKey query in order to clear payment methods from the provided api token,
                         // to instead use paymentMethods from portalSessionToken.
                         queryClient.invalidateQueries({
@@ -19922,7 +20422,7 @@ function Signup(_a) {
                             }),
                         });
                         setProceedingToPayment(false);
-                        setQuote(data.quote);
+                        setInitialQuote(data_1.quote);
                         return [3 /*break*/, 3];
                     case 2:
                         error_1 = _a.sent();
@@ -19948,16 +20448,16 @@ function Signup(_a) {
                 switch (_a.label) {
                     case 0:
                         if (!portalSessionToken) {
-                            throw new Error("Portal session token is required");
+                            throw new Error('Portal session token is required');
                         }
                         if (!accountId) {
-                            throw new Error("Account ID is required");
+                            throw new Error('Account ID is required');
                         }
                         if (!(plugin === null || plugin === void 0 ? void 0 : plugin.id)) {
-                            throw new Error("Plugin ID is required");
+                            throw new Error('Plugin ID is required');
                         }
                         if (!(defaultPaymentMethod === null || defaultPaymentMethod === void 0 ? void 0 : defaultPaymentMethod.id)) {
-                            throw new Error("Payment method ID is required");
+                            throw new Error('Payment method ID is required');
                         }
                         return [4 /*yield*/, accountSignup({
                                 token: portalSessionToken,
@@ -19977,45 +20477,27 @@ function Signup(_a) {
     function handlePaymentFail(error) {
         showErrorNotification(error.response.message);
     }
-    var WrapperComponent = function (_a) {
-        var children = _a.children, className = _a.className, style = _a.style;
-        return isCardEnabled ? (jsxRuntime.jsx(Card, __assign({ className: className, style: style }, { children: children }))) : (jsxRuntime.jsx("div", __assign({ className: className, style: style }, { children: children })));
-    };
-    return (jsxRuntime.jsx(WrapperComponent, __assign({ className: "bunny-p-4 bunny-flex bunny-flex-col ".concat(shadow, " ").concat(className), style: style }, { children: purchaseSucceeded ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (quote === null || quote === void 0 ? void 0 : quote.currencyId) !== undefined ? (jsxRuntime.jsx(PaymentSuccessDisplay, { amountPaid: (quote === null || quote === void 0 ? void 0 : quote.amountDue) || 0, className: "bunny-w-full", companyName: companyName, returnUrl: returnUrl, currencyId: quote === null || quote === void 0 ? void 0 : quote.currencyId })) : (jsxRuntime.jsx("div", { children: "No currency ID found from Quote" })) })) : (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex ".concat(isMobile ? "bunny-flex-col" : "bunny-flex-row", " bunny-h-full bunny-w-full") }, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col ".concat(isMobile ? "bunny-items-center" : "bunny-w-1/2 bunny-items-center") }, { children: jsxRuntime.jsx(PriceListDisplay, { priceListData: priceListData, topNavImageUrl: topNavImageUrl }) })), jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile ? "bunny-h-full" : "bunny-my-4") }, { children: jsxRuntime.jsx(antd.Divider, { className: "bunny-h-full", type: isMobile ? undefined : "vertical" }) })), jsxRuntime.jsx("div", __assign({ className: "bunny-flex ".concat(isMobile
-                        ? "bunny-items-center bunny-justify-center bunny-my-12"
-                        : "bunny-w-1/2 bunny-items-center bunny-justify-center bunny-my-12") }, { children: jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile ? "bunny-w-full" : "bunny-w-1/2") }, { children: jsxRuntime.jsx(PaymentForms, { quote: quote, handlePaymentSuccess: handlePaymentSuccess, handlePaymentFail: handlePaymentFail, handleSubmit: handleSubmit, proceedingToPayment: proceedingToPayment, accountId: accountId, overrideToken: portalSessionToken, customCheckoutFunction: accountSignupFunction }) })) }))] }))) })));
-}
-var createRequestHeaders = function (token) {
-    var bearerToken = token ? "Bearer ".concat(token) : null;
-    var headers = {
-        "Content-type": "application/json; charset=utf-8",
-    };
-    if (bearerToken) {
-        headers["Authorization"] = bearerToken;
+    if (purchaseSucceeded) {
+        return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (quote === null || quote === void 0 ? void 0 : quote.currencyId) !== undefined ? (jsxRuntime.jsx("div", __assign({ className: "bunny-w-screen bunny-flex bunny-items-start bunny-pt-[25vh]" }, { children: jsxRuntime.jsx(PaymentSuccessDisplay, { amountPaid: (quote === null || quote === void 0 ? void 0 : quote.amountDue) || 0, className: "bunny-w-full", companyName: companyName, returnUrl: returnUrl, currencyId: quote === null || quote === void 0 ? void 0 : quote.currencyId }) }))) : (jsxRuntime.jsx("div", { children: "No currency ID found from Quote" })) }));
     }
-    return headers;
-};
-var getGraphQLBaseURL = function (apiHost) {
-    return "".concat(apiHost, "/graphql");
-};
-var useGraphQLRequest = function () {
-    return function (query, apiHost, token, variables) { return __awaiter(void 0, void 0, void 0, function () {
-        var error_1;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    _a.trys.push([0, 2, , 3]);
-                    return [4 /*yield*/, request__default["default"](getGraphQLBaseURL(apiHost), query, variables, createRequestHeaders(token))];
-                case 1: return [2 /*return*/, _a.sent()];
-                case 2:
-                    error_1 = _a.sent();
-                    throw error_1;
-                case 3: return [2 /*return*/];
-            }
-        });
-    }); };
+    return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex ".concat(isMobile ? 'bunny-flex-col' : 'bunny-flex-row', " bunny-h-screen bunny-w-screen bunny-absolute bunny-top-0 bunny-left-0 ").concat(shadow, " ").concat(className), style: style }, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-items-center bunny-flex-col ".concat(isMobile ? 'bunny-w-full bunny-h-1/2' : 'bunny-w-1/2 bunny-h-full', " bunny-justify-center") }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-start bunny-justify-between bunny-w-3/5 bunny-h-full bunny-gap-4 bunny-my-24" }, { children: [jsxRuntime.jsx("div", { children: topNavImageUrl.length > 0 && (jsxRuntime.jsx(antd.Image, { width: 24, src: topNavImageUrl, alt: "Logo", preview: false })) }), data ? (jsxRuntime.jsx(CheckoutSummary, { quote: data, className: "bunny-h-full bunny-w-full", onAddCoupon: addCoupon, priceListData: priceListData, isAddingCoupon: isAddingCoupon })) : (jsxRuntime.jsx("div", __assign({ className: "bunny-h-full" }, { children: isLoadingPriceList ? (jsxRuntime.jsx(antd.Skeleton, { active: true })) : (jsxRuntime.jsx(PriceListDisplay, { priceListData: priceListData })) }))), jsxRuntime.jsx(Footer, {})] })) })), jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col ".concat(isMobile ? 'bunny-w-full bunny-h-1/2 bunny-overflow-auto' : 'bunny-w-1/2 bunny-h-full', " bunny-items-center"), style: {
+                    boxShadow: '-5px 0 20px 0 rgba(0, 0, 0, 0.05)',
+                } }, { children: isLoadingPriceList ? (jsxRuntime.jsx(antd.Skeleton, { active: true, className: "bunny-flex bunny-flex-col bunny-w-3/5 bunny-mt-24" })) : (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-w-3/5 bunny-mt-24" }, { children: jsxRuntime.jsx(PaymentForms, { quote: isLoadingQuote ? undefined : quote, handlePaymentSuccess: handlePaymentSuccess, handlePaymentFail: handlePaymentFail, handleSubmit: handleSubmit, proceedingToPayment: proceedingToPayment, accountId: accountId, overrideToken: portalSessionToken, customCheckoutFunction: accountSignupFunction }) }))) }))] })));
+}
+var Text$d = antd.Typography.Text;
+var CheckoutSummaryDivider = function () {
+    return (jsxRuntime.jsx("div", __assign({ className: "bunny-my-2" }, { children: jsxRuntime.jsx(antd.Divider, { className: "m-0" }) })));
 };
+var showSuccessNotification = common.useSuccessNotification();
+function CheckoutSummary(_a) {
+    var quote = _a.quote, className = _a.className; _a.onAddCoupon; var priceListData = _a.priceListData; _a.isAddingCoupon;
+    return (jsxRuntime.jsxs("div", __assign({ className: "".concat(className, " bunny-space-y-4") }, { children: [jsxRuntime.jsxs(Text$d, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-text-lg bunny-font-medium bunny-mb-4" }, { children: ["Checkout summary - ", priceListData === null || priceListData === void 0 ? void 0 : priceListData.product.name, " ", priceListData === null || priceListData === void 0 ? void 0 : priceListData.name] })), jsxRuntime.jsx("div", __assign({ className: "bunny-space-y-4" }, { children: quote === null || quote === void 0 ? void 0 : quote.quoteChanges.map(function (quoteChange) {
+                            return quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.map(function (charge) {
+                                var multiplier = charge.kind === 'COUPON' ? -1 : 1;
+                                return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-justify-between" }, { children: [jsxRuntime.jsx("div", { children: charge.name }), jsxRuntime.jsx("div", { children: charge.quantity }), jsxRuntime.jsx("div", { children: common.formatCurrency(multiplier * charge.amount, charge.currencyId) })] }), charge.id));
+                            });
+                        }) })), jsxRuntime.jsx(CheckoutSummaryDivider, {}), jsxRuntime.jsxs("div", __assign({ className: "bunny-space-y-4" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-justify-between" }, { children: [jsxRuntime.jsx("div", { children: "Subtotal" }), jsxRuntime.jsx("div", { children: common.formatCurrency(quote.amountDue, quote.currencyId) })] })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-justify-between" }, { children: [jsxRuntime.jsx("div", { children: "Taxes" }), jsxRuntime.jsx("div", { children: common.formatCurrency(quote.taxAmount, quote.currencyId) })] }))] })), jsxRuntime.jsx(CheckoutSummaryDivider, {}), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-justify-between" }, { children: [jsxRuntime.jsx("div", { children: "Total" }), jsxRuntime.jsx("div", { children: common.formatCurrency(quote.amountDue + quote.taxAmount, quote.currencyId) })] }))] }), false ] })));
+}
 var useQuoteSubscriptionUpgrade = function () {
     var graphQLRequest = useGraphQLRequest();
@@ -20076,27 +20558,6 @@ var useQuoteDelete = function () {
     }); };
 };
-var QUOTE_QUERY = function (id) { return "\n        query quote {\n            quote ".concat(id ? "(id: ".concat(id, ")") : '', " {\n                accountId\n                amount\n                amountDue\n                smallUnitAmountDue\n                currencyId\n                formattedQuote {\n                  html\n                }\n                id\n                payableId\n                periodAmount\n                subtotal\n                taxAmount\n                amountsByPeriod {\n                    amount\n                    startDate\n                }\n                quoteChanges {\n                    currencyId\n                    id\n                    charges {\n                        amountsByPeriod {\n                          amount\n                          startDate\n                        }\n                        amount\n                        billingPeriod\n                        currencyId\n                        feature {\n                          unitName\n                        }\n                        id\n                        name\n                        priceListCharge {\n                          id\n                        }\n                        priceList {\n                          id\n                        }\n                        quantity\n                    }\n                    priceList {\n                        id\n                        plan {\n                            name\n                        }\n                        product {\n                            name\n                        }\n                    }\n\n                }\n            }\n        }"); };
-var getQuote = function (_a) {
-    var id = _a.id, token = _a.token, apiHost = _a.apiHost;
-    return __awaiter(void 0, void 0, void 0, function () {
-        var response;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
-                case 0: return [4 /*yield*/, common.gqlRequest({
-                        query: QUOTE_QUERY(id),
-                        token: token,
-                        vars: {},
-                        apiHost: apiHost,
-                    })];
-                case 1:
-                    response = _b.sent();
-                    return [2 /*return*/, response === null || response === void 0 ? void 0 : response.quote];
-            }
-        });
-    });
-};
 var SUBSCRIPTIONS_QUERY = "\nquery subscriptions {\n    subscriptions {\n      nodes {\n        cancellationDate\n        currencyId\n        endDate\n        evergreen\n        id\n        period\n        plan { id name selfServiceBuy selfServiceCancel selfServiceRenew }\n        priceList { id periodMonths }\n        product { id name showProductNameOnLineItem }\n        startDate\n        state\n        trialEndDate\n        trialPeriod\n        trialStartDate\n        charges {\n          priceListCharge {\n            priceListChargeTiers {\n              price\n              starts\n            }\n          }\n          amount\n          billingPeriod\n          chargeType\n          discount\n          discountedPrice\n          endDate\n          expired\n          feature { name }\n          id\n          isAmendment\n          isRamp\n          kind\n          name\n          periodPrice\n          price\n          priceDecimals\n          priceListChargeId\n          priceTiers { starts price }\n          pricingModel\n          quantity\n          selfServiceQuantity\n          startDate\n          trial\n        }\n      }\n    }\n  }";
 var getSubscriptions = function (_a) {
     var apiHost = _a.apiHost, isInPreviewMode = _a.isInPreviewMode, token = _a.token;
@@ -20105,7 +20566,7 @@ var getSubscriptions = function (_a) {
         var _b, _c;
         return __generator(this, function (_d) {
             switch (_d.label) {
-                case 0: return [4 /*yield*/, common.gqlRequest({
+                case 0: return [4 /*yield*/, gqlRequest({
                         isInPreviewMode: isInPreviewMode,
                         query: SUBSCRIPTIONS_QUERY,
                         token: token,
@@ -20124,7 +20585,7 @@ var pageWrapperClassName = function (isMobile) {
     return "flex flex-col grow pt-4 ".concat(isMobile ? "pb-4 overflow-hidden" : "pb-8", " ").concat("content-container");
 };
-var QUOTE_FIELDS = "quote {\n  formattedQuote {\n    html\n  }\n  acceptedByName\n  acceptedByTitle\n  accountId\n  amount\n  amountDue\n  applicationDate\n  applied\n  billingDay\n  contactId\n  createdAt\n  credits\n  currencyId\n  dealId\n  discount\n  discountValue\n  endDate\n  evergreen\n  expiresAt\n  id\n  invoiceUntil\n  isPendingApprovalRequest\n  kind\n  message\n  name\n  netPaymentDays\n  notes\n  ownerId\n  periodAmount\n  poNumber\n  requiresApproval\n  startDate\n  state\n  subtotal\n  taxAmount\n  updatedAt\n  uuid\n  amountsByPeriod {\n    amount\n    id\n    name\n  }\n  endDateOptions {\n    endDate\n    label\n  }\n  invoiceUntilOptions {\n    endDate\n    label\n  }\n  quoteChanges {\n    id\n    priceListId\n    charges {\n      amount\n      amountsByPeriod { amount startDate }\n      billingPeriod\n      billingPeriodAmounts { id amount prorationRate }\n      chargeType\n      couponId\n      createdAt\n      currencyId\n      discount\n      endDate\n      feature { id name code isUnit unitName }\n      id\n      invoiceLineText\n      name\n      price\n      priceDecimals\n      priceTiers { starts price }\n      pricingModel\n      prorationRate\n      quantity\n      quantityMax\n      quantityMin\n      startDate\n      tieredAveragePrice\n      updatedAt\n    }\n  }\n}";
+var QUOTE_FIELDS = "quote {\n  formattedQuote {\n    html\n  }\n  acceptedByName\n  acceptedByTitle\n  accountId\n  amount\n  amountDue\n  applicationDate\n  applied\n  billingDay\n  contactId\n  createdAt\n  credits\n  currencyId\n  dealId\n  discount\n  discountValue\n  endDate\n  evergreen\n  expiresAt\n  id\n  invoiceUntil\n  isPendingApprovalRequest\n  kind\n  message\n  name\n  netPaymentDays\n  notes\n  ownerId\n  periodAmount\n  poNumber\n  requiresApproval\n  startDate\n  state\n  subtotal\n  taxAmount\n  updatedAt\n  uuid\n  amountsByPeriod {\n    amount\n    id\n    name\n  }\n  endDateOptions {\n    endDate\n    label\n  }\n  invoiceUntilOptions {\n    endDate\n    label\n  }\n  quoteChanges {\n    currencyId\n    id\n    kind\n    charges {\n      amountsByPeriod {\n        amount\n        startDate\n      }\n      amount\n      billingPeriod\n      billingPeriodAmounts { id amount prorationRate }\n      chargeType\n      couponId\n      createdAt\n      currencyId\n      discount\n      endDate\n      feature { id name code isUnit unitName }\n      id\n      name\n      priceListCharge {\n        id\n      }\n      priceList {\n        id\n      }\n      couponId\n      price\n      priceDecimals\n      priceTiers { starts price }\n      pricingModel\n      prorationRate\n      quantity\n      quantityMax\n      quantityMin\n      startDate\n      tieredAveragePrice\n      updatedAt\n      kind\n    }\n    priceList {\n      id\n      plan {\n          name\n      }\n      product {\n          name\n      }\n    }\n  }\n}";
 var QUOTE_RECALCULATE_TAXES = "\n  mutation QuoteRecalculateTaxes($id: ID!) {\n    quoteRecalculateTaxes(id: $id) {\n      ".concat(QUOTE_FIELDS, "\n      errors\n    }\n  }\n");
 var quoteRecalculateTaxes = function (_a) {
@@ -20136,7 +20597,7 @@ var quoteRecalculateTaxes = function (_a) {
             switch (_d.label) {
                 case 0:
                     vars = { id: quoteId };
-                    return [4 /*yield*/, common.gqlRequest({
+                    return [4 /*yield*/, gqlRequest({
                             query: QUOTE_RECALCULATE_TAXES,
                             token: token,
                             vars: vars,
@@ -20161,7 +20622,7 @@ var getTaxationRequiredAccountFields = function (_a) {
         var _b, _c;
         return __generator(this, function (_d) {
             switch (_d.label) {
-                case 0: return [4 /*yield*/, common.gqlRequest({
+                case 0: return [4 /*yield*/, gqlRequest({
                         query: MUTATION$2,
                         token: token,
                         apiHost: apiHost,
@@ -20169,8 +20630,7 @@ var getTaxationRequiredAccountFields = function (_a) {
                 case 1:
                     response = _d.sent();
                     return [2 /*return*/, ((_c = (_b = response === null || response === void 0 ? void 0 : response.currentUser) === null || _b === void 0 ? void 0 : _b.taxationRequiredAccountFields) === null || _c === void 0 ? void 0 : _c.length) > 0
-                            ? response.currentUser
-                                .taxationRequiredAccountFields
+                            ? response.currentUser.taxationRequiredAccountFields
                             : null];
             }
         });
@@ -20186,35 +20646,6 @@ var useHasTaxPlugin = function (_a) {
     return Boolean(plugins === null || plugins === void 0 ? void 0 : plugins.some(function (plugin) { return plugin.type === "taxation"; }));
 };
-var useCurrentUserData = function () {
-    var queryClient = reactQuery.useQueryClient();
-    var token = useToken();
-    var currentUser = queryClient.getQueryData(common.QueryKeyFactory.default.currentUserKey(token));
-    if (!currentUser)
-        return {};
-    return currentUser;
-};
-var BunnyFooterIcon = function (_a) {
-    var color = _a.color;
-    return (jsxRuntime.jsxs("svg", __assign({ width: "45", height: "15", viewBox: "0 0 39 13", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsxs("g", __assign({ clipPath: "url(#clip0_6_851)" }, { children: [jsxRuntime.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 }), jsxRuntime.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 }), jsxRuntime.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 }), jsxRuntime.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 }), jsxRuntime.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 }), jsxRuntime.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 })] })), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", __assign({ id: "clip0_6_851" }, { children: jsxRuntime.jsx("rect", { width: "39", height: "13", fill: "white" }) })) })] })));
-};
-var Footer = function (_a) {
-    var className = _a.className;
-    var _b = useCurrentUserData(), privacyUrl = _b.privacyUrl, termsUrl = _b.termsUrl;
-    var isMobile = common.useIsMobile();
-    return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-between bunny-shrink-0 ".concat(isMobile ? 'bunny-flex-col bunny-gap-2 bunny-grow' : '', " ").concat(className) }, { children: [(termsUrl || privacyUrl) && (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-3" }, { children: [termsUrl && (jsxRuntime.jsx(StyedLink, __assign({ className: "bunny-text-xs bunny-text-slate-400", href: termsUrl, rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: "Terms" }))), privacyUrl && (jsxRuntime.jsx(StyedLink, __assign({ className: "bunny-text-xs bunny-text-slate-400", href: privacyUrl, rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: "Privacy" })))] }))), jsxRuntime.jsx(BunnyMarketingLink, {})] })));
-};
-var BunnyMarketingLink = function () {
-    var _a = react.useState(false), isHovered = _a[0], setIsHovered = _a[1];
-    var isMobile = common.useIsMobile();
-    return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-items-end bunny-justify-end ".concat(isMobile ? '' : 'grow') }, { children: jsxRuntime.jsx(StyledBunnyLink, __assign({ className: "bunny-flex bunny-items-end bunny-justify-end bunny-text-slate-400", href: "https://bunny.com/", rel: "noopener noreferrer", target: "_blank" }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center", onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: ["Powered by\u00A0", jsxRuntime.jsx("div", __assign({ style: { paddingTop: '5px' } }, { children: jsxRuntime.jsx(BunnyFooterIcon, { color: isHovered ? common.PRIMARY_COLOR : common.SLATE_400 }) }))] })) })) })));
-};
-var StyedLink = styled__default["default"].a(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  color: ", ";\n  transition: color 0.3s;\n  &:hover {\n    color: ", ";\n  }\n  text-decoration: none;\n  font-size: 14px;\n"], ["\n  color: ", ";\n  transition: color 0.3s;\n  &:hover {\n    color: ", ";\n  }\n  text-decoration: none;\n  font-size: 14px;\n"])), common.SLATE_400, common.SLATE_500);
-var StyledBunnyLink = styled__default["default"](StyedLink)(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n  &:hover {\n    color: ", " !important;\n  }\n"], ["\n  &:hover {\n    color: ", " !important;\n  }\n"])), common.PRIMARY_COLOR);
-var templateObject_1$5, templateObject_2$1;
 var MUTATION$1 = "\nmutation accountUpdate(\n    $id: ID!,\n    $attributes: AccountAttributes!) {\n      accountUpdate(\n        id: $id,\n        attributes: $attributes\n      ) {\n        account {\n          id\n          billingCountry\n          billingState\n          billingStreet\n          billingCity\n          billingZip\n          name\n        }\n        errors\n      }\n  }\n";
 var accountUpdate = function (_a) {
     var accountId = _a.accountId, attributes = _a.attributes, token = _a.token, apiHost = _a.apiHost;
@@ -20225,7 +20656,7 @@ var accountUpdate = function (_a) {
             switch (_c.label) {
                 case 0:
                     vars = { id: accountId, attributes: attributes };
-                    return [4 /*yield*/, common.gqlRequest({
+                    return [4 /*yield*/, gqlRequest({
                             query: MUTATION$1,
                             token: token,
                             vars: vars,
@@ -20289,10 +20720,10 @@ var FormBillingState = function (_a) {
 var QuoteCheckout = function (_a) {
     var account = _a.account, onSuccess = _a.onSuccess, onFail = _a.onFail, quote = _a.quote, taxationRequiredAccountFields = _a.taxationRequiredAccountFields;
-    var _b = react.useContext(BunnyContext), apiHost = _b.apiHost; _b.graphQLClient;
+    var apiHost = react.useContext(BunnyContext).apiHost;
     var token = useToken();
     var isMobile = common.useIsMobile();
-    var _c = react.useState(false), isSaving = _c[0], setIsSaving = _c[1];
+    var _b = react.useState(false), isSaving = _b[0], setIsSaving = _b[1];
     var paymentRequired = getQuoteAmountDue(quote) > 0;
     var checkoutMutation = reactQuery.useMutation({
         mutationFn: function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -20300,9 +20731,9 @@ var QuoteCheckout = function (_a) {
                 switch (_a.label) {
                     case 0:
                         if (!quote)
-                            throw new Error("Quote is required");
+                            throw new Error('Quote is required');
                         if (paymentRequired)
-                            throw new Error("Payment is required");
+                            throw new Error('Payment is required');
                         return [4 /*yield*/, checkout({ quoteId: quote.id, token: token, apiHost: apiHost })];
                     case 1: return [2 /*return*/, _a.sent()];
                 }
@@ -20323,17 +20754,17 @@ var QuoteCheckout = function (_a) {
     }
     if (taxationRequiredAccountFields)
         return (jsxRuntime.jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsxRuntime.jsx(TaxationForm, { account: account, quote: quote }) })));
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: paymentRequired ? (jsxRuntime.jsx(PaymentForm, { onFail: onFail, onPaymentSuccess: onSuccess, quote: quote })) : (jsxRuntime.jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 ".concat(isMobile ? "bunny-shadow-padding-x" : "") }, { children: [jsxRuntime.jsx(antd.Button, __assign({ onClick: handleCheckoutNoPayment, type: "primary" }, { children: isSaving ? "Processing..." : "Complete order" })), jsxRuntime.jsx("div", __assign({ className: "bunny-text-xs bunny-text-slate-500" }, { children: "No payment is required" }))] })) }))) }));
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: paymentRequired ? (jsxRuntime.jsx(PaymentForm, { onFail: onFail, onPaymentSuccess: onSuccess, quote: quote })) : (jsxRuntime.jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 ".concat(isMobile ? 'bunny-shadow-padding-x' : '') }, { children: [jsxRuntime.jsx(antd.Button, __assign({ onClick: handleCheckoutNoPayment, type: "primary" }, { children: isSaving ? 'Processing...' : 'Complete order' })), jsxRuntime.jsx("div", __assign({ className: "bunny-text-xs bunny-text-slate-500" }, { children: "No payment is required" }))] })) }))) }));
 };
 var PaymentFormWrapper = function (_a) {
     var children = _a.children, setMaxHeight = _a.setMaxHeight, className = _a.className;
     var isMobile = common.useIsMobile();
-    return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-6 bunny-shrink-0 ".concat(isMobile ? "bunny-w-full bunny-shadow-padding-xb" : "", " ").concat(className), style: __assign({}, (isMobile
+    return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-6 bunny-shrink-0 ".concat(isMobile ? 'bunny-w-full bunny-shadow-padding-xb' : '', " ").concat(className), style: __assign({}, (isMobile
             ? setMaxHeight
-                ? { maxHeight: "60vh" }
+                ? { maxHeight: '60vh' }
                 : {}
             : {
-                width: "350px",
+                width: '350px',
             })) }, { children: children })));
 };
@@ -20350,18 +20781,18 @@ var Checkout = function (_a) {
     var queryClient = reactQuery.useQueryClient();
     // Queries
     var _d = reactQuery.useQuery({
-        queryKey: ["getTaxationRequiredAccountFields", token],
+        queryKey: ['getTaxationRequiredAccountFields', token],
         queryFn: function () { return getTaxationRequiredAccountFields({ apiHost: apiHost, token: token }); },
         enabled: Boolean(quote),
         staleTime: 0,
     }), taxationRequiredAccountFields = _d.data, isLoadingTaxationRequiredAccountFields = _d.isLoading;
     var _e = reactQuery.useQuery({
-        queryKey: ["account", quote === null || quote === void 0 ? void 0 : quote.accountId],
+        queryKey: ['account', quote === null || quote === void 0 ? void 0 : quote.accountId],
         queryFn: function () {
-            return (quote === null || quote === void 0 ? void 0 : quote.accountId) && common.getAccount({ id: quote.accountId, apiHost: apiHost, token: token });
+            return (quote === null || quote === void 0 ? void 0 : quote.accountId) &&
+                common.getAccount({ id: quote.accountId, apiHost: apiHost, token: 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,
+        enabled: Boolean(quote === null || quote === void 0 ? void 0 : quote.accountId) && ((taxationRequiredAccountFields === null || taxationRequiredAccountFields === void 0 ? void 0 : taxationRequiredAccountFields.length) || 0) > 0,
     }), account = _e.data, isLoadingAccount = _e.isLoading;
     reactQuery.useQuery({
         queryKey: queryKeyFactory.createQuoteTaxCalculateKey({
@@ -20383,8 +20814,8 @@ var Checkout = function (_a) {
                         updatedQuote = _a.sent();
                         if (updatedQuote) {
                             quoteKey = queryKeyFactory.createObjectKey({
-                                objectName: "editingQuote",
                                 id: updatedQuote.id,
+                                objectName: 'editingQuote',
                                 token: token,
                             });
                             calculatedPricesKey = queryKeyFactory.calculatedPricesKey({
@@ -20412,7 +20843,7 @@ var Checkout = function (_a) {
         return null;
     return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-fixed bunny-top-0 bunny-left-0 bunny-right-0 bunny-bottom-0 bunny-bg-slate-50 bunny-overflow-auto", style: {
             zIndex: 1001,
-        } }, { children: jsxRuntime.jsxs("div", __assign({ className: pageWrapperClassName(isMobile) }, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-justify-end bunny-w-full" }, { children: jsxRuntime.jsx(icons.CloseOutlined, { className: "bunny-text-base bunny-shadow-padding-xb", onClick: onCancel }) })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-justify-end bunny-gap-6 bunny-pt-4 ".concat(isMobile ? "bunny-flex-col" : "bunny-shadow-padding-xb") }, { children: [((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_b = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _b === void 0 ? void 0 : _b.html)) && (jsxRuntime.jsx(InvoiceQuoteView, { html: invoice ? invoice.html : quote ? quote.formattedQuote.html : "" })), !isMobile && ((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_c = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _c === void 0 ? void 0 : _c.html)) && (jsxRuntime.jsx(antd.Divider, { className: "bunny-h-full", type: "vertical" })), invoice ? (jsxRuntime.jsx("div", __assign({ className: "bunny-w-full bunny-pt-12" }, { children: jsxRuntime.jsx(PaymentForm, { onPaymentSuccess: onSuccess, onFail: onFail, invoice: invoice }) }))) : quote ? (jsxRuntime.jsx(QuoteCheckout, { account: account, onFail: function (error) {
+        } }, { children: jsxRuntime.jsxs("div", __assign({ className: pageWrapperClassName(isMobile) }, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-justify-end bunny-w-full" }, { children: jsxRuntime.jsx(icons.CloseOutlined, { className: "bunny-text-base bunny-shadow-padding-xb", onClick: onCancel }) })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-justify-end bunny-pt-4 bunny-gap-4 ".concat(isMobile ? 'bunny-flex-col' : 'bunny-shadow-padding-xb') }, { children: [((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_b = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _b === void 0 ? void 0 : _b.html)) && (jsxRuntime.jsx(InvoiceQuoteView, { html: invoice ? invoice.html : quote ? quote.formattedQuote.html : '' })), !isMobile && ((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_c = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _c === void 0 ? void 0 : _c.html)) && (jsxRuntime.jsx(antd.Divider, { className: "bunny-h-full", type: "vertical" })), invoice ? (jsxRuntime.jsx("div", __assign({ className: "bunny-w-full bunny-pt-12" }, { children: jsxRuntime.jsx(PaymentForm, { onPaymentSuccess: onSuccess, onFail: onFail, invoice: invoice }) }))) : quote ? (jsxRuntime.jsx(QuoteCheckout, { account: account, onFail: function (error) {
                                 onFail(error);
                             }, onSuccess: onSuccess, quote: quote, taxationRequiredAccountFields: taxationRequiredAccountFields, token: token })) : (jsxRuntime.jsx(PaymentForm, { onFail: function (error) {
                                 onFail(error);
@@ -20437,15 +20868,12 @@ var SubscriptionsContext = react.createContext({});
 var QUOTE_CHARGE_UPDATE = "\n  mutation QuoteChargeUpdate (\n    $discount: Float,\n    $endDate: ISO8601Date,\n    $name: String,\n    $price: Float,\n    $quantity: Int,\n    $quoteChargeId: ID!\n    $startDate: ISO8601Date\n    $subtotal: Float,\n  ) {\n    quoteChargeUpdate(\n      discount: $discount\n      endDate: $endDate\n      name: $name\n      price: $price\n      quantity: $quantity\n      quoteChargeId: $quoteChargeId\n      startDate: $startDate\n      subtotal: $subtotal\n    ) {\n      quoteCharge {\n        id\n      }\n    }\n  }\n";
 var quoteChargeUpdate = function (_a) {
-    var discount = _a.discount,
-    // endDate,
-    name = _a.name, price = _a.price, quantity = _a.quantity, quoteChargeId = _a.quoteChargeId, startDate = _a.startDate, subtotal = _a.subtotal, apiHost = _a.apiHost, token = _a.token;
-    return common.gqlRequest({
+    var discount = _a.discount, name = _a.name, price = _a.price, quantity = _a.quantity, quoteChargeId = _a.quoteChargeId, startDate = _a.startDate, subtotal = _a.subtotal, apiHost = _a.apiHost, token = _a.token;
+    return gqlRequest({
         query: QUOTE_CHARGE_UPDATE,
         vars: {
             subtotal: subtotal,
             discount: discount,
-            // endDate,
             name: name,
             price: price,
             quantity: quantity,
@@ -20643,23 +21071,22 @@ var CheckoutBarSummarySection = function (_a) {
 };
 var PlanPickerCheckoutBarWrapper = function (_a) {
-    var handlePortalErrors = _a.handlePortalErrors, onCheckoutSuccess = _a.onCheckoutSuccess;
+    var editingQuote = _a.editingQuote, setEditingQuoteData = _a.setEditingQuoteData, handlePortalErrors = _a.handlePortalErrors, onCheckoutSuccess = _a.onCheckoutSuccess;
     // Context
     var quotePreviewData = react.useContext(SubscriptionsContext).quotePreviewData;
     var selectedPriceList = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList;
     if (!selectedPriceList)
         return null;
-    return (jsxRuntime.jsx(PlanPickerCheckoutBar, { handlePortalErrors: handlePortalErrors, selectedPriceList: selectedPriceList, onCheckoutSuccess: onCheckoutSuccess }));
+    return (jsxRuntime.jsx(PlanPickerCheckoutBar, { editingQuote: editingQuote, setEditingQuoteData: setEditingQuoteData, handlePortalErrors: handlePortalErrors, selectedPriceList: selectedPriceList, onCheckoutSuccess: onCheckoutSuccess }));
 };
 var PlanPickerCheckoutBar = function (_a) {
-    var selectedPriceList = _a.selectedPriceList, handlePortalErrors = _a.handlePortalErrors, onCheckoutSuccess = _a.onCheckoutSuccess;
+    var editingQuote = _a.editingQuote, setEditingQuoteData = _a.setEditingQuoteData, selectedPriceList = _a.selectedPriceList, handlePortalErrors = _a.handlePortalErrors, onCheckoutSuccess = _a.onCheckoutSuccess;
     // Context
     var token = useToken();
     var _b = react.useContext(SubscriptionsContext), quotePreviewData = _b.quotePreviewData, upgradingSubscription = _b.upgradingSubscription, shadow = _b.shadow;
     var apiHost = react.useContext(BunnyContext).apiHost;
     // Local state
     var _c = react.useState(false), payModalVisible = _c[0], setPayModalVisible = _c[1];
-    var quoteIdRef = react.useRef();
     // Hooks
     var showSuccessNotification = common.useSuccessNotification();
     var queryClient = reactQuery.useQueryClient();
@@ -20678,15 +21105,16 @@ var PlanPickerCheckoutBar = function (_a) {
         onSuccess: function (subscriptionUpdateData) {
             var _a;
             var quote = (_a = subscriptionUpdateData === null || subscriptionUpdateData === void 0 ? void 0 : subscriptionUpdateData.quoteSubscriptionUpgrade) === null || _a === void 0 ? void 0 : _a.quote;
-            quoteIdRef.current = quote.id;
+            setEditingQuoteData === null || setEditingQuoteData === void 0 ? void 0 : setEditingQuoteData(quote.id);
         },
     });
     var updateCharge = reactQuery.useMutation({
         mutationFn: quoteChargeUpdate,
         onSuccess: function () {
             queryClient.invalidateQueries({
-                queryKey: common.QueryKeyFactory.default.createQuoteKey({
-                    id: quoteIdRef.current || '',
+                queryKey: common.QueryKeyFactory.default.createObjectKey({
+                    objectName: 'editingQuote',
+                    id: editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id,
                     token: token,
                 }),
             });
@@ -20694,8 +21122,9 @@ var PlanPickerCheckoutBar = function (_a) {
     }).mutate;
     // Queries
     var quote = reactQuery.useQuery({
-        queryKey: common.QueryKeyFactory.default.createQuoteKey({
-            id: quoteIdRef.current || '',
+        queryKey: common.QueryKeyFactory.default.createObjectKey({
+            objectName: 'editingQuote',
+            id: editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id,
             token: token,
         }),
         queryFn: function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -20703,11 +21132,11 @@ var PlanPickerCheckoutBar = function (_a) {
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        if (!quoteIdRef.current) {
-                            throw new Error('Quote ID is required');
+                        if (!(editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id)) {
+                            throw new Error('editingQuote is undefined');
                         }
                         return [4 /*yield*/, getQuote({
-                                id: quoteIdRef.current,
+                                id: editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id,
                                 token: token,
                                 apiHost: apiHost,
                             })];
@@ -20717,7 +21146,7 @@ var PlanPickerCheckoutBar = function (_a) {
                 }
             });
         }); },
-        enabled: Boolean(quoteIdRef.current),
+        enabled: Boolean(editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id),
     }).data;
     react.useEffect(function () {
         if (!(upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id)) {
@@ -20803,7 +21232,7 @@ var getPriceListChangeOptions = function (_a) {
         var response, priceListChangeOptions;
         return __generator(this, function (_b) {
             switch (_b.label) {
-                case 0: return [4 /*yield*/, common.gqlRequest({
+                case 0: return [4 /*yield*/, gqlRequest({
                         isInPreviewMode: isInPreviewMode,
                         query: PRICE_LIST_CHANGE_OPTIONS_QUERY,
                         vars: { subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id, productId: productId },
@@ -20881,7 +21310,7 @@ var BillingPeriodSelector = function (_a) {
 };
 var ProductRadioStyled = styled__default["default"].div.withConfig({
     shouldForwardProp: function (prop) { return !["brandColor"].includes(prop); },
-})(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-checked) {\n    border-color: ", " !important;\n    color: ", " !important;\n  }\n"], ["\n  .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-checked) {\n    border-color: ", " !important;\n    color: ", " !important;\n  }\n"])), function (props) {
+})(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-checked) {\n    border-color: ", " !important;\n    color: ", " !important;\n  }\n"], ["\n  .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-checked) {\n    border-color: ", " !important;\n    color: ", " !important;\n  }\n"])), function (props) {
     return props.brandColor ? props.brandColor : "black";
 }, function (props) {
     return props.brandColor ? props.brandColor : "black";
@@ -20890,7 +21319,7 @@ var StyledRadioGroup = styled__default["default"].div(templateObject_2 || (templ
     var $isMobile = _a.$isMobile;
     return $isMobile ? "100%" : "min-content";
 });
-var templateObject_1$4, templateObject_2;
+var templateObject_1$5, templateObject_2;
 var PriceListCardTitle = function (_a) {
     var priceList = _a.priceList, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, trialRemainingDays = _a.trialRemainingDays;
@@ -20909,22 +21338,22 @@ var PriceListCardPrice = function (_a) {
                 : "Free" })));
 };
-var Text$d = antd.Typography.Text;
+var Text$c = antd.Typography.Text;
 var PriceListCardDescription = function (_a) {
     var description = _a.description;
     if (!description)
         return null;
-    return jsxRuntime.jsx(Text$d, __assign({ className: "bunny-text-center" }, { children: description }));
+    return jsxRuntime.jsx(Text$c, __assign({ className: "bunny-text-center" }, { children: description }));
 };
-var Text$c = antd.Typography.Text;
+var Text$b = antd.Typography.Text;
 var PriceListCardPriceDescription = function (_a) {
     var feature = _a.feature, priceList = _a.priceList;
     var isMobile = common.useIsMobile();
     var doesPlanHaveFlatFeeCharges = priceList.charges.some(function (charge) { return charge.pricingModel === common.PricingModel.FLAT && charge.basePrice > 0; });
     if (priceList.periodMonths <= 0 || priceList.plan.pricingStyle !== common.PricingStyle.PRICED)
         return null;
-    return (jsxRuntime.jsx(Text$c, __assign({ className: "bunny-text-center bunny-text-gray-900", style: {
+    return (jsxRuntime.jsx(Text$b, __assign({ className: "bunny-text-center bunny-text-gray-900", style: {
             fontSize: isMobile ? "13px" : "12px",
         } }, { children: priceList.plan.pricingDescription
             ? priceList.plan.pricingDescription
@@ -20945,21 +21374,21 @@ var PriceListCardButton = function (_a) {
     var isPriceListNonSubscribedCurrentPlan = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.plan.id) === priceList.plan.id && !isPriceListCurrentSubscription;
     var createButtonText = function () {
         if (isPriceListCurrentSubscription)
-            return "Current";
+            return 'Current';
         if (isSelected)
-            return "Selected";
+            return 'Selected';
         if (subscriptionPlan && !isPriceListNonSubscribedCurrentPlan)
-            return "Subscribed";
+            return 'Subscribed';
         if (priceList.plan.pricingStyle === common.PricingStyle.CONTACT_US)
             return priceList.plan.contactUsLabel;
-        return "Select";
+        return 'Select';
     };
     return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-grow bunny-w-full bunny-justify-end" }, { children: jsxRuntime.jsx(StyledCardButton, __assign({ className: "bunny-flex bunny-justify-center bunny-w-full" }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "bunny-w-full", disabled: disableOnClick, style: {
-                    maxWidth: "240px",
-                }, type: isSelected ? "primary" : "default" }, { children: createButtonText() })) })) })));
+                    maxWidth: '240px',
+                }, type: isSelected ? 'primary' : 'default' }, { children: createButtonText() })) })) })));
 };
-var StyledCardButton = styled__default["default"].div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  .ant-btn-primary {\n    border-color: transparent !important;\n  }\n  .ant-btn-primary:disabled {\n    background: ", ";\n    color: ", ";\n  }\n"], ["\n  .ant-btn-primary {\n    border-color: transparent !important;\n  }\n  .ant-btn-primary:disabled {\n    background: ", ";\n    color: ", ";\n  }\n"])), common.SLATE_200, common.SLATE_600);
-var templateObject_1$3;
+var StyledCardButton = styled__default["default"].div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  .ant-btn-primary {\n    border-color: transparent !important;\n  }\n  .ant-btn-primary:disabled {\n    background: ", ";\n    color: ", ";\n  }\n"], ["\n  .ant-btn-primary {\n    border-color: transparent !important;\n  }\n  .ant-btn-primary:disabled {\n    background: ", ";\n    color: ", ";\n  }\n"])), common.SLATE_200, common.SLATE_600);
+var templateObject_1$4;
 var PriceListCardMobile = function (_a) {
     var description = _a.description, disableOnClick = _a.disableOnClick, feature = _a.feature, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, onClick = _a.onClick, priceList = _a.priceList, subscriptionPlan = _a.subscriptionPlan, trialRemainingDays = _a.trialRemainingDays;
@@ -20987,16 +21416,16 @@ var PlanPickerGridCell = function (_a) {
 var PriceListCardDesktop = function (_a) {
     var description = _a.description, disableOnClick = _a.disableOnClick, feature = _a.feature, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, onClick = _a.onClick, priceList = _a.priceList, subscriptionPlan = _a.subscriptionPlan, trialRemainingDays = _a.trialRemainingDays;
-    return (jsxRuntime.jsx(PlanPickerGridCell, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-justify-between bunny-w-full bunny-rounded-md bunny-gap-4 bunny-pt-6 bunny-px-4 bunny-pb-4 ".concat(disableOnClick ? "" : "cursor-pointer"), onClick: function () {
+    return (jsxRuntime.jsx(PlanPickerGridCell, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-justify-between bunny-w-full bunny-rounded-md bunny-gap-4 bunny-pt-6 bunny-px-4 ".concat(disableOnClick ? '' : 'cursor-pointer'), onClick: function () {
                 if (!disableOnClick) {
                     if (priceList.plan.pricingStyle === common.PricingStyle.CONTACT_US) {
-                        window.open(priceList.plan.contactUsUrl, "_blank");
+                        window.open(priceList.plan.contactUsUrl, '_blank');
                     }
                     else
                         onClick(priceList);
                 }
             }, style: {
-                height: "100%",
+                height: '100%',
             } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-3" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2" }, { children: [jsxRuntime.jsx(PriceListCardTitle, { isPriceListCurrentSubscription: isPriceListCurrentSubscription, priceList: priceList, trialRemainingDays: trialRemainingDays }), jsxRuntime.jsx(PriceListCardDescription, { description: description })] })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2" }, { children: [jsxRuntime.jsx(PriceListCardPrice, { priceList: priceList }), jsxRuntime.jsx(PriceListCardPriceDescription, { feature: feature, priceList: priceList })] }))] })), jsxRuntime.jsx(PriceListCardButton, { disableOnClick: disableOnClick, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, subscriptionPlan: subscriptionPlan })] })) }));
 };
@@ -21030,13 +21459,13 @@ var PriceListCard = function (_a) {
     return isMobile ? (jsxRuntime.jsx(PriceListCardMobile, { description: description, disableOnClick: disableOnClick, feature: feature, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, onClick: onClick, priceList: priceList, trialRemainingDays: trialRemainingDays, subscriptionPlan: subscriptionPlan })) : (jsxRuntime.jsx(PriceListCardDesktop, { description: description, disableOnClick: disableOnClick, feature: feature, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, onClick: onClick, priceList: priceList, trialRemainingDays: trialRemainingDays, subscriptionPlan: subscriptionPlan }));
 };
-var Text$b = antd.Typography.Text;
+var Text$a = antd.Typography.Text;
 var PriceListCardFeature = function (_a) {
     var index = _a.index, planFeature = _a.planFeature;
     var brandColor = react.useContext(BrandContext).brandColor;
     if (planFeature.feature.kind === "GROUP")
-        return jsxRuntime.jsx(Text$b, __assign({ className: "bunny-font-medium bunny-base-text" }, { children: planFeature.name }));
-    return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }), jsxRuntime.jsx(Text$b, __assign({ className: "bunny-text-gray-600" }, { children: planFeature.feature.name }))] }), index));
+        return jsxRuntime.jsx(Text$a, __assign({ className: "bunny-font-medium bunny-base-text" }, { children: planFeature.name }));
+    return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }), jsxRuntime.jsx(Text$a, __assign({ className: "bunny-text-gray-600" }, { children: planFeature.feature.name }))] }), index));
 };
 var getAvailablePlansAndPriceLists = function (_a) {
@@ -21143,7 +21572,7 @@ var FeatureGridCell = function (_a) {
             : {})) }, { children: children })));
 };
-var Text$a = antd.Typography.Text;
+var Text$9 = antd.Typography.Text;
 var PlanFeatures = function (_a) {
     var _b;
     var availablePlansArray = _a.availablePlansArray, selectedProduct = _a.selectedProduct, plansToDisplay = _a.plansToDisplay;
@@ -21182,14 +21611,14 @@ var PlanFeatures = function (_a) {
                             return (jsxRuntime.jsx(FeatureGridCell, { rowIndex: rowIndex, noBorder: !Boolean(doesHavePrevPlan) }, columnIndex));
                         if (isFeatureGroup)
                             return jsxRuntime.jsx(FeatureGridCell, { isFeatureGroup: true, rowIndex: rowIndex }, columnIndex);
-                        return (jsxRuntime.jsx(FeatureGridCell, __assign({ rowIndex: rowIndex }, { children: jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-justify-center bunny-text-center" }, { children: planFeature ? ((planFeature === null || planFeature === void 0 ? void 0 : planFeature.value) ? (planFeature.value) : (jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }))) : (jsxRuntime.jsx(Text$a, __assign({ className: "bunny-text-gray" }, { children: "-" }))) })) }), columnIndex));
+                        return (jsxRuntime.jsx(FeatureGridCell, __assign({ rowIndex: rowIndex }, { children: jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-justify-center bunny-text-center" }, { children: planFeature ? ((planFeature === null || planFeature === void 0 ? void 0 : planFeature.value) ? (planFeature.value) : (jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }))) : (jsxRuntime.jsx(Text$9, __assign({ className: "bunny-text-gray" }, { children: "-" }))) })) }), columnIndex));
                     })] }), rowIndex));
         }) }));
 };
 var FeatureTitle = function (_a) {
     var _b;
     var isFeatureGroup = _a.isFeatureGroup, feature = _a.feature;
-    return (jsxRuntime.jsx(Text$a, __assign({ className: " ".concat(isFeatureGroup ? 'bunny-text-slate-500 bunny-font-medium bunny-pt-4' : ''), style: __assign({}, (isFeatureGroup ? { fontSize: '11px' } : {})) }, { children: isFeatureGroup ? (_b = feature === null || feature === void 0 ? void 0 : feature.name) === null || _b === void 0 ? void 0 : _b.toUpperCase() : feature === null || feature === void 0 ? void 0 : feature.name })));
+    return (jsxRuntime.jsx(Text$9, __assign({ className: " ".concat(isFeatureGroup ? 'bunny-text-slate-500 bunny-font-medium bunny-pt-4' : ''), style: __assign({}, (isFeatureGroup ? { fontSize: '11px' } : {})) }, { children: isFeatureGroup ? (_b = feature === null || feature === void 0 ? void 0 : feature.name) === null || _b === void 0 ? void 0 : _b.toUpperCase() : feature === null || feature === void 0 ? void 0 : feature.name })));
 };
 var PriceListGridDesktop = function (_a) {
@@ -21364,7 +21793,7 @@ var PlanPicker = function () {
     // Queries
     var _c = reactQuery.useQuery({
         queryKey: common.QueryKeyFactory.default.createTableKey({
-            pluralType: "subscriptions",
+            pluralType: 'subscriptions',
             token: token,
         }),
         queryFn: function () { return getSubscriptions({ isInPreviewMode: isInPreviewMode, token: token, apiHost: apiHost }); },
@@ -21388,7 +21817,7 @@ var PlanPicker = function () {
     // Handlers
     var onChangePriceList = react.useCallback(function (selectedPriceList) {
         if (isInPreviewMode)
-            return showInfoNotification("You are in preview mode");
+            return showInfoNotification('You are in preview mode');
         return setQuotePreviewData({
             priceList: selectedPriceList,
             quantity: calculateNewQuantity(selectedPriceList, quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity),
@@ -21405,12 +21834,12 @@ var PlanPicker = function () {
     return (jsxRuntime.jsx(PriceListSelector, { arePlanChangeOptionsLoading: arePlanChangeOptionsLoading, areSubscriptionsLoading: areSubscriptionsLoading, onChangePriceList: onChangePriceList, priceListChangeOptions: priceListChangeOptions, selectedPriceList: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList, subscriptions: subscriptions }));
 };
-var Text$9 = antd.Typography.Text;
+var Text$8 = antd.Typography.Text;
 var PreviewModeAdvisary = function (_a) {
     var isInPreviewMode = _a.isInPreviewMode;
     if (!isInPreviewMode)
         return null;
-    return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-justify-center bunny-w-full bunny-rounded" }, { children: jsxRuntime.jsx(Text$9, { children: "You are in preview mode. Products, plans and price lists are shown regardless of visibility settings." }) })));
+    return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-justify-center bunny-w-full bunny-rounded" }, { children: jsxRuntime.jsx(Text$8, { children: "You are in preview mode. Products, plans and price lists are shown regardless of visibility settings." }) })));
 };
 var PlanManager = function (_a) {
@@ -21478,6 +21907,12 @@ var PlanManager = function (_a) {
                 observer.unobserve(el);
         };
     }, []);
+    function handleSetEditingQuoteData(quoteId, isTrial) {
+        setEditingQuoteData({
+            id: quoteId || (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id),
+            isTrial: isTrial || (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.isTrial),
+        });
+    }
     // Handlers
     var onSuccess = function () {
         setEditingQuoteData(undefined);
@@ -21506,7 +21941,7 @@ var PlanManager = function (_a) {
                         return showInfoNotification('You are in preview mode');
                     setQuotePreviewData(undefined);
                     onChangePlanCancel();
-                }, title: "Change plan" }), jsxRuntime.jsx(PlanPicker, {}), jsxRuntime.jsx(Checkout, { onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, quote: quote, token: token, isMobile: isMobile, storedPaymentMethod: defaultPaymentMethod, selectedPriceList: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList }), jsxRuntime.jsx("div", { ref: stickyRef }), jsxRuntime.jsx("div", __assign({ className: "bunny-sticky bunny-bottom-4 bunny-transition-[margin] bunny-duration-300 ".concat(isSticky ? 'bunny-mx-4' : 'bunny-mx-0') }, { children: jsxRuntime.jsx(PlanPickerCheckoutBarWrapper, { handlePortalErrors: handlePortalErrors, onCheckoutSuccess: function () { return onChangePlanCancel(); } }) }))] })));
+                }, title: "Change plan" }), jsxRuntime.jsx(PlanPicker, {}), jsxRuntime.jsx(Checkout, { onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, quote: quote, token: token, isMobile: isMobile, storedPaymentMethod: defaultPaymentMethod, selectedPriceList: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList }), jsxRuntime.jsx("div", { ref: stickyRef }), jsxRuntime.jsx("div", __assign({ className: "bunny-sticky bunny-bottom-4 bunny-transition-[margin] bunny-duration-300 ".concat(isSticky ? 'bunny-mx-4' : 'bunny-mx-0') }, { children: jsxRuntime.jsx(PlanPickerCheckoutBarWrapper, { editingQuote: editingQuoteData, setEditingQuoteData: handleSetEditingQuoteData, handlePortalErrors: handlePortalErrors, onCheckoutSuccess: function () { return onChangePlanCancel(); } }) }))] })));
 };
 var useCancelSubscription = function () {
@@ -21547,7 +21982,7 @@ var getFeatureUsage = function (_a) {
                     vars = {
                         id: subscriptionChargeId,
                     };
-                    return [4 /*yield*/, common.gqlRequest({
+                    return [4 /*yield*/, gqlRequest({
                             query: FEATURE_USAGE_MUTATION,
                             token: token,
                             vars: vars,
@@ -21558,13 +21993,13 @@ var getFeatureUsage = function (_a) {
                     if ((_b = response.featureUsageHistogram) === null || _b === void 0 ? void 0 : _b.data)
                         return [2 /*return*/, response.featureUsageHistogram];
                     else
-                        throw new Error("No data found");
+                        throw new Error('No data found');
             }
         });
     });
 };
-var StyledModal = defaultStyled(antd.Modal)(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  z-index: 2000;\n\n  .ant-modal-content {\n    overflow: hidden;\n    padding: 0 !important;\n  }\n  .ant-modal-body {\n    height: min-content;\n    max-height: ", ";\n    overflow: auto;\n    display: flex;\n    flex-direction: column;\n    padding: 0;\n  }\n  .ant-modal-footer {\n    padding: 0 1.5rem 1.5rem;\n  }\n"], ["\n  z-index: 2000;\n\n  .ant-modal-content {\n    overflow: hidden;\n    padding: 0 !important;\n  }\n  .ant-modal-body {\n    height: min-content;\n    max-height: ", ";\n    overflow: auto;\n    display: flex;\n    flex-direction: column;\n    padding: 0;\n  }\n  .ant-modal-footer {\n    padding: 0 1.5rem 1.5rem;\n  }\n"])), common.MODAL_MAX_HEIGHT);
+var StyledModal = defaultStyled(antd.Modal)(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  z-index: 2000;\n\n  .ant-modal-content {\n    overflow: hidden;\n    padding: 0 !important;\n  }\n  .ant-modal-body {\n    height: min-content;\n    max-height: ", ";\n    overflow: auto;\n    display: flex;\n    flex-direction: column;\n    padding: 0;\n  }\n  .ant-modal-footer {\n    padding: 0 1.5rem 1.5rem;\n  }\n"], ["\n  z-index: 2000;\n\n  .ant-modal-content {\n    overflow: hidden;\n    padding: 0 !important;\n  }\n  .ant-modal-body {\n    height: min-content;\n    max-height: ", ";\n    overflow: auto;\n    display: flex;\n    flex-direction: column;\n    padding: 0;\n  }\n  .ant-modal-footer {\n    padding: 0 1.5rem 1.5rem;\n  }\n"])), common.MODAL_MAX_HEIGHT);
 var HeaderModalWrapper = function (props) {
     var children = props.children, description = props.description, title = props.title;
     var modalProps = react.useMemo(function () {
@@ -21576,7 +22011,7 @@ var HeaderModalWrapper = function (props) {
                             width: "75%",
                         } }, { children: description })))] }))), children] })));
 };
-var templateObject_1$2;
+var templateObject_1$3;
 var isPlural = pkg__default["default"].isPlural;
 var getDateFormat = function (dataInterval) {
@@ -21654,8 +22089,8 @@ var FeatureBarChart = function (_a) {
                     position: { y: -62 },
                 }))), jsxRuntime.jsx(recharts.Bar, { dataKey: featureName, fill: brandColor, activeBar: jsxRuntime.jsx(recharts.Rectangle, { fill: brandColor }) })] })));
 };
-var StyledBarChart = defaultStyled(recharts.BarChart)(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  .recharts-surface {\n    overflow: visible;\n  }\n"], ["\n  .recharts-surface {\n    overflow: visible;\n  }\n"])));
-var templateObject_1$1;
+var StyledBarChart = defaultStyled(recharts.BarChart)(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  .recharts-surface {\n    overflow: visible;\n  }\n"], ["\n  .recharts-surface {\n    overflow: visible;\n  }\n"])));
+var templateObject_1$2;
 var canShowQuantitiesInput = function (charge, subscription) {
     // Check if the subscription is active, pending, or in trial,
@@ -21665,7 +22100,7 @@ var canShowQuantitiesInput = function (charge, subscription) {
     var isActiveSubscription = ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.ACTIVE;
     var isPendingSubscription = ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === common.SubscriptionState.PENDING;
     var isTrialSubscription = ((_c = subscription.state) === null || _c === void 0 ? void 0 : _c.toUpperCase()) === common.SubscriptionState.TRIAL;
-    var isFlatPricing = charge.pricingModel === "FLAT";
+    var isFlatPricing = charge.pricingModel === 'FLAT';
     var shouldProcessCharge = (isActiveSubscription || isPendingSubscription || isTrialSubscription) &&
         !isFlatPricing &&
         charge.selfServiceQuantity &&
@@ -21674,9 +22109,7 @@ var canShowQuantitiesInput = function (charge, subscription) {
     return shouldProcessCharge;
 };
 var createQuoteParams = function (quote, subscriptionQuantity, editedSubscription) {
-    var quoteChange = quote.quoteChanges.find(function (quoteChange) {
-        return quoteChange.priceList.id === (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.subscription.priceList.id);
-    });
+    var quoteChange = quote.quoteChanges.find(function (quoteChange) { return quoteChange.priceList.id === (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.subscription.priceList.id); });
     var quoteChangeCharge = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.find(function (charge) { return charge.priceListCharge.id === editedSubscription.chargeId; });
     var charges = [
         {
@@ -21704,6 +22137,49 @@ var canShowSubscriptionActions = function (subscription) {
     return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.ACTIVE ||
         ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === common.SubscriptionState.PENDING;
 };
+// Helper function to check if charge is a discount
+var isDiscount = function (kind) {
+    return kind === common.QuoteChangeKind.DISCOUNT || kind === common.QuoteChangeKind.FREE_PERIOD_DISCOUNT;
+};
+var hasPriceTiers = function (charge) {
+    var _a;
+    return Boolean((_a = charge === null || charge === void 0 ? void 0 : charge.priceTiers) === null || _a === void 0 ? void 0 : _a.length);
+};
+var getApplicablePriceTier = function (charge, currencyId) {
+    var _a;
+    if (!((_a = charge.priceTiers) === null || _a === void 0 ? void 0 : _a.length))
+        return '';
+    var selectedTier;
+    // For TIERED pricing model: always show the first tier
+    if (charge.pricingModel === common.PricingModel.TIERED) {
+        selectedTier = charge.priceTiers[0];
+    }
+    // For VOLUME and BANDS pricing models: find the tier that contains the current quantity
+    else if (charge.pricingModel === common.PricingModel.VOLUME ||
+        charge.pricingModel === common.PricingModel.BANDS) {
+        // Find the appropriate tier based on quantity
+        selectedTier = charge.priceTiers.find(function (tier, index) {
+            var nextTier = charge.priceTiers[index + 1];
+            var tierStart = tier.starts;
+            var tierEnd = nextTier ? nextTier.starts - 1 : Infinity;
+            return charge.quantity >= tierStart && charge.quantity <= tierEnd;
+        });
+        // Fallback to first tier if no tier found (shouldn't happen with proper data)
+        selectedTier = selectedTier || charge.priceTiers[0];
+    }
+    // Default fallback for any other pricing models
+    else {
+        selectedTier = charge.priceTiers[0];
+    }
+    if (!selectedTier)
+        return '';
+    // Calculate the tier range for display
+    var tierIndex = charge.priceTiers.indexOf(selectedTier);
+    var starts = selectedTier.starts;
+    var nextTier = charge.priceTiers[tierIndex + 1];
+    var ends = nextTier ? nextTier.starts - 1 : '∞';
+    return "".concat(starts, "-").concat(ends, ": ").concat(common.formatCurrency(selectedTier.price, currencyId));
+};
 var SubscriptionCardActions = function (_a) {
     var _b, _c;
@@ -21716,7 +22192,7 @@ var SubscriptionCardActions = function (_a) {
         canShowSubscriptionActions(subscription) ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [canShowCancelButton && (jsxRuntime.jsx(antd.Popconfirm, __assign({ icon: null, onConfirm: function () { return onCancelSubscriptionClick === null || onCancelSubscriptionClick === void 0 ? void 0 : onCancelSubscriptionClick(subscription); }, title: "Cancel subscription" }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "bunny-p-0", type: "link" }, { children: "Cancel subscription" })) }))), canShowChangePlanButton && (jsxRuntime.jsx(antd.Button, __assign({ onClick: function () { return onChangePlanClick(subscription); }, type: "primary" }, { children: "Change plan" })))] })) : ((_c = subscription.state) === null || _c === void 0 ? void 0 : _c.toUpperCase()) === common.SubscriptionState.TRIAL ? (jsxRuntime.jsx(antd.Button, __assign({ onClick: function () { return onChangePlanClick(subscription); }, type: "primary" }, { children: "Upgrade" }))) : null;
 };
-var Text$8 = antd.Typography.Text;
+var Text$7 = antd.Typography.Text;
 var getSubscriptionStatusText = function (subscription) {
     var cancellationDate = subscription.cancellationDate, state = subscription.state, evergreen = subscription.evergreen, endDate = subscription.endDate;
     if (cancellationDate &&
@@ -21745,7 +22221,7 @@ var SubscriptionCardHeader = function (_a) {
     var isTrial = ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === common.SubscriptionState.TRIAL;
     return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-between", style: {
             backgroundColor: darkMode ? "var(--row-background-dark)" : "",
-        } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [((_c = subscription === null || subscription === void 0 ? void 0 : subscription.product) === null || _c === void 0 ? void 0 : _c.name) && (jsxRuntime.jsx(Text$8, __assign({ style: __assign({ fontSize: "11px", fontWeight: 500, color: brandColor }, subscriptionProductNameStyle) }, { children: (_d = subscription.product.name) === null || _d === void 0 ? void 0 : _d.toUpperCase() }))), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-grow bunny-items-center bunny-gap-2" }, { children: [((_e = subscription === null || subscription === void 0 ? void 0 : subscription.plan) === null || _e === void 0 ? void 0 : _e.name) && jsxRuntime.jsx(Text$8, __assign({ className: "bunny-text-lg" }, { children: subscription.plan.name })), jsxRuntime.jsxs(CustomizedTag, __assign({ color: common.TAG_COLORS[(_f = subscription.state) === null || _f === void 0 ? void 0 : _f.toUpperCase()] }, { children: [lodashExports.capitalize(subscription.state.toLowerCase()), isTrial ? " (".concat(trialDaysLeft, " days left)") : ""] }))] }))] })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-6" }, { children: [jsxRuntime.jsx(Text$8, __assign({ className: "bunny-grow bunny-text-xs" }, { children: getSubscriptionStatusText(subscription) })), !isMobile && priceListChangeOptions && onChangePlanClick && onCancelSubscriptionClick && (jsxRuntime.jsx(SubscriptionCardActions, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscription: subscription }))] }))] })));
+        } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [((_c = subscription === null || subscription === void 0 ? void 0 : subscription.product) === null || _c === void 0 ? void 0 : _c.name) && (jsxRuntime.jsx(Text$7, __assign({ style: __assign({ fontSize: "11px", fontWeight: 500, color: brandColor }, subscriptionProductNameStyle) }, { children: (_d = subscription.product.name) === null || _d === void 0 ? void 0 : _d.toUpperCase() }))), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-grow bunny-items-center bunny-gap-2" }, { children: [((_e = subscription === null || subscription === void 0 ? void 0 : subscription.plan) === null || _e === void 0 ? void 0 : _e.name) && jsxRuntime.jsx(Text$7, __assign({ className: "bunny-text-lg" }, { children: subscription.plan.name })), jsxRuntime.jsxs(CustomizedTag, __assign({ color: common.TAG_COLORS[(_f = subscription.state) === null || _f === void 0 ? void 0 : _f.toUpperCase()] }, { children: [lodashExports.capitalize(subscription.state.toLowerCase()), isTrial ? " (".concat(trialDaysLeft, " days left)") : ""] }))] }))] })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-6" }, { children: [jsxRuntime.jsx(Text$7, __assign({ className: "bunny-grow bunny-text-xs" }, { children: getSubscriptionStatusText(subscription) })), !isMobile && priceListChangeOptions && onChangePlanClick && onCancelSubscriptionClick && (jsxRuntime.jsx(SubscriptionCardActions, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscription: subscription }))] }))] })));
 };
 var BillingPeriodConverter;
@@ -21763,41 +22239,71 @@ var SubscriptionChargeTotal = function (_a) {
     var currencyId = subscription.currencyId;
     var formattedDiscountedPrice = common.formatCurrency(charge.price, currencyId);
     var formattedPeriodPrice = common.formatCurrency(charge.periodPrice, currencyId);
-    return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-gap-1 ".concat(isMobile ? "bunny-flex-col" : "") }, { children: charge.chargeType === common.ChargeType.USAGE || charge.trial
-            ? "-"
-            : charge.kind === common.SubscriptionChargeKind.DISCOUNT
+    return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-gap-1 ".concat(isMobile ? 'bunny-flex-col' : '') }, { children: charge.chargeType === common.ChargeType.USAGE || charge.trial
+            ? '-'
+            : charge.kind === common.QuoteChangeKind.DISCOUNT
                 ? "-".concat(formattedDiscountedPrice, " ").concat(billingPeriod)
                 : "".concat(formattedPeriodPrice, " ").concat(billingPeriod) })));
 };
-var Text$7 = antd.Typography.Text;
+var formatNumber = function (num, decimals) {
+    if (decimals === void 0) { decimals = 2; }
+    if (decimals && decimals > 20)
+        decimals = 20;
+    if (num === null || num === undefined || !num.toFixed)
+        return num;
+    if (isNaN(decimals))
+        decimals = 2;
+    return parseFloat(num.toFixed(decimals)).toLocaleString(navigator.language, {
+        minimumFractionDigits: decimals,
+        maximumFractionDigits: decimals,
+    });
+};
+var StyledTable = styled__default["default"](antd.Table)(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  .ant-table-cell {\n    border-bottom: none !important;\n  }\n"], ["\n  .ant-table-cell {\n    border-bottom: none !important;\n  }\n"])));
+var TieredDisplayDropdown = function (_a) {
+    var _b;
+    var charge = _a.charge, currencyId = _a.currencyId, truncatedText = _a.truncatedText;
+    var onlyHasOneTier = ((_b = charge.priceTiers) === null || _b === void 0 ? void 0 : _b.length) === 1;
+    var dropdownTrigger = (jsxRuntime.jsx("div", __assign({ className: "w-full ".concat(onlyHasOneTier ? '' : 'underline cursor-pointer') }, { children: truncatedText })));
+    if (onlyHasOneTier) {
+        return dropdownTrigger;
+    }
+    return (jsxRuntime.jsx(antd.Dropdown, __assign({ dropdownRender: function () {
+            return (jsxRuntime.jsx("div", __assign({ className: "rounded border border-solid border-slate-200 bg-white overflow-hidden" }, { children: jsxRuntime.jsx(StyledTable, { columns: [
+                        {
+                            dataIndex: 'starts',
+                            title: 'From # of units',
+                            align: 'right',
+                            render: function (_, record, index) {
+                                var _a;
+                                record = record;
+                                var nextRecord = (_a = charge.priceTiers) === null || _a === void 0 ? void 0 : _a[index + 1];
+                                var starts = record.starts;
+                                var ends = (nextRecord === null || nextRecord === void 0 ? void 0 : nextRecord.starts) ? nextRecord.starts - 1 : '∞';
+                                return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [formatNumber(starts, 0), " -", ' ', typeof ends === 'number' ? formatNumber(ends, 0) : '∞'] }));
+                            },
+                        },
+                        {
+                            dataIndex: 'price',
+                            title: 'Unit price',
+                            align: 'right',
+                            render: function (value) {
+                                return jsxRuntime.jsx(jsxRuntime.Fragment, { children: common.formatCurrency(value, currencyId, charge.priceDecimals) });
+                            },
+                        },
+                    ], dataSource: charge.priceTiers, pagination: false, size: "small" }) })));
+        } }, { children: dropdownTrigger })));
+};
+var templateObject_1$1;
 var SubscriptionChargeUnitPrice = function (_a) {
-    var charge = _a.charge, subscription = _a.subscription;
-    var darkMode = react.useContext(BunnyContext).darkMode;
-    var _b = react.useState(false), showPriceTiers = _b[0], setShowPriceTiers = _b[1];
-    var displayPriceTiers = (charge === null || charge === void 0 ? void 0 : charge.priceTiers) && charge.pricingModel === common.PricingModel.TIERED;
-    var isDiscount = (charge === null || charge === void 0 ? void 0 : charge.kind) === common.SubscriptionChargeKind.DISCOUNT;
-    if (displayPriceTiers)
-        return (jsxRuntime.jsx(antd.Dropdown, __assign({ dropdownRender: function () {
-                var _a;
-                return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-rounded bunny-border bunny-border-solid bunny-border-slate-200 bunny-p-2", style: {
-                        backgroundColor: darkMode
-                            ? "var(--row-background-dark)"
-                            : "var(--row-background)",
-                    } }, { children: jsxRuntime.jsx("div", __assign({ className: "bunny-grid bunny-grid-cols-2", style: { columnGap: "0.5rem" } }, { children: (_a = charge.priceTiers) === null || _a === void 0 ? void 0 : _a.map(function (tier, index) {
-                            var _a, _b, _c;
-                            var ends = ((_b = (_a = charge.priceTiers) === null || _a === void 0 ? void 0 : _a[index + 1]) === null || _b === void 0 ? void 0 : _b.starts)
-                                ? ((_c = charge.priceTiers[index + 1]) === null || _c === void 0 ? void 0 : _c.starts) - 1
-                                : "∞";
-                            return (jsxRuntime.jsxs("div", __assign({ className: "bunny-contents" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-whitespace-nowrap" }, { children: [tier.starts.toLocaleString(), " - ", ends.toLocaleString(), " :"] })), jsxRuntime.jsx("div", __assign({ className: "bunny-whitespace-nowrap bunny-text-right" }, { children: common.formatCurrency(tier.price, subscription.currencyId, charge.priceDecimals) }))] }), index));
-                        }) })) })));
-            }, onOpenChange: setShowPriceTiers, open: showPriceTiers, trigger: ["click"] }, { children: jsxRuntime.jsx("div", __assign({ className: "bunny-cursor-pointer bunny-underline", onClick: function () { return setShowPriceTiers(!showPriceTiers); } }, { children: showPriceTiers ? "Hide tiers" : "Show tiers" })) })));
-    else if (charge.chargeType === common.ChargeType.USAGE || charge.trial)
-        return jsxRuntime.jsx(Text$7, { children: "-" });
-    else if (isDiscount)
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: ["-", common.formatCurrency(charge.discountedPrice, subscription.currencyId)] }));
-    else
-        return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: common.formatCurrency(charge.discountedPrice, subscription.currencyId) }));
+    var charge = _a.charge, currencyId = _a.currencyId;
+    var price = charge.trial
+        ? '-'
+        : common.formatCurrency(charge.discountedPrice, currencyId, charge.priceDecimals);
+    var isChargeDiscount = isDiscount(charge.kind);
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: hasPriceTiers(charge) ? (jsxRuntime.jsx(TieredDisplayDropdown, { charge: charge, currencyId: currencyId, truncatedText: "".concat(charge.kind === common.QuoteChangeKind.PRICE_UPDATE ? 'new ' : '').concat(getApplicablePriceTier(charge, currencyId)) })) : isChargeDiscount ? ("-".concat(price)) : (price) }));
 };
 var Text$6 = antd.Typography.Text;
@@ -21814,26 +22320,26 @@ var SubscriptionsListCell = function (_a) {
 var CARD_COLUMNS = [
     {
-        title: "CHARGE",
-        width: "minmax(min-content, 26%)",
+        title: 'CHARGE',
+        width: 'minmax(min-content, 26%)',
     },
     {
-        title: "PERIOD",
-        width: "minmax(min-content, 20%)",
+        title: 'PERIOD',
+        width: 'minmax(min-content, 20%)',
     },
     {
-        className: "text-right",
-        title: "QUANTITY",
+        className: 'text-right',
+        title: 'QUANTITY',
         width: "minmax(min-content, 18%)",
     },
     {
-        className: "text-right",
-        title: "UNIT PRICE",
+        className: 'text-right',
+        title: 'UNIT PRICE',
         width: "minmax(min-content, 18%)",
     },
     {
-        className: "text-right",
-        title: "TOTAL",
+        className: 'text-right',
+        title: 'TOTAL',
         width: "minmax(min-content, 18%)",
     },
 ];
@@ -21843,13 +22349,13 @@ var SubscriptionCardDesktop = function (_a) {
     var shadow = react.useContext(SubscriptionsContext).shadow;
     // Derived state
     var isTrial = ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$1.TRIAL;
-    return (jsxRuntime.jsxs(Card, __assign({ className: "p-4 ".concat(shadow ? "shadow-".concat(shadow) : "") }, { children: [jsxRuntime.jsx(SubscriptionCardHeader, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscription: subscription }), jsxRuntime.jsx(antd.Divider, { className: "bunny-my-4", style: {
-                    gridColumn: "1 / 5",
-                    width: "calc(100% + 32px)",
-                    transform: "translateX(-16px)",
+    return (jsxRuntime.jsxs(Card, __assign({ className: "p-4 ".concat(shadow ? "shadow-".concat(shadow) : '') }, { children: [jsxRuntime.jsx(SubscriptionCardHeader, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscription: subscription }), jsxRuntime.jsx(antd.Divider, { className: "bunny-my-4", style: {
+                    gridColumn: '1 / 5',
+                    width: 'calc(100% + 32px)',
+                    transform: 'translateX(-16px)',
                 } }), jsxRuntime.jsxs("div", __assign({ className: "bunny-grid bunny-w-full", style: {
-                    gridTemplateColumns: CARD_COLUMNS.map(function (column) { return column.width; }).join(" "),
-                    rowGap: "0.75rem",
+                    gridTemplateColumns: CARD_COLUMNS.map(function (column) { return column.width; }).join(' '),
+                    rowGap: '0.75rem',
                 } }, { children: [jsxRuntime.jsx(SubscriptionCardColumnHeaders, { columns: CARD_COLUMNS }), subscription.charges.map(function (charge, chargeIndex) {
                         if ((isTrial && !charge.trial) || (!isTrial && charge.trial))
                             return null;
@@ -21869,7 +22375,7 @@ var SubscriptionCardDesktopRow = function (_a) {
     var chargePeriod = "".concat(common.formatDate(charge.startDate), " - ").concat(common.formatDate(charge.endDate));
     // Queries
     var data = reactQuery.useQuery({
-        queryKey: ["getFeatureUsage", charge.id, charge.startDate, charge.endDate],
+        queryKey: ['getFeatureUsage', charge.id, charge.startDate, charge.endDate],
         queryFn: function () {
             return getFeatureUsage({
                 endDate: charge.endDate,
@@ -21883,18 +22389,18 @@ var SubscriptionCardDesktopRow = function (_a) {
     }).data;
     var isRampFirstRow = isRamp && chargeIndex === 0;
     var isTrial = charge.trial;
-    var isDiscount = charge.kind === common.SubscriptionChargeKind.DISCOUNT;
+    var isDiscount = charge.kind === common.QuoteChangeKind.DISCOUNT;
     var dontShowChargeName = (prevCharge === null || prevCharge === void 0 ? void 0 : prevCharge.priceListChargeId) === charge.priceListChargeId &&
         !isDiscount &&
         (!isTrial || prevCharge.trial) &&
         (isTrial || !prevCharge.trial);
-    return (jsxRuntime.jsxs("div", __assign({ className: "bunny-contents" }, { children: [(isRampFirstRow || !isRamp) && (jsxRuntime.jsx(SubscriptionsListCell, __assign({ gridColumn: isRamp ? "1/-1" : "1" }, { children: jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2 ".concat(isDiscount ? "bunny-pl-4" : "") }, { children: jsxRuntime.jsx("div", { children: isRampFirstRow || (!isRamp && !dontShowChargeName) ? charge.name : "" }) })) }))), jsxRuntime.jsx(SubscriptionsListCell, __assign({ gridColumn: 2 }, { children: jsxRuntime.jsx("div", { children: chargePeriod }) })), jsxRuntime.jsx(SubscriptionsListCell, __assign({ right: true }, { children: charge.kind === common.SubscriptionChargeKind.DISCOUNT
-                    ? ""
+    return (jsxRuntime.jsxs("div", __assign({ className: "bunny-contents" }, { children: [(isRampFirstRow || !isRamp) && (jsxRuntime.jsx(SubscriptionsListCell, __assign({ gridColumn: isRamp ? '1/-1' : '1' }, { children: jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2 ".concat(isDiscount ? 'bunny-pl-4' : '') }, { children: jsxRuntime.jsx("div", { children: isRampFirstRow || (!isRamp && !dontShowChargeName) ? charge.name : '' }) })) }))), jsxRuntime.jsx(SubscriptionsListCell, __assign({ gridColumn: 2 }, { children: jsxRuntime.jsx("div", { children: chargePeriod }) })), jsxRuntime.jsx(SubscriptionsListCell, __assign({ right: true }, { children: charge.kind === common.QuoteChangeKind.DISCOUNT
+                    ? ''
                     : charge.chargeType === common.ChargeType.USAGE
                         ? data && jsxRuntime.jsx(FeatureUsageGraph, { charge: charge, featureUsage: data })
                         : charge.isAmendment
                             ? "+".concat((_b = charge.quantity) === null || _b === void 0 ? void 0 : _b.toLocaleString())
-                            : (_c = charge.quantity) === null || _c === void 0 ? void 0 : _c.toLocaleString() })), jsxRuntime.jsx(SubscriptionsListCell, __assign({ right: true }, { children: jsxRuntime.jsx(SubscriptionChargeUnitPrice, { charge: charge, subscription: subscription }) })), jsxRuntime.jsx(SubscriptionsListCell, __assign({ right: true }, { children: jsxRuntime.jsx(SubscriptionChargeTotal, { charge: charge, subscription: subscription }) }))] })));
+                            : (_c = charge.quantity) === null || _c === void 0 ? void 0 : _c.toLocaleString() })), jsxRuntime.jsx(SubscriptionsListCell, __assign({ right: true }, { children: jsxRuntime.jsx(SubscriptionChargeUnitPrice, { charge: charge, currencyId: subscription.currencyId }) })), jsxRuntime.jsx(SubscriptionsListCell, __assign({ right: true }, { children: jsxRuntime.jsx(SubscriptionChargeTotal, { charge: charge, subscription: subscription }) }))] })));
 };
 var Text$4 = antd.Typography.Text;
@@ -21905,19 +22411,19 @@ var SubscriptionCardCellMobile = function (_a) {
 var CHARGE_COLUMNS = [
     {
-        title: "CHARGE",
+        title: 'CHARGE',
     },
     {
-        className: "text-right",
-        title: "QUANTITY",
+        className: 'text-right',
+        title: 'QUANTITY',
     },
     {
-        className: "text-right",
-        title: "UNIT PRICE",
+        className: 'text-right',
+        title: 'UNIT PRICE',
     },
     {
-        className: "text-right",
-        title: "TOTAL",
+        className: 'text-right',
+        title: 'TOTAL',
     },
 ];
 var SubscriptionCard = function (_a) {
@@ -21926,26 +22432,22 @@ var SubscriptionCard = function (_a) {
     var darkMode = react.useContext(BunnyContext).darkMode;
     // Derived state
     var isTrial = ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$1.TRIAL;
-    var backgroundColor = darkMode
-        ? "var(--row-background-dark)"
-        : "var(--row-background)";
+    var backgroundColor = darkMode ? 'var(--row-background-dark)' : 'var(--row-background)';
     return (jsxRuntime.jsx(Card, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-p-4" }, { children: [jsxRuntime.jsx(SubscriptionCardHeader, { subscription: subscription }), jsxRuntime.jsx(antd.Divider, { className: "bunny-my-4", style: {
-                        gridColumn: "1 / -1",
-                        width: "calc(100% + 32px)",
-                        transform: "translateX(-16px)",
+                        gridColumn: '1 / -1',
+                        width: 'calc(100% + 32px)',
+                        transform: 'translateX(-16px)',
                     } }), jsxRuntime.jsxs("div", __assign({ className: "bunny-grid", style: {
-                        columnGap: "0.5rem",
+                        columnGap: '0.5rem',
                         gridTemplateColumns: "1fr auto auto auto",
-                        rowGap: "0.75rem",
+                        rowGap: '0.75rem',
                         backgroundColor: backgroundColor,
-                    } }, { children: [CHARGE_COLUMNS.map(function (subscriptionColumn, index) { return (jsxRuntime.jsx(SubscriptionCardCellMobile, __assign({ className: "bunny-text-slate-400 ".concat(subscriptionColumn.className), style: { fontSize: "11px" } }, { children: subscriptionColumn.title }), index)); }), subscription.charges.map(function (charge, chargeIndex) {
+                    } }, { children: [CHARGE_COLUMNS.map(function (subscriptionColumn, index) { return (jsxRuntime.jsx(SubscriptionCardCellMobile, __assign({ className: "bunny-text-slate-400 ".concat(subscriptionColumn.className), style: { fontSize: '11px' } }, { children: subscriptionColumn.title }), index)); }), subscription.charges.map(function (charge, chargeIndex) {
                             if ((isTrial && !charge.trial) || (!isTrial && charge.trial))
                                 return null;
                             var isRamp = charge.isRamp;
                             var chargePeriod = "".concat(common.formatDate(charge.startDate), " - ").concat(common.formatDate(charge.endDate));
-                            return (jsxRuntime.jsxs("div", __assign({ className: "bunny-contents" }, { children: [((isRamp && chargeIndex === 0) || !isRamp) && (jsxRuntime.jsxs(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[0].className, style: { gridColumn: isRamp ? "1/-1" : "1" } }, { children: [jsxRuntime.jsx("span", { children: charge.name }), !isRamp ? " - ".concat(chargePeriod) : ""] }))), isRamp && (jsxRuntime.jsx(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[0].className }, { children: "- ".concat(chargePeriod) }))), jsxRuntime.jsx(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[1].className }, { children: charge.kind === common.SubscriptionChargeKind.DISCOUNT
-                                            ? ""
-                                            : charge.quantity })), jsxRuntime.jsx(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[2].className }, { children: jsxRuntime.jsx(SubscriptionChargeUnitPrice, { charge: charge, subscription: subscription }) })), jsxRuntime.jsx(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[3].className }, { children: jsxRuntime.jsx(SubscriptionChargeTotal, { charge: charge, subscription: subscription }) }))] }), chargeIndex));
+                            return (jsxRuntime.jsxs("div", __assign({ className: "bunny-contents" }, { children: [((isRamp && chargeIndex === 0) || !isRamp) && (jsxRuntime.jsxs(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[0].className, style: { gridColumn: isRamp ? '1/-1' : '1' } }, { children: [jsxRuntime.jsx("span", { children: charge.name }), !isRamp ? " - ".concat(chargePeriod) : ''] }))), isRamp && (jsxRuntime.jsx(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[0].className }, { children: "- ".concat(chargePeriod) }))), jsxRuntime.jsx(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[1].className }, { children: charge.kind === common.QuoteChangeKind.DISCOUNT ? '' : charge.quantity })), jsxRuntime.jsx(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[2].className }, { children: jsxRuntime.jsx(SubscriptionChargeUnitPrice, { charge: charge, currencyId: subscription.currencyId }) })), jsxRuntime.jsx(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[3].className }, { children: jsxRuntime.jsx(SubscriptionChargeTotal, { charge: charge, subscription: subscription }) }))] }), chargeIndex));
                         })] }))] })) }));
 };
@@ -21993,7 +22495,7 @@ var quoteChargeCreate = function (_a) {
     var
     // endDate,
     price = _a.price, priceListChargeId = _a.priceListChargeId, quantity = _a.quantity, quoteChangeId = _a.quoteChangeId, startDate = _a.startDate, subscriptionChargeId = _a.subscriptionChargeId, token = _a.token, apiHost = _a.apiHost;
-    return common.gqlRequest({
+    return gqlRequest({
         query: QUOTE_CHARGE_CREATE,
         vars: {
             // endDate,
@@ -22225,8 +22727,8 @@ var QuoteChangeSummarySection = function (_a) {
                         : openCheckout, disabled: !editingQuoteData, size: isMobile ? "large" : "middle", type: "primary" }, { children: (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.isTrial) ? "Activate Trial" : "Proceed to checkout" })) }))] })));
 };
-var QUANTITY_CHANGE_HEADER_TITLE = "Update unit quantity";
-var QUANTITY_CHANGE_HEADER_DESCRIPTION = "Adjust quantities below. The change will take effect immediately after checkout has been completed.";
+var QUANTITY_CHANGE_HEADER_TITLE = 'Update unit quantity';
+var QUANTITY_CHANGE_HEADER_DESCRIPTION = 'Adjust quantities below. The change will take effect immediately after checkout has been completed.';
 var QuantityChangeDrawerDesktop = function (_a) {
     var editingQuote = _a.editingQuote, editingQuoteData = _a.editingQuoteData, onClose = _a.onClose, open = _a.open, openCheckout = _a.openCheckout, setEditingQuoteData = _a.setEditingQuoteData, subscriptions = _a.subscriptions;
     var _b = react.useState(open), openLocal = _b[0], setOpenLocal = _b[1];
@@ -22248,22 +22750,22 @@ var QuantityChangeDrawerDesktop = function (_a) {
     return (jsxRuntime.jsxs(antd.Drawer, __assign({ closeIcon: null, destroyOnClose: true, onClose: onClose, open: open, styles: isMobile
             ? {
                 body: {
-                    padding: "1rem",
-                    overflow: "hidden",
+                    padding: '1rem',
+                    overflow: 'hidden',
                     background: common.SLATE_50,
                 },
                 wrapper: {
-                    width: "100vw",
+                    width: '100vw',
                 },
             }
             : {
                 wrapper: {
-                    minWidth: "600px",
+                    minWidth: '600px',
                 },
             }, title: jsxRuntime.jsx(DrawerHeader, { description: QUANTITY_CHANGE_HEADER_DESCRIPTION, onClose: onClose, title: QUANTITY_CHANGE_HEADER_TITLE, closeButtonClassName: "ant-drawer-close" }) }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-grid bunny-pb-4", style: {
-                    gridTemplateColumns: "2fr 1fr 1fr",
-                    rowGap: "0.75rem",
-                    columnGap: "1rem",
+                    gridTemplateColumns: '2fr 1fr 1fr',
+                    rowGap: '0.75rem',
+                    columnGap: '1rem',
                 } }, { children: [jsxRuntime.jsx(QuantityChangeGridTitle, { children: "ACTIVE SUBSCRIPTIONS" }), jsxRuntime.jsx(QuantityChangeGridTitle, __assign({ right: true }, { children: "CURRENT QUANTITY" })), jsxRuntime.jsx(QuantityChangeGridTitle, __assign({ right: true }, { children: "NEW QUANTITY" })), jsxRuntime.jsx(antd.Divider, { className: "bunny-col-span-full bunny-py-2" }), subscriptions.map(function (subscription, index) {
                         var _a;
                         var isTrial = ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.TRIAL;
@@ -22271,7 +22773,7 @@ var QuantityChangeDrawerDesktop = function (_a) {
                                 var _a;
                                 if ((isTrial && !charge.trial) ||
                                     (!isTrial && charge.trial) ||
-                                    ((_a = charge.chargeType) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === "USAGE")
+                                    ((_a = charge.chargeType) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === 'USAGE')
                                     return null;
                                 return (jsxRuntime.jsx(QuantityChangeGridRow, { chargeIndex: chargeIndex, editingQuote: editingQuote, setEditingQuoteData: setEditingQuoteData, subscription: subscription, subscriptionCharge: charge, subscriptionIndex: index, subscriptions: subscriptions }, chargeIndex));
                             }) }), index));
@@ -22311,7 +22813,7 @@ var SubscriptionsNavigation = function (_a) {
 var Text$1 = antd.Typography.Text;
 var SubscriptionsWrapper = function (_a) {
-    var handlePortalErrors = _a.handlePortalErrors, companyName = _a.companyName, _b = _a.isInPreviewMode, isInPreviewMode = _b === void 0 ? false : _b, productId = _a.productId, className = _a.className, _c = _a.styles, userStyles = _c === void 0 ? {} : _c, noSubscriptionsComponent = _a.noSubscriptionsComponent, _d = _a.hideTitle, hideTitle = _d === void 0 ? false : _d, _e = _a.hideExpiredToggle, hideExpiredToggle = _e === void 0 ? false : _e;
+    var handlePortalErrors = _a.handlePortalErrors, companyName = _a.companyName, _b = _a.isInPreviewMode, isInPreviewMode = _b === void 0 ? false : _b, productId = _a.productId, className = _a.className, _c = _a.styles, userStyles = _c === void 0 ? {} : _c, noSubscriptionsComponent = _a.noSubscriptionsComponent, _d = _a.hideTitle, hideTitle = _d === void 0 ? false : _d, hideExpired = _a.hideExpired, _e = _a.hideExpiredToggle, hideExpiredToggle = _e === void 0 ? false : _e;
     var defaultStyles = {
         gap: 4,
         shadow: 'sm',
@@ -22332,6 +22834,7 @@ var SubscriptionsWrapper = function (_a) {
             subscriptionProductNameStyle: styles.subscriptionProductNameStyle,
             productId: productId,
             isInPreviewMode: isInPreviewMode,
+            hideExpired: hideExpired,
             upgradingSubscription: upgradingSubscription,
             setUpgradingSubscription: setUpgradingSubscription,
             updatingChargeQuantityId: updatingChargeQuantityId,
@@ -22347,14 +22850,15 @@ var Subscriptions = function (_a) {
     // Context
     var token = useToken();
     var apiHost = react.useContext(BunnyContext).apiHost;
-    var _b = react.useContext(SubscriptionsContext), setUpgradingSubscription = _b.setUpgradingSubscription, updatingChargeQuantityId = _b.updatingChargeQuantityId, setUpdatingChargeQuantityId = _b.setUpdatingChargeQuantityId, setSubscriptionUpgradeId = _b.setSubscriptionUpgradeId, className = _b.className, isInPreviewMode = _b.isInPreviewMode;
+    var _b = react.useContext(SubscriptionsContext), setUpgradingSubscription = _b.setUpgradingSubscription, updatingChargeQuantityId = _b.updatingChargeQuantityId, setUpdatingChargeQuantityId = _b.setUpdatingChargeQuantityId, setSubscriptionUpgradeId = _b.setSubscriptionUpgradeId, className = _b.className, isInPreviewMode = _b.isInPreviewMode, hideExpiredOverride = _b.hideExpired;
     // Local state
     var _c = react.useState(), editingQuoteData = _c[0], setEditingQuoteData = _c[1];
     var _d = react.useState(false), payModalVisible = _d[0], setPayModalVisible = _d[1];
-    var _e = react.useState(true), hideExpired = _e[0], setHideExpired = _e[1];
+    var _e = react.useState(true), hideExpiredState = _e[0], setHideExpiredState = _e[1];
     var _f = react.useState(false), quantityDrawerOpen = _f[0], setQuantityDrawerOpen = _f[1];
     var _g = react.useState(false), expiredSwitchVisible = _g[0], setExpiredSwitchVisible = _g[1];
     var _h = react.useState(false), isChangingPlan = _h[0], setIsChangingPlan = _h[1];
+    var hideExpired = hideExpiredOverride !== null && hideExpiredOverride !== void 0 ? hideExpiredOverride : hideExpiredState;
     // Hooks
     var queryClient = reactQuery.useQueryClient();
     var showSuccessNotification = common.useSuccessNotification();
@@ -22428,7 +22932,7 @@ var Subscriptions = function (_a) {
         });
         showSuccessNotification('Your plan has been updated', 'Payment successful');
         setPayModalVisible(false);
-        setHideExpired(true);
+        setHideExpiredState(true);
     };
     var onCancel = function () {
         setPayModalVisible(false);
@@ -22458,7 +22962,7 @@ var Subscriptions = function (_a) {
     });
     react.useEffect(function () {
         if (allSubscriptionsExpired && subscriptions.length > 0)
-            setHideExpired(false);
+            setHideExpiredState(false);
     }, [allSubscriptionsExpired, subscriptions]);
     react.useEffect(function () {
         if (hasExpiredOrCanceledSubscriptions && subscriptions.length > 0)
@@ -22469,7 +22973,7 @@ var Subscriptions = function (_a) {
                 setIsChangingPlan(false);
             }, handlePortalErrors: handlePortalErrors }));
     }
-    return (jsxRuntime.jsxs("div", __assign({ className: "".concat(className) }, { children: [!hideTitle ? jsxRuntime.jsx(PageTitle, { title: 'Subscriptions' }) : null, jsxRuntime.jsx(PageHeaderWithActions, __assign({ title: jsxRuntime.jsx(jsxRuntime.Fragment, { children: !hideExpiredToggle && (jsxRuntime.jsxs(Text$1, __assign({ className: "bunny-flex bunny-items-center bunny-justify-between", style: { minWidth: '120px' } }, { children: [hideExpired ? 'Active subscriptions' : 'All subscriptions', isMobile && expiredSwitchVisible && (jsxRuntime.jsx(HideExpiredToggle, { hideExpired: hideExpired, setHideExpired: setHideExpired }))] }))) }) }, { children: !isMobile && (jsxRuntime.jsx(SubscriptionsNavigation, { expiredSwitchVisible: !hideExpiredToggle && expiredSwitchVisible, hideExpired: hideExpired, setHideExpired: setHideExpired, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions })) })), jsxRuntime.jsx(SubscriptionsListContainer, { companyName: companyName, hideExpired: hideExpired, onCancelSubscriptionClick: onCancelSubscriptionClick, onChangePlanClick: onChangePlanClick, subscriptions: subscriptions, subscriptionsAreLoading: subscriptionsAreLoading, noSubscriptionsComponent: noSubscriptionsComponent }), isMobile && (jsxRuntime.jsx("div", __assign({ className: "bunny-pt-4 bunny-pb-2" }, { children: jsxRuntime.jsx(SubscriptionsNavigation, { expiredSwitchVisible: expiredSwitchVisible, hideExpired: hideExpired, setHideExpired: setHideExpired, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions }) }))), jsxRuntime.jsx(QuantityChangeDrawerDesktop, { editingQuote: quote, editingQuoteData: editingQuoteData, onClose: onClose, open: quantityDrawerOpen, openCheckout: function () { return setPayModalVisible(true); }, setEditingQuoteData: setEditingQuoteData, subscriptions: subscriptions }), jsxRuntime.jsx(Checkout, { onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, quote: quote, token: token, isMobile: isMobile, storedPaymentMethod: defaultPaymentMethod })] })));
+    return (jsxRuntime.jsxs("div", __assign({ className: "".concat(className) }, { children: [!hideTitle ? jsxRuntime.jsx(PageTitle, { title: 'Subscriptions' }) : null, jsxRuntime.jsx(PageHeaderWithActions, __assign({ title: jsxRuntime.jsx(jsxRuntime.Fragment, { children: !hideExpiredToggle && (jsxRuntime.jsxs(Text$1, __assign({ className: "bunny-flex bunny-items-center bunny-justify-between", style: { minWidth: '120px' } }, { children: [hideExpired ? 'Active subscriptions' : 'All subscriptions', isMobile && expiredSwitchVisible && (jsxRuntime.jsx(HideExpiredToggle, { hideExpired: hideExpired, setHideExpired: setHideExpiredState }))] }))) }) }, { children: !isMobile && (jsxRuntime.jsx(SubscriptionsNavigation, { expiredSwitchVisible: !hideExpiredToggle && expiredSwitchVisible, hideExpired: hideExpired, setHideExpired: setHideExpiredState, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions })) })), jsxRuntime.jsx(SubscriptionsListContainer, { companyName: companyName, hideExpired: hideExpired, onCancelSubscriptionClick: onCancelSubscriptionClick, onChangePlanClick: onChangePlanClick, subscriptions: subscriptions, subscriptionsAreLoading: subscriptionsAreLoading, noSubscriptionsComponent: noSubscriptionsComponent }), isMobile && (jsxRuntime.jsx("div", __assign({ className: "bunny-pt-4 bunny-pb-2" }, { children: jsxRuntime.jsx(SubscriptionsNavigation, { expiredSwitchVisible: expiredSwitchVisible, hideExpired: hideExpired, setHideExpired: setHideExpiredState, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions }) }))), jsxRuntime.jsx(QuantityChangeDrawerDesktop, { editingQuote: quote, editingQuoteData: editingQuoteData, onClose: onClose, open: quantityDrawerOpen, openCheckout: function () { return setPayModalVisible(true); }, setEditingQuoteData: setEditingQuoteData, subscriptions: subscriptions }), jsxRuntime.jsx(Checkout, { onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, quote: quote, token: token, isMobile: isMobile, storedPaymentMethod: defaultPaymentMethod })] })));
 };
 var PageHeaderWithActions = function (_a) {
     var children = _a.children, title = _a.title;
@@ -22494,7 +22998,7 @@ var billingDetailsUpdate = function (_a) {
             switch (_c.label) {
                 case 0:
                     vars = { attributes: attributes };
-                    return [4 /*yield*/, common.gqlRequest({
+                    return [4 /*yield*/, gqlRequest({
                             query: MUTATION,
                             token: token,
                             vars: vars,
@@ -22522,7 +23026,7 @@ var getBillingDetails = function (_a) {
         var _b;
         return __generator(this, function (_c) {
             switch (_c.label) {
-                case 0: return [4 /*yield*/, common.gqlRequest({
+                case 0: return [4 /*yield*/, gqlRequest({
                         query: billingDetailsQuery(),
                         token: token,
                         apiHost: apiHost,