@bunnyapp/components 1.6.0-beta.15 → 1.6.0-beta.16

package/dist/cjs/index.js

@@ -51,8 +51,99 @@ function styleInject(css, ref) {
 var css_248z = ":root {\n  --row-background: #ffffff;\n  --row-background-alternate: rgba(100, 116, 139, 0.04);\n  --row-background-dark: #121212;\n  --row-background-alternate-dark: #1e1e1e;\n  --bunny-blue-500: #3b82f6;\n  --bunny-blue-200: #bfdbfe;\n  --bunny-green-600: #059669;\n  --bunny-green-200: #a7f3d0;\n  --bunny-red-500: #ef4444;\n  --bunny-red-200: #fecaca;\n  --bunny-orange-500: #f97316;\n  --bunny-orange-200: #fed7aa;\n  --bunny-yellow-500: #f59e0b;\n  --bunny-yellow-200: #fde68a;\n  --bunny-purple-500: #8b5cf6;\n  --bunny-purple-200: #ddd6fe;\n  --bunny-black: #000000;\n}\n.bunny-component-wrapper {\n  box-sizing: border-box;\n}\n.bunny-component-wrapper * {\n  box-sizing: border-box;\n}\n.hidden {\n  display: none;\n}\n.bunny-show-on-hover {\n  opacity: 0;\n}\n.bunny-show-on-hover-container:hover .bunny-show-on-hover {\n  opacity: 1;\n}\n.has-tooltip:hover .tooltip {\n  visibility: visible;\n  z-index: 100;\n}\n.pdf-only {\n  display: none !important;\n}\n.notes p {\n  margin: 0;\n  padding: 0;\n  padding-bottom: 0.25rem;\n}\n.bunny-icon-path {\n  transition: fill 0.3s;\n}\n.bunny-shadow-padding-x {\n  padding-right: 1rem;\n  padding-left: 1rem;\n}\n.bunny-shadow-padding-xb {\n  padding-right: 1rem;\n  padding-left: 1rem;\n  padding-bottom: 0.5rem;\n}\n.content-container {\n  width: 100%;\n  margin: 0 auto;\n}\n@media (min-width: 1220px) {\n  .content-container {\n    width: 1220px !important;\n    margin: 0 auto;\n  }\n}\n@media (min-width: 768px) {\n  .bunny-shadow-padding-x {\n    padding-right: 2rem;\n    padding-left: 2rem;\n  }\n  .bunny-shadow-padding-xb {\n    padding-right: 2rem;\n    padding-left: 2rem;\n    padding-bottom: 0.5rem;\n  }\n  .sm\\:flex {\n    display: flex !important;\n  }\n  .sm\\:hidden {\n    display: none !important;\n  }\n}\n.bunny-shadow,\n.bunny-shadow-md {\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n}\n.bunny-fixed {\n  position: fixed;\n}\n.bunny-absolute {\n  position: absolute;\n}\n.bunny-relative {\n  position: relative;\n}\n.bunny-sticky {\n  position: sticky;\n}\n.bunny-bottom-0 {\n  bottom: 0px;\n}\n.bunny-bottom-4 {\n  bottom: 1rem;\n}\n.bunny-left-0 {\n  left: 0px;\n}\n.bunny-right-0 {\n  right: 0px;\n}\n.bunny-top-0 {\n  top: 0px;\n}\n.bunny-col-span-1 {\n  grid-column: span 1 / span 1;\n}\n.bunny-col-span-full {\n  grid-column: 1 / -1;\n}\n.bunny-m-0 {\n  margin: 0px;\n}\n.bunny-mx-0 {\n  margin-left: 0px;\n  margin-right: 0px;\n}\n.bunny-mx-4 {\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n.bunny-mx-auto {\n  margin-left: auto;\n  margin-right: auto;\n}\n.bunny-my-0 {\n  margin-top: 0px;\n  margin-bottom: 0px;\n}\n.bunny-my-2 {\n  margin-top: 0.5rem;\n  margin-bottom: 0.5rem;\n}\n.bunny-my-24 {\n  margin-top: 6rem;\n  margin-bottom: 6rem;\n}\n.bunny-my-4 {\n  margin-top: 1rem;\n  margin-bottom: 1rem;\n}\n.bunny-mb-2 {\n  margin-bottom: 0.5rem;\n}\n.bunny-mb-3 {\n  margin-bottom: 0.75rem;\n}\n.bunny-mb-4 {\n  margin-bottom: 1rem;\n}\n.bunny-mb-8 {\n  margin-bottom: 2rem;\n}\n.bunny-ml-auto {\n  margin-left: auto;\n}\n.bunny-mt-0 {\n  margin-top: 0px;\n}\n.bunny-mt-2 {\n  margin-top: 0.5rem;\n}\n.bunny-mt-24 {\n  margin-top: 6rem;\n}\n.bunny-mt-4 {\n  margin-top: 1rem;\n}\n.bunny-mt-5 {\n  margin-top: 1.25rem;\n}\n.bunny-box-border {\n  box-sizing: border-box;\n}\n.bunny-flex {\n  display: flex;\n}\n.bunny-grid {\n  display: grid;\n}\n.bunny-contents {\n  display: contents;\n}\n.bunny-h-0\\.5 {\n  height: 0.125rem;\n}\n.bunny-h-1\\/2 {\n  height: 50%;\n}\n.bunny-h-8 {\n  height: 2rem;\n}\n.bunny-h-full {\n  height: 100%;\n}\n.bunny-h-screen {\n  height: 100vh;\n}\n.bunny-max-h-\\[calc\\(100vh-10rem\\)\\] {\n  max-height: calc(100vh - 10rem);\n}\n.bunny-min-h-0 {\n  min-height: 0px;\n}\n.bunny-w-0\\.5 {\n  width: 0.125rem;\n}\n.bunny-w-1\\/2 {\n  width: 50%;\n}\n.bunny-w-3\\/5 {\n  width: 60%;\n}\n.bunny-w-full {\n  width: 100%;\n}\n.bunny-w-screen {\n  width: 100vw;\n}\n.bunny-flex-1 {\n  flex: 1 1 0%;\n}\n.bunny-shrink {\n  flex-shrink: 1;\n}\n.bunny-shrink-0 {\n  flex-shrink: 0;\n}\n.bunny-grow {\n  flex-grow: 1;\n}\n.bunny-cursor-pointer {\n  cursor: pointer;\n}\n.bunny-grid-cols-3 {\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.bunny-flex-row {\n  flex-direction: row;\n}\n.bunny-flex-col {\n  flex-direction: column;\n}\n.bunny-flex-wrap {\n  flex-wrap: wrap;\n}\n.bunny-items-start {\n  align-items: flex-start;\n}\n.bunny-items-end {\n  align-items: flex-end;\n}\n.bunny-items-center {\n  align-items: center;\n}\n.bunny-justify-end {\n  justify-content: flex-end;\n}\n.bunny-justify-center {\n  justify-content: center;\n}\n.bunny-justify-between {\n  justify-content: space-between;\n}\n.bunny-gap-0 {\n  gap: 0px;\n}\n.bunny-gap-1 {\n  gap: 0.25rem;\n}\n.bunny-gap-2 {\n  gap: 0.5rem;\n}\n.bunny-gap-3 {\n  gap: 0.75rem;\n}\n.bunny-gap-4 {\n  gap: 1rem;\n}\n.bunny-gap-6 {\n  gap: 1.5rem;\n}\n.bunny-gap-8 {\n  gap: 2rem;\n}\n.bunny-space-y-2 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.bunny-space-y-4 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n.bunny-space-y-8 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(2rem * var(--tw-space-y-reverse));\n}\n.bunny-overflow-auto {\n  overflow: auto;\n}\n.bunny-overflow-hidden {\n  overflow: hidden;\n}\n.bunny-overflow-y-auto {\n  overflow-y: auto;\n}\n.bunny-whitespace-nowrap {\n  white-space: nowrap;\n}\n.bunny-text-nowrap {\n  text-wrap: nowrap;\n}\n.bunny-rounded {\n  border-radius: 0.25rem;\n}\n.bunny-rounded-full {\n  border-radius: 9999px;\n}\n.bunny-rounded-lg {\n  border-radius: 0.5rem;\n}\n.bunny-rounded-md {\n  border-radius: 0.375rem;\n}\n.bunny-border {\n  border-width: 1px;\n}\n.bunny-border-2 {\n  border-width: 2px;\n}\n.bunny-border-solid {\n  border-style: solid;\n}\n.bunny-border-none {\n  border-style: none;\n}\n.bunny-border-slate-200 {\n  --tw-border-opacity: 1;\n  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));\n}\n.bunny-bg-gray-300 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));\n}\n.bunny-bg-slate-50 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));\n}\n.bunny-bg-transparent {\n  background-color: transparent;\n}\n.bunny-bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bunny-p-0 {\n  padding: 0px;\n}\n.bunny-p-1 {\n  padding: 0.25rem;\n}\n.bunny-p-2 {\n  padding: 0.5rem;\n}\n.bunny-p-4 {\n  padding: 1rem;\n}\n.bunny-px-12 {\n  padding-left: 3rem;\n  padding-right: 3rem;\n}\n.bunny-px-3 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n.bunny-px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n.bunny-px-6 {\n  padding-left: 1.5rem;\n  padding-right: 1.5rem;\n}\n.bunny-py-2 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n.bunny-py-4 {\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n}\n.bunny-py-6 {\n  padding-top: 1.5rem;\n  padding-bottom: 1.5rem;\n}\n.bunny-pb-2 {\n  padding-bottom: 0.5rem;\n}\n.bunny-pb-4 {\n  padding-bottom: 1rem;\n}\n.bunny-pb-6 {\n  padding-bottom: 1.5rem;\n}\n.bunny-pb-8 {\n  padding-bottom: 2rem;\n}\n.bunny-pl-1 {\n  padding-left: 0.25rem;\n}\n.bunny-pl-4 {\n  padding-left: 1rem;\n}\n.bunny-pr-4 {\n  padding-right: 1rem;\n}\n.bunny-pt-1 {\n  padding-top: 0.25rem;\n}\n.bunny-pt-12 {\n  padding-top: 3rem;\n}\n.bunny-pt-2 {\n  padding-top: 0.5rem;\n}\n.bunny-pt-4 {\n  padding-top: 1rem;\n}\n.bunny-pt-5 {\n  padding-top: 1.25rem;\n}\n.bunny-pt-\\[25vh\\] {\n  padding-top: 25vh;\n}\n.bunny-text-left {\n  text-align: left;\n}\n.bunny-text-center {\n  text-align: center;\n}\n.bunny-text-right {\n  text-align: right;\n}\n.bunny-text-start {\n  text-align: start;\n}\n.bunny-text-2xl {\n  font-size: 1.5rem;\n  line-height: 2rem;\n}\n.bunny-text-3xl {\n  font-size: 1.875rem;\n  line-height: 2.25rem;\n}\n.bunny-text-base {\n  font-size: 1rem;\n  line-height: 1.5rem;\n}\n.bunny-text-lg {\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n}\n.bunny-text-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.bunny-text-sm\\/5 {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.bunny-text-xl {\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n}\n.bunny-text-xs {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n.bunny-text-xs\\/3 {\n  font-size: 0.75rem;\n  line-height: 0.75rem;\n}\n.bunny-font-bold {\n  font-weight: 700;\n}\n.bunny-font-medium {\n  font-weight: 500;\n}\n.bunny-font-normal {\n  font-weight: 400;\n}\n.bunny-text-gray-400 {\n  --tw-text-opacity: 1;\n  color: rgb(156 163 175 / var(--tw-text-opacity, 1));\n}\n.bunny-text-gray-500 {\n  --tw-text-opacity: 1;\n  color: rgb(107 114 128 / var(--tw-text-opacity, 1));\n}\n.bunny-text-gray-600 {\n  --tw-text-opacity: 1;\n  color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.bunny-text-gray-900 {\n  --tw-text-opacity: 1;\n  color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.bunny-text-orange-500 {\n  --tw-text-opacity: 1;\n  color: rgb(249 115 22 / var(--tw-text-opacity, 1));\n}\n.bunny-text-orange-600 {\n  --tw-text-opacity: 1;\n  color: rgb(234 88 12 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-400 {\n  --tw-text-opacity: 1;\n  color: rgb(148 163 184 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-500 {\n  --tw-text-opacity: 1;\n  color: rgb(100 116 139 / var(--tw-text-opacity, 1));\n}\n.bunny-text-slate-600 {\n  --tw-text-opacity: 1;\n  color: rgb(71 85 105 / var(--tw-text-opacity, 1));\n}\n.bunny-text-white {\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.bunny-underline {\n  text-decoration-line: underline;\n}\n.bunny-shadow {\n  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.bunny-shadow-md {\n  --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.bunny-transition-\\[margin\\] {\n  transition-property: margin;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.bunny-duration-300 {\n  transition-duration: 300ms;\n}\n.rotate-45,\n.transform {\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n}\n.shadow,\n.shadow-lg,\n.shadow-md,\n.shadow-none,\n.shadow-sm,\n.shadow-xl {\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n}\n.container {\n  width: 100%;\n}\n@media (min-width: 768px) {\n  .container {\n    max-width: 768px;\n  }\n}\n@media (min-width: 1024px) {\n  .container {\n    max-width: 1024px;\n  }\n}\n@media (min-width: 1280px) {\n  .container {\n    max-width: 1280px;\n  }\n}\n@media (min-width: 1536px) {\n  .container {\n    max-width: 1536px;\n  }\n}\n.visible {\n  visibility: visible;\n}\n.fixed {\n  position: fixed;\n}\n.absolute {\n  position: absolute;\n}\n.relative {\n  position: relative;\n}\n.sticky {\n  position: sticky;\n}\n.-top-0\\.5 {\n  top: -0.125rem;\n}\n.bottom-0 {\n  bottom: 0px;\n}\n.bottom-4 {\n  bottom: 1rem;\n}\n.left-0 {\n  left: 0px;\n}\n.right-0 {\n  right: 0px;\n}\n.top-0 {\n  top: 0px;\n}\n.z-50 {\n  z-index: 50;\n}\n.col-span-2 {\n  grid-column: span 2 / span 2;\n}\n.col-span-3 {\n  grid-column: span 3 / span 3;\n}\n.col-span-full {\n  grid-column: 1 / -1;\n}\n.m-0 {\n  margin: 0px;\n}\n.mx-0 {\n  margin-left: 0px;\n  margin-right: 0px;\n}\n.mx-4 {\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n.my-12 {\n  margin-top: 3rem;\n  margin-bottom: 3rem;\n}\n.my-2 {\n  margin-top: 0.5rem;\n  margin-bottom: 0.5rem;\n}\n.my-4 {\n  margin-top: 1rem;\n  margin-bottom: 1rem;\n}\n.mb-2 {\n  margin-bottom: 0.5rem;\n}\n.mb-4 {\n  margin-bottom: 1rem;\n}\n.mb-8 {\n  margin-bottom: 2rem;\n}\n.ml-2 {\n  margin-left: 0.5rem;\n}\n.mr-8 {\n  margin-right: 2rem;\n}\n.mt-1 {\n  margin-top: 0.25rem;\n}\n.mt-2 {\n  margin-top: 0.5rem;\n}\n.mt-4 {\n  margin-top: 1rem;\n}\n.mt-6 {\n  margin-top: 1.5rem;\n}\n.mt-8 {\n  margin-top: 2rem;\n}\n.block {\n  display: block;\n}\n.flex {\n  display: flex;\n}\n.table {\n  display: table;\n}\n.grid {\n  display: grid;\n}\n.contents {\n  display: contents;\n}\n.hidden {\n  display: none;\n}\n.h-4 {\n  height: 1rem;\n}\n.h-5 {\n  height: 1.25rem;\n}\n.h-8 {\n  height: 2rem;\n}\n.h-full {\n  height: 100%;\n}\n.w-1\\/2 {\n  width: 50%;\n}\n.w-1\\/3 {\n  width: 33.333333%;\n}\n.w-12 {\n  width: 3rem;\n}\n.w-2\\/3 {\n  width: 66.666667%;\n}\n.w-4 {\n  width: 1rem;\n}\n.w-full {\n  width: 100%;\n}\n.max-w-32 {\n  max-width: 8rem;\n}\n.flex-1 {\n  flex: 1 1 0%;\n}\n.shrink {\n  flex-shrink: 1;\n}\n.shrink-0 {\n  flex-shrink: 0;\n}\n.flex-grow {\n  flex-grow: 1;\n}\n.grow {\n  flex-grow: 1;\n}\n.border-collapse {\n  border-collapse: collapse;\n}\n.rotate-45 {\n  --tw-rotate: 45deg;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.transform {\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.cursor-pointer {\n  cursor: pointer;\n}\n.grid-cols-2 {\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.grid-cols-3 {\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.flex-row {\n  flex-direction: row;\n}\n.flex-col {\n  flex-direction: column;\n}\n.items-end {\n  align-items: flex-end;\n}\n.items-center {\n  align-items: center;\n}\n.justify-start {\n  justify-content: flex-start;\n}\n.justify-end {\n  justify-content: flex-end;\n}\n.justify-center {\n  justify-content: center;\n}\n.justify-between {\n  justify-content: space-between;\n}\n.gap-0 {\n  gap: 0px;\n}\n.gap-1 {\n  gap: 0.25rem;\n}\n.gap-2 {\n  gap: 0.5rem;\n}\n.gap-3 {\n  gap: 0.75rem;\n}\n.gap-4 {\n  gap: 1rem;\n}\n.gap-6 {\n  gap: 1.5rem;\n}\n.gap-8 {\n  gap: 2rem;\n}\n.space-y-2 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.space-y-4 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n.space-y-8 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(2rem * var(--tw-space-y-reverse));\n}\n.overflow-auto {\n  overflow: auto;\n}\n.overflow-hidden {\n  overflow: hidden;\n}\n.overflow-visible {\n  overflow: visible;\n}\n.whitespace-nowrap {\n  white-space: nowrap;\n}\n.text-nowrap {\n  text-wrap: nowrap;\n}\n.rounded {\n  border-radius: 0.25rem;\n}\n.rounded-full {\n  border-radius: 9999px;\n}\n.rounded-lg {\n  border-radius: 0.5rem;\n}\n.rounded-md {\n  border-radius: 0.375rem;\n}\n.rounded-sm {\n  border-radius: 0.125rem;\n}\n.border {\n  border-width: 1px;\n}\n.border-2 {\n  border-width: 2px;\n}\n.border-b {\n  border-bottom-width: 1px;\n}\n.border-t {\n  border-top-width: 1px;\n}\n.border-solid {\n  border-style: solid;\n}\n.border-none {\n  border-style: none;\n}\n.border-gray-400 {\n  --tw-border-opacity: 1;\n  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));\n}\n.border-gray-500 {\n  --tw-border-opacity: 1;\n  border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));\n}\n.border-slate-200 {\n  --tw-border-opacity: 1;\n  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));\n}\n.border-slate-300 {\n  --tw-border-opacity: 1;\n  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));\n}\n.border-slate-700 {\n  --tw-border-opacity: 1;\n  border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));\n}\n.bg-black {\n  --tw-bg-opacity: 1;\n  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));\n}\n.bg-emerald-200 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(167 243 208 / var(--tw-bg-opacity, 1));\n}\n.bg-green-200 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1));\n}\n.bg-orange-200 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(254 215 170 / var(--tw-bg-opacity, 1));\n}\n.bg-red-200 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));\n}\n.bg-red-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));\n}\n.bg-slate-50 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));\n}\n.bg-transparent {\n  background-color: transparent;\n}\n.bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bg-yellow-200 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(254 240 138 / var(--tw-bg-opacity, 1));\n}\n.p-0 {\n  padding: 0px;\n}\n.p-1 {\n  padding: 0.25rem;\n}\n.p-2 {\n  padding: 0.5rem;\n}\n.p-4 {\n  padding: 1rem;\n}\n.p-8 {\n  padding: 2rem;\n}\n.px-2 {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.px-3 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n.px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n.px-6 {\n  padding-left: 1.5rem;\n  padding-right: 1.5rem;\n}\n.px-8 {\n  padding-left: 2rem;\n  padding-right: 2rem;\n}\n.py-1 {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n.py-2 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n.py-4 {\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n}\n.py-6 {\n  padding-top: 1.5rem;\n  padding-bottom: 1.5rem;\n}\n.pb-2 {\n  padding-bottom: 0.5rem;\n}\n.pb-4 {\n  padding-bottom: 1rem;\n}\n.pb-6 {\n  padding-bottom: 1.5rem;\n}\n.pb-8 {\n  padding-bottom: 2rem;\n}\n.pl-0 {\n  padding-left: 0px;\n}\n.pl-2 {\n  padding-left: 0.5rem;\n}\n.pl-4 {\n  padding-left: 1rem;\n}\n.pt-1 {\n  padding-top: 0.25rem;\n}\n.pt-12 {\n  padding-top: 3rem;\n}\n.pt-2 {\n  padding-top: 0.5rem;\n}\n.pt-4 {\n  padding-top: 1rem;\n}\n.pt-5 {\n  padding-top: 1.25rem;\n}\n.pt-6 {\n  padding-top: 1.5rem;\n}\n.pt-8 {\n  padding-top: 2rem;\n}\n.text-left {\n  text-align: left;\n}\n.text-center {\n  text-align: center;\n}\n.text-right {\n  text-align: right;\n}\n.align-middle {\n  vertical-align: middle;\n}\n.text-2xl {\n  font-size: 1.5rem;\n  line-height: 2rem;\n}\n.text-base {\n  font-size: 1rem;\n  line-height: 1.5rem;\n}\n.text-lg {\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n}\n.text-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.text-xl {\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n}\n.text-xs {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n.font-bold {\n  font-weight: 700;\n}\n.font-medium {\n  font-weight: 500;\n}\n.font-normal {\n  font-weight: 400;\n}\n.capitalize {\n  text-transform: capitalize;\n}\n.text-emerald-600 {\n  --tw-text-opacity: 1;\n  color: rgb(5 150 105 / var(--tw-text-opacity, 1));\n}\n.text-emerald-700 {\n  --tw-text-opacity: 1;\n  color: rgb(4 120 87 / var(--tw-text-opacity, 1));\n}\n.text-gray-600 {\n  --tw-text-opacity: 1;\n  color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.text-gray-900 {\n  --tw-text-opacity: 1;\n  color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.text-green-600 {\n  --tw-text-opacity: 1;\n  color: rgb(22 163 74 / var(--tw-text-opacity, 1));\n}\n.text-orange-500 {\n  --tw-text-opacity: 1;\n  color: rgb(249 115 22 / var(--tw-text-opacity, 1));\n}\n.text-orange-600 {\n  --tw-text-opacity: 1;\n  color: rgb(234 88 12 / var(--tw-text-opacity, 1));\n}\n.text-red-500 {\n  --tw-text-opacity: 1;\n  color: rgb(239 68 68 / var(--tw-text-opacity, 1));\n}\n.text-slate-400 {\n  --tw-text-opacity: 1;\n  color: rgb(148 163 184 / var(--tw-text-opacity, 1));\n}\n.text-slate-500 {\n  --tw-text-opacity: 1;\n  color: rgb(100 116 139 / var(--tw-text-opacity, 1));\n}\n.text-slate-600 {\n  --tw-text-opacity: 1;\n  color: rgb(71 85 105 / var(--tw-text-opacity, 1));\n}\n.text-white {\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.text-yellow-500 {\n  --tw-text-opacity: 1;\n  color: rgb(234 179 8 / var(--tw-text-opacity, 1));\n}\n.underline {\n  text-decoration-line: underline;\n}\n.shadow {\n  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-lg {\n  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);\n  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-md {\n  --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-none {\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-sm {\n  --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-xl {\n  --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.transition {\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.transition-\\[margin\\] {\n  transition-property: margin;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.transition-all {\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.duration-200 {\n  transition-duration: 200ms;\n}\n.duration-300 {\n  transition-duration: 300ms;\n}\n.hover\\:bg-gray-100:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-slate-100:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-slate-200:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-gray-200:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));\n}\n@media (min-width: 768px) {\n  .sm\\:flex {\n    display: flex;\n  }\n  .sm\\:hidden {\n    display: none;\n  }\n}\n.hover\\:bunny-text-orange-400:hover {\n  --tw-text-opacity: 1;\n  color: rgb(251 146 60 / var(--tw-text-opacity, 1));\n}\n.bunny-components .ant-upload-select-picture-card {\n  margin: 0 !important;\n}\n.bunny-components .ant-upload {\n  border-radius: 0.5rem !important;\n}\n.bunny-components .ant-row {\n  margin-bottom: 0px;\n}\n.bunny-components .ant-select-disabled .ant-select-selector .ant-select-selection-item {\n  color: rgba(0, 0, 0, 0.25) !important;\n}\n.bunny-components .ant-input-number,\n.bunny-components .ant-input,\n.bunny-components .ant-picker,\n.bunny-components .ant-input-affix-wrapper,\n.bunny-components .ant-select-selector {\n  font-size: 0.875rem !important;\n  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n  color: #232323 !important;\n}\n.bunny-components .ant-input-affix-wrapper {\n  padding-top: 0 !important;\n  padding-bottom: 0 !important;\n}\n.bunny-components .ant-input-group-addon,\n.bunny-components .ant-input-number-group-addon {\n  color: #475569 !important;\n}\n.bunny-components .ant-input-number-group-wrapper,\n.bunny-components .ant-input-number-affix-wrapper {\n  width: 100%;\n}\n.bunny-components .ant-input-affix-wrapper input {\n  border: none !important;\n}\n.bunny-components .ant-form-item {\n  margin-bottom: 0;\n}\n.bunny-components .ant-form-item-label {\n  text-transform: none !important;\n  font-size: 0.75rem;\n  padding-bottom: 2px !important;\n}\n.bunny-components .ant-form-item-label > label {\n  width: 100%;\n  color: #4b5563 !important;\n}\n.bunny-components .form .ant-form-item-label label {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  box-sizing: border-box;\n}\n.bunny-components .ant-form-item-explain,\n.bunny-components .ant-form-item-explain-error {\n  font-size: 11px;\n  min-height: 11px;\n  line-height: 11px;\n  padding-top: 2px;\n}\n.bunny-components .ant-timeline-item-content {\n  font-size: smaller;\n}\n.bunny-components .ant-tree {\n  font-size: 0.875rem;\n}\n.bunny-components .ant-tree-treenode {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.bunny-components .ant-tree-draggable-icon {\n  height: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.bunny-components .ant-tree-node-content-wrapper {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.bunny-components .ant-tree-switcher {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.bunny-components .ant-page-header {\n  padding-left: 0;\n  padding-right: 0;\n  padding-top: 0;\n}\n.bunny-components .ant-tag {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  border-radius: 14px;\n  font-weight: 500;\n  white-space: nowrap;\n  padding-inline-start: 0.625rem;\n  padding-inline-end: 0.625rem;\n  margin: 0;\n}\n.bunny-components .ant-tag-blue {\n  color: #3b82f6 !important;\n  background: #bfdbfe !important;\n}\n.bunny-components .ant-tag-green {\n  color: #059669 !important;\n  background: #a7f3d0 !important;\n}\n.bunny-components .ant-tag-red {\n  color: #ef4444 !important;\n  background: #fecaca !important;\n}\n.bunny-components .ant-tag-orange {\n  color: #f97316 !important;\n  background: #fed7aa !important;\n}\n.bunny-components .ant-tag-yellow {\n  color: #f59e0b !important;\n  background: #fde68a !important;\n}\n.bunny-components .ant-tag-purple {\n  color: #8b5cf6 !important;\n  background: #ddd6fe !important;\n}\n.bunny-components .ant-tag-gray {\n  color: #6b7280 !important;\n  background: #e5e7eb !important;\n}\n.bunny-components .ant-tag-black {\n  color: white !important;\n  background: black !important;\n}\n.bunny-components .ant-picker {\n  width: 100%;\n}\n.bunny-components .ant-input,\n.bunny-components .ant-select,\n.bunny-components .ant-picker {\n  height: 32px !important;\n}\n.bunny-components .ant-slider-dot {\n  border: 2px solid #f0f0f0;\n}\n.bunny-components .ant-slider-dot-active {\n  border-color: #ff5833;\n}\n.bunny-components .ant-slider-mark :last-child {\n  transform: translateX(-75%) !important;\n}\n.bunny-components .ant-drawer-content {\n  background: #f3f3f9ff;\n}\n.bunny-components .ant-drawer-body,\n.bunny-components .ant-layout {\n  background: #f8fafc;\n}\n.bunny-components .vista-link {\n  color: #1890ff;\n}\n.bunny-components .vista-link:hover {\n  text-decoration: underline;\n  cursor: pointer;\n}\n.bunny-components .ant-popover-inner-content {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  max-width: 300px;\n}\n.bunny-components .ant-popconfirm-message-text {\n  width: 100% !important;\n}\n.bunny-components .ant-popconfirm-title {\n  padding: 0;\n  text-align: center;\n  font-size: 0.875rem !important;\n  width: 100% !important;\n}\n.bunny-components .ant-popconfirm-buttons {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n}\n.bunny-components .ant-popconfirm-buttons button {\n  margin-inline-start: 0 !important;\n}\n.bunny-components .ant-pagination-item {\n  display: flex !important;\n  align-items: center;\n  justify-content: center;\n}\n.bunny-components .ant-btn-primary:disabled {\n  background: #eef0f2 !important;\n  color: rgba(0, 0, 0, 0.25) !important;\n  border: none;\n}\n.bunny-components .ant-btn {\n  box-shadow: none;\n  text-shadow: none;\n  outline: none !important;\n  line-height: 1;\n  font-weight: normal;\n}\n.bunny-components .ant-btn-default .ant-btn-icon {\n  color: #94a3b8;\n  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n}\n.bunny-components .ant-btn-default:hover .ant-btn-icon {\n  color: #ff7f5c;\n}\n.bunny-components .ant-btn-default:disabled {\n  border-color: rgba(113, 125, 148, 0.2) !important;\n}\n.bunny-components .ant-btn-primary:disabled {\n  background-color: rgba(113, 125, 148, 0.1) !important;\n  border-color: rgba(113, 125, 148, 0.1) !important;\n}\n.bunny-components .ant-btn-primary:hover:disabled,\n.bunny-components .ant-btn-primary:disabled {\n  background-clip: padding-box;\n}\n.bunny-components .ant-select-selection-item-content {\n  display: flex !important;\n  align-items: center;\n}\n.bunny-components .ant-select-item {\n  font-size: 0.875rem;\n}\n.bunny-components .ant-select-item-option-content {\n  display: flex;\n  align-items: center;\n  white-space: nowrap !important;\n  overflow: visible !important;\n  text-overflow: default !important;\n  font-size: 0.875rem;\n}\n.bunny-components .ant-select-arrow .anticon:not(.ant-select-suffix) {\n  pointer-events: none;\n}\n.bunny-components .select-dropdown-blue-gray .ant-select-item-option {\n  background-color: #fff !important;\n}\n.bunny-components .select-dropdown-blue-gray .ant-select-item-option-active {\n  color: #ff5833;\n}\n.bunny-components .ant-dropdown-menu-items {\n  padding-left: 0 !important;\n}\n.bunny-components .ant-dropdown-menu-item-active {\n  background-color: transparent !important;\n}\n.bunny-components .ant-input-affix-wrapper.searchfield {\n  background: white !important;\n}\n.bunny-components .ant-input-affix-wrapper.searchfield input {\n  background: white !important;\n}\n.bunny-components .ant-input-affix-wrapper-focused {\n  background: white !important;\n}\n.bunny-components .panel .ant-input-affix-wrapper.searchfield {\n  background: #f8f8f8 !important;\n}\n.bunny-components .panel .ant-input-affix-wrapper.searchfield input {\n  background: #f8f8f8 !important;\n}\n.bunny-components .ant-input-steps-hidden .ant-input-number-handler-wrap {\n  display: none;\n}\n.bunny-components .ant-layout-header {\n  height: 48px;\n}\n.bunny-components .ant-layout-sider-children {\n  width: inherit;\n  position: fixed;\n}\n.bunny-components .ant-menu-item-group-list {\n  display: flex !important;\n  flex-direction: column !important;\n  align-items: flex-start !important;\n  gap: 4px !important;\n}\n.bunny-components .group {\n  display: flex;\n  flex-direction: row;\n  flex-flow: row wrap;\n  box-sizing: border-box;\n}\n.bunny-components .select-datepicker {\n  animation-duration: 0.35s !important;\n}\n.bunny-components .header-datepicker {\n  top: 96px !important;\n  animation-duration: 0s !important;\n}\n.bunny-components .ant-picker-header {\n  border-bottom: none !important;\n}\n.bunny-components .ant-picker-content thead tr th {\n  font-weight: 500;\n}\n.bunny-components .ant-picker-panel-container {\n  border-radius: 0.375rem;\n}\n.bunny-components .ant-picker-cell-selected .custom-date-display {\n  color: #ffffff;\n  background-color: #ff5833;\n}\n.bunny-components .ant-picker-cell-today .custom-date-display {\n  border: 1px solid #ff5833;\n}\n.bunny-components .ant-select:hover,\n.bunny-components * .cardElement:hover {\n  border-color: #ff5833;\n}\n.bunny-components .ant-input-number {\n  width: 100%;\n}\n.bunny-components .ant-input-number-focused {\n  border-color: #ff5833 !important;\n  background-color: #ffffff !important;\n}\n.bunny-components .ant-input-affix-wrapper-focused,\n.bunny-components .ant-input-number-focused,\n.bunny-components .ant-picker,\n.bunny-components .ant-input,\n.bunny-components .ant-select-focused .ant-select-selector,\n.bunny-components .ant-select-selector:focus,\n.bunny-components .ant-select-selector:active,\n.bunny-components .ant-select-open .ant-select-selector {\n  box-shadow: none !important;\n}\n.bunny-components .ant-select-item-option-selected .ant-select-item-option-state {\n  display: none !important;\n}\n.bunny-components .ant-form * input[type='text'].ant-input:not(:disabled),\n.bunny-components .ant-select-selection-item:not(:disabled) {\n  color: #232323;\n}\n.bunny-components .ant-tabs-ink-bar {\n  display: none !important;\n}\n.bunny-components .ant-tabs-tab.ant-tabs-tab-active {\n  border-bottom: 2px solid #ff5833 !important;\n}\n.bunny-components .ant-tabs-tab {\n  border-bottom: 2px solid transparent !important;\n  padding-bottom: 14px !important;\n}\n.bunny-components .ant-upload-wrapper {\n  display: flex;\n}\n.bunny-components .ant-form-item-label > label::after {\n  display: none !important;\n}\n.bunny-components .ant-menu-item {\n  display: flex !important;\n  align-items: center !important;\n}\n.ant-notification {\n  width: min-content;\n}\n.ant-notification-topRight {\n  right: 0 !important;\n  left: 0 !important;\n  margin-left: auto !important;\n  margin-right: auto !important;\n}\n.ant-notification-notice-wrapper {\n  width: 350px !important;\n  overflow: hidden !important;\n}\n.ant-notification-notice {\n  padding: 16px !important;\n  width: 350px !important;\n  border-radius: 8px !important;\n  display: flex !important;\n  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.08), 0px 1px 18px rgba(0, 0, 0, 0.08), 0px 3px 5px rgba(0, 0, 0, 0.16) !important;\n}\n.ant-notification-notice-description {\n  padding: 0 14px 0 0 !important;\n  font-size: 14px !important;\n  overflow-wrap: break-word;\n}\n.ant-notification-notice-success {\n  background-color: #edfffa !important;\n}\n.ant-notification-notice-error {\n  background-color: #fff8f4 !important;\n}\n.ant-notification-notice-error .ant-notification-notice-message {\n  color: #ff5833 !important;\n  font-weight: 500 !important;\n}\n.ant-notification-notice-error .ant-notification-notice-icon {\n  color: #ff5833;\n}\n.ant-notification-notice-success .ant-notification-notice-message {\n  color: #00b76a !important;\n  font-weight: 500 !important;\n}\n.ant-notification-notice-success .ant-notification-notice-icon {\n  color: #00b76a !important;\n}\n.ant-notification-notice-message {\n  margin-bottom: 0 !important;\n}\n.ant-notification-notice-close {\n  top: 16px !important;\n  right: 16px !important;\n}\n.bunny-invoice-container {\n  padding: 0;\n  box-sizing: border-box !important;\n  line-height: 1.15;\n}\n@media only screen and (max-width: 768px) {\n  select,\n  textarea,\n  input[type='text'],\n  input[type='password'],\n  input[type='datetime'],\n  input[type='datetime-local'],\n  input[type='date'],\n  input[type='month'],\n  input[type='time'],\n  input[type='week'],\n  input[type='number'],\n  input[type='email'],\n  input[type='url'],\n  input[type='search'],\n  input[type='tel'],\n  input[type='color'] {\n    font-size: 16px !important;\n  }\n}\n@keyframes App-logo-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n";
 styleInject(css_248z);
 
+const IGNORE_ERRORS = ['Invalid or missing authorization', '["Not found"]'];
+/**
+ * Extracts errors from nested data structure
+ * @param data - The response data object
+ * @param mutationName - The mutation/query name to look for
+ * @returns Array of error messages or null
+ */
+const extractNestedErrors = (data, mutationName) => {
+    if (!data || !mutationName)
+        return null;
+    const mutationData = data[mutationName];
+    if (!mutationData)
+        return null;
+    const errors = mutationData.errors;
+    if (!errors)
+        return null;
+    // Handle stringified JSON array
+    if (typeof errors === 'string') {
+        try {
+            const parsedErrors = JSON.parse(errors);
+            return Array.isArray(parsedErrors) ? parsedErrors : [parsedErrors];
+        }
+        catch (_a) {
+            return [errors];
+        }
+    }
+    // Handle array of errors
+    if (Array.isArray(errors)) {
+        return errors;
+    }
+    return null;
+};
+const useAllErrorFormats = () => {
+    const showErrorNotification = common.useErrorNotification();
+    return (error, mutationName) => {
+        var _a, _b, _c, _d, _e, _f, _g;
+        // Fall back to existing error handling logic
+        const responseErrors = ((_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.errors) || null;
+        if (IGNORE_ERRORS.includes((_d = (_c = (_b = error === null || error === void 0 ? void 0 : error.response) === null || _b === void 0 ? void 0 : _b.errors) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.message)) {
+            return error;
+        }
+        // For errors like this:
+        //   {
+        //     "data": {
+        //         "accountReset": {
+        //             "errors": "[\"Missing required permission: write, can't access mutation AccountReset\"]"
+        //         }
+        //     }
+        // }
+        if ((error === null || error === void 0 ? void 0 : error.data) && mutationName) {
+            const nestedErrors = extractNestedErrors(error.data, mutationName);
+            if (nestedErrors && nestedErrors.length > 0) {
+                // Check if we should ignore these errors
+                if (IGNORE_ERRORS.some(ignoreError => nestedErrors.includes(ignoreError))) {
+                    return error;
+                }
+                // Show each nested error
+                for (const errorMessage of nestedErrors) {
+                    showErrorNotification(errorMessage, null);
+                }
+                return error;
+            }
+        }
+        if (responseErrors) {
+            for (let index in responseErrors) {
+                const error = (_e = responseErrors[index]) === null || _e === void 0 ? void 0 : _e.message;
+                showErrorNotification(error, null);
+            }
+        }
+        else if ((_f = error === null || error === void 0 ? void 0 : error.response) === null || _f === void 0 ? void 0 : _f.error) {
+            showErrorNotification(error.response.exception, error.response.error);
+        }
+        else if ((error === null || error === void 0 ? void 0 : error.constructor) === Array) {
+            for (let index in error)
+                showErrorNotification(error[index].message, null);
+        }
+        else if ((_g = error === null || error === void 0 ? void 0 : error.response) === null || _g === void 0 ? void 0 : _g.message) {
+            showErrorNotification(error.response.message);
+        }
+        else if (error === null || error === void 0 ? void 0 : error.message) {
+            showErrorNotification(error.message);
+        }
+        else if (typeof error === 'string' || (error !== null && react.isValidElement(error))) {
+            showErrorNotification(error);
+        }
+        else {
+            showErrorNotification('Unknown error notification', null);
+        }
+    };
+};
+
 // This will be replaced at build time by rollup-plugin-replace
-const PACKAGE_VERSION = '1.6.0-beta.14';
+const PACKAGE_VERSION = '1.6.0-beta.15';
 const createRequestHeaders = (token) => {
     const headers = createClientDevHeaders({ token });
     // Add the components version header
@@ -71,15 +162,22 @@ const useGraphQLRequest = () => async (query, apiHost, token, variables) => {
     }
 };
 const gqlRequest = async ({ query, apiHost, token, vars, isInPreviewMode, }) => {
-    return await common.gqlRequest({
-        query,
-        apiHost,
-        token,
-        vars,
-        componentsVersion: PACKAGE_VERSION,
-        isInPreviewMode,
-        headers: createClientDevHeaders({ token }),
-    });
+    const handleAllErrorFormats = useAllErrorFormats();
+    try {
+        const { graphqlEndpoint } = common.DEFAULT_CONFIG;
+        const baseHeaders = createClientDevHeaders({
+            token: isInPreviewMode ? undefined : token,
+            componentsVersion: PACKAGE_VERSION,
+        });
+        const requestHeaders = {
+            ...baseHeaders,
+        };
+        return await request(`${apiHost}${graphqlEndpoint}`, query, vars, requestHeaders);
+    }
+    catch (error) {
+        handleAllErrorFormats(error);
+        return null;
+    }
 };
 const createClientDevHeaders = ({ token, componentsVersion, }) => {
     return common.createClientDevHeaders({
@@ -168,22 +266,12 @@ const getBranding = async ({ token, apiHost }) => {
     return response === null || response === void 0 ? void 0 : response.entityBranding;
 };
 
-const createGraphQLClient = (apiHost, token) => new request.GraphQLClient(apiHost + "/graphql", {
-    headers: token
-        ? {
-            Authorization: token,
-        }
-        : undefined,
-});
-
 const BunnyContext = react.createContext({});
 const extraQueryClient = new reactQuery.QueryClient();
 // Every component shares similar props and functionality, which this wrapper handles.
 function BunnyProvider({ children, darkMode = false, queryClient, apiHost, token, onTokenExpired, configProviderProps, }) {
-    const graphQLClient = createGraphQLClient(apiHost || '', token);
     return (jsxRuntime.jsx(BunnyContext.Provider, { value: {
             darkMode,
-            graphQLClient,
             apiHost,
             token,
             onTokenExpired,
@@ -20009,7 +20097,7 @@ function Transactions({ transactionComponent, showSearchBar = true, showTitle =
     const token = useToken();
     // Local state
     const [search, setSearch] = react.useState('');
-    const filterValue = filter || (search.length > 0 ? `filter: "transaction.transactionableId is ${search}"` : '');
+    const filterValue = filter || (search.length > 0 ? `filter: "transaction.amount is ${Number(search)}"` : '');
     // Queries
     const { data } = reactQuery.useQuery({
         queryKey: ['transactions', token, filterValue],
@@ -20080,11 +20168,13 @@ function TransactionsDisplay({ transactions, onSearchValueChanged, search, }) {
     }
     return (jsxRuntime.jsxs("div", { style: style, children: [jsxRuntime.jsxs("div", { className: `bunny-flex bunny-flex-col bunny-w-full bunny-shadow-padding-xb bunny-gap-2 ${isMobile ? 'bunny-overflow-hidden' : ''} ${className}`, children: [showTitle || showSearchBar ? (jsxRuntime.jsxs("div", { className: `bunny-flex ${isMobile ? 'bunny-flex-col bunny-gap-1' : 'bunny-flex-row bunny-items-center'} bunny-justify-between`, children: [showTitle ? (jsxRuntime.jsx(Text$q, { className: "bunny-shrink-0 bunny-font-medium", style: { color: darkMode ? undefined : secondaryColor }, children: title })) : (jsxRuntime.jsx("div", {}) // Empty div so justify-between works
                             ), showSearchBar && (jsxRuntime.jsx("div", { className: `${isMobile ? 'bunny-w-full' : ''}`, children: jsxRuntime.jsx(antd.Input, { className: searchBarClassName ? searchBarClassName : '', onChange: e => {
-                                        if (isNaN(Number(e.target.value))) {
+                                        const value = e.target.value;
+                                        // Allow empty string, numbers, and decimal point
+                                        if (value !== '' && (isNaN(Number(value)) || !/^-?\d*\.?\d*$/.test(value))) {
                                             return;
                                         }
-                                        onSearchValueChanged(e.target.value);
-                                    }, prefix: jsxRuntime.jsx(icons.SearchOutlined, {}), placeholder: "Search by id #", style: {
+                                        onSearchValueChanged(value);
+                                    }, prefix: jsxRuntime.jsx(icons.SearchOutlined, {}), placeholder: "Search by amount", style: {
                                         minWidth: '300px',
                                     }, value: search }) }))] })) : null, jsxRuntime.jsx("div", { className: `bunny-grid bunny-w-full bunny-rounded-md bunny-overflow-auto ${shadow}`, style: {
                             gridTemplateColumns: gridTemplateColumns(),
@@ -22463,18 +22553,57 @@ const DrawerHeader = ({ description, onClose, title, closeButtonClassName, }) =>
     return (jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-4", children: [jsxRuntime.jsxs("div", { className: "bunny-flex bunny-items-center bunny-justify-between bunny-gap-2", children: [jsxRuntime.jsx(Text$j, { className: "bunny-text-xl bunny-font-normal", children: title }), onClose ? (jsxRuntime.jsx("button", { id: "closePayment", onClick: onClose, className: closeButtonClassName, children: jsxRuntime.jsx(icons.CloseOutlined, {}) })) : null] }), description && jsxRuntime.jsx("div", { className: "bunny-text-sm bunny-font-medium", children: description })] }));
 };
 
-const QuantityDrawer_QuoteFragment = t(`
-    fragment QuantityDrawer_QuoteFragment on Quote {
-      id
-      ...Checkout_QuoteFragment
-    }
-  `, [Checkout_QuoteFragment]);
+/**
+ * Creates a context and provider for a state value
+ * @param useValue - A function that returns the state value
+ * @returns A tuple containing the provider and the context value
+ * @example take a look at how this is used in the quoteIdContext in the QuantityDrawer
+ */
+const createStateContext = (useValue) => {
+    const StateContext = react.createContext(null);
+    const StateProvider = ({ initialValue, children, }) => jsxRuntime.jsxs(StateContext.Provider, { value: useValue(initialValue), children: [" ", children, " "] });
+    const useContextState = () => {
+        const value = react.useContext(StateContext);
+        if (value === null) {
+            throw new Error('Provider missing');
+        }
+        return value;
+    };
+    return [StateProvider, useContextState];
+};
+
+const useQuoteIdState = (id) => react.useState(id);
+const [QuoteIdProvider, useQuoteId] = createStateContext(useQuoteIdState);
+
+const useQuoteQueryData = (quoteId) => {
+    const token = useToken();
+    const { data } = reactQuery.useQuery({
+        queryKey: common.QueryKeyFactory.default.createObjectKey({
+            id: quoteId,
+            objectName: 'editingQuote',
+            token,
+        }),
+        queryFn: () => {
+            // This queryFn should never be called if data is set via setQueryData
+            // If called, it means data doesn't exist - return undefined
+            // In practice, data should always be set via setQueryData before this hook is used
+            return undefined;
+        },
+        enabled: false,
+        staleTime: Infinity, // Never consider data stale, only use cache
+        gcTime: Infinity, // Never garbage collect this data
+        // Don't refetch if data exists in cache
+        refetchOnMount: false,
+        refetchOnWindowFocus: false,
+        refetchOnReconnect: false,
+    });
+    return data;
+};
 
 const useSetQuoteQueryData = () => {
     const token = useToken();
     const queryClient = reactQuery.useQueryClient();
-    const setQuoteQueryData = (quoteId, maskedQuote) => {
-        const quote = readFragment(QuantityDrawer_QuoteFragment, maskedQuote);
+    const setQuoteQueryData = (quoteId, quote) => {
         queryClient.setQueryData(common.QueryKeyFactory.default.createObjectKey({
             id: quoteId,
             objectName: 'editingQuote',
@@ -22484,6 +22613,58 @@ const useSetQuoteQueryData = () => {
     return { setQuoteQueryData };
 };
 
+const QuantityInput_QuoteFragment = t(`
+    fragment QuantityInput_QuoteFragment on Quote {
+      id
+      quoteChanges {
+        id
+        priceList {
+          id
+        }
+        charges {
+          id
+          priceListCharge {
+            id
+          }
+        }
+        subscription {
+          charges {
+            id
+            priceListCharge {
+              id
+            }
+          }
+        }
+      }
+    }
+  `, []);
+
+const QuoteChangeSummarySection_QuoteFragment = t(`
+    fragment QuoteChangeSummarySection_QuoteFragment on Quote {
+      id
+      amountDue
+      amount
+      currencyId
+    }
+  `, []);
+const QuoteChangeSummarySection = ({ openCheckout, errorUpdatingQuantity, }) => {
+    const isMobile = common.useIsMobile();
+    const [quoteId] = useQuoteId();
+    const maskedQuote = useQuoteQueryData(quoteId);
+    const quote = readFragment(QuoteChangeSummarySection_QuoteFragment, maskedQuote);
+    const disabled = !quoteId || !quote || errorUpdatingQuantity;
+    return (jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-items-end", children: [quote && !disabled && (jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-mb-8", children: [jsxRuntime.jsx("div", { className: "bunny-text-slate-500 bunny-text-right bunny-text-xs bunny-mb-2", children: "TOTAL" }), jsxRuntime.jsx("div", { className: `bunny-text-right ${isMobile ? 'bunny-text-2xl' : 'bunny-text-xl'}`, children: common.formatCurrency(getQuoteAmountDue(quote), (quote === null || quote === void 0 ? void 0 : quote.currencyId) || '') })] })), jsxRuntime.jsx("div", { className: `bunny-flex bunny-items-center bunny-justify-end ${isMobile ? 'bunny-w-full' : ''}`, children: jsxRuntime.jsx(antd.Button, { className: "bunny-w-full", onClick: openCheckout, disabled: disabled, size: isMobile ? 'large' : 'middle', type: "primary", children: "Proceed to checkout" }) })] }));
+};
+
+const QuantityDrawer_QuoteFragment = t(`
+    fragment QuantityDrawer_QuoteFragment on Quote {
+      id
+      ...Checkout_QuoteFragment
+      ...QuantityInput_QuoteFragment
+      ...QuoteChangeSummarySection_QuoteFragment
+    }
+  `, [Checkout_QuoteFragment, QuantityInput_QuoteFragment, QuoteChangeSummarySection_QuoteFragment]);
+
 const mutation$4 = t(`
     mutation QuoteChargeCreate(
       $quoteChangeId: ID!
@@ -22518,12 +22699,9 @@ const mutation$4 = t(`
     }
   `, [QuantityDrawer_QuoteFragment]);
 const quoteChargeCreate$1 = async ({ price, priceListChargeId, quantity, quoteChangeId, startDate, subscriptionChargeId, token, apiHost, }) => {
-    var _a, _b;
+    var _a;
     const response = await execute(mutation$4, { apiHost, token }, { price, priceListChargeId, quantity, quoteChangeId, startDate, subscriptionChargeId });
-    if ((_a = response.quoteChargeCreate) === null || _a === void 0 ? void 0 : _a.errors) {
-        throw new Error(response.quoteChargeCreate.errors[0]);
-    }
-    return (_b = response.quoteChargeCreate) === null || _b === void 0 ? void 0 : _b.quoteCharge;
+    return (_a = response.quoteChargeCreate) === null || _a === void 0 ? void 0 : _a.quoteCharge;
 };
 
 const mutation$3 = t(`
@@ -22600,6 +22778,7 @@ const CanShowQuantitiesInput_SubscriptionChargeFragment = t(`
     pricingModel
     expired
     selfServiceQuantity
+    kind
   }
 `);
 const CanShowQuantitiesInput_SubscriptionFragment = t(`
@@ -22609,7 +22788,7 @@ const CanShowQuantitiesInput_SubscriptionFragment = t(`
       priceList {
         id
       }
-      chargeReport {
+      currentCharges {
         ...CanShowQuantitiesInput_SubscriptionChargeFragment
       }
     }
@@ -22628,12 +22807,14 @@ const canShowQuantitiesInput = ({ charge: maskedCharge, subscription: maskedSubs
     const isPendingSubscription = (subscription === null || subscription === void 0 ? void 0 : subscription.state) === 'PENDING';
     const isTrialSubscription = (subscription === null || subscription === void 0 ? void 0 : subscription.state) === 'TRIAL';
     const isFlatPricing = (charge === null || charge === void 0 ? void 0 : charge.pricingModel) === 'FLAT';
-    const shouldProcessCharge = (isActiveSubscription || isPendingSubscription || isTrialSubscription) &&
+    const isDiscount = (charge === null || charge === void 0 ? void 0 : charge.kind) === 'DISCOUNT' || (charge === null || charge === void 0 ? void 0 : charge.kind) === 'FREE_PERIOD_DISCOUNT';
+    const quantityChangeAllowed = (isActiveSubscription || isPendingSubscription) &&
+        !isDiscount &&
+        !isTrialSubscription &&
         !isFlatPricing &&
         (charge === null || charge === void 0 ? void 0 : charge.selfServiceQuantity) &&
         !(charge === null || charge === void 0 ? void 0 : charge.expired);
-    // Now you can use the value of shouldProcessCharge to determine whether to process the charge.
-    return shouldProcessCharge;
+    return quantityChangeAllowed;
 };
 const canShowChangeQuantities = ({ subscriptions, }) => {
     return subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.some(maskedSubscription => {
@@ -22641,7 +22822,7 @@ const canShowChangeQuantities = ({ subscriptions, }) => {
         if (!maskedSubscription)
             return false;
         const subscription = readFragment(CanShowQuantitiesInput_SubscriptionFragment, maskedSubscription);
-        return (_a = subscription === null || subscription === void 0 ? void 0 : subscription.chargeReport) === null || _a === void 0 ? void 0 : _a.some(charge => {
+        return (_a = subscription === null || subscription === void 0 ? void 0 : subscription.currentCharges) === null || _a === void 0 ? void 0 : _a.some(charge => {
             return canShowQuantitiesInput({ charge, subscription: maskedSubscription });
         });
     });
@@ -22674,15 +22855,18 @@ const QuantityInput_SubscriptionFragment = t(`
     CanShowQuantitiesInput_SubscriptionFragment,
 ]);
 const DEBOUNCE_TIME$1 = 1000;
-const QuantityInput = ({ charge: maskedCharge, editingQuote, editingQuoteId, setEditingQuoteData, subscription: maskedSubscription, setUpdatingChargeQuantityId, updatingChargeQuantityId, setErrorUpdatingQuantity, }) => {
+const QuantityInput = ({ charge: maskedCharge, subscription: maskedSubscription, setUpdatingChargeQuantityId, updatingChargeQuantityId, setErrorUpdatingQuantity, }) => {
     // Context
     const token = useToken();
     const { apiHost } = react.useContext(BunnyContext);
+    const [quoteId, setQuoteId] = useQuoteId();
+    const maskedQuote = useQuoteQueryData(quoteId);
     // Local state
     const [quantity, setQuantity] = react.useState();
-    // Derived state
+    // Read fragments
     const charge = readFragment(QuantityInput_SubscriptionChargeFragment, maskedCharge);
     const subscription = readFragment(QuantityInput_SubscriptionFragment, maskedSubscription);
+    const quote = readFragment(QuantityInput_QuoteFragment, maskedQuote);
     // Hooks
     const showErrorNotification = common.useErrorNotification();
     const { setQuoteQueryData } = useSetQuoteQueryData();
@@ -22702,9 +22886,15 @@ const QuantityInput = ({ charge: maskedCharge, editingQuote, editingQuoteId, set
         mutationFn: quoteChargeCreate$1,
         onSuccess: response => {
             var _a, _b;
-            if (!editingQuoteId)
-                throw new Error('editingQuoteId is required');
-            setQuoteQueryData(editingQuoteId, (_b = (_a = response === null || response === void 0 ? void 0 : response.quoteChange) === null || _a === void 0 ? void 0 : _a.quote) !== null && _b !== void 0 ? _b : null);
+            if (!quoteId)
+                throw new Error('quoteId is required');
+            if ((_a = response === null || response === void 0 ? void 0 : response.quoteChange) === null || _a === void 0 ? void 0 : _a.quote) {
+                setQuoteQueryData(quoteId, (_b = response === null || response === void 0 ? void 0 : response.quoteChange) === null || _b === void 0 ? void 0 : _b.quote);
+            }
+            setErrorUpdatingQuantity(false);
+        },
+        onError: () => {
+            setErrorUpdatingQuantity(true);
         },
     });
     const createQuote = reactQuery.useMutation({
@@ -22713,16 +22903,15 @@ const QuantityInput = ({ charge: maskedCharge, editingQuote, editingQuoteId, set
             var _a, _b, _c;
             if (!(quote === null || quote === void 0 ? void 0 : quote.id))
                 throw new Error('quote id is required');
-            setEditingQuoteData({
-                id: quote === null || quote === void 0 ? void 0 : quote.id,
-                isTrial: (subscription === null || subscription === void 0 ? void 0 : subscription.state) === 'TRIAL',
-            });
+            setQuoteId(quote === null || quote === void 0 ? void 0 : quote.id);
+            setQuoteQueryData(quote === null || quote === void 0 ? void 0 : quote.id, quote);
             const quoteChange = (_a = quote === null || quote === void 0 ? void 0 : quote.quoteChanges) === null || _a === void 0 ? void 0 : _a.find(quoteChange => { var _a, _b; return ((_a = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.priceList) === null || _a === void 0 ? void 0 : _a.id) === ((_b = subscription.priceList) === null || _b === void 0 ? void 0 : _b.id); });
             const subscriptionCharge = (_c = (_b = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.subscription) === null || _b === void 0 ? void 0 : _b.charges) === null || _c === void 0 ? void 0 : _c.find(subscriptionCharge => { var _a; return ((_a = subscriptionCharge === null || subscriptionCharge === void 0 ? void 0 : subscriptionCharge.priceListCharge) === null || _a === void 0 ? void 0 : _a.id) === charge.priceListChargeId; });
             if (!(quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.id))
                 throw new Error('quoteChange id is required');
             if (!(subscriptionCharge === null || subscriptionCharge === void 0 ? void 0 : subscriptionCharge.id))
                 throw new Error('subscriptionCharge id is required');
+            setErrorUpdatingQuantity(false);
             createCharge({
                 apiHost,
                 quantity,
@@ -22732,15 +22921,24 @@ const QuantityInput = ({ charge: maskedCharge, editingQuote, editingQuoteId, set
                 token,
             });
         },
+        onError: () => {
+            setErrorUpdatingQuantity(true);
+        },
     });
     const updateQuoteCharge = reactQuery.useMutation({
-        mutationFn: ({ quoteChargeId, quantity }) => quoteChargeUpdate(quoteChargeId, quantity, apiHost, token),
+        mutationFn: ({ quoteChargeId, quantity, }) => {
+            if (!quoteChargeId)
+                throw new Error('quoteChargeId is required');
+            return quoteChargeUpdate(quoteChargeId, quantity, apiHost, token);
+        },
         onSuccess: response => {
             var _a;
             const quote = (_a = response === null || response === void 0 ? void 0 : response.quoteChange) === null || _a === void 0 ? void 0 : _a.quote;
-            if (!editingQuoteId)
-                throw new Error('editingQuoteId is required');
-            setQuoteQueryData(editingQuoteId, quote !== null && quote !== void 0 ? quote : null);
+            if (!quoteId)
+                throw new Error('quoteId is required');
+            if (quote) {
+                setQuoteQueryData(quoteId, quote);
+            }
             setErrorUpdatingQuantity(false);
         },
         onError: () => {
@@ -22764,29 +22962,44 @@ const QuantityInput = ({ charge: maskedCharge, editingQuote, editingQuoteId, set
             setUpdatingChargeQuantityId(getUpdatingChargeQuantityId(charge.priceListChargeId, subscription.id));
             const quantityDelta = quantity - ((_a = charge.quantity) !== null && _a !== void 0 ? _a : 0);
             debouncedQuantityUpdate.cancel();
-            debouncedQuantityUpdate(charge.priceListChargeId, quantityDelta, subscription.id, editingQuote, // TODO: do not cast as Quote, use correct quote fragment type instead
-            editingQuoteId);
+            debouncedQuantityUpdate(charge.priceListChargeId, quantityDelta, quantity, subscription.id, quote, quoteId);
         }
     };
-    const debouncedQuantityUpdate = react.useCallback(lodashExports.debounce((priceListChargeId, quantityDelta, subscriptionId, quote, editingQuoteId) => {
+    const debouncedQuantityUpdate = react.useCallback(lodashExports.debounce((priceListChargeId, quantityDelta, quantity, subscriptionId, quote, quoteId) => {
+        var _a, _b, _c;
         if (quantityDelta === 0) {
             setErrorUpdatingQuantity(true);
             showErrorNotification('New quantity cannot be the same as current');
             return;
         }
         // If we are not editing a quote, we create a new one
-        if (editingQuoteId === undefined) {
+        if (quoteId === undefined) {
             createQuote.mutate(subscriptionId);
         }
         else {
-            const quoteChange = quote === null || quote === void 0 ? void 0 : quote.quoteChanges.find(quoteChange => { var _a; return quoteChange.priceList.id === ((_a = subscription.priceList) === null || _a === void 0 ? void 0 : _a.id); });
-            const quoteCharge = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.find(charge => charge.priceListCharge.id === priceListChargeId);
+            const quoteChange = (_a = quote === null || quote === void 0 ? void 0 : quote.quoteChanges) === null || _a === void 0 ? void 0 : _a.find(quoteChange => { var _a, _b; return ((_a = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.priceList) === null || _a === void 0 ? void 0 : _a.id) === ((_b = subscription.priceList) === null || _b === void 0 ? void 0 : _b.id); });
+            const quoteCharge = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.find(charge => { var _a; return ((_a = charge === null || charge === void 0 ? void 0 : charge.priceListCharge) === null || _a === void 0 ? void 0 : _a.id) === priceListChargeId; });
             if (quoteCharge) {
                 updateQuoteCharge.mutate({
                     quoteChargeId: quoteCharge.id,
                     quantity: quantityDelta,
                 });
             }
+            else {
+                const subscriptionCharge = (_c = (_b = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.subscription) === null || _b === void 0 ? void 0 : _b.charges) === null || _c === void 0 ? void 0 : _c.find(subscriptionCharge => { var _a; return ((_a = subscriptionCharge === null || subscriptionCharge === void 0 ? void 0 : subscriptionCharge.priceListCharge) === null || _a === void 0 ? void 0 : _a.id) === priceListChargeId; });
+                if (!(subscriptionCharge === null || subscriptionCharge === void 0 ? void 0 : subscriptionCharge.id))
+                    throw new Error('subscriptionCharge id is required');
+                if (!(quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.id))
+                    throw new Error('quoteChange id is required');
+                createCharge({
+                    apiHost,
+                    quantity, // This is a new charge so use quantity instead of quantityDelta
+                    quoteChangeId: quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.id,
+                    startDate: formatDateForApi(dayjs()),
+                    subscriptionChargeId: subscriptionCharge.id,
+                    token,
+                });
+            }
         }
     }, DEBOUNCE_TIME$1), []);
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(antd.Input, { className: "bunny-text-right", disabled: quantityDisabled, onChange: e => {
@@ -22826,37 +23039,19 @@ const QuantityChangeGridRow_SubscriptionFragment = t(`
     QuantityInput_SubscriptionFragment,
 ]);
 const { Text: Text$i } = antd.Typography;
-const QuantityChangeGridRow = ({ editingQuote, editingQuoteId, setEditingQuoteData, subscription: maskedSubscription, subscriptionCharge: maskedSubscriptionCharge, setUpdatingChargeQuantityId, updatingChargeQuantityId, setErrorUpdatingQuantity, }) => {
+const QuantityChangeGridRow = ({ subscription: maskedSubscription, subscriptionCharge: maskedSubscriptionCharge, setUpdatingChargeQuantityId, updatingChargeQuantityId, setErrorUpdatingQuantity, }) => {
     var _a, _b;
     const subscription = readFragment(QuantityChangeGridRow_SubscriptionFragment, maskedSubscription);
     const charge = readFragment(QuantityChangeGridRow_SubscriptionChargeFragment, maskedSubscriptionCharge);
     if (!canShowQuantitiesInput({ charge, subscription }))
         return null;
     const { brandColor } = react.useContext(BrandContext);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-1", children: [jsxRuntime.jsx(Text$i, { className: "bunny-font-medium bunny-text-sm bunny-col-span-full", style: { color: brandColor }, children: (_a = subscription === null || subscription === void 0 ? void 0 : subscription.plan) === null || _a === void 0 ? void 0 : _a.name }), jsxRuntime.jsx(Text$i, { className: "bunny-text-sm", children: (_b = charge.name) === null || _b === void 0 ? void 0 : _b.toUpperCase() })] }), jsxRuntime.jsx(Text$i, { className: "bunny-flex bunny-items-center bunny-justify-end bunny-font-medium bunny-text-sm bunny-text-gray-900", children: charge.quantity }), jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-justify-center bunny-items-end", children: [jsxRuntime.jsx(QuantityInput, { charge: charge, editingQuote: editingQuote, editingQuoteId: editingQuoteId, setEditingQuoteData: setEditingQuoteData, subscription: subscription, setUpdatingChargeQuantityId: setUpdatingChargeQuantityId, updatingChargeQuantityId: updatingChargeQuantityId, setErrorUpdatingQuantity: setErrorUpdatingQuantity }), jsxRuntime.jsx("div", {})] }), jsxRuntime.jsx(antd.Divider, { className: "bunny-col-span-full bunny-my-2" })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-1", children: [jsxRuntime.jsx(Text$i, { className: "bunny-font-medium bunny-text-sm bunny-col-span-full", style: { color: brandColor }, children: (_a = subscription === null || subscription === void 0 ? void 0 : subscription.plan) === null || _a === void 0 ? void 0 : _a.name }), jsxRuntime.jsx(Text$i, { className: "bunny-text-sm", children: (_b = charge.name) === null || _b === void 0 ? void 0 : _b.toUpperCase() })] }), jsxRuntime.jsx(Text$i, { className: "bunny-flex bunny-items-center bunny-justify-end bunny-font-medium bunny-text-sm bunny-text-gray-900", children: charge.quantity }), jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-justify-center bunny-items-end", children: [jsxRuntime.jsx(QuantityInput, { charge: charge, subscription: subscription, setUpdatingChargeQuantityId: setUpdatingChargeQuantityId, updatingChargeQuantityId: updatingChargeQuantityId, setErrorUpdatingQuantity: setErrorUpdatingQuantity }), jsxRuntime.jsx("div", {})] }), jsxRuntime.jsx(antd.Divider, { className: "bunny-col-span-full bunny-my-2" })] }));
 };
 
 const { Text: Text$h } = antd.Typography;
 const QuantityChangeGridTitle = ({ children, right }) => (jsxRuntime.jsx(Text$h, { className: `bunny-font-medium bunny-text-sm bunny-text-slate-600 ${right ? 'bunny-text-right' : 'bunny-text-left'}`, children: children }));
 
-const QuoteChangeSummarySection = ({ editingQuote, editingQuoteData, openCheckout, setEditingQuoteData, errorUpdatingQuantity, }) => {
-    const { apiHost } = react.useContext(BunnyContext);
-    const isMobile = common.useIsMobile();
-    const token = useToken();
-    const showSuccessNotification = common.useSuccessNotification();
-    const trialUpgradeMutation = reactQuery.useMutation({
-        mutationFn: (quoteId) => checkout({ quoteId, token, apiHost }),
-        onSuccess: () => {
-            setEditingQuoteData(undefined);
-            showSuccessNotification('Subscription updated successfully');
-        },
-    });
-    const disabled = !editingQuoteData || !editingQuote || errorUpdatingQuantity;
-    return (jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-items-end", children: [editingQuote && !disabled && (jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-mb-8", children: [jsxRuntime.jsx("div", { className: "bunny-text-slate-500 bunny-text-right bunny-text-xs bunny-mb-2", children: "TOTAL" }), jsxRuntime.jsx("div", { className: `bunny-text-right ${isMobile ? 'bunny-text-2xl' : 'bunny-text-xl'}`, children: common.formatCurrency(getQuoteAmountDue(editingQuote), (editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.currencyId) || '') })] })), jsxRuntime.jsx("div", { className: `bunny-flex bunny-items-center bunny-justify-end ${isMobile ? 'bunny-w-full' : ''}`, children: jsxRuntime.jsx(antd.Button, { className: "bunny-w-full", onClick: (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.isTrial)
-                        ? () => trialUpgradeMutation.mutate(editingQuoteData.id)
-                        : openCheckout, disabled: disabled, size: isMobile ? 'large' : 'middle', type: "primary", children: (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.isTrial) ? 'Activate Trial' : 'Proceed to checkout' }) })] }));
-};
-
 const QUANTITY_CHANGE_HEADER_TITLE = 'Update quantities';
 const QUANTITY_CHANGE_HEADER_DESCRIPTION = 'Adjust quantities below. The change will take effect immediately after checkout has been completed.';
 const QuantityDrawerDesktop_SubscriptionFragment = t(`
@@ -22868,7 +23063,7 @@ const QuantityDrawerDesktop_SubscriptionFragment = t(`
       ...QuantityChangeGridRow_SubscriptionFragment
     }
   `, [QuantityChangeGridRow_SubscriptionFragment, QuantityChangeGridRow_SubscriptionChargeFragment]);
-const QuantityChangeDrawerDesktop = ({ editingQuote, editingQuoteData, onClose, open, openCheckout, setEditingQuoteData, subscriptions, setUpdatingChargeQuantityId, updatingChargeQuantityId, }) => {
+const QuantityChangeDrawerDesktop = ({ onClose, open, openCheckout, subscriptions, setUpdatingChargeQuantityId, updatingChargeQuantityId, }) => {
     const [openLocal, setOpenLocal] = react.useState(open);
     const [errorUpdatingQuantity, setErrorUpdatingQuantity] = react.useState(false);
     const isMobile = common.useIsMobile();
@@ -22910,9 +23105,9 @@ const QuantityChangeDrawerDesktop = ({ editingQuote, editingQuoteData, onClose,
                         return (jsxRuntime.jsx("div", { className: "bunny-contents", children: (_a = subscription === null || subscription === void 0 ? void 0 : subscription.currentCharges) === null || _a === void 0 ? void 0 : _a.map((charge, chargeIndex) => {
                                 if (charge.chargeType === 'USAGE')
                                     return null;
-                                return (jsxRuntime.jsx(QuantityChangeGridRow, { editingQuote: editingQuote, editingQuoteId: editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id, setEditingQuoteData: setEditingQuoteData, subscription: subscription, subscriptionCharge: charge, setUpdatingChargeQuantityId: setUpdatingChargeQuantityId, updatingChargeQuantityId: updatingChargeQuantityId, setErrorUpdatingQuantity: setErrorUpdatingQuantity }, chargeIndex));
+                                return (jsxRuntime.jsx(QuantityChangeGridRow, { subscription: subscription, subscriptionCharge: charge, setUpdatingChargeQuantityId: setUpdatingChargeQuantityId, updatingChargeQuantityId: updatingChargeQuantityId, setErrorUpdatingQuantity: setErrorUpdatingQuantity }, chargeIndex));
                             }) }, index));
-                    })] }), jsxRuntime.jsx(QuoteChangeSummarySection, { editingQuote: editingQuote, editingQuoteData: editingQuoteData, openCheckout: openCheckout, setEditingQuoteData: setEditingQuoteData, errorUpdatingQuantity: errorUpdatingQuantity })] }));
+                    })] }), jsxRuntime.jsx(QuoteChangeSummarySection, { openCheckout: openCheckout, errorUpdatingQuantity: errorUpdatingQuantity })] }));
 };
 
 function invalidateSubscriptionsQueryKeys(queryClient, token) {
@@ -22936,45 +23131,19 @@ function invalidateSubscriptionsQueryKeys(queryClient, token) {
     });
 }
 
-const useQuoteQueryData = (quoteId) => {
-    const token = useToken();
-    const { data } = reactQuery.useQuery({
-        queryKey: common.QueryKeyFactory.default.createObjectKey({
-            id: quoteId,
-            objectName: 'editingQuote',
-            token,
-        }),
-        queryFn: () => {
-            // This queryFn should never be called if data is set via setQueryData
-            // If called, it means data doesn't exist - return undefined
-            // In practice, data should always be set via setQueryData before this hook is used
-            return undefined;
-        },
-        enabled: false,
-        staleTime: Infinity, // Never consider data stale, only use cache
-        gcTime: Infinity, // Never garbage collect this data
-        // Don't refetch if data exists in cache
-        refetchOnMount: false,
-        refetchOnWindowFocus: false,
-        refetchOnReconnect: false,
-    });
-    return data;
-};
-
-const QuantityDrawer = ({ subscriptions, quantityDrawerOpen, setQuantityDrawerOpen, handlePortalErrors, setShowInactive, }) => {
+const QuantityDrawerContent = ({ subscriptions, quantityDrawerOpen, setQuantityDrawerOpen, handlePortalErrors, setShowInactive, }) => {
     const token = useToken();
     const queryClient = reactQuery.useQueryClient();
     const showSuccessNotification = common.useSuccessNotification();
     // State management
-    const [editingQuoteData, setEditingQuoteData] = react.useState();
+    const [quoteId, setQuoteId] = useQuoteId();
     const [payModalVisible, setPayModalVisible] = react.useState(false);
     const [updatingChargeQuantityId, setUpdatingChargeQuantityId] = react.useState(undefined);
-    const maskedQuote = useQuoteQueryData(editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id);
-    const quote = readFragment(QuantityDrawer_QuoteFragment, maskedQuote);
+    const quote = useQuoteQueryData(quoteId);
     // Handlers
     const onSuccess = () => {
         setQuantityDrawerOpen(false);
-        setEditingQuoteData(undefined);
+        setQuoteId(undefined);
         queryClient.invalidateQueries({
             queryKey: common.QueryKeyFactory.default.transactionsKey({ token }),
         });
@@ -22993,14 +23162,17 @@ const QuantityDrawer = ({ subscriptions, quantityDrawerOpen, setQuantityDrawerOp
     const handleDrawerClose = () => {
         if (updatingChargeQuantityId) {
             setUpdatingChargeQuantityId(undefined);
-            setEditingQuoteData(undefined);
+            setQuoteId(undefined);
         }
         setQuantityDrawerOpen(false);
     };
     const handleOpenCheckout = () => {
         setPayModalVisible(true);
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(QuantityChangeDrawerDesktop, { editingQuote: quote, editingQuoteData: editingQuoteData, onClose: handleDrawerClose, open: quantityDrawerOpen, openCheckout: handleOpenCheckout, setEditingQuoteData: setEditingQuoteData, subscriptions: subscriptions, setUpdatingChargeQuantityId: setUpdatingChargeQuantityId, updatingChargeQuantityId: updatingChargeQuantityId }), jsxRuntime.jsx(Checkout, { onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, quote: quote, token: token, isUpdatingQuote: false })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(QuantityChangeDrawerDesktop, { onClose: handleDrawerClose, open: quantityDrawerOpen, openCheckout: handleOpenCheckout, subscriptions: subscriptions, setUpdatingChargeQuantityId: setUpdatingChargeQuantityId, updatingChargeQuantityId: updatingChargeQuantityId }), jsxRuntime.jsx(Checkout, { onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, quote: quote, token: token, isUpdatingQuote: false })] }));
+};
+const QuantityDrawer = ({ subscriptions, quantityDrawerOpen, setQuantityDrawerOpen, handlePortalErrors, setShowInactive, }) => {
+    return (jsxRuntime.jsx(QuoteIdProvider, { children: jsxRuntime.jsx(QuantityDrawerContent, { subscriptions: subscriptions, quantityDrawerOpen: quantityDrawerOpen, setQuantityDrawerOpen: setQuantityDrawerOpen, handlePortalErrors: handlePortalErrors, setShowInactive: setShowInactive }) }));
 };
 
 const useCancelSubscription = () => {
@@ -24822,6 +24994,7 @@ mutation QuoteChargeCreate ($quoteChangeId: ID!, $startDate: ISO8601Date!, $endD
 
 `;
 const quoteChargeCreate = async ({ price, priceListChargeId, quantity, quoteChangeId, startDate, subscriptionChargeId, token, apiHost, }) => {
+    var _a;
     const response = await gqlRequest({
         query: QUOTE_CHARGE_CREATE,
         vars: {
@@ -24835,10 +25008,7 @@ const quoteChargeCreate = async ({ price, priceListChargeId, quantity, quoteChan
         apiHost,
         token,
     });
-    if (response.errors) {
-        throw new Error(response.errors[0].message);
-    }
-    return response.quoteChargeCreate.quoteCharge;
+    return (_a = response === null || response === void 0 ? void 0 : response.quoteChargeCreate) === null || _a === void 0 ? void 0 : _a.quoteCharge;
 };
 
 const mutation = t(`