@kumori/aurora-wui-components 0.0.256 → 0.0.258-dev4015.0

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 (45) hide show
  1. package/dist/components/axebow-box-form/axebow-box-form.d.ts +30 -0
  2. package/dist/components/axebow-box-form/axebow-box-form.d.ts.map +1 -0
  3. package/dist/components/axebow-box-form/axebow-box-form.models.d.ts +24 -0
  4. package/dist/components/axebow-box-form/axebow-box-form.models.d.ts.map +1 -0
  5. package/dist/components/axebow-box-section/axebow-box-section.d.ts +22 -0
  6. package/dist/components/axebow-box-section/axebow-box-section.d.ts.map +1 -0
  7. package/dist/components/axebow-copy-box/axebow-copy-box.d.ts +13 -0
  8. package/dist/components/axebow-copy-box/axebow-copy-box.d.ts.map +1 -0
  9. package/dist/components/axebow-form-panel-field/axebow-form-panel-field.d.ts +39 -0
  10. package/dist/components/axebow-form-panel-field/axebow-form-panel-field.d.ts.map +1 -0
  11. package/dist/components/axebow-icon/axebow-icon.d.ts +2 -1
  12. package/dist/components/axebow-icon/axebow-icon.d.ts.map +1 -1
  13. package/dist/components/axebow-manage-hyperlinks/axebow-manage-hyperlinks.d.ts +12 -0
  14. package/dist/components/axebow-manage-hyperlinks/axebow-manage-hyperlinks.d.ts.map +1 -0
  15. package/dist/components/axebow-search/axebow-search.d.ts +1 -0
  16. package/dist/components/axebow-search/axebow-search.d.ts.map +1 -1
  17. package/dist/components/axebow-search-bar-filters/axebow-search-bar-filters.d.ts +37 -0
  18. package/dist/components/axebow-search-bar-filters/axebow-search-bar-filters.d.ts.map +1 -0
  19. package/dist/components/axebow-status/axebow-status.d.ts +11 -0
  20. package/dist/components/axebow-status/axebow-status.d.ts.map +1 -0
  21. package/dist/components/axebow-tab-selector/axebow-tab-selector.d.ts +4 -0
  22. package/dist/components/axebow-tab-selector/axebow-tab-selector.d.ts.map +1 -1
  23. package/dist/components/axebow-tabs-submenu/axebow-tabs-submenu.d.ts +21 -0
  24. package/dist/components/axebow-tabs-submenu/axebow-tabs-submenu.d.ts.map +1 -0
  25. package/dist/index.d.ts +9 -0
  26. package/dist/index.d.ts.map +1 -1
  27. package/dist/index.js +2345 -1247
  28. package/dist/index.js.map +1 -1
  29. package/dist/playground/schemas/axebow-box-section.schema.d.ts +8 -0
  30. package/dist/playground/schemas/axebow-box-section.schema.d.ts.map +1 -0
  31. package/dist/playground/schemas/axebow-copy-box.schema.d.ts +8 -0
  32. package/dist/playground/schemas/axebow-copy-box.schema.d.ts.map +1 -0
  33. package/dist/playground/schemas/axebow-form-panel-field.schema.d.ts +8 -0
  34. package/dist/playground/schemas/axebow-form-panel-field.schema.d.ts.map +1 -0
  35. package/dist/playground/schemas/axebow-manage-hyperlinks.schema.d.ts +8 -0
  36. package/dist/playground/schemas/axebow-manage-hyperlinks.schema.d.ts.map +1 -0
  37. package/dist/playground/schemas/axebow-resource-box-form.schema.d.ts +8 -0
  38. package/dist/playground/schemas/axebow-resource-box-form.schema.d.ts.map +1 -0
  39. package/dist/playground/schemas/axebow-status.schema.d.ts +8 -0
  40. package/dist/playground/schemas/axebow-status.schema.d.ts.map +1 -0
  41. package/dist/playground/schemas/axebow-tabs-submenu.schema.d.ts +8 -0
  42. package/dist/playground/schemas/axebow-tabs-submenu.schema.d.ts.map +1 -0
  43. package/dist/playground/schemas/types.d.ts +1 -1
  44. package/dist/playground/schemas/types.d.ts.map +1 -1
  45. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -2,6 +2,9 @@ import { LitElement, css, html, unsafeCSS } from "lit";
2
2
  import { customElement, property, query, state } from "lit/decorators.js";
3
3
  import "@shoelace-style/shoelace/dist/components/select/select.js";
4
4
  import "@shoelace-style/shoelace/dist/components/option/option.js";
5
+ import { ifDefined } from "lit/directives/if-defined.js";
6
+ import "@shoelace-style/shoelace/dist/components/button/button.js";
7
+ import "@shoelace-style/shoelace/dist/components/input/input.js";
5
8
  import "@shoelace-style/shoelace/dist/components/dropdown/dropdown.js";
6
9
  import "@shoelace-style/shoelace/dist/components/menu/menu.js";
7
10
  import "@shoelace-style/shoelace/dist/components/switch/switch.js";
@@ -9,9 +12,6 @@ import "@shoelace-style/shoelace/dist/components/tab-group/tab-group.js";
9
12
  import "@shoelace-style/shoelace/dist/components/tab/tab.js";
10
13
  import "@shoelace-style/shoelace/dist/components/tab-panel/tab-panel.js";
11
14
  import "@shoelace-style/shoelace/dist/components/divider/divider.js";
12
- import { ifDefined } from "lit/directives/if-defined.js";
13
- import "@shoelace-style/shoelace/dist/components/button/button.js";
14
- import "@shoelace-style/shoelace/dist/components/input/input.js";
15
15
  import { live } from "lit/directives/live.js";
16
16
  import "@shoelace-style/shoelace/dist/components/checkbox/checkbox.js";
17
17
  import "@shoelace-style/shoelace/dist/components/carousel/carousel.js";
@@ -124,7 +124,7 @@ var STATUS_COLORS = {
124
124
  };
125
125
  //#endregion
126
126
  //#region src/styles/tailwind.css?inline
127
- 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-18: 4.5rem;\n --spacing-30: 7.5rem;\n --spacing-38: 9.5rem;\n --spacing-43: 10.75rem;\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-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 .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-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-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-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-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-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-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-17 {\n width: calc(var(--spacing) * 17);\n }\n\n .w-18 {\n width: var(--spacing-18);\n }\n\n .w-18\\.5 {\n width: calc(var(--spacing) * 18.5);\n }\n\n .w-18\\.75 {\n width: calc(var(--spacing) * 18.75);\n }\n\n .w-20 {\n width: calc(var(--spacing) * 20);\n }\n\n .w-20\\.5 {\n width: calc(var(--spacing) * 20.5);\n }\n\n .w-21\\.5 {\n width: calc(var(--spacing) * 21.5);\n }\n\n .w-24\\.75 {\n width: calc(var(--spacing) * 24.75);\n }\n\n .w-25 {\n width: calc(var(--spacing) * 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-35 {\n width: calc(var(--spacing) * 35);\n }\n\n .w-36 {\n width: calc(var(--spacing) * 36);\n }\n\n .w-37 {\n width: calc(var(--spacing) * 37);\n }\n\n .w-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-63\\.5 {\n width: calc(var(--spacing) * 63.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-286 {\n width: calc(var(--spacing) * 286);\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-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-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-53\\.25 {\n min-width: calc(var(--spacing) * 53.25);\n }\n\n .min-w-55 {\n min-width: calc(var(--spacing) * 55);\n }\n\n .min-w-\\[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 .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-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-hidden {\n overflow-x: hidden;\n }\n\n .overflow-y-auto {\n overflow-y: auto;\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-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-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-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-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-\\[\\#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-\\[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-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-400 {\n background-color: var(--color-gray-400);\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-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 .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-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\\.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 .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-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-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_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 .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 .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-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";
127
+ 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-18: 4.5rem;\n --spacing-30: 7.5rem;\n --spacing-38: 9.5rem;\n --spacing-43: 10.75rem;\n --spacing-50: 12.5rem;\n --spacing-75: 18.75rem;\n --spacing-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 .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-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-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-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-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-17 {\n width: calc(var(--spacing) * 17);\n }\n\n .w-18 {\n width: var(--spacing-18);\n }\n\n .w-18\\.5 {\n width: calc(var(--spacing) * 18.5);\n }\n\n .w-18\\.75 {\n width: calc(var(--spacing) * 18.75);\n }\n\n .w-20 {\n width: calc(var(--spacing) * 20);\n }\n\n .w-20\\.5 {\n width: calc(var(--spacing) * 20.5);\n }\n\n .w-21\\.5 {\n width: calc(var(--spacing) * 21.5);\n }\n\n .w-24\\.75 {\n width: calc(var(--spacing) * 24.75);\n }\n\n .w-25 {\n width: calc(var(--spacing) * 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-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-37 {\n width: calc(var(--spacing) * 37);\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-63\\.5 {\n width: calc(var(--spacing) * 63.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-286 {\n width: calc(var(--spacing) * 286);\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-36 {\n min-width: calc(var(--spacing) * 36);\n }\n\n .min-w-44 {\n min-width: calc(var(--spacing) * 44);\n }\n\n .min-w-50 {\n min-width: var(--spacing-50);\n }\n\n .min-w-53\\.25 {\n min-width: calc(var(--spacing) * 53.25);\n }\n\n .min-w-55 {\n min-width: calc(var(--spacing) * 55);\n }\n\n .min-w-\\[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-hidden {\n overflow-x: hidden;\n }\n\n .overflow-y-auto {\n overflow-y: auto;\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-\\[\\#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-\\[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-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-400 {\n background-color: var(--color-gray-400);\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 .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-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 .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";
128
128
  //#endregion
129
129
  //#region \0@oxc-project+runtime@0.139.0/helpers/esm/decorate.js
130
130
  function __decorate(decorators, target, key, desc) {
@@ -144,9 +144,27 @@ var AxebowIcon = class AxebowIcon extends LitElement {
144
144
  this.filled = false;
145
145
  this.size = "medium";
146
146
  this.marginBottom = 0;
147
+ this.clickable = false;
147
148
  }
148
149
  static {
149
- this.styles = unsafeCSS(tailwind_default);
150
+ this.styles = [unsafeCSS(tailwind_default), css`
151
+ :host {
152
+ display: inline-flex;
153
+ align-items: center;
154
+ justify-content: center;
155
+ vertical-align: middle;
156
+ }
157
+ :host([clickable]),
158
+ span.is-clickable {
159
+ cursor: pointer;
160
+ transition: opacity 0.15s ease, filter 0.15s ease;
161
+ }
162
+ :host([clickable]):hover,
163
+ span.is-clickable:hover {
164
+ opacity: 0.6;
165
+ filter: grayscale(0.4);
166
+ }
167
+ `];
150
168
  }
151
169
  _getFontSize() {
152
170
  switch (this.size.replace(/^text-/, "")) {
@@ -175,7 +193,7 @@ var AxebowIcon = class AxebowIcon extends LitElement {
175
193
  const fontSize = this._getFontSize();
176
194
  return html`
177
195
  <span
178
- class="font-[Material_Symbols_Outlined] cursor-default inline-block align-middle whitespace-nowrap ${this.filled ? filled : outlined}"
196
+ class="font-[Material_Symbols_Outlined] inline-block align-middle whitespace-nowrap ${this.clickable ? "is-clickable" : ""} ${this.filled ? filled : outlined}"
179
197
  style="color: ${this.iconColor}; transform: rotate(${this.rotate}deg); font-size: ${fontSize}; margin-bottom: ${this.size === "large" || this.size === "3xl" ? "0.375rem" : this.size === "x-large" || this.size === "5xl" ? "0.5rem" : `${this.marginBottom}px`};"
180
198
  >
181
199
  ${this.iconName}
@@ -189,6 +207,10 @@ __decorate([property({ type: Number })], AxebowIcon.prototype, "rotate", void 0)
189
207
  __decorate([property({ type: Boolean })], AxebowIcon.prototype, "filled", void 0);
190
208
  __decorate([property({ type: String })], AxebowIcon.prototype, "size", void 0);
191
209
  __decorate([property({ type: Number })], AxebowIcon.prototype, "marginBottom", void 0);
210
+ __decorate([property({
211
+ type: Boolean,
212
+ reflect: true
213
+ })], AxebowIcon.prototype, "clickable", void 0);
192
214
  AxebowIcon = __decorate([customElement("axebow-icon")], AxebowIcon);
193
215
  //#endregion
194
216
  //#region src/components/axebow-filter-bar/axebow-filter-bar.ts
@@ -319,1040 +341,1253 @@ var AxebowFilterBar = class AxebowFilterBar extends LitElement {
319
341
  __decorate([property({ type: Array })], AxebowFilterBar.prototype, "items", void 0);
320
342
  AxebowFilterBar = __decorate([customElement("axebow-filter-bar")], AxebowFilterBar);
321
343
  //#endregion
322
- //#region src/components/axebow-header/parts/axebow-quick-action-card.ts
323
- var AxebowQuickActionCard = class AxebowQuickActionCard extends LitElement {
324
- constructor(..._args) {
325
- super(..._args);
326
- this.icon = "";
327
- this.label = "";
328
- }
329
- static {
330
- this.styles = [unsafeCSS(tailwind_default), css`:host { display: block; }`];
331
- }
332
- render() {
333
- return html`
334
- <div
335
- class="flex flex-col items-center justify-center gap-1 w-[10.5rem] px-4 py-3 rounded bg-white hover:bg-(--axebow-base) cursor-pointer transition-colors duration-150"
336
- @click=${this._onClick}
337
- >
338
- <axebow-icon iconName=${this.icon} iconColor="var(--axebow-primary)" size="xl"></axebow-icon>
339
- <span class="text-base font-semibold text-(--axebow-primary) text-center whitespace-nowrap">${this.label}</span>
340
- </div>
341
- `;
342
- }
343
- _onClick() {
344
- this.dispatchEvent(new CustomEvent("card-click", {
345
- bubbles: true,
346
- composed: true
347
- }));
348
- }
349
- };
350
- __decorate([property({ type: String })], AxebowQuickActionCard.prototype, "icon", void 0);
351
- __decorate([property({ type: String })], AxebowQuickActionCard.prototype, "label", void 0);
352
- AxebowQuickActionCard = __decorate([customElement("axebow-quick-action-card")], AxebowQuickActionCard);
353
- //#endregion
354
- //#region src/components/axebow-header/parts/axebow-quick-actions.ts
355
- var AxebowQuickActions = class AxebowQuickActions extends LitElement {
356
- constructor(..._args) {
357
- super(..._args);
358
- this.label = "";
359
- this.actions = [];
360
- this.open = false;
361
- this._handleOutsideClick = (e) => {
362
- if (this.open && !this.contains(e.target)) this.open = false;
344
+ //#region src/components/axebow-button/axebow-button.ts
345
+ var AxebowButton = class AxebowButton extends LitElement {
346
+ constructor() {
347
+ super();
348
+ this.variant = "default";
349
+ this.size = "medium";
350
+ this.outline = false;
351
+ this.pill = false;
352
+ this.circle = false;
353
+ this.disabled = false;
354
+ this.loading = false;
355
+ this.caret = false;
356
+ this.type = "button";
357
+ this.hoverStyle = "simple";
358
+ this._guardDisabledClick = (event) => {
359
+ if (this.disabled || this.loading) {
360
+ event.preventDefault();
361
+ event.stopPropagation();
362
+ }
363
363
  };
364
+ this.addEventListener("click", this._guardDisabledClick, { capture: true });
364
365
  }
365
- static {
366
- this.styles = [unsafeCSS(tailwind_default), css`:host { display: inline-block; }`];
367
- }
368
- connectedCallback() {
369
- super.connectedCallback();
370
- document.addEventListener("click", this._handleOutsideClick);
371
- }
372
- disconnectedCallback() {
373
- super.disconnectedCallback();
374
- document.removeEventListener("click", this._handleOutsideClick);
375
- }
376
- _toggle(e) {
377
- e.stopPropagation();
378
- this.open = !this.open;
379
- }
380
- _select(action) {
381
- action.onClick();
382
- this.open = false;
383
- }
384
- render() {
385
- const row1 = this.actions.slice(0, 3).filter((a) => a.visible);
386
- const row2 = this.actions.slice(3, 7).filter((a) => a.visible);
387
- return html`
388
- <div class="relative">
389
- <button
390
- type="button"
391
- 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)"}"
392
- @click=${this._toggle}
393
- >
394
- <span
395
- class="flex flex-col items-center justify-center gap-1 ${this.open ? "text-(--axebow-primary)" : "text-white group-hover:text-(--axebow-primary)"}"
396
- >
397
- <axebow-icon iconName=${this.open ? "close" : "apps"} iconColor="currentColor" size="xl"></axebow-icon>
398
- <span
399
- class="text-xs whitespace-nowrap ${this.open ? "font-semibold" : "font-normal group-hover:font-semibold"}"
400
- >${this.label}</span
401
- >
402
- </span>
403
- </button>
404
-
405
- ${this.open ? html`
406
- <div
407
- class="absolute top-full left-full mt-2 z-2000 flex flex-col gap-1 p-1 bg-white border border-solid border-(--axebow-light-gray) rounded-lg axebow-shadow"
408
- >
409
- <div class="flex gap-1">
410
- ${row1.map((action) => html`
411
- <axebow-quick-action-card
412
- icon=${action.icon}
413
- label=${action.label}
414
- @card-click=${() => this._select(action)}
415
- ></axebow-quick-action-card>
416
- `)}
417
- </div>
418
- ${row2.length ? html`
419
- <div class="h-[0.0625rem] w-full bg-(--axebow-light-gray)"></div>
420
- <div class="flex flex-wrap gap-x-1 gap-y-[0.1875rem]">
421
- ${row2.map((action) => html`
422
- <axebow-quick-action-card
423
- icon=${action.icon}
424
- label=${action.label}
425
- @card-click=${() => this._select(action)}
426
- ></axebow-quick-action-card>
427
- `)}
428
- </div>
429
- ` : ""}
430
- </div>
431
- ` : ""}
432
- </div>
433
- `;
366
+ updated(changed) {
367
+ if (changed.has("fixedWidth")) if (this.fixedWidth) this.style.setProperty("--axebow-button-width", this.fixedWidth);
368
+ else this.style.removeProperty("--axebow-button-width");
369
+ if (changed.has("fixedHeight")) if (this.fixedHeight) this.style.setProperty("--axebow-button-height", this.fixedHeight);
370
+ else this.style.removeProperty("--axebow-button-height");
371
+ this._syncPaddingVar(changed, "paddingTop", "--axebow-button-padding-top");
372
+ this._syncPaddingVar(changed, "paddingRight", "--axebow-button-padding-right");
373
+ this._syncPaddingVar(changed, "paddingBottom", "--axebow-button-padding-bottom");
374
+ this._syncPaddingVar(changed, "paddingLeft", "--axebow-button-padding-left");
434
375
  }
435
- };
436
- __decorate([property({ type: String })], AxebowQuickActions.prototype, "label", void 0);
437
- __decorate([property({ type: Array })], AxebowQuickActions.prototype, "actions", void 0);
438
- __decorate([state()], AxebowQuickActions.prototype, "open", void 0);
439
- AxebowQuickActions = __decorate([customElement("axebow-quick-actions")], AxebowQuickActions);
440
- //#endregion
441
- //#region src/components/axebow-header/parts/axebow-header-actions.ts
442
- var AxebowHeaderActions = class AxebowHeaderActions extends LitElement {
443
- constructor(..._args) {
444
- super(..._args);
445
- this.userName = "";
446
- this.profileMenuItems = [];
447
- this.logoutLabel = "";
448
- this.onLogout = () => {};
449
- this.notificationsLabel = "";
450
- this.notifications = [];
451
- this.actionNeededNotifications = [];
452
- this.myNotificationsTabLabel = "";
453
- this.actionNeededTabLabel = "";
454
- this.noNotificationsLabel = "";
455
- this.noUnreadNotificationsLabel = "";
456
- this.noActionNotificationsLabel = "";
457
- this.showUnreadOnlyLabel = "";
458
- this.onLabel = "";
459
- this.offLabel = "";
460
- this.markAllAsReadLabel = "";
461
- this.onMarkAllAsRead = () => {};
462
- this.showUnreadOnly = false;
376
+ _syncPaddingVar(changed, prop, cssVar) {
377
+ if (!changed.has(prop)) return;
378
+ const value = this[prop];
379
+ if (value) this.style.setProperty(cssVar, value);
380
+ else this.style.removeProperty(cssVar);
463
381
  }
464
382
  static {
465
383
  this.styles = [unsafeCSS(tailwind_default), css`
466
- sl-dropdown::part(panel) {
467
- max-width: 500px;
468
- }
469
- .notification-description code {
384
+ :host {
470
385
  display: inline-block;
471
- white-space: pre-wrap;
472
- word-break: break-all;
473
386
  }
474
- .notification-description pre {
475
- white-space: pre-wrap;
387
+ sl-button {
388
+ width: 100%;
389
+ }
390
+ sl-button::part(base) {
391
+ height: var(--axebow-button-height, 2.5rem);
392
+ min-height: var(--axebow-button-height, 2.5rem);
393
+ line-height: calc(var(--axebow-button-height, 2.5rem) - var(--sl-input-border-width) * 2);
394
+ width: var(--axebow-button-width, auto);
395
+ min-width: var(--axebow-button-width, 9.375rem);
476
396
  }
477
- `];
478
- }
479
- handleShowUnreadOnlyChange(e) {
480
- this.showUnreadOnly = e.target.checked;
481
- }
482
- render() {
483
- const unreadNotifications = this.notifications.filter((n) => n.status === "unread");
484
- const notificationsToShow = this.showUnreadOnly ? unreadNotifications : this.notifications;
485
- return html`
486
- <div class="flex items-center gap-2 z-10 shrink-0 min-w-0 ml-auto">
487
- <sl-dropdown>
488
- <div
489
- class="relative group w-9 h-9 rounded-lg flex items-center justify-center cursor-pointer transition-colors duration-150 hover:bg-(--axebow-primary)"
490
- slot="trigger"
491
- >
492
- <span class="inline-block transition-transform duration-200 group-hover:rotate-15">
493
- <axebow-icon iconName="notifications" iconColor="white"></axebow-icon>
494
- </span>
495
- ${unreadNotifications.length > 0 ? html`<div
496
- class="absolute bottom-0.5 right-0.5 flex items-center justify-center rounded-full bg-(--axebow-error) text-white font-bold z-10 pointer-events-none ${unreadNotifications.length < 10 ? "w-4 h-4 text-sm" : "h-4 min-w-4 px-0.5 text-sm"}"
497
- >
498
- ${unreadNotifications.length > 99 ? "99+" : unreadNotifications.length}
499
- </div>` : ""}
500
- <span
501
- class="absolute top-1/2 -translate-y-1/2 right-[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"
502
- >${this.notificationsLabel}</span
503
- >
504
- </div>
505
- <sl-tab-group class="bg-white rounded-lg w-120 text-base">
506
- <sl-tab slot="nav" panel="my_notifications">${this.myNotificationsTabLabel}</sl-tab>
507
- <sl-tab slot="nav" panel="action_needed">${this.actionNeededTabLabel}</sl-tab>
508
397
 
509
- <sl-tab-panel class="bg-gray-100" name="my_notifications">
510
- <div class="flex flex-col gap-2 px-4 max-h-[40vh] overflow-auto w-full">
511
- ${this.notifications.length === 0 ? html`<div class="flex flex-row gap-4 items-center w-117">
512
- <axebow-icon iconName="info"></axebow-icon>
513
- <p class="text-black">${this.noNotificationsLabel}</p>
514
- </div>` : html`
515
- <div class="flex flex-col text-black gap-4">
516
- <div class="flex justify-between items-center flex-wrap gap-4">
517
- <div class="flex items-center py-1">
518
- <p class="mr-4 text-base">${this.showUnreadOnlyLabel}</p>
519
- <sl-switch @sl-change=${(e) => this.handleShowUnreadOnlyChange(e)}></sl-switch>
520
- <p class="italic text-gray-400 text-base">
521
- ${this.showUnreadOnly ? this.onLabel : this.offLabel}
522
- </p>
523
- </div>
524
- <button class="text-gray-500 cursor-pointer text-base" @click=${() => this.onMarkAllAsRead()}>
525
- ${this.markAllAsReadLabel}
526
- </button>
527
- </div>
528
- ${this.showUnreadOnly && unreadNotifications.length === 0 ? html`<div class="flex flex-row gap-4 items-center w-117">
529
- <axebow-icon iconName="info"></axebow-icon>
530
- <p class="text-black">${this.noUnreadNotificationsLabel}</p>
531
- </div>` : html` ${notificationsToShow.map((item) => this.renderNotificationCard(item))} `}
532
- </div>
533
- `}
534
- </div>
535
- </sl-tab-panel>
536
- <sl-tab-panel class="bg-gray-100" name="action_needed">
537
- <div class="flex flex-col gap-2 px-4 max-h-[40vh] overflow-auto w-full">
538
- ${this.actionNeededNotifications.length === 0 ? html`<div class="flex flex-row gap-4 items-center p-4">
539
- <axebow-icon iconName="info"></axebow-icon>
540
- <p class="text-black">${this.noActionNotificationsLabel}</p>
541
- </div>` : html`
542
- <div class="flex flex-col text-black gap-4">
543
- ${this.actionNeededNotifications.map((item) => this.renderNotificationCard(item))}
544
- </div>
545
- `}
546
- </div>
547
- </sl-tab-panel>
548
- </sl-tab-group>
549
- </sl-dropdown>
550
- <sl-dropdown class="shrink-0">
551
- <div
552
- slot="trigger"
553
- class="group flex items-center gap-2 h-9 px-3 rounded-lg text-white font-semibold cursor-pointer whitespace-nowrap transition-all duration-150 hover:bg-white hover:text-(--axebow-primary) hover:shadow-[0_2px_6px_rgba(13,24,33,0.14)] text-base"
554
- >
555
- <span class="text-white group-hover:text-(--axebow-primary) transition-colors duration-150">
556
- <axebow-icon iconName="account_circle" iconColor="currentColor" size="xl"></axebow-icon>
557
- </span>
558
- ${this.userName}
559
- </div>
560
- <sl-menu class="bg-white rounded-lg p-2 min-w-55 axebow-shadow">
561
- ${this.profileMenuItems.map((item) => html`
562
- <button
563
- class="w-full flex text-base items-center justify-between ml-auto px-4 py-2 cursor-pointer rounded-lg hover:bg-gray-200 transition-colors ease-in-out duration-200 hover:text-(--axebow-tertiary)"
564
- @click=${() => item.onClick()}
565
- >
566
- <span class="text-(--axebow-primary)">${item.name}</span>
567
- <axebow-icon iconName="arrow_right_alt" size="xl"></axebow-icon>
568
- </button>
569
- `)}
570
- <button
571
- class="ml-auto flex items-center justify-between w-full px-4 py-2 text-(--axebow-error) cursor-pointer rounded-lg text-base"
572
- @click=${() => this.onLogout()}
573
- >
574
- <span class="text-(--axebow-error) mt-1">${this.logoutLabel}</span>
575
- <axebow-icon iconName="mode_off_on" iconColor="var(--axebow-error)" size="md"></axebow-icon>
576
- </button>
577
- </sl-menu>
578
- </sl-dropdown>
579
- </div>
580
- `;
398
+ /**
399
+ * The label part carries sl-button's own internal left/right spacing
400
+ * via a higher-specificity internal rule
401
+ * (.button--has-label.button--{size} .button__label), which an
402
+ * external ::part() override of equal-or-lower specificity cannot
403
+ * beat on its own - !important is required here, not optional
404
+ * styling preference. Each size's fallback points at shoelace's own
405
+ * token for that size, so unconfigured buttons render byte-for-byte
406
+ * as before - only an explicit padding* property changes anything.
407
+ */
408
+ sl-button[size='small']::part(label) {
409
+ padding-top: var(--axebow-button-padding-top, 0) !important;
410
+ padding-right: var(--axebow-button-padding-right, var(--sl-spacing-small)) !important;
411
+ padding-bottom: var(--axebow-button-padding-bottom, 0) !important;
412
+ padding-left: var(--axebow-button-padding-left, var(--sl-spacing-small)) !important;
413
+ }
414
+ sl-button[size='medium']::part(label) {
415
+ padding-top: var(--axebow-button-padding-top, 0) !important;
416
+ padding-right: var(--axebow-button-padding-right, var(--sl-spacing-medium)) !important;
417
+ padding-bottom: var(--axebow-button-padding-bottom, 0) !important;
418
+ padding-left: var(--axebow-button-padding-left, var(--sl-spacing-medium)) !important;
419
+ }
420
+ sl-button[size='large']::part(label) {
421
+ padding-top: var(--axebow-button-padding-top, 0) !important;
422
+ padding-right: var(--axebow-button-padding-right, var(--sl-spacing-large)) !important;
423
+ padding-bottom: var(--axebow-button-padding-bottom, 0) !important;
424
+ padding-left: var(--axebow-button-padding-left, var(--sl-spacing-large)) !important;
425
+ }
426
+
427
+ /**
428
+ * Hover is always a plain recolor to axebow-gray, no matter the
429
+ * variant - nothing else about the button's structure changes.
430
+ */
431
+
432
+ /** Default / neutral button */
433
+ sl-button[variant='default']:hover::part(base),
434
+ sl-button[variant='neutral']:hover::part(base) {
435
+ color: var(--axebow-gray);
436
+ border-color: var(--axebow-gray);
437
+ outline-color: var(--axebow-gray);
438
+ }
439
+
440
+ /** Primary button */
441
+ sl-button[variant='primary']::part(base) {
442
+ background: var(--axebow-tertiary);
443
+ color: white;
444
+ border-color: transparent;
445
+ outline-color: var(--axebow-tertiary);
446
+ }
447
+ sl-button[variant='primary']:hover::part(base) {
448
+ background: var(--axebow-gray);
449
+ outline-color: var(--axebow-gray);
450
+ }
451
+
452
+ /** Outlined primary button */
453
+ sl-button[variant='primary'][outline]::part(base) {
454
+ background: transparent;
455
+ color: var(--axebow-tertiary);
456
+ border-color: var(--axebow-tertiary);
457
+ outline-color: var(--axebow-tertiary);
458
+ }
459
+ sl-button[variant='primary'][outline]:hover::part(base) {
460
+ color: var(--axebow-gray);
461
+ border-color: var(--axebow-gray);
462
+ outline-color: var(--axebow-gray);
463
+ }
464
+
465
+ /** Text button */
466
+ sl-button[variant='text']::part(base) {
467
+ outline-color: var(--axebow-tertiary);
468
+ }
469
+ sl-button[variant='text']::part(label) {
470
+ color: var(--axebow-tertiary);
471
+ }
472
+ sl-button[variant='text']:hover::part(base) {
473
+ outline-color: var(--axebow-gray);
474
+ border-radius: 0.375rem;
475
+ }
476
+ sl-button[variant='text']:hover::part(label) {
477
+ color: var(--axebow-gray);
478
+ }
479
+
480
+ /** Success button */
481
+ sl-button[variant='success']::part(base) {
482
+ background: var(--axebow-success);
483
+ border-color: var(--axebow-success);
484
+ color: white;
485
+ border-radius: 0.5rem;
486
+ outline-color: var(--axebow-success);
487
+ }
488
+ sl-button[variant='success']:hover::part(base) {
489
+ background: var(--axebow-gray);
490
+ border-color: var(--axebow-gray);
491
+ outline-color: var(--axebow-gray);
492
+ }
493
+
494
+ /** Danger button */
495
+ sl-button[variant='danger']::part(base) {
496
+ background: var(--axebow-error);
497
+ border-color: var(--axebow-error);
498
+ color: white;
499
+ outline-color: var(--axebow-error);
500
+ }
501
+ sl-button[variant='danger']:hover::part(base) {
502
+ background: var(--axebow-gray);
503
+ border-color: var(--axebow-gray);
504
+ outline-color: var(--axebow-gray);
505
+ }
506
+
507
+ /** Danger outlined */
508
+ sl-button[variant='danger'][outline]::part(base) {
509
+ background: transparent;
510
+ color: var(--axebow-error);
511
+ border-color: var(--axebow-error);
512
+ outline-color: var(--axebow-error);
513
+ }
514
+ sl-button[variant='danger'][outline]:hover::part(base) {
515
+ color: var(--axebow-gray);
516
+ border-color: var(--axebow-gray);
517
+ outline-color: var(--axebow-gray);
518
+ }
519
+
520
+ /** Danger text (host class) */
521
+ :host(.axebow-red-button-text) sl-button::part(base) {
522
+ outline-color: var(--axebow-error);
523
+ }
524
+ :host(.axebow-red-button-text) sl-button::part(label) {
525
+ color: var(--axebow-error);
526
+ }
527
+ :host(.axebow-red-button-text) sl-button:hover::part(base) {
528
+ outline-color: var(--axebow-gray);
529
+ }
530
+ :host(.axebow-red-button-text) sl-button:hover::part(label) {
531
+ color: var(--axebow-gray);
532
+ }
533
+
534
+ /** Warning button (host class) */
535
+ :host(.axebow-warning-button-bg) sl-button::part(base) {
536
+ color: var(--axebow-tertiary);
537
+ border-color: var(--axebow-tertiary);
538
+ outline-color: var(--axebow-tertiary);
539
+ }
540
+ :host(.axebow-warning-button-bg) sl-button:hover::part(base) {
541
+ color: var(--axebow-gray);
542
+ border-color: var(--axebow-gray);
543
+ outline-color: var(--axebow-gray);
544
+ }
545
+
546
+ /**
547
+ * Boxed hover look shared with axebow-more-actions, opt-in via
548
+ * hoverStyle="border". Declared last so it wins over every
549
+ * variant's own hover rule above, regardless of which variant
550
+ * it's combined with.
551
+ */
552
+ sl-button[hoverstyle='border']:hover::part(base) {
553
+ background-color: var(--axebow-anti-flash-white) !important;
554
+ border-radius: 0.5rem !important;
555
+ outline-color: transparent !important;
556
+ border-color: transparent !important;
557
+ }
558
+ sl-button[hoverstyle='border']:hover::part(label) {
559
+ color: var(--axebow-gray) !important;
560
+ }
561
+ `];
581
562
  }
582
- renderNotificationCard(item) {
563
+ render() {
583
564
  return html`
584
- <div
585
- class="relative flex gap-2 p-2 w-full rounded-md border-2 border-solid text-base ${item.status === "unread" ? "border-gray-500 hover:border-(--axebow-tertiary) text-gray-600" : "border-gray-300 text-gray-400"} "
586
- @click=${() => item.onClick()}
565
+ <sl-button
566
+ exportparts="base, label, prefix, suffix, caret"
567
+ hoverstyle=${this.hoverStyle}
568
+ variant=${this.variant}
569
+ size=${this.size}
570
+ ?outline=${this.outline}
571
+ ?pill=${this.pill}
572
+ ?circle=${this.circle}
573
+ ?disabled=${this.disabled}
574
+ ?loading=${this.loading}
575
+ ?caret=${this.caret}
576
+ type=${this.type}
577
+ href=${ifDefined(this.href)}
578
+ target=${ifDefined(this.target)}
579
+ name=${ifDefined(this.name)}
580
+ value=${ifDefined(this.value)}
587
581
  >
588
- ${item.status === "unread" ? html` <div class="absolute top-[-7px] left-[-7px] h-3.5 w-3.5 rounded-full bg-(--axebow-success)"></div>` : ""}
589
- <axebow-icon
590
- iconName=${item.icon}
591
- size="xl"
592
- iconColor=${item.status === "unread" ? item.color : "gray"}
593
- ></axebow-icon>
594
- <div class="flex flex-1 flex-col gap-1 py-1.25 min-w-0 overflow-hidden">
595
- <div class="flex justify-between gap-2">
596
- <h4 class="font-semibold wrap-break-word">${item.title}</h4>
597
- <span class="ms-auto min-w-fit shrink-0 text-gray-400">${item.date}</span>
598
- </div>
599
- <div
600
- class="notification-description leading-tight max-w-full pe-4 overflow-x-hidden overflow-y-auto max-h-75 wrap-break-word"
601
- .innerHTML=${item.description}
602
- ></div>
603
- ${item.actions && item.actions.length > 0 ? html`
604
- <div class="flex gap-4 ml-auto pe-4 flex-wrap">
605
- ${item.actions.map((action) => html`
606
- <button class="text-sm font-semibold text-[${action.color}] hover:underline" @click=${action.action}>
607
- ${action.label}
608
- </button>
609
- `)}
610
- </div>
611
- ` : ""}
612
- </div>
613
- </div>
582
+ <slot name="prefix" slot="prefix"></slot>
583
+ <slot></slot>
584
+ <slot name="suffix" slot="suffix"></slot>
585
+ </sl-button>
614
586
  `;
615
587
  }
616
588
  };
617
- __decorate([property({ type: String })], AxebowHeaderActions.prototype, "userName", void 0);
618
- __decorate([property({ type: Array })], AxebowHeaderActions.prototype, "profileMenuItems", void 0);
619
- __decorate([property({ type: String })], AxebowHeaderActions.prototype, "logoutLabel", void 0);
620
- __decorate([property({ attribute: false })], AxebowHeaderActions.prototype, "onLogout", void 0);
621
- __decorate([property({ type: String })], AxebowHeaderActions.prototype, "notificationsLabel", void 0);
622
- __decorate([property({ type: Array })], AxebowHeaderActions.prototype, "notifications", void 0);
623
- __decorate([property({ type: Array })], AxebowHeaderActions.prototype, "actionNeededNotifications", void 0);
624
- __decorate([property({ type: String })], AxebowHeaderActions.prototype, "myNotificationsTabLabel", void 0);
625
- __decorate([property({ type: String })], AxebowHeaderActions.prototype, "actionNeededTabLabel", void 0);
626
- __decorate([property({ type: String })], AxebowHeaderActions.prototype, "noNotificationsLabel", void 0);
627
- __decorate([property({ type: String })], AxebowHeaderActions.prototype, "noUnreadNotificationsLabel", void 0);
628
- __decorate([property({ type: String })], AxebowHeaderActions.prototype, "noActionNotificationsLabel", void 0);
629
- __decorate([property({ type: String })], AxebowHeaderActions.prototype, "showUnreadOnlyLabel", void 0);
630
- __decorate([property({ type: String })], AxebowHeaderActions.prototype, "onLabel", void 0);
631
- __decorate([property({ type: String })], AxebowHeaderActions.prototype, "offLabel", void 0);
632
- __decorate([property({ type: String })], AxebowHeaderActions.prototype, "markAllAsReadLabel", void 0);
633
- __decorate([property({ attribute: false })], AxebowHeaderActions.prototype, "onMarkAllAsRead", void 0);
634
- __decorate([state()], AxebowHeaderActions.prototype, "showUnreadOnly", void 0);
635
- AxebowHeaderActions = __decorate([customElement("axebow-header-actions")], AxebowHeaderActions);
589
+ __decorate([property({
590
+ type: String,
591
+ reflect: true
592
+ })], AxebowButton.prototype, "variant", void 0);
593
+ __decorate([property({
594
+ type: String,
595
+ reflect: true
596
+ })], AxebowButton.prototype, "size", void 0);
597
+ __decorate([property({
598
+ type: Boolean,
599
+ reflect: true
600
+ })], AxebowButton.prototype, "outline", void 0);
601
+ __decorate([property({
602
+ type: Boolean,
603
+ reflect: true
604
+ })], AxebowButton.prototype, "pill", void 0);
605
+ __decorate([property({
606
+ type: Boolean,
607
+ reflect: true
608
+ })], AxebowButton.prototype, "circle", void 0);
609
+ __decorate([property({
610
+ type: Boolean,
611
+ attribute: false
612
+ })], AxebowButton.prototype, "disabled", void 0);
613
+ __decorate([property({
614
+ type: Boolean,
615
+ reflect: true
616
+ })], AxebowButton.prototype, "loading", void 0);
617
+ __decorate([property({
618
+ type: Boolean,
619
+ reflect: true
620
+ })], AxebowButton.prototype, "caret", void 0);
621
+ __decorate([property({ type: String })], AxebowButton.prototype, "type", void 0);
622
+ __decorate([property({ type: String })], AxebowButton.prototype, "href", void 0);
623
+ __decorate([property({ type: String })], AxebowButton.prototype, "target", void 0);
624
+ __decorate([property({ type: String })], AxebowButton.prototype, "name", void 0);
625
+ __decorate([property({ type: String })], AxebowButton.prototype, "value", void 0);
626
+ __decorate([property({ type: String })], AxebowButton.prototype, "fixedWidth", void 0);
627
+ __decorate([property({ type: String })], AxebowButton.prototype, "fixedHeight", void 0);
628
+ __decorate([property({ type: String })], AxebowButton.prototype, "paddingTop", void 0);
629
+ __decorate([property({ type: String })], AxebowButton.prototype, "paddingRight", void 0);
630
+ __decorate([property({ type: String })], AxebowButton.prototype, "paddingBottom", void 0);
631
+ __decorate([property({ type: String })], AxebowButton.prototype, "paddingLeft", void 0);
632
+ __decorate([property({ type: String })], AxebowButton.prototype, "hoverStyle", void 0);
633
+ AxebowButton = __decorate([customElement("axebow-button")], AxebowButton);
636
634
  //#endregion
637
- //#region src/components/axebow-header/axebow-header.ts
638
- var AxebowHeader = class AxebowHeader extends LitElement {
635
+ //#region src/components/axebow-search/axebow-search.ts
636
+ var AxebowSearch = class AxebowSearch extends LitElement {
639
637
  constructor(..._args) {
640
638
  super(..._args);
641
- this.minimal = false;
642
- this.logoUrl = "";
643
- this.logoAlt = "";
644
- this.onLogoClick = () => {};
645
- this.userName = "";
646
- this.quickActionsLabel = "";
647
- this.quickActions = [];
648
- this.profileMenuItems = [];
649
- this.logoutLabel = "";
650
- this.onLogout = () => {};
651
- this.notificationsLabel = "";
652
- this.notifications = [];
653
- this.actionNeededNotifications = [];
654
- this.myNotificationsTabLabel = "";
655
- this.actionNeededTabLabel = "";
656
- this.noNotificationsLabel = "";
657
- this.noUnreadNotificationsLabel = "";
658
- this.noActionNotificationsLabel = "";
659
- this.showUnreadOnlyLabel = "";
660
- this.onLabel = "";
661
- this.offLabel = "";
662
- this.markAllAsReadLabel = "";
663
- this.onMarkAllAsRead = () => {};
639
+ this.value = "";
640
+ this.placeholder = "";
641
+ }
642
+ static {
643
+ this.styles = [unsafeCSS(tailwind_default), css`
644
+ :host {
645
+ display: inline-block;
646
+ }
647
+ sl-input {
648
+ width: 20rem;
649
+ --sl-focus-ring-width: 0px;
650
+ }
651
+ :host(.axebow-fixed-width) sl-input {
652
+ width: var(--axebow-search-width);
653
+ }
654
+ sl-input::part(base) {
655
+ height: var(--axebow-search-height, 2.5rem);
656
+ border: 1px solid #dbdde4;
657
+ border-radius: 0.375rem;
658
+ box-shadow: none;
659
+ }
660
+ sl-input::part(input) {
661
+ height: var(--axebow-search-height, 2.5rem) !important;
662
+ }
663
+ sl-input:focus-within::part(base) {
664
+ border-color: var(--axebow-tertiary);
665
+ }
666
+ sl-input::part(input) {
667
+ color: var(--axebow-rich-black, #0d1821);
668
+ font-size: 0.875rem;
669
+ }
670
+ sl-input::part(prefix) {
671
+ padding-inline-start: 0.75rem;
672
+ }
673
+ `];
664
674
  }
665
- static {
666
- this.styles = [unsafeCSS(tailwind_default), axebowTheme];
675
+ updated(changed) {
676
+ super.updated(changed);
677
+ if (changed.has("width")) if (this.width) {
678
+ this.style.setProperty("--axebow-search-width", this.width);
679
+ this.classList.add("axebow-fixed-width");
680
+ } else {
681
+ this.style.removeProperty("--axebow-search-width");
682
+ this.classList.remove("axebow-fixed-width");
683
+ }
684
+ if (changed.has("height")) if (this.height) this.style.setProperty("--axebow-search-height", this.height);
685
+ else this.style.removeProperty("--axebow-search-height");
686
+ }
687
+ _emitChange(value) {
688
+ this.dispatchEvent(new CustomEvent("search-change", {
689
+ detail: { value },
690
+ bubbles: true,
691
+ composed: true
692
+ }));
693
+ }
694
+ _onInput(e) {
695
+ this._emitChange(e.target.value);
696
+ }
697
+ _onClear() {
698
+ this._emitChange("");
667
699
  }
668
700
  render() {
669
701
  return html`
670
- <header class="relative flex items-center justify-between h-full pe-4 py-2">
671
- ${this.minimal ? html`
672
- <div
673
- class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-5 cursor-pointer hover:opacity-80 transition-opacity duration-200"
674
- @click=${() => this.onLogoClick()}
675
- >
676
- <div class="flex items-center gap-2 text-white">
677
- <img src="${this.logoUrl}" alt="${this.logoAlt}" class="h-10" />
678
- </div>
679
- </div>
680
- ` : html`
681
- <axebow-quick-actions .label=${this.quickActionsLabel} .actions=${this.quickActions}></axebow-quick-actions>
682
-
683
- <div
684
- class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-5 cursor-pointer hover:opacity-80 transition-opacity duration-200"
685
- @click=${() => this.onLogoClick()}
686
- >
687
- <div class="flex items-center gap-2 text-white">
688
- <img src="${this.logoUrl}" alt="${this.logoAlt}" class="h-10" />
689
- </div>
690
- </div>
691
-
692
- <axebow-header-actions
693
- .userName=${this.userName}
694
- .profileMenuItems=${this.profileMenuItems}
695
- .logoutLabel=${this.logoutLabel}
696
- .onLogout=${this.onLogout}
697
- .notificationsLabel=${this.notificationsLabel}
698
- .notifications=${this.notifications}
699
- .actionNeededNotifications=${this.actionNeededNotifications}
700
- .myNotificationsTabLabel=${this.myNotificationsTabLabel}
701
- .actionNeededTabLabel=${this.actionNeededTabLabel}
702
- .noNotificationsLabel=${this.noNotificationsLabel}
703
- .noUnreadNotificationsLabel=${this.noUnreadNotificationsLabel}
704
- .noActionNotificationsLabel=${this.noActionNotificationsLabel}
705
- .showUnreadOnlyLabel=${this.showUnreadOnlyLabel}
706
- .onLabel=${this.onLabel}
707
- .offLabel=${this.offLabel}
708
- .markAllAsReadLabel=${this.markAllAsReadLabel}
709
- .onMarkAllAsRead=${this.onMarkAllAsRead}
710
- ></axebow-header-actions>
711
- `}
712
- </header>
702
+ <sl-input placeholder=${this.placeholder} .value=${this.value} clearable @sl-input=${this._onInput} @sl-clear=${this._onClear}>
703
+ <axebow-icon slot="prefix" iconName="search" iconColor="var(--axebow-gray)" size="md"></axebow-icon>
704
+ </sl-input>
713
705
  `;
714
706
  }
715
707
  };
716
- __decorate([property({
717
- type: Boolean,
718
- reflect: true
719
- })], AxebowHeader.prototype, "minimal", void 0);
720
- __decorate([property({ type: String })], AxebowHeader.prototype, "logoUrl", void 0);
721
- __decorate([property({ type: String })], AxebowHeader.prototype, "logoAlt", void 0);
722
- __decorate([property({ attribute: false })], AxebowHeader.prototype, "onLogoClick", void 0);
723
- __decorate([property({ type: String })], AxebowHeader.prototype, "userName", void 0);
724
- __decorate([property({ type: String })], AxebowHeader.prototype, "quickActionsLabel", void 0);
725
- __decorate([property({ type: Array })], AxebowHeader.prototype, "quickActions", void 0);
726
- __decorate([property({ type: Array })], AxebowHeader.prototype, "profileMenuItems", void 0);
727
- __decorate([property({ type: String })], AxebowHeader.prototype, "logoutLabel", void 0);
728
- __decorate([property({ attribute: false })], AxebowHeader.prototype, "onLogout", void 0);
729
- __decorate([property({ type: String })], AxebowHeader.prototype, "notificationsLabel", void 0);
730
- __decorate([property({ type: Array })], AxebowHeader.prototype, "notifications", void 0);
731
- __decorate([property({ type: Array })], AxebowHeader.prototype, "actionNeededNotifications", void 0);
732
- __decorate([property({ type: String })], AxebowHeader.prototype, "myNotificationsTabLabel", void 0);
733
- __decorate([property({ type: String })], AxebowHeader.prototype, "actionNeededTabLabel", void 0);
734
- __decorate([property({ type: String })], AxebowHeader.prototype, "noNotificationsLabel", void 0);
735
- __decorate([property({ type: String })], AxebowHeader.prototype, "noUnreadNotificationsLabel", void 0);
736
- __decorate([property({ type: String })], AxebowHeader.prototype, "noActionNotificationsLabel", void 0);
737
- __decorate([property({ type: String })], AxebowHeader.prototype, "showUnreadOnlyLabel", void 0);
738
- __decorate([property({ type: String })], AxebowHeader.prototype, "onLabel", void 0);
739
- __decorate([property({ type: String })], AxebowHeader.prototype, "offLabel", void 0);
740
- __decorate([property({ type: String })], AxebowHeader.prototype, "markAllAsReadLabel", void 0);
741
- __decorate([property({ attribute: false })], AxebowHeader.prototype, "onMarkAllAsRead", void 0);
742
- AxebowHeader = __decorate([customElement("axebow-header")], AxebowHeader);
708
+ __decorate([property({ type: String })], AxebowSearch.prototype, "value", void 0);
709
+ __decorate([property({ type: String })], AxebowSearch.prototype, "placeholder", void 0);
710
+ __decorate([property({ type: String })], AxebowSearch.prototype, "width", void 0);
711
+ __decorate([property({ type: String })], AxebowSearch.prototype, "height", void 0);
712
+ AxebowSearch = __decorate([customElement("axebow-search")], AxebowSearch);
743
713
  //#endregion
744
- //#region src/components/axebow-sidebar/axebow-sidebar.ts
745
- var AxebowSidebar = class AxebowSidebar extends LitElement {
714
+ //#region src/components/axebow-search-bar-filters/axebow-search-bar-filters.ts
715
+ var AxebowSearchBarFilters = class AxebowSearchBarFilters extends LitElement {
746
716
  constructor(..._args) {
747
717
  super(..._args);
748
- this.items = [];
749
- this.bottomItems = [];
750
- this.selectedKey = null;
751
- this.paddingBottom = 10;
752
- this.hoveredItem = null;
753
- this.tooltipTop = 0;
754
- this.tooltipLeft = 0;
718
+ this.values = {
719
+ search: "",
720
+ role: "all",
721
+ provider: "all",
722
+ plan: "all",
723
+ sortBy: "newToOlder"
724
+ };
725
+ this.roleOptions = [];
726
+ this.providerOptions = [];
727
+ this.planOptions = [];
728
+ this.sortOptions = [];
729
+ this.hideSearchAndCreate = false;
730
+ this.createTenantLabel = "";
731
+ this.searchPlaceholder = "";
732
+ this.rolePlaceholder = "";
733
+ this.providerPlaceholder = "";
734
+ this.planPlaceholder = "";
735
+ this.clearAllLabel = "";
736
+ }
737
+ get _activeControlsCount() {
738
+ const { search, role, provider, plan } = this.values;
739
+ return [
740
+ search !== "",
741
+ role !== "all",
742
+ provider !== "all",
743
+ plan !== "all"
744
+ ].filter(Boolean).length;
755
745
  }
756
746
  static {
757
747
  this.styles = [unsafeCSS(tailwind_default), css`
758
748
  :host {
759
- position: relative;
760
- width: 4rem;
749
+ width: 100%;
750
+ }
751
+ axebow-button:hover axebow-icon {
752
+ --icon-btn-color: var(--axebow-gray);
753
+ }
754
+ sl-select::part(combobox):hover {
755
+ border-color: black;
756
+ }
757
+ sl-input::part(base):hover {
758
+ border-color: black;
759
+ }
760
+ .clear-all-link {
761
+ cursor: pointer;
762
+ color: var(--axebow-tertiary);
763
+ font-size: 0.875rem;
764
+ text-decoration: underline;
765
+ }
766
+ .clear-all-link:hover {
767
+ opacity: 0.75;
768
+ }
769
+ .create-tenant-button::part(base) {
770
+ font-size: 0.875rem !important;
771
+ }
772
+ .filter-select::part(combobox) {
773
+ height: 2.5rem !important;
774
+ min-height: 2.5rem !important;
761
775
  }
762
776
  `];
763
777
  }
764
- handleMouseEnter(event, item) {
765
- const rect = event.currentTarget.getBoundingClientRect();
766
- this.tooltipTop = rect.top + 10;
767
- this.tooltipLeft = rect.right - 8;
768
- this.hoveredItem = item;
778
+ _dispatch(key, value) {
779
+ this.values = {
780
+ ...this.values,
781
+ [key]: value
782
+ };
783
+ this.dispatchEvent(new CustomEvent("filter-change", {
784
+ detail: {
785
+ key,
786
+ value
787
+ },
788
+ bubbles: true,
789
+ composed: true
790
+ }));
769
791
  }
770
- handleMouseLeave() {
771
- this.hoveredItem = null;
792
+ _onSearchChange(e) {
793
+ this._dispatch("search", e.detail.value);
772
794
  }
773
- _isSelected(item) {
774
- return this.selectedKey === item.key || !!item.isRoot && this.selectedKey === null;
795
+ _onSelectChange(e, key) {
796
+ const value = e.target.value;
797
+ this._dispatch(key, value || "all");
798
+ }
799
+ _onSelectClear(key) {
800
+ this._dispatch(key, "all");
801
+ }
802
+ _onCreateTenant() {
803
+ this.dispatchEvent(new CustomEvent("create-tenant", {
804
+ bubbles: true,
805
+ composed: true
806
+ }));
807
+ }
808
+ _onClearAll() {
809
+ this.dispatchEvent(new CustomEvent("clear-all", {
810
+ bubbles: true,
811
+ composed: true
812
+ }));
775
813
  }
776
814
  render() {
815
+ const showClearAll = this._activeControlsCount >= 2;
816
+ const roleValue = this.values.role !== "all" ? this.values.role : "";
817
+ const providerValue = this.values.provider !== "all" ? this.values.provider : "";
818
+ const planValue = this.values.plan !== "all" ? this.values.plan : "";
777
819
  return html`
778
- <nav
779
- style="padding-bottom: ${this.paddingBottom}px;"
780
- class="h-full flex flex-col justify-between overflow-x-hidden pt-2"
781
- >
782
- <ul class="flex flex-col gap-0 w-full pb-4">
783
- ${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)))}
784
- </ul>
785
- <ul>
786
- ${this.bottomItems.map((item) => this._renderBottomItem(item))}
787
- </ul>
788
- </nav>
820
+ <div>
821
+ <div class="flex items-center gap-4 mb-2">
822
+ ${!this.hideSearchAndCreate ? html`
823
+ <axebow-button
824
+ variant="primary"
825
+ outline
826
+ class="create-tenant-button"
827
+ fixedWidth="9rem"
828
+ fixedHeight="2.5rem"
829
+ paddingRight="0.5rem"
830
+ @click=${this._onCreateTenant}
831
+ >
832
+ ${this.createTenantLabel}
833
+ <axebow-icon
834
+ slot="suffix"
835
+ iconName="add"
836
+ iconColor="var(--icon-btn-color, var(--axebow-tertiary))"
837
+ ></axebow-icon>
838
+ </axebow-button>
789
839
 
790
- ${this.hoveredItem ? html`
791
- <div
792
- class="fixed ps-4 flex items-center pointer-events-none z-9999"
793
- style="left: ${this.tooltipLeft}px; top: ${this.tooltipTop}px; height: 3rem;"
794
- >
795
- <span
796
- class="flex items-center gap-1 px-2 py-1 bg-white rounded-lg text-base border border-solid border-(--axebow-gray) shadow-lg"
797
- >${this.hoveredItem.label}${this.hoveredItem.openInNewTab ? html`<axebow-icon iconName="open_in_new" size="sm"></axebow-icon>` : ""}</span
798
- >
799
- </div>
800
- ` : ""}
840
+ <axebow-search
841
+ placeholder=${this.searchPlaceholder}
842
+ .value=${this.values.search}
843
+ width="26.25rem"
844
+ height="2.5rem"
845
+ @search-change=${this._onSearchChange}
846
+ ></axebow-search>
847
+ ` : ""}
848
+
849
+ <sl-select
850
+ placeholder=${this.rolePlaceholder}
851
+ .value=${roleValue}
852
+ @sl-change=${(e) => this._onSelectChange(e, "role")}
853
+ @sl-clear=${() => this._onSelectClear("role")}
854
+ clearable
855
+ class="w-33.25 h-10 filter-select"
856
+ >
857
+ ${this.roleOptions.map((opt) => html`<sl-option value="${opt.value}">${opt.label}</sl-option>`)}
858
+ </sl-select>
859
+
860
+ <sl-select
861
+ placeholder=${this.providerPlaceholder}
862
+ .value=${providerValue}
863
+ @sl-change=${(e) => this._onSelectChange(e, "provider")}
864
+ @sl-clear=${() => this._onSelectClear("provider")}
865
+ clearable
866
+ class="w-33.25 h-10 filter-select"
867
+ >
868
+ ${this.providerOptions.map((opt) => html`
869
+ <sl-option value="${opt.value}">
870
+ <span class="flex items-center justify-between w-full gap-2">
871
+ ${opt.label}
872
+ ${opt.logo ? html`<img src="${opt.logo}" alt="${opt.label}" class="h-4 w-auto object-contain ml-auto" />` : ""}
873
+ </span>
874
+ </sl-option>
875
+ `)}
876
+ </sl-select>
877
+
878
+ <sl-select
879
+ placeholder=${this.planPlaceholder}
880
+ .value=${planValue}
881
+ @sl-change=${(e) => this._onSelectChange(e, "plan")}
882
+ @sl-clear=${() => this._onSelectClear("plan")}
883
+ clearable
884
+ class="w-33.25 h-10 filter-select"
885
+ >
886
+ ${this.planOptions.map((opt) => html`<sl-option value="${opt.value}">${opt.label}</sl-option>`)}
887
+ </sl-select>
888
+
889
+ <sl-select
890
+ .value=${this.values.sortBy}
891
+ @sl-change=${(e) => this._onSelectChange(e, "sortBy")}
892
+ class="w-33.25 h-10 filter-select"
893
+ >
894
+ ${this.sortOptions.map((opt) => html`<sl-option value="${opt.value}">${opt.label}</sl-option>`)}
895
+ </sl-select>
896
+ </div>
897
+
898
+ ${showClearAll ? html`
899
+ <div class="flex justify-end mb-2">
900
+ <axebow-button variant="text" @click=${this._onClearAll}>${this.clearAllLabel}</axebow-button>
901
+ </div>
902
+ ` : ""}
903
+ </div>
801
904
  `;
802
905
  }
803
- _renderNavItem(item, selected) {
906
+ };
907
+ __decorate([property({ type: Object })], AxebowSearchBarFilters.prototype, "values", void 0);
908
+ __decorate([property({ type: Array })], AxebowSearchBarFilters.prototype, "roleOptions", void 0);
909
+ __decorate([property({ type: Array })], AxebowSearchBarFilters.prototype, "providerOptions", void 0);
910
+ __decorate([property({ type: Array })], AxebowSearchBarFilters.prototype, "planOptions", void 0);
911
+ __decorate([property({ type: Array })], AxebowSearchBarFilters.prototype, "sortOptions", void 0);
912
+ __decorate([property({ type: Boolean })], AxebowSearchBarFilters.prototype, "hideSearchAndCreate", void 0);
913
+ __decorate([property({ type: String })], AxebowSearchBarFilters.prototype, "createTenantLabel", void 0);
914
+ __decorate([property({ type: String })], AxebowSearchBarFilters.prototype, "searchPlaceholder", void 0);
915
+ __decorate([property({ type: String })], AxebowSearchBarFilters.prototype, "rolePlaceholder", void 0);
916
+ __decorate([property({ type: String })], AxebowSearchBarFilters.prototype, "providerPlaceholder", void 0);
917
+ __decorate([property({ type: String })], AxebowSearchBarFilters.prototype, "planPlaceholder", void 0);
918
+ __decorate([property({ type: String })], AxebowSearchBarFilters.prototype, "clearAllLabel", void 0);
919
+ AxebowSearchBarFilters = __decorate([customElement("axebow-search-bar-filters")], AxebowSearchBarFilters);
920
+ //#endregion
921
+ //#region src/components/axebow-header/parts/axebow-quick-action-card.ts
922
+ var AxebowQuickActionCard = class AxebowQuickActionCard extends LitElement {
923
+ constructor(..._args) {
924
+ super(..._args);
925
+ this.icon = "";
926
+ this.label = "";
927
+ }
928
+ static {
929
+ this.styles = [unsafeCSS(tailwind_default), css`:host { display: block; }`];
930
+ }
931
+ render() {
804
932
  return html`
805
- <li
806
- 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"
807
- @click="${() => item.onClick()}"
808
- @mouseenter="${(e) => this.handleMouseEnter(e, item)}"
809
- @mouseleave="${() => this.handleMouseLeave()}"
810
- title="${item.label}"
933
+ <div
934
+ class="flex flex-col items-center justify-center gap-1 w-[10.5rem] px-4 py-3 rounded bg-white hover:bg-(--axebow-base) cursor-pointer transition-colors duration-150"
935
+ @click=${this._onClick}
811
936
  >
812
- <div class="flex flex-col items-center justify-center">
813
- <axebow-icon iconName="${item.icon}" size="xl"></axebow-icon>
814
- <span class="text-xs overflow-hidden whitespace-nowrap opacity-100 max-w-full">${item.label}</span>
815
- </div>
816
-
817
- ${!selected ? html`
818
- <div
819
- class="absolute top-0 right-0 h-full w-2.5 rounded-l-xl bg-(--axebow-base) opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity duration-200"
820
- ></div>
821
- ` : ""}
822
- </li>
937
+ <axebow-icon iconName=${this.icon} iconColor="var(--axebow-primary)" size="xl"></axebow-icon>
938
+ <span class="text-base font-semibold text-(--axebow-primary) text-center whitespace-nowrap">${this.label}</span>
939
+ </div>
823
940
  `;
824
941
  }
825
- _renderBottomItem(item) {
942
+ _onClick() {
943
+ this.dispatchEvent(new CustomEvent("card-click", {
944
+ bubbles: true,
945
+ composed: true
946
+ }));
947
+ }
948
+ };
949
+ __decorate([property({ type: String })], AxebowQuickActionCard.prototype, "icon", void 0);
950
+ __decorate([property({ type: String })], AxebowQuickActionCard.prototype, "label", void 0);
951
+ AxebowQuickActionCard = __decorate([customElement("axebow-quick-action-card")], AxebowQuickActionCard);
952
+ //#endregion
953
+ //#region src/components/axebow-header/parts/axebow-quick-actions.ts
954
+ var AxebowQuickActions = class AxebowQuickActions extends LitElement {
955
+ constructor(..._args) {
956
+ super(..._args);
957
+ this.label = "";
958
+ this.actions = [];
959
+ this.open = false;
960
+ this._handleOutsideClick = (e) => {
961
+ if (this.open && !this.contains(e.target)) this.open = false;
962
+ };
963
+ }
964
+ static {
965
+ this.styles = [unsafeCSS(tailwind_default), css`:host { display: inline-block; }`];
966
+ }
967
+ connectedCallback() {
968
+ super.connectedCallback();
969
+ document.addEventListener("click", this._handleOutsideClick);
970
+ }
971
+ disconnectedCallback() {
972
+ super.disconnectedCallback();
973
+ document.removeEventListener("click", this._handleOutsideClick);
974
+ }
975
+ _toggle(e) {
976
+ e.stopPropagation();
977
+ this.open = !this.open;
978
+ }
979
+ _select(action) {
980
+ action.onClick();
981
+ this.open = false;
982
+ }
983
+ render() {
984
+ const row1 = this.actions.slice(0, 3).filter((a) => a.visible);
985
+ const row2 = this.actions.slice(3, 7).filter((a) => a.visible);
826
986
  return html`
827
- <li
828
- class="flex flex-col w-full items-center justify-center cursor-pointer relative group"
829
- @click="${() => item.onClick()}"
830
- @mouseenter="${(e) => this.handleMouseEnter(e, item)}"
831
- @mouseleave="${() => this.handleMouseLeave()}"
832
- title="${item.label}"
833
- >
834
- <div class="flex flex-col items-center justify-center py-3">
835
- <axebow-icon iconName="${item.icon}" size="xl"></axebow-icon>
836
- <span class="text-sm overflow-hidden whitespace-nowrap opacity-100 max-w-full"
837
- >${item.label}${item.openInNewTab ? html`<axebow-icon iconName="open_in_new" size="sm"></axebow-icon>` : ""}</span
987
+ <div class="relative">
988
+ <button
989
+ type="button"
990
+ 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)"}"
991
+ @click=${this._toggle}
992
+ >
993
+ <span
994
+ class="flex flex-col items-center justify-center gap-1 ${this.open ? "text-(--axebow-primary)" : "text-white group-hover:text-(--axebow-primary)"}"
838
995
  >
839
- </div>
996
+ <axebow-icon iconName=${this.open ? "close" : "apps"} iconColor="currentColor" size="xl"></axebow-icon>
997
+ <span
998
+ class="text-xs whitespace-nowrap ${this.open ? "font-semibold" : "font-normal group-hover:font-semibold"}"
999
+ >${this.label}</span
1000
+ >
1001
+ </span>
1002
+ </button>
840
1003
 
841
- <div
842
- class="absolute top-0 right-0 h-full w-2.5 rounded-l-xl bg-(--axebow-base) opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity duration-200"
843
- ></div>
844
- </li>
1004
+ ${this.open ? html`
1005
+ <div
1006
+ class="absolute top-full left-full mt-2 z-2000 flex flex-col gap-1 p-1 bg-white border border-solid border-(--axebow-light-gray) rounded-lg axebow-shadow"
1007
+ >
1008
+ <div class="flex gap-1">
1009
+ ${row1.map((action) => html`
1010
+ <axebow-quick-action-card
1011
+ icon=${action.icon}
1012
+ label=${action.label}
1013
+ @card-click=${() => this._select(action)}
1014
+ ></axebow-quick-action-card>
1015
+ `)}
1016
+ </div>
1017
+ ${row2.length ? html`
1018
+ <div class="h-[0.0625rem] w-full bg-(--axebow-light-gray)"></div>
1019
+ <div class="flex flex-wrap gap-x-1 gap-y-[0.1875rem]">
1020
+ ${row2.map((action) => html`
1021
+ <axebow-quick-action-card
1022
+ icon=${action.icon}
1023
+ label=${action.label}
1024
+ @card-click=${() => this._select(action)}
1025
+ ></axebow-quick-action-card>
1026
+ `)}
1027
+ </div>
1028
+ ` : ""}
1029
+ </div>
1030
+ ` : ""}
1031
+ </div>
845
1032
  `;
846
1033
  }
847
1034
  };
848
- __decorate([property({ type: Array })], AxebowSidebar.prototype, "items", void 0);
849
- __decorate([property({ type: Array })], AxebowSidebar.prototype, "bottomItems", void 0);
850
- __decorate([property({ type: String })], AxebowSidebar.prototype, "selectedKey", void 0);
851
- __decorate([property({ type: Number })], AxebowSidebar.prototype, "paddingBottom", void 0);
852
- __decorate([state()], AxebowSidebar.prototype, "hoveredItem", void 0);
853
- __decorate([state()], AxebowSidebar.prototype, "tooltipTop", void 0);
854
- __decorate([state()], AxebowSidebar.prototype, "tooltipLeft", void 0);
855
- AxebowSidebar = __decorate([customElement("axebow-sidebar")], AxebowSidebar);
1035
+ __decorate([property({ type: String })], AxebowQuickActions.prototype, "label", void 0);
1036
+ __decorate([property({ type: Array })], AxebowQuickActions.prototype, "actions", void 0);
1037
+ __decorate([state()], AxebowQuickActions.prototype, "open", void 0);
1038
+ AxebowQuickActions = __decorate([customElement("axebow-quick-actions")], AxebowQuickActions);
856
1039
  //#endregion
857
- //#region src/components/axebow-footer/axebow-footer.ts
858
- var AxebowFooter = class AxebowFooter extends LitElement {
1040
+ //#region src/components/axebow-header/parts/axebow-header-actions.ts
1041
+ var AxebowHeaderActions = class AxebowHeaderActions extends LitElement {
859
1042
  constructor(..._args) {
860
1043
  super(..._args);
861
- this.links = [];
862
- this.emitFooterHeight = () => {
863
- const rect = this.getBoundingClientRect();
864
- const windowHeight = window.innerHeight;
865
- let visible = 0;
866
- if (rect.top < windowHeight && rect.bottom > 0) visible = Math.min(rect.bottom, windowHeight) - Math.max(rect.top, 0);
867
- visible = Math.max(0, visible);
868
- this.dispatchEvent(new CustomEvent("footer-height-changed", {
869
- detail: { height: visible },
870
- bubbles: true,
871
- composed: true
872
- }));
873
- };
1044
+ this.userName = "";
1045
+ this.profileMenuItems = [];
1046
+ this.logoutLabel = "";
1047
+ this.onLogout = () => {};
1048
+ this.notificationsLabel = "";
1049
+ this.notifications = [];
1050
+ this.actionNeededNotifications = [];
1051
+ this.myNotificationsTabLabel = "";
1052
+ this.actionNeededTabLabel = "";
1053
+ this.noNotificationsLabel = "";
1054
+ this.noUnreadNotificationsLabel = "";
1055
+ this.noActionNotificationsLabel = "";
1056
+ this.showUnreadOnlyLabel = "";
1057
+ this.onLabel = "";
1058
+ this.offLabel = "";
1059
+ this.markAllAsReadLabel = "";
1060
+ this.onMarkAllAsRead = () => {};
1061
+ this.showUnreadOnly = false;
874
1062
  }
875
1063
  static {
876
1064
  this.styles = [unsafeCSS(tailwind_default), css`
877
- :host {
878
- display: block;
879
- width: 100%;
880
- position: relative;
881
- z-index: 1001;
882
- overflow: hidden;
1065
+ sl-dropdown::part(panel) {
1066
+ max-width: 500px;
1067
+ }
1068
+ .notification-description code {
1069
+ display: inline-block;
1070
+ white-space: pre-wrap;
1071
+ word-break: break-all;
1072
+ }
1073
+ .notification-description pre {
1074
+ white-space: pre-wrap;
883
1075
  }
884
1076
  `];
885
1077
  }
886
- connectedCallback() {
887
- super.connectedCallback();
888
- this.resizeObserver = new ResizeObserver(() => {
889
- this.emitFooterHeight();
890
- });
891
- this.resizeObserver.observe(this);
892
- window.addEventListener("resize", this.emitFooterHeight);
893
- window.addEventListener("scroll", this.emitFooterHeight, true);
894
- setTimeout(() => this.emitFooterHeight(), 0);
895
- }
896
- disconnectedCallback() {
897
- super.disconnectedCallback();
898
- this.resizeObserver?.disconnect();
899
- window.removeEventListener("resize", this.emitFooterHeight);
900
- window.removeEventListener("scroll", this.emitFooterHeight, true);
1078
+ handleShowUnreadOnlyChange(e) {
1079
+ this.showUnreadOnly = e.target.checked;
901
1080
  }
902
1081
  render() {
1082
+ const unreadNotifications = this.notifications.filter((n) => n.status === "unread");
1083
+ const notificationsToShow = this.showUnreadOnly ? unreadNotifications : this.notifications;
903
1084
  return html`
904
- <footer
905
- class="text-center text-sm flex w-full bg-(--axebow-primary) text-white justify-center items-center h-8 px-2 md:gap-8 gap-4 flex-wrap"
906
- >
907
- ${this.links.map((link) => html`
1085
+ <div class="flex items-center gap-2 z-10 shrink-0 min-w-0 ml-auto">
1086
+ <sl-dropdown>
1087
+ <div
1088
+ class="relative group w-9 h-9 rounded-lg flex items-center justify-center cursor-pointer transition-colors duration-150 hover:bg-(--axebow-primary)"
1089
+ slot="trigger"
1090
+ >
1091
+ <span class="inline-block transition-transform duration-200 group-hover:rotate-15">
1092
+ <axebow-icon iconName="notifications" iconColor="white"></axebow-icon>
1093
+ </span>
1094
+ ${unreadNotifications.length > 0 ? html`<div
1095
+ class="absolute bottom-0.5 right-0.5 flex items-center justify-center rounded-full bg-(--axebow-error) text-white font-bold z-10 pointer-events-none ${unreadNotifications.length < 10 ? "w-4 h-4 text-sm" : "h-4 min-w-4 px-0.5 text-sm"}"
1096
+ >
1097
+ ${unreadNotifications.length > 99 ? "99+" : unreadNotifications.length}
1098
+ </div>` : ""}
1099
+ <span
1100
+ class="absolute top-1/2 -translate-y-1/2 right-[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"
1101
+ >${this.notificationsLabel}</span
1102
+ >
1103
+ </div>
1104
+ <sl-tab-group class="bg-white rounded-lg w-120 text-base">
1105
+ <sl-tab slot="nav" panel="my_notifications">${this.myNotificationsTabLabel}</sl-tab>
1106
+ <sl-tab slot="nav" panel="action_needed">${this.actionNeededTabLabel}</sl-tab>
1107
+
1108
+ <sl-tab-panel class="bg-gray-100" name="my_notifications">
1109
+ <div class="flex flex-col gap-2 px-4 max-h-[40vh] overflow-auto w-full">
1110
+ ${this.notifications.length === 0 ? html`<div class="flex flex-row gap-4 items-center w-117">
1111
+ <axebow-icon iconName="info"></axebow-icon>
1112
+ <p class="text-black">${this.noNotificationsLabel}</p>
1113
+ </div>` : html`
1114
+ <div class="flex flex-col text-black gap-4">
1115
+ <div class="flex justify-between items-center flex-wrap gap-4">
1116
+ <div class="flex items-center py-1">
1117
+ <p class="mr-4 text-base">${this.showUnreadOnlyLabel}</p>
1118
+ <sl-switch @sl-change=${(e) => this.handleShowUnreadOnlyChange(e)}></sl-switch>
1119
+ <p class="italic text-gray-400 text-base">
1120
+ ${this.showUnreadOnly ? this.onLabel : this.offLabel}
1121
+ </p>
1122
+ </div>
1123
+ <button class="text-gray-500 cursor-pointer text-base" @click=${() => this.onMarkAllAsRead()}>
1124
+ ${this.markAllAsReadLabel}
1125
+ </button>
1126
+ </div>
1127
+ ${this.showUnreadOnly && unreadNotifications.length === 0 ? html`<div class="flex flex-row gap-4 items-center w-117">
1128
+ <axebow-icon iconName="info"></axebow-icon>
1129
+ <p class="text-black">${this.noUnreadNotificationsLabel}</p>
1130
+ </div>` : html` ${notificationsToShow.map((item) => this.renderNotificationCard(item))} `}
1131
+ </div>
1132
+ `}
1133
+ </div>
1134
+ </sl-tab-panel>
1135
+ <sl-tab-panel class="bg-gray-100" name="action_needed">
1136
+ <div class="flex flex-col gap-2 px-4 max-h-[40vh] overflow-auto w-full">
1137
+ ${this.actionNeededNotifications.length === 0 ? html`<div class="flex flex-row gap-4 items-center p-4">
1138
+ <axebow-icon iconName="info"></axebow-icon>
1139
+ <p class="text-black">${this.noActionNotificationsLabel}</p>
1140
+ </div>` : html`
1141
+ <div class="flex flex-col text-black gap-4">
1142
+ ${this.actionNeededNotifications.map((item) => this.renderNotificationCard(item))}
1143
+ </div>
1144
+ `}
1145
+ </div>
1146
+ </sl-tab-panel>
1147
+ </sl-tab-group>
1148
+ </sl-dropdown>
1149
+ <sl-dropdown class="shrink-0">
1150
+ <div
1151
+ slot="trigger"
1152
+ class="group flex items-center gap-2 h-9 px-3 rounded-lg text-white font-semibold cursor-pointer whitespace-nowrap transition-all duration-150 hover:bg-white hover:text-(--axebow-primary) hover:shadow-[0_2px_6px_rgba(13,24,33,0.14)] text-base"
1153
+ >
1154
+ <span class="text-white group-hover:text-(--axebow-primary) transition-colors duration-150">
1155
+ <axebow-icon iconName="account_circle" iconColor="currentColor" size="xl"></axebow-icon>
1156
+ </span>
1157
+ ${this.userName}
1158
+ </div>
1159
+ <sl-menu class="bg-white rounded-lg p-2 min-w-55 axebow-shadow">
1160
+ ${this.profileMenuItems.map((item) => html`
1161
+ <button
1162
+ class="w-full flex text-base items-center justify-between ml-auto px-4 py-2 cursor-pointer rounded-lg hover:bg-gray-200 transition-colors ease-in-out duration-200 hover:text-(--axebow-tertiary)"
1163
+ @click=${() => item.onClick()}
1164
+ >
1165
+ <span class="text-(--axebow-primary)">${item.name}</span>
1166
+ <axebow-icon iconName="arrow_right_alt" size="xl"></axebow-icon>
1167
+ </button>
1168
+ `)}
908
1169
  <button
909
- class="h-7 text-sm p-1 inline-flex items-center gap-1 opacity-70 hover:opacity-100 transition-opacity duration-150 text-(--axebow-anti-flash-white) bg-transparent border-0 cursor-pointer"
910
- @click=${link.onClick}
1170
+ class="ml-auto flex items-center justify-between w-full px-4 py-2 text-(--axebow-error) cursor-pointer rounded-lg text-base"
1171
+ @click=${() => this.onLogout()}
911
1172
  >
912
- ${link.label}
913
- <axebow-icon iconName="open_in_new" iconColor="var(--axebow-anti-flash-white)" size="md"></axebow-icon>
1173
+ <span class="text-(--axebow-error) mt-1">${this.logoutLabel}</span>
1174
+ <axebow-icon iconName="mode_off_on" iconColor="var(--axebow-error)" size="md"></axebow-icon>
914
1175
  </button>
915
- `)}
916
- </footer>
1176
+ </sl-menu>
1177
+ </sl-dropdown>
1178
+ </div>
1179
+ `;
1180
+ }
1181
+ renderNotificationCard(item) {
1182
+ return html`
1183
+ <div
1184
+ class="relative flex gap-2 p-2 w-full rounded-md border-2 border-solid text-base ${item.status === "unread" ? "border-gray-500 hover:border-(--axebow-tertiary) text-gray-600" : "border-gray-300 text-gray-400"} "
1185
+ @click=${() => item.onClick()}
1186
+ >
1187
+ ${item.status === "unread" ? html` <div class="absolute top-[-7px] left-[-7px] h-3.5 w-3.5 rounded-full bg-(--axebow-success)"></div>` : ""}
1188
+ <axebow-icon
1189
+ iconName=${item.icon}
1190
+ size="xl"
1191
+ iconColor=${item.status === "unread" ? item.color : "gray"}
1192
+ ></axebow-icon>
1193
+ <div class="flex flex-1 flex-col gap-1 py-1.25 min-w-0 overflow-hidden">
1194
+ <div class="flex justify-between gap-2">
1195
+ <h4 class="font-semibold wrap-break-word">${item.title}</h4>
1196
+ <span class="ms-auto min-w-fit shrink-0 text-gray-400">${item.date}</span>
1197
+ </div>
1198
+ <div
1199
+ class="notification-description leading-tight max-w-full pe-4 overflow-x-hidden overflow-y-auto max-h-75 wrap-break-word"
1200
+ .innerHTML=${item.description}
1201
+ ></div>
1202
+ ${item.actions && item.actions.length > 0 ? html`
1203
+ <div class="flex gap-4 ml-auto pe-4 flex-wrap">
1204
+ ${item.actions.map((action) => html`
1205
+ <button class="text-sm font-semibold text-[${action.color}] hover:underline" @click=${action.action}>
1206
+ ${action.label}
1207
+ </button>
1208
+ `)}
1209
+ </div>
1210
+ ` : ""}
1211
+ </div>
1212
+ </div>
917
1213
  `;
918
1214
  }
919
1215
  };
920
- __decorate([property({ type: Array })], AxebowFooter.prototype, "links", void 0);
921
- AxebowFooter = __decorate([customElement("axebow-footer")], AxebowFooter);
1216
+ __decorate([property({ type: String })], AxebowHeaderActions.prototype, "userName", void 0);
1217
+ __decorate([property({ type: Array })], AxebowHeaderActions.prototype, "profileMenuItems", void 0);
1218
+ __decorate([property({ type: String })], AxebowHeaderActions.prototype, "logoutLabel", void 0);
1219
+ __decorate([property({ attribute: false })], AxebowHeaderActions.prototype, "onLogout", void 0);
1220
+ __decorate([property({ type: String })], AxebowHeaderActions.prototype, "notificationsLabel", void 0);
1221
+ __decorate([property({ type: Array })], AxebowHeaderActions.prototype, "notifications", void 0);
1222
+ __decorate([property({ type: Array })], AxebowHeaderActions.prototype, "actionNeededNotifications", void 0);
1223
+ __decorate([property({ type: String })], AxebowHeaderActions.prototype, "myNotificationsTabLabel", void 0);
1224
+ __decorate([property({ type: String })], AxebowHeaderActions.prototype, "actionNeededTabLabel", void 0);
1225
+ __decorate([property({ type: String })], AxebowHeaderActions.prototype, "noNotificationsLabel", void 0);
1226
+ __decorate([property({ type: String })], AxebowHeaderActions.prototype, "noUnreadNotificationsLabel", void 0);
1227
+ __decorate([property({ type: String })], AxebowHeaderActions.prototype, "noActionNotificationsLabel", void 0);
1228
+ __decorate([property({ type: String })], AxebowHeaderActions.prototype, "showUnreadOnlyLabel", void 0);
1229
+ __decorate([property({ type: String })], AxebowHeaderActions.prototype, "onLabel", void 0);
1230
+ __decorate([property({ type: String })], AxebowHeaderActions.prototype, "offLabel", void 0);
1231
+ __decorate([property({ type: String })], AxebowHeaderActions.prototype, "markAllAsReadLabel", void 0);
1232
+ __decorate([property({ attribute: false })], AxebowHeaderActions.prototype, "onMarkAllAsRead", void 0);
1233
+ __decorate([state()], AxebowHeaderActions.prototype, "showUnreadOnly", void 0);
1234
+ AxebowHeaderActions = __decorate([customElement("axebow-header-actions")], AxebowHeaderActions);
922
1235
  //#endregion
923
- //#region src/components/axebow-breadcrumb-header/axebow-breadcrumb-header.ts
924
- var AxebowBreadcrumbHeader = class AxebowBreadcrumbHeader extends LitElement {
1236
+ //#region src/components/axebow-header/axebow-header.ts
1237
+ var AxebowHeader = class AxebowHeader extends LitElement {
925
1238
  constructor(..._args) {
926
1239
  super(..._args);
927
- this.padded = false;
928
- this.paddingBottom = "2rem";
929
- this.showHomeBlock = true;
930
- this.onHomeClick = () => {};
931
- this.showSecondaryPages = false;
932
- this.secondaryPages = [];
933
- this.mainPage = "";
934
- this.showRequiredField = false;
935
- this.requiredFieldLabel = "";
1240
+ this.minimal = false;
1241
+ this.logoUrl = "";
1242
+ this.logoAlt = "";
1243
+ this.onLogoClick = () => {};
1244
+ this.userName = "";
1245
+ this.quickActionsLabel = "";
1246
+ this.quickActions = [];
1247
+ this.profileMenuItems = [];
1248
+ this.logoutLabel = "";
1249
+ this.onLogout = () => {};
1250
+ this.notificationsLabel = "";
1251
+ this.notifications = [];
1252
+ this.actionNeededNotifications = [];
1253
+ this.myNotificationsTabLabel = "";
1254
+ this.actionNeededTabLabel = "";
1255
+ this.noNotificationsLabel = "";
1256
+ this.noUnreadNotificationsLabel = "";
1257
+ this.noActionNotificationsLabel = "";
1258
+ this.showUnreadOnlyLabel = "";
1259
+ this.onLabel = "";
1260
+ this.offLabel = "";
1261
+ this.markAllAsReadLabel = "";
1262
+ this.onMarkAllAsRead = () => {};
936
1263
  }
937
1264
  static {
938
- this.styles = [unsafeCSS(tailwind_default), css`
939
- :host {
940
- display: block;
941
- width: 100%;
942
- }
943
- `];
1265
+ this.styles = [unsafeCSS(tailwind_default), axebowTheme];
944
1266
  }
945
1267
  render() {
946
1268
  return html`
947
- <div
948
- class="flex flex-col gap-1 pt-8 ${this.padded ? "ps-8" : ""}"
949
- style="padding-bottom: ${this.paddingBottom};"
950
- >
951
- <div class="flex flex-wrap items-center gap-2 text-xl text-(--axebow-primary)">
952
- ${this.showHomeBlock ? html`
953
- <span class="flex items-center gap-2 cursor-pointer" @click=${() => this.onHomeClick()}>
954
- <axebow-icon
955
- iconName="home"
956
- iconColor="var(--axebow-primary)"
957
- size="xl"
958
- style="display: inline-flex; align-items: center; justify-content: center; transform: scale(0.6665, 0.75);"
959
- ></axebow-icon>
960
- <span class="font-normal">/</span>
961
- </span>
962
- ` : ""}
963
- ${this.showSecondaryPages ? this.secondaryPages.map((page) => html`
964
- <span
965
- class="font-normal ${page.onClick ? "cursor-pointer hover:underline" : ""}"
966
- @click=${page.onClick ? () => page.onClick() : void 0}
967
- >${page.label} /</span
968
- >
969
- `) : ""}
970
- <span class="font-semibold">${this.mainPage}</span>
971
- </div>
972
- ${this.showRequiredField ? html`
973
- <div class="text-sm">
974
- <span class="font-bold text-(--axebow-error)">*</span>
975
- <span class="font-normal text-(--axebow-rich-black)"> ${this.requiredFieldLabel}</span>
1269
+ <header class="relative flex items-center justify-between h-full pe-4 py-2">
1270
+ ${this.minimal ? html`
1271
+ <div
1272
+ class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-5 cursor-pointer hover:opacity-80 transition-opacity duration-200"
1273
+ @click=${() => this.onLogoClick()}
1274
+ >
1275
+ <div class="flex items-center gap-2 text-white">
1276
+ <img src="${this.logoUrl}" alt="${this.logoAlt}" class="h-10" />
1277
+ </div>
976
1278
  </div>
977
- ` : ""}
978
- </div>
1279
+ ` : html`
1280
+ <axebow-quick-actions .label=${this.quickActionsLabel} .actions=${this.quickActions}></axebow-quick-actions>
1281
+
1282
+ <div
1283
+ class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-5 cursor-pointer hover:opacity-80 transition-opacity duration-200"
1284
+ @click=${() => this.onLogoClick()}
1285
+ >
1286
+ <div class="flex items-center gap-2 text-white">
1287
+ <img src="${this.logoUrl}" alt="${this.logoAlt}" class="h-10" />
1288
+ </div>
1289
+ </div>
1290
+
1291
+ <axebow-header-actions
1292
+ .userName=${this.userName}
1293
+ .profileMenuItems=${this.profileMenuItems}
1294
+ .logoutLabel=${this.logoutLabel}
1295
+ .onLogout=${this.onLogout}
1296
+ .notificationsLabel=${this.notificationsLabel}
1297
+ .notifications=${this.notifications}
1298
+ .actionNeededNotifications=${this.actionNeededNotifications}
1299
+ .myNotificationsTabLabel=${this.myNotificationsTabLabel}
1300
+ .actionNeededTabLabel=${this.actionNeededTabLabel}
1301
+ .noNotificationsLabel=${this.noNotificationsLabel}
1302
+ .noUnreadNotificationsLabel=${this.noUnreadNotificationsLabel}
1303
+ .noActionNotificationsLabel=${this.noActionNotificationsLabel}
1304
+ .showUnreadOnlyLabel=${this.showUnreadOnlyLabel}
1305
+ .onLabel=${this.onLabel}
1306
+ .offLabel=${this.offLabel}
1307
+ .markAllAsReadLabel=${this.markAllAsReadLabel}
1308
+ .onMarkAllAsRead=${this.onMarkAllAsRead}
1309
+ ></axebow-header-actions>
1310
+ `}
1311
+ </header>
979
1312
  `;
980
1313
  }
981
1314
  };
982
- __decorate([property({ type: Boolean })], AxebowBreadcrumbHeader.prototype, "padded", void 0);
983
- __decorate([property({ type: String })], AxebowBreadcrumbHeader.prototype, "paddingBottom", void 0);
984
- __decorate([property({ type: Boolean })], AxebowBreadcrumbHeader.prototype, "showHomeBlock", void 0);
985
- __decorate([property({ attribute: false })], AxebowBreadcrumbHeader.prototype, "onHomeClick", void 0);
986
- __decorate([property({ type: Boolean })], AxebowBreadcrumbHeader.prototype, "showSecondaryPages", void 0);
987
- __decorate([property({ type: Array })], AxebowBreadcrumbHeader.prototype, "secondaryPages", void 0);
988
- __decorate([property({ type: String })], AxebowBreadcrumbHeader.prototype, "mainPage", void 0);
989
- __decorate([property({ type: Boolean })], AxebowBreadcrumbHeader.prototype, "showRequiredField", void 0);
990
- __decorate([property({ type: String })], AxebowBreadcrumbHeader.prototype, "requiredFieldLabel", void 0);
991
- AxebowBreadcrumbHeader = __decorate([customElement("axebow-breadcrumb-header")], AxebowBreadcrumbHeader);
992
- //#endregion
993
- //#region src/components/axebow-button/axebow-button.ts
994
- var AxebowButton = class AxebowButton extends LitElement {
995
- constructor() {
996
- super();
997
- this.variant = "default";
998
- this.size = "medium";
999
- this.outline = false;
1000
- this.pill = false;
1001
- this.circle = false;
1002
- this.disabled = false;
1003
- this.loading = false;
1004
- this.caret = false;
1005
- this.type = "button";
1006
- this.hoverStyle = "simple";
1007
- this._guardDisabledClick = (event) => {
1008
- if (this.disabled || this.loading) {
1009
- event.preventDefault();
1010
- event.stopPropagation();
1011
- }
1012
- };
1013
- this.addEventListener("click", this._guardDisabledClick, { capture: true });
1014
- }
1015
- updated(changed) {
1016
- if (changed.has("fixedWidth")) if (this.fixedWidth) this.style.setProperty("--axebow-button-width", this.fixedWidth);
1017
- else this.style.removeProperty("--axebow-button-width");
1018
- if (changed.has("fixedHeight")) if (this.fixedHeight) this.style.setProperty("--axebow-button-height", this.fixedHeight);
1019
- else this.style.removeProperty("--axebow-button-height");
1020
- this._syncPaddingVar(changed, "paddingTop", "--axebow-button-padding-top");
1021
- this._syncPaddingVar(changed, "paddingRight", "--axebow-button-padding-right");
1022
- this._syncPaddingVar(changed, "paddingBottom", "--axebow-button-padding-bottom");
1023
- this._syncPaddingVar(changed, "paddingLeft", "--axebow-button-padding-left");
1024
- }
1025
- _syncPaddingVar(changed, prop, cssVar) {
1026
- if (!changed.has(prop)) return;
1027
- const value = this[prop];
1028
- if (value) this.style.setProperty(cssVar, value);
1029
- else this.style.removeProperty(cssVar);
1315
+ __decorate([property({
1316
+ type: Boolean,
1317
+ reflect: true
1318
+ })], AxebowHeader.prototype, "minimal", void 0);
1319
+ __decorate([property({ type: String })], AxebowHeader.prototype, "logoUrl", void 0);
1320
+ __decorate([property({ type: String })], AxebowHeader.prototype, "logoAlt", void 0);
1321
+ __decorate([property({ attribute: false })], AxebowHeader.prototype, "onLogoClick", void 0);
1322
+ __decorate([property({ type: String })], AxebowHeader.prototype, "userName", void 0);
1323
+ __decorate([property({ type: String })], AxebowHeader.prototype, "quickActionsLabel", void 0);
1324
+ __decorate([property({ type: Array })], AxebowHeader.prototype, "quickActions", void 0);
1325
+ __decorate([property({ type: Array })], AxebowHeader.prototype, "profileMenuItems", void 0);
1326
+ __decorate([property({ type: String })], AxebowHeader.prototype, "logoutLabel", void 0);
1327
+ __decorate([property({ attribute: false })], AxebowHeader.prototype, "onLogout", void 0);
1328
+ __decorate([property({ type: String })], AxebowHeader.prototype, "notificationsLabel", void 0);
1329
+ __decorate([property({ type: Array })], AxebowHeader.prototype, "notifications", void 0);
1330
+ __decorate([property({ type: Array })], AxebowHeader.prototype, "actionNeededNotifications", void 0);
1331
+ __decorate([property({ type: String })], AxebowHeader.prototype, "myNotificationsTabLabel", void 0);
1332
+ __decorate([property({ type: String })], AxebowHeader.prototype, "actionNeededTabLabel", void 0);
1333
+ __decorate([property({ type: String })], AxebowHeader.prototype, "noNotificationsLabel", void 0);
1334
+ __decorate([property({ type: String })], AxebowHeader.prototype, "noUnreadNotificationsLabel", void 0);
1335
+ __decorate([property({ type: String })], AxebowHeader.prototype, "noActionNotificationsLabel", void 0);
1336
+ __decorate([property({ type: String })], AxebowHeader.prototype, "showUnreadOnlyLabel", void 0);
1337
+ __decorate([property({ type: String })], AxebowHeader.prototype, "onLabel", void 0);
1338
+ __decorate([property({ type: String })], AxebowHeader.prototype, "offLabel", void 0);
1339
+ __decorate([property({ type: String })], AxebowHeader.prototype, "markAllAsReadLabel", void 0);
1340
+ __decorate([property({ attribute: false })], AxebowHeader.prototype, "onMarkAllAsRead", void 0);
1341
+ AxebowHeader = __decorate([customElement("axebow-header")], AxebowHeader);
1342
+ //#endregion
1343
+ //#region src/components/axebow-sidebar/axebow-sidebar.ts
1344
+ var AxebowSidebar = class AxebowSidebar extends LitElement {
1345
+ constructor(..._args) {
1346
+ super(..._args);
1347
+ this.items = [];
1348
+ this.bottomItems = [];
1349
+ this.selectedKey = null;
1350
+ this.paddingBottom = 10;
1351
+ this.hoveredItem = null;
1352
+ this.tooltipTop = 0;
1353
+ this.tooltipLeft = 0;
1030
1354
  }
1031
1355
  static {
1032
1356
  this.styles = [unsafeCSS(tailwind_default), css`
1033
1357
  :host {
1034
- display: inline-block;
1035
- }
1036
- sl-button {
1037
- width: 100%;
1038
- }
1039
- sl-button::part(base) {
1040
- height: var(--axebow-button-height, 2.5rem);
1041
- min-height: var(--axebow-button-height, 2.5rem);
1042
- line-height: calc(var(--axebow-button-height, 2.5rem) - var(--sl-input-border-width) * 2);
1043
- width: var(--axebow-button-width, auto);
1044
- min-width: var(--axebow-button-width, 9.375rem);
1045
- }
1046
-
1047
- /**
1048
- * The label part carries sl-button's own internal left/right spacing
1049
- * via a higher-specificity internal rule
1050
- * (.button--has-label.button--{size} .button__label), which an
1051
- * external ::part() override of equal-or-lower specificity cannot
1052
- * beat on its own - !important is required here, not optional
1053
- * styling preference. Each size's fallback points at shoelace's own
1054
- * token for that size, so unconfigured buttons render byte-for-byte
1055
- * as before - only an explicit padding* property changes anything.
1056
- */
1057
- sl-button[size='small']::part(label) {
1058
- padding-top: var(--axebow-button-padding-top, 0) !important;
1059
- padding-right: var(--axebow-button-padding-right, var(--sl-spacing-small)) !important;
1060
- padding-bottom: var(--axebow-button-padding-bottom, 0) !important;
1061
- padding-left: var(--axebow-button-padding-left, var(--sl-spacing-small)) !important;
1062
- }
1063
- sl-button[size='medium']::part(label) {
1064
- padding-top: var(--axebow-button-padding-top, 0) !important;
1065
- padding-right: var(--axebow-button-padding-right, var(--sl-spacing-medium)) !important;
1066
- padding-bottom: var(--axebow-button-padding-bottom, 0) !important;
1067
- padding-left: var(--axebow-button-padding-left, var(--sl-spacing-medium)) !important;
1068
- }
1069
- sl-button[size='large']::part(label) {
1070
- padding-top: var(--axebow-button-padding-top, 0) !important;
1071
- padding-right: var(--axebow-button-padding-right, var(--sl-spacing-large)) !important;
1072
- padding-bottom: var(--axebow-button-padding-bottom, 0) !important;
1073
- padding-left: var(--axebow-button-padding-left, var(--sl-spacing-large)) !important;
1074
- }
1075
-
1076
- /**
1077
- * Hover is always a plain recolor to axebow-gray, no matter the
1078
- * variant - nothing else about the button's structure changes.
1079
- */
1080
-
1081
- /** Default / neutral button */
1082
- sl-button[variant='default']:hover::part(base),
1083
- sl-button[variant='neutral']:hover::part(base) {
1084
- color: var(--axebow-gray);
1085
- border-color: var(--axebow-gray);
1086
- outline-color: var(--axebow-gray);
1087
- }
1088
-
1089
- /** Primary button */
1090
- sl-button[variant='primary']::part(base) {
1091
- background: var(--axebow-tertiary);
1092
- color: white;
1093
- border-color: transparent;
1094
- outline-color: var(--axebow-tertiary);
1095
- }
1096
- sl-button[variant='primary']:hover::part(base) {
1097
- background: var(--axebow-gray);
1098
- outline-color: var(--axebow-gray);
1099
- }
1100
-
1101
- /** Outlined primary button */
1102
- sl-button[variant='primary'][outline]::part(base) {
1103
- background: transparent;
1104
- color: var(--axebow-tertiary);
1105
- border-color: var(--axebow-tertiary);
1106
- outline-color: var(--axebow-tertiary);
1107
- }
1108
- sl-button[variant='primary'][outline]:hover::part(base) {
1109
- color: var(--axebow-gray);
1110
- border-color: var(--axebow-gray);
1111
- outline-color: var(--axebow-gray);
1112
- }
1113
-
1114
- /** Text button */
1115
- sl-button[variant='text']::part(base) {
1116
- outline-color: var(--axebow-tertiary);
1117
- }
1118
- sl-button[variant='text']::part(label) {
1119
- color: var(--axebow-tertiary);
1120
- }
1121
- sl-button[variant='text']:hover::part(base) {
1122
- outline-color: var(--axebow-gray);
1123
- border-radius: 0.375rem;
1124
- }
1125
- sl-button[variant='text']:hover::part(label) {
1126
- color: var(--axebow-gray);
1127
- }
1128
-
1129
- /** Success button */
1130
- sl-button[variant='success']::part(base) {
1131
- background: var(--axebow-success);
1132
- border-color: var(--axebow-success);
1133
- color: white;
1134
- border-radius: 0.5rem;
1135
- outline-color: var(--axebow-success);
1136
- }
1137
- sl-button[variant='success']:hover::part(base) {
1138
- background: var(--axebow-gray);
1139
- border-color: var(--axebow-gray);
1140
- outline-color: var(--axebow-gray);
1141
- }
1142
-
1143
- /** Danger button */
1144
- sl-button[variant='danger']::part(base) {
1145
- background: var(--axebow-error);
1146
- border-color: var(--axebow-error);
1147
- color: white;
1148
- outline-color: var(--axebow-error);
1149
- }
1150
- sl-button[variant='danger']:hover::part(base) {
1151
- background: var(--axebow-gray);
1152
- border-color: var(--axebow-gray);
1153
- outline-color: var(--axebow-gray);
1154
- }
1155
-
1156
- /** Danger outlined */
1157
- sl-button[variant='danger'][outline]::part(base) {
1158
- background: transparent;
1159
- color: var(--axebow-error);
1160
- border-color: var(--axebow-error);
1161
- outline-color: var(--axebow-error);
1162
- }
1163
- sl-button[variant='danger'][outline]:hover::part(base) {
1164
- color: var(--axebow-gray);
1165
- border-color: var(--axebow-gray);
1166
- outline-color: var(--axebow-gray);
1167
- }
1168
-
1169
- /** Danger text (host class) */
1170
- :host(.axebow-red-button-text) sl-button::part(base) {
1171
- outline-color: var(--axebow-error);
1172
- }
1173
- :host(.axebow-red-button-text) sl-button::part(label) {
1174
- color: var(--axebow-error);
1175
- }
1176
- :host(.axebow-red-button-text) sl-button:hover::part(base) {
1177
- outline-color: var(--axebow-gray);
1178
- }
1179
- :host(.axebow-red-button-text) sl-button:hover::part(label) {
1180
- color: var(--axebow-gray);
1181
- }
1182
-
1183
- /** Warning button (host class) */
1184
- :host(.axebow-warning-button-bg) sl-button::part(base) {
1185
- color: var(--axebow-tertiary);
1186
- border-color: var(--axebow-tertiary);
1187
- outline-color: var(--axebow-tertiary);
1188
- }
1189
- :host(.axebow-warning-button-bg) sl-button:hover::part(base) {
1190
- color: var(--axebow-gray);
1191
- border-color: var(--axebow-gray);
1192
- outline-color: var(--axebow-gray);
1193
- }
1194
-
1195
- /**
1196
- * Boxed hover look shared with axebow-more-actions, opt-in via
1197
- * hoverStyle="border". Declared last so it wins over every
1198
- * variant's own hover rule above, regardless of which variant
1199
- * it's combined with.
1200
- */
1201
- sl-button[hoverstyle='border']:hover::part(base) {
1202
- background-color: var(--axebow-anti-flash-white) !important;
1203
- border-radius: 0.5rem !important;
1204
- outline-color: transparent !important;
1205
- border-color: transparent !important;
1206
- }
1207
- sl-button[hoverstyle='border']:hover::part(label) {
1208
- color: var(--axebow-gray) !important;
1358
+ position: relative;
1359
+ width: 4rem;
1209
1360
  }
1210
1361
  `];
1211
1362
  }
1212
- render() {
1363
+ handleMouseEnter(event, item) {
1364
+ const rect = event.currentTarget.getBoundingClientRect();
1365
+ this.tooltipTop = rect.top + 10;
1366
+ this.tooltipLeft = rect.right - 8;
1367
+ this.hoveredItem = item;
1368
+ }
1369
+ handleMouseLeave() {
1370
+ this.hoveredItem = null;
1371
+ }
1372
+ _isSelected(item) {
1373
+ return this.selectedKey === item.key || !!item.isRoot && this.selectedKey === null;
1374
+ }
1375
+ render() {
1376
+ return html`
1377
+ <nav
1378
+ style="padding-bottom: ${this.paddingBottom}px;"
1379
+ class="h-full flex flex-col justify-between overflow-x-hidden pt-2"
1380
+ >
1381
+ <ul class="flex flex-col gap-0 w-full pb-4">
1382
+ ${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)))}
1383
+ </ul>
1384
+ <ul>
1385
+ ${this.bottomItems.map((item) => this._renderBottomItem(item))}
1386
+ </ul>
1387
+ </nav>
1388
+
1389
+ ${this.hoveredItem ? html`
1390
+ <div
1391
+ class="fixed ps-4 flex items-center pointer-events-none z-9999"
1392
+ style="left: ${this.tooltipLeft}px; top: ${this.tooltipTop}px; height: 3rem;"
1393
+ >
1394
+ <span
1395
+ class="flex items-center gap-1 px-2 py-1 bg-white rounded-lg text-base border border-solid border-(--axebow-gray) shadow-lg"
1396
+ >${this.hoveredItem.label}${this.hoveredItem.openInNewTab ? html`<axebow-icon iconName="open_in_new" size="sm"></axebow-icon>` : ""}</span
1397
+ >
1398
+ </div>
1399
+ ` : ""}
1400
+ `;
1401
+ }
1402
+ _renderNavItem(item, selected) {
1403
+ return html`
1404
+ <li
1405
+ 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"
1406
+ @click="${() => item.onClick()}"
1407
+ @mouseenter="${(e) => this.handleMouseEnter(e, item)}"
1408
+ @mouseleave="${() => this.handleMouseLeave()}"
1409
+ title="${item.label}"
1410
+ >
1411
+ <div class="flex flex-col items-center justify-center">
1412
+ <axebow-icon iconName="${item.icon}" size="xl"></axebow-icon>
1413
+ <span class="text-xs overflow-hidden whitespace-nowrap opacity-100 max-w-full">${item.label}</span>
1414
+ </div>
1415
+
1416
+ ${!selected ? html`
1417
+ <div
1418
+ class="absolute top-0 right-0 h-full w-2.5 rounded-l-xl bg-(--axebow-base) opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity duration-200"
1419
+ ></div>
1420
+ ` : ""}
1421
+ </li>
1422
+ `;
1423
+ }
1424
+ _renderBottomItem(item) {
1213
1425
  return html`
1214
- <sl-button
1215
- exportparts="base, label, prefix, suffix, caret"
1216
- hoverstyle=${this.hoverStyle}
1217
- variant=${this.variant}
1218
- size=${this.size}
1219
- ?outline=${this.outline}
1220
- ?pill=${this.pill}
1221
- ?circle=${this.circle}
1222
- ?disabled=${this.disabled}
1223
- ?loading=${this.loading}
1224
- ?caret=${this.caret}
1225
- type=${this.type}
1226
- href=${ifDefined(this.href)}
1227
- target=${ifDefined(this.target)}
1228
- name=${ifDefined(this.name)}
1229
- value=${ifDefined(this.value)}
1426
+ <li
1427
+ class="flex flex-col w-full items-center justify-center cursor-pointer relative group"
1428
+ @click="${() => item.onClick()}"
1429
+ @mouseenter="${(e) => this.handleMouseEnter(e, item)}"
1430
+ @mouseleave="${() => this.handleMouseLeave()}"
1431
+ title="${item.label}"
1230
1432
  >
1231
- <slot name="prefix" slot="prefix"></slot>
1232
- <slot></slot>
1233
- <slot name="suffix" slot="suffix"></slot>
1234
- </sl-button>
1433
+ <div class="flex flex-col items-center justify-center py-3">
1434
+ <axebow-icon iconName="${item.icon}" size="xl"></axebow-icon>
1435
+ <span class="text-sm overflow-hidden whitespace-nowrap opacity-100 max-w-full"
1436
+ >${item.label}${item.openInNewTab ? html`<axebow-icon iconName="open_in_new" size="sm"></axebow-icon>` : ""}</span
1437
+ >
1438
+ </div>
1439
+
1440
+ <div
1441
+ class="absolute top-0 right-0 h-full w-2.5 rounded-l-xl bg-(--axebow-base) opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity duration-200"
1442
+ ></div>
1443
+ </li>
1235
1444
  `;
1236
1445
  }
1237
1446
  };
1238
- __decorate([property({
1239
- type: String,
1240
- reflect: true
1241
- })], AxebowButton.prototype, "variant", void 0);
1242
- __decorate([property({
1243
- type: String,
1244
- reflect: true
1245
- })], AxebowButton.prototype, "size", void 0);
1246
- __decorate([property({
1247
- type: Boolean,
1248
- reflect: true
1249
- })], AxebowButton.prototype, "outline", void 0);
1250
- __decorate([property({
1251
- type: Boolean,
1252
- reflect: true
1253
- })], AxebowButton.prototype, "pill", void 0);
1254
- __decorate([property({
1255
- type: Boolean,
1256
- reflect: true
1257
- })], AxebowButton.prototype, "circle", void 0);
1258
- __decorate([property({
1259
- type: Boolean,
1260
- attribute: false
1261
- })], AxebowButton.prototype, "disabled", void 0);
1262
- __decorate([property({
1263
- type: Boolean,
1264
- reflect: true
1265
- })], AxebowButton.prototype, "loading", void 0);
1266
- __decorate([property({
1267
- type: Boolean,
1268
- reflect: true
1269
- })], AxebowButton.prototype, "caret", void 0);
1270
- __decorate([property({ type: String })], AxebowButton.prototype, "type", void 0);
1271
- __decorate([property({ type: String })], AxebowButton.prototype, "href", void 0);
1272
- __decorate([property({ type: String })], AxebowButton.prototype, "target", void 0);
1273
- __decorate([property({ type: String })], AxebowButton.prototype, "name", void 0);
1274
- __decorate([property({ type: String })], AxebowButton.prototype, "value", void 0);
1275
- __decorate([property({ type: String })], AxebowButton.prototype, "fixedWidth", void 0);
1276
- __decorate([property({ type: String })], AxebowButton.prototype, "fixedHeight", void 0);
1277
- __decorate([property({ type: String })], AxebowButton.prototype, "paddingTop", void 0);
1278
- __decorate([property({ type: String })], AxebowButton.prototype, "paddingRight", void 0);
1279
- __decorate([property({ type: String })], AxebowButton.prototype, "paddingBottom", void 0);
1280
- __decorate([property({ type: String })], AxebowButton.prototype, "paddingLeft", void 0);
1281
- __decorate([property({ type: String })], AxebowButton.prototype, "hoverStyle", void 0);
1282
- AxebowButton = __decorate([customElement("axebow-button")], AxebowButton);
1447
+ __decorate([property({ type: Array })], AxebowSidebar.prototype, "items", void 0);
1448
+ __decorate([property({ type: Array })], AxebowSidebar.prototype, "bottomItems", void 0);
1449
+ __decorate([property({ type: String })], AxebowSidebar.prototype, "selectedKey", void 0);
1450
+ __decorate([property({ type: Number })], AxebowSidebar.prototype, "paddingBottom", void 0);
1451
+ __decorate([state()], AxebowSidebar.prototype, "hoveredItem", void 0);
1452
+ __decorate([state()], AxebowSidebar.prototype, "tooltipTop", void 0);
1453
+ __decorate([state()], AxebowSidebar.prototype, "tooltipLeft", void 0);
1454
+ AxebowSidebar = __decorate([customElement("axebow-sidebar")], AxebowSidebar);
1283
1455
  //#endregion
1284
- //#region src/components/axebow-search/axebow-search.ts
1285
- var AxebowSearch = class AxebowSearch extends LitElement {
1456
+ //#region src/components/axebow-footer/axebow-footer.ts
1457
+ var AxebowFooter = class AxebowFooter extends LitElement {
1286
1458
  constructor(..._args) {
1287
1459
  super(..._args);
1288
- this.value = "";
1289
- this.placeholder = "";
1460
+ this.links = [];
1461
+ this.emitFooterHeight = () => {
1462
+ const rect = this.getBoundingClientRect();
1463
+ const windowHeight = window.innerHeight;
1464
+ let visible = 0;
1465
+ if (rect.top < windowHeight && rect.bottom > 0) visible = Math.min(rect.bottom, windowHeight) - Math.max(rect.top, 0);
1466
+ visible = Math.max(0, visible);
1467
+ this.dispatchEvent(new CustomEvent("footer-height-changed", {
1468
+ detail: { height: visible },
1469
+ bubbles: true,
1470
+ composed: true
1471
+ }));
1472
+ };
1290
1473
  }
1291
1474
  static {
1292
1475
  this.styles = [unsafeCSS(tailwind_default), css`
1293
1476
  :host {
1294
- display: inline-block;
1295
- }
1296
- sl-input {
1297
- width: 20rem;
1298
- --sl-focus-ring-width: 0px;
1299
- }
1300
- :host(.axebow-fixed-width) sl-input {
1301
- width: var(--axebow-search-width);
1302
- }
1303
- sl-input::part(base) {
1304
- height: 2.5rem;
1305
- border: 1px solid #dbdde4;
1306
- border-radius: 0.375rem;
1307
- box-shadow: none;
1308
- }
1309
- sl-input:focus-within::part(base) {
1310
- border-color: var(--axebow-tertiary);
1311
- }
1312
- sl-input::part(input) {
1313
- color: var(--axebow-rich-black, #0d1821);
1314
- font-size: 0.875rem;
1315
- }
1316
- sl-input::part(prefix) {
1317
- padding-inline-start: 0.75rem;
1477
+ display: block;
1478
+ width: 100%;
1479
+ position: relative;
1480
+ z-index: 1001;
1481
+ overflow: hidden;
1318
1482
  }
1319
1483
  `];
1320
1484
  }
1321
- updated(changed) {
1322
- super.updated(changed);
1323
- if (changed.has("width")) if (this.width) {
1324
- this.style.setProperty("--axebow-search-width", this.width);
1325
- this.classList.add("axebow-fixed-width");
1326
- } else {
1327
- this.style.removeProperty("--axebow-search-width");
1328
- this.classList.remove("axebow-fixed-width");
1329
- }
1485
+ connectedCallback() {
1486
+ super.connectedCallback();
1487
+ this.resizeObserver = new ResizeObserver(() => {
1488
+ this.emitFooterHeight();
1489
+ });
1490
+ this.resizeObserver.observe(this);
1491
+ window.addEventListener("resize", this.emitFooterHeight);
1492
+ window.addEventListener("scroll", this.emitFooterHeight, true);
1493
+ setTimeout(() => this.emitFooterHeight(), 0);
1330
1494
  }
1331
- _emitChange(value) {
1332
- this.dispatchEvent(new CustomEvent("search-change", {
1333
- detail: { value },
1334
- bubbles: true,
1335
- composed: true
1336
- }));
1495
+ disconnectedCallback() {
1496
+ super.disconnectedCallback();
1497
+ this.resizeObserver?.disconnect();
1498
+ window.removeEventListener("resize", this.emitFooterHeight);
1499
+ window.removeEventListener("scroll", this.emitFooterHeight, true);
1337
1500
  }
1338
- _onInput(e) {
1339
- this._emitChange(e.target.value);
1501
+ render() {
1502
+ return html`
1503
+ <footer
1504
+ class="text-center text-sm flex w-full bg-(--axebow-primary) text-white justify-center items-center h-8 px-2 md:gap-8 gap-4 flex-wrap"
1505
+ >
1506
+ ${this.links.map((link) => html`
1507
+ <button
1508
+ class="h-7 text-sm p-1 inline-flex items-center gap-1 opacity-70 hover:opacity-100 transition-opacity duration-150 text-(--axebow-anti-flash-white) bg-transparent border-0 cursor-pointer"
1509
+ @click=${link.onClick}
1510
+ >
1511
+ ${link.label}
1512
+ <axebow-icon iconName="open_in_new" iconColor="var(--axebow-anti-flash-white)" size="md"></axebow-icon>
1513
+ </button>
1514
+ `)}
1515
+ </footer>
1516
+ `;
1340
1517
  }
1341
- _onClear() {
1342
- this._emitChange("");
1518
+ };
1519
+ __decorate([property({ type: Array })], AxebowFooter.prototype, "links", void 0);
1520
+ AxebowFooter = __decorate([customElement("axebow-footer")], AxebowFooter);
1521
+ //#endregion
1522
+ //#region src/components/axebow-breadcrumb-header/axebow-breadcrumb-header.ts
1523
+ var AxebowBreadcrumbHeader = class AxebowBreadcrumbHeader extends LitElement {
1524
+ constructor(..._args) {
1525
+ super(..._args);
1526
+ this.padded = false;
1527
+ this.paddingBottom = "2rem";
1528
+ this.showHomeBlock = true;
1529
+ this.onHomeClick = () => {};
1530
+ this.showSecondaryPages = false;
1531
+ this.secondaryPages = [];
1532
+ this.mainPage = "";
1533
+ this.showRequiredField = false;
1534
+ this.requiredFieldLabel = "";
1535
+ }
1536
+ static {
1537
+ this.styles = [unsafeCSS(tailwind_default), css`
1538
+ :host {
1539
+ display: block;
1540
+ width: 100%;
1541
+ }
1542
+ `];
1343
1543
  }
1344
1544
  render() {
1345
1545
  return html`
1346
- <sl-input placeholder=${this.placeholder} .value=${this.value} clearable @sl-input=${this._onInput} @sl-clear=${this._onClear}>
1347
- <axebow-icon slot="prefix" iconName="search" iconColor="var(--axebow-gray)" size="md"></axebow-icon>
1348
- </sl-input>
1546
+ <div
1547
+ class="flex flex-col gap-1 pt-8 ${this.padded ? "ps-8" : ""}"
1548
+ style="padding-bottom: ${this.paddingBottom};"
1549
+ >
1550
+ <div class="flex flex-wrap items-center gap-2 text-xl text-(--axebow-primary)">
1551
+ ${this.showHomeBlock ? html`
1552
+ <span class="flex items-center gap-2 cursor-pointer" @click=${() => this.onHomeClick()}>
1553
+ <axebow-icon
1554
+ iconName="home"
1555
+ iconColor="var(--axebow-primary)"
1556
+ size="xl"
1557
+ style="display: inline-flex; align-items: center; justify-content: center;"
1558
+ ></axebow-icon>
1559
+ <span class="font-normal">/</span>
1560
+ </span>
1561
+ ` : ""}
1562
+ ${this.showSecondaryPages ? this.secondaryPages.map((page) => html`
1563
+ <span
1564
+ class="font-normal ${page.onClick ? "cursor-pointer hover:underline" : ""}"
1565
+ @click=${page.onClick ? () => page.onClick() : void 0}
1566
+ >${page.label} /</span
1567
+ >
1568
+ `) : ""}
1569
+ <span class="font-semibold">${this.mainPage}</span>
1570
+ </div>
1571
+ ${this.showRequiredField ? html`
1572
+ <div class="text-sm">
1573
+ <span class="font-bold text-(--axebow-error)">*</span>
1574
+ <span class="font-normal text-(--axebow-rich-black)"> ${this.requiredFieldLabel}</span>
1575
+ </div>
1576
+ ` : ""}
1577
+ </div>
1349
1578
  `;
1350
1579
  }
1351
1580
  };
1352
- __decorate([property({ type: String })], AxebowSearch.prototype, "value", void 0);
1353
- __decorate([property({ type: String })], AxebowSearch.prototype, "placeholder", void 0);
1354
- __decorate([property({ type: String })], AxebowSearch.prototype, "width", void 0);
1355
- AxebowSearch = __decorate([customElement("axebow-search")], AxebowSearch);
1581
+ __decorate([property({ type: Boolean })], AxebowBreadcrumbHeader.prototype, "padded", void 0);
1582
+ __decorate([property({ type: String })], AxebowBreadcrumbHeader.prototype, "paddingBottom", void 0);
1583
+ __decorate([property({ type: Boolean })], AxebowBreadcrumbHeader.prototype, "showHomeBlock", void 0);
1584
+ __decorate([property({ attribute: false })], AxebowBreadcrumbHeader.prototype, "onHomeClick", void 0);
1585
+ __decorate([property({ type: Boolean })], AxebowBreadcrumbHeader.prototype, "showSecondaryPages", void 0);
1586
+ __decorate([property({ type: Array })], AxebowBreadcrumbHeader.prototype, "secondaryPages", void 0);
1587
+ __decorate([property({ type: String })], AxebowBreadcrumbHeader.prototype, "mainPage", void 0);
1588
+ __decorate([property({ type: Boolean })], AxebowBreadcrumbHeader.prototype, "showRequiredField", void 0);
1589
+ __decorate([property({ type: String })], AxebowBreadcrumbHeader.prototype, "requiredFieldLabel", void 0);
1590
+ AxebowBreadcrumbHeader = __decorate([customElement("axebow-breadcrumb-header")], AxebowBreadcrumbHeader);
1356
1591
  //#endregion
1357
1592
  //#region src/components/axebow-input/axebow-input-base.ts
1358
1593
  var AxebowInputBase = class extends LitElement {
@@ -7673,6 +7908,7 @@ var AxebowTabSelector = class AxebowTabSelector extends LitElement {
7673
7908
  super(..._args);
7674
7909
  this.disabled = false;
7675
7910
  this.bordered = false;
7911
+ this.variant = "forms-tab";
7676
7912
  this._activeTab = 0;
7677
7913
  this._tabCount = 0;
7678
7914
  this._tabDisabled = [];
@@ -7686,6 +7922,8 @@ var AxebowTabSelector = class AxebowTabSelector extends LitElement {
7686
7922
  button {
7687
7923
  font-family: inherit;
7688
7924
  }
7925
+
7926
+ /* forms-tab hover underline */
7689
7927
  button.tab-inactive:not(:disabled) {
7690
7928
  position: relative;
7691
7929
  }
@@ -7699,6 +7937,7 @@ var AxebowTabSelector = class AxebowTabSelector extends LitElement {
7699
7937
  background-color: var(--axebow-tertiary);
7700
7938
  border-radius: 1px;
7701
7939
  }
7940
+
7702
7941
  :host([disabled]) {
7703
7942
  opacity: 0.6;
7704
7943
  pointer-events: none;
@@ -7747,8 +7986,7 @@ var AxebowTabSelector = class AxebowTabSelector extends LitElement {
7747
7986
  composed: true
7748
7987
  }));
7749
7988
  }
7750
- render() {
7751
- const tabs = Array.from({ length: this._tabCount }, (_, i) => i);
7989
+ _renderFormsTab(tabs) {
7752
7990
  const isFirstActive = this._activeTab === 0;
7753
7991
  const isLastActive = this._activeTab === this._tabCount - 1;
7754
7992
  return html`
@@ -7789,6 +8027,38 @@ var AxebowTabSelector = class AxebowTabSelector extends LitElement {
7789
8027
  </div>
7790
8028
  `;
7791
8029
  }
8030
+ _renderSectionsTab(tabs) {
8031
+ return html`
8032
+ <div class="flex w-full">
8033
+ ${tabs.map((i) => {
8034
+ const active = this._activeTab === i;
8035
+ const isDisabled = this._tabDisabled[i];
8036
+ return html`
8037
+ <button
8038
+ class="flex-1 h-8 flex items-center justify-center text-sm font-medium bg-transparent
8039
+ transition-colors duration-200
8040
+ focus-visible:outline-2 focus-visible:outline-(--axebow-tertiary)
8041
+ ${isDisabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
8042
+ ${active ? "text-(--axebow-tertiary) border-b-2 border-solid border-(--axebow-tertiary) border-t-0 border-l-0 border-r-0" : "text-(--axebow-secondary) border-b border-solid border-(--axebow-light-gray) border-t-0 border-l-0 border-r-0 hover:text-(--axebow-tertiary)"}"
8043
+ ?disabled=${isDisabled}
8044
+ @click=${() => this._selectTab(i)}
8045
+ >
8046
+ <slot name="tab-label-${i}"></slot>
8047
+ </button>
8048
+ `;
8049
+ })}
8050
+ </div>
8051
+ ${tabs.map((i) => html`
8052
+ <div class="${this._activeTab === i ? "block" : "hidden"}">
8053
+ <slot name="tab-panel-${i}"></slot>
8054
+ </div>
8055
+ `)}
8056
+ `;
8057
+ }
8058
+ render() {
8059
+ const tabs = Array.from({ length: this._tabCount }, (_, i) => i);
8060
+ return this.variant === "sections-tab" ? this._renderSectionsTab(tabs) : this._renderFormsTab(tabs);
8061
+ }
7792
8062
  };
7793
8063
  __decorate([property({
7794
8064
  type: Boolean,
@@ -7796,6 +8066,7 @@ __decorate([property({
7796
8066
  })], AxebowTabSelector.prototype, "disabled", void 0);
7797
8067
  __decorate([property({ type: Number })], AxebowTabSelector.prototype, "activeTab", void 0);
7798
8068
  __decorate([property({ type: Boolean })], AxebowTabSelector.prototype, "bordered", void 0);
8069
+ __decorate([property({ type: String })], AxebowTabSelector.prototype, "variant", void 0);
7799
8070
  __decorate([state()], AxebowTabSelector.prototype, "_activeTab", void 0);
7800
8071
  __decorate([state()], AxebowTabSelector.prototype, "_tabCount", void 0);
7801
8072
  __decorate([state()], AxebowTabSelector.prototype, "_tabDisabled", void 0);
@@ -8591,442 +8862,1269 @@ var AxebowSummaryStepHeader = class AxebowSummaryStepHeader extends LitElement {
8591
8862
  composed: true
8592
8863
  }));
8593
8864
  }
8594
- _handleEdit() {
8595
- this.dispatchEvent(new CustomEvent("edit", {
8596
- bubbles: true,
8597
- composed: true
8598
- }));
8865
+ _handleEdit() {
8866
+ this.dispatchEvent(new CustomEvent("edit", {
8867
+ bubbles: true,
8868
+ composed: true
8869
+ }));
8870
+ }
8871
+ };
8872
+ __decorate([property({ type: Number })], AxebowSummaryStepHeader.prototype, "stepNumber", void 0);
8873
+ __decorate([property({ type: String })], AxebowSummaryStepHeader.prototype, "stepTitle", void 0);
8874
+ __decorate([property({ type: Boolean })], AxebowSummaryStepHeader.prototype, "valid", void 0);
8875
+ __decorate([property({ type: Boolean })], AxebowSummaryStepHeader.prototype, "collapsed", void 0);
8876
+ __decorate([property({ type: Boolean })], AxebowSummaryStepHeader.prototype, "canEdit", void 0);
8877
+ __decorate([property({ type: Boolean })], AxebowSummaryStepHeader.prototype, "isEditing", void 0);
8878
+ __decorate([property({ type: String })], AxebowSummaryStepHeader.prototype, "editLabel", void 0);
8879
+ __decorate([property({ type: String })], AxebowSummaryStepHeader.prototype, "editingLabel", void 0);
8880
+ __decorate([property({ type: Boolean })], AxebowSummaryStepHeader.prototype, "enabled", void 0);
8881
+ AxebowSummaryStepHeader = __decorate([customElement("axebow-summary-step-header")], AxebowSummaryStepHeader);
8882
+ //#endregion
8883
+ //#region src/components/axebow-summary/axebow-summary-step.ts
8884
+ var AxebowSummaryStep = class AxebowSummaryStep extends LitElement {
8885
+ constructor(..._args) {
8886
+ super(..._args);
8887
+ this.stepTitle = "";
8888
+ this.valid = false;
8889
+ this.collapsed = false;
8890
+ this.visible = false;
8891
+ this.isEditing = false;
8892
+ this.enabled = true;
8893
+ }
8894
+ static {
8895
+ this.styles = [unsafeCSS(tailwind_default), axebowTheme];
8896
+ }
8897
+ render() {
8898
+ if (!this.visible) return html``;
8899
+ return html`
8900
+ <axebow-summary-step-header
8901
+ .stepNumber=${this.stepNumber}
8902
+ .stepTitle=${this.stepTitle}
8903
+ .valid=${this.valid}
8904
+ .collapsed=${this.collapsed}
8905
+ .isEditing=${this.isEditing}
8906
+ .enabled=${this.enabled}
8907
+ @toggle=${this._handleToggle}
8908
+ @edit=${this._handleEdit}
8909
+ ></axebow-summary-step-header>
8910
+ ${!this.collapsed && this.enabled ? html`
8911
+ <div class="step-summary-body mt-2">
8912
+ <slot></slot>
8913
+ </div>
8914
+ ` : ""}
8915
+ <sl-divider></sl-divider>
8916
+ `;
8917
+ }
8918
+ _handleToggle() {
8919
+ if (!this.enabled) return;
8920
+ this.dispatchEvent(new CustomEvent("toggle-step", {
8921
+ detail: { step: this.stepNumber },
8922
+ bubbles: true,
8923
+ composed: true
8924
+ }));
8925
+ }
8926
+ _handleEdit() {
8927
+ this.dispatchEvent(new CustomEvent("edit-step", {
8928
+ detail: { step: this.stepNumber },
8929
+ bubbles: true,
8930
+ composed: true
8931
+ }));
8932
+ }
8933
+ };
8934
+ __decorate([property({ type: Number })], AxebowSummaryStep.prototype, "stepNumber", void 0);
8935
+ __decorate([property({ type: String })], AxebowSummaryStep.prototype, "stepTitle", void 0);
8936
+ __decorate([property({ type: Boolean })], AxebowSummaryStep.prototype, "valid", void 0);
8937
+ __decorate([property({ type: Boolean })], AxebowSummaryStep.prototype, "collapsed", void 0);
8938
+ __decorate([property({ type: Boolean })], AxebowSummaryStep.prototype, "visible", void 0);
8939
+ __decorate([property({ type: Boolean })], AxebowSummaryStep.prototype, "isEditing", void 0);
8940
+ __decorate([property({ type: Boolean })], AxebowSummaryStep.prototype, "enabled", void 0);
8941
+ AxebowSummaryStep = __decorate([customElement("axebow-summary-step")], AxebowSummaryStep);
8942
+ //#endregion
8943
+ //#region src/components/axebow-summary/axebow-summary-card.ts
8944
+ var AxebowSummaryCard = class AxebowSummaryCard extends LitElement {
8945
+ constructor(..._args) {
8946
+ super(..._args);
8947
+ this.title = "Summary";
8948
+ this.cardWidth = "24.125rem";
8949
+ this.cardHeight = "";
8950
+ this.isSummaryOpen = true;
8951
+ }
8952
+ static {
8953
+ this.styles = [
8954
+ unsafeCSS(tailwind_default),
8955
+ axebowTheme,
8956
+ css`
8957
+ :host {
8958
+ display: block;
8959
+ height: 100%;
8960
+ }
8961
+ sl-card {
8962
+ --border-color: transparent !important;
8963
+ border: none !important;
8964
+ }
8965
+ sl-card::part(base) {
8966
+ width: 100%;
8967
+ height: 100%;
8968
+ }
8969
+ sl-card::part(body) {
8970
+ height: 100%;
8971
+ }
8972
+ `
8973
+ ];
8974
+ }
8975
+ render() {
8976
+ return html`
8977
+ <div
8978
+ 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"
8979
+ style="--card-width: ${this.cardWidth}; --card-height: ${this.cardHeight};"
8980
+ >
8981
+ <sl-card
8982
+ 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"
8983
+ >
8984
+ <div class="h-full flex flex-col">
8985
+ ${this._renderHeader()}
8986
+ <sl-divider></sl-divider>
8987
+ <div class="${this.isSummaryOpen ? "" : "hidden"} lg:block flex-1 mt-4">
8988
+ <slot></slot>
8989
+ </div>
8990
+ </div>
8991
+ </sl-card>
8992
+ </div>
8993
+ `;
8994
+ }
8995
+ _renderHeader() {
8996
+ return html`
8997
+ <div class="flex items-center justify-between lg:cursor-default cursor-pointer">
8998
+ <div class="flex-1 flex items-center justify-between gap-2" @click="${this._toggleMobileSummary}">
8999
+ <div class="flex items-center gap-2">
9000
+ <h4 class="text-xl font-semibold text-(--axebow-primary)">${this.title}</h4>
9001
+ <axebow-icon
9002
+ class="lg:hidden"
9003
+ iconName="${this.isSummaryOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"}"
9004
+ ></axebow-icon>
9005
+ </div>
9006
+ </div>
9007
+ <div class="flex items-center gap-2">
9008
+ <slot name="header-actions"></slot>
9009
+ </div>
9010
+ </div>
9011
+ `;
9012
+ }
9013
+ _toggleMobileSummary() {
9014
+ if (window.innerWidth < 1024) this.isSummaryOpen = !this.isSummaryOpen;
9015
+ }
9016
+ scrollToBottom() {
9017
+ (this.shadowRoot?.querySelectorAll(".overflow-y-auto"))?.forEach((container) => {
9018
+ container.scrollTo({
9019
+ top: container.scrollHeight,
9020
+ behavior: "smooth"
9021
+ });
9022
+ });
9023
+ }
9024
+ };
9025
+ __decorate([property({ type: String })], AxebowSummaryCard.prototype, "title", void 0);
9026
+ __decorate([property({ type: String })], AxebowSummaryCard.prototype, "cardWidth", void 0);
9027
+ __decorate([property({ type: String })], AxebowSummaryCard.prototype, "cardHeight", void 0);
9028
+ __decorate([state()], AxebowSummaryCard.prototype, "isSummaryOpen", void 0);
9029
+ AxebowSummaryCard = __decorate([customElement("axebow-summary-card")], AxebowSummaryCard);
9030
+ //#endregion
9031
+ //#region src/components/axebow-summary/axebow-summary-limits.ts
9032
+ var AxebowSummaryLimits = class AxebowSummaryLimits extends LitElement {
9033
+ constructor(..._args) {
9034
+ super(..._args);
9035
+ this.supportedStorage = [];
9036
+ }
9037
+ static {
9038
+ this.styles = [
9039
+ unsafeCSS(tailwind_default),
9040
+ axebowTheme,
9041
+ css`
9042
+ :host {
9043
+ display: block;
9044
+ width: 100%;
9045
+ }
9046
+ `
9047
+ ];
9048
+ }
9049
+ renderSection(title, limitKey) {
9050
+ return html`
9051
+ <div class="w-full flex flex-col gap-2">
9052
+ <p class="font-semibold text-base m-0">${title}</p>
9053
+ <div class="flex gap-1.5">
9054
+ <div class="w-41 h-4.25 text-base">
9055
+ ${this.labels.vcpus}: <span class="text-(--axebow-gray)">${this.limits.cpu[limitKey]}</span>
9056
+ </div>
9057
+ <div class="w-41 h-4.25 text-base">
9058
+ ${this.labels.memory} <span class="text-(--axebow-gray)">${this.limits.memory[limitKey]} GB</span>
9059
+ </div>
9060
+ </div>
9061
+ ${this.supportedStorage.includes("volatile") ? html`
9062
+ <p class="text-base m-0">
9063
+ ${this.labels.volatile}:
9064
+ <span class="text-(--axebow-gray)">${this.limits.volatileStorage[limitKey]} GB</span>
9065
+ </p>
9066
+ ` : ""}
9067
+ ${this.supportedStorage.includes("nonReplicated") ? html`
9068
+ <p class="text-base m-0">
9069
+ ${this.labels.nonReplicated}:
9070
+ <span class="text-(--axebow-gray)">${this.limits.nonReplicatedStorage[limitKey]} GB</span>
9071
+ </p>
9072
+ ` : ""}
9073
+ ${this.supportedStorage.includes("persistent") ? html`
9074
+ <p class="text-base m-0">
9075
+ ${this.labels.persistent}:
9076
+ <span class="text-(--axebow-gray)">${this.limits.persistentStorage[limitKey]} GB</span>
9077
+ </p>
9078
+ ` : ""}
9079
+ </div>
9080
+ `;
9081
+ }
9082
+ render() {
9083
+ if (!this.limits || !this.labels) return html``;
9084
+ return html`
9085
+ ${this.renderSection(this.labels.hardLimits, "max")}
9086
+ <sl-divider></sl-divider>
9087
+ ${this.renderSection(this.labels.softLimits, "min")}
9088
+ `;
8599
9089
  }
8600
9090
  };
8601
- __decorate([property({ type: Number })], AxebowSummaryStepHeader.prototype, "stepNumber", void 0);
8602
- __decorate([property({ type: String })], AxebowSummaryStepHeader.prototype, "stepTitle", void 0);
8603
- __decorate([property({ type: Boolean })], AxebowSummaryStepHeader.prototype, "valid", void 0);
8604
- __decorate([property({ type: Boolean })], AxebowSummaryStepHeader.prototype, "collapsed", void 0);
8605
- __decorate([property({ type: Boolean })], AxebowSummaryStepHeader.prototype, "canEdit", void 0);
8606
- __decorate([property({ type: Boolean })], AxebowSummaryStepHeader.prototype, "isEditing", void 0);
8607
- __decorate([property({ type: String })], AxebowSummaryStepHeader.prototype, "editLabel", void 0);
8608
- __decorate([property({ type: String })], AxebowSummaryStepHeader.prototype, "editingLabel", void 0);
8609
- __decorate([property({ type: Boolean })], AxebowSummaryStepHeader.prototype, "enabled", void 0);
8610
- AxebowSummaryStepHeader = __decorate([customElement("axebow-summary-step-header")], AxebowSummaryStepHeader);
9091
+ __decorate([property({ type: Object })], AxebowSummaryLimits.prototype, "limits", void 0);
9092
+ __decorate([property({ type: Array })], AxebowSummaryLimits.prototype, "supportedStorage", void 0);
9093
+ __decorate([property({ type: Object })], AxebowSummaryLimits.prototype, "labels", void 0);
9094
+ AxebowSummaryLimits = __decorate([customElement("axebow-summary-limits")], AxebowSummaryLimits);
8611
9095
  //#endregion
8612
- //#region src/components/axebow-summary/axebow-summary-step.ts
8613
- var AxebowSummaryStep = class AxebowSummaryStep extends LitElement {
9096
+ //#region src/components/axebow-summary/axebow-summary-flavors.ts
9097
+ var AxebowSummaryFlavors = class AxebowSummaryFlavors extends LitElement {
8614
9098
  constructor(..._args) {
8615
9099
  super(..._args);
8616
- this.stepTitle = "";
8617
- this.valid = false;
8618
- this.collapsed = false;
8619
- this.visible = false;
8620
- this.isEditing = false;
8621
- this.enabled = true;
9100
+ this.supportedStorage = [];
9101
+ this.hasFlavors = true;
8622
9102
  }
8623
9103
  static {
8624
9104
  this.styles = [unsafeCSS(tailwind_default), axebowTheme];
8625
9105
  }
8626
9106
  render() {
8627
- if (!this.visible) return html``;
9107
+ if (!this.labels) return html``;
8628
9108
  return html`
8629
- <axebow-summary-step-header
8630
- .stepNumber=${this.stepNumber}
8631
- .stepTitle=${this.stepTitle}
8632
- .valid=${this.valid}
8633
- .collapsed=${this.collapsed}
8634
- .isEditing=${this.isEditing}
8635
- .enabled=${this.enabled}
8636
- @toggle=${this._handleToggle}
8637
- @edit=${this._handleEdit}
8638
- ></axebow-summary-step-header>
8639
- ${!this.collapsed && this.enabled ? html`
8640
- <div class="step-summary-body mt-2">
8641
- <slot></slot>
9109
+ ${this.hasFlavors || this.nodes || this.highAvailable !== void 0 || this.autoscale !== void 0 || this.supportedStorage.some((s) => this.flavors?.[s]?.[0]) ? html`
9110
+ <div class="flex w-full gap-[2%]">
9111
+ <div class="flex-1 flex flex-col gap-2">
9112
+ <p><strong>${this.labels.workload}</strong></p>
9113
+ ${this.hasFlavors && this.flavors?.small?.[0] ? html`<p>${this.labels.runtimePlane}</p>` : ""}
9114
+ <p>${this.labels.numberOfVms}</p>
9115
+ ${this.hasFlavors && this.flavors?.medium?.[0] ? html`<p>${this.labels.controlPlane}</p>` : ""}
9116
+ ${this.highAvailable !== void 0 ? html`<p>${this.labels.highAvailable}</p>` : ""}
9117
+ </div>
9118
+ <div class="flex-1 flex flex-col gap-2">
9119
+ <p><strong>${this.labels.selectedFlavor}</strong></p>
9120
+ ${this.hasFlavors && this.flavors?.small?.[0] ? html`<p><strong class="text-(--axebow-primary)">${this.flavors?.small?.[0]}</strong></p>` : ""}
9121
+ <p><strong class="text-(--axebow-primary)">${this.nodes?.max || "0"}</strong></p>
9122
+
9123
+ ${this.hasFlavors && this.flavors?.medium?.[0] ? html`<p><strong class="text-(--axebow-primary)">${this.flavors?.medium?.[0]}</strong></p>` : ""}
9124
+ ${this.highAvailable !== void 0 ? html`<p>
9125
+ <strong class="text-(--axebow-primary)"
9126
+ >${this.highAvailable ? this.labels.yes : this.labels.no}</strong
9127
+ >
9128
+ </p>` : ""}
9129
+ </div>
8642
9130
  </div>
9131
+ ${this.supportedStorage.some((s) => this.flavors?.[s]?.[0]) ? html`
9132
+ <div class="flex w-full gap-[2%] mt-2">
9133
+ <div class="flex-1 flex flex-col gap-2">
9134
+ <p><strong>${this.labels.storage}</strong></p>
9135
+ ${this.supportedStorage.includes("volatile") && this.flavors?.volatile?.[0] ? html`<p>${this.labels.volatile}</p>` : ""}
9136
+ ${this.supportedStorage.includes("nonReplicated") && this.flavors?.nonReplicated?.[0] ? html`<p>${this.labels.nonReplPersistent}</p>` : ""}
9137
+ ${this.supportedStorage.includes("persistent") && this.flavors?.persistent?.[0] ? html`<p>${this.labels.persistentReplicated}</p>` : ""}
9138
+ </div>
9139
+ <div class="flex-1 flex flex-col gap-2">
9140
+ <p><strong>${this.labels.selectedFlavor}</strong></p>
9141
+ ${this.supportedStorage.includes("volatile") && this.flavors?.volatile?.[0] ? html`<p>
9142
+ <strong class="text-(--axebow-primary)">${this.flavors?.volatile?.[0]}</strong>
9143
+ </p>` : ""}
9144
+ ${this.supportedStorage.includes("nonReplicated") && this.flavors?.nonReplicated?.[0] ? html`<p>
9145
+ <strong class="text-(--axebow-primary)">${this.flavors?.nonReplicated?.[0]}</strong>
9146
+ </p>` : ""}
9147
+ ${this.supportedStorage.includes("persistent") && this.flavors?.persistent?.[0] ? html`<p>
9148
+ <strong class="text-(--axebow-primary)">${this.flavors?.persistent?.[0]}</strong>
9149
+ </p>` : ""}
9150
+ </div>
9151
+ </div>
9152
+ ` : ""}
8643
9153
  ` : ""}
8644
- <sl-divider></sl-divider>
8645
9154
  `;
8646
9155
  }
8647
- _handleToggle() {
8648
- if (!this.enabled) return;
8649
- this.dispatchEvent(new CustomEvent("toggle-step", {
8650
- detail: { step: this.stepNumber },
8651
- bubbles: true,
8652
- composed: true
8653
- }));
9156
+ };
9157
+ __decorate([property({ type: Object })], AxebowSummaryFlavors.prototype, "flavors", void 0);
9158
+ __decorate([property({ type: Object })], AxebowSummaryFlavors.prototype, "nodes", void 0);
9159
+ __decorate([property({ type: Boolean })], AxebowSummaryFlavors.prototype, "highAvailable", void 0);
9160
+ __decorate([property({ type: Boolean })], AxebowSummaryFlavors.prototype, "autoscale", void 0);
9161
+ __decorate([property({ type: Array })], AxebowSummaryFlavors.prototype, "supportedStorage", void 0);
9162
+ __decorate([property({ type: Boolean })], AxebowSummaryFlavors.prototype, "hasFlavors", void 0);
9163
+ __decorate([property({ type: Object })], AxebowSummaryFlavors.prototype, "labels", void 0);
9164
+ AxebowSummaryFlavors = __decorate([customElement("axebow-summary-flavors")], AxebowSummaryFlavors);
9165
+ //#endregion
9166
+ //#region src/components/deploy-modal-component/parts/deploy-modal-header.ts
9167
+ var DeployModalHeader = class DeployModalHeader extends LitElement {
9168
+ static {
9169
+ this.styles = [unsafeCSS(tailwind_default), css`
9170
+ :host {
9171
+ display: block;
9172
+ width: 76.125rem;
9173
+ height: 7.6875rem;
9174
+ }
9175
+ `];
8654
9176
  }
8655
- _handleEdit() {
8656
- this.dispatchEvent(new CustomEvent("edit-step", {
8657
- detail: { step: this.stepNumber },
9177
+ _onClose() {
9178
+ this.dispatchEvent(new CustomEvent("close", {
8658
9179
  bubbles: true,
8659
9180
  composed: true
8660
9181
  }));
8661
9182
  }
9183
+ render() {
9184
+ return html`
9185
+ <div
9186
+ class="w-full h-full box-border pt-4 pr-4 pb-3.5 pl-5 border-b border-solid border-(--axebow-light-gray) flex items-start justify-between gap-4 overflow-hidden"
9187
+ >
9188
+ <div class="flex-1 min-w-0">
9189
+ <slot></slot>
9190
+ </div>
9191
+ <div class="w-6 h-6 shrink-0 flex items-center justify-center cursor-pointer" @click=${this._onClose}>
9192
+ <axebow-icon iconName="cancel" iconColor="var(--axebow-gray)" size="md"></axebow-icon>
9193
+ </div>
9194
+ </div>
9195
+ `;
9196
+ }
8662
9197
  };
8663
- __decorate([property({ type: Number })], AxebowSummaryStep.prototype, "stepNumber", void 0);
8664
- __decorate([property({ type: String })], AxebowSummaryStep.prototype, "stepTitle", void 0);
8665
- __decorate([property({ type: Boolean })], AxebowSummaryStep.prototype, "valid", void 0);
8666
- __decorate([property({ type: Boolean })], AxebowSummaryStep.prototype, "collapsed", void 0);
8667
- __decorate([property({ type: Boolean })], AxebowSummaryStep.prototype, "visible", void 0);
8668
- __decorate([property({ type: Boolean })], AxebowSummaryStep.prototype, "isEditing", void 0);
8669
- __decorate([property({ type: Boolean })], AxebowSummaryStep.prototype, "enabled", void 0);
8670
- AxebowSummaryStep = __decorate([customElement("axebow-summary-step")], AxebowSummaryStep);
9198
+ DeployModalHeader = __decorate([customElement("deploy-modal-header")], DeployModalHeader);
8671
9199
  //#endregion
8672
- //#region src/components/axebow-summary/axebow-summary-card.ts
8673
- var AxebowSummaryCard = class AxebowSummaryCard extends LitElement {
9200
+ //#region src/components/deploy-modal-component/parts/deploy-modal-footer.ts
9201
+ var DeployModalFooter = class DeployModalFooter extends LitElement {
9202
+ static {
9203
+ this.styles = [unsafeCSS(tailwind_default), css`
9204
+ :host {
9205
+ display: block;
9206
+ width: 76.125rem;
9207
+ height: 4.5rem;
9208
+ }
9209
+ `];
9210
+ }
9211
+ render() {
9212
+ return html`
9213
+ <div
9214
+ class="w-full h-full box-border pt-3 pr-5 pb-4 pl-5 border-t border-solid border-(--axebow-light-gray) flex items-center justify-between gap-4"
9215
+ >
9216
+ <slot></slot>
9217
+ </div>
9218
+ `;
9219
+ }
9220
+ };
9221
+ DeployModalFooter = __decorate([customElement("deploy-modal-footer")], DeployModalFooter);
9222
+ //#endregion
9223
+ //#region src/components/deploy-modal-component/deploy-modal-component.ts
9224
+ var DeployModalComponent = class DeployModalComponent extends LitElement {
8674
9225
  constructor(..._args) {
8675
9226
  super(..._args);
8676
- this.title = "Summary";
8677
- this.cardWidth = "24.125rem";
8678
- this.cardHeight = "";
8679
- this.isSummaryOpen = true;
9227
+ this.width = "76.1875rem";
9228
+ this.height = "44.875rem";
8680
9229
  }
8681
9230
  static {
8682
- this.styles = [
8683
- unsafeCSS(tailwind_default),
8684
- axebowTheme,
8685
- css`
9231
+ this.styles = [unsafeCSS(tailwind_default), css`
8686
9232
  :host {
8687
9233
  display: block;
8688
- height: 100%;
8689
9234
  }
8690
- sl-card {
8691
- --border-color: transparent !important;
8692
- border: none !important;
9235
+ .content-scroll {
9236
+ scrollbar-gutter: stable;
8693
9237
  }
8694
- sl-card::part(base) {
8695
- width: 100%;
8696
- height: 100%;
9238
+ ::-webkit-scrollbar {
9239
+ width: 0.625rem;
9240
+ height: 0.625rem;
8697
9241
  }
8698
- sl-card::part(body) {
8699
- height: 100%;
9242
+ ::-webkit-scrollbar-track {
9243
+ background: transparent;
9244
+ border: none;
8700
9245
  }
8701
- `
8702
- ];
9246
+ ::-webkit-scrollbar-thumb {
9247
+ background-color: #dbdde4;
9248
+ border: none;
9249
+ border-radius: 8.854375rem;
9250
+ min-width: 12.8125rem;
9251
+ min-height: 12.8125rem;
9252
+ }
9253
+ `];
8703
9254
  }
8704
9255
  render() {
8705
9256
  return html`
8706
- <div
8707
- 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"
8708
- style="--card-width: ${this.cardWidth}; --card-height: ${this.cardHeight};"
8709
- >
8710
- <sl-card
8711
- 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"
8712
- >
8713
- <div class="h-full flex flex-col">
8714
- ${this._renderHeader()}
8715
- <sl-divider></sl-divider>
8716
- <div class="${this.isSummaryOpen ? "" : "hidden"} lg:block flex-1 mt-4">
8717
- <slot></slot>
8718
- </div>
8719
- </div>
8720
- </sl-card>
9257
+ <div class="flex flex-col box-border overflow-hidden" style="width:${this.width};height:${this.height};">
9258
+ <slot name="header"></slot>
9259
+ <div class="content-scroll flex-1 min-h-0 overflow-y-auto overflow-x-hidden pt-6 pr-4.5 pb-6 pl-4">
9260
+ <slot></slot>
9261
+ </div>
9262
+ <slot name="footer"></slot>
8721
9263
  </div>
8722
9264
  `;
8723
9265
  }
8724
- _renderHeader() {
9266
+ };
9267
+ __decorate([property({ type: String })], DeployModalComponent.prototype, "width", void 0);
9268
+ __decorate([property({ type: String })], DeployModalComponent.prototype, "height", void 0);
9269
+ DeployModalComponent = __decorate([customElement("deploy-modal-component")], DeployModalComponent);
9270
+ //#endregion
9271
+ //#region src/components/deploy-page-body/deploy-page-body.ts
9272
+ var DeployPageBody = class DeployPageBody extends LitElement {
9273
+ static {
9274
+ this.styles = unsafeCSS(tailwind_default);
9275
+ }
9276
+ render() {
9277
+ return html`
9278
+ <deploy-modal-component width="73.1875rem" height="48.1875rem">
9279
+ <slot></slot>
9280
+ </deploy-modal-component>
9281
+ `;
9282
+ }
9283
+ };
9284
+ DeployPageBody = __decorate([customElement("deploy-page-body")], DeployPageBody);
9285
+ //#endregion
9286
+ //#region src/components/custom-home-page-body/custom-home-page-body.ts
9287
+ var CustomHomePageBody = class CustomHomePageBody extends LitElement {
9288
+ static {
9289
+ this.styles = unsafeCSS(tailwind_default);
9290
+ }
9291
+ render() {
8725
9292
  return html`
8726
- <div class="flex items-center justify-between lg:cursor-default cursor-pointer">
8727
- <div class="flex-1 flex items-center justify-between gap-2" @click="${this._toggleMobileSummary}">
8728
- <div class="flex items-center gap-2">
8729
- <h4 class="text-xl font-semibold text-(--axebow-primary)">${this.title}</h4>
8730
- <axebow-icon
8731
- class="lg:hidden"
8732
- iconName="${this.isSummaryOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"}"
8733
- ></axebow-icon>
8734
- </div>
8735
- </div>
8736
- <div class="flex items-center gap-2">
8737
- <slot name="header-actions"></slot>
8738
- </div>
8739
- </div>
9293
+ <deploy-modal-component width="73.5rem" height="66.270625rem">
9294
+ <slot></slot>
9295
+ </deploy-modal-component>
8740
9296
  `;
8741
9297
  }
8742
- _toggleMobileSummary() {
8743
- if (window.innerWidth < 1024) this.isSummaryOpen = !this.isSummaryOpen;
8744
- }
8745
- scrollToBottom() {
8746
- (this.shadowRoot?.querySelectorAll(".overflow-y-auto"))?.forEach((container) => {
8747
- container.scrollTo({
8748
- top: container.scrollHeight,
8749
- behavior: "smooth"
8750
- });
8751
- });
8752
- }
8753
9298
  };
8754
- __decorate([property({ type: String })], AxebowSummaryCard.prototype, "title", void 0);
8755
- __decorate([property({ type: String })], AxebowSummaryCard.prototype, "cardWidth", void 0);
8756
- __decorate([property({ type: String })], AxebowSummaryCard.prototype, "cardHeight", void 0);
8757
- __decorate([state()], AxebowSummaryCard.prototype, "isSummaryOpen", void 0);
8758
- AxebowSummaryCard = __decorate([customElement("axebow-summary-card")], AxebowSummaryCard);
9299
+ CustomHomePageBody = __decorate([customElement("custom-home-page-body")], CustomHomePageBody);
8759
9300
  //#endregion
8760
- //#region src/components/axebow-summary/axebow-summary-limits.ts
8761
- var AxebowSummaryLimits = class AxebowSummaryLimits extends LitElement {
9301
+ //#region src/components/axebow-status/axebow-status.ts
9302
+ var AxebowStatus = class AxebowStatus extends LitElement {
8762
9303
  constructor(..._args) {
8763
9304
  super(..._args);
8764
- this.supportedStorage = [];
9305
+ this.showTrash = false;
9306
+ this.statusText = "Free";
9307
+ this.statusColor = "var(--axebow-success)";
9308
+ this.deleting = false;
8765
9309
  }
8766
9310
  static {
8767
- this.styles = [
8768
- unsafeCSS(tailwind_default),
8769
- axebowTheme,
8770
- css`
8771
- :host {
8772
- display: block;
8773
- width: 100%;
8774
- }
8775
- `
8776
- ];
9311
+ this.styles = [unsafeCSS(tailwind_default), css`
9312
+ :host {
9313
+ width: 100%;
9314
+ }
9315
+ `];
8777
9316
  }
8778
- renderSection(title, limitKey) {
8779
- return html`
8780
- <div class="w-full flex flex-col gap-2">
8781
- <p class="font-semibold text-base m-0">${title}</p>
8782
- <div class="flex gap-1.5">
8783
- <div class="w-41 h-4.25 text-base">
8784
- ${this.labels.vcpus}: <span class="text-(--axebow-gray)">${this.limits.cpu[limitKey]}</span>
8785
- </div>
8786
- <div class="w-41 h-4.25 text-base">
8787
- ${this.labels.memory} <span class="text-(--axebow-gray)">${this.limits.memory[limitKey]} GB</span>
8788
- </div>
8789
- </div>
8790
- ${this.supportedStorage.includes("volatile") ? html`
8791
- <p class="text-base m-0">
8792
- ${this.labels.volatile}:
8793
- <span class="text-(--axebow-gray)">${this.limits.volatileStorage[limitKey]} GB</span>
8794
- </p>
8795
- ` : ""}
8796
- ${this.supportedStorage.includes("nonReplicated") ? html`
8797
- <p class="text-base m-0">
8798
- ${this.labels.nonReplicated}:
8799
- <span class="text-(--axebow-gray)">${this.limits.nonReplicatedStorage[limitKey]} GB</span>
8800
- </p>
8801
- ` : ""}
8802
- ${this.supportedStorage.includes("persistent") ? html`
8803
- <p class="text-base m-0">
8804
- ${this.labels.persistent}:
8805
- <span class="text-(--axebow-gray)">${this.limits.persistentStorage[limitKey]} GB</span>
8806
- </p>
8807
- ` : ""}
8808
- </div>
8809
- `;
9317
+ _handleDelete(e) {
9318
+ if (this.deleting) return;
9319
+ e.stopPropagation();
9320
+ this.dispatchEvent(new CustomEvent("delete", {
9321
+ bubbles: true,
9322
+ composed: true
9323
+ }));
8810
9324
  }
8811
9325
  render() {
8812
- if (!this.limits || !this.labels) return html``;
8813
9326
  return html`
8814
- ${this.renderSection(this.labels.hardLimits, "max")}
8815
- <sl-divider></sl-divider>
8816
- ${this.renderSection(this.labels.softLimits, "min")}
8817
- `;
9327
+ <div class="flex items-center justify-between h-fit gap-2">
9328
+ <div class="flex items-center gap-1.5">
9329
+ ${this.statusColor ? html`<div class="h-2 w-2 rounded-full shrink-0" style="background-color: ${this.statusColor};"></div>` : ""}
9330
+ <span class="font-medium text-(--axebow-strong-gray)">${this.statusText}</span>
9331
+ </div>
9332
+ ${this.showTrash ? html`
9333
+ <button
9334
+ type="button"
9335
+ class="p-0 border-0 bg-transparent cursor-pointer flex items-center justify-center text-(--axebow-error) hover:text-(--axebow-gray) transition-colors ${this.deleting ? "opacity-40 cursor-not-allowed" : ""}"
9336
+ @click=${this._handleDelete}
9337
+ >
9338
+ <axebow-icon iconName="delete" .iconColor="${this.deleting ? "var(--axebow-gray)" : "currentColor"}" size="lg"></axebow-icon>
9339
+ </button>
9340
+ ` : ""}
9341
+ </div>
9342
+ `;
8818
9343
  }
8819
9344
  };
8820
- __decorate([property({ type: Object })], AxebowSummaryLimits.prototype, "limits", void 0);
8821
- __decorate([property({ type: Array })], AxebowSummaryLimits.prototype, "supportedStorage", void 0);
8822
- __decorate([property({ type: Object })], AxebowSummaryLimits.prototype, "labels", void 0);
8823
- AxebowSummaryLimits = __decorate([customElement("axebow-summary-limits")], AxebowSummaryLimits);
9345
+ __decorate([property({ type: Boolean })], AxebowStatus.prototype, "showTrash", void 0);
9346
+ __decorate([property({ type: String })], AxebowStatus.prototype, "statusText", void 0);
9347
+ __decorate([property({ type: String })], AxebowStatus.prototype, "statusColor", void 0);
9348
+ __decorate([property({ type: Boolean })], AxebowStatus.prototype, "deleting", void 0);
9349
+ AxebowStatus = __decorate([customElement("axebow-status")], AxebowStatus);
8824
9350
  //#endregion
8825
- //#region src/components/axebow-summary/axebow-summary-flavors.ts
8826
- var AxebowSummaryFlavors = class AxebowSummaryFlavors extends LitElement {
9351
+ //#region src/components/axebow-form-panel-field/axebow-form-panel-field.ts
9352
+ var AxebowFormPanelField = class AxebowFormPanelField extends LitElement {
8827
9353
  constructor(..._args) {
8828
9354
  super(..._args);
8829
- this.supportedStorage = [];
8830
- this.hasFlavors = true;
9355
+ this.styleVariant = "Placeholder";
9356
+ this.disabled = false;
9357
+ this.label = "Field label";
9358
+ this.value = "";
9359
+ this.mandatory = true;
9360
+ this.showDropdown = false;
9361
+ this.showCloseIcon = false;
9362
+ this.placeholderCopy = "Placeholder (examples)";
9363
+ this.showActionIcon = false;
9364
+ this.actionIcon = "content_copy";
9365
+ this.copyValue = "";
9366
+ this.showSecondaryActionIcon = false;
9367
+ this.secondaryActionIcon = "open_in_new";
9368
+ this.options = [];
9369
+ this._isDropdownOpen = false;
9370
+ this._handleOutsideClick = (e) => {
9371
+ if (this._isDropdownOpen && !e.composedPath().includes(this)) this._isDropdownOpen = false;
9372
+ };
8831
9373
  }
8832
9374
  static {
8833
- this.styles = [unsafeCSS(tailwind_default), axebowTheme];
9375
+ this.styles = [unsafeCSS(tailwind_default), css`
9376
+ :host {
9377
+ display: inline-block;
9378
+ width: 234px;
9379
+ position: relative;
9380
+ }
9381
+ .field-container {
9382
+ width: 100%;
9383
+ min-height: 51.33px;
9384
+ border-radius: 6px;
9385
+ padding: 6px 8px;
9386
+ box-sizing: border-box;
9387
+ transition: border-color 0.2s ease, background-color 0.2s ease;
9388
+ }
9389
+ `];
9390
+ }
9391
+ connectedCallback() {
9392
+ super.connectedCallback();
9393
+ window.addEventListener("click", this._handleOutsideClick);
9394
+ }
9395
+ disconnectedCallback() {
9396
+ super.disconnectedCallback();
9397
+ window.removeEventListener("click", this._handleOutsideClick);
9398
+ }
9399
+ _handleFocus(_e) {
9400
+ if (this.disabled) return;
9401
+ this.dispatchEvent(new CustomEvent("focus", {
9402
+ detail: { value: this.value },
9403
+ bubbles: true,
9404
+ composed: true
9405
+ }));
9406
+ }
9407
+ _handleBlur(_e) {
9408
+ if (this.disabled) return;
9409
+ this.dispatchEvent(new CustomEvent("blur", {
9410
+ detail: { value: this.value },
9411
+ bubbles: true,
9412
+ composed: true
9413
+ }));
9414
+ }
9415
+ _handleInput(e) {
9416
+ if (this.disabled) return;
9417
+ const target = e.target;
9418
+ this.value = target.value;
9419
+ this.dispatchEvent(new CustomEvent("change", {
9420
+ detail: { value: this.value },
9421
+ bubbles: true,
9422
+ composed: true
9423
+ }));
9424
+ }
9425
+ _handleActionClick(e) {
9426
+ e.stopPropagation();
9427
+ const textToCopy = this.copyValue !== void 0 && this.copyValue !== "" ? this.copyValue : this.value;
9428
+ if (textToCopy) navigator.clipboard.writeText(textToCopy);
9429
+ this.dispatchEvent(new CustomEvent("action-click", {
9430
+ detail: { value: textToCopy },
9431
+ bubbles: true,
9432
+ composed: true
9433
+ }));
9434
+ }
9435
+ _handleSecondaryActionClick(e) {
9436
+ e.stopPropagation();
9437
+ this.dispatchEvent(new CustomEvent("secondary-action-click", {
9438
+ detail: { value: this.value },
9439
+ bubbles: true,
9440
+ composed: true
9441
+ }));
9442
+ }
9443
+ _handleCloseClick(e) {
9444
+ e.stopPropagation();
9445
+ this.value = "";
9446
+ this.dispatchEvent(new CustomEvent("close-click", {
9447
+ bubbles: true,
9448
+ composed: true
9449
+ }));
9450
+ }
9451
+ _handleDropdownClick(e) {
9452
+ e.stopPropagation();
9453
+ if (this.disabled) return;
9454
+ if (this.options && this.options.length > 0) this._isDropdownOpen = !this._isDropdownOpen;
9455
+ this.dispatchEvent(new CustomEvent("dropdown-click", {
9456
+ detail: { isOpen: this._isDropdownOpen },
9457
+ bubbles: true,
9458
+ composed: true
9459
+ }));
9460
+ }
9461
+ _selectOption(opt, e) {
9462
+ e.stopPropagation();
9463
+ this.value = opt;
9464
+ this._isDropdownOpen = false;
9465
+ this.dispatchEvent(new CustomEvent("select", {
9466
+ detail: { value: opt },
9467
+ bubbles: true,
9468
+ composed: true
9469
+ }));
9470
+ this.dispatchEvent(new CustomEvent("change", {
9471
+ detail: { value: opt },
9472
+ bubbles: true,
9473
+ composed: true
9474
+ }));
8834
9475
  }
8835
9476
  render() {
8836
- if (!this.labels) return html``;
9477
+ const isFilled = this.styleVariant && this.styleVariant.toLowerCase() === "filled" || !!this.value;
9478
+ const bgClass = this.disabled ? "bg-(--axebow-base) border border-solid border-(--axebow-border-gray)" : "bg-white border border-solid border-(--axebow-border-gray) focus-within:border-(--axebow-tertiary)";
9479
+ const textColor = this.disabled ? "text-(--axebow-gray)" : isFilled ? "text-(--axebow-strong-gray)" : "text-(--axebow-gray)";
8837
9480
  return html`
8838
- ${this.hasFlavors || this.nodes || this.highAvailable !== void 0 || this.autoscale !== void 0 || this.supportedStorage.some((s) => this.flavors?.[s]?.[0]) ? html`
8839
- <div class="flex w-full gap-[2%]">
8840
- <div class="flex-1 flex flex-col gap-2">
8841
- <p><strong>${this.labels.workload}</strong></p>
8842
- ${this.hasFlavors && this.flavors?.small?.[0] ? html`<p>${this.labels.runtimePlane}</p>` : ""}
8843
- <p>${this.labels.numberOfVms}</p>
8844
- ${this.hasFlavors && this.flavors?.medium?.[0] ? html`<p>${this.labels.controlPlane}</p>` : ""}
8845
- ${this.highAvailable !== void 0 ? html`<p>${this.labels.highAvailable}</p>` : ""}
8846
- </div>
8847
- <div class="flex-1 flex flex-col gap-2">
8848
- <p><strong>${this.labels.selectedFlavor}</strong></p>
8849
- ${this.hasFlavors && this.flavors?.small?.[0] ? html`<p><strong class="text-(--axebow-primary)">${this.flavors?.small?.[0]}</strong></p>` : ""}
8850
- <p><strong class="text-(--axebow-primary)">${this.nodes?.max || "0"}</strong></p>
8851
-
8852
- ${this.hasFlavors && this.flavors?.medium?.[0] ? html`<p><strong class="text-(--axebow-primary)">${this.flavors?.medium?.[0]}</strong></p>` : ""}
8853
- ${this.highAvailable !== void 0 ? html`<p>
8854
- <strong class="text-(--axebow-primary)"
8855
- >${this.highAvailable ? this.labels.yes : this.labels.no}</strong
8856
- >
8857
- </p>` : ""}
8858
- </div>
9481
+ <div class="relative w-full">
9482
+ <!-- Field Container -->
9483
+ <div
9484
+ class="field-container border flex items-center justify-between gap-2 ${bgClass} ${this.showDropdown && !this.disabled ? "cursor-pointer" : ""}"
9485
+ @click=${this.showDropdown ? this._handleDropdownClick : null}
9486
+ >
9487
+ <div class="flex flex-col justify-center flex-1 min-w-0">
9488
+ <!-- Top Label -->
9489
+ <div class="flex items-center text-xs text-(--axebow-gray) leading-tight select-none">
9490
+ ${this.mandatory ? html`<span class="text-(--axebow-error) font-bold mr-0.5">*</span>` : ""}
9491
+ <span class="truncate">${this.label}</span>
8859
9492
  </div>
8860
- ${this.supportedStorage.some((s) => this.flavors?.[s]?.[0]) ? html`
8861
- <div class="flex w-full gap-[2%] mt-2">
8862
- <div class="flex-1 flex flex-col gap-2">
8863
- <p><strong>${this.labels.storage}</strong></p>
8864
- ${this.supportedStorage.includes("volatile") && this.flavors?.volatile?.[0] ? html`<p>${this.labels.volatile}</p>` : ""}
8865
- ${this.supportedStorage.includes("nonReplicated") && this.flavors?.nonReplicated?.[0] ? html`<p>${this.labels.nonReplPersistent}</p>` : ""}
8866
- ${this.supportedStorage.includes("persistent") && this.flavors?.persistent?.[0] ? html`<p>${this.labels.persistentReplicated}</p>` : ""}
8867
- </div>
8868
- <div class="flex-1 flex flex-col gap-2">
8869
- <p><strong>${this.labels.selectedFlavor}</strong></p>
8870
- ${this.supportedStorage.includes("volatile") && this.flavors?.volatile?.[0] ? html`<p>
8871
- <strong class="text-(--axebow-primary)">${this.flavors?.volatile?.[0]}</strong>
8872
- </p>` : ""}
8873
- ${this.supportedStorage.includes("nonReplicated") && this.flavors?.nonReplicated?.[0] ? html`<p>
8874
- <strong class="text-(--axebow-primary)">${this.flavors?.nonReplicated?.[0]}</strong>
8875
- </p>` : ""}
8876
- ${this.supportedStorage.includes("persistent") && this.flavors?.persistent?.[0] ? html`<p>
8877
- <strong class="text-(--axebow-primary)">${this.flavors?.persistent?.[0]}</strong>
8878
- </p>` : ""}
9493
+
9494
+ <!-- Value / Input -->
9495
+ <input
9496
+ type="text"
9497
+ class="w-full bg-transparent border-0 p-0 text-sm font-normal ${textColor} focus:outline-none truncate"
9498
+ .value=${this.value}
9499
+ placeholder=${this.placeholderCopy}
9500
+ ?disabled=${this.disabled}
9501
+ @input=${this._handleInput}
9502
+ @focus=${this._handleFocus}
9503
+ @blur=${this._handleBlur}
9504
+ />
9505
+ </div>
9506
+
9507
+ <!-- Action Icons Suffix -->
9508
+ <div class="flex items-center gap-1 shrink-0">
9509
+ ${this.showSecondaryActionIcon ? html`
9510
+ <button
9511
+ type="button"
9512
+ class="p-0 border-0 bg-transparent cursor-pointer flex items-center justify-center text-(--axebow-tertiary) hover:text-(--axebow-gray) transition-colors"
9513
+ @click=${this._handleSecondaryActionClick}
9514
+ >
9515
+ <axebow-icon iconName=${this.secondaryActionIcon} iconColor="currentColor" size="lg"></axebow-icon>
9516
+ </button>
9517
+ ` : ""}
9518
+ ${this.showActionIcon ? html`
9519
+ <button
9520
+ type="button"
9521
+ class="p-0 border-0 bg-transparent cursor-pointer flex items-center justify-center text-(--axebow-tertiary) hover:text-(--axebow-gray) transition-colors"
9522
+ @click=${this._handleActionClick}
9523
+ >
9524
+ <axebow-icon iconName=${this.actionIcon} iconColor="currentColor" size="lg"></axebow-icon>
9525
+ </button>
9526
+ ` : ""}
9527
+ ${this.showCloseIcon ? html`
9528
+ <button
9529
+ type="button"
9530
+ class="p-0 border-0 bg-transparent cursor-pointer flex items-center justify-center text-(--axebow-gray) hover:text-black transition-colors"
9531
+ @click=${this._handleCloseClick}
9532
+ >
9533
+ <axebow-icon iconName="cancel" iconColor="currentColor" size="lg"></axebow-icon>
9534
+ </button>
9535
+ ` : ""}
9536
+ ${this.showDropdown ? html`
9537
+ <button
9538
+ type="button"
9539
+ class="p-0 border-0 bg-transparent cursor-pointer flex items-center justify-center text-(--axebow-tertiary) hover:text-(--axebow-gray) transition-colors"
9540
+ @click=${this._handleDropdownClick}
9541
+ >
9542
+ <axebow-icon
9543
+ iconName="keyboard_arrow_down"
9544
+ iconColor="currentColor"
9545
+ size="xl"
9546
+ class="transition-transform duration-200 ${this._isDropdownOpen ? "rotate-180" : ""}"
9547
+ ></axebow-icon>
9548
+ </button>
9549
+ ` : ""}
9550
+ </div>
9551
+ </div>
9552
+
9553
+ <!-- Dropdown Menu Overlay -->
9554
+ ${this.showDropdown && this._isDropdownOpen && this.options && this.options.length > 0 ? html`
9555
+ <div
9556
+ class="absolute left-0 top-full mt-1 w-full bg-white border border-solid border-(--axebow-border-gray) rounded-md shadow-lg z-50 max-h-48 overflow-y-auto py-1 box-border"
9557
+ >
9558
+ ${this.options.map((opt) => {
9559
+ const isSelected = opt === this.value;
9560
+ return html`
9561
+ <div
9562
+ class="px-3 py-1.5 text-sm text-(--axebow-strong-gray) hover:bg-(--axebow-base) cursor-pointer transition-colors flex items-center justify-between ${isSelected ? "font-semibold bg-(--axebow-base) text-(--axebow-tertiary)" : ""}"
9563
+ @click=${(e) => this._selectOption(opt, e)}
9564
+ >
9565
+ <span>${opt}</span>
9566
+ ${isSelected ? html`<axebow-icon iconName="check" iconColor="var(--axebow-tertiary)" size="sm"></axebow-icon>` : ""}
8879
9567
  </div>
8880
- </div>
8881
- ` : ""}
8882
- ` : ""}
9568
+ `;
9569
+ })}
9570
+ </div>
9571
+ ` : ""}
9572
+ </div>
8883
9573
  `;
8884
9574
  }
8885
9575
  };
8886
- __decorate([property({ type: Object })], AxebowSummaryFlavors.prototype, "flavors", void 0);
8887
- __decorate([property({ type: Object })], AxebowSummaryFlavors.prototype, "nodes", void 0);
8888
- __decorate([property({ type: Boolean })], AxebowSummaryFlavors.prototype, "highAvailable", void 0);
8889
- __decorate([property({ type: Boolean })], AxebowSummaryFlavors.prototype, "autoscale", void 0);
8890
- __decorate([property({ type: Array })], AxebowSummaryFlavors.prototype, "supportedStorage", void 0);
8891
- __decorate([property({ type: Boolean })], AxebowSummaryFlavors.prototype, "hasFlavors", void 0);
8892
- __decorate([property({ type: Object })], AxebowSummaryFlavors.prototype, "labels", void 0);
8893
- AxebowSummaryFlavors = __decorate([customElement("axebow-summary-flavors")], AxebowSummaryFlavors);
9576
+ __decorate([property({ type: String })], AxebowFormPanelField.prototype, "styleVariant", void 0);
9577
+ __decorate([property({ type: Boolean })], AxebowFormPanelField.prototype, "disabled", void 0);
9578
+ __decorate([property({ type: String })], AxebowFormPanelField.prototype, "label", void 0);
9579
+ __decorate([property({ type: String })], AxebowFormPanelField.prototype, "value", void 0);
9580
+ __decorate([property({ type: Boolean })], AxebowFormPanelField.prototype, "mandatory", void 0);
9581
+ __decorate([property({ type: Boolean })], AxebowFormPanelField.prototype, "showDropdown", void 0);
9582
+ __decorate([property({ type: Boolean })], AxebowFormPanelField.prototype, "showCloseIcon", void 0);
9583
+ __decorate([property({ type: String })], AxebowFormPanelField.prototype, "placeholderCopy", void 0);
9584
+ __decorate([property({ type: Boolean })], AxebowFormPanelField.prototype, "showActionIcon", void 0);
9585
+ __decorate([property({ type: String })], AxebowFormPanelField.prototype, "actionIcon", void 0);
9586
+ __decorate([property({ type: String })], AxebowFormPanelField.prototype, "copyValue", void 0);
9587
+ __decorate([property({ type: Boolean })], AxebowFormPanelField.prototype, "showSecondaryActionIcon", void 0);
9588
+ __decorate([property({ type: String })], AxebowFormPanelField.prototype, "secondaryActionIcon", void 0);
9589
+ __decorate([property({ type: Array })], AxebowFormPanelField.prototype, "options", void 0);
9590
+ __decorate([state()], AxebowFormPanelField.prototype, "_isDropdownOpen", void 0);
9591
+ AxebowFormPanelField = __decorate([customElement("axebow-form-panel-field")], AxebowFormPanelField);
8894
9592
  //#endregion
8895
- //#region src/components/deploy-modal-component/parts/deploy-modal-header.ts
8896
- var DeployModalHeader = class DeployModalHeader extends LitElement {
9593
+ //#region src/components/axebow-box-form/axebow-box-form.ts
9594
+ var AxebowResourceBoxForm = class AxebowResourceBoxForm extends LitElement {
9595
+ constructor(..._args) {
9596
+ super(..._args);
9597
+ this.statusText = "Free";
9598
+ this.statusColor = "var(--axebow-success)";
9599
+ this.showTrash = true;
9600
+ this.deleting = false;
9601
+ this.items = [];
9602
+ this._openMenuId = null;
9603
+ this._handleOutsideClick = (e) => {
9604
+ if (!e.composedPath().includes(this)) this._closeMenu();
9605
+ };
9606
+ }
8897
9607
  static {
8898
- this.styles = [unsafeCSS(tailwind_default), css`
8899
- :host {
8900
- display: block;
8901
- width: 76.125rem;
8902
- height: 7.6875rem;
8903
- }
8904
- `];
9608
+ this.styles = unsafeCSS(tailwind_default);
8905
9609
  }
8906
- _onClose() {
8907
- this.dispatchEvent(new CustomEvent("close", {
9610
+ connectedCallback() {
9611
+ super.connectedCallback();
9612
+ window.addEventListener("click", this._handleOutsideClick);
9613
+ }
9614
+ disconnectedCallback() {
9615
+ super.disconnectedCallback();
9616
+ window.removeEventListener("click", this._handleOutsideClick);
9617
+ }
9618
+ _copyToClipboard(text, e) {
9619
+ e?.stopPropagation();
9620
+ if (!text) return;
9621
+ navigator.clipboard.writeText(text);
9622
+ this.dispatchEvent(new CustomEvent("copy", {
9623
+ detail: { text },
9624
+ bubbles: true,
9625
+ composed: true
9626
+ }));
9627
+ }
9628
+ _openLink(url, e) {
9629
+ e?.stopPropagation();
9630
+ if (!url) return;
9631
+ window.open(url, "_blank", "noopener,noreferrer");
9632
+ this.dispatchEvent(new CustomEvent("link-click", {
9633
+ detail: { url },
9634
+ bubbles: true,
9635
+ composed: true
9636
+ }));
9637
+ }
9638
+ _handleDelete() {
9639
+ this.dispatchEvent(new CustomEvent("delete", {
8908
9640
  bubbles: true,
8909
9641
  composed: true
8910
9642
  }));
8911
9643
  }
9644
+ _downloadFile(content, fileName) {
9645
+ if (!content) return;
9646
+ const blob = new Blob([content], { type: "text/plain" });
9647
+ const url = URL.createObjectURL(blob);
9648
+ const a = document.createElement("a");
9649
+ a.href = url;
9650
+ a.download = fileName || "file.txt";
9651
+ document.body.appendChild(a);
9652
+ a.click();
9653
+ document.body.removeChild(a);
9654
+ URL.revokeObjectURL(url);
9655
+ }
9656
+ _closeMenu() {
9657
+ this._openMenuId = null;
9658
+ }
9659
+ _toggleMenu(item, hasContent, e) {
9660
+ e.stopPropagation();
9661
+ if (!item.menuId) return;
9662
+ if (!hasContent) {
9663
+ const customOption = item.menuOptions?.find((opt) => opt.action === "custom" || !opt.action);
9664
+ if (customOption) this.dispatchEvent(new CustomEvent("item-menu-select", {
9665
+ detail: {
9666
+ item,
9667
+ option: customOption
9668
+ },
9669
+ bubbles: true,
9670
+ composed: true
9671
+ }));
9672
+ this._closeMenu();
9673
+ return;
9674
+ }
9675
+ if (this._openMenuId === item.menuId) this._closeMenu();
9676
+ else this._openMenuId = item.menuId;
9677
+ }
9678
+ _handleMenuOption(item, option, textToCopy, e) {
9679
+ e.stopPropagation();
9680
+ this._closeMenu();
9681
+ switch (option.action || "custom") {
9682
+ case "copy":
9683
+ this._copyToClipboard(textToCopy);
9684
+ break;
9685
+ case "download":
9686
+ this._downloadFile(textToCopy, option.fileName || "file.txt");
9687
+ break;
9688
+ default:
9689
+ this.dispatchEvent(new CustomEvent("item-menu-select", {
9690
+ detail: {
9691
+ item,
9692
+ option
9693
+ },
9694
+ bubbles: true,
9695
+ composed: true
9696
+ }));
9697
+ break;
9698
+ }
9699
+ }
9700
+ _renderField(item) {
9701
+ const itemType = item.type || "enabled";
9702
+ const textToCopy = item.copyValue !== void 0 ? item.copyValue : item.value;
9703
+ const hasMenu = !!item.menuOptions && item.menuOptions.length > 0 && !!item.menuId;
9704
+ const hasContent = !!textToCopy;
9705
+ const isMenuOpen = this._openMenuId === item.menuId && hasContent;
9706
+ if (itemType === "text") return html`
9707
+ <div class="flex items-start justify-between gap-2 w-full relative pt-1">
9708
+ <div class="flex flex-col gap-0.5 min-w-0 flex-1">
9709
+ <span
9710
+ class="text-sm font-semibold text-(--axebow-strong-gray) leading-tight flex items-center gap-1 break-all"
9711
+ >
9712
+ ${item.required ? html`<span class="text-(--axebow-error) font-bold">* </span>` : ""}
9713
+ ${item.tag}
9714
+ </span>
9715
+ ${item.value ? html`<p
9716
+ class="m-0 text-sm text-(--axebow-gray) leading-snug break-all font-normal"
9717
+ >
9718
+ ${item.value}
9719
+ </p>` : ""}
9720
+ </div>
9721
+ <div class="flex items-center gap-1 shrink-0 pt-0.5">
9722
+ ${hasMenu ? html`
9723
+ <button
9724
+ type="button"
9725
+ class="p-0 border-0 bg-transparent cursor-pointer flex items-center justify-center text-(--axebow-tertiary) hover:text-(--axebow-gray) transition-colors"
9726
+ title="Options"
9727
+ @click=${(e) => this._toggleMenu(item, hasContent, e)}
9728
+ >
9729
+ <axebow-icon
9730
+ iconName="add_circle"
9731
+ iconColor="currentColor"
9732
+ size="lg"
9733
+ ></axebow-icon>
9734
+ </button>
9735
+ ${isMenuOpen ? html`
9736
+ <div
9737
+ class="absolute right-0 top-full mt-1 z-50 min-w-50 bg-white rounded-lg shadow-[0_4px_12px_rgba(0,0,0,0.1)] border border-solid border-(--axebow-border-gray) py-1.5 flex flex-col axebow-scrollbar"
9738
+ style="max-height: 250px; overflow-y: auto;"
9739
+ >
9740
+ ${item.menuOptions.map((option) => html`
9741
+ <div
9742
+ class="flex items-center gap-2.5 px-4 py-2 cursor-pointer hover:bg-(--axebow-anti-flash-white) transition-colors"
9743
+ @click=${(e) => this._handleMenuOption(item, option, textToCopy, e)}
9744
+ >
9745
+ <axebow-icon
9746
+ .iconName=${option.icon}
9747
+ .iconColor=${option.variant === "danger" ? "var(--axebow-error)" : "var(--axebow-primary)"}
9748
+ size="md"
9749
+ ></axebow-icon>
9750
+ <span
9751
+ class="text-sm font-medium ${option.variant === "danger" ? "text-(--axebow-error)" : "text-(--axebow-primary)"}"
9752
+ >
9753
+ ${option.label}
9754
+ </span>
9755
+ </div>
9756
+ `)}
9757
+ </div>
9758
+ ` : ""}
9759
+ ` : item.canCopy ? html`
9760
+ <button
9761
+ type="button"
9762
+ class="p-0 border-0 bg-transparent cursor-pointer flex items-center justify-center text-(--axebow-tertiary) hover:text-(--axebow-gray) transition-colors"
9763
+ title="Copy"
9764
+ @click=${(e) => this._copyToClipboard(textToCopy, e)}
9765
+ >
9766
+ <axebow-icon
9767
+ iconName="content_copy"
9768
+ iconColor="currentColor"
9769
+ size="lg"
9770
+ ></axebow-icon>
9771
+ </button>
9772
+ ` : ""}
9773
+ ${item.canLink && !hasMenu ? html`
9774
+ <button
9775
+ type="button"
9776
+ class="p-0 border-0 bg-transparent cursor-pointer flex items-center justify-center text-(--axebow-tertiary) hover:text-(--axebow-gray) transition-colors"
9777
+ title="Open link"
9778
+ @click=${(e) => this._openLink(item.linkHref || item.value, e)}
9779
+ >
9780
+ <axebow-icon
9781
+ iconName="open_in_new"
9782
+ iconColor="currentColor"
9783
+ size="lg"
9784
+ ></axebow-icon>
9785
+ </button>
9786
+ ` : ""}
9787
+ </div>
9788
+ </div>
9789
+ `;
9790
+ return html`
9791
+ <div class="relative w-full">
9792
+ <axebow-form-panel-field
9793
+ class="w-full"
9794
+ style="width: 100%;"
9795
+ .label=${item.tag}
9796
+ .value=${item.value || ""}
9797
+ .copyValue=${item.copyValue !== void 0 ? item.copyValue : ""}
9798
+ .mandatory=${Boolean(item.required)}
9799
+ ?disabled=${itemType === "disabled"}
9800
+ .showActionIcon=${Boolean(hasMenu || item.canCopy)}
9801
+ actionIcon=${hasMenu ? "add_circle" : "content_copy"}
9802
+ .showSecondaryActionIcon=${Boolean(item.canLink)}
9803
+ secondaryActionIcon="open_in_new"
9804
+ .showDropdown=${Boolean(item.options && item.options.length > 0)}
9805
+ .options=${item.options || []}
9806
+ @focus=${(_e) => {
9807
+ this.dispatchEvent(new CustomEvent("item-focus", {
9808
+ detail: { item },
9809
+ bubbles: true,
9810
+ composed: true
9811
+ }));
9812
+ }}
9813
+ @blur=${(_e) => {
9814
+ this.dispatchEvent(new CustomEvent("item-blur", {
9815
+ detail: { item },
9816
+ bubbles: true,
9817
+ composed: true
9818
+ }));
9819
+ }}
9820
+ @change=${(e) => {
9821
+ item.value = e.detail?.value ?? e.target.value;
9822
+ this.dispatchEvent(new CustomEvent("item-change", {
9823
+ detail: { item },
9824
+ bubbles: true,
9825
+ composed: true
9826
+ }));
9827
+ }}
9828
+ @action-click=${(e) => {
9829
+ if (hasMenu) this._toggleMenu(item, hasContent, e);
9830
+ else this._copyToClipboard(textToCopy, e);
9831
+ }}
9832
+ @secondary-action-click=${(e) => this._openLink(item.linkHref || item.value, e)}
9833
+ ></axebow-form-panel-field>
9834
+ ${hasMenu && isMenuOpen ? html`
9835
+ <div
9836
+ class="absolute right-0 top-full mt-1 z-50 min-w-50 bg-white rounded-lg shadow-[0_4px_12px_rgba(0,0,0,0.1)] border border-solid border-(--axebow-border-gray) py-1.5 flex flex-col axebow-scrollbar"
9837
+ style="max-height: 250px; overflow-y: auto;"
9838
+ >
9839
+ ${item.menuOptions.map((option) => html`
9840
+ <div
9841
+ class="flex items-center gap-2.5 px-4 py-2 cursor-pointer hover:bg-(--axebow-anti-flash-white) transition-colors"
9842
+ @click=${(e) => this._handleMenuOption(item, option, textToCopy, e)}
9843
+ >
9844
+ <axebow-icon
9845
+ .iconName=${option.icon}
9846
+ .iconColor=${option.variant === "danger" ? "var(--axebow-error)" : "var(--axebow-primary)"}
9847
+ size="md"
9848
+ ></axebow-icon>
9849
+ <span
9850
+ class="text-sm font-medium ${option.variant === "danger" ? "text-(--axebow-error)" : "text-(--axebow-primary)"}"
9851
+ >
9852
+ ${option.label}
9853
+ </span>
9854
+ </div>
9855
+ `)}
9856
+ </div>
9857
+ ` : ""}
9858
+ </div>
9859
+ `;
9860
+ }
8912
9861
  render() {
9862
+ const isDeleting = this.deleting;
9863
+ const computedStatusColor = isDeleting ? "var(--axebow-error)" : this.statusColor;
8913
9864
  return html`
8914
9865
  <div
8915
- class="w-full h-full box-border pt-4 pr-4 pb-3.5 pl-5 border-b border-solid border-(--axebow-light-gray) flex items-start justify-between gap-4 overflow-hidden"
9866
+ 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"
8916
9867
  >
8917
- <div class="flex-1 min-w-0">
8918
- <slot></slot>
8919
- </div>
8920
- <div class="w-6 h-6 shrink-0 flex items-center justify-center cursor-pointer" @click=${this._onClose}>
8921
- <axebow-icon iconName="cancel" iconColor="var(--axebow-gray)" size="md"></axebow-icon>
9868
+ <!-- Top Status Header -->
9869
+ <axebow-status
9870
+ .statusText=${this.statusText}
9871
+ .statusColor=${computedStatusColor}
9872
+ ?showTrash=${this.showTrash}
9873
+ ?deleting=${this.deleting}
9874
+ @delete=${this._handleDelete}
9875
+ ></axebow-status>
9876
+
9877
+ <!-- Form Fields List -->
9878
+ <div class="flex flex-col gap-2.5 w-full">
9879
+ ${this.items && this.items.length > 0 ? this.items.map((item) => this._renderField(isDeleting ? {
9880
+ ...item,
9881
+ type: "disabled"
9882
+ } : item)) : html`
9883
+ <div
9884
+ class="p-3 border border-dashed border-(--axebow-border-gray) rounded-lg text-center text-(--axebow-gray) text-xs"
9885
+ >
9886
+ No items configured.
9887
+ </div>
9888
+ `}
8922
9889
  </div>
8923
9890
  </div>
8924
9891
  `;
8925
9892
  }
8926
9893
  };
8927
- DeployModalHeader = __decorate([customElement("deploy-modal-header")], DeployModalHeader);
9894
+ __decorate([property({ type: String })], AxebowResourceBoxForm.prototype, "statusText", void 0);
9895
+ __decorate([property({ type: String })], AxebowResourceBoxForm.prototype, "statusColor", void 0);
9896
+ __decorate([property({ type: Boolean })], AxebowResourceBoxForm.prototype, "showTrash", void 0);
9897
+ __decorate([property({ type: Boolean })], AxebowResourceBoxForm.prototype, "deleting", void 0);
9898
+ __decorate([property({ type: Array })], AxebowResourceBoxForm.prototype, "items", void 0);
9899
+ __decorate([state()], AxebowResourceBoxForm.prototype, "_openMenuId", void 0);
9900
+ AxebowResourceBoxForm = __decorate([customElement("axebow-resource-box-form")], AxebowResourceBoxForm);
8928
9901
  //#endregion
8929
- //#region src/components/deploy-modal-component/parts/deploy-modal-footer.ts
8930
- var DeployModalFooter = class DeployModalFooter extends LitElement {
9902
+ //#region src/components/axebow-manage-hyperlinks/axebow-manage-hyperlinks.ts
9903
+ var AxebowManageHyperlinks = class AxebowManageHyperlinks extends LitElement {
9904
+ constructor(..._args) {
9905
+ super(..._args);
9906
+ this.text = "";
9907
+ this.icon = "";
9908
+ this.color = "var(--axebow-tertiary)";
9909
+ this.iconColor = "";
9910
+ this.disabled = false;
9911
+ }
8931
9912
  static {
8932
9913
  this.styles = [unsafeCSS(tailwind_default), css`
8933
- :host {
8934
- display: block;
8935
- width: 76.125rem;
8936
- height: 4.5rem;
8937
- }
8938
- `];
9914
+ :host {
9915
+ display: inline-block;
9916
+ }
9917
+ button:hover:not(:disabled) {
9918
+ color: var(--axebow-gray) !important;
9919
+ }
9920
+ `];
9921
+ }
9922
+ _handleClick(e) {
9923
+ if (this.disabled) {
9924
+ e.preventDefault();
9925
+ e.stopPropagation();
9926
+ return;
9927
+ }
9928
+ this.dispatchEvent(new CustomEvent("hyperlink-click", {
9929
+ bubbles: true,
9930
+ composed: true,
9931
+ detail: { text: this.text }
9932
+ }));
8939
9933
  }
8940
9934
  render() {
9935
+ const buttonColor = this.color || "var(--axebow-tertiary)";
9936
+ const iconColorProp = this.iconColor || "currentColor";
8941
9937
  return html`
8942
- <div
8943
- class="w-full h-full box-border pt-3 pr-5 pb-4 pl-5 border-t border-solid border-(--axebow-light-gray) flex items-center justify-between gap-4"
8944
- >
8945
- <slot></slot>
8946
- </div>
8947
- `;
9938
+ <button
9939
+ type="button"
9940
+ ?disabled=${this.disabled}
9941
+ @click=${this._handleClick}
9942
+ style="color: ${buttonColor};"
9943
+ 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"
9944
+ >
9945
+ <span>${this.text}</span>
9946
+ ${this.icon ? html`<axebow-icon iconName="${this.icon}" iconColor="${iconColorProp}"></axebow-icon>` : ""}
9947
+ </button>`;
8948
9948
  }
8949
9949
  };
8950
- DeployModalFooter = __decorate([customElement("deploy-modal-footer")], DeployModalFooter);
9950
+ __decorate([property({ type: String })], AxebowManageHyperlinks.prototype, "text", void 0);
9951
+ __decorate([property({ type: String })], AxebowManageHyperlinks.prototype, "icon", void 0);
9952
+ __decorate([property({ type: String })], AxebowManageHyperlinks.prototype, "color", void 0);
9953
+ __decorate([property({ type: String })], AxebowManageHyperlinks.prototype, "iconColor", void 0);
9954
+ __decorate([property({ type: Boolean })], AxebowManageHyperlinks.prototype, "disabled", void 0);
9955
+ AxebowManageHyperlinks = __decorate([customElement("axebow-manage-hyperlinks")], AxebowManageHyperlinks);
8951
9956
  //#endregion
8952
- //#region src/components/deploy-modal-component/deploy-modal-component.ts
8953
- var DeployModalComponent = class DeployModalComponent extends LitElement {
9957
+ //#region src/components/axebow-box-section/axebow-box-section.ts
9958
+ var AxebowBoxSection = class AxebowBoxSection extends LitElement {
8954
9959
  constructor(..._args) {
8955
9960
  super(..._args);
8956
- this.width = "76.1875rem";
8957
- this.height = "44.875rem";
9961
+ this.title = "";
9962
+ this.hyperlinks = [];
9963
+ this.showHyperlink = false;
9964
+ this.hyperlinkText = "";
9965
+ this.hyperlinkIcon = "";
9966
+ this.hyperlinkColor = "";
9967
+ this.hyperlinkDisabled = false;
8958
9968
  }
8959
9969
  static {
8960
- this.styles = [unsafeCSS(tailwind_default), css`
8961
- :host {
8962
- display: block;
8963
- }
8964
- .content-scroll {
8965
- scrollbar-gutter: stable;
8966
- }
8967
- ::-webkit-scrollbar {
8968
- width: 0.625rem;
8969
- height: 0.625rem;
8970
- }
8971
- ::-webkit-scrollbar-track {
8972
- background: transparent;
8973
- border: none;
8974
- }
8975
- ::-webkit-scrollbar-thumb {
8976
- background-color: #dbdde4;
8977
- border: none;
8978
- border-radius: 8.854375rem;
8979
- min-width: 12.8125rem;
8980
- min-height: 12.8125rem;
8981
- }
8982
- `];
9970
+ this.styles = unsafeCSS(tailwind_default);
9971
+ }
9972
+ _handleItemClick(item, index) {
9973
+ if (item.onClick) item.onClick();
9974
+ this.dispatchEvent(new CustomEvent("hyperlink-click", {
9975
+ bubbles: true,
9976
+ composed: true,
9977
+ detail: {
9978
+ item,
9979
+ index,
9980
+ text: item.text
9981
+ }
9982
+ }));
8983
9983
  }
8984
9984
  render() {
9985
+ const itemsToRender = this.hyperlinks.length > 0 ? this.hyperlinks : this.showHyperlink || Boolean(this.hyperlinkText) ? [{
9986
+ text: this.hyperlinkText,
9987
+ icon: this.hyperlinkIcon,
9988
+ color: this.hyperlinkColor,
9989
+ disabled: this.hyperlinkDisabled
9990
+ }] : [];
8985
9991
  return html`
8986
- <div class="flex flex-col box-border overflow-hidden" style="width:${this.width};height:${this.height};">
8987
- <slot name="header"></slot>
8988
- <div class="content-scroll flex-1 min-h-0 overflow-y-auto overflow-x-hidden pt-6 pr-4.5 pb-6 pl-4">
8989
- <slot></slot>
8990
- </div>
8991
- <slot name="footer"></slot>
8992
- </div>
8993
- `;
9992
+ <div class="flex flex-col rounded-md p-5 gap-4 bg-white">
9993
+ <div class="w-full flex justify-between items-center border-b border-solid border-[#DBDDE4] pb-3 gap-2">
9994
+ <span class="font-semibold uppercase text-(--axebow-primary)">${this.title}</span>
9995
+ <slot name="hyperlink">
9996
+ ${itemsToRender.length > 0 ? html`
9997
+ <div class="flex items-center gap-4">
9998
+ ${itemsToRender.map((item, index) => html`
9999
+ <axebow-manage-hyperlinks
10000
+ text="${item.text}"
10001
+ icon="${item.icon}"
10002
+ color="${item.color ?? ""}"
10003
+ ?disabled=${Boolean(item.disabled)}
10004
+ @hyperlink-click=${() => this._handleItemClick(item, index)}
10005
+ ></axebow-manage-hyperlinks>
10006
+ `)}
10007
+ </div>
10008
+ ` : ""}
10009
+ </slot>
10010
+ </div>
10011
+ <slot></slot>
10012
+ </div>`;
8994
10013
  }
8995
10014
  };
8996
- __decorate([property({ type: String })], DeployModalComponent.prototype, "width", void 0);
8997
- __decorate([property({ type: String })], DeployModalComponent.prototype, "height", void 0);
8998
- DeployModalComponent = __decorate([customElement("deploy-modal-component")], DeployModalComponent);
10015
+ __decorate([property({ type: String })], AxebowBoxSection.prototype, "title", void 0);
10016
+ __decorate([property({ type: Array })], AxebowBoxSection.prototype, "hyperlinks", void 0);
10017
+ __decorate([property({ type: Boolean })], AxebowBoxSection.prototype, "showHyperlink", void 0);
10018
+ __decorate([property({ type: String })], AxebowBoxSection.prototype, "hyperlinkText", void 0);
10019
+ __decorate([property({ type: String })], AxebowBoxSection.prototype, "hyperlinkIcon", void 0);
10020
+ __decorate([property({ type: String })], AxebowBoxSection.prototype, "hyperlinkColor", void 0);
10021
+ __decorate([property({ type: Boolean })], AxebowBoxSection.prototype, "hyperlinkDisabled", void 0);
10022
+ AxebowBoxSection = __decorate([customElement("axebow-box-section")], AxebowBoxSection);
8999
10023
  //#endregion
9000
- //#region src/components/deploy-page-body/deploy-page-body.ts
9001
- var DeployPageBody = class DeployPageBody extends LitElement {
10024
+ //#region src/components/axebow-copy-box/axebow-copy-box.ts
10025
+ var AxebowCopyBox = class AxebowCopyBox extends LitElement {
10026
+ constructor(..._args) {
10027
+ super(..._args);
10028
+ this.value = "";
10029
+ this.copyValue = "";
10030
+ this.iconName = "content_copy";
10031
+ this.size = "lg";
10032
+ this.disabled = false;
10033
+ this._copied = false;
10034
+ }
9002
10035
  static {
9003
10036
  this.styles = unsafeCSS(tailwind_default);
9004
10037
  }
10038
+ async _handleCopy(e) {
10039
+ if (this.disabled) {
10040
+ e.preventDefault();
10041
+ e.stopPropagation();
10042
+ return;
10043
+ }
10044
+ let textToCopy = this.copyValue || this.value;
10045
+ if (!textToCopy) {
10046
+ const slot = this.shadowRoot?.querySelector("slot");
10047
+ if (slot) textToCopy = slot.assignedNodes({ flatten: true }).map((n) => n.textContent ?? "").join("").trim();
10048
+ if (!textToCopy) textToCopy = this.textContent?.trim() ?? "";
10049
+ }
10050
+ if (textToCopy) try {
10051
+ await navigator.clipboard.writeText(textToCopy);
10052
+ this._copied = true;
10053
+ setTimeout(() => {
10054
+ this._copied = false;
10055
+ }, 2e3);
10056
+ } catch (err) {
10057
+ console.error("Failed to copy text:", err);
10058
+ }
10059
+ this.dispatchEvent(new CustomEvent("copy", {
10060
+ bubbles: true,
10061
+ composed: true,
10062
+ detail: { value: textToCopy }
10063
+ }));
10064
+ }
9005
10065
  render() {
10066
+ const iconToShow = this._copied ? "check" : this.iconName;
9006
10067
  return html`
9007
- <deploy-modal-component width="73.1875rem" height="48.1875rem">
9008
- <slot></slot>
9009
- </deploy-modal-component>
9010
- `;
10068
+ <div
10069
+ @click=${this._handleCopy}
10070
+ 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" : ""}"
10071
+ title=${this._copied ? "Copied!" : "Copy"}
10072
+ >
10073
+ <axebow-icon iconName="${iconToShow}" iconColor="white" size="${this.size}"></axebow-icon>
10074
+ <slot class="hidden"></slot>
10075
+ </div>
10076
+ `;
9011
10077
  }
9012
10078
  };
9013
- DeployPageBody = __decorate([customElement("deploy-page-body")], DeployPageBody);
10079
+ __decorate([property({ type: String })], AxebowCopyBox.prototype, "value", void 0);
10080
+ __decorate([property({ type: String })], AxebowCopyBox.prototype, "copyValue", void 0);
10081
+ __decorate([property({ type: String })], AxebowCopyBox.prototype, "iconName", void 0);
10082
+ __decorate([property({ type: String })], AxebowCopyBox.prototype, "size", void 0);
10083
+ __decorate([property({ type: Boolean })], AxebowCopyBox.prototype, "disabled", void 0);
10084
+ __decorate([state()], AxebowCopyBox.prototype, "_copied", void 0);
10085
+ AxebowCopyBox = __decorate([customElement("axebow-copy-box")], AxebowCopyBox);
9014
10086
  //#endregion
9015
- //#region src/components/custom-home-page-body/custom-home-page-body.ts
9016
- var CustomHomePageBody = class CustomHomePageBody extends LitElement {
10087
+ //#region src/components/axebow-tabs-submenu/axebow-tabs-submenu.ts
10088
+ var AxebowTabsSubmenu = class AxebowTabsSubmenu extends LitElement {
10089
+ constructor(..._args) {
10090
+ super(..._args);
10091
+ this.tabs = [];
10092
+ this.activeTab = 0;
10093
+ this.disabled = false;
10094
+ }
9017
10095
  static {
9018
10096
  this.styles = unsafeCSS(tailwind_default);
9019
10097
  }
10098
+ _handleTabChange(e) {
10099
+ this.activeTab = e.detail.index;
10100
+ this.dispatchEvent(new CustomEvent("tab-change", {
10101
+ bubbles: true,
10102
+ composed: true,
10103
+ detail: e.detail
10104
+ }));
10105
+ }
9020
10106
  render() {
9021
10107
  return html`
9022
- <deploy-modal-component width="73.5rem" height="66.270625rem">
9023
- <slot></slot>
9024
- </deploy-modal-component>
9025
- `;
10108
+ <axebow-tab-selector
10109
+ variant="sections-tab"
10110
+ .activeTab=${this.activeTab}
10111
+ ?disabled=${this.disabled}
10112
+ @tab-change=${this._handleTabChange}
10113
+ >
10114
+ ${this.tabs.map((tab, i) => html`
10115
+ <span slot="tab-label-${i}" ?disabled=${tab.disabled ?? false}>
10116
+ ${tab.label}
10117
+ </span>
10118
+ `)}
10119
+ </axebow-tab-selector>
10120
+ `;
9026
10121
  }
9027
10122
  };
9028
- CustomHomePageBody = __decorate([customElement("custom-home-page-body")], CustomHomePageBody);
10123
+ __decorate([property({ type: Array })], AxebowTabsSubmenu.prototype, "tabs", void 0);
10124
+ __decorate([property({ type: Number })], AxebowTabsSubmenu.prototype, "activeTab", void 0);
10125
+ __decorate([property({ type: Boolean })], AxebowTabsSubmenu.prototype, "disabled", void 0);
10126
+ AxebowTabsSubmenu = __decorate([customElement("axebow-tabs-submenu")], AxebowTabsSubmenu);
9029
10127
  //#endregion
9030
- export { AxebowActionsFooter, AxebowAdjustmentResourcesCounter, AxebowAlert, AxebowBanner, AxebowBaseCard, AxebowBreadcrumbHeader, AxebowButton, AxebowCardActionBanner, AxebowCardAttentionBanner, AxebowCardCloudLogo, AxebowCardFilter, AxebowCardFilterItem, AxebowCardFooter, AxebowCardHeader, AxebowCardResourceRow, AxebowCardResourceTable, AxebowCardSpecialLink, AxebowCardStatItem, AxebowCardStatsRow, AxebowCardStatus, AxebowCardTableHeader, AxebowCardVersionSelector, AxebowCarouselInput, AxebowCarouselSelectorItem, AxebowCarouselSelectorTenant, AxebowChannelConfigPanel, AxebowCheckboxInput, AxebowCollaboratorsDialog, AxebowDeployCard, AxebowDeploySummary, AxebowDialog, AxebowDragDropUploadFile, AxebowDraggableService, AxebowExpandableHeader, AxebowFilterBar, AxebowFooter, AxebowGettingStartedCard, AxebowHeader, AxebowHelpBubble, AxebowIcon, AxebowInfrastructureCard, AxebowInput, AxebowInputBase, AxebowLimitsCounter, AxebowMarketplaceCard, AxebowModalsConfirmation, AxebowMoreActions, AxebowNumberCard, AxebowNumbersSection, AxebowNumericInput, AxebowPill, AxebowProvidersInput, AxebowQuickTipButton, AxebowQuickTipSection, AxebowResourceBar, AxebowResourceCard, AxebowResourceLimitInput, AxebowResourceLimitsPanel, AxebowResourcesCounter, AxebowRoleTooltip, AxebowRuntimeZipDialog, AxebowSearch, AxebowSelectInput, AxebowSelectorSlider, AxebowServicesPanel, AxebowSidebar, AxebowStepHeader, AxebowSummaryCard, AxebowSummaryFlavors, AxebowSummaryKeyValue, AxebowSummaryLimits, AxebowSummaryStep, AxebowSummaryStepHeader, AxebowSwitch, AxebowSwitchInput, AxebowTabSelector, AxebowTenantCard, AxebowTenantResourceTable, AxebowTextInput, AxebowTooltip, CustomHomePageBody, DEFAULT_ADD_DIALOG_LABELS, DeployModalComponent, DeployModalFooter, DeployModalHeader, DeployPageBody, STATUS_COLORS, axebowTheme, buildAddButton, buildExternalNodeContent, buildMainNodeContent, createElement, createIcon };
10128
+ 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, axebowTheme, buildAddButton, buildExternalNodeContent, buildMainNodeContent, createElement, createIcon };
9031
10129
 
9032
10130
  //# sourceMappingURL=index.js.map