@bunnyapp/components 1.0.76-beta.1 → 1.0.76-beta.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/dist/cjs/index.js +433 -205
  2. package/dist/cjs/src/components/QuotePreviewProvider.d.ts +17 -0
  3. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/PlanPicker.d.ts +0 -5
  4. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/PriceListGrid.d.ts +2 -2
  5. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/PriceListSelector.d.ts +2 -3
  6. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/checkoutBar/CheckoutBarSummarySection.d.ts +1 -3
  7. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/EverythingPlanFeatures.d.ts +62 -2
  8. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/FeatureAddons.d.ts +9 -0
  9. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PlanFeatures.d.ts +3 -3
  10. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PriceListGridDesktop.d.ts +2 -2
  11. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerUtils.d.ts +3 -3
  12. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardPriceDescription.d.ts +7 -0
  13. package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/priceListCardUtils.d.ts +3 -2
  14. package/dist/cjs/src/components/Subscriptions/SubscriptionsContext.d.ts +0 -3
  15. package/dist/cjs/src/graphql/mutations/quoteChargeCreate.d.ts +2 -1
  16. package/dist/cjs/src/graphql/mutations/quoteChargeDelete.d.ts +7 -0
  17. package/dist/cjs/src/hooks/quotes/useQuoteUpdateFeatureAddon.d.ts +8 -0
  18. package/dist/cjs/src/utils/featureAddonUtils.d.ts +3 -0
  19. package/dist/esm/index.js +435 -207
  20. package/dist/esm/src/components/QuotePreviewProvider.d.ts +17 -0
  21. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/PlanPicker.d.ts +0 -5
  22. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/PriceListGrid.d.ts +2 -2
  23. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/PriceListSelector.d.ts +2 -3
  24. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/checkoutBar/CheckoutBarSummarySection.d.ts +1 -3
  25. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/EverythingPlanFeatures.d.ts +62 -2
  26. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/FeatureAddons.d.ts +9 -0
  27. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PlanFeatures.d.ts +3 -3
  28. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PriceListGridDesktop.d.ts +2 -2
  29. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerUtils.d.ts +3 -3
  30. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardPriceDescription.d.ts +7 -0
  31. package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/priceListCardUtils.d.ts +3 -2
  32. package/dist/esm/src/components/Subscriptions/SubscriptionsContext.d.ts +0 -3
  33. package/dist/esm/src/graphql/mutations/quoteChargeCreate.d.ts +2 -1
  34. package/dist/esm/src/graphql/mutations/quoteChargeDelete.d.ts +7 -0
  35. package/dist/esm/src/hooks/quotes/useQuoteUpdateFeatureAddon.d.ts +8 -0
  36. package/dist/esm/src/utils/featureAddonUtils.d.ts +3 -0
  37. package/package.json +2 -2
package/dist/esm/index.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
2
2
  import { createContext, useContext, useMemo, useState, useEffect, useRef, useCallback } from 'react';
3
3
  import { Markup } from 'interweave';
4
- import { ConfigProvider, Spin, Button, Tag, Typography, Dropdown, Input, Checkbox, Skeleton, Collapse, Modal, Form, Tooltip, Drawer, Card as Card$1, Divider, Select, Image, Radio, Space, Popconfirm, Table } from 'antd';
5
- import { DownloadOutlined, CreditCardOutlined, EllipsisOutlined, BankOutlined, SearchOutlined, CheckCircleFilled, CloseOutlined, ArrowLeftOutlined } from '@ant-design/icons';
4
+ import { ConfigProvider, Spin, Button, Tag, Typography, Dropdown, Input, Checkbox, Skeleton, Collapse, Modal, Form, Tooltip, Drawer, Card as Card$1, Divider, Select, Image, Radio, Space, Switch, Popconfirm, Table } from 'antd';
5
+ import { DownloadOutlined, CreditCardOutlined, EllipsisOutlined, BankOutlined, SearchOutlined, CheckCircleFilled, CloseOutlined, ArrowLeftOutlined, InfoCircleOutlined } from '@ant-design/icons';
6
6
  import styled from 'styled-components';
7
7
  import { DEFAULT_ACCENT_COLOR, DEFAULT_BRAND_COLOR, DEFAULT_SECONDARY_COLOR, DEFAULT_TOP_NAV_IMAGE_URL, gqlRequest as gqlRequest$1, createClientDevHeaders, X_BUNNY_COMPONENTS_VERSION_HEADER_NAME, QueryKeyFactory, useIsMobile, isColorTooDark, INPUT_BORDER_COLOR, SLATE_50, SLATE_400, SLATE_200, useErrorNotification, invokePlugin, useAllErrorFormats, formatCurrency, GRAY_500, GRAY_200, useSuccessNotification, getFormattedInvoice, PAYABLE_INVOICE_STATES, BreakpointNumbers, request as request$1, useGraphQLmutation, useInfoNotification, formatDate, TransactionState, SLATE_600, WHITE, TransactionKind, SLATE_500, PRIMARY_COLOR, Lists, sortSubscriptionCharges, getAccount, StringUtils, BillingPeriod, ChargeType, SubscriptionState as SubscriptionState$2, PERIOD_LABELS, PricingStyle, PricingModel, SLATE_100, MODAL_MAX_HEIGHT, DataInterval, QuoteChangeKind, TAG_COLORS } from '@bunnyapp/common';
8
8
  import { QueryClient, QueryClientProvider, useQuery, useQueryClient, useMutation, keepPreviousData } from '@tanstack/react-query';
@@ -45,7 +45,7 @@ function styleInject(css, ref) {
45
45
  }
46
46
  }
47
47
 
48
- 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-my-2 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n.bunny-my-24 {\n margin-top: 6rem;\n margin-bottom: 6rem;\n}\n.bunny-my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n.bunny-mb-2 {\n margin-bottom: 0.5rem;\n}\n.bunny-mb-4 {\n margin-bottom: 1rem;\n}\n.bunny-mb-8 {\n margin-bottom: 2rem;\n}\n.bunny-mt-2 {\n margin-top: 0.5rem;\n}\n.bunny-mt-24 {\n margin-top: 6rem;\n}\n.bunny-mt-4 {\n margin-top: 1rem;\n}\n.bunny-flex {\n display: flex;\n}\n.bunny-grid {\n display: grid;\n}\n.bunny-contents {\n display: contents;\n}\n.bunny-h-1\\/2 {\n height: 50%;\n}\n.bunny-h-5 {\n height: 1.25rem;\n}\n.bunny-h-8 {\n height: 2rem;\n}\n.bunny-h-full {\n height: 100%;\n}\n.bunny-h-screen {\n height: 100vh;\n}\n.bunny-min-h-0 {\n min-height: 0px;\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-items-start {\n align-items: flex-start;\n}\n.bunny-items-end {\n align-items: flex-end;\n}\n.bunny-items-center {\n align-items: center;\n}\n.bunny-justify-end {\n justify-content: flex-end;\n}\n.bunny-justify-center {\n justify-content: center;\n}\n.bunny-justify-between {\n justify-content: space-between;\n}\n.bunny-gap-0 {\n gap: 0px;\n}\n.bunny-gap-1 {\n gap: 0.25rem;\n}\n.bunny-gap-2 {\n gap: 0.5rem;\n}\n.bunny-gap-3 {\n gap: 0.75rem;\n}\n.bunny-gap-4 {\n gap: 1rem;\n}\n.bunny-gap-6 {\n gap: 1.5rem;\n}\n.bunny-gap-8 {\n gap: 2rem;\n}\n.bunny-space-y-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.bunny-space-y-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n.bunny-space-y-8 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(2rem * var(--tw-space-y-reverse));\n}\n.bunny-overflow-auto {\n overflow: auto;\n}\n.bunny-overflow-hidden {\n overflow: hidden;\n}\n.bunny-overflow-visible {\n overflow: visible;\n}\n.bunny-whitespace-nowrap {\n white-space: nowrap;\n}\n.bunny-rounded {\n border-radius: 0.25rem;\n}\n.bunny-rounded-full {\n border-radius: 9999px;\n}\n.bunny-rounded-lg {\n border-radius: 0.5rem;\n}\n.bunny-rounded-md {\n border-radius: 0.375rem;\n}\n.bunny-border {\n border-width: 1px;\n}\n.bunny-border-2 {\n border-width: 2px;\n}\n.bunny-border-solid {\n border-style: solid;\n}\n.bunny-border-none {\n border-style: none;\n}\n.bunny-border-slate-200 {\n --tw-border-opacity: 1;\n border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));\n}\n.bunny-bg-slate-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));\n}\n.bunny-bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bunny-p-0 {\n padding: 0px;\n}\n.bunny-p-1 {\n padding: 0.25rem;\n}\n.bunny-p-4 {\n padding: 1rem;\n}\n.bunny-px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.bunny-px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.bunny-px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n.bunny-py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.bunny-py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.bunny-py-6 {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n}\n.bunny-pb-2 {\n padding-bottom: 0.5rem;\n}\n.bunny-pb-4 {\n padding-bottom: 1rem;\n}\n.bunny-pb-6 {\n padding-bottom: 1.5rem;\n}\n.bunny-pb-8 {\n padding-bottom: 2rem;\n}\n.bunny-pl-0 {\n padding-left: 0px;\n}\n.bunny-pl-12 {\n padding-left: 3rem;\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-6 {\n padding-top: 1.5rem;\n}\n.bunny-pt-\\[25vh\\] {\n padding-top: 25vh;\n}\n.bunny-pt-1 {\n padding-top: 0.25rem;\n}\n.bunny-text-left {\n text-align: left;\n}\n.bunny-text-center {\n text-align: center;\n}\n.bunny-text-right {\n text-align: right;\n}\n.bunny-text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n.bunny-text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n.bunny-text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n.bunny-text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.bunny-text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n}\n.bunny-text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.bunny-font-bold {\n font-weight: 700;\n}\n.bunny-font-medium {\n font-weight: 500;\n}\n.bunny-font-normal {\n font-weight: 400;\n}\n.bunny-text-gray-600 {\n --tw-text-opacity: 1;\n color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.bunny-text-gray-900 {\n --tw-text-opacity: 1;\n color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.bunny-text-orange-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-underline {\n text-decoration-line: underline;\n}\n.bunny-shadow {\n --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.bunny-shadow-md {\n --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.bunny-transition-\\[margin\\] {\n transition-property: margin;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.bunny-duration-300 {\n transition-duration: 300ms;\n}\n.rotate-45,\n.transform {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n}\n.shadow,\n.shadow-lg,\n.shadow-md,\n.shadow-none,\n.shadow-sm,\n.shadow-xl {\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n}\n.container {\n width: 100%;\n}\n@media (min-width: 768px) {\n .container {\n max-width: 768px;\n }\n}\n@media (min-width: 1024px) {\n .container {\n max-width: 1024px;\n }\n}\n@media (min-width: 1280px) {\n .container {\n max-width: 1280px;\n }\n}\n@media (min-width: 1536px) {\n .container {\n max-width: 1536px;\n }\n}\n.visible {\n visibility: visible;\n}\n.fixed {\n position: fixed;\n}\n.absolute {\n position: absolute;\n}\n.relative {\n position: relative;\n}\n.sticky {\n position: sticky;\n}\n.-top-0\\.5 {\n top: -0.125rem;\n}\n.bottom-0 {\n bottom: 0px;\n}\n.bottom-4 {\n bottom: 1rem;\n}\n.left-0 {\n left: 0px;\n}\n.right-0 {\n right: 0px;\n}\n.top-0 {\n top: 0px;\n}\n.z-50 {\n z-index: 50;\n}\n.col-span-2 {\n grid-column: span 2 / span 2;\n}\n.col-span-3 {\n grid-column: span 3 / span 3;\n}\n.col-span-full {\n grid-column: 1 / -1;\n}\n.m-0 {\n margin: 0px;\n}\n.mx-0 {\n margin-left: 0px;\n margin-right: 0px;\n}\n.mx-4 {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n.my-12 {\n margin-top: 3rem;\n margin-bottom: 3rem;\n}\n.my-2 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n.my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n.mb-2 {\n margin-bottom: 0.5rem;\n}\n.mb-4 {\n margin-bottom: 1rem;\n}\n.mb-8 {\n margin-bottom: 2rem;\n}\n.ml-2 {\n margin-left: 0.5rem;\n}\n.mr-8 {\n margin-right: 2rem;\n}\n.mt-1 {\n margin-top: 0.25rem;\n}\n.mt-2 {\n margin-top: 0.5rem;\n}\n.mt-4 {\n margin-top: 1rem;\n}\n.mt-6 {\n margin-top: 1.5rem;\n}\n.mt-8 {\n margin-top: 2rem;\n}\n.block {\n display: block;\n}\n.flex {\n display: flex;\n}\n.table {\n display: table;\n}\n.grid {\n display: grid;\n}\n.contents {\n display: contents;\n}\n.hidden {\n display: none;\n}\n.h-4 {\n height: 1rem;\n}\n.h-5 {\n height: 1.25rem;\n}\n.h-8 {\n height: 2rem;\n}\n.h-full {\n height: 100%;\n}\n.w-1\\/2 {\n width: 50%;\n}\n.w-1\\/3 {\n width: 33.333333%;\n}\n.w-12 {\n width: 3rem;\n}\n.w-2\\/3 {\n width: 66.666667%;\n}\n.w-4 {\n width: 1rem;\n}\n.w-full {\n width: 100%;\n}\n.max-w-32 {\n max-width: 8rem;\n}\n.flex-1 {\n flex: 1 1 0%;\n}\n.shrink {\n flex-shrink: 1;\n}\n.shrink-0 {\n flex-shrink: 0;\n}\n.flex-grow {\n flex-grow: 1;\n}\n.grow {\n flex-grow: 1;\n}\n.border-collapse {\n border-collapse: collapse;\n}\n.rotate-45 {\n --tw-rotate: 45deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.flex-row {\n flex-direction: row;\n}\n.flex-col {\n flex-direction: column;\n}\n.items-end {\n align-items: flex-end;\n}\n.items-center {\n align-items: center;\n}\n.justify-start {\n justify-content: flex-start;\n}\n.justify-end {\n justify-content: flex-end;\n}\n.justify-center {\n justify-content: center;\n}\n.justify-between {\n justify-content: space-between;\n}\n.gap-0 {\n gap: 0px;\n}\n.gap-1 {\n gap: 0.25rem;\n}\n.gap-2 {\n gap: 0.5rem;\n}\n.gap-3 {\n gap: 0.75rem;\n}\n.gap-4 {\n gap: 1rem;\n}\n.gap-6 {\n gap: 1.5rem;\n}\n.gap-8 {\n gap: 2rem;\n}\n.space-y-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.space-y-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n.space-y-8 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(2rem * var(--tw-space-y-reverse));\n}\n.overflow-auto {\n overflow: auto;\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.overflow-visible {\n overflow: visible;\n}\n.whitespace-nowrap {\n white-space: nowrap;\n}\n.text-nowrap {\n text-wrap: nowrap;\n}\n.rounded {\n border-radius: 0.25rem;\n}\n.rounded-full {\n border-radius: 9999px;\n}\n.rounded-lg {\n border-radius: 0.5rem;\n}\n.rounded-md {\n border-radius: 0.375rem;\n}\n.rounded-sm {\n border-radius: 0.125rem;\n}\n.border {\n border-width: 1px;\n}\n.border-2 {\n border-width: 2px;\n}\n.border-b {\n border-bottom-width: 1px;\n}\n.border-t {\n border-top-width: 1px;\n}\n.border-solid {\n border-style: solid;\n}\n.border-none {\n border-style: none;\n}\n.border-gray-400 {\n --tw-border-opacity: 1;\n border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));\n}\n.border-gray-500 {\n --tw-border-opacity: 1;\n border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));\n}\n.border-slate-200 {\n --tw-border-opacity: 1;\n border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));\n}\n.border-slate-300 {\n --tw-border-opacity: 1;\n border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));\n}\n.border-slate-700 {\n --tw-border-opacity: 1;\n border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));\n}\n.bg-black {\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));\n}\n.bg-emerald-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(167 243 208 / var(--tw-bg-opacity, 1));\n}\n.bg-green-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1));\n}\n.bg-orange-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 215 170 / var(--tw-bg-opacity, 1));\n}\n.bg-red-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));\n}\n.bg-red-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));\n}\n.bg-slate-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));\n}\n.bg-transparent {\n background-color: transparent;\n}\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bg-yellow-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 240 138 / var(--tw-bg-opacity, 1));\n}\n.p-0 {\n padding: 0px;\n}\n.p-1 {\n padding: 0.25rem;\n}\n.p-2 {\n padding: 0.5rem;\n}\n.p-4 {\n padding: 1rem;\n}\n.p-8 {\n padding: 2rem;\n}\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n.px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n.px-8 {\n padding-left: 2rem;\n padding-right: 2rem;\n}\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.py-6 {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n}\n.pb-2 {\n padding-bottom: 0.5rem;\n}\n.pb-4 {\n padding-bottom: 1rem;\n}\n.pb-6 {\n padding-bottom: 1.5rem;\n}\n.pb-8 {\n padding-bottom: 2rem;\n}\n.pl-0 {\n padding-left: 0px;\n}\n.pl-2 {\n padding-left: 0.5rem;\n}\n.pl-4 {\n padding-left: 1rem;\n}\n.pt-1 {\n padding-top: 0.25rem;\n}\n.pt-12 {\n padding-top: 3rem;\n}\n.pt-2 {\n padding-top: 0.5rem;\n}\n.pt-4 {\n padding-top: 1rem;\n}\n.pt-5 {\n padding-top: 1.25rem;\n}\n.pt-6 {\n padding-top: 1.5rem;\n}\n.pt-8 {\n padding-top: 2rem;\n}\n.text-left {\n text-align: left;\n}\n.text-center {\n text-align: center;\n}\n.text-right {\n text-align: right;\n}\n.align-middle {\n vertical-align: middle;\n}\n.text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n.text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n.text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n}\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.font-bold {\n font-weight: 700;\n}\n.font-medium {\n font-weight: 500;\n}\n.font-normal {\n font-weight: 400;\n}\n.capitalize {\n text-transform: capitalize;\n}\n.text-emerald-600 {\n --tw-text-opacity: 1;\n color: rgb(5 150 105 / var(--tw-text-opacity, 1));\n}\n.text-emerald-700 {\n --tw-text-opacity: 1;\n color: rgb(4 120 87 / var(--tw-text-opacity, 1));\n}\n.text-gray-600 {\n --tw-text-opacity: 1;\n color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.text-gray-900 {\n --tw-text-opacity: 1;\n color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.text-green-600 {\n --tw-text-opacity: 1;\n color: rgb(22 163 74 / var(--tw-text-opacity, 1));\n}\n.text-orange-500 {\n --tw-text-opacity: 1;\n color: rgb(249 115 22 / var(--tw-text-opacity, 1));\n}\n.text-orange-600 {\n --tw-text-opacity: 1;\n color: rgb(234 88 12 / var(--tw-text-opacity, 1));\n}\n.text-red-500 {\n --tw-text-opacity: 1;\n color: rgb(239 68 68 / var(--tw-text-opacity, 1));\n}\n.text-slate-400 {\n --tw-text-opacity: 1;\n color: rgb(148 163 184 / var(--tw-text-opacity, 1));\n}\n.text-slate-500 {\n --tw-text-opacity: 1;\n color: rgb(100 116 139 / var(--tw-text-opacity, 1));\n}\n.text-slate-600 {\n --tw-text-opacity: 1;\n color: rgb(71 85 105 / var(--tw-text-opacity, 1));\n}\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.text-yellow-500 {\n --tw-text-opacity: 1;\n color: rgb(234 179 8 / var(--tw-text-opacity, 1));\n}\n.underline {\n text-decoration-line: underline;\n}\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-md {\n --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-none {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-sm {\n --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-xl {\n --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.transition {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-\\[margin\\] {\n transition-property: margin;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.duration-200 {\n transition-duration: 200ms;\n}\n.duration-300 {\n transition-duration: 300ms;\n}\n.hover\\:bg-gray-100:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-slate-100:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-slate-200:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-gray-200:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));\n}\n@media (min-width: 768px) {\n .sm\\:flex {\n display: flex;\n }\n .sm\\:hidden {\n display: none;\n }\n}\n.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-checkbox-inner {\n border-color: #cccccc;\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";
48
+ 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-my-2 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n.bunny-my-24 {\n margin-top: 6rem;\n margin-bottom: 6rem;\n}\n.bunny-my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n.bunny-mb-2 {\n margin-bottom: 0.5rem;\n}\n.bunny-mb-4 {\n margin-bottom: 1rem;\n}\n.bunny-mb-8 {\n margin-bottom: 2rem;\n}\n.bunny-mt-2 {\n margin-top: 0.5rem;\n}\n.bunny-mt-24 {\n margin-top: 6rem;\n}\n.bunny-mt-4 {\n margin-top: 1rem;\n}\n.bunny-flex {\n display: flex;\n}\n.bunny-grid {\n display: grid;\n}\n.bunny-contents {\n display: contents;\n}\n.bunny-h-1\\/2 {\n height: 50%;\n}\n.bunny-h-5 {\n height: 1.25rem;\n}\n.bunny-h-8 {\n height: 2rem;\n}\n.bunny-h-full {\n height: 100%;\n}\n.bunny-h-screen {\n height: 100vh;\n}\n.bunny-h-4 {\n height: 1rem;\n}\n.bunny-h-3 {\n height: 0.75rem;\n}\n.bunny-min-h-0 {\n min-height: 0px;\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-w-4 {\n width: 1rem;\n}\n.bunny-w-3 {\n width: 0.75rem;\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-visible {\n overflow: visible;\n}\n.bunny-whitespace-nowrap {\n white-space: nowrap;\n}\n.bunny-rounded {\n border-radius: 0.25rem;\n}\n.bunny-rounded-full {\n border-radius: 9999px;\n}\n.bunny-rounded-lg {\n border-radius: 0.5rem;\n}\n.bunny-rounded-md {\n border-radius: 0.375rem;\n}\n.bunny-border {\n border-width: 1px;\n}\n.bunny-border-2 {\n border-width: 2px;\n}\n.bunny-border-solid {\n border-style: solid;\n}\n.bunny-border-none {\n border-style: none;\n}\n.bunny-border-slate-200 {\n --tw-border-opacity: 1;\n border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));\n}\n.bunny-bg-slate-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));\n}\n.bunny-bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bunny-bg-gray-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(229 231 235 / 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-4 {\n padding: 1rem;\n}\n.bunny-px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.bunny-px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.bunny-px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n.bunny-py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.bunny-py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.bunny-py-6 {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n}\n.bunny-pb-2 {\n padding-bottom: 0.5rem;\n}\n.bunny-pb-4 {\n padding-bottom: 1rem;\n}\n.bunny-pb-6 {\n padding-bottom: 1.5rem;\n}\n.bunny-pl-0 {\n padding-left: 0px;\n}\n.bunny-pl-12 {\n padding-left: 3rem;\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-6 {\n padding-top: 1.5rem;\n}\n.bunny-pt-\\[25vh\\] {\n padding-top: 25vh;\n}\n.bunny-text-left {\n text-align: left;\n}\n.bunny-text-center {\n text-align: center;\n}\n.bunny-text-right {\n text-align: right;\n}\n.bunny-text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n.bunny-text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n.bunny-text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n.bunny-text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.bunny-text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n}\n.bunny-text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.bunny-font-bold {\n font-weight: 700;\n}\n.bunny-font-medium {\n font-weight: 500;\n}\n.bunny-font-normal {\n font-weight: 400;\n}\n.bunny-text-gray-300 {\n --tw-text-opacity: 1;\n color: rgb(209 213 219 / 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-gray-500 {\n --tw-text-opacity: 1;\n color: rgb(107 114 128 / var(--tw-text-opacity, 1));\n}\n.bunny-underline {\n text-decoration-line: underline;\n}\n.bunny-shadow {\n --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.bunny-shadow-md {\n --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.bunny-transition-\\[margin\\] {\n transition-property: margin;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.bunny-duration-300 {\n transition-duration: 300ms;\n}\n.rotate-45,\n.transform {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n}\n.shadow,\n.shadow-lg,\n.shadow-md,\n.shadow-none,\n.shadow-sm,\n.shadow-xl {\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n}\n.container {\n width: 100%;\n}\n@media (min-width: 768px) {\n .container {\n max-width: 768px;\n }\n}\n@media (min-width: 1024px) {\n .container {\n max-width: 1024px;\n }\n}\n@media (min-width: 1280px) {\n .container {\n max-width: 1280px;\n }\n}\n@media (min-width: 1536px) {\n .container {\n max-width: 1536px;\n }\n}\n.visible {\n visibility: visible;\n}\n.fixed {\n position: fixed;\n}\n.absolute {\n position: absolute;\n}\n.relative {\n position: relative;\n}\n.sticky {\n position: sticky;\n}\n.-top-0\\.5 {\n top: -0.125rem;\n}\n.bottom-0 {\n bottom: 0px;\n}\n.bottom-4 {\n bottom: 1rem;\n}\n.left-0 {\n left: 0px;\n}\n.right-0 {\n right: 0px;\n}\n.top-0 {\n top: 0px;\n}\n.z-50 {\n z-index: 50;\n}\n.col-span-2 {\n grid-column: span 2 / span 2;\n}\n.col-span-3 {\n grid-column: span 3 / span 3;\n}\n.col-span-full {\n grid-column: 1 / -1;\n}\n.m-0 {\n margin: 0px;\n}\n.mx-0 {\n margin-left: 0px;\n margin-right: 0px;\n}\n.mx-4 {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n.my-12 {\n margin-top: 3rem;\n margin-bottom: 3rem;\n}\n.my-2 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n.my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n.mb-2 {\n margin-bottom: 0.5rem;\n}\n.mb-4 {\n margin-bottom: 1rem;\n}\n.mb-8 {\n margin-bottom: 2rem;\n}\n.ml-2 {\n margin-left: 0.5rem;\n}\n.mr-8 {\n margin-right: 2rem;\n}\n.mt-1 {\n margin-top: 0.25rem;\n}\n.mt-2 {\n margin-top: 0.5rem;\n}\n.mt-4 {\n margin-top: 1rem;\n}\n.mt-6 {\n margin-top: 1.5rem;\n}\n.mt-8 {\n margin-top: 2rem;\n}\n.block {\n display: block;\n}\n.flex {\n display: flex;\n}\n.table {\n display: table;\n}\n.grid {\n display: grid;\n}\n.contents {\n display: contents;\n}\n.hidden {\n display: none;\n}\n.h-4 {\n height: 1rem;\n}\n.h-5 {\n height: 1.25rem;\n}\n.h-8 {\n height: 2rem;\n}\n.h-full {\n height: 100%;\n}\n.w-1\\/2 {\n width: 50%;\n}\n.w-1\\/3 {\n width: 33.333333%;\n}\n.w-12 {\n width: 3rem;\n}\n.w-2\\/3 {\n width: 66.666667%;\n}\n.w-4 {\n width: 1rem;\n}\n.w-full {\n width: 100%;\n}\n.max-w-32 {\n max-width: 8rem;\n}\n.flex-1 {\n flex: 1 1 0%;\n}\n.shrink {\n flex-shrink: 1;\n}\n.shrink-0 {\n flex-shrink: 0;\n}\n.flex-grow {\n flex-grow: 1;\n}\n.grow {\n flex-grow: 1;\n}\n.border-collapse {\n border-collapse: collapse;\n}\n.rotate-45 {\n --tw-rotate: 45deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.flex-row {\n flex-direction: row;\n}\n.flex-col {\n flex-direction: column;\n}\n.items-end {\n align-items: flex-end;\n}\n.items-center {\n align-items: center;\n}\n.justify-start {\n justify-content: flex-start;\n}\n.justify-end {\n justify-content: flex-end;\n}\n.justify-center {\n justify-content: center;\n}\n.justify-between {\n justify-content: space-between;\n}\n.gap-0 {\n gap: 0px;\n}\n.gap-1 {\n gap: 0.25rem;\n}\n.gap-2 {\n gap: 0.5rem;\n}\n.gap-3 {\n gap: 0.75rem;\n}\n.gap-4 {\n gap: 1rem;\n}\n.gap-6 {\n gap: 1.5rem;\n}\n.gap-8 {\n gap: 2rem;\n}\n.space-y-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.space-y-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n.space-y-8 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(2rem * var(--tw-space-y-reverse));\n}\n.overflow-auto {\n overflow: auto;\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.overflow-visible {\n overflow: visible;\n}\n.whitespace-nowrap {\n white-space: nowrap;\n}\n.text-nowrap {\n text-wrap: nowrap;\n}\n.rounded {\n border-radius: 0.25rem;\n}\n.rounded-full {\n border-radius: 9999px;\n}\n.rounded-lg {\n border-radius: 0.5rem;\n}\n.rounded-md {\n border-radius: 0.375rem;\n}\n.rounded-sm {\n border-radius: 0.125rem;\n}\n.border {\n border-width: 1px;\n}\n.border-2 {\n border-width: 2px;\n}\n.border-b {\n border-bottom-width: 1px;\n}\n.border-t {\n border-top-width: 1px;\n}\n.border-solid {\n border-style: solid;\n}\n.border-none {\n border-style: none;\n}\n.border-gray-400 {\n --tw-border-opacity: 1;\n border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));\n}\n.border-gray-500 {\n --tw-border-opacity: 1;\n border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));\n}\n.border-slate-200 {\n --tw-border-opacity: 1;\n border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));\n}\n.border-slate-300 {\n --tw-border-opacity: 1;\n border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));\n}\n.border-slate-700 {\n --tw-border-opacity: 1;\n border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));\n}\n.bg-black {\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));\n}\n.bg-emerald-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(167 243 208 / var(--tw-bg-opacity, 1));\n}\n.bg-green-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1));\n}\n.bg-orange-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 215 170 / var(--tw-bg-opacity, 1));\n}\n.bg-red-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));\n}\n.bg-red-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));\n}\n.bg-slate-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));\n}\n.bg-transparent {\n background-color: transparent;\n}\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bg-yellow-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 240 138 / var(--tw-bg-opacity, 1));\n}\n.p-0 {\n padding: 0px;\n}\n.p-1 {\n padding: 0.25rem;\n}\n.p-2 {\n padding: 0.5rem;\n}\n.p-4 {\n padding: 1rem;\n}\n.p-8 {\n padding: 2rem;\n}\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n.px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n.px-8 {\n padding-left: 2rem;\n padding-right: 2rem;\n}\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.py-6 {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n}\n.pb-2 {\n padding-bottom: 0.5rem;\n}\n.pb-4 {\n padding-bottom: 1rem;\n}\n.pb-6 {\n padding-bottom: 1.5rem;\n}\n.pb-8 {\n padding-bottom: 2rem;\n}\n.pl-0 {\n padding-left: 0px;\n}\n.pl-2 {\n padding-left: 0.5rem;\n}\n.pl-4 {\n padding-left: 1rem;\n}\n.pt-1 {\n padding-top: 0.25rem;\n}\n.pt-12 {\n padding-top: 3rem;\n}\n.pt-2 {\n padding-top: 0.5rem;\n}\n.pt-4 {\n padding-top: 1rem;\n}\n.pt-5 {\n padding-top: 1.25rem;\n}\n.pt-6 {\n padding-top: 1.5rem;\n}\n.pt-8 {\n padding-top: 2rem;\n}\n.text-left {\n text-align: left;\n}\n.text-center {\n text-align: center;\n}\n.text-right {\n text-align: right;\n}\n.align-middle {\n vertical-align: middle;\n}\n.text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n.text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n.text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n}\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.font-bold {\n font-weight: 700;\n}\n.font-medium {\n font-weight: 500;\n}\n.font-normal {\n font-weight: 400;\n}\n.capitalize {\n text-transform: capitalize;\n}\n.text-emerald-600 {\n --tw-text-opacity: 1;\n color: rgb(5 150 105 / var(--tw-text-opacity, 1));\n}\n.text-emerald-700 {\n --tw-text-opacity: 1;\n color: rgb(4 120 87 / var(--tw-text-opacity, 1));\n}\n.text-gray-600 {\n --tw-text-opacity: 1;\n color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.text-gray-900 {\n --tw-text-opacity: 1;\n color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.text-green-600 {\n --tw-text-opacity: 1;\n color: rgb(22 163 74 / var(--tw-text-opacity, 1));\n}\n.text-orange-500 {\n --tw-text-opacity: 1;\n color: rgb(249 115 22 / var(--tw-text-opacity, 1));\n}\n.text-orange-600 {\n --tw-text-opacity: 1;\n color: rgb(234 88 12 / var(--tw-text-opacity, 1));\n}\n.text-red-500 {\n --tw-text-opacity: 1;\n color: rgb(239 68 68 / var(--tw-text-opacity, 1));\n}\n.text-slate-400 {\n --tw-text-opacity: 1;\n color: rgb(148 163 184 / var(--tw-text-opacity, 1));\n}\n.text-slate-500 {\n --tw-text-opacity: 1;\n color: rgb(100 116 139 / var(--tw-text-opacity, 1));\n}\n.text-slate-600 {\n --tw-text-opacity: 1;\n color: rgb(71 85 105 / var(--tw-text-opacity, 1));\n}\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.text-yellow-500 {\n --tw-text-opacity: 1;\n color: rgb(234 179 8 / var(--tw-text-opacity, 1));\n}\n.underline {\n text-decoration-line: underline;\n}\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-md {\n --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-none {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-sm {\n --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-xl {\n --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.transition {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-\\[margin\\] {\n transition-property: margin;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.duration-200 {\n transition-duration: 200ms;\n}\n.duration-300 {\n transition-duration: 300ms;\n}\n.hover\\:bg-gray-100:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-slate-100:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-slate-200:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-gray-200:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));\n}\n@media (min-width: 768px) {\n .sm\\:flex {\n display: flex;\n }\n .sm\\:hidden {\n display: none;\n }\n}\n.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-checkbox-inner {\n border-color: #cccccc;\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";
49
49
  styleInject(css_248z);
50
50
 
51
51
  /******************************************************************************
@@ -143,7 +143,7 @@ var BrandContext = createContext({
143
143
  });
144
144
 
145
145
  // This will be replaced at build time by rollup-plugin-replace
146
- var PACKAGE_VERSION = '1.0.76-beta.1';
146
+ var PACKAGE_VERSION = '1.0.76-beta.3';
147
147
  var createRequestHeaders = function (token) {
148
148
  var headers = createClientDevHeaders(token);
149
149
  // Add the components version header
@@ -20270,7 +20270,7 @@ var getPriceList = function (_a) {
20270
20270
  });
20271
20271
  };
20272
20272
 
20273
- var QUOTE_QUERY = function (id) { return "\n query quote {\n quote ".concat(id ? "(id: ".concat(id, ")") : '', " {\n accountId\n amount\n amountDue\n smallUnitAmountDue\n currencyId\n formattedQuote {\n html\n }\n id\n payableId\n periodAmount\n subtotal\n taxAmount\n amountsByPeriod {\n amount\n startDate\n }\n quoteChanges {\n currencyId\n id\n kind\n charges {\n subtotal\n amountsByPeriod {\n amount\n startDate\n }\n amount\n billingPeriod\n currencyId\n feature {\n unitName\n }\n id\n name\n priceListCharge {\n id\n }\n priceList {\n id\n }\n coupon {\n couponCode\n }\n quantity\n kind\n }\n priceList {\n id\n plan {\n name\n }\n product {\n name\n }\n }\n\n }\n }\n }"); };
20273
+ var QUOTE_QUERY = function (id) { return "\n query quote {\n quote ".concat(id ? "(id: ".concat(id, ")") : '', " {\n accountId\n amount\n amountDue\n smallUnitAmountDue\n currencyId\n formattedQuote {\n html\n }\n id\n payableId\n periodAmount\n subtotal\n taxAmount\n startDate\n amountsByPeriod {\n amount\n startDate\n }\n quoteChanges {\n currencyId\n id\n kind\n charges {\n subtotal\n amountsByPeriod {\n amount\n startDate\n }\n amount\n billingPeriod\n currencyId\n feature {\n unitName\n }\n id\n name\n priceListCharge {\n id\n }\n priceList {\n id\n }\n coupon {\n couponCode\n }\n quantity\n kind\n }\n priceList {\n id\n plan {\n name\n }\n product {\n name\n }\n }\n\n }\n }\n }"); };
20274
20274
  var getQuote = function (_a) {
20275
20275
  var id = _a.id, token = _a.token, apiHost = _a.apiHost;
20276
20276
  return __awaiter(void 0, void 0, void 0, function () {
@@ -20775,7 +20775,7 @@ var useQuoteDelete = function () {
20775
20775
  }); };
20776
20776
  };
20777
20777
 
20778
- var SUBSCRIPTIONS_QUERY = "\nquery subscriptions {\n subscriptions {\n nodes {\n cancellationDate\n currencyId\n endDate\n evergreen\n id\n period\n plan { id name selfServiceBuy selfServiceCancel selfServiceRenew }\n priceList { id periodMonths }\n product { id name showProductNameOnLineItem }\n startDate\n state\n trialEndDate\n trialPeriod\n trialStartDate\n daysLeftInTrial\n charges {\n priceListCharge {\n priceListChargeTiers {\n price\n starts\n }\n }\n amount\n billingPeriod\n chargeType\n discount\n discountedPrice\n endDate\n expired\n feature { name }\n id\n isAmendment\n isRamp\n kind\n name\n periodPrice\n price\n priceDecimals\n priceListChargeId\n priceTiers { starts price }\n pricingModel\n quantity\n selfServiceQuantity\n startDate\n trial\n }\n }\n }\n }";
20778
+ var SUBSCRIPTIONS_QUERY = "\nquery subscriptions {\n subscriptions {\n nodes {\n cancellationDate\n currencyId\n endDate\n evergreen\n id\n period\n plan { id name selfServiceBuy selfServiceCancel selfServiceRenew }\n priceList { id periodMonths }\n product { id name showProductNameOnLineItem }\n startDate\n state\n trialEndDate\n trialPeriod\n trialStartDate\n daysLeftInTrial\n charges {\n priceListCharge {\n priceListChargeTiers {\n price\n starts\n }\n featureAddon\n id\n }\n amount\n billingPeriod\n chargeType\n discount\n discountedPrice\n endDate\n expired\n feature { name }\n id\n isAmendment\n isRamp\n kind\n name\n periodPrice\n price\n priceDecimals\n priceListChargeId\n priceTiers { starts price }\n pricingModel\n quantity\n selfServiceQuantity\n startDate\n trial\n }\n }\n }\n }";
20779
20779
  var getSubscriptions = function (_a) {
20780
20780
  var apiHost = _a.apiHost, isInPreviewMode = _a.isInPreviewMode, token = _a.token;
20781
20781
  return __awaiter(void 0, void 0, void 0, function () {
@@ -21097,6 +21097,20 @@ var Checkout = function (_a) {
21097
21097
  }, onPaymentSuccess: onSuccess }))] })), jsx(Footer, { className: "bunny-pl-12" })] })) })));
21098
21098
  };
21099
21099
 
21100
+ var QuotePreviewContext = createContext({});
21101
+ function QuotePreviewProvider(_a) {
21102
+ var children = _a.children;
21103
+ var _b = useState(), quotePreviewData = _b[0], setQuotePreviewData = _b[1];
21104
+ function handleSetEditingQuote(editingQuoteId) {
21105
+ setQuotePreviewData(__assign(__assign({}, quotePreviewData), { editingQuoteId: editingQuoteId }));
21106
+ }
21107
+ return (jsx(QuotePreviewContext.Provider, __assign({ value: {
21108
+ quotePreviewData: quotePreviewData,
21109
+ setQuotePreviewData: setQuotePreviewData,
21110
+ handleSetEditingQuote: handleSetEditingQuote,
21111
+ } }, { children: children })));
21112
+ }
21113
+
21100
21114
  var PageTitle = function (_a) {
21101
21115
  var onGoBack = _a.onGoBack, title = _a.title;
21102
21116
  var isMobile = useIsMobile();
@@ -21207,8 +21221,8 @@ var billingPeriodConverter = function (period) {
21207
21221
  var removeHTMLTagsRegex = /<br>(?=(?:\s*<[^>]*>)*$)|(<br>)|<[^>]*>/gi;
21208
21222
  // Description is a string that can contain HTML tags. We want to remove all HTML tags except <br> tags.
21209
21223
  var createPlanDescription = function (priceList) {
21210
- return (priceList.plan.description || "").replace(removeHTMLTagsRegex, function (x, y) {
21211
- return y ? " & " : "";
21224
+ return (priceList.plan.description || '').replace(removeHTMLTagsRegex, function (x, y) {
21225
+ return y ? ' & ' : '';
21212
21226
  });
21213
21227
  };
21214
21228
  var getActivePlanPriceData = function (priceList, selectedPriceList) {
@@ -21249,8 +21263,7 @@ var getActivePlanPriceData = function (priceList, selectedPriceList) {
21249
21263
  };
21250
21264
  };
21251
21265
  var isPriceListDisabled = function (_a) {
21252
- var priceList = _a.priceList, subscriptions = _a.subscriptions, upgradingSubscription = _a.upgradingSubscription;
21253
- var disableOnClick = false;
21266
+ var priceList = _a.priceList, subscriptions = _a.subscriptions, upgradingSubscription = _a.upgradingSubscription, canPurchaseFeatureAddons = _a.canPurchaseFeatureAddons;
21254
21267
  // Plan already has a subscription
21255
21268
  var subscriptionPlan = subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.find(function (subscription) {
21256
21269
  var _a, _b;
@@ -21258,13 +21271,15 @@ var isPriceListDisabled = function (_a) {
21258
21271
  ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) !== SubscriptionState$2.CANCELED &&
21259
21272
  ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== SubscriptionState$2.EXPIRED;
21260
21273
  });
21261
- var isPriceListCurrentSubscription = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === priceList.id;
21262
21274
  // Is this plan the one that the user is upgrading from
21263
21275
  var isUpgradingPlan = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.plan.id) === priceList.plan.id;
21264
- if ((subscriptionPlan && !isUpgradingPlan) || isPriceListCurrentSubscription) {
21265
- disableOnClick = true;
21276
+ if (subscriptionPlan && !isUpgradingPlan) {
21277
+ return true;
21266
21278
  }
21267
- return disableOnClick;
21279
+ if (isUpgradingPlan && !canPurchaseFeatureAddons) {
21280
+ return true;
21281
+ }
21282
+ return false;
21268
21283
  };
21269
21284
 
21270
21285
  var CheckoutButton = function (_a) {
@@ -21287,9 +21302,10 @@ var CheckoutPrice = function (_a) {
21287
21302
 
21288
21303
  var CheckoutBarSummarySection = function (_a) {
21289
21304
  var _b;
21290
- var open = _a.open, quote = _a.quote, selectedPriceList = _a.selectedPriceList, onClickCheckout = _a.onClickCheckout, upgradingSubscription = _a.upgradingSubscription, quotePreviewData = _a.quotePreviewData;
21305
+ var open = _a.open, quote = _a.quote, selectedPriceList = _a.selectedPriceList, onClickCheckout = _a.onClickCheckout, upgradingSubscription = _a.upgradingSubscription;
21291
21306
  // Context
21292
21307
  var apiHost = useContext(BunnyContext).apiHost;
21308
+ var quotePreviewData = useContext(QuotePreviewContext).quotePreviewData;
21293
21309
  // Hooks
21294
21310
  var token = useToken();
21295
21311
  var paymentPlugins = usePaymentPlugins({
@@ -21305,12 +21321,14 @@ var CheckoutBarSummarySection = function (_a) {
21305
21321
  token: token,
21306
21322
  }),
21307
21323
  });
21308
- var checkoutButtonDisabled = Boolean(!(quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity) ||
21324
+ var isUpgradingCurrentSubscription = selectedPriceList.id === (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id);
21325
+ var disableCheckoutButton = Boolean(!(quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.quantity) ||
21309
21326
  !selectedPriceList ||
21310
21327
  // quantityLocal !== quotePreviewData.quantity ||
21311
21328
  isFetching ||
21312
- selectedPriceList.id === (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) ||
21329
+ isUpgradingCurrentSubscription ||
21313
21330
  open);
21331
+ var checkoutButtonDisabled = (quote === null || quote === void 0 ? void 0 : quote.amountDue) && (quote === null || quote === void 0 ? void 0 : quote.amountDue) > 0 ? false : disableCheckoutButton;
21314
21332
  var activeCharge = (_b = getActivePlanPriceData(selectedPriceList, selectedPriceList)) === null || _b === void 0 ? void 0 : _b.activeCharge;
21315
21333
  var isUsage = (activeCharge === null || activeCharge === void 0 ? void 0 : activeCharge.chargeType) === ChargeType.USAGE;
21316
21334
  var hasPaymentMethodsOrIsFree = Boolean(paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.length) || Boolean(quote && getQuoteAmountDue(quote) === 0);
@@ -21320,7 +21338,7 @@ var CheckoutBarSummarySection = function (_a) {
21320
21338
  var PlanPickerCheckoutBarWrapper = function (_a) {
21321
21339
  var editingQuote = _a.editingQuote, setEditingQuoteData = _a.setEditingQuoteData, handlePortalErrors = _a.handlePortalErrors, onCheckoutSuccess = _a.onCheckoutSuccess;
21322
21340
  // Context
21323
- var quotePreviewData = useContext(SubscriptionsContext).quotePreviewData;
21341
+ var quotePreviewData = useContext(QuotePreviewContext).quotePreviewData;
21324
21342
  var selectedPriceList = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList;
21325
21343
  if (!selectedPriceList)
21326
21344
  return null;
@@ -21330,10 +21348,11 @@ var PlanPickerCheckoutBar = function (_a) {
21330
21348
  var editingQuote = _a.editingQuote, setEditingQuoteData = _a.setEditingQuoteData, selectedPriceList = _a.selectedPriceList, handlePortalErrors = _a.handlePortalErrors, onCheckoutSuccess = _a.onCheckoutSuccess;
21331
21349
  // Context
21332
21350
  var token = useToken();
21333
- var _b = useContext(SubscriptionsContext), quotePreviewData = _b.quotePreviewData, upgradingSubscription = _b.upgradingSubscription, shadow = _b.shadow;
21351
+ var _b = useContext(SubscriptionsContext), upgradingSubscription = _b.upgradingSubscription, shadow = _b.shadow;
21352
+ var _c = useContext(QuotePreviewContext), quotePreviewData = _c.quotePreviewData, handleSetEditingQuote = _c.handleSetEditingQuote;
21334
21353
  var apiHost = useContext(BunnyContext).apiHost;
21335
21354
  // Local state
21336
- var _c = useState(false), payModalVisible = _c[0], setPayModalVisible = _c[1];
21355
+ var _d = useState(false), payModalVisible = _d[0], setPayModalVisible = _d[1];
21337
21356
  // Hooks
21338
21357
  var showSuccessNotification = useSuccessNotification();
21339
21358
  var queryClient = useQueryClient();
@@ -21342,17 +21361,31 @@ var PlanPickerCheckoutBar = function (_a) {
21342
21361
  token: token,
21343
21362
  apiHost: apiHost,
21344
21363
  }).defaultPaymentMethod;
21345
- var createSubscriptionQuote = useQuoteSubscriptionUpgrade();
21364
+ var createSubscriptionUpgradeQuote = useQuoteSubscriptionUpgrade();
21365
+ var createSubscriptionUpdateQuote = useCreateSubscriptionQuote();
21346
21366
  // Mutations
21347
21367
  var createQuote = useMutation({
21348
21368
  mutationFn: function (_a) {
21349
21369
  var subscriptionId = _a.subscriptionId, priceListId = _a.priceListId;
21350
- return createSubscriptionQuote(subscriptionId, priceListId, apiHost, token);
21370
+ return createSubscriptionUpgradeQuote(subscriptionId, priceListId, apiHost, token);
21351
21371
  },
21352
21372
  onSuccess: function (subscriptionUpdateData) {
21353
21373
  var _a;
21354
21374
  var quote = (_a = subscriptionUpdateData === null || subscriptionUpdateData === void 0 ? void 0 : subscriptionUpdateData.quoteSubscriptionUpgrade) === null || _a === void 0 ? void 0 : _a.quote;
21355
21375
  setEditingQuoteData === null || setEditingQuoteData === void 0 ? void 0 : setEditingQuoteData(quote.id);
21376
+ handleSetEditingQuote(quote.id);
21377
+ },
21378
+ });
21379
+ var createEmptyQuote = useMutation({
21380
+ mutationFn: function (_a) {
21381
+ var subscriptionId = _a.subscriptionId;
21382
+ return createSubscriptionUpdateQuote([subscriptionId], apiHost, token);
21383
+ },
21384
+ onSuccess: function (subscriptionUpdateData) {
21385
+ var _a;
21386
+ var quote = (_a = subscriptionUpdateData === null || subscriptionUpdateData === void 0 ? void 0 : subscriptionUpdateData.quoteSubscriptionUpdate) === null || _a === void 0 ? void 0 : _a.quote;
21387
+ setEditingQuoteData === null || setEditingQuoteData === void 0 ? void 0 : setEditingQuoteData(quote.id);
21388
+ handleSetEditingQuote(quote.id);
21356
21389
  },
21357
21390
  });
21358
21391
  var updateCharge = useMutation({
@@ -21400,10 +21433,18 @@ var PlanPickerCheckoutBar = function (_a) {
21400
21433
  console.error('upgradingSubscription is undefined');
21401
21434
  return;
21402
21435
  }
21403
- createQuote.mutate({
21404
- subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
21405
- priceListId: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id,
21406
- });
21436
+ var upgradingCurrentSubscription = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id);
21437
+ if (upgradingCurrentSubscription) {
21438
+ createEmptyQuote.mutate({
21439
+ subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
21440
+ });
21441
+ }
21442
+ else {
21443
+ createQuote.mutate({
21444
+ subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
21445
+ priceListId: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id,
21446
+ });
21447
+ }
21407
21448
  }, [selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id, upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id]);
21408
21449
  // Reset query key on unmount
21409
21450
  useEffect(function () {
@@ -21468,11 +21509,11 @@ var PlanPickerCheckoutBar = function (_a) {
21468
21509
  return (jsx(CheckoutBarInput, { disabled: !chargeQuantity, charge: charge, quantity: chargeQuantity !== null && chargeQuantity !== void 0 ? chargeQuantity : 0, selectedPriceList: selectedPriceList, onQuantityChanged: function (quantity) {
21469
21510
  onChangeQuantity(charge.id, quantity);
21470
21511
  } }, index));
21471
- }) })), jsx(CheckoutBarSummarySection, { onClickCheckout: function () { return setPayModalVisible(true); }, open: payModalVisible, quote: quote, selectedPriceList: selectedPriceList, upgradingSubscription: upgradingSubscription, quotePreviewData: quotePreviewData }), jsx(Checkout, { onCancel: function () { return setPayModalVisible(false); }, onFail: onCheckoutFail, onSuccess: handleCheckoutSuccess, open: payModalVisible, quote: quote, selectedPriceList: selectedPriceList, storedPaymentMethod: defaultPaymentMethod, token: token })] })));
21512
+ }) })), jsx(CheckoutBarSummarySection, { onClickCheckout: function () { return setPayModalVisible(true); }, open: payModalVisible, quote: quote, selectedPriceList: selectedPriceList, upgradingSubscription: upgradingSubscription }), jsx(Checkout, { onCancel: function () { return setPayModalVisible(false); }, onFail: onCheckoutFail, onSuccess: handleCheckoutSuccess, open: payModalVisible, quote: quote, selectedPriceList: selectedPriceList, storedPaymentMethod: defaultPaymentMethod, token: token })] })));
21472
21513
  };
21473
21514
 
21474
21515
  // WARNING: There is a preview button on APP that will need to be changed if this query is changed
21475
- var PRICE_LIST_CHANGE_OPTIONS_QUERY = "\n query priceListChangeOptions($subscriptionId: ID, $productId: ID) {\n priceListChangeOptions(subscriptionId: $subscriptionId, productId: $productId) {\n products {\n everythingInPlus\n id\n name\n plansToDisplay\n features(sort: \"position asc\") {\n description\n id\n isVisible\n kind\n name\n position\n }\n }\n priceLists {\n showPriceAsMonthly\n basePrice\n currencyId\n id\n monthlyBasePrice\n periodMonths\n plan {\n code\n contactUsLabel\n contactUsUrl\n description\n id\n name\n position\n pricingDescription\n pricingStyle\n planFeatures {\n featureId\n value\n feature {\n name\n }\n }\n }\n product {\n id\n }\n charges {\n basePrice\n billingPeriod\n chargeType\n id\n name\n priceDecimals\n pricingModel\n quantityMax\n quantityMin\n selfServiceQuantity\n feature {\n name\n unitName\n }\n }\n }\n }\n }";
21516
+ var PRICE_LIST_CHANGE_OPTIONS_QUERY = "\n query priceListChangeOptions($subscriptionId: ID, $productId: ID) {\n priceListChangeOptions(subscriptionId: $subscriptionId, productId: $productId) {\n products {\n everythingInPlus\n id\n name\n plansToDisplay\n features(sort: \"position asc\") {\n description\n id\n isVisible\n kind\n name\n position\n }\n }\n priceLists {\n showPriceAsMonthly\n basePrice\n currencyId\n id\n monthlyBasePrice\n periodMonths\n plan {\n code\n contactUsLabel\n contactUsUrl\n description\n id\n name\n position\n pricingDescription\n pricingStyle\n planFeatures {\n featureId\n value\n feature {\n name\n }\n }\n }\n product {\n id\n }\n charges {\n featureAddon\n basePrice\n billingPeriod\n chargeType\n id\n name\n priceDecimals\n pricingModel\n quantityMax\n quantityMin\n selfServiceQuantity\n priceList {\n id\n }\n feature {\n name\n unitName\n }\n }\n }\n }\n }";
21476
21517
  var getPriceListChangeOptions = function (_a) {
21477
21518
  var apiHost = _a.apiHost, isInPreviewMode = _a.isInPreviewMode, productId = _a.productId, token = _a.token, upgradingSubscription = _a.upgradingSubscription;
21478
21519
  return __awaiter(void 0, void 0, void 0, function () {
@@ -21537,6 +21578,21 @@ var calculateNewQuantity = function (priceList, currentQuantity) {
21537
21578
  }
21538
21579
  };
21539
21580
 
21581
+ function isAddonPurchased(featureAddon, currentSubscription) {
21582
+ var purchasedFeatureAddons = currentSubscription === null || currentSubscription === void 0 ? void 0 : currentSubscription.charges.filter(function (charge) { var _a; return (_a = charge.priceListCharge) === null || _a === void 0 ? void 0 : _a.featureAddon; });
21583
+ if (!purchasedFeatureAddons)
21584
+ return false;
21585
+ return purchasedFeatureAddons.some(function (addon) { var _a; return ((_a = addon.priceListCharge) === null || _a === void 0 ? void 0 : _a.id) === featureAddon.id; });
21586
+ }
21587
+ function priceListHasUnpurchasedFeatureAddons(priceList, currentSubscription) {
21588
+ var featureAddons = priceList.charges.filter(function (charge) { return charge.featureAddon; });
21589
+ var purchasedFeatureAddons = currentSubscription === null || currentSubscription === void 0 ? void 0 : currentSubscription.charges.filter(function (charge) { var _a; return (_a = charge.priceListCharge) === null || _a === void 0 ? void 0 : _a.featureAddon; });
21590
+ var unpurchasedFeatureAddons = featureAddons.filter(function (charge) {
21591
+ return !(purchasedFeatureAddons === null || purchasedFeatureAddons === void 0 ? void 0 : purchasedFeatureAddons.some(function (purchasedCharge) { var _a; return ((_a = purchasedCharge.priceListCharge) === null || _a === void 0 ? void 0 : _a.id) === charge.id; }));
21592
+ });
21593
+ return unpurchasedFeatureAddons.length > 0;
21594
+ }
21595
+
21540
21596
  var BillingPeriodSelector = function (_a) {
21541
21597
  var availableBillingPeriods = _a.availableBillingPeriods, onChangeBillingPeriod = _a.onChangeBillingPeriod, products = _a.products, selectedBillingPeriod = _a.selectedBillingPeriod, selectedProduct = _a.selectedProduct, onChangeProduct = _a.onChangeProduct;
21542
21598
  var _b = useContext(BrandContext), secondaryColor = _b.secondaryColor, brandColor = _b.brandColor;
@@ -21564,12 +21620,75 @@ var StyledRadioGroup = styled.div(templateObject_2 || (templateObject_2 = __make
21564
21620
  });
21565
21621
  var templateObject_1$4, templateObject_2;
21566
21622
 
21567
- var PriceListCardTitle = function (_a) {
21568
- var priceList = _a.priceList, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, trialRemainingDays = _a.trialRemainingDays;
21569
- var isMobile = useIsMobile();
21570
- return (jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-4" }, { children: [Boolean(trialRemainingDays) && (jsx("div", __assign({ className: "bunny-font-medium bunny-text-secondary", style: { height: "1rem" } }, { children: isPriceListCurrentSubscription
21571
- ? "Trial ends in ".concat(trialRemainingDays, " day").concat(trialRemainingDays === 1 ? "" : "s")
21572
- : " " }))), jsx("div", __assign({ className: "bunny-font-medium bunny-text-center ".concat(isMobile ? "bunny-text-slate-500" : "bunny-text-orange-600"), style: { fontSize: "20px" } }, { children: priceList.plan.name }))] })));
21623
+ var NextPriceListButton = function (_a) {
21624
+ var availablePriceLists = _a.availablePriceLists, priceListStart = _a.priceListStart, setPriceListStart = _a.setPriceListStart, numberOfPlansToDisplay = _a.numberOfPlansToDisplay;
21625
+ return (jsxs("div", __assign({ className: "bunny-absolute bunny-flex bunny-gap-1", style: { top: '12px', right: '8px' } }, { children: [priceListStart > 0 && (jsx("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-center bunny-rounded-full bunny-shadow bunny-p-1 bunny-cursor-pointer", onClick: function () {
21626
+ setPriceListStart(function (prev) {
21627
+ var newValue = prev - 1;
21628
+ if (newValue < 0) {
21629
+ return prev;
21630
+ }
21631
+ return newValue;
21632
+ });
21633
+ }, style: { width: '22px', height: '22px' } }, { children: jsx(FontAwesomeIcon, { icon: faChevronLeft }) }))), priceListStart < availablePriceLists.length - numberOfPlansToDisplay && (jsx("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-center bunny-rounded-full bunny-shadow bunny-p-1 bunny-cursor-pointer", onClick: function () {
21634
+ return setPriceListStart(function (prev) {
21635
+ var newValue = prev + 1;
21636
+ if (newValue >= availablePriceLists.length) {
21637
+ return prev;
21638
+ }
21639
+ return newValue;
21640
+ });
21641
+ }, style: { width: '22px', height: '22px' } }, { children: jsx(FontAwesomeIcon, { icon: faChevronRight }) })))] })));
21642
+ };
21643
+
21644
+ var getAvailablePlansAndPriceLists = function (_a) {
21645
+ var availablePriceLists = _a.availablePriceLists, priceListChangeOptions = _a.priceListChangeOptions, priceListStart = _a.priceListStart, plansToDisplay = _a.plansToDisplay;
21646
+ var displayPriceLists = availablePriceLists.slice(priceListStart, priceListStart + plansToDisplay);
21647
+ var availablePriceListsArray = displayPriceLists === null || displayPriceLists === void 0 ? void 0 : displayPriceLists.map(function (displayPriceList) {
21648
+ var _a;
21649
+ var foundPriceList = (_a = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _a === void 0 ? void 0 : _a.find(function (priceList) { return priceList.plan.id === displayPriceList.plan.id; });
21650
+ return foundPriceList;
21651
+ });
21652
+ return {
21653
+ availablePriceListsArray: availablePriceListsArray,
21654
+ displayPriceLists: displayPriceLists,
21655
+ };
21656
+ };
21657
+ var everythingInPlusString = function (_a) {
21658
+ var priceList = _a.priceList;
21659
+ return "Everything in ".concat(priceList.plan.name, ", plus");
21660
+ };
21661
+
21662
+ var PriceListCardButton = function (_a) {
21663
+ var disableOnClick = _a.disableOnClick, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, priceList = _a.priceList, subscriptionPlan = _a.subscriptionPlan;
21664
+ // Context
21665
+ var upgradingSubscription = useContext(SubscriptionsContext).upgradingSubscription;
21666
+ var showBuyAddonsButton = isPriceListCurrentSubscription &&
21667
+ subscriptionPlan &&
21668
+ priceListHasUnpurchasedFeatureAddons(priceList, upgradingSubscription);
21669
+ var isPriceListNonSubscribedCurrentPlan = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.plan.id) === priceList.plan.id && !isPriceListCurrentSubscription;
21670
+ var createButtonText = function () {
21671
+ if (isPriceListCurrentSubscription)
21672
+ return 'Current';
21673
+ if (isSelected)
21674
+ return 'Selected';
21675
+ if (subscriptionPlan && !isPriceListNonSubscribedCurrentPlan)
21676
+ return 'Subscribed';
21677
+ if (priceList.plan.pricingStyle === PricingStyle.CONTACT_US)
21678
+ return priceList.plan.contactUsLabel;
21679
+ return 'Select';
21680
+ };
21681
+ return (jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-grow bunny-w-full bunny-justify-end bunny-gap-3" }, { children: [showBuyAddonsButton && (jsx("div", __assign({ className: "bunny-flex bunny-justify-center bunny-w-full" }, { children: jsx(Button, __assign({ className: "bunny-w-full", disabled: disableOnClick, style: {
21682
+ maxWidth: '240px',
21683
+ }, type: isSelected ? 'primary' : 'default' }, { children: "Buy addons" })) }))), jsx("div", __assign({ className: "bunny-flex bunny-justify-center bunny-w-full" }, { children: jsx(Button, __assign({ className: "bunny-w-full", disabled: disableOnClick || showBuyAddonsButton, style: {
21684
+ maxWidth: '240px',
21685
+ }, type: isSelected ? 'primary' : 'default' }, { children: createButtonText() })) }))] })));
21686
+ };
21687
+
21688
+ var Text$c = Typography.Text;
21689
+ var PriceListCardDescription = function (_a) {
21690
+ var description = _a.description;
21691
+ return (jsx(Text$c, __assign({ className: "bunny-text-center" }, { children: jsx(Markup, { content: description }) })));
21573
21692
  };
21574
21693
 
21575
21694
  var getPrice = function (priceList) {
@@ -21601,12 +21720,6 @@ var PriceListCardPrice = function (_a) {
21601
21720
  : 'Free' })));
21602
21721
  };
21603
21722
 
21604
- var Text$c = Typography.Text;
21605
- var PriceListCardDescription = function (_a) {
21606
- var description = _a.description;
21607
- return (jsx(Text$c, __assign({ className: "bunny-text-center" }, { children: jsx(Markup, { content: description }) })));
21608
- };
21609
-
21610
21723
  var BillingPeriodConverter;
21611
21724
  (function (BillingPeriodConverter) {
21612
21725
  BillingPeriodConverter["ONCE"] = "once";
@@ -21629,52 +21742,24 @@ var PriceListCardPriceDescription = function (_a) {
21629
21742
  return null;
21630
21743
  return (jsxs(Fragment, { children: [jsx(Text$b, __assign({ className: "bunny-text-center bunny-text-gray-900", style: {
21631
21744
  fontSize: isMobile ? '13px' : '12px',
21632
- } }, { children: priceList.plan.pricingDescription && !isEmptyHtml(priceList.plan.pricingDescription) ? (jsx(Markup, { content: priceList.plan.pricingDescription })) : ("per ".concat((feature === null || feature === void 0 ? void 0 : feature.unitName) && !doesPlanHaveFlatFeeCharges
21633
- ? "".concat(feature.unitName.toLowerCase(), " / ")
21634
- : '').concat(priceList.showPriceAsMonthly
21635
- ? 'month'
21636
- : PERIOD_LABELS[periodMonthsConverter(priceList.periodMonths)])) })), priceList.periodMonths > 1 && (jsxs(Text$b, __assign({ className: "bunny-text-center bunny-text-gray-900", style: { fontSize: isMobile ? '12px' : '11px' } }, { children: ["billed ", BillingPeriodConverter$1[periodMonthsConverter(priceList.periodMonths)]] })))] }));
21637
- };
21638
-
21639
- var CheckIcon = function (_a) {
21640
- var backgroundColor = _a.backgroundColor, size = _a.size;
21641
- return (jsx("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-center bunny-rounded-full bunny-shrink-0", style: { width: size, height: size, backgroundColor: backgroundColor } }, { children: jsx("svg", __assign({ width: "8", height: "6", viewBox: "0 0 8 6", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: jsx("path", { d: "M1.5 2.99992L3.16667 4.66659L6.5 1.33325", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })) })));
21642
- };
21643
-
21644
- var PriceListCardButton = function (_a) {
21645
- var disableOnClick = _a.disableOnClick, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, priceList = _a.priceList, subscriptionPlan = _a.subscriptionPlan;
21646
- // Context
21647
- var upgradingSubscription = useContext(SubscriptionsContext).upgradingSubscription;
21648
- var isPriceListNonSubscribedCurrentPlan = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.plan.id) === priceList.plan.id && !isPriceListCurrentSubscription;
21649
- var createButtonText = function () {
21650
- if (isPriceListCurrentSubscription)
21651
- return 'Current';
21652
- if (isSelected)
21653
- return 'Selected';
21654
- if (subscriptionPlan && !isPriceListNonSubscribedCurrentPlan)
21655
- return 'Subscribed';
21656
- if (priceList.plan.pricingStyle === PricingStyle.CONTACT_US)
21657
- return priceList.plan.contactUsLabel;
21658
- return 'Select';
21659
- };
21660
- return (jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-grow bunny-w-full bunny-justify-end" }, { children: jsx("div", __assign({ className: "bunny-flex bunny-justify-center bunny-w-full" }, { children: jsx(Button, __assign({ className: "bunny-w-full", disabled: disableOnClick, style: {
21661
- maxWidth: '240px',
21662
- }, type: isSelected ? 'primary' : 'default' }, { children: createButtonText() })) })) })));
21745
+ } }, { children: priceList.plan.pricingDescription && !isEmptyHtml(priceList.plan.pricingDescription) ? (jsx(Markup, { content: priceList.plan.pricingDescription })) : (PriceDescriptionString({
21746
+ unitName: feature === null || feature === void 0 ? void 0 : feature.unitName,
21747
+ showPriceAsMonthly: priceList.showPriceAsMonthly,
21748
+ periodMonths: priceList.periodMonths,
21749
+ doesPlanHaveFlatFeeCharges: doesPlanHaveFlatFeeCharges,
21750
+ })) })), priceList.periodMonths > 1 && (jsxs(Text$b, __assign({ className: "bunny-text-center bunny-text-gray-900", style: { fontSize: isMobile ? '12px' : '11px' } }, { children: ["billed ", BillingPeriodConverter$1[periodMonthsConverter(priceList.periodMonths)]] })))] }));
21663
21751
  };
21752
+ function PriceDescriptionString(_a) {
21753
+ var unitName = _a.unitName, showPriceAsMonthly = _a.showPriceAsMonthly, periodMonths = _a.periodMonths, doesPlanHaveFlatFeeCharges = _a.doesPlanHaveFlatFeeCharges;
21754
+ return "per ".concat(unitName && !doesPlanHaveFlatFeeCharges ? "".concat(unitName.toLowerCase(), " / ") : '').concat(showPriceAsMonthly ? 'month' : PERIOD_LABELS[periodMonthsConverter(periodMonths)]);
21755
+ }
21664
21756
 
21665
- var PriceListCardMobile = function (_a) {
21666
- var description = _a.description, disableOnClick = _a.disableOnClick, feature = _a.feature, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, onClick = _a.onClick, priceList = _a.priceList, subscriptionPlan = _a.subscriptionPlan, trialRemainingDays = _a.trialRemainingDays;
21667
- var brandColor = useContext(BrandContext).brandColor;
21668
- return (jsxs("div", __assign({ className: "bunny-relative bunny-flex bunny-flex-col bunny-border-2 bunny-border-solid bunny-rounded-lg bunny-p-4", onClick: function () {
21669
- if (!disableOnClick)
21670
- onClick(priceList);
21671
- }, style: {
21672
- minWidth: '220px',
21673
- borderColor: isSelected ? brandColor : SLATE_200,
21674
- } }, { children: [isSelected && (jsx("div", __assign({ className: "bunny-absolute", style: {
21675
- top: '10px',
21676
- right: '10px',
21677
- } }, { children: jsx(CheckIcon, { backgroundColor: brandColor, size: "20px" }) }))), jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-grow bunny-gap-2" }, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2" }, { children: [jsx(PriceListCardTitle, { isPriceListCurrentSubscription: isPriceListCurrentSubscription, priceList: priceList, trialRemainingDays: trialRemainingDays }), jsx(PriceListCardDescription, { description: description })] })), jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2" }, { children: [jsx(PriceListCardPrice, { priceList: priceList }), jsx(PriceListCardPriceDescription, { feature: feature, priceList: priceList })] })), jsx(PriceListCardButton, { disableOnClick: disableOnClick, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, subscriptionPlan: subscriptionPlan })] }))] })));
21757
+ var PriceListCardTitle = function (_a) {
21758
+ var priceList = _a.priceList, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, trialRemainingDays = _a.trialRemainingDays;
21759
+ var isMobile = useIsMobile();
21760
+ return (jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-4" }, { children: [Boolean(trialRemainingDays) && (jsx("div", __assign({ className: "bunny-font-medium bunny-text-secondary", style: { height: "1rem" } }, { children: isPriceListCurrentSubscription
21761
+ ? "Trial ends in ".concat(trialRemainingDays, " day").concat(trialRemainingDays === 1 ? "" : "s")
21762
+ : " " }))), jsx("div", __assign({ className: "bunny-font-medium bunny-text-center ".concat(isMobile ? "bunny-text-slate-500" : "bunny-text-orange-600"), style: { fontSize: "20px" } }, { children: priceList.plan.name }))] })));
21678
21763
  };
21679
21764
 
21680
21765
  var PLAN_GRID_PADDING = 4;
@@ -21701,6 +21786,26 @@ var PriceListCardDesktop = function (_a) {
21701
21786
  } }, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-3" }, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2" }, { children: [jsx(PriceListCardTitle, { isPriceListCurrentSubscription: isPriceListCurrentSubscription, priceList: priceList, trialRemainingDays: trialRemainingDays }), jsx(PriceListCardDescription, { description: description })] })), jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2" }, { children: [jsx(PriceListCardPrice, { priceList: priceList }), jsx(PriceListCardPriceDescription, { feature: feature, priceList: priceList })] }))] })), jsx(PriceListCardButton, { disableOnClick: disableOnClick, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, subscriptionPlan: subscriptionPlan })] })) }));
21702
21787
  };
21703
21788
 
21789
+ var CheckIcon = function (_a) {
21790
+ var backgroundColor = _a.backgroundColor, size = _a.size;
21791
+ return (jsx("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-center bunny-rounded-full bunny-shrink-0", style: { width: size, height: size, backgroundColor: backgroundColor } }, { children: jsx("svg", __assign({ width: "8", height: "6", viewBox: "0 0 8 6", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: jsx("path", { d: "M1.5 2.99992L3.16667 4.66659L6.5 1.33325", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })) })));
21792
+ };
21793
+
21794
+ var PriceListCardMobile = function (_a) {
21795
+ var description = _a.description, disableOnClick = _a.disableOnClick, feature = _a.feature, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, onClick = _a.onClick, priceList = _a.priceList, subscriptionPlan = _a.subscriptionPlan, trialRemainingDays = _a.trialRemainingDays;
21796
+ var brandColor = useContext(BrandContext).brandColor;
21797
+ return (jsxs("div", __assign({ className: "bunny-relative bunny-flex bunny-flex-col bunny-border-2 bunny-border-solid bunny-rounded-lg bunny-p-4", onClick: function () {
21798
+ if (!disableOnClick)
21799
+ onClick(priceList);
21800
+ }, style: {
21801
+ minWidth: '220px',
21802
+ borderColor: isSelected ? brandColor : SLATE_200,
21803
+ } }, { children: [isSelected && (jsx("div", __assign({ className: "bunny-absolute", style: {
21804
+ top: '10px',
21805
+ right: '10px',
21806
+ } }, { children: jsx(CheckIcon, { backgroundColor: brandColor, size: "20px" }) }))), jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-grow bunny-gap-2" }, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2" }, { children: [jsx(PriceListCardTitle, { isPriceListCurrentSubscription: isPriceListCurrentSubscription, priceList: priceList, trialRemainingDays: trialRemainingDays }), jsx(PriceListCardDescription, { description: description })] })), jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2" }, { children: [jsx(PriceListCardPrice, { priceList: priceList }), jsx(PriceListCardPriceDescription, { feature: feature, priceList: priceList })] })), jsx(PriceListCardButton, { disableOnClick: disableOnClick, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, subscriptionPlan: subscriptionPlan })] }))] })));
21807
+ };
21808
+
21704
21809
  var PriceListCard = function (_a) {
21705
21810
  var _b;
21706
21811
  var isSelected = _a.isSelected, onClick = _a.onClick, priceList = _a.priceList, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays;
@@ -21713,10 +21818,12 @@ var PriceListCard = function (_a) {
21713
21818
  var activeCharge = (_b = getActivePlanPriceData(priceList, priceList)) === null || _b === void 0 ? void 0 : _b.activeCharge;
21714
21819
  // Is the price list the current price list for the upgradingSubscription
21715
21820
  var isPriceListCurrentSubscription = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === priceList.id;
21821
+ var canPurchaseFeatureAddons = priceListHasUnpurchasedFeatureAddons(priceList, upgradingSubscription);
21716
21822
  var disableOnClick = isPriceListDisabled({
21717
21823
  priceList: priceList,
21718
21824
  subscriptions: subscriptions,
21719
21825
  upgradingSubscription: upgradingSubscription,
21826
+ canPurchaseFeatureAddons: canPurchaseFeatureAddons,
21720
21827
  });
21721
21828
  var subscriptionPlan = subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.find(function (subscription) {
21722
21829
  var _a, _b;
@@ -21731,67 +21838,196 @@ var PriceListCard = function (_a) {
21731
21838
  return isMobile ? (jsx(PriceListCardMobile, { description: description, disableOnClick: disableOnClick, feature: feature, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, onClick: onClick, priceList: priceList, trialRemainingDays: trialRemainingDays, subscriptionPlan: subscriptionPlan })) : (jsx(PriceListCardDesktop, { description: description, disableOnClick: disableOnClick, feature: feature, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, onClick: onClick, priceList: priceList, trialRemainingDays: trialRemainingDays, subscriptionPlan: subscriptionPlan }));
21732
21839
  };
21733
21840
 
21734
- var Text$a = Typography.Text;
21735
- var PriceListCardFeature = function (_a) {
21736
- var index = _a.index, planFeature = _a.planFeature;
21737
- var brandColor = useContext(BrandContext).brandColor;
21738
- if (planFeature.feature.kind === "GROUP")
21739
- return jsx(Text$a, __assign({ className: "bunny-font-medium bunny-base-text" }, { children: planFeature.name }));
21740
- return (jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }), jsx(Text$a, __assign({ className: "bunny-text-gray-600" }, { children: planFeature.feature.name }))] }), index));
21841
+ var QUOTE_CHARGE_CREATE$1 = "\nmutation QuoteChargeCreate ($quoteChangeId: ID!, $startDate: ISO8601Date!, $endDate: ISO8601Date, $priceListChargeId: ID, $subscriptionChargeId: ID, $price: Float, $quantity: Int) {\n quoteChargeCreate(\n endDate: $endDate\n price: $price\n priceListChargeId: $priceListChargeId\n quantity: $quantity\n quoteChangeId: $quoteChangeId\n startDate: $startDate\n subscriptionChargeId: $subscriptionChargeId\n ) {\n quoteCharge {\n quoteChange {\n id\n quoteId\n }\n id\n }\n }\n}\n\n";
21842
+ var quoteChargeCreate = function (_a) {
21843
+ var
21844
+ // endDate,
21845
+ price = _a.price, priceListChargeId = _a.priceListChargeId, quantity = _a.quantity, quoteChangeId = _a.quoteChangeId, startDate = _a.startDate, subscriptionChargeId = _a.subscriptionChargeId, token = _a.token, apiHost = _a.apiHost;
21846
+ return __awaiter(void 0, void 0, void 0, function () {
21847
+ var response;
21848
+ return __generator(this, function (_b) {
21849
+ switch (_b.label) {
21850
+ case 0: return [4 /*yield*/, gqlRequest({
21851
+ query: QUOTE_CHARGE_CREATE$1,
21852
+ vars: {
21853
+ // endDate,
21854
+ price: price,
21855
+ priceListChargeId: priceListChargeId,
21856
+ quantity: quantity,
21857
+ quoteChangeId: quoteChangeId,
21858
+ startDate: startDate,
21859
+ subscriptionChargeId: subscriptionChargeId,
21860
+ },
21861
+ apiHost: apiHost,
21862
+ token: token,
21863
+ })];
21864
+ case 1:
21865
+ response = _b.sent();
21866
+ if (response.errors) {
21867
+ throw new Error(response.errors[0].message);
21868
+ }
21869
+ return [2 /*return*/, response.quoteChargeCreate.quoteCharge];
21870
+ }
21871
+ });
21872
+ });
21741
21873
  };
21742
21874
 
21743
- var getAvailablePlansAndPriceLists = function (_a) {
21744
- var availablePriceLists = _a.availablePriceLists, priceListChangeOptions = _a.priceListChangeOptions, priceListStart = _a.priceListStart, plansToDisplay = _a.plansToDisplay;
21745
- var displayPriceLists = availablePriceLists.slice(priceListStart, priceListStart + plansToDisplay);
21746
- var availablePlansArray = displayPriceLists === null || displayPriceLists === void 0 ? void 0 : displayPriceLists.map(function (displayPriceList) {
21747
- var _a;
21748
- var foundPriceList = (_a = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _a === void 0 ? void 0 : _a.find(function (priceList) { return priceList.plan.id === displayPriceList.plan.id; });
21749
- return foundPriceList.plan;
21875
+ var QUOTE_CHARGE_CREATE = "\nmutation QuoteChargeDelete ($quoteChargeId: ID!) {\n quoteChargeDelete(\n quoteChargeId: $quoteChargeId\n ) {\n errors\n quoteCharge {\n quoteChange {\n id\n quoteId\n }\n }\n }\n}\n\n";
21876
+ var quoteChargeDelete = function (_a) {
21877
+ var quoteChargeId = _a.quoteChargeId, token = _a.token, apiHost = _a.apiHost;
21878
+ return gqlRequest({
21879
+ query: QUOTE_CHARGE_CREATE,
21880
+ vars: {
21881
+ quoteChargeId: quoteChargeId,
21882
+ },
21883
+ apiHost: apiHost,
21884
+ token: token,
21750
21885
  });
21886
+ };
21887
+
21888
+ var useQuoteUpdateFeatureAddon = function (quoteId, featureAddon) {
21889
+ var apiHost = useContext(BunnyContext).apiHost;
21890
+ var token = useToken();
21891
+ var queryClient = useQueryClient();
21892
+ var addedQuoteChargeId = useRef();
21893
+ var editingQuote = useQuery({
21894
+ queryKey: QueryKeyFactory.default.createObjectKey({
21895
+ objectName: 'editingQuote',
21896
+ id: quoteId,
21897
+ }),
21898
+ queryFn: function () { return (quoteId ? getQuote({ id: quoteId, token: token, apiHost: apiHost }) : undefined); },
21899
+ enabled: Boolean(quoteId),
21900
+ }).data;
21901
+ function handleAddFeatureAddon() {
21902
+ quoteChargeCreateMutation();
21903
+ }
21904
+ function handleRemoveFeatureAddon() {
21905
+ if (!addedQuoteChargeId.current)
21906
+ return;
21907
+ quoteChargeDeleteMutation({ quoteChargeId: addedQuoteChargeId.current });
21908
+ }
21909
+ var _a = useMutation({
21910
+ mutationFn: function () { return __awaiter(void 0, void 0, void 0, function () {
21911
+ var quoteCharge;
21912
+ return __generator(this, function (_a) {
21913
+ switch (_a.label) {
21914
+ case 0:
21915
+ if (!token)
21916
+ throw new Error('Token is required');
21917
+ if (!editingQuote)
21918
+ throw new Error('Editing quote is required');
21919
+ return [4 /*yield*/, quoteChargeCreate({
21920
+ quoteChangeId: editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.quoteChanges[editingQuote.quoteChanges.length - 1].id,
21921
+ priceListChargeId: featureAddon.id,
21922
+ startDate: editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.startDate,
21923
+ apiHost: apiHost,
21924
+ token: token,
21925
+ })];
21926
+ case 1:
21927
+ quoteCharge = _a.sent();
21928
+ return [2 /*return*/, { quoteCharge: quoteCharge }];
21929
+ }
21930
+ });
21931
+ }); },
21932
+ onSuccess: function (_a) {
21933
+ var quoteCharge = _a.quoteCharge;
21934
+ addedQuoteChargeId.current = quoteCharge.id;
21935
+ queryClient.invalidateQueries({
21936
+ queryKey: QueryKeyFactory.default.createObjectKey({
21937
+ objectName: 'editingQuote',
21938
+ }),
21939
+ });
21940
+ },
21941
+ }), quoteChargeCreateMutation = _a.mutate, isCreatingFeatureAddon = _a.isPending;
21942
+ var _b = useMutation({
21943
+ mutationFn: function (_a) {
21944
+ var quoteChargeId = _a.quoteChargeId;
21945
+ return quoteChargeDelete({ quoteChargeId: quoteChargeId, token: token, apiHost: apiHost });
21946
+ },
21947
+ onSuccess: function () {
21948
+ addedQuoteChargeId.current = undefined;
21949
+ queryClient.invalidateQueries({
21950
+ queryKey: QueryKeyFactory.default.createObjectKey({
21951
+ objectName: 'editingQuote',
21952
+ }),
21953
+ });
21954
+ },
21955
+ }), quoteChargeDeleteMutation = _b.mutate, isDeletingFeatureAddon = _b.isPending;
21956
+ useEffect(function () {
21957
+ // If the quoteId changes, then its because we changed pricelists, so we need to reset the addedQuoteChargeId
21958
+ // so that isChecked becomes false
21959
+ addedQuoteChargeId.current = undefined;
21960
+ }, [quoteId]);
21751
21961
  return {
21752
- availablePlansArray: availablePlansArray,
21753
- displayPriceLists: displayPriceLists,
21962
+ handleAddFeatureAddon: handleAddFeatureAddon,
21963
+ handleRemoveFeatureAddon: handleRemoveFeatureAddon,
21964
+ isPending: isCreatingFeatureAddon || isDeletingFeatureAddon,
21965
+ isChecked: isDeletingFeatureAddon
21966
+ ? false
21967
+ : Boolean(addedQuoteChargeId.current || isCreatingFeatureAddon),
21968
+ editingQuoteLoaded: editingQuote !== undefined,
21754
21969
  };
21755
21970
  };
21756
- var everythingInPlusString = function (_a) {
21757
- var priceList = _a.priceList;
21758
- return "Everything in ".concat(priceList.plan.name, ", plus");
21759
- };
21760
21971
 
21761
- var PriceListGridMobile = function (_a) {
21762
- var _b, _c, _d, _e;
21763
- var availablePriceLists = _a.availablePriceLists, onChangePriceList = _a.onChangePriceList, priceListChangeOptions = _a.priceListChangeOptions, selectedPriceList = _a.selectedPriceList, selectedProduct = _a.selectedProduct, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays;
21764
- var everythingInPlus = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus;
21765
- var prevPriceListIndex = availablePriceLists.findIndex(function (priceList) { return priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id); });
21766
- var prevPriceListId = (_b = availablePriceLists[prevPriceListIndex - 1]) === null || _b === void 0 ? void 0 : _b.id;
21767
- var prevPriceList = (_c = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _c === void 0 ? void 0 : _c.find(function (priceList) { return priceList.id === prevPriceListId; });
21768
- return (jsxs(Fragment, { children: [jsx("div", __assign({ className: "bunny-flex bunny-gap-4 bunny-overflow-auto bunny-shadow-padding-xb", style: { flexShrink: 0 } }, { children: availablePriceLists.map(function (priceList, index) {
21769
- return (jsx(PriceListCard, { isSelected: priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id), onClick: onChangePriceList, priceList: priceList, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays }, index));
21770
- }) })), jsx("div", __assign({ className: "bunny-text-slate-500 bunny-pt-5 bunny-pb-4 bunny-shadow-padding-x" }, { children: everythingInPlus && prevPriceList
21771
- ? everythingInPlusString({ priceList: prevPriceList })
21772
- : "Features" })), jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-overflow-auto bunny-shadow-padding-x" }, { children: (_e = (_d = selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.plan) === null || _d === void 0 ? void 0 : _d.planFeatures) === null || _e === void 0 ? void 0 : _e.map(function (planFeature, index) { return (jsx(PriceListCardFeature, { planFeature: planFeature, index: index }, index)); }) }))] }));
21972
+ var shouldColorRow = function (_a) {
21973
+ var isFeatureGroup = _a.isFeatureGroup, rowIndex = _a.rowIndex;
21974
+ return !isFeatureGroup && rowIndex % 2 === 1;
21975
+ };
21976
+ var FeatureGridCell = function (_a) {
21977
+ var children = _a.children, isFeatureGroup = _a.isFeatureGroup, noBorder = _a.noBorder, rowIndex = _a.rowIndex;
21978
+ return (jsx("div", __assign({ className: "bunny-px-".concat(PLAN_GRID_PADDING, " bunny-py-2"), style: __assign(__assign({}, (noBorder ? {} : { borderLeft: "1px solid ".concat(SLATE_200) })), (shouldColorRow({
21979
+ isFeatureGroup: isFeatureGroup,
21980
+ rowIndex: rowIndex,
21981
+ })
21982
+ ? { backgroundColor: SLATE_100 }
21983
+ : {})) }, { children: children })));
21773
21984
  };
21774
21985
 
21775
- var NextPriceListButton = function (_a) {
21776
- var availablePriceLists = _a.availablePriceLists, priceListStart = _a.priceListStart, setPriceListStart = _a.setPriceListStart, numberOfPlansToDisplay = _a.numberOfPlansToDisplay;
21777
- return (jsxs("div", __assign({ className: "bunny-absolute bunny-flex bunny-gap-1", style: { top: '12px', right: '8px' } }, { children: [priceListStart > 0 && (jsx("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-center bunny-rounded-full bunny-shadow bunny-p-1 bunny-cursor-pointer", onClick: function () {
21778
- setPriceListStart(function (prev) {
21779
- var newValue = prev - 1;
21780
- if (newValue < 0) {
21781
- return prev;
21782
- }
21783
- return newValue;
21784
- });
21785
- }, style: { width: '22px', height: '22px' } }, { children: jsx(FontAwesomeIcon, { icon: faChevronLeft }) }))), priceListStart < availablePriceLists.length - numberOfPlansToDisplay && (jsx("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-center bunny-rounded-full bunny-shadow bunny-p-1 bunny-cursor-pointer", onClick: function () {
21786
- return setPriceListStart(function (prev) {
21787
- var newValue = prev + 1;
21788
- if (newValue >= availablePriceLists.length) {
21789
- return prev;
21790
- }
21791
- return newValue;
21792
- });
21793
- }, style: { width: '22px', height: '22px' } }, { children: jsx(FontAwesomeIcon, { icon: faChevronRight }) })))] })));
21986
+ var PlanFeatureAddons = function (_a) {
21987
+ var displayPriceLists = _a.displayPriceLists, plansToDisplay = _a.plansToDisplay;
21988
+ var uniquePlanFeatures = filterUniqueFeatures({ availablePriceLists: displayPriceLists });
21989
+ return (jsxs(Fragment, { children: [jsx(FeatureGridCell, { isFeatureGroup: true, noBorder: true, rowIndex: 0 }), __spreadArray([], Array(plansToDisplay), true).map(function (_, planIndex) {
21990
+ var priceList = uniquePlanFeatures[planIndex];
21991
+ var prevPriceList = displayPriceLists[planIndex - 1];
21992
+ if (!priceList)
21993
+ return (jsx("div", { style: prevPriceList ? { borderLeft: "1px solid ".concat(SLATE_200) } : {} }, planIndex));
21994
+ return (jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-p-4", style: { borderLeft: "1px solid ".concat(SLATE_200) } }, { children: jsx(FeatureAddonsList, { priceList: priceList }) }), planIndex));
21995
+ })] }));
21794
21996
  };
21997
+ function FeatureAddonsList(_a) {
21998
+ var _b;
21999
+ var priceList = _a.priceList;
22000
+ var featureAddons = (_b = priceList === null || priceList === void 0 ? void 0 : priceList.charges) === null || _b === void 0 ? void 0 : _b.filter(function (charge) { return charge.featureAddon === true; });
22001
+ return (jsx(Fragment, { children: featureAddons === null || featureAddons === void 0 ? void 0 : featureAddons.map(function (featureAddon, featureAddonIndex) {
22002
+ return (jsx(FeatureAddonRow, { featureAddon: featureAddon, priceList: priceList }, featureAddonIndex));
22003
+ }) }));
22004
+ }
22005
+ function FeatureAddonRow(_a) {
22006
+ var _b, _c;
22007
+ var featureAddon = _a.featureAddon, priceList = _a.priceList;
22008
+ var quotePreviewData = useContext(QuotePreviewContext).quotePreviewData;
22009
+ var upgradingSubscription = useContext(SubscriptionsContext).upgradingSubscription;
22010
+ var _d = useQuoteUpdateFeatureAddon(quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.editingQuoteId, featureAddon), handleAddFeatureAddon = _d.handleAddFeatureAddon, handleRemoveFeatureAddon = _d.handleRemoveFeatureAddon, isPending = _d.isPending, isChecked = _d.isChecked, editingQuoteLoaded = _d.editingQuoteLoaded;
22011
+ var brandColor = useContext(BrandContext).brandColor;
22012
+ var isPriceListSelected = ((_b = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList) === null || _b === void 0 ? void 0 : _b.id) === priceList.id;
22013
+ var isPurchased = isAddonPurchased(featureAddon, upgradingSubscription);
22014
+ var isDisabled = !isPriceListSelected || isPurchased;
22015
+ var checked = isChecked || isPurchased;
22016
+ var tooltipContent = (jsxs(Fragment, { children: [jsx("div", { children: formatCurrency(featureAddon.basePrice, priceList.currencyId) }), featureAddon.chargeType === ChargeType.RECURRING && (jsx("div", { children: PriceDescriptionString({
22017
+ unitName: (_c = featureAddon.feature) === null || _c === void 0 ? void 0 : _c.unitName,
22018
+ showPriceAsMonthly: priceList.showPriceAsMonthly,
22019
+ periodMonths: priceList.periodMonths,
22020
+ doesPlanHaveFlatFeeCharges: false,
22021
+ }) }))] }));
22022
+ return (jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-flex-wrap bunny-items-center bunny-justify-between bunny-gap-1" }, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-items-center bunny-gap-1" }, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-gap-1 bunny-text-gray-600", style: { fontSize: '13px' } }, { children: [checked ? (jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" })) : (jsx(CheckIcon, { backgroundColor: SLATE_200, size: "15px" })), featureAddon.name] })), jsx(Tooltip, __assign({ title: tooltipContent }, { children: jsx(InfoCircleOutlined, { className: "bunny-text-gray-500", size: 15 }) }))] })), jsx(Switch, { size: "small", loading: isPending, disabled: isDisabled || !editingQuoteLoaded, checked: checked, onChange: function (checked) {
22023
+ if (checked) {
22024
+ handleAddFeatureAddon();
22025
+ }
22026
+ else {
22027
+ handleRemoveFeatureAddon();
22028
+ }
22029
+ } })] })));
22030
+ }
21795
22031
 
21796
22032
  var filterUniqueFeatures = function (_a) {
21797
22033
  // Remove any features that in previous plans if everythingInPlus is true
@@ -21813,41 +22049,27 @@ var filterUniqueFeatures = function (_a) {
21813
22049
  return updatedPriceLists;
21814
22050
  };
21815
22051
  var EverythingPlanFeatures = function (_a) {
21816
- var availablePriceLists = _a.availablePriceLists, selectedProduct = _a.selectedProduct, plansToDisplay = _a.plansToDisplay;
22052
+ var displayPriceLists = _a.displayPriceLists, selectedProduct = _a.selectedProduct, plansToDisplay = _a.plansToDisplay;
21817
22053
  var brandColor = useContext(BrandContext).brandColor;
21818
- var uniquePlanFeatures = filterUniqueFeatures({ availablePriceLists: availablePriceLists });
22054
+ var uniquePlanFeatures = filterUniqueFeatures({ availablePriceLists: displayPriceLists });
21819
22055
  return (jsx(Fragment, { children: __spreadArray([], Array(plansToDisplay), true).map(function (_, planIndex) {
21820
22056
  var priceList = uniquePlanFeatures[planIndex];
21821
- var prevPriceList = availablePriceLists[planIndex - 1];
22057
+ var prevPriceList = displayPriceLists[planIndex - 1];
21822
22058
  if (!priceList)
21823
22059
  return (jsx("div", { style: prevPriceList ? { borderLeft: "1px solid ".concat(SLATE_200) } : {} }, planIndex));
21824
22060
  if (!priceList.plan.planFeatures)
21825
- return jsx("div", {}, planIndex);
21826
- return (jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-p-4", style: { borderLeft: "1px solid ".concat(SLATE_200) } }, { children: priceList.plan.planFeatures.map(function (planFeature, planFeatureIndex) {
21827
- var everythingInPlus = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus;
21828
- return (jsxs("div", __assign({ className: "bunny-contents" }, { children: [prevPriceList && everythingInPlus && planIndex > 0 && planFeatureIndex === 0 && (jsx("div", __assign({ className: "bunny-font-medium", style: { fontSize: '13px' } }, { children: everythingInPlusString({ priceList: prevPriceList }) }))), jsxs("div", __assign({ className: "bunny-flex bunny-gap-1 bunny-text-gray-600", style: { fontSize: '13px' } }, { children: [jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }), planFeature.feature.name] }))] }), planFeatureIndex));
21829
- }) }), planIndex));
22061
+ return (jsxs("div", { children: [jsx(FeatureAddonsList, { priceList: priceList }), ";"] }, planIndex));
22062
+ return (jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-p-4", style: { borderLeft: "1px solid ".concat(SLATE_200) } }, { children: [priceList.plan.planFeatures.map(function (planFeature, planFeatureIndex) {
22063
+ var everythingInPlus = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus;
22064
+ return (jsxs("div", __assign({ className: "bunny-contents" }, { children: [prevPriceList && everythingInPlus && planIndex > 0 && planFeatureIndex === 0 && (jsx("div", __assign({ className: "bunny-font-medium", style: { fontSize: '13px' } }, { children: everythingInPlusString({ priceList: prevPriceList }) }))), jsxs("div", __assign({ className: "bunny-flex bunny-gap-1 bunny-text-gray-600", style: { fontSize: '13px' } }, { children: [jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }), planFeature.feature.name] }))] }), planFeatureIndex));
22065
+ }), jsx(FeatureAddonsList, { priceList: priceList })] }), planIndex));
21830
22066
  }) }));
21831
22067
  };
21832
22068
 
21833
- var shouldColorRow = function (_a) {
21834
- var isFeatureGroup = _a.isFeatureGroup, rowIndex = _a.rowIndex;
21835
- return !isFeatureGroup && rowIndex % 2 === 1;
21836
- };
21837
- var FeatureGridCell = function (_a) {
21838
- var children = _a.children, isFeatureGroup = _a.isFeatureGroup, noBorder = _a.noBorder, rowIndex = _a.rowIndex;
21839
- return (jsx("div", __assign({ className: "bunny-px-".concat(PLAN_GRID_PADDING, " bunny-py-2"), style: __assign(__assign({}, (noBorder ? {} : { borderLeft: "1px solid ".concat(SLATE_200) })), (shouldColorRow({
21840
- isFeatureGroup: isFeatureGroup,
21841
- rowIndex: rowIndex,
21842
- })
21843
- ? { backgroundColor: SLATE_100 }
21844
- : {})) }, { children: children })));
21845
- };
21846
-
21847
- var Text$9 = Typography.Text;
22069
+ var Text$a = Typography.Text;
21848
22070
  var PlanFeatures = function (_a) {
21849
22071
  var _b;
21850
- var availablePlansArray = _a.availablePlansArray, selectedProduct = _a.selectedProduct, plansToDisplay = _a.plansToDisplay;
22072
+ var displayPriceLists = _a.displayPriceLists, selectedProduct = _a.selectedProduct, plansToDisplay = _a.plansToDisplay;
21851
22073
  var featureGroupCounter = useRef(0);
21852
22074
  var visibleFeatureCounter = useRef(1);
21853
22075
  var brandColor = useContext(BrandContext).brandColor;
@@ -21874,8 +22096,9 @@ var PlanFeatures = function (_a) {
21874
22096
  visibleFeatureCounter.current = visibleFeatureCounter.current + 1;
21875
22097
  return (jsxs("div", __assign({ className: "bunny-contents" }, { children: [jsx(FeatureGridCell, __assign({ isFeatureGroup: isFeatureGroup, noBorder: true, rowIndex: rowIndex }, { children: jsx(FeatureTitle, { isFeatureGroup: isFeatureGroup, feature: feature }) })), __spreadArray([], Array(plansToDisplay), true).map(function (_, columnIndex) {
21876
22098
  var _a;
21877
- var plan = availablePlansArray[columnIndex];
21878
- var doesHavePrevPlan = availablePlansArray[columnIndex - 1];
22099
+ var priceList = displayPriceLists[columnIndex];
22100
+ var plan = priceList.plan;
22101
+ var doesHavePrevPlan = displayPriceLists[columnIndex - 1];
21879
22102
  columnIndex = columnIndex + 1;
21880
22103
  // Check if the plan has the feature
21881
22104
  var planFeature = (_a = plan === null || plan === void 0 ? void 0 : plan.planFeatures) === null || _a === void 0 ? void 0 : _a.find(function (f) { return f.featureId === (feature === null || feature === void 0 ? void 0 : feature.id); });
@@ -21883,14 +22106,14 @@ var PlanFeatures = function (_a) {
21883
22106
  return (jsx(FeatureGridCell, { rowIndex: rowIndex, noBorder: !Boolean(doesHavePrevPlan) }, columnIndex));
21884
22107
  if (isFeatureGroup)
21885
22108
  return jsx(FeatureGridCell, { isFeatureGroup: true, rowIndex: rowIndex }, columnIndex);
21886
- return (jsx(FeatureGridCell, __assign({ rowIndex: rowIndex }, { children: jsx("div", __assign({ className: "bunny-flex bunny-justify-center bunny-text-center" }, { children: planFeature ? ((planFeature === null || planFeature === void 0 ? void 0 : planFeature.value) ? (planFeature.value) : (jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }))) : (jsx(Text$9, __assign({ className: "bunny-text-gray" }, { children: "-" }))) })) }), columnIndex));
22109
+ return (jsx(FeatureGridCell, __assign({ rowIndex: rowIndex }, { children: jsx("div", __assign({ className: "bunny-flex bunny-justify-center bunny-text-center" }, { children: planFeature ? ((planFeature === null || planFeature === void 0 ? void 0 : planFeature.value) ? (planFeature.value) : (jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }))) : (jsx(Text$a, __assign({ className: "bunny-text-gray" }, { children: "-" }))) })) }), columnIndex));
21887
22110
  })] }), rowIndex));
21888
22111
  }) }));
21889
22112
  };
21890
22113
  var FeatureTitle = function (_a) {
21891
22114
  var _b;
21892
22115
  var isFeatureGroup = _a.isFeatureGroup, feature = _a.feature;
21893
- return (jsx(Text$9, __assign({ className: " ".concat(isFeatureGroup ? 'bunny-text-slate-500 bunny-font-medium bunny-pt-4' : ''), style: __assign({}, (isFeatureGroup ? { fontSize: '11px' } : {})) }, { children: isFeatureGroup ? (_b = feature === null || feature === void 0 ? void 0 : feature.name) === null || _b === void 0 ? void 0 : _b.toUpperCase() : feature === null || feature === void 0 ? void 0 : feature.name })));
22116
+ return (jsx(Text$a, __assign({ className: " ".concat(isFeatureGroup ? 'bunny-text-slate-500 bunny-font-medium bunny-pt-4' : ''), style: __assign({}, (isFeatureGroup ? { fontSize: '11px' } : {})) }, { children: isFeatureGroup ? (_b = feature === null || feature === void 0 ? void 0 : feature.name) === null || _b === void 0 ? void 0 : _b.toUpperCase() : feature === null || feature === void 0 ? void 0 : feature.name })));
21894
22117
  };
21895
22118
 
21896
22119
  var PriceListGridDesktop = function (_a) {
@@ -21902,7 +22125,7 @@ var PriceListGridDesktop = function (_a) {
21902
22125
  priceListStart: priceListStart,
21903
22126
  plansToDisplay: (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.plansToDisplay) || 3,
21904
22127
  });
21905
- }, [availablePriceLists, priceListChangeOptions, priceListStart]), availablePlansArray = _b.availablePlansArray, displayPriceLists = _b.displayPriceLists;
22128
+ }, [availablePriceLists, priceListChangeOptions, priceListStart]); _b.availablePriceListsArray; var displayPriceLists = _b.displayPriceLists;
21906
22129
  var everythingInPlus = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus;
21907
22130
  var plansToDisplay = Math.min((selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.plansToDisplay) || 3, availablePriceLists.length);
21908
22131
  return (jsxs("div", __assign({ className: "bunny-relative bunny-flex bunny-flex-col bunny-rounded-md bunny-shadow bunny-overflow-hidden bunny-bg-white" }, { children: [jsx(NextPriceListButton, { availablePriceLists: availablePriceLists, numberOfPlansToDisplay: plansToDisplay, priceListStart: priceListStart, setPriceListStart: setPriceListStart }), jsxs("div", __assign({ className: "bunny-grid bunny-w-full", style: {
@@ -21913,9 +22136,32 @@ var PriceListGridDesktop = function (_a) {
21913
22136
  var priceList = displayPriceLists[index];
21914
22137
  var doesPrevPriceListExist = displayPriceLists[index - 1];
21915
22138
  if (!priceList)
21916
- return (jsx(PlanPickerGridCell, { noBorder: !Boolean(doesPrevPriceListExist) }, index));
22139
+ return jsx(PlanPickerGridCell, { noBorder: !Boolean(doesPrevPriceListExist) }, index);
21917
22140
  return (jsx(PriceListCard, { isSelected: priceList.plan.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.plan.id), onClick: onChangePriceList, priceList: priceList, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays }, index));
21918
- }), (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus) ? (jsx(EverythingPlanFeatures, { availablePriceLists: availablePriceLists, plansToDisplay: plansToDisplay, selectedProduct: selectedProduct })) : (jsx(PlanFeatures, { availablePlansArray: availablePlansArray, plansToDisplay: plansToDisplay, selectedProduct: selectedProduct }))] }))] })));
22141
+ }), (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus) ? (jsx(EverythingPlanFeatures, { displayPriceLists: displayPriceLists, plansToDisplay: plansToDisplay, selectedProduct: selectedProduct })) : (jsxs(Fragment, { children: [jsx(PlanFeatures, { displayPriceLists: displayPriceLists, plansToDisplay: plansToDisplay, selectedProduct: selectedProduct }), jsx(PlanFeatureAddons, { displayPriceLists: displayPriceLists, plansToDisplay: plansToDisplay })] }))] }))] })));
22142
+ };
22143
+
22144
+ var Text$9 = Typography.Text;
22145
+ var PriceListCardFeature = function (_a) {
22146
+ var index = _a.index, planFeature = _a.planFeature;
22147
+ var brandColor = useContext(BrandContext).brandColor;
22148
+ if (planFeature.feature.kind === "GROUP")
22149
+ return jsx(Text$9, __assign({ className: "bunny-font-medium bunny-base-text" }, { children: planFeature.name }));
22150
+ return (jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }), jsx(Text$9, __assign({ className: "bunny-text-gray-600" }, { children: planFeature.feature.name }))] }), index));
22151
+ };
22152
+
22153
+ var PriceListGridMobile = function (_a) {
22154
+ var _b, _c, _d, _e;
22155
+ var availablePriceLists = _a.availablePriceLists, onChangePriceList = _a.onChangePriceList, priceListChangeOptions = _a.priceListChangeOptions, selectedPriceList = _a.selectedPriceList, selectedProduct = _a.selectedProduct, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays;
22156
+ var everythingInPlus = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus;
22157
+ var prevPriceListIndex = availablePriceLists.findIndex(function (priceList) { return priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id); });
22158
+ var prevPriceListId = (_b = availablePriceLists[prevPriceListIndex - 1]) === null || _b === void 0 ? void 0 : _b.id;
22159
+ var prevPriceList = (_c = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _c === void 0 ? void 0 : _c.find(function (priceList) { return priceList.id === prevPriceListId; });
22160
+ return (jsxs(Fragment, { children: [jsx("div", __assign({ className: "bunny-flex bunny-gap-4 bunny-overflow-auto bunny-shadow-padding-xb", style: { flexShrink: 0 } }, { children: availablePriceLists.map(function (priceList, index) {
22161
+ return (jsx(PriceListCard, { isSelected: priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id), onClick: onChangePriceList, priceList: priceList, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays }, index));
22162
+ }) })), jsx("div", __assign({ className: "bunny-text-slate-500 bunny-pt-5 bunny-pb-4 bunny-shadow-padding-x" }, { children: everythingInPlus && prevPriceList
22163
+ ? everythingInPlusString({ priceList: prevPriceList })
22164
+ : "Features" })), jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-overflow-auto bunny-shadow-padding-x" }, { children: (_e = (_d = selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.plan) === null || _d === void 0 ? void 0 : _d.planFeatures) === null || _e === void 0 ? void 0 : _e.map(function (planFeature, index) { return (jsx(PriceListCardFeature, { planFeature: planFeature, index: index }, index)); }) }))] }));
21919
22165
  };
21920
22166
 
21921
22167
  var PriceListGrid = function (_a) {
@@ -21925,7 +22171,7 @@ var PriceListGrid = function (_a) {
21925
22171
  var isMobile = useIsMobile();
21926
22172
  // Derived state
21927
22173
  var currentPriceList = (_b = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _b === void 0 ? void 0 : _b.find(function (priceList) { var _a; return priceList.id === ((_a = upgradingSubscriptionState === null || upgradingSubscriptionState === void 0 ? void 0 : upgradingSubscriptionState.plan) === null || _a === void 0 ? void 0 : _a.id); });
21928
- var trialRemainingDays = dayjs((_c = currentPriceList === null || currentPriceList === void 0 ? void 0 : currentPriceList.plan) === null || _c === void 0 ? void 0 : _c.trialEndDate).diff(dayjs(), "days");
22174
+ var trialRemainingDays = dayjs((_c = currentPriceList === null || currentPriceList === void 0 ? void 0 : currentPriceList.plan) === null || _c === void 0 ? void 0 : _c.trialEndDate).diff(dayjs(), 'days');
21929
22175
  return isMobile ? (jsx(PriceListGridMobile, { availablePriceLists: availablePriceLists, onChangePriceList: onChangePriceList, priceListChangeOptions: priceListChangeOptions, selectedPriceList: selectedPriceList, selectedProduct: selectedProduct, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays })) : (jsx(PriceListGridDesktop, { availablePriceLists: availablePriceLists, onChangePriceList: onChangePriceList, priceListChangeOptions: priceListChangeOptions, priceListStart: priceListStart, selectedPriceList: selectedPriceList, selectedProduct: selectedProduct, setPriceListStart: setPriceListStart, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays }));
21930
22176
  };
21931
22177
 
@@ -21933,9 +22179,11 @@ var createAvailableBillingPeriods = function (priceLists, selectedProduct) {
21933
22179
  return priceLists === null || priceLists === void 0 ? void 0 : priceLists.filter(function (priceList) { return priceList.product.id === (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.id); }).map(function (priceList) { return priceList.periodMonths; }).sort(function (a, b) { return a - b; }).filter(function (currentValue, index, array) { return index === array.indexOf(currentValue); });
21934
22180
  };
21935
22181
  var PriceListSelector = function (_a) {
21936
- var arePlanChangeOptionsLoading = _a.arePlanChangeOptionsLoading, areSubscriptionsLoading = _a.areSubscriptionsLoading, onChangePriceList = _a.onChangePriceList, priceListChangeOptions = _a.priceListChangeOptions, selectedPriceList = _a.selectedPriceList, subscriptions = _a.subscriptions, upgradingSubscription = _a.upgradingSubscription;
22182
+ var arePlanChangeOptionsLoading = _a.arePlanChangeOptionsLoading, areSubscriptionsLoading = _a.areSubscriptionsLoading, onChangePriceList = _a.onChangePriceList, priceListChangeOptions = _a.priceListChangeOptions, selectedPriceList = _a.selectedPriceList, subscriptions = _a.subscriptions;
21937
22183
  // Context
21938
- var _b = useContext(SubscriptionsContext), isInPreviewMode = _b.isInPreviewMode, quotePreviewData = _b.quotePreviewData, setQuotePreviewData = _b.setQuotePreviewData;
22184
+ var isInPreviewMode = useContext(SubscriptionsContext).isInPreviewMode;
22185
+ var _b = useContext(QuotePreviewContext), quotePreviewData = _b.quotePreviewData, setQuotePreviewData = _b.setQuotePreviewData;
22186
+ var upgradingSubscription = useContext(SubscriptionsContext).upgradingSubscription;
21939
22187
  // Local state
21940
22188
  var _c = useState(), selectedProduct = _c[0], setSelectedProduct = _c[1];
21941
22189
  var _d = useState(), selectedBillingPeriod = _d[0], setSelectedBillingPeriod = _d[1];
@@ -21965,6 +22213,7 @@ var PriceListSelector = function (_a) {
21965
22213
  priceList: priceList,
21966
22214
  subscriptions: subscriptions,
21967
22215
  upgradingSubscription: upgradingSubscription,
22216
+ canPurchaseFeatureAddons: priceListHasUnpurchasedFeatureAddons(quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList, upgradingSubscription),
21968
22217
  });
21969
22218
  });
21970
22219
  var isPriceListCurrentSubscription = newSelectedPriceList && (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === newSelectedPriceList.id;
@@ -22033,6 +22282,7 @@ var PriceListSelector = function (_a) {
22033
22282
  priceList: initialPriceList,
22034
22283
  subscriptions: subscriptions,
22035
22284
  upgradingSubscription: upgradingSubscription,
22285
+ canPurchaseFeatureAddons: priceListHasUnpurchasedFeatureAddons(initialPriceList, upgradingSubscription),
22036
22286
  })) {
22037
22287
  setQuotePreviewData({
22038
22288
  priceList: initialPriceList,
@@ -22059,18 +22309,19 @@ var PlanPicker = function () {
22059
22309
  // Context
22060
22310
  var token = useToken();
22061
22311
  var apiHost = useContext(BunnyContext).apiHost;
22062
- var _b = useContext(SubscriptionsContext), isInPreviewMode = _b.isInPreviewMode, productId = _b.productId, quotePreviewData = _b.quotePreviewData, setQuotePreviewData = _b.setQuotePreviewData, upgradingSubscription = _b.upgradingSubscription;
22312
+ var _b = useContext(SubscriptionsContext), isInPreviewMode = _b.isInPreviewMode, productId = _b.productId, upgradingSubscription = _b.upgradingSubscription;
22313
+ var _c = useContext(QuotePreviewContext), quotePreviewData = _c.quotePreviewData, setQuotePreviewData = _c.setQuotePreviewData;
22063
22314
  // Hooks
22064
22315
  var showInfoNotification = useInfoNotification();
22065
22316
  // Queries
22066
- var _c = useQuery({
22317
+ var _d = useQuery({
22067
22318
  queryKey: QueryKeyFactory.default.createTableKey({
22068
22319
  pluralType: 'subscriptions',
22069
22320
  token: token,
22070
22321
  }),
22071
22322
  queryFn: function () { return getSubscriptions({ isInPreviewMode: isInPreviewMode, token: token, apiHost: apiHost }); },
22072
- }), subscriptions = _c.data, areSubscriptionsLoading = _c.isLoading;
22073
- var _d = useQuery({
22323
+ }), subscriptions = _d.data, areSubscriptionsLoading = _d.isLoading;
22324
+ var _e = useQuery({
22074
22325
  queryKey: QueryKeyFactory.default.planChangeOptionsKey({
22075
22326
  subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
22076
22327
  token: token,
@@ -22085,7 +22336,7 @@ var PlanPicker = function () {
22085
22336
  });
22086
22337
  },
22087
22338
  enabled: !areSubscriptionsLoading,
22088
- }), priceListChangeOptions = _d.data, arePlanChangeOptionsLoading = _d.isLoading;
22339
+ }), priceListChangeOptions = _e.data, arePlanChangeOptionsLoading = _e.isLoading;
22089
22340
  // Handlers
22090
22341
  var onChangePriceList = useCallback(function (selectedPriceList) {
22091
22342
  if (isInPreviewMode)
@@ -22119,11 +22370,12 @@ var PlanManager = function (_a) {
22119
22370
  // Context
22120
22371
  var token = useToken();
22121
22372
  var apiHost = useContext(BunnyContext).apiHost;
22122
- var _b = useContext(SubscriptionsContext), isInPreviewMode = _b.isInPreviewMode, upgradingSubscription = _b.upgradingSubscription, setUpgradingSubscription = _b.setUpgradingSubscription, subscriptionUpgradeId = _b.subscriptionUpgradeId, setQuotePreviewData = _b.setQuotePreviewData, quotePreviewData = _b.quotePreviewData, className = _b.className;
22373
+ var _b = useContext(SubscriptionsContext), isInPreviewMode = _b.isInPreviewMode, upgradingSubscription = _b.upgradingSubscription, setUpgradingSubscription = _b.setUpgradingSubscription, subscriptionUpgradeId = _b.subscriptionUpgradeId, className = _b.className;
22374
+ var _c = useContext(QuotePreviewContext), quotePreviewData = _c.quotePreviewData, setQuotePreviewData = _c.setQuotePreviewData;
22123
22375
  // Local state
22124
- var _c = useState(), editingQuoteData = _c[0], setEditingQuoteData = _c[1];
22125
- var _d = useState(false), payModalVisible = _d[0], setPayModalVisible = _d[1];
22126
- var _e = useState(false), isSticky = _e[0], setIsSticky = _e[1];
22376
+ var _d = useState(), editingQuoteData = _d[0], setEditingQuoteData = _d[1];
22377
+ var _e = useState(false), payModalVisible = _e[0], setPayModalVisible = _e[1];
22378
+ var _f = useState(false), isSticky = _f[0], setIsSticky = _f[1];
22127
22379
  var stickyRef = useRef(null);
22128
22380
  // Hooks
22129
22381
  var queryClient = useQueryClient();
@@ -22134,14 +22386,14 @@ var PlanManager = function (_a) {
22134
22386
  apiHost: apiHost,
22135
22387
  }).defaultPaymentMethod;
22136
22388
  // Queries
22137
- var _f = useQuery({
22389
+ var _g = useQuery({
22138
22390
  queryKey: QueryKeyFactory.default.createTableKey({
22139
22391
  pluralType: 'subscriptions',
22140
22392
  token: token,
22141
22393
  }),
22142
22394
  queryFn: function () { return getSubscriptions({ isInPreviewMode: isInPreviewMode, token: token, apiHost: apiHost }); },
22143
22395
  enabled: false,
22144
- }), subscriptions = _f.data, subscriptionsAreLoading = _f.isLoading;
22396
+ }), subscriptions = _g.data, subscriptionsAreLoading = _g.isLoading;
22145
22397
  var quote = useQuery({
22146
22398
  queryKey: QueryKeyFactory.default.createObjectKey({
22147
22399
  id: editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id,
@@ -22761,27 +23013,6 @@ var DrawerHeader = function (_a) {
22761
23013
  return (jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4" }, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-between bunny-gap-2" }, { children: [jsx(Text$3, __assign({ className: "bunny-text-xl", style: { fontWeight: 400 } }, { children: title })), onClose ? (jsx("button", __assign({ id: "closePayment", onClick: onClose, className: closeButtonClassName }, { children: jsx(CloseOutlined, {}) }))) : null] })), description && jsx("div", __assign({ className: "bunny-text-xs" }, { children: description }))] })));
22762
23014
  };
22763
23015
 
22764
- var QUOTE_CHARGE_CREATE = "\nmutation QuoteChargeCreate ($quoteChangeId: ID!, $startDate: ISO8601Date!, $endDate: ISO8601Date, $priceListChargeId: ID, $subscriptionChargeId: ID, $price: Float, $quantity: Int) {\n quoteChargeCreate(\n endDate: $endDate\n price: $price\n priceListChargeId: $priceListChargeId\n quantity: $quantity\n quoteChangeId: $quoteChangeId\n startDate: $startDate\n subscriptionChargeId: $subscriptionChargeId\n ) {\n quoteCharge {\n quoteChange {\n id\n quoteId\n }\n }\n }\n}\n\n";
22765
- var quoteChargeCreate = function (_a) {
22766
- var
22767
- // endDate,
22768
- price = _a.price, priceListChargeId = _a.priceListChargeId, quantity = _a.quantity, quoteChangeId = _a.quoteChangeId, startDate = _a.startDate, subscriptionChargeId = _a.subscriptionChargeId, token = _a.token, apiHost = _a.apiHost;
22769
- return gqlRequest({
22770
- query: QUOTE_CHARGE_CREATE,
22771
- vars: {
22772
- // endDate,
22773
- price: price,
22774
- priceListChargeId: priceListChargeId,
22775
- quantity: quantity,
22776
- quoteChangeId: quoteChangeId,
22777
- startDate: startDate,
22778
- subscriptionChargeId: subscriptionChargeId,
22779
- },
22780
- apiHost: apiHost,
22781
- token: token,
22782
- });
22783
- };
22784
-
22785
23016
  var formatDateForApi = function (date) {
22786
23017
  if (typeof date === 'string')
22787
23018
  date = dayjs(date);
@@ -23015,7 +23246,7 @@ var QuantityChangeDrawerDesktop = function (_a) {
23015
23246
  }, [open]);
23016
23247
  if (!openLocal)
23017
23248
  return null;
23018
- return (jsxs(Drawer, __assign({ closeIcon: null, destroyOnClose: true, onClose: onClose, open: open, styles: isMobile
23249
+ return (jsxs(Drawer, __assign({ closeIcon: null, destroyOnHidden: true, onClose: onClose, open: open, styles: isMobile
23019
23250
  ? {
23020
23251
  body: {
23021
23252
  padding: '1rem',
@@ -23093,8 +23324,7 @@ var SubscriptionsWrapper = function (_a) {
23093
23324
  var styles = __assign(__assign({}, defaultStyles), userStyles);
23094
23325
  var _f = useState(undefined), upgradingSubscription = _f[0], setUpgradingSubscription = _f[1];
23095
23326
  var _g = useState(undefined), updatingChargeQuantityId = _g[0], setUpdatingChargeQuantityId = _g[1];
23096
- var _h = useState(undefined), quotePreviewData = _h[0], setQuotePreviewData = _h[1];
23097
- var _j = useState(null), subscriptionUpgradeId = _j[0], setSubscriptionUpgradeId = _j[1];
23327
+ var _h = useState(null), subscriptionUpgradeId = _h[0], setSubscriptionUpgradeId = _h[1];
23098
23328
  return (jsx(SubscriptionsContext.Provider, __assign({ value: {
23099
23329
  gap: styles.gap,
23100
23330
  shadow: styles.shadow,
@@ -23107,11 +23337,9 @@ var SubscriptionsWrapper = function (_a) {
23107
23337
  setUpgradingSubscription: setUpgradingSubscription,
23108
23338
  updatingChargeQuantityId: updatingChargeQuantityId,
23109
23339
  setUpdatingChargeQuantityId: setUpdatingChargeQuantityId,
23110
- quotePreviewData: quotePreviewData,
23111
- setQuotePreviewData: setQuotePreviewData,
23112
23340
  subscriptionUpgradeId: subscriptionUpgradeId,
23113
23341
  setSubscriptionUpgradeId: setSubscriptionUpgradeId,
23114
- } }, { children: jsx(Subscriptions, { handlePortalErrors: handlePortalErrors, companyName: companyName, noSubscriptionsComponent: noSubscriptionsComponent, hideTitle: hideTitle, hideExpiredToggle: hideExpiredToggle }) })));
23342
+ } }, { children: jsx(QuotePreviewProvider, { children: jsx(Subscriptions, { handlePortalErrors: handlePortalErrors, companyName: companyName, noSubscriptionsComponent: noSubscriptionsComponent, hideTitle: hideTitle, hideExpiredToggle: hideExpiredToggle }) }) })));
23115
23343
  };
23116
23344
  var Subscriptions = function (_a) {
23117
23345
  var handlePortalErrors = _a.handlePortalErrors, companyName = _a.companyName, noSubscriptionsComponent = _a.noSubscriptionsComponent, hideTitle = _a.hideTitle, hideExpiredToggle = _a.hideExpiredToggle;