@kumori/aurora-wui-components 0.0.270 → 0.0.272-dev4127.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/axebow-alert/axebow-alert.d.ts.map +1 -1
- package/dist/components/axebow-banner/axebow-banner.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 +7 -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 +848 -390
- 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
|
|
@@ -40,6 +39,9 @@ var axebowTheme = css`
|
|
|
40
39
|
--axebow-white: var(--color-white, #ffffff);
|
|
41
40
|
--axebow-black: var(--color-black, #000000);
|
|
42
41
|
--axebow-warning: var(--color-warning, #f9cf6c);
|
|
42
|
+
--axebow-warning-bg: var(--color-warning-bg, #fffbe6);
|
|
43
|
+
--axebow-error-bg: var(--color-error-bg, #fff2f0);
|
|
44
|
+
--axebow-error-border: var(--color-error-border, #ffccc7);
|
|
43
45
|
--axebow-dark-yellow: var(--color-dark-yellow, #b9935a);
|
|
44
46
|
--axebow-table-border: var(--color-table-border, #ddd);
|
|
45
47
|
--axebow-table-header-border: var(--color-table-header-border, #dbdde4);
|
|
@@ -86,7 +88,8 @@ var axebowTheme = css`
|
|
|
86
88
|
sl-input:focus-within::part(base),
|
|
87
89
|
sl-select:focus-within::part(combobox) {
|
|
88
90
|
border-color: var(--axebow-black) !important;
|
|
89
|
-
|
|
91
|
+
border-width: 1px !important;
|
|
92
|
+
box-shadow: none !important;
|
|
90
93
|
}
|
|
91
94
|
sl-select sl-option:hover::part(base) {
|
|
92
95
|
background-color: #e9ecef;
|
|
@@ -179,6 +182,13 @@ var axebowTheme = css`
|
|
|
179
182
|
scrollbar-width: thin;
|
|
180
183
|
scrollbar-color: var(--axebow-scrollbar-thumb-color) transparent;
|
|
181
184
|
}
|
|
185
|
+
|
|
186
|
+
sl-select::part(listbox),
|
|
187
|
+
sl-select::part(menu) {
|
|
188
|
+
min-width: 100% !important;
|
|
189
|
+
width: max-content !important;
|
|
190
|
+
max-width: 90vw !important;
|
|
191
|
+
}
|
|
182
192
|
`;
|
|
183
193
|
var STATUS_COLORS = {
|
|
184
194
|
HEALTHY: "var(--axebow-success)",
|
|
@@ -188,7 +198,7 @@ var STATUS_COLORS = {
|
|
|
188
198
|
};
|
|
189
199
|
//#endregion
|
|
190
200
|
//#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";
|
|
201
|
+
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-300: oklch(80.8% .114 19.571);\n --color-red-800: oklch(44.4% .177 26.899);\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-dark-yellow\\) {\n border-color: var(--axebow-dark-yellow);\n }\n\n .border-\\(--axebow-error-border\\) {\n border-color: var(--axebow-error-border);\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-transparent {\n border-color: #0000;\n }\n\n .border-white {\n border-color: var(--color-white);\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-error-bg\\) {\n background-color: var(--axebow-error-bg);\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-warning-bg\\) {\n background-color: var(--axebow-warning-bg);\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 .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
202
|
//#endregion
|
|
193
203
|
//#region \0@oxc-project+runtime@0.139.0/helpers/esm/decorate.js
|
|
194
204
|
function __decorate(decorators, target, key, desc) {
|
|
@@ -258,7 +268,7 @@ var AxebowIcon = class AxebowIcon extends LitElement {
|
|
|
258
268
|
return html`
|
|
259
269
|
<span
|
|
260
270
|
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`};"
|
|
271
|
+
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
272
|
>
|
|
263
273
|
${this.iconName}
|
|
264
274
|
</span>
|
|
@@ -282,6 +292,8 @@ var AxebowFilterBar = class AxebowFilterBar extends LitElement {
|
|
|
282
292
|
constructor(..._args) {
|
|
283
293
|
super(..._args);
|
|
284
294
|
this.items = [];
|
|
295
|
+
this.clearAllLabel = "";
|
|
296
|
+
this.compact = false;
|
|
285
297
|
}
|
|
286
298
|
static {
|
|
287
299
|
this.styles = [unsafeCSS(tailwind_default), css`
|
|
@@ -329,6 +341,19 @@ var AxebowFilterBar = class AxebowFilterBar extends LitElement {
|
|
|
329
341
|
sl-option::part(base) {
|
|
330
342
|
font-size: 0.875rem;
|
|
331
343
|
}
|
|
344
|
+
sl-select[lockable][has-value]::part(expand-icon) {
|
|
345
|
+
display: none !important;
|
|
346
|
+
}
|
|
347
|
+
sl-select[lockable][has-value]::part(combobox) {
|
|
348
|
+
pointer-events: none;
|
|
349
|
+
}
|
|
350
|
+
sl-select[lockable][has-value]::part(clear-button),
|
|
351
|
+
sl-select[lockable][has-value]::part(clear-icon) {
|
|
352
|
+
pointer-events: auto;
|
|
353
|
+
}
|
|
354
|
+
sl-select:not([has-value])::part(clear-button) {
|
|
355
|
+
display: none !important;
|
|
356
|
+
}
|
|
332
357
|
`];
|
|
333
358
|
}
|
|
334
359
|
connectedCallback() {
|
|
@@ -344,8 +369,22 @@ var AxebowFilterBar = class AxebowFilterBar extends LitElement {
|
|
|
344
369
|
if (container) this._resizeObserver?.observe(container);
|
|
345
370
|
this._updateSeparateLayout();
|
|
346
371
|
}
|
|
347
|
-
updated() {
|
|
372
|
+
updated(changedProperties) {
|
|
373
|
+
super.updated(changedProperties);
|
|
348
374
|
requestAnimationFrame(() => this._updateSeparateLayout());
|
|
375
|
+
this._updateHasValueAttributes();
|
|
376
|
+
}
|
|
377
|
+
_updateHasValueAttributes() {
|
|
378
|
+
(this.shadowRoot?.querySelectorAll("sl-select"))?.forEach((select) => {
|
|
379
|
+
const isLockable = select.hasAttribute("lockable");
|
|
380
|
+
const val = select.value;
|
|
381
|
+
if (isLockable && val && val !== "all" && val !== "") select.setAttribute("has-value", "");
|
|
382
|
+
else select.removeAttribute("has-value");
|
|
383
|
+
});
|
|
384
|
+
}
|
|
385
|
+
_onSelectShow(e) {
|
|
386
|
+
const target = e.target;
|
|
387
|
+
if (target.hasAttribute("lockable") && target.hasAttribute("has-value")) target.hide();
|
|
349
388
|
}
|
|
350
389
|
_updateSeparateLayout() {
|
|
351
390
|
const container = this.shadowRoot?.querySelector(".filter-bar");
|
|
@@ -358,7 +397,10 @@ var AxebowFilterBar = class AxebowFilterBar extends LitElement {
|
|
|
358
397
|
if (firstSeparate) firstSeparate.style.marginLeft = isSingleRow ? "auto" : "";
|
|
359
398
|
}
|
|
360
399
|
_onChange(e, key) {
|
|
361
|
-
const
|
|
400
|
+
const target = e.target;
|
|
401
|
+
const value = target.value;
|
|
402
|
+
if (target.hasAttribute("lockable") && value && value !== "all" && value !== "") target.setAttribute("has-value", "");
|
|
403
|
+
else target.removeAttribute("has-value");
|
|
362
404
|
this.dispatchEvent(new CustomEvent("option-change", {
|
|
363
405
|
detail: {
|
|
364
406
|
key,
|
|
@@ -369,19 +411,31 @@ var AxebowFilterBar = class AxebowFilterBar extends LitElement {
|
|
|
369
411
|
}));
|
|
370
412
|
}
|
|
371
413
|
_renderItem(item) {
|
|
414
|
+
const isLockable = item.lockable !== false;
|
|
415
|
+
const hasValue = isLockable && item.value && item.value !== "all" && item.value !== "";
|
|
372
416
|
return html`
|
|
373
417
|
<div
|
|
374
|
-
class="filter-bar-item flex flex-col gap-2 flex-1 min-w-36 max-w-
|
|
418
|
+
class="filter-bar-item flex flex-col gap-2 flex-1 min-w-36 max-w-95"
|
|
375
419
|
?data-separate=${item.separate}
|
|
376
420
|
>
|
|
377
421
|
<h4 class="m-0 text-base font-semibold text-black">${item.label}</h4>
|
|
378
422
|
<sl-select
|
|
379
423
|
class="w-full"
|
|
380
424
|
placeholder=${item.placeholder}
|
|
381
|
-
value=${item.value}
|
|
425
|
+
.value=${item.value}
|
|
426
|
+
?lockable=${isLockable}
|
|
427
|
+
?has-value=${hasValue}
|
|
428
|
+
?clearable=${isLockable}
|
|
382
429
|
data-key=${item.key}
|
|
383
430
|
@sl-change=${(e) => this._onChange(e, item.key)}
|
|
431
|
+
@sl-show=${this._onSelectShow}
|
|
384
432
|
>
|
|
433
|
+
<axebow-icon
|
|
434
|
+
slot="clear-icon"
|
|
435
|
+
iconName="cancel"
|
|
436
|
+
size="md"
|
|
437
|
+
iconColor="var(--axebow-secondary)"
|
|
438
|
+
></axebow-icon>
|
|
385
439
|
<axebow-icon
|
|
386
440
|
slot="expand-icon"
|
|
387
441
|
iconName="chevron_right"
|
|
@@ -396,13 +450,25 @@ var AxebowFilterBar = class AxebowFilterBar extends LitElement {
|
|
|
396
450
|
}
|
|
397
451
|
render() {
|
|
398
452
|
return html`
|
|
399
|
-
<div class="filter-bar flex items-end gap-4 flex-wrap py-8">
|
|
453
|
+
<div class="filter-bar relative flex items-end gap-4 flex-wrap ${this.compact ? "" : "py-8"}">
|
|
454
|
+
${this.clearAllLabel ? html`
|
|
455
|
+
<button
|
|
456
|
+
type="button"
|
|
457
|
+
class="absolute right-0 top-0 p-0 border-0 bg-transparent cursor-pointer text-(--axebow-tertiary) text-sm font-medium hover:underline"
|
|
458
|
+
@click=${() => this.onClearAll?.()}
|
|
459
|
+
>
|
|
460
|
+
${this.clearAllLabel}
|
|
461
|
+
</button>
|
|
462
|
+
` : ""}
|
|
400
463
|
${this.items.map((item) => this._renderItem(item))}
|
|
401
464
|
</div>
|
|
402
465
|
`;
|
|
403
466
|
}
|
|
404
467
|
};
|
|
405
468
|
__decorate([property({ type: Array })], AxebowFilterBar.prototype, "items", void 0);
|
|
469
|
+
__decorate([property({ type: String })], AxebowFilterBar.prototype, "clearAllLabel", void 0);
|
|
470
|
+
__decorate([property({ attribute: false })], AxebowFilterBar.prototype, "onClearAll", void 0);
|
|
471
|
+
__decorate([property({ type: Boolean })], AxebowFilterBar.prototype, "compact", void 0);
|
|
406
472
|
AxebowFilterBar = __decorate([customElement("axebow-filter-bar")], AxebowFilterBar);
|
|
407
473
|
//#endregion
|
|
408
474
|
//#region src/components/axebow-button/axebow-button.ts
|
|
@@ -495,6 +561,7 @@ var AxebowButton = class AxebowButton extends LitElement {
|
|
|
495
561
|
outline-color: var(--axebow-tertiary);
|
|
496
562
|
}
|
|
497
563
|
sl-button[variant='primary'][outline]:not([disabled]):hover::part(base) {
|
|
564
|
+
background: color-mix(in srgb, var(--axebow-gray) 15%, transparent);
|
|
498
565
|
color: var(--axebow-gray);
|
|
499
566
|
border-color: var(--axebow-gray);
|
|
500
567
|
outline-color: var(--axebow-gray);
|
|
@@ -502,17 +569,29 @@ var AxebowButton = class AxebowButton extends LitElement {
|
|
|
502
569
|
|
|
503
570
|
/** Text button */
|
|
504
571
|
sl-button[variant='text']::part(base) {
|
|
505
|
-
outline-color: var(--axebow-tertiary);
|
|
506
|
-
}
|
|
507
|
-
sl-button[variant='text']::part(label) {
|
|
508
572
|
color: var(--axebow-tertiary);
|
|
573
|
+
outline-color: var(--axebow-tertiary);
|
|
509
574
|
}
|
|
510
575
|
sl-button[variant='text']:not([disabled]):hover::part(base) {
|
|
576
|
+
color: var(--axebow-gray);
|
|
511
577
|
outline-color: var(--axebow-gray);
|
|
512
578
|
border-radius: 0.375rem;
|
|
513
579
|
}
|
|
514
|
-
|
|
580
|
+
|
|
581
|
+
/** Tertiary button */
|
|
582
|
+
sl-button[variant='tertiary']::part(base) {
|
|
583
|
+
background: transparent;
|
|
584
|
+
border-color: transparent;
|
|
585
|
+
color: var(--axebow-tertiary);
|
|
586
|
+
outline-color: transparent;
|
|
587
|
+
box-shadow: none;
|
|
588
|
+
}
|
|
589
|
+
sl-button[variant='tertiary']:not([disabled]):hover::part(base) {
|
|
590
|
+
background-color: var(--axebow-anti-flash-white);
|
|
515
591
|
color: var(--axebow-gray);
|
|
592
|
+
border-radius: 0.375rem;
|
|
593
|
+
border-color: transparent;
|
|
594
|
+
outline-color: transparent;
|
|
516
595
|
}
|
|
517
596
|
|
|
518
597
|
/** Success button */
|
|
@@ -520,7 +599,7 @@ var AxebowButton = class AxebowButton extends LitElement {
|
|
|
520
599
|
background: var(--axebow-success);
|
|
521
600
|
border-color: var(--axebow-success);
|
|
522
601
|
color: white;
|
|
523
|
-
border-radius: 0.
|
|
602
|
+
border-radius: 0.375rem;
|
|
524
603
|
outline-color: var(--axebow-success);
|
|
525
604
|
}
|
|
526
605
|
sl-button[variant='success']:not([disabled]):hover::part(base) {
|
|
@@ -550,6 +629,7 @@ var AxebowButton = class AxebowButton extends LitElement {
|
|
|
550
629
|
outline-color: var(--axebow-error);
|
|
551
630
|
}
|
|
552
631
|
sl-button[variant='danger'][outline]:not([disabled]):hover::part(base) {
|
|
632
|
+
background: color-mix(in srgb, var(--axebow-gray) 15%, transparent);
|
|
553
633
|
color: var(--axebow-gray);
|
|
554
634
|
border-color: var(--axebow-gray);
|
|
555
635
|
outline-color: var(--axebow-gray);
|
|
@@ -557,16 +637,12 @@ var AxebowButton = class AxebowButton extends LitElement {
|
|
|
557
637
|
|
|
558
638
|
/** Danger text (host class) */
|
|
559
639
|
: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
640
|
color: var(--axebow-error);
|
|
641
|
+
outline-color: var(--axebow-error);
|
|
564
642
|
}
|
|
565
643
|
: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
644
|
color: var(--axebow-gray);
|
|
645
|
+
outline-color: var(--axebow-gray);
|
|
570
646
|
}
|
|
571
647
|
|
|
572
648
|
/** Warning button (host class) */
|
|
@@ -589,21 +665,21 @@ var AxebowButton = class AxebowButton extends LitElement {
|
|
|
589
665
|
*/
|
|
590
666
|
sl-button[hoverstyle='border']:not([disabled]):hover::part(base) {
|
|
591
667
|
background-color: var(--axebow-anti-flash-white) !important;
|
|
592
|
-
|
|
668
|
+
color: var(--axebow-gray) !important;
|
|
669
|
+
border-radius: 0.375rem !important;
|
|
593
670
|
outline-color: transparent !important;
|
|
594
671
|
border-color: transparent !important;
|
|
595
672
|
}
|
|
596
|
-
sl-button[hoverstyle='border']:not([disabled]):hover::part(label) {
|
|
597
|
-
color: var(--axebow-gray) !important;
|
|
598
|
-
}
|
|
599
673
|
|
|
600
674
|
sl-button::part(label) {
|
|
601
675
|
padding: 0 !important;
|
|
676
|
+
color: inherit;
|
|
602
677
|
}
|
|
603
678
|
|
|
604
679
|
sl-button::part(prefix),
|
|
605
680
|
sl-button::part(suffix) {
|
|
606
681
|
display: none !important;
|
|
682
|
+
color: inherit;
|
|
607
683
|
}
|
|
608
684
|
|
|
609
685
|
:host([has-prefix]) sl-button::part(prefix) {
|
|
@@ -613,6 +689,10 @@ var AxebowButton = class AxebowButton extends LitElement {
|
|
|
613
689
|
:host([has-suffix]) sl-button::part(suffix) {
|
|
614
690
|
display: flex !important;
|
|
615
691
|
}
|
|
692
|
+
|
|
693
|
+
::slotted(axebow-icon) {
|
|
694
|
+
--axebow-icon-color: currentColor;
|
|
695
|
+
}
|
|
616
696
|
`];
|
|
617
697
|
}
|
|
618
698
|
_handlePrefixChange(e) {
|
|
@@ -788,7 +868,8 @@ var AxebowSearchBarFilters = class AxebowSearchBarFilters extends LitElement {
|
|
|
788
868
|
role: "all",
|
|
789
869
|
provider: "all",
|
|
790
870
|
plan: "all",
|
|
791
|
-
sortBy: "newToOlder"
|
|
871
|
+
sortBy: "newToOlder",
|
|
872
|
+
lockable: true
|
|
792
873
|
};
|
|
793
874
|
this.roleOptions = [];
|
|
794
875
|
this.providerOptions = [];
|
|
@@ -841,6 +922,19 @@ var AxebowSearchBarFilters = class AxebowSearchBarFilters extends LitElement {
|
|
|
841
922
|
height: 2.5rem !important;
|
|
842
923
|
min-height: 2.5rem !important;
|
|
843
924
|
}
|
|
925
|
+
.filter-select[lockable][has-value]::part(expand-icon) {
|
|
926
|
+
display: none !important;
|
|
927
|
+
}
|
|
928
|
+
.filter-select[lockable][has-value]::part(combobox) {
|
|
929
|
+
pointer-events: none;
|
|
930
|
+
}
|
|
931
|
+
.filter-select[lockable][has-value]::part(clear-button),
|
|
932
|
+
.filter-select[lockable][has-value]::part(clear-icon) {
|
|
933
|
+
pointer-events: auto;
|
|
934
|
+
}
|
|
935
|
+
.filter-select:not([has-value])::part(clear-button) {
|
|
936
|
+
display: none !important;
|
|
937
|
+
}
|
|
844
938
|
`];
|
|
845
939
|
}
|
|
846
940
|
_dispatch(key, value) {
|
|
@@ -860,8 +954,27 @@ var AxebowSearchBarFilters = class AxebowSearchBarFilters extends LitElement {
|
|
|
860
954
|
_onSearchChange(e) {
|
|
861
955
|
this._dispatch("search", e.detail.value);
|
|
862
956
|
}
|
|
957
|
+
updated(changedProperties) {
|
|
958
|
+
super.updated(changedProperties);
|
|
959
|
+
this._updateHasValueAttributes();
|
|
960
|
+
}
|
|
961
|
+
_updateHasValueAttributes() {
|
|
962
|
+
(this.shadowRoot?.querySelectorAll("sl-select"))?.forEach((select) => {
|
|
963
|
+
const isLockable = select.hasAttribute("lockable");
|
|
964
|
+
const val = select.value;
|
|
965
|
+
if (isLockable && val && val !== "all" && val !== "") select.setAttribute("has-value", "");
|
|
966
|
+
else select.removeAttribute("has-value");
|
|
967
|
+
});
|
|
968
|
+
}
|
|
969
|
+
_onSelectShow(e) {
|
|
970
|
+
const target = e.target;
|
|
971
|
+
if (target.hasAttribute("lockable") && target.hasAttribute("has-value")) target.hide();
|
|
972
|
+
}
|
|
863
973
|
_onSelectChange(e, key) {
|
|
864
|
-
const
|
|
974
|
+
const target = e.target;
|
|
975
|
+
const value = target.value;
|
|
976
|
+
if (target.hasAttribute("lockable") && value && value !== "all" && value !== "") target.setAttribute("has-value", "");
|
|
977
|
+
else target.removeAttribute("has-value");
|
|
865
978
|
this._dispatch(key, value || "all");
|
|
866
979
|
}
|
|
867
980
|
_onSelectClear(key) {
|
|
@@ -881,6 +994,7 @@ var AxebowSearchBarFilters = class AxebowSearchBarFilters extends LitElement {
|
|
|
881
994
|
}
|
|
882
995
|
render() {
|
|
883
996
|
const showClearAll = this._activeControlsCount >= 2;
|
|
997
|
+
const isLockable = this.values.lockable !== false;
|
|
884
998
|
const roleValue = this.values.role !== "all" ? this.values.role : "";
|
|
885
999
|
const providerValue = this.values.provider !== "all" ? this.values.provider : "";
|
|
886
1000
|
const planValue = this.values.plan !== "all" ? this.values.plan : "";
|
|
@@ -917,27 +1031,45 @@ var AxebowSearchBarFilters = class AxebowSearchBarFilters extends LitElement {
|
|
|
917
1031
|
<sl-select
|
|
918
1032
|
placeholder=${this.rolePlaceholder}
|
|
919
1033
|
.value=${roleValue}
|
|
1034
|
+
?lockable=${isLockable}
|
|
1035
|
+
?has-value=${isLockable && roleValue && roleValue !== "all"}
|
|
920
1036
|
@sl-change=${(e) => this._onSelectChange(e, "role")}
|
|
921
1037
|
@sl-clear=${() => this._onSelectClear("role")}
|
|
922
|
-
|
|
1038
|
+
@sl-show=${this._onSelectShow}
|
|
1039
|
+
?clearable=${isLockable}
|
|
923
1040
|
class="w-33.25 h-10 filter-select"
|
|
924
1041
|
>
|
|
1042
|
+
<axebow-icon
|
|
1043
|
+
slot="clear-icon"
|
|
1044
|
+
iconName="cancel"
|
|
1045
|
+
size="md"
|
|
1046
|
+
iconColor="var(--axebow-secondary)"
|
|
1047
|
+
></axebow-icon>
|
|
925
1048
|
${this.roleOptions.map((opt) => html`<sl-option value="${opt.value}">${opt.label}</sl-option>`)}
|
|
926
1049
|
</sl-select>
|
|
927
1050
|
|
|
928
1051
|
<sl-select
|
|
929
1052
|
placeholder=${this.providerPlaceholder}
|
|
930
1053
|
.value=${providerValue}
|
|
1054
|
+
?lockable=${isLockable}
|
|
1055
|
+
?has-value=${isLockable && providerValue && providerValue !== "all"}
|
|
931
1056
|
@sl-change=${(e) => this._onSelectChange(e, "provider")}
|
|
932
1057
|
@sl-clear=${() => this._onSelectClear("provider")}
|
|
933
|
-
|
|
1058
|
+
@sl-show=${this._onSelectShow}
|
|
1059
|
+
?clearable=${isLockable}
|
|
934
1060
|
class="w-33.25 h-10 filter-select"
|
|
935
1061
|
>
|
|
1062
|
+
<axebow-icon
|
|
1063
|
+
slot="clear-icon"
|
|
1064
|
+
iconName="cancel"
|
|
1065
|
+
size="md"
|
|
1066
|
+
iconColor="var(--axebow-secondary)"
|
|
1067
|
+
></axebow-icon>
|
|
936
1068
|
${this.providerOptions.map((opt) => html`
|
|
937
1069
|
<sl-option value="${opt.value}">
|
|
938
|
-
<span class="flex items-center
|
|
1070
|
+
<span class="flex items-center w-full gap-1">
|
|
1071
|
+
${opt.logo ? html`<img src="${opt.logo}" alt="${opt.label}" class="h-4 w-auto object-contain" />` : ""}
|
|
939
1072
|
${opt.label}
|
|
940
|
-
${opt.logo ? html`<img src="${opt.logo}" alt="${opt.label}" class="h-4 w-auto object-contain ml-auto" />` : ""}
|
|
941
1073
|
</span>
|
|
942
1074
|
</sl-option>
|
|
943
1075
|
`)}
|
|
@@ -946,11 +1078,20 @@ var AxebowSearchBarFilters = class AxebowSearchBarFilters extends LitElement {
|
|
|
946
1078
|
<sl-select
|
|
947
1079
|
placeholder=${this.planPlaceholder}
|
|
948
1080
|
.value=${planValue}
|
|
1081
|
+
?lockable=${isLockable}
|
|
1082
|
+
?has-value=${isLockable && planValue && planValue !== "all"}
|
|
949
1083
|
@sl-change=${(e) => this._onSelectChange(e, "plan")}
|
|
950
1084
|
@sl-clear=${() => this._onSelectClear("plan")}
|
|
951
|
-
|
|
1085
|
+
@sl-show=${this._onSelectShow}
|
|
1086
|
+
?clearable=${isLockable}
|
|
952
1087
|
class="w-33.25 h-10 filter-select"
|
|
953
1088
|
>
|
|
1089
|
+
<axebow-icon
|
|
1090
|
+
slot="clear-icon"
|
|
1091
|
+
iconName="cancel"
|
|
1092
|
+
size="md"
|
|
1093
|
+
iconColor="var(--axebow-secondary)"
|
|
1094
|
+
></axebow-icon>
|
|
954
1095
|
${this.planOptions.map((opt) => html`<sl-option value="${opt.value}">${opt.label}</sl-option>`)}
|
|
955
1096
|
</sl-select>
|
|
956
1097
|
|
|
@@ -1078,14 +1219,14 @@ var AxebowQuickActions = class AxebowQuickActions extends LitElement {
|
|
|
1078
1219
|
>
|
|
1079
1220
|
</span>
|
|
1080
1221
|
<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-
|
|
1222
|
+
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
1223
|
>${this.label}</span
|
|
1083
1224
|
>
|
|
1084
1225
|
</button>
|
|
1085
1226
|
|
|
1086
1227
|
${this.open ? html`
|
|
1087
1228
|
<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-
|
|
1229
|
+
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
1230
|
>
|
|
1090
1231
|
<div class="flex gap-1">
|
|
1091
1232
|
${row1.map((action) => html`
|
|
@@ -1167,7 +1308,7 @@ var AxebowHeaderActions = class AxebowHeaderActions extends LitElement {
|
|
|
1167
1308
|
<div class="flex items-center gap-2 z-10 shrink-0 min-w-0 ml-auto">
|
|
1168
1309
|
<sl-dropdown>
|
|
1169
1310
|
<div
|
|
1170
|
-
class="relative group w-9 h-9 rounded-
|
|
1311
|
+
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
1312
|
slot="trigger"
|
|
1172
1313
|
>
|
|
1173
1314
|
<span class="inline-block transition-transform duration-200 group-hover:rotate-15">
|
|
@@ -1179,11 +1320,11 @@ var AxebowHeaderActions = class AxebowHeaderActions extends LitElement {
|
|
|
1179
1320
|
${unreadNotifications.length > 99 ? "99+" : unreadNotifications.length}
|
|
1180
1321
|
</div>` : ""}
|
|
1181
1322
|
<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-
|
|
1323
|
+
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
1324
|
>${this.notificationsLabel}</span
|
|
1184
1325
|
>
|
|
1185
1326
|
</div>
|
|
1186
|
-
<sl-tab-group class="bg-white rounded-
|
|
1327
|
+
<sl-tab-group class="bg-white rounded-md w-120 text-base">
|
|
1187
1328
|
<sl-tab slot="nav" panel="my_notifications">${this.myNotificationsTabLabel}</sl-tab>
|
|
1188
1329
|
<sl-tab slot="nav" panel="action_needed">${this.actionNeededTabLabel}</sl-tab>
|
|
1189
1330
|
|
|
@@ -1231,17 +1372,17 @@ var AxebowHeaderActions = class AxebowHeaderActions extends LitElement {
|
|
|
1231
1372
|
<sl-dropdown class="shrink-0">
|
|
1232
1373
|
<div
|
|
1233
1374
|
slot="trigger"
|
|
1234
|
-
class="group flex items-center gap-2 h-9 px-3 rounded-
|
|
1375
|
+
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
1376
|
>
|
|
1236
1377
|
<span class="text-white group-hover:text-(--axebow-primary) transition-colors duration-150">
|
|
1237
1378
|
<axebow-icon iconName="account_circle" iconColor="currentColor" size="xl"></axebow-icon>
|
|
1238
1379
|
</span>
|
|
1239
1380
|
${this.userName}
|
|
1240
1381
|
</div>
|
|
1241
|
-
<sl-menu class="bg-white rounded-
|
|
1382
|
+
<sl-menu class="bg-white rounded-md p-2 min-w-55 axebow-shadow">
|
|
1242
1383
|
${this.profileMenuItems.map((item) => html`
|
|
1243
1384
|
<button
|
|
1244
|
-
class="w-full flex text-base items-center justify-between ml-auto px-4 py-2 cursor-pointer rounded-
|
|
1385
|
+
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
1386
|
@click=${() => item.onClick()}
|
|
1246
1387
|
>
|
|
1247
1388
|
<span class="text-(--axebow-primary)">${item.name}</span>
|
|
@@ -1249,7 +1390,7 @@ var AxebowHeaderActions = class AxebowHeaderActions extends LitElement {
|
|
|
1249
1390
|
</button>
|
|
1250
1391
|
`)}
|
|
1251
1392
|
<button
|
|
1252
|
-
class="ml-auto flex items-center justify-between w-full px-4 py-2 text-(--axebow-error) cursor-pointer rounded-
|
|
1393
|
+
class="ml-auto flex items-center justify-between w-full px-4 py-2 text-(--axebow-error) cursor-pointer rounded-md text-base"
|
|
1253
1394
|
@click=${() => this.onLogout()}
|
|
1254
1395
|
>
|
|
1255
1396
|
<span class="text-(--axebow-error) mt-1">${this.logoutLabel}</span>
|
|
@@ -1519,7 +1660,7 @@ var AxebowSidebar = class AxebowSidebar extends LitElement {
|
|
|
1519
1660
|
style="left: ${this.tooltipLeft}px; top: ${this.tooltipTop}px; height: 3rem;"
|
|
1520
1661
|
>
|
|
1521
1662
|
<span
|
|
1522
|
-
class="flex items-center gap-1 px-2 py-1 bg-white rounded-
|
|
1663
|
+
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
1664
|
>${this.hoveredItem.label}${this.hoveredItem.openInNewTab ? html`<axebow-icon iconName="open_in_new" size="sm"></axebow-icon>` : ""}</span
|
|
1524
1665
|
>
|
|
1525
1666
|
</div>
|
|
@@ -1756,6 +1897,7 @@ var AxebowInputBase = class extends LitElement {
|
|
|
1756
1897
|
--sl-input-focus-ring-color: transparent;
|
|
1757
1898
|
--sl-color-primary-600: transparent;
|
|
1758
1899
|
--sl-input-border-color-focus: transparent;
|
|
1900
|
+
border-radius: 0.375rem;
|
|
1759
1901
|
}
|
|
1760
1902
|
.input-error sl-input,
|
|
1761
1903
|
.input-error sl-select {
|
|
@@ -1823,10 +1965,10 @@ var AxebowInputBase = class extends LitElement {
|
|
|
1823
1965
|
style="margin-bottom: ${this.description ? "var(--axebow-input-label-gap, 1rem)" : "var(--axebow-input-field-gap, 0.5rem)"}"
|
|
1824
1966
|
>
|
|
1825
1967
|
${this.required ? html`<p class="text-(--axebow-error)">*</p>` : ""}
|
|
1826
|
-
<h4 class="${this.compact ? "font-normal text-sm" : "font-
|
|
1968
|
+
<h4 class="${this.compact ? "font-normal text-sm" : "font-semibold text-base"}">${this.label}</h4>
|
|
1827
1969
|
</div>` : ""}
|
|
1828
1970
|
${this.description ? html`<p
|
|
1829
|
-
class="text-m overflow-hidden line-clamp-2"
|
|
1971
|
+
class="text-m font-semibold overflow-hidden line-clamp-2"
|
|
1830
1972
|
style="
|
|
1831
1973
|
margin-bottom: var(--axebow-input-description-gap, 0.75rem);
|
|
1832
1974
|
height: var(--axebow-input-description-height, 3rem);
|
|
@@ -1859,7 +2001,7 @@ var AxebowInputBase = class extends LitElement {
|
|
|
1859
2001
|
</h4>
|
|
1860
2002
|
</div>` : ""}
|
|
1861
2003
|
${this.description ? html`<p
|
|
1862
|
-
class="field-description text-base leading-4.25 m-0"
|
|
2004
|
+
class="field-description text-base font-semibold leading-4.25 m-0"
|
|
1863
2005
|
title="${this.wrapDescription ? "" : this.description}"
|
|
1864
2006
|
>
|
|
1865
2007
|
${this.description}
|
|
@@ -1974,8 +2116,8 @@ var AxebowNumericInput = class AxebowNumericInput extends AxebowInputBase {
|
|
|
1974
2116
|
flex-direction: column;
|
|
1975
2117
|
width: 1.375rem !important;
|
|
1976
2118
|
height: 2.375rem !important;
|
|
1977
|
-
border
|
|
1978
|
-
border-radius: 0
|
|
2119
|
+
border: 1px solid var(--axebow-table-header-border) !important;
|
|
2120
|
+
border-radius: 0 0.375rem 0.375rem 0;
|
|
1979
2121
|
overflow: hidden;
|
|
1980
2122
|
}
|
|
1981
2123
|
.axebow-numeric-stepper-btn {
|
|
@@ -1992,7 +2134,7 @@ var AxebowNumericInput = class AxebowNumericInput extends AxebowInputBase {
|
|
|
1992
2134
|
cursor: pointer;
|
|
1993
2135
|
}
|
|
1994
2136
|
.axebow-numeric-stepper-btn:first-child {
|
|
1995
|
-
border-bottom: 1px solid var(--axebow-
|
|
2137
|
+
border-bottom: 1px solid var(--axebow-table-header-border) !important;
|
|
1996
2138
|
}
|
|
1997
2139
|
.axebow-numeric-stepper-btn:disabled {
|
|
1998
2140
|
cursor: not-allowed;
|
|
@@ -2226,9 +2368,6 @@ var AxebowCarouselInput = class AxebowCarouselInput extends AxebowInputBase {
|
|
|
2226
2368
|
static {
|
|
2227
2369
|
this.styles = [...AxebowInputBase.baseStyles, css`
|
|
2228
2370
|
: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
2371
|
--axebow-input-label-gap: 0.25rem;
|
|
2233
2372
|
--axebow-input-description-gap: 1rem;
|
|
2234
2373
|
--axebow-input-description-height: 1.0625rem;
|
|
@@ -2241,7 +2380,9 @@ var AxebowCarouselInput = class AxebowCarouselInput extends AxebowInputBase {
|
|
|
2241
2380
|
--slide-gap: ${CARD_GAP_PX}px;
|
|
2242
2381
|
}
|
|
2243
2382
|
sl-carousel::part(scroll-container) {
|
|
2244
|
-
height: ${CARD_HEIGHT_PX / 16}rem !important;
|
|
2383
|
+
height: calc(${CARD_HEIGHT_PX / 16}rem + 0.5625rem) !important;
|
|
2384
|
+
padding-top: 0.5625rem !important;
|
|
2385
|
+
margin-top: -0.5625rem !important;
|
|
2245
2386
|
}
|
|
2246
2387
|
sl-carousel-item > div {
|
|
2247
2388
|
width: 100%;
|
|
@@ -2277,7 +2418,7 @@ var AxebowCarouselInput = class AxebowCarouselInput extends AxebowInputBase {
|
|
|
2277
2418
|
${this.carouselItems.map((item) => this.carouselItemRenderer ? this.carouselItemRenderer(item) : html`
|
|
2278
2419
|
<sl-carousel-item>
|
|
2279
2420
|
<div
|
|
2280
|
-
class="rounded-
|
|
2421
|
+
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
2422
|
>
|
|
2282
2423
|
${item.content}
|
|
2283
2424
|
</div>
|
|
@@ -2908,7 +3049,7 @@ var AxebowTagsInput = class AxebowTagsInput extends LitElement {
|
|
|
2908
3049
|
${this.description ? html`<p class="text-base text-black mb-1.5">${this.description}</p>` : ""}
|
|
2909
3050
|
<div
|
|
2910
3051
|
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
|
|
3052
|
+
border border-solid border-gray-300 rounded-md bg-white cursor-text
|
|
2912
3053
|
focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-100
|
|
2913
3054
|
transition-shadow"
|
|
2914
3055
|
@click=${() => this.shadowRoot?.querySelector(".tag-field")?.focus()}
|
|
@@ -2965,6 +3106,376 @@ __decorate([property({ attribute: false })], AxebowTagsInput.prototype, "onTagsC
|
|
|
2965
3106
|
__decorate([property({ attribute: false })], AxebowTagsInput.prototype, "onCurrentInputChange", void 0);
|
|
2966
3107
|
AxebowTagsInput = __decorate([customElement("axebow-tags-input")], AxebowTagsInput);
|
|
2967
3108
|
//#endregion
|
|
3109
|
+
//#region src/components/axebow-tab-selector/axebow-tab-selector.ts
|
|
3110
|
+
var AxebowTabSelector = class AxebowTabSelector extends LitElement {
|
|
3111
|
+
constructor(..._args) {
|
|
3112
|
+
super(..._args);
|
|
3113
|
+
this.disabled = false;
|
|
3114
|
+
this.bordered = false;
|
|
3115
|
+
this.variant = "forms-tab";
|
|
3116
|
+
this.stretch = true;
|
|
3117
|
+
this._activeTab = 0;
|
|
3118
|
+
this._tabCount = 0;
|
|
3119
|
+
this._tabDisabled = [];
|
|
3120
|
+
this._observer = null;
|
|
3121
|
+
}
|
|
3122
|
+
static {
|
|
3123
|
+
this.styles = [unsafeCSS(tailwind_default), css`
|
|
3124
|
+
:host {
|
|
3125
|
+
display: block;
|
|
3126
|
+
}
|
|
3127
|
+
button {
|
|
3128
|
+
font-family: inherit;
|
|
3129
|
+
}
|
|
3130
|
+
|
|
3131
|
+
/* forms-tab hover underline */
|
|
3132
|
+
button.tab-inactive:not(:disabled) {
|
|
3133
|
+
position: relative;
|
|
3134
|
+
}
|
|
3135
|
+
button.tab-inactive:not(:disabled):hover::after {
|
|
3136
|
+
content: '';
|
|
3137
|
+
position: absolute;
|
|
3138
|
+
bottom: 0;
|
|
3139
|
+
left: 0;
|
|
3140
|
+
right: 0;
|
|
3141
|
+
height: 2px;
|
|
3142
|
+
background-color: var(--axebow-tertiary);
|
|
3143
|
+
border-radius: 0.25rem;
|
|
3144
|
+
}
|
|
3145
|
+
|
|
3146
|
+
:host([disabled]) {
|
|
3147
|
+
opacity: 0.6;
|
|
3148
|
+
pointer-events: none;
|
|
3149
|
+
cursor: not-allowed;
|
|
3150
|
+
}
|
|
3151
|
+
`];
|
|
3152
|
+
}
|
|
3153
|
+
connectedCallback() {
|
|
3154
|
+
super.connectedCallback();
|
|
3155
|
+
this._observer = new MutationObserver(() => this._updateTabCount());
|
|
3156
|
+
this._observer.observe(this, {
|
|
3157
|
+
childList: true,
|
|
3158
|
+
attributes: true,
|
|
3159
|
+
attributeFilter: ["disabled"],
|
|
3160
|
+
subtree: true
|
|
3161
|
+
});
|
|
3162
|
+
this._updateTabCount();
|
|
3163
|
+
}
|
|
3164
|
+
disconnectedCallback() {
|
|
3165
|
+
super.disconnectedCallback();
|
|
3166
|
+
this._observer?.disconnect();
|
|
3167
|
+
}
|
|
3168
|
+
firstUpdated() {
|
|
3169
|
+
this._updateTabCount();
|
|
3170
|
+
}
|
|
3171
|
+
updated(changedProperties) {
|
|
3172
|
+
if (changedProperties.has("activeTab") && this.activeTab !== void 0 && this._activeTab !== this.activeTab) this._activeTab = this.activeTab;
|
|
3173
|
+
if (changedProperties.has("disabled")) this.toggleAttribute("disabled", this.disabled);
|
|
3174
|
+
}
|
|
3175
|
+
_updateTabCount() {
|
|
3176
|
+
const count = Array.from(this.children).filter((el) => el.getAttribute("slot")?.startsWith("tab-label-")).length;
|
|
3177
|
+
if (count !== this._tabCount) {
|
|
3178
|
+
if (this._activeTab >= count) this._activeTab = 0;
|
|
3179
|
+
this._tabCount = count;
|
|
3180
|
+
}
|
|
3181
|
+
this._tabDisabled = Array.from({ length: this._tabCount }, (_, i) => {
|
|
3182
|
+
return this.querySelector(`[slot="tab-label-${i}"]`)?.hasAttribute("disabled") ?? false;
|
|
3183
|
+
});
|
|
3184
|
+
}
|
|
3185
|
+
_selectTab(index) {
|
|
3186
|
+
if (this.disabled || this._tabDisabled[index]) return;
|
|
3187
|
+
this._activeTab = index;
|
|
3188
|
+
this.dispatchEvent(new CustomEvent("tab-change", {
|
|
3189
|
+
detail: { index },
|
|
3190
|
+
bubbles: true,
|
|
3191
|
+
composed: true
|
|
3192
|
+
}));
|
|
3193
|
+
}
|
|
3194
|
+
_renderFormsTab(tabs) {
|
|
3195
|
+
const isFirstActive = this._activeTab === 0;
|
|
3196
|
+
const isLastActive = this._activeTab === this._tabCount - 1;
|
|
3197
|
+
return html`
|
|
3198
|
+
<div class="w-full max-w-194.25 rounded-md box-border">
|
|
3199
|
+
<div class="w-full h-8 flex bg-(--axebow-base) gap-1 rounded-t-xl box-border">
|
|
3200
|
+
${tabs.map((i) => {
|
|
3201
|
+
const active = this._activeTab === i;
|
|
3202
|
+
const isDisabled = this._tabDisabled[i];
|
|
3203
|
+
return html`
|
|
3204
|
+
<button
|
|
3205
|
+
class="flex-1 h-8 flex items-center justify-center gap-2 transition-colors duration-200 font-medium
|
|
3206
|
+
focus-visible:outline-2 focus-visible:outline-(--axebow-tertiary)
|
|
3207
|
+
${isDisabled ? "opacity-60 cursor-not-allowed" : "cursor-pointer"}
|
|
3208
|
+
${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"}"
|
|
3209
|
+
?disabled=${isDisabled}
|
|
3210
|
+
@click=${() => this._selectTab(i)}
|
|
3211
|
+
>
|
|
3212
|
+
<axebow-icon
|
|
3213
|
+
iconName="${active ? "radio_button_checked" : "radio_button_unchecked"}"
|
|
3214
|
+
iconColor="var(--axebow-tertiary)"
|
|
3215
|
+
size="base"
|
|
3216
|
+
></axebow-icon>
|
|
3217
|
+
<slot name="tab-label-${i}"></slot>
|
|
3218
|
+
</button>
|
|
3219
|
+
`;
|
|
3220
|
+
})}
|
|
3221
|
+
</div>
|
|
3222
|
+
|
|
3223
|
+
<div
|
|
3224
|
+
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)" : ""}"
|
|
3225
|
+
>
|
|
3226
|
+
${tabs.map((i) => html`
|
|
3227
|
+
<div class="${this._activeTab === i ? "block" : "hidden"}">
|
|
3228
|
+
<slot name="tab-panel-${i}"></slot>
|
|
3229
|
+
</div>
|
|
3230
|
+
`)}
|
|
3231
|
+
</div>
|
|
3232
|
+
</div>
|
|
3233
|
+
`;
|
|
3234
|
+
}
|
|
3235
|
+
_renderSectionsTab(tabs) {
|
|
3236
|
+
return html`
|
|
3237
|
+
<div class="flex w-full">
|
|
3238
|
+
${tabs.map((i) => {
|
|
3239
|
+
const active = this._activeTab === i;
|
|
3240
|
+
const isDisabled = this._tabDisabled[i];
|
|
3241
|
+
return html`
|
|
3242
|
+
<button
|
|
3243
|
+
class="${this.stretch ? "flex-1" : "px-4"} h-8 flex items-center justify-center text-sm font-medium bg-transparent
|
|
3244
|
+
transition-colors duration-200
|
|
3245
|
+
focus-visible:outline-2 focus-visible:outline-(--axebow-tertiary)
|
|
3246
|
+
${isDisabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
|
|
3247
|
+
${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)"}"
|
|
3248
|
+
?disabled=${isDisabled}
|
|
3249
|
+
@click=${() => this._selectTab(i)}
|
|
3250
|
+
>
|
|
3251
|
+
<slot name="tab-label-${i}"></slot>
|
|
3252
|
+
</button>
|
|
3253
|
+
`;
|
|
3254
|
+
})}
|
|
3255
|
+
${!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>` : ""}
|
|
3256
|
+
</div>
|
|
3257
|
+
${tabs.map((i) => html`
|
|
3258
|
+
<div class="${this._activeTab === i ? "block" : "hidden"}">
|
|
3259
|
+
<slot name="tab-panel-${i}"></slot>
|
|
3260
|
+
</div>
|
|
3261
|
+
`)}
|
|
3262
|
+
`;
|
|
3263
|
+
}
|
|
3264
|
+
render() {
|
|
3265
|
+
const tabs = Array.from({ length: this._tabCount }, (_, i) => i);
|
|
3266
|
+
return this.variant === "sections-tab" ? this._renderSectionsTab(tabs) : this._renderFormsTab(tabs);
|
|
3267
|
+
}
|
|
3268
|
+
};
|
|
3269
|
+
__decorate([property({
|
|
3270
|
+
type: Boolean,
|
|
3271
|
+
attribute: false
|
|
3272
|
+
})], AxebowTabSelector.prototype, "disabled", void 0);
|
|
3273
|
+
__decorate([property({ type: Number })], AxebowTabSelector.prototype, "activeTab", void 0);
|
|
3274
|
+
__decorate([property({ type: Boolean })], AxebowTabSelector.prototype, "bordered", void 0);
|
|
3275
|
+
__decorate([property({ type: String })], AxebowTabSelector.prototype, "variant", void 0);
|
|
3276
|
+
__decorate([property({ type: Boolean })], AxebowTabSelector.prototype, "stretch", void 0);
|
|
3277
|
+
__decorate([state()], AxebowTabSelector.prototype, "_activeTab", void 0);
|
|
3278
|
+
__decorate([state()], AxebowTabSelector.prototype, "_tabCount", void 0);
|
|
3279
|
+
__decorate([state()], AxebowTabSelector.prototype, "_tabDisabled", void 0);
|
|
3280
|
+
AxebowTabSelector = __decorate([customElement("axebow-tab-selector")], AxebowTabSelector);
|
|
3281
|
+
//#endregion
|
|
3282
|
+
//#region src/components/axebow-registry-selector/axebow-registry-selector.ts
|
|
3283
|
+
function isValidRegistryUrl(value) {
|
|
3284
|
+
if (!value) return true;
|
|
3285
|
+
try {
|
|
3286
|
+
const urlToParse = value.includes("://") ? value : `https://${value}`;
|
|
3287
|
+
return new URL(urlToParse).hostname.includes(".");
|
|
3288
|
+
} catch {
|
|
3289
|
+
return false;
|
|
3290
|
+
}
|
|
3291
|
+
}
|
|
3292
|
+
var AxebowRegistrySelector = class AxebowRegistrySelector extends LitElement {
|
|
3293
|
+
constructor(..._args) {
|
|
3294
|
+
super(..._args);
|
|
3295
|
+
this.disabled = false;
|
|
3296
|
+
this.activeTab = 0;
|
|
3297
|
+
this.registries = [];
|
|
3298
|
+
this.selectedRegistry = "";
|
|
3299
|
+
this.oneShotRegistryUrl = "";
|
|
3300
|
+
this.oneShotRegistrySecret = "";
|
|
3301
|
+
this.secrets = [];
|
|
3302
|
+
}
|
|
3303
|
+
static {
|
|
3304
|
+
this.styles = [
|
|
3305
|
+
unsafeCSS(tailwind_default),
|
|
3306
|
+
axebowTheme,
|
|
3307
|
+
css`
|
|
3308
|
+
:host {
|
|
3309
|
+
display: block;
|
|
3310
|
+
}
|
|
3311
|
+
`
|
|
3312
|
+
];
|
|
3313
|
+
}
|
|
3314
|
+
updated(changedProperties) {
|
|
3315
|
+
super.updated(changedProperties);
|
|
3316
|
+
if (changedProperties.has("oneShotRegistryUrl") || changedProperties.has("activeTab")) this.onValidityChange?.(this.activeTab !== 1 || isValidRegistryUrl(this.oneShotRegistryUrl));
|
|
3317
|
+
}
|
|
3318
|
+
_isRegistrySelected(registry) {
|
|
3319
|
+
return !!registry.registry && registry.registry === this.selectedRegistry;
|
|
3320
|
+
}
|
|
3321
|
+
_secretOptions() {
|
|
3322
|
+
const options = [...this.secrets];
|
|
3323
|
+
if (this.oneShotRegistrySecret && !options.some((s) => s.name === this.oneShotRegistrySecret)) options.push({ name: this.oneShotRegistrySecret });
|
|
3324
|
+
return options;
|
|
3325
|
+
}
|
|
3326
|
+
_renderRegistryItem(registry) {
|
|
3327
|
+
const isSelected = this._isRegistrySelected(registry);
|
|
3328
|
+
return html`
|
|
3329
|
+
<style>
|
|
3330
|
+
.registry-card {
|
|
3331
|
+
position: relative;
|
|
3332
|
+
gap: calc(var(--spacing) * 0.5);
|
|
3333
|
+
border-color: var(--color-gray-200);
|
|
3334
|
+
background-color: transparent;
|
|
3335
|
+
}
|
|
3336
|
+
@media (min-width: 48rem) {
|
|
3337
|
+
.registry-card {
|
|
3338
|
+
gap: var(--spacing);
|
|
3339
|
+
}
|
|
3340
|
+
}
|
|
3341
|
+
@media (min-width: 64rem) {
|
|
3342
|
+
.registry-card {
|
|
3343
|
+
gap: calc(var(--spacing) * 2);
|
|
3344
|
+
}
|
|
3345
|
+
}
|
|
3346
|
+
.registry-card.selected {
|
|
3347
|
+
border-color: var(--axebow-primary);
|
|
3348
|
+
background-color: var(--axebow-white);
|
|
3349
|
+
}
|
|
3350
|
+
.registry-logo {
|
|
3351
|
+
height: calc(var(--spacing) * 3);
|
|
3352
|
+
aspect-ratio: 1 / 1;
|
|
3353
|
+
object-fit: contain;
|
|
3354
|
+
}
|
|
3355
|
+
@media (min-width: 64rem) {
|
|
3356
|
+
.registry-logo {
|
|
3357
|
+
height: calc(var(--spacing) * 6);
|
|
3358
|
+
}
|
|
3359
|
+
}
|
|
3360
|
+
</style>
|
|
3361
|
+
<sl-carousel-item>
|
|
3362
|
+
<div
|
|
3363
|
+
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" : ""}"
|
|
3364
|
+
@click=${() => {
|
|
3365
|
+
if (!this.disabled) this.onRegistrySelect?.(registry);
|
|
3366
|
+
}}
|
|
3367
|
+
>
|
|
3368
|
+
<img class="registry-logo" src="${registry.content}" alt="${registry.id}" />
|
|
3369
|
+
<p>${registry.id}</p>
|
|
3370
|
+
${isSelected ? html`
|
|
3371
|
+
<div
|
|
3372
|
+
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"
|
|
3373
|
+
>
|
|
3374
|
+
<axebow-icon iconName="check_circle" filled iconColor="var(--axebow-primary)" size="xl"></axebow-icon>
|
|
3375
|
+
</div>
|
|
3376
|
+
` : ""}
|
|
3377
|
+
</div>
|
|
3378
|
+
</sl-carousel-item>
|
|
3379
|
+
`;
|
|
3380
|
+
}
|
|
3381
|
+
_renderRegistryCarousel() {
|
|
3382
|
+
return html`
|
|
3383
|
+
<axebow-input
|
|
3384
|
+
.disabled=${this.disabled}
|
|
3385
|
+
label="${this.labels.registryLabel}"
|
|
3386
|
+
required
|
|
3387
|
+
description="${this.labels.registryDescription}"
|
|
3388
|
+
controlType="carousel"
|
|
3389
|
+
.value="${this.selectedRegistry}"
|
|
3390
|
+
.carouselItems="${this.registries}"
|
|
3391
|
+
.carouselItemRenderer=${(registry) => this._renderRegistryItem(registry)}
|
|
3392
|
+
></axebow-input>
|
|
3393
|
+
`;
|
|
3394
|
+
}
|
|
3395
|
+
_renderOneShotRegistryInputs() {
|
|
3396
|
+
const secretOptions = this._secretOptions();
|
|
3397
|
+
const urlValid = isValidRegistryUrl(this.oneShotRegistryUrl);
|
|
3398
|
+
return html`
|
|
3399
|
+
<div class="flex flex-col gap-4">
|
|
3400
|
+
<p>${unsafeHTML(this.labels.oneShotRegistryDescription)}</p>
|
|
3401
|
+
<div class="flex gap-[2%] w-full">
|
|
3402
|
+
<div class="flex-1 min-w-0">
|
|
3403
|
+
<axebow-input
|
|
3404
|
+
label="${this.labels.registryUrlLabel}"
|
|
3405
|
+
placeholder="${this.labels.registryUrlPlaceholder}"
|
|
3406
|
+
required
|
|
3407
|
+
.value="${this.oneShotRegistryUrl}"
|
|
3408
|
+
.hasError="${!urlValid}"
|
|
3409
|
+
.errorMessage="${this.labels.registryUrlInvalidLabel}"
|
|
3410
|
+
.callback=${(e) => this.onRegistryUrlChange?.(e.target.value)}
|
|
3411
|
+
maxlength="500"
|
|
3412
|
+
></axebow-input>
|
|
3413
|
+
</div>
|
|
3414
|
+
<div class="flex-1 min-w-0 flex flex-col">
|
|
3415
|
+
<div class="flex items-baseline gap-2" style="height: 1.0625rem; margin-bottom: 0.25rem;">
|
|
3416
|
+
<h4 class="font-semibold text-base leading-4.25 m-0 overflow-hidden text-ellipsis">
|
|
3417
|
+
${this.labels.registryCredentialsLabel}
|
|
3418
|
+
</h4>
|
|
3419
|
+
</div>
|
|
3420
|
+
<sl-select
|
|
3421
|
+
placeholder="${this.labels.registryCredentialsPlaceholder}"
|
|
3422
|
+
clearable
|
|
3423
|
+
hoist
|
|
3424
|
+
.value="${this.oneShotRegistrySecret}"
|
|
3425
|
+
@sl-change=${(e) => this.onRegistrySecretSelect?.(e.target.value)}
|
|
3426
|
+
>
|
|
3427
|
+
<div
|
|
3428
|
+
class="flex items-center gap-2 cursor-pointer px-4 py-1"
|
|
3429
|
+
@click=${(e) => {
|
|
3430
|
+
e.stopPropagation();
|
|
3431
|
+
this.onCreateSecret?.();
|
|
3432
|
+
}}
|
|
3433
|
+
>
|
|
3434
|
+
<axebow-icon iconName="add" iconColor="var(--axebow-tertiary)" size="md"></axebow-icon>
|
|
3435
|
+
${this.labels.createNewSecretLabel}
|
|
3436
|
+
</div>
|
|
3437
|
+
${secretOptions.length > 0 ? html`<sl-divider></sl-divider>` : ""}
|
|
3438
|
+
${secretOptions.map((s) => html`<sl-option value="${s.name}">${s.name}</sl-option>`)}
|
|
3439
|
+
${secretOptions.length === 0 ? html`<sl-option disabled>${this.labels.noSecretsAvailableLabel}</sl-option>` : ""}
|
|
3440
|
+
</sl-select>
|
|
3441
|
+
</div>
|
|
3442
|
+
</div>
|
|
3443
|
+
</div>
|
|
3444
|
+
`;
|
|
3445
|
+
}
|
|
3446
|
+
render() {
|
|
3447
|
+
return html`
|
|
3448
|
+
<axebow-tab-selector
|
|
3449
|
+
class="w-full"
|
|
3450
|
+
.disabled=${this.disabled}
|
|
3451
|
+
.activeTab=${this.activeTab}
|
|
3452
|
+
@tab-change=${(e) => this.onTabChange?.(e.detail.index)}
|
|
3453
|
+
>
|
|
3454
|
+
<span slot="tab-label-0">${this.labels.defaultRegistryTabLabel}</span>
|
|
3455
|
+
<div slot="tab-panel-0">${this._renderRegistryCarousel()}</div>
|
|
3456
|
+
|
|
3457
|
+
<span slot="tab-label-1">${this.labels.oneShotRegistryTabLabel}</span>
|
|
3458
|
+
<div slot="tab-panel-1">${this._renderOneShotRegistryInputs()}</div>
|
|
3459
|
+
</axebow-tab-selector>
|
|
3460
|
+
`;
|
|
3461
|
+
}
|
|
3462
|
+
};
|
|
3463
|
+
__decorate([property({ type: Boolean })], AxebowRegistrySelector.prototype, "disabled", void 0);
|
|
3464
|
+
__decorate([property({ type: Number })], AxebowRegistrySelector.prototype, "activeTab", void 0);
|
|
3465
|
+
__decorate([property({ type: Array })], AxebowRegistrySelector.prototype, "registries", void 0);
|
|
3466
|
+
__decorate([property({ type: String })], AxebowRegistrySelector.prototype, "selectedRegistry", void 0);
|
|
3467
|
+
__decorate([property({ type: String })], AxebowRegistrySelector.prototype, "oneShotRegistryUrl", void 0);
|
|
3468
|
+
__decorate([property({ type: String })], AxebowRegistrySelector.prototype, "oneShotRegistrySecret", void 0);
|
|
3469
|
+
__decorate([property({ type: Array })], AxebowRegistrySelector.prototype, "secrets", void 0);
|
|
3470
|
+
__decorate([property({ attribute: false })], AxebowRegistrySelector.prototype, "labels", void 0);
|
|
3471
|
+
__decorate([property({ attribute: false })], AxebowRegistrySelector.prototype, "onTabChange", void 0);
|
|
3472
|
+
__decorate([property({ attribute: false })], AxebowRegistrySelector.prototype, "onRegistrySelect", void 0);
|
|
3473
|
+
__decorate([property({ attribute: false })], AxebowRegistrySelector.prototype, "onRegistryUrlChange", void 0);
|
|
3474
|
+
__decorate([property({ attribute: false })], AxebowRegistrySelector.prototype, "onRegistrySecretSelect", void 0);
|
|
3475
|
+
__decorate([property({ attribute: false })], AxebowRegistrySelector.prototype, "onCreateSecret", void 0);
|
|
3476
|
+
__decorate([property({ attribute: false })], AxebowRegistrySelector.prototype, "onValidityChange", void 0);
|
|
3477
|
+
AxebowRegistrySelector = __decorate([customElement("axebow-registry-selector")], AxebowRegistrySelector);
|
|
3478
|
+
//#endregion
|
|
2968
3479
|
//#region src/components/axebow-dialog/axebow-dialog.ts
|
|
2969
3480
|
var AxebowDialog = class AxebowDialog extends LitElement {
|
|
2970
3481
|
constructor(..._args) {
|
|
@@ -3111,7 +3622,7 @@ var AxebowCollaboratorsDialog = class AxebowCollaboratorsDialog extends LitEleme
|
|
|
3111
3622
|
}
|
|
3112
3623
|
sl-dialog::part(panel) {
|
|
3113
3624
|
background-color: var(--axebow-base);
|
|
3114
|
-
border-radius:
|
|
3625
|
+
border-radius: 0.375rem;
|
|
3115
3626
|
height: min(38.6875rem, 90vh);
|
|
3116
3627
|
padding: 24px;
|
|
3117
3628
|
box-sizing: border-box;
|
|
@@ -3260,7 +3771,7 @@ var AxebowCollaboratorsDialog = class AxebowCollaboratorsDialog extends LitEleme
|
|
|
3260
3771
|
${index !== this.collaborators.length - 1 ? "border-b border-gray-200" : ""}"
|
|
3261
3772
|
>
|
|
3262
3773
|
<div class="flex items-center gap-2 min-w-0 flex-1">
|
|
3263
|
-
<div class="w-9 h-9 bg-white rounded
|
|
3774
|
+
<div class="w-9 h-9 bg-white rounded flex items-center justify-center shrink-0">
|
|
3264
3775
|
${c.invitePending ? html`<axebow-icon
|
|
3265
3776
|
iconName="outgoing_mail"
|
|
3266
3777
|
iconColor="var(--axebow-dark-yellow)"
|
|
@@ -3472,7 +3983,7 @@ var AxebowModalsConfirmation = class AxebowModalsConfirmation extends LitElement
|
|
|
3472
3983
|
/* Shoelace Dialog Custom Overrides */
|
|
3473
3984
|
sl-dialog::part(panel) {
|
|
3474
3985
|
background-color: var(--axebow-confirmation-modal-bg, #f0f1f5);
|
|
3475
|
-
border-radius:
|
|
3986
|
+
border-radius: 0.375rem;
|
|
3476
3987
|
box-shadow: 2px 2px 25px rgba(0, 0, 0, 0.1);
|
|
3477
3988
|
padding: 0;
|
|
3478
3989
|
width: 100%;
|
|
@@ -3496,7 +4007,7 @@ var AxebowModalsConfirmation = class AxebowModalsConfirmation extends LitElement
|
|
|
3496
4007
|
/* Standalone container styles (when rendered inline or without dialog) */
|
|
3497
4008
|
.modal-card {
|
|
3498
4009
|
background-color: var(--axebow-confirmation-modal-bg, #f0f1f5);
|
|
3499
|
-
border-radius:
|
|
4010
|
+
border-radius: 0.375rem;
|
|
3500
4011
|
box-shadow: 2px 2px 25px rgba(0, 0, 0, 0.1);
|
|
3501
4012
|
padding: 24px;
|
|
3502
4013
|
width: 100%;
|
|
@@ -3507,7 +4018,7 @@ var AxebowModalsConfirmation = class AxebowModalsConfirmation extends LitElement
|
|
|
3507
4018
|
/* Form Input Styling */
|
|
3508
4019
|
.form-field-input::part(base) {
|
|
3509
4020
|
height: 40px;
|
|
3510
|
-
border-radius:
|
|
4021
|
+
border-radius: 0.375rem;
|
|
3511
4022
|
border: 1px solid #dbdde4;
|
|
3512
4023
|
background-color: #ffffff;
|
|
3513
4024
|
padding-left: 12px;
|
|
@@ -3542,7 +4053,7 @@ var AxebowModalsConfirmation = class AxebowModalsConfirmation extends LitElement
|
|
|
3542
4053
|
.modal-btn {
|
|
3543
4054
|
width: 150px;
|
|
3544
4055
|
height: 40px;
|
|
3545
|
-
border-radius:
|
|
4056
|
+
border-radius: 0.375rem;
|
|
3546
4057
|
font-size: 14px;
|
|
3547
4058
|
font-weight: 600;
|
|
3548
4059
|
font-family: 'Open Sans', sans-serif;
|
|
@@ -4219,7 +4730,7 @@ var AxebowDragDropUploadFile = class AxebowDragDropUploadFile extends LitElement
|
|
|
4219
4730
|
render() {
|
|
4220
4731
|
return html`
|
|
4221
4732
|
<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-
|
|
4733
|
+
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
4734
|
@click=${this._triggerFileInput}
|
|
4224
4735
|
@dragover=${this._handleDragOver}
|
|
4225
4736
|
@dragleave=${this._handleDragLeave}
|
|
@@ -4335,14 +4846,14 @@ var AxebowBanner = class AxebowBanner extends LitElement {
|
|
|
4335
4846
|
icon: "text-green-600"
|
|
4336
4847
|
},
|
|
4337
4848
|
warning: {
|
|
4338
|
-
bg: "bg-
|
|
4339
|
-
border: "border-yellow
|
|
4849
|
+
bg: "bg-(--axebow-warning-bg)",
|
|
4850
|
+
border: "border-(--axebow-dark-yellow)",
|
|
4340
4851
|
text: "text-yellow-800",
|
|
4341
4852
|
icon: "text-yellow-600"
|
|
4342
4853
|
},
|
|
4343
4854
|
error: {
|
|
4344
|
-
bg: "bg-
|
|
4345
|
-
border: "border-
|
|
4855
|
+
bg: "bg-(--axebow-error-bg)",
|
|
4856
|
+
border: "border-(--axebow-error-border)",
|
|
4346
4857
|
text: "text-[var(--axebow-error)]",
|
|
4347
4858
|
icon: "text-[var(--axebow-error)]"
|
|
4348
4859
|
}
|
|
@@ -4350,9 +4861,9 @@ var AxebowBanner = class AxebowBanner extends LitElement {
|
|
|
4350
4861
|
const classes = map[this.type] || map.info;
|
|
4351
4862
|
return html`
|
|
4352
4863
|
<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-
|
|
4864
|
+
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
4865
|
>
|
|
4355
|
-
<div class="shrink-0">
|
|
4866
|
+
<div class="w-6 h-6 shrink-0 flex items-center justify-center">
|
|
4356
4867
|
${this.iconName ? html`<axebow-icon
|
|
4357
4868
|
class="${classes.icon}"
|
|
4358
4869
|
iconName="${this.iconName}"
|
|
@@ -4363,7 +4874,7 @@ var AxebowBanner = class AxebowBanner extends LitElement {
|
|
|
4363
4874
|
iconColor="${classes.icon}"
|
|
4364
4875
|
></axebow-icon>`}
|
|
4365
4876
|
</div>
|
|
4366
|
-
<div class="flex-1
|
|
4877
|
+
<div class="flex-1">
|
|
4367
4878
|
<slot></slot>
|
|
4368
4879
|
</div>
|
|
4369
4880
|
</div>
|
|
@@ -4661,7 +5172,14 @@ var AxebowMoreActions = class AxebowMoreActions extends LitElement {
|
|
|
4661
5172
|
};
|
|
4662
5173
|
}
|
|
4663
5174
|
static {
|
|
4664
|
-
this.styles = [unsafeCSS(tailwind_default), css
|
|
5175
|
+
this.styles = [unsafeCSS(tailwind_default), css`
|
|
5176
|
+
:host {
|
|
5177
|
+
display: inline-block;
|
|
5178
|
+
}
|
|
5179
|
+
axebow-button::part(base) {
|
|
5180
|
+
min-width: auto !important;
|
|
5181
|
+
}
|
|
5182
|
+
`];
|
|
4665
5183
|
}
|
|
4666
5184
|
connectedCallback() {
|
|
4667
5185
|
super.connectedCallback();
|
|
@@ -4698,22 +5216,25 @@ var AxebowMoreActions = class AxebowMoreActions extends LitElement {
|
|
|
4698
5216
|
const dropdownStyle = this.openToRight ? `position:fixed;top:${this._fixedPos.top}px;right:${this._fixedPos.right}px;z-index:1000;` : "";
|
|
4699
5217
|
return html`
|
|
4700
5218
|
<div class="relative w-full h-full flex justify-end">
|
|
4701
|
-
<button
|
|
4702
|
-
class="trigger
|
|
5219
|
+
<axebow-button
|
|
5220
|
+
class="trigger w-full h-full"
|
|
5221
|
+
variant="tertiary"
|
|
5222
|
+
fixedWidth="100%"
|
|
5223
|
+
fixedHeight=${this.fixedHeight}
|
|
4703
5224
|
?disabled=${this.disabled}
|
|
4704
5225
|
@click=${this._toggle}
|
|
4705
5226
|
>
|
|
4706
|
-
${this.iconName ? html`<axebow-icon iconName=${this.iconName} size="md" iconColor="
|
|
4707
|
-
</button>
|
|
5227
|
+
${this.iconName ? html`<axebow-icon iconName=${this.iconName} size="md" iconColor="currentColor"></axebow-icon>` : this.open ? this.closeLabel : this.title || this.moreActionsLabel}
|
|
5228
|
+
</axebow-button>
|
|
4708
5229
|
${this.open ? html`
|
|
4709
5230
|
<div
|
|
4710
|
-
class="absolute right-0 z-10 bg-white border border-(--axebow-gray) rounded-
|
|
5231
|
+
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
5232
|
style=${dropdownStyle}
|
|
4712
5233
|
@click=${this._handleSlotClick}
|
|
4713
5234
|
>
|
|
4714
5235
|
${this.options?.length ? this.options.map((opt) => html`
|
|
4715
5236
|
<button
|
|
4716
|
-
class="flex items-center gap-2 text-left py-1 px-2 cursor-pointer rounded
|
|
5237
|
+
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
5238
|
@click=${(e) => {
|
|
4718
5239
|
e.stopPropagation();
|
|
4719
5240
|
opt.onTap(e);
|
|
@@ -4742,6 +5263,7 @@ __decorate([property({ type: String })], AxebowMoreActions.prototype, "iconName"
|
|
|
4742
5263
|
__decorate([property({ type: Boolean })], AxebowMoreActions.prototype, "openToRight", void 0);
|
|
4743
5264
|
__decorate([property({ type: String })], AxebowMoreActions.prototype, "closeLabel", void 0);
|
|
4744
5265
|
__decorate([property({ type: String })], AxebowMoreActions.prototype, "moreActionsLabel", void 0);
|
|
5266
|
+
__decorate([property({ type: String })], AxebowMoreActions.prototype, "fixedHeight", void 0);
|
|
4745
5267
|
__decorate([state()], AxebowMoreActions.prototype, "_fixedPos", void 0);
|
|
4746
5268
|
AxebowMoreActions = __decorate([customElement("axebow-more-actions")], AxebowMoreActions);
|
|
4747
5269
|
//#endregion
|
|
@@ -5013,7 +5535,7 @@ var AxebowCardHeader = class AxebowCardHeader extends LitElement {
|
|
|
5013
5535
|
const isRuntime = this.cardType === "runtime";
|
|
5014
5536
|
const heightStyle = `height:${this._headerHeight()}`;
|
|
5015
5537
|
if (isCompact) return html`
|
|
5016
|
-
<div class="${isTenant ? "w-88.5 mx-auto" : "w-full"} bg-(--axebow-anti-flash-white) rounded-
|
|
5538
|
+
<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
5539
|
<div class="flex flex-col flex-1 min-w-0">
|
|
5018
5540
|
${this.tenantOrAccount || this.logoSrc ? html`
|
|
5019
5541
|
<div class="flex gap-2 items-center leading-none mt-1">
|
|
@@ -5041,7 +5563,7 @@ var AxebowCardHeader = class AxebowCardHeader extends LitElement {
|
|
|
5041
5563
|
</div>
|
|
5042
5564
|
`;
|
|
5043
5565
|
return html`
|
|
5044
|
-
<div class="w-full bg-(--axebow-anti-flash-white) rounded-
|
|
5566
|
+
<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
5567
|
<axebow-card-cloud-logo .src=${this.logoSrc} size="large"></axebow-card-cloud-logo>
|
|
5046
5568
|
<div class="flex flex-col ${isRuntime ? "flex-1 min-w-0 justify-center" : "w-71 h-9.75"}">
|
|
5047
5569
|
${!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 +6290,7 @@ var AxebowBaseCard = class AxebowBaseCard extends LitElement {
|
|
|
5768
6290
|
const showBanner = showErrorBanner || showNormalBanner;
|
|
5769
6291
|
return html`
|
|
5770
6292
|
<div
|
|
5771
|
-
class="${_AxebowBaseCard.SIZE_CLASSES[this.cardType]} bg-(--axebow-white) rounded-
|
|
6293
|
+
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
6294
|
style=${isRuntime ? `border-top-color:${this.borderColor};` : ""}
|
|
5773
6295
|
?inert=${this.isDeleting}
|
|
5774
6296
|
>
|
|
@@ -5803,7 +6325,7 @@ var AxebowBaseCard = class AxebowBaseCard extends LitElement {
|
|
|
5803
6325
|
${isRuntime ? html`
|
|
5804
6326
|
<div class="flex flex-row justify-between items-center min-h-10 max-h-10 overflow-hidden">
|
|
5805
6327
|
<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-
|
|
6328
|
+
${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
6329
|
</div>
|
|
5808
6330
|
` : html`
|
|
5809
6331
|
<axebow-card-stats-row
|
|
@@ -6112,7 +6634,7 @@ var AxebowAlert = class AxebowAlert extends LitElement {
|
|
|
6112
6634
|
const config = VARIANT_CONFIG[this.variant] ?? VARIANT_CONFIG.info;
|
|
6113
6635
|
return html`
|
|
6114
6636
|
<div
|
|
6115
|
-
class="theme flex items-start gap-3 p-4 rounded-
|
|
6637
|
+
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
6638
|
style="border-left-color: ${config.iconColor};"
|
|
6117
6639
|
>
|
|
6118
6640
|
<axebow-icon iconName="${config.icon}" iconColor="${config.iconColor}" size="3xl"></axebow-icon>
|
|
@@ -6120,8 +6642,10 @@ var AxebowAlert = class AxebowAlert extends LitElement {
|
|
|
6120
6642
|
<p class="line-clamp-11 overflow-hidden m-0" .innerHTML=${this.message}></p>
|
|
6121
6643
|
</div>
|
|
6122
6644
|
${this.actionLabel ? html`<axebow-button
|
|
6123
|
-
variant="
|
|
6645
|
+
variant="text"
|
|
6124
6646
|
size="small"
|
|
6647
|
+
fixedWidth="2.3125rem"
|
|
6648
|
+
fixedHeight="1.0625rem"
|
|
6125
6649
|
@click=${() => {
|
|
6126
6650
|
this.onAction?.();
|
|
6127
6651
|
this._handleClose();
|
|
@@ -6252,7 +6776,7 @@ var AxebowServicesPanel = class AxebowServicesPanel extends LitElement {
|
|
|
6252
6776
|
<div class="flex items-start">
|
|
6253
6777
|
${this._renderCard()}
|
|
6254
6778
|
<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
|
|
6779
|
+
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
6780
|
@click=${this._handleToggle}
|
|
6257
6781
|
>
|
|
6258
6782
|
<axebow-icon iconName="close" iconColor="var(--axebow-tertiary)" size="md"></axebow-icon>
|
|
@@ -6265,11 +6789,9 @@ var AxebowServicesPanel = class AxebowServicesPanel extends LitElement {
|
|
|
6265
6789
|
<div class="flex flex-col gap-2 w-60.5 shrink-0">
|
|
6266
6790
|
<div class="h-full bg-white rounded-md axebow-shadow p-2 box-border">
|
|
6267
6791
|
<div class="flex justify-between items-center gap-4">
|
|
6268
|
-
<h1 class="font-semibold text-
|
|
6792
|
+
<h1 class="font-semibold text-base text-(--axebow-secondary) uppercase px-1">${this.title}</h1>
|
|
6269
6793
|
</div>
|
|
6270
6794
|
<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
6795
|
<axebow-search
|
|
6274
6796
|
class="px-1 my-2"
|
|
6275
6797
|
width="13.625rem"
|
|
@@ -6277,6 +6799,8 @@ var AxebowServicesPanel = class AxebowServicesPanel extends LitElement {
|
|
|
6277
6799
|
.value=${this.searchTerm}
|
|
6278
6800
|
@search-change=${(e) => this._handleSearchChange(e.detail.value)}
|
|
6279
6801
|
></axebow-search>
|
|
6802
|
+
<div class="w-full h-px bg-(--axebow-light-gray)/80 my-1.5"></div>
|
|
6803
|
+
<p class="text-base text-center text-(--axebow-secondary) px-2">${this.dragDropText}</p>
|
|
6280
6804
|
<div class="w-full h-px bg-(--axebow-light-gray)/80"></div>
|
|
6281
6805
|
${this._renderServicesList()}
|
|
6282
6806
|
</div>
|
|
@@ -6472,14 +6996,14 @@ function buildChannelRow(ch) {
|
|
|
6472
6996
|
row.appendChild(overlay);
|
|
6473
6997
|
return row;
|
|
6474
6998
|
}
|
|
6475
|
-
function buildChannelSection(title, noChannelsText, channels, addButton
|
|
6999
|
+
function buildChannelSection(title, noChannelsText, channels, addButton) {
|
|
6476
7000
|
const fragment = document.createDocumentFragment();
|
|
6477
|
-
const titleDiv = createElement("div",
|
|
7001
|
+
const titleDiv = createElement("div", "channel-title");
|
|
6478
7002
|
const h4 = createElement("h4", void 0, title);
|
|
6479
7003
|
titleDiv.appendChild(h4);
|
|
6480
7004
|
if (addButton) titleDiv.appendChild(addButton);
|
|
6481
7005
|
fragment.appendChild(titleDiv);
|
|
6482
|
-
const listDiv = createElement("div"
|
|
7006
|
+
const listDiv = createElement("div");
|
|
6483
7007
|
if (channels.length === 0) listDiv.appendChild(createElement("p", "gray-text", noChannelsText));
|
|
6484
7008
|
else channels.forEach((ch) => listDiv.appendChild(buildChannelRow(ch)));
|
|
6485
7009
|
fragment.appendChild(listDiv);
|
|
@@ -6487,6 +7011,18 @@ function buildChannelSection(title, noChannelsText, channels, addButton, hidden
|
|
|
6487
7011
|
container.appendChild(fragment);
|
|
6488
7012
|
return container;
|
|
6489
7013
|
}
|
|
7014
|
+
function buildComingSoonSection(title, comingSoonText) {
|
|
7015
|
+
const fragment = document.createDocumentFragment();
|
|
7016
|
+
const titleDiv = createElement("div", "channel-title");
|
|
7017
|
+
titleDiv.appendChild(createElement("h4", void 0, title));
|
|
7018
|
+
fragment.appendChild(titleDiv);
|
|
7019
|
+
const listDiv = createElement("div");
|
|
7020
|
+
listDiv.appendChild(createElement("p", "gray-text", comingSoonText));
|
|
7021
|
+
fragment.appendChild(listDiv);
|
|
7022
|
+
const container = createElement("div");
|
|
7023
|
+
container.appendChild(fragment);
|
|
7024
|
+
return container;
|
|
7025
|
+
}
|
|
6490
7026
|
function buildAddButton(channelType) {
|
|
6491
7027
|
const container = createElement("div", "add-button-container");
|
|
6492
7028
|
container.classList.add(`add-button-${channelType}`);
|
|
@@ -6504,12 +7040,12 @@ function buildAddButton(channelType) {
|
|
|
6504
7040
|
});
|
|
6505
7041
|
return container;
|
|
6506
7042
|
}
|
|
6507
|
-
function buildDivider(
|
|
7043
|
+
function buildDivider() {
|
|
6508
7044
|
const divider = document.createElement("sl-divider");
|
|
6509
|
-
|
|
7045
|
+
divider.classList.add("mesh-node-divider");
|
|
6510
7046
|
return divider;
|
|
6511
7047
|
}
|
|
6512
|
-
function buildMainNodeContent(data, labels, serverAddButton, clientAddButton
|
|
7048
|
+
function buildMainNodeContent(data, labels, serverAddButton, clientAddButton) {
|
|
6513
7049
|
const root = createElement("div");
|
|
6514
7050
|
root.setAttribute("data-node-type", "main");
|
|
6515
7051
|
const card = createElement("div", "service-card");
|
|
@@ -6519,8 +7055,8 @@ function buildMainNodeContent(data, labels, serverAddButton, clientAddButton, du
|
|
|
6519
7055
|
card.appendChild(buildDivider());
|
|
6520
7056
|
const clientSection = buildChannelSection(labels.clientChannelsTitle, labels.noChannelsText, data.clientChannels || [], clientAddButton);
|
|
6521
7057
|
card.appendChild(clientSection);
|
|
6522
|
-
card.appendChild(buildDivider(
|
|
6523
|
-
const duplexSection =
|
|
7058
|
+
card.appendChild(buildDivider());
|
|
7059
|
+
const duplexSection = buildComingSoonSection(labels.duplexChannelsTitle, labels.comingSoonText);
|
|
6524
7060
|
card.appendChild(duplexSection);
|
|
6525
7061
|
root.appendChild(card);
|
|
6526
7062
|
return root;
|
|
@@ -6572,15 +7108,17 @@ var AxebowHelpBubble = class AxebowHelpBubble extends LitElement {
|
|
|
6572
7108
|
@mouseleave=${() => this._isOpen = false}
|
|
6573
7109
|
>
|
|
6574
7110
|
${this._isOpen ? html`
|
|
6575
|
-
<div class="flex flex-col bg-white rounded-
|
|
7111
|
+
<div class="flex flex-col bg-white rounded-md axebow-shadow overflow-hidden min-w-[8.2rem]">
|
|
6576
7112
|
<div class="flex justify-center px-3 py-1">
|
|
6577
7113
|
<div class="flex flex-col">
|
|
6578
7114
|
${this.options.map((option) => html`
|
|
6579
7115
|
<div
|
|
6580
|
-
class="flex items-center gap-2 px-3 py-1 my-0.5 rounded-
|
|
7116
|
+
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
7117
|
@click=${() => this._openLink(option.url)}
|
|
6582
7118
|
>
|
|
6583
|
-
<span class="font-
|
|
7119
|
+
<span class="text-sm font-semibold text-(--axebow-primary) whitespace-nowrap"
|
|
7120
|
+
>${option.label}</span
|
|
7121
|
+
>
|
|
6584
7122
|
<axebow-icon iconName="open_in_new" iconColor="var(--axebow-gray)" size="base"></axebow-icon>
|
|
6585
7123
|
</div>
|
|
6586
7124
|
`)}
|
|
@@ -6589,7 +7127,7 @@ var AxebowHelpBubble = class AxebowHelpBubble extends LitElement {
|
|
|
6589
7127
|
</div>
|
|
6590
7128
|
` : ""}
|
|
6591
7129
|
<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-
|
|
7130
|
+
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
7131
|
>
|
|
6594
7132
|
<axebow-icon iconName="contact_support" iconColor="white" size="xl"></axebow-icon>
|
|
6595
7133
|
</div>
|
|
@@ -6619,11 +7157,11 @@ var AxebowNumberCard = class AxebowNumberCard extends LitElement {
|
|
|
6619
7157
|
render() {
|
|
6620
7158
|
return html`
|
|
6621
7159
|
<div
|
|
6622
|
-
class="flex items-center gap-3 w-70.5 h-20 box-border bg-white border-solid border border-[#DBDDE4] rounded-
|
|
7160
|
+
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
7161
|
@click=${() => this.onClick?.()}
|
|
6624
7162
|
>
|
|
6625
7163
|
<div
|
|
6626
|
-
class="w-10.5 h-10.5 shrink-0 flex items-center justify-center bg-(--axebow-base) rounded-
|
|
7164
|
+
class="w-10.5 h-10.5 shrink-0 flex items-center justify-center bg-(--axebow-base) rounded-md"
|
|
6627
7165
|
>
|
|
6628
7166
|
<axebow-icon iconName=${this.icon} size="3xl"></axebow-icon>
|
|
6629
7167
|
</div>
|
|
@@ -6698,8 +7236,8 @@ var AxebowPill = class AxebowPill extends LitElement {
|
|
|
6698
7236
|
<div
|
|
6699
7237
|
class="pill group flex flex-col items-center justify-center gap-3 p-6
|
|
6700
7238
|
transition-colors duration-300
|
|
6701
|
-
bg-(--axebow-primary) rounded-
|
|
6702
|
-
hover:border-2 hover:px-
|
|
7239
|
+
bg-(--axebow-primary) rounded-md text-white cursor-pointer shadow-md
|
|
7240
|
+
hover:border-2 hover:px-5.5 hover:border-solid hover:border-(--axebow-primary)
|
|
6703
7241
|
hover:bg-white hover:text-(--axebow-primary) hover:shadow-lg"
|
|
6704
7242
|
@click=${() => this.onClick?.()}
|
|
6705
7243
|
@mouseenter=${this._handleMouseEnter}
|
|
@@ -6783,7 +7321,7 @@ var AxebowQuickTipButton = class AxebowQuickTipButton extends LitElement {
|
|
|
6783
7321
|
color: var(--axebow-gray);
|
|
6784
7322
|
transition: all 0.2s ease;
|
|
6785
7323
|
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
|
|
6786
|
-
border-radius:
|
|
7324
|
+
border-radius: 0.375rem 0.375rem 0 0;
|
|
6787
7325
|
}
|
|
6788
7326
|
|
|
6789
7327
|
.collapsed-button:hover {
|
|
@@ -6803,7 +7341,7 @@ var AxebowQuickTipButton = class AxebowQuickTipButton extends LitElement {
|
|
|
6803
7341
|
<axebow-icon
|
|
6804
7342
|
iconName="visibility_off"
|
|
6805
7343
|
class="cursor-pointer hover:text-(--axebow-tertiary) transition-colors"
|
|
6806
|
-
iconColor="
|
|
7344
|
+
iconColor="currentColor"
|
|
6807
7345
|
@click=${() => this.onToggle?.()}
|
|
6808
7346
|
></axebow-icon>
|
|
6809
7347
|
` : ""}
|
|
@@ -6815,7 +7353,7 @@ var AxebowQuickTipButton = class AxebowQuickTipButton extends LitElement {
|
|
|
6815
7353
|
<div class="collapsed-container" style="bottom: ${this.paddingBottom}px;" @click=${() => this.onToggle?.()}>
|
|
6816
7354
|
<button class="collapsed-button w-47.75 h-7 flex items-center justify-center gap-2 cursor-pointer">
|
|
6817
7355
|
<span class="whitespace-nowrap text-sm font-bold">${this.showLabel}</span>
|
|
6818
|
-
<axebow-icon iconName="visibility" size="md"></axebow-icon>
|
|
7356
|
+
<axebow-icon iconName="visibility" size="md" iconColor="currentColor"></axebow-icon>
|
|
6819
7357
|
</button>
|
|
6820
7358
|
</div>
|
|
6821
7359
|
`;
|
|
@@ -6842,7 +7380,7 @@ var AxebowInfrastructureCard = class AxebowInfrastructureCard extends LitElement
|
|
|
6842
7380
|
}
|
|
6843
7381
|
render() {
|
|
6844
7382
|
return html`
|
|
6845
|
-
<div class="w-294 flex flex-col bg-white rounded-
|
|
7383
|
+
<div class="w-294 flex flex-col bg-white rounded-md shadow-sm">
|
|
6846
7384
|
<h3 class="text-md font-bold leading-tight text-center mt-8 mx-12 mb-6.5 text-(--axebow-primary)">
|
|
6847
7385
|
${this.heading}
|
|
6848
7386
|
</h3>
|
|
@@ -6883,13 +7421,13 @@ var AxebowGettingStartedCard = class AxebowGettingStartedCard extends LitElement
|
|
|
6883
7421
|
}
|
|
6884
7422
|
render() {
|
|
6885
7423
|
return html`
|
|
6886
|
-
<div class="w-294 flex flex-col bg-white rounded-
|
|
7424
|
+
<div class="w-294 flex flex-col bg-white rounded-md shadow-sm">
|
|
6887
7425
|
<h2 class="text-md font-bold text-center mt-6 mx-6 mb-4 text-(--axebow-primary)">${this.heading}</h2>
|
|
6888
7426
|
<div class="w-282 mx-6">
|
|
6889
7427
|
<sl-divider style="width: 100%; margin: 0;"></sl-divider>
|
|
6890
7428
|
</div>
|
|
6891
7429
|
<div class="w-282 h-52.75 mx-6 flex flex-col">
|
|
6892
|
-
<p class="text-base text-center my-4 text-
|
|
7430
|
+
<p class="text-base text-center my-4 text-black">${this.description}</p>
|
|
6893
7431
|
<div class="flex gap-4">
|
|
6894
7432
|
${this.pills.map((pill) => html`
|
|
6895
7433
|
<axebow-pill
|
|
@@ -6906,20 +7444,22 @@ var AxebowGettingStartedCard = class AxebowGettingStartedCard extends LitElement
|
|
|
6906
7444
|
<div class="w-282 mx-6 mt-4 mb-4">
|
|
6907
7445
|
<sl-divider style="width: 100%; margin: 0;"></sl-divider>
|
|
6908
7446
|
</div>
|
|
6909
|
-
<div class="w-139 h-9.5 mx-auto mb-6 flex items-center justify-center gap-
|
|
7447
|
+
<div class="w-139 h-9.5 mx-auto mb-6 flex items-center justify-center gap-4">
|
|
6910
7448
|
${this.contactUrl ? html`
|
|
6911
7449
|
<axebow-button variant="primary" outline @click=${() => window.open(this.contactUrl, "_blank")}>
|
|
6912
7450
|
${this.contactLabel}
|
|
6913
7451
|
<axebow-icon iconName="open_in_new" size="md" slot="suffix"></axebow-icon>
|
|
6914
7452
|
</axebow-button>
|
|
6915
7453
|
` : ""}
|
|
6916
|
-
<
|
|
6917
|
-
|
|
6918
|
-
|
|
6919
|
-
|
|
6920
|
-
|
|
6921
|
-
|
|
6922
|
-
|
|
7454
|
+
<div class="flex items-center gap-2">
|
|
7455
|
+
<sl-checkbox
|
|
7456
|
+
.checked=${this.dontShowAgain}
|
|
7457
|
+
@sl-change=${(e) => this.onDontShowAgainChange?.(e.target.checked)}
|
|
7458
|
+
>
|
|
7459
|
+
${this.dontShowAgainLabel}
|
|
7460
|
+
</sl-checkbox>
|
|
7461
|
+
<axebow-button fixedWidth="5.625rem" variant="text" @click=${() => this.onNotNow?.()}>${this.notNowLabel}</axebow-button>
|
|
7462
|
+
</div>
|
|
6923
7463
|
</div>
|
|
6924
7464
|
</div>
|
|
6925
7465
|
`;
|
|
@@ -7050,7 +7590,7 @@ var AxebowMarketplaceCard = class AxebowMarketplaceCard extends LitElement {
|
|
|
7050
7590
|
_renderBadge() {
|
|
7051
7591
|
return html`
|
|
7052
7592
|
<div
|
|
7053
|
-
class="h-7.5 flex items-center justify-center gap-1 rounded
|
|
7593
|
+
class="h-7.5 flex items-center justify-center gap-1 rounded shrink-0"
|
|
7054
7594
|
style="width:${this.badgeWidth}; background-color:${this.badgeBgColor};"
|
|
7055
7595
|
>
|
|
7056
7596
|
${this.badgeIcon ? html`<span class="w-2 h-3 flex items-center justify-center overflow-hidden shrink-0">
|
|
@@ -7072,7 +7612,7 @@ var AxebowMarketplaceCard = class AxebowMarketplaceCard extends LitElement {
|
|
|
7072
7612
|
<div class="w-87 h-12.25 flex items-center gap-3 min-w-0 shrink-0">
|
|
7073
7613
|
<img
|
|
7074
7614
|
src="${this.logoSrc}"
|
|
7075
|
-
class="w-11.5 h-11.5 shrink-0 aspect-square object-contain rounded
|
|
7615
|
+
class="w-11.5 h-11.5 shrink-0 aspect-square object-contain rounded"
|
|
7076
7616
|
alt="${this.name} logo"
|
|
7077
7617
|
/>
|
|
7078
7618
|
<div class="flex flex-col gap-1.25 w-full min-w-0">
|
|
@@ -7171,7 +7711,7 @@ var AxebowDeployCard = class AxebowDeployCard extends LitElement {
|
|
|
7171
7711
|
return html`
|
|
7172
7712
|
<div
|
|
7173
7713
|
class="box-border p-3.25 flex items-center gap-4
|
|
7174
|
-
bg-(--axebow-white) border border-solid border-(--axebow-table-header-border) rounded-
|
|
7714
|
+
bg-(--axebow-white) border border-solid border-(--axebow-table-header-border) rounded-md
|
|
7175
7715
|
axebow-shadow-hover"
|
|
7176
7716
|
style="width:${this.width};height:${this.height};"
|
|
7177
7717
|
>
|
|
@@ -7230,7 +7770,7 @@ var AxebowResourceCard = class AxebowResourceCard extends LitElement {
|
|
|
7230
7770
|
render() {
|
|
7231
7771
|
return html`
|
|
7232
7772
|
<div
|
|
7233
|
-
class="w-full h-77.25 box-border bg-(--axebow-white) rounded-
|
|
7773
|
+
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
7774
|
>
|
|
7235
7775
|
<div
|
|
7236
7776
|
class="w-full h-11 box-border shrink-0 flex items-center justify-between px-4 py-2.75
|
|
@@ -7371,7 +7911,6 @@ var AxebowQuickTipSection = class AxebowQuickTipSection extends LitElement {
|
|
|
7371
7911
|
.items=${this.infrastructureItems}
|
|
7372
7912
|
></axebow-infrastructure-card>
|
|
7373
7913
|
<axebow-getting-started-card
|
|
7374
|
-
class="w-full"
|
|
7375
7914
|
heading=${this.gettingStartedHeading}
|
|
7376
7915
|
description=${this.gettingStartedDescription}
|
|
7377
7916
|
.pills=${this.pills}
|
|
@@ -7472,31 +8011,31 @@ var AxebowTenantResourceTable = class AxebowTenantResourceTable extends LitEleme
|
|
|
7472
8011
|
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
8012
|
>
|
|
7474
8013
|
<div class="flex items-center gap-2 flex-1 min-w-44 shrink-0">
|
|
7475
|
-
<span class="flex-1 text-center
|
|
8014
|
+
<span class="flex-1 text-center font-semibold text-gray-600 truncate">${l.rowTitle}</span>
|
|
7476
8015
|
${this._renderDivider()}
|
|
7477
8016
|
</div>
|
|
7478
8017
|
<div class="flex items-center gap-2 w-16 shrink-0">
|
|
7479
|
-
<span class="flex-1 text-center
|
|
8018
|
+
<span class="flex-1 text-center font-semibold text-gray-600">${l.vCpu}</span>
|
|
7480
8019
|
${this._renderDivider()}
|
|
7481
8020
|
</div>
|
|
7482
8021
|
<div class="flex items-center gap-2 flex-1 min-w-32 shrink-0">
|
|
7483
|
-
<span class="flex-1 text-center
|
|
8022
|
+
<span class="flex-1 text-center font-semibold text-gray-600">${l.vCpuUtil}</span>
|
|
7484
8023
|
${this._renderDivider()}
|
|
7485
8024
|
</div>
|
|
7486
8025
|
<div class="flex items-center gap-2 w-20 shrink-0">
|
|
7487
|
-
<span class="flex-1 text-center
|
|
8026
|
+
<span class="flex-1 text-center font-semibold text-gray-600">${l.memory}</span>
|
|
7488
8027
|
${this._renderDivider()}
|
|
7489
8028
|
</div>
|
|
7490
8029
|
<div class="flex items-center gap-2 flex-1 min-w-32 shrink-0">
|
|
7491
|
-
<span class="flex-1 text-center
|
|
8030
|
+
<span class="flex-1 text-center font-semibold text-gray-600">${l.memUtil}</span>
|
|
7492
8031
|
${this._renderDivider()}
|
|
7493
8032
|
</div>
|
|
7494
8033
|
<div class="flex items-center gap-2 w-24 shrink-0">
|
|
7495
|
-
<span class="flex-1 text-center
|
|
8034
|
+
<span class="flex-1 text-center font-semibold text-gray-600">${l.storage}</span>
|
|
7496
8035
|
${this.showActions ? this._renderDivider() : ""}
|
|
7497
8036
|
</div>
|
|
7498
|
-
${this.showActions ? html`<div class="flex items-center flex-1 min-w-
|
|
7499
|
-
<span class="flex-1 text-center
|
|
8037
|
+
${this.showActions ? html`<div class="flex items-center flex-1 min-w-53.25 shrink-0">
|
|
8038
|
+
<span class="flex-1 text-center font-semibold text-gray-600">${l.actions}</span>
|
|
7500
8039
|
</div>` : ""}
|
|
7501
8040
|
</div>
|
|
7502
8041
|
`;
|
|
@@ -7504,7 +8043,7 @@ var AxebowTenantResourceTable = class AxebowTenantResourceTable extends LitEleme
|
|
|
7504
8043
|
_renderChartCell(chart, percent, idPrefix) {
|
|
7505
8044
|
if (!chart || !chart.labels || chart.labels.length === 0) return html`
|
|
7506
8045
|
<div class="flex items-center justify-center">
|
|
7507
|
-
<span class="
|
|
8046
|
+
<span class="font-normal text-gray-700">${percent ?? "0.0"}%</span>
|
|
7508
8047
|
</div>
|
|
7509
8048
|
`;
|
|
7510
8049
|
return html`
|
|
@@ -7518,7 +8057,7 @@ var AxebowTenantResourceTable = class AxebowTenantResourceTable extends LitEleme
|
|
|
7518
8057
|
.data=${{ Usage: chart.data }}
|
|
7519
8058
|
.yAxisMax=${chart.max}
|
|
7520
8059
|
></usage-chart>
|
|
7521
|
-
<span class="
|
|
8060
|
+
<span class="font-normal text-gray-700 whitespace-nowrap">${percent ?? "0.0"}%</span>
|
|
7522
8061
|
</div>
|
|
7523
8062
|
`;
|
|
7524
8063
|
}
|
|
@@ -7555,25 +8094,25 @@ var AxebowTenantResourceTable = class AxebowTenantResourceTable extends LitEleme
|
|
|
7555
8094
|
></axebow-icon>
|
|
7556
8095
|
` : html`<span class="w-4 inline-block"></span>`}
|
|
7557
8096
|
${row.logoUrl ? html`<img src=${row.logoUrl} class="w-5 h-5 object-contain shrink-0" />` : ""}
|
|
7558
|
-
<span class="
|
|
8097
|
+
<span class="font-semibold text-(--axebow-primary) truncate">${row.name}</span>
|
|
7559
8098
|
${this._renderStatusIcon(row.statusIcon)}
|
|
7560
8099
|
<span class="flex-1"></span>
|
|
7561
8100
|
${this._renderStatusIcon(row.warningIcon)}
|
|
7562
8101
|
</div>
|
|
7563
|
-
<div class="w-16 shrink-0 text-center
|
|
8102
|
+
<div class="w-16 shrink-0 text-center font-normal text-gray-700 whitespace-nowrap">${row.vCpu}</div>
|
|
7564
8103
|
<div class="flex-1 min-w-32 shrink-0">
|
|
7565
8104
|
${this._renderChartCell(row.vCpuChart, row.vCpuUtilizationPercent, `chart-account-${index}-vcpu`)}
|
|
7566
8105
|
</div>
|
|
7567
|
-
<div class="w-20 shrink-0 text-center
|
|
8106
|
+
<div class="w-20 shrink-0 text-center font-normal text-gray-700 whitespace-nowrap">${row.memory}</div>
|
|
7568
8107
|
<div class="flex-1 min-w-32 shrink-0">
|
|
7569
8108
|
${this._renderChartCell(row.memoryChart, row.memoryUtilizationPercent, `chart-account-${index}-mem`)}
|
|
7570
8109
|
</div>
|
|
7571
8110
|
<div class="w-24 shrink-0 flex items-center justify-center gap-1.5 min-w-0">
|
|
7572
|
-
<span class="
|
|
8111
|
+
<span class="font-normal text-gray-700">${row.storage}</span>
|
|
7573
8112
|
${row.usage ? html`<usage-tooltip .usage=${row.usage}></usage-tooltip>` : ""}
|
|
7574
8113
|
</div>
|
|
7575
8114
|
${this.showActions ? html`<div
|
|
7576
|
-
class="flex-1 min-w-
|
|
8115
|
+
class="flex-1 min-w-53.25 shrink-0 flex items-center gap-4"
|
|
7577
8116
|
@click=${(e) => e.stopPropagation()}
|
|
7578
8117
|
>
|
|
7579
8118
|
<div class="flex-1 flex items-center justify-center">
|
|
@@ -7587,6 +8126,7 @@ var AxebowTenantResourceTable = class AxebowTenantResourceTable extends LitEleme
|
|
|
7587
8126
|
openToRight
|
|
7588
8127
|
.options=${row.moreActions}
|
|
7589
8128
|
iconName="more_horiz"
|
|
8129
|
+
fixedHeight="2rem"
|
|
7590
8130
|
></axebow-more-actions>` : ""}
|
|
7591
8131
|
</div>` : ""}
|
|
7592
8132
|
</div>` : ""}
|
|
@@ -7602,7 +8142,7 @@ var AxebowTenantResourceTable = class AxebowTenantResourceTable extends LitEleme
|
|
|
7602
8142
|
const onActionBtn = subRow.onAction ?? subRow.onDeploy;
|
|
7603
8143
|
return html`
|
|
7604
8144
|
<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
|
|
8145
|
+
<div class="flex-1 min-w-44 shrink-0 flex items-center gap-2">
|
|
7606
8146
|
<axebow-icon
|
|
7607
8147
|
iconName="subdirectory_arrow_right"
|
|
7608
8148
|
iconColor="var(--axebow-gray)"
|
|
@@ -7610,27 +8150,27 @@ var AxebowTenantResourceTable = class AxebowTenantResourceTable extends LitEleme
|
|
|
7610
8150
|
class="shrink-0"
|
|
7611
8151
|
></axebow-icon>
|
|
7612
8152
|
${subRow.logoUrl ? html`<img src=${subRow.logoUrl} class="w-5 h-5 object-contain shrink-0" />` : ""}
|
|
7613
|
-
<span class="
|
|
8153
|
+
<span class="font-normal text-gray-700 truncate">${subRow.name}</span>
|
|
7614
8154
|
<span class="flex-1"></span>
|
|
7615
8155
|
${this._renderStatusIcon(subRow.warningIcon)}
|
|
7616
8156
|
</div>
|
|
7617
|
-
<div class="w-16 shrink-0 text-center
|
|
8157
|
+
<div class="w-16 shrink-0 text-center font-normal text-gray-700 whitespace-nowrap">${subRow.vCpu}</div>
|
|
7618
8158
|
<div class="flex-1 min-w-32 shrink-0">
|
|
7619
8159
|
${this._renderChartCell(subRow.vCpuChart, subRow.vCpuUtilizationPercent, `chart-env-${rowIndex}-${subIndex}-vcpu`)}
|
|
7620
8160
|
</div>
|
|
7621
|
-
<div class="w-20 shrink-0 text-center
|
|
8161
|
+
<div class="w-20 shrink-0 text-center font-normal text-gray-700 whitespace-nowrap">${subRow.memory}</div>
|
|
7622
8162
|
<div class="flex-1 min-w-32 shrink-0">
|
|
7623
8163
|
${this._renderChartCell(subRow.memoryChart, subRow.memoryUtilizationPercent, `chart-env-${rowIndex}-${subIndex}-mem`)}
|
|
7624
8164
|
</div>
|
|
7625
8165
|
<div class="w-24 shrink-0 flex items-center justify-center gap-1.5 min-w-0">
|
|
7626
|
-
<span class="
|
|
8166
|
+
<span class="font-normal text-gray-700">${subRow.storage}</span>
|
|
7627
8167
|
${subRow.usage ? html`<usage-tooltip .usage=${subRow.usage}></usage-tooltip>` : ""}
|
|
7628
8168
|
</div>
|
|
7629
|
-
${this.showActions ? html`<div class="flex-1 min-w-
|
|
8169
|
+
${this.showActions ? html`<div class="flex-1 min-w-53.25 shrink-0 flex items-center gap-4">
|
|
7630
8170
|
<div class="flex-1 flex items-center justify-center">
|
|
7631
8171
|
${showActionBtn ? html`<axebow-button
|
|
7632
8172
|
variant="primary"
|
|
7633
|
-
fixedWidth="
|
|
8173
|
+
fixedWidth="9.9375rem"
|
|
7634
8174
|
fixedHeight="2rem"
|
|
7635
8175
|
?disabled=${actionBtnDisabled}
|
|
7636
8176
|
@click=${() => onActionBtn?.()}
|
|
@@ -7644,6 +8184,7 @@ var AxebowTenantResourceTable = class AxebowTenantResourceTable extends LitEleme
|
|
|
7644
8184
|
openToRight
|
|
7645
8185
|
.options=${subRow.moreActions}
|
|
7646
8186
|
iconName="more_horiz"
|
|
8187
|
+
fixedHeight="2rem"
|
|
7647
8188
|
></axebow-more-actions>` : ""}
|
|
7648
8189
|
</div>` : ""}
|
|
7649
8190
|
</div>` : ""}
|
|
@@ -7652,14 +8193,14 @@ var AxebowTenantResourceTable = class AxebowTenantResourceTable extends LitEleme
|
|
|
7652
8193
|
}
|
|
7653
8194
|
render() {
|
|
7654
8195
|
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-
|
|
8196
|
+
<div class="w-full py-4 px-6 text-center bg-[#F0F1F5] rounded-md box-border">
|
|
8197
|
+
<p class="text-(--axebow-secondary) m-0 font-normal">
|
|
7657
8198
|
${this.emptyStateMessage || "There are currently no items in this table."}
|
|
7658
8199
|
</p>
|
|
7659
8200
|
</div>
|
|
7660
8201
|
`;
|
|
7661
8202
|
return html`
|
|
7662
|
-
<div class="w-full flex flex-col rounded-
|
|
8203
|
+
<div class="w-full flex flex-col rounded-md bg-white overflow-x-auto overflow-y-hidden box-border">
|
|
7663
8204
|
${this._renderHeader()}
|
|
7664
8205
|
<div>${this.rows.map((row, index) => this._renderTableRow(row, index))}</div>
|
|
7665
8206
|
</div>
|
|
@@ -7824,7 +8365,7 @@ var AxebowServiceDetailHeader = class AxebowServiceDetailHeader extends LitEleme
|
|
|
7824
8365
|
<div class="flex flex-col gap-1 ${widthClass} shrink-0">
|
|
7825
8366
|
${this._renderTitle(this.locationTitle)}
|
|
7826
8367
|
<div
|
|
7827
|
-
class="${widthClass} h-19.75 box-border flex items-center justify-between gap-4 bg-(--axebow-base) rounded-
|
|
8368
|
+
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
8369
|
>
|
|
7829
8370
|
${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
8371
|
<div class="flex flex-col gap-0.5 min-w-0 flex-1">
|
|
@@ -7870,7 +8411,7 @@ var AxebowServiceDetailHeader = class AxebowServiceDetailHeader extends LitEleme
|
|
|
7870
8411
|
<div class="flex flex-col gap-1 w-66 shrink-0">
|
|
7871
8412
|
${this._renderTitle(title)}
|
|
7872
8413
|
<div
|
|
7873
|
-
class="w-66 h-19.75 box-border flex items-center justify-between gap-6 bg-(--axebow-base) rounded-
|
|
8414
|
+
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
8415
|
>
|
|
7875
8416
|
<div class="flex flex-col items-start gap-0.5">
|
|
7876
8417
|
<span class="text-lg font-semibold text-(--axebow-primary)">${limits.cpu}</span>
|
|
@@ -7929,7 +8470,7 @@ var AxebowServiceDetailHeader = class AxebowServiceDetailHeader extends LitEleme
|
|
|
7929
8470
|
<div class="flex flex-col gap-1 w-32 shrink-0">
|
|
7930
8471
|
${this._renderTitle(this.actionNeededTitle)}
|
|
7931
8472
|
<div
|
|
7932
|
-
class="w-32 h-24.75 box-border flex items-center justify-center border border-solid border-(--axebow-light-gray) rounded-
|
|
8473
|
+
class="w-32 h-24.75 box-border flex items-center justify-center border border-solid border-(--axebow-light-gray) rounded-md"
|
|
7933
8474
|
>
|
|
7934
8475
|
<axebow-button variant="success" fixedWidth="5.625rem" fixedHeight="2.375rem" @click=${this._handleDeploy}>
|
|
7935
8476
|
${this.deployLabel}
|
|
@@ -8023,7 +8564,7 @@ var AxebowTenantCard = class AxebowTenantCard extends LitElement {
|
|
|
8023
8564
|
</div>
|
|
8024
8565
|
`;
|
|
8025
8566
|
return html`
|
|
8026
|
-
<div class="w-21.5 h-8 flex items-center justify-center rounded-
|
|
8567
|
+
<div class="w-21.5 h-8 flex items-center justify-center rounded-md bg-gray-100 px-2">
|
|
8027
8568
|
<span class="text-base font-semibold capitalize text-(--axebow-gray) truncate">${this.planLabel}</span>
|
|
8028
8569
|
</div>
|
|
8029
8570
|
`;
|
|
@@ -8056,7 +8597,7 @@ var AxebowTenantCard = class AxebowTenantCard extends LitElement {
|
|
|
8056
8597
|
${this.createAccountLabel}
|
|
8057
8598
|
</axebow-button>` : ""}
|
|
8058
8599
|
${this.moreActions.length ? html`<axebow-more-actions
|
|
8059
|
-
class="w-9.5
|
|
8600
|
+
class="w-9.5"
|
|
8060
8601
|
placement="bottom"
|
|
8061
8602
|
openToRight
|
|
8062
8603
|
.options=${this.moreActions}
|
|
@@ -8096,7 +8637,7 @@ var AxebowTenantCard = class AxebowTenantCard extends LitElement {
|
|
|
8096
8637
|
}
|
|
8097
8638
|
render() {
|
|
8098
8639
|
return html`
|
|
8099
|
-
<div class="w-full box-border flex flex-col gap-4 bg-white rounded-
|
|
8640
|
+
<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
8641
|
<div class="flex items-center justify-between">
|
|
8101
8642
|
${this._renderPlanBadge()}
|
|
8102
8643
|
<div class="w-57.5 h-8"><slot name="plan-selector"></slot></div>
|
|
@@ -8108,18 +8649,18 @@ var AxebowTenantCard = class AxebowTenantCard extends LitElement {
|
|
|
8108
8649
|
<span class="text-(--axebow-primary) text-lg">|</span>
|
|
8109
8650
|
<span class="text-(--axebow-primary) text-lg italic flex items-center gap-1">
|
|
8110
8651
|
${this.roleText}
|
|
8111
|
-
<slot name="role-tooltip"></slot>
|
|
8652
|
+
<slot name="role-tooltip" class="not-italic"></slot>
|
|
8112
8653
|
</span>
|
|
8113
8654
|
</div>
|
|
8114
8655
|
${this._renderTopRightActions()}
|
|
8115
8656
|
</div>
|
|
8116
8657
|
|
|
8117
8658
|
<div class="flex items-center justify-between flex-wrap gap-2">
|
|
8118
|
-
<div class="flex items-center gap-5 text-(--axebow-gray)">
|
|
8659
|
+
<div class="flex items-center gap-5 text-(--axebow-text-gray)">
|
|
8119
8660
|
${this.resourceStats.map((stat) => html`
|
|
8120
8661
|
<span class="flex items-center gap-1 text-base whitespace-nowrap">
|
|
8121
8662
|
<axebow-icon iconName=${stat.icon} iconColor="var(--axebow-gray)" size="md"></axebow-icon>
|
|
8122
|
-
|
|
8663
|
+
${stat.label} ${stat.value}
|
|
8123
8664
|
</span>
|
|
8124
8665
|
`)}
|
|
8125
8666
|
</div>
|
|
@@ -8502,8 +9043,8 @@ var AxebowActionsFooter = class AxebowActionsFooter extends LitElement {
|
|
|
8502
9043
|
class="w-full bg-(--axebow-base) box-border ${this.isOverlappingContent ? "shadow-[0_-8px_8px_-8px_rgba(13,24,33,0.15)]" : ""}"
|
|
8503
9044
|
>
|
|
8504
9045
|
<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">
|
|
9046
|
+
<div class="h-10 box-content flex items-center pb-6">
|
|
9047
|
+
<div class="flex items-center gap-8 shrink-0 mr-8">
|
|
8507
9048
|
<axebow-button
|
|
8508
9049
|
class="axebow-red-button-text"
|
|
8509
9050
|
variant="text"
|
|
@@ -8520,7 +9061,7 @@ var AxebowActionsFooter = class AxebowActionsFooter extends LitElement {
|
|
|
8520
9061
|
` : ""}
|
|
8521
9062
|
</div>
|
|
8522
9063
|
|
|
8523
|
-
<p class="flex-1 text-(--axebow-gray) m-0">${unsafeHTML(this.text)}</p>
|
|
9064
|
+
<p class="flex-1 text-right font-semibold text-(--axebow-text-gray) m-0 mr-4">${unsafeHTML(this.text)}</p>
|
|
8524
9065
|
|
|
8525
9066
|
<div class="flex items-center gap-3 shrink-0">
|
|
8526
9067
|
${this.secondaryActionLabel ? html`
|
|
@@ -8609,179 +9150,6 @@ __decorate([property({ type: String })], AxebowStepHeader.prototype, "stepLabel"
|
|
|
8609
9150
|
__decorate([property({ type: String })], AxebowStepHeader.prototype, "ofLabel", void 0);
|
|
8610
9151
|
AxebowStepHeader = __decorate([customElement("axebow-step-header")], AxebowStepHeader);
|
|
8611
9152
|
//#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
9153
|
//#region src/components/axebow-underline-tab-selector/axebow-underline-tab-selector.ts
|
|
8786
9154
|
var AxebowUnderlineTabSelector = class AxebowUnderlineTabSelector extends LitElement {
|
|
8787
9155
|
constructor(..._args) {
|
|
@@ -9086,7 +9454,7 @@ var AxebowTimeRangePanel = class AxebowTimeRangePanel extends LitElement {
|
|
|
9086
9454
|
${this.buttonText}
|
|
9087
9455
|
</axebow-button>
|
|
9088
9456
|
<div
|
|
9089
|
-
class="w-127.75 h-112 box-border my-2 flex text-sm border border-solid border-(--axebow-primary) rounded-
|
|
9457
|
+
class="w-127.75 h-112 box-border my-2 flex text-sm border border-solid border-(--axebow-primary) rounded-md overflow-hidden"
|
|
9090
9458
|
>
|
|
9091
9459
|
${this._renderQuickRanges()} ${this._renderAbsoluteTimeSection()}
|
|
9092
9460
|
</div>
|
|
@@ -9262,7 +9630,7 @@ var AxebowRoleContainerDropdown = class AxebowRoleContainerDropdown extends LitE
|
|
|
9262
9630
|
${this.buttonText}
|
|
9263
9631
|
</axebow-button>
|
|
9264
9632
|
<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-
|
|
9633
|
+
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
9634
|
>
|
|
9267
9635
|
<sl-menu class="w-70.5 h-79 box-border overflow-y-auto">
|
|
9268
9636
|
${this._renderAllContainersOption()}
|
|
@@ -9736,7 +10104,6 @@ var AxebowDeploySummary = class AxebowDeploySummary extends LitElement {
|
|
|
9736
10104
|
<axebow-icon
|
|
9737
10105
|
iconName="download_for_offline"
|
|
9738
10106
|
slot="suffix"
|
|
9739
|
-
iconColor="var(--axebow-tertiary)"
|
|
9740
10107
|
size="xl"
|
|
9741
10108
|
></axebow-icon>
|
|
9742
10109
|
<span class="text-sm lg:text-base hidden lg:inline">${this.downloadLabel}</span>
|
|
@@ -9791,6 +10158,14 @@ var AxebowDeploySummary = class AxebowDeploySummary extends LitElement {
|
|
|
9791
10158
|
.current=${limits.cpu.current}
|
|
9792
10159
|
.limit=${limits.cpu.limit}
|
|
9793
10160
|
.percentage=${limits.cpu.percentage}
|
|
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"
|
|
9794
10169
|
></axebow-resource-bar>
|
|
9795
10170
|
<axebow-resource-bar
|
|
9796
10171
|
icon="${limits.memory.icon}"
|
|
@@ -9799,6 +10174,15 @@ var AxebowDeploySummary = class AxebowDeploySummary extends LitElement {
|
|
|
9799
10174
|
.limit=${limits.memory.limit}
|
|
9800
10175
|
.percentage=${limits.memory.percentage}
|
|
9801
10176
|
rotate="${limits.memory.rotate ?? "0"}"
|
|
10177
|
+
unit="${limits.memory.unit ?? ""}"
|
|
10178
|
+
iconSize="base"
|
|
10179
|
+
iconBoxSize="0.875rem"
|
|
10180
|
+
fixedWidth="20.875rem"
|
|
10181
|
+
fixedHeight="1.75rem"
|
|
10182
|
+
valuesWidth="14.1875rem"
|
|
10183
|
+
valuesHeight="1rem"
|
|
10184
|
+
barWidth="8.75rem"
|
|
10185
|
+
barHeight="0.6875rem"
|
|
9802
10186
|
></axebow-resource-bar>
|
|
9803
10187
|
</div>
|
|
9804
10188
|
</div>
|
|
@@ -9982,9 +10366,9 @@ var AxebowDeploySummary = class AxebowDeploySummary extends LitElement {
|
|
|
9982
10366
|
<span></span>
|
|
9983
10367
|
<span class="text-(--axebow-black)">${valueLabel}:</span>
|
|
9984
10368
|
${items.map((item) => html`
|
|
9985
|
-
<span class="truncate font-
|
|
9986
|
-
<span class="font-
|
|
9987
|
-
<span class="font-
|
|
10369
|
+
<span class="truncate font-normal text-(--axebow-primary)">${item.name}</span>
|
|
10370
|
+
<span class="font-normal text-(--axebow-primary)">=</span>
|
|
10371
|
+
<span class="font-normal truncate text-(--axebow-primary)">${item.value}</span>
|
|
9988
10372
|
`)}
|
|
9989
10373
|
</div>
|
|
9990
10374
|
`;
|
|
@@ -10004,7 +10388,7 @@ var AxebowDeploySummary = class AxebowDeploySummary extends LitElement {
|
|
|
10004
10388
|
.isEditing=${step.isEditing}
|
|
10005
10389
|
.enabled=${step.enabled}
|
|
10006
10390
|
>
|
|
10007
|
-
<div
|
|
10391
|
+
<div>
|
|
10008
10392
|
${step.items.length ? html`
|
|
10009
10393
|
${plainItems.length ? this._renderNameValueGrid(plainItems, step.variableNameLabel, step.variableValueLabel) : ""}
|
|
10010
10394
|
${pathItems.length && plainItems.length ? html`<sl-divider class="summary-title-divider"></sl-divider>` : ""}
|
|
@@ -10055,7 +10439,7 @@ var AxebowSummaryKeyValue = class AxebowSummaryKeyValue extends LitElement {
|
|
|
10055
10439
|
return html`
|
|
10056
10440
|
<p class="text-base">
|
|
10057
10441
|
<span class="text-(--axebow-black)">${this.label}:</span>
|
|
10058
|
-
<
|
|
10442
|
+
<span class="font-normal text-(--axebow-primary)">${this.value}</span>
|
|
10059
10443
|
</p>
|
|
10060
10444
|
`;
|
|
10061
10445
|
}
|
|
@@ -10074,31 +10458,93 @@ var AxebowResourceBar = class AxebowResourceBar extends LitElement {
|
|
|
10074
10458
|
this.limit = 0;
|
|
10075
10459
|
this.percentage = 0;
|
|
10076
10460
|
this.rotate = "0";
|
|
10461
|
+
this.iconSize = "xl";
|
|
10077
10462
|
}
|
|
10078
10463
|
static {
|
|
10079
|
-
this.styles = [
|
|
10464
|
+
this.styles = [
|
|
10465
|
+
unsafeCSS(tailwind_default),
|
|
10466
|
+
axebowTheme,
|
|
10467
|
+
css`
|
|
10468
|
+
:host {
|
|
10469
|
+
display: block;
|
|
10470
|
+
}
|
|
10471
|
+
`
|
|
10472
|
+
];
|
|
10473
|
+
}
|
|
10474
|
+
_renderIcon() {
|
|
10475
|
+
const icon = html`
|
|
10476
|
+
<axebow-icon
|
|
10477
|
+
iconName="${this.icon}"
|
|
10478
|
+
iconColor="var(--axebow-strong-gray)"
|
|
10479
|
+
size="${this.iconSize}"
|
|
10480
|
+
rotate="${Number(this.rotate)}"
|
|
10481
|
+
></axebow-icon>
|
|
10482
|
+
`;
|
|
10483
|
+
return this.iconBoxSize ? html`
|
|
10484
|
+
<div
|
|
10485
|
+
class="flex items-center justify-center shrink-0"
|
|
10486
|
+
style="width:${this.iconBoxSize};height:${this.iconBoxSize};"
|
|
10487
|
+
>
|
|
10488
|
+
${icon}
|
|
10489
|
+
</div>
|
|
10490
|
+
` : icon;
|
|
10491
|
+
}
|
|
10492
|
+
get _isFixedVariant() {
|
|
10493
|
+
return !!(this.valuesWidth || this.barWidth);
|
|
10494
|
+
}
|
|
10495
|
+
_formatValue(value) {
|
|
10496
|
+
const hundredths = Math.round(value * 100);
|
|
10497
|
+
const decimals = hundredths % 10 === 0 ? 1 : 2;
|
|
10498
|
+
return (hundredths / 100).toFixed(decimals);
|
|
10499
|
+
}
|
|
10500
|
+
_renderCurrent() {
|
|
10501
|
+
const value = this._isFixedVariant ? this._formatValue(this.current) : this.current.toFixed(2);
|
|
10502
|
+
return html`<p class="text-base ${this._isFixedVariant ? "text-(--axebow-primary)" : "text-(--axebow-gray)"}">${value}</p>`;
|
|
10503
|
+
}
|
|
10504
|
+
_renderBar() {
|
|
10505
|
+
return html`
|
|
10506
|
+
<div
|
|
10507
|
+
class="relative rounded-md bg-gray-200 overflow-hidden ${this.barWidth ? "shrink-0" : "flex-1 max-w-38"}"
|
|
10508
|
+
style="height:${this.barHeight ?? "0.5rem"};${this.barWidth ? `width:${this.barWidth};` : ""}"
|
|
10509
|
+
>
|
|
10510
|
+
<div
|
|
10511
|
+
class="absolute h-full ${this.percentage > 100 ? "bg-(--axebow-error)" : this.percentage === 100 ? "bg-(--axebow-warning)" : "bg-(--axebow-gray)"}"
|
|
10512
|
+
style="width: ${this.percentage}%;"
|
|
10513
|
+
></div>
|
|
10514
|
+
</div>
|
|
10515
|
+
`;
|
|
10516
|
+
}
|
|
10517
|
+
_renderLimit() {
|
|
10518
|
+
const value = this.limit == null ? "-" : this._isFixedVariant ? this._formatValue(this.limit) : this.limit;
|
|
10519
|
+
const colorClass = this._isFixedVariant ? "text-(--axebow-black)" : "text-(--axebow-gray)";
|
|
10520
|
+
const weightClass = this._isFixedVariant ? "font-normal" : "font-bold";
|
|
10521
|
+
return html`
|
|
10522
|
+
<p class="text-base ${weightClass} ${colorClass}">${value}</p>
|
|
10523
|
+
${this.unit ? html`<span class="text-xs ${weightClass} ${colorClass}">${this.unit}</span>` : ""}
|
|
10524
|
+
`;
|
|
10525
|
+
}
|
|
10526
|
+
_renderValues() {
|
|
10527
|
+
if (!this._isFixedVariant) return html` ${this._renderCurrent()} ${this._renderBar()} ${this._renderLimit()} `;
|
|
10528
|
+
return html`
|
|
10529
|
+
<div class="flex items-center gap-2.75">${this._renderCurrent()} ${this._renderBar()}</div>
|
|
10530
|
+
<div class="flex items-baseline gap-0.5">${this._renderLimit()}</div>
|
|
10531
|
+
`;
|
|
10080
10532
|
}
|
|
10081
10533
|
render() {
|
|
10082
10534
|
return html`
|
|
10083
|
-
<div
|
|
10535
|
+
<div
|
|
10536
|
+
class="flex justify-between items-center gap-2 ${this.fixedWidth || this.fixedHeight ? "" : "flex-wrap"}"
|
|
10537
|
+
style="${this.fixedWidth ? `width:${this.fixedWidth};` : ""}${this.fixedHeight ? `height:${this.fixedHeight};` : ""}"
|
|
10538
|
+
>
|
|
10084
10539
|
<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>
|
|
10540
|
+
${this._renderIcon()}
|
|
10541
|
+
<p class="text-base font-semibold text-(--axebow-black)">${this.label}</p>
|
|
10092
10542
|
</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>
|
|
10543
|
+
<div
|
|
10544
|
+
class="flex items-center ${this.valuesWidth || this.barWidth ? "justify-between shrink-0" : "gap-1 flex-1 max-w-43 min-w-20 justify-end"}"
|
|
10545
|
+
style="${this.valuesWidth ? `width:${this.valuesWidth};` : ""}${this.valuesHeight ? `height:${this.valuesHeight};` : ""}"
|
|
10546
|
+
>
|
|
10547
|
+
${this._renderValues()}
|
|
10102
10548
|
</div>
|
|
10103
10549
|
</div>
|
|
10104
10550
|
`;
|
|
@@ -10110,6 +10556,15 @@ __decorate([property({ type: Number })], AxebowResourceBar.prototype, "current",
|
|
|
10110
10556
|
__decorate([property({ type: Number })], AxebowResourceBar.prototype, "limit", void 0);
|
|
10111
10557
|
__decorate([property({ type: Number })], AxebowResourceBar.prototype, "percentage", void 0);
|
|
10112
10558
|
__decorate([property({ type: String })], AxebowResourceBar.prototype, "rotate", void 0);
|
|
10559
|
+
__decorate([property({ type: String })], AxebowResourceBar.prototype, "iconSize", void 0);
|
|
10560
|
+
__decorate([property({ type: String })], AxebowResourceBar.prototype, "iconBoxSize", void 0);
|
|
10561
|
+
__decorate([property({ type: String })], AxebowResourceBar.prototype, "fixedWidth", void 0);
|
|
10562
|
+
__decorate([property({ type: String })], AxebowResourceBar.prototype, "fixedHeight", void 0);
|
|
10563
|
+
__decorate([property({ type: String })], AxebowResourceBar.prototype, "valuesWidth", void 0);
|
|
10564
|
+
__decorate([property({ type: String })], AxebowResourceBar.prototype, "valuesHeight", void 0);
|
|
10565
|
+
__decorate([property({ type: String })], AxebowResourceBar.prototype, "barWidth", void 0);
|
|
10566
|
+
__decorate([property({ type: String })], AxebowResourceBar.prototype, "barHeight", void 0);
|
|
10567
|
+
__decorate([property({ type: String })], AxebowResourceBar.prototype, "unit", void 0);
|
|
10113
10568
|
AxebowResourceBar = __decorate([customElement("axebow-resource-bar")], AxebowResourceBar);
|
|
10114
10569
|
//#endregion
|
|
10115
10570
|
//#region src/components/axebow-summary/axebow-summary-step-header.ts
|
|
@@ -10133,18 +10588,21 @@ var AxebowSummaryStepHeader = class AxebowSummaryStepHeader extends LitElement {
|
|
|
10133
10588
|
<div class="flex gap-2 items-center justify-between">
|
|
10134
10589
|
<div class="flex items-center gap-0.5 min-w-0">
|
|
10135
10590
|
${this.valid && this.enabled ? html`
|
|
10136
|
-
<
|
|
10137
|
-
|
|
10138
|
-
|
|
10591
|
+
<axebow-icon
|
|
10592
|
+
iconName="${this.collapsed ? "expand_all" : "collapse_all"}"
|
|
10593
|
+
iconColor="var(--axebow-tertiary)"
|
|
10594
|
+
size="md"
|
|
10595
|
+
clickable
|
|
10596
|
+
class="shrink-0"
|
|
10139
10597
|
@click=${this._handleToggle}
|
|
10140
|
-
></
|
|
10598
|
+
></axebow-icon>
|
|
10141
10599
|
` : ""}
|
|
10142
10600
|
<h5
|
|
10143
10601
|
class="my-2 min-w-0 flex-1 truncate text-base uppercase ${this.enabled ? "font-semibold" : "font-normal text-(--axebow-gray)"}"
|
|
10144
10602
|
>
|
|
10145
10603
|
STEP ${this.stepNumber}: ${this.stepTitle}
|
|
10146
10604
|
</h5>
|
|
10147
|
-
${this.valid && this.enabled ? html`<axebow-icon
|
|
10605
|
+
${this.valid && this.enabled && !this.isEditing ? html`<axebow-icon
|
|
10148
10606
|
class="shrink-0"
|
|
10149
10607
|
iconName="check_circle"
|
|
10150
10608
|
iconColor="var(--axebow-success)"
|
|
@@ -10153,11 +10611,11 @@ var AxebowSummaryStepHeader = class AxebowSummaryStepHeader extends LitElement {
|
|
|
10153
10611
|
</div>
|
|
10154
10612
|
<div class="flex items-center gap-2 shrink-0">
|
|
10155
10613
|
${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`
|
|
10614
|
+
${this.enabled && this.valid && this.canEdit && !this.isEditing ? html`
|
|
10157
10615
|
<div
|
|
10158
|
-
class="w-4.5 h-4.5 shrink-0 flex items-center justify-center
|
|
10159
|
-
title="${this.
|
|
10160
|
-
@click=${this.
|
|
10616
|
+
class="w-4.5 h-4.5 shrink-0 flex items-center justify-center cursor-pointer"
|
|
10617
|
+
title="${this.editLabel}"
|
|
10618
|
+
@click=${this._handleEdit}
|
|
10161
10619
|
>
|
|
10162
10620
|
<axebow-icon iconName="edit_square" iconColor="var(--axebow-tertiary)" size="md"></axebow-icon>
|
|
10163
10621
|
</div>
|
|
@@ -10285,11 +10743,11 @@ var AxebowSummaryCard = class AxebowSummaryCard extends LitElement {
|
|
|
10285
10743
|
render() {
|
|
10286
10744
|
return html`
|
|
10287
10745
|
<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-
|
|
10746
|
+
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
10747
|
style="--card-width: ${this.cardWidth}; --card-height: ${this.cardHeight};"
|
|
10290
10748
|
>
|
|
10291
10749
|
<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-
|
|
10750
|
+
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
10751
|
>
|
|
10294
10752
|
<div class="h-full flex flex-col">
|
|
10295
10753
|
${this._renderHeader()}
|
|
@@ -10691,7 +11149,7 @@ var AxebowFormPanelField = class AxebowFormPanelField extends LitElement {
|
|
|
10691
11149
|
.field-container {
|
|
10692
11150
|
width: 100%;
|
|
10693
11151
|
min-height: 51.33px;
|
|
10694
|
-
border-radius:
|
|
11152
|
+
border-radius: 0.375rem;
|
|
10695
11153
|
padding: 6px 8px;
|
|
10696
11154
|
box-sizing: border-box;
|
|
10697
11155
|
transition: border-color 0.2s ease, background-color 0.2s ease;
|
|
@@ -11044,7 +11502,7 @@ var AxebowResourceBoxForm = class AxebowResourceBoxForm extends LitElement {
|
|
|
11044
11502
|
</button>
|
|
11045
11503
|
${isMenuOpen ? html`
|
|
11046
11504
|
<div
|
|
11047
|
-
class="absolute right-0 top-full mt-1 z-50 min-w-50 bg-white rounded-
|
|
11505
|
+
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
11506
|
style="max-height: 250px; overflow-y: auto;"
|
|
11049
11507
|
>
|
|
11050
11508
|
${item.menuOptions.map((option) => html`
|
|
@@ -11143,7 +11601,7 @@ var AxebowResourceBoxForm = class AxebowResourceBoxForm extends LitElement {
|
|
|
11143
11601
|
></axebow-form-panel-field>
|
|
11144
11602
|
${hasMenu && isMenuOpen ? html`
|
|
11145
11603
|
<div
|
|
11146
|
-
class="absolute right-0 top-full mt-1 z-50 min-w-50 bg-white rounded-
|
|
11604
|
+
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
11605
|
style="max-height: 250px; overflow-y: auto;"
|
|
11148
11606
|
>
|
|
11149
11607
|
${item.menuOptions.map((option) => html`
|
|
@@ -11173,7 +11631,7 @@ var AxebowResourceBoxForm = class AxebowResourceBoxForm extends LitElement {
|
|
|
11173
11631
|
const computedStatusColor = isDeleting ? "var(--axebow-error)" : this.statusColor;
|
|
11174
11632
|
return html`
|
|
11175
11633
|
<div
|
|
11176
|
-
class="flex flex-col gap-3 w-70.5 p-4 bg-white rounded-
|
|
11634
|
+
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
11635
|
>
|
|
11178
11636
|
<!-- Top Status Header -->
|
|
11179
11637
|
<axebow-status
|
|
@@ -11191,7 +11649,7 @@ var AxebowResourceBoxForm = class AxebowResourceBoxForm extends LitElement {
|
|
|
11191
11649
|
type: "disabled"
|
|
11192
11650
|
} : item)) : html`
|
|
11193
11651
|
<div
|
|
11194
|
-
class="p-3 border border-dashed border-(--axebow-border-gray) rounded-
|
|
11652
|
+
class="p-3 border border-dashed border-(--axebow-border-gray) rounded-md text-center text-(--axebow-gray) text-xs"
|
|
11195
11653
|
>
|
|
11196
11654
|
No items configured.
|
|
11197
11655
|
</div>
|
|
@@ -11733,7 +12191,7 @@ var AxebowInstancesTable = class AxebowInstancesTable extends LitElement {
|
|
|
11733
12191
|
return html`
|
|
11734
12192
|
<p class="text-black mb-4">${this.descriptionLabel}</p>
|
|
11735
12193
|
<div class="w-full">
|
|
11736
|
-
<div class="w-186.5 rounded-
|
|
12194
|
+
<div class="w-186.5 rounded-md overflow-hidden border border-black/10">
|
|
11737
12195
|
${this._renderHeader()} ${this.instances.map((instance) => this._renderInstanceRow(instance))}
|
|
11738
12196
|
</div>
|
|
11739
12197
|
</div>
|
|
@@ -11796,19 +12254,19 @@ var AxebowTenantsTable = class AxebowTenantsTable extends LitElement {
|
|
|
11796
12254
|
render() {
|
|
11797
12255
|
if (!this.accounts.length) return html`<p>${this.noAccountsLabel}</p>`;
|
|
11798
12256
|
return html`
|
|
11799
|
-
<table class="w-full border-collapse bg-white rounded-
|
|
12257
|
+
<table class="w-full border-collapse bg-white rounded-md">
|
|
11800
12258
|
<thead>
|
|
11801
12259
|
<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-
|
|
12260
|
+
<th class="border border-(--axebow-table-border) p-2 text-left rounded-md">${this.colAccountLabel}</th>
|
|
12261
|
+
<th class="border border-(--axebow-table-border) p-2 text-left rounded-md">${this.colVcpuLabel}</th>
|
|
12262
|
+
<th class="border border-(--axebow-table-border) p-2 text-left rounded-md">${this.colMemoryLabel}</th>
|
|
12263
|
+
<th class="border border-(--axebow-table-border) p-2 text-left rounded-md">${this.colStorageLabel}</th>
|
|
11806
12264
|
</tr>
|
|
11807
12265
|
</thead>
|
|
11808
12266
|
<tbody>
|
|
11809
12267
|
${this.accounts.map((account) => html`
|
|
11810
12268
|
<tr class="cursor-pointer" @click="${() => this._toggleAccount(account.name)}">
|
|
11811
|
-
<td class="border border-(--axebow-table-border) p-2 rounded-
|
|
12269
|
+
<td class="border border-(--axebow-table-border) p-2 rounded-md text-(--axebow-tertiary)">
|
|
11812
12270
|
${this._isAccountExpanded(account.name) ? html`<axebow-icon
|
|
11813
12271
|
iconName="collapse_all"
|
|
11814
12272
|
class="mr-1"
|
|
@@ -11822,21 +12280,21 @@ var AxebowTenantsTable = class AxebowTenantsTable extends LitElement {
|
|
|
11822
12280
|
></axebow-icon>`}
|
|
11823
12281
|
${account.name}
|
|
11824
12282
|
</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-
|
|
12283
|
+
<td class="border border-(--axebow-table-border) p-2 rounded-md">${account.cpu}</td>
|
|
12284
|
+
<td class="border border-(--axebow-table-border) p-2 rounded-md">${account.memory}</td>
|
|
12285
|
+
<td class="border border-(--axebow-table-border) p-2 rounded-md">
|
|
11828
12286
|
${account.storage} ${this._renderTooltip(account.usage)}
|
|
11829
12287
|
</td>
|
|
11830
12288
|
</tr>
|
|
11831
12289
|
${this._isAccountExpanded(account.name) ? account.environments.map((environment) => html`
|
|
11832
12290
|
<tr>
|
|
11833
|
-
<td class="border border-(--axebow-table-border) p-2 rounded-
|
|
12291
|
+
<td class="border border-(--axebow-table-border) p-2 rounded-md">
|
|
11834
12292
|
<axebow-icon iconName="subdirectory_arrow_right" class="mr-1" size="md"></axebow-icon>
|
|
11835
12293
|
<span>${environment.name}</span>
|
|
11836
12294
|
</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-
|
|
12295
|
+
<td class="border border-(--axebow-table-border) p-2 rounded-md">${environment.cpu}</td>
|
|
12296
|
+
<td class="border border-(--axebow-table-border) p-2 rounded-md">${environment.memory}</td>
|
|
12297
|
+
<td class="border border-(--axebow-table-border) p-2 rounded-md">
|
|
11840
12298
|
${environment.storageTotal} ${this._renderTooltip(environment.usage)}
|
|
11841
12299
|
</td>
|
|
11842
12300
|
</tr>
|
|
@@ -11868,7 +12326,7 @@ var AxebowExpandableCard = class AxebowExpandableCard extends LitElement {
|
|
|
11868
12326
|
}
|
|
11869
12327
|
render() {
|
|
11870
12328
|
return html`
|
|
11871
|
-
<div class="box-border p-4 bg-white rounded-
|
|
12329
|
+
<div class="box-border p-4 bg-white rounded-md shadow-sm border border-gray-200 overflow-hidden">
|
|
11872
12330
|
<slot></slot>
|
|
11873
12331
|
</div>
|
|
11874
12332
|
`;
|
|
@@ -12167,7 +12625,7 @@ var AxebowObservabilityContainer = class AxebowObservabilityContainer extends Li
|
|
|
12167
12625
|
}
|
|
12168
12626
|
_renderLogsIframe() {
|
|
12169
12627
|
return html`
|
|
12170
|
-
<div class="w-full h-full px-4 py-8 rounded-
|
|
12628
|
+
<div class="w-full h-full px-4 py-8 rounded-md flex flex-col bg-white">
|
|
12171
12629
|
<div class="flex justify-between items-center">
|
|
12172
12630
|
<h1 class="m-0 text-base uppercase font-semibold text-(--axebow-gray)">${this.logsTitle}</h1>
|
|
12173
12631
|
<div class="flex items-center gap-4">
|
|
@@ -12220,7 +12678,7 @@ var AxebowObservabilityContainer = class AxebowObservabilityContainer extends Li
|
|
|
12220
12678
|
}
|
|
12221
12679
|
_renderTerminalIframe() {
|
|
12222
12680
|
return html`
|
|
12223
|
-
<div class="w-full h-full px-4 py-8 rounded-
|
|
12681
|
+
<div class="w-full h-full px-4 py-8 rounded-md flex flex-col bg-white">
|
|
12224
12682
|
<div class="flex justify-between items-center">
|
|
12225
12683
|
<h1 class="m-0 text-base uppercase font-semibold text-(--axebow-gray)">${this.terminalTitle}</h1>
|
|
12226
12684
|
</div>
|
|
@@ -12308,6 +12766,6 @@ __decorate([property({ type: String })], AxebowObservabilityContainer.prototype,
|
|
|
12308
12766
|
__decorate([property({ type: String })], AxebowObservabilityContainer.prototype, "terminalIframeId", void 0);
|
|
12309
12767
|
AxebowObservabilityContainer = __decorate([customElement("axebow-observability-container")], AxebowObservabilityContainer);
|
|
12310
12768
|
//#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 };
|
|
12769
|
+
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
12770
|
|
|
12313
12771
|
//# sourceMappingURL=index.js.map
|