@kumori/aurora-wui-components 0.0.270 → 0.0.272
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-alert/axebow-alert.d.ts.map +1 -1
- package/dist/components/axebow-button/axebow-button.d.ts +1 -1
- package/dist/components/axebow-button/axebow-button.d.ts.map +1 -1
- package/dist/components/axebow-deploy-summary/axebow-deploy-summary.d.ts.map +1 -1
- package/dist/components/axebow-deploy-summary/axebow-deploy-summary.models.d.ts +1 -0
- package/dist/components/axebow-deploy-summary/axebow-deploy-summary.models.d.ts.map +1 -1
- package/dist/components/axebow-filter-bar/axebow-filter-bar.d.ts +4 -1
- package/dist/components/axebow-filter-bar/axebow-filter-bar.d.ts.map +1 -1
- package/dist/components/axebow-getting-started-card/axebow-getting-started-card.d.ts.map +1 -1
- package/dist/components/axebow-help-bubble/axebow-help-bubble.d.ts.map +1 -1
- package/dist/components/axebow-input/axebow-carousel-input.d.ts.map +1 -1
- package/dist/components/axebow-input/axebow-input-base.d.ts.map +1 -1
- package/dist/components/axebow-mesh-node-renderer/axebow-mesh-node-renderer.d.ts +2 -1
- package/dist/components/axebow-mesh-node-renderer/axebow-mesh-node-renderer.d.ts.map +1 -1
- package/dist/components/axebow-more-actions/axebow-more-actions.d.ts +1 -0
- package/dist/components/axebow-more-actions/axebow-more-actions.d.ts.map +1 -1
- package/dist/components/axebow-quick-tip-section/axebow-quick-tip-section.d.ts.map +1 -1
- package/dist/components/axebow-registry-selector/axebow-registry-selector.d.ts +49 -0
- package/dist/components/axebow-registry-selector/axebow-registry-selector.d.ts.map +1 -0
- package/dist/components/axebow-search-bar-filters/axebow-search-bar-filters.d.ts +4 -0
- package/dist/components/axebow-search-bar-filters/axebow-search-bar-filters.d.ts.map +1 -1
- package/dist/components/axebow-summary/axebow-resource-bar.d.ts +16 -0
- package/dist/components/axebow-summary/axebow-resource-bar.d.ts.map +1 -1
- package/dist/components/axebow-summary/axebow-summary-step-header.d.ts +0 -2
- package/dist/components/axebow-summary/axebow-summary-step-header.d.ts.map +1 -1
- package/dist/components/axebow-tenant-resource-table/axebow-tenant-resource-table.d.ts.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +826 -385
- package/dist/index.js.map +1 -1
- package/dist/playground/schemas/axebow-button.schema.d.ts.map +1 -1
- package/dist/playground/schemas/axebow-filter-bar.schema.d.ts.map +1 -1
- package/dist/playground/schemas/axebow-more-actions.schema.d.ts.map +1 -1
- package/dist/styles/axebow-theme.d.ts.map +1 -1
- package/dist/styles/shoelace-style.css +7 -0
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -17,14 +17,13 @@ import "@shoelace-style/shoelace/dist/components/checkbox/checkbox.js";
|
|
|
17
17
|
import "@shoelace-style/shoelace/dist/components/carousel/carousel.js";
|
|
18
18
|
import "@shoelace-style/shoelace/dist/components/carousel-item/carousel-item.js";
|
|
19
19
|
import "@shoelace-style/shoelace/dist/components/dialog/dialog.js";
|
|
20
|
+
import { unsafeHTML } from "lit/directives/unsafe-html.js";
|
|
20
21
|
import "@shoelace-style/shoelace/dist/components/menu-item/menu-item.js";
|
|
21
22
|
import "@shoelace-style/shoelace/dist/components/tooltip/tooltip.js";
|
|
22
23
|
import "@shoelace-style/shoelace/dist/components/icon/icon.js";
|
|
23
24
|
import "@shoelace-style/shoelace/dist/components/badge/badge.js";
|
|
24
25
|
import "@shoelace-style/shoelace/dist/components/spinner/spinner.js";
|
|
25
26
|
import { Chart } from "chart.js/auto";
|
|
26
|
-
import { unsafeHTML } from "lit/directives/unsafe-html.js";
|
|
27
|
-
import "@shoelace-style/shoelace/dist/components/icon-button/icon-button.js";
|
|
28
27
|
import "@shoelace-style/shoelace/dist/components/card/card.js";
|
|
29
28
|
import "@shoelace-style/shoelace/dist/components/progress-bar/progress-bar.js";
|
|
30
29
|
//#region src/styles/axebow-theme.ts
|
|
@@ -86,7 +85,8 @@ var axebowTheme = css`
|
|
|
86
85
|
sl-input:focus-within::part(base),
|
|
87
86
|
sl-select:focus-within::part(combobox) {
|
|
88
87
|
border-color: var(--axebow-black) !important;
|
|
89
|
-
|
|
88
|
+
border-width: 1px !important;
|
|
89
|
+
box-shadow: none !important;
|
|
90
90
|
}
|
|
91
91
|
sl-select sl-option:hover::part(base) {
|
|
92
92
|
background-color: #e9ecef;
|
|
@@ -179,6 +179,13 @@ var axebowTheme = css`
|
|
|
179
179
|
scrollbar-width: thin;
|
|
180
180
|
scrollbar-color: var(--axebow-scrollbar-thumb-color) transparent;
|
|
181
181
|
}
|
|
182
|
+
|
|
183
|
+
sl-select::part(listbox),
|
|
184
|
+
sl-select::part(menu) {
|
|
185
|
+
min-width: 100% !important;
|
|
186
|
+
width: max-content !important;
|
|
187
|
+
max-width: 90vw !important;
|
|
188
|
+
}
|
|
182
189
|
`;
|
|
183
190
|
var STATUS_COLORS = {
|
|
184
191
|
HEALTHY: "var(--axebow-success)",
|
|
@@ -188,7 +195,7 @@ var STATUS_COLORS = {
|
|
|
188
195
|
};
|
|
189
196
|
//#endregion
|
|
190
197
|
//#region src/styles/tailwind.css?inline
|
|
191
|
-
var tailwind_default = "/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n@layer properties {\n @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {\n *, :before, :after, ::backdrop {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-rotate-x: initial;\n --tw-rotate-y: initial;\n --tw-rotate-z: initial;\n --tw-skew-x: initial;\n --tw-skew-y: initial;\n --tw-space-y-reverse: 0;\n --tw-border-style: solid;\n --tw-leading: initial;\n --tw-font-weight: initial;\n --tw-tracking: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-outline-style: solid;\n --tw-blur: initial;\n --tw-brightness: initial;\n --tw-contrast: initial;\n --tw-grayscale: initial;\n --tw-hue-rotate: initial;\n --tw-invert: initial;\n --tw-opacity: initial;\n --tw-saturate: initial;\n --tw-sepia: initial;\n --tw-drop-shadow: initial;\n --tw-drop-shadow-color: initial;\n --tw-drop-shadow-alpha: 100%;\n --tw-drop-shadow-size: initial;\n --tw-duration: initial;\n --tw-ease: initial;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-scale-z: 1;\n }\n }\n}\n\n@layer theme {\n :root, :host {\n --font-sans: \"Open Sans\", sans-serif;\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n \"Courier New\", monospace;\n --color-red-50: oklch(97.1% .013 17.38);\n --color-red-100: oklch(93.6% .032 17.717);\n --color-red-200: oklch(88.5% .062 18.334);\n --color-red-300: oklch(80.8% .114 19.571);\n --color-red-800: oklch(44.4% .177 26.899);\n --color-yellow-50: oklch(98.7% .026 102.212);\n --color-yellow-200: oklch(94.5% .129 101.54);\n --color-yellow-600: oklch(68.1% .162 75.834);\n --color-yellow-800: oklch(47.6% .114 61.907);\n --color-green-50: oklch(98.2% .018 155.826);\n --color-green-200: oklch(92.5% .084 155.995);\n --color-green-600: oklch(62.7% .194 149.214);\n --color-green-800: oklch(44.8% .119 151.328);\n --color-sky-50: oklch(97.7% .013 236.62);\n --color-sky-100: oklch(95.1% .026 236.824);\n --color-blue-50: oklch(97% .014 254.604);\n --color-blue-100: oklch(93.2% .032 255.585);\n --color-blue-200: oklch(88.2% .059 254.128);\n --color-blue-500: oklch(62.3% .214 259.815);\n --color-blue-600: oklch(54.6% .245 262.881);\n --color-blue-800: oklch(42.4% .199 265.638);\n --color-gray-50: oklch(98.5% .002 247.839);\n --color-gray-100: oklch(96.7% .003 264.542);\n --color-gray-200: oklch(92.8% .006 264.531);\n --color-gray-300: oklch(87.2% .01 258.338);\n --color-gray-400: oklch(70.7% .022 261.325);\n --color-gray-500: oklch(55.1% .027 264.364);\n --color-gray-600: oklch(44.6% .03 256.802);\n --color-gray-700: oklch(37.3% .034 259.733);\n --color-black: #000;\n --color-white: #fff;\n --spacing: .25rem;\n --text-xs: .625rem;\n --text-xs--line-height: .875rem;\n --text-sm: .75rem;\n --text-sm--line-height: 1rem;\n --text-base: .875rem;\n --text-base--line-height: 1.25rem;\n --text-lg: 1.125rem;\n --text-lg--line-height: 1.75rem;\n --text-xl: 1.25rem;\n --text-xl--line-height: 1.75rem;\n --text-3xl: 1.875rem;\n --text-5xl: 3rem;\n --font-weight-light: 300;\n --font-weight-normal: 400;\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --font-weight-black: 900;\n --tracking-wider: .05em;\n --leading-tight: 1.25;\n --leading-snug: 1.375;\n --leading-relaxed: 1.625;\n --radius-sm: .25rem;\n --radius-md: .375rem;\n --radius-lg: .5rem;\n --radius-xl: .75rem;\n --radius-2xl: 1rem;\n --ease-out: cubic-bezier(0, 0, .2, 1);\n --ease-in-out: cubic-bezier(.4, 0, .2, 1);\n --default-transition-duration: .15s;\n --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n --default-font-family: var(--font-sans);\n --default-mono-font-family: var(--font-mono);\n --text-md: 1rem;\n --text-md--line-height: 1.5rem;\n --spacing-30: 7.5rem;\n --spacing-38: 9.5rem;\n --spacing-43: 10.75rem;\n --spacing-50: 12.5rem;\n --spacing-75: 18.75rem;\n --spacing-117: 29.25rem;\n --spacing-120: 30rem;\n --spacing-150: 37.5rem;\n }\n}\n\n@layer base {\n *, :after, :before, ::backdrop {\n box-sizing: border-box;\n border: 0 solid;\n margin: 0;\n padding: 0;\n }\n\n ::file-selector-button {\n box-sizing: border-box;\n border: 0 solid;\n margin: 0;\n padding: 0;\n }\n\n html, :host {\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n line-height: 1.5;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n -webkit-text-decoration: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n\n b, strong {\n font-weight: bolder;\n }\n\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n\n small {\n font-size: 80%;\n }\n\n sub, sup {\n vertical-align: baseline;\n font-size: 75%;\n line-height: 0;\n position: relative;\n }\n\n sub {\n bottom: -.25em;\n }\n\n sup {\n top: -.5em;\n }\n\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n\n :-moz-focusring {\n outline: auto;\n }\n\n progress {\n vertical-align: baseline;\n }\n\n summary {\n display: list-item;\n }\n\n ol, ul, menu {\n list-style: none;\n }\n\n img, svg, video, canvas, audio, iframe, embed, object {\n vertical-align: middle;\n display: block;\n }\n\n img, video {\n max-width: 100%;\n height: auto;\n }\n\n button, input, select, optgroup, textarea {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n opacity: 1;\n background-color: #0000;\n border-radius: 0;\n }\n\n ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n opacity: 1;\n background-color: #0000;\n border-radius: 0;\n }\n\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n\n ::placeholder {\n opacity: 1;\n }\n\n @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentColor;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n ::placeholder {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n\n textarea {\n resize: vertical;\n }\n\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n\n ::-webkit-datetime-edit {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-year-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-month-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-day-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-hour-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-minute-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-second-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-millisecond-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n\n ::-webkit-calendar-picker-indicator {\n line-height: 1;\n }\n\n :-moz-ui-invalid {\n box-shadow: none;\n }\n\n button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]) {\n appearance: button;\n }\n\n ::file-selector-button {\n appearance: button;\n }\n\n ::-webkit-inner-spin-button {\n height: auto;\n }\n\n ::-webkit-outer-spin-button {\n height: auto;\n }\n\n [hidden]:where(:not([hidden=\"until-found\"])) {\n display: none !important;\n }\n}\n\n@layer components;\n\n@layer utilities {\n .pointer-events-auto {\n pointer-events: auto;\n }\n\n .pointer-events-none {\n pointer-events: none;\n }\n\n .visible {\n visibility: visible;\n }\n\n .absolute {\n position: absolute;\n }\n\n .fixed {\n position: fixed;\n }\n\n .relative {\n position: relative;\n }\n\n .static {\n position: static;\n }\n\n .top-0 {\n top: 0;\n }\n\n .top-1 {\n top: var(--spacing);\n }\n\n .top-1\\/2 {\n top: 50%;\n }\n\n .top-3 {\n top: calc(var(--spacing) * 3);\n }\n\n .top-25 {\n top: calc(var(--spacing) * 25);\n }\n\n .top-\\[-7px\\] {\n top: -7px;\n }\n\n .top-full {\n top: 100%;\n }\n\n .right-0 {\n right: 0;\n }\n\n .right-0\\.5 {\n right: calc(var(--spacing) * .5);\n }\n\n .right-1 {\n right: var(--spacing);\n }\n\n .right-1\\.5 {\n right: calc(var(--spacing) * 1.5);\n }\n\n .right-3 {\n right: calc(var(--spacing) * 3);\n }\n\n .right-\\[calc\\(100\\%\\+10px\\)\\] {\n right: calc(100% + 10px);\n }\n\n .bottom-0 {\n bottom: 0;\n }\n\n .bottom-0\\.5 {\n bottom: calc(var(--spacing) * .5);\n }\n\n .bottom-full {\n bottom: 100%;\n }\n\n .left-0 {\n left: 0;\n }\n\n .left-1\\/2 {\n left: 50%;\n }\n\n .left-\\[-7px\\] {\n left: -7px;\n }\n\n .left-\\[calc\\(100\\%\\+10px\\)\\] {\n left: calc(100% + 10px);\n }\n\n .left-full {\n left: 100%;\n }\n\n .z-5 {\n z-index: 5;\n }\n\n .z-10 {\n z-index: 10;\n }\n\n .z-50 {\n z-index: 50;\n }\n\n .z-2000 {\n z-index: 2000;\n }\n\n .z-2001 {\n z-index: 2001;\n }\n\n .z-9999 {\n z-index: 9999;\n }\n\n .row-1 {\n grid-row: 1;\n }\n\n .container {\n width: 100%;\n }\n\n @media (min-width: 40rem) {\n .container {\n max-width: 40rem;\n }\n }\n\n @media (min-width: 48rem) {\n .container {\n max-width: 48rem;\n }\n }\n\n @media (min-width: 64rem) {\n .container {\n max-width: 64rem;\n }\n }\n\n @media (min-width: 80rem) {\n .container {\n max-width: 80rem;\n }\n }\n\n @media (min-width: 96rem) {\n .container {\n max-width: 96rem;\n }\n }\n\n .m-0 {\n margin: 0;\n }\n\n .mx-2 {\n margin-inline: calc(var(--spacing) * 2);\n }\n\n .mx-6 {\n margin-inline: calc(var(--spacing) * 6);\n }\n\n .mx-12 {\n margin-inline: calc(var(--spacing) * 12);\n }\n\n .mx-auto {\n margin-inline: auto;\n }\n\n .my-0\\.5 {\n margin-block: calc(var(--spacing) * .5);\n }\n\n .my-1\\.5 {\n margin-block: calc(var(--spacing) * 1.5);\n }\n\n .my-2 {\n margin-block: calc(var(--spacing) * 2);\n }\n\n .my-4 {\n margin-block: calc(var(--spacing) * 4);\n }\n\n .ms-auto {\n margin-inline-start: auto;\n }\n\n .mt-0 {\n margin-top: 0;\n }\n\n .mt-1 {\n margin-top: var(--spacing);\n }\n\n .mt-1\\.5 {\n margin-top: calc(var(--spacing) * 1.5);\n }\n\n .mt-1\\.75 {\n margin-top: calc(var(--spacing) * 1.75);\n }\n\n .mt-2 {\n margin-top: calc(var(--spacing) * 2);\n }\n\n .mt-2\\.25 {\n margin-top: calc(var(--spacing) * 2.25);\n }\n\n .mt-3 {\n margin-top: calc(var(--spacing) * 3);\n }\n\n .mt-4 {\n margin-top: calc(var(--spacing) * 4);\n }\n\n .mt-4\\.5 {\n margin-top: calc(var(--spacing) * 4.5);\n }\n\n .mt-5 {\n margin-top: calc(var(--spacing) * 5);\n }\n\n .mt-6 {\n margin-top: calc(var(--spacing) * 6);\n }\n\n .mt-6\\.75 {\n margin-top: calc(var(--spacing) * 6.75);\n }\n\n .mt-8 {\n margin-top: calc(var(--spacing) * 8);\n }\n\n .mr-0\\.5 {\n margin-right: calc(var(--spacing) * .5);\n }\n\n .mr-1 {\n margin-right: var(--spacing);\n }\n\n .mr-2 {\n margin-right: calc(var(--spacing) * 2);\n }\n\n .mr-4 {\n margin-right: calc(var(--spacing) * 4);\n }\n\n .mb-1 {\n margin-bottom: var(--spacing);\n }\n\n .mb-1\\.5 {\n margin-bottom: calc(var(--spacing) * 1.5);\n }\n\n .mb-2 {\n margin-bottom: calc(var(--spacing) * 2);\n }\n\n .mb-3 {\n margin-bottom: calc(var(--spacing) * 3);\n }\n\n .mb-4 {\n margin-bottom: calc(var(--spacing) * 4);\n }\n\n .mb-6 {\n margin-bottom: calc(var(--spacing) * 6);\n }\n\n .mb-6\\.5 {\n margin-bottom: calc(var(--spacing) * 6.5);\n }\n\n .mb-8 {\n margin-bottom: calc(var(--spacing) * 8);\n }\n\n .ml-1 {\n margin-left: var(--spacing);\n }\n\n .ml-2 {\n margin-left: calc(var(--spacing) * 2);\n }\n\n .ml-4 {\n margin-left: calc(var(--spacing) * 4);\n }\n\n .ml-12 {\n margin-left: calc(var(--spacing) * 12);\n }\n\n .ml-auto {\n margin-left: auto;\n }\n\n .box-border {\n box-sizing: border-box;\n }\n\n .box-content {\n box-sizing: content-box;\n }\n\n .line-clamp-1 {\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n overflow: hidden;\n }\n\n .line-clamp-2 {\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n overflow: hidden;\n }\n\n .line-clamp-11 {\n -webkit-line-clamp: 11;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n overflow: hidden;\n }\n\n .\\!hidden {\n display: none !important;\n }\n\n .block {\n display: block;\n }\n\n .contents {\n display: contents;\n }\n\n .flex {\n display: flex;\n }\n\n .grid {\n display: grid;\n }\n\n .hidden {\n display: none;\n }\n\n .inline {\n display: inline;\n }\n\n .inline-block {\n display: inline-block;\n }\n\n .inline-flex {\n display: inline-flex;\n }\n\n .table {\n display: table;\n }\n\n .aspect-square {\n aspect-ratio: 1;\n }\n\n .h-2 {\n height: calc(var(--spacing) * 2);\n }\n\n .h-2\\.25 {\n height: calc(var(--spacing) * 2.25);\n }\n\n .h-2\\.75 {\n height: calc(var(--spacing) * 2.75);\n }\n\n .h-3 {\n height: calc(var(--spacing) * 3);\n }\n\n .h-3\\.5 {\n height: calc(var(--spacing) * 3.5);\n }\n\n .h-4 {\n height: calc(var(--spacing) * 4);\n }\n\n .h-4\\.5 {\n height: calc(var(--spacing) * 4.5);\n }\n\n .h-4\\.25 {\n height: calc(var(--spacing) * 4.25);\n }\n\n .h-4\\.75 {\n height: calc(var(--spacing) * 4.75);\n }\n\n .h-5 {\n height: calc(var(--spacing) * 5);\n }\n\n .h-5\\.5 {\n height: calc(var(--spacing) * 5.5);\n }\n\n .h-5\\.25 {\n height: calc(var(--spacing) * 5.25);\n }\n\n .h-6 {\n height: calc(var(--spacing) * 6);\n }\n\n .h-7 {\n height: calc(var(--spacing) * 7);\n }\n\n .h-7\\.5 {\n height: calc(var(--spacing) * 7.5);\n }\n\n .h-7\\.25 {\n height: calc(var(--spacing) * 7.25);\n }\n\n .h-8 {\n height: calc(var(--spacing) * 8);\n }\n\n .h-8\\.5 {\n height: calc(var(--spacing) * 8.5);\n }\n\n .h-8\\.75 {\n height: calc(var(--spacing) * 8.75);\n }\n\n .h-9 {\n height: calc(var(--spacing) * 9);\n }\n\n .h-9\\.5 {\n height: calc(var(--spacing) * 9.5);\n }\n\n .h-9\\.75 {\n height: calc(var(--spacing) * 9.75);\n }\n\n .h-10 {\n height: calc(var(--spacing) * 10);\n }\n\n .h-10\\.5 {\n height: calc(var(--spacing) * 10.5);\n }\n\n .h-10\\.25 {\n height: calc(var(--spacing) * 10.25);\n }\n\n .h-11 {\n height: calc(var(--spacing) * 11);\n }\n\n .h-11\\.5 {\n height: calc(var(--spacing) * 11.5);\n }\n\n .h-11\\.25 {\n height: calc(var(--spacing) * 11.25);\n }\n\n .h-12 {\n height: calc(var(--spacing) * 12);\n }\n\n .h-12\\.5 {\n height: calc(var(--spacing) * 12.5);\n }\n\n .h-12\\.25 {\n height: calc(var(--spacing) * 12.25);\n }\n\n .h-12\\.75 {\n height: calc(var(--spacing) * 12.75);\n }\n\n .h-14 {\n height: calc(var(--spacing) * 14);\n }\n\n .h-14\\.25 {\n height: calc(var(--spacing) * 14.25);\n }\n\n .h-16 {\n height: calc(var(--spacing) * 16);\n }\n\n .h-17\\.75 {\n height: calc(var(--spacing) * 17.75);\n }\n\n .h-19\\.75 {\n height: calc(var(--spacing) * 19.75);\n }\n\n .h-20 {\n height: calc(var(--spacing) * 20);\n }\n\n .h-20\\.75 {\n height: calc(var(--spacing) * 20.75);\n }\n\n .h-21\\.25 {\n height: calc(var(--spacing) * 21.25);\n }\n\n .h-22\\.75 {\n height: calc(var(--spacing) * 22.75);\n }\n\n .h-24\\.75 {\n height: calc(var(--spacing) * 24.75);\n }\n\n .h-32\\.75 {\n height: calc(var(--spacing) * 32.75);\n }\n\n .h-49\\.5 {\n height: calc(var(--spacing) * 49.5);\n }\n\n .h-52\\.75 {\n height: calc(var(--spacing) * 52.75);\n }\n\n .h-57\\.5 {\n height: calc(var(--spacing) * 57.5);\n }\n\n .h-77\\.25 {\n height: calc(var(--spacing) * 77.25);\n }\n\n .h-79 {\n height: calc(var(--spacing) * 79);\n }\n\n .h-83\\.25 {\n height: calc(var(--spacing) * 83.25);\n }\n\n .h-89\\.25 {\n height: calc(var(--spacing) * 89.25);\n }\n\n .h-112 {\n height: calc(var(--spacing) * 112);\n }\n\n .h-\\[8\\.26375rem\\] {\n height: 8.26375rem;\n }\n\n .h-auto {\n height: auto;\n }\n\n .h-fit {\n height: fit-content;\n }\n\n .h-full {\n height: 100%;\n }\n\n .h-px {\n height: 1px;\n }\n\n .h-screen {\n height: 100vh;\n }\n\n .max-h-10 {\n max-height: calc(var(--spacing) * 10);\n }\n\n .max-h-40 {\n max-height: calc(var(--spacing) * 40);\n }\n\n .max-h-48 {\n max-height: calc(var(--spacing) * 48);\n }\n\n .max-h-75 {\n max-height: var(--spacing-75);\n }\n\n .max-h-\\[40vh\\] {\n max-height: 40vh;\n }\n\n .max-h-full {\n max-height: 100%;\n }\n\n .min-h-0 {\n min-height: 0;\n }\n\n .min-h-5 {\n min-height: calc(var(--spacing) * 5);\n }\n\n .min-h-9 {\n min-height: calc(var(--spacing) * 9);\n }\n\n .min-h-10 {\n min-height: calc(var(--spacing) * 10);\n }\n\n .min-h-12 {\n min-height: calc(var(--spacing) * 12);\n }\n\n .min-h-35 {\n min-height: calc(var(--spacing) * 35);\n }\n\n .min-h-102\\.5 {\n min-height: calc(var(--spacing) * 102.5);\n }\n\n .min-h-107\\.5 {\n min-height: calc(var(--spacing) * 107.5);\n }\n\n .min-h-113\\.25 {\n min-height: calc(var(--spacing) * 113.25);\n }\n\n .w-1\\/3 {\n width: 33.3333%;\n }\n\n .w-2 {\n width: calc(var(--spacing) * 2);\n }\n\n .w-2\\.5 {\n width: calc(var(--spacing) * 2.5);\n }\n\n .w-3\\.5 {\n width: calc(var(--spacing) * 3.5);\n }\n\n .w-4 {\n width: calc(var(--spacing) * 4);\n }\n\n .w-4\\.5 {\n width: calc(var(--spacing) * 4.5);\n }\n\n .w-4\\.25 {\n width: calc(var(--spacing) * 4.25);\n }\n\n .w-5 {\n width: calc(var(--spacing) * 5);\n }\n\n .w-6 {\n width: calc(var(--spacing) * 6);\n }\n\n .w-7 {\n width: calc(var(--spacing) * 7);\n }\n\n .w-8 {\n width: calc(var(--spacing) * 8);\n }\n\n .w-9 {\n width: calc(var(--spacing) * 9);\n }\n\n .w-9\\.5 {\n width: calc(var(--spacing) * 9.5);\n }\n\n .w-10 {\n width: calc(var(--spacing) * 10);\n }\n\n .w-10\\.5 {\n width: calc(var(--spacing) * 10.5);\n }\n\n .w-11\\.5 {\n width: calc(var(--spacing) * 11.5);\n }\n\n .w-11\\.25 {\n width: calc(var(--spacing) * 11.25);\n }\n\n .w-12 {\n width: calc(var(--spacing) * 12);\n }\n\n .w-12\\.5 {\n width: calc(var(--spacing) * 12.5);\n }\n\n .w-12\\.75 {\n width: calc(var(--spacing) * 12.75);\n }\n\n .w-15\\.25 {\n width: calc(var(--spacing) * 15.25);\n }\n\n .w-16 {\n width: calc(var(--spacing) * 16);\n }\n\n .w-16\\.5 {\n width: calc(var(--spacing) * 16.5);\n }\n\n .w-17 {\n width: calc(var(--spacing) * 17);\n }\n\n .w-18\\.5 {\n width: calc(var(--spacing) * 18.5);\n }\n\n .w-18\\.75 {\n width: calc(var(--spacing) * 18.75);\n }\n\n .w-20 {\n width: calc(var(--spacing) * 20);\n }\n\n .w-20\\.5 {\n width: calc(var(--spacing) * 20.5);\n }\n\n .w-21\\.5 {\n width: calc(var(--spacing) * 21.5);\n }\n\n .w-24 {\n width: calc(var(--spacing) * 24);\n }\n\n .w-24\\.75 {\n width: calc(var(--spacing) * 24.75);\n }\n\n .w-25\\.5 {\n width: calc(var(--spacing) * 25.5);\n }\n\n .w-25\\.25 {\n width: calc(var(--spacing) * 25.25);\n }\n\n .w-26\\.25 {\n width: calc(var(--spacing) * 26.25);\n }\n\n .w-27 {\n width: calc(var(--spacing) * 27);\n }\n\n .w-27\\.5 {\n width: calc(var(--spacing) * 27.5);\n }\n\n .w-30 {\n width: var(--spacing-30);\n }\n\n .w-30\\.75 {\n width: calc(var(--spacing) * 30.75);\n }\n\n .w-32 {\n width: calc(var(--spacing) * 32);\n }\n\n .w-33\\.25 {\n width: calc(var(--spacing) * 33.25);\n }\n\n .w-34\\.25 {\n width: calc(var(--spacing) * 34.25);\n }\n\n .w-35 {\n width: calc(var(--spacing) * 35);\n }\n\n .w-36 {\n width: calc(var(--spacing) * 36);\n }\n\n .w-38\\.5 {\n width: calc(var(--spacing) * 38.5);\n }\n\n .w-39\\.5 {\n width: calc(var(--spacing) * 39.5);\n }\n\n .w-40\\.25 {\n width: calc(var(--spacing) * 40.25);\n }\n\n .w-41 {\n width: calc(var(--spacing) * 41);\n }\n\n .w-41\\.75 {\n width: calc(var(--spacing) * 41.75);\n }\n\n .w-45 {\n width: calc(var(--spacing) * 45);\n }\n\n .w-47\\.75 {\n width: calc(var(--spacing) * 47.75);\n }\n\n .w-48 {\n width: calc(var(--spacing) * 48);\n }\n\n .w-48\\.5 {\n width: calc(var(--spacing) * 48.5);\n }\n\n .w-53 {\n width: calc(var(--spacing) * 53);\n }\n\n .w-56\\.5 {\n width: calc(var(--spacing) * 56.5);\n }\n\n .w-57\\.5 {\n width: calc(var(--spacing) * 57.5);\n }\n\n .w-60\\.5 {\n width: calc(var(--spacing) * 60.5);\n }\n\n .w-62\\.5 {\n width: calc(var(--spacing) * 62.5);\n }\n\n .w-63\\.75 {\n width: calc(var(--spacing) * 63.75);\n }\n\n .w-66 {\n width: calc(var(--spacing) * 66);\n }\n\n .w-68 {\n width: calc(var(--spacing) * 68);\n }\n\n .w-70\\.5 {\n width: calc(var(--spacing) * 70.5);\n }\n\n .w-71 {\n width: calc(var(--spacing) * 71);\n }\n\n .w-74\\.75 {\n width: calc(var(--spacing) * 74.75);\n }\n\n .w-87 {\n width: calc(var(--spacing) * 87);\n }\n\n .w-88\\.5 {\n width: calc(var(--spacing) * 88.5);\n }\n\n .w-91 {\n width: calc(var(--spacing) * 91);\n }\n\n .w-95 {\n width: calc(var(--spacing) * 95);\n }\n\n .w-99\\.75 {\n width: calc(var(--spacing) * 99.75);\n }\n\n .w-100\\.5 {\n width: calc(var(--spacing) * 100.5);\n }\n\n .w-102 {\n width: calc(var(--spacing) * 102);\n }\n\n .w-117 {\n width: var(--spacing-117);\n }\n\n .w-120 {\n width: var(--spacing-120);\n }\n\n .w-120\\.75 {\n width: calc(var(--spacing) * 120.75);\n }\n\n .w-121 {\n width: calc(var(--spacing) * 121);\n }\n\n .w-127\\.75 {\n width: calc(var(--spacing) * 127.75);\n }\n\n .w-130\\.25 {\n width: calc(var(--spacing) * 130.25);\n }\n\n .w-131 {\n width: calc(var(--spacing) * 131);\n }\n\n .w-139 {\n width: calc(var(--spacing) * 139);\n }\n\n .w-140\\.75 {\n width: calc(var(--spacing) * 140.75);\n }\n\n .w-144\\.75 {\n width: calc(var(--spacing) * 144.75);\n }\n\n .w-148\\.75 {\n width: calc(var(--spacing) * 148.75);\n }\n\n .w-186\\.5 {\n width: calc(var(--spacing) * 186.5);\n }\n\n .w-186\\.25 {\n width: calc(var(--spacing) * 186.25);\n }\n\n .w-194\\.25 {\n width: calc(var(--spacing) * 194.25);\n }\n\n .w-198\\.25 {\n width: calc(var(--spacing) * 198.25);\n }\n\n .w-270 {\n width: calc(var(--spacing) * 270);\n }\n\n .w-282 {\n width: calc(var(--spacing) * 282);\n }\n\n .w-293\\.5 {\n width: calc(var(--spacing) * 293.5);\n }\n\n .w-294 {\n width: calc(var(--spacing) * 294);\n }\n\n .w-\\[10\\.5rem\\] {\n width: 10.5rem;\n }\n\n .w-\\[calc\\(100\\%-10px\\)\\] {\n width: calc(100% - 10px);\n }\n\n .w-auto {\n width: auto;\n }\n\n .w-full {\n width: 100%;\n }\n\n .w-px {\n width: 1px;\n }\n\n .max-w-36 {\n max-width: calc(var(--spacing) * 36);\n }\n\n .max-w-38 {\n max-width: var(--spacing-38);\n }\n\n .max-w-43 {\n max-width: var(--spacing-43);\n }\n\n .max-w-44 {\n max-width: calc(var(--spacing) * 44);\n }\n\n .max-w-51\\.5 {\n max-width: calc(var(--spacing) * 51.5);\n }\n\n .max-w-65 {\n max-width: calc(var(--spacing) * 65);\n }\n\n .max-w-194\\.25 {\n max-width: calc(var(--spacing) * 194.25);\n }\n\n .max-w-\\[23\\.75rem\\] {\n max-width: 23.75rem;\n }\n\n .max-w-full {\n max-width: 100%;\n }\n\n .min-w-0 {\n min-width: 0;\n }\n\n .min-w-4 {\n min-width: calc(var(--spacing) * 4);\n }\n\n .min-w-10 {\n min-width: calc(var(--spacing) * 10);\n }\n\n .min-w-20 {\n min-width: calc(var(--spacing) * 20);\n }\n\n .min-w-30 {\n min-width: var(--spacing-30);\n }\n\n .min-w-32 {\n min-width: calc(var(--spacing) * 32);\n }\n\n .min-w-36 {\n min-width: calc(var(--spacing) * 36);\n }\n\n .min-w-44 {\n min-width: calc(var(--spacing) * 44);\n }\n\n .min-w-50 {\n min-width: var(--spacing-50);\n }\n\n .min-w-55 {\n min-width: calc(var(--spacing) * 55);\n }\n\n .min-w-56 {\n min-width: calc(var(--spacing) * 56);\n }\n\n .min-w-160 {\n min-width: calc(var(--spacing) * 160);\n }\n\n .min-w-\\[8\\.2rem\\] {\n min-width: 8.2rem;\n }\n\n .min-w-fit {\n min-width: fit-content;\n }\n\n .min-w-full {\n min-width: 100%;\n }\n\n .flex-1 {\n flex: 1;\n }\n\n .flex-shrink {\n flex-shrink: 1;\n }\n\n .shrink-0 {\n flex-shrink: 0;\n }\n\n .border-collapse {\n border-collapse: collapse;\n }\n\n .-translate-x-1 {\n --tw-translate-x: calc(var(--spacing) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .-translate-x-1\\/2 {\n --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .translate-x-1 {\n --tw-translate-x: var(--spacing);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .-translate-y-1\\/2 {\n --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .scale-\\[1\\.02\\] {\n scale: 1.02;\n }\n\n .rotate-180 {\n rotate: 180deg;\n }\n\n .transform {\n transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );\n }\n\n .cursor-default {\n cursor: default;\n }\n\n .cursor-grab {\n cursor: grab;\n }\n\n .cursor-not-allowed {\n cursor: not-allowed;\n }\n\n .cursor-pointer {\n cursor: pointer;\n }\n\n .cursor-text {\n cursor: text;\n }\n\n .touch-none {\n touch-action: none;\n }\n\n .resize {\n resize: both;\n }\n\n .appearance-none {\n appearance: none;\n }\n\n .grid-cols-\\[7\\.5rem_7\\.5rem_7\\.5rem\\] {\n grid-template-columns: 7.5rem 7.5rem 7.5rem;\n }\n\n .grid-cols-\\[auto_auto_1fr_auto\\] {\n grid-template-columns: auto auto 1fr auto;\n }\n\n .flex-col {\n flex-direction: column;\n }\n\n .flex-row {\n flex-direction: row;\n }\n\n .flex-wrap {\n flex-wrap: wrap;\n }\n\n .items-baseline {\n align-items: baseline;\n }\n\n .items-center {\n align-items: center;\n }\n\n .items-end {\n align-items: flex-end;\n }\n\n .items-start {\n align-items: flex-start;\n }\n\n .justify-between {\n justify-content: space-between;\n }\n\n .justify-center {\n justify-content: center;\n }\n\n .justify-end {\n justify-content: flex-end;\n }\n\n .gap-0 {\n gap: 0;\n }\n\n .gap-0\\.5 {\n gap: calc(var(--spacing) * .5);\n }\n\n .gap-1 {\n gap: var(--spacing);\n }\n\n .gap-1\\.5 {\n gap: calc(var(--spacing) * 1.5);\n }\n\n .gap-1\\.25 {\n gap: calc(var(--spacing) * 1.25);\n }\n\n .gap-2 {\n gap: calc(var(--spacing) * 2);\n }\n\n .gap-2\\.5 {\n gap: calc(var(--spacing) * 2.5);\n }\n\n .gap-2\\.25 {\n gap: calc(var(--spacing) * 2.25);\n }\n\n .gap-3 {\n gap: calc(var(--spacing) * 3);\n }\n\n .gap-4 {\n gap: calc(var(--spacing) * 4);\n }\n\n .gap-5 {\n gap: calc(var(--spacing) * 5);\n }\n\n .gap-6 {\n gap: calc(var(--spacing) * 6);\n }\n\n .gap-8 {\n gap: calc(var(--spacing) * 8);\n }\n\n .gap-8\\.75 {\n gap: calc(var(--spacing) * 8.75);\n }\n\n .gap-12 {\n gap: calc(var(--spacing) * 12);\n }\n\n .gap-19 {\n gap: calc(var(--spacing) * 19);\n }\n\n .gap-\\[2\\%\\] {\n gap: 2%;\n }\n\n :where(.space-y-1 > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));\n margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));\n }\n\n :where(.space-y-2 > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));\n }\n\n :where(.space-y-3 > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));\n }\n\n .gap-x-1 {\n column-gap: var(--spacing);\n }\n\n .gap-x-2 {\n column-gap: calc(var(--spacing) * 2);\n }\n\n .gap-x-4 {\n column-gap: calc(var(--spacing) * 4);\n }\n\n .gap-x-6 {\n column-gap: calc(var(--spacing) * 6);\n }\n\n .gap-y-0\\.75 {\n row-gap: calc(var(--spacing) * .75);\n }\n\n .gap-y-1 {\n row-gap: var(--spacing);\n }\n\n .self-end {\n align-self: flex-end;\n }\n\n .self-start {\n align-self: flex-start;\n }\n\n .truncate {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n }\n\n .overflow-auto {\n overflow: auto;\n }\n\n .overflow-hidden {\n overflow: hidden;\n }\n\n .overflow-visible {\n overflow: visible;\n }\n\n .overflow-x-auto {\n overflow-x: auto;\n }\n\n .overflow-x-hidden {\n overflow-x: hidden;\n }\n\n .overflow-y-auto {\n overflow-y: auto;\n }\n\n .overflow-y-hidden {\n overflow-y: hidden;\n }\n\n .rounded {\n border-radius: .25rem;\n }\n\n .rounded-2xl {\n border-radius: var(--radius-2xl);\n }\n\n .rounded-\\[0\\.375rem\\] {\n border-radius: .375rem;\n }\n\n .rounded-\\[0\\.3125rem\\] {\n border-radius: .3125rem;\n }\n\n .rounded-full {\n border-radius: 3.40282e38px;\n }\n\n .rounded-lg {\n border-radius: var(--radius-lg);\n }\n\n .rounded-md {\n border-radius: var(--radius-md);\n }\n\n .rounded-none {\n border-radius: 0;\n }\n\n .rounded-none\\! {\n border-radius: 0 !important;\n }\n\n .rounded-sm {\n border-radius: var(--radius-sm);\n }\n\n .rounded-xl {\n border-radius: var(--radius-xl);\n }\n\n .rounded-t-lg {\n border-top-left-radius: var(--radius-lg);\n border-top-right-radius: var(--radius-lg);\n }\n\n .rounded-t-md {\n border-top-left-radius: var(--radius-md);\n border-top-right-radius: var(--radius-md);\n }\n\n .rounded-t-xl {\n border-top-left-radius: var(--radius-xl);\n border-top-right-radius: var(--radius-xl);\n }\n\n .rounded-l-xl {\n border-top-left-radius: var(--radius-xl);\n border-bottom-left-radius: var(--radius-xl);\n }\n\n .rounded-tl-xl {\n border-top-left-radius: var(--radius-xl);\n }\n\n .rounded-r-md {\n border-top-right-radius: var(--radius-md);\n border-bottom-right-radius: var(--radius-md);\n }\n\n .rounded-tr-xl {\n border-top-right-radius: var(--radius-xl);\n }\n\n .rounded-b-lg {\n border-bottom-right-radius: var(--radius-lg);\n border-bottom-left-radius: var(--radius-lg);\n }\n\n .rounded-b-md {\n border-bottom-right-radius: var(--radius-md);\n border-bottom-left-radius: var(--radius-md);\n }\n\n .rounded-b-xl {\n border-bottom-right-radius: var(--radius-xl);\n border-bottom-left-radius: var(--radius-xl);\n }\n\n .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n\n .border-0 {\n border-style: var(--tw-border-style);\n border-width: 0;\n }\n\n .border-2 {\n border-style: var(--tw-border-style);\n border-width: 2px;\n }\n\n .border-x {\n border-inline-style: var(--tw-border-style);\n border-inline-width: 1px;\n }\n\n .border-t {\n border-top-style: var(--tw-border-style);\n border-top-width: 1px;\n }\n\n .border-t-0 {\n border-top-style: var(--tw-border-style);\n border-top-width: 0;\n }\n\n .border-t-4 {\n border-top-style: var(--tw-border-style);\n border-top-width: 4px;\n }\n\n .border-r {\n border-right-style: var(--tw-border-style);\n border-right-width: 1px;\n }\n\n .border-r-0 {\n border-right-style: var(--tw-border-style);\n border-right-width: 0;\n }\n\n .border-b {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n }\n\n .border-b-0 {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 0;\n }\n\n .border-b-2 {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 2px;\n }\n\n .border-l {\n border-left-style: var(--tw-border-style);\n border-left-width: 1px;\n }\n\n .border-l-0 {\n border-left-style: var(--tw-border-style);\n border-left-width: 0;\n }\n\n .border-l-4 {\n border-left-style: var(--tw-border-style);\n border-left-width: 4px;\n }\n\n .border-dashed {\n --tw-border-style: dashed;\n border-style: dashed;\n }\n\n .border-none {\n --tw-border-style: none;\n border-style: none;\n }\n\n .border-solid {\n --tw-border-style: solid;\n border-style: solid;\n }\n\n .border-\\(--axebow-border-gray\\) {\n border-color: var(--axebow-border-gray);\n }\n\n .border-\\(--axebow-gray\\) {\n border-color: var(--axebow-gray);\n }\n\n .border-\\(--axebow-light-gray\\) {\n border-color: var(--axebow-light-gray);\n }\n\n .border-\\(--axebow-premium-text\\) {\n border-color: var(--axebow-premium-text);\n }\n\n .border-\\(--axebow-primary\\) {\n border-color: var(--axebow-primary);\n }\n\n .border-\\(--axebow-secondary\\) {\n border-color: var(--axebow-secondary);\n }\n\n .border-\\(--axebow-table-border\\) {\n border-color: var(--axebow-table-border);\n }\n\n .border-\\(--axebow-table-header-border\\) {\n border-color: var(--axebow-table-header-border);\n }\n\n .border-\\(--axebow-tertiary\\) {\n border-color: var(--axebow-tertiary);\n }\n\n .border-\\[\\#344966\\] {\n border-color: #344966;\n }\n\n .border-\\[\\#DBDDE4\\] {\n border-color: #dbdde4;\n }\n\n .border-\\[var\\(--axebow-error\\)\\] {\n border-color: var(--axebow-error);\n }\n\n .border-\\[var\\(--axebow-gray\\)\\] {\n border-color: var(--axebow-gray);\n }\n\n .border-\\[var\\(--axebow-tertiary\\)\\] {\n border-color: var(--axebow-tertiary);\n }\n\n .border-black\\/10 {\n border-color: #0000001a;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .border-black\\/10 {\n border-color: color-mix(in oklab, var(--color-black) 10%, transparent);\n }\n }\n\n .border-blue-200 {\n border-color: var(--color-blue-200);\n }\n\n .border-gray-100 {\n border-color: var(--color-gray-100);\n }\n\n .border-gray-200 {\n border-color: var(--color-gray-200);\n }\n\n .border-gray-300 {\n border-color: var(--color-gray-300);\n }\n\n .border-gray-400 {\n border-color: var(--color-gray-400);\n }\n\n .border-gray-500 {\n border-color: var(--color-gray-500);\n }\n\n .border-green-200 {\n border-color: var(--color-green-200);\n }\n\n .border-red-200 {\n border-color: var(--color-red-200);\n }\n\n .border-transparent {\n border-color: #0000;\n }\n\n .border-white {\n border-color: var(--color-white);\n }\n\n .border-yellow-200 {\n border-color: var(--color-yellow-200);\n }\n\n .bg-\\(--axebow-anti-flash-white\\) {\n background-color: var(--axebow-anti-flash-white);\n }\n\n .bg-\\(--axebow-base\\) {\n background-color: var(--axebow-base);\n }\n\n .bg-\\(--axebow-error\\) {\n background-color: var(--axebow-error);\n }\n\n .bg-\\(--axebow-gray\\) {\n background-color: var(--axebow-gray);\n }\n\n .bg-\\(--axebow-light-gray\\), .bg-\\(--axebow-light-gray\\)\\/80 {\n background-color: var(--axebow-light-gray);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .bg-\\(--axebow-light-gray\\)\\/80 {\n background-color: color-mix(in oklab, var(--axebow-light-gray) 80%, transparent);\n }\n }\n\n .bg-\\(--axebow-primary\\) {\n background-color: var(--axebow-primary);\n }\n\n .bg-\\(--axebow-primary-light\\) {\n background-color: var(--axebow-primary-light);\n }\n\n .bg-\\(--axebow-success\\) {\n background-color: var(--axebow-success);\n }\n\n .bg-\\(--axebow-tertiary\\), .bg-\\(--axebow-tertiary\\)\\/15 {\n background-color: var(--axebow-tertiary);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .bg-\\(--axebow-tertiary\\)\\/15 {\n background-color: color-mix(in oklab, var(--axebow-tertiary) 15%, transparent);\n }\n }\n\n .bg-\\(--axebow-warning\\) {\n background-color: var(--axebow-warning);\n }\n\n .bg-\\(--axebow-white\\) {\n background-color: var(--axebow-white);\n }\n\n .bg-\\[\\#006BFF\\] {\n background-color: #006bff;\n }\n\n .bg-\\[\\#C7DCFA\\] {\n background-color: #c7dcfa;\n }\n\n .bg-\\[\\#F0F1F5\\] {\n background-color: #f0f1f5;\n }\n\n .bg-\\[var\\(--axebow-gray\\)\\] {\n background-color: var(--axebow-gray);\n }\n\n .bg-\\[var\\(--axebow-tertiary\\)\\] {\n background-color: var(--axebow-tertiary);\n }\n\n .bg-blue-50 {\n background-color: var(--color-blue-50);\n }\n\n .bg-gray-50 {\n background-color: var(--color-gray-50);\n }\n\n .bg-gray-50\\/50 {\n background-color: #f9fafb80;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .bg-gray-50\\/50 {\n background-color: color-mix(in oklab, var(--color-gray-50) 50%, transparent);\n }\n }\n\n .bg-gray-100 {\n background-color: var(--color-gray-100);\n }\n\n .bg-gray-200 {\n background-color: var(--color-gray-200);\n }\n\n .bg-gray-300 {\n background-color: var(--color-gray-300);\n }\n\n .bg-green-50 {\n background-color: var(--color-green-50);\n }\n\n .bg-red-50 {\n background-color: var(--color-red-50);\n }\n\n .bg-red-100 {\n background-color: var(--color-red-100);\n }\n\n .bg-sky-50 {\n background-color: var(--color-sky-50);\n }\n\n .bg-sky-100 {\n background-color: var(--color-sky-100);\n }\n\n .bg-transparent {\n background-color: #0000;\n }\n\n .bg-white {\n background-color: var(--color-white);\n }\n\n .bg-yellow-50 {\n background-color: var(--color-yellow-50);\n }\n\n .object-contain {\n object-fit: contain;\n }\n\n .p-0 {\n padding: 0;\n }\n\n .p-1 {\n padding: var(--spacing);\n }\n\n .p-1\\.5 {\n padding: calc(var(--spacing) * 1.5);\n }\n\n .p-2 {\n padding: calc(var(--spacing) * 2);\n }\n\n .p-3 {\n padding: calc(var(--spacing) * 3);\n }\n\n .p-3\\.25 {\n padding: calc(var(--spacing) * 3.25);\n }\n\n .p-4 {\n padding: calc(var(--spacing) * 4);\n }\n\n .p-5 {\n padding: calc(var(--spacing) * 5);\n }\n\n .p-6 {\n padding: calc(var(--spacing) * 6);\n }\n\n .px-0\\.5 {\n padding-inline: calc(var(--spacing) * .5);\n }\n\n .px-1 {\n padding-inline: var(--spacing);\n }\n\n .px-1\\.5 {\n padding-inline: calc(var(--spacing) * 1.5);\n }\n\n .px-2 {\n padding-inline: calc(var(--spacing) * 2);\n }\n\n .px-3 {\n padding-inline: calc(var(--spacing) * 3);\n }\n\n .px-3\\.5 {\n padding-inline: calc(var(--spacing) * 3.5);\n }\n\n .px-4 {\n padding-inline: calc(var(--spacing) * 4);\n }\n\n .px-5 {\n padding-inline: calc(var(--spacing) * 5);\n }\n\n .px-6 {\n padding-inline: calc(var(--spacing) * 6);\n }\n\n .px-8 {\n padding-inline: calc(var(--spacing) * 8);\n }\n\n .py-0\\.5 {\n padding-block: calc(var(--spacing) * .5);\n }\n\n .py-1 {\n padding-block: var(--spacing);\n }\n\n .py-1\\.5 {\n padding-block: calc(var(--spacing) * 1.5);\n }\n\n .py-1\\.25 {\n padding-block: calc(var(--spacing) * 1.25);\n }\n\n .py-2 {\n padding-block: calc(var(--spacing) * 2);\n }\n\n .py-2\\.5 {\n padding-block: calc(var(--spacing) * 2.5);\n }\n\n .py-2\\.75 {\n padding-block: calc(var(--spacing) * 2.75);\n }\n\n .py-3 {\n padding-block: calc(var(--spacing) * 3);\n }\n\n .py-4 {\n padding-block: calc(var(--spacing) * 4);\n }\n\n .py-4\\.75 {\n padding-block: calc(var(--spacing) * 4.75);\n }\n\n .py-8 {\n padding-block: calc(var(--spacing) * 8);\n }\n\n .ps-4 {\n padding-inline-start: calc(var(--spacing) * 4);\n }\n\n .ps-8 {\n padding-inline-start: calc(var(--spacing) * 8);\n }\n\n .pe-4 {\n padding-inline-end: calc(var(--spacing) * 4);\n }\n\n .pt-0\\.5 {\n padding-top: calc(var(--spacing) * .5);\n }\n\n .pt-1 {\n padding-top: var(--spacing);\n }\n\n .pt-2 {\n padding-top: calc(var(--spacing) * 2);\n }\n\n .pt-3 {\n padding-top: calc(var(--spacing) * 3);\n }\n\n .pt-4 {\n padding-top: calc(var(--spacing) * 4);\n }\n\n .pt-6 {\n padding-top: calc(var(--spacing) * 6);\n }\n\n .pt-8 {\n padding-top: calc(var(--spacing) * 8);\n }\n\n .pt-px {\n padding-top: 1px;\n }\n\n .pr-1 {\n padding-right: var(--spacing);\n }\n\n .pr-2 {\n padding-right: calc(var(--spacing) * 2);\n }\n\n .pr-3\\.25 {\n padding-right: calc(var(--spacing) * 3.25);\n }\n\n .pr-4 {\n padding-right: calc(var(--spacing) * 4);\n }\n\n .pr-4\\.5 {\n padding-right: calc(var(--spacing) * 4.5);\n }\n\n .pr-5 {\n padding-right: calc(var(--spacing) * 5);\n }\n\n .pb-0 {\n padding-bottom: 0;\n }\n\n .pb-1 {\n padding-bottom: var(--spacing);\n }\n\n .pb-2 {\n padding-bottom: calc(var(--spacing) * 2);\n }\n\n .pb-3 {\n padding-bottom: calc(var(--spacing) * 3);\n }\n\n .pb-3\\.5 {\n padding-bottom: calc(var(--spacing) * 3.5);\n }\n\n .pb-4 {\n padding-bottom: calc(var(--spacing) * 4);\n }\n\n .pb-6 {\n padding-bottom: calc(var(--spacing) * 6);\n }\n\n .pl-1 {\n padding-left: var(--spacing);\n }\n\n .pl-1\\.5 {\n padding-left: calc(var(--spacing) * 1.5);\n }\n\n .pl-2 {\n padding-left: calc(var(--spacing) * 2);\n }\n\n .pl-4 {\n padding-left: calc(var(--spacing) * 4);\n }\n\n .pl-4\\.25 {\n padding-left: calc(var(--spacing) * 4.25);\n }\n\n .pl-5 {\n padding-left: calc(var(--spacing) * 5);\n }\n\n .pl-6 {\n padding-left: calc(var(--spacing) * 6);\n }\n\n .pl-11\\.75 {\n padding-left: calc(var(--spacing) * 11.75);\n }\n\n .pl-px {\n padding-left: 1px;\n }\n\n .text-center {\n text-align: center;\n }\n\n .text-left {\n text-align: left;\n }\n\n .text-right {\n text-align: right;\n }\n\n .text-start {\n text-align: start;\n }\n\n .align-middle {\n vertical-align: middle;\n }\n\n .font-\\[Material_Symbols_Outlined\\] {\n font-family: Material Symbols Outlined;\n }\n\n .font-\\[inherit\\] {\n font-family: inherit;\n }\n\n .text-base {\n font-size: var(--text-base);\n line-height: var(--tw-leading, var(--text-base--line-height));\n }\n\n .text-lg {\n font-size: var(--text-lg);\n line-height: var(--tw-leading, var(--text-lg--line-height));\n }\n\n .text-md {\n font-size: var(--text-md);\n line-height: var(--tw-leading, var(--text-md--line-height));\n }\n\n .text-sm {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n\n .text-xl {\n font-size: var(--text-xl);\n line-height: var(--tw-leading, var(--text-xl--line-height));\n }\n\n .text-xs {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n\n .text-\\[0\\.9375rem\\] {\n font-size: .9375rem;\n }\n\n .text-\\[1\\.25rem\\] {\n font-size: 1.25rem;\n }\n\n .text-\\[18px\\] {\n font-size: 18px;\n }\n\n .leading-3\\.5 {\n --tw-leading: calc(var(--spacing) * 3.5);\n line-height: calc(var(--spacing) * 3.5);\n }\n\n .leading-4\\.25 {\n --tw-leading: calc(var(--spacing) * 4.25);\n line-height: calc(var(--spacing) * 4.25);\n }\n\n .leading-\\[1\\.125rem\\] {\n --tw-leading: 1.125rem;\n line-height: 1.125rem;\n }\n\n .leading-\\[1\\.0625rem\\] {\n --tw-leading: 1.0625rem;\n line-height: 1.0625rem;\n }\n\n .leading-\\[1\\.21875rem\\] {\n --tw-leading: 1.21875rem;\n line-height: 1.21875rem;\n }\n\n .leading-none {\n --tw-leading: 1;\n line-height: 1;\n }\n\n .leading-relaxed {\n --tw-leading: var(--leading-relaxed);\n line-height: var(--leading-relaxed);\n }\n\n .leading-snug {\n --tw-leading: var(--leading-snug);\n line-height: var(--leading-snug);\n }\n\n .leading-tight {\n --tw-leading: var(--leading-tight);\n line-height: var(--leading-tight);\n }\n\n .font-black {\n --tw-font-weight: var(--font-weight-black);\n font-weight: var(--font-weight-black);\n }\n\n .font-bold {\n --tw-font-weight: var(--font-weight-bold);\n font-weight: var(--font-weight-bold);\n }\n\n .font-light {\n --tw-font-weight: var(--font-weight-light);\n font-weight: var(--font-weight-light);\n }\n\n .font-medium {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n\n .font-normal {\n --tw-font-weight: var(--font-weight-normal);\n font-weight: var(--font-weight-normal);\n }\n\n .font-semibold {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n\n .tracking-wider {\n --tw-tracking: var(--tracking-wider);\n letter-spacing: var(--tracking-wider);\n }\n\n .wrap-break-word {\n overflow-wrap: break-word;\n }\n\n .break-all {\n word-break: break-all;\n }\n\n .text-ellipsis {\n text-overflow: ellipsis;\n }\n\n .whitespace-normal {\n white-space: normal;\n }\n\n .whitespace-nowrap {\n white-space: nowrap;\n }\n\n .text-\\(--axebow-anti-flash-white\\) {\n color: var(--axebow-anti-flash-white);\n }\n\n .text-\\(--axebow-black\\) {\n color: var(--axebow-black);\n }\n\n .text-\\(--axebow-error\\) {\n color: var(--axebow-error);\n }\n\n .text-\\(--axebow-gray\\) {\n color: var(--axebow-gray);\n }\n\n .text-\\(--axebow-primary\\) {\n color: var(--axebow-primary);\n }\n\n .text-\\(--axebow-rich-black\\) {\n color: var(--axebow-rich-black);\n }\n\n .text-\\(--axebow-secondary\\) {\n color: var(--axebow-secondary);\n }\n\n .text-\\(--axebow-strong-gray\\) {\n color: var(--axebow-strong-gray);\n }\n\n .text-\\(--axebow-tertiary\\) {\n color: var(--axebow-tertiary);\n }\n\n .text-\\[\\#006BFF\\] {\n color: #006bff;\n }\n\n .text-\\[\\#8A94AE\\] {\n color: #8a94ae;\n }\n\n .text-\\[\\#78787A\\] {\n color: #78787a;\n }\n\n .text-\\[\\#344966\\] {\n color: #344966;\n }\n\n .text-\\[\\#E93A3A\\] {\n color: #e93a3a;\n }\n\n .text-\\[var\\(--axebow-error\\)\\] {\n color: var(--axebow-error);\n }\n\n .text-\\[var\\(--axebow-gray\\)\\] {\n color: var(--axebow-gray);\n }\n\n .text-\\[var\\(--axebow-tertiary\\)\\] {\n color: var(--axebow-tertiary);\n }\n\n .text-black {\n color: var(--color-black);\n }\n\n .text-blue-600 {\n color: var(--color-blue-600);\n }\n\n .text-blue-800 {\n color: var(--color-blue-800);\n }\n\n .text-gray-300 {\n color: var(--color-gray-300);\n }\n\n .text-gray-400 {\n color: var(--color-gray-400);\n }\n\n .text-gray-500 {\n color: var(--color-gray-500);\n }\n\n .text-gray-600 {\n color: var(--color-gray-600);\n }\n\n .text-gray-700 {\n color: var(--color-gray-700);\n }\n\n .text-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-800 {\n color: var(--color-red-800);\n }\n\n .text-white {\n color: var(--color-white);\n }\n\n .text-yellow-600 {\n color: var(--color-yellow-600);\n }\n\n .text-yellow-800 {\n color: var(--color-yellow-800);\n }\n\n .capitalize {\n text-transform: capitalize;\n }\n\n .uppercase {\n text-transform: uppercase;\n }\n\n .italic {\n font-style: italic;\n }\n\n .no-underline {\n text-decoration-line: none;\n }\n\n .underline {\n text-decoration-line: underline;\n }\n\n .decoration-\\(--axebow-error\\) {\n -webkit-text-decoration-color: var(--axebow-error);\n -webkit-text-decoration-color: var(--axebow-error);\n text-decoration-color: var(--axebow-error);\n }\n\n .placeholder-gray-400::placeholder {\n color: var(--color-gray-400);\n }\n\n .opacity-0 {\n opacity: 0;\n }\n\n .opacity-40 {\n opacity: .4;\n }\n\n .opacity-50 {\n opacity: .5;\n }\n\n .opacity-60 {\n opacity: .6;\n }\n\n .opacity-70 {\n opacity: .7;\n }\n\n .opacity-100 {\n opacity: 1;\n }\n\n .shadow-\\[0_-8px_8px_-8px_rgba\\(13\\,24\\,33\\,0\\.15\\)\\] {\n --tw-shadow: 0 -8px 8px -8px var(--tw-shadow-color, #0d182126);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-\\[0_2px_6px_rgba\\(0\\,0\\,0\\,0\\.2\\)\\] {\n --tw-shadow: 0 2px 6px var(--tw-shadow-color, #0003);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-\\[0_4px_12px_rgba\\(0\\,0\\,0\\,0\\.1\\)\\] {\n --tw-shadow: 0 4px 12px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-\\[0_6px_16px_rgba\\(13\\,24\\,33\\,0\\.18\\)\\] {\n --tw-shadow: 0 6px 16px var(--tw-shadow-color, #0d18212e);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-\\[2px_2px_25px_0px_rgba\\(0\\,0\\,0\\,0\\.1\\)\\] {\n --tw-shadow: 2px 2px 25px 0px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-lg {\n --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-md {\n --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-none {\n --tw-shadow: 0 0 #0000;\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-sm {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .axebow-shadow-hover {\n transition: box-shadow .2s ease-in-out;\n }\n\n .axebow-shadow-hover:hover {\n box-shadow: 0 4px 12px #0d182114;\n }\n\n .outline {\n outline-style: var(--tw-outline-style);\n outline-width: 1px;\n }\n\n .blur {\n --tw-blur: blur(8px);\n filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );\n }\n\n .grayscale {\n --tw-grayscale: grayscale(100%);\n filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );\n }\n\n .filter {\n filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );\n }\n\n .transition {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-\\[filter\\] {\n transition-property: filter;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-all {\n transition-property: all;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-colors {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-opacity {\n transition-property: opacity;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-shadow {\n transition-property: box-shadow;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-transform {\n transition-property: transform, translate, scale, rotate;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .delay-100 {\n transition-delay: .1s;\n }\n\n .duration-120 {\n --tw-duration: .12s;\n transition-duration: .12s;\n }\n\n .duration-150 {\n --tw-duration: .15s;\n transition-duration: .15s;\n }\n\n .duration-200 {\n --tw-duration: .2s;\n transition-duration: .2s;\n }\n\n .duration-300 {\n --tw-duration: .3s;\n transition-duration: .3s;\n }\n\n .ease-in-out {\n --tw-ease: var(--ease-in-out);\n transition-timing-function: var(--ease-in-out);\n }\n\n .ease-out {\n --tw-ease: var(--ease-out);\n transition-timing-function: var(--ease-out);\n }\n\n .outline-none {\n --tw-outline-style: none;\n outline-style: none;\n }\n\n .select-none {\n -webkit-user-select: none;\n user-select: none;\n }\n\n .\\[font-variation-settings\\:\\'FILL\\'_0\\,\\'wght\\'_400\\,\\'GRAD\\'_0\\,\\'opsz\\'_24\\] {\n font-variation-settings: \"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24;\n }\n\n .\\[font-variation-settings\\:\\'FILL\\'_1\\,\\'wght\\'_400\\,\\'GRAD\\'_0\\,\\'opsz\\'_24\\] {\n font-variation-settings: \"FILL\" 1,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24;\n }\n\n @media (hover: hover) {\n .group-hover\\:translate-x-0:is(:where(.group):hover *) {\n --tw-translate-x: 0;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .group-hover\\:rotate-15:is(:where(.group):hover *) {\n rotate: 15deg;\n }\n\n .group-hover\\:font-semibold:is(:where(.group):hover *) {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n\n .group-hover\\:text-\\(--axebow-primary\\):is(:where(.group):hover *) {\n color: var(--axebow-primary);\n }\n\n .group-hover\\:opacity-100:is(:where(.group):hover *) {\n opacity: 1;\n }\n\n .group-hover\\:invert:is(:where(.group):hover *) {\n --tw-invert: invert(100%);\n filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );\n }\n }\n\n .last\\:border-b-0:last-child {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 0;\n }\n\n .focus-within\\:border-\\(--axebow-tertiary\\):focus-within {\n border-color: var(--axebow-tertiary);\n }\n\n .focus-within\\:border-blue-500:focus-within {\n border-color: var(--color-blue-500);\n }\n\n .focus-within\\:ring-2:focus-within {\n --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .focus-within\\:ring-blue-100:focus-within {\n --tw-ring-color: var(--color-blue-100);\n }\n\n @media (hover: hover) {\n .hover\\:scale-105:hover {\n --tw-scale-x: 105%;\n --tw-scale-y: 105%;\n --tw-scale-z: 105%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n\n .hover\\:rounded-md:hover {\n border-radius: var(--radius-md);\n }\n\n .hover\\:border-2:hover {\n border-style: var(--tw-border-style);\n border-width: 2px;\n }\n\n .hover\\:border-solid:hover {\n --tw-border-style: solid;\n border-style: solid;\n }\n\n .hover\\:border-\\(--axebow-gray\\):hover {\n border-color: var(--axebow-gray);\n }\n\n .hover\\:border-\\(--axebow-primary\\):hover {\n border-color: var(--axebow-primary);\n }\n\n .hover\\:border-\\(--axebow-tertiary\\):hover, .hover\\:border-\\[var\\(--axebow-tertiary\\)\\]:hover {\n border-color: var(--axebow-tertiary);\n }\n\n .hover\\:border-red-300:hover {\n border-color: var(--color-red-300);\n }\n\n .hover\\:bg-\\(--axebow-anti-flash-white\\):hover {\n background-color: var(--axebow-anti-flash-white);\n }\n\n .hover\\:bg-\\(--axebow-base\\):hover {\n background-color: var(--axebow-base);\n }\n\n .hover\\:bg-\\(--axebow-gray\\):hover {\n background-color: var(--axebow-gray);\n }\n\n .hover\\:bg-\\(--axebow-light-gray\\):hover {\n background-color: var(--axebow-light-gray);\n }\n\n .hover\\:bg-\\(--axebow-primary\\):hover {\n background-color: var(--axebow-primary);\n }\n\n .hover\\:bg-\\[var\\(--axebow-anti-flash-white\\)\\]:hover {\n background-color: var(--axebow-anti-flash-white);\n }\n\n .hover\\:bg-gray-50:hover {\n background-color: var(--color-gray-50);\n }\n\n .hover\\:bg-gray-100:hover {\n background-color: var(--color-gray-100);\n }\n\n .hover\\:bg-gray-200:hover {\n background-color: var(--color-gray-200);\n }\n\n .hover\\:bg-red-50:hover {\n background-color: var(--color-red-50);\n }\n\n .hover\\:bg-white:hover {\n background-color: var(--color-white);\n }\n\n .hover\\:px-\\[1\\.375rem\\]:hover {\n padding-inline: 1.375rem;\n }\n\n .hover\\:text-\\(--axebow-gray\\):hover {\n color: var(--axebow-gray);\n }\n\n .hover\\:text-\\(--axebow-primary\\):hover {\n color: var(--axebow-primary);\n }\n\n .hover\\:text-\\(--axebow-tertiary\\):hover {\n color: var(--axebow-tertiary);\n }\n\n .hover\\:text-\\[var\\(--axebow-gray\\)\\]:hover {\n color: var(--axebow-gray);\n }\n\n .hover\\:text-black:hover {\n color: var(--color-black);\n }\n\n .hover\\:text-gray-700:hover {\n color: var(--color-gray-700);\n }\n\n .hover\\: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\\:min-w-150 {\n min-width: var(--spacing-150);\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:root {\n --axebow-scrollbar-line-color: var(--axebow-tertiary, #e51c8e);\n --axebow-scrollbar-track-color: #f0f1f5;\n --axebow-scrollbar-thumb-color: #cbd5e1;\n --axebow-scrollbar-thumb-hover-color: #94a3b8;\n}\n\nsl-select::part(listbox)::-webkit-scrollbar {\n border-left: 2px solid var(--axebow-scrollbar-line-color);\n width: 11px;\n height: 11px;\n}\n\nsl-dropdown::part(panel)::-webkit-scrollbar {\n border-left: 2px solid var(--axebow-scrollbar-line-color);\n width: 11px;\n height: 11px;\n}\n\nsl-menu::part(base)::-webkit-scrollbar {\n border-left: 2px solid var(--axebow-scrollbar-line-color);\n width: 11px;\n height: 11px;\n}\n\nsl-select::part(listbox)::-webkit-scrollbar-button {\n display: none;\n}\n\nsl-dropdown::part(panel)::-webkit-scrollbar-button {\n display: none;\n}\n\nsl-menu::part(base)::-webkit-scrollbar-button {\n display: none;\n}\n\nsl-select::part(listbox)::-webkit-scrollbar-track {\n background-color: var(--axebow-scrollbar-track-color);\n background-clip: padding-box;\n border: 2px solid #0000;\n border-left-width: 3px;\n border-radius: 9999px;\n}\n\nsl-dropdown::part(panel)::-webkit-scrollbar-track {\n background-color: var(--axebow-scrollbar-track-color);\n background-clip: padding-box;\n border: 2px solid #0000;\n border-left-width: 3px;\n border-radius: 9999px;\n}\n\nsl-menu::part(base)::-webkit-scrollbar-track {\n background-color: var(--axebow-scrollbar-track-color);\n background-clip: padding-box;\n border: 2px solid #0000;\n border-left-width: 3px;\n border-radius: 9999px;\n}\n\nsl-select::part(listbox)::-webkit-scrollbar-thumb {\n background-color: var(--axebow-scrollbar-thumb-color);\n background-clip: padding-box;\n border: 2px solid #0000;\n border-left-width: 3px;\n border-radius: 9999px;\n}\n\nsl-dropdown::part(panel)::-webkit-scrollbar-thumb {\n background-color: var(--axebow-scrollbar-thumb-color);\n background-clip: padding-box;\n border: 2px solid #0000;\n border-left-width: 3px;\n border-radius: 9999px;\n}\n\nsl-menu::part(base)::-webkit-scrollbar-thumb {\n background-color: var(--axebow-scrollbar-thumb-color);\n background-clip: padding-box;\n border: 2px solid #0000;\n border-left-width: 3px;\n border-radius: 9999px;\n}\n\nsl-select::part(listbox)::-webkit-scrollbar-thumb:hover {\n background-color: var(--axebow-scrollbar-thumb-hover-color);\n}\n\nsl-dropdown::part(panel)::-webkit-scrollbar-thumb:hover {\n background-color: var(--axebow-scrollbar-thumb-hover-color);\n}\n\nsl-menu::part(base)::-webkit-scrollbar-thumb:hover {\n background-color: var(--axebow-scrollbar-thumb-hover-color);\n}\n\nsl-select::part(listbox), sl-dropdown::part(panel), sl-menu::part(base) {\n scrollbar-width: thin;\n scrollbar-color: var(--axebow-scrollbar-thumb-color) transparent;\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";
|
|
198
|
+
var tailwind_default = "/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n@layer properties {\n @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {\n *, :before, :after, ::backdrop {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-rotate-x: initial;\n --tw-rotate-y: initial;\n --tw-rotate-z: initial;\n --tw-skew-x: initial;\n --tw-skew-y: initial;\n --tw-space-y-reverse: 0;\n --tw-border-style: solid;\n --tw-leading: initial;\n --tw-font-weight: initial;\n --tw-tracking: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-outline-style: solid;\n --tw-blur: initial;\n --tw-brightness: initial;\n --tw-contrast: initial;\n --tw-grayscale: initial;\n --tw-hue-rotate: initial;\n --tw-invert: initial;\n --tw-opacity: initial;\n --tw-saturate: initial;\n --tw-sepia: initial;\n --tw-drop-shadow: initial;\n --tw-drop-shadow-color: initial;\n --tw-drop-shadow-alpha: 100%;\n --tw-drop-shadow-size: initial;\n --tw-duration: initial;\n --tw-ease: initial;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-scale-z: 1;\n }\n }\n}\n\n@layer theme {\n :root, :host {\n --font-sans: \"Open Sans\", sans-serif;\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n \"Courier New\", monospace;\n --color-red-50: oklch(97.1% .013 17.38);\n --color-red-100: oklch(93.6% .032 17.717);\n --color-red-200: oklch(88.5% .062 18.334);\n --color-red-300: oklch(80.8% .114 19.571);\n --color-red-800: oklch(44.4% .177 26.899);\n --color-yellow-50: oklch(98.7% .026 102.212);\n --color-yellow-200: oklch(94.5% .129 101.54);\n --color-yellow-600: oklch(68.1% .162 75.834);\n --color-yellow-800: oklch(47.6% .114 61.907);\n --color-green-50: oklch(98.2% .018 155.826);\n --color-green-200: oklch(92.5% .084 155.995);\n --color-green-600: oklch(62.7% .194 149.214);\n --color-green-800: oklch(44.8% .119 151.328);\n --color-sky-50: oklch(97.7% .013 236.62);\n --color-sky-100: oklch(95.1% .026 236.824);\n --color-blue-50: oklch(97% .014 254.604);\n --color-blue-100: oklch(93.2% .032 255.585);\n --color-blue-200: oklch(88.2% .059 254.128);\n --color-blue-500: oklch(62.3% .214 259.815);\n --color-blue-600: oklch(54.6% .245 262.881);\n --color-blue-800: oklch(42.4% .199 265.638);\n --color-gray-50: oklch(98.5% .002 247.839);\n --color-gray-100: oklch(96.7% .003 264.542);\n --color-gray-200: oklch(92.8% .006 264.531);\n --color-gray-300: oklch(87.2% .01 258.338);\n --color-gray-400: oklch(70.7% .022 261.325);\n --color-gray-500: oklch(55.1% .027 264.364);\n --color-gray-600: oklch(44.6% .03 256.802);\n --color-gray-700: oklch(37.3% .034 259.733);\n --color-black: #000;\n --color-white: #fff;\n --spacing: .25rem;\n --text-xs: .625rem;\n --text-xs--line-height: .875rem;\n --text-sm: .75rem;\n --text-sm--line-height: 1rem;\n --text-base: .875rem;\n --text-base--line-height: 1.25rem;\n --text-lg: 1.125rem;\n --text-lg--line-height: 1.75rem;\n --text-xl: 1.25rem;\n --text-xl--line-height: 1.75rem;\n --text-3xl: 1.875rem;\n --text-5xl: 3rem;\n --font-weight-light: 300;\n --font-weight-normal: 400;\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --font-weight-black: 900;\n --tracking-wider: .05em;\n --leading-tight: 1.25;\n --leading-snug: 1.375;\n --leading-relaxed: 1.625;\n --radius-md: .375rem;\n --radius-lg: .5rem;\n --radius-xl: .75rem;\n --ease-out: cubic-bezier(0, 0, .2, 1);\n --ease-in-out: cubic-bezier(.4, 0, .2, 1);\n --default-transition-duration: .15s;\n --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n --default-font-family: var(--font-sans);\n --default-mono-font-family: var(--font-mono);\n --text-md: 1rem;\n --text-md--line-height: 1.5rem;\n --spacing-30: 7.5rem;\n --spacing-38: 9.5rem;\n --spacing-43: 10.75rem;\n --spacing-50: 12.5rem;\n --spacing-75: 18.75rem;\n --spacing-117: 29.25rem;\n --spacing-120: 30rem;\n --spacing-150: 37.5rem;\n }\n}\n\n@layer base {\n *, :after, :before, ::backdrop {\n box-sizing: border-box;\n border: 0 solid;\n margin: 0;\n padding: 0;\n }\n\n ::file-selector-button {\n box-sizing: border-box;\n border: 0 solid;\n margin: 0;\n padding: 0;\n }\n\n html, :host {\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n line-height: 1.5;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n -webkit-text-decoration: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n\n b, strong {\n font-weight: bolder;\n }\n\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n\n small {\n font-size: 80%;\n }\n\n sub, sup {\n vertical-align: baseline;\n font-size: 75%;\n line-height: 0;\n position: relative;\n }\n\n sub {\n bottom: -.25em;\n }\n\n sup {\n top: -.5em;\n }\n\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n\n :-moz-focusring {\n outline: auto;\n }\n\n progress {\n vertical-align: baseline;\n }\n\n summary {\n display: list-item;\n }\n\n ol, ul, menu {\n list-style: none;\n }\n\n img, svg, video, canvas, audio, iframe, embed, object {\n vertical-align: middle;\n display: block;\n }\n\n img, video {\n max-width: 100%;\n height: auto;\n }\n\n button, input, select, optgroup, textarea {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n opacity: 1;\n background-color: #0000;\n border-radius: 0;\n }\n\n ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n opacity: 1;\n background-color: #0000;\n border-radius: 0;\n }\n\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n\n ::placeholder {\n opacity: 1;\n }\n\n @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentColor;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n ::placeholder {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n\n textarea {\n resize: vertical;\n }\n\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n\n ::-webkit-datetime-edit {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-year-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-month-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-day-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-hour-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-minute-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-second-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-millisecond-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n\n ::-webkit-calendar-picker-indicator {\n line-height: 1;\n }\n\n :-moz-ui-invalid {\n box-shadow: none;\n }\n\n button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]) {\n appearance: button;\n }\n\n ::file-selector-button {\n appearance: button;\n }\n\n ::-webkit-inner-spin-button {\n height: auto;\n }\n\n ::-webkit-outer-spin-button {\n height: auto;\n }\n\n [hidden]:where(:not([hidden=\"until-found\"])) {\n display: none !important;\n }\n}\n\n@layer components;\n\n@layer utilities {\n .pointer-events-auto {\n pointer-events: auto;\n }\n\n .pointer-events-none {\n pointer-events: none;\n }\n\n .visible {\n visibility: visible;\n }\n\n .absolute {\n position: absolute;\n }\n\n .fixed {\n position: fixed;\n }\n\n .relative {\n position: relative;\n }\n\n .static {\n position: static;\n }\n\n .-top-2\\.25 {\n top: calc(var(--spacing) * -2.25);\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-2\\.25 {\n right: calc(var(--spacing) * -2.25);\n }\n\n .right-0 {\n right: 0;\n }\n\n .right-0\\.5 {\n right: calc(var(--spacing) * .5);\n }\n\n .right-1 {\n right: var(--spacing);\n }\n\n .right-1\\.5 {\n right: calc(var(--spacing) * 1.5);\n }\n\n .right-3 {\n right: calc(var(--spacing) * 3);\n }\n\n .right-\\[calc\\(100\\%\\+10px\\)\\] {\n right: calc(100% + 10px);\n }\n\n .bottom-0 {\n bottom: 0;\n }\n\n .bottom-0\\.5 {\n bottom: calc(var(--spacing) * .5);\n }\n\n .bottom-full {\n bottom: 100%;\n }\n\n .left-0 {\n left: 0;\n }\n\n .left-1\\/2 {\n left: 50%;\n }\n\n .left-\\[-7px\\] {\n left: -7px;\n }\n\n .left-\\[calc\\(100\\%\\+10px\\)\\] {\n left: calc(100% + 10px);\n }\n\n .left-full {\n left: 100%;\n }\n\n .z-5 {\n z-index: 5;\n }\n\n .z-10 {\n z-index: 10;\n }\n\n .z-50 {\n z-index: 50;\n }\n\n .z-2000 {\n z-index: 2000;\n }\n\n .z-2001 {\n z-index: 2001;\n }\n\n .z-9999 {\n z-index: 9999;\n }\n\n .row-1 {\n grid-row: 1;\n }\n\n .container {\n width: 100%;\n }\n\n @media (min-width: 40rem) {\n .container {\n max-width: 40rem;\n }\n }\n\n @media (min-width: 48rem) {\n .container {\n max-width: 48rem;\n }\n }\n\n @media (min-width: 64rem) {\n .container {\n max-width: 64rem;\n }\n }\n\n @media (min-width: 80rem) {\n .container {\n max-width: 80rem;\n }\n }\n\n @media (min-width: 96rem) {\n .container {\n max-width: 96rem;\n }\n }\n\n .m-0 {\n margin: 0;\n }\n\n .mx-2 {\n margin-inline: calc(var(--spacing) * 2);\n }\n\n .mx-6 {\n margin-inline: calc(var(--spacing) * 6);\n }\n\n .mx-12 {\n margin-inline: calc(var(--spacing) * 12);\n }\n\n .mx-auto {\n margin-inline: auto;\n }\n\n .my-0\\.5 {\n margin-block: calc(var(--spacing) * .5);\n }\n\n .my-1\\.5 {\n margin-block: calc(var(--spacing) * 1.5);\n }\n\n .my-2 {\n margin-block: calc(var(--spacing) * 2);\n }\n\n .my-4 {\n margin-block: calc(var(--spacing) * 4);\n }\n\n .ms-auto {\n margin-inline-start: auto;\n }\n\n .mt-0 {\n margin-top: 0;\n }\n\n .mt-1 {\n margin-top: var(--spacing);\n }\n\n .mt-1\\.5 {\n margin-top: calc(var(--spacing) * 1.5);\n }\n\n .mt-1\\.75 {\n margin-top: calc(var(--spacing) * 1.75);\n }\n\n .mt-2 {\n margin-top: calc(var(--spacing) * 2);\n }\n\n .mt-2\\.25 {\n margin-top: calc(var(--spacing) * 2.25);\n }\n\n .mt-3 {\n margin-top: calc(var(--spacing) * 3);\n }\n\n .mt-4 {\n margin-top: calc(var(--spacing) * 4);\n }\n\n .mt-4\\.5 {\n margin-top: calc(var(--spacing) * 4.5);\n }\n\n .mt-5 {\n margin-top: calc(var(--spacing) * 5);\n }\n\n .mt-6 {\n margin-top: calc(var(--spacing) * 6);\n }\n\n .mt-6\\.75 {\n margin-top: calc(var(--spacing) * 6.75);\n }\n\n .mt-8 {\n margin-top: calc(var(--spacing) * 8);\n }\n\n .mr-0\\.5 {\n margin-right: calc(var(--spacing) * .5);\n }\n\n .mr-1 {\n margin-right: var(--spacing);\n }\n\n .mr-2 {\n margin-right: calc(var(--spacing) * 2);\n }\n\n .mr-4 {\n margin-right: calc(var(--spacing) * 4);\n }\n\n .mr-8 {\n margin-right: calc(var(--spacing) * 8);\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 .block {\n display: block;\n }\n\n .contents {\n display: contents;\n }\n\n .flex {\n display: flex;\n }\n\n .grid {\n display: grid;\n }\n\n .hidden {\n display: none;\n }\n\n .inline {\n display: inline;\n }\n\n .inline-block {\n display: inline-block;\n }\n\n .inline-flex {\n display: inline-flex;\n }\n\n .table {\n display: table;\n }\n\n .aspect-square {\n aspect-ratio: 1;\n }\n\n .h-2 {\n height: calc(var(--spacing) * 2);\n }\n\n .h-2\\.25 {\n height: calc(var(--spacing) * 2.25);\n }\n\n .h-2\\.75 {\n height: calc(var(--spacing) * 2.75);\n }\n\n .h-3 {\n height: calc(var(--spacing) * 3);\n }\n\n .h-3\\.5 {\n height: calc(var(--spacing) * 3.5);\n }\n\n .h-4 {\n height: calc(var(--spacing) * 4);\n }\n\n .h-4\\.5 {\n height: calc(var(--spacing) * 4.5);\n }\n\n .h-4\\.25 {\n height: calc(var(--spacing) * 4.25);\n }\n\n .h-4\\.75 {\n height: calc(var(--spacing) * 4.75);\n }\n\n .h-5 {\n height: calc(var(--spacing) * 5);\n }\n\n .h-5\\.5 {\n height: calc(var(--spacing) * 5.5);\n }\n\n .h-5\\.25 {\n height: calc(var(--spacing) * 5.25);\n }\n\n .h-6 {\n height: calc(var(--spacing) * 6);\n }\n\n .h-7 {\n height: calc(var(--spacing) * 7);\n }\n\n .h-7\\.5 {\n height: calc(var(--spacing) * 7.5);\n }\n\n .h-7\\.25 {\n height: calc(var(--spacing) * 7.25);\n }\n\n .h-8 {\n height: calc(var(--spacing) * 8);\n }\n\n .h-8\\.5 {\n height: calc(var(--spacing) * 8.5);\n }\n\n .h-8\\.75 {\n height: calc(var(--spacing) * 8.75);\n }\n\n .h-9 {\n height: calc(var(--spacing) * 9);\n }\n\n .h-9\\.5 {\n height: calc(var(--spacing) * 9.5);\n }\n\n .h-9\\.75 {\n height: calc(var(--spacing) * 9.75);\n }\n\n .h-10 {\n height: calc(var(--spacing) * 10);\n }\n\n .h-10\\.5 {\n height: calc(var(--spacing) * 10.5);\n }\n\n .h-10\\.25 {\n height: calc(var(--spacing) * 10.25);\n }\n\n .h-11 {\n height: calc(var(--spacing) * 11);\n }\n\n .h-11\\.5 {\n height: calc(var(--spacing) * 11.5);\n }\n\n .h-11\\.25 {\n height: calc(var(--spacing) * 11.25);\n }\n\n .h-12 {\n height: calc(var(--spacing) * 12);\n }\n\n .h-12\\.5 {\n height: calc(var(--spacing) * 12.5);\n }\n\n .h-12\\.25 {\n height: calc(var(--spacing) * 12.25);\n }\n\n .h-12\\.75 {\n height: calc(var(--spacing) * 12.75);\n }\n\n .h-14 {\n height: calc(var(--spacing) * 14);\n }\n\n .h-14\\.25 {\n height: calc(var(--spacing) * 14.25);\n }\n\n .h-16 {\n height: calc(var(--spacing) * 16);\n }\n\n .h-17\\.75 {\n height: calc(var(--spacing) * 17.75);\n }\n\n .h-19\\.75 {\n height: calc(var(--spacing) * 19.75);\n }\n\n .h-20 {\n height: calc(var(--spacing) * 20);\n }\n\n .h-20\\.75 {\n height: calc(var(--spacing) * 20.75);\n }\n\n .h-21\\.25 {\n height: calc(var(--spacing) * 21.25);\n }\n\n .h-22\\.75 {\n height: calc(var(--spacing) * 22.75);\n }\n\n .h-24\\.75 {\n height: calc(var(--spacing) * 24.75);\n }\n\n .h-32\\.75 {\n height: calc(var(--spacing) * 32.75);\n }\n\n .h-49\\.5 {\n height: calc(var(--spacing) * 49.5);\n }\n\n .h-52\\.75 {\n height: calc(var(--spacing) * 52.75);\n }\n\n .h-57\\.5 {\n height: calc(var(--spacing) * 57.5);\n }\n\n .h-77\\.25 {\n height: calc(var(--spacing) * 77.25);\n }\n\n .h-79 {\n height: calc(var(--spacing) * 79);\n }\n\n .h-83\\.25 {\n height: calc(var(--spacing) * 83.25);\n }\n\n .h-89\\.25 {\n height: calc(var(--spacing) * 89.25);\n }\n\n .h-112 {\n height: calc(var(--spacing) * 112);\n }\n\n .h-\\[8\\.26375rem\\] {\n height: 8.26375rem;\n }\n\n .h-auto {\n height: auto;\n }\n\n .h-fit {\n height: fit-content;\n }\n\n .h-full {\n height: 100%;\n }\n\n .h-px {\n height: 1px;\n }\n\n .h-screen {\n height: 100vh;\n }\n\n .max-h-10 {\n max-height: calc(var(--spacing) * 10);\n }\n\n .max-h-40 {\n max-height: calc(var(--spacing) * 40);\n }\n\n .max-h-48 {\n max-height: calc(var(--spacing) * 48);\n }\n\n .max-h-75 {\n max-height: var(--spacing-75);\n }\n\n .max-h-\\[40vh\\] {\n max-height: 40vh;\n }\n\n .max-h-full {\n max-height: 100%;\n }\n\n .min-h-0 {\n min-height: 0;\n }\n\n .min-h-5 {\n min-height: calc(var(--spacing) * 5);\n }\n\n .min-h-9 {\n min-height: calc(var(--spacing) * 9);\n }\n\n .min-h-10 {\n min-height: calc(var(--spacing) * 10);\n }\n\n .min-h-12 {\n min-height: calc(var(--spacing) * 12);\n }\n\n .min-h-35 {\n min-height: calc(var(--spacing) * 35);\n }\n\n .min-h-102\\.5 {\n min-height: calc(var(--spacing) * 102.5);\n }\n\n .min-h-107\\.5 {\n min-height: calc(var(--spacing) * 107.5);\n }\n\n .min-h-113\\.25 {\n min-height: calc(var(--spacing) * 113.25);\n }\n\n .w-1\\/3 {\n width: 33.3333%;\n }\n\n .w-2 {\n width: calc(var(--spacing) * 2);\n }\n\n .w-2\\.5 {\n width: calc(var(--spacing) * 2.5);\n }\n\n .w-3\\.5 {\n width: calc(var(--spacing) * 3.5);\n }\n\n .w-4 {\n width: calc(var(--spacing) * 4);\n }\n\n .w-4\\.5 {\n width: calc(var(--spacing) * 4.5);\n }\n\n .w-4\\.25 {\n width: calc(var(--spacing) * 4.25);\n }\n\n .w-5 {\n width: calc(var(--spacing) * 5);\n }\n\n .w-6 {\n width: calc(var(--spacing) * 6);\n }\n\n .w-7 {\n width: calc(var(--spacing) * 7);\n }\n\n .w-8 {\n width: calc(var(--spacing) * 8);\n }\n\n .w-9 {\n width: calc(var(--spacing) * 9);\n }\n\n .w-9\\.5 {\n width: calc(var(--spacing) * 9.5);\n }\n\n .w-10 {\n width: calc(var(--spacing) * 10);\n }\n\n .w-10\\.5 {\n width: calc(var(--spacing) * 10.5);\n }\n\n .w-11\\.5 {\n width: calc(var(--spacing) * 11.5);\n }\n\n .w-11\\.25 {\n width: calc(var(--spacing) * 11.25);\n }\n\n .w-12 {\n width: calc(var(--spacing) * 12);\n }\n\n .w-12\\.5 {\n width: calc(var(--spacing) * 12.5);\n }\n\n .w-12\\.75 {\n width: calc(var(--spacing) * 12.75);\n }\n\n .w-15\\.25 {\n width: calc(var(--spacing) * 15.25);\n }\n\n .w-16 {\n width: calc(var(--spacing) * 16);\n }\n\n .w-16\\.5 {\n width: calc(var(--spacing) * 16.5);\n }\n\n .w-17 {\n width: calc(var(--spacing) * 17);\n }\n\n .w-18\\.5 {\n width: calc(var(--spacing) * 18.5);\n }\n\n .w-18\\.75 {\n width: calc(var(--spacing) * 18.75);\n }\n\n .w-20 {\n width: calc(var(--spacing) * 20);\n }\n\n .w-20\\.5 {\n width: calc(var(--spacing) * 20.5);\n }\n\n .w-21\\.5 {\n width: calc(var(--spacing) * 21.5);\n }\n\n .w-24 {\n width: calc(var(--spacing) * 24);\n }\n\n .w-24\\.75 {\n width: calc(var(--spacing) * 24.75);\n }\n\n .w-25\\.5 {\n width: calc(var(--spacing) * 25.5);\n }\n\n .w-25\\.25 {\n width: calc(var(--spacing) * 25.25);\n }\n\n .w-26\\.25 {\n width: calc(var(--spacing) * 26.25);\n }\n\n .w-27 {\n width: calc(var(--spacing) * 27);\n }\n\n .w-27\\.5 {\n width: calc(var(--spacing) * 27.5);\n }\n\n .w-30 {\n width: var(--spacing-30);\n }\n\n .w-30\\.75 {\n width: calc(var(--spacing) * 30.75);\n }\n\n .w-32 {\n width: calc(var(--spacing) * 32);\n }\n\n .w-33\\.25 {\n width: calc(var(--spacing) * 33.25);\n }\n\n .w-34\\.25 {\n width: calc(var(--spacing) * 34.25);\n }\n\n .w-35 {\n width: calc(var(--spacing) * 35);\n }\n\n .w-36 {\n width: calc(var(--spacing) * 36);\n }\n\n .w-38\\.5 {\n width: calc(var(--spacing) * 38.5);\n }\n\n .w-39\\.5 {\n width: calc(var(--spacing) * 39.5);\n }\n\n .w-40\\.25 {\n width: calc(var(--spacing) * 40.25);\n }\n\n .w-41 {\n width: calc(var(--spacing) * 41);\n }\n\n .w-41\\.75 {\n width: calc(var(--spacing) * 41.75);\n }\n\n .w-45 {\n width: calc(var(--spacing) * 45);\n }\n\n .w-47\\.75 {\n width: calc(var(--spacing) * 47.75);\n }\n\n .w-48 {\n width: calc(var(--spacing) * 48);\n }\n\n .w-48\\.5 {\n width: calc(var(--spacing) * 48.5);\n }\n\n .w-53 {\n width: calc(var(--spacing) * 53);\n }\n\n .w-56\\.5 {\n width: calc(var(--spacing) * 56.5);\n }\n\n .w-57\\.5 {\n width: calc(var(--spacing) * 57.5);\n }\n\n .w-60\\.5 {\n width: calc(var(--spacing) * 60.5);\n }\n\n .w-62\\.5 {\n width: calc(var(--spacing) * 62.5);\n }\n\n .w-63\\.75 {\n width: calc(var(--spacing) * 63.75);\n }\n\n .w-66 {\n width: calc(var(--spacing) * 66);\n }\n\n .w-68 {\n width: calc(var(--spacing) * 68);\n }\n\n .w-70\\.5 {\n width: calc(var(--spacing) * 70.5);\n }\n\n .w-71 {\n width: calc(var(--spacing) * 71);\n }\n\n .w-74\\.75 {\n width: calc(var(--spacing) * 74.75);\n }\n\n .w-87 {\n width: calc(var(--spacing) * 87);\n }\n\n .w-88\\.5 {\n width: calc(var(--spacing) * 88.5);\n }\n\n .w-91 {\n width: calc(var(--spacing) * 91);\n }\n\n .w-95 {\n width: calc(var(--spacing) * 95);\n }\n\n .w-99\\.75 {\n width: calc(var(--spacing) * 99.75);\n }\n\n .w-100\\.5 {\n width: calc(var(--spacing) * 100.5);\n }\n\n .w-102 {\n width: calc(var(--spacing) * 102);\n }\n\n .w-117 {\n width: var(--spacing-117);\n }\n\n .w-120 {\n width: var(--spacing-120);\n }\n\n .w-120\\.75 {\n width: calc(var(--spacing) * 120.75);\n }\n\n .w-121 {\n width: calc(var(--spacing) * 121);\n }\n\n .w-127\\.75 {\n width: calc(var(--spacing) * 127.75);\n }\n\n .w-130\\.25 {\n width: calc(var(--spacing) * 130.25);\n }\n\n .w-131 {\n width: calc(var(--spacing) * 131);\n }\n\n .w-139 {\n width: calc(var(--spacing) * 139);\n }\n\n .w-140\\.75 {\n width: calc(var(--spacing) * 140.75);\n }\n\n .w-144\\.75 {\n width: calc(var(--spacing) * 144.75);\n }\n\n .w-148\\.75 {\n width: calc(var(--spacing) * 148.75);\n }\n\n .w-186\\.5 {\n width: calc(var(--spacing) * 186.5);\n }\n\n .w-186\\.25 {\n width: calc(var(--spacing) * 186.25);\n }\n\n .w-194\\.25 {\n width: calc(var(--spacing) * 194.25);\n }\n\n .w-198\\.25 {\n width: calc(var(--spacing) * 198.25);\n }\n\n .w-270 {\n width: calc(var(--spacing) * 270);\n }\n\n .w-282 {\n width: calc(var(--spacing) * 282);\n }\n\n .w-293\\.5 {\n width: calc(var(--spacing) * 293.5);\n }\n\n .w-294 {\n width: calc(var(--spacing) * 294);\n }\n\n .w-\\[10\\.5rem\\] {\n width: 10.5rem;\n }\n\n .w-\\[calc\\(100\\%-10px\\)\\] {\n width: calc(100% - 10px);\n }\n\n .w-auto {\n width: auto;\n }\n\n .w-full {\n width: 100%;\n }\n\n .w-px {\n width: 1px;\n }\n\n .max-w-36 {\n max-width: calc(var(--spacing) * 36);\n }\n\n .max-w-38 {\n max-width: var(--spacing-38);\n }\n\n .max-w-43 {\n max-width: var(--spacing-43);\n }\n\n .max-w-44 {\n max-width: calc(var(--spacing) * 44);\n }\n\n .max-w-51\\.5 {\n max-width: calc(var(--spacing) * 51.5);\n }\n\n .max-w-65 {\n max-width: calc(var(--spacing) * 65);\n }\n\n .max-w-95 {\n max-width: calc(var(--spacing) * 95);\n }\n\n .max-w-194\\.25 {\n max-width: calc(var(--spacing) * 194.25);\n }\n\n .max-w-full {\n max-width: 100%;\n }\n\n .min-w-0 {\n min-width: 0;\n }\n\n .min-w-4 {\n min-width: calc(var(--spacing) * 4);\n }\n\n .min-w-10 {\n min-width: calc(var(--spacing) * 10);\n }\n\n .min-w-20 {\n min-width: calc(var(--spacing) * 20);\n }\n\n .min-w-30 {\n min-width: var(--spacing-30);\n }\n\n .min-w-32 {\n min-width: calc(var(--spacing) * 32);\n }\n\n .min-w-36 {\n min-width: calc(var(--spacing) * 36);\n }\n\n .min-w-44 {\n min-width: calc(var(--spacing) * 44);\n }\n\n .min-w-50 {\n min-width: var(--spacing-50);\n }\n\n .min-w-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-160 {\n min-width: calc(var(--spacing) * 160);\n }\n\n .min-w-\\[8\\.2rem\\] {\n min-width: 8.2rem;\n }\n\n .min-w-fit {\n min-width: fit-content;\n }\n\n .min-w-full {\n min-width: 100%;\n }\n\n .flex-1 {\n flex: 1;\n }\n\n .flex-shrink {\n flex-shrink: 1;\n }\n\n .shrink-0 {\n flex-shrink: 0;\n }\n\n .border-collapse {\n border-collapse: collapse;\n }\n\n .-translate-x-1 {\n --tw-translate-x: calc(var(--spacing) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .-translate-x-1\\/2 {\n --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .translate-x-1 {\n --tw-translate-x: var(--spacing);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .-translate-y-1\\/2 {\n --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .scale-\\[1\\.02\\] {\n scale: 1.02;\n }\n\n .rotate-180 {\n rotate: 180deg;\n }\n\n .transform {\n transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );\n }\n\n .cursor-default {\n cursor: default;\n }\n\n .cursor-grab {\n cursor: grab;\n }\n\n .cursor-not-allowed {\n cursor: not-allowed;\n }\n\n .cursor-pointer {\n cursor: pointer;\n }\n\n .cursor-text {\n cursor: text;\n }\n\n .touch-none {\n touch-action: none;\n }\n\n .resize {\n resize: both;\n }\n\n .appearance-none {\n appearance: none;\n }\n\n .grid-cols-\\[7\\.5rem_7\\.5rem_7\\.5rem\\] {\n grid-template-columns: 7.5rem 7.5rem 7.5rem;\n }\n\n .grid-cols-\\[auto_auto_1fr_auto\\] {\n grid-template-columns: auto auto 1fr auto;\n }\n\n .flex-col {\n flex-direction: column;\n }\n\n .flex-row {\n flex-direction: row;\n }\n\n .flex-wrap {\n flex-wrap: wrap;\n }\n\n .items-baseline {\n align-items: baseline;\n }\n\n .items-center {\n align-items: center;\n }\n\n .items-end {\n align-items: flex-end;\n }\n\n .items-start {\n align-items: flex-start;\n }\n\n .justify-between {\n justify-content: space-between;\n }\n\n .justify-center {\n justify-content: center;\n }\n\n .justify-end {\n justify-content: flex-end;\n }\n\n .gap-0 {\n gap: 0;\n }\n\n .gap-0\\.5 {\n gap: calc(var(--spacing) * .5);\n }\n\n .gap-1 {\n gap: var(--spacing);\n }\n\n .gap-1\\.5 {\n gap: calc(var(--spacing) * 1.5);\n }\n\n .gap-1\\.25 {\n gap: calc(var(--spacing) * 1.25);\n }\n\n .gap-2 {\n gap: calc(var(--spacing) * 2);\n }\n\n .gap-2\\.5 {\n gap: calc(var(--spacing) * 2.5);\n }\n\n .gap-2\\.25 {\n gap: calc(var(--spacing) * 2.25);\n }\n\n .gap-2\\.75 {\n gap: calc(var(--spacing) * 2.75);\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-\\[0\\.625rem\\] {\n gap: .625rem;\n }\n\n .gap-\\[2\\%\\] {\n gap: 2%;\n }\n\n :where(.space-y-1 > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));\n margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));\n }\n\n :where(.space-y-2 > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));\n }\n\n :where(.space-y-3 > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));\n }\n\n .gap-x-1 {\n column-gap: var(--spacing);\n }\n\n .gap-x-2 {\n column-gap: calc(var(--spacing) * 2);\n }\n\n .gap-x-4 {\n column-gap: calc(var(--spacing) * 4);\n }\n\n .gap-x-6 {\n column-gap: calc(var(--spacing) * 6);\n }\n\n .gap-y-0\\.75 {\n row-gap: calc(var(--spacing) * .75);\n }\n\n .gap-y-1 {\n row-gap: var(--spacing);\n }\n\n .self-end {\n align-self: flex-end;\n }\n\n .self-start {\n align-self: flex-start;\n }\n\n .truncate {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n }\n\n .overflow-auto {\n overflow: auto;\n }\n\n .overflow-hidden {\n overflow: hidden;\n }\n\n .overflow-visible {\n overflow: visible;\n }\n\n .overflow-x-auto {\n overflow-x: auto;\n }\n\n .overflow-x-hidden {\n overflow-x: hidden;\n }\n\n .overflow-y-auto {\n overflow-y: auto;\n }\n\n .overflow-y-hidden {\n overflow-y: hidden;\n }\n\n .rounded {\n border-radius: .25rem;\n }\n\n .rounded-full {\n border-radius: 3.40282e38px;\n }\n\n .rounded-lg {\n border-radius: var(--radius-lg);\n }\n\n .rounded-md {\n border-radius: var(--radius-md);\n }\n\n .rounded-none {\n border-radius: 0;\n }\n\n .rounded-none\\! {\n border-radius: 0 !important;\n }\n\n .rounded-t-lg {\n border-top-left-radius: var(--radius-lg);\n border-top-right-radius: var(--radius-lg);\n }\n\n .rounded-t-md {\n border-top-left-radius: var(--radius-md);\n border-top-right-radius: var(--radius-md);\n }\n\n .rounded-t-xl {\n border-top-left-radius: var(--radius-xl);\n border-top-right-radius: var(--radius-xl);\n }\n\n .rounded-l-xl {\n border-top-left-radius: var(--radius-xl);\n border-bottom-left-radius: var(--radius-xl);\n }\n\n .rounded-tl-xl {\n border-top-left-radius: var(--radius-xl);\n }\n\n .rounded-r-md {\n border-top-right-radius: var(--radius-md);\n border-bottom-right-radius: var(--radius-md);\n }\n\n .rounded-tr-xl {\n border-top-right-radius: var(--radius-xl);\n }\n\n .rounded-b-lg {\n border-bottom-right-radius: var(--radius-lg);\n border-bottom-left-radius: var(--radius-lg);\n }\n\n .rounded-b-md {\n border-bottom-right-radius: var(--radius-md);\n border-bottom-left-radius: var(--radius-md);\n }\n\n .rounded-b-xl {\n border-bottom-right-radius: var(--radius-xl);\n border-bottom-left-radius: var(--radius-xl);\n }\n\n .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n\n .border-0 {\n border-style: var(--tw-border-style);\n border-width: 0;\n }\n\n .border-2 {\n border-style: var(--tw-border-style);\n border-width: 2px;\n }\n\n .border-x {\n border-inline-style: var(--tw-border-style);\n border-inline-width: 1px;\n }\n\n .border-t {\n border-top-style: var(--tw-border-style);\n border-top-width: 1px;\n }\n\n .border-t-0 {\n border-top-style: var(--tw-border-style);\n border-top-width: 0;\n }\n\n .border-t-4 {\n border-top-style: var(--tw-border-style);\n border-top-width: 4px;\n }\n\n .border-r {\n border-right-style: var(--tw-border-style);\n border-right-width: 1px;\n }\n\n .border-r-0 {\n border-right-style: var(--tw-border-style);\n border-right-width: 0;\n }\n\n .border-b {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n }\n\n .border-b-0 {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 0;\n }\n\n .border-b-2 {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 2px;\n }\n\n .border-l {\n border-left-style: var(--tw-border-style);\n border-left-width: 1px;\n }\n\n .border-l-0 {\n border-left-style: var(--tw-border-style);\n border-left-width: 0;\n }\n\n .border-l-4 {\n border-left-style: var(--tw-border-style);\n border-left-width: 4px;\n }\n\n .border-dashed {\n --tw-border-style: dashed;\n border-style: dashed;\n }\n\n .border-none {\n --tw-border-style: none;\n border-style: none;\n }\n\n .border-solid {\n --tw-border-style: solid;\n border-style: solid;\n }\n\n .border-\\(--axebow-border-gray\\) {\n border-color: var(--axebow-border-gray);\n }\n\n .border-\\(--axebow-gray\\) {\n border-color: var(--axebow-gray);\n }\n\n .border-\\(--axebow-light-gray\\) {\n border-color: var(--axebow-light-gray);\n }\n\n .border-\\(--axebow-premium-text\\) {\n border-color: var(--axebow-premium-text);\n }\n\n .border-\\(--axebow-primary\\) {\n border-color: var(--axebow-primary);\n }\n\n .border-\\(--axebow-secondary\\) {\n border-color: var(--axebow-secondary);\n }\n\n .border-\\(--axebow-table-border\\) {\n border-color: var(--axebow-table-border);\n }\n\n .border-\\(--axebow-table-header-border\\) {\n border-color: var(--axebow-table-header-border);\n }\n\n .border-\\(--axebow-tertiary\\) {\n border-color: var(--axebow-tertiary);\n }\n\n .border-\\[\\#344966\\] {\n border-color: #344966;\n }\n\n .border-\\[\\#DBDDE4\\] {\n border-color: #dbdde4;\n }\n\n .border-\\[var\\(--axebow-error\\)\\] {\n border-color: var(--axebow-error);\n }\n\n .border-\\[var\\(--axebow-gray\\)\\] {\n border-color: var(--axebow-gray);\n }\n\n .border-\\[var\\(--axebow-tertiary\\)\\] {\n border-color: var(--axebow-tertiary);\n }\n\n .border-black\\/10 {\n border-color: #0000001a;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .border-black\\/10 {\n border-color: color-mix(in oklab, var(--color-black) 10%, transparent);\n }\n }\n\n .border-blue-200 {\n border-color: var(--color-blue-200);\n }\n\n .border-gray-100 {\n border-color: var(--color-gray-100);\n }\n\n .border-gray-200 {\n border-color: var(--color-gray-200);\n }\n\n .border-gray-300 {\n border-color: var(--color-gray-300);\n }\n\n .border-gray-400 {\n border-color: var(--color-gray-400);\n }\n\n .border-gray-500 {\n border-color: var(--color-gray-500);\n }\n\n .border-green-200 {\n border-color: var(--color-green-200);\n }\n\n .border-red-200 {\n border-color: var(--color-red-200);\n }\n\n .border-transparent {\n border-color: #0000;\n }\n\n .border-white {\n border-color: var(--color-white);\n }\n\n .border-yellow-200 {\n border-color: var(--color-yellow-200);\n }\n\n .bg-\\(--axebow-anti-flash-white\\) {\n background-color: var(--axebow-anti-flash-white);\n }\n\n .bg-\\(--axebow-base\\) {\n background-color: var(--axebow-base);\n }\n\n .bg-\\(--axebow-error\\) {\n background-color: var(--axebow-error);\n }\n\n .bg-\\(--axebow-gray\\) {\n background-color: var(--axebow-gray);\n }\n\n .bg-\\(--axebow-light-gray\\), .bg-\\(--axebow-light-gray\\)\\/80 {\n background-color: var(--axebow-light-gray);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .bg-\\(--axebow-light-gray\\)\\/80 {\n background-color: color-mix(in oklab, var(--axebow-light-gray) 80%, transparent);\n }\n }\n\n .bg-\\(--axebow-primary\\) {\n background-color: var(--axebow-primary);\n }\n\n .bg-\\(--axebow-primary-light\\) {\n background-color: var(--axebow-primary-light);\n }\n\n .bg-\\(--axebow-success\\) {\n background-color: var(--axebow-success);\n }\n\n .bg-\\(--axebow-tertiary\\), .bg-\\(--axebow-tertiary\\)\\/15 {\n background-color: var(--axebow-tertiary);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .bg-\\(--axebow-tertiary\\)\\/15 {\n background-color: color-mix(in oklab, var(--axebow-tertiary) 15%, transparent);\n }\n }\n\n .bg-\\(--axebow-warning\\) {\n background-color: var(--axebow-warning);\n }\n\n .bg-\\(--axebow-white\\) {\n background-color: var(--axebow-white);\n }\n\n .bg-\\[\\#006BFF\\] {\n background-color: #006bff;\n }\n\n .bg-\\[\\#C7DCFA\\] {\n background-color: #c7dcfa;\n }\n\n .bg-\\[\\#F0F1F5\\] {\n background-color: #f0f1f5;\n }\n\n .bg-blue-50 {\n background-color: var(--color-blue-50);\n }\n\n .bg-gray-50 {\n background-color: var(--color-gray-50);\n }\n\n .bg-gray-50\\/50 {\n background-color: #f9fafb80;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .bg-gray-50\\/50 {\n background-color: color-mix(in oklab, var(--color-gray-50) 50%, transparent);\n }\n }\n\n .bg-gray-100 {\n background-color: var(--color-gray-100);\n }\n\n .bg-gray-200 {\n background-color: var(--color-gray-200);\n }\n\n .bg-gray-300 {\n background-color: var(--color-gray-300);\n }\n\n .bg-green-50 {\n background-color: var(--color-green-50);\n }\n\n .bg-red-50 {\n background-color: var(--color-red-50);\n }\n\n .bg-red-100 {\n background-color: var(--color-red-100);\n }\n\n .bg-sky-50 {\n background-color: var(--color-sky-50);\n }\n\n .bg-sky-100 {\n background-color: var(--color-sky-100);\n }\n\n .bg-transparent {\n background-color: #0000;\n }\n\n .bg-white {\n background-color: var(--color-white);\n }\n\n .bg-yellow-50 {\n background-color: var(--color-yellow-50);\n }\n\n .object-contain {\n object-fit: contain;\n }\n\n .p-0 {\n padding: 0;\n }\n\n .p-1 {\n padding: var(--spacing);\n }\n\n .p-1\\.5 {\n padding: calc(var(--spacing) * 1.5);\n }\n\n .p-2 {\n padding: calc(var(--spacing) * 2);\n }\n\n .p-3 {\n padding: calc(var(--spacing) * 3);\n }\n\n .p-3\\.25 {\n padding: calc(var(--spacing) * 3.25);\n }\n\n .p-4 {\n padding: calc(var(--spacing) * 4);\n }\n\n .p-5 {\n padding: calc(var(--spacing) * 5);\n }\n\n .p-6 {\n padding: calc(var(--spacing) * 6);\n }\n\n .px-0\\.5 {\n padding-inline: calc(var(--spacing) * .5);\n }\n\n .px-1 {\n padding-inline: var(--spacing);\n }\n\n .px-1\\.5 {\n padding-inline: calc(var(--spacing) * 1.5);\n }\n\n .px-2 {\n padding-inline: calc(var(--spacing) * 2);\n }\n\n .px-3 {\n padding-inline: calc(var(--spacing) * 3);\n }\n\n .px-3\\.5 {\n padding-inline: calc(var(--spacing) * 3.5);\n }\n\n .px-4 {\n padding-inline: calc(var(--spacing) * 4);\n }\n\n .px-5 {\n padding-inline: calc(var(--spacing) * 5);\n }\n\n .px-6 {\n padding-inline: calc(var(--spacing) * 6);\n }\n\n .px-8 {\n padding-inline: calc(var(--spacing) * 8);\n }\n\n .py-0\\.5 {\n padding-block: calc(var(--spacing) * .5);\n }\n\n .py-1 {\n padding-block: var(--spacing);\n }\n\n .py-1\\.5 {\n padding-block: calc(var(--spacing) * 1.5);\n }\n\n .py-1\\.25 {\n padding-block: calc(var(--spacing) * 1.25);\n }\n\n .py-2 {\n padding-block: calc(var(--spacing) * 2);\n }\n\n .py-2\\.5 {\n padding-block: calc(var(--spacing) * 2.5);\n }\n\n .py-2\\.75 {\n padding-block: calc(var(--spacing) * 2.75);\n }\n\n .py-3 {\n padding-block: calc(var(--spacing) * 3);\n }\n\n .py-4 {\n padding-block: calc(var(--spacing) * 4);\n }\n\n .py-4\\.75 {\n padding-block: calc(var(--spacing) * 4.75);\n }\n\n .py-8 {\n padding-block: calc(var(--spacing) * 8);\n }\n\n .ps-4 {\n padding-inline-start: calc(var(--spacing) * 4);\n }\n\n .ps-8 {\n padding-inline-start: calc(var(--spacing) * 8);\n }\n\n .pe-4 {\n padding-inline-end: calc(var(--spacing) * 4);\n }\n\n .pt-0\\.5 {\n padding-top: calc(var(--spacing) * .5);\n }\n\n .pt-1 {\n padding-top: var(--spacing);\n }\n\n .pt-2 {\n padding-top: calc(var(--spacing) * 2);\n }\n\n .pt-3 {\n padding-top: calc(var(--spacing) * 3);\n }\n\n .pt-4 {\n padding-top: calc(var(--spacing) * 4);\n }\n\n .pt-6 {\n padding-top: calc(var(--spacing) * 6);\n }\n\n .pt-8 {\n padding-top: calc(var(--spacing) * 8);\n }\n\n .pt-px {\n padding-top: 1px;\n }\n\n .pr-1 {\n padding-right: var(--spacing);\n }\n\n .pr-2 {\n padding-right: calc(var(--spacing) * 2);\n }\n\n .pr-3\\.25 {\n padding-right: calc(var(--spacing) * 3.25);\n }\n\n .pr-4 {\n padding-right: calc(var(--spacing) * 4);\n }\n\n .pr-4\\.5 {\n padding-right: calc(var(--spacing) * 4.5);\n }\n\n .pr-5 {\n padding-right: calc(var(--spacing) * 5);\n }\n\n .pb-0 {\n padding-bottom: 0;\n }\n\n .pb-1 {\n padding-bottom: var(--spacing);\n }\n\n .pb-2 {\n padding-bottom: calc(var(--spacing) * 2);\n }\n\n .pb-3 {\n padding-bottom: calc(var(--spacing) * 3);\n }\n\n .pb-3\\.5 {\n padding-bottom: calc(var(--spacing) * 3.5);\n }\n\n .pb-4 {\n padding-bottom: calc(var(--spacing) * 4);\n }\n\n .pb-6 {\n padding-bottom: calc(var(--spacing) * 6);\n }\n\n .pl-1 {\n padding-left: var(--spacing);\n }\n\n .pl-1\\.5 {\n padding-left: calc(var(--spacing) * 1.5);\n }\n\n .pl-2 {\n padding-left: calc(var(--spacing) * 2);\n }\n\n .pl-4 {\n padding-left: calc(var(--spacing) * 4);\n }\n\n .pl-4\\.25 {\n padding-left: calc(var(--spacing) * 4.25);\n }\n\n .pl-5 {\n padding-left: calc(var(--spacing) * 5);\n }\n\n .pl-6 {\n padding-left: calc(var(--spacing) * 6);\n }\n\n .pl-11\\.75 {\n padding-left: calc(var(--spacing) * 11.75);\n }\n\n .pl-px {\n padding-left: 1px;\n }\n\n .text-center {\n text-align: center;\n }\n\n .text-left {\n text-align: left;\n }\n\n .text-right {\n text-align: right;\n }\n\n .text-start {\n text-align: start;\n }\n\n .align-middle {\n vertical-align: middle;\n }\n\n .font-\\[Material_Symbols_Outlined\\] {\n font-family: Material Symbols Outlined;\n }\n\n .font-\\[inherit\\] {\n font-family: inherit;\n }\n\n .text-base {\n font-size: var(--text-base);\n line-height: var(--tw-leading, var(--text-base--line-height));\n }\n\n .text-lg {\n font-size: var(--text-lg);\n line-height: var(--tw-leading, var(--text-lg--line-height));\n }\n\n .text-md {\n font-size: var(--text-md);\n line-height: var(--tw-leading, var(--text-md--line-height));\n }\n\n .text-sm {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n\n .text-xl {\n font-size: var(--text-xl);\n line-height: var(--tw-leading, var(--text-xl--line-height));\n }\n\n .text-xs {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n\n .text-\\[0\\.9375rem\\] {\n font-size: .9375rem;\n }\n\n .text-\\[1\\.25rem\\] {\n font-size: 1.25rem;\n }\n\n .text-\\[18px\\] {\n font-size: 18px;\n }\n\n .leading-3\\.5 {\n --tw-leading: calc(var(--spacing) * 3.5);\n line-height: calc(var(--spacing) * 3.5);\n }\n\n .leading-4\\.25 {\n --tw-leading: calc(var(--spacing) * 4.25);\n line-height: calc(var(--spacing) * 4.25);\n }\n\n .leading-\\[1\\.125rem\\] {\n --tw-leading: 1.125rem;\n line-height: 1.125rem;\n }\n\n .leading-\\[1\\.0625rem\\] {\n --tw-leading: 1.0625rem;\n line-height: 1.0625rem;\n }\n\n .leading-\\[1\\.21875rem\\] {\n --tw-leading: 1.21875rem;\n line-height: 1.21875rem;\n }\n\n .leading-none {\n --tw-leading: 1;\n line-height: 1;\n }\n\n .leading-relaxed {\n --tw-leading: var(--leading-relaxed);\n line-height: var(--leading-relaxed);\n }\n\n .leading-snug {\n --tw-leading: var(--leading-snug);\n line-height: var(--leading-snug);\n }\n\n .leading-tight {\n --tw-leading: var(--leading-tight);\n line-height: var(--leading-tight);\n }\n\n .font-black {\n --tw-font-weight: var(--font-weight-black);\n font-weight: var(--font-weight-black);\n }\n\n .font-bold {\n --tw-font-weight: var(--font-weight-bold);\n font-weight: var(--font-weight-bold);\n }\n\n .font-light {\n --tw-font-weight: var(--font-weight-light);\n font-weight: var(--font-weight-light);\n }\n\n .font-medium {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n\n .font-normal {\n --tw-font-weight: var(--font-weight-normal);\n font-weight: var(--font-weight-normal);\n }\n\n .font-semibold {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n\n .tracking-wider {\n --tw-tracking: var(--tracking-wider);\n letter-spacing: var(--tracking-wider);\n }\n\n .wrap-break-word {\n overflow-wrap: break-word;\n }\n\n .break-all {\n word-break: break-all;\n }\n\n .text-ellipsis {\n text-overflow: ellipsis;\n }\n\n .whitespace-normal {\n white-space: normal;\n }\n\n .whitespace-nowrap {\n white-space: nowrap;\n }\n\n .text-\\(--axebow-anti-flash-white\\) {\n color: var(--axebow-anti-flash-white);\n }\n\n .text-\\(--axebow-black\\) {\n color: var(--axebow-black);\n }\n\n .text-\\(--axebow-error\\) {\n color: var(--axebow-error);\n }\n\n .text-\\(--axebow-gray\\) {\n color: var(--axebow-gray);\n }\n\n .text-\\(--axebow-primary\\) {\n color: var(--axebow-primary);\n }\n\n .text-\\(--axebow-rich-black\\) {\n color: var(--axebow-rich-black);\n }\n\n .text-\\(--axebow-secondary\\) {\n color: var(--axebow-secondary);\n }\n\n .text-\\(--axebow-strong-gray\\) {\n color: var(--axebow-strong-gray);\n }\n\n .text-\\(--axebow-tertiary\\) {\n color: var(--axebow-tertiary);\n }\n\n .text-\\(--axebow-text-gray\\) {\n color: var(--axebow-text-gray);\n }\n\n .text-\\[\\#006BFF\\] {\n color: #006bff;\n }\n\n .text-\\[\\#8A94AE\\] {\n color: #8a94ae;\n }\n\n .text-\\[\\#78787A\\] {\n color: #78787a;\n }\n\n .text-\\[\\#344966\\] {\n color: #344966;\n }\n\n .text-\\[\\#E93A3A\\] {\n color: #e93a3a;\n }\n\n .text-\\[var\\(--axebow-error\\)\\] {\n color: var(--axebow-error);\n }\n\n .text-\\[var\\(--axebow-tertiary\\)\\] {\n color: var(--axebow-tertiary);\n }\n\n .text-black {\n color: var(--color-black);\n }\n\n .text-blue-600 {\n color: var(--color-blue-600);\n }\n\n .text-blue-800 {\n color: var(--color-blue-800);\n }\n\n .text-gray-300 {\n color: var(--color-gray-300);\n }\n\n .text-gray-400 {\n color: var(--color-gray-400);\n }\n\n .text-gray-500 {\n color: var(--color-gray-500);\n }\n\n .text-gray-600 {\n color: var(--color-gray-600);\n }\n\n .text-gray-700 {\n color: var(--color-gray-700);\n }\n\n .text-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-800 {\n color: var(--color-red-800);\n }\n\n .text-white {\n color: var(--color-white);\n }\n\n .text-yellow-600 {\n color: var(--color-yellow-600);\n }\n\n .text-yellow-800 {\n color: var(--color-yellow-800);\n }\n\n .capitalize {\n text-transform: capitalize;\n }\n\n .uppercase {\n text-transform: uppercase;\n }\n\n .italic {\n font-style: italic;\n }\n\n .not-italic {\n font-style: normal;\n }\n\n .no-underline {\n text-decoration-line: none;\n }\n\n .underline {\n text-decoration-line: underline;\n }\n\n .decoration-\\(--axebow-error\\) {\n -webkit-text-decoration-color: var(--axebow-error);\n -webkit-text-decoration-color: var(--axebow-error);\n text-decoration-color: var(--axebow-error);\n }\n\n .placeholder-gray-400::placeholder {\n color: var(--color-gray-400);\n }\n\n .opacity-0 {\n opacity: 0;\n }\n\n .opacity-40 {\n opacity: .4;\n }\n\n .opacity-50 {\n opacity: .5;\n }\n\n .opacity-60 {\n opacity: .6;\n }\n\n .opacity-70 {\n opacity: .7;\n }\n\n .opacity-100 {\n opacity: 1;\n }\n\n .shadow-\\[0_-8px_8px_-8px_rgba\\(13\\,24\\,33\\,0\\.15\\)\\] {\n --tw-shadow: 0 -8px 8px -8px var(--tw-shadow-color, #0d182126);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-\\[0_2px_6px_rgba\\(0\\,0\\,0\\,0\\.2\\)\\] {\n --tw-shadow: 0 2px 6px var(--tw-shadow-color, #0003);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-\\[0_4px_12px_rgba\\(0\\,0\\,0\\,0\\.1\\)\\] {\n --tw-shadow: 0 4px 12px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-\\[0_6px_16px_rgba\\(13\\,24\\,33\\,0\\.18\\)\\] {\n --tw-shadow: 0 6px 16px var(--tw-shadow-color, #0d18212e);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-\\[2px_2px_25px_0px_rgba\\(0\\,0\\,0\\,0\\.1\\)\\] {\n --tw-shadow: 2px 2px 25px 0px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-lg {\n --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-md {\n --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-none {\n --tw-shadow: 0 0 #0000;\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-sm {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .axebow-shadow-hover {\n transition: box-shadow .2s ease-in-out;\n }\n\n .axebow-shadow-hover:hover {\n box-shadow: 0 4px 12px #0d182114;\n }\n\n .outline {\n outline-style: var(--tw-outline-style);\n outline-width: 1px;\n }\n\n .blur {\n --tw-blur: blur(8px);\n filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );\n }\n\n .grayscale {\n --tw-grayscale: grayscale(100%);\n filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );\n }\n\n .filter {\n filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );\n }\n\n .transition {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-\\[filter\\] {\n transition-property: filter;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-all {\n transition-property: all;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-colors {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-opacity {\n transition-property: opacity;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-shadow {\n transition-property: box-shadow;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-transform {\n transition-property: transform, translate, scale, rotate;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .delay-100 {\n transition-delay: .1s;\n }\n\n .duration-120 {\n --tw-duration: .12s;\n transition-duration: .12s;\n }\n\n .duration-150 {\n --tw-duration: .15s;\n transition-duration: .15s;\n }\n\n .duration-200 {\n --tw-duration: .2s;\n transition-duration: .2s;\n }\n\n .duration-300 {\n --tw-duration: .3s;\n transition-duration: .3s;\n }\n\n .ease-in-out {\n --tw-ease: var(--ease-in-out);\n transition-timing-function: var(--ease-in-out);\n }\n\n .ease-out {\n --tw-ease: var(--ease-out);\n transition-timing-function: var(--ease-out);\n }\n\n .outline-none {\n --tw-outline-style: none;\n outline-style: none;\n }\n\n .select-none {\n -webkit-user-select: none;\n user-select: none;\n }\n\n .\\[font-variation-settings\\:\\'FILL\\'_0\\,\\'wght\\'_400\\,\\'GRAD\\'_0\\,\\'opsz\\'_24\\] {\n font-variation-settings: \"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24;\n }\n\n .\\[font-variation-settings\\:\\'FILL\\'_1\\,\\'wght\\'_400\\,\\'GRAD\\'_0\\,\\'opsz\\'_24\\] {\n font-variation-settings: \"FILL\" 1,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24;\n }\n\n @media (hover: hover) {\n .group-hover\\:translate-x-0:is(:where(.group):hover *) {\n --tw-translate-x: 0;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .group-hover\\:rotate-15:is(:where(.group):hover *) {\n rotate: 15deg;\n }\n\n .group-hover\\:font-semibold:is(:where(.group):hover *) {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n\n .group-hover\\:text-\\(--axebow-primary\\):is(:where(.group):hover *) {\n color: var(--axebow-primary);\n }\n\n .group-hover\\:opacity-100:is(:where(.group):hover *) {\n opacity: 1;\n }\n\n .group-hover\\:invert:is(:where(.group):hover *) {\n --tw-invert: invert(100%);\n filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );\n }\n }\n\n .last\\:border-b-0:last-child {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 0;\n }\n\n .focus-within\\:border-\\(--axebow-tertiary\\):focus-within {\n border-color: var(--axebow-tertiary);\n }\n\n .focus-within\\:border-blue-500:focus-within {\n border-color: var(--color-blue-500);\n }\n\n .focus-within\\:ring-2:focus-within {\n --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .focus-within\\:ring-blue-100:focus-within {\n --tw-ring-color: var(--color-blue-100);\n }\n\n @media (hover: hover) {\n .hover\\:scale-105:hover {\n --tw-scale-x: 105%;\n --tw-scale-y: 105%;\n --tw-scale-z: 105%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n\n .hover\\: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-5\\.5:hover {\n padding-inline: calc(var(--spacing) * 5.5);\n }\n\n .hover\\:text-\\(--axebow-gray\\):hover {\n color: var(--axebow-gray);\n }\n\n .hover\\:text-\\(--axebow-primary\\):hover {\n color: var(--axebow-primary);\n }\n\n .hover\\:text-\\(--axebow-tertiary\\):hover {\n color: var(--axebow-tertiary);\n }\n\n .hover\\:text-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\\: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\\: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\\:min-w-150 {\n min-width: var(--spacing-150);\n }\n\n .lg\\:cursor-default {\n cursor: default;\n }\n\n .lg\\:rounded-md {\n border-radius: var(--radius-md);\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:root {\n --axebow-scrollbar-line-color: var(--axebow-tertiary, #e51c8e);\n --axebow-scrollbar-track-color: #f0f1f5;\n --axebow-scrollbar-thumb-color: #cbd5e1;\n --axebow-scrollbar-thumb-hover-color: #94a3b8;\n}\n\nsl-select::part(listbox)::-webkit-scrollbar {\n border-left: 2px solid var(--axebow-scrollbar-line-color);\n width: 11px;\n height: 11px;\n}\n\nsl-dropdown::part(panel)::-webkit-scrollbar {\n border-left: 2px solid var(--axebow-scrollbar-line-color);\n width: 11px;\n height: 11px;\n}\n\nsl-menu::part(base)::-webkit-scrollbar {\n border-left: 2px solid var(--axebow-scrollbar-line-color);\n width: 11px;\n height: 11px;\n}\n\nsl-select::part(listbox)::-webkit-scrollbar-button {\n display: none;\n}\n\nsl-dropdown::part(panel)::-webkit-scrollbar-button {\n display: none;\n}\n\nsl-menu::part(base)::-webkit-scrollbar-button {\n display: none;\n}\n\nsl-select::part(listbox)::-webkit-scrollbar-track {\n background-color: var(--axebow-scrollbar-track-color);\n background-clip: padding-box;\n border: 2px solid #0000;\n border-left-width: 3px;\n border-radius: 9999px;\n}\n\nsl-dropdown::part(panel)::-webkit-scrollbar-track {\n background-color: var(--axebow-scrollbar-track-color);\n background-clip: padding-box;\n border: 2px solid #0000;\n border-left-width: 3px;\n border-radius: 9999px;\n}\n\nsl-menu::part(base)::-webkit-scrollbar-track {\n background-color: var(--axebow-scrollbar-track-color);\n background-clip: padding-box;\n border: 2px solid #0000;\n border-left-width: 3px;\n border-radius: 9999px;\n}\n\nsl-select::part(listbox)::-webkit-scrollbar-thumb {\n background-color: var(--axebow-scrollbar-thumb-color);\n background-clip: padding-box;\n border: 2px solid #0000;\n border-left-width: 3px;\n border-radius: 9999px;\n}\n\nsl-dropdown::part(panel)::-webkit-scrollbar-thumb {\n background-color: var(--axebow-scrollbar-thumb-color);\n background-clip: padding-box;\n border: 2px solid #0000;\n border-left-width: 3px;\n border-radius: 9999px;\n}\n\nsl-menu::part(base)::-webkit-scrollbar-thumb {\n background-color: var(--axebow-scrollbar-thumb-color);\n background-clip: padding-box;\n border: 2px solid #0000;\n border-left-width: 3px;\n border-radius: 9999px;\n}\n\nsl-select::part(listbox)::-webkit-scrollbar-thumb:hover {\n background-color: var(--axebow-scrollbar-thumb-hover-color);\n}\n\nsl-dropdown::part(panel)::-webkit-scrollbar-thumb:hover {\n background-color: var(--axebow-scrollbar-thumb-hover-color);\n}\n\nsl-menu::part(base)::-webkit-scrollbar-thumb:hover {\n background-color: var(--axebow-scrollbar-thumb-hover-color);\n}\n\nsl-select::part(listbox), sl-dropdown::part(panel), sl-menu::part(base) {\n scrollbar-width: thin;\n scrollbar-color: var(--axebow-scrollbar-thumb-color) transparent;\n}\n\nsl-select::part(listbox), sl-select::part(menu) {\n width: max-content !important;\n min-width: 100% !important;\n max-width: 90vw !important;\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";
|
|
192
199
|
//#endregion
|
|
193
200
|
//#region \0@oxc-project+runtime@0.139.0/helpers/esm/decorate.js
|
|
194
201
|
function __decorate(decorators, target, key, desc) {
|
|
@@ -258,7 +265,7 @@ var AxebowIcon = class AxebowIcon extends LitElement {
|
|
|
258
265
|
return html`
|
|
259
266
|
<span
|
|
260
267
|
class="font-[Material_Symbols_Outlined] inline-block align-middle whitespace-nowrap ${this.clickable ? "is-clickable" : ""} ${this.filled ? filled : outlined}"
|
|
261
|
-
style="color: ${this.iconColor}; transform: rotate(${this.rotate}deg); font-size: ${fontSize}; margin-bottom: ${this.size === "large" || this.size === "3xl" ? "0.375rem" : this.size === "x-large" || this.size === "5xl" ? "0.5rem" : `${this.marginBottom}px`};"
|
|
268
|
+
style="color: var(--axebow-icon-color, ${this.iconColor}); transform: rotate(${this.rotate}deg); font-size: ${fontSize}; margin-bottom: ${this.size === "large" || this.size === "3xl" ? "0.375rem" : this.size === "x-large" || this.size === "5xl" ? "0.5rem" : `${this.marginBottom}px`};"
|
|
262
269
|
>
|
|
263
270
|
${this.iconName}
|
|
264
271
|
</span>
|
|
@@ -329,6 +336,19 @@ var AxebowFilterBar = class AxebowFilterBar extends LitElement {
|
|
|
329
336
|
sl-option::part(base) {
|
|
330
337
|
font-size: 0.875rem;
|
|
331
338
|
}
|
|
339
|
+
sl-select[lockable][has-value]::part(expand-icon) {
|
|
340
|
+
display: none !important;
|
|
341
|
+
}
|
|
342
|
+
sl-select[lockable][has-value]::part(combobox) {
|
|
343
|
+
pointer-events: none;
|
|
344
|
+
}
|
|
345
|
+
sl-select[lockable][has-value]::part(clear-button),
|
|
346
|
+
sl-select[lockable][has-value]::part(clear-icon) {
|
|
347
|
+
pointer-events: auto;
|
|
348
|
+
}
|
|
349
|
+
sl-select:not([has-value])::part(clear-button) {
|
|
350
|
+
display: none !important;
|
|
351
|
+
}
|
|
332
352
|
`];
|
|
333
353
|
}
|
|
334
354
|
connectedCallback() {
|
|
@@ -344,8 +364,22 @@ var AxebowFilterBar = class AxebowFilterBar extends LitElement {
|
|
|
344
364
|
if (container) this._resizeObserver?.observe(container);
|
|
345
365
|
this._updateSeparateLayout();
|
|
346
366
|
}
|
|
347
|
-
updated() {
|
|
367
|
+
updated(changedProperties) {
|
|
368
|
+
super.updated(changedProperties);
|
|
348
369
|
requestAnimationFrame(() => this._updateSeparateLayout());
|
|
370
|
+
this._updateHasValueAttributes();
|
|
371
|
+
}
|
|
372
|
+
_updateHasValueAttributes() {
|
|
373
|
+
(this.shadowRoot?.querySelectorAll("sl-select"))?.forEach((select) => {
|
|
374
|
+
const isLockable = select.hasAttribute("lockable");
|
|
375
|
+
const val = select.value;
|
|
376
|
+
if (isLockable && val && val !== "all" && val !== "") select.setAttribute("has-value", "");
|
|
377
|
+
else select.removeAttribute("has-value");
|
|
378
|
+
});
|
|
379
|
+
}
|
|
380
|
+
_onSelectShow(e) {
|
|
381
|
+
const target = e.target;
|
|
382
|
+
if (target.hasAttribute("lockable") && target.hasAttribute("has-value")) target.hide();
|
|
349
383
|
}
|
|
350
384
|
_updateSeparateLayout() {
|
|
351
385
|
const container = this.shadowRoot?.querySelector(".filter-bar");
|
|
@@ -358,7 +392,10 @@ var AxebowFilterBar = class AxebowFilterBar extends LitElement {
|
|
|
358
392
|
if (firstSeparate) firstSeparate.style.marginLeft = isSingleRow ? "auto" : "";
|
|
359
393
|
}
|
|
360
394
|
_onChange(e, key) {
|
|
361
|
-
const
|
|
395
|
+
const target = e.target;
|
|
396
|
+
const value = target.value;
|
|
397
|
+
if (target.hasAttribute("lockable") && value && value !== "all" && value !== "") target.setAttribute("has-value", "");
|
|
398
|
+
else target.removeAttribute("has-value");
|
|
362
399
|
this.dispatchEvent(new CustomEvent("option-change", {
|
|
363
400
|
detail: {
|
|
364
401
|
key,
|
|
@@ -369,19 +406,31 @@ var AxebowFilterBar = class AxebowFilterBar extends LitElement {
|
|
|
369
406
|
}));
|
|
370
407
|
}
|
|
371
408
|
_renderItem(item) {
|
|
409
|
+
const isLockable = item.lockable !== false;
|
|
410
|
+
const hasValue = isLockable && item.value && item.value !== "all" && item.value !== "";
|
|
372
411
|
return html`
|
|
373
412
|
<div
|
|
374
|
-
class="filter-bar-item flex flex-col gap-2 flex-1 min-w-36 max-w-
|
|
413
|
+
class="filter-bar-item flex flex-col gap-2 flex-1 min-w-36 max-w-95"
|
|
375
414
|
?data-separate=${item.separate}
|
|
376
415
|
>
|
|
377
416
|
<h4 class="m-0 text-base font-semibold text-black">${item.label}</h4>
|
|
378
417
|
<sl-select
|
|
379
418
|
class="w-full"
|
|
380
419
|
placeholder=${item.placeholder}
|
|
381
|
-
value=${item.value}
|
|
420
|
+
.value=${item.value}
|
|
421
|
+
?lockable=${isLockable}
|
|
422
|
+
?has-value=${hasValue}
|
|
423
|
+
?clearable=${isLockable}
|
|
382
424
|
data-key=${item.key}
|
|
383
425
|
@sl-change=${(e) => this._onChange(e, item.key)}
|
|
426
|
+
@sl-show=${this._onSelectShow}
|
|
384
427
|
>
|
|
428
|
+
<axebow-icon
|
|
429
|
+
slot="clear-icon"
|
|
430
|
+
iconName="cancel"
|
|
431
|
+
size="md"
|
|
432
|
+
iconColor="var(--axebow-secondary)"
|
|
433
|
+
></axebow-icon>
|
|
385
434
|
<axebow-icon
|
|
386
435
|
slot="expand-icon"
|
|
387
436
|
iconName="chevron_right"
|
|
@@ -495,6 +544,7 @@ var AxebowButton = class AxebowButton extends LitElement {
|
|
|
495
544
|
outline-color: var(--axebow-tertiary);
|
|
496
545
|
}
|
|
497
546
|
sl-button[variant='primary'][outline]:not([disabled]):hover::part(base) {
|
|
547
|
+
background: color-mix(in srgb, var(--axebow-gray) 15%, transparent);
|
|
498
548
|
color: var(--axebow-gray);
|
|
499
549
|
border-color: var(--axebow-gray);
|
|
500
550
|
outline-color: var(--axebow-gray);
|
|
@@ -502,17 +552,29 @@ var AxebowButton = class AxebowButton extends LitElement {
|
|
|
502
552
|
|
|
503
553
|
/** Text button */
|
|
504
554
|
sl-button[variant='text']::part(base) {
|
|
505
|
-
outline-color: var(--axebow-tertiary);
|
|
506
|
-
}
|
|
507
|
-
sl-button[variant='text']::part(label) {
|
|
508
555
|
color: var(--axebow-tertiary);
|
|
556
|
+
outline-color: var(--axebow-tertiary);
|
|
509
557
|
}
|
|
510
558
|
sl-button[variant='text']:not([disabled]):hover::part(base) {
|
|
559
|
+
color: var(--axebow-gray);
|
|
511
560
|
outline-color: var(--axebow-gray);
|
|
512
561
|
border-radius: 0.375rem;
|
|
513
562
|
}
|
|
514
|
-
|
|
563
|
+
|
|
564
|
+
/** Tertiary button */
|
|
565
|
+
sl-button[variant='tertiary']::part(base) {
|
|
566
|
+
background: transparent;
|
|
567
|
+
border-color: transparent;
|
|
568
|
+
color: var(--axebow-tertiary);
|
|
569
|
+
outline-color: transparent;
|
|
570
|
+
box-shadow: none;
|
|
571
|
+
}
|
|
572
|
+
sl-button[variant='tertiary']:not([disabled]):hover::part(base) {
|
|
573
|
+
background-color: var(--axebow-anti-flash-white);
|
|
515
574
|
color: var(--axebow-gray);
|
|
575
|
+
border-radius: 0.375rem;
|
|
576
|
+
border-color: transparent;
|
|
577
|
+
outline-color: transparent;
|
|
516
578
|
}
|
|
517
579
|
|
|
518
580
|
/** Success button */
|
|
@@ -520,7 +582,7 @@ var AxebowButton = class AxebowButton extends LitElement {
|
|
|
520
582
|
background: var(--axebow-success);
|
|
521
583
|
border-color: var(--axebow-success);
|
|
522
584
|
color: white;
|
|
523
|
-
border-radius: 0.
|
|
585
|
+
border-radius: 0.375rem;
|
|
524
586
|
outline-color: var(--axebow-success);
|
|
525
587
|
}
|
|
526
588
|
sl-button[variant='success']:not([disabled]):hover::part(base) {
|
|
@@ -550,6 +612,7 @@ var AxebowButton = class AxebowButton extends LitElement {
|
|
|
550
612
|
outline-color: var(--axebow-error);
|
|
551
613
|
}
|
|
552
614
|
sl-button[variant='danger'][outline]:not([disabled]):hover::part(base) {
|
|
615
|
+
background: color-mix(in srgb, var(--axebow-gray) 15%, transparent);
|
|
553
616
|
color: var(--axebow-gray);
|
|
554
617
|
border-color: var(--axebow-gray);
|
|
555
618
|
outline-color: var(--axebow-gray);
|
|
@@ -557,16 +620,12 @@ var AxebowButton = class AxebowButton extends LitElement {
|
|
|
557
620
|
|
|
558
621
|
/** Danger text (host class) */
|
|
559
622
|
:host(.axebow-red-button-text) sl-button::part(base) {
|
|
560
|
-
outline-color: var(--axebow-error);
|
|
561
|
-
}
|
|
562
|
-
:host(.axebow-red-button-text) sl-button::part(label) {
|
|
563
623
|
color: var(--axebow-error);
|
|
624
|
+
outline-color: var(--axebow-error);
|
|
564
625
|
}
|
|
565
626
|
:host(.axebow-red-button-text) sl-button:not([disabled]):hover::part(base) {
|
|
566
|
-
outline-color: var(--axebow-gray);
|
|
567
|
-
}
|
|
568
|
-
:host(.axebow-red-button-text) sl-button:not([disabled]):hover::part(label) {
|
|
569
627
|
color: var(--axebow-gray);
|
|
628
|
+
outline-color: var(--axebow-gray);
|
|
570
629
|
}
|
|
571
630
|
|
|
572
631
|
/** Warning button (host class) */
|
|
@@ -589,21 +648,21 @@ var AxebowButton = class AxebowButton extends LitElement {
|
|
|
589
648
|
*/
|
|
590
649
|
sl-button[hoverstyle='border']:not([disabled]):hover::part(base) {
|
|
591
650
|
background-color: var(--axebow-anti-flash-white) !important;
|
|
592
|
-
|
|
651
|
+
color: var(--axebow-gray) !important;
|
|
652
|
+
border-radius: 0.375rem !important;
|
|
593
653
|
outline-color: transparent !important;
|
|
594
654
|
border-color: transparent !important;
|
|
595
655
|
}
|
|
596
|
-
sl-button[hoverstyle='border']:not([disabled]):hover::part(label) {
|
|
597
|
-
color: var(--axebow-gray) !important;
|
|
598
|
-
}
|
|
599
656
|
|
|
600
657
|
sl-button::part(label) {
|
|
601
658
|
padding: 0 !important;
|
|
659
|
+
color: inherit;
|
|
602
660
|
}
|
|
603
661
|
|
|
604
662
|
sl-button::part(prefix),
|
|
605
663
|
sl-button::part(suffix) {
|
|
606
664
|
display: none !important;
|
|
665
|
+
color: inherit;
|
|
607
666
|
}
|
|
608
667
|
|
|
609
668
|
:host([has-prefix]) sl-button::part(prefix) {
|
|
@@ -613,6 +672,10 @@ var AxebowButton = class AxebowButton extends LitElement {
|
|
|
613
672
|
:host([has-suffix]) sl-button::part(suffix) {
|
|
614
673
|
display: flex !important;
|
|
615
674
|
}
|
|
675
|
+
|
|
676
|
+
::slotted(axebow-icon) {
|
|
677
|
+
--axebow-icon-color: currentColor;
|
|
678
|
+
}
|
|
616
679
|
`];
|
|
617
680
|
}
|
|
618
681
|
_handlePrefixChange(e) {
|
|
@@ -788,7 +851,8 @@ var AxebowSearchBarFilters = class AxebowSearchBarFilters extends LitElement {
|
|
|
788
851
|
role: "all",
|
|
789
852
|
provider: "all",
|
|
790
853
|
plan: "all",
|
|
791
|
-
sortBy: "newToOlder"
|
|
854
|
+
sortBy: "newToOlder",
|
|
855
|
+
lockable: true
|
|
792
856
|
};
|
|
793
857
|
this.roleOptions = [];
|
|
794
858
|
this.providerOptions = [];
|
|
@@ -841,6 +905,19 @@ var AxebowSearchBarFilters = class AxebowSearchBarFilters extends LitElement {
|
|
|
841
905
|
height: 2.5rem !important;
|
|
842
906
|
min-height: 2.5rem !important;
|
|
843
907
|
}
|
|
908
|
+
.filter-select[lockable][has-value]::part(expand-icon) {
|
|
909
|
+
display: none !important;
|
|
910
|
+
}
|
|
911
|
+
.filter-select[lockable][has-value]::part(combobox) {
|
|
912
|
+
pointer-events: none;
|
|
913
|
+
}
|
|
914
|
+
.filter-select[lockable][has-value]::part(clear-button),
|
|
915
|
+
.filter-select[lockable][has-value]::part(clear-icon) {
|
|
916
|
+
pointer-events: auto;
|
|
917
|
+
}
|
|
918
|
+
.filter-select:not([has-value])::part(clear-button) {
|
|
919
|
+
display: none !important;
|
|
920
|
+
}
|
|
844
921
|
`];
|
|
845
922
|
}
|
|
846
923
|
_dispatch(key, value) {
|
|
@@ -860,8 +937,27 @@ var AxebowSearchBarFilters = class AxebowSearchBarFilters extends LitElement {
|
|
|
860
937
|
_onSearchChange(e) {
|
|
861
938
|
this._dispatch("search", e.detail.value);
|
|
862
939
|
}
|
|
940
|
+
updated(changedProperties) {
|
|
941
|
+
super.updated(changedProperties);
|
|
942
|
+
this._updateHasValueAttributes();
|
|
943
|
+
}
|
|
944
|
+
_updateHasValueAttributes() {
|
|
945
|
+
(this.shadowRoot?.querySelectorAll("sl-select"))?.forEach((select) => {
|
|
946
|
+
const isLockable = select.hasAttribute("lockable");
|
|
947
|
+
const val = select.value;
|
|
948
|
+
if (isLockable && val && val !== "all" && val !== "") select.setAttribute("has-value", "");
|
|
949
|
+
else select.removeAttribute("has-value");
|
|
950
|
+
});
|
|
951
|
+
}
|
|
952
|
+
_onSelectShow(e) {
|
|
953
|
+
const target = e.target;
|
|
954
|
+
if (target.hasAttribute("lockable") && target.hasAttribute("has-value")) target.hide();
|
|
955
|
+
}
|
|
863
956
|
_onSelectChange(e, key) {
|
|
864
|
-
const
|
|
957
|
+
const target = e.target;
|
|
958
|
+
const value = target.value;
|
|
959
|
+
if (target.hasAttribute("lockable") && value && value !== "all" && value !== "") target.setAttribute("has-value", "");
|
|
960
|
+
else target.removeAttribute("has-value");
|
|
865
961
|
this._dispatch(key, value || "all");
|
|
866
962
|
}
|
|
867
963
|
_onSelectClear(key) {
|
|
@@ -881,6 +977,7 @@ var AxebowSearchBarFilters = class AxebowSearchBarFilters extends LitElement {
|
|
|
881
977
|
}
|
|
882
978
|
render() {
|
|
883
979
|
const showClearAll = this._activeControlsCount >= 2;
|
|
980
|
+
const isLockable = this.values.lockable !== false;
|
|
884
981
|
const roleValue = this.values.role !== "all" ? this.values.role : "";
|
|
885
982
|
const providerValue = this.values.provider !== "all" ? this.values.provider : "";
|
|
886
983
|
const planValue = this.values.plan !== "all" ? this.values.plan : "";
|
|
@@ -917,27 +1014,45 @@ var AxebowSearchBarFilters = class AxebowSearchBarFilters extends LitElement {
|
|
|
917
1014
|
<sl-select
|
|
918
1015
|
placeholder=${this.rolePlaceholder}
|
|
919
1016
|
.value=${roleValue}
|
|
1017
|
+
?lockable=${isLockable}
|
|
1018
|
+
?has-value=${isLockable && roleValue && roleValue !== "all"}
|
|
920
1019
|
@sl-change=${(e) => this._onSelectChange(e, "role")}
|
|
921
1020
|
@sl-clear=${() => this._onSelectClear("role")}
|
|
922
|
-
|
|
1021
|
+
@sl-show=${this._onSelectShow}
|
|
1022
|
+
?clearable=${isLockable}
|
|
923
1023
|
class="w-33.25 h-10 filter-select"
|
|
924
1024
|
>
|
|
1025
|
+
<axebow-icon
|
|
1026
|
+
slot="clear-icon"
|
|
1027
|
+
iconName="cancel"
|
|
1028
|
+
size="md"
|
|
1029
|
+
iconColor="var(--axebow-secondary)"
|
|
1030
|
+
></axebow-icon>
|
|
925
1031
|
${this.roleOptions.map((opt) => html`<sl-option value="${opt.value}">${opt.label}</sl-option>`)}
|
|
926
1032
|
</sl-select>
|
|
927
1033
|
|
|
928
1034
|
<sl-select
|
|
929
1035
|
placeholder=${this.providerPlaceholder}
|
|
930
1036
|
.value=${providerValue}
|
|
1037
|
+
?lockable=${isLockable}
|
|
1038
|
+
?has-value=${isLockable && providerValue && providerValue !== "all"}
|
|
931
1039
|
@sl-change=${(e) => this._onSelectChange(e, "provider")}
|
|
932
1040
|
@sl-clear=${() => this._onSelectClear("provider")}
|
|
933
|
-
|
|
1041
|
+
@sl-show=${this._onSelectShow}
|
|
1042
|
+
?clearable=${isLockable}
|
|
934
1043
|
class="w-33.25 h-10 filter-select"
|
|
935
1044
|
>
|
|
1045
|
+
<axebow-icon
|
|
1046
|
+
slot="clear-icon"
|
|
1047
|
+
iconName="cancel"
|
|
1048
|
+
size="md"
|
|
1049
|
+
iconColor="var(--axebow-secondary)"
|
|
1050
|
+
></axebow-icon>
|
|
936
1051
|
${this.providerOptions.map((opt) => html`
|
|
937
1052
|
<sl-option value="${opt.value}">
|
|
938
|
-
<span class="flex items-center
|
|
1053
|
+
<span class="flex items-center w-full gap-1">
|
|
1054
|
+
${opt.logo ? html`<img src="${opt.logo}" alt="${opt.label}" class="h-4 w-auto object-contain" />` : ""}
|
|
939
1055
|
${opt.label}
|
|
940
|
-
${opt.logo ? html`<img src="${opt.logo}" alt="${opt.label}" class="h-4 w-auto object-contain ml-auto" />` : ""}
|
|
941
1056
|
</span>
|
|
942
1057
|
</sl-option>
|
|
943
1058
|
`)}
|
|
@@ -946,11 +1061,20 @@ var AxebowSearchBarFilters = class AxebowSearchBarFilters extends LitElement {
|
|
|
946
1061
|
<sl-select
|
|
947
1062
|
placeholder=${this.planPlaceholder}
|
|
948
1063
|
.value=${planValue}
|
|
1064
|
+
?lockable=${isLockable}
|
|
1065
|
+
?has-value=${isLockable && planValue && planValue !== "all"}
|
|
949
1066
|
@sl-change=${(e) => this._onSelectChange(e, "plan")}
|
|
950
1067
|
@sl-clear=${() => this._onSelectClear("plan")}
|
|
951
|
-
|
|
1068
|
+
@sl-show=${this._onSelectShow}
|
|
1069
|
+
?clearable=${isLockable}
|
|
952
1070
|
class="w-33.25 h-10 filter-select"
|
|
953
1071
|
>
|
|
1072
|
+
<axebow-icon
|
|
1073
|
+
slot="clear-icon"
|
|
1074
|
+
iconName="cancel"
|
|
1075
|
+
size="md"
|
|
1076
|
+
iconColor="var(--axebow-secondary)"
|
|
1077
|
+
></axebow-icon>
|
|
954
1078
|
${this.planOptions.map((opt) => html`<sl-option value="${opt.value}">${opt.label}</sl-option>`)}
|
|
955
1079
|
</sl-select>
|
|
956
1080
|
|
|
@@ -1078,14 +1202,14 @@ var AxebowQuickActions = class AxebowQuickActions extends LitElement {
|
|
|
1078
1202
|
>
|
|
1079
1203
|
</span>
|
|
1080
1204
|
<span
|
|
1081
|
-
class="absolute top-1/2 -translate-y-1/2 left-[calc(100%+10px)] -translate-x-1 opacity-0 group-hover:opacity-100 group-hover:translate-x-0 text-base transition-all duration-120 bg-(--axebow-primary-light) text-(--axebow-primary) font-semibold leading-none px-3.5 py-2 rounded-
|
|
1205
|
+
class="absolute top-1/2 -translate-y-1/2 left-[calc(100%+10px)] -translate-x-1 opacity-0 group-hover:opacity-100 group-hover:translate-x-0 text-base transition-all duration-120 bg-(--axebow-primary-light) text-(--axebow-primary) font-semibold leading-none px-3.5 py-2 rounded-md whitespace-nowrap shadow-[0_6px_16px_rgba(13,24,33,0.18)] pointer-events-none z-2001"
|
|
1082
1206
|
>${this.label}</span
|
|
1083
1207
|
>
|
|
1084
1208
|
</button>
|
|
1085
1209
|
|
|
1086
1210
|
${this.open ? html`
|
|
1087
1211
|
<div
|
|
1088
|
-
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-
|
|
1212
|
+
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-md axebow-shadow"
|
|
1089
1213
|
>
|
|
1090
1214
|
<div class="flex gap-1">
|
|
1091
1215
|
${row1.map((action) => html`
|
|
@@ -1167,7 +1291,7 @@ var AxebowHeaderActions = class AxebowHeaderActions extends LitElement {
|
|
|
1167
1291
|
<div class="flex items-center gap-2 z-10 shrink-0 min-w-0 ml-auto">
|
|
1168
1292
|
<sl-dropdown>
|
|
1169
1293
|
<div
|
|
1170
|
-
class="relative group w-9 h-9 rounded-
|
|
1294
|
+
class="relative group w-9 h-9 rounded-md flex items-center justify-center cursor-pointer transition-colors duration-150 hover:bg-(--axebow-primary)"
|
|
1171
1295
|
slot="trigger"
|
|
1172
1296
|
>
|
|
1173
1297
|
<span class="inline-block transition-transform duration-200 group-hover:rotate-15">
|
|
@@ -1179,11 +1303,11 @@ var AxebowHeaderActions = class AxebowHeaderActions extends LitElement {
|
|
|
1179
1303
|
${unreadNotifications.length > 99 ? "99+" : unreadNotifications.length}
|
|
1180
1304
|
</div>` : ""}
|
|
1181
1305
|
<span
|
|
1182
|
-
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-
|
|
1306
|
+
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-md whitespace-nowrap shadow-[0_6px_16px_rgba(13,24,33,0.18)] pointer-events-none z-2001"
|
|
1183
1307
|
>${this.notificationsLabel}</span
|
|
1184
1308
|
>
|
|
1185
1309
|
</div>
|
|
1186
|
-
<sl-tab-group class="bg-white rounded-
|
|
1310
|
+
<sl-tab-group class="bg-white rounded-md w-120 text-base">
|
|
1187
1311
|
<sl-tab slot="nav" panel="my_notifications">${this.myNotificationsTabLabel}</sl-tab>
|
|
1188
1312
|
<sl-tab slot="nav" panel="action_needed">${this.actionNeededTabLabel}</sl-tab>
|
|
1189
1313
|
|
|
@@ -1231,17 +1355,17 @@ var AxebowHeaderActions = class AxebowHeaderActions extends LitElement {
|
|
|
1231
1355
|
<sl-dropdown class="shrink-0">
|
|
1232
1356
|
<div
|
|
1233
1357
|
slot="trigger"
|
|
1234
|
-
class="group flex items-center gap-2 h-9 px-3 rounded-
|
|
1358
|
+
class="group flex items-center gap-2 h-9 px-3 rounded-md 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"
|
|
1235
1359
|
>
|
|
1236
1360
|
<span class="text-white group-hover:text-(--axebow-primary) transition-colors duration-150">
|
|
1237
1361
|
<axebow-icon iconName="account_circle" iconColor="currentColor" size="xl"></axebow-icon>
|
|
1238
1362
|
</span>
|
|
1239
1363
|
${this.userName}
|
|
1240
1364
|
</div>
|
|
1241
|
-
<sl-menu class="bg-white rounded-
|
|
1365
|
+
<sl-menu class="bg-white rounded-md p-2 min-w-55 axebow-shadow">
|
|
1242
1366
|
${this.profileMenuItems.map((item) => html`
|
|
1243
1367
|
<button
|
|
1244
|
-
class="w-full flex text-base items-center justify-between ml-auto px-4 py-2 cursor-pointer rounded-
|
|
1368
|
+
class="w-full flex text-base items-center justify-between ml-auto px-4 py-2 cursor-pointer rounded-md hover:bg-gray-200 transition-colors ease-in-out duration-200 hover:text-(--axebow-tertiary)"
|
|
1245
1369
|
@click=${() => item.onClick()}
|
|
1246
1370
|
>
|
|
1247
1371
|
<span class="text-(--axebow-primary)">${item.name}</span>
|
|
@@ -1249,7 +1373,7 @@ var AxebowHeaderActions = class AxebowHeaderActions extends LitElement {
|
|
|
1249
1373
|
</button>
|
|
1250
1374
|
`)}
|
|
1251
1375
|
<button
|
|
1252
|
-
class="ml-auto flex items-center justify-between w-full px-4 py-2 text-(--axebow-error) cursor-pointer rounded-
|
|
1376
|
+
class="ml-auto flex items-center justify-between w-full px-4 py-2 text-(--axebow-error) cursor-pointer rounded-md text-base"
|
|
1253
1377
|
@click=${() => this.onLogout()}
|
|
1254
1378
|
>
|
|
1255
1379
|
<span class="text-(--axebow-error) mt-1">${this.logoutLabel}</span>
|
|
@@ -1519,7 +1643,7 @@ var AxebowSidebar = class AxebowSidebar extends LitElement {
|
|
|
1519
1643
|
style="left: ${this.tooltipLeft}px; top: ${this.tooltipTop}px; height: 3rem;"
|
|
1520
1644
|
>
|
|
1521
1645
|
<span
|
|
1522
|
-
class="flex items-center gap-1 px-2 py-1 bg-white rounded-
|
|
1646
|
+
class="flex items-center gap-1 px-2 py-1 bg-white rounded-md text-base border border-solid border-(--axebow-gray) shadow-lg"
|
|
1523
1647
|
>${this.hoveredItem.label}${this.hoveredItem.openInNewTab ? html`<axebow-icon iconName="open_in_new" size="sm"></axebow-icon>` : ""}</span
|
|
1524
1648
|
>
|
|
1525
1649
|
</div>
|
|
@@ -1756,6 +1880,7 @@ var AxebowInputBase = class extends LitElement {
|
|
|
1756
1880
|
--sl-input-focus-ring-color: transparent;
|
|
1757
1881
|
--sl-color-primary-600: transparent;
|
|
1758
1882
|
--sl-input-border-color-focus: transparent;
|
|
1883
|
+
border-radius: 0.375rem;
|
|
1759
1884
|
}
|
|
1760
1885
|
.input-error sl-input,
|
|
1761
1886
|
.input-error sl-select {
|
|
@@ -1823,10 +1948,10 @@ var AxebowInputBase = class extends LitElement {
|
|
|
1823
1948
|
style="margin-bottom: ${this.description ? "var(--axebow-input-label-gap, 1rem)" : "var(--axebow-input-field-gap, 0.5rem)"}"
|
|
1824
1949
|
>
|
|
1825
1950
|
${this.required ? html`<p class="text-(--axebow-error)">*</p>` : ""}
|
|
1826
|
-
<h4 class="${this.compact ? "font-normal text-sm" : "font-
|
|
1951
|
+
<h4 class="${this.compact ? "font-normal text-sm" : "font-semibold text-base"}">${this.label}</h4>
|
|
1827
1952
|
</div>` : ""}
|
|
1828
1953
|
${this.description ? html`<p
|
|
1829
|
-
class="text-m overflow-hidden line-clamp-2"
|
|
1954
|
+
class="text-m font-semibold overflow-hidden line-clamp-2"
|
|
1830
1955
|
style="
|
|
1831
1956
|
margin-bottom: var(--axebow-input-description-gap, 0.75rem);
|
|
1832
1957
|
height: var(--axebow-input-description-height, 3rem);
|
|
@@ -1859,7 +1984,7 @@ var AxebowInputBase = class extends LitElement {
|
|
|
1859
1984
|
</h4>
|
|
1860
1985
|
</div>` : ""}
|
|
1861
1986
|
${this.description ? html`<p
|
|
1862
|
-
class="field-description text-base leading-4.25 m-0"
|
|
1987
|
+
class="field-description text-base font-semibold leading-4.25 m-0"
|
|
1863
1988
|
title="${this.wrapDescription ? "" : this.description}"
|
|
1864
1989
|
>
|
|
1865
1990
|
${this.description}
|
|
@@ -1974,8 +2099,8 @@ var AxebowNumericInput = class AxebowNumericInput extends AxebowInputBase {
|
|
|
1974
2099
|
flex-direction: column;
|
|
1975
2100
|
width: 1.375rem !important;
|
|
1976
2101
|
height: 2.375rem !important;
|
|
1977
|
-
border
|
|
1978
|
-
border-radius: 0
|
|
2102
|
+
border: 1px solid var(--axebow-table-header-border) !important;
|
|
2103
|
+
border-radius: 0 0.375rem 0.375rem 0;
|
|
1979
2104
|
overflow: hidden;
|
|
1980
2105
|
}
|
|
1981
2106
|
.axebow-numeric-stepper-btn {
|
|
@@ -1992,7 +2117,7 @@ var AxebowNumericInput = class AxebowNumericInput extends AxebowInputBase {
|
|
|
1992
2117
|
cursor: pointer;
|
|
1993
2118
|
}
|
|
1994
2119
|
.axebow-numeric-stepper-btn:first-child {
|
|
1995
|
-
border-bottom: 1px solid var(--axebow-
|
|
2120
|
+
border-bottom: 1px solid var(--axebow-table-header-border) !important;
|
|
1996
2121
|
}
|
|
1997
2122
|
.axebow-numeric-stepper-btn:disabled {
|
|
1998
2123
|
cursor: not-allowed;
|
|
@@ -2226,9 +2351,6 @@ var AxebowCarouselInput = class AxebowCarouselInput extends AxebowInputBase {
|
|
|
2226
2351
|
static {
|
|
2227
2352
|
this.styles = [...AxebowInputBase.baseStyles, css`
|
|
2228
2353
|
:host {
|
|
2229
|
-
/* Tighter label/description rhythm than the other axebow-*-input
|
|
2230
|
-
controls (4px / 16px instead of the shared 16px / 12px default),
|
|
2231
|
-
and a fixed 380.5x17px description box instead of full-width/2-line. */
|
|
2232
2354
|
--axebow-input-label-gap: 0.25rem;
|
|
2233
2355
|
--axebow-input-description-gap: 1rem;
|
|
2234
2356
|
--axebow-input-description-height: 1.0625rem;
|
|
@@ -2241,7 +2363,9 @@ var AxebowCarouselInput = class AxebowCarouselInput extends AxebowInputBase {
|
|
|
2241
2363
|
--slide-gap: ${CARD_GAP_PX}px;
|
|
2242
2364
|
}
|
|
2243
2365
|
sl-carousel::part(scroll-container) {
|
|
2244
|
-
height: ${CARD_HEIGHT_PX / 16}rem !important;
|
|
2366
|
+
height: calc(${CARD_HEIGHT_PX / 16}rem + 0.5625rem) !important;
|
|
2367
|
+
padding-top: 0.5625rem !important;
|
|
2368
|
+
margin-top: -0.5625rem !important;
|
|
2245
2369
|
}
|
|
2246
2370
|
sl-carousel-item > div {
|
|
2247
2371
|
width: 100%;
|
|
@@ -2277,7 +2401,7 @@ var AxebowCarouselInput = class AxebowCarouselInput extends AxebowInputBase {
|
|
|
2277
2401
|
${this.carouselItems.map((item) => this.carouselItemRenderer ? this.carouselItemRenderer(item) : html`
|
|
2278
2402
|
<sl-carousel-item>
|
|
2279
2403
|
<div
|
|
2280
|
-
class="rounded-
|
|
2404
|
+
class="rounded-md border-2 border-solid border-transparent p-4 transition-all duration-300 cursor-pointer text-center flex gap-4 items-center"
|
|
2281
2405
|
>
|
|
2282
2406
|
${item.content}
|
|
2283
2407
|
</div>
|
|
@@ -2908,7 +3032,7 @@ var AxebowTagsInput = class AxebowTagsInput extends LitElement {
|
|
|
2908
3032
|
${this.description ? html`<p class="text-base text-black mb-1.5">${this.description}</p>` : ""}
|
|
2909
3033
|
<div
|
|
2910
3034
|
class="flex flex-wrap items-center gap-1.5 min-h-9 px-2 py-1.5
|
|
2911
|
-
border border-solid border-gray-300 rounded bg-white cursor-text
|
|
3035
|
+
border border-solid border-gray-300 rounded-md bg-white cursor-text
|
|
2912
3036
|
focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-100
|
|
2913
3037
|
transition-shadow"
|
|
2914
3038
|
@click=${() => this.shadowRoot?.querySelector(".tag-field")?.focus()}
|
|
@@ -2965,6 +3089,376 @@ __decorate([property({ attribute: false })], AxebowTagsInput.prototype, "onTagsC
|
|
|
2965
3089
|
__decorate([property({ attribute: false })], AxebowTagsInput.prototype, "onCurrentInputChange", void 0);
|
|
2966
3090
|
AxebowTagsInput = __decorate([customElement("axebow-tags-input")], AxebowTagsInput);
|
|
2967
3091
|
//#endregion
|
|
3092
|
+
//#region src/components/axebow-tab-selector/axebow-tab-selector.ts
|
|
3093
|
+
var AxebowTabSelector = class AxebowTabSelector extends LitElement {
|
|
3094
|
+
constructor(..._args) {
|
|
3095
|
+
super(..._args);
|
|
3096
|
+
this.disabled = false;
|
|
3097
|
+
this.bordered = false;
|
|
3098
|
+
this.variant = "forms-tab";
|
|
3099
|
+
this.stretch = true;
|
|
3100
|
+
this._activeTab = 0;
|
|
3101
|
+
this._tabCount = 0;
|
|
3102
|
+
this._tabDisabled = [];
|
|
3103
|
+
this._observer = null;
|
|
3104
|
+
}
|
|
3105
|
+
static {
|
|
3106
|
+
this.styles = [unsafeCSS(tailwind_default), css`
|
|
3107
|
+
:host {
|
|
3108
|
+
display: block;
|
|
3109
|
+
}
|
|
3110
|
+
button {
|
|
3111
|
+
font-family: inherit;
|
|
3112
|
+
}
|
|
3113
|
+
|
|
3114
|
+
/* forms-tab hover underline */
|
|
3115
|
+
button.tab-inactive:not(:disabled) {
|
|
3116
|
+
position: relative;
|
|
3117
|
+
}
|
|
3118
|
+
button.tab-inactive:not(:disabled):hover::after {
|
|
3119
|
+
content: '';
|
|
3120
|
+
position: absolute;
|
|
3121
|
+
bottom: 0;
|
|
3122
|
+
left: 0;
|
|
3123
|
+
right: 0;
|
|
3124
|
+
height: 2px;
|
|
3125
|
+
background-color: var(--axebow-tertiary);
|
|
3126
|
+
border-radius: 0.25rem;
|
|
3127
|
+
}
|
|
3128
|
+
|
|
3129
|
+
:host([disabled]) {
|
|
3130
|
+
opacity: 0.6;
|
|
3131
|
+
pointer-events: none;
|
|
3132
|
+
cursor: not-allowed;
|
|
3133
|
+
}
|
|
3134
|
+
`];
|
|
3135
|
+
}
|
|
3136
|
+
connectedCallback() {
|
|
3137
|
+
super.connectedCallback();
|
|
3138
|
+
this._observer = new MutationObserver(() => this._updateTabCount());
|
|
3139
|
+
this._observer.observe(this, {
|
|
3140
|
+
childList: true,
|
|
3141
|
+
attributes: true,
|
|
3142
|
+
attributeFilter: ["disabled"],
|
|
3143
|
+
subtree: true
|
|
3144
|
+
});
|
|
3145
|
+
this._updateTabCount();
|
|
3146
|
+
}
|
|
3147
|
+
disconnectedCallback() {
|
|
3148
|
+
super.disconnectedCallback();
|
|
3149
|
+
this._observer?.disconnect();
|
|
3150
|
+
}
|
|
3151
|
+
firstUpdated() {
|
|
3152
|
+
this._updateTabCount();
|
|
3153
|
+
}
|
|
3154
|
+
updated(changedProperties) {
|
|
3155
|
+
if (changedProperties.has("activeTab") && this.activeTab !== void 0 && this._activeTab !== this.activeTab) this._activeTab = this.activeTab;
|
|
3156
|
+
if (changedProperties.has("disabled")) this.toggleAttribute("disabled", this.disabled);
|
|
3157
|
+
}
|
|
3158
|
+
_updateTabCount() {
|
|
3159
|
+
const count = Array.from(this.children).filter((el) => el.getAttribute("slot")?.startsWith("tab-label-")).length;
|
|
3160
|
+
if (count !== this._tabCount) {
|
|
3161
|
+
if (this._activeTab >= count) this._activeTab = 0;
|
|
3162
|
+
this._tabCount = count;
|
|
3163
|
+
}
|
|
3164
|
+
this._tabDisabled = Array.from({ length: this._tabCount }, (_, i) => {
|
|
3165
|
+
return this.querySelector(`[slot="tab-label-${i}"]`)?.hasAttribute("disabled") ?? false;
|
|
3166
|
+
});
|
|
3167
|
+
}
|
|
3168
|
+
_selectTab(index) {
|
|
3169
|
+
if (this.disabled || this._tabDisabled[index]) return;
|
|
3170
|
+
this._activeTab = index;
|
|
3171
|
+
this.dispatchEvent(new CustomEvent("tab-change", {
|
|
3172
|
+
detail: { index },
|
|
3173
|
+
bubbles: true,
|
|
3174
|
+
composed: true
|
|
3175
|
+
}));
|
|
3176
|
+
}
|
|
3177
|
+
_renderFormsTab(tabs) {
|
|
3178
|
+
const isFirstActive = this._activeTab === 0;
|
|
3179
|
+
const isLastActive = this._activeTab === this._tabCount - 1;
|
|
3180
|
+
return html`
|
|
3181
|
+
<div class="w-full max-w-194.25 rounded-md box-border">
|
|
3182
|
+
<div class="w-full h-8 flex bg-(--axebow-base) gap-1 rounded-t-xl box-border">
|
|
3183
|
+
${tabs.map((i) => {
|
|
3184
|
+
const active = this._activeTab === i;
|
|
3185
|
+
const isDisabled = this._tabDisabled[i];
|
|
3186
|
+
return html`
|
|
3187
|
+
<button
|
|
3188
|
+
class="flex-1 h-8 flex items-center justify-center gap-2 transition-colors duration-200 font-medium
|
|
3189
|
+
focus-visible:outline-2 focus-visible:outline-(--axebow-tertiary)
|
|
3190
|
+
${isDisabled ? "opacity-60 cursor-not-allowed" : "cursor-pointer"}
|
|
3191
|
+
${active ? `bg-white text-(--axebow-primary) rounded-t-lg tab-active ${this.bordered ? "border-t border-l border-r border-(--axebow-table-header-border)" : "border-none"}` : "bg-transparent text-(--axebow-secondary) rounded-md tab-inactive border-none"}"
|
|
3192
|
+
?disabled=${isDisabled}
|
|
3193
|
+
@click=${() => this._selectTab(i)}
|
|
3194
|
+
>
|
|
3195
|
+
<axebow-icon
|
|
3196
|
+
iconName="${active ? "radio_button_checked" : "radio_button_unchecked"}"
|
|
3197
|
+
iconColor="var(--axebow-tertiary)"
|
|
3198
|
+
size="base"
|
|
3199
|
+
></axebow-icon>
|
|
3200
|
+
<slot name="tab-label-${i}"></slot>
|
|
3201
|
+
</button>
|
|
3202
|
+
`;
|
|
3203
|
+
})}
|
|
3204
|
+
</div>
|
|
3205
|
+
|
|
3206
|
+
<div
|
|
3207
|
+
class="w-full min-h-35 p-4 bg-white rounded-b-xl box-border ${isFirstActive ? "" : "rounded-tl-xl"} ${isLastActive ? "" : "rounded-tr-xl"} ${this.bordered ? "border-l border-r border-b border-(--axebow-table-header-border)" : ""}"
|
|
3208
|
+
>
|
|
3209
|
+
${tabs.map((i) => html`
|
|
3210
|
+
<div class="${this._activeTab === i ? "block" : "hidden"}">
|
|
3211
|
+
<slot name="tab-panel-${i}"></slot>
|
|
3212
|
+
</div>
|
|
3213
|
+
`)}
|
|
3214
|
+
</div>
|
|
3215
|
+
</div>
|
|
3216
|
+
`;
|
|
3217
|
+
}
|
|
3218
|
+
_renderSectionsTab(tabs) {
|
|
3219
|
+
return html`
|
|
3220
|
+
<div class="flex w-full">
|
|
3221
|
+
${tabs.map((i) => {
|
|
3222
|
+
const active = this._activeTab === i;
|
|
3223
|
+
const isDisabled = this._tabDisabled[i];
|
|
3224
|
+
return html`
|
|
3225
|
+
<button
|
|
3226
|
+
class="${this.stretch ? "flex-1" : "px-4"} h-8 flex items-center justify-center text-sm font-medium bg-transparent
|
|
3227
|
+
transition-colors duration-200
|
|
3228
|
+
focus-visible:outline-2 focus-visible:outline-(--axebow-tertiary)
|
|
3229
|
+
${isDisabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
|
|
3230
|
+
${active ? "text-[#344966] border-b-2 border-solid border-[#344966] border-t-0 border-l-0 border-r-0" : "text-(--axebow-secondary) border-b border-solid border-(--axebow-light-gray) border-t-0 border-l-0 border-r-0 hover:text-(--axebow-tertiary)"}"
|
|
3231
|
+
?disabled=${isDisabled}
|
|
3232
|
+
@click=${() => this._selectTab(i)}
|
|
3233
|
+
>
|
|
3234
|
+
<slot name="tab-label-${i}"></slot>
|
|
3235
|
+
</button>
|
|
3236
|
+
`;
|
|
3237
|
+
})}
|
|
3238
|
+
${!this.stretch ? html`<div class="flex-1 border-b border-solid border-(--axebow-light-gray) border-t-0 border-l-0 border-r-0"></div>` : ""}
|
|
3239
|
+
</div>
|
|
3240
|
+
${tabs.map((i) => html`
|
|
3241
|
+
<div class="${this._activeTab === i ? "block" : "hidden"}">
|
|
3242
|
+
<slot name="tab-panel-${i}"></slot>
|
|
3243
|
+
</div>
|
|
3244
|
+
`)}
|
|
3245
|
+
`;
|
|
3246
|
+
}
|
|
3247
|
+
render() {
|
|
3248
|
+
const tabs = Array.from({ length: this._tabCount }, (_, i) => i);
|
|
3249
|
+
return this.variant === "sections-tab" ? this._renderSectionsTab(tabs) : this._renderFormsTab(tabs);
|
|
3250
|
+
}
|
|
3251
|
+
};
|
|
3252
|
+
__decorate([property({
|
|
3253
|
+
type: Boolean,
|
|
3254
|
+
attribute: false
|
|
3255
|
+
})], AxebowTabSelector.prototype, "disabled", void 0);
|
|
3256
|
+
__decorate([property({ type: Number })], AxebowTabSelector.prototype, "activeTab", void 0);
|
|
3257
|
+
__decorate([property({ type: Boolean })], AxebowTabSelector.prototype, "bordered", void 0);
|
|
3258
|
+
__decorate([property({ type: String })], AxebowTabSelector.prototype, "variant", void 0);
|
|
3259
|
+
__decorate([property({ type: Boolean })], AxebowTabSelector.prototype, "stretch", void 0);
|
|
3260
|
+
__decorate([state()], AxebowTabSelector.prototype, "_activeTab", void 0);
|
|
3261
|
+
__decorate([state()], AxebowTabSelector.prototype, "_tabCount", void 0);
|
|
3262
|
+
__decorate([state()], AxebowTabSelector.prototype, "_tabDisabled", void 0);
|
|
3263
|
+
AxebowTabSelector = __decorate([customElement("axebow-tab-selector")], AxebowTabSelector);
|
|
3264
|
+
//#endregion
|
|
3265
|
+
//#region src/components/axebow-registry-selector/axebow-registry-selector.ts
|
|
3266
|
+
function isValidRegistryUrl(value) {
|
|
3267
|
+
if (!value) return true;
|
|
3268
|
+
try {
|
|
3269
|
+
const urlToParse = value.includes("://") ? value : `https://${value}`;
|
|
3270
|
+
return new URL(urlToParse).hostname.includes(".");
|
|
3271
|
+
} catch {
|
|
3272
|
+
return false;
|
|
3273
|
+
}
|
|
3274
|
+
}
|
|
3275
|
+
var AxebowRegistrySelector = class AxebowRegistrySelector extends LitElement {
|
|
3276
|
+
constructor(..._args) {
|
|
3277
|
+
super(..._args);
|
|
3278
|
+
this.disabled = false;
|
|
3279
|
+
this.activeTab = 0;
|
|
3280
|
+
this.registries = [];
|
|
3281
|
+
this.selectedRegistry = "";
|
|
3282
|
+
this.oneShotRegistryUrl = "";
|
|
3283
|
+
this.oneShotRegistrySecret = "";
|
|
3284
|
+
this.secrets = [];
|
|
3285
|
+
}
|
|
3286
|
+
static {
|
|
3287
|
+
this.styles = [
|
|
3288
|
+
unsafeCSS(tailwind_default),
|
|
3289
|
+
axebowTheme,
|
|
3290
|
+
css`
|
|
3291
|
+
:host {
|
|
3292
|
+
display: block;
|
|
3293
|
+
}
|
|
3294
|
+
`
|
|
3295
|
+
];
|
|
3296
|
+
}
|
|
3297
|
+
updated(changedProperties) {
|
|
3298
|
+
super.updated(changedProperties);
|
|
3299
|
+
if (changedProperties.has("oneShotRegistryUrl") || changedProperties.has("activeTab")) this.onValidityChange?.(this.activeTab !== 1 || isValidRegistryUrl(this.oneShotRegistryUrl));
|
|
3300
|
+
}
|
|
3301
|
+
_isRegistrySelected(registry) {
|
|
3302
|
+
return !!registry.registry && registry.registry === this.selectedRegistry;
|
|
3303
|
+
}
|
|
3304
|
+
_secretOptions() {
|
|
3305
|
+
const options = [...this.secrets];
|
|
3306
|
+
if (this.oneShotRegistrySecret && !options.some((s) => s.name === this.oneShotRegistrySecret)) options.push({ name: this.oneShotRegistrySecret });
|
|
3307
|
+
return options;
|
|
3308
|
+
}
|
|
3309
|
+
_renderRegistryItem(registry) {
|
|
3310
|
+
const isSelected = this._isRegistrySelected(registry);
|
|
3311
|
+
return html`
|
|
3312
|
+
<style>
|
|
3313
|
+
.registry-card {
|
|
3314
|
+
position: relative;
|
|
3315
|
+
gap: calc(var(--spacing) * 0.5);
|
|
3316
|
+
border-color: var(--color-gray-200);
|
|
3317
|
+
background-color: transparent;
|
|
3318
|
+
}
|
|
3319
|
+
@media (min-width: 48rem) {
|
|
3320
|
+
.registry-card {
|
|
3321
|
+
gap: var(--spacing);
|
|
3322
|
+
}
|
|
3323
|
+
}
|
|
3324
|
+
@media (min-width: 64rem) {
|
|
3325
|
+
.registry-card {
|
|
3326
|
+
gap: calc(var(--spacing) * 2);
|
|
3327
|
+
}
|
|
3328
|
+
}
|
|
3329
|
+
.registry-card.selected {
|
|
3330
|
+
border-color: var(--axebow-primary);
|
|
3331
|
+
background-color: var(--axebow-white);
|
|
3332
|
+
}
|
|
3333
|
+
.registry-logo {
|
|
3334
|
+
height: calc(var(--spacing) * 3);
|
|
3335
|
+
aspect-ratio: 1 / 1;
|
|
3336
|
+
object-fit: contain;
|
|
3337
|
+
}
|
|
3338
|
+
@media (min-width: 64rem) {
|
|
3339
|
+
.registry-logo {
|
|
3340
|
+
height: calc(var(--spacing) * 6);
|
|
3341
|
+
}
|
|
3342
|
+
}
|
|
3343
|
+
</style>
|
|
3344
|
+
<sl-carousel-item>
|
|
3345
|
+
<div
|
|
3346
|
+
class="registry-card rounded-lg border-2 border-solid cursor-pointer p-2 text-center transition-all duration-300 ease-in-out flex items-center justify-center ${isSelected ? "selected" : ""}"
|
|
3347
|
+
@click=${() => {
|
|
3348
|
+
if (!this.disabled) this.onRegistrySelect?.(registry);
|
|
3349
|
+
}}
|
|
3350
|
+
>
|
|
3351
|
+
<img class="registry-logo" src="${registry.content}" alt="${registry.id}" />
|
|
3352
|
+
<p>${registry.id}</p>
|
|
3353
|
+
${isSelected ? html`
|
|
3354
|
+
<div
|
|
3355
|
+
class="absolute -top-2.25 -right-2.25 z-10 w-4.5 h-4.5 rounded-full bg-(--axebow-white) flex items-center justify-center"
|
|
3356
|
+
>
|
|
3357
|
+
<axebow-icon iconName="check_circle" filled iconColor="var(--axebow-primary)" size="xl"></axebow-icon>
|
|
3358
|
+
</div>
|
|
3359
|
+
` : ""}
|
|
3360
|
+
</div>
|
|
3361
|
+
</sl-carousel-item>
|
|
3362
|
+
`;
|
|
3363
|
+
}
|
|
3364
|
+
_renderRegistryCarousel() {
|
|
3365
|
+
return html`
|
|
3366
|
+
<axebow-input
|
|
3367
|
+
.disabled=${this.disabled}
|
|
3368
|
+
label="${this.labels.registryLabel}"
|
|
3369
|
+
required
|
|
3370
|
+
description="${this.labels.registryDescription}"
|
|
3371
|
+
controlType="carousel"
|
|
3372
|
+
.value="${this.selectedRegistry}"
|
|
3373
|
+
.carouselItems="${this.registries}"
|
|
3374
|
+
.carouselItemRenderer=${(registry) => this._renderRegistryItem(registry)}
|
|
3375
|
+
></axebow-input>
|
|
3376
|
+
`;
|
|
3377
|
+
}
|
|
3378
|
+
_renderOneShotRegistryInputs() {
|
|
3379
|
+
const secretOptions = this._secretOptions();
|
|
3380
|
+
const urlValid = isValidRegistryUrl(this.oneShotRegistryUrl);
|
|
3381
|
+
return html`
|
|
3382
|
+
<div class="flex flex-col gap-4">
|
|
3383
|
+
<p>${unsafeHTML(this.labels.oneShotRegistryDescription)}</p>
|
|
3384
|
+
<div class="flex gap-[2%] w-full">
|
|
3385
|
+
<div class="flex-1 min-w-0">
|
|
3386
|
+
<axebow-input
|
|
3387
|
+
label="${this.labels.registryUrlLabel}"
|
|
3388
|
+
placeholder="${this.labels.registryUrlPlaceholder}"
|
|
3389
|
+
required
|
|
3390
|
+
.value="${this.oneShotRegistryUrl}"
|
|
3391
|
+
.hasError="${!urlValid}"
|
|
3392
|
+
.errorMessage="${this.labels.registryUrlInvalidLabel}"
|
|
3393
|
+
.callback=${(e) => this.onRegistryUrlChange?.(e.target.value)}
|
|
3394
|
+
maxlength="500"
|
|
3395
|
+
></axebow-input>
|
|
3396
|
+
</div>
|
|
3397
|
+
<div class="flex-1 min-w-0 flex flex-col">
|
|
3398
|
+
<div class="flex items-baseline gap-2" style="height: 1.0625rem; margin-bottom: 0.25rem;">
|
|
3399
|
+
<h4 class="font-semibold text-base leading-4.25 m-0 overflow-hidden text-ellipsis">
|
|
3400
|
+
${this.labels.registryCredentialsLabel}
|
|
3401
|
+
</h4>
|
|
3402
|
+
</div>
|
|
3403
|
+
<sl-select
|
|
3404
|
+
placeholder="${this.labels.registryCredentialsPlaceholder}"
|
|
3405
|
+
clearable
|
|
3406
|
+
hoist
|
|
3407
|
+
.value="${this.oneShotRegistrySecret}"
|
|
3408
|
+
@sl-change=${(e) => this.onRegistrySecretSelect?.(e.target.value)}
|
|
3409
|
+
>
|
|
3410
|
+
<div
|
|
3411
|
+
class="flex items-center gap-2 cursor-pointer px-4 py-1"
|
|
3412
|
+
@click=${(e) => {
|
|
3413
|
+
e.stopPropagation();
|
|
3414
|
+
this.onCreateSecret?.();
|
|
3415
|
+
}}
|
|
3416
|
+
>
|
|
3417
|
+
<axebow-icon iconName="add" iconColor="var(--axebow-tertiary)" size="md"></axebow-icon>
|
|
3418
|
+
${this.labels.createNewSecretLabel}
|
|
3419
|
+
</div>
|
|
3420
|
+
${secretOptions.length > 0 ? html`<sl-divider></sl-divider>` : ""}
|
|
3421
|
+
${secretOptions.map((s) => html`<sl-option value="${s.name}">${s.name}</sl-option>`)}
|
|
3422
|
+
${secretOptions.length === 0 ? html`<sl-option disabled>${this.labels.noSecretsAvailableLabel}</sl-option>` : ""}
|
|
3423
|
+
</sl-select>
|
|
3424
|
+
</div>
|
|
3425
|
+
</div>
|
|
3426
|
+
</div>
|
|
3427
|
+
`;
|
|
3428
|
+
}
|
|
3429
|
+
render() {
|
|
3430
|
+
return html`
|
|
3431
|
+
<axebow-tab-selector
|
|
3432
|
+
class="w-full"
|
|
3433
|
+
.disabled=${this.disabled}
|
|
3434
|
+
.activeTab=${this.activeTab}
|
|
3435
|
+
@tab-change=${(e) => this.onTabChange?.(e.detail.index)}
|
|
3436
|
+
>
|
|
3437
|
+
<span slot="tab-label-0">${this.labels.defaultRegistryTabLabel}</span>
|
|
3438
|
+
<div slot="tab-panel-0">${this._renderRegistryCarousel()}</div>
|
|
3439
|
+
|
|
3440
|
+
<span slot="tab-label-1">${this.labels.oneShotRegistryTabLabel}</span>
|
|
3441
|
+
<div slot="tab-panel-1">${this._renderOneShotRegistryInputs()}</div>
|
|
3442
|
+
</axebow-tab-selector>
|
|
3443
|
+
`;
|
|
3444
|
+
}
|
|
3445
|
+
};
|
|
3446
|
+
__decorate([property({ type: Boolean })], AxebowRegistrySelector.prototype, "disabled", void 0);
|
|
3447
|
+
__decorate([property({ type: Number })], AxebowRegistrySelector.prototype, "activeTab", void 0);
|
|
3448
|
+
__decorate([property({ type: Array })], AxebowRegistrySelector.prototype, "registries", void 0);
|
|
3449
|
+
__decorate([property({ type: String })], AxebowRegistrySelector.prototype, "selectedRegistry", void 0);
|
|
3450
|
+
__decorate([property({ type: String })], AxebowRegistrySelector.prototype, "oneShotRegistryUrl", void 0);
|
|
3451
|
+
__decorate([property({ type: String })], AxebowRegistrySelector.prototype, "oneShotRegistrySecret", void 0);
|
|
3452
|
+
__decorate([property({ type: Array })], AxebowRegistrySelector.prototype, "secrets", void 0);
|
|
3453
|
+
__decorate([property({ attribute: false })], AxebowRegistrySelector.prototype, "labels", void 0);
|
|
3454
|
+
__decorate([property({ attribute: false })], AxebowRegistrySelector.prototype, "onTabChange", void 0);
|
|
3455
|
+
__decorate([property({ attribute: false })], AxebowRegistrySelector.prototype, "onRegistrySelect", void 0);
|
|
3456
|
+
__decorate([property({ attribute: false })], AxebowRegistrySelector.prototype, "onRegistryUrlChange", void 0);
|
|
3457
|
+
__decorate([property({ attribute: false })], AxebowRegistrySelector.prototype, "onRegistrySecretSelect", void 0);
|
|
3458
|
+
__decorate([property({ attribute: false })], AxebowRegistrySelector.prototype, "onCreateSecret", void 0);
|
|
3459
|
+
__decorate([property({ attribute: false })], AxebowRegistrySelector.prototype, "onValidityChange", void 0);
|
|
3460
|
+
AxebowRegistrySelector = __decorate([customElement("axebow-registry-selector")], AxebowRegistrySelector);
|
|
3461
|
+
//#endregion
|
|
2968
3462
|
//#region src/components/axebow-dialog/axebow-dialog.ts
|
|
2969
3463
|
var AxebowDialog = class AxebowDialog extends LitElement {
|
|
2970
3464
|
constructor(..._args) {
|
|
@@ -3111,7 +3605,7 @@ var AxebowCollaboratorsDialog = class AxebowCollaboratorsDialog extends LitEleme
|
|
|
3111
3605
|
}
|
|
3112
3606
|
sl-dialog::part(panel) {
|
|
3113
3607
|
background-color: var(--axebow-base);
|
|
3114
|
-
border-radius:
|
|
3608
|
+
border-radius: 0.375rem;
|
|
3115
3609
|
height: min(38.6875rem, 90vh);
|
|
3116
3610
|
padding: 24px;
|
|
3117
3611
|
box-sizing: border-box;
|
|
@@ -3260,7 +3754,7 @@ var AxebowCollaboratorsDialog = class AxebowCollaboratorsDialog extends LitEleme
|
|
|
3260
3754
|
${index !== this.collaborators.length - 1 ? "border-b border-gray-200" : ""}"
|
|
3261
3755
|
>
|
|
3262
3756
|
<div class="flex items-center gap-2 min-w-0 flex-1">
|
|
3263
|
-
<div class="w-9 h-9 bg-white rounded
|
|
3757
|
+
<div class="w-9 h-9 bg-white rounded flex items-center justify-center shrink-0">
|
|
3264
3758
|
${c.invitePending ? html`<axebow-icon
|
|
3265
3759
|
iconName="outgoing_mail"
|
|
3266
3760
|
iconColor="var(--axebow-dark-yellow)"
|
|
@@ -3472,7 +3966,7 @@ var AxebowModalsConfirmation = class AxebowModalsConfirmation extends LitElement
|
|
|
3472
3966
|
/* Shoelace Dialog Custom Overrides */
|
|
3473
3967
|
sl-dialog::part(panel) {
|
|
3474
3968
|
background-color: var(--axebow-confirmation-modal-bg, #f0f1f5);
|
|
3475
|
-
border-radius:
|
|
3969
|
+
border-radius: 0.375rem;
|
|
3476
3970
|
box-shadow: 2px 2px 25px rgba(0, 0, 0, 0.1);
|
|
3477
3971
|
padding: 0;
|
|
3478
3972
|
width: 100%;
|
|
@@ -3496,7 +3990,7 @@ var AxebowModalsConfirmation = class AxebowModalsConfirmation extends LitElement
|
|
|
3496
3990
|
/* Standalone container styles (when rendered inline or without dialog) */
|
|
3497
3991
|
.modal-card {
|
|
3498
3992
|
background-color: var(--axebow-confirmation-modal-bg, #f0f1f5);
|
|
3499
|
-
border-radius:
|
|
3993
|
+
border-radius: 0.375rem;
|
|
3500
3994
|
box-shadow: 2px 2px 25px rgba(0, 0, 0, 0.1);
|
|
3501
3995
|
padding: 24px;
|
|
3502
3996
|
width: 100%;
|
|
@@ -3507,7 +4001,7 @@ var AxebowModalsConfirmation = class AxebowModalsConfirmation extends LitElement
|
|
|
3507
4001
|
/* Form Input Styling */
|
|
3508
4002
|
.form-field-input::part(base) {
|
|
3509
4003
|
height: 40px;
|
|
3510
|
-
border-radius:
|
|
4004
|
+
border-radius: 0.375rem;
|
|
3511
4005
|
border: 1px solid #dbdde4;
|
|
3512
4006
|
background-color: #ffffff;
|
|
3513
4007
|
padding-left: 12px;
|
|
@@ -3542,7 +4036,7 @@ var AxebowModalsConfirmation = class AxebowModalsConfirmation extends LitElement
|
|
|
3542
4036
|
.modal-btn {
|
|
3543
4037
|
width: 150px;
|
|
3544
4038
|
height: 40px;
|
|
3545
|
-
border-radius:
|
|
4039
|
+
border-radius: 0.375rem;
|
|
3546
4040
|
font-size: 14px;
|
|
3547
4041
|
font-weight: 600;
|
|
3548
4042
|
font-family: 'Open Sans', sans-serif;
|
|
@@ -4219,7 +4713,7 @@ var AxebowDragDropUploadFile = class AxebowDragDropUploadFile extends LitElement
|
|
|
4219
4713
|
render() {
|
|
4220
4714
|
return html`
|
|
4221
4715
|
<div
|
|
4222
|
-
class="dropzone w-full h-[8.26375rem] box-border flex flex-col items-center justify-center overflow-hidden border-2 border-dashed rounded-
|
|
4716
|
+
class="dropzone w-full h-[8.26375rem] box-border flex flex-col items-center justify-center overflow-hidden border-2 border-dashed rounded-md p-4 text-center transition-all duration-300 ease-in-out cursor-pointer ${this.errorMessage ? "border-[var(--axebow-error)] bg-red-50" : this.fileName ? "border-[var(--axebow-tertiary)] bg-sky-50" : this._isDragging ? "is-active border-[var(--axebow-tertiary)] bg-sky-100 scale-[1.02]" : "border-gray-300 bg-white hover:border-[var(--axebow-tertiary)] hover:bg-gray-50"}"
|
|
4223
4717
|
@click=${this._triggerFileInput}
|
|
4224
4718
|
@dragover=${this._handleDragOver}
|
|
4225
4719
|
@dragleave=${this._handleDragLeave}
|
|
@@ -4350,9 +4844,9 @@ var AxebowBanner = class AxebowBanner extends LitElement {
|
|
|
4350
4844
|
const classes = map[this.type] || map.info;
|
|
4351
4845
|
return html`
|
|
4352
4846
|
<div
|
|
4353
|
-
class="w-full ${this.compact ? "px-3 py-1.5" : "px-4 pb-4 pt-3"} border ${classes.border} border-solid ${classes.bg} ${this.rounded ? "rounded-
|
|
4847
|
+
class="w-full ${this.compact ? "px-3 py-1.5" : "px-4 pb-4 pt-3"} border ${classes.border} border-solid ${classes.bg} ${this.rounded ? "rounded-md" : ""} flex items-start gap-[0.625rem]"
|
|
4354
4848
|
>
|
|
4355
|
-
<div class="shrink-0">
|
|
4849
|
+
<div class="w-6 h-6 shrink-0 flex items-center justify-center">
|
|
4356
4850
|
${this.iconName ? html`<axebow-icon
|
|
4357
4851
|
class="${classes.icon}"
|
|
4358
4852
|
iconName="${this.iconName}"
|
|
@@ -4363,7 +4857,7 @@ var AxebowBanner = class AxebowBanner extends LitElement {
|
|
|
4363
4857
|
iconColor="${classes.icon}"
|
|
4364
4858
|
></axebow-icon>`}
|
|
4365
4859
|
</div>
|
|
4366
|
-
<div class="flex-1
|
|
4860
|
+
<div class="flex-1">
|
|
4367
4861
|
<slot></slot>
|
|
4368
4862
|
</div>
|
|
4369
4863
|
</div>
|
|
@@ -4661,7 +5155,14 @@ var AxebowMoreActions = class AxebowMoreActions extends LitElement {
|
|
|
4661
5155
|
};
|
|
4662
5156
|
}
|
|
4663
5157
|
static {
|
|
4664
|
-
this.styles = [unsafeCSS(tailwind_default), css
|
|
5158
|
+
this.styles = [unsafeCSS(tailwind_default), css`
|
|
5159
|
+
:host {
|
|
5160
|
+
display: inline-block;
|
|
5161
|
+
}
|
|
5162
|
+
axebow-button::part(base) {
|
|
5163
|
+
min-width: auto !important;
|
|
5164
|
+
}
|
|
5165
|
+
`];
|
|
4665
5166
|
}
|
|
4666
5167
|
connectedCallback() {
|
|
4667
5168
|
super.connectedCallback();
|
|
@@ -4698,22 +5199,25 @@ var AxebowMoreActions = class AxebowMoreActions extends LitElement {
|
|
|
4698
5199
|
const dropdownStyle = this.openToRight ? `position:fixed;top:${this._fixedPos.top}px;right:${this._fixedPos.right}px;z-index:1000;` : "";
|
|
4699
5200
|
return html`
|
|
4700
5201
|
<div class="relative w-full h-full flex justify-end">
|
|
4701
|
-
<button
|
|
4702
|
-
class="trigger
|
|
5202
|
+
<axebow-button
|
|
5203
|
+
class="trigger w-full h-full"
|
|
5204
|
+
variant="tertiary"
|
|
5205
|
+
fixedWidth="100%"
|
|
5206
|
+
fixedHeight=${this.fixedHeight}
|
|
4703
5207
|
?disabled=${this.disabled}
|
|
4704
5208
|
@click=${this._toggle}
|
|
4705
5209
|
>
|
|
4706
|
-
${this.iconName ? html`<axebow-icon iconName=${this.iconName} size="md" iconColor="
|
|
4707
|
-
</button>
|
|
5210
|
+
${this.iconName ? html`<axebow-icon iconName=${this.iconName} size="md" iconColor="currentColor"></axebow-icon>` : this.open ? this.closeLabel : this.title || this.moreActionsLabel}
|
|
5211
|
+
</axebow-button>
|
|
4708
5212
|
${this.open ? html`
|
|
4709
5213
|
<div
|
|
4710
|
-
class="absolute right-0 z-10 bg-white border border-(--axebow-gray) rounded-
|
|
5214
|
+
class="absolute right-0 z-10 bg-white border border-(--axebow-gray) rounded-md shadow-[2px_2px_25px_0px_rgba(0,0,0,0.1)] p-2 min-w-44 flex flex-col ${placementClass}"
|
|
4711
5215
|
style=${dropdownStyle}
|
|
4712
5216
|
@click=${this._handleSlotClick}
|
|
4713
5217
|
>
|
|
4714
5218
|
${this.options?.length ? this.options.map((opt) => html`
|
|
4715
5219
|
<button
|
|
4716
|
-
class="flex items-center gap-2 text-left py-1 px-2 cursor-pointer rounded
|
|
5220
|
+
class="flex items-center gap-2 text-left py-1 px-2 cursor-pointer rounded border border-transparent bg-transparent w-full hover:bg-gray-100"
|
|
4717
5221
|
@click=${(e) => {
|
|
4718
5222
|
e.stopPropagation();
|
|
4719
5223
|
opt.onTap(e);
|
|
@@ -4742,6 +5246,7 @@ __decorate([property({ type: String })], AxebowMoreActions.prototype, "iconName"
|
|
|
4742
5246
|
__decorate([property({ type: Boolean })], AxebowMoreActions.prototype, "openToRight", void 0);
|
|
4743
5247
|
__decorate([property({ type: String })], AxebowMoreActions.prototype, "closeLabel", void 0);
|
|
4744
5248
|
__decorate([property({ type: String })], AxebowMoreActions.prototype, "moreActionsLabel", void 0);
|
|
5249
|
+
__decorate([property({ type: String })], AxebowMoreActions.prototype, "fixedHeight", void 0);
|
|
4745
5250
|
__decorate([state()], AxebowMoreActions.prototype, "_fixedPos", void 0);
|
|
4746
5251
|
AxebowMoreActions = __decorate([customElement("axebow-more-actions")], AxebowMoreActions);
|
|
4747
5252
|
//#endregion
|
|
@@ -5013,7 +5518,7 @@ var AxebowCardHeader = class AxebowCardHeader extends LitElement {
|
|
|
5013
5518
|
const isRuntime = this.cardType === "runtime";
|
|
5014
5519
|
const heightStyle = `height:${this._headerHeight()}`;
|
|
5015
5520
|
if (isCompact) return html`
|
|
5016
|
-
<div class="${isTenant ? "w-88.5 mx-auto" : "w-full"} bg-(--axebow-anti-flash-white) rounded-
|
|
5521
|
+
<div class="${isTenant ? "w-88.5 mx-auto" : "w-full"} bg-(--axebow-anti-flash-white) rounded-md flex flex-col justify-center px-5 py-3 box-border" style=${heightStyle}>
|
|
5017
5522
|
<div class="flex flex-col flex-1 min-w-0">
|
|
5018
5523
|
${this.tenantOrAccount || this.logoSrc ? html`
|
|
5019
5524
|
<div class="flex gap-2 items-center leading-none mt-1">
|
|
@@ -5041,7 +5546,7 @@ var AxebowCardHeader = class AxebowCardHeader extends LitElement {
|
|
|
5041
5546
|
</div>
|
|
5042
5547
|
`;
|
|
5043
5548
|
return html`
|
|
5044
|
-
<div class="w-full bg-(--axebow-anti-flash-white) rounded-
|
|
5549
|
+
<div class="w-full bg-(--axebow-anti-flash-white) rounded-md flex items-center ${isRuntime ? "gap-3 py-2 px-3" : "gap-2 py-2 px-2"} box-border" style=${heightStyle}>
|
|
5045
5550
|
<axebow-card-cloud-logo .src=${this.logoSrc} size="large"></axebow-card-cloud-logo>
|
|
5046
5551
|
<div class="flex flex-col ${isRuntime ? "flex-1 min-w-0 justify-center" : "w-71 h-9.75"}">
|
|
5047
5552
|
${!isRuntime && this.tenantOrAccount ? html`<div class="h-4.25 flex items-center"><span class="text-base font-semibold text-(--axebow-gray) leading-none">${this.tenantOrAccount}</span></div>` : ""}
|
|
@@ -5768,7 +6273,7 @@ var AxebowBaseCard = class AxebowBaseCard extends LitElement {
|
|
|
5768
6273
|
const showBanner = showErrorBanner || showNormalBanner;
|
|
5769
6274
|
return html`
|
|
5770
6275
|
<div
|
|
5771
|
-
class="${_AxebowBaseCard.SIZE_CLASSES[this.cardType]} bg-(--axebow-white) rounded-
|
|
6276
|
+
class="${_AxebowBaseCard.SIZE_CLASSES[this.cardType]} bg-(--axebow-white) rounded-md px-2 pt-2 pb-2 flex flex-col justify-between gap-2 box-border ${isRuntime ? "border-t-4" : ""} transition-shadow duration-200 ease-in-out hover:shadow-[0_4px_12px_0_rgba(13,24,33,0.08)] ${this.isDeleting ? "pointer-events-none cursor-not-allowed grayscale" : ""}"
|
|
5772
6277
|
style=${isRuntime ? `border-top-color:${this.borderColor};` : ""}
|
|
5773
6278
|
?inert=${this.isDeleting}
|
|
5774
6279
|
>
|
|
@@ -5803,7 +6308,7 @@ var AxebowBaseCard = class AxebowBaseCard extends LitElement {
|
|
|
5803
6308
|
${isRuntime ? html`
|
|
5804
6309
|
<div class="flex flex-row justify-between items-center min-h-10 max-h-10 overflow-hidden">
|
|
5805
6310
|
<span class="deploy-time text-(--axebow-secondary)"><slot name="time-elapsed"></slot></span>
|
|
5806
|
-
${this.isDeployed ? html`<span class="text-(--axebow-secondary) border-2 border-(--axebow-secondary) rounded-
|
|
6311
|
+
${this.isDeployed ? html`<span class="text-(--axebow-secondary) border-2 border-(--axebow-secondary) rounded-md py-0.5 px-1.5 whitespace-nowrap text-xs">${this.deployedLabel}</span>` : ""}
|
|
5807
6312
|
</div>
|
|
5808
6313
|
` : html`
|
|
5809
6314
|
<axebow-card-stats-row
|
|
@@ -6112,7 +6617,7 @@ var AxebowAlert = class AxebowAlert extends LitElement {
|
|
|
6112
6617
|
const config = VARIANT_CONFIG[this.variant] ?? VARIANT_CONFIG.info;
|
|
6113
6618
|
return html`
|
|
6114
6619
|
<div
|
|
6115
|
-
class="theme flex items-start gap-3 p-4 rounded-
|
|
6620
|
+
class="theme flex items-start gap-3 p-4 rounded-md border-l-4 shadow-md transition-all duration-300 bg-white axebow-shadow"
|
|
6116
6621
|
style="border-left-color: ${config.iconColor};"
|
|
6117
6622
|
>
|
|
6118
6623
|
<axebow-icon iconName="${config.icon}" iconColor="${config.iconColor}" size="3xl"></axebow-icon>
|
|
@@ -6120,8 +6625,10 @@ var AxebowAlert = class AxebowAlert extends LitElement {
|
|
|
6120
6625
|
<p class="line-clamp-11 overflow-hidden m-0" .innerHTML=${this.message}></p>
|
|
6121
6626
|
</div>
|
|
6122
6627
|
${this.actionLabel ? html`<axebow-button
|
|
6123
|
-
variant="
|
|
6628
|
+
variant="text"
|
|
6124
6629
|
size="small"
|
|
6630
|
+
fixedWidth="2.3125rem"
|
|
6631
|
+
fixedHeight="1.0625rem"
|
|
6125
6632
|
@click=${() => {
|
|
6126
6633
|
this.onAction?.();
|
|
6127
6634
|
this._handleClose();
|
|
@@ -6252,7 +6759,7 @@ var AxebowServicesPanel = class AxebowServicesPanel extends LitElement {
|
|
|
6252
6759
|
<div class="flex items-start">
|
|
6253
6760
|
${this._renderCard()}
|
|
6254
6761
|
<div
|
|
6255
|
-
class="w-4.25 h-4.5 mt-2.25 pl-px flex items-center justify-center border border-l-0 border-solid border-(--axebow-tertiary) hover:border-(--axebow-gray) transition-colors duration-200 rounded
|
|
6762
|
+
class="w-4.25 h-4.5 mt-2.25 pl-px flex items-center justify-center border border-l-0 border-solid border-(--axebow-tertiary) hover:border-(--axebow-gray) transition-colors duration-200 rounded cursor-pointer bg-(--axebow-tertiary)/15"
|
|
6256
6763
|
@click=${this._handleToggle}
|
|
6257
6764
|
>
|
|
6258
6765
|
<axebow-icon iconName="close" iconColor="var(--axebow-tertiary)" size="md"></axebow-icon>
|
|
@@ -6265,11 +6772,9 @@ var AxebowServicesPanel = class AxebowServicesPanel extends LitElement {
|
|
|
6265
6772
|
<div class="flex flex-col gap-2 w-60.5 shrink-0">
|
|
6266
6773
|
<div class="h-full bg-white rounded-md axebow-shadow p-2 box-border">
|
|
6267
6774
|
<div class="flex justify-between items-center gap-4">
|
|
6268
|
-
<h1 class="font-semibold text-
|
|
6775
|
+
<h1 class="font-semibold text-base text-(--axebow-secondary) uppercase px-1">${this.title}</h1>
|
|
6269
6776
|
</div>
|
|
6270
6777
|
<div class="w-full h-px bg-(--axebow-light-gray)/80"></div>
|
|
6271
|
-
<p class="text-sm text-(--axebow-secondary) px-2 my-2">${this.dragDropText}</p>
|
|
6272
|
-
<div class="w-full h-px bg-(--axebow-light-gray)/80"></div>
|
|
6273
6778
|
<axebow-search
|
|
6274
6779
|
class="px-1 my-2"
|
|
6275
6780
|
width="13.625rem"
|
|
@@ -6277,6 +6782,8 @@ var AxebowServicesPanel = class AxebowServicesPanel extends LitElement {
|
|
|
6277
6782
|
.value=${this.searchTerm}
|
|
6278
6783
|
@search-change=${(e) => this._handleSearchChange(e.detail.value)}
|
|
6279
6784
|
></axebow-search>
|
|
6785
|
+
<div class="w-full h-px bg-(--axebow-light-gray)/80 my-1.5"></div>
|
|
6786
|
+
<p class="text-base text-center text-(--axebow-secondary) px-2">${this.dragDropText}</p>
|
|
6280
6787
|
<div class="w-full h-px bg-(--axebow-light-gray)/80"></div>
|
|
6281
6788
|
${this._renderServicesList()}
|
|
6282
6789
|
</div>
|
|
@@ -6472,14 +6979,14 @@ function buildChannelRow(ch) {
|
|
|
6472
6979
|
row.appendChild(overlay);
|
|
6473
6980
|
return row;
|
|
6474
6981
|
}
|
|
6475
|
-
function buildChannelSection(title, noChannelsText, channels, addButton
|
|
6982
|
+
function buildChannelSection(title, noChannelsText, channels, addButton) {
|
|
6476
6983
|
const fragment = document.createDocumentFragment();
|
|
6477
|
-
const titleDiv = createElement("div",
|
|
6984
|
+
const titleDiv = createElement("div", "channel-title");
|
|
6478
6985
|
const h4 = createElement("h4", void 0, title);
|
|
6479
6986
|
titleDiv.appendChild(h4);
|
|
6480
6987
|
if (addButton) titleDiv.appendChild(addButton);
|
|
6481
6988
|
fragment.appendChild(titleDiv);
|
|
6482
|
-
const listDiv = createElement("div"
|
|
6989
|
+
const listDiv = createElement("div");
|
|
6483
6990
|
if (channels.length === 0) listDiv.appendChild(createElement("p", "gray-text", noChannelsText));
|
|
6484
6991
|
else channels.forEach((ch) => listDiv.appendChild(buildChannelRow(ch)));
|
|
6485
6992
|
fragment.appendChild(listDiv);
|
|
@@ -6487,6 +6994,18 @@ function buildChannelSection(title, noChannelsText, channels, addButton, hidden
|
|
|
6487
6994
|
container.appendChild(fragment);
|
|
6488
6995
|
return container;
|
|
6489
6996
|
}
|
|
6997
|
+
function buildComingSoonSection(title, comingSoonText) {
|
|
6998
|
+
const fragment = document.createDocumentFragment();
|
|
6999
|
+
const titleDiv = createElement("div", "channel-title");
|
|
7000
|
+
titleDiv.appendChild(createElement("h4", void 0, title));
|
|
7001
|
+
fragment.appendChild(titleDiv);
|
|
7002
|
+
const listDiv = createElement("div");
|
|
7003
|
+
listDiv.appendChild(createElement("p", "gray-text", comingSoonText));
|
|
7004
|
+
fragment.appendChild(listDiv);
|
|
7005
|
+
const container = createElement("div");
|
|
7006
|
+
container.appendChild(fragment);
|
|
7007
|
+
return container;
|
|
7008
|
+
}
|
|
6490
7009
|
function buildAddButton(channelType) {
|
|
6491
7010
|
const container = createElement("div", "add-button-container");
|
|
6492
7011
|
container.classList.add(`add-button-${channelType}`);
|
|
@@ -6504,12 +7023,12 @@ function buildAddButton(channelType) {
|
|
|
6504
7023
|
});
|
|
6505
7024
|
return container;
|
|
6506
7025
|
}
|
|
6507
|
-
function buildDivider(
|
|
7026
|
+
function buildDivider() {
|
|
6508
7027
|
const divider = document.createElement("sl-divider");
|
|
6509
|
-
|
|
7028
|
+
divider.classList.add("mesh-node-divider");
|
|
6510
7029
|
return divider;
|
|
6511
7030
|
}
|
|
6512
|
-
function buildMainNodeContent(data, labels, serverAddButton, clientAddButton
|
|
7031
|
+
function buildMainNodeContent(data, labels, serverAddButton, clientAddButton) {
|
|
6513
7032
|
const root = createElement("div");
|
|
6514
7033
|
root.setAttribute("data-node-type", "main");
|
|
6515
7034
|
const card = createElement("div", "service-card");
|
|
@@ -6519,8 +7038,8 @@ function buildMainNodeContent(data, labels, serverAddButton, clientAddButton, du
|
|
|
6519
7038
|
card.appendChild(buildDivider());
|
|
6520
7039
|
const clientSection = buildChannelSection(labels.clientChannelsTitle, labels.noChannelsText, data.clientChannels || [], clientAddButton);
|
|
6521
7040
|
card.appendChild(clientSection);
|
|
6522
|
-
card.appendChild(buildDivider(
|
|
6523
|
-
const duplexSection =
|
|
7041
|
+
card.appendChild(buildDivider());
|
|
7042
|
+
const duplexSection = buildComingSoonSection(labels.duplexChannelsTitle, labels.comingSoonText);
|
|
6524
7043
|
card.appendChild(duplexSection);
|
|
6525
7044
|
root.appendChild(card);
|
|
6526
7045
|
return root;
|
|
@@ -6572,15 +7091,17 @@ var AxebowHelpBubble = class AxebowHelpBubble extends LitElement {
|
|
|
6572
7091
|
@mouseleave=${() => this._isOpen = false}
|
|
6573
7092
|
>
|
|
6574
7093
|
${this._isOpen ? html`
|
|
6575
|
-
<div class="flex flex-col bg-white rounded-
|
|
7094
|
+
<div class="flex flex-col bg-white rounded-md axebow-shadow overflow-hidden min-w-[8.2rem]">
|
|
6576
7095
|
<div class="flex justify-center px-3 py-1">
|
|
6577
7096
|
<div class="flex flex-col">
|
|
6578
7097
|
${this.options.map((option) => html`
|
|
6579
7098
|
<div
|
|
6580
|
-
class="flex items-center gap-2 px-3 py-1 my-0.5 rounded-
|
|
7099
|
+
class="flex items-center gap-2 px-3 py-1 my-0.5 rounded-md cursor-pointer hover:bg-[var(--axebow-anti-flash-white)] transition-colors"
|
|
6581
7100
|
@click=${() => this._openLink(option.url)}
|
|
6582
7101
|
>
|
|
6583
|
-
<span class="font-
|
|
7102
|
+
<span class="text-sm font-semibold text-(--axebow-primary) whitespace-nowrap"
|
|
7103
|
+
>${option.label}</span
|
|
7104
|
+
>
|
|
6584
7105
|
<axebow-icon iconName="open_in_new" iconColor="var(--axebow-gray)" size="base"></axebow-icon>
|
|
6585
7106
|
</div>
|
|
6586
7107
|
`)}
|
|
@@ -6589,7 +7110,7 @@ var AxebowHelpBubble = class AxebowHelpBubble extends LitElement {
|
|
|
6589
7110
|
</div>
|
|
6590
7111
|
` : ""}
|
|
6591
7112
|
<div
|
|
6592
|
-
class="w-12 h-12 rounded-full flex items-center justify-center cursor-pointer shadow-lg transition-colors duration-200 self-end ${this._isOpen ? "bg-
|
|
7113
|
+
class="w-12 h-12 rounded-full flex items-center justify-center cursor-pointer shadow-lg transition-colors duration-200 self-end ${this._isOpen ? "bg-(--axebow-gray)" : "bg-(--axebow-tertiary)"}"
|
|
6593
7114
|
>
|
|
6594
7115
|
<axebow-icon iconName="contact_support" iconColor="white" size="xl"></axebow-icon>
|
|
6595
7116
|
</div>
|
|
@@ -6619,11 +7140,11 @@ var AxebowNumberCard = class AxebowNumberCard extends LitElement {
|
|
|
6619
7140
|
render() {
|
|
6620
7141
|
return html`
|
|
6621
7142
|
<div
|
|
6622
|
-
class="flex items-center gap-3 w-70.5 h-20 box-border bg-white border-solid border border-[#DBDDE4] rounded-
|
|
7143
|
+
class="flex items-center gap-3 w-70.5 h-20 box-border bg-white border-solid border border-[#DBDDE4] rounded-md p-3 ${!!this.onClick ? "cursor-pointer axebow-shadow-hover" : ""}"
|
|
6623
7144
|
@click=${() => this.onClick?.()}
|
|
6624
7145
|
>
|
|
6625
7146
|
<div
|
|
6626
|
-
class="w-10.5 h-10.5 shrink-0 flex items-center justify-center bg-(--axebow-base) rounded-
|
|
7147
|
+
class="w-10.5 h-10.5 shrink-0 flex items-center justify-center bg-(--axebow-base) rounded-md"
|
|
6627
7148
|
>
|
|
6628
7149
|
<axebow-icon iconName=${this.icon} size="3xl"></axebow-icon>
|
|
6629
7150
|
</div>
|
|
@@ -6698,8 +7219,8 @@ var AxebowPill = class AxebowPill extends LitElement {
|
|
|
6698
7219
|
<div
|
|
6699
7220
|
class="pill group flex flex-col items-center justify-center gap-3 p-6
|
|
6700
7221
|
transition-colors duration-300
|
|
6701
|
-
bg-(--axebow-primary) rounded-
|
|
6702
|
-
hover:border-2 hover:px-
|
|
7222
|
+
bg-(--axebow-primary) rounded-md text-white cursor-pointer shadow-md
|
|
7223
|
+
hover:border-2 hover:px-5.5 hover:border-solid hover:border-(--axebow-primary)
|
|
6703
7224
|
hover:bg-white hover:text-(--axebow-primary) hover:shadow-lg"
|
|
6704
7225
|
@click=${() => this.onClick?.()}
|
|
6705
7226
|
@mouseenter=${this._handleMouseEnter}
|
|
@@ -6783,7 +7304,7 @@ var AxebowQuickTipButton = class AxebowQuickTipButton extends LitElement {
|
|
|
6783
7304
|
color: var(--axebow-gray);
|
|
6784
7305
|
transition: all 0.2s ease;
|
|
6785
7306
|
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
|
|
6786
|
-
border-radius:
|
|
7307
|
+
border-radius: 0.375rem 0.375rem 0 0;
|
|
6787
7308
|
}
|
|
6788
7309
|
|
|
6789
7310
|
.collapsed-button:hover {
|
|
@@ -6803,7 +7324,7 @@ var AxebowQuickTipButton = class AxebowQuickTipButton extends LitElement {
|
|
|
6803
7324
|
<axebow-icon
|
|
6804
7325
|
iconName="visibility_off"
|
|
6805
7326
|
class="cursor-pointer hover:text-(--axebow-tertiary) transition-colors"
|
|
6806
|
-
iconColor="
|
|
7327
|
+
iconColor="currentColor"
|
|
6807
7328
|
@click=${() => this.onToggle?.()}
|
|
6808
7329
|
></axebow-icon>
|
|
6809
7330
|
` : ""}
|
|
@@ -6815,7 +7336,7 @@ var AxebowQuickTipButton = class AxebowQuickTipButton extends LitElement {
|
|
|
6815
7336
|
<div class="collapsed-container" style="bottom: ${this.paddingBottom}px;" @click=${() => this.onToggle?.()}>
|
|
6816
7337
|
<button class="collapsed-button w-47.75 h-7 flex items-center justify-center gap-2 cursor-pointer">
|
|
6817
7338
|
<span class="whitespace-nowrap text-sm font-bold">${this.showLabel}</span>
|
|
6818
|
-
<axebow-icon iconName="visibility" size="md"></axebow-icon>
|
|
7339
|
+
<axebow-icon iconName="visibility" size="md" iconColor="currentColor"></axebow-icon>
|
|
6819
7340
|
</button>
|
|
6820
7341
|
</div>
|
|
6821
7342
|
`;
|
|
@@ -6842,7 +7363,7 @@ var AxebowInfrastructureCard = class AxebowInfrastructureCard extends LitElement
|
|
|
6842
7363
|
}
|
|
6843
7364
|
render() {
|
|
6844
7365
|
return html`
|
|
6845
|
-
<div class="w-294 flex flex-col bg-white rounded-
|
|
7366
|
+
<div class="w-294 flex flex-col bg-white rounded-md shadow-sm">
|
|
6846
7367
|
<h3 class="text-md font-bold leading-tight text-center mt-8 mx-12 mb-6.5 text-(--axebow-primary)">
|
|
6847
7368
|
${this.heading}
|
|
6848
7369
|
</h3>
|
|
@@ -6883,13 +7404,13 @@ var AxebowGettingStartedCard = class AxebowGettingStartedCard extends LitElement
|
|
|
6883
7404
|
}
|
|
6884
7405
|
render() {
|
|
6885
7406
|
return html`
|
|
6886
|
-
<div class="w-294 flex flex-col bg-white rounded-
|
|
7407
|
+
<div class="w-294 flex flex-col bg-white rounded-md shadow-sm">
|
|
6887
7408
|
<h2 class="text-md font-bold text-center mt-6 mx-6 mb-4 text-(--axebow-primary)">${this.heading}</h2>
|
|
6888
7409
|
<div class="w-282 mx-6">
|
|
6889
7410
|
<sl-divider style="width: 100%; margin: 0;"></sl-divider>
|
|
6890
7411
|
</div>
|
|
6891
7412
|
<div class="w-282 h-52.75 mx-6 flex flex-col">
|
|
6892
|
-
<p class="text-base text-center my-4 text-
|
|
7413
|
+
<p class="text-base text-center my-4 text-black">${this.description}</p>
|
|
6893
7414
|
<div class="flex gap-4">
|
|
6894
7415
|
${this.pills.map((pill) => html`
|
|
6895
7416
|
<axebow-pill
|
|
@@ -6906,20 +7427,22 @@ var AxebowGettingStartedCard = class AxebowGettingStartedCard extends LitElement
|
|
|
6906
7427
|
<div class="w-282 mx-6 mt-4 mb-4">
|
|
6907
7428
|
<sl-divider style="width: 100%; margin: 0;"></sl-divider>
|
|
6908
7429
|
</div>
|
|
6909
|
-
<div class="w-139 h-9.5 mx-auto mb-6 flex items-center justify-center gap-
|
|
7430
|
+
<div class="w-139 h-9.5 mx-auto mb-6 flex items-center justify-center gap-4">
|
|
6910
7431
|
${this.contactUrl ? html`
|
|
6911
7432
|
<axebow-button variant="primary" outline @click=${() => window.open(this.contactUrl, "_blank")}>
|
|
6912
7433
|
${this.contactLabel}
|
|
6913
7434
|
<axebow-icon iconName="open_in_new" size="md" slot="suffix"></axebow-icon>
|
|
6914
7435
|
</axebow-button>
|
|
6915
7436
|
` : ""}
|
|
6916
|
-
<
|
|
6917
|
-
|
|
6918
|
-
|
|
6919
|
-
|
|
6920
|
-
|
|
6921
|
-
|
|
6922
|
-
|
|
7437
|
+
<div class="flex items-center gap-2">
|
|
7438
|
+
<sl-checkbox
|
|
7439
|
+
.checked=${this.dontShowAgain}
|
|
7440
|
+
@sl-change=${(e) => this.onDontShowAgainChange?.(e.target.checked)}
|
|
7441
|
+
>
|
|
7442
|
+
${this.dontShowAgainLabel}
|
|
7443
|
+
</sl-checkbox>
|
|
7444
|
+
<axebow-button fixedWidth="5.625rem" variant="text" @click=${() => this.onNotNow?.()}>${this.notNowLabel}</axebow-button>
|
|
7445
|
+
</div>
|
|
6923
7446
|
</div>
|
|
6924
7447
|
</div>
|
|
6925
7448
|
`;
|
|
@@ -7050,7 +7573,7 @@ var AxebowMarketplaceCard = class AxebowMarketplaceCard extends LitElement {
|
|
|
7050
7573
|
_renderBadge() {
|
|
7051
7574
|
return html`
|
|
7052
7575
|
<div
|
|
7053
|
-
class="h-7.5 flex items-center justify-center gap-1 rounded
|
|
7576
|
+
class="h-7.5 flex items-center justify-center gap-1 rounded shrink-0"
|
|
7054
7577
|
style="width:${this.badgeWidth}; background-color:${this.badgeBgColor};"
|
|
7055
7578
|
>
|
|
7056
7579
|
${this.badgeIcon ? html`<span class="w-2 h-3 flex items-center justify-center overflow-hidden shrink-0">
|
|
@@ -7072,7 +7595,7 @@ var AxebowMarketplaceCard = class AxebowMarketplaceCard extends LitElement {
|
|
|
7072
7595
|
<div class="w-87 h-12.25 flex items-center gap-3 min-w-0 shrink-0">
|
|
7073
7596
|
<img
|
|
7074
7597
|
src="${this.logoSrc}"
|
|
7075
|
-
class="w-11.5 h-11.5 shrink-0 aspect-square object-contain rounded
|
|
7598
|
+
class="w-11.5 h-11.5 shrink-0 aspect-square object-contain rounded"
|
|
7076
7599
|
alt="${this.name} logo"
|
|
7077
7600
|
/>
|
|
7078
7601
|
<div class="flex flex-col gap-1.25 w-full min-w-0">
|
|
@@ -7171,7 +7694,7 @@ var AxebowDeployCard = class AxebowDeployCard extends LitElement {
|
|
|
7171
7694
|
return html`
|
|
7172
7695
|
<div
|
|
7173
7696
|
class="box-border p-3.25 flex items-center gap-4
|
|
7174
|
-
bg-(--axebow-white) border border-solid border-(--axebow-table-header-border) rounded-
|
|
7697
|
+
bg-(--axebow-white) border border-solid border-(--axebow-table-header-border) rounded-md
|
|
7175
7698
|
axebow-shadow-hover"
|
|
7176
7699
|
style="width:${this.width};height:${this.height};"
|
|
7177
7700
|
>
|
|
@@ -7230,7 +7753,7 @@ var AxebowResourceCard = class AxebowResourceCard extends LitElement {
|
|
|
7230
7753
|
render() {
|
|
7231
7754
|
return html`
|
|
7232
7755
|
<div
|
|
7233
|
-
class="w-full h-77.25 box-border bg-(--axebow-white) rounded-
|
|
7756
|
+
class="w-full h-77.25 box-border bg-(--axebow-white) rounded-md border border-solid border-(--axebow-table-header-border) flex flex-col axebow-shadow-hover overflow-hidden"
|
|
7234
7757
|
>
|
|
7235
7758
|
<div
|
|
7236
7759
|
class="w-full h-11 box-border shrink-0 flex items-center justify-between px-4 py-2.75
|
|
@@ -7371,7 +7894,6 @@ var AxebowQuickTipSection = class AxebowQuickTipSection extends LitElement {
|
|
|
7371
7894
|
.items=${this.infrastructureItems}
|
|
7372
7895
|
></axebow-infrastructure-card>
|
|
7373
7896
|
<axebow-getting-started-card
|
|
7374
|
-
class="w-full"
|
|
7375
7897
|
heading=${this.gettingStartedHeading}
|
|
7376
7898
|
description=${this.gettingStartedDescription}
|
|
7377
7899
|
.pills=${this.pills}
|
|
@@ -7472,31 +7994,31 @@ var AxebowTenantResourceTable = class AxebowTenantResourceTable extends LitEleme
|
|
|
7472
7994
|
class="w-full min-w-160 h-8 flex items-center gap-2 rounded-md bg-(--axebow-base) border border-solid border-(--axebow-table-header-border) px-4 box-border"
|
|
7473
7995
|
>
|
|
7474
7996
|
<div class="flex items-center gap-2 flex-1 min-w-44 shrink-0">
|
|
7475
|
-
<span class="flex-1 text-center
|
|
7997
|
+
<span class="flex-1 text-center font-semibold text-gray-600 truncate">${l.rowTitle}</span>
|
|
7476
7998
|
${this._renderDivider()}
|
|
7477
7999
|
</div>
|
|
7478
8000
|
<div class="flex items-center gap-2 w-16 shrink-0">
|
|
7479
|
-
<span class="flex-1 text-center
|
|
8001
|
+
<span class="flex-1 text-center font-semibold text-gray-600">${l.vCpu}</span>
|
|
7480
8002
|
${this._renderDivider()}
|
|
7481
8003
|
</div>
|
|
7482
8004
|
<div class="flex items-center gap-2 flex-1 min-w-32 shrink-0">
|
|
7483
|
-
<span class="flex-1 text-center
|
|
8005
|
+
<span class="flex-1 text-center font-semibold text-gray-600">${l.vCpuUtil}</span>
|
|
7484
8006
|
${this._renderDivider()}
|
|
7485
8007
|
</div>
|
|
7486
8008
|
<div class="flex items-center gap-2 w-20 shrink-0">
|
|
7487
|
-
<span class="flex-1 text-center
|
|
8009
|
+
<span class="flex-1 text-center font-semibold text-gray-600">${l.memory}</span>
|
|
7488
8010
|
${this._renderDivider()}
|
|
7489
8011
|
</div>
|
|
7490
8012
|
<div class="flex items-center gap-2 flex-1 min-w-32 shrink-0">
|
|
7491
|
-
<span class="flex-1 text-center
|
|
8013
|
+
<span class="flex-1 text-center font-semibold text-gray-600">${l.memUtil}</span>
|
|
7492
8014
|
${this._renderDivider()}
|
|
7493
8015
|
</div>
|
|
7494
8016
|
<div class="flex items-center gap-2 w-24 shrink-0">
|
|
7495
|
-
<span class="flex-1 text-center
|
|
8017
|
+
<span class="flex-1 text-center font-semibold text-gray-600">${l.storage}</span>
|
|
7496
8018
|
${this.showActions ? this._renderDivider() : ""}
|
|
7497
8019
|
</div>
|
|
7498
|
-
${this.showActions ? html`<div class="flex items-center flex-1 min-w-
|
|
7499
|
-
<span class="flex-1 text-center
|
|
8020
|
+
${this.showActions ? html`<div class="flex items-center flex-1 min-w-53.25 shrink-0">
|
|
8021
|
+
<span class="flex-1 text-center font-semibold text-gray-600">${l.actions}</span>
|
|
7500
8022
|
</div>` : ""}
|
|
7501
8023
|
</div>
|
|
7502
8024
|
`;
|
|
@@ -7504,7 +8026,7 @@ var AxebowTenantResourceTable = class AxebowTenantResourceTable extends LitEleme
|
|
|
7504
8026
|
_renderChartCell(chart, percent, idPrefix) {
|
|
7505
8027
|
if (!chart || !chart.labels || chart.labels.length === 0) return html`
|
|
7506
8028
|
<div class="flex items-center justify-center">
|
|
7507
|
-
<span class="
|
|
8029
|
+
<span class="font-normal text-gray-700">${percent ?? "0.0"}%</span>
|
|
7508
8030
|
</div>
|
|
7509
8031
|
`;
|
|
7510
8032
|
return html`
|
|
@@ -7518,7 +8040,7 @@ var AxebowTenantResourceTable = class AxebowTenantResourceTable extends LitEleme
|
|
|
7518
8040
|
.data=${{ Usage: chart.data }}
|
|
7519
8041
|
.yAxisMax=${chart.max}
|
|
7520
8042
|
></usage-chart>
|
|
7521
|
-
<span class="
|
|
8043
|
+
<span class="font-normal text-gray-700 whitespace-nowrap">${percent ?? "0.0"}%</span>
|
|
7522
8044
|
</div>
|
|
7523
8045
|
`;
|
|
7524
8046
|
}
|
|
@@ -7555,25 +8077,25 @@ var AxebowTenantResourceTable = class AxebowTenantResourceTable extends LitEleme
|
|
|
7555
8077
|
></axebow-icon>
|
|
7556
8078
|
` : html`<span class="w-4 inline-block"></span>`}
|
|
7557
8079
|
${row.logoUrl ? html`<img src=${row.logoUrl} class="w-5 h-5 object-contain shrink-0" />` : ""}
|
|
7558
|
-
<span class="
|
|
8080
|
+
<span class="font-semibold text-(--axebow-primary) truncate">${row.name}</span>
|
|
7559
8081
|
${this._renderStatusIcon(row.statusIcon)}
|
|
7560
8082
|
<span class="flex-1"></span>
|
|
7561
8083
|
${this._renderStatusIcon(row.warningIcon)}
|
|
7562
8084
|
</div>
|
|
7563
|
-
<div class="w-16 shrink-0 text-center
|
|
8085
|
+
<div class="w-16 shrink-0 text-center font-normal text-gray-700 whitespace-nowrap">${row.vCpu}</div>
|
|
7564
8086
|
<div class="flex-1 min-w-32 shrink-0">
|
|
7565
8087
|
${this._renderChartCell(row.vCpuChart, row.vCpuUtilizationPercent, `chart-account-${index}-vcpu`)}
|
|
7566
8088
|
</div>
|
|
7567
|
-
<div class="w-20 shrink-0 text-center
|
|
8089
|
+
<div class="w-20 shrink-0 text-center font-normal text-gray-700 whitespace-nowrap">${row.memory}</div>
|
|
7568
8090
|
<div class="flex-1 min-w-32 shrink-0">
|
|
7569
8091
|
${this._renderChartCell(row.memoryChart, row.memoryUtilizationPercent, `chart-account-${index}-mem`)}
|
|
7570
8092
|
</div>
|
|
7571
8093
|
<div class="w-24 shrink-0 flex items-center justify-center gap-1.5 min-w-0">
|
|
7572
|
-
<span class="
|
|
8094
|
+
<span class="font-normal text-gray-700">${row.storage}</span>
|
|
7573
8095
|
${row.usage ? html`<usage-tooltip .usage=${row.usage}></usage-tooltip>` : ""}
|
|
7574
8096
|
</div>
|
|
7575
8097
|
${this.showActions ? html`<div
|
|
7576
|
-
class="flex-1 min-w-
|
|
8098
|
+
class="flex-1 min-w-53.25 shrink-0 flex items-center gap-4"
|
|
7577
8099
|
@click=${(e) => e.stopPropagation()}
|
|
7578
8100
|
>
|
|
7579
8101
|
<div class="flex-1 flex items-center justify-center">
|
|
@@ -7587,6 +8109,7 @@ var AxebowTenantResourceTable = class AxebowTenantResourceTable extends LitEleme
|
|
|
7587
8109
|
openToRight
|
|
7588
8110
|
.options=${row.moreActions}
|
|
7589
8111
|
iconName="more_horiz"
|
|
8112
|
+
fixedHeight="2rem"
|
|
7590
8113
|
></axebow-more-actions>` : ""}
|
|
7591
8114
|
</div>` : ""}
|
|
7592
8115
|
</div>` : ""}
|
|
@@ -7602,7 +8125,7 @@ var AxebowTenantResourceTable = class AxebowTenantResourceTable extends LitEleme
|
|
|
7602
8125
|
const onActionBtn = subRow.onAction ?? subRow.onDeploy;
|
|
7603
8126
|
return html`
|
|
7604
8127
|
<div class="w-full min-w-160 min-h-12 flex items-center gap-2 bg-gray-50/50 border-t border-solid border-(--axebow-light-gray) py-1.5 px-4 box-border">
|
|
7605
|
-
<div class="flex-1 min-w-44 shrink-0 flex items-center gap-2
|
|
8128
|
+
<div class="flex-1 min-w-44 shrink-0 flex items-center gap-2">
|
|
7606
8129
|
<axebow-icon
|
|
7607
8130
|
iconName="subdirectory_arrow_right"
|
|
7608
8131
|
iconColor="var(--axebow-gray)"
|
|
@@ -7610,27 +8133,27 @@ var AxebowTenantResourceTable = class AxebowTenantResourceTable extends LitEleme
|
|
|
7610
8133
|
class="shrink-0"
|
|
7611
8134
|
></axebow-icon>
|
|
7612
8135
|
${subRow.logoUrl ? html`<img src=${subRow.logoUrl} class="w-5 h-5 object-contain shrink-0" />` : ""}
|
|
7613
|
-
<span class="
|
|
8136
|
+
<span class="font-normal text-gray-700 truncate">${subRow.name}</span>
|
|
7614
8137
|
<span class="flex-1"></span>
|
|
7615
8138
|
${this._renderStatusIcon(subRow.warningIcon)}
|
|
7616
8139
|
</div>
|
|
7617
|
-
<div class="w-16 shrink-0 text-center
|
|
8140
|
+
<div class="w-16 shrink-0 text-center font-normal text-gray-700 whitespace-nowrap">${subRow.vCpu}</div>
|
|
7618
8141
|
<div class="flex-1 min-w-32 shrink-0">
|
|
7619
8142
|
${this._renderChartCell(subRow.vCpuChart, subRow.vCpuUtilizationPercent, `chart-env-${rowIndex}-${subIndex}-vcpu`)}
|
|
7620
8143
|
</div>
|
|
7621
|
-
<div class="w-20 shrink-0 text-center
|
|
8144
|
+
<div class="w-20 shrink-0 text-center font-normal text-gray-700 whitespace-nowrap">${subRow.memory}</div>
|
|
7622
8145
|
<div class="flex-1 min-w-32 shrink-0">
|
|
7623
8146
|
${this._renderChartCell(subRow.memoryChart, subRow.memoryUtilizationPercent, `chart-env-${rowIndex}-${subIndex}-mem`)}
|
|
7624
8147
|
</div>
|
|
7625
8148
|
<div class="w-24 shrink-0 flex items-center justify-center gap-1.5 min-w-0">
|
|
7626
|
-
<span class="
|
|
8149
|
+
<span class="font-normal text-gray-700">${subRow.storage}</span>
|
|
7627
8150
|
${subRow.usage ? html`<usage-tooltip .usage=${subRow.usage}></usage-tooltip>` : ""}
|
|
7628
8151
|
</div>
|
|
7629
|
-
${this.showActions ? html`<div class="flex-1 min-w-
|
|
8152
|
+
${this.showActions ? html`<div class="flex-1 min-w-53.25 shrink-0 flex items-center gap-4">
|
|
7630
8153
|
<div class="flex-1 flex items-center justify-center">
|
|
7631
8154
|
${showActionBtn ? html`<axebow-button
|
|
7632
8155
|
variant="primary"
|
|
7633
|
-
fixedWidth="
|
|
8156
|
+
fixedWidth="9.9375rem"
|
|
7634
8157
|
fixedHeight="2rem"
|
|
7635
8158
|
?disabled=${actionBtnDisabled}
|
|
7636
8159
|
@click=${() => onActionBtn?.()}
|
|
@@ -7644,6 +8167,7 @@ var AxebowTenantResourceTable = class AxebowTenantResourceTable extends LitEleme
|
|
|
7644
8167
|
openToRight
|
|
7645
8168
|
.options=${subRow.moreActions}
|
|
7646
8169
|
iconName="more_horiz"
|
|
8170
|
+
fixedHeight="2rem"
|
|
7647
8171
|
></axebow-more-actions>` : ""}
|
|
7648
8172
|
</div>` : ""}
|
|
7649
8173
|
</div>` : ""}
|
|
@@ -7652,14 +8176,14 @@ var AxebowTenantResourceTable = class AxebowTenantResourceTable extends LitEleme
|
|
|
7652
8176
|
}
|
|
7653
8177
|
render() {
|
|
7654
8178
|
if (!this.rows || this.rows.length === 0) return html`
|
|
7655
|
-
<div class="w-full py-4 px-6 text-center bg-[#F0F1F5] rounded-
|
|
7656
|
-
<p class="text-
|
|
8179
|
+
<div class="w-full py-4 px-6 text-center bg-[#F0F1F5] rounded-md box-border">
|
|
8180
|
+
<p class="text-(--axebow-secondary) m-0 font-normal">
|
|
7657
8181
|
${this.emptyStateMessage || "There are currently no items in this table."}
|
|
7658
8182
|
</p>
|
|
7659
8183
|
</div>
|
|
7660
8184
|
`;
|
|
7661
8185
|
return html`
|
|
7662
|
-
<div class="w-full flex flex-col rounded-
|
|
8186
|
+
<div class="w-full flex flex-col rounded-md bg-white overflow-x-auto overflow-y-hidden box-border">
|
|
7663
8187
|
${this._renderHeader()}
|
|
7664
8188
|
<div>${this.rows.map((row, index) => this._renderTableRow(row, index))}</div>
|
|
7665
8189
|
</div>
|
|
@@ -7824,7 +8348,7 @@ var AxebowServiceDetailHeader = class AxebowServiceDetailHeader extends LitEleme
|
|
|
7824
8348
|
<div class="flex flex-col gap-1 ${widthClass} shrink-0">
|
|
7825
8349
|
${this._renderTitle(this.locationTitle)}
|
|
7826
8350
|
<div
|
|
7827
|
-
class="${widthClass} h-19.75 box-border flex items-center justify-between gap-4 bg-(--axebow-base) rounded-
|
|
8351
|
+
class="${widthClass} h-19.75 box-border flex items-center justify-between gap-4 bg-(--axebow-base) rounded-md py-4.75 px-4"
|
|
7828
8352
|
>
|
|
7829
8353
|
${this.locationLogoUrl ? html`<img src=${this.locationLogoUrl} class="h-full aspect-square object-contain shrink-0" />` : html`<div class="h-full aspect-square shrink-0"></div>`}
|
|
7830
8354
|
<div class="flex flex-col gap-0.5 min-w-0 flex-1">
|
|
@@ -7870,7 +8394,7 @@ var AxebowServiceDetailHeader = class AxebowServiceDetailHeader extends LitEleme
|
|
|
7870
8394
|
<div class="flex flex-col gap-1 w-66 shrink-0">
|
|
7871
8395
|
${this._renderTitle(title)}
|
|
7872
8396
|
<div
|
|
7873
|
-
class="w-66 h-19.75 box-border flex items-center justify-between gap-6 bg-(--axebow-base) rounded-
|
|
8397
|
+
class="w-66 h-19.75 box-border flex items-center justify-between gap-6 bg-(--axebow-base) rounded-md py-4.75 px-4"
|
|
7874
8398
|
>
|
|
7875
8399
|
<div class="flex flex-col items-start gap-0.5">
|
|
7876
8400
|
<span class="text-lg font-semibold text-(--axebow-primary)">${limits.cpu}</span>
|
|
@@ -7929,7 +8453,7 @@ var AxebowServiceDetailHeader = class AxebowServiceDetailHeader extends LitEleme
|
|
|
7929
8453
|
<div class="flex flex-col gap-1 w-32 shrink-0">
|
|
7930
8454
|
${this._renderTitle(this.actionNeededTitle)}
|
|
7931
8455
|
<div
|
|
7932
|
-
class="w-32 h-24.75 box-border flex items-center justify-center border border-solid border-(--axebow-light-gray) rounded-
|
|
8456
|
+
class="w-32 h-24.75 box-border flex items-center justify-center border border-solid border-(--axebow-light-gray) rounded-md"
|
|
7933
8457
|
>
|
|
7934
8458
|
<axebow-button variant="success" fixedWidth="5.625rem" fixedHeight="2.375rem" @click=${this._handleDeploy}>
|
|
7935
8459
|
${this.deployLabel}
|
|
@@ -8023,7 +8547,7 @@ var AxebowTenantCard = class AxebowTenantCard extends LitElement {
|
|
|
8023
8547
|
</div>
|
|
8024
8548
|
`;
|
|
8025
8549
|
return html`
|
|
8026
|
-
<div class="w-21.5 h-8 flex items-center justify-center rounded-
|
|
8550
|
+
<div class="w-21.5 h-8 flex items-center justify-center rounded-md bg-gray-100 px-2">
|
|
8027
8551
|
<span class="text-base font-semibold capitalize text-(--axebow-gray) truncate">${this.planLabel}</span>
|
|
8028
8552
|
</div>
|
|
8029
8553
|
`;
|
|
@@ -8056,7 +8580,7 @@ var AxebowTenantCard = class AxebowTenantCard extends LitElement {
|
|
|
8056
8580
|
${this.createAccountLabel}
|
|
8057
8581
|
</axebow-button>` : ""}
|
|
8058
8582
|
${this.moreActions.length ? html`<axebow-more-actions
|
|
8059
|
-
class="w-9.5
|
|
8583
|
+
class="w-9.5"
|
|
8060
8584
|
placement="bottom"
|
|
8061
8585
|
openToRight
|
|
8062
8586
|
.options=${this.moreActions}
|
|
@@ -8096,7 +8620,7 @@ var AxebowTenantCard = class AxebowTenantCard extends LitElement {
|
|
|
8096
8620
|
}
|
|
8097
8621
|
render() {
|
|
8098
8622
|
return html`
|
|
8099
|
-
<div class="w-full box-border flex flex-col gap-4 bg-white rounded-
|
|
8623
|
+
<div class="w-full box-border flex flex-col gap-4 bg-white rounded-md border border-solid border-(--axebow-table-border) p-4">
|
|
8100
8624
|
<div class="flex items-center justify-between">
|
|
8101
8625
|
${this._renderPlanBadge()}
|
|
8102
8626
|
<div class="w-57.5 h-8"><slot name="plan-selector"></slot></div>
|
|
@@ -8108,18 +8632,18 @@ var AxebowTenantCard = class AxebowTenantCard extends LitElement {
|
|
|
8108
8632
|
<span class="text-(--axebow-primary) text-lg">|</span>
|
|
8109
8633
|
<span class="text-(--axebow-primary) text-lg italic flex items-center gap-1">
|
|
8110
8634
|
${this.roleText}
|
|
8111
|
-
<slot name="role-tooltip"></slot>
|
|
8635
|
+
<slot name="role-tooltip" class="not-italic"></slot>
|
|
8112
8636
|
</span>
|
|
8113
8637
|
</div>
|
|
8114
8638
|
${this._renderTopRightActions()}
|
|
8115
8639
|
</div>
|
|
8116
8640
|
|
|
8117
8641
|
<div class="flex items-center justify-between flex-wrap gap-2">
|
|
8118
|
-
<div class="flex items-center gap-5 text-(--axebow-gray)">
|
|
8642
|
+
<div class="flex items-center gap-5 text-(--axebow-text-gray)">
|
|
8119
8643
|
${this.resourceStats.map((stat) => html`
|
|
8120
8644
|
<span class="flex items-center gap-1 text-base whitespace-nowrap">
|
|
8121
8645
|
<axebow-icon iconName=${stat.icon} iconColor="var(--axebow-gray)" size="md"></axebow-icon>
|
|
8122
|
-
|
|
8646
|
+
${stat.label} ${stat.value}
|
|
8123
8647
|
</span>
|
|
8124
8648
|
`)}
|
|
8125
8649
|
</div>
|
|
@@ -8502,8 +9026,8 @@ var AxebowActionsFooter = class AxebowActionsFooter extends LitElement {
|
|
|
8502
9026
|
class="w-full bg-(--axebow-base) box-border ${this.isOverlappingContent ? "shadow-[0_-8px_8px_-8px_rgba(13,24,33,0.15)]" : ""}"
|
|
8503
9027
|
>
|
|
8504
9028
|
<sl-divider class="h-px bg-(--axebow-light-gray)" style="margin: 1rem 0;"></sl-divider>
|
|
8505
|
-
<div class="h-10 box-content flex items-center
|
|
8506
|
-
<div class="flex items-center gap-8 shrink-0">
|
|
9029
|
+
<div class="h-10 box-content flex items-center pb-6">
|
|
9030
|
+
<div class="flex items-center gap-8 shrink-0 mr-8">
|
|
8507
9031
|
<axebow-button
|
|
8508
9032
|
class="axebow-red-button-text"
|
|
8509
9033
|
variant="text"
|
|
@@ -8520,7 +9044,7 @@ var AxebowActionsFooter = class AxebowActionsFooter extends LitElement {
|
|
|
8520
9044
|
` : ""}
|
|
8521
9045
|
</div>
|
|
8522
9046
|
|
|
8523
|
-
<p class="flex-1 text-(--axebow-gray) m-0">${unsafeHTML(this.text)}</p>
|
|
9047
|
+
<p class="flex-1 text-right font-semibold text-(--axebow-text-gray) m-0 mr-4">${unsafeHTML(this.text)}</p>
|
|
8524
9048
|
|
|
8525
9049
|
<div class="flex items-center gap-3 shrink-0">
|
|
8526
9050
|
${this.secondaryActionLabel ? html`
|
|
@@ -8609,179 +9133,6 @@ __decorate([property({ type: String })], AxebowStepHeader.prototype, "stepLabel"
|
|
|
8609
9133
|
__decorate([property({ type: String })], AxebowStepHeader.prototype, "ofLabel", void 0);
|
|
8610
9134
|
AxebowStepHeader = __decorate([customElement("axebow-step-header")], AxebowStepHeader);
|
|
8611
9135
|
//#endregion
|
|
8612
|
-
//#region src/components/axebow-tab-selector/axebow-tab-selector.ts
|
|
8613
|
-
var AxebowTabSelector = class AxebowTabSelector extends LitElement {
|
|
8614
|
-
constructor(..._args) {
|
|
8615
|
-
super(..._args);
|
|
8616
|
-
this.disabled = false;
|
|
8617
|
-
this.bordered = false;
|
|
8618
|
-
this.variant = "forms-tab";
|
|
8619
|
-
this.stretch = true;
|
|
8620
|
-
this._activeTab = 0;
|
|
8621
|
-
this._tabCount = 0;
|
|
8622
|
-
this._tabDisabled = [];
|
|
8623
|
-
this._observer = null;
|
|
8624
|
-
}
|
|
8625
|
-
static {
|
|
8626
|
-
this.styles = [unsafeCSS(tailwind_default), css`
|
|
8627
|
-
:host {
|
|
8628
|
-
display: block;
|
|
8629
|
-
}
|
|
8630
|
-
button {
|
|
8631
|
-
font-family: inherit;
|
|
8632
|
-
}
|
|
8633
|
-
|
|
8634
|
-
/* forms-tab hover underline */
|
|
8635
|
-
button.tab-inactive:not(:disabled) {
|
|
8636
|
-
position: relative;
|
|
8637
|
-
}
|
|
8638
|
-
button.tab-inactive:not(:disabled):hover::after {
|
|
8639
|
-
content: '';
|
|
8640
|
-
position: absolute;
|
|
8641
|
-
bottom: 0;
|
|
8642
|
-
left: 0;
|
|
8643
|
-
right: 0;
|
|
8644
|
-
height: 2px;
|
|
8645
|
-
background-color: var(--axebow-tertiary);
|
|
8646
|
-
border-radius: 1px;
|
|
8647
|
-
}
|
|
8648
|
-
|
|
8649
|
-
:host([disabled]) {
|
|
8650
|
-
opacity: 0.6;
|
|
8651
|
-
pointer-events: none;
|
|
8652
|
-
cursor: not-allowed;
|
|
8653
|
-
}
|
|
8654
|
-
`];
|
|
8655
|
-
}
|
|
8656
|
-
connectedCallback() {
|
|
8657
|
-
super.connectedCallback();
|
|
8658
|
-
this._observer = new MutationObserver(() => this._updateTabCount());
|
|
8659
|
-
this._observer.observe(this, {
|
|
8660
|
-
childList: true,
|
|
8661
|
-
attributes: true,
|
|
8662
|
-
attributeFilter: ["disabled"],
|
|
8663
|
-
subtree: true
|
|
8664
|
-
});
|
|
8665
|
-
this._updateTabCount();
|
|
8666
|
-
}
|
|
8667
|
-
disconnectedCallback() {
|
|
8668
|
-
super.disconnectedCallback();
|
|
8669
|
-
this._observer?.disconnect();
|
|
8670
|
-
}
|
|
8671
|
-
firstUpdated() {
|
|
8672
|
-
this._updateTabCount();
|
|
8673
|
-
}
|
|
8674
|
-
updated(changedProperties) {
|
|
8675
|
-
if (changedProperties.has("activeTab") && this.activeTab !== void 0 && this._activeTab !== this.activeTab) this._activeTab = this.activeTab;
|
|
8676
|
-
if (changedProperties.has("disabled")) this.toggleAttribute("disabled", this.disabled);
|
|
8677
|
-
}
|
|
8678
|
-
_updateTabCount() {
|
|
8679
|
-
const count = Array.from(this.children).filter((el) => el.getAttribute("slot")?.startsWith("tab-label-")).length;
|
|
8680
|
-
if (count !== this._tabCount) {
|
|
8681
|
-
if (this._activeTab >= count) this._activeTab = 0;
|
|
8682
|
-
this._tabCount = count;
|
|
8683
|
-
}
|
|
8684
|
-
this._tabDisabled = Array.from({ length: this._tabCount }, (_, i) => {
|
|
8685
|
-
return this.querySelector(`[slot="tab-label-${i}"]`)?.hasAttribute("disabled") ?? false;
|
|
8686
|
-
});
|
|
8687
|
-
}
|
|
8688
|
-
_selectTab(index) {
|
|
8689
|
-
if (this.disabled || this._tabDisabled[index]) return;
|
|
8690
|
-
this._activeTab = index;
|
|
8691
|
-
this.dispatchEvent(new CustomEvent("tab-change", {
|
|
8692
|
-
detail: { index },
|
|
8693
|
-
bubbles: true,
|
|
8694
|
-
composed: true
|
|
8695
|
-
}));
|
|
8696
|
-
}
|
|
8697
|
-
_renderFormsTab(tabs) {
|
|
8698
|
-
const isFirstActive = this._activeTab === 0;
|
|
8699
|
-
const isLastActive = this._activeTab === this._tabCount - 1;
|
|
8700
|
-
return html`
|
|
8701
|
-
<div class="w-full max-w-194.25 rounded-xl box-border">
|
|
8702
|
-
<div class="w-full h-8 flex bg-(--axebow-base) gap-1 rounded-t-xl box-border">
|
|
8703
|
-
${tabs.map((i) => {
|
|
8704
|
-
const active = this._activeTab === i;
|
|
8705
|
-
const isDisabled = this._tabDisabled[i];
|
|
8706
|
-
return html`
|
|
8707
|
-
<button
|
|
8708
|
-
class="flex-1 h-8 flex items-center justify-center gap-2 transition-colors duration-200 font-medium
|
|
8709
|
-
focus-visible:outline-2 focus-visible:outline-(--axebow-tertiary)
|
|
8710
|
-
${isDisabled ? "opacity-60 cursor-not-allowed" : "cursor-pointer"}
|
|
8711
|
-
${active ? `bg-white text-(--axebow-primary) rounded-t-lg tab-active ${this.bordered ? "border-t border-l border-r border-(--axebow-table-header-border)" : "border-none"}` : "bg-transparent text-(--axebow-secondary) rounded-lg tab-inactive border-none"}"
|
|
8712
|
-
?disabled=${isDisabled}
|
|
8713
|
-
@click=${() => this._selectTab(i)}
|
|
8714
|
-
>
|
|
8715
|
-
<axebow-icon
|
|
8716
|
-
iconName="${active ? "radio_button_checked" : "radio_button_unchecked"}"
|
|
8717
|
-
iconColor="var(--axebow-tertiary)"
|
|
8718
|
-
size="base"
|
|
8719
|
-
></axebow-icon>
|
|
8720
|
-
<slot name="tab-label-${i}"></slot>
|
|
8721
|
-
</button>
|
|
8722
|
-
`;
|
|
8723
|
-
})}
|
|
8724
|
-
</div>
|
|
8725
|
-
|
|
8726
|
-
<div
|
|
8727
|
-
class="w-full min-h-35 p-4 bg-white rounded-b-xl box-border ${isFirstActive ? "" : "rounded-tl-xl"} ${isLastActive ? "" : "rounded-tr-xl"} ${this.bordered ? "border-l border-r border-b border-(--axebow-table-header-border)" : ""}"
|
|
8728
|
-
>
|
|
8729
|
-
${tabs.map((i) => html`
|
|
8730
|
-
<div class="${this._activeTab === i ? "block" : "hidden"}">
|
|
8731
|
-
<slot name="tab-panel-${i}"></slot>
|
|
8732
|
-
</div>
|
|
8733
|
-
`)}
|
|
8734
|
-
</div>
|
|
8735
|
-
</div>
|
|
8736
|
-
`;
|
|
8737
|
-
}
|
|
8738
|
-
_renderSectionsTab(tabs) {
|
|
8739
|
-
return html`
|
|
8740
|
-
<div class="flex w-full">
|
|
8741
|
-
${tabs.map((i) => {
|
|
8742
|
-
const active = this._activeTab === i;
|
|
8743
|
-
const isDisabled = this._tabDisabled[i];
|
|
8744
|
-
return html`
|
|
8745
|
-
<button
|
|
8746
|
-
class="${this.stretch ? "flex-1" : "px-4"} h-8 flex items-center justify-center text-sm font-medium bg-transparent
|
|
8747
|
-
transition-colors duration-200
|
|
8748
|
-
focus-visible:outline-2 focus-visible:outline-(--axebow-tertiary)
|
|
8749
|
-
${isDisabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
|
|
8750
|
-
${active ? "text-[#344966] border-b-2 border-solid border-[#344966] border-t-0 border-l-0 border-r-0" : "text-(--axebow-secondary) border-b border-solid border-(--axebow-light-gray) border-t-0 border-l-0 border-r-0 hover:text-(--axebow-tertiary)"}"
|
|
8751
|
-
?disabled=${isDisabled}
|
|
8752
|
-
@click=${() => this._selectTab(i)}
|
|
8753
|
-
>
|
|
8754
|
-
<slot name="tab-label-${i}"></slot>
|
|
8755
|
-
</button>
|
|
8756
|
-
`;
|
|
8757
|
-
})}
|
|
8758
|
-
${!this.stretch ? html`<div class="flex-1 border-b border-solid border-(--axebow-light-gray) border-t-0 border-l-0 border-r-0"></div>` : ""}
|
|
8759
|
-
</div>
|
|
8760
|
-
${tabs.map((i) => html`
|
|
8761
|
-
<div class="${this._activeTab === i ? "block" : "hidden"}">
|
|
8762
|
-
<slot name="tab-panel-${i}"></slot>
|
|
8763
|
-
</div>
|
|
8764
|
-
`)}
|
|
8765
|
-
`;
|
|
8766
|
-
}
|
|
8767
|
-
render() {
|
|
8768
|
-
const tabs = Array.from({ length: this._tabCount }, (_, i) => i);
|
|
8769
|
-
return this.variant === "sections-tab" ? this._renderSectionsTab(tabs) : this._renderFormsTab(tabs);
|
|
8770
|
-
}
|
|
8771
|
-
};
|
|
8772
|
-
__decorate([property({
|
|
8773
|
-
type: Boolean,
|
|
8774
|
-
attribute: false
|
|
8775
|
-
})], AxebowTabSelector.prototype, "disabled", void 0);
|
|
8776
|
-
__decorate([property({ type: Number })], AxebowTabSelector.prototype, "activeTab", void 0);
|
|
8777
|
-
__decorate([property({ type: Boolean })], AxebowTabSelector.prototype, "bordered", void 0);
|
|
8778
|
-
__decorate([property({ type: String })], AxebowTabSelector.prototype, "variant", void 0);
|
|
8779
|
-
__decorate([property({ type: Boolean })], AxebowTabSelector.prototype, "stretch", void 0);
|
|
8780
|
-
__decorate([state()], AxebowTabSelector.prototype, "_activeTab", void 0);
|
|
8781
|
-
__decorate([state()], AxebowTabSelector.prototype, "_tabCount", void 0);
|
|
8782
|
-
__decorate([state()], AxebowTabSelector.prototype, "_tabDisabled", void 0);
|
|
8783
|
-
AxebowTabSelector = __decorate([customElement("axebow-tab-selector")], AxebowTabSelector);
|
|
8784
|
-
//#endregion
|
|
8785
9136
|
//#region src/components/axebow-underline-tab-selector/axebow-underline-tab-selector.ts
|
|
8786
9137
|
var AxebowUnderlineTabSelector = class AxebowUnderlineTabSelector extends LitElement {
|
|
8787
9138
|
constructor(..._args) {
|
|
@@ -9086,7 +9437,7 @@ var AxebowTimeRangePanel = class AxebowTimeRangePanel extends LitElement {
|
|
|
9086
9437
|
${this.buttonText}
|
|
9087
9438
|
</axebow-button>
|
|
9088
9439
|
<div
|
|
9089
|
-
class="w-127.75 h-112 box-border my-2 flex text-sm border border-solid border-(--axebow-primary) rounded-
|
|
9440
|
+
class="w-127.75 h-112 box-border my-2 flex text-sm border border-solid border-(--axebow-primary) rounded-md overflow-hidden"
|
|
9090
9441
|
>
|
|
9091
9442
|
${this._renderQuickRanges()} ${this._renderAbsoluteTimeSection()}
|
|
9092
9443
|
</div>
|
|
@@ -9262,7 +9613,7 @@ var AxebowRoleContainerDropdown = class AxebowRoleContainerDropdown extends LitE
|
|
|
9262
9613
|
${this.buttonText}
|
|
9263
9614
|
</axebow-button>
|
|
9264
9615
|
<div
|
|
9265
|
-
class="role-container-panel w-70.5 h-89.25 box-border flex flex-col bg-white border border-solid border-(--axebow-tertiary) rounded-
|
|
9616
|
+
class="role-container-panel w-70.5 h-89.25 box-border flex flex-col bg-white border border-solid border-(--axebow-tertiary) rounded-md overflow-hidden"
|
|
9266
9617
|
>
|
|
9267
9618
|
<sl-menu class="w-70.5 h-79 box-border overflow-y-auto">
|
|
9268
9619
|
${this._renderAllContainersOption()}
|
|
@@ -9736,7 +10087,6 @@ var AxebowDeploySummary = class AxebowDeploySummary extends LitElement {
|
|
|
9736
10087
|
<axebow-icon
|
|
9737
10088
|
iconName="download_for_offline"
|
|
9738
10089
|
slot="suffix"
|
|
9739
|
-
iconColor="var(--axebow-tertiary)"
|
|
9740
10090
|
size="xl"
|
|
9741
10091
|
></axebow-icon>
|
|
9742
10092
|
<span class="text-sm lg:text-base hidden lg:inline">${this.downloadLabel}</span>
|
|
@@ -9791,6 +10141,14 @@ var AxebowDeploySummary = class AxebowDeploySummary extends LitElement {
|
|
|
9791
10141
|
.current=${limits.cpu.current}
|
|
9792
10142
|
.limit=${limits.cpu.limit}
|
|
9793
10143
|
.percentage=${limits.cpu.percentage}
|
|
10144
|
+
iconSize="base"
|
|
10145
|
+
iconBoxSize="0.875rem"
|
|
10146
|
+
fixedWidth="20.875rem"
|
|
10147
|
+
fixedHeight="1.75rem"
|
|
10148
|
+
valuesWidth="14.1875rem"
|
|
10149
|
+
valuesHeight="1rem"
|
|
10150
|
+
barWidth="8.75rem"
|
|
10151
|
+
barHeight="0.6875rem"
|
|
9794
10152
|
></axebow-resource-bar>
|
|
9795
10153
|
<axebow-resource-bar
|
|
9796
10154
|
icon="${limits.memory.icon}"
|
|
@@ -9799,6 +10157,15 @@ var AxebowDeploySummary = class AxebowDeploySummary extends LitElement {
|
|
|
9799
10157
|
.limit=${limits.memory.limit}
|
|
9800
10158
|
.percentage=${limits.memory.percentage}
|
|
9801
10159
|
rotate="${limits.memory.rotate ?? "0"}"
|
|
10160
|
+
unit="${limits.memory.unit ?? ""}"
|
|
10161
|
+
iconSize="base"
|
|
10162
|
+
iconBoxSize="0.875rem"
|
|
10163
|
+
fixedWidth="20.875rem"
|
|
10164
|
+
fixedHeight="1.75rem"
|
|
10165
|
+
valuesWidth="14.1875rem"
|
|
10166
|
+
valuesHeight="1rem"
|
|
10167
|
+
barWidth="8.75rem"
|
|
10168
|
+
barHeight="0.6875rem"
|
|
9802
10169
|
></axebow-resource-bar>
|
|
9803
10170
|
</div>
|
|
9804
10171
|
</div>
|
|
@@ -9982,9 +10349,9 @@ var AxebowDeploySummary = class AxebowDeploySummary extends LitElement {
|
|
|
9982
10349
|
<span></span>
|
|
9983
10350
|
<span class="text-(--axebow-black)">${valueLabel}:</span>
|
|
9984
10351
|
${items.map((item) => html`
|
|
9985
|
-
<span class="truncate font-
|
|
9986
|
-
<span class="font-
|
|
9987
|
-
<span class="font-
|
|
10352
|
+
<span class="truncate font-normal text-(--axebow-primary)">${item.name}</span>
|
|
10353
|
+
<span class="font-normal text-(--axebow-primary)">=</span>
|
|
10354
|
+
<span class="font-normal truncate text-(--axebow-primary)">${item.value}</span>
|
|
9988
10355
|
`)}
|
|
9989
10356
|
</div>
|
|
9990
10357
|
`;
|
|
@@ -10004,7 +10371,7 @@ var AxebowDeploySummary = class AxebowDeploySummary extends LitElement {
|
|
|
10004
10371
|
.isEditing=${step.isEditing}
|
|
10005
10372
|
.enabled=${step.enabled}
|
|
10006
10373
|
>
|
|
10007
|
-
<div
|
|
10374
|
+
<div>
|
|
10008
10375
|
${step.items.length ? html`
|
|
10009
10376
|
${plainItems.length ? this._renderNameValueGrid(plainItems, step.variableNameLabel, step.variableValueLabel) : ""}
|
|
10010
10377
|
${pathItems.length && plainItems.length ? html`<sl-divider class="summary-title-divider"></sl-divider>` : ""}
|
|
@@ -10055,7 +10422,7 @@ var AxebowSummaryKeyValue = class AxebowSummaryKeyValue extends LitElement {
|
|
|
10055
10422
|
return html`
|
|
10056
10423
|
<p class="text-base">
|
|
10057
10424
|
<span class="text-(--axebow-black)">${this.label}:</span>
|
|
10058
|
-
<
|
|
10425
|
+
<span class="font-normal text-(--axebow-primary)">${this.value}</span>
|
|
10059
10426
|
</p>
|
|
10060
10427
|
`;
|
|
10061
10428
|
}
|
|
@@ -10074,31 +10441,93 @@ var AxebowResourceBar = class AxebowResourceBar extends LitElement {
|
|
|
10074
10441
|
this.limit = 0;
|
|
10075
10442
|
this.percentage = 0;
|
|
10076
10443
|
this.rotate = "0";
|
|
10444
|
+
this.iconSize = "xl";
|
|
10077
10445
|
}
|
|
10078
10446
|
static {
|
|
10079
|
-
this.styles = [
|
|
10447
|
+
this.styles = [
|
|
10448
|
+
unsafeCSS(tailwind_default),
|
|
10449
|
+
axebowTheme,
|
|
10450
|
+
css`
|
|
10451
|
+
:host {
|
|
10452
|
+
display: block;
|
|
10453
|
+
}
|
|
10454
|
+
`
|
|
10455
|
+
];
|
|
10456
|
+
}
|
|
10457
|
+
_renderIcon() {
|
|
10458
|
+
const icon = html`
|
|
10459
|
+
<axebow-icon
|
|
10460
|
+
iconName="${this.icon}"
|
|
10461
|
+
iconColor="var(--axebow-strong-gray)"
|
|
10462
|
+
size="${this.iconSize}"
|
|
10463
|
+
rotate="${Number(this.rotate)}"
|
|
10464
|
+
></axebow-icon>
|
|
10465
|
+
`;
|
|
10466
|
+
return this.iconBoxSize ? html`
|
|
10467
|
+
<div
|
|
10468
|
+
class="flex items-center justify-center shrink-0"
|
|
10469
|
+
style="width:${this.iconBoxSize};height:${this.iconBoxSize};"
|
|
10470
|
+
>
|
|
10471
|
+
${icon}
|
|
10472
|
+
</div>
|
|
10473
|
+
` : icon;
|
|
10474
|
+
}
|
|
10475
|
+
get _isFixedVariant() {
|
|
10476
|
+
return !!(this.valuesWidth || this.barWidth);
|
|
10477
|
+
}
|
|
10478
|
+
_formatValue(value) {
|
|
10479
|
+
const hundredths = Math.round(value * 100);
|
|
10480
|
+
const decimals = hundredths % 10 === 0 ? 1 : 2;
|
|
10481
|
+
return (hundredths / 100).toFixed(decimals);
|
|
10482
|
+
}
|
|
10483
|
+
_renderCurrent() {
|
|
10484
|
+
const value = this._isFixedVariant ? this._formatValue(this.current) : this.current.toFixed(2);
|
|
10485
|
+
return html`<p class="text-base ${this._isFixedVariant ? "text-(--axebow-primary)" : "text-(--axebow-gray)"}">${value}</p>`;
|
|
10486
|
+
}
|
|
10487
|
+
_renderBar() {
|
|
10488
|
+
return html`
|
|
10489
|
+
<div
|
|
10490
|
+
class="relative rounded-md bg-gray-200 overflow-hidden ${this.barWidth ? "shrink-0" : "flex-1 max-w-38"}"
|
|
10491
|
+
style="height:${this.barHeight ?? "0.5rem"};${this.barWidth ? `width:${this.barWidth};` : ""}"
|
|
10492
|
+
>
|
|
10493
|
+
<div
|
|
10494
|
+
class="absolute h-full ${this.percentage > 100 ? "bg-(--axebow-error)" : this.percentage === 100 ? "bg-(--axebow-warning)" : "bg-(--axebow-gray)"}"
|
|
10495
|
+
style="width: ${this.percentage}%;"
|
|
10496
|
+
></div>
|
|
10497
|
+
</div>
|
|
10498
|
+
`;
|
|
10499
|
+
}
|
|
10500
|
+
_renderLimit() {
|
|
10501
|
+
const value = this.limit == null ? "-" : this._isFixedVariant ? this._formatValue(this.limit) : this.limit;
|
|
10502
|
+
const colorClass = this._isFixedVariant ? "text-(--axebow-black)" : "text-(--axebow-gray)";
|
|
10503
|
+
const weightClass = this._isFixedVariant ? "font-normal" : "font-bold";
|
|
10504
|
+
return html`
|
|
10505
|
+
<p class="text-base ${weightClass} ${colorClass}">${value}</p>
|
|
10506
|
+
${this.unit ? html`<span class="text-xs ${weightClass} ${colorClass}">${this.unit}</span>` : ""}
|
|
10507
|
+
`;
|
|
10508
|
+
}
|
|
10509
|
+
_renderValues() {
|
|
10510
|
+
if (!this._isFixedVariant) return html` ${this._renderCurrent()} ${this._renderBar()} ${this._renderLimit()} `;
|
|
10511
|
+
return html`
|
|
10512
|
+
<div class="flex items-center gap-2.75">${this._renderCurrent()} ${this._renderBar()}</div>
|
|
10513
|
+
<div class="flex items-baseline gap-0.5">${this._renderLimit()}</div>
|
|
10514
|
+
`;
|
|
10080
10515
|
}
|
|
10081
10516
|
render() {
|
|
10082
10517
|
return html`
|
|
10083
|
-
<div
|
|
10518
|
+
<div
|
|
10519
|
+
class="flex justify-between items-center gap-2 ${this.fixedWidth || this.fixedHeight ? "" : "flex-wrap"}"
|
|
10520
|
+
style="${this.fixedWidth ? `width:${this.fixedWidth};` : ""}${this.fixedHeight ? `height:${this.fixedHeight};` : ""}"
|
|
10521
|
+
>
|
|
10084
10522
|
<div class="flex items-center gap-1">
|
|
10085
|
-
|
|
10086
|
-
|
|
10087
|
-
iconColor="var(--axebow-strong-gray)"
|
|
10088
|
-
size="xl"
|
|
10089
|
-
rotate="${Number(this.rotate)}"
|
|
10090
|
-
></axebow-icon>
|
|
10091
|
-
<p class="text-base font-bold text-(--axebow-black)">${this.label}</p>
|
|
10523
|
+
${this._renderIcon()}
|
|
10524
|
+
<p class="text-base font-semibold text-(--axebow-black)">${this.label}</p>
|
|
10092
10525
|
</div>
|
|
10093
|
-
<div
|
|
10094
|
-
|
|
10095
|
-
|
|
10096
|
-
|
|
10097
|
-
|
|
10098
|
-
style="width: ${this.percentage}%;"
|
|
10099
|
-
></div>
|
|
10100
|
-
</div>
|
|
10101
|
-
<p class="text-base font-bold text-(--axebow-gray)">${this.limit ?? "-"}</p>
|
|
10526
|
+
<div
|
|
10527
|
+
class="flex items-center ${this.valuesWidth || this.barWidth ? "justify-between shrink-0" : "gap-1 flex-1 max-w-43 min-w-20 justify-end"}"
|
|
10528
|
+
style="${this.valuesWidth ? `width:${this.valuesWidth};` : ""}${this.valuesHeight ? `height:${this.valuesHeight};` : ""}"
|
|
10529
|
+
>
|
|
10530
|
+
${this._renderValues()}
|
|
10102
10531
|
</div>
|
|
10103
10532
|
</div>
|
|
10104
10533
|
`;
|
|
@@ -10110,6 +10539,15 @@ __decorate([property({ type: Number })], AxebowResourceBar.prototype, "current",
|
|
|
10110
10539
|
__decorate([property({ type: Number })], AxebowResourceBar.prototype, "limit", void 0);
|
|
10111
10540
|
__decorate([property({ type: Number })], AxebowResourceBar.prototype, "percentage", void 0);
|
|
10112
10541
|
__decorate([property({ type: String })], AxebowResourceBar.prototype, "rotate", void 0);
|
|
10542
|
+
__decorate([property({ type: String })], AxebowResourceBar.prototype, "iconSize", void 0);
|
|
10543
|
+
__decorate([property({ type: String })], AxebowResourceBar.prototype, "iconBoxSize", void 0);
|
|
10544
|
+
__decorate([property({ type: String })], AxebowResourceBar.prototype, "fixedWidth", void 0);
|
|
10545
|
+
__decorate([property({ type: String })], AxebowResourceBar.prototype, "fixedHeight", void 0);
|
|
10546
|
+
__decorate([property({ type: String })], AxebowResourceBar.prototype, "valuesWidth", void 0);
|
|
10547
|
+
__decorate([property({ type: String })], AxebowResourceBar.prototype, "valuesHeight", void 0);
|
|
10548
|
+
__decorate([property({ type: String })], AxebowResourceBar.prototype, "barWidth", void 0);
|
|
10549
|
+
__decorate([property({ type: String })], AxebowResourceBar.prototype, "barHeight", void 0);
|
|
10550
|
+
__decorate([property({ type: String })], AxebowResourceBar.prototype, "unit", void 0);
|
|
10113
10551
|
AxebowResourceBar = __decorate([customElement("axebow-resource-bar")], AxebowResourceBar);
|
|
10114
10552
|
//#endregion
|
|
10115
10553
|
//#region src/components/axebow-summary/axebow-summary-step-header.ts
|
|
@@ -10133,18 +10571,21 @@ var AxebowSummaryStepHeader = class AxebowSummaryStepHeader extends LitElement {
|
|
|
10133
10571
|
<div class="flex gap-2 items-center justify-between">
|
|
10134
10572
|
<div class="flex items-center gap-0.5 min-w-0">
|
|
10135
10573
|
${this.valid && this.enabled ? html`
|
|
10136
|
-
<
|
|
10137
|
-
|
|
10138
|
-
|
|
10574
|
+
<axebow-icon
|
|
10575
|
+
iconName="${this.collapsed ? "expand_all" : "collapse_all"}"
|
|
10576
|
+
iconColor="var(--axebow-tertiary)"
|
|
10577
|
+
size="md"
|
|
10578
|
+
clickable
|
|
10579
|
+
class="shrink-0"
|
|
10139
10580
|
@click=${this._handleToggle}
|
|
10140
|
-
></
|
|
10581
|
+
></axebow-icon>
|
|
10141
10582
|
` : ""}
|
|
10142
10583
|
<h5
|
|
10143
10584
|
class="my-2 min-w-0 flex-1 truncate text-base uppercase ${this.enabled ? "font-semibold" : "font-normal text-(--axebow-gray)"}"
|
|
10144
10585
|
>
|
|
10145
10586
|
STEP ${this.stepNumber}: ${this.stepTitle}
|
|
10146
10587
|
</h5>
|
|
10147
|
-
${this.valid && this.enabled ? html`<axebow-icon
|
|
10588
|
+
${this.valid && this.enabled && !this.isEditing ? html`<axebow-icon
|
|
10148
10589
|
class="shrink-0"
|
|
10149
10590
|
iconName="check_circle"
|
|
10150
10591
|
iconColor="var(--axebow-success)"
|
|
@@ -10153,11 +10594,11 @@ var AxebowSummaryStepHeader = class AxebowSummaryStepHeader extends LitElement {
|
|
|
10153
10594
|
</div>
|
|
10154
10595
|
<div class="flex items-center gap-2 shrink-0">
|
|
10155
10596
|
${this.isEditing ? html`<span class="w-11.25 h-4.25 shrink-0 text-base text-(--axebow-gray)">${this.editingLabel}</span>` : ""}
|
|
10156
|
-
${this.enabled && this.valid && this.canEdit ? html`
|
|
10597
|
+
${this.enabled && this.valid && this.canEdit && !this.isEditing ? html`
|
|
10157
10598
|
<div
|
|
10158
|
-
class="w-4.5 h-4.5 shrink-0 flex items-center justify-center
|
|
10159
|
-
title="${this.
|
|
10160
|
-
@click=${this.
|
|
10599
|
+
class="w-4.5 h-4.5 shrink-0 flex items-center justify-center cursor-pointer"
|
|
10600
|
+
title="${this.editLabel}"
|
|
10601
|
+
@click=${this._handleEdit}
|
|
10161
10602
|
>
|
|
10162
10603
|
<axebow-icon iconName="edit_square" iconColor="var(--axebow-tertiary)" size="md"></axebow-icon>
|
|
10163
10604
|
</div>
|
|
@@ -10285,11 +10726,11 @@ var AxebowSummaryCard = class AxebowSummaryCard extends LitElement {
|
|
|
10285
10726
|
render() {
|
|
10286
10727
|
return html`
|
|
10287
10728
|
<div
|
|
10288
|
-
class="w-full lg:w-(--card-width) lg:sticky static top-25 h-auto ${this.cardHeight ? "lg:min-h-(--card-height)" : "lg:min-h-[calc(100vh-6.25rem)]"} rounded-
|
|
10729
|
+
class="w-full lg:w-(--card-width) lg:sticky static top-25 h-auto ${this.cardHeight ? "lg:min-h-(--card-height)" : "lg:min-h-[calc(100vh-6.25rem)]"} rounded-md z-10 transition-all duration-300"
|
|
10289
10730
|
style="--card-width: ${this.cardWidth}; --card-height: ${this.cardHeight};"
|
|
10290
10731
|
>
|
|
10291
10732
|
<sl-card
|
|
10292
|
-
class="w-full h-full shadow-none border-t border-l-0 border-r-0 border-b-0 rounded-none lg:shadow lg:border lg:rounded-
|
|
10733
|
+
class="w-full h-full shadow-none border-t border-l-0 border-r-0 border-b-0 rounded-none lg:shadow lg:border lg:rounded-md"
|
|
10293
10734
|
>
|
|
10294
10735
|
<div class="h-full flex flex-col">
|
|
10295
10736
|
${this._renderHeader()}
|
|
@@ -10691,7 +11132,7 @@ var AxebowFormPanelField = class AxebowFormPanelField extends LitElement {
|
|
|
10691
11132
|
.field-container {
|
|
10692
11133
|
width: 100%;
|
|
10693
11134
|
min-height: 51.33px;
|
|
10694
|
-
border-radius:
|
|
11135
|
+
border-radius: 0.375rem;
|
|
10695
11136
|
padding: 6px 8px;
|
|
10696
11137
|
box-sizing: border-box;
|
|
10697
11138
|
transition: border-color 0.2s ease, background-color 0.2s ease;
|
|
@@ -11044,7 +11485,7 @@ var AxebowResourceBoxForm = class AxebowResourceBoxForm extends LitElement {
|
|
|
11044
11485
|
</button>
|
|
11045
11486
|
${isMenuOpen ? html`
|
|
11046
11487
|
<div
|
|
11047
|
-
class="absolute right-0 top-full mt-1 z-50 min-w-50 bg-white rounded-
|
|
11488
|
+
class="absolute right-0 top-full mt-1 z-50 min-w-50 bg-white rounded-md shadow-[0_4px_12px_rgba(0,0,0,0.1)] border border-solid border-(--axebow-border-gray) py-1.5 flex flex-col axebow-scrollbar"
|
|
11048
11489
|
style="max-height: 250px; overflow-y: auto;"
|
|
11049
11490
|
>
|
|
11050
11491
|
${item.menuOptions.map((option) => html`
|
|
@@ -11143,7 +11584,7 @@ var AxebowResourceBoxForm = class AxebowResourceBoxForm extends LitElement {
|
|
|
11143
11584
|
></axebow-form-panel-field>
|
|
11144
11585
|
${hasMenu && isMenuOpen ? html`
|
|
11145
11586
|
<div
|
|
11146
|
-
class="absolute right-0 top-full mt-1 z-50 min-w-50 bg-white rounded-
|
|
11587
|
+
class="absolute right-0 top-full mt-1 z-50 min-w-50 bg-white rounded-md shadow-[0_4px_12px_rgba(0,0,0,0.1)] border border-solid border-(--axebow-border-gray) py-1.5 flex flex-col axebow-scrollbar"
|
|
11147
11588
|
style="max-height: 250px; overflow-y: auto;"
|
|
11148
11589
|
>
|
|
11149
11590
|
${item.menuOptions.map((option) => html`
|
|
@@ -11173,7 +11614,7 @@ var AxebowResourceBoxForm = class AxebowResourceBoxForm extends LitElement {
|
|
|
11173
11614
|
const computedStatusColor = isDeleting ? "var(--axebow-error)" : this.statusColor;
|
|
11174
11615
|
return html`
|
|
11175
11616
|
<div
|
|
11176
|
-
class="flex flex-col gap-3 w-70.5 p-4 bg-white rounded-
|
|
11617
|
+
class="flex flex-col gap-3 w-70.5 p-4 bg-white rounded-md ${isDeleting ? "border border-solid border-[var(--axebow-error)]" : ""} ${isDeleting ? "pointer-events-none opacity-70 select-none" : ""} axebow-shadow-hover box-border"
|
|
11177
11618
|
>
|
|
11178
11619
|
<!-- Top Status Header -->
|
|
11179
11620
|
<axebow-status
|
|
@@ -11191,7 +11632,7 @@ var AxebowResourceBoxForm = class AxebowResourceBoxForm extends LitElement {
|
|
|
11191
11632
|
type: "disabled"
|
|
11192
11633
|
} : item)) : html`
|
|
11193
11634
|
<div
|
|
11194
|
-
class="p-3 border border-dashed border-(--axebow-border-gray) rounded-
|
|
11635
|
+
class="p-3 border border-dashed border-(--axebow-border-gray) rounded-md text-center text-(--axebow-gray) text-xs"
|
|
11195
11636
|
>
|
|
11196
11637
|
No items configured.
|
|
11197
11638
|
</div>
|
|
@@ -11733,7 +12174,7 @@ var AxebowInstancesTable = class AxebowInstancesTable extends LitElement {
|
|
|
11733
12174
|
return html`
|
|
11734
12175
|
<p class="text-black mb-4">${this.descriptionLabel}</p>
|
|
11735
12176
|
<div class="w-full">
|
|
11736
|
-
<div class="w-186.5 rounded-
|
|
12177
|
+
<div class="w-186.5 rounded-md overflow-hidden border border-black/10">
|
|
11737
12178
|
${this._renderHeader()} ${this.instances.map((instance) => this._renderInstanceRow(instance))}
|
|
11738
12179
|
</div>
|
|
11739
12180
|
</div>
|
|
@@ -11796,19 +12237,19 @@ var AxebowTenantsTable = class AxebowTenantsTable extends LitElement {
|
|
|
11796
12237
|
render() {
|
|
11797
12238
|
if (!this.accounts.length) return html`<p>${this.noAccountsLabel}</p>`;
|
|
11798
12239
|
return html`
|
|
11799
|
-
<table class="w-full border-collapse bg-white rounded-
|
|
12240
|
+
<table class="w-full border-collapse bg-white rounded-md">
|
|
11800
12241
|
<thead>
|
|
11801
12242
|
<tr>
|
|
11802
|
-
<th class="border border-(--axebow-table-border) p-2 text-left rounded-
|
|
11803
|
-
<th class="border border-(--axebow-table-border) p-2 text-left rounded-
|
|
11804
|
-
<th class="border border-(--axebow-table-border) p-2 text-left rounded-
|
|
11805
|
-
<th class="border border-(--axebow-table-border) p-2 text-left rounded-
|
|
12243
|
+
<th class="border border-(--axebow-table-border) p-2 text-left rounded-md">${this.colAccountLabel}</th>
|
|
12244
|
+
<th class="border border-(--axebow-table-border) p-2 text-left rounded-md">${this.colVcpuLabel}</th>
|
|
12245
|
+
<th class="border border-(--axebow-table-border) p-2 text-left rounded-md">${this.colMemoryLabel}</th>
|
|
12246
|
+
<th class="border border-(--axebow-table-border) p-2 text-left rounded-md">${this.colStorageLabel}</th>
|
|
11806
12247
|
</tr>
|
|
11807
12248
|
</thead>
|
|
11808
12249
|
<tbody>
|
|
11809
12250
|
${this.accounts.map((account) => html`
|
|
11810
12251
|
<tr class="cursor-pointer" @click="${() => this._toggleAccount(account.name)}">
|
|
11811
|
-
<td class="border border-(--axebow-table-border) p-2 rounded-
|
|
12252
|
+
<td class="border border-(--axebow-table-border) p-2 rounded-md text-(--axebow-tertiary)">
|
|
11812
12253
|
${this._isAccountExpanded(account.name) ? html`<axebow-icon
|
|
11813
12254
|
iconName="collapse_all"
|
|
11814
12255
|
class="mr-1"
|
|
@@ -11822,21 +12263,21 @@ var AxebowTenantsTable = class AxebowTenantsTable extends LitElement {
|
|
|
11822
12263
|
></axebow-icon>`}
|
|
11823
12264
|
${account.name}
|
|
11824
12265
|
</td>
|
|
11825
|
-
<td class="border border-(--axebow-table-border) p-2 rounded-
|
|
11826
|
-
<td class="border border-(--axebow-table-border) p-2 rounded-
|
|
11827
|
-
<td class="border border-(--axebow-table-border) p-2 rounded-
|
|
12266
|
+
<td class="border border-(--axebow-table-border) p-2 rounded-md">${account.cpu}</td>
|
|
12267
|
+
<td class="border border-(--axebow-table-border) p-2 rounded-md">${account.memory}</td>
|
|
12268
|
+
<td class="border border-(--axebow-table-border) p-2 rounded-md">
|
|
11828
12269
|
${account.storage} ${this._renderTooltip(account.usage)}
|
|
11829
12270
|
</td>
|
|
11830
12271
|
</tr>
|
|
11831
12272
|
${this._isAccountExpanded(account.name) ? account.environments.map((environment) => html`
|
|
11832
12273
|
<tr>
|
|
11833
|
-
<td class="border border-(--axebow-table-border) p-2 rounded-
|
|
12274
|
+
<td class="border border-(--axebow-table-border) p-2 rounded-md">
|
|
11834
12275
|
<axebow-icon iconName="subdirectory_arrow_right" class="mr-1" size="md"></axebow-icon>
|
|
11835
12276
|
<span>${environment.name}</span>
|
|
11836
12277
|
</td>
|
|
11837
|
-
<td class="border border-(--axebow-table-border) p-2 rounded-
|
|
11838
|
-
<td class="border border-(--axebow-table-border) p-2 rounded-
|
|
11839
|
-
<td class="border border-(--axebow-table-border) p-2 rounded-
|
|
12278
|
+
<td class="border border-(--axebow-table-border) p-2 rounded-md">${environment.cpu}</td>
|
|
12279
|
+
<td class="border border-(--axebow-table-border) p-2 rounded-md">${environment.memory}</td>
|
|
12280
|
+
<td class="border border-(--axebow-table-border) p-2 rounded-md">
|
|
11840
12281
|
${environment.storageTotal} ${this._renderTooltip(environment.usage)}
|
|
11841
12282
|
</td>
|
|
11842
12283
|
</tr>
|
|
@@ -11868,7 +12309,7 @@ var AxebowExpandableCard = class AxebowExpandableCard extends LitElement {
|
|
|
11868
12309
|
}
|
|
11869
12310
|
render() {
|
|
11870
12311
|
return html`
|
|
11871
|
-
<div class="box-border p-4 bg-white rounded-
|
|
12312
|
+
<div class="box-border p-4 bg-white rounded-md shadow-sm border border-gray-200 overflow-hidden">
|
|
11872
12313
|
<slot></slot>
|
|
11873
12314
|
</div>
|
|
11874
12315
|
`;
|
|
@@ -12167,7 +12608,7 @@ var AxebowObservabilityContainer = class AxebowObservabilityContainer extends Li
|
|
|
12167
12608
|
}
|
|
12168
12609
|
_renderLogsIframe() {
|
|
12169
12610
|
return html`
|
|
12170
|
-
<div class="w-full h-full px-4 py-8 rounded-
|
|
12611
|
+
<div class="w-full h-full px-4 py-8 rounded-md flex flex-col bg-white">
|
|
12171
12612
|
<div class="flex justify-between items-center">
|
|
12172
12613
|
<h1 class="m-0 text-base uppercase font-semibold text-(--axebow-gray)">${this.logsTitle}</h1>
|
|
12173
12614
|
<div class="flex items-center gap-4">
|
|
@@ -12220,7 +12661,7 @@ var AxebowObservabilityContainer = class AxebowObservabilityContainer extends Li
|
|
|
12220
12661
|
}
|
|
12221
12662
|
_renderTerminalIframe() {
|
|
12222
12663
|
return html`
|
|
12223
|
-
<div class="w-full h-full px-4 py-8 rounded-
|
|
12664
|
+
<div class="w-full h-full px-4 py-8 rounded-md flex flex-col bg-white">
|
|
12224
12665
|
<div class="flex justify-between items-center">
|
|
12225
12666
|
<h1 class="m-0 text-base uppercase font-semibold text-(--axebow-gray)">${this.terminalTitle}</h1>
|
|
12226
12667
|
</div>
|
|
@@ -12308,6 +12749,6 @@ __decorate([property({ type: String })], AxebowObservabilityContainer.prototype,
|
|
|
12308
12749
|
__decorate([property({ type: String })], AxebowObservabilityContainer.prototype, "terminalIframeId", void 0);
|
|
12309
12750
|
AxebowObservabilityContainer = __decorate([customElement("axebow-observability-container")], AxebowObservabilityContainer);
|
|
12310
12751
|
//#endregion
|
|
12311
|
-
export { AxebowActionsFooter, AxebowAdjustmentResourcesCounter, AxebowAlert, AxebowBanner, AxebowBaseCard, AxebowBoxSection, AxebowBreadcrumbHeader, AxebowButton, AxebowCardActionBanner, AxebowCardAttentionBanner, AxebowCardCloudLogo, AxebowCardFilter, AxebowCardFilterItem, AxebowCardFooter, AxebowCardHeader, AxebowCardResourceRow, AxebowCardResourceTable, AxebowCardSpecialLink, AxebowCardStatItem, AxebowCardStatsRow, AxebowCardStatus, AxebowCardTableHeader, AxebowCardVersionSelector, AxebowCarouselInput, AxebowCarouselSelectorItem, AxebowCarouselSelectorTenant, AxebowChannelConfigPanel, AxebowCheckboxInput, AxebowCollaboratorsDialog, AxebowCopyBox, AxebowDeployCard, AxebowDeploySummary, AxebowDialog, AxebowDragDropUploadFile, AxebowDraggableService, AxebowExpandableCard, AxebowExpandableHeader, AxebowFilterBar, AxebowFooter, AxebowFormPanelField, AxebowGettingStartedCard, AxebowHeader, AxebowHelpBubble, AxebowIcon, AxebowInfrastructureCard, AxebowInput, AxebowInputBase, AxebowInstancesTable, AxebowLimitsCounter, AxebowManageHyperlinks, AxebowMarketplaceCard, AxebowModalsConfirmation, AxebowMoreActions, AxebowNumberCard, AxebowNumbersSection, AxebowNumericInput, AxebowObservabilityContainer, AxebowPill, AxebowPlanSelectField, AxebowProgressBar, AxebowProvidersInput, AxebowQuickTipButton, AxebowQuickTipSection, AxebowRefreshPeriodPanel, AxebowResourceBar, AxebowResourceBoxForm, AxebowResourceCard, AxebowResourceLimitInput, AxebowResourceLimitsPanel, AxebowResourcesCounter, AxebowRoleCard, AxebowRoleContainerDropdown, AxebowRoleTooltip, AxebowRuntimeZipDialog, AxebowSearch, AxebowSearchBarFilters, AxebowSelectInput, AxebowSelectInputWithDivider, AxebowSelectorSlider, AxebowServiceDetailHeader, AxebowServicesPanel, AxebowSidebar, AxebowStatus, AxebowStepHeader, AxebowSummaryCard, AxebowSummaryFlavors, AxebowSummaryKeyValue, AxebowSummaryLimits, AxebowSummaryStep, AxebowSummaryStepHeader, AxebowSwitch, AxebowSwitchInput, AxebowTabSelector, AxebowTabsSubmenu, AxebowTagsInput, AxebowTenantCard, AxebowTenantResourceTable, AxebowTenantsTable, AxebowTextInput, AxebowTimeRangePanel, AxebowTooltip, AxebowUndeployCard, AxebowUnderlineTabSelector, AxebowUsageTooltip, CustomHomePageBody, DEFAULT_ADD_DIALOG_LABELS, DeployModalComponent, DeployModalFooter, DeployModalHeader, DeployPageBody, STATUS_COLORS, TableChart, axebowTheme, buildAddButton, buildExternalNodeContent, buildMainNodeContent, createElement, createIcon };
|
|
12752
|
+
export { AxebowActionsFooter, AxebowAdjustmentResourcesCounter, AxebowAlert, AxebowBanner, AxebowBaseCard, AxebowBoxSection, AxebowBreadcrumbHeader, AxebowButton, AxebowCardActionBanner, AxebowCardAttentionBanner, AxebowCardCloudLogo, AxebowCardFilter, AxebowCardFilterItem, AxebowCardFooter, AxebowCardHeader, AxebowCardResourceRow, AxebowCardResourceTable, AxebowCardSpecialLink, AxebowCardStatItem, AxebowCardStatsRow, AxebowCardStatus, AxebowCardTableHeader, AxebowCardVersionSelector, AxebowCarouselInput, AxebowCarouselSelectorItem, AxebowCarouselSelectorTenant, AxebowChannelConfigPanel, AxebowCheckboxInput, AxebowCollaboratorsDialog, AxebowCopyBox, AxebowDeployCard, AxebowDeploySummary, AxebowDialog, AxebowDragDropUploadFile, AxebowDraggableService, AxebowExpandableCard, AxebowExpandableHeader, AxebowFilterBar, AxebowFooter, AxebowFormPanelField, AxebowGettingStartedCard, AxebowHeader, AxebowHelpBubble, AxebowIcon, AxebowInfrastructureCard, AxebowInput, AxebowInputBase, AxebowInstancesTable, AxebowLimitsCounter, AxebowManageHyperlinks, AxebowMarketplaceCard, AxebowModalsConfirmation, AxebowMoreActions, AxebowNumberCard, AxebowNumbersSection, AxebowNumericInput, AxebowObservabilityContainer, AxebowPill, AxebowPlanSelectField, AxebowProgressBar, AxebowProvidersInput, AxebowQuickTipButton, AxebowQuickTipSection, AxebowRefreshPeriodPanel, AxebowRegistrySelector, AxebowResourceBar, AxebowResourceBoxForm, AxebowResourceCard, AxebowResourceLimitInput, AxebowResourceLimitsPanel, AxebowResourcesCounter, AxebowRoleCard, AxebowRoleContainerDropdown, AxebowRoleTooltip, AxebowRuntimeZipDialog, AxebowSearch, AxebowSearchBarFilters, AxebowSelectInput, AxebowSelectInputWithDivider, AxebowSelectorSlider, AxebowServiceDetailHeader, AxebowServicesPanel, AxebowSidebar, AxebowStatus, AxebowStepHeader, AxebowSummaryCard, AxebowSummaryFlavors, AxebowSummaryKeyValue, AxebowSummaryLimits, AxebowSummaryStep, AxebowSummaryStepHeader, AxebowSwitch, AxebowSwitchInput, AxebowTabSelector, AxebowTabsSubmenu, AxebowTagsInput, AxebowTenantCard, AxebowTenantResourceTable, AxebowTenantsTable, AxebowTextInput, AxebowTimeRangePanel, AxebowTooltip, AxebowUndeployCard, AxebowUnderlineTabSelector, AxebowUsageTooltip, CustomHomePageBody, DEFAULT_ADD_DIALOG_LABELS, DeployModalComponent, DeployModalFooter, DeployModalHeader, DeployPageBody, STATUS_COLORS, TableChart, axebowTheme, buildAddButton, buildExternalNodeContent, buildMainNodeContent, createElement, createIcon };
|
|
12312
12753
|
|
|
12313
12754
|
//# sourceMappingURL=index.js.map
|