@kumori/aurora-wui-components 0.0.256-dev4072.3 → 0.0.257

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 (27) 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-form-panel-field/axebow-form-panel-field.d.ts +39 -0
  6. package/dist/components/axebow-form-panel-field/axebow-form-panel-field.d.ts.map +1 -0
  7. package/dist/components/axebow-icon/axebow-icon.d.ts +2 -1
  8. package/dist/components/axebow-icon/axebow-icon.d.ts.map +1 -1
  9. package/dist/components/axebow-search/axebow-search.d.ts +0 -1
  10. package/dist/components/axebow-search/axebow-search.d.ts.map +1 -1
  11. package/dist/components/axebow-status/axebow-status.d.ts +11 -0
  12. package/dist/components/axebow-status/axebow-status.d.ts.map +1 -0
  13. package/dist/index.d.ts +4 -1
  14. package/dist/index.d.ts.map +1 -1
  15. package/dist/index.js +1304 -894
  16. package/dist/index.js.map +1 -1
  17. package/dist/playground/schemas/axebow-form-panel-field.schema.d.ts +8 -0
  18. package/dist/playground/schemas/axebow-form-panel-field.schema.d.ts.map +1 -0
  19. package/dist/playground/schemas/axebow-resource-box-form.schema.d.ts +8 -0
  20. package/dist/playground/schemas/axebow-resource-box-form.schema.d.ts.map +1 -0
  21. package/dist/playground/schemas/axebow-status.schema.d.ts +8 -0
  22. package/dist/playground/schemas/axebow-status.schema.d.ts.map +1 -0
  23. package/dist/playground/schemas/types.d.ts +1 -1
  24. package/dist/playground/schemas/types.d.ts.map +1 -1
  25. package/package.json +1 -1
  26. package/dist/components/axebow-tenant-filters/axebow-tenant-filters.d.ts +0 -37
  27. package/dist/components/axebow-tenant-filters/axebow-tenant-filters.d.ts.map +0 -1
package/dist/index.js CHANGED
@@ -2,9 +2,6 @@ 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";
8
5
  import "@shoelace-style/shoelace/dist/components/dropdown/dropdown.js";
9
6
  import "@shoelace-style/shoelace/dist/components/menu/menu.js";
10
7
  import "@shoelace-style/shoelace/dist/components/switch/switch.js";
@@ -12,6 +9,9 @@ import "@shoelace-style/shoelace/dist/components/tab-group/tab-group.js";
12
9
  import "@shoelace-style/shoelace/dist/components/tab/tab.js";
13
10
  import "@shoelace-style/shoelace/dist/components/tab-panel/tab-panel.js";
14
11
  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-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-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-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-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-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-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-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 .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,769 +341,192 @@ 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-button/axebow-button.ts
323
- var AxebowButton = class AxebowButton extends LitElement {
324
- constructor() {
325
- super();
326
- this.variant = "default";
327
- this.size = "medium";
328
- this.outline = false;
329
- this.pill = false;
330
- this.circle = false;
331
- this.disabled = false;
332
- this.loading = false;
333
- this.caret = false;
334
- this.type = "button";
335
- this.hoverStyle = "simple";
336
- this._guardDisabledClick = (event) => {
337
- if (this.disabled || this.loading) {
338
- event.preventDefault();
339
- event.stopPropagation();
340
- }
344
+ //#region src/components/axebow-header/parts/axebow-quick-action-card.ts
345
+ var AxebowQuickActionCard = class AxebowQuickActionCard extends LitElement {
346
+ constructor(..._args) {
347
+ super(..._args);
348
+ this.icon = "";
349
+ this.label = "";
350
+ }
351
+ static {
352
+ this.styles = [unsafeCSS(tailwind_default), css`:host { display: block; }`];
353
+ }
354
+ render() {
355
+ return html`
356
+ <div
357
+ 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"
358
+ @click=${this._onClick}
359
+ >
360
+ <axebow-icon iconName=${this.icon} iconColor="var(--axebow-primary)" size="xl"></axebow-icon>
361
+ <span class="text-base font-semibold text-(--axebow-primary) text-center whitespace-nowrap">${this.label}</span>
362
+ </div>
363
+ `;
364
+ }
365
+ _onClick() {
366
+ this.dispatchEvent(new CustomEvent("card-click", {
367
+ bubbles: true,
368
+ composed: true
369
+ }));
370
+ }
371
+ };
372
+ __decorate([property({ type: String })], AxebowQuickActionCard.prototype, "icon", void 0);
373
+ __decorate([property({ type: String })], AxebowQuickActionCard.prototype, "label", void 0);
374
+ AxebowQuickActionCard = __decorate([customElement("axebow-quick-action-card")], AxebowQuickActionCard);
375
+ //#endregion
376
+ //#region src/components/axebow-header/parts/axebow-quick-actions.ts
377
+ var AxebowQuickActions = class AxebowQuickActions extends LitElement {
378
+ constructor(..._args) {
379
+ super(..._args);
380
+ this.label = "";
381
+ this.actions = [];
382
+ this.open = false;
383
+ this._handleOutsideClick = (e) => {
384
+ if (this.open && !this.contains(e.target)) this.open = false;
341
385
  };
342
- this.addEventListener("click", this._guardDisabledClick, { capture: true });
343
386
  }
344
- updated(changed) {
345
- if (changed.has("fixedWidth")) if (this.fixedWidth) this.style.setProperty("--axebow-button-width", this.fixedWidth);
346
- else this.style.removeProperty("--axebow-button-width");
347
- if (changed.has("fixedHeight")) if (this.fixedHeight) this.style.setProperty("--axebow-button-height", this.fixedHeight);
348
- else this.style.removeProperty("--axebow-button-height");
349
- this._syncPaddingVar(changed, "paddingTop", "--axebow-button-padding-top");
350
- this._syncPaddingVar(changed, "paddingRight", "--axebow-button-padding-right");
351
- this._syncPaddingVar(changed, "paddingBottom", "--axebow-button-padding-bottom");
352
- this._syncPaddingVar(changed, "paddingLeft", "--axebow-button-padding-left");
387
+ static {
388
+ this.styles = [unsafeCSS(tailwind_default), css`:host { display: inline-block; }`];
353
389
  }
354
- _syncPaddingVar(changed, prop, cssVar) {
355
- if (!changed.has(prop)) return;
356
- const value = this[prop];
357
- if (value) this.style.setProperty(cssVar, value);
358
- else this.style.removeProperty(cssVar);
390
+ connectedCallback() {
391
+ super.connectedCallback();
392
+ document.addEventListener("click", this._handleOutsideClick);
393
+ }
394
+ disconnectedCallback() {
395
+ super.disconnectedCallback();
396
+ document.removeEventListener("click", this._handleOutsideClick);
397
+ }
398
+ _toggle(e) {
399
+ e.stopPropagation();
400
+ this.open = !this.open;
401
+ }
402
+ _select(action) {
403
+ action.onClick();
404
+ this.open = false;
405
+ }
406
+ render() {
407
+ const row1 = this.actions.slice(0, 3).filter((a) => a.visible);
408
+ const row2 = this.actions.slice(3, 7).filter((a) => a.visible);
409
+ return html`
410
+ <div class="relative">
411
+ <button
412
+ type="button"
413
+ 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)"}"
414
+ @click=${this._toggle}
415
+ >
416
+ <span
417
+ class="flex flex-col items-center justify-center gap-1 ${this.open ? "text-(--axebow-primary)" : "text-white group-hover:text-(--axebow-primary)"}"
418
+ >
419
+ <axebow-icon iconName=${this.open ? "close" : "apps"} iconColor="currentColor" size="xl"></axebow-icon>
420
+ <span
421
+ class="text-xs whitespace-nowrap ${this.open ? "font-semibold" : "font-normal group-hover:font-semibold"}"
422
+ >${this.label}</span
423
+ >
424
+ </span>
425
+ </button>
426
+
427
+ ${this.open ? html`
428
+ <div
429
+ 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"
430
+ >
431
+ <div class="flex gap-1">
432
+ ${row1.map((action) => html`
433
+ <axebow-quick-action-card
434
+ icon=${action.icon}
435
+ label=${action.label}
436
+ @card-click=${() => this._select(action)}
437
+ ></axebow-quick-action-card>
438
+ `)}
439
+ </div>
440
+ ${row2.length ? html`
441
+ <div class="h-[0.0625rem] w-full bg-(--axebow-light-gray)"></div>
442
+ <div class="flex flex-wrap gap-x-1 gap-y-[0.1875rem]">
443
+ ${row2.map((action) => html`
444
+ <axebow-quick-action-card
445
+ icon=${action.icon}
446
+ label=${action.label}
447
+ @card-click=${() => this._select(action)}
448
+ ></axebow-quick-action-card>
449
+ `)}
450
+ </div>
451
+ ` : ""}
452
+ </div>
453
+ ` : ""}
454
+ </div>
455
+ `;
456
+ }
457
+ };
458
+ __decorate([property({ type: String })], AxebowQuickActions.prototype, "label", void 0);
459
+ __decorate([property({ type: Array })], AxebowQuickActions.prototype, "actions", void 0);
460
+ __decorate([state()], AxebowQuickActions.prototype, "open", void 0);
461
+ AxebowQuickActions = __decorate([customElement("axebow-quick-actions")], AxebowQuickActions);
462
+ //#endregion
463
+ //#region src/components/axebow-header/parts/axebow-header-actions.ts
464
+ var AxebowHeaderActions = class AxebowHeaderActions extends LitElement {
465
+ constructor(..._args) {
466
+ super(..._args);
467
+ this.userName = "";
468
+ this.profileMenuItems = [];
469
+ this.logoutLabel = "";
470
+ this.onLogout = () => {};
471
+ this.notificationsLabel = "";
472
+ this.notifications = [];
473
+ this.actionNeededNotifications = [];
474
+ this.myNotificationsTabLabel = "";
475
+ this.actionNeededTabLabel = "";
476
+ this.noNotificationsLabel = "";
477
+ this.noUnreadNotificationsLabel = "";
478
+ this.noActionNotificationsLabel = "";
479
+ this.showUnreadOnlyLabel = "";
480
+ this.onLabel = "";
481
+ this.offLabel = "";
482
+ this.markAllAsReadLabel = "";
483
+ this.onMarkAllAsRead = () => {};
484
+ this.showUnreadOnly = false;
359
485
  }
360
486
  static {
361
487
  this.styles = [unsafeCSS(tailwind_default), css`
362
- :host {
363
- display: inline-block;
488
+ sl-dropdown::part(panel) {
489
+ max-width: 500px;
364
490
  }
365
- sl-button {
366
- width: 100%;
491
+ .notification-description code {
492
+ display: inline-block;
493
+ white-space: pre-wrap;
494
+ word-break: break-all;
367
495
  }
368
- sl-button::part(base) {
369
- height: var(--axebow-button-height, 2.5rem);
370
- min-height: var(--axebow-button-height, 2.5rem);
371
- line-height: calc(var(--axebow-button-height, 2.5rem) - var(--sl-input-border-width) * 2);
372
- width: var(--axebow-button-width, auto);
373
- min-width: var(--axebow-button-width, 9.375rem);
496
+ .notification-description pre {
497
+ white-space: pre-wrap;
374
498
  }
375
-
376
- /**
377
- * The label part carries sl-button's own internal left/right spacing
378
- * via a higher-specificity internal rule
379
- * (.button--has-label.button--{size} .button__label), which an
380
- * external ::part() override of equal-or-lower specificity cannot
381
- * beat on its own - !important is required here, not optional
382
- * styling preference. Each size's fallback points at shoelace's own
383
- * token for that size, so unconfigured buttons render byte-for-byte
384
- * as before - only an explicit padding* property changes anything.
385
- */
386
- sl-button[size='small']::part(label) {
387
- padding-top: var(--axebow-button-padding-top, 0) !important;
388
- padding-right: var(--axebow-button-padding-right, var(--sl-spacing-small)) !important;
389
- padding-bottom: var(--axebow-button-padding-bottom, 0) !important;
390
- padding-left: var(--axebow-button-padding-left, var(--sl-spacing-small)) !important;
391
- }
392
- sl-button[size='medium']::part(label) {
393
- padding-top: var(--axebow-button-padding-top, 0) !important;
394
- padding-right: var(--axebow-button-padding-right, var(--sl-spacing-medium)) !important;
395
- padding-bottom: var(--axebow-button-padding-bottom, 0) !important;
396
- padding-left: var(--axebow-button-padding-left, var(--sl-spacing-medium)) !important;
397
- }
398
- sl-button[size='large']::part(label) {
399
- padding-top: var(--axebow-button-padding-top, 0) !important;
400
- padding-right: var(--axebow-button-padding-right, var(--sl-spacing-large)) !important;
401
- padding-bottom: var(--axebow-button-padding-bottom, 0) !important;
402
- padding-left: var(--axebow-button-padding-left, var(--sl-spacing-large)) !important;
403
- }
404
-
405
- /**
406
- * Hover is always a plain recolor to axebow-gray, no matter the
407
- * variant - nothing else about the button's structure changes.
408
- */
409
-
410
- /** Default / neutral button */
411
- sl-button[variant='default']:hover::part(base),
412
- sl-button[variant='neutral']:hover::part(base) {
413
- color: var(--axebow-gray);
414
- border-color: var(--axebow-gray);
415
- outline-color: var(--axebow-gray);
416
- }
417
-
418
- /** Primary button */
419
- sl-button[variant='primary']::part(base) {
420
- background: var(--axebow-tertiary);
421
- color: white;
422
- border-color: transparent;
423
- outline-color: var(--axebow-tertiary);
424
- }
425
- sl-button[variant='primary']:hover::part(base) {
426
- background: var(--axebow-gray);
427
- outline-color: var(--axebow-gray);
428
- }
429
-
430
- /** Outlined primary button */
431
- sl-button[variant='primary'][outline]::part(base) {
432
- background: transparent;
433
- color: var(--axebow-tertiary);
434
- border-color: var(--axebow-tertiary);
435
- outline-color: var(--axebow-tertiary);
436
- }
437
- sl-button[variant='primary'][outline]:hover::part(base) {
438
- color: var(--axebow-gray);
439
- border-color: var(--axebow-gray);
440
- outline-color: var(--axebow-gray);
441
- }
442
-
443
- /** Text button */
444
- sl-button[variant='text']::part(base) {
445
- outline-color: var(--axebow-tertiary);
446
- }
447
- sl-button[variant='text']::part(label) {
448
- color: var(--axebow-tertiary);
449
- }
450
- sl-button[variant='text']:hover::part(base) {
451
- outline-color: var(--axebow-gray);
452
- border-radius: 0.375rem;
453
- }
454
- sl-button[variant='text']:hover::part(label) {
455
- color: var(--axebow-gray);
456
- }
457
-
458
- /** Success button */
459
- sl-button[variant='success']::part(base) {
460
- background: var(--axebow-success);
461
- border-color: var(--axebow-success);
462
- color: white;
463
- border-radius: 0.5rem;
464
- outline-color: var(--axebow-success);
465
- }
466
- sl-button[variant='success']:hover::part(base) {
467
- background: var(--axebow-gray);
468
- border-color: var(--axebow-gray);
469
- outline-color: var(--axebow-gray);
470
- }
471
-
472
- /** Danger button */
473
- sl-button[variant='danger']::part(base) {
474
- background: var(--axebow-error);
475
- border-color: var(--axebow-error);
476
- color: white;
477
- outline-color: var(--axebow-error);
478
- }
479
- sl-button[variant='danger']:hover::part(base) {
480
- background: var(--axebow-gray);
481
- border-color: var(--axebow-gray);
482
- outline-color: var(--axebow-gray);
483
- }
484
-
485
- /** Danger outlined */
486
- sl-button[variant='danger'][outline]::part(base) {
487
- background: transparent;
488
- color: var(--axebow-error);
489
- border-color: var(--axebow-error);
490
- outline-color: var(--axebow-error);
491
- }
492
- sl-button[variant='danger'][outline]:hover::part(base) {
493
- color: var(--axebow-gray);
494
- border-color: var(--axebow-gray);
495
- outline-color: var(--axebow-gray);
496
- }
497
-
498
- /** Danger text (host class) */
499
- :host(.axebow-red-button-text) sl-button::part(base) {
500
- outline-color: var(--axebow-error);
501
- }
502
- :host(.axebow-red-button-text) sl-button::part(label) {
503
- color: var(--axebow-error);
504
- }
505
- :host(.axebow-red-button-text) sl-button:hover::part(base) {
506
- outline-color: var(--axebow-gray);
507
- }
508
- :host(.axebow-red-button-text) sl-button:hover::part(label) {
509
- color: var(--axebow-gray);
510
- }
511
-
512
- /** Warning button (host class) */
513
- :host(.axebow-warning-button-bg) sl-button::part(base) {
514
- color: var(--axebow-tertiary);
515
- border-color: var(--axebow-tertiary);
516
- outline-color: var(--axebow-tertiary);
517
- }
518
- :host(.axebow-warning-button-bg) sl-button:hover::part(base) {
519
- color: var(--axebow-gray);
520
- border-color: var(--axebow-gray);
521
- outline-color: var(--axebow-gray);
522
- }
523
-
524
- /**
525
- * Boxed hover look shared with axebow-more-actions, opt-in via
526
- * hoverStyle="border". Declared last so it wins over every
527
- * variant's own hover rule above, regardless of which variant
528
- * it's combined with.
529
- */
530
- sl-button[hoverstyle='border']:hover::part(base) {
531
- background-color: var(--axebow-anti-flash-white) !important;
532
- border-radius: 0.5rem !important;
533
- outline-color: transparent !important;
534
- border-color: transparent !important;
535
- }
536
- sl-button[hoverstyle='border']:hover::part(label) {
537
- color: var(--axebow-gray) !important;
538
- }
539
- `];
540
- }
541
- render() {
542
- return html`
543
- <sl-button
544
- exportparts="base, label, prefix, suffix, caret"
545
- hoverstyle=${this.hoverStyle}
546
- variant=${this.variant}
547
- size=${this.size}
548
- ?outline=${this.outline}
549
- ?pill=${this.pill}
550
- ?circle=${this.circle}
551
- ?disabled=${this.disabled}
552
- ?loading=${this.loading}
553
- ?caret=${this.caret}
554
- type=${this.type}
555
- href=${ifDefined(this.href)}
556
- target=${ifDefined(this.target)}
557
- name=${ifDefined(this.name)}
558
- value=${ifDefined(this.value)}
559
- >
560
- <slot name="prefix" slot="prefix"></slot>
561
- <slot></slot>
562
- <slot name="suffix" slot="suffix"></slot>
563
- </sl-button>
564
- `;
565
- }
566
- };
567
- __decorate([property({
568
- type: String,
569
- reflect: true
570
- })], AxebowButton.prototype, "variant", void 0);
571
- __decorate([property({
572
- type: String,
573
- reflect: true
574
- })], AxebowButton.prototype, "size", void 0);
575
- __decorate([property({
576
- type: Boolean,
577
- reflect: true
578
- })], AxebowButton.prototype, "outline", void 0);
579
- __decorate([property({
580
- type: Boolean,
581
- reflect: true
582
- })], AxebowButton.prototype, "pill", void 0);
583
- __decorate([property({
584
- type: Boolean,
585
- reflect: true
586
- })], AxebowButton.prototype, "circle", void 0);
587
- __decorate([property({
588
- type: Boolean,
589
- attribute: false
590
- })], AxebowButton.prototype, "disabled", void 0);
591
- __decorate([property({
592
- type: Boolean,
593
- reflect: true
594
- })], AxebowButton.prototype, "loading", void 0);
595
- __decorate([property({
596
- type: Boolean,
597
- reflect: true
598
- })], AxebowButton.prototype, "caret", void 0);
599
- __decorate([property({ type: String })], AxebowButton.prototype, "type", void 0);
600
- __decorate([property({ type: String })], AxebowButton.prototype, "href", void 0);
601
- __decorate([property({ type: String })], AxebowButton.prototype, "target", void 0);
602
- __decorate([property({ type: String })], AxebowButton.prototype, "name", void 0);
603
- __decorate([property({ type: String })], AxebowButton.prototype, "value", void 0);
604
- __decorate([property({ type: String })], AxebowButton.prototype, "fixedWidth", void 0);
605
- __decorate([property({ type: String })], AxebowButton.prototype, "fixedHeight", void 0);
606
- __decorate([property({ type: String })], AxebowButton.prototype, "paddingTop", void 0);
607
- __decorate([property({ type: String })], AxebowButton.prototype, "paddingRight", void 0);
608
- __decorate([property({ type: String })], AxebowButton.prototype, "paddingBottom", void 0);
609
- __decorate([property({ type: String })], AxebowButton.prototype, "paddingLeft", void 0);
610
- __decorate([property({ type: String })], AxebowButton.prototype, "hoverStyle", void 0);
611
- AxebowButton = __decorate([customElement("axebow-button")], AxebowButton);
612
- //#endregion
613
- //#region src/components/axebow-search/axebow-search.ts
614
- var AxebowSearch = class AxebowSearch extends LitElement {
615
- constructor(..._args) {
616
- super(..._args);
617
- this.value = "";
618
- this.placeholder = "";
619
- }
620
- static {
621
- this.styles = [unsafeCSS(tailwind_default), css`
622
- :host {
623
- display: inline-block;
624
- }
625
- sl-input {
626
- width: 20rem;
627
- --sl-focus-ring-width: 0px;
628
- }
629
- :host(.axebow-fixed-width) sl-input {
630
- width: var(--axebow-search-width);
631
- }
632
- sl-input::part(base) {
633
- height: var(--axebow-search-height, 2.5rem);
634
- border: 1px solid #dbdde4;
635
- border-radius: 0.375rem;
636
- box-shadow: none;
637
- }
638
- sl-input::part(input) {
639
- height: var(--axebow-search-height, 2.5rem) !important;
640
- }
641
- sl-input:focus-within::part(base) {
642
- border-color: var(--axebow-tertiary);
643
- }
644
- sl-input::part(input) {
645
- color: var(--axebow-rich-black, #0d1821);
646
- font-size: 0.875rem;
647
- }
648
- sl-input::part(prefix) {
649
- padding-inline-start: 0.75rem;
650
- }
651
- `];
652
- }
653
- updated(changed) {
654
- super.updated(changed);
655
- if (changed.has("width")) if (this.width) {
656
- this.style.setProperty("--axebow-search-width", this.width);
657
- this.classList.add("axebow-fixed-width");
658
- } else {
659
- this.style.removeProperty("--axebow-search-width");
660
- this.classList.remove("axebow-fixed-width");
661
- }
662
- if (changed.has("height")) if (this.height) this.style.setProperty("--axebow-search-height", this.height);
663
- else this.style.removeProperty("--axebow-search-height");
664
- }
665
- _emitChange(value) {
666
- this.dispatchEvent(new CustomEvent("search-change", {
667
- detail: { value },
668
- bubbles: true,
669
- composed: true
670
- }));
671
- }
672
- _onInput(e) {
673
- this._emitChange(e.target.value);
674
- }
675
- _onClear() {
676
- this._emitChange("");
677
- }
678
- render() {
679
- return html`
680
- <sl-input placeholder=${this.placeholder} .value=${this.value} clearable @sl-input=${this._onInput} @sl-clear=${this._onClear}>
681
- <axebow-icon slot="prefix" iconName="search" iconColor="var(--axebow-gray)" size="md"></axebow-icon>
682
- </sl-input>
683
- `;
684
- }
685
- };
686
- __decorate([property({ type: String })], AxebowSearch.prototype, "value", void 0);
687
- __decorate([property({ type: String })], AxebowSearch.prototype, "placeholder", void 0);
688
- __decorate([property({ type: String })], AxebowSearch.prototype, "width", void 0);
689
- __decorate([property({ type: String })], AxebowSearch.prototype, "height", void 0);
690
- AxebowSearch = __decorate([customElement("axebow-search")], AxebowSearch);
691
- //#endregion
692
- //#region src/components/axebow-tenant-filters/axebow-tenant-filters.ts
693
- var AxebowTenantFilters = class AxebowTenantFilters extends LitElement {
694
- constructor(..._args) {
695
- super(..._args);
696
- this.values = {
697
- search: "",
698
- role: "all",
699
- provider: "all",
700
- plan: "all",
701
- sortBy: "newToOlder"
702
- };
703
- this.roleOptions = [];
704
- this.providerOptions = [];
705
- this.planOptions = [];
706
- this.sortOptions = [];
707
- this.hideSearchAndCreate = false;
708
- this.createTenantLabel = "";
709
- this.searchPlaceholder = "";
710
- this.rolePlaceholder = "";
711
- this.providerPlaceholder = "";
712
- this.planPlaceholder = "";
713
- this.clearAllLabel = "";
714
- }
715
- get _activeControlsCount() {
716
- const { search, role, provider, plan } = this.values;
717
- return [
718
- search !== "",
719
- role !== "all",
720
- provider !== "all",
721
- plan !== "all"
722
- ].filter(Boolean).length;
723
- }
724
- static {
725
- this.styles = [unsafeCSS(tailwind_default), css`
726
- :host {
727
- width: 100%;
728
- }
729
- axebow-button:hover axebow-icon {
730
- --icon-btn-color: var(--axebow-gray);
731
- }
732
- sl-select::part(combobox):hover {
733
- border-color: black;
734
- }
735
- sl-input::part(base):hover {
736
- border-color: black;
737
- }
738
- .clear-all-link {
739
- cursor: pointer;
740
- color: var(--axebow-tertiary);
741
- font-size: 0.875rem;
742
- text-decoration: underline;
743
- }
744
- .clear-all-link:hover {
745
- opacity: 0.75;
746
- }
747
- .create-tenant-button::part(base) {
748
- font-size: 0.875rem !important;
749
- }
750
- .filter-select::part(combobox) {
751
- height: 2.5rem !important;
752
- min-height: 2.5rem !important;
753
- }
754
- `];
755
- }
756
- _dispatch(key, value) {
757
- this.values = {
758
- ...this.values,
759
- [key]: value
760
- };
761
- this.dispatchEvent(new CustomEvent("filter-change", {
762
- detail: {
763
- key,
764
- value
765
- },
766
- bubbles: true,
767
- composed: true
768
- }));
769
- }
770
- _onSearchChange(e) {
771
- this._dispatch("search", e.detail.value);
772
- }
773
- _onSelectChange(e, key) {
774
- const value = e.target.value;
775
- this._dispatch(key, value || "all");
776
- }
777
- _onSelectClear(key) {
778
- this._dispatch(key, "all");
779
- }
780
- _onCreateTenant() {
781
- this.dispatchEvent(new CustomEvent("create-tenant", {
782
- bubbles: true,
783
- composed: true
784
- }));
785
- }
786
- _onClearAll() {
787
- this.dispatchEvent(new CustomEvent("clear-all", {
788
- bubbles: true,
789
- composed: true
790
- }));
791
- }
792
- render() {
793
- const showClearAll = this._activeControlsCount >= 2;
794
- const roleValue = this.values.role !== "all" ? this.values.role : "";
795
- const providerValue = this.values.provider !== "all" ? this.values.provider : "";
796
- const planValue = this.values.plan !== "all" ? this.values.plan : "";
797
- return html`
798
- <div>
799
- <div class="flex items-center gap-4 mb-2">
800
- ${!this.hideSearchAndCreate ? html`
801
- <axebow-button
802
- variant="primary"
803
- outline
804
- class="create-tenant-button"
805
- fixedWidth="9rem"
806
- fixedHeight="2.5rem"
807
- paddingRight="0.5rem"
808
- @click=${this._onCreateTenant}
809
- >
810
- ${this.createTenantLabel}
811
- <axebow-icon
812
- slot="suffix"
813
- iconName="add"
814
- iconColor="var(--icon-btn-color, var(--axebow-tertiary))"
815
- ></axebow-icon>
816
- </axebow-button>
817
-
818
- <axebow-search
819
- placeholder=${this.searchPlaceholder}
820
- .value=${this.values.search}
821
- width="26.25rem"
822
- height="2.5rem"
823
- @search-change=${this._onSearchChange}
824
- ></axebow-search>
825
- ` : ""}
826
-
827
- <sl-select
828
- placeholder=${this.rolePlaceholder}
829
- .value=${roleValue}
830
- @sl-change=${(e) => this._onSelectChange(e, "role")}
831
- @sl-clear=${() => this._onSelectClear("role")}
832
- clearable
833
- class="w-33.25 h-10 filter-select"
834
- >
835
- ${this.roleOptions.map((opt) => html`<sl-option value="${opt.value}">${opt.label}</sl-option>`)}
836
- </sl-select>
837
-
838
- <sl-select
839
- placeholder=${this.providerPlaceholder}
840
- .value=${providerValue}
841
- @sl-change=${(e) => this._onSelectChange(e, "provider")}
842
- @sl-clear=${() => this._onSelectClear("provider")}
843
- clearable
844
- class="w-33.25 h-10 filter-select"
845
- >
846
- ${this.providerOptions.map((opt) => html`
847
- <sl-option value="${opt.value}">
848
- <span class="flex items-center justify-between w-full gap-2">
849
- ${opt.label}
850
- ${opt.logo ? html`<img src="${opt.logo}" alt="${opt.label}" class="h-4 w-auto object-contain ml-auto" />` : ""}
851
- </span>
852
- </sl-option>
853
- `)}
854
- </sl-select>
855
-
856
- <sl-select
857
- placeholder=${this.planPlaceholder}
858
- .value=${planValue}
859
- @sl-change=${(e) => this._onSelectChange(e, "plan")}
860
- @sl-clear=${() => this._onSelectClear("plan")}
861
- clearable
862
- class="w-33.25 h-10 filter-select"
863
- >
864
- ${this.planOptions.map((opt) => html`<sl-option value="${opt.value}">${opt.label}</sl-option>`)}
865
- </sl-select>
866
-
867
- <sl-select
868
- .value=${this.values.sortBy}
869
- @sl-change=${(e) => this._onSelectChange(e, "sortBy")}
870
- class="w-33.25 h-10 filter-select"
871
- >
872
- ${this.sortOptions.map((opt) => html`<sl-option value="${opt.value}">${opt.label}</sl-option>`)}
873
- </sl-select>
874
- </div>
875
-
876
- ${showClearAll ? html`
877
- <div class="flex justify-end mb-2">
878
- <axebow-button variant="text" @click=${this._onClearAll}>${this.clearAllLabel}</axebow-button>
879
- </div>
880
- ` : ""}
881
- </div>
882
- `;
883
- }
884
- };
885
- __decorate([property({ type: Object })], AxebowTenantFilters.prototype, "values", void 0);
886
- __decorate([property({ type: Array })], AxebowTenantFilters.prototype, "roleOptions", void 0);
887
- __decorate([property({ type: Array })], AxebowTenantFilters.prototype, "providerOptions", void 0);
888
- __decorate([property({ type: Array })], AxebowTenantFilters.prototype, "planOptions", void 0);
889
- __decorate([property({ type: Array })], AxebowTenantFilters.prototype, "sortOptions", void 0);
890
- __decorate([property({ type: Boolean })], AxebowTenantFilters.prototype, "hideSearchAndCreate", void 0);
891
- __decorate([property({ type: String })], AxebowTenantFilters.prototype, "createTenantLabel", void 0);
892
- __decorate([property({ type: String })], AxebowTenantFilters.prototype, "searchPlaceholder", void 0);
893
- __decorate([property({ type: String })], AxebowTenantFilters.prototype, "rolePlaceholder", void 0);
894
- __decorate([property({ type: String })], AxebowTenantFilters.prototype, "providerPlaceholder", void 0);
895
- __decorate([property({ type: String })], AxebowTenantFilters.prototype, "planPlaceholder", void 0);
896
- __decorate([property({ type: String })], AxebowTenantFilters.prototype, "clearAllLabel", void 0);
897
- AxebowTenantFilters = __decorate([customElement("axebow-tenant-filters")], AxebowTenantFilters);
898
- //#endregion
899
- //#region src/components/axebow-header/parts/axebow-quick-action-card.ts
900
- var AxebowQuickActionCard = class AxebowQuickActionCard extends LitElement {
901
- constructor(..._args) {
902
- super(..._args);
903
- this.icon = "";
904
- this.label = "";
905
- }
906
- static {
907
- this.styles = [unsafeCSS(tailwind_default), css`:host { display: block; }`];
908
- }
909
- render() {
910
- return html`
911
- <div
912
- 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"
913
- @click=${this._onClick}
914
- >
915
- <axebow-icon iconName=${this.icon} iconColor="var(--axebow-primary)" size="xl"></axebow-icon>
916
- <span class="text-base font-semibold text-(--axebow-primary) text-center whitespace-nowrap">${this.label}</span>
917
- </div>
918
- `;
919
- }
920
- _onClick() {
921
- this.dispatchEvent(new CustomEvent("card-click", {
922
- bubbles: true,
923
- composed: true
924
- }));
925
- }
926
- };
927
- __decorate([property({ type: String })], AxebowQuickActionCard.prototype, "icon", void 0);
928
- __decorate([property({ type: String })], AxebowQuickActionCard.prototype, "label", void 0);
929
- AxebowQuickActionCard = __decorate([customElement("axebow-quick-action-card")], AxebowQuickActionCard);
930
- //#endregion
931
- //#region src/components/axebow-header/parts/axebow-quick-actions.ts
932
- var AxebowQuickActions = class AxebowQuickActions extends LitElement {
933
- constructor(..._args) {
934
- super(..._args);
935
- this.label = "";
936
- this.actions = [];
937
- this.open = false;
938
- this._handleOutsideClick = (e) => {
939
- if (this.open && !this.contains(e.target)) this.open = false;
940
- };
941
- }
942
- static {
943
- this.styles = [unsafeCSS(tailwind_default), css`:host { display: inline-block; }`];
944
- }
945
- connectedCallback() {
946
- super.connectedCallback();
947
- document.addEventListener("click", this._handleOutsideClick);
948
- }
949
- disconnectedCallback() {
950
- super.disconnectedCallback();
951
- document.removeEventListener("click", this._handleOutsideClick);
952
- }
953
- _toggle(e) {
954
- e.stopPropagation();
955
- this.open = !this.open;
956
- }
957
- _select(action) {
958
- action.onClick();
959
- this.open = false;
960
- }
961
- render() {
962
- const row1 = this.actions.slice(0, 3).filter((a) => a.visible);
963
- const row2 = this.actions.slice(3, 7).filter((a) => a.visible);
964
- return html`
965
- <div class="relative">
966
- <button
967
- type="button"
968
- 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)"}"
969
- @click=${this._toggle}
970
- >
971
- <span
972
- class="flex flex-col items-center justify-center gap-1 ${this.open ? "text-(--axebow-primary)" : "text-white group-hover:text-(--axebow-primary)"}"
973
- >
974
- <axebow-icon iconName=${this.open ? "close" : "apps"} iconColor="currentColor" size="xl"></axebow-icon>
975
- <span
976
- class="text-xs whitespace-nowrap ${this.open ? "font-semibold" : "font-normal group-hover:font-semibold"}"
977
- >${this.label}</span
978
- >
979
- </span>
980
- </button>
981
-
982
- ${this.open ? html`
983
- <div
984
- 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"
985
- >
986
- <div class="flex gap-1">
987
- ${row1.map((action) => html`
988
- <axebow-quick-action-card
989
- icon=${action.icon}
990
- label=${action.label}
991
- @card-click=${() => this._select(action)}
992
- ></axebow-quick-action-card>
993
- `)}
994
- </div>
995
- ${row2.length ? html`
996
- <div class="h-[0.0625rem] w-full bg-(--axebow-light-gray)"></div>
997
- <div class="flex flex-wrap gap-x-1 gap-y-[0.1875rem]">
998
- ${row2.map((action) => html`
999
- <axebow-quick-action-card
1000
- icon=${action.icon}
1001
- label=${action.label}
1002
- @card-click=${() => this._select(action)}
1003
- ></axebow-quick-action-card>
1004
- `)}
1005
- </div>
1006
- ` : ""}
1007
- </div>
1008
- ` : ""}
1009
- </div>
1010
- `;
1011
- }
1012
- };
1013
- __decorate([property({ type: String })], AxebowQuickActions.prototype, "label", void 0);
1014
- __decorate([property({ type: Array })], AxebowQuickActions.prototype, "actions", void 0);
1015
- __decorate([state()], AxebowQuickActions.prototype, "open", void 0);
1016
- AxebowQuickActions = __decorate([customElement("axebow-quick-actions")], AxebowQuickActions);
1017
- //#endregion
1018
- //#region src/components/axebow-header/parts/axebow-header-actions.ts
1019
- var AxebowHeaderActions = class AxebowHeaderActions extends LitElement {
1020
- constructor(..._args) {
1021
- super(..._args);
1022
- this.userName = "";
1023
- this.profileMenuItems = [];
1024
- this.logoutLabel = "";
1025
- this.onLogout = () => {};
1026
- this.notificationsLabel = "";
1027
- this.notifications = [];
1028
- this.actionNeededNotifications = [];
1029
- this.myNotificationsTabLabel = "";
1030
- this.actionNeededTabLabel = "";
1031
- this.noNotificationsLabel = "";
1032
- this.noUnreadNotificationsLabel = "";
1033
- this.noActionNotificationsLabel = "";
1034
- this.showUnreadOnlyLabel = "";
1035
- this.onLabel = "";
1036
- this.offLabel = "";
1037
- this.markAllAsReadLabel = "";
1038
- this.onMarkAllAsRead = () => {};
1039
- this.showUnreadOnly = false;
1040
- }
1041
- static {
1042
- this.styles = [unsafeCSS(tailwind_default), css`
1043
- sl-dropdown::part(panel) {
1044
- max-width: 500px;
1045
- }
1046
- .notification-description code {
1047
- display: inline-block;
1048
- white-space: pre-wrap;
1049
- word-break: break-all;
1050
- }
1051
- .notification-description pre {
1052
- white-space: pre-wrap;
1053
- }
1054
- `];
1055
- }
1056
- handleShowUnreadOnlyChange(e) {
1057
- this.showUnreadOnly = e.target.checked;
1058
- }
1059
- render() {
1060
- const unreadNotifications = this.notifications.filter((n) => n.status === "unread");
1061
- const notificationsToShow = this.showUnreadOnly ? unreadNotifications : this.notifications;
1062
- return html`
1063
- <div class="flex items-center gap-2 z-10 shrink-0 min-w-0 ml-auto">
1064
- <sl-dropdown>
1065
- <div
1066
- class="relative group w-9 h-9 rounded-lg flex items-center justify-center cursor-pointer transition-colors duration-150 hover:bg-(--axebow-primary)"
1067
- slot="trigger"
1068
- >
1069
- <span class="inline-block transition-transform duration-200 group-hover:rotate-15">
1070
- <axebow-icon iconName="notifications" iconColor="white"></axebow-icon>
1071
- </span>
1072
- ${unreadNotifications.length > 0 ? html`<div
1073
- 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"}"
1074
- >
1075
- ${unreadNotifications.length > 99 ? "99+" : unreadNotifications.length}
1076
- </div>` : ""}
1077
- <span
1078
- 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"
1079
- >${this.notificationsLabel}</span
1080
- >
1081
- </div>
1082
- <sl-tab-group class="bg-white rounded-lg w-120 text-base">
1083
- <sl-tab slot="nav" panel="my_notifications">${this.myNotificationsTabLabel}</sl-tab>
1084
- <sl-tab slot="nav" panel="action_needed">${this.actionNeededTabLabel}</sl-tab>
499
+ `];
500
+ }
501
+ handleShowUnreadOnlyChange(e) {
502
+ this.showUnreadOnly = e.target.checked;
503
+ }
504
+ render() {
505
+ const unreadNotifications = this.notifications.filter((n) => n.status === "unread");
506
+ const notificationsToShow = this.showUnreadOnly ? unreadNotifications : this.notifications;
507
+ return html`
508
+ <div class="flex items-center gap-2 z-10 shrink-0 min-w-0 ml-auto">
509
+ <sl-dropdown>
510
+ <div
511
+ class="relative group w-9 h-9 rounded-lg flex items-center justify-center cursor-pointer transition-colors duration-150 hover:bg-(--axebow-primary)"
512
+ slot="trigger"
513
+ >
514
+ <span class="inline-block transition-transform duration-200 group-hover:rotate-15">
515
+ <axebow-icon iconName="notifications" iconColor="white"></axebow-icon>
516
+ </span>
517
+ ${unreadNotifications.length > 0 ? html`<div
518
+ 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"}"
519
+ >
520
+ ${unreadNotifications.length > 99 ? "99+" : unreadNotifications.length}
521
+ </div>` : ""}
522
+ <span
523
+ 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"
524
+ >${this.notificationsLabel}</span
525
+ >
526
+ </div>
527
+ <sl-tab-group class="bg-white rounded-lg w-120 text-base">
528
+ <sl-tab slot="nav" panel="my_notifications">${this.myNotificationsTabLabel}</sl-tab>
529
+ <sl-tab slot="nav" panel="action_needed">${this.actionNeededTabLabel}</sl-tab>
1085
530
 
1086
531
  <sl-tab-panel class="bg-gray-100" name="my_notifications">
1087
532
  <div class="flex flex-col gap-2 px-4 max-h-[40vh] overflow-auto w-full">
@@ -1399,173 +844,537 @@ var AxebowSidebar = class AxebowSidebar extends LitElement {
1399
844
  </li>
1400
845
  `;
1401
846
  }
1402
- _renderBottomItem(item) {
847
+ _renderBottomItem(item) {
848
+ return html`
849
+ <li
850
+ class="flex flex-col w-full items-center justify-center cursor-pointer relative group"
851
+ @click="${() => item.onClick()}"
852
+ @mouseenter="${(e) => this.handleMouseEnter(e, item)}"
853
+ @mouseleave="${() => this.handleMouseLeave()}"
854
+ title="${item.label}"
855
+ >
856
+ <div class="flex flex-col items-center justify-center py-3">
857
+ <axebow-icon iconName="${item.icon}" size="xl"></axebow-icon>
858
+ <span class="text-sm overflow-hidden whitespace-nowrap opacity-100 max-w-full"
859
+ >${item.label}${item.openInNewTab ? html`<axebow-icon iconName="open_in_new" size="sm"></axebow-icon>` : ""}</span
860
+ >
861
+ </div>
862
+
863
+ <div
864
+ 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"
865
+ ></div>
866
+ </li>
867
+ `;
868
+ }
869
+ };
870
+ __decorate([property({ type: Array })], AxebowSidebar.prototype, "items", void 0);
871
+ __decorate([property({ type: Array })], AxebowSidebar.prototype, "bottomItems", void 0);
872
+ __decorate([property({ type: String })], AxebowSidebar.prototype, "selectedKey", void 0);
873
+ __decorate([property({ type: Number })], AxebowSidebar.prototype, "paddingBottom", void 0);
874
+ __decorate([state()], AxebowSidebar.prototype, "hoveredItem", void 0);
875
+ __decorate([state()], AxebowSidebar.prototype, "tooltipTop", void 0);
876
+ __decorate([state()], AxebowSidebar.prototype, "tooltipLeft", void 0);
877
+ AxebowSidebar = __decorate([customElement("axebow-sidebar")], AxebowSidebar);
878
+ //#endregion
879
+ //#region src/components/axebow-footer/axebow-footer.ts
880
+ var AxebowFooter = class AxebowFooter extends LitElement {
881
+ constructor(..._args) {
882
+ super(..._args);
883
+ this.links = [];
884
+ this.emitFooterHeight = () => {
885
+ const rect = this.getBoundingClientRect();
886
+ const windowHeight = window.innerHeight;
887
+ let visible = 0;
888
+ if (rect.top < windowHeight && rect.bottom > 0) visible = Math.min(rect.bottom, windowHeight) - Math.max(rect.top, 0);
889
+ visible = Math.max(0, visible);
890
+ this.dispatchEvent(new CustomEvent("footer-height-changed", {
891
+ detail: { height: visible },
892
+ bubbles: true,
893
+ composed: true
894
+ }));
895
+ };
896
+ }
897
+ static {
898
+ this.styles = [unsafeCSS(tailwind_default), css`
899
+ :host {
900
+ display: block;
901
+ width: 100%;
902
+ position: relative;
903
+ z-index: 1001;
904
+ overflow: hidden;
905
+ }
906
+ `];
907
+ }
908
+ connectedCallback() {
909
+ super.connectedCallback();
910
+ this.resizeObserver = new ResizeObserver(() => {
911
+ this.emitFooterHeight();
912
+ });
913
+ this.resizeObserver.observe(this);
914
+ window.addEventListener("resize", this.emitFooterHeight);
915
+ window.addEventListener("scroll", this.emitFooterHeight, true);
916
+ setTimeout(() => this.emitFooterHeight(), 0);
917
+ }
918
+ disconnectedCallback() {
919
+ super.disconnectedCallback();
920
+ this.resizeObserver?.disconnect();
921
+ window.removeEventListener("resize", this.emitFooterHeight);
922
+ window.removeEventListener("scroll", this.emitFooterHeight, true);
923
+ }
924
+ render() {
925
+ return html`
926
+ <footer
927
+ 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"
928
+ >
929
+ ${this.links.map((link) => html`
930
+ <button
931
+ 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"
932
+ @click=${link.onClick}
933
+ >
934
+ ${link.label}
935
+ <axebow-icon iconName="open_in_new" iconColor="var(--axebow-anti-flash-white)" size="md"></axebow-icon>
936
+ </button>
937
+ `)}
938
+ </footer>
939
+ `;
940
+ }
941
+ };
942
+ __decorate([property({ type: Array })], AxebowFooter.prototype, "links", void 0);
943
+ AxebowFooter = __decorate([customElement("axebow-footer")], AxebowFooter);
944
+ //#endregion
945
+ //#region src/components/axebow-breadcrumb-header/axebow-breadcrumb-header.ts
946
+ var AxebowBreadcrumbHeader = class AxebowBreadcrumbHeader extends LitElement {
947
+ constructor(..._args) {
948
+ super(..._args);
949
+ this.padded = false;
950
+ this.paddingBottom = "2rem";
951
+ this.showHomeBlock = true;
952
+ this.onHomeClick = () => {};
953
+ this.showSecondaryPages = false;
954
+ this.secondaryPages = [];
955
+ this.mainPage = "";
956
+ this.showRequiredField = false;
957
+ this.requiredFieldLabel = "";
958
+ }
959
+ static {
960
+ this.styles = [unsafeCSS(tailwind_default), css`
961
+ :host {
962
+ display: block;
963
+ width: 100%;
964
+ }
965
+ `];
966
+ }
967
+ render() {
1403
968
  return html`
1404
- <li
1405
- class="flex flex-col w-full items-center justify-center cursor-pointer relative group"
1406
- @click="${() => item.onClick()}"
1407
- @mouseenter="${(e) => this.handleMouseEnter(e, item)}"
1408
- @mouseleave="${() => this.handleMouseLeave()}"
1409
- title="${item.label}"
969
+ <div
970
+ class="flex flex-col gap-1 pt-8 ${this.padded ? "ps-8" : ""}"
971
+ style="padding-bottom: ${this.paddingBottom};"
1410
972
  >
1411
- <div class="flex flex-col items-center justify-center py-3">
1412
- <axebow-icon iconName="${item.icon}" size="xl"></axebow-icon>
1413
- <span class="text-sm overflow-hidden whitespace-nowrap opacity-100 max-w-full"
1414
- >${item.label}${item.openInNewTab ? html`<axebow-icon iconName="open_in_new" size="sm"></axebow-icon>` : ""}</span
1415
- >
973
+ <div class="flex flex-wrap items-center gap-2 text-xl text-(--axebow-primary)">
974
+ ${this.showHomeBlock ? html`
975
+ <span class="flex items-center gap-2 cursor-pointer" @click=${() => this.onHomeClick()}>
976
+ <axebow-icon
977
+ iconName="home"
978
+ iconColor="var(--axebow-primary)"
979
+ size="xl"
980
+ style="display: inline-flex; align-items: center; justify-content: center;"
981
+ ></axebow-icon>
982
+ <span class="font-normal">/</span>
983
+ </span>
984
+ ` : ""}
985
+ ${this.showSecondaryPages ? this.secondaryPages.map((page) => html`
986
+ <span
987
+ class="font-normal ${page.onClick ? "cursor-pointer hover:underline" : ""}"
988
+ @click=${page.onClick ? () => page.onClick() : void 0}
989
+ >${page.label} /</span
990
+ >
991
+ `) : ""}
992
+ <span class="font-semibold">${this.mainPage}</span>
1416
993
  </div>
1417
-
1418
- <div
1419
- 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"
1420
- ></div>
1421
- </li>
994
+ ${this.showRequiredField ? html`
995
+ <div class="text-sm">
996
+ <span class="font-bold text-(--axebow-error)">*</span>
997
+ <span class="font-normal text-(--axebow-rich-black)"> ${this.requiredFieldLabel}</span>
998
+ </div>
999
+ ` : ""}
1000
+ </div>
1422
1001
  `;
1423
1002
  }
1424
1003
  };
1425
- __decorate([property({ type: Array })], AxebowSidebar.prototype, "items", void 0);
1426
- __decorate([property({ type: Array })], AxebowSidebar.prototype, "bottomItems", void 0);
1427
- __decorate([property({ type: String })], AxebowSidebar.prototype, "selectedKey", void 0);
1428
- __decorate([property({ type: Number })], AxebowSidebar.prototype, "paddingBottom", void 0);
1429
- __decorate([state()], AxebowSidebar.prototype, "hoveredItem", void 0);
1430
- __decorate([state()], AxebowSidebar.prototype, "tooltipTop", void 0);
1431
- __decorate([state()], AxebowSidebar.prototype, "tooltipLeft", void 0);
1432
- AxebowSidebar = __decorate([customElement("axebow-sidebar")], AxebowSidebar);
1004
+ __decorate([property({ type: Boolean })], AxebowBreadcrumbHeader.prototype, "padded", void 0);
1005
+ __decorate([property({ type: String })], AxebowBreadcrumbHeader.prototype, "paddingBottom", void 0);
1006
+ __decorate([property({ type: Boolean })], AxebowBreadcrumbHeader.prototype, "showHomeBlock", void 0);
1007
+ __decorate([property({ attribute: false })], AxebowBreadcrumbHeader.prototype, "onHomeClick", void 0);
1008
+ __decorate([property({ type: Boolean })], AxebowBreadcrumbHeader.prototype, "showSecondaryPages", void 0);
1009
+ __decorate([property({ type: Array })], AxebowBreadcrumbHeader.prototype, "secondaryPages", void 0);
1010
+ __decorate([property({ type: String })], AxebowBreadcrumbHeader.prototype, "mainPage", void 0);
1011
+ __decorate([property({ type: Boolean })], AxebowBreadcrumbHeader.prototype, "showRequiredField", void 0);
1012
+ __decorate([property({ type: String })], AxebowBreadcrumbHeader.prototype, "requiredFieldLabel", void 0);
1013
+ AxebowBreadcrumbHeader = __decorate([customElement("axebow-breadcrumb-header")], AxebowBreadcrumbHeader);
1433
1014
  //#endregion
1434
- //#region src/components/axebow-footer/axebow-footer.ts
1435
- var AxebowFooter = class AxebowFooter extends LitElement {
1436
- constructor(..._args) {
1437
- super(..._args);
1438
- this.links = [];
1439
- this.emitFooterHeight = () => {
1440
- const rect = this.getBoundingClientRect();
1441
- const windowHeight = window.innerHeight;
1442
- let visible = 0;
1443
- if (rect.top < windowHeight && rect.bottom > 0) visible = Math.min(rect.bottom, windowHeight) - Math.max(rect.top, 0);
1444
- visible = Math.max(0, visible);
1445
- this.dispatchEvent(new CustomEvent("footer-height-changed", {
1446
- detail: { height: visible },
1447
- bubbles: true,
1448
- composed: true
1449
- }));
1015
+ //#region src/components/axebow-button/axebow-button.ts
1016
+ var AxebowButton = class AxebowButton extends LitElement {
1017
+ constructor() {
1018
+ super();
1019
+ this.variant = "default";
1020
+ this.size = "medium";
1021
+ this.outline = false;
1022
+ this.pill = false;
1023
+ this.circle = false;
1024
+ this.disabled = false;
1025
+ this.loading = false;
1026
+ this.caret = false;
1027
+ this.type = "button";
1028
+ this.hoverStyle = "simple";
1029
+ this._guardDisabledClick = (event) => {
1030
+ if (this.disabled || this.loading) {
1031
+ event.preventDefault();
1032
+ event.stopPropagation();
1033
+ }
1450
1034
  };
1035
+ this.addEventListener("click", this._guardDisabledClick, { capture: true });
1036
+ }
1037
+ updated(changed) {
1038
+ if (changed.has("fixedWidth")) if (this.fixedWidth) this.style.setProperty("--axebow-button-width", this.fixedWidth);
1039
+ else this.style.removeProperty("--axebow-button-width");
1040
+ if (changed.has("fixedHeight")) if (this.fixedHeight) this.style.setProperty("--axebow-button-height", this.fixedHeight);
1041
+ else this.style.removeProperty("--axebow-button-height");
1042
+ this._syncPaddingVar(changed, "paddingTop", "--axebow-button-padding-top");
1043
+ this._syncPaddingVar(changed, "paddingRight", "--axebow-button-padding-right");
1044
+ this._syncPaddingVar(changed, "paddingBottom", "--axebow-button-padding-bottom");
1045
+ this._syncPaddingVar(changed, "paddingLeft", "--axebow-button-padding-left");
1046
+ }
1047
+ _syncPaddingVar(changed, prop, cssVar) {
1048
+ if (!changed.has(prop)) return;
1049
+ const value = this[prop];
1050
+ if (value) this.style.setProperty(cssVar, value);
1051
+ else this.style.removeProperty(cssVar);
1451
1052
  }
1452
1053
  static {
1453
1054
  this.styles = [unsafeCSS(tailwind_default), css`
1454
1055
  :host {
1455
- display: block;
1056
+ display: inline-block;
1057
+ }
1058
+ sl-button {
1456
1059
  width: 100%;
1457
- position: relative;
1458
- z-index: 1001;
1459
- overflow: hidden;
1060
+ }
1061
+ sl-button::part(base) {
1062
+ height: var(--axebow-button-height, 2.5rem);
1063
+ min-height: var(--axebow-button-height, 2.5rem);
1064
+ line-height: calc(var(--axebow-button-height, 2.5rem) - var(--sl-input-border-width) * 2);
1065
+ width: var(--axebow-button-width, auto);
1066
+ min-width: var(--axebow-button-width, 9.375rem);
1067
+ }
1068
+
1069
+ /**
1070
+ * The label part carries sl-button's own internal left/right spacing
1071
+ * via a higher-specificity internal rule
1072
+ * (.button--has-label.button--{size} .button__label), which an
1073
+ * external ::part() override of equal-or-lower specificity cannot
1074
+ * beat on its own - !important is required here, not optional
1075
+ * styling preference. Each size's fallback points at shoelace's own
1076
+ * token for that size, so unconfigured buttons render byte-for-byte
1077
+ * as before - only an explicit padding* property changes anything.
1078
+ */
1079
+ sl-button[size='small']::part(label) {
1080
+ padding-top: var(--axebow-button-padding-top, 0) !important;
1081
+ padding-right: var(--axebow-button-padding-right, var(--sl-spacing-small)) !important;
1082
+ padding-bottom: var(--axebow-button-padding-bottom, 0) !important;
1083
+ padding-left: var(--axebow-button-padding-left, var(--sl-spacing-small)) !important;
1084
+ }
1085
+ sl-button[size='medium']::part(label) {
1086
+ padding-top: var(--axebow-button-padding-top, 0) !important;
1087
+ padding-right: var(--axebow-button-padding-right, var(--sl-spacing-medium)) !important;
1088
+ padding-bottom: var(--axebow-button-padding-bottom, 0) !important;
1089
+ padding-left: var(--axebow-button-padding-left, var(--sl-spacing-medium)) !important;
1090
+ }
1091
+ sl-button[size='large']::part(label) {
1092
+ padding-top: var(--axebow-button-padding-top, 0) !important;
1093
+ padding-right: var(--axebow-button-padding-right, var(--sl-spacing-large)) !important;
1094
+ padding-bottom: var(--axebow-button-padding-bottom, 0) !important;
1095
+ padding-left: var(--axebow-button-padding-left, var(--sl-spacing-large)) !important;
1096
+ }
1097
+
1098
+ /**
1099
+ * Hover is always a plain recolor to axebow-gray, no matter the
1100
+ * variant - nothing else about the button's structure changes.
1101
+ */
1102
+
1103
+ /** Default / neutral button */
1104
+ sl-button[variant='default']:hover::part(base),
1105
+ sl-button[variant='neutral']:hover::part(base) {
1106
+ color: var(--axebow-gray);
1107
+ border-color: var(--axebow-gray);
1108
+ outline-color: var(--axebow-gray);
1109
+ }
1110
+
1111
+ /** Primary button */
1112
+ sl-button[variant='primary']::part(base) {
1113
+ background: var(--axebow-tertiary);
1114
+ color: white;
1115
+ border-color: transparent;
1116
+ outline-color: var(--axebow-tertiary);
1117
+ }
1118
+ sl-button[variant='primary']:hover::part(base) {
1119
+ background: var(--axebow-gray);
1120
+ outline-color: var(--axebow-gray);
1121
+ }
1122
+
1123
+ /** Outlined primary button */
1124
+ sl-button[variant='primary'][outline]::part(base) {
1125
+ background: transparent;
1126
+ color: var(--axebow-tertiary);
1127
+ border-color: var(--axebow-tertiary);
1128
+ outline-color: var(--axebow-tertiary);
1129
+ }
1130
+ sl-button[variant='primary'][outline]:hover::part(base) {
1131
+ color: var(--axebow-gray);
1132
+ border-color: var(--axebow-gray);
1133
+ outline-color: var(--axebow-gray);
1134
+ }
1135
+
1136
+ /** Text button */
1137
+ sl-button[variant='text']::part(base) {
1138
+ outline-color: var(--axebow-tertiary);
1139
+ }
1140
+ sl-button[variant='text']::part(label) {
1141
+ color: var(--axebow-tertiary);
1142
+ }
1143
+ sl-button[variant='text']:hover::part(base) {
1144
+ outline-color: var(--axebow-gray);
1145
+ border-radius: 0.375rem;
1146
+ }
1147
+ sl-button[variant='text']:hover::part(label) {
1148
+ color: var(--axebow-gray);
1149
+ }
1150
+
1151
+ /** Success button */
1152
+ sl-button[variant='success']::part(base) {
1153
+ background: var(--axebow-success);
1154
+ border-color: var(--axebow-success);
1155
+ color: white;
1156
+ border-radius: 0.5rem;
1157
+ outline-color: var(--axebow-success);
1158
+ }
1159
+ sl-button[variant='success']:hover::part(base) {
1160
+ background: var(--axebow-gray);
1161
+ border-color: var(--axebow-gray);
1162
+ outline-color: var(--axebow-gray);
1163
+ }
1164
+
1165
+ /** Danger button */
1166
+ sl-button[variant='danger']::part(base) {
1167
+ background: var(--axebow-error);
1168
+ border-color: var(--axebow-error);
1169
+ color: white;
1170
+ outline-color: var(--axebow-error);
1171
+ }
1172
+ sl-button[variant='danger']:hover::part(base) {
1173
+ background: var(--axebow-gray);
1174
+ border-color: var(--axebow-gray);
1175
+ outline-color: var(--axebow-gray);
1176
+ }
1177
+
1178
+ /** Danger outlined */
1179
+ sl-button[variant='danger'][outline]::part(base) {
1180
+ background: transparent;
1181
+ color: var(--axebow-error);
1182
+ border-color: var(--axebow-error);
1183
+ outline-color: var(--axebow-error);
1184
+ }
1185
+ sl-button[variant='danger'][outline]:hover::part(base) {
1186
+ color: var(--axebow-gray);
1187
+ border-color: var(--axebow-gray);
1188
+ outline-color: var(--axebow-gray);
1189
+ }
1190
+
1191
+ /** Danger text (host class) */
1192
+ :host(.axebow-red-button-text) sl-button::part(base) {
1193
+ outline-color: var(--axebow-error);
1194
+ }
1195
+ :host(.axebow-red-button-text) sl-button::part(label) {
1196
+ color: var(--axebow-error);
1197
+ }
1198
+ :host(.axebow-red-button-text) sl-button:hover::part(base) {
1199
+ outline-color: var(--axebow-gray);
1200
+ }
1201
+ :host(.axebow-red-button-text) sl-button:hover::part(label) {
1202
+ color: var(--axebow-gray);
1203
+ }
1204
+
1205
+ /** Warning button (host class) */
1206
+ :host(.axebow-warning-button-bg) sl-button::part(base) {
1207
+ color: var(--axebow-tertiary);
1208
+ border-color: var(--axebow-tertiary);
1209
+ outline-color: var(--axebow-tertiary);
1210
+ }
1211
+ :host(.axebow-warning-button-bg) sl-button:hover::part(base) {
1212
+ color: var(--axebow-gray);
1213
+ border-color: var(--axebow-gray);
1214
+ outline-color: var(--axebow-gray);
1215
+ }
1216
+
1217
+ /**
1218
+ * Boxed hover look shared with axebow-more-actions, opt-in via
1219
+ * hoverStyle="border". Declared last so it wins over every
1220
+ * variant's own hover rule above, regardless of which variant
1221
+ * it's combined with.
1222
+ */
1223
+ sl-button[hoverstyle='border']:hover::part(base) {
1224
+ background-color: var(--axebow-anti-flash-white) !important;
1225
+ border-radius: 0.5rem !important;
1226
+ outline-color: transparent !important;
1227
+ border-color: transparent !important;
1228
+ }
1229
+ sl-button[hoverstyle='border']:hover::part(label) {
1230
+ color: var(--axebow-gray) !important;
1460
1231
  }
1461
1232
  `];
1462
1233
  }
1463
- connectedCallback() {
1464
- super.connectedCallback();
1465
- this.resizeObserver = new ResizeObserver(() => {
1466
- this.emitFooterHeight();
1467
- });
1468
- this.resizeObserver.observe(this);
1469
- window.addEventListener("resize", this.emitFooterHeight);
1470
- window.addEventListener("scroll", this.emitFooterHeight, true);
1471
- setTimeout(() => this.emitFooterHeight(), 0);
1472
- }
1473
- disconnectedCallback() {
1474
- super.disconnectedCallback();
1475
- this.resizeObserver?.disconnect();
1476
- window.removeEventListener("resize", this.emitFooterHeight);
1477
- window.removeEventListener("scroll", this.emitFooterHeight, true);
1478
- }
1479
1234
  render() {
1480
1235
  return html`
1481
- <footer
1482
- 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"
1236
+ <sl-button
1237
+ exportparts="base, label, prefix, suffix, caret"
1238
+ hoverstyle=${this.hoverStyle}
1239
+ variant=${this.variant}
1240
+ size=${this.size}
1241
+ ?outline=${this.outline}
1242
+ ?pill=${this.pill}
1243
+ ?circle=${this.circle}
1244
+ ?disabled=${this.disabled}
1245
+ ?loading=${this.loading}
1246
+ ?caret=${this.caret}
1247
+ type=${this.type}
1248
+ href=${ifDefined(this.href)}
1249
+ target=${ifDefined(this.target)}
1250
+ name=${ifDefined(this.name)}
1251
+ value=${ifDefined(this.value)}
1483
1252
  >
1484
- ${this.links.map((link) => html`
1485
- <button
1486
- 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"
1487
- @click=${link.onClick}
1488
- >
1489
- ${link.label}
1490
- <axebow-icon iconName="open_in_new" iconColor="var(--axebow-anti-flash-white)" size="md"></axebow-icon>
1491
- </button>
1492
- `)}
1493
- </footer>
1253
+ <slot name="prefix" slot="prefix"></slot>
1254
+ <slot></slot>
1255
+ <slot name="suffix" slot="suffix"></slot>
1256
+ </sl-button>
1494
1257
  `;
1495
1258
  }
1496
1259
  };
1497
- __decorate([property({ type: Array })], AxebowFooter.prototype, "links", void 0);
1498
- AxebowFooter = __decorate([customElement("axebow-footer")], AxebowFooter);
1260
+ __decorate([property({
1261
+ type: String,
1262
+ reflect: true
1263
+ })], AxebowButton.prototype, "variant", void 0);
1264
+ __decorate([property({
1265
+ type: String,
1266
+ reflect: true
1267
+ })], AxebowButton.prototype, "size", void 0);
1268
+ __decorate([property({
1269
+ type: Boolean,
1270
+ reflect: true
1271
+ })], AxebowButton.prototype, "outline", void 0);
1272
+ __decorate([property({
1273
+ type: Boolean,
1274
+ reflect: true
1275
+ })], AxebowButton.prototype, "pill", void 0);
1276
+ __decorate([property({
1277
+ type: Boolean,
1278
+ reflect: true
1279
+ })], AxebowButton.prototype, "circle", void 0);
1280
+ __decorate([property({
1281
+ type: Boolean,
1282
+ attribute: false
1283
+ })], AxebowButton.prototype, "disabled", void 0);
1284
+ __decorate([property({
1285
+ type: Boolean,
1286
+ reflect: true
1287
+ })], AxebowButton.prototype, "loading", void 0);
1288
+ __decorate([property({
1289
+ type: Boolean,
1290
+ reflect: true
1291
+ })], AxebowButton.prototype, "caret", void 0);
1292
+ __decorate([property({ type: String })], AxebowButton.prototype, "type", void 0);
1293
+ __decorate([property({ type: String })], AxebowButton.prototype, "href", void 0);
1294
+ __decorate([property({ type: String })], AxebowButton.prototype, "target", void 0);
1295
+ __decorate([property({ type: String })], AxebowButton.prototype, "name", void 0);
1296
+ __decorate([property({ type: String })], AxebowButton.prototype, "value", void 0);
1297
+ __decorate([property({ type: String })], AxebowButton.prototype, "fixedWidth", void 0);
1298
+ __decorate([property({ type: String })], AxebowButton.prototype, "fixedHeight", void 0);
1299
+ __decorate([property({ type: String })], AxebowButton.prototype, "paddingTop", void 0);
1300
+ __decorate([property({ type: String })], AxebowButton.prototype, "paddingRight", void 0);
1301
+ __decorate([property({ type: String })], AxebowButton.prototype, "paddingBottom", void 0);
1302
+ __decorate([property({ type: String })], AxebowButton.prototype, "paddingLeft", void 0);
1303
+ __decorate([property({ type: String })], AxebowButton.prototype, "hoverStyle", void 0);
1304
+ AxebowButton = __decorate([customElement("axebow-button")], AxebowButton);
1499
1305
  //#endregion
1500
- //#region src/components/axebow-breadcrumb-header/axebow-breadcrumb-header.ts
1501
- var AxebowBreadcrumbHeader = class AxebowBreadcrumbHeader extends LitElement {
1306
+ //#region src/components/axebow-search/axebow-search.ts
1307
+ var AxebowSearch = class AxebowSearch extends LitElement {
1502
1308
  constructor(..._args) {
1503
1309
  super(..._args);
1504
- this.padded = false;
1505
- this.paddingBottom = "2rem";
1506
- this.showHomeBlock = true;
1507
- this.onHomeClick = () => {};
1508
- this.showSecondaryPages = false;
1509
- this.secondaryPages = [];
1510
- this.mainPage = "";
1511
- this.showRequiredField = false;
1512
- this.requiredFieldLabel = "";
1310
+ this.value = "";
1311
+ this.placeholder = "";
1513
1312
  }
1514
1313
  static {
1515
1314
  this.styles = [unsafeCSS(tailwind_default), css`
1516
1315
  :host {
1517
- display: block;
1518
- width: 100%;
1316
+ display: inline-block;
1317
+ }
1318
+ sl-input {
1319
+ width: 20rem;
1320
+ --sl-focus-ring-width: 0px;
1321
+ }
1322
+ :host(.axebow-fixed-width) sl-input {
1323
+ width: var(--axebow-search-width);
1324
+ }
1325
+ sl-input::part(base) {
1326
+ height: 2.5rem;
1327
+ border: 1px solid #dbdde4;
1328
+ border-radius: 0.375rem;
1329
+ box-shadow: none;
1330
+ }
1331
+ sl-input:focus-within::part(base) {
1332
+ border-color: var(--axebow-tertiary);
1333
+ }
1334
+ sl-input::part(input) {
1335
+ color: var(--axebow-rich-black, #0d1821);
1336
+ font-size: 0.875rem;
1337
+ }
1338
+ sl-input::part(prefix) {
1339
+ padding-inline-start: 0.75rem;
1519
1340
  }
1520
1341
  `];
1521
1342
  }
1343
+ updated(changed) {
1344
+ super.updated(changed);
1345
+ if (changed.has("width")) if (this.width) {
1346
+ this.style.setProperty("--axebow-search-width", this.width);
1347
+ this.classList.add("axebow-fixed-width");
1348
+ } else {
1349
+ this.style.removeProperty("--axebow-search-width");
1350
+ this.classList.remove("axebow-fixed-width");
1351
+ }
1352
+ }
1353
+ _emitChange(value) {
1354
+ this.dispatchEvent(new CustomEvent("search-change", {
1355
+ detail: { value },
1356
+ bubbles: true,
1357
+ composed: true
1358
+ }));
1359
+ }
1360
+ _onInput(e) {
1361
+ this._emitChange(e.target.value);
1362
+ }
1363
+ _onClear() {
1364
+ this._emitChange("");
1365
+ }
1522
1366
  render() {
1523
1367
  return html`
1524
- <div
1525
- class="flex flex-col gap-1 pt-8 ${this.padded ? "ps-8" : ""}"
1526
- style="padding-bottom: ${this.paddingBottom};"
1527
- >
1528
- <div class="flex flex-wrap items-center gap-2 text-xl text-(--axebow-primary)">
1529
- ${this.showHomeBlock ? html`
1530
- <span class="flex items-center gap-2 cursor-pointer" @click=${() => this.onHomeClick()}>
1531
- <axebow-icon
1532
- iconName="home"
1533
- iconColor="var(--axebow-primary)"
1534
- size="xl"
1535
- style="display: inline-flex; align-items: center; justify-content: center; transform: scale(0.6665, 0.75);"
1536
- ></axebow-icon>
1537
- <span class="font-normal">/</span>
1538
- </span>
1539
- ` : ""}
1540
- ${this.showSecondaryPages ? this.secondaryPages.map((page) => html`
1541
- <span
1542
- class="font-normal ${page.onClick ? "cursor-pointer hover:underline" : ""}"
1543
- @click=${page.onClick ? () => page.onClick() : void 0}
1544
- >${page.label} /</span
1545
- >
1546
- `) : ""}
1547
- <span class="font-semibold">${this.mainPage}</span>
1548
- </div>
1549
- ${this.showRequiredField ? html`
1550
- <div class="text-sm">
1551
- <span class="font-bold text-(--axebow-error)">*</span>
1552
- <span class="font-normal text-(--axebow-rich-black)"> ${this.requiredFieldLabel}</span>
1553
- </div>
1554
- ` : ""}
1555
- </div>
1556
- `;
1557
- }
1558
- };
1559
- __decorate([property({ type: Boolean })], AxebowBreadcrumbHeader.prototype, "padded", void 0);
1560
- __decorate([property({ type: String })], AxebowBreadcrumbHeader.prototype, "paddingBottom", void 0);
1561
- __decorate([property({ type: Boolean })], AxebowBreadcrumbHeader.prototype, "showHomeBlock", void 0);
1562
- __decorate([property({ attribute: false })], AxebowBreadcrumbHeader.prototype, "onHomeClick", void 0);
1563
- __decorate([property({ type: Boolean })], AxebowBreadcrumbHeader.prototype, "showSecondaryPages", void 0);
1564
- __decorate([property({ type: Array })], AxebowBreadcrumbHeader.prototype, "secondaryPages", void 0);
1565
- __decorate([property({ type: String })], AxebowBreadcrumbHeader.prototype, "mainPage", void 0);
1566
- __decorate([property({ type: Boolean })], AxebowBreadcrumbHeader.prototype, "showRequiredField", void 0);
1567
- __decorate([property({ type: String })], AxebowBreadcrumbHeader.prototype, "requiredFieldLabel", void 0);
1568
- AxebowBreadcrumbHeader = __decorate([customElement("axebow-breadcrumb-header")], AxebowBreadcrumbHeader);
1368
+ <sl-input placeholder=${this.placeholder} .value=${this.value} clearable @sl-input=${this._onInput} @sl-clear=${this._onClear}>
1369
+ <axebow-icon slot="prefix" iconName="search" iconColor="var(--axebow-gray)" size="md"></axebow-icon>
1370
+ </sl-input>
1371
+ `;
1372
+ }
1373
+ };
1374
+ __decorate([property({ type: String })], AxebowSearch.prototype, "value", void 0);
1375
+ __decorate([property({ type: String })], AxebowSearch.prototype, "placeholder", void 0);
1376
+ __decorate([property({ type: String })], AxebowSearch.prototype, "width", void 0);
1377
+ AxebowSearch = __decorate([customElement("axebow-search")], AxebowSearch);
1569
1378
  //#endregion
1570
1379
  //#region src/components/axebow-input/axebow-input-base.ts
1571
1380
  var AxebowInputBase = class extends LitElement {
@@ -9240,6 +9049,607 @@ var CustomHomePageBody = class CustomHomePageBody extends LitElement {
9240
9049
  };
9241
9050
  CustomHomePageBody = __decorate([customElement("custom-home-page-body")], CustomHomePageBody);
9242
9051
  //#endregion
9243
- 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, AxebowTenantFilters, AxebowTenantResourceTable, AxebowTextInput, AxebowTooltip, CustomHomePageBody, DEFAULT_ADD_DIALOG_LABELS, DeployModalComponent, DeployModalFooter, DeployModalHeader, DeployPageBody, STATUS_COLORS, axebowTheme, buildAddButton, buildExternalNodeContent, buildMainNodeContent, createElement, createIcon };
9052
+ //#region src/components/axebow-status/axebow-status.ts
9053
+ var AxebowStatus = class AxebowStatus extends LitElement {
9054
+ constructor(..._args) {
9055
+ super(..._args);
9056
+ this.showTrash = false;
9057
+ this.statusText = "Free";
9058
+ this.statusColor = "var(--axebow-success)";
9059
+ this.deleting = false;
9060
+ }
9061
+ static {
9062
+ this.styles = [unsafeCSS(tailwind_default), css`
9063
+ :host {
9064
+ width: 100%;
9065
+ }
9066
+ `];
9067
+ }
9068
+ _handleDelete(e) {
9069
+ if (this.deleting) return;
9070
+ e.stopPropagation();
9071
+ this.dispatchEvent(new CustomEvent("delete", {
9072
+ bubbles: true,
9073
+ composed: true
9074
+ }));
9075
+ }
9076
+ render() {
9077
+ return html`
9078
+ <div class="flex items-center justify-between h-fit gap-2">
9079
+ <div class="flex items-center gap-1.5">
9080
+ ${this.statusColor ? html`<div class="h-2 w-2 rounded-full shrink-0" style="background-color: ${this.statusColor};"></div>` : ""}
9081
+ <span class="font-medium text-(--axebow-strong-gray)">${this.statusText}</span>
9082
+ </div>
9083
+ ${this.showTrash ? html`
9084
+ <button
9085
+ type="button"
9086
+ 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" : ""}"
9087
+ @click=${this._handleDelete}
9088
+ >
9089
+ <axebow-icon iconName="delete" .iconColor="${this.deleting ? "var(--axebow-gray)" : "currentColor"}" size="lg"></axebow-icon>
9090
+ </button>
9091
+ ` : ""}
9092
+ </div>
9093
+ `;
9094
+ }
9095
+ };
9096
+ __decorate([property({ type: Boolean })], AxebowStatus.prototype, "showTrash", void 0);
9097
+ __decorate([property({ type: String })], AxebowStatus.prototype, "statusText", void 0);
9098
+ __decorate([property({ type: String })], AxebowStatus.prototype, "statusColor", void 0);
9099
+ __decorate([property({ type: Boolean })], AxebowStatus.prototype, "deleting", void 0);
9100
+ AxebowStatus = __decorate([customElement("axebow-status")], AxebowStatus);
9101
+ //#endregion
9102
+ //#region src/components/axebow-form-panel-field/axebow-form-panel-field.ts
9103
+ var AxebowFormPanelField = class AxebowFormPanelField extends LitElement {
9104
+ constructor(..._args) {
9105
+ super(..._args);
9106
+ this.styleVariant = "Placeholder";
9107
+ this.disabled = false;
9108
+ this.label = "Field label";
9109
+ this.value = "";
9110
+ this.mandatory = true;
9111
+ this.showDropdown = false;
9112
+ this.showCloseIcon = false;
9113
+ this.placeholderCopy = "Placeholder (examples)";
9114
+ this.showActionIcon = false;
9115
+ this.actionIcon = "content_copy";
9116
+ this.copyValue = "";
9117
+ this.showSecondaryActionIcon = false;
9118
+ this.secondaryActionIcon = "open_in_new";
9119
+ this.options = [];
9120
+ this._isDropdownOpen = false;
9121
+ this._handleOutsideClick = (e) => {
9122
+ if (this._isDropdownOpen && !e.composedPath().includes(this)) this._isDropdownOpen = false;
9123
+ };
9124
+ }
9125
+ static {
9126
+ this.styles = [unsafeCSS(tailwind_default), css`
9127
+ :host {
9128
+ display: inline-block;
9129
+ width: 234px;
9130
+ position: relative;
9131
+ }
9132
+ .field-container {
9133
+ width: 100%;
9134
+ min-height: 51.33px;
9135
+ border-radius: 6px;
9136
+ padding: 6px 8px;
9137
+ box-sizing: border-box;
9138
+ transition: border-color 0.2s ease, background-color 0.2s ease;
9139
+ }
9140
+ `];
9141
+ }
9142
+ connectedCallback() {
9143
+ super.connectedCallback();
9144
+ window.addEventListener("click", this._handleOutsideClick);
9145
+ }
9146
+ disconnectedCallback() {
9147
+ super.disconnectedCallback();
9148
+ window.removeEventListener("click", this._handleOutsideClick);
9149
+ }
9150
+ _handleFocus(_e) {
9151
+ if (this.disabled) return;
9152
+ this.dispatchEvent(new CustomEvent("focus", {
9153
+ detail: { value: this.value },
9154
+ bubbles: true,
9155
+ composed: true
9156
+ }));
9157
+ }
9158
+ _handleBlur(_e) {
9159
+ if (this.disabled) return;
9160
+ this.dispatchEvent(new CustomEvent("blur", {
9161
+ detail: { value: this.value },
9162
+ bubbles: true,
9163
+ composed: true
9164
+ }));
9165
+ }
9166
+ _handleInput(e) {
9167
+ if (this.disabled) return;
9168
+ const target = e.target;
9169
+ this.value = target.value;
9170
+ this.dispatchEvent(new CustomEvent("change", {
9171
+ detail: { value: this.value },
9172
+ bubbles: true,
9173
+ composed: true
9174
+ }));
9175
+ }
9176
+ _handleActionClick(e) {
9177
+ e.stopPropagation();
9178
+ const textToCopy = this.copyValue !== void 0 && this.copyValue !== "" ? this.copyValue : this.value;
9179
+ if (textToCopy) navigator.clipboard.writeText(textToCopy);
9180
+ this.dispatchEvent(new CustomEvent("action-click", {
9181
+ detail: { value: textToCopy },
9182
+ bubbles: true,
9183
+ composed: true
9184
+ }));
9185
+ }
9186
+ _handleSecondaryActionClick(e) {
9187
+ e.stopPropagation();
9188
+ this.dispatchEvent(new CustomEvent("secondary-action-click", {
9189
+ detail: { value: this.value },
9190
+ bubbles: true,
9191
+ composed: true
9192
+ }));
9193
+ }
9194
+ _handleCloseClick(e) {
9195
+ e.stopPropagation();
9196
+ this.value = "";
9197
+ this.dispatchEvent(new CustomEvent("close-click", {
9198
+ bubbles: true,
9199
+ composed: true
9200
+ }));
9201
+ }
9202
+ _handleDropdownClick(e) {
9203
+ e.stopPropagation();
9204
+ if (this.disabled) return;
9205
+ if (this.options && this.options.length > 0) this._isDropdownOpen = !this._isDropdownOpen;
9206
+ this.dispatchEvent(new CustomEvent("dropdown-click", {
9207
+ detail: { isOpen: this._isDropdownOpen },
9208
+ bubbles: true,
9209
+ composed: true
9210
+ }));
9211
+ }
9212
+ _selectOption(opt, e) {
9213
+ e.stopPropagation();
9214
+ this.value = opt;
9215
+ this._isDropdownOpen = false;
9216
+ this.dispatchEvent(new CustomEvent("select", {
9217
+ detail: { value: opt },
9218
+ bubbles: true,
9219
+ composed: true
9220
+ }));
9221
+ this.dispatchEvent(new CustomEvent("change", {
9222
+ detail: { value: opt },
9223
+ bubbles: true,
9224
+ composed: true
9225
+ }));
9226
+ }
9227
+ render() {
9228
+ const isFilled = this.styleVariant && this.styleVariant.toLowerCase() === "filled" || !!this.value;
9229
+ 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)";
9230
+ const textColor = this.disabled ? "text-(--axebow-gray)" : isFilled ? "text-(--axebow-strong-gray)" : "text-(--axebow-gray)";
9231
+ return html`
9232
+ <div class="relative w-full">
9233
+ <!-- Field Container -->
9234
+ <div
9235
+ class="field-container border flex items-center justify-between gap-2 ${bgClass} ${this.showDropdown && !this.disabled ? "cursor-pointer" : ""}"
9236
+ @click=${this.showDropdown ? this._handleDropdownClick : null}
9237
+ >
9238
+ <div class="flex flex-col justify-center flex-1 min-w-0">
9239
+ <!-- Top Label -->
9240
+ <div class="flex items-center text-xs text-(--axebow-gray) leading-tight select-none">
9241
+ ${this.mandatory ? html`<span class="text-(--axebow-error) font-bold mr-0.5">*</span>` : ""}
9242
+ <span class="truncate">${this.label}</span>
9243
+ </div>
9244
+
9245
+ <!-- Value / Input -->
9246
+ <input
9247
+ type="text"
9248
+ class="w-full bg-transparent border-0 p-0 text-sm font-normal ${textColor} focus:outline-none truncate"
9249
+ .value=${this.value}
9250
+ placeholder=${this.placeholderCopy}
9251
+ ?disabled=${this.disabled}
9252
+ @input=${this._handleInput}
9253
+ @focus=${this._handleFocus}
9254
+ @blur=${this._handleBlur}
9255
+ />
9256
+ </div>
9257
+
9258
+ <!-- Action Icons Suffix -->
9259
+ <div class="flex items-center gap-1 shrink-0">
9260
+ ${this.showSecondaryActionIcon ? html`
9261
+ <button
9262
+ type="button"
9263
+ class="p-0 border-0 bg-transparent cursor-pointer flex items-center justify-center text-(--axebow-tertiary) hover:text-(--axebow-gray) transition-colors"
9264
+ @click=${this._handleSecondaryActionClick}
9265
+ >
9266
+ <axebow-icon iconName=${this.secondaryActionIcon} iconColor="currentColor" size="lg"></axebow-icon>
9267
+ </button>
9268
+ ` : ""}
9269
+ ${this.showActionIcon ? html`
9270
+ <button
9271
+ type="button"
9272
+ class="p-0 border-0 bg-transparent cursor-pointer flex items-center justify-center text-(--axebow-tertiary) hover:text-(--axebow-gray) transition-colors"
9273
+ @click=${this._handleActionClick}
9274
+ >
9275
+ <axebow-icon iconName=${this.actionIcon} iconColor="currentColor" size="lg"></axebow-icon>
9276
+ </button>
9277
+ ` : ""}
9278
+ ${this.showCloseIcon ? html`
9279
+ <button
9280
+ type="button"
9281
+ class="p-0 border-0 bg-transparent cursor-pointer flex items-center justify-center text-(--axebow-gray) hover:text-black transition-colors"
9282
+ @click=${this._handleCloseClick}
9283
+ >
9284
+ <axebow-icon iconName="cancel" iconColor="currentColor" size="lg"></axebow-icon>
9285
+ </button>
9286
+ ` : ""}
9287
+ ${this.showDropdown ? html`
9288
+ <button
9289
+ type="button"
9290
+ class="p-0 border-0 bg-transparent cursor-pointer flex items-center justify-center text-(--axebow-tertiary) hover:text-(--axebow-gray) transition-colors"
9291
+ @click=${this._handleDropdownClick}
9292
+ >
9293
+ <axebow-icon
9294
+ iconName="keyboard_arrow_down"
9295
+ iconColor="currentColor"
9296
+ size="xl"
9297
+ class="transition-transform duration-200 ${this._isDropdownOpen ? "rotate-180" : ""}"
9298
+ ></axebow-icon>
9299
+ </button>
9300
+ ` : ""}
9301
+ </div>
9302
+ </div>
9303
+
9304
+ <!-- Dropdown Menu Overlay -->
9305
+ ${this.showDropdown && this._isDropdownOpen && this.options && this.options.length > 0 ? html`
9306
+ <div
9307
+ 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"
9308
+ >
9309
+ ${this.options.map((opt) => {
9310
+ const isSelected = opt === this.value;
9311
+ return html`
9312
+ <div
9313
+ 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)" : ""}"
9314
+ @click=${(e) => this._selectOption(opt, e)}
9315
+ >
9316
+ <span>${opt}</span>
9317
+ ${isSelected ? html`<axebow-icon iconName="check" iconColor="var(--axebow-tertiary)" size="sm"></axebow-icon>` : ""}
9318
+ </div>
9319
+ `;
9320
+ })}
9321
+ </div>
9322
+ ` : ""}
9323
+ </div>
9324
+ `;
9325
+ }
9326
+ };
9327
+ __decorate([property({ type: String })], AxebowFormPanelField.prototype, "styleVariant", void 0);
9328
+ __decorate([property({ type: Boolean })], AxebowFormPanelField.prototype, "disabled", void 0);
9329
+ __decorate([property({ type: String })], AxebowFormPanelField.prototype, "label", void 0);
9330
+ __decorate([property({ type: String })], AxebowFormPanelField.prototype, "value", void 0);
9331
+ __decorate([property({ type: Boolean })], AxebowFormPanelField.prototype, "mandatory", void 0);
9332
+ __decorate([property({ type: Boolean })], AxebowFormPanelField.prototype, "showDropdown", void 0);
9333
+ __decorate([property({ type: Boolean })], AxebowFormPanelField.prototype, "showCloseIcon", void 0);
9334
+ __decorate([property({ type: String })], AxebowFormPanelField.prototype, "placeholderCopy", void 0);
9335
+ __decorate([property({ type: Boolean })], AxebowFormPanelField.prototype, "showActionIcon", void 0);
9336
+ __decorate([property({ type: String })], AxebowFormPanelField.prototype, "actionIcon", void 0);
9337
+ __decorate([property({ type: String })], AxebowFormPanelField.prototype, "copyValue", void 0);
9338
+ __decorate([property({ type: Boolean })], AxebowFormPanelField.prototype, "showSecondaryActionIcon", void 0);
9339
+ __decorate([property({ type: String })], AxebowFormPanelField.prototype, "secondaryActionIcon", void 0);
9340
+ __decorate([property({ type: Array })], AxebowFormPanelField.prototype, "options", void 0);
9341
+ __decorate([state()], AxebowFormPanelField.prototype, "_isDropdownOpen", void 0);
9342
+ AxebowFormPanelField = __decorate([customElement("axebow-form-panel-field")], AxebowFormPanelField);
9343
+ //#endregion
9344
+ //#region src/components/axebow-box-form/axebow-box-form.ts
9345
+ var AxebowResourceBoxForm = class AxebowResourceBoxForm extends LitElement {
9346
+ constructor(..._args) {
9347
+ super(..._args);
9348
+ this.statusText = "Free";
9349
+ this.statusColor = "var(--axebow-success)";
9350
+ this.showTrash = true;
9351
+ this.deleting = false;
9352
+ this.items = [];
9353
+ this._openMenuId = null;
9354
+ this._handleOutsideClick = (e) => {
9355
+ if (!e.composedPath().includes(this)) this._closeMenu();
9356
+ };
9357
+ }
9358
+ static {
9359
+ this.styles = unsafeCSS(tailwind_default);
9360
+ }
9361
+ connectedCallback() {
9362
+ super.connectedCallback();
9363
+ window.addEventListener("click", this._handleOutsideClick);
9364
+ }
9365
+ disconnectedCallback() {
9366
+ super.disconnectedCallback();
9367
+ window.removeEventListener("click", this._handleOutsideClick);
9368
+ }
9369
+ _copyToClipboard(text, e) {
9370
+ e?.stopPropagation();
9371
+ if (!text) return;
9372
+ navigator.clipboard.writeText(text);
9373
+ this.dispatchEvent(new CustomEvent("copy", {
9374
+ detail: { text },
9375
+ bubbles: true,
9376
+ composed: true
9377
+ }));
9378
+ }
9379
+ _openLink(url, e) {
9380
+ e?.stopPropagation();
9381
+ if (!url) return;
9382
+ window.open(url, "_blank", "noopener,noreferrer");
9383
+ this.dispatchEvent(new CustomEvent("link-click", {
9384
+ detail: { url },
9385
+ bubbles: true,
9386
+ composed: true
9387
+ }));
9388
+ }
9389
+ _handleDelete() {
9390
+ this.dispatchEvent(new CustomEvent("delete", {
9391
+ bubbles: true,
9392
+ composed: true
9393
+ }));
9394
+ }
9395
+ _downloadFile(content, fileName) {
9396
+ if (!content) return;
9397
+ const blob = new Blob([content], { type: "text/plain" });
9398
+ const url = URL.createObjectURL(blob);
9399
+ const a = document.createElement("a");
9400
+ a.href = url;
9401
+ a.download = fileName || "file.txt";
9402
+ document.body.appendChild(a);
9403
+ a.click();
9404
+ document.body.removeChild(a);
9405
+ URL.revokeObjectURL(url);
9406
+ }
9407
+ _closeMenu() {
9408
+ this._openMenuId = null;
9409
+ }
9410
+ _toggleMenu(item, hasContent, e) {
9411
+ e.stopPropagation();
9412
+ if (!item.menuId) return;
9413
+ if (!hasContent) {
9414
+ const customOption = item.menuOptions?.find((opt) => opt.action === "custom" || !opt.action);
9415
+ if (customOption) this.dispatchEvent(new CustomEvent("item-menu-select", {
9416
+ detail: {
9417
+ item,
9418
+ option: customOption
9419
+ },
9420
+ bubbles: true,
9421
+ composed: true
9422
+ }));
9423
+ this._closeMenu();
9424
+ return;
9425
+ }
9426
+ if (this._openMenuId === item.menuId) this._closeMenu();
9427
+ else this._openMenuId = item.menuId;
9428
+ }
9429
+ _handleMenuOption(item, option, textToCopy, e) {
9430
+ e.stopPropagation();
9431
+ this._closeMenu();
9432
+ switch (option.action || "custom") {
9433
+ case "copy":
9434
+ this._copyToClipboard(textToCopy);
9435
+ break;
9436
+ case "download":
9437
+ this._downloadFile(textToCopy, option.fileName || "file.txt");
9438
+ break;
9439
+ default:
9440
+ this.dispatchEvent(new CustomEvent("item-menu-select", {
9441
+ detail: {
9442
+ item,
9443
+ option
9444
+ },
9445
+ bubbles: true,
9446
+ composed: true
9447
+ }));
9448
+ break;
9449
+ }
9450
+ }
9451
+ _renderField(item) {
9452
+ const itemType = item.type || "enabled";
9453
+ const textToCopy = item.copyValue !== void 0 ? item.copyValue : item.value;
9454
+ const hasMenu = !!item.menuOptions && item.menuOptions.length > 0 && !!item.menuId;
9455
+ const hasContent = !!textToCopy;
9456
+ const isMenuOpen = this._openMenuId === item.menuId && hasContent;
9457
+ if (itemType === "text") return html`
9458
+ <div class="flex items-start justify-between gap-2 w-full relative pt-1">
9459
+ <div class="flex flex-col gap-0.5 min-w-0 flex-1">
9460
+ <span
9461
+ class="text-sm font-semibold text-(--axebow-strong-gray) leading-tight flex items-center gap-1 break-all"
9462
+ >
9463
+ ${item.required ? html`<span class="text-(--axebow-error) font-bold">* </span>` : ""}
9464
+ ${item.tag}
9465
+ </span>
9466
+ ${item.value ? html`<p
9467
+ class="m-0 text-sm text-(--axebow-gray) leading-snug break-all font-normal"
9468
+ >
9469
+ ${item.value}
9470
+ </p>` : ""}
9471
+ </div>
9472
+ <div class="flex items-center gap-1 shrink-0 pt-0.5">
9473
+ ${hasMenu ? html`
9474
+ <button
9475
+ type="button"
9476
+ class="p-0 border-0 bg-transparent cursor-pointer flex items-center justify-center text-(--axebow-tertiary) hover:text-(--axebow-gray) transition-colors"
9477
+ title="Options"
9478
+ @click=${(e) => this._toggleMenu(item, hasContent, e)}
9479
+ >
9480
+ <axebow-icon
9481
+ iconName="add_circle"
9482
+ iconColor="currentColor"
9483
+ size="lg"
9484
+ ></axebow-icon>
9485
+ </button>
9486
+ ${isMenuOpen ? html`
9487
+ <div
9488
+ 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"
9489
+ style="max-height: 250px; overflow-y: auto;"
9490
+ >
9491
+ ${item.menuOptions.map((option) => html`
9492
+ <div
9493
+ class="flex items-center gap-2.5 px-4 py-2 cursor-pointer hover:bg-(--axebow-anti-flash-white) transition-colors"
9494
+ @click=${(e) => this._handleMenuOption(item, option, textToCopy, e)}
9495
+ >
9496
+ <axebow-icon
9497
+ .iconName=${option.icon}
9498
+ .iconColor=${option.variant === "danger" ? "var(--axebow-error)" : "var(--axebow-primary)"}
9499
+ size="md"
9500
+ ></axebow-icon>
9501
+ <span
9502
+ class="text-sm font-medium ${option.variant === "danger" ? "text-(--axebow-error)" : "text-(--axebow-primary)"}"
9503
+ >
9504
+ ${option.label}
9505
+ </span>
9506
+ </div>
9507
+ `)}
9508
+ </div>
9509
+ ` : ""}
9510
+ ` : item.canCopy ? html`
9511
+ <button
9512
+ type="button"
9513
+ class="p-0 border-0 bg-transparent cursor-pointer flex items-center justify-center text-(--axebow-tertiary) hover:text-(--axebow-gray) transition-colors"
9514
+ title="Copy"
9515
+ @click=${(e) => this._copyToClipboard(textToCopy, e)}
9516
+ >
9517
+ <axebow-icon
9518
+ iconName="content_copy"
9519
+ iconColor="currentColor"
9520
+ size="lg"
9521
+ ></axebow-icon>
9522
+ </button>
9523
+ ` : ""}
9524
+ ${item.canLink && !hasMenu ? html`
9525
+ <button
9526
+ type="button"
9527
+ class="p-0 border-0 bg-transparent cursor-pointer flex items-center justify-center text-(--axebow-tertiary) hover:text-(--axebow-gray) transition-colors"
9528
+ title="Open link"
9529
+ @click=${(e) => this._openLink(item.linkHref || item.value, e)}
9530
+ >
9531
+ <axebow-icon
9532
+ iconName="open_in_new"
9533
+ iconColor="currentColor"
9534
+ size="lg"
9535
+ ></axebow-icon>
9536
+ </button>
9537
+ ` : ""}
9538
+ </div>
9539
+ </div>
9540
+ `;
9541
+ return html`
9542
+ <div class="relative w-full">
9543
+ <axebow-form-panel-field
9544
+ class="w-full"
9545
+ style="width: 100%;"
9546
+ .label=${item.tag}
9547
+ .value=${item.value || ""}
9548
+ .copyValue=${item.copyValue !== void 0 ? item.copyValue : ""}
9549
+ .mandatory=${Boolean(item.required)}
9550
+ ?disabled=${itemType === "disabled"}
9551
+ .showActionIcon=${Boolean(hasMenu || item.canCopy)}
9552
+ actionIcon=${hasMenu ? "add_circle" : "content_copy"}
9553
+ .showSecondaryActionIcon=${Boolean(item.canLink)}
9554
+ secondaryActionIcon="open_in_new"
9555
+ .showDropdown=${Boolean(item.options && item.options.length > 0)}
9556
+ .options=${item.options || []}
9557
+ @focus=${(_e) => {
9558
+ this.dispatchEvent(new CustomEvent("item-focus", {
9559
+ detail: { item },
9560
+ bubbles: true,
9561
+ composed: true
9562
+ }));
9563
+ }}
9564
+ @blur=${(_e) => {
9565
+ this.dispatchEvent(new CustomEvent("item-blur", {
9566
+ detail: { item },
9567
+ bubbles: true,
9568
+ composed: true
9569
+ }));
9570
+ }}
9571
+ @change=${(e) => {
9572
+ item.value = e.detail?.value ?? e.target.value;
9573
+ this.dispatchEvent(new CustomEvent("item-change", {
9574
+ detail: { item },
9575
+ bubbles: true,
9576
+ composed: true
9577
+ }));
9578
+ }}
9579
+ @action-click=${(e) => {
9580
+ if (hasMenu) this._toggleMenu(item, hasContent, e);
9581
+ else this._copyToClipboard(textToCopy, e);
9582
+ }}
9583
+ @secondary-action-click=${(e) => this._openLink(item.linkHref || item.value, e)}
9584
+ ></axebow-form-panel-field>
9585
+ ${hasMenu && isMenuOpen ? html`
9586
+ <div
9587
+ 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"
9588
+ style="max-height: 250px; overflow-y: auto;"
9589
+ >
9590
+ ${item.menuOptions.map((option) => html`
9591
+ <div
9592
+ class="flex items-center gap-2.5 px-4 py-2 cursor-pointer hover:bg-(--axebow-anti-flash-white) transition-colors"
9593
+ @click=${(e) => this._handleMenuOption(item, option, textToCopy, e)}
9594
+ >
9595
+ <axebow-icon
9596
+ .iconName=${option.icon}
9597
+ .iconColor=${option.variant === "danger" ? "var(--axebow-error)" : "var(--axebow-primary)"}
9598
+ size="md"
9599
+ ></axebow-icon>
9600
+ <span
9601
+ class="text-sm font-medium ${option.variant === "danger" ? "text-(--axebow-error)" : "text-(--axebow-primary)"}"
9602
+ >
9603
+ ${option.label}
9604
+ </span>
9605
+ </div>
9606
+ `)}
9607
+ </div>
9608
+ ` : ""}
9609
+ </div>
9610
+ `;
9611
+ }
9612
+ render() {
9613
+ const isDeleting = this.deleting;
9614
+ const computedStatusColor = isDeleting ? "var(--axebow-error)" : this.statusColor;
9615
+ return html`
9616
+ <div
9617
+ 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"
9618
+ >
9619
+ <!-- Top Status Header -->
9620
+ <axebow-status
9621
+ .statusText=${this.statusText}
9622
+ .statusColor=${computedStatusColor}
9623
+ ?showTrash=${this.showTrash}
9624
+ ?deleting=${this.deleting}
9625
+ @delete=${this._handleDelete}
9626
+ ></axebow-status>
9627
+
9628
+ <!-- Form Fields List -->
9629
+ <div class="flex flex-col gap-2.5 w-full">
9630
+ ${this.items && this.items.length > 0 ? this.items.map((item) => this._renderField(isDeleting ? {
9631
+ ...item,
9632
+ type: "disabled"
9633
+ } : item)) : html`
9634
+ <div
9635
+ class="p-3 border border-dashed border-(--axebow-border-gray) rounded-lg text-center text-(--axebow-gray) text-xs"
9636
+ >
9637
+ No items configured.
9638
+ </div>
9639
+ `}
9640
+ </div>
9641
+ </div>
9642
+ `;
9643
+ }
9644
+ };
9645
+ __decorate([property({ type: String })], AxebowResourceBoxForm.prototype, "statusText", void 0);
9646
+ __decorate([property({ type: String })], AxebowResourceBoxForm.prototype, "statusColor", void 0);
9647
+ __decorate([property({ type: Boolean })], AxebowResourceBoxForm.prototype, "showTrash", void 0);
9648
+ __decorate([property({ type: Boolean })], AxebowResourceBoxForm.prototype, "deleting", void 0);
9649
+ __decorate([property({ type: Array })], AxebowResourceBoxForm.prototype, "items", void 0);
9650
+ __decorate([state()], AxebowResourceBoxForm.prototype, "_openMenuId", void 0);
9651
+ AxebowResourceBoxForm = __decorate([customElement("axebow-resource-box-form")], AxebowResourceBoxForm);
9652
+ //#endregion
9653
+ 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, AxebowFormPanelField, AxebowGettingStartedCard, AxebowHeader, AxebowHelpBubble, AxebowIcon, AxebowInfrastructureCard, AxebowInput, AxebowInputBase, AxebowLimitsCounter, AxebowMarketplaceCard, AxebowModalsConfirmation, AxebowMoreActions, AxebowNumberCard, AxebowNumbersSection, AxebowNumericInput, AxebowPill, AxebowProvidersInput, AxebowQuickTipButton, AxebowQuickTipSection, AxebowResourceBar, AxebowResourceBoxForm, AxebowResourceCard, AxebowResourceLimitInput, AxebowResourceLimitsPanel, AxebowResourcesCounter, AxebowRoleTooltip, AxebowRuntimeZipDialog, AxebowSearch, AxebowSelectInput, AxebowSelectorSlider, AxebowServicesPanel, AxebowSidebar, AxebowStatus, 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 };
9244
9654
 
9245
9655
  //# sourceMappingURL=index.js.map