@kumori/aurora-wui-components 0.0.285-dev4269.9 → 0.0.285-dev4280

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 (69) hide show
  1. package/dist/components/axebow-button/axebow-button.d.ts.map +1 -1
  2. package/dist/components/axebow-call-to-action-feature/axebow-call-to-action-feature.d.ts +1 -9
  3. package/dist/components/axebow-call-to-action-feature/axebow-call-to-action-feature.d.ts.map +1 -1
  4. package/dist/components/axebow-call-to-action-row/axebow-call-to-action-row.d.ts +0 -1
  5. package/dist/components/axebow-call-to-action-row/axebow-call-to-action-row.d.ts.map +1 -1
  6. package/dist/components/axebow-cta-dialog/axebow-cta-dialog.d.ts +1 -2
  7. package/dist/components/axebow-cta-dialog/axebow-cta-dialog.d.ts.map +1 -1
  8. package/dist/components/axebow-header/axebow-header.d.ts +3 -0
  9. package/dist/components/axebow-header/axebow-header.d.ts.map +1 -1
  10. package/dist/components/axebow-header/parts/axebow-header-actions.d.ts +4 -0
  11. package/dist/components/axebow-header/parts/axebow-header-actions.d.ts.map +1 -1
  12. package/dist/components/axebow-modal/axebow-modal.d.ts +0 -3
  13. package/dist/components/axebow-modal/axebow-modal.d.ts.map +1 -1
  14. package/dist/components/axebow-tenant-card/axebow-tenant-card.d.ts +0 -5
  15. package/dist/components/axebow-tenant-card/axebow-tenant-card.d.ts.map +1 -1
  16. package/dist/components/axebow-tenant-resource-table/axebow-tenant-resource-table.d.ts +0 -4
  17. package/dist/components/axebow-tenant-resource-table/axebow-tenant-resource-table.d.ts.map +1 -1
  18. package/dist/components/cards/axebow-base-card.d.ts +0 -6
  19. package/dist/components/cards/axebow-base-card.d.ts.map +1 -1
  20. package/dist/components/cards/card.models.d.ts +0 -3
  21. package/dist/components/cards/card.models.d.ts.map +1 -1
  22. package/dist/components/cards/parts/axebow-card-footer.d.ts +0 -3
  23. package/dist/components/cards/parts/axebow-card-footer.d.ts.map +1 -1
  24. package/dist/components/cards/parts/axebow-card-stat-item.d.ts +0 -5
  25. package/dist/components/cards/parts/axebow-card-stat-item.d.ts.map +1 -1
  26. package/dist/components/cards/parts/axebow-card-stats-row.d.ts +1 -1
  27. package/dist/components/cards/parts/axebow-card-stats-row.d.ts.map +1 -1
  28. package/dist/components/cards/parts/axebow-card-status.d.ts +0 -5
  29. package/dist/components/cards/parts/axebow-card-status.d.ts.map +1 -1
  30. package/dist/index.d.ts +0 -17
  31. package/dist/index.d.ts.map +1 -1
  32. package/dist/index.js +243 -2655
  33. package/dist/index.js.map +1 -1
  34. package/dist/playground/schemas/axebow-call-to-action-feature.schema.d.ts.map +1 -1
  35. package/package.json +2 -2
  36. package/dist/components/axebow-border-container/axebow-border-container.d.ts +0 -11
  37. package/dist/components/axebow-border-container/axebow-border-container.d.ts.map +0 -1
  38. package/dist/components/axebow-boxed-input/axebow-boxed-input.d.ts +0 -31
  39. package/dist/components/axebow-boxed-input/axebow-boxed-input.d.ts.map +0 -1
  40. package/dist/components/axebow-call-to-action-row/call-to-action-notification.d.ts +0 -44
  41. package/dist/components/axebow-call-to-action-row/call-to-action-notification.d.ts.map +0 -1
  42. package/dist/components/axebow-carousel/axebow-carousel.d.ts +0 -25
  43. package/dist/components/axebow-carousel/axebow-carousel.d.ts.map +0 -1
  44. package/dist/components/axebow-copy-icon/axebow-copy-icon.d.ts +0 -20
  45. package/dist/components/axebow-copy-icon/axebow-copy-icon.d.ts.map +0 -1
  46. package/dist/components/axebow-delete-data-popup/axebow-delete-data-popup.d.ts +0 -35
  47. package/dist/components/axebow-delete-data-popup/axebow-delete-data-popup.d.ts.map +0 -1
  48. package/dist/components/axebow-learning-center/axebow-learning-center.d.ts +0 -17
  49. package/dist/components/axebow-learning-center/axebow-learning-center.d.ts.map +0 -1
  50. package/dist/components/axebow-mobile-warning-banner/axebow-mobile-warning-banner.d.ts +0 -11
  51. package/dist/components/axebow-mobile-warning-banner/axebow-mobile-warning-banner.d.ts.map +0 -1
  52. package/dist/components/axebow-page-actions/axebow-page-actions.d.ts +0 -20
  53. package/dist/components/axebow-page-actions/axebow-page-actions.d.ts.map +0 -1
  54. package/dist/components/axebow-paginated-table/axebow-paginated-table.d.ts +0 -22
  55. package/dist/components/axebow-paginated-table/axebow-paginated-table.d.ts.map +0 -1
  56. package/dist/components/axebow-pem-dialog/axebow-pem-dialog.d.ts +0 -29
  57. package/dist/components/axebow-pem-dialog/axebow-pem-dialog.d.ts.map +0 -1
  58. package/dist/components/axebow-plan-providers-modal/axebow-plan-providers-modal.d.ts +0 -16
  59. package/dist/components/axebow-plan-providers-modal/axebow-plan-providers-modal.d.ts.map +0 -1
  60. package/dist/components/axebow-premium-plan-popup/axebow-premium-plan-popup.d.ts +0 -30
  61. package/dist/components/axebow-premium-plan-popup/axebow-premium-plan-popup.d.ts.map +0 -1
  62. package/dist/components/axebow-ul/axebow-ul.d.ts +0 -8
  63. package/dist/components/axebow-ul/axebow-ul.d.ts.map +0 -1
  64. package/dist/components/axebow-white-container/axebow-white-container.d.ts +0 -9
  65. package/dist/components/axebow-white-container/axebow-white-container.d.ts.map +0 -1
  66. package/dist/components/usage-chart/usage-chart.d.ts +0 -15
  67. package/dist/components/usage-chart/usage-chart.d.ts.map +0 -1
  68. package/dist/components/wizard-page-layout/wizard-page-layout.d.ts +0 -22
  69. package/dist/components/wizard-page-layout/wizard-page-layout.d.ts.map +0 -1
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 --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-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 .-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 .right-\\[calc\\(100\\%\\+10px\\)\\] {\n right: calc(100% + 10px);\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-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-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-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-112 {\n height: calc(var(--spacing) * 112);\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-10 {\n max-height: calc(var(--spacing) * 10);\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-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-10 {\n min-height: calc(var(--spacing) * 10);\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-19 {\n min-height: calc(var(--spacing) * 19);\n }\n\n .min-h-35 {\n min-height: calc(var(--spacing) * 35);\n }\n\n .min-h-102\\.5 {\n min-height: calc(var(--spacing) * 102.5);\n }\n\n .min-h-107\\.5 {\n min-height: calc(var(--spacing) * 107.5);\n }\n\n .min-h-113\\.25 {\n min-height: calc(var(--spacing) * 113.25);\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\\.25 {\n width: calc(var(--spacing) * 15.25);\n }\n\n .w-16 {\n width: calc(var(--spacing) * 16);\n }\n\n .w-16\\.5 {\n width: calc(var(--spacing) * 16.5);\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-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-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\\.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-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-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-88\\.5 {\n width: calc(var(--spacing) * 88.5);\n }\n\n .w-91 {\n width: calc(var(--spacing) * 91);\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\\.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-\\[calc\\(100\\%-10px\\)\\] {\n width: calc(100% - 10px);\n }\n\n .w-auto {\n width: auto;\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-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-x-1 {\n --tw-translate-x: var(--spacing);\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 .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-\\[auto_auto_1fr_auto\\] {\n grid-template-columns: 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-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-secondary\\) {\n border-color: var(--axebow-secondary);\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-\\[\\#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-\\[\\#006BFF\\] {\n background-color: #006bff;\n }\n\n .bg-\\[\\#C7DCFA\\] {\n background-color: #c7dcfa;\n }\n\n .bg-\\[\\#F0F1F5\\] {\n background-color: #f0f1f5;\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-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\\.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-tertiary\\) {\n color: var(--axebow-tertiary);\n }\n\n .text-\\(--axebow-text-gray\\) {\n color: var(--axebow-text-gray);\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 .\\[font\\:inherit\\] {\n font: inherit;\n }\n\n @media (hover: hover) {\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\\:text-gray-700:hover {\n color: var(--color-gray-700);\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 .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\\: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";
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 --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-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 .-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 .right-\\[calc\\(100\\%\\+10px\\)\\] {\n right: calc(100% + 10px);\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-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-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-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-112 {\n height: calc(var(--spacing) * 112);\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-10 {\n max-height: calc(var(--spacing) * 10);\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-\\[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-10 {\n min-height: calc(var(--spacing) * 10);\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-19 {\n min-height: calc(var(--spacing) * 19);\n }\n\n .min-h-35 {\n min-height: calc(var(--spacing) * 35);\n }\n\n .min-h-102\\.5 {\n min-height: calc(var(--spacing) * 102.5);\n }\n\n .min-h-107\\.5 {\n min-height: calc(var(--spacing) * 107.5);\n }\n\n .min-h-113\\.25 {\n min-height: calc(var(--spacing) * 113.25);\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\\.25 {\n width: calc(var(--spacing) * 15.25);\n }\n\n .w-16 {\n width: calc(var(--spacing) * 16);\n }\n\n .w-16\\.5 {\n width: calc(var(--spacing) * 16.5);\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-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-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\\.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-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-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-88\\.5 {\n width: calc(var(--spacing) * 88.5);\n }\n\n .w-91 {\n width: calc(var(--spacing) * 91);\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\\.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-\\[calc\\(100\\%-10px\\)\\] {\n width: calc(100% - 10px);\n }\n\n .w-auto {\n width: auto;\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-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-x-1 {\n --tw-translate-x: var(--spacing);\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 .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-\\[auto_auto_1fr_auto\\] {\n grid-template-columns: 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-secondary\\) {\n border-color: var(--axebow-secondary);\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-\\[\\#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-\\[\\#006BFF\\] {\n background-color: #006bff;\n }\n\n .bg-\\[\\#C7DCFA\\] {\n background-color: #c7dcfa;\n }\n\n .bg-\\[\\#F0F1F5\\] {\n background-color: #f0f1f5;\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-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\\.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-tertiary\\) {\n color: var(--axebow-tertiary);\n }\n\n .text-\\(--axebow-text-gray\\) {\n color: var(--axebow-text-gray);\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 .\\[font\\:inherit\\] {\n font: inherit;\n }\n\n @media (hover: hover) {\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\\:text-gray-700:hover {\n color: var(--color-gray-700);\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 .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";
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.stopImmediatePropagation();
597
+ event.stopPropagation();
598
598
  }
599
599
  };
600
600
  this.addEventListener("click", this._guardDisabledClick, { capture: true });
@@ -861,7 +861,7 @@ __decorate([property({
861
861
  })], AxebowButton.prototype, "circle", void 0);
862
862
  __decorate([property({
863
863
  type: Boolean,
864
- reflect: true
864
+ attribute: false
865
865
  })], AxebowButton.prototype, "disabled", void 0);
866
866
  __decorate([property({
867
867
  type: Boolean,
@@ -1459,9 +1459,12 @@ var AxebowHeaderActions = class AxebowHeaderActions extends LitElement {
1459
1459
  this.onLogout = () => {};
1460
1460
  this.notificationsLabel = "";
1461
1461
  this.notifications = [];
1462
+ this.actionNeededNotifications = [];
1462
1463
  this.myNotificationsTabLabel = "";
1464
+ this.actionNeededTabLabel = "";
1463
1465
  this.noNotificationsLabel = "";
1464
1466
  this.noUnreadNotificationsLabel = "";
1467
+ this.noActionNotificationsLabel = "";
1465
1468
  this.showUnreadOnlyLabel = "";
1466
1469
  this.onLabel = "";
1467
1470
  this.offLabel = "";
@@ -1516,9 +1519,10 @@ var AxebowHeaderActions = class AxebowHeaderActions extends LitElement {
1516
1519
  </div>
1517
1520
  <sl-tab-group class="bg-white rounded-md w-120 text-base">
1518
1521
  <sl-tab slot="nav" panel="my_notifications">${this.myNotificationsTabLabel}</sl-tab>
1522
+ <sl-tab slot="nav" panel="action_needed">${this.actionNeededTabLabel}</sl-tab>
1519
1523
 
1520
1524
  <sl-tab-panel class="bg-gray-100" name="my_notifications">
1521
- <div class="flex flex-col gap-2 px-4 pb-4 max-h-[40vh] overflow-auto w-full">
1525
+ <div class="flex flex-col gap-2 px-4 max-h-[40vh] overflow-auto w-full">
1522
1526
  ${this.notifications.length === 0 ? this.renderEmptyState(this.noNotificationsLabel) : html`
1523
1527
  <div class="flex flex-col text-black gap-4">
1524
1528
  <div class="flex justify-between items-center flex-wrap gap-4">
@@ -1541,6 +1545,15 @@ var AxebowHeaderActions = class AxebowHeaderActions extends LitElement {
1541
1545
  `}
1542
1546
  </div>
1543
1547
  </sl-tab-panel>
1548
+ <sl-tab-panel class="bg-gray-100" name="action_needed">
1549
+ <div class="flex flex-col gap-2 px-4 max-h-[40vh] overflow-auto w-full">
1550
+ ${this.actionNeededNotifications.length === 0 ? this.renderEmptyState(this.noActionNotificationsLabel) : html`
1551
+ <div class="flex flex-col text-black gap-4">
1552
+ ${this.actionNeededNotifications.map((item) => this.renderNotificationCard(item))}
1553
+ </div>
1554
+ `}
1555
+ </div>
1556
+ </sl-tab-panel>
1544
1557
  </sl-tab-group>
1545
1558
  </sl-dropdown>
1546
1559
  <sl-dropdown class="shrink-0">
@@ -1624,9 +1637,12 @@ __decorate([property({ type: String })], AxebowHeaderActions.prototype, "logoutL
1624
1637
  __decorate([property({ attribute: false })], AxebowHeaderActions.prototype, "onLogout", void 0);
1625
1638
  __decorate([property({ type: String })], AxebowHeaderActions.prototype, "notificationsLabel", void 0);
1626
1639
  __decorate([property({ type: Array })], AxebowHeaderActions.prototype, "notifications", void 0);
1640
+ __decorate([property({ type: Array })], AxebowHeaderActions.prototype, "actionNeededNotifications", void 0);
1627
1641
  __decorate([property({ type: String })], AxebowHeaderActions.prototype, "myNotificationsTabLabel", void 0);
1642
+ __decorate([property({ type: String })], AxebowHeaderActions.prototype, "actionNeededTabLabel", void 0);
1628
1643
  __decorate([property({ type: String })], AxebowHeaderActions.prototype, "noNotificationsLabel", void 0);
1629
1644
  __decorate([property({ type: String })], AxebowHeaderActions.prototype, "noUnreadNotificationsLabel", void 0);
1645
+ __decorate([property({ type: String })], AxebowHeaderActions.prototype, "noActionNotificationsLabel", void 0);
1630
1646
  __decorate([property({ type: String })], AxebowHeaderActions.prototype, "showUnreadOnlyLabel", void 0);
1631
1647
  __decorate([property({ type: String })], AxebowHeaderActions.prototype, "onLabel", void 0);
1632
1648
  __decorate([property({ type: String })], AxebowHeaderActions.prototype, "offLabel", void 0);
@@ -1651,9 +1667,12 @@ var AxebowHeader = class AxebowHeader extends LitElement {
1651
1667
  this.onLogout = () => {};
1652
1668
  this.notificationsLabel = "";
1653
1669
  this.notifications = [];
1670
+ this.actionNeededNotifications = [];
1654
1671
  this.myNotificationsTabLabel = "";
1672
+ this.actionNeededTabLabel = "";
1655
1673
  this.noNotificationsLabel = "";
1656
1674
  this.noUnreadNotificationsLabel = "";
1675
+ this.noActionNotificationsLabel = "";
1657
1676
  this.showUnreadOnlyLabel = "";
1658
1677
  this.onLabel = "";
1659
1678
  this.offLabel = "";
@@ -1694,9 +1713,12 @@ var AxebowHeader = class AxebowHeader extends LitElement {
1694
1713
  .onLogout=${this.onLogout}
1695
1714
  .notificationsLabel=${this.notificationsLabel}
1696
1715
  .notifications=${this.notifications}
1716
+ .actionNeededNotifications=${this.actionNeededNotifications}
1697
1717
  .myNotificationsTabLabel=${this.myNotificationsTabLabel}
1718
+ .actionNeededTabLabel=${this.actionNeededTabLabel}
1698
1719
  .noNotificationsLabel=${this.noNotificationsLabel}
1699
1720
  .noUnreadNotificationsLabel=${this.noUnreadNotificationsLabel}
1721
+ .noActionNotificationsLabel=${this.noActionNotificationsLabel}
1700
1722
  .showUnreadOnlyLabel=${this.showUnreadOnlyLabel}
1701
1723
  .onLabel=${this.onLabel}
1702
1724
  .offLabel=${this.offLabel}
@@ -1723,9 +1745,12 @@ __decorate([property({ type: String })], AxebowHeader.prototype, "logoutLabel",
1723
1745
  __decorate([property({ attribute: false })], AxebowHeader.prototype, "onLogout", void 0);
1724
1746
  __decorate([property({ type: String })], AxebowHeader.prototype, "notificationsLabel", void 0);
1725
1747
  __decorate([property({ type: Array })], AxebowHeader.prototype, "notifications", void 0);
1748
+ __decorate([property({ type: Array })], AxebowHeader.prototype, "actionNeededNotifications", void 0);
1726
1749
  __decorate([property({ type: String })], AxebowHeader.prototype, "myNotificationsTabLabel", void 0);
1750
+ __decorate([property({ type: String })], AxebowHeader.prototype, "actionNeededTabLabel", void 0);
1727
1751
  __decorate([property({ type: String })], AxebowHeader.prototype, "noNotificationsLabel", void 0);
1728
1752
  __decorate([property({ type: String })], AxebowHeader.prototype, "noUnreadNotificationsLabel", void 0);
1753
+ __decorate([property({ type: String })], AxebowHeader.prototype, "noActionNotificationsLabel", void 0);
1729
1754
  __decorate([property({ type: String })], AxebowHeader.prototype, "showUnreadOnlyLabel", void 0);
1730
1755
  __decorate([property({ type: String })], AxebowHeader.prototype, "onLabel", void 0);
1731
1756
  __decorate([property({ type: String })], AxebowHeader.prototype, "offLabel", void 0);
@@ -5688,35 +5713,6 @@ __decorate([property({ type: String })], AxebowMoreActions.prototype, "fixedHeig
5688
5713
  __decorate([state()], AxebowMoreActions.prototype, "_fixedPos", void 0);
5689
5714
  AxebowMoreActions = __decorate([customElement("axebow-more-actions")], AxebowMoreActions);
5690
5715
  //#endregion
5691
- //#region src/components/axebow-badge/axebow-badge.ts
5692
- var AxebowBadge = class AxebowBadge extends LitElement {
5693
- constructor(..._args) {
5694
- super(..._args);
5695
- this.bgColor = "var(--axebow-base)";
5696
- this.textColor = "var(--axebow-secondary)";
5697
- }
5698
- static {
5699
- this.styles = [unsafeCSS(tailwind_default), css`
5700
- :host {
5701
- display: inline-block;
5702
- }
5703
- `];
5704
- }
5705
- render() {
5706
- return html`
5707
- <div
5708
- 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"
5709
- style="background-color: ${this.bgColor}; color: ${this.textColor}; border-color: ${this.textColor};"
5710
- >
5711
- <slot></slot>
5712
- </div>
5713
- `;
5714
- }
5715
- };
5716
- __decorate([property({ type: String })], AxebowBadge.prototype, "bgColor", void 0);
5717
- __decorate([property({ type: String })], AxebowBadge.prototype, "textColor", void 0);
5718
- AxebowBadge = __decorate([customElement("axebow-badge")], AxebowBadge);
5719
- //#endregion
5720
5716
  //#region src/components/cards/parts/axebow-card-cloud-logo.ts
5721
5717
  var AxebowCardCloudLogo = class AxebowCardCloudLogo extends LitElement {
5722
5718
  constructor(..._args) {
@@ -6077,32 +6073,14 @@ var AxebowCardStatItem = class AxebowCardStatItem extends LitElement {
6077
6073
  this.title = "";
6078
6074
  this.label = "";
6079
6075
  this.active = true;
6080
- this.ctaCount = 0;
6081
- this.ctaIconName = "info";
6082
- this.ctaIconColor = "var(--axebow-error)";
6083
- this.tall = false;
6084
6076
  }
6085
6077
  static {
6086
6078
  this.styles = [unsafeCSS(tailwind_default), css`:host { display: block; }`];
6087
6079
  }
6088
6080
  render() {
6089
6081
  return html`
6090
- <div class="flex flex-col items-start justify-center text-left w-23.5 ${this.tall ? "h-17.75" : "h-11.5"}">
6091
- <div class="flex items-center gap-1">
6092
- <h4 class="text-[18px] leading-none text-(--axebow-primary) font-bold m-0 whitespace-nowrap">${this.value}</h4>
6093
- ${this.ctaCount > 0 ? html`
6094
- <span
6095
- class="flex items-center gap-0.5 cursor-pointer"
6096
- style="color: ${this.ctaIconColor};"
6097
- @click=${this._onCtaClick}
6098
- >
6099
- <div class="w-5 h-5 shrink-0 flex items-center justify-center">
6100
- <axebow-icon iconName=${this.ctaIconName} iconColor=${this.ctaIconColor} size="md"></axebow-icon>
6101
- </div>
6102
- <span class="text-base font-semibold leading-none whitespace-nowrap">${this.ctaCount}</span>
6103
- </span>
6104
- ` : ""}
6105
- </div>
6082
+ <div class="flex flex-col items-center justify-center text-center w-30">
6083
+ <h4 class="text-[18px] leading-none text-(--axebow-primary) font-bold m-0 whitespace-nowrap">${this.value}</h4>
6106
6084
  <p class="mt-2 text-base leading-none m-0 whitespace-nowrap">${this.title}</p>
6107
6085
  <div class="mt-1.75 h-3.5 leading-none">
6108
6086
  ${this.label ? html`
@@ -6121,21 +6099,11 @@ var AxebowCardStatItem = class AxebowCardStatItem extends LitElement {
6121
6099
  composed: true
6122
6100
  }));
6123
6101
  }
6124
- _onCtaClick() {
6125
- this.dispatchEvent(new CustomEvent("cta-click", {
6126
- bubbles: true,
6127
- composed: true
6128
- }));
6129
- }
6130
6102
  };
6131
6103
  __decorate([property({ type: Number })], AxebowCardStatItem.prototype, "value", void 0);
6132
6104
  __decorate([property({ type: String })], AxebowCardStatItem.prototype, "title", void 0);
6133
6105
  __decorate([property({ type: String })], AxebowCardStatItem.prototype, "label", void 0);
6134
6106
  __decorate([property({ type: Boolean })], AxebowCardStatItem.prototype, "active", void 0);
6135
- __decorate([property({ type: Number })], AxebowCardStatItem.prototype, "ctaCount", void 0);
6136
- __decorate([property({ type: String })], AxebowCardStatItem.prototype, "ctaIconName", void 0);
6137
- __decorate([property({ type: String })], AxebowCardStatItem.prototype, "ctaIconColor", void 0);
6138
- __decorate([property({ type: Boolean })], AxebowCardStatItem.prototype, "tall", void 0);
6139
6107
  AxebowCardStatItem = __decorate([customElement("axebow-card-stat-item")], AxebowCardStatItem);
6140
6108
  //#endregion
6141
6109
  //#region src/components/cards/parts/axebow-card-stats-row.ts
@@ -6148,29 +6116,21 @@ var AxebowCardStatsRow = class AxebowCardStatsRow extends LitElement {
6148
6116
  static {
6149
6117
  this.styles = [unsafeCSS(tailwind_default), css`:host { display: block; }`];
6150
6118
  }
6119
+ _hasButtons() {
6120
+ return this.cardType === "account" || this.cardType === "environment" || this.cardType === "tenant";
6121
+ }
6151
6122
  render() {
6152
- const isEnvironment = this.cardType === "environment";
6153
- const firstGap = isEnvironment ? "mr-6" : "mr-4";
6154
- const secondGap = isEnvironment ? "mr-7" : "mr-10";
6155
6123
  return html`
6156
- <div class="flex flex-row items-center mx-2 box-border">
6157
- ${this.stats.map((stat, index) => {
6158
- return html`
6124
+ <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">
6125
+ ${this.stats.map((stat, index) => html`
6159
6126
  <axebow-card-stat-item
6160
- class=${index === 0 && this.stats.length > 1 ? firstGap : index === 1 && this.stats.length > 2 ? secondGap : ""}
6161
- .tall=${index === 0}
6162
6127
  .value=${stat.value}
6163
6128
  .title=${stat.title}
6164
6129
  .label=${stat.label}
6165
6130
  .active=${stat.active !== false}
6166
- .ctaCount=${stat.ctaCount ?? 0}
6167
- .ctaIconName=${stat.ctaIconName ?? "info"}
6168
- .ctaIconColor=${stat.ctaIconColor ?? "var(--axebow-error)"}
6169
6131
  @label-click=${() => this._handleLabelClick(index)}
6170
- @cta-click=${() => this._handleCtaClick(index)}
6171
6132
  ></axebow-card-stat-item>
6172
- `;
6173
- })}
6133
+ `)}
6174
6134
  </div>
6175
6135
  `;
6176
6136
  }
@@ -6181,13 +6141,6 @@ var AxebowCardStatsRow = class AxebowCardStatsRow extends LitElement {
6181
6141
  composed: true
6182
6142
  }));
6183
6143
  }
6184
- _handleCtaClick(index) {
6185
- this.dispatchEvent(new CustomEvent("stat-cta-click", {
6186
- detail: { index },
6187
- bubbles: true,
6188
- composed: true
6189
- }));
6190
- }
6191
6144
  };
6192
6145
  __decorate([property({ type: Array })], AxebowCardStatsRow.prototype, "stats", void 0);
6193
6146
  __decorate([property({ type: String })], AxebowCardStatsRow.prototype, "cardType", void 0);
@@ -6589,9 +6542,6 @@ var AxebowCardStatus = class AxebowCardStatus extends LitElement {
6589
6542
  this.statusMessage = "";
6590
6543
  this.borderColor = "";
6591
6544
  this.showSpinner = false;
6592
- this.ctaText = "";
6593
- this.ctaIconName = "info";
6594
- this.ctaIconColor = "var(--axebow-error)";
6595
6545
  }
6596
6546
  static {
6597
6547
  this.styles = [unsafeCSS(tailwind_default), css`
@@ -6601,21 +6551,6 @@ var AxebowCardStatus = class AxebowCardStatus extends LitElement {
6601
6551
  `];
6602
6552
  }
6603
6553
  render() {
6604
- if (this.ctaText) return html`
6605
- <div
6606
- class="flex items-center gap-1 min-w-0 w-full text-base whitespace-nowrap cursor-pointer"
6607
- style="color: ${this.ctaIconColor};"
6608
- role="button"
6609
- tabindex="0"
6610
- @click=${this._onCtaClick}
6611
- @keydown=${this._onCtaKeydown}
6612
- >
6613
- <div class="w-5 h-5 shrink-0 flex items-center justify-center">
6614
- <axebow-icon iconName=${this.ctaIconName} iconColor=${this.ctaIconColor} size="md"></axebow-icon>
6615
- </div>
6616
- <p class="m-0 truncate">${this.ctaText}</p>
6617
- </div>
6618
- `;
6619
6554
  if (!this.statusCode) return html`<div class="w-full whitespace-nowrap overflow-hidden text-ellipsis"><slot></slot></div>`;
6620
6555
  return html`
6621
6556
  <div class="flex items-center gap-1 min-w-0 w-full">
@@ -6627,26 +6562,11 @@ var AxebowCardStatus = class AxebowCardStatus extends LitElement {
6627
6562
  </div>
6628
6563
  `;
6629
6564
  }
6630
- _onCtaClick() {
6631
- this.dispatchEvent(new CustomEvent("cta-click", {
6632
- bubbles: true,
6633
- composed: true
6634
- }));
6635
- }
6636
- _onCtaKeydown(e) {
6637
- if (e.key === "Enter" || e.key === " ") {
6638
- e.preventDefault();
6639
- this._onCtaClick();
6640
- }
6641
- }
6642
6565
  };
6643
6566
  __decorate([property({ type: String })], AxebowCardStatus.prototype, "statusCode", void 0);
6644
6567
  __decorate([property({ type: String })], AxebowCardStatus.prototype, "statusMessage", void 0);
6645
6568
  __decorate([property({ type: String })], AxebowCardStatus.prototype, "borderColor", void 0);
6646
6569
  __decorate([property({ type: Boolean })], AxebowCardStatus.prototype, "showSpinner", void 0);
6647
- __decorate([property({ type: String })], AxebowCardStatus.prototype, "ctaText", void 0);
6648
- __decorate([property({ type: String })], AxebowCardStatus.prototype, "ctaIconName", void 0);
6649
- __decorate([property({ type: String })], AxebowCardStatus.prototype, "ctaIconColor", void 0);
6650
6570
  AxebowCardStatus = __decorate([customElement("axebow-card-status")], AxebowCardStatus);
6651
6571
  //#endregion
6652
6572
  //#region src/components/cards/parts/axebow-card-footer.ts
@@ -6664,9 +6584,6 @@ var AxebowCardFooter = class AxebowCardFooter extends LitElement {
6664
6584
  this.closeLabel = "Close";
6665
6585
  this.moreActionsLabel = "More";
6666
6586
  this.actionLabel = "";
6667
- this.ctaText = "";
6668
- this.ctaIconName = "info";
6669
- this.ctaIconColor = "var(--axebow-error)";
6670
6587
  }
6671
6588
  static {
6672
6589
  this.styles = [unsafeCSS(tailwind_default), css`:host { display: block; }`];
@@ -6681,9 +6598,6 @@ var AxebowCardFooter = class AxebowCardFooter extends LitElement {
6681
6598
  .statusMessage=${this.statusMessage}
6682
6599
  .borderColor=${this.borderColor}
6683
6600
  .showSpinner=${this.showSpinner}
6684
- .ctaText=${this.ctaText}
6685
- .ctaIconName=${this.ctaIconName}
6686
- .ctaIconColor=${this.ctaIconColor}
6687
6601
  >
6688
6602
  <slot></slot>
6689
6603
  </axebow-card-status>
@@ -6736,9 +6650,6 @@ __decorate([property({ type: Array })], AxebowCardFooter.prototype, "moreActions
6736
6650
  __decorate([property({ type: String })], AxebowCardFooter.prototype, "closeLabel", void 0);
6737
6651
  __decorate([property({ type: String })], AxebowCardFooter.prototype, "moreActionsLabel", void 0);
6738
6652
  __decorate([property({ type: String })], AxebowCardFooter.prototype, "actionLabel", void 0);
6739
- __decorate([property({ type: String })], AxebowCardFooter.prototype, "ctaText", void 0);
6740
- __decorate([property({ type: String })], AxebowCardFooter.prototype, "ctaIconName", void 0);
6741
- __decorate([property({ type: String })], AxebowCardFooter.prototype, "ctaIconColor", void 0);
6742
6653
  AxebowCardFooter = __decorate([customElement("axebow-card-footer")], AxebowCardFooter);
6743
6654
  //#endregion
6744
6655
  //#region src/components/cards/axebow-base-card.ts
@@ -6779,12 +6690,6 @@ var AxebowBaseCard = class AxebowBaseCard extends LitElement {
6779
6690
  this.statusCode = "";
6780
6691
  this.statusMessage = "";
6781
6692
  this.serviceDetailLabel = "Service detail";
6782
- this.ctaText = "";
6783
- this.ctaIconName = "info";
6784
- this.ctaIconColor = "var(--axebow-error)";
6785
- this.ctaBadgeLabel = "";
6786
- this.ctaBadgeBgColor = "var(--axebow-base)";
6787
- this.ctaBadgeTextColor = "var(--axebow-secondary)";
6788
6693
  this.showActionBanner = false;
6789
6694
  this.showWarningBanner = false;
6790
6695
  this.manageLabel = "Manage";
@@ -6873,9 +6778,9 @@ var AxebowBaseCard = class AxebowBaseCard extends LitElement {
6873
6778
 
6874
6779
  <div class="w-full flex flex-col gap-2">
6875
6780
  ${isRuntime ? html`
6876
- <div class="flex flex-row justify-between items-center min-h-10 max-h-10 overflow-hidden px-2 py-[0.71875rem]">
6781
+ <div class="flex flex-row justify-between items-center min-h-10 max-h-10 overflow-hidden">
6877
6782
  <span class="deploy-time text-(--axebow-secondary)"><slot name="time-elapsed"></slot></span>
6878
- ${this.ctaBadgeLabel ? html`<axebow-badge bgColor=${this.ctaBadgeBgColor} textColor=${this.ctaBadgeTextColor}>${this.ctaBadgeLabel}</axebow-badge>` : this.isDeployed ? html`<span class="text-(--axebow-secondary) border-2 border-(--axebow-secondary) rounded-md py-0.5 px-1.5 whitespace-nowrap text-xs">${this.deployedLabel}</span>` : ""}
6783
+ ${this.isDeployed ? html`<span class="text-(--axebow-secondary) border-2 border-(--axebow-secondary) rounded-md py-0.5 px-1.5 whitespace-nowrap text-xs">${this.deployedLabel}</span>` : ""}
6879
6784
  </div>
6880
6785
  ` : html`
6881
6786
  <axebow-card-stats-row
@@ -6885,11 +6790,6 @@ var AxebowBaseCard = class AxebowBaseCard extends LitElement {
6885
6790
  detail: e.detail,
6886
6791
  bubbles: true,
6887
6792
  composed: true
6888
- }))}
6889
- @stat-cta-click=${(e) => !this.isDeleting && this.dispatchEvent(new CustomEvent("stat-cta-click", {
6890
- detail: e.detail,
6891
- bubbles: true,
6892
- composed: true
6893
6793
  }))}
6894
6794
  ></axebow-card-stats-row>
6895
6795
  `}
@@ -6985,9 +6885,6 @@ var AxebowBaseCard = class AxebowBaseCard extends LitElement {
6985
6885
  .closeLabel=${this.closeLabel}
6986
6886
  .moreActionsLabel=${this.moreActionsLabel}
6987
6887
  .actionLabel=${isRuntime ? this.serviceDetailLabel : ""}
6988
- .ctaText=${this.ctaText}
6989
- .ctaIconName=${this.ctaIconName}
6990
- .ctaIconColor=${this.ctaIconColor}
6991
6888
  @more-actions-toggled=${(e) => this.dispatchEvent(new CustomEvent("more-actions-toggled", {
6992
6889
  detail: e.detail,
6993
6890
  bubbles: true,
@@ -7040,12 +6937,6 @@ __decorate([property({ type: String })], AxebowBaseCard.prototype, "borderColor"
7040
6937
  __decorate([property({ type: String })], AxebowBaseCard.prototype, "statusCode", void 0);
7041
6938
  __decorate([property({ type: String })], AxebowBaseCard.prototype, "statusMessage", void 0);
7042
6939
  __decorate([property({ type: String })], AxebowBaseCard.prototype, "serviceDetailLabel", void 0);
7043
- __decorate([property({ type: String })], AxebowBaseCard.prototype, "ctaText", void 0);
7044
- __decorate([property({ type: String })], AxebowBaseCard.prototype, "ctaIconName", void 0);
7045
- __decorate([property({ type: String })], AxebowBaseCard.prototype, "ctaIconColor", void 0);
7046
- __decorate([property({ type: String })], AxebowBaseCard.prototype, "ctaBadgeLabel", void 0);
7047
- __decorate([property({ type: String })], AxebowBaseCard.prototype, "ctaBadgeBgColor", void 0);
7048
- __decorate([property({ type: String })], AxebowBaseCard.prototype, "ctaBadgeTextColor", void 0);
7049
6940
  __decorate([property({ type: Boolean })], AxebowBaseCard.prototype, "showActionBanner", void 0);
7050
6941
  __decorate([property({ type: Boolean })], AxebowBaseCard.prototype, "showWarningBanner", void 0);
7051
6942
  __decorate([property({ type: String })], AxebowBaseCard.prototype, "manageLabel", void 0);
@@ -8600,18 +8491,9 @@ var AxebowTenantResourceTable = class AxebowTenantResourceTable extends LitEleme
8600
8491
  }
8601
8492
  _toggle(id) {
8602
8493
  const next = new Set(this._expanded);
8603
- const willExpand = !next.has(id);
8604
- if (willExpand) next.add(id);
8605
- else next.delete(id);
8494
+ if (next.has(id)) next.delete(id);
8495
+ else next.add(id);
8606
8496
  this._expanded = next;
8607
- this.dispatchEvent(new CustomEvent("row-toggle", {
8608
- detail: {
8609
- id,
8610
- expanded: willExpand
8611
- },
8612
- bubbles: true,
8613
- composed: true
8614
- }));
8615
8497
  }
8616
8498
  get _activeLabels() {
8617
8499
  const title = this.labels?.rowTitle ?? this.labels?.accountsEnv ?? DEFAULT_LABELS.rowTitle;
@@ -8685,21 +8567,13 @@ var AxebowTenantResourceTable = class AxebowTenantResourceTable extends LitEleme
8685
8567
  }
8686
8568
  _renderStatusIcon(icon) {
8687
8569
  if (!icon) return "";
8688
- const content = html`
8689
- <div
8690
- class="flex items-center gap-1 shrink-0 cursor-pointer"
8691
- @click=${icon.onClick ? (e) => {
8692
- e.stopPropagation();
8693
- icon.onClick();
8694
- } : null}
8695
- >
8696
- <div class="w-5 h-5 shrink-0 flex items-center justify-center">
8697
- ${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>`}
8698
- </div>
8699
- ${icon.label ? html`<span class="text-sm font-semibold" style="color: ${icon.iconColor};">: ${icon.label}</span>` : ""}
8700
- </div>
8701
- `;
8702
- return icon.tooltip ? html`<axebow-tooltip content=${icon.tooltip}>${content}</axebow-tooltip>` : content;
8570
+ const iconEl = icon.spinner ? html`<sl-spinner style="font-size: 0.85rem; --indicator-color: var(--axebow-tertiary);"></sl-spinner>` : html`<axebow-icon
8571
+ iconName=${icon.iconName}
8572
+ iconColor=${icon.iconColor}
8573
+ size="md"
8574
+ class="cursor-pointer shrink-0"
8575
+ ></axebow-icon>`;
8576
+ return icon.tooltip ? html`<axebow-tooltip content=${icon.tooltip}>${iconEl}</axebow-tooltip>` : iconEl;
8703
8577
  }
8704
8578
  _renderTableRow(row, index) {
8705
8579
  const children = row.subRows ?? row.environments;
@@ -8726,7 +8600,6 @@ var AxebowTenantResourceTable = class AxebowTenantResourceTable extends LitEleme
8726
8600
  ` : ""}
8727
8601
  ${row.logoUrl ? html`<img src=${row.logoUrl} alt="logo" class="w-5 h-5 object-contain shrink-0" />` : ""}
8728
8602
  <span class="truncate">${row.name}</span>
8729
- ${this._renderStatusIcon(row.ctaIcon)}
8730
8603
  ${this._renderStatusIcon(row.statusIcon)}
8731
8604
  <span class="flex-1"></span>
8732
8605
  ${this._renderStatusIcon(row.warningIcon)}
@@ -8784,7 +8657,6 @@ var AxebowTenantResourceTable = class AxebowTenantResourceTable extends LitEleme
8784
8657
  ></axebow-icon>
8785
8658
  ${subRow.logoUrl ? html`<img src=${subRow.logoUrl} class="w-5 h-5 object-contain shrink-0" />` : ""}
8786
8659
  <span class="font-normal text-gray-700 truncate">${subRow.name}</span>
8787
- ${this._renderStatusIcon(subRow.ctaIcon)}
8788
8660
  <span class="flex-1"></span>
8789
8661
  ${this._renderStatusIcon(subRow.warningIcon)}
8790
8662
  </div>
@@ -8807,10 +8679,7 @@ var AxebowTenantResourceTable = class AxebowTenantResourceTable extends LitEleme
8807
8679
  fixedWidth="9.9375rem"
8808
8680
  fixedHeight="2rem"
8809
8681
  ?disabled=${actionBtnDisabled}
8810
- @click=${() => {
8811
- if (actionBtnDisabled) return;
8812
- onActionBtn?.();
8813
- }}
8682
+ @click=${() => onActionBtn?.()}
8814
8683
  >
8815
8684
  ${actionBtnLabel}
8816
8685
  </axebow-button>` : ""}
@@ -9161,116 +9030,6 @@ __decorate([property({ type: String })], AxebowServiceDetailHeader.prototype, "a
9161
9030
  __decorate([property({ type: String })], AxebowServiceDetailHeader.prototype, "deployLabel", void 0);
9162
9031
  AxebowServiceDetailHeader = __decorate([customElement("axebow-service-detail-header")], AxebowServiceDetailHeader);
9163
9032
  //#endregion
9164
- //#region src/components/axebow-call-to-action-row/axebow-call-to-action-row.ts
9165
- var CRITICALITY_STYLES = {
9166
- critical: {
9167
- bg: "var(--axebow-critical-bg)",
9168
- color: "var(--axebow-error)",
9169
- iconName: "error"
9170
- },
9171
- high: {
9172
- bg: "var(--axebow-high-bg)",
9173
- color: "var(--axebow-dark-yellow)",
9174
- iconName: "warning"
9175
- },
9176
- low: {
9177
- bg: "var(--axebow-base)",
9178
- color: "var(--axebow-secondary)",
9179
- iconName: "info"
9180
- }
9181
- };
9182
- var AxebowCallToActionRow = class AxebowCallToActionRow extends LitElement {
9183
- constructor(..._args) {
9184
- super(..._args);
9185
- this.criticality = "low";
9186
- this.heading = "";
9187
- this.badgeLabel = "";
9188
- this.description = "";
9189
- this.buttons = [];
9190
- this.lowNoteText = "";
9191
- this.count = 1;
9192
- }
9193
- static {
9194
- this.styles = [
9195
- unsafeCSS(tailwind_default),
9196
- axebowTheme,
9197
- css`
9198
- :host {
9199
- display: block;
9200
- width: 100%;
9201
- }
9202
- `
9203
- ];
9204
- }
9205
- render() {
9206
- const { bg, color, iconName } = CRITICALITY_STYLES[this.criticality] ?? CRITICALITY_STYLES.low;
9207
- return html`
9208
- <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">
9209
- <div class="w-10 h-10 rounded-md shrink-0 flex items-center justify-center" style="background-color: ${bg};">
9210
- <div class="w-6 h-6 flex items-center justify-center">
9211
- <axebow-icon iconName=${iconName} iconColor=${color} size="2xl"></axebow-icon>
9212
- </div>
9213
- </div>
9214
-
9215
- <div class="flex-1 min-w-0 flex flex-col gap-1">
9216
- <div class="w-full flex flex-row items-center gap-2">
9217
- <span class="text-base font-semibold truncate">${this.heading}</span>
9218
- ${this.badgeLabel ? html`<axebow-badge bgColor=${bg} textColor=${color}>${this.badgeLabel}</axebow-badge>` : ""}
9219
- ${this.count > 1 ? html`<div
9220
- class="w-5 h-5 shrink-0 rounded-full flex items-center justify-center text-sm font-semibold"
9221
- style="background-color: ${bg}; color: ${color};"
9222
- >
9223
- ${this.count}
9224
- </div>` : ""}
9225
- </div>
9226
- <div class="w-full text-(--axebow-gray)">${this.description}</div>
9227
- </div>
9228
-
9229
- ${this.criticality === "low" ? this._renderLowNote() : this._renderButtons()}
9230
- </div>
9231
- `;
9232
- }
9233
- _renderLowNote() {
9234
- return html`
9235
- <div
9236
- class="w-91 h-11 shrink-0 box-border rounded-md py-1 px-3 flex items-center text-(--axebow-gray)"
9237
- style="background-color: var(--axebow-base);"
9238
- >
9239
- ${this.lowNoteText}
9240
- </div>
9241
- `;
9242
- }
9243
- _renderButtons() {
9244
- if (!this.buttons.length) return "";
9245
- return html`
9246
- <div class="flex flex-row items-center gap-4 shrink-0">
9247
- ${this.buttons.map((button) => html`
9248
- <axebow-button
9249
- variant=${button.variant ?? "primary"}
9250
- ?outline=${button.outline ?? false}
9251
- @click=${() => button.onClick?.()}
9252
- >
9253
- ${button.label}
9254
- ${button.iconName ? html`<axebow-icon
9255
- slot="suffix"
9256
- iconName=${button.iconName}
9257
- iconColor=${button.iconColor ?? "currentColor"}
9258
- ></axebow-icon>` : ""}
9259
- </axebow-button>
9260
- `)}
9261
- </div>
9262
- `;
9263
- }
9264
- };
9265
- __decorate([property({ type: String })], AxebowCallToActionRow.prototype, "criticality", void 0);
9266
- __decorate([property({ type: String })], AxebowCallToActionRow.prototype, "heading", void 0);
9267
- __decorate([property({ type: String })], AxebowCallToActionRow.prototype, "badgeLabel", void 0);
9268
- __decorate([property({ type: String })], AxebowCallToActionRow.prototype, "description", void 0);
9269
- __decorate([property({ type: Array })], AxebowCallToActionRow.prototype, "buttons", void 0);
9270
- __decorate([property({ type: String })], AxebowCallToActionRow.prototype, "lowNoteText", void 0);
9271
- __decorate([property({ type: Number })], AxebowCallToActionRow.prototype, "count", void 0);
9272
- AxebowCallToActionRow = __decorate([customElement("axebow-call-to-action-row")], AxebowCallToActionRow);
9273
- //#endregion
9274
9033
  //#region src/components/axebow-tenant-card/axebow-tenant-card.ts
9275
9034
  var AxebowTenantCard = class AxebowTenantCard extends LitElement {
9276
9035
  constructor(..._args) {
@@ -9293,9 +9052,6 @@ var AxebowTenantCard = class AxebowTenantCard extends LitElement {
9293
9052
  this.invitedNoticeText = "";
9294
9053
  this.showNoAccountsWarning = false;
9295
9054
  this.noAccountsWarningText = "";
9296
- this.showCallToActionIssues = false;
9297
- this.callToActionIssuesText = "";
9298
- this.callToActionCriticality = "low";
9299
9055
  this.contentState = "table";
9300
9056
  this.invitationText = "";
9301
9057
  this.emptyTextPrefix = "";
@@ -9426,23 +9182,10 @@ var AxebowTenantCard = class AxebowTenantCard extends LitElement {
9426
9182
  </span>
9427
9183
  `)}
9428
9184
  </div>
9429
- ${this.showInvitedNotice ? html`<span class="text-base text-black">${this.invitedNoticeText}</span>` : this.showCallToActionIssues ? html`<span
9430
- class="flex items-center gap-1 text-base cursor-pointer"
9431
- style="color: ${CRITICALITY_STYLES[this.callToActionCriticality].color};"
9432
- @click=${() => this.onCallToActionClick?.()}
9433
- >
9434
- <div class="w-5 h-5 shrink-0 flex items-center justify-center">
9435
- <axebow-icon
9436
- iconName=${CRITICALITY_STYLES[this.callToActionCriticality].iconName}
9437
- iconColor=${CRITICALITY_STYLES[this.callToActionCriticality].color}
9438
- size="md"
9439
- ></axebow-icon>
9440
- </div>
9441
- ${this.callToActionIssuesText}
9442
- </span>` : this.showNoAccountsWarning ? html`<span class="flex items-center gap-1 text-base text-black">
9443
- <axebow-icon iconName="warning" iconColor="var(--axebow-warning)" size="md"></axebow-icon>
9444
- ${this.noAccountsWarningText}
9445
- </span>` : ""}
9185
+ ${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">
9186
+ <axebow-icon iconName="warning" iconColor="var(--axebow-warning)" size="md"></axebow-icon>
9187
+ ${this.noAccountsWarningText}
9188
+ </span>` : ""}
9446
9189
  </div>
9447
9190
 
9448
9191
  <div class="w-full">
@@ -9475,10 +9218,6 @@ __decorate([property({ type: Boolean })], AxebowTenantCard.prototype, "showInvit
9475
9218
  __decorate([property({ type: String })], AxebowTenantCard.prototype, "invitedNoticeText", void 0);
9476
9219
  __decorate([property({ type: Boolean })], AxebowTenantCard.prototype, "showNoAccountsWarning", void 0);
9477
9220
  __decorate([property({ type: String })], AxebowTenantCard.prototype, "noAccountsWarningText", void 0);
9478
- __decorate([property({ type: Boolean })], AxebowTenantCard.prototype, "showCallToActionIssues", void 0);
9479
- __decorate([property({ type: String })], AxebowTenantCard.prototype, "callToActionIssuesText", void 0);
9480
- __decorate([property({ type: String })], AxebowTenantCard.prototype, "callToActionCriticality", void 0);
9481
- __decorate([property({ attribute: false })], AxebowTenantCard.prototype, "onCallToActionClick", void 0);
9482
9221
  __decorate([property({ type: String })], AxebowTenantCard.prototype, "contentState", void 0);
9483
9222
  __decorate([property({ type: String })], AxebowTenantCard.prototype, "invitationText", void 0);
9484
9223
  __decorate([property({ type: String })], AxebowTenantCard.prototype, "emptyTextPrefix", void 0);
@@ -13117,7 +12856,7 @@ var AxebowInstancesTable = class AxebowInstancesTable extends LitElement {
13117
12856
  if (!this.instances.length) return html`<p>${this.noInstancesLabel}</p>`;
13118
12857
  return html`
13119
12858
  <p class="text-black mb-4">${this.descriptionLabel}</p>
13120
- <div class="w-full">
12859
+ <div class="w-full max-h-full overflow-y-auto">
13121
12860
  <div class="w-186.5 rounded-md overflow-hidden border border-black/10">
13122
12861
  ${this._renderHeader()} ${this.instances.map((instance) => this._renderInstanceRow(instance))}
13123
12862
  </div>
@@ -13747,7 +13486,6 @@ var AxebowModal = class AxebowModal extends LitElement {
13747
13486
  this.height = "calc(100% - 2rem)";
13748
13487
  this.title = "";
13749
13488
  this.description = "";
13750
- this.closeIconName = "close";
13751
13489
  this._hasFooterSlotContent = false;
13752
13490
  this._isScrollLocked = false;
13753
13491
  }
@@ -13858,12 +13596,8 @@ var AxebowModal = class AxebowModal extends LitElement {
13858
13596
  ${this.description ? html`<p class="text-(--axebow-gray) mt-1 m-0">${this.description}</p>` : ""}
13859
13597
  <slot name="description"></slot>
13860
13598
 
13861
- <div
13862
- class="close-button"
13863
- style=${ifDefined(this.closeButtonSize ? `width: ${this.closeButtonSize}; height: ${this.closeButtonSize}; padding: 0;` : void 0)}
13864
- @click=${this._handleClose}
13865
- >
13866
- <axebow-icon iconName=${this.closeIconName} iconColor=${ifDefined(this.closeIconColor)} size="xl"></axebow-icon>
13599
+ <div class="close-button" @click=${this._handleClose}>
13600
+ <axebow-icon iconName="close" size="xl"></axebow-icon>
13867
13601
  </div>
13868
13602
  </div>
13869
13603
  ` : ""}
@@ -13891,195 +13625,216 @@ __decorate([property()], AxebowModal.prototype, "maxHeight", void 0);
13891
13625
  __decorate([property()], AxebowModal.prototype, "height", void 0);
13892
13626
  __decorate([property()], AxebowModal.prototype, "title", void 0);
13893
13627
  __decorate([property()], AxebowModal.prototype, "description", void 0);
13894
- __decorate([property()], AxebowModal.prototype, "closeIconName", void 0);
13895
- __decorate([property()], AxebowModal.prototype, "closeIconColor", void 0);
13896
- __decorate([property()], AxebowModal.prototype, "closeButtonSize", void 0);
13897
13628
  __decorate([state()], AxebowModal.prototype, "_hasFooterSlotContent", void 0);
13898
13629
  AxebowModal = __decorate([customElement("axebow-modal")], AxebowModal);
13899
13630
  //#endregion
13900
- //#region src/components/axebow-call-to-action-row/call-to-action-notification.ts
13901
- var DEFAULT_LOW_NOTE_TEXT = "No action needed";
13902
- var BUTTON_TYPE_TO_VARIANT = {
13903
- primary: "primary",
13904
- secondary: "tertiary",
13905
- text: "text"
13906
- };
13907
- function getHighestCriticality(notifications) {
13908
- if (notifications.some((n) => n.criticality === "critical")) return "critical";
13909
- if (notifications.some((n) => n.criticality === "high")) return "high";
13910
- return "low";
13911
- }
13912
- function getCtaHeading(notification) {
13913
- return (notification.info_content?.code || notification.subtype).replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
13914
- }
13915
- function getCtaDescription(notification) {
13916
- return notification.info_content?.message ?? "";
13917
- }
13918
- function getCtaBadgeLabel(notification) {
13919
- return notification.criticality.charAt(0).toUpperCase() + notification.criticality.slice(1);
13920
- }
13921
- function groupCallToActionNotifications(notifications) {
13922
- const groups = /* @__PURE__ */ new Map();
13923
- notifications.forEach((notification) => {
13924
- const key = `${notification.criticality}|${getCtaHeading(notification)}|${getCtaDescription(notification)}`;
13925
- const existing = groups.get(key);
13926
- if (existing) existing.count += 1;
13927
- else groups.set(key, {
13928
- notification,
13929
- count: 1
13930
- });
13931
- });
13932
- return [...groups.values()];
13933
- }
13934
- function buildCtaButtons(notification, dispatch) {
13935
- return (notification.actions ?? []).map((action) => ({
13936
- label: action.label,
13937
- variant: BUTTON_TYPE_TO_VARIANT[action.buttonType] ?? "primary",
13938
- outline: action.outlined,
13939
- iconName: action.icon,
13940
- iconColor: action.iconColor,
13941
- onClick: () => dispatch({
13942
- notification,
13943
- action
13944
- })
13945
- }));
13946
- }
13947
- //#endregion
13948
- //#region src/components/axebow-call-to-action-feature/axebow-call-to-action-feature.ts
13949
- var _AxebowCallToActionFeature;
13950
- var AxebowCallToActionFeature = class AxebowCallToActionFeature extends LitElement {
13951
- static {
13952
- _AxebowCallToActionFeature = this;
13953
- }
13631
+ //#region src/components/axebow-badge/axebow-badge.ts
13632
+ var AxebowBadge = class AxebowBadge extends LitElement {
13954
13633
  constructor(..._args) {
13955
13634
  super(..._args);
13956
- this.callToActions = [];
13957
- this.actionNeededLabel = "Action needed";
13958
- this.noActionsLabel = "No action needed!";
13959
- this.lastUpdatedText = "";
13960
- this.expanded = false;
13961
- this.refreshing = false;
13962
- }
13963
- static {
13964
- this.REFRESH_DURATION_MS = 2500;
13965
- }
13966
- static {
13967
- this.REFRESH_SKELETON_ROWS = 4;
13635
+ this.bgColor = "var(--axebow-base)";
13636
+ this.textColor = "var(--axebow-secondary)";
13968
13637
  }
13969
13638
  static {
13970
- this.styles = [
13971
- unsafeCSS(tailwind_default),
13972
- axebowTheme,
13973
- css`
13639
+ this.styles = [unsafeCSS(tailwind_default), css`
13974
13640
  :host {
13975
- display: block;
13976
- width: 100%;
13977
- }
13978
-
13979
- @keyframes cta-skeleton-pulse {
13980
- 0%,
13981
- 100% {
13982
- opacity: 1;
13983
- }
13984
- 50% {
13985
- opacity: 0.4;
13986
- }
13987
- }
13988
-
13989
- .cta-skeleton-bar {
13990
- animation: cta-skeleton-pulse 1.5s ease-in-out infinite;
13641
+ display: inline-block;
13991
13642
  }
13992
- `
13993
- ];
13994
- }
13995
- get _highestCriticality() {
13996
- return getHighestCriticality(this.callToActions);
13997
- }
13998
- _toggle() {
13999
- if (this.callToActions.length === 0) return;
14000
- this.expanded = !this.expanded;
14001
- }
14002
- _handleRefresh() {
14003
- if (this.refreshing) return;
14004
- this.refreshing = true;
14005
- setTimeout(() => {
14006
- this.refreshing = false;
14007
- }, _AxebowCallToActionFeature.REFRESH_DURATION_MS);
13643
+ `];
14008
13644
  }
14009
- _renderSkeletonRow() {
13645
+ render() {
14010
13646
  return html`
14011
13647
  <div
14012
- 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"
13648
+ class="inline-flex items-center justify-center px-2 py-px rounded border border-solid text-xs leading-3 font-semibold whitespace-nowrap"
13649
+ style="background-color: ${this.bgColor}; color: ${this.textColor}; border-color: ${this.textColor};"
14013
13650
  >
14014
- <div
14015
- class="cta-skeleton-bar w-10 h-10 rounded-md shrink-0"
14016
- style="background-color: var(--axebow-base);"
14017
- ></div>
14018
- <div class="flex-1 min-w-0 flex flex-col gap-2">
14019
- <div class="cta-skeleton-bar h-4 rounded" style="background-color: var(--axebow-base); width: 40%;"></div>
14020
- <div class="cta-skeleton-bar h-3 rounded" style="background-color: var(--axebow-base); width: 70%;"></div>
14021
- </div>
13651
+ <slot></slot>
14022
13652
  </div>
14023
13653
  `;
14024
13654
  }
14025
- render() {
14026
- const { color: criticalityColor, iconName } = CRITICALITY_STYLES[this._highestCriticality];
14027
- const chevronIconName = this.expanded ? "keyboard_arrow_down" : "chevron_right";
14028
- const hasCallToActions = this.callToActions.length > 0;
14029
- return html`
14030
- <div class="w-full box-border border border-solid border-(--axebow-table-header-border) rounded-lg overflow-hidden flex flex-col">
14031
- <div
14032
- class="w-full box-border py-3 px-5 flex flex-row items-center justify-between"
14033
- style="background-color: ${this.expanded || this.refreshing ? "var(--axebow-base)" : "var(--axebow-white)"};"
13655
+ };
13656
+ __decorate([property({ type: String })], AxebowBadge.prototype, "bgColor", void 0);
13657
+ __decorate([property({ type: String })], AxebowBadge.prototype, "textColor", void 0);
13658
+ AxebowBadge = __decorate([customElement("axebow-badge")], AxebowBadge);
13659
+ //#endregion
13660
+ //#region src/components/axebow-call-to-action-row/axebow-call-to-action-row.ts
13661
+ var CRITICALITY_STYLES = {
13662
+ critical: {
13663
+ bg: "var(--axebow-critical-bg)",
13664
+ color: "var(--axebow-error)",
13665
+ iconName: "error"
13666
+ },
13667
+ high: {
13668
+ bg: "var(--axebow-high-bg)",
13669
+ color: "var(--axebow-dark-yellow)",
13670
+ iconName: "warning"
13671
+ },
13672
+ low: {
13673
+ bg: "var(--axebow-base)",
13674
+ color: "var(--axebow-secondary)",
13675
+ iconName: "info"
13676
+ }
13677
+ };
13678
+ var AxebowCallToActionRow = class AxebowCallToActionRow extends LitElement {
13679
+ constructor(..._args) {
13680
+ super(..._args);
13681
+ this.criticality = "low";
13682
+ this.heading = "";
13683
+ this.badgeLabel = "";
13684
+ this.description = "";
13685
+ this.buttons = [];
13686
+ this.lowNoteText = "";
13687
+ }
13688
+ static {
13689
+ this.styles = [
13690
+ unsafeCSS(tailwind_default),
13691
+ axebowTheme,
13692
+ css`
13693
+ :host {
13694
+ display: block;
13695
+ width: 100%;
13696
+ }
13697
+ `
13698
+ ];
13699
+ }
13700
+ render() {
13701
+ const { bg, color, iconName } = CRITICALITY_STYLES[this.criticality] ?? CRITICALITY_STYLES.low;
13702
+ return html`
13703
+ <div class="w-full bg-white p-4 flex flex-row items-center gap-4">
13704
+ <div class="w-10 h-10 rounded-md shrink-0 flex items-center justify-center" style="background-color: ${bg};">
13705
+ <div class="w-6 h-6 flex items-center justify-center">
13706
+ <axebow-icon iconName=${iconName} iconColor=${color} size="2xl"></axebow-icon>
13707
+ </div>
13708
+ </div>
13709
+
13710
+ <div class="flex-1 min-w-0 flex flex-col gap-1">
13711
+ <div class="w-full flex flex-row items-center gap-2">
13712
+ <span class="text-base font-semibold truncate">${this.heading}</span>
13713
+ ${this.badgeLabel ? html`<axebow-badge bgColor=${bg} textColor=${color}>${this.badgeLabel}</axebow-badge>` : ""}
13714
+ </div>
13715
+ <div class="w-full text-(--axebow-gray)">${this.description}</div>
13716
+ </div>
13717
+
13718
+ ${this.criticality === "low" ? this._renderLowNote() : this._renderButtons()}
13719
+ </div>
13720
+ `;
13721
+ }
13722
+ _renderLowNote() {
13723
+ return html`
13724
+ <div
13725
+ class="w-91 h-11 shrink-0 box-border rounded-md py-1 px-3 flex items-center text-(--axebow-gray)"
13726
+ style="background-color: var(--axebow-base);"
13727
+ >
13728
+ ${this.lowNoteText}
13729
+ </div>
13730
+ `;
13731
+ }
13732
+ _renderButtons() {
13733
+ if (!this.buttons.length) return "";
13734
+ return html`
13735
+ <div class="flex flex-row items-center gap-4 shrink-0">
13736
+ ${this.buttons.map((button) => html`
13737
+ <axebow-button
13738
+ variant=${button.variant ?? "primary"}
13739
+ ?outline=${button.outline ?? false}
13740
+ @click=${() => button.onClick?.()}
13741
+ >
13742
+ ${button.label}
13743
+ ${button.iconName ? html`<axebow-icon
13744
+ slot="suffix"
13745
+ iconName=${button.iconName}
13746
+ iconColor=${button.iconColor ?? "currentColor"}
13747
+ ></axebow-icon>` : ""}
13748
+ </axebow-button>
13749
+ `)}
13750
+ </div>
13751
+ `;
13752
+ }
13753
+ };
13754
+ __decorate([property({ type: String })], AxebowCallToActionRow.prototype, "criticality", void 0);
13755
+ __decorate([property({ type: String })], AxebowCallToActionRow.prototype, "heading", void 0);
13756
+ __decorate([property({ type: String })], AxebowCallToActionRow.prototype, "badgeLabel", void 0);
13757
+ __decorate([property({ type: String })], AxebowCallToActionRow.prototype, "description", void 0);
13758
+ __decorate([property({ type: Array })], AxebowCallToActionRow.prototype, "buttons", void 0);
13759
+ __decorate([property({ type: String })], AxebowCallToActionRow.prototype, "lowNoteText", void 0);
13760
+ AxebowCallToActionRow = __decorate([customElement("axebow-call-to-action-row")], AxebowCallToActionRow);
13761
+ //#endregion
13762
+ //#region src/components/axebow-call-to-action-feature/axebow-call-to-action-feature.ts
13763
+ var AxebowCallToActionFeature = class AxebowCallToActionFeature extends LitElement {
13764
+ constructor(..._args) {
13765
+ super(..._args);
13766
+ this.notifications = [];
13767
+ this.actionNeededLabel = "Action needed";
13768
+ this.lastUpdatedText = "";
13769
+ this.expanded = false;
13770
+ }
13771
+ static {
13772
+ this.styles = [
13773
+ unsafeCSS(tailwind_default),
13774
+ axebowTheme,
13775
+ css`
13776
+ :host {
13777
+ display: block;
13778
+ width: 100%;
13779
+ }
13780
+ `
13781
+ ];
13782
+ }
13783
+ get _highestCriticality() {
13784
+ if (this.notifications.some((n) => n?.criticality === "critical")) return "critical";
13785
+ if (this.notifications.some((n) => n?.criticality === "high")) return "high";
13786
+ return "low";
13787
+ }
13788
+ _toggle() {
13789
+ this.expanded = !this.expanded;
13790
+ }
13791
+ render() {
13792
+ const { color: criticalityColor, iconName } = CRITICALITY_STYLES[this._highestCriticality];
13793
+ const chevronIconName = this.expanded ? "keyboard_arrow_down" : "chevron_right";
13794
+ return html`
13795
+ <div class="w-full flex flex-col">
13796
+ <div
13797
+ class="w-full box-border py-3 px-5 flex flex-row items-center justify-between"
13798
+ style="background-color: ${this.expanded ? "var(--axebow-base)" : "var(--axebow-white)"};"
14034
13799
  >
14035
13800
  <div class="flex flex-row items-center gap-2">
14036
- ${hasCallToActions ? html`<axebow-icon iconName=${iconName} iconColor=${criticalityColor} size="2xl"></axebow-icon>` : ""}
14037
- <span class="text-base font-semibold">${hasCallToActions ? this.actionNeededLabel : this.noActionsLabel}</span>
13801
+ <axebow-icon iconName=${iconName} iconColor=${criticalityColor} size="2xl"></axebow-icon>
13802
+ <span class="text-base font-semibold">${this.actionNeededLabel}</span>
14038
13803
  <div
14039
13804
  class="w-6 h-6 shrink-0 rounded-full flex items-center justify-center"
14040
- style="background-color: ${hasCallToActions ? this.expanded ? "var(--axebow-white)" : "var(--axebow-base)" : "#0ECD9A"};"
13805
+ style="background-color: ${this.expanded ? "var(--axebow-white)" : "var(--axebow-base)"};"
14041
13806
  >
14042
- <span class="text-base">${this.callToActions.length}</span>
13807
+ <span class="text-base">${this.notifications.length}</span>
14043
13808
  </div>
14044
13809
  </div>
14045
13810
 
14046
13811
  <div class="flex flex-row items-center gap-3">
14047
13812
  <span class="text-sm text-(--axebow-gray) whitespace-nowrap">${this.lastUpdatedText}</span>
14048
13813
  <div
14049
- class="w-7 h-7 shrink-0 rounded-md border border-solid flex items-center justify-center cursor-pointer"
13814
+ class="w-7 h-7 shrink-0 rounded-md border border-solid flex items-center justify-center"
14050
13815
  style="border-color: var(--axebow-gray);"
14051
- @click=${() => this._handleRefresh()}
14052
13816
  >
14053
- <axebow-icon iconName="refresh" iconColor="var(--axebow-gray)" size="md"></axebow-icon>
13817
+ <axebow-icon iconName="undo" iconColor="var(--axebow-gray)" size="md"></axebow-icon>
13818
+ </div>
13819
+ <div
13820
+ class="w-5 h-5 shrink-0 flex items-center justify-center cursor-pointer"
13821
+ @click=${() => this._toggle()}
13822
+ >
13823
+ <axebow-icon iconName=${chevronIconName} iconColor="var(--axebow-tertiary)" size="md"></axebow-icon>
14054
13824
  </div>
14055
- ${hasCallToActions ? html`
14056
- <div class="w-5 h-5 shrink-0 flex items-center justify-center cursor-pointer" @click=${() => this._toggle()}>
14057
- <axebow-icon iconName=${chevronIconName} iconColor="var(--axebow-tertiary)" size="md"></axebow-icon>
14058
- </div>
14059
- ` : ""}
14060
13825
  </div>
14061
13826
  </div>
14062
13827
 
14063
- ${this.refreshing ? html`
14064
- <div class="w-full flex flex-col">
14065
- ${Array.from({ length: _AxebowCallToActionFeature.REFRESH_SKELETON_ROWS }, () => this._renderSkeletonRow())}
14066
- </div>
14067
- ` : ""}
14068
- ${!this.refreshing && this.expanded && hasCallToActions ? html`
13828
+ ${this.expanded ? html`
14069
13829
  <div class="w-full flex flex-col">
14070
- ${groupCallToActionNotifications(this.callToActions).map(({ notification, count }) => html`
13830
+ ${this.notifications.map((notification) => html`
14071
13831
  <axebow-call-to-action-row
14072
- criticality=${notification.criticality}
14073
- heading=${getCtaHeading(notification)}
14074
- badgeLabel=${getCtaBadgeLabel(notification)}
14075
- description=${getCtaDescription(notification)}
14076
- lowNoteText=${DEFAULT_LOW_NOTE_TEXT}
14077
- count=${count}
14078
- .buttons=${buildCtaButtons(notification, (detail) => this.dispatchEvent(new CustomEvent("cta-action", {
14079
- detail,
14080
- bubbles: true,
14081
- composed: true
14082
- })))}
13832
+ criticality=${ifDefined(notification?.criticality)}
13833
+ heading=${ifDefined(notification?.heading)}
13834
+ badgeLabel=${ifDefined(notification?.badgeLabel)}
13835
+ description=${ifDefined(notification?.description)}
13836
+ lowNoteText=${ifDefined(notification?.lowNoteText)}
13837
+ .buttons=${notification?.buttons ?? []}
14083
13838
  ></axebow-call-to-action-row>
14084
13839
  `)}
14085
13840
  </div>
@@ -14088,13 +13843,11 @@ var AxebowCallToActionFeature = class AxebowCallToActionFeature extends LitEleme
14088
13843
  `;
14089
13844
  }
14090
13845
  };
14091
- __decorate([property({ type: Array })], AxebowCallToActionFeature.prototype, "callToActions", void 0);
13846
+ __decorate([property({ type: Array })], AxebowCallToActionFeature.prototype, "notifications", void 0);
14092
13847
  __decorate([property({ type: String })], AxebowCallToActionFeature.prototype, "actionNeededLabel", void 0);
14093
- __decorate([property({ type: String })], AxebowCallToActionFeature.prototype, "noActionsLabel", void 0);
14094
13848
  __decorate([property({ type: String })], AxebowCallToActionFeature.prototype, "lastUpdatedText", void 0);
14095
13849
  __decorate([state()], AxebowCallToActionFeature.prototype, "expanded", void 0);
14096
- __decorate([state()], AxebowCallToActionFeature.prototype, "refreshing", void 0);
14097
- AxebowCallToActionFeature = _AxebowCallToActionFeature = __decorate([customElement("axebow-call-to-action-feature")], AxebowCallToActionFeature);
13850
+ AxebowCallToActionFeature = __decorate([customElement("axebow-call-to-action-feature")], AxebowCallToActionFeature);
14098
13851
  //#endregion
14099
13852
  //#region src/components/axebow-cta-dialog/axebow-cta-dialog.ts
14100
13853
  var AxebowCtaDialog = class AxebowCtaDialog extends LitElement {
@@ -14122,32 +13875,24 @@ var AxebowCtaDialog = class AxebowCtaDialog extends LitElement {
14122
13875
  title=${this.dialogTitle}
14123
13876
  width="76.25rem"
14124
13877
  maxWidth="100%"
14125
- height="40.625rem"
14126
- closeIconName="cancel"
14127
- closeIconColor="#8A94AE"
14128
- closeButtonSize="1.5rem"
13878
+ height="auto"
14129
13879
  @close=${() => this._handleClose()}
14130
13880
  >
14131
13881
  <div class="flex flex-col gap-2 p-6">
14132
- ${groupCallToActionNotifications(this.notifications).map(({ notification, count }) => html`
13882
+ ${this.notifications.map((notification) => html`
14133
13883
  <axebow-call-to-action-row
14134
- criticality=${notification.criticality}
14135
- heading=${getCtaHeading(notification)}
14136
- badgeLabel=${getCtaBadgeLabel(notification)}
14137
- description=${getCtaDescription(notification)}
14138
- lowNoteText=${DEFAULT_LOW_NOTE_TEXT}
14139
- count=${count}
14140
- .buttons=${buildCtaButtons(notification, (detail) => this.dispatchEvent(new CustomEvent("cta-action", {
14141
- detail,
14142
- bubbles: true,
14143
- composed: true
14144
- })))}
13884
+ criticality=${ifDefined(notification?.criticality)}
13885
+ heading=${ifDefined(notification?.heading)}
13886
+ badgeLabel=${ifDefined(notification?.badgeLabel)}
13887
+ description=${ifDefined(notification?.description)}
13888
+ lowNoteText=${ifDefined(notification?.lowNoteText)}
13889
+ .buttons=${notification?.buttons ?? []}
14145
13890
  ></axebow-call-to-action-row>
14146
13891
  `)}
14147
13892
  </div>
14148
13893
 
14149
13894
  <div slot="footer" class="flex items-center justify-end p-4">
14150
- <axebow-button variant="primary" outline @click=${() => this._handleClose()}>${this.goBackLabel}</axebow-button>
13895
+ <axebow-button variant="primary" @click=${() => this._handleClose()}>${this.goBackLabel}</axebow-button>
14151
13896
  </div>
14152
13897
  </axebow-modal>
14153
13898
  `;
@@ -14163,2163 +13908,6 @@ __decorate([property({ type: Array })], AxebowCtaDialog.prototype, "notification
14163
13908
  __decorate([property({ attribute: false })], AxebowCtaDialog.prototype, "onClose", void 0);
14164
13909
  AxebowCtaDialog = __decorate([customElement("axebow-cta-dialog")], AxebowCtaDialog);
14165
13910
  //#endregion
14166
- //#region src/components/axebow-ul/axebow-ul.ts
14167
- var AxebowUl = class AxebowUl extends LitElement {
14168
- constructor(..._args) {
14169
- super(..._args);
14170
- this._items = [];
14171
- }
14172
- static {
14173
- this.styles = [
14174
- unsafeCSS(tailwind_default),
14175
- axebowTheme,
14176
- css`
14177
- ::slotted(*) {
14178
- display: none !important;
14179
- }
14180
- `
14181
- ];
14182
- }
14183
- _handleSlotChange(e) {
14184
- const slot = e.target;
14185
- this._items = slot.assignedElements({ flatten: true }).filter((el) => el.tagName === "LI").map((el) => el.innerHTML);
14186
- }
14187
- render() {
14188
- return html`
14189
- <slot @slotchange=${this._handleSlotChange}></slot>
14190
- <ul class="list-none mt-2 mb-4 ml-2">
14191
- ${this._items.map((item) => html`
14192
- <li class="flex items-center gap-2">
14193
- <span class="block shrink-0 w-1.5 h-1.5 rounded-full bg-(--axebow-gray)"></span>
14194
- ${unsafeHTML(item)}
14195
- </li>
14196
- `)}
14197
- </ul>
14198
- `;
14199
- }
14200
- };
14201
- __decorate([state()], AxebowUl.prototype, "_items", void 0);
14202
- AxebowUl = __decorate([customElement("axebow-ul")], AxebowUl);
14203
- //#endregion
14204
- //#region src/components/axebow-border-container/axebow-border-container.ts
14205
- var AxebowBorderContainer = class AxebowBorderContainer extends LitElement {
14206
- constructor(..._args) {
14207
- super(..._args);
14208
- this.error = false;
14209
- this.disabled = false;
14210
- this.label = "";
14211
- this.required = false;
14212
- this.compact = false;
14213
- }
14214
- static {
14215
- this.styles = css`
14216
- :host {
14217
- display: block;
14218
- width: 100%;
14219
- }
14220
- .container {
14221
- border: 1px solid #e2e8f0;
14222
- border-radius: 0.375rem;
14223
- padding: 0.375rem 0.625rem;
14224
- background-color: #fff;
14225
- transition:
14226
- border-color 0.2s ease,
14227
- background-color 0.2s ease;
14228
- display: flex;
14229
- flex-direction: column;
14230
- gap: 0.125rem;
14231
- }
14232
- .container.compact {
14233
- width: 14.625rem;
14234
- height: 2.9375rem;
14235
- box-sizing: border-box;
14236
- padding: 0.375rem 0.5rem;
14237
- justify-content: flex-start;
14238
- gap: 0.125rem;
14239
- }
14240
- ::slotted(*) {
14241
- margin: 0;
14242
- }
14243
- .container:focus-within:not(.disabled) {
14244
- border-color: var(--axebow-primary);
14245
- }
14246
- .container.error {
14247
- border-color: var(--axebow-error);
14248
- }
14249
- .container.disabled {
14250
- background-color: var(--axebow-anti-flash-white);
14251
- }
14252
- .label {
14253
- font-size: 0.75rem;
14254
- color: var(--axebow-gray);
14255
- font-weight: 500;
14256
- line-height: 1;
14257
- user-select: none;
14258
- display: flex;
14259
- align-items: center;
14260
- gap: 0.125rem;
14261
- }
14262
- .asterisk {
14263
- color: var(--axebow-error);
14264
- }
14265
- `;
14266
- }
14267
- render() {
14268
- return html`
14269
- <div
14270
- class="container ${this.compact ? "compact" : ""} ${this.error ? "error" : ""} ${this.disabled ? "disabled" : ""}"
14271
- >
14272
- ${this.label || this.required ? html`
14273
- <div class="label">${this.required ? html`<span class="asterisk">*</span>` : ""} ${this.label}</div>
14274
- ` : ""}
14275
- <slot></slot>
14276
- </div>
14277
- `;
14278
- }
14279
- };
14280
- __decorate([property({ type: Boolean })], AxebowBorderContainer.prototype, "error", void 0);
14281
- __decorate([property({ type: Boolean })], AxebowBorderContainer.prototype, "disabled", void 0);
14282
- __decorate([property({ type: String })], AxebowBorderContainer.prototype, "label", void 0);
14283
- __decorate([property({ type: Boolean })], AxebowBorderContainer.prototype, "required", void 0);
14284
- __decorate([property({ type: Boolean })], AxebowBorderContainer.prototype, "compact", void 0);
14285
- AxebowBorderContainer = __decorate([customElement("axebow-border-container")], AxebowBorderContainer);
14286
- //#endregion
14287
- //#region src/components/axebow-copy-icon/axebow-copy-icon.ts
14288
- var AxebowCopyIcon = class AxebowCopyIcon extends LitElement {
14289
- constructor(..._args) {
14290
- super(..._args);
14291
- this.value = "";
14292
- this.label = "";
14293
- this.showText = false;
14294
- this.iconName = "content_copy";
14295
- this.successIconName = "verified";
14296
- this.iconColor = "var(--axebow-tertiary)";
14297
- this.successIconColor = "var(--axebow-success)";
14298
- this.size = "small";
14299
- this.containerClass = "cursor-pointer flex items-center gap-1 h-full";
14300
- this.successContainerClass = "";
14301
- this.copyTooltip = "";
14302
- this.copiedText = "";
14303
- this.copied = false;
14304
- }
14305
- static {
14306
- this.styles = [
14307
- unsafeCSS(tailwind_default),
14308
- axebowTheme,
14309
- css`
14310
- :host {
14311
- display: flex;
14312
- height: 100%;
14313
- align-items: center;
14314
- gap: 0.25rem;
14315
- }
14316
- `
14317
- ];
14318
- }
14319
- handleCopy(e) {
14320
- if (this.copied || !this.value) return;
14321
- e.stopPropagation();
14322
- this.copied = true;
14323
- this.dispatchEvent(new CustomEvent("axebow-copy", {
14324
- bubbles: true,
14325
- composed: true,
14326
- detail: {
14327
- value: this.value,
14328
- label: this.label
14329
- }
14330
- }));
14331
- setTimeout(() => {
14332
- this.copied = false;
14333
- }, 2e3);
14334
- }
14335
- render() {
14336
- return html`
14337
- <div
14338
- class="h-full ${this.copied ? this.successContainerClass || this.containerClass : this.containerClass}"
14339
- title="${this.copyTooltip}"
14340
- @click=${this.handleCopy}
14341
- >
14342
- <axebow-icon
14343
- iconName=${this.copied ? this.successIconName : this.iconName}
14344
- iconColor=${this.copied ? this.successIconColor : this.iconColor}
14345
- size=${this.size}
14346
- ></axebow-icon>
14347
- ${this.showText && this.copied ? html`<span class="text-sm transition-opacity duration-300" style="color: ${this.successIconColor}"
14348
- >${this.copiedText}</span
14349
- >` : ""}
14350
- </div>
14351
- `;
14352
- }
14353
- };
14354
- __decorate([property({ type: String })], AxebowCopyIcon.prototype, "value", void 0);
14355
- __decorate([property({ type: String })], AxebowCopyIcon.prototype, "label", void 0);
14356
- __decorate([property({ type: Boolean })], AxebowCopyIcon.prototype, "showText", void 0);
14357
- __decorate([property({ type: String })], AxebowCopyIcon.prototype, "iconName", void 0);
14358
- __decorate([property({ type: String })], AxebowCopyIcon.prototype, "successIconName", void 0);
14359
- __decorate([property({ type: String })], AxebowCopyIcon.prototype, "iconColor", void 0);
14360
- __decorate([property({ type: String })], AxebowCopyIcon.prototype, "successIconColor", void 0);
14361
- __decorate([property({ type: String })], AxebowCopyIcon.prototype, "size", void 0);
14362
- __decorate([property({ type: String })], AxebowCopyIcon.prototype, "containerClass", void 0);
14363
- __decorate([property({ type: String })], AxebowCopyIcon.prototype, "successContainerClass", void 0);
14364
- __decorate([property({ type: String })], AxebowCopyIcon.prototype, "copyTooltip", void 0);
14365
- __decorate([property({ type: String })], AxebowCopyIcon.prototype, "copiedText", void 0);
14366
- __decorate([state()], AxebowCopyIcon.prototype, "copied", void 0);
14367
- AxebowCopyIcon = __decorate([customElement("axebow-copy-icon")], AxebowCopyIcon);
14368
- //#endregion
14369
- //#region src/components/axebow-page-actions/axebow-page-actions.ts
14370
- var AxebowPageActions = class AxebowPageActions extends LitElement {
14371
- constructor(..._args) {
14372
- super(..._args);
14373
- this.actions = [];
14374
- this.gap = "0.75rem";
14375
- this._hoveredIndex = -1;
14376
- }
14377
- static {
14378
- this.styles = [unsafeCSS(tailwind_default)];
14379
- }
14380
- handleActionClick(index) {
14381
- const action = this.actions[index];
14382
- if (action && typeof action.onClick === "function") action.onClick();
14383
- }
14384
- render() {
14385
- if (this.actions.length === 0) return html``;
14386
- return html`
14387
- <div class="flex flex-wrap items-center" style="gap: ${this.gap};">
14388
- ${this.actions.map((action, i) => {
14389
- const outlined = this.actions.length > 1 && i > 0;
14390
- const isHovered = this._hoveredIndex === i;
14391
- const iconColor = action.iconColor ?? (outlined ? isHovered ? "var(--axebow-gray)" : "var(--axebow-tertiary)" : "white");
14392
- return html`
14393
- <axebow-button
14394
- variant="primary"
14395
- ?outline=${outlined}
14396
- .disabled=${!!action.disabled}
14397
- fixedWidth=${ifDefined(this.buttonWidth)}
14398
- fixedHeight=${ifDefined(this.buttonHeight)}
14399
- @click=${() => this.handleActionClick(i)}
14400
- @mouseenter=${() => this._hoveredIndex = i}
14401
- @mouseleave=${() => this._hoveredIndex = -1}
14402
- >
14403
- ${action.title}
14404
- ${action.iconName ? html`<axebow-icon
14405
- slot="suffix"
14406
- iconName="${action.iconName}"
14407
- iconColor="${iconColor}"
14408
- size="${action.iconSize ?? "medium"}"
14409
- ></axebow-icon>` : ""}
14410
- </axebow-button>
14411
- `;
14412
- })}
14413
- </div>
14414
- `;
14415
- }
14416
- };
14417
- __decorate([property({ type: Array })], AxebowPageActions.prototype, "actions", void 0);
14418
- __decorate([property({ type: String })], AxebowPageActions.prototype, "buttonWidth", void 0);
14419
- __decorate([property({ type: String })], AxebowPageActions.prototype, "buttonHeight", void 0);
14420
- __decorate([property({ type: String })], AxebowPageActions.prototype, "gap", void 0);
14421
- __decorate([state()], AxebowPageActions.prototype, "_hoveredIndex", void 0);
14422
- AxebowPageActions = __decorate([customElement("axebow-page-actions")], AxebowPageActions);
14423
- //#endregion
14424
- //#region src/components/axebow-mobile-warning-banner/axebow-mobile-warning-banner.ts
14425
- var AxebowMobileWarningBanner = class AxebowMobileWarningBanner extends LitElement {
14426
- constructor(..._args) {
14427
- super(..._args);
14428
- this.show = false;
14429
- this.heading = "";
14430
- this.message = "";
14431
- this.closeAriaLabel = "";
14432
- }
14433
- static {
14434
- this.styles = [unsafeCSS(tailwind_default), css`
14435
- :host {
14436
- display: block;
14437
- }
14438
-
14439
- .banner-container {
14440
- position: fixed;
14441
- top: 80px;
14442
- left: 0;
14443
- right: 0;
14444
- z-index: 9999;
14445
- padding: 1rem;
14446
- background: linear-gradient(135deg, #fbbf24 0%, var(--axebow-warning) 100%);
14447
- box-shadow:
14448
- 0 4px 6px -1px rgba(0, 0, 0, 0.1),
14449
- 0 2px 4px -1px rgba(0, 0, 0, 0.06);
14450
- animation: slideDown 0.3s ease-out;
14451
- }
14452
-
14453
- @keyframes slideDown {
14454
- from {
14455
- transform: translateY(-100%);
14456
- opacity: 0;
14457
- }
14458
- to {
14459
- transform: translateY(0);
14460
- opacity: 1;
14461
- }
14462
- }
14463
-
14464
- .banner-content {
14465
- max-width: 1200px;
14466
- margin: 0 auto;
14467
- display: flex;
14468
- align-items: center;
14469
- gap: 1rem;
14470
- }
14471
-
14472
- .icon-container {
14473
- flex-shrink: 0;
14474
- width: 2rem;
14475
- height: 2rem;
14476
- background: rgba(255, 255, 255, 0.9);
14477
- border-radius: 50%;
14478
- display: flex;
14479
- align-items: center;
14480
- justify-content: center;
14481
- }
14482
-
14483
- .message-container {
14484
- flex: 1;
14485
- color: white;
14486
- }
14487
-
14488
- .message-title {
14489
- font-weight: 600;
14490
- font-size: 1rem;
14491
- margin-bottom: 0.25rem;
14492
- }
14493
-
14494
- .message-text {
14495
- font-size: 0.875rem;
14496
- opacity: 0.95;
14497
- }
14498
-
14499
- .close-button {
14500
- flex-shrink: 0;
14501
- background: rgba(255, 255, 255, 0.2);
14502
- border: none;
14503
- border-radius: 0.375rem;
14504
- padding: 0.5rem;
14505
- cursor: pointer;
14506
- transition: all 0.2s;
14507
- display: flex;
14508
- align-items: center;
14509
- justify-content: center;
14510
- color: white;
14511
- }
14512
-
14513
- .close-button:hover {
14514
- background: rgba(255, 255, 255, 0.3);
14515
- }
14516
-
14517
- .close-button:active {
14518
- transform: scale(0.95);
14519
- }
14520
- `];
14521
- }
14522
- handleClose() {
14523
- this.show = false;
14524
- this.dispatchEvent(new CustomEvent("close", {
14525
- bubbles: true,
14526
- composed: true
14527
- }));
14528
- }
14529
- render() {
14530
- if (!this.show) return html``;
14531
- return html`
14532
- <div class="banner-container">
14533
- <div class="banner-content">
14534
- <div class="icon-container">
14535
- <axebow-icon iconName="warning" iconColor="var(--axebow-warning)" size="md"></axebow-icon>
14536
- </div>
14537
- <div class="message-container">
14538
- <div class="message-title">${this.heading}</div>
14539
- <div class="message-text">${this.message}</div>
14540
- </div>
14541
- <button class="close-button" @click=${this.handleClose} aria-label="${this.closeAriaLabel}">
14542
- <axebow-icon iconName="close" iconColor="white" size="md"></axebow-icon>
14543
- </button>
14544
- </div>
14545
- </div>
14546
- `;
14547
- }
14548
- };
14549
- __decorate([property({ type: Boolean })], AxebowMobileWarningBanner.prototype, "show", void 0);
14550
- __decorate([property({ type: String })], AxebowMobileWarningBanner.prototype, "heading", void 0);
14551
- __decorate([property({ type: String })], AxebowMobileWarningBanner.prototype, "message", void 0);
14552
- __decorate([property({ type: String })], AxebowMobileWarningBanner.prototype, "closeAriaLabel", void 0);
14553
- AxebowMobileWarningBanner = __decorate([customElement("axebow-mobile-warning-banner")], AxebowMobileWarningBanner);
14554
- //#endregion
14555
- //#region src/components/axebow-boxed-input/axebow-boxed-input.ts
14556
- var AxebowBoxedInput = class AxebowBoxedInput extends LitElement {
14557
- constructor(..._args) {
14558
- super(..._args);
14559
- this.required = false;
14560
- this.label = "";
14561
- this.type = "input";
14562
- this.options = [];
14563
- this.value = "";
14564
- this.disabled = false;
14565
- this.clearable = true;
14566
- this.compact = false;
14567
- this.password = false;
14568
- this.showPlaceholder = true;
14569
- this.bordered = false;
14570
- this.copyable = false;
14571
- this.noTypeSelectedText = "";
14572
- this.showPassword = false;
14573
- }
14574
- static {
14575
- this.styles = [
14576
- unsafeCSS(tailwind_default),
14577
- axebowTheme,
14578
- css`
14579
- sl-select::part(listbox) {
14580
- max-height: 200px;
14581
- overflow-y: auto;
14582
- scrollbar-width: thin;
14583
- }
14584
- .compact-mode sl-select::part(combobox) {
14585
- background-color: transparent !important;
14586
- }
14587
-
14588
- .boxed-container:focus-within {
14589
- border-color: black !important;
14590
- box-shadow: 0 0 0 1px black !important;
14591
- }
14592
-
14593
- .boxed-container sl-select:focus-within::part(combobox),
14594
- .boxed-container sl-select::part(combobox) {
14595
- border-color: transparent !important;
14596
- box-shadow: none !important;
14597
- }
14598
-
14599
- .boxed-container-bordered {
14600
- border: 1px solid var(--axebow-border-gray) !important;
14601
- transition:
14602
- border-color 0.15s ease,
14603
- box-shadow 0.15s ease;
14604
- }
14605
-
14606
- .boxed-container-bordered:focus-within {
14607
- border-color: black !important;
14608
- box-shadow: 0 0 0 1px black !important;
14609
- }
14610
-
14611
- .boxed-container-bordered sl-select:focus-within::part(combobox),
14612
- .boxed-container-bordered sl-select::part(combobox) {
14613
- border-color: transparent !important;
14614
- box-shadow: none !important;
14615
- }
14616
-
14617
- textarea {
14618
- line-height: 1.5;
14619
- }
14620
-
14621
- textarea::-webkit-scrollbar {
14622
- width: 8px;
14623
- }
14624
-
14625
- textarea::-webkit-scrollbar-track {
14626
- background: #f1f1f1;
14627
- border-radius: 0.25rem;
14628
- }
14629
-
14630
- textarea::-webkit-scrollbar-thumb {
14631
- background: #888;
14632
- border-radius: 0.25rem;
14633
- }
14634
-
14635
- textarea::-webkit-scrollbar-thumb:hover {
14636
- background: #555;
14637
- }
14638
- `
14639
- ];
14640
- }
14641
- updated(changedProperties) {
14642
- super.updated(changedProperties);
14643
- if (changedProperties.has("value") && this.type === "textarea") this.adjustTextareaHeight();
14644
- }
14645
- adjustTextareaHeight() {
14646
- const textarea = this.shadowRoot?.querySelector("textarea");
14647
- if (textarea) {
14648
- const maxHeight = 120;
14649
- textarea.style.height = "auto";
14650
- const newHeight = Math.min(textarea.scrollHeight, maxHeight);
14651
- textarea.style.height = `${newHeight}px`;
14652
- }
14653
- }
14654
- renderActions(icons) {
14655
- if (!icons.length) return html``;
14656
- return html` <div class="flex items-center gap-1 pr-3 shrink-0">${icons}</div> `;
14657
- }
14658
- get _showCopyAction() {
14659
- return !!(this.onCopy || this.copyable);
14660
- }
14661
- render() {
14662
- const disabledStyles = this.disabled ? " opacity-70 cursor-not-allowed" : "";
14663
- const borderClass = this.bordered ? "boxed-container-bordered" : "boxed-container";
14664
- const checkboxInput = `flex flex-col rounded-lg border border-gray-300 mx-2 mb-4 items-start justify-between ${borderClass} transition-all` + disabledStyles;
14665
- const checkboxInputTall = checkboxInput + " py-2";
14666
- const checkboxInputNormal = checkboxInput + " h-14";
14667
- 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;
14668
- const label = "flex flex-row w-full px-4 gap-2 mt-2";
14669
- switch (this.type) {
14670
- case "input": {
14671
- const actions = [];
14672
- if (this.password) actions.push(html`
14673
- <div @click=${() => this.showPassword = !this.showPassword} class="cursor-pointer flex items-center">
14674
- <axebow-icon
14675
- iconName="visibility${this.showPassword ? "_off" : ""}"
14676
- iconColor="var(--axebow-tertiary)"
14677
- ></axebow-icon>
14678
- </div>
14679
- `);
14680
- if (this._showCopyAction) actions.push(html`
14681
- <slot
14682
- name="copy-action"
14683
- @click=${(e) => e.preventDefault()}
14684
- @mousedown=${(e) => e.preventDefault()}
14685
- ></slot>
14686
- `);
14687
- if (this.compact) return html`
14688
- <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;" : ""}`}">
14689
- <input
14690
- type=${this.password && !this.showPassword ? "password" : "text"}
14691
- .value=${this.value}
14692
- ?disabled=${this.disabled}
14693
- @input=${this.handleInputChange}
14694
- @change=${this.handleInputChange}
14695
- style="flex:1; border:none; outline:none; background:transparent; font-size:0.875rem; cursor:${this.disabled ? "not-allowed" : "auto"};"
14696
- placeholder="${this.showPlaceholder && this.label ? `Enter ${this.label.toLowerCase()}` : ""}"
14697
- maxlength="${this.maxlength || 255}"
14698
- />
14699
- ${this.renderActions(actions)}
14700
- </div>
14701
- `;
14702
- return html`
14703
- <div class="${this.bordered ? checkboxInputTall : checkboxInputNormal}">
14704
- <div class="${label}">
14705
- ${this.required ? html`<span class="text-(--axebow-error)">*</span>` : ""}
14706
- <span class="text-(--axebow-gray)"> ${this.label}</span>
14707
- </div>
14708
- <div class="flex flex-row items-center w-full pl-4 ${this.bordered && this.password ? "pb-1" : ""}">
14709
- <input
14710
- type=${this.password && !this.showPassword ? "password" : "text"}
14711
- .value=${this.value}
14712
- ?disabled=${this.disabled}
14713
- @input=${this.handleInputChange}
14714
- @change=${this.handleInputChange}
14715
- style="flex: 1; border: none; outline: none; background: transparent; font-size: var(--font-base)"
14716
- class="${this.disabled ? "cursor-not-allowed" : ""}"
14717
- placeholder="${this.showPlaceholder ? `Enter ${this.label.toLowerCase()}` : ""}"
14718
- maxlength="${this.maxlength || 255}"
14719
- />
14720
- ${this.renderActions(actions)}
14721
- </div>
14722
- </div>
14723
- `;
14724
- }
14725
- case "textarea": return html`
14726
- <div class="${textareaInput}">
14727
- <div class="${label}">
14728
- ${this.required ? html`<span class="text-(--axebow-error)">*</span>` : ""}
14729
- <span class="text-(--axebow-gray)"> ${this.label}</span>
14730
- </div>
14731
- <div class="flex flex-col w-full px-4 mb-2">
14732
- <textarea
14733
- .value=${this.value}
14734
- ?disabled=${this.disabled}
14735
- @input=${this.handleTextareaChange}
14736
- 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" : ""}"
14737
- placeholder="${this.showPlaceholder ? `Enter ${this.label.toLowerCase()}` : ""}"
14738
- ></textarea>
14739
- </div>
14740
- </div>
14741
- `;
14742
- case "checkbox": return html`
14743
- <div class="${this.bordered ? checkboxInputTall : checkboxInputNormal}">
14744
- <div class="${label}">
14745
- ${this.required ? html`<span class="text-(--axebow-error)">*</span>` : ""}
14746
- <span class="text-(--axebow-gray)"> ${this.label}</span>
14747
- </div>
14748
- <div class="flex flex-row gap-4 w-full pl-4 pr-3 ${this.bordered && this.password ? "pb-1" : ""}">
14749
- ${this.options.map((option) => html`
14750
- <sl-checkbox
14751
- size="medium"
14752
- ?disabled=${this.disabled}
14753
- ?checked=${option === this.value}
14754
- @sl-change=${this.handleCheckboxChange}
14755
- class="${this.disabled ? "cursor-not-allowed" : ""}"
14756
- >${option}</sl-checkbox
14757
- >
14758
- `)}
14759
- </div>
14760
- </div>
14761
- `;
14762
- case "select":
14763
- if (this.compact) return html`
14764
- <div class="flex flex-col mx-3 my-2 compact-mode ${disabledStyles}">
14765
- <div class="flex flex-row gap-2 mb-1 pl-1">
14766
- ${this.required ? html`<span class="text-(--axebow-error)">*</span>` : ""}
14767
- <span class="text-(--axebow-gray)">${this.label}</span>
14768
- </div>
14769
- <div class="w-full mx-auto">
14770
- <sl-select
14771
- value=${this.value}
14772
- @sl-change=${this.handleSelectChange}
14773
- ?clearable=${this.clearable}
14774
- ?disabled=${this.disabled}
14775
- class="${this.disabled ? "cursor-not-allowed" : ""}"
14776
- >
14777
- ${this._showCopyAction && this.value ? html`
14778
- <div
14779
- slot="suffix"
14780
- class="flex items-center justify-center p-1 cursor-pointer transition-transform duration-200 ease-in-out hover:scale-110 active:scale-95"
14781
- @click=${(e) => e.stopPropagation()}
14782
- @mousedown=${(e) => e.stopPropagation()}
14783
- @pointerdown=${(e) => e.stopPropagation()}
14784
- >
14785
- <slot name="copy-action"></slot>
14786
- </div>
14787
- ` : ""}
14788
- ${this.options.map((option) => html`<sl-option value=${option}>${option}</sl-option>`)}
14789
- </sl-select>
14790
- </div>
14791
- </div>
14792
- `;
14793
- if (this.bordered) return html`
14794
- <div
14795
- class="flex flex-col rounded-lg mx-2 mb-4 items-start justify-center px-4 py-1 ${borderClass} transition-all${disabledStyles}"
14796
- >
14797
- <div class="flex flex-row gap-2 mt-1">
14798
- ${this.required ? html`<span class="text-(--axebow-error)">*</span>` : ""}
14799
- <span class="text-(--axebow-gray)">${this.label}</span>
14800
- </div>
14801
- <sl-select
14802
- value=${this.value}
14803
- @sl-change=${this.handleSelectChange}
14804
- ?clearable=${this.clearable}
14805
- ?disabled=${this.disabled}
14806
- class="w-full mb-1 ${this.disabled ? "cursor-not-allowed" : ""}"
14807
- >
14808
- ${this._showCopyAction && this.value ? html`
14809
- <div
14810
- slot="suffix"
14811
- class="flex items-center justify-center p-1 cursor-pointer transition-transform duration-200 ease-in-out hover:scale-110 active:scale-95"
14812
- @click=${(e) => e.stopPropagation()}
14813
- @mousedown=${(e) => e.stopPropagation()}
14814
- @pointerdown=${(e) => e.stopPropagation()}
14815
- >
14816
- <slot name="copy-action"></slot>
14817
- </div>
14818
- ` : ""}
14819
- ${this.options.map((option) => html`<sl-option value=${option}>${option}</sl-option>`)}
14820
- </sl-select>
14821
- </div>
14822
- `;
14823
- return html`
14824
- <div
14825
- class="flex flex-col rounded-lg border border-(--axebow-light-gray) mx-2 mb-4 h-16 items-start justify-between transition-all ${disabledStyles}"
14826
- >
14827
- <div class="${label}">
14828
- ${this.required ? html`<span class="text-(--axebow-error)">*</span>` : ""}
14829
- <span class="text-(--axebow-gray)"> ${this.label}</span>
14830
- </div>
14831
- <div class="mb-2 w-full px-4">
14832
- <sl-select
14833
- value=${this.value}
14834
- @sl-change=${this.handleSelectChange}
14835
- filled
14836
- ?clearable=${this.clearable}
14837
- ?disabled=${this.disabled}
14838
- class="${this.disabled ? "cursor-not-allowed" : ""}"
14839
- >
14840
- ${this.options.map((option) => html`<sl-option value=${option}>${option}</sl-option>`)}
14841
- </sl-select>
14842
- </div>
14843
- </div>
14844
- `;
14845
- case "cert": {
14846
- 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>`];
14847
- if (this._showCopyAction) certActions.push(html`
14848
- <slot
14849
- name="copy-action"
14850
- @click=${(e) => e.preventDefault()}
14851
- @mousedown=${(e) => e.preventDefault()}
14852
- ></slot>
14853
- `);
14854
- return html`
14855
- <div class="${checkboxInputNormal}">
14856
- <div class="${label}">
14857
- ${this.required ? html`<span class="text-(--axebow-error)">*</span>` : ""}
14858
- <span class="text-(--axebow-gray)"> ${this.label}</span>
14859
- </div>
14860
- <div class="flex flex-row items-center w-full pl-4">
14861
- <p class="flex-1 truncate">${this.value}</p>
14862
- ${this.renderActions(certActions)}
14863
- </div>
14864
- </div>
14865
- `;
14866
- }
14867
- default: return html`<p>${this.noTypeSelectedText}</p>`;
14868
- }
14869
- }
14870
- handleCheckboxChange(e) {
14871
- if (this.disabled) return;
14872
- const selectedValue = e.target.textContent?.trim() ?? "";
14873
- this.value = selectedValue;
14874
- if (this.onChange) this.onChange(selectedValue);
14875
- }
14876
- handleSelectChange(e) {
14877
- if (this.disabled) return;
14878
- const selectedValue = e.target.value;
14879
- this.value = selectedValue;
14880
- if (this.onChange) this.onChange(selectedValue);
14881
- }
14882
- handleInputChange(e) {
14883
- if (this.disabled) return;
14884
- const newValue = e.target.value;
14885
- this.value = newValue;
14886
- if (this.onChange) this.onChange(newValue);
14887
- }
14888
- handleTextareaChange(e) {
14889
- if (this.disabled) return;
14890
- const target = e.target;
14891
- const newValue = target.value;
14892
- const maxHeight = 120;
14893
- target.style.height = "auto";
14894
- const newHeight = Math.min(target.scrollHeight, maxHeight);
14895
- target.style.height = `${newHeight}px`;
14896
- this.value = newValue;
14897
- if (this.onChange) this.onChange(newValue);
14898
- }
14899
- };
14900
- __decorate([property({ type: Boolean })], AxebowBoxedInput.prototype, "required", void 0);
14901
- __decorate([property({ type: String })], AxebowBoxedInput.prototype, "label", void 0);
14902
- __decorate([property({ type: String })], AxebowBoxedInput.prototype, "type", void 0);
14903
- __decorate([property({ attribute: false })], AxebowBoxedInput.prototype, "options", void 0);
14904
- __decorate([property({ type: String })], AxebowBoxedInput.prototype, "value", void 0);
14905
- __decorate([property({ type: Number })], AxebowBoxedInput.prototype, "maxlength", void 0);
14906
- __decorate([property({ attribute: false })], AxebowBoxedInput.prototype, "onChange", void 0);
14907
- __decorate([property({ attribute: false })], AxebowBoxedInput.prototype, "onCopy", void 0);
14908
- __decorate([property({
14909
- type: Boolean,
14910
- attribute: false
14911
- })], AxebowBoxedInput.prototype, "disabled", void 0);
14912
- __decorate([property({ type: Boolean })], AxebowBoxedInput.prototype, "clearable", void 0);
14913
- __decorate([property({ type: Boolean })], AxebowBoxedInput.prototype, "compact", void 0);
14914
- __decorate([property({ type: Boolean })], AxebowBoxedInput.prototype, "password", void 0);
14915
- __decorate([property({ type: Boolean })], AxebowBoxedInput.prototype, "showPlaceholder", void 0);
14916
- __decorate([property({ type: Boolean })], AxebowBoxedInput.prototype, "bordered", void 0);
14917
- __decorate([property({ type: Boolean })], AxebowBoxedInput.prototype, "copyable", void 0);
14918
- __decorate([property({ type: String })], AxebowBoxedInput.prototype, "noTypeSelectedText", void 0);
14919
- __decorate([state()], AxebowBoxedInput.prototype, "showPassword", void 0);
14920
- AxebowBoxedInput = __decorate([customElement("axebow-boxed-input")], AxebowBoxedInput);
14921
- //#endregion
14922
- //#region src/components/axebow-pem-dialog/axebow-pem-dialog.ts
14923
- var AxebowPemDialog = class AxebowPemDialog extends LitElement {
14924
- constructor(..._args) {
14925
- super(..._args);
14926
- this.open = false;
14927
- this.title = "";
14928
- this.placeholder = "-----BEGIN CERTIFICATE-----\n...\n-----END CERTIFICATE-----";
14929
- this.value = "";
14930
- this.fileName = "";
14931
- this.noteText = "";
14932
- this.fileContentLabel = "";
14933
- this.downloadTooltip = "";
14934
- this.copyLabel = "";
14935
- this.copyTooltip = "";
14936
- this.copiedText = "";
14937
- this.orUploadText = "";
14938
- this.acceptedFormatText = "";
14939
- this.saveLabel = "";
14940
- this.goBackLabel = "";
14941
- this._internalValue = "";
14942
- this._internalFileName = "";
14943
- }
14944
- static {
14945
- this.styles = [unsafeCSS(tailwind_default), axebowTheme];
14946
- }
14947
- willUpdate(changed) {
14948
- const dialogJustOpened = changed.has("open") && this.open;
14949
- if (changed.has("value") || dialogJustOpened) this._internalValue = this.value;
14950
- if (changed.has("fileName") || dialogJustOpened) this._internalFileName = this.fileName;
14951
- }
14952
- get _hasContent() {
14953
- return !!this._internalValue;
14954
- }
14955
- _handleConfirm() {
14956
- this.dispatchEvent(new CustomEvent("pem-confirm", {
14957
- detail: {
14958
- value: this._internalValue,
14959
- fileName: this._internalFileName
14960
- },
14961
- bubbles: true,
14962
- composed: true
14963
- }));
14964
- }
14965
- _handleClose() {
14966
- this.dispatchEvent(new CustomEvent("pem-close", {
14967
- bubbles: true,
14968
- composed: true
14969
- }));
14970
- }
14971
- _handleDownload() {
14972
- const blob = new Blob([this._internalValue], { type: "text/plain" });
14973
- const url = URL.createObjectURL(blob);
14974
- const a = document.createElement("a");
14975
- a.href = url;
14976
- a.download = this._internalFileName || "certificate.pem";
14977
- a.click();
14978
- URL.revokeObjectURL(url);
14979
- }
14980
- async _handleFileUpload(e) {
14981
- const input = e.target;
14982
- const file = input.files?.[0];
14983
- if (!file) return;
14984
- this._internalFileName = file.name;
14985
- this._internalValue = (await file.text()).trim();
14986
- input.value = "";
14987
- this.requestUpdate();
14988
- }
14989
- render() {
14990
- return html`
14991
- <axebow-dialog
14992
- .open=${this.open}
14993
- dialogTitle=${this.title}
14994
- type="custom"
14995
- canClose
14996
- .onClose=${() => this._handleClose()}
14997
- >
14998
- <div slot="body" class="flex flex-col gap-4" style="min-width: 420px;">
14999
- <p class="text-sm m-0">${this.noteText}</p>
15000
- <div class="flex flex-col gap-1">
15001
- <div class="flex flex-row justify-between items-center">
15002
- <div class="flex items-center gap-1">
15003
- <span class="text-[var(--axebow-error)] text-sm">*</span>
15004
- <span class="text-sm font-bold">${this.fileContentLabel}</span>
15005
- </div>
15006
- ${this._hasContent ? html`
15007
- <div class="flex items-center gap-2">
15008
- <div
15009
- class="cursor-pointer flex items-center gap-1"
15010
- title="${this.downloadTooltip}"
15011
- @click=${this._handleDownload}
15012
- >
15013
- <axebow-icon
15014
- iconName="download_for_offline"
15015
- iconColor="var(--axebow-tertiary)"
15016
- size="md"
15017
- ></axebow-icon>
15018
- </div>
15019
- <axebow-copy-icon
15020
- .value=${this._internalValue}
15021
- label="${this.copyLabel}"
15022
- copyTooltip="${this.copyTooltip}"
15023
- copiedText="${this.copiedText}"
15024
- ></axebow-copy-icon>
15025
- </div>
15026
- ` : ""}
15027
- </div>
15028
- <textarea
15029
- .value=${live(this._internalValue)}
15030
- @input=${(e) => {
15031
- this._internalValue = e.target.value;
15032
- }}
15033
- rows="8"
15034
- placeholder=${this.placeholder}
15035
- 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;"
15036
- @focus=${(e) => {
15037
- e.target.style.borderColor = "black";
15038
- }}
15039
- @blur=${(e) => {
15040
- e.target.style.borderColor = "var(--axebow-border-gray)";
15041
- }}
15042
- ></textarea>
15043
- </div>
15044
- <span class="text-sm font-bold">${this.orUploadText}</span>
15045
-
15046
- <div class="flex items-center justify-between gap-3">
15047
- <label
15048
- class="flex items-center gap-2 cursor-pointer px-3 py-1.5 rounded-lg transition-colors"
15049
- style="border: 1px solid var(--axebow-border-gray); background: white;"
15050
- @mouseenter=${(e) => {
15051
- e.currentTarget.style.borderColor = "black";
15052
- }}
15053
- @mouseleave=${(e) => {
15054
- e.currentTarget.style.borderColor = "var(--axebow-border-gray)";
15055
- }}
15056
- >
15057
- <axebow-icon iconName="cloud_upload" iconColor="var(--axebow-tertiary)" size="md"></axebow-icon>
15058
- <span
15059
- class="text-sm ${this._internalFileName ? "text-black" : "text-[var(--axebow-gray)]"}"
15060
- style="white-space: nowrap;"
15061
- >
15062
- ${this._internalFileName ? this._internalFileName : this.acceptedFormatText}
15063
- </span>
15064
- <input
15065
- type="file"
15066
- accept=".pem,.crt,.key,.cer"
15067
- style="display: none;"
15068
- @change=${this._handleFileUpload}
15069
- />
15070
- </label>
15071
-
15072
- <div class="flex items-center gap-2">
15073
- <axebow-button
15074
- variant="primary"
15075
- size="medium"
15076
- ?disabled=${!this._hasContent}
15077
- @click=${this._handleConfirm}
15078
- >
15079
- ${this.saveLabel}
15080
- </axebow-button>
15081
- <axebow-button variant="primary" outline size="medium" @click=${this._handleClose}
15082
- >${this.goBackLabel}</axebow-button
15083
- >
15084
- </div>
15085
- </div>
15086
- </div>
15087
- </axebow-dialog>
15088
- `;
15089
- }
15090
- };
15091
- __decorate([property({ type: Boolean })], AxebowPemDialog.prototype, "open", void 0);
15092
- __decorate([property({ type: String })], AxebowPemDialog.prototype, "title", void 0);
15093
- __decorate([property({ type: String })], AxebowPemDialog.prototype, "placeholder", void 0);
15094
- __decorate([property({ type: String })], AxebowPemDialog.prototype, "value", void 0);
15095
- __decorate([property({ type: String })], AxebowPemDialog.prototype, "fileName", void 0);
15096
- __decorate([property({ type: String })], AxebowPemDialog.prototype, "noteText", void 0);
15097
- __decorate([property({ type: String })], AxebowPemDialog.prototype, "fileContentLabel", void 0);
15098
- __decorate([property({ type: String })], AxebowPemDialog.prototype, "downloadTooltip", void 0);
15099
- __decorate([property({ type: String })], AxebowPemDialog.prototype, "copyLabel", void 0);
15100
- __decorate([property({ type: String })], AxebowPemDialog.prototype, "copyTooltip", void 0);
15101
- __decorate([property({ type: String })], AxebowPemDialog.prototype, "copiedText", void 0);
15102
- __decorate([property({ type: String })], AxebowPemDialog.prototype, "orUploadText", void 0);
15103
- __decorate([property({ type: String })], AxebowPemDialog.prototype, "acceptedFormatText", void 0);
15104
- __decorate([property({ type: String })], AxebowPemDialog.prototype, "saveLabel", void 0);
15105
- __decorate([property({ type: String })], AxebowPemDialog.prototype, "goBackLabel", void 0);
15106
- __decorate([state()], AxebowPemDialog.prototype, "_internalValue", void 0);
15107
- __decorate([state()], AxebowPemDialog.prototype, "_internalFileName", void 0);
15108
- AxebowPemDialog = __decorate([customElement("axebow-pem-dialog")], AxebowPemDialog);
15109
- //#endregion
15110
- //#region src/components/axebow-plan-providers-modal/axebow-plan-providers-modal.ts
15111
- var AxebowPlanProvidersModal = class AxebowPlanProvidersModal extends LitElement {
15112
- constructor(..._args) {
15113
- super(..._args);
15114
- this.plansProviders = [];
15115
- this.open = false;
15116
- this.title = "";
15117
- this.description = "";
15118
- this.createPlanLabel = "";
15119
- this.selectedPlanProvider = null;
15120
- }
15121
- static {
15122
- this.styles = [unsafeCSS(tailwind_default), axebowTheme];
15123
- }
15124
- _handleSelect(providerName) {
15125
- this.selectedPlanProvider = providerName;
15126
- }
15127
- _handleClose() {
15128
- this.open = false;
15129
- this.selectedPlanProvider = null;
15130
- this.dispatchEvent(new CustomEvent("close"));
15131
- }
15132
- _handleConfirm() {
15133
- if (!this.selectedPlanProvider) return;
15134
- this.dispatchEvent(new CustomEvent("confirm", { detail: { providerName: this.selectedPlanProvider } }));
15135
- this._handleClose();
15136
- }
15137
- render() {
15138
- return html`
15139
- <axebow-modals-confirmation
15140
- .open=${this.open}
15141
- severity="Neutral"
15142
- intent="Decisional"
15143
- popUpTittle="${this.title}"
15144
- .showIconOnTitle=${false}
15145
- .showForm=${true}
15146
- .showFooter=${true}
15147
- .showSecondaryCTA=${false}
15148
- .showPrimaryCTA=${true}
15149
- primaryButtonText="${this.createPlanLabel}"
15150
- .primaryButtonDisabled=${!this.selectedPlanProvider}
15151
- .canClose=${true}
15152
- @axebow-close=${() => this._handleClose()}
15153
- @axebow-confirm=${() => this._handleConfirm()}
15154
- >
15155
- <div slot="form" class="flex flex-col gap-4">
15156
- <p class="m-0 text-black">${unsafeHTML(this.description)}</p>
15157
- <div class="flex flex-col gap-3">
15158
- ${this.plansProviders.map((provider) => html`
15159
- <label class="flex items-center gap-2 cursor-pointer">
15160
- <input
15161
- type="radio"
15162
- name="planProvider"
15163
- value="${provider.name}"
15164
- .checked=${this.selectedPlanProvider === provider.name}
15165
- @change=${() => this._handleSelect(provider.name)}
15166
- class="accent-(--axebow-tertiary) w-4 h-4"
15167
- />
15168
- <span class="font-semibold">${provider.name}</span>
15169
- </label>
15170
- `)}
15171
- </div>
15172
- </div>
15173
- </axebow-modals-confirmation>
15174
- `;
15175
- }
15176
- };
15177
- __decorate([property({ type: Array })], AxebowPlanProvidersModal.prototype, "plansProviders", void 0);
15178
- __decorate([property({
15179
- type: Boolean,
15180
- reflect: true
15181
- })], AxebowPlanProvidersModal.prototype, "open", void 0);
15182
- __decorate([property({ type: String })], AxebowPlanProvidersModal.prototype, "title", void 0);
15183
- __decorate([property({ type: String })], AxebowPlanProvidersModal.prototype, "description", void 0);
15184
- __decorate([property({ type: String })], AxebowPlanProvidersModal.prototype, "createPlanLabel", void 0);
15185
- __decorate([state()], AxebowPlanProvidersModal.prototype, "selectedPlanProvider", void 0);
15186
- AxebowPlanProvidersModal = __decorate([customElement("axebow-plan-providers-modal")], AxebowPlanProvidersModal);
15187
- //#endregion
15188
- //#region src/components/axebow-delete-data-popup/axebow-delete-data-popup.ts
15189
- var AxebowDeleteDataPopup = class AxebowDeleteDataPopup extends LitElement {
15190
- constructor(..._args) {
15191
- super(..._args);
15192
- this.open = false;
15193
- this.title = "";
15194
- this.description = "";
15195
- this.icon = "";
15196
- this.iconColor = "danger";
15197
- this.validationPlaceholder = "";
15198
- this.validationLabel = "";
15199
- this.validationHelpText = "";
15200
- this.buttonVariant = "danger";
15201
- this.buttonLabel = "";
15202
- this.canCancel = true;
15203
- this.cancelLabel = "";
15204
- this.typePrefixText = "";
15205
- this.typeSuffixText = "";
15206
- this._inputValue = "";
15207
- }
15208
- static {
15209
- this.styles = [
15210
- unsafeCSS(tailwind_default),
15211
- axebowTheme,
15212
- css`
15213
- :host {
15214
- display: block;
15215
- }
15216
- axebow-input {
15217
- width: 100%;
15218
- }
15219
- `
15220
- ];
15221
- }
15222
- _handleInput(e) {
15223
- const target = e.target;
15224
- this._inputValue = target?.value ?? "";
15225
- }
15226
- get _isDeleteEnabled() {
15227
- if (!this.validationValue) return true;
15228
- return this._inputValue === this.validationValue;
15229
- }
15230
- _handleClose() {
15231
- this._inputValue = "";
15232
- this.onClose?.();
15233
- this.dispatchEvent(new CustomEvent("close", {
15234
- bubbles: true,
15235
- composed: true
15236
- }));
15237
- }
15238
- _handleConfirm() {
15239
- this.onDelete?.();
15240
- this._handleClose();
15241
- }
15242
- get _iconColorVar() {
15243
- switch (this.iconColor) {
15244
- case "warning": return "var(--axebow-warning)";
15245
- case "primary": return "var(--axebow-tertiary)";
15246
- case "success": return "var(--axebow-success)";
15247
- case "danger": return "var(--axebow-error)";
15248
- default: return "var(--axebow-primary)";
15249
- }
15250
- }
15251
- render() {
15252
- const isDestructive = this.buttonVariant === "danger";
15253
- const severity = isDestructive ? "Destructive" : "Neutral";
15254
- const confirmIcon = this.icon || (isDestructive ? "error" : "info");
15255
- return html`
15256
- <axebow-modals-confirmation
15257
- .open=${this.open}
15258
- severity=${severity}
15259
- intent="Decisional"
15260
- .popUpTittle=${this.title}
15261
- textBody=""
15262
- iconName=${confirmIcon}
15263
- iconColor=${this._iconColorVar}
15264
- .showForm=${false}
15265
- .showFooter=${true}
15266
- .showSecondaryCTA=${this.canCancel}
15267
- .showPrimaryCTA=${true}
15268
- .secondaryButtonText=${this.cancelLabel}
15269
- .primaryButtonText=${this.buttonLabel}
15270
- .primaryButtonDisabled=${!this._isDeleteEnabled}
15271
- .canClose=${true}
15272
- .entityName=${this.validationValue || "item"}
15273
- @axebow-close=${() => this._handleClose()}
15274
- @axebow-cancel=${() => this._handleClose()}
15275
- @axebow-confirm=${() => this._handleConfirm()}
15276
- >
15277
- <div slot="body" class="flex flex-col gap-4">
15278
- <slot>
15279
- ${this.description ? html`<p class="m-0 text-black font-normal leading-relaxed">${this.description}</p>` : ""}
15280
- </slot>
15281
- ${this.validationValue ? html`
15282
- <div class="flex flex-col gap-2">
15283
- <label class="font-semibold text-black m-0 flex items-center gap-1">
15284
- <span class="text-[#E93A3A] font-bold">*</span>
15285
- <p>
15286
- ${this.typePrefixText}<span class="text-[#344966] font-bold">${this.validationValue}</span
15287
- >${this.typeSuffixText}
15288
- </p>
15289
- </label>
15290
- <axebow-input
15291
- controlType="input"
15292
- ?compact=${true}
15293
- .placeholder=${this.validationPlaceholder || this.validationValue}
15294
- .value=${this._inputValue}
15295
- .callback=${(e) => this._handleInput(e)}
15296
- @keydown=${(e) => {
15297
- if (e.key === "Enter" && this._isDeleteEnabled) this._handleConfirm();
15298
- }}
15299
- ></axebow-input>
15300
- </div>
15301
- ` : ""}
15302
- </div>
15303
- </axebow-modals-confirmation>
15304
- `;
15305
- }
15306
- };
15307
- __decorate([property({ type: Boolean })], AxebowDeleteDataPopup.prototype, "open", void 0);
15308
- __decorate([property({ type: String })], AxebowDeleteDataPopup.prototype, "title", void 0);
15309
- __decorate([property({ type: String })], AxebowDeleteDataPopup.prototype, "description", void 0);
15310
- __decorate([property({ type: String })], AxebowDeleteDataPopup.prototype, "icon", void 0);
15311
- __decorate([property({ type: String })], AxebowDeleteDataPopup.prototype, "iconColor", void 0);
15312
- __decorate([property({ type: String })], AxebowDeleteDataPopup.prototype, "validationValue", void 0);
15313
- __decorate([property({ type: String })], AxebowDeleteDataPopup.prototype, "validationPlaceholder", void 0);
15314
- __decorate([property({ type: String })], AxebowDeleteDataPopup.prototype, "validationLabel", void 0);
15315
- __decorate([property({ type: String })], AxebowDeleteDataPopup.prototype, "validationHelpText", void 0);
15316
- __decorate([property({ type: Function })], AxebowDeleteDataPopup.prototype, "onDelete", void 0);
15317
- __decorate([property({ type: Function })], AxebowDeleteDataPopup.prototype, "onClose", void 0);
15318
- __decorate([property({ type: String })], AxebowDeleteDataPopup.prototype, "buttonVariant", void 0);
15319
- __decorate([property({ type: String })], AxebowDeleteDataPopup.prototype, "buttonLabel", void 0);
15320
- __decorate([property({ type: Boolean })], AxebowDeleteDataPopup.prototype, "canCancel", void 0);
15321
- __decorate([property({ type: String })], AxebowDeleteDataPopup.prototype, "cancelLabel", void 0);
15322
- __decorate([property({ type: String })], AxebowDeleteDataPopup.prototype, "typePrefixText", void 0);
15323
- __decorate([property({ type: String })], AxebowDeleteDataPopup.prototype, "typeSuffixText", void 0);
15324
- __decorate([state()], AxebowDeleteDataPopup.prototype, "_inputValue", void 0);
15325
- AxebowDeleteDataPopup = __decorate([customElement("axebow-delete-data-popup")], AxebowDeleteDataPopup);
15326
- //#endregion
15327
- //#region src/components/axebow-learning-center/axebow-learning-center.ts
15328
- var AxebowLearningCenter = class AxebowLearningCenter extends LitElement {
15329
- static {
15330
- this.styles = [unsafeCSS(tailwind_default), css`
15331
- sl-carousel {
15332
- --slide-gap: 4px;
15333
- }
15334
- marketplace-card {
15335
- transition: transform 0.3s ease;
15336
- }
15337
- .marketplace-carousel::part(base) {
15338
- min-height: 320px;
15339
- gap: 0 4px;
15340
- }
15341
-
15342
- @media (max-width: 767px) {
15343
- sl-carousel {
15344
- --slide-gap: 8px;
15345
- }
15346
- sl-card::part(body) {
15347
- padding: 0;
15348
- }
15349
- }
15350
- `];
15351
- }
15352
- constructor() {
15353
- super();
15354
- this.items = [];
15355
- this.highlightedComponentsLabel = "";
15356
- this.marketplaceLabel = "";
15357
- this.expanded = false;
15358
- this.slidesPerPage = 3.2;
15359
- this.resizeHandler = () => {
15360
- this.updateCarouselSettings();
15361
- };
15362
- }
15363
- connectedCallback() {
15364
- super.connectedCallback();
15365
- this.updateCarouselSettings();
15366
- window.addEventListener("resize", this.resizeHandler);
15367
- }
15368
- disconnectedCallback() {
15369
- super.disconnectedCallback();
15370
- window.removeEventListener("resize", this.resizeHandler);
15371
- }
15372
- updateCarouselSettings() {
15373
- const width = window.innerWidth;
15374
- let newSlidesPerPage;
15375
- if (width >= 1536) newSlidesPerPage = 3.2;
15376
- else if (width >= 1280) newSlidesPerPage = 2.7;
15377
- else if (width >= 1024) newSlidesPerPage = 2.2;
15378
- else if (width >= 768) newSlidesPerPage = 1.8;
15379
- else if (width >= 640) newSlidesPerPage = 1.3;
15380
- else newSlidesPerPage = 1.1;
15381
- if (this.slidesPerPage !== newSlidesPerPage) this.slidesPerPage = newSlidesPerPage;
15382
- }
15383
- render() {
15384
- return html`
15385
- <sl-card class="w-full mb-4 rounded-sm flex flex-col gap-2">
15386
- <div class="flex items-center gap-4 max-[46.875rem]:gap-2 p-4 ${this.expanded ? "pb-0" : ""}">
15387
- <axebow-icon
15388
- class="rounded-sm cursor-pointer flex-shrink-0"
15389
- iconName="expand_all"
15390
- iconColor="var(--axebow-tertiary)"
15391
- @click="${() => this.expanded = !this.expanded}"
15392
- ></axebow-icon>
15393
- <p
15394
- class="text-[var(--axebow-primary)] font-bold text-base sm:text-lg lg:text-xl max-[46.875rem]:text-sm leading-tight"
15395
- >
15396
- ${this.highlightedComponentsLabel}
15397
- <span class="text-[var(--axebow-clickable-blue)] font-medium">@</span>
15398
- ${this.marketplaceLabel}
15399
- </p>
15400
- <axebow-icon iconName="deployed_code" class="ml-auto flex-shrink-0" size="xl"></axebow-icon>
15401
- </div>
15402
- ${this.expanded ? html`
15403
- <sl-carousel
15404
- class="marketplace-carousel w-full"
15405
- navigation
15406
- slides-per-page="${this.slidesPerPage}"
15407
- slides-per-move="1"
15408
- >
15409
- ${this.items.map((item) => html`
15410
- <sl-carousel-item class="flex justify-center items-center px-0.5 sm:px-1">
15411
- <marketplace-card .item=${item} class="block w-full origin-center"></marketplace-card>
15412
- </sl-carousel-item>
15413
- `)}
15414
- </sl-carousel>
15415
- ` : html``}
15416
- </sl-card>
15417
- `;
15418
- }
15419
- };
15420
- __decorate([property({ attribute: false })], AxebowLearningCenter.prototype, "items", void 0);
15421
- __decorate([property({ type: String })], AxebowLearningCenter.prototype, "highlightedComponentsLabel", void 0);
15422
- __decorate([property({ type: String })], AxebowLearningCenter.prototype, "marketplaceLabel", void 0);
15423
- __decorate([state()], AxebowLearningCenter.prototype, "expanded", void 0);
15424
- __decorate([state()], AxebowLearningCenter.prototype, "slidesPerPage", void 0);
15425
- AxebowLearningCenter = __decorate([customElement("axebow-learning-center")], AxebowLearningCenter);
15426
- //#endregion
15427
- //#region src/components/axebow-paginated-table/axebow-paginated-table.ts
15428
- var AxebowPaginatedTable = class AxebowPaginatedTable extends LitElement {
15429
- constructor(..._args) {
15430
- super(..._args);
15431
- this.data = [];
15432
- this.rowsPerPage = 10;
15433
- this.invoiceLabel = "";
15434
- this.downloadLabel = "";
15435
- this.currentPage = 1;
15436
- }
15437
- static {
15438
- this.styles = css`
15439
- table {
15440
- width: 100%;
15441
- border-collapse: collapse;
15442
- margin-bottom: 20px;
15443
- }
15444
-
15445
- th,
15446
- td {
15447
- padding: 8px;
15448
- text-align: center;
15449
- }
15450
-
15451
- th {
15452
- background-color: #f4f4f4;
15453
- }
15454
-
15455
- .pagination {
15456
- display: flex;
15457
- justify-content: center;
15458
- list-style-type: none;
15459
- padding: 0;
15460
- }
15461
-
15462
- .pagination li {
15463
- margin: 0 5px;
15464
- }
15465
-
15466
- .pagination button {
15467
- padding: 8px 12px;
15468
- border: 1px solid #ddd;
15469
- background-color: #fff;
15470
- cursor: pointer;
15471
- }
15472
-
15473
- .pagination button.active {
15474
- background-color: #007bff;
15475
- color: #fff;
15476
- border-color: #007bff;
15477
- }
15478
-
15479
- .pagination button:hover:not(.active) {
15480
- background-color: #ddd;
15481
- }
15482
- .invoice-container {
15483
- width: 100%;
15484
- display: flex;
15485
- gap: 32px;
15486
- align-items: center;
15487
- }
15488
- .invoice-card {
15489
- width: 100%;
15490
- }
15491
- .axebow-secondary-blue {
15492
- color: var(--axebow-tertiary);
15493
- }
15494
- .invoice-info-header {
15495
- display: flex;
15496
- flex-direction: row;
15497
- gap: 4px;
15498
- flex-grow: 1;
15499
- color: var(--axebow-black);
15500
- }
15501
- .download-button {
15502
- margin-left: auto;
15503
- }
15504
- .invoice-info {
15505
- display: flex;
15506
- flex-direction: column;
15507
- gap: 8px;
15508
- color: var(--axebow-secondary);
15509
- }
15510
- `;
15511
- }
15512
- get paginatedData() {
15513
- const start = (this.currentPage - 1) * this.rowsPerPage;
15514
- const end = start + this.rowsPerPage;
15515
- return this.data.slice(start, end);
15516
- }
15517
- get totalPages() {
15518
- return Math.ceil(this.data.length / this.rowsPerPage);
15519
- }
15520
- goToPage(page) {
15521
- if (page >= 1 && page <= this.totalPages) {
15522
- this.currentPage = page;
15523
- this.requestUpdate();
15524
- }
15525
- }
15526
- render() {
15527
- return html`
15528
- <table>
15529
- <thead></thead>
15530
- <tbody>
15531
- ${this.paginatedData.map((item) => html`
15532
- <tr>
15533
- <sl-card class="invoice-card">
15534
- <div class="invoice-container">
15535
- <sl-icon-button name="gear" class="axebow-secondary-blue"></sl-icon-button>
15536
- <div class="invoice-info">
15537
- <div class="invoice-info-header">
15538
- <span><span class="font-semibold">${item.customerName}</span></span>
15539
- <span>|</span>
15540
- <span><span class="font-semibold">CIF: ${item.customerCif}</span></span>
15541
- <span>|</span>
15542
- <span class="axebow-secondary-blue">${this.invoiceLabel} ${item.invoiceNumber}</span>
15543
- <span><span class="font-semibold">(${item.invoiceAmount} €)</span></span>
15544
- </div>
15545
- <span>${item.invoiceDocument}</span>
15546
- <span>${item.invoiceDate}</span>
15547
- </div>
15548
- <axebow-button variant="primary" outline class="download-button"
15549
- >${this.downloadLabel}</axebow-button
15550
- >
15551
- </div>
15552
- </sl-card>
15553
- </tr>
15554
- `)}
15555
- </tbody>
15556
- </table>
15557
- <ul class="pagination">
15558
- ${Array.from({ length: this.totalPages }, (_, i) => i + 1).map((page) => html`
15559
- <li>
15560
- <button class=${page === this.currentPage ? "active" : ""} @click=${() => this.goToPage(page)}>
15561
- ${page}
15562
- </button>
15563
- </li>
15564
- `)}
15565
- </ul>
15566
- `;
15567
- }
15568
- };
15569
- __decorate([property({ type: Array })], AxebowPaginatedTable.prototype, "data", void 0);
15570
- __decorate([property({ type: Number })], AxebowPaginatedTable.prototype, "rowsPerPage", void 0);
15571
- __decorate([property({ type: String })], AxebowPaginatedTable.prototype, "invoiceLabel", void 0);
15572
- __decorate([property({ type: String })], AxebowPaginatedTable.prototype, "downloadLabel", void 0);
15573
- __decorate([state()], AxebowPaginatedTable.prototype, "currentPage", void 0);
15574
- AxebowPaginatedTable = __decorate([customElement("axebow-paginated-table")], AxebowPaginatedTable);
15575
- //#endregion
15576
- //#region src/components/axebow-carousel/axebow-carousel.ts
15577
- var AxebowCarousel = class AxebowCarousel extends LitElement {
15578
- constructor(..._args) {
15579
- super(..._args);
15580
- this.data = [
15581
- {
15582
- title: "Slide 1",
15583
- content: "Slide 1 content",
15584
- logo: "logo1"
15585
- },
15586
- {
15587
- title: "Slide 2",
15588
- content: "Slide 2 content",
15589
- logo: "logo2"
15590
- },
15591
- {
15592
- title: "Slide 3",
15593
- content: "Slide 3 content",
15594
- logo: "logo3"
15595
- }
15596
- ];
15597
- this.type = "basic";
15598
- this.numSlides = 3;
15599
- this.title = "";
15600
- this.deployLabel = "";
15601
- this.learnMoreLabel = "";
15602
- }
15603
- static {
15604
- this.styles = [axebowTheme, css`
15605
- :host {
15606
- display: block;
15607
- }
15608
-
15609
- sl-carousel {
15610
- --slide-spacing: 8px;
15611
- --pagination-spacing: 8px;
15612
- }
15613
-
15614
- @media (max-width: 1200px) {
15615
- sl-carousel {
15616
- --slide-spacing: 6px;
15617
- --pagination-spacing: 6px;
15618
- }
15619
- }
15620
-
15621
- @media (max-width: 480px) {
15622
- sl-carousel {
15623
- --slide-spacing: 4px;
15624
- --pagination-spacing: 4px;
15625
- }
15626
- }
15627
- `];
15628
- }
15629
- render() {
15630
- return html`
15631
- <div>
15632
- <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
15633
- <sl-carousel navigation slides-per-page="${this.numSlides}" slides-per-move="1">
15634
- ${this.data.map((item) => html`
15635
- <sl-carousel-item class="py-2">
15636
- <sl-card
15637
- 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"
15638
- >
15639
- <div class="flex items-center mb-4">
15640
- <img
15641
- src="${item.logo}"
15642
- class="max-h-12 max-w-12 mr-3 rounded"
15643
- alt="${item.title} logo"
15644
- />
15645
- <div class="flex flex-col justify-between w-full">
15646
- <h3 class="font-bold text-(--axebow-black)">${item.title}</h3>
15647
- ${this.type === "extra" ? html` <div
15648
- class="flex justify-between items-center text-sm text-(--axebow-secondary) mt-1 w-full"
15649
- >
15650
- <div class="flex items-center">
15651
- <axebow-icon
15652
- iconName="memory"
15653
- iconColor="var(--axebow-secondary)"
15654
- size="md"
15655
- class="mr-1"
15656
- ></axebow-icon>
15657
- <span class="mr-2">${item.cpu || "N/A"} |</span>
15658
- <axebow-icon
15659
- iconName="memory_alt"
15660
- rotate="90"
15661
- iconColor="var(--axebow-secondary)"
15662
- size="md"
15663
- class="mr-1"
15664
- ></axebow-icon>
15665
- <span class="mr-2">${item.storage || "N/A"}</span>
15666
- </div>
15667
- <span
15668
- class="bg-(--axebow-base) rounded px-2 py-0.5 text-sm text-(--axebow-secondary) border border-(--axebow-white) ml-auto"
15669
- >${item.version || "v0.0.0"}</span
15670
- >
15671
- </div>` : ""}
15672
- </div>
15673
- </div>
15674
-
15675
- <div
15676
- class="text-sm text-(--axebow-secondary) mb-4 text-left min-h-12 overflow-hidden text-ellipsis line-clamp-3 grow"
15677
- >
15678
- ${item.content}
15679
- </div>
15680
- <div class="flex justify-between items-center">
15681
- <axebow-button
15682
- variant="text"
15683
- class="flex items-center text-(--axebow-secondary) text-base bg-transparent border-none p-0 mt-auto"
15684
- @click=${() => this.dispatchEvent(new CustomEvent("deploy", {
15685
- detail: { name: item.title },
15686
- bubbles: true,
15687
- composed: true
15688
- }))}
15689
- >
15690
- <axebow-icon
15691
- iconName="sound_sampler"
15692
- slot="prefix"
15693
- iconColor="var(--axebow-tertiary)"
15694
- size="md"
15695
- class="mr-2 text-xl align-middle shrink-0"
15696
- ></axebow-icon>
15697
- ${this.deployLabel}
15698
- </axebow-button>
15699
- <a href="#" class="text-(--axebow-tertiary) no-underline hover:underline"
15700
- >${this.learnMoreLabel}</a
15701
- >
15702
- </div>
15703
- </sl-card>
15704
- </sl-carousel-item>
15705
- `)}
15706
- </sl-carousel>
15707
- </div>
15708
- </div>
15709
- `;
15710
- }
15711
- };
15712
- __decorate([property({ type: Array })], AxebowCarousel.prototype, "data", void 0);
15713
- __decorate([property({ type: String })], AxebowCarousel.prototype, "type", void 0);
15714
- __decorate([property({ type: Number })], AxebowCarousel.prototype, "numSlides", void 0);
15715
- __decorate([property({ type: String })], AxebowCarousel.prototype, "title", void 0);
15716
- __decorate([property({ type: String })], AxebowCarousel.prototype, "deployLabel", void 0);
15717
- __decorate([property({ type: String })], AxebowCarousel.prototype, "learnMoreLabel", void 0);
15718
- AxebowCarousel = __decorate([customElement("axebow-carousel")], AxebowCarousel);
15719
- //#endregion
15720
- //#region src/components/wizard-page-layout/wizard-page-layout.ts
15721
- var zoomLayoutStyles = css`
15722
- .zoom-page-container {
15723
- box-sizing: border-box;
15724
- width: 100%;
15725
- padding-inline-start: calc(max(0.938rem, (100% - 73.5rem * var(--zoom, 1)) * 0.5 - 2.5rem));
15726
- padding-inline-end: calc(max(6rem, (100% - 73.5rem * var(--zoom, 1)) * 0.5 + 2.5rem));
15727
- }
15728
-
15729
- .zoom-page-container.no-sidebar {
15730
- padding-inline-start: calc(max(6rem, (100% - 73.5rem * var(--zoom, 1)) * 0.5));
15731
- padding-inline-end: calc(max(6rem, (100% - 73.5rem * var(--zoom, 1)) * 0.5));
15732
- }
15733
-
15734
- .zoom-container {
15735
- width: 73.5rem;
15736
- zoom: var(--zoom, 1);
15737
- }
15738
- `;
15739
- var WizardPageLayout = class WizardPageLayout extends LitElement {
15740
- constructor(..._args) {
15741
- super(..._args);
15742
- this.mainPage = "";
15743
- this.secondaryPages = [];
15744
- this.showRequiredField = true;
15745
- this.requiredFieldLabel = "";
15746
- this.minHeight = "100%";
15747
- this.zoomLevel = 1;
15748
- this.hasSummary = true;
15749
- this.showDivider = true;
15750
- this.gapClass = "gap-[4%] lg:gap-7.75";
15751
- this.contentColumnClass = "lg:w-194.5";
15752
- this.errorMessage = "";
15753
- }
15754
- static {
15755
- this.styles = [
15756
- unsafeCSS(tailwind_default),
15757
- axebowTheme,
15758
- zoomLayoutStyles,
15759
- css`
15760
- :host {
15761
- display: block;
15762
- width: 100%;
15763
- }
15764
- `
15765
- ];
15766
- }
15767
- render() {
15768
- return html`
15769
- <div class="zoom-page-container no-sidebar" style="--zoom: ${this.zoomLevel};">
15770
- <div class="zoom-container flex flex-col" style="min-height: ${this.minHeight};">
15771
- ${this.hasSummary ? html`
15772
- <div class="flex w-full ${this.gapClass} lg:flex-row flex-col-reverse relative flex-1">
15773
- <div
15774
- class="w-full ${this.hasSummary ? this.contentColumnClass : ""} transition-all duration-300 flex flex-col flex-1 justify-between"
15775
- >
15776
- <div>
15777
- <axebow-breadcrumb-header
15778
- ?showSecondaryPages=${this.secondaryPages.length > 0}
15779
- .secondaryPages=${this.secondaryPages}
15780
- mainPage=${this.mainPage}
15781
- ?showRequiredField=${this.showRequiredField}
15782
- requiredFieldLabel=${this.requiredFieldLabel}
15783
- paddingBottom="1rem"
15784
- .onHomeClick=${this.onHomeClick}
15785
- ></axebow-breadcrumb-header>
15786
-
15787
- ${this.showDivider ? html`<axebow-divider margin="0"></axebow-divider>` : ""}
15788
- ${this.errorMessage ? html`
15789
- <div
15790
- class="flex items-center gap-2 p-3 rounded-md bg-(--axebow-error-light) text-(--axebow-error)"
15791
- >
15792
- <sl-icon name="exclamation-circle"></sl-icon>
15793
- <span>${this.errorMessage}</span>
15794
- </div>
15795
- ` : ""}
15796
-
15797
- <div class="flex-1">
15798
- <slot name="content"></slot>
15799
- </div>
15800
- </div>
15801
-
15802
- <slot name="footer"></slot>
15803
- </div>
15804
-
15805
- <div class="w-full lg:w-auto flex flex-col flex-1 h-full pt-11.75">
15806
- <slot name="summary"></slot>
15807
- </div>
15808
- </div>
15809
- ` : html`
15810
- <div class="flex flex-col flex-1 pb-0 justify-between">
15811
- <div>
15812
- <axebow-breadcrumb-header
15813
- ?showSecondaryPages=${this.secondaryPages.length > 0}
15814
- .secondaryPages=${this.secondaryPages}
15815
- mainPage=${this.mainPage}
15816
- ?showRequiredField=${this.showRequiredField}
15817
- requiredFieldLabel=${this.requiredFieldLabel}
15818
- paddingBottom="1rem"
15819
- .onHomeClick=${this.onHomeClick}
15820
- ></axebow-breadcrumb-header>
15821
-
15822
- ${this.showDivider ? html`<axebow-divider margin="0"></axebow-divider>` : ""}
15823
- ${this.errorMessage ? html`
15824
- <div
15825
- class="flex items-center gap-2 p-3 rounded-md bg-(--axebow-error-light) text-(--axebow-error)"
15826
- >
15827
- <sl-icon name="exclamation-circle"></sl-icon>
15828
- <span>${this.errorMessage}</span>
15829
- </div>
15830
- ` : ""}
15831
-
15832
- <div class="flex-1">
15833
- <slot name="content"></slot>
15834
- </div>
15835
- </div>
15836
-
15837
- <slot name="footer"></slot>
15838
- </div>
15839
- `}
15840
- </div>
15841
-
15842
- <slot name="dialogs"></slot>
15843
- </div>
15844
- `;
15845
- }
15846
- };
15847
- __decorate([property({ type: String })], WizardPageLayout.prototype, "mainPage", void 0);
15848
- __decorate([property({ type: Array })], WizardPageLayout.prototype, "secondaryPages", void 0);
15849
- __decorate([property({ type: Boolean })], WizardPageLayout.prototype, "showRequiredField", void 0);
15850
- __decorate([property({ type: String })], WizardPageLayout.prototype, "requiredFieldLabel", void 0);
15851
- __decorate([property({ attribute: false })], WizardPageLayout.prototype, "onHomeClick", void 0);
15852
- __decorate([property({ type: String })], WizardPageLayout.prototype, "minHeight", void 0);
15853
- __decorate([property({ type: Number })], WizardPageLayout.prototype, "zoomLevel", void 0);
15854
- __decorate([property({ type: Boolean })], WizardPageLayout.prototype, "hasSummary", void 0);
15855
- __decorate([property({ type: Boolean })], WizardPageLayout.prototype, "showDivider", void 0);
15856
- __decorate([property({ type: String })], WizardPageLayout.prototype, "gapClass", void 0);
15857
- __decorate([property({ type: String })], WizardPageLayout.prototype, "contentColumnClass", void 0);
15858
- __decorate([property({ type: String })], WizardPageLayout.prototype, "errorMessage", void 0);
15859
- WizardPageLayout = __decorate([customElement("wizard-page-layout")], WizardPageLayout);
15860
- //#endregion
15861
- //#region src/components/axebow-premium-plan-popup/axebow-premium-plan-popup.ts
15862
- var AxebowPremiumPlanPopup = class AxebowPremiumPlanPopup extends LitElement {
15863
- constructor(..._args) {
15864
- super(..._args);
15865
- this.open = false;
15866
- this.price = 6;
15867
- this.greatChoiceLabel = "";
15868
- this.premiumPlanLabel = "";
15869
- this.whatBestSuitsLabel = "";
15870
- this.perVcpuMonthLabel = "";
15871
- this.basedOnUsageLabel = "";
15872
- this.allPremiumFeaturesLabel = "";
15873
- this.credentialsWithLabel = "";
15874
- this.noVcpuLimitsLabel = "";
15875
- this.deployInLabel = "";
15876
- this.ownEnvironmentsLabel = "";
15877
- this.unlimitedLabel = "";
15878
- this.privateContainersLabel = "";
15879
- this.iaasBudgetLabel = "";
15880
- this.featureLabel = "";
15881
- this.draftsLabel = "";
15882
- this.support247Label = "";
15883
- this.withSlaLabel = "";
15884
- this.continueLabel = "";
15885
- this.anotherTimeLabel = "";
15886
- }
15887
- static {
15888
- this.styles = css`
15889
- sl-dialog::part(panel) {
15890
- border-radius: 0.375rem;
15891
- background-color: var(--axebow-success);
15892
- height: 80vh;
15893
- min-width: 300px;
15894
- max-width: 90%;
15895
- overflow: hidden;
15896
- padding: 0 1rem;
15897
- margin: 0;
15898
- }
15899
-
15900
- sl-dialog::part(header) {
15901
- text-align: center;
15902
- color: white;
15903
- padding: 0.15rem 1rem;
15904
- margin: 0;
15905
- }
15906
-
15907
- sl-dialog::part(body) {
15908
- padding: 0;
15909
- margin: 0;
15910
- }
15911
-
15912
- sl-dialog::part(footer) {
15913
- display: flex;
15914
- flex-direction: column;
15915
- gap: 0.25rem;
15916
- padding: 1rem;
15917
- }
15918
-
15919
- .plan-summary {
15920
- width: 100%;
15921
- height: 100%;
15922
- margin: 0;
15923
- padding: 0;
15924
- }
15925
-
15926
- .plan-summary h2 {
15927
- font-size: 1.25rem;
15928
- margin: 0;
15929
- }
15930
-
15931
- .price-container {
15932
- display: flex;
15933
- align-items: baseline;
15934
- margin: 0.5rem 0;
15935
- }
15936
-
15937
- .price-container h1 {
15938
- margin: 0;
15939
- font-size: 2.5rem;
15940
- margin-right: 0.5rem;
15941
- }
15942
-
15943
- .price-info h3 {
15944
- margin: 0;
15945
- }
15946
-
15947
- .text-with-icon {
15948
- display: flex;
15949
- align-items: center;
15950
- margin: 0.5rem 0;
15951
- }
15952
-
15953
- .text-with-icon p {
15954
- margin-top: 0;
15955
- margin-bottom: 0;
15956
- }
15957
-
15958
- .text-with-icon axebow-icon {
15959
- margin-right: 0.5rem;
15960
- }
15961
-
15962
- .popup-button {
15963
- width: 50%;
15964
- }
15965
-
15966
- .popup-buttons {
15967
- display: flex;
15968
- flex-direction: column;
15969
- gap: 1rem;
15970
- align-items: center;
15971
- }
15972
- `;
15973
- }
15974
- render() {
15975
- return html`
15976
- <sl-dialog
15977
- label="${this.greatChoiceLabel}"
15978
- ?open=${this.open}
15979
- @sl-after-hide=${this._onDialogClosed}
15980
- @sl-request-close=${this._onRequestClose}
15981
- class="summary"
15982
- >
15983
- <sl-card class="plan-summary">
15984
- <h2>${this.premiumPlanLabel}</h2>
15985
- <p>${this.whatBestSuitsLabel}</p>
15986
-
15987
- <div class="price-container">
15988
- <h1>${this.price},00</h1>
15989
- <div class="price-info">
15990
- <h3>${this.perVcpuMonthLabel}</h3>
15991
- <p>${this.basedOnUsageLabel}</p>
15992
- </div>
15993
- </div>
15994
-
15995
- <div class="text-with-icon">
15996
- <axebow-icon iconName="verified" iconColor="var(--axebow-tertiary)" size="md"></axebow-icon>
15997
- <h3>${this.allPremiumFeaturesLabel}</h3>
15998
- </div>
15999
-
16000
- <div class="text-with-icon">
16001
- <axebow-icon iconName="verified" iconColor="var(--axebow-gray)" size="md"></axebow-icon>
16002
- <p>
16003
- ${this.credentialsWithLabel}
16004
- <span class="font-semibold">${this.noVcpuLimitsLabel}</span>
16005
- </p>
16006
- </div>
16007
-
16008
- <div class="text-with-icon">
16009
- <axebow-icon iconName="verified" iconColor="var(--axebow-gray)" size="md"></axebow-icon>
16010
- <p>
16011
- ${this.deployInLabel}
16012
- <span class="font-semibold">${this.ownEnvironmentsLabel}</span>.
16013
- </p>
16014
- </div>
16015
-
16016
- <div class="text-with-icon">
16017
- <axebow-icon iconName="verified" iconColor="var(--axebow-gray)" size="md"></axebow-icon>
16018
- <p>
16019
- <span class="font-semibold">${this.unlimitedLabel}</span> ${this.privateContainersLabel}
16020
- </p>
16021
- </div>
16022
-
16023
- <div class="text-with-icon">
16024
- <axebow-icon iconName="verified" iconColor="var(--axebow-gray)" size="md"></axebow-icon>
16025
- <p><span class="font-semibold">${this.iaasBudgetLabel}</span> ${this.featureLabel}</p>
16026
- </div>
16027
-
16028
- <div class="text-with-icon">
16029
- <axebow-icon iconName="verified" iconColor="var(--axebow-gray)" size="md"></axebow-icon>
16030
- <p><span class="font-semibold">${this.unlimitedLabel}</span> ${this.draftsLabel}</p>
16031
- </div>
16032
-
16033
- <div class="text-with-icon">
16034
- <axebow-icon iconName="verified" iconColor="var(--axebow-gray)" size="md"></axebow-icon>
16035
- <p><span class="font-semibold">${this.support247Label}</span> ${this.withSlaLabel}</p>
16036
- </div>
16037
- <div class="popup-buttons">
16038
- <axebow-button class="popup-button" variant="primary" @click=${this._closeDialog}>
16039
- ${this.continueLabel}
16040
- </axebow-button>
16041
- <axebow-button class="popup-button" variant="default" @click=${this._closeDialog}>
16042
- ${this.anotherTimeLabel}
16043
- </axebow-button>
16044
- </div>
16045
- </sl-card>
16046
- </sl-dialog>
16047
- `;
16048
- }
16049
- _onRequestClose() {
16050
- this._closeDialog();
16051
- }
16052
- _closeDialog() {
16053
- this.open = false;
16054
- this.dispatchEvent(new CustomEvent("dialog-closed", {
16055
- detail: { open: this.open },
16056
- bubbles: true,
16057
- composed: true
16058
- }));
16059
- }
16060
- _onDialogClosed() {}
16061
- };
16062
- __decorate([property({
16063
- type: Boolean,
16064
- reflect: true
16065
- })], AxebowPremiumPlanPopup.prototype, "open", void 0);
16066
- __decorate([property({ type: Number })], AxebowPremiumPlanPopup.prototype, "price", void 0);
16067
- __decorate([property({ type: String })], AxebowPremiumPlanPopup.prototype, "greatChoiceLabel", void 0);
16068
- __decorate([property({ type: String })], AxebowPremiumPlanPopup.prototype, "premiumPlanLabel", void 0);
16069
- __decorate([property({ type: String })], AxebowPremiumPlanPopup.prototype, "whatBestSuitsLabel", void 0);
16070
- __decorate([property({ type: String })], AxebowPremiumPlanPopup.prototype, "perVcpuMonthLabel", void 0);
16071
- __decorate([property({ type: String })], AxebowPremiumPlanPopup.prototype, "basedOnUsageLabel", void 0);
16072
- __decorate([property({ type: String })], AxebowPremiumPlanPopup.prototype, "allPremiumFeaturesLabel", void 0);
16073
- __decorate([property({ type: String })], AxebowPremiumPlanPopup.prototype, "credentialsWithLabel", void 0);
16074
- __decorate([property({ type: String })], AxebowPremiumPlanPopup.prototype, "noVcpuLimitsLabel", void 0);
16075
- __decorate([property({ type: String })], AxebowPremiumPlanPopup.prototype, "deployInLabel", void 0);
16076
- __decorate([property({ type: String })], AxebowPremiumPlanPopup.prototype, "ownEnvironmentsLabel", void 0);
16077
- __decorate([property({ type: String })], AxebowPremiumPlanPopup.prototype, "unlimitedLabel", void 0);
16078
- __decorate([property({ type: String })], AxebowPremiumPlanPopup.prototype, "privateContainersLabel", void 0);
16079
- __decorate([property({ type: String })], AxebowPremiumPlanPopup.prototype, "iaasBudgetLabel", void 0);
16080
- __decorate([property({ type: String })], AxebowPremiumPlanPopup.prototype, "featureLabel", void 0);
16081
- __decorate([property({ type: String })], AxebowPremiumPlanPopup.prototype, "draftsLabel", void 0);
16082
- __decorate([property({ type: String })], AxebowPremiumPlanPopup.prototype, "support247Label", void 0);
16083
- __decorate([property({ type: String })], AxebowPremiumPlanPopup.prototype, "withSlaLabel", void 0);
16084
- __decorate([property({ type: String })], AxebowPremiumPlanPopup.prototype, "continueLabel", void 0);
16085
- __decorate([property({ type: String })], AxebowPremiumPlanPopup.prototype, "anotherTimeLabel", void 0);
16086
- AxebowPremiumPlanPopup = __decorate([customElement("axebow-premium-plan-popup")], AxebowPremiumPlanPopup);
16087
- //#endregion
16088
- //#region src/components/usage-chart/usage-chart.ts
16089
- var COLOR_PALETTE = [
16090
- {
16091
- borderColor: "#4F46E5",
16092
- backgroundColor: "rgba(79, 70, 229, 0.1)"
16093
- },
16094
- {
16095
- borderColor: "#F97316",
16096
- backgroundColor: "rgba(249, 115, 22, 0.1)"
16097
- },
16098
- {
16099
- borderColor: "#10B981",
16100
- backgroundColor: "rgba(16, 185, 129, 0.1)"
16101
- },
16102
- {
16103
- borderColor: "#8B5CF6",
16104
- backgroundColor: "rgba(139, 92, 246, 0.1)"
16105
- },
16106
- {
16107
- borderColor: "#EF4444",
16108
- backgroundColor: "rgba(239, 68, 68, 0.1)"
16109
- }
16110
- ];
16111
- function generateHslColor(index) {
16112
- const hue = index * 137.508 % 360;
16113
- const saturation = 70 + index % 3 * 10;
16114
- const lightness = 45 + index % 2 * 10;
16115
- return {
16116
- borderColor: `hsl(${hue}, ${saturation}%, ${lightness}%)`,
16117
- backgroundColor: `hsla(${hue}, ${saturation}%, ${lightness}%, 0.1)`
16118
- };
16119
- }
16120
- function getColorForDataset(index) {
16121
- return index < COLOR_PALETTE.length ? COLOR_PALETTE[index] : generateHslColor(index);
16122
- }
16123
- function buildDatasets(data, detailChart) {
16124
- return Object.entries(data).map(([key, dataArray], index) => {
16125
- const colors = getColorForDataset(index);
16126
- return {
16127
- label: key,
16128
- data: dataArray,
16129
- borderColor: colors.borderColor,
16130
- backgroundColor: colors.backgroundColor,
16131
- fill: true,
16132
- tension: .3,
16133
- borderWidth: 2,
16134
- pointRadius: detailChart ? 3 : 0,
16135
- pointHoverRadius: detailChart ? 6 : 0,
16136
- pointBackgroundColor: colors.borderColor,
16137
- pointBorderColor: "#ffffff",
16138
- pointBorderWidth: 2
16139
- };
16140
- });
16141
- }
16142
- function computeYMax(data, detailChart, yAxisMax) {
16143
- if (yAxisMax !== null && yAxisMax > 0) return detailChart ? yAxisMax * 1.15 : yAxisMax;
16144
- const allValues = Object.values(data).flat();
16145
- const maxDataValue = Math.max(...allValues, 0);
16146
- return detailChart ? void 0 : maxDataValue * 3;
16147
- }
16148
- function formatBandwidth(value) {
16149
- if (value === 0) return "0 bps";
16150
- if (value < 1e3) return `${value.toFixed(2)} bps`;
16151
- if (value < 1e6) return `${(value / 1e3).toFixed(2)} Kbps`;
16152
- if (value < 1e9) return `${(value / 1e6).toFixed(2)} Mbps`;
16153
- return `${(value / 1e9).toFixed(2)} Gbps`;
16154
- }
16155
- function formatMemory(value) {
16156
- if (value === 0) return "0 MB";
16157
- if (value < 1024) return `${value.toFixed(2)} MB`;
16158
- return `${(value / 1024).toFixed(2)} GB`;
16159
- }
16160
- function formatCpu(value) {
16161
- if (value === 0) return "0";
16162
- if (value < 1e-4) return value.toExponential(2);
16163
- if (value < .01) return value.toFixed(6);
16164
- if (value < 1) return value.toFixed(4);
16165
- return value.toFixed(2);
16166
- }
16167
- function formatByChartId(value, chartId) {
16168
- if (chartId.includes("RX") || chartId.includes("TX")) return formatBandwidth(value);
16169
- if (chartId.includes("Memory")) return formatMemory(value);
16170
- if (chartId.includes("CPU")) return formatCpu(value);
16171
- return value.toString();
16172
- }
16173
- function formatByLabel(value, label, chartId) {
16174
- const lowerLabel = label?.toLowerCase();
16175
- if (lowerLabel?.includes("cpu")) return formatCpu(value);
16176
- if (lowerLabel?.includes("memory")) return formatMemory(value);
16177
- if (lowerLabel?.includes("bandwidth") || chartId.includes("RX") || chartId.includes("TX")) return formatBandwidth(value);
16178
- return `${value}`;
16179
- }
16180
- function buildChartOptions(detailChart, chartId, yMax) {
16181
- return {
16182
- responsive: true,
16183
- maintainAspectRatio: false,
16184
- animation: false,
16185
- animations: {
16186
- colors: false,
16187
- x: false
16188
- },
16189
- transitions: { active: { animation: { duration: 0 } } },
16190
- interaction: {
16191
- intersect: false,
16192
- mode: "index"
16193
- },
16194
- plugins: {
16195
- legend: {
16196
- display: detailChart,
16197
- position: "bottom",
16198
- labels: {
16199
- usePointStyle: true,
16200
- padding: 15,
16201
- font: { size: 12 }
16202
- }
16203
- },
16204
- tooltip: {
16205
- enabled: detailChart,
16206
- backgroundColor: "rgba(0, 0, 0, 0.8)",
16207
- titleColor: "#ffffff",
16208
- bodyColor: "#ffffff",
16209
- borderColor: "#374151",
16210
- borderWidth: 1,
16211
- cornerRadius: 8,
16212
- displayColors: true,
16213
- callbacks: { label: (context) => {
16214
- const value = context.parsed.y ?? 0;
16215
- const label = context.dataset.label;
16216
- return `${label}: ${formatByLabel(value, label, chartId)}`;
16217
- } }
16218
- }
16219
- },
16220
- scales: {
16221
- x: {
16222
- display: detailChart,
16223
- grid: {
16224
- display: detailChart,
16225
- color: "rgba(0, 0, 0, 0.1)"
16226
- },
16227
- ticks: {
16228
- maxTicksLimit: 8,
16229
- font: { size: 11 },
16230
- color: "#6B7280"
16231
- }
16232
- },
16233
- y: {
16234
- display: detailChart,
16235
- beginAtZero: true,
16236
- max: yMax,
16237
- suggestedMax: yMax,
16238
- grid: {
16239
- display: detailChart,
16240
- color: "rgba(0, 0, 0, 0.1)"
16241
- },
16242
- ticks: {
16243
- maxTicksLimit: 5,
16244
- font: { size: 11 },
16245
- color: "#6B7280",
16246
- callback: (value) => formatByChartId(Number(value), chartId)
16247
- }
16248
- }
16249
- }
16250
- };
16251
- }
16252
- var UsageChart = class UsageChart extends LitElement {
16253
- constructor(..._args) {
16254
- super(..._args);
16255
- this.chartType = "line";
16256
- this.labels = [];
16257
- this.data = {};
16258
- this.chartId = "";
16259
- this.detailChart = false;
16260
- this.isFullScreen = false;
16261
- this.yAxisMax = null;
16262
- }
16263
- get _resolvedHeight() {
16264
- if (this.isFullScreen) return "90%";
16265
- if (this.detailChart) return "12rem";
16266
- return this.height ?? "4rem";
16267
- }
16268
- render() {
16269
- const datasets = buildDatasets(this.data, this.detailChart);
16270
- const yMax = computeYMax(this.data, this.detailChart, this.yAxisMax);
16271
- const options = buildChartOptions(this.detailChart, this.chartId, yMax);
16272
- return html`
16273
- <table-chart
16274
- chartType=${this.chartType}
16275
- chartId=${this.chartId}
16276
- .chartLabels=${this.labels}
16277
- .chartDatasets=${datasets}
16278
- .chartOptions=${options}
16279
- height=${this._resolvedHeight}
16280
- ></table-chart>
16281
- `;
16282
- }
16283
- };
16284
- __decorate([property({ type: String })], UsageChart.prototype, "chartType", void 0);
16285
- __decorate([property({ type: Array })], UsageChart.prototype, "labels", void 0);
16286
- __decorate([property({ type: Object })], UsageChart.prototype, "data", void 0);
16287
- __decorate([property({ type: String })], UsageChart.prototype, "chartId", void 0);
16288
- __decorate([property({ type: Boolean })], UsageChart.prototype, "detailChart", void 0);
16289
- __decorate([property({ type: Boolean })], UsageChart.prototype, "isFullScreen", void 0);
16290
- __decorate([property({ type: Number })], UsageChart.prototype, "yAxisMax", void 0);
16291
- __decorate([property({ type: String })], UsageChart.prototype, "height", void 0);
16292
- UsageChart = __decorate([customElement("usage-chart")], UsageChart);
16293
- //#endregion
16294
- //#region src/components/axebow-white-container/axebow-white-container.ts
16295
- var AxebowWhiteContainer = class AxebowWhiteContainer extends LitElement {
16296
- constructor(..._args) {
16297
- super(..._args);
16298
- this.padding = "p-8";
16299
- this.extraClasses = "";
16300
- this.fullWidth = false;
16301
- }
16302
- static {
16303
- this.styles = [unsafeCSS(tailwind_default), css`
16304
- :host {
16305
- display: block;
16306
- }
16307
- `];
16308
- }
16309
- render() {
16310
- const widthClass = this.fullWidth ? "w-full" : "";
16311
- return html`
16312
- <div class="rounded-lg bg-white ${this.padding} shadow-sm ${widthClass} ${this.extraClasses}">
16313
- <slot></slot>
16314
- </div>
16315
- `;
16316
- }
16317
- };
16318
- __decorate([property({ type: String })], AxebowWhiteContainer.prototype, "padding", void 0);
16319
- __decorate([property({ type: String })], AxebowWhiteContainer.prototype, "extraClasses", void 0);
16320
- __decorate([property({ type: Boolean })], AxebowWhiteContainer.prototype, "fullWidth", void 0);
16321
- AxebowWhiteContainer = __decorate([customElement("axebow-white-container")], AxebowWhiteContainer);
16322
- //#endregion
16323
- 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, 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, 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 };
13911
+ 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, AxebowIcon, AxebowInfrastructureCard, AxebowInput, AxebowInputBase, AxebowInstancesTable, AxebowLimitsCounter, AxebowManageHyperlinks, AxebowMarketplaceCard, AxebowModal, AxebowModalsConfirmation, AxebowMoreActions, AxebowNumberCard, AxebowNumbersSection, AxebowNumericInput, AxebowObservabilityContainer, AxebowPill, AxebowPlanSelectField, AxebowProgressBar, 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 };
16324
13912
 
16325
13913
  //# sourceMappingURL=index.js.map