@kumori/aurora-wui-components 0.0.264 → 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 (43) hide show
  1. package/dist/components/axebow-actions-footer/axebow-actions-footer.d.ts +0 -9
  2. package/dist/components/axebow-actions-footer/axebow-actions-footer.d.ts.map +1 -1
  3. package/dist/components/axebow-channel-config-panel/axebow-channel-config-panel.d.ts +3 -0
  4. package/dist/components/axebow-channel-config-panel/axebow-channel-config-panel.d.ts.map +1 -1
  5. package/dist/components/axebow-expandable-card/axebow-expandable-card.d.ts +6 -0
  6. package/dist/components/axebow-expandable-card/axebow-expandable-card.d.ts.map +1 -0
  7. package/dist/components/axebow-header/parts/axebow-quick-actions.d.ts.map +1 -1
  8. package/dist/components/axebow-instances-table/axebow-instances-table.d.ts +56 -0
  9. package/dist/components/axebow-instances-table/axebow-instances-table.d.ts.map +1 -0
  10. package/dist/components/axebow-modals-confirmation/axebow-modals-confirmation.d.ts +1 -0
  11. package/dist/components/axebow-modals-confirmation/axebow-modals-confirmation.d.ts.map +1 -1
  12. package/dist/components/axebow-observability-container/axebow-observability-container.d.ts +51 -0
  13. package/dist/components/axebow-observability-container/axebow-observability-container.d.ts.map +1 -0
  14. package/dist/components/axebow-progress-bar/axebow-progress-bar.d.ts +11 -0
  15. package/dist/components/axebow-progress-bar/axebow-progress-bar.d.ts.map +1 -0
  16. package/dist/components/axebow-refresh-period-panel/axebow-refresh-period-panel.d.ts +20 -0
  17. package/dist/components/axebow-refresh-period-panel/axebow-refresh-period-panel.d.ts.map +1 -0
  18. package/dist/components/axebow-role-card/axebow-role-card.d.ts +18 -0
  19. package/dist/components/axebow-role-card/axebow-role-card.d.ts.map +1 -0
  20. package/dist/components/axebow-role-container-dropdown/axebow-role-container-dropdown.d.ts +41 -0
  21. package/dist/components/axebow-role-container-dropdown/axebow-role-container-dropdown.d.ts.map +1 -0
  22. package/dist/components/axebow-service-detail-header/axebow-service-detail-header.d.ts +49 -0
  23. package/dist/components/axebow-service-detail-header/axebow-service-detail-header.d.ts.map +1 -0
  24. package/dist/components/axebow-sidebar/axebow-sidebar.d.ts.map +1 -1
  25. package/dist/components/axebow-tenants-table/axebow-tenants-table.d.ts +34 -0
  26. package/dist/components/axebow-tenants-table/axebow-tenants-table.d.ts.map +1 -0
  27. package/dist/components/axebow-time-range-panel/axebow-time-range-panel.d.ts +29 -0
  28. package/dist/components/axebow-time-range-panel/axebow-time-range-panel.d.ts.map +1 -0
  29. package/dist/components/axebow-undeploy-card/axebow-undeploy-card.d.ts +23 -0
  30. package/dist/components/axebow-undeploy-card/axebow-undeploy-card.d.ts.map +1 -0
  31. package/dist/components/axebow-underline-tab-selector/axebow-underline-tab-selector.d.ts +18 -0
  32. package/dist/components/axebow-underline-tab-selector/axebow-underline-tab-selector.d.ts.map +1 -0
  33. package/dist/components/axebow-usage-tooltip/axebow-usage-tooltip.d.ts +13 -0
  34. package/dist/components/axebow-usage-tooltip/axebow-usage-tooltip.d.ts.map +1 -0
  35. package/dist/components/cards/parts/axebow-card-version-selector.d.ts +4 -1
  36. package/dist/components/cards/parts/axebow-card-version-selector.d.ts.map +1 -1
  37. package/dist/index.d.ts +13 -0
  38. package/dist/index.d.ts.map +1 -1
  39. package/dist/index.js +2829 -1057
  40. package/dist/index.js.map +1 -1
  41. package/dist/playground/schemas/axebow-actions-footer.schema.d.ts.map +1 -1
  42. package/dist/playground/schemas/axebow-modals-confirmation.schema.d.ts.map +1 -1
  43. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -22,10 +22,11 @@ import "@shoelace-style/shoelace/dist/components/tooltip/tooltip.js";
22
22
  import "@shoelace-style/shoelace/dist/components/icon/icon.js";
23
23
  import "@shoelace-style/shoelace/dist/components/badge/badge.js";
24
24
  import "@shoelace-style/shoelace/dist/components/spinner/spinner.js";
25
- import Chart from "chart.js/auto";
25
+ 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-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-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-\\[0\\.0625rem\\] {\n height: .0625rem;\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\\/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-1 {\n row-gap: var(--spacing);\n }\n\n .gap-y-\\[0\\.1875rem\\] {\n row-gap: .1875rem;\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-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 {\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 .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) {
@@ -963,7 +964,17 @@ var AxebowQuickActions = class AxebowQuickActions extends LitElement {
963
964
  };
964
965
  }
965
966
  static {
966
- this.styles = [unsafeCSS(tailwind_default), css`:host { display: inline-block; }`];
967
+ this.styles = [unsafeCSS(tailwind_default), css`
968
+ :host {
969
+ display: inline-block;
970
+ }
971
+
972
+ @media (max-height: 720px) {
973
+ .quick-actions-label {
974
+ display: none !important;
975
+ }
976
+ }
977
+ `];
967
978
  }
968
979
  connectedCallback() {
969
980
  super.connectedCallback();
@@ -988,7 +999,7 @@ var AxebowQuickActions = class AxebowQuickActions extends LitElement {
988
999
  <div class="relative">
989
1000
  <button
990
1001
  type="button"
991
- class="group flex flex-col items-center justify-center gap-1 w-20 h-16 border-none cursor-pointer transition-colors duration-150 ${this.open ? "bg-(--axebow-base)" : "bg-(--axebow-primary) hover:bg-(--axebow-base)"}"
1002
+ class="group relative flex flex-col items-center justify-center gap-1 w-20 h-16 border-none cursor-pointer transition-colors duration-150 ${this.open ? "bg-(--axebow-base)" : "bg-(--axebow-primary) hover:bg-(--axebow-base)"}"
992
1003
  @click=${this._toggle}
993
1004
  >
994
1005
  <span
@@ -996,10 +1007,14 @@ var AxebowQuickActions = class AxebowQuickActions extends LitElement {
996
1007
  >
997
1008
  <axebow-icon iconName=${this.open ? "close" : "apps"} iconColor="currentColor" size="xl"></axebow-icon>
998
1009
  <span
999
- class="text-xs whitespace-nowrap ${this.open ? "font-semibold" : "font-normal group-hover:font-semibold"}"
1010
+ class="quick-actions-label text-xs whitespace-nowrap ${this.open ? "font-semibold" : "font-normal group-hover:font-semibold"}"
1000
1011
  >${this.label}</span
1001
1012
  >
1002
1013
  </span>
1014
+ <span
1015
+ class="absolute top-1/2 -translate-y-1/2 left-[calc(100%+10px)] -translate-x-1 opacity-0 group-hover:opacity-100 group-hover:translate-x-0 text-base transition-all duration-120 bg-(--axebow-primary-light) text-(--axebow-primary) font-semibold leading-none px-3.5 py-2 rounded-lg whitespace-nowrap shadow-[0_6px_16px_rgba(13,24,33,0.18)] pointer-events-none z-2001"
1016
+ >${this.label}</span
1017
+ >
1003
1018
  </button>
1004
1019
 
1005
1020
  ${this.open ? html`
@@ -1016,8 +1031,8 @@ var AxebowQuickActions = class AxebowQuickActions extends LitElement {
1016
1031
  `)}
1017
1032
  </div>
1018
1033
  ${row2.length ? html`
1019
- <div class="h-[0.0625rem] w-full bg-(--axebow-light-gray)"></div>
1020
- <div class="flex flex-wrap gap-x-1 gap-y-[0.1875rem]">
1034
+ <div class="h-px w-full bg-(--axebow-light-gray)"></div>
1035
+ <div class="flex flex-wrap gap-x-1 gap-y-0.75">
1021
1036
  ${row2.map((action) => html`
1022
1037
  <axebow-quick-action-card
1023
1038
  icon=${action.icon}
@@ -1357,7 +1372,51 @@ var AxebowSidebar = class AxebowSidebar extends LitElement {
1357
1372
  this.styles = [unsafeCSS(tailwind_default), css`
1358
1373
  :host {
1359
1374
  position: relative;
1360
- width: 4rem;
1375
+ width: 5rem;
1376
+ display: block;
1377
+ height: 100%;
1378
+ overflow: hidden;
1379
+ }
1380
+
1381
+ .sidebar-nav {
1382
+ height: 100%;
1383
+ overflow-y: auto;
1384
+ overflow-x: hidden;
1385
+ transition: padding-bottom 150ms ease-out;
1386
+ scrollbar-width: none;
1387
+ }
1388
+
1389
+ .sidebar-nav::-webkit-scrollbar {
1390
+ display: none;
1391
+ }
1392
+
1393
+ @media (max-height: 720px) {
1394
+ .compact-divider {
1395
+ display: block !important;
1396
+ margin-top: 0.25rem !important;
1397
+ margin-bottom: 0.25rem !important;
1398
+ }
1399
+ .nav-item {
1400
+ height: 2.375rem !important;
1401
+ }
1402
+
1403
+ .nav-label {
1404
+ display: none !important;
1405
+ }
1406
+
1407
+ .bottom-item {
1408
+ padding-top: 0.25rem !important;
1409
+ padding-bottom: 0.25rem !important;
1410
+ }
1411
+
1412
+ .bottom-label {
1413
+ display: none !important;
1414
+ }
1415
+
1416
+ .sidebar-divider {
1417
+ margin-top: 0.25rem !important;
1418
+ margin-bottom: 0.25rem !important;
1419
+ }
1361
1420
  }
1362
1421
  `];
1363
1422
  }
@@ -1377,12 +1436,13 @@ var AxebowSidebar = class AxebowSidebar extends LitElement {
1377
1436
  return html`
1378
1437
  <nav
1379
1438
  style="padding-bottom: ${this.paddingBottom}px;"
1380
- class="h-full flex flex-col justify-between overflow-x-hidden pt-2"
1439
+ class="sidebar-nav h-full flex flex-col justify-between overflow-hidden pt-2"
1381
1440
  >
1382
- <ul class="flex flex-col gap-0 w-full pb-4">
1383
- ${this.items.map((entry) => "divider" in entry ? html` <sl-divider class="w-[calc(100%-10px)] my-2 h-px bg-(--axebow-light-gray)"></sl-divider> ` : this._renderNavItem(entry, this._isSelected(entry)))}
1441
+ <ul class="flex flex-col gap-0 w-full pb-1">
1442
+ ${this.items.map((entry) => "divider" in entry ? html` <sl-divider class="sidebar-divider w-[calc(100%-10px)] mx-auto my-1.5 h-px bg-(--axebow-light-gray)"></sl-divider> ` : this._renderNavItem(entry, this._isSelected(entry)))}
1443
+ <sl-divider class="compact-divider hidden w-[calc(100%-10px)] mx-auto my-1.5 h-px bg-(--axebow-light-gray)"></sl-divider>
1384
1444
  </ul>
1385
- <ul>
1445
+ <ul class="flex flex-col gap-0 w-full">
1386
1446
  ${this.bottomItems.map((item) => this._renderBottomItem(item))}
1387
1447
  </ul>
1388
1448
  </nav>
@@ -1403,7 +1463,7 @@ var AxebowSidebar = class AxebowSidebar extends LitElement {
1403
1463
  _renderNavItem(item, selected) {
1404
1464
  return html`
1405
1465
  <li
1406
- class="${selected ? "bg-(--axebow-base) rounded-l-xl cursor-default" : "cursor-pointer"} flex flex-col w-full h-16 items-center justify-center relative group"
1466
+ class="nav-item ${selected ? "bg-(--axebow-base) rounded-l-xl cursor-default" : "cursor-pointer"} flex flex-col w-full h-16 items-center justify-center relative group"
1407
1467
  @click="${() => item.onClick()}"
1408
1468
  @mouseenter="${(e) => this.handleMouseEnter(e, item)}"
1409
1469
  @mouseleave="${() => this.handleMouseLeave()}"
@@ -1411,7 +1471,7 @@ var AxebowSidebar = class AxebowSidebar extends LitElement {
1411
1471
  >
1412
1472
  <div class="flex flex-col items-center justify-center">
1413
1473
  <axebow-icon iconName="${item.icon}" size="xl"></axebow-icon>
1414
- <span class="text-xs overflow-hidden whitespace-nowrap opacity-100 max-w-full">${item.label}</span>
1474
+ <span class="nav-label text-xs overflow-hidden whitespace-nowrap opacity-100 max-w-full">${item.label}</span>
1415
1475
  </div>
1416
1476
 
1417
1477
  ${!selected ? html`
@@ -1425,15 +1485,15 @@ var AxebowSidebar = class AxebowSidebar extends LitElement {
1425
1485
  _renderBottomItem(item) {
1426
1486
  return html`
1427
1487
  <li
1428
- class="flex flex-col w-full items-center justify-center cursor-pointer relative group"
1488
+ class="bottom-item flex flex-col w-full items-center justify-center cursor-pointer relative group"
1429
1489
  @click="${() => item.onClick()}"
1430
1490
  @mouseenter="${(e) => this.handleMouseEnter(e, item)}"
1431
1491
  @mouseleave="${() => this.handleMouseLeave()}"
1432
1492
  title="${item.label}"
1433
1493
  >
1434
- <div class="flex flex-col items-center justify-center py-3">
1494
+ <div class="flex flex-col items-center justify-center py-2.5">
1435
1495
  <axebow-icon iconName="${item.icon}" size="xl"></axebow-icon>
1436
- <span class="text-sm overflow-hidden whitespace-nowrap opacity-100 max-w-full"
1496
+ <span class="bottom-label text-sm overflow-hidden whitespace-nowrap opacity-100 max-w-full"
1437
1497
  >${item.label}${item.openInNewTab ? html`<axebow-icon iconName="open_in_new" size="sm"></axebow-icon>` : ""}</span
1438
1498
  >
1439
1499
  </div>
@@ -3200,7 +3260,7 @@ var AxebowModalsConfirmation = class AxebowModalsConfirmation extends LitElement
3200
3260
  box-shadow: 2px 2px 25px rgba(0, 0, 0, 0.1);
3201
3261
  padding: 0;
3202
3262
  width: 100%;
3203
- max-width: 579px;
3263
+ max-width: var(--axebow-confirmation-modal-max-width, 579px);
3204
3264
  overflow: hidden;
3205
3265
  }
3206
3266
 
@@ -3224,7 +3284,7 @@ var AxebowModalsConfirmation = class AxebowModalsConfirmation extends LitElement
3224
3284
  box-shadow: 2px 2px 25px rgba(0, 0, 0, 0.1);
3225
3285
  padding: 24px;
3226
3286
  width: 100%;
3227
- max-width: 579px;
3287
+ max-width: var(--axebow-confirmation-modal-max-width, 579px);
3228
3288
  box-sizing: border-box;
3229
3289
  }
3230
3290
 
@@ -3643,9 +3703,9 @@ var AxebowModalsConfirmation = class AxebowModalsConfirmation extends LitElement
3643
3703
  `;
3644
3704
  }
3645
3705
  render() {
3646
- 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};` : ""}`;
3647
3707
  if (this.inline) return html`
3648
- <div class="modal-card" style=${bgStyle}>
3708
+ <div class="modal-card" style=${hostStyle}>
3649
3709
  ${this._renderContent()}
3650
3710
  </div>
3651
3711
  `;
@@ -3654,7 +3714,7 @@ var AxebowModalsConfirmation = class AxebowModalsConfirmation extends LitElement
3654
3714
  ?open=${this.open}
3655
3715
  no-header
3656
3716
  label=${this.popUpTittle}
3657
- style=${bgStyle}
3717
+ style=${hostStyle}
3658
3718
  @sl-request-close=${(e) => {
3659
3719
  e.preventDefault();
3660
3720
  this._handleClose();
@@ -3671,6 +3731,7 @@ __decorate([property({
3671
3731
  })], AxebowModalsConfirmation.prototype, "open", void 0);
3672
3732
  __decorate([property({ type: Boolean })], AxebowModalsConfirmation.prototype, "inline", void 0);
3673
3733
  __decorate([property({ type: String })], AxebowModalsConfirmation.prototype, "backgroundColor", void 0);
3734
+ __decorate([property({ type: String })], AxebowModalsConfirmation.prototype, "maxWidth", void 0);
3674
3735
  __decorate([property({ type: String })], AxebowModalsConfirmation.prototype, "severity", void 0);
3675
3736
  __decorate([property({ type: String })], AxebowModalsConfirmation.prototype, "intent", void 0);
3676
3737
  __decorate([property({ type: String })], AxebowModalsConfirmation.prototype, "popUpTittle", void 0);
@@ -4464,10 +4525,16 @@ var AxebowCardVersionSelector = class AxebowCardVersionSelector extends LitEleme
4464
4525
  super(..._args);
4465
4526
  this.revisions = [];
4466
4527
  this.displayedRevision = "";
4528
+ this.disabled = false;
4467
4529
  }
4468
4530
  static {
4469
4531
  this.styles = [unsafeCSS(tailwind_default), css`
4470
- :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
+ }
4471
4538
  sl-select {
4472
4539
  --sl-input-background-color: transparent;
4473
4540
  --sl-input-border-color: transparent;
@@ -4488,7 +4555,7 @@ var AxebowCardVersionSelector = class AxebowCardVersionSelector extends LitEleme
4488
4555
  margin: 0;
4489
4556
  min-width: 0;
4490
4557
  width: fit-content !important;
4491
- max-width: 120px !important;
4558
+ max-width: var(--axebow-card-version-selector-max-width, 120px) !important;
4492
4559
  }
4493
4560
  sl-select::part(form-control) {
4494
4561
  display: inline-block;
@@ -4554,6 +4621,11 @@ var AxebowCardVersionSelector = class AxebowCardVersionSelector extends LitEleme
4554
4621
  }
4555
4622
  `];
4556
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
+ }
4557
4629
  _formatRevision(id) {
4558
4630
  if (!id) return "";
4559
4631
  const parts = id.split("/");
@@ -4561,7 +4633,7 @@ var AxebowCardVersionSelector = class AxebowCardVersionSelector extends LitEleme
4561
4633
  }
4562
4634
  render() {
4563
4635
  return html`
4564
- <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}>
4565
4637
  ${this.revisions.map((rev) => html`
4566
4638
  <sl-option value=${rev.id}>
4567
4639
  ${this._formatRevision(rev.id)}
@@ -4582,6 +4654,8 @@ var AxebowCardVersionSelector = class AxebowCardVersionSelector extends LitEleme
4582
4654
  };
4583
4655
  __decorate([property({ type: Array })], AxebowCardVersionSelector.prototype, "revisions", void 0);
4584
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);
4585
4659
  AxebowCardVersionSelector = __decorate([customElement("axebow-card-version-selector")], AxebowCardVersionSelector);
4586
4660
  //#endregion
4587
4661
  //#region src/components/cards/parts/axebow-role-tooltip.ts
@@ -6004,6 +6078,8 @@ var AxebowChannelConfigPanel = class AxebowChannelConfigPanel extends LitElement
6004
6078
  this.empty = true;
6005
6079
  this.channelTypeLabel = "";
6006
6080
  this.canEditAll = true;
6081
+ this.disabled = false;
6082
+ this.height = "80vh";
6007
6083
  }
6008
6084
  static {
6009
6085
  this.styles = [
@@ -6022,20 +6098,20 @@ var AxebowChannelConfigPanel = class AxebowChannelConfigPanel extends LitElement
6022
6098
  <div
6023
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
6024
6100
  hidden lg:flex ${this.empty ? "justify-center items-center text-(--axebow-gray)" : ""}"
6025
- style="height: 80vh;"
6101
+ style="height: ${this.height};"
6026
6102
  >
6027
6103
  ${this.empty ? "" : html`
6028
6104
  <div
6029
6105
  class="flex flex-col gap-3 opacity-100 transition-opacity duration-300 delay-100 w-full h-full overflow-y-auto"
6030
6106
  >
6031
- <div class="flex justify-between items-center gap-2">
6107
+ <div class="flex justify-between items-center gap-2 pointer-events-auto">
6032
6108
  <h1
6033
6109
  class="font-semibold text-sm text-(--axebow-secondary) truncate m-0"
6034
6110
  style="width: 14.625rem; height: 1rem; line-height: 1rem;"
6035
6111
  >
6036
6112
  ${this.channelTypeLabel}
6037
6113
  </h1>
6038
- ${this.canEditAll ? html`
6114
+ ${this.canEditAll && !this.disabled ? html`
6039
6115
  <div
6040
6116
  class="w-4.5 h-4.5 shrink-0 flex items-center justify-center cursor-pointer"
6041
6117
  @click=${this._handleDelete}
@@ -6043,8 +6119,16 @@ var AxebowChannelConfigPanel = class AxebowChannelConfigPanel extends LitElement
6043
6119
  <axebow-icon iconName="delete" iconColor="var(--axebow-error)" size="base"></axebow-icon>
6044
6120
  </div>
6045
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
+ ` : ""}
6046
6130
  </div>
6047
- <div class="flex flex-col gap-2 w-full">
6131
+ <div class="flex flex-col gap-2 w-full ${this.disabled ? "pointer-events-none" : ""}">
6048
6132
  <slot name="name-input"></slot>
6049
6133
  <slot name="port-input"></slot>
6050
6134
  <slot name="gateway-toggle"></slot>
@@ -6061,10 +6145,18 @@ var AxebowChannelConfigPanel = class AxebowChannelConfigPanel extends LitElement
6061
6145
  composed: true
6062
6146
  }));
6063
6147
  }
6148
+ _handleClose() {
6149
+ this.dispatchEvent(new CustomEvent("close", {
6150
+ bubbles: true,
6151
+ composed: true
6152
+ }));
6153
+ }
6064
6154
  };
6065
6155
  __decorate([property({ type: Boolean })], AxebowChannelConfigPanel.prototype, "empty", void 0);
6066
6156
  __decorate([property({ type: String })], AxebowChannelConfigPanel.prototype, "channelTypeLabel", void 0);
6067
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);
6068
6160
  AxebowChannelConfigPanel = __decorate([customElement("axebow-channel-config-panel")], AxebowChannelConfigPanel);
6069
6161
  //#endregion
6070
6162
  //#region src/components/axebow-mesh-node-renderer/axebow-mesh-node-renderer.ts
@@ -7423,6 +7515,219 @@ __decorate([property({ attribute: false })], TableChart.prototype, "chartOptions
7423
7515
  __decorate([property({ type: String })], TableChart.prototype, "height", void 0);
7424
7516
  TableChart = __decorate([customElement("table-chart")], TableChart);
7425
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
7426
7731
  //#region src/components/axebow-tenant-card/axebow-tenant-card.ts
7427
7732
  var AxebowTenantCard = class AxebowTenantCard extends LitElement {
7428
7733
  constructor(..._args) {
@@ -7924,7 +8229,6 @@ var AxebowActionsFooter = class AxebowActionsFooter extends LitElement {
7924
8229
  this.secondaryActionVariant = "primary";
7925
8230
  this.secondaryActionOutline = false;
7926
8231
  this.text = "";
7927
- this.maxWidth = "73.375rem";
7928
8232
  this.isOverlappingContent = false;
7929
8233
  }
7930
8234
  static {
@@ -7938,8 +8242,7 @@ var AxebowActionsFooter = class AxebowActionsFooter extends LitElement {
7938
8242
  render() {
7939
8243
  return html`
7940
8244
  <div
7941
- class="w-full mx-auto box-border ${this.isOverlappingContent ? "shadow-[0_-8px_8px_-8px_rgba(13,24,33,0.15)]" : ""}"
7942
- style="max-width: ${this.maxWidth}"
8245
+ class="w-full bg-(--axebow-base) box-border ${this.isOverlappingContent ? "shadow-[0_-8px_8px_-8px_rgba(13,24,33,0.15)]" : ""}"
7943
8246
  >
7944
8247
  <sl-divider class="h-px bg-(--axebow-light-gray)" style="margin: 1rem 0;"></sl-divider>
7945
8248
  <div class="h-10 box-content flex items-center gap-8 pb-6">
@@ -8010,7 +8313,6 @@ __decorate([property({ type: Boolean })], AxebowActionsFooter.prototype, "second
8010
8313
  __decorate([property({ type: String })], AxebowActionsFooter.prototype, "secondaryActionFixedWidth", void 0);
8011
8314
  __decorate([property({ type: String })], AxebowActionsFooter.prototype, "secondaryActionFixedHeight", void 0);
8012
8315
  __decorate([property({ type: String })], AxebowActionsFooter.prototype, "text", void 0);
8013
- __decorate([property({ type: String })], AxebowActionsFooter.prototype, "maxWidth", void 0);
8014
8316
  __decorate([property({ type: Boolean })], AxebowActionsFooter.prototype, "isOverlappingContent", void 0);
8015
8317
  AxebowActionsFooter = __decorate([customElement("axebow-actions-footer")], AxebowActionsFooter);
8016
8318
  //#endregion
@@ -8223,123 +8525,127 @@ __decorate([state()], AxebowTabSelector.prototype, "_tabCount", void 0);
8223
8525
  __decorate([state()], AxebowTabSelector.prototype, "_tabDisabled", void 0);
8224
8526
  AxebowTabSelector = __decorate([customElement("axebow-tab-selector")], AxebowTabSelector);
8225
8527
  //#endregion
8226
- //#region src/components/axebow-resource-limits/parts/axebow-resource-limit-input.ts
8227
- var AxebowResourceLimitInput = class AxebowResourceLimitInput extends LitElement {
8528
+ //#region src/components/axebow-underline-tab-selector/axebow-underline-tab-selector.ts
8529
+ var AxebowUnderlineTabSelector = class AxebowUnderlineTabSelector extends LitElement {
8228
8530
  constructor(..._args) {
8229
8531
  super(..._args);
8230
- this.label = "";
8231
- this.unit = "";
8232
- this.value = "";
8233
- this.max = Number.MAX_SAFE_INTEGER;
8234
- this.min = 0;
8235
- this.required = false;
8236
8532
  this.disabled = false;
8237
- this.hasError = false;
8533
+ this._activeTab = 0;
8534
+ this._tabCount = 0;
8535
+ this._tabDisabled = [];
8536
+ this._observer = null;
8238
8537
  }
8239
8538
  static {
8240
- this.styles = [unsafeCSS(tailwind_default), axebowTheme];
8539
+ this.styles = [
8540
+ unsafeCSS(tailwind_default),
8541
+ axebowTheme,
8542
+ css`
8543
+ :host {
8544
+ display: block;
8545
+ }
8546
+ button {
8547
+ font-family: inherit;
8548
+ }
8549
+ :host([disabled]) {
8550
+ opacity: 0.6;
8551
+ pointer-events: none;
8552
+ cursor: not-allowed;
8553
+ }
8554
+ `
8555
+ ];
8241
8556
  }
8242
- render() {
8243
- return html`
8244
- <div class="flex flex-col items-center gap-2 w-24.75 shrink-0">
8245
- <div class="flex items-center gap-1">
8246
- ${this.required ? html`<span class="text-(--axebow-error)">*</span>` : ""}
8247
- <span class="text-sm font-semibold text-center">${this.label}</span>
8248
- </div>
8249
- <axebow-input
8250
- controlType="integer"
8251
- .compact=${true}
8252
- .value=${this.value}
8253
- .max=${this.max}
8254
- .min=${this.min}
8255
- .disabled=${this.disabled}
8256
- .hasError=${this.hasError}
8257
- .callback=${this.callback}
8258
- fixedWidth="6.1875rem"
8259
- fixedHeight="2.5rem"
8260
- ></axebow-input>
8261
- <span class="text-sm text-(--axebow-secondary)">${this.unit}</span>
8262
- </div>
8263
- `;
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();
8264
8567
  }
8265
- };
8266
- __decorate([property({ type: String })], AxebowResourceLimitInput.prototype, "label", void 0);
8267
- __decorate([property({ type: String })], AxebowResourceLimitInput.prototype, "unit", void 0);
8268
- __decorate([property({ type: String })], AxebowResourceLimitInput.prototype, "value", void 0);
8269
- __decorate([property({ type: Number })], AxebowResourceLimitInput.prototype, "max", void 0);
8270
- __decorate([property({ type: Number })], AxebowResourceLimitInput.prototype, "min", void 0);
8271
- __decorate([property({ type: Boolean })], AxebowResourceLimitInput.prototype, "required", void 0);
8272
- __decorate([property({ type: Boolean })], AxebowResourceLimitInput.prototype, "disabled", void 0);
8273
- __decorate([property({ type: Boolean })], AxebowResourceLimitInput.prototype, "hasError", void 0);
8274
- __decorate([property({ attribute: false })], AxebowResourceLimitInput.prototype, "callback", void 0);
8275
- AxebowResourceLimitInput = __decorate([customElement("axebow-resource-limit-input")], AxebowResourceLimitInput);
8276
- //#endregion
8277
- //#region src/components/axebow-resource-limits/axebow-resource-limits-panel.ts
8278
- var AxebowResourceLimitsPanel = class AxebowResourceLimitsPanel extends LitElement {
8279
- constructor(..._args) {
8280
- super(..._args);
8281
- this.storageFields = [];
8568
+ disconnectedCallback() {
8569
+ super.disconnectedCallback();
8570
+ this._observer?.disconnect();
8282
8571
  }
8283
- static {
8284
- this.styles = [unsafeCSS(tailwind_default), axebowTheme];
8572
+ firstUpdated() {
8573
+ this._updateTabCount();
8285
8574
  }
8286
- _handleChange(field, e) {
8287
- const target = e.target;
8288
- let value = Math.trunc(Number(target.value));
8289
- if (value > field.max) value = field.max;
8290
- target.value = value.toString();
8291
- this.dispatchEvent(new CustomEvent("resource-limit-change", {
8292
- detail: {
8293
- key: field.key,
8294
- value
8295
- },
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);
8578
+ }
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;
8584
+ }
8585
+ this._tabDisabled = Array.from({ length: this._tabCount }, (_, i) => {
8586
+ return this.querySelector(`[slot="tab-label-${i}"]`)?.hasAttribute("disabled") ?? false;
8587
+ });
8588
+ }
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 },
8296
8594
  bubbles: true,
8297
8595
  composed: true
8298
8596
  }));
8299
8597
  }
8300
- _renderField(field) {
8598
+ render() {
8599
+ const tabs = Array.from({ length: this._tabCount }, (_, i) => i);
8301
8600
  return html`
8302
- <axebow-resource-limit-input
8303
- label=${field.label}
8304
- unit=${field.unit}
8305
- value=${field.value?.toString() ?? ""}
8306
- .max=${field.max}
8307
- .min=${field.min ?? 0}
8308
- ?required=${field.required}
8309
- ?disabled=${field.disabled}
8310
- ?hasError=${field.hasError}
8311
- .callback=${(e) => this._handleChange(field, e)}
8312
- ></axebow-resource-limit-input>
8313
- `;
8314
- }
8315
- render() {
8316
- if (!this.cpu || !this.memory) return html``;
8317
- return html`
8318
- <div class="flex items-center flex-wrap gap-19">
8319
- <div class="flex items-start gap-6">${this._renderField(this.cpu)} ${this._renderField(this.memory)}</div>
8320
- <div class="flex items-start gap-4 w-100.5 p-4 border border-(--axebow-table-header-border) rounded-md box-border">
8321
- ${this.storageFields.map((field) => this._renderField(field))}
8322
- </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>
8323
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
+ `)}
8324
8626
  `;
8325
8627
  }
8326
8628
  };
8327
- __decorate([property({ type: Object })], AxebowResourceLimitsPanel.prototype, "cpu", void 0);
8328
- __decorate([property({ type: Object })], AxebowResourceLimitsPanel.prototype, "memory", void 0);
8329
- __decorate([property({ type: Array })], AxebowResourceLimitsPanel.prototype, "storageFields", void 0);
8330
- AxebowResourceLimitsPanel = __decorate([customElement("axebow-resource-limits-panel")], AxebowResourceLimitsPanel);
8629
+ __decorate([property({
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);
8331
8638
  //#endregion
8332
- //#region src/components/axebow-selector-slider/axebow-selector-slider.ts
8333
- var AxebowSelectorSlider = class AxebowSelectorSlider extends LitElement {
8639
+ //#region src/components/axebow-role-card/axebow-role-card.ts
8640
+ var AxebowRoleCard = class AxebowRoleCard extends LitElement {
8334
8641
  constructor(..._args) {
8335
8642
  super(..._args);
8336
- this.quantity = 0;
8337
- this.minTag = 0;
8338
- this.mediumTag = "Y";
8339
- this.maxTag = "X";
8340
- this.step = 1;
8341
- this.disabled = false;
8342
- this._isDragging = false;
8643
+ this.name = "";
8644
+ this.logoUrl = "";
8645
+ this.descriptionPrefix = "";
8646
+ this.description = "";
8647
+ this.resourceLimitsTitle = "";
8648
+ this.resources = [];
8343
8649
  }
8344
8650
  static {
8345
8651
  this.styles = [
@@ -8348,183 +8654,93 @@ var AxebowSelectorSlider = class AxebowSelectorSlider extends LitElement {
8348
8654
  css`
8349
8655
  :host {
8350
8656
  display: block;
8657
+ }
8658
+ sl-divider {
8659
+ --color: var(--axebow-gray);
8660
+ --width: 1px;
8661
+ }
8662
+ sl-input::part(base) {
8351
8663
  width: 100%;
8664
+ height: 2.5rem;
8665
+ }
8666
+ sl-input::part(input) {
8667
+ text-align: center;
8352
8668
  }
8353
8669
  `
8354
8670
  ];
8355
8671
  }
8356
- get value() {
8357
- return this.quantity;
8358
- }
8359
- set value(val) {
8360
- this.quantity = val;
8361
- }
8362
- get _minVal() {
8363
- if (typeof this.min === "number") return this.min;
8364
- const n = Number(this.minTag);
8365
- return isNaN(n) ? 0 : n;
8366
- }
8367
- get _maxVal() {
8368
- if (typeof this.max === "number") return this.max;
8369
- const n = Number(this.maxTag);
8370
- return isNaN(n) ? 100 : n;
8371
- }
8372
- get _numericQuantity() {
8373
- if (typeof this.quantity === "string") {
8374
- const str = this.quantity.toLowerCase();
8375
- if (str === "min") return this._minVal;
8376
- if (str === "max") return this._maxVal;
8377
- if (str === "middle") return Math.round((this._minVal + this._maxVal) / 2);
8378
- const parsed = Number(this.quantity);
8379
- if (!isNaN(parsed)) return parsed;
8380
- }
8381
- return typeof this.quantity === "number" ? this.quantity : this._minVal;
8382
- }
8383
- get _percentage() {
8384
- const min = this._minVal;
8385
- const max = this._maxVal;
8386
- if (max <= min) return 0;
8387
- return (Math.max(min, Math.min(max, this._numericQuantity)) - min) / (max - min) * 100;
8388
- }
8389
- _setValue(newValue) {
8390
- const min = this._minVal;
8391
- const max = this._maxVal;
8392
- const clamped = Math.max(min, Math.min(max, newValue));
8393
- if (this._numericQuantity !== clamped) {
8394
- this.quantity = clamped;
8395
- this.dispatchEvent(new CustomEvent("change", {
8396
- detail: {
8397
- value: clamped,
8398
- quantity: clamped
8399
- },
8400
- bubbles: true,
8401
- composed: true
8402
- }));
8403
- }
8404
- }
8405
- _handlePointerDown(e) {
8406
- if (this.disabled) return;
8407
- this._isDragging = true;
8408
- this._updateFromPointer(e);
8409
- const handlePointerMove = (moveEv) => {
8410
- if (this._isDragging) this._updateFromPointer(moveEv);
8411
- };
8412
- const handlePointerUp = () => {
8413
- this._isDragging = false;
8414
- window.removeEventListener("pointermove", handlePointerMove);
8415
- window.removeEventListener("pointerup", handlePointerUp);
8416
- };
8417
- window.addEventListener("pointermove", handlePointerMove);
8418
- window.addEventListener("pointerup", handlePointerUp);
8419
- }
8420
- _updateFromPointer(e) {
8421
- if (!this._trackContainer) return;
8422
- const rect = this._trackContainer.getBoundingClientRect();
8423
- const x = e.clientX - rect.left;
8424
- const width = rect.width;
8425
- if (width <= 0) return;
8426
- const ratio = Math.max(0, Math.min(1, x / width));
8427
- const min = this._minVal;
8428
- const rawVal = min + ratio * (this._maxVal - min);
8429
- const step = this.step || 1;
8430
- const stepped = Math.round((rawVal - min) / step) * step + min;
8431
- this._setValue(stepped);
8432
- }
8433
- _handleKeyDown(e) {
8434
- if (this.disabled) return;
8435
- const min = this._minVal;
8436
- const max = this._maxVal;
8437
- const step = this.step || 1;
8438
- const current = this._numericQuantity;
8439
- if (e.key === "ArrowRight" || e.key === "ArrowUp") {
8440
- e.preventDefault();
8441
- this._setValue(Math.min(max, current + step));
8442
- } else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
8443
- e.preventDefault();
8444
- this._setValue(Math.max(min, current - step));
8445
- } else if (e.key === "Home") {
8446
- e.preventDefault();
8447
- this._setValue(min);
8448
- } else if (e.key === "End") {
8449
- e.preventDefault();
8450
- this._setValue(max);
8451
- }
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
+ `;
8452
8680
  }
8453
8681
  render() {
8454
- const percent = this._percentage;
8455
- const currentVal = this._numericQuantity;
8456
- const min = this._minVal;
8457
- const max = this._maxVal;
8458
- const mid = Math.round((min + max) / 2);
8459
8682
  return html`
8460
- <div class="w-full flex flex-col gap-2 select-none ${this.disabled ? "opacity-50 pointer-events-none" : ""}">
8461
- <!-- Slider Track Container -->
8462
- <div
8463
- 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"
8464
- tabindex=${this.disabled ? -1 : 0}
8465
- role="slider"
8466
- aria-valuemin=${min}
8467
- aria-valuemax=${max}
8468
- aria-valuenow=${currentVal}
8469
- aria-valuetext=${String(currentVal)}
8470
- @pointerdown=${this._handlePointerDown}
8471
- @keydown=${this._handleKeyDown}
8472
- >
8473
- <!-- Outer track padding container for exact knob alignment -->
8474
- <div class="slider-track-container relative w-full h-3 rounded-full bg-[#C7DCFA] overflow-visible">
8475
- <!-- Active Fill Track -->
8476
- <div
8477
- class="absolute left-0 top-0 bottom-0 rounded-full bg-[#006BFF] transition-all duration-150 ease-out"
8478
- style="width: ${percent}%;"
8479
- ></div>
8480
-
8481
- <!-- Slider Thumb Knob -->
8482
- <div
8483
- 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"
8484
- style="left: ${percent}%;"
8485
- ></div>
8486
- </div>
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>
8487
8686
  </div>
8488
-
8489
- <!-- Labels below -->
8490
- <div class="flex justify-between items-center text-sm font-semibold text-[#78787A] px-1">
8491
- <span class="w-1/3 text-left cursor-pointer" @click=${() => !this.disabled && this._setValue(min)}>
8492
- ${this.minTag}
8493
- </span>
8494
- <span class="w-1/3 text-center cursor-pointer" @click=${() => !this.disabled && this._setValue(mid)}>
8495
- ${this.mediumTag}
8496
- </span>
8497
- <span class="w-1/3 text-right cursor-pointer" @click=${() => !this.disabled && this._setValue(max)}>
8498
- ${this.maxTag}
8499
- </span>
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
+ `)}
8500
8706
  </div>
8501
8707
  </div>
8502
8708
  `;
8503
8709
  }
8504
8710
  };
8505
- __decorate([property({
8506
- type: Number,
8507
- reflect: true
8508
- })], AxebowSelectorSlider.prototype, "quantity", void 0);
8509
- __decorate([property()], AxebowSelectorSlider.prototype, "minTag", void 0);
8510
- __decorate([property()], AxebowSelectorSlider.prototype, "mediumTag", void 0);
8511
- __decorate([property()], AxebowSelectorSlider.prototype, "maxTag", void 0);
8512
- __decorate([property({ type: Number })], AxebowSelectorSlider.prototype, "min", void 0);
8513
- __decorate([property({ type: Number })], AxebowSelectorSlider.prototype, "max", void 0);
8514
- __decorate([property({ type: Number })], AxebowSelectorSlider.prototype, "step", void 0);
8515
- __decorate([property({ type: Boolean })], AxebowSelectorSlider.prototype, "disabled", void 0);
8516
- __decorate([property()], AxebowSelectorSlider.prototype, "value", null);
8517
- __decorate([query(".slider-track-container")], AxebowSelectorSlider.prototype, "_trackContainer", void 0);
8518
- AxebowSelectorSlider = __decorate([customElement("axebow-selector-slider")], AxebowSelectorSlider);
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);
8519
8718
  //#endregion
8520
- //#region src/components/axebow-deploy-summary/axebow-deploy-summary.ts
8521
- var AxebowDeploySummary = class AxebowDeploySummary extends LitElement {
8719
+ //#region src/components/axebow-time-range-panel/axebow-time-range-panel.ts
8720
+ var AxebowTimeRangePanel = class AxebowTimeRangePanel extends LitElement {
8522
8721
  constructor(..._args) {
8523
8722
  super(..._args);
8524
- this.summaryTitle = "";
8525
- this.showDownloadButton = false;
8526
- this.downloadLabel = "";
8527
- this.currentStep = 0;
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
+ };
8528
8744
  }
8529
8745
  static {
8530
8746
  this.styles = [
@@ -8533,353 +8749,302 @@ var AxebowDeploySummary = class AxebowDeploySummary extends LitElement {
8533
8749
  css`
8534
8750
  :host {
8535
8751
  display: block;
8536
- height: 100%;
8537
8752
  }
8538
- axebow-summary-card {
8539
- display: block;
8540
- height: 100%;
8753
+ sl-input::part(input) {
8754
+ font-size: 0.95rem;
8755
+ color: var(--axebow-strong-gray);
8756
+ background-color: #f3f4f6;
8541
8757
  }
8542
- /* The plain, solid divider used between every summary section -
8543
- matches whatever separates the step titles. */
8544
- sl-divider.summary-title-divider {
8545
- --color: var(--axebow-table-header-border, #dbdde4);
8546
- --spacing: 0.75rem;
8758
+ sl-input::part(base) {
8759
+ background-color: #f3f4f6;
8760
+ width: 100%;
8547
8761
  }
8548
- /* Dashed variant used inside the autoscaling summary. */
8549
- sl-divider.summary-dashed-divider {
8550
- --color: var(--axebow-base);
8551
- --spacing: 0.75rem;
8552
- border-top-style: dashed !important;
8762
+ .apply-button::part(base) {
8763
+ font-size: 0.875rem !important;
8553
8764
  }
8554
8765
  `
8555
8766
  ];
8556
8767
  }
8557
- updated(changedProperties) {
8558
- super.updated(changedProperties);
8559
- if (changedProperties.has("currentStep")) {
8560
- const oldStep = changedProperties.get("currentStep");
8561
- if (oldStep !== void 0 && this.currentStep > oldStep) this._scrollToBottom();
8562
- }
8563
- }
8564
- _scrollToBottom() {
8565
- setTimeout(() => {
8566
- const summaryCard = this.renderRoot.querySelector("axebow-summary-card");
8567
- if (summaryCard && summaryCard.scrollToBottom) summaryCard.scrollToBottom();
8568
- const container = this.renderRoot.querySelector(".overflow-y-auto");
8569
- if (container) container.scrollTop = container.scrollHeight;
8570
- }, 100);
8768
+ _emit(eventName, detail) {
8769
+ this.dispatchEvent(new CustomEvent(eventName, {
8770
+ detail,
8771
+ bubbles: true,
8772
+ composed: true
8773
+ }));
8571
8774
  }
8572
- render() {
8573
- return html`
8574
- <axebow-summary-card title="${this.summaryTitle}">
8575
- ${this.showDownloadButton ? html`
8576
- <axebow-button slot="header-actions" variant="text" size="medium" @click=${this._handleDownloadBundle}>
8577
- <axebow-icon
8578
- iconName="download_for_offline"
8579
- slot="suffix"
8580
- iconColor="var(--axebow-tertiary)"
8581
- size="xl"
8582
- ></axebow-icon>
8583
- <span class="text-sm lg:text-base hidden lg:inline">${this.downloadLabel}</span>
8584
- </axebow-button>
8585
- ` : ""}
8586
- ${this._renderDeploymentInfo()}
8587
- <div class="h-px border-t border-dashed border-gray-400 my-4"></div>
8588
- ${this._renderResourceLimits()}
8589
- <sl-divider class="summary-title-divider"></sl-divider>
8590
- <div class="flex-1 overflow-y-auto flex flex-col">
8591
- ${this._renderIdentificationStep()} ${this._renderResourcesStep()} ${this._renderScalingStep()}
8592
- ${this._renderChannelsStep()} ${this._renderConfigurationStep()}
8593
- </div>
8594
- </axebow-summary-card>
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>
8595
8794
  `;
8596
8795
  }
8597
- _renderDeploymentInfo() {
8598
- const info = this.deploymentInfo;
8599
- if (!info) return "";
8796
+ _renderAbsoluteTimeSection() {
8600
8797
  return html`
8601
- <div class="flex flex-col gap-2">
8602
- <axebow-summary-key-value
8603
- label="${info.subscriptionPlan.label}"
8604
- value="${info.subscriptionPlan.value}"
8605
- ></axebow-summary-key-value>
8606
- <axebow-summary-key-value label="${info.tenant.label}" value="${info.tenant.value}"></axebow-summary-key-value
8607
- ><axebow-summary-key-value
8608
- label="${info.account.label}"
8609
- value="${info.account.value}"
8610
- ></axebow-summary-key-value>
8611
- <div class="flex gap-4 items-center mb-1">
8612
- <p class="text-base text-(--axebow-black)">${info.cloudProviderLabel}</p>
8613
- ${info.cloudProviderLogoSrc ? html`<img src="${info.cloudProviderLogoSrc}" class="h-6" alt="${info.cloudProviderLogoAlt ?? ""}" />` : ""}
8614
- </div>
8615
- <axebow-summary-key-value
8616
- label="${info.environment.label}"
8617
- value="${info.environment.value}"
8618
- ></axebow-summary-key-value>
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>
8619
8818
  </div>
8620
8819
  `;
8621
8820
  }
8622
- _renderResourceLimits() {
8623
- const limits = this.resourceLimits;
8624
- if (!limits) return "";
8821
+ render() {
8625
8822
  return html`
8626
- <div class="flex flex-col gap-2 flex-wrap">
8627
- <p class="text-base text-(--axebow-black)">${limits.limitsAvailableLabel}</p>
8628
- <div>
8629
- <axebow-resource-bar
8630
- icon="${limits.cpu.icon}"
8631
- label="${limits.cpu.label}"
8632
- .current=${limits.cpu.current}
8633
- .limit=${limits.cpu.limit}
8634
- .percentage=${limits.cpu.percentage}
8635
- ></axebow-resource-bar>
8636
- <axebow-resource-bar
8637
- icon="${limits.memory.icon}"
8638
- label="${limits.memory.label}"
8639
- .current=${limits.memory.current}
8640
- .limit=${limits.memory.limit}
8641
- .percentage=${limits.memory.percentage}
8642
- rotate="${limits.memory.rotate ?? "0"}"
8643
- ></axebow-resource-bar>
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>
8644
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>
8645
8837
  </div>
8646
8838
  `;
8647
8839
  }
8648
- /** label:value pair with the shared black-name/gray-value convention. */
8649
- _field(label, value, hasError = false) {
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() {
8650
8919
  return html`
8651
- <p class="text-base">
8652
- <span class="text-(--axebow-black)">${label}</span>
8653
- <strong class="${hasError ? "text-(--axebow-error)" : "text-(--axebow-gray)"}">${value}</strong>
8654
- </p>
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>
8655
8925
  `;
8656
8926
  }
8657
- _renderIdentificationStep() {
8658
- const step = this.identification;
8659
- if (!step?.visible) return "";
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) {
8660
8934
  return html`
8661
- <axebow-summary-step
8662
- .stepNumber=${step.stepNumber}
8663
- stepTitle="${step.stepTitle}"
8664
- .valid=${step.valid}
8665
- .collapsed=${step.collapsed}
8666
- .visible=${true}
8667
- .isEditing=${step.isEditing}
8668
- .enabled=${step.enabled}
8935
+ <sl-menu-item
8936
+ @click=${(e) => this._handleItemClick(e, {
8937
+ type: "instance",
8938
+ role: role.name,
8939
+ instanceIdx
8940
+ })}
8669
8941
  >
8670
- <div class="space-y-1">
8671
- ${step.imageName ? this._field(step.imageNameLabel, step.imageName) : ""}
8672
- ${step.serviceName ? this._field(step.serviceNameLabel, step.serviceName) : ""}
8673
- ${step.project ? this._field(step.projectLabel, step.project) : ""}
8674
- ${step.registry ? this._renderRegistrySummary(step.registry) : ""}
8675
- ${step.entrypoint ? html`<div class="border-t border-dashed border-gray-300 pt-2 flex items-center gap-1 min-w-0 text-base">
8676
- <span class="shrink-0 text-(--axebow-black)">${step.entrypointLabel}</span>
8677
- <axebow-tooltip content="${step.entrypoint}">
8678
- <strong class="text-(--axebow-gray) block truncate max-w-36">${step.entrypoint}</strong>
8679
- </axebow-tooltip>
8680
- </div>` : ""}
8681
- ${step.cmd ? html`<div class="flex items-center gap-1 min-w-0 text-base">
8682
- <span class="shrink-0 text-(--axebow-black)">${step.commandLabel}</span>
8683
- <axebow-tooltip content="${step.cmd}">
8684
- <strong class="text-(--axebow-gray) block truncate max-w-36">${step.cmd}</strong>
8685
- </axebow-tooltip>
8686
- </div>` : ""}
8687
- </div>
8688
- </axebow-summary-step>
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>
8689
8954
  `;
8690
8955
  }
8691
- _renderRegistrySummary(registry) {
8956
+ _renderContainer(roleName, instanceIdx, container) {
8692
8957
  return html`
8693
- <div class="flex items-center gap-2 min-w-0 text-base">
8694
- <p class="shrink-0 text-(--axebow-black)">${registry.containerRegistryLabel}</p>
8695
- ${!registry.logoSrc ? html`<axebow-tooltip content="${registry.value}">
8696
- <strong class="text-(--axebow-gray) block truncate w-full">${registry.value}</strong>
8697
- </axebow-tooltip>` : html`<img src="${registry.logoSrc}" class="w-6 h-4 object-contain" />`}
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>
8698
8973
  </div>
8699
- ${registry.credentialSecret ? html` <div class="flex items-center gap-2 min-w-0 text-base">
8700
- <p class="shrink-0 text-(--axebow-black)">${registry.registryCredentialsLabel}</p>
8701
- <axebow-tooltip content="${registry.credentialSecret}">
8702
- <strong class="text-(--axebow-gray) block truncate w-full">${registry.credentialSecret}</strong>
8703
- </axebow-tooltip>
8704
- </div>` : ""}
8705
8974
  `;
8706
8975
  }
8707
- _renderResourcesStep() {
8708
- const step = this.resources;
8709
- if (!step?.visible) return "";
8976
+ _renderFooter() {
8710
8977
  return html`
8711
- <axebow-summary-step
8712
- .stepNumber=${step.stepNumber}
8713
- stepTitle="${step.stepTitle}"
8714
- .valid=${step.valid}
8715
- .collapsed=${step.collapsed}
8716
- .visible=${true}
8717
- .isEditing=${step.isEditing}
8718
- .enabled=${step.enabled}
8719
- >
8720
- <div class="pr-2 space-y-2">
8721
- <div class="flex flex-row gap-x-4 flex-wrap">
8722
- ${this._field(step.cpus.label, `${step.cpus.value} ${step.cpus.unit}`, step.cpus.hasError)}
8723
- ${this._field(step.memory.label, `${step.memory.value} ${step.memory.unit}`, step.memory.hasError)}
8724
- </div>
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}
8725
8985
  </div>
8726
- </axebow-summary-step>
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>
8727
8995
  `;
8728
8996
  }
8729
- _renderScalingStep() {
8730
- const step = this.scaling;
8731
- if (!step?.visible) return "";
8997
+ render() {
8732
8998
  return html`
8733
- <axebow-summary-step
8734
- .stepNumber=${step.stepNumber}
8735
- stepTitle="${step.stepTitle}"
8736
- .valid=${step.valid}
8737
- .collapsed=${step.collapsed}
8738
- .visible=${true}
8739
- .isEditing=${step.isEditing}
8740
- .enabled=${step.enabled}
8741
- >
8742
- <div class="space-y-1">
8743
- ${step.isAutoscaling && step.autoscaling ? this._renderAutoscalingInfo(step.autoscaling) : this._field(step.fixedReplicasLabel, step.fixedReplicas)}
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>
8744
9002
  </div>
8745
- </axebow-summary-step>
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>
8746
9018
  `;
8747
9019
  }
8748
- _renderAutoscalingInfo(config) {
8749
- const hasScaleDownInfo = config.cpuDown || config.memoryDown;
8750
- return html`
8751
- <div class="border-t border-dashed border-gray-300 pt-3 space-y-1">
8752
- <p class="font-semibold text-base lg:text-lg text-(--axebow-black) mb-2">${config.title}</p>
8753
- ${config.minReplicas ? this._field(config.minLabel, config.minReplicas.value, config.minReplicas.hasError) : ""}
8754
- ${config.maxReplicas ? this._field(config.maxLabel, config.maxReplicas.value) : ""}
8755
- ${hasScaleDownInfo ? html`<sl-divider class="summary-dashed-divider"></sl-divider>` : ""}
8756
- ${config.cpuDown ? this._field(config.scaleDownCpuLabel, `${config.cpuDown}%`) : ""}
8757
- ${config.cpuDown && config.memoryDown ? html`<p class="text-base text-(--axebow-black)">${config.andLabel}</p>` : ""}
8758
- ${config.memoryDown ? this._field(config.scaleDownMemoryLabel, `${config.memoryDown}%`) : ""}
8759
- ${hasScaleDownInfo ? html`<sl-divider class="summary-dashed-divider"></sl-divider>` : ""}
8760
- ${config.histeresys ? this._field(config.cooldownLabel, config.histeresys) : ""}
8761
- </div>
8762
- `;
8763
- }
8764
- _renderChannelsStep() {
8765
- const step = this.channels;
8766
- if (!step?.visible) return "";
8767
- const hasAny = step.serverChannels || step.clientChannels || step.duplexChannels;
8768
- return html`
8769
- <axebow-summary-step
8770
- .stepNumber=${step.stepNumber}
8771
- stepTitle="${step.stepTitle}"
8772
- .valid=${step.valid}
8773
- .collapsed=${step.collapsed}
8774
- .visible=${true}
8775
- .isEditing=${step.isEditing}
8776
- .enabled=${step.enabled}
8777
- >
8778
- <div class="space-y-2 text-base">
8779
- ${hasAny ? html`
8780
- ${step.serverChannels ? this._renderChannelGroup(step.serverChannels, step.linkedToLabel) : ""}
8781
- ${step.clientChannels ? html`
8782
- ${step.serverChannels ? html`<div class="border-t border-dashed border-gray-300"></div>` : ""}
8783
- ${this._renderChannelGroup(step.clientChannels, step.linkedToLabel)}
8784
- ` : ""}
8785
- ${step.duplexChannels ? html`
8786
- ${step.serverChannels || step.clientChannels ? html`<div class="border-t border-dashed border-gray-300"></div>` : ""}
8787
- ${this._renderChannelGroup(step.duplexChannels, step.linkedToLabel)}
8788
- ` : ""}
8789
- ` : html`<p class="text-gray-500 italic">${step.noChannelsLabel}</p>`}
8790
- </div>
8791
- </axebow-summary-step>
8792
- `;
8793
- }
8794
- _renderChannelGroup(group, linkedToLabel) {
8795
- const hasAnyLink = group.channels.some((ch) => ch.linked.length > 0);
8796
- const totalLinked = group.channels.reduce((acc, ch) => acc + ch.linked.length, 0);
8797
- return html`
8798
- <div class="grid gap-x-4 gap-y-1 items-center" style="grid-template-columns: 1fr ${hasAnyLink ? "1fr" : ""}">
8799
- <span class="font-medium text-(--axebow-black)">${group.label} (${group.channels.length}):</span>
8800
- ${hasAnyLink ? html`<span class="font-medium text-(--axebow-black)">${linkedToLabel} (${totalLinked}):</span>` : ""}
8801
- ${group.channels.map((ch) => html`
8802
- <div class="flex items-center min-w-0">
8803
- <strong class="text-(--axebow-gray) flex items-center gap-1 min-w-0 truncate">
8804
- <span class="truncate">${ch.name}${ch.port ? `:${ch.port}` : ""}</span>
8805
- ${ch.isPublic ? html`<axebow-icon
8806
- class="shrink-0"
8807
- iconName="captive_portal"
8808
- iconColor="var(--axebow-gray)"
8809
- size="md"
8810
- title="Gateway"
8811
- ></axebow-icon>` : ""}
8812
- </strong>
8813
- </div>
8814
- ${hasAnyLink ? html`<span class="text-(--axebow-gray) font-semibold truncate">${ch.linked.join(", ") || "—"}</span>` : ""}
8815
- `)}
8816
- </div>
8817
- `;
8818
- }
8819
- _renderNameValueGrid(items, nameLabel, valueLabel) {
8820
- return html`
8821
- <div class="grid gap-x-6 gap-y-1 text-base" style="grid-template-columns: 1fr auto 1fr">
8822
- <span class="text-(--axebow-black)">${nameLabel}:</span>
8823
- <span></span>
8824
- <span class="text-(--axebow-black)">${valueLabel}:</span>
8825
- ${items.map((item) => html`
8826
- <span class="truncate font-semibold text-(--axebow-gray)">${item.name}</span>
8827
- <span class="font-semibold text-(--axebow-gray)">=</span>
8828
- <span class="font-semibold truncate text-(--axebow-gray)">${item.value}</span>
8829
- `)}
8830
- </div>
8831
- `;
8832
- }
8833
- _renderConfigurationStep() {
8834
- const step = this.configuration;
8835
- if (!step?.visible) return "";
8836
- const pathItems = step.items.filter((item) => !!item.path);
8837
- const plainItems = step.items.filter((item) => !item.path);
8838
- return html`
8839
- <axebow-summary-step
8840
- .stepNumber=${step.stepNumber}
8841
- stepTitle="${step.stepTitle}"
8842
- .valid=${step.valid}
8843
- .collapsed=${step.collapsed}
8844
- .visible=${true}
8845
- .isEditing=${step.isEditing}
8846
- .enabled=${step.enabled}
8847
- >
8848
- <div class="ml-4">
8849
- ${step.items.length ? html`
8850
- ${plainItems.length ? this._renderNameValueGrid(plainItems, step.variableNameLabel, step.variableValueLabel) : ""}
8851
- ${pathItems.length && plainItems.length ? html`<sl-divider class="summary-title-divider"></sl-divider>` : ""}
8852
- ${pathItems.length ? this._renderNameValueGrid(pathItems.map((item) => ({
8853
- name: item.name,
8854
- value: item.path
8855
- })), step.pathNameLabel, step.pathValueLabel) : ""}
8856
- ` : html`<p class="text-base text-gray-500 italic">${step.noConfigVarsLabel}</p>`}
8857
- </div>
8858
- </axebow-summary-step>
8859
- `;
8860
- }
8861
- _handleDownloadBundle() {
8862
- this.dispatchEvent(new CustomEvent("download-bundle", {
8863
- bubbles: true,
8864
- composed: true
8865
- }));
8866
- }
8867
9020
  };
8868
- __decorate([property({ type: String })], AxebowDeploySummary.prototype, "summaryTitle", void 0);
8869
- __decorate([property({ type: Boolean })], AxebowDeploySummary.prototype, "showDownloadButton", void 0);
8870
- __decorate([property({ type: String })], AxebowDeploySummary.prototype, "downloadLabel", void 0);
8871
- __decorate([property({ attribute: false })], AxebowDeploySummary.prototype, "deploymentInfo", void 0);
8872
- __decorate([property({ attribute: false })], AxebowDeploySummary.prototype, "resourceLimits", void 0);
8873
- __decorate([property({ attribute: false })], AxebowDeploySummary.prototype, "identification", void 0);
8874
- __decorate([property({ attribute: false })], AxebowDeploySummary.prototype, "resources", void 0);
8875
- __decorate([property({ attribute: false })], AxebowDeploySummary.prototype, "scaling", void 0);
8876
- __decorate([property({ attribute: false })], AxebowDeploySummary.prototype, "channels", void 0);
8877
- __decorate([property({ attribute: false })], AxebowDeploySummary.prototype, "configuration", void 0);
8878
- __decorate([property({ type: Number })], AxebowDeploySummary.prototype, "currentStep", void 0);
8879
- AxebowDeploySummary = __decorate([customElement("axebow-deploy-summary")], AxebowDeploySummary);
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);
8880
9029
  //#endregion
8881
- //#region src/components/axebow-summary/axebow-summary-key-value.ts
8882
- var AxebowSummaryKeyValue = class AxebowSummaryKeyValue extends LitElement {
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
+ }
8883
9048
  static {
8884
9049
  this.styles = [
8885
9050
  unsafeCSS(tailwind_default),
@@ -8887,218 +9052,196 @@ var AxebowSummaryKeyValue = class AxebowSummaryKeyValue extends LitElement {
8887
9052
  css`
8888
9053
  :host {
8889
9054
  display: block;
8890
- margin-bottom: 0.25rem;
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
+ }
8891
9066
  }
8892
9067
  `
8893
9068
  ];
8894
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
+ }
8895
9078
  render() {
8896
9079
  return html`
8897
- <p class="text-base">
8898
- <span class="text-(--axebow-black)">${this.label}:</span>
8899
- <strong class="text-(--axebow-gray)">${this.value}</strong>
8900
- </p>
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>
8901
9116
  `;
8902
9117
  }
8903
9118
  };
8904
- __decorate([property({ type: String })], AxebowSummaryKeyValue.prototype, "label", void 0);
8905
- __decorate([property({ type: String })], AxebowSummaryKeyValue.prototype, "value", void 0);
8906
- AxebowSummaryKeyValue = __decorate([customElement("axebow-summary-key-value")], AxebowSummaryKeyValue);
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);
8907
9127
  //#endregion
8908
- //#region src/components/axebow-summary/axebow-resource-bar.ts
8909
- var AxebowResourceBar = class AxebowResourceBar extends LitElement {
9128
+ //#region src/components/axebow-resource-limits/parts/axebow-resource-limit-input.ts
9129
+ var AxebowResourceLimitInput = class AxebowResourceLimitInput extends LitElement {
8910
9130
  constructor(..._args) {
8911
9131
  super(..._args);
8912
- this.icon = "";
8913
9132
  this.label = "";
8914
- this.current = 0;
8915
- this.limit = 0;
8916
- this.percentage = 0;
8917
- this.rotate = "0";
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;
8918
9140
  }
8919
9141
  static {
8920
9142
  this.styles = [unsafeCSS(tailwind_default), axebowTheme];
8921
9143
  }
8922
9144
  render() {
8923
9145
  return html`
8924
- <div class="flex justify-between items-center gap-2 flex-wrap">
9146
+ <div class="flex flex-col items-center gap-2 w-24.75 shrink-0">
8925
9147
  <div class="flex items-center gap-1">
8926
- <axebow-icon
8927
- iconName="${this.icon}"
8928
- iconColor="var(--axebow-strong-gray)"
8929
- size="xl"
8930
- rotate="${Number(this.rotate)}"
8931
- ></axebow-icon>
8932
- <p class="text-base font-bold text-(--axebow-black)">${this.label}</p>
8933
- </div>
8934
- <div class="flex gap-1 flex-1 items-center max-w-43 min-w-20 justify-end">
8935
- <p class="text-base text-(--axebow-gray)">${this.current.toFixed(2)}</p>
8936
- <div class="relative rounded-lg h-2 flex-1 max-w-38 bg-gray-200 overflow-hidden">
8937
- <div
8938
- class="absolute h-full ${this.percentage > 100 ? "bg-(--axebow-error)" : this.percentage === 100 ? "bg-(--axebow-warning)" : "bg-(--axebow-gray)"}"
8939
- style="width: ${this.percentage}%;"
8940
- ></div>
8941
- </div>
8942
- <p class="text-base font-bold text-(--axebow-gray)">${this.limit ?? "-"}</p>
9148
+ ${this.required ? html`<span class="text-(--axebow-error)">*</span>` : ""}
9149
+ <span class="text-sm font-semibold text-center">${this.label}</span>
8943
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>
8944
9164
  </div>
8945
9165
  `;
8946
9166
  }
8947
9167
  };
8948
- __decorate([property({ type: String })], AxebowResourceBar.prototype, "icon", void 0);
8949
- __decorate([property({ type: String })], AxebowResourceBar.prototype, "label", void 0);
8950
- __decorate([property({ type: Number })], AxebowResourceBar.prototype, "current", void 0);
8951
- __decorate([property({ type: Number })], AxebowResourceBar.prototype, "limit", void 0);
8952
- __decorate([property({ type: Number })], AxebowResourceBar.prototype, "percentage", void 0);
8953
- __decorate([property({ type: String })], AxebowResourceBar.prototype, "rotate", void 0);
8954
- AxebowResourceBar = __decorate([customElement("axebow-resource-bar")], AxebowResourceBar);
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);
8955
9178
  //#endregion
8956
- //#region src/components/axebow-summary/axebow-summary-step-header.ts
8957
- var AxebowSummaryStepHeader = class AxebowSummaryStepHeader extends LitElement {
9179
+ //#region src/components/axebow-resource-limits/axebow-resource-limits-panel.ts
9180
+ var AxebowResourceLimitsPanel = class AxebowResourceLimitsPanel extends LitElement {
8958
9181
  constructor(..._args) {
8959
9182
  super(..._args);
8960
- this.stepTitle = "";
8961
- this.valid = false;
8962
- this.collapsed = false;
8963
- this.canEdit = true;
8964
- this.isEditing = false;
8965
- this.editLabel = "Edit";
8966
- this.editingLabel = "Editing";
8967
- this.enabled = true;
9183
+ this.storageFields = [];
8968
9184
  }
8969
9185
  static {
8970
9186
  this.styles = [unsafeCSS(tailwind_default), axebowTheme];
8971
9187
  }
8972
- render() {
8973
- return html`
8974
- <div class="flex gap-2 items-center justify-between">
8975
- <div class="flex items-center gap-0.5 min-w-0">
8976
- ${this.valid && this.enabled ? html`
8977
- <sl-icon-button
8978
- name="${this.collapsed ? "arrows-expand" : "arrows-collapse"}"
8979
- class="text-(--axebow-tertiary) shrink-0"
8980
- @click=${this._handleToggle}
8981
- ></sl-icon-button>
8982
- ` : ""}
8983
- <h5
8984
- class="my-2 min-w-0 flex-1 truncate text-base uppercase ${this.enabled ? "font-semibold" : "font-normal text-(--axebow-gray)"}"
8985
- >
8986
- STEP ${this.stepNumber}: ${this.stepTitle}
8987
- </h5>
8988
- ${this.valid && this.enabled ? html`<axebow-icon
8989
- class="shrink-0"
8990
- iconName="check_circle"
8991
- iconColor="var(--axebow-success)"
8992
- size="md"
8993
- ></axebow-icon>` : ""}
8994
- </div>
8995
- <div class="flex items-center gap-2 shrink-0">
8996
- ${this.isEditing ? html`<span class="w-11.25 h-4.25 shrink-0 text-base text-(--axebow-gray)">${this.editingLabel}</span>` : ""}
8997
- ${this.enabled && this.valid && this.canEdit ? html`
8998
- <div
8999
- class="w-4.5 h-4.5 shrink-0 flex items-center justify-center ${this.isEditing ? "opacity-50" : "cursor-pointer"}"
9000
- title="${this.isEditing ? this.editingLabel : this.editLabel}"
9001
- @click=${this.isEditing ? void 0 : this._handleEdit}
9002
- >
9003
- <axebow-icon iconName="edit_square" iconColor="var(--axebow-tertiary)" size="md"></axebow-icon>
9004
- </div>
9005
- ` : ""}
9006
- </div>
9007
- </div>
9008
- `;
9009
- }
9010
- _handleToggle() {
9011
- this.dispatchEvent(new CustomEvent("toggle", {
9012
- bubbles: true,
9013
- composed: true
9014
- }));
9015
- }
9016
- _handleEdit() {
9017
- this.dispatchEvent(new CustomEvent("edit", {
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
+ },
9018
9198
  bubbles: true,
9019
9199
  composed: true
9020
9200
  }));
9021
9201
  }
9022
- };
9023
- __decorate([property({ type: Number })], AxebowSummaryStepHeader.prototype, "stepNumber", void 0);
9024
- __decorate([property({ type: String })], AxebowSummaryStepHeader.prototype, "stepTitle", void 0);
9025
- __decorate([property({ type: Boolean })], AxebowSummaryStepHeader.prototype, "valid", void 0);
9026
- __decorate([property({ type: Boolean })], AxebowSummaryStepHeader.prototype, "collapsed", void 0);
9027
- __decorate([property({ type: Boolean })], AxebowSummaryStepHeader.prototype, "canEdit", void 0);
9028
- __decorate([property({ type: Boolean })], AxebowSummaryStepHeader.prototype, "isEditing", void 0);
9029
- __decorate([property({ type: String })], AxebowSummaryStepHeader.prototype, "editLabel", void 0);
9030
- __decorate([property({ type: String })], AxebowSummaryStepHeader.prototype, "editingLabel", void 0);
9031
- __decorate([property({ type: Boolean })], AxebowSummaryStepHeader.prototype, "enabled", void 0);
9032
- AxebowSummaryStepHeader = __decorate([customElement("axebow-summary-step-header")], AxebowSummaryStepHeader);
9033
- //#endregion
9034
- //#region src/components/axebow-summary/axebow-summary-step.ts
9035
- var AxebowSummaryStep = class AxebowSummaryStep extends LitElement {
9036
- constructor(..._args) {
9037
- super(..._args);
9038
- this.stepTitle = "";
9039
- this.valid = false;
9040
- this.collapsed = false;
9041
- this.visible = false;
9042
- this.isEditing = false;
9043
- this.enabled = true;
9044
- }
9045
- static {
9046
- this.styles = [unsafeCSS(tailwind_default), axebowTheme];
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
+ `;
9047
9216
  }
9048
9217
  render() {
9049
- if (!this.visible) return html``;
9218
+ if (!this.cpu || !this.memory) return html``;
9050
9219
  return html`
9051
- <axebow-summary-step-header
9052
- .stepNumber=${this.stepNumber}
9053
- .stepTitle=${this.stepTitle}
9054
- .valid=${this.valid}
9055
- .collapsed=${this.collapsed}
9056
- .isEditing=${this.isEditing}
9057
- .enabled=${this.enabled}
9058
- @toggle=${this._handleToggle}
9059
- @edit=${this._handleEdit}
9060
- ></axebow-summary-step-header>
9061
- ${!this.collapsed && this.enabled ? html`
9062
- <div class="step-summary-body mt-2">
9063
- <slot></slot>
9064
- </div>
9065
- ` : ""}
9066
- <sl-divider></sl-divider>
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>
9067
9226
  `;
9068
9227
  }
9069
- _handleToggle() {
9070
- if (!this.enabled) return;
9071
- this.dispatchEvent(new CustomEvent("toggle-step", {
9072
- detail: { step: this.stepNumber },
9073
- bubbles: true,
9074
- composed: true
9075
- }));
9076
- }
9077
- _handleEdit() {
9078
- this.dispatchEvent(new CustomEvent("edit-step", {
9079
- detail: { step: this.stepNumber },
9080
- bubbles: true,
9081
- composed: true
9082
- }));
9083
- }
9084
9228
  };
9085
- __decorate([property({ type: Number })], AxebowSummaryStep.prototype, "stepNumber", void 0);
9086
- __decorate([property({ type: String })], AxebowSummaryStep.prototype, "stepTitle", void 0);
9087
- __decorate([property({ type: Boolean })], AxebowSummaryStep.prototype, "valid", void 0);
9088
- __decorate([property({ type: Boolean })], AxebowSummaryStep.prototype, "collapsed", void 0);
9089
- __decorate([property({ type: Boolean })], AxebowSummaryStep.prototype, "visible", void 0);
9090
- __decorate([property({ type: Boolean })], AxebowSummaryStep.prototype, "isEditing", void 0);
9091
- __decorate([property({ type: Boolean })], AxebowSummaryStep.prototype, "enabled", void 0);
9092
- AxebowSummaryStep = __decorate([customElement("axebow-summary-step")], AxebowSummaryStep);
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);
9093
9233
  //#endregion
9094
- //#region src/components/axebow-summary/axebow-summary-card.ts
9095
- var AxebowSummaryCard = class AxebowSummaryCard extends LitElement {
9234
+ //#region src/components/axebow-selector-slider/axebow-selector-slider.ts
9235
+ var AxebowSelectorSlider = class AxebowSelectorSlider extends LitElement {
9096
9236
  constructor(..._args) {
9097
9237
  super(..._args);
9098
- this.title = "Summary";
9099
- this.cardWidth = "24.125rem";
9100
- this.cardHeight = "";
9101
- this.isSummaryOpen = true;
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;
9102
9245
  }
9103
9246
  static {
9104
9247
  this.styles = [
@@ -9107,95 +9250,854 @@ var AxebowSummaryCard = class AxebowSummaryCard extends LitElement {
9107
9250
  css`
9108
9251
  :host {
9109
9252
  display: block;
9110
- height: 100%;
9111
- }
9112
- sl-card {
9113
- --border-color: transparent !important;
9114
- border: none !important;
9115
- }
9116
- sl-card::part(base) {
9117
9253
  width: 100%;
9118
- height: 100%;
9119
- }
9120
- sl-card::part(body) {
9121
- height: 100%;
9122
9254
  }
9123
9255
  `
9124
9256
  ];
9125
9257
  }
9126
- render() {
9127
- return html`
9128
- <div
9129
- class="w-full lg:w-(--card-width) lg:sticky static top-25 h-auto ${this.cardHeight ? "lg:min-h-(--card-height)" : "lg:min-h-[calc(100vh-6.25rem)]"} rounded-xl z-10 transition-all duration-300"
9130
- style="--card-width: ${this.cardWidth}; --card-height: ${this.cardHeight};"
9131
- >
9132
- <sl-card
9133
- class="w-full h-full shadow-none border-t border-l-0 border-r-0 border-b-0 rounded-none lg:shadow lg:border lg:rounded-xl"
9134
- >
9135
- <div class="h-full flex flex-col">
9136
- ${this._renderHeader()}
9137
- <sl-divider></sl-divider>
9138
- <div class="${this.isSummaryOpen ? "" : "hidden"} lg:block flex-1 mt-4">
9139
- <slot></slot>
9140
- </div>
9141
- </div>
9142
- </sl-card>
9143
- </div>
9144
- `;
9258
+ get value() {
9259
+ return this.quantity;
9145
9260
  }
9146
- _renderHeader() {
9147
- return html`
9148
- <div class="flex items-center justify-between lg:cursor-default cursor-pointer">
9149
- <div class="flex-1 flex items-center justify-between gap-2" @click="${this._toggleMobileSummary}">
9150
- <div class="flex items-center gap-2">
9151
- <h4 class="text-xl font-semibold text-(--axebow-primary)">${this.title}</h4>
9152
- <axebow-icon
9153
- class="lg:hidden"
9154
- iconName="${this.isSummaryOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"}"
9155
- ></axebow-icon>
9156
- </div>
9157
- </div>
9158
- <div class="flex items-center gap-2">
9159
- <slot name="header-actions"></slot>
9160
- </div>
9161
- </div>
9162
- `;
9261
+ set value(val) {
9262
+ this.quantity = val;
9163
9263
  }
9164
- _toggleMobileSummary() {
9165
- if (window.innerWidth < 1024) this.isSummaryOpen = !this.isSummaryOpen;
9264
+ get _minVal() {
9265
+ if (typeof this.min === "number") return this.min;
9266
+ const n = Number(this.minTag);
9267
+ return isNaN(n) ? 0 : n;
9166
9268
  }
9167
- scrollToBottom() {
9168
- (this.shadowRoot?.querySelectorAll(".overflow-y-auto"))?.forEach((container) => {
9169
- container.scrollTo({
9170
- top: container.scrollHeight,
9171
- behavior: "smooth"
9172
- });
9173
- });
9269
+ get _maxVal() {
9270
+ if (typeof this.max === "number") return this.max;
9271
+ const n = Number(this.maxTag);
9272
+ return isNaN(n) ? 100 : n;
9174
9273
  }
9175
- };
9176
- __decorate([property({ type: String })], AxebowSummaryCard.prototype, "title", void 0);
9177
- __decorate([property({ type: String })], AxebowSummaryCard.prototype, "cardWidth", void 0);
9178
- __decorate([property({ type: String })], AxebowSummaryCard.prototype, "cardHeight", void 0);
9179
- __decorate([state()], AxebowSummaryCard.prototype, "isSummaryOpen", void 0);
9180
- AxebowSummaryCard = __decorate([customElement("axebow-summary-card")], AxebowSummaryCard);
9181
- //#endregion
9182
- //#region src/components/axebow-summary/axebow-summary-limits.ts
9183
- var AxebowSummaryLimits = class AxebowSummaryLimits extends LitElement {
9184
- constructor(..._args) {
9185
- super(..._args);
9186
- this.supportedStorage = [];
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;
9187
9284
  }
9188
- static {
9189
- this.styles = [
9190
- unsafeCSS(tailwind_default),
9191
- axebowTheme,
9192
- css`
9193
- :host {
9194
- display: block;
9195
- width: 100%;
9196
- }
9197
- `
9198
- ];
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;
9501
+ if (!info) return "";
9502
+ return html`
9503
+ <div class="flex flex-col gap-2">
9504
+ <axebow-summary-key-value
9505
+ label="${info.subscriptionPlan.label}"
9506
+ value="${info.subscriptionPlan.value}"
9507
+ ></axebow-summary-key-value>
9508
+ <axebow-summary-key-value label="${info.tenant.label}" value="${info.tenant.value}"></axebow-summary-key-value
9509
+ ><axebow-summary-key-value
9510
+ label="${info.account.label}"
9511
+ value="${info.account.value}"
9512
+ ></axebow-summary-key-value>
9513
+ <div class="flex gap-4 items-center mb-1">
9514
+ <p class="text-base text-(--axebow-black)">${info.cloudProviderLabel}</p>
9515
+ ${info.cloudProviderLogoSrc ? html`<img src="${info.cloudProviderLogoSrc}" class="h-6" alt="${info.cloudProviderLogoAlt ?? ""}" />` : ""}
9516
+ </div>
9517
+ <axebow-summary-key-value
9518
+ label="${info.environment.label}"
9519
+ value="${info.environment.value}"
9520
+ ></axebow-summary-key-value>
9521
+ </div>
9522
+ `;
9523
+ }
9524
+ _renderResourceLimits() {
9525
+ const limits = this.resourceLimits;
9526
+ if (!limits) return "";
9527
+ return html`
9528
+ <div class="flex flex-col gap-2 flex-wrap">
9529
+ <p class="text-base text-(--axebow-black)">${limits.limitsAvailableLabel}</p>
9530
+ <div>
9531
+ <axebow-resource-bar
9532
+ icon="${limits.cpu.icon}"
9533
+ label="${limits.cpu.label}"
9534
+ .current=${limits.cpu.current}
9535
+ .limit=${limits.cpu.limit}
9536
+ .percentage=${limits.cpu.percentage}
9537
+ ></axebow-resource-bar>
9538
+ <axebow-resource-bar
9539
+ icon="${limits.memory.icon}"
9540
+ label="${limits.memory.label}"
9541
+ .current=${limits.memory.current}
9542
+ .limit=${limits.memory.limit}
9543
+ .percentage=${limits.memory.percentage}
9544
+ rotate="${limits.memory.rotate ?? "0"}"
9545
+ ></axebow-resource-bar>
9546
+ </div>
9547
+ </div>
9548
+ `;
9549
+ }
9550
+ /** label:value pair with the shared black-name/gray-value convention. */
9551
+ _field(label, value, hasError = false) {
9552
+ return html`
9553
+ <p class="text-base">
9554
+ <span class="text-(--axebow-black)">${label}</span>
9555
+ <strong class="${hasError ? "text-(--axebow-error)" : "text-(--axebow-gray)"}">${value}</strong>
9556
+ </p>
9557
+ `;
9558
+ }
9559
+ _renderIdentificationStep() {
9560
+ const step = this.identification;
9561
+ if (!step?.visible) return "";
9562
+ return html`
9563
+ <axebow-summary-step
9564
+ .stepNumber=${step.stepNumber}
9565
+ stepTitle="${step.stepTitle}"
9566
+ .valid=${step.valid}
9567
+ .collapsed=${step.collapsed}
9568
+ .visible=${true}
9569
+ .isEditing=${step.isEditing}
9570
+ .enabled=${step.enabled}
9571
+ >
9572
+ <div class="space-y-1">
9573
+ ${step.imageName ? this._field(step.imageNameLabel, step.imageName) : ""}
9574
+ ${step.serviceName ? this._field(step.serviceNameLabel, step.serviceName) : ""}
9575
+ ${step.project ? this._field(step.projectLabel, step.project) : ""}
9576
+ ${step.registry ? this._renderRegistrySummary(step.registry) : ""}
9577
+ ${step.entrypoint ? html`<div class="border-t border-dashed border-gray-300 pt-2 flex items-center gap-1 min-w-0 text-base">
9578
+ <span class="shrink-0 text-(--axebow-black)">${step.entrypointLabel}</span>
9579
+ <axebow-tooltip content="${step.entrypoint}">
9580
+ <strong class="text-(--axebow-gray) block truncate max-w-36">${step.entrypoint}</strong>
9581
+ </axebow-tooltip>
9582
+ </div>` : ""}
9583
+ ${step.cmd ? html`<div class="flex items-center gap-1 min-w-0 text-base">
9584
+ <span class="shrink-0 text-(--axebow-black)">${step.commandLabel}</span>
9585
+ <axebow-tooltip content="${step.cmd}">
9586
+ <strong class="text-(--axebow-gray) block truncate max-w-36">${step.cmd}</strong>
9587
+ </axebow-tooltip>
9588
+ </div>` : ""}
9589
+ </div>
9590
+ </axebow-summary-step>
9591
+ `;
9592
+ }
9593
+ _renderRegistrySummary(registry) {
9594
+ return html`
9595
+ <div class="flex items-center gap-2 min-w-0 text-base">
9596
+ <p class="shrink-0 text-(--axebow-black)">${registry.containerRegistryLabel}</p>
9597
+ ${!registry.logoSrc ? html`<axebow-tooltip content="${registry.value}">
9598
+ <strong class="text-(--axebow-gray) block truncate w-full">${registry.value}</strong>
9599
+ </axebow-tooltip>` : html`<img src="${registry.logoSrc}" class="w-6 h-4 object-contain" />`}
9600
+ </div>
9601
+ ${registry.credentialSecret ? html` <div class="flex items-center gap-2 min-w-0 text-base">
9602
+ <p class="shrink-0 text-(--axebow-black)">${registry.registryCredentialsLabel}</p>
9603
+ <axebow-tooltip content="${registry.credentialSecret}">
9604
+ <strong class="text-(--axebow-gray) block truncate w-full">${registry.credentialSecret}</strong>
9605
+ </axebow-tooltip>
9606
+ </div>` : ""}
9607
+ `;
9608
+ }
9609
+ _renderResourcesStep() {
9610
+ const step = this.resources;
9611
+ if (!step?.visible) return "";
9612
+ return html`
9613
+ <axebow-summary-step
9614
+ .stepNumber=${step.stepNumber}
9615
+ stepTitle="${step.stepTitle}"
9616
+ .valid=${step.valid}
9617
+ .collapsed=${step.collapsed}
9618
+ .visible=${true}
9619
+ .isEditing=${step.isEditing}
9620
+ .enabled=${step.enabled}
9621
+ >
9622
+ <div class="pr-2 space-y-2">
9623
+ <div class="flex flex-row gap-x-4 flex-wrap">
9624
+ ${this._field(step.cpus.label, `${step.cpus.value} ${step.cpus.unit}`, step.cpus.hasError)}
9625
+ ${this._field(step.memory.label, `${step.memory.value} ${step.memory.unit}`, step.memory.hasError)}
9626
+ </div>
9627
+ </div>
9628
+ </axebow-summary-step>
9629
+ `;
9630
+ }
9631
+ _renderScalingStep() {
9632
+ const step = this.scaling;
9633
+ if (!step?.visible) return "";
9634
+ return html`
9635
+ <axebow-summary-step
9636
+ .stepNumber=${step.stepNumber}
9637
+ stepTitle="${step.stepTitle}"
9638
+ .valid=${step.valid}
9639
+ .collapsed=${step.collapsed}
9640
+ .visible=${true}
9641
+ .isEditing=${step.isEditing}
9642
+ .enabled=${step.enabled}
9643
+ >
9644
+ <div class="space-y-1">
9645
+ ${step.isAutoscaling && step.autoscaling ? this._renderAutoscalingInfo(step.autoscaling) : this._field(step.fixedReplicasLabel, step.fixedReplicas)}
9646
+ </div>
9647
+ </axebow-summary-step>
9648
+ `;
9649
+ }
9650
+ _renderAutoscalingInfo(config) {
9651
+ const hasScaleDownInfo = config.cpuDown || config.memoryDown;
9652
+ return html`
9653
+ <div class="border-t border-dashed border-gray-300 pt-3 space-y-1">
9654
+ <p class="font-semibold text-base lg:text-lg text-(--axebow-black) mb-2">${config.title}</p>
9655
+ ${config.minReplicas ? this._field(config.minLabel, config.minReplicas.value, config.minReplicas.hasError) : ""}
9656
+ ${config.maxReplicas ? this._field(config.maxLabel, config.maxReplicas.value) : ""}
9657
+ ${hasScaleDownInfo ? html`<sl-divider class="summary-dashed-divider"></sl-divider>` : ""}
9658
+ ${config.cpuDown ? this._field(config.scaleDownCpuLabel, `${config.cpuDown}%`) : ""}
9659
+ ${config.cpuDown && config.memoryDown ? html`<p class="text-base text-(--axebow-black)">${config.andLabel}</p>` : ""}
9660
+ ${config.memoryDown ? this._field(config.scaleDownMemoryLabel, `${config.memoryDown}%`) : ""}
9661
+ ${hasScaleDownInfo ? html`<sl-divider class="summary-dashed-divider"></sl-divider>` : ""}
9662
+ ${config.histeresys ? this._field(config.cooldownLabel, config.histeresys) : ""}
9663
+ </div>
9664
+ `;
9665
+ }
9666
+ _renderChannelsStep() {
9667
+ const step = this.channels;
9668
+ if (!step?.visible) return "";
9669
+ const hasAny = step.serverChannels || step.clientChannels || step.duplexChannels;
9670
+ return html`
9671
+ <axebow-summary-step
9672
+ .stepNumber=${step.stepNumber}
9673
+ stepTitle="${step.stepTitle}"
9674
+ .valid=${step.valid}
9675
+ .collapsed=${step.collapsed}
9676
+ .visible=${true}
9677
+ .isEditing=${step.isEditing}
9678
+ .enabled=${step.enabled}
9679
+ >
9680
+ <div class="space-y-2 text-base">
9681
+ ${hasAny ? html`
9682
+ ${step.serverChannels ? this._renderChannelGroup(step.serverChannels, step.linkedToLabel) : ""}
9683
+ ${step.clientChannels ? html`
9684
+ ${step.serverChannels ? html`<div class="border-t border-dashed border-gray-300"></div>` : ""}
9685
+ ${this._renderChannelGroup(step.clientChannels, step.linkedToLabel)}
9686
+ ` : ""}
9687
+ ${step.duplexChannels ? html`
9688
+ ${step.serverChannels || step.clientChannels ? html`<div class="border-t border-dashed border-gray-300"></div>` : ""}
9689
+ ${this._renderChannelGroup(step.duplexChannels, step.linkedToLabel)}
9690
+ ` : ""}
9691
+ ` : html`<p class="text-gray-500 italic">${step.noChannelsLabel}</p>`}
9692
+ </div>
9693
+ </axebow-summary-step>
9694
+ `;
9695
+ }
9696
+ _renderChannelGroup(group, linkedToLabel) {
9697
+ const hasAnyLink = group.channels.some((ch) => ch.linked.length > 0);
9698
+ const totalLinked = group.channels.reduce((acc, ch) => acc + ch.linked.length, 0);
9699
+ return html`
9700
+ <div class="grid gap-x-4 gap-y-1 items-center" style="grid-template-columns: 1fr ${hasAnyLink ? "1fr" : ""}">
9701
+ <span class="font-medium text-(--axebow-black)">${group.label} (${group.channels.length}):</span>
9702
+ ${hasAnyLink ? html`<span class="font-medium text-(--axebow-black)">${linkedToLabel} (${totalLinked}):</span>` : ""}
9703
+ ${group.channels.map((ch) => html`
9704
+ <div class="flex items-center min-w-0">
9705
+ <strong class="text-(--axebow-gray) flex items-center gap-1 min-w-0 truncate">
9706
+ <span class="truncate">${ch.name}${ch.port ? `:${ch.port}` : ""}</span>
9707
+ ${ch.isPublic ? html`<axebow-icon
9708
+ class="shrink-0"
9709
+ iconName="captive_portal"
9710
+ iconColor="var(--axebow-gray)"
9711
+ size="md"
9712
+ title="Gateway"
9713
+ ></axebow-icon>` : ""}
9714
+ </strong>
9715
+ </div>
9716
+ ${hasAnyLink ? html`<span class="text-(--axebow-gray) font-semibold truncate">${ch.linked.join(", ") || "—"}</span>` : ""}
9717
+ `)}
9718
+ </div>
9719
+ `;
9720
+ }
9721
+ _renderNameValueGrid(items, nameLabel, valueLabel) {
9722
+ return html`
9723
+ <div class="grid gap-x-6 gap-y-1 text-base" style="grid-template-columns: 1fr auto 1fr">
9724
+ <span class="text-(--axebow-black)">${nameLabel}:</span>
9725
+ <span></span>
9726
+ <span class="text-(--axebow-black)">${valueLabel}:</span>
9727
+ ${items.map((item) => html`
9728
+ <span class="truncate font-semibold text-(--axebow-gray)">${item.name}</span>
9729
+ <span class="font-semibold text-(--axebow-gray)">=</span>
9730
+ <span class="font-semibold truncate text-(--axebow-gray)">${item.value}</span>
9731
+ `)}
9732
+ </div>
9733
+ `;
9734
+ }
9735
+ _renderConfigurationStep() {
9736
+ const step = this.configuration;
9737
+ if (!step?.visible) return "";
9738
+ const pathItems = step.items.filter((item) => !!item.path);
9739
+ const plainItems = step.items.filter((item) => !item.path);
9740
+ return html`
9741
+ <axebow-summary-step
9742
+ .stepNumber=${step.stepNumber}
9743
+ stepTitle="${step.stepTitle}"
9744
+ .valid=${step.valid}
9745
+ .collapsed=${step.collapsed}
9746
+ .visible=${true}
9747
+ .isEditing=${step.isEditing}
9748
+ .enabled=${step.enabled}
9749
+ >
9750
+ <div class="ml-4">
9751
+ ${step.items.length ? html`
9752
+ ${plainItems.length ? this._renderNameValueGrid(plainItems, step.variableNameLabel, step.variableValueLabel) : ""}
9753
+ ${pathItems.length && plainItems.length ? html`<sl-divider class="summary-title-divider"></sl-divider>` : ""}
9754
+ ${pathItems.length ? this._renderNameValueGrid(pathItems.map((item) => ({
9755
+ name: item.name,
9756
+ value: item.path
9757
+ })), step.pathNameLabel, step.pathValueLabel) : ""}
9758
+ ` : html`<p class="text-base text-gray-500 italic">${step.noConfigVarsLabel}</p>`}
9759
+ </div>
9760
+ </axebow-summary-step>
9761
+ `;
9762
+ }
9763
+ _handleDownloadBundle() {
9764
+ this.dispatchEvent(new CustomEvent("download-bundle", {
9765
+ bubbles: true,
9766
+ composed: true
9767
+ }));
9768
+ }
9769
+ };
9770
+ __decorate([property({ type: String })], AxebowDeploySummary.prototype, "summaryTitle", void 0);
9771
+ __decorate([property({ type: Boolean })], AxebowDeploySummary.prototype, "showDownloadButton", void 0);
9772
+ __decorate([property({ type: String })], AxebowDeploySummary.prototype, "downloadLabel", void 0);
9773
+ __decorate([property({ attribute: false })], AxebowDeploySummary.prototype, "deploymentInfo", void 0);
9774
+ __decorate([property({ attribute: false })], AxebowDeploySummary.prototype, "resourceLimits", void 0);
9775
+ __decorate([property({ attribute: false })], AxebowDeploySummary.prototype, "identification", void 0);
9776
+ __decorate([property({ attribute: false })], AxebowDeploySummary.prototype, "resources", void 0);
9777
+ __decorate([property({ attribute: false })], AxebowDeploySummary.prototype, "scaling", void 0);
9778
+ __decorate([property({ attribute: false })], AxebowDeploySummary.prototype, "channels", void 0);
9779
+ __decorate([property({ attribute: false })], AxebowDeploySummary.prototype, "configuration", void 0);
9780
+ __decorate([property({ type: Number })], AxebowDeploySummary.prototype, "currentStep", void 0);
9781
+ AxebowDeploySummary = __decorate([customElement("axebow-deploy-summary")], AxebowDeploySummary);
9782
+ //#endregion
9783
+ //#region src/components/axebow-summary/axebow-summary-key-value.ts
9784
+ var AxebowSummaryKeyValue = class AxebowSummaryKeyValue extends LitElement {
9785
+ static {
9786
+ this.styles = [
9787
+ unsafeCSS(tailwind_default),
9788
+ axebowTheme,
9789
+ css`
9790
+ :host {
9791
+ display: block;
9792
+ margin-bottom: 0.25rem;
9793
+ }
9794
+ `
9795
+ ];
9796
+ }
9797
+ render() {
9798
+ return html`
9799
+ <p class="text-base">
9800
+ <span class="text-(--axebow-black)">${this.label}:</span>
9801
+ <strong class="text-(--axebow-gray)">${this.value}</strong>
9802
+ </p>
9803
+ `;
9804
+ }
9805
+ };
9806
+ __decorate([property({ type: String })], AxebowSummaryKeyValue.prototype, "label", void 0);
9807
+ __decorate([property({ type: String })], AxebowSummaryKeyValue.prototype, "value", void 0);
9808
+ AxebowSummaryKeyValue = __decorate([customElement("axebow-summary-key-value")], AxebowSummaryKeyValue);
9809
+ //#endregion
9810
+ //#region src/components/axebow-summary/axebow-resource-bar.ts
9811
+ var AxebowResourceBar = class AxebowResourceBar extends LitElement {
9812
+ constructor(..._args) {
9813
+ super(..._args);
9814
+ this.icon = "";
9815
+ this.label = "";
9816
+ this.current = 0;
9817
+ this.limit = 0;
9818
+ this.percentage = 0;
9819
+ this.rotate = "0";
9820
+ }
9821
+ static {
9822
+ this.styles = [unsafeCSS(tailwind_default), axebowTheme];
9823
+ }
9824
+ render() {
9825
+ return html`
9826
+ <div class="flex justify-between items-center gap-2 flex-wrap">
9827
+ <div class="flex items-center gap-1">
9828
+ <axebow-icon
9829
+ iconName="${this.icon}"
9830
+ iconColor="var(--axebow-strong-gray)"
9831
+ size="xl"
9832
+ rotate="${Number(this.rotate)}"
9833
+ ></axebow-icon>
9834
+ <p class="text-base font-bold text-(--axebow-black)">${this.label}</p>
9835
+ </div>
9836
+ <div class="flex gap-1 flex-1 items-center max-w-43 min-w-20 justify-end">
9837
+ <p class="text-base text-(--axebow-gray)">${this.current.toFixed(2)}</p>
9838
+ <div class="relative rounded-lg h-2 flex-1 max-w-38 bg-gray-200 overflow-hidden">
9839
+ <div
9840
+ class="absolute h-full ${this.percentage > 100 ? "bg-(--axebow-error)" : this.percentage === 100 ? "bg-(--axebow-warning)" : "bg-(--axebow-gray)"}"
9841
+ style="width: ${this.percentage}%;"
9842
+ ></div>
9843
+ </div>
9844
+ <p class="text-base font-bold text-(--axebow-gray)">${this.limit ?? "-"}</p>
9845
+ </div>
9846
+ </div>
9847
+ `;
9848
+ }
9849
+ };
9850
+ __decorate([property({ type: String })], AxebowResourceBar.prototype, "icon", void 0);
9851
+ __decorate([property({ type: String })], AxebowResourceBar.prototype, "label", void 0);
9852
+ __decorate([property({ type: Number })], AxebowResourceBar.prototype, "current", void 0);
9853
+ __decorate([property({ type: Number })], AxebowResourceBar.prototype, "limit", void 0);
9854
+ __decorate([property({ type: Number })], AxebowResourceBar.prototype, "percentage", void 0);
9855
+ __decorate([property({ type: String })], AxebowResourceBar.prototype, "rotate", void 0);
9856
+ AxebowResourceBar = __decorate([customElement("axebow-resource-bar")], AxebowResourceBar);
9857
+ //#endregion
9858
+ //#region src/components/axebow-summary/axebow-summary-step-header.ts
9859
+ var AxebowSummaryStepHeader = class AxebowSummaryStepHeader extends LitElement {
9860
+ constructor(..._args) {
9861
+ super(..._args);
9862
+ this.stepTitle = "";
9863
+ this.valid = false;
9864
+ this.collapsed = false;
9865
+ this.canEdit = true;
9866
+ this.isEditing = false;
9867
+ this.editLabel = "Edit";
9868
+ this.editingLabel = "Editing";
9869
+ this.enabled = true;
9870
+ }
9871
+ static {
9872
+ this.styles = [unsafeCSS(tailwind_default), axebowTheme];
9873
+ }
9874
+ render() {
9875
+ return html`
9876
+ <div class="flex gap-2 items-center justify-between">
9877
+ <div class="flex items-center gap-0.5 min-w-0">
9878
+ ${this.valid && this.enabled ? html`
9879
+ <sl-icon-button
9880
+ name="${this.collapsed ? "arrows-expand" : "arrows-collapse"}"
9881
+ class="text-(--axebow-tertiary) shrink-0"
9882
+ @click=${this._handleToggle}
9883
+ ></sl-icon-button>
9884
+ ` : ""}
9885
+ <h5
9886
+ class="my-2 min-w-0 flex-1 truncate text-base uppercase ${this.enabled ? "font-semibold" : "font-normal text-(--axebow-gray)"}"
9887
+ >
9888
+ STEP ${this.stepNumber}: ${this.stepTitle}
9889
+ </h5>
9890
+ ${this.valid && this.enabled ? html`<axebow-icon
9891
+ class="shrink-0"
9892
+ iconName="check_circle"
9893
+ iconColor="var(--axebow-success)"
9894
+ size="md"
9895
+ ></axebow-icon>` : ""}
9896
+ </div>
9897
+ <div class="flex items-center gap-2 shrink-0">
9898
+ ${this.isEditing ? html`<span class="w-11.25 h-4.25 shrink-0 text-base text-(--axebow-gray)">${this.editingLabel}</span>` : ""}
9899
+ ${this.enabled && this.valid && this.canEdit ? html`
9900
+ <div
9901
+ class="w-4.5 h-4.5 shrink-0 flex items-center justify-center ${this.isEditing ? "opacity-50" : "cursor-pointer"}"
9902
+ title="${this.isEditing ? this.editingLabel : this.editLabel}"
9903
+ @click=${this.isEditing ? void 0 : this._handleEdit}
9904
+ >
9905
+ <axebow-icon iconName="edit_square" iconColor="var(--axebow-tertiary)" size="md"></axebow-icon>
9906
+ </div>
9907
+ ` : ""}
9908
+ </div>
9909
+ </div>
9910
+ `;
9911
+ }
9912
+ _handleToggle() {
9913
+ this.dispatchEvent(new CustomEvent("toggle", {
9914
+ bubbles: true,
9915
+ composed: true
9916
+ }));
9917
+ }
9918
+ _handleEdit() {
9919
+ this.dispatchEvent(new CustomEvent("edit", {
9920
+ bubbles: true,
9921
+ composed: true
9922
+ }));
9923
+ }
9924
+ };
9925
+ __decorate([property({ type: Number })], AxebowSummaryStepHeader.prototype, "stepNumber", void 0);
9926
+ __decorate([property({ type: String })], AxebowSummaryStepHeader.prototype, "stepTitle", void 0);
9927
+ __decorate([property({ type: Boolean })], AxebowSummaryStepHeader.prototype, "valid", void 0);
9928
+ __decorate([property({ type: Boolean })], AxebowSummaryStepHeader.prototype, "collapsed", void 0);
9929
+ __decorate([property({ type: Boolean })], AxebowSummaryStepHeader.prototype, "canEdit", void 0);
9930
+ __decorate([property({ type: Boolean })], AxebowSummaryStepHeader.prototype, "isEditing", void 0);
9931
+ __decorate([property({ type: String })], AxebowSummaryStepHeader.prototype, "editLabel", void 0);
9932
+ __decorate([property({ type: String })], AxebowSummaryStepHeader.prototype, "editingLabel", void 0);
9933
+ __decorate([property({ type: Boolean })], AxebowSummaryStepHeader.prototype, "enabled", void 0);
9934
+ AxebowSummaryStepHeader = __decorate([customElement("axebow-summary-step-header")], AxebowSummaryStepHeader);
9935
+ //#endregion
9936
+ //#region src/components/axebow-summary/axebow-summary-step.ts
9937
+ var AxebowSummaryStep = class AxebowSummaryStep extends LitElement {
9938
+ constructor(..._args) {
9939
+ super(..._args);
9940
+ this.stepTitle = "";
9941
+ this.valid = false;
9942
+ this.collapsed = false;
9943
+ this.visible = false;
9944
+ this.isEditing = false;
9945
+ this.enabled = true;
9946
+ }
9947
+ static {
9948
+ this.styles = [unsafeCSS(tailwind_default), axebowTheme];
9949
+ }
9950
+ render() {
9951
+ if (!this.visible) return html``;
9952
+ return html`
9953
+ <axebow-summary-step-header
9954
+ .stepNumber=${this.stepNumber}
9955
+ .stepTitle=${this.stepTitle}
9956
+ .valid=${this.valid}
9957
+ .collapsed=${this.collapsed}
9958
+ .isEditing=${this.isEditing}
9959
+ .enabled=${this.enabled}
9960
+ @toggle=${this._handleToggle}
9961
+ @edit=${this._handleEdit}
9962
+ ></axebow-summary-step-header>
9963
+ ${!this.collapsed && this.enabled ? html`
9964
+ <div class="step-summary-body mt-2">
9965
+ <slot></slot>
9966
+ </div>
9967
+ ` : ""}
9968
+ <sl-divider></sl-divider>
9969
+ `;
9970
+ }
9971
+ _handleToggle() {
9972
+ if (!this.enabled) return;
9973
+ this.dispatchEvent(new CustomEvent("toggle-step", {
9974
+ detail: { step: this.stepNumber },
9975
+ bubbles: true,
9976
+ composed: true
9977
+ }));
9978
+ }
9979
+ _handleEdit() {
9980
+ this.dispatchEvent(new CustomEvent("edit-step", {
9981
+ detail: { step: this.stepNumber },
9982
+ bubbles: true,
9983
+ composed: true
9984
+ }));
9985
+ }
9986
+ };
9987
+ __decorate([property({ type: Number })], AxebowSummaryStep.prototype, "stepNumber", void 0);
9988
+ __decorate([property({ type: String })], AxebowSummaryStep.prototype, "stepTitle", void 0);
9989
+ __decorate([property({ type: Boolean })], AxebowSummaryStep.prototype, "valid", void 0);
9990
+ __decorate([property({ type: Boolean })], AxebowSummaryStep.prototype, "collapsed", void 0);
9991
+ __decorate([property({ type: Boolean })], AxebowSummaryStep.prototype, "visible", void 0);
9992
+ __decorate([property({ type: Boolean })], AxebowSummaryStep.prototype, "isEditing", void 0);
9993
+ __decorate([property({ type: Boolean })], AxebowSummaryStep.prototype, "enabled", void 0);
9994
+ AxebowSummaryStep = __decorate([customElement("axebow-summary-step")], AxebowSummaryStep);
9995
+ //#endregion
9996
+ //#region src/components/axebow-summary/axebow-summary-card.ts
9997
+ var AxebowSummaryCard = class AxebowSummaryCard extends LitElement {
9998
+ constructor(..._args) {
9999
+ super(..._args);
10000
+ this.title = "Summary";
10001
+ this.cardWidth = "24.125rem";
10002
+ this.cardHeight = "";
10003
+ this.isSummaryOpen = true;
10004
+ }
10005
+ static {
10006
+ this.styles = [
10007
+ unsafeCSS(tailwind_default),
10008
+ axebowTheme,
10009
+ css`
10010
+ :host {
10011
+ display: block;
10012
+ height: 100%;
10013
+ }
10014
+ sl-card {
10015
+ --border-color: transparent !important;
10016
+ border: none !important;
10017
+ }
10018
+ sl-card::part(base) {
10019
+ width: 100%;
10020
+ height: 100%;
10021
+ }
10022
+ sl-card::part(body) {
10023
+ height: 100%;
10024
+ }
10025
+ `
10026
+ ];
10027
+ }
10028
+ render() {
10029
+ return html`
10030
+ <div
10031
+ class="w-full lg:w-(--card-width) lg:sticky static top-25 h-auto ${this.cardHeight ? "lg:min-h-(--card-height)" : "lg:min-h-[calc(100vh-6.25rem)]"} rounded-xl z-10 transition-all duration-300"
10032
+ style="--card-width: ${this.cardWidth}; --card-height: ${this.cardHeight};"
10033
+ >
10034
+ <sl-card
10035
+ class="w-full h-full shadow-none border-t border-l-0 border-r-0 border-b-0 rounded-none lg:shadow lg:border lg:rounded-xl"
10036
+ >
10037
+ <div class="h-full flex flex-col">
10038
+ ${this._renderHeader()}
10039
+ <sl-divider></sl-divider>
10040
+ <div class="${this.isSummaryOpen ? "" : "hidden"} lg:block flex-1 mt-4">
10041
+ <slot></slot>
10042
+ </div>
10043
+ </div>
10044
+ </sl-card>
10045
+ </div>
10046
+ `;
10047
+ }
10048
+ _renderHeader() {
10049
+ return html`
10050
+ <div class="flex items-center justify-between lg:cursor-default cursor-pointer">
10051
+ <div class="flex-1 flex items-center justify-between gap-2" @click="${this._toggleMobileSummary}">
10052
+ <div class="flex items-center gap-2">
10053
+ <h4 class="text-xl font-semibold text-(--axebow-primary)">${this.title}</h4>
10054
+ <axebow-icon
10055
+ class="lg:hidden"
10056
+ iconName="${this.isSummaryOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"}"
10057
+ ></axebow-icon>
10058
+ </div>
10059
+ </div>
10060
+ <div class="flex items-center gap-2">
10061
+ <slot name="header-actions"></slot>
10062
+ </div>
10063
+ </div>
10064
+ `;
10065
+ }
10066
+ _toggleMobileSummary() {
10067
+ if (window.innerWidth < 1024) this.isSummaryOpen = !this.isSummaryOpen;
10068
+ }
10069
+ scrollToBottom() {
10070
+ (this.shadowRoot?.querySelectorAll(".overflow-y-auto"))?.forEach((container) => {
10071
+ container.scrollTo({
10072
+ top: container.scrollHeight,
10073
+ behavior: "smooth"
10074
+ });
10075
+ });
10076
+ }
10077
+ };
10078
+ __decorate([property({ type: String })], AxebowSummaryCard.prototype, "title", void 0);
10079
+ __decorate([property({ type: String })], AxebowSummaryCard.prototype, "cardWidth", void 0);
10080
+ __decorate([property({ type: String })], AxebowSummaryCard.prototype, "cardHeight", void 0);
10081
+ __decorate([state()], AxebowSummaryCard.prototype, "isSummaryOpen", void 0);
10082
+ AxebowSummaryCard = __decorate([customElement("axebow-summary-card")], AxebowSummaryCard);
10083
+ //#endregion
10084
+ //#region src/components/axebow-summary/axebow-summary-limits.ts
10085
+ var AxebowSummaryLimits = class AxebowSummaryLimits extends LitElement {
10086
+ constructor(..._args) {
10087
+ super(..._args);
10088
+ this.supportedStorage = [];
10089
+ }
10090
+ static {
10091
+ this.styles = [
10092
+ unsafeCSS(tailwind_default),
10093
+ axebowTheme,
10094
+ css`
10095
+ :host {
10096
+ display: block;
10097
+ width: 100%;
10098
+ }
10099
+ `
10100
+ ];
9199
10101
  }
9200
10102
  renderSection(title, limitKey) {
9201
10103
  return html`
@@ -10010,275 +10912,1145 @@ var AxebowResourceBoxForm = class AxebowResourceBoxForm extends LitElement {
10010
10912
  `;
10011
10913
  }
10012
10914
  render() {
10013
- const isDeleting = this.deleting;
10014
- 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;
10015
11271
  return html`
10016
- <div
10017
- 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"
10018
- >
10019
- <!-- Top Status Header -->
10020
- <axebow-status
10021
- .statusText=${this.statusText}
10022
- .statusColor=${computedStatusColor}
10023
- ?showTrash=${this.showTrash}
10024
- ?deleting=${this.deleting}
10025
- @delete=${this._handleDelete}
10026
- ></axebow-status>
10027
-
10028
- <!-- Form Fields List -->
10029
- <div class="flex flex-col gap-2.5 w-full">
10030
- ${this.items && this.items.length > 0 ? this.items.map((item) => this._renderField(isDeleting ? {
10031
- ...item,
10032
- type: "disabled"
10033
- } : item)) : html`
10034
- <div
10035
- class="p-3 border border-dashed border-(--axebow-border-gray) rounded-lg text-center text-(--axebow-gray) text-xs"
10036
- >
10037
- No items configured.
10038
- </div>
10039
- `}
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>
10040
11297
  </div>
10041
- </div>
11298
+ <axebow-icon iconName="info" size="md" class="cursor-pointer" iconColor="${this.color}"></axebow-icon>
11299
+ </axebow-tooltip>
10042
11300
  `;
10043
11301
  }
10044
11302
  };
10045
- __decorate([property({ type: String })], AxebowResourceBoxForm.prototype, "statusText", void 0);
10046
- __decorate([property({ type: String })], AxebowResourceBoxForm.prototype, "statusColor", void 0);
10047
- __decorate([property({ type: Boolean })], AxebowResourceBoxForm.prototype, "showTrash", void 0);
10048
- __decorate([property({ type: Boolean })], AxebowResourceBoxForm.prototype, "deleting", void 0);
10049
- __decorate([property({ type: Array })], AxebowResourceBoxForm.prototype, "items", void 0);
10050
- __decorate([state()], AxebowResourceBoxForm.prototype, "_openMenuId", void 0);
10051
- 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);
10052
11310
  //#endregion
10053
- //#region src/components/axebow-manage-hyperlinks/axebow-manage-hyperlinks.ts
10054
- var AxebowManageHyperlinks = class AxebowManageHyperlinks extends LitElement {
11311
+ //#region src/components/axebow-instances-table/axebow-instances-table.ts
11312
+ var AxebowInstancesTable = class AxebowInstancesTable extends LitElement {
10055
11313
  constructor(..._args) {
10056
11314
  super(..._args);
10057
- this.text = "";
10058
- this.icon = "";
10059
- this.color = "var(--axebow-tertiary)";
10060
- this.iconColor = "";
10061
- 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();
10062
11326
  }
10063
11327
  static {
10064
- this.styles = [unsafeCSS(tailwind_default), css`
10065
- :host {
10066
- display: inline-block;
10067
- }
10068
- button:hover:not(:disabled) {
10069
- color: var(--axebow-gray) !important;
10070
- }
10071
- `];
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
+ ];
10072
11355
  }
10073
- _handleClick(e) {
10074
- if (this.disabled) {
10075
- e.preventDefault();
10076
- e.stopPropagation();
10077
- return;
10078
- }
10079
- 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 },
10080
11367
  bubbles: true,
10081
- composed: true,
10082
- detail: { text: this.text }
11368
+ composed: true
10083
11369
  }));
10084
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
+ }
10085
11474
  render() {
10086
- const buttonColor = this.color || "var(--axebow-tertiary)";
10087
- const iconColorProp = this.iconColor || "currentColor";
11475
+ if (!this.instances.length) return html`<p>${this.noInstancesLabel}</p>`;
10088
11476
  return html`
10089
- <button
10090
- type="button"
10091
- ?disabled=${this.disabled}
10092
- @click=${this._handleClick}
10093
- style="color: ${buttonColor};"
10094
- 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"
10095
- >
10096
- <span>${this.text}</span>
10097
- ${this.icon ? html`<axebow-icon iconName="${this.icon}" iconColor="${iconColorProp}"></axebow-icon>` : ""}
10098
- </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
+ `;
10099
11489
  }
10100
11490
  };
10101
- __decorate([property({ type: String })], AxebowManageHyperlinks.prototype, "text", void 0);
10102
- __decorate([property({ type: String })], AxebowManageHyperlinks.prototype, "icon", void 0);
10103
- __decorate([property({ type: String })], AxebowManageHyperlinks.prototype, "color", void 0);
10104
- __decorate([property({ type: String })], AxebowManageHyperlinks.prototype, "iconColor", void 0);
10105
- __decorate([property({ type: Boolean })], AxebowManageHyperlinks.prototype, "disabled", void 0);
10106
- 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);
10107
11504
  //#endregion
10108
- //#region src/components/axebow-box-section/axebow-box-section.ts
10109
- var AxebowBoxSection = class AxebowBoxSection extends LitElement {
11505
+ //#region src/components/axebow-tenants-table/axebow-tenants-table.ts
11506
+ var AxebowTenantsTable = class AxebowTenantsTable extends LitElement {
10110
11507
  constructor(..._args) {
10111
11508
  super(..._args);
10112
- this.title = "";
10113
- this.hyperlinks = [];
10114
- this.showHyperlink = false;
10115
- this.hyperlinkText = "";
10116
- this.hyperlinkIcon = "";
10117
- this.hyperlinkColor = "";
10118
- 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();
10119
11516
  }
10120
11517
  static {
10121
- this.styles = unsafeCSS(tailwind_default);
11518
+ this.styles = [unsafeCSS(tailwind_default), axebowTheme];
10122
11519
  }
10123
- _handleItemClick(item, index) {
10124
- if (item.onClick) item.onClick();
10125
- this.dispatchEvent(new CustomEvent("hyperlink-click", {
10126
- bubbles: true,
10127
- composed: true,
10128
- detail: {
10129
- item,
10130
- index,
10131
- text: item.text
10132
- }
10133
- }));
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
+ `];
10134
11611
  }
10135
11612
  render() {
10136
- const itemsToRender = this.hyperlinks.length > 0 ? this.hyperlinks : this.showHyperlink || Boolean(this.hyperlinkText) ? [{
10137
- text: this.hyperlinkText,
10138
- icon: this.hyperlinkIcon,
10139
- color: this.hyperlinkColor,
10140
- disabled: this.hyperlinkDisabled
10141
- }] : [];
10142
11613
  return html`
10143
- <div class="flex flex-col rounded-md p-5 gap-4 bg-white">
10144
- <div class="w-full flex justify-between items-center border-b border-solid border-[#DBDDE4] pb-3 gap-2">
10145
- <span class="font-semibold uppercase text-(--axebow-primary)">${this.title}</span>
10146
- <slot name="hyperlink">
10147
- ${itemsToRender.length > 0 ? html`
10148
- <div class="flex items-center gap-4">
10149
- ${itemsToRender.map((item, index) => html`
10150
- <axebow-manage-hyperlinks
10151
- text="${item.text}"
10152
- icon="${item.icon}"
10153
- color="${item.color ?? ""}"
10154
- ?disabled=${Boolean(item.disabled)}
10155
- @hyperlink-click=${() => this._handleItemClick(item, index)}
10156
- ></axebow-manage-hyperlinks>
10157
- `)}
10158
- </div>
10159
- ` : ""}
10160
- </slot>
10161
- </div>
10162
- <slot></slot>
10163
- </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
+ `;
10164
11618
  }
10165
11619
  };
10166
- __decorate([property({ type: String })], AxebowBoxSection.prototype, "title", void 0);
10167
- __decorate([property({ type: Array })], AxebowBoxSection.prototype, "hyperlinks", void 0);
10168
- __decorate([property({ type: Boolean })], AxebowBoxSection.prototype, "showHyperlink", void 0);
10169
- __decorate([property({ type: String })], AxebowBoxSection.prototype, "hyperlinkText", void 0);
10170
- __decorate([property({ type: String })], AxebowBoxSection.prototype, "hyperlinkIcon", void 0);
10171
- __decorate([property({ type: String })], AxebowBoxSection.prototype, "hyperlinkColor", void 0);
10172
- __decorate([property({ type: Boolean })], AxebowBoxSection.prototype, "hyperlinkDisabled", void 0);
10173
- AxebowBoxSection = __decorate([customElement("axebow-box-section")], AxebowBoxSection);
11620
+ AxebowExpandableCard = __decorate([customElement("axebow-expandable-card")], AxebowExpandableCard);
10174
11621
  //#endregion
10175
- //#region src/components/axebow-copy-box/axebow-copy-box.ts
10176
- var AxebowCopyBox = class AxebowCopyBox extends LitElement {
11622
+ //#region src/components/axebow-undeploy-card/axebow-undeploy-card.ts
11623
+ var AxebowUndeployCard = class AxebowUndeployCard extends LitElement {
10177
11624
  constructor(..._args) {
10178
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 = "";
10179
11636
  this.value = "";
10180
- this.copyValue = "";
10181
- this.iconName = "content_copy";
10182
- this.size = "lg";
10183
- this.disabled = false;
10184
- this._copied = false;
11637
+ this.buttonLabel = "";
11638
+ this.buttonDisabled = false;
11639
+ this.isSubmitting = false;
11640
+ this.loadingLabel = "";
10185
11641
  }
10186
11642
  static {
10187
- this.styles = unsafeCSS(tailwind_default);
11643
+ this.styles = [
11644
+ unsafeCSS(tailwind_default),
11645
+ axebowTheme,
11646
+ css`
11647
+ :host {
11648
+ display: block;
11649
+ }
11650
+ `
11651
+ ];
10188
11652
  }
10189
- async _handleCopy(e) {
10190
- if (this.disabled) {
10191
- e.preventDefault();
10192
- e.stopPropagation();
10193
- return;
10194
- }
10195
- let textToCopy = this.copyValue || this.value;
10196
- if (!textToCopy) {
10197
- const slot = this.shadowRoot?.querySelector("slot");
10198
- if (slot) textToCopy = slot.assignedNodes({ flatten: true }).map((n) => n.textContent ?? "").join("").trim();
10199
- if (!textToCopy) textToCopy = this.textContent?.trim() ?? "";
10200
- }
10201
- if (textToCopy) try {
10202
- await navigator.clipboard.writeText(textToCopy);
10203
- this._copied = true;
10204
- setTimeout(() => {
10205
- this._copied = false;
10206
- }, 2e3);
10207
- } catch (err) {
10208
- console.error("Failed to copy text:", err);
10209
- }
10210
- 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 },
10211
11657
  bubbles: true,
10212
- composed: true,
10213
- detail: { value: textToCopy }
11658
+ composed: true
11659
+ }));
11660
+ }
11661
+ _handleConfirm() {
11662
+ this.dispatchEvent(new CustomEvent("confirm", {
11663
+ bubbles: true,
11664
+ composed: true
10214
11665
  }));
10215
11666
  }
10216
11667
  render() {
10217
- const iconToShow = this._copied ? "check" : this.iconName;
10218
11668
  return html`
10219
- <div
10220
- @click=${this._handleCopy}
10221
- 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" : ""}"
10222
- title=${this._copied ? "Copied!" : "Copy"}
10223
- >
10224
- <axebow-icon iconName="${iconToShow}" iconColor="white" size="${this.size}"></axebow-icon>
10225
- <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>
10226
11674
  </div>
10227
- `;
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
+ `;
10228
11710
  }
10229
11711
  };
10230
- __decorate([property({ type: String })], AxebowCopyBox.prototype, "value", void 0);
10231
- __decorate([property({ type: String })], AxebowCopyBox.prototype, "copyValue", void 0);
10232
- __decorate([property({ type: String })], AxebowCopyBox.prototype, "iconName", void 0);
10233
- __decorate([property({ type: String })], AxebowCopyBox.prototype, "size", void 0);
10234
- __decorate([property({ type: Boolean })], AxebowCopyBox.prototype, "disabled", void 0);
10235
- __decorate([state()], AxebowCopyBox.prototype, "_copied", void 0);
10236
- 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);
10237
11728
  //#endregion
10238
- //#region src/components/axebow-tabs-submenu/axebow-tabs-submenu.ts
10239
- var AxebowTabsSubmenu = class AxebowTabsSubmenu extends LitElement {
11729
+ //#region src/components/axebow-observability-container/axebow-observability-container.ts
11730
+ var AxebowObservabilityContainer = class AxebowObservabilityContainer extends LitElement {
10240
11731
  constructor(..._args) {
10241
11732
  super(..._args);
10242
- this.tabs = [];
10243
- this.activeTab = 0;
10244
- this.disabled = false;
10245
- 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 = "";
10246
11759
  }
10247
11760
  static {
10248
- this.styles = unsafeCSS(tailwind_default);
10249
- }
10250
- _handleTabChange(e) {
10251
- this.activeTab = e.detail.index;
10252
- this.dispatchEvent(new CustomEvent("tab-change", {
10253
- bubbles: true,
10254
- composed: true,
10255
- detail: e.detail
10256
- }));
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
+ ];
10257
11793
  }
10258
11794
  render() {
10259
11795
  return html`
10260
- <axebow-tab-selector
10261
- variant="sections-tab"
10262
- .activeTab=${this.activeTab}
10263
- ?disabled=${this.disabled}
10264
- .stretch=${this.stretch}
10265
- @tab-change=${this._handleTabChange}
10266
- >
10267
- ${this.tabs.map((tab, i) => html`
10268
- <span slot="tab-label-${i}" ?disabled=${tab.disabled ?? false}>
10269
- ${tab.label}
10270
- </span>
10271
- `)}
10272
- </axebow-tab-selector>
10273
- `;
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
+ }));
10274
12024
  }
10275
12025
  };
10276
- __decorate([property({ type: Array })], AxebowTabsSubmenu.prototype, "tabs", void 0);
10277
- __decorate([property({ type: Number })], AxebowTabsSubmenu.prototype, "activeTab", void 0);
10278
- __decorate([property({ type: Boolean })], AxebowTabsSubmenu.prototype, "disabled", void 0);
10279
- __decorate([property({ type: Boolean })], AxebowTabsSubmenu.prototype, "stretch", void 0);
10280
- 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);
10281
12053
  //#endregion
10282
- 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 };
10283
12055
 
10284
12056
  //# sourceMappingURL=index.js.map