@kumori/aurora-wui-components 0.0.255-dev4067.9 → 0.0.256-dev4072.2
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.
- package/dist/components/axebow-search/axebow-search.d.ts +1 -0
- package/dist/components/axebow-search/axebow-search.d.ts.map +1 -1
- package/dist/components/axebow-tenant-filters/axebow-tenant-filters.d.ts +37 -0
- package/dist/components/axebow-tenant-filters/axebow-tenant-filters.d.ts.map +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1135 -925
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -2,6 +2,9 @@ import { LitElement, css, html, unsafeCSS } from "lit";
|
|
|
2
2
|
import { customElement, property, query, state } from "lit/decorators.js";
|
|
3
3
|
import "@shoelace-style/shoelace/dist/components/select/select.js";
|
|
4
4
|
import "@shoelace-style/shoelace/dist/components/option/option.js";
|
|
5
|
+
import { ifDefined } from "lit/directives/if-defined.js";
|
|
6
|
+
import "@shoelace-style/shoelace/dist/components/button/button.js";
|
|
7
|
+
import "@shoelace-style/shoelace/dist/components/input/input.js";
|
|
5
8
|
import "@shoelace-style/shoelace/dist/components/dropdown/dropdown.js";
|
|
6
9
|
import "@shoelace-style/shoelace/dist/components/menu/menu.js";
|
|
7
10
|
import "@shoelace-style/shoelace/dist/components/switch/switch.js";
|
|
@@ -9,9 +12,6 @@ import "@shoelace-style/shoelace/dist/components/tab-group/tab-group.js";
|
|
|
9
12
|
import "@shoelace-style/shoelace/dist/components/tab/tab.js";
|
|
10
13
|
import "@shoelace-style/shoelace/dist/components/tab-panel/tab-panel.js";
|
|
11
14
|
import "@shoelace-style/shoelace/dist/components/divider/divider.js";
|
|
12
|
-
import { ifDefined } from "lit/directives/if-defined.js";
|
|
13
|
-
import "@shoelace-style/shoelace/dist/components/button/button.js";
|
|
14
|
-
import "@shoelace-style/shoelace/dist/components/input/input.js";
|
|
15
15
|
import { live } from "lit/directives/live.js";
|
|
16
16
|
import "@shoelace-style/shoelace/dist/components/checkbox/checkbox.js";
|
|
17
17
|
import "@shoelace-style/shoelace/dist/components/carousel/carousel.js";
|
|
@@ -124,7 +124,7 @@ var STATUS_COLORS = {
|
|
|
124
124
|
};
|
|
125
125
|
//#endregion
|
|
126
126
|
//#region src/styles/tailwind.css?inline
|
|
127
|
-
var tailwind_default = "/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n@layer properties {\n @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {\n *, :before, :after, ::backdrop {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-rotate-x: initial;\n --tw-rotate-y: initial;\n --tw-rotate-z: initial;\n --tw-skew-x: initial;\n --tw-skew-y: initial;\n --tw-space-y-reverse: 0;\n --tw-border-style: solid;\n --tw-leading: initial;\n --tw-font-weight: initial;\n --tw-tracking: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-outline-style: solid;\n --tw-blur: initial;\n --tw-brightness: initial;\n --tw-contrast: initial;\n --tw-grayscale: initial;\n --tw-hue-rotate: initial;\n --tw-invert: initial;\n --tw-opacity: initial;\n --tw-saturate: initial;\n --tw-sepia: initial;\n --tw-drop-shadow: initial;\n --tw-drop-shadow-color: initial;\n --tw-drop-shadow-alpha: 100%;\n --tw-drop-shadow-size: initial;\n --tw-duration: initial;\n --tw-ease: initial;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-scale-z: 1;\n }\n }\n}\n\n@layer theme {\n :root, :host {\n --font-sans: \"Open Sans\", sans-serif;\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n \"Courier New\", monospace;\n --color-red-50: oklch(97.1% .013 17.38);\n --color-red-200: oklch(88.5% .062 18.334);\n --color-red-300: oklch(80.8% .114 19.571);\n --color-red-500: oklch(63.7% .237 25.331);\n --color-red-600: oklch(57.7% .245 27.325);\n --color-yellow-50: oklch(98.7% .026 102.212);\n --color-yellow-200: oklch(94.5% .129 101.54);\n --color-yellow-600: oklch(68.1% .162 75.834);\n --color-yellow-800: oklch(47.6% .114 61.907);\n --color-green-50: oklch(98.2% .018 155.826);\n --color-green-200: oklch(92.5% .084 155.995);\n --color-green-600: oklch(62.7% .194 149.214);\n --color-green-800: oklch(44.8% .119 151.328);\n --color-sky-50: oklch(97.7% .013 236.62);\n --color-sky-100: oklch(95.1% .026 236.824);\n --color-blue-50: oklch(97% .014 254.604);\n --color-blue-100: oklch(93.2% .032 255.585);\n --color-blue-200: oklch(88.2% .059 254.128);\n --color-blue-500: oklch(62.3% .214 259.815);\n --color-blue-600: oklch(54.6% .245 262.881);\n --color-blue-800: oklch(42.4% .199 265.638);\n --color-gray-50: oklch(98.5% .002 247.839);\n --color-gray-100: oklch(96.7% .003 264.542);\n --color-gray-200: oklch(92.8% .006 264.531);\n --color-gray-300: oklch(87.2% .01 258.338);\n --color-gray-400: oklch(70.7% .022 261.325);\n --color-gray-500: oklch(55.1% .027 264.364);\n --color-gray-600: oklch(44.6% .03 256.802);\n --color-gray-700: oklch(37.3% .034 259.733);\n --color-gray-900: oklch(21% .034 264.665);\n --color-black: #000;\n --color-white: #fff;\n --spacing: .25rem;\n --text-xs: .625rem;\n --text-xs--line-height: .875rem;\n --text-sm: .75rem;\n --text-sm--line-height: 1rem;\n --text-base: .875rem;\n --text-base--line-height: 1.25rem;\n --text-lg: 1.125rem;\n --text-lg--line-height: 1.75rem;\n --text-xl: 1.25rem;\n --text-xl--line-height: 1.75rem;\n --text-3xl: 1.875rem;\n --text-5xl: 3rem;\n --font-weight-normal: 400;\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --font-weight-black: 900;\n --tracking-wider: .05em;\n --leading-tight: 1.25;\n --leading-snug: 1.375;\n --leading-relaxed: 1.625;\n --radius-sm: .25rem;\n --radius-md: .375rem;\n --radius-lg: .5rem;\n --radius-xl: .75rem;\n --radius-2xl: 1rem;\n --ease-out: cubic-bezier(0, 0, .2, 1);\n --ease-in-out: cubic-bezier(.4, 0, .2, 1);\n --default-transition-duration: .15s;\n --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n --default-font-family: var(--font-sans);\n --default-mono-font-family: var(--font-mono);\n --text-md: 1rem;\n --text-md--line-height: 1.5rem;\n --spacing-18: 4.5rem;\n --spacing-30: 7.5rem;\n --spacing-38: 9.5rem;\n --spacing-43: 10.75rem;\n --spacing-75: 18.75rem;\n --spacing-117: 29.25rem;\n --spacing-120: 30rem;\n }\n}\n\n@layer base {\n *, :after, :before, ::backdrop {\n box-sizing: border-box;\n border: 0 solid;\n margin: 0;\n padding: 0;\n }\n\n ::file-selector-button {\n box-sizing: border-box;\n border: 0 solid;\n margin: 0;\n padding: 0;\n }\n\n html, :host {\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n line-height: 1.5;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n -webkit-text-decoration: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n\n b, strong {\n font-weight: bolder;\n }\n\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n\n small {\n font-size: 80%;\n }\n\n sub, sup {\n vertical-align: baseline;\n font-size: 75%;\n line-height: 0;\n position: relative;\n }\n\n sub {\n bottom: -.25em;\n }\n\n sup {\n top: -.5em;\n }\n\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n\n :-moz-focusring {\n outline: auto;\n }\n\n progress {\n vertical-align: baseline;\n }\n\n summary {\n display: list-item;\n }\n\n ol, ul, menu {\n list-style: none;\n }\n\n img, svg, video, canvas, audio, iframe, embed, object {\n vertical-align: middle;\n display: block;\n }\n\n img, video {\n max-width: 100%;\n height: auto;\n }\n\n button, input, select, optgroup, textarea {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n opacity: 1;\n background-color: #0000;\n border-radius: 0;\n }\n\n ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n opacity: 1;\n background-color: #0000;\n border-radius: 0;\n }\n\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n\n ::placeholder {\n opacity: 1;\n }\n\n @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentColor;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n ::placeholder {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n\n textarea {\n resize: vertical;\n }\n\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n\n ::-webkit-datetime-edit {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-year-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-month-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-day-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-hour-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-minute-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-second-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-millisecond-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n\n ::-webkit-calendar-picker-indicator {\n line-height: 1;\n }\n\n :-moz-ui-invalid {\n box-shadow: none;\n }\n\n button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]) {\n appearance: button;\n }\n\n ::file-selector-button {\n appearance: button;\n }\n\n ::-webkit-inner-spin-button {\n height: auto;\n }\n\n ::-webkit-outer-spin-button {\n height: auto;\n }\n\n [hidden]:where(:not([hidden=\"until-found\"])) {\n display: none !important;\n }\n}\n\n@layer components;\n\n@layer utilities {\n .pointer-events-none {\n pointer-events: none;\n }\n\n .visible {\n visibility: visible;\n }\n\n .absolute {\n position: absolute;\n }\n\n .fixed {\n position: fixed;\n }\n\n .relative {\n position: relative;\n }\n\n .static {\n position: static;\n }\n\n .top-0 {\n top: 0;\n }\n\n .top-1 {\n top: var(--spacing);\n }\n\n .top-1\\/2 {\n top: 50%;\n }\n\n .top-3 {\n top: calc(var(--spacing) * 3);\n }\n\n .top-25 {\n top: calc(var(--spacing) * 25);\n }\n\n .top-\\[-7px\\] {\n top: -7px;\n }\n\n .top-full {\n top: 100%;\n }\n\n .right-0 {\n right: 0;\n }\n\n .right-0\\.5 {\n right: calc(var(--spacing) * .5);\n }\n\n .right-1 {\n right: var(--spacing);\n }\n\n .right-1\\.5 {\n right: calc(var(--spacing) * 1.5);\n }\n\n .right-3 {\n right: calc(var(--spacing) * 3);\n }\n\n .right-\\[calc\\(100\\%\\+10px\\)\\] {\n right: calc(100% + 10px);\n }\n\n .bottom-0 {\n bottom: 0;\n }\n\n .bottom-0\\.5 {\n bottom: calc(var(--spacing) * .5);\n }\n\n .bottom-full {\n bottom: 100%;\n }\n\n .left-0 {\n left: 0;\n }\n\n .left-1\\/2 {\n left: 50%;\n }\n\n .left-\\[-7px\\] {\n left: -7px;\n }\n\n .left-full {\n left: 100%;\n }\n\n .z-5 {\n z-index: 5;\n }\n\n .z-10 {\n z-index: 10;\n }\n\n .z-2000 {\n z-index: 2000;\n }\n\n .z-2001 {\n z-index: 2001;\n }\n\n .z-9999 {\n z-index: 9999;\n }\n\n .container {\n width: 100%;\n }\n\n @media (min-width: 40rem) {\n .container {\n max-width: 40rem;\n }\n }\n\n @media (min-width: 48rem) {\n .container {\n max-width: 48rem;\n }\n }\n\n @media (min-width: 64rem) {\n .container {\n max-width: 64rem;\n }\n }\n\n @media (min-width: 80rem) {\n .container {\n max-width: 80rem;\n }\n }\n\n @media (min-width: 96rem) {\n .container {\n max-width: 96rem;\n }\n }\n\n .m-0 {\n margin: 0;\n }\n\n .mx-2 {\n margin-inline: calc(var(--spacing) * 2);\n }\n\n .mx-6 {\n margin-inline: calc(var(--spacing) * 6);\n }\n\n .mx-12 {\n margin-inline: calc(var(--spacing) * 12);\n }\n\n .mx-auto {\n margin-inline: auto;\n }\n\n .my-0\\.5 {\n margin-block: calc(var(--spacing) * .5);\n }\n\n .my-2 {\n margin-block: calc(var(--spacing) * 2);\n }\n\n .my-4 {\n margin-block: calc(var(--spacing) * 4);\n }\n\n .ms-auto {\n margin-inline-start: auto;\n }\n\n .mt-0 {\n margin-top: 0;\n }\n\n .mt-1 {\n margin-top: var(--spacing);\n }\n\n .mt-1\\.5 {\n margin-top: calc(var(--spacing) * 1.5);\n }\n\n .mt-1\\.75 {\n margin-top: calc(var(--spacing) * 1.75);\n }\n\n .mt-2 {\n margin-top: calc(var(--spacing) * 2);\n }\n\n .mt-2\\.25 {\n margin-top: calc(var(--spacing) * 2.25);\n }\n\n .mt-4 {\n margin-top: calc(var(--spacing) * 4);\n }\n\n .mt-4\\.5 {\n margin-top: calc(var(--spacing) * 4.5);\n }\n\n .mt-5 {\n margin-top: calc(var(--spacing) * 5);\n }\n\n .mt-6 {\n margin-top: calc(var(--spacing) * 6);\n }\n\n .mt-8 {\n margin-top: calc(var(--spacing) * 8);\n }\n\n .mr-2 {\n margin-right: calc(var(--spacing) * 2);\n }\n\n .mr-4 {\n margin-right: calc(var(--spacing) * 4);\n }\n\n .mb-1 {\n margin-bottom: var(--spacing);\n }\n\n .mb-1\\.5 {\n margin-bottom: calc(var(--spacing) * 1.5);\n }\n\n .mb-2 {\n margin-bottom: calc(var(--spacing) * 2);\n }\n\n .mb-3 {\n margin-bottom: calc(var(--spacing) * 3);\n }\n\n .mb-4 {\n margin-bottom: calc(var(--spacing) * 4);\n }\n\n .mb-6 {\n margin-bottom: calc(var(--spacing) * 6);\n }\n\n .mb-6\\.5 {\n margin-bottom: calc(var(--spacing) * 6.5);\n }\n\n .mb-8 {\n margin-bottom: calc(var(--spacing) * 8);\n }\n\n .ml-1 {\n margin-left: var(--spacing);\n }\n\n .ml-2 {\n margin-left: calc(var(--spacing) * 2);\n }\n\n .ml-4 {\n margin-left: calc(var(--spacing) * 4);\n }\n\n .ml-12 {\n margin-left: calc(var(--spacing) * 12);\n }\n\n .ml-auto {\n margin-left: auto;\n }\n\n .box-border {\n box-sizing: border-box;\n }\n\n .box-content {\n box-sizing: content-box;\n }\n\n .line-clamp-1 {\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n overflow: hidden;\n }\n\n .line-clamp-2 {\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n overflow: hidden;\n }\n\n .line-clamp-11 {\n -webkit-line-clamp: 11;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n overflow: hidden;\n }\n\n .\\!hidden {\n display: none !important;\n }\n\n .block {\n display: block;\n }\n\n .contents {\n display: contents;\n }\n\n .flex {\n display: flex;\n }\n\n .grid {\n display: grid;\n }\n\n .hidden {\n display: none;\n }\n\n .inline {\n display: inline;\n }\n\n .inline-block {\n display: inline-block;\n }\n\n .inline-flex {\n display: inline-flex;\n }\n\n .table {\n display: table;\n }\n\n .aspect-square {\n aspect-ratio: 1;\n }\n\n .h-2 {\n height: calc(var(--spacing) * 2);\n }\n\n .h-2\\.25 {\n height: calc(var(--spacing) * 2.25);\n }\n\n .h-2\\.75 {\n height: calc(var(--spacing) * 2.75);\n }\n\n .h-3 {\n height: calc(var(--spacing) * 3);\n }\n\n .h-3\\.5 {\n height: calc(var(--spacing) * 3.5);\n }\n\n .h-4 {\n height: calc(var(--spacing) * 4);\n }\n\n .h-4\\.5 {\n height: calc(var(--spacing) * 4.5);\n }\n\n .h-4\\.25 {\n height: calc(var(--spacing) * 4.25);\n }\n\n .h-5 {\n height: calc(var(--spacing) * 5);\n }\n\n .h-5\\.5 {\n height: calc(var(--spacing) * 5.5);\n }\n\n .h-5\\.25 {\n height: calc(var(--spacing) * 5.25);\n }\n\n .h-6 {\n height: calc(var(--spacing) * 6);\n }\n\n .h-7 {\n height: calc(var(--spacing) * 7);\n }\n\n .h-7\\.5 {\n height: calc(var(--spacing) * 7.5);\n }\n\n .h-7\\.25 {\n height: calc(var(--spacing) * 7.25);\n }\n\n .h-8 {\n height: calc(var(--spacing) * 8);\n }\n\n .h-8\\.5 {\n height: calc(var(--spacing) * 8.5);\n }\n\n .h-8\\.75 {\n height: calc(var(--spacing) * 8.75);\n }\n\n .h-9 {\n height: calc(var(--spacing) * 9);\n }\n\n .h-9\\.5 {\n height: calc(var(--spacing) * 9.5);\n }\n\n .h-9\\.75 {\n height: calc(var(--spacing) * 9.75);\n }\n\n .h-10 {\n height: calc(var(--spacing) * 10);\n }\n\n .h-10\\.5 {\n height: calc(var(--spacing) * 10.5);\n }\n\n .h-11 {\n height: calc(var(--spacing) * 11);\n }\n\n .h-11\\.5 {\n height: calc(var(--spacing) * 11.5);\n }\n\n .h-11\\.25 {\n height: calc(var(--spacing) * 11.25);\n }\n\n .h-12 {\n height: calc(var(--spacing) * 12);\n }\n\n .h-12\\.5 {\n height: calc(var(--spacing) * 12.5);\n }\n\n .h-12\\.25 {\n height: calc(var(--spacing) * 12.25);\n }\n\n .h-12\\.75 {\n height: calc(var(--spacing) * 12.75);\n }\n\n .h-14 {\n height: calc(var(--spacing) * 14);\n }\n\n .h-14\\.25 {\n height: calc(var(--spacing) * 14.25);\n }\n\n .h-16 {\n height: calc(var(--spacing) * 16);\n }\n\n .h-17\\.75 {\n height: calc(var(--spacing) * 17.75);\n }\n\n .h-20 {\n height: calc(var(--spacing) * 20);\n }\n\n .h-21\\.25 {\n height: calc(var(--spacing) * 21.25);\n }\n\n .h-49\\.5 {\n height: calc(var(--spacing) * 49.5);\n }\n\n .h-52\\.75 {\n height: calc(var(--spacing) * 52.75);\n }\n\n .h-57\\.5 {\n height: calc(var(--spacing) * 57.5);\n }\n\n .h-77\\.25 {\n height: calc(var(--spacing) * 77.25);\n }\n\n .h-\\[0\\.0625rem\\] {\n height: .0625rem;\n }\n\n .h-\\[8\\.26375rem\\] {\n height: 8.26375rem;\n }\n\n .h-auto {\n height: auto;\n }\n\n .h-fit {\n height: fit-content;\n }\n\n .h-full {\n height: 100%;\n }\n\n .h-px {\n height: 1px;\n }\n\n .max-h-10 {\n max-height: calc(var(--spacing) * 10);\n }\n\n .max-h-40 {\n max-height: calc(var(--spacing) * 40);\n }\n\n .max-h-75 {\n max-height: var(--spacing-75);\n }\n\n .max-h-\\[40vh\\] {\n max-height: 40vh;\n }\n\n .max-h-full {\n max-height: 100%;\n }\n\n .min-h-0 {\n min-height: 0;\n }\n\n .min-h-5 {\n min-height: calc(var(--spacing) * 5);\n }\n\n .min-h-9 {\n min-height: calc(var(--spacing) * 9);\n }\n\n .min-h-10 {\n min-height: calc(var(--spacing) * 10);\n }\n\n .min-h-35 {\n min-height: calc(var(--spacing) * 35);\n }\n\n .min-h-102\\.5 {\n min-height: calc(var(--spacing) * 102.5);\n }\n\n .min-h-107\\.5 {\n min-height: calc(var(--spacing) * 107.5);\n }\n\n .min-h-113\\.25 {\n min-height: calc(var(--spacing) * 113.25);\n }\n\n .w-1\\/3 {\n width: 33.3333%;\n }\n\n .w-2 {\n width: calc(var(--spacing) * 2);\n }\n\n .w-2\\.5 {\n width: calc(var(--spacing) * 2.5);\n }\n\n .w-3\\.5 {\n width: calc(var(--spacing) * 3.5);\n }\n\n .w-4 {\n width: calc(var(--spacing) * 4);\n }\n\n .w-4\\.5 {\n width: calc(var(--spacing) * 4.5);\n }\n\n .w-4\\.25 {\n width: calc(var(--spacing) * 4.25);\n }\n\n .w-5 {\n width: calc(var(--spacing) * 5);\n }\n\n .w-6 {\n width: calc(var(--spacing) * 6);\n }\n\n .w-7 {\n width: calc(var(--spacing) * 7);\n }\n\n .w-8 {\n width: calc(var(--spacing) * 8);\n }\n\n .w-9 {\n width: calc(var(--spacing) * 9);\n }\n\n .w-9\\.5 {\n width: calc(var(--spacing) * 9.5);\n }\n\n .w-10 {\n width: calc(var(--spacing) * 10);\n }\n\n .w-10\\.5 {\n width: calc(var(--spacing) * 10.5);\n }\n\n .w-11\\.5 {\n width: calc(var(--spacing) * 11.5);\n }\n\n .w-11\\.25 {\n width: calc(var(--spacing) * 11.25);\n }\n\n .w-12 {\n width: calc(var(--spacing) * 12);\n }\n\n .w-12\\.5 {\n width: calc(var(--spacing) * 12.5);\n }\n\n .w-15\\.25 {\n width: calc(var(--spacing) * 15.25);\n }\n\n .w-17 {\n width: calc(var(--spacing) * 17);\n }\n\n .w-18 {\n width: var(--spacing-18);\n }\n\n .w-18\\.5 {\n width: calc(var(--spacing) * 18.5);\n }\n\n .w-18\\.75 {\n width: calc(var(--spacing) * 18.75);\n }\n\n .w-20 {\n width: calc(var(--spacing) * 20);\n }\n\n .w-20\\.5 {\n width: calc(var(--spacing) * 20.5);\n }\n\n .w-21\\.5 {\n width: calc(var(--spacing) * 21.5);\n }\n\n .w-24\\.75 {\n width: calc(var(--spacing) * 24.75);\n }\n\n .w-25 {\n width: calc(var(--spacing) * 25);\n }\n\n .w-26\\.25 {\n width: calc(var(--spacing) * 26.25);\n }\n\n .w-27 {\n width: calc(var(--spacing) * 27);\n }\n\n .w-27\\.5 {\n width: calc(var(--spacing) * 27.5);\n }\n\n .w-30 {\n width: var(--spacing-30);\n }\n\n .w-30\\.75 {\n width: calc(var(--spacing) * 30.75);\n }\n\n .w-35 {\n width: calc(var(--spacing) * 35);\n }\n\n .w-36 {\n width: calc(var(--spacing) * 36);\n }\n\n .w-37 {\n width: calc(var(--spacing) * 37);\n }\n\n .w-40\\.25 {\n width: calc(var(--spacing) * 40.25);\n }\n\n .w-41 {\n width: calc(var(--spacing) * 41);\n }\n\n .w-47\\.75 {\n width: calc(var(--spacing) * 47.75);\n }\n\n .w-56\\.5 {\n width: calc(var(--spacing) * 56.5);\n }\n\n .w-57\\.5 {\n width: calc(var(--spacing) * 57.5);\n }\n\n .w-60\\.5 {\n width: calc(var(--spacing) * 60.5);\n }\n\n .w-62\\.5 {\n width: calc(var(--spacing) * 62.5);\n }\n\n .w-63\\.5 {\n width: calc(var(--spacing) * 63.5);\n }\n\n .w-70\\.5 {\n width: calc(var(--spacing) * 70.5);\n }\n\n .w-71 {\n width: calc(var(--spacing) * 71);\n }\n\n .w-87 {\n width: calc(var(--spacing) * 87);\n }\n\n .w-88\\.5 {\n width: calc(var(--spacing) * 88.5);\n }\n\n .w-91 {\n width: calc(var(--spacing) * 91);\n }\n\n .w-95 {\n width: calc(var(--spacing) * 95);\n }\n\n .w-100\\.5 {\n width: calc(var(--spacing) * 100.5);\n }\n\n .w-117 {\n width: var(--spacing-117);\n }\n\n .w-120 {\n width: var(--spacing-120);\n }\n\n .w-120\\.75 {\n width: calc(var(--spacing) * 120.75);\n }\n\n .w-121 {\n width: calc(var(--spacing) * 121);\n }\n\n .w-130\\.25 {\n width: calc(var(--spacing) * 130.25);\n }\n\n .w-131 {\n width: calc(var(--spacing) * 131);\n }\n\n .w-139 {\n width: calc(var(--spacing) * 139);\n }\n\n .w-194\\.25 {\n width: calc(var(--spacing) * 194.25);\n }\n\n .w-270 {\n width: calc(var(--spacing) * 270);\n }\n\n .w-282 {\n width: calc(var(--spacing) * 282);\n }\n\n .w-286 {\n width: calc(var(--spacing) * 286);\n }\n\n .w-294 {\n width: calc(var(--spacing) * 294);\n }\n\n .w-\\[10\\.5rem\\] {\n width: 10.5rem;\n }\n\n .w-\\[calc\\(100\\%-10px\\)\\] {\n width: calc(100% - 10px);\n }\n\n .w-full {\n width: 100%;\n }\n\n .w-px {\n width: 1px;\n }\n\n .max-w-36 {\n max-width: calc(var(--spacing) * 36);\n }\n\n .max-w-38 {\n max-width: var(--spacing-38);\n }\n\n .max-w-43 {\n max-width: var(--spacing-43);\n }\n\n .max-w-44 {\n max-width: calc(var(--spacing) * 44);\n }\n\n .max-w-51\\.5 {\n max-width: calc(var(--spacing) * 51.5);\n }\n\n .max-w-194\\.25 {\n max-width: calc(var(--spacing) * 194.25);\n }\n\n .max-w-\\[23\\.75rem\\] {\n max-width: 23.75rem;\n }\n\n .max-w-full {\n max-width: 100%;\n }\n\n .min-w-0 {\n min-width: 0;\n }\n\n .min-w-4 {\n min-width: calc(var(--spacing) * 4);\n }\n\n .min-w-20 {\n min-width: calc(var(--spacing) * 20);\n }\n\n .min-w-30 {\n min-width: var(--spacing-30);\n }\n\n .min-w-36 {\n min-width: calc(var(--spacing) * 36);\n }\n\n .min-w-44 {\n min-width: calc(var(--spacing) * 44);\n }\n\n .min-w-53\\.25 {\n min-width: calc(var(--spacing) * 53.25);\n }\n\n .min-w-55 {\n min-width: calc(var(--spacing) * 55);\n }\n\n .min-w-\\[8\\.2rem\\] {\n min-width: 8.2rem;\n }\n\n .min-w-fit {\n min-width: fit-content;\n }\n\n .flex-1 {\n flex: 1;\n }\n\n .flex-shrink {\n flex-shrink: 1;\n }\n\n .shrink-0 {\n flex-shrink: 0;\n }\n\n .-translate-x-1\\/2 {\n --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .translate-x-1 {\n --tw-translate-x: var(--spacing);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .-translate-y-1\\/2 {\n --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .scale-\\[1\\.02\\] {\n scale: 1.02;\n }\n\n .transform {\n transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );\n }\n\n .cursor-default {\n cursor: default;\n }\n\n .cursor-grab {\n cursor: grab;\n }\n\n .cursor-not-allowed {\n cursor: not-allowed;\n }\n\n .cursor-pointer {\n cursor: pointer;\n }\n\n .cursor-text {\n cursor: text;\n }\n\n .touch-none {\n touch-action: none;\n }\n\n .resize {\n resize: both;\n }\n\n .appearance-none {\n appearance: none;\n }\n\n .grid-cols-\\[7\\.5rem_7\\.5rem_7\\.5rem\\] {\n grid-template-columns: 7.5rem 7.5rem 7.5rem;\n }\n\n .grid-cols-\\[auto_auto_1fr_auto\\] {\n grid-template-columns: auto auto 1fr auto;\n }\n\n .flex-col {\n flex-direction: column;\n }\n\n .flex-row {\n flex-direction: row;\n }\n\n .flex-wrap {\n flex-wrap: wrap;\n }\n\n .items-baseline {\n align-items: baseline;\n }\n\n .items-center {\n align-items: center;\n }\n\n .items-end {\n align-items: flex-end;\n }\n\n .items-start {\n align-items: flex-start;\n }\n\n .justify-between {\n justify-content: space-between;\n }\n\n .justify-center {\n justify-content: center;\n }\n\n .justify-end {\n justify-content: flex-end;\n }\n\n .gap-0 {\n gap: 0;\n }\n\n .gap-0\\.5 {\n gap: calc(var(--spacing) * .5);\n }\n\n .gap-1 {\n gap: var(--spacing);\n }\n\n .gap-1\\.5 {\n gap: calc(var(--spacing) * 1.5);\n }\n\n .gap-1\\.25 {\n gap: calc(var(--spacing) * 1.25);\n }\n\n .gap-2 {\n gap: calc(var(--spacing) * 2);\n }\n\n .gap-3 {\n gap: calc(var(--spacing) * 3);\n }\n\n .gap-4 {\n gap: calc(var(--spacing) * 4);\n }\n\n .gap-5 {\n gap: calc(var(--spacing) * 5);\n }\n\n .gap-6 {\n gap: calc(var(--spacing) * 6);\n }\n\n .gap-8 {\n gap: calc(var(--spacing) * 8);\n }\n\n .gap-8\\.75 {\n gap: calc(var(--spacing) * 8.75);\n }\n\n .gap-12 {\n gap: calc(var(--spacing) * 12);\n }\n\n .gap-19 {\n gap: calc(var(--spacing) * 19);\n }\n\n .gap-\\[2\\%\\] {\n gap: 2%;\n }\n\n :where(.space-y-1 > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));\n margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));\n }\n\n :where(.space-y-2 > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));\n }\n\n :where(.space-y-3 > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));\n }\n\n .gap-x-1 {\n column-gap: var(--spacing);\n }\n\n .gap-x-2 {\n column-gap: calc(var(--spacing) * 2);\n }\n\n .gap-x-4 {\n column-gap: calc(var(--spacing) * 4);\n }\n\n .gap-x-6 {\n column-gap: calc(var(--spacing) * 6);\n }\n\n .gap-y-1 {\n row-gap: var(--spacing);\n }\n\n .gap-y-\\[0\\.1875rem\\] {\n row-gap: .1875rem;\n }\n\n .self-end {\n align-self: flex-end;\n }\n\n .truncate {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n }\n\n .overflow-auto {\n overflow: auto;\n }\n\n .overflow-hidden {\n overflow: hidden;\n }\n\n .overflow-visible {\n overflow: visible;\n }\n\n .overflow-x-hidden {\n overflow-x: hidden;\n }\n\n .overflow-y-auto {\n overflow-y: auto;\n }\n\n .rounded {\n border-radius: .25rem;\n }\n\n .rounded-2xl {\n border-radius: var(--radius-2xl);\n }\n\n .rounded-full {\n border-radius: 3.40282e38px;\n }\n\n .rounded-lg {\n border-radius: var(--radius-lg);\n }\n\n .rounded-md {\n border-radius: var(--radius-md);\n }\n\n .rounded-none {\n border-radius: 0;\n }\n\n .rounded-sm {\n border-radius: var(--radius-sm);\n }\n\n .rounded-xl {\n border-radius: var(--radius-xl);\n }\n\n .rounded-t-lg {\n border-top-left-radius: var(--radius-lg);\n border-top-right-radius: var(--radius-lg);\n }\n\n .rounded-t-md {\n border-top-left-radius: var(--radius-md);\n border-top-right-radius: var(--radius-md);\n }\n\n .rounded-t-xl {\n border-top-left-radius: var(--radius-xl);\n border-top-right-radius: var(--radius-xl);\n }\n\n .rounded-l-xl {\n border-top-left-radius: var(--radius-xl);\n border-bottom-left-radius: var(--radius-xl);\n }\n\n .rounded-tl-xl {\n border-top-left-radius: var(--radius-xl);\n }\n\n .rounded-tr-xl {\n border-top-right-radius: var(--radius-xl);\n }\n\n .rounded-b-lg {\n border-bottom-right-radius: var(--radius-lg);\n border-bottom-left-radius: var(--radius-lg);\n }\n\n .rounded-b-md {\n border-bottom-right-radius: var(--radius-md);\n border-bottom-left-radius: var(--radius-md);\n }\n\n .rounded-b-xl {\n border-bottom-right-radius: var(--radius-xl);\n border-bottom-left-radius: var(--radius-xl);\n }\n\n .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n\n .border-0 {\n border-style: var(--tw-border-style);\n border-width: 0;\n }\n\n .border-2 {\n border-style: var(--tw-border-style);\n border-width: 2px;\n }\n\n .border-x {\n border-inline-style: var(--tw-border-style);\n border-inline-width: 1px;\n }\n\n .border-t {\n border-top-style: var(--tw-border-style);\n border-top-width: 1px;\n }\n\n .border-t-4 {\n border-top-style: var(--tw-border-style);\n border-top-width: 4px;\n }\n\n .border-r {\n border-right-style: var(--tw-border-style);\n border-right-width: 1px;\n }\n\n .border-r-0 {\n border-right-style: var(--tw-border-style);\n border-right-width: 0;\n }\n\n .border-b {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n }\n\n .border-b-0 {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 0;\n }\n\n .border-l {\n border-left-style: var(--tw-border-style);\n border-left-width: 1px;\n }\n\n .border-l-0 {\n border-left-style: var(--tw-border-style);\n border-left-width: 0;\n }\n\n .border-l-4 {\n border-left-style: var(--tw-border-style);\n border-left-width: 4px;\n }\n\n .border-dashed {\n --tw-border-style: dashed;\n border-style: dashed;\n }\n\n .border-none {\n --tw-border-style: none;\n border-style: none;\n }\n\n .border-solid {\n --tw-border-style: solid;\n border-style: solid;\n }\n\n .border-\\(--axebow-gray\\) {\n border-color: var(--axebow-gray);\n }\n\n .border-\\(--axebow-light-gray\\) {\n border-color: var(--axebow-light-gray);\n }\n\n .border-\\(--axebow-premium-text\\) {\n border-color: var(--axebow-premium-text);\n }\n\n .border-\\(--axebow-primary\\) {\n border-color: var(--axebow-primary);\n }\n\n .border-\\(--axebow-secondary\\) {\n border-color: var(--axebow-secondary);\n }\n\n .border-\\(--axebow-table-border\\) {\n border-color: var(--axebow-table-border);\n }\n\n .border-\\(--axebow-table-header-border\\) {\n border-color: var(--axebow-table-header-border);\n }\n\n .border-\\(--axebow-tertiary\\) {\n border-color: var(--axebow-tertiary);\n }\n\n .border-\\[\\#DBDDE4\\] {\n border-color: #dbdde4;\n }\n\n .border-\\[var\\(--axebow-error\\)\\] {\n border-color: var(--axebow-error);\n }\n\n .border-\\[var\\(--axebow-gray\\)\\] {\n border-color: var(--axebow-gray);\n }\n\n .border-\\[var\\(--axebow-tertiary\\)\\] {\n border-color: var(--axebow-tertiary);\n }\n\n .border-blue-200 {\n border-color: var(--color-blue-200);\n }\n\n .border-gray-200 {\n border-color: var(--color-gray-200);\n }\n\n .border-gray-300 {\n border-color: var(--color-gray-300);\n }\n\n .border-gray-400 {\n border-color: var(--color-gray-400);\n }\n\n .border-gray-500 {\n border-color: var(--color-gray-500);\n }\n\n .border-green-200 {\n border-color: var(--color-green-200);\n }\n\n .border-red-200 {\n border-color: var(--color-red-200);\n }\n\n .border-transparent {\n border-color: #0000;\n }\n\n .border-white {\n border-color: var(--color-white);\n }\n\n .border-yellow-200 {\n border-color: var(--color-yellow-200);\n }\n\n .bg-\\(--axebow-anti-flash-white\\) {\n background-color: var(--axebow-anti-flash-white);\n }\n\n .bg-\\(--axebow-base\\) {\n background-color: var(--axebow-base);\n }\n\n .bg-\\(--axebow-error\\) {\n background-color: var(--axebow-error);\n }\n\n .bg-\\(--axebow-gray\\) {\n background-color: var(--axebow-gray);\n }\n\n .bg-\\(--axebow-light-gray\\), .bg-\\(--axebow-light-gray\\)\\/80 {\n background-color: var(--axebow-light-gray);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .bg-\\(--axebow-light-gray\\)\\/80 {\n background-color: color-mix(in oklab, var(--axebow-light-gray) 80%, transparent);\n }\n }\n\n .bg-\\(--axebow-primary\\) {\n background-color: var(--axebow-primary);\n }\n\n .bg-\\(--axebow-primary-light\\) {\n background-color: var(--axebow-primary-light);\n }\n\n .bg-\\(--axebow-success\\) {\n background-color: var(--axebow-success);\n }\n\n .bg-\\(--axebow-tertiary\\), .bg-\\(--axebow-tertiary\\)\\/15 {\n background-color: var(--axebow-tertiary);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .bg-\\(--axebow-tertiary\\)\\/15 {\n background-color: color-mix(in oklab, var(--axebow-tertiary) 15%, transparent);\n }\n }\n\n .bg-\\(--axebow-warning\\) {\n background-color: var(--axebow-warning);\n }\n\n .bg-\\(--axebow-white\\) {\n background-color: var(--axebow-white);\n }\n\n .bg-\\[\\#006BFF\\] {\n background-color: #006bff;\n }\n\n .bg-\\[\\#C7DCFA\\] {\n background-color: #c7dcfa;\n }\n\n .bg-\\[var\\(--axebow-gray\\)\\] {\n background-color: var(--axebow-gray);\n }\n\n .bg-\\[var\\(--axebow-tertiary\\)\\] {\n background-color: var(--axebow-tertiary);\n }\n\n .bg-blue-50 {\n background-color: var(--color-blue-50);\n }\n\n .bg-gray-50 {\n background-color: var(--color-gray-50);\n }\n\n .bg-gray-100 {\n background-color: var(--color-gray-100);\n }\n\n .bg-gray-200 {\n background-color: var(--color-gray-200);\n }\n\n .bg-gray-400 {\n background-color: var(--color-gray-400);\n }\n\n .bg-green-50 {\n background-color: var(--color-green-50);\n }\n\n .bg-red-50 {\n background-color: var(--color-red-50);\n }\n\n .bg-sky-50 {\n background-color: var(--color-sky-50);\n }\n\n .bg-sky-100 {\n background-color: var(--color-sky-100);\n }\n\n .bg-transparent {\n background-color: #0000;\n }\n\n .bg-white {\n background-color: var(--color-white);\n }\n\n .bg-yellow-50 {\n background-color: var(--color-yellow-50);\n }\n\n .object-contain {\n object-fit: contain;\n }\n\n .p-0 {\n padding: 0;\n }\n\n .p-1 {\n padding: var(--spacing);\n }\n\n .p-2 {\n padding: calc(var(--spacing) * 2);\n }\n\n .p-3 {\n padding: calc(var(--spacing) * 3);\n }\n\n .p-3\\.25 {\n padding: calc(var(--spacing) * 3.25);\n }\n\n .p-4 {\n padding: calc(var(--spacing) * 4);\n }\n\n .p-6 {\n padding: calc(var(--spacing) * 6);\n }\n\n .px-0\\.5 {\n padding-inline: calc(var(--spacing) * .5);\n }\n\n .px-1 {\n padding-inline: var(--spacing);\n }\n\n .px-1\\.5 {\n padding-inline: calc(var(--spacing) * 1.5);\n }\n\n .px-2 {\n padding-inline: calc(var(--spacing) * 2);\n }\n\n .px-3 {\n padding-inline: calc(var(--spacing) * 3);\n }\n\n .px-3\\.5 {\n padding-inline: calc(var(--spacing) * 3.5);\n }\n\n .px-4 {\n padding-inline: calc(var(--spacing) * 4);\n }\n\n .px-5 {\n padding-inline: calc(var(--spacing) * 5);\n }\n\n .py-0\\.5 {\n padding-block: calc(var(--spacing) * .5);\n }\n\n .py-1 {\n padding-block: var(--spacing);\n }\n\n .py-1\\.5 {\n padding-block: calc(var(--spacing) * 1.5);\n }\n\n .py-1\\.25 {\n padding-block: calc(var(--spacing) * 1.25);\n }\n\n .py-2 {\n padding-block: calc(var(--spacing) * 2);\n }\n\n .py-2\\.5 {\n padding-block: calc(var(--spacing) * 2.5);\n }\n\n .py-2\\.75 {\n padding-block: calc(var(--spacing) * 2.75);\n }\n\n .py-3 {\n padding-block: calc(var(--spacing) * 3);\n }\n\n .py-8 {\n padding-block: calc(var(--spacing) * 8);\n }\n\n .ps-4 {\n padding-inline-start: calc(var(--spacing) * 4);\n }\n\n .ps-8 {\n padding-inline-start: calc(var(--spacing) * 8);\n }\n\n .pe-4 {\n padding-inline-end: calc(var(--spacing) * 4);\n }\n\n .pt-0\\.5 {\n padding-top: calc(var(--spacing) * .5);\n }\n\n .pt-1 {\n padding-top: var(--spacing);\n }\n\n .pt-2 {\n padding-top: calc(var(--spacing) * 2);\n }\n\n .pt-3 {\n padding-top: calc(var(--spacing) * 3);\n }\n\n .pt-4 {\n padding-top: calc(var(--spacing) * 4);\n }\n\n .pt-6 {\n padding-top: calc(var(--spacing) * 6);\n }\n\n .pt-8 {\n padding-top: calc(var(--spacing) * 8);\n }\n\n .pt-px {\n padding-top: 1px;\n }\n\n .pr-1 {\n padding-right: var(--spacing);\n }\n\n .pr-2 {\n padding-right: calc(var(--spacing) * 2);\n }\n\n .pr-4 {\n padding-right: calc(var(--spacing) * 4);\n }\n\n .pr-4\\.5 {\n padding-right: calc(var(--spacing) * 4.5);\n }\n\n .pr-5 {\n padding-right: calc(var(--spacing) * 5);\n }\n\n .pb-0 {\n padding-bottom: 0;\n }\n\n .pb-2 {\n padding-bottom: calc(var(--spacing) * 2);\n }\n\n .pb-3\\.5 {\n padding-bottom: calc(var(--spacing) * 3.5);\n }\n\n .pb-4 {\n padding-bottom: calc(var(--spacing) * 4);\n }\n\n .pb-6 {\n padding-bottom: calc(var(--spacing) * 6);\n }\n\n .pl-1 {\n padding-left: var(--spacing);\n }\n\n .pl-1\\.5 {\n padding-left: calc(var(--spacing) * 1.5);\n }\n\n .pl-2 {\n padding-left: calc(var(--spacing) * 2);\n }\n\n .pl-4 {\n padding-left: calc(var(--spacing) * 4);\n }\n\n .pl-5 {\n padding-left: calc(var(--spacing) * 5);\n }\n\n .pl-6 {\n padding-left: calc(var(--spacing) * 6);\n }\n\n .pl-11\\.75 {\n padding-left: calc(var(--spacing) * 11.75);\n }\n\n .pl-px {\n padding-left: 1px;\n }\n\n .text-center {\n text-align: center;\n }\n\n .text-left {\n text-align: left;\n }\n\n .text-right {\n text-align: right;\n }\n\n .text-start {\n text-align: start;\n }\n\n .align-middle {\n vertical-align: middle;\n }\n\n .font-\\[Material_Symbols_Outlined\\] {\n font-family: Material Symbols Outlined;\n }\n\n .font-\\[inherit\\] {\n font-family: inherit;\n }\n\n .text-base {\n font-size: var(--text-base);\n line-height: var(--tw-leading, var(--text-base--line-height));\n }\n\n .text-lg {\n font-size: var(--text-lg);\n line-height: var(--tw-leading, var(--text-lg--line-height));\n }\n\n .text-md {\n font-size: var(--text-md);\n line-height: var(--tw-leading, var(--text-md--line-height));\n }\n\n .text-sm {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n\n .text-xl {\n font-size: var(--text-xl);\n line-height: var(--tw-leading, var(--text-xl--line-height));\n }\n\n .text-xs {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n\n .text-\\[0\\.9375rem\\] {\n font-size: .9375rem;\n }\n\n .text-\\[18px\\] {\n font-size: 18px;\n }\n\n .leading-3\\.5 {\n --tw-leading: calc(var(--spacing) * 3.5);\n line-height: calc(var(--spacing) * 3.5);\n }\n\n .leading-4\\.25 {\n --tw-leading: calc(var(--spacing) * 4.25);\n line-height: calc(var(--spacing) * 4.25);\n }\n\n .leading-\\[1\\.125rem\\] {\n --tw-leading: 1.125rem;\n line-height: 1.125rem;\n }\n\n .leading-\\[1\\.0625rem\\] {\n --tw-leading: 1.0625rem;\n line-height: 1.0625rem;\n }\n\n .leading-\\[1\\.21875rem\\] {\n --tw-leading: 1.21875rem;\n line-height: 1.21875rem;\n }\n\n .leading-none {\n --tw-leading: 1;\n line-height: 1;\n }\n\n .leading-relaxed {\n --tw-leading: var(--leading-relaxed);\n line-height: var(--leading-relaxed);\n }\n\n .leading-snug {\n --tw-leading: var(--leading-snug);\n line-height: var(--leading-snug);\n }\n\n .leading-tight {\n --tw-leading: var(--leading-tight);\n line-height: var(--leading-tight);\n }\n\n .font-black {\n --tw-font-weight: var(--font-weight-black);\n font-weight: var(--font-weight-black);\n }\n\n .font-bold {\n --tw-font-weight: var(--font-weight-bold);\n font-weight: var(--font-weight-bold);\n }\n\n .font-medium {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n\n .font-normal {\n --tw-font-weight: var(--font-weight-normal);\n font-weight: var(--font-weight-normal);\n }\n\n .font-semibold {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n\n .tracking-wider {\n --tw-tracking: var(--tracking-wider);\n letter-spacing: var(--tracking-wider);\n }\n\n .wrap-break-word {\n overflow-wrap: break-word;\n }\n\n .text-ellipsis {\n text-overflow: ellipsis;\n }\n\n .whitespace-nowrap {\n white-space: nowrap;\n }\n\n .text-\\(--axebow-anti-flash-white\\) {\n color: var(--axebow-anti-flash-white);\n }\n\n .text-\\(--axebow-black\\) {\n color: var(--axebow-black);\n }\n\n .text-\\(--axebow-error\\) {\n color: var(--axebow-error);\n }\n\n .text-\\(--axebow-gray\\) {\n color: var(--axebow-gray);\n }\n\n .text-\\(--axebow-primary\\) {\n color: var(--axebow-primary);\n }\n\n .text-\\(--axebow-rich-black\\) {\n color: var(--axebow-rich-black);\n }\n\n .text-\\(--axebow-secondary\\) {\n color: var(--axebow-secondary);\n }\n\n .text-\\(--axebow-tertiary\\) {\n color: var(--axebow-tertiary);\n }\n\n .text-\\[\\#006BFF\\] {\n color: #006bff;\n }\n\n .text-\\[\\#78787A\\] {\n color: #78787a;\n }\n\n .text-\\[\\#344966\\] {\n color: #344966;\n }\n\n .text-\\[\\#E93A3A\\] {\n color: #e93a3a;\n }\n\n .text-\\[var\\(--axebow-error\\)\\] {\n color: var(--axebow-error);\n }\n\n .text-\\[var\\(--axebow-gray\\)\\] {\n color: var(--axebow-gray);\n }\n\n .text-black {\n color: var(--color-black);\n }\n\n .text-blue-600 {\n color: var(--color-blue-600);\n }\n\n .text-blue-800 {\n color: var(--color-blue-800);\n }\n\n .text-gray-300 {\n color: var(--color-gray-300);\n }\n\n .text-gray-400 {\n color: var(--color-gray-400);\n }\n\n .text-gray-500 {\n color: var(--color-gray-500);\n }\n\n .text-gray-600 {\n color: var(--color-gray-600);\n }\n\n .text-gray-700 {\n color: var(--color-gray-700);\n }\n\n .text-gray-900 {\n color: var(--color-gray-900);\n }\n\n .text-green-600 {\n color: var(--color-green-600);\n }\n\n .text-green-800 {\n color: var(--color-green-800);\n }\n\n .text-inherit {\n color: inherit;\n }\n\n .text-red-500 {\n color: var(--color-red-500);\n }\n\n .text-white {\n color: var(--color-white);\n }\n\n .text-yellow-600 {\n color: var(--color-yellow-600);\n }\n\n .text-yellow-800 {\n color: var(--color-yellow-800);\n }\n\n .capitalize {\n text-transform: capitalize;\n }\n\n .uppercase {\n text-transform: uppercase;\n }\n\n .italic {\n font-style: italic;\n }\n\n .no-underline {\n text-decoration-line: none;\n }\n\n .underline {\n text-decoration-line: underline;\n }\n\n .decoration-\\(--axebow-error\\) {\n -webkit-text-decoration-color: var(--axebow-error);\n -webkit-text-decoration-color: var(--axebow-error);\n text-decoration-color: var(--axebow-error);\n }\n\n .placeholder-gray-400::placeholder {\n color: var(--color-gray-400);\n }\n\n .opacity-0 {\n opacity: 0;\n }\n\n .opacity-50 {\n opacity: .5;\n }\n\n .opacity-60 {\n opacity: .6;\n }\n\n .opacity-70 {\n opacity: .7;\n }\n\n .opacity-100 {\n opacity: 1;\n }\n\n .shadow {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-\\[0_-8px_8px_-8px_rgba\\(13\\,24\\,33\\,0\\.15\\)\\] {\n --tw-shadow: 0 -8px 8px -8px var(--tw-shadow-color, #0d182126);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-\\[0_2px_6px_rgba\\(0\\,0\\,0\\,0\\.2\\)\\] {\n --tw-shadow: 0 2px 6px var(--tw-shadow-color, #0003);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-\\[0_6px_16px_rgba\\(13\\,24\\,33\\,0\\.18\\)\\] {\n --tw-shadow: 0 6px 16px var(--tw-shadow-color, #0d18212e);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-\\[2px_2px_25px_0px_rgba\\(0\\,0\\,0\\,0\\.1\\)\\] {\n --tw-shadow: 2px 2px 25px 0px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-lg {\n --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-md {\n --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-none {\n --tw-shadow: 0 0 #0000;\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-sm {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .axebow-shadow-hover {\n transition: box-shadow .2s ease-in-out;\n }\n\n .axebow-shadow-hover:hover {\n box-shadow: 0 4px 12px #0d182114;\n }\n\n .outline {\n outline-style: var(--tw-outline-style);\n outline-width: 1px;\n }\n\n .grayscale {\n --tw-grayscale: grayscale(100%);\n filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );\n }\n\n .filter {\n filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );\n }\n\n .transition {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-\\[filter\\] {\n transition-property: filter;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-all {\n transition-property: all;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-colors {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-opacity {\n transition-property: opacity;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-shadow {\n transition-property: box-shadow;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-transform {\n transition-property: transform, translate, scale, rotate;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .delay-100 {\n transition-delay: .1s;\n }\n\n .duration-120 {\n --tw-duration: .12s;\n transition-duration: .12s;\n }\n\n .duration-150 {\n --tw-duration: .15s;\n transition-duration: .15s;\n }\n\n .duration-200 {\n --tw-duration: .2s;\n transition-duration: .2s;\n }\n\n .duration-300 {\n --tw-duration: .3s;\n transition-duration: .3s;\n }\n\n .ease-in-out {\n --tw-ease: var(--ease-in-out);\n transition-timing-function: var(--ease-in-out);\n }\n\n .ease-out {\n --tw-ease: var(--ease-out);\n transition-timing-function: var(--ease-out);\n }\n\n .outline-none {\n --tw-outline-style: none;\n outline-style: none;\n }\n\n .select-none {\n -webkit-user-select: none;\n user-select: none;\n }\n\n .\\[font-variation-settings\\:\\'FILL\\'_0\\,\\'wght\\'_400\\,\\'GRAD\\'_0\\,\\'opsz\\'_24\\] {\n font-variation-settings: \"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24;\n }\n\n .\\[font-variation-settings\\:\\'FILL\\'_1\\,\\'wght\\'_400\\,\\'GRAD\\'_0\\,\\'opsz\\'_24\\] {\n font-variation-settings: \"FILL\" 1,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24;\n }\n\n @media (hover: hover) {\n .group-hover\\:translate-x-0:is(:where(.group):hover *) {\n --tw-translate-x: 0;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .group-hover\\:rotate-15:is(:where(.group):hover *) {\n rotate: 15deg;\n }\n\n .group-hover\\:font-semibold:is(:where(.group):hover *) {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n\n .group-hover\\:text-\\(--axebow-primary\\):is(:where(.group):hover *) {\n color: var(--axebow-primary);\n }\n\n .group-hover\\:text-red-500:is(:where(.group):hover *) {\n color: var(--color-red-500);\n }\n\n .group-hover\\:opacity-100:is(:where(.group):hover *) {\n opacity: 1;\n }\n\n .group-hover\\:invert:is(:where(.group):hover *) {\n --tw-invert: invert(100%);\n filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );\n }\n }\n\n .focus-within\\:border-blue-500:focus-within {\n border-color: var(--color-blue-500);\n }\n\n .focus-within\\:ring-2:focus-within {\n --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .focus-within\\:ring-blue-100:focus-within {\n --tw-ring-color: var(--color-blue-100);\n }\n\n @media (hover: hover) {\n .hover\\:scale-105:hover {\n --tw-scale-x: 105%;\n --tw-scale-y: 105%;\n --tw-scale-z: 105%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n\n .hover\\:rounded-md:hover {\n border-radius: var(--radius-md);\n }\n\n .hover\\:border-2:hover {\n border-style: var(--tw-border-style);\n border-width: 2px;\n }\n\n .hover\\:border-solid:hover {\n --tw-border-style: solid;\n border-style: solid;\n }\n\n .hover\\:border-\\(--axebow-gray\\):hover {\n border-color: var(--axebow-gray);\n }\n\n .hover\\:border-\\(--axebow-primary\\):hover {\n border-color: var(--axebow-primary);\n }\n\n .hover\\:border-\\(--axebow-tertiary\\):hover, .hover\\:border-\\[var\\(--axebow-tertiary\\)\\]:hover {\n border-color: var(--axebow-tertiary);\n }\n\n .hover\\:border-red-300:hover {\n border-color: var(--color-red-300);\n }\n\n .hover\\:bg-\\(--axebow-anti-flash-white\\):hover {\n background-color: var(--axebow-anti-flash-white);\n }\n\n .hover\\:bg-\\(--axebow-base\\):hover {\n background-color: var(--axebow-base);\n }\n\n .hover\\:bg-\\(--axebow-gray\\):hover {\n background-color: var(--axebow-gray);\n }\n\n .hover\\:bg-\\(--axebow-light-gray\\):hover {\n background-color: var(--axebow-light-gray);\n }\n\n .hover\\:bg-\\(--axebow-primary\\):hover {\n background-color: var(--axebow-primary);\n }\n\n .hover\\:bg-\\[var\\(--axebow-anti-flash-white\\)\\]:hover {\n background-color: var(--axebow-anti-flash-white);\n }\n\n .hover\\:bg-gray-50:hover {\n background-color: var(--color-gray-50);\n }\n\n .hover\\:bg-gray-100:hover {\n background-color: var(--color-gray-100);\n }\n\n .hover\\:bg-gray-200:hover {\n background-color: var(--color-gray-200);\n }\n\n .hover\\:bg-red-50:hover {\n background-color: var(--color-red-50);\n }\n\n .hover\\:bg-white:hover {\n background-color: var(--color-white);\n }\n\n .hover\\:px-\\[1\\.375rem\\]:hover {\n padding-inline: 1.375rem;\n }\n\n .hover\\:text-\\(--axebow-primary\\):hover {\n color: var(--axebow-primary);\n }\n\n .hover\\:text-\\(--axebow-tertiary\\):hover {\n color: var(--axebow-tertiary);\n }\n\n .hover\\:text-\\[var\\(--axebow-gray\\)\\]:hover {\n color: var(--axebow-gray);\n }\n\n .hover\\:text-black:hover {\n color: var(--color-black);\n }\n\n .hover\\:text-gray-700:hover {\n color: var(--color-gray-700);\n }\n\n .hover\\:text-red-600:hover {\n color: var(--color-red-600);\n }\n\n .hover\\:underline:hover {\n text-decoration-line: underline;\n }\n\n .hover\\:opacity-80:hover {\n opacity: .8;\n }\n\n .hover\\:opacity-100:hover {\n opacity: 1;\n }\n\n .hover\\:shadow-\\[0_2px_6px_rgba\\(13\\,24\\,33\\,0\\.14\\)\\]:hover {\n --tw-shadow: 0 2px 6px var(--tw-shadow-color, #0d182124);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .hover\\:shadow-\\[0_4px_12px_0_rgba\\(13\\,24\\,33\\,0\\.08\\)\\]:hover {\n --tw-shadow: 0 4px 12px 0 var(--tw-shadow-color, #0d182114);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .hover\\:shadow-lg:hover {\n --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n\n .focus\\:outline-2:focus {\n outline-style: var(--tw-outline-style);\n outline-width: 2px;\n }\n\n .focus\\:outline-offset-1:focus {\n outline-offset: 1px;\n }\n\n .focus\\:outline-blue-500:focus {\n outline-color: var(--color-blue-500);\n }\n\n .focus\\:outline-none:focus {\n --tw-outline-style: none;\n outline-style: none;\n }\n\n .focus-visible\\:ring-2:focus-visible {\n --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .focus-visible\\:ring-\\[\\#006BFF\\]:focus-visible {\n --tw-ring-color: #006bff;\n }\n\n .focus-visible\\:outline-2:focus-visible {\n outline-style: var(--tw-outline-style);\n outline-width: 2px;\n }\n\n .focus-visible\\:outline-\\(--axebow-tertiary\\):focus-visible {\n outline-color: var(--axebow-tertiary);\n }\n\n .active\\:cursor-grabbing:active {\n cursor: grabbing;\n }\n\n .disabled\\:pointer-events-none:disabled {\n pointer-events: none;\n }\n\n .disabled\\:cursor-not-allowed:disabled {\n cursor: not-allowed;\n }\n\n .disabled\\:opacity-50:disabled {\n opacity: .5;\n }\n\n @media (min-width: 48rem) {\n .md\\:gap-8 {\n gap: calc(var(--spacing) * 8);\n }\n }\n\n @media (min-width: 64rem) {\n .lg\\:sticky {\n position: sticky;\n }\n\n .lg\\:block {\n display: block;\n }\n\n .lg\\:flex {\n display: flex;\n }\n\n .lg\\:hidden {\n display: none;\n }\n\n .lg\\:inline {\n display: inline;\n }\n\n .lg\\:min-h-\\(--card-height\\) {\n min-height: var(--card-height);\n }\n\n .lg\\:min-h-\\[calc\\(100vh-6\\.25rem\\)\\] {\n min-height: calc(100vh - 6.25rem);\n }\n\n .lg\\:w-\\(--card-width\\) {\n width: var(--card-width);\n }\n\n .lg\\:cursor-default {\n cursor: default;\n }\n\n .lg\\:rounded-xl {\n border-radius: var(--radius-xl);\n }\n\n .lg\\:border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n\n .lg\\:text-base {\n font-size: var(--text-base);\n line-height: var(--tw-leading, var(--text-base--line-height));\n }\n\n .lg\\:text-lg {\n font-size: var(--text-lg);\n line-height: var(--tw-leading, var(--text-lg--line-height));\n }\n\n .lg\\:shadow {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n}\n\n:host {\n font-family: var(--font-sans);\n font-size: var(--text-base);\n line-height: var(--text-base--line-height);\n --font-sans: \"Open Sans\", sans-serif;\n --text-xs: .625rem;\n --text-xs--line-height: .875rem;\n --text-sm: .75rem;\n --text-sm--line-height: 1rem;\n --text-base: .875rem;\n --text-base--line-height: 1.25rem;\n --text-md: 1rem;\n --text-md--line-height: 1.5rem;\n --text-lg: 1.125rem;\n --text-lg--line-height: 1.75rem;\n --text-xl: 1.25rem;\n --text-xl--line-height: 1.75rem;\n --text-2xl: 1.5rem;\n --text-2xl--line-height: 2rem;\n --text-3xl: 1.875rem;\n --text-3xl--line-height: 2.25rem;\n --text-4xl: 2.25rem;\n --text-4xl--line-height: 2.5rem;\n --text-5xl: 3rem;\n --text-5xl--line-height: 1;\n --text-6xl: 3.75rem;\n --text-6xl--line-height: 1;\n --text-7xl: 4.5rem;\n --text-7xl--line-height: 1;\n --text-8xl: 4.625rem;\n --text-8xl--line-height: 1;\n --text-9xl: 6.125rem;\n --text-9xl--line-height: 1;\n}\n\n:root {\n --sl-font-sans: \"Open Sans\", sans-serif;\n --sl-font-size-2x-small: var(--text-xs);\n --sl-font-size-x-small: var(--text-xs);\n --sl-font-size-small: var(--text-sm);\n --sl-font-size-medium: var(--text-base);\n --sl-font-size-large: var(--text-md);\n --sl-font-size-x-large: var(--text-lg);\n --sl-font-size-2x-large: var(--text-xl);\n --sl-font-size-3x-large: var(--text-3xl);\n --sl-font-size-4x-large: var(--text-5xl);\n --sl-input-font-size-small: var(--text-sm);\n --sl-input-font-size-medium: var(--text-base);\n --sl-input-font-size-large: var(--text-md);\n --sl-button-font-size-small: var(--text-sm);\n --sl-button-font-size-medium: var(--text-base);\n --sl-button-font-size-large: var(--text-md);\n --sl-tooltip-font-size: var(--text-base);\n}\n\nbutton, input, select, textarea {\n font-family: inherit;\n font-size: inherit;\n}\n\ninput, select, textarea, sl-menu-item::part(label), sl-option::part(label) {\n font-size: var(--text-base);\n}\n\n.axebow-blue-button::part(base) {\n background-color: var(--axebow-tertiary);\n}\n\n.info-container-page {\n flex-wrap: wrap;\n gap: 2rem;\n display: flex;\n}\n\nsl-divider {\n background: var(--axebow-light-gray);\n height: 1px;\n margin-top: .5rem;\n margin-bottom: .5rem;\n}\n\n.axebow-shadow {\n box-shadow: 2px 2px 25px #0000001a;\n}\n\n@property --tw-translate-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-translate-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-translate-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-rotate-x {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-rotate-y {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-rotate-z {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-skew-x {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-skew-y {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-space-y-reverse {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-border-style {\n syntax: \"*\";\n inherits: false;\n initial-value: solid;\n}\n\n@property --tw-leading {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-font-weight {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-tracking {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-shadow-color {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n\n@property --tw-inset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-inset-shadow-color {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-inset-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n\n@property --tw-ring-color {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-inset-ring-color {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-inset-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-ring-inset {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-ring-offset-width {\n syntax: \"<length>\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-ring-offset-color {\n syntax: \"*\";\n inherits: false;\n initial-value: #fff;\n}\n\n@property --tw-ring-offset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-outline-style {\n syntax: \"*\";\n inherits: false;\n initial-value: solid;\n}\n\n@property --tw-blur {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-brightness {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-contrast {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-grayscale {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-hue-rotate {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-invert {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-opacity {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-saturate {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-sepia {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-drop-shadow {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-drop-shadow-color {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-drop-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n\n@property --tw-drop-shadow-size {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-duration {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-ease {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-scale-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 1;\n}\n\n@property --tw-scale-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 1;\n}\n\n@property --tw-scale-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 1;\n}\n";
|
|
127
|
+
var tailwind_default = "/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n@layer properties {\n @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {\n *, :before, :after, ::backdrop {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-rotate-x: initial;\n --tw-rotate-y: initial;\n --tw-rotate-z: initial;\n --tw-skew-x: initial;\n --tw-skew-y: initial;\n --tw-space-y-reverse: 0;\n --tw-border-style: solid;\n --tw-leading: initial;\n --tw-font-weight: initial;\n --tw-tracking: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-outline-style: solid;\n --tw-blur: initial;\n --tw-brightness: initial;\n --tw-contrast: initial;\n --tw-grayscale: initial;\n --tw-hue-rotate: initial;\n --tw-invert: initial;\n --tw-opacity: initial;\n --tw-saturate: initial;\n --tw-sepia: initial;\n --tw-drop-shadow: initial;\n --tw-drop-shadow-color: initial;\n --tw-drop-shadow-alpha: 100%;\n --tw-drop-shadow-size: initial;\n --tw-duration: initial;\n --tw-ease: initial;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-scale-z: 1;\n }\n }\n}\n\n@layer theme {\n :root, :host {\n --font-sans: \"Open Sans\", sans-serif;\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n \"Courier New\", monospace;\n --color-red-50: oklch(97.1% .013 17.38);\n --color-red-200: oklch(88.5% .062 18.334);\n --color-red-300: oklch(80.8% .114 19.571);\n --color-red-500: oklch(63.7% .237 25.331);\n --color-red-600: oklch(57.7% .245 27.325);\n --color-yellow-50: oklch(98.7% .026 102.212);\n --color-yellow-200: oklch(94.5% .129 101.54);\n --color-yellow-600: oklch(68.1% .162 75.834);\n --color-yellow-800: oklch(47.6% .114 61.907);\n --color-green-50: oklch(98.2% .018 155.826);\n --color-green-200: oklch(92.5% .084 155.995);\n --color-green-600: oklch(62.7% .194 149.214);\n --color-green-800: oklch(44.8% .119 151.328);\n --color-sky-50: oklch(97.7% .013 236.62);\n --color-sky-100: oklch(95.1% .026 236.824);\n --color-blue-50: oklch(97% .014 254.604);\n --color-blue-100: oklch(93.2% .032 255.585);\n --color-blue-200: oklch(88.2% .059 254.128);\n --color-blue-500: oklch(62.3% .214 259.815);\n --color-blue-600: oklch(54.6% .245 262.881);\n --color-blue-800: oklch(42.4% .199 265.638);\n --color-gray-50: oklch(98.5% .002 247.839);\n --color-gray-100: oklch(96.7% .003 264.542);\n --color-gray-200: oklch(92.8% .006 264.531);\n --color-gray-300: oklch(87.2% .01 258.338);\n --color-gray-400: oklch(70.7% .022 261.325);\n --color-gray-500: oklch(55.1% .027 264.364);\n --color-gray-600: oklch(44.6% .03 256.802);\n --color-gray-700: oklch(37.3% .034 259.733);\n --color-gray-900: oklch(21% .034 264.665);\n --color-black: #000;\n --color-white: #fff;\n --spacing: .25rem;\n --text-xs: .625rem;\n --text-xs--line-height: .875rem;\n --text-sm: .75rem;\n --text-sm--line-height: 1rem;\n --text-base: .875rem;\n --text-base--line-height: 1.25rem;\n --text-lg: 1.125rem;\n --text-lg--line-height: 1.75rem;\n --text-xl: 1.25rem;\n --text-xl--line-height: 1.75rem;\n --text-3xl: 1.875rem;\n --text-5xl: 3rem;\n --font-weight-normal: 400;\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --font-weight-black: 900;\n --tracking-wider: .05em;\n --leading-tight: 1.25;\n --leading-snug: 1.375;\n --leading-relaxed: 1.625;\n --radius-sm: .25rem;\n --radius-md: .375rem;\n --radius-lg: .5rem;\n --radius-xl: .75rem;\n --radius-2xl: 1rem;\n --ease-out: cubic-bezier(0, 0, .2, 1);\n --ease-in-out: cubic-bezier(.4, 0, .2, 1);\n --default-transition-duration: .15s;\n --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n --default-font-family: var(--font-sans);\n --default-mono-font-family: var(--font-mono);\n --text-md: 1rem;\n --text-md--line-height: 1.5rem;\n --spacing-18: 4.5rem;\n --spacing-30: 7.5rem;\n --spacing-38: 9.5rem;\n --spacing-43: 10.75rem;\n --spacing-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";
|
|
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) {
|
|
@@ -319,1040 +319,1250 @@ var AxebowFilterBar = class AxebowFilterBar extends LitElement {
|
|
|
319
319
|
__decorate([property({ type: Array })], AxebowFilterBar.prototype, "items", void 0);
|
|
320
320
|
AxebowFilterBar = __decorate([customElement("axebow-filter-bar")], AxebowFilterBar);
|
|
321
321
|
//#endregion
|
|
322
|
-
//#region src/components/axebow-
|
|
323
|
-
var
|
|
324
|
-
constructor(
|
|
325
|
-
super(
|
|
326
|
-
this.
|
|
327
|
-
this.
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
this.
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
`;
|
|
342
|
-
}
|
|
343
|
-
_onClick() {
|
|
344
|
-
this.dispatchEvent(new CustomEvent("card-click", {
|
|
345
|
-
bubbles: true,
|
|
346
|
-
composed: true
|
|
347
|
-
}));
|
|
348
|
-
}
|
|
349
|
-
};
|
|
350
|
-
__decorate([property({ type: String })], AxebowQuickActionCard.prototype, "icon", void 0);
|
|
351
|
-
__decorate([property({ type: String })], AxebowQuickActionCard.prototype, "label", void 0);
|
|
352
|
-
AxebowQuickActionCard = __decorate([customElement("axebow-quick-action-card")], AxebowQuickActionCard);
|
|
353
|
-
//#endregion
|
|
354
|
-
//#region src/components/axebow-header/parts/axebow-quick-actions.ts
|
|
355
|
-
var AxebowQuickActions = class AxebowQuickActions extends LitElement {
|
|
356
|
-
constructor(..._args) {
|
|
357
|
-
super(..._args);
|
|
358
|
-
this.label = "";
|
|
359
|
-
this.actions = [];
|
|
360
|
-
this.open = false;
|
|
361
|
-
this._handleOutsideClick = (e) => {
|
|
362
|
-
if (this.open && !this.contains(e.target)) this.open = false;
|
|
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
|
+
}
|
|
363
341
|
};
|
|
342
|
+
this.addEventListener("click", this._guardDisabledClick, { capture: true });
|
|
364
343
|
}
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
document.removeEventListener("click", this._handleOutsideClick);
|
|
375
|
-
}
|
|
376
|
-
_toggle(e) {
|
|
377
|
-
e.stopPropagation();
|
|
378
|
-
this.open = !this.open;
|
|
379
|
-
}
|
|
380
|
-
_select(action) {
|
|
381
|
-
action.onClick();
|
|
382
|
-
this.open = false;
|
|
383
|
-
}
|
|
384
|
-
render() {
|
|
385
|
-
const row1 = this.actions.slice(0, 3).filter((a) => a.visible);
|
|
386
|
-
const row2 = this.actions.slice(3, 7).filter((a) => a.visible);
|
|
387
|
-
return html`
|
|
388
|
-
<div class="relative">
|
|
389
|
-
<button
|
|
390
|
-
type="button"
|
|
391
|
-
class="group flex flex-col items-center justify-center gap-1 w-20 h-16 border-none cursor-pointer transition-colors duration-150 ${this.open ? "bg-(--axebow-base)" : "bg-(--axebow-primary) hover:bg-(--axebow-base)"}"
|
|
392
|
-
@click=${this._toggle}
|
|
393
|
-
>
|
|
394
|
-
<span
|
|
395
|
-
class="flex flex-col items-center justify-center gap-1 ${this.open ? "text-(--axebow-primary)" : "text-white group-hover:text-(--axebow-primary)"}"
|
|
396
|
-
>
|
|
397
|
-
<axebow-icon iconName=${this.open ? "close" : "apps"} iconColor="currentColor" size="xl"></axebow-icon>
|
|
398
|
-
<span
|
|
399
|
-
class="text-xs whitespace-nowrap ${this.open ? "font-semibold" : "font-normal group-hover:font-semibold"}"
|
|
400
|
-
>${this.label}</span
|
|
401
|
-
>
|
|
402
|
-
</span>
|
|
403
|
-
</button>
|
|
404
|
-
|
|
405
|
-
${this.open ? html`
|
|
406
|
-
<div
|
|
407
|
-
class="absolute top-full left-full mt-2 z-2000 flex flex-col gap-1 p-1 bg-white border border-solid border-(--axebow-light-gray) rounded-lg axebow-shadow"
|
|
408
|
-
>
|
|
409
|
-
<div class="flex gap-1">
|
|
410
|
-
${row1.map((action) => html`
|
|
411
|
-
<axebow-quick-action-card
|
|
412
|
-
icon=${action.icon}
|
|
413
|
-
label=${action.label}
|
|
414
|
-
@card-click=${() => this._select(action)}
|
|
415
|
-
></axebow-quick-action-card>
|
|
416
|
-
`)}
|
|
417
|
-
</div>
|
|
418
|
-
${row2.length ? html`
|
|
419
|
-
<div class="h-[0.0625rem] w-full bg-(--axebow-light-gray)"></div>
|
|
420
|
-
<div class="flex flex-wrap gap-x-1 gap-y-[0.1875rem]">
|
|
421
|
-
${row2.map((action) => html`
|
|
422
|
-
<axebow-quick-action-card
|
|
423
|
-
icon=${action.icon}
|
|
424
|
-
label=${action.label}
|
|
425
|
-
@card-click=${() => this._select(action)}
|
|
426
|
-
></axebow-quick-action-card>
|
|
427
|
-
`)}
|
|
428
|
-
</div>
|
|
429
|
-
` : ""}
|
|
430
|
-
</div>
|
|
431
|
-
` : ""}
|
|
432
|
-
</div>
|
|
433
|
-
`;
|
|
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");
|
|
434
353
|
}
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
//#endregion
|
|
441
|
-
//#region src/components/axebow-header/parts/axebow-header-actions.ts
|
|
442
|
-
var AxebowHeaderActions = class AxebowHeaderActions extends LitElement {
|
|
443
|
-
constructor(..._args) {
|
|
444
|
-
super(..._args);
|
|
445
|
-
this.userName = "";
|
|
446
|
-
this.profileMenuItems = [];
|
|
447
|
-
this.logoutLabel = "";
|
|
448
|
-
this.onLogout = () => {};
|
|
449
|
-
this.notificationsLabel = "";
|
|
450
|
-
this.notifications = [];
|
|
451
|
-
this.actionNeededNotifications = [];
|
|
452
|
-
this.myNotificationsTabLabel = "";
|
|
453
|
-
this.actionNeededTabLabel = "";
|
|
454
|
-
this.noNotificationsLabel = "";
|
|
455
|
-
this.noUnreadNotificationsLabel = "";
|
|
456
|
-
this.noActionNotificationsLabel = "";
|
|
457
|
-
this.showUnreadOnlyLabel = "";
|
|
458
|
-
this.onLabel = "";
|
|
459
|
-
this.offLabel = "";
|
|
460
|
-
this.markAllAsReadLabel = "";
|
|
461
|
-
this.onMarkAllAsRead = () => {};
|
|
462
|
-
this.showUnreadOnly = false;
|
|
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);
|
|
463
359
|
}
|
|
464
360
|
static {
|
|
465
361
|
this.styles = [unsafeCSS(tailwind_default), css`
|
|
466
|
-
|
|
467
|
-
max-width: 500px;
|
|
468
|
-
}
|
|
469
|
-
.notification-description code {
|
|
362
|
+
:host {
|
|
470
363
|
display: inline-block;
|
|
471
|
-
white-space: pre-wrap;
|
|
472
|
-
word-break: break-all;
|
|
473
364
|
}
|
|
474
|
-
|
|
475
|
-
|
|
365
|
+
sl-button {
|
|
366
|
+
width: 100%;
|
|
367
|
+
}
|
|
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);
|
|
476
374
|
}
|
|
477
|
-
`];
|
|
478
|
-
}
|
|
479
|
-
handleShowUnreadOnlyChange(e) {
|
|
480
|
-
this.showUnreadOnly = e.target.checked;
|
|
481
|
-
}
|
|
482
|
-
render() {
|
|
483
|
-
const unreadNotifications = this.notifications.filter((n) => n.status === "unread");
|
|
484
|
-
const notificationsToShow = this.showUnreadOnly ? unreadNotifications : this.notifications;
|
|
485
|
-
return html`
|
|
486
|
-
<div class="flex items-center gap-2 z-10 shrink-0 min-w-0 ml-auto">
|
|
487
|
-
<sl-dropdown>
|
|
488
|
-
<div
|
|
489
|
-
class="relative group w-9 h-9 rounded-lg flex items-center justify-center cursor-pointer transition-colors duration-150 hover:bg-(--axebow-primary)"
|
|
490
|
-
slot="trigger"
|
|
491
|
-
>
|
|
492
|
-
<span class="inline-block transition-transform duration-200 group-hover:rotate-15">
|
|
493
|
-
<axebow-icon iconName="notifications" iconColor="white"></axebow-icon>
|
|
494
|
-
</span>
|
|
495
|
-
${unreadNotifications.length > 0 ? html`<div
|
|
496
|
-
class="absolute bottom-0.5 right-0.5 flex items-center justify-center rounded-full bg-(--axebow-error) text-white font-bold z-10 pointer-events-none ${unreadNotifications.length < 10 ? "w-4 h-4 text-sm" : "h-4 min-w-4 px-0.5 text-sm"}"
|
|
497
|
-
>
|
|
498
|
-
${unreadNotifications.length > 99 ? "99+" : unreadNotifications.length}
|
|
499
|
-
</div>` : ""}
|
|
500
|
-
<span
|
|
501
|
-
class="absolute top-1/2 -translate-y-1/2 right-[calc(100%+10px)] translate-x-1 opacity-0 group-hover:opacity-100 group-hover:translate-x-0 text-base transition-all duration-120 bg-(--axebow-primary-light) text-(--axebow-primary) font-semibold leading-none px-3.5 py-2 rounded-lg whitespace-nowrap shadow-[0_6px_16px_rgba(13,24,33,0.18)] pointer-events-none z-2001"
|
|
502
|
-
>${this.notificationsLabel}</span
|
|
503
|
-
>
|
|
504
|
-
</div>
|
|
505
|
-
<sl-tab-group class="bg-white rounded-lg w-120 text-base">
|
|
506
|
-
<sl-tab slot="nav" panel="my_notifications">${this.myNotificationsTabLabel}</sl-tab>
|
|
507
|
-
<sl-tab slot="nav" panel="action_needed">${this.actionNeededTabLabel}</sl-tab>
|
|
508
375
|
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
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
|
+
`];
|
|
581
540
|
}
|
|
582
|
-
|
|
541
|
+
render() {
|
|
583
542
|
return html`
|
|
584
|
-
<
|
|
585
|
-
|
|
586
|
-
|
|
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)}
|
|
587
559
|
>
|
|
588
|
-
|
|
589
|
-
<
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
iconColor=${item.status === "unread" ? item.color : "gray"}
|
|
593
|
-
></axebow-icon>
|
|
594
|
-
<div class="flex flex-1 flex-col gap-1 py-1.25 min-w-0 overflow-hidden">
|
|
595
|
-
<div class="flex justify-between gap-2">
|
|
596
|
-
<h4 class="font-semibold wrap-break-word">${item.title}</h4>
|
|
597
|
-
<span class="ms-auto min-w-fit shrink-0 text-gray-400">${item.date}</span>
|
|
598
|
-
</div>
|
|
599
|
-
<div
|
|
600
|
-
class="notification-description leading-tight max-w-full pe-4 overflow-x-hidden overflow-y-auto max-h-75 wrap-break-word"
|
|
601
|
-
.innerHTML=${item.description}
|
|
602
|
-
></div>
|
|
603
|
-
${item.actions && item.actions.length > 0 ? html`
|
|
604
|
-
<div class="flex gap-4 ml-auto pe-4 flex-wrap">
|
|
605
|
-
${item.actions.map((action) => html`
|
|
606
|
-
<button class="text-sm font-semibold text-[${action.color}] hover:underline" @click=${action.action}>
|
|
607
|
-
${action.label}
|
|
608
|
-
</button>
|
|
609
|
-
`)}
|
|
610
|
-
</div>
|
|
611
|
-
` : ""}
|
|
612
|
-
</div>
|
|
613
|
-
</div>
|
|
560
|
+
<slot name="prefix" slot="prefix"></slot>
|
|
561
|
+
<slot></slot>
|
|
562
|
+
<slot name="suffix" slot="suffix"></slot>
|
|
563
|
+
</sl-button>
|
|
614
564
|
`;
|
|
615
565
|
}
|
|
616
566
|
};
|
|
617
|
-
__decorate([property({
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
__decorate([property({
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
__decorate([property({
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
__decorate([property({
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
__decorate([property({
|
|
634
|
-
|
|
635
|
-
|
|
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);
|
|
636
612
|
//#endregion
|
|
637
|
-
//#region src/components/axebow-
|
|
638
|
-
var
|
|
613
|
+
//#region src/components/axebow-search/axebow-search.ts
|
|
614
|
+
var AxebowSearch = class AxebowSearch extends LitElement {
|
|
639
615
|
constructor(..._args) {
|
|
640
616
|
super(..._args);
|
|
641
|
-
this.
|
|
642
|
-
this.
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
this.
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
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:focus-within::part(base) {
|
|
639
|
+
border-color: var(--axebow-tertiary);
|
|
640
|
+
}
|
|
641
|
+
sl-input::part(input) {
|
|
642
|
+
color: var(--axebow-rich-black, #0d1821);
|
|
643
|
+
font-size: 0.875rem;
|
|
644
|
+
}
|
|
645
|
+
sl-input::part(prefix) {
|
|
646
|
+
padding-inline-start: 0.75rem;
|
|
647
|
+
}
|
|
648
|
+
`];
|
|
649
|
+
}
|
|
650
|
+
updated(changed) {
|
|
651
|
+
super.updated(changed);
|
|
652
|
+
if (changed.has("width")) if (this.width) {
|
|
653
|
+
this.style.setProperty("--axebow-search-width", this.width);
|
|
654
|
+
this.classList.add("axebow-fixed-width");
|
|
655
|
+
} else {
|
|
656
|
+
this.style.removeProperty("--axebow-search-width");
|
|
657
|
+
this.classList.remove("axebow-fixed-width");
|
|
658
|
+
}
|
|
659
|
+
if (changed.has("height")) if (this.height) this.style.setProperty("--axebow-search-height", this.height);
|
|
660
|
+
else this.style.removeProperty("--axebow-search-height");
|
|
664
661
|
}
|
|
665
|
-
|
|
666
|
-
this.
|
|
662
|
+
_emitChange(value) {
|
|
663
|
+
this.dispatchEvent(new CustomEvent("search-change", {
|
|
664
|
+
detail: { value },
|
|
665
|
+
bubbles: true,
|
|
666
|
+
composed: true
|
|
667
|
+
}));
|
|
668
|
+
}
|
|
669
|
+
_onInput(e) {
|
|
670
|
+
this._emitChange(e.target.value);
|
|
671
|
+
}
|
|
672
|
+
_onClear() {
|
|
673
|
+
this._emitChange("");
|
|
667
674
|
}
|
|
668
675
|
render() {
|
|
669
676
|
return html`
|
|
670
|
-
<
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-5 cursor-pointer hover:opacity-80 transition-opacity duration-200"
|
|
674
|
-
@click=${() => this.onLogoClick()}
|
|
675
|
-
>
|
|
676
|
-
<div class="flex items-center gap-2 text-white">
|
|
677
|
-
<img src="${this.logoUrl}" alt="${this.logoAlt}" class="h-10" />
|
|
678
|
-
</div>
|
|
679
|
-
</div>
|
|
680
|
-
` : html`
|
|
681
|
-
<axebow-quick-actions .label=${this.quickActionsLabel} .actions=${this.quickActions}></axebow-quick-actions>
|
|
682
|
-
|
|
683
|
-
<div
|
|
684
|
-
class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-5 cursor-pointer hover:opacity-80 transition-opacity duration-200"
|
|
685
|
-
@click=${() => this.onLogoClick()}
|
|
686
|
-
>
|
|
687
|
-
<div class="flex items-center gap-2 text-white">
|
|
688
|
-
<img src="${this.logoUrl}" alt="${this.logoAlt}" class="h-10" />
|
|
689
|
-
</div>
|
|
690
|
-
</div>
|
|
691
|
-
|
|
692
|
-
<axebow-header-actions
|
|
693
|
-
.userName=${this.userName}
|
|
694
|
-
.profileMenuItems=${this.profileMenuItems}
|
|
695
|
-
.logoutLabel=${this.logoutLabel}
|
|
696
|
-
.onLogout=${this.onLogout}
|
|
697
|
-
.notificationsLabel=${this.notificationsLabel}
|
|
698
|
-
.notifications=${this.notifications}
|
|
699
|
-
.actionNeededNotifications=${this.actionNeededNotifications}
|
|
700
|
-
.myNotificationsTabLabel=${this.myNotificationsTabLabel}
|
|
701
|
-
.actionNeededTabLabel=${this.actionNeededTabLabel}
|
|
702
|
-
.noNotificationsLabel=${this.noNotificationsLabel}
|
|
703
|
-
.noUnreadNotificationsLabel=${this.noUnreadNotificationsLabel}
|
|
704
|
-
.noActionNotificationsLabel=${this.noActionNotificationsLabel}
|
|
705
|
-
.showUnreadOnlyLabel=${this.showUnreadOnlyLabel}
|
|
706
|
-
.onLabel=${this.onLabel}
|
|
707
|
-
.offLabel=${this.offLabel}
|
|
708
|
-
.markAllAsReadLabel=${this.markAllAsReadLabel}
|
|
709
|
-
.onMarkAllAsRead=${this.onMarkAllAsRead}
|
|
710
|
-
></axebow-header-actions>
|
|
711
|
-
`}
|
|
712
|
-
</header>
|
|
677
|
+
<sl-input placeholder=${this.placeholder} .value=${this.value} clearable @sl-input=${this._onInput} @sl-clear=${this._onClear}>
|
|
678
|
+
<axebow-icon slot="prefix" iconName="search" iconColor="var(--axebow-gray)" size="md"></axebow-icon>
|
|
679
|
+
</sl-input>
|
|
713
680
|
`;
|
|
714
681
|
}
|
|
715
682
|
};
|
|
716
|
-
__decorate([property({
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
})],
|
|
720
|
-
__decorate([
|
|
721
|
-
__decorate([property({ type: String })], AxebowHeader.prototype, "logoAlt", void 0);
|
|
722
|
-
__decorate([property({ attribute: false })], AxebowHeader.prototype, "onLogoClick", void 0);
|
|
723
|
-
__decorate([property({ type: String })], AxebowHeader.prototype, "userName", void 0);
|
|
724
|
-
__decorate([property({ type: String })], AxebowHeader.prototype, "quickActionsLabel", void 0);
|
|
725
|
-
__decorate([property({ type: Array })], AxebowHeader.prototype, "quickActions", void 0);
|
|
726
|
-
__decorate([property({ type: Array })], AxebowHeader.prototype, "profileMenuItems", void 0);
|
|
727
|
-
__decorate([property({ type: String })], AxebowHeader.prototype, "logoutLabel", void 0);
|
|
728
|
-
__decorate([property({ attribute: false })], AxebowHeader.prototype, "onLogout", void 0);
|
|
729
|
-
__decorate([property({ type: String })], AxebowHeader.prototype, "notificationsLabel", void 0);
|
|
730
|
-
__decorate([property({ type: Array })], AxebowHeader.prototype, "notifications", void 0);
|
|
731
|
-
__decorate([property({ type: Array })], AxebowHeader.prototype, "actionNeededNotifications", void 0);
|
|
732
|
-
__decorate([property({ type: String })], AxebowHeader.prototype, "myNotificationsTabLabel", void 0);
|
|
733
|
-
__decorate([property({ type: String })], AxebowHeader.prototype, "actionNeededTabLabel", void 0);
|
|
734
|
-
__decorate([property({ type: String })], AxebowHeader.prototype, "noNotificationsLabel", void 0);
|
|
735
|
-
__decorate([property({ type: String })], AxebowHeader.prototype, "noUnreadNotificationsLabel", void 0);
|
|
736
|
-
__decorate([property({ type: String })], AxebowHeader.prototype, "noActionNotificationsLabel", void 0);
|
|
737
|
-
__decorate([property({ type: String })], AxebowHeader.prototype, "showUnreadOnlyLabel", void 0);
|
|
738
|
-
__decorate([property({ type: String })], AxebowHeader.prototype, "onLabel", void 0);
|
|
739
|
-
__decorate([property({ type: String })], AxebowHeader.prototype, "offLabel", void 0);
|
|
740
|
-
__decorate([property({ type: String })], AxebowHeader.prototype, "markAllAsReadLabel", void 0);
|
|
741
|
-
__decorate([property({ attribute: false })], AxebowHeader.prototype, "onMarkAllAsRead", void 0);
|
|
742
|
-
AxebowHeader = __decorate([customElement("axebow-header")], AxebowHeader);
|
|
683
|
+
__decorate([property({ type: String })], AxebowSearch.prototype, "value", void 0);
|
|
684
|
+
__decorate([property({ type: String })], AxebowSearch.prototype, "placeholder", void 0);
|
|
685
|
+
__decorate([property({ type: String })], AxebowSearch.prototype, "width", void 0);
|
|
686
|
+
__decorate([property({ type: String })], AxebowSearch.prototype, "height", void 0);
|
|
687
|
+
AxebowSearch = __decorate([customElement("axebow-search")], AxebowSearch);
|
|
743
688
|
//#endregion
|
|
744
|
-
//#region src/components/axebow-
|
|
745
|
-
var
|
|
689
|
+
//#region src/components/axebow-tenant-filters/axebow-tenant-filters.ts
|
|
690
|
+
var AxebowTenantFilters = class AxebowTenantFilters extends LitElement {
|
|
746
691
|
constructor(..._args) {
|
|
747
692
|
super(..._args);
|
|
748
|
-
this.
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
693
|
+
this.values = {
|
|
694
|
+
search: "",
|
|
695
|
+
role: "all",
|
|
696
|
+
provider: "all",
|
|
697
|
+
plan: "all",
|
|
698
|
+
sortBy: "newToOlder"
|
|
699
|
+
};
|
|
700
|
+
this.roleOptions = [];
|
|
701
|
+
this.providerOptions = [];
|
|
702
|
+
this.planOptions = [];
|
|
703
|
+
this.sortOptions = [];
|
|
704
|
+
this.hideSearchAndCreate = false;
|
|
705
|
+
this.createTenantLabel = "";
|
|
706
|
+
this.searchPlaceholder = "";
|
|
707
|
+
this.rolePlaceholder = "";
|
|
708
|
+
this.providerPlaceholder = "";
|
|
709
|
+
this.planPlaceholder = "";
|
|
710
|
+
this.clearAllLabel = "";
|
|
711
|
+
}
|
|
712
|
+
get _activeControlsCount() {
|
|
713
|
+
const { search, role, provider, plan } = this.values;
|
|
714
|
+
return [
|
|
715
|
+
search !== "",
|
|
716
|
+
role !== "all",
|
|
717
|
+
provider !== "all",
|
|
718
|
+
plan !== "all"
|
|
719
|
+
].filter(Boolean).length;
|
|
755
720
|
}
|
|
756
721
|
static {
|
|
757
722
|
this.styles = [unsafeCSS(tailwind_default), css`
|
|
758
723
|
:host {
|
|
759
|
-
|
|
760
|
-
|
|
724
|
+
width: 100%;
|
|
725
|
+
}
|
|
726
|
+
axebow-button:hover axebow-icon {
|
|
727
|
+
--icon-btn-color: var(--axebow-gray);
|
|
728
|
+
}
|
|
729
|
+
sl-select::part(combobox):hover {
|
|
730
|
+
border-color: black;
|
|
731
|
+
}
|
|
732
|
+
sl-input::part(base):hover {
|
|
733
|
+
border-color: black;
|
|
734
|
+
}
|
|
735
|
+
.clear-all-link {
|
|
736
|
+
cursor: pointer;
|
|
737
|
+
color: var(--axebow-tertiary);
|
|
738
|
+
font-size: 0.875rem;
|
|
739
|
+
text-decoration: underline;
|
|
740
|
+
}
|
|
741
|
+
.clear-all-link:hover {
|
|
742
|
+
opacity: 0.75;
|
|
743
|
+
}
|
|
744
|
+
.create-tenant-button::part(base) {
|
|
745
|
+
font-size: 0.875rem !important;
|
|
746
|
+
}
|
|
747
|
+
.filter-select::part(combobox) {
|
|
748
|
+
height: 2.5rem !important;
|
|
749
|
+
min-height: 2.5rem !important;
|
|
761
750
|
}
|
|
762
751
|
`];
|
|
763
752
|
}
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
753
|
+
_dispatch(key, value) {
|
|
754
|
+
this.values = {
|
|
755
|
+
...this.values,
|
|
756
|
+
[key]: value
|
|
757
|
+
};
|
|
758
|
+
this.dispatchEvent(new CustomEvent("filter-change", {
|
|
759
|
+
detail: {
|
|
760
|
+
key,
|
|
761
|
+
value
|
|
762
|
+
},
|
|
763
|
+
bubbles: true,
|
|
764
|
+
composed: true
|
|
765
|
+
}));
|
|
769
766
|
}
|
|
770
|
-
|
|
771
|
-
this.
|
|
767
|
+
_onSearchChange(e) {
|
|
768
|
+
this._dispatch("search", e.detail.value);
|
|
772
769
|
}
|
|
773
|
-
|
|
774
|
-
|
|
770
|
+
_onSelectChange(e, key) {
|
|
771
|
+
const value = e.target.value;
|
|
772
|
+
this._dispatch(key, value || "all");
|
|
773
|
+
}
|
|
774
|
+
_onSelectClear(key) {
|
|
775
|
+
this._dispatch(key, "all");
|
|
776
|
+
}
|
|
777
|
+
_onCreateTenant() {
|
|
778
|
+
this.dispatchEvent(new CustomEvent("create-tenant", {
|
|
779
|
+
bubbles: true,
|
|
780
|
+
composed: true
|
|
781
|
+
}));
|
|
782
|
+
}
|
|
783
|
+
_onClearAll() {
|
|
784
|
+
this.dispatchEvent(new CustomEvent("clear-all", {
|
|
785
|
+
bubbles: true,
|
|
786
|
+
composed: true
|
|
787
|
+
}));
|
|
775
788
|
}
|
|
776
789
|
render() {
|
|
790
|
+
const showClearAll = this._activeControlsCount >= 2;
|
|
791
|
+
const roleValue = this.values.role !== "all" ? this.values.role : "";
|
|
792
|
+
const providerValue = this.values.provider !== "all" ? this.values.provider : "";
|
|
793
|
+
const planValue = this.values.plan !== "all" ? this.values.plan : "";
|
|
777
794
|
return html`
|
|
778
|
-
<
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
795
|
+
<div>
|
|
796
|
+
<div class="flex items-center gap-4 mb-2">
|
|
797
|
+
${!this.hideSearchAndCreate ? html`
|
|
798
|
+
<axebow-button
|
|
799
|
+
variant="primary"
|
|
800
|
+
outline
|
|
801
|
+
class="create-tenant-button"
|
|
802
|
+
fixedWidth="9rem"
|
|
803
|
+
fixedHeight="2.5rem"
|
|
804
|
+
paddingRight="0.5rem"
|
|
805
|
+
@click=${this._onCreateTenant}
|
|
806
|
+
>
|
|
807
|
+
${this.createTenantLabel}
|
|
808
|
+
<axebow-icon
|
|
809
|
+
slot="suffix"
|
|
810
|
+
iconName="add"
|
|
811
|
+
iconColor="var(--icon-btn-color, var(--axebow-tertiary))"
|
|
812
|
+
></axebow-icon>
|
|
813
|
+
</axebow-button>
|
|
789
814
|
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
815
|
+
<axebow-search
|
|
816
|
+
placeholder=${this.searchPlaceholder}
|
|
817
|
+
.value=${this.values.search}
|
|
818
|
+
width="26.25rem"
|
|
819
|
+
height="2.5rem"
|
|
820
|
+
@search-change=${this._onSearchChange}
|
|
821
|
+
></axebow-search>
|
|
822
|
+
` : ""}
|
|
823
|
+
|
|
824
|
+
<sl-select
|
|
825
|
+
placeholder=${this.rolePlaceholder}
|
|
826
|
+
.value=${roleValue}
|
|
827
|
+
@sl-change=${(e) => this._onSelectChange(e, "role")}
|
|
828
|
+
@sl-clear=${() => this._onSelectClear("role")}
|
|
829
|
+
clearable
|
|
830
|
+
class="w-33.25 h-10 filter-select"
|
|
831
|
+
>
|
|
832
|
+
${this.roleOptions.map((opt) => html`<sl-option value="${opt.value}">${opt.label}</sl-option>`)}
|
|
833
|
+
</sl-select>
|
|
834
|
+
|
|
835
|
+
<sl-select
|
|
836
|
+
placeholder=${this.providerPlaceholder}
|
|
837
|
+
.value=${providerValue}
|
|
838
|
+
@sl-change=${(e) => this._onSelectChange(e, "provider")}
|
|
839
|
+
@sl-clear=${() => this._onSelectClear("provider")}
|
|
840
|
+
clearable
|
|
841
|
+
class="w-33.25 h-10 filter-select"
|
|
842
|
+
>
|
|
843
|
+
${this.providerOptions.map((opt) => html`
|
|
844
|
+
<sl-option value="${opt.value}">
|
|
845
|
+
<span class="flex items-center justify-between w-full gap-2">
|
|
846
|
+
${opt.label}
|
|
847
|
+
${opt.logo ? html`<img src="${opt.logo}" alt="${opt.label}" class="h-4 w-auto object-contain ml-auto" />` : ""}
|
|
848
|
+
</span>
|
|
849
|
+
</sl-option>
|
|
850
|
+
`)}
|
|
851
|
+
</sl-select>
|
|
852
|
+
|
|
853
|
+
<sl-select
|
|
854
|
+
placeholder=${this.planPlaceholder}
|
|
855
|
+
.value=${planValue}
|
|
856
|
+
@sl-change=${(e) => this._onSelectChange(e, "plan")}
|
|
857
|
+
@sl-clear=${() => this._onSelectClear("plan")}
|
|
858
|
+
clearable
|
|
859
|
+
class="w-33.25 h-10 filter-select"
|
|
860
|
+
>
|
|
861
|
+
${this.planOptions.map((opt) => html`<sl-option value="${opt.value}">${opt.label}</sl-option>`)}
|
|
862
|
+
</sl-select>
|
|
863
|
+
|
|
864
|
+
<sl-select
|
|
865
|
+
.value=${this.values.sortBy}
|
|
866
|
+
@sl-change=${(e) => this._onSelectChange(e, "sortBy")}
|
|
867
|
+
class="w-33.25 h-10 filter-select"
|
|
868
|
+
>
|
|
869
|
+
${this.sortOptions.map((opt) => html`<sl-option value="${opt.value}">${opt.label}</sl-option>`)}
|
|
870
|
+
</sl-select>
|
|
871
|
+
</div>
|
|
872
|
+
|
|
873
|
+
${showClearAll ? html`
|
|
874
|
+
<div class="flex justify-end mb-2">
|
|
875
|
+
<axebow-button variant="text" @click=${this._onClearAll}>${this.clearAllLabel}</axebow-button>
|
|
876
|
+
</div>
|
|
877
|
+
` : ""}
|
|
878
|
+
</div>
|
|
801
879
|
`;
|
|
802
880
|
}
|
|
803
|
-
|
|
881
|
+
};
|
|
882
|
+
__decorate([property({ type: Object })], AxebowTenantFilters.prototype, "values", void 0);
|
|
883
|
+
__decorate([property({ type: Array })], AxebowTenantFilters.prototype, "roleOptions", void 0);
|
|
884
|
+
__decorate([property({ type: Array })], AxebowTenantFilters.prototype, "providerOptions", void 0);
|
|
885
|
+
__decorate([property({ type: Array })], AxebowTenantFilters.prototype, "planOptions", void 0);
|
|
886
|
+
__decorate([property({ type: Array })], AxebowTenantFilters.prototype, "sortOptions", void 0);
|
|
887
|
+
__decorate([property({ type: Boolean })], AxebowTenantFilters.prototype, "hideSearchAndCreate", void 0);
|
|
888
|
+
__decorate([property({ type: String })], AxebowTenantFilters.prototype, "createTenantLabel", void 0);
|
|
889
|
+
__decorate([property({ type: String })], AxebowTenantFilters.prototype, "searchPlaceholder", void 0);
|
|
890
|
+
__decorate([property({ type: String })], AxebowTenantFilters.prototype, "rolePlaceholder", void 0);
|
|
891
|
+
__decorate([property({ type: String })], AxebowTenantFilters.prototype, "providerPlaceholder", void 0);
|
|
892
|
+
__decorate([property({ type: String })], AxebowTenantFilters.prototype, "planPlaceholder", void 0);
|
|
893
|
+
__decorate([property({ type: String })], AxebowTenantFilters.prototype, "clearAllLabel", void 0);
|
|
894
|
+
AxebowTenantFilters = __decorate([customElement("axebow-tenant-filters")], AxebowTenantFilters);
|
|
895
|
+
//#endregion
|
|
896
|
+
//#region src/components/axebow-header/parts/axebow-quick-action-card.ts
|
|
897
|
+
var AxebowQuickActionCard = class AxebowQuickActionCard extends LitElement {
|
|
898
|
+
constructor(..._args) {
|
|
899
|
+
super(..._args);
|
|
900
|
+
this.icon = "";
|
|
901
|
+
this.label = "";
|
|
902
|
+
}
|
|
903
|
+
static {
|
|
904
|
+
this.styles = [unsafeCSS(tailwind_default), css`:host { display: block; }`];
|
|
905
|
+
}
|
|
906
|
+
render() {
|
|
804
907
|
return html`
|
|
805
|
-
<
|
|
806
|
-
class="
|
|
807
|
-
@click
|
|
808
|
-
@mouseenter="${(e) => this.handleMouseEnter(e, item)}"
|
|
809
|
-
@mouseleave="${() => this.handleMouseLeave()}"
|
|
810
|
-
title="${item.label}"
|
|
908
|
+
<div
|
|
909
|
+
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"
|
|
910
|
+
@click=${this._onClick}
|
|
811
911
|
>
|
|
812
|
-
<
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
</div>
|
|
816
|
-
|
|
817
|
-
${!selected ? html`
|
|
818
|
-
<div
|
|
819
|
-
class="absolute top-0 right-0 h-full w-2.5 rounded-l-xl bg-(--axebow-base) opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity duration-200"
|
|
820
|
-
></div>
|
|
821
|
-
` : ""}
|
|
822
|
-
</li>
|
|
912
|
+
<axebow-icon iconName=${this.icon} iconColor="var(--axebow-primary)" size="xl"></axebow-icon>
|
|
913
|
+
<span class="text-base font-semibold text-(--axebow-primary) text-center whitespace-nowrap">${this.label}</span>
|
|
914
|
+
</div>
|
|
823
915
|
`;
|
|
824
916
|
}
|
|
825
|
-
|
|
917
|
+
_onClick() {
|
|
918
|
+
this.dispatchEvent(new CustomEvent("card-click", {
|
|
919
|
+
bubbles: true,
|
|
920
|
+
composed: true
|
|
921
|
+
}));
|
|
922
|
+
}
|
|
923
|
+
};
|
|
924
|
+
__decorate([property({ type: String })], AxebowQuickActionCard.prototype, "icon", void 0);
|
|
925
|
+
__decorate([property({ type: String })], AxebowQuickActionCard.prototype, "label", void 0);
|
|
926
|
+
AxebowQuickActionCard = __decorate([customElement("axebow-quick-action-card")], AxebowQuickActionCard);
|
|
927
|
+
//#endregion
|
|
928
|
+
//#region src/components/axebow-header/parts/axebow-quick-actions.ts
|
|
929
|
+
var AxebowQuickActions = class AxebowQuickActions extends LitElement {
|
|
930
|
+
constructor(..._args) {
|
|
931
|
+
super(..._args);
|
|
932
|
+
this.label = "";
|
|
933
|
+
this.actions = [];
|
|
934
|
+
this.open = false;
|
|
935
|
+
this._handleOutsideClick = (e) => {
|
|
936
|
+
if (this.open && !this.contains(e.target)) this.open = false;
|
|
937
|
+
};
|
|
938
|
+
}
|
|
939
|
+
static {
|
|
940
|
+
this.styles = [unsafeCSS(tailwind_default), css`:host { display: inline-block; }`];
|
|
941
|
+
}
|
|
942
|
+
connectedCallback() {
|
|
943
|
+
super.connectedCallback();
|
|
944
|
+
document.addEventListener("click", this._handleOutsideClick);
|
|
945
|
+
}
|
|
946
|
+
disconnectedCallback() {
|
|
947
|
+
super.disconnectedCallback();
|
|
948
|
+
document.removeEventListener("click", this._handleOutsideClick);
|
|
949
|
+
}
|
|
950
|
+
_toggle(e) {
|
|
951
|
+
e.stopPropagation();
|
|
952
|
+
this.open = !this.open;
|
|
953
|
+
}
|
|
954
|
+
_select(action) {
|
|
955
|
+
action.onClick();
|
|
956
|
+
this.open = false;
|
|
957
|
+
}
|
|
958
|
+
render() {
|
|
959
|
+
const row1 = this.actions.slice(0, 3).filter((a) => a.visible);
|
|
960
|
+
const row2 = this.actions.slice(3, 7).filter((a) => a.visible);
|
|
826
961
|
return html`
|
|
827
|
-
<
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
<axebow-icon iconName="${item.icon}" size="xl"></axebow-icon>
|
|
836
|
-
<span class="text-sm overflow-hidden whitespace-nowrap opacity-100 max-w-full"
|
|
837
|
-
>${item.label}${item.openInNewTab ? html`<axebow-icon iconName="open_in_new" size="sm"></axebow-icon>` : ""}</span
|
|
962
|
+
<div class="relative">
|
|
963
|
+
<button
|
|
964
|
+
type="button"
|
|
965
|
+
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)"}"
|
|
966
|
+
@click=${this._toggle}
|
|
967
|
+
>
|
|
968
|
+
<span
|
|
969
|
+
class="flex flex-col items-center justify-center gap-1 ${this.open ? "text-(--axebow-primary)" : "text-white group-hover:text-(--axebow-primary)"}"
|
|
838
970
|
>
|
|
839
|
-
|
|
971
|
+
<axebow-icon iconName=${this.open ? "close" : "apps"} iconColor="currentColor" size="xl"></axebow-icon>
|
|
972
|
+
<span
|
|
973
|
+
class="text-xs whitespace-nowrap ${this.open ? "font-semibold" : "font-normal group-hover:font-semibold"}"
|
|
974
|
+
>${this.label}</span
|
|
975
|
+
>
|
|
976
|
+
</span>
|
|
977
|
+
</button>
|
|
840
978
|
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
979
|
+
${this.open ? html`
|
|
980
|
+
<div
|
|
981
|
+
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"
|
|
982
|
+
>
|
|
983
|
+
<div class="flex gap-1">
|
|
984
|
+
${row1.map((action) => html`
|
|
985
|
+
<axebow-quick-action-card
|
|
986
|
+
icon=${action.icon}
|
|
987
|
+
label=${action.label}
|
|
988
|
+
@card-click=${() => this._select(action)}
|
|
989
|
+
></axebow-quick-action-card>
|
|
990
|
+
`)}
|
|
991
|
+
</div>
|
|
992
|
+
${row2.length ? html`
|
|
993
|
+
<div class="h-[0.0625rem] w-full bg-(--axebow-light-gray)"></div>
|
|
994
|
+
<div class="flex flex-wrap gap-x-1 gap-y-[0.1875rem]">
|
|
995
|
+
${row2.map((action) => html`
|
|
996
|
+
<axebow-quick-action-card
|
|
997
|
+
icon=${action.icon}
|
|
998
|
+
label=${action.label}
|
|
999
|
+
@card-click=${() => this._select(action)}
|
|
1000
|
+
></axebow-quick-action-card>
|
|
1001
|
+
`)}
|
|
1002
|
+
</div>
|
|
1003
|
+
` : ""}
|
|
1004
|
+
</div>
|
|
1005
|
+
` : ""}
|
|
1006
|
+
</div>
|
|
845
1007
|
`;
|
|
846
1008
|
}
|
|
847
1009
|
};
|
|
848
|
-
__decorate([property({ type:
|
|
849
|
-
__decorate([property({ type: Array })],
|
|
850
|
-
__decorate([
|
|
851
|
-
__decorate([
|
|
852
|
-
__decorate([state()], AxebowSidebar.prototype, "hoveredItem", void 0);
|
|
853
|
-
__decorate([state()], AxebowSidebar.prototype, "tooltipTop", void 0);
|
|
854
|
-
__decorate([state()], AxebowSidebar.prototype, "tooltipLeft", void 0);
|
|
855
|
-
AxebowSidebar = __decorate([customElement("axebow-sidebar")], AxebowSidebar);
|
|
1010
|
+
__decorate([property({ type: String })], AxebowQuickActions.prototype, "label", void 0);
|
|
1011
|
+
__decorate([property({ type: Array })], AxebowQuickActions.prototype, "actions", void 0);
|
|
1012
|
+
__decorate([state()], AxebowQuickActions.prototype, "open", void 0);
|
|
1013
|
+
AxebowQuickActions = __decorate([customElement("axebow-quick-actions")], AxebowQuickActions);
|
|
856
1014
|
//#endregion
|
|
857
|
-
//#region src/components/axebow-
|
|
858
|
-
var
|
|
1015
|
+
//#region src/components/axebow-header/parts/axebow-header-actions.ts
|
|
1016
|
+
var AxebowHeaderActions = class AxebowHeaderActions extends LitElement {
|
|
859
1017
|
constructor(..._args) {
|
|
860
1018
|
super(..._args);
|
|
861
|
-
this.
|
|
862
|
-
this.
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
1019
|
+
this.userName = "";
|
|
1020
|
+
this.profileMenuItems = [];
|
|
1021
|
+
this.logoutLabel = "";
|
|
1022
|
+
this.onLogout = () => {};
|
|
1023
|
+
this.notificationsLabel = "";
|
|
1024
|
+
this.notifications = [];
|
|
1025
|
+
this.actionNeededNotifications = [];
|
|
1026
|
+
this.myNotificationsTabLabel = "";
|
|
1027
|
+
this.actionNeededTabLabel = "";
|
|
1028
|
+
this.noNotificationsLabel = "";
|
|
1029
|
+
this.noUnreadNotificationsLabel = "";
|
|
1030
|
+
this.noActionNotificationsLabel = "";
|
|
1031
|
+
this.showUnreadOnlyLabel = "";
|
|
1032
|
+
this.onLabel = "";
|
|
1033
|
+
this.offLabel = "";
|
|
1034
|
+
this.markAllAsReadLabel = "";
|
|
1035
|
+
this.onMarkAllAsRead = () => {};
|
|
1036
|
+
this.showUnreadOnly = false;
|
|
874
1037
|
}
|
|
875
1038
|
static {
|
|
876
1039
|
this.styles = [unsafeCSS(tailwind_default), css`
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
1040
|
+
sl-dropdown::part(panel) {
|
|
1041
|
+
max-width: 500px;
|
|
1042
|
+
}
|
|
1043
|
+
.notification-description code {
|
|
1044
|
+
display: inline-block;
|
|
1045
|
+
white-space: pre-wrap;
|
|
1046
|
+
word-break: break-all;
|
|
1047
|
+
}
|
|
1048
|
+
.notification-description pre {
|
|
1049
|
+
white-space: pre-wrap;
|
|
883
1050
|
}
|
|
884
1051
|
`];
|
|
885
1052
|
}
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
this.resizeObserver = new ResizeObserver(() => {
|
|
889
|
-
this.emitFooterHeight();
|
|
890
|
-
});
|
|
891
|
-
this.resizeObserver.observe(this);
|
|
892
|
-
window.addEventListener("resize", this.emitFooterHeight);
|
|
893
|
-
window.addEventListener("scroll", this.emitFooterHeight, true);
|
|
894
|
-
setTimeout(() => this.emitFooterHeight(), 0);
|
|
1053
|
+
handleShowUnreadOnlyChange(e) {
|
|
1054
|
+
this.showUnreadOnly = e.target.checked;
|
|
895
1055
|
}
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
this.
|
|
899
|
-
|
|
900
|
-
|
|
1056
|
+
render() {
|
|
1057
|
+
const unreadNotifications = this.notifications.filter((n) => n.status === "unread");
|
|
1058
|
+
const notificationsToShow = this.showUnreadOnly ? unreadNotifications : this.notifications;
|
|
1059
|
+
return html`
|
|
1060
|
+
<div class="flex items-center gap-2 z-10 shrink-0 min-w-0 ml-auto">
|
|
1061
|
+
<sl-dropdown>
|
|
1062
|
+
<div
|
|
1063
|
+
class="relative group w-9 h-9 rounded-lg flex items-center justify-center cursor-pointer transition-colors duration-150 hover:bg-(--axebow-primary)"
|
|
1064
|
+
slot="trigger"
|
|
1065
|
+
>
|
|
1066
|
+
<span class="inline-block transition-transform duration-200 group-hover:rotate-15">
|
|
1067
|
+
<axebow-icon iconName="notifications" iconColor="white"></axebow-icon>
|
|
1068
|
+
</span>
|
|
1069
|
+
${unreadNotifications.length > 0 ? html`<div
|
|
1070
|
+
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"}"
|
|
1071
|
+
>
|
|
1072
|
+
${unreadNotifications.length > 99 ? "99+" : unreadNotifications.length}
|
|
1073
|
+
</div>` : ""}
|
|
1074
|
+
<span
|
|
1075
|
+
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"
|
|
1076
|
+
>${this.notificationsLabel}</span
|
|
1077
|
+
>
|
|
1078
|
+
</div>
|
|
1079
|
+
<sl-tab-group class="bg-white rounded-lg w-120 text-base">
|
|
1080
|
+
<sl-tab slot="nav" panel="my_notifications">${this.myNotificationsTabLabel}</sl-tab>
|
|
1081
|
+
<sl-tab slot="nav" panel="action_needed">${this.actionNeededTabLabel}</sl-tab>
|
|
1082
|
+
|
|
1083
|
+
<sl-tab-panel class="bg-gray-100" name="my_notifications">
|
|
1084
|
+
<div class="flex flex-col gap-2 px-4 max-h-[40vh] overflow-auto w-full">
|
|
1085
|
+
${this.notifications.length === 0 ? html`<div class="flex flex-row gap-4 items-center w-117">
|
|
1086
|
+
<axebow-icon iconName="info"></axebow-icon>
|
|
1087
|
+
<p class="text-black">${this.noNotificationsLabel}</p>
|
|
1088
|
+
</div>` : html`
|
|
1089
|
+
<div class="flex flex-col text-black gap-4">
|
|
1090
|
+
<div class="flex justify-between items-center flex-wrap gap-4">
|
|
1091
|
+
<div class="flex items-center py-1">
|
|
1092
|
+
<p class="mr-4 text-base">${this.showUnreadOnlyLabel}</p>
|
|
1093
|
+
<sl-switch @sl-change=${(e) => this.handleShowUnreadOnlyChange(e)}></sl-switch>
|
|
1094
|
+
<p class="italic text-gray-400 text-base">
|
|
1095
|
+
${this.showUnreadOnly ? this.onLabel : this.offLabel}
|
|
1096
|
+
</p>
|
|
1097
|
+
</div>
|
|
1098
|
+
<button class="text-gray-500 cursor-pointer text-base" @click=${() => this.onMarkAllAsRead()}>
|
|
1099
|
+
${this.markAllAsReadLabel}
|
|
1100
|
+
</button>
|
|
1101
|
+
</div>
|
|
1102
|
+
${this.showUnreadOnly && unreadNotifications.length === 0 ? html`<div class="flex flex-row gap-4 items-center w-117">
|
|
1103
|
+
<axebow-icon iconName="info"></axebow-icon>
|
|
1104
|
+
<p class="text-black">${this.noUnreadNotificationsLabel}</p>
|
|
1105
|
+
</div>` : html` ${notificationsToShow.map((item) => this.renderNotificationCard(item))} `}
|
|
1106
|
+
</div>
|
|
1107
|
+
`}
|
|
1108
|
+
</div>
|
|
1109
|
+
</sl-tab-panel>
|
|
1110
|
+
<sl-tab-panel class="bg-gray-100" name="action_needed">
|
|
1111
|
+
<div class="flex flex-col gap-2 px-4 max-h-[40vh] overflow-auto w-full">
|
|
1112
|
+
${this.actionNeededNotifications.length === 0 ? html`<div class="flex flex-row gap-4 items-center p-4">
|
|
1113
|
+
<axebow-icon iconName="info"></axebow-icon>
|
|
1114
|
+
<p class="text-black">${this.noActionNotificationsLabel}</p>
|
|
1115
|
+
</div>` : html`
|
|
1116
|
+
<div class="flex flex-col text-black gap-4">
|
|
1117
|
+
${this.actionNeededNotifications.map((item) => this.renderNotificationCard(item))}
|
|
1118
|
+
</div>
|
|
1119
|
+
`}
|
|
1120
|
+
</div>
|
|
1121
|
+
</sl-tab-panel>
|
|
1122
|
+
</sl-tab-group>
|
|
1123
|
+
</sl-dropdown>
|
|
1124
|
+
<sl-dropdown class="shrink-0">
|
|
1125
|
+
<div
|
|
1126
|
+
slot="trigger"
|
|
1127
|
+
class="group flex items-center gap-2 h-9 px-3 rounded-lg text-white font-semibold cursor-pointer whitespace-nowrap transition-all duration-150 hover:bg-white hover:text-(--axebow-primary) hover:shadow-[0_2px_6px_rgba(13,24,33,0.14)] text-base"
|
|
1128
|
+
>
|
|
1129
|
+
<span class="text-white group-hover:text-(--axebow-primary) transition-colors duration-150">
|
|
1130
|
+
<axebow-icon iconName="account_circle" iconColor="currentColor" size="xl"></axebow-icon>
|
|
1131
|
+
</span>
|
|
1132
|
+
${this.userName}
|
|
1133
|
+
</div>
|
|
1134
|
+
<sl-menu class="bg-white rounded-lg p-2 min-w-55 axebow-shadow">
|
|
1135
|
+
${this.profileMenuItems.map((item) => html`
|
|
1136
|
+
<button
|
|
1137
|
+
class="w-full flex text-base items-center justify-between ml-auto px-4 py-2 cursor-pointer rounded-lg hover:bg-gray-200 transition-colors ease-in-out duration-200 hover:text-(--axebow-tertiary)"
|
|
1138
|
+
@click=${() => item.onClick()}
|
|
1139
|
+
>
|
|
1140
|
+
<span class="text-(--axebow-primary)">${item.name}</span>
|
|
1141
|
+
<axebow-icon iconName="arrow_right_alt" size="xl"></axebow-icon>
|
|
1142
|
+
</button>
|
|
1143
|
+
`)}
|
|
1144
|
+
<button
|
|
1145
|
+
class="ml-auto flex items-center justify-between w-full px-4 py-2 text-(--axebow-error) cursor-pointer rounded-lg text-base"
|
|
1146
|
+
@click=${() => this.onLogout()}
|
|
1147
|
+
>
|
|
1148
|
+
<span class="text-(--axebow-error) mt-1">${this.logoutLabel}</span>
|
|
1149
|
+
<axebow-icon iconName="mode_off_on" iconColor="var(--axebow-error)" size="md"></axebow-icon>
|
|
1150
|
+
</button>
|
|
1151
|
+
</sl-menu>
|
|
1152
|
+
</sl-dropdown>
|
|
1153
|
+
</div>
|
|
1154
|
+
`;
|
|
901
1155
|
}
|
|
902
|
-
|
|
1156
|
+
renderNotificationCard(item) {
|
|
903
1157
|
return html`
|
|
904
|
-
<
|
|
905
|
-
class="
|
|
1158
|
+
<div
|
|
1159
|
+
class="relative flex gap-2 p-2 w-full rounded-md border-2 border-solid text-base ${item.status === "unread" ? "border-gray-500 hover:border-(--axebow-tertiary) text-gray-600" : "border-gray-300 text-gray-400"} "
|
|
1160
|
+
@click=${() => item.onClick()}
|
|
906
1161
|
>
|
|
907
|
-
${
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
1162
|
+
${item.status === "unread" ? html` <div class="absolute top-[-7px] left-[-7px] h-3.5 w-3.5 rounded-full bg-(--axebow-success)"></div>` : ""}
|
|
1163
|
+
<axebow-icon
|
|
1164
|
+
iconName=${item.icon}
|
|
1165
|
+
size="xl"
|
|
1166
|
+
iconColor=${item.status === "unread" ? item.color : "gray"}
|
|
1167
|
+
></axebow-icon>
|
|
1168
|
+
<div class="flex flex-1 flex-col gap-1 py-1.25 min-w-0 overflow-hidden">
|
|
1169
|
+
<div class="flex justify-between gap-2">
|
|
1170
|
+
<h4 class="font-semibold wrap-break-word">${item.title}</h4>
|
|
1171
|
+
<span class="ms-auto min-w-fit shrink-0 text-gray-400">${item.date}</span>
|
|
1172
|
+
</div>
|
|
1173
|
+
<div
|
|
1174
|
+
class="notification-description leading-tight max-w-full pe-4 overflow-x-hidden overflow-y-auto max-h-75 wrap-break-word"
|
|
1175
|
+
.innerHTML=${item.description}
|
|
1176
|
+
></div>
|
|
1177
|
+
${item.actions && item.actions.length > 0 ? html`
|
|
1178
|
+
<div class="flex gap-4 ml-auto pe-4 flex-wrap">
|
|
1179
|
+
${item.actions.map((action) => html`
|
|
1180
|
+
<button class="text-sm font-semibold text-[${action.color}] hover:underline" @click=${action.action}>
|
|
1181
|
+
${action.label}
|
|
1182
|
+
</button>
|
|
1183
|
+
`)}
|
|
1184
|
+
</div>
|
|
1185
|
+
` : ""}
|
|
1186
|
+
</div>
|
|
1187
|
+
</div>
|
|
917
1188
|
`;
|
|
918
1189
|
}
|
|
919
1190
|
};
|
|
920
|
-
__decorate([property({ type:
|
|
921
|
-
|
|
1191
|
+
__decorate([property({ type: String })], AxebowHeaderActions.prototype, "userName", void 0);
|
|
1192
|
+
__decorate([property({ type: Array })], AxebowHeaderActions.prototype, "profileMenuItems", void 0);
|
|
1193
|
+
__decorate([property({ type: String })], AxebowHeaderActions.prototype, "logoutLabel", void 0);
|
|
1194
|
+
__decorate([property({ attribute: false })], AxebowHeaderActions.prototype, "onLogout", void 0);
|
|
1195
|
+
__decorate([property({ type: String })], AxebowHeaderActions.prototype, "notificationsLabel", void 0);
|
|
1196
|
+
__decorate([property({ type: Array })], AxebowHeaderActions.prototype, "notifications", void 0);
|
|
1197
|
+
__decorate([property({ type: Array })], AxebowHeaderActions.prototype, "actionNeededNotifications", void 0);
|
|
1198
|
+
__decorate([property({ type: String })], AxebowHeaderActions.prototype, "myNotificationsTabLabel", void 0);
|
|
1199
|
+
__decorate([property({ type: String })], AxebowHeaderActions.prototype, "actionNeededTabLabel", void 0);
|
|
1200
|
+
__decorate([property({ type: String })], AxebowHeaderActions.prototype, "noNotificationsLabel", void 0);
|
|
1201
|
+
__decorate([property({ type: String })], AxebowHeaderActions.prototype, "noUnreadNotificationsLabel", void 0);
|
|
1202
|
+
__decorate([property({ type: String })], AxebowHeaderActions.prototype, "noActionNotificationsLabel", void 0);
|
|
1203
|
+
__decorate([property({ type: String })], AxebowHeaderActions.prototype, "showUnreadOnlyLabel", void 0);
|
|
1204
|
+
__decorate([property({ type: String })], AxebowHeaderActions.prototype, "onLabel", void 0);
|
|
1205
|
+
__decorate([property({ type: String })], AxebowHeaderActions.prototype, "offLabel", void 0);
|
|
1206
|
+
__decorate([property({ type: String })], AxebowHeaderActions.prototype, "markAllAsReadLabel", void 0);
|
|
1207
|
+
__decorate([property({ attribute: false })], AxebowHeaderActions.prototype, "onMarkAllAsRead", void 0);
|
|
1208
|
+
__decorate([state()], AxebowHeaderActions.prototype, "showUnreadOnly", void 0);
|
|
1209
|
+
AxebowHeaderActions = __decorate([customElement("axebow-header-actions")], AxebowHeaderActions);
|
|
922
1210
|
//#endregion
|
|
923
|
-
//#region src/components/axebow-
|
|
924
|
-
var
|
|
1211
|
+
//#region src/components/axebow-header/axebow-header.ts
|
|
1212
|
+
var AxebowHeader = class AxebowHeader extends LitElement {
|
|
925
1213
|
constructor(..._args) {
|
|
926
1214
|
super(..._args);
|
|
927
|
-
this.
|
|
928
|
-
this.
|
|
929
|
-
this.
|
|
930
|
-
this.
|
|
931
|
-
this.
|
|
932
|
-
this.
|
|
933
|
-
this.
|
|
934
|
-
this.
|
|
935
|
-
this.
|
|
1215
|
+
this.minimal = false;
|
|
1216
|
+
this.logoUrl = "";
|
|
1217
|
+
this.logoAlt = "";
|
|
1218
|
+
this.onLogoClick = () => {};
|
|
1219
|
+
this.userName = "";
|
|
1220
|
+
this.quickActionsLabel = "";
|
|
1221
|
+
this.quickActions = [];
|
|
1222
|
+
this.profileMenuItems = [];
|
|
1223
|
+
this.logoutLabel = "";
|
|
1224
|
+
this.onLogout = () => {};
|
|
1225
|
+
this.notificationsLabel = "";
|
|
1226
|
+
this.notifications = [];
|
|
1227
|
+
this.actionNeededNotifications = [];
|
|
1228
|
+
this.myNotificationsTabLabel = "";
|
|
1229
|
+
this.actionNeededTabLabel = "";
|
|
1230
|
+
this.noNotificationsLabel = "";
|
|
1231
|
+
this.noUnreadNotificationsLabel = "";
|
|
1232
|
+
this.noActionNotificationsLabel = "";
|
|
1233
|
+
this.showUnreadOnlyLabel = "";
|
|
1234
|
+
this.onLabel = "";
|
|
1235
|
+
this.offLabel = "";
|
|
1236
|
+
this.markAllAsReadLabel = "";
|
|
1237
|
+
this.onMarkAllAsRead = () => {};
|
|
936
1238
|
}
|
|
937
1239
|
static {
|
|
938
|
-
this.styles = [unsafeCSS(tailwind_default),
|
|
939
|
-
:host {
|
|
940
|
-
display: block;
|
|
941
|
-
width: 100%;
|
|
942
|
-
}
|
|
943
|
-
`];
|
|
1240
|
+
this.styles = [unsafeCSS(tailwind_default), axebowTheme];
|
|
944
1241
|
}
|
|
945
1242
|
render() {
|
|
946
1243
|
return html`
|
|
947
|
-
<
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
<
|
|
954
|
-
<
|
|
955
|
-
|
|
956
|
-
iconColor="var(--axebow-primary)"
|
|
957
|
-
size="xl"
|
|
958
|
-
style="display: inline-flex; align-items: center; justify-content: center; transform: scale(0.6665, 0.75);"
|
|
959
|
-
></axebow-icon>
|
|
960
|
-
<span class="font-normal">/</span>
|
|
961
|
-
</span>
|
|
962
|
-
` : ""}
|
|
963
|
-
${this.showSecondaryPages ? this.secondaryPages.map((page) => html`
|
|
964
|
-
<span
|
|
965
|
-
class="font-normal ${page.onClick ? "cursor-pointer hover:underline" : ""}"
|
|
966
|
-
@click=${page.onClick ? () => page.onClick() : void 0}
|
|
967
|
-
>${page.label} /</span
|
|
968
|
-
>
|
|
969
|
-
`) : ""}
|
|
970
|
-
<span class="font-semibold">${this.mainPage}</span>
|
|
971
|
-
</div>
|
|
972
|
-
${this.showRequiredField ? html`
|
|
973
|
-
<div class="text-sm">
|
|
974
|
-
<span class="font-bold text-(--axebow-error)">*</span>
|
|
975
|
-
<span class="font-normal text-(--axebow-rich-black)"> ${this.requiredFieldLabel}</span>
|
|
1244
|
+
<header class="relative flex items-center justify-between h-full pe-4 py-2">
|
|
1245
|
+
${this.minimal ? html`
|
|
1246
|
+
<div
|
|
1247
|
+
class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-5 cursor-pointer hover:opacity-80 transition-opacity duration-200"
|
|
1248
|
+
@click=${() => this.onLogoClick()}
|
|
1249
|
+
>
|
|
1250
|
+
<div class="flex items-center gap-2 text-white">
|
|
1251
|
+
<img src="${this.logoUrl}" alt="${this.logoAlt}" class="h-10" />
|
|
1252
|
+
</div>
|
|
976
1253
|
</div>
|
|
977
|
-
` :
|
|
978
|
-
|
|
1254
|
+
` : html`
|
|
1255
|
+
<axebow-quick-actions .label=${this.quickActionsLabel} .actions=${this.quickActions}></axebow-quick-actions>
|
|
1256
|
+
|
|
1257
|
+
<div
|
|
1258
|
+
class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-5 cursor-pointer hover:opacity-80 transition-opacity duration-200"
|
|
1259
|
+
@click=${() => this.onLogoClick()}
|
|
1260
|
+
>
|
|
1261
|
+
<div class="flex items-center gap-2 text-white">
|
|
1262
|
+
<img src="${this.logoUrl}" alt="${this.logoAlt}" class="h-10" />
|
|
1263
|
+
</div>
|
|
1264
|
+
</div>
|
|
1265
|
+
|
|
1266
|
+
<axebow-header-actions
|
|
1267
|
+
.userName=${this.userName}
|
|
1268
|
+
.profileMenuItems=${this.profileMenuItems}
|
|
1269
|
+
.logoutLabel=${this.logoutLabel}
|
|
1270
|
+
.onLogout=${this.onLogout}
|
|
1271
|
+
.notificationsLabel=${this.notificationsLabel}
|
|
1272
|
+
.notifications=${this.notifications}
|
|
1273
|
+
.actionNeededNotifications=${this.actionNeededNotifications}
|
|
1274
|
+
.myNotificationsTabLabel=${this.myNotificationsTabLabel}
|
|
1275
|
+
.actionNeededTabLabel=${this.actionNeededTabLabel}
|
|
1276
|
+
.noNotificationsLabel=${this.noNotificationsLabel}
|
|
1277
|
+
.noUnreadNotificationsLabel=${this.noUnreadNotificationsLabel}
|
|
1278
|
+
.noActionNotificationsLabel=${this.noActionNotificationsLabel}
|
|
1279
|
+
.showUnreadOnlyLabel=${this.showUnreadOnlyLabel}
|
|
1280
|
+
.onLabel=${this.onLabel}
|
|
1281
|
+
.offLabel=${this.offLabel}
|
|
1282
|
+
.markAllAsReadLabel=${this.markAllAsReadLabel}
|
|
1283
|
+
.onMarkAllAsRead=${this.onMarkAllAsRead}
|
|
1284
|
+
></axebow-header-actions>
|
|
1285
|
+
`}
|
|
1286
|
+
</header>
|
|
979
1287
|
`;
|
|
980
1288
|
}
|
|
981
1289
|
};
|
|
982
|
-
__decorate([property({
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
__decorate([property({ type:
|
|
987
|
-
__decorate([property({ type:
|
|
988
|
-
__decorate([property({
|
|
989
|
-
__decorate([property({ type:
|
|
990
|
-
__decorate([property({ type: String })],
|
|
991
|
-
|
|
1290
|
+
__decorate([property({
|
|
1291
|
+
type: Boolean,
|
|
1292
|
+
reflect: true
|
|
1293
|
+
})], AxebowHeader.prototype, "minimal", void 0);
|
|
1294
|
+
__decorate([property({ type: String })], AxebowHeader.prototype, "logoUrl", void 0);
|
|
1295
|
+
__decorate([property({ type: String })], AxebowHeader.prototype, "logoAlt", void 0);
|
|
1296
|
+
__decorate([property({ attribute: false })], AxebowHeader.prototype, "onLogoClick", void 0);
|
|
1297
|
+
__decorate([property({ type: String })], AxebowHeader.prototype, "userName", void 0);
|
|
1298
|
+
__decorate([property({ type: String })], AxebowHeader.prototype, "quickActionsLabel", void 0);
|
|
1299
|
+
__decorate([property({ type: Array })], AxebowHeader.prototype, "quickActions", void 0);
|
|
1300
|
+
__decorate([property({ type: Array })], AxebowHeader.prototype, "profileMenuItems", void 0);
|
|
1301
|
+
__decorate([property({ type: String })], AxebowHeader.prototype, "logoutLabel", void 0);
|
|
1302
|
+
__decorate([property({ attribute: false })], AxebowHeader.prototype, "onLogout", void 0);
|
|
1303
|
+
__decorate([property({ type: String })], AxebowHeader.prototype, "notificationsLabel", void 0);
|
|
1304
|
+
__decorate([property({ type: Array })], AxebowHeader.prototype, "notifications", void 0);
|
|
1305
|
+
__decorate([property({ type: Array })], AxebowHeader.prototype, "actionNeededNotifications", void 0);
|
|
1306
|
+
__decorate([property({ type: String })], AxebowHeader.prototype, "myNotificationsTabLabel", void 0);
|
|
1307
|
+
__decorate([property({ type: String })], AxebowHeader.prototype, "actionNeededTabLabel", void 0);
|
|
1308
|
+
__decorate([property({ type: String })], AxebowHeader.prototype, "noNotificationsLabel", void 0);
|
|
1309
|
+
__decorate([property({ type: String })], AxebowHeader.prototype, "noUnreadNotificationsLabel", void 0);
|
|
1310
|
+
__decorate([property({ type: String })], AxebowHeader.prototype, "noActionNotificationsLabel", void 0);
|
|
1311
|
+
__decorate([property({ type: String })], AxebowHeader.prototype, "showUnreadOnlyLabel", void 0);
|
|
1312
|
+
__decorate([property({ type: String })], AxebowHeader.prototype, "onLabel", void 0);
|
|
1313
|
+
__decorate([property({ type: String })], AxebowHeader.prototype, "offLabel", void 0);
|
|
1314
|
+
__decorate([property({ type: String })], AxebowHeader.prototype, "markAllAsReadLabel", void 0);
|
|
1315
|
+
__decorate([property({ attribute: false })], AxebowHeader.prototype, "onMarkAllAsRead", void 0);
|
|
1316
|
+
AxebowHeader = __decorate([customElement("axebow-header")], AxebowHeader);
|
|
992
1317
|
//#endregion
|
|
993
|
-
//#region src/components/axebow-
|
|
994
|
-
var
|
|
995
|
-
constructor() {
|
|
996
|
-
super();
|
|
997
|
-
this.
|
|
998
|
-
this.
|
|
999
|
-
this.
|
|
1000
|
-
this.
|
|
1001
|
-
this.
|
|
1002
|
-
this.
|
|
1003
|
-
this.
|
|
1004
|
-
this.caret = false;
|
|
1005
|
-
this.type = "button";
|
|
1006
|
-
this.hoverStyle = "simple";
|
|
1007
|
-
this._guardDisabledClick = (event) => {
|
|
1008
|
-
if (this.disabled || this.loading) {
|
|
1009
|
-
event.preventDefault();
|
|
1010
|
-
event.stopPropagation();
|
|
1011
|
-
}
|
|
1012
|
-
};
|
|
1013
|
-
this.addEventListener("click", this._guardDisabledClick, { capture: true });
|
|
1014
|
-
}
|
|
1015
|
-
updated(changed) {
|
|
1016
|
-
if (changed.has("fixedWidth")) if (this.fixedWidth) this.style.setProperty("--axebow-button-width", this.fixedWidth);
|
|
1017
|
-
else this.style.removeProperty("--axebow-button-width");
|
|
1018
|
-
if (changed.has("fixedHeight")) if (this.fixedHeight) this.style.setProperty("--axebow-button-height", this.fixedHeight);
|
|
1019
|
-
else this.style.removeProperty("--axebow-button-height");
|
|
1020
|
-
this._syncPaddingVar(changed, "paddingTop", "--axebow-button-padding-top");
|
|
1021
|
-
this._syncPaddingVar(changed, "paddingRight", "--axebow-button-padding-right");
|
|
1022
|
-
this._syncPaddingVar(changed, "paddingBottom", "--axebow-button-padding-bottom");
|
|
1023
|
-
this._syncPaddingVar(changed, "paddingLeft", "--axebow-button-padding-left");
|
|
1024
|
-
}
|
|
1025
|
-
_syncPaddingVar(changed, prop, cssVar) {
|
|
1026
|
-
if (!changed.has(prop)) return;
|
|
1027
|
-
const value = this[prop];
|
|
1028
|
-
if (value) this.style.setProperty(cssVar, value);
|
|
1029
|
-
else this.style.removeProperty(cssVar);
|
|
1318
|
+
//#region src/components/axebow-sidebar/axebow-sidebar.ts
|
|
1319
|
+
var AxebowSidebar = class AxebowSidebar extends LitElement {
|
|
1320
|
+
constructor(..._args) {
|
|
1321
|
+
super(..._args);
|
|
1322
|
+
this.items = [];
|
|
1323
|
+
this.bottomItems = [];
|
|
1324
|
+
this.selectedKey = null;
|
|
1325
|
+
this.paddingBottom = 10;
|
|
1326
|
+
this.hoveredItem = null;
|
|
1327
|
+
this.tooltipTop = 0;
|
|
1328
|
+
this.tooltipLeft = 0;
|
|
1030
1329
|
}
|
|
1031
1330
|
static {
|
|
1032
1331
|
this.styles = [unsafeCSS(tailwind_default), css`
|
|
1033
1332
|
:host {
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
sl-button {
|
|
1037
|
-
width: 100%;
|
|
1038
|
-
}
|
|
1039
|
-
sl-button::part(base) {
|
|
1040
|
-
height: var(--axebow-button-height, 2.5rem);
|
|
1041
|
-
min-height: var(--axebow-button-height, 2.5rem);
|
|
1042
|
-
line-height: calc(var(--axebow-button-height, 2.5rem) - var(--sl-input-border-width) * 2);
|
|
1043
|
-
width: var(--axebow-button-width, auto);
|
|
1044
|
-
min-width: var(--axebow-button-width, 9.375rem);
|
|
1045
|
-
}
|
|
1046
|
-
|
|
1047
|
-
/**
|
|
1048
|
-
* The label part carries sl-button's own internal left/right spacing
|
|
1049
|
-
* via a higher-specificity internal rule
|
|
1050
|
-
* (.button--has-label.button--{size} .button__label), which an
|
|
1051
|
-
* external ::part() override of equal-or-lower specificity cannot
|
|
1052
|
-
* beat on its own - !important is required here, not optional
|
|
1053
|
-
* styling preference. Each size's fallback points at shoelace's own
|
|
1054
|
-
* token for that size, so unconfigured buttons render byte-for-byte
|
|
1055
|
-
* as before - only an explicit padding* property changes anything.
|
|
1056
|
-
*/
|
|
1057
|
-
sl-button[size='small']::part(label) {
|
|
1058
|
-
padding-top: var(--axebow-button-padding-top, 0) !important;
|
|
1059
|
-
padding-right: var(--axebow-button-padding-right, var(--sl-spacing-small)) !important;
|
|
1060
|
-
padding-bottom: var(--axebow-button-padding-bottom, 0) !important;
|
|
1061
|
-
padding-left: var(--axebow-button-padding-left, var(--sl-spacing-small)) !important;
|
|
1062
|
-
}
|
|
1063
|
-
sl-button[size='medium']::part(label) {
|
|
1064
|
-
padding-top: var(--axebow-button-padding-top, 0) !important;
|
|
1065
|
-
padding-right: var(--axebow-button-padding-right, var(--sl-spacing-medium)) !important;
|
|
1066
|
-
padding-bottom: var(--axebow-button-padding-bottom, 0) !important;
|
|
1067
|
-
padding-left: var(--axebow-button-padding-left, var(--sl-spacing-medium)) !important;
|
|
1068
|
-
}
|
|
1069
|
-
sl-button[size='large']::part(label) {
|
|
1070
|
-
padding-top: var(--axebow-button-padding-top, 0) !important;
|
|
1071
|
-
padding-right: var(--axebow-button-padding-right, var(--sl-spacing-large)) !important;
|
|
1072
|
-
padding-bottom: var(--axebow-button-padding-bottom, 0) !important;
|
|
1073
|
-
padding-left: var(--axebow-button-padding-left, var(--sl-spacing-large)) !important;
|
|
1074
|
-
}
|
|
1075
|
-
|
|
1076
|
-
/**
|
|
1077
|
-
* Hover is always a plain recolor to axebow-gray, no matter the
|
|
1078
|
-
* variant - nothing else about the button's structure changes.
|
|
1079
|
-
*/
|
|
1080
|
-
|
|
1081
|
-
/** Default / neutral button */
|
|
1082
|
-
sl-button[variant='default']:hover::part(base),
|
|
1083
|
-
sl-button[variant='neutral']:hover::part(base) {
|
|
1084
|
-
color: var(--axebow-gray);
|
|
1085
|
-
border-color: var(--axebow-gray);
|
|
1086
|
-
outline-color: var(--axebow-gray);
|
|
1087
|
-
}
|
|
1088
|
-
|
|
1089
|
-
/** Primary button */
|
|
1090
|
-
sl-button[variant='primary']::part(base) {
|
|
1091
|
-
background: var(--axebow-tertiary);
|
|
1092
|
-
color: white;
|
|
1093
|
-
border-color: transparent;
|
|
1094
|
-
outline-color: var(--axebow-tertiary);
|
|
1095
|
-
}
|
|
1096
|
-
sl-button[variant='primary']:hover::part(base) {
|
|
1097
|
-
background: var(--axebow-gray);
|
|
1098
|
-
outline-color: var(--axebow-gray);
|
|
1099
|
-
}
|
|
1100
|
-
|
|
1101
|
-
/** Outlined primary button */
|
|
1102
|
-
sl-button[variant='primary'][outline]::part(base) {
|
|
1103
|
-
background: transparent;
|
|
1104
|
-
color: var(--axebow-tertiary);
|
|
1105
|
-
border-color: var(--axebow-tertiary);
|
|
1106
|
-
outline-color: var(--axebow-tertiary);
|
|
1107
|
-
}
|
|
1108
|
-
sl-button[variant='primary'][outline]:hover::part(base) {
|
|
1109
|
-
color: var(--axebow-gray);
|
|
1110
|
-
border-color: var(--axebow-gray);
|
|
1111
|
-
outline-color: var(--axebow-gray);
|
|
1112
|
-
}
|
|
1113
|
-
|
|
1114
|
-
/** Text button */
|
|
1115
|
-
sl-button[variant='text']::part(base) {
|
|
1116
|
-
outline-color: var(--axebow-tertiary);
|
|
1117
|
-
}
|
|
1118
|
-
sl-button[variant='text']::part(label) {
|
|
1119
|
-
color: var(--axebow-tertiary);
|
|
1120
|
-
}
|
|
1121
|
-
sl-button[variant='text']:hover::part(base) {
|
|
1122
|
-
outline-color: var(--axebow-gray);
|
|
1123
|
-
border-radius: 0.375rem;
|
|
1124
|
-
}
|
|
1125
|
-
sl-button[variant='text']:hover::part(label) {
|
|
1126
|
-
color: var(--axebow-gray);
|
|
1127
|
-
}
|
|
1128
|
-
|
|
1129
|
-
/** Success button */
|
|
1130
|
-
sl-button[variant='success']::part(base) {
|
|
1131
|
-
background: var(--axebow-success);
|
|
1132
|
-
border-color: var(--axebow-success);
|
|
1133
|
-
color: white;
|
|
1134
|
-
border-radius: 0.5rem;
|
|
1135
|
-
outline-color: var(--axebow-success);
|
|
1136
|
-
}
|
|
1137
|
-
sl-button[variant='success']:hover::part(base) {
|
|
1138
|
-
background: var(--axebow-gray);
|
|
1139
|
-
border-color: var(--axebow-gray);
|
|
1140
|
-
outline-color: var(--axebow-gray);
|
|
1141
|
-
}
|
|
1142
|
-
|
|
1143
|
-
/** Danger button */
|
|
1144
|
-
sl-button[variant='danger']::part(base) {
|
|
1145
|
-
background: var(--axebow-error);
|
|
1146
|
-
border-color: var(--axebow-error);
|
|
1147
|
-
color: white;
|
|
1148
|
-
outline-color: var(--axebow-error);
|
|
1149
|
-
}
|
|
1150
|
-
sl-button[variant='danger']:hover::part(base) {
|
|
1151
|
-
background: var(--axebow-gray);
|
|
1152
|
-
border-color: var(--axebow-gray);
|
|
1153
|
-
outline-color: var(--axebow-gray);
|
|
1154
|
-
}
|
|
1155
|
-
|
|
1156
|
-
/** Danger outlined */
|
|
1157
|
-
sl-button[variant='danger'][outline]::part(base) {
|
|
1158
|
-
background: transparent;
|
|
1159
|
-
color: var(--axebow-error);
|
|
1160
|
-
border-color: var(--axebow-error);
|
|
1161
|
-
outline-color: var(--axebow-error);
|
|
1162
|
-
}
|
|
1163
|
-
sl-button[variant='danger'][outline]:hover::part(base) {
|
|
1164
|
-
color: var(--axebow-gray);
|
|
1165
|
-
border-color: var(--axebow-gray);
|
|
1166
|
-
outline-color: var(--axebow-gray);
|
|
1167
|
-
}
|
|
1168
|
-
|
|
1169
|
-
/** Danger text (host class) */
|
|
1170
|
-
:host(.axebow-red-button-text) sl-button::part(base) {
|
|
1171
|
-
outline-color: var(--axebow-error);
|
|
1172
|
-
}
|
|
1173
|
-
:host(.axebow-red-button-text) sl-button::part(label) {
|
|
1174
|
-
color: var(--axebow-error);
|
|
1175
|
-
}
|
|
1176
|
-
:host(.axebow-red-button-text) sl-button:hover::part(base) {
|
|
1177
|
-
outline-color: var(--axebow-gray);
|
|
1178
|
-
}
|
|
1179
|
-
:host(.axebow-red-button-text) sl-button:hover::part(label) {
|
|
1180
|
-
color: var(--axebow-gray);
|
|
1333
|
+
position: relative;
|
|
1334
|
+
width: 4rem;
|
|
1181
1335
|
}
|
|
1336
|
+
`];
|
|
1337
|
+
}
|
|
1338
|
+
handleMouseEnter(event, item) {
|
|
1339
|
+
const rect = event.currentTarget.getBoundingClientRect();
|
|
1340
|
+
this.tooltipTop = rect.top + 10;
|
|
1341
|
+
this.tooltipLeft = rect.right - 8;
|
|
1342
|
+
this.hoveredItem = item;
|
|
1343
|
+
}
|
|
1344
|
+
handleMouseLeave() {
|
|
1345
|
+
this.hoveredItem = null;
|
|
1346
|
+
}
|
|
1347
|
+
_isSelected(item) {
|
|
1348
|
+
return this.selectedKey === item.key || !!item.isRoot && this.selectedKey === null;
|
|
1349
|
+
}
|
|
1350
|
+
render() {
|
|
1351
|
+
return html`
|
|
1352
|
+
<nav
|
|
1353
|
+
style="padding-bottom: ${this.paddingBottom}px;"
|
|
1354
|
+
class="h-full flex flex-col justify-between overflow-x-hidden pt-2"
|
|
1355
|
+
>
|
|
1356
|
+
<ul class="flex flex-col gap-0 w-full pb-4">
|
|
1357
|
+
${this.items.map((entry) => "divider" in entry ? html` <sl-divider class="w-[calc(100%-10px)] my-2 h-px bg-(--axebow-light-gray)"></sl-divider> ` : this._renderNavItem(entry, this._isSelected(entry)))}
|
|
1358
|
+
</ul>
|
|
1359
|
+
<ul>
|
|
1360
|
+
${this.bottomItems.map((item) => this._renderBottomItem(item))}
|
|
1361
|
+
</ul>
|
|
1362
|
+
</nav>
|
|
1182
1363
|
|
|
1183
|
-
|
|
1184
|
-
|
|
1185
|
-
|
|
1186
|
-
|
|
1187
|
-
|
|
1188
|
-
|
|
1189
|
-
|
|
1190
|
-
|
|
1191
|
-
|
|
1192
|
-
|
|
1193
|
-
|
|
1364
|
+
${this.hoveredItem ? html`
|
|
1365
|
+
<div
|
|
1366
|
+
class="fixed ps-4 flex items-center pointer-events-none z-9999"
|
|
1367
|
+
style="left: ${this.tooltipLeft}px; top: ${this.tooltipTop}px; height: 3rem;"
|
|
1368
|
+
>
|
|
1369
|
+
<span
|
|
1370
|
+
class="flex items-center gap-1 px-2 py-1 bg-white rounded-lg text-base border border-solid border-(--axebow-gray) shadow-lg"
|
|
1371
|
+
>${this.hoveredItem.label}${this.hoveredItem.openInNewTab ? html`<axebow-icon iconName="open_in_new" size="sm"></axebow-icon>` : ""}</span
|
|
1372
|
+
>
|
|
1373
|
+
</div>
|
|
1374
|
+
` : ""}
|
|
1375
|
+
`;
|
|
1376
|
+
}
|
|
1377
|
+
_renderNavItem(item, selected) {
|
|
1378
|
+
return html`
|
|
1379
|
+
<li
|
|
1380
|
+
class="${selected ? "bg-(--axebow-base) rounded-l-xl cursor-default" : "cursor-pointer"} flex flex-col w-full h-16 items-center justify-center relative group"
|
|
1381
|
+
@click="${() => item.onClick()}"
|
|
1382
|
+
@mouseenter="${(e) => this.handleMouseEnter(e, item)}"
|
|
1383
|
+
@mouseleave="${() => this.handleMouseLeave()}"
|
|
1384
|
+
title="${item.label}"
|
|
1385
|
+
>
|
|
1386
|
+
<div class="flex flex-col items-center justify-center">
|
|
1387
|
+
<axebow-icon iconName="${item.icon}" size="xl"></axebow-icon>
|
|
1388
|
+
<span class="text-xs overflow-hidden whitespace-nowrap opacity-100 max-w-full">${item.label}</span>
|
|
1389
|
+
</div>
|
|
1194
1390
|
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
|
|
1198
|
-
|
|
1199
|
-
|
|
1200
|
-
|
|
1201
|
-
|
|
1202
|
-
|
|
1203
|
-
|
|
1204
|
-
|
|
1205
|
-
|
|
1206
|
-
|
|
1207
|
-
|
|
1208
|
-
|
|
1391
|
+
${!selected ? html`
|
|
1392
|
+
<div
|
|
1393
|
+
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"
|
|
1394
|
+
></div>
|
|
1395
|
+
` : ""}
|
|
1396
|
+
</li>
|
|
1397
|
+
`;
|
|
1398
|
+
}
|
|
1399
|
+
_renderBottomItem(item) {
|
|
1400
|
+
return html`
|
|
1401
|
+
<li
|
|
1402
|
+
class="flex flex-col w-full items-center justify-center cursor-pointer relative group"
|
|
1403
|
+
@click="${() => item.onClick()}"
|
|
1404
|
+
@mouseenter="${(e) => this.handleMouseEnter(e, item)}"
|
|
1405
|
+
@mouseleave="${() => this.handleMouseLeave()}"
|
|
1406
|
+
title="${item.label}"
|
|
1407
|
+
>
|
|
1408
|
+
<div class="flex flex-col items-center justify-center py-3">
|
|
1409
|
+
<axebow-icon iconName="${item.icon}" size="xl"></axebow-icon>
|
|
1410
|
+
<span class="text-sm overflow-hidden whitespace-nowrap opacity-100 max-w-full"
|
|
1411
|
+
>${item.label}${item.openInNewTab ? html`<axebow-icon iconName="open_in_new" size="sm"></axebow-icon>` : ""}</span
|
|
1412
|
+
>
|
|
1413
|
+
</div>
|
|
1414
|
+
|
|
1415
|
+
<div
|
|
1416
|
+
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"
|
|
1417
|
+
></div>
|
|
1418
|
+
</li>
|
|
1419
|
+
`;
|
|
1420
|
+
}
|
|
1421
|
+
};
|
|
1422
|
+
__decorate([property({ type: Array })], AxebowSidebar.prototype, "items", void 0);
|
|
1423
|
+
__decorate([property({ type: Array })], AxebowSidebar.prototype, "bottomItems", void 0);
|
|
1424
|
+
__decorate([property({ type: String })], AxebowSidebar.prototype, "selectedKey", void 0);
|
|
1425
|
+
__decorate([property({ type: Number })], AxebowSidebar.prototype, "paddingBottom", void 0);
|
|
1426
|
+
__decorate([state()], AxebowSidebar.prototype, "hoveredItem", void 0);
|
|
1427
|
+
__decorate([state()], AxebowSidebar.prototype, "tooltipTop", void 0);
|
|
1428
|
+
__decorate([state()], AxebowSidebar.prototype, "tooltipLeft", void 0);
|
|
1429
|
+
AxebowSidebar = __decorate([customElement("axebow-sidebar")], AxebowSidebar);
|
|
1430
|
+
//#endregion
|
|
1431
|
+
//#region src/components/axebow-footer/axebow-footer.ts
|
|
1432
|
+
var AxebowFooter = class AxebowFooter extends LitElement {
|
|
1433
|
+
constructor(..._args) {
|
|
1434
|
+
super(..._args);
|
|
1435
|
+
this.links = [];
|
|
1436
|
+
this.emitFooterHeight = () => {
|
|
1437
|
+
const rect = this.getBoundingClientRect();
|
|
1438
|
+
const windowHeight = window.innerHeight;
|
|
1439
|
+
let visible = 0;
|
|
1440
|
+
if (rect.top < windowHeight && rect.bottom > 0) visible = Math.min(rect.bottom, windowHeight) - Math.max(rect.top, 0);
|
|
1441
|
+
visible = Math.max(0, visible);
|
|
1442
|
+
this.dispatchEvent(new CustomEvent("footer-height-changed", {
|
|
1443
|
+
detail: { height: visible },
|
|
1444
|
+
bubbles: true,
|
|
1445
|
+
composed: true
|
|
1446
|
+
}));
|
|
1447
|
+
};
|
|
1448
|
+
}
|
|
1449
|
+
static {
|
|
1450
|
+
this.styles = [unsafeCSS(tailwind_default), css`
|
|
1451
|
+
:host {
|
|
1452
|
+
display: block;
|
|
1453
|
+
width: 100%;
|
|
1454
|
+
position: relative;
|
|
1455
|
+
z-index: 1001;
|
|
1456
|
+
overflow: hidden;
|
|
1209
1457
|
}
|
|
1210
1458
|
`];
|
|
1211
1459
|
}
|
|
1460
|
+
connectedCallback() {
|
|
1461
|
+
super.connectedCallback();
|
|
1462
|
+
this.resizeObserver = new ResizeObserver(() => {
|
|
1463
|
+
this.emitFooterHeight();
|
|
1464
|
+
});
|
|
1465
|
+
this.resizeObserver.observe(this);
|
|
1466
|
+
window.addEventListener("resize", this.emitFooterHeight);
|
|
1467
|
+
window.addEventListener("scroll", this.emitFooterHeight, true);
|
|
1468
|
+
setTimeout(() => this.emitFooterHeight(), 0);
|
|
1469
|
+
}
|
|
1470
|
+
disconnectedCallback() {
|
|
1471
|
+
super.disconnectedCallback();
|
|
1472
|
+
this.resizeObserver?.disconnect();
|
|
1473
|
+
window.removeEventListener("resize", this.emitFooterHeight);
|
|
1474
|
+
window.removeEventListener("scroll", this.emitFooterHeight, true);
|
|
1475
|
+
}
|
|
1212
1476
|
render() {
|
|
1213
1477
|
return html`
|
|
1214
|
-
<
|
|
1215
|
-
|
|
1216
|
-
hoverstyle=${this.hoverStyle}
|
|
1217
|
-
variant=${this.variant}
|
|
1218
|
-
size=${this.size}
|
|
1219
|
-
?outline=${this.outline}
|
|
1220
|
-
?pill=${this.pill}
|
|
1221
|
-
?circle=${this.circle}
|
|
1222
|
-
?disabled=${this.disabled}
|
|
1223
|
-
?loading=${this.loading}
|
|
1224
|
-
?caret=${this.caret}
|
|
1225
|
-
type=${this.type}
|
|
1226
|
-
href=${ifDefined(this.href)}
|
|
1227
|
-
target=${ifDefined(this.target)}
|
|
1228
|
-
name=${ifDefined(this.name)}
|
|
1229
|
-
value=${ifDefined(this.value)}
|
|
1478
|
+
<footer
|
|
1479
|
+
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"
|
|
1230
1480
|
>
|
|
1231
|
-
|
|
1232
|
-
|
|
1233
|
-
|
|
1234
|
-
|
|
1481
|
+
${this.links.map((link) => html`
|
|
1482
|
+
<button
|
|
1483
|
+
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"
|
|
1484
|
+
@click=${link.onClick}
|
|
1485
|
+
>
|
|
1486
|
+
${link.label}
|
|
1487
|
+
<axebow-icon iconName="open_in_new" iconColor="var(--axebow-anti-flash-white)" size="md"></axebow-icon>
|
|
1488
|
+
</button>
|
|
1489
|
+
`)}
|
|
1490
|
+
</footer>
|
|
1235
1491
|
`;
|
|
1236
1492
|
}
|
|
1237
1493
|
};
|
|
1238
|
-
__decorate([property({
|
|
1239
|
-
|
|
1240
|
-
reflect: true
|
|
1241
|
-
})], AxebowButton.prototype, "variant", void 0);
|
|
1242
|
-
__decorate([property({
|
|
1243
|
-
type: String,
|
|
1244
|
-
reflect: true
|
|
1245
|
-
})], AxebowButton.prototype, "size", void 0);
|
|
1246
|
-
__decorate([property({
|
|
1247
|
-
type: Boolean,
|
|
1248
|
-
reflect: true
|
|
1249
|
-
})], AxebowButton.prototype, "outline", void 0);
|
|
1250
|
-
__decorate([property({
|
|
1251
|
-
type: Boolean,
|
|
1252
|
-
reflect: true
|
|
1253
|
-
})], AxebowButton.prototype, "pill", void 0);
|
|
1254
|
-
__decorate([property({
|
|
1255
|
-
type: Boolean,
|
|
1256
|
-
reflect: true
|
|
1257
|
-
})], AxebowButton.prototype, "circle", void 0);
|
|
1258
|
-
__decorate([property({
|
|
1259
|
-
type: Boolean,
|
|
1260
|
-
attribute: false
|
|
1261
|
-
})], AxebowButton.prototype, "disabled", void 0);
|
|
1262
|
-
__decorate([property({
|
|
1263
|
-
type: Boolean,
|
|
1264
|
-
reflect: true
|
|
1265
|
-
})], AxebowButton.prototype, "loading", void 0);
|
|
1266
|
-
__decorate([property({
|
|
1267
|
-
type: Boolean,
|
|
1268
|
-
reflect: true
|
|
1269
|
-
})], AxebowButton.prototype, "caret", void 0);
|
|
1270
|
-
__decorate([property({ type: String })], AxebowButton.prototype, "type", void 0);
|
|
1271
|
-
__decorate([property({ type: String })], AxebowButton.prototype, "href", void 0);
|
|
1272
|
-
__decorate([property({ type: String })], AxebowButton.prototype, "target", void 0);
|
|
1273
|
-
__decorate([property({ type: String })], AxebowButton.prototype, "name", void 0);
|
|
1274
|
-
__decorate([property({ type: String })], AxebowButton.prototype, "value", void 0);
|
|
1275
|
-
__decorate([property({ type: String })], AxebowButton.prototype, "fixedWidth", void 0);
|
|
1276
|
-
__decorate([property({ type: String })], AxebowButton.prototype, "fixedHeight", void 0);
|
|
1277
|
-
__decorate([property({ type: String })], AxebowButton.prototype, "paddingTop", void 0);
|
|
1278
|
-
__decorate([property({ type: String })], AxebowButton.prototype, "paddingRight", void 0);
|
|
1279
|
-
__decorate([property({ type: String })], AxebowButton.prototype, "paddingBottom", void 0);
|
|
1280
|
-
__decorate([property({ type: String })], AxebowButton.prototype, "paddingLeft", void 0);
|
|
1281
|
-
__decorate([property({ type: String })], AxebowButton.prototype, "hoverStyle", void 0);
|
|
1282
|
-
AxebowButton = __decorate([customElement("axebow-button")], AxebowButton);
|
|
1494
|
+
__decorate([property({ type: Array })], AxebowFooter.prototype, "links", void 0);
|
|
1495
|
+
AxebowFooter = __decorate([customElement("axebow-footer")], AxebowFooter);
|
|
1283
1496
|
//#endregion
|
|
1284
|
-
//#region src/components/axebow-
|
|
1285
|
-
var
|
|
1497
|
+
//#region src/components/axebow-breadcrumb-header/axebow-breadcrumb-header.ts
|
|
1498
|
+
var AxebowBreadcrumbHeader = class AxebowBreadcrumbHeader extends LitElement {
|
|
1286
1499
|
constructor(..._args) {
|
|
1287
1500
|
super(..._args);
|
|
1288
|
-
this.
|
|
1289
|
-
this.
|
|
1501
|
+
this.padded = false;
|
|
1502
|
+
this.paddingBottom = "2rem";
|
|
1503
|
+
this.showHomeBlock = true;
|
|
1504
|
+
this.onHomeClick = () => {};
|
|
1505
|
+
this.showSecondaryPages = false;
|
|
1506
|
+
this.secondaryPages = [];
|
|
1507
|
+
this.mainPage = "";
|
|
1508
|
+
this.showRequiredField = false;
|
|
1509
|
+
this.requiredFieldLabel = "";
|
|
1290
1510
|
}
|
|
1291
1511
|
static {
|
|
1292
1512
|
this.styles = [unsafeCSS(tailwind_default), css`
|
|
1293
1513
|
:host {
|
|
1294
|
-
display:
|
|
1295
|
-
|
|
1296
|
-
sl-input {
|
|
1297
|
-
width: 20rem;
|
|
1298
|
-
--sl-focus-ring-width: 0px;
|
|
1299
|
-
}
|
|
1300
|
-
:host(.axebow-fixed-width) sl-input {
|
|
1301
|
-
width: var(--axebow-search-width);
|
|
1302
|
-
}
|
|
1303
|
-
sl-input::part(base) {
|
|
1304
|
-
height: 2.5rem;
|
|
1305
|
-
border: 1px solid #dbdde4;
|
|
1306
|
-
border-radius: 0.375rem;
|
|
1307
|
-
box-shadow: none;
|
|
1308
|
-
}
|
|
1309
|
-
sl-input:focus-within::part(base) {
|
|
1310
|
-
border-color: var(--axebow-tertiary);
|
|
1311
|
-
}
|
|
1312
|
-
sl-input::part(input) {
|
|
1313
|
-
color: var(--axebow-rich-black, #0d1821);
|
|
1314
|
-
font-size: 0.875rem;
|
|
1315
|
-
}
|
|
1316
|
-
sl-input::part(prefix) {
|
|
1317
|
-
padding-inline-start: 0.75rem;
|
|
1514
|
+
display: block;
|
|
1515
|
+
width: 100%;
|
|
1318
1516
|
}
|
|
1319
1517
|
`];
|
|
1320
1518
|
}
|
|
1321
|
-
updated(changed) {
|
|
1322
|
-
super.updated(changed);
|
|
1323
|
-
if (changed.has("width")) if (this.width) {
|
|
1324
|
-
this.style.setProperty("--axebow-search-width", this.width);
|
|
1325
|
-
this.classList.add("axebow-fixed-width");
|
|
1326
|
-
} else {
|
|
1327
|
-
this.style.removeProperty("--axebow-search-width");
|
|
1328
|
-
this.classList.remove("axebow-fixed-width");
|
|
1329
|
-
}
|
|
1330
|
-
}
|
|
1331
|
-
_emitChange(value) {
|
|
1332
|
-
this.dispatchEvent(new CustomEvent("search-change", {
|
|
1333
|
-
detail: { value },
|
|
1334
|
-
bubbles: true,
|
|
1335
|
-
composed: true
|
|
1336
|
-
}));
|
|
1337
|
-
}
|
|
1338
|
-
_onInput(e) {
|
|
1339
|
-
this._emitChange(e.target.value);
|
|
1340
|
-
}
|
|
1341
|
-
_onClear() {
|
|
1342
|
-
this._emitChange("");
|
|
1343
|
-
}
|
|
1344
1519
|
render() {
|
|
1345
1520
|
return html`
|
|
1346
|
-
<
|
|
1347
|
-
|
|
1348
|
-
|
|
1521
|
+
<div
|
|
1522
|
+
class="flex flex-col gap-1 pt-8 ${this.padded ? "ps-8" : ""}"
|
|
1523
|
+
style="padding-bottom: ${this.paddingBottom};"
|
|
1524
|
+
>
|
|
1525
|
+
<div class="flex flex-wrap items-center gap-2 text-xl text-(--axebow-primary)">
|
|
1526
|
+
${this.showHomeBlock ? html`
|
|
1527
|
+
<span class="flex items-center gap-2 cursor-pointer" @click=${() => this.onHomeClick()}>
|
|
1528
|
+
<axebow-icon
|
|
1529
|
+
iconName="home"
|
|
1530
|
+
iconColor="var(--axebow-primary)"
|
|
1531
|
+
size="xl"
|
|
1532
|
+
style="display: inline-flex; align-items: center; justify-content: center; transform: scale(0.6665, 0.75);"
|
|
1533
|
+
></axebow-icon>
|
|
1534
|
+
<span class="font-normal">/</span>
|
|
1535
|
+
</span>
|
|
1536
|
+
` : ""}
|
|
1537
|
+
${this.showSecondaryPages ? this.secondaryPages.map((page) => html`
|
|
1538
|
+
<span
|
|
1539
|
+
class="font-normal ${page.onClick ? "cursor-pointer hover:underline" : ""}"
|
|
1540
|
+
@click=${page.onClick ? () => page.onClick() : void 0}
|
|
1541
|
+
>${page.label} /</span
|
|
1542
|
+
>
|
|
1543
|
+
`) : ""}
|
|
1544
|
+
<span class="font-semibold">${this.mainPage}</span>
|
|
1545
|
+
</div>
|
|
1546
|
+
${this.showRequiredField ? html`
|
|
1547
|
+
<div class="text-sm">
|
|
1548
|
+
<span class="font-bold text-(--axebow-error)">*</span>
|
|
1549
|
+
<span class="font-normal text-(--axebow-rich-black)"> ${this.requiredFieldLabel}</span>
|
|
1550
|
+
</div>
|
|
1551
|
+
` : ""}
|
|
1552
|
+
</div>
|
|
1349
1553
|
`;
|
|
1350
1554
|
}
|
|
1351
1555
|
};
|
|
1352
|
-
__decorate([property({ type:
|
|
1353
|
-
__decorate([property({ type: String })],
|
|
1354
|
-
__decorate([property({ type:
|
|
1355
|
-
|
|
1556
|
+
__decorate([property({ type: Boolean })], AxebowBreadcrumbHeader.prototype, "padded", void 0);
|
|
1557
|
+
__decorate([property({ type: String })], AxebowBreadcrumbHeader.prototype, "paddingBottom", void 0);
|
|
1558
|
+
__decorate([property({ type: Boolean })], AxebowBreadcrumbHeader.prototype, "showHomeBlock", void 0);
|
|
1559
|
+
__decorate([property({ attribute: false })], AxebowBreadcrumbHeader.prototype, "onHomeClick", void 0);
|
|
1560
|
+
__decorate([property({ type: Boolean })], AxebowBreadcrumbHeader.prototype, "showSecondaryPages", void 0);
|
|
1561
|
+
__decorate([property({ type: Array })], AxebowBreadcrumbHeader.prototype, "secondaryPages", void 0);
|
|
1562
|
+
__decorate([property({ type: String })], AxebowBreadcrumbHeader.prototype, "mainPage", void 0);
|
|
1563
|
+
__decorate([property({ type: Boolean })], AxebowBreadcrumbHeader.prototype, "showRequiredField", void 0);
|
|
1564
|
+
__decorate([property({ type: String })], AxebowBreadcrumbHeader.prototype, "requiredFieldLabel", void 0);
|
|
1565
|
+
AxebowBreadcrumbHeader = __decorate([customElement("axebow-breadcrumb-header")], AxebowBreadcrumbHeader);
|
|
1356
1566
|
//#endregion
|
|
1357
1567
|
//#region src/components/axebow-input/axebow-input-base.ts
|
|
1358
1568
|
var AxebowInputBase = class extends LitElement {
|
|
@@ -9027,6 +9237,6 @@ var CustomHomePageBody = class CustomHomePageBody extends LitElement {
|
|
|
9027
9237
|
};
|
|
9028
9238
|
CustomHomePageBody = __decorate([customElement("custom-home-page-body")], CustomHomePageBody);
|
|
9029
9239
|
//#endregion
|
|
9030
|
-
export { AxebowActionsFooter, AxebowAdjustmentResourcesCounter, AxebowAlert, AxebowBanner, AxebowBaseCard, AxebowBreadcrumbHeader, AxebowButton, AxebowCardActionBanner, AxebowCardAttentionBanner, AxebowCardCloudLogo, AxebowCardFilter, AxebowCardFilterItem, AxebowCardFooter, AxebowCardHeader, AxebowCardResourceRow, AxebowCardResourceTable, AxebowCardSpecialLink, AxebowCardStatItem, AxebowCardStatsRow, AxebowCardStatus, AxebowCardTableHeader, AxebowCardVersionSelector, AxebowCarouselInput, AxebowCarouselSelectorItem, AxebowCarouselSelectorTenant, AxebowChannelConfigPanel, AxebowCheckboxInput, AxebowCollaboratorsDialog, AxebowDeployCard, AxebowDeploySummary, AxebowDialog, AxebowDragDropUploadFile, AxebowDraggableService, AxebowExpandableHeader, AxebowFilterBar, AxebowFooter, AxebowGettingStartedCard, AxebowHeader, AxebowHelpBubble, AxebowIcon, AxebowInfrastructureCard, AxebowInput, AxebowInputBase, AxebowLimitsCounter, AxebowMarketplaceCard, AxebowModalsConfirmation, AxebowMoreActions, AxebowNumberCard, AxebowNumbersSection, AxebowNumericInput, AxebowPill, AxebowProvidersInput, AxebowQuickTipButton, AxebowQuickTipSection, AxebowResourceBar, AxebowResourceCard, AxebowResourceLimitInput, AxebowResourceLimitsPanel, AxebowResourcesCounter, AxebowRoleTooltip, AxebowRuntimeZipDialog, AxebowSearch, AxebowSelectInput, AxebowSelectorSlider, AxebowServicesPanel, AxebowSidebar, AxebowStepHeader, AxebowSummaryCard, AxebowSummaryFlavors, AxebowSummaryKeyValue, AxebowSummaryLimits, AxebowSummaryStep, AxebowSummaryStepHeader, AxebowSwitch, AxebowSwitchInput, AxebowTabSelector, AxebowTenantCard, AxebowTenantResourceTable, AxebowTextInput, AxebowTooltip, CustomHomePageBody, DEFAULT_ADD_DIALOG_LABELS, DeployModalComponent, DeployModalFooter, DeployModalHeader, DeployPageBody, STATUS_COLORS, axebowTheme, buildAddButton, buildExternalNodeContent, buildMainNodeContent, createElement, createIcon };
|
|
9240
|
+
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 };
|
|
9031
9241
|
|
|
9032
9242
|
//# sourceMappingURL=index.js.map
|