@kumori/aurora-wui-components 0.0.299 → 0.0.300-dev4447.17

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 (80) hide show
  1. package/dist/components/axebow-border-container/axebow-border-container.d.ts +11 -0
  2. package/dist/components/axebow-border-container/axebow-border-container.d.ts.map +1 -0
  3. package/dist/components/axebow-boxed-input/axebow-boxed-input.d.ts +31 -0
  4. package/dist/components/axebow-boxed-input/axebow-boxed-input.d.ts.map +1 -0
  5. package/dist/components/axebow-call-to-action-feature/axebow-call-to-action-feature.d.ts +9 -1
  6. package/dist/components/axebow-call-to-action-feature/axebow-call-to-action-feature.d.ts.map +1 -1
  7. package/dist/components/axebow-call-to-action-row/axebow-call-to-action-row.d.ts +1 -0
  8. package/dist/components/axebow-call-to-action-row/axebow-call-to-action-row.d.ts.map +1 -1
  9. package/dist/components/axebow-call-to-action-row/call-to-action-notification.d.ts +44 -0
  10. package/dist/components/axebow-call-to-action-row/call-to-action-notification.d.ts.map +1 -0
  11. package/dist/components/axebow-carousel/axebow-carousel.d.ts +25 -0
  12. package/dist/components/axebow-carousel/axebow-carousel.d.ts.map +1 -0
  13. package/dist/components/axebow-channel-config-panel/axebow-channel-config-panel.d.ts.map +1 -1
  14. package/dist/components/axebow-copy-icon/axebow-copy-icon.d.ts +20 -0
  15. package/dist/components/axebow-copy-icon/axebow-copy-icon.d.ts.map +1 -0
  16. package/dist/components/axebow-cta-dialog/axebow-cta-dialog.d.ts +2 -1
  17. package/dist/components/axebow-cta-dialog/axebow-cta-dialog.d.ts.map +1 -1
  18. package/dist/components/axebow-delete-data-popup/axebow-delete-data-popup.d.ts +35 -0
  19. package/dist/components/axebow-delete-data-popup/axebow-delete-data-popup.d.ts.map +1 -0
  20. package/dist/components/axebow-deploy-summary/axebow-deploy-summary.d.ts +2 -2
  21. package/dist/components/axebow-deploy-summary/axebow-deploy-summary.d.ts.map +1 -1
  22. package/dist/components/axebow-header/axebow-header.d.ts +0 -3
  23. package/dist/components/axebow-header/axebow-header.d.ts.map +1 -1
  24. package/dist/components/axebow-header/parts/axebow-header-actions.d.ts +0 -4
  25. package/dist/components/axebow-header/parts/axebow-header-actions.d.ts.map +1 -1
  26. package/dist/components/axebow-learning-center/axebow-learning-center.d.ts +17 -0
  27. package/dist/components/axebow-learning-center/axebow-learning-center.d.ts.map +1 -0
  28. package/dist/components/axebow-mobile-warning-banner/axebow-mobile-warning-banner.d.ts +11 -0
  29. package/dist/components/axebow-mobile-warning-banner/axebow-mobile-warning-banner.d.ts.map +1 -0
  30. package/dist/components/axebow-modal/axebow-modal.d.ts +3 -0
  31. package/dist/components/axebow-modal/axebow-modal.d.ts.map +1 -1
  32. package/dist/components/axebow-page-actions/axebow-page-actions.d.ts +20 -0
  33. package/dist/components/axebow-page-actions/axebow-page-actions.d.ts.map +1 -0
  34. package/dist/components/axebow-paginated-table/axebow-paginated-table.d.ts +22 -0
  35. package/dist/components/axebow-paginated-table/axebow-paginated-table.d.ts.map +1 -0
  36. package/dist/components/axebow-pem-dialog/axebow-pem-dialog.d.ts +29 -0
  37. package/dist/components/axebow-pem-dialog/axebow-pem-dialog.d.ts.map +1 -0
  38. package/dist/components/axebow-plan-providers-modal/axebow-plan-providers-modal.d.ts +16 -0
  39. package/dist/components/axebow-plan-providers-modal/axebow-plan-providers-modal.d.ts.map +1 -0
  40. package/dist/components/axebow-premium-plan-popup/axebow-premium-plan-popup.d.ts +30 -0
  41. package/dist/components/axebow-premium-plan-popup/axebow-premium-plan-popup.d.ts.map +1 -0
  42. package/dist/components/axebow-registry-selector/axebow-registry-selector.d.ts +2 -0
  43. package/dist/components/axebow-registry-selector/axebow-registry-selector.d.ts.map +1 -1
  44. package/dist/components/axebow-runtime-zip-dialog/axebow-runtime-zip-dialog.d.ts.map +1 -1
  45. package/dist/components/axebow-summary/axebow-summary-card.d.ts +4 -0
  46. package/dist/components/axebow-summary/axebow-summary-card.d.ts.map +1 -1
  47. package/dist/components/axebow-tenant-card/axebow-tenant-card.d.ts +5 -0
  48. package/dist/components/axebow-tenant-card/axebow-tenant-card.d.ts.map +1 -1
  49. package/dist/components/axebow-tenant-resource-table/axebow-tenant-resource-table.d.ts +4 -0
  50. package/dist/components/axebow-tenant-resource-table/axebow-tenant-resource-table.d.ts.map +1 -1
  51. package/dist/components/axebow-ul/axebow-ul.d.ts +8 -0
  52. package/dist/components/axebow-ul/axebow-ul.d.ts.map +1 -0
  53. package/dist/components/axebow-white-container/axebow-white-container.d.ts +9 -0
  54. package/dist/components/axebow-white-container/axebow-white-container.d.ts.map +1 -0
  55. package/dist/components/cards/axebow-base-card.d.ts +6 -0
  56. package/dist/components/cards/axebow-base-card.d.ts.map +1 -1
  57. package/dist/components/cards/card.models.d.ts +3 -0
  58. package/dist/components/cards/card.models.d.ts.map +1 -1
  59. package/dist/components/cards/parts/axebow-card-footer.d.ts +3 -0
  60. package/dist/components/cards/parts/axebow-card-footer.d.ts.map +1 -1
  61. package/dist/components/cards/parts/axebow-card-stat-item.d.ts +5 -0
  62. package/dist/components/cards/parts/axebow-card-stat-item.d.ts.map +1 -1
  63. package/dist/components/cards/parts/axebow-card-stats-row.d.ts +1 -1
  64. package/dist/components/cards/parts/axebow-card-stats-row.d.ts.map +1 -1
  65. package/dist/components/cards/parts/axebow-card-status.d.ts +5 -0
  66. package/dist/components/cards/parts/axebow-card-status.d.ts.map +1 -1
  67. package/dist/components/cards/parts/axebow-role-tooltip.d.ts +1 -0
  68. package/dist/components/cards/parts/axebow-role-tooltip.d.ts.map +1 -1
  69. package/dist/components/usage-chart/usage-chart.d.ts +15 -0
  70. package/dist/components/usage-chart/usage-chart.d.ts.map +1 -0
  71. package/dist/components/wizard-page-layout/wizard-page-layout.d.ts +22 -0
  72. package/dist/components/wizard-page-layout/wizard-page-layout.d.ts.map +1 -0
  73. package/dist/index.d.ts +17 -0
  74. package/dist/index.d.ts.map +1 -1
  75. package/dist/index.js +2759 -275
  76. package/dist/index.js.map +1 -1
  77. package/dist/playground/schemas/axebow-call-to-action-feature.schema.d.ts.map +1 -1
  78. package/dist/playground/schemas/axebow-role-tooltip.schema.d.ts.map +1 -1
  79. package/dist/playground/schemas/axebow-summary-card.schema.d.ts.map +1 -1
  80. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -218,7 +218,7 @@ var STATUS_COLORS = {
218
218
  };
219
219
  //#endregion
220
220
  //#region src/styles/tailwind.css?inline
221
- var tailwind_default = "/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n@layer properties {\n @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {\n *, :before, :after, ::backdrop {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-rotate-x: initial;\n --tw-rotate-y: initial;\n --tw-rotate-z: initial;\n --tw-skew-x: initial;\n --tw-skew-y: initial;\n --tw-space-y-reverse: 0;\n --tw-border-style: solid;\n --tw-leading: initial;\n --tw-font-weight: initial;\n --tw-tracking: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-outline-style: solid;\n --tw-blur: initial;\n --tw-brightness: initial;\n --tw-contrast: initial;\n --tw-grayscale: initial;\n --tw-hue-rotate: initial;\n --tw-invert: initial;\n --tw-opacity: initial;\n --tw-saturate: initial;\n --tw-sepia: initial;\n --tw-drop-shadow: initial;\n --tw-drop-shadow-color: initial;\n --tw-drop-shadow-alpha: 100%;\n --tw-drop-shadow-size: initial;\n --tw-backdrop-blur: initial;\n --tw-backdrop-brightness: initial;\n --tw-backdrop-contrast: initial;\n --tw-backdrop-grayscale: initial;\n --tw-backdrop-hue-rotate: initial;\n --tw-backdrop-invert: initial;\n --tw-backdrop-opacity: initial;\n --tw-backdrop-saturate: initial;\n --tw-backdrop-sepia: initial;\n --tw-duration: initial;\n --tw-ease: initial;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-scale-z: 1;\n }\n }\n}\n\n@layer theme {\n :root, :host {\n --font-sans: \"Open Sans\", sans-serif;\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n \"Courier New\", monospace;\n --color-red-50: oklch(97.1% .013 17.38);\n --color-red-100: oklch(93.6% .032 17.717);\n --color-red-300: oklch(80.8% .114 19.571);\n --color-red-800: oklch(44.4% .177 26.899);\n --color-yellow-600: oklch(68.1% .162 75.834);\n --color-yellow-800: oklch(47.6% .114 61.907);\n --color-green-50: oklch(98.2% .018 155.826);\n --color-green-200: oklch(92.5% .084 155.995);\n --color-green-600: oklch(62.7% .194 149.214);\n --color-green-800: oklch(44.8% .119 151.328);\n --color-sky-50: oklch(97.7% .013 236.62);\n --color-sky-100: oklch(95.1% .026 236.824);\n --color-blue-50: oklch(97% .014 254.604);\n --color-blue-100: oklch(93.2% .032 255.585);\n --color-blue-200: oklch(88.2% .059 254.128);\n --color-blue-500: oklch(62.3% .214 259.815);\n --color-blue-600: oklch(54.6% .245 262.881);\n --color-blue-800: oklch(42.4% .199 265.638);\n --color-gray-50: oklch(98.5% .002 247.839);\n --color-gray-100: oklch(96.7% .003 264.542);\n --color-gray-200: oklch(92.8% .006 264.531);\n --color-gray-300: oklch(87.2% .01 258.338);\n --color-gray-400: oklch(70.7% .022 261.325);\n --color-gray-500: oklch(55.1% .027 264.364);\n --color-gray-600: oklch(44.6% .03 256.802);\n --color-gray-700: oklch(37.3% .034 259.733);\n --color-black: #000;\n --color-white: #fff;\n --spacing: .25rem;\n --text-xs: .625rem;\n --text-xs--line-height: .875rem;\n --text-sm: .75rem;\n --text-sm--line-height: 1rem;\n --text-base: .875rem;\n --text-base--line-height: 1.25rem;\n --text-lg: 1.125rem;\n --text-lg--line-height: 1.75rem;\n --text-xl: 1.25rem;\n --text-xl--line-height: 1.75rem;\n --text-3xl: 1.875rem;\n --text-5xl: 3rem;\n --font-weight-light: 300;\n --font-weight-normal: 400;\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --font-weight-black: 900;\n --tracking-wider: .05em;\n --leading-tight: 1.25;\n --leading-snug: 1.375;\n --leading-relaxed: 1.625;\n --radius-sm: .25rem;\n --radius-md: .375rem;\n --radius-lg: .5rem;\n --radius-xl: .75rem;\n --ease-out: cubic-bezier(0, 0, .2, 1);\n --ease-in-out: cubic-bezier(.4, 0, .2, 1);\n --animate-spin: spin 1s linear infinite;\n --default-transition-duration: .15s;\n --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n --default-font-family: var(--font-sans);\n --default-mono-font-family: var(--font-mono);\n --text-md: 1rem;\n --text-md--line-height: 1.5rem;\n --spacing-18: 4.5rem;\n --spacing-30: 7.5rem;\n --spacing-38: 9.5rem;\n --spacing-43: 10.75rem;\n --spacing-50: 12.5rem;\n --spacing-75: 18.75rem;\n --spacing-100: 25rem;\n --spacing-120: 30rem;\n --spacing-150: 37.5rem;\n }\n}\n\n@layer base {\n *, :after, :before, ::backdrop {\n box-sizing: border-box;\n border: 0 solid;\n margin: 0;\n padding: 0;\n }\n\n ::file-selector-button {\n box-sizing: border-box;\n border: 0 solid;\n margin: 0;\n padding: 0;\n }\n\n html, :host {\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n line-height: 1.5;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n -webkit-text-decoration: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n\n b, strong {\n font-weight: bolder;\n }\n\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n\n small {\n font-size: 80%;\n }\n\n sub, sup {\n vertical-align: baseline;\n font-size: 75%;\n line-height: 0;\n position: relative;\n }\n\n sub {\n bottom: -.25em;\n }\n\n sup {\n top: -.5em;\n }\n\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n\n :-moz-focusring {\n outline: auto;\n }\n\n progress {\n vertical-align: baseline;\n }\n\n summary {\n display: list-item;\n }\n\n ol, ul, menu {\n list-style: none;\n }\n\n img, svg, video, canvas, audio, iframe, embed, object {\n vertical-align: middle;\n display: block;\n }\n\n img, video {\n max-width: 100%;\n height: auto;\n }\n\n button, input, select, optgroup, textarea {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n opacity: 1;\n background-color: #0000;\n border-radius: 0;\n }\n\n ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n opacity: 1;\n background-color: #0000;\n border-radius: 0;\n }\n\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n\n ::placeholder {\n opacity: 1;\n }\n\n @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentColor;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n ::placeholder {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n\n textarea {\n resize: vertical;\n }\n\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n\n ::-webkit-datetime-edit {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-year-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-month-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-day-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-hour-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-minute-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-second-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-millisecond-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n\n ::-webkit-calendar-picker-indicator {\n line-height: 1;\n }\n\n :-moz-ui-invalid {\n box-shadow: none;\n }\n\n button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]) {\n appearance: button;\n }\n\n ::file-selector-button {\n appearance: button;\n }\n\n ::-webkit-inner-spin-button {\n height: auto;\n }\n\n ::-webkit-outer-spin-button {\n height: auto;\n }\n\n [hidden]:where(:not([hidden=\"until-found\"])) {\n display: none !important;\n }\n}\n\n@layer components;\n\n@layer utilities {\n .pointer-events-auto {\n pointer-events: auto;\n }\n\n .pointer-events-none {\n pointer-events: none;\n }\n\n .visible {\n visibility: visible;\n }\n\n .absolute {\n position: absolute;\n }\n\n .fixed {\n position: fixed;\n }\n\n .relative {\n position: relative;\n }\n\n .static {\n position: static;\n }\n\n .sticky {\n position: sticky;\n }\n\n .-top-2\\.25 {\n top: calc(var(--spacing) * -2.25);\n }\n\n .top-0 {\n top: 0;\n }\n\n .top-1 {\n top: var(--spacing);\n }\n\n .top-1\\/2 {\n top: 50%;\n }\n\n .top-3 {\n top: calc(var(--spacing) * 3);\n }\n\n .top-25 {\n top: calc(var(--spacing) * 25);\n }\n\n .top-\\[-7px\\] {\n top: -7px;\n }\n\n .top-\\[0\\.9375rem\\] {\n top: .9375rem;\n }\n\n .top-full {\n top: 100%;\n }\n\n .-right-2\\.25 {\n right: calc(var(--spacing) * -2.25);\n }\n\n .right-0 {\n right: 0;\n }\n\n .right-0\\.5 {\n right: calc(var(--spacing) * .5);\n }\n\n .right-1 {\n right: var(--spacing);\n }\n\n .right-1\\.5 {\n right: calc(var(--spacing) * 1.5);\n }\n\n .right-3 {\n right: calc(var(--spacing) * 3);\n }\n\n .bottom-0 {\n bottom: 0;\n }\n\n .bottom-0\\.5 {\n bottom: calc(var(--spacing) * .5);\n }\n\n .bottom-full {\n bottom: 100%;\n }\n\n .left-0 {\n left: 0;\n }\n\n .left-1\\/2 {\n left: 50%;\n }\n\n .left-\\[-7px\\] {\n left: -7px;\n }\n\n .left-\\[3\\.625rem\\] {\n left: 3.625rem;\n }\n\n .left-\\[calc\\(100\\%\\+10px\\)\\] {\n left: calc(100% + 10px);\n }\n\n .z-5 {\n z-index: 5;\n }\n\n .z-10 {\n z-index: 10;\n }\n\n .z-50 {\n z-index: 50;\n }\n\n .z-2000 {\n z-index: 2000;\n }\n\n .z-2001 {\n z-index: 2001;\n }\n\n .z-9999 {\n z-index: 9999;\n }\n\n .row-1 {\n grid-row: 1;\n }\n\n .row-2 {\n grid-row: 2;\n }\n\n .container {\n width: 100%;\n }\n\n @media (min-width: 40rem) {\n .container {\n max-width: 40rem;\n }\n }\n\n @media (min-width: 48rem) {\n .container {\n max-width: 48rem;\n }\n }\n\n @media (min-width: 64rem) {\n .container {\n max-width: 64rem;\n }\n }\n\n @media (min-width: 80rem) {\n .container {\n max-width: 80rem;\n }\n }\n\n @media (min-width: 96rem) {\n .container {\n max-width: 96rem;\n }\n }\n\n .m-0 {\n margin: 0;\n }\n\n .mx-2 {\n margin-inline: calc(var(--spacing) * 2);\n }\n\n .mx-6 {\n margin-inline: calc(var(--spacing) * 6);\n }\n\n .mx-12 {\n margin-inline: calc(var(--spacing) * 12);\n }\n\n .mx-auto {\n margin-inline: auto;\n }\n\n .my-0\\.5 {\n margin-block: calc(var(--spacing) * .5);\n }\n\n .my-1\\.5 {\n margin-block: calc(var(--spacing) * 1.5);\n }\n\n .my-2 {\n margin-block: calc(var(--spacing) * 2);\n }\n\n .my-4 {\n margin-block: calc(var(--spacing) * 4);\n }\n\n .ms-auto {\n margin-inline-start: auto;\n }\n\n .mt-0 {\n margin-top: 0;\n }\n\n .mt-1 {\n margin-top: var(--spacing);\n }\n\n .mt-1\\.5 {\n margin-top: calc(var(--spacing) * 1.5);\n }\n\n .mt-1\\.75 {\n margin-top: calc(var(--spacing) * 1.75);\n }\n\n .mt-2 {\n margin-top: calc(var(--spacing) * 2);\n }\n\n .mt-2\\.25 {\n margin-top: calc(var(--spacing) * 2.25);\n }\n\n .mt-3 {\n margin-top: calc(var(--spacing) * 3);\n }\n\n .mt-4 {\n margin-top: calc(var(--spacing) * 4);\n }\n\n .mt-4\\.5 {\n margin-top: calc(var(--spacing) * 4.5);\n }\n\n .mt-5 {\n margin-top: calc(var(--spacing) * 5);\n }\n\n .mt-6 {\n margin-top: calc(var(--spacing) * 6);\n }\n\n .mt-6\\.75 {\n margin-top: calc(var(--spacing) * 6.75);\n }\n\n .mt-8 {\n margin-top: calc(var(--spacing) * 8);\n }\n\n .mr-0\\.5 {\n margin-right: calc(var(--spacing) * .5);\n }\n\n .mr-1 {\n margin-right: var(--spacing);\n }\n\n .mr-2 {\n margin-right: calc(var(--spacing) * 2);\n }\n\n .mr-4 {\n margin-right: calc(var(--spacing) * 4);\n }\n\n .mr-8 {\n margin-right: calc(var(--spacing) * 8);\n }\n\n .mb-1 {\n margin-bottom: var(--spacing);\n }\n\n .mb-1\\.5 {\n margin-bottom: calc(var(--spacing) * 1.5);\n }\n\n .mb-2 {\n margin-bottom: calc(var(--spacing) * 2);\n }\n\n .mb-3 {\n margin-bottom: calc(var(--spacing) * 3);\n }\n\n .mb-4 {\n margin-bottom: calc(var(--spacing) * 4);\n }\n\n .mb-6 {\n margin-bottom: calc(var(--spacing) * 6);\n }\n\n .mb-6\\.5 {\n margin-bottom: calc(var(--spacing) * 6.5);\n }\n\n .mb-8 {\n margin-bottom: calc(var(--spacing) * 8);\n }\n\n .ml-0\\.5 {\n margin-left: calc(var(--spacing) * .5);\n }\n\n .ml-1 {\n margin-left: var(--spacing);\n }\n\n .ml-2 {\n margin-left: calc(var(--spacing) * 2);\n }\n\n .ml-4 {\n margin-left: calc(var(--spacing) * 4);\n }\n\n .ml-12 {\n margin-left: calc(var(--spacing) * 12);\n }\n\n .ml-\\[0\\.5rem\\] {\n margin-left: .5rem;\n }\n\n .ml-\\[1\\.265625rem\\] {\n margin-left: 1.26563rem;\n }\n\n .ml-auto {\n margin-left: auto;\n }\n\n .box-border {\n box-sizing: border-box;\n }\n\n .box-content {\n box-sizing: content-box;\n }\n\n .line-clamp-1 {\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n overflow: hidden;\n }\n\n .line-clamp-2 {\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n overflow: hidden;\n }\n\n .line-clamp-11 {\n -webkit-line-clamp: 11;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n overflow: hidden;\n }\n\n .block {\n display: block;\n }\n\n .contents {\n display: contents;\n }\n\n .flex {\n display: flex;\n }\n\n .grid {\n display: grid;\n }\n\n .hidden {\n display: none;\n }\n\n .inline {\n display: inline;\n }\n\n .inline-block {\n display: inline-block;\n }\n\n .inline-flex {\n display: inline-flex;\n }\n\n .table {\n display: table;\n }\n\n .aspect-square {\n aspect-ratio: 1;\n }\n\n .h-2 {\n height: calc(var(--spacing) * 2);\n }\n\n .h-2\\.25 {\n height: calc(var(--spacing) * 2.25);\n }\n\n .h-2\\.75 {\n height: calc(var(--spacing) * 2.75);\n }\n\n .h-3 {\n height: calc(var(--spacing) * 3);\n }\n\n .h-3\\.5 {\n height: calc(var(--spacing) * 3.5);\n }\n\n .h-4 {\n height: calc(var(--spacing) * 4);\n }\n\n .h-4\\.5 {\n height: calc(var(--spacing) * 4.5);\n }\n\n .h-4\\.25 {\n height: calc(var(--spacing) * 4.25);\n }\n\n .h-4\\.75 {\n height: calc(var(--spacing) * 4.75);\n }\n\n .h-5 {\n height: calc(var(--spacing) * 5);\n }\n\n .h-5\\.5 {\n height: calc(var(--spacing) * 5.5);\n }\n\n .h-5\\.25 {\n height: calc(var(--spacing) * 5.25);\n }\n\n .h-6 {\n height: calc(var(--spacing) * 6);\n }\n\n .h-6\\.75 {\n height: calc(var(--spacing) * 6.75);\n }\n\n .h-7 {\n height: calc(var(--spacing) * 7);\n }\n\n .h-7\\.5 {\n height: calc(var(--spacing) * 7.5);\n }\n\n .h-7\\.25 {\n height: calc(var(--spacing) * 7.25);\n }\n\n .h-8 {\n height: calc(var(--spacing) * 8);\n }\n\n .h-8\\.75 {\n height: calc(var(--spacing) * 8.75);\n }\n\n .h-9 {\n height: calc(var(--spacing) * 9);\n }\n\n .h-9\\.5 {\n height: calc(var(--spacing) * 9.5);\n }\n\n .h-9\\.75 {\n height: calc(var(--spacing) * 9.75);\n }\n\n .h-10 {\n height: calc(var(--spacing) * 10);\n }\n\n .h-10\\.5 {\n height: calc(var(--spacing) * 10.5);\n }\n\n .h-10\\.25 {\n height: calc(var(--spacing) * 10.25);\n }\n\n .h-11 {\n height: calc(var(--spacing) * 11);\n }\n\n .h-11\\.5 {\n height: calc(var(--spacing) * 11.5);\n }\n\n .h-11\\.25 {\n height: calc(var(--spacing) * 11.25);\n }\n\n .h-12 {\n height: calc(var(--spacing) * 12);\n }\n\n .h-12\\.5 {\n height: calc(var(--spacing) * 12.5);\n }\n\n .h-12\\.25 {\n height: calc(var(--spacing) * 12.25);\n }\n\n .h-12\\.75 {\n height: calc(var(--spacing) * 12.75);\n }\n\n .h-14 {\n height: calc(var(--spacing) * 14);\n }\n\n .h-14\\.25 {\n height: calc(var(--spacing) * 14.25);\n }\n\n .h-15\\.5 {\n height: calc(var(--spacing) * 15.5);\n }\n\n .h-16 {\n height: calc(var(--spacing) * 16);\n }\n\n .h-17\\.75 {\n height: calc(var(--spacing) * 17.75);\n }\n\n .h-19\\.75 {\n height: calc(var(--spacing) * 19.75);\n }\n\n .h-20 {\n height: calc(var(--spacing) * 20);\n }\n\n .h-20\\.75 {\n height: calc(var(--spacing) * 20.75);\n }\n\n .h-21\\.25 {\n height: calc(var(--spacing) * 21.25);\n }\n\n .h-22\\.75 {\n height: calc(var(--spacing) * 22.75);\n }\n\n .h-32\\.25 {\n height: calc(var(--spacing) * 32.25);\n }\n\n .h-40\\.75 {\n height: calc(var(--spacing) * 40.75);\n }\n\n .h-45\\.5 {\n height: calc(var(--spacing) * 45.5);\n }\n\n .h-49\\.5 {\n height: calc(var(--spacing) * 49.5);\n }\n\n .h-52\\.75 {\n height: calc(var(--spacing) * 52.75);\n }\n\n .h-57\\.5 {\n height: calc(var(--spacing) * 57.5);\n }\n\n .h-77\\.25 {\n height: calc(var(--spacing) * 77.25);\n }\n\n .h-79 {\n height: calc(var(--spacing) * 79);\n }\n\n .h-83\\.25 {\n height: calc(var(--spacing) * 83.25);\n }\n\n .h-89\\.25 {\n height: calc(var(--spacing) * 89.25);\n }\n\n .h-102\\.25 {\n height: calc(var(--spacing) * 102.25);\n }\n\n .h-106\\.5 {\n height: calc(var(--spacing) * 106.5);\n }\n\n .h-112 {\n height: calc(var(--spacing) * 112);\n }\n\n .h-113\\.25 {\n height: calc(var(--spacing) * 113.25);\n }\n\n .h-\\[2\\.125rem\\] {\n height: 2.125rem;\n }\n\n .h-\\[8\\.26375rem\\] {\n height: 8.26375rem;\n }\n\n .h-auto {\n height: auto;\n }\n\n .h-fit {\n height: fit-content;\n }\n\n .h-full {\n height: 100%;\n }\n\n .h-px {\n height: 1px;\n }\n\n .h-screen {\n height: 100vh;\n }\n\n .max-h-40 {\n max-height: calc(var(--spacing) * 40);\n }\n\n .max-h-48 {\n max-height: calc(var(--spacing) * 48);\n }\n\n .max-h-75 {\n max-height: var(--spacing-75);\n }\n\n .max-h-111 {\n max-height: calc(var(--spacing) * 111);\n }\n\n .max-h-\\[40vh\\] {\n max-height: 40vh;\n }\n\n .max-h-full {\n max-height: 100%;\n }\n\n .min-h-0 {\n min-height: 0;\n }\n\n .min-h-5 {\n min-height: calc(var(--spacing) * 5);\n }\n\n .min-h-9 {\n min-height: calc(var(--spacing) * 9);\n }\n\n .min-h-12 {\n min-height: calc(var(--spacing) * 12);\n }\n\n .min-h-14 {\n min-height: calc(var(--spacing) * 14);\n }\n\n .min-h-14\\.5 {\n min-height: calc(var(--spacing) * 14.5);\n }\n\n .min-h-19 {\n min-height: calc(var(--spacing) * 19);\n }\n\n .min-h-35 {\n min-height: calc(var(--spacing) * 35);\n }\n\n .w-1\\.75 {\n width: calc(var(--spacing) * 1.75);\n }\n\n .w-1\\/3 {\n width: 33.3333%;\n }\n\n .w-2 {\n width: calc(var(--spacing) * 2);\n }\n\n .w-2\\.5 {\n width: calc(var(--spacing) * 2.5);\n }\n\n .w-3\\.5 {\n width: calc(var(--spacing) * 3.5);\n }\n\n .w-4 {\n width: calc(var(--spacing) * 4);\n }\n\n .w-4\\.5 {\n width: calc(var(--spacing) * 4.5);\n }\n\n .w-4\\.25 {\n width: calc(var(--spacing) * 4.25);\n }\n\n .w-5 {\n width: calc(var(--spacing) * 5);\n }\n\n .w-6 {\n width: calc(var(--spacing) * 6);\n }\n\n .w-7 {\n width: calc(var(--spacing) * 7);\n }\n\n .w-8 {\n width: calc(var(--spacing) * 8);\n }\n\n .w-9 {\n width: calc(var(--spacing) * 9);\n }\n\n .w-9\\.5 {\n width: calc(var(--spacing) * 9.5);\n }\n\n .w-10 {\n width: calc(var(--spacing) * 10);\n }\n\n .w-10\\.5 {\n width: calc(var(--spacing) * 10.5);\n }\n\n .w-11\\.5 {\n width: calc(var(--spacing) * 11.5);\n }\n\n .w-11\\.25 {\n width: calc(var(--spacing) * 11.25);\n }\n\n .w-12 {\n width: calc(var(--spacing) * 12);\n }\n\n .w-12\\.5 {\n width: calc(var(--spacing) * 12.5);\n }\n\n .w-12\\.75 {\n width: calc(var(--spacing) * 12.75);\n }\n\n .w-15\\.5 {\n width: calc(var(--spacing) * 15.5);\n }\n\n .w-15\\.25 {\n width: calc(var(--spacing) * 15.25);\n }\n\n .w-16 {\n width: calc(var(--spacing) * 16);\n }\n\n .w-17 {\n width: calc(var(--spacing) * 17);\n }\n\n .w-18 {\n width: var(--spacing-18);\n }\n\n .w-18\\.5 {\n width: calc(var(--spacing) * 18.5);\n }\n\n .w-18\\.75 {\n width: calc(var(--spacing) * 18.75);\n }\n\n .w-20 {\n width: calc(var(--spacing) * 20);\n }\n\n .w-20\\.5 {\n width: calc(var(--spacing) * 20.5);\n }\n\n .w-21\\.5 {\n width: calc(var(--spacing) * 21.5);\n }\n\n .w-22\\.25 {\n width: calc(var(--spacing) * 22.25);\n }\n\n .w-24 {\n width: calc(var(--spacing) * 24);\n }\n\n .w-24\\.75 {\n width: calc(var(--spacing) * 24.75);\n }\n\n .w-25 {\n width: calc(var(--spacing) * 25);\n }\n\n .w-25\\.5 {\n width: calc(var(--spacing) * 25.5);\n }\n\n .w-25\\.25 {\n width: calc(var(--spacing) * 25.25);\n }\n\n .w-26\\.25 {\n width: calc(var(--spacing) * 26.25);\n }\n\n .w-26\\.75 {\n width: calc(var(--spacing) * 26.75);\n }\n\n .w-27 {\n width: calc(var(--spacing) * 27);\n }\n\n .w-27\\.5 {\n width: calc(var(--spacing) * 27.5);\n }\n\n .w-28\\.25 {\n width: calc(var(--spacing) * 28.25);\n }\n\n .w-30 {\n width: var(--spacing-30);\n }\n\n .w-30\\.75 {\n width: calc(var(--spacing) * 30.75);\n }\n\n .w-33\\.25 {\n width: calc(var(--spacing) * 33.25);\n }\n\n .w-34\\.25 {\n width: calc(var(--spacing) * 34.25);\n }\n\n .w-35 {\n width: calc(var(--spacing) * 35);\n }\n\n .w-36 {\n width: calc(var(--spacing) * 36);\n }\n\n .w-37 {\n width: calc(var(--spacing) * 37);\n }\n\n .w-38 {\n width: var(--spacing-38);\n }\n\n .w-38\\.5 {\n width: calc(var(--spacing) * 38.5);\n }\n\n .w-39\\.5 {\n width: calc(var(--spacing) * 39.5);\n }\n\n .w-41 {\n width: calc(var(--spacing) * 41);\n }\n\n .w-41\\.75 {\n width: calc(var(--spacing) * 41.75);\n }\n\n .w-42 {\n width: calc(var(--spacing) * 42);\n }\n\n .w-44 {\n width: calc(var(--spacing) * 44);\n }\n\n .w-45 {\n width: calc(var(--spacing) * 45);\n }\n\n .w-47\\.75 {\n width: calc(var(--spacing) * 47.75);\n }\n\n .w-48 {\n width: calc(var(--spacing) * 48);\n }\n\n .w-48\\.5 {\n width: calc(var(--spacing) * 48.5);\n }\n\n .w-53 {\n width: calc(var(--spacing) * 53);\n }\n\n .w-53\\.25 {\n width: calc(var(--spacing) * 53.25);\n }\n\n .w-53\\.75 {\n width: calc(var(--spacing) * 53.75);\n }\n\n .w-56\\.5 {\n width: calc(var(--spacing) * 56.5);\n }\n\n .w-57\\.5 {\n width: calc(var(--spacing) * 57.5);\n }\n\n .w-58\\.75 {\n width: calc(var(--spacing) * 58.75);\n }\n\n .w-60\\.5 {\n width: calc(var(--spacing) * 60.5);\n }\n\n .w-62\\.5 {\n width: calc(var(--spacing) * 62.5);\n }\n\n .w-63\\.5 {\n width: calc(var(--spacing) * 63.5);\n }\n\n .w-66 {\n width: calc(var(--spacing) * 66);\n }\n\n .w-68 {\n width: calc(var(--spacing) * 68);\n }\n\n .w-70 {\n width: calc(var(--spacing) * 70);\n }\n\n .w-70\\.5 {\n width: calc(var(--spacing) * 70.5);\n }\n\n .w-71 {\n width: calc(var(--spacing) * 71);\n }\n\n .w-74\\.75 {\n width: calc(var(--spacing) * 74.75);\n }\n\n .w-87 {\n width: calc(var(--spacing) * 87);\n }\n\n .w-91 {\n width: calc(var(--spacing) * 91);\n }\n\n .w-92 {\n width: calc(var(--spacing) * 92);\n }\n\n .w-95 {\n width: calc(var(--spacing) * 95);\n }\n\n .w-99\\.75 {\n width: calc(var(--spacing) * 99.75);\n }\n\n .w-100 {\n width: var(--spacing-100);\n }\n\n .w-100\\.5 {\n width: calc(var(--spacing) * 100.5);\n }\n\n .w-102 {\n width: calc(var(--spacing) * 102);\n }\n\n .w-120 {\n width: var(--spacing-120);\n }\n\n .w-120\\.75 {\n width: calc(var(--spacing) * 120.75);\n }\n\n .w-121 {\n width: calc(var(--spacing) * 121);\n }\n\n .w-127\\.75 {\n width: calc(var(--spacing) * 127.75);\n }\n\n .w-130\\.25 {\n width: calc(var(--spacing) * 130.25);\n }\n\n .w-131 {\n width: calc(var(--spacing) * 131);\n }\n\n .w-139 {\n width: calc(var(--spacing) * 139);\n }\n\n .w-140\\.75 {\n width: calc(var(--spacing) * 140.75);\n }\n\n .w-144\\.75 {\n width: calc(var(--spacing) * 144.75);\n }\n\n .w-148\\.75 {\n width: calc(var(--spacing) * 148.75);\n }\n\n .w-186\\.5 {\n width: calc(var(--spacing) * 186.5);\n }\n\n .w-186\\.25 {\n width: calc(var(--spacing) * 186.25);\n }\n\n .w-194\\.25 {\n width: calc(var(--spacing) * 194.25);\n }\n\n .w-198\\.25 {\n width: calc(var(--spacing) * 198.25);\n }\n\n .w-270 {\n width: calc(var(--spacing) * 270);\n }\n\n .w-282 {\n width: calc(var(--spacing) * 282);\n }\n\n .w-286 {\n width: calc(var(--spacing) * 286);\n }\n\n .w-293\\.5 {\n width: calc(var(--spacing) * 293.5);\n }\n\n .w-\\[22\\.833125rem\\] {\n width: 22.8331rem;\n }\n\n .w-\\[calc\\(100\\%-10px\\)\\] {\n width: calc(100% - 10px);\n }\n\n .w-auto {\n width: auto;\n }\n\n .w-fit {\n width: fit-content;\n }\n\n .w-full {\n width: 100%;\n }\n\n .w-px {\n width: 1px;\n }\n\n .max-w-36 {\n max-width: calc(var(--spacing) * 36);\n }\n\n .max-w-38 {\n max-width: var(--spacing-38);\n }\n\n .max-w-43 {\n max-width: var(--spacing-43);\n }\n\n .max-w-44 {\n max-width: calc(var(--spacing) * 44);\n }\n\n .max-w-51\\.5 {\n max-width: calc(var(--spacing) * 51.5);\n }\n\n .max-w-65 {\n max-width: calc(var(--spacing) * 65);\n }\n\n .max-w-95 {\n max-width: calc(var(--spacing) * 95);\n }\n\n .max-w-194\\.25 {\n max-width: calc(var(--spacing) * 194.25);\n }\n\n .max-w-\\[33\\.125rem\\] {\n max-width: 33.125rem;\n }\n\n .max-w-full {\n max-width: 100%;\n }\n\n .min-w-0 {\n min-width: 0;\n }\n\n .min-w-4 {\n min-width: calc(var(--spacing) * 4);\n }\n\n .min-w-10 {\n min-width: calc(var(--spacing) * 10);\n }\n\n .min-w-20 {\n min-width: calc(var(--spacing) * 20);\n }\n\n .min-w-30 {\n min-width: var(--spacing-30);\n }\n\n .min-w-32 {\n min-width: calc(var(--spacing) * 32);\n }\n\n .min-w-36 {\n min-width: calc(var(--spacing) * 36);\n }\n\n .min-w-44 {\n min-width: calc(var(--spacing) * 44);\n }\n\n .min-w-50 {\n min-width: var(--spacing-50);\n }\n\n .min-w-53\\.25 {\n min-width: calc(var(--spacing) * 53.25);\n }\n\n .min-w-55 {\n min-width: calc(var(--spacing) * 55);\n }\n\n .min-w-105 {\n min-width: calc(var(--spacing) * 105);\n }\n\n .min-w-160 {\n min-width: calc(var(--spacing) * 160);\n }\n\n .min-w-\\[8\\.2rem\\] {\n min-width: 8.2rem;\n }\n\n .min-w-fit {\n min-width: fit-content;\n }\n\n .min-w-full {\n min-width: 100%;\n }\n\n .flex-1 {\n flex: 1;\n }\n\n .flex-shrink {\n flex-shrink: 1;\n }\n\n .shrink-0 {\n flex-shrink: 0;\n }\n\n .border-collapse {\n border-collapse: collapse;\n }\n\n .-translate-x-1 {\n --tw-translate-x: calc(var(--spacing) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .-translate-x-1\\/2 {\n --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .-translate-y-1\\/2 {\n --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .scale-\\[1\\.02\\] {\n scale: 1.02;\n }\n\n .rotate-180 {\n rotate: 180deg;\n }\n\n .transform {\n transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );\n }\n\n .animate-spin {\n animation: var(--animate-spin);\n }\n\n .cursor-default {\n cursor: default;\n }\n\n .cursor-grab {\n cursor: grab;\n }\n\n .cursor-not-allowed {\n cursor: not-allowed;\n }\n\n .cursor-pointer {\n cursor: pointer;\n }\n\n .cursor-text {\n cursor: text;\n }\n\n .touch-none {\n touch-action: none;\n }\n\n .resize {\n resize: both;\n }\n\n .appearance-none {\n appearance: none;\n }\n\n .grid-cols-\\[7\\.5rem_7\\.5rem_7\\.5rem\\] {\n grid-template-columns: 7.5rem 7.5rem 7.5rem;\n }\n\n .grid-cols-\\[minmax\\(4\\.875rem\\,auto\\)_auto_1fr_auto\\] {\n grid-template-columns: minmax(4.875rem, auto) auto 1fr auto;\n }\n\n .flex-col {\n flex-direction: column;\n }\n\n .flex-row {\n flex-direction: row;\n }\n\n .flex-wrap {\n flex-wrap: wrap;\n }\n\n .items-baseline {\n align-items: baseline;\n }\n\n .items-center {\n align-items: center;\n }\n\n .items-end {\n align-items: flex-end;\n }\n\n .items-start {\n align-items: flex-start;\n }\n\n .justify-between {\n justify-content: space-between;\n }\n\n .justify-center {\n justify-content: center;\n }\n\n .justify-end {\n justify-content: flex-end;\n }\n\n .gap-0 {\n gap: 0;\n }\n\n .gap-0\\.5 {\n gap: calc(var(--spacing) * .5);\n }\n\n .gap-1 {\n gap: var(--spacing);\n }\n\n .gap-1\\.5 {\n gap: calc(var(--spacing) * 1.5);\n }\n\n .gap-1\\.25 {\n gap: calc(var(--spacing) * 1.25);\n }\n\n .gap-2 {\n gap: calc(var(--spacing) * 2);\n }\n\n .gap-2\\.5 {\n gap: calc(var(--spacing) * 2.5);\n }\n\n .gap-2\\.25 {\n gap: calc(var(--spacing) * 2.25);\n }\n\n .gap-2\\.75 {\n gap: calc(var(--spacing) * 2.75);\n }\n\n .gap-3 {\n gap: calc(var(--spacing) * 3);\n }\n\n .gap-4 {\n gap: calc(var(--spacing) * 4);\n }\n\n .gap-5 {\n gap: calc(var(--spacing) * 5);\n }\n\n .gap-6 {\n gap: calc(var(--spacing) * 6);\n }\n\n .gap-8 {\n gap: calc(var(--spacing) * 8);\n }\n\n .gap-8\\.75 {\n gap: calc(var(--spacing) * 8.75);\n }\n\n .gap-12 {\n gap: calc(var(--spacing) * 12);\n }\n\n .gap-19 {\n gap: calc(var(--spacing) * 19);\n }\n\n .gap-\\[0\\.625rem\\] {\n gap: .625rem;\n }\n\n .gap-\\[0\\.53125rem\\] {\n gap: .53125rem;\n }\n\n .gap-\\[2\\%\\] {\n gap: 2%;\n }\n\n .gap-px {\n gap: 1px;\n }\n\n :where(.space-y-1 > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));\n margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));\n }\n\n :where(.space-y-2 > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));\n }\n\n :where(.space-y-3 > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));\n }\n\n .gap-x-2 {\n column-gap: calc(var(--spacing) * 2);\n }\n\n .gap-x-4 {\n column-gap: calc(var(--spacing) * 4);\n }\n\n .gap-x-6 {\n column-gap: calc(var(--spacing) * 6);\n }\n\n .gap-y-1 {\n row-gap: var(--spacing);\n }\n\n .self-end {\n align-self: flex-end;\n }\n\n .self-start {\n align-self: flex-start;\n }\n\n .truncate {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n }\n\n .overflow-auto {\n overflow: auto;\n }\n\n .overflow-hidden {\n overflow: hidden;\n }\n\n .overflow-visible {\n overflow: visible;\n }\n\n .overflow-x-auto {\n overflow-x: auto;\n }\n\n .overflow-x-hidden {\n overflow-x: hidden;\n }\n\n .overflow-y-auto {\n overflow-y: auto;\n }\n\n .overflow-y-hidden {\n overflow-y: hidden;\n }\n\n .rounded {\n border-radius: .25rem;\n }\n\n .rounded-full {\n border-radius: 3.40282e38px;\n }\n\n .rounded-lg {\n border-radius: var(--radius-lg);\n }\n\n .rounded-md {\n border-radius: var(--radius-md);\n }\n\n .rounded-none {\n border-radius: 0;\n }\n\n .rounded-none\\! {\n border-radius: 0 !important;\n }\n\n .rounded-sm {\n border-radius: var(--radius-sm);\n }\n\n .rounded-t-lg {\n border-top-left-radius: var(--radius-lg);\n border-top-right-radius: var(--radius-lg);\n }\n\n .rounded-t-md {\n border-top-left-radius: var(--radius-md);\n border-top-right-radius: var(--radius-md);\n }\n\n .rounded-t-xl {\n border-top-left-radius: var(--radius-xl);\n border-top-right-radius: var(--radius-xl);\n }\n\n .rounded-l-xl {\n border-top-left-radius: var(--radius-xl);\n border-bottom-left-radius: var(--radius-xl);\n }\n\n .rounded-tl-xl {\n border-top-left-radius: var(--radius-xl);\n }\n\n .rounded-r-md {\n border-top-right-radius: var(--radius-md);\n border-bottom-right-radius: var(--radius-md);\n }\n\n .rounded-tr-xl {\n border-top-right-radius: var(--radius-xl);\n }\n\n .rounded-b-lg {\n border-bottom-right-radius: var(--radius-lg);\n border-bottom-left-radius: var(--radius-lg);\n }\n\n .rounded-b-md {\n border-bottom-right-radius: var(--radius-md);\n border-bottom-left-radius: var(--radius-md);\n }\n\n .rounded-b-xl {\n border-bottom-right-radius: var(--radius-xl);\n border-bottom-left-radius: var(--radius-xl);\n }\n\n .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n\n .border-0 {\n border-style: var(--tw-border-style);\n border-width: 0;\n }\n\n .border-2 {\n border-style: var(--tw-border-style);\n border-width: 2px;\n }\n\n .border-x {\n border-inline-style: var(--tw-border-style);\n border-inline-width: 1px;\n }\n\n .border-t {\n border-top-style: var(--tw-border-style);\n border-top-width: 1px;\n }\n\n .border-t-0 {\n border-top-style: var(--tw-border-style);\n border-top-width: 0;\n }\n\n .border-t-4 {\n border-top-style: var(--tw-border-style);\n border-top-width: 4px;\n }\n\n .border-r {\n border-right-style: var(--tw-border-style);\n border-right-width: 1px;\n }\n\n .border-r-0 {\n border-right-style: var(--tw-border-style);\n border-right-width: 0;\n }\n\n .border-b {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n }\n\n .border-b-0 {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 0;\n }\n\n .border-b-2 {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 2px;\n }\n\n .border-l {\n border-left-style: var(--tw-border-style);\n border-left-width: 1px;\n }\n\n .border-l-0 {\n border-left-style: var(--tw-border-style);\n border-left-width: 0;\n }\n\n .border-l-4 {\n border-left-style: var(--tw-border-style);\n border-left-width: 4px;\n }\n\n .border-dashed {\n --tw-border-style: dashed;\n border-style: dashed;\n }\n\n .border-none {\n --tw-border-style: none;\n border-style: none;\n }\n\n .border-solid {\n --tw-border-style: solid;\n border-style: solid;\n }\n\n .border-\\(--axebow-border-gray\\) {\n border-color: var(--axebow-border-gray);\n }\n\n .border-\\(--axebow-dark-yellow\\) {\n border-color: var(--axebow-dark-yellow);\n }\n\n .border-\\(--axebow-error-border\\) {\n border-color: var(--axebow-error-border);\n }\n\n .border-\\(--axebow-gray\\) {\n border-color: var(--axebow-gray);\n }\n\n .border-\\(--axebow-light-gray\\) {\n border-color: var(--axebow-light-gray);\n }\n\n .border-\\(--axebow-premium-text\\) {\n border-color: var(--axebow-premium-text);\n }\n\n .border-\\(--axebow-primary\\) {\n border-color: var(--axebow-primary);\n }\n\n .border-\\(--axebow-table-border\\) {\n border-color: var(--axebow-table-border);\n }\n\n .border-\\(--axebow-table-header-border\\) {\n border-color: var(--axebow-table-header-border);\n }\n\n .border-\\(--axebow-tertiary\\) {\n border-color: var(--axebow-tertiary);\n }\n\n .border-\\[\\#0ECD9A80\\] {\n border-color: #0ecd9a80;\n }\n\n .border-\\[\\#344966\\] {\n border-color: #344966;\n }\n\n .border-\\[\\#DBDDE4\\] {\n border-color: #dbdde4;\n }\n\n .border-\\[var\\(--axebow-error\\)\\] {\n border-color: var(--axebow-error);\n }\n\n .border-\\[var\\(--axebow-gray\\)\\] {\n border-color: var(--axebow-gray);\n }\n\n .border-\\[var\\(--axebow-tertiary\\)\\] {\n border-color: var(--axebow-tertiary);\n }\n\n .border-black {\n border-color: var(--color-black);\n }\n\n .border-black\\/10 {\n border-color: #0000001a;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .border-black\\/10 {\n border-color: color-mix(in oklab, var(--color-black) 10%, transparent);\n }\n }\n\n .border-blue-200 {\n border-color: var(--color-blue-200);\n }\n\n .border-gray-100 {\n border-color: var(--color-gray-100);\n }\n\n .border-gray-200 {\n border-color: var(--color-gray-200);\n }\n\n .border-gray-300 {\n border-color: var(--color-gray-300);\n }\n\n .border-gray-400 {\n border-color: var(--color-gray-400);\n }\n\n .border-gray-500 {\n border-color: var(--color-gray-500);\n }\n\n .border-green-200 {\n border-color: var(--color-green-200);\n }\n\n .border-transparent {\n border-color: #0000;\n }\n\n .border-white {\n border-color: var(--color-white);\n }\n\n .bg-\\(--axebow-anti-flash-white\\) {\n background-color: var(--axebow-anti-flash-white);\n }\n\n .bg-\\(--axebow-base\\) {\n background-color: var(--axebow-base);\n }\n\n .bg-\\(--axebow-error\\) {\n background-color: var(--axebow-error);\n }\n\n .bg-\\(--axebow-error-bg\\) {\n background-color: var(--axebow-error-bg);\n }\n\n .bg-\\(--axebow-gray\\) {\n background-color: var(--axebow-gray);\n }\n\n .bg-\\(--axebow-light-gray\\), .bg-\\(--axebow-light-gray\\)\\/80 {\n background-color: var(--axebow-light-gray);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .bg-\\(--axebow-light-gray\\)\\/80 {\n background-color: color-mix(in oklab, var(--axebow-light-gray) 80%, transparent);\n }\n }\n\n .bg-\\(--axebow-primary\\) {\n background-color: var(--axebow-primary);\n }\n\n .bg-\\(--axebow-primary-light\\) {\n background-color: var(--axebow-primary-light);\n }\n\n .bg-\\(--axebow-success\\) {\n background-color: var(--axebow-success);\n }\n\n .bg-\\(--axebow-tertiary\\), .bg-\\(--axebow-tertiary\\)\\/15 {\n background-color: var(--axebow-tertiary);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .bg-\\(--axebow-tertiary\\)\\/15 {\n background-color: color-mix(in oklab, var(--axebow-tertiary) 15%, transparent);\n }\n }\n\n .bg-\\(--axebow-warning\\) {\n background-color: var(--axebow-warning);\n }\n\n .bg-\\(--axebow-warning-bg\\) {\n background-color: var(--axebow-warning-bg);\n }\n\n .bg-\\(--axebow-white\\) {\n background-color: var(--axebow-white);\n }\n\n .bg-\\[\\#0ECD9A1A\\] {\n background-color: #0ecd9a1a;\n }\n\n .bg-\\[\\#006BFF\\] {\n background-color: #006bff;\n }\n\n .bg-\\[\\#78787A1A\\] {\n background-color: #78787a1a;\n }\n\n .bg-\\[\\#C7DCFA\\] {\n background-color: #c7dcfa;\n }\n\n .bg-\\[\\#F0F1F5\\] {\n background-color: #f0f1f5;\n }\n\n .bg-\\[\\#F3FDFA\\] {\n background-color: #f3fdfa;\n }\n\n .bg-blue-50 {\n background-color: var(--color-blue-50);\n }\n\n .bg-gray-50 {\n background-color: var(--color-gray-50);\n }\n\n .bg-gray-50\\/50 {\n background-color: #f9fafb80;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .bg-gray-50\\/50 {\n background-color: color-mix(in oklab, var(--color-gray-50) 50%, transparent);\n }\n }\n\n .bg-gray-100 {\n background-color: var(--color-gray-100);\n }\n\n .bg-gray-200 {\n background-color: var(--color-gray-200);\n }\n\n .bg-gray-300 {\n background-color: var(--color-gray-300);\n }\n\n .bg-green-50 {\n background-color: var(--color-green-50);\n }\n\n .bg-red-50 {\n background-color: var(--color-red-50);\n }\n\n .bg-red-100 {\n background-color: var(--color-red-100);\n }\n\n .bg-sky-50 {\n background-color: var(--color-sky-50);\n }\n\n .bg-sky-100 {\n background-color: var(--color-sky-100);\n }\n\n .bg-transparent {\n background-color: #0000;\n }\n\n .bg-white {\n background-color: var(--color-white);\n }\n\n .object-contain {\n object-fit: contain;\n }\n\n .object-cover {\n object-fit: cover;\n }\n\n .p-0 {\n padding: 0;\n }\n\n .p-1 {\n padding: var(--spacing);\n }\n\n .p-1\\.5 {\n padding: calc(var(--spacing) * 1.5);\n }\n\n .p-2 {\n padding: calc(var(--spacing) * 2);\n }\n\n .p-3 {\n padding: calc(var(--spacing) * 3);\n }\n\n .p-3\\.25 {\n padding: calc(var(--spacing) * 3.25);\n }\n\n .p-4 {\n padding: calc(var(--spacing) * 4);\n }\n\n .p-5 {\n padding: calc(var(--spacing) * 5);\n }\n\n .p-6 {\n padding: calc(var(--spacing) * 6);\n }\n\n .px-0\\.5 {\n padding-inline: calc(var(--spacing) * .5);\n }\n\n .px-1 {\n padding-inline: var(--spacing);\n }\n\n .px-1\\.5 {\n padding-inline: calc(var(--spacing) * 1.5);\n }\n\n .px-2 {\n padding-inline: calc(var(--spacing) * 2);\n }\n\n .px-3 {\n padding-inline: calc(var(--spacing) * 3);\n }\n\n .px-3\\.5 {\n padding-inline: calc(var(--spacing) * 3.5);\n }\n\n .px-4 {\n padding-inline: calc(var(--spacing) * 4);\n }\n\n .px-5 {\n padding-inline: calc(var(--spacing) * 5);\n }\n\n .px-6 {\n padding-inline: calc(var(--spacing) * 6);\n }\n\n .px-8 {\n padding-inline: calc(var(--spacing) * 8);\n }\n\n .py-0\\.5 {\n padding-block: calc(var(--spacing) * .5);\n }\n\n .py-1 {\n padding-block: var(--spacing);\n }\n\n .py-1\\.5 {\n padding-block: calc(var(--spacing) * 1.5);\n }\n\n .py-1\\.25 {\n padding-block: calc(var(--spacing) * 1.25);\n }\n\n .py-2 {\n padding-block: calc(var(--spacing) * 2);\n }\n\n .py-2\\.5 {\n padding-block: calc(var(--spacing) * 2.5);\n }\n\n .py-2\\.75 {\n padding-block: calc(var(--spacing) * 2.75);\n }\n\n .py-3 {\n padding-block: calc(var(--spacing) * 3);\n }\n\n .py-3\\.25 {\n padding-block: calc(var(--spacing) * 3.25);\n }\n\n .py-4 {\n padding-block: calc(var(--spacing) * 4);\n }\n\n .py-4\\.75 {\n padding-block: calc(var(--spacing) * 4.75);\n }\n\n .py-8 {\n padding-block: calc(var(--spacing) * 8);\n }\n\n .py-px {\n padding-block: 1px;\n }\n\n .ps-4 {\n padding-inline-start: calc(var(--spacing) * 4);\n }\n\n .ps-8 {\n padding-inline-start: calc(var(--spacing) * 8);\n }\n\n .pe-4 {\n padding-inline-end: calc(var(--spacing) * 4);\n }\n\n .pt-0\\.5 {\n padding-top: calc(var(--spacing) * .5);\n }\n\n .pt-1 {\n padding-top: var(--spacing);\n }\n\n .pt-2 {\n padding-top: calc(var(--spacing) * 2);\n }\n\n .pt-3 {\n padding-top: calc(var(--spacing) * 3);\n }\n\n .pt-4 {\n padding-top: calc(var(--spacing) * 4);\n }\n\n .pt-6 {\n padding-top: calc(var(--spacing) * 6);\n }\n\n .pt-8 {\n padding-top: calc(var(--spacing) * 8);\n }\n\n .pt-px {\n padding-top: 1px;\n }\n\n .pr-1 {\n padding-right: var(--spacing);\n }\n\n .pr-2 {\n padding-right: calc(var(--spacing) * 2);\n }\n\n .pr-3\\.25 {\n padding-right: calc(var(--spacing) * 3.25);\n }\n\n .pr-4 {\n padding-right: calc(var(--spacing) * 4);\n }\n\n .pr-4\\.5 {\n padding-right: calc(var(--spacing) * 4.5);\n }\n\n .pr-5 {\n padding-right: calc(var(--spacing) * 5);\n }\n\n .pr-14 {\n padding-right: calc(var(--spacing) * 14);\n }\n\n .pb-0 {\n padding-bottom: 0;\n }\n\n .pb-1 {\n padding-bottom: var(--spacing);\n }\n\n .pb-2 {\n padding-bottom: calc(var(--spacing) * 2);\n }\n\n .pb-3 {\n padding-bottom: calc(var(--spacing) * 3);\n }\n\n .pb-3\\.5 {\n padding-bottom: calc(var(--spacing) * 3.5);\n }\n\n .pb-4 {\n padding-bottom: calc(var(--spacing) * 4);\n }\n\n .pb-6 {\n padding-bottom: calc(var(--spacing) * 6);\n }\n\n .pl-1 {\n padding-left: var(--spacing);\n }\n\n .pl-1\\.5 {\n padding-left: calc(var(--spacing) * 1.5);\n }\n\n .pl-2 {\n padding-left: calc(var(--spacing) * 2);\n }\n\n .pl-4 {\n padding-left: calc(var(--spacing) * 4);\n }\n\n .pl-4\\.25 {\n padding-left: calc(var(--spacing) * 4.25);\n }\n\n .pl-5 {\n padding-left: calc(var(--spacing) * 5);\n }\n\n .pl-6 {\n padding-left: calc(var(--spacing) * 6);\n }\n\n .pl-8 {\n padding-left: calc(var(--spacing) * 8);\n }\n\n .pl-11\\.75 {\n padding-left: calc(var(--spacing) * 11.75);\n }\n\n .pl-px {\n padding-left: 1px;\n }\n\n .text-center {\n text-align: center;\n }\n\n .text-left {\n text-align: left;\n }\n\n .text-right {\n text-align: right;\n }\n\n .text-start {\n text-align: start;\n }\n\n .align-middle {\n vertical-align: middle;\n }\n\n .font-\\[Material_Symbols_Outlined\\] {\n font-family: Material Symbols Outlined;\n }\n\n .font-\\[inherit\\] {\n font-family: inherit;\n }\n\n .text-base {\n font-size: var(--text-base);\n line-height: var(--tw-leading, var(--text-base--line-height));\n }\n\n .text-lg {\n font-size: var(--text-lg);\n line-height: var(--tw-leading, var(--text-lg--line-height));\n }\n\n .text-md {\n font-size: var(--text-md);\n line-height: var(--tw-leading, var(--text-md--line-height));\n }\n\n .text-sm {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n\n .text-xl {\n font-size: var(--text-xl);\n line-height: var(--tw-leading, var(--text-xl--line-height));\n }\n\n .text-xs {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n\n .text-\\[0\\.9375rem\\] {\n font-size: .9375rem;\n }\n\n .text-\\[1\\.25rem\\] {\n font-size: 1.25rem;\n }\n\n .text-\\[18px\\] {\n font-size: 18px;\n }\n\n .leading-3 {\n --tw-leading: calc(var(--spacing) * 3);\n line-height: calc(var(--spacing) * 3);\n }\n\n .leading-3\\.5 {\n --tw-leading: calc(var(--spacing) * 3.5);\n line-height: calc(var(--spacing) * 3.5);\n }\n\n .leading-4\\.25 {\n --tw-leading: calc(var(--spacing) * 4.25);\n line-height: calc(var(--spacing) * 4.25);\n }\n\n .leading-\\[1\\.0625rem\\] {\n --tw-leading: 1.0625rem;\n line-height: 1.0625rem;\n }\n\n .leading-\\[1\\.1875rem\\] {\n --tw-leading: 1.1875rem;\n line-height: 1.1875rem;\n }\n\n .leading-\\[1\\.21875rem\\] {\n --tw-leading: 1.21875rem;\n line-height: 1.21875rem;\n }\n\n .leading-none {\n --tw-leading: 1;\n line-height: 1;\n }\n\n .leading-relaxed {\n --tw-leading: var(--leading-relaxed);\n line-height: var(--leading-relaxed);\n }\n\n .leading-snug {\n --tw-leading: var(--leading-snug);\n line-height: var(--leading-snug);\n }\n\n .leading-tight {\n --tw-leading: var(--leading-tight);\n line-height: var(--leading-tight);\n }\n\n .font-black {\n --tw-font-weight: var(--font-weight-black);\n font-weight: var(--font-weight-black);\n }\n\n .font-bold {\n --tw-font-weight: var(--font-weight-bold);\n font-weight: var(--font-weight-bold);\n }\n\n .font-light {\n --tw-font-weight: var(--font-weight-light);\n font-weight: var(--font-weight-light);\n }\n\n .font-medium {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n\n .font-normal {\n --tw-font-weight: var(--font-weight-normal);\n font-weight: var(--font-weight-normal);\n }\n\n .font-semibold {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n\n .tracking-wider {\n --tw-tracking: var(--tracking-wider);\n letter-spacing: var(--tracking-wider);\n }\n\n .wrap-break-word {\n overflow-wrap: break-word;\n }\n\n .break-all {\n word-break: break-all;\n }\n\n .text-ellipsis {\n text-overflow: ellipsis;\n }\n\n .whitespace-normal {\n white-space: normal;\n }\n\n .whitespace-nowrap {\n white-space: nowrap;\n }\n\n .text-\\(--axebow-anti-flash-white\\) {\n color: var(--axebow-anti-flash-white);\n }\n\n .text-\\(--axebow-black\\) {\n color: var(--axebow-black);\n }\n\n .text-\\(--axebow-error\\) {\n color: var(--axebow-error);\n }\n\n .text-\\(--axebow-gray\\) {\n color: var(--axebow-gray);\n }\n\n .text-\\(--axebow-primary\\) {\n color: var(--axebow-primary);\n }\n\n .text-\\(--axebow-rich-black\\) {\n color: var(--axebow-rich-black);\n }\n\n .text-\\(--axebow-secondary\\) {\n color: var(--axebow-secondary);\n }\n\n .text-\\(--axebow-strong-gray\\) {\n color: var(--axebow-strong-gray);\n }\n\n .text-\\(--axebow-success\\) {\n color: var(--axebow-success);\n }\n\n .text-\\(--axebow-tertiary\\) {\n color: var(--axebow-tertiary);\n }\n\n .text-\\(--axebow-text-gray\\) {\n color: var(--axebow-text-gray);\n }\n\n .text-\\(--hyperlink-color\\) {\n color: var(--hyperlink-color);\n }\n\n .text-\\[\\#8A94AE\\] {\n color: #8a94ae;\n }\n\n .text-\\[\\#78787A\\] {\n color: #78787a;\n }\n\n .text-\\[\\#344966\\] {\n color: #344966;\n }\n\n .text-\\[\\#E93A3A\\] {\n color: #e93a3a;\n }\n\n .text-\\[var\\(--axebow-error\\)\\] {\n color: var(--axebow-error);\n }\n\n .text-black {\n color: var(--color-black);\n }\n\n .text-blue-600 {\n color: var(--color-blue-600);\n }\n\n .text-blue-800 {\n color: var(--color-blue-800);\n }\n\n .text-gray-300 {\n color: var(--color-gray-300);\n }\n\n .text-gray-400 {\n color: var(--color-gray-400);\n }\n\n .text-gray-500 {\n color: var(--color-gray-500);\n }\n\n .text-gray-600 {\n color: var(--color-gray-600);\n }\n\n .text-gray-700 {\n color: var(--color-gray-700);\n }\n\n .text-green-600 {\n color: var(--color-green-600);\n }\n\n .text-green-800 {\n color: var(--color-green-800);\n }\n\n .text-inherit {\n color: inherit;\n }\n\n .text-red-800 {\n color: var(--color-red-800);\n }\n\n .text-white {\n color: var(--color-white);\n }\n\n .text-yellow-600 {\n color: var(--color-yellow-600);\n }\n\n .text-yellow-800 {\n color: var(--color-yellow-800);\n }\n\n .capitalize {\n text-transform: capitalize;\n }\n\n .uppercase {\n text-transform: uppercase;\n }\n\n .italic {\n font-style: italic;\n }\n\n .not-italic {\n font-style: normal;\n }\n\n .underline {\n text-decoration-line: underline;\n }\n\n .decoration-\\(--axebow-error\\) {\n -webkit-text-decoration-color: var(--axebow-error);\n -webkit-text-decoration-color: var(--axebow-error);\n text-decoration-color: var(--axebow-error);\n }\n\n .placeholder-gray-400::placeholder {\n color: var(--color-gray-400);\n }\n\n .opacity-0 {\n opacity: 0;\n }\n\n .opacity-50 {\n opacity: .5;\n }\n\n .opacity-60 {\n opacity: .6;\n }\n\n .opacity-70 {\n opacity: .7;\n }\n\n .opacity-100 {\n opacity: 1;\n }\n\n .shadow-\\[0_-8px_8px_-8px_rgba\\(13\\,24\\,33\\,0\\.15\\)\\] {\n --tw-shadow: 0 -8px 8px -8px var(--tw-shadow-color, #0d182126);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-\\[0_2px_6px_rgba\\(0\\,0\\,0\\,0\\.2\\)\\] {\n --tw-shadow: 0 2px 6px var(--tw-shadow-color, #0003);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-\\[0_4px_12px_rgba\\(0\\,0\\,0\\,0\\.1\\)\\] {\n --tw-shadow: 0 4px 12px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-\\[0_6px_16px_rgba\\(13\\,24\\,33\\,0\\.18\\)\\] {\n --tw-shadow: 0 6px 16px var(--tw-shadow-color, #0d18212e);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-\\[2px_2px_25px_0px_rgba\\(0\\,0\\,0\\,0\\.1\\)\\] {\n --tw-shadow: 2px 2px 25px 0px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-lg {\n --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-md {\n --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-none {\n --tw-shadow: 0 0 #0000;\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-sm {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .axebow-shadow-hover {\n transition: box-shadow .2s ease-in-out;\n }\n\n .axebow-shadow-hover:hover {\n box-shadow: 0 4px 12px #0d182114;\n }\n\n .outline {\n outline-style: var(--tw-outline-style);\n outline-width: 1px;\n }\n\n .blur {\n --tw-blur: blur(8px);\n filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );\n }\n\n .grayscale {\n --tw-grayscale: grayscale(100%);\n filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );\n }\n\n .filter {\n filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );\n }\n\n .backdrop-filter {\n -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );\n backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );\n }\n\n .transition {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-all {\n transition-property: all;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-colors {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-opacity {\n transition-property: opacity;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-shadow {\n transition-property: box-shadow;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-transform {\n transition-property: transform, translate, scale, rotate;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .delay-100 {\n transition-delay: .1s;\n }\n\n .duration-120 {\n --tw-duration: .12s;\n transition-duration: .12s;\n }\n\n .duration-150 {\n --tw-duration: .15s;\n transition-duration: .15s;\n }\n\n .duration-200 {\n --tw-duration: .2s;\n transition-duration: .2s;\n }\n\n .duration-300 {\n --tw-duration: .3s;\n transition-duration: .3s;\n }\n\n .ease-in-out {\n --tw-ease: var(--ease-in-out);\n transition-timing-function: var(--ease-in-out);\n }\n\n .ease-out {\n --tw-ease: var(--ease-out);\n transition-timing-function: var(--ease-out);\n }\n\n .outline-none {\n --tw-outline-style: none;\n outline-style: none;\n }\n\n .select-none {\n -webkit-user-select: none;\n user-select: none;\n }\n\n .\\[font-variation-settings\\:\\'FILL\\'_0\\,\\'wght\\'_400\\,\\'GRAD\\'_0\\,\\'opsz\\'_24\\] {\n font-variation-settings: \"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24;\n }\n\n .\\[font-variation-settings\\:\\'FILL\\'_1\\,\\'wght\\'_400\\,\\'GRAD\\'_0\\,\\'opsz\\'_24\\] {\n font-variation-settings: \"FILL\" 1,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24;\n }\n\n @media (hover: hover) {\n .group-hover\\:pointer-events-auto:is(:where(.group):hover *) {\n pointer-events: auto;\n }\n\n .group-hover\\:translate-x-0:is(:where(.group):hover *) {\n --tw-translate-x: 0;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .group-hover\\:rotate-15:is(:where(.group):hover *) {\n rotate: 15deg;\n }\n\n .group-hover\\:font-semibold:is(:where(.group):hover *) {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n\n .group-hover\\:text-\\(--axebow-gray\\):is(:where(.group):hover *) {\n color: var(--axebow-gray);\n }\n\n .group-hover\\:text-\\(--axebow-primary\\):is(:where(.group):hover *) {\n color: var(--axebow-primary);\n }\n\n .group-hover\\:opacity-100:is(:where(.group):hover *) {\n opacity: 1;\n }\n }\n\n .last\\:border-b-0:last-child {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 0;\n }\n\n .focus-within\\:border-black:focus-within {\n border-color: var(--color-black);\n }\n\n .focus-within\\:border-blue-500:focus-within {\n border-color: var(--color-blue-500);\n }\n\n .focus-within\\:ring-2:focus-within {\n --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .focus-within\\:ring-blue-100:focus-within {\n --tw-ring-color: var(--color-blue-100);\n }\n\n @media (hover: hover) {\n .hover\\:scale-105:hover {\n --tw-scale-x: 105%;\n --tw-scale-y: 105%;\n --tw-scale-z: 105%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n\n .hover\\:border-\\(--axebow-gray\\):hover {\n border-color: var(--axebow-gray);\n }\n\n .hover\\:border-\\(--axebow-tertiary\\):hover, .hover\\:border-\\[var\\(--axebow-tertiary\\)\\]:hover {\n border-color: var(--axebow-tertiary);\n }\n\n .hover\\:border-red-300:hover {\n border-color: var(--color-red-300);\n }\n\n .hover\\:bg-\\(--axebow-anti-flash-white\\):hover {\n background-color: var(--axebow-anti-flash-white);\n }\n\n .hover\\:bg-\\(--axebow-base\\):hover {\n background-color: var(--axebow-base);\n }\n\n .hover\\:bg-\\(--axebow-gray\\):hover {\n background-color: var(--axebow-gray);\n }\n\n .hover\\:bg-\\(--axebow-light-gray\\):hover {\n background-color: var(--axebow-light-gray);\n }\n\n .hover\\:bg-\\(--axebow-primary\\):hover {\n background-color: var(--axebow-primary);\n }\n\n .hover\\:bg-\\[var\\(--axebow-anti-flash-white\\)\\]:hover {\n background-color: var(--axebow-anti-flash-white);\n }\n\n .hover\\:bg-gray-50:hover {\n background-color: var(--color-gray-50);\n }\n\n .hover\\:bg-gray-100:hover {\n background-color: var(--color-gray-100);\n }\n\n .hover\\:bg-gray-200:hover {\n background-color: var(--color-gray-200);\n }\n\n .hover\\:bg-red-50:hover {\n background-color: var(--color-red-50);\n }\n\n .hover\\:bg-white:hover {\n background-color: var(--color-white);\n }\n\n .hover\\:font-semibold:hover {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n\n .hover\\:text-\\(--axebow-error\\):hover {\n color: var(--axebow-error);\n }\n\n .hover\\:text-\\(--axebow-gray\\):hover {\n color: var(--axebow-gray);\n }\n\n .hover\\:text-\\(--axebow-primary\\):hover {\n color: var(--axebow-primary);\n }\n\n .hover\\:text-\\(--axebow-tertiary\\):hover {\n color: var(--axebow-tertiary);\n }\n\n .hover\\:text-black:hover {\n color: var(--color-black);\n }\n\n .hover\\:underline:hover {\n text-decoration-line: underline;\n }\n\n .hover\\:opacity-80:hover {\n opacity: .8;\n }\n\n .hover\\:opacity-100:hover {\n opacity: 1;\n }\n\n .hover\\:shadow-\\[0_2px_6px_rgba\\(13\\,24\\,33\\,0\\.14\\)\\]:hover {\n --tw-shadow: 0 2px 6px var(--tw-shadow-color, #0d182124);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .hover\\:shadow-\\[0_4px_12px_0_rgba\\(13\\,24\\,33\\,0\\.08\\)\\]:hover {\n --tw-shadow: 0 4px 12px 0 var(--tw-shadow-color, #0d182114);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n\n .focus\\:outline-2:focus {\n outline-style: var(--tw-outline-style);\n outline-width: 2px;\n }\n\n .focus\\:outline-offset-1:focus {\n outline-offset: 1px;\n }\n\n .focus\\:outline-blue-500:focus {\n outline-color: var(--color-blue-500);\n }\n\n .focus\\:outline-none:focus {\n --tw-outline-style: none;\n outline-style: none;\n }\n\n .focus-visible\\:ring-2:focus-visible {\n --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .focus-visible\\:ring-\\[\\#006BFF\\]:focus-visible {\n --tw-ring-color: #006bff;\n }\n\n .focus-visible\\:outline-2:focus-visible {\n outline-style: var(--tw-outline-style);\n outline-width: 2px;\n }\n\n .focus-visible\\:outline-\\(--axebow-tertiary\\):focus-visible {\n outline-color: var(--axebow-tertiary);\n }\n\n .active\\:cursor-grabbing:active {\n cursor: grabbing;\n }\n\n @media (hover: hover) {\n .enabled\\:hover\\:text-\\(--hyperlink-hover-color\\):enabled:hover {\n color: var(--hyperlink-hover-color);\n }\n }\n\n .disabled\\:cursor-not-allowed:disabled {\n cursor: not-allowed;\n }\n\n .disabled\\:opacity-50:disabled {\n opacity: .5;\n }\n\n @media (min-width: 48rem) {\n .md\\:gap-8 {\n gap: calc(var(--spacing) * 8);\n }\n }\n\n @media (min-width: 64rem) {\n .lg\\:sticky {\n position: sticky;\n }\n\n .lg\\:block {\n display: block;\n }\n\n .lg\\:flex {\n display: flex;\n }\n\n .lg\\:hidden {\n display: none;\n }\n\n .lg\\:inline {\n display: inline;\n }\n\n .lg\\:min-h-\\(--card-height\\) {\n min-height: var(--card-height);\n }\n\n .lg\\:min-h-\\[calc\\(100vh-7\\.25rem\\)\\] {\n min-height: calc(100vh - 7.25rem);\n }\n\n .lg\\:w-\\(--card-width\\) {\n width: var(--card-width);\n }\n\n .lg\\:min-w-150 {\n min-width: var(--spacing-150);\n }\n\n .lg\\:cursor-default {\n cursor: default;\n }\n\n .lg\\:rounded-md {\n border-radius: var(--radius-md);\n }\n\n .lg\\:border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n\n .lg\\:text-base {\n font-size: var(--text-base);\n line-height: var(--tw-leading, var(--text-base--line-height));\n }\n\n .lg\\:text-lg {\n font-size: var(--text-lg);\n line-height: var(--tw-leading, var(--text-lg--line-height));\n }\n\n .lg\\:shadow {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n}\n\n:host {\n font-family: var(--font-sans);\n font-size: var(--text-base);\n line-height: var(--text-base--line-height);\n --font-sans: \"Open Sans\", sans-serif;\n --text-xs: .625rem;\n --text-xs--line-height: .875rem;\n --text-sm: .75rem;\n --text-sm--line-height: 1rem;\n --text-base: .875rem;\n --text-base--line-height: 1.25rem;\n --text-md: 1rem;\n --text-md--line-height: 1.5rem;\n --text-lg: 1.125rem;\n --text-lg--line-height: 1.75rem;\n --text-xl: 1.25rem;\n --text-xl--line-height: 1.75rem;\n --text-2xl: 1.5rem;\n --text-2xl--line-height: 2rem;\n --text-3xl: 1.875rem;\n --text-3xl--line-height: 2.25rem;\n --text-4xl: 2.25rem;\n --text-4xl--line-height: 2.5rem;\n --text-5xl: 3rem;\n --text-5xl--line-height: 1;\n --text-6xl: 3.75rem;\n --text-6xl--line-height: 1;\n --text-7xl: 4.5rem;\n --text-7xl--line-height: 1;\n --text-8xl: 4.625rem;\n --text-8xl--line-height: 1;\n --text-9xl: 6.125rem;\n --text-9xl--line-height: 1;\n}\n\n:root {\n --sl-font-sans: \"Open Sans\", sans-serif;\n --sl-font-size-2x-small: var(--text-xs);\n --sl-font-size-x-small: var(--text-xs);\n --sl-font-size-small: var(--text-sm);\n --sl-font-size-medium: var(--text-base);\n --sl-font-size-large: var(--text-md);\n --sl-font-size-x-large: var(--text-lg);\n --sl-font-size-2x-large: var(--text-xl);\n --sl-font-size-3x-large: var(--text-3xl);\n --sl-font-size-4x-large: var(--text-5xl);\n --sl-input-font-size-small: var(--text-sm);\n --sl-input-font-size-medium: var(--text-base);\n --sl-input-font-size-large: var(--text-md);\n --sl-button-font-size-small: var(--text-sm);\n --sl-button-font-size-medium: var(--text-base);\n --sl-button-font-size-large: var(--text-md);\n --sl-tooltip-font-size: var(--text-base);\n}\n\nbutton, input, select, textarea {\n font-family: inherit;\n font-size: inherit;\n}\n\ninput, select, textarea, sl-menu-item::part(label), sl-option::part(label) {\n font-size: var(--text-base);\n}\n\n:root {\n --axebow-scrollbar-line-color: var(--axebow-tertiary, #e51c8e);\n --axebow-scrollbar-track-color: #f0f1f5;\n --axebow-scrollbar-thumb-color: #cbd5e1;\n --axebow-scrollbar-thumb-hover-color: #94a3b8;\n}\n\nsl-select::part(listbox)::-webkit-scrollbar {\n border-left: 2px solid var(--axebow-scrollbar-line-color);\n width: 11px;\n height: 11px;\n}\n\nsl-dropdown::part(panel)::-webkit-scrollbar {\n border-left: 2px solid var(--axebow-scrollbar-line-color);\n width: 11px;\n height: 11px;\n}\n\nsl-menu::part(base)::-webkit-scrollbar {\n border-left: 2px solid var(--axebow-scrollbar-line-color);\n width: 11px;\n height: 11px;\n}\n\nsl-select::part(listbox)::-webkit-scrollbar-button {\n display: none;\n}\n\nsl-dropdown::part(panel)::-webkit-scrollbar-button {\n display: none;\n}\n\nsl-menu::part(base)::-webkit-scrollbar-button {\n display: none;\n}\n\nsl-select::part(listbox)::-webkit-scrollbar-track {\n background-color: var(--axebow-scrollbar-track-color);\n background-clip: padding-box;\n border: 2px solid #0000;\n border-left-width: 3px;\n border-radius: 9999px;\n}\n\nsl-dropdown::part(panel)::-webkit-scrollbar-track {\n background-color: var(--axebow-scrollbar-track-color);\n background-clip: padding-box;\n border: 2px solid #0000;\n border-left-width: 3px;\n border-radius: 9999px;\n}\n\nsl-menu::part(base)::-webkit-scrollbar-track {\n background-color: var(--axebow-scrollbar-track-color);\n background-clip: padding-box;\n border: 2px solid #0000;\n border-left-width: 3px;\n border-radius: 9999px;\n}\n\nsl-select::part(listbox)::-webkit-scrollbar-thumb {\n background-color: var(--axebow-scrollbar-thumb-color);\n background-clip: padding-box;\n border: 2px solid #0000;\n border-left-width: 3px;\n border-radius: 9999px;\n}\n\nsl-dropdown::part(panel)::-webkit-scrollbar-thumb {\n background-color: var(--axebow-scrollbar-thumb-color);\n background-clip: padding-box;\n border: 2px solid #0000;\n border-left-width: 3px;\n border-radius: 9999px;\n}\n\nsl-menu::part(base)::-webkit-scrollbar-thumb {\n background-color: var(--axebow-scrollbar-thumb-color);\n background-clip: padding-box;\n border: 2px solid #0000;\n border-left-width: 3px;\n border-radius: 9999px;\n}\n\nsl-select::part(listbox)::-webkit-scrollbar-thumb:hover {\n background-color: var(--axebow-scrollbar-thumb-hover-color);\n}\n\nsl-dropdown::part(panel)::-webkit-scrollbar-thumb:hover {\n background-color: var(--axebow-scrollbar-thumb-hover-color);\n}\n\nsl-menu::part(base)::-webkit-scrollbar-thumb:hover {\n background-color: var(--axebow-scrollbar-thumb-hover-color);\n}\n\nsl-select::part(listbox), sl-dropdown::part(panel), sl-menu::part(base) {\n scrollbar-width: thin;\n scrollbar-color: var(--axebow-scrollbar-thumb-color) transparent;\n}\n\nsl-select::part(listbox), sl-select::part(menu) {\n width: max-content !important;\n min-width: 100% !important;\n max-width: 90vw !important;\n}\n\n:root, sl-input::part(base), sl-select::part(combobox), sl-textarea::part(base) {\n --sl-input-focus-ring-color: transparent;\n --sl-input-border-color-focus: var(--axebow-black, #000);\n --sl-focus-ring-color: transparent;\n}\n\nsl-input:focus-within::part(base), sl-select:focus-within::part(combobox), sl-textarea:focus-within::part(base) {\n border-color: var(--axebow-black, #000) !important;\n box-shadow: none !important;\n outline: none !important;\n}\n\n.axebow-blue-button::part(base) {\n background-color: var(--axebow-tertiary);\n}\n\n.info-container-page {\n flex-wrap: wrap;\n display: flex;\n}\n\nsl-divider {\n background: var(--axebow-light-gray);\n height: 1px;\n margin-top: .5rem;\n margin-bottom: .5rem;\n}\n\n.axebow-shadow {\n box-shadow: 2px 2px 25px #0000001a;\n}\n\n@property --tw-translate-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-translate-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-translate-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-rotate-x {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-rotate-y {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-rotate-z {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-skew-x {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-skew-y {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-space-y-reverse {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-border-style {\n syntax: \"*\";\n inherits: false;\n initial-value: solid;\n}\n\n@property --tw-leading {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-font-weight {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-tracking {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-shadow-color {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n\n@property --tw-inset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-inset-shadow-color {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-inset-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n\n@property --tw-ring-color {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-inset-ring-color {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-inset-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-ring-inset {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-ring-offset-width {\n syntax: \"<length>\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-ring-offset-color {\n syntax: \"*\";\n inherits: false;\n initial-value: #fff;\n}\n\n@property --tw-ring-offset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-outline-style {\n syntax: \"*\";\n inherits: false;\n initial-value: solid;\n}\n\n@property --tw-blur {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-brightness {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-contrast {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-grayscale {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-hue-rotate {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-invert {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-opacity {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-saturate {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-sepia {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-drop-shadow {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-drop-shadow-color {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-drop-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n\n@property --tw-drop-shadow-size {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-backdrop-blur {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-backdrop-brightness {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-backdrop-contrast {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-backdrop-grayscale {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-backdrop-hue-rotate {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-backdrop-invert {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-backdrop-opacity {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-backdrop-saturate {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-backdrop-sepia {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-duration {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-ease {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-scale-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 1;\n}\n\n@property --tw-scale-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 1;\n}\n\n@property --tw-scale-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 1;\n}\n\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n";
221
+ var tailwind_default = "/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n@layer properties {\n @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {\n *, :before, :after, ::backdrop {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-rotate-x: initial;\n --tw-rotate-y: initial;\n --tw-rotate-z: initial;\n --tw-skew-x: initial;\n --tw-skew-y: initial;\n --tw-space-y-reverse: 0;\n --tw-border-style: solid;\n --tw-leading: initial;\n --tw-font-weight: initial;\n --tw-tracking: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-outline-style: solid;\n --tw-blur: initial;\n --tw-brightness: initial;\n --tw-contrast: initial;\n --tw-grayscale: initial;\n --tw-hue-rotate: initial;\n --tw-invert: initial;\n --tw-opacity: initial;\n --tw-saturate: initial;\n --tw-sepia: initial;\n --tw-drop-shadow: initial;\n --tw-drop-shadow-color: initial;\n --tw-drop-shadow-alpha: 100%;\n --tw-drop-shadow-size: initial;\n --tw-backdrop-blur: initial;\n --tw-backdrop-brightness: initial;\n --tw-backdrop-contrast: initial;\n --tw-backdrop-grayscale: initial;\n --tw-backdrop-hue-rotate: initial;\n --tw-backdrop-invert: initial;\n --tw-backdrop-opacity: initial;\n --tw-backdrop-saturate: initial;\n --tw-backdrop-sepia: initial;\n --tw-duration: initial;\n --tw-ease: initial;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-scale-z: 1;\n }\n }\n}\n\n@layer theme {\n :root, :host {\n --font-sans: \"Open Sans\", sans-serif;\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n \"Courier New\", monospace;\n --color-red-50: oklch(97.1% .013 17.38);\n --color-red-100: oklch(93.6% .032 17.717);\n --color-red-300: oklch(80.8% .114 19.571);\n --color-red-800: oklch(44.4% .177 26.899);\n --color-yellow-600: oklch(68.1% .162 75.834);\n --color-yellow-800: oklch(47.6% .114 61.907);\n --color-green-50: oklch(98.2% .018 155.826);\n --color-green-200: oklch(92.5% .084 155.995);\n --color-green-600: oklch(62.7% .194 149.214);\n --color-green-800: oklch(44.8% .119 151.328);\n --color-sky-50: oklch(97.7% .013 236.62);\n --color-sky-100: oklch(95.1% .026 236.824);\n --color-blue-50: oklch(97% .014 254.604);\n --color-blue-100: oklch(93.2% .032 255.585);\n --color-blue-200: oklch(88.2% .059 254.128);\n --color-blue-500: oklch(62.3% .214 259.815);\n --color-blue-600: oklch(54.6% .245 262.881);\n --color-blue-800: oklch(42.4% .199 265.638);\n --color-gray-50: oklch(98.5% .002 247.839);\n --color-gray-100: oklch(96.7% .003 264.542);\n --color-gray-200: oklch(92.8% .006 264.531);\n --color-gray-300: oklch(87.2% .01 258.338);\n --color-gray-400: oklch(70.7% .022 261.325);\n --color-gray-500: oklch(55.1% .027 264.364);\n --color-gray-600: oklch(44.6% .03 256.802);\n --color-gray-700: oklch(37.3% .034 259.733);\n --color-black: #000;\n --color-white: #fff;\n --spacing: .25rem;\n --text-xs: .625rem;\n --text-xs--line-height: .875rem;\n --text-sm: .75rem;\n --text-sm--line-height: 1rem;\n --text-base: .875rem;\n --text-base--line-height: 1.25rem;\n --text-lg: 1.125rem;\n --text-lg--line-height: 1.75rem;\n --text-xl: 1.25rem;\n --text-xl--line-height: 1.75rem;\n --text-3xl: 1.875rem;\n --text-5xl: 3rem;\n --font-weight-light: 300;\n --font-weight-normal: 400;\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --font-weight-black: 900;\n --tracking-wider: .05em;\n --leading-tight: 1.25;\n --leading-snug: 1.375;\n --leading-relaxed: 1.625;\n --radius-sm: .25rem;\n --radius-md: .375rem;\n --radius-lg: .5rem;\n --radius-xl: .75rem;\n --ease-out: cubic-bezier(0, 0, .2, 1);\n --ease-in-out: cubic-bezier(.4, 0, .2, 1);\n --animate-spin: spin 1s linear infinite;\n --default-transition-duration: .15s;\n --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n --default-font-family: var(--font-sans);\n --default-mono-font-family: var(--font-mono);\n --text-md: 1rem;\n --text-md--line-height: 1.5rem;\n --spacing-18: 4.5rem;\n --spacing-30: 7.5rem;\n --spacing-38: 9.5rem;\n --spacing-43: 10.75rem;\n --spacing-50: 12.5rem;\n --spacing-75: 18.75rem;\n --spacing-100: 25rem;\n --spacing-120: 30rem;\n --spacing-150: 37.5rem;\n --spacing-750: 187.5rem;\n }\n}\n\n@layer base {\n *, :after, :before, ::backdrop {\n box-sizing: border-box;\n border: 0 solid;\n margin: 0;\n padding: 0;\n }\n\n ::file-selector-button {\n box-sizing: border-box;\n border: 0 solid;\n margin: 0;\n padding: 0;\n }\n\n html, :host {\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n line-height: 1.5;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n -webkit-text-decoration: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n\n b, strong {\n font-weight: bolder;\n }\n\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n\n small {\n font-size: 80%;\n }\n\n sub, sup {\n vertical-align: baseline;\n font-size: 75%;\n line-height: 0;\n position: relative;\n }\n\n sub {\n bottom: -.25em;\n }\n\n sup {\n top: -.5em;\n }\n\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n\n :-moz-focusring {\n outline: auto;\n }\n\n progress {\n vertical-align: baseline;\n }\n\n summary {\n display: list-item;\n }\n\n ol, ul, menu {\n list-style: none;\n }\n\n img, svg, video, canvas, audio, iframe, embed, object {\n vertical-align: middle;\n display: block;\n }\n\n img, video {\n max-width: 100%;\n height: auto;\n }\n\n button, input, select, optgroup, textarea {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n opacity: 1;\n background-color: #0000;\n border-radius: 0;\n }\n\n ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n opacity: 1;\n background-color: #0000;\n border-radius: 0;\n }\n\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n\n ::placeholder {\n opacity: 1;\n }\n\n @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentColor;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n ::placeholder {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n\n textarea {\n resize: vertical;\n }\n\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n\n ::-webkit-datetime-edit {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-year-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-month-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-day-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-hour-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-minute-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-second-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-millisecond-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n\n ::-webkit-calendar-picker-indicator {\n line-height: 1;\n }\n\n :-moz-ui-invalid {\n box-shadow: none;\n }\n\n button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]) {\n appearance: button;\n }\n\n ::file-selector-button {\n appearance: button;\n }\n\n ::-webkit-inner-spin-button {\n height: auto;\n }\n\n ::-webkit-outer-spin-button {\n height: auto;\n }\n\n [hidden]:where(:not([hidden=\"until-found\"])) {\n display: none !important;\n }\n}\n\n@layer components;\n\n@layer utilities {\n .pointer-events-auto {\n pointer-events: auto;\n }\n\n .pointer-events-none {\n pointer-events: none;\n }\n\n .visible {\n visibility: visible;\n }\n\n .absolute {\n position: absolute;\n }\n\n .fixed {\n position: fixed;\n }\n\n .relative {\n position: relative;\n }\n\n .static {\n position: static;\n }\n\n .sticky {\n position: sticky;\n }\n\n .-top-2\\.25 {\n top: calc(var(--spacing) * -2.25);\n }\n\n .top-0 {\n top: 0;\n }\n\n .top-1 {\n top: var(--spacing);\n }\n\n .top-1\\/2 {\n top: 50%;\n }\n\n .top-3 {\n top: calc(var(--spacing) * 3);\n }\n\n .top-25 {\n top: calc(var(--spacing) * 25);\n }\n\n .top-\\[-7px\\] {\n top: -7px;\n }\n\n .top-\\[0\\.9375rem\\] {\n top: .9375rem;\n }\n\n .top-\\[min\\(6\\.25rem\\,calc\\(100vh_-_var\\(--card-fixed-height\\)_-_1rem\\)\\)\\] {\n top: min(6.25rem, calc(100vh - var(--card-fixed-height) - 1rem));\n }\n\n .top-full {\n top: 100%;\n }\n\n .-right-2\\.25 {\n right: calc(var(--spacing) * -2.25);\n }\n\n .right-0 {\n right: 0;\n }\n\n .right-0\\.5 {\n right: calc(var(--spacing) * .5);\n }\n\n .right-1 {\n right: var(--spacing);\n }\n\n .right-1\\.5 {\n right: calc(var(--spacing) * 1.5);\n }\n\n .right-3 {\n right: calc(var(--spacing) * 3);\n }\n\n .bottom-0 {\n bottom: 0;\n }\n\n .bottom-0\\.5 {\n bottom: calc(var(--spacing) * .5);\n }\n\n .bottom-full {\n bottom: 100%;\n }\n\n .left-0 {\n left: 0;\n }\n\n .left-1\\/2 {\n left: 50%;\n }\n\n .left-\\[-7px\\] {\n left: -7px;\n }\n\n .left-\\[3\\.625rem\\] {\n left: 3.625rem;\n }\n\n .left-\\[calc\\(100\\%\\+10px\\)\\] {\n left: calc(100% + 10px);\n }\n\n .z-5 {\n z-index: 5;\n }\n\n .z-10 {\n z-index: 10;\n }\n\n .z-50 {\n z-index: 50;\n }\n\n .z-2000 {\n z-index: 2000;\n }\n\n .z-2001 {\n z-index: 2001;\n }\n\n .z-9999 {\n z-index: 9999;\n }\n\n .row-1 {\n grid-row: 1;\n }\n\n .row-2 {\n grid-row: 2;\n }\n\n .container {\n width: 100%;\n }\n\n @media (min-width: 40rem) {\n .container {\n max-width: 40rem;\n }\n }\n\n @media (min-width: 48rem) {\n .container {\n max-width: 48rem;\n }\n }\n\n @media (min-width: 64rem) {\n .container {\n max-width: 64rem;\n }\n }\n\n @media (min-width: 80rem) {\n .container {\n max-width: 80rem;\n }\n }\n\n @media (min-width: 96rem) {\n .container {\n max-width: 96rem;\n }\n }\n\n .m-0 {\n margin: 0;\n }\n\n .mx-2 {\n margin-inline: calc(var(--spacing) * 2);\n }\n\n .mx-3 {\n margin-inline: calc(var(--spacing) * 3);\n }\n\n .mx-6 {\n margin-inline: calc(var(--spacing) * 6);\n }\n\n .mx-12 {\n margin-inline: calc(var(--spacing) * 12);\n }\n\n .mx-auto {\n margin-inline: auto;\n }\n\n .my-0\\.5 {\n margin-block: calc(var(--spacing) * .5);\n }\n\n .my-1\\.5 {\n margin-block: calc(var(--spacing) * 1.5);\n }\n\n .my-2 {\n margin-block: calc(var(--spacing) * 2);\n }\n\n .my-4 {\n margin-block: calc(var(--spacing) * 4);\n }\n\n .ms-auto {\n margin-inline-start: auto;\n }\n\n .mt-0 {\n margin-top: 0;\n }\n\n .mt-1 {\n margin-top: var(--spacing);\n }\n\n .mt-1\\.5 {\n margin-top: calc(var(--spacing) * 1.5);\n }\n\n .mt-1\\.75 {\n margin-top: calc(var(--spacing) * 1.75);\n }\n\n .mt-2 {\n margin-top: calc(var(--spacing) * 2);\n }\n\n .mt-2\\.25 {\n margin-top: calc(var(--spacing) * 2.25);\n }\n\n .mt-3 {\n margin-top: calc(var(--spacing) * 3);\n }\n\n .mt-4 {\n margin-top: calc(var(--spacing) * 4);\n }\n\n .mt-4\\.5 {\n margin-top: calc(var(--spacing) * 4.5);\n }\n\n .mt-5 {\n margin-top: calc(var(--spacing) * 5);\n }\n\n .mt-6 {\n margin-top: calc(var(--spacing) * 6);\n }\n\n .mt-6\\.75 {\n margin-top: calc(var(--spacing) * 6.75);\n }\n\n .mt-8 {\n margin-top: calc(var(--spacing) * 8);\n }\n\n .mt-auto {\n margin-top: auto;\n }\n\n .mr-0\\.5 {\n margin-right: calc(var(--spacing) * .5);\n }\n\n .mr-1 {\n margin-right: var(--spacing);\n }\n\n .mr-2 {\n margin-right: calc(var(--spacing) * 2);\n }\n\n .mr-3 {\n margin-right: calc(var(--spacing) * 3);\n }\n\n .mr-4 {\n margin-right: calc(var(--spacing) * 4);\n }\n\n .mr-6 {\n margin-right: calc(var(--spacing) * 6);\n }\n\n .mr-7 {\n margin-right: calc(var(--spacing) * 7);\n }\n\n .mr-8 {\n margin-right: calc(var(--spacing) * 8);\n }\n\n .mr-10 {\n margin-right: calc(var(--spacing) * 10);\n }\n\n .mb-1 {\n margin-bottom: var(--spacing);\n }\n\n .mb-1\\.5 {\n margin-bottom: calc(var(--spacing) * 1.5);\n }\n\n .mb-2 {\n margin-bottom: calc(var(--spacing) * 2);\n }\n\n .mb-3 {\n margin-bottom: calc(var(--spacing) * 3);\n }\n\n .mb-4 {\n margin-bottom: calc(var(--spacing) * 4);\n }\n\n .mb-6 {\n margin-bottom: calc(var(--spacing) * 6);\n }\n\n .mb-6\\.5 {\n margin-bottom: calc(var(--spacing) * 6.5);\n }\n\n .mb-8 {\n margin-bottom: calc(var(--spacing) * 8);\n }\n\n .ml-0\\.5 {\n margin-left: calc(var(--spacing) * .5);\n }\n\n .ml-1 {\n margin-left: var(--spacing);\n }\n\n .ml-2 {\n margin-left: calc(var(--spacing) * 2);\n }\n\n .ml-4 {\n margin-left: calc(var(--spacing) * 4);\n }\n\n .ml-12 {\n margin-left: calc(var(--spacing) * 12);\n }\n\n .ml-\\[0\\.5rem\\] {\n margin-left: .5rem;\n }\n\n .ml-\\[1\\.265625rem\\] {\n margin-left: 1.26563rem;\n }\n\n .ml-auto {\n margin-left: auto;\n }\n\n .box-border {\n box-sizing: border-box;\n }\n\n .box-content {\n box-sizing: content-box;\n }\n\n .line-clamp-1 {\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n overflow: hidden;\n }\n\n .line-clamp-2 {\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n overflow: hidden;\n }\n\n .line-clamp-3 {\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n overflow: hidden;\n }\n\n .line-clamp-11 {\n -webkit-line-clamp: 11;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n overflow: hidden;\n }\n\n .block {\n display: block;\n }\n\n .contents {\n display: contents;\n }\n\n .flex {\n display: flex;\n }\n\n .grid {\n display: grid;\n }\n\n .hidden {\n display: none;\n }\n\n .inline {\n display: inline;\n }\n\n .inline-block {\n display: inline-block;\n }\n\n .inline-flex {\n display: inline-flex;\n }\n\n .table {\n display: table;\n }\n\n .aspect-square {\n aspect-ratio: 1;\n }\n\n .h-1\\.5 {\n height: calc(var(--spacing) * 1.5);\n }\n\n .h-2 {\n height: calc(var(--spacing) * 2);\n }\n\n .h-2\\.25 {\n height: calc(var(--spacing) * 2.25);\n }\n\n .h-2\\.75 {\n height: calc(var(--spacing) * 2.75);\n }\n\n .h-3 {\n height: calc(var(--spacing) * 3);\n }\n\n .h-3\\.5 {\n height: calc(var(--spacing) * 3.5);\n }\n\n .h-4 {\n height: calc(var(--spacing) * 4);\n }\n\n .h-4\\.5 {\n height: calc(var(--spacing) * 4.5);\n }\n\n .h-4\\.25 {\n height: calc(var(--spacing) * 4.25);\n }\n\n .h-4\\.75 {\n height: calc(var(--spacing) * 4.75);\n }\n\n .h-5 {\n height: calc(var(--spacing) * 5);\n }\n\n .h-5\\.5 {\n height: calc(var(--spacing) * 5.5);\n }\n\n .h-5\\.25 {\n height: calc(var(--spacing) * 5.25);\n }\n\n .h-6 {\n height: calc(var(--spacing) * 6);\n }\n\n .h-6\\.75 {\n height: calc(var(--spacing) * 6.75);\n }\n\n .h-7 {\n height: calc(var(--spacing) * 7);\n }\n\n .h-7\\.5 {\n height: calc(var(--spacing) * 7.5);\n }\n\n .h-7\\.25 {\n height: calc(var(--spacing) * 7.25);\n }\n\n .h-8 {\n height: calc(var(--spacing) * 8);\n }\n\n .h-8\\.75 {\n height: calc(var(--spacing) * 8.75);\n }\n\n .h-9 {\n height: calc(var(--spacing) * 9);\n }\n\n .h-9\\.5 {\n height: calc(var(--spacing) * 9.5);\n }\n\n .h-9\\.75 {\n height: calc(var(--spacing) * 9.75);\n }\n\n .h-10 {\n height: calc(var(--spacing) * 10);\n }\n\n .h-10\\.5 {\n height: calc(var(--spacing) * 10.5);\n }\n\n .h-10\\.25 {\n height: calc(var(--spacing) * 10.25);\n }\n\n .h-11 {\n height: calc(var(--spacing) * 11);\n }\n\n .h-11\\.5 {\n height: calc(var(--spacing) * 11.5);\n }\n\n .h-12 {\n height: calc(var(--spacing) * 12);\n }\n\n .h-12\\.5 {\n height: calc(var(--spacing) * 12.5);\n }\n\n .h-12\\.25 {\n height: calc(var(--spacing) * 12.25);\n }\n\n .h-12\\.75 {\n height: calc(var(--spacing) * 12.75);\n }\n\n .h-14 {\n height: calc(var(--spacing) * 14);\n }\n\n .h-14\\.25 {\n height: calc(var(--spacing) * 14.25);\n }\n\n .h-15\\.5 {\n height: calc(var(--spacing) * 15.5);\n }\n\n .h-16 {\n height: calc(var(--spacing) * 16);\n }\n\n .h-17\\.75 {\n height: calc(var(--spacing) * 17.75);\n }\n\n .h-19\\.75 {\n height: calc(var(--spacing) * 19.75);\n }\n\n .h-20 {\n height: calc(var(--spacing) * 20);\n }\n\n .h-20\\.75 {\n height: calc(var(--spacing) * 20.75);\n }\n\n .h-22\\.75 {\n height: calc(var(--spacing) * 22.75);\n }\n\n .h-32\\.25 {\n height: calc(var(--spacing) * 32.25);\n }\n\n .h-40\\.75 {\n height: calc(var(--spacing) * 40.75);\n }\n\n .h-45\\.5 {\n height: calc(var(--spacing) * 45.5);\n }\n\n .h-49\\.5 {\n height: calc(var(--spacing) * 49.5);\n }\n\n .h-52\\.75 {\n height: calc(var(--spacing) * 52.75);\n }\n\n .h-57\\.5 {\n height: calc(var(--spacing) * 57.5);\n }\n\n .h-77\\.25 {\n height: calc(var(--spacing) * 77.25);\n }\n\n .h-79 {\n height: calc(var(--spacing) * 79);\n }\n\n .h-83\\.25 {\n height: calc(var(--spacing) * 83.25);\n }\n\n .h-89\\.25 {\n height: calc(var(--spacing) * 89.25);\n }\n\n .h-102\\.25 {\n height: calc(var(--spacing) * 102.25);\n }\n\n .h-106\\.5 {\n height: calc(var(--spacing) * 106.5);\n }\n\n .h-112 {\n height: calc(var(--spacing) * 112);\n }\n\n .h-113\\.25 {\n height: calc(var(--spacing) * 113.25);\n }\n\n .h-\\[2\\.125rem\\] {\n height: 2.125rem;\n }\n\n .h-\\[6\\.8125rem\\] {\n height: 6.8125rem;\n }\n\n .h-auto {\n height: auto;\n }\n\n .h-fit {\n height: fit-content;\n }\n\n .h-full {\n height: 100%;\n }\n\n .h-px {\n height: 1px;\n }\n\n .h-screen {\n height: 100vh;\n }\n\n .max-h-\\(--card-fixed-height\\) {\n max-height: var(--card-fixed-height);\n }\n\n .max-h-12 {\n max-height: calc(var(--spacing) * 12);\n }\n\n .max-h-30 {\n max-height: var(--spacing-30);\n }\n\n .max-h-40 {\n max-height: calc(var(--spacing) * 40);\n }\n\n .max-h-48 {\n max-height: calc(var(--spacing) * 48);\n }\n\n .max-h-75 {\n max-height: var(--spacing-75);\n }\n\n .max-h-111 {\n max-height: calc(var(--spacing) * 111);\n }\n\n .max-h-750 {\n max-height: var(--spacing-750);\n }\n\n .max-h-\\[40vh\\] {\n max-height: 40vh;\n }\n\n .max-h-full {\n max-height: 100%;\n }\n\n .min-h-0 {\n min-height: 0;\n }\n\n .min-h-5 {\n min-height: calc(var(--spacing) * 5);\n }\n\n .min-h-9 {\n min-height: calc(var(--spacing) * 9);\n }\n\n .min-h-12 {\n min-height: calc(var(--spacing) * 12);\n }\n\n .min-h-14 {\n min-height: calc(var(--spacing) * 14);\n }\n\n .min-h-14\\.5 {\n min-height: calc(var(--spacing) * 14.5);\n }\n\n .min-h-19 {\n min-height: calc(var(--spacing) * 19);\n }\n\n .min-h-35 {\n min-height: calc(var(--spacing) * 35);\n }\n\n .w-1\\.5 {\n width: calc(var(--spacing) * 1.5);\n }\n\n .w-1\\.75 {\n width: calc(var(--spacing) * 1.75);\n }\n\n .w-1\\/3 {\n width: 33.3333%;\n }\n\n .w-2 {\n width: calc(var(--spacing) * 2);\n }\n\n .w-2\\.5 {\n width: calc(var(--spacing) * 2.5);\n }\n\n .w-3\\.5 {\n width: calc(var(--spacing) * 3.5);\n }\n\n .w-4 {\n width: calc(var(--spacing) * 4);\n }\n\n .w-4\\.5 {\n width: calc(var(--spacing) * 4.5);\n }\n\n .w-4\\.25 {\n width: calc(var(--spacing) * 4.25);\n }\n\n .w-5 {\n width: calc(var(--spacing) * 5);\n }\n\n .w-6 {\n width: calc(var(--spacing) * 6);\n }\n\n .w-7 {\n width: calc(var(--spacing) * 7);\n }\n\n .w-8 {\n width: calc(var(--spacing) * 8);\n }\n\n .w-9 {\n width: calc(var(--spacing) * 9);\n }\n\n .w-9\\.5 {\n width: calc(var(--spacing) * 9.5);\n }\n\n .w-10 {\n width: calc(var(--spacing) * 10);\n }\n\n .w-10\\.5 {\n width: calc(var(--spacing) * 10.5);\n }\n\n .w-11\\.5 {\n width: calc(var(--spacing) * 11.5);\n }\n\n .w-11\\.25 {\n width: calc(var(--spacing) * 11.25);\n }\n\n .w-12 {\n width: calc(var(--spacing) * 12);\n }\n\n .w-12\\.5 {\n width: calc(var(--spacing) * 12.5);\n }\n\n .w-12\\.75 {\n width: calc(var(--spacing) * 12.75);\n }\n\n .w-15\\.5 {\n width: calc(var(--spacing) * 15.5);\n }\n\n .w-15\\.25 {\n width: calc(var(--spacing) * 15.25);\n }\n\n .w-16 {\n width: calc(var(--spacing) * 16);\n }\n\n .w-17 {\n width: calc(var(--spacing) * 17);\n }\n\n .w-18 {\n width: var(--spacing-18);\n }\n\n .w-18\\.5 {\n width: calc(var(--spacing) * 18.5);\n }\n\n .w-18\\.75 {\n width: calc(var(--spacing) * 18.75);\n }\n\n .w-20 {\n width: calc(var(--spacing) * 20);\n }\n\n .w-20\\.5 {\n width: calc(var(--spacing) * 20.5);\n }\n\n .w-21\\.5 {\n width: calc(var(--spacing) * 21.5);\n }\n\n .w-22\\.25 {\n width: calc(var(--spacing) * 22.25);\n }\n\n .w-23\\.5 {\n width: calc(var(--spacing) * 23.5);\n }\n\n .w-24 {\n width: calc(var(--spacing) * 24);\n }\n\n .w-24\\.75 {\n width: calc(var(--spacing) * 24.75);\n }\n\n .w-25 {\n width: calc(var(--spacing) * 25);\n }\n\n .w-25\\.5 {\n width: calc(var(--spacing) * 25.5);\n }\n\n .w-25\\.25 {\n width: calc(var(--spacing) * 25.25);\n }\n\n .w-26\\.25 {\n width: calc(var(--spacing) * 26.25);\n }\n\n .w-26\\.75 {\n width: calc(var(--spacing) * 26.75);\n }\n\n .w-27 {\n width: calc(var(--spacing) * 27);\n }\n\n .w-27\\.5 {\n width: calc(var(--spacing) * 27.5);\n }\n\n .w-28\\.25 {\n width: calc(var(--spacing) * 28.25);\n }\n\n .w-30 {\n width: var(--spacing-30);\n }\n\n .w-30\\.75 {\n width: calc(var(--spacing) * 30.75);\n }\n\n .w-33\\.25 {\n width: calc(var(--spacing) * 33.25);\n }\n\n .w-34\\.25 {\n width: calc(var(--spacing) * 34.25);\n }\n\n .w-35 {\n width: calc(var(--spacing) * 35);\n }\n\n .w-36 {\n width: calc(var(--spacing) * 36);\n }\n\n .w-37 {\n width: calc(var(--spacing) * 37);\n }\n\n .w-38 {\n width: var(--spacing-38);\n }\n\n .w-38\\.5 {\n width: calc(var(--spacing) * 38.5);\n }\n\n .w-39\\.5 {\n width: calc(var(--spacing) * 39.5);\n }\n\n .w-41 {\n width: calc(var(--spacing) * 41);\n }\n\n .w-41\\.75 {\n width: calc(var(--spacing) * 41.75);\n }\n\n .w-42 {\n width: calc(var(--spacing) * 42);\n }\n\n .w-44 {\n width: calc(var(--spacing) * 44);\n }\n\n .w-45 {\n width: calc(var(--spacing) * 45);\n }\n\n .w-47\\.75 {\n width: calc(var(--spacing) * 47.75);\n }\n\n .w-48 {\n width: calc(var(--spacing) * 48);\n }\n\n .w-48\\.5 {\n width: calc(var(--spacing) * 48.5);\n }\n\n .w-53 {\n width: calc(var(--spacing) * 53);\n }\n\n .w-53\\.25 {\n width: calc(var(--spacing) * 53.25);\n }\n\n .w-53\\.75 {\n width: calc(var(--spacing) * 53.75);\n }\n\n .w-56\\.5 {\n width: calc(var(--spacing) * 56.5);\n }\n\n .w-57\\.5 {\n width: calc(var(--spacing) * 57.5);\n }\n\n .w-58\\.75 {\n width: calc(var(--spacing) * 58.75);\n }\n\n .w-60\\.5 {\n width: calc(var(--spacing) * 60.5);\n }\n\n .w-62\\.5 {\n width: calc(var(--spacing) * 62.5);\n }\n\n .w-63\\.5 {\n width: calc(var(--spacing) * 63.5);\n }\n\n .w-66 {\n width: calc(var(--spacing) * 66);\n }\n\n .w-68 {\n width: calc(var(--spacing) * 68);\n }\n\n .w-70 {\n width: calc(var(--spacing) * 70);\n }\n\n .w-70\\.5 {\n width: calc(var(--spacing) * 70.5);\n }\n\n .w-71 {\n width: calc(var(--spacing) * 71);\n }\n\n .w-74\\.75 {\n width: calc(var(--spacing) * 74.75);\n }\n\n .w-87 {\n width: calc(var(--spacing) * 87);\n }\n\n .w-91 {\n width: calc(var(--spacing) * 91);\n }\n\n .w-92 {\n width: calc(var(--spacing) * 92);\n }\n\n .w-95 {\n width: calc(var(--spacing) * 95);\n }\n\n .w-99\\.75 {\n width: calc(var(--spacing) * 99.75);\n }\n\n .w-100 {\n width: var(--spacing-100);\n }\n\n .w-100\\.5 {\n width: calc(var(--spacing) * 100.5);\n }\n\n .w-102 {\n width: calc(var(--spacing) * 102);\n }\n\n .w-120 {\n width: var(--spacing-120);\n }\n\n .w-127\\.75 {\n width: calc(var(--spacing) * 127.75);\n }\n\n .w-130\\.25 {\n width: calc(var(--spacing) * 130.25);\n }\n\n .w-131 {\n width: calc(var(--spacing) * 131);\n }\n\n .w-139 {\n width: calc(var(--spacing) * 139);\n }\n\n .w-140\\.75 {\n width: calc(var(--spacing) * 140.75);\n }\n\n .w-144\\.75 {\n width: calc(var(--spacing) * 144.75);\n }\n\n .w-148\\.75 {\n width: calc(var(--spacing) * 148.75);\n }\n\n .w-186\\.5 {\n width: calc(var(--spacing) * 186.5);\n }\n\n .w-186\\.25 {\n width: calc(var(--spacing) * 186.25);\n }\n\n .w-194\\.25 {\n width: calc(var(--spacing) * 194.25);\n }\n\n .w-198\\.25 {\n width: calc(var(--spacing) * 198.25);\n }\n\n .w-270 {\n width: calc(var(--spacing) * 270);\n }\n\n .w-282 {\n width: calc(var(--spacing) * 282);\n }\n\n .w-286 {\n width: calc(var(--spacing) * 286);\n }\n\n .w-293\\.5 {\n width: calc(var(--spacing) * 293.5);\n }\n\n .w-\\[22\\.833125rem\\] {\n width: 22.8331rem;\n }\n\n .w-\\[calc\\(100\\%-10px\\)\\] {\n width: calc(100% - 10px);\n }\n\n .w-auto {\n width: auto;\n }\n\n .w-fit {\n width: fit-content;\n }\n\n .w-full {\n width: 100%;\n }\n\n .w-px {\n width: 1px;\n }\n\n .max-w-12 {\n max-width: calc(var(--spacing) * 12);\n }\n\n .max-w-36 {\n max-width: calc(var(--spacing) * 36);\n }\n\n .max-w-38 {\n max-width: var(--spacing-38);\n }\n\n .max-w-43 {\n max-width: var(--spacing-43);\n }\n\n .max-w-44 {\n max-width: calc(var(--spacing) * 44);\n }\n\n .max-w-51\\.5 {\n max-width: calc(var(--spacing) * 51.5);\n }\n\n .max-w-65 {\n max-width: calc(var(--spacing) * 65);\n }\n\n .max-w-95 {\n max-width: calc(var(--spacing) * 95);\n }\n\n .max-w-194\\.25 {\n max-width: calc(var(--spacing) * 194.25);\n }\n\n .max-w-\\[33\\.125rem\\] {\n max-width: 33.125rem;\n }\n\n .max-w-full {\n max-width: 100%;\n }\n\n .min-w-0 {\n min-width: 0;\n }\n\n .min-w-4 {\n min-width: calc(var(--spacing) * 4);\n }\n\n .min-w-10 {\n min-width: calc(var(--spacing) * 10);\n }\n\n .min-w-20 {\n min-width: calc(var(--spacing) * 20);\n }\n\n .min-w-30 {\n min-width: var(--spacing-30);\n }\n\n .min-w-32 {\n min-width: calc(var(--spacing) * 32);\n }\n\n .min-w-36 {\n min-width: calc(var(--spacing) * 36);\n }\n\n .min-w-44 {\n min-width: calc(var(--spacing) * 44);\n }\n\n .min-w-50 {\n min-width: var(--spacing-50);\n }\n\n .min-w-53\\.25 {\n min-width: calc(var(--spacing) * 53.25);\n }\n\n .min-w-55 {\n min-width: calc(var(--spacing) * 55);\n }\n\n .min-w-105 {\n min-width: calc(var(--spacing) * 105);\n }\n\n .min-w-160 {\n min-width: calc(var(--spacing) * 160);\n }\n\n .min-w-\\[8\\.2rem\\] {\n min-width: 8.2rem;\n }\n\n .min-w-fit {\n min-width: fit-content;\n }\n\n .min-w-full {\n min-width: 100%;\n }\n\n .flex-1 {\n flex: 1;\n }\n\n .flex-shrink {\n flex-shrink: 1;\n }\n\n .flex-shrink-0, .shrink-0 {\n flex-shrink: 0;\n }\n\n .flex-grow, .grow {\n flex-grow: 1;\n }\n\n .border-collapse {\n border-collapse: collapse;\n }\n\n .origin-center {\n transform-origin: center;\n }\n\n .-translate-x-1 {\n --tw-translate-x: calc(var(--spacing) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .-translate-x-1\\/2 {\n --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .-translate-y-1\\/2 {\n --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .scale-\\[1\\.02\\] {\n scale: 1.02;\n }\n\n .rotate-180 {\n rotate: 180deg;\n }\n\n .transform {\n transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );\n }\n\n .animate-spin {\n animation: var(--animate-spin);\n }\n\n .cursor-default {\n cursor: default;\n }\n\n .cursor-grab {\n cursor: grab;\n }\n\n .cursor-not-allowed {\n cursor: not-allowed;\n }\n\n .cursor-pointer {\n cursor: pointer;\n }\n\n .cursor-text {\n cursor: text;\n }\n\n .touch-none {\n touch-action: none;\n }\n\n .resize {\n resize: both;\n }\n\n .resize-none {\n resize: none;\n }\n\n .list-none {\n list-style-type: none;\n }\n\n .appearance-none {\n appearance: none;\n }\n\n .grid-cols-1 {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n }\n\n .grid-cols-\\[minmax\\(4\\.875rem\\,auto\\)_auto_1fr_auto\\] {\n grid-template-columns: minmax(4.875rem, auto) auto 1fr auto;\n }\n\n .flex-col {\n flex-direction: column;\n }\n\n .flex-col-reverse {\n flex-direction: column-reverse;\n }\n\n .flex-row {\n flex-direction: row;\n }\n\n .flex-wrap {\n flex-wrap: wrap;\n }\n\n .items-baseline {\n align-items: baseline;\n }\n\n .items-center {\n align-items: center;\n }\n\n .items-end {\n align-items: flex-end;\n }\n\n .items-start {\n align-items: flex-start;\n }\n\n .justify-between {\n justify-content: space-between;\n }\n\n .justify-center {\n justify-content: center;\n }\n\n .justify-end {\n justify-content: flex-end;\n }\n\n .justify-start {\n justify-content: flex-start;\n }\n\n .gap-0 {\n gap: 0;\n }\n\n .gap-0\\.5 {\n gap: calc(var(--spacing) * .5);\n }\n\n .gap-1 {\n gap: var(--spacing);\n }\n\n .gap-1\\.5 {\n gap: calc(var(--spacing) * 1.5);\n }\n\n .gap-1\\.25 {\n gap: calc(var(--spacing) * 1.25);\n }\n\n .gap-2 {\n gap: calc(var(--spacing) * 2);\n }\n\n .gap-2\\.5 {\n gap: calc(var(--spacing) * 2.5);\n }\n\n .gap-2\\.25 {\n gap: calc(var(--spacing) * 2.25);\n }\n\n .gap-2\\.75 {\n gap: calc(var(--spacing) * 2.75);\n }\n\n .gap-3 {\n gap: calc(var(--spacing) * 3);\n }\n\n .gap-4 {\n gap: calc(var(--spacing) * 4);\n }\n\n .gap-5 {\n gap: calc(var(--spacing) * 5);\n }\n\n .gap-6 {\n gap: calc(var(--spacing) * 6);\n }\n\n .gap-8 {\n gap: calc(var(--spacing) * 8);\n }\n\n .gap-8\\.75 {\n gap: calc(var(--spacing) * 8.75);\n }\n\n .gap-12 {\n gap: calc(var(--spacing) * 12);\n }\n\n .gap-19 {\n gap: calc(var(--spacing) * 19);\n }\n\n .gap-\\[0\\.625rem\\] {\n gap: .625rem;\n }\n\n .gap-\\[0\\.53125rem\\] {\n gap: .53125rem;\n }\n\n .gap-\\[2\\%\\] {\n gap: 2%;\n }\n\n .gap-\\[4\\%\\] {\n gap: 4%;\n }\n\n .gap-px {\n gap: 1px;\n }\n\n :where(.space-y-1 > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));\n margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));\n }\n\n :where(.space-y-2 > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));\n }\n\n :where(.space-y-3 > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));\n }\n\n .gap-x-2 {\n column-gap: calc(var(--spacing) * 2);\n }\n\n .gap-x-4 {\n column-gap: calc(var(--spacing) * 4);\n }\n\n .gap-x-6 {\n column-gap: calc(var(--spacing) * 6);\n }\n\n .gap-y-1 {\n row-gap: var(--spacing);\n }\n\n .self-end {\n align-self: flex-end;\n }\n\n .self-start {\n align-self: flex-start;\n }\n\n .truncate {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n }\n\n .overflow-auto {\n overflow: auto;\n }\n\n .overflow-hidden {\n overflow: hidden;\n }\n\n .overflow-visible {\n overflow: visible;\n }\n\n .overflow-x-auto {\n overflow-x: auto;\n }\n\n .overflow-x-hidden {\n overflow-x: hidden;\n }\n\n .overflow-y-auto {\n overflow-y: auto;\n }\n\n .overflow-y-hidden {\n overflow-y: hidden;\n }\n\n .rounded {\n border-radius: .25rem;\n }\n\n .rounded-full {\n border-radius: 3.40282e38px;\n }\n\n .rounded-lg {\n border-radius: var(--radius-lg);\n }\n\n .rounded-md {\n border-radius: var(--radius-md);\n }\n\n .rounded-none {\n border-radius: 0;\n }\n\n .rounded-none\\! {\n border-radius: 0 !important;\n }\n\n .rounded-sm {\n border-radius: var(--radius-sm);\n }\n\n .rounded-xl {\n border-radius: var(--radius-xl);\n }\n\n .rounded-t-lg {\n border-top-left-radius: var(--radius-lg);\n border-top-right-radius: var(--radius-lg);\n }\n\n .rounded-t-md {\n border-top-left-radius: var(--radius-md);\n border-top-right-radius: var(--radius-md);\n }\n\n .rounded-t-xl {\n border-top-left-radius: var(--radius-xl);\n border-top-right-radius: var(--radius-xl);\n }\n\n .rounded-l-xl {\n border-top-left-radius: var(--radius-xl);\n border-bottom-left-radius: var(--radius-xl);\n }\n\n .rounded-tl-xl {\n border-top-left-radius: var(--radius-xl);\n }\n\n .rounded-r-md {\n border-top-right-radius: var(--radius-md);\n border-bottom-right-radius: var(--radius-md);\n }\n\n .rounded-tr-xl {\n border-top-right-radius: var(--radius-xl);\n }\n\n .rounded-b-lg {\n border-bottom-right-radius: var(--radius-lg);\n border-bottom-left-radius: var(--radius-lg);\n }\n\n .rounded-b-md {\n border-bottom-right-radius: var(--radius-md);\n border-bottom-left-radius: var(--radius-md);\n }\n\n .rounded-b-xl {\n border-bottom-right-radius: var(--radius-xl);\n border-bottom-left-radius: var(--radius-xl);\n }\n\n .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n\n .border-0 {\n border-style: var(--tw-border-style);\n border-width: 0;\n }\n\n .border-2 {\n border-style: var(--tw-border-style);\n border-width: 2px;\n }\n\n .border-x {\n border-inline-style: var(--tw-border-style);\n border-inline-width: 1px;\n }\n\n .border-t {\n border-top-style: var(--tw-border-style);\n border-top-width: 1px;\n }\n\n .border-t-0 {\n border-top-style: var(--tw-border-style);\n border-top-width: 0;\n }\n\n .border-t-4 {\n border-top-style: var(--tw-border-style);\n border-top-width: 4px;\n }\n\n .border-r {\n border-right-style: var(--tw-border-style);\n border-right-width: 1px;\n }\n\n .border-r-0 {\n border-right-style: var(--tw-border-style);\n border-right-width: 0;\n }\n\n .border-b {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n }\n\n .border-b-0 {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 0;\n }\n\n .border-b-2 {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 2px;\n }\n\n .border-l {\n border-left-style: var(--tw-border-style);\n border-left-width: 1px;\n }\n\n .border-l-0 {\n border-left-style: var(--tw-border-style);\n border-left-width: 0;\n }\n\n .border-l-4 {\n border-left-style: var(--tw-border-style);\n border-left-width: 4px;\n }\n\n .border-dashed {\n --tw-border-style: dashed;\n border-style: dashed;\n }\n\n .border-none {\n --tw-border-style: none;\n border-style: none;\n }\n\n .border-solid {\n --tw-border-style: solid;\n border-style: solid;\n }\n\n .border-\\(--axebow-border-gray\\) {\n border-color: var(--axebow-border-gray);\n }\n\n .border-\\(--axebow-dark-yellow\\) {\n border-color: var(--axebow-dark-yellow);\n }\n\n .border-\\(--axebow-error-border\\) {\n border-color: var(--axebow-error-border);\n }\n\n .border-\\(--axebow-gray\\) {\n border-color: var(--axebow-gray);\n }\n\n .border-\\(--axebow-light-gray\\) {\n border-color: var(--axebow-light-gray);\n }\n\n .border-\\(--axebow-premium-text\\) {\n border-color: var(--axebow-premium-text);\n }\n\n .border-\\(--axebow-primary\\) {\n border-color: var(--axebow-primary);\n }\n\n .border-\\(--axebow-table-border\\) {\n border-color: var(--axebow-table-border);\n }\n\n .border-\\(--axebow-table-header-border\\) {\n border-color: var(--axebow-table-header-border);\n }\n\n .border-\\(--axebow-tertiary\\) {\n border-color: var(--axebow-tertiary);\n }\n\n .border-\\(--axebow-white\\) {\n border-color: var(--axebow-white);\n }\n\n .border-\\[\\#0ECD9A80\\] {\n border-color: #0ecd9a80;\n }\n\n .border-\\[\\#344966\\] {\n border-color: #344966;\n }\n\n .border-\\[\\#DBDDE4\\] {\n border-color: #dbdde4;\n }\n\n .border-\\[var\\(--axebow-error\\)\\] {\n border-color: var(--axebow-error);\n }\n\n .border-\\[var\\(--axebow-gray\\)\\] {\n border-color: var(--axebow-gray);\n }\n\n .border-\\[var\\(--axebow-tertiary\\)\\] {\n border-color: var(--axebow-tertiary);\n }\n\n .border-black {\n border-color: var(--color-black);\n }\n\n .border-black\\/10 {\n border-color: #0000001a;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .border-black\\/10 {\n border-color: color-mix(in oklab, var(--color-black) 10%, transparent);\n }\n }\n\n .border-blue-200 {\n border-color: var(--color-blue-200);\n }\n\n .border-gray-100 {\n border-color: var(--color-gray-100);\n }\n\n .border-gray-200 {\n border-color: var(--color-gray-200);\n }\n\n .border-gray-300 {\n border-color: var(--color-gray-300);\n }\n\n .border-gray-400 {\n border-color: var(--color-gray-400);\n }\n\n .border-gray-500 {\n border-color: var(--color-gray-500);\n }\n\n .border-green-200 {\n border-color: var(--color-green-200);\n }\n\n .border-transparent {\n border-color: #0000;\n }\n\n .border-white {\n border-color: var(--color-white);\n }\n\n .bg-\\(--axebow-anti-flash-white\\) {\n background-color: var(--axebow-anti-flash-white);\n }\n\n .bg-\\(--axebow-base\\) {\n background-color: var(--axebow-base);\n }\n\n .bg-\\(--axebow-error\\) {\n background-color: var(--axebow-error);\n }\n\n .bg-\\(--axebow-error-bg\\) {\n background-color: var(--axebow-error-bg);\n }\n\n .bg-\\(--axebow-error-light\\) {\n background-color: var(--axebow-error-light);\n }\n\n .bg-\\(--axebow-gray\\) {\n background-color: var(--axebow-gray);\n }\n\n .bg-\\(--axebow-light-gray\\), .bg-\\(--axebow-light-gray\\)\\/80 {\n background-color: var(--axebow-light-gray);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .bg-\\(--axebow-light-gray\\)\\/80 {\n background-color: color-mix(in oklab, var(--axebow-light-gray) 80%, transparent);\n }\n }\n\n .bg-\\(--axebow-primary\\) {\n background-color: var(--axebow-primary);\n }\n\n .bg-\\(--axebow-primary-light\\) {\n background-color: var(--axebow-primary-light);\n }\n\n .bg-\\(--axebow-success\\) {\n background-color: var(--axebow-success);\n }\n\n .bg-\\(--axebow-tertiary\\), .bg-\\(--axebow-tertiary\\)\\/15 {\n background-color: var(--axebow-tertiary);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .bg-\\(--axebow-tertiary\\)\\/15 {\n background-color: color-mix(in oklab, var(--axebow-tertiary) 15%, transparent);\n }\n }\n\n .bg-\\(--axebow-warning\\) {\n background-color: var(--axebow-warning);\n }\n\n .bg-\\(--axebow-warning-bg\\) {\n background-color: var(--axebow-warning-bg);\n }\n\n .bg-\\(--axebow-white\\) {\n background-color: var(--axebow-white);\n }\n\n .bg-\\[\\#0ECD9A1A\\] {\n background-color: #0ecd9a1a;\n }\n\n .bg-\\[\\#006BFF\\] {\n background-color: #006bff;\n }\n\n .bg-\\[\\#78787A1A\\] {\n background-color: #78787a1a;\n }\n\n .bg-\\[\\#C7DCFA\\] {\n background-color: #c7dcfa;\n }\n\n .bg-\\[\\#F0F1F5\\] {\n background-color: #f0f1f5;\n }\n\n .bg-\\[\\#F3FDFA\\] {\n background-color: #f3fdfa;\n }\n\n .bg-blue-50 {\n background-color: var(--color-blue-50);\n }\n\n .bg-gray-50 {\n background-color: var(--color-gray-50);\n }\n\n .bg-gray-50\\/50 {\n background-color: #f9fafb80;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .bg-gray-50\\/50 {\n background-color: color-mix(in oklab, var(--color-gray-50) 50%, transparent);\n }\n }\n\n .bg-gray-100 {\n background-color: var(--color-gray-100);\n }\n\n .bg-gray-200 {\n background-color: var(--color-gray-200);\n }\n\n .bg-gray-300 {\n background-color: var(--color-gray-300);\n }\n\n .bg-green-50 {\n background-color: var(--color-green-50);\n }\n\n .bg-red-50 {\n background-color: var(--color-red-50);\n }\n\n .bg-red-100 {\n background-color: var(--color-red-100);\n }\n\n .bg-sky-50 {\n background-color: var(--color-sky-50);\n }\n\n .bg-sky-100 {\n background-color: var(--color-sky-100);\n }\n\n .bg-transparent {\n background-color: #0000;\n }\n\n .bg-white {\n background-color: var(--color-white);\n }\n\n .object-contain {\n object-fit: contain;\n }\n\n .object-cover {\n object-fit: cover;\n }\n\n .p-0 {\n padding: 0;\n }\n\n .p-1 {\n padding: var(--spacing);\n }\n\n .p-1\\.5 {\n padding: calc(var(--spacing) * 1.5);\n }\n\n .p-2 {\n padding: calc(var(--spacing) * 2);\n }\n\n .p-3 {\n padding: calc(var(--spacing) * 3);\n }\n\n .p-3\\.25 {\n padding: calc(var(--spacing) * 3.25);\n }\n\n .p-4 {\n padding: calc(var(--spacing) * 4);\n }\n\n .p-5 {\n padding: calc(var(--spacing) * 5);\n }\n\n .p-6 {\n padding: calc(var(--spacing) * 6);\n }\n\n .p-8 {\n padding: calc(var(--spacing) * 8);\n }\n\n .px-0\\.5 {\n padding-inline: calc(var(--spacing) * .5);\n }\n\n .px-1 {\n padding-inline: var(--spacing);\n }\n\n .px-1\\.5 {\n padding-inline: calc(var(--spacing) * 1.5);\n }\n\n .px-2 {\n padding-inline: calc(var(--spacing) * 2);\n }\n\n .px-3 {\n padding-inline: calc(var(--spacing) * 3);\n }\n\n .px-3\\.5 {\n padding-inline: calc(var(--spacing) * 3.5);\n }\n\n .px-4 {\n padding-inline: calc(var(--spacing) * 4);\n }\n\n .px-5 {\n padding-inline: calc(var(--spacing) * 5);\n }\n\n .px-6 {\n padding-inline: calc(var(--spacing) * 6);\n }\n\n .px-8 {\n padding-inline: calc(var(--spacing) * 8);\n }\n\n .py-0\\.5 {\n padding-block: calc(var(--spacing) * .5);\n }\n\n .py-1 {\n padding-block: var(--spacing);\n }\n\n .py-1\\.5 {\n padding-block: calc(var(--spacing) * 1.5);\n }\n\n .py-1\\.25 {\n padding-block: calc(var(--spacing) * 1.25);\n }\n\n .py-2 {\n padding-block: calc(var(--spacing) * 2);\n }\n\n .py-2\\.5 {\n padding-block: calc(var(--spacing) * 2.5);\n }\n\n .py-2\\.75 {\n padding-block: calc(var(--spacing) * 2.75);\n }\n\n .py-3 {\n padding-block: calc(var(--spacing) * 3);\n }\n\n .py-3\\.25 {\n padding-block: calc(var(--spacing) * 3.25);\n }\n\n .py-4 {\n padding-block: calc(var(--spacing) * 4);\n }\n\n .py-4\\.75 {\n padding-block: calc(var(--spacing) * 4.75);\n }\n\n .py-8 {\n padding-block: calc(var(--spacing) * 8);\n }\n\n .py-\\[0\\.71875rem\\] {\n padding-block: .71875rem;\n }\n\n .py-px {\n padding-block: 1px;\n }\n\n .ps-4 {\n padding-inline-start: calc(var(--spacing) * 4);\n }\n\n .ps-8 {\n padding-inline-start: calc(var(--spacing) * 8);\n }\n\n .pe-4 {\n padding-inline-end: calc(var(--spacing) * 4);\n }\n\n .pt-0\\.5 {\n padding-top: calc(var(--spacing) * .5);\n }\n\n .pt-1 {\n padding-top: var(--spacing);\n }\n\n .pt-2 {\n padding-top: calc(var(--spacing) * 2);\n }\n\n .pt-3 {\n padding-top: calc(var(--spacing) * 3);\n }\n\n .pt-4 {\n padding-top: calc(var(--spacing) * 4);\n }\n\n .pt-6 {\n padding-top: calc(var(--spacing) * 6);\n }\n\n .pt-8 {\n padding-top: calc(var(--spacing) * 8);\n }\n\n .pt-11\\.75 {\n padding-top: calc(var(--spacing) * 11.75);\n }\n\n .pt-px {\n padding-top: 1px;\n }\n\n .pr-1 {\n padding-right: var(--spacing);\n }\n\n .pr-2 {\n padding-right: calc(var(--spacing) * 2);\n }\n\n .pr-3 {\n padding-right: calc(var(--spacing) * 3);\n }\n\n .pr-3\\.25 {\n padding-right: calc(var(--spacing) * 3.25);\n }\n\n .pr-4 {\n padding-right: calc(var(--spacing) * 4);\n }\n\n .pr-4\\.5 {\n padding-right: calc(var(--spacing) * 4.5);\n }\n\n .pr-5 {\n padding-right: calc(var(--spacing) * 5);\n }\n\n .pr-14 {\n padding-right: calc(var(--spacing) * 14);\n }\n\n .pb-0 {\n padding-bottom: 0;\n }\n\n .pb-1 {\n padding-bottom: var(--spacing);\n }\n\n .pb-2 {\n padding-bottom: calc(var(--spacing) * 2);\n }\n\n .pb-3 {\n padding-bottom: calc(var(--spacing) * 3);\n }\n\n .pb-3\\.5 {\n padding-bottom: calc(var(--spacing) * 3.5);\n }\n\n .pb-4 {\n padding-bottom: calc(var(--spacing) * 4);\n }\n\n .pb-6 {\n padding-bottom: calc(var(--spacing) * 6);\n }\n\n .pl-1 {\n padding-left: var(--spacing);\n }\n\n .pl-1\\.5 {\n padding-left: calc(var(--spacing) * 1.5);\n }\n\n .pl-2 {\n padding-left: calc(var(--spacing) * 2);\n }\n\n .pl-4 {\n padding-left: calc(var(--spacing) * 4);\n }\n\n .pl-4\\.25 {\n padding-left: calc(var(--spacing) * 4.25);\n }\n\n .pl-5 {\n padding-left: calc(var(--spacing) * 5);\n }\n\n .pl-6 {\n padding-left: calc(var(--spacing) * 6);\n }\n\n .pl-8 {\n padding-left: calc(var(--spacing) * 8);\n }\n\n .pl-11\\.75 {\n padding-left: calc(var(--spacing) * 11.75);\n }\n\n .pl-px {\n padding-left: 1px;\n }\n\n .text-center {\n text-align: center;\n }\n\n .text-left {\n text-align: left;\n }\n\n .text-right {\n text-align: right;\n }\n\n .text-start {\n text-align: start;\n }\n\n .align-middle {\n vertical-align: middle;\n }\n\n .font-\\[Material_Symbols_Outlined\\] {\n font-family: Material Symbols Outlined;\n }\n\n .font-\\[inherit\\] {\n font-family: inherit;\n }\n\n .text-base {\n font-size: var(--text-base);\n line-height: var(--tw-leading, var(--text-base--line-height));\n }\n\n .text-lg {\n font-size: var(--text-lg);\n line-height: var(--tw-leading, var(--text-lg--line-height));\n }\n\n .text-md {\n font-size: var(--text-md);\n line-height: var(--tw-leading, var(--text-md--line-height));\n }\n\n .text-sm {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n\n .text-xl {\n font-size: var(--text-xl);\n line-height: var(--tw-leading, var(--text-xl--line-height));\n }\n\n .text-xs {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n\n .text-\\[0\\.9375rem\\] {\n font-size: .9375rem;\n }\n\n .text-\\[1\\.25rem\\] {\n font-size: 1.25rem;\n }\n\n .text-\\[18px\\] {\n font-size: 18px;\n }\n\n .leading-3\\.5 {\n --tw-leading: calc(var(--spacing) * 3.5);\n line-height: calc(var(--spacing) * 3.5);\n }\n\n .leading-4\\.25 {\n --tw-leading: calc(var(--spacing) * 4.25);\n line-height: calc(var(--spacing) * 4.25);\n }\n\n .leading-\\[1\\.125rem\\] {\n --tw-leading: 1.125rem;\n line-height: 1.125rem;\n }\n\n .leading-\\[1\\.0625rem\\] {\n --tw-leading: 1.0625rem;\n line-height: 1.0625rem;\n }\n\n .leading-\\[1\\.1875rem\\] {\n --tw-leading: 1.1875rem;\n line-height: 1.1875rem;\n }\n\n .leading-none {\n --tw-leading: 1;\n line-height: 1;\n }\n\n .leading-relaxed {\n --tw-leading: var(--leading-relaxed);\n line-height: var(--leading-relaxed);\n }\n\n .leading-snug {\n --tw-leading: var(--leading-snug);\n line-height: var(--leading-snug);\n }\n\n .leading-tight {\n --tw-leading: var(--leading-tight);\n line-height: var(--leading-tight);\n }\n\n .font-black {\n --tw-font-weight: var(--font-weight-black);\n font-weight: var(--font-weight-black);\n }\n\n .font-bold {\n --tw-font-weight: var(--font-weight-bold);\n font-weight: var(--font-weight-bold);\n }\n\n .font-light {\n --tw-font-weight: var(--font-weight-light);\n font-weight: var(--font-weight-light);\n }\n\n .font-medium {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n\n .font-normal {\n --tw-font-weight: var(--font-weight-normal);\n font-weight: var(--font-weight-normal);\n }\n\n .font-semibold {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n\n .tracking-wider {\n --tw-tracking: var(--tracking-wider);\n letter-spacing: var(--tracking-wider);\n }\n\n .wrap-break-word {\n overflow-wrap: break-word;\n }\n\n .break-all {\n word-break: break-all;\n }\n\n .text-ellipsis {\n text-overflow: ellipsis;\n }\n\n .whitespace-normal {\n white-space: normal;\n }\n\n .whitespace-nowrap {\n white-space: nowrap;\n }\n\n .text-\\(--axebow-anti-flash-white\\) {\n color: var(--axebow-anti-flash-white);\n }\n\n .text-\\(--axebow-black\\) {\n color: var(--axebow-black);\n }\n\n .text-\\(--axebow-error\\) {\n color: var(--axebow-error);\n }\n\n .text-\\(--axebow-gray\\) {\n color: var(--axebow-gray);\n }\n\n .text-\\(--axebow-primary\\) {\n color: var(--axebow-primary);\n }\n\n .text-\\(--axebow-rich-black\\) {\n color: var(--axebow-rich-black);\n }\n\n .text-\\(--axebow-secondary\\) {\n color: var(--axebow-secondary);\n }\n\n .text-\\(--axebow-strong-gray\\) {\n color: var(--axebow-strong-gray);\n }\n\n .text-\\(--axebow-success\\) {\n color: var(--axebow-success);\n }\n\n .text-\\(--axebow-tertiary\\) {\n color: var(--axebow-tertiary);\n }\n\n .text-\\(--axebow-text-gray\\) {\n color: var(--axebow-text-gray);\n }\n\n .text-\\(--hyperlink-color\\) {\n color: var(--hyperlink-color);\n }\n\n .text-\\[\\#8A94AE\\] {\n color: #8a94ae;\n }\n\n .text-\\[\\#78787A\\] {\n color: #78787a;\n }\n\n .text-\\[\\#344966\\] {\n color: #344966;\n }\n\n .text-\\[\\#E93A3A\\] {\n color: #e93a3a;\n }\n\n .text-\\[var\\(--axebow-clickable-blue\\)\\] {\n color: var(--axebow-clickable-blue);\n }\n\n .text-\\[var\\(--axebow-error\\)\\] {\n color: var(--axebow-error);\n }\n\n .text-\\[var\\(--axebow-gray\\)\\] {\n color: var(--axebow-gray);\n }\n\n .text-\\[var\\(--axebow-primary\\)\\] {\n color: var(--axebow-primary);\n }\n\n .text-black {\n color: var(--color-black);\n }\n\n .text-blue-600 {\n color: var(--color-blue-600);\n }\n\n .text-blue-800 {\n color: var(--color-blue-800);\n }\n\n .text-gray-300 {\n color: var(--color-gray-300);\n }\n\n .text-gray-400 {\n color: var(--color-gray-400);\n }\n\n .text-gray-500 {\n color: var(--color-gray-500);\n }\n\n .text-gray-600 {\n color: var(--color-gray-600);\n }\n\n .text-gray-700 {\n color: var(--color-gray-700);\n }\n\n .text-green-600 {\n color: var(--color-green-600);\n }\n\n .text-green-800 {\n color: var(--color-green-800);\n }\n\n .text-inherit {\n color: inherit;\n }\n\n .text-red-800 {\n color: var(--color-red-800);\n }\n\n .text-white {\n color: var(--color-white);\n }\n\n .text-yellow-600 {\n color: var(--color-yellow-600);\n }\n\n .text-yellow-800 {\n color: var(--color-yellow-800);\n }\n\n .capitalize {\n text-transform: capitalize;\n }\n\n .uppercase {\n text-transform: uppercase;\n }\n\n .italic {\n font-style: italic;\n }\n\n .not-italic {\n font-style: normal;\n }\n\n .no-underline {\n text-decoration-line: none;\n }\n\n .underline {\n text-decoration-line: underline;\n }\n\n .decoration-\\(--axebow-error\\) {\n -webkit-text-decoration-color: var(--axebow-error);\n -webkit-text-decoration-color: var(--axebow-error);\n text-decoration-color: var(--axebow-error);\n }\n\n .placeholder-gray-400::placeholder {\n color: var(--color-gray-400);\n }\n\n .accent-\\(--axebow-tertiary\\) {\n accent-color: var(--axebow-tertiary);\n }\n\n .opacity-0 {\n opacity: 0;\n }\n\n .opacity-50 {\n opacity: .5;\n }\n\n .opacity-60 {\n opacity: .6;\n }\n\n .opacity-70 {\n opacity: .7;\n }\n\n .opacity-100 {\n opacity: 1;\n }\n\n .shadow-\\[0_-8px_8px_-8px_rgba\\(13\\,24\\,33\\,0\\.15\\)\\] {\n --tw-shadow: 0 -8px 8px -8px var(--tw-shadow-color, #0d182126);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-\\[0_2px_6px_rgba\\(0\\,0\\,0\\,0\\.2\\)\\] {\n --tw-shadow: 0 2px 6px var(--tw-shadow-color, #0003);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-\\[0_4px_12px_rgba\\(0\\,0\\,0\\,0\\.1\\)\\] {\n --tw-shadow: 0 4px 12px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-\\[0_6px_16px_rgba\\(13\\,24\\,33\\,0\\.18\\)\\] {\n --tw-shadow: 0 6px 16px var(--tw-shadow-color, #0d18212e);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-\\[2px_2px_25px_0px_rgba\\(0\\,0\\,0\\,0\\.1\\)\\] {\n --tw-shadow: 2px 2px 25px 0px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-lg {\n --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-md {\n --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-none {\n --tw-shadow: 0 0 #0000;\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-sm {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .axebow-shadow-hover {\n transition: box-shadow .2s ease-in-out;\n }\n\n .axebow-shadow-hover:hover {\n box-shadow: 0 4px 12px #0d182114;\n }\n\n .outline {\n outline-style: var(--tw-outline-style);\n outline-width: 1px;\n }\n\n .blur {\n --tw-blur: blur(8px);\n filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );\n }\n\n .grayscale {\n --tw-grayscale: grayscale(100%);\n filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );\n }\n\n .filter {\n filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );\n }\n\n .backdrop-filter {\n -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );\n backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );\n }\n\n .transition {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-all {\n transition-property: all;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-colors {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-opacity {\n transition-property: opacity;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-shadow {\n transition-property: box-shadow;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-transform {\n transition-property: transform, translate, scale, rotate;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .delay-100 {\n transition-delay: .1s;\n }\n\n .duration-120 {\n --tw-duration: .12s;\n transition-duration: .12s;\n }\n\n .duration-150 {\n --tw-duration: .15s;\n transition-duration: .15s;\n }\n\n .duration-200 {\n --tw-duration: .2s;\n transition-duration: .2s;\n }\n\n .duration-300 {\n --tw-duration: .3s;\n transition-duration: .3s;\n }\n\n .ease-in-out {\n --tw-ease: var(--ease-in-out);\n transition-timing-function: var(--ease-in-out);\n }\n\n .ease-out {\n --tw-ease: var(--ease-out);\n transition-timing-function: var(--ease-out);\n }\n\n .outline-none {\n --tw-outline-style: none;\n outline-style: none;\n }\n\n .select-none {\n -webkit-user-select: none;\n user-select: none;\n }\n\n .\\[font-variation-settings\\:\\'FILL\\'_0\\,\\'wght\\'_400\\,\\'GRAD\\'_0\\,\\'opsz\\'_24\\] {\n font-variation-settings: \"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24;\n }\n\n .\\[font-variation-settings\\:\\'FILL\\'_1\\,\\'wght\\'_400\\,\\'GRAD\\'_0\\,\\'opsz\\'_24\\] {\n font-variation-settings: \"FILL\" 1,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24;\n }\n\n @media (hover: hover) {\n .group-hover\\:pointer-events-auto:is(:where(.group):hover *) {\n pointer-events: auto;\n }\n\n .group-hover\\:translate-x-0:is(:where(.group):hover *) {\n --tw-translate-x: 0;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .group-hover\\:rotate-15:is(:where(.group):hover *) {\n rotate: 15deg;\n }\n\n .group-hover\\:font-semibold:is(:where(.group):hover *) {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n\n .group-hover\\:text-\\(--axebow-gray\\):is(:where(.group):hover *) {\n color: var(--axebow-gray);\n }\n\n .group-hover\\:text-\\(--axebow-primary\\):is(:where(.group):hover *) {\n color: var(--axebow-primary);\n }\n\n .group-hover\\:opacity-100:is(:where(.group):hover *) {\n opacity: 1;\n }\n }\n\n .last\\:border-b-0:last-child {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 0;\n }\n\n .focus-within\\:border-black:focus-within {\n border-color: var(--color-black);\n }\n\n .focus-within\\:border-blue-500:focus-within {\n border-color: var(--color-blue-500);\n }\n\n .focus-within\\:ring-2:focus-within {\n --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .focus-within\\:ring-blue-100:focus-within {\n --tw-ring-color: var(--color-blue-100);\n }\n\n @media (hover: hover) {\n .hover\\:-translate-y-1:hover {\n --tw-translate-y: calc(var(--spacing) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .hover\\:scale-105:hover {\n --tw-scale-x: 105%;\n --tw-scale-y: 105%;\n --tw-scale-z: 105%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n\n .hover\\:scale-110:hover {\n --tw-scale-x: 110%;\n --tw-scale-y: 110%;\n --tw-scale-z: 110%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n\n .hover\\:border-\\(--axebow-gray\\):hover {\n border-color: var(--axebow-gray);\n }\n\n .hover\\:border-\\(--axebow-tertiary\\):hover, .hover\\:border-\\[var\\(--axebow-tertiary\\)\\]:hover {\n border-color: var(--axebow-tertiary);\n }\n\n .hover\\:border-red-300:hover {\n border-color: var(--color-red-300);\n }\n\n .hover\\:bg-\\(--axebow-anti-flash-white\\):hover {\n background-color: var(--axebow-anti-flash-white);\n }\n\n .hover\\:bg-\\(--axebow-base\\):hover {\n background-color: var(--axebow-base);\n }\n\n .hover\\:bg-\\(--axebow-gray\\):hover {\n background-color: var(--axebow-gray);\n }\n\n .hover\\:bg-\\(--axebow-light-gray\\):hover {\n background-color: var(--axebow-light-gray);\n }\n\n .hover\\:bg-\\(--axebow-primary\\):hover {\n background-color: var(--axebow-primary);\n }\n\n .hover\\:bg-\\[var\\(--axebow-anti-flash-white\\)\\]:hover {\n background-color: var(--axebow-anti-flash-white);\n }\n\n .hover\\:bg-gray-50:hover {\n background-color: var(--color-gray-50);\n }\n\n .hover\\:bg-gray-100:hover {\n background-color: var(--color-gray-100);\n }\n\n .hover\\:bg-gray-200:hover {\n background-color: var(--color-gray-200);\n }\n\n .hover\\:bg-red-50:hover {\n background-color: var(--color-red-50);\n }\n\n .hover\\:bg-white:hover {\n background-color: var(--color-white);\n }\n\n .hover\\:font-semibold:hover {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n\n .hover\\:text-\\(--axebow-error\\):hover {\n color: var(--axebow-error);\n }\n\n .hover\\:text-\\(--axebow-gray\\):hover {\n color: var(--axebow-gray);\n }\n\n .hover\\:text-\\(--axebow-primary\\):hover {\n color: var(--axebow-primary);\n }\n\n .hover\\:text-\\(--axebow-tertiary\\):hover {\n color: var(--axebow-tertiary);\n }\n\n .hover\\:text-black:hover {\n color: var(--color-black);\n }\n\n .hover\\:underline:hover {\n text-decoration-line: underline;\n }\n\n .hover\\:opacity-80:hover {\n opacity: .8;\n }\n\n .hover\\:opacity-100:hover {\n opacity: 1;\n }\n\n .hover\\:shadow-\\[0_2px_6px_rgba\\(13\\,24\\,33\\,0\\.14\\)\\]:hover {\n --tw-shadow: 0 2px 6px var(--tw-shadow-color, #0d182124);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .hover\\:shadow-\\[0_4px_12px_0_rgba\\(13\\,24\\,33\\,0\\.08\\)\\]:hover {\n --tw-shadow: 0 4px 12px 0 var(--tw-shadow-color, #0d182114);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n\n .focus\\:outline-2:focus {\n outline-style: var(--tw-outline-style);\n outline-width: 2px;\n }\n\n .focus\\:outline-offset-1:focus {\n outline-offset: 1px;\n }\n\n .focus\\:outline-blue-500:focus {\n outline-color: var(--color-blue-500);\n }\n\n .focus\\:outline-none:focus {\n --tw-outline-style: none;\n outline-style: none;\n }\n\n .focus-visible\\:ring-2:focus-visible {\n --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .focus-visible\\:ring-\\[\\#006BFF\\]:focus-visible {\n --tw-ring-color: #006bff;\n }\n\n .focus-visible\\:outline-2:focus-visible {\n outline-style: var(--tw-outline-style);\n outline-width: 2px;\n }\n\n .focus-visible\\:outline-\\(--axebow-tertiary\\):focus-visible {\n outline-color: var(--axebow-tertiary);\n }\n\n .active\\:scale-95:active {\n --tw-scale-x: 95%;\n --tw-scale-y: 95%;\n --tw-scale-z: 95%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n\n .active\\:cursor-grabbing:active {\n cursor: grabbing;\n }\n\n @media (hover: hover) {\n .enabled\\:hover\\:text-\\(--hyperlink-hover-color\\):enabled:hover {\n color: var(--hyperlink-hover-color);\n }\n }\n\n .disabled\\:cursor-not-allowed:disabled {\n cursor: not-allowed;\n }\n\n .disabled\\:opacity-50:disabled {\n opacity: .5;\n }\n\n @media not all and (min-width: 46.875rem) {\n .max-\\[46\\.875rem\\]\\:gap-2 {\n gap: calc(var(--spacing) * 2);\n }\n\n .max-\\[46\\.875rem\\]\\:text-sm {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n }\n\n @media (min-width: 40rem) {\n .sm\\:max-h-56 {\n max-height: calc(var(--spacing) * 56);\n }\n\n .sm\\:grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n .sm\\:px-1 {\n padding-inline: var(--spacing);\n }\n\n .sm\\:text-lg {\n font-size: var(--text-lg);\n line-height: var(--tw-leading, var(--text-lg--line-height));\n }\n }\n\n @media (min-width: 48rem) {\n .md\\:max-h-75 {\n max-height: var(--spacing-75);\n }\n\n .md\\:grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n\n .md\\:gap-8 {\n gap: calc(var(--spacing) * 8);\n }\n }\n\n @media (min-width: 64rem) {\n .lg\\:sticky {\n position: sticky;\n }\n\n .lg\\:block {\n display: block;\n }\n\n .lg\\:flex {\n display: flex;\n }\n\n .lg\\:hidden {\n display: none;\n }\n\n .lg\\:inline {\n display: inline;\n }\n\n .lg\\:h-\\(--card-fixed-height\\) {\n height: var(--card-fixed-height);\n }\n\n .lg\\:min-h-\\(--card-height\\) {\n min-height: var(--card-height);\n }\n\n .lg\\:min-h-\\[calc\\(100vh-7\\.25rem\\)\\] {\n min-height: calc(100vh - 7.25rem);\n }\n\n .lg\\:w-\\(--card-width\\) {\n width: var(--card-width);\n }\n\n .lg\\:w-194\\.5 {\n width: calc(var(--spacing) * 194.5);\n }\n\n .lg\\:w-auto {\n width: auto;\n }\n\n .lg\\:min-w-150 {\n min-width: var(--spacing-150);\n }\n\n .lg\\:cursor-default {\n cursor: default;\n }\n\n .lg\\:grid-cols-4 {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n }\n\n .lg\\:flex-row {\n flex-direction: row;\n }\n\n .lg\\:gap-7\\.75 {\n gap: calc(var(--spacing) * 7.75);\n }\n\n .lg\\:rounded-md {\n border-radius: var(--radius-md);\n }\n\n .lg\\:border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n\n .lg\\:text-base {\n font-size: var(--text-base);\n line-height: var(--tw-leading, var(--text-base--line-height));\n }\n\n .lg\\:text-lg {\n font-size: var(--text-lg);\n line-height: var(--tw-leading, var(--text-lg--line-height));\n }\n\n .lg\\:text-xl {\n font-size: var(--text-xl);\n line-height: var(--tw-leading, var(--text-xl--line-height));\n }\n\n .lg\\:shadow {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n}\n\n:host {\n font-family: var(--font-sans);\n font-size: var(--text-base);\n line-height: var(--text-base--line-height);\n --font-sans: \"Open Sans\", sans-serif;\n --text-xs: .625rem;\n --text-xs--line-height: .875rem;\n --text-sm: .75rem;\n --text-sm--line-height: 1rem;\n --text-base: .875rem;\n --text-base--line-height: 1.25rem;\n --text-md: 1rem;\n --text-md--line-height: 1.5rem;\n --text-lg: 1.125rem;\n --text-lg--line-height: 1.75rem;\n --text-xl: 1.25rem;\n --text-xl--line-height: 1.75rem;\n --text-2xl: 1.5rem;\n --text-2xl--line-height: 2rem;\n --text-3xl: 1.875rem;\n --text-3xl--line-height: 2.25rem;\n --text-4xl: 2.25rem;\n --text-4xl--line-height: 2.5rem;\n --text-5xl: 3rem;\n --text-5xl--line-height: 1;\n --text-6xl: 3.75rem;\n --text-6xl--line-height: 1;\n --text-7xl: 4.5rem;\n --text-7xl--line-height: 1;\n --text-8xl: 4.625rem;\n --text-8xl--line-height: 1;\n --text-9xl: 6.125rem;\n --text-9xl--line-height: 1;\n}\n\n:root {\n --sl-font-sans: \"Open Sans\", sans-serif;\n --sl-font-size-2x-small: var(--text-xs);\n --sl-font-size-x-small: var(--text-xs);\n --sl-font-size-small: var(--text-sm);\n --sl-font-size-medium: var(--text-base);\n --sl-font-size-large: var(--text-md);\n --sl-font-size-x-large: var(--text-lg);\n --sl-font-size-2x-large: var(--text-xl);\n --sl-font-size-3x-large: var(--text-3xl);\n --sl-font-size-4x-large: var(--text-5xl);\n --sl-input-font-size-small: var(--text-sm);\n --sl-input-font-size-medium: var(--text-base);\n --sl-input-font-size-large: var(--text-md);\n --sl-button-font-size-small: var(--text-sm);\n --sl-button-font-size-medium: var(--text-base);\n --sl-button-font-size-large: var(--text-md);\n --sl-tooltip-font-size: var(--text-base);\n}\n\nbutton, input, select, textarea {\n font-family: inherit;\n font-size: inherit;\n}\n\ninput, select, textarea, sl-menu-item::part(label), sl-option::part(label) {\n font-size: var(--text-base);\n}\n\n:root {\n --axebow-scrollbar-line-color: var(--axebow-tertiary, #e51c8e);\n --axebow-scrollbar-track-color: #f0f1f5;\n --axebow-scrollbar-thumb-color: #cbd5e1;\n --axebow-scrollbar-thumb-hover-color: #94a3b8;\n}\n\nsl-select::part(listbox)::-webkit-scrollbar {\n border-left: 2px solid var(--axebow-scrollbar-line-color);\n width: 11px;\n height: 11px;\n}\n\nsl-dropdown::part(panel)::-webkit-scrollbar {\n border-left: 2px solid var(--axebow-scrollbar-line-color);\n width: 11px;\n height: 11px;\n}\n\nsl-menu::part(base)::-webkit-scrollbar {\n border-left: 2px solid var(--axebow-scrollbar-line-color);\n width: 11px;\n height: 11px;\n}\n\nsl-select::part(listbox)::-webkit-scrollbar-button {\n display: none;\n}\n\nsl-dropdown::part(panel)::-webkit-scrollbar-button {\n display: none;\n}\n\nsl-menu::part(base)::-webkit-scrollbar-button {\n display: none;\n}\n\nsl-select::part(listbox)::-webkit-scrollbar-track {\n background-color: var(--axebow-scrollbar-track-color);\n background-clip: padding-box;\n border: 2px solid #0000;\n border-left-width: 3px;\n border-radius: 9999px;\n}\n\nsl-dropdown::part(panel)::-webkit-scrollbar-track {\n background-color: var(--axebow-scrollbar-track-color);\n background-clip: padding-box;\n border: 2px solid #0000;\n border-left-width: 3px;\n border-radius: 9999px;\n}\n\nsl-menu::part(base)::-webkit-scrollbar-track {\n background-color: var(--axebow-scrollbar-track-color);\n background-clip: padding-box;\n border: 2px solid #0000;\n border-left-width: 3px;\n border-radius: 9999px;\n}\n\nsl-select::part(listbox)::-webkit-scrollbar-thumb {\n background-color: var(--axebow-scrollbar-thumb-color);\n background-clip: padding-box;\n border: 2px solid #0000;\n border-left-width: 3px;\n border-radius: 9999px;\n}\n\nsl-dropdown::part(panel)::-webkit-scrollbar-thumb {\n background-color: var(--axebow-scrollbar-thumb-color);\n background-clip: padding-box;\n border: 2px solid #0000;\n border-left-width: 3px;\n border-radius: 9999px;\n}\n\nsl-menu::part(base)::-webkit-scrollbar-thumb {\n background-color: var(--axebow-scrollbar-thumb-color);\n background-clip: padding-box;\n border: 2px solid #0000;\n border-left-width: 3px;\n border-radius: 9999px;\n}\n\nsl-select::part(listbox)::-webkit-scrollbar-thumb:hover {\n background-color: var(--axebow-scrollbar-thumb-hover-color);\n}\n\nsl-dropdown::part(panel)::-webkit-scrollbar-thumb:hover {\n background-color: var(--axebow-scrollbar-thumb-hover-color);\n}\n\nsl-menu::part(base)::-webkit-scrollbar-thumb:hover {\n background-color: var(--axebow-scrollbar-thumb-hover-color);\n}\n\nsl-select::part(listbox), sl-dropdown::part(panel), sl-menu::part(base) {\n scrollbar-width: thin;\n scrollbar-color: var(--axebow-scrollbar-thumb-color) transparent;\n}\n\nsl-select::part(listbox), sl-select::part(menu) {\n width: max-content !important;\n min-width: 100% !important;\n max-width: 90vw !important;\n}\n\n:root, sl-input::part(base), sl-select::part(combobox), sl-textarea::part(base) {\n --sl-input-focus-ring-color: transparent;\n --sl-input-border-color-focus: var(--axebow-black, #000);\n --sl-focus-ring-color: transparent;\n}\n\nsl-input:focus-within::part(base), sl-select:focus-within::part(combobox), sl-textarea:focus-within::part(base) {\n border-color: var(--axebow-black, #000) !important;\n box-shadow: none !important;\n outline: none !important;\n}\n\n.axebow-blue-button::part(base) {\n background-color: var(--axebow-tertiary);\n}\n\n.info-container-page {\n flex-wrap: wrap;\n display: flex;\n}\n\nsl-divider {\n background: var(--axebow-light-gray);\n height: 1px;\n margin-top: .5rem;\n margin-bottom: .5rem;\n}\n\n.axebow-shadow {\n box-shadow: 2px 2px 25px #0000001a;\n}\n\n@property --tw-translate-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-translate-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-translate-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-rotate-x {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-rotate-y {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-rotate-z {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-skew-x {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-skew-y {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-space-y-reverse {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-border-style {\n syntax: \"*\";\n inherits: false;\n initial-value: solid;\n}\n\n@property --tw-leading {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-font-weight {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-tracking {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-shadow-color {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n\n@property --tw-inset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-inset-shadow-color {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-inset-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n\n@property --tw-ring-color {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-inset-ring-color {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-inset-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-ring-inset {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-ring-offset-width {\n syntax: \"<length>\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-ring-offset-color {\n syntax: \"*\";\n inherits: false;\n initial-value: #fff;\n}\n\n@property --tw-ring-offset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-outline-style {\n syntax: \"*\";\n inherits: false;\n initial-value: solid;\n}\n\n@property --tw-blur {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-brightness {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-contrast {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-grayscale {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-hue-rotate {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-invert {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-opacity {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-saturate {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-sepia {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-drop-shadow {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-drop-shadow-color {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-drop-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n\n@property --tw-drop-shadow-size {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-backdrop-blur {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-backdrop-brightness {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-backdrop-contrast {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-backdrop-grayscale {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-backdrop-hue-rotate {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-backdrop-invert {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-backdrop-opacity {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-backdrop-saturate {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-backdrop-sepia {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-duration {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-ease {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-scale-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 1;\n}\n\n@property --tw-scale-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 1;\n}\n\n@property --tw-scale-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 1;\n}\n\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n";
222
222
  //#endregion
223
223
  //#region \0@oxc-project+runtime@0.139.0/helpers/esm/decorate.js
224
224
  function __decorate(decorators, target, key, desc) {
@@ -594,7 +594,7 @@ var AxebowButton = class AxebowButton extends LitElement {
594
594
  this._guardDisabledClick = (event) => {
595
595
  if (this.disabled || this.loading) {
596
596
  event.preventDefault();
597
- event.stopPropagation();
597
+ event.stopImmediatePropagation();
598
598
  }
599
599
  };
600
600
  this.addEventListener("click", this._guardDisabledClick, { capture: true });
@@ -1637,12 +1637,9 @@ var AxebowHeaderActions = class AxebowHeaderActions extends LitElement {
1637
1637
  this.onLogout = () => {};
1638
1638
  this.notificationsLabel = "";
1639
1639
  this.notifications = [];
1640
- this.actionNeededNotifications = [];
1641
1640
  this.myNotificationsTabLabel = "";
1642
- this.actionNeededTabLabel = "";
1643
1641
  this.noNotificationsLabel = "";
1644
1642
  this.noUnreadNotificationsLabel = "";
1645
- this.noActionNotificationsLabel = "";
1646
1643
  this.showUnreadOnlyLabel = "";
1647
1644
  this.onLabel = "";
1648
1645
  this.offLabel = "";
@@ -1710,10 +1707,9 @@ var AxebowHeaderActions = class AxebowHeaderActions extends LitElement {
1710
1707
  </div>
1711
1708
  <sl-tab-group class="bg-white rounded-md w-120 text-base">
1712
1709
  <sl-tab slot="nav" panel="my_notifications">${this.myNotificationsTabLabel}</sl-tab>
1713
- <sl-tab slot="nav" panel="action_needed">${this.actionNeededTabLabel}</sl-tab>
1714
1710
 
1715
1711
  <sl-tab-panel class="bg-gray-100" name="my_notifications">
1716
- <div class="flex flex-col gap-2 px-4 max-h-[40vh] overflow-auto w-full">
1712
+ <div class="flex flex-col gap-2 px-4 pb-4 max-h-[40vh] overflow-auto w-full">
1717
1713
  ${this.notifications.length === 0 ? this.renderEmptyState(this.noNotificationsLabel) : html`
1718
1714
  <div class="flex flex-col text-black gap-4">
1719
1715
  <div class="flex justify-between items-center flex-wrap gap-4">
@@ -1736,15 +1732,6 @@ var AxebowHeaderActions = class AxebowHeaderActions extends LitElement {
1736
1732
  `}
1737
1733
  </div>
1738
1734
  </sl-tab-panel>
1739
- <sl-tab-panel class="bg-gray-100" name="action_needed">
1740
- <div class="flex flex-col gap-2 px-4 max-h-[40vh] overflow-auto w-full">
1741
- ${this.actionNeededNotifications.length === 0 ? this.renderEmptyState(this.noActionNotificationsLabel) : html`
1742
- <div class="flex flex-col text-black gap-4">
1743
- ${this.actionNeededNotifications.map((item) => this.renderNotificationCard(item))}
1744
- </div>
1745
- `}
1746
- </div>
1747
- </sl-tab-panel>
1748
1735
  </sl-tab-group>
1749
1736
  </sl-dropdown>
1750
1737
  <sl-dropdown class="shrink-0">
@@ -1828,12 +1815,9 @@ __decorate([property({ type: String })], AxebowHeaderActions.prototype, "logoutL
1828
1815
  __decorate([property({ attribute: false })], AxebowHeaderActions.prototype, "onLogout", void 0);
1829
1816
  __decorate([property({ type: String })], AxebowHeaderActions.prototype, "notificationsLabel", void 0);
1830
1817
  __decorate([property({ type: Array })], AxebowHeaderActions.prototype, "notifications", void 0);
1831
- __decorate([property({ type: Array })], AxebowHeaderActions.prototype, "actionNeededNotifications", void 0);
1832
1818
  __decorate([property({ type: String })], AxebowHeaderActions.prototype, "myNotificationsTabLabel", void 0);
1833
- __decorate([property({ type: String })], AxebowHeaderActions.prototype, "actionNeededTabLabel", void 0);
1834
1819
  __decorate([property({ type: String })], AxebowHeaderActions.prototype, "noNotificationsLabel", void 0);
1835
1820
  __decorate([property({ type: String })], AxebowHeaderActions.prototype, "noUnreadNotificationsLabel", void 0);
1836
- __decorate([property({ type: String })], AxebowHeaderActions.prototype, "noActionNotificationsLabel", void 0);
1837
1821
  __decorate([property({ type: String })], AxebowHeaderActions.prototype, "showUnreadOnlyLabel", void 0);
1838
1822
  __decorate([property({ type: String })], AxebowHeaderActions.prototype, "onLabel", void 0);
1839
1823
  __decorate([property({ type: String })], AxebowHeaderActions.prototype, "offLabel", void 0);
@@ -1865,12 +1849,9 @@ var AxebowHeader = class AxebowHeader extends LitElement {
1865
1849
  this.onLogout = () => {};
1866
1850
  this.notificationsLabel = "";
1867
1851
  this.notifications = [];
1868
- this.actionNeededNotifications = [];
1869
1852
  this.myNotificationsTabLabel = "";
1870
- this.actionNeededTabLabel = "";
1871
1853
  this.noNotificationsLabel = "";
1872
1854
  this.noUnreadNotificationsLabel = "";
1873
- this.noActionNotificationsLabel = "";
1874
1855
  this.showUnreadOnlyLabel = "";
1875
1856
  this.onLabel = "";
1876
1857
  this.offLabel = "";
@@ -1918,12 +1899,9 @@ var AxebowHeader = class AxebowHeader extends LitElement {
1918
1899
  .onLogout=${this.onLogout}
1919
1900
  .notificationsLabel=${this.notificationsLabel}
1920
1901
  .notifications=${this.notifications}
1921
- .actionNeededNotifications=${this.actionNeededNotifications}
1922
1902
  .myNotificationsTabLabel=${this.myNotificationsTabLabel}
1923
- .actionNeededTabLabel=${this.actionNeededTabLabel}
1924
1903
  .noNotificationsLabel=${this.noNotificationsLabel}
1925
1904
  .noUnreadNotificationsLabel=${this.noUnreadNotificationsLabel}
1926
- .noActionNotificationsLabel=${this.noActionNotificationsLabel}
1927
1905
  .showUnreadOnlyLabel=${this.showUnreadOnlyLabel}
1928
1906
  .onLabel=${this.onLabel}
1929
1907
  .offLabel=${this.offLabel}
@@ -1957,12 +1935,9 @@ __decorate([property({ type: String })], AxebowHeader.prototype, "logoutLabel",
1957
1935
  __decorate([property({ attribute: false })], AxebowHeader.prototype, "onLogout", void 0);
1958
1936
  __decorate([property({ type: String })], AxebowHeader.prototype, "notificationsLabel", void 0);
1959
1937
  __decorate([property({ type: Array })], AxebowHeader.prototype, "notifications", void 0);
1960
- __decorate([property({ type: Array })], AxebowHeader.prototype, "actionNeededNotifications", void 0);
1961
1938
  __decorate([property({ type: String })], AxebowHeader.prototype, "myNotificationsTabLabel", void 0);
1962
- __decorate([property({ type: String })], AxebowHeader.prototype, "actionNeededTabLabel", void 0);
1963
1939
  __decorate([property({ type: String })], AxebowHeader.prototype, "noNotificationsLabel", void 0);
1964
1940
  __decorate([property({ type: String })], AxebowHeader.prototype, "noUnreadNotificationsLabel", void 0);
1965
- __decorate([property({ type: String })], AxebowHeader.prototype, "noActionNotificationsLabel", void 0);
1966
1941
  __decorate([property({ type: String })], AxebowHeader.prototype, "showUnreadOnlyLabel", void 0);
1967
1942
  __decorate([property({ type: String })], AxebowHeader.prototype, "onLabel", void 0);
1968
1943
  __decorate([property({ type: String })], AxebowHeader.prototype, "offLabel", void 0);
@@ -3922,6 +3897,8 @@ var AxebowRegistrySelector = class AxebowRegistrySelector extends LitElement {
3922
3897
  constructor(..._args) {
3923
3898
  super(..._args);
3924
3899
  this.disabled = false;
3900
+ this.hideTabs = false;
3901
+ this.required = true;
3925
3902
  this.activeTab = 0;
3926
3903
  this.registries = [];
3927
3904
  this.selectedRegistry = "";
@@ -3973,7 +3950,7 @@ var AxebowRegistrySelector = class AxebowRegistrySelector extends LitElement {
3973
3950
  <axebow-input
3974
3951
  .disabled=${this.disabled}
3975
3952
  label="${this.labels.registryLabel}"
3976
- required
3953
+ ?required=${this.required}
3977
3954
  description="${this.labels.registryDescription}"
3978
3955
  controlType="carousel"
3979
3956
  .value="${this.selectedRegistry}"
@@ -4034,6 +4011,9 @@ var AxebowRegistrySelector = class AxebowRegistrySelector extends LitElement {
4034
4011
  `;
4035
4012
  }
4036
4013
  render() {
4014
+ if (this.hideTabs) return html`
4015
+ <div class="w-full max-w-194.25 p-4 bg-white rounded-xl box-border">${this._renderRegistryCarousel()}</div>
4016
+ `;
4037
4017
  return html`
4038
4018
  <axebow-tab-selector
4039
4019
  class="w-full"
@@ -4051,6 +4031,8 @@ var AxebowRegistrySelector = class AxebowRegistrySelector extends LitElement {
4051
4031
  }
4052
4032
  };
4053
4033
  __decorate([property({ type: Boolean })], AxebowRegistrySelector.prototype, "disabled", void 0);
4034
+ __decorate([property({ type: Boolean })], AxebowRegistrySelector.prototype, "hideTabs", void 0);
4035
+ __decorate([property({ type: Boolean })], AxebowRegistrySelector.prototype, "required", void 0);
4054
4036
  __decorate([property({ type: Number })], AxebowRegistrySelector.prototype, "activeTab", void 0);
4055
4037
  __decorate([property({ type: Array })], AxebowRegistrySelector.prototype, "registries", void 0);
4056
4038
  __decorate([property({ type: String })], AxebowRegistrySelector.prototype, "selectedRegistry", void 0);
@@ -5229,7 +5211,7 @@ var AxebowResourcesCounter = class AxebowResourcesCounter extends LitElement {
5229
5211
  }
5230
5212
  render() {
5231
5213
  return html`
5232
- <div class="w-121 h-7 bg-white py-1 px-2 rounded flex items-center justify-between gap-[0.53125rem] box-border">
5214
+ <div class="w-full bg-white py-1 px-2 rounded flex items-center justify-between gap-[0.53125rem] box-border">
5233
5215
  ${this.items.map((item, index) => html`
5234
5216
  ${index > 0 ? html`<span class="shrink-0 inline-flex items-center"
5235
5217
  >&nbsp;<div class="w-1.75 h-5 shrink-0 inline-flex items-center justify-center text-gray-300">
@@ -5422,7 +5404,7 @@ var AxebowDragDropUploadFile = class AxebowDragDropUploadFile extends LitElement
5422
5404
  render() {
5423
5405
  return html`
5424
5406
  <div
5425
- class="dropzone w-full h-[8.26375rem] box-border flex flex-col items-center justify-center overflow-hidden border-2 border-dashed rounded-md p-4 text-center transition-all duration-300 ease-in-out cursor-pointer ${this.errorMessage ? "border-[var(--axebow-error)] bg-red-50" : this.fileName ? "border-[var(--axebow-tertiary)] bg-sky-50" : this._isDragging ? "is-active border-[var(--axebow-tertiary)] bg-sky-100 scale-[1.02]" : "border-gray-300 bg-white hover:border-[var(--axebow-tertiary)] hover:bg-gray-50"}"
5407
+ class="dropzone w-full h-[6.8125rem] box-border flex flex-col items-center justify-center overflow-hidden border-2 border-dashed rounded-md p-4 text-center transition-all duration-300 ease-in-out cursor-pointer ${this.errorMessage ? "border-[var(--axebow-error)] bg-red-50" : this.fileName ? "border-[var(--axebow-tertiary)] bg-sky-50" : this._isDragging ? "is-active border-[var(--axebow-tertiary)] bg-sky-100 scale-[1.02]" : "border-gray-300 bg-white hover:border-[var(--axebow-tertiary)] hover:bg-gray-50"}"
5426
5408
  @click=${this._triggerFileInput}
5427
5409
  @dragover=${this._handleDragOver}
5428
5410
  @dragleave=${this._handleDragLeave}
@@ -5616,12 +5598,12 @@ var AxebowRuntimeZipDialog = class AxebowRuntimeZipDialog extends LitElement {
5616
5598
  axebowTheme,
5617
5599
  css`
5618
5600
  sl-dialog {
5619
- --width: 36.1875rem;
5601
+ --width: 40rem;
5620
5602
  }
5621
5603
  sl-dialog::part(panel) {
5622
5604
  background-color: var(--axebow-base);
5623
- width: 36.1875rem;
5624
- height: 44.51375rem;
5605
+ width: 40rem;
5606
+ height: 41.6875rem;
5625
5607
  padding: 1.5rem;
5626
5608
  box-sizing: border-box;
5627
5609
  display: flex;
@@ -5640,7 +5622,7 @@ var AxebowRuntimeZipDialog = class AxebowRuntimeZipDialog extends LitElement {
5640
5622
  overflow-x: hidden;
5641
5623
  display: flex;
5642
5624
  flex-direction: column;
5643
- gap: 1.5rem;
5625
+ gap: 1rem;
5644
5626
  }
5645
5627
  sl-dialog::part(footer) {
5646
5628
  display: none;
@@ -5658,7 +5640,7 @@ var AxebowRuntimeZipDialog = class AxebowRuntimeZipDialog extends LitElement {
5658
5640
  else this.onClose?.();
5659
5641
  }}
5660
5642
  >
5661
- <div class="flex flex-col gap-6 shrink-0 pl-11.75">
5643
+ <div class="flex flex-col gap-4 shrink-0 pl-11.75">
5662
5644
  <div class="flex items-center justify-between gap-2">
5663
5645
  <h2 class="m-0 text-xl font-semibold">${this.labels.title}</h2>
5664
5646
  <div
@@ -5668,7 +5650,7 @@ var AxebowRuntimeZipDialog = class AxebowRuntimeZipDialog extends LitElement {
5668
5650
  <axebow-icon iconName="cancel" iconColor="var(--axebow-gray)" size="xl"></axebow-icon>
5669
5651
  </div>
5670
5652
  </div>
5671
- <p class="w-120.75 h-21.25 leading-4.25 m-0">
5653
+ <p class="leading-4.25 m-0">
5672
5654
  ${this.labels.uploadDescriptionPrefix}<br /><br />
5673
5655
  "${this.tenantName} &gt; ${this.accountName} &gt;
5674
5656
  <span class="text-(--axebow-primary)">${this.environmentName}</span>".<br /><br />
@@ -5676,31 +5658,19 @@ var AxebowRuntimeZipDialog = class AxebowRuntimeZipDialog extends LitElement {
5676
5658
  </p>
5677
5659
  </div>
5678
5660
 
5679
- <div class="flex flex-col gap-4 pl-11.75">
5661
+ <div class="flex flex-col gap-4 pl-11.75 ${this.resourceLimits.length > 0 ? "mt-2" : ""}">
5680
5662
  ${this.resourceLimits.length > 0 ? html`<axebow-resources-counter .items=${this.resourceLimits}></axebow-resources-counter>` : ""}
5681
5663
 
5682
- <axebow-banner
5683
- type="warning"
5684
- rounded
5685
- dismissible
5686
- compact
5687
- style="width: 30.25rem; height: 5.75rem; overflow: hidden;"
5688
- >
5689
- <p class="m-0 font-medium text-base leading-[1.21875rem]">
5664
+ <axebow-banner type="warning" rounded dismissible compact>
5665
+ <p class="m-0 font-medium text-base leading-[1.125rem]">
5690
5666
  <strong>${this.labels.zipWarningStrong} </strong>${this.labels.zipWarningEg}
5691
5667
  <strong>${this.labels.zipWarningCannotValidate}</strong> ${this.labels.zipWarningFailing}
5692
5668
  </p>
5693
5669
  </axebow-banner>
5694
5670
 
5695
- <axebow-divider
5696
- width="100%"
5697
- color="var(--axebow-gray)"
5698
- margin="0"
5699
- style="max-width: 30.25rem;"
5700
- ></axebow-divider>
5671
+ <axebow-divider width="100%" color="#dbdde4" margin="0"></axebow-divider>
5701
5672
 
5702
5673
  <axebow-input
5703
- style="width: 30.25rem;"
5704
5674
  label=${this.labels.serviceName}
5705
5675
  description=${this.labels.serviceNameHelp}
5706
5676
  placeholder=${this.labels.serviceNamePlaceholder}
@@ -5712,7 +5682,7 @@ var AxebowRuntimeZipDialog = class AxebowRuntimeZipDialog extends LitElement {
5712
5682
  .callback=${(e) => this.onServiceNameInput?.(e.target.value)}
5713
5683
  ></axebow-input>
5714
5684
 
5715
- <div class="flex items-center w-121 h-5">
5685
+ <div class="flex items-center h-5">
5716
5686
  <axebow-switch .checked=${this.isDslZip} .onChange=${(checked) => this.onDslChange?.(checked)}>
5717
5687
  <span class="text-base">${this.labels.dslDeployment}</span>
5718
5688
  </axebow-switch>
@@ -5727,7 +5697,7 @@ var AxebowRuntimeZipDialog = class AxebowRuntimeZipDialog extends LitElement {
5727
5697
  ></axebow-drag-drop-upload-file>
5728
5698
  </div>
5729
5699
 
5730
- <div class="flex justify-end gap-4 shrink-0">
5700
+ <div class="flex justify-end gap-4 shrink-0 mt-auto">
5731
5701
  <axebow-button
5732
5702
  variant="primary"
5733
5703
  outline
@@ -5902,6 +5872,35 @@ __decorate([property({ type: String })], AxebowMoreActions.prototype, "fixedHeig
5902
5872
  __decorate([state()], AxebowMoreActions.prototype, "_fixedPos", void 0);
5903
5873
  AxebowMoreActions = __decorate([customElement("axebow-more-actions")], AxebowMoreActions);
5904
5874
  //#endregion
5875
+ //#region src/components/axebow-badge/axebow-badge.ts
5876
+ var AxebowBadge = class AxebowBadge extends LitElement {
5877
+ constructor(..._args) {
5878
+ super(..._args);
5879
+ this.bgColor = "var(--axebow-base)";
5880
+ this.textColor = "var(--axebow-secondary)";
5881
+ }
5882
+ static {
5883
+ this.styles = [unsafeCSS(tailwind_default), css`
5884
+ :host {
5885
+ display: inline-block;
5886
+ }
5887
+ `];
5888
+ }
5889
+ render() {
5890
+ return html`
5891
+ <div
5892
+ class="inline-flex items-center justify-center h-4 box-border px-2 py-px rounded border border-solid text-xs leading-none font-semibold whitespace-nowrap"
5893
+ style="background-color: ${this.bgColor}; color: ${this.textColor}; border-color: ${this.textColor};"
5894
+ >
5895
+ <slot></slot>
5896
+ </div>
5897
+ `;
5898
+ }
5899
+ };
5900
+ __decorate([property({ type: String })], AxebowBadge.prototype, "bgColor", void 0);
5901
+ __decorate([property({ type: String })], AxebowBadge.prototype, "textColor", void 0);
5902
+ AxebowBadge = __decorate([customElement("axebow-badge")], AxebowBadge);
5903
+ //#endregion
5905
5904
  //#region src/components/cards/parts/axebow-card-cloud-logo.ts
5906
5905
  var AxebowCardCloudLogo = class AxebowCardCloudLogo extends LitElement {
5907
5906
  constructor(..._args) {
@@ -6093,6 +6092,7 @@ var AxebowRoleTooltip = class AxebowRoleTooltip extends LitElement {
6093
6092
  this.heading = "";
6094
6093
  this.items = [];
6095
6094
  this.color = "var(--axebow-primary)";
6095
+ this.boxSize = "";
6096
6096
  }
6097
6097
  static {
6098
6098
  this.styles = [unsafeCSS(tailwind_default), css`
@@ -6126,7 +6126,17 @@ var AxebowRoleTooltip = class AxebowRoleTooltip extends LitElement {
6126
6126
  ${this.items.map((item) => html`<li>${item}</li>`)}
6127
6127
  </ul>
6128
6128
  </div>
6129
- <axebow-icon iconName="info" class="cursor-pointer" iconColor=${this.color}></axebow-icon>
6129
+ ${this.boxSize ? html`<div
6130
+ class="flex items-center justify-center not-italic"
6131
+ style="width: ${this.boxSize}; height: ${this.boxSize};"
6132
+ >
6133
+ <axebow-icon
6134
+ iconName="info"
6135
+ size=${this.boxSize}
6136
+ class="cursor-pointer leading-none"
6137
+ iconColor=${this.color}
6138
+ ></axebow-icon>
6139
+ </div>` : html`<axebow-icon iconName="info" class="cursor-pointer" iconColor=${this.color}></axebow-icon>`}
6130
6140
  </axebow-tooltip>
6131
6141
  `;
6132
6142
  }
@@ -6134,6 +6144,7 @@ var AxebowRoleTooltip = class AxebowRoleTooltip extends LitElement {
6134
6144
  __decorate([property({ type: String })], AxebowRoleTooltip.prototype, "heading", void 0);
6135
6145
  __decorate([property({ type: Array })], AxebowRoleTooltip.prototype, "items", void 0);
6136
6146
  __decorate([property({ type: String })], AxebowRoleTooltip.prototype, "color", void 0);
6147
+ __decorate([property({ type: String })], AxebowRoleTooltip.prototype, "boxSize", void 0);
6137
6148
  AxebowRoleTooltip = __decorate([customElement("axebow-role-tooltip")], AxebowRoleTooltip);
6138
6149
  //#endregion
6139
6150
  //#region src/components/cards/parts/axebow-card-header.ts
@@ -6281,14 +6292,32 @@ var AxebowCardStatItem = class AxebowCardStatItem extends LitElement {
6281
6292
  this.title = "";
6282
6293
  this.label = "";
6283
6294
  this.active = true;
6295
+ this.ctaCount = 0;
6296
+ this.ctaIconName = "info";
6297
+ this.ctaIconColor = "var(--axebow-error)";
6298
+ this.tall = false;
6284
6299
  }
6285
6300
  static {
6286
6301
  this.styles = [unsafeCSS(tailwind_default), css`:host { display: block; }`];
6287
6302
  }
6288
6303
  render() {
6289
6304
  return html`
6290
- <div class="flex flex-col items-center justify-center text-center w-30">
6291
- <h4 class="text-[18px] leading-none text-(--axebow-primary) font-bold m-0 whitespace-nowrap">${this.value}</h4>
6305
+ <div class="flex flex-col items-start justify-center text-left w-23.5 ${this.tall ? "h-17.75" : "h-11.5"}">
6306
+ <div class="flex items-center gap-1">
6307
+ <h4 class="text-[18px] leading-none text-(--axebow-primary) font-bold m-0 whitespace-nowrap">${this.value}</h4>
6308
+ ${this.ctaCount > 0 ? html`
6309
+ <span
6310
+ class="flex items-center gap-0.5 cursor-pointer"
6311
+ style="color: ${this.ctaIconColor};"
6312
+ @click=${this._onCtaClick}
6313
+ >
6314
+ <div class="w-5 h-5 shrink-0 flex items-center justify-center">
6315
+ <axebow-icon iconName=${this.ctaIconName} iconColor=${this.ctaIconColor} size="md"></axebow-icon>
6316
+ </div>
6317
+ <span class="text-base font-semibold leading-none whitespace-nowrap">${this.ctaCount}</span>
6318
+ </span>
6319
+ ` : ""}
6320
+ </div>
6292
6321
  <p class="mt-2 text-base leading-none m-0 whitespace-nowrap">${this.title}</p>
6293
6322
  <div class="mt-1.75 h-3.5 leading-none">
6294
6323
  ${this.label ? html`
@@ -6307,11 +6336,21 @@ var AxebowCardStatItem = class AxebowCardStatItem extends LitElement {
6307
6336
  composed: true
6308
6337
  }));
6309
6338
  }
6339
+ _onCtaClick() {
6340
+ this.dispatchEvent(new CustomEvent("cta-click", {
6341
+ bubbles: true,
6342
+ composed: true
6343
+ }));
6344
+ }
6310
6345
  };
6311
6346
  __decorate([property({ type: Number })], AxebowCardStatItem.prototype, "value", void 0);
6312
6347
  __decorate([property({ type: String })], AxebowCardStatItem.prototype, "title", void 0);
6313
6348
  __decorate([property({ type: String })], AxebowCardStatItem.prototype, "label", void 0);
6314
6349
  __decorate([property({ type: Boolean })], AxebowCardStatItem.prototype, "active", void 0);
6350
+ __decorate([property({ type: Number })], AxebowCardStatItem.prototype, "ctaCount", void 0);
6351
+ __decorate([property({ type: String })], AxebowCardStatItem.prototype, "ctaIconName", void 0);
6352
+ __decorate([property({ type: String })], AxebowCardStatItem.prototype, "ctaIconColor", void 0);
6353
+ __decorate([property({ type: Boolean })], AxebowCardStatItem.prototype, "tall", void 0);
6315
6354
  AxebowCardStatItem = __decorate([customElement("axebow-card-stat-item")], AxebowCardStatItem);
6316
6355
  //#endregion
6317
6356
  //#region src/components/cards/parts/axebow-card-stats-row.ts
@@ -6324,21 +6363,29 @@ var AxebowCardStatsRow = class AxebowCardStatsRow extends LitElement {
6324
6363
  static {
6325
6364
  this.styles = [unsafeCSS(tailwind_default), css`:host { display: block; }`];
6326
6365
  }
6327
- _hasButtons() {
6328
- return this.cardType === "account" || this.cardType === "environment" || this.cardType === "tenant";
6329
- }
6330
6366
  render() {
6367
+ const isEnvironment = this.cardType === "environment";
6368
+ const firstGap = isEnvironment ? "mr-6" : "mr-4";
6369
+ const secondGap = isEnvironment ? "mr-7" : "mr-10";
6331
6370
  return html`
6332
- <div class="grid grid-cols-[7.5rem_7.5rem_7.5rem] items-center gap-0.5 w-91 ${this._hasButtons() ? "h-17.75" : "h-11.25"} box-border">
6333
- ${this.stats.map((stat, index) => html`
6371
+ <div class="flex flex-row items-center mx-2 box-border">
6372
+ ${this.stats.map((stat, index) => {
6373
+ return html`
6334
6374
  <axebow-card-stat-item
6375
+ class=${index === 0 && this.stats.length > 1 ? firstGap : index === 1 && this.stats.length > 2 ? secondGap : ""}
6376
+ .tall=${index === 0}
6335
6377
  .value=${stat.value}
6336
6378
  .title=${stat.title}
6337
6379
  .label=${stat.label}
6338
6380
  .active=${stat.active !== false}
6381
+ .ctaCount=${stat.ctaCount ?? 0}
6382
+ .ctaIconName=${stat.ctaIconName ?? "info"}
6383
+ .ctaIconColor=${stat.ctaIconColor ?? "var(--axebow-error)"}
6339
6384
  @label-click=${() => this._handleLabelClick(index)}
6385
+ @cta-click=${() => this._handleCtaClick(index)}
6340
6386
  ></axebow-card-stat-item>
6341
- `)}
6387
+ `;
6388
+ })}
6342
6389
  </div>
6343
6390
  `;
6344
6391
  }
@@ -6349,6 +6396,13 @@ var AxebowCardStatsRow = class AxebowCardStatsRow extends LitElement {
6349
6396
  composed: true
6350
6397
  }));
6351
6398
  }
6399
+ _handleCtaClick(index) {
6400
+ this.dispatchEvent(new CustomEvent("stat-cta-click", {
6401
+ detail: { index },
6402
+ bubbles: true,
6403
+ composed: true
6404
+ }));
6405
+ }
6352
6406
  };
6353
6407
  __decorate([property({ type: Array })], AxebowCardStatsRow.prototype, "stats", void 0);
6354
6408
  __decorate([property({ type: String })], AxebowCardStatsRow.prototype, "cardType", void 0);
@@ -6750,6 +6804,9 @@ var AxebowCardStatus = class AxebowCardStatus extends LitElement {
6750
6804
  this.statusMessage = "";
6751
6805
  this.borderColor = "";
6752
6806
  this.showSpinner = false;
6807
+ this.ctaText = "";
6808
+ this.ctaIconName = "info";
6809
+ this.ctaIconColor = "var(--axebow-error)";
6753
6810
  }
6754
6811
  static {
6755
6812
  this.styles = [unsafeCSS(tailwind_default), css`
@@ -6759,22 +6816,54 @@ var AxebowCardStatus = class AxebowCardStatus extends LitElement {
6759
6816
  `];
6760
6817
  }
6761
6818
  render() {
6819
+ if (this.ctaText) return html`
6820
+ <div
6821
+ class="flex items-center gap-1 min-w-0 w-full text-base whitespace-nowrap cursor-pointer"
6822
+ style="color: ${this.ctaIconColor};"
6823
+ role="button"
6824
+ tabindex="0"
6825
+ @click=${this._onCtaClick}
6826
+ @keydown=${this._onCtaKeydown}
6827
+ >
6828
+ <div class="w-5 h-5 shrink-0 flex items-center justify-center">
6829
+ <axebow-icon iconName=${this.ctaIconName} iconColor=${this.ctaIconColor} size="md"></axebow-icon>
6830
+ </div>
6831
+ <p class="m-0 truncate">${this.ctaText}</p>
6832
+ </div>
6833
+ `;
6762
6834
  if (!this.statusCode) return html`<div class="w-full whitespace-nowrap overflow-hidden text-ellipsis"><slot></slot></div>`;
6763
6835
  return html`
6764
6836
  <div class="flex items-center gap-1 min-w-0 w-full">
6765
- ${this.showSpinner ? html`<sl-spinner style="--indicator-color:${this.borderColor};"></sl-spinner>` : ""}
6766
- <p class="font-bold m-0 line-clamp-1" style="color:${this.borderColor};" title=${this.statusCode}>${this.statusCode}</p>
6767
6837
  <axebow-tooltip content=${this.statusMessage}>
6768
- <axebow-icon class="cursor-pointer shrink-0" iconColor=${this.borderColor} iconName="info" size="md"></axebow-icon>
6838
+ <div class="w-5 h-5 shrink-0 flex items-center justify-center">
6839
+ <axebow-icon class="cursor-pointer" iconColor=${this.borderColor} iconName="info" size="md"></axebow-icon>
6840
+ </div>
6769
6841
  </axebow-tooltip>
6842
+ <p class="font-bold m-0 line-clamp-1" style="color:${this.borderColor};" title=${this.statusCode}>${this.statusCode}</p>
6843
+ ${this.showSpinner ? html`<sl-spinner style="--indicator-color:${this.borderColor};"></sl-spinner>` : ""}
6770
6844
  </div>
6771
6845
  `;
6772
6846
  }
6847
+ _onCtaClick() {
6848
+ this.dispatchEvent(new CustomEvent("cta-click", {
6849
+ bubbles: true,
6850
+ composed: true
6851
+ }));
6852
+ }
6853
+ _onCtaKeydown(e) {
6854
+ if (e.key === "Enter" || e.key === " ") {
6855
+ e.preventDefault();
6856
+ this._onCtaClick();
6857
+ }
6858
+ }
6773
6859
  };
6774
6860
  __decorate([property({ type: String })], AxebowCardStatus.prototype, "statusCode", void 0);
6775
6861
  __decorate([property({ type: String })], AxebowCardStatus.prototype, "statusMessage", void 0);
6776
6862
  __decorate([property({ type: String })], AxebowCardStatus.prototype, "borderColor", void 0);
6777
6863
  __decorate([property({ type: Boolean })], AxebowCardStatus.prototype, "showSpinner", void 0);
6864
+ __decorate([property({ type: String })], AxebowCardStatus.prototype, "ctaText", void 0);
6865
+ __decorate([property({ type: String })], AxebowCardStatus.prototype, "ctaIconName", void 0);
6866
+ __decorate([property({ type: String })], AxebowCardStatus.prototype, "ctaIconColor", void 0);
6778
6867
  AxebowCardStatus = __decorate([customElement("axebow-card-status")], AxebowCardStatus);
6779
6868
  //#endregion
6780
6869
  //#region src/components/cards/parts/axebow-card-footer.ts
@@ -6792,6 +6881,9 @@ var AxebowCardFooter = class AxebowCardFooter extends LitElement {
6792
6881
  this.closeLabel = "Close";
6793
6882
  this.moreActionsLabel = "More";
6794
6883
  this.actionLabel = "";
6884
+ this.ctaText = "";
6885
+ this.ctaIconName = "info";
6886
+ this.ctaIconColor = "var(--axebow-error)";
6795
6887
  }
6796
6888
  static {
6797
6889
  this.styles = [unsafeCSS(tailwind_default), css`:host { display: block; }`];
@@ -6806,6 +6898,9 @@ var AxebowCardFooter = class AxebowCardFooter extends LitElement {
6806
6898
  .statusMessage=${this.statusMessage}
6807
6899
  .borderColor=${this.borderColor}
6808
6900
  .showSpinner=${this.showSpinner}
6901
+ .ctaText=${this.ctaText}
6902
+ .ctaIconName=${this.ctaIconName}
6903
+ .ctaIconColor=${this.ctaIconColor}
6809
6904
  >
6810
6905
  <slot></slot>
6811
6906
  </axebow-card-status>
@@ -6858,6 +6953,9 @@ __decorate([property({ type: Array })], AxebowCardFooter.prototype, "moreActions
6858
6953
  __decorate([property({ type: String })], AxebowCardFooter.prototype, "closeLabel", void 0);
6859
6954
  __decorate([property({ type: String })], AxebowCardFooter.prototype, "moreActionsLabel", void 0);
6860
6955
  __decorate([property({ type: String })], AxebowCardFooter.prototype, "actionLabel", void 0);
6956
+ __decorate([property({ type: String })], AxebowCardFooter.prototype, "ctaText", void 0);
6957
+ __decorate([property({ type: String })], AxebowCardFooter.prototype, "ctaIconName", void 0);
6958
+ __decorate([property({ type: String })], AxebowCardFooter.prototype, "ctaIconColor", void 0);
6861
6959
  AxebowCardFooter = __decorate([customElement("axebow-card-footer")], AxebowCardFooter);
6862
6960
  //#endregion
6863
6961
  //#region src/components/cards/axebow-base-card.ts
@@ -6898,6 +6996,12 @@ var AxebowBaseCard = class AxebowBaseCard extends LitElement {
6898
6996
  this.statusCode = "";
6899
6997
  this.statusMessage = "";
6900
6998
  this.serviceDetailLabel = "Service detail";
6999
+ this.ctaText = "";
7000
+ this.ctaIconName = "info";
7001
+ this.ctaIconColor = "var(--axebow-error)";
7002
+ this.ctaBadgeLabel = "";
7003
+ this.ctaBadgeBgColor = "var(--axebow-base)";
7004
+ this.ctaBadgeTextColor = "var(--axebow-secondary)";
6901
7005
  this.showActionBanner = false;
6902
7006
  this.showWarningBanner = false;
6903
7007
  this.manageLabel = "Manage";
@@ -6986,9 +7090,9 @@ var AxebowBaseCard = class AxebowBaseCard extends LitElement {
6986
7090
 
6987
7091
  <div class="w-full flex flex-col gap-2">
6988
7092
  ${isRuntime ? html`
6989
- <div class="flex flex-row justify-between items-center h-6.75 overflow-hidden">
7093
+ <div class="flex flex-row justify-between items-center h-6.75 overflow-hidden px-2 py-[0.71875rem]">
6990
7094
  <span class="deploy-time text-(--axebow-black) pl-2"><slot name="time-elapsed"></slot></span>
6991
- ${this.isDeployed ? html`<div class="pr-2"><span class="inline-flex items-center justify-center w-15.5 h-4 box-border border border-[#0ECD9A80] text-(--axebow-success) bg-[#F3FDFA] rounded whitespace-nowrap text-xs">${this.deployedLabel}</span></div>` : ""}
7095
+ ${this.ctaBadgeLabel ? html`<axebow-badge bgColor=${this.ctaBadgeBgColor} textColor=${this.ctaBadgeTextColor}>${this.ctaBadgeLabel}</axebow-badge>` : this.isDeployed ? html`<div class="pr-2"><span class="inline-flex items-center justify-center w-15.5 h-4 box-border border border-[#0ECD9A80] text-(--axebow-success) bg-[#F3FDFA] rounded whitespace-nowrap text-xs">${this.deployedLabel}</span></div>` : ""}
6992
7096
  </div>
6993
7097
  ` : html`
6994
7098
  <axebow-card-stats-row
@@ -6998,6 +7102,11 @@ var AxebowBaseCard = class AxebowBaseCard extends LitElement {
6998
7102
  detail: e.detail,
6999
7103
  bubbles: true,
7000
7104
  composed: true
7105
+ }))}
7106
+ @stat-cta-click=${(e) => !this.isDeleting && this.dispatchEvent(new CustomEvent("stat-cta-click", {
7107
+ detail: e.detail,
7108
+ bubbles: true,
7109
+ composed: true
7001
7110
  }))}
7002
7111
  ></axebow-card-stats-row>
7003
7112
  `}
@@ -7093,6 +7202,9 @@ var AxebowBaseCard = class AxebowBaseCard extends LitElement {
7093
7202
  .closeLabel=${this.closeLabel}
7094
7203
  .moreActionsLabel=${this.moreActionsLabel}
7095
7204
  .actionLabel=${isRuntime ? this.serviceDetailLabel : ""}
7205
+ .ctaText=${this.ctaText}
7206
+ .ctaIconName=${this.ctaIconName}
7207
+ .ctaIconColor=${this.ctaIconColor}
7096
7208
  @more-actions-toggled=${(e) => this.dispatchEvent(new CustomEvent("more-actions-toggled", {
7097
7209
  detail: e.detail,
7098
7210
  bubbles: true,
@@ -7145,6 +7257,12 @@ __decorate([property({ type: String })], AxebowBaseCard.prototype, "borderColor"
7145
7257
  __decorate([property({ type: String })], AxebowBaseCard.prototype, "statusCode", void 0);
7146
7258
  __decorate([property({ type: String })], AxebowBaseCard.prototype, "statusMessage", void 0);
7147
7259
  __decorate([property({ type: String })], AxebowBaseCard.prototype, "serviceDetailLabel", void 0);
7260
+ __decorate([property({ type: String })], AxebowBaseCard.prototype, "ctaText", void 0);
7261
+ __decorate([property({ type: String })], AxebowBaseCard.prototype, "ctaIconName", void 0);
7262
+ __decorate([property({ type: String })], AxebowBaseCard.prototype, "ctaIconColor", void 0);
7263
+ __decorate([property({ type: String })], AxebowBaseCard.prototype, "ctaBadgeLabel", void 0);
7264
+ __decorate([property({ type: String })], AxebowBaseCard.prototype, "ctaBadgeBgColor", void 0);
7265
+ __decorate([property({ type: String })], AxebowBaseCard.prototype, "ctaBadgeTextColor", void 0);
7148
7266
  __decorate([property({ type: Boolean })], AxebowBaseCard.prototype, "showActionBanner", void 0);
7149
7267
  __decorate([property({ type: Boolean })], AxebowBaseCard.prototype, "showWarningBanner", void 0);
7150
7268
  __decorate([property({ type: String })], AxebowBaseCard.prototype, "manageLabel", void 0);
@@ -7306,7 +7424,7 @@ var AxebowAlert = class AxebowAlert extends LitElement {
7306
7424
  </div>
7307
7425
  ${this.actionLabel ? html`<axebow-button
7308
7426
  variant="text"
7309
- size="small"
7427
+ size="medium"
7310
7428
  fixedWidth="2.3125rem"
7311
7429
  fixedHeight="1.0625rem"
7312
7430
  @click=${() => {
@@ -7529,6 +7647,20 @@ var AxebowChannelConfigPanel = class AxebowChannelConfigPanel extends LitElement
7529
7647
  display: block;
7530
7648
  flex-shrink: 0;
7531
7649
  }
7650
+ .config-scroll::-webkit-scrollbar {
7651
+ width: 0.375rem;
7652
+ }
7653
+ .config-scroll::-webkit-scrollbar-button {
7654
+ display: none;
7655
+ }
7656
+ .config-scroll::-webkit-scrollbar-track {
7657
+ background: transparent;
7658
+ }
7659
+ .config-scroll::-webkit-scrollbar-thumb {
7660
+ background-color: #dbdde4;
7661
+ border-radius: 0.375rem;
7662
+ min-height: 11.25rem;
7663
+ }
7532
7664
  `
7533
7665
  ];
7534
7666
  }
@@ -7541,7 +7673,7 @@ var AxebowChannelConfigPanel = class AxebowChannelConfigPanel extends LitElement
7541
7673
  >
7542
7674
  ${this.empty ? "" : html`
7543
7675
  <div
7544
- class="flex flex-col gap-3 opacity-100 transition-opacity duration-300 delay-100 w-full h-full overflow-y-auto"
7676
+ class="config-scroll flex flex-col gap-3 opacity-100 transition-opacity duration-300 delay-100 w-full h-full overflow-y-auto overflow-x-hidden"
7545
7677
  >
7546
7678
  <div class="flex justify-between items-center gap-2 pointer-events-auto">
7547
7679
  <h1
@@ -8723,9 +8855,18 @@ var AxebowTenantResourceTable = class AxebowTenantResourceTable extends LitEleme
8723
8855
  }
8724
8856
  _toggle(id) {
8725
8857
  const next = new Set(this._expanded);
8726
- if (next.has(id)) next.delete(id);
8727
- else next.add(id);
8858
+ const willExpand = !next.has(id);
8859
+ if (willExpand) next.add(id);
8860
+ else next.delete(id);
8728
8861
  this._expanded = next;
8862
+ this.dispatchEvent(new CustomEvent("row-toggle", {
8863
+ detail: {
8864
+ id,
8865
+ expanded: willExpand
8866
+ },
8867
+ bubbles: true,
8868
+ composed: true
8869
+ }));
8729
8870
  }
8730
8871
  get _activeLabels() {
8731
8872
  const title = this.labels?.rowTitle ?? this.labels?.accountsEnv ?? DEFAULT_LABELS.rowTitle;
@@ -8799,13 +8940,21 @@ var AxebowTenantResourceTable = class AxebowTenantResourceTable extends LitEleme
8799
8940
  }
8800
8941
  _renderStatusIcon(icon) {
8801
8942
  if (!icon) return "";
8802
- const iconEl = icon.spinner ? html`<sl-spinner style="font-size: 0.85rem; --indicator-color: var(--axebow-tertiary);"></sl-spinner>` : html`<axebow-icon
8803
- iconName=${icon.iconName}
8804
- iconColor=${icon.iconColor}
8805
- size="md"
8806
- class="cursor-pointer shrink-0"
8807
- ></axebow-icon>`;
8808
- return icon.tooltip ? html`<axebow-tooltip content=${icon.tooltip}>${iconEl}</axebow-tooltip>` : iconEl;
8943
+ const content = html`
8944
+ <div
8945
+ class="flex items-center gap-1 shrink-0 cursor-pointer"
8946
+ @click=${icon.onClick ? (e) => {
8947
+ e.stopPropagation();
8948
+ icon.onClick();
8949
+ } : null}
8950
+ >
8951
+ <div class="w-5 h-5 shrink-0 flex items-center justify-center">
8952
+ ${icon.spinner ? html`<sl-spinner style="font-size: 0.85rem; --indicator-color: var(--axebow-tertiary);"></sl-spinner>` : html`<axebow-icon iconName=${icon.iconName} iconColor=${icon.iconColor} size="md"></axebow-icon>`}
8953
+ </div>
8954
+ ${icon.label ? html`<span class="text-sm font-semibold" style="color: ${icon.iconColor};">: ${icon.label}</span>` : ""}
8955
+ </div>
8956
+ `;
8957
+ return icon.tooltip ? html`<axebow-tooltip content=${icon.tooltip}>${content}</axebow-tooltip>` : content;
8809
8958
  }
8810
8959
  _renderTableRow(row, index) {
8811
8960
  const children = row.subRows ?? row.environments;
@@ -8834,6 +8983,7 @@ var AxebowTenantResourceTable = class AxebowTenantResourceTable extends LitEleme
8834
8983
  <div class="w-38 min-w-0 h-[2.125rem] flex items-center">
8835
8984
  <span class="line-clamp-2 wrap-break-word leading-[1.0625rem]">${row.name}</span>
8836
8985
  </div>
8986
+ ${this._renderStatusIcon(row.ctaIcon)}
8837
8987
  ${this._renderStatusIcon(row.statusIcon)}
8838
8988
  <span class="flex-1"></span>
8839
8989
  ${this._renderStatusIcon(row.warningIcon)}
@@ -8893,6 +9043,7 @@ var AxebowTenantResourceTable = class AxebowTenantResourceTable extends LitEleme
8893
9043
  <div class="w-44 min-w-0 h-[2.125rem] flex items-center">
8894
9044
  <span class="font-normal text-gray-700 line-clamp-2 wrap-break-word leading-[1.0625rem]">${subRow.name}</span>
8895
9045
  </div>
9046
+ ${this._renderStatusIcon(subRow.ctaIcon)}
8896
9047
  <span class="flex-1"></span>
8897
9048
  ${this._renderStatusIcon(subRow.warningIcon)}
8898
9049
  </div>
@@ -8915,7 +9066,10 @@ var AxebowTenantResourceTable = class AxebowTenantResourceTable extends LitEleme
8915
9066
  fixedWidth="9.9375rem"
8916
9067
  fixedHeight="2rem"
8917
9068
  ?disabled=${actionBtnDisabled}
8918
- @click=${() => onActionBtn?.()}
9069
+ @click=${() => {
9070
+ if (actionBtnDisabled) return;
9071
+ onActionBtn?.();
9072
+ }}
8919
9073
  >
8920
9074
  ${actionBtnLabel}
8921
9075
  </axebow-button>` : ""}
@@ -9279,6 +9433,116 @@ __decorate([property({ type: String })], AxebowServiceDetailHeader.prototype, "a
9279
9433
  __decorate([property({ type: String })], AxebowServiceDetailHeader.prototype, "deployLabel", void 0);
9280
9434
  AxebowServiceDetailHeader = __decorate([customElement("axebow-service-detail-header")], AxebowServiceDetailHeader);
9281
9435
  //#endregion
9436
+ //#region src/components/axebow-call-to-action-row/axebow-call-to-action-row.ts
9437
+ var CRITICALITY_STYLES = {
9438
+ critical: {
9439
+ bg: "var(--axebow-critical-bg)",
9440
+ color: "var(--axebow-error)",
9441
+ iconName: "error"
9442
+ },
9443
+ high: {
9444
+ bg: "var(--axebow-high-bg)",
9445
+ color: "var(--axebow-dark-yellow)",
9446
+ iconName: "warning"
9447
+ },
9448
+ low: {
9449
+ bg: "var(--axebow-base)",
9450
+ color: "var(--axebow-secondary)",
9451
+ iconName: "info"
9452
+ }
9453
+ };
9454
+ var AxebowCallToActionRow = class AxebowCallToActionRow extends LitElement {
9455
+ constructor(..._args) {
9456
+ super(..._args);
9457
+ this.criticality = "low";
9458
+ this.heading = "";
9459
+ this.badgeLabel = "";
9460
+ this.description = "";
9461
+ this.buttons = [];
9462
+ this.lowNoteText = "";
9463
+ this.count = 1;
9464
+ }
9465
+ static {
9466
+ this.styles = [
9467
+ unsafeCSS(tailwind_default),
9468
+ axebowTheme,
9469
+ css`
9470
+ :host {
9471
+ display: block;
9472
+ width: 100%;
9473
+ }
9474
+ `
9475
+ ];
9476
+ }
9477
+ render() {
9478
+ const { bg, color, iconName } = CRITICALITY_STYLES[this.criticality] ?? CRITICALITY_STYLES.low;
9479
+ return html`
9480
+ <div class="w-full box-border border-t border-solid border-(--axebow-table-header-border) bg-white p-4 flex flex-row items-center gap-4">
9481
+ <div class="w-10 h-10 rounded-md shrink-0 flex items-center justify-center" style="background-color: ${bg};">
9482
+ <div class="w-6 h-6 flex items-center justify-center">
9483
+ <axebow-icon iconName=${iconName} iconColor=${color} size="2xl"></axebow-icon>
9484
+ </div>
9485
+ </div>
9486
+
9487
+ <div class="flex-1 min-w-0 flex flex-col gap-1">
9488
+ <div class="w-full flex flex-row items-center gap-2">
9489
+ <span class="text-base font-semibold truncate">${this.heading}</span>
9490
+ ${this.badgeLabel ? html`<axebow-badge bgColor=${bg} textColor=${color}>${this.badgeLabel}</axebow-badge>` : ""}
9491
+ ${this.count > 1 ? html`<div
9492
+ class="w-5 h-5 shrink-0 rounded-full flex items-center justify-center text-sm font-semibold"
9493
+ style="background-color: ${bg}; color: ${color};"
9494
+ >
9495
+ ${this.count}
9496
+ </div>` : ""}
9497
+ </div>
9498
+ <div class="w-full text-(--axebow-gray)">${this.description}</div>
9499
+ </div>
9500
+
9501
+ ${this.criticality === "low" ? this._renderLowNote() : this._renderButtons()}
9502
+ </div>
9503
+ `;
9504
+ }
9505
+ _renderLowNote() {
9506
+ return html`
9507
+ <div
9508
+ class="w-91 h-11 shrink-0 box-border rounded-md py-1 px-3 flex items-center text-(--axebow-gray)"
9509
+ style="background-color: var(--axebow-base);"
9510
+ >
9511
+ ${this.lowNoteText}
9512
+ </div>
9513
+ `;
9514
+ }
9515
+ _renderButtons() {
9516
+ if (!this.buttons.length) return "";
9517
+ return html`
9518
+ <div class="flex flex-row items-center gap-4 shrink-0">
9519
+ ${this.buttons.map((button) => html`
9520
+ <axebow-button
9521
+ variant=${button.variant ?? "primary"}
9522
+ ?outline=${button.outline ?? false}
9523
+ @click=${() => button.onClick?.()}
9524
+ >
9525
+ ${button.label}
9526
+ ${button.iconName ? html`<axebow-icon
9527
+ slot="suffix"
9528
+ iconName=${button.iconName}
9529
+ iconColor=${button.iconColor ?? "currentColor"}
9530
+ ></axebow-icon>` : ""}
9531
+ </axebow-button>
9532
+ `)}
9533
+ </div>
9534
+ `;
9535
+ }
9536
+ };
9537
+ __decorate([property({ type: String })], AxebowCallToActionRow.prototype, "criticality", void 0);
9538
+ __decorate([property({ type: String })], AxebowCallToActionRow.prototype, "heading", void 0);
9539
+ __decorate([property({ type: String })], AxebowCallToActionRow.prototype, "badgeLabel", void 0);
9540
+ __decorate([property({ type: String })], AxebowCallToActionRow.prototype, "description", void 0);
9541
+ __decorate([property({ type: Array })], AxebowCallToActionRow.prototype, "buttons", void 0);
9542
+ __decorate([property({ type: String })], AxebowCallToActionRow.prototype, "lowNoteText", void 0);
9543
+ __decorate([property({ type: Number })], AxebowCallToActionRow.prototype, "count", void 0);
9544
+ AxebowCallToActionRow = __decorate([customElement("axebow-call-to-action-row")], AxebowCallToActionRow);
9545
+ //#endregion
9282
9546
  //#region src/components/axebow-tenant-card/axebow-tenant-card.ts
9283
9547
  var AxebowTenantCard = class AxebowTenantCard extends LitElement {
9284
9548
  constructor(..._args) {
@@ -9301,6 +9565,9 @@ var AxebowTenantCard = class AxebowTenantCard extends LitElement {
9301
9565
  this.invitedNoticeText = "";
9302
9566
  this.showNoAccountsWarning = false;
9303
9567
  this.noAccountsWarningText = "";
9568
+ this.showCallToActionIssues = false;
9569
+ this.callToActionIssuesText = "";
9570
+ this.callToActionCriticality = "low";
9304
9571
  this.contentState = "table";
9305
9572
  this.invitationText = "";
9306
9573
  this.emptyTextPrefix = "";
@@ -9438,10 +9705,23 @@ var AxebowTenantCard = class AxebowTenantCard extends LitElement {
9438
9705
  </span>
9439
9706
  `)}
9440
9707
  </div>
9441
- ${this.showInvitedNotice ? html`<span class="text-base text-black">${this.invitedNoticeText}</span>` : this.showNoAccountsWarning ? html`<span class="flex items-center gap-1 text-base text-black">
9442
- <axebow-icon iconName="warning" iconColor="var(--axebow-warning)" size="md"></axebow-icon>
9443
- ${this.noAccountsWarningText}
9444
- </span>` : ""}
9708
+ ${this.showInvitedNotice ? html`<span class="text-base text-black">${this.invitedNoticeText}</span>` : this.showCallToActionIssues ? html`<span
9709
+ class="flex items-center gap-1 text-base cursor-pointer"
9710
+ style="color: ${CRITICALITY_STYLES[this.callToActionCriticality].color};"
9711
+ @click=${() => this.onCallToActionClick?.()}
9712
+ >
9713
+ <div class="w-5 h-5 shrink-0 flex items-center justify-center">
9714
+ <axebow-icon
9715
+ iconName=${CRITICALITY_STYLES[this.callToActionCriticality].iconName}
9716
+ iconColor=${CRITICALITY_STYLES[this.callToActionCriticality].color}
9717
+ size="md"
9718
+ ></axebow-icon>
9719
+ </div>
9720
+ ${this.callToActionIssuesText}
9721
+ </span>` : this.showNoAccountsWarning ? html`<span class="flex items-center gap-1 text-base text-black">
9722
+ <axebow-icon iconName="warning" iconColor="var(--axebow-warning)" size="md"></axebow-icon>
9723
+ ${this.noAccountsWarningText}
9724
+ </span>` : ""}
9445
9725
  </div>
9446
9726
 
9447
9727
  <div class="w-full">
@@ -9474,6 +9754,10 @@ __decorate([property({ type: Boolean })], AxebowTenantCard.prototype, "showInvit
9474
9754
  __decorate([property({ type: String })], AxebowTenantCard.prototype, "invitedNoticeText", void 0);
9475
9755
  __decorate([property({ type: Boolean })], AxebowTenantCard.prototype, "showNoAccountsWarning", void 0);
9476
9756
  __decorate([property({ type: String })], AxebowTenantCard.prototype, "noAccountsWarningText", void 0);
9757
+ __decorate([property({ type: Boolean })], AxebowTenantCard.prototype, "showCallToActionIssues", void 0);
9758
+ __decorate([property({ type: String })], AxebowTenantCard.prototype, "callToActionIssuesText", void 0);
9759
+ __decorate([property({ type: String })], AxebowTenantCard.prototype, "callToActionCriticality", void 0);
9760
+ __decorate([property({ attribute: false })], AxebowTenantCard.prototype, "onCallToActionClick", void 0);
9477
9761
  __decorate([property({ type: String })], AxebowTenantCard.prototype, "contentState", void 0);
9478
9762
  __decorate([property({ type: String })], AxebowTenantCard.prototype, "invitationText", void 0);
9479
9763
  __decorate([property({ type: String })], AxebowTenantCard.prototype, "emptyTextPrefix", void 0);
@@ -10971,7 +11255,11 @@ var AxebowDeploySummary = class AxebowDeploySummary extends LitElement {
10971
11255
  }
10972
11256
  render() {
10973
11257
  return html`
10974
- <axebow-summary-card title="${this.summaryTitle}">
11258
+ <axebow-summary-card
11259
+ title="${this.summaryTitle}"
11260
+ cardWidth="22.875rem"
11261
+ fixedHeight="max(40.8125rem, calc(100vh - 7.25rem))"
11262
+ >
10975
11263
  ${this.showDownloadButton ? html`
10976
11264
  <axebow-button slot="header-actions" variant="text" size="medium" @click=${this._handleDownloadBundle}>
10977
11265
  <axebow-icon
@@ -10986,7 +11274,7 @@ var AxebowDeploySummary = class AxebowDeploySummary extends LitElement {
10986
11274
  <div class="h-px border-t border-dashed border-gray-400 my-4"></div>
10987
11275
  ${this._renderResourceLimits()}
10988
11276
  <axebow-divider color="var(--axebow-table-header-border, #dbdde4)" margin="0.75rem 0"></axebow-divider>
10989
- <div class="flex-1 overflow-y-auto flex flex-col">
11277
+ <div class="flex-1 flex flex-col">
10990
11278
  ${this._renderIdentificationStep()} ${this._renderResourcesStep()} ${this._renderScalingStep()}
10991
11279
  ${this._renderChannelsStep()} ${this._renderConfigurationStep()}
10992
11280
  </div>
@@ -11061,12 +11349,13 @@ var AxebowDeploySummary = class AxebowDeploySummary extends LitElement {
11061
11349
  </div>
11062
11350
  `;
11063
11351
  }
11064
- /** label:value pair with the shared black-name/gray-value convention. */
11065
- _field(label, value, hasError = false) {
11352
+ /** label:value pair with the shared black-name/primary-value convention. */
11353
+ _field(label, value, hasError = false, bold = true) {
11354
+ const colorClass = hasError ? "text-(--axebow-error)" : "text-(--axebow-primary)";
11066
11355
  return html`
11067
11356
  <p class="text-base">
11068
11357
  <span class="text-(--axebow-black)">${label}</span>
11069
- <strong class="${hasError ? "text-(--axebow-error)" : "text-(--axebow-gray)"}">${value}</strong>
11358
+ ${bold ? html`<strong class="${colorClass}">${value}</strong>` : html`<span class="font-normal ${colorClass}">${value}</span>`}
11070
11359
  </p>
11071
11360
  `;
11072
11361
  }
@@ -11084,20 +11373,20 @@ var AxebowDeploySummary = class AxebowDeploySummary extends LitElement {
11084
11373
  .enabled=${step.enabled}
11085
11374
  >
11086
11375
  <div class="space-y-1">
11087
- ${step.imageName ? this._field(step.imageNameLabel, step.imageName) : ""}
11088
- ${step.serviceName ? this._field(step.serviceNameLabel, step.serviceName) : ""}
11089
- ${step.project ? this._field(step.projectLabel, step.project) : ""}
11090
11376
  ${step.registry ? this._renderRegistrySummary(step.registry) : ""}
11377
+ ${step.imageName ? this._field(step.imageNameLabel, step.imageName, false, false) : ""}
11378
+ ${step.serviceName ? this._field(step.serviceNameLabel, step.serviceName, false, false) : ""}
11379
+ ${step.project ? this._field(step.projectLabel, step.project) : ""}
11091
11380
  ${step.entrypoint ? html`<div class="border-t border-dashed border-gray-300 pt-2 flex items-center gap-1 min-w-0 text-base">
11092
11381
  <span class="shrink-0 text-(--axebow-black)">${step.entrypointLabel}</span>
11093
11382
  <axebow-tooltip content="${step.entrypoint}">
11094
- <strong class="text-(--axebow-gray) block truncate max-w-36">${step.entrypoint}</strong>
11383
+ <strong class="text-(--axebow-primary) block truncate max-w-36">${step.entrypoint}</strong>
11095
11384
  </axebow-tooltip>
11096
11385
  </div>` : ""}
11097
11386
  ${step.cmd ? html`<div class="flex items-center gap-1 min-w-0 text-base">
11098
11387
  <span class="shrink-0 text-(--axebow-black)">${step.commandLabel}</span>
11099
11388
  <axebow-tooltip content="${step.cmd}">
11100
- <strong class="text-(--axebow-gray) block truncate max-w-36">${step.cmd}</strong>
11389
+ <strong class="text-(--axebow-primary) block truncate max-w-36">${step.cmd}</strong>
11101
11390
  </axebow-tooltip>
11102
11391
  </div>` : ""}
11103
11392
  </div>
@@ -11109,13 +11398,13 @@ var AxebowDeploySummary = class AxebowDeploySummary extends LitElement {
11109
11398
  <div class="flex items-center gap-2 min-w-0 text-base">
11110
11399
  <p class="shrink-0 text-(--axebow-black)">${registry.containerRegistryLabel}</p>
11111
11400
  ${!registry.logoSrc ? html`<axebow-tooltip content="${registry.value}">
11112
- <strong class="text-(--axebow-gray) block truncate w-full">${registry.value}</strong>
11401
+ <strong class="text-(--axebow-primary) block truncate w-full">${registry.value}</strong>
11113
11402
  </axebow-tooltip>` : html`<img src="${registry.logoSrc}" class="w-6 h-4 object-contain" />`}
11114
11403
  </div>
11115
11404
  ${registry.credentialSecret ? html` <div class="flex items-center gap-2 min-w-0 text-base">
11116
11405
  <p class="shrink-0 text-(--axebow-black)">${registry.registryCredentialsLabel}</p>
11117
11406
  <axebow-tooltip content="${registry.credentialSecret}">
11118
- <strong class="text-(--axebow-gray) block truncate w-full">${registry.credentialSecret}</strong>
11407
+ <strong class="text-(--axebow-primary) block truncate w-full">${registry.credentialSecret}</strong>
11119
11408
  </axebow-tooltip>
11120
11409
  </div>` : ""}
11121
11410
  `;
@@ -11135,8 +11424,8 @@ var AxebowDeploySummary = class AxebowDeploySummary extends LitElement {
11135
11424
  >
11136
11425
  <div class="pr-2 space-y-2">
11137
11426
  <div class="flex flex-row gap-x-4 flex-wrap">
11138
- ${this._field(step.cpus.label, `${step.cpus.value} ${step.cpus.unit}`, step.cpus.hasError)}
11139
- ${this._field(step.memory.label, `${step.memory.value} ${step.memory.unit}`, step.memory.hasError)}
11427
+ ${this._field(step.cpus.label, `${step.cpus.value} ${step.cpus.unit}`, step.cpus.hasError, false)}
11428
+ ${this._field(step.memory.label, `${step.memory.value} ${step.memory.unit}`, step.memory.hasError, false)}
11140
11429
  </div>
11141
11430
  </div>
11142
11431
  </axebow-summary-step>
@@ -11216,7 +11505,7 @@ var AxebowDeploySummary = class AxebowDeploySummary extends LitElement {
11216
11505
  ${hasAnyLink ? html`<span class="font-medium text-(--axebow-black)">${linkedToLabel} (${totalLinked}):</span>` : ""}
11217
11506
  ${group.channels.map((ch) => html`
11218
11507
  <div class="flex items-center min-w-0">
11219
- <strong class="text-(--axebow-gray) flex items-center gap-1 min-w-0 truncate">
11508
+ <strong class="text-(--axebow-primary) flex items-center gap-1 min-w-0 truncate">
11220
11509
  <span class="truncate">${ch.name}${ch.port ? `:${ch.port}` : ""}</span>
11221
11510
  ${ch.isPublic ? html`<axebow-icon
11222
11511
  class="shrink-0"
@@ -11227,7 +11516,7 @@ var AxebowDeploySummary = class AxebowDeploySummary extends LitElement {
11227
11516
  ></axebow-icon>` : ""}
11228
11517
  </strong>
11229
11518
  </div>
11230
- ${hasAnyLink ? html`<span class="text-(--axebow-gray) font-semibold truncate">${ch.linked.join(", ") || "—"}</span>` : ""}
11519
+ ${hasAnyLink ? html`<span class="text-(--axebow-primary) font-semibold truncate">${ch.linked.join(", ") || "—"}</span>` : ""}
11231
11520
  `)}
11232
11521
  </div>
11233
11522
  `;
@@ -11598,6 +11887,7 @@ var AxebowSummaryCard = class AxebowSummaryCard extends LitElement {
11598
11887
  this.title = "Summary";
11599
11888
  this.cardWidth = "24.125rem";
11600
11889
  this.cardHeight = "";
11890
+ this.fixedHeight = "";
11601
11891
  this.isSummaryOpen = true;
11602
11892
  }
11603
11893
  static {
@@ -11616,21 +11906,54 @@ var AxebowSummaryCard = class AxebowSummaryCard extends LitElement {
11616
11906
  sl-card::part(base) {
11617
11907
  width: 100%;
11618
11908
  height: 100%;
11909
+ min-height: 0;
11619
11910
  }
11620
11911
  sl-card::part(body) {
11621
11912
  height: 100%;
11622
11913
  }
11914
+ sl-card.fixed-height::part(body) {
11915
+ min-height: 0;
11916
+ overflow-x: hidden;
11917
+ overflow-y: auto;
11918
+ }
11919
+ sl-card.fixed-height::part(body)::-webkit-scrollbar {
11920
+ width: 0.375rem;
11921
+ }
11922
+ sl-card.fixed-height::part(body)::-webkit-scrollbar-button {
11923
+ display: none;
11924
+ }
11925
+ sl-card.fixed-height::part(body)::-webkit-scrollbar-track {
11926
+ background: transparent;
11927
+ }
11928
+ sl-card.fixed-height::part(body)::-webkit-scrollbar-thumb {
11929
+ background-color: #dbdde4;
11930
+ border-radius: 0.375rem;
11931
+ min-height: 11.25rem;
11932
+ }
11623
11933
  `
11624
11934
  ];
11625
11935
  }
11936
+ get _heightClass() {
11937
+ if (this.fixedHeight) return "";
11938
+ return this.cardHeight ? "lg:min-h-(--card-height)" : "lg:min-h-[calc(100vh-7.25rem)]";
11939
+ }
11940
+ get _topClass() {
11941
+ return this.fixedHeight ? "top-[min(6.25rem,calc(100vh_-_var(--card-fixed-height)_-_1rem))]" : "top-25";
11942
+ }
11943
+ get _fixedClass() {
11944
+ return this.fixedHeight ? "fixed-height flex flex-col max-h-(--card-fixed-height) lg:h-(--card-fixed-height)" : "";
11945
+ }
11626
11946
  render() {
11947
+ const height = this._heightClass;
11948
+ const top = this._topClass;
11949
+ const fixed = this._fixedClass;
11627
11950
  return html`
11628
11951
  <div
11629
- class="w-full lg:w-(--card-width) lg:sticky static top-25 h-auto ${this.cardHeight ? "lg:min-h-(--card-height)" : "lg:min-h-[calc(100vh-7.25rem)]"} rounded-md z-10 transition-all duration-300"
11630
- style="--card-width: ${this.cardWidth}; --card-height: ${this.cardHeight};"
11952
+ class="w-full lg:w-(--card-width) lg:sticky static ${top} h-auto ${height} rounded-md z-10 transition-all duration-300"
11953
+ style="--card-width: ${this.cardWidth}; --card-height: ${this.cardHeight}; --card-fixed-height: ${this.fixedHeight};"
11631
11954
  >
11632
11955
  <sl-card
11633
- class="w-full h-full shadow-none border-t border-l-0 border-r-0 border-b-0 rounded-none lg:shadow lg:border lg:rounded-md"
11956
+ class="w-full h-full shadow-none border-t border-l-0 border-r-0 border-b-0 rounded-none lg:shadow lg:border lg:rounded-md ${fixed}"
11634
11957
  >
11635
11958
  <div class="h-full flex flex-col">
11636
11959
  ${this._renderHeader()}
@@ -11665,6 +11988,11 @@ var AxebowSummaryCard = class AxebowSummaryCard extends LitElement {
11665
11988
  if (window.innerWidth < 1024) this.isSummaryOpen = !this.isSummaryOpen;
11666
11989
  }
11667
11990
  scrollToBottom() {
11991
+ const body = this.shadowRoot?.querySelector("sl-card")?.shadowRoot?.querySelector("[part~=\"body\"]");
11992
+ body?.scrollTo({
11993
+ top: body.scrollHeight,
11994
+ behavior: "smooth"
11995
+ });
11668
11996
  (this.shadowRoot?.querySelectorAll(".overflow-y-auto"))?.forEach((container) => {
11669
11997
  container.scrollTo({
11670
11998
  top: container.scrollHeight,
@@ -11676,6 +12004,7 @@ var AxebowSummaryCard = class AxebowSummaryCard extends LitElement {
11676
12004
  __decorate([property({ type: String })], AxebowSummaryCard.prototype, "title", void 0);
11677
12005
  __decorate([property({ type: String })], AxebowSummaryCard.prototype, "cardWidth", void 0);
11678
12006
  __decorate([property({ type: String })], AxebowSummaryCard.prototype, "cardHeight", void 0);
12007
+ __decorate([property({ type: String })], AxebowSummaryCard.prototype, "fixedHeight", void 0);
11679
12008
  __decorate([state()], AxebowSummaryCard.prototype, "isSummaryOpen", void 0);
11680
12009
  AxebowSummaryCard = __decorate([customElement("axebow-summary-card")], AxebowSummaryCard);
11681
12010
  //#endregion
@@ -13792,6 +14121,7 @@ var AxebowModal = class AxebowModal extends LitElement {
13792
14121
  this.height = "calc(100% - 2rem)";
13793
14122
  this.title = "";
13794
14123
  this.description = "";
14124
+ this.closeIconName = "close";
13795
14125
  this._hasFooterSlotContent = false;
13796
14126
  this._isScrollLocked = false;
13797
14127
  }
@@ -13902,8 +14232,12 @@ var AxebowModal = class AxebowModal extends LitElement {
13902
14232
  ${this.description ? html`<p class="text-(--axebow-gray) mt-1 m-0">${this.description}</p>` : ""}
13903
14233
  <slot name="description"></slot>
13904
14234
 
13905
- <div class="close-button" @click=${this._handleClose}>
13906
- <axebow-icon iconName="close" size="xl"></axebow-icon>
14235
+ <div
14236
+ class="close-button"
14237
+ style=${ifDefined(this.closeButtonSize ? `width: ${this.closeButtonSize}; height: ${this.closeButtonSize}; padding: 0;` : void 0)}
14238
+ @click=${this._handleClose}
14239
+ >
14240
+ <axebow-icon iconName=${this.closeIconName} iconColor=${ifDefined(this.closeIconColor)} size="xl"></axebow-icon>
13907
14241
  </div>
13908
14242
  </div>
13909
14243
  ` : ""}
@@ -13931,65 +14265,80 @@ __decorate([property()], AxebowModal.prototype, "maxHeight", void 0);
13931
14265
  __decorate([property()], AxebowModal.prototype, "height", void 0);
13932
14266
  __decorate([property()], AxebowModal.prototype, "title", void 0);
13933
14267
  __decorate([property()], AxebowModal.prototype, "description", void 0);
14268
+ __decorate([property()], AxebowModal.prototype, "closeIconName", void 0);
14269
+ __decorate([property()], AxebowModal.prototype, "closeIconColor", void 0);
14270
+ __decorate([property()], AxebowModal.prototype, "closeButtonSize", void 0);
13934
14271
  __decorate([state()], AxebowModal.prototype, "_hasFooterSlotContent", void 0);
13935
14272
  AxebowModal = __decorate([customElement("axebow-modal")], AxebowModal);
13936
14273
  //#endregion
13937
- //#region src/components/axebow-badge/axebow-badge.ts
13938
- var AxebowBadge = class AxebowBadge extends LitElement {
14274
+ //#region src/components/axebow-call-to-action-row/call-to-action-notification.ts
14275
+ var DEFAULT_LOW_NOTE_TEXT = "No action needed";
14276
+ var BUTTON_TYPE_TO_VARIANT = {
14277
+ primary: "primary",
14278
+ secondary: "tertiary",
14279
+ text: "text"
14280
+ };
14281
+ function getHighestCriticality(notifications) {
14282
+ if (notifications.some((n) => n.criticality === "critical")) return "critical";
14283
+ if (notifications.some((n) => n.criticality === "high")) return "high";
14284
+ return "low";
14285
+ }
14286
+ function getCtaHeading(notification) {
14287
+ return (notification.info_content?.code || notification.subtype).replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
14288
+ }
14289
+ function getCtaDescription(notification) {
14290
+ return notification.info_content?.message ?? "";
14291
+ }
14292
+ function getCtaBadgeLabel(notification) {
14293
+ return notification.criticality.charAt(0).toUpperCase() + notification.criticality.slice(1);
14294
+ }
14295
+ function groupCallToActionNotifications(notifications) {
14296
+ const groups = /* @__PURE__ */ new Map();
14297
+ notifications.forEach((notification) => {
14298
+ const key = `${notification.criticality}|${getCtaHeading(notification)}|${getCtaDescription(notification)}`;
14299
+ const existing = groups.get(key);
14300
+ if (existing) existing.count += 1;
14301
+ else groups.set(key, {
14302
+ notification,
14303
+ count: 1
14304
+ });
14305
+ });
14306
+ return [...groups.values()];
14307
+ }
14308
+ function buildCtaButtons(notification, dispatch) {
14309
+ return (notification.actions ?? []).map((action) => ({
14310
+ label: action.label,
14311
+ variant: BUTTON_TYPE_TO_VARIANT[action.buttonType] ?? "primary",
14312
+ outline: action.outlined,
14313
+ iconName: action.icon,
14314
+ iconColor: action.iconColor,
14315
+ onClick: () => dispatch({
14316
+ notification,
14317
+ action
14318
+ })
14319
+ }));
14320
+ }
14321
+ //#endregion
14322
+ //#region src/components/axebow-call-to-action-feature/axebow-call-to-action-feature.ts
14323
+ var _AxebowCallToActionFeature;
14324
+ var AxebowCallToActionFeature = class AxebowCallToActionFeature extends LitElement {
14325
+ static {
14326
+ _AxebowCallToActionFeature = this;
14327
+ }
13939
14328
  constructor(..._args) {
13940
14329
  super(..._args);
13941
- this.bgColor = "var(--axebow-base)";
13942
- this.textColor = "var(--axebow-secondary)";
14330
+ this.callToActions = [];
14331
+ this.actionNeededLabel = "Action needed";
14332
+ this.noActionsLabel = "No action needed!";
14333
+ this.lastUpdatedText = "";
14334
+ this.expanded = false;
14335
+ this.refreshing = false;
13943
14336
  }
13944
14337
  static {
13945
- this.styles = [unsafeCSS(tailwind_default), css`
13946
- :host {
13947
- display: inline-block;
13948
- }
13949
- `];
13950
- }
13951
- render() {
13952
- return html`
13953
- <div
13954
- class="inline-flex items-center justify-center px-2 py-px rounded border border-solid text-xs leading-3 font-semibold whitespace-nowrap"
13955
- style="background-color: ${this.bgColor}; color: ${this.textColor}; border-color: ${this.textColor};"
13956
- >
13957
- <slot></slot>
13958
- </div>
13959
- `;
13960
- }
13961
- };
13962
- __decorate([property({ type: String })], AxebowBadge.prototype, "bgColor", void 0);
13963
- __decorate([property({ type: String })], AxebowBadge.prototype, "textColor", void 0);
13964
- AxebowBadge = __decorate([customElement("axebow-badge")], AxebowBadge);
13965
- //#endregion
13966
- //#region src/components/axebow-call-to-action-row/axebow-call-to-action-row.ts
13967
- var CRITICALITY_STYLES = {
13968
- critical: {
13969
- bg: "var(--axebow-critical-bg)",
13970
- color: "var(--axebow-error)",
13971
- iconName: "error"
13972
- },
13973
- high: {
13974
- bg: "var(--axebow-high-bg)",
13975
- color: "var(--axebow-dark-yellow)",
13976
- iconName: "warning"
13977
- },
13978
- low: {
13979
- bg: "var(--axebow-base)",
13980
- color: "var(--axebow-secondary)",
13981
- iconName: "info"
14338
+ this.REFRESH_DURATION_MS = 2500;
13982
14339
  }
13983
- };
13984
- var AxebowCallToActionRow = class AxebowCallToActionRow extends LitElement {
13985
- constructor(..._args) {
13986
- super(..._args);
13987
- this.criticality = "low";
13988
- this.heading = "";
13989
- this.badgeLabel = "";
13990
- this.description = "";
13991
- this.buttons = [];
13992
- this.lowNoteText = "";
14340
+ static {
14341
+ this.REFRESH_SKELETON_ROWS = 4;
13993
14342
  }
13994
14343
  static {
13995
14344
  this.styles = [
@@ -14000,147 +14349,115 @@ var AxebowCallToActionRow = class AxebowCallToActionRow extends LitElement {
14000
14349
  display: block;
14001
14350
  width: 100%;
14002
14351
  }
14003
- `
14004
- ];
14005
- }
14006
- render() {
14007
- const { bg, color, iconName } = CRITICALITY_STYLES[this.criticality] ?? CRITICALITY_STYLES.low;
14008
- return html`
14009
- <div class="w-full bg-white p-4 flex flex-row items-center gap-4">
14010
- <div class="w-10 h-10 rounded-md shrink-0 flex items-center justify-center" style="background-color: ${bg};">
14011
- <div class="w-6 h-6 flex items-center justify-center">
14012
- <axebow-icon iconName=${iconName} iconColor=${color} size="2xl"></axebow-icon>
14013
- </div>
14014
- </div>
14015
14352
 
14016
- <div class="flex-1 min-w-0 flex flex-col gap-1">
14017
- <div class="w-full flex flex-row items-center gap-2">
14018
- <span class="text-base font-semibold truncate">${this.heading}</span>
14019
- ${this.badgeLabel ? html`<axebow-badge bgColor=${bg} textColor=${color}>${this.badgeLabel}</axebow-badge>` : ""}
14020
- </div>
14021
- <div class="w-full text-(--axebow-gray)">${this.description}</div>
14022
- </div>
14353
+ @keyframes cta-skeleton-pulse {
14354
+ 0%,
14355
+ 100% {
14356
+ opacity: 1;
14357
+ }
14358
+ 50% {
14359
+ opacity: 0.4;
14360
+ }
14361
+ }
14023
14362
 
14024
- ${this.criticality === "low" ? this._renderLowNote() : this._renderButtons()}
14025
- </div>
14026
- `;
14027
- }
14028
- _renderLowNote() {
14029
- return html`
14030
- <div
14031
- class="w-91 h-11 shrink-0 box-border rounded-md py-1 px-3 flex items-center text-(--axebow-gray)"
14032
- style="background-color: var(--axebow-base);"
14033
- >
14034
- ${this.lowNoteText}
14035
- </div>
14036
- `;
14037
- }
14038
- _renderButtons() {
14039
- if (!this.buttons.length) return "";
14040
- return html`
14041
- <div class="flex flex-row items-center gap-4 shrink-0">
14042
- ${this.buttons.map((button) => html`
14043
- <axebow-button
14044
- variant=${button.variant ?? "primary"}
14045
- ?outline=${button.outline ?? false}
14046
- @click=${() => button.onClick?.()}
14047
- >
14048
- ${button.label}
14049
- ${button.iconName ? html`<axebow-icon
14050
- slot="suffix"
14051
- iconName=${button.iconName}
14052
- iconColor=${button.iconColor ?? "currentColor"}
14053
- ></axebow-icon>` : ""}
14054
- </axebow-button>
14055
- `)}
14056
- </div>
14057
- `;
14058
- }
14059
- };
14060
- __decorate([property({ type: String })], AxebowCallToActionRow.prototype, "criticality", void 0);
14061
- __decorate([property({ type: String })], AxebowCallToActionRow.prototype, "heading", void 0);
14062
- __decorate([property({ type: String })], AxebowCallToActionRow.prototype, "badgeLabel", void 0);
14063
- __decorate([property({ type: String })], AxebowCallToActionRow.prototype, "description", void 0);
14064
- __decorate([property({ type: Array })], AxebowCallToActionRow.prototype, "buttons", void 0);
14065
- __decorate([property({ type: String })], AxebowCallToActionRow.prototype, "lowNoteText", void 0);
14066
- AxebowCallToActionRow = __decorate([customElement("axebow-call-to-action-row")], AxebowCallToActionRow);
14067
- //#endregion
14068
- //#region src/components/axebow-call-to-action-feature/axebow-call-to-action-feature.ts
14069
- var AxebowCallToActionFeature = class AxebowCallToActionFeature extends LitElement {
14070
- constructor(..._args) {
14071
- super(..._args);
14072
- this.notifications = [];
14073
- this.actionNeededLabel = "Action needed";
14074
- this.lastUpdatedText = "";
14075
- this.expanded = false;
14076
- }
14077
- static {
14078
- this.styles = [
14079
- unsafeCSS(tailwind_default),
14080
- axebowTheme,
14081
- css`
14082
- :host {
14083
- display: block;
14084
- width: 100%;
14363
+ .cta-skeleton-bar {
14364
+ animation: cta-skeleton-pulse 1.5s ease-in-out infinite;
14085
14365
  }
14086
14366
  `
14087
14367
  ];
14088
14368
  }
14089
14369
  get _highestCriticality() {
14090
- if (this.notifications.some((n) => n?.criticality === "critical")) return "critical";
14091
- if (this.notifications.some((n) => n?.criticality === "high")) return "high";
14092
- return "low";
14370
+ return getHighestCriticality(this.callToActions);
14093
14371
  }
14094
14372
  _toggle() {
14373
+ if (this.callToActions.length === 0) return;
14095
14374
  this.expanded = !this.expanded;
14096
14375
  }
14376
+ _handleRefresh() {
14377
+ if (this.refreshing) return;
14378
+ this.refreshing = true;
14379
+ setTimeout(() => {
14380
+ this.refreshing = false;
14381
+ }, _AxebowCallToActionFeature.REFRESH_DURATION_MS);
14382
+ }
14383
+ _renderSkeletonRow() {
14384
+ return html`
14385
+ <div
14386
+ class="w-full box-border border-t border-solid border-(--axebow-table-header-border) bg-white p-4 flex flex-row items-center gap-4"
14387
+ >
14388
+ <div
14389
+ class="cta-skeleton-bar w-10 h-10 rounded-md shrink-0"
14390
+ style="background-color: var(--axebow-base);"
14391
+ ></div>
14392
+ <div class="flex-1 min-w-0 flex flex-col gap-2">
14393
+ <div class="cta-skeleton-bar h-4 rounded" style="background-color: var(--axebow-base); width: 40%;"></div>
14394
+ <div class="cta-skeleton-bar h-3 rounded" style="background-color: var(--axebow-base); width: 70%;"></div>
14395
+ </div>
14396
+ </div>
14397
+ `;
14398
+ }
14097
14399
  render() {
14098
14400
  const { color: criticalityColor, iconName } = CRITICALITY_STYLES[this._highestCriticality];
14099
14401
  const chevronIconName = this.expanded ? "keyboard_arrow_down" : "chevron_right";
14402
+ const hasCallToActions = this.callToActions.length > 0;
14100
14403
  return html`
14101
- <div class="w-full flex flex-col">
14404
+ <div class="w-full box-border border border-solid border-(--axebow-table-header-border) rounded-lg overflow-hidden flex flex-col">
14102
14405
  <div
14103
- class="w-full box-border py-3 px-5 flex flex-row items-center justify-between"
14104
- style="background-color: ${this.expanded ? "var(--axebow-base)" : "var(--axebow-white)"};"
14406
+ class="w-full box-border py-3 px-5 flex flex-row items-center justify-between ${hasCallToActions ? "cursor-pointer" : ""}"
14407
+ style="background-color: ${this.expanded || this.refreshing ? "var(--axebow-base)" : "var(--axebow-white)"};"
14408
+ @click=${() => this._toggle()}
14105
14409
  >
14106
14410
  <div class="flex flex-row items-center gap-2">
14107
- <axebow-icon iconName=${iconName} iconColor=${criticalityColor} size="2xl"></axebow-icon>
14108
- <span class="text-base font-semibold">${this.actionNeededLabel}</span>
14411
+ ${hasCallToActions ? html`<axebow-icon iconName=${iconName} iconColor=${criticalityColor} size="2xl"></axebow-icon>` : ""}
14412
+ <span class="text-base font-semibold">${hasCallToActions ? this.actionNeededLabel : this.noActionsLabel}</span>
14109
14413
  <div
14110
14414
  class="w-6 h-6 shrink-0 rounded-full flex items-center justify-center"
14111
- style="background-color: ${this.expanded ? "var(--axebow-white)" : "var(--axebow-base)"};"
14415
+ style="background-color: ${hasCallToActions ? this.expanded ? "var(--axebow-white)" : "var(--axebow-base)" : "#0ECD9A"};"
14112
14416
  >
14113
- <span class="text-base">${this.notifications.length}</span>
14417
+ <span class="text-base" style="color: ${hasCallToActions ? "inherit" : "var(--axebow-white)"};">${this.callToActions.length}</span>
14114
14418
  </div>
14115
14419
  </div>
14116
14420
 
14117
14421
  <div class="flex flex-row items-center gap-3">
14118
14422
  <span class="text-sm text-(--axebow-gray) whitespace-nowrap">${this.lastUpdatedText}</span>
14119
14423
  <div
14120
- class="w-7 h-7 shrink-0 rounded-md border border-solid flex items-center justify-center"
14424
+ class="w-7 h-7 shrink-0 rounded-md border border-solid flex items-center justify-center cursor-pointer"
14121
14425
  style="border-color: var(--axebow-gray);"
14426
+ @click=${(e) => {
14427
+ e.stopPropagation();
14428
+ this._handleRefresh();
14429
+ }}
14122
14430
  >
14123
- <axebow-icon iconName="undo" iconColor="var(--axebow-gray)" size="md"></axebow-icon>
14124
- </div>
14125
- <div
14126
- class="w-5 h-5 shrink-0 flex items-center justify-center cursor-pointer"
14127
- @click=${() => this._toggle()}
14128
- >
14129
- <axebow-icon iconName=${chevronIconName} iconColor="var(--axebow-tertiary)" size="md"></axebow-icon>
14431
+ <axebow-icon iconName="refresh" iconColor="var(--axebow-gray)" size="md"></axebow-icon>
14130
14432
  </div>
14433
+ ${hasCallToActions ? html`
14434
+ <div class="w-5 h-5 shrink-0 flex items-center justify-center cursor-pointer">
14435
+ <axebow-icon iconName=${chevronIconName} iconColor="var(--axebow-tertiary)" size="md"></axebow-icon>
14436
+ </div>
14437
+ ` : ""}
14131
14438
  </div>
14132
14439
  </div>
14133
14440
 
14134
- ${this.expanded ? html`
14441
+ ${this.refreshing ? html`
14442
+ <div class="w-full flex flex-col">
14443
+ ${Array.from({ length: _AxebowCallToActionFeature.REFRESH_SKELETON_ROWS }, () => this._renderSkeletonRow())}
14444
+ </div>
14445
+ ` : ""}
14446
+ ${!this.refreshing && this.expanded && hasCallToActions ? html`
14135
14447
  <div class="w-full flex flex-col">
14136
- ${this.notifications.map((notification) => html`
14448
+ ${groupCallToActionNotifications(this.callToActions).map(({ notification, count }) => html`
14137
14449
  <axebow-call-to-action-row
14138
- criticality=${ifDefined(notification?.criticality)}
14139
- heading=${ifDefined(notification?.heading)}
14140
- badgeLabel=${ifDefined(notification?.badgeLabel)}
14141
- description=${ifDefined(notification?.description)}
14142
- lowNoteText=${ifDefined(notification?.lowNoteText)}
14143
- .buttons=${notification?.buttons ?? []}
14450
+ criticality=${notification.criticality}
14451
+ heading=${getCtaHeading(notification)}
14452
+ badgeLabel=${getCtaBadgeLabel(notification)}
14453
+ description=${getCtaDescription(notification)}
14454
+ lowNoteText=${DEFAULT_LOW_NOTE_TEXT}
14455
+ count=${count}
14456
+ .buttons=${buildCtaButtons(notification, (detail) => this.dispatchEvent(new CustomEvent("cta-action", {
14457
+ detail,
14458
+ bubbles: true,
14459
+ composed: true
14460
+ })))}
14144
14461
  ></axebow-call-to-action-row>
14145
14462
  `)}
14146
14463
  </div>
@@ -14149,11 +14466,13 @@ var AxebowCallToActionFeature = class AxebowCallToActionFeature extends LitEleme
14149
14466
  `;
14150
14467
  }
14151
14468
  };
14152
- __decorate([property({ type: Array })], AxebowCallToActionFeature.prototype, "notifications", void 0);
14469
+ __decorate([property({ type: Array })], AxebowCallToActionFeature.prototype, "callToActions", void 0);
14153
14470
  __decorate([property({ type: String })], AxebowCallToActionFeature.prototype, "actionNeededLabel", void 0);
14471
+ __decorate([property({ type: String })], AxebowCallToActionFeature.prototype, "noActionsLabel", void 0);
14154
14472
  __decorate([property({ type: String })], AxebowCallToActionFeature.prototype, "lastUpdatedText", void 0);
14155
14473
  __decorate([state()], AxebowCallToActionFeature.prototype, "expanded", void 0);
14156
- AxebowCallToActionFeature = __decorate([customElement("axebow-call-to-action-feature")], AxebowCallToActionFeature);
14474
+ __decorate([state()], AxebowCallToActionFeature.prototype, "refreshing", void 0);
14475
+ AxebowCallToActionFeature = _AxebowCallToActionFeature = __decorate([customElement("axebow-call-to-action-feature")], AxebowCallToActionFeature);
14157
14476
  //#endregion
14158
14477
  //#region src/components/axebow-cta-dialog/axebow-cta-dialog.ts
14159
14478
  var AxebowCtaDialog = class AxebowCtaDialog extends LitElement {
@@ -14181,24 +14500,32 @@ var AxebowCtaDialog = class AxebowCtaDialog extends LitElement {
14181
14500
  title=${this.dialogTitle}
14182
14501
  width="76.25rem"
14183
14502
  maxWidth="100%"
14184
- height="auto"
14503
+ height="40.625rem"
14504
+ closeIconName="cancel"
14505
+ closeIconColor="#8A94AE"
14506
+ closeButtonSize="1.5rem"
14185
14507
  @close=${() => this._handleClose()}
14186
14508
  >
14187
14509
  <div class="flex flex-col gap-2 p-6">
14188
- ${this.notifications.map((notification) => html`
14510
+ ${groupCallToActionNotifications(this.notifications).map(({ notification, count }) => html`
14189
14511
  <axebow-call-to-action-row
14190
- criticality=${ifDefined(notification?.criticality)}
14191
- heading=${ifDefined(notification?.heading)}
14192
- badgeLabel=${ifDefined(notification?.badgeLabel)}
14193
- description=${ifDefined(notification?.description)}
14194
- lowNoteText=${ifDefined(notification?.lowNoteText)}
14195
- .buttons=${notification?.buttons ?? []}
14512
+ criticality=${notification.criticality}
14513
+ heading=${getCtaHeading(notification)}
14514
+ badgeLabel=${getCtaBadgeLabel(notification)}
14515
+ description=${getCtaDescription(notification)}
14516
+ lowNoteText=${DEFAULT_LOW_NOTE_TEXT}
14517
+ count=${count}
14518
+ .buttons=${buildCtaButtons(notification, (detail) => this.dispatchEvent(new CustomEvent("cta-action", {
14519
+ detail,
14520
+ bubbles: true,
14521
+ composed: true
14522
+ })))}
14196
14523
  ></axebow-call-to-action-row>
14197
14524
  `)}
14198
14525
  </div>
14199
14526
 
14200
14527
  <div slot="footer" class="flex items-center justify-end p-4">
14201
- <axebow-button variant="primary" @click=${() => this._handleClose()}>${this.goBackLabel}</axebow-button>
14528
+ <axebow-button variant="primary" outline @click=${() => this._handleClose()}>${this.goBackLabel}</axebow-button>
14202
14529
  </div>
14203
14530
  </axebow-modal>
14204
14531
  `;
@@ -14214,6 +14541,2163 @@ __decorate([property({ type: Array })], AxebowCtaDialog.prototype, "notification
14214
14541
  __decorate([property({ attribute: false })], AxebowCtaDialog.prototype, "onClose", void 0);
14215
14542
  AxebowCtaDialog = __decorate([customElement("axebow-cta-dialog")], AxebowCtaDialog);
14216
14543
  //#endregion
14217
- export { AxebowActionsFooter, AxebowAdjustmentResourcesCounter, AxebowAlert, AxebowBadge, AxebowBanner, AxebowBaseCard, AxebowBoxSection, AxebowBreadcrumbHeader, AxebowButton, AxebowCallToActionFeature, AxebowCallToActionRow, AxebowCardActionBanner, AxebowCardAttentionBanner, AxebowCardCloudLogo, AxebowCardFilter, AxebowCardFilterItem, AxebowCardFooter, AxebowCardHeader, AxebowCardResourceRow, AxebowCardResourceTable, AxebowCardSpecialLink, AxebowCardStatItem, AxebowCardStatsRow, AxebowCardStatus, AxebowCardTableHeader, AxebowCardVersionSelector, AxebowCarouselInput, AxebowCarouselSelectorItem, AxebowCarouselSelectorTenant, AxebowChannelConfigPanel, AxebowCheckboxInput, AxebowCollaboratorsDialog, AxebowCopyBox, AxebowCtaDialog, AxebowDeployCard, AxebowDeploySummary, AxebowDialog, AxebowDivider, AxebowDragDropUploadFile, AxebowDraggableService, AxebowEmptyState, AxebowExpandableCard, AxebowExpandableHeader, AxebowFilterBar, AxebowFooter, AxebowFormPanelField, AxebowGettingStartedCard, AxebowGraph, AxebowHeader, AxebowHelpBubble, AxebowHyperlinkSwitch, AxebowIcon, AxebowInfrastructureCard, AxebowInput, AxebowInputBase, AxebowInstancesTable, AxebowLimitsCounter, AxebowManageHyperlinks, AxebowMarketplaceCard, AxebowModal, AxebowModalsConfirmation, AxebowMoreActions, AxebowNumberCard, AxebowNumbersSection, AxebowNumericInput, AxebowObservabilityContainer, AxebowPill, AxebowPlanSelectField, AxebowProgressBar, AxebowPromotionDropdown, AxebowProvidersInput, AxebowQuickTipButton, AxebowQuickTipSection, AxebowRefreshPeriodPanel, AxebowRegistrySelector, AxebowResourceBar, AxebowResourceBoxForm, AxebowResourceCard, AxebowResourceLimitInput, AxebowResourceLimitsPanel, AxebowResourcesCounter, AxebowRoleCard, AxebowRoleContainerDropdown, AxebowRoleTooltip, AxebowRuntimeZipDialog, AxebowSearch, AxebowSearchBarFilters, AxebowSelectInput, AxebowSelectInputWithDivider, AxebowSelectorCard, AxebowSelectorSlider, AxebowServiceDetailHeader, AxebowServicesPanel, AxebowSidebar, AxebowStatus, AxebowStepHeader, AxebowSummaryCard, AxebowSummaryFlavors, AxebowSummaryKeyValue, AxebowSummaryLimits, AxebowSummaryStep, AxebowSummaryStepHeader, AxebowSwitch, AxebowSwitchInput, AxebowTabSelector, AxebowTabsSubmenu, AxebowTagsInput, AxebowTenantCard, AxebowTenantResourceTable, AxebowTenantsTable, AxebowTextInput, AxebowTimeRangePanel, AxebowTooltip, AxebowUndeployCard, AxebowUnderlineTabSelector, AxebowUsageTooltip, CRITICALITY_STYLES, CustomHomePageBody, DEFAULT_ADD_DIALOG_LABELS, DeployModalComponent, DeployModalFooter, DeployModalHeader, DeployPageBody, STATUS_COLORS, TableChart, axebowTheme, buildAddButton, buildExternalNodeContent, buildMainNodeContent, createElement, createIcon };
14544
+ //#region src/components/axebow-ul/axebow-ul.ts
14545
+ var AxebowUl = class AxebowUl extends LitElement {
14546
+ constructor(..._args) {
14547
+ super(..._args);
14548
+ this._items = [];
14549
+ }
14550
+ static {
14551
+ this.styles = [
14552
+ unsafeCSS(tailwind_default),
14553
+ axebowTheme,
14554
+ css`
14555
+ ::slotted(*) {
14556
+ display: none !important;
14557
+ }
14558
+ `
14559
+ ];
14560
+ }
14561
+ _handleSlotChange(e) {
14562
+ const slot = e.target;
14563
+ this._items = slot.assignedElements({ flatten: true }).filter((el) => el.tagName === "LI").map((el) => el.innerHTML);
14564
+ }
14565
+ render() {
14566
+ return html`
14567
+ <slot @slotchange=${this._handleSlotChange}></slot>
14568
+ <ul class="list-none mt-2 mb-4 ml-2">
14569
+ ${this._items.map((item) => html`
14570
+ <li class="flex items-center gap-2">
14571
+ <span class="block shrink-0 w-1.5 h-1.5 rounded-full bg-(--axebow-gray)"></span>
14572
+ ${unsafeHTML(item)}
14573
+ </li>
14574
+ `)}
14575
+ </ul>
14576
+ `;
14577
+ }
14578
+ };
14579
+ __decorate([state()], AxebowUl.prototype, "_items", void 0);
14580
+ AxebowUl = __decorate([customElement("axebow-ul")], AxebowUl);
14581
+ //#endregion
14582
+ //#region src/components/axebow-border-container/axebow-border-container.ts
14583
+ var AxebowBorderContainer = class AxebowBorderContainer extends LitElement {
14584
+ constructor(..._args) {
14585
+ super(..._args);
14586
+ this.error = false;
14587
+ this.disabled = false;
14588
+ this.label = "";
14589
+ this.required = false;
14590
+ this.compact = false;
14591
+ }
14592
+ static {
14593
+ this.styles = css`
14594
+ :host {
14595
+ display: block;
14596
+ width: 100%;
14597
+ }
14598
+ .container {
14599
+ border: 1px solid #e2e8f0;
14600
+ border-radius: 0.375rem;
14601
+ padding: 0.375rem 0.625rem;
14602
+ background-color: #fff;
14603
+ transition:
14604
+ border-color 0.2s ease,
14605
+ background-color 0.2s ease;
14606
+ display: flex;
14607
+ flex-direction: column;
14608
+ gap: 0.125rem;
14609
+ }
14610
+ .container.compact {
14611
+ width: 14.625rem;
14612
+ height: 2.9375rem;
14613
+ box-sizing: border-box;
14614
+ padding: 0.375rem 0.5rem;
14615
+ justify-content: flex-start;
14616
+ gap: 0.125rem;
14617
+ }
14618
+ ::slotted(*) {
14619
+ margin: 0;
14620
+ }
14621
+ .container:focus-within:not(.disabled) {
14622
+ border-color: var(--axebow-primary);
14623
+ }
14624
+ .container.error {
14625
+ border-color: var(--axebow-error);
14626
+ }
14627
+ .container.disabled {
14628
+ background-color: var(--axebow-anti-flash-white);
14629
+ }
14630
+ .label {
14631
+ font-size: 0.75rem;
14632
+ color: var(--axebow-gray);
14633
+ font-weight: 500;
14634
+ line-height: 1;
14635
+ user-select: none;
14636
+ display: flex;
14637
+ align-items: center;
14638
+ gap: 0.125rem;
14639
+ }
14640
+ .asterisk {
14641
+ color: var(--axebow-error);
14642
+ }
14643
+ `;
14644
+ }
14645
+ render() {
14646
+ return html`
14647
+ <div
14648
+ class="container ${this.compact ? "compact" : ""} ${this.error ? "error" : ""} ${this.disabled ? "disabled" : ""}"
14649
+ >
14650
+ ${this.label || this.required ? html`
14651
+ <div class="label">${this.required ? html`<span class="asterisk">*</span>` : ""} ${this.label}</div>
14652
+ ` : ""}
14653
+ <slot></slot>
14654
+ </div>
14655
+ `;
14656
+ }
14657
+ };
14658
+ __decorate([property({ type: Boolean })], AxebowBorderContainer.prototype, "error", void 0);
14659
+ __decorate([property({ type: Boolean })], AxebowBorderContainer.prototype, "disabled", void 0);
14660
+ __decorate([property({ type: String })], AxebowBorderContainer.prototype, "label", void 0);
14661
+ __decorate([property({ type: Boolean })], AxebowBorderContainer.prototype, "required", void 0);
14662
+ __decorate([property({ type: Boolean })], AxebowBorderContainer.prototype, "compact", void 0);
14663
+ AxebowBorderContainer = __decorate([customElement("axebow-border-container")], AxebowBorderContainer);
14664
+ //#endregion
14665
+ //#region src/components/axebow-copy-icon/axebow-copy-icon.ts
14666
+ var AxebowCopyIcon = class AxebowCopyIcon extends LitElement {
14667
+ constructor(..._args) {
14668
+ super(..._args);
14669
+ this.value = "";
14670
+ this.label = "";
14671
+ this.showText = false;
14672
+ this.iconName = "content_copy";
14673
+ this.successIconName = "verified";
14674
+ this.iconColor = "var(--axebow-tertiary)";
14675
+ this.successIconColor = "var(--axebow-success)";
14676
+ this.size = "small";
14677
+ this.containerClass = "cursor-pointer flex items-center gap-1 h-full";
14678
+ this.successContainerClass = "";
14679
+ this.copyTooltip = "";
14680
+ this.copiedText = "";
14681
+ this.copied = false;
14682
+ }
14683
+ static {
14684
+ this.styles = [
14685
+ unsafeCSS(tailwind_default),
14686
+ axebowTheme,
14687
+ css`
14688
+ :host {
14689
+ display: flex;
14690
+ height: 100%;
14691
+ align-items: center;
14692
+ gap: 0.25rem;
14693
+ }
14694
+ `
14695
+ ];
14696
+ }
14697
+ handleCopy(e) {
14698
+ if (this.copied || !this.value) return;
14699
+ e.stopPropagation();
14700
+ this.copied = true;
14701
+ this.dispatchEvent(new CustomEvent("axebow-copy", {
14702
+ bubbles: true,
14703
+ composed: true,
14704
+ detail: {
14705
+ value: this.value,
14706
+ label: this.label
14707
+ }
14708
+ }));
14709
+ setTimeout(() => {
14710
+ this.copied = false;
14711
+ }, 2e3);
14712
+ }
14713
+ render() {
14714
+ return html`
14715
+ <div
14716
+ class="h-full ${this.copied ? this.successContainerClass || this.containerClass : this.containerClass}"
14717
+ title="${this.copyTooltip}"
14718
+ @click=${this.handleCopy}
14719
+ >
14720
+ <axebow-icon
14721
+ iconName=${this.copied ? this.successIconName : this.iconName}
14722
+ iconColor=${this.copied ? this.successIconColor : this.iconColor}
14723
+ size=${this.size}
14724
+ ></axebow-icon>
14725
+ ${this.showText && this.copied ? html`<span class="text-sm transition-opacity duration-300" style="color: ${this.successIconColor}"
14726
+ >${this.copiedText}</span
14727
+ >` : ""}
14728
+ </div>
14729
+ `;
14730
+ }
14731
+ };
14732
+ __decorate([property({ type: String })], AxebowCopyIcon.prototype, "value", void 0);
14733
+ __decorate([property({ type: String })], AxebowCopyIcon.prototype, "label", void 0);
14734
+ __decorate([property({ type: Boolean })], AxebowCopyIcon.prototype, "showText", void 0);
14735
+ __decorate([property({ type: String })], AxebowCopyIcon.prototype, "iconName", void 0);
14736
+ __decorate([property({ type: String })], AxebowCopyIcon.prototype, "successIconName", void 0);
14737
+ __decorate([property({ type: String })], AxebowCopyIcon.prototype, "iconColor", void 0);
14738
+ __decorate([property({ type: String })], AxebowCopyIcon.prototype, "successIconColor", void 0);
14739
+ __decorate([property({ type: String })], AxebowCopyIcon.prototype, "size", void 0);
14740
+ __decorate([property({ type: String })], AxebowCopyIcon.prototype, "containerClass", void 0);
14741
+ __decorate([property({ type: String })], AxebowCopyIcon.prototype, "successContainerClass", void 0);
14742
+ __decorate([property({ type: String })], AxebowCopyIcon.prototype, "copyTooltip", void 0);
14743
+ __decorate([property({ type: String })], AxebowCopyIcon.prototype, "copiedText", void 0);
14744
+ __decorate([state()], AxebowCopyIcon.prototype, "copied", void 0);
14745
+ AxebowCopyIcon = __decorate([customElement("axebow-copy-icon")], AxebowCopyIcon);
14746
+ //#endregion
14747
+ //#region src/components/axebow-page-actions/axebow-page-actions.ts
14748
+ var AxebowPageActions = class AxebowPageActions extends LitElement {
14749
+ constructor(..._args) {
14750
+ super(..._args);
14751
+ this.actions = [];
14752
+ this.gap = "0.75rem";
14753
+ this._hoveredIndex = -1;
14754
+ }
14755
+ static {
14756
+ this.styles = [unsafeCSS(tailwind_default)];
14757
+ }
14758
+ handleActionClick(index) {
14759
+ const action = this.actions[index];
14760
+ if (action && typeof action.onClick === "function") action.onClick();
14761
+ }
14762
+ render() {
14763
+ if (this.actions.length === 0) return html``;
14764
+ return html`
14765
+ <div class="flex flex-wrap items-center" style="gap: ${this.gap};">
14766
+ ${this.actions.map((action, i) => {
14767
+ const outlined = this.actions.length > 1 && i > 0;
14768
+ const isHovered = this._hoveredIndex === i;
14769
+ const iconColor = action.iconColor ?? (outlined ? isHovered ? "var(--axebow-gray)" : "var(--axebow-tertiary)" : "white");
14770
+ return html`
14771
+ <axebow-button
14772
+ variant="primary"
14773
+ ?outline=${outlined}
14774
+ .disabled=${!!action.disabled}
14775
+ fixedWidth=${ifDefined(this.buttonWidth)}
14776
+ fixedHeight=${ifDefined(this.buttonHeight)}
14777
+ @click=${() => this.handleActionClick(i)}
14778
+ @mouseenter=${() => this._hoveredIndex = i}
14779
+ @mouseleave=${() => this._hoveredIndex = -1}
14780
+ >
14781
+ ${action.title}
14782
+ ${action.iconName ? html`<axebow-icon
14783
+ slot="suffix"
14784
+ iconName="${action.iconName}"
14785
+ iconColor="${iconColor}"
14786
+ size="${action.iconSize ?? "medium"}"
14787
+ ></axebow-icon>` : ""}
14788
+ </axebow-button>
14789
+ `;
14790
+ })}
14791
+ </div>
14792
+ `;
14793
+ }
14794
+ };
14795
+ __decorate([property({ type: Array })], AxebowPageActions.prototype, "actions", void 0);
14796
+ __decorate([property({ type: String })], AxebowPageActions.prototype, "buttonWidth", void 0);
14797
+ __decorate([property({ type: String })], AxebowPageActions.prototype, "buttonHeight", void 0);
14798
+ __decorate([property({ type: String })], AxebowPageActions.prototype, "gap", void 0);
14799
+ __decorate([state()], AxebowPageActions.prototype, "_hoveredIndex", void 0);
14800
+ AxebowPageActions = __decorate([customElement("axebow-page-actions")], AxebowPageActions);
14801
+ //#endregion
14802
+ //#region src/components/axebow-mobile-warning-banner/axebow-mobile-warning-banner.ts
14803
+ var AxebowMobileWarningBanner = class AxebowMobileWarningBanner extends LitElement {
14804
+ constructor(..._args) {
14805
+ super(..._args);
14806
+ this.show = false;
14807
+ this.heading = "";
14808
+ this.message = "";
14809
+ this.closeAriaLabel = "";
14810
+ }
14811
+ static {
14812
+ this.styles = [unsafeCSS(tailwind_default), css`
14813
+ :host {
14814
+ display: block;
14815
+ }
14816
+
14817
+ .banner-container {
14818
+ position: fixed;
14819
+ top: 80px;
14820
+ left: 0;
14821
+ right: 0;
14822
+ z-index: 9999;
14823
+ padding: 1rem;
14824
+ background: linear-gradient(135deg, #fbbf24 0%, var(--axebow-warning) 100%);
14825
+ box-shadow:
14826
+ 0 4px 6px -1px rgba(0, 0, 0, 0.1),
14827
+ 0 2px 4px -1px rgba(0, 0, 0, 0.06);
14828
+ animation: slideDown 0.3s ease-out;
14829
+ }
14830
+
14831
+ @keyframes slideDown {
14832
+ from {
14833
+ transform: translateY(-100%);
14834
+ opacity: 0;
14835
+ }
14836
+ to {
14837
+ transform: translateY(0);
14838
+ opacity: 1;
14839
+ }
14840
+ }
14841
+
14842
+ .banner-content {
14843
+ max-width: 1200px;
14844
+ margin: 0 auto;
14845
+ display: flex;
14846
+ align-items: center;
14847
+ gap: 1rem;
14848
+ }
14849
+
14850
+ .icon-container {
14851
+ flex-shrink: 0;
14852
+ width: 2rem;
14853
+ height: 2rem;
14854
+ background: rgba(255, 255, 255, 0.9);
14855
+ border-radius: 50%;
14856
+ display: flex;
14857
+ align-items: center;
14858
+ justify-content: center;
14859
+ }
14860
+
14861
+ .message-container {
14862
+ flex: 1;
14863
+ color: white;
14864
+ }
14865
+
14866
+ .message-title {
14867
+ font-weight: 600;
14868
+ font-size: 1rem;
14869
+ margin-bottom: 0.25rem;
14870
+ }
14871
+
14872
+ .message-text {
14873
+ font-size: 0.875rem;
14874
+ opacity: 0.95;
14875
+ }
14876
+
14877
+ .close-button {
14878
+ flex-shrink: 0;
14879
+ background: rgba(255, 255, 255, 0.2);
14880
+ border: none;
14881
+ border-radius: 0.375rem;
14882
+ padding: 0.5rem;
14883
+ cursor: pointer;
14884
+ transition: all 0.2s;
14885
+ display: flex;
14886
+ align-items: center;
14887
+ justify-content: center;
14888
+ color: white;
14889
+ }
14890
+
14891
+ .close-button:hover {
14892
+ background: rgba(255, 255, 255, 0.3);
14893
+ }
14894
+
14895
+ .close-button:active {
14896
+ transform: scale(0.95);
14897
+ }
14898
+ `];
14899
+ }
14900
+ handleClose() {
14901
+ this.show = false;
14902
+ this.dispatchEvent(new CustomEvent("close", {
14903
+ bubbles: true,
14904
+ composed: true
14905
+ }));
14906
+ }
14907
+ render() {
14908
+ if (!this.show) return html``;
14909
+ return html`
14910
+ <div class="banner-container">
14911
+ <div class="banner-content">
14912
+ <div class="icon-container">
14913
+ <axebow-icon iconName="warning" iconColor="var(--axebow-warning)" size="md"></axebow-icon>
14914
+ </div>
14915
+ <div class="message-container">
14916
+ <div class="message-title">${this.heading}</div>
14917
+ <div class="message-text">${this.message}</div>
14918
+ </div>
14919
+ <button class="close-button" @click=${this.handleClose} aria-label="${this.closeAriaLabel}">
14920
+ <axebow-icon iconName="close" iconColor="white" size="md"></axebow-icon>
14921
+ </button>
14922
+ </div>
14923
+ </div>
14924
+ `;
14925
+ }
14926
+ };
14927
+ __decorate([property({ type: Boolean })], AxebowMobileWarningBanner.prototype, "show", void 0);
14928
+ __decorate([property({ type: String })], AxebowMobileWarningBanner.prototype, "heading", void 0);
14929
+ __decorate([property({ type: String })], AxebowMobileWarningBanner.prototype, "message", void 0);
14930
+ __decorate([property({ type: String })], AxebowMobileWarningBanner.prototype, "closeAriaLabel", void 0);
14931
+ AxebowMobileWarningBanner = __decorate([customElement("axebow-mobile-warning-banner")], AxebowMobileWarningBanner);
14932
+ //#endregion
14933
+ //#region src/components/axebow-boxed-input/axebow-boxed-input.ts
14934
+ var AxebowBoxedInput = class AxebowBoxedInput extends LitElement {
14935
+ constructor(..._args) {
14936
+ super(..._args);
14937
+ this.required = false;
14938
+ this.label = "";
14939
+ this.type = "input";
14940
+ this.options = [];
14941
+ this.value = "";
14942
+ this.disabled = false;
14943
+ this.clearable = true;
14944
+ this.compact = false;
14945
+ this.password = false;
14946
+ this.showPlaceholder = true;
14947
+ this.bordered = false;
14948
+ this.copyable = false;
14949
+ this.noTypeSelectedText = "";
14950
+ this.showPassword = false;
14951
+ }
14952
+ static {
14953
+ this.styles = [
14954
+ unsafeCSS(tailwind_default),
14955
+ axebowTheme,
14956
+ css`
14957
+ sl-select::part(listbox) {
14958
+ max-height: 200px;
14959
+ overflow-y: auto;
14960
+ scrollbar-width: thin;
14961
+ }
14962
+ .compact-mode sl-select::part(combobox) {
14963
+ background-color: transparent !important;
14964
+ }
14965
+
14966
+ .boxed-container:focus-within {
14967
+ border-color: black !important;
14968
+ box-shadow: 0 0 0 1px black !important;
14969
+ }
14970
+
14971
+ .boxed-container sl-select:focus-within::part(combobox),
14972
+ .boxed-container sl-select::part(combobox) {
14973
+ border-color: transparent !important;
14974
+ box-shadow: none !important;
14975
+ }
14976
+
14977
+ .boxed-container-bordered {
14978
+ border: 1px solid var(--axebow-border-gray) !important;
14979
+ transition:
14980
+ border-color 0.15s ease,
14981
+ box-shadow 0.15s ease;
14982
+ }
14983
+
14984
+ .boxed-container-bordered:focus-within {
14985
+ border-color: black !important;
14986
+ box-shadow: 0 0 0 1px black !important;
14987
+ }
14988
+
14989
+ .boxed-container-bordered sl-select:focus-within::part(combobox),
14990
+ .boxed-container-bordered sl-select::part(combobox) {
14991
+ border-color: transparent !important;
14992
+ box-shadow: none !important;
14993
+ }
14994
+
14995
+ textarea {
14996
+ line-height: 1.5;
14997
+ }
14998
+
14999
+ textarea::-webkit-scrollbar {
15000
+ width: 8px;
15001
+ }
15002
+
15003
+ textarea::-webkit-scrollbar-track {
15004
+ background: #f1f1f1;
15005
+ border-radius: 0.25rem;
15006
+ }
15007
+
15008
+ textarea::-webkit-scrollbar-thumb {
15009
+ background: #888;
15010
+ border-radius: 0.25rem;
15011
+ }
15012
+
15013
+ textarea::-webkit-scrollbar-thumb:hover {
15014
+ background: #555;
15015
+ }
15016
+ `
15017
+ ];
15018
+ }
15019
+ updated(changedProperties) {
15020
+ super.updated(changedProperties);
15021
+ if (changedProperties.has("value") && this.type === "textarea") this.adjustTextareaHeight();
15022
+ }
15023
+ adjustTextareaHeight() {
15024
+ const textarea = this.shadowRoot?.querySelector("textarea");
15025
+ if (textarea) {
15026
+ const maxHeight = 120;
15027
+ textarea.style.height = "auto";
15028
+ const newHeight = Math.min(textarea.scrollHeight, maxHeight);
15029
+ textarea.style.height = `${newHeight}px`;
15030
+ }
15031
+ }
15032
+ renderActions(icons) {
15033
+ if (!icons.length) return html``;
15034
+ return html` <div class="flex items-center gap-1 pr-3 shrink-0">${icons}</div> `;
15035
+ }
15036
+ get _showCopyAction() {
15037
+ return !!(this.onCopy || this.copyable);
15038
+ }
15039
+ render() {
15040
+ const disabledStyles = this.disabled ? " opacity-70 cursor-not-allowed" : "";
15041
+ const borderClass = this.bordered ? "boxed-container-bordered" : "boxed-container";
15042
+ const checkboxInput = `flex flex-col rounded-lg border border-gray-300 mx-2 mb-4 items-start justify-between ${borderClass} transition-all` + disabledStyles;
15043
+ const checkboxInputTall = checkboxInput + " py-2";
15044
+ const checkboxInputNormal = checkboxInput + " h-14";
15045
+ const textareaInput = `flex flex-col rounded-lg border border-gray-300 mx-2 mb-4 items-start justify-start gap-2 ${borderClass} transition-all` + disabledStyles;
15046
+ const label = "flex flex-row w-full px-4 gap-2 mt-2";
15047
+ switch (this.type) {
15048
+ case "input": {
15049
+ const actions = [];
15050
+ if (this.password) actions.push(html`
15051
+ <div @click=${() => this.showPassword = !this.showPassword} class="cursor-pointer flex items-center">
15052
+ <axebow-icon
15053
+ iconName="visibility${this.showPassword ? "_off" : ""}"
15054
+ iconColor="var(--axebow-tertiary)"
15055
+ ></axebow-icon>
15056
+ </div>
15057
+ `);
15058
+ if (this._showCopyAction) actions.push(html`
15059
+ <slot
15060
+ name="copy-action"
15061
+ @click=${(e) => e.preventDefault()}
15062
+ @mousedown=${(e) => e.preventDefault()}
15063
+ ></slot>
15064
+ `);
15065
+ if (this.compact) return html`
15066
+ <div part="base" style="${`display:flex; align-items:center; border-radius: 0.375rem; border:1px solid var(--boxed-input-border-color, #d1d5db); width:100%; padding:0 12px; height:var(--sl-input-height-medium,40px); box-sizing:border-box;${this.disabled ? " opacity:0.7; cursor:not-allowed;" : ""}`}">
15067
+ <input
15068
+ type=${this.password && !this.showPassword ? "password" : "text"}
15069
+ .value=${this.value}
15070
+ ?disabled=${this.disabled}
15071
+ @input=${this.handleInputChange}
15072
+ @change=${this.handleInputChange}
15073
+ style="flex:1; border:none; outline:none; background:transparent; font-size:0.875rem; cursor:${this.disabled ? "not-allowed" : "auto"};"
15074
+ placeholder="${this.showPlaceholder && this.label ? `Enter ${this.label.toLowerCase()}` : ""}"
15075
+ maxlength="${this.maxlength || 255}"
15076
+ />
15077
+ ${this.renderActions(actions)}
15078
+ </div>
15079
+ `;
15080
+ return html`
15081
+ <div class="${this.bordered ? checkboxInputTall : checkboxInputNormal}">
15082
+ <div class="${label}">
15083
+ ${this.required ? html`<span class="text-(--axebow-error)">*</span>` : ""}
15084
+ <span class="text-(--axebow-gray)"> ${this.label}</span>
15085
+ </div>
15086
+ <div class="flex flex-row items-center w-full pl-4 ${this.bordered && this.password ? "pb-1" : ""}">
15087
+ <input
15088
+ type=${this.password && !this.showPassword ? "password" : "text"}
15089
+ .value=${this.value}
15090
+ ?disabled=${this.disabled}
15091
+ @input=${this.handleInputChange}
15092
+ @change=${this.handleInputChange}
15093
+ style="flex: 1; border: none; outline: none; background: transparent; font-size: var(--font-base)"
15094
+ class="${this.disabled ? "cursor-not-allowed" : ""}"
15095
+ placeholder="${this.showPlaceholder ? `Enter ${this.label.toLowerCase()}` : ""}"
15096
+ maxlength="${this.maxlength || 255}"
15097
+ />
15098
+ ${this.renderActions(actions)}
15099
+ </div>
15100
+ </div>
15101
+ `;
15102
+ }
15103
+ case "textarea": return html`
15104
+ <div class="${textareaInput}">
15105
+ <div class="${label}">
15106
+ ${this.required ? html`<span class="text-(--axebow-error)">*</span>` : ""}
15107
+ <span class="text-(--axebow-gray)"> ${this.label}</span>
15108
+ </div>
15109
+ <div class="flex flex-col w-full px-4 mb-2">
15110
+ <textarea
15111
+ .value=${this.value}
15112
+ ?disabled=${this.disabled}
15113
+ @input=${this.handleTextareaChange}
15114
+ class="w-full border-none outline-none bg-transparent resize-none max-h-30 overflow-y-auto text-sm p-0 ${this.disabled ? "cursor-not-allowed" : ""}"
15115
+ placeholder="${this.showPlaceholder ? `Enter ${this.label.toLowerCase()}` : ""}"
15116
+ ></textarea>
15117
+ </div>
15118
+ </div>
15119
+ `;
15120
+ case "checkbox": return html`
15121
+ <div class="${this.bordered ? checkboxInputTall : checkboxInputNormal}">
15122
+ <div class="${label}">
15123
+ ${this.required ? html`<span class="text-(--axebow-error)">*</span>` : ""}
15124
+ <span class="text-(--axebow-gray)"> ${this.label}</span>
15125
+ </div>
15126
+ <div class="flex flex-row gap-4 w-full pl-4 pr-3 ${this.bordered && this.password ? "pb-1" : ""}">
15127
+ ${this.options.map((option) => html`
15128
+ <sl-checkbox
15129
+ size="medium"
15130
+ ?disabled=${this.disabled}
15131
+ ?checked=${option === this.value}
15132
+ @sl-change=${this.handleCheckboxChange}
15133
+ class="${this.disabled ? "cursor-not-allowed" : ""}"
15134
+ >${option}</sl-checkbox
15135
+ >
15136
+ `)}
15137
+ </div>
15138
+ </div>
15139
+ `;
15140
+ case "select":
15141
+ if (this.compact) return html`
15142
+ <div class="flex flex-col mx-3 my-2 compact-mode ${disabledStyles}">
15143
+ <div class="flex flex-row gap-2 mb-1 pl-1">
15144
+ ${this.required ? html`<span class="text-(--axebow-error)">*</span>` : ""}
15145
+ <span class="text-(--axebow-gray)">${this.label}</span>
15146
+ </div>
15147
+ <div class="w-full mx-auto">
15148
+ <sl-select
15149
+ value=${this.value}
15150
+ @sl-change=${this.handleSelectChange}
15151
+ ?clearable=${this.clearable}
15152
+ ?disabled=${this.disabled}
15153
+ class="${this.disabled ? "cursor-not-allowed" : ""}"
15154
+ >
15155
+ ${this._showCopyAction && this.value ? html`
15156
+ <div
15157
+ slot="suffix"
15158
+ class="flex items-center justify-center p-1 cursor-pointer transition-transform duration-200 ease-in-out hover:scale-110 active:scale-95"
15159
+ @click=${(e) => e.stopPropagation()}
15160
+ @mousedown=${(e) => e.stopPropagation()}
15161
+ @pointerdown=${(e) => e.stopPropagation()}
15162
+ >
15163
+ <slot name="copy-action"></slot>
15164
+ </div>
15165
+ ` : ""}
15166
+ ${this.options.map((option) => html`<sl-option value=${option}>${option}</sl-option>`)}
15167
+ </sl-select>
15168
+ </div>
15169
+ </div>
15170
+ `;
15171
+ if (this.bordered) return html`
15172
+ <div
15173
+ class="flex flex-col rounded-lg mx-2 mb-4 items-start justify-center px-4 py-1 ${borderClass} transition-all${disabledStyles}"
15174
+ >
15175
+ <div class="flex flex-row gap-2 mt-1">
15176
+ ${this.required ? html`<span class="text-(--axebow-error)">*</span>` : ""}
15177
+ <span class="text-(--axebow-gray)">${this.label}</span>
15178
+ </div>
15179
+ <sl-select
15180
+ value=${this.value}
15181
+ @sl-change=${this.handleSelectChange}
15182
+ ?clearable=${this.clearable}
15183
+ ?disabled=${this.disabled}
15184
+ class="w-full mb-1 ${this.disabled ? "cursor-not-allowed" : ""}"
15185
+ >
15186
+ ${this._showCopyAction && this.value ? html`
15187
+ <div
15188
+ slot="suffix"
15189
+ class="flex items-center justify-center p-1 cursor-pointer transition-transform duration-200 ease-in-out hover:scale-110 active:scale-95"
15190
+ @click=${(e) => e.stopPropagation()}
15191
+ @mousedown=${(e) => e.stopPropagation()}
15192
+ @pointerdown=${(e) => e.stopPropagation()}
15193
+ >
15194
+ <slot name="copy-action"></slot>
15195
+ </div>
15196
+ ` : ""}
15197
+ ${this.options.map((option) => html`<sl-option value=${option}>${option}</sl-option>`)}
15198
+ </sl-select>
15199
+ </div>
15200
+ `;
15201
+ return html`
15202
+ <div
15203
+ class="flex flex-col rounded-lg border border-(--axebow-light-gray) mx-2 mb-4 h-16 items-start justify-between transition-all ${disabledStyles}"
15204
+ >
15205
+ <div class="${label}">
15206
+ ${this.required ? html`<span class="text-(--axebow-error)">*</span>` : ""}
15207
+ <span class="text-(--axebow-gray)"> ${this.label}</span>
15208
+ </div>
15209
+ <div class="mb-2 w-full px-4">
15210
+ <sl-select
15211
+ value=${this.value}
15212
+ @sl-change=${this.handleSelectChange}
15213
+ filled
15214
+ ?clearable=${this.clearable}
15215
+ ?disabled=${this.disabled}
15216
+ class="${this.disabled ? "cursor-not-allowed" : ""}"
15217
+ >
15218
+ ${this.options.map((option) => html`<sl-option value=${option}>${option}</sl-option>`)}
15219
+ </sl-select>
15220
+ </div>
15221
+ </div>
15222
+ `;
15223
+ case "cert": {
15224
+ const certActions = [html`<axebow-icon iconName="close" iconColor="black" class="cursor-pointer"></axebow-icon>`, html`<axebow-icon iconName="cloud" iconColor="var(--axebow-tertiary)" class="cursor-pointer"></axebow-icon>`];
15225
+ if (this._showCopyAction) certActions.push(html`
15226
+ <slot
15227
+ name="copy-action"
15228
+ @click=${(e) => e.preventDefault()}
15229
+ @mousedown=${(e) => e.preventDefault()}
15230
+ ></slot>
15231
+ `);
15232
+ return html`
15233
+ <div class="${checkboxInputNormal}">
15234
+ <div class="${label}">
15235
+ ${this.required ? html`<span class="text-(--axebow-error)">*</span>` : ""}
15236
+ <span class="text-(--axebow-gray)"> ${this.label}</span>
15237
+ </div>
15238
+ <div class="flex flex-row items-center w-full pl-4">
15239
+ <p class="flex-1 truncate">${this.value}</p>
15240
+ ${this.renderActions(certActions)}
15241
+ </div>
15242
+ </div>
15243
+ `;
15244
+ }
15245
+ default: return html`<p>${this.noTypeSelectedText}</p>`;
15246
+ }
15247
+ }
15248
+ handleCheckboxChange(e) {
15249
+ if (this.disabled) return;
15250
+ const selectedValue = e.target.textContent?.trim() ?? "";
15251
+ this.value = selectedValue;
15252
+ if (this.onChange) this.onChange(selectedValue);
15253
+ }
15254
+ handleSelectChange(e) {
15255
+ if (this.disabled) return;
15256
+ const selectedValue = e.target.value;
15257
+ this.value = selectedValue;
15258
+ if (this.onChange) this.onChange(selectedValue);
15259
+ }
15260
+ handleInputChange(e) {
15261
+ if (this.disabled) return;
15262
+ const newValue = e.target.value;
15263
+ this.value = newValue;
15264
+ if (this.onChange) this.onChange(newValue);
15265
+ }
15266
+ handleTextareaChange(e) {
15267
+ if (this.disabled) return;
15268
+ const target = e.target;
15269
+ const newValue = target.value;
15270
+ const maxHeight = 120;
15271
+ target.style.height = "auto";
15272
+ const newHeight = Math.min(target.scrollHeight, maxHeight);
15273
+ target.style.height = `${newHeight}px`;
15274
+ this.value = newValue;
15275
+ if (this.onChange) this.onChange(newValue);
15276
+ }
15277
+ };
15278
+ __decorate([property({ type: Boolean })], AxebowBoxedInput.prototype, "required", void 0);
15279
+ __decorate([property({ type: String })], AxebowBoxedInput.prototype, "label", void 0);
15280
+ __decorate([property({ type: String })], AxebowBoxedInput.prototype, "type", void 0);
15281
+ __decorate([property({ attribute: false })], AxebowBoxedInput.prototype, "options", void 0);
15282
+ __decorate([property({ type: String })], AxebowBoxedInput.prototype, "value", void 0);
15283
+ __decorate([property({ type: Number })], AxebowBoxedInput.prototype, "maxlength", void 0);
15284
+ __decorate([property({ attribute: false })], AxebowBoxedInput.prototype, "onChange", void 0);
15285
+ __decorate([property({ attribute: false })], AxebowBoxedInput.prototype, "onCopy", void 0);
15286
+ __decorate([property({
15287
+ type: Boolean,
15288
+ attribute: false
15289
+ })], AxebowBoxedInput.prototype, "disabled", void 0);
15290
+ __decorate([property({ type: Boolean })], AxebowBoxedInput.prototype, "clearable", void 0);
15291
+ __decorate([property({ type: Boolean })], AxebowBoxedInput.prototype, "compact", void 0);
15292
+ __decorate([property({ type: Boolean })], AxebowBoxedInput.prototype, "password", void 0);
15293
+ __decorate([property({ type: Boolean })], AxebowBoxedInput.prototype, "showPlaceholder", void 0);
15294
+ __decorate([property({ type: Boolean })], AxebowBoxedInput.prototype, "bordered", void 0);
15295
+ __decorate([property({ type: Boolean })], AxebowBoxedInput.prototype, "copyable", void 0);
15296
+ __decorate([property({ type: String })], AxebowBoxedInput.prototype, "noTypeSelectedText", void 0);
15297
+ __decorate([state()], AxebowBoxedInput.prototype, "showPassword", void 0);
15298
+ AxebowBoxedInput = __decorate([customElement("axebow-boxed-input")], AxebowBoxedInput);
15299
+ //#endregion
15300
+ //#region src/components/axebow-pem-dialog/axebow-pem-dialog.ts
15301
+ var AxebowPemDialog = class AxebowPemDialog extends LitElement {
15302
+ constructor(..._args) {
15303
+ super(..._args);
15304
+ this.open = false;
15305
+ this.title = "";
15306
+ this.placeholder = "-----BEGIN CERTIFICATE-----\n...\n-----END CERTIFICATE-----";
15307
+ this.value = "";
15308
+ this.fileName = "";
15309
+ this.noteText = "";
15310
+ this.fileContentLabel = "";
15311
+ this.downloadTooltip = "";
15312
+ this.copyLabel = "";
15313
+ this.copyTooltip = "";
15314
+ this.copiedText = "";
15315
+ this.orUploadText = "";
15316
+ this.acceptedFormatText = "";
15317
+ this.saveLabel = "";
15318
+ this.goBackLabel = "";
15319
+ this._internalValue = "";
15320
+ this._internalFileName = "";
15321
+ }
15322
+ static {
15323
+ this.styles = [unsafeCSS(tailwind_default), axebowTheme];
15324
+ }
15325
+ willUpdate(changed) {
15326
+ const dialogJustOpened = changed.has("open") && this.open;
15327
+ if (changed.has("value") || dialogJustOpened) this._internalValue = this.value;
15328
+ if (changed.has("fileName") || dialogJustOpened) this._internalFileName = this.fileName;
15329
+ }
15330
+ get _hasContent() {
15331
+ return !!this._internalValue;
15332
+ }
15333
+ _handleConfirm() {
15334
+ this.dispatchEvent(new CustomEvent("pem-confirm", {
15335
+ detail: {
15336
+ value: this._internalValue,
15337
+ fileName: this._internalFileName
15338
+ },
15339
+ bubbles: true,
15340
+ composed: true
15341
+ }));
15342
+ }
15343
+ _handleClose() {
15344
+ this.dispatchEvent(new CustomEvent("pem-close", {
15345
+ bubbles: true,
15346
+ composed: true
15347
+ }));
15348
+ }
15349
+ _handleDownload() {
15350
+ const blob = new Blob([this._internalValue], { type: "text/plain" });
15351
+ const url = URL.createObjectURL(blob);
15352
+ const a = document.createElement("a");
15353
+ a.href = url;
15354
+ a.download = this._internalFileName || "certificate.pem";
15355
+ a.click();
15356
+ URL.revokeObjectURL(url);
15357
+ }
15358
+ async _handleFileUpload(e) {
15359
+ const input = e.target;
15360
+ const file = input.files?.[0];
15361
+ if (!file) return;
15362
+ this._internalFileName = file.name;
15363
+ this._internalValue = (await file.text()).trim();
15364
+ input.value = "";
15365
+ this.requestUpdate();
15366
+ }
15367
+ render() {
15368
+ return html`
15369
+ <axebow-dialog
15370
+ .open=${this.open}
15371
+ dialogTitle=${this.title}
15372
+ type="custom"
15373
+ canClose
15374
+ .onClose=${() => this._handleClose()}
15375
+ >
15376
+ <div slot="body" class="flex flex-col gap-4" style="min-width: 420px;">
15377
+ <p class="text-sm m-0">${this.noteText}</p>
15378
+ <div class="flex flex-col gap-1">
15379
+ <div class="flex flex-row justify-between items-center">
15380
+ <div class="flex items-center gap-1">
15381
+ <span class="text-[var(--axebow-error)] text-sm">*</span>
15382
+ <span class="text-sm font-bold">${this.fileContentLabel}</span>
15383
+ </div>
15384
+ ${this._hasContent ? html`
15385
+ <div class="flex items-center gap-2">
15386
+ <div
15387
+ class="cursor-pointer flex items-center gap-1"
15388
+ title="${this.downloadTooltip}"
15389
+ @click=${this._handleDownload}
15390
+ >
15391
+ <axebow-icon
15392
+ iconName="download_for_offline"
15393
+ iconColor="var(--axebow-tertiary)"
15394
+ size="md"
15395
+ ></axebow-icon>
15396
+ </div>
15397
+ <axebow-copy-icon
15398
+ .value=${this._internalValue}
15399
+ label="${this.copyLabel}"
15400
+ copyTooltip="${this.copyTooltip}"
15401
+ copiedText="${this.copiedText}"
15402
+ ></axebow-copy-icon>
15403
+ </div>
15404
+ ` : ""}
15405
+ </div>
15406
+ <textarea
15407
+ .value=${live(this._internalValue)}
15408
+ @input=${(e) => {
15409
+ this._internalValue = e.target.value;
15410
+ }}
15411
+ rows="8"
15412
+ placeholder=${this.placeholder}
15413
+ style="font-family: monospace; font-size: 0.75rem; border: 1px solid var(--axebow-border-gray); border-radius: 0.375rem; padding: 8px; resize: vertical; outline: none; width: 100%; box-sizing: border-box; transition: border-color 0.15s; background-color: white; color: black;"
15414
+ @focus=${(e) => {
15415
+ e.target.style.borderColor = "black";
15416
+ }}
15417
+ @blur=${(e) => {
15418
+ e.target.style.borderColor = "var(--axebow-border-gray)";
15419
+ }}
15420
+ ></textarea>
15421
+ </div>
15422
+ <span class="text-sm font-bold">${this.orUploadText}</span>
15423
+
15424
+ <div class="flex items-center justify-between gap-3">
15425
+ <label
15426
+ class="flex items-center gap-2 cursor-pointer px-3 py-1.5 rounded-lg transition-colors"
15427
+ style="border: 1px solid var(--axebow-border-gray); background: white;"
15428
+ @mouseenter=${(e) => {
15429
+ e.currentTarget.style.borderColor = "black";
15430
+ }}
15431
+ @mouseleave=${(e) => {
15432
+ e.currentTarget.style.borderColor = "var(--axebow-border-gray)";
15433
+ }}
15434
+ >
15435
+ <axebow-icon iconName="cloud_upload" iconColor="var(--axebow-tertiary)" size="md"></axebow-icon>
15436
+ <span
15437
+ class="text-sm ${this._internalFileName ? "text-black" : "text-[var(--axebow-gray)]"}"
15438
+ style="white-space: nowrap;"
15439
+ >
15440
+ ${this._internalFileName ? this._internalFileName : this.acceptedFormatText}
15441
+ </span>
15442
+ <input
15443
+ type="file"
15444
+ accept=".pem,.crt,.key,.cer"
15445
+ style="display: none;"
15446
+ @change=${this._handleFileUpload}
15447
+ />
15448
+ </label>
15449
+
15450
+ <div class="flex items-center gap-2">
15451
+ <axebow-button
15452
+ variant="primary"
15453
+ size="medium"
15454
+ ?disabled=${!this._hasContent}
15455
+ @click=${this._handleConfirm}
15456
+ >
15457
+ ${this.saveLabel}
15458
+ </axebow-button>
15459
+ <axebow-button variant="primary" outline size="medium" @click=${this._handleClose}
15460
+ >${this.goBackLabel}</axebow-button
15461
+ >
15462
+ </div>
15463
+ </div>
15464
+ </div>
15465
+ </axebow-dialog>
15466
+ `;
15467
+ }
15468
+ };
15469
+ __decorate([property({ type: Boolean })], AxebowPemDialog.prototype, "open", void 0);
15470
+ __decorate([property({ type: String })], AxebowPemDialog.prototype, "title", void 0);
15471
+ __decorate([property({ type: String })], AxebowPemDialog.prototype, "placeholder", void 0);
15472
+ __decorate([property({ type: String })], AxebowPemDialog.prototype, "value", void 0);
15473
+ __decorate([property({ type: String })], AxebowPemDialog.prototype, "fileName", void 0);
15474
+ __decorate([property({ type: String })], AxebowPemDialog.prototype, "noteText", void 0);
15475
+ __decorate([property({ type: String })], AxebowPemDialog.prototype, "fileContentLabel", void 0);
15476
+ __decorate([property({ type: String })], AxebowPemDialog.prototype, "downloadTooltip", void 0);
15477
+ __decorate([property({ type: String })], AxebowPemDialog.prototype, "copyLabel", void 0);
15478
+ __decorate([property({ type: String })], AxebowPemDialog.prototype, "copyTooltip", void 0);
15479
+ __decorate([property({ type: String })], AxebowPemDialog.prototype, "copiedText", void 0);
15480
+ __decorate([property({ type: String })], AxebowPemDialog.prototype, "orUploadText", void 0);
15481
+ __decorate([property({ type: String })], AxebowPemDialog.prototype, "acceptedFormatText", void 0);
15482
+ __decorate([property({ type: String })], AxebowPemDialog.prototype, "saveLabel", void 0);
15483
+ __decorate([property({ type: String })], AxebowPemDialog.prototype, "goBackLabel", void 0);
15484
+ __decorate([state()], AxebowPemDialog.prototype, "_internalValue", void 0);
15485
+ __decorate([state()], AxebowPemDialog.prototype, "_internalFileName", void 0);
15486
+ AxebowPemDialog = __decorate([customElement("axebow-pem-dialog")], AxebowPemDialog);
15487
+ //#endregion
15488
+ //#region src/components/axebow-plan-providers-modal/axebow-plan-providers-modal.ts
15489
+ var AxebowPlanProvidersModal = class AxebowPlanProvidersModal extends LitElement {
15490
+ constructor(..._args) {
15491
+ super(..._args);
15492
+ this.plansProviders = [];
15493
+ this.open = false;
15494
+ this.title = "";
15495
+ this.description = "";
15496
+ this.createPlanLabel = "";
15497
+ this.selectedPlanProvider = null;
15498
+ }
15499
+ static {
15500
+ this.styles = [unsafeCSS(tailwind_default), axebowTheme];
15501
+ }
15502
+ _handleSelect(providerName) {
15503
+ this.selectedPlanProvider = providerName;
15504
+ }
15505
+ _handleClose() {
15506
+ this.open = false;
15507
+ this.selectedPlanProvider = null;
15508
+ this.dispatchEvent(new CustomEvent("close"));
15509
+ }
15510
+ _handleConfirm() {
15511
+ if (!this.selectedPlanProvider) return;
15512
+ this.dispatchEvent(new CustomEvent("confirm", { detail: { providerName: this.selectedPlanProvider } }));
15513
+ this._handleClose();
15514
+ }
15515
+ render() {
15516
+ return html`
15517
+ <axebow-modals-confirmation
15518
+ .open=${this.open}
15519
+ severity="Neutral"
15520
+ intent="Decisional"
15521
+ popUpTittle="${this.title}"
15522
+ .showIconOnTitle=${false}
15523
+ .showForm=${true}
15524
+ .showFooter=${true}
15525
+ .showSecondaryCTA=${false}
15526
+ .showPrimaryCTA=${true}
15527
+ primaryButtonText="${this.createPlanLabel}"
15528
+ .primaryButtonDisabled=${!this.selectedPlanProvider}
15529
+ .canClose=${true}
15530
+ @axebow-close=${() => this._handleClose()}
15531
+ @axebow-confirm=${() => this._handleConfirm()}
15532
+ >
15533
+ <div slot="form" class="flex flex-col gap-4">
15534
+ <p class="m-0 text-black">${unsafeHTML(this.description)}</p>
15535
+ <div class="flex flex-col gap-3">
15536
+ ${this.plansProviders.map((provider) => html`
15537
+ <label class="flex items-center gap-2 cursor-pointer">
15538
+ <input
15539
+ type="radio"
15540
+ name="planProvider"
15541
+ value="${provider.name}"
15542
+ .checked=${this.selectedPlanProvider === provider.name}
15543
+ @change=${() => this._handleSelect(provider.name)}
15544
+ class="accent-(--axebow-tertiary) w-4 h-4"
15545
+ />
15546
+ <span class="font-semibold">${provider.name}</span>
15547
+ </label>
15548
+ `)}
15549
+ </div>
15550
+ </div>
15551
+ </axebow-modals-confirmation>
15552
+ `;
15553
+ }
15554
+ };
15555
+ __decorate([property({ type: Array })], AxebowPlanProvidersModal.prototype, "plansProviders", void 0);
15556
+ __decorate([property({
15557
+ type: Boolean,
15558
+ reflect: true
15559
+ })], AxebowPlanProvidersModal.prototype, "open", void 0);
15560
+ __decorate([property({ type: String })], AxebowPlanProvidersModal.prototype, "title", void 0);
15561
+ __decorate([property({ type: String })], AxebowPlanProvidersModal.prototype, "description", void 0);
15562
+ __decorate([property({ type: String })], AxebowPlanProvidersModal.prototype, "createPlanLabel", void 0);
15563
+ __decorate([state()], AxebowPlanProvidersModal.prototype, "selectedPlanProvider", void 0);
15564
+ AxebowPlanProvidersModal = __decorate([customElement("axebow-plan-providers-modal")], AxebowPlanProvidersModal);
15565
+ //#endregion
15566
+ //#region src/components/axebow-delete-data-popup/axebow-delete-data-popup.ts
15567
+ var AxebowDeleteDataPopup = class AxebowDeleteDataPopup extends LitElement {
15568
+ constructor(..._args) {
15569
+ super(..._args);
15570
+ this.open = false;
15571
+ this.title = "";
15572
+ this.description = "";
15573
+ this.icon = "";
15574
+ this.iconColor = "danger";
15575
+ this.validationPlaceholder = "";
15576
+ this.validationLabel = "";
15577
+ this.validationHelpText = "";
15578
+ this.buttonVariant = "danger";
15579
+ this.buttonLabel = "";
15580
+ this.canCancel = true;
15581
+ this.cancelLabel = "";
15582
+ this.typePrefixText = "";
15583
+ this.typeSuffixText = "";
15584
+ this._inputValue = "";
15585
+ }
15586
+ static {
15587
+ this.styles = [
15588
+ unsafeCSS(tailwind_default),
15589
+ axebowTheme,
15590
+ css`
15591
+ :host {
15592
+ display: block;
15593
+ }
15594
+ axebow-input {
15595
+ width: 100%;
15596
+ }
15597
+ `
15598
+ ];
15599
+ }
15600
+ _handleInput(e) {
15601
+ const target = e.target;
15602
+ this._inputValue = target?.value ?? "";
15603
+ }
15604
+ get _isDeleteEnabled() {
15605
+ if (!this.validationValue) return true;
15606
+ return this._inputValue === this.validationValue;
15607
+ }
15608
+ _handleClose() {
15609
+ this._inputValue = "";
15610
+ this.onClose?.();
15611
+ this.dispatchEvent(new CustomEvent("close", {
15612
+ bubbles: true,
15613
+ composed: true
15614
+ }));
15615
+ }
15616
+ _handleConfirm() {
15617
+ this.onDelete?.();
15618
+ this._handleClose();
15619
+ }
15620
+ get _iconColorVar() {
15621
+ switch (this.iconColor) {
15622
+ case "warning": return "var(--axebow-warning)";
15623
+ case "primary": return "var(--axebow-tertiary)";
15624
+ case "success": return "var(--axebow-success)";
15625
+ case "danger": return "var(--axebow-error)";
15626
+ default: return "var(--axebow-primary)";
15627
+ }
15628
+ }
15629
+ render() {
15630
+ const isDestructive = this.buttonVariant === "danger";
15631
+ const severity = isDestructive ? "Destructive" : "Neutral";
15632
+ const confirmIcon = this.icon || (isDestructive ? "error" : "info");
15633
+ return html`
15634
+ <axebow-modals-confirmation
15635
+ .open=${this.open}
15636
+ severity=${severity}
15637
+ intent="Decisional"
15638
+ .popUpTittle=${this.title}
15639
+ textBody=""
15640
+ iconName=${confirmIcon}
15641
+ iconColor=${this._iconColorVar}
15642
+ .showForm=${false}
15643
+ .showFooter=${true}
15644
+ .showSecondaryCTA=${this.canCancel}
15645
+ .showPrimaryCTA=${true}
15646
+ .secondaryButtonText=${this.cancelLabel}
15647
+ .primaryButtonText=${this.buttonLabel}
15648
+ .primaryButtonDisabled=${!this._isDeleteEnabled}
15649
+ .canClose=${true}
15650
+ .entityName=${this.validationValue || "item"}
15651
+ @axebow-close=${() => this._handleClose()}
15652
+ @axebow-cancel=${() => this._handleClose()}
15653
+ @axebow-confirm=${() => this._handleConfirm()}
15654
+ >
15655
+ <div slot="body" class="flex flex-col gap-4">
15656
+ <slot>
15657
+ ${this.description ? html`<p class="m-0 text-black font-normal leading-relaxed">${this.description}</p>` : ""}
15658
+ </slot>
15659
+ ${this.validationValue ? html`
15660
+ <div class="flex flex-col gap-2">
15661
+ <label class="font-semibold text-black m-0 flex items-center gap-1">
15662
+ <span class="text-[#E93A3A] font-bold">*</span>
15663
+ <p>
15664
+ ${this.typePrefixText}<span class="text-[#344966] font-bold">${this.validationValue}</span
15665
+ >${this.typeSuffixText}
15666
+ </p>
15667
+ </label>
15668
+ <axebow-input
15669
+ controlType="input"
15670
+ ?compact=${true}
15671
+ .placeholder=${this.validationPlaceholder || this.validationValue}
15672
+ .value=${this._inputValue}
15673
+ .callback=${(e) => this._handleInput(e)}
15674
+ @keydown=${(e) => {
15675
+ if (e.key === "Enter" && this._isDeleteEnabled) this._handleConfirm();
15676
+ }}
15677
+ ></axebow-input>
15678
+ </div>
15679
+ ` : ""}
15680
+ </div>
15681
+ </axebow-modals-confirmation>
15682
+ `;
15683
+ }
15684
+ };
15685
+ __decorate([property({ type: Boolean })], AxebowDeleteDataPopup.prototype, "open", void 0);
15686
+ __decorate([property({ type: String })], AxebowDeleteDataPopup.prototype, "title", void 0);
15687
+ __decorate([property({ type: String })], AxebowDeleteDataPopup.prototype, "description", void 0);
15688
+ __decorate([property({ type: String })], AxebowDeleteDataPopup.prototype, "icon", void 0);
15689
+ __decorate([property({ type: String })], AxebowDeleteDataPopup.prototype, "iconColor", void 0);
15690
+ __decorate([property({ type: String })], AxebowDeleteDataPopup.prototype, "validationValue", void 0);
15691
+ __decorate([property({ type: String })], AxebowDeleteDataPopup.prototype, "validationPlaceholder", void 0);
15692
+ __decorate([property({ type: String })], AxebowDeleteDataPopup.prototype, "validationLabel", void 0);
15693
+ __decorate([property({ type: String })], AxebowDeleteDataPopup.prototype, "validationHelpText", void 0);
15694
+ __decorate([property({ type: Function })], AxebowDeleteDataPopup.prototype, "onDelete", void 0);
15695
+ __decorate([property({ type: Function })], AxebowDeleteDataPopup.prototype, "onClose", void 0);
15696
+ __decorate([property({ type: String })], AxebowDeleteDataPopup.prototype, "buttonVariant", void 0);
15697
+ __decorate([property({ type: String })], AxebowDeleteDataPopup.prototype, "buttonLabel", void 0);
15698
+ __decorate([property({ type: Boolean })], AxebowDeleteDataPopup.prototype, "canCancel", void 0);
15699
+ __decorate([property({ type: String })], AxebowDeleteDataPopup.prototype, "cancelLabel", void 0);
15700
+ __decorate([property({ type: String })], AxebowDeleteDataPopup.prototype, "typePrefixText", void 0);
15701
+ __decorate([property({ type: String })], AxebowDeleteDataPopup.prototype, "typeSuffixText", void 0);
15702
+ __decorate([state()], AxebowDeleteDataPopup.prototype, "_inputValue", void 0);
15703
+ AxebowDeleteDataPopup = __decorate([customElement("axebow-delete-data-popup")], AxebowDeleteDataPopup);
15704
+ //#endregion
15705
+ //#region src/components/axebow-learning-center/axebow-learning-center.ts
15706
+ var AxebowLearningCenter = class AxebowLearningCenter extends LitElement {
15707
+ static {
15708
+ this.styles = [unsafeCSS(tailwind_default), css`
15709
+ sl-carousel {
15710
+ --slide-gap: 4px;
15711
+ }
15712
+ marketplace-card {
15713
+ transition: transform 0.3s ease;
15714
+ }
15715
+ .marketplace-carousel::part(base) {
15716
+ min-height: 320px;
15717
+ gap: 0 4px;
15718
+ }
15719
+
15720
+ @media (max-width: 767px) {
15721
+ sl-carousel {
15722
+ --slide-gap: 8px;
15723
+ }
15724
+ sl-card::part(body) {
15725
+ padding: 0;
15726
+ }
15727
+ }
15728
+ `];
15729
+ }
15730
+ constructor() {
15731
+ super();
15732
+ this.items = [];
15733
+ this.highlightedComponentsLabel = "";
15734
+ this.marketplaceLabel = "";
15735
+ this.expanded = false;
15736
+ this.slidesPerPage = 3.2;
15737
+ this.resizeHandler = () => {
15738
+ this.updateCarouselSettings();
15739
+ };
15740
+ }
15741
+ connectedCallback() {
15742
+ super.connectedCallback();
15743
+ this.updateCarouselSettings();
15744
+ window.addEventListener("resize", this.resizeHandler);
15745
+ }
15746
+ disconnectedCallback() {
15747
+ super.disconnectedCallback();
15748
+ window.removeEventListener("resize", this.resizeHandler);
15749
+ }
15750
+ updateCarouselSettings() {
15751
+ const width = window.innerWidth;
15752
+ let newSlidesPerPage;
15753
+ if (width >= 1536) newSlidesPerPage = 3.2;
15754
+ else if (width >= 1280) newSlidesPerPage = 2.7;
15755
+ else if (width >= 1024) newSlidesPerPage = 2.2;
15756
+ else if (width >= 768) newSlidesPerPage = 1.8;
15757
+ else if (width >= 640) newSlidesPerPage = 1.3;
15758
+ else newSlidesPerPage = 1.1;
15759
+ if (this.slidesPerPage !== newSlidesPerPage) this.slidesPerPage = newSlidesPerPage;
15760
+ }
15761
+ render() {
15762
+ return html`
15763
+ <sl-card class="w-full mb-4 rounded-sm flex flex-col gap-2">
15764
+ <div class="flex items-center gap-4 max-[46.875rem]:gap-2 p-4 ${this.expanded ? "pb-0" : ""}">
15765
+ <axebow-icon
15766
+ class="rounded-sm cursor-pointer flex-shrink-0"
15767
+ iconName="expand_all"
15768
+ iconColor="var(--axebow-tertiary)"
15769
+ @click="${() => this.expanded = !this.expanded}"
15770
+ ></axebow-icon>
15771
+ <p
15772
+ class="text-[var(--axebow-primary)] font-bold text-base sm:text-lg lg:text-xl max-[46.875rem]:text-sm leading-tight"
15773
+ >
15774
+ ${this.highlightedComponentsLabel}
15775
+ <span class="text-[var(--axebow-clickable-blue)] font-medium">@</span>
15776
+ ${this.marketplaceLabel}
15777
+ </p>
15778
+ <axebow-icon iconName="deployed_code" class="ml-auto flex-shrink-0" size="xl"></axebow-icon>
15779
+ </div>
15780
+ ${this.expanded ? html`
15781
+ <sl-carousel
15782
+ class="marketplace-carousel w-full"
15783
+ navigation
15784
+ slides-per-page="${this.slidesPerPage}"
15785
+ slides-per-move="1"
15786
+ >
15787
+ ${this.items.map((item) => html`
15788
+ <sl-carousel-item class="flex justify-center items-center px-0.5 sm:px-1">
15789
+ <marketplace-card .item=${item} class="block w-full origin-center"></marketplace-card>
15790
+ </sl-carousel-item>
15791
+ `)}
15792
+ </sl-carousel>
15793
+ ` : html``}
15794
+ </sl-card>
15795
+ `;
15796
+ }
15797
+ };
15798
+ __decorate([property({ attribute: false })], AxebowLearningCenter.prototype, "items", void 0);
15799
+ __decorate([property({ type: String })], AxebowLearningCenter.prototype, "highlightedComponentsLabel", void 0);
15800
+ __decorate([property({ type: String })], AxebowLearningCenter.prototype, "marketplaceLabel", void 0);
15801
+ __decorate([state()], AxebowLearningCenter.prototype, "expanded", void 0);
15802
+ __decorate([state()], AxebowLearningCenter.prototype, "slidesPerPage", void 0);
15803
+ AxebowLearningCenter = __decorate([customElement("axebow-learning-center")], AxebowLearningCenter);
15804
+ //#endregion
15805
+ //#region src/components/axebow-paginated-table/axebow-paginated-table.ts
15806
+ var AxebowPaginatedTable = class AxebowPaginatedTable extends LitElement {
15807
+ constructor(..._args) {
15808
+ super(..._args);
15809
+ this.data = [];
15810
+ this.rowsPerPage = 10;
15811
+ this.invoiceLabel = "";
15812
+ this.downloadLabel = "";
15813
+ this.currentPage = 1;
15814
+ }
15815
+ static {
15816
+ this.styles = css`
15817
+ table {
15818
+ width: 100%;
15819
+ border-collapse: collapse;
15820
+ margin-bottom: 20px;
15821
+ }
15822
+
15823
+ th,
15824
+ td {
15825
+ padding: 8px;
15826
+ text-align: center;
15827
+ }
15828
+
15829
+ th {
15830
+ background-color: #f4f4f4;
15831
+ }
15832
+
15833
+ .pagination {
15834
+ display: flex;
15835
+ justify-content: center;
15836
+ list-style-type: none;
15837
+ padding: 0;
15838
+ }
15839
+
15840
+ .pagination li {
15841
+ margin: 0 5px;
15842
+ }
15843
+
15844
+ .pagination button {
15845
+ padding: 8px 12px;
15846
+ border: 1px solid #ddd;
15847
+ background-color: #fff;
15848
+ cursor: pointer;
15849
+ }
15850
+
15851
+ .pagination button.active {
15852
+ background-color: #007bff;
15853
+ color: #fff;
15854
+ border-color: #007bff;
15855
+ }
15856
+
15857
+ .pagination button:hover:not(.active) {
15858
+ background-color: #ddd;
15859
+ }
15860
+ .invoice-container {
15861
+ width: 100%;
15862
+ display: flex;
15863
+ gap: 32px;
15864
+ align-items: center;
15865
+ }
15866
+ .invoice-card {
15867
+ width: 100%;
15868
+ }
15869
+ .axebow-secondary-blue {
15870
+ color: var(--axebow-tertiary);
15871
+ }
15872
+ .invoice-info-header {
15873
+ display: flex;
15874
+ flex-direction: row;
15875
+ gap: 4px;
15876
+ flex-grow: 1;
15877
+ color: var(--axebow-black);
15878
+ }
15879
+ .download-button {
15880
+ margin-left: auto;
15881
+ }
15882
+ .invoice-info {
15883
+ display: flex;
15884
+ flex-direction: column;
15885
+ gap: 8px;
15886
+ color: var(--axebow-secondary);
15887
+ }
15888
+ `;
15889
+ }
15890
+ get paginatedData() {
15891
+ const start = (this.currentPage - 1) * this.rowsPerPage;
15892
+ const end = start + this.rowsPerPage;
15893
+ return this.data.slice(start, end);
15894
+ }
15895
+ get totalPages() {
15896
+ return Math.ceil(this.data.length / this.rowsPerPage);
15897
+ }
15898
+ goToPage(page) {
15899
+ if (page >= 1 && page <= this.totalPages) {
15900
+ this.currentPage = page;
15901
+ this.requestUpdate();
15902
+ }
15903
+ }
15904
+ render() {
15905
+ return html`
15906
+ <table>
15907
+ <thead></thead>
15908
+ <tbody>
15909
+ ${this.paginatedData.map((item) => html`
15910
+ <tr>
15911
+ <sl-card class="invoice-card">
15912
+ <div class="invoice-container">
15913
+ <sl-icon-button name="gear" class="axebow-secondary-blue"></sl-icon-button>
15914
+ <div class="invoice-info">
15915
+ <div class="invoice-info-header">
15916
+ <span><span class="font-semibold">${item.customerName}</span></span>
15917
+ <span>|</span>
15918
+ <span><span class="font-semibold">CIF: ${item.customerCif}</span></span>
15919
+ <span>|</span>
15920
+ <span class="axebow-secondary-blue">${this.invoiceLabel} ${item.invoiceNumber}</span>
15921
+ <span><span class="font-semibold">(${item.invoiceAmount} €)</span></span>
15922
+ </div>
15923
+ <span>${item.invoiceDocument}</span>
15924
+ <span>${item.invoiceDate}</span>
15925
+ </div>
15926
+ <axebow-button variant="primary" outline class="download-button"
15927
+ >${this.downloadLabel}</axebow-button
15928
+ >
15929
+ </div>
15930
+ </sl-card>
15931
+ </tr>
15932
+ `)}
15933
+ </tbody>
15934
+ </table>
15935
+ <ul class="pagination">
15936
+ ${Array.from({ length: this.totalPages }, (_, i) => i + 1).map((page) => html`
15937
+ <li>
15938
+ <button class=${page === this.currentPage ? "active" : ""} @click=${() => this.goToPage(page)}>
15939
+ ${page}
15940
+ </button>
15941
+ </li>
15942
+ `)}
15943
+ </ul>
15944
+ `;
15945
+ }
15946
+ };
15947
+ __decorate([property({ type: Array })], AxebowPaginatedTable.prototype, "data", void 0);
15948
+ __decorate([property({ type: Number })], AxebowPaginatedTable.prototype, "rowsPerPage", void 0);
15949
+ __decorate([property({ type: String })], AxebowPaginatedTable.prototype, "invoiceLabel", void 0);
15950
+ __decorate([property({ type: String })], AxebowPaginatedTable.prototype, "downloadLabel", void 0);
15951
+ __decorate([state()], AxebowPaginatedTable.prototype, "currentPage", void 0);
15952
+ AxebowPaginatedTable = __decorate([customElement("axebow-paginated-table")], AxebowPaginatedTable);
15953
+ //#endregion
15954
+ //#region src/components/axebow-carousel/axebow-carousel.ts
15955
+ var AxebowCarousel = class AxebowCarousel extends LitElement {
15956
+ constructor(..._args) {
15957
+ super(..._args);
15958
+ this.data = [
15959
+ {
15960
+ title: "Slide 1",
15961
+ content: "Slide 1 content",
15962
+ logo: "logo1"
15963
+ },
15964
+ {
15965
+ title: "Slide 2",
15966
+ content: "Slide 2 content",
15967
+ logo: "logo2"
15968
+ },
15969
+ {
15970
+ title: "Slide 3",
15971
+ content: "Slide 3 content",
15972
+ logo: "logo3"
15973
+ }
15974
+ ];
15975
+ this.type = "basic";
15976
+ this.numSlides = 3;
15977
+ this.title = "";
15978
+ this.deployLabel = "";
15979
+ this.learnMoreLabel = "";
15980
+ }
15981
+ static {
15982
+ this.styles = [axebowTheme, css`
15983
+ :host {
15984
+ display: block;
15985
+ }
15986
+
15987
+ sl-carousel {
15988
+ --slide-spacing: 8px;
15989
+ --pagination-spacing: 8px;
15990
+ }
15991
+
15992
+ @media (max-width: 1200px) {
15993
+ sl-carousel {
15994
+ --slide-spacing: 6px;
15995
+ --pagination-spacing: 6px;
15996
+ }
15997
+ }
15998
+
15999
+ @media (max-width: 480px) {
16000
+ sl-carousel {
16001
+ --slide-spacing: 4px;
16002
+ --pagination-spacing: 4px;
16003
+ }
16004
+ }
16005
+ `];
16006
+ }
16007
+ render() {
16008
+ return html`
16009
+ <div>
16010
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
16011
+ <sl-carousel navigation slides-per-page="${this.numSlides}" slides-per-move="1">
16012
+ ${this.data.map((item) => html`
16013
+ <sl-carousel-item class="py-2">
16014
+ <sl-card
16015
+ class="w-full h-auto flex flex-col justify-between bg-(--axebow-white) rounded-lg overflow-hidden transition-transform hover:-translate-y-1 max-h-750 md:max-h-75 sm:max-h-56"
16016
+ >
16017
+ <div class="flex items-center mb-4">
16018
+ <img
16019
+ src="${item.logo}"
16020
+ class="max-h-12 max-w-12 mr-3 rounded"
16021
+ alt="${item.title} logo"
16022
+ />
16023
+ <div class="flex flex-col justify-between w-full">
16024
+ <h3 class="font-bold text-(--axebow-black)">${item.title}</h3>
16025
+ ${this.type === "extra" ? html` <div
16026
+ class="flex justify-between items-center text-sm text-(--axebow-secondary) mt-1 w-full"
16027
+ >
16028
+ <div class="flex items-center">
16029
+ <axebow-icon
16030
+ iconName="memory"
16031
+ iconColor="var(--axebow-secondary)"
16032
+ size="md"
16033
+ class="mr-1"
16034
+ ></axebow-icon>
16035
+ <span class="mr-2">${item.cpu || "N/A"} |</span>
16036
+ <axebow-icon
16037
+ iconName="memory_alt"
16038
+ rotate="90"
16039
+ iconColor="var(--axebow-secondary)"
16040
+ size="md"
16041
+ class="mr-1"
16042
+ ></axebow-icon>
16043
+ <span class="mr-2">${item.storage || "N/A"}</span>
16044
+ </div>
16045
+ <span
16046
+ class="bg-(--axebow-base) rounded px-2 py-0.5 text-sm text-(--axebow-secondary) border border-(--axebow-white) ml-auto"
16047
+ >${item.version || "v0.0.0"}</span
16048
+ >
16049
+ </div>` : ""}
16050
+ </div>
16051
+ </div>
16052
+
16053
+ <div
16054
+ class="text-sm text-(--axebow-secondary) mb-4 text-left min-h-12 overflow-hidden text-ellipsis line-clamp-3 grow"
16055
+ >
16056
+ ${item.content}
16057
+ </div>
16058
+ <div class="flex justify-between items-center">
16059
+ <axebow-button
16060
+ variant="text"
16061
+ class="flex items-center text-(--axebow-secondary) text-base bg-transparent border-none p-0 mt-auto"
16062
+ @click=${() => this.dispatchEvent(new CustomEvent("deploy", {
16063
+ detail: { name: item.title },
16064
+ bubbles: true,
16065
+ composed: true
16066
+ }))}
16067
+ >
16068
+ <axebow-icon
16069
+ iconName="sound_sampler"
16070
+ slot="prefix"
16071
+ iconColor="var(--axebow-tertiary)"
16072
+ size="md"
16073
+ class="mr-2 text-xl align-middle shrink-0"
16074
+ ></axebow-icon>
16075
+ ${this.deployLabel}
16076
+ </axebow-button>
16077
+ <a href="#" class="text-(--axebow-tertiary) no-underline hover:underline"
16078
+ >${this.learnMoreLabel}</a
16079
+ >
16080
+ </div>
16081
+ </sl-card>
16082
+ </sl-carousel-item>
16083
+ `)}
16084
+ </sl-carousel>
16085
+ </div>
16086
+ </div>
16087
+ `;
16088
+ }
16089
+ };
16090
+ __decorate([property({ type: Array })], AxebowCarousel.prototype, "data", void 0);
16091
+ __decorate([property({ type: String })], AxebowCarousel.prototype, "type", void 0);
16092
+ __decorate([property({ type: Number })], AxebowCarousel.prototype, "numSlides", void 0);
16093
+ __decorate([property({ type: String })], AxebowCarousel.prototype, "title", void 0);
16094
+ __decorate([property({ type: String })], AxebowCarousel.prototype, "deployLabel", void 0);
16095
+ __decorate([property({ type: String })], AxebowCarousel.prototype, "learnMoreLabel", void 0);
16096
+ AxebowCarousel = __decorate([customElement("axebow-carousel")], AxebowCarousel);
16097
+ //#endregion
16098
+ //#region src/components/wizard-page-layout/wizard-page-layout.ts
16099
+ var zoomLayoutStyles = css`
16100
+ .zoom-page-container {
16101
+ box-sizing: border-box;
16102
+ width: 100%;
16103
+ padding-inline-start: calc(max(0.938rem, (100% - 73.5rem * var(--zoom, 1)) * 0.5 - 2.5rem));
16104
+ padding-inline-end: calc(max(6rem, (100% - 73.5rem * var(--zoom, 1)) * 0.5 + 2.5rem));
16105
+ }
16106
+
16107
+ .zoom-page-container.no-sidebar {
16108
+ padding-inline-start: calc(max(6rem, (100% - 73.5rem * var(--zoom, 1)) * 0.5));
16109
+ padding-inline-end: calc(max(6rem, (100% - 73.5rem * var(--zoom, 1)) * 0.5));
16110
+ }
16111
+
16112
+ .zoom-container {
16113
+ width: 73.5rem;
16114
+ zoom: var(--zoom, 1);
16115
+ }
16116
+ `;
16117
+ var WizardPageLayout = class WizardPageLayout extends LitElement {
16118
+ constructor(..._args) {
16119
+ super(..._args);
16120
+ this.mainPage = "";
16121
+ this.secondaryPages = [];
16122
+ this.showRequiredField = true;
16123
+ this.requiredFieldLabel = "";
16124
+ this.minHeight = "100%";
16125
+ this.zoomLevel = 1;
16126
+ this.hasSummary = true;
16127
+ this.showDivider = true;
16128
+ this.gapClass = "gap-[4%] lg:gap-7.75";
16129
+ this.contentColumnClass = "lg:w-194.5";
16130
+ this.errorMessage = "";
16131
+ }
16132
+ static {
16133
+ this.styles = [
16134
+ unsafeCSS(tailwind_default),
16135
+ axebowTheme,
16136
+ zoomLayoutStyles,
16137
+ css`
16138
+ :host {
16139
+ display: block;
16140
+ width: 100%;
16141
+ }
16142
+ `
16143
+ ];
16144
+ }
16145
+ render() {
16146
+ return html`
16147
+ <div class="zoom-page-container no-sidebar" style="--zoom: ${this.zoomLevel};">
16148
+ <div class="zoom-container flex flex-col" style="min-height: ${this.minHeight};">
16149
+ ${this.hasSummary ? html`
16150
+ <div class="flex w-full ${this.gapClass} lg:flex-row flex-col-reverse relative flex-1">
16151
+ <div
16152
+ class="w-full ${this.hasSummary ? this.contentColumnClass : ""} transition-all duration-300 flex flex-col flex-1 justify-between"
16153
+ >
16154
+ <div>
16155
+ <axebow-breadcrumb-header
16156
+ ?showSecondaryPages=${this.secondaryPages.length > 0}
16157
+ .secondaryPages=${this.secondaryPages}
16158
+ mainPage=${this.mainPage}
16159
+ ?showRequiredField=${this.showRequiredField}
16160
+ requiredFieldLabel=${this.requiredFieldLabel}
16161
+ paddingBottom="1rem"
16162
+ .onHomeClick=${this.onHomeClick}
16163
+ ></axebow-breadcrumb-header>
16164
+
16165
+ ${this.showDivider ? html`<axebow-divider margin="0"></axebow-divider>` : ""}
16166
+ ${this.errorMessage ? html`
16167
+ <div
16168
+ class="flex items-center gap-2 p-3 rounded-md bg-(--axebow-error-light) text-(--axebow-error)"
16169
+ >
16170
+ <sl-icon name="exclamation-circle"></sl-icon>
16171
+ <span>${this.errorMessage}</span>
16172
+ </div>
16173
+ ` : ""}
16174
+
16175
+ <div class="flex-1">
16176
+ <slot name="content"></slot>
16177
+ </div>
16178
+ </div>
16179
+
16180
+ <slot name="footer"></slot>
16181
+ </div>
16182
+
16183
+ <div class="w-full lg:w-auto flex flex-col flex-1 h-full pt-11.75">
16184
+ <slot name="summary"></slot>
16185
+ </div>
16186
+ </div>
16187
+ ` : html`
16188
+ <div class="flex flex-col flex-1 pb-0 justify-between">
16189
+ <div>
16190
+ <axebow-breadcrumb-header
16191
+ ?showSecondaryPages=${this.secondaryPages.length > 0}
16192
+ .secondaryPages=${this.secondaryPages}
16193
+ mainPage=${this.mainPage}
16194
+ ?showRequiredField=${this.showRequiredField}
16195
+ requiredFieldLabel=${this.requiredFieldLabel}
16196
+ paddingBottom="1rem"
16197
+ .onHomeClick=${this.onHomeClick}
16198
+ ></axebow-breadcrumb-header>
16199
+
16200
+ ${this.showDivider ? html`<axebow-divider margin="0"></axebow-divider>` : ""}
16201
+ ${this.errorMessage ? html`
16202
+ <div
16203
+ class="flex items-center gap-2 p-3 rounded-md bg-(--axebow-error-light) text-(--axebow-error)"
16204
+ >
16205
+ <sl-icon name="exclamation-circle"></sl-icon>
16206
+ <span>${this.errorMessage}</span>
16207
+ </div>
16208
+ ` : ""}
16209
+
16210
+ <div class="flex-1">
16211
+ <slot name="content"></slot>
16212
+ </div>
16213
+ </div>
16214
+
16215
+ <slot name="footer"></slot>
16216
+ </div>
16217
+ `}
16218
+ </div>
16219
+
16220
+ <slot name="dialogs"></slot>
16221
+ </div>
16222
+ `;
16223
+ }
16224
+ };
16225
+ __decorate([property({ type: String })], WizardPageLayout.prototype, "mainPage", void 0);
16226
+ __decorate([property({ type: Array })], WizardPageLayout.prototype, "secondaryPages", void 0);
16227
+ __decorate([property({ type: Boolean })], WizardPageLayout.prototype, "showRequiredField", void 0);
16228
+ __decorate([property({ type: String })], WizardPageLayout.prototype, "requiredFieldLabel", void 0);
16229
+ __decorate([property({ attribute: false })], WizardPageLayout.prototype, "onHomeClick", void 0);
16230
+ __decorate([property({ type: String })], WizardPageLayout.prototype, "minHeight", void 0);
16231
+ __decorate([property({ type: Number })], WizardPageLayout.prototype, "zoomLevel", void 0);
16232
+ __decorate([property({ type: Boolean })], WizardPageLayout.prototype, "hasSummary", void 0);
16233
+ __decorate([property({ type: Boolean })], WizardPageLayout.prototype, "showDivider", void 0);
16234
+ __decorate([property({ type: String })], WizardPageLayout.prototype, "gapClass", void 0);
16235
+ __decorate([property({ type: String })], WizardPageLayout.prototype, "contentColumnClass", void 0);
16236
+ __decorate([property({ type: String })], WizardPageLayout.prototype, "errorMessage", void 0);
16237
+ WizardPageLayout = __decorate([customElement("wizard-page-layout")], WizardPageLayout);
16238
+ //#endregion
16239
+ //#region src/components/axebow-premium-plan-popup/axebow-premium-plan-popup.ts
16240
+ var AxebowPremiumPlanPopup = class AxebowPremiumPlanPopup extends LitElement {
16241
+ constructor(..._args) {
16242
+ super(..._args);
16243
+ this.open = false;
16244
+ this.price = 6;
16245
+ this.greatChoiceLabel = "";
16246
+ this.premiumPlanLabel = "";
16247
+ this.whatBestSuitsLabel = "";
16248
+ this.perVcpuMonthLabel = "";
16249
+ this.basedOnUsageLabel = "";
16250
+ this.allPremiumFeaturesLabel = "";
16251
+ this.credentialsWithLabel = "";
16252
+ this.noVcpuLimitsLabel = "";
16253
+ this.deployInLabel = "";
16254
+ this.ownEnvironmentsLabel = "";
16255
+ this.unlimitedLabel = "";
16256
+ this.privateContainersLabel = "";
16257
+ this.iaasBudgetLabel = "";
16258
+ this.featureLabel = "";
16259
+ this.draftsLabel = "";
16260
+ this.support247Label = "";
16261
+ this.withSlaLabel = "";
16262
+ this.continueLabel = "";
16263
+ this.anotherTimeLabel = "";
16264
+ }
16265
+ static {
16266
+ this.styles = css`
16267
+ sl-dialog::part(panel) {
16268
+ border-radius: 0.375rem;
16269
+ background-color: var(--axebow-success);
16270
+ height: 80vh;
16271
+ min-width: 300px;
16272
+ max-width: 90%;
16273
+ overflow: hidden;
16274
+ padding: 0 1rem;
16275
+ margin: 0;
16276
+ }
16277
+
16278
+ sl-dialog::part(header) {
16279
+ text-align: center;
16280
+ color: white;
16281
+ padding: 0.15rem 1rem;
16282
+ margin: 0;
16283
+ }
16284
+
16285
+ sl-dialog::part(body) {
16286
+ padding: 0;
16287
+ margin: 0;
16288
+ }
16289
+
16290
+ sl-dialog::part(footer) {
16291
+ display: flex;
16292
+ flex-direction: column;
16293
+ gap: 0.25rem;
16294
+ padding: 1rem;
16295
+ }
16296
+
16297
+ .plan-summary {
16298
+ width: 100%;
16299
+ height: 100%;
16300
+ margin: 0;
16301
+ padding: 0;
16302
+ }
16303
+
16304
+ .plan-summary h2 {
16305
+ font-size: 1.25rem;
16306
+ margin: 0;
16307
+ }
16308
+
16309
+ .price-container {
16310
+ display: flex;
16311
+ align-items: baseline;
16312
+ margin: 0.5rem 0;
16313
+ }
16314
+
16315
+ .price-container h1 {
16316
+ margin: 0;
16317
+ font-size: 2.5rem;
16318
+ margin-right: 0.5rem;
16319
+ }
16320
+
16321
+ .price-info h3 {
16322
+ margin: 0;
16323
+ }
16324
+
16325
+ .text-with-icon {
16326
+ display: flex;
16327
+ align-items: center;
16328
+ margin: 0.5rem 0;
16329
+ }
16330
+
16331
+ .text-with-icon p {
16332
+ margin-top: 0;
16333
+ margin-bottom: 0;
16334
+ }
16335
+
16336
+ .text-with-icon axebow-icon {
16337
+ margin-right: 0.5rem;
16338
+ }
16339
+
16340
+ .popup-button {
16341
+ width: 50%;
16342
+ }
16343
+
16344
+ .popup-buttons {
16345
+ display: flex;
16346
+ flex-direction: column;
16347
+ gap: 1rem;
16348
+ align-items: center;
16349
+ }
16350
+ `;
16351
+ }
16352
+ render() {
16353
+ return html`
16354
+ <sl-dialog
16355
+ label="${this.greatChoiceLabel}"
16356
+ ?open=${this.open}
16357
+ @sl-after-hide=${this._onDialogClosed}
16358
+ @sl-request-close=${this._onRequestClose}
16359
+ class="summary"
16360
+ >
16361
+ <sl-card class="plan-summary">
16362
+ <h2>${this.premiumPlanLabel}</h2>
16363
+ <p>${this.whatBestSuitsLabel}</p>
16364
+
16365
+ <div class="price-container">
16366
+ <h1>${this.price},00</h1>
16367
+ <div class="price-info">
16368
+ <h3>${this.perVcpuMonthLabel}</h3>
16369
+ <p>${this.basedOnUsageLabel}</p>
16370
+ </div>
16371
+ </div>
16372
+
16373
+ <div class="text-with-icon">
16374
+ <axebow-icon iconName="verified" iconColor="var(--axebow-tertiary)" size="md"></axebow-icon>
16375
+ <h3>${this.allPremiumFeaturesLabel}</h3>
16376
+ </div>
16377
+
16378
+ <div class="text-with-icon">
16379
+ <axebow-icon iconName="verified" iconColor="var(--axebow-gray)" size="md"></axebow-icon>
16380
+ <p>
16381
+ ${this.credentialsWithLabel}
16382
+ <span class="font-semibold">${this.noVcpuLimitsLabel}</span>
16383
+ </p>
16384
+ </div>
16385
+
16386
+ <div class="text-with-icon">
16387
+ <axebow-icon iconName="verified" iconColor="var(--axebow-gray)" size="md"></axebow-icon>
16388
+ <p>
16389
+ ${this.deployInLabel}
16390
+ <span class="font-semibold">${this.ownEnvironmentsLabel}</span>.
16391
+ </p>
16392
+ </div>
16393
+
16394
+ <div class="text-with-icon">
16395
+ <axebow-icon iconName="verified" iconColor="var(--axebow-gray)" size="md"></axebow-icon>
16396
+ <p>
16397
+ <span class="font-semibold">${this.unlimitedLabel}</span> ${this.privateContainersLabel}
16398
+ </p>
16399
+ </div>
16400
+
16401
+ <div class="text-with-icon">
16402
+ <axebow-icon iconName="verified" iconColor="var(--axebow-gray)" size="md"></axebow-icon>
16403
+ <p><span class="font-semibold">${this.iaasBudgetLabel}</span> ${this.featureLabel}</p>
16404
+ </div>
16405
+
16406
+ <div class="text-with-icon">
16407
+ <axebow-icon iconName="verified" iconColor="var(--axebow-gray)" size="md"></axebow-icon>
16408
+ <p><span class="font-semibold">${this.unlimitedLabel}</span> ${this.draftsLabel}</p>
16409
+ </div>
16410
+
16411
+ <div class="text-with-icon">
16412
+ <axebow-icon iconName="verified" iconColor="var(--axebow-gray)" size="md"></axebow-icon>
16413
+ <p><span class="font-semibold">${this.support247Label}</span> ${this.withSlaLabel}</p>
16414
+ </div>
16415
+ <div class="popup-buttons">
16416
+ <axebow-button class="popup-button" variant="primary" @click=${this._closeDialog}>
16417
+ ${this.continueLabel}
16418
+ </axebow-button>
16419
+ <axebow-button class="popup-button" variant="default" @click=${this._closeDialog}>
16420
+ ${this.anotherTimeLabel}
16421
+ </axebow-button>
16422
+ </div>
16423
+ </sl-card>
16424
+ </sl-dialog>
16425
+ `;
16426
+ }
16427
+ _onRequestClose() {
16428
+ this._closeDialog();
16429
+ }
16430
+ _closeDialog() {
16431
+ this.open = false;
16432
+ this.dispatchEvent(new CustomEvent("dialog-closed", {
16433
+ detail: { open: this.open },
16434
+ bubbles: true,
16435
+ composed: true
16436
+ }));
16437
+ }
16438
+ _onDialogClosed() {}
16439
+ };
16440
+ __decorate([property({
16441
+ type: Boolean,
16442
+ reflect: true
16443
+ })], AxebowPremiumPlanPopup.prototype, "open", void 0);
16444
+ __decorate([property({ type: Number })], AxebowPremiumPlanPopup.prototype, "price", void 0);
16445
+ __decorate([property({ type: String })], AxebowPremiumPlanPopup.prototype, "greatChoiceLabel", void 0);
16446
+ __decorate([property({ type: String })], AxebowPremiumPlanPopup.prototype, "premiumPlanLabel", void 0);
16447
+ __decorate([property({ type: String })], AxebowPremiumPlanPopup.prototype, "whatBestSuitsLabel", void 0);
16448
+ __decorate([property({ type: String })], AxebowPremiumPlanPopup.prototype, "perVcpuMonthLabel", void 0);
16449
+ __decorate([property({ type: String })], AxebowPremiumPlanPopup.prototype, "basedOnUsageLabel", void 0);
16450
+ __decorate([property({ type: String })], AxebowPremiumPlanPopup.prototype, "allPremiumFeaturesLabel", void 0);
16451
+ __decorate([property({ type: String })], AxebowPremiumPlanPopup.prototype, "credentialsWithLabel", void 0);
16452
+ __decorate([property({ type: String })], AxebowPremiumPlanPopup.prototype, "noVcpuLimitsLabel", void 0);
16453
+ __decorate([property({ type: String })], AxebowPremiumPlanPopup.prototype, "deployInLabel", void 0);
16454
+ __decorate([property({ type: String })], AxebowPremiumPlanPopup.prototype, "ownEnvironmentsLabel", void 0);
16455
+ __decorate([property({ type: String })], AxebowPremiumPlanPopup.prototype, "unlimitedLabel", void 0);
16456
+ __decorate([property({ type: String })], AxebowPremiumPlanPopup.prototype, "privateContainersLabel", void 0);
16457
+ __decorate([property({ type: String })], AxebowPremiumPlanPopup.prototype, "iaasBudgetLabel", void 0);
16458
+ __decorate([property({ type: String })], AxebowPremiumPlanPopup.prototype, "featureLabel", void 0);
16459
+ __decorate([property({ type: String })], AxebowPremiumPlanPopup.prototype, "draftsLabel", void 0);
16460
+ __decorate([property({ type: String })], AxebowPremiumPlanPopup.prototype, "support247Label", void 0);
16461
+ __decorate([property({ type: String })], AxebowPremiumPlanPopup.prototype, "withSlaLabel", void 0);
16462
+ __decorate([property({ type: String })], AxebowPremiumPlanPopup.prototype, "continueLabel", void 0);
16463
+ __decorate([property({ type: String })], AxebowPremiumPlanPopup.prototype, "anotherTimeLabel", void 0);
16464
+ AxebowPremiumPlanPopup = __decorate([customElement("axebow-premium-plan-popup")], AxebowPremiumPlanPopup);
16465
+ //#endregion
16466
+ //#region src/components/usage-chart/usage-chart.ts
16467
+ var COLOR_PALETTE = [
16468
+ {
16469
+ borderColor: "#4F46E5",
16470
+ backgroundColor: "rgba(79, 70, 229, 0.1)"
16471
+ },
16472
+ {
16473
+ borderColor: "#F97316",
16474
+ backgroundColor: "rgba(249, 115, 22, 0.1)"
16475
+ },
16476
+ {
16477
+ borderColor: "#10B981",
16478
+ backgroundColor: "rgba(16, 185, 129, 0.1)"
16479
+ },
16480
+ {
16481
+ borderColor: "#8B5CF6",
16482
+ backgroundColor: "rgba(139, 92, 246, 0.1)"
16483
+ },
16484
+ {
16485
+ borderColor: "#EF4444",
16486
+ backgroundColor: "rgba(239, 68, 68, 0.1)"
16487
+ }
16488
+ ];
16489
+ function generateHslColor(index) {
16490
+ const hue = index * 137.508 % 360;
16491
+ const saturation = 70 + index % 3 * 10;
16492
+ const lightness = 45 + index % 2 * 10;
16493
+ return {
16494
+ borderColor: `hsl(${hue}, ${saturation}%, ${lightness}%)`,
16495
+ backgroundColor: `hsla(${hue}, ${saturation}%, ${lightness}%, 0.1)`
16496
+ };
16497
+ }
16498
+ function getColorForDataset(index) {
16499
+ return index < COLOR_PALETTE.length ? COLOR_PALETTE[index] : generateHslColor(index);
16500
+ }
16501
+ function buildDatasets(data, detailChart) {
16502
+ return Object.entries(data).map(([key, dataArray], index) => {
16503
+ const colors = getColorForDataset(index);
16504
+ return {
16505
+ label: key,
16506
+ data: dataArray,
16507
+ borderColor: colors.borderColor,
16508
+ backgroundColor: colors.backgroundColor,
16509
+ fill: true,
16510
+ tension: .3,
16511
+ borderWidth: 2,
16512
+ pointRadius: detailChart ? 3 : 0,
16513
+ pointHoverRadius: detailChart ? 6 : 0,
16514
+ pointBackgroundColor: colors.borderColor,
16515
+ pointBorderColor: "#ffffff",
16516
+ pointBorderWidth: 2
16517
+ };
16518
+ });
16519
+ }
16520
+ function computeYMax(data, detailChart, yAxisMax) {
16521
+ if (yAxisMax !== null && yAxisMax > 0) return detailChart ? yAxisMax * 1.15 : yAxisMax;
16522
+ const allValues = Object.values(data).flat();
16523
+ const maxDataValue = Math.max(...allValues, 0);
16524
+ return detailChart ? void 0 : maxDataValue * 3;
16525
+ }
16526
+ function formatBandwidth(value) {
16527
+ if (value === 0) return "0 bps";
16528
+ if (value < 1e3) return `${value.toFixed(2)} bps`;
16529
+ if (value < 1e6) return `${(value / 1e3).toFixed(2)} Kbps`;
16530
+ if (value < 1e9) return `${(value / 1e6).toFixed(2)} Mbps`;
16531
+ return `${(value / 1e9).toFixed(2)} Gbps`;
16532
+ }
16533
+ function formatMemory(value) {
16534
+ if (value === 0) return "0 MB";
16535
+ if (value < 1024) return `${value.toFixed(2)} MB`;
16536
+ return `${(value / 1024).toFixed(2)} GB`;
16537
+ }
16538
+ function formatCpu(value) {
16539
+ if (value === 0) return "0";
16540
+ if (value < 1e-4) return value.toExponential(2);
16541
+ if (value < .01) return value.toFixed(6);
16542
+ if (value < 1) return value.toFixed(4);
16543
+ return value.toFixed(2);
16544
+ }
16545
+ function formatByChartId(value, chartId) {
16546
+ if (chartId.includes("RX") || chartId.includes("TX")) return formatBandwidth(value);
16547
+ if (chartId.includes("Memory")) return formatMemory(value);
16548
+ if (chartId.includes("CPU")) return formatCpu(value);
16549
+ return value.toString();
16550
+ }
16551
+ function formatByLabel(value, label, chartId) {
16552
+ const lowerLabel = label?.toLowerCase();
16553
+ if (lowerLabel?.includes("cpu")) return formatCpu(value);
16554
+ if (lowerLabel?.includes("memory")) return formatMemory(value);
16555
+ if (lowerLabel?.includes("bandwidth") || chartId.includes("RX") || chartId.includes("TX")) return formatBandwidth(value);
16556
+ return `${value}`;
16557
+ }
16558
+ function buildChartOptions(detailChart, chartId, yMax) {
16559
+ return {
16560
+ responsive: true,
16561
+ maintainAspectRatio: false,
16562
+ animation: false,
16563
+ animations: {
16564
+ colors: false,
16565
+ x: false
16566
+ },
16567
+ transitions: { active: { animation: { duration: 0 } } },
16568
+ interaction: {
16569
+ intersect: false,
16570
+ mode: "index"
16571
+ },
16572
+ plugins: {
16573
+ legend: {
16574
+ display: detailChart,
16575
+ position: "bottom",
16576
+ labels: {
16577
+ usePointStyle: true,
16578
+ padding: 15,
16579
+ font: { size: 12 }
16580
+ }
16581
+ },
16582
+ tooltip: {
16583
+ enabled: detailChart,
16584
+ backgroundColor: "rgba(0, 0, 0, 0.8)",
16585
+ titleColor: "#ffffff",
16586
+ bodyColor: "#ffffff",
16587
+ borderColor: "#374151",
16588
+ borderWidth: 1,
16589
+ cornerRadius: 8,
16590
+ displayColors: true,
16591
+ callbacks: { label: (context) => {
16592
+ const value = context.parsed.y ?? 0;
16593
+ const label = context.dataset.label;
16594
+ return `${label}: ${formatByLabel(value, label, chartId)}`;
16595
+ } }
16596
+ }
16597
+ },
16598
+ scales: {
16599
+ x: {
16600
+ display: detailChart,
16601
+ grid: {
16602
+ display: detailChart,
16603
+ color: "rgba(0, 0, 0, 0.1)"
16604
+ },
16605
+ ticks: {
16606
+ maxTicksLimit: 8,
16607
+ font: { size: 11 },
16608
+ color: "#6B7280"
16609
+ }
16610
+ },
16611
+ y: {
16612
+ display: detailChart,
16613
+ beginAtZero: true,
16614
+ max: yMax,
16615
+ suggestedMax: yMax,
16616
+ grid: {
16617
+ display: detailChart,
16618
+ color: "rgba(0, 0, 0, 0.1)"
16619
+ },
16620
+ ticks: {
16621
+ maxTicksLimit: 5,
16622
+ font: { size: 11 },
16623
+ color: "#6B7280",
16624
+ callback: (value) => formatByChartId(Number(value), chartId)
16625
+ }
16626
+ }
16627
+ }
16628
+ };
16629
+ }
16630
+ var UsageChart = class UsageChart extends LitElement {
16631
+ constructor(..._args) {
16632
+ super(..._args);
16633
+ this.chartType = "line";
16634
+ this.labels = [];
16635
+ this.data = {};
16636
+ this.chartId = "";
16637
+ this.detailChart = false;
16638
+ this.isFullScreen = false;
16639
+ this.yAxisMax = null;
16640
+ }
16641
+ get _resolvedHeight() {
16642
+ if (this.isFullScreen) return "90%";
16643
+ if (this.detailChart) return "12rem";
16644
+ return this.height ?? "4rem";
16645
+ }
16646
+ render() {
16647
+ const datasets = buildDatasets(this.data, this.detailChart);
16648
+ const yMax = computeYMax(this.data, this.detailChart, this.yAxisMax);
16649
+ const options = buildChartOptions(this.detailChart, this.chartId, yMax);
16650
+ return html`
16651
+ <table-chart
16652
+ chartType=${this.chartType}
16653
+ chartId=${this.chartId}
16654
+ .chartLabels=${this.labels}
16655
+ .chartDatasets=${datasets}
16656
+ .chartOptions=${options}
16657
+ height=${this._resolvedHeight}
16658
+ ></table-chart>
16659
+ `;
16660
+ }
16661
+ };
16662
+ __decorate([property({ type: String })], UsageChart.prototype, "chartType", void 0);
16663
+ __decorate([property({ type: Array })], UsageChart.prototype, "labels", void 0);
16664
+ __decorate([property({ type: Object })], UsageChart.prototype, "data", void 0);
16665
+ __decorate([property({ type: String })], UsageChart.prototype, "chartId", void 0);
16666
+ __decorate([property({ type: Boolean })], UsageChart.prototype, "detailChart", void 0);
16667
+ __decorate([property({ type: Boolean })], UsageChart.prototype, "isFullScreen", void 0);
16668
+ __decorate([property({ type: Number })], UsageChart.prototype, "yAxisMax", void 0);
16669
+ __decorate([property({ type: String })], UsageChart.prototype, "height", void 0);
16670
+ UsageChart = __decorate([customElement("usage-chart")], UsageChart);
16671
+ //#endregion
16672
+ //#region src/components/axebow-white-container/axebow-white-container.ts
16673
+ var AxebowWhiteContainer = class AxebowWhiteContainer extends LitElement {
16674
+ constructor(..._args) {
16675
+ super(..._args);
16676
+ this.padding = "p-8";
16677
+ this.extraClasses = "";
16678
+ this.fullWidth = false;
16679
+ }
16680
+ static {
16681
+ this.styles = [unsafeCSS(tailwind_default), css`
16682
+ :host {
16683
+ display: block;
16684
+ }
16685
+ `];
16686
+ }
16687
+ render() {
16688
+ const widthClass = this.fullWidth ? "w-full" : "";
16689
+ return html`
16690
+ <div class="rounded-lg bg-white ${this.padding} shadow-sm ${widthClass} ${this.extraClasses}">
16691
+ <slot></slot>
16692
+ </div>
16693
+ `;
16694
+ }
16695
+ };
16696
+ __decorate([property({ type: String })], AxebowWhiteContainer.prototype, "padding", void 0);
16697
+ __decorate([property({ type: String })], AxebowWhiteContainer.prototype, "extraClasses", void 0);
16698
+ __decorate([property({ type: Boolean })], AxebowWhiteContainer.prototype, "fullWidth", void 0);
16699
+ AxebowWhiteContainer = __decorate([customElement("axebow-white-container")], AxebowWhiteContainer);
16700
+ //#endregion
16701
+ export { AxebowActionsFooter, AxebowAdjustmentResourcesCounter, AxebowAlert, AxebowBadge, AxebowBanner, AxebowBaseCard, AxebowBorderContainer, AxebowBoxSection, AxebowBoxedInput, AxebowBreadcrumbHeader, AxebowButton, AxebowCallToActionFeature, AxebowCallToActionRow, AxebowCardActionBanner, AxebowCardAttentionBanner, AxebowCardCloudLogo, AxebowCardFilter, AxebowCardFilterItem, AxebowCardFooter, AxebowCardHeader, AxebowCardResourceRow, AxebowCardResourceTable, AxebowCardSpecialLink, AxebowCardStatItem, AxebowCardStatsRow, AxebowCardStatus, AxebowCardTableHeader, AxebowCardVersionSelector, AxebowCarousel, AxebowCarouselInput, AxebowCarouselSelectorItem, AxebowCarouselSelectorTenant, AxebowChannelConfigPanel, AxebowCheckboxInput, AxebowCollaboratorsDialog, AxebowCopyBox, AxebowCopyIcon, AxebowCtaDialog, AxebowDeleteDataPopup, AxebowDeployCard, AxebowDeploySummary, AxebowDialog, AxebowDivider, AxebowDragDropUploadFile, AxebowDraggableService, AxebowEmptyState, AxebowExpandableCard, AxebowExpandableHeader, AxebowFilterBar, AxebowFooter, AxebowFormPanelField, AxebowGettingStartedCard, AxebowGraph, AxebowHeader, AxebowHelpBubble, AxebowHyperlinkSwitch, AxebowIcon, AxebowInfrastructureCard, AxebowInput, AxebowInputBase, AxebowInstancesTable, AxebowLearningCenter, AxebowLimitsCounter, AxebowManageHyperlinks, AxebowMarketplaceCard, AxebowMobileWarningBanner, AxebowModal, AxebowModalsConfirmation, AxebowMoreActions, AxebowNumberCard, AxebowNumbersSection, AxebowNumericInput, AxebowObservabilityContainer, AxebowPageActions, AxebowPaginatedTable, AxebowPemDialog, AxebowPill, AxebowPlanProvidersModal, AxebowPlanSelectField, AxebowPremiumPlanPopup, AxebowProgressBar, AxebowPromotionDropdown, AxebowProvidersInput, AxebowQuickTipButton, AxebowQuickTipSection, AxebowRefreshPeriodPanel, AxebowRegistrySelector, AxebowResourceBar, AxebowResourceBoxForm, AxebowResourceCard, AxebowResourceLimitInput, AxebowResourceLimitsPanel, AxebowResourcesCounter, AxebowRoleCard, AxebowRoleContainerDropdown, AxebowRoleTooltip, AxebowRuntimeZipDialog, AxebowSearch, AxebowSearchBarFilters, AxebowSelectInput, AxebowSelectInputWithDivider, AxebowSelectorCard, AxebowSelectorSlider, AxebowServiceDetailHeader, AxebowServicesPanel, AxebowSidebar, AxebowStatus, AxebowStepHeader, AxebowSummaryCard, AxebowSummaryFlavors, AxebowSummaryKeyValue, AxebowSummaryLimits, AxebowSummaryStep, AxebowSummaryStepHeader, AxebowSwitch, AxebowSwitchInput, AxebowTabSelector, AxebowTabsSubmenu, AxebowTagsInput, AxebowTenantCard, AxebowTenantResourceTable, AxebowTenantsTable, AxebowTextInput, AxebowTimeRangePanel, AxebowTooltip, AxebowUl, AxebowUndeployCard, AxebowUnderlineTabSelector, AxebowUsageTooltip, AxebowWhiteContainer, CRITICALITY_STYLES, CustomHomePageBody, DEFAULT_ADD_DIALOG_LABELS, DEFAULT_LOW_NOTE_TEXT, DeployModalComponent, DeployModalFooter, DeployModalHeader, DeployPageBody, STATUS_COLORS, TableChart, UsageChart, WizardPageLayout, axebowTheme, buildAddButton, buildCtaButtons, buildExternalNodeContent, buildMainNodeContent, createElement, createIcon, getCtaBadgeLabel, getCtaDescription, getCtaHeading, getHighestCriticality, groupCallToActionNotifications };
14218
16702
 
14219
16703
  //# sourceMappingURL=index.js.map