@bunnyapp/components 1.0.4 → 1.0.6

package/dist/cjs/index.js

@@ -11,10 +11,10 @@ var common = require('@bunnyapp/common');
 var reactQuery = require('@tanstack/react-query');
 var recoil = require('recoil');
 var theme = require('antd/lib/theme');
+var reactHelmetAsync = require('react-helmet-async');
 var reactStripeJs = require('@stripe/react-stripe-js');
 var pure = require('@stripe/stripe-js/pure');
 var lodash = require('lodash');
-var reactHelmetAsync = require('react-helmet-async');
 var request = import('graphql-request');
 var recharts = require('recharts');
 
@@ -117,6 +117,36 @@ 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__*/React.createContext({});
 var Context = IconContext;
 
@@ -1744,35 +1774,28 @@ var InvoiceQuoteView = function (_a) {
 };
 var templateObject_1$9;
 
-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 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*/, common.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 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) {
@@ -1930,7 +1953,6 @@ var PaymentContext = React.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 = common.useIsMobile();
-    var invoice = React.useContext(InvoiceCheckoutContext).invoice;
     var displayPayButtonNameAnyways = React.useContext(PaymentContext).displayPayButtonNameAnyways;
     var buttonName = function () {
         return onlySavePaymentMethod && !displayPayButtonNameAnyways
@@ -1941,11 +1963,6 @@ var CheckoutFooter = function (_a) {
                 ? "Paying"
                 : "Pay";
     };
-    React.useEffect(function () {
-        if (invoice) {
-            onPaymentSubmit();
-        }
-    }, [invoice]);
     return (jsxRuntime.jsx("div", __assign({ className: "flex justify-end gap-2 ".concat(noPadding ? "" : "pt-6") }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "w-full", disabled: isSaving, onClick: onPaymentSubmit, size: isMobile ? "large" : "middle", type: "primary" }, { children: "".concat(buttonName()).concat(amountDue && currencyId
                 ? " ".concat(common.Misc.formatCurrency(amountDue, currencyId))
                 : "") })) })));
@@ -2281,8 +2298,8 @@ var DemoPayForm = function (_a) {
             switch (_a.label) {
                 case 0:
                     _a.trys.push([0, 6, , 7]);
-                    validateCardDetails();
                     if (!onlySavePaymentMethod) return [3 /*break*/, 2];
+                    validateCardDetails();
                     setIsSaving(true);
                     return [4 /*yield*/, storePayment({
                             testCreditCardNumber: unformatCardNumber(cardDetails.number),
@@ -2308,6 +2325,7 @@ var DemoPayForm = function (_a) {
                     return [3 /*break*/, 5];
                 case 2:
                     if (!(amountDue !== undefined && currencyId)) return [3 /*break*/, 4];
+                    validateCardDetails();
                     setIsSaving(true);
                     return [4 /*yield*/, confirmPayment({
                             amount: amountDue,
@@ -2798,7 +2816,7 @@ var PaymentForm = function (_a) {
     return (jsxRuntime.jsx(ActualPaymentForm, { invoice: invoice, isSaving: isSaving, onFail: onFail, onPaymentSuccess: onPaymentSuccess, quote: quote, setIsSaving: setIsSaving }));
 };
 
-var MUTATION$8 = "\n  mutation checkout(\n    $invoiceId: ID,\n    $quoteId: ID,\n    $paymentMethodId: ID,\n    $paymentMethodData: CheckoutPaymentMethodAttributes\n  ) {\n    checkout(\n      invoiceId: $invoiceId,\n      quoteId: $quoteId,\n      paymentMethodId: $paymentMethodId,\n      paymentMethodData: $paymentMethodData\n    ) {\n      invoice {\n        id\n        state\n        amount\n        amountDue\n      }\n      payment {\n        id\n        state\n        amount\n      }\n      paymentApplication {\n        id\n        invoiceId\n        paymentId\n      }\n      transaction {\n        id\n        amount\n      }\n    }\n  }\n";
+var MUTATION$7 = "\n  mutation checkout(\n    $invoiceId: ID,\n    $quoteId: ID,\n    $paymentMethodId: ID,\n    $paymentMethodData: CheckoutPaymentMethodAttributes\n  ) {\n    checkout(\n      invoiceId: $invoiceId,\n      quoteId: $quoteId,\n      paymentMethodId: $paymentMethodId,\n      paymentMethodData: $paymentMethodData\n    ) {\n      invoice {\n        id\n        state\n        amount\n        amountDue\n      }\n      payment {\n        id\n        state\n        amount\n      }\n      paymentApplication {\n        id\n        invoiceId\n        paymentId\n      }\n      transaction {\n        id\n        amount\n      }\n    }\n  }\n";
 var checkout = function (_a) {
     var quoteId = _a.quoteId, invoiceId = _a.invoiceId, paymentMethodId = _a.paymentMethodId, paymentMethodData = _a.paymentMethodData, token = _a.token, subdomain = _a.subdomain;
     return __awaiter(void 0, void 0, void 0, function () {
@@ -2815,7 +2833,7 @@ var checkout = function (_a) {
                         mutationVars.paymentMethodData = __assign(__assign({}, paymentMethodData), { metadata: paymentMethodData.metadata });
                     }
                     return [4 /*yield*/, common.gqlRequest({
-                            query: MUTATION$8,
+                            query: MUTATION$7,
                             token: token,
                             vars: mutationVars,
                             subdomain: subdomain,
@@ -2952,31 +2970,8 @@ function InvoicePDF(_a) {
         }, title: "Invoice PDF", width: "100%" }));
 }
 
-var MUTATION$7 = "\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*/, common.gqlRequest({
-                            query: MUTATION$7,
-                            token: token,
-                            vars: vars,
-                            subdomain: subdomain,
-                        })];
-                case 1:
-                    response = _b.sent();
-                    return [2 /*return*/, response === null || response === void 0 ? void 0 : response.formattedInvoice];
-            }
-        });
-    });
-};
-
 function ActualInvoice(_a) {
-    var id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, onPaymentSuccess = _a.onPaymentSuccess; _a.storedPaymentMethod;
+    var id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, onPaymentSuccess = _a.onPaymentSuccess;
     var _b = React.useState(false), isSaving = _b[0], setIsSaving = _b[1];
     var queryClient = reactQuery.useQueryClient();
     var isMobile = common.useIsMobile();
@@ -3256,7 +3251,7 @@ var PandadocPollingModal = function (_a) {
     return (jsxRuntime.jsxs(antd.Modal, __assign({ title: "Uploading quote to Pandadoc", open: isVisible, closable: false, footer: null }, { children: [jsxRuntime.jsxs("div", __assign({ className: "py-4 text-center" }, { children: ["This may take a few seconds", ".".repeat(numberOfPolls)] })), jsxRuntime.jsx("div", __assign({ className: "text-center" }, { children: infoMessage }))] })));
 };
 
-var MUTATION$6 = function (id) { return "\n  query formattedQuote {\n    formattedQuote (id: \"".concat(id, "\") {\n      payableId\n      acceptedAt\n      acceptedByName\n      amount\n      amountDue\n      amountsByPeriod {\n        id\n        name\n        amount\n      }\n      object { documents { id filename size date url } }\n      billingCity\n      billingCountry\n      billingState\n      billingStreet\n      billingZip\n      contactName\n      currency\n      customerBillingCity\n      customerBillingCountry\n      customerBillingState\n      customerBillingStreet\n      customerBillingZip\n      customerName\n      discount\n      discountValue\n      duration\n      endDate\n      expiresAt\n      html\n      formattedLines {\n        amount\n        amountsByPeriod {\n          quantity\n          id\n          name\n          startDate\n          endDate\n          amount\n          amountsByTier {\n            id\n            tier {\n              starts\n              ends\n              price\n            }\n            quantity\n            amount\n          }\n          prorationRate\n        }\n        billingPeriodEnd\n        billingPeriodStart\n        chargeType\n        discount\n        frequency\n        isRamp\n        periods\n        planName\n        position\n        price\n        priceDecimals\n        priceListChargeId\n        priceListChargeName\n        priceListId\n        priceListName\n        priceTiers {\n          price\n          starts\n        }\n        pricingModel\n        productName\n        prorationRate\n        quantity\n        showProductNameOnLineItem\n        taxCode\n        trialEndDate\n        trialStartDate\n        unitOfMeasure\n        vatCode\n      }\n      netPaymentDays\n      notes\n      number\n      poNumberRequired\n      salesContactEmail\n      sharedAt\n      startDate\n      state\n      subtotal\n      taxAmount\n      taxNumberLabel\n      taxNumberRequired\n      vendorName\n    }\n  }"); };
+var MUTATION$6 = function (id) { return "\n  query formattedQuote ($id: ID) {\n    formattedQuote (id: $id) {\n      payableId\n      acceptedAt\n      acceptedByName\n      amount\n      amountDue\n      amountsByPeriod {\n        id\n        name\n        amount\n      }\n      object { documents { id filename size date url } }\n      billingCity\n      billingCountry\n      billingState\n      billingStreet\n      billingZip\n      contactName\n      currency\n      customerBillingCity\n      customerBillingCountry\n      customerBillingState\n      customerBillingStreet\n      customerBillingZip\n      customerName\n      discount\n      discountValue\n      duration\n      endDate\n      expiresAt\n      html\n      formattedLines {\n        amount\n        amountsByPeriod {\n          quantity\n          id\n          name\n          startDate\n          endDate\n          amount\n          amountsByTier {\n            id\n            tier {\n              starts\n              ends\n              price\n            }\n            quantity\n            amount\n          }\n          prorationRate\n        }\n        billingPeriodEnd\n        billingPeriodStart\n        chargeType\n        discount\n        frequency\n        isRamp\n        periods\n        planName\n        position\n        price\n        priceDecimals\n        priceListChargeId\n        priceListChargeName\n        priceListId\n        priceListName\n        priceTiers {\n          price\n          starts\n        }\n        pricingModel\n        productName\n        prorationRate\n        quantity\n        showProductNameOnLineItem\n        taxCode\n        trialEndDate\n        trialStartDate\n        unitOfMeasure\n        vatCode\n      }\n      netPaymentDays\n      notes\n      number\n      poNumberRequired\n      salesContactEmail\n      sharedAt\n      startDate\n      state\n      subtotal\n      taxAmount\n      taxNumberLabel\n      taxNumberRequired\n      vendorName\n    }\n  }"; };
 var getFormattedQuote = function (_a) {
     var id = _a.id, token = _a.token, subdomain = _a.subdomain;
     return __awaiter(void 0, void 0, void 0, function () {
@@ -3264,9 +3259,10 @@ var getFormattedQuote = function (_a) {
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0: return [4 /*yield*/, common.gqlRequest({
-                        query: MUTATION$6(id),
+                        query: MUTATION$6(),
                         token: token,
                         subdomain: subdomain,
+                        vars: { id: id },
                     })];
                 case 1:
                     response = _b.sent();
@@ -3322,7 +3318,6 @@ function ActualQuote(_a) {
 styled__default["default"].div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  span {\n    width: 100%;\n  }\n"], ["\n  span {\n    width: 100%;\n  }\n"])));
 function Quote(_a) {
     var id = _a.id;
-    console.log("id", id);
     return (jsxRuntime.jsx(reactHelmetAsync.HelmetProvider, { children: jsxRuntime.jsx(ActualQuote, { id: id }) }));
 }
 var templateObject_1$5;
@@ -4066,7 +4061,6 @@ var getTransactions = function (filter, token, subdomain, kindsToShow) { return
                 })];
             case 1:
                 response = _d.sent();
-                console.log("response", response);
                 return [4 /*yield*/, response.json()];
             case 2:
                 _a = _d.sent(), data = _a.data, errors = _a.errors;
@@ -4158,7 +4152,6 @@ var isQuote = function (transaction) {
 };
 var TransactionRowTitle = function (_a) {
     var transaction = _a.transaction;
-    console.log("transaction", transaction);
     if (!isInvoice(transaction) && !isQuote(transaction)) {
         return jsxRuntime.jsx(jsxRuntime.Fragment, {});
     }
@@ -4194,7 +4187,7 @@ var TransactionDownload = function (_a) {
 var Text$6 = antd.Typography.Text;
 var TransactionsEmptyState = function () {
     var noTransactionsMessage = React.useContext(TransactionsListContext).noTransactionsMessage;
-    return (jsxRuntime.jsx(Text$6, __assign({ className: "flex justify-center p-4 text-base" }, { children: noTransactionsMessage || "There are no invoices" })));
+    return (jsxRuntime.jsx(Text$6, __assign({ className: "flex justify-center p-4 text-base" }, { children: noTransactionsMessage || "There are no transactions" })));
 };
 
 function capitalizeFirstLetter(string) {
@@ -4780,7 +4773,7 @@ var getPlanChangeOptions = function (_a) {
     });
 };
 
-var QUOTE_QUERY = function (id) { return "\n        query quote {\n            quote(id: ".concat(id, ") {\n                accountId\n                amount\n                amountDue\n                smallUnitAmountDue\n                currencyId\n                formattedQuote {\n                  html\n                }\n                id\n                payableId\n                periodAmount\n                subtotal\n                taxAmount\n                amountsByPeriod {\n                    amount\n                    startDate\n                }\n                quoteChanges {\n                    currencyId\n                    id\n                    charges {\n                        amountsByPeriod {\n                          amount\n                          startDate\n                        }\n                        amount\n                        billingPeriod\n                        currencyId\n                        feature {\n                          unitName\n                        }\n                        id\n                        name\n                        priceListCharge {\n                          id\n                        }\n                        quantity\n                    }\n                    priceList {\n                        id\n                        plan {\n                            name\n                        }\n                        product {\n                            name\n                        }\n                    }\n\n                }\n            }\n        }"); };
+var QUOTE_QUERY = function () { 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;
     return __awaiter(void 0, void 0, void 0, function () {
@@ -4788,9 +4781,9 @@ var getQuote = function (_a) {
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0: return [4 /*yield*/, common.gqlRequest({
-                        query: QUOTE_QUERY(id),
+                        query: QUOTE_QUERY(),
                         token: token,
-                        vars: {},
+                        vars: { id: id },
                         subdomain: subdomain,
                     })];
                 case 1:

package/dist/esm/index.js

@@ -8,10 +8,10 @@ import { DEFAULT_ACCENT_COLOR, DEFAULT_BRAND_COLOR, DEFAULT_SECONDARY_COLOR, DEF
 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 { 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 { HelmetProvider, Helmet } from 'react-helmet-async';
 import request from 'graphql-request';
 import { BarChart, ResponsiveContainer, XAxis, Tooltip, Bar, Rectangle } from 'recharts';
 
@@ -88,6 +88,36 @@ 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;
 
@@ -1715,35 +1745,28 @@ var InvoiceQuoteView = function (_a) {
 };
 var templateObject_1$9;
 
-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 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 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) {
@@ -1901,7 +1924,6 @@ 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 invoice = useContext(InvoiceCheckoutContext).invoice;
     var displayPayButtonNameAnyways = useContext(PaymentContext).displayPayButtonNameAnyways;
     var buttonName = function () {
         return onlySavePaymentMethod && !displayPayButtonNameAnyways
@@ -1912,11 +1934,6 @@ var CheckoutFooter = function (_a) {
                 ? "Paying"
                 : "Pay";
     };
-    useEffect(function () {
-        if (invoice) {
-            onPaymentSubmit();
-        }
-    }, [invoice]);
     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))
                 : "") })) })));
@@ -2252,8 +2269,8 @@ var DemoPayForm = function (_a) {
             switch (_a.label) {
                 case 0:
                     _a.trys.push([0, 6, , 7]);
-                    validateCardDetails();
                     if (!onlySavePaymentMethod) return [3 /*break*/, 2];
+                    validateCardDetails();
                     setIsSaving(true);
                     return [4 /*yield*/, storePayment({
                             testCreditCardNumber: unformatCardNumber(cardDetails.number),
@@ -2279,6 +2296,7 @@ var DemoPayForm = function (_a) {
                     return [3 /*break*/, 5];
                 case 2:
                     if (!(amountDue !== undefined && currencyId)) return [3 /*break*/, 4];
+                    validateCardDetails();
                     setIsSaving(true);
                     return [4 /*yield*/, confirmPayment({
                             amount: amountDue,
@@ -2769,7 +2787,7 @@ var PaymentForm = function (_a) {
     return (jsx(ActualPaymentForm, { invoice: invoice, isSaving: isSaving, onFail: onFail, onPaymentSuccess: onPaymentSuccess, quote: quote, setIsSaving: setIsSaving }));
 };
 
-var MUTATION$8 = "\n  mutation checkout(\n    $invoiceId: ID,\n    $quoteId: ID,\n    $paymentMethodId: ID,\n    $paymentMethodData: CheckoutPaymentMethodAttributes\n  ) {\n    checkout(\n      invoiceId: $invoiceId,\n      quoteId: $quoteId,\n      paymentMethodId: $paymentMethodId,\n      paymentMethodData: $paymentMethodData\n    ) {\n      invoice {\n        id\n        state\n        amount\n        amountDue\n      }\n      payment {\n        id\n        state\n        amount\n      }\n      paymentApplication {\n        id\n        invoiceId\n        paymentId\n      }\n      transaction {\n        id\n        amount\n      }\n    }\n  }\n";
+var MUTATION$7 = "\n  mutation checkout(\n    $invoiceId: ID,\n    $quoteId: ID,\n    $paymentMethodId: ID,\n    $paymentMethodData: CheckoutPaymentMethodAttributes\n  ) {\n    checkout(\n      invoiceId: $invoiceId,\n      quoteId: $quoteId,\n      paymentMethodId: $paymentMethodId,\n      paymentMethodData: $paymentMethodData\n    ) {\n      invoice {\n        id\n        state\n        amount\n        amountDue\n      }\n      payment {\n        id\n        state\n        amount\n      }\n      paymentApplication {\n        id\n        invoiceId\n        paymentId\n      }\n      transaction {\n        id\n        amount\n      }\n    }\n  }\n";
 var checkout = function (_a) {
     var quoteId = _a.quoteId, invoiceId = _a.invoiceId, paymentMethodId = _a.paymentMethodId, paymentMethodData = _a.paymentMethodData, token = _a.token, subdomain = _a.subdomain;
     return __awaiter(void 0, void 0, void 0, function () {
@@ -2786,7 +2804,7 @@ var checkout = function (_a) {
                         mutationVars.paymentMethodData = __assign(__assign({}, paymentMethodData), { metadata: paymentMethodData.metadata });
                     }
                     return [4 /*yield*/, gqlRequest({
-                            query: MUTATION$8,
+                            query: MUTATION$7,
                             token: token,
                             vars: mutationVars,
                             subdomain: subdomain,
@@ -2923,31 +2941,8 @@ function InvoicePDF(_a) {
         }, title: "Invoice PDF", width: "100%" }));
 }
 
-var MUTATION$7 = "\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$7,
-                            token: token,
-                            vars: vars,
-                            subdomain: subdomain,
-                        })];
-                case 1:
-                    response = _b.sent();
-                    return [2 /*return*/, response === null || response === void 0 ? void 0 : response.formattedInvoice];
-            }
-        });
-    });
-};
-
 function ActualInvoice(_a) {
-    var id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, onPaymentSuccess = _a.onPaymentSuccess; _a.storedPaymentMethod;
+    var id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, onPaymentSuccess = _a.onPaymentSuccess;
     var _b = useState(false), isSaving = _b[0], setIsSaving = _b[1];
     var queryClient = useQueryClient();
     var isMobile = useIsMobile$1();
@@ -3227,7 +3222,7 @@ 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 {\n    formattedQuote (id: \"".concat(id, "\") {\n      payableId\n      acceptedAt\n      acceptedByName\n      amount\n      amountDue\n      amountsByPeriod {\n        id\n        name\n        amount\n      }\n      object { documents { id filename size date url } }\n      billingCity\n      billingCountry\n      billingState\n      billingStreet\n      billingZip\n      contactName\n      currency\n      customerBillingCity\n      customerBillingCountry\n      customerBillingState\n      customerBillingStreet\n      customerBillingZip\n      customerName\n      discount\n      discountValue\n      duration\n      endDate\n      expiresAt\n      html\n      formattedLines {\n        amount\n        amountsByPeriod {\n          quantity\n          id\n          name\n          startDate\n          endDate\n          amount\n          amountsByTier {\n            id\n            tier {\n              starts\n              ends\n              price\n            }\n            quantity\n            amount\n          }\n          prorationRate\n        }\n        billingPeriodEnd\n        billingPeriodStart\n        chargeType\n        discount\n        frequency\n        isRamp\n        periods\n        planName\n        position\n        price\n        priceDecimals\n        priceListChargeId\n        priceListChargeName\n        priceListId\n        priceListName\n        priceTiers {\n          price\n          starts\n        }\n        pricingModel\n        productName\n        prorationRate\n        quantity\n        showProductNameOnLineItem\n        taxCode\n        trialEndDate\n        trialStartDate\n        unitOfMeasure\n        vatCode\n      }\n      netPaymentDays\n      notes\n      number\n      poNumberRequired\n      salesContactEmail\n      sharedAt\n      startDate\n      state\n      subtotal\n      taxAmount\n      taxNumberLabel\n      taxNumberRequired\n      vendorName\n    }\n  }"); };
+var MUTATION$6 = function (id) { return "\n  query formattedQuote ($id: ID) {\n    formattedQuote (id: $id) {\n      payableId\n      acceptedAt\n      acceptedByName\n      amount\n      amountDue\n      amountsByPeriod {\n        id\n        name\n        amount\n      }\n      object { documents { id filename size date url } }\n      billingCity\n      billingCountry\n      billingState\n      billingStreet\n      billingZip\n      contactName\n      currency\n      customerBillingCity\n      customerBillingCountry\n      customerBillingState\n      customerBillingStreet\n      customerBillingZip\n      customerName\n      discount\n      discountValue\n      duration\n      endDate\n      expiresAt\n      html\n      formattedLines {\n        amount\n        amountsByPeriod {\n          quantity\n          id\n          name\n          startDate\n          endDate\n          amount\n          amountsByTier {\n            id\n            tier {\n              starts\n              ends\n              price\n            }\n            quantity\n            amount\n          }\n          prorationRate\n        }\n        billingPeriodEnd\n        billingPeriodStart\n        chargeType\n        discount\n        frequency\n        isRamp\n        periods\n        planName\n        position\n        price\n        priceDecimals\n        priceListChargeId\n        priceListChargeName\n        priceListId\n        priceListName\n        priceTiers {\n          price\n          starts\n        }\n        pricingModel\n        productName\n        prorationRate\n        quantity\n        showProductNameOnLineItem\n        taxCode\n        trialEndDate\n        trialStartDate\n        unitOfMeasure\n        vatCode\n      }\n      netPaymentDays\n      notes\n      number\n      poNumberRequired\n      salesContactEmail\n      sharedAt\n      startDate\n      state\n      subtotal\n      taxAmount\n      taxNumberLabel\n      taxNumberRequired\n      vendorName\n    }\n  }"; };
 var getFormattedQuote = function (_a) {
     var id = _a.id, token = _a.token, subdomain = _a.subdomain;
     return __awaiter(void 0, void 0, void 0, function () {
@@ -3235,9 +3230,10 @@ var getFormattedQuote = function (_a) {
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0: return [4 /*yield*/, gqlRequest({
-                        query: MUTATION$6(id),
+                        query: MUTATION$6(),
                         token: token,
                         subdomain: subdomain,
+                        vars: { id: id },
                     })];
                 case 1:
                     response = _b.sent();
@@ -3293,7 +3289,6 @@ function ActualQuote(_a) {
 styled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  span {\n    width: 100%;\n  }\n"], ["\n  span {\n    width: 100%;\n  }\n"])));
 function Quote(_a) {
     var id = _a.id;
-    console.log("id", id);
     return (jsx(HelmetProvider, { children: jsx(ActualQuote, { id: id }) }));
 }
 var templateObject_1$5;
@@ -4037,7 +4032,6 @@ var getTransactions = function (filter, token, subdomain, kindsToShow) { return
                 })];
             case 1:
                 response = _d.sent();
-                console.log("response", response);
                 return [4 /*yield*/, response.json()];
             case 2:
                 _a = _d.sent(), data = _a.data, errors = _a.errors;
@@ -4129,7 +4123,6 @@ var isQuote = function (transaction) {
 };
 var TransactionRowTitle = function (_a) {
     var transaction = _a.transaction;
-    console.log("transaction", transaction);
     if (!isInvoice(transaction) && !isQuote(transaction)) {
         return jsx(Fragment, {});
     }
@@ -4165,7 +4158,7 @@ var TransactionDownload = function (_a) {
 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 invoices" })));
+    return (jsx(Text$6, __assign({ className: "flex justify-center p-4 text-base" }, { children: noTransactionsMessage || "There are no transactions" })));
 };
 
 function capitalizeFirstLetter(string) {
@@ -4751,7 +4744,7 @@ var getPlanChangeOptions = function (_a) {
     });
 };
 
-var QUOTE_QUERY = function (id) { return "\n        query quote {\n            quote(id: ".concat(id, ") {\n                accountId\n                amount\n                amountDue\n                smallUnitAmountDue\n                currencyId\n                formattedQuote {\n                  html\n                }\n                id\n                payableId\n                periodAmount\n                subtotal\n                taxAmount\n                amountsByPeriod {\n                    amount\n                    startDate\n                }\n                quoteChanges {\n                    currencyId\n                    id\n                    charges {\n                        amountsByPeriod {\n                          amount\n                          startDate\n                        }\n                        amount\n                        billingPeriod\n                        currencyId\n                        feature {\n                          unitName\n                        }\n                        id\n                        name\n                        priceListCharge {\n                          id\n                        }\n                        quantity\n                    }\n                    priceList {\n                        id\n                        plan {\n                            name\n                        }\n                        product {\n                            name\n                        }\n                    }\n\n                }\n            }\n        }"); };
+var QUOTE_QUERY = function () { 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;
     return __awaiter(void 0, void 0, void 0, function () {
@@ -4759,9 +4752,9 @@ var getQuote = function (_a) {
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0: return [4 /*yield*/, gqlRequest({
-                        query: QUOTE_QUERY(id),
+                        query: QUOTE_QUERY(),
                         token: token,
-                        vars: {},
+                        vars: { id: id },
                         subdomain: subdomain,
                     })];
                 case 1:

package/package.json

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