npm - @bunnyapp/components - Versions diffs - 1.0.6 → 1.0.8 - Mend

@bunnyapp/components 1.0.6 → 1.0.8

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

package/dist/esm/index.js CHANGED Viewed

@@ -2,19 +2,49 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { createContext, useContext, useEffect, useState, useMemo, useRef } from 'react';
 import { Markup } from 'interweave';
-import { ConfigProvider, Button, Typography, Checkbox, Input, Divider, Modal, Form, Tag, Popconfirm, Drawer, Select, Image, Card as Card$1, Dropdown } from 'antd';
+import { ConfigProvider, Button, Typography, Checkbox, Input, Divider, Modal, Form, Tag, Drawer, Card as Card$1, Popconfirm, Select, Image, Dropdown } from 'antd';
 import styled from 'styled-components';
-import { DEFAULT_ACCENT_COLOR, DEFAULT_BRAND_COLOR, DEFAULT_SECONDARY_COLOR, DEFAULT_TOP_NAV_IMAGE_URL, gqlRequest, createGraphQLClient, Misc, MARK_PRO, INPUT_BORDER_COLOR, SLATE_50, SLATE_400, SLATE_200, QueryKeyFactory, useDownloadFile, NotificationUtils, invokePlugin, useIsMobile as useIsMobile$1, GRAY_500, GRAY_200, CHARCOAL_GRAY, StringUtils, usePaymentPlugins, ApiUtils, PAYABLE_INVOICE_STATES, DOCUMENT_NAME as DOCUMENT_NAME$1, QuoteInvoiceUtils, usePlugins, GraphqlUtils, Lists, getTaxationRequiredAccountFields, getAccount, useCurrentUserData, SLATE_500, PRIMARY_COLOR, FrontendTransaction, SLATE_600, WHITE, TransactionKind, SubscriptionState as SubscriptionState$2, MODAL_MAX_HEIGHT, DataInterval, TAG_COLORS, ChargeType } from '@bunnyapp/common';
+import { DEFAULT_ACCENT_COLOR, DEFAULT_BRAND_COLOR, DEFAULT_SECONDARY_COLOR, DEFAULT_TOP_NAV_IMAGE_URL, gqlRequest, useIsMobile, isColorTooDark, MARK_PRO, INPUT_BORDER_COLOR, SLATE_50, SLATE_400, SLATE_200, QueryKeyFactory, useErrorNotification, invokePlugin, formatCurrency, GRAY_500, GRAY_200, CHARCOAL_GRAY, StringUtils, getPlugins, useSuccessNotification, useAllErrorFormats, getFormattedInvoice, PAYABLE_INVOICE_STATES, DOCUMENT_NAME as DOCUMENT_NAME$1, useGraphQLmutation, formatDate, FrontendTransaction, SLATE_600, WHITE, TransactionKind, Lists, getAccount, SubscriptionState as SubscriptionState$2, MODAL_MAX_HEIGHT, SLATE_500, DataInterval, TAG_COLORS, ChargeType } from '@bunnyapp/common';
 import { QueryClient, QueryClientProvider, useQuery, useMutation, useQueryClient, keepPreviousData } from '@tanstack/react-query';
-import { RecoilRoot, atom, useRecoilValue, useSetRecoilState, useRecoilState } from 'recoil';
 import theme from 'antd/lib/theme';
+import { RecoilRoot } from 'recoil';
+import { GraphQLClient } from 'graphql-request';
 import { HelmetProvider, Helmet } from 'react-helmet-async';
 import { useElements, useStripe, PaymentElement, Elements } from '@stripe/react-stripe-js';
 import { loadStripe } from '@stripe/stripe-js/pure';
 import { capitalize, startCase, cloneDeep, omit } from 'lodash';
-import request from 'graphql-request';
 import { BarChart, ResponsiveContainer, XAxis, Tooltip, Bar, Rectangle } from 'recharts';
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+  if (!css || typeof document === 'undefined') { return; }
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+var css_248z$1 = "/*! tailwindcss v4.0.0 | MIT License | https://tailwindcss.com */\n@import url(./global-vars.less);\n@tailwind base;\n@tailwind components;\n.\\@container {\n  container-type: inline-size;\n}\n.\\!visible {\n  visibility: visible !important;\n}\n.collapse {\n  visibility: collapse;\n}\n.invisible {\n  visibility: hidden;\n}\n.visible {\n  visibility: visible;\n}\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n.\\!fixed {\n  position: fixed !important;\n}\n.\\!relative {\n  position: relative !important;\n}\n.absolute {\n  position: absolute;\n}\n.fixed {\n  position: fixed;\n}\n.relative {\n  position: relative;\n}\n.static {\n  position: static;\n}\n.sticky {\n  position: sticky;\n}\n.-top-1 {\n  top: calc(var(--spacing) * -1);\n}\n.top-0 {\n  top: calc(var(--spacing) * 0);\n}\n.right-0 {\n  right: calc(var(--spacing) * 0);\n}\n.bottom-0 {\n  bottom: calc(var(--spacing) * 0);\n}\n.left-0 {\n  left: calc(var(--spacing) * 0);\n}\n.isolate {\n  isolation: isolate;\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.float-left {\n  float: left;\n}\n.float-right {\n  float: right;\n}\n.\\!container {\n  width: 100% !important;\n  @media (width >= 40rem) {\n    max-width: 40rem !important;\n  }\n  @media (width >= 48rem) {\n    max-width: 48rem !important;\n  }\n  @media (width >= 64rem) {\n    max-width: 64rem !important;\n  }\n  @media (width >= 80rem) {\n    max-width: 80rem !important;\n  }\n  @media (width >= 96rem) {\n    max-width: 96rem !important;\n  }\n}\n.container {\n  width: 100%;\n  @media (width >= 40rem) {\n    max-width: 40rem;\n  }\n  @media (width >= 48rem) {\n    max-width: 48rem;\n  }\n  @media (width >= 64rem) {\n    max-width: 64rem;\n  }\n  @media (width >= 80rem) {\n    max-width: 80rem;\n  }\n  @media (width >= 96rem) {\n    max-width: 96rem;\n  }\n}\n.m-0 {\n  margin: calc(var(--spacing) * 0);\n}\n.m-1 {\n  margin: calc(var(--spacing) * 1);\n}\n.m-2 {\n  margin: calc(var(--spacing) * 2);\n}\n.m-25 {\n  margin: calc(var(--spacing) * 25);\n}\n.m-55296 {\n  margin: calc(var(--spacing) * 55296);\n}\n.mx-8 {\n  margin-inline: calc(var(--spacing) * 8);\n}\n.mx-auto {\n  margin-inline: auto;\n}\n.my-2 {\n  margin-block: calc(var(--spacing) * 2);\n}\n.my-4 {\n  margin-block: calc(var(--spacing) * 4);\n}\n.my-12 {\n  margin-block: calc(var(--spacing) * 12);\n}\n.me-1 {\n  margin-inline-end: calc(var(--spacing) * 1);\n}\n.mt-1 {\n  margin-top: calc(var(--spacing) * 1);\n}\n.mt-2 {\n  margin-top: calc(var(--spacing) * 2);\n}\n.mt-4 {\n  margin-top: calc(var(--spacing) * 4);\n}\n.mt-6 {\n  margin-top: calc(var(--spacing) * 6);\n}\n.mt-8 {\n  margin-top: calc(var(--spacing) * 8);\n}\n.mr-8 {\n  margin-right: calc(var(--spacing) * 8);\n}\n.mb-2 {\n  margin-bottom: calc(var(--spacing) * 2);\n}\n.mb-4 {\n  margin-bottom: calc(var(--spacing) * 4);\n}\n.mb-8 {\n  margin-bottom: calc(var(--spacing) * 8);\n}\n.ml-2 {\n  margin-left: calc(var(--spacing) * 2);\n}\n.\\!block {\n  display: block !important;\n}\n.\\!grid {\n  display: grid !important;\n}\n.\\!hidden {\n  display: none !important;\n}\n.\\!table {\n  display: table !important;\n}\n.block {\n  display: block;\n}\n.contents {\n  display: contents;\n}\n.flex {\n  display: flex;\n}\n.grid {\n  display: grid;\n}\n.hidden {\n  display: none;\n}\n.inline {\n  display: inline;\n}\n.inline-block {\n  display: inline-block;\n}\n.inline-flex {\n  display: inline-flex;\n}\n.inline-grid {\n  display: inline-grid;\n}\n.list-item {\n  display: list-item;\n}\n.table {\n  display: table;\n}\n.table-caption {\n  display: table-caption;\n}\n.table-cell {\n  display: table-cell;\n}\n.table-column {\n  display: table-column;\n}\n.table-column-group {\n  display: table-column-group;\n}\n.table-footer-group {\n  display: table-footer-group;\n}\n.table-header-group {\n  display: table-header-group;\n}\n.table-row {\n  display: table-row;\n}\n.table-row-group {\n  display: table-row-group;\n}\n.size-1 {\n  width: calc(var(--spacing) * 1);\n  height: calc(var(--spacing) * 1);\n}\n.size-4 {\n  width: calc(var(--spacing) * 4);\n  height: calc(var(--spacing) * 4);\n}\n.size-7 {\n  width: calc(var(--spacing) * 7);\n  height: calc(var(--spacing) * 7);\n}\n.size-8 {\n  width: calc(var(--spacing) * 8);\n  height: calc(var(--spacing) * 8);\n}\n.size-11 {\n  width: calc(var(--spacing) * 11);\n  height: calc(var(--spacing) * 11);\n}\n.size-15 {\n  width: calc(var(--spacing) * 15);\n  height: calc(var(--spacing) * 15);\n}\n.h-1 {\n  height: calc(var(--spacing) * 1);\n}\n.h-3 {\n  height: calc(var(--spacing) * 3);\n}\n.h-4 {\n  height: calc(var(--spacing) * 4);\n}\n.h-5 {\n  height: calc(var(--spacing) * 5);\n}\n.h-8 {\n  height: calc(var(--spacing) * 8);\n}\n.h-100 {\n  height: calc(var(--spacing) * 100);\n}\n.h-16 {\n  height: calc(var(--spacing) * 16);\n}\n.h-16\\/116 {\n  height: calc(16/116 * 100%);\n}\n.h-full {\n  height: 100%;\n}\n.h-screen {\n  height: 100vh;\n}\n.w-1 {\n  width: calc(var(--spacing) * 1);\n}\n.w-1\\/2 {\n  width: calc(1/2 * 100%);\n}\n.w-4 {\n  width: calc(var(--spacing) * 4);\n}\n.w-12 {\n  width: calc(var(--spacing) * 12);\n}\n.w-full {\n  width: 100%;\n}\n.w-px {\n  width: 1px;\n}\n.w-screen {\n  width: 100vw;\n}\n.max-w-32 {\n  max-width: calc(var(--spacing) * 32);\n}\n.flex-shrink {\n  flex-shrink: 1;\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  rotate: 45deg;\n}\n.\\!transform {\n  transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y) !important;\n}\n.transform {\n  transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);\n}\n.transform\\! {\n  transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y) !important;\n}\n.cursor-pointer {\n  cursor: pointer;\n}\n.resize {\n  resize: both;\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-col {\n  flex-direction: column;\n}\n.flex-row {\n  flex-direction: row;\n}\n.flex-wrap {\n  flex-wrap: wrap;\n}\n.items-center {\n  align-items: center;\n}\n.items-end {\n  align-items: flex-end;\n}\n.justify-between {\n  justify-content: space-between;\n}\n.justify-center {\n  justify-content: center;\n}\n.justify-end {\n  justify-content: flex-end;\n}\n.justify-start {\n  justify-content: flex-start;\n}\n.gap-0 {\n  gap: calc(var(--spacing) * 0);\n}\n.gap-1 {\n  gap: calc(var(--spacing) * 1);\n}\n.gap-2 {\n  gap: calc(var(--spacing) * 2);\n}\n.gap-3 {\n  gap: calc(var(--spacing) * 3);\n}\n.gap-4 {\n  gap: calc(var(--spacing) * 4);\n}\n.gap-6 {\n  gap: calc(var(--spacing) * 6);\n}\n.space-y-2 {\n  :where(& > :not(:last-child)) {\n    --tw-space-y-reverse: 0;\n    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));\n    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));\n  }\n}\n.space-y-8 {\n  :where(& > :not(:last-child)) {\n    --tw-space-y-reverse: 0;\n    margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));\n    margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));\n  }\n}\n.gap-y-0 {\n  row-gap: calc(var(--spacing) * 0);\n}\n.self-end {\n  align-self: flex-end;\n}\n.self-start {\n  align-self: flex-start;\n}\n.truncate {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.overflow-auto {\n  overflow: auto;\n}\n.overflow-hidden {\n  overflow: hidden;\n}\n.overflow-visible {\n  overflow: visible;\n}\n.rounded {\n  border-radius: 0.25rem;\n}\n.rounded-full {\n  border-radius: calc(infinity * 1px);\n}\n.rounded-lg {\n  border-radius: var(--radius-lg);\n}\n.rounded-md {\n  border-radius: var(--radius-md);\n}\n.border {\n  border-style: var(--tw-border-style);\n  border-width: 1px;\n}\n.border-t-1 {\n  border-top-style: var(--tw-border-style);\n  border-top-width: 1px;\n}\n.border-b-1 {\n  border-bottom-style: var(--tw-border-style);\n  border-bottom-width: 1px;\n}\n.border-solid {\n  --tw-border-style: solid;\n  border-style: solid;\n}\n.border-gray-400 {\n  border-color: var(--color-gray-400);\n}\n.border-gray-500 {\n  border-color: var(--color-gray-500);\n}\n.border-slate-200 {\n  border-color: var(--color-slate-200);\n}\n.bg-black {\n  background-color: var(--color-black);\n}\n.bg-emerald-200 {\n  background-color: var(--color-emerald-200);\n}\n.bg-gray-200 {\n  background-color: var(--color-gray-200);\n}\n.bg-green-200 {\n  background-color: var(--color-green-200);\n}\n.bg-red-500 {\n  background-color: var(--color-red-500);\n}\n.bg-slate-50 {\n  background-color: var(--color-slate-50);\n}\n.bg-white {\n  background-color: var(--color-white);\n}\n.p-0 {\n  padding: calc(var(--spacing) * 0);\n}\n.p-1 {\n  padding: calc(var(--spacing) * 1);\n}\n.p-2 {\n  padding: calc(var(--spacing) * 2);\n}\n.p-4 {\n  padding: calc(var(--spacing) * 4);\n}\n.px-2 {\n  padding-inline: calc(var(--spacing) * 2);\n}\n.px-4 {\n  padding-inline: calc(var(--spacing) * 4);\n}\n.px-6 {\n  padding-inline: calc(var(--spacing) * 6);\n}\n.py-1 {\n  padding-block: calc(var(--spacing) * 1);\n}\n.py-2 {\n  padding-block: calc(var(--spacing) * 2);\n}\n.py-4 {\n  padding-block: calc(var(--spacing) * 4);\n}\n.py-6 {\n  padding-block: calc(var(--spacing) * 6);\n}\n.pt-1 {\n  padding-top: calc(var(--spacing) * 1);\n}\n.pt-2 {\n  padding-top: calc(var(--spacing) * 2);\n}\n.pt-4 {\n  padding-top: calc(var(--spacing) * 4);\n}\n.pt-5 {\n  padding-top: calc(var(--spacing) * 5);\n}\n.pt-6 {\n  padding-top: calc(var(--spacing) * 6);\n}\n.pt-8 {\n  padding-top: calc(var(--spacing) * 8);\n}\n.pb-2 {\n  padding-bottom: calc(var(--spacing) * 2);\n}\n.pb-4 {\n  padding-bottom: calc(var(--spacing) * 4);\n}\n.pb-6 {\n  padding-bottom: calc(var(--spacing) * 6);\n}\n.pb-8 {\n  padding-bottom: calc(var(--spacing) * 8);\n}\n.pl-0 {\n  padding-left: calc(var(--spacing) * 0);\n}\n.pl-2 {\n  padding-left: calc(var(--spacing) * 2);\n}\n.pl-4 {\n  padding-left: calc(var(--spacing) * 4);\n}\n.text-center {\n  text-align: center;\n}\n.text-left {\n  text-align: left;\n}\n.text-right {\n  text-align: right;\n}\n.align-middle {\n  vertical-align: middle;\n}\n.text-2xl {\n  font-size: var(--text-2xl);\n  line-height: var(--tw-leading, var(--text-2xl--line-height));\n}\n.text-base {\n  font-size: var(--text-base);\n  line-height: var(--tw-leading, var(--text-base--line-height));\n}\n.text-lg {\n  font-size: var(--text-lg);\n  line-height: var(--tw-leading, var(--text-lg--line-height));\n}\n.text-sm {\n  font-size: var(--text-sm);\n  line-height: var(--tw-leading, var(--text-sm--line-height));\n}\n.text-xl {\n  font-size: var(--text-xl);\n  line-height: var(--tw-leading, var(--text-xl--line-height));\n}\n.text-xs {\n  font-size: var(--text-xs);\n  line-height: var(--tw-leading, var(--text-xs--line-height));\n}\n.font-bold {\n  --tw-font-weight: var(--font-weight-bold);\n  font-weight: var(--font-weight-bold);\n}\n.font-light {\n  --tw-font-weight: var(--font-weight-light);\n  font-weight: var(--font-weight-light);\n}\n.font-medium {\n  --tw-font-weight: var(--font-weight-medium);\n  font-weight: var(--font-weight-medium);\n}\n.font-normal {\n  --tw-font-weight: var(--font-weight-normal);\n  font-weight: var(--font-weight-normal);\n}\n.text-nowrap {\n  text-wrap: nowrap;\n}\n.text-wrap {\n  text-wrap: wrap;\n}\n.break-all {\n  word-break: break-all;\n}\n.whitespace-nowrap {\n  white-space: nowrap;\n}\n.text-emerald-700 {\n  color: var(--color-emerald-700);\n}\n.text-gray-600 {\n  color: var(--color-gray-600);\n}\n.text-gray-900 {\n  color: var(--color-gray-900);\n}\n.text-green-600 {\n  color: var(--color-green-600);\n}\n.text-orange-500 {\n  color: var(--color-orange-500);\n}\n.text-orange-600 {\n  color: var(--color-orange-600);\n}\n.text-slate-400 {\n  color: var(--color-slate-400);\n}\n.text-slate-500 {\n  color: var(--color-slate-500);\n}\n.text-slate-600 {\n  color: var(--color-slate-600);\n}\n.text-white {\n  color: var(--color-white);\n}\n.capitalize {\n  text-transform: capitalize;\n}\n.lowercase {\n  text-transform: lowercase;\n}\n.lowercase\\! {\n  text-transform: lowercase !important;\n}\n.uppercase {\n  text-transform: uppercase;\n}\n.italic {\n  font-style: italic;\n}\n.ordinal {\n  --tw-ordinal: ordinal;\n  font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);\n}\n.tabular-nums {\n  --tw-numeric-spacing: tabular-nums;\n  font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);\n}\n.line-through {\n  text-decoration-line: line-through;\n}\n.overline {\n  text-decoration-line: overline;\n}\n.underline {\n  text-decoration-line: underline;\n}\n.antialiased {\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n.ring {\n  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);\n  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n}\n.shadow {\n  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n}\n.shadow-md {\n  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n}\n.shadow\\/gap {\n  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n}\n.outline {\n  outline-style: var(--tw-outline-style);\n  outline-width: 1px;\n}\n.blur {\n  --tw-blur: blur(8px);\n  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n}\n.drop-shadow {\n  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow( 0 1px 1px rgb(0 0 0 / 0.06));\n  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n}\n.grayscale {\n  --tw-grayscale: grayscale(100%);\n  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n}\n.invert {\n  --tw-invert: invert(100%);\n  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n}\n.\\!filter {\n  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,) !important;\n}\n.filter {\n  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n}\n.filter\\! {\n  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,) !important;\n}\n.backdrop-filter {\n  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n}\n.\\!transition {\n  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter !important;\n  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)) !important;\n  transition-duration: var(--tw-duration, var(--default-transition-duration)) !important;\n}\n.transition {\n  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;\n  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n  transition-duration: var(--tw-duration, var(--default-transition-duration));\n}\n.transition\\! {\n  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter !important;\n  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)) !important;\n  transition-duration: var(--tw-duration, var(--default-transition-duration)) !important;\n}\n.ease-in {\n  --tw-ease: var(--ease-in);\n  transition-timing-function: var(--ease-in);\n}\n.ease-in-out {\n  --tw-ease: var(--ease-in-out);\n  transition-timing-function: var(--ease-in-out);\n}\n.ease-out {\n  --tw-ease: var(--ease-out);\n  transition-timing-function: var(--ease-out);\n}\n.\\[vite\\:css\\] {\n  vite: css;\n}\n.\\[vite\\:html\\] {\n  vite: html;\n}\n.select-all {\n  -webkit-user-select: all;\n  user-select: all;\n}\n.sm\\:flex {\n  @media (width >= 40rem) {\n    display: flex;\n  }\n}\n.sm\\:hidden {\n  @media (width >= 40rem) {\n    display: none;\n  }\n}\n.dark\\:bg-gray-900 {\n  @media (prefers-color-scheme: dark) {\n    background-color: var(--color-gray-900);\n  }\n}\n@layer theme, base, components, utilities;\n@layer theme {\n  :root {\n    --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n      \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --font-serif: ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif;\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,\n      \"Liberation Mono\", \"Courier New\", monospace;\n    --color-red-50: oklch(0.971 0.013 17.38);\n    --color-red-100: oklch(0.936 0.032 17.717);\n    --color-red-200: oklch(0.885 0.062 18.334);\n    --color-red-300: oklch(0.808 0.114 19.571);\n    --color-red-400: oklch(0.704 0.191 22.216);\n    --color-red-500: oklch(0.637 0.237 25.331);\n    --color-red-600: oklch(0.577 0.245 27.325);\n    --color-red-700: oklch(0.505 0.213 27.518);\n    --color-red-800: oklch(0.444 0.177 26.899);\n    --color-red-900: oklch(0.396 0.141 25.723);\n    --color-red-950: oklch(0.258 0.092 26.042);\n    --color-orange-50: oklch(0.98 0.016 73.684);\n    --color-orange-100: oklch(0.954 0.038 75.164);\n    --color-orange-200: oklch(0.901 0.076 70.697);\n    --color-orange-300: oklch(0.837 0.128 66.29);\n    --color-orange-400: oklch(0.75 0.183 55.934);\n    --color-orange-500: oklch(0.705 0.213 47.604);\n    --color-orange-600: oklch(0.646 0.222 41.116);\n    --color-orange-700: oklch(0.553 0.195 38.402);\n    --color-orange-800: oklch(0.47 0.157 37.304);\n    --color-orange-900: oklch(0.408 0.123 38.172);\n    --color-orange-950: oklch(0.266 0.079 36.259);\n    --color-amber-50: oklch(0.987 0.022 95.277);\n    --color-amber-100: oklch(0.962 0.059 95.617);\n    --color-amber-200: oklch(0.924 0.12 95.746);\n    --color-amber-300: oklch(0.879 0.169 91.605);\n    --color-amber-400: oklch(0.828 0.189 84.429);\n    --color-amber-500: oklch(0.769 0.188 70.08);\n    --color-amber-600: oklch(0.666 0.179 58.318);\n    --color-amber-700: oklch(0.555 0.163 48.998);\n    --color-amber-800: oklch(0.473 0.137 46.201);\n    --color-amber-900: oklch(0.414 0.112 45.904);\n    --color-amber-950: oklch(0.279 0.077 45.635);\n    --color-yellow-50: oklch(0.987 0.026 102.212);\n    --color-yellow-100: oklch(0.973 0.071 103.193);\n    --color-yellow-200: oklch(0.945 0.129 101.54);\n    --color-yellow-300: oklch(0.905 0.182 98.111);\n    --color-yellow-400: oklch(0.852 0.199 91.936);\n    --color-yellow-500: oklch(0.795 0.184 86.047);\n    --color-yellow-600: oklch(0.681 0.162 75.834);\n    --color-yellow-700: oklch(0.554 0.135 66.442);\n    --color-yellow-800: oklch(0.476 0.114 61.907);\n    --color-yellow-900: oklch(0.421 0.095 57.708);\n    --color-yellow-950: oklch(0.286 0.066 53.813);\n    --color-lime-50: oklch(0.986 0.031 120.757);\n    --color-lime-100: oklch(0.967 0.067 122.328);\n    --color-lime-200: oklch(0.938 0.127 124.321);\n    --color-lime-300: oklch(0.897 0.196 126.665);\n    --color-lime-400: oklch(0.841 0.238 128.85);\n    --color-lime-500: oklch(0.768 0.233 130.85);\n    --color-lime-600: oklch(0.648 0.2 131.684);\n    --color-lime-700: oklch(0.532 0.157 131.589);\n    --color-lime-800: oklch(0.453 0.124 130.933);\n    --color-lime-900: oklch(0.405 0.101 131.063);\n    --color-lime-950: oklch(0.274 0.072 132.109);\n    --color-green-50: oklch(0.982 0.018 155.826);\n    --color-green-100: oklch(0.962 0.044 156.743);\n    --color-green-200: oklch(0.925 0.084 155.995);\n    --color-green-300: oklch(0.871 0.15 154.449);\n    --color-green-400: oklch(0.792 0.209 151.711);\n    --color-green-500: oklch(0.723 0.219 149.579);\n    --color-green-600: oklch(0.627 0.194 149.214);\n    --color-green-700: oklch(0.527 0.154 150.069);\n    --color-green-800: oklch(0.448 0.119 151.328);\n    --color-green-900: oklch(0.393 0.095 152.535);\n    --color-green-950: oklch(0.266 0.065 152.934);\n    --color-emerald-50: oklch(0.979 0.021 166.113);\n    --color-emerald-100: oklch(0.95 0.052 163.051);\n    --color-emerald-200: oklch(0.905 0.093 164.15);\n    --color-emerald-300: oklch(0.845 0.143 164.978);\n    --color-emerald-400: oklch(0.765 0.177 163.223);\n    --color-emerald-500: oklch(0.696 0.17 162.48);\n    --color-emerald-600: oklch(0.596 0.145 163.225);\n    --color-emerald-700: oklch(0.508 0.118 165.612);\n    --color-emerald-800: oklch(0.432 0.095 166.913);\n    --color-emerald-900: oklch(0.378 0.077 168.94);\n    --color-emerald-950: oklch(0.262 0.051 172.552);\n    --color-teal-50: oklch(0.984 0.014 180.72);\n    --color-teal-100: oklch(0.953 0.051 180.801);\n    --color-teal-200: oklch(0.91 0.096 180.426);\n    --color-teal-300: oklch(0.855 0.138 181.071);\n    --color-teal-400: oklch(0.777 0.152 181.912);\n    --color-teal-500: oklch(0.704 0.14 182.503);\n    --color-teal-600: oklch(0.6 0.118 184.704);\n    --color-teal-700: oklch(0.511 0.096 186.391);\n    --color-teal-800: oklch(0.437 0.078 188.216);\n    --color-teal-900: oklch(0.386 0.063 188.416);\n    --color-teal-950: oklch(0.277 0.046 192.524);\n    --color-cyan-50: oklch(0.984 0.019 200.873);\n    --color-cyan-100: oklch(0.956 0.045 203.388);\n    --color-cyan-200: oklch(0.917 0.08 205.041);\n    --color-cyan-300: oklch(0.865 0.127 207.078);\n    --color-cyan-400: oklch(0.789 0.154 211.53);\n    --color-cyan-500: oklch(0.715 0.143 215.221);\n    --color-cyan-600: oklch(0.609 0.126 221.723);\n    --color-cyan-700: oklch(0.52 0.105 223.128);\n    --color-cyan-800: oklch(0.45 0.085 224.283);\n    --color-cyan-900: oklch(0.398 0.07 227.392);\n    --color-cyan-950: oklch(0.302 0.056 229.695);\n    --color-sky-50: oklch(0.977 0.013 236.62);\n    --color-sky-100: oklch(0.951 0.026 236.824);\n    --color-sky-200: oklch(0.901 0.058 230.902);\n    --color-sky-300: oklch(0.828 0.111 230.318);\n    --color-sky-400: oklch(0.746 0.16 232.661);\n    --color-sky-500: oklch(0.685 0.169 237.323);\n    --color-sky-600: oklch(0.588 0.158 241.966);\n    --color-sky-700: oklch(0.5 0.134 242.749);\n    --color-sky-800: oklch(0.443 0.11 240.79);\n    --color-sky-900: oklch(0.391 0.09 240.876);\n    --color-sky-950: oklch(0.293 0.066 243.157);\n    --color-blue-50: oklch(0.97 0.014 254.604);\n    --color-blue-100: oklch(0.932 0.032 255.585);\n    --color-blue-200: oklch(0.882 0.059 254.128);\n    --color-blue-300: oklch(0.809 0.105 251.813);\n    --color-blue-400: oklch(0.707 0.165 254.624);\n    --color-blue-500: oklch(0.623 0.214 259.815);\n    --color-blue-600: oklch(0.546 0.245 262.881);\n    --color-blue-700: oklch(0.488 0.243 264.376);\n    --color-blue-800: oklch(0.424 0.199 265.638);\n    --color-blue-900: oklch(0.379 0.146 265.522);\n    --color-blue-950: oklch(0.282 0.091 267.935);\n    --color-indigo-50: oklch(0.962 0.018 272.314);\n    --color-indigo-100: oklch(0.93 0.034 272.788);\n    --color-indigo-200: oklch(0.87 0.065 274.039);\n    --color-indigo-300: oklch(0.785 0.115 274.713);\n    --color-indigo-400: oklch(0.673 0.182 276.935);\n    --color-indigo-500: oklch(0.585 0.233 277.117);\n    --color-indigo-600: oklch(0.511 0.262 276.966);\n    --color-indigo-700: oklch(0.457 0.24 277.023);\n    --color-indigo-800: oklch(0.398 0.195 277.366);\n    --color-indigo-900: oklch(0.359 0.144 278.697);\n    --color-indigo-950: oklch(0.257 0.09 281.288);\n    --color-violet-50: oklch(0.969 0.016 293.756);\n    --color-violet-100: oklch(0.943 0.029 294.588);\n    --color-violet-200: oklch(0.894 0.057 293.283);\n    --color-violet-300: oklch(0.811 0.111 293.571);\n    --color-violet-400: oklch(0.702 0.183 293.541);\n    --color-violet-500: oklch(0.606 0.25 292.717);\n    --color-violet-600: oklch(0.541 0.281 293.009);\n    --color-violet-700: oklch(0.491 0.27 292.581);\n    --color-violet-800: oklch(0.432 0.232 292.759);\n    --color-violet-900: oklch(0.38 0.189 293.745);\n    --color-violet-950: oklch(0.283 0.141 291.089);\n    --color-purple-50: oklch(0.977 0.014 308.299);\n    --color-purple-100: oklch(0.946 0.033 307.174);\n    --color-purple-200: oklch(0.902 0.063 306.703);\n    --color-purple-300: oklch(0.827 0.119 306.383);\n    --color-purple-400: oklch(0.714 0.203 305.504);\n    --color-purple-500: oklch(0.627 0.265 303.9);\n    --color-purple-600: oklch(0.558 0.288 302.321);\n    --color-purple-700: oklch(0.496 0.265 301.924);\n    --color-purple-800: oklch(0.438 0.218 303.724);\n    --color-purple-900: oklch(0.381 0.176 304.987);\n    --color-purple-950: oklch(0.291 0.149 302.717);\n    --color-fuchsia-50: oklch(0.977 0.017 320.058);\n    --color-fuchsia-100: oklch(0.952 0.037 318.852);\n    --color-fuchsia-200: oklch(0.903 0.076 319.62);\n    --color-fuchsia-300: oklch(0.833 0.145 321.434);\n    --color-fuchsia-400: oklch(0.74 0.238 322.16);\n    --color-fuchsia-500: oklch(0.667 0.295 322.15);\n    --color-fuchsia-600: oklch(0.591 0.293 322.896);\n    --color-fuchsia-700: oklch(0.518 0.253 323.949);\n    --color-fuchsia-800: oklch(0.452 0.211 324.591);\n    --color-fuchsia-900: oklch(0.401 0.17 325.612);\n    --color-fuchsia-950: oklch(0.293 0.136 325.661);\n    --color-pink-50: oklch(0.971 0.014 343.198);\n    --color-pink-100: oklch(0.948 0.028 342.258);\n    --color-pink-200: oklch(0.899 0.061 343.231);\n    --color-pink-300: oklch(0.823 0.12 346.018);\n    --color-pink-400: oklch(0.718 0.202 349.761);\n    --color-pink-500: oklch(0.656 0.241 354.308);\n    --color-pink-600: oklch(0.592 0.249 0.584);\n    --color-pink-700: oklch(0.525 0.223 3.958);\n    --color-pink-800: oklch(0.459 0.187 3.815);\n    --color-pink-900: oklch(0.408 0.153 2.432);\n    --color-pink-950: oklch(0.284 0.109 3.907);\n    --color-rose-50: oklch(0.969 0.015 12.422);\n    --color-rose-100: oklch(0.941 0.03 12.58);\n    --color-rose-200: oklch(0.892 0.058 10.001);\n    --color-rose-300: oklch(0.81 0.117 11.638);\n    --color-rose-400: oklch(0.712 0.194 13.428);\n    --color-rose-500: oklch(0.645 0.246 16.439);\n    --color-rose-600: oklch(0.586 0.253 17.585);\n    --color-rose-700: oklch(0.514 0.222 16.935);\n    --color-rose-800: oklch(0.455 0.188 13.697);\n    --color-rose-900: oklch(0.41 0.159 10.272);\n    --color-rose-950: oklch(0.271 0.105 12.094);\n    --color-slate-50: oklch(0.984 0.003 247.858);\n    --color-slate-100: oklch(0.968 0.007 247.896);\n    --color-slate-200: oklch(0.929 0.013 255.508);\n    --color-slate-300: oklch(0.869 0.022 252.894);\n    --color-slate-400: oklch(0.704 0.04 256.788);\n    --color-slate-500: oklch(0.554 0.046 257.417);\n    --color-slate-600: oklch(0.446 0.043 257.281);\n    --color-slate-700: oklch(0.372 0.044 257.287);\n    --color-slate-800: oklch(0.279 0.041 260.031);\n    --color-slate-900: oklch(0.208 0.042 265.755);\n    --color-slate-950: oklch(0.129 0.042 264.695);\n    --color-gray-50: oklch(0.985 0.002 247.839);\n    --color-gray-100: oklch(0.967 0.003 264.542);\n    --color-gray-200: oklch(0.928 0.006 264.531);\n    --color-gray-300: oklch(0.872 0.01 258.338);\n    --color-gray-400: oklch(0.707 0.022 261.325);\n    --color-gray-500: oklch(0.551 0.027 264.364);\n    --color-gray-600: oklch(0.446 0.03 256.802);\n    --color-gray-700: oklch(0.373 0.034 259.733);\n    --color-gray-800: oklch(0.278 0.033 256.848);\n    --color-gray-900: oklch(0.21 0.034 264.665);\n    --color-gray-950: oklch(0.13 0.028 261.692);\n    --color-zinc-50: oklch(0.985 0 0);\n    --color-zinc-100: oklch(0.967 0.001 286.375);\n    --color-zinc-200: oklch(0.92 0.004 286.32);\n    --color-zinc-300: oklch(0.871 0.006 286.286);\n    --color-zinc-400: oklch(0.705 0.015 286.067);\n    --color-zinc-500: oklch(0.552 0.016 285.938);\n    --color-zinc-600: oklch(0.442 0.017 285.786);\n    --color-zinc-700: oklch(0.37 0.013 285.805);\n    --color-zinc-800: oklch(0.274 0.006 286.033);\n    --color-zinc-900: oklch(0.21 0.006 285.885);\n    --color-zinc-950: oklch(0.141 0.005 285.823);\n    --color-neutral-50: oklch(0.985 0 0);\n    --color-neutral-100: oklch(0.97 0 0);\n    --color-neutral-200: oklch(0.922 0 0);\n    --color-neutral-300: oklch(0.87 0 0);\n    --color-neutral-400: oklch(0.708 0 0);\n    --color-neutral-500: oklch(0.556 0 0);\n    --color-neutral-600: oklch(0.439 0 0);\n    --color-neutral-700: oklch(0.371 0 0);\n    --color-neutral-800: oklch(0.269 0 0);\n    --color-neutral-900: oklch(0.205 0 0);\n    --color-neutral-950: oklch(0.145 0 0);\n    --color-stone-50: oklch(0.985 0.001 106.423);\n    --color-stone-100: oklch(0.97 0.001 106.424);\n    --color-stone-200: oklch(0.923 0.003 48.717);\n    --color-stone-300: oklch(0.869 0.005 56.366);\n    --color-stone-400: oklch(0.709 0.01 56.259);\n    --color-stone-500: oklch(0.553 0.013 58.071);\n    --color-stone-600: oklch(0.444 0.011 73.639);\n    --color-stone-700: oklch(0.374 0.01 67.558);\n    --color-stone-800: oklch(0.268 0.007 34.298);\n    --color-stone-900: oklch(0.216 0.006 56.043);\n    --color-stone-950: oklch(0.147 0.004 49.25);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --breakpoint-sm: 40rem;\n    --breakpoint-md: 48rem;\n    --breakpoint-lg: 64rem;\n    --breakpoint-xl: 80rem;\n    --breakpoint-2xl: 96rem;\n    --container-3xs: 16rem;\n    --container-2xs: 18rem;\n    --container-xs: 20rem;\n    --container-sm: 24rem;\n    --container-md: 28rem;\n    --container-lg: 32rem;\n    --container-xl: 36rem;\n    --container-2xl: 42rem;\n    --container-3xl: 48rem;\n    --container-4xl: 56rem;\n    --container-5xl: 64rem;\n    --container-6xl: 72rem;\n    --container-7xl: 80rem;\n    --text-xs: 0.75rem;\n    --text-xs--line-height: calc(1 / 0.75);\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-base: 1rem;\n    --text-base--line-height: calc(1.5 / 1);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --text-xl: 1.25rem;\n    --text-xl--line-height: calc(1.75 / 1.25);\n    --text-2xl: 1.5rem;\n    --text-2xl--line-height: calc(2 / 1.5);\n    --text-3xl: 1.875rem;\n    --text-3xl--line-height: calc(2.25 / 1.875);\n    --text-4xl: 2.25rem;\n    --text-4xl--line-height: calc(2.5 / 2.25);\n    --text-5xl: 3rem;\n    --text-5xl--line-height: 1;\n    --text-6xl: 3.75rem;\n    --text-6xl--line-height: 1;\n    --text-7xl: 4.5rem;\n    --text-7xl--line-height: 1;\n    --text-8xl: 6rem;\n    --text-8xl--line-height: 1;\n    --text-9xl: 8rem;\n    --text-9xl--line-height: 1;\n    --font-weight-thin: 100;\n    --font-weight-extralight: 200;\n    --font-weight-light: 300;\n    --font-weight-normal: 400;\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --font-weight-extrabold: 800;\n    --font-weight-black: 900;\n    --tracking-tighter: -0.05em;\n    --tracking-tight: -0.025em;\n    --tracking-normal: 0em;\n    --tracking-wide: 0.025em;\n    --tracking-wider: 0.05em;\n    --tracking-widest: 0.1em;\n    --leading-tight: 1.25;\n    --leading-snug: 1.375;\n    --leading-normal: 1.5;\n    --leading-relaxed: 1.625;\n    --leading-loose: 2;\n    --radius-xs: 0.125rem;\n    --radius-sm: 0.25rem;\n    --radius-md: 0.375rem;\n    --radius-lg: 0.5rem;\n    --radius-xl: 0.75rem;\n    --radius-2xl: 1rem;\n    --radius-3xl: 1.5rem;\n    --radius-4xl: 2rem;\n    --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);\n    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1),\n      0 2px 4px -2px rgb(0 0 0 / 0.1);\n    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),\n      0 4px 6px -4px rgb(0 0 0 / 0.1);\n    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),\n      0 8px 10px -6px rgb(0 0 0 / 0.1);\n    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n    --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);\n    --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);\n    --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);\n    --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);\n    --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);\n    --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);\n    --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);\n    --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);\n    --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);\n    --ease-in: cubic-bezier(0.4, 0, 1, 1);\n    --ease-out: cubic-bezier(0, 0, 0.2, 1);\n    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n    --animate-spin: spin 1s linear infinite;\n    --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;\n    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n    --animate-bounce: bounce 1s infinite;\n    --blur-xs: 4px;\n    --blur-sm: 8px;\n    --blur-md: 12px;\n    --blur-lg: 16px;\n    --blur-xl: 24px;\n    --blur-2xl: 40px;\n    --blur-3xl: 64px;\n    --perspective-dramatic: 100px;\n    --perspective-near: 300px;\n    --perspective-normal: 500px;\n    --perspective-midrange: 800px;\n    --perspective-distant: 1200px;\n    --aspect-video: 16 / 9;\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--font-sans);\n    --default-font-feature-settings: var(--font-sans--font-feature-settings);\n    --default-font-variation-settings: var(\n      --font-sans--font-variation-settings\n    );\n    --default-mono-font-family: var(--font-mono);\n    --default-mono-font-feature-settings: var(\n      --font-mono--font-feature-settings\n    );\n    --default-mono-font-variation-settings: var(\n      --font-mono--font-variation-settings\n    );\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var( --default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\" );\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var( --default-font-variation-settings, normal );\n    -webkit-tap-highlight-color: transparent;\n  }\n  body {\n    line-height: inherit;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var( --default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace );\n    font-feature-settings: var( --default-mono-font-feature-settings, normal );\n    font-variation-settings: var( --default-mono-font-variation-settings, normal );\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n    color: color-mix(in oklab, currentColor 50%, transparent);\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities;\n@media (min-width: 768px) {\n  .sm\\:hidden {\n    display: none !important;\n  }\n  .sm\\:flex {\n    display: flex !important;\n  }\n}\n.text-xxs {\n  font-size: 0.625rem;\n}\n.w-1\\/2 {\n  width: 50%;\n}\n.border-t-1 {\n  border-top-width: 1px;\n}\n.border-b-1 {\n  border-bottom-width: 1px;\n}\n.border-t-solid {\n  border-top-style: solid;\n}\n.border-b-solid {\n  border-bottom-style: solid;\n}\n.text-nowrap {\n  white-space: nowrap;\n}\n.max-w-32 {\n  max-width: 8rem;\n}\n// Used to hide sections from UI but remain in PDFs .pdf-only {\n  display: none !important;\n}\n.font-light {\n  font-family: @mark-pro-light;\n}\n.font-medium {\n  font-family: @mark-pro-medium;\n}\n.font-bold {\n  font-family: @mark-pro-bold;\n}\n.gap-y-0 {\n  row-gap: 0px !important;\n}\n.gap-0 {\n  gap: 0px !important;\n}\n.grow {\n  flex-grow: 1;\n}\n.rounded-md {\n  border-radius: 0.375rem;\n}\n.shadow-md {\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n}\n.text-slate-400 {\n  --tw-text-opacity: 1;\n  color: rgb(148 163 184 / 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-emerald-700 {\n  --tw-text-opacity: 1;\n  color: rgb(22 163 74 / var(--tw-text-opacity, 1));\n}\n.bg-emerald-200 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(187 247 208 / var(--tw-bg-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.text-2xl {\n  font-size: 1.5rem;\n  line-height: 2rem;\n}\n.border-collapse {\n  border-collapse: collapse;\n}\n.align-middle {\n  vertical-align: middle;\n}\n.has-tooltip {\n  position: relative;\n}\n.ui-only {\n  display: none;\n}\n.tooltip {\n  position: absolute;\n  z-index: 10;\n  background-color: black;\n  color: white;\n  padding: 0.5rem;\n  border-radius: 0.25rem;\n}\n.relative {\n  position: relative;\n}\n.tootip-arrow {\n  width: 0;\n  height: 0;\n  border-left: 0.5rem solid transparent;\n  border-right: 0.5rem solid transparent;\n  border-bottom: 0.5rem solid black;\n  position: absolute;\n  top: -0.5rem;\n}\n.absolute {\n  position: absolute;\n}\n.rotate-45 {\n  transform: rotate(45deg);\n}\n.-top-1\\/10 {\n  top: -10%;\n}\n.bg-black {\n  background-color: black;\n}\n.w-4 {\n  width: 1rem;\n}\n.h-4 {\n  height: 1rem;\n}\n.text-white {\n  color: white;\n}\n.p-2 {\n  padding: 0.5rem;\n}\n.rounded-md {\n  border-radius: 0.375rem;\n}\n.z-50 {\n  z-index: 50;\n}\n.mr-8 {\n  margin-right: 2rem;\n}\n.notes {\n  font-style: italic;\n}\n.mt-8 {\n  margin-top: 2rem;\n}\n@property --tw-rotate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: rotateX(0);\n}\n@property --tw-rotate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: rotateY(0);\n}\n@property --tw-rotate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: rotateZ(0);\n}\n@property --tw-skew-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: skewX(0);\n}\n@property --tw-skew-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: skewY(0);\n}\n@property --tw-space-y-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ordinal {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-slashed-zero {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-numeric-figure {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-numeric-spacing {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-numeric-fraction {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-outline-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-blur {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-brightness {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-contrast {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-grayscale {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-hue-rotate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-invert {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-opacity {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-saturate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-sepia {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-blur {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-brightness {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-contrast {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-grayscale {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-hue-rotate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-invert {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-opacity {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-saturate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-sepia {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ease {\n  syntax: \"*\";\n  inherits: false;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes ping {\n  75%, 100% {\n    transform: scale(2);\n    opacity: 0;\n  }\n}\n@keyframes pulse {\n  50% {\n    opacity: 0.5;\n  }\n}\n@keyframes bounce {\n  0%, 100% {\n    transform: translateY(-25%);\n    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\n  }\n  50% {\n    transform: none;\n    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  }\n}\n";
+styleInject(css_248z$1);
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -88,36 +118,6 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
   return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-  if (!css || typeof document === 'undefined') { return; }
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-var css_248z = ".ant-tag {\n  border: none;\n  border-radius: 14px;\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n  font-weight: 500;\n  white-space: nowrap;\n  margin: 0;\n}\n.ant-tag-blue {\n  color: #3b82f6 !important;\n  background: #bfdbfe !important;\n}\n.ant-tag-green {\n  color: #059669 !important;\n  background: #a7f3d0 !important;\n}\n.ant-tag-red {\n  color: #ef4444 !important;\n  background: #fecaca !important;\n}\n.ant-tag-orange {\n  color: #f97316 !important;\n  background: #fed7aa !important;\n}\n.ant-tag-yellow {\n  color: #f59e0b !important;\n  background: #fde68a !important;\n}\n.ant-tag-purple {\n  color: #8b5cf6 !important;\n  background: #ddd6fe !important;\n}\n.ant-tag-black {\n  color: white !important;\n  background: black !important;\n}\n.ant-popover {\n  z-index: 1050;\n}\n.ant-popover-inner-content {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  max-width: 300px;\n}\n.ant-popover-message-title {\n  padding: 0;\n  text-align: center;\n  font-size: 1rem;\n}\n.ant-popover-buttons {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.ant-btn-primary:disabled {\n  background: #eef0f2 !important;\n  color: rgba(0, 0, 0, 0.25) !important;\n  border: none;\n}\n.ant-btn {\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n  font-weight: 500;\n  box-shadow: none;\n  text-shadow: none;\n  outline: none !important;\n  line-height: 1;\n  font-size: 0.875rem;\n  font-weight: normal;\n}\n.ant-btn > span {\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n}\n.ant-btn-lg {\n  height: 44px !important;\n}\n.ant-btn-default:disabled {\n  border-color: rgba(113, 125, 148, 0.2) !important;\n}\n.ant-btn-link {\n  border: none !important;\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n}\n.ant-btn-link > span {\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n}\n.ant-btn-link:disabled {\n  background-color: transparent !important;\n  color: #717d94 !important;\n}\n.ant-btn-link:disabled:hover {\n  background-color: transparent !important;\n}\n.ant-input-affix-wrapper .ant-input-prefix {\n  transition: color 0.3s;\n}\n.ant-select-selector {\n  box-shadow: none !important;\n  background-color: transparent !important;\n  border: none !important;\n}\n.ant-form-item-label {\n  text-transform: none !important;\n  font-size: 0.75rem;\n  padding-bottom: 2px !important;\n}\n.ant-form-item-label > label {\n  width: 100%;\n  color: #4b5563 !important;\n}\n.ant-form-item-explain-error {\n  font-size: 11px;\n  min-height: 11px;\n  line-height: 11px;\n  padding-top: 2px;\n}\n.ant-form-item {\n  margin-bottom: 0;\n}\n.ant-notification {\n  width: min-content;\n}\n.ant-notification-topRight {\n  right: 0 !important;\n  left: 0 !important;\n  margin-left: auto !important;\n  margin-right: auto !important;\n}\n.ant-notification-notice-wrapper {\n  width: 350px !important;\n  overflow: hidden !important;\n}\n.ant-notification-notice {\n  padding: 16px !important;\n  width: 350px !important;\n  display: flex !important;\n  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.08), 0px 1px 18px rgba(0, 0, 0, 0.08), 0px 3px 5px rgba(0, 0, 0, 0.16) !important;\n}\n.ant-notification-notice-description {\n  padding: 0 14px 0 0 !important;\n  color: #232323 !important;\n  font-size: 14px !important;\n  word-break: break-all !important;\n  overflow-wrap: break-word !important;\n}\n.ant-notification-notice-success {\n  background-color: #edfffa !important;\n}\n.ant-notification-notice-error {\n  background-color: #fff8f4 !important;\n}\n.ant-notification-notice-error .ant-notification-notice-message {\n  color: #ff6e1c !important;\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !important;\n  font-weight: 500;\n}\n.ant-notification-notice-error .ant-notification-notice-icon {\n  color: #ff6e1c;\n}\n.ant-notification-notice-success .ant-notification-notice-message {\n  color: #00b76a !important;\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !important;\n  font-weight: 500;\n}\n.ant-notification-notice-success .ant-notification-notice-icon {\n  color: #00b76a !important;\n}\n.ant-notification-notice-message {\n  margin-bottom: 0 !important;\n}\n.ant-notification-notice-close {\n  top: 16px !important;\n  right: 16px !important;\n}\n.ant-divider {\n  margin: 0;\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.ant-drawer-title {\n  font-weight: 400 !important;\n}\n.ant-drawer-header-title {\n  flex-direction: row-reverse !important;\n  align-items: start !important ;\n}\n.ant-drawer-close {\n  margin-inline-end: 0 !important;\n}\n@media (min-width: 768px) {\n  .ant-input,\n  .ant-picker,\n  .ant-select,\n  .ant-input-affix-wrapper {\n    font-size: 1rem !important;\n  }\n  .ant-drawer-header {\n    padding-right: 1.5rem !important;\n    padding-left: 1.5rem !important;\n  }\n}\n:root {\n  --row-background: #ffffff;\n  --row-background-alternate: rgba(100, 116, 139, 0.04);\n  --row-background-dark: #121212;\n  --row-background-alternate-dark: #1e1e1e;\n}\n.plan-step-line {\n  height: 1px;\n  min-width: 128px;\n  background: #717d94;\n}\n.plan-step-number {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 9999px;\n  border: 1px solid #717d94;\n  background: white;\n  width: 24px;\n  height: 24px;\n  color: #717d94;\n}\n.plan-step-number.active {\n  border: none;\n  color: white;\n  background: #ff6e1c;\n}\n.hidden {\n  display: none;\n}\n.cardElement {\n  padding: 8px 11px;\n  border: 1px solid #e5e7eb;\n  background-color: white;\n  font-family: Inter !important;\n}\n.tooltip {\n  visibility: hidden;\n  position: absolute !important;\n}\n.has-tooltip:hover .tooltip {\n  visibility: visible;\n  z-index: 100;\n}\n.show-on-hover {\n  opacity: 0;\n}\n.show-on-hover-container:hover .show-on-hover {\n  opacity: 1;\n}\n.pdf-only {\n  display: none !important;\n}\n.notes p {\n  margin: 0;\n  padding: 0;\n  padding-bottom: 0.25rem;\n}\n#form-element #finix-form-container .field-holder label {\n  color: #717d94 !important;\n  font-size: 12px !important;\n}\n#form-element #finix-form-container > *:first-child,\n#form-element #finix-form-container > *:last-child {\n  margin-top: 0 !important;\n}\n#form-element #finix-form-container > *:not(:first-child):not(:last-child) {\n  margin-top: 12px !important;\n}\n#form-element #finix-form-container .field-array > * {\n  margin-top: 0 !important;\n}\n#form-element #finix-form-container .field-holder .field,\n#form-element #finix-form-container iframe {\n  height: 34px !important;\n}\n#form-element #finix-form-container .field {\n  margin-top: 0 !important;\n  padding-top: 2px !important;\n}\n#form-element #finix-form-container .field-holder .validation {\n  font-size: 11px !important;\n  color: #ff4d4f !important;\n}\n.icon-path {\n  transition: fill 0.3s;\n}\n.shadow-padding-x {\n  padding-right: 1rem;\n  padding-left: 1rem;\n}\n.shadow-padding-xb {\n  padding-right: 1rem;\n  padding-left: 1rem;\n  padding-bottom: 0.5rem;\n}\n.content-container {\n  width: 100%;\n  margin: 0 auto;\n}\n@media (min-width: 1220px) {\n  .content-container {\n    width: 1220px !important;\n    margin: 0 auto;\n  }\n}\n@media (min-width: 768px) {\n  .shadow-padding-x {\n    padding-right: 2rem;\n    padding-left: 2rem;\n  }\n  .shadow-padding-xb {\n    padding-right: 2rem;\n    padding-left: 2rem;\n    padding-bottom: 0.5rem;\n  }\n  .sm\\:flex {\n    display: flex !important;\n  }\n  .sm\\:hidden {\n    display: none !important;\n  }\n}\n.relative {\n  position: relative;\n}\n.absolute {\n  position: absolute;\n}\n.fixed {\n  position: fixed;\n}\n.top-0 {\n  top: 0;\n}\n.right-0 {\n  right: 0;\n}\n.bottom-0 {\n  bottom: 0;\n}\n.left-0 {\n  left: 0;\n}\n.overflow-hidden {\n  overflow: hidden !important;\n}\n.overflow-auto {\n  overflow: auto;\n}\n.overflow-visible {\n  overflow: visible;\n}\n.z-50 {\n  z-index: 50;\n}\n.-top-1\\/10 {\n  top: -10%;\n}\n.rounded {\n  border-radius: 0.25rem;\n}\n.rounded-md {\n  border-radius: 0.375rem;\n}\n.rounded-lg {\n  border-radius: 0.5rem;\n}\n.rounded-xl {\n  border-radius: 0.75rem;\n}\n.rounded-full {\n  border-radius: 9999px;\n}\n.rounded-tr {\n  border-top-right-radius: 0.25rem;\n}\n.rounded-br {\n  border-bottom-right-radius: 0.25rem;\n}\n.rounded-bl {\n  border-bottom-left-radius: 0.25rem;\n}\n.rounded-tl {\n  border-top-left-radius: 0.25rem;\n}\n.rounded-t {\n  border-top-right-radius: 0.25rem;\n  border-top-left-radius: 0.25rem;\n}\n.grid {\n  display: grid;\n}\n.contents {\n  display: contents;\n}\n.flex {\n  display: flex;\n}\n.flex-col {\n  flex-direction: column;\n}\n.flex-wrap {\n  flex-wrap: wrap;\n}\n.grow {\n  flex-grow: 1;\n}\n.shrink {\n  flex-shrink: 1;\n}\n.shrink-0 {\n  flex-shrink: 0;\n}\n.basis-0 {\n  flex-basis: 0;\n}\n.max-w-32 {\n  max-width: 8rem;\n}\n.items-center {\n  align-items: center;\n}\n.items-end {\n  align-items: flex-end;\n}\n.items-start {\n  align-items: flex-start;\n}\n.justify-center {\n  justify-content: center;\n}\n.justify-between {\n  justify-content: space-between;\n}\n.justify-end {\n  justify-content: flex-end;\n}\n.justify-start {\n  justify-content: flex-start;\n}\n.whitespace-nowrap {\n  white-space: nowrap;\n}\n.underline {\n  text-decoration: underline;\n}\n.no-underline {\n  text-decoration: none;\n}\n.text-nowrap {\n  white-space: nowrap;\n}\n.text-white {\n  color: white;\n}\n.text-xxs {\n  font-size: 0.625rem;\n}\n.text-xs {\n  font-size: 0.75rem;\n}\n.text-sm {\n  font-size: 0.875rem;\n}\n.text-base {\n  font-size: 1rem;\n}\n.text-lg {\n  font-size: 1.125rem;\n}\n.text-xl {\n  font-size: 1.25rem;\n}\n.text-2xl {\n  font-size: 1.5rem;\n}\n.text-3xl {\n  font-size: 2rem;\n}\n.text-4xl {\n  font-size: 2.5rem;\n}\n.text-5xl {\n  font-size: 3rem;\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.text-gray {\n  color: #808080 !important;\n}\n.text-gray-400 {\n  color: #9ca3af !important;\n}\n.text-gray-500 {\n  color: #6b7280 !important;\n}\n.text-blue-gray {\n  color: #717d94;\n}\n.text-primary {\n  color: #ff6e1c;\n}\n.text-secondary {\n  color: #4956dc;\n}\n.capitalize {\n  text-transform: capitalize !important;\n}\n.font-normal {\n  font-weight: 400;\n}\n.font-medium {\n  font-weight: 500;\n}\n.font-bold {\n  font-weight: 700;\n}\n.bg-transparent {\n  background-color: transparent;\n}\n.bg-white {\n  background-color: white;\n}\n.border-collapse {\n  border-collapse: collapse;\n}\n.border-t-solid {\n  border-top-style: solid;\n}\n.border-b-solid {\n  border-bottom-style: solid;\n}\n.border-t-1 {\n  border-top-width: 1px;\n}\n.border-b-1 {\n  border-bottom-width: 1px;\n}\n.gap-0 {\n  gap: 0 !important;\n}\n.gap-0\\.5 {\n  gap: 0.125rem;\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 !important;\n}\n.gap-5 {\n  gap: 1.25rem;\n}\n.gap-6 {\n  gap: 1.5rem !important;\n}\n.gap-8 {\n  gap: 2rem !important;\n}\n.gap-12 {\n  gap: 3rem !important;\n}\n/* Padding Utilities */\n.p-0 {\n  padding: 0;\n}\n.p-1 {\n  padding: 0.25rem;\n}\n.p-2 {\n  padding: 0.5rem;\n}\n.p-3 {\n  padding: 0.75rem;\n}\n.p-4 {\n  padding: 1rem;\n}\n.p-5 {\n  padding: 1.25rem;\n}\n.p-6 {\n  padding: 1.5rem;\n}\n.p-8 {\n  padding: 2rem;\n}\n/* Padding X Utilities */\n.px-0 {\n  padding-right: 0;\n  padding-left: 0;\n}\n.px-1 {\n  padding-right: 0.25rem;\n  padding-left: 0.25rem;\n}\n.px-2 {\n  padding-right: 0.5rem;\n  padding-left: 0.5rem;\n}\n.px-3 {\n  padding-right: 0.75rem;\n  padding-left: 0.75rem;\n}\n.px-4 {\n  padding-right: 1rem;\n  padding-left: 1rem;\n}\n.px-5 {\n  padding-right: 1.25rem;\n  padding-left: 1.25rem;\n}\n.px-6 {\n  padding-right: 1.5rem;\n  padding-left: 1.5rem;\n}\n.px-8 {\n  padding-right: 2rem;\n  padding-left: 2rem;\n}\n.px-12 {\n  padding-right: 3rem;\n  padding-left: 3rem;\n}\n/* Padding Y Utilities */\n.py-0 {\n  padding-top: 0;\n  padding-bottom: 0;\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-3 {\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\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/* Padding Top Utilities */\n.pt-0 {\n  padding-top: 0;\n}\n.pt-1 {\n  padding-top: 0.25rem;\n}\n.pt-2 {\n  padding-top: 0.5rem;\n}\n.pt-3 {\n  padding-top: 0.75rem;\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/* Padding Right Utilities */\n.pr-0 {\n  padding-right: 0;\n}\n.pr-4 {\n  padding-right: 1rem;\n}\n.pr-8 {\n  padding-right: 2rem;\n}\n/* Padding Bottom Utilities */\n.pb-0 {\n  padding-bottom: 0;\n}\n.pb-1 {\n  padding-bottom: 0.25rem;\n}\n.pb-2 {\n  padding-bottom: 0.5rem;\n}\n.pb-3 {\n  padding-bottom: 0.75rem;\n}\n.pb-4 {\n  padding-bottom: 1rem;\n}\n.pb-5 {\n  padding-bottom: 1.25rem;\n}\n.pb-6 {\n  padding-bottom: 1.5rem;\n}\n.pb-8 {\n  padding-bottom: 2rem;\n}\n/* Padding Left Utilities */\n.pl-0 {\n  padding-left: 0;\n}\n.pl-1 {\n  padding-left: 0.25rem;\n}\n.pl-2 {\n  padding-left: 0.5rem;\n}\n.pl-4 {\n  padding-left: 1rem;\n}\n.pl-8 {\n  padding-left: 2rem;\n}\n/* Space Utilities */\n.space-y-2 {\n  gap: 0.5rem;\n}\n.space-y-4 {\n  gap: 1rem;\n}\n.space-y-8 {\n  gap: 2rem;\n}\n/* Margin Utilities */\n.ml-2 {\n  margin-left: 0.5rem;\n}\n.ml-6 {\n  margin-left: 1.5rem;\n}\n.ml-8 {\n  margin-left: 2rem;\n}\n.mb-0 {\n  margin-bottom: 0;\n}\n.mb-1 {\n  margin-bottom: 0.25rem;\n}\n.mb-2 {\n  margin-bottom: 0.5rem;\n}\n.mb-3 {\n  margin-bottom: 0.75rem;\n}\n.mb-4 {\n  margin-bottom: 1rem;\n}\n.mb-5 {\n  margin-bottom: 1.25rem;\n}\n.mb-6 {\n  margin-bottom: 1.5rem;\n}\n.mb-8 {\n  margin-bottom: 2rem;\n}\n.mr-2 {\n  margin-right: 0.5rem;\n}\n.mr-4 {\n  margin-right: 1rem;\n}\n.mr-6 {\n  margin-right: 1.5rem;\n}\n.mr-8 {\n  margin-right: 2rem;\n}\n.mt-0 {\n  margin-top: 0;\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-5 {\n  margin-top: 1.25rem;\n}\n.mt-6 {\n  margin-top: 1.5rem;\n}\n.mt-8 {\n  margin-top: 2rem;\n}\n.my-1 {\n  margin-top: 0.25rem;\n  margin-bottom: 0.25rem;\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.my-8 {\n  margin-top: 2rem;\n  margin-bottom: 2rem;\n}\n.my-12 {\n  margin-top: 3rem;\n  margin-bottom: 3rem;\n}\n.mx-2 {\n  margin-left: 0.5rem;\n  margin-right: 0.5rem;\n}\n.mx-4 {\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n.mx-8 {\n  margin-left: 2rem;\n  margin-right: 2rem;\n}\n.w-full {\n  width: 100%;\n}\n.w-1\\/2 {\n  width: 50%;\n}\n.w-1\\/3 {\n  width: 33.333333%;\n}\n.w-2\\/3 {\n  width: 66.666667%;\n}\n.w-4 {\n  width: 1rem;\n}\n.w-14 {\n  width: 3.5rem;\n  /* 56px */\n}\n.w-20 {\n  width: 5rem;\n  /* 80px */\n}\n.h-full {\n  height: 100%;\n}\n.h-4 {\n  height: 1rem;\n}\n.h-5 {\n  height: 1.25rem;\n}\n.h-6 {\n  height: 1.5rem;\n}\n.h-8 {\n  height: 2rem;\n}\n.h-14 {\n  height: 3.5rem;\n  /* 56px */\n}\n.h-80 {\n  height: 20rem;\n}\n.h-96 {\n  height: 24rem;\n}\n.cursor-pointer {\n  cursor: pointer;\n}\n.cursor-not-allowed {\n  cursor: not-allowed;\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.grid-cols-4 {\n  grid-template-columns: repeat(4, minMax(0, 1fr));\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-4 {\n  grid-column: span 4 / span 4;\n}\n.col-span-full {\n  grid-column: 1 / -1;\n}\n/* Background colors */\n.bg-black {\n  background-color: #000000;\n}\n.bg-slate-50 {\n  background-color: #f8fafc;\n}\n.bg-slate-100 {\n  background-color: #f1f5f9;\n}\n.bg-slate-200 {\n  background-color: #e2e8f0;\n}\n.bg-slate-300 {\n  background-color: #cbd5e1;\n}\n.bg-slate-400 {\n  background-color: #94a3b8;\n}\n.bg-slate-500 {\n  background-color: #64748b;\n}\n.bg-slate-600 {\n  background-color: #475569;\n}\n.bg-slate-700 {\n  background-color: #334155;\n}\n.bg-slate-800 {\n  background-color: #1e293b;\n}\n.bg-slate-900 {\n  background-color: #0f172a;\n}\n.bg-slate-950 {\n  background-color: #020617;\n}\n.bg-gray-50 {\n  background-color: #f9fafb;\n}\n.bg-gray-100 {\n  background-color: #f3f4f6;\n}\n.bg-gray-200 {\n  background-color: #e5e7eb;\n}\n.bg-gray-300 {\n  background-color: #d1d5db;\n}\n.bg-gray-400 {\n  background-color: #9ca3af;\n}\n.bg-gray-500 {\n  background-color: #6b7280;\n}\n.bg-gray-600 {\n  background-color: #4b5563;\n}\n.bg-gray-700 {\n  background-color: #374151;\n}\n.bg-gray-800 {\n  background-color: #1f2937;\n}\n.bg-gray-900 {\n  background-color: #111827;\n}\n.bg-gray-950 {\n  background-color: #030712;\n}\n.bg-green-200 {\n  background-color: #a7f3d0;\n}\n.bg-green-500 {\n  background-color: #10b981;\n}\n.bg-blue-50 {\n  background-color: #eff6ff;\n}\n.bg-blue-100 {\n  background-color: #dbeafe;\n}\n.bg-blue-200 {\n  background-color: #bfdbfe;\n}\n.bg-blue-300 {\n  background-color: #93c5fd;\n}\n.bg-blue-400 {\n  background-color: #60a5fa;\n}\n.bg-blue-500 {\n  background-color: #3b82f6;\n}\n.bg-blue-600 {\n  background-color: #2563eb;\n}\n.bg-blue-700 {\n  background-color: #1d4ed8;\n}\n.bg-blue-800 {\n  background-color: #1e40af;\n}\n.bg-blue-900 {\n  background-color: #1e3a8a;\n}\n.bg-blue-950 {\n  background-color: #172554;\n}\n.bg-orange-50 {\n  background-color: #fff7ed;\n}\n.bg-orange-100 {\n  background-color: #ffedd5;\n}\n.bg-orange-200 {\n  background-color: #fed7aa;\n}\n.bg-orange-300 {\n  background-color: #fdba74;\n}\n.bg-orange-400 {\n  background-color: #fb923c;\n}\n.bg-orange-500 {\n  background-color: #f97316;\n}\n.bg-orange-600 {\n  background-color: #ea580c;\n}\n.bg-orange-700 {\n  background-color: #c2410c;\n}\n.bg-orange-800 {\n  background-color: #9a3412;\n}\n.bg-orange-900 {\n  background-color: #7c2d12;\n}\n.bg-orange-950 {\n  background-color: #431407;\n}\n.bg-yellow-200 {\n  background-color: #fde68a;\n}\n.bg-red-200 {\n  background-color: #fecaca;\n}\n/* Text colors */\n.text-black {\n  color: #000000;\n}\n.text-white {\n  color: #ffffff;\n}\n.text-slate-50 {\n  color: #f8fafc;\n}\n.text-slate-100 {\n  color: #f1f5f9;\n}\n.text-slate-200 {\n  color: #e2e8f0;\n}\n.text-slate-300 {\n  color: #cbd5e1;\n}\n.text-slate-400 {\n  color: #94a3b8;\n}\n.text-slate-500 {\n  color: #64748b;\n}\n.text-slate-600 {\n  color: #475569;\n}\n.text-slate-700 {\n  color: #334155;\n}\n.text-slate-800 {\n  color: #1e293b;\n}\n.text-slate-900 {\n  color: #0f172a;\n}\n.text-slate-950 {\n  color: #020617;\n}\n.text-gray-50 {\n  color: #f9fafb;\n}\n.text-gray-100 {\n  color: #f3f4f6;\n}\n.text-gray-200 {\n  color: #e5e7eb;\n}\n.text-gray-300 {\n  color: #d1d5db;\n}\n.text-gray-400 {\n  color: #9ca3af;\n}\n.text-gray-500 {\n  color: #6b7280;\n}\n.text-gray-600 {\n  color: #4b5563;\n}\n.text-gray-700 {\n  color: #374151;\n}\n.text-gray-800 {\n  color: #1f2937;\n}\n.text-gray-900 {\n  color: #111827;\n}\n.text-gray-950 {\n  color: #030712;\n}\n.text-green-600 {\n  color: #059669;\n}\n.text-green-700 {\n  color: #047857;\n}\n.text-blue-50 {\n  color: #eff6ff;\n}\n.text-blue-100 {\n  color: #dbeafe;\n}\n.text-blue-200 {\n  color: #bfdbfe;\n}\n.text-blue-300 {\n  color: #93c5fd;\n}\n.text-blue-400 {\n  color: #60a5fa;\n}\n.text-blue-500 {\n  color: #3b82f6;\n}\n.text-blue-600 {\n  color: #2563eb;\n}\n.text-blue-700 {\n  color: #1d4ed8;\n}\n.text-blue-800 {\n  color: #1e40af;\n}\n.text-blue-900 {\n  color: #1e3a8a;\n}\n.text-blue-950 {\n  color: #172554;\n}\n.text-orange-50 {\n  color: #fff7ed;\n}\n.text-orange-100 {\n  color: #ffedd5;\n}\n.text-orange-200 {\n  color: #fed7aa;\n}\n.text-orange-300 {\n  color: #fdba74;\n}\n.text-orange-400 {\n  color: #fb923c;\n}\n.text-orange-500 {\n  color: #f97316;\n}\n.text-orange-600 {\n  color: #ea580c;\n}\n.text-orange-700 {\n  color: #c2410c;\n}\n.text-orange-800 {\n  color: #9a3412;\n}\n.text-orange-900 {\n  color: #7c2d12;\n}\n.text-orange-950 {\n  color: #431407;\n}\n.text-yellow-500 {\n  color: #f59e0b;\n}\n.text-yellow-700 {\n  color: #b45309;\n}\n.text-red-500 {\n  color: #ef4444;\n}\n.text-red-700 {\n  color: #b91c1c;\n}\n.border {\n  border-width: 1px;\n}\n.border-2 {\n  border-width: 2px;\n}\n.border-l {\n  border-left-width: 1px;\n}\n.border-dashed {\n  border-style: dashed;\n}\n.border-solid {\n  border-style: solid;\n}\n.border-slate-50 {\n  border-color: #f8fafc;\n}\n.border-slate-100 {\n  border-color: #f1f5f9;\n}\n.border-slate-200 {\n  border-color: #e2e8f0;\n}\n.border-slate-300 {\n  border-color: #cbd5e1;\n}\n.border-slate-400 {\n  border-color: #94a3b8;\n}\n.border-slate-500 {\n  border-color: #64748b;\n}\n.border-slate-600 {\n  border-color: #475569;\n}\n.border-slate-700 {\n  border-color: #334155;\n}\n.border-slate-800 {\n  border-color: #1e293b;\n}\n.border-slate-900 {\n  border-color: #0f172a;\n}\n.border-slate-950 {\n  border-color: #020617;\n}\n.border-gray-400 {\n  border-color: #9ca3af;\n}\n.border-gray-500 {\n  border-color: #6b7280;\n}\n.origin-center {\n  transform-origin: center;\n}\n.rotate-45 {\n  transform: rotate(45deg);\n}\n.translate-x-2\\/4 {\n  transform: translateX(50%);\n}\n.-translate-x-2\\/4 {\n  transform: translateX(-50%);\n}\n.translate-y-2\\/4 {\n  transform: translateY(50%);\n}\n.translate-y-full {\n  transform: translateY(100%);\n}\n.-translate-y-full {\n  transform: translateY(-100%);\n}\n.shadow-sm {\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n}\n.shadow {\n  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n}\n.shadow-md {\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n}\n.shadow-lg {\n  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);\n}\n.shadow-xl {\n  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n}\n.shadow-2xl {\n  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n}\n.shadow-inner {\n  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);\n}\n.shadow-none {\n  box-shadow: 0 0 #0000;\n}\n@media (min-width: 768px) {\n  .sm\\:flex {\n    display: flex !important;\n  }\n  .sm\\:hidden {\n    display: none !important;\n  }\n}\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box !important;\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n  line-height: 1.15;\n}\nbody {\n  color: #232323;\n  background-color: #f8fafc;\n}\nth {\n  font-weight: normal;\n}\ncode {\n  font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\", monospace;\n}\n@media only screen and (max-width: 768px) {\n  select,\n  textarea,\n  input[type=\"text\"],\n  input[type=\"password\"],\n  input[type=\"datetime\"],\n  input[type=\"datetime-local\"],\n  input[type=\"date\"],\n  input[type=\"month\"],\n  input[type=\"time\"],\n  input[type=\"week\"],\n  input[type=\"number\"],\n  input[type=\"email\"],\n  input[type=\"url\"],\n  input[type=\"search\"],\n  input[type=\"tel\"],\n  input[type=\"color\"] {\n    font-size: 16px !important;\n  }\n}\n@keyframes App-logo-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n";
-styleInject(css_248z);
 var IconContext = /*#__PURE__*/createContext({});
 var Context = IconContext;
@@ -1553,12 +1553,16 @@ var BrandContext = createContext({
 var MUTATION$9 = "{\n    entityBranding {\n      accentColor\n      brandColor\n      topNavImageUrl\n    }\n  }";
 var getBranding = function (_a) {
-    var token = _a.token, subdomain = _a.subdomain;
+    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*/, gqlRequest({ query: MUTATION$9, token: token, subdomain: subdomain })];
+                case 0: return [4 /*yield*/, gqlRequest({
+                        query: MUTATION$9,
+                        token: token,
+                        apiHost: apiHost,
+                    })];
                 case 1:
                     response = _b.sent();
                     return [2 /*return*/, response === null || response === void 0 ? void 0 : response.entityBranding];
@@ -1567,77 +1571,20 @@ var getBranding = function (_a) {
     });
 };
-var BreakpointNumbers;
-(function (BreakpointNumbers) {
-    BreakpointNumbers[BreakpointNumbers["xs"] = 480] = "xs";
-    BreakpointNumbers[BreakpointNumbers["sm"] = 768] = "sm";
-    BreakpointNumbers[BreakpointNumbers["md"] = 992] = "md";
-    BreakpointNumbers[BreakpointNumbers["lg"] = 1200] = "lg";
-    BreakpointNumbers[BreakpointNumbers["xl"] = 1400] = "xl";
-    BreakpointNumbers[BreakpointNumbers["xxl"] = 2000] = "xxl";
-})(BreakpointNumbers || (BreakpointNumbers = {}));
-[
-    BreakpointNumbers.xs,
-    BreakpointNumbers.sm,
-    BreakpointNumbers.md,
-    BreakpointNumbers.lg,
-    BreakpointNumbers.xl,
-    BreakpointNumbers.xxl,
-];
-var useIsMobile = function (window) {
-    var _a = useState({
-        width: window.innerWidth,
-        height: window.innerHeight,
-    }), windowSize = _a[0], setWindowSize = _a[1];
-    useEffect(function () {
-        var handleResize = function () {
-            setWindowSize({
-                width: window.innerWidth,
-                height: window.innerHeight,
-            });
-        };
-        window.addEventListener("resize", handleResize);
-        handleResize();
-        return function () { return window.removeEventListener("resize", handleResize); };
-    }, []);
-    return windowSize.width < BreakpointNumbers.sm;
-};
-var CURRENT_USER_DATA_QUERY = "{\n    company {\n      name\n    }\n    currentUser {\n      authObjectName\n      entityId\n      payload {\n        returnUrl\n      }\n      privacyUrl\n      termsUrl\n    }\n  }";
-var getCurrentUserData = function (_a) {
-    var token = _a.token, subdomain = _a.subdomain;
-    return __awaiter(void 0, void 0, void 0, function () {
-        var response;
-        var _b, _c, _d, _e, _f, _g, _h;
-        return __generator(this, function (_j) {
-            switch (_j.label) {
-                case 0: return [4 /*yield*/, gqlRequest({
-                        query: CURRENT_USER_DATA_QUERY,
-                        token: token,
-                        subdomain: subdomain,
-                    })];
-                case 1:
-                    response = _j.sent();
-                    return [2 /*return*/, {
-                            authObjectName: (_b = response === null || response === void 0 ? void 0 : response.currentUser) === null || _b === void 0 ? void 0 : _b.authObjectName,
-                            companyName: (_c = response === null || response === void 0 ? void 0 : response.company) === null || _c === void 0 ? void 0 : _c.name,
-                            entityId: (_d = response === null || response === void 0 ? void 0 : response.currentUser) === null || _d === void 0 ? void 0 : _d.entityId,
-                            returnUrl: (_f = (_e = response === null || response === void 0 ? void 0 : response.currentUser) === null || _e === void 0 ? void 0 : _e.payload) === null || _f === void 0 ? void 0 : _f.returnUrl,
-                            privacyUrl: (_g = response === null || response === void 0 ? void 0 : response.currentUser) === null || _g === void 0 ? void 0 : _g.privacyUrl,
-                            termsUrl: (_h = response === null || response === void 0 ? void 0 : response.currentUser) === null || _h === void 0 ? void 0 : _h.termsUrl,
-                        }];
-            }
-        });
+var createGraphQLClient = function (token, apiHost) {
+    return new GraphQLClient(apiHost + "/graphql", {
+        headers: {
+            Authorization: token,
+        },
     });
 };
 var BunnyContext = createContext({});
-// Important that this is created here, not within a function
-var queryClient$1 = new QueryClient();
+var extraQueryClient = new QueryClient();
 // Every component shares similar props and functionality, which this wrapper handles.
 function BunnyProvider(_a) {
-    var children = _a.children, token = _a.token, subdomain = _a.subdomain, window = _a.window, accountId = _a.accountId, _b = _a.darkMode, darkMode = _b === void 0 ? false : _b;
-    var graphQLClient = createGraphQLClient(subdomain || "", window, token);
+    var accountId = _a.accountId, children = _a.children, _b = _a.darkMode, darkMode = _b === void 0 ? false : _b, onErrorNavigate = _a.onErrorNavigate, queryClient = _a.queryClient, apiHost = _a.apiHost, token = _a.token, window = _a.window;
+    var graphQLClient = createGraphQLClient(token, apiHost || "");
     var isMobile = useIsMobile(window);
     var _c = useState(undefined), branding = _c[0], setBranding = _c[1];
     // ====== START - Copied straight from PageContainer.tsx ========
@@ -1648,7 +1595,7 @@ function BunnyProvider(_a) {
             ? "#" + ((_a = branding === null || branding === void 0 ? void 0 : branding.brandColor) === null || _a === void 0 ? void 0 : _a.toString(16))
             : DEFAULT_BRAND_COLOR;
         var secondaryColor = DEFAULT_SECONDARY_COLOR;
-        if (!isMobile && Misc.isColorTooDark(branding === null || branding === void 0 ? void 0 : branding.accentColor))
+        if (!isMobile && isColorTooDark(branding === null || branding === void 0 ? void 0 : branding.accentColor))
             secondaryColor = "#ffffff";
         var topNavImageUrl = (branding === null || branding === void 0 ? void 0 : branding.topNavImageUrl) || DEFAULT_TOP_NAV_IMAGE_URL;
         var accentColor = (branding === null || branding === void 0 ? void 0 : branding.accentColor) || DEFAULT_ACCENT_COLOR;
@@ -1670,13 +1617,14 @@ function BunnyProvider(_a) {
         };
     }, []);
     return (jsxs(BunnyContext.Provider, __assign({ value: {
-            subdomain: subdomain,
-            graphQLClient: graphQLClient,
-            window: window,
-            token: token,
             accountId: accountId,
             darkMode: darkMode,
-        } }, { children: [jsx("div", __assign({ style: { position: "fixed", left: -2000000000 } }, { children: "test" })), jsx(QueryClientProvider, __assign({ client: queryClient$1 }, { children: jsx(RecoilRoot, { children: jsx(BrandContext.Provider, __assign({ value: entityBranding }, { children: jsx(ConfigProvider, __assign({ theme: {
+            graphQLClient: graphQLClient,
+            onErrorNavigate: onErrorNavigate,
+            apiHost: apiHost,
+            token: token,
+            window: window,
+        } }, { children: [jsx("div", __assign({ style: { position: "fixed", left: -2000000000 } }, { children: "test" })), jsx(QueryClientProvider, __assign({ client: queryClient || extraQueryClient }, { children: jsx(RecoilRoot, { children: jsx(BrandContext.Provider, __assign({ value: entityBranding }, { children: jsx(ConfigProvider, __assign({ theme: {
                                 algorithm: darkMode
                                     ? theme.darkAlgorithm
                                     : theme.defaultAlgorithm,
@@ -1704,15 +1652,11 @@ function BunnyProvider(_a) {
 function SecondaryWrapper(_a) {
     var children = _a.children, setBranding = _a.setBranding;
     var _b = useState(false), interFontLoaded = _b[0], setInterFontLoaded = _b[1];
-    var _c = useContext(BunnyContext), subdomain = _c.subdomain, token = _c.token;
+    var _c = useContext(BunnyContext), apiHost = _c.apiHost, token = _c.token;
     var brandingData = useQuery({
         queryKey: QueryKeyFactory.default.brandingKey,
-        queryFn: function () { return getBranding({ token: token, subdomain: subdomain }); },
+        queryFn: function () { return getBranding({ token: token, apiHost: apiHost }); },
     }).data;
-    var _d = useQuery({
-        queryKey: QueryKeyFactory.default.currentUserKey,
-        queryFn: function () { return getCurrentUserData({ token: token }); },
-    }); _d.data; _d.isLoading;
     useEffect(function () {
         if (brandingData) {
             setBranding(brandingData);
@@ -1729,44 +1673,84 @@ function SecondaryWrapper(_a) {
     return jsx(Fragment, { children: children });
 }
-var MarkupContainer = styled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n  span {\n    width: 100%;\n  }\n"], ["\n  span {\n    width: 100%;\n  }\n"])));
+var useAjax = function (onError) {
+    return function (url, method, callback, token, bodyData) { return __awaiter(void 0, void 0, void 0, function () {
+        var response;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, fetch(url, {
+                        method: method,
+                        body: bodyData,
+                        headers: {
+                            "Content-type": "application/json; charset=utf-8",
+                            Authorization: "Bearer ".concat(token),
+                        },
+                    })];
+                case 1:
+                    response = _a.sent();
+                    if (response.status !== 200 && response.status !== 201) {
+                        return [2 /*return*/, response.json().then(function (data) {
+                                if (response.status === 401) {
+                                    console.error("expired token");
+                                    onError === null || onError === void 0 ? void 0 : onError("expired token");
+                                }
+                                else {
+                                    throw new Error(data === null || data === void 0 ? void 0 : data.message);
+                                }
+                                return;
+                            })];
+                    }
+                    return [2 /*return*/, callback(response)];
+            }
+        });
+    }); };
+};
+var useDownloadFile = function (id, onError) {
+    var ajax = useAjax(onError);
+    return function (url, token) {
+        return ajax(url + (id ? "?id=".concat(id) : ""), "GET", function (rsp) { return __awaiter(void 0, void 0, void 0, function () {
+            var blob, file, contentDisposition, anchor, filenameRegex, matches;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, rsp.blob()];
+                    case 1:
+                        blob = _a.sent();
+                        file = window.URL.createObjectURL(blob);
+                        contentDisposition = rsp.headers.get("content-disposition");
+                        anchor = document.createElement("a");
+                        anchor.href = file;
+                        if (contentDisposition &&
+                            contentDisposition.indexOf("attachment") !== -1) {
+                            filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
+                            matches = filenameRegex.exec(contentDisposition);
+                            if (matches != null && matches[1]) {
+                                anchor.setAttribute("download", matches[1].replace(/['"]/g, ""));
+                            }
+                        }
+                        anchor.click();
+                        return [2 /*return*/];
+                }
+            });
+        }); }, token);
+    };
+};
+var MarkupContainer = styled.div(templateObject_1$8 || (templateObject_1$8 = __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, isMobile = _a.isMobile, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, onDownloadError = _a.onDownloadError;
+    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);
     var secondaryColor = useContext(BrandContext).secondaryColor;
-    var _b = useContext(BunnyContext), token = _b.token, subdomain = _b.subdomain;
+    var _b = useContext(BunnyContext), token = _b.token, apiHost = _b.apiHost, window = _b.window;
+    var isMobile = useIsMobile(window);
     return (jsxs("div", __assign({ className: "flex flex-col w-full grow ".concat(isMobile ? "overflow-hidden" : "") }, { children: [formattedInvoice ? (jsxs("div", __assign({ className: "flex justify-between items-center pb-4 ".concat(isMobile ? "shadow-padding-x" : ""), id: "acceptance" }, { children: [jsx("div", { children: onBackButtonClick ? (jsx(Button, __assign({ className: "text-xs pl-0", onClick: onBackButtonClick, style: {
                                 color: secondaryColor,
                             }, type: "link" }, { children: backButtonName || "Back" }))) : null }), jsx(Button, __assign({ icon: jsx(DownloadOutlined$1, {}), onClick: function () {
-                            return downloadFile(subdomain + "/api/pdf/invoice/" + formattedInvoice.id, token);
+                            return downloadFile(apiHost + "/api/pdf/invoice/" + formattedInvoice.id, token);
                         } }, { children: "Download" }))] }))) : null, isMobile ? (jsxs(MarkupContainer, __assign({ className: "flex flex-col gap-4 grow w-full shadow-padding-xb overflow-auto" }, { children: [jsx(Markup, { content: html }), children] }))) : (jsxs(MarkupContainer, __assign({ className: "flex flex-col gap-4 p-2 w-full bg-white shadow-md rounded-md", style: {
                     minWidth: "750px",
                 } }, { children: [jsx(Markup, { content: html }), children] })))] })));
 };
-var templateObject_1$9;
-var MUTATION$8 = "\nquery FormattedInvoice($id: ID) {\n  formattedInvoice(id: $id) {\n    amount\n    amountDue\n    amountPaid\n    billingCity\n    billingCountry\n    billingState\n    billingStreet\n    billingZip\n    createdAt\n    credits\n    currency\n    currencyId\n    currencySymbol\n    customerBillingCity\n    customerBillingContact\n    customerBillingCountry\n    customerBillingState\n    customerBillingStreet\n    customerBillingZip\n    customerName\n    dueAt\n    html\n    id\n    isLegacy\n    netPaymentDays\n    number\n    payableId\n    poNumber\n    printedState\n    smallUnitAmountDue\n    state\n    subscriptionEndDate\n    subscriptionStartDate\n    subtotal\n    taxAmount\n    taxNumber\n    uuid\n    vendorName\n    formattedLines {\n      amount\n      billingPeriodEnd\n      billingPeriodStart\n      chargeType\n      discount\n      frequency\n      lineText\n      position\n      price\n      priceDecimals\n      priceListChargeId\n      priceListChargeName\n      priceListName\n      prorationRate\n      quantity\n      unitOfMeasure\n      priceTiers {\n        price\n        starts\n      }\n    }\n  }\n}";
-var getFormattedInvoice = function (_a) {
-    var id = _a.id, token = _a.token, subdomain = _a.subdomain;
-    return __awaiter(void 0, void 0, void 0, function () {
-        var vars, response;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
-                case 0:
-                    vars = { id: id };
-                    return [4 /*yield*/, gqlRequest({
-                            query: MUTATION$8,
-                            token: token,
-                            vars: vars,
-                            subdomain: subdomain,
-                        })];
-                case 1:
-                    response = _b.sent();
-                    return [2 /*return*/, response === null || response === void 0 ? void 0 : response.formattedInvoice];
-            }
-        });
-    });
-};
+var templateObject_1$8;
 var paymentMethodsQuery = "query paymentMethods ($filter: String, $first: Int, $sort: String) {\n  paymentMethods (filter: $filter, first: $first, sort: $sort) {\n    nodes {\n      id\n      disabled\n      pluginId\n      accountId\n      expirationDate\n      plugin {\n        guid\n        id\n      }\n      state\n      metadata {\n        issuer\n        identifier\n        kind\n        description\n        icon\n      }\n    }\n  }\n}";
 var usePaymentMethod = function (graphQLClient) {
@@ -1804,7 +1788,7 @@ var PaymentOption = function (_a) {
             ? "var(--row-background-dark) border-gray-500"
             : "bg-slate-50 border-slate-200", " border"), onClick: function () { return onClick(paymentOption); } }, { children: [jsxs("div", __assign({ className: "flex gap-2 items-center" }, { children: [jsx(Checkbox, { checked: selected, className: darkMode ? "border-gray-400" : "" }), jsx(Text$d, { children: name })] })), isAch ? (jsx(BankOutlined$1, { className: "text-slate-400" })) : isCard ? (jsx(CardIcon, {})) : (jsx(CardIcon, {}))] })));
 };
-var PaymentOptionContainer = styled.div(templateObject_1$8 || (templateObject_1$8 = __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 = styled.div(templateObject_1$7 || (templateObject_1$7 = __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  ");
@@ -1812,7 +1796,7 @@ var PaymentOptionContainer = styled.div(templateObject_1$8 || (templateObject_1$
     var $brandColor = _a.$brandColor;
     return $brandColor;
 });
-var templateObject_1$8;
+var templateObject_1$7;
 var PaymentMethodSelector = function (_a) {
     var _b, _c;
@@ -1825,7 +1809,7 @@ var PaymentMethodSelector = function (_a) {
 };
 var createPaymentMethod = function (_a) {
-    var paymentMethodId = _a.paymentMethodId, plugin = _a.plugin, token = _a.token, subdomain = _a.subdomain, accountId = _a.accountId;
+    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) {
@@ -1838,7 +1822,7 @@ var createPaymentMethod = function (_a) {
                             account_id: accountId,
                         },
                         token: token,
-                        subdomain: subdomain,
+                        apiHost: apiHost,
                     })];
                 case 1:
                     response = _b.sent();
@@ -1849,19 +1833,19 @@ var createPaymentMethod = function (_a) {
         });
     });
 };
-var createSetupIntent = function (plugin, token, accountId, subdomain) {
+var createSetupIntent = function (plugin, token, apiHost, accountId) {
     return invokePlugin({
         plugin: plugin,
         method: "create_setup_intent",
         token: token,
-        subdomain: subdomain,
+        apiHost: apiHost,
         payload: {
             account_id: accountId,
         },
     });
 };
 var createPaymentIntent = function (_a) {
-    var payable = _a.payable, savePaymentMethod = _a.savePaymentMethod, memo = _a.memo, plugin = _a.plugin, token = _a.token, subdomain = _a.subdomain, accountId = _a.accountId;
+    var payable = _a.payable, savePaymentMethod = _a.savePaymentMethod, memo = _a.memo, plugin = _a.plugin, token = _a.token, apiHost = _a.apiHost, accountId = _a.accountId;
     return __awaiter(void 0, void 0, void 0, function () {
         var payload, response;
         return __generator(this, function (_b) {
@@ -1878,7 +1862,7 @@ var createPaymentIntent = function (_a) {
                             method: "create_payment_intent",
                             payload: payload,
                             token: token,
-                            subdomain: subdomain,
+                            apiHost: apiHost,
                         })];
                 case 1:
                     response = _b.sent();
@@ -1889,23 +1873,23 @@ var createPaymentIntent = function (_a) {
         });
     });
 };
-var fetchStripeKey = function (plugin, token, subdomain, accountId) {
+var fetchStripeKey = function (plugin, token, apiHost, accountId) {
     return invokePlugin({
         plugin: plugin,
         method: "retrieve_config",
         token: token,
-        subdomain: subdomain,
+        apiHost: apiHost,
         payload: {
             account_id: accountId,
         },
     });
 };
 loadStripe.setLoadParameters({ advancedFraudSignals: false });
-var useStripePlugin = function (plugin, token, subdomain, accountId) {
+var useStripePlugin = function (plugin, token, apiHost, accountId) {
     var _a = useState(null), stripe = _a[0], setStripe = _a[1];
-    var showErrorNotification = NotificationUtils.useErrorNotification();
+    var showErrorNotification = useErrorNotification();
     useEffect(function () {
-        fetchStripeKey(plugin, token, subdomain || "", accountId)
+        fetchStripeKey(plugin, token, apiHost || "", accountId)
             .then(function (_a) {
             var payload = _a.payload;
             return loadStripe(payload.publishable_key).then(setStripe);
@@ -1923,7 +1907,8 @@ var PaymentContext = createContext({});
 var CheckoutFooter = function (_a) {
     var amountDue = _a.amountDue, currencyId = _a.currencyId, isSaving = _a.isSaving, onPaymentSubmit = _a.onPaymentSubmit, onlySavePaymentMethod = _a.onlySavePaymentMethod, noPadding = _a.noPadding;
-    var isMobile = useIsMobile$1();
+    var window = useContext(BunnyContext).window;
+    var isMobile = useIsMobile(window);
     var displayPayButtonNameAnyways = useContext(PaymentContext).displayPayButtonNameAnyways;
     var buttonName = function () {
         return onlySavePaymentMethod && !displayPayButtonNameAnyways
@@ -1935,7 +1920,7 @@ var CheckoutFooter = function (_a) {
                 : "Pay";
     };
     return (jsx("div", __assign({ className: "flex justify-end gap-2 ".concat(noPadding ? "" : "pt-6") }, { children: jsx(Button, __assign({ className: "w-full", disabled: isSaving, onClick: onPaymentSubmit, size: isMobile ? "large" : "middle", type: "primary" }, { children: "".concat(buttonName()).concat(amountDue && currencyId
-                ? " ".concat(Misc.formatCurrency(amountDue, currencyId))
+                ? " ".concat(formatCurrency(amountDue, currencyId))
                 : "") })) })));
 };
@@ -1944,7 +1929,7 @@ var CheckoutForm = function (_a) {
     // Hooks
     var elements = useElements();
     var stripe = useStripe();
-    var _b = useContext(BunnyContext), token = _b.token, subdomain = _b.subdomain, accountId = _b.accountId;
+    var _b = useContext(BunnyContext), token = _b.token, apiHost = _b.apiHost, accountId = _b.accountId;
     if (!payable)
         throw new Error("A Payable is required to start checkout");
     // Handlers
@@ -1970,7 +1955,7 @@ var CheckoutForm = function (_a) {
                             savePaymentMethod: true,
                             plugin: plugin,
                             token: token,
-                            subdomain: subdomain || "",
+                            apiHost: apiHost || "",
                             accountId: accountId,
                         })];
                 case 2:
@@ -2026,7 +2011,7 @@ var PaymentMethodForm$1 = function (_a) {
     // Hooks
     var elements = useElements();
     var stripe = useStripe();
-    var _b = useContext(BunnyContext), token = _b.token, subdomain = _b.subdomain;
+    var _b = useContext(BunnyContext), token = _b.token, apiHost = _b.apiHost;
     var accountId = useContext(PaymentContext).accountId;
     // Handlers
     var onSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -2046,7 +2031,7 @@ var PaymentMethodForm$1 = function (_a) {
                     submitError = (_c.sent()).error;
                     if (submitError)
                         throw new Error(submitError.message);
-                    return [4 /*yield*/, createSetupIntent(plugin, token, accountId, subdomain)];
+                    return [4 /*yield*/, createSetupIntent(plugin, token, apiHost, accountId)];
                 case 2:
                     response = _c.sent();
                     if (response.status !== "success")
@@ -2074,7 +2059,7 @@ var PaymentMethodForm$1 = function (_a) {
                             paymentMethodId: paymentMethodId,
                             plugin: plugin,
                             token: token,
-                            subdomain: subdomain,
+                            apiHost: apiHost,
                             accountId: accountId,
                         })];
                 case 4:
@@ -2103,10 +2088,10 @@ var PaymentMethodForm$1 = function (_a) {
 // This is just a wrapper to fetch the stripe object and pass it to the form
 var StripeForm = function (_a) {
-    var payable = _a.payable, plugin = _a.plugin, isSaving = _a.isSaving, setIsSaving = _a.setIsSaving, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess;
-    var _b = useContext(BunnyContext), token = _b.token, subdomain = _b.subdomain;
+    var entityId = _a.entityId, payable = _a.payable, plugin = _a.plugin, isSaving = _a.isSaving, setIsSaving = _a.setIsSaving, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess;
+    var _b = useContext(BunnyContext), token = _b.token, apiHost = _b.apiHost;
     var accountId = useContext(PaymentContext).accountId;
-    var stripe = useStripePlugin(plugin, token, subdomain, accountId);
+    var stripe = useStripePlugin(plugin, token, apiHost, accountId);
     var onlySavePaymentMethod = !payable;
     if (!stripe)
         return null;
@@ -2120,7 +2105,7 @@ var StripeForm = function (_a) {
             currency: "usd",
             setupFutureUsage: "off_session",
         };
-        return (jsx(Elements, __assign({ options: options, stripe: stripe }, { children: jsx(PaymentMethodForm$1, { isSaving: isSaving, setIsSaving: setIsSaving, plugin: plugin, onFail: onFail, onPaymentSuccess: onPaymentSuccess }) })));
+        return (jsx(Elements, __assign({ options: options, stripe: stripe }, { children: jsx(PaymentMethodForm$1, { entityId: entityId, isSaving: isSaving, setIsSaving: setIsSaving, plugin: plugin, onFail: onFail, onPaymentSuccess: onPaymentSuccess }) })));
     }
     else {
         var options = {
@@ -2129,7 +2114,7 @@ var StripeForm = function (_a) {
             currency: payable === null || payable === void 0 ? void 0 : payable.currencyId.toLowerCase(),
             setupFutureUsage: "off_session",
         };
-        return (jsx(Elements, __assign({ options: options, stripe: stripe }, { children: jsx(CheckoutForm, { payable: payable, plugin: plugin, isSaving: isSaving, setIsSaving: setIsSaving, onFail: onFail, onPaymentSuccess: onPaymentSuccess }) })));
+        return (jsx(Elements, __assign({ options: options, stripe: stripe }, { children: jsx(CheckoutForm, { entityId: entityId, payable: payable, plugin: plugin, isSaving: isSaving, setIsSaving: setIsSaving, onFail: onFail, onPaymentSuccess: onPaymentSuccess }) })));
     }
 };
@@ -2176,7 +2161,7 @@ var unformatCardNumber = function (cardNumber) {
     var unformattedCardNumberArray = cardNumberArray.filter(function (character) { return character !== " "; });
     return unformattedCardNumberArray.join("");
 };
-var storePayment = function (options, plugin, accountId, subdomain) { return __awaiter(void 0, void 0, void 0, function () {
+var storePayment = function (options, plugin, apiHost, accountId) { return __awaiter(void 0, void 0, void 0, function () {
     var testCreditCardNumber, testCreditCardCvc, testCreditCardExpirationDate, token, response;
     return __generator(this, function (_a) {
         switch (_a.label) {
@@ -2192,7 +2177,7 @@ var storePayment = function (options, plugin, accountId, subdomain) { return __a
                             account_id: accountId,
                         },
                         token: token,
-                        subdomain: subdomain,
+                        apiHost: apiHost,
                     })];
             case 1:
                 response = _a.sent();
@@ -2251,7 +2236,7 @@ var TEST_CARD = "4242424242424242";
 var DemoPayForm = function (_a) {
     var isSaving = _a.isSaving, invoice = _a.invoice, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, plugin = _a.plugin, quote = _a.quote, setIsSaving = _a.setIsSaving;
     // Context
-    var _b = useContext(BunnyContext), token = _b.token, subdomain = _b.subdomain, darkMode = _b.darkMode;
+    var _b = useContext(BunnyContext), token = _b.token, apiHost = _b.apiHost, darkMode = _b.darkMode;
     var accountId = useContext(PaymentContext).accountId;
     // Local state
     var _c = useState(false), savePaymentMethod = _c[0], setSavePaymentMethod = _c[1];
@@ -2277,7 +2262,7 @@ var DemoPayForm = function (_a) {
                             testCreditCardCvc: cardDetails.cvc.toString(),
                             testCreditCardExpirationDate: cardDetails.expiry,
                             token: token,
-                        }, plugin, accountId, subdomain)];
+                        }, plugin, apiHost, accountId)];
                 case 1:
                     response = _a.sent();
                     paymentMethodId = response.payload[0].id;
@@ -2347,14 +2332,14 @@ var DemoPayForm = function (_a) {
     };
     return (jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsxs(StyledInputs, __assign({ className: "flex flex-col gap-2", darkMode: darkMode !== null && darkMode !== void 0 ? darkMode : false }, { children: [jsx(DemoPayCardNumber, { onChange: onCardNumberChange, value: cardDetails.number }), jsxs("div", __assign({ className: "flex gap-2" }, { children: [jsx(DemoPayExpiry, { onChange: onCardExpiryChange, value: cardDetails.expiry }), jsx(DemoPayCardCvc, { onChange: onCardCvcChange, value: cardDetails.cvc })] }))] })), jsx(Text$c, __assign({ className: "text-xs" }, { children: "DemoPay is for testing only." })), !onlySavePaymentMethod && (jsx(Checkbox, __assign({ className: "mt-2", onChange: function (e) { return setSavePaymentMethod(e.target.checked); } }, { children: "Save as primary payment method" }))), jsx(CheckoutFooter, { amountDue: amountDue, currencyId: currencyId, isSaving: isSaving, onPaymentSubmit: onPaymentSubmit, onlySavePaymentMethod: onlySavePaymentMethod })] })));
 };
-var StyledInputs = styled.div(templateObject_1$7 || (templateObject_1$7 = __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 = styled.div(templateObject_1$6 || (templateObject_1$6 = __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 ? GRAY_500 : GRAY_200;
 });
-var templateObject_1$7;
+var templateObject_1$6;
 var finixStyles = function (isMobile) { return ({
     default: {
@@ -2374,7 +2359,7 @@ var finixStyles = function (isMobile) { return ({
 }); };
 var retrieveConfig = function (_a) {
-    var plugin = _a.plugin, token = _a.token, subdomain = _a.subdomain, accountId = _a.accountId;
+    var 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) {
@@ -2383,7 +2368,7 @@ var retrieveConfig = function (_a) {
                         plugin: plugin,
                         method: "retrieve_config",
                         token: token,
-                        subdomain: subdomain,
+                        apiHost: apiHost,
                         payload: {
                             account_id: accountId,
                         },
@@ -2444,9 +2429,9 @@ var formatFinixError = function (response) {
 var FinixCardPaymentForm = function (_a) {
     var finixConfig = _a.formData, invoice = _a.invoice, isSaving = _a.isSaving, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, plugin = _a.plugin, quote = _a.quote, setIsSaving = _a.setIsSaving;
     // Context
-    var _b = useContext(BunnyContext), token = _b.token, subdomain = _b.subdomain;
+    var _b = useContext(BunnyContext), token = _b.token, apiHost = _b.apiHost;
     var accountId = useContext(PaymentContext).accountId;
-    var isMobile = useIsMobile$1();
+    var isMobile = useIsMobile(window);
     // Local state
     var _c = useState(false), savePaymentMethod = _c[0], setSavePaymentMethod = _c[1];
     var _d = useState(null), finixForm = _d[0], setFinixForm = _d[1];
@@ -2486,7 +2471,7 @@ var FinixCardPaymentForm = function (_a) {
                                         account_id: accountId,
                                     },
                                     token: token,
-                                    subdomain: subdomain,
+                                    apiHost: apiHost,
                                 })];
                         case 1:
                             response_1 = _a.sent();
@@ -2538,15 +2523,15 @@ var FinixCardPaymentForm = function (_a) {
 };
 // This is just a wrapper to fetch the finix config, config its form and pass it to the paymentForm
 var FinixForm = function (_a) {
-    var invoice = _a.invoice, isSaving = _a.isSaving, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, plugin = _a.plugin, quote = _a.quote, setIsSaving = _a.setIsSaving;
-    var _b = useContext(BunnyContext), token = _b.token, subdomain = _b.subdomain, accountId = _b.accountId;
+    var invoice = _a.invoice, isSaving = _a.isSaving, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, plugin = _a.plugin, quote = _a.quote, setIsSaving = _a.setIsSaving, entityId = _a.entityId;
+    var _b = useContext(BunnyContext), token = _b.token, apiHost = _b.apiHost, accountId = _b.accountId;
     var finixConfig = useQuery({
         queryKey: QueryKeyFactory.default.finixKey,
         queryFn: function () {
             return retrieveConfig({
                 plugin: plugin,
                 token: token,
-                subdomain: subdomain,
+                apiHost: apiHost,
                 accountId: accountId,
             });
         },
@@ -2554,7 +2539,7 @@ var FinixForm = function (_a) {
     }).data;
     if (!finixConfig || !finixConfig.application_id)
         return null;
-    return (jsx(FinixCardPaymentForm, { formData: finixConfig, invoice: invoice, isSaving: isSaving, setIsSaving: setIsSaving, onFail: onFail, onPaymentSuccess: onPaymentSuccess, plugin: plugin, quote: quote }));
+    return (jsx(FinixCardPaymentForm, { entityId: entityId, formData: finixConfig, invoice: invoice, isSaving: isSaving, setIsSaving: setIsSaving, onFail: onFail, onPaymentSuccess: onPaymentSuccess, plugin: plugin, quote: quote }));
 };
 var StoredPaymentMethodForm = function (_a) {
@@ -2593,15 +2578,15 @@ var finixOptions = function (isMobile) { return ({
 }); };
 var FINIX_FORM_ID = "form-element";
 var FinixAchPayment = function (_a) {
-    var invoice = _a.invoice, isSaving = _a.isSaving, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, plugin = _a.plugin, quote = _a.quote, setIsSaving = _a.setIsSaving;
-    var _b = useContext(BunnyContext), token = _b.token, subdomain = _b.subdomain, accountId = _b.accountId;
+    var invoice = _a.invoice, isSaving = _a.isSaving, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, plugin = _a.plugin, quote = _a.quote, setIsSaving = _a.setIsSaving, entityId = _a.entityId;
+    var _b = useContext(BunnyContext), token = _b.token, apiHost = _b.apiHost, accountId = _b.accountId;
     var finixConfig = useQuery({
         queryKey: QueryKeyFactory.default.finixAchKey,
         queryFn: function () {
             return retrieveConfig({
                 plugin: plugin,
                 token: token,
-                subdomain: subdomain,
+                apiHost: apiHost,
                 accountId: accountId,
             });
         },
@@ -2609,13 +2594,13 @@ var FinixAchPayment = function (_a) {
     }).data;
     if (!finixConfig || !finixConfig.application_id)
         return null;
-    return (jsx(FinixAchPaymentForm, { isSaving: isSaving, formData: finixConfig, invoice: invoice, onFail: onFail, onPaymentSuccess: onPaymentSuccess, plugin: plugin, quote: quote, setIsSaving: setIsSaving }));
+    return (jsx(FinixAchPaymentForm, { entityId: entityId, isSaving: isSaving, formData: finixConfig, invoice: invoice, onFail: onFail, onPaymentSuccess: onPaymentSuccess, plugin: plugin, quote: quote, setIsSaving: setIsSaving }));
 };
 var FinixAchPaymentForm = function (_a) {
     var finixConfig = _a.formData, invoice = _a.invoice, isSaving = _a.isSaving, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, plugin = _a.plugin, quote = _a.quote, setIsSaving = _a.setIsSaving;
     // Context
-    var isMobile = useIsMobile$1();
-    var _b = useContext(BunnyContext), token = _b.token, subdomain = _b.subdomain, accountId = _b.accountId, window = _b.window;
+    var _b = useContext(BunnyContext), token = _b.token, apiHost = _b.apiHost, accountId = _b.accountId, window = _b.window;
+    var isMobile = useIsMobile(window);
     // Local state
     var _c = useState(), finixForm = _c[0], setFinixForm = _c[1];
     var _d = useState(false), savePaymentMethod = _d[0], setSavePaymentMethod = _d[1];
@@ -2651,7 +2636,7 @@ var FinixAchPaymentForm = function (_a) {
                                         account_id: accountId,
                                     },
                                     token: token,
-                                    subdomain: subdomain,
+                                    apiHost: apiHost,
                                 })];
                         case 1:
                             response_1 = _a.sent();
@@ -2702,7 +2687,7 @@ var FinixAchPaymentForm = function (_a) {
 var PaymentMethodForm = function (_a) {
     var _b, _c;
-    var invoice = _a.invoice, isPlugin = _a.isPlugin, isSaving = _a.isSaving, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, paymentMethod = _a.paymentMethod, quote = _a.quote, setIsSaving = _a.setIsSaving;
+    var entityId = _a.entityId, invoice = _a.invoice, isPlugin = _a.isPlugin, isSaving = _a.isSaving, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, paymentMethod = _a.paymentMethod, quote = _a.quote, setIsSaving = _a.setIsSaving;
     if (!paymentMethod)
         return null;
     if (isPlugin) {
@@ -2710,25 +2695,68 @@ var PaymentMethodForm = function (_a) {
         var payable = (quote || invoice);
         switch ((_c = (_b = paymentMethod.components) === null || _b === void 0 ? void 0 : _b.frontend) === null || _c === void 0 ? void 0 : _c[0].name) {
             case "StripePayment":
-                return (jsx(StripeForm, { payable: payable, isSaving: isSaving, onFail: onFail, onPaymentSuccess: onPaymentSuccess, plugin: paymentMethod, setIsSaving: setIsSaving }));
+                return (jsx(StripeForm, { entityId: entityId, payable: payable, isSaving: isSaving, onFail: onFail, onPaymentSuccess: onPaymentSuccess, plugin: paymentMethod, setIsSaving: setIsSaving }));
             case "FinixPayment":
-                return (jsx(FinixForm, { invoice: invoice, isSaving: isSaving, onFail: onFail, onPaymentSuccess: onPaymentSuccess, plugin: paymentMethod, quote: quote, setIsSaving: setIsSaving }));
+                return (jsx(FinixForm, { entityId: entityId, invoice: invoice, isSaving: isSaving, onFail: onFail, onPaymentSuccess: onPaymentSuccess, plugin: paymentMethod, quote: quote, setIsSaving: setIsSaving }));
             case "FinixAchPayment":
-                return (jsx(FinixAchPayment, { invoice: invoice, isSaving: isSaving, onFail: onFail, onPaymentSuccess: onPaymentSuccess, plugin: paymentMethod, quote: quote, setIsSaving: setIsSaving }));
+                return (jsx(FinixAchPayment, { entityId: entityId, invoice: invoice, isSaving: isSaving, onFail: onFail, onPaymentSuccess: onPaymentSuccess, plugin: paymentMethod, quote: quote, setIsSaving: setIsSaving }));
             case "DemoPayPayment":
-                return (jsx(DemoPayForm, { invoice: invoice, isSaving: isSaving, onFail: onFail, onPaymentSuccess: onPaymentSuccess, plugin: paymentMethod, quote: quote, setIsSaving: setIsSaving }));
+                return (jsx(DemoPayForm, { entityId: entityId, invoice: invoice, isSaving: isSaving, onFail: onFail, onPaymentSuccess: onPaymentSuccess, plugin: paymentMethod, quote: quote, setIsSaving: setIsSaving }));
             default:
                 return jsx("p", { children: "Can not find form for plugin" });
         }
     }
     else if (quote || invoice)
-        return (jsx(StoredPaymentMethodForm, { invoice: invoice, isSaving: isSaving, onFail: onFail, onPaymentSuccess: onPaymentSuccess, paymentMethod: paymentMethod, quote: quote, setIsSaving: setIsSaving }));
+        return (jsx(StoredPaymentMethodForm, { entityId: entityId, invoice: invoice, isSaving: isSaving, onFail: onFail, onPaymentSuccess: onPaymentSuccess, paymentMethod: paymentMethod, quote: quote, setIsSaving: setIsSaving }));
     return null;
 };
+var usePlugins = function (_a) {
+    var entityId = _a.entityId, apiHost = _a.apiHost, token = _a.token;
+    return useQuery({
+        queryKey: QueryKeyFactory.default.pluginsKey,
+        queryFn: function () {
+            var plugins = getPlugins({
+                entityId: entityId,
+                token: token,
+                apiHost: apiHost,
+            });
+            return plugins;
+        },
+        enabled: Boolean(entityId),
+    });
+};
+var filterPaymentPlugins = function (plugins) {
+    return plugins === null || plugins === void 0 ? void 0 : plugins.filter(function (plugin) {
+        var _a, _b, _c, _d;
+        return ((_a = plugin.type) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "payment" &&
+            ((_b = plugin.status) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === "valid" &&
+            ((_d = (_c = plugin.components) === null || _c === void 0 ? void 0 : _c.frontend) === null || _d === void 0 ? void 0 : _d.length);
+    });
+};
+var usePaymentPlugins = function (_a) {
+    var entityId = _a.entityId, apiHost = _a.apiHost, token = _a.token;
+    var _b = usePlugins({
+        entityId: entityId,
+        apiHost: apiHost,
+        token: token,
+    }), plugins = _b.data, isFetched = _b.isFetched;
+    var paymentPlugins = filterPaymentPlugins(Array.isArray(plugins) ? plugins : []);
+    var paymentMethodAllowedPlugins = paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.filter(function (plugin) {
+        var _a, _b;
+        return (_b = (_a = plugin.components) === null || _a === void 0 ? void 0 : _a.frontend) === null || _b === void 0 ? void 0 : _b.some(function (component) { var _a; return (_a = component === null || component === void 0 ? void 0 : component.scenarios) === null || _a === void 0 ? void 0 : _a.includes("admin-payment_method"); });
+    });
+    return {
+        paymentPlugins: paymentPlugins,
+        paymentMethodAllowedPlugins: paymentMethodAllowedPlugins,
+        isFetched: isFetched,
+    };
+};
 var PaymentFormWrapper = function (_a) {
     var children = _a.children, setMaxHeight = _a.setMaxHeight;
-    var isMobile = useIsMobile$1();
+    var isMobile = useIsMobile(window);
     return (jsx("div", __assign({ className: "flex flex-col gap-6 shrink-0 ".concat(isMobile ? "w-full shadow-padding-xb" : ""), style: __assign({}, (isMobile
             ? setMaxHeight
                 ? { maxHeight: "60vh" }
@@ -2738,14 +2766,14 @@ var PaymentFormWrapper = function (_a) {
             })) }, { children: children })));
 };
 var ActualPaymentForm = function (_a) {
-    var invoice = _a.invoice, isSaving = _a.isSaving, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, quote = _a.quote, setIsSaving = _a.setIsSaving;
+    var entityId = _a.entityId, invoice = _a.invoice, isSaving = _a.isSaving, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, quote = _a.quote, setIsSaving = _a.setIsSaving;
     // Local state
     var _b = useState(), selectedPaymentMethod = _b[0], setSelectedPaymentMethod = _b[1];
-    var _c = useContext(BunnyContext), token = _c.token, subdomain = _c.subdomain, graphQLClient = _c.graphQLClient;
+    var _c = useContext(BunnyContext), token = _c.token, apiHost = _c.apiHost, graphQLClient = _c.graphQLClient;
     var storedPaymentMethod = usePaymentMethod(graphQLClient).data;
     // Queries
     var isPaymentMethodFetched = storedPaymentMethod !== undefined;
-    var _d = usePaymentPlugins({ subdomain: subdomain, token: token }), paymentMethodAllowedPlugins = _d.paymentMethodAllowedPlugins, arePluginsFetched = _d.isFetched;
+    var _d = usePaymentPlugins({ entityId: entityId, apiHost: apiHost, token: token }), paymentMethodAllowedPlugins = _d.paymentMethodAllowedPlugins, arePluginsFetched = _d.isFetched;
     // Derived state
     // If there is a quote or invoice, we are just saving a payment method and not processing a payment
     var showStoredPaymentMethodOption = Boolean(quote || invoice);
@@ -2780,16 +2808,16 @@ var ActualPaymentForm = function (_a) {
         showStoredPaymentMethodOption,
         storedPaymentMethod,
     ]);
-    return (jsxs(PaymentFormWrapper, __assign({ setMaxHeight: isPlugin }, { children: [showPaymentMethodSelector && (jsx(PaymentMethodSelector, { onSelect: setSelectedPaymentMethod, paymentMethodAllowedPlugins: paymentMethodAllowedPlugins, showStoredPaymentMethodOption: showStoredPaymentMethodOption, value: selectedPaymentMethod })), selectedPaymentMethod && (jsx("div", __assign({ className: "flex flex-col" }, { children: jsx(PaymentMethodForm, { invoice: invoice, isPlugin: isPlugin, isSaving: isSaving, onFail: onFail, onPaymentSuccess: onPaymentSuccess, paymentMethod: selectedPaymentMethod, quote: quote, setIsSaving: setIsSaving }) })))] })));
+    return (jsxs(PaymentFormWrapper, __assign({ setMaxHeight: isPlugin }, { children: [showPaymentMethodSelector && (jsx(PaymentMethodSelector, { onSelect: setSelectedPaymentMethod, paymentMethodAllowedPlugins: paymentMethodAllowedPlugins, showStoredPaymentMethodOption: showStoredPaymentMethodOption, value: selectedPaymentMethod })), selectedPaymentMethod && (jsx("div", __assign({ className: "flex flex-col" }, { children: jsx(PaymentMethodForm, { entityId: entityId, invoice: invoice, isPlugin: isPlugin, isSaving: isSaving, onFail: onFail, onPaymentSuccess: onPaymentSuccess, paymentMethod: selectedPaymentMethod, quote: quote, setIsSaving: setIsSaving }) })))] })));
 };
 var PaymentForm = function (_a) {
-    var invoice = _a.invoice, isSaving = _a.isSaving, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, quote = _a.quote, setIsSaving = _a.setIsSaving;
-    return (jsx(ActualPaymentForm, { invoice: invoice, isSaving: isSaving, onFail: onFail, onPaymentSuccess: onPaymentSuccess, quote: quote, setIsSaving: setIsSaving }));
+    var entityId = _a.entityId, invoice = _a.invoice, isSaving = _a.isSaving, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, quote = _a.quote, setIsSaving = _a.setIsSaving;
+    return (jsx(ActualPaymentForm, { entityId: entityId, invoice: invoice, isSaving: isSaving, onFail: onFail, onPaymentSuccess: onPaymentSuccess, quote: quote, setIsSaving: setIsSaving }));
 };
-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, subdomain = _a.subdomain;
+    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 () {
         var mutationVars, response, errors;
         return __generator(this, function (_b) {
@@ -2804,10 +2832,10 @@ var checkout = function (_a) {
                         mutationVars.paymentMethodData = __assign(__assign({}, paymentMethodData), { metadata: paymentMethodData.metadata });
                     }
                     return [4 /*yield*/, gqlRequest({
-                            query: MUTATION$7,
+                            query: MUTATION$8,
                             token: token,
                             vars: mutationVars,
-                            subdomain: subdomain,
+                            apiHost: apiHost,
                         })];
                 case 1:
                     response = _b.sent();
@@ -2824,8 +2852,8 @@ var checkout = function (_a) {
 var InvoiceCheckoutContext = createContext({});
 var InvoiceCheckout = function (_a) {
-    var isSaving = _a.isSaving, onSuccess = _a.onSuccess, onFail = _a.onFail, invoice = _a.invoice, setIsSaving = _a.setIsSaving, preCheckout = _a.preCheckout, setIsPreCheckoutLoading = _a.setIsPreCheckoutLoading, isPreCheckoutLoading = _a.isPreCheckoutLoading, payImmediatelyGivenInvoice = _a.payImmediatelyGivenInvoice, checkoutButtonName = _a.checkoutButtonName;
-    var _b = useContext(BunnyContext), subdomain = _b.subdomain, token = _b.token;
+    var isSaving = _a.isSaving, onSuccess = _a.onSuccess, onFail = _a.onFail, invoice = _a.invoice, setIsSaving = _a.setIsSaving, preCheckout = _a.preCheckout, setIsPreCheckoutLoading = _a.setIsPreCheckoutLoading, isPreCheckoutLoading = _a.isPreCheckoutLoading, payImmediatelyGivenInvoice = _a.payImmediatelyGivenInvoice, checkoutButtonName = _a.checkoutButtonName, entityId = _a.entityId;
+    var _b = useContext(BunnyContext), apiHost = _b.apiHost, token = _b.token;
     var checkoutMutation = useMutation({
         mutationFn: function (_a) {
             var pluginPaymentMethod = _a.pluginPaymentMethod, savedPaymentMethod = _a.savedPaymentMethod;
@@ -2835,7 +2863,7 @@ var InvoiceCheckout = function (_a) {
                     invoiceId: invoice === null || invoice === void 0 ? void 0 : invoice.id,
                     paymentMethodId: paymentMethodId,
                     token: token,
-                    subdomain: subdomain,
+                    apiHost: apiHost,
                 });
             }
             else if (pluginPaymentMethod) {
@@ -2850,7 +2878,7 @@ var InvoiceCheckout = function (_a) {
                         token: paymentToken,
                     },
                     token: token,
-                    subdomain: subdomain,
+                    apiHost: apiHost,
                 });
             }
             else
@@ -2895,7 +2923,7 @@ var InvoiceCheckout = function (_a) {
             invoice: invoice,
             setIsPreCheckoutLoading: setIsPreCheckoutLoading,
             isPreCheckoutLoading: isPreCheckoutLoading,
-        } }, { children: jsx(PaymentForm, { isSaving: isSaving, onPaymentSuccess: handleCheckout, onFail: onFail, invoice: invoice, setIsSaving: setIsSaving }) })));
+        } }, { children: jsx(PaymentForm, { entityId: entityId, isSaving: isSaving, onPaymentSuccess: handleCheckout, onFail: onFail, invoice: invoice, setIsSaving: setIsSaving }) })));
 };
 var fetchPDF = function (window, apiEndpoint, invoiceUuid) { return __awaiter(void 0, void 0, void 0, function () {
@@ -2906,7 +2934,7 @@ var fetchPDF = function (window, apiEndpoint, invoiceUuid) { return __awaiter(vo
                 if (!invoiceUuid) {
                     throw new Error("Invoice ID is required to fetch PDF");
                 }
-                return [4 /*yield*/, fetch("".concat(ApiUtils.getApiBase(window, apiEndpoint), "/legacy_invoices/").concat(invoiceUuid))];
+                return [4 /*yield*/, fetch("".concat(apiEndpoint, "/api/legacy_invoices/").concat(invoiceUuid))];
             case 1:
                 response = _a.sent();
                 if (!response.ok)
@@ -2916,12 +2944,12 @@ var fetchPDF = function (window, apiEndpoint, invoiceUuid) { return __awaiter(vo
     });
 }); };
 function InvoicePDF(_a) {
-    var invoiceUuid = _a.invoiceUuid, subdomain = _a.subdomain;
+    var invoiceUuid = _a.invoiceUuid, apiHost = _a.apiHost;
     var window = useContext(BunnyContext).window;
     var _b = useState(undefined), pdfUrl = _b[0], setPdfUrl = _b[1];
     var _c = useQuery({
         queryKey: ["invoicePDF", invoiceUuid],
-        queryFn: function () { return fetchPDF(window, subdomain || "", invoiceUuid); },
+        queryFn: function () { return fetchPDF(window, apiHost || "", invoiceUuid); },
         enabled: Boolean(invoiceUuid),
     }), pdfBlob = _c.data, isLoading = _c.isLoading;
     useEffect(function () {
@@ -2941,20 +2969,30 @@ function InvoicePDF(_a) {
         }, title: "Invoice PDF", width: "100%" }));
 }
+var quoteMetaDescription = function (vendorName) {
+    return "View this quote on the ".concat(vendorName, " customer portal. Powered by Bunny");
+};
+var quoteMetaTitle = function (_a) {
+    var documentName = _a.documentName, vendorName = _a.vendorName;
+    return vendorName + " " + documentName;
+};
 function ActualInvoice(_a) {
-    var id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, onPaymentSuccess = _a.onPaymentSuccess;
+    var id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, onPaymentSuccess = _a.onPaymentSuccess, entityId = _a.entityId;
+    var window = useContext(BunnyContext).window;
+    var isMobile = useIsMobile(window);
     var _b = useState(false), isSaving = _b[0], setIsSaving = _b[1];
     var queryClient = useQueryClient();
-    var isMobile = useIsMobile$1();
-    var showSuccessNotification = NotificationUtils.useSuccessNotification();
-    var handleAllErrorFormats = NotificationUtils.useAllErrorFormats(function (url) {
-        console.log("navigate to", url);
-    });
-    var _c = useContext(BunnyContext), subdomain = _c.subdomain, token = _c.token;
+    var _c = useContext(BunnyContext), apiHost = _c.apiHost, token = _c.token, onErrorNavigate = _c.onErrorNavigate;
+    var showSuccessNotification = useSuccessNotification();
+    var handleAllErrorFormats = useAllErrorFormats(onErrorNavigate ||
+        (function (url) {
+            console.log("navigate to", url, " not implemented");
+        }));
     // Queries
     var _d = useQuery({
         queryKey: QueryKeyFactory.default.createFormattedInvoiceKey(token, id),
-        queryFn: function () { return getFormattedInvoice({ id: id, token: token, subdomain: subdomain }); },
+        queryFn: function () { return getFormattedInvoice({ id: id, token: token, apiHost: apiHost }); },
     }), formattedInvoice = _d.data, error = _d.error;
     if (error) {
         return jsxs("div", { children: ["Error loading invoice: ", error.message] });
@@ -2981,24 +3019,39 @@ function ActualInvoice(_a) {
     };
     // Derived state
     var isInvoicePayable = PAYABLE_INVOICE_STATES.includes((formattedInvoice === null || formattedInvoice === void 0 ? void 0 : formattedInvoice.state) || "");
-    return (jsxs(Fragment, { children: [jsxs(Helmet, { children: [jsxs("title", { children: [formattedInvoice.vendorName, " ", DOCUMENT_NAME$1.INVOICE] }), jsx("meta", { name: "description", content: QuoteInvoiceUtils.quoteMetaDescription(formattedInvoice.vendorName) }), jsx("meta", { property: "og:type", content: "website" }), jsx("meta", { property: "og:title", content: QuoteInvoiceUtils.quoteMetaTitle({
+    return (jsxs(Fragment, { children: [jsxs(Helmet, { children: [jsxs("title", { children: [formattedInvoice.vendorName, " ", DOCUMENT_NAME$1.INVOICE] }), jsx("meta", { name: "description", content: quoteMetaDescription(formattedInvoice.vendorName) }), jsx("meta", { property: "og:type", content: "website" }), jsx("meta", { property: "og:title", content: quoteMetaTitle({
                             vendorName: formattedInvoice.vendorName,
                             documentName: DOCUMENT_NAME$1.INVOICE,
-                        }) }), jsx("meta", { property: "og:description", content: QuoteInvoiceUtils.quoteMetaDescription(formattedInvoice.vendorName) })] }), jsxs("div", __assign({ className: "flex gap-6 ".concat(isMobile ? "flex-col w-full overflow-hidden" : "shadow-padding-xb") }, { children: [formattedInvoice.isLegacy ? (jsx("div", __assign({ className: "flex justify-center w-full" }, { children: jsx(InvoicePDF, { invoiceUuid: formattedInvoice.uuid, subdomain: subdomain }) }))) : (invoiceQuoteViewComponent || (jsx(InvoiceQuoteView, { html: formattedInvoice.html, isMobile: isMobile, formattedInvoice: formattedInvoice, backButtonName: backButtonName, onBackButtonClick: onBackButtonClick }))), !isMobile && isInvoicePayable && (jsx(Divider, { className: "h-full", type: "vertical" })), isInvoicePayable && (jsx(InvoiceCheckout, { invoice: formattedInvoice, isSaving: isSaving, onFail: function (error) {
+                        }) }), jsx("meta", { property: "og:description", content: quoteMetaDescription(formattedInvoice.vendorName) })] }), jsxs("div", __assign({ className: "flex gap-6 ".concat(isMobile ? "flex-col w-full overflow-hidden" : "shadow-padding-xb") }, { children: [formattedInvoice.isLegacy ? (jsx("div", __assign({ className: "flex justify-center w-full" }, { children: jsx(InvoicePDF, { invoiceUuid: formattedInvoice.uuid, apiHost: apiHost }) }))) : (invoiceQuoteViewComponent || (jsx(InvoiceQuoteView, { html: formattedInvoice.html, formattedInvoice: formattedInvoice, backButtonName: backButtonName, onBackButtonClick: onBackButtonClick }))), !isMobile && isInvoicePayable && (jsx(Divider, { className: "h-full", type: "vertical" })), isInvoicePayable && (jsx(InvoiceCheckout, { invoice: formattedInvoice, isSaving: isSaving, onFail: function (error) {
                             onFail(error);
                             setIsSaving(false);
-                        }, onSuccess: onSuccess, setIsSaving: setIsSaving }))] }))] }));
+                        }, onSuccess: onSuccess, setIsSaving: setIsSaving, entityId: entityId }))] }))] }));
 }
 function Invoice(_a) {
-    var id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick; _a.onInvoiceDownloadError; var onPaymentSuccess = _a.onPaymentSuccess;
-    return (jsx(HelmetProvider, { children: jsx(ActualInvoice, { id: id, invoiceQuoteViewComponent: invoiceQuoteViewComponent, backButtonName: backButtonName, onBackButtonClick: onBackButtonClick, onPaymentSuccess: onPaymentSuccess }) }));
+    var id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick; _a.onInvoiceDownloadError; var onPaymentSuccess = _a.onPaymentSuccess, entityId = _a.entityId;
+    return (jsx(HelmetProvider, { children: jsx(ActualInvoice, { id: id, invoiceQuoteViewComponent: invoiceQuoteViewComponent, backButtonName: backButtonName, onBackButtonClick: onBackButtonClick, onPaymentSuccess: onPaymentSuccess, entityId: entityId }) }));
 }
-var DOCUMENT_NAME;
-(function (DOCUMENT_NAME) {
-    DOCUMENT_NAME["INVOICE"] = "invoice";
-    DOCUMENT_NAME["QUOTE"] = "quote";
-})(DOCUMENT_NAME || (DOCUMENT_NAME = {}));
+var MUTATION$7 = function (id) { return "\n  query formattedQuote ($id: ID) {\n    formattedQuote (id: $id) {\n      payableId\n      acceptedAt\n      acceptedByName\n      amount\n      amountDue\n      amountsByPeriod {\n        id\n        name\n        amount\n      }\n      object { documents { id filename size date url } }\n      billingCity\n      billingCountry\n      billingState\n      billingStreet\n      billingZip\n      contactName\n      currency\n      customerBillingCity\n      customerBillingCountry\n      customerBillingState\n      customerBillingStreet\n      customerBillingZip\n      customerName\n      discount\n      discountValue\n      duration\n      endDate\n      expiresAt\n      html\n      formattedLines {\n        amount\n        amountsByPeriod {\n          quantity\n          id\n          name\n          startDate\n          endDate\n          amount\n          amountsByTier {\n            id\n            tier {\n              starts\n              ends\n              price\n            }\n            quantity\n            amount\n          }\n          prorationRate\n        }\n        billingPeriodEnd\n        billingPeriodStart\n        chargeType\n        discount\n        frequency\n        isRamp\n        periods\n        planName\n        position\n        price\n        priceDecimals\n        priceListChargeId\n        priceListChargeName\n        priceListId\n        priceListName\n        priceTiers {\n          price\n          starts\n        }\n        pricingModel\n        productName\n        prorationRate\n        quantity\n        showProductNameOnLineItem\n        taxCode\n        trialEndDate\n        trialStartDate\n        unitOfMeasure\n        vatCode\n      }\n      netPaymentDays\n      notes\n      number\n      poNumberRequired\n      salesContactEmail\n      sharedAt\n      startDate\n      state\n      subtotal\n      taxAmount\n      taxNumberLabel\n      taxNumberRequired\n      vendorName\n    }\n  }"; };
+var 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*/, gqlRequest({
+                        query: MUTATION$7(),
+                        token: token,
+                        apiHost: apiHost,
+                        vars: { id: id },
+                    })];
+                case 1:
+                    response = _b.sent();
+                    return [2 /*return*/, response === null || response === void 0 ? void 0 : response.formattedQuote];
+            }
+        });
+    });
+};
 var filterSigningPlugins = function (plugins) {
     return plugins === null || plugins === void 0 ? void 0 : plugins.filter(function (plugin) {
@@ -3007,27 +3060,31 @@ var filterSigningPlugins = function (plugins) {
             ((_b = plugin.status) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === "valid";
     });
 };
-var useSigningPlugins = function (token, subdomain) {
-    var plugins = usePlugins({ token: token, subdomain: subdomain });
+var useSigningPlugins = function (_a) {
+    var entityId = _a.entityId, apiHost = _a.apiHost, token = _a.token;
+    var plugins = usePlugins({ entityId: entityId, apiHost: apiHost, token: token });
     return filterSigningPlugins(plugins.data);
 };
-var useSendAcceptQuote = function (token, subdomain, quoteId) {
+var useSendAcceptQuote = function (_a) {
+    var entityId = _a.entityId, onErrorNavigate = _a.onErrorNavigate, quoteId = _a.quoteId, apiHost = _a.apiHost, token = _a.token;
     // Hooks
-    var graphQLMutation = GraphqlUtils.useGraphQLmutation(function () {
+    var graphQLMutation = useGraphQLmutation(function () {
         console.log("navigate in useGraphQLmutation in useSendAcceptQuote is not yet implemented");
-    }, subdomain || "", function () {
+    }, apiHost || "", function () {
         console.log("onError in useGraphQLmutation in useSendAcceptQuote is not yet implemented");
     });
-    // const handleAllErrorFormats = useAllErrorFormats();
-    var signingPlugins = useSigningPlugins(token, subdomain);
-    console.log("signingPlugins in useSendAcceptQuote: ", signingPlugins);
+    var handleAllErrorFormats = useAllErrorFormats(onErrorNavigate ||
+        (function (url) {
+            console.log("navigate to", url, " not implemented");
+        }));
+    var signingPlugins = useSigningPlugins({ entityId: entityId, apiHost: apiHost, token: token });
     var queryClient = useQueryClient();
     // Local state
-    var _a = useState(false), acceptBoxVisible = _a[0], setAcceptBoxVisible = _a[1];
-    var _b = useState(false), isAccepting = _b[0], setIsAccepting = _b[1];
+    var _b = useState(false), acceptBoxVisible = _b[0], setAcceptBoxVisible = _b[1];
+    var _c = useState(false), isAccepting = _c[0], setIsAccepting = _c[1];
     // Pandadoc polling modal state
-    var _c = useState(false), pandadocPollingModalVisible = _c[0], setPandadocPollingModalVisible = _c[1];
+    var _d = useState(false), pandadocPollingModalVisible = _d[0], setPandadocPollingModalVisible = _d[1];
     var redirectForSigning = function () {
         var mutation = "mutation quoteSigningUrlCreate($quoteId: ID) {\n      quoteSigningUrlCreate(quoteId: $quoteId) {\n        redirectUri\n        pluginClientId\n        pluginShortName\n        errors\n      }\n    }";
         var variables = {
@@ -3040,10 +3097,7 @@ var useSendAcceptQuote = function (token, subdomain, quoteId) {
                 console.log("rsp.data.quoteSigningUrlCreate.pluginShortName === 'pandadoc'", rsp.data.quoteSigningUrlCreate.pluginShortName === "pandadoc");
                 console.log("rsp", rsp);
                 if (rsp.data.quoteSigningUrlCreate.pluginShortName === "dropbox_sign") {
-                    // openDropboxSignModal(
-                    //   rsp.data.quoteSigningUrlCreate.pluginClientId,
-                    //   rsp.data.quoteSigningUrlCreate.redirectUri
-                    // );
+                    openDropboxSignModal(rsp.data.quoteSigningUrlCreate.pluginClientId, rsp.data.quoteSigningUrlCreate.redirectUri);
                     console.log("dropbox sign is not implemented");
                 }
                 else if (rsp.data.quoteSigningUrlCreate.pluginShortName === "pandadoc") {
@@ -3058,31 +3112,39 @@ var useSendAcceptQuote = function (token, subdomain, quoteId) {
         });
     };
     // TODO: Fix hellosign-embedded window is undefined bug
-    // const openDropboxSignModal = async (clientId: string, url: string) => {
-    //   if (typeof window === "undefined") {
-    //     return;
-    //   }
-    //   const { default: HelloSign } = await import("hellosign-embedded");
-    //   const client = new HelloSign({
-    //     clientId: clientId,
-    //   });
-    //   client.on("sign", (data: any) => {
-    //     // Change the UI to show accepted?
-    //   });
-    //   // Open the DropboxSign modal
-    //   client.open(url, {
-    //     clientId: clientId,
-    //     skipDomainVerification: false, // Set true for development testing
-    //   });
-    // };
+    var openDropboxSignModal = function (clientId, url) { return __awaiter(void 0, void 0, void 0, function () {
+        var HelloSign, client;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (typeof window === "undefined") {
+                        return [2 /*return*/];
+                    }
+                    return [4 /*yield*/, import('hellosign-embedded')];
+                case 1:
+                    HelloSign = (_a.sent()).default;
+                    client = new HelloSign({
+                        clientId: clientId,
+                    });
+                    client.on("sign", function (data) {
+                        // Change the UI to show accepted?
+                    });
+                    // Open the DropboxSign modal
+                    client.open(url, {
+                        clientId: clientId,
+                        skipDomainVerification: false, // Set true for development testing
+                    });
+                    return [2 /*return*/];
+            }
+        });
+    }); };
     // TODO: update useing fetch
     var sendAccept = function (changedFormItems) {
         var mutation = "mutation quoteAccept($name: String!, $title: String!, $poNumber: String, $taxNumber: String, $quoteId: ID) {\n        quoteAccept(name: $name, title: $title, poNumber: $poNumber, taxNumber: $taxNumber, quoteId: $quoteId) {\n          errors\n        }\n      }";
         var variables = __assign(__assign({}, changedFormItems), { quoteId: quoteId });
         graphQLMutation(token, mutation, variables, function (rsp) {
-            // if (rsp.errors) handleAllErrorFormats(rsp.errors);
             if (rsp.errors)
-                console.log("rsp.errors", rsp.errors);
+                handleAllErrorFormats(rsp.errors);
             else {
                 setAcceptBoxVisible(false);
                 queryClient.invalidateQueries({
@@ -3128,45 +3190,6 @@ var useSigningComplete = function (_a) {
     }, [data, eventParam, queryClient, token]);
 };
-var ModalOverrideBrandStylings = styled(Modal)(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n  .ant-modal-content {\n    border-radius: 0.75rem;\n    overflow: hidden;\n    padding: 0 !important;\n  }\n  .ant-modal-title {\n    font-family: ", ";\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  .ant-modal-title {\n    font-family: ", ";\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"])), MARK_PRO);
-var StyledModal$1 = function (props) {
-    return jsx(ModalOverrideBrandStylings, __assign({ closable: false }, props));
-};
-var templateObject_1$6;
-var useFocusFirstInput = function (_a) {
-    var firstInputRef = _a.firstInputRef, isVisible = _a.isVisible;
-    useEffect(function () {
-        var _a;
-        (_a = firstInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, [isVisible, firstInputRef]);
-};
-var AcceptQuoteModal = function (_a) {
-    var acceptBoxVisible = _a.acceptBoxVisible, formattedQuote = _a.formattedQuote, sendAccept = _a.sendAccept, setAcceptBoxVisible = _a.setAcceptBoxVisible, setIsAccepting = _a.setIsAccepting;
-    // Refs
-    var firstInputRef = useRef(null);
-    // Hooks
-    var form = Form.useForm()[0];
-    useFocusFirstInput({ firstInputRef: firstInputRef, isVisible: acceptBoxVisible });
-    // Derived state
-    var poNumberRequired = formattedQuote.poNumberRequired, taxNumberRequired = formattedQuote.taxNumberRequired, taxNumberLabel = formattedQuote.taxNumberLabel;
-    var createRules = function (required, title) {
-        return required ? [{ required: true, message: "".concat(title, " is required") }] : [];
-    };
-    return (jsx(StyledModal$1, __assign({ centered: true, okText: "Accept", onCancel: function () {
-            setAcceptBoxVisible(false);
-            setIsAccepting(false);
-        }, onOk: function () {
-            form
-                .validateFields()
-                .then(function (changedFields) {
-                sendAccept(changedFields);
-            })
-                .catch(function () { });
-        }, open: acceptBoxVisible, title: "Accept quote", width: 400 }, { children: jsxs(Form, __assign({ className: "flex flex-col gap-2", form: form, layout: "vertical" }, { children: [jsx(Form.Item, __assign({ label: "Your name", name: "name", rules: createRules(true, "Your name") }, { children: jsx(Input, { autoFocus: true, ref: firstInputRef }) })), jsx(Form.Item, __assign({ label: "Your job title", name: "title", rules: createRules(true, "Your job title") }, { children: jsx(Input, {}) })), jsx(Form.Item, __assign({ label: "Purchase order number", name: "poNumber", rules: createRules(poNumberRequired, "Purchase order number") }, { children: jsx(Input, {}) })), taxNumberRequired && (jsx(Form.Item, __assign({ name: "taxNumber", label: taxNumberLabel, rules: createRules(taxNumberRequired, taxNumberLabel) }, { children: jsx(Input, {}) })))] })) })));
-};
 var dayjs_min = {exports: {}};
 (function (module, exports) {
@@ -3181,13 +3204,16 @@ var useIsExpired = function (expiresAt) {
 var PandadocPollingModal = function (_a) {
     var isVisible = _a.isVisible, setVisible = _a.setVisible, id = _a.id;
-    var _b = useContext(BunnyContext), token = _b.token, subdomain = _b.subdomain;
-    var graphQLMutation = GraphqlUtils.useGraphQLmutation(function () {
+    var _b = useContext(BunnyContext), token = _b.token, apiHost = _b.apiHost, onErrorNavigate = _b.onErrorNavigate;
+    var graphQLMutation = useGraphQLmutation(function () {
         console.log("graphQLMutation navigateOnTokenExpired not yet implemented");
-    }, subdomain || "", function () {
+    }, apiHost || "", function () {
         console.log("graphQLMutation onError not yet implemented");
     });
-    var handleAllErrorFormats = NotificationUtils.useAllErrorFormats(function () { });
+    var handleAllErrorFormats = useAllErrorFormats(onErrorNavigate ||
+        (function (url) {
+            console.log("navigate to", url, " not implemented");
+        }));
     var _c = useState(0), numberOfPolls = _c[0], setNumberOfPolls = _c[1];
     var _d = useState(""), infoMessage = _d[0], setInfoMessage = _d[1];
     useEffect(function () {
@@ -3222,168 +3248,573 @@ var PandadocPollingModal = function (_a) {
     return (jsxs(Modal, __assign({ title: "Uploading quote to Pandadoc", open: isVisible, closable: false, footer: null }, { children: [jsxs("div", __assign({ className: "py-4 text-center" }, { children: ["This may take a few seconds", ".".repeat(numberOfPolls)] })), jsx("div", __assign({ className: "text-center" }, { children: infoMessage }))] })));
 };
-var MUTATION$6 = function (id) { return "\n  query formattedQuote ($id: ID) {\n    formattedQuote (id: $id) {\n      payableId\n      acceptedAt\n      acceptedByName\n      amount\n      amountDue\n      amountsByPeriod {\n        id\n        name\n        amount\n      }\n      object { documents { id filename size date url } }\n      billingCity\n      billingCountry\n      billingState\n      billingStreet\n      billingZip\n      contactName\n      currency\n      customerBillingCity\n      customerBillingCountry\n      customerBillingState\n      customerBillingStreet\n      customerBillingZip\n      customerName\n      discount\n      discountValue\n      duration\n      endDate\n      expiresAt\n      html\n      formattedLines {\n        amount\n        amountsByPeriod {\n          quantity\n          id\n          name\n          startDate\n          endDate\n          amount\n          amountsByTier {\n            id\n            tier {\n              starts\n              ends\n              price\n            }\n            quantity\n            amount\n          }\n          prorationRate\n        }\n        billingPeriodEnd\n        billingPeriodStart\n        chargeType\n        discount\n        frequency\n        isRamp\n        periods\n        planName\n        position\n        price\n        priceDecimals\n        priceListChargeId\n        priceListChargeName\n        priceListId\n        priceListName\n        priceTiers {\n          price\n          starts\n        }\n        pricingModel\n        productName\n        prorationRate\n        quantity\n        showProductNameOnLineItem\n        taxCode\n        trialEndDate\n        trialStartDate\n        unitOfMeasure\n        vatCode\n      }\n      netPaymentDays\n      notes\n      number\n      poNumberRequired\n      salesContactEmail\n      sharedAt\n      startDate\n      state\n      subtotal\n      taxAmount\n      taxNumberLabel\n      taxNumberRequired\n      vendorName\n    }\n  }"; };
-var getFormattedQuote = function (_a) {
-    var id = _a.id, token = _a.token, subdomain = _a.subdomain;
-    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: MUTATION$6(),
-                        token: token,
-                        subdomain: subdomain,
-                        vars: { id: id },
-                    })];
-                case 1:
-                    response = _b.sent();
-                    return [2 /*return*/, response === null || response === void 0 ? void 0 : response.formattedQuote];
-            }
-        });
-    });
+var ModalOverrideBrandStylings = styled(Modal)(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  .ant-modal-content {\n    border-radius: 0.75rem;\n    overflow: hidden;\n    padding: 0 !important;\n  }\n  .ant-modal-title {\n    font-family: ", ";\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  .ant-modal-title {\n    font-family: ", ";\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"])), MARK_PRO);
+var StyledModal$1 = function (props) {
+    return jsx(ModalOverrideBrandStylings, __assign({ closable: false }, props));
 };
+var templateObject_1$5;
+var useFocusFirstInput = function (_a) {
+    var firstInputRef = _a.firstInputRef, isVisible = _a.isVisible;
+    useEffect(function () {
+        var _a;
+        (_a = firstInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [isVisible, firstInputRef]);
+};
+var AcceptQuoteModal = function (_a) {
+    var acceptBoxVisible = _a.acceptBoxVisible, formattedQuote = _a.formattedQuote, sendAccept = _a.sendAccept, setAcceptBoxVisible = _a.setAcceptBoxVisible, setIsAccepting = _a.setIsAccepting;
+    // Refs
+    var firstInputRef = useRef(null);
+    // Hooks
+    var form = Form.useForm()[0];
+    useFocusFirstInput({ firstInputRef: firstInputRef, isVisible: acceptBoxVisible });
+    // Derived state
+    var poNumberRequired = formattedQuote.poNumberRequired, taxNumberRequired = formattedQuote.taxNumberRequired, taxNumberLabel = formattedQuote.taxNumberLabel;
+    var createRules = function (required, title) {
+        return required ? [{ required: true, message: "".concat(title, " is required") }] : [];
+    };
+    return (jsx(StyledModal$1, __assign({ centered: true, okText: "Accept", onCancel: function () {
+            setAcceptBoxVisible(false);
+            setIsAccepting(false);
+        }, onOk: function () {
+            form
+                .validateFields()
+                .then(function (changedFields) {
+                sendAccept(changedFields);
+            })
+                .catch(function () { });
+        }, open: acceptBoxVisible, title: "Accept quote", width: 400 }, { children: jsxs(Form, __assign({ className: "flex flex-col gap-2", form: form, layout: "vertical" }, { children: [jsx(Form.Item, __assign({ label: "Your name", name: "name", rules: createRules(true, "Your name") }, { children: jsx(Input, { autoFocus: true, ref: firstInputRef }) })), jsx(Form.Item, __assign({ label: "Your job title", name: "title", rules: createRules(true, "Your job title") }, { children: jsx(Input, {}) })), jsx(Form.Item, __assign({ label: "Purchase order number", name: "poNumber", rules: createRules(poNumberRequired, "Purchase order number") }, { children: jsx(Input, {}) })), taxNumberRequired && (jsx(Form.Item, __assign({ name: "taxNumber", label: taxNumberLabel, rules: createRules(taxNumberRequired, taxNumberLabel) }, { children: jsx(Input, {}) })))] })) })));
+};
+var DOCUMENT_NAME;
+(function (DOCUMENT_NAME) {
+    DOCUMENT_NAME["INVOICE"] = "invoice";
+    DOCUMENT_NAME["QUOTE"] = "quote";
+})(DOCUMENT_NAME || (DOCUMENT_NAME = {}));
 var documentName = DOCUMENT_NAME.QUOTE;
 function ActualQuote(_a) {
     var _b, _c;
-    var id = _a.id;
-    var _d = useContext(BunnyContext), token = _d.token, subdomain = _d.subdomain;
+    var id = _a.id, entityId = _a.entityId;
+    var _d = useContext(BunnyContext), token = _d.token, apiHost = _d.apiHost, onErrorNavigate = _d.onErrorNavigate;
     var entityBranding = useContext(BrandContext);
-    var isMobile = useIsMobile$1();
+    var isMobile = useIsMobile(window);
     // Queries
     var _e = useQuery({
         queryKey: QueryKeyFactory.default.createQuoteKey(token, id),
-        queryFn: function () { return getFormattedQuote({ token: token, subdomain: subdomain, id: id }); },
+        queryFn: function () { return getFormattedQuote({ token: token, apiHost: apiHost, id: id }); },
         placeholderData: keepPreviousData,
     }), data = _e.data, isLoading = _e.isLoading;
-    useQuery({
-        queryKey: QueryKeyFactory.default.currentUserKey,
-        queryFn: function () { return getCurrentUserData({ token: token, subdomain: subdomain }); },
-    });
     var formattedQuote = data;
     // Hooks
     var downloadFile = useDownloadFile(id);
     var isExpired = useIsExpired(formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.expiresAt);
-    var _f = useSendAcceptQuote(token, subdomain, 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;
+    var _f = useSendAcceptQuote({
+        entityId: entityId,
+        token: token,
+        onErrorNavigate: onErrorNavigate ||
+            (function (url) {
+                console.log("navigate to", url, " not implemented");
+            }),
+        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;
     useSigningComplete({ data: formattedQuote, token: token });
     if (!formattedQuote || isLoading) {
         return jsx(Fragment, {});
     }
-    return (jsxs(Fragment, { children: [jsxs(Helmet, { children: [jsxs("title", { children: [formattedQuote.vendorName, " ", documentName] }), jsx("meta", { name: "description", content: QuoteInvoiceUtils.quoteMetaDescription(formattedQuote.vendorName) }), jsx("meta", { property: "og:type", content: "website" }), jsx("meta", { property: "og:title", content: QuoteInvoiceUtils.quoteMetaTitle({
+    return (jsxs(Fragment, { children: [jsxs(Helmet, { children: [jsxs("title", { children: [formattedQuote.vendorName, " ", documentName] }), jsx("meta", { name: "description", content: quoteMetaDescription(formattedQuote.vendorName) }), jsx("meta", { property: "og:type", content: "website" }), jsx("meta", { property: "og:title", content: quoteMetaTitle({
                             vendorName: formattedQuote.vendorName,
                             documentName: documentName,
-                        }) }), jsx("meta", { property: "og:description", content: QuoteInvoiceUtils.quoteMetaDescription(formattedQuote.vendorName) })] }), jsxs("div", __assign({ className: "flex shadow-padding-x ".concat(isMobile ? "flex-col gap-1" : "items-center gap-2", " justify-end pb-4"), id: "acceptance", style: {
+                        }) }), jsx("meta", { property: "og:description", content: quoteMetaDescription(formattedQuote.vendorName) })] }), jsxs("div", __assign({ className: "flex shadow-padding-x ".concat(isMobile ? "flex-col gap-1" : "items-center gap-2", " justify-end pb-4"), id: "acceptance", style: {
                     color: entityBranding.secondaryColor,
                 } }, { children: [formattedQuote.state === "ACCEPTED" ||
                         formattedQuote.state === "APPLIED" ? (jsxs("div", { children: [formattedQuote.state === "ACCEPTED" &&
                                 formattedQuote.acceptedAt &&
-                                "Quote was accepted by ".concat(formattedQuote.acceptedByName, " on ").concat(Misc.formatDate(formattedQuote.acceptedAt)), formattedQuote.state === "APPLIED" &&
+                                "Quote was accepted by ".concat(formattedQuote.acceptedByName, " on ").concat(formatDate(formattedQuote.acceptedAt)), formattedQuote.state === "APPLIED" &&
                                 formattedQuote.acceptedAt &&
-                                "Quote is now applied. Accepted by ".concat(formattedQuote.acceptedByName, " on ").concat(Misc.formatDate(formattedQuote.acceptedAt))] })) : null, jsxs("div", __assign({ className: isMobile
+                                "Quote is now applied. Accepted by ".concat(formattedQuote.acceptedByName, " on ").concat(formatDate(formattedQuote.acceptedAt))] })) : null, jsxs("div", __assign({ className: isMobile
                             ? "flex w-full justify-between gap-2"
-                            : "flex items-center justify-end gap-2" }, { children: [!isMobile ? (jsx(Button, __assign({ icon: jsx(DownloadOutlined$1, {}), onClick: function () { return downloadFile(subdomain + "/api/pdf/quote", token); } }, { children: "Download" }))) : null, formattedQuote.state !== "ACCEPTED" &&
-                                formattedQuote.state !== "APPLIED" ? (jsx(Button, __assign({ disabled: isExpired || isAccepting, onClick: function () { return startAcceptance(); }, type: "primary" }, { children: isExpired ? "Quote is expired" : "Accept quote" }))) : null] }))] })), jsx("div", __assign({ className: "flex ".concat(isMobile ? "flex-col w-full overflow-hidden" : "shadow-padding-xb") }, { children: jsx(InvoiceQuoteView, __assign({ html: formattedQuote.html, isMobile: isMobile }, { children: ((_c = (_b = formattedQuote.object) === null || _b === void 0 ? void 0 : _b.documents) === null || _c === void 0 ? void 0 : _c.length) > 0 ? (jsx("div", __assign({ className: "flex flex-col items-end" }, { children: formattedQuote.object.documents.map(function (doc, index) {
+                            : "flex items-center justify-end gap-2" }, { children: [!isMobile ? (jsx(Button, __assign({ icon: jsx(DownloadOutlined$1, {}), onClick: function () { return downloadFile(apiHost + "/api/pdf/quote", token); } }, { children: "Download" }))) : null, formattedQuote.state !== "ACCEPTED" &&
+                                formattedQuote.state !== "APPLIED" ? (jsx(Button, __assign({ disabled: isExpired || isAccepting, onClick: function () { return startAcceptance(); }, type: "primary" }, { children: isExpired ? "Quote is expired" : "Accept quote" }))) : null] }))] })), jsx("div", __assign({ className: "flex ".concat(isMobile ? "flex-col w-full overflow-hidden" : "shadow-padding-xb") }, { children: 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 ? (jsx("div", __assign({ className: "flex flex-col items-end" }, { children: formattedQuote.object.documents.map(function (doc, index) {
                             return (jsx(Button, __assign({ download: doc.filename, href: doc.url, type: "link" }, { children: doc.filename }), index));
                         }) }))) : null })) })), jsx(AcceptQuoteModal, { acceptBoxVisible: acceptBoxVisible, formattedQuote: formattedQuote, setAcceptBoxVisible: setAcceptBoxVisible, setIsAccepting: setIsAccepting, sendAccept: sendAccept }), jsx(PandadocPollingModal, { isVisible: pandadocPollingModalVisible, setVisible: setPandadocPollingModalVisible, id: id })] }));
 }
-styled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  span {\n    width: 100%;\n  }\n"], ["\n  span {\n    width: 100%;\n  }\n"])));
+styled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  span {\n    width: 100%;\n  }\n"], ["\n  span {\n    width: 100%;\n  }\n"])));
 function Quote(_a) {
-    var id = _a.id;
-    return (jsx(HelmetProvider, { children: jsx(ActualQuote, { id: id }) }));
+    var entityId = _a.entityId, id = _a.id;
+    return (jsx(HelmetProvider, { children: jsx(ActualQuote, { entityId: entityId, id: id }) }));
 }
-var templateObject_1$5;
+var templateObject_1$4;
-var DrawerHeader = function (_a) {
-    var description = _a.description, onClose = _a.onClose, title = _a.title;
-    return (jsxs("div", __assign({ className: "flex flex-col gap-4" }, { children: [jsxs("div", __assign({ className: "flex items-center justify-between gap-2" }, { children: [jsx("div", __assign({ className: "text-xl" }, { children: title })), jsx("button", __assign({ onClick: onClose, className: "ant-drawer-close" }, { children: jsx(CloseOutlined$1, {}) }))] })), description && jsx("div", __assign({ className: "text-xs" }, { children: description }))] })));
+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*/, gqlRequest({
+                        query: QUOTES_QUERY(filter),
+                        token: token,
+                        vars: {},
+                        apiHost: apiHost,
+                    })];
+                case 1:
+                    response = _b.sent();
+                    return [2 /*return*/, response === null || response === void 0 ? void 0 : response.quotes];
+            }
+        });
+    });
 };
-var LargeCardIcon = function () {
-    return (jsx("svg", __assign({ width: "72", height: "56", viewBox: "0 0 72 56", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: jsx("path", { d: "M8 0H64C68.375 0 72 3.625 72 8V12H0V8C0 3.625 3.5 0 8 0ZM72 24V48C72 52.5 68.375 56 64 56H8C3.5 56 0 52.5 0 48V24H72ZM14 40C12.875 40 12 41 12 42C12 43.125 12.875 44 14 44H22C23 44 24 43.125 24 42C24 41 23 40 22 40H14ZM28 42C28 43.125 28.875 44 30 44H46C47 44 48 43.125 48 42C48 41 47 40 46 40H30C28.875 40 28 41 28 42Z", fill: "#E2E8F0" }) })));
+var transactionMutation = function (filter) { return "\nquery transactions {\n  transactions ".concat(filter ? "(".concat(filter, ")") : "", " {\n    nodes {\n      amount\n      createdAt\n      currencyId\n      description\n      id\n      kind\n      state\n      transactionableId\n      transactionable {\n        ...on Payment { amount }\n        ...on Invoice { amount number }\n      }\n    }\n  }\n}"); };
+var getTransactions = function (filter, token, apiHost, kindsToShow) { return __awaiter(void 0, void 0, void 0, function () {
+    var response, _a, data, errors, transactions;
+    var _b, _c;
+    return __generator(this, function (_d) {
+        switch (_d.label) {
+            case 0: return [4 /*yield*/, fetch(apiHost + "/graphql", {
+                    method: "POST",
+                    headers: {
+                        "Content-type": "application/json; charset=utf-8",
+                        Authorization: "Bearer ".concat(token),
+                    },
+                    body: JSON.stringify({
+                        query: transactionMutation(filter),
+                    }),
+                })];
+            case 1:
+                response = _d.sent();
+                return [4 /*yield*/, response.json()];
+            case 2:
+                _a = _d.sent(), data = _a.data, errors = _a.errors;
+                if (errors) {
+                    throw new Error(errors[0].message);
+                }
+                transactions = (_c = (_b = data === null || data === void 0 ? void 0 : data.transactions) === null || _b === void 0 ? void 0 : _b.nodes) === null || _c === void 0 ? void 0 : _c.filter(function (transaction) { return kindsToShow.includes(transaction.kind); });
+                return [2 /*return*/, transactions === null || transactions === void 0 ? void 0 : transactions.reverse()];
+        }
+    });
+}); };
+var Text$b = Typography.Text;
+var PageHeaderWithActions = function (_a) {
+    var children = _a.children, title = _a.title;
+    var isMobile = useIsMobile(window);
+    return (jsxs("div", __assign({ className: "flex pb-4 shadow-padding-x ".concat(isMobile ? "flex-col gap-2" : "items-center justify-between h-8") }, { children: [jsx(PageSubTitle, { title: title }), children] })));
+};
+var PageSubTitle = function (_a) {
+    var title = _a.title;
+    var secondaryColor = useContext(BrandContext).secondaryColor;
+    var darkMode = useContext(BunnyContext).darkMode;
+    return (jsx(Text$b, __assign({ className: "shrink-0 font-medium", style: { color: darkMode ? undefined : secondaryColor } }, { children: title })));
 };
-var PlusIcon = function (_a) {
-    var color = _a.color;
-    return (jsxs("svg", __assign({ width: "14", height: "15", viewBox: "0 0 14 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx("path", { d: "M2.9165 7.5H11.0832", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M7 3.41663V11.5833", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] })));
+var StateTag = function (_a) {
+    var state = _a.state;
+    return jsx(Tag, __assign({ color: getColor(state) }, { children: capitalize(startCase(state)) }));
+};
+var getColor = function (state) {
+    switch (state) {
+        case FrontendTransaction.TransactionState.not_due:
+            return "yellow";
+        case FrontendTransaction.TransactionState.voided:
+            return "black";
+        case FrontendTransaction.TransactionState.ready:
+            return "orange";
+        case FrontendTransaction.TransactionState.preparing:
+            return "purple";
+        case FrontendTransaction.TransactionState.unapplied:
+        case FrontendTransaction.TransactionState.partially_applied:
+        case FrontendTransaction.TransactionState.applied:
+            return "blue";
+        case FrontendTransaction.TransactionState.due:
+        case FrontendTransaction.TransactionState.unpaid:
+            return "orange";
+        case FrontendTransaction.TransactionState.failed:
+            return "red";
+        case FrontendTransaction.TransactionState.paid:
+            return "green";
+        default:
+            return "blue";
+    }
 };
-var PaymentMethodContext = createContext({});
+var TransactionsListContext = createContext({});
-var Card = function (_a) {
-    var children = _a.children, className = _a.className, style = _a.style;
-    var darkMode = useContext(BunnyContext).darkMode;
-    return (jsx("div", __assign({ className: "flex flex-col rounded-md shadow-md ".concat(className), style: __assign(__assign({}, style), { backgroundColor: darkMode
-                ? "var(--row-background-dark)"
-                : "var(--row-background)" }) }, { children: children })));
+var Text$a = Typography.Text;
+var TransactionDate = function (_a) {
+    var date = _a.date;
+    return jsx(Text$a, __assign({ className: "text-sm" }, { children: formatDate(date) }));
 };
-var Text$b = Typography.Text;
-var CreditCard = function (_a) {
-    var _b, _c, _d;
-    var onClickRemove = _a.onClickRemove, onClickUpdate = _a.onClickUpdate, paymentMethodData = _a.paymentMethodData;
-    var isExpired = function (paymentMethodData) {
-        // paymentMethodData.expirationDate
-        var expDate = dayjs(paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.expirationDate);
-        return expDate.isBefore(dayjs());
-    };
-    var isMobile = useIsMobile$1();
-    var processPublicUrl = useContext(PaymentMethodContext).processPublicUrl;
-    return (jsxs(Card, __assign({ className: "shadow-md m-0" }, { children: [jsxs("div", __assign({ className: "flex items-center justify-between gap-4 p-4" }, { children: [jsxs("div", __assign({ className: "flex items-center gap-4" }, { children: [jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [getCardImage((_b = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _b === void 0 ? void 0 : _b.issuer) && (jsx("img", { alt: "Card", width: "24px", src: "".concat(processPublicUrl, "/").concat(getCardImage((_c = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _c === void 0 ? void 0 : _c.issuer)) })), jsx(Text$b, { children: (_d = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _d === void 0 ? void 0 : _d.description })] })), jsx(Tag, __assign({ color: isExpired(paymentMethodData) ? "red" : "green" }, { children: isExpired(paymentMethodData) ? "Expired" : "Valid" }))] })), !isMobile && (jsx(CardActions, { onClickRemove: onClickRemove, onClickUpdate: onClickUpdate }))] })), dayjs(paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.expirationDate).isValid() && (jsxs(Fragment, { children: [jsx(Divider, {}), jsxs("div", __assign({ className: "flex flex-col p-4" }, { children: [jsx(CardAttribute, { title: "EXPIRATION", value: dayjs(paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.expirationDate).format("MM/YY") }), isMobile && (jsx(CardActions, { onClickRemove: onClickRemove, onClickUpdate: onClickUpdate }))] }))] }))] })));
+// TODO: delete
+var ArrowDownToLine = function (_a) {
+    var className = _a.className, _b = _a.color, color = _b === void 0 ? SLATE_600 : _b;
+    return (jsxs("svg", __assign({ className: className, fill: "none", height: "16", viewBox: "0 0 16 16", width: "16", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx("path", { d: "M8 11.3333V2", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M4 7.33301L8 11.333L12 7.33301", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M12.6654 14H3.33203", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] })));
 };
-var CardAttribute = function (_a) {
-    var title = _a.title, value = _a.value;
-    return (jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsx("div", __assign({ className: "text-slate-400", style: { fontSize: "11px" } }, { children: title })), jsx(Text$b, { children: value })] })));
+var TransactionDownload = function (_a) {
+    var transaction = _a.transaction, token = _a.token, apiHost = _a.apiHost;
+    var darkMode = useContext(BunnyContext).darkMode;
+    var downloadTransactionLink = useContext(TransactionsListContext).downloadTransactionLink;
+    var downloadFile = useDownloadFile();
+    var isMobile = useIsMobile(window);
+    var isClickable = transaction.kind === "INVOICE" || downloadTransactionLink !== undefined;
+    var downloadLink = downloadTransactionLink
+        ? downloadTransactionLink(transaction.transactionableId)
+        : "".concat(apiHost, "/api/pdf/invoice/").concat(transaction.transactionableId);
+    if (!isClickable)
+        return null;
+    return (jsx("div", __assign({ onClick: function (e) {
+            e.stopPropagation();
+            downloadFile(downloadLink, token);
+        } }, { children: jsx(ArrowDownToLine, { className: "".concat(isMobile ? "" : "show-on-hover"), color: darkMode ? WHITE : SLATE_600 }) })));
 };
-var CardActions = function (_a) {
-    var onClickRemove = _a.onClickRemove, onClickUpdate = _a.onClickUpdate;
-    var isMobile = useIsMobile$1();
-    return (jsxs("div", __assign({ className: "flex items-center gap-6 ".concat(isMobile ? "justify-center mt-4" : "") }, { children: [jsx(Popconfirm, __assign({ title: "Remove card?", onConfirm: onClickRemove }, { children: jsx(Button, __assign({ className: "font-normal p-0", type: "link" }, { children: "Remove payment method" })) })), jsx(Divider, { style: { height: "24px" }, type: "vertical" }), jsx(Button, __assign({ onClick: onClickUpdate, type: "primary" }, { children: "Update" }))] })));
+var TransactionGridCell = styled.div.withConfig({
+    shouldForwardProp: function (prop) {
+        return !["gridColumn", "padding", "right"].includes(prop);
+    },
+})(templateObject_1$3 || (templateObject_1$3 = __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"); }, SLATE_600);
+var templateObject_1$3;
+var Text$9 = Typography.Text;
+var TransactionsEmptyState = function () {
+    var noTransactionsMessage = useContext(TransactionsListContext).noTransactionsMessage;
+    return (jsx(Text$9, __assign({ className: "flex justify-center p-4 text-base" }, { children: noTransactionsMessage || "There are no transactions" })));
 };
-var EmptyCard = function (_a) {
-    var onClick = _a.onClick;
-    var brandColor = useContext(BrandContext).brandColor;
-    return (jsxs("div", __assign({ className: "flex flex-col items-center justify-center w-full pt-8 px-4 pb-6 cursor-pointer bg-white shadow-md rounded-md", onClick: onClick }, { children: [jsx(LargeCardIcon, {}), jsx("div", __assign({ className: "text-slate-400 pt-4 pb-8" }, { children: "No payment methods" })), jsx(Button, __assign({ type: "link" }, { children: jsxs("div", __assign({ className: "flex items-center gap-1" }, { children: [jsx(PlusIcon, { color: brandColor }), "Add payment method"] })) }))] })));
+var isInvoice = function (transaction) {
+    return transaction.kind === "INVOICE";
 };
-var getCardImage = function (issuer) {
-    if (issuer === "visa")
-        return "Visa_Brandmark_Blue_RGB_2021.png";
-    else if (issuer === "mastercard")
-        return "mc_symbol_opt_73_3x.png";
+var isQuote = function (transaction) {
+    return transaction.kind === "QUOTE";
+};
+var TransactionRowTitle = function (_a) {
+    var transaction = _a.transaction;
+    if (!isInvoice(transaction) && !isQuote(transaction)) {
+        return jsx(Fragment, {});
+    }
+    return (jsx("span", __assign({ className: "text-slate-400", style: { fontSize: "11px" } }, { children: transaction.transactionable.number })));
 };
-var ActualPaymentMethod = function () {
-    var _a = useContext(BunnyContext), token = _a.token, subdomain = _a.subdomain, graphQLClient = _a.graphQLClient;
-    var accountId = useContext(PaymentContext).accountId;
-    // Hooks
-    var queryClient = useQueryClient();
-    var paymentPlugins = usePaymentPlugins({ subdomain: subdomain, token: token }).paymentPlugins;
-    var showErrorNotification = NotificationUtils.useErrorNotification();
-    var showSuccessNotification = NotificationUtils.useSuccessNotification();
-    var handleAllErrorFormats = NotificationUtils.useAllErrorFormats(function () {
-        console.log("Navigation in PaymentMethod.tsx useAllErrorFormats not implemented");
+var Text$8 = Typography.Text;
+var TransactionsListDesktop = function (_a) {
+    var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
+    var columns = useContext(TransactionsListContext).columns;
+    var _b = useContext(BunnyContext), token = _b.token, apiHost = _b.apiHost, darkMode = _b.darkMode;
+    var showAmount = columns.includes("amount");
+    var showDateAndTitle = columns.includes("date-and-title");
+    var showDownload = columns.includes("download");
+    var showState = columns.includes("state");
+    if ((transactions === null || transactions === void 0 ? void 0 : transactions.length) === 0)
+        return jsx(TransactionsEmptyState, {});
+    return transactions === null || transactions === void 0 ? void 0 : transactions.map(function (transaction, index) {
+        var _a;
+        var isClickable = onTransactionClick !== undefined;
+        return (jsxs("div", __assign({ className: "contents ".concat(isClickable && "cursor-pointer", " show-on-hover-container"), onClick: function () {
+                onTransactionClick === null || onTransactionClick === void 0 ? void 0 : onTransactionClick(transaction);
+            }, style: {
+                backgroundColor: index % 2 === 0
+                    ? "var(--row-background".concat(darkMode ? "-dark" : "", ")")
+                    : "var(--row-background-alternate".concat(darkMode ? "-dark" : "", ")"),
+            } }, { children: [showDateAndTitle && (jsxs(Fragment, { children: [jsx(TransactionGridCell, __assign({ right: false }, { children: jsx(TransactionDate, { date: transaction.createdAt }) })), jsxs(TransactionGridCell, __assign({ right: false, className: "flex items-center gap-2" }, { children: [jsx(Text$8, { children: capitalize(transaction.kind.toLowerCase()) }), jsx(TransactionRowTitle, { transaction: transaction })] }))] })), showDownload && (jsx(TransactionGridCell, { children: jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })), showState && (jsx(TransactionGridCell, __assign({ right: true }, { children: jsx(StateTag, { state: transaction.state }) }))), showAmount && (jsx(TransactionGridCell, __assign({ right: true }, { children: jsx(Text$8, { children: formatCurrency(((_a = transaction === null || transaction === void 0 ? void 0 : transaction.transactionable) === null || _a === void 0 ? void 0 : _a.amount) || transaction.amount, transaction.currencyId) }) })))] }), index));
     });
-    var isMobile = useIsMobile$1();
-    var data = usePaymentMethod(graphQLClient).data;
-    // Local state
-    var _b = useState(false), showModal = _b[0], setShowModal = _b[1];
-    var _c = useState(false), isSaving = _c[0], setIsSaving = _c[1];
-    // Queries
-    useQuery({
-        queryKey: QueryKeyFactory.default.currentUserKey,
-        queryFn: function () { return getCurrentUserData({ token: token, subdomain: subdomain }); },
+};
+var Text$7 = Typography.Text;
+var TransactionsListMobile = function (_a) {
+    var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
+    var columns = useContext(TransactionsListContext).columns;
+    var _b = useContext(BunnyContext), token = _b.token, apiHost = _b.apiHost, darkMode = _b.darkMode;
+    var showAmount = columns.includes("amount");
+    var showDateAndTitle = columns.includes("date-and-title");
+    var showDownload = columns.includes("download");
+    var showState = columns.includes("state");
+    if ((transactions === null || transactions === void 0 ? void 0 : transactions.length) === 0)
+        return jsx(TransactionsEmptyState, {});
+    return transactions === null || transactions === void 0 ? void 0 : transactions.map(function (transaction, index) {
+        var isClickable = transaction.kind === "INVOICE";
+        return (jsxs("div", __assign({ className: "contents ".concat(isClickable && "cursor-pointer", " show-on-hover-container"), onClick: function () {
+                onTransactionClick(transaction);
+            }, style: {
+                backgroundColor: index % 2 === 0
+                    ? "var(--row-background".concat(darkMode ? "-dark" : "", ")")
+                    : "var(--row-background-alternate".concat(darkMode ? "-dark" : "", ")"),
+            } }, { children: [jsx(TransactionGridCell, { children: jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [showDateAndTitle && (jsxs(Fragment, { children: [jsx(Text$7, { children: capitalize(transaction.kind.toLowerCase()) }), jsx(TransactionRowTitle, { transaction: transaction })] })), showState && jsx(StateTag, { state: transaction.state })] })), jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [showDateAndTitle && (jsx(TransactionDate, { date: transaction.createdAt })), showAmount && showDateAndTitle && jsx(Text$7, { children: "\u00B7" }), showAmount && (jsx(Text$7, { children: formatCurrency(transaction.transactionable.amount || transaction.amount, transaction.currencyId) }))] }))] })) }), showDownload && (jsx(TransactionGridCell, __assign({ right: true }, { children: jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })))] }), index));
     });
-    var plugin = paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.find(function (paymentPlugin) { var _a; return String(paymentPlugin.id) === ((_a = data === null || data === void 0 ? void 0 : data.plugin) === null || _a === void 0 ? void 0 : _a.id); });
-    var onClickRemove = function () {
-        if (data && plugin) {
-            invokePlugin({
-                plugin: plugin,
+};
+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.columns, columns = _d === void 0 ? ["date-and-title", "state", "amount"] : _d, className = _a.className, _e = _a.shadow, shadow = _e === void 0 ? "md" : _e, searchBarClassName = _a.searchBarClassName, _f = _a.useModal, useModal = _f === void 0 ? false : _f, onTransactionClick = _a.onTransactionClick, _g = _a.suppressTransactionDisplay, suppressTransactionDisplay = _g === void 0 ? false : _g, _h = _a.kindsToShow, kindsToShow = _h === void 0 ? [
+        TransactionKind.INVOICE,
+        TransactionKind.PAYMENT,
+        TransactionKind.REFUND,
+        TransactionKind.WRITE_OFF,
+    ] : _h, style = _a.style, filter = _a.filter, noTransactionsMessage = _a.noTransactionsMessage, entityId = _a.entityId;
+    var contextValues = {
+        showSearchBar: showSearchBar,
+        showTitle: showTitle,
+        transactionComponent: transactionComponent,
+        columns: columns,
+        className: className,
+        searchBarClassName: searchBarClassName,
+        shadow: shadow,
+        useModal: useModal,
+        onTransactionClick: onTransactionClick,
+        suppressTransactionDisplay: suppressTransactionDisplay,
+        kindsToShow: kindsToShow,
+        style: style,
+        filter: filter,
+        noTransactionsMessage: noTransactionsMessage,
+        entityId: entityId,
+    };
+    return (jsx(TransactionsListContext.Provider, __assign({ value: contextValues }, { children: jsx(TransactionsWrapper, {}) })));
+}
+function TransactionsWrapper() {
+    var _a = useContext(TransactionsListContext), kindsToShow = _a.kindsToShow, filterFromContext = _a.filter;
+    var _b = useContext(BunnyContext), token = _b.token, apiHost = _b.apiHost;
+    // Local state
+    var _c = useState(""), search = _c[0], setSearch = _c[1];
+    var filter = filterFromContext ||
+        (search ? "filter: \"transaction.transactionableId is ".concat(search, "\"") : "");
+    // Queries
+    var data = useQuery({
+        queryKey: ["transactions", token, filter],
+        queryFn: function () { return getTransactions(filter, token, apiHost, kindsToShow); },
+        placeholderData: keepPreviousData,
+    }).data;
+    return (jsx(TransactionsDisplay, { transactions: data, onSearchValueChanged: setSearch, search: search }));
+}
+function TransactionsDisplay(_a) {
+    var transactions = _a.transactions, onSearchValueChanged = _a.onSearchValueChanged, search = _a.search, title = _a.title;
+    var _b = useContext(TransactionsListContext), showSearchBar = _b.showSearchBar, showTitle = _b.showTitle, transactionComponent = _b.transactionComponent, useModal = _b.useModal, suppressTransactionDisplay = _b.suppressTransactionDisplay, className = _b.className, shadow = _b.shadow, searchBarClassName = _b.searchBarClassName, style = _b.style, onTransactionClick = _b.onTransactionClick, entityId = _b.entityId;
+    var columns = useContext(TransactionsListContext).columns;
+    var darkMode = useContext(BunnyContext).darkMode;
+    // Local state
+    var _c = useState(null), selectedTransaction = _c[0], setSelectedTransaction = _c[1];
+    var _d = useState(false), drawerOpen = _d[0], setDrawerOpen = _d[1];
+    // Hooks
+    var isMobile = useIsMobile(window);
+    function handleTransactionClick(transaction) {
+        if (onTransactionClick) {
+            onTransactionClick(transaction);
+        }
+        if (!suppressTransactionDisplay) {
+            setSelectedTransaction(transaction);
+            setDrawerOpen(true);
+        }
+    }
+    // Since the columns are dynamic, we need to calculate the grid template columns
+    var gridTemplateColumns = function () {
+        var templateColumns = [];
+        if (isMobile) {
+            if (columns.includes("date-and-title") ||
+                columns.includes("state") ||
+                columns.includes("amount")) {
+                templateColumns.push("auto");
+            }
+            if (columns.includes("download")) {
+                templateColumns.push("auto");
+            }
+        }
+        else {
+            if (columns.includes("date-and-title")) {
+                templateColumns.push("auto 3fr");
+            }
+            if (columns.includes("download")) {
+                templateColumns.push("auto");
+            }
+            if (columns.includes("state")) {
+                templateColumns.push("auto");
+            }
+            if (columns.includes("amount")) {
+                templateColumns.push("auto");
+            }
+        }
+        return templateColumns.join(" ");
+    };
+    var drawerTitle = function () {
+        if (!selectedTransaction)
+            return "";
+        var kind = selectedTransaction.kind.toLowerCase();
+        return kind.charAt(0).toUpperCase() + kind.slice(1);
+    };
+    return (jsxs("div", __assign({ style: style }, { children: [jsx(PageHeaderWithActions, __assign({ title: title || (showTitle ? "Past transactions" : undefined) }, { children: showSearchBar && (jsx("div", { children: jsx(Input, { className: searchBarClassName
+                            ? searchBarClassName
+                            : "border border-slate-200", onChange: function (e) {
+                            if (isNaN(Number(e.target.value))) {
+                                return;
+                            }
+                            onSearchValueChanged(e.target.value);
+                        }, prefix: jsx(SearchOutlined$1, {}), placeholder: "Search by id #", style: {
+                            minWidth: "300px",
+                        }, value: search }) })) })), jsx("div", __assign({ className: "flex w-full shadow-padding-xb ".concat(isMobile ? "overflow-hidden" : "", " ").concat(className) }, { children: jsx("div", __assign({ className: "grid w-full rounded-md overflow-auto ".concat("shadow-".concat(shadow)), style: {
+                        gridTemplateColumns: gridTemplateColumns(),
+                        backgroundColor: "var(--row-background".concat(darkMode ? "-dark" : "", ")"),
+                    } }, { children: isMobile ? (jsx(Fragment, { children: TransactionsListMobile({
+                            transactions: transactions,
+                            onTransactionClick: handleTransactionClick,
+                        }) })) : (jsx(Fragment, { children: TransactionsListDesktop({
+                            transactions: transactions,
+                            onTransactionClick: handleTransactionClick,
+                        }) })) })) })), useModal ? (jsx(Modal, __assign({ title: "Basic Modal", open: drawerOpen, onOk: function () { return setDrawerOpen(false); }, onCancel: function () { return setDrawerOpen(false); }, width: 900, footer: null }, { children: jsx(Invoice, { id: (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.transactionableId) || "", entityId: entityId }) }))) : (jsx(Drawer, __assign({ title: drawerTitle(), onClose: function () { return setDrawerOpen(false); }, open: drawerOpen, width: 900 }, { children: transactionComponent ? (transactionComponent) : (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.kind) === "INVOICE" ? (jsx(Invoice, { id: selectedTransaction.transactionableId, entityId: entityId })) : (jsxs(Card$1, __assign({ className: "shadow-md" }, { children: [jsx(Typography.Title, __assign({ level: 2, className: "mb-4" }, { children: "Transaction Details" })), jsxs(Typography.Paragraph, { children: [jsx("strong", { children: "Amount:" }), " ", jsx(Typography.Text, { children: formatCurrency((selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.amount) || 0, (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.currencyId) || "USD") })] }), jsxs(Typography.Paragraph, { children: [jsx("strong", { children: "Description:" }), " ", jsx(Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.description })] }), jsxs(Typography.Paragraph, { children: [jsx("strong", { children: "Kind:" }), " ", jsx(Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.kind })] }), jsxs(Typography.Paragraph, { children: [jsx("strong", { children: "State:" }), " ", jsx(Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.state })] })] }))) })))] })));
+}
+function Quotes(_a) {
+    var className = _a.className, _b = _a.columns, columns = _b === void 0 ? ["date-and-title", "amount", "download"] : _b, entityId = _a.entityId, filter = _a.filter, _c = _a.noQuotesMessage, noQuotesMessage = _c === void 0 ? "There are no quotes" : _c; _a.onQuoteClick; var quoteComponent = _a.quoteComponent, searchBarClassName = _a.searchBarClassName, _d = _a.shadow, shadow = _d === void 0 ? "md" : _d, _e = _a.showSearchBar, showSearchBar = _e === void 0 ? true : _e, _f = _a.showTitle, showTitle = _f === void 0 ? true : _f, style = _a.style, _g = _a.suppressQuoteDisplay, suppressQuoteDisplay = _g === void 0 ? false : _g, _h = _a.useModal, useModal = _h === void 0 ? false : _h;
+    var apiHost = useContext(BunnyContext).apiHost;
+    var _j = useState(null), component = _j[0], setComponent = _j[1];
+    var contextValues = {
+        columns: columns,
+        kindsToShow: [],
+        onTransactionClick: handleQuoteClick,
+        transactionComponent: component,
+        showSearchBar: showSearchBar,
+        showTitle: showTitle,
+        className: className,
+        shadow: shadow,
+        searchBarClassName: searchBarClassName,
+        useModal: useModal,
+        suppressTransactionDisplay: suppressQuoteDisplay,
+        style: style,
+        noTransactionsMessage: noQuotesMessage,
+        filter: filter,
+        downloadTransactionLink: function (id) { return "".concat(apiHost, "/api/pdf/quote/").concat(id); },
+        entityId: entityId,
+    };
+    function handleQuoteClick(quote) {
+        if (quoteComponent) {
+            setComponent(quoteComponent);
+        }
+        else {
+            setComponent(jsx(Quote, { entityId: entityId, id: quote === null || quote === void 0 ? void 0 : quote.transactionableId }));
+        }
+    }
+    return (jsx(TransactionsListContext.Provider, __assign({ value: contextValues }, { children: jsx(QuotesWrapper, {}) })));
+}
+function QuotesWrapper() {
+    var _a = useContext(BunnyContext), token = _a.token, apiHost = _a.apiHost;
+    var filterFromContext = useContext(TransactionsListContext).filter;
+    // Local state
+    var _b = useState(""), search = _b[0], setSearch = _b[1];
+    var filter = filterFromContext || (search ? "filter: \"quote.id is ".concat(search, "\"") : "");
+    // Queries
+    var data = useQuery({
+        queryKey: ["quotes", token, filter],
+        queryFn: function () { return getQuotes({ token: token, apiHost: apiHost, filter: filter }); },
+        placeholderData: keepPreviousData,
+    }).data;
+    if (data === undefined)
+        return null;
+    var quotesAsTransactions = data.nodes.map(function (quote) { return ({
+        transactionableId: quote.id,
+        state: "unapplied",
+        amount: quote.amount || quote.amountDue,
+        kind: "QUOTE",
+        currencyId: quote.currencyId,
+        transactionable: {
+            number: quote.number,
+        },
+        createdAt: quote.createdAt,
+    }); });
+    return (jsx(TransactionsDisplay, { transactions: quotesAsTransactions, onSearchValueChanged: setSearch, search: search, title: "Past quotes" }));
+}
+var css_248z = ".ant-tag {\n  border: none;\n  border-radius: 14px;\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n  font-weight: 500;\n  white-space: nowrap;\n  margin: 0;\n}\n.ant-tag-blue {\n  color: #3b82f6 !important;\n  background: #bfdbfe !important;\n}\n.ant-tag-green {\n  color: #059669 !important;\n  background: #a7f3d0 !important;\n}\n.ant-tag-red {\n  color: #ef4444 !important;\n  background: #fecaca !important;\n}\n.ant-tag-orange {\n  color: #f97316 !important;\n  background: #fed7aa !important;\n}\n.ant-tag-yellow {\n  color: #f59e0b !important;\n  background: #fde68a !important;\n}\n.ant-tag-purple {\n  color: #8b5cf6 !important;\n  background: #ddd6fe !important;\n}\n.ant-tag-black {\n  color: white !important;\n  background: black !important;\n}\n.ant-popover {\n  z-index: 1050;\n}\n.ant-popover-inner-content {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  max-width: 300px;\n}\n.ant-popover-message-title {\n  padding: 0;\n  text-align: center;\n  font-size: 1rem;\n}\n.ant-popover-buttons {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.ant-btn-primary:disabled {\n  background: #eef0f2 !important;\n  color: rgba(0, 0, 0, 0.25) !important;\n  border: none;\n}\n.ant-btn {\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n  font-weight: 500;\n  box-shadow: none;\n  text-shadow: none;\n  outline: none !important;\n  line-height: 1;\n  font-size: 0.875rem;\n  font-weight: normal;\n}\n.ant-btn > span {\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n}\n.ant-btn-lg {\n  height: 44px !important;\n}\n.ant-btn-default:disabled {\n  border-color: rgba(113, 125, 148, 0.2) !important;\n}\n.ant-btn-link {\n  border: none !important;\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n}\n.ant-btn-link > span {\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n}\n.ant-btn-link:disabled {\n  background-color: transparent !important;\n  color: #717d94 !important;\n}\n.ant-btn-link:disabled:hover {\n  background-color: transparent !important;\n}\n.ant-input-affix-wrapper .ant-input-prefix {\n  transition: color 0.3s;\n}\n.ant-select-selector {\n  box-shadow: none !important;\n  background-color: transparent !important;\n  border: none !important;\n}\n.ant-form-item-label {\n  text-transform: none !important;\n  font-size: 0.75rem;\n  padding-bottom: 2px !important;\n}\n.ant-form-item-label > label {\n  width: 100%;\n  color: #4b5563 !important;\n}\n.ant-form-item-explain-error {\n  font-size: 11px;\n  min-height: 11px;\n  line-height: 11px;\n  padding-top: 2px;\n}\n.ant-form-item {\n  margin-bottom: 0;\n}\n.ant-notification {\n  width: min-content;\n}\n.ant-notification-topRight {\n  right: 0 !important;\n  left: 0 !important;\n  margin-left: auto !important;\n  margin-right: auto !important;\n}\n.ant-notification-notice-wrapper {\n  width: 350px !important;\n  overflow: hidden !important;\n}\n.ant-notification-notice {\n  padding: 16px !important;\n  width: 350px !important;\n  display: flex !important;\n  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.08), 0px 1px 18px rgba(0, 0, 0, 0.08), 0px 3px 5px rgba(0, 0, 0, 0.16) !important;\n}\n.ant-notification-notice-description {\n  padding: 0 14px 0 0 !important;\n  color: #232323 !important;\n  font-size: 14px !important;\n  word-break: break-all !important;\n  overflow-wrap: break-word !important;\n}\n.ant-notification-notice-success {\n  background-color: #edfffa !important;\n}\n.ant-notification-notice-error {\n  background-color: #fff8f4 !important;\n}\n.ant-notification-notice-error .ant-notification-notice-message {\n  color: #ff6e1c !important;\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !important;\n  font-weight: 500;\n}\n.ant-notification-notice-error .ant-notification-notice-icon {\n  color: #ff6e1c;\n}\n.ant-notification-notice-success .ant-notification-notice-message {\n  color: #00b76a !important;\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !important;\n  font-weight: 500;\n}\n.ant-notification-notice-success .ant-notification-notice-icon {\n  color: #00b76a !important;\n}\n.ant-notification-notice-message {\n  margin-bottom: 0 !important;\n}\n.ant-notification-notice-close {\n  top: 16px !important;\n  right: 16px !important;\n}\n.ant-divider {\n  margin: 0;\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.ant-drawer-title {\n  font-weight: 400 !important;\n}\n.ant-drawer-header-title {\n  flex-direction: row-reverse !important;\n  align-items: start !important ;\n}\n.ant-drawer-close {\n  margin-inline-end: 0 !important;\n}\n@media (min-width: 768px) {\n  .ant-input,\n  .ant-picker,\n  .ant-select,\n  .ant-input-affix-wrapper {\n    font-size: 1rem !important;\n  }\n  .ant-drawer-header {\n    padding-right: 1.5rem !important;\n    padding-left: 1.5rem !important;\n  }\n}\n:root {\n  --row-background: #ffffff;\n  --row-background-alternate: rgba(100, 116, 139, 0.04);\n  --row-background-dark: #121212;\n  --row-background-alternate-dark: #1e1e1e;\n}\n.plan-step-line {\n  height: 1px;\n  min-width: 128px;\n  background: #717d94;\n}\n.plan-step-number {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 9999px;\n  border: 1px solid #717d94;\n  background: white;\n  width: 24px;\n  height: 24px;\n  color: #717d94;\n}\n.plan-step-number.active {\n  border: none;\n  color: white;\n  background: #ff6e1c;\n}\n.hidden {\n  display: none;\n}\n.cardElement {\n  padding: 8px 11px;\n  border: 1px solid #e5e7eb;\n  background-color: white;\n  font-family: Inter !important;\n}\n.tooltip {\n  visibility: hidden;\n  position: absolute !important;\n}\n.has-tooltip:hover .tooltip {\n  visibility: visible;\n  z-index: 100;\n}\n.show-on-hover {\n  opacity: 0;\n}\n.show-on-hover-container:hover .show-on-hover {\n  opacity: 1;\n}\n.pdf-only {\n  display: none !important;\n}\n.notes p {\n  margin: 0;\n  padding: 0;\n  padding-bottom: 0.25rem;\n}\n#form-element #finix-form-container .field-holder label {\n  color: #717d94 !important;\n  font-size: 12px !important;\n}\n#form-element #finix-form-container > *:first-child,\n#form-element #finix-form-container > *:last-child {\n  margin-top: 0 !important;\n}\n#form-element #finix-form-container > *:not(:first-child):not(:last-child) {\n  margin-top: 12px !important;\n}\n#form-element #finix-form-container .field-array > * {\n  margin-top: 0 !important;\n}\n#form-element #finix-form-container .field-holder .field,\n#form-element #finix-form-container iframe {\n  height: 34px !important;\n}\n#form-element #finix-form-container .field {\n  margin-top: 0 !important;\n  padding-top: 2px !important;\n}\n#form-element #finix-form-container .field-holder .validation {\n  font-size: 11px !important;\n  color: #ff4d4f !important;\n}\n.icon-path {\n  transition: fill 0.3s;\n}\n.shadow-padding-x {\n  padding-right: 1rem;\n  padding-left: 1rem;\n}\n.shadow-padding-xb {\n  padding-right: 1rem;\n  padding-left: 1rem;\n  padding-bottom: 0.5rem;\n}\n.content-container {\n  width: 100%;\n  margin: 0 auto;\n}\n@media (min-width: 1220px) {\n  .content-container {\n    width: 1220px !important;\n    margin: 0 auto;\n  }\n}\n@media (min-width: 768px) {\n  .shadow-padding-x {\n    padding-right: 2rem;\n    padding-left: 2rem;\n  }\n  .shadow-padding-xb {\n    padding-right: 2rem;\n    padding-left: 2rem;\n    padding-bottom: 0.5rem;\n  }\n  .sm\\:flex {\n    display: flex !important;\n  }\n  .sm\\:hidden {\n    display: none !important;\n  }\n}\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box !important;\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n  line-height: 1.15;\n}\nbody {\n  color: #232323;\n  background-color: #f8fafc;\n}\nth {\n  font-weight: normal;\n}\ncode {\n  font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\", monospace;\n}\n@media only screen and (max-width: 768px) {\n  select,\n  textarea,\n  input[type=\"text\"],\n  input[type=\"password\"],\n  input[type=\"datetime\"],\n  input[type=\"datetime-local\"],\n  input[type=\"date\"],\n  input[type=\"month\"],\n  input[type=\"time\"],\n  input[type=\"week\"],\n  input[type=\"number\"],\n  input[type=\"email\"],\n  input[type=\"url\"],\n  input[type=\"search\"],\n  input[type=\"tel\"],\n  input[type=\"color\"] {\n    font-size: 16px !important;\n  }\n}\n@keyframes App-logo-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n";
+styleInject(css_248z);
+var DrawerHeader = function (_a) {
+    var description = _a.description, onClose = _a.onClose, title = _a.title;
+    return (jsxs("div", __assign({ className: "flex flex-col gap-4" }, { children: [jsxs("div", __assign({ className: "flex items-center justify-between gap-2" }, { children: [jsx("div", __assign({ className: "text-xl" }, { children: title })), jsx("button", __assign({ onClick: onClose, className: "ant-drawer-close" }, { children: jsx(CloseOutlined$1, {}) }))] })), description && jsx("div", __assign({ className: "text-xs" }, { children: description }))] })));
+};
+var Card = function (_a) {
+    var children = _a.children, className = _a.className, style = _a.style;
+    var darkMode = useContext(BunnyContext).darkMode;
+    return (jsx("div", __assign({ className: "flex flex-col rounded-md shadow-md ".concat(className), style: __assign(__assign({}, style), { backgroundColor: darkMode
+                ? "var(--row-background-dark)"
+                : "var(--row-background)" }) }, { children: children })));
+};
+var LargeCardIcon = function () {
+    return (jsx("svg", __assign({ width: "72", height: "56", viewBox: "0 0 72 56", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: jsx("path", { d: "M8 0H64C68.375 0 72 3.625 72 8V12H0V8C0 3.625 3.5 0 8 0ZM72 24V48C72 52.5 68.375 56 64 56H8C3.5 56 0 52.5 0 48V24H72ZM14 40C12.875 40 12 41 12 42C12 43.125 12.875 44 14 44H22C23 44 24 43.125 24 42C24 41 23 40 22 40H14ZM28 42C28 43.125 28.875 44 30 44H46C47 44 48 43.125 48 42C48 41 47 40 46 40H30C28.875 40 28 41 28 42Z", fill: "#E2E8F0" }) })));
+};
+var PlusIcon = function (_a) {
+    var color = _a.color;
+    return (jsxs("svg", __assign({ width: "14", height: "15", viewBox: "0 0 14 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx("path", { d: "M2.9165 7.5H11.0832", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M7 3.41663V11.5833", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] })));
+};
+var Text$6 = Typography.Text;
+var CreditCard = function (_a) {
+    var _b, _c, _d;
+    var onClickRemove = _a.onClickRemove, onClickUpdate = _a.onClickUpdate, paymentMethodData = _a.paymentMethodData;
+    var isExpired = function (paymentMethodData) {
+        // paymentMethodData.expirationDate
+        var expDate = dayjs(paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.expirationDate);
+        return expDate.isBefore(dayjs());
+    };
+    var isMobile = useIsMobile(window);
+    var apiHost = useContext(BunnyContext).apiHost;
+    return (jsxs(Card, __assign({ className: "shadow-md m-0" }, { children: [jsxs("div", __assign({ className: "flex items-center justify-between gap-4 p-4" }, { children: [jsxs("div", __assign({ className: "flex items-center gap-4" }, { children: [jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [getCardImage((_b = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _b === void 0 ? void 0 : _b.issuer) && (jsx("img", { alt: "Card", width: "24px", src: "".concat(apiHost, "/portal/").concat(getCardImage((_c = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _c === void 0 ? void 0 : _c.issuer)) })), jsx(Text$6, { children: (_d = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _d === void 0 ? void 0 : _d.description })] })), jsx(Tag, __assign({ color: isExpired(paymentMethodData) ? "red" : "green" }, { children: isExpired(paymentMethodData) ? "Expired" : "Valid" }))] })), !isMobile && (jsx(CardActions, { onClickRemove: onClickRemove, onClickUpdate: onClickUpdate }))] })), dayjs(paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.expirationDate).isValid() && (jsxs(Fragment, { children: [jsx(Divider, {}), jsxs("div", __assign({ className: "flex flex-col p-4" }, { children: [jsx(CardAttribute, { title: "EXPIRATION", value: dayjs(paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.expirationDate).format("MM/YY") }), isMobile && (jsx(CardActions, { onClickRemove: onClickRemove, onClickUpdate: onClickUpdate }))] }))] }))] })));
+};
+var CardAttribute = function (_a) {
+    var title = _a.title, value = _a.value;
+    return (jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsx("div", __assign({ className: "text-slate-400", style: { fontSize: "11px" } }, { children: title })), jsx(Text$6, { children: value })] })));
+};
+var CardActions = function (_a) {
+    var onClickRemove = _a.onClickRemove, onClickUpdate = _a.onClickUpdate;
+    var isMobile = useIsMobile(window);
+    return (jsxs("div", __assign({ className: "flex items-center gap-6 ".concat(isMobile ? "justify-center mt-4" : "") }, { children: [jsx(Popconfirm, __assign({ title: "Remove card?", onConfirm: onClickRemove }, { children: jsx(Button, __assign({ className: "font-normal p-0", type: "link" }, { children: "Remove payment method" })) })), jsx(Divider, { style: { height: "24px" }, type: "vertical" }), jsx(Button, __assign({ onClick: onClickUpdate, type: "primary" }, { children: "Update" }))] })));
+};
+var EmptyCard = function (_a) {
+    var onClick = _a.onClick;
+    var brandColor = useContext(BrandContext).brandColor;
+    return (jsxs("div", __assign({ className: "flex flex-col items-center justify-center w-full pt-8 px-4 pb-6 cursor-pointer bg-white shadow-md rounded-md", onClick: onClick }, { children: [jsx(LargeCardIcon, {}), jsx("div", __assign({ className: "text-slate-400 pt-4 pb-8" }, { children: "No payment methods" })), jsx(Button, __assign({ type: "link" }, { children: jsxs("div", __assign({ className: "flex items-center gap-1" }, { children: [jsx(PlusIcon, { color: brandColor }), "Add payment method"] })) }))] })));
+};
+var getCardImage = function (issuer) {
+    if (issuer === "visa")
+        return "Visa_Brandmark_Blue_RGB_2021.png";
+    else if (issuer === "mastercard")
+        return "mc_symbol_opt_73_3x.png";
+};
+var PaymentMethodContext = createContext({});
+var ActualPaymentMethod = function (_a) {
+    var entityId = _a.entityId;
+    var _b = useContext(BunnyContext), token = _b.token, apiHost = _b.apiHost, graphQLClient = _b.graphQLClient, onErrorNavigate = _b.onErrorNavigate;
+    var accountId = useContext(PaymentContext).accountId;
+    // Hooks
+    var queryClient = useQueryClient();
+    var paymentPlugins = usePaymentPlugins({ entityId: entityId, apiHost: apiHost, token: token }).paymentPlugins;
+    var showErrorNotification = useErrorNotification();
+    var showSuccessNotification = useSuccessNotification();
+    var handleAllErrorFormats = useAllErrorFormats(onErrorNavigate ||
+        (function (url) {
+            console.log("navigate to", url, " not implemented");
+        }));
+    var isMobile = useIsMobile(window);
+    var data = usePaymentMethod(graphQLClient).data;
+    // Local state
+    var _c = useState(false), showModal = _c[0], setShowModal = _c[1];
+    var _d = useState(false), isSaving = _d[0], setIsSaving = _d[1];
+    var plugin = paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.find(function (paymentPlugin) { var _a; return String(paymentPlugin.id) === ((_a = data === null || data === void 0 ? void 0 : data.plugin) === null || _a === void 0 ? void 0 : _a.id); });
+    var onClickRemove = function () {
+        if (data && plugin) {
+            invokePlugin({
+                plugin: plugin,
                 method: "remove_payment_method",
                 payload: {
                     payment_method_id: data.id,
                     account_id: accountId,
                 },
                 token: token,
-                subdomain: subdomain,
+                apiHost: apiHost,
             })
                 .then(function () {
                 showSuccessNotification("Payment method was removed", "Success");
@@ -3410,7 +3841,7 @@ var ActualPaymentMethod = function () {
                         }
                         : {},
                     wrapper: isMobile ? { width: "100vw" } : { width: "min-content" },
-                }, title: jsx(DrawerHeader, { onClose: function () { return setShowModal(false); }, title: "New payment method" }) }, { children: jsx(PaymentForm, { isSaving: isSaving, onFail: function (error) {
+                }, title: jsx(DrawerHeader, { onClose: function () { return setShowModal(false); }, title: "New payment method" }) }, { children: jsx(PaymentForm, { entityId: entityId, isSaving: isSaving, onFail: function (error) {
                         handleAllErrorFormats(error);
                         setIsSaving(false);
                     }, onPaymentSuccess: function () {
@@ -3419,13 +3850,56 @@ var ActualPaymentMethod = function () {
                     }, setIsSaving: setIsSaving }) }))] }));
 };
 function PaymentMethod(_a) {
-    var footer = _a.footer, processPublicUrl = _a.processPublicUrl;
-    return (jsx(PaymentMethodContext.Provider, __assign({ value: { footer: footer, processPublicUrl: processPublicUrl } }, { children: jsx(ActualPaymentMethod, {}) })));
+    var entityId = _a.entityId, footer = _a.footer;
+    return (jsx(PaymentMethodContext.Provider, __assign({ value: { footer: footer } }, { children: jsx(ActualPaymentMethod, { entityId: entityId }) })));
 }
-var MUTATION$5 = "\nmutation accountUpdate(\n    $id: ID!,\n    $attributes: AccountAttributes!) {\n      accountUpdate(\n        id: $id,\n        attributes: $attributes\n      ) {\n        account { id }\n        errors\n      }\n  }\n";
+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_RECALCULATE_TAXES = "\n  mutation QuoteRecalculateTaxes($id: ID!) {\n    quoteRecalculateTaxes(id: $id) {\n      ".concat(QUOTE_FIELDS, "\n      errors\n    }\n  }\n");
+var quoteRecalculateTaxes = function (_a) {
+    var quoteId = _a.quoteId, token = _a.token, apiHost = _a.apiHost;
+    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 = { id: quoteId };
+                    return [4 /*yield*/, gqlRequest({
+                            query: QUOTE_RECALCULATE_TAXES,
+                            token: token,
+                            vars: vars,
+                            apiHost: apiHost,
+                        })];
+                case 1:
+                    response = _d.sent();
+                    errors = (_b = response === null || response === void 0 ? void 0 : response.quoteRecalculateTaxes) === null || _b === void 0 ? void 0 : _b.errors;
+                    if (errors)
+                        throw errors;
+                    return [2 /*return*/, (_c = response.quoteRecalculateTaxes) === null || _c === void 0 ? void 0 : _c.quote];
+            }
+        });
+    });
+};
+var useHasTaxPlugin = function (_a) {
+    var entityId = _a.entityId, apiHost = _a.apiHost, token = _a.token;
+    var plugins = usePlugins({
+        entityId: entityId,
+        apiHost: apiHost,
+        token: token,
+    }).data;
+    return Boolean(plugins === null || plugins === void 0 ? void 0 : plugins.some(function (plugin) { return plugin.type === "taxation"; }));
+};
+var MUTATION$6 = "\nmutation accountUpdate(\n    $id: ID!,\n    $attributes: AccountAttributes!) {\n      accountUpdate(\n        id: $id,\n        attributes: $attributes\n      ) {\n        account { id }\n        errors\n      }\n  }\n";
 var accountUpdate = function (_a) {
-    var accountId = _a.accountId, attributes = _a.attributes, token = _a.token;
+    var accountId = _a.accountId, attributes = _a.attributes, token = _a.token, apiHost = _a.apiHost;
     return __awaiter(void 0, void 0, void 0, function () {
         var vars, response, errors;
         var _b;
@@ -3433,7 +3907,12 @@ var accountUpdate = function (_a) {
             switch (_c.label) {
                 case 0:
                     vars = { id: accountId, attributes: attributes };
-                    return [4 /*yield*/, gqlRequest({ query: MUTATION$5, token: token, vars: vars })];
+                    return [4 /*yield*/, gqlRequest({
+                            query: MUTATION$6,
+                            token: token,
+                            vars: vars,
+                            apiHost: apiHost,
+                        })];
                 case 1:
                     response = _c.sent();
                     errors = (_b = response === null || response === void 0 ? void 0 : response.accountUpdate) === null || _b === void 0 ? void 0 : _b.errors;
@@ -3450,10 +3929,10 @@ var TaxationForm = function (_a) {
     var account = _a.account, quote = _a.quote;
     // Hooks
     var queryClient = useQueryClient();
-    var token = useContext(BunnyContext).token;
+    var _b = useContext(BunnyContext), token = _b.token, apiHost = _b.apiHost;
     var form = Form.useForm()[0];
     // Mutations
-    var _b = useMutation({
+    var _c = useMutation({
         mutationFn: function (changedFormData) { return __awaiter(void 0, void 0, void 0, function () {
             var account;
             return __generator(this, function (_a) {
@@ -3462,6 +3941,7 @@ var TaxationForm = function (_a) {
                             accountId: quote.accountId,
                             attributes: changedFormData,
                             token: token,
+                            apiHost: apiHost,
                         })];
                     case 1:
                         account = _a.sent();
@@ -3474,7 +3954,7 @@ var TaxationForm = function (_a) {
                 queryKey: ["getTaxationRequiredAccountFields", token],
             });
         },
-    }), updateAccount = _b.mutate, isUpdatingAccount = _b.isPending;
+    }), updateAccount = _c.mutate, isUpdatingAccount = _c.isPending;
     return (jsxs(Form, __assign({ className: "flex flex-col gap-4", form: form, initialValues: account, layout: "vertical", onFinish: updateAccount }, { children: [jsx(Form.Item, __assign({ label: "Billing street", name: "billingStreet" }, { children: jsx(Input, { placeholder: "Street" }) })), jsx(Form.Item, __assign({ label: "Billing city", name: "billingCity" }, { children: jsx(Input, { placeholder: "City" }) })), jsx(FormBillingState, { form: form }), jsx(Form.Item, __assign({ label: "Billing country", name: "billingCountry", rules: [{ required: true }] }, { children: jsx(Select, { options: Lists.COUNTRY_LIST, placeholder: "Select a country", showSearch: true, filterOption: function (input, option) {
                         var _a, _b;
                         return ((_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : "").toLowerCase().includes(input.toLowerCase()) ||
@@ -3489,10 +3969,10 @@ var FormBillingState = function (_a) {
 };
 var QuoteCheckout = function (_a) {
-    var account = _a.account, isSaving = _a.isSaving, onSuccess = _a.onSuccess, onFail = _a.onFail, quote = _a.quote, setIsSaving = _a.setIsSaving, taxationRequiredAccountFields = _a.taxationRequiredAccountFields; _a.storedPaymentMethod;
+    var account = _a.account, isSaving = _a.isSaving, onSuccess = _a.onSuccess, onFail = _a.onFail, quote = _a.quote, setIsSaving = _a.setIsSaving, taxationRequiredAccountFields = _a.taxationRequiredAccountFields, entityId = _a.entityId;
     // Context
-    var isMobile = useIsMobile$1();
-    var _b = useContext(BunnyContext), subdomain = _b.subdomain, token = _b.token;
+    var isMobile = useIsMobile(window);
+    var _b = useContext(BunnyContext), apiHost = _b.apiHost, token = _b.token;
     var paymentRequired = getQuoteAmountDue(quote) > 0;
     var checkoutMutation = useMutation({
         mutationFn: function (_a) {
@@ -3500,14 +3980,14 @@ var QuoteCheckout = function (_a) {
             if (!quote)
                 throw new Error("Quote is required");
             if (!paymentRequired)
-                return checkout({ quoteId: quote.id, token: token, subdomain: subdomain });
+                return checkout({ quoteId: quote.id, token: token, apiHost: apiHost });
             if (savedPaymentMethod) {
                 var paymentMethodId = savedPaymentMethod.paymentMethodId;
                 return checkout({
                     quoteId: quote.id,
                     paymentMethodId: paymentMethodId,
                     token: token,
-                    subdomain: subdomain,
+                    apiHost: apiHost,
                 });
             }
             if (pluginPaymentMethod) {
@@ -3522,7 +4002,7 @@ var QuoteCheckout = function (_a) {
                         token: paymentToken,
                     },
                     token: token,
-                    subdomain: subdomain,
+                    apiHost: apiHost,
                 });
             }
             throw new Error("Pay payment method provided");
@@ -3564,82 +4044,64 @@ var QuoteCheckout = function (_a) {
     };
     if (taxationRequiredAccountFields)
         return (jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsx(TaxationForm, { account: account, quote: quote }) })));
-    return (jsx(Fragment, { children: paymentRequired ? (jsx(PaymentForm, { isSaving: isSaving, onFail: onFail, onPaymentSuccess: handleCheckout, quote: quote, setIsSaving: setIsSaving })) : (jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsxs("div", __assign({ className: "flex flex-col gap-2 ".concat(isMobile ? "shadow-padding-x" : "") }, { children: [jsx(Button, __assign({ disabled: isSaving, onClick: function () {
+    return (jsx(Fragment, { children: paymentRequired ? (jsx(PaymentForm, { entityId: entityId, isSaving: isSaving, onFail: onFail, onPaymentSuccess: handleCheckout, quote: quote, setIsSaving: setIsSaving })) : (jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsxs("div", __assign({ className: "flex flex-col gap-2 ".concat(isMobile ? "shadow-padding-x" : "") }, { children: [jsx(Button, __assign({ disabled: isSaving, onClick: function () {
                             setIsSaving(true);
                             handleCheckout({});
                         }, type: "primary" }, { children: isSaving ? "Processing..." : "Complete order" })), jsx("div", __assign({ className: "text-xs text-slate-500" }, { children: "No payment is required" }))] })) }))) }));
 };
-var useHasTaxPlugin = function (_a) {
-    var subdomain = _a.subdomain, token = _a.token;
-    var plugins = usePlugins({
-        subdomain: subdomain,
-        token: token,
-    }).data;
-    return Boolean(plugins === null || plugins === void 0 ? void 0 : plugins.some(function (plugin) { return plugin.type === "taxation"; }));
-};
-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_RECALCULATE_TAXES = "\n  mutation QuoteRecalculateTaxes($id: ID!) {\n    quoteRecalculateTaxes(id: $id) {\n      ".concat(QUOTE_FIELDS, "\n      errors\n    }\n  }\n");
-var quoteRecalculateTaxes = function (_a) {
-    var quoteId = _a.quoteId, token = _a.token;
+var MUTATION$5 = "{\n  currentUser {\n    taxationRequiredAccountFields\n  }\n}";
+var getTaxationRequiredAccountFields = function (_a) {
+    var token = _a.token, apiHost = _a.apiHost;
     return __awaiter(void 0, void 0, void 0, function () {
-        var vars, response, errors;
+        var response;
         var _b, _c;
         return __generator(this, function (_d) {
             switch (_d.label) {
-                case 0:
-                    vars = { id: quoteId };
-                    return [4 /*yield*/, gqlRequest({
-                            query: QUOTE_RECALCULATE_TAXES,
-                            token: token,
-                            vars: vars,
-                        })];
+                case 0: return [4 /*yield*/, gqlRequest({
+                        query: MUTATION$5,
+                        token: token,
+                        apiHost: apiHost,
+                    })];
                 case 1:
                     response = _d.sent();
-                    errors = (_b = response === null || response === void 0 ? void 0 : response.quoteRecalculateTaxes) === null || _b === void 0 ? void 0 : _b.errors;
-                    if (errors)
-                        throw errors;
-                    return [2 /*return*/, (_c = response.quoteRecalculateTaxes) === null || _c === void 0 ? void 0 : _c.quote];
+                    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
+                            : null];
             }
         });
     });
 };
-var planPickerQuoteDataState = atom({
-    key: "planPickerQuoteDataState",
-    default: undefined,
-});
-var pageWrapperClassName = function (isMobile) {
-    return "flex flex-col grow pt-4 ".concat(isMobile ? "pb-4 overflow-hidden" : "pb-8", " ").concat("content-container");
-};
 var queryKeyFactory = QueryKeyFactory.default;
 var Checkout = function (_a) {
     var _b, _c;
-    var onCancel = _a.onCancel, onSuccess = _a.onSuccess, onFail = _a.onFail, invoice = _a.invoice, open = _a.open, quote = _a.quote, selectedPriceList = _a.selectedPriceList, isMobile = _a.isMobile, token = _a.token, storedPaymentMethod = _a.storedPaymentMethod;
-    var subdomain = useContext(BunnyContext).subdomain;
-    var _d = useState(false), isSaving = _d[0], setIsSaving = _d[1];
-    var hasTaxPlugin = useHasTaxPlugin({ subdomain: subdomain || "", token: token });
+    var entityId = _a.entityId, onCancel = _a.onCancel, onSuccess = _a.onSuccess, onFail = _a.onFail, invoice = _a.invoice, open = _a.open, quote = _a.quote, selectedPriceList = _a.selectedPriceList, token = _a.token, _d = _a.quantity, quantity = _d === void 0 ? 0 : _d;
+    var _e = useContext(BunnyContext), apiHost = _e.apiHost, window = _e.window;
+    var _f = useState(false), isSaving = _f[0], setIsSaving = _f[1];
+    var isMobile = useIsMobile(window);
+    var hasTaxPlugin = useHasTaxPlugin({
+        entityId: entityId,
+        apiHost: apiHost,
+        token: token,
+    });
     var queryClient = useQueryClient();
-    var quotePreviewData = useRecoilValue(planPickerQuoteDataState);
     // Queries
-    var _e = useQuery({
+    var _g = useQuery({
         queryKey: ["getTaxationRequiredAccountFields", token],
-        queryFn: function () { return getTaxationRequiredAccountFields({ token: token }); },
+        queryFn: function () { return getTaxationRequiredAccountFields({ token: token, apiHost: apiHost }); },
         enabled: Boolean(quote),
         staleTime: 0,
-    }), taxationRequiredAccountFields = _e.data, isLoadingTaxationRequiredAccountFields = _e.isLoading;
-    var _f = useQuery({
+    }), taxationRequiredAccountFields = _g.data, isLoadingTaxationRequiredAccountFields = _g.isLoading;
+    var _h = useQuery({
         queryKey: ["account", quote === null || quote === void 0 ? void 0 : quote.accountId],
         queryFn: function () {
-            return (quote === null || quote === void 0 ? void 0 : quote.accountId) && getAccount({ id: quote.accountId, token: token });
+            return (quote === null || quote === void 0 ? void 0 : quote.accountId) && getAccount({ id: quote.accountId, token: token, apiHost: apiHost });
         },
         enabled: Boolean(quote === null || quote === void 0 ? void 0 : quote.accountId) &&
             ((taxationRequiredAccountFields === null || taxationRequiredAccountFields === void 0 ? void 0 : taxationRequiredAccountFields.length) || 0) > 0,
-    }), account = _f.data, isLoadingAccount = _f.isLoading;
+    }), account = _h.data, isLoadingAccount = _h.isLoading;
     useQuery({
         queryKey: queryKeyFactory.createQuoteTaxCalculateKey(quote === null || quote === void 0 ? void 0 : quote.id),
         queryFn: function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -3651,12 +4113,13 @@ var Checkout = function (_a) {
                         return [4 /*yield*/, quoteRecalculateTaxes({
                                 quoteId: quote.id,
                                 token: token,
+                                apiHost: apiHost,
                             })];
                     case 1:
                         updatedQuote = _a.sent();
                         if (updatedQuote) {
                             queryClient.setQueryData(queryKeyFactory.createObjectKey("editingQuote", updatedQuote.id), updatedQuote);
-                            queryClient.setQueryData(queryKeyFactory.calculatedPricesKey((quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity) || 0, selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id), updatedQuote);
+                            queryClient.setQueryData(queryKeyFactory.calculatedPricesKey(quantity, selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id), updatedQuote);
                         }
                         _a.label = 2;
                     case 2: return [2 /*return*/, {}];
@@ -3675,21 +4138,21 @@ var Checkout = function (_a) {
         return null;
     return (jsx("div", __assign({ className: "flex flex-col fixed top-0 left-0 right-0 bottom-0 bg-slate-50 overflow-auto", style: {
             zIndex: 1001,
-        } }, { children: jsxs("div", __assign({ className: pageWrapperClassName(isMobile) }, { children: [jsx("div", __assign({ className: "flex justify-end w-full" }, { children: jsx(CloseOutlined$1, { className: "text-base shadow-padding-xb", onClick: onCancel }) })), jsxs("div", __assign({ className: "flex justify-end gap-6 pt-4 ".concat(isMobile ? "flex-col" : "shadow-padding-xb") }, { children: [((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_b = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _b === void 0 ? void 0 : _b.html)) && (jsx(InvoiceQuoteView, { html: invoice ? invoice.html : quote ? quote.formattedQuote.html : "", isMobile: isMobile })), !isMobile && ((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_c = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _c === void 0 ? void 0 : _c.html)) && (jsx(Divider, { className: "h-full", type: "vertical" })), invoice ? (jsx(InvoiceCheckout, { invoice: invoice, isSaving: isSaving, onFail: function (error) {
+        } }, { children: jsxs("div", __assign({ className: pageWrapperClassName(isMobile) }, { children: [jsx("div", __assign({ className: "flex justify-end w-full" }, { children: jsx(CloseOutlined$1, { className: "text-base shadow-padding-xb", onClick: onCancel }) })), jsxs("div", __assign({ className: "flex justify-end gap-6 pt-4 ".concat(isMobile ? "flex-col" : "shadow-padding-xb") }, { children: [((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_b = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _b === void 0 ? void 0 : _b.html)) && (jsx(InvoiceQuoteView, { html: invoice ? invoice.html : quote ? quote.formattedQuote.html : "" })), !isMobile && ((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_c = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _c === void 0 ? void 0 : _c.html)) && (jsx(Divider, { className: "h-full", type: "vertical" })), invoice ? (jsx(InvoiceCheckout, { invoice: invoice, isSaving: isSaving, onFail: function (error) {
                                 onFail(error);
                                 setIsSaving(false);
                             }, onSuccess: function (_a) {
                                 var savePaymentMethod = _a.savePaymentMethod;
                                 onSuccess({ savePaymentMethod: savePaymentMethod });
                                 setIsSaving(false);
-                            }, setIsSaving: setIsSaving })) : quote ? (jsx(QuoteCheckout, { account: account, isSaving: isSaving, onFail: function (error) {
+                            }, setIsSaving: setIsSaving, entityId: entityId })) : quote ? (jsx(QuoteCheckout, { account: account, entityId: entityId, isSaving: isSaving, onFail: function (error) {
                                 onFail(error);
                                 setIsSaving(false);
                             }, onSuccess: function (_a) {
                                 var savePaymentMethod = _a.savePaymentMethod;
                                 onSuccess({ savePaymentMethod: savePaymentMethod });
                                 setIsSaving(false);
-                            }, quote: quote, setIsSaving: setIsSaving, taxationRequiredAccountFields: taxationRequiredAccountFields, token: token, storedPaymentMethod: storedPaymentMethod })) : (jsx(PaymentForm, { isSaving: isSaving, onFail: function (error) {
+                            }, quote: quote, setIsSaving: setIsSaving, taxationRequiredAccountFields: taxationRequiredAccountFields, token: token })) : (jsx(PaymentForm, { entityId: entityId, isSaving: isSaving, onFail: function (error) {
                                 onFail(error);
                                 setIsSaving(false);
                             }, onPaymentSuccess: function (_a) {
@@ -3703,7 +4166,7 @@ var Checkout = function (_a) {
 var MUTATION$4 = function () { return "\nmutation AccountSignup (\n  $entityId: ID!,\n  $pluginId: String!,\n  $paymentMethodId: String,\n  $priceListCode: String!,\n  $accountId: ID!,\n  $quoteId: ID!\n) {\n  accountSignup(\n    entityId: $entityId,\n    pluginId: $pluginId,\n    paymentMethodId: $paymentMethodId,\n    priceListCode: $priceListCode,\n    accountId: $accountId,\n    quoteId: $quoteId\n  ) {\n    errors\n    quote {\n      acceptedByName\n      acceptedByTitle\n      accountId\n      amount\n      amountDue\n      applicationDate\n      applied\n      backdatedPeriods\n      backdatedQuote\n      billingDay\n      contactId\n      createdAt\n      credits\n      currencyId\n      dealId\n      discount\n      discountValue\n      endDate\n      evergreen\n      expiresAt\n      id\n      invoiceImmediately\n      invoiceImmediatelyAvailable\n      invoiceUntil\n      isPendingApprovalRequest\n      kind\n      message\n      name\n      netPaymentDays\n      notes\n      number\n      ownerId\n      payableId\n      periodAmount\n      poNumber\n      requiresApproval\n      smallUnitAmountDue\n      splitInvoice\n      startDate\n      state\n      subtotal\n      taxAmount\n      taxCode\n      updatedAt\n      uuid\n    }\n  }\n}"; };
 var accountSignup = function (_a) {
-    var token = _a.token, subdomain = _a.subdomain, entityId = _a.entityId, accountId = _a.accountId, quoteId = _a.quoteId, paymentToken = _a.paymentToken, paymentMethodId = _a.paymentMethodId, pluginId = _a.pluginId, priceListCode = _a.priceListCode;
+    var token = _a.token, apiHost = _a.apiHost, entityId = _a.entityId, accountId = _a.accountId, quoteId = _a.quoteId, paymentToken = _a.paymentToken, paymentMethodId = _a.paymentMethodId, pluginId = _a.pluginId, priceListCode = _a.priceListCode;
     return __awaiter(void 0, void 0, void 0, function () {
         var vars, response, errors;
         var _b;
@@ -3723,7 +4186,7 @@ var accountSignup = function (_a) {
                             query: MUTATION$4(),
                             token: token,
                             vars: vars,
-                            subdomain: subdomain,
+                            apiHost: apiHost,
                         })];
                 case 1:
                     response = _c.sent();
@@ -3738,7 +4201,7 @@ var accountSignup = function (_a) {
 var MUTATION$3 = function () { return "\nmutation QuoteAccountSignup (\n  $accountName: String!,\n  $billingContact: ContactAttributes!,\n  $entityId: ID!,\n  $priceListCode: String!\n) {\n  quoteAccountSignup(\n    entityId: $entityId,\n    priceListCode: $priceListCode,\n    accountName: $accountName,\n    billingContact: $billingContact\n  ) {\n    account {\n      id\n    }\n    amount\n    currencyId\n    quote {\n      id\n    }\n    tenant {\n      code\n    }\n    errors\n  }\n}"; };
 var quoteAccountSignup = function (_a) {
-    var token = _a.token, subdomain = _a.subdomain, entityId = _a.entityId, priceListCode = _a.priceListCode, accountName = _a.accountName, billingContact = _a.billingContact;
+    var token = _a.token, apiHost = _a.apiHost, entityId = _a.entityId, priceListCode = _a.priceListCode, accountName = _a.accountName, billingContact = _a.billingContact;
     return __awaiter(void 0, void 0, void 0, function () {
         var vars, response, errors;
         var _b;
@@ -3755,7 +4218,7 @@ var quoteAccountSignup = function (_a) {
                             query: MUTATION$3(),
                             token: token,
                             vars: vars,
-                            subdomain: subdomain,
+                            apiHost: apiHost,
                         })];
                 case 1:
                     response = _c.sent();
@@ -3770,7 +4233,7 @@ var quoteAccountSignup = function (_a) {
 var MUTATION$2 = function () { return "\nquery PriceList($code: String!) {\n  priceList (code: $code) {\n    basePrice\n    code\n    createdAt\n    currencyId\n    id\n    isVisible\n    name\n    periodMonths\n    planId\n    priceDescription\n    productId\n    sku\n    trialAllowed\n    trialLengthDays\n    updatedAt\n  }\n}"; };
 var getPriceList = function (_a) {
-    var token = _a.token, code = _a.code, subdomain = _a.subdomain;
+    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) {
@@ -3779,7 +4242,7 @@ var getPriceList = function (_a) {
                         query: MUTATION$2(),
                         token: token,
                         vars: { code: code },
-                        subdomain: subdomain,
+                        apiHost: apiHost,
                     })];
                 case 1:
                     response = _b.sent();
@@ -3790,8 +4253,8 @@ var getPriceList = function (_a) {
 };
 function PaymentForms(_a) {
-    var quote = _a.quote, paying = _a.paying, setIsPaying = _a.setIsPaying, handlePaymentSaveSuccess = _a.handlePaymentSaveSuccess, handlePaymentFail = _a.handlePaymentFail, handleSubmit = _a.handleSubmit, proceedingToPayment = _a.proceedingToPayment, accountId = _a.accountId;
-    return (jsx(Fragment, { children: quote ? (jsx(Fragment, { children: accountId && (jsx(PaymentContext.Provider, __assign({ value: { accountId: accountId, displayPayButtonNameAnyways: true } }, { children: jsx(PaymentForm, { isSaving: paying, setIsSaving: setIsPaying, onFail: handlePaymentFail, onPaymentSuccess: handlePaymentSaveSuccess }) }))) })) : (jsx(InitialSignupForm, { onSubmit: handleSubmit, submitting: proceedingToPayment })) }));
+    var quote = _a.quote, paying = _a.paying, setIsPaying = _a.setIsPaying, handlePaymentSaveSuccess = _a.handlePaymentSaveSuccess, handlePaymentFail = _a.handlePaymentFail, handleSubmit = _a.handleSubmit, proceedingToPayment = _a.proceedingToPayment, accountId = _a.accountId, entityId = _a.entityId;
+    return (jsx(Fragment, { children: quote ? (jsx(Fragment, { children: accountId && (jsx(PaymentContext.Provider, __assign({ value: { accountId: accountId, displayPayButtonNameAnyways: true } }, { children: jsx(PaymentForm, { entityId: entityId, isSaving: paying, setIsSaving: setIsPaying, onFail: handlePaymentFail, onPaymentSuccess: handlePaymentSaveSuccess }) }))) })) : (jsx(InitialSignupForm, { onSubmit: handleSubmit, submitting: proceedingToPayment })) }));
 }
 function InitialSignupForm(_a) {
     var onSubmit = _a.onSubmit, submitting = _a.submitting;
@@ -3826,898 +4289,166 @@ function InitialSignupForm(_a) {
                             } }) }))] })), jsx(Form.Item, { children: jsx(Button, __assign({ type: "primary", htmlType: "submit", loading: submitting, className: "w-full mt-4" }, { children: "Proceed to payment" })) })] })));
 }
-var Title = Typography.Title, Text$a = Typography.Text;
+var Title = Typography.Title, Text$5 = Typography.Text;
 function PaymentSuccessDisplay(_a) {
-    var className = _a.className, amountPaid = _a.amountPaid, style = _a.style, returnUrl = _a.returnUrl;
+    var amountPaid = _a.amountPaid, className = _a.className, companyName = _a.companyName, returnUrl = _a.returnUrl, style = _a.style;
     var window = useContext(BunnyContext).window;
-    var companyName = useCurrentUserData().companyName;
-    return (jsxs("div", __assign({ className: "flex flex-col items-center justify-center h-full ".concat(className), style: style }, { children: [jsx(CheckCircleFilled$1, { style: { fontSize: "48px", color: "rgb(52 211 153)" } }), jsxs(Title, __assign({ level: 3, className: "mt-2 m-0" }, { children: ["Payment of ", Misc.formatCurrency(amountPaid, "USD"), " successful"] })), returnUrl && (jsxs(Text$a, __assign({ className: "text-slate-500 cursor-pointer underline", onClick: function () { return (window.location.href = returnUrl); } }, { children: ["Back to ", companyName] })))] })));
+    return (jsxs("div", __assign({ className: "flex flex-col items-center justify-center h-full ".concat(className), style: style }, { children: [jsx(CheckCircleFilled$1, { style: { fontSize: "48px", color: "rgb(52 211 153)" } }), jsxs(Title, __assign({ level: 3, className: "mt-2 m-0" }, { children: ["Payment of ", formatCurrency(amountPaid, "USD"), " successful"] })), returnUrl && (jsxs(Text$5, __assign({ className: "text-slate-500 cursor-pointer underline", onClick: function () { return (window.location.href = returnUrl); } }, { children: ["Back to ", companyName] })))] })));
 }
-var Text$9 = Typography.Text;
+var Text$4 = Typography.Text;
 function PriceListDisplay(_a) {
     var priceListData = _a.priceListData, topNavImageUrl = _a.topNavImageUrl;
     if (!priceListData)
         return null;
-    return (jsx(Fragment, { children: jsx("div", __assign({ className: "flex flex-col justify-between h-full my-12" }, { children: jsxs("div", __assign({ className: "flex flex-col space-y-8" }, { children: [jsx(Image, { width: 24, src: topNavImageUrl, alt: "Logo", preview: false }), jsxs("div", __assign({ className: "flex flex-col" }, { children: [jsx(Text$9, __assign({ className: "text-slate-500 font-bold text-lg" }, { children: priceListData.name })), jsxs(Text$9, __assign({ className: "font-bold text-xl" }, { children: [Misc.formatCurrency(priceListData.basePrice, priceListData.currencyId), " ", "/ month"] }))] })), jsxs("div", __assign({ className: "flex flex-col" }, { children: [jsxs(Text$9, __assign({ style: { fontSize: "16px" }, className: "text-slate-500" }, { children: [priceListData.trialLengthDays, " day trial"] })), jsx(Text$9, __assign({ className: "text-slate-500", style: { fontSize: "12px" } }, { children: "You will not be charged until the last day of the trial." }))] }))] })) })) }));
-}
-var BunnyFooterIcon = function (_a) {
-    var color = _a.color;
-    return (jsxs("svg", __assign({ width: "45", height: "15", viewBox: "0 0 39 13", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxs("g", __assign({ clipPath: "url(#clip0_6_851)" }, { children: [jsx("path", { className: "icon-path", d: "M14.5898 7.19708C14.5898 9.35053 13.0926 10.325 11.2495 10.325C9.39955 10.325 7.90234 9.35001 7.90234 7.18967V3.26221H10.1125V7.00052C10.1125 7.87719 10.5855 8.27725 11.2495 8.27725C11.9061 8.27725 12.3865 7.87719 12.3865 7.00052V3.26221H14.5898V7.19708Z", fill: color }), jsx("path", { className: "icon-path", d: "M31.8943 12.9625H29.4793L31.8523 8.62816L28.9355 3.26221H31.4708L33.0457 6.35524L34.5924 3.26221H37.0075L31.8943 12.9625Z", fill: color }), jsx("path", { className: "icon-path", d: "M15.1602 5.96827C15.1602 3.8148 16.6574 2.84033 18.5005 2.84033C20.3504 2.84033 21.8476 3.81533 21.8476 5.97568V10.1473H19.6374V6.16483C19.6374 5.28815 19.1645 4.8881 18.5005 4.8881C17.8439 4.8881 17.3634 5.28815 17.3634 6.16483V10.1473H15.1602V5.96827Z", fill: color }), jsx("path", { className: "icon-path", d: "M22.4316 5.96827C22.4316 3.8148 23.9289 2.84033 25.7719 2.84033C27.6219 2.84033 29.1191 3.81533 29.1191 5.97568V10.1473H26.9089V6.16483C26.9089 5.28815 26.4359 4.8881 25.7719 4.8881C25.1154 4.8881 24.6349 5.28815 24.6349 6.16483V10.1473H22.4316V5.96827Z", fill: color }), jsx("path", { className: "icon-path", d: "M7.40511 6.68957C7.40511 8.7236 6.02815 10.3227 4.17816 10.3227C3.23907 10.3227 2.61071 9.94378 2.19358 9.40371V10.1404H0.0605469V0.0405273H2.26381V3.91939C2.68041 3.42158 3.28802 3.07069 4.17763 3.07069C6.02759 3.07069 7.40511 4.66981 7.40511 6.68957ZM2.17229 6.69642C2.17229 7.60802 2.77937 8.2744 3.64823 8.2744C4.53783 8.2744 5.13107 7.59372 5.13107 6.69642C5.13107 5.79912 4.53783 5.11844 3.64823 5.11844C2.77937 5.11844 2.17229 5.78482 2.17229 6.69642Z", fill: color }), jsx("path", { className: "icon-path", d: "M38.966 8.94801C38.966 9.76181 38.2668 10.4631 37.4618 10.4631C36.6499 10.4631 35.9434 9.76181 35.9434 8.94801C35.9434 8.14846 36.6494 7.46094 37.4618 7.46094C38.2668 7.46094 38.966 8.14846 38.966 8.94801Z", fill: color })] })), jsx("defs", { children: jsx("clipPath", __assign({ id: "clip0_6_851" }, { children: jsx("rect", { width: "39", height: "13", fill: "white" }) })) })] })));
-};
-var Footer = function (_a) {
-    var className = _a.className;
-    var _b = useCurrentUserData(), privacyUrl = _b.privacyUrl, termsUrl = _b.termsUrl;
-    var window = useContext(BunnyContext).window;
-    var isMobile = useIsMobile(window);
-    var quotePreviewData = useRecoilValue(planPickerQuoteDataState);
-    var selectedPriceList = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList;
-    if (selectedPriceList && isMobile)
-        return null;
-    return (jsxs("div", __assign({ className: "flex items-center justify-between shrink-0 ".concat(className, " ").concat(isMobile ? "flex-col gap-2 grow" : "") }, { children: [(termsUrl || privacyUrl) && (jsxs("div", __assign({ className: "flex items-center gap-3" }, { children: [termsUrl && (jsx(StyedLink, __assign({ className: "text-xs text-slate-400", href: termsUrl, rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: "Terms" }))), privacyUrl && (jsx(StyedLink, __assign({ className: "text-xs text-slate-400", href: privacyUrl, rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: "Privacy" })))] }))), jsx(BunnyMarketingLink, {})] })));
-};
-var BunnyMarketingLink = function () {
-    var _a = useState(false), isHovered = _a[0], setIsHovered = _a[1];
-    var window = useContext(BunnyContext).window;
-    var isMobile = useIsMobile(window);
-    return (jsx("div", __assign({ className: "flex items-end justify-end ".concat(isMobile ? "" : "grow") }, { children: jsx(StyledBunnyLink, __assign({ className: "flex items-end justify-end text-slate-400", href: "https://bunny.com/", rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: jsxs("div", __assign({ className: "flex items-center", onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: ["Powered by\u00A0", jsx("div", __assign({ style: { paddingTop: "5px" } }, { children: jsx(BunnyFooterIcon, { color: isHovered ? PRIMARY_COLOR : SLATE_400 }) }))] })) })) })));
-};
-var StyedLink = styled.a(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  color: ", ";\n  transition: color 0.3s;\n  &:hover {\n    color: ", ";\n  }\n"], ["\n  color: ", ";\n  transition: color 0.3s;\n  &:hover {\n    color: ", ";\n  }\n"])), SLATE_400, SLATE_500);
-var StyledBunnyLink = styled(StyedLink)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  &:hover {\n    color: ", " !important;\n  }\n"], ["\n  &:hover {\n    color: ", " !important;\n  }\n"])), PRIMARY_COLOR);
-var templateObject_1$4, templateObject_2;
-var MUTATION$1 = "\n  mutation portalSessionCreate ($tenantCode: String!, $expiry: Int!, $returnUrl: String!) {\n    portalSessionCreate (tenantCode: $tenantCode, expiry: $expiry, returnUrl: $returnUrl) {\n        errors\n        token\n    }\n  }\n";
-var portalSessionCreate = function (_a) {
-    var tenantCode = _a.tenantCode, expiry = _a.expiry, returnUrl = _a.returnUrl, token = _a.token, subdomain = _a.subdomain;
-    return __awaiter(void 0, void 0, void 0, function () {
-        var response, errors;
-        var _b;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
-                case 0: return [4 /*yield*/, gqlRequest({
-                        query: MUTATION$1,
-                        token: token,
-                        vars: { tenantCode: tenantCode, expiry: expiry, returnUrl: returnUrl },
-                        subdomain: subdomain,
-                    })];
-                case 1:
-                    response = _c.sent();
-                    errors = (response === null || response === void 0 ? void 0 : response.portalSessionCreate).errors;
-                    if (errors)
-                        throw errors;
-                    return [2 /*return*/, (_b = response === null || response === void 0 ? void 0 : response.portalSessionCreate) === null || _b === void 0 ? void 0 : _b.token];
-            }
-        });
-    });
-};
-var showErrorNotification = NotificationUtils.useErrorNotification();
-function Signup(_a) {
-    var priceListCode = _a.priceListCode, returnUrl = _a.returnUrl;
-    // Hooks
-    var _b = useContext(BunnyContext), subdomain = _b.subdomain, token = _b.token, window = _b.window;
-    useQuery({
-        queryKey: QueryKeyFactory.default.currentUserKey,
-        queryFn: function () { return getCurrentUserData({ token: token, subdomain: subdomain }); },
-    });
-    var isMobile = useIsMobile(window);
-    var topNavImageUrl = useContext(BrandContext).topNavImageUrl;
-    var entityId = useCurrentUserData().entityId;
-    var _c = useState(undefined), quote = _c[0], setQuote = _c[1];
-    var _d = useState(undefined), accountId = _d[0], setAccountId = _d[1];
-    var _e = useState(undefined), quoteId = _e[0], setQuoteId = _e[1];
-    var _f = useState(undefined), portalSessionToken = _f[0], setPortalSessionToken = _f[1];
-    var _g = useState(undefined), formData = _g[0], setFormData = _g[1];
-    var _h = useState(false), proceedingToPayment = _h[0], setProceedingToPayment = _h[1];
-    var _j = useState(false), paying = _j[0], setIsPaying = _j[1];
-    var _k = useState(false), purchaseSucceeded = _k[0], setPurchaseSucceeded = _k[1];
-    // Queries
-    var priceListData = useQuery({
-        queryKey: ["priceList", priceListCode],
-        queryFn: function () { return getPriceList({ token: token, subdomain: subdomain, code: priceListCode }); },
-    }).data;
-    function handleSubmit(formData) {
-        return __awaiter(this, void 0, void 0, function () {
-            var data, portalSessionToken;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        setProceedingToPayment(true);
-                        setFormData(formData);
-                        return [4 /*yield*/, quoteAccountSignup({
-                                token: token,
-                                subdomain: subdomain,
-                                entityId: entityId,
-                                priceListCode: priceListCode,
-                                accountName: formData.accountName,
-                                billingContact: {
-                                    firstName: formData.firstName,
-                                    lastName: formData.lastName,
-                                    email: formData.email,
-                                },
-                            })];
-                    case 1:
-                        data = _a.sent();
-                        setAccountId(data.account.id);
-                        return [4 /*yield*/, portalSessionCreate({
-                                token: token,
-                                subdomain: subdomain,
-                                tenantCode: data.tenant.code,
-                                expiry: 24,
-                                returnUrl: returnUrl || "",
-                            })];
-                    case 2:
-                        portalSessionToken = _a.sent();
-                        setPortalSessionToken(portalSessionToken);
-                        setQuoteId(data.quote.id);
-                        setProceedingToPayment(false);
-                        setQuote({
-                            amountDue: data.quote.amountDue,
-                            currencyId: data.quote.currencyId,
-                        });
-                        return [2 /*return*/];
-                }
-            });
-        });
-    }
-    function handlePaymentSaveSuccess(paymentSuccess) {
-        var _a;
-        return __awaiter(this, void 0, void 0, function () {
-            var response, plugin;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0:
-                        if (!formData) {
-                            throw new Error("Form data is required");
-                        }
-                        response = paymentSuccess.pluginPaymentResponse;
-                        plugin = response === null || response === void 0 ? void 0 : response.plugin;
-                        if (!(plugin === null || plugin === void 0 ? void 0 : plugin.id)) {
-                            throw new Error("Plugin ID is required");
-                        }
-                        if (!accountId) {
-                            throw new Error("Account ID is required");
-                        }
-                        if (!portalSessionToken) {
-                            throw new Error("Portal session token is required");
-                        }
-                        return [4 /*yield*/, accountSignup({
-                                token: portalSessionToken,
-                                subdomain: subdomain,
-                                entityId: entityId,
-                                quoteId: quoteId,
-                                paymentMethodId: (_a = paymentSuccess.savedPaymentMethodResponse) === null || _a === void 0 ? void 0 : _a.paymentMethodId.toString(),
-                                pluginId: plugin.id.toString(),
-                                priceListCode: priceListCode,
-                                accountId: accountId,
-                            })];
-                    case 1:
-                        _b.sent();
-                        setIsPaying(false);
-                        setPurchaseSucceeded(true);
-                        return [2 /*return*/];
-                }
-            });
-        });
-    }
-    function handlePaymentFail(error) {
-        showErrorNotification(error.message);
-        setIsPaying(false);
-    }
-    if (isMobile) {
-        return (jsx(Card, __assign({ className: "p-4 flex flex-col" }, { children: purchaseSucceeded ? (jsx(PaymentSuccessDisplay, { className: "w-full", amountPaid: (quote === null || quote === void 0 ? void 0 : quote.amountDue) || 0, returnUrl: returnUrl })) : (jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-col" : "flex-row", " h-full w-full") }, { children: [jsx("div", __assign({ className: "flex flex-col items-center" }, { children: jsx(PriceListDisplay, { priceListData: priceListData, topNavImageUrl: topNavImageUrl }) })), jsx("div", __assign({ className: "mx-8" }, { children: jsx(Divider, { className: "h-full" }) })), jsx("div", __assign({ className: "flex items-center justify-center my-12" }, { children: jsx(PaymentForms, { quote: quote, paying: paying, setIsPaying: setIsPaying, handlePaymentSaveSuccess: handlePaymentSaveSuccess, handlePaymentFail: handlePaymentFail, handleSubmit: handleSubmit, proceedingToPayment: proceedingToPayment, accountId: accountId || "" }) }))] }))) })));
-    }
-    else {
-        return (jsxs(Fragment, { children: [jsx(Card, __assign({ className: "p-4 flex flex-col w-screen h-screen" }, { children: purchaseSucceeded ? (jsx(PaymentSuccessDisplay, { className: "w-full", amountPaid: (quote === null || quote === void 0 ? void 0 : quote.amountDue) || 0, returnUrl: returnUrl })) : (jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-col" : "flex-row", " h-full w-full") }, { children: [jsx("div", __assign({ className: "flex flex-col w-1/2 items-center" }, { children: jsx(PriceListDisplay, { priceListData: priceListData, topNavImageUrl: topNavImageUrl }) })), jsx("div", __assign({ className: "my-4" }, { children: jsx(Divider, { className: "h-full", type: "vertical" }) })), jsx("div", __assign({ className: "flex w-1/2 items-center justify-center my-12" }, { children: jsx(PaymentForms, { quote: quote, paying: paying, setIsPaying: setIsPaying, handlePaymentSaveSuccess: handlePaymentSaveSuccess, handlePaymentFail: handlePaymentFail, handleSubmit: handleSubmit, proceedingToPayment: proceedingToPayment, accountId: accountId || "" }) }))] }))) })), jsx(Footer, {})] }));
-    }
-}
-var transactionMutation = function (filter) { return "\nquery transactions {\n  transactions ".concat(filter ? "(".concat(filter, ")") : "", " {\n    nodes {\n      amount\n      createdAt\n      currencyId\n      description\n      id\n      kind\n      state\n      transactionableId\n      transactionable {\n        ...on Payment { amount }\n        ...on Invoice { amount number }\n      }\n    }\n  }\n}"); };
-var getTransactions = function (filter, token, subdomain, kindsToShow) { return __awaiter(void 0, void 0, void 0, function () {
-    var response, _a, data, errors, transactions;
-    var _b, _c;
-    return __generator(this, function (_d) {
-        switch (_d.label) {
-            case 0: return [4 /*yield*/, fetch(subdomain + "/graphql", {
-                    method: "POST",
-                    headers: {
-                        "Content-type": "application/json; charset=utf-8",
-                        Authorization: "Bearer ".concat(token),
-                    },
-                    body: JSON.stringify({
-                        query: transactionMutation(filter),
-                    }),
-                })];
-            case 1:
-                response = _d.sent();
-                return [4 /*yield*/, response.json()];
-            case 2:
-                _a = _d.sent(), data = _a.data, errors = _a.errors;
-                if (errors) {
-                    throw new Error(errors[0].message);
-                }
-                transactions = (_c = (_b = data === null || data === void 0 ? void 0 : data.transactions) === null || _b === void 0 ? void 0 : _b.nodes) === null || _c === void 0 ? void 0 : _c.filter(function (transaction) { return kindsToShow.includes(transaction.kind); });
-                return [2 /*return*/, transactions === null || transactions === void 0 ? void 0 : transactions.reverse()];
-        }
-    });
-}); };
-var pageContentRefState = atom({
-    key: "pageContentRefState",
-    default: undefined,
-});
-var PageContent = function (_a) {
-    var children = _a.children, className = _a.className, style = _a.style;
-    var pageContentRef = useRef(null);
-    var setPageContentRef = useSetRecoilState(pageContentRefState);
-    useEffect(function () {
-        setPageContentRef(pageContentRef === null || pageContentRef === void 0 ? void 0 : pageContentRef.current);
-    }, [pageContentRef, setPageContentRef]);
-    return (jsx("div", __assign({ className: className, ref: pageContentRef, style: style }, { children: children })));
-};
-var Text$8 = Typography.Text;
-var PageHeaderWithActions = function (_a) {
-    var children = _a.children, title = _a.title;
-    var isMobile = useIsMobile$1();
-    return (jsxs("div", __assign({ className: "flex pb-4 shadow-padding-x ".concat(isMobile ? "flex-col gap-2" : "items-center justify-between h-8") }, { children: [jsx(PageSubTitle, { title: title }), children] })));
-};
-var PageSubTitle = function (_a) {
-    var title = _a.title;
-    var secondaryColor = useContext(BrandContext).secondaryColor;
-    var darkMode = useContext(BunnyContext).darkMode;
-    return (jsx(Text$8, __assign({ className: "shrink-0 font-medium", style: { color: darkMode ? undefined : secondaryColor } }, { children: title })));
-};
-var StateTag = function (_a) {
-    var state = _a.state;
-    return jsx(Tag, __assign({ color: getColor(state) }, { children: capitalize(startCase(state)) }));
-};
-var getColor = function (state) {
-    switch (state) {
-        case FrontendTransaction.TransactionState.not_due:
-            return "yellow";
-        case FrontendTransaction.TransactionState.voided:
-            return "black";
-        case FrontendTransaction.TransactionState.ready:
-            return "orange";
-        case FrontendTransaction.TransactionState.preparing:
-            return "purple";
-        case FrontendTransaction.TransactionState.unapplied:
-        case FrontendTransaction.TransactionState.partially_applied:
-        case FrontendTransaction.TransactionState.applied:
-            return "blue";
-        case FrontendTransaction.TransactionState.due:
-        case FrontendTransaction.TransactionState.unpaid:
-            return "orange";
-        case FrontendTransaction.TransactionState.failed:
-            return "red";
-        case FrontendTransaction.TransactionState.paid:
-            return "green";
-        default:
-            return "blue";
-    }
-};
-var TransactionGridCell = styled.div.withConfig({
-    shouldForwardProp: function (prop) {
-        return !["gridColumn", "padding", "right"].includes(prop);
-    },
-})(templateObject_1$3 || (templateObject_1$3 = __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"); }, SLATE_600);
-var templateObject_1$3;
-var Text$7 = Typography.Text;
-var TransactionDate = function (_a) {
-    var date = _a.date;
-    return jsx(Text$7, __assign({ className: "text-sm" }, { children: Misc.formatDate(date) }));
-};
-var isInvoice = function (transaction) {
-    return transaction.kind === "INVOICE";
-};
-var isQuote = function (transaction) {
-    return transaction.kind === "QUOTE";
-};
-var TransactionRowTitle = function (_a) {
-    var transaction = _a.transaction;
-    if (!isInvoice(transaction) && !isQuote(transaction)) {
-        return jsx(Fragment, {});
-    }
-    return (jsx("span", __assign({ className: "text-slate-400", style: { fontSize: "11px" } }, { children: transaction.transactionable.number })));
-};
-// TODO: delete
-var ArrowDownToLine = function (_a) {
-    var className = _a.className, _b = _a.color, color = _b === void 0 ? SLATE_600 : _b;
-    return (jsxs("svg", __assign({ className: className, fill: "none", height: "16", viewBox: "0 0 16 16", width: "16", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx("path", { d: "M8 11.3333V2", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M4 7.33301L8 11.333L12 7.33301", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M12.6654 14H3.33203", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] })));
-};
-var TransactionsListContext = createContext({});
-var TransactionDownload = function (_a) {
-    var transaction = _a.transaction, token = _a.token, subdomain = _a.subdomain;
-    var darkMode = useContext(BunnyContext).darkMode;
-    var downloadTransactionLink = useContext(TransactionsListContext).downloadTransactionLink;
-    var downloadFile = useDownloadFile();
-    var isMobile = useIsMobile$1();
-    var isClickable = transaction.kind === "INVOICE" || downloadTransactionLink !== undefined;
-    var downloadLink = downloadTransactionLink
-        ? downloadTransactionLink(transaction.transactionableId)
-        : "".concat(subdomain, "/api/pdf/invoice/").concat(transaction.transactionableId);
-    if (!isClickable)
-        return null;
-    return (jsx("div", __assign({ onClick: function (e) {
-            e.stopPropagation();
-            downloadFile(downloadLink, token);
-        } }, { children: jsx(ArrowDownToLine, { className: "".concat(isMobile ? "" : "show-on-hover"), color: darkMode ? WHITE : SLATE_600 }) })));
-};
-var Text$6 = Typography.Text;
-var TransactionsEmptyState = function () {
-    var noTransactionsMessage = useContext(TransactionsListContext).noTransactionsMessage;
-    return (jsx(Text$6, __assign({ className: "flex justify-center p-4 text-base" }, { children: noTransactionsMessage || "There are no transactions" })));
-};
-function capitalizeFirstLetter(string) {
-    return string.charAt(0).toUpperCase() + string.slice(1);
-}
-var WARREN_STATE_LS_KEY = "warrenState";
-var CURRENT_WARREN_ID_LS_KEY = "currentWarrenId";
-var getIsCapacitorApp = function () {
-    var isAndroid = window.location.origin === "http://localhost";
-    var isIOS = window.location.protocol === "capacitor:";
-    return isAndroid || isIOS;
-};
-var getLocalStorageSubdomain = function () {
-    var warrenState = JSON.parse(window.localStorage.getItem(WARREN_STATE_LS_KEY) || "{}");
-    var subdomain = warrenState[CURRENT_WARREN_ID_LS_KEY];
-    if (!subdomain) {
-        console.warn("ERROR_MESSAGE_NO_SUBDOMAIN_DEFINED");
-        //throw new Error(ERROR_MESSAGE_NO_SUBDOMAIN_DEFINED);
-    }
-    return subdomain;
-};
-var getApiHost = function (subdomain) {
-    var isLocalHost = window.location.href.indexOf(".internal") > 0;
-    var sub = subdomain || getLocalStorageSubdomain();
-    if (getIsCapacitorApp()) {
-        return isLocalHost || process.env.REACT_APP_IS_INTERNAL === "true"
-            ? "https://".concat(sub, ".bunny.internal")
-            : "https://".concat(sub, ".").concat(process.env.REACT_APP_ROOT_DOMAIN);
-    }
-    return "";
-};
-var getGraphQLBase = function () {
-    if (getIsCapacitorApp()) {
-        return "".concat(getApiHost(), "/graphql");
-    }
-    return "/graphql";
-};
-var createRequestHeaders = function (token) {
-    var bearerToken = "Bearer ".concat(token);
-    var headers = {
-        "Content-type": "application/json; charset=utf-8",
-    };
-    headers["Authorization"] = bearerToken;
-    return headers;
-};
-var useGraphQLRequest = function () { return function (query, 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(getGraphQLBase(), 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 Text$5 = Typography.Text;
-var TransactionsListDesktop = function (_a) {
-    var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
-    var columns = useContext(TransactionsListContext).columns;
-    var _b = useContext(BunnyContext), token = _b.token, subdomain = _b.subdomain, darkMode = _b.darkMode;
-    var showAmount = columns.includes("amount");
-    var showDateAndTitle = columns.includes("date-and-title");
-    var showDownload = columns.includes("download");
-    var showState = columns.includes("state");
-    if ((transactions === null || transactions === void 0 ? void 0 : transactions.length) === 0)
-        return jsx(TransactionsEmptyState, {});
-    return transactions === null || transactions === void 0 ? void 0 : transactions.map(function (transaction, index) {
-        var _a;
-        var isClickable = onTransactionClick !== undefined;
-        return (jsxs("div", __assign({ className: "contents ".concat(isClickable && "cursor-pointer", " show-on-hover-container"), onClick: function () {
-                onTransactionClick === null || onTransactionClick === void 0 ? void 0 : onTransactionClick(transaction);
-            }, style: {
-                backgroundColor: index % 2 === 0
-                    ? "var(--row-background".concat(darkMode ? "-dark" : "", ")")
-                    : "var(--row-background-alternate".concat(darkMode ? "-dark" : "", ")"),
-            } }, { children: [showDateAndTitle && (jsxs(Fragment, { children: [jsx(TransactionGridCell, __assign({ right: false }, { children: jsx(TransactionDate, { date: transaction.createdAt }) })), jsxs(TransactionGridCell, __assign({ right: false, className: "flex items-center gap-2" }, { children: [jsx(Text$5, { children: capitalizeFirstLetter(transaction.kind.toLowerCase()) }), jsx(TransactionRowTitle, { transaction: transaction })] }))] })), showDownload && (jsx(TransactionGridCell, { children: jsx(TransactionDownload, { transaction: transaction, token: token, subdomain: subdomain }) })), showState && (jsx(TransactionGridCell, __assign({ right: true }, { children: jsx(StateTag, { state: transaction.state }) }))), showAmount && (jsx(TransactionGridCell, __assign({ right: true }, { children: jsx(Text$5, { children: Misc.formatCurrency(((_a = transaction === null || transaction === void 0 ? void 0 : transaction.transactionable) === null || _a === void 0 ? void 0 : _a.amount) || transaction.amount, transaction.currencyId) }) })))] }), index));
-    });
-};
-var Text$4 = Typography.Text;
-var TransactionsListMobile = function (_a) {
-    var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
-    var columns = useContext(TransactionsListContext).columns;
-    var _b = useContext(BunnyContext), token = _b.token, subdomain = _b.subdomain, darkMode = _b.darkMode;
-    var showAmount = columns.includes("amount");
-    var showDateAndTitle = columns.includes("date-and-title");
-    var showDownload = columns.includes("download");
-    var showState = columns.includes("state");
-    if ((transactions === null || transactions === void 0 ? void 0 : transactions.length) === 0)
-        return jsx(TransactionsEmptyState, {});
-    return transactions === null || transactions === void 0 ? void 0 : transactions.map(function (transaction, index) {
-        var isClickable = transaction.kind === "INVOICE";
-        return (jsxs("div", __assign({ className: "contents ".concat(isClickable && "cursor-pointer", " show-on-hover-container"), onClick: function () {
-                onTransactionClick(transaction);
-            }, style: {
-                backgroundColor: index % 2 === 0
-                    ? "var(--row-background".concat(darkMode ? "-dark" : "", ")")
-                    : "var(--row-background-alternate".concat(darkMode ? "-dark" : "", ")"),
-            } }, { children: [jsx(TransactionGridCell, { children: jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [showDateAndTitle && (jsxs(Fragment, { children: [jsx(Text$4, { children: capitalizeFirstLetter(transaction.kind.toLowerCase()) }), jsx(TransactionRowTitle, { transaction: transaction })] })), showState && jsx(StateTag, { state: transaction.state })] })), jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [showDateAndTitle && (jsx(TransactionDate, { date: transaction.createdAt })), showAmount && showDateAndTitle && jsx(Text$4, { children: "\u00B7" }), showAmount && (jsx(Text$4, { children: Misc.formatCurrency(transaction.transactionable.amount || transaction.amount, transaction.currencyId) }))] }))] })) }), showDownload && (jsx(TransactionGridCell, __assign({ right: true }, { children: jsx(TransactionDownload, { transaction: transaction, token: token, subdomain: subdomain }) })))] }), index));
-    });
-};
-// Create a client
-var queryClient = new QueryClient();
-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.columns, columns = _d === void 0 ? ["date-and-title", "state", "amount"] : _d, className = _a.className, _e = _a.shadow, shadow = _e === void 0 ? "md" : _e, searchBarClassName = _a.searchBarClassName, _f = _a.useModal, useModal = _f === void 0 ? false : _f, onTransactionClick = _a.onTransactionClick, _g = _a.suppressTransactionDisplay, suppressTransactionDisplay = _g === void 0 ? false : _g, _h = _a.kindsToShow, kindsToShow = _h === void 0 ? [
-        TransactionKind.INVOICE,
-        TransactionKind.PAYMENT,
-        TransactionKind.REFUND,
-        TransactionKind.WRITE_OFF,
-    ] : _h, style = _a.style, filter = _a.filter, noTransactionsMessage = _a.noTransactionsMessage;
-    var contextValues = {
-        showSearchBar: showSearchBar,
-        showTitle: showTitle,
-        transactionComponent: transactionComponent,
-        columns: columns,
-        className: className,
-        searchBarClassName: searchBarClassName,
-        shadow: shadow,
-        useModal: useModal,
-        onTransactionClick: onTransactionClick,
-        suppressTransactionDisplay: suppressTransactionDisplay,
-        kindsToShow: kindsToShow,
-        style: style,
-        filter: filter,
-        noTransactionsMessage: noTransactionsMessage,
-    };
-    return (jsx(QueryClientProvider, __assign({ client: queryClient }, { children: jsx(TransactionsListContext.Provider, __assign({ value: contextValues }, { children: jsx(TransactionsWrapper, {}) })) })));
-}
-function TransactionsWrapper() {
-    var _a = useContext(TransactionsListContext), kindsToShow = _a.kindsToShow, filterFromContext = _a.filter;
-    var _b = useContext(BunnyContext), token = _b.token, subdomain = _b.subdomain;
-    // Local state
-    var _c = useState(""), search = _c[0], setSearch = _c[1];
-    var filter = filterFromContext ||
-        (search ? "filter: \"transaction.transactionableId is ".concat(search, "\"") : "");
-    // Queries
-    var data = useQuery({
-        queryKey: ["transactions", token, filter],
-        queryFn: function () { return getTransactions(filter, token, subdomain, kindsToShow); },
-        placeholderData: keepPreviousData,
-    }).data;
-    return (jsx(TransactionsDisplay, { transactions: data, onSearchValueChanged: setSearch, search: search }));
-}
-function TransactionsDisplay(_a) {
-    var transactions = _a.transactions, onSearchValueChanged = _a.onSearchValueChanged, search = _a.search, title = _a.title;
-    var _b = useContext(TransactionsListContext), showSearchBar = _b.showSearchBar, showTitle = _b.showTitle, transactionComponent = _b.transactionComponent, useModal = _b.useModal, suppressTransactionDisplay = _b.suppressTransactionDisplay, className = _b.className, shadow = _b.shadow, searchBarClassName = _b.searchBarClassName, style = _b.style, onTransactionClick = _b.onTransactionClick;
-    var columns = useContext(TransactionsListContext).columns;
-    var darkMode = useContext(BunnyContext).darkMode;
-    // Local state
-    var _c = useState(null), selectedTransaction = _c[0], setSelectedTransaction = _c[1];
-    var _d = useState(false), drawerOpen = _d[0], setDrawerOpen = _d[1];
-    // Hooks
-    var isMobile = useIsMobile$1();
-    function handleTransactionClick(transaction) {
-        if (onTransactionClick) {
-            onTransactionClick(transaction);
-        }
-        if (!suppressTransactionDisplay) {
-            setSelectedTransaction(transaction);
-            setDrawerOpen(true);
-        }
-    }
-    // Since the columns are dynamic, we need to calculate the grid template columns
-    var gridTemplateColumns = function () {
-        var templateColumns = [];
-        if (isMobile) {
-            if (columns.includes("date-and-title") ||
-                columns.includes("state") ||
-                columns.includes("amount")) {
-                templateColumns.push("auto");
-            }
-            if (columns.includes("download")) {
-                templateColumns.push("auto");
-            }
-        }
-        else {
-            if (columns.includes("date-and-title")) {
-                templateColumns.push("auto 3fr");
-            }
-            if (columns.includes("download")) {
-                templateColumns.push("auto");
-            }
-            if (columns.includes("state")) {
-                templateColumns.push("auto");
-            }
-            if (columns.includes("amount")) {
-                templateColumns.push("auto");
-            }
-        }
-        return templateColumns.join(" ");
-    };
-    var drawerTitle = function () {
-        if (!selectedTransaction)
-            return "";
-        var kind = selectedTransaction.kind.toLowerCase();
-        return kind.charAt(0).toUpperCase() + kind.slice(1);
-    };
-    return (jsxs("div", __assign({ style: style }, { children: [jsx(PageHeaderWithActions, __assign({ title: title || (showTitle ? "Past transactions" : undefined) }, { children: showSearchBar && (jsx("div", { children: jsx(Input, { className: searchBarClassName
-                            ? searchBarClassName
-                            : "border border-slate-200", onChange: function (e) {
-                            if (isNaN(Number(e.target.value))) {
-                                return;
-                            }
-                            onSearchValueChanged(e.target.value);
-                        }, prefix: jsx(SearchOutlined$1, {}), placeholder: "Search by id #", style: {
-                            minWidth: "300px",
-                        }, value: search }) })) })), jsx(PageContent, __assign({ className: "flex w-full shadow-padding-xb ".concat(isMobile ? "overflow-hidden" : "", " ").concat(className) }, { children: jsx("div", __assign({ className: "grid w-full rounded-md overflow-auto ".concat("shadow-".concat(shadow)), style: {
-                        gridTemplateColumns: gridTemplateColumns(),
-                        backgroundColor: "var(--row-background".concat(darkMode ? "-dark" : "", ")"),
-                    } }, { children: isMobile ? (jsx(Fragment, { children: TransactionsListMobile({
-                            transactions: transactions,
-                            onTransactionClick: handleTransactionClick,
-                        }) })) : (jsx(Fragment, { children: TransactionsListDesktop({
-                            transactions: transactions,
-                            onTransactionClick: handleTransactionClick,
-                        }) })) })) })), useModal ? (jsx(Modal, __assign({ title: "Basic Modal", open: drawerOpen, onOk: function () { return setDrawerOpen(false); }, onCancel: function () { return setDrawerOpen(false); }, width: 900, footer: null }, { children: jsx(Invoice, { id: (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.transactionableId) || "" }) }))) : (jsx(Drawer, __assign({ title: drawerTitle(), onClose: function () { return setDrawerOpen(false); }, open: drawerOpen, width: 900 }, { children: transactionComponent ? (transactionComponent) : (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.kind) === "INVOICE" ? (jsx(Invoice, { id: selectedTransaction.transactionableId })) : (jsxs(Card$1, __assign({ className: "shadow-md" }, { children: [jsx(Typography.Title, __assign({ level: 2, className: "mb-4" }, { children: "Transaction Details" })), jsxs(Typography.Paragraph, { children: [jsx("strong", { children: "Amount:" }), " ", jsx(Typography.Text, { children: Misc.formatCurrency((selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.amount) || 0, (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.currencyId) || "USD") })] }), jsxs(Typography.Paragraph, { children: [jsx("strong", { children: "Description:" }), " ", jsx(Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.description })] }), jsxs(Typography.Paragraph, { children: [jsx("strong", { children: "Kind:" }), " ", jsx(Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.kind })] }), jsxs(Typography.Paragraph, { children: [jsx("strong", { children: "State:" }), " ", jsx(Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.state })] })] }))) })))] })));
-}
-var updatingChargeQuantityIdState = atom({
-    key: "updatingChargeQuantityIdState",
-    default: undefined,
-});
-var canShowQuantitiesInput = function (charge, subscription) {
-    // Check if the subscription is active, pending, or in trial,
-    // the pricing model is not flat,
-    // and if it's not a trial, also check if the current charge is the last one in the subscription.
-    var _a, _b, _c;
-    var isActiveSubscription = ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === SubscriptionState$2.ACTIVE;
-    var isPendingSubscription = ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$2.PENDING;
-    var isTrialSubscription = ((_c = subscription.state) === null || _c === void 0 ? void 0 : _c.toUpperCase()) === SubscriptionState$2.TRIAL;
-    var isFlatPricing = charge.pricingModel === "FLAT";
-    var shouldProcessCharge = (isActiveSubscription || isPendingSubscription || isTrialSubscription) &&
-        !isFlatPricing &&
-        charge.selfServiceQuantity &&
-        !charge.expired;
-    // Now you can use the value of shouldProcessCharge to determine whether to process the charge.
-    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 quoteChangeCharge = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.find(function (charge) { return charge.priceListCharge.id === editedSubscription.chargeId; });
-    var charges = [
-        {
-            id: quoteChangeCharge.id,
-            quantity: editedSubscription.quantity - subscriptionQuantity,
-        },
-    ];
-    return { charges: charges, quoteChange: quoteChange };
-};
-var canShowChangeQuantities = function (_a) {
-    var subscriptions = _a.subscriptions;
-    return subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.some(function (subscription) {
-        return subscription.charges.some(function (charge, chargeIndex) {
-            return canShowQuantitiesInput(charge, subscription);
-        });
-    });
-};
-var isSubscriptionNotActive = function (subscription) {
-    var _a, _b;
-    return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === SubscriptionState$2.EXPIRED ||
-        ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$2.CANCELED;
-};
-var canShowSubscriptionActions = function (subscription) {
-    var _a, _b;
-    return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === SubscriptionState$2.ACTIVE ||
-        ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$2.PENDING;
-};
-var useCreateSubscriptionQuote = function () {
-    var graphQLRequest = useGraphQLRequest();
-    return function (subscriptionIds, token) { return __awaiter(void 0, void 0, void 0, function () {
-        var data;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0: return [4 /*yield*/, graphQLRequest("\n    mutation quoteSubscriptionUpdate(\n      $subscriptionIds: [ID!]!,\n    ) {\n      quoteSubscriptionUpdate(\n        subscriptionIds: $subscriptionIds,\n      ) {\n        quote {\n          id\n          quoteChanges {\n            id\n            priceList {\n              id\n            }\n            charges {\n              id\n              priceListCharge {\n                id\n              }\n            }\n          }\n        }\n      }\n    }\n      ", token, {
-                        subscriptionIds: subscriptionIds,
-                    })];
-                case 1:
-                    data = _a.sent();
-                    return [2 /*return*/, data];
-            }
-        });
-    }); };
-};
-var useQuoteChangeUpdate = function () {
-    var graphQLRequest = useGraphQLRequest();
-    return function (charges, quoteChangeId, token) { return __awaiter(void 0, void 0, void 0, function () {
-        var response;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0: return [4 /*yield*/, graphQLRequest("mutation QuoteChangeUpdate($charges:[QuoteChargeAttributes!], $id:ID!) {\n      quoteChangeUpdate(id:$id, charges:$charges) {\n        quoteChange { id quoteId }\n        errors\n      }\n    }", token, { charges: charges, id: quoteChangeId })];
-                case 1:
-                    response = _a.sent();
-                    return [2 /*return*/, response];
-            }
-        });
-    }); };
-};
-var useQuoteDelete = function () {
-    var graphQLRequest = useGraphQLRequest();
-    return function (quoteId, token) { return __awaiter(void 0, void 0, void 0, function () {
-        var response;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0: return [4 /*yield*/, graphQLRequest("mutation QuoteDelete($id: ID!) {\n        quoteDelete(id: $id) {\n          errors\n        }\n      }", token, { id: quoteId })];
+    return (jsx(Fragment, { children: jsx("div", __assign({ className: "flex flex-col justify-between h-full my-12" }, { children: jsxs("div", __assign({ className: "flex flex-col space-y-8" }, { children: [jsx(Image, { width: 24, src: topNavImageUrl, alt: "Logo", preview: false }), jsxs("div", __assign({ className: "flex flex-col" }, { children: [jsx(Text$4, __assign({ className: "text-slate-500 font-bold text-lg" }, { children: priceListData.name })), jsxs(Text$4, __assign({ className: "font-bold text-xl" }, { children: [formatCurrency(priceListData.basePrice, priceListData.currencyId), " ", "/ month"] }))] })), jsxs("div", __assign({ className: "flex flex-col" }, { children: [jsxs(Text$4, __assign({ style: { fontSize: "16px" }, className: "text-slate-500" }, { children: [priceListData.trialLengthDays, " day trial"] })), jsx(Text$4, __assign({ className: "text-slate-500", style: { fontSize: "12px" } }, { children: "You will not be charged until the last day of the trial." }))] }))] })) })) }));
+}
+var MUTATION$1 = "\n  mutation portalSessionCreate ($tenantCode: String!, $expiry: Int!, $returnUrl: String!) {\n    portalSessionCreate (tenantCode: $tenantCode, expiry: $expiry, returnUrl: $returnUrl) {\n        errors\n        token\n    }\n  }\n";
+var portalSessionCreate = function (_a) {
+    var tenantCode = _a.tenantCode, expiry = _a.expiry, returnUrl = _a.returnUrl, token = _a.token, apiHost = _a.apiHost;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var response, errors;
+        var _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0: return [4 /*yield*/, gqlRequest({
+                        query: MUTATION$1,
+                        token: token,
+                        vars: { tenantCode: tenantCode, expiry: expiry, returnUrl: returnUrl },
+                        apiHost: apiHost,
+                    })];
                 case 1:
-                    response = _a.sent();
-                    return [2 /*return*/, response];
+                    response = _c.sent();
+                    errors = (response === null || response === void 0 ? void 0 : response.portalSessionCreate).errors;
+                    if (errors)
+                        throw errors;
+                    return [2 /*return*/, (_b = response === null || response === void 0 ? void 0 : response.portalSessionCreate) === null || _b === void 0 ? void 0 : _b.token];
             }
         });
-    }); };
+    });
 };
-var QuantityInput = function (_a) {
-    var charge = _a.charge, chargeIndex = _a.chargeIndex, editingQuote = _a.editingQuote, setEditingQuoteData = _a.setEditingQuoteData, subscription = _a.subscription, subscriptionIndex = _a.subscriptionIndex, subscriptions = _a.subscriptions;
-    // Context
-    var token = useContext(BunnyContext).token;
-    // Recoil state
-    var _b = useRecoilState(updatingChargeQuantityIdState), updatingChargeQuantityId = _b[0], setUpdatingChargeQuantityId = _b[1];
-    // Local state
-    var _c = useState(), editedSubscription = _c[0], setEditedSubscription = _c[1];
+var showErrorNotification = useErrorNotification();
+function Signup(_a) {
+    var companyName = _a.companyName, entityId = _a.entityId, priceListCode = _a.priceListCode, returnUrl = _a.returnUrl;
     // Hooks
-    var queryClient = useQueryClient();
-    var handleAllErrorFormats = NotificationUtils.useAllErrorFormats(function () { });
-    var createSubscriptionQuote = useCreateSubscriptionQuote();
-    var quoteChangeUpdate = useQuoteChangeUpdate();
-    var isMobile = useIsMobile$1();
-    var showErrorNotification = NotificationUtils.useErrorNotification();
-    var quantityDisabled =
-    // If we are editing a quote, we disable the quantity input
-    // If we don't have a editedSubscription, we disable the quantity input
-    (updatingChargeQuantityId && updatingChargeQuantityId !== charge.id) ||
-        // If the subscription is not self-service, we disable the quantity input
-        !charge.selfServiceQuantity;
-    var value = (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.quantity) === undefined
-        ? ""
-        : editedSubscription.quantity;
-    // Mutations
-    var createQuote = useMutation({
-        mutationFn: function (subscriptionIds) {
-            return createSubscriptionQuote(subscriptionIds, token);
-        },
-        onError: handleAllErrorFormats,
-        onSuccess: function (subscriptionUpdateData) {
-            var _a;
-            var quote = (_a = subscriptionUpdateData === null || subscriptionUpdateData === void 0 ? void 0 : subscriptionUpdateData.quoteSubscriptionUpdate) === null || _a === void 0 ? void 0 : _a.quote;
-            var _b = createQuoteParams(quote, charge.quantity, editedSubscription), charges = _b.charges, quoteChange = _b.quoteChange;
-            if (quoteChange && charges[0].quantity > 0) {
-                updateQuote.mutate({
-                    charges: charges,
-                    quoteChangeId: quoteChange.id,
-                });
-            }
-        },
-    });
-    var updateQuote = useMutation({
-        mutationFn: function (_a) {
-            var charges = _a.charges, quoteChangeId = _a.quoteChangeId;
-            return quoteChangeUpdate(charges, quoteChangeId, token);
-        },
-        onSuccess: function (response) {
-            var _a, _b, _c, _d, _e, _f;
-            if (!(editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id)) {
-                var isTrial = ((_b = (_a = editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.subscription) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) ===
-                    SubscriptionState$2.TRIAL;
-                setEditingQuoteData({
-                    id: (_d = (_c = response.quoteChangeUpdate) === null || _c === void 0 ? void 0 : _c.quoteChange) === null || _d === void 0 ? void 0 : _d.quoteId,
-                    isTrial: isTrial,
-                });
-            }
-            queryClient.invalidateQueries({
-                queryKey: QueryKeyFactory.default.createObjectKey("editingQuote", (_f = (_e = response.quoteChangeUpdate) === null || _e === void 0 ? void 0 : _e.quoteChange) === null || _f === void 0 ? void 0 : _f.quoteId),
+    var _b = useContext(BunnyContext), apiHost = _b.apiHost, token = _b.token, window = _b.window;
+    var isMobile = useIsMobile(window);
+    var topNavImageUrl = useContext(BrandContext).topNavImageUrl;
+    var _c = useState(undefined), quote = _c[0], setQuote = _c[1];
+    var _d = useState(undefined), accountId = _d[0], setAccountId = _d[1];
+    var _e = useState(undefined), quoteId = _e[0], setQuoteId = _e[1];
+    var _f = useState(undefined), portalSessionToken = _f[0], setPortalSessionToken = _f[1];
+    var _g = useState(undefined), formData = _g[0], setFormData = _g[1];
+    var _h = useState(false), proceedingToPayment = _h[0], setProceedingToPayment = _h[1];
+    var _j = useState(false), paying = _j[0], setIsPaying = _j[1];
+    var _k = useState(false), purchaseSucceeded = _k[0], setPurchaseSucceeded = _k[1];
+    // Queries
+    var priceListData = useQuery({
+        queryKey: ["priceList", priceListCode],
+        queryFn: function () { return getPriceList({ token: token, apiHost: apiHost, code: priceListCode }); },
+    }).data;
+    function handleSubmit(formData) {
+        return __awaiter(this, void 0, void 0, function () {
+            var data, portalSessionToken;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        setProceedingToPayment(true);
+                        setFormData(formData);
+                        return [4 /*yield*/, quoteAccountSignup({
+                                token: token,
+                                apiHost: apiHost,
+                                entityId: entityId,
+                                priceListCode: priceListCode,
+                                accountName: formData.accountName,
+                                billingContact: {
+                                    firstName: formData.firstName,
+                                    lastName: formData.lastName,
+                                    email: formData.email,
+                                },
+                            })];
+                    case 1:
+                        data = _a.sent();
+                        setAccountId(data.account.id);
+                        return [4 /*yield*/, portalSessionCreate({
+                                token: token,
+                                apiHost: apiHost,
+                                tenantCode: data.tenant.code,
+                                expiry: 24,
+                                returnUrl: returnUrl || "",
+                            })];
+                    case 2:
+                        portalSessionToken = _a.sent();
+                        setPortalSessionToken(portalSessionToken);
+                        setQuoteId(data.quote.id);
+                        setProceedingToPayment(false);
+                        setQuote({
+                            amountDue: data.quote.amountDue,
+                            currencyId: data.quote.currencyId,
+                        });
+                        return [2 /*return*/];
+                }
             });
-        },
-    });
-    // Handlers
-    var isQuantityLowerThanOriginal = function (quantity) {
-        return (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.quantity) !== undefined &&
-            editedSubscription.quantity <= quantity;
-    };
-    var onChangeQuantity = function (chargeIndex, value, priceListChargeId, subscription, subscriptionIndex) {
-        var quantity = isNaN(parseInt(value)) ? 0 : parseInt(value);
-        setEditedSubscription({
-            chargeIndex: chargeIndex,
-            subscriptionIndex: subscriptionIndex,
-            chargeId: priceListChargeId,
-            quantity: quantity,
-            subscription: subscription,
         });
-        if (quantity !== charge.quantity) {
-            setUpdatingChargeQuantityId(charge.id);
-        }
-        else {
-            setUpdatingChargeQuantityId(undefined);
-        }
-    };
-    var handleSubscriptionUpdate = function (editedSubscription) {
-        if (!editedSubscription)
-            return;
-        // If we are not editing a quote, we create a new one
-        if (!editingQuote) {
-            var subscriptionIds = [];
-            var charge_1 = subscriptions[editedSubscription.subscriptionIndex].charges[editedSubscription.chargeIndex];
-            if (isQuantityLowerThanOriginal(charge_1.quantity)) {
-                // If the quantity is lower than the original, we remove the quote
-                setEditingQuoteData(undefined);
-                setUpdatingChargeQuantityId(undefined);
-                return;
-            }
-            subscriptionIds.push(editedSubscription.subscription.id);
-            createQuote.mutate(subscriptionIds);
-        }
-        else {
-            // If we are editing a quote, we update the quote change
-            var _a = createQuoteParams(editingQuote, charge.quantity, editedSubscription), charges = _a.charges, quoteChange = _a.quoteChange;
-            if (quoteChange && charges[0].quantity > 0) {
-                updateQuote.mutate({
-                    charges: charges,
-                    quoteChangeId: quoteChange.id,
-                });
-            }
-            else {
-                // Reset the editing quote data and the updating charge quantity ID to their initial states
-                setEditingQuoteData(undefined);
-                setUpdatingChargeQuantityId(undefined);
-            }
-        }
-    };
-    // Initial subscription quantity if is on mobile
-    useEffect(function () {
-        if (isMobile && !editedSubscription && !quantityDisabled) {
-            setEditedSubscription({
-                chargeIndex: chargeIndex,
-                subscriptionIndex: subscriptionIndex,
-                chargeId: charge.priceListChargeId,
-                quantity: charge.quantity,
-                subscription: subscription,
-            });
-        }
-    }, [
-        charge,
-        chargeIndex,
-        editedSubscription,
-        isMobile,
-        quantityDisabled,
-        subscription,
-        subscriptionIndex,
-    ]);
-    // Edit subscription debounce
-    useEffect(function () {
-        var debounce = setTimeout(function () {
-            handleSubscriptionUpdate(editedSubscription);
-        }, 1000);
-        return function () { return clearTimeout(debounce); };
-        // eslint-disable-next-line
-    }, [editedSubscription]);
-    return (jsx(Fragment, { children: jsx(Input, { className: "text-right", disabled: quantityDisabled, onBlur: function () {
-                if (typeof value === "number" && value < charge.quantity) {
-                    showErrorNotification("New value is less than the original quantity. This is not allowed");
+    }
+    function handlePaymentSaveSuccess(paymentSuccess) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function () {
+            var response, plugin;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        if (!formData) {
+                            throw new Error("Form data is required");
+                        }
+                        response = paymentSuccess.pluginPaymentResponse;
+                        plugin = response === null || response === void 0 ? void 0 : response.plugin;
+                        if (!(plugin === null || plugin === void 0 ? void 0 : plugin.id)) {
+                            throw new Error("Plugin ID is required");
+                        }
+                        if (!accountId) {
+                            throw new Error("Account ID is required");
+                        }
+                        if (!portalSessionToken) {
+                            throw new Error("Portal session token is required");
+                        }
+                        return [4 /*yield*/, accountSignup({
+                                token: portalSessionToken,
+                                apiHost: apiHost,
+                                entityId: entityId,
+                                quoteId: quoteId,
+                                paymentMethodId: (_a = paymentSuccess.savedPaymentMethodResponse) === null || _a === void 0 ? void 0 : _a.paymentMethodId.toString(),
+                                pluginId: plugin.id.toString(),
+                                priceListCode: priceListCode,
+                                accountId: accountId,
+                            })];
+                    case 1:
+                        _b.sent();
+                        setIsPaying(false);
+                        setPurchaseSucceeded(true);
+                        return [2 /*return*/];
                 }
-            }, onChange: function (e) {
-                onChangeQuantity(chargeIndex, e.target.value, charge.priceListChargeId, subscription, subscriptionIndex);
-            }, status: isQuantityLowerThanOriginal(charge.quantity) ? "error" : "", style: { width: "96px" }, value: value }) }));
-};
-var QuantityChangeGridRow = function (_a) {
-    var _b;
-    var chargeIndex = _a.chargeIndex, editingQuote = _a.editingQuote, subscriptions = _a.subscriptions, subscriptionIndex = _a.subscriptionIndex, setEditingQuoteData = _a.setEditingQuoteData, subscription = _a.subscription, subscriptionCharge = _a.subscriptionCharge;
-    if (!canShowQuantitiesInput(subscriptionCharge, subscription))
-        return null;
-    return (jsxs(Fragment, { children: [jsx("div", __assign({ className: "font-medium text-orange-600 col-span-full", style: { fontSize: "11px" } }, { children: subscription.plan.name })), jsx("div", __assign({ className: "font-medium text-base text-gray-900" }, { children: (_b = subscriptionCharge.name) === null || _b === void 0 ? void 0 : _b.toUpperCase() })), jsx("div", __assign({ className: "flex items-center justify-end font-medium text-base text-gray-900" }, { children: subscriptionCharge.quantity })), jsxs("div", __assign({ className: "flex flex-col items-end" }, { children: [jsx(QuantityInput, { charge: subscriptionCharge, chargeIndex: chargeIndex, editingQuote: editingQuote, setEditingQuoteData: setEditingQuoteData, subscription: subscription, subscriptionIndex: subscriptionIndex, subscriptions: subscriptions }), jsx("div", {})] })), jsx(Divider, { className: "col-span-full my-2" })] }));
-};
-var QuantityChangeGridTitle = function (_a) {
-    var children = _a.children, right = _a.right;
-    return (jsx("div", __assign({ className: "font-medium text-slate-600 ".concat(right ? "text-right" : "text-left"), style: { fontSize: "11px" } }, { children: children })));
-};
-var QuoteChangeSummarySection = function (_a) {
-    var editingQuote = _a.editingQuote, editingQuoteData = _a.editingQuoteData, openCheckout = _a.openCheckout, setEditingQuoteData = _a.setEditingQuoteData;
-    var isMobile = useIsMobile$1();
-    var token = useContext(BunnyContext).token;
-    var showSuccessNotification = NotificationUtils.useSuccessNotification();
-    var trialUpgradeMutation = useMutation({
-        mutationFn: function (quoteId) { return checkout({ quoteId: quoteId, token: token }); },
-        onSuccess: function () {
-            setEditingQuoteData(undefined);
-            showSuccessNotification("Subscription updated successfully");
-        },
-    });
-    return (jsxs("div", __assign({ className: "flex flex-col items-end" }, { children: [editingQuote && (jsxs("div", __assign({ className: "flex flex-col mb-8" }, { children: [jsx("div", __assign({ className: "text-slate-500 text-right text-xs mb-2" }, { children: "TOTAL" })), jsx("div", __assign({ className: "text-right ".concat(isMobile ? "text-2xl" : "text-xl") }, { children: Misc.formatCurrency(getQuoteAmountDue(editingQuote), (editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.currencyId) || "") }))] }))), jsx("div", __assign({ className: "flex items-center justify-end ".concat(isMobile ? "w-full" : "") }, { children: jsx(Button, __assign({ className: "w-full", onClick: (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.isTrial)
-                        ? function () { return trialUpgradeMutation.mutate(editingQuoteData.id); }
-                        : 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 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 = useState(open), openLocal = _b[0], setOpenLocal = _b[1];
-    var isMobile = useIsMobile$1();
-    useEffect(function () {
-        var timeoutId;
-        if (!open) {
-            timeoutId = setTimeout(function () {
-                setOpenLocal(false);
-            }, 300); // Delay to allow for close animation
-        }
-        else {
-            setOpenLocal(true);
-        }
-        return function () { return clearTimeout(timeoutId); };
-    }, [open]);
-    if (!openLocal)
-        return null;
-    return (jsxs(Drawer, __assign({ closeIcon: null, destroyOnClose: true, onClose: onClose, open: open, styles: isMobile
-            ? {
-                body: {
-                    padding: "1rem",
-                    overflow: "hidden",
-                    background: SLATE_50,
-                },
-                wrapper: {
-                    width: "100vw",
-                },
-            }
-            : {
-                wrapper: {
-                    minWidth: "600px",
-                },
-            }, title: jsx(DrawerHeader, { description: QUANTITY_CHANGE_HEADER_DESCRIPTION, onClose: onClose, title: QUANTITY_CHANGE_HEADER_TITLE }) }, { children: [jsxs("div", __assign({ className: "grid pb-4", style: {
-                    gridTemplateColumns: "2fr 1fr 1fr",
-                    rowGap: "0.75rem",
-                    columnGap: "1rem",
-                } }, { children: [jsx(QuantityChangeGridTitle, { children: "ACTIVE SUBSCRIPTIONS" }), jsx(QuantityChangeGridTitle, __assign({ right: true }, { children: "CURRENT QUANTITY" })), jsx(QuantityChangeGridTitle, __assign({ right: true }, { children: "NEW QUANTITY" })), jsx(Divider, { className: "col-span-full py-2" }), subscriptions.map(function (subscription, index) {
-                        var _a;
-                        var isTrial = ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === SubscriptionState$2.TRIAL;
-                        return (jsx("div", __assign({ className: "contents" }, { children: subscription.charges.map(function (charge, chargeIndex) {
-                                if ((isTrial && !charge.trial) || (!isTrial && charge.trial))
-                                    return null;
-                                return (jsx(QuantityChangeGridRow, { chargeIndex: chargeIndex, editingQuote: editingQuote, setEditingQuoteData: setEditingQuoteData, subscription: subscription, subscriptionCharge: charge, subscriptionIndex: index, subscriptions: subscriptions }, chargeIndex));
-                            }) }), index));
-                    })] })), jsx(QuoteChangeSummarySection, { editingQuote: editingQuote, editingQuoteData: editingQuoteData, openCheckout: openCheckout, setEditingQuoteData: setEditingQuoteData })] })));
-};
+            });
+        });
+    }
+    function handlePaymentFail(error) {
+        showErrorNotification(error.message);
+        setIsPaying(false);
+    }
+    if (isMobile) {
+        return (jsx(Card, __assign({ className: "p-4 flex flex-col" }, { children: purchaseSucceeded ? (jsx(PaymentSuccessDisplay, { amountPaid: (quote === null || quote === void 0 ? void 0 : quote.amountDue) || 0, className: "w-full", companyName: companyName, returnUrl: returnUrl })) : (jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-col" : "flex-row", " h-full w-full") }, { children: [jsx("div", __assign({ className: "flex flex-col items-center" }, { children: jsx(PriceListDisplay, { priceListData: priceListData, topNavImageUrl: topNavImageUrl }) })), jsx("div", __assign({ className: "mx-8" }, { children: jsx(Divider, { className: "h-full" }) })), jsx("div", __assign({ className: "flex items-center justify-center my-12" }, { children: jsx(PaymentForms, { entityId: entityId, quote: quote, paying: paying, setIsPaying: setIsPaying, handlePaymentSaveSuccess: handlePaymentSaveSuccess, handlePaymentFail: handlePaymentFail, handleSubmit: handleSubmit, proceedingToPayment: proceedingToPayment, accountId: accountId || "" }) }))] }))) })));
+    }
+    else {
+        return (jsx(Fragment, { children: jsx(Card, __assign({ className: "p-4 flex flex-col w-screen h-screen" }, { children: purchaseSucceeded ? (jsx(PaymentSuccessDisplay, { amountPaid: (quote === null || quote === void 0 ? void 0 : quote.amountDue) || 0, className: "w-full", companyName: companyName, returnUrl: returnUrl })) : (jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-col" : "flex-row", " h-full w-full") }, { children: [jsx("div", __assign({ className: "flex flex-col w-1/2 items-center" }, { children: jsx(PriceListDisplay, { priceListData: priceListData, topNavImageUrl: topNavImageUrl }) })), jsx("div", __assign({ className: "my-4" }, { children: jsx(Divider, { className: "h-full", type: "vertical" }) })), jsx("div", __assign({ className: "flex w-1/2 items-center justify-center my-12" }, { children: jsx(PaymentForms, { entityId: entityId, quote: quote, paying: paying, setIsPaying: setIsPaying, handlePaymentSaveSuccess: handlePaymentSaveSuccess, handlePaymentFail: handlePaymentFail, handleSubmit: handleSubmit, proceedingToPayment: proceedingToPayment, accountId: accountId || "" }) }))] }))) })) }));
+    }
+}
 // WARNING: There is a preview button on APP that will need to be changed if this query is changed
 var PLAN_CHANGE_OPTIONS_QUERY = "\n  query planChangeOptions($subscriptionId: ID) {\n    planChangeOptions(subscriptionId: $subscriptionId) {\n      products {\n        everythingInPlus\n        id\n        name\n        features(sort: \"position asc\") {\n          description\n          id\n          isVisible\n          kind\n          name\n          position\n        }\n      }\n      plans {\n        code\n        contactUsLabel\n        contactUsUrl\n        description\n        id\n        name\n        position\n        pricingDescription\n        pricingStyle\n        planFeatures {\n          featureId\n          value\n          feature {\n            name\n          }\n        }\n        priceLists {\n          basePrice\n          id\n          currencyId\n          periodMonths\n          plan {\n            id\n            position\n          }\n          product {\n            id\n          }\n          charges {\n            basePrice\n            billingPeriod\n            chargeType\n            id\n            name\n            priceDecimals\n            pricingModel\n            quantityMax\n            quantityMin\n            selfServiceQuantity\n            feature {\n              name\n              unitName\n            }\n          }\n        }\n        productId\n      }\n    }\n  }";
 var getPlanChangeOptions = function (_a) {
-    var isInPreviewMode = _a.isInPreviewMode, token = _a.token, upgradingSubscription = _a.upgradingSubscription, subdomain = _a.subdomain;
+    var isInPreviewMode = _a.isInPreviewMode, token = _a.token, upgradingSubscription = _a.upgradingSubscription, apiHost = _a.apiHost;
     return __awaiter(void 0, void 0, void 0, function () {
         var response, planChangeOptions;
         return __generator(this, function (_b) {
@@ -4727,7 +4458,7 @@ var getPlanChangeOptions = function (_a) {
                         query: PLAN_CHANGE_OPTIONS_QUERY,
                         vars: { subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id },
                         token: token,
-                        subdomain: subdomain,
+                        apiHost: apiHost,
                     })];
                 case 1:
                     response = _b.sent();
@@ -4746,7 +4477,7 @@ var getPlanChangeOptions = function (_a) {
 var QUOTE_QUERY = function () { return "\n        query quote($id: ID) {\n            quote(id: $id) {\n                accountId\n                amount\n                amountDue\n                smallUnitAmountDue\n                currencyId\n                formattedQuote {\n                  html\n                }\n                id\n                payableId\n                periodAmount\n                subtotal\n                taxAmount\n                amountsByPeriod {\n                    amount\n                    startDate\n                }\n                quoteChanges {\n                    currencyId\n                    id\n                    charges {\n                        amountsByPeriod {\n                          amount\n                          startDate\n                        }\n                        amount\n                        billingPeriod\n                        currencyId\n                        feature {\n                          unitName\n                        }\n                        id\n                        name\n                        priceListCharge {\n                          id\n                        }\n                        quantity\n                    }\n                    priceList {\n                        id\n                        plan {\n                            name\n                        }\n                        product {\n                            name\n                        }\n                    }\n\n                }\n            }\n        }"; };
 var getQuote = function (_a) {
-    var id = _a.id, token = _a.token, subdomain = _a.subdomain;
+    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) {
@@ -4755,7 +4486,7 @@ var getQuote = function (_a) {
                         query: QUOTE_QUERY(),
                         token: token,
                         vars: { id: id },
-                        subdomain: subdomain,
+                        apiHost: apiHost,
                     })];
                 case 1:
                     response = _b.sent();
@@ -4767,7 +4498,7 @@ var getQuote = function (_a) {
 var SUBSCRIPTIONS_QUERY = "query 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          isRamp\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 entityId = _a.entityId, isInPreviewMode = _a.isInPreviewMode, token = _a.token, subdomain = _a.subdomain;
+    var entityId = _a.entityId, isInPreviewMode = _a.isInPreviewMode, token = _a.token, apiHost = _a.apiHost;
     return __awaiter(void 0, void 0, void 0, function () {
         var response;
         var _b;
@@ -4778,7 +4509,7 @@ var getSubscriptions = function (_a) {
                         query: SUBSCRIPTIONS_QUERY,
                         token: token,
                         vars: { entityId: entityId },
-                        subdomain: subdomain,
+                        apiHost: apiHost,
                     })];
                 case 1:
                     response = _c.sent();
@@ -4848,7 +4579,7 @@ var ErrorView = function (_a) {
 var Text$3 = Typography.Text;
 var HideExpiredToggle = function (_a) {
     var hideExpired = _a.hideExpired, setHideExpired = _a.setHideExpired, subscriptions = _a.subscriptions;
-    var isMobile = useIsMobile$1();
+    var isMobile = useIsMobile(window);
     var secondaryColor = useContext(BrandContext).secondaryColor;
     var hasExpiredOrCanceledSubscriptions = subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.some(function (subscription) {
         var _a, _b;
@@ -4864,6 +4595,42 @@ var HideExpiredToggle = function (_a) {
 var StyledCheckbox = styled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  .ant-checkbox-wrapper span {\n    padding-inline-end: 0 !important;\n  }\n"], ["\n  .ant-checkbox-wrapper span {\n    padding-inline-end: 0 !important;\n  }\n"])));
 var templateObject_1$2;
+// import { EditingSubscriptionType } from "../../../features/quantityChangeDrawer/QuantityInput";
+var canShowQuantitiesInput = function (charge, subscription) {
+    // Check if the subscription is active, pending, or in trial,
+    // the pricing model is not flat,
+    // and if it's not a trial, also check if the current charge is the last one in the subscription.
+    var _a, _b, _c;
+    var isActiveSubscription = ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === SubscriptionState$2.ACTIVE;
+    var isPendingSubscription = ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$2.PENDING;
+    var isTrialSubscription = ((_c = subscription.state) === null || _c === void 0 ? void 0 : _c.toUpperCase()) === SubscriptionState$2.TRIAL;
+    var isFlatPricing = charge.pricingModel === "FLAT";
+    var shouldProcessCharge = (isActiveSubscription || isPendingSubscription || isTrialSubscription) &&
+        !isFlatPricing &&
+        charge.selfServiceQuantity &&
+        !charge.expired;
+    // Now you can use the value of shouldProcessCharge to determine whether to process the charge.
+    return shouldProcessCharge;
+};
+var canShowChangeQuantities = function (_a) {
+    var subscriptions = _a.subscriptions;
+    return subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.some(function (subscription) {
+        return subscription.charges.some(function (charge, chargeIndex) {
+            return canShowQuantitiesInput(charge, subscription);
+        });
+    });
+};
+var isSubscriptionNotActive = function (subscription) {
+    var _a, _b;
+    return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === SubscriptionState$2.EXPIRED ||
+        ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$2.CANCELED;
+};
+var canShowSubscriptionActions = function (subscription) {
+    var _a, _b;
+    return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === SubscriptionState$2.ACTIVE ||
+        ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$2.PENDING;
+};
 var SubscriptionState;
 (function (SubscriptionState) {
     SubscriptionState["ACTIVE"] = "ACTIVE";
@@ -4876,7 +4643,7 @@ var SubscriptionState$1 = SubscriptionState;
 var FEATURE_USAGE_MUTATION = "\nquery GetFeatureUsage($id: ID!) {\n  featureUsageHistogram(subscriptionChargeId: $id) {\n    subscriptionCharge { \n      id\n      name\n      amount\n      currentPeriodPriceByTiers { \n        tier { starts price } \n        quantity\n        amount\n      }\n    }\n    feature { id name }\n    periodRange\n    dataInterval\n    data {\n      periodStart\n      periodEnd\n      intervals {\n        intervalStart\n        intervalUsage\n      }\n      intervalsTotal\n    }\n  }\n}\n";
 var getFeatureUsage = function (_a) {
-    var subscriptionChargeId = _a.subscriptionChargeId; _a.startDate; _a.endDate; _a.dataInterval; var token = _a.token;
+    var subscriptionChargeId = _a.subscriptionChargeId; _a.startDate; _a.endDate; _a.dataInterval; var token = _a.token, apiHost = _a.apiHost;
     return __awaiter(void 0, void 0, void 0, function () {
         var vars, response;
         var _b;
@@ -4890,6 +4657,7 @@ var getFeatureUsage = function (_a) {
                             query: FEATURE_USAGE_MUTATION,
                             token: token,
                             vars: vars,
+                            apiHost: apiHost,
                         })];
                 case 1:
                     response = _c.sent();
@@ -5028,7 +4796,7 @@ var FeatureUsageGraph = function (_a) {
         }
         return false;
     }))
-        return "no usage";
+        return jsx("div", { children: "no usage" });
     return (jsxs("div", __assign({ onClick: function () {
             setIsModalOpen(true);
         } }, { children: [jsx("div", __assign({ style: {
@@ -5060,7 +4828,7 @@ var templateObject_1;
 var MUTATION = "\nmutation quoteSubscriptionReinstate($ids: [ID!]!) {\n  quoteSubscriptionReinstate(ids: $ids) {\n    quote {\n      id\n      uuid\n      accountId\n      dealId\n      name\n      amount\n      taxAmount\n      discount\n      netPaymentDays\n      acceptedByName\n      acceptedByTitle\n      state\n      billingDay\n      evergreen\n      requiresApproval\n      isPendingApprovalRequest\n      poNumber\n      kind\n      currencyId\n      ownerId\n      contactId\n      quoteChanges {\n        id\n        priceListId\n        charges {\n          id\n          pricingModel\n          chargeType\n          billingPeriod\n          price\n          priceDecimals\n          tieredAveragePrice\n          quantity\n          quantityMin\n          quantityMax\n          discount\n          amount\n          prorationRate\n          name\n          invoiceLineText\n          createdAt\n          updatedAt\n          startDate\n          endDate\n          billingPeriodAmounts { id amount prorationRate }\n          currencyId\n          couponId\n          feature { id name code isUnit unitName }\n          priceTiers { starts price }\n        }\n      }\n      expiresAt\n      createdAt\n      updatedAt\n      startDate\n      endDate\n      invoiceUntil\n      applicationDate\n      applied\n      endDateOptions {\n        endDate\n        label\n      }\n      invoiceUntilOptions {\n        endDate\n        label\n      }\n      notes\n      message\n      amountsByPeriod {\n        id\n        name\n        amount\n      }\n      subtotal\n      credits\n      discountValue\n    }\n  }\n}\n";
 var getGuoteSubscriptionReinstate = function (_a) {
-    var ids = _a.ids, token = _a.token, subdomain = _a.subdomain;
+    var ids = _a.ids, token = _a.token, apiHost = _a.apiHost;
     return __awaiter(void 0, void 0, void 0, function () {
         var vars, response, _b, errors, quote;
         return __generator(this, function (_c) {
@@ -5071,7 +4839,7 @@ var getGuoteSubscriptionReinstate = function (_a) {
                             query: MUTATION,
                             token: token,
                             vars: vars,
-                            subdomain: subdomain,
+                            apiHost: apiHost,
                         })];
                 case 1:
                     response = _c.sent();
@@ -5084,32 +4852,16 @@ var getGuoteSubscriptionReinstate = function (_a) {
     });
 };
-var useCancelSubscription = function () {
-    var graphQLRequest = useGraphQLRequest();
-    return function (subscriptionIds, token) { return __awaiter(void 0, void 0, void 0, function () {
-        var data;
-        var _a;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
-                case 0: return [4 /*yield*/, graphQLRequest("\n    mutation SubscriptionCancel($subscriptionIds: [ID!]!) {\n      subscriptionCancel(ids: $subscriptionIds) {\n        subscriptions {\n          accountId\n          state\n        }\n      }\n    }", token, { subscriptionIds: subscriptionIds })];
-                case 1:
-                    data = _b.sent();
-                    return [2 /*return*/, (_a = data === null || data === void 0 ? void 0 : data.subscriptions) === null || _a === void 0 ? void 0 : _a.nodes];
-            }
-        });
-    }); };
-};
 var SubscriptionCardActions = function (_a) {
     var _b, _c;
     var planChangeOptions = _a.planChangeOptions, subscription = _a.subscription, setEditingQuoteData = _a.setEditingQuoteData, setPayModalVisible = _a.setPayModalVisible;
     // Context
-    var _d = useContext(BunnyContext), token = _d.token, subdomain = _d.subdomain;
+    var _d = useContext(BunnyContext), token = _d.token, apiHost = _d.apiHost;
     var _e = useContext(SubscriptionsContext), onChangePlanClick = _e.onChangePlanClick, onClickUpgrade = _e.onClickUpgrade, isTempViewOnly = _e.isTempViewOnly;
     // Hooks
-    var showSuccessNotification = NotificationUtils.useSuccessNotification();
-    var cancelSubscription = useCancelSubscription();
-    var queryClient = useQueryClient();
+    useSuccessNotification();
+    // const cancelSubscription = useCancelSubscription();
+    useQueryClient();
     // const navigate = usePortalNavigate();
     // const handleUpgradingSubscriptionChange =
     //   useHandleUpgradingSubscriptionChange();
@@ -5118,21 +4870,21 @@ var SubscriptionCardActions = function (_a) {
     var productPlans = (_b = planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans) === null || _b === void 0 ? void 0 : _b.filter(function (plan) { var _a; return ((_a = plan.priceLists) === null || _a === void 0 ? void 0 : _a.length) > 0 && plan.productId === subscription.product.id; });
     var canShowChangePlanButton = ((productPlans === null || productPlans === void 0 ? void 0 : productPlans.length) || 0) > 0;
     // Mutations
-    var subscriptionCancel = useMutation({
-        mutationFn: function () { return cancelSubscription([subscription.id], token); },
-        onSuccess: function () {
-            queryClient.invalidateQueries({
-                queryKey: QueryKeyFactory.default.createTableKey("subscriptions"),
-            });
-            showSuccessNotification("Subscription canceled");
-        },
-    });
+    // const subscriptionCancel = useMutation({
+    //   mutationFn: () => cancelSubscription([subscription.id], token),
+    //   onSuccess: () => {
+    //     queryClient.invalidateQueries({
+    //       queryKey: QueryKeyFactory.default.createTableKey("subscriptions"),
+    //     });
+    //     showSuccessNotification("Subscription canceled");
+    //   },
+    // });
     useMutation({
         mutationFn: function () {
             return getGuoteSubscriptionReinstate({
                 ids: [subscription.id],
                 token: token,
-                subdomain: subdomain,
+                apiHost: apiHost,
             });
         },
         onSuccess: function (quote) {
@@ -5152,7 +4904,9 @@ var SubscriptionCardActions = function (_a) {
         onChangePlanClick();
     };
     return (canShowChangePlanButton || canShowCancelButton) &&
-        canShowSubscriptionActions(subscription) ? (jsxs(Fragment, { children: [!isTempViewOnly && canShowCancelButton && (jsx(Popconfirm, __assign({ icon: null, onConfirm: function () { return subscriptionCancel.mutate(); }, title: "Cancel subscription" }, { children: jsx(Button, __assign({ className: "p-0", type: "link" }, { children: "Cancel subscription" })) }))), !isTempViewOnly && canShowChangePlanButton && (jsx(Button, __assign({ onClick: function () { return handleChangePlanClick(); }, type: "primary" }, { children: "Change plan" })))] })) : ((_c = subscription.state) === null || _c === void 0 ? void 0 : _c.toUpperCase()) === SubscriptionState$2.TRIAL ? (jsx(Fragment, { children: !isTempViewOnly && (jsx(Button, __assign({ onClick: function () {
+        canShowSubscriptionActions(subscription) ? (jsxs(Fragment, { children: [!isTempViewOnly && canShowCancelButton && (jsx(Popconfirm, __assign({ icon: null,
+                // onConfirm={() => subscriptionCancel.mutate()}
+                title: "Cancel subscription" }, { children: jsx(Button, __assign({ className: "p-0", type: "link" }, { children: "Cancel subscription" })) }))), !isTempViewOnly && canShowChangePlanButton && (jsx(Button, __assign({ onClick: function () { return handleChangePlanClick(); }, type: "primary" }, { children: "Change plan" })))] })) : ((_c = subscription.state) === null || _c === void 0 ? void 0 : _c.toUpperCase()) === SubscriptionState$2.TRIAL ? (jsx(Fragment, { children: !isTempViewOnly && (jsx(Button, __assign({ onClick: function () {
                 // handleUpgradingSubscriptionChange({
                 //   subscription,
                 // });
@@ -5170,22 +4924,22 @@ var getSubscriptionStatusText = function (subscription) {
     if (cancellationDate &&
         (state === null || state === void 0 ? void 0 : state.toUpperCase()) !== SubscriptionState$2.CANCELED &&
         (state === null || state === void 0 ? void 0 : state.toUpperCase()) !== SubscriptionState$2.EXPIRED) {
-        return (jsxs(Tag, __assign({ color: "red" }, { children: ["Canceled - ends on ", Misc.formatDate(cancellationDate)] })));
+        return (jsxs(Tag, __assign({ color: "red" }, { children: ["Canceled - ends on ", formatDate(cancellationDate)] })));
     }
     if (evergreen) {
-        return "Renews on ".concat(Misc.formatDate(endDate));
+        return "Renews on ".concat(formatDate(endDate));
     }
     if ((state === null || state === void 0 ? void 0 : state.toUpperCase()) === SubscriptionState$2.CANCELED ||
         (state === null || state === void 0 ? void 0 : state.toUpperCase()) === SubscriptionState$2.EXPIRED) {
-        return "Ended on ".concat(Misc.formatDate(endDate));
+        return "Ended on ".concat(formatDate(endDate));
     }
-    return "Ends on ".concat(Misc.formatDate(endDate));
+    return "Ends on ".concat(formatDate(endDate));
 };
 var SubscriptionCardHeader = function (_a) {
     var _b, _c, _d, _e, _f;
     var planChangeOptions = _a.planChangeOptions, setEditingQuoteData = _a.setEditingQuoteData, setPayModalVisible = _a.setPayModalVisible, subscription = _a.subscription;
     var darkMode = useContext(BunnyContext).darkMode;
-    var isMobile = useIsMobile$1();
+    var isMobile = useIsMobile(window);
     // Derived state
     var trialDaysLeft = dayjs(subscription.trialEndDate).diff(dayjs(), "days");
     var isTrial = ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$2.TRIAL;
@@ -5204,8 +4958,8 @@ var BillingPeriodConverter;
 })(BillingPeriodConverter || (BillingPeriodConverter = {}));
 var SubscriptionChargeTotal = function (_a) {
     var charge = _a.charge, subscription = _a.subscription;
-    var isMobile = useIsMobile$1();
-    return (jsxs("div", __assign({ className: "flex gap-1 ".concat(isMobile ? "flex-col" : "") }, { children: [jsx("div", { children: Misc.formatCurrency(Number(charge.periodPrice), subscription.currencyId) }), charge.billingPeriod && (jsx("div", { children: BillingPeriodConverter[charge.billingPeriod] }))] })));
+    var isMobile = useIsMobile(window);
+    return (jsxs("div", __assign({ className: "flex gap-1 ".concat(isMobile ? "flex-col" : "") }, { children: [jsx("div", { children: formatCurrency(Number(charge.periodPrice), subscription.currencyId) }), charge.billingPeriod && (jsx("div", { children: BillingPeriodConverter[charge.billingPeriod] }))] })));
 };
 var SubscriptionChargeUnitPrice = function (_a) {
@@ -5225,16 +4979,16 @@ var SubscriptionChargeUnitPrice = function (_a) {
                             var ends = ((_c = (_b = (_a = charge.priceListCharge) === null || _a === void 0 ? void 0 : _a.priceListChargeTiers) === null || _b === void 0 ? void 0 : _b[index + 1]) === null || _c === void 0 ? void 0 : _c.starts)
                                 ? ((_e = (_d = charge.priceListCharge) === null || _d === void 0 ? void 0 : _d.priceListChargeTiers[index + 1]) === null || _e === void 0 ? void 0 : _e.starts) - 1
                                 : "∞";
-                            return (jsxs("div", __assign({ className: "contents" }, { children: [jsxs("div", __assign({ className: "whitespace-nowrap" }, { children: [tier.starts.toLocaleString(), " - ", ends.toLocaleString(), " ", ":"] })), jsx("div", __assign({ className: "whitespace-nowrap text-right" }, { children: Misc.formatCurrency(tier.price, subscription.currencyId, charge.priceDecimals) }))] }), index));
+                            return (jsxs("div", __assign({ className: "contents" }, { children: [jsxs("div", __assign({ className: "whitespace-nowrap" }, { children: [tier.starts.toLocaleString(), " - ", ends.toLocaleString(), " ", ":"] })), jsx("div", __assign({ className: "whitespace-nowrap text-right" }, { children: formatCurrency(tier.price, subscription.currencyId, charge.priceDecimals) }))] }), index));
                         }) })) })));
             }, onOpenChange: setShowPriceTiers, open: showPriceTiers, trigger: ["click"] }, { children: jsx("div", __assign({ className: "cursor-pointer underline", onClick: function () { return setShowPriceTiers(!showPriceTiers); } }, { children: showPriceTiers ? "hide details" : "show details" })) })));
     }
-    return (jsx(Fragment, { children: Misc.formatCurrency(charge.discountedPrice, subscription.currencyId) }));
+    return jsx(Fragment, { children: formatCurrency(charge.discountedPrice, subscription.currencyId) });
 };
 var SubscriptionCardColumnHeaders = function (_a) {
     var columns = _a.columns;
-    return columns.map(function (subscriptionColumn, index) { return (jsx("div", __assign({ className: "text-slate-400 ".concat(subscriptionColumn.className), style: { fontSize: "11px" } }, { children: subscriptionColumn.title }), index)); });
+    return (jsx(Fragment, { children: columns.map(function (subscriptionColumn, index) { return (jsx("div", __assign({ className: "text-slate-400 ".concat(subscriptionColumn.className), style: { fontSize: "11px" } }, { children: subscriptionColumn.title }), index)); }) }));
 };
 var Text$1 = Typography.Text;
@@ -5291,13 +5045,13 @@ var SubscriptionCardDesktop = function (_a) {
 var SubscriptionCardDesktopRow = function (_a) {
     var charge = _a.charge, chargeIndex = _a.chargeIndex, subscription = _a.subscription;
     // Context
-    var token = useContext(BunnyContext).token;
+    var _b = useContext(BunnyContext), token = _b.token, apiHost = _b.apiHost;
     // Derived state
     var isRamp = charge.isRamp;
     var prevCharge = subscription.charges[chargeIndex - 1];
     var isFirstRampRow = chargeIndex === 0 ||
         (prevCharge === null || prevCharge === void 0 ? void 0 : prevCharge.priceListChargeId) !== charge.priceListChargeId;
-    var chargePeriod = "".concat(Misc.formatDate(charge.startDate), " - ").concat(Misc.formatDate(charge.endDate));
+    var chargePeriod = "".concat(formatDate(charge.startDate), " - ").concat(formatDate(charge.endDate));
     // Queries
     var data = useQuery({
         queryKey: ["getFeatureUsage", charge.id, charge.startDate, charge.endDate],
@@ -5307,6 +5061,7 @@ var SubscriptionCardDesktopRow = function (_a) {
                 startDate: charge.startDate,
                 subscriptionChargeId: charge.id,
                 token: token,
+                apiHost: apiHost,
             });
         },
         enabled: (!isRamp || (isRamp && isFirstRampRow)) &&
@@ -5366,7 +5121,7 @@ var SubscriptionCard = function (_a) {
                             if ((isTrial && !charge.trial) || (!isTrial && charge.trial))
                                 return null;
                             var isRamp = charge.isRamp;
-                            var chargePeriod = "".concat(Misc.formatDate(charge.startDate), " - ").concat(Misc.formatDate(charge.endDate));
+                            var chargePeriod = "".concat(formatDate(charge.startDate), " - ").concat(formatDate(charge.endDate));
                             return (jsxs("div", __assign({ className: "contents" }, { children: [((isRamp && chargeIndex === 0) || !isRamp) && (jsxs(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[0].className, style: { gridColumn: isRamp ? "1/-1" : "1" } }, { children: [jsx("span", { children: charge.name }), !isRamp ? " - ".concat(chargePeriod) : ""] }))), isRamp && (jsx(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[0].className }, { children: "- ".concat(chargePeriod) }))), jsx(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[1].className }, { children: charge.quantity })), jsx(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[2].className }, { children: jsx(SubscriptionChargeUnitPrice, { charge: charge, subscription: subscription }) })), jsx(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[3].className }, { children: jsx(SubscriptionChargeTotal, { charge: charge, subscription: subscription }) }))] }), chargeIndex));
                         })] })), jsx("div", __assign({ className: "flex gap-2 pt-5", style: {
                         flexDirection: "column-reverse",
@@ -5375,14 +5130,14 @@ var SubscriptionCard = function (_a) {
 var SubscriptionsList = function (_a) {
     var hideExpired = _a.hideExpired, planChangeOptions = _a.planChangeOptions, setEditingQuoteData = _a.setEditingQuoteData, setPayModalVisible = _a.setPayModalVisible, subscriptions = _a.subscriptions;
-    var isMobile = useIsMobile$1();
-    return subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.map(function (subscription, subscriptionIndex) {
-        if (hideExpired && isSubscriptionNotActive(subscription))
-            return null;
-        if (isMobile)
-            return (jsx(SubscriptionCard, { planChangeOptions: planChangeOptions, setEditingQuoteData: setEditingQuoteData, setPayModalVisible: setPayModalVisible, subscription: subscription }, subscriptionIndex));
-        return (jsx(SubscriptionCardDesktop, { planChangeOptions: planChangeOptions, setEditingQuoteData: setEditingQuoteData, setPayModalVisible: setPayModalVisible, subscription: subscription }, subscriptionIndex));
-    });
+    var isMobile = useIsMobile(window);
+    return (jsx(Fragment, { children: subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.map(function (subscription, subscriptionIndex) {
+            if (hideExpired && isSubscriptionNotActive(subscription))
+                return null;
+            if (isMobile)
+                return (jsx(SubscriptionCard, { planChangeOptions: planChangeOptions, setEditingQuoteData: setEditingQuoteData, setPayModalVisible: setPayModalVisible, subscription: subscription }, subscriptionIndex));
+            return (jsx(SubscriptionCardDesktop, { planChangeOptions: planChangeOptions, setEditingQuoteData: setEditingQuoteData, setPayModalVisible: setPayModalVisible, subscription: subscription }, subscriptionIndex));
+        }) }));
 };
 var ChangeQuantitiesButton = function (_a) {
@@ -5398,7 +5153,7 @@ var SubscriptionsNavigation = function (_a) {
     var hideExpired = _a.hideExpired, setHideExpired = _a.setHideExpired, setQuantityDrawerOpen = _a.setQuantityDrawerOpen, subscriptions = _a.subscriptions;
     var isTempViewOnly = useContext(SubscriptionsContext).isTempViewOnly;
     // Hooks
-    var isMobile = useIsMobile$1();
+    var isMobile = useIsMobile(window);
     // Derived state
     var canShowChangeQuantitiesButton = canShowChangeQuantities({
         subscriptions: subscriptions,
@@ -5407,44 +5162,48 @@ var SubscriptionsNavigation = function (_a) {
 };
 var SubscriptionsContext = createContext({});
+// !!! This component is intended to be view only, however it still has lots of code for full functionality.
+// !!! This must be refactored.
 var Subscriptions = function (_a) {
-    var shadow = _a.shadow, gap = _a.gap, _b = _a.showTitle, showTitle = _b === void 0 ? true : _b;
+    var companyName = _a.companyName, entityId = _a.entityId, gap = _a.gap, shadow = _a.shadow, _b = _a.showTitle, showTitle = _b === void 0 ? true : _b;
     // Context
-    var _c = useContext(BunnyContext), token = _c.token, subdomain = _c.subdomain;
+    var _c = useContext(BunnyContext), token = _c.token, apiHost = _c.apiHost, onErrorNavigate = _c.onErrorNavigate;
     // Recoil state
-    var _d = useRecoilState(updatingChargeQuantityIdState), updatingChargeQuantityId = _d[0], setUpdatingChargeQuantityId = _d[1];
+    // const [updatingChargeQuantityId, setUpdatingChargeQuantityId] =
+    //   useRecoilState(updatingChargeQuantityIdState);
     // Local state
-    var _e = useState(), editingQuoteData = _e[0], setEditingQuoteData = _e[1];
-    var _f = useState(false), payModalVisible = _f[0], setPayModalVisible = _f[1];
-    var _g = useState(true), hideExpired = _g[0], setHideExpired = _g[1];
-    var _h = useState(false), quantityDrawerOpen = _h[0], setQuantityDrawerOpen = _h[1];
+    var _d = useState(), editingQuoteData = _d[0], setEditingQuoteData = _d[1];
+    var _e = useState(false), payModalVisible = _e[0], setPayModalVisible = _e[1];
+    var _f = useState(true), hideExpired = _f[0], setHideExpired = _f[1];
+    var _g = useState(false); _g[0]; var setQuantityDrawerOpen = _g[1];
     // Hooks
-    var handleAllErrorFormats = NotificationUtils.useAllErrorFormats(function () { });
+    var handleAllErrorFormats = useAllErrorFormats(onErrorNavigate ||
+        (function (url) {
+            console.log("navigate to", url, " not implemented");
+        }));
     var queryClient = useQueryClient();
-    var showSuccessNotification = NotificationUtils.useSuccessNotification();
-    var quoteDelete = useQuoteDelete();
-    var isMobile = useIsMobile$1();
-    var entityId = useCurrentUserData().entityId;
-    var companyName = useCurrentUserData().companyName;
+    var showSuccessNotification = useSuccessNotification();
+    // const quoteDelete = useQuoteDelete();
+    var isMobile = useIsMobile(window);
     // Queries
-    var _j = useQuery({
+    var _h = useQuery({
         queryKey: QueryKeyFactory.default.createTableKey("subscriptions"),
-        queryFn: function () { return getSubscriptions({ entityId: entityId, token: token, subdomain: subdomain }); },
+        queryFn: function () { return getSubscriptions({ entityId: entityId, token: token, apiHost: apiHost }); },
         enabled: Boolean(entityId),
-    }), rawSubscriptions = _j.data, subscriptionsAreLoading = _j.isLoading;
+    }), rawSubscriptions = _h.data, subscriptionsAreLoading = _h.isLoading;
     var quote = useQuery({
         queryKey: QueryKeyFactory.default.createObjectKey("editingQuote", editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id),
         queryFn: function () {
             return (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id)
-                ? getQuote({ token: token, id: editingQuoteData.id, subdomain: subdomain })
+                ? getQuote({ token: token, id: editingQuoteData.id, apiHost: apiHost })
                 : undefined;
         },
         enabled: Boolean(editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id),
     }).data;
-    var _k = useQuery({
+    var _j = useQuery({
         queryKey: QueryKeyFactory.default.planChangeOptionsKey(),
-        queryFn: function () { return getPlanChangeOptions({ token: token, subdomain: subdomain }); },
-    }), planChangeOptions = _k.data, arePlanChangeOptionsLoading = _k.isLoading;
+        queryFn: function () { return getPlanChangeOptions({ token: token, apiHost: apiHost }); },
+    }), planChangeOptions = _j.data, arePlanChangeOptionsLoading = _j.isLoading;
     // Derived state
     var subscriptions = useSubscriptions({ data: rawSubscriptions });
     var allSubscriptionsExpired = subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.every(function (subscription) {
@@ -5476,16 +5235,16 @@ var Subscriptions = function (_a) {
     var onFail = function (error) {
         handleAllErrorFormats(error);
     };
-    var onClose = function () {
-        if (editingQuoteData) {
-            quoteDelete(editingQuoteData.id, token);
-            setEditingQuoteData(undefined);
-        }
-        if (updatingChargeQuantityId) {
-            setUpdatingChargeQuantityId(undefined);
-        }
-        setQuantityDrawerOpen(false);
-    };
+    // const onClose = () => {
+    //   if (editingQuoteData) {
+    //     quoteDelete(editingQuoteData.id, token);
+    //     setEditingQuoteData(undefined);
+    //   }
+    //   // if (updatingChargeQuantityId) {
+    //   //   setUpdatingChargeQuantityId(undefined);
+    //   // }
+    //   setQuantityDrawerOpen(false);
+    // };
     if (subscriptionsAreLoading || arePlanChangeOptionsLoading)
         return jsx(Fragment, {});
     return (jsxs(SubscriptionsContext.Provider, __assign({ value: {
@@ -5499,9 +5258,9 @@ var Subscriptions = function (_a) {
             shadow: shadow,
             gap: gap,
             showTitle: showTitle,
-        } }, { children: [showTitle && (jsx(PageHeaderWithActions, __assign({ title: jsxs("div", __assign({ className: "flex items-center justify-between", style: { minWidth: "137px" } }, { children: [hideExpired ? "Active subscriptions" : "All subscriptions", isMobile && (jsx(HideExpiredToggle, { hideExpired: hideExpired, setHideExpired: setHideExpired, subscriptions: subscriptions }))] })) }, { children: !isMobile && (jsx(SubscriptionsNavigation, { hideExpired: hideExpired, setHideExpired: setHideExpired, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions })) }))), jsx(PageContent, __assign({ className: "flex flex-col gap-".concat(gap === undefined ? 4 : gap, " shadow-padding-xb overflow-auto"), style: {
+        } }, { children: [showTitle && (jsx(PageHeaderWithActions, __assign({ title: jsxs("div", __assign({ className: "flex items-center justify-between", style: { minWidth: "137px" } }, { children: [hideExpired ? "Active subscriptions" : "All subscriptions", isMobile && (jsx(HideExpiredToggle, { hideExpired: hideExpired, setHideExpired: setHideExpired, subscriptions: subscriptions }))] })) }, { children: !isMobile && (jsx(SubscriptionsNavigation, { hideExpired: hideExpired, setHideExpired: setHideExpired, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions })) }))), jsx("div", __assign({ className: "flex flex-col gap-".concat(gap === undefined ? 4 : gap, " shadow-padding-xb overflow-auto"), style: {
                     flexShrink: 1,
-                } }, { children: (subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.length) > 0 ? (jsx(SubscriptionsList, { hideExpired: hideExpired, planChangeOptions: planChangeOptions, setEditingQuoteData: setEditingQuoteData, setPayModalVisible: setPayModalVisible, subscriptions: subscriptions })) : (jsx("div", __assign({ className: "flex flex-col items-center w-full" }, { children: jsx(ErrorView, { message: "You have no subscriptions with ".concat(companyName, " yet") }) }))) })), isMobile && (jsx("div", __assign({ className: "pt-4 pb-2" }, { children: jsx(SubscriptionsNavigation, { hideExpired: hideExpired, setHideExpired: setHideExpired, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions }) }))), jsx(Footer, {}), jsx(QuantityChangeDrawerDesktop, { editingQuote: quote, editingQuoteData: editingQuoteData, onClose: onClose, open: quantityDrawerOpen, openCheckout: function () { return setPayModalVisible(true); }, setEditingQuoteData: setEditingQuoteData, subscriptions: subscriptions }), jsx(Checkout, { onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, quote: quote, token: token, isMobile: isMobile })] })));
+                } }, { children: (subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.length) > 0 ? (jsx(Fragment, { children: jsx(SubscriptionsList, { hideExpired: hideExpired, planChangeOptions: planChangeOptions, setEditingQuoteData: setEditingQuoteData, setPayModalVisible: setPayModalVisible, subscriptions: subscriptions }) })) : (jsx("div", __assign({ className: "flex flex-col items-center w-full" }, { children: jsx(ErrorView, { message: "You have no subscriptions with ".concat(companyName, " yet") }) }))) })), isMobile && (jsx("div", __assign({ className: "pt-4 pb-2" }, { children: jsx(SubscriptionsNavigation, { hideExpired: hideExpired, setHideExpired: setHideExpired, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions }) }))), jsx(Checkout, { entityId: entityId, onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, quote: quote, token: token, isMobile: isMobile })] })));
 };
-export { BunnyProvider, Checkout, Invoice, PaymentMethod, Quote, Signup, Subscriptions, Transactions, getQuoteAmountDue, usePaymentMethod };
+export { BunnyProvider, Checkout, Invoice, PaymentMethod, Quote, Quotes, Signup, Subscriptions, Transactions, getQuoteAmountDue, usePaymentMethod };