@kumori/aurora-wui-components 0.0.265 → 0.0.266-dev4122.1

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 (38) hide show
  1. package/dist/components/axebow-channel-config-panel/axebow-channel-config-panel.d.ts +3 -0
  2. package/dist/components/axebow-channel-config-panel/axebow-channel-config-panel.d.ts.map +1 -1
  3. package/dist/components/axebow-expandable-card/axebow-expandable-card.d.ts +6 -0
  4. package/dist/components/axebow-expandable-card/axebow-expandable-card.d.ts.map +1 -0
  5. package/dist/components/axebow-instances-table/axebow-instances-table.d.ts +56 -0
  6. package/dist/components/axebow-instances-table/axebow-instances-table.d.ts.map +1 -0
  7. package/dist/components/axebow-modals-confirmation/axebow-modals-confirmation.d.ts +1 -0
  8. package/dist/components/axebow-modals-confirmation/axebow-modals-confirmation.d.ts.map +1 -1
  9. package/dist/components/axebow-observability-container/axebow-observability-container.d.ts +51 -0
  10. package/dist/components/axebow-observability-container/axebow-observability-container.d.ts.map +1 -0
  11. package/dist/components/axebow-progress-bar/axebow-progress-bar.d.ts +11 -0
  12. package/dist/components/axebow-progress-bar/axebow-progress-bar.d.ts.map +1 -0
  13. package/dist/components/axebow-refresh-period-panel/axebow-refresh-period-panel.d.ts +20 -0
  14. package/dist/components/axebow-refresh-period-panel/axebow-refresh-period-panel.d.ts.map +1 -0
  15. package/dist/components/axebow-role-card/axebow-role-card.d.ts +18 -0
  16. package/dist/components/axebow-role-card/axebow-role-card.d.ts.map +1 -0
  17. package/dist/components/axebow-role-container-dropdown/axebow-role-container-dropdown.d.ts +41 -0
  18. package/dist/components/axebow-role-container-dropdown/axebow-role-container-dropdown.d.ts.map +1 -0
  19. package/dist/components/axebow-service-detail-header/axebow-service-detail-header.d.ts +49 -0
  20. package/dist/components/axebow-service-detail-header/axebow-service-detail-header.d.ts.map +1 -0
  21. package/dist/components/axebow-tenants-table/axebow-tenants-table.d.ts +34 -0
  22. package/dist/components/axebow-tenants-table/axebow-tenants-table.d.ts.map +1 -0
  23. package/dist/components/axebow-time-range-panel/axebow-time-range-panel.d.ts +29 -0
  24. package/dist/components/axebow-time-range-panel/axebow-time-range-panel.d.ts.map +1 -0
  25. package/dist/components/axebow-undeploy-card/axebow-undeploy-card.d.ts +23 -0
  26. package/dist/components/axebow-undeploy-card/axebow-undeploy-card.d.ts.map +1 -0
  27. package/dist/components/axebow-underline-tab-selector/axebow-underline-tab-selector.d.ts +18 -0
  28. package/dist/components/axebow-underline-tab-selector/axebow-underline-tab-selector.d.ts.map +1 -0
  29. package/dist/components/axebow-usage-tooltip/axebow-usage-tooltip.d.ts +13 -0
  30. package/dist/components/axebow-usage-tooltip/axebow-usage-tooltip.d.ts.map +1 -0
  31. package/dist/components/cards/parts/axebow-card-version-selector.d.ts +4 -1
  32. package/dist/components/cards/parts/axebow-card-version-selector.d.ts.map +1 -1
  33. package/dist/index.d.ts +13 -0
  34. package/dist/index.d.ts.map +1 -1
  35. package/dist/index.js +2264 -548
  36. package/dist/index.js.map +1 -1
  37. package/dist/playground/schemas/axebow-modals-confirmation.schema.d.ts.map +1 -1
  38. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -26,6 +26,7 @@ import { Chart } from "chart.js/auto";
26
26
  import { unsafeHTML } from "lit/directives/unsafe-html.js";
27
27
  import "@shoelace-style/shoelace/dist/components/icon-button/icon-button.js";
28
28
  import "@shoelace-style/shoelace/dist/components/card/card.js";
29
+ import "@shoelace-style/shoelace/dist/components/progress-bar/progress-bar.js";
29
30
  //#region src/styles/axebow-theme.ts
30
31
  var axebowTheme = css`
31
32
  :host, .theme {
@@ -125,7 +126,7 @@ var STATUS_COLORS = {
125
126
  };
126
127
  //#endregion
127
128
  //#region src/styles/tailwind.css?inline
128
- 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-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-200: oklch(88.5% .062 18.334);\n --color-red-300: oklch(80.8% .114 19.571);\n --color-red-500: oklch(63.7% .237 25.331);\n --color-red-600: oklch(57.7% .245 27.325);\n --color-yellow-50: oklch(98.7% .026 102.212);\n --color-yellow-200: oklch(94.5% .129 101.54);\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-gray-900: oklch(21% .034 264.665);\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-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 --radius-2xl: 1rem;\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-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-117: 29.25rem;\n --spacing-120: 30rem;\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-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-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-full {\n top: 100%;\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-\\[calc\\(100\\%\\+10px\\)\\] {\n left: calc(100% + 10px);\n }\n\n .left-full {\n left: 100%;\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 .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-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-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-2 {\n margin-right: calc(var(--spacing) * 2);\n }\n\n .mr-4 {\n margin-right: calc(var(--spacing) * 4);\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-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-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 .\\!hidden {\n display: none !important;\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-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-8 {\n height: calc(var(--spacing) * 8);\n }\n\n .h-8\\.5 {\n height: calc(var(--spacing) * 8.5);\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-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\\.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-20 {\n height: calc(var(--spacing) * 20);\n }\n\n .h-21\\.25 {\n height: calc(var(--spacing) * 21.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-\\[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 .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-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\\/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-15\\.25 {\n width: calc(var(--spacing) * 15.25);\n }\n\n .w-16 {\n width: calc(var(--spacing) * 16);\n }\n\n .w-17 {\n width: calc(var(--spacing) * 17);\n }\n\n .w-18\\.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-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-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-35 {\n width: calc(var(--spacing) * 35);\n }\n\n .w-36 {\n width: calc(var(--spacing) * 36);\n }\n\n .w-40\\.25 {\n width: calc(var(--spacing) * 40.25);\n }\n\n .w-41 {\n width: calc(var(--spacing) * 41);\n }\n\n .w-47\\.75 {\n width: calc(var(--spacing) * 47.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-70\\.5 {\n width: calc(var(--spacing) * 70.5);\n }\n\n .w-71 {\n width: calc(var(--spacing) * 71);\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-100\\.5 {\n width: calc(var(--spacing) * 100.5);\n }\n\n .w-117 {\n width: var(--spacing-117);\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-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-194\\.25 {\n width: calc(var(--spacing) * 194.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-294 {\n width: calc(var(--spacing) * 294);\n }\n\n .w-\\[10\\.5rem\\] {\n width: 10.5rem;\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-194\\.25 {\n max-width: calc(var(--spacing) * 194.25);\n }\n\n .max-w-\\[23\\.75rem\\] {\n max-width: 23.75rem;\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-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-55 {\n min-width: calc(var(--spacing) * 55);\n }\n\n .min-w-56 {\n min-width: calc(var(--spacing) * 56);\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 .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 .-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-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-\\[2\\%\\] {\n gap: 2%;\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-1 {\n column-gap: var(--spacing);\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-0\\.75 {\n row-gap: calc(var(--spacing) * .75);\n }\n\n .gap-y-1 {\n row-gap: var(--spacing);\n }\n\n .self-end {\n align-self: flex-end;\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-2xl {\n border-radius: var(--radius-2xl);\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-sm {\n border-radius: var(--radius-sm);\n }\n\n .rounded-xl {\n border-radius: var(--radius-xl);\n }\n\n .rounded-t-lg {\n border-top-left-radius: var(--radius-lg);\n border-top-right-radius: var(--radius-lg);\n }\n\n .rounded-t-md {\n border-top-left-radius: var(--radius-md);\n border-top-right-radius: var(--radius-md);\n }\n\n .rounded-t-xl {\n border-top-left-radius: var(--radius-xl);\n border-top-right-radius: var(--radius-xl);\n }\n\n .rounded-l-xl {\n border-top-left-radius: var(--radius-xl);\n border-bottom-left-radius: var(--radius-xl);\n }\n\n .rounded-tl-xl {\n border-top-left-radius: var(--radius-xl);\n }\n\n .rounded-r-md {\n border-top-right-radius: var(--radius-md);\n border-bottom-right-radius: var(--radius-md);\n }\n\n .rounded-tr-xl {\n border-top-right-radius: var(--radius-xl);\n }\n\n .rounded-b-lg {\n border-bottom-right-radius: var(--radius-lg);\n border-bottom-left-radius: var(--radius-lg);\n }\n\n .rounded-b-md {\n border-bottom-right-radius: var(--radius-md);\n border-bottom-left-radius: var(--radius-md);\n }\n\n .rounded-b-xl {\n border-bottom-right-radius: var(--radius-xl);\n border-bottom-left-radius: var(--radius-xl);\n }\n\n .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n\n .border-0 {\n border-style: var(--tw-border-style);\n border-width: 0;\n }\n\n .border-2 {\n border-style: var(--tw-border-style);\n border-width: 2px;\n }\n\n .border-x {\n border-inline-style: var(--tw-border-style);\n border-inline-width: 1px;\n }\n\n .border-t {\n border-top-style: var(--tw-border-style);\n border-top-width: 1px;\n }\n\n .border-t-0 {\n border-top-style: var(--tw-border-style);\n border-top-width: 0;\n }\n\n .border-t-4 {\n border-top-style: var(--tw-border-style);\n border-top-width: 4px;\n }\n\n .border-r {\n border-right-style: var(--tw-border-style);\n border-right-width: 1px;\n }\n\n .border-r-0 {\n border-right-style: var(--tw-border-style);\n border-right-width: 0;\n }\n\n .border-b {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n }\n\n .border-b-0 {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 0;\n }\n\n .border-b-2 {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 2px;\n }\n\n .border-l {\n border-left-style: var(--tw-border-style);\n border-left-width: 1px;\n }\n\n .border-l-0 {\n border-left-style: var(--tw-border-style);\n border-left-width: 0;\n }\n\n .border-l-4 {\n border-left-style: var(--tw-border-style);\n border-left-width: 4px;\n }\n\n .border-dashed {\n --tw-border-style: dashed;\n border-style: dashed;\n }\n\n .border-none {\n --tw-border-style: none;\n border-style: none;\n }\n\n .border-solid {\n --tw-border-style: solid;\n border-style: solid;\n }\n\n .border-\\(--axebow-border-gray\\) {\n border-color: var(--axebow-border-gray);\n }\n\n .border-\\(--axebow-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-blue-200 {\n border-color: var(--color-blue-200);\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-red-200 {\n border-color: var(--color-red-200);\n }\n\n .border-transparent {\n border-color: #0000;\n }\n\n .border-white {\n border-color: var(--color-white);\n }\n\n .border-yellow-200 {\n border-color: var(--color-yellow-200);\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-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-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-\\[var\\(--axebow-gray\\)\\] {\n background-color: var(--axebow-gray);\n }\n\n .bg-\\[var\\(--axebow-tertiary\\)\\] {\n background-color: var(--axebow-tertiary);\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-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 .bg-yellow-50 {\n background-color: var(--color-yellow-50);\n }\n\n .object-contain {\n object-fit: contain;\n }\n\n .p-0 {\n padding: 0;\n }\n\n .p-1 {\n padding: var(--spacing);\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 .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-8 {\n padding-block: calc(var(--spacing) * 8);\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-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 .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-5 {\n padding-left: calc(var(--spacing) * 5);\n }\n\n .pl-6 {\n padding-left: calc(var(--spacing) * 6);\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-\\[18px\\] {\n font-size: 18px;\n }\n\n .leading-3\\.5 {\n --tw-leading: calc(var(--spacing) * 3.5);\n line-height: calc(var(--spacing) * 3.5);\n }\n\n .leading-4\\.25 {\n --tw-leading: calc(var(--spacing) * 4.25);\n line-height: calc(var(--spacing) * 4.25);\n }\n\n .leading-\\[1\\.125rem\\] {\n --tw-leading: 1.125rem;\n line-height: 1.125rem;\n }\n\n .leading-\\[1\\.0625rem\\] {\n --tw-leading: 1.0625rem;\n line-height: 1.0625rem;\n }\n\n .leading-\\[1\\.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-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-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-\\[\\#006BFF\\] {\n color: #006bff;\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-\\[var\\(--axebow-gray\\)\\] {\n color: var(--axebow-gray);\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-gray-900 {\n color: var(--color-gray-900);\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-500 {\n color: var(--color-red-500);\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 .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 .opacity-0 {\n opacity: 0;\n }\n\n .opacity-40 {\n opacity: .4;\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 .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-\\[filter\\] {\n transition-property: filter;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-all {\n transition-property: all;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-colors {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-opacity {\n transition-property: opacity;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-shadow {\n transition-property: box-shadow;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-transform {\n transition-property: transform, translate, scale, rotate;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .delay-100 {\n transition-delay: .1s;\n }\n\n .duration-120 {\n --tw-duration: .12s;\n transition-duration: .12s;\n }\n\n .duration-150 {\n --tw-duration: .15s;\n transition-duration: .15s;\n }\n\n .duration-200 {\n --tw-duration: .2s;\n transition-duration: .2s;\n }\n\n .duration-300 {\n --tw-duration: .3s;\n transition-duration: .3s;\n }\n\n .ease-in-out {\n --tw-ease: var(--ease-in-out);\n transition-timing-function: var(--ease-in-out);\n }\n\n .ease-out {\n --tw-ease: var(--ease-out);\n transition-timing-function: var(--ease-out);\n }\n\n .outline-none {\n --tw-outline-style: none;\n outline-style: none;\n }\n\n .select-none {\n -webkit-user-select: none;\n user-select: none;\n }\n\n .\\[font-variation-settings\\:\\'FILL\\'_0\\,\\'wght\\'_400\\,\\'GRAD\\'_0\\,\\'opsz\\'_24\\] {\n font-variation-settings: \"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24;\n }\n\n .\\[font-variation-settings\\:\\'FILL\\'_1\\,\\'wght\\'_400\\,\\'GRAD\\'_0\\,\\'opsz\\'_24\\] {\n font-variation-settings: \"FILL\" 1,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24;\n }\n\n @media (hover: hover) {\n .group-hover\\: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-primary\\):is(:where(.group):hover *) {\n color: var(--axebow-primary);\n }\n\n .group-hover\\:text-red-500:is(:where(.group):hover *) {\n color: var(--color-red-500);\n }\n\n .group-hover\\:opacity-100:is(:where(.group):hover *) {\n opacity: 1;\n }\n\n .group-hover\\:invert:is(:where(.group):hover *) {\n --tw-invert: invert(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\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-\\(--axebow-tertiary\\):focus-within {\n border-color: var(--axebow-tertiary);\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\\:rounded-md:hover {\n border-radius: var(--radius-md);\n }\n\n .hover\\:border-2:hover {\n border-style: var(--tw-border-style);\n border-width: 2px;\n }\n\n .hover\\:border-solid:hover {\n --tw-border-style: solid;\n border-style: solid;\n }\n\n .hover\\:border-\\(--axebow-gray\\):hover {\n border-color: var(--axebow-gray);\n }\n\n .hover\\:border-\\(--axebow-primary\\):hover {\n border-color: var(--axebow-primary);\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\\:px-\\[1\\.375rem\\]:hover {\n padding-inline: 1.375rem;\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-\\[var\\(--axebow-gray\\)\\]:hover {\n color: var(--axebow-gray);\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\\:text-red-600:hover {\n color: var(--color-red-600);\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 .hover\\:shadow-lg:hover {\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\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\\:pointer-events-none:disabled {\n pointer-events: none;\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-6\\.25rem\\)\\] {\n min-height: calc(100vh - 6.25rem);\n }\n\n .lg\\:w-\\(--card-width\\) {\n width: var(--card-width);\n }\n\n .lg\\:cursor-default {\n cursor: default;\n }\n\n .lg\\:rounded-xl {\n border-radius: var(--radius-xl);\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.axebow-blue-button::part(base) {\n background-color: var(--axebow-tertiary);\n}\n\n.info-container-page {\n flex-wrap: wrap;\n gap: 2rem;\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-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";
129
+ 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-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-200: oklch(88.5% .062 18.334);\n --color-red-300: oklch(80.8% .114 19.571);\n --color-red-500: oklch(63.7% .237 25.331);\n --color-red-600: oklch(57.7% .245 27.325);\n --color-red-800: oklch(44.4% .177 26.899);\n --color-yellow-50: oklch(98.7% .026 102.212);\n --color-yellow-200: oklch(94.5% .129 101.54);\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-gray-900: oklch(21% .034 264.665);\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 --radius-2xl: 1rem;\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-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-117: 29.25rem;\n --spacing-120: 30rem;\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-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-full {\n top: 100%;\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-\\[calc\\(100\\%\\+10px\\)\\] {\n left: calc(100% + 10px);\n }\n\n .left-full {\n left: 100%;\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 .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 .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-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-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 .\\!hidden {\n display: none !important;\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\\.5 {\n height: calc(var(--spacing) * 8.5);\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-24\\.75 {\n height: calc(var(--spacing) * 24.75);\n }\n\n .h-32\\.75 {\n height: calc(var(--spacing) * 32.75);\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-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\\/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\\.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\\.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-30 {\n width: var(--spacing-30);\n }\n\n .w-30\\.75 {\n width: calc(var(--spacing) * 30.75);\n }\n\n .w-32 {\n width: calc(var(--spacing) * 32);\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-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-40\\.25 {\n width: calc(var(--spacing) * 40.25);\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-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-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\\.75 {\n width: calc(var(--spacing) * 63.75);\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\\.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-117 {\n width: var(--spacing-117);\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-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-293\\.5 {\n width: calc(var(--spacing) * 293.5);\n }\n\n .w-294 {\n width: calc(var(--spacing) * 294);\n }\n\n .w-\\[10\\.5rem\\] {\n width: 10.5rem;\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-194\\.25 {\n max-width: calc(var(--spacing) * 194.25);\n }\n\n .max-w-\\[23\\.75rem\\] {\n max-width: 23.75rem;\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-55 {\n min-width: calc(var(--spacing) * 55);\n }\n\n .min-w-56 {\n min-width: calc(var(--spacing) * 56);\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 .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-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-\\[2\\%\\] {\n gap: 2%;\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-1 {\n column-gap: var(--spacing);\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-0\\.75 {\n row-gap: calc(var(--spacing) * .75);\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-2xl {\n border-radius: var(--radius-2xl);\n }\n\n .rounded-\\[0\\.375rem\\] {\n border-radius: .375rem;\n }\n\n .rounded-\\[0\\.3125rem\\] {\n border-radius: .3125rem;\n }\n\n .rounded-full {\n border-radius: 3.40282e38px;\n }\n\n .rounded-lg {\n border-radius: var(--radius-lg);\n }\n\n .rounded-md {\n border-radius: var(--radius-md);\n }\n\n .rounded-none {\n border-radius: 0;\n }\n\n .rounded-none\\! {\n border-radius: 0 !important;\n }\n\n .rounded-sm {\n border-radius: var(--radius-sm);\n }\n\n .rounded-xl {\n border-radius: var(--radius-xl);\n }\n\n .rounded-t-lg {\n border-top-left-radius: var(--radius-lg);\n border-top-right-radius: var(--radius-lg);\n }\n\n .rounded-t-md {\n border-top-left-radius: var(--radius-md);\n border-top-right-radius: var(--radius-md);\n }\n\n .rounded-t-xl {\n border-top-left-radius: var(--radius-xl);\n border-top-right-radius: var(--radius-xl);\n }\n\n .rounded-l-xl {\n border-top-left-radius: var(--radius-xl);\n border-bottom-left-radius: var(--radius-xl);\n }\n\n .rounded-tl-xl {\n border-top-left-radius: var(--radius-xl);\n }\n\n .rounded-r-md {\n border-top-right-radius: var(--radius-md);\n border-bottom-right-radius: var(--radius-md);\n }\n\n .rounded-tr-xl {\n border-top-right-radius: var(--radius-xl);\n }\n\n .rounded-b-lg {\n border-bottom-right-radius: var(--radius-lg);\n border-bottom-left-radius: var(--radius-lg);\n }\n\n .rounded-b-md {\n border-bottom-right-radius: var(--radius-md);\n border-bottom-left-radius: var(--radius-md);\n }\n\n .rounded-b-xl {\n border-bottom-right-radius: var(--radius-xl);\n border-bottom-left-radius: var(--radius-xl);\n }\n\n .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n\n .border-0 {\n border-style: var(--tw-border-style);\n border-width: 0;\n }\n\n .border-2 {\n border-style: var(--tw-border-style);\n border-width: 2px;\n }\n\n .border-x {\n border-inline-style: var(--tw-border-style);\n border-inline-width: 1px;\n }\n\n .border-t {\n border-top-style: var(--tw-border-style);\n border-top-width: 1px;\n }\n\n .border-t-0 {\n border-top-style: var(--tw-border-style);\n border-top-width: 0;\n }\n\n .border-t-4 {\n border-top-style: var(--tw-border-style);\n border-top-width: 4px;\n }\n\n .border-r {\n border-right-style: var(--tw-border-style);\n border-right-width: 1px;\n }\n\n .border-r-0 {\n border-right-style: var(--tw-border-style);\n border-right-width: 0;\n }\n\n .border-b {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n }\n\n .border-b-0 {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 0;\n }\n\n .border-b-2 {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 2px;\n }\n\n .border-l {\n border-left-style: var(--tw-border-style);\n border-left-width: 1px;\n }\n\n .border-l-0 {\n border-left-style: var(--tw-border-style);\n border-left-width: 0;\n }\n\n .border-l-4 {\n border-left-style: var(--tw-border-style);\n border-left-width: 4px;\n }\n\n .border-dashed {\n --tw-border-style: dashed;\n border-style: dashed;\n }\n\n .border-none {\n --tw-border-style: none;\n border-style: none;\n }\n\n .border-solid {\n --tw-border-style: solid;\n border-style: solid;\n }\n\n .border-\\(--axebow-border-gray\\) {\n border-color: var(--axebow-border-gray);\n }\n\n .border-\\(--axebow-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\\/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-red-200 {\n border-color: var(--color-red-200);\n }\n\n .border-transparent {\n border-color: #0000;\n }\n\n .border-white {\n border-color: var(--color-white);\n }\n\n .border-yellow-200 {\n border-color: var(--color-yellow-200);\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-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-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-\\[var\\(--axebow-gray\\)\\] {\n background-color: var(--axebow-gray);\n }\n\n .bg-\\[var\\(--axebow-tertiary\\)\\] {\n background-color: var(--axebow-tertiary);\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 .bg-yellow-50 {\n background-color: var(--color-yellow-50);\n }\n\n .object-contain {\n object-fit: contain;\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 .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 .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-11\\.75 {\n padding-left: calc(var(--spacing) * 11.75);\n }\n\n .pl-px {\n padding-left: 1px;\n }\n\n .text-center {\n text-align: center;\n }\n\n .text-left {\n text-align: left;\n }\n\n .text-right {\n text-align: right;\n }\n\n .text-start {\n text-align: start;\n }\n\n .align-middle {\n vertical-align: middle;\n }\n\n .font-\\[Material_Symbols_Outlined\\] {\n font-family: Material Symbols Outlined;\n }\n\n .font-\\[inherit\\] {\n font-family: inherit;\n }\n\n .text-base {\n font-size: var(--text-base);\n line-height: var(--tw-leading, var(--text-base--line-height));\n }\n\n .text-lg {\n font-size: var(--text-lg);\n line-height: var(--tw-leading, var(--text-lg--line-height));\n }\n\n .text-md {\n font-size: var(--text-md);\n line-height: var(--tw-leading, var(--text-md--line-height));\n }\n\n .text-sm {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n\n .text-xl {\n font-size: var(--text-xl);\n line-height: var(--tw-leading, var(--text-xl--line-height));\n }\n\n .text-xs {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n\n .text-\\[0\\.9375rem\\] {\n font-size: .9375rem;\n }\n\n .text-\\[1\\.25rem\\] {\n font-size: 1.25rem;\n }\n\n .text-\\[18px\\] {\n font-size: 18px;\n }\n\n .leading-3\\.5 {\n --tw-leading: calc(var(--spacing) * 3.5);\n line-height: calc(var(--spacing) * 3.5);\n }\n\n .leading-4\\.25 {\n --tw-leading: calc(var(--spacing) * 4.25);\n line-height: calc(var(--spacing) * 4.25);\n }\n\n .leading-\\[1\\.125rem\\] {\n --tw-leading: 1.125rem;\n line-height: 1.125rem;\n }\n\n .leading-\\[1\\.0625rem\\] {\n --tw-leading: 1.0625rem;\n line-height: 1.0625rem;\n }\n\n .leading-\\[1\\.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-\\[\\#006BFF\\] {\n color: #006bff;\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-\\[var\\(--axebow-gray\\)\\] {\n color: var(--axebow-gray);\n }\n\n .text-\\[var\\(--axebow-tertiary\\)\\] {\n color: var(--axebow-tertiary);\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-gray-900 {\n color: var(--color-gray-900);\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-500 {\n color: var(--color-red-500);\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 .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 .opacity-0 {\n opacity: 0;\n }\n\n .opacity-40 {\n opacity: .4;\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 .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-\\[filter\\] {\n transition-property: filter;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-all {\n transition-property: all;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-colors {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-opacity {\n transition-property: opacity;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-shadow {\n transition-property: box-shadow;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-transform {\n transition-property: transform, translate, scale, rotate;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .delay-100 {\n transition-delay: .1s;\n }\n\n .duration-120 {\n --tw-duration: .12s;\n transition-duration: .12s;\n }\n\n .duration-150 {\n --tw-duration: .15s;\n transition-duration: .15s;\n }\n\n .duration-200 {\n --tw-duration: .2s;\n transition-duration: .2s;\n }\n\n .duration-300 {\n --tw-duration: .3s;\n transition-duration: .3s;\n }\n\n .ease-in-out {\n --tw-ease: var(--ease-in-out);\n transition-timing-function: var(--ease-in-out);\n }\n\n .ease-out {\n --tw-ease: var(--ease-out);\n transition-timing-function: var(--ease-out);\n }\n\n .outline-none {\n --tw-outline-style: none;\n outline-style: none;\n }\n\n .select-none {\n -webkit-user-select: none;\n user-select: none;\n }\n\n .\\[font-variation-settings\\:\\'FILL\\'_0\\,\\'wght\\'_400\\,\\'GRAD\\'_0\\,\\'opsz\\'_24\\] {\n font-variation-settings: \"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24;\n }\n\n .\\[font-variation-settings\\:\\'FILL\\'_1\\,\\'wght\\'_400\\,\\'GRAD\\'_0\\,\\'opsz\\'_24\\] {\n font-variation-settings: \"FILL\" 1,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24;\n }\n\n @media (hover: hover) {\n .group-hover\\: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-primary\\):is(:where(.group):hover *) {\n color: var(--axebow-primary);\n }\n\n .group-hover\\:text-red-500:is(:where(.group):hover *) {\n color: var(--color-red-500);\n }\n\n .group-hover\\:opacity-100:is(:where(.group):hover *) {\n opacity: 1;\n }\n\n .group-hover\\:invert:is(:where(.group):hover *) {\n --tw-invert: invert(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\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-\\(--axebow-tertiary\\):focus-within {\n border-color: var(--axebow-tertiary);\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\\:rounded-md:hover {\n border-radius: var(--radius-md);\n }\n\n .hover\\:border-2:hover {\n border-style: var(--tw-border-style);\n border-width: 2px;\n }\n\n .hover\\:border-solid:hover {\n --tw-border-style: solid;\n border-style: solid;\n }\n\n .hover\\:border-\\(--axebow-gray\\):hover {\n border-color: var(--axebow-gray);\n }\n\n .hover\\:border-\\(--axebow-primary\\):hover {\n border-color: var(--axebow-primary);\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\\:px-\\[1\\.375rem\\]:hover {\n padding-inline: 1.375rem;\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-\\[var\\(--axebow-gray\\)\\]:hover {\n color: var(--axebow-gray);\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\\:text-red-600:hover {\n color: var(--color-red-600);\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 .hover\\:shadow-lg:hover {\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\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\\:pointer-events-none:disabled {\n pointer-events: none;\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-6\\.25rem\\)\\] {\n min-height: calc(100vh - 6.25rem);\n }\n\n .lg\\:w-\\(--card-width\\) {\n width: var(--card-width);\n }\n\n .lg\\:cursor-default {\n cursor: default;\n }\n\n .lg\\:rounded-xl {\n border-radius: var(--radius-xl);\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.axebow-blue-button::part(base) {\n background-color: var(--axebow-tertiary);\n}\n\n.info-container-page {\n flex-wrap: wrap;\n gap: 2rem;\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-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";
129
130
  //#endregion
130
131
  //#region \0@oxc-project+runtime@0.139.0/helpers/esm/decorate.js
131
132
  function __decorate(decorators, target, key, desc) {
@@ -3259,7 +3260,7 @@ var AxebowModalsConfirmation = class AxebowModalsConfirmation extends LitElement
3259
3260
  box-shadow: 2px 2px 25px rgba(0, 0, 0, 0.1);
3260
3261
  padding: 0;
3261
3262
  width: 100%;
3262
- max-width: 579px;
3263
+ max-width: var(--axebow-confirmation-modal-max-width, 579px);
3263
3264
  overflow: hidden;
3264
3265
  }
3265
3266
 
@@ -3283,7 +3284,7 @@ var AxebowModalsConfirmation = class AxebowModalsConfirmation extends LitElement
3283
3284
  box-shadow: 2px 2px 25px rgba(0, 0, 0, 0.1);
3284
3285
  padding: 24px;
3285
3286
  width: 100%;
3286
- max-width: 579px;
3287
+ max-width: var(--axebow-confirmation-modal-max-width, 579px);
3287
3288
  box-sizing: border-box;
3288
3289
  }
3289
3290
 
@@ -3702,9 +3703,9 @@ var AxebowModalsConfirmation = class AxebowModalsConfirmation extends LitElement
3702
3703
  `;
3703
3704
  }
3704
3705
  render() {
3705
- const bgStyle = this.backgroundColor ? `--axebow-confirmation-modal-bg: ${this.backgroundColor}; background-color: ${this.backgroundColor};` : "";
3706
+ const hostStyle = `${this.backgroundColor ? `--axebow-confirmation-modal-bg: ${this.backgroundColor}; background-color: ${this.backgroundColor};` : ""}${this.maxWidth ? `--axebow-confirmation-modal-max-width: ${this.maxWidth};` : ""}`;
3706
3707
  if (this.inline) return html`
3707
- <div class="modal-card" style=${bgStyle}>
3708
+ <div class="modal-card" style=${hostStyle}>
3708
3709
  ${this._renderContent()}
3709
3710
  </div>
3710
3711
  `;
@@ -3713,7 +3714,7 @@ var AxebowModalsConfirmation = class AxebowModalsConfirmation extends LitElement
3713
3714
  ?open=${this.open}
3714
3715
  no-header
3715
3716
  label=${this.popUpTittle}
3716
- style=${bgStyle}
3717
+ style=${hostStyle}
3717
3718
  @sl-request-close=${(e) => {
3718
3719
  e.preventDefault();
3719
3720
  this._handleClose();
@@ -3730,6 +3731,7 @@ __decorate([property({
3730
3731
  })], AxebowModalsConfirmation.prototype, "open", void 0);
3731
3732
  __decorate([property({ type: Boolean })], AxebowModalsConfirmation.prototype, "inline", void 0);
3732
3733
  __decorate([property({ type: String })], AxebowModalsConfirmation.prototype, "backgroundColor", void 0);
3734
+ __decorate([property({ type: String })], AxebowModalsConfirmation.prototype, "maxWidth", void 0);
3733
3735
  __decorate([property({ type: String })], AxebowModalsConfirmation.prototype, "severity", void 0);
3734
3736
  __decorate([property({ type: String })], AxebowModalsConfirmation.prototype, "intent", void 0);
3735
3737
  __decorate([property({ type: String })], AxebowModalsConfirmation.prototype, "popUpTittle", void 0);
@@ -4523,10 +4525,16 @@ var AxebowCardVersionSelector = class AxebowCardVersionSelector extends LitEleme
4523
4525
  super(..._args);
4524
4526
  this.revisions = [];
4525
4527
  this.displayedRevision = "";
4528
+ this.disabled = false;
4526
4529
  }
4527
4530
  static {
4528
4531
  this.styles = [unsafeCSS(tailwind_default), css`
4529
- :host { display: inline-block; width: auto; max-width: 120px; margin-block: 0.25rem; }
4532
+ :host {
4533
+ display: inline-block;
4534
+ width: auto;
4535
+ max-width: var(--axebow-card-version-selector-max-width, 120px);
4536
+ margin-block: 0.25rem;
4537
+ }
4530
4538
  sl-select {
4531
4539
  --sl-input-background-color: transparent;
4532
4540
  --sl-input-border-color: transparent;
@@ -4547,7 +4555,7 @@ var AxebowCardVersionSelector = class AxebowCardVersionSelector extends LitEleme
4547
4555
  margin: 0;
4548
4556
  min-width: 0;
4549
4557
  width: fit-content !important;
4550
- max-width: 120px !important;
4558
+ max-width: var(--axebow-card-version-selector-max-width, 120px) !important;
4551
4559
  }
4552
4560
  sl-select::part(form-control) {
4553
4561
  display: inline-block;
@@ -4613,6 +4621,11 @@ var AxebowCardVersionSelector = class AxebowCardVersionSelector extends LitEleme
4613
4621
  }
4614
4622
  `];
4615
4623
  }
4624
+ updated(changed) {
4625
+ super.updated(changed);
4626
+ if (changed.has("maxWidth")) if (this.maxWidth) this.style.setProperty("--axebow-card-version-selector-max-width", this.maxWidth);
4627
+ else this.style.removeProperty("--axebow-card-version-selector-max-width");
4628
+ }
4616
4629
  _formatRevision(id) {
4617
4630
  if (!id) return "";
4618
4631
  const parts = id.split("/");
@@ -4620,7 +4633,7 @@ var AxebowCardVersionSelector = class AxebowCardVersionSelector extends LitEleme
4620
4633
  }
4621
4634
  render() {
4622
4635
  return html`
4623
- <sl-select size="small" value=${this.displayedRevision} @sl-change=${this._onChange}>
4636
+ <sl-select size="small" value=${this.displayedRevision} ?disabled=${this.disabled} @sl-change=${this._onChange}>
4624
4637
  ${this.revisions.map((rev) => html`
4625
4638
  <sl-option value=${rev.id}>
4626
4639
  ${this._formatRevision(rev.id)}
@@ -4641,6 +4654,8 @@ var AxebowCardVersionSelector = class AxebowCardVersionSelector extends LitEleme
4641
4654
  };
4642
4655
  __decorate([property({ type: Array })], AxebowCardVersionSelector.prototype, "revisions", void 0);
4643
4656
  __decorate([property({ type: String })], AxebowCardVersionSelector.prototype, "displayedRevision", void 0);
4657
+ __decorate([property({ type: Boolean })], AxebowCardVersionSelector.prototype, "disabled", void 0);
4658
+ __decorate([property({ type: String })], AxebowCardVersionSelector.prototype, "maxWidth", void 0);
4644
4659
  AxebowCardVersionSelector = __decorate([customElement("axebow-card-version-selector")], AxebowCardVersionSelector);
4645
4660
  //#endregion
4646
4661
  //#region src/components/cards/parts/axebow-role-tooltip.ts
@@ -6063,6 +6078,8 @@ var AxebowChannelConfigPanel = class AxebowChannelConfigPanel extends LitElement
6063
6078
  this.empty = true;
6064
6079
  this.channelTypeLabel = "";
6065
6080
  this.canEditAll = true;
6081
+ this.disabled = false;
6082
+ this.height = "80vh";
6066
6083
  }
6067
6084
  static {
6068
6085
  this.styles = [
@@ -6081,20 +6098,20 @@ var AxebowChannelConfigPanel = class AxebowChannelConfigPanel extends LitElement
6081
6098
  <div
6082
6099
  class="bg-white rounded-md axebow-shadow p-2 w-62.5 flex-col gap-3 transition-all duration-300 ease-in-out overflow-hidden
6083
6100
  hidden lg:flex ${this.empty ? "justify-center items-center text-(--axebow-gray)" : ""}"
6084
- style="height: 80vh;"
6101
+ style="height: ${this.height};"
6085
6102
  >
6086
6103
  ${this.empty ? "" : html`
6087
6104
  <div
6088
6105
  class="flex flex-col gap-3 opacity-100 transition-opacity duration-300 delay-100 w-full h-full overflow-y-auto"
6089
6106
  >
6090
- <div class="flex justify-between items-center gap-2">
6107
+ <div class="flex justify-between items-center gap-2 pointer-events-auto">
6091
6108
  <h1
6092
6109
  class="font-semibold text-sm text-(--axebow-secondary) truncate m-0"
6093
6110
  style="width: 14.625rem; height: 1rem; line-height: 1rem;"
6094
6111
  >
6095
6112
  ${this.channelTypeLabel}
6096
6113
  </h1>
6097
- ${this.canEditAll ? html`
6114
+ ${this.canEditAll && !this.disabled ? html`
6098
6115
  <div
6099
6116
  class="w-4.5 h-4.5 shrink-0 flex items-center justify-center cursor-pointer"
6100
6117
  @click=${this._handleDelete}
@@ -6102,8 +6119,16 @@ var AxebowChannelConfigPanel = class AxebowChannelConfigPanel extends LitElement
6102
6119
  <axebow-icon iconName="delete" iconColor="var(--axebow-error)" size="base"></axebow-icon>
6103
6120
  </div>
6104
6121
  ` : ""}
6122
+ ${this.disabled ? html`
6123
+ <div
6124
+ class="w-4.5 h-4.5 shrink-0 flex items-center justify-center cursor-pointer pointer-events-auto"
6125
+ @click=${this._handleClose}
6126
+ >
6127
+ <axebow-icon iconName="close" iconColor="var(--axebow-gray)" size="base"></axebow-icon>
6128
+ </div>
6129
+ ` : ""}
6105
6130
  </div>
6106
- <div class="flex flex-col gap-2 w-full">
6131
+ <div class="flex flex-col gap-2 w-full ${this.disabled ? "pointer-events-none" : ""}">
6107
6132
  <slot name="name-input"></slot>
6108
6133
  <slot name="port-input"></slot>
6109
6134
  <slot name="gateway-toggle"></slot>
@@ -6120,10 +6145,18 @@ var AxebowChannelConfigPanel = class AxebowChannelConfigPanel extends LitElement
6120
6145
  composed: true
6121
6146
  }));
6122
6147
  }
6148
+ _handleClose() {
6149
+ this.dispatchEvent(new CustomEvent("close", {
6150
+ bubbles: true,
6151
+ composed: true
6152
+ }));
6153
+ }
6123
6154
  };
6124
6155
  __decorate([property({ type: Boolean })], AxebowChannelConfigPanel.prototype, "empty", void 0);
6125
6156
  __decorate([property({ type: String })], AxebowChannelConfigPanel.prototype, "channelTypeLabel", void 0);
6126
6157
  __decorate([property({ type: Boolean })], AxebowChannelConfigPanel.prototype, "canEditAll", void 0);
6158
+ __decorate([property({ type: Boolean })], AxebowChannelConfigPanel.prototype, "disabled", void 0);
6159
+ __decorate([property({ type: String })], AxebowChannelConfigPanel.prototype, "height", void 0);
6127
6160
  AxebowChannelConfigPanel = __decorate([customElement("axebow-channel-config-panel")], AxebowChannelConfigPanel);
6128
6161
  //#endregion
6129
6162
  //#region src/components/axebow-mesh-node-renderer/axebow-mesh-node-renderer.ts
@@ -7482,6 +7515,219 @@ __decorate([property({ attribute: false })], TableChart.prototype, "chartOptions
7482
7515
  __decorate([property({ type: String })], TableChart.prototype, "height", void 0);
7483
7516
  TableChart = __decorate([customElement("table-chart")], TableChart);
7484
7517
  //#endregion
7518
+ //#region src/components/axebow-service-detail-header/axebow-service-detail-header.ts
7519
+ var AxebowServiceDetailHeader = class AxebowServiceDetailHeader extends LitElement {
7520
+ constructor(..._args) {
7521
+ super(..._args);
7522
+ this.locationTitle = "";
7523
+ this.locationTenantAccount = "";
7524
+ this.locationEnvironment = "";
7525
+ this.locationProject = "";
7526
+ this.softLimitsTitle = "";
7527
+ this.hardLimitsTitle = "";
7528
+ this.vcpusLabel = "";
7529
+ this.gbRamLabel = "";
7530
+ this.gbLabel = "";
7531
+ this.gbStorageLabel = "";
7532
+ this.storageLabel = "";
7533
+ this.volatileLabel = "";
7534
+ this.nonRepPersLabel = "";
7535
+ this.persistentRepLabel = "";
7536
+ this.runningVersionTitle = "";
7537
+ this.updateZipTooltip = "";
7538
+ this.revisions = [];
7539
+ this.displayedRevision = "";
7540
+ this.revisionsDisabled = false;
7541
+ this.updateWithZipLabel = "";
7542
+ this.showActionNeeded = false;
7543
+ this.actionNeededTitle = "";
7544
+ this.deployLabel = "";
7545
+ }
7546
+ static {
7547
+ this.styles = [
7548
+ unsafeCSS(tailwind_default),
7549
+ axebowTheme,
7550
+ css`
7551
+ :host {
7552
+ display: block;
7553
+ padding-bottom: 1rem;
7554
+ }
7555
+ `
7556
+ ];
7557
+ }
7558
+ _handleUpdateWithZip() {
7559
+ this.dispatchEvent(new CustomEvent("show-zip-dialog", {
7560
+ bubbles: true,
7561
+ composed: true
7562
+ }));
7563
+ }
7564
+ _handleDeploy() {
7565
+ this.dispatchEvent(new CustomEvent("deploy", {
7566
+ bubbles: true,
7567
+ composed: true
7568
+ }));
7569
+ }
7570
+ _renderTitle(text) {
7571
+ return html`<h3 class="m-0 text-sm font-bold uppercase text-(--axebow-gray)">${text}</h3>`;
7572
+ }
7573
+ _renderLocation() {
7574
+ const widthClass = this.showActionNeeded ? "w-63.75" : "w-99.75";
7575
+ return html`
7576
+ <div class="flex flex-col gap-1 ${widthClass} shrink-0">
7577
+ ${this._renderTitle(this.locationTitle)}
7578
+ <div
7579
+ class="${widthClass} h-19.75 box-border flex items-center justify-between gap-4 bg-(--axebow-base) rounded-[0.3125rem] py-4.75 px-4"
7580
+ >
7581
+ ${this.locationLogoUrl ? html`<img src=${this.locationLogoUrl} class="h-full aspect-square object-contain shrink-0" />` : html`<div class="h-full aspect-square shrink-0"></div>`}
7582
+ <div class="flex flex-col gap-0.5 min-w-0 flex-1">
7583
+ <p class="m-0 text-base font-semibold text-(--axebow-primary) truncate">${this.locationTenantAccount}</p>
7584
+ <h5 class="m-0 text-lg font-semibold text-(--axebow-primary) truncate">${this.locationEnvironment}</h5>
7585
+ <p class="m-0 text-xs text-(--axebow-gray) truncate">${this.locationProject}</p>
7586
+ </div>
7587
+ </div>
7588
+ </div>
7589
+ `;
7590
+ }
7591
+ _renderLimitsTooltip(limits) {
7592
+ return html`
7593
+ <axebow-tooltip class="p-0" placement="right">
7594
+ <div slot="content">
7595
+ <div class="flex items-center gap-1">
7596
+ <axebow-icon iconName="database" size="md"></axebow-icon>
7597
+ <span>${this.storageLabel}</span>
7598
+ <span class="ml-auto font-bold">${limits.storage} ${this.gbLabel}</span>
7599
+ </div>
7600
+ <div class="flex items-center gap-1">
7601
+ <axebow-icon iconName="subdirectory_arrow_right" size="md"></axebow-icon>
7602
+ <span>${this.volatileLabel}</span>
7603
+ <span class="ml-auto font-bold">${limits.volatileStorage} ${this.gbLabel}</span>
7604
+ </div>
7605
+ <div class="flex items-center gap-1">
7606
+ <axebow-icon iconName="subdirectory_arrow_right" size="md"></axebow-icon>
7607
+ <span>${this.nonRepPersLabel}</span>
7608
+ <span class="ml-auto font-bold">${limits.nonReplicatedStorage} ${this.gbLabel}</span>
7609
+ </div>
7610
+ <div class="flex items-center gap-1">
7611
+ <axebow-icon iconName="subdirectory_arrow_right" size="md"></axebow-icon>
7612
+ <span>${this.persistentRepLabel}</span>
7613
+ <span class="ml-auto font-bold">${limits.persistentStorage} ${this.gbLabel}</span>
7614
+ </div>
7615
+ </div>
7616
+ <axebow-icon iconName="info" iconColor="var(--axebow-gray)" size="md"></axebow-icon>
7617
+ </axebow-tooltip>
7618
+ `;
7619
+ }
7620
+ _renderLimitsBlock(title, limits) {
7621
+ return html`
7622
+ <div class="flex flex-col gap-1 w-66 shrink-0">
7623
+ ${this._renderTitle(title)}
7624
+ <div
7625
+ class="w-66 h-19.75 box-border flex items-center justify-between gap-6 bg-(--axebow-base) rounded-[0.3125rem] py-4.75 px-4"
7626
+ >
7627
+ <div class="flex flex-col items-start gap-0.5">
7628
+ <span class="text-lg font-semibold text-(--axebow-primary)">${limits.cpu}</span>
7629
+ <span class="text-base text-(--axebow-gray) whitespace-nowrap">${this.vcpusLabel}</span>
7630
+ </div>
7631
+ <div class="flex flex-col items-start gap-0.5">
7632
+ <span class="text-lg font-semibold text-(--axebow-primary)">${limits.memory}</span>
7633
+ <span class="text-base text-(--axebow-gray) whitespace-nowrap">${this.gbRamLabel}</span>
7634
+ </div>
7635
+ <div class="flex flex-col items-start gap-0.5">
7636
+ <span class="text-lg font-semibold text-(--axebow-primary)">${limits.storage}</span>
7637
+ <div class="flex items-center gap-1">
7638
+ <span class="text-base text-(--axebow-gray) whitespace-nowrap">${this.gbStorageLabel}</span>
7639
+ ${this._renderLimitsTooltip(limits)}
7640
+ </div>
7641
+ </div>
7642
+ </div>
7643
+ </div>
7644
+ `;
7645
+ }
7646
+ _renderRunningVersion() {
7647
+ return html`
7648
+ <div class="flex flex-col gap-1 w-41.75 shrink-0">
7649
+ ${this._renderTitle(this.runningVersionTitle)}
7650
+ <div class="w-41.75 h-19.75 box-border flex flex-col gap-2">
7651
+ <axebow-card-version-selector
7652
+ .revisions=${this.revisions}
7653
+ displayedRevision=${this.displayedRevision}
7654
+ ?disabled=${this.revisionsDisabled}
7655
+ maxWidth="10.4375rem"
7656
+ ></axebow-card-version-selector>
7657
+ <div class="flex items-center gap-1.5">
7658
+ <axebow-button
7659
+ variant="primary"
7660
+ outline
7661
+ fixedWidth="8.75rem"
7662
+ fixedHeight="2.375rem"
7663
+ @click=${this._handleUpdateWithZip}
7664
+ >
7665
+ ${this.updateWithZipLabel}
7666
+ </axebow-button>
7667
+ <axebow-tooltip placement="top">
7668
+ <div slot="content" class="max-w-65">${this.updateZipTooltip}</div>
7669
+ <div class="w-4.5 h-4.5 flex items-center justify-center">
7670
+ <axebow-icon iconName="info" iconColor="var(--axebow-gray)" size="sm"></axebow-icon>
7671
+ </div>
7672
+ </axebow-tooltip>
7673
+ </div>
7674
+ </div>
7675
+ </div>
7676
+ `;
7677
+ }
7678
+ _renderActionNeeded() {
7679
+ if (!this.showActionNeeded) return "";
7680
+ return html`
7681
+ <div class="flex flex-col gap-1 w-32 shrink-0">
7682
+ ${this._renderTitle(this.actionNeededTitle)}
7683
+ <div
7684
+ class="w-32 h-24.75 box-border flex items-center justify-center border border-solid border-(--axebow-light-gray) rounded-[0.3125rem]"
7685
+ >
7686
+ <axebow-button variant="success" fixedWidth="5.625rem" fixedHeight="2.375rem" @click=${this._handleDeploy}>
7687
+ ${this.deployLabel}
7688
+ </axebow-button>
7689
+ </div>
7690
+ </div>
7691
+ `;
7692
+ }
7693
+ render() {
7694
+ return html`
7695
+ <div class="w-293.5 h-32.75 box-border flex items-start gap-4 bg-white rounded-md p-4">
7696
+ ${this._renderLocation()} ${this._renderLimitsBlock(this.softLimitsTitle, this.softLimits)}
7697
+ ${this._renderLimitsBlock(this.hardLimitsTitle, this.hardLimits)} ${this._renderRunningVersion()}
7698
+ ${this._renderActionNeeded()}
7699
+ </div>
7700
+ `;
7701
+ }
7702
+ };
7703
+ __decorate([property({ type: String })], AxebowServiceDetailHeader.prototype, "locationTitle", void 0);
7704
+ __decorate([property({ type: String })], AxebowServiceDetailHeader.prototype, "locationLogoUrl", void 0);
7705
+ __decorate([property({ type: String })], AxebowServiceDetailHeader.prototype, "locationTenantAccount", void 0);
7706
+ __decorate([property({ type: String })], AxebowServiceDetailHeader.prototype, "locationEnvironment", void 0);
7707
+ __decorate([property({ type: String })], AxebowServiceDetailHeader.prototype, "locationProject", void 0);
7708
+ __decorate([property({ type: String })], AxebowServiceDetailHeader.prototype, "softLimitsTitle", void 0);
7709
+ __decorate([property({ attribute: false })], AxebowServiceDetailHeader.prototype, "softLimits", void 0);
7710
+ __decorate([property({ type: String })], AxebowServiceDetailHeader.prototype, "hardLimitsTitle", void 0);
7711
+ __decorate([property({ attribute: false })], AxebowServiceDetailHeader.prototype, "hardLimits", void 0);
7712
+ __decorate([property({ type: String })], AxebowServiceDetailHeader.prototype, "vcpusLabel", void 0);
7713
+ __decorate([property({ type: String })], AxebowServiceDetailHeader.prototype, "gbRamLabel", void 0);
7714
+ __decorate([property({ type: String })], AxebowServiceDetailHeader.prototype, "gbLabel", void 0);
7715
+ __decorate([property({ type: String })], AxebowServiceDetailHeader.prototype, "gbStorageLabel", void 0);
7716
+ __decorate([property({ type: String })], AxebowServiceDetailHeader.prototype, "storageLabel", void 0);
7717
+ __decorate([property({ type: String })], AxebowServiceDetailHeader.prototype, "volatileLabel", void 0);
7718
+ __decorate([property({ type: String })], AxebowServiceDetailHeader.prototype, "nonRepPersLabel", void 0);
7719
+ __decorate([property({ type: String })], AxebowServiceDetailHeader.prototype, "persistentRepLabel", void 0);
7720
+ __decorate([property({ type: String })], AxebowServiceDetailHeader.prototype, "runningVersionTitle", void 0);
7721
+ __decorate([property({ type: String })], AxebowServiceDetailHeader.prototype, "updateZipTooltip", void 0);
7722
+ __decorate([property({ type: Array })], AxebowServiceDetailHeader.prototype, "revisions", void 0);
7723
+ __decorate([property({ type: String })], AxebowServiceDetailHeader.prototype, "displayedRevision", void 0);
7724
+ __decorate([property({ type: Boolean })], AxebowServiceDetailHeader.prototype, "revisionsDisabled", void 0);
7725
+ __decorate([property({ type: String })], AxebowServiceDetailHeader.prototype, "updateWithZipLabel", void 0);
7726
+ __decorate([property({ type: Boolean })], AxebowServiceDetailHeader.prototype, "showActionNeeded", void 0);
7727
+ __decorate([property({ type: String })], AxebowServiceDetailHeader.prototype, "actionNeededTitle", void 0);
7728
+ __decorate([property({ type: String })], AxebowServiceDetailHeader.prototype, "deployLabel", void 0);
7729
+ AxebowServiceDetailHeader = __decorate([customElement("axebow-service-detail-header")], AxebowServiceDetailHeader);
7730
+ //#endregion
7485
7731
  //#region src/components/axebow-tenant-card/axebow-tenant-card.ts
7486
7732
  var AxebowTenantCard = class AxebowTenantCard extends LitElement {
7487
7733
  constructor(..._args) {
@@ -8279,123 +8525,15 @@ __decorate([state()], AxebowTabSelector.prototype, "_tabCount", void 0);
8279
8525
  __decorate([state()], AxebowTabSelector.prototype, "_tabDisabled", void 0);
8280
8526
  AxebowTabSelector = __decorate([customElement("axebow-tab-selector")], AxebowTabSelector);
8281
8527
  //#endregion
8282
- //#region src/components/axebow-resource-limits/parts/axebow-resource-limit-input.ts
8283
- var AxebowResourceLimitInput = class AxebowResourceLimitInput extends LitElement {
8284
- constructor(..._args) {
8285
- super(..._args);
8286
- this.label = "";
8287
- this.unit = "";
8288
- this.value = "";
8289
- this.max = Number.MAX_SAFE_INTEGER;
8290
- this.min = 0;
8291
- this.required = false;
8292
- this.disabled = false;
8293
- this.hasError = false;
8294
- }
8295
- static {
8296
- this.styles = [unsafeCSS(tailwind_default), axebowTheme];
8297
- }
8298
- render() {
8299
- return html`
8300
- <div class="flex flex-col items-center gap-2 w-24.75 shrink-0">
8301
- <div class="flex items-center gap-1">
8302
- ${this.required ? html`<span class="text-(--axebow-error)">*</span>` : ""}
8303
- <span class="text-sm font-semibold text-center">${this.label}</span>
8304
- </div>
8305
- <axebow-input
8306
- controlType="integer"
8307
- .compact=${true}
8308
- .value=${this.value}
8309
- .max=${this.max}
8310
- .min=${this.min}
8311
- .disabled=${this.disabled}
8312
- .hasError=${this.hasError}
8313
- .callback=${this.callback}
8314
- fixedWidth="6.1875rem"
8315
- fixedHeight="2.5rem"
8316
- ></axebow-input>
8317
- <span class="text-sm text-(--axebow-secondary)">${this.unit}</span>
8318
- </div>
8319
- `;
8320
- }
8321
- };
8322
- __decorate([property({ type: String })], AxebowResourceLimitInput.prototype, "label", void 0);
8323
- __decorate([property({ type: String })], AxebowResourceLimitInput.prototype, "unit", void 0);
8324
- __decorate([property({ type: String })], AxebowResourceLimitInput.prototype, "value", void 0);
8325
- __decorate([property({ type: Number })], AxebowResourceLimitInput.prototype, "max", void 0);
8326
- __decorate([property({ type: Number })], AxebowResourceLimitInput.prototype, "min", void 0);
8327
- __decorate([property({ type: Boolean })], AxebowResourceLimitInput.prototype, "required", void 0);
8328
- __decorate([property({ type: Boolean })], AxebowResourceLimitInput.prototype, "disabled", void 0);
8329
- __decorate([property({ type: Boolean })], AxebowResourceLimitInput.prototype, "hasError", void 0);
8330
- __decorate([property({ attribute: false })], AxebowResourceLimitInput.prototype, "callback", void 0);
8331
- AxebowResourceLimitInput = __decorate([customElement("axebow-resource-limit-input")], AxebowResourceLimitInput);
8332
- //#endregion
8333
- //#region src/components/axebow-resource-limits/axebow-resource-limits-panel.ts
8334
- var AxebowResourceLimitsPanel = class AxebowResourceLimitsPanel extends LitElement {
8335
- constructor(..._args) {
8336
- super(..._args);
8337
- this.storageFields = [];
8338
- }
8339
- static {
8340
- this.styles = [unsafeCSS(tailwind_default), axebowTheme];
8341
- }
8342
- _handleChange(field, e) {
8343
- const target = e.target;
8344
- let value = Math.trunc(Number(target.value));
8345
- if (value > field.max) value = field.max;
8346
- target.value = value.toString();
8347
- this.dispatchEvent(new CustomEvent("resource-limit-change", {
8348
- detail: {
8349
- key: field.key,
8350
- value
8351
- },
8352
- bubbles: true,
8353
- composed: true
8354
- }));
8355
- }
8356
- _renderField(field) {
8357
- return html`
8358
- <axebow-resource-limit-input
8359
- label=${field.label}
8360
- unit=${field.unit}
8361
- value=${field.value?.toString() ?? ""}
8362
- .max=${field.max}
8363
- .min=${field.min ?? 0}
8364
- ?required=${field.required}
8365
- ?disabled=${field.disabled}
8366
- ?hasError=${field.hasError}
8367
- .callback=${(e) => this._handleChange(field, e)}
8368
- ></axebow-resource-limit-input>
8369
- `;
8370
- }
8371
- render() {
8372
- if (!this.cpu || !this.memory) return html``;
8373
- return html`
8374
- <div class="flex items-center flex-wrap gap-19">
8375
- <div class="flex items-start gap-6">${this._renderField(this.cpu)} ${this._renderField(this.memory)}</div>
8376
- <div class="flex items-start gap-4 w-100.5 p-4 border border-(--axebow-table-header-border) rounded-md box-border">
8377
- ${this.storageFields.map((field) => this._renderField(field))}
8378
- </div>
8379
- </div>
8380
- `;
8381
- }
8382
- };
8383
- __decorate([property({ type: Object })], AxebowResourceLimitsPanel.prototype, "cpu", void 0);
8384
- __decorate([property({ type: Object })], AxebowResourceLimitsPanel.prototype, "memory", void 0);
8385
- __decorate([property({ type: Array })], AxebowResourceLimitsPanel.prototype, "storageFields", void 0);
8386
- AxebowResourceLimitsPanel = __decorate([customElement("axebow-resource-limits-panel")], AxebowResourceLimitsPanel);
8387
- //#endregion
8388
- //#region src/components/axebow-selector-slider/axebow-selector-slider.ts
8389
- var AxebowSelectorSlider = class AxebowSelectorSlider extends LitElement {
8528
+ //#region src/components/axebow-underline-tab-selector/axebow-underline-tab-selector.ts
8529
+ var AxebowUnderlineTabSelector = class AxebowUnderlineTabSelector extends LitElement {
8390
8530
  constructor(..._args) {
8391
8531
  super(..._args);
8392
- this.quantity = 0;
8393
- this.minTag = 0;
8394
- this.mediumTag = "Y";
8395
- this.maxTag = "X";
8396
- this.step = 1;
8397
8532
  this.disabled = false;
8398
- this._isDragging = false;
8533
+ this._activeTab = 0;
8534
+ this._tabCount = 0;
8535
+ this._tabDisabled = [];
8536
+ this._observer = null;
8399
8537
  }
8400
8538
  static {
8401
8539
  this.styles = [
@@ -8404,183 +8542,110 @@ var AxebowSelectorSlider = class AxebowSelectorSlider extends LitElement {
8404
8542
  css`
8405
8543
  :host {
8406
8544
  display: block;
8407
- width: 100%;
8545
+ }
8546
+ button {
8547
+ font-family: inherit;
8548
+ }
8549
+ :host([disabled]) {
8550
+ opacity: 0.6;
8551
+ pointer-events: none;
8552
+ cursor: not-allowed;
8408
8553
  }
8409
8554
  `
8410
8555
  ];
8411
8556
  }
8412
- get value() {
8413
- return this.quantity;
8557
+ connectedCallback() {
8558
+ super.connectedCallback();
8559
+ this._observer = new MutationObserver(() => this._updateTabCount());
8560
+ this._observer.observe(this, {
8561
+ childList: true,
8562
+ attributes: true,
8563
+ attributeFilter: ["disabled"],
8564
+ subtree: true
8565
+ });
8566
+ this._updateTabCount();
8414
8567
  }
8415
- set value(val) {
8416
- this.quantity = val;
8568
+ disconnectedCallback() {
8569
+ super.disconnectedCallback();
8570
+ this._observer?.disconnect();
8417
8571
  }
8418
- get _minVal() {
8419
- if (typeof this.min === "number") return this.min;
8420
- const n = Number(this.minTag);
8421
- return isNaN(n) ? 0 : n;
8572
+ firstUpdated() {
8573
+ this._updateTabCount();
8422
8574
  }
8423
- get _maxVal() {
8424
- if (typeof this.max === "number") return this.max;
8425
- const n = Number(this.maxTag);
8426
- return isNaN(n) ? 100 : n;
8427
- }
8428
- get _numericQuantity() {
8429
- if (typeof this.quantity === "string") {
8430
- const str = this.quantity.toLowerCase();
8431
- if (str === "min") return this._minVal;
8432
- if (str === "max") return this._maxVal;
8433
- if (str === "middle") return Math.round((this._minVal + this._maxVal) / 2);
8434
- const parsed = Number(this.quantity);
8435
- if (!isNaN(parsed)) return parsed;
8436
- }
8437
- return typeof this.quantity === "number" ? this.quantity : this._minVal;
8438
- }
8439
- get _percentage() {
8440
- const min = this._minVal;
8441
- const max = this._maxVal;
8442
- if (max <= min) return 0;
8443
- return (Math.max(min, Math.min(max, this._numericQuantity)) - min) / (max - min) * 100;
8575
+ updated(changedProperties) {
8576
+ if (changedProperties.has("activeTab") && this.activeTab !== void 0 && this._activeTab !== this.activeTab) this._activeTab = this.activeTab;
8577
+ if (changedProperties.has("disabled")) this.toggleAttribute("disabled", this.disabled);
8444
8578
  }
8445
- _setValue(newValue) {
8446
- const min = this._minVal;
8447
- const max = this._maxVal;
8448
- const clamped = Math.max(min, Math.min(max, newValue));
8449
- if (this._numericQuantity !== clamped) {
8450
- this.quantity = clamped;
8451
- this.dispatchEvent(new CustomEvent("change", {
8452
- detail: {
8453
- value: clamped,
8454
- quantity: clamped
8455
- },
8456
- bubbles: true,
8457
- composed: true
8458
- }));
8579
+ _updateTabCount() {
8580
+ const count = Array.from(this.children).filter((el) => el.getAttribute("slot")?.startsWith("tab-label-")).length;
8581
+ if (count !== this._tabCount) {
8582
+ if (this._activeTab >= count) this._activeTab = 0;
8583
+ this._tabCount = count;
8459
8584
  }
8585
+ this._tabDisabled = Array.from({ length: this._tabCount }, (_, i) => {
8586
+ return this.querySelector(`[slot="tab-label-${i}"]`)?.hasAttribute("disabled") ?? false;
8587
+ });
8460
8588
  }
8461
- _handlePointerDown(e) {
8462
- if (this.disabled) return;
8463
- this._isDragging = true;
8464
- this._updateFromPointer(e);
8465
- const handlePointerMove = (moveEv) => {
8466
- if (this._isDragging) this._updateFromPointer(moveEv);
8467
- };
8468
- const handlePointerUp = () => {
8469
- this._isDragging = false;
8470
- window.removeEventListener("pointermove", handlePointerMove);
8471
- window.removeEventListener("pointerup", handlePointerUp);
8472
- };
8473
- window.addEventListener("pointermove", handlePointerMove);
8474
- window.addEventListener("pointerup", handlePointerUp);
8475
- }
8476
- _updateFromPointer(e) {
8477
- if (!this._trackContainer) return;
8478
- const rect = this._trackContainer.getBoundingClientRect();
8479
- const x = e.clientX - rect.left;
8480
- const width = rect.width;
8481
- if (width <= 0) return;
8482
- const ratio = Math.max(0, Math.min(1, x / width));
8483
- const min = this._minVal;
8484
- const rawVal = min + ratio * (this._maxVal - min);
8485
- const step = this.step || 1;
8486
- const stepped = Math.round((rawVal - min) / step) * step + min;
8487
- this._setValue(stepped);
8488
- }
8489
- _handleKeyDown(e) {
8490
- if (this.disabled) return;
8491
- const min = this._minVal;
8492
- const max = this._maxVal;
8493
- const step = this.step || 1;
8494
- const current = this._numericQuantity;
8495
- if (e.key === "ArrowRight" || e.key === "ArrowUp") {
8496
- e.preventDefault();
8497
- this._setValue(Math.min(max, current + step));
8498
- } else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
8499
- e.preventDefault();
8500
- this._setValue(Math.max(min, current - step));
8501
- } else if (e.key === "Home") {
8502
- e.preventDefault();
8503
- this._setValue(min);
8504
- } else if (e.key === "End") {
8505
- e.preventDefault();
8506
- this._setValue(max);
8507
- }
8589
+ _selectTab(index) {
8590
+ if (this.disabled || this._tabDisabled[index]) return;
8591
+ this._activeTab = index;
8592
+ this.dispatchEvent(new CustomEvent("tab-change", {
8593
+ detail: { index },
8594
+ bubbles: true,
8595
+ composed: true
8596
+ }));
8508
8597
  }
8509
8598
  render() {
8510
- const percent = this._percentage;
8511
- const currentVal = this._numericQuantity;
8512
- const min = this._minVal;
8513
- const max = this._maxVal;
8514
- const mid = Math.round((min + max) / 2);
8599
+ const tabs = Array.from({ length: this._tabCount }, (_, i) => i);
8515
8600
  return html`
8516
- <div class="w-full flex flex-col gap-2 select-none ${this.disabled ? "opacity-50 pointer-events-none" : ""}">
8517
- <!-- Slider Track Container -->
8518
- <div
8519
- class="relative w-full h-8 flex items-center cursor-pointer touch-none focus:outline-none focus-visible:ring-2 focus-visible:ring-[#006BFF] rounded-full"
8520
- tabindex=${this.disabled ? -1 : 0}
8521
- role="slider"
8522
- aria-valuemin=${min}
8523
- aria-valuemax=${max}
8524
- aria-valuenow=${currentVal}
8525
- aria-valuetext=${String(currentVal)}
8526
- @pointerdown=${this._handlePointerDown}
8527
- @keydown=${this._handleKeyDown}
8528
- >
8529
- <!-- Outer track padding container for exact knob alignment -->
8530
- <div class="slider-track-container relative w-full h-3 rounded-full bg-[#C7DCFA] overflow-visible">
8531
- <!-- Active Fill Track -->
8532
- <div
8533
- class="absolute left-0 top-0 bottom-0 rounded-full bg-[#006BFF] transition-all duration-150 ease-out"
8534
- style="width: ${percent}%;"
8535
- ></div>
8536
-
8537
- <!-- Slider Thumb Knob -->
8538
- <div
8539
- class="absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-7 h-7 rounded-full bg-[#006BFF] border-2 border-white shadow-[0_2px_6px_rgba(0,0,0,0.2)] transition-all duration-150 ease-out cursor-grab active:cursor-grabbing hover:scale-105"
8540
- style="left: ${percent}%;"
8541
- ></div>
8542
- </div>
8543
- </div>
8544
-
8545
- <!-- Labels below -->
8546
- <div class="flex justify-between items-center text-sm font-semibold text-[#78787A] px-1">
8547
- <span class="w-1/3 text-left cursor-pointer" @click=${() => !this.disabled && this._setValue(min)}>
8548
- ${this.minTag}
8549
- </span>
8550
- <span class="w-1/3 text-center cursor-pointer" @click=${() => !this.disabled && this._setValue(mid)}>
8551
- ${this.mediumTag}
8552
- </span>
8553
- <span class="w-1/3 text-right cursor-pointer" @click=${() => !this.disabled && this._setValue(max)}>
8554
- ${this.maxTag}
8555
- </span>
8556
- </div>
8601
+ <div class="w-293.5 flex">
8602
+ ${tabs.map((i) => {
8603
+ const active = this._activeTab === i;
8604
+ const isDisabled = this._tabDisabled[i];
8605
+ return html`
8606
+ <button
8607
+ class="shrink-0 h-8 px-8 flex items-center justify-center text-base bg-transparent
8608
+ transition-colors duration-200
8609
+ focus-visible:outline-2 focus-visible:outline-(--axebow-tertiary)
8610
+ ${isDisabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
8611
+ ${active ? "font-semibold text-(--axebow-primary) border-b-2 border-solid border-(--axebow-primary) border-t-0 border-l-0 border-r-0" : "font-medium text-[#8A94AE] border-b border-solid border-(--axebow-light-gray) border-t-0 border-l-0 border-r-0"}"
8612
+ ?disabled=${isDisabled}
8613
+ @click=${() => this._selectTab(i)}
8614
+ >
8615
+ <slot name="tab-label-${i}"></slot>
8616
+ </button>
8617
+ `;
8618
+ })}
8619
+ <div class="flex-1 border-b border-solid border-(--axebow-light-gray) border-t-0 border-l-0 border-r-0"></div>
8557
8620
  </div>
8621
+ ${tabs.map((i) => html`
8622
+ <div class="${this._activeTab === i ? "block" : "hidden"}">
8623
+ <slot name="tab-panel-${i}"></slot>
8624
+ </div>
8625
+ `)}
8558
8626
  `;
8559
8627
  }
8560
8628
  };
8561
8629
  __decorate([property({
8562
- type: Number,
8563
- reflect: true
8564
- })], AxebowSelectorSlider.prototype, "quantity", void 0);
8565
- __decorate([property()], AxebowSelectorSlider.prototype, "minTag", void 0);
8566
- __decorate([property()], AxebowSelectorSlider.prototype, "mediumTag", void 0);
8567
- __decorate([property()], AxebowSelectorSlider.prototype, "maxTag", void 0);
8568
- __decorate([property({ type: Number })], AxebowSelectorSlider.prototype, "min", void 0);
8569
- __decorate([property({ type: Number })], AxebowSelectorSlider.prototype, "max", void 0);
8570
- __decorate([property({ type: Number })], AxebowSelectorSlider.prototype, "step", void 0);
8571
- __decorate([property({ type: Boolean })], AxebowSelectorSlider.prototype, "disabled", void 0);
8572
- __decorate([property()], AxebowSelectorSlider.prototype, "value", null);
8573
- __decorate([query(".slider-track-container")], AxebowSelectorSlider.prototype, "_trackContainer", void 0);
8574
- AxebowSelectorSlider = __decorate([customElement("axebow-selector-slider")], AxebowSelectorSlider);
8630
+ type: Boolean,
8631
+ attribute: false
8632
+ })], AxebowUnderlineTabSelector.prototype, "disabled", void 0);
8633
+ __decorate([property({ type: Number })], AxebowUnderlineTabSelector.prototype, "activeTab", void 0);
8634
+ __decorate([state()], AxebowUnderlineTabSelector.prototype, "_activeTab", void 0);
8635
+ __decorate([state()], AxebowUnderlineTabSelector.prototype, "_tabCount", void 0);
8636
+ __decorate([state()], AxebowUnderlineTabSelector.prototype, "_tabDisabled", void 0);
8637
+ AxebowUnderlineTabSelector = __decorate([customElement("axebow-underline-tab-selector")], AxebowUnderlineTabSelector);
8575
8638
  //#endregion
8576
- //#region src/components/axebow-deploy-summary/axebow-deploy-summary.ts
8577
- var AxebowDeploySummary = class AxebowDeploySummary extends LitElement {
8639
+ //#region src/components/axebow-role-card/axebow-role-card.ts
8640
+ var AxebowRoleCard = class AxebowRoleCard extends LitElement {
8578
8641
  constructor(..._args) {
8579
8642
  super(..._args);
8580
- this.summaryTitle = "";
8581
- this.showDownloadButton = false;
8582
- this.downloadLabel = "";
8583
- this.currentStep = 0;
8643
+ this.name = "";
8644
+ this.logoUrl = "";
8645
+ this.descriptionPrefix = "";
8646
+ this.description = "";
8647
+ this.resourceLimitsTitle = "";
8648
+ this.resources = [];
8584
8649
  }
8585
8650
  static {
8586
8651
  this.styles = [
@@ -8589,69 +8654,850 @@ var AxebowDeploySummary = class AxebowDeploySummary extends LitElement {
8589
8654
  css`
8590
8655
  :host {
8591
8656
  display: block;
8592
- height: 100%;
8593
8657
  }
8594
- axebow-summary-card {
8595
- display: block;
8596
- height: 100%;
8658
+ sl-divider {
8659
+ --color: var(--axebow-gray);
8660
+ --width: 1px;
8597
8661
  }
8598
- /* The plain, solid divider used between every summary section -
8599
- matches whatever separates the step titles. */
8600
- sl-divider.summary-title-divider {
8601
- --color: var(--axebow-table-header-border, #dbdde4);
8602
- --spacing: 0.75rem;
8662
+ sl-input::part(base) {
8663
+ width: 100%;
8664
+ height: 2.5rem;
8603
8665
  }
8604
- /* Dashed variant used inside the autoscaling summary. */
8605
- sl-divider.summary-dashed-divider {
8606
- --color: var(--axebow-base);
8607
- --spacing: 0.75rem;
8608
- border-top-style: dashed !important;
8666
+ sl-input::part(input) {
8667
+ text-align: center;
8609
8668
  }
8610
8669
  `
8611
8670
  ];
8612
8671
  }
8613
- updated(changedProperties) {
8614
- super.updated(changedProperties);
8615
- if (changedProperties.has("currentStep")) {
8616
- const oldStep = changedProperties.get("currentStep");
8617
- if (oldStep !== void 0 && this.currentStep > oldStep) this._scrollToBottom();
8618
- }
8619
- }
8620
- _scrollToBottom() {
8621
- setTimeout(() => {
8622
- const summaryCard = this.renderRoot.querySelector("axebow-summary-card");
8623
- if (summaryCard && summaryCard.scrollToBottom) summaryCard.scrollToBottom();
8624
- const container = this.renderRoot.querySelector(".overflow-y-auto");
8625
- if (container) container.scrollTop = container.scrollHeight;
8626
- }, 100);
8672
+ _renderResource(resource) {
8673
+ return html`
8674
+ <div class="w-24.75 h-20.75 shrink-0 flex flex-col items-center justify-center gap-1">
8675
+ <h3 class="m-0 text-base font-semibold self-start">${resource.title}</h3>
8676
+ <sl-input class="w-full" type="number" value=${resource.value} disabled></sl-input>
8677
+ <p class="m-0 text-xs">${resource.unit}</p>
8678
+ </div>
8679
+ `;
8627
8680
  }
8628
8681
  render() {
8629
8682
  return html`
8630
- <axebow-summary-card title="${this.summaryTitle}">
8631
- ${this.showDownloadButton ? html`
8632
- <axebow-button slot="header-actions" variant="text" size="medium" @click=${this._handleDownloadBundle}>
8633
- <axebow-icon
8634
- iconName="download_for_offline"
8635
- slot="suffix"
8636
- iconColor="var(--axebow-tertiary)"
8637
- size="xl"
8638
- ></axebow-icon>
8639
- <span class="text-sm lg:text-base hidden lg:inline">${this.downloadLabel}</span>
8640
- </axebow-button>
8641
- ` : ""}
8642
- ${this._renderDeploymentInfo()}
8643
- <div class="h-px border-t border-dashed border-gray-400 my-4"></div>
8644
- ${this._renderResourceLimits()}
8645
- <sl-divider class="summary-title-divider"></sl-divider>
8646
- <div class="flex-1 overflow-y-auto flex flex-col">
8647
- ${this._renderIdentificationStep()} ${this._renderResourcesStep()} ${this._renderScalingStep()}
8648
- ${this._renderChannelsStep()} ${this._renderConfigurationStep()}
8683
+ <div class="w-95 h-83.25 box-border bg-white rounded-md p-4 flex flex-col">
8684
+ <div class="w-87 h-4.25 flex items-center">
8685
+ <h1 class="m-0 uppercase text-left text-base font-semibold text-(--axebow-gray) truncate">${this.name}</h1>
8649
8686
  </div>
8650
- </axebow-summary-card>
8687
+ <sl-divider></sl-divider>
8688
+ <div class="w-12.5 h-12.5 shrink-0">
8689
+ <img src=${this.logoUrl} class="w-full h-full object-contain" />
8690
+ </div>
8691
+ <div class="w-87 h-12.75 mt-4 overflow-hidden">
8692
+ <p class="m-0 wrap-break-word whitespace-normal">
8693
+ <strong>${this.descriptionPrefix}</strong> ${this.description}
8694
+ </p>
8695
+ </div>
8696
+ <div class="w-27 h-4.25 mt-4 flex items-center">
8697
+ <h4 class="m-0 text-base font-semibold text-black">${this.resourceLimitsTitle}</h4>
8698
+ </div>
8699
+ <div class="w-87 h-22.75 mt-4 flex items-center gap-2.25">
8700
+ ${this.resources.map((resource, i) => html`
8701
+ ${i === 2 ? html`<div class="w-6 h-full flex items-center justify-center shrink-0">
8702
+ <axebow-icon iconName="border_horizontal" size="md"></axebow-icon>
8703
+ </div>` : ""}
8704
+ ${this._renderResource(resource)}
8705
+ `)}
8706
+ </div>
8707
+ </div>
8651
8708
  `;
8652
8709
  }
8653
- _renderDeploymentInfo() {
8654
- const info = this.deploymentInfo;
8710
+ };
8711
+ __decorate([property({ type: String })], AxebowRoleCard.prototype, "name", void 0);
8712
+ __decorate([property({ type: String })], AxebowRoleCard.prototype, "logoUrl", void 0);
8713
+ __decorate([property({ type: String })], AxebowRoleCard.prototype, "descriptionPrefix", void 0);
8714
+ __decorate([property({ type: String })], AxebowRoleCard.prototype, "description", void 0);
8715
+ __decorate([property({ type: String })], AxebowRoleCard.prototype, "resourceLimitsTitle", void 0);
8716
+ __decorate([property({ attribute: false })], AxebowRoleCard.prototype, "resources", void 0);
8717
+ AxebowRoleCard = __decorate([customElement("axebow-role-card")], AxebowRoleCard);
8718
+ //#endregion
8719
+ //#region src/components/axebow-time-range-panel/axebow-time-range-panel.ts
8720
+ var AxebowTimeRangePanel = class AxebowTimeRangePanel extends LitElement {
8721
+ constructor(..._args) {
8722
+ super(..._args);
8723
+ this.title = "";
8724
+ this.buttonText = "";
8725
+ this.searchPlaceholder = "";
8726
+ this.searchValue = "";
8727
+ this.ranges = [];
8728
+ this.absoluteTitle = "";
8729
+ this.fromLabel = "";
8730
+ this.fromValue = "";
8731
+ this.toLabel = "";
8732
+ this.toValue = "";
8733
+ this.applyLabel = "";
8734
+ this._handleSearchChange = (e) => {
8735
+ this._emit("search-change", { value: e.detail.value });
8736
+ };
8737
+ this._handleFromChange = (e) => {
8738
+ this._emit("from-change", { value: e.target.value });
8739
+ };
8740
+ this._handleApply = () => {
8741
+ this._emit("apply");
8742
+ this.renderRoot.querySelector("sl-dropdown")?.hide();
8743
+ };
8744
+ }
8745
+ static {
8746
+ this.styles = [
8747
+ unsafeCSS(tailwind_default),
8748
+ axebowTheme,
8749
+ css`
8750
+ :host {
8751
+ display: block;
8752
+ }
8753
+ sl-input::part(input) {
8754
+ font-size: 0.95rem;
8755
+ color: var(--axebow-strong-gray);
8756
+ background-color: #f3f4f6;
8757
+ }
8758
+ sl-input::part(base) {
8759
+ background-color: #f3f4f6;
8760
+ width: 100%;
8761
+ }
8762
+ .apply-button::part(base) {
8763
+ font-size: 0.875rem !important;
8764
+ }
8765
+ `
8766
+ ];
8767
+ }
8768
+ _emit(eventName, detail) {
8769
+ this.dispatchEvent(new CustomEvent(eventName, {
8770
+ detail,
8771
+ bubbles: true,
8772
+ composed: true
8773
+ }));
8774
+ }
8775
+ _handleRangeSelect(range) {
8776
+ this._emit("range-select", { value: range.value });
8777
+ }
8778
+ _renderQuickRanges() {
8779
+ return html`
8780
+ <sl-menu class="w-53 h-112 box-border p-2 rounded-none!">
8781
+ <axebow-search
8782
+ placeholder=${this.searchPlaceholder}
8783
+ .value=${this.searchValue}
8784
+ width="12.25rem"
8785
+ height="2.5rem"
8786
+ @search-change=${this._handleSearchChange}
8787
+ ></axebow-search>
8788
+ ${this.ranges.map((range) => html`
8789
+ <sl-menu-item @click=${() => this._handleRangeSelect(range)} ?selected=${range.selected}>
8790
+ ${range.label}
8791
+ </sl-menu-item>
8792
+ `)}
8793
+ </sl-menu>
8794
+ `;
8795
+ }
8796
+ _renderAbsoluteTimeSection() {
8797
+ return html`
8798
+ <div class="w-74.75 h-112 box-border flex flex-col p-4 gap-2 bg-white border-l border-solid border-gray-100">
8799
+ <h2 class="font-bold">${this.absoluteTitle}</h2>
8800
+ <label for="from-datetime">${this.fromLabel}</label>
8801
+ <sl-input
8802
+ id="from-datetime"
8803
+ type="datetime-local"
8804
+ .value=${this.fromValue}
8805
+ @sl-change=${this._handleFromChange}
8806
+ ></sl-input>
8807
+ <label for="to-datetime">${this.toLabel}</label>
8808
+ <sl-input id="to-datetime" type="text" value=${this.toValue} disabled></sl-input>
8809
+ <axebow-button
8810
+ variant="primary"
8811
+ fixedWidth="16.421875rem"
8812
+ fixedHeight="2.5rem"
8813
+ class="mt-4 apply-button"
8814
+ @click=${this._handleApply}
8815
+ >
8816
+ ${this.applyLabel}
8817
+ </axebow-button>
8818
+ </div>
8819
+ `;
8820
+ }
8821
+ render() {
8822
+ return html`
8823
+ <div class="flex flex-col gap-2.5">
8824
+ <div class="w-70.5 h-4.25 flex items-center">
8825
+ <h1 class="m-0 text-base font-semibold">${this.title}</h1>
8826
+ </div>
8827
+ <sl-dropdown class="w-70.5">
8828
+ <axebow-button class="w-full" slot="trigger" caret fixedWidth="17.625rem" fixedHeight="2.5rem">
8829
+ ${this.buttonText}
8830
+ </axebow-button>
8831
+ <div
8832
+ class="w-127.75 h-112 box-border my-2 flex text-sm border border-solid border-(--axebow-primary) rounded-[0.375rem] overflow-hidden"
8833
+ >
8834
+ ${this._renderQuickRanges()} ${this._renderAbsoluteTimeSection()}
8835
+ </div>
8836
+ </sl-dropdown>
8837
+ </div>
8838
+ `;
8839
+ }
8840
+ };
8841
+ __decorate([property({ type: String })], AxebowTimeRangePanel.prototype, "title", void 0);
8842
+ __decorate([property({ type: String })], AxebowTimeRangePanel.prototype, "buttonText", void 0);
8843
+ __decorate([property({ type: String })], AxebowTimeRangePanel.prototype, "searchPlaceholder", void 0);
8844
+ __decorate([property({ type: String })], AxebowTimeRangePanel.prototype, "searchValue", void 0);
8845
+ __decorate([property({ attribute: false })], AxebowTimeRangePanel.prototype, "ranges", void 0);
8846
+ __decorate([property({ type: String })], AxebowTimeRangePanel.prototype, "absoluteTitle", void 0);
8847
+ __decorate([property({ type: String })], AxebowTimeRangePanel.prototype, "fromLabel", void 0);
8848
+ __decorate([property({ type: String })], AxebowTimeRangePanel.prototype, "fromValue", void 0);
8849
+ __decorate([property({ type: String })], AxebowTimeRangePanel.prototype, "toLabel", void 0);
8850
+ __decorate([property({ type: String })], AxebowTimeRangePanel.prototype, "toValue", void 0);
8851
+ __decorate([property({ type: String })], AxebowTimeRangePanel.prototype, "applyLabel", void 0);
8852
+ AxebowTimeRangePanel = __decorate([customElement("axebow-time-range-panel")], AxebowTimeRangePanel);
8853
+ //#endregion
8854
+ //#region src/components/axebow-role-container-dropdown/axebow-role-container-dropdown.ts
8855
+ var AxebowRoleContainerDropdown = class AxebowRoleContainerDropdown extends LitElement {
8856
+ constructor(..._args) {
8857
+ super(..._args);
8858
+ this.title = "";
8859
+ this.buttonText = "";
8860
+ this.allContainersLabel = "";
8861
+ this.allContainersSelected = false;
8862
+ this.roles = [];
8863
+ this.clearAllLabel = "";
8864
+ this.applyFilterLabel = "";
8865
+ this._handleClearAll = () => {
8866
+ this.dispatchEvent(new CustomEvent("clear-all", {
8867
+ bubbles: true,
8868
+ composed: true
8869
+ }));
8870
+ };
8871
+ this._handleApplyFilter = () => {
8872
+ this.dispatchEvent(new CustomEvent("apply-filter", {
8873
+ bubbles: true,
8874
+ composed: true
8875
+ }));
8876
+ this.renderRoot.querySelector("sl-dropdown")?.hide();
8877
+ };
8878
+ }
8879
+ static {
8880
+ this.styles = [
8881
+ unsafeCSS(tailwind_default),
8882
+ axebowTheme,
8883
+ css`
8884
+ :host {
8885
+ display: block;
8886
+ }
8887
+ sl-menu-item::part(base) {
8888
+ padding-top: 0.71875rem !important;
8889
+ padding-bottom: 0.71875rem !important;
8890
+ padding-left: 0.75rem !important;
8891
+ padding-right: 0.75rem !important;
8892
+ }
8893
+ sl-checkbox::part(base) {
8894
+ display: flex;
8895
+ align-items: center;
8896
+ }
8897
+ sl-checkbox::part(control) {
8898
+ margin-top: 0 !important;
8899
+ margin-bottom: 0 !important;
8900
+ }
8901
+ sl-checkbox::part(label) {
8902
+ display: flex;
8903
+ align-items: center;
8904
+ }
8905
+ .role-container-panel::part(popup) {
8906
+ z-index: var(--sl-z-index-dropdown);
8907
+ }
8908
+ `
8909
+ ];
8910
+ }
8911
+ _emitToggle(selection) {
8912
+ this.dispatchEvent(new CustomEvent("item-toggle", {
8913
+ detail: { selection },
8914
+ bubbles: true,
8915
+ composed: true
8916
+ }));
8917
+ }
8918
+ _renderAllContainersOption() {
8919
+ return html`
8920
+ <sl-menu-item @click=${(e) => this._handleItemClick(e, { type: "all" })}>
8921
+ <sl-checkbox .checked=${this.allContainersSelected} @sl-change=${(e) => e.stopPropagation()}
8922
+ >${this.allContainersLabel}</sl-checkbox
8923
+ >
8924
+ </sl-menu-item>
8925
+ `;
8926
+ }
8927
+ _handleItemClick(e, selection) {
8928
+ e.preventDefault();
8929
+ e.stopPropagation();
8930
+ this._emitToggle(selection);
8931
+ this.renderRoot.querySelector("sl-dropdown")?.hide();
8932
+ }
8933
+ _renderInstance(role, instance, instanceIdx) {
8934
+ return html`
8935
+ <sl-menu-item
8936
+ @click=${(e) => this._handleItemClick(e, {
8937
+ type: "instance",
8938
+ role: role.name,
8939
+ instanceIdx
8940
+ })}
8941
+ >
8942
+ <sl-checkbox .checked=${instance.selected} @sl-change=${(e) => e.stopPropagation()}>
8943
+ <div class="flex items-center gap-2">
8944
+ <img src="${instance.logoUrl}" alt="role-logo" class="w-8 h-8" />
8945
+ <p>${instance.name}</p>
8946
+ </div>
8947
+ </sl-checkbox>
8948
+ ${instance.containers.length ? html`
8949
+ <div class="flex flex-col ml-4">
8950
+ ${instance.containers.map((container) => this._renderContainer(role.name, instanceIdx, container))}
8951
+ </div>
8952
+ ` : ""}
8953
+ </sl-menu-item>
8954
+ `;
8955
+ }
8956
+ _renderContainer(roleName, instanceIdx, container) {
8957
+ return html`
8958
+ <div
8959
+ class="cursor-pointer hover:bg-gray-50 p-1 rounded"
8960
+ @click=${(e) => this._handleItemClick(e, {
8961
+ type: "container",
8962
+ role: roleName,
8963
+ instanceIdx,
8964
+ container: container.name
8965
+ })}
8966
+ >
8967
+ <sl-checkbox .checked=${container.selected} @sl-change=${(e) => e.stopPropagation()}>
8968
+ <div class="flex items-center gap-2">
8969
+ <axebow-icon class="font-light" iconName="subdirectory_arrow_right" size="base"></axebow-icon>
8970
+ <p>${container.name}</p>
8971
+ </div>
8972
+ </sl-checkbox>
8973
+ </div>
8974
+ `;
8975
+ }
8976
+ _renderFooter() {
8977
+ return html`
8978
+ <div class="w-70.5 h-10.25 box-border flex items-center border-t border-solid border-(--axebow-gray)">
8979
+ <div
8980
+ class="w-34.25 h-10 box-border flex items-center text-base text-(--axebow-gray) cursor-pointer"
8981
+ style="padding: 0.71875rem 1.5rem 0.71875rem 1.75rem;"
8982
+ @click=${this._handleClearAll}
8983
+ >
8984
+ ${this.clearAllLabel}
8985
+ </div>
8986
+ <span class="w-px h-full bg-(--axebow-light-gray) shrink-0"></span>
8987
+ <div
8988
+ class="w-34.25 h-10 box-border flex items-center text-base text-(--axebow-tertiary) cursor-pointer"
8989
+ style="padding: 0.71875rem 1.5rem 0.71875rem 1.75rem;"
8990
+ @click=${this._handleApplyFilter}
8991
+ >
8992
+ ${this.applyFilterLabel}
8993
+ </div>
8994
+ </div>
8995
+ `;
8996
+ }
8997
+ render() {
8998
+ return html`
8999
+ <div class="flex flex-col gap-2">
9000
+ <div class="w-70.5 h-4.25 flex items-center">
9001
+ <h1 class="m-0 text-base font-semibold">${this.title}</h1>
9002
+ </div>
9003
+ <sl-dropdown class="w-70.5">
9004
+ <axebow-button class="w-full" slot="trigger" caret fixedWidth="17.625rem" fixedHeight="2.5rem">
9005
+ ${this.buttonText}
9006
+ </axebow-button>
9007
+ <div
9008
+ class="role-container-panel w-70.5 h-89.25 box-border flex flex-col bg-white border border-solid border-(--axebow-tertiary) rounded-[0.375rem] overflow-hidden"
9009
+ >
9010
+ <sl-menu class="w-70.5 h-79 box-border overflow-y-auto">
9011
+ ${this._renderAllContainersOption()}
9012
+ ${this.roles.map((role) => role.instances.map((instance, instanceIdx) => this._renderInstance(role, instance, instanceIdx)))}
9013
+ </sl-menu>
9014
+ ${this._renderFooter()}
9015
+ </div>
9016
+ </sl-dropdown>
9017
+ </div>
9018
+ `;
9019
+ }
9020
+ };
9021
+ __decorate([property({ type: String })], AxebowRoleContainerDropdown.prototype, "title", void 0);
9022
+ __decorate([property({ type: String })], AxebowRoleContainerDropdown.prototype, "buttonText", void 0);
9023
+ __decorate([property({ type: String })], AxebowRoleContainerDropdown.prototype, "allContainersLabel", void 0);
9024
+ __decorate([property({ type: Boolean })], AxebowRoleContainerDropdown.prototype, "allContainersSelected", void 0);
9025
+ __decorate([property({ attribute: false })], AxebowRoleContainerDropdown.prototype, "roles", void 0);
9026
+ __decorate([property({ type: String })], AxebowRoleContainerDropdown.prototype, "clearAllLabel", void 0);
9027
+ __decorate([property({ type: String })], AxebowRoleContainerDropdown.prototype, "applyFilterLabel", void 0);
9028
+ AxebowRoleContainerDropdown = __decorate([customElement("axebow-role-container-dropdown")], AxebowRoleContainerDropdown);
9029
+ //#endregion
9030
+ //#region src/components/axebow-refresh-period-panel/axebow-refresh-period-panel.ts
9031
+ var AxebowRefreshPeriodPanel = class AxebowRefreshPeriodPanel extends LitElement {
9032
+ constructor(..._args) {
9033
+ super(..._args);
9034
+ this.title = "";
9035
+ this.buttonText = "";
9036
+ this.offLabel = "";
9037
+ this.offSelected = false;
9038
+ this.periods = [];
9039
+ this.refreshNowLabel = "";
9040
+ this.isManualRefreshing = false;
9041
+ this._handleRefreshNow = () => {
9042
+ this.dispatchEvent(new CustomEvent("refresh-now-click", {
9043
+ bubbles: true,
9044
+ composed: true
9045
+ }));
9046
+ };
9047
+ }
9048
+ static {
9049
+ this.styles = [
9050
+ unsafeCSS(tailwind_default),
9051
+ axebowTheme,
9052
+ css`
9053
+ :host {
9054
+ display: block;
9055
+ }
9056
+ .refresh-spin {
9057
+ animation: spin 1s linear infinite;
9058
+ }
9059
+ @keyframes spin {
9060
+ from {
9061
+ transform: rotate(0deg);
9062
+ }
9063
+ to {
9064
+ transform: rotate(360deg);
9065
+ }
9066
+ }
9067
+ `
9068
+ ];
9069
+ }
9070
+ _handleSelect(value) {
9071
+ this.dispatchEvent(new CustomEvent("period-select", {
9072
+ detail: { value },
9073
+ bubbles: true,
9074
+ composed: true
9075
+ }));
9076
+ this.renderRoot.querySelector("sl-dropdown")?.hide();
9077
+ }
9078
+ render() {
9079
+ return html`
9080
+ <div class="flex flex-col gap-2">
9081
+ <div class="w-45 h-4.25 flex items-center">
9082
+ <h1 class="m-0 text-base font-semibold">${this.title}</h1>
9083
+ </div>
9084
+ <div class="flex gap-4 items-center justify-center flex-wrap">
9085
+ <sl-dropdown class="w-45">
9086
+ <axebow-button class="w-full" slot="trigger" caret fixedWidth="11.25rem" fixedHeight="2.5rem">
9087
+ <div class="flex items-center gap-2">${this.buttonText}</div>
9088
+ </axebow-button>
9089
+ <sl-menu class="w-45 my-2">
9090
+ <sl-menu-item @click=${() => this._handleSelect(null)} ?selected=${this.offSelected}>
9091
+ <div class="flex items-center gap-2">${this.offLabel}</div>
9092
+ </sl-menu-item>
9093
+ <sl-divider></sl-divider>
9094
+ ${this.periods.map((period) => html`
9095
+ <sl-menu-item @click=${() => this._handleSelect(period.value)} ?selected=${period.selected}>
9096
+ <div class="flex items-center gap-2">${period.label}</div>
9097
+ </sl-menu-item>
9098
+ `)}
9099
+ </sl-menu>
9100
+ </sl-dropdown>
9101
+ <button
9102
+ class="text-[var(--axebow-tertiary)] flex items-center gap-2 cursor-pointer hover:opacity-80 transition-opacity ${this.isManualRefreshing ? "opacity-70" : ""}"
9103
+ @click=${this._handleRefreshNow}
9104
+ ?disabled=${this.isManualRefreshing}
9105
+ >
9106
+ <p class="font-bold">${this.refreshNowLabel}</p>
9107
+ <axebow-icon
9108
+ iconName="cached"
9109
+ size="3xl"
9110
+ iconColor="var(--axebow-tertiary)"
9111
+ class="${this.isManualRefreshing ? "refresh-spin" : ""}"
9112
+ ></axebow-icon>
9113
+ </button>
9114
+ </div>
9115
+ </div>
9116
+ `;
9117
+ }
9118
+ };
9119
+ __decorate([property({ type: String })], AxebowRefreshPeriodPanel.prototype, "title", void 0);
9120
+ __decorate([property({ type: String })], AxebowRefreshPeriodPanel.prototype, "buttonText", void 0);
9121
+ __decorate([property({ type: String })], AxebowRefreshPeriodPanel.prototype, "offLabel", void 0);
9122
+ __decorate([property({ type: Boolean })], AxebowRefreshPeriodPanel.prototype, "offSelected", void 0);
9123
+ __decorate([property({ attribute: false })], AxebowRefreshPeriodPanel.prototype, "periods", void 0);
9124
+ __decorate([property({ type: String })], AxebowRefreshPeriodPanel.prototype, "refreshNowLabel", void 0);
9125
+ __decorate([property({ type: Boolean })], AxebowRefreshPeriodPanel.prototype, "isManualRefreshing", void 0);
9126
+ AxebowRefreshPeriodPanel = __decorate([customElement("axebow-refresh-period-panel")], AxebowRefreshPeriodPanel);
9127
+ //#endregion
9128
+ //#region src/components/axebow-resource-limits/parts/axebow-resource-limit-input.ts
9129
+ var AxebowResourceLimitInput = class AxebowResourceLimitInput extends LitElement {
9130
+ constructor(..._args) {
9131
+ super(..._args);
9132
+ this.label = "";
9133
+ this.unit = "";
9134
+ this.value = "";
9135
+ this.max = Number.MAX_SAFE_INTEGER;
9136
+ this.min = 0;
9137
+ this.required = false;
9138
+ this.disabled = false;
9139
+ this.hasError = false;
9140
+ }
9141
+ static {
9142
+ this.styles = [unsafeCSS(tailwind_default), axebowTheme];
9143
+ }
9144
+ render() {
9145
+ return html`
9146
+ <div class="flex flex-col items-center gap-2 w-24.75 shrink-0">
9147
+ <div class="flex items-center gap-1">
9148
+ ${this.required ? html`<span class="text-(--axebow-error)">*</span>` : ""}
9149
+ <span class="text-sm font-semibold text-center">${this.label}</span>
9150
+ </div>
9151
+ <axebow-input
9152
+ controlType="integer"
9153
+ .compact=${true}
9154
+ .value=${this.value}
9155
+ .max=${this.max}
9156
+ .min=${this.min}
9157
+ .disabled=${this.disabled}
9158
+ .hasError=${this.hasError}
9159
+ .callback=${this.callback}
9160
+ fixedWidth="6.1875rem"
9161
+ fixedHeight="2.5rem"
9162
+ ></axebow-input>
9163
+ <span class="text-sm text-(--axebow-secondary)">${this.unit}</span>
9164
+ </div>
9165
+ `;
9166
+ }
9167
+ };
9168
+ __decorate([property({ type: String })], AxebowResourceLimitInput.prototype, "label", void 0);
9169
+ __decorate([property({ type: String })], AxebowResourceLimitInput.prototype, "unit", void 0);
9170
+ __decorate([property({ type: String })], AxebowResourceLimitInput.prototype, "value", void 0);
9171
+ __decorate([property({ type: Number })], AxebowResourceLimitInput.prototype, "max", void 0);
9172
+ __decorate([property({ type: Number })], AxebowResourceLimitInput.prototype, "min", void 0);
9173
+ __decorate([property({ type: Boolean })], AxebowResourceLimitInput.prototype, "required", void 0);
9174
+ __decorate([property({ type: Boolean })], AxebowResourceLimitInput.prototype, "disabled", void 0);
9175
+ __decorate([property({ type: Boolean })], AxebowResourceLimitInput.prototype, "hasError", void 0);
9176
+ __decorate([property({ attribute: false })], AxebowResourceLimitInput.prototype, "callback", void 0);
9177
+ AxebowResourceLimitInput = __decorate([customElement("axebow-resource-limit-input")], AxebowResourceLimitInput);
9178
+ //#endregion
9179
+ //#region src/components/axebow-resource-limits/axebow-resource-limits-panel.ts
9180
+ var AxebowResourceLimitsPanel = class AxebowResourceLimitsPanel extends LitElement {
9181
+ constructor(..._args) {
9182
+ super(..._args);
9183
+ this.storageFields = [];
9184
+ }
9185
+ static {
9186
+ this.styles = [unsafeCSS(tailwind_default), axebowTheme];
9187
+ }
9188
+ _handleChange(field, e) {
9189
+ const target = e.target;
9190
+ let value = Math.trunc(Number(target.value));
9191
+ if (value > field.max) value = field.max;
9192
+ target.value = value.toString();
9193
+ this.dispatchEvent(new CustomEvent("resource-limit-change", {
9194
+ detail: {
9195
+ key: field.key,
9196
+ value
9197
+ },
9198
+ bubbles: true,
9199
+ composed: true
9200
+ }));
9201
+ }
9202
+ _renderField(field) {
9203
+ return html`
9204
+ <axebow-resource-limit-input
9205
+ label=${field.label}
9206
+ unit=${field.unit}
9207
+ value=${field.value?.toString() ?? ""}
9208
+ .max=${field.max}
9209
+ .min=${field.min ?? 0}
9210
+ ?required=${field.required}
9211
+ ?disabled=${field.disabled}
9212
+ ?hasError=${field.hasError}
9213
+ .callback=${(e) => this._handleChange(field, e)}
9214
+ ></axebow-resource-limit-input>
9215
+ `;
9216
+ }
9217
+ render() {
9218
+ if (!this.cpu || !this.memory) return html``;
9219
+ return html`
9220
+ <div class="flex items-center flex-wrap gap-19">
9221
+ <div class="flex items-start gap-6">${this._renderField(this.cpu)} ${this._renderField(this.memory)}</div>
9222
+ <div class="flex items-start gap-4 w-100.5 p-4 border border-(--axebow-table-header-border) rounded-md box-border">
9223
+ ${this.storageFields.map((field) => this._renderField(field))}
9224
+ </div>
9225
+ </div>
9226
+ `;
9227
+ }
9228
+ };
9229
+ __decorate([property({ type: Object })], AxebowResourceLimitsPanel.prototype, "cpu", void 0);
9230
+ __decorate([property({ type: Object })], AxebowResourceLimitsPanel.prototype, "memory", void 0);
9231
+ __decorate([property({ type: Array })], AxebowResourceLimitsPanel.prototype, "storageFields", void 0);
9232
+ AxebowResourceLimitsPanel = __decorate([customElement("axebow-resource-limits-panel")], AxebowResourceLimitsPanel);
9233
+ //#endregion
9234
+ //#region src/components/axebow-selector-slider/axebow-selector-slider.ts
9235
+ var AxebowSelectorSlider = class AxebowSelectorSlider extends LitElement {
9236
+ constructor(..._args) {
9237
+ super(..._args);
9238
+ this.quantity = 0;
9239
+ this.minTag = 0;
9240
+ this.mediumTag = "Y";
9241
+ this.maxTag = "X";
9242
+ this.step = 1;
9243
+ this.disabled = false;
9244
+ this._isDragging = false;
9245
+ }
9246
+ static {
9247
+ this.styles = [
9248
+ unsafeCSS(tailwind_default),
9249
+ axebowTheme,
9250
+ css`
9251
+ :host {
9252
+ display: block;
9253
+ width: 100%;
9254
+ }
9255
+ `
9256
+ ];
9257
+ }
9258
+ get value() {
9259
+ return this.quantity;
9260
+ }
9261
+ set value(val) {
9262
+ this.quantity = val;
9263
+ }
9264
+ get _minVal() {
9265
+ if (typeof this.min === "number") return this.min;
9266
+ const n = Number(this.minTag);
9267
+ return isNaN(n) ? 0 : n;
9268
+ }
9269
+ get _maxVal() {
9270
+ if (typeof this.max === "number") return this.max;
9271
+ const n = Number(this.maxTag);
9272
+ return isNaN(n) ? 100 : n;
9273
+ }
9274
+ get _numericQuantity() {
9275
+ if (typeof this.quantity === "string") {
9276
+ const str = this.quantity.toLowerCase();
9277
+ if (str === "min") return this._minVal;
9278
+ if (str === "max") return this._maxVal;
9279
+ if (str === "middle") return Math.round((this._minVal + this._maxVal) / 2);
9280
+ const parsed = Number(this.quantity);
9281
+ if (!isNaN(parsed)) return parsed;
9282
+ }
9283
+ return typeof this.quantity === "number" ? this.quantity : this._minVal;
9284
+ }
9285
+ get _percentage() {
9286
+ const min = this._minVal;
9287
+ const max = this._maxVal;
9288
+ if (max <= min) return 0;
9289
+ return (Math.max(min, Math.min(max, this._numericQuantity)) - min) / (max - min) * 100;
9290
+ }
9291
+ _setValue(newValue) {
9292
+ const min = this._minVal;
9293
+ const max = this._maxVal;
9294
+ const clamped = Math.max(min, Math.min(max, newValue));
9295
+ if (this._numericQuantity !== clamped) {
9296
+ this.quantity = clamped;
9297
+ this.dispatchEvent(new CustomEvent("change", {
9298
+ detail: {
9299
+ value: clamped,
9300
+ quantity: clamped
9301
+ },
9302
+ bubbles: true,
9303
+ composed: true
9304
+ }));
9305
+ }
9306
+ }
9307
+ _handlePointerDown(e) {
9308
+ if (this.disabled) return;
9309
+ this._isDragging = true;
9310
+ this._updateFromPointer(e);
9311
+ const handlePointerMove = (moveEv) => {
9312
+ if (this._isDragging) this._updateFromPointer(moveEv);
9313
+ };
9314
+ const handlePointerUp = () => {
9315
+ this._isDragging = false;
9316
+ window.removeEventListener("pointermove", handlePointerMove);
9317
+ window.removeEventListener("pointerup", handlePointerUp);
9318
+ };
9319
+ window.addEventListener("pointermove", handlePointerMove);
9320
+ window.addEventListener("pointerup", handlePointerUp);
9321
+ }
9322
+ _updateFromPointer(e) {
9323
+ if (!this._trackContainer) return;
9324
+ const rect = this._trackContainer.getBoundingClientRect();
9325
+ const x = e.clientX - rect.left;
9326
+ const width = rect.width;
9327
+ if (width <= 0) return;
9328
+ const ratio = Math.max(0, Math.min(1, x / width));
9329
+ const min = this._minVal;
9330
+ const rawVal = min + ratio * (this._maxVal - min);
9331
+ const step = this.step || 1;
9332
+ const stepped = Math.round((rawVal - min) / step) * step + min;
9333
+ this._setValue(stepped);
9334
+ }
9335
+ _handleKeyDown(e) {
9336
+ if (this.disabled) return;
9337
+ const min = this._minVal;
9338
+ const max = this._maxVal;
9339
+ const step = this.step || 1;
9340
+ const current = this._numericQuantity;
9341
+ if (e.key === "ArrowRight" || e.key === "ArrowUp") {
9342
+ e.preventDefault();
9343
+ this._setValue(Math.min(max, current + step));
9344
+ } else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
9345
+ e.preventDefault();
9346
+ this._setValue(Math.max(min, current - step));
9347
+ } else if (e.key === "Home") {
9348
+ e.preventDefault();
9349
+ this._setValue(min);
9350
+ } else if (e.key === "End") {
9351
+ e.preventDefault();
9352
+ this._setValue(max);
9353
+ }
9354
+ }
9355
+ render() {
9356
+ const percent = this._percentage;
9357
+ const currentVal = this._numericQuantity;
9358
+ const min = this._minVal;
9359
+ const max = this._maxVal;
9360
+ const mid = Math.round((min + max) / 2);
9361
+ return html`
9362
+ <div class="w-full flex flex-col gap-2 select-none ${this.disabled ? "opacity-50 pointer-events-none" : ""}">
9363
+ <!-- Slider Track Container -->
9364
+ <div
9365
+ class="relative w-full h-8 flex items-center cursor-pointer touch-none focus:outline-none focus-visible:ring-2 focus-visible:ring-[#006BFF] rounded-full"
9366
+ tabindex=${this.disabled ? -1 : 0}
9367
+ role="slider"
9368
+ aria-valuemin=${min}
9369
+ aria-valuemax=${max}
9370
+ aria-valuenow=${currentVal}
9371
+ aria-valuetext=${String(currentVal)}
9372
+ @pointerdown=${this._handlePointerDown}
9373
+ @keydown=${this._handleKeyDown}
9374
+ >
9375
+ <!-- Outer track padding container for exact knob alignment -->
9376
+ <div class="slider-track-container relative w-full h-3 rounded-full bg-[#C7DCFA] overflow-visible">
9377
+ <!-- Active Fill Track -->
9378
+ <div
9379
+ class="absolute left-0 top-0 bottom-0 rounded-full bg-[#006BFF] transition-all duration-150 ease-out"
9380
+ style="width: ${percent}%;"
9381
+ ></div>
9382
+
9383
+ <!-- Slider Thumb Knob -->
9384
+ <div
9385
+ class="absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-7 h-7 rounded-full bg-[#006BFF] border-2 border-white shadow-[0_2px_6px_rgba(0,0,0,0.2)] transition-all duration-150 ease-out cursor-grab active:cursor-grabbing hover:scale-105"
9386
+ style="left: ${percent}%;"
9387
+ ></div>
9388
+ </div>
9389
+ </div>
9390
+
9391
+ <!-- Labels below -->
9392
+ <div class="flex justify-between items-center text-sm font-semibold text-[#78787A] px-1">
9393
+ <span class="w-1/3 text-left cursor-pointer" @click=${() => !this.disabled && this._setValue(min)}>
9394
+ ${this.minTag}
9395
+ </span>
9396
+ <span class="w-1/3 text-center cursor-pointer" @click=${() => !this.disabled && this._setValue(mid)}>
9397
+ ${this.mediumTag}
9398
+ </span>
9399
+ <span class="w-1/3 text-right cursor-pointer" @click=${() => !this.disabled && this._setValue(max)}>
9400
+ ${this.maxTag}
9401
+ </span>
9402
+ </div>
9403
+ </div>
9404
+ `;
9405
+ }
9406
+ };
9407
+ __decorate([property({
9408
+ type: Number,
9409
+ reflect: true
9410
+ })], AxebowSelectorSlider.prototype, "quantity", void 0);
9411
+ __decorate([property()], AxebowSelectorSlider.prototype, "minTag", void 0);
9412
+ __decorate([property()], AxebowSelectorSlider.prototype, "mediumTag", void 0);
9413
+ __decorate([property()], AxebowSelectorSlider.prototype, "maxTag", void 0);
9414
+ __decorate([property({ type: Number })], AxebowSelectorSlider.prototype, "min", void 0);
9415
+ __decorate([property({ type: Number })], AxebowSelectorSlider.prototype, "max", void 0);
9416
+ __decorate([property({ type: Number })], AxebowSelectorSlider.prototype, "step", void 0);
9417
+ __decorate([property({ type: Boolean })], AxebowSelectorSlider.prototype, "disabled", void 0);
9418
+ __decorate([property()], AxebowSelectorSlider.prototype, "value", null);
9419
+ __decorate([query(".slider-track-container")], AxebowSelectorSlider.prototype, "_trackContainer", void 0);
9420
+ AxebowSelectorSlider = __decorate([customElement("axebow-selector-slider")], AxebowSelectorSlider);
9421
+ //#endregion
9422
+ //#region src/components/axebow-deploy-summary/axebow-deploy-summary.ts
9423
+ var AxebowDeploySummary = class AxebowDeploySummary extends LitElement {
9424
+ constructor(..._args) {
9425
+ super(..._args);
9426
+ this.summaryTitle = "";
9427
+ this.showDownloadButton = false;
9428
+ this.downloadLabel = "";
9429
+ this.currentStep = 0;
9430
+ }
9431
+ static {
9432
+ this.styles = [
9433
+ unsafeCSS(tailwind_default),
9434
+ axebowTheme,
9435
+ css`
9436
+ :host {
9437
+ display: block;
9438
+ height: 100%;
9439
+ }
9440
+ axebow-summary-card {
9441
+ display: block;
9442
+ height: 100%;
9443
+ }
9444
+ /* The plain, solid divider used between every summary section -
9445
+ matches whatever separates the step titles. */
9446
+ sl-divider.summary-title-divider {
9447
+ --color: var(--axebow-table-header-border, #dbdde4);
9448
+ --spacing: 0.75rem;
9449
+ }
9450
+ /* Dashed variant used inside the autoscaling summary. */
9451
+ sl-divider.summary-dashed-divider {
9452
+ --color: var(--axebow-base);
9453
+ --spacing: 0.75rem;
9454
+ border-top-style: dashed !important;
9455
+ }
9456
+ `
9457
+ ];
9458
+ }
9459
+ updated(changedProperties) {
9460
+ super.updated(changedProperties);
9461
+ if (changedProperties.has("currentStep")) {
9462
+ const oldStep = changedProperties.get("currentStep");
9463
+ if (oldStep !== void 0 && this.currentStep > oldStep) this._scrollToBottom();
9464
+ }
9465
+ }
9466
+ _scrollToBottom() {
9467
+ setTimeout(() => {
9468
+ const summaryCard = this.renderRoot.querySelector("axebow-summary-card");
9469
+ if (summaryCard && summaryCard.scrollToBottom) summaryCard.scrollToBottom();
9470
+ const container = this.renderRoot.querySelector(".overflow-y-auto");
9471
+ if (container) container.scrollTop = container.scrollHeight;
9472
+ }, 100);
9473
+ }
9474
+ render() {
9475
+ return html`
9476
+ <axebow-summary-card title="${this.summaryTitle}">
9477
+ ${this.showDownloadButton ? html`
9478
+ <axebow-button slot="header-actions" variant="text" size="medium" @click=${this._handleDownloadBundle}>
9479
+ <axebow-icon
9480
+ iconName="download_for_offline"
9481
+ slot="suffix"
9482
+ iconColor="var(--axebow-tertiary)"
9483
+ size="xl"
9484
+ ></axebow-icon>
9485
+ <span class="text-sm lg:text-base hidden lg:inline">${this.downloadLabel}</span>
9486
+ </axebow-button>
9487
+ ` : ""}
9488
+ ${this._renderDeploymentInfo()}
9489
+ <div class="h-px border-t border-dashed border-gray-400 my-4"></div>
9490
+ ${this._renderResourceLimits()}
9491
+ <sl-divider class="summary-title-divider"></sl-divider>
9492
+ <div class="flex-1 overflow-y-auto flex flex-col">
9493
+ ${this._renderIdentificationStep()} ${this._renderResourcesStep()} ${this._renderScalingStep()}
9494
+ ${this._renderChannelsStep()} ${this._renderConfigurationStep()}
9495
+ </div>
9496
+ </axebow-summary-card>
9497
+ `;
9498
+ }
9499
+ _renderDeploymentInfo() {
9500
+ const info = this.deploymentInfo;
8655
9501
  if (!info) return "";
8656
9502
  return html`
8657
9503
  <div class="flex flex-col gap-2">
@@ -10066,275 +10912,1145 @@ var AxebowResourceBoxForm = class AxebowResourceBoxForm extends LitElement {
10066
10912
  `;
10067
10913
  }
10068
10914
  render() {
10069
- const isDeleting = this.deleting;
10070
- const computedStatusColor = isDeleting ? "var(--axebow-error)" : this.statusColor;
10915
+ const isDeleting = this.deleting;
10916
+ const computedStatusColor = isDeleting ? "var(--axebow-error)" : this.statusColor;
10917
+ return html`
10918
+ <div
10919
+ class="flex flex-col gap-3 w-70.5 p-4 bg-white rounded-xl ${isDeleting ? "border border-solid border-[var(--axebow-error)]" : ""} ${isDeleting ? "pointer-events-none opacity-70 select-none" : ""} axebow-shadow-hover box-border"
10920
+ >
10921
+ <!-- Top Status Header -->
10922
+ <axebow-status
10923
+ .statusText=${this.statusText}
10924
+ .statusColor=${computedStatusColor}
10925
+ ?showTrash=${this.showTrash}
10926
+ ?deleting=${this.deleting}
10927
+ @delete=${this._handleDelete}
10928
+ ></axebow-status>
10929
+
10930
+ <!-- Form Fields List -->
10931
+ <div class="flex flex-col gap-2.5 w-full">
10932
+ ${this.items && this.items.length > 0 ? this.items.map((item) => this._renderField(isDeleting ? {
10933
+ ...item,
10934
+ type: "disabled"
10935
+ } : item)) : html`
10936
+ <div
10937
+ class="p-3 border border-dashed border-(--axebow-border-gray) rounded-lg text-center text-(--axebow-gray) text-xs"
10938
+ >
10939
+ No items configured.
10940
+ </div>
10941
+ `}
10942
+ </div>
10943
+ </div>
10944
+ `;
10945
+ }
10946
+ };
10947
+ __decorate([property({ type: String })], AxebowResourceBoxForm.prototype, "statusText", void 0);
10948
+ __decorate([property({ type: String })], AxebowResourceBoxForm.prototype, "statusColor", void 0);
10949
+ __decorate([property({ type: Boolean })], AxebowResourceBoxForm.prototype, "showTrash", void 0);
10950
+ __decorate([property({ type: Boolean })], AxebowResourceBoxForm.prototype, "deleting", void 0);
10951
+ __decorate([property({ type: Array })], AxebowResourceBoxForm.prototype, "items", void 0);
10952
+ __decorate([state()], AxebowResourceBoxForm.prototype, "_openMenuId", void 0);
10953
+ AxebowResourceBoxForm = __decorate([customElement("axebow-resource-box-form")], AxebowResourceBoxForm);
10954
+ //#endregion
10955
+ //#region src/components/axebow-manage-hyperlinks/axebow-manage-hyperlinks.ts
10956
+ var AxebowManageHyperlinks = class AxebowManageHyperlinks extends LitElement {
10957
+ constructor(..._args) {
10958
+ super(..._args);
10959
+ this.text = "";
10960
+ this.icon = "";
10961
+ this.color = "var(--axebow-tertiary)";
10962
+ this.iconColor = "";
10963
+ this.disabled = false;
10964
+ }
10965
+ static {
10966
+ this.styles = [unsafeCSS(tailwind_default), css`
10967
+ :host {
10968
+ display: inline-block;
10969
+ }
10970
+ button:hover:not(:disabled) {
10971
+ color: var(--axebow-gray) !important;
10972
+ }
10973
+ `];
10974
+ }
10975
+ _handleClick(e) {
10976
+ if (this.disabled) {
10977
+ e.preventDefault();
10978
+ e.stopPropagation();
10979
+ return;
10980
+ }
10981
+ this.dispatchEvent(new CustomEvent("hyperlink-click", {
10982
+ bubbles: true,
10983
+ composed: true,
10984
+ detail: { text: this.text }
10985
+ }));
10986
+ }
10987
+ render() {
10988
+ const buttonColor = this.color || "var(--axebow-tertiary)";
10989
+ const iconColorProp = this.iconColor || "currentColor";
10990
+ return html`
10991
+ <button
10992
+ type="button"
10993
+ ?disabled=${this.disabled}
10994
+ @click=${this._handleClick}
10995
+ style="color: ${buttonColor};"
10996
+ class="inline-flex items-center gap-1.5 bg-transparent border-none p-0 cursor-pointer font-semibold text-sm focus:outline-none transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
10997
+ >
10998
+ <span>${this.text}</span>
10999
+ ${this.icon ? html`<axebow-icon iconName="${this.icon}" iconColor="${iconColorProp}"></axebow-icon>` : ""}
11000
+ </button>`;
11001
+ }
11002
+ };
11003
+ __decorate([property({ type: String })], AxebowManageHyperlinks.prototype, "text", void 0);
11004
+ __decorate([property({ type: String })], AxebowManageHyperlinks.prototype, "icon", void 0);
11005
+ __decorate([property({ type: String })], AxebowManageHyperlinks.prototype, "color", void 0);
11006
+ __decorate([property({ type: String })], AxebowManageHyperlinks.prototype, "iconColor", void 0);
11007
+ __decorate([property({ type: Boolean })], AxebowManageHyperlinks.prototype, "disabled", void 0);
11008
+ AxebowManageHyperlinks = __decorate([customElement("axebow-manage-hyperlinks")], AxebowManageHyperlinks);
11009
+ //#endregion
11010
+ //#region src/components/axebow-box-section/axebow-box-section.ts
11011
+ var AxebowBoxSection = class AxebowBoxSection extends LitElement {
11012
+ constructor(..._args) {
11013
+ super(..._args);
11014
+ this.title = "";
11015
+ this.hyperlinks = [];
11016
+ this.showHyperlink = false;
11017
+ this.hyperlinkText = "";
11018
+ this.hyperlinkIcon = "";
11019
+ this.hyperlinkColor = "";
11020
+ this.hyperlinkDisabled = false;
11021
+ }
11022
+ static {
11023
+ this.styles = unsafeCSS(tailwind_default);
11024
+ }
11025
+ _handleItemClick(item, index) {
11026
+ if (item.onClick) item.onClick();
11027
+ this.dispatchEvent(new CustomEvent("hyperlink-click", {
11028
+ bubbles: true,
11029
+ composed: true,
11030
+ detail: {
11031
+ item,
11032
+ index,
11033
+ text: item.text
11034
+ }
11035
+ }));
11036
+ }
11037
+ render() {
11038
+ const itemsToRender = this.hyperlinks.length > 0 ? this.hyperlinks : this.showHyperlink || Boolean(this.hyperlinkText) ? [{
11039
+ text: this.hyperlinkText,
11040
+ icon: this.hyperlinkIcon,
11041
+ color: this.hyperlinkColor,
11042
+ disabled: this.hyperlinkDisabled
11043
+ }] : [];
11044
+ return html`
11045
+ <div class="flex flex-col rounded-md p-5 gap-4 bg-white">
11046
+ <div class="w-full flex justify-between items-center border-b border-solid border-[#DBDDE4] pb-3 gap-2">
11047
+ <span class="font-semibold uppercase text-(--axebow-primary)">${this.title}</span>
11048
+ <slot name="hyperlink">
11049
+ ${itemsToRender.length > 0 ? html`
11050
+ <div class="flex items-center gap-4">
11051
+ ${itemsToRender.map((item, index) => html`
11052
+ <axebow-manage-hyperlinks
11053
+ text="${item.text}"
11054
+ icon="${item.icon}"
11055
+ color="${item.color ?? ""}"
11056
+ ?disabled=${Boolean(item.disabled)}
11057
+ @hyperlink-click=${() => this._handleItemClick(item, index)}
11058
+ ></axebow-manage-hyperlinks>
11059
+ `)}
11060
+ </div>
11061
+ ` : ""}
11062
+ </slot>
11063
+ </div>
11064
+ <slot></slot>
11065
+ </div>`;
11066
+ }
11067
+ };
11068
+ __decorate([property({ type: String })], AxebowBoxSection.prototype, "title", void 0);
11069
+ __decorate([property({ type: Array })], AxebowBoxSection.prototype, "hyperlinks", void 0);
11070
+ __decorate([property({ type: Boolean })], AxebowBoxSection.prototype, "showHyperlink", void 0);
11071
+ __decorate([property({ type: String })], AxebowBoxSection.prototype, "hyperlinkText", void 0);
11072
+ __decorate([property({ type: String })], AxebowBoxSection.prototype, "hyperlinkIcon", void 0);
11073
+ __decorate([property({ type: String })], AxebowBoxSection.prototype, "hyperlinkColor", void 0);
11074
+ __decorate([property({ type: Boolean })], AxebowBoxSection.prototype, "hyperlinkDisabled", void 0);
11075
+ AxebowBoxSection = __decorate([customElement("axebow-box-section")], AxebowBoxSection);
11076
+ //#endregion
11077
+ //#region src/components/axebow-copy-box/axebow-copy-box.ts
11078
+ var AxebowCopyBox = class AxebowCopyBox extends LitElement {
11079
+ constructor(..._args) {
11080
+ super(..._args);
11081
+ this.value = "";
11082
+ this.copyValue = "";
11083
+ this.iconName = "content_copy";
11084
+ this.size = "lg";
11085
+ this.disabled = false;
11086
+ this._copied = false;
11087
+ }
11088
+ static {
11089
+ this.styles = unsafeCSS(tailwind_default);
11090
+ }
11091
+ async _handleCopy(e) {
11092
+ if (this.disabled) {
11093
+ e.preventDefault();
11094
+ e.stopPropagation();
11095
+ return;
11096
+ }
11097
+ let textToCopy = this.copyValue || this.value;
11098
+ if (!textToCopy) {
11099
+ const slot = this.shadowRoot?.querySelector("slot");
11100
+ if (slot) textToCopy = slot.assignedNodes({ flatten: true }).map((n) => n.textContent ?? "").join("").trim();
11101
+ if (!textToCopy) textToCopy = this.textContent?.trim() ?? "";
11102
+ }
11103
+ if (textToCopy) try {
11104
+ await navigator.clipboard.writeText(textToCopy);
11105
+ this._copied = true;
11106
+ setTimeout(() => {
11107
+ this._copied = false;
11108
+ }, 2e3);
11109
+ } catch (err) {
11110
+ console.error("Failed to copy text:", err);
11111
+ }
11112
+ this.dispatchEvent(new CustomEvent("copy", {
11113
+ bubbles: true,
11114
+ composed: true,
11115
+ detail: { value: textToCopy }
11116
+ }));
11117
+ }
11118
+ render() {
11119
+ const iconToShow = this._copied ? "check" : this.iconName;
11120
+ return html`
11121
+ <div
11122
+ @click=${this._handleCopy}
11123
+ class="h-10 w-10 bg-(--axebow-tertiary) hover:bg-(--axebow-gray) rounded-r-md flex items-center justify-center cursor-pointer transition-colors select-none ${this.disabled ? "opacity-50 cursor-not-allowed pointer-events-none" : ""}"
11124
+ title=${this._copied ? "Copied!" : "Copy"}
11125
+ >
11126
+ <axebow-icon iconName="${iconToShow}" iconColor="white" size="${this.size}"></axebow-icon>
11127
+ <slot class="hidden"></slot>
11128
+ </div>
11129
+ `;
11130
+ }
11131
+ };
11132
+ __decorate([property({ type: String })], AxebowCopyBox.prototype, "value", void 0);
11133
+ __decorate([property({ type: String })], AxebowCopyBox.prototype, "copyValue", void 0);
11134
+ __decorate([property({ type: String })], AxebowCopyBox.prototype, "iconName", void 0);
11135
+ __decorate([property({ type: String })], AxebowCopyBox.prototype, "size", void 0);
11136
+ __decorate([property({ type: Boolean })], AxebowCopyBox.prototype, "disabled", void 0);
11137
+ __decorate([state()], AxebowCopyBox.prototype, "_copied", void 0);
11138
+ AxebowCopyBox = __decorate([customElement("axebow-copy-box")], AxebowCopyBox);
11139
+ //#endregion
11140
+ //#region src/components/axebow-tabs-submenu/axebow-tabs-submenu.ts
11141
+ var AxebowTabsSubmenu = class AxebowTabsSubmenu extends LitElement {
11142
+ constructor(..._args) {
11143
+ super(..._args);
11144
+ this.tabs = [];
11145
+ this.activeTab = 0;
11146
+ this.disabled = false;
11147
+ this.stretch = true;
11148
+ }
11149
+ static {
11150
+ this.styles = unsafeCSS(tailwind_default);
11151
+ }
11152
+ _handleTabChange(e) {
11153
+ this.activeTab = e.detail.index;
11154
+ this.dispatchEvent(new CustomEvent("tab-change", {
11155
+ bubbles: true,
11156
+ composed: true,
11157
+ detail: e.detail
11158
+ }));
11159
+ }
11160
+ render() {
11161
+ return html`
11162
+ <axebow-tab-selector
11163
+ variant="sections-tab"
11164
+ .activeTab=${this.activeTab}
11165
+ ?disabled=${this.disabled}
11166
+ .stretch=${this.stretch}
11167
+ @tab-change=${this._handleTabChange}
11168
+ >
11169
+ ${this.tabs.map((tab, i) => html`
11170
+ <span slot="tab-label-${i}" ?disabled=${tab.disabled ?? false}>
11171
+ ${tab.label}
11172
+ </span>
11173
+ `)}
11174
+ </axebow-tab-selector>
11175
+ `;
11176
+ }
11177
+ };
11178
+ __decorate([property({ type: Array })], AxebowTabsSubmenu.prototype, "tabs", void 0);
11179
+ __decorate([property({ type: Number })], AxebowTabsSubmenu.prototype, "activeTab", void 0);
11180
+ __decorate([property({ type: Boolean })], AxebowTabsSubmenu.prototype, "disabled", void 0);
11181
+ __decorate([property({ type: Boolean })], AxebowTabsSubmenu.prototype, "stretch", void 0);
11182
+ AxebowTabsSubmenu = __decorate([customElement("axebow-tabs-submenu")], AxebowTabsSubmenu);
11183
+ //#endregion
11184
+ //#region src/components/axebow-progress-bar/axebow-progress-bar.ts
11185
+ var AxebowProgressBar = class AxebowProgressBar extends LitElement {
11186
+ constructor(..._args) {
11187
+ super(..._args);
11188
+ this.current = 0;
11189
+ this.max = 100;
11190
+ this.compact = false;
11191
+ }
11192
+ static {
11193
+ this.styles = [unsafeCSS(tailwind_default), css`
11194
+ sl-progress-bar {
11195
+ flex: 1;
11196
+ max-width: 120px;
11197
+ }
11198
+ :host([compact]) sl-progress-bar {
11199
+ flex: none;
11200
+ width: 3.75rem;
11201
+ max-width: 3.75rem;
11202
+ }
11203
+ `];
11204
+ }
11205
+ _percentage() {
11206
+ return Math.min(this.current / this.max * 100, 100);
11207
+ }
11208
+ _indicatorColor() {
11209
+ const pct = this.current / this.max * 100;
11210
+ if (pct < 70) return "var(--axebow-tertiary)";
11211
+ if (pct < 90) return "var(--axebow-warning)";
11212
+ return "var(--axebow-error)";
11213
+ }
11214
+ render() {
11215
+ return html`
11216
+ <div class="flex items-center ${this.compact ? "gap-1.25" : "gap-2 min-w-50"}">
11217
+ <span class="${this.compact ? "text-base" : "text-sm min-w-10 text-right"} text-(--axebow-gray)"
11218
+ >${this.current.toFixed(2)}</span
11219
+ >
11220
+ <sl-progress-bar
11221
+ style="--height: ${this.compact ? "0.6875rem" : "10px"}; --indicator-color: ${this._indicatorColor()};"
11222
+ value="${this._percentage()}"
11223
+ ></sl-progress-bar>
11224
+ <span class="${this.compact ? "text-base" : "text-sm min-w-10"} text-(--axebow-gray)"
11225
+ >${this.max.toFixed(2)}</span
11226
+ >
11227
+ </div>
11228
+ `;
11229
+ }
11230
+ };
11231
+ __decorate([property({ type: Number })], AxebowProgressBar.prototype, "current", void 0);
11232
+ __decorate([property({ type: Number })], AxebowProgressBar.prototype, "max", void 0);
11233
+ __decorate([property({
11234
+ type: Boolean,
11235
+ reflect: true
11236
+ })], AxebowProgressBar.prototype, "compact", void 0);
11237
+ AxebowProgressBar = __decorate([customElement("axebow-progress-bar")], AxebowProgressBar);
11238
+ //#endregion
11239
+ //#region src/components/axebow-usage-tooltip/axebow-usage-tooltip.ts
11240
+ var AxebowUsageTooltip = class AxebowUsageTooltip extends LitElement {
11241
+ constructor(..._args) {
11242
+ super(..._args);
11243
+ this.color = "var(--axebow-primary)";
11244
+ this.storageLabel = "";
11245
+ this.volatileLabel = "";
11246
+ this.nonRepPersLabel = "";
11247
+ this.persistentRepLabel = "";
11248
+ }
11249
+ static {
11250
+ this.styles = [unsafeCSS(tailwind_default), css`
11251
+ :host {
11252
+ display: flex;
11253
+ align-items: center;
11254
+ justify-content: center;
11255
+ }
11256
+ axebow-tooltip::part(body) {
11257
+ background-color: var(--axebow-white);
11258
+ color: var(--axebow-primary);
11259
+ padding: 1rem;
11260
+ border: 3px solid var(--axebow-table-border);
11261
+ width: 300px;
11262
+ }
11263
+ sl-divider.dotted-divider {
11264
+ border-top: 1.5px dashed var(--axebow-light-gray);
11265
+ }
11266
+ `];
11267
+ }
11268
+ render() {
11269
+ if (!this.usage) return null;
11270
+ const { current, limit } = this.usage;
10071
11271
  return html`
10072
- <div
10073
- class="flex flex-col gap-3 w-70.5 p-4 bg-white rounded-xl ${isDeleting ? "border border-solid border-[var(--axebow-error)]" : ""} ${isDeleting ? "pointer-events-none opacity-70 select-none" : ""} axebow-shadow-hover box-border"
10074
- >
10075
- <!-- Top Status Header -->
10076
- <axebow-status
10077
- .statusText=${this.statusText}
10078
- .statusColor=${computedStatusColor}
10079
- ?showTrash=${this.showTrash}
10080
- ?deleting=${this.deleting}
10081
- @delete=${this._handleDelete}
10082
- ></axebow-status>
10083
-
10084
- <!-- Form Fields List -->
10085
- <div class="flex flex-col gap-2.5 w-full">
10086
- ${this.items && this.items.length > 0 ? this.items.map((item) => this._renderField(isDeleting ? {
10087
- ...item,
10088
- type: "disabled"
10089
- } : item)) : html`
10090
- <div
10091
- class="p-3 border border-dashed border-(--axebow-border-gray) rounded-lg text-center text-(--axebow-gray) text-xs"
10092
- >
10093
- No items configured.
10094
- </div>
10095
- `}
11272
+ <axebow-tooltip placement="right">
11273
+ <div slot="content" class="mt-3">
11274
+ <div class="flex justify-between items-center">
11275
+ <axebow-icon iconName="database" size="xl"></axebow-icon>
11276
+ <span>${this.storageLabel} </span>
11277
+ <span class="tooltip-value"> ${current.storage} / ${limit.storage.max} GB</span>
11278
+ </div>
11279
+ <sl-divider class="dotted-divider"></sl-divider>
11280
+ <div class="flex space-between ml-2 items-center gap-1">
11281
+ <axebow-icon iconName="subdirectory_arrow_right" size="xl"></axebow-icon>
11282
+ <span>${this.volatileLabel} </span>
11283
+ <span class="tooltip-value"> ${current.volatileStorage} / ${limit.volatileStorage.max} GB</span>
11284
+ </div>
11285
+ <sl-divider class="dotted-divider"></sl-divider>
11286
+ <div class="flex space-between ml-2 items-center gap-1">
11287
+ <axebow-icon iconName="subdirectory_arrow_right" size="xl"></axebow-icon>
11288
+ <span>${this.nonRepPersLabel} </span>
11289
+ <span class="tooltip-value"> ${current.nonReplicatedStorage} / ${limit.nonReplicatedStorage.max} GB</span>
11290
+ </div>
11291
+ <sl-divider class="dotted-divider"></sl-divider>
11292
+ <div class="flex space-between ml-2 items-center gap-1">
11293
+ <axebow-icon iconName="subdirectory_arrow_right" size="xl"></axebow-icon>
11294
+ <span>${this.persistentRepLabel} </span>
11295
+ <span class="tooltip-value"> ${current.persistentStorage} / ${limit.persistentStorage.max} GB</span>
11296
+ </div>
10096
11297
  </div>
10097
- </div>
11298
+ <axebow-icon iconName="info" size="md" class="cursor-pointer" iconColor="${this.color}"></axebow-icon>
11299
+ </axebow-tooltip>
10098
11300
  `;
10099
11301
  }
10100
11302
  };
10101
- __decorate([property({ type: String })], AxebowResourceBoxForm.prototype, "statusText", void 0);
10102
- __decorate([property({ type: String })], AxebowResourceBoxForm.prototype, "statusColor", void 0);
10103
- __decorate([property({ type: Boolean })], AxebowResourceBoxForm.prototype, "showTrash", void 0);
10104
- __decorate([property({ type: Boolean })], AxebowResourceBoxForm.prototype, "deleting", void 0);
10105
- __decorate([property({ type: Array })], AxebowResourceBoxForm.prototype, "items", void 0);
10106
- __decorate([state()], AxebowResourceBoxForm.prototype, "_openMenuId", void 0);
10107
- AxebowResourceBoxForm = __decorate([customElement("axebow-resource-box-form")], AxebowResourceBoxForm);
11303
+ __decorate([property({ type: Object })], AxebowUsageTooltip.prototype, "usage", void 0);
11304
+ __decorate([property({ type: String })], AxebowUsageTooltip.prototype, "color", void 0);
11305
+ __decorate([property({ type: String })], AxebowUsageTooltip.prototype, "storageLabel", void 0);
11306
+ __decorate([property({ type: String })], AxebowUsageTooltip.prototype, "volatileLabel", void 0);
11307
+ __decorate([property({ type: String })], AxebowUsageTooltip.prototype, "nonRepPersLabel", void 0);
11308
+ __decorate([property({ type: String })], AxebowUsageTooltip.prototype, "persistentRepLabel", void 0);
11309
+ AxebowUsageTooltip = __decorate([customElement("axebow-usage-tooltip")], AxebowUsageTooltip);
10108
11310
  //#endregion
10109
- //#region src/components/axebow-manage-hyperlinks/axebow-manage-hyperlinks.ts
10110
- var AxebowManageHyperlinks = class AxebowManageHyperlinks extends LitElement {
11311
+ //#region src/components/axebow-instances-table/axebow-instances-table.ts
11312
+ var AxebowInstancesTable = class AxebowInstancesTable extends LitElement {
10111
11313
  constructor(..._args) {
10112
11314
  super(..._args);
10113
- this.text = "";
10114
- this.icon = "";
10115
- this.color = "var(--axebow-tertiary)";
10116
- this.iconColor = "";
10117
- this.disabled = false;
11315
+ this.instances = [];
11316
+ this.descriptionLabel = "";
11317
+ this.noInstancesLabel = "";
11318
+ this.colInstanceLabel = "";
11319
+ this.colCpuLabel = "";
11320
+ this.colMemoryLabel = "";
11321
+ this.colStorageLabel = "";
11322
+ this.colActionsLabel = "";
11323
+ this.rebootLabel = "";
11324
+ this.rebootAllLabel = "";
11325
+ this._expandedInstances = /* @__PURE__ */ new Set();
10118
11326
  }
10119
11327
  static {
10120
- this.styles = [unsafeCSS(tailwind_default), css`
10121
- :host {
10122
- display: inline-block;
10123
- }
10124
- button:hover:not(:disabled) {
10125
- color: var(--axebow-gray) !important;
10126
- }
10127
- `];
11328
+ this.styles = [
11329
+ unsafeCSS(tailwind_default),
11330
+ axebowTheme,
11331
+ css`
11332
+ :host {
11333
+ display: block;
11334
+ }
11335
+ .restart-button::part(base) {
11336
+ color: var(--axebow-tertiary);
11337
+ font-size: 0.875rem !important;
11338
+ }
11339
+ .restart-button::part(base):hover {
11340
+ color: var(--axebow-error);
11341
+ background-color: white;
11342
+ }
11343
+ .reboot-all-button::part(base) {
11344
+ color: var(--axebow-error);
11345
+ background-color: transparent;
11346
+ border-color: var(--axebow-error);
11347
+ }
11348
+ .reboot-all-button::part(base):hover {
11349
+ color: white;
11350
+ background-color: var(--axebow-error);
11351
+ border-color: var(--axebow-error);
11352
+ }
11353
+ `
11354
+ ];
10128
11355
  }
10129
- _handleClick(e) {
10130
- if (this.disabled) {
10131
- e.preventDefault();
10132
- e.stopPropagation();
10133
- return;
10134
- }
10135
- this.dispatchEvent(new CustomEvent("hyperlink-click", {
11356
+ _toggleInstance(instanceId) {
11357
+ if (this._expandedInstances.has(instanceId)) this._expandedInstances.delete(instanceId);
11358
+ else this._expandedInstances.add(instanceId);
11359
+ this.requestUpdate();
11360
+ }
11361
+ _isInstanceExpanded(instanceId) {
11362
+ return this._expandedInstances.has(instanceId);
11363
+ }
11364
+ _requestReboot(instanceName) {
11365
+ this.dispatchEvent(new CustomEvent("reboot-request", {
11366
+ detail: { instanceName },
10136
11367
  bubbles: true,
10137
- composed: true,
10138
- detail: { text: this.text }
11368
+ composed: true
10139
11369
  }));
10140
11370
  }
11371
+ _renderHeaderSeparator() {
11372
+ return html`<span class="w-px h-4 bg-(--axebow-gray) shrink-0"></span>`;
11373
+ }
11374
+ _renderHeader() {
11375
+ return html`
11376
+ <div class="w-186.5 h-7.25 box-border flex items-center p-1.5 gap-1 bg-white">
11377
+ <span class="w-48.5 h-4.25 text-base font-semibold text-(--axebow-primary)">${this.colInstanceLabel}</span>
11378
+ ${this._renderHeaderSeparator()}
11379
+ <span class="w-38.5 h-4.25 text-base font-semibold text-(--axebow-primary)">${this.colCpuLabel}</span>
11380
+ ${this._renderHeaderSeparator()}
11381
+ <span class="w-38.5 h-4.25 text-base font-semibold text-(--axebow-primary)">${this.colMemoryLabel}</span>
11382
+ ${this._renderHeaderSeparator()}
11383
+ <span class="w-25.5 h-4.25 text-base font-semibold text-(--axebow-primary)">${this.colStorageLabel}</span>
11384
+ ${this._renderHeaderSeparator()}
11385
+ <span class="w-25.5 h-4.25 text-base font-semibold text-(--axebow-primary)">${this.colActionsLabel}</span>
11386
+ </div>
11387
+ `;
11388
+ }
11389
+ _renderStatusBadge(text, isPositive) {
11390
+ return html`
11391
+ <div
11392
+ class="w-16.5 h-4.75 box-border flex items-center justify-center rounded ${isPositive ? "bg-(--axebow-success) text-white uppercase text-sm" : "bg-red-100 text-red-800 text-base"}"
11393
+ >
11394
+ ${text}
11395
+ </div>
11396
+ `;
11397
+ }
11398
+ _renderProgressCell(progress) {
11399
+ return html`
11400
+ <div class="w-39.5 h-4.25 box-border">
11401
+ <axebow-progress-bar compact current="${progress.current}" max="${progress.max}"></axebow-progress-bar>
11402
+ </div>
11403
+ `;
11404
+ }
11405
+ _renderStorageCell(storageLabel, usage) {
11406
+ return html`
11407
+ <div class="w-25.25 h-4.25 box-border flex items-center gap-1.5">
11408
+ <div class="w-12.75 h-4.25 box-border flex items-center text-base pl-4.25 shrink-0">${storageLabel}</div>
11409
+ <div class="w-3.5 h-3.5 flex items-center justify-center pr-3.25 shrink-0">
11410
+ <axebow-usage-tooltip
11411
+ .usage=${usage}
11412
+ storageLabel=${this.storageTooltipLabels.storage}
11413
+ volatileLabel=${this.storageTooltipLabels.volatile}
11414
+ nonRepPersLabel=${this.storageTooltipLabels.nonRepPers}
11415
+ persistentRepLabel=${this.storageTooltipLabels.persistentRep}
11416
+ ></axebow-usage-tooltip>
11417
+ </div>
11418
+ </div>
11419
+ `;
11420
+ }
11421
+ _renderInstanceRow(instance) {
11422
+ return html`
11423
+ <div
11424
+ class="w-186.5 h-14 box-border flex items-center gap-1 p-1.5 border-t border-(--axebow-table-border) cursor-pointer"
11425
+ @click="${() => this._toggleInstance(instance.id)}"
11426
+ >
11427
+ <div class="w-48 h-10 box-border flex flex-col gap-1 text-(--axebow-tertiary)">
11428
+ <div class="flex items-center gap-1 min-w-0">
11429
+ <axebow-icon
11430
+ iconName="${this._isInstanceExpanded(instance.id) ? "collapse_all" : "expand_all"}"
11431
+ iconColor="var(--axebow-tertiary)"
11432
+ size="md"
11433
+ class="shrink-0"
11434
+ ></axebow-icon>
11435
+ <span class="text-base truncate">${instance.name}</span>
11436
+ </div>
11437
+ ${this._renderStatusBadge(instance.statusLabel, instance.isRunning)}
11438
+ </div>
11439
+ ${this._renderProgressCell(instance.cpu)} ${this._renderProgressCell(instance.memory)}
11440
+ ${this._renderStorageCell(instance.storageLabel, instance.usage)}
11441
+ <div class="w-25.5 h-4.25 box-border flex items-center">
11442
+ <axebow-button
11443
+ class="restart-button"
11444
+ variant="text"
11445
+ fixedWidth="5.5625rem"
11446
+ fixedHeight="1.0625rem"
11447
+ @click="${(e) => {
11448
+ e.stopPropagation();
11449
+ this._requestReboot(instance.name);
11450
+ }}"
11451
+ >
11452
+ ${this.rebootLabel}
11453
+ </axebow-button>
11454
+ </div>
11455
+ </div>
11456
+ ${this._isInstanceExpanded(instance.id) && instance.containers.length > 0 ? instance.containers.map((container) => html`
11457
+ <div
11458
+ class="w-186.5 h-14 box-border flex items-center gap-1 p-1.5 border-t border-(--axebow-table-border)"
11459
+ >
11460
+ <div class="w-48 h-10 box-border flex flex-col gap-1">
11461
+ <div class="flex items-center gap-1 min-w-0">
11462
+ <axebow-icon iconName="subdirectory_arrow_right" size="md" class="shrink-0"></axebow-icon>
11463
+ <span class="text-base truncate">${container.name}</span>
11464
+ </div>
11465
+ ${this._renderStatusBadge(container.statusLabel, container.isReady)}
11466
+ </div>
11467
+ ${this._renderProgressCell(container.cpu)} ${this._renderProgressCell(container.memory)}
11468
+ <div class="w-25.25 h-4.25 box-border flex items-center text-base">-</div>
11469
+ <div class="w-25.5 h-4.25 box-border flex items-center text-base">-</div>
11470
+ </div>
11471
+ `) : ""}
11472
+ `;
11473
+ }
10141
11474
  render() {
10142
- const buttonColor = this.color || "var(--axebow-tertiary)";
10143
- const iconColorProp = this.iconColor || "currentColor";
11475
+ if (!this.instances.length) return html`<p>${this.noInstancesLabel}</p>`;
10144
11476
  return html`
10145
- <button
10146
- type="button"
10147
- ?disabled=${this.disabled}
10148
- @click=${this._handleClick}
10149
- style="color: ${buttonColor};"
10150
- class="inline-flex items-center gap-1.5 bg-transparent border-none p-0 cursor-pointer font-semibold text-sm focus:outline-none transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
10151
- >
10152
- <span>${this.text}</span>
10153
- ${this.icon ? html`<axebow-icon iconName="${this.icon}" iconColor="${iconColorProp}"></axebow-icon>` : ""}
10154
- </button>`;
11477
+ <p class="text-black mb-4">${this.descriptionLabel}</p>
11478
+ <div class="w-full">
11479
+ <div class="w-186.5 rounded-lg overflow-hidden border border-black/10">
11480
+ ${this._renderHeader()} ${this.instances.map((instance) => this._renderInstanceRow(instance))}
11481
+ </div>
11482
+ </div>
11483
+ <div class="flex justify-end mt-4">
11484
+ <axebow-button variant="primary" outlined class="reboot-all-button" @click="${() => this._requestReboot(null)}">
11485
+ ${this.rebootAllLabel}
11486
+ </axebow-button>
11487
+ </div>
11488
+ `;
10155
11489
  }
10156
11490
  };
10157
- __decorate([property({ type: String })], AxebowManageHyperlinks.prototype, "text", void 0);
10158
- __decorate([property({ type: String })], AxebowManageHyperlinks.prototype, "icon", void 0);
10159
- __decorate([property({ type: String })], AxebowManageHyperlinks.prototype, "color", void 0);
10160
- __decorate([property({ type: String })], AxebowManageHyperlinks.prototype, "iconColor", void 0);
10161
- __decorate([property({ type: Boolean })], AxebowManageHyperlinks.prototype, "disabled", void 0);
10162
- AxebowManageHyperlinks = __decorate([customElement("axebow-manage-hyperlinks")], AxebowManageHyperlinks);
11491
+ __decorate([property({ attribute: false })], AxebowInstancesTable.prototype, "instances", void 0);
11492
+ __decorate([property({ type: String })], AxebowInstancesTable.prototype, "descriptionLabel", void 0);
11493
+ __decorate([property({ type: String })], AxebowInstancesTable.prototype, "noInstancesLabel", void 0);
11494
+ __decorate([property({ type: String })], AxebowInstancesTable.prototype, "colInstanceLabel", void 0);
11495
+ __decorate([property({ type: String })], AxebowInstancesTable.prototype, "colCpuLabel", void 0);
11496
+ __decorate([property({ type: String })], AxebowInstancesTable.prototype, "colMemoryLabel", void 0);
11497
+ __decorate([property({ type: String })], AxebowInstancesTable.prototype, "colStorageLabel", void 0);
11498
+ __decorate([property({ type: String })], AxebowInstancesTable.prototype, "colActionsLabel", void 0);
11499
+ __decorate([property({ type: String })], AxebowInstancesTable.prototype, "rebootLabel", void 0);
11500
+ __decorate([property({ type: String })], AxebowInstancesTable.prototype, "rebootAllLabel", void 0);
11501
+ __decorate([property({ attribute: false })], AxebowInstancesTable.prototype, "storageTooltipLabels", void 0);
11502
+ __decorate([state()], AxebowInstancesTable.prototype, "_expandedInstances", void 0);
11503
+ AxebowInstancesTable = __decorate([customElement("axebow-instances-table")], AxebowInstancesTable);
10163
11504
  //#endregion
10164
- //#region src/components/axebow-box-section/axebow-box-section.ts
10165
- var AxebowBoxSection = class AxebowBoxSection extends LitElement {
11505
+ //#region src/components/axebow-tenants-table/axebow-tenants-table.ts
11506
+ var AxebowTenantsTable = class AxebowTenantsTable extends LitElement {
10166
11507
  constructor(..._args) {
10167
11508
  super(..._args);
10168
- this.title = "";
10169
- this.hyperlinks = [];
10170
- this.showHyperlink = false;
10171
- this.hyperlinkText = "";
10172
- this.hyperlinkIcon = "";
10173
- this.hyperlinkColor = "";
10174
- this.hyperlinkDisabled = false;
11509
+ this.accounts = [];
11510
+ this.noAccountsLabel = "";
11511
+ this.colAccountLabel = "";
11512
+ this.colVcpuLabel = "";
11513
+ this.colMemoryLabel = "";
11514
+ this.colStorageLabel = "";
11515
+ this._expandedAccounts = /* @__PURE__ */ new Set();
10175
11516
  }
10176
11517
  static {
10177
- this.styles = unsafeCSS(tailwind_default);
11518
+ this.styles = [unsafeCSS(tailwind_default), axebowTheme];
10178
11519
  }
10179
- _handleItemClick(item, index) {
10180
- if (item.onClick) item.onClick();
10181
- this.dispatchEvent(new CustomEvent("hyperlink-click", {
10182
- bubbles: true,
10183
- composed: true,
10184
- detail: {
10185
- item,
10186
- index,
10187
- text: item.text
10188
- }
10189
- }));
11520
+ _toggleAccount(accountName) {
11521
+ if (this._expandedAccounts.has(accountName)) this._expandedAccounts.delete(accountName);
11522
+ else this._expandedAccounts.add(accountName);
11523
+ this.requestUpdate();
11524
+ }
11525
+ _isAccountExpanded(accountName) {
11526
+ return this._expandedAccounts.has(accountName);
11527
+ }
11528
+ _renderTooltip(usage) {
11529
+ return html`
11530
+ <axebow-usage-tooltip
11531
+ .usage=${usage}
11532
+ storageLabel=${this.storageTooltipLabels.storage}
11533
+ volatileLabel=${this.storageTooltipLabels.volatile}
11534
+ nonRepPersLabel=${this.storageTooltipLabels.nonRepPers}
11535
+ persistentRepLabel=${this.storageTooltipLabels.persistentRep}
11536
+ ></axebow-usage-tooltip>
11537
+ `;
11538
+ }
11539
+ render() {
11540
+ if (!this.accounts.length) return html`<p>${this.noAccountsLabel}</p>`;
11541
+ return html`
11542
+ <table class="w-full border-collapse bg-white rounded-lg">
11543
+ <thead>
11544
+ <tr>
11545
+ <th class="border border-(--axebow-table-border) p-2 text-left rounded-lg">${this.colAccountLabel}</th>
11546
+ <th class="border border-(--axebow-table-border) p-2 text-left rounded-lg">${this.colVcpuLabel}</th>
11547
+ <th class="border border-(--axebow-table-border) p-2 text-left rounded-lg">${this.colMemoryLabel}</th>
11548
+ <th class="border border-(--axebow-table-border) p-2 text-left rounded-lg">${this.colStorageLabel}</th>
11549
+ </tr>
11550
+ </thead>
11551
+ <tbody>
11552
+ ${this.accounts.map((account) => html`
11553
+ <tr class="cursor-pointer" @click="${() => this._toggleAccount(account.name)}">
11554
+ <td class="border border-(--axebow-table-border) p-2 rounded-lg text-(--axebow-tertiary)">
11555
+ ${this._isAccountExpanded(account.name) ? html`<axebow-icon
11556
+ iconName="collapse_all"
11557
+ class="mr-1"
11558
+ iconColor="var(--axebow-tertiary)"
11559
+ size="md"
11560
+ ></axebow-icon>` : html`<axebow-icon
11561
+ iconName="expand_all"
11562
+ class="mr-1"
11563
+ iconColor="var(--axebow-tertiary)"
11564
+ size="md"
11565
+ ></axebow-icon>`}
11566
+ ${account.name}
11567
+ </td>
11568
+ <td class="border border-(--axebow-table-border) p-2 rounded-lg">${account.cpu}</td>
11569
+ <td class="border border-(--axebow-table-border) p-2 rounded-lg">${account.memory}</td>
11570
+ <td class="border border-(--axebow-table-border) p-2 rounded-lg">
11571
+ ${account.storage} ${this._renderTooltip(account.usage)}
11572
+ </td>
11573
+ </tr>
11574
+ ${this._isAccountExpanded(account.name) ? account.environments.map((environment) => html`
11575
+ <tr>
11576
+ <td class="border border-(--axebow-table-border) p-2 rounded-lg">
11577
+ <axebow-icon iconName="subdirectory_arrow_right" class="mr-1" size="md"></axebow-icon>
11578
+ <span>${environment.name}</span>
11579
+ </td>
11580
+ <td class="border border-(--axebow-table-border) p-2 rounded-lg">${environment.cpu}</td>
11581
+ <td class="border border-(--axebow-table-border) p-2 rounded-lg">${environment.memory}</td>
11582
+ <td class="border border-(--axebow-table-border) p-2 rounded-lg">
11583
+ ${environment.storageTotal} ${this._renderTooltip(environment.usage)}
11584
+ </td>
11585
+ </tr>
11586
+ `) : ""}
11587
+ `)}
11588
+ </tbody>
11589
+ </table>
11590
+ `;
11591
+ }
11592
+ };
11593
+ __decorate([property({ attribute: false })], AxebowTenantsTable.prototype, "accounts", void 0);
11594
+ __decorate([property({ type: String })], AxebowTenantsTable.prototype, "noAccountsLabel", void 0);
11595
+ __decorate([property({ type: String })], AxebowTenantsTable.prototype, "colAccountLabel", void 0);
11596
+ __decorate([property({ type: String })], AxebowTenantsTable.prototype, "colVcpuLabel", void 0);
11597
+ __decorate([property({ type: String })], AxebowTenantsTable.prototype, "colMemoryLabel", void 0);
11598
+ __decorate([property({ type: String })], AxebowTenantsTable.prototype, "colStorageLabel", void 0);
11599
+ __decorate([property({ attribute: false })], AxebowTenantsTable.prototype, "storageTooltipLabels", void 0);
11600
+ __decorate([state()], AxebowTenantsTable.prototype, "_expandedAccounts", void 0);
11601
+ AxebowTenantsTable = __decorate([customElement("axebow-tenants-table")], AxebowTenantsTable);
11602
+ //#endregion
11603
+ //#region src/components/axebow-expandable-card/axebow-expandable-card.ts
11604
+ var AxebowExpandableCard = class AxebowExpandableCard extends LitElement {
11605
+ static {
11606
+ this.styles = [unsafeCSS(tailwind_default), css`
11607
+ :host {
11608
+ display: block;
11609
+ }
11610
+ `];
10190
11611
  }
10191
11612
  render() {
10192
- const itemsToRender = this.hyperlinks.length > 0 ? this.hyperlinks : this.showHyperlink || Boolean(this.hyperlinkText) ? [{
10193
- text: this.hyperlinkText,
10194
- icon: this.hyperlinkIcon,
10195
- color: this.hyperlinkColor,
10196
- disabled: this.hyperlinkDisabled
10197
- }] : [];
10198
11613
  return html`
10199
- <div class="flex flex-col rounded-md p-5 gap-4 bg-white">
10200
- <div class="w-full flex justify-between items-center border-b border-solid border-[#DBDDE4] pb-3 gap-2">
10201
- <span class="font-semibold uppercase text-(--axebow-primary)">${this.title}</span>
10202
- <slot name="hyperlink">
10203
- ${itemsToRender.length > 0 ? html`
10204
- <div class="flex items-center gap-4">
10205
- ${itemsToRender.map((item, index) => html`
10206
- <axebow-manage-hyperlinks
10207
- text="${item.text}"
10208
- icon="${item.icon}"
10209
- color="${item.color ?? ""}"
10210
- ?disabled=${Boolean(item.disabled)}
10211
- @hyperlink-click=${() => this._handleItemClick(item, index)}
10212
- ></axebow-manage-hyperlinks>
10213
- `)}
10214
- </div>
10215
- ` : ""}
10216
- </slot>
10217
- </div>
10218
- <slot></slot>
10219
- </div>`;
11614
+ <div class="box-border p-4 bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
11615
+ <slot></slot>
11616
+ </div>
11617
+ `;
10220
11618
  }
10221
11619
  };
10222
- __decorate([property({ type: String })], AxebowBoxSection.prototype, "title", void 0);
10223
- __decorate([property({ type: Array })], AxebowBoxSection.prototype, "hyperlinks", void 0);
10224
- __decorate([property({ type: Boolean })], AxebowBoxSection.prototype, "showHyperlink", void 0);
10225
- __decorate([property({ type: String })], AxebowBoxSection.prototype, "hyperlinkText", void 0);
10226
- __decorate([property({ type: String })], AxebowBoxSection.prototype, "hyperlinkIcon", void 0);
10227
- __decorate([property({ type: String })], AxebowBoxSection.prototype, "hyperlinkColor", void 0);
10228
- __decorate([property({ type: Boolean })], AxebowBoxSection.prototype, "hyperlinkDisabled", void 0);
10229
- AxebowBoxSection = __decorate([customElement("axebow-box-section")], AxebowBoxSection);
11620
+ AxebowExpandableCard = __decorate([customElement("axebow-expandable-card")], AxebowExpandableCard);
10230
11621
  //#endregion
10231
- //#region src/components/axebow-copy-box/axebow-copy-box.ts
10232
- var AxebowCopyBox = class AxebowCopyBox extends LitElement {
11622
+ //#region src/components/axebow-undeploy-card/axebow-undeploy-card.ts
11623
+ var AxebowUndeployCard = class AxebowUndeployCard extends LitElement {
10233
11624
  constructor(..._args) {
10234
11625
  super(..._args);
11626
+ this.title = "";
11627
+ this.deletePrefix = "";
11628
+ this.serviceName = "";
11629
+ this.deleteSuffix = "";
11630
+ this.warningPrefix = "";
11631
+ this.warningBold = "";
11632
+ this.confirmText = "";
11633
+ this.confirmLabelPrefix = "";
11634
+ this.confirmLabelHighlight = "";
11635
+ this.placeholder = "";
10235
11636
  this.value = "";
10236
- this.copyValue = "";
10237
- this.iconName = "content_copy";
10238
- this.size = "lg";
10239
- this.disabled = false;
10240
- this._copied = false;
11637
+ this.buttonLabel = "";
11638
+ this.buttonDisabled = false;
11639
+ this.isSubmitting = false;
11640
+ this.loadingLabel = "";
10241
11641
  }
10242
11642
  static {
10243
- this.styles = unsafeCSS(tailwind_default);
11643
+ this.styles = [
11644
+ unsafeCSS(tailwind_default),
11645
+ axebowTheme,
11646
+ css`
11647
+ :host {
11648
+ display: block;
11649
+ }
11650
+ `
11651
+ ];
10244
11652
  }
10245
- async _handleCopy(e) {
10246
- if (this.disabled) {
10247
- e.preventDefault();
10248
- e.stopPropagation();
10249
- return;
10250
- }
10251
- let textToCopy = this.copyValue || this.value;
10252
- if (!textToCopy) {
10253
- const slot = this.shadowRoot?.querySelector("slot");
10254
- if (slot) textToCopy = slot.assignedNodes({ flatten: true }).map((n) => n.textContent ?? "").join("").trim();
10255
- if (!textToCopy) textToCopy = this.textContent?.trim() ?? "";
10256
- }
10257
- if (textToCopy) try {
10258
- await navigator.clipboard.writeText(textToCopy);
10259
- this._copied = true;
10260
- setTimeout(() => {
10261
- this._copied = false;
10262
- }, 2e3);
10263
- } catch (err) {
10264
- console.error("Failed to copy text:", err);
10265
- }
10266
- this.dispatchEvent(new CustomEvent("copy", {
11653
+ _handleInput(e) {
11654
+ const target = e.target;
11655
+ this.dispatchEvent(new CustomEvent("confirm-input", {
11656
+ detail: { value: target.value },
10267
11657
  bubbles: true,
10268
- composed: true,
10269
- detail: { value: textToCopy }
11658
+ composed: true
11659
+ }));
11660
+ }
11661
+ _handleConfirm() {
11662
+ this.dispatchEvent(new CustomEvent("confirm", {
11663
+ bubbles: true,
11664
+ composed: true
10270
11665
  }));
10271
11666
  }
10272
11667
  render() {
10273
- const iconToShow = this._copied ? "check" : this.iconName;
10274
11668
  return html`
10275
- <div
10276
- @click=${this._handleCopy}
10277
- class="h-10 w-10 bg-(--axebow-tertiary) hover:bg-(--axebow-gray) rounded-r-md flex items-center justify-center cursor-pointer transition-colors select-none ${this.disabled ? "opacity-50 cursor-not-allowed pointer-events-none" : ""}"
10278
- title=${this._copied ? "Copied!" : "Copy"}
10279
- >
10280
- <axebow-icon iconName="${iconToShow}" iconColor="white" size="${this.size}"></axebow-icon>
10281
- <slot class="hidden"></slot>
11669
+ <div class="w-198.25 h-auto box-border bg-white rounded-md p-6 flex flex-col gap-8">
11670
+ <div class="w-186.25 flex gap-4">
11671
+ <div class="w-8 h-full flex flex-col items-start shrink-0">
11672
+ <div class="w-8 h-8 shrink-0 flex items-center justify-center">
11673
+ <axebow-icon iconName="error" iconColor="var(--axebow-error)" size="2rem"></axebow-icon>
10282
11674
  </div>
10283
- `;
11675
+ </div>
11676
+ <div class="flex-1 min-w-0 flex flex-col gap-6">
11677
+ <div class="w-full">
11678
+ <h2 class="m-0 text-[1.25rem] font-semibold text-black">${this.title}</h2>
11679
+ </div>
11680
+ <div class="w-full flex flex-col gap-2">
11681
+ <p class="m-0">${this.deletePrefix} <strong>${this.serviceName}</strong> ${this.deleteSuffix}</p>
11682
+ <p class="m-0">${this.warningPrefix} <strong>${this.warningBold}</strong></p>
11683
+ <p class="m-0">${this.confirmText}</p>
11684
+ </div>
11685
+ </div>
11686
+ </div>
11687
+ <div class="w-186.25 flex items-end gap-4 pl-11.75 box-border">
11688
+ <div class="w-102 flex flex-col gap-1">
11689
+ <p class="m-0 text-sm">
11690
+ ${this.confirmLabelPrefix} <span class="text-(--axebow-primary)">${this.confirmLabelHighlight}</span>
11691
+ </p>
11692
+ <axebow-input
11693
+ controlType="input"
11694
+ .value=${this.value}
11695
+ placeholder=${this.placeholder}
11696
+ .callback=${(e) => this._handleInput(e)}
11697
+ ></axebow-input>
11698
+ </div>
11699
+ <axebow-button variant="danger" .disabled=${this.buttonDisabled || this.isSubmitting} @click=${this._handleConfirm}>
11700
+ ${this.isSubmitting ? html`
11701
+ <div class="flex gap-1 items-center">
11702
+ <sl-spinner style="--indicator-color: red;"></sl-spinner>
11703
+ <p class="m-0">${this.loadingLabel}</p>
11704
+ </div>
11705
+ ` : this.buttonLabel}
11706
+ </axebow-button>
11707
+ </div>
11708
+ </div>
11709
+ `;
10284
11710
  }
10285
11711
  };
10286
- __decorate([property({ type: String })], AxebowCopyBox.prototype, "value", void 0);
10287
- __decorate([property({ type: String })], AxebowCopyBox.prototype, "copyValue", void 0);
10288
- __decorate([property({ type: String })], AxebowCopyBox.prototype, "iconName", void 0);
10289
- __decorate([property({ type: String })], AxebowCopyBox.prototype, "size", void 0);
10290
- __decorate([property({ type: Boolean })], AxebowCopyBox.prototype, "disabled", void 0);
10291
- __decorate([state()], AxebowCopyBox.prototype, "_copied", void 0);
10292
- AxebowCopyBox = __decorate([customElement("axebow-copy-box")], AxebowCopyBox);
11712
+ __decorate([property({ type: String })], AxebowUndeployCard.prototype, "title", void 0);
11713
+ __decorate([property({ type: String })], AxebowUndeployCard.prototype, "deletePrefix", void 0);
11714
+ __decorate([property({ type: String })], AxebowUndeployCard.prototype, "serviceName", void 0);
11715
+ __decorate([property({ type: String })], AxebowUndeployCard.prototype, "deleteSuffix", void 0);
11716
+ __decorate([property({ type: String })], AxebowUndeployCard.prototype, "warningPrefix", void 0);
11717
+ __decorate([property({ type: String })], AxebowUndeployCard.prototype, "warningBold", void 0);
11718
+ __decorate([property({ type: String })], AxebowUndeployCard.prototype, "confirmText", void 0);
11719
+ __decorate([property({ type: String })], AxebowUndeployCard.prototype, "confirmLabelPrefix", void 0);
11720
+ __decorate([property({ type: String })], AxebowUndeployCard.prototype, "confirmLabelHighlight", void 0);
11721
+ __decorate([property({ type: String })], AxebowUndeployCard.prototype, "placeholder", void 0);
11722
+ __decorate([property({ type: String })], AxebowUndeployCard.prototype, "value", void 0);
11723
+ __decorate([property({ type: String })], AxebowUndeployCard.prototype, "buttonLabel", void 0);
11724
+ __decorate([property({ type: Boolean })], AxebowUndeployCard.prototype, "buttonDisabled", void 0);
11725
+ __decorate([property({ type: Boolean })], AxebowUndeployCard.prototype, "isSubmitting", void 0);
11726
+ __decorate([property({ type: String })], AxebowUndeployCard.prototype, "loadingLabel", void 0);
11727
+ AxebowUndeployCard = __decorate([customElement("axebow-undeploy-card")], AxebowUndeployCard);
10293
11728
  //#endregion
10294
- //#region src/components/axebow-tabs-submenu/axebow-tabs-submenu.ts
10295
- var AxebowTabsSubmenu = class AxebowTabsSubmenu extends LitElement {
11729
+ //#region src/components/axebow-observability-container/axebow-observability-container.ts
11730
+ var AxebowObservabilityContainer = class AxebowObservabilityContainer extends LitElement {
10296
11731
  constructor(..._args) {
10297
11732
  super(..._args);
10298
- this.tabs = [];
10299
- this.activeTab = 0;
10300
- this.disabled = false;
10301
- this.stretch = true;
11733
+ this.containerName = "";
11734
+ this.isLogsOn = true;
11735
+ this.isTerminalOn = false;
11736
+ this.logsLabel = "";
11737
+ this.logsOnLabel = "";
11738
+ this.logsOffLabel = "";
11739
+ this.terminalLabel = "";
11740
+ this.terminalOnLabel = "";
11741
+ this.terminalOffLabel = "";
11742
+ this.logFilters = [];
11743
+ this.logFilterTitle = "";
11744
+ this.cleanFilterLabel = "";
11745
+ this.addFilterLabel = "";
11746
+ this.selectOptionLabel = "";
11747
+ this.filterPlaceholder = "";
11748
+ this.cleanHistoryLabel = "";
11749
+ this.followLogs = false;
11750
+ this.autoScrollLabel = "";
11751
+ this.autoScrollOnLabel = "";
11752
+ this.autoScrollOffLabel = "";
11753
+ this.logsTitle = "";
11754
+ this.terminalTitle = "";
11755
+ this.logsUrl = "";
11756
+ this.terminalUrl = "";
11757
+ this.logsIframeId = "";
11758
+ this.terminalIframeId = "";
10302
11759
  }
10303
11760
  static {
10304
- this.styles = unsafeCSS(tailwind_default);
10305
- }
10306
- _handleTabChange(e) {
10307
- this.activeTab = e.detail.index;
10308
- this.dispatchEvent(new CustomEvent("tab-change", {
10309
- bubbles: true,
10310
- composed: true,
10311
- detail: e.detail
10312
- }));
11761
+ this.styles = [
11762
+ unsafeCSS(tailwind_default),
11763
+ axebowTheme,
11764
+ css`
11765
+ sl-input::part(input) {
11766
+ font-size: 0.95rem;
11767
+ color: var(--axebow-strong-gray);
11768
+ background-color: #f3f4f6;
11769
+ }
11770
+ sl-input::part(base) {
11771
+ background-color: #f3f4f6;
11772
+ width: 100%;
11773
+ }
11774
+ .log-filter-dropdown {
11775
+ display: block;
11776
+ width: 100%;
11777
+ }
11778
+ .log-filter-dropdown::part(trigger) {
11779
+ display: block !important;
11780
+ width: 100% !important;
11781
+ }
11782
+ .log-filter-dropdown::part(panel) {
11783
+ width: 17rem !important;
11784
+ }
11785
+ sl-divider {
11786
+ height: 0.0625rem !important;
11787
+ border-top: none !important;
11788
+ background-color: var(--axebow-light-gray);
11789
+ margin-bottom: 0.90625rem !important;
11790
+ }
11791
+ `
11792
+ ];
10313
11793
  }
10314
11794
  render() {
10315
11795
  return html`
10316
- <axebow-tab-selector
10317
- variant="sections-tab"
10318
- .activeTab=${this.activeTab}
10319
- ?disabled=${this.disabled}
10320
- .stretch=${this.stretch}
10321
- @tab-change=${this._handleTabChange}
10322
- >
10323
- ${this.tabs.map((tab, i) => html`
10324
- <span slot="tab-label-${i}" ?disabled=${tab.disabled ?? false}>
10325
- ${tab.label}
10326
- </span>
10327
- `)}
10328
- </axebow-tab-selector>
10329
- `;
11796
+ <div class="w-full flex flex-col gap-4">
11797
+ ${this._renderHeader()} ${this.isTerminalOn ? this._renderColumns() : this._renderStacked()}
11798
+ </div>
11799
+ `;
11800
+ }
11801
+ _renderStacked() {
11802
+ return html` ${this.isLogsOn ? this._renderLogFilters() : null} ${this.isLogsOn ? this._renderLogsIframe() : null} `;
11803
+ }
11804
+ _renderColumns() {
11805
+ return html`
11806
+ <div class="flex gap-4">
11807
+ <div class="w-140.75 flex flex-col gap-4">
11808
+ ${this.isLogsOn ? this._renderLogFilters() : null} ${this.isLogsOn ? this._renderLogsIframe() : null}
11809
+ </div>
11810
+ <div class="w-148.75">${this._renderTerminalIframe()}</div>
11811
+ </div>
11812
+ `;
11813
+ }
11814
+ _renderHeader() {
11815
+ return html`
11816
+ <div class="flex justify-between w-full border-b border-solid border-gray-200 pb-2 gap-4 items-center">
11817
+ <h2 class="font-semibold text-lg text-ellipsis text-(--axebow-primary)">${this.containerName}</h2>
11818
+ <div class="flex items-center gap-4">
11819
+ ${this._renderToggle(this.logsLabel, this.isLogsOn, this.logsOnLabel, this.logsOffLabel, (checked) => this._dispatch("logs-toggle", { checked }))}
11820
+ <div class="h-full w-px bg-(--axebow-gray)"></div>
11821
+ ${this._renderToggle(this.terminalLabel, this.isTerminalOn, this.terminalOnLabel, this.terminalOffLabel, (checked) => this._dispatch("terminal-toggle", { checked }))}
11822
+ <div class="h-full w-px bg-(--axebow-gray)"></div>
11823
+ <div class="w-6 h-6 flex items-center justify-center">
11824
+ <axebow-icon
11825
+ class="cursor-pointer"
11826
+ iconName="open_in_new"
11827
+ size="2xl"
11828
+ iconColor="var(--axebow-tertiary)"
11829
+ @click=${() => this._dispatch("open-in-new")}
11830
+ ></axebow-icon>
11831
+ </div>
11832
+ <div class="h-full w-px bg-(--axebow-gray)"></div>
11833
+ <div
11834
+ class="w-6 h-6 flex items-center justify-center cursor-pointer"
11835
+ @click=${() => this._dispatch("remove-container")}
11836
+ >
11837
+ <axebow-icon iconName="cancel" size="2xl" iconColor="var(--axebow-gray)"></axebow-icon>
11838
+ </div>
11839
+ </div>
11840
+ </div>
11841
+ `;
11842
+ }
11843
+ _renderToggle(label, checked, onLabel, offLabel, onChange) {
11844
+ return html`
11845
+ <div class="flex items-center gap-2">
11846
+ <p class="m-0 text-(--axebow-tertiary) font-bold">${label}</p>
11847
+ <axebow-switch .checked=${checked} .onChange=${(checked) => onChange(checked)}></axebow-switch>
11848
+ <p class="m-0 italic text-gray-400">${checked ? onLabel : offLabel}</p>
11849
+ </div>
11850
+ `;
11851
+ }
11852
+ _renderLogFilters() {
11853
+ return html`
11854
+ <div class="flex flex-wrap gap-4 items-start">
11855
+ ${this.logFilters.map((_, index) => this._renderLogFilterDropdown(index))}
11856
+ <axebow-button
11857
+ class="shrink-0 mt-6.75"
11858
+ variant="primary"
11859
+ outline
11860
+ fixedWidth="7.4375rem"
11861
+ fixedHeight="2.5rem"
11862
+ @click=${() => this._dispatch("add-filter")}
11863
+ >
11864
+ ${this.addFilterLabel}
11865
+ </axebow-button>
11866
+ </div>
11867
+ `;
11868
+ }
11869
+ _renderLogFilterDropdown(index) {
11870
+ const filter = this.logFilters[index];
11871
+ return html`
11872
+ <div class="w-68 h-auto flex flex-col gap-2">
11873
+ <div class="w-68 h-4.75 flex items-center justify-between">
11874
+ <h1 class="m-0 font-bold">${this.logFilterTitle}</h1>
11875
+ <button
11876
+ class="m-0 text-base text-(--axebow-tertiary) cursor-pointer"
11877
+ @click=${() => this._dispatch("clean-filter", { index })}
11878
+ >
11879
+ ${this.cleanFilterLabel}
11880
+ </button>
11881
+ </div>
11882
+ <sl-dropdown class="log-filter-dropdown" id="log-filter-dropdown-${index}">
11883
+ <axebow-button slot="trigger" caret fixedWidth="17rem" fixedHeight="2.5rem">
11884
+ ${filter.selected ?? this.selectOptionLabel}
11885
+ </axebow-button>
11886
+ <sl-menu class="w-full my-2">
11887
+ <sl-input
11888
+ type="text"
11889
+ placeholder=${this.filterPlaceholder}
11890
+ clearable
11891
+ .value=${""}
11892
+ @sl-change=${(e) => this._handleFilterInputChange(e, index)}
11893
+ @keydown=${(e) => this._handleFilterInputKeydown(e, index)}
11894
+ ></sl-input>
11895
+ ${filter.options.map((option) => html`
11896
+ <sl-menu-item @click=${() => this._selectFilterOption(index, option)}>${option}</sl-menu-item>
11897
+ `)}
11898
+ ${filter.options.length > 0 ? html`
11899
+ <button
11900
+ class="p-2 w-full border-t border-solid border-gray-200 text-center text-gray-500 hover:bg-gray-100 cursor-pointer"
11901
+ @click=${() => this._cleanFilterHistory(index)}
11902
+ >
11903
+ ${this.cleanHistoryLabel}
11904
+ </button>
11905
+ ` : null}
11906
+ </sl-menu>
11907
+ </sl-dropdown>
11908
+ </div>
11909
+ `;
11910
+ }
11911
+ _renderLogsIframe() {
11912
+ return html`
11913
+ <div class="w-full h-full px-4 py-8 rounded-lg flex flex-col bg-white">
11914
+ <div class="flex justify-between items-center">
11915
+ <h1 class="m-0 text-base uppercase font-semibold text-(--axebow-gray)">${this.logsTitle}</h1>
11916
+ <div class="flex items-center gap-4">
11917
+ ${this._renderToggle(this.autoScrollLabel, this.followLogs, this.autoScrollOnLabel, this.autoScrollOffLabel, (checked) => this._dispatch("follow-logs-change", { checked }))}
11918
+ <div class="h-full w-px bg-(--axebow-gray)"></div>
11919
+ <div class="w-6 h-6 flex items-center justify-center">
11920
+ <axebow-icon
11921
+ class="cursor-pointer"
11922
+ iconName="download_for_offline"
11923
+ size="2xl"
11924
+ iconColor="var(--axebow-tertiary)"
11925
+ @click=${() => this._dispatch("download-logs")}
11926
+ ></axebow-icon>
11927
+ </div>
11928
+ <div class="h-full w-px bg-(--axebow-gray)"></div>
11929
+ <div class="w-6 h-6 flex items-center justify-center">
11930
+ <axebow-icon
11931
+ class="cursor-pointer"
11932
+ iconName="content_copy"
11933
+ size="2xl"
11934
+ iconColor="var(--axebow-tertiary)"
11935
+ @click=${() => this._copyLogs()}
11936
+ ></axebow-icon>
11937
+ </div>
11938
+ </div>
11939
+ </div>
11940
+ <sl-divider class="w-full"></sl-divider>
11941
+ <iframe
11942
+ id="${this.logsIframeId}"
11943
+ allow="storage-access"
11944
+ sandbox="${"allow-same-origin allow-scripts"}"
11945
+ class="w-full h-screen"
11946
+ src="${this.logsUrl}"
11947
+ ></iframe>
11948
+ </div>
11949
+ `;
11950
+ }
11951
+ async _copyLogs() {
11952
+ try {
11953
+ const text = (this.renderRoot?.querySelector(`#${this.logsIframeId}`))?.contentDocument?.body?.innerText ?? "";
11954
+ if (!text) {
11955
+ this._dispatch("logs-copy-failed");
11956
+ return;
11957
+ }
11958
+ await navigator.clipboard.writeText(text);
11959
+ this._dispatch("logs-copied");
11960
+ } catch (_) {
11961
+ this._dispatch("logs-copy-failed");
11962
+ }
11963
+ }
11964
+ _renderTerminalIframe() {
11965
+ return html`
11966
+ <div class="w-full h-full px-4 py-8 rounded-lg flex flex-col bg-white">
11967
+ <div class="flex justify-between items-center">
11968
+ <h1 class="m-0 text-base uppercase font-semibold text-(--axebow-gray)">${this.terminalTitle}</h1>
11969
+ </div>
11970
+ <sl-divider class="w-full"></sl-divider>
11971
+ <iframe
11972
+ id="${this.terminalIframeId}"
11973
+ allow="storage-access"
11974
+ sandbox="${"allow-same-origin allow-scripts"}"
11975
+ class="w-full h-screen"
11976
+ src="${this.terminalUrl}"
11977
+ ></iframe>
11978
+ </div>
11979
+ `;
11980
+ }
11981
+ _handleFilterInputChange(e, index) {
11982
+ const input = e.target;
11983
+ const value = input.value.trim();
11984
+ input.value = "";
11985
+ if (value) this._dispatch("filter-input-change", {
11986
+ index,
11987
+ value
11988
+ });
11989
+ }
11990
+ _handleFilterInputKeydown(e, index) {
11991
+ if (e.key !== "Enter") return;
11992
+ e.preventDefault();
11993
+ e.stopPropagation();
11994
+ const input = e.target;
11995
+ const value = input.value.trim();
11996
+ input.value = "";
11997
+ if (value) this._dispatch("filter-input-change", {
11998
+ index,
11999
+ value
12000
+ });
12001
+ this._closeDropdown(index);
12002
+ }
12003
+ _selectFilterOption(index, option) {
12004
+ this._dispatch("select-filter-option", {
12005
+ index,
12006
+ option
12007
+ });
12008
+ this._closeDropdown(index);
12009
+ }
12010
+ _cleanFilterHistory(index) {
12011
+ this._dispatch("clean-filter-history", { index });
12012
+ this._closeDropdown(index);
12013
+ }
12014
+ _closeDropdown(index) {
12015
+ const dropdown = this.renderRoot?.querySelector(`#log-filter-dropdown-${index}`);
12016
+ if (dropdown) dropdown.hide();
12017
+ }
12018
+ _dispatch(eventName, detail = {}) {
12019
+ this.dispatchEvent(new CustomEvent(eventName, {
12020
+ detail,
12021
+ bubbles: true,
12022
+ composed: true
12023
+ }));
10330
12024
  }
10331
12025
  };
10332
- __decorate([property({ type: Array })], AxebowTabsSubmenu.prototype, "tabs", void 0);
10333
- __decorate([property({ type: Number })], AxebowTabsSubmenu.prototype, "activeTab", void 0);
10334
- __decorate([property({ type: Boolean })], AxebowTabsSubmenu.prototype, "disabled", void 0);
10335
- __decorate([property({ type: Boolean })], AxebowTabsSubmenu.prototype, "stretch", void 0);
10336
- AxebowTabsSubmenu = __decorate([customElement("axebow-tabs-submenu")], AxebowTabsSubmenu);
12026
+ __decorate([property({ type: String })], AxebowObservabilityContainer.prototype, "containerName", void 0);
12027
+ __decorate([property({ type: Boolean })], AxebowObservabilityContainer.prototype, "isLogsOn", void 0);
12028
+ __decorate([property({ type: Boolean })], AxebowObservabilityContainer.prototype, "isTerminalOn", void 0);
12029
+ __decorate([property({ type: String })], AxebowObservabilityContainer.prototype, "logsLabel", void 0);
12030
+ __decorate([property({ type: String })], AxebowObservabilityContainer.prototype, "logsOnLabel", void 0);
12031
+ __decorate([property({ type: String })], AxebowObservabilityContainer.prototype, "logsOffLabel", void 0);
12032
+ __decorate([property({ type: String })], AxebowObservabilityContainer.prototype, "terminalLabel", void 0);
12033
+ __decorate([property({ type: String })], AxebowObservabilityContainer.prototype, "terminalOnLabel", void 0);
12034
+ __decorate([property({ type: String })], AxebowObservabilityContainer.prototype, "terminalOffLabel", void 0);
12035
+ __decorate([property({ attribute: false })], AxebowObservabilityContainer.prototype, "logFilters", void 0);
12036
+ __decorate([property({ type: String })], AxebowObservabilityContainer.prototype, "logFilterTitle", void 0);
12037
+ __decorate([property({ type: String })], AxebowObservabilityContainer.prototype, "cleanFilterLabel", void 0);
12038
+ __decorate([property({ type: String })], AxebowObservabilityContainer.prototype, "addFilterLabel", void 0);
12039
+ __decorate([property({ type: String })], AxebowObservabilityContainer.prototype, "selectOptionLabel", void 0);
12040
+ __decorate([property({ type: String })], AxebowObservabilityContainer.prototype, "filterPlaceholder", void 0);
12041
+ __decorate([property({ type: String })], AxebowObservabilityContainer.prototype, "cleanHistoryLabel", void 0);
12042
+ __decorate([property({ type: Boolean })], AxebowObservabilityContainer.prototype, "followLogs", void 0);
12043
+ __decorate([property({ type: String })], AxebowObservabilityContainer.prototype, "autoScrollLabel", void 0);
12044
+ __decorate([property({ type: String })], AxebowObservabilityContainer.prototype, "autoScrollOnLabel", void 0);
12045
+ __decorate([property({ type: String })], AxebowObservabilityContainer.prototype, "autoScrollOffLabel", void 0);
12046
+ __decorate([property({ type: String })], AxebowObservabilityContainer.prototype, "logsTitle", void 0);
12047
+ __decorate([property({ type: String })], AxebowObservabilityContainer.prototype, "terminalTitle", void 0);
12048
+ __decorate([property({ type: String })], AxebowObservabilityContainer.prototype, "logsUrl", void 0);
12049
+ __decorate([property({ type: String })], AxebowObservabilityContainer.prototype, "terminalUrl", void 0);
12050
+ __decorate([property({ type: String })], AxebowObservabilityContainer.prototype, "logsIframeId", void 0);
12051
+ __decorate([property({ type: String })], AxebowObservabilityContainer.prototype, "terminalIframeId", void 0);
12052
+ AxebowObservabilityContainer = __decorate([customElement("axebow-observability-container")], AxebowObservabilityContainer);
10337
12053
  //#endregion
10338
- export { AxebowActionsFooter, AxebowAdjustmentResourcesCounter, AxebowAlert, AxebowBanner, AxebowBaseCard, AxebowBoxSection, AxebowBreadcrumbHeader, AxebowButton, AxebowCardActionBanner, AxebowCardAttentionBanner, AxebowCardCloudLogo, AxebowCardFilter, AxebowCardFilterItem, AxebowCardFooter, AxebowCardHeader, AxebowCardResourceRow, AxebowCardResourceTable, AxebowCardSpecialLink, AxebowCardStatItem, AxebowCardStatsRow, AxebowCardStatus, AxebowCardTableHeader, AxebowCardVersionSelector, AxebowCarouselInput, AxebowCarouselSelectorItem, AxebowCarouselSelectorTenant, AxebowChannelConfigPanel, AxebowCheckboxInput, AxebowCollaboratorsDialog, AxebowCopyBox, AxebowDeployCard, AxebowDeploySummary, AxebowDialog, AxebowDragDropUploadFile, AxebowDraggableService, AxebowExpandableHeader, AxebowFilterBar, AxebowFooter, AxebowFormPanelField, AxebowGettingStartedCard, AxebowHeader, AxebowHelpBubble, AxebowIcon, AxebowInfrastructureCard, AxebowInput, AxebowInputBase, AxebowLimitsCounter, AxebowManageHyperlinks, AxebowMarketplaceCard, AxebowModalsConfirmation, AxebowMoreActions, AxebowNumberCard, AxebowNumbersSection, AxebowNumericInput, AxebowPill, AxebowProvidersInput, AxebowQuickTipButton, AxebowQuickTipSection, AxebowResourceBar, AxebowResourceBoxForm, AxebowResourceCard, AxebowResourceLimitInput, AxebowResourceLimitsPanel, AxebowResourcesCounter, AxebowRoleTooltip, AxebowRuntimeZipDialog, AxebowSearch, AxebowSearchBarFilters, AxebowSelectInput, AxebowSelectorSlider, AxebowServicesPanel, AxebowSidebar, AxebowStatus, AxebowStepHeader, AxebowSummaryCard, AxebowSummaryFlavors, AxebowSummaryKeyValue, AxebowSummaryLimits, AxebowSummaryStep, AxebowSummaryStepHeader, AxebowSwitch, AxebowSwitchInput, AxebowTabSelector, AxebowTabsSubmenu, AxebowTenantCard, AxebowTenantResourceTable, AxebowTextInput, AxebowTooltip, CustomHomePageBody, DEFAULT_ADD_DIALOG_LABELS, DeployModalComponent, DeployModalFooter, DeployModalHeader, DeployPageBody, STATUS_COLORS, TableChart, axebowTheme, buildAddButton, buildExternalNodeContent, buildMainNodeContent, createElement, createIcon };
12054
+ export { AxebowActionsFooter, AxebowAdjustmentResourcesCounter, AxebowAlert, AxebowBanner, AxebowBaseCard, AxebowBoxSection, AxebowBreadcrumbHeader, AxebowButton, AxebowCardActionBanner, AxebowCardAttentionBanner, AxebowCardCloudLogo, AxebowCardFilter, AxebowCardFilterItem, AxebowCardFooter, AxebowCardHeader, AxebowCardResourceRow, AxebowCardResourceTable, AxebowCardSpecialLink, AxebowCardStatItem, AxebowCardStatsRow, AxebowCardStatus, AxebowCardTableHeader, AxebowCardVersionSelector, AxebowCarouselInput, AxebowCarouselSelectorItem, AxebowCarouselSelectorTenant, AxebowChannelConfigPanel, AxebowCheckboxInput, AxebowCollaboratorsDialog, AxebowCopyBox, AxebowDeployCard, AxebowDeploySummary, AxebowDialog, AxebowDragDropUploadFile, AxebowDraggableService, AxebowExpandableCard, AxebowExpandableHeader, AxebowFilterBar, AxebowFooter, AxebowFormPanelField, AxebowGettingStartedCard, AxebowHeader, AxebowHelpBubble, AxebowIcon, AxebowInfrastructureCard, AxebowInput, AxebowInputBase, AxebowInstancesTable, AxebowLimitsCounter, AxebowManageHyperlinks, AxebowMarketplaceCard, AxebowModalsConfirmation, AxebowMoreActions, AxebowNumberCard, AxebowNumbersSection, AxebowNumericInput, AxebowObservabilityContainer, AxebowPill, AxebowProgressBar, AxebowProvidersInput, AxebowQuickTipButton, AxebowQuickTipSection, AxebowRefreshPeriodPanel, AxebowResourceBar, AxebowResourceBoxForm, AxebowResourceCard, AxebowResourceLimitInput, AxebowResourceLimitsPanel, AxebowResourcesCounter, AxebowRoleCard, AxebowRoleContainerDropdown, AxebowRoleTooltip, AxebowRuntimeZipDialog, AxebowSearch, AxebowSearchBarFilters, AxebowSelectInput, AxebowSelectorSlider, AxebowServiceDetailHeader, AxebowServicesPanel, AxebowSidebar, AxebowStatus, AxebowStepHeader, AxebowSummaryCard, AxebowSummaryFlavors, AxebowSummaryKeyValue, AxebowSummaryLimits, AxebowSummaryStep, AxebowSummaryStepHeader, AxebowSwitch, AxebowSwitchInput, AxebowTabSelector, AxebowTabsSubmenu, AxebowTenantCard, AxebowTenantResourceTable, AxebowTenantsTable, AxebowTextInput, AxebowTimeRangePanel, AxebowTooltip, AxebowUndeployCard, AxebowUnderlineTabSelector, AxebowUsageTooltip, CustomHomePageBody, DEFAULT_ADD_DIALOG_LABELS, DeployModalComponent, DeployModalFooter, DeployModalHeader, DeployPageBody, STATUS_COLORS, TableChart, axebowTheme, buildAddButton, buildExternalNodeContent, buildMainNodeContent, createElement, createIcon };
10339
12055
 
10340
12056
  //# sourceMappingURL=index.js.map