@kumori/aurora-wui-components 0.0.251 → 0.0.252
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-actions-footer/axebow-actions-footer.d.ts +4 -0
- package/dist/components/axebow-actions-footer/axebow-actions-footer.d.ts.map +1 -1
- package/dist/components/axebow-carousel-selector-tenant/axebow-carousel-selector-tenant.d.ts +28 -0
- package/dist/components/axebow-carousel-selector-tenant/axebow-carousel-selector-tenant.d.ts.map +1 -0
- package/dist/components/axebow-carousel-selector-tenant/parts/axebow-carousel-selector-item.d.ts +22 -0
- package/dist/components/axebow-carousel-selector-tenant/parts/axebow-carousel-selector-item.d.ts.map +1 -0
- package/dist/components/axebow-deploy-summary/axebow-deploy-summary.d.ts.map +1 -1
- package/dist/components/axebow-expandable-header/axebow-expandable-header.d.ts.map +1 -1
- package/dist/components/axebow-icon/axebow-icon.d.ts +1 -2
- package/dist/components/axebow-icon/axebow-icon.d.ts.map +1 -1
- package/dist/components/axebow-input/axebow-input-base.d.ts +0 -17
- package/dist/components/axebow-input/axebow-input-base.d.ts.map +1 -1
- package/dist/components/axebow-input/axebow-input.d.ts +2 -0
- package/dist/components/axebow-input/axebow-input.d.ts.map +1 -1
- package/dist/components/axebow-input/axebow-numeric-input.d.ts +2 -10
- package/dist/components/axebow-input/axebow-numeric-input.d.ts.map +1 -1
- package/dist/components/axebow-input/axebow-select-input.d.ts +3 -7
- package/dist/components/axebow-input/axebow-select-input.d.ts.map +1 -1
- package/dist/components/axebow-resource-limits/axebow-resource-limits-panel.d.ts +13 -0
- package/dist/components/axebow-resource-limits/axebow-resource-limits-panel.d.ts.map +1 -0
- package/dist/components/axebow-resource-limits/axebow-resource-limits.models.d.ts +12 -0
- package/dist/components/axebow-resource-limits/axebow-resource-limits.models.d.ts.map +1 -0
- package/dist/components/axebow-resource-limits/parts/axebow-resource-limit-input.d.ts +15 -0
- package/dist/components/axebow-resource-limits/parts/axebow-resource-limit-input.d.ts.map +1 -0
- package/dist/components/axebow-summary/axebow-summary-card.d.ts +2 -0
- package/dist/components/axebow-summary/axebow-summary-card.d.ts.map +1 -1
- package/dist/components/axebow-summary/axebow-summary-flavors.d.ts +30 -0
- package/dist/components/axebow-summary/axebow-summary-flavors.d.ts.map +1 -0
- package/dist/components/axebow-summary/axebow-summary-limits.d.ts +41 -0
- package/dist/components/axebow-summary/axebow-summary-limits.d.ts.map +1 -0
- package/dist/components/axebow-tab-selector/axebow-tab-selector.d.ts +2 -6
- package/dist/components/axebow-tab-selector/axebow-tab-selector.d.ts.map +1 -1
- package/dist/components/axebow-tenant-resource-table/axebow-tenant-resource-table.d.ts.map +1 -1
- package/dist/components/cards/parts/axebow-card-header.d.ts.map +1 -1
- package/dist/components/cards/parts/axebow-card-status.d.ts.map +1 -1
- package/dist/components/cards/parts/axebow-role-tooltip.d.ts.map +1 -1
- package/dist/index.d.ts +7 -5
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +632 -1013
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/dist/components/axebow-adjustment-resources-counter/axebow-adjustment-resources-counter.d.ts +0 -13
- package/dist/components/axebow-adjustment-resources-counter/axebow-adjustment-resources-counter.d.ts.map +0 -1
- package/dist/components/axebow-modals-confirmation/axebow-modals-confirmation.d.ts +0 -90
- package/dist/components/axebow-modals-confirmation/axebow-modals-confirmation.d.ts.map +0 -1
- package/dist/components/axebow-modals-confirmation/axebow-modals-confirmation.models.d.ts +0 -14
- package/dist/components/axebow-modals-confirmation/axebow-modals-confirmation.models.d.ts.map +0 -1
- package/dist/components/axebow-selector-slider/axebow-selector-slider.d.ts +0 -27
- package/dist/components/axebow-selector-slider/axebow-selector-slider.d.ts.map +0 -1
- package/dist/components/axebow-tooltip/axebow-tooltip.d.ts +0 -14
- package/dist/components/axebow-tooltip/axebow-tooltip.d.ts.map +0 -1
- package/dist/playground/schemas/axebow-adjustment-resources-counter.schema.d.ts +0 -6
- package/dist/playground/schemas/axebow-adjustment-resources-counter.schema.d.ts.map +0 -1
- package/dist/playground/schemas/axebow-modals-confirmation.schema.d.ts +0 -8
- package/dist/playground/schemas/axebow-modals-confirmation.schema.d.ts.map +0 -1
- package/dist/playground/schemas/axebow-selector-slider.schema.d.ts +0 -6
- package/dist/playground/schemas/axebow-selector-slider.schema.d.ts.map +0 -1
- package/dist/playground/schemas/axebow-tooltip.schema.d.ts +0 -6
- package/dist/playground/schemas/axebow-tooltip.schema.d.ts.map +0 -1
package/dist/index.js
CHANGED
|
@@ -18,8 +18,8 @@ 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
20
|
import "@shoelace-style/shoelace/dist/components/menu-item/menu-item.js";
|
|
21
|
-
import "@shoelace-style/shoelace/dist/components/tooltip/tooltip.js";
|
|
22
21
|
import "@shoelace-style/shoelace/dist/components/icon/icon.js";
|
|
22
|
+
import "@shoelace-style/shoelace/dist/components/tooltip/tooltip.js";
|
|
23
23
|
import "@shoelace-style/shoelace/dist/components/badge/badge.js";
|
|
24
24
|
import "@shoelace-style/shoelace/dist/components/spinner/spinner.js";
|
|
25
25
|
import { unsafeHTML } from "lit/directives/unsafe-html.js";
|
|
@@ -124,7 +124,7 @@ var STATUS_COLORS = {
|
|
|
124
124
|
};
|
|
125
125
|
//#endregion
|
|
126
126
|
//#region src/styles/tailwind.css?inline
|
|
127
|
-
var tailwind_default = "/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n@layer properties {\n @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {\n *, :before, :after, ::backdrop {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-rotate-x: initial;\n --tw-rotate-y: initial;\n --tw-rotate-z: initial;\n --tw-skew-x: initial;\n --tw-skew-y: initial;\n --tw-space-y-reverse: 0;\n --tw-border-style: solid;\n --tw-leading: initial;\n --tw-font-weight: initial;\n --tw-tracking: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-outline-style: solid;\n --tw-blur: initial;\n --tw-brightness: initial;\n --tw-contrast: initial;\n --tw-grayscale: initial;\n --tw-hue-rotate: initial;\n --tw-invert: initial;\n --tw-opacity: initial;\n --tw-saturate: initial;\n --tw-sepia: initial;\n --tw-drop-shadow: initial;\n --tw-drop-shadow-color: initial;\n --tw-drop-shadow-alpha: 100%;\n --tw-drop-shadow-size: initial;\n --tw-duration: initial;\n --tw-ease: initial;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-scale-z: 1;\n }\n }\n}\n\n@layer theme {\n :root, :host {\n --font-sans: \"Open Sans\", sans-serif;\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n \"Courier New\", monospace;\n --color-red-50: oklch(97.1% .013 17.38);\n --color-red-200: oklch(88.5% .062 18.334);\n --color-red-300: oklch(80.8% .114 19.571);\n --color-red-500: oklch(63.7% .237 25.331);\n --color-red-600: oklch(57.7% .245 27.325);\n --color-yellow-50: oklch(98.7% .026 102.212);\n --color-yellow-200: oklch(94.5% .129 101.54);\n --color-yellow-600: oklch(68.1% .162 75.834);\n --color-yellow-800: oklch(47.6% .114 61.907);\n --color-green-50: oklch(98.2% .018 155.826);\n --color-green-200: oklch(92.5% .084 155.995);\n --color-green-600: oklch(62.7% .194 149.214);\n --color-green-800: oklch(44.8% .119 151.328);\n --color-sky-50: oklch(97.7% .013 236.62);\n --color-sky-100: oklch(95.1% .026 236.824);\n --color-blue-50: oklch(97% .014 254.604);\n --color-blue-100: oklch(93.2% .032 255.585);\n --color-blue-200: oklch(88.2% .059 254.128);\n --color-blue-500: oklch(62.3% .214 259.815);\n --color-blue-600: oklch(54.6% .245 262.881);\n --color-blue-800: oklch(42.4% .199 265.638);\n --color-gray-50: oklch(98.5% .002 247.839);\n --color-gray-100: oklch(96.7% .003 264.542);\n --color-gray-200: oklch(92.8% .006 264.531);\n --color-gray-300: oklch(87.2% .01 258.338);\n --color-gray-400: oklch(70.7% .022 261.325);\n --color-gray-500: oklch(55.1% .027 264.364);\n --color-gray-600: oklch(44.6% .03 256.802);\n --color-gray-700: oklch(37.3% .034 259.733);\n --color-gray-900: oklch(21% .034 264.665);\n --color-black: #000;\n --color-white: #fff;\n --spacing: .25rem;\n --text-xs: .625rem;\n --text-xs--line-height: .875rem;\n --text-sm: .75rem;\n --text-sm--line-height: 1rem;\n --text-base: .875rem;\n --text-base--line-height: 1.25rem;\n --text-lg: 1.125rem;\n --text-lg--line-height: 1.75rem;\n --text-xl: 1.25rem;\n --text-xl--line-height: 1.75rem;\n --text-3xl: 1.875rem;\n --text-5xl: 3rem;\n --font-weight-normal: 400;\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --font-weight-black: 900;\n --tracking-wider: .05em;\n --tracking-widest: .1em;\n --leading-tight: 1.25;\n --leading-snug: 1.375;\n --leading-relaxed: 1.625;\n --radius-sm: .25rem;\n --radius-md: .375rem;\n --radius-lg: .5rem;\n --radius-xl: .75rem;\n --radius-2xl: 1rem;\n --ease-out: cubic-bezier(0, 0, .2, 1);\n --ease-in-out: cubic-bezier(.4, 0, .2, 1);\n --default-transition-duration: .15s;\n --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n --default-font-family: var(--font-sans);\n --default-mono-font-family: var(--font-mono);\n --text-md: 1rem;\n --text-md--line-height: 1.5rem;\n --spacing-18: 4.5rem;\n --spacing-30: 7.5rem;\n --spacing-38: 9.5rem;\n --spacing-43: 10.75rem;\n --spacing-75: 18.75rem;\n --spacing-117: 29.25rem;\n --spacing-120: 30rem;\n }\n}\n\n@layer base {\n *, :after, :before, ::backdrop {\n box-sizing: border-box;\n border: 0 solid;\n margin: 0;\n padding: 0;\n }\n\n ::file-selector-button {\n box-sizing: border-box;\n border: 0 solid;\n margin: 0;\n padding: 0;\n }\n\n html, :host {\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n line-height: 1.5;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n -webkit-text-decoration: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n\n b, strong {\n font-weight: bolder;\n }\n\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n\n small {\n font-size: 80%;\n }\n\n sub, sup {\n vertical-align: baseline;\n font-size: 75%;\n line-height: 0;\n position: relative;\n }\n\n sub {\n bottom: -.25em;\n }\n\n sup {\n top: -.5em;\n }\n\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n\n :-moz-focusring {\n outline: auto;\n }\n\n progress {\n vertical-align: baseline;\n }\n\n summary {\n display: list-item;\n }\n\n ol, ul, menu {\n list-style: none;\n }\n\n img, svg, video, canvas, audio, iframe, embed, object {\n vertical-align: middle;\n display: block;\n }\n\n img, video {\n max-width: 100%;\n height: auto;\n }\n\n button, input, select, optgroup, textarea {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n opacity: 1;\n background-color: #0000;\n border-radius: 0;\n }\n\n ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n opacity: 1;\n background-color: #0000;\n border-radius: 0;\n }\n\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n\n ::placeholder {\n opacity: 1;\n }\n\n @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentColor;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n ::placeholder {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n\n textarea {\n resize: vertical;\n }\n\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n\n ::-webkit-datetime-edit {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-year-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-month-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-day-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-hour-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-minute-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-second-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-millisecond-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n\n ::-webkit-calendar-picker-indicator {\n line-height: 1;\n }\n\n :-moz-ui-invalid {\n box-shadow: none;\n }\n\n button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]) {\n appearance: button;\n }\n\n ::file-selector-button {\n appearance: button;\n }\n\n ::-webkit-inner-spin-button {\n height: auto;\n }\n\n ::-webkit-outer-spin-button {\n height: auto;\n }\n\n [hidden]:where(:not([hidden=\"until-found\"])) {\n display: none !important;\n }\n}\n\n@layer components;\n\n@layer utilities {\n .pointer-events-none {\n pointer-events: none;\n }\n\n .visible {\n visibility: visible;\n }\n\n .absolute {\n position: absolute;\n }\n\n .fixed {\n position: fixed;\n }\n\n .relative {\n position: relative;\n }\n\n .static {\n position: static;\n }\n\n .top-0 {\n top: 0;\n }\n\n .top-1 {\n top: var(--spacing);\n }\n\n .top-1\\/2 {\n top: 50%;\n }\n\n .top-25 {\n top: calc(var(--spacing) * 25);\n }\n\n .top-30 {\n top: var(--spacing-30);\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-\\[calc\\(100\\%\\+10px\\)\\] {\n right: calc(100% + 10px);\n }\n\n .bottom-0 {\n bottom: 0;\n }\n\n .bottom-0\\.5 {\n bottom: calc(var(--spacing) * .5);\n }\n\n .bottom-full {\n bottom: 100%;\n }\n\n .left-0 {\n left: 0;\n }\n\n .left-1\\/2 {\n left: 50%;\n }\n\n .left-\\[-7px\\] {\n left: -7px;\n }\n\n .left-full {\n left: 100%;\n }\n\n .z-5 {\n z-index: 5;\n }\n\n .z-10 {\n z-index: 10;\n }\n\n .z-100 {\n z-index: 100;\n }\n\n .z-2000 {\n z-index: 2000;\n }\n\n .z-2001 {\n z-index: 2001;\n }\n\n .z-9999 {\n z-index: 9999;\n }\n\n .container {\n width: 100%;\n }\n\n @media (min-width: 40rem) {\n .container {\n max-width: 40rem;\n }\n }\n\n @media (min-width: 48rem) {\n .container {\n max-width: 48rem;\n }\n }\n\n @media (min-width: 64rem) {\n .container {\n max-width: 64rem;\n }\n }\n\n @media (min-width: 80rem) {\n .container {\n max-width: 80rem;\n }\n }\n\n @media (min-width: 96rem) {\n .container {\n max-width: 96rem;\n }\n }\n\n .m-0 {\n margin: 0;\n }\n\n .mx-2 {\n margin-inline: calc(var(--spacing) * 2);\n }\n\n .mx-6 {\n margin-inline: calc(var(--spacing) * 6);\n }\n\n .mx-12 {\n margin-inline: calc(var(--spacing) * 12);\n }\n\n .mx-auto {\n margin-inline: auto;\n }\n\n .my-0\\.5 {\n margin-block: calc(var(--spacing) * .5);\n }\n\n .my-2 {\n margin-block: calc(var(--spacing) * 2);\n }\n\n .my-4 {\n margin-block: calc(var(--spacing) * 4);\n }\n\n .ms-auto {\n margin-inline-start: auto;\n }\n\n .mt-0 {\n margin-top: 0;\n }\n\n .mt-1 {\n margin-top: var(--spacing);\n }\n\n .mt-1\\.5 {\n margin-top: calc(var(--spacing) * 1.5);\n }\n\n .mt-1\\.75 {\n margin-top: calc(var(--spacing) * 1.75);\n }\n\n .mt-2 {\n margin-top: calc(var(--spacing) * 2);\n }\n\n .mt-2\\.25 {\n margin-top: calc(var(--spacing) * 2.25);\n }\n\n .mt-4 {\n margin-top: calc(var(--spacing) * 4);\n }\n\n .mt-5 {\n margin-top: calc(var(--spacing) * 5);\n }\n\n .mt-6 {\n margin-top: calc(var(--spacing) * 6);\n }\n\n .mt-8 {\n margin-top: calc(var(--spacing) * 8);\n }\n\n .mr-2 {\n margin-right: calc(var(--spacing) * 2);\n }\n\n .mr-4 {\n margin-right: calc(var(--spacing) * 4);\n }\n\n .mb-1 {\n margin-bottom: var(--spacing);\n }\n\n .mb-1\\.5 {\n margin-bottom: calc(var(--spacing) * 1.5);\n }\n\n .mb-2 {\n margin-bottom: calc(var(--spacing) * 2);\n }\n\n .mb-3 {\n margin-bottom: calc(var(--spacing) * 3);\n }\n\n .mb-4 {\n margin-bottom: calc(var(--spacing) * 4);\n }\n\n .mb-6 {\n margin-bottom: calc(var(--spacing) * 6);\n }\n\n .mb-6\\.5 {\n margin-bottom: calc(var(--spacing) * 6.5);\n }\n\n .mb-8 {\n margin-bottom: calc(var(--spacing) * 8);\n }\n\n .ml-1 {\n margin-left: var(--spacing);\n }\n\n .ml-2 {\n margin-left: calc(var(--spacing) * 2);\n }\n\n .ml-4 {\n margin-left: calc(var(--spacing) * 4);\n }\n\n .ml-12 {\n margin-left: calc(var(--spacing) * 12);\n }\n\n .ml-auto {\n margin-left: auto;\n }\n\n .box-border {\n box-sizing: border-box;\n }\n\n .box-content {\n box-sizing: content-box;\n }\n\n .line-clamp-1 {\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n overflow: hidden;\n }\n\n .line-clamp-2 {\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n overflow: hidden;\n }\n\n .line-clamp-11 {\n -webkit-line-clamp: 11;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n overflow: hidden;\n }\n\n .\\!hidden {\n display: none !important;\n }\n\n .block {\n display: block;\n }\n\n .contents {\n display: contents;\n }\n\n .flex {\n display: flex;\n }\n\n .grid {\n display: grid;\n }\n\n .hidden {\n display: none;\n }\n\n .inline {\n display: inline;\n }\n\n .inline-block {\n display: inline-block;\n }\n\n .inline-flex {\n display: inline-flex;\n }\n\n .table {\n display: table;\n }\n\n .aspect-square {\n aspect-ratio: 1;\n }\n\n .h-2 {\n height: calc(var(--spacing) * 2);\n }\n\n .h-2\\.25 {\n height: calc(var(--spacing) * 2.25);\n }\n\n .h-2\\.75 {\n height: calc(var(--spacing) * 2.75);\n }\n\n .h-3 {\n height: calc(var(--spacing) * 3);\n }\n\n .h-3\\.5 {\n height: calc(var(--spacing) * 3.5);\n }\n\n .h-4 {\n height: calc(var(--spacing) * 4);\n }\n\n .h-4\\.5 {\n height: calc(var(--spacing) * 4.5);\n }\n\n .h-4\\.25 {\n height: calc(var(--spacing) * 4.25);\n }\n\n .h-5 {\n height: calc(var(--spacing) * 5);\n }\n\n .h-5\\.5 {\n height: calc(var(--spacing) * 5.5);\n }\n\n .h-5\\.25 {\n height: calc(var(--spacing) * 5.25);\n }\n\n .h-6 {\n height: calc(var(--spacing) * 6);\n }\n\n .h-7 {\n height: calc(var(--spacing) * 7);\n }\n\n .h-7\\.5 {\n height: calc(var(--spacing) * 7.5);\n }\n\n .h-7\\.25 {\n height: calc(var(--spacing) * 7.25);\n }\n\n .h-8 {\n height: calc(var(--spacing) * 8);\n }\n\n .h-8\\.75 {\n height: calc(var(--spacing) * 8.75);\n }\n\n .h-9 {\n height: calc(var(--spacing) * 9);\n }\n\n .h-9\\.5 {\n height: calc(var(--spacing) * 9.5);\n }\n\n .h-9\\.75 {\n height: calc(var(--spacing) * 9.75);\n }\n\n .h-10 {\n height: calc(var(--spacing) * 10);\n }\n\n .h-10\\.5 {\n height: calc(var(--spacing) * 10.5);\n }\n\n .h-11 {\n height: calc(var(--spacing) * 11);\n }\n\n .h-11\\.5 {\n height: calc(var(--spacing) * 11.5);\n }\n\n .h-11\\.25 {\n height: calc(var(--spacing) * 11.25);\n }\n\n .h-12 {\n height: calc(var(--spacing) * 12);\n }\n\n .h-12\\.25 {\n height: calc(var(--spacing) * 12.25);\n }\n\n .h-12\\.75 {\n height: calc(var(--spacing) * 12.75);\n }\n\n .h-14 {\n height: calc(var(--spacing) * 14);\n }\n\n .h-14\\.25 {\n height: calc(var(--spacing) * 14.25);\n }\n\n .h-16 {\n height: calc(var(--spacing) * 16);\n }\n\n .h-17\\.75 {\n height: calc(var(--spacing) * 17.75);\n }\n\n .h-20 {\n height: calc(var(--spacing) * 20);\n }\n\n .h-21\\.25 {\n height: calc(var(--spacing) * 21.25);\n }\n\n .h-49\\.5 {\n height: calc(var(--spacing) * 49.5);\n }\n\n .h-52\\.75 {\n height: calc(var(--spacing) * 52.75);\n }\n\n .h-57\\.5 {\n height: calc(var(--spacing) * 57.5);\n }\n\n .h-77\\.25 {\n height: calc(var(--spacing) * 77.25);\n }\n\n .h-\\[0\\.0625rem\\] {\n height: .0625rem;\n }\n\n .h-\\[8\\.26375rem\\] {\n height: 8.26375rem;\n }\n\n .h-auto {\n height: auto;\n }\n\n .h-fit {\n height: fit-content;\n }\n\n .h-full {\n height: 100%;\n }\n\n .h-px {\n height: 1px;\n }\n\n .max-h-10 {\n max-height: calc(var(--spacing) * 10);\n }\n\n .max-h-40 {\n max-height: calc(var(--spacing) * 40);\n }\n\n .max-h-75 {\n max-height: var(--spacing-75);\n }\n\n .max-h-\\[40vh\\] {\n max-height: 40vh;\n }\n\n .max-h-full {\n max-height: 100%;\n }\n\n .min-h-0 {\n min-height: 0;\n }\n\n .min-h-5 {\n min-height: calc(var(--spacing) * 5);\n }\n\n .min-h-9 {\n min-height: calc(var(--spacing) * 9);\n }\n\n .min-h-10 {\n min-height: calc(var(--spacing) * 10);\n }\n\n .min-h-35 {\n min-height: calc(var(--spacing) * 35);\n }\n\n .min-h-102\\.5 {\n min-height: calc(var(--spacing) * 102.5);\n }\n\n .min-h-107\\.5 {\n min-height: calc(var(--spacing) * 107.5);\n }\n\n .min-h-113\\.25 {\n min-height: calc(var(--spacing) * 113.25);\n }\n\n .w-1\\/3 {\n width: 33.3333%;\n }\n\n .w-2 {\n width: calc(var(--spacing) * 2);\n }\n\n .w-2\\.5 {\n width: calc(var(--spacing) * 2.5);\n }\n\n .w-3\\.5 {\n width: calc(var(--spacing) * 3.5);\n }\n\n .w-4 {\n width: calc(var(--spacing) * 4);\n }\n\n .w-4\\.5 {\n width: calc(var(--spacing) * 4.5);\n }\n\n .w-4\\.25 {\n width: calc(var(--spacing) * 4.25);\n }\n\n .w-5 {\n width: calc(var(--spacing) * 5);\n }\n\n .w-6 {\n width: calc(var(--spacing) * 6);\n }\n\n .w-7 {\n width: calc(var(--spacing) * 7);\n }\n\n .w-8 {\n width: calc(var(--spacing) * 8);\n }\n\n .w-9 {\n width: calc(var(--spacing) * 9);\n }\n\n .w-9\\.5 {\n width: calc(var(--spacing) * 9.5);\n }\n\n .w-10 {\n width: calc(var(--spacing) * 10);\n }\n\n .w-10\\.5 {\n width: calc(var(--spacing) * 10.5);\n }\n\n .w-11\\.5 {\n width: calc(var(--spacing) * 11.5);\n }\n\n .w-11\\.25 {\n width: calc(var(--spacing) * 11.25);\n }\n\n .w-12 {\n width: calc(var(--spacing) * 12);\n }\n\n .w-15\\.25 {\n width: calc(var(--spacing) * 15.25);\n }\n\n .w-17 {\n width: calc(var(--spacing) * 17);\n }\n\n .w-18 {\n width: var(--spacing-18);\n }\n\n .w-18\\.5 {\n width: calc(var(--spacing) * 18.5);\n }\n\n .w-18\\.75 {\n width: calc(var(--spacing) * 18.75);\n }\n\n .w-20 {\n width: calc(var(--spacing) * 20);\n }\n\n .w-20\\.5 {\n width: calc(var(--spacing) * 20.5);\n }\n\n .w-21\\.5 {\n width: calc(var(--spacing) * 21.5);\n }\n\n .w-25 {\n width: calc(var(--spacing) * 25);\n }\n\n .w-26\\.25 {\n width: calc(var(--spacing) * 26.25);\n }\n\n .w-27 {\n width: calc(var(--spacing) * 27);\n }\n\n .w-27\\.5 {\n width: calc(var(--spacing) * 27.5);\n }\n\n .w-30 {\n width: var(--spacing-30);\n }\n\n .w-30\\.75 {\n width: calc(var(--spacing) * 30.75);\n }\n\n .w-35 {\n width: calc(var(--spacing) * 35);\n }\n\n .w-37 {\n width: calc(var(--spacing) * 37);\n }\n\n .w-40\\.25 {\n width: calc(var(--spacing) * 40.25);\n }\n\n .w-47\\.75 {\n width: calc(var(--spacing) * 47.75);\n }\n\n .w-56\\.5 {\n width: calc(var(--spacing) * 56.5);\n }\n\n .w-57\\.5 {\n width: calc(var(--spacing) * 57.5);\n }\n\n .w-60\\.5 {\n width: calc(var(--spacing) * 60.5);\n }\n\n .w-62\\.5 {\n width: calc(var(--spacing) * 62.5);\n }\n\n .w-63\\.5 {\n width: calc(var(--spacing) * 63.5);\n }\n\n .w-70\\.5 {\n width: calc(var(--spacing) * 70.5);\n }\n\n .w-71 {\n width: calc(var(--spacing) * 71);\n }\n\n .w-87 {\n width: calc(var(--spacing) * 87);\n }\n\n .w-88\\.5 {\n width: calc(var(--spacing) * 88.5);\n }\n\n .w-91 {\n width: calc(var(--spacing) * 91);\n }\n\n .w-95 {\n width: calc(var(--spacing) * 95);\n }\n\n .w-117 {\n width: var(--spacing-117);\n }\n\n .w-120 {\n width: var(--spacing-120);\n }\n\n .w-120\\.75 {\n width: calc(var(--spacing) * 120.75);\n }\n\n .w-121 {\n width: calc(var(--spacing) * 121);\n }\n\n .w-130\\.25 {\n width: calc(var(--spacing) * 130.25);\n }\n\n .w-131 {\n width: calc(var(--spacing) * 131);\n }\n\n .w-139 {\n width: calc(var(--spacing) * 139);\n }\n\n .w-194\\.25 {\n width: calc(var(--spacing) * 194.25);\n }\n\n .w-270 {\n width: calc(var(--spacing) * 270);\n }\n\n .w-282 {\n width: calc(var(--spacing) * 282);\n }\n\n .w-286 {\n width: calc(var(--spacing) * 286);\n }\n\n .w-294 {\n width: calc(var(--spacing) * 294);\n }\n\n .w-\\[10\\.5rem\\] {\n width: 10.5rem;\n }\n\n .w-\\[calc\\(100\\%-10px\\)\\] {\n width: calc(100% - 10px);\n }\n\n .w-full {\n width: 100%;\n }\n\n .w-px {\n width: 1px;\n }\n\n .max-w-36 {\n max-width: calc(var(--spacing) * 36);\n }\n\n .max-w-38 {\n max-width: var(--spacing-38);\n }\n\n .max-w-43 {\n max-width: var(--spacing-43);\n }\n\n .max-w-44 {\n max-width: calc(var(--spacing) * 44);\n }\n\n .max-w-194\\.25 {\n max-width: calc(var(--spacing) * 194.25);\n }\n\n .max-w-\\[23\\.75rem\\] {\n max-width: 23.75rem;\n }\n\n .max-w-full {\n max-width: 100%;\n }\n\n .min-w-0 {\n min-width: 0;\n }\n\n .min-w-4 {\n min-width: calc(var(--spacing) * 4);\n }\n\n .min-w-20 {\n min-width: calc(var(--spacing) * 20);\n }\n\n .min-w-30 {\n min-width: var(--spacing-30);\n }\n\n .min-w-36 {\n min-width: calc(var(--spacing) * 36);\n }\n\n .min-w-44 {\n min-width: calc(var(--spacing) * 44);\n }\n\n .min-w-53\\.25 {\n min-width: calc(var(--spacing) * 53.25);\n }\n\n .min-w-55 {\n min-width: calc(var(--spacing) * 55);\n }\n\n .min-w-\\[8\\.2rem\\] {\n min-width: 8.2rem;\n }\n\n .min-w-fit {\n min-width: fit-content;\n }\n\n .flex-1 {\n flex: 1;\n }\n\n .flex-shrink {\n flex-shrink: 1;\n }\n\n .shrink-0 {\n flex-shrink: 0;\n }\n\n .-translate-x-1\\/2 {\n --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .translate-x-1 {\n --tw-translate-x: var(--spacing);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .-translate-y-1\\/2 {\n --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .scale-\\[1\\.02\\] {\n scale: 1.02;\n }\n\n .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-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 :where(.space-y-1 > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));\n margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));\n }\n\n :where(.space-y-2 > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));\n }\n\n :where(.space-y-3 > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));\n }\n\n .gap-x-1 {\n column-gap: var(--spacing);\n }\n\n .gap-x-2 {\n column-gap: calc(var(--spacing) * 2);\n }\n\n .gap-x-4 {\n column-gap: calc(var(--spacing) * 4);\n }\n\n .gap-x-6 {\n column-gap: calc(var(--spacing) * 6);\n }\n\n .gap-y-1 {\n row-gap: var(--spacing);\n }\n\n .gap-y-\\[0\\.1875rem\\] {\n row-gap: .1875rem;\n }\n\n .self-end {\n align-self: flex-end;\n }\n\n .truncate {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n }\n\n .overflow-auto {\n overflow: auto;\n }\n\n .overflow-hidden {\n overflow: hidden;\n }\n\n .overflow-visible {\n overflow: visible;\n }\n\n .overflow-x-hidden {\n overflow-x: hidden;\n }\n\n .overflow-y-auto {\n overflow-y: auto;\n }\n\n .rounded {\n border-radius: .25rem;\n }\n\n .rounded-2xl {\n border-radius: var(--radius-2xl);\n }\n\n .rounded-full {\n border-radius: 3.40282e38px;\n }\n\n .rounded-lg {\n border-radius: var(--radius-lg);\n }\n\n .rounded-md {\n border-radius: var(--radius-md);\n }\n\n .rounded-none {\n border-radius: 0;\n }\n\n .rounded-sm {\n border-radius: var(--radius-sm);\n }\n\n .rounded-xl {\n border-radius: var(--radius-xl);\n }\n\n .rounded-t-lg {\n border-top-left-radius: var(--radius-lg);\n border-top-right-radius: var(--radius-lg);\n }\n\n .rounded-t-md {\n border-top-left-radius: var(--radius-md);\n border-top-right-radius: var(--radius-md);\n }\n\n .rounded-t-xl {\n border-top-left-radius: var(--radius-xl);\n border-top-right-radius: var(--radius-xl);\n }\n\n .rounded-l-xl {\n border-top-left-radius: var(--radius-xl);\n border-bottom-left-radius: var(--radius-xl);\n }\n\n .rounded-tl-xl {\n border-top-left-radius: var(--radius-xl);\n }\n\n .rounded-tr-xl {\n border-top-right-radius: var(--radius-xl);\n }\n\n .rounded-b-lg {\n border-bottom-right-radius: var(--radius-lg);\n border-bottom-left-radius: var(--radius-lg);\n }\n\n .rounded-b-md {\n border-bottom-right-radius: var(--radius-md);\n border-bottom-left-radius: var(--radius-md);\n }\n\n .rounded-b-xl {\n border-bottom-right-radius: var(--radius-xl);\n border-bottom-left-radius: var(--radius-xl);\n }\n\n .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n\n .border-0 {\n border-style: var(--tw-border-style);\n border-width: 0;\n }\n\n .border-2 {\n border-style: var(--tw-border-style);\n border-width: 2px;\n }\n\n .border-x {\n border-inline-style: var(--tw-border-style);\n border-inline-width: 1px;\n }\n\n .border-t {\n border-top-style: var(--tw-border-style);\n border-top-width: 1px;\n }\n\n .border-t-4 {\n border-top-style: var(--tw-border-style);\n border-top-width: 4px;\n }\n\n .border-r-0 {\n border-right-style: var(--tw-border-style);\n border-right-width: 0;\n }\n\n .border-b {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n }\n\n .border-b-0 {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 0;\n }\n\n .border-l {\n border-left-style: var(--tw-border-style);\n border-left-width: 1px;\n }\n\n .border-l-0 {\n border-left-style: var(--tw-border-style);\n border-left-width: 0;\n }\n\n .border-l-4 {\n border-left-style: var(--tw-border-style);\n border-left-width: 4px;\n }\n\n .border-dashed {\n --tw-border-style: dashed;\n border-style: dashed;\n }\n\n .border-none {\n --tw-border-style: none;\n border-style: none;\n }\n\n .border-solid {\n --tw-border-style: solid;\n border-style: solid;\n }\n\n .border-\\(--axebow-gray\\) {\n border-color: var(--axebow-gray);\n }\n\n .border-\\(--axebow-light-gray\\) {\n border-color: var(--axebow-light-gray);\n }\n\n .border-\\(--axebow-premium-text\\) {\n border-color: var(--axebow-premium-text);\n }\n\n .border-\\(--axebow-secondary\\) {\n border-color: var(--axebow-secondary);\n }\n\n .border-\\(--axebow-table-border\\) {\n border-color: var(--axebow-table-border);\n }\n\n .border-\\(--axebow-table-header-border\\) {\n border-color: var(--axebow-table-header-border);\n }\n\n .border-\\(--axebow-tertiary\\) {\n border-color: var(--axebow-tertiary);\n }\n\n .border-\\[\\#DBDDE4\\] {\n border-color: #dbdde4;\n }\n\n .border-\\[var\\(--axebow-error\\)\\] {\n border-color: var(--axebow-error);\n }\n\n .border-\\[var\\(--axebow-gray\\)\\] {\n border-color: var(--axebow-gray);\n }\n\n .border-\\[var\\(--axebow-tertiary\\)\\] {\n border-color: var(--axebow-tertiary);\n }\n\n .border-blue-200 {\n border-color: var(--color-blue-200);\n }\n\n .border-gray-200 {\n border-color: var(--color-gray-200);\n }\n\n .border-gray-300 {\n border-color: var(--color-gray-300);\n }\n\n .border-gray-400 {\n border-color: var(--color-gray-400);\n }\n\n .border-gray-500 {\n border-color: var(--color-gray-500);\n }\n\n .border-green-200 {\n border-color: var(--color-green-200);\n }\n\n .border-red-200 {\n border-color: var(--color-red-200);\n }\n\n .border-transparent {\n border-color: #0000;\n }\n\n .border-white {\n border-color: var(--color-white);\n }\n\n .border-yellow-200 {\n border-color: var(--color-yellow-200);\n }\n\n .bg-\\(--axebow-anti-flash-white\\) {\n background-color: var(--axebow-anti-flash-white);\n }\n\n .bg-\\(--axebow-base\\) {\n background-color: var(--axebow-base);\n }\n\n .bg-\\(--axebow-error\\) {\n background-color: var(--axebow-error);\n }\n\n .bg-\\(--axebow-gray\\) {\n background-color: var(--axebow-gray);\n }\n\n .bg-\\(--axebow-light-gray\\), .bg-\\(--axebow-light-gray\\)\\/80 {\n background-color: var(--axebow-light-gray);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .bg-\\(--axebow-light-gray\\)\\/80 {\n background-color: color-mix(in oklab, var(--axebow-light-gray) 80%, transparent);\n }\n }\n\n .bg-\\(--axebow-primary\\) {\n background-color: var(--axebow-primary);\n }\n\n .bg-\\(--axebow-primary-light\\) {\n background-color: var(--axebow-primary-light);\n }\n\n .bg-\\(--axebow-success\\) {\n background-color: var(--axebow-success);\n }\n\n .bg-\\(--axebow-tertiary\\), .bg-\\(--axebow-tertiary\\)\\/15 {\n background-color: var(--axebow-tertiary);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .bg-\\(--axebow-tertiary\\)\\/15 {\n background-color: color-mix(in oklab, var(--axebow-tertiary) 15%, transparent);\n }\n }\n\n .bg-\\(--axebow-warning\\) {\n background-color: var(--axebow-warning);\n }\n\n .bg-\\(--axebow-white\\) {\n background-color: var(--axebow-white);\n }\n\n .bg-\\[\\#006BFF\\] {\n background-color: #006bff;\n }\n\n .bg-\\[\\#C7DCFA\\] {\n background-color: #c7dcfa;\n }\n\n .bg-\\[var\\(--axebow-gray\\)\\] {\n background-color: var(--axebow-gray);\n }\n\n .bg-\\[var\\(--axebow-tertiary\\)\\] {\n background-color: var(--axebow-tertiary);\n }\n\n .bg-blue-50 {\n background-color: var(--color-blue-50);\n }\n\n .bg-gray-50 {\n background-color: var(--color-gray-50);\n }\n\n .bg-gray-100 {\n background-color: var(--color-gray-100);\n }\n\n .bg-gray-200 {\n background-color: var(--color-gray-200);\n }\n\n .bg-gray-400 {\n background-color: var(--color-gray-400);\n }\n\n .bg-green-50 {\n background-color: var(--color-green-50);\n }\n\n .bg-red-50 {\n background-color: var(--color-red-50);\n }\n\n .bg-sky-50 {\n background-color: var(--color-sky-50);\n }\n\n .bg-sky-100 {\n background-color: var(--color-sky-100);\n }\n\n .bg-transparent {\n background-color: #0000;\n }\n\n .bg-white {\n background-color: var(--color-white);\n }\n\n .bg-yellow-50 {\n background-color: var(--color-yellow-50);\n }\n\n .object-contain {\n object-fit: contain;\n }\n\n .p-0 {\n padding: 0;\n }\n\n .p-1 {\n padding: var(--spacing);\n }\n\n .p-2 {\n padding: calc(var(--spacing) * 2);\n }\n\n .p-3 {\n padding: calc(var(--spacing) * 3);\n }\n\n .p-3\\.25 {\n padding: calc(var(--spacing) * 3.25);\n }\n\n .p-4 {\n padding: calc(var(--spacing) * 4);\n }\n\n .p-6 {\n padding: calc(var(--spacing) * 6);\n }\n\n .px-0\\.5 {\n padding-inline: calc(var(--spacing) * .5);\n }\n\n .px-1 {\n padding-inline: var(--spacing);\n }\n\n .px-1\\.5 {\n padding-inline: calc(var(--spacing) * 1.5);\n }\n\n .px-2 {\n padding-inline: calc(var(--spacing) * 2);\n }\n\n .px-3 {\n padding-inline: calc(var(--spacing) * 3);\n }\n\n .px-3\\.5 {\n padding-inline: calc(var(--spacing) * 3.5);\n }\n\n .px-4 {\n padding-inline: calc(var(--spacing) * 4);\n }\n\n .px-5 {\n padding-inline: calc(var(--spacing) * 5);\n }\n\n .py-0\\.5 {\n padding-block: calc(var(--spacing) * .5);\n }\n\n .py-1 {\n padding-block: var(--spacing);\n }\n\n .py-1\\.5 {\n padding-block: calc(var(--spacing) * 1.5);\n }\n\n .py-1\\.25 {\n padding-block: calc(var(--spacing) * 1.25);\n }\n\n .py-2 {\n padding-block: calc(var(--spacing) * 2);\n }\n\n .py-2\\.5 {\n padding-block: calc(var(--spacing) * 2.5);\n }\n\n .py-2\\.75 {\n padding-block: calc(var(--spacing) * 2.75);\n }\n\n .py-3 {\n padding-block: calc(var(--spacing) * 3);\n }\n\n .py-8 {\n padding-block: calc(var(--spacing) * 8);\n }\n\n .ps-4 {\n padding-inline-start: calc(var(--spacing) * 4);\n }\n\n .ps-8 {\n padding-inline-start: calc(var(--spacing) * 8);\n }\n\n .pe-4 {\n padding-inline-end: calc(var(--spacing) * 4);\n }\n\n .pt-0\\.5 {\n padding-top: calc(var(--spacing) * .5);\n }\n\n .pt-1 {\n padding-top: var(--spacing);\n }\n\n .pt-2 {\n padding-top: calc(var(--spacing) * 2);\n }\n\n .pt-3 {\n padding-top: calc(var(--spacing) * 3);\n }\n\n .pt-4 {\n padding-top: calc(var(--spacing) * 4);\n }\n\n .pt-6 {\n padding-top: calc(var(--spacing) * 6);\n }\n\n .pt-8 {\n padding-top: calc(var(--spacing) * 8);\n }\n\n .pt-px {\n padding-top: 1px;\n }\n\n .pr-1 {\n padding-right: var(--spacing);\n }\n\n .pr-2 {\n padding-right: calc(var(--spacing) * 2);\n }\n\n .pr-4 {\n padding-right: calc(var(--spacing) * 4);\n }\n\n .pr-4\\.5 {\n padding-right: calc(var(--spacing) * 4.5);\n }\n\n .pr-5 {\n padding-right: calc(var(--spacing) * 5);\n }\n\n .pb-2 {\n padding-bottom: calc(var(--spacing) * 2);\n }\n\n .pb-3\\.5 {\n padding-bottom: calc(var(--spacing) * 3.5);\n }\n\n .pb-4 {\n padding-bottom: calc(var(--spacing) * 4);\n }\n\n .pb-6 {\n padding-bottom: calc(var(--spacing) * 6);\n }\n\n .pl-1 {\n padding-left: var(--spacing);\n }\n\n .pl-1\\.5 {\n padding-left: calc(var(--spacing) * 1.5);\n }\n\n .pl-2 {\n padding-left: calc(var(--spacing) * 2);\n }\n\n .pl-4 {\n padding-left: calc(var(--spacing) * 4);\n }\n\n .pl-5 {\n padding-left: calc(var(--spacing) * 5);\n }\n\n .pl-6 {\n padding-left: calc(var(--spacing) * 6);\n }\n\n .pl-11\\.75 {\n padding-left: calc(var(--spacing) * 11.75);\n }\n\n .pl-px {\n padding-left: 1px;\n }\n\n .text-center {\n text-align: center;\n }\n\n .text-left {\n text-align: left;\n }\n\n .text-right {\n text-align: right;\n }\n\n .text-start {\n text-align: start;\n }\n\n .align-middle {\n vertical-align: middle;\n }\n\n .font-\\[Material_Symbols_Outlined\\] {\n font-family: Material Symbols Outlined;\n }\n\n .font-\\[inherit\\] {\n font-family: inherit;\n }\n\n .text-base {\n font-size: var(--text-base);\n line-height: var(--tw-leading, var(--text-base--line-height));\n }\n\n .text-lg {\n font-size: var(--text-lg);\n line-height: var(--tw-leading, var(--text-lg--line-height));\n }\n\n .text-md {\n font-size: var(--text-md);\n line-height: var(--tw-leading, var(--text-md--line-height));\n }\n\n .text-sm {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n\n .text-xl {\n font-size: var(--text-xl);\n line-height: var(--tw-leading, var(--text-xl--line-height));\n }\n\n .text-xs {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n\n .text-\\[0\\.9375rem\\] {\n font-size: .9375rem;\n }\n\n .text-\\[18px\\] {\n font-size: 18px;\n }\n\n .leading-3\\.5 {\n --tw-leading: calc(var(--spacing) * 3.5);\n line-height: calc(var(--spacing) * 3.5);\n }\n\n .leading-4\\.25 {\n --tw-leading: calc(var(--spacing) * 4.25);\n line-height: calc(var(--spacing) * 4.25);\n }\n\n .leading-\\[1\\.0625rem\\] {\n --tw-leading: 1.0625rem;\n line-height: 1.0625rem;\n }\n\n .leading-\\[1\\.21875rem\\] {\n --tw-leading: 1.21875rem;\n line-height: 1.21875rem;\n }\n\n .leading-none {\n --tw-leading: 1;\n line-height: 1;\n }\n\n .leading-relaxed {\n --tw-leading: var(--leading-relaxed);\n line-height: var(--leading-relaxed);\n }\n\n .leading-snug {\n --tw-leading: var(--leading-snug);\n line-height: var(--leading-snug);\n }\n\n .leading-tight {\n --tw-leading: var(--leading-tight);\n line-height: var(--leading-tight);\n }\n\n .font-black {\n --tw-font-weight: var(--font-weight-black);\n font-weight: var(--font-weight-black);\n }\n\n .font-bold {\n --tw-font-weight: var(--font-weight-bold);\n font-weight: var(--font-weight-bold);\n }\n\n .font-medium {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n\n .font-normal {\n --tw-font-weight: var(--font-weight-normal);\n font-weight: var(--font-weight-normal);\n }\n\n .font-semibold {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n\n .tracking-wider {\n --tw-tracking: var(--tracking-wider);\n letter-spacing: var(--tracking-wider);\n }\n\n .tracking-widest {\n --tw-tracking: var(--tracking-widest);\n letter-spacing: var(--tracking-widest);\n }\n\n .wrap-break-word {\n overflow-wrap: break-word;\n }\n\n .text-ellipsis {\n text-overflow: ellipsis;\n }\n\n .whitespace-nowrap {\n white-space: nowrap;\n }\n\n .text-\\(--axebow-anti-flash-white\\) {\n color: var(--axebow-anti-flash-white);\n }\n\n .text-\\(--axebow-black\\) {\n color: var(--axebow-black);\n }\n\n .text-\\(--axebow-error\\) {\n color: var(--axebow-error);\n }\n\n .text-\\(--axebow-gray\\) {\n color: var(--axebow-gray);\n }\n\n .text-\\(--axebow-primary\\) {\n color: var(--axebow-primary);\n }\n\n .text-\\(--axebow-rich-black\\) {\n color: var(--axebow-rich-black);\n }\n\n .text-\\(--axebow-secondary\\) {\n color: var(--axebow-secondary);\n }\n\n .text-\\(--axebow-tertiary\\) {\n color: var(--axebow-tertiary);\n }\n\n .text-\\[\\#006BFF\\] {\n color: #006bff;\n }\n\n .text-\\[\\#78787A\\] {\n color: #78787a;\n }\n\n .text-\\[\\#344966\\] {\n color: #344966;\n }\n\n .text-\\[\\#E93A3A\\] {\n color: #e93a3a;\n }\n\n .text-\\[var\\(--axebow-error\\)\\] {\n color: var(--axebow-error);\n }\n\n .text-\\[var\\(--axebow-gray\\)\\] {\n color: var(--axebow-gray);\n }\n\n .text-black {\n color: var(--color-black);\n }\n\n .text-blue-600 {\n color: var(--color-blue-600);\n }\n\n .text-blue-800 {\n color: var(--color-blue-800);\n }\n\n .text-gray-300 {\n color: var(--color-gray-300);\n }\n\n .text-gray-400 {\n color: var(--color-gray-400);\n }\n\n .text-gray-500 {\n color: var(--color-gray-500);\n }\n\n .text-gray-600 {\n color: var(--color-gray-600);\n }\n\n .text-gray-700 {\n color: var(--color-gray-700);\n }\n\n .text-gray-900 {\n color: var(--color-gray-900);\n }\n\n .text-green-600 {\n color: var(--color-green-600);\n }\n\n .text-green-800 {\n color: var(--color-green-800);\n }\n\n .text-inherit {\n color: inherit;\n }\n\n .text-red-500 {\n color: var(--color-red-500);\n }\n\n .text-white {\n color: var(--color-white);\n }\n\n .text-yellow-600 {\n color: var(--color-yellow-600);\n }\n\n .text-yellow-800 {\n color: var(--color-yellow-800);\n }\n\n .capitalize {\n text-transform: capitalize;\n }\n\n .uppercase {\n text-transform: uppercase;\n }\n\n .italic {\n font-style: italic;\n }\n\n .no-underline {\n text-decoration-line: none;\n }\n\n .underline {\n text-decoration-line: underline;\n }\n\n .decoration-\\(--axebow-error\\) {\n -webkit-text-decoration-color: var(--axebow-error);\n -webkit-text-decoration-color: var(--axebow-error);\n text-decoration-color: var(--axebow-error);\n }\n\n .placeholder-gray-400::placeholder {\n color: var(--color-gray-400);\n }\n\n .opacity-0 {\n opacity: 0;\n }\n\n .opacity-50 {\n opacity: .5;\n }\n\n .opacity-70 {\n opacity: .7;\n }\n\n .opacity-100 {\n opacity: 1;\n }\n\n .shadow {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-\\[0_-8px_8px_-8px_rgba\\(13\\,24\\,33\\,0\\.15\\)\\] {\n --tw-shadow: 0 -8px 8px -8px var(--tw-shadow-color, #0d182126);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-\\[0_2px_6px_rgba\\(0\\,0\\,0\\,0\\.2\\)\\] {\n --tw-shadow: 0 2px 6px var(--tw-shadow-color, #0003);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-\\[0_6px_16px_rgba\\(13\\,24\\,33\\,0\\.18\\)\\] {\n --tw-shadow: 0 6px 16px var(--tw-shadow-color, #0d18212e);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-\\[2px_2px_25px_0px_rgba\\(0\\,0\\,0\\,0\\.1\\)\\] {\n --tw-shadow: 2px 2px 25px 0px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-lg {\n --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-md {\n --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-none {\n --tw-shadow: 0 0 #0000;\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-sm {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .axebow-shadow-hover {\n transition: box-shadow .2s ease-in-out;\n }\n\n .axebow-shadow-hover:hover {\n box-shadow: 0 4px 12px #0d182114;\n }\n\n .outline {\n outline-style: var(--tw-outline-style);\n outline-width: 1px;\n }\n\n .grayscale {\n --tw-grayscale: grayscale(100%);\n filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );\n }\n\n .filter {\n filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );\n }\n\n .transition {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-\\[filter\\] {\n transition-property: filter;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-all {\n transition-property: all;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-colors {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-opacity {\n transition-property: opacity;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-shadow {\n transition-property: box-shadow;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-transform {\n transition-property: transform, translate, scale, rotate;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .delay-100 {\n transition-delay: .1s;\n }\n\n .duration-120 {\n --tw-duration: .12s;\n transition-duration: .12s;\n }\n\n .duration-150 {\n --tw-duration: .15s;\n transition-duration: .15s;\n }\n\n .duration-200 {\n --tw-duration: .2s;\n transition-duration: .2s;\n }\n\n .duration-300 {\n --tw-duration: .3s;\n transition-duration: .3s;\n }\n\n .ease-in-out {\n --tw-ease: var(--ease-in-out);\n transition-timing-function: var(--ease-in-out);\n }\n\n .ease-out {\n --tw-ease: var(--ease-out);\n transition-timing-function: var(--ease-out);\n }\n\n .outline-none {\n --tw-outline-style: none;\n outline-style: none;\n }\n\n .select-none {\n -webkit-user-select: none;\n user-select: none;\n }\n\n .\\[font-variation-settings\\:\\'FILL\\'_0\\,\\'wght\\'_400\\,\\'GRAD\\'_0\\,\\'opsz\\'_24\\] {\n font-variation-settings: \"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24;\n }\n\n .\\[font-variation-settings\\:\\'FILL\\'_1\\,\\'wght\\'_400\\,\\'GRAD\\'_0\\,\\'opsz\\'_24\\] {\n font-variation-settings: \"FILL\" 1,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24;\n }\n\n .\\[writing-mode\\:vertical-lr\\] {\n writing-mode: vertical-lr;\n }\n\n @media (hover: hover) {\n .group-hover\\:-translate-x-1:is(:where(.group):hover *) {\n --tw-translate-x: calc(var(--spacing) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .group-hover\\:translate-x-0:is(:where(.group):hover *) {\n --tw-translate-x: 0;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .group-hover\\:rotate-15:is(:where(.group):hover *) {\n rotate: 15deg;\n }\n\n .group-hover\\:font-semibold:is(:where(.group):hover *) {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n\n .group-hover\\:text-\\(--axebow-primary\\):is(:where(.group):hover *) {\n color: var(--axebow-primary);\n }\n\n .group-hover\\:text-red-500:is(:where(.group):hover *) {\n color: var(--color-red-500);\n }\n\n .group-hover\\:opacity-100:is(:where(.group):hover *) {\n opacity: 1;\n }\n\n .group-hover\\:invert:is(:where(.group):hover *) {\n --tw-invert: invert(100%);\n filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );\n }\n }\n\n .focus-within\\:border-blue-500:focus-within {\n border-color: var(--color-blue-500);\n }\n\n .focus-within\\:ring-2:focus-within {\n --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .focus-within\\:ring-blue-100:focus-within {\n --tw-ring-color: var(--color-blue-100);\n }\n\n @media (hover: hover) {\n .hover\\:scale-105:hover {\n --tw-scale-x: 105%;\n --tw-scale-y: 105%;\n --tw-scale-z: 105%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n\n .hover\\:rounded-md:hover {\n border-radius: var(--radius-md);\n }\n\n .hover\\:border-2:hover {\n border-style: var(--tw-border-style);\n border-width: 2px;\n }\n\n .hover\\:border-solid:hover {\n --tw-border-style: solid;\n border-style: solid;\n }\n\n .hover\\:border-\\(--axebow-gray\\):hover {\n border-color: var(--axebow-gray);\n }\n\n .hover\\:border-\\(--axebow-primary\\):hover {\n border-color: var(--axebow-primary);\n }\n\n .hover\\:border-\\(--axebow-tertiary\\):hover, .hover\\:border-\\[var\\(--axebow-tertiary\\)\\]:hover {\n border-color: var(--axebow-tertiary);\n }\n\n .hover\\:border-red-300:hover {\n border-color: var(--color-red-300);\n }\n\n .hover\\:bg-\\(--axebow-anti-flash-white\\):hover {\n background-color: var(--axebow-anti-flash-white);\n }\n\n .hover\\:bg-\\(--axebow-base\\):hover {\n background-color: var(--axebow-base);\n }\n\n .hover\\:bg-\\(--axebow-gray\\):hover {\n background-color: var(--axebow-gray);\n }\n\n .hover\\:bg-\\(--axebow-light-gray\\):hover {\n background-color: var(--axebow-light-gray);\n }\n\n .hover\\:bg-\\(--axebow-primary\\):hover {\n background-color: var(--axebow-primary);\n }\n\n .hover\\:bg-\\[var\\(--axebow-anti-flash-white\\)\\]:hover {\n background-color: var(--axebow-anti-flash-white);\n }\n\n .hover\\:bg-gray-50:hover {\n background-color: var(--color-gray-50);\n }\n\n .hover\\:bg-gray-100:hover {\n background-color: var(--color-gray-100);\n }\n\n .hover\\:bg-gray-200:hover {\n background-color: var(--color-gray-200);\n }\n\n .hover\\:bg-red-50:hover {\n background-color: var(--color-red-50);\n }\n\n .hover\\:bg-white:hover {\n background-color: var(--color-white);\n }\n\n .hover\\:px-\\[1\\.375rem\\]:hover {\n padding-inline: 1.375rem;\n }\n\n .hover\\:text-\\(--axebow-primary\\):hover {\n color: var(--axebow-primary);\n }\n\n .hover\\:text-\\(--axebow-tertiary\\):hover {\n color: var(--axebow-tertiary);\n }\n\n .hover\\:text-\\[var\\(--axebow-gray\\)\\]:hover {\n color: var(--axebow-gray);\n }\n\n .hover\\:text-black:hover {\n color: var(--color-black);\n }\n\n .hover\\:text-gray-700:hover {\n color: var(--color-gray-700);\n }\n\n .hover\\:text-red-600:hover {\n color: var(--color-red-600);\n }\n\n .hover\\:underline:hover {\n text-decoration-line: underline;\n }\n\n .hover\\:opacity-80:hover {\n opacity: .8;\n }\n\n .hover\\:opacity-100:hover {\n opacity: 1;\n }\n\n .hover\\:shadow-\\[0_2px_6px_rgba\\(13\\,24\\,33\\,0\\.14\\)\\]:hover {\n --tw-shadow: 0 2px 6px var(--tw-shadow-color, #0d182124);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .hover\\:shadow-\\[0_4px_12px_0_rgba\\(13\\,24\\,33\\,0\\.08\\)\\]:hover {\n --tw-shadow: 0 4px 12px 0 var(--tw-shadow-color, #0d182114);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .hover\\:shadow-lg:hover {\n --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n\n .focus\\:outline-2:focus {\n outline-style: var(--tw-outline-style);\n outline-width: 2px;\n }\n\n .focus\\:outline-offset-1:focus {\n outline-offset: 1px;\n }\n\n .focus\\:outline-blue-500:focus {\n outline-color: var(--color-blue-500);\n }\n\n .focus\\:outline-none:focus {\n --tw-outline-style: none;\n outline-style: none;\n }\n\n .focus-visible\\:ring-2:focus-visible {\n --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .focus-visible\\:ring-\\[\\#006BFF\\]:focus-visible {\n --tw-ring-color: #006bff;\n }\n\n .focus-visible\\:outline-2:focus-visible {\n outline-style: var(--tw-outline-style);\n outline-width: 2px;\n }\n\n .focus-visible\\:outline-\\(--axebow-tertiary\\):focus-visible {\n outline-color: var(--axebow-tertiary);\n }\n\n .active\\:cursor-grabbing:active {\n cursor: grabbing;\n }\n\n .disabled\\:pointer-events-none:disabled {\n pointer-events: none;\n }\n\n .disabled\\:cursor-not-allowed:disabled {\n cursor: not-allowed;\n }\n\n .disabled\\:opacity-50:disabled {\n opacity: .5;\n }\n\n @media (min-width: 48rem) {\n .md\\:gap-8 {\n gap: calc(var(--spacing) * 8);\n }\n }\n\n @media (min-width: 64rem) {\n .lg\\:sticky {\n position: sticky;\n }\n\n .lg\\:block {\n display: block;\n }\n\n .lg\\:flex {\n display: flex;\n }\n\n .lg\\:hidden {\n display: none;\n }\n\n .lg\\:inline {\n display: inline;\n }\n\n .lg\\:inline-flex {\n display: inline-flex;\n }\n\n .lg\\:h-full {\n height: 100%;\n }\n\n .lg\\:min-h-\\[calc\\(100vh-6\\.25rem\\)\\] {\n min-height: calc(100vh - 6.25rem);\n }\n\n .lg\\:w-96\\.5 {\n width: calc(var(--spacing) * 96.5);\n }\n\n .lg\\:cursor-default {\n cursor: default;\n }\n\n .lg\\:rounded-xl {\n border-radius: var(--radius-xl);\n }\n\n .lg\\:border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n\n .lg\\:text-base {\n font-size: var(--text-base);\n line-height: var(--tw-leading, var(--text-base--line-height));\n }\n\n .lg\\:text-lg {\n font-size: var(--text-lg);\n line-height: var(--tw-leading, var(--text-lg--line-height));\n }\n\n .lg\\:shadow {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n}\n\n:host {\n font-family: var(--font-sans);\n font-size: var(--text-base);\n line-height: var(--text-base--line-height);\n --font-sans: \"Open Sans\", sans-serif;\n --text-xs: .625rem;\n --text-xs--line-height: .875rem;\n --text-sm: .75rem;\n --text-sm--line-height: 1rem;\n --text-base: .875rem;\n --text-base--line-height: 1.25rem;\n --text-md: 1rem;\n --text-md--line-height: 1.5rem;\n --text-lg: 1.125rem;\n --text-lg--line-height: 1.75rem;\n --text-xl: 1.25rem;\n --text-xl--line-height: 1.75rem;\n --text-2xl: 1.5rem;\n --text-2xl--line-height: 2rem;\n --text-3xl: 1.875rem;\n --text-3xl--line-height: 2.25rem;\n --text-4xl: 2.25rem;\n --text-4xl--line-height: 2.5rem;\n --text-5xl: 3rem;\n --text-5xl--line-height: 1;\n --text-6xl: 3.75rem;\n --text-6xl--line-height: 1;\n --text-7xl: 4.5rem;\n --text-7xl--line-height: 1;\n --text-8xl: 4.625rem;\n --text-8xl--line-height: 1;\n --text-9xl: 6.125rem;\n --text-9xl--line-height: 1;\n}\n\n:root {\n --sl-font-sans: \"Open Sans\", sans-serif;\n --sl-font-size-2x-small: var(--text-xs);\n --sl-font-size-x-small: var(--text-xs);\n --sl-font-size-small: var(--text-sm);\n --sl-font-size-medium: var(--text-base);\n --sl-font-size-large: var(--text-md);\n --sl-font-size-x-large: var(--text-lg);\n --sl-font-size-2x-large: var(--text-xl);\n --sl-font-size-3x-large: var(--text-3xl);\n --sl-font-size-4x-large: var(--text-5xl);\n --sl-input-font-size-small: var(--text-sm);\n --sl-input-font-size-medium: var(--text-base);\n --sl-input-font-size-large: var(--text-md);\n --sl-button-font-size-small: var(--text-sm);\n --sl-button-font-size-medium: var(--text-base);\n --sl-button-font-size-large: var(--text-md);\n --sl-tooltip-font-size: var(--text-base);\n}\n\nbutton, input, select, textarea {\n font-family: inherit;\n font-size: inherit;\n}\n\ninput, select, textarea, sl-menu-item::part(label), sl-option::part(label) {\n font-size: var(--text-base);\n}\n\n.axebow-blue-button::part(base) {\n background-color: var(--axebow-tertiary);\n}\n\n.info-container-page {\n flex-wrap: wrap;\n gap: 2rem;\n display: flex;\n}\n\nsl-divider {\n background: var(--axebow-light-gray);\n height: 1px;\n margin-top: .5rem;\n margin-bottom: .5rem;\n}\n\n.axebow-shadow {\n box-shadow: 2px 2px 25px #0000001a;\n}\n\n@property --tw-translate-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-translate-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-translate-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-rotate-x {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-rotate-y {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-rotate-z {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-skew-x {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-skew-y {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-space-y-reverse {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-border-style {\n syntax: \"*\";\n inherits: false;\n initial-value: solid;\n}\n\n@property --tw-leading {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-font-weight {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-tracking {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-shadow-color {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n\n@property --tw-inset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-inset-shadow-color {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-inset-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n\n@property --tw-ring-color {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-inset-ring-color {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-inset-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-ring-inset {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-ring-offset-width {\n syntax: \"<length>\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-ring-offset-color {\n syntax: \"*\";\n inherits: false;\n initial-value: #fff;\n}\n\n@property --tw-ring-offset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-outline-style {\n syntax: \"*\";\n inherits: false;\n initial-value: solid;\n}\n\n@property --tw-blur {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-brightness {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-contrast {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-grayscale {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-hue-rotate {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-invert {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-opacity {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-saturate {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-sepia {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-drop-shadow {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-drop-shadow-color {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-drop-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n\n@property --tw-drop-shadow-size {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-duration {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-ease {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-scale-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 1;\n}\n\n@property --tw-scale-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 1;\n}\n\n@property --tw-scale-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 1;\n}\n";
|
|
127
|
+
var tailwind_default = "/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n@layer properties {\n @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {\n *, :before, :after, ::backdrop {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-rotate-x: initial;\n --tw-rotate-y: initial;\n --tw-rotate-z: initial;\n --tw-skew-x: initial;\n --tw-skew-y: initial;\n --tw-space-y-reverse: 0;\n --tw-border-style: solid;\n --tw-leading: initial;\n --tw-font-weight: initial;\n --tw-tracking: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-outline-style: solid;\n --tw-blur: initial;\n --tw-brightness: initial;\n --tw-contrast: initial;\n --tw-grayscale: initial;\n --tw-hue-rotate: initial;\n --tw-invert: initial;\n --tw-opacity: initial;\n --tw-saturate: initial;\n --tw-sepia: initial;\n --tw-drop-shadow: initial;\n --tw-drop-shadow-color: initial;\n --tw-drop-shadow-alpha: 100%;\n --tw-drop-shadow-size: initial;\n --tw-duration: initial;\n --tw-ease: initial;\n }\n }\n}\n\n@layer theme {\n :root, :host {\n --font-sans: \"Open Sans\", sans-serif;\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n \"Courier New\", monospace;\n --color-red-50: oklch(97.1% .013 17.38);\n --color-red-200: oklch(88.5% .062 18.334);\n --color-red-300: oklch(80.8% .114 19.571);\n --color-red-500: oklch(63.7% .237 25.331);\n --color-red-600: oklch(57.7% .245 27.325);\n --color-yellow-50: oklch(98.7% .026 102.212);\n --color-yellow-200: oklch(94.5% .129 101.54);\n --color-yellow-600: oklch(68.1% .162 75.834);\n --color-yellow-800: oklch(47.6% .114 61.907);\n --color-green-50: oklch(98.2% .018 155.826);\n --color-green-200: oklch(92.5% .084 155.995);\n --color-green-600: oklch(62.7% .194 149.214);\n --color-green-800: oklch(44.8% .119 151.328);\n --color-sky-50: oklch(97.7% .013 236.62);\n --color-sky-100: oklch(95.1% .026 236.824);\n --color-blue-50: oklch(97% .014 254.604);\n --color-blue-100: oklch(93.2% .032 255.585);\n --color-blue-200: oklch(88.2% .059 254.128);\n --color-blue-500: oklch(62.3% .214 259.815);\n --color-blue-600: oklch(54.6% .245 262.881);\n --color-blue-800: oklch(42.4% .199 265.638);\n --color-gray-50: oklch(98.5% .002 247.839);\n --color-gray-100: oklch(96.7% .003 264.542);\n --color-gray-200: oklch(92.8% .006 264.531);\n --color-gray-300: oklch(87.2% .01 258.338);\n --color-gray-400: oklch(70.7% .022 261.325);\n --color-gray-500: oklch(55.1% .027 264.364);\n --color-gray-600: oklch(44.6% .03 256.802);\n --color-gray-700: oklch(37.3% .034 259.733);\n --color-gray-900: oklch(21% .034 264.665);\n --color-black: #000;\n --color-white: #fff;\n --spacing: .25rem;\n --text-xs: .625rem;\n --text-xs--line-height: .875rem;\n --text-sm: .75rem;\n --text-sm--line-height: 1rem;\n --text-base: .875rem;\n --text-base--line-height: 1.25rem;\n --text-lg: 1.125rem;\n --text-lg--line-height: 1.75rem;\n --text-xl: 1.25rem;\n --text-xl--line-height: 1.75rem;\n --text-3xl: 1.875rem;\n --text-5xl: 3rem;\n --font-weight-normal: 400;\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --font-weight-black: 900;\n --tracking-wider: .05em;\n --tracking-widest: .1em;\n --leading-tight: 1.25;\n --leading-snug: 1.375;\n --radius-sm: .25rem;\n --radius-md: .375rem;\n --radius-lg: .5rem;\n --radius-xl: .75rem;\n --radius-2xl: 1rem;\n --ease-in-out: cubic-bezier(.4, 0, .2, 1);\n --default-transition-duration: .15s;\n --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n --default-font-family: var(--font-sans);\n --default-mono-font-family: var(--font-mono);\n --text-md: 1rem;\n --text-md--line-height: 1.5rem;\n --spacing-18: 4.5rem;\n --spacing-30: 7.5rem;\n --spacing-38: 9.5rem;\n --spacing-43: 10.75rem;\n --spacing-75: 18.75rem;\n --spacing-117: 29.25rem;\n --spacing-120: 30rem;\n }\n}\n\n@layer base {\n *, :after, :before, ::backdrop {\n box-sizing: border-box;\n border: 0 solid;\n margin: 0;\n padding: 0;\n }\n\n ::file-selector-button {\n box-sizing: border-box;\n border: 0 solid;\n margin: 0;\n padding: 0;\n }\n\n html, :host {\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n line-height: 1.5;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n -webkit-text-decoration: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n\n b, strong {\n font-weight: bolder;\n }\n\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n\n small {\n font-size: 80%;\n }\n\n sub, sup {\n vertical-align: baseline;\n font-size: 75%;\n line-height: 0;\n position: relative;\n }\n\n sub {\n bottom: -.25em;\n }\n\n sup {\n top: -.5em;\n }\n\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n\n :-moz-focusring {\n outline: auto;\n }\n\n progress {\n vertical-align: baseline;\n }\n\n summary {\n display: list-item;\n }\n\n ol, ul, menu {\n list-style: none;\n }\n\n img, svg, video, canvas, audio, iframe, embed, object {\n vertical-align: middle;\n display: block;\n }\n\n img, video {\n max-width: 100%;\n height: auto;\n }\n\n button, input, select, optgroup, textarea {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n opacity: 1;\n background-color: #0000;\n border-radius: 0;\n }\n\n ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n opacity: 1;\n background-color: #0000;\n border-radius: 0;\n }\n\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n\n ::placeholder {\n opacity: 1;\n }\n\n @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentColor;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n ::placeholder {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n\n textarea {\n resize: vertical;\n }\n\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n\n ::-webkit-datetime-edit {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-year-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-month-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-day-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-hour-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-minute-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-second-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-millisecond-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n\n ::-webkit-calendar-picker-indicator {\n line-height: 1;\n }\n\n :-moz-ui-invalid {\n box-shadow: none;\n }\n\n button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]) {\n appearance: button;\n }\n\n ::file-selector-button {\n appearance: button;\n }\n\n ::-webkit-inner-spin-button {\n height: auto;\n }\n\n ::-webkit-outer-spin-button {\n height: auto;\n }\n\n [hidden]:where(:not([hidden=\"until-found\"])) {\n display: none !important;\n }\n}\n\n@layer components;\n\n@layer utilities {\n .pointer-events-none {\n pointer-events: none;\n }\n\n .visible {\n visibility: visible;\n }\n\n .absolute {\n position: absolute;\n }\n\n .fixed {\n position: fixed;\n }\n\n .relative {\n position: relative;\n }\n\n .static {\n position: static;\n }\n\n .top-0 {\n top: 0;\n }\n\n .top-1\\/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-30 {\n top: var(--spacing-30);\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\\.5 {\n right: calc(var(--spacing) * 1.5);\n }\n\n .right-3 {\n right: calc(var(--spacing) * 3);\n }\n\n .right-\\[calc\\(100\\%\\+10px\\)\\] {\n right: calc(100% + 10px);\n }\n\n .bottom-0 {\n bottom: 0;\n }\n\n .bottom-0\\.5 {\n bottom: calc(var(--spacing) * .5);\n }\n\n .bottom-full {\n bottom: 100%;\n }\n\n .left-0 {\n left: 0;\n }\n\n .left-1\\/2 {\n left: 50%;\n }\n\n .left-\\[-7px\\] {\n left: -7px;\n }\n\n .left-full {\n left: 100%;\n }\n\n .z-5 {\n z-index: 5;\n }\n\n .z-10 {\n z-index: 10;\n }\n\n .z-100 {\n z-index: 100;\n }\n\n .z-2000 {\n z-index: 2000;\n }\n\n .z-2001 {\n z-index: 2001;\n }\n\n .z-9999 {\n z-index: 9999;\n }\n\n .container {\n width: 100%;\n }\n\n @media (min-width: 40rem) {\n .container {\n max-width: 40rem;\n }\n }\n\n @media (min-width: 48rem) {\n .container {\n max-width: 48rem;\n }\n }\n\n @media (min-width: 64rem) {\n .container {\n max-width: 64rem;\n }\n }\n\n @media (min-width: 80rem) {\n .container {\n max-width: 80rem;\n }\n }\n\n @media (min-width: 96rem) {\n .container {\n max-width: 96rem;\n }\n }\n\n .m-0 {\n margin: 0;\n }\n\n .mx-2 {\n margin-inline: calc(var(--spacing) * 2);\n }\n\n .mx-6 {\n margin-inline: calc(var(--spacing) * 6);\n }\n\n .mx-12 {\n margin-inline: calc(var(--spacing) * 12);\n }\n\n .mx-auto {\n margin-inline: auto;\n }\n\n .my-0\\.5 {\n margin-block: calc(var(--spacing) * .5);\n }\n\n .my-2 {\n margin-block: calc(var(--spacing) * 2);\n }\n\n .my-4 {\n margin-block: calc(var(--spacing) * 4);\n }\n\n .ms-auto {\n margin-inline-start: auto;\n }\n\n .mt-0 {\n margin-top: 0;\n }\n\n .mt-1 {\n margin-top: var(--spacing);\n }\n\n .mt-1\\.5 {\n margin-top: calc(var(--spacing) * 1.5);\n }\n\n .mt-1\\.75 {\n margin-top: calc(var(--spacing) * 1.75);\n }\n\n .mt-2 {\n margin-top: calc(var(--spacing) * 2);\n }\n\n .mt-2\\.25 {\n margin-top: calc(var(--spacing) * 2.25);\n }\n\n .mt-4 {\n margin-top: calc(var(--spacing) * 4);\n }\n\n .mt-5 {\n margin-top: calc(var(--spacing) * 5);\n }\n\n .mt-6 {\n margin-top: calc(var(--spacing) * 6);\n }\n\n .mt-8 {\n margin-top: calc(var(--spacing) * 8);\n }\n\n .mr-2 {\n margin-right: calc(var(--spacing) * 2);\n }\n\n .mr-4 {\n margin-right: calc(var(--spacing) * 4);\n }\n\n .mb-1 {\n margin-bottom: var(--spacing);\n }\n\n .mb-1\\.5 {\n margin-bottom: calc(var(--spacing) * 1.5);\n }\n\n .mb-2 {\n margin-bottom: calc(var(--spacing) * 2);\n }\n\n .mb-3 {\n margin-bottom: calc(var(--spacing) * 3);\n }\n\n .mb-4 {\n margin-bottom: calc(var(--spacing) * 4);\n }\n\n .mb-6 {\n margin-bottom: calc(var(--spacing) * 6);\n }\n\n .mb-6\\.5 {\n margin-bottom: calc(var(--spacing) * 6.5);\n }\n\n .mb-8 {\n margin-bottom: calc(var(--spacing) * 8);\n }\n\n .ml-2 {\n margin-left: calc(var(--spacing) * 2);\n }\n\n .ml-4 {\n margin-left: calc(var(--spacing) * 4);\n }\n\n .ml-12 {\n margin-left: calc(var(--spacing) * 12);\n }\n\n .ml-auto {\n margin-left: auto;\n }\n\n .box-border {\n box-sizing: border-box;\n }\n\n .box-content {\n box-sizing: content-box;\n }\n\n .line-clamp-1 {\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n overflow: hidden;\n }\n\n .line-clamp-2 {\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n overflow: hidden;\n }\n\n .line-clamp-11 {\n -webkit-line-clamp: 11;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n overflow: hidden;\n }\n\n .\\!hidden {\n display: none !important;\n }\n\n .block {\n display: block;\n }\n\n .contents {\n display: contents;\n }\n\n .flex {\n display: flex;\n }\n\n .grid {\n display: grid;\n }\n\n .hidden {\n display: none;\n }\n\n .inline {\n display: inline;\n }\n\n .inline-block {\n display: inline-block;\n }\n\n .inline-flex {\n display: inline-flex;\n }\n\n .table {\n display: table;\n }\n\n .aspect-square {\n aspect-ratio: 1;\n }\n\n .h-2 {\n height: calc(var(--spacing) * 2);\n }\n\n .h-2\\.25 {\n height: calc(var(--spacing) * 2.25);\n }\n\n .h-2\\.75 {\n height: calc(var(--spacing) * 2.75);\n }\n\n .h-3 {\n height: calc(var(--spacing) * 3);\n }\n\n .h-3\\.5 {\n height: calc(var(--spacing) * 3.5);\n }\n\n .h-4 {\n height: calc(var(--spacing) * 4);\n }\n\n .h-4\\.5 {\n height: calc(var(--spacing) * 4.5);\n }\n\n .h-4\\.25 {\n height: calc(var(--spacing) * 4.25);\n }\n\n .h-5 {\n height: calc(var(--spacing) * 5);\n }\n\n .h-5\\.5 {\n height: calc(var(--spacing) * 5.5);\n }\n\n .h-5\\.25 {\n height: calc(var(--spacing) * 5.25);\n }\n\n .h-6 {\n height: calc(var(--spacing) * 6);\n }\n\n .h-7 {\n height: calc(var(--spacing) * 7);\n }\n\n .h-7\\.5 {\n height: calc(var(--spacing) * 7.5);\n }\n\n .h-7\\.25 {\n height: calc(var(--spacing) * 7.25);\n }\n\n .h-8 {\n height: calc(var(--spacing) * 8);\n }\n\n .h-8\\.75 {\n height: calc(var(--spacing) * 8.75);\n }\n\n .h-9 {\n height: calc(var(--spacing) * 9);\n }\n\n .h-9\\.5 {\n height: calc(var(--spacing) * 9.5);\n }\n\n .h-9\\.75 {\n height: calc(var(--spacing) * 9.75);\n }\n\n .h-10 {\n height: calc(var(--spacing) * 10);\n }\n\n .h-10\\.5 {\n height: calc(var(--spacing) * 10.5);\n }\n\n .h-11 {\n height: calc(var(--spacing) * 11);\n }\n\n .h-11\\.5 {\n height: calc(var(--spacing) * 11.5);\n }\n\n .h-11\\.25 {\n height: calc(var(--spacing) * 11.25);\n }\n\n .h-12 {\n height: calc(var(--spacing) * 12);\n }\n\n .h-12\\.5 {\n height: calc(var(--spacing) * 12.5);\n }\n\n .h-12\\.25 {\n height: calc(var(--spacing) * 12.25);\n }\n\n .h-12\\.75 {\n height: calc(var(--spacing) * 12.75);\n }\n\n .h-14 {\n height: calc(var(--spacing) * 14);\n }\n\n .h-14\\.25 {\n height: calc(var(--spacing) * 14.25);\n }\n\n .h-16 {\n height: calc(var(--spacing) * 16);\n }\n\n .h-17\\.75 {\n height: calc(var(--spacing) * 17.75);\n }\n\n .h-20 {\n height: calc(var(--spacing) * 20);\n }\n\n .h-21\\.25 {\n height: calc(var(--spacing) * 21.25);\n }\n\n .h-49\\.5 {\n height: calc(var(--spacing) * 49.5);\n }\n\n .h-52\\.75 {\n height: calc(var(--spacing) * 52.75);\n }\n\n .h-57\\.5 {\n height: calc(var(--spacing) * 57.5);\n }\n\n .h-77\\.25 {\n height: calc(var(--spacing) * 77.25);\n }\n\n .h-\\[0\\.0625rem\\] {\n height: .0625rem;\n }\n\n .h-\\[8\\.26375rem\\] {\n height: 8.26375rem;\n }\n\n .h-auto {\n height: auto;\n }\n\n .h-full {\n height: 100%;\n }\n\n .h-px {\n height: 1px;\n }\n\n .max-h-10 {\n max-height: calc(var(--spacing) * 10);\n }\n\n .max-h-40 {\n max-height: calc(var(--spacing) * 40);\n }\n\n .max-h-75 {\n max-height: var(--spacing-75);\n }\n\n .max-h-\\[40vh\\] {\n max-height: 40vh;\n }\n\n .max-h-full {\n max-height: 100%;\n }\n\n .min-h-0 {\n min-height: 0;\n }\n\n .min-h-5 {\n min-height: calc(var(--spacing) * 5);\n }\n\n .min-h-9 {\n min-height: calc(var(--spacing) * 9);\n }\n\n .min-h-10 {\n min-height: calc(var(--spacing) * 10);\n }\n\n .min-h-35 {\n min-height: calc(var(--spacing) * 35);\n }\n\n .min-h-102\\.5 {\n min-height: calc(var(--spacing) * 102.5);\n }\n\n .min-h-107\\.5 {\n min-height: calc(var(--spacing) * 107.5);\n }\n\n .min-h-113\\.25 {\n min-height: calc(var(--spacing) * 113.25);\n }\n\n .w-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-8 {\n width: calc(var(--spacing) * 8);\n }\n\n .w-9 {\n width: calc(var(--spacing) * 9);\n }\n\n .w-9\\.5 {\n width: calc(var(--spacing) * 9.5);\n }\n\n .w-10 {\n width: calc(var(--spacing) * 10);\n }\n\n .w-10\\.5 {\n width: calc(var(--spacing) * 10.5);\n }\n\n .w-11\\.5 {\n width: calc(var(--spacing) * 11.5);\n }\n\n .w-11\\.25 {\n width: calc(var(--spacing) * 11.25);\n }\n\n .w-12 {\n width: calc(var(--spacing) * 12);\n }\n\n .w-12\\.5 {\n width: calc(var(--spacing) * 12.5);\n }\n\n .w-15\\.25 {\n width: calc(var(--spacing) * 15.25);\n }\n\n .w-17 {\n width: calc(var(--spacing) * 17);\n }\n\n .w-18 {\n width: var(--spacing-18);\n }\n\n .w-18\\.5 {\n width: calc(var(--spacing) * 18.5);\n }\n\n .w-18\\.75 {\n width: calc(var(--spacing) * 18.75);\n }\n\n .w-20 {\n width: calc(var(--spacing) * 20);\n }\n\n .w-20\\.5 {\n width: calc(var(--spacing) * 20.5);\n }\n\n .w-21\\.5 {\n width: calc(var(--spacing) * 21.5);\n }\n\n .w-24\\.75 {\n width: calc(var(--spacing) * 24.75);\n }\n\n .w-25 {\n width: calc(var(--spacing) * 25);\n }\n\n .w-26\\.25 {\n width: calc(var(--spacing) * 26.25);\n }\n\n .w-27 {\n width: calc(var(--spacing) * 27);\n }\n\n .w-27\\.5 {\n width: calc(var(--spacing) * 27.5);\n }\n\n .w-30 {\n width: var(--spacing-30);\n }\n\n .w-35 {\n width: calc(var(--spacing) * 35);\n }\n\n .w-36 {\n width: calc(var(--spacing) * 36);\n }\n\n .w-37 {\n width: calc(var(--spacing) * 37);\n }\n\n .w-40\\.25 {\n width: calc(var(--spacing) * 40.25);\n }\n\n .w-41 {\n width: calc(var(--spacing) * 41);\n }\n\n .w-47\\.75 {\n width: calc(var(--spacing) * 47.75);\n }\n\n .w-56\\.5 {\n width: calc(var(--spacing) * 56.5);\n }\n\n .w-57\\.5 {\n width: calc(var(--spacing) * 57.5);\n }\n\n .w-60\\.5 {\n width: calc(var(--spacing) * 60.5);\n }\n\n .w-62\\.5 {\n width: calc(var(--spacing) * 62.5);\n }\n\n .w-63\\.5 {\n width: calc(var(--spacing) * 63.5);\n }\n\n .w-70\\.5 {\n width: calc(var(--spacing) * 70.5);\n }\n\n .w-71 {\n width: calc(var(--spacing) * 71);\n }\n\n .w-83\\.5 {\n width: calc(var(--spacing) * 83.5);\n }\n\n .w-87 {\n width: calc(var(--spacing) * 87);\n }\n\n .w-88\\.5 {\n width: calc(var(--spacing) * 88.5);\n }\n\n .w-91 {\n width: calc(var(--spacing) * 91);\n }\n\n .w-95 {\n width: calc(var(--spacing) * 95);\n }\n\n .w-100\\.5 {\n width: calc(var(--spacing) * 100.5);\n }\n\n .w-117 {\n width: var(--spacing-117);\n }\n\n .w-120 {\n width: var(--spacing-120);\n }\n\n .w-120\\.75 {\n width: calc(var(--spacing) * 120.75);\n }\n\n .w-121 {\n width: calc(var(--spacing) * 121);\n }\n\n .w-130\\.25 {\n width: calc(var(--spacing) * 130.25);\n }\n\n .w-131 {\n width: calc(var(--spacing) * 131);\n }\n\n .w-139 {\n width: calc(var(--spacing) * 139);\n }\n\n .w-194\\.25 {\n width: calc(var(--spacing) * 194.25);\n }\n\n .w-270 {\n width: calc(var(--spacing) * 270);\n }\n\n .w-282 {\n width: calc(var(--spacing) * 282);\n }\n\n .w-286 {\n width: calc(var(--spacing) * 286);\n }\n\n .w-294 {\n width: calc(var(--spacing) * 294);\n }\n\n .w-\\[10\\.5rem\\] {\n width: 10.5rem;\n }\n\n .w-\\[calc\\(100\\%-10px\\)\\] {\n width: calc(100% - 10px);\n }\n\n .w-full {\n width: 100%;\n }\n\n .w-px {\n width: 1px;\n }\n\n .max-w-36 {\n max-width: calc(var(--spacing) * 36);\n }\n\n .max-w-38 {\n max-width: var(--spacing-38);\n }\n\n .max-w-43 {\n max-width: var(--spacing-43);\n }\n\n .max-w-44 {\n max-width: calc(var(--spacing) * 44);\n }\n\n .max-w-51\\.5 {\n max-width: calc(var(--spacing) * 51.5);\n }\n\n .max-w-194\\.25 {\n max-width: calc(var(--spacing) * 194.25);\n }\n\n .max-w-\\[23\\.75rem\\] {\n max-width: 23.75rem;\n }\n\n .max-w-full {\n max-width: 100%;\n }\n\n .min-w-0 {\n min-width: 0;\n }\n\n .min-w-4 {\n min-width: calc(var(--spacing) * 4);\n }\n\n .min-w-20 {\n min-width: calc(var(--spacing) * 20);\n }\n\n .min-w-30 {\n min-width: var(--spacing-30);\n }\n\n .min-w-36 {\n min-width: calc(var(--spacing) * 36);\n }\n\n .min-w-44 {\n min-width: calc(var(--spacing) * 44);\n }\n\n .min-w-53\\.25 {\n min-width: calc(var(--spacing) * 53.25);\n }\n\n .min-w-55 {\n min-width: calc(var(--spacing) * 55);\n }\n\n .min-w-\\[8\\.2rem\\] {\n min-width: 8.2rem;\n }\n\n .min-w-fit {\n min-width: fit-content;\n }\n\n .flex-1 {\n flex: 1;\n }\n\n .flex-shrink {\n flex-shrink: 1;\n }\n\n .shrink-0 {\n flex-shrink: 0;\n }\n\n .-translate-x-1\\/2 {\n --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .translate-x-1 {\n --tw-translate-x: var(--spacing);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .-translate-y-1\\/2 {\n --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .scale-\\[1\\.02\\] {\n scale: 1.02;\n }\n\n .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 .resize {\n resize: both;\n }\n\n .appearance-none {\n appearance: none;\n }\n\n .grid-cols-\\[7\\.5rem_7\\.5rem_7\\.5rem\\] {\n grid-template-columns: 7.5rem 7.5rem 7.5rem;\n }\n\n .grid-cols-\\[auto_auto_1fr_auto\\] {\n grid-template-columns: auto auto 1fr auto;\n }\n\n .flex-col {\n flex-direction: column;\n }\n\n .flex-row {\n flex-direction: row;\n }\n\n .flex-wrap {\n flex-wrap: wrap;\n }\n\n .items-baseline {\n align-items: baseline;\n }\n\n .items-center {\n align-items: center;\n }\n\n .items-end {\n align-items: flex-end;\n }\n\n .items-start {\n align-items: flex-start;\n }\n\n .justify-between {\n justify-content: space-between;\n }\n\n .justify-center {\n justify-content: center;\n }\n\n .justify-end {\n justify-content: flex-end;\n }\n\n .gap-0 {\n gap: 0;\n }\n\n .gap-0\\.5 {\n gap: calc(var(--spacing) * .5);\n }\n\n .gap-1 {\n gap: var(--spacing);\n }\n\n .gap-1\\.5 {\n gap: calc(var(--spacing) * 1.5);\n }\n\n .gap-1\\.25 {\n gap: calc(var(--spacing) * 1.25);\n }\n\n .gap-2 {\n gap: calc(var(--spacing) * 2);\n }\n\n .gap-3 {\n gap: calc(var(--spacing) * 3);\n }\n\n .gap-4 {\n gap: calc(var(--spacing) * 4);\n }\n\n .gap-5 {\n gap: calc(var(--spacing) * 5);\n }\n\n .gap-6 {\n gap: calc(var(--spacing) * 6);\n }\n\n .gap-8 {\n gap: calc(var(--spacing) * 8);\n }\n\n .gap-8\\.75 {\n gap: calc(var(--spacing) * 8.75);\n }\n\n .gap-12 {\n gap: calc(var(--spacing) * 12);\n }\n\n .gap-19 {\n gap: calc(var(--spacing) * 19);\n }\n\n .gap-\\[2\\%\\] {\n gap: 2%;\n }\n\n :where(.space-y-1 > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));\n margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));\n }\n\n :where(.space-y-2 > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));\n }\n\n :where(.space-y-3 > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));\n }\n\n .gap-x-1 {\n column-gap: var(--spacing);\n }\n\n .gap-x-2 {\n column-gap: calc(var(--spacing) * 2);\n }\n\n .gap-x-4 {\n column-gap: calc(var(--spacing) * 4);\n }\n\n .gap-x-6 {\n column-gap: calc(var(--spacing) * 6);\n }\n\n .gap-y-1 {\n row-gap: var(--spacing);\n }\n\n .gap-y-\\[0\\.1875rem\\] {\n row-gap: .1875rem;\n }\n\n .self-end {\n align-self: flex-end;\n }\n\n .truncate {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n }\n\n .overflow-auto {\n overflow: auto;\n }\n\n .overflow-hidden {\n overflow: hidden;\n }\n\n .overflow-x-hidden {\n overflow-x: hidden;\n }\n\n .overflow-y-auto {\n overflow-y: auto;\n }\n\n .rounded {\n border-radius: .25rem;\n }\n\n .rounded-2xl {\n border-radius: var(--radius-2xl);\n }\n\n .rounded-full {\n border-radius: 3.40282e38px;\n }\n\n .rounded-lg {\n border-radius: var(--radius-lg);\n }\n\n .rounded-md {\n border-radius: var(--radius-md);\n }\n\n .rounded-none {\n border-radius: 0;\n }\n\n .rounded-sm {\n border-radius: var(--radius-sm);\n }\n\n .rounded-xl {\n border-radius: var(--radius-xl);\n }\n\n .rounded-t-lg {\n border-top-left-radius: var(--radius-lg);\n border-top-right-radius: var(--radius-lg);\n }\n\n .rounded-t-md {\n border-top-left-radius: var(--radius-md);\n border-top-right-radius: var(--radius-md);\n }\n\n .rounded-t-xl {\n border-top-left-radius: var(--radius-xl);\n border-top-right-radius: var(--radius-xl);\n }\n\n .rounded-l-xl {\n border-top-left-radius: var(--radius-xl);\n border-bottom-left-radius: var(--radius-xl);\n }\n\n .rounded-tl-xl {\n border-top-left-radius: var(--radius-xl);\n }\n\n .rounded-tr-xl {\n border-top-right-radius: var(--radius-xl);\n }\n\n .rounded-b-lg {\n border-bottom-right-radius: var(--radius-lg);\n border-bottom-left-radius: var(--radius-lg);\n }\n\n .rounded-b-md {\n border-bottom-right-radius: var(--radius-md);\n border-bottom-left-radius: var(--radius-md);\n }\n\n .rounded-b-xl {\n border-bottom-right-radius: var(--radius-xl);\n border-bottom-left-radius: var(--radius-xl);\n }\n\n .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n\n .border-0 {\n border-style: var(--tw-border-style);\n border-width: 0;\n }\n\n .border-2 {\n border-style: var(--tw-border-style);\n border-width: 2px;\n }\n\n .border-x {\n border-inline-style: var(--tw-border-style);\n border-inline-width: 1px;\n }\n\n .border-t {\n border-top-style: var(--tw-border-style);\n border-top-width: 1px;\n }\n\n .border-t-4 {\n border-top-style: var(--tw-border-style);\n border-top-width: 4px;\n }\n\n .border-r {\n border-right-style: var(--tw-border-style);\n border-right-width: 1px;\n }\n\n .border-r-0 {\n border-right-style: var(--tw-border-style);\n border-right-width: 0;\n }\n\n .border-b {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n }\n\n .border-b-0 {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 0;\n }\n\n .border-l {\n border-left-style: var(--tw-border-style);\n border-left-width: 1px;\n }\n\n .border-l-0 {\n border-left-style: var(--tw-border-style);\n border-left-width: 0;\n }\n\n .border-l-4 {\n border-left-style: var(--tw-border-style);\n border-left-width: 4px;\n }\n\n .border-dashed {\n --tw-border-style: dashed;\n border-style: dashed;\n }\n\n .border-none {\n --tw-border-style: none;\n border-style: none;\n }\n\n .border-solid {\n --tw-border-style: solid;\n border-style: solid;\n }\n\n .border-\\(--axebow-gray\\) {\n border-color: var(--axebow-gray);\n }\n\n .border-\\(--axebow-light-gray\\) {\n border-color: var(--axebow-light-gray);\n }\n\n .border-\\(--axebow-primary\\) {\n border-color: var(--axebow-primary);\n }\n\n .border-\\(--axebow-secondary\\) {\n border-color: var(--axebow-secondary);\n }\n\n .border-\\(--axebow-table-border\\) {\n border-color: var(--axebow-table-border);\n }\n\n .border-\\(--axebow-table-header-border\\) {\n border-color: var(--axebow-table-header-border);\n }\n\n .border-\\(--axebow-tertiary\\) {\n border-color: var(--axebow-tertiary);\n }\n\n .border-\\[\\#DBDDE4\\] {\n border-color: #dbdde4;\n }\n\n .border-\\[var\\(--axebow-error\\)\\] {\n border-color: var(--axebow-error);\n }\n\n .border-\\[var\\(--axebow-gray\\)\\] {\n border-color: var(--axebow-gray);\n }\n\n .border-\\[var\\(--axebow-tertiary\\)\\] {\n border-color: var(--axebow-tertiary);\n }\n\n .border-blue-200 {\n border-color: var(--color-blue-200);\n }\n\n .border-gray-200 {\n border-color: var(--color-gray-200);\n }\n\n .border-gray-300 {\n border-color: var(--color-gray-300);\n }\n\n .border-gray-400 {\n border-color: var(--color-gray-400);\n }\n\n .border-gray-500 {\n border-color: var(--color-gray-500);\n }\n\n .border-green-200 {\n border-color: var(--color-green-200);\n }\n\n .border-red-200 {\n border-color: var(--color-red-200);\n }\n\n .border-transparent {\n border-color: #0000;\n }\n\n .border-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-\\[var\\(--axebow-gray\\)\\] {\n background-color: var(--axebow-gray);\n }\n\n .bg-\\[var\\(--axebow-tertiary\\)\\] {\n background-color: var(--axebow-tertiary);\n }\n\n .bg-blue-50 {\n background-color: var(--color-blue-50);\n }\n\n .bg-gray-50 {\n background-color: var(--color-gray-50);\n }\n\n .bg-gray-100 {\n background-color: var(--color-gray-100);\n }\n\n .bg-gray-200 {\n background-color: var(--color-gray-200);\n }\n\n .bg-gray-400 {\n background-color: var(--color-gray-400);\n }\n\n .bg-green-50 {\n background-color: var(--color-green-50);\n }\n\n .bg-red-50 {\n background-color: var(--color-red-50);\n }\n\n .bg-sky-50 {\n background-color: var(--color-sky-50);\n }\n\n .bg-sky-100 {\n background-color: var(--color-sky-100);\n }\n\n .bg-transparent {\n background-color: #0000;\n }\n\n .bg-white {\n background-color: var(--color-white);\n }\n\n .bg-yellow-50 {\n background-color: var(--color-yellow-50);\n }\n\n .object-contain {\n object-fit: contain;\n }\n\n .p-0 {\n padding: 0;\n }\n\n .p-1 {\n padding: var(--spacing);\n }\n\n .p-2 {\n padding: calc(var(--spacing) * 2);\n }\n\n .p-3 {\n padding: calc(var(--spacing) * 3);\n }\n\n .p-3\\.25 {\n padding: calc(var(--spacing) * 3.25);\n }\n\n .p-4 {\n padding: calc(var(--spacing) * 4);\n }\n\n .p-6 {\n padding: calc(var(--spacing) * 6);\n }\n\n .px-0\\.5 {\n padding-inline: calc(var(--spacing) * .5);\n }\n\n .px-1 {\n padding-inline: var(--spacing);\n }\n\n .px-1\\.5 {\n padding-inline: calc(var(--spacing) * 1.5);\n }\n\n .px-2 {\n padding-inline: calc(var(--spacing) * 2);\n }\n\n .px-3 {\n padding-inline: calc(var(--spacing) * 3);\n }\n\n .px-3\\.5 {\n padding-inline: calc(var(--spacing) * 3.5);\n }\n\n .px-4 {\n padding-inline: calc(var(--spacing) * 4);\n }\n\n .px-5 {\n padding-inline: calc(var(--spacing) * 5);\n }\n\n .py-0\\.5 {\n padding-block: calc(var(--spacing) * .5);\n }\n\n .py-1 {\n padding-block: var(--spacing);\n }\n\n .py-1\\.5 {\n padding-block: calc(var(--spacing) * 1.5);\n }\n\n .py-1\\.25 {\n padding-block: calc(var(--spacing) * 1.25);\n }\n\n .py-2 {\n padding-block: calc(var(--spacing) * 2);\n }\n\n .py-2\\.5 {\n padding-block: calc(var(--spacing) * 2.5);\n }\n\n .py-2\\.75 {\n padding-block: calc(var(--spacing) * 2.75);\n }\n\n .py-3 {\n padding-block: calc(var(--spacing) * 3);\n }\n\n .py-8 {\n padding-block: calc(var(--spacing) * 8);\n }\n\n .ps-4 {\n padding-inline-start: calc(var(--spacing) * 4);\n }\n\n .ps-8 {\n padding-inline-start: calc(var(--spacing) * 8);\n }\n\n .pe-4 {\n padding-inline-end: calc(var(--spacing) * 4);\n }\n\n .pt-0\\.5 {\n padding-top: calc(var(--spacing) * .5);\n }\n\n .pt-1 {\n padding-top: var(--spacing);\n }\n\n .pt-2 {\n padding-top: calc(var(--spacing) * 2);\n }\n\n .pt-3 {\n padding-top: calc(var(--spacing) * 3);\n }\n\n .pt-4 {\n padding-top: calc(var(--spacing) * 4);\n }\n\n .pt-6 {\n padding-top: calc(var(--spacing) * 6);\n }\n\n .pt-8 {\n padding-top: calc(var(--spacing) * 8);\n }\n\n .pt-px {\n padding-top: 1px;\n }\n\n .pr-1 {\n padding-right: var(--spacing);\n }\n\n .pr-2 {\n padding-right: calc(var(--spacing) * 2);\n }\n\n .pr-4 {\n padding-right: calc(var(--spacing) * 4);\n }\n\n .pr-4\\.5 {\n padding-right: calc(var(--spacing) * 4.5);\n }\n\n .pr-5 {\n padding-right: calc(var(--spacing) * 5);\n }\n\n .pb-0 {\n padding-bottom: 0;\n }\n\n .pb-2 {\n padding-bottom: calc(var(--spacing) * 2);\n }\n\n .pb-3\\.5 {\n padding-bottom: calc(var(--spacing) * 3.5);\n }\n\n .pb-4 {\n padding-bottom: calc(var(--spacing) * 4);\n }\n\n .pb-6 {\n padding-bottom: calc(var(--spacing) * 6);\n }\n\n .pl-1 {\n padding-left: var(--spacing);\n }\n\n .pl-1\\.5 {\n padding-left: calc(var(--spacing) * 1.5);\n }\n\n .pl-2 {\n padding-left: calc(var(--spacing) * 2);\n }\n\n .pl-4 {\n padding-left: calc(var(--spacing) * 4);\n }\n\n .pl-5 {\n padding-left: calc(var(--spacing) * 5);\n }\n\n .pl-6 {\n padding-left: calc(var(--spacing) * 6);\n }\n\n .pl-11\\.75 {\n padding-left: calc(var(--spacing) * 11.75);\n }\n\n .pl-px {\n padding-left: 1px;\n }\n\n .text-center {\n text-align: center;\n }\n\n .text-left {\n text-align: left;\n }\n\n .text-start {\n text-align: start;\n }\n\n .align-middle {\n vertical-align: middle;\n }\n\n .font-\\[Material_Symbols_Outlined\\] {\n font-family: Material Symbols Outlined;\n }\n\n .font-\\[inherit\\] {\n font-family: inherit;\n }\n\n .text-base {\n font-size: var(--text-base);\n line-height: var(--tw-leading, var(--text-base--line-height));\n }\n\n .text-lg {\n font-size: var(--text-lg);\n line-height: var(--tw-leading, var(--text-lg--line-height));\n }\n\n .text-md {\n font-size: var(--text-md);\n line-height: var(--tw-leading, var(--text-md--line-height));\n }\n\n .text-sm {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n\n .text-xl {\n font-size: var(--text-xl);\n line-height: var(--tw-leading, var(--text-xl--line-height));\n }\n\n .text-xs {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n\n .text-\\[0\\.9375rem\\] {\n font-size: .9375rem;\n }\n\n .text-\\[18px\\] {\n font-size: 18px;\n }\n\n .leading-3\\.5 {\n --tw-leading: calc(var(--spacing) * 3.5);\n line-height: calc(var(--spacing) * 3.5);\n }\n\n .leading-4\\.25 {\n --tw-leading: calc(var(--spacing) * 4.25);\n line-height: calc(var(--spacing) * 4.25);\n }\n\n .leading-\\[1\\.125rem\\] {\n --tw-leading: 1.125rem;\n line-height: 1.125rem;\n }\n\n .leading-\\[1\\.0625rem\\] {\n --tw-leading: 1.0625rem;\n line-height: 1.0625rem;\n }\n\n .leading-\\[1\\.21875rem\\] {\n --tw-leading: 1.21875rem;\n line-height: 1.21875rem;\n }\n\n .leading-none {\n --tw-leading: 1;\n line-height: 1;\n }\n\n .leading-snug {\n --tw-leading: var(--leading-snug);\n line-height: var(--leading-snug);\n }\n\n .leading-tight {\n --tw-leading: var(--leading-tight);\n line-height: var(--leading-tight);\n }\n\n .font-black {\n --tw-font-weight: var(--font-weight-black);\n font-weight: var(--font-weight-black);\n }\n\n .font-bold {\n --tw-font-weight: var(--font-weight-bold);\n font-weight: var(--font-weight-bold);\n }\n\n .font-medium {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n\n .font-normal {\n --tw-font-weight: var(--font-weight-normal);\n font-weight: var(--font-weight-normal);\n }\n\n .font-semibold {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n\n .tracking-wider {\n --tw-tracking: var(--tracking-wider);\n letter-spacing: var(--tracking-wider);\n }\n\n .tracking-widest {\n --tw-tracking: var(--tracking-widest);\n letter-spacing: var(--tracking-widest);\n }\n\n .wrap-break-word {\n overflow-wrap: break-word;\n }\n\n .text-ellipsis {\n text-overflow: ellipsis;\n }\n\n .whitespace-nowrap {\n white-space: nowrap;\n }\n\n .text-\\(--axebow-anti-flash-white\\) {\n color: var(--axebow-anti-flash-white);\n }\n\n .text-\\(--axebow-black\\) {\n color: var(--axebow-black);\n }\n\n .text-\\(--axebow-error\\) {\n color: var(--axebow-error);\n }\n\n .text-\\(--axebow-gray\\) {\n color: var(--axebow-gray);\n }\n\n .text-\\(--axebow-primary\\) {\n color: var(--axebow-primary);\n }\n\n .text-\\(--axebow-rich-black\\) {\n color: var(--axebow-rich-black);\n }\n\n .text-\\(--axebow-secondary\\) {\n color: var(--axebow-secondary);\n }\n\n .text-\\(--axebow-tertiary\\) {\n color: var(--axebow-tertiary);\n }\n\n .text-\\[var\\(--axebow-error\\)\\] {\n color: var(--axebow-error);\n }\n\n .text-\\[var\\(--axebow-gray\\)\\] {\n color: var(--axebow-gray);\n }\n\n .text-black {\n color: var(--color-black);\n }\n\n .text-blue-600 {\n color: var(--color-blue-600);\n }\n\n .text-blue-800 {\n color: var(--color-blue-800);\n }\n\n .text-gray-300 {\n color: var(--color-gray-300);\n }\n\n .text-gray-400 {\n color: var(--color-gray-400);\n }\n\n .text-gray-500 {\n color: var(--color-gray-500);\n }\n\n .text-gray-600 {\n color: var(--color-gray-600);\n }\n\n .text-gray-700 {\n color: var(--color-gray-700);\n }\n\n .text-gray-900 {\n color: var(--color-gray-900);\n }\n\n .text-green-600 {\n color: var(--color-green-600);\n }\n\n .text-green-800 {\n color: var(--color-green-800);\n }\n\n .text-inherit {\n color: inherit;\n }\n\n .text-red-500 {\n color: var(--color-red-500);\n }\n\n .text-white {\n color: var(--color-white);\n }\n\n .text-yellow-600 {\n color: var(--color-yellow-600);\n }\n\n .text-yellow-800 {\n color: var(--color-yellow-800);\n }\n\n .capitalize {\n text-transform: capitalize;\n }\n\n .uppercase {\n text-transform: uppercase;\n }\n\n .italic {\n font-style: italic;\n }\n\n .underline {\n text-decoration-line: underline;\n }\n\n .decoration-\\(--axebow-error\\) {\n -webkit-text-decoration-color: var(--axebow-error);\n -webkit-text-decoration-color: var(--axebow-error);\n text-decoration-color: var(--axebow-error);\n }\n\n .placeholder-gray-400::placeholder {\n color: var(--color-gray-400);\n }\n\n .opacity-0 {\n opacity: 0;\n }\n\n .opacity-50 {\n opacity: .5;\n }\n\n .opacity-60 {\n opacity: .6;\n }\n\n .opacity-70 {\n opacity: .7;\n }\n\n .opacity-100 {\n opacity: 1;\n }\n\n .shadow {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-\\[0_-8px_8px_-8px_rgba\\(13\\,24\\,33\\,0\\.15\\)\\] {\n --tw-shadow: 0 -8px 8px -8px var(--tw-shadow-color, #0d182126);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-\\[0_6px_16px_rgba\\(13\\,24\\,33\\,0\\.18\\)\\] {\n --tw-shadow: 0 6px 16px var(--tw-shadow-color, #0d18212e);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-\\[2px_2px_25px_0px_rgba\\(0\\,0\\,0\\,0\\.1\\)\\] {\n --tw-shadow: 2px 2px 25px 0px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-lg {\n --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-md {\n --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-none {\n --tw-shadow: 0 0 #0000;\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-sm {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .axebow-shadow-hover {\n transition: box-shadow .2s ease-in-out;\n }\n\n .axebow-shadow-hover:hover {\n box-shadow: 0 4px 12px #0d182114;\n }\n\n .outline {\n outline-style: var(--tw-outline-style);\n outline-width: 1px;\n }\n\n .grayscale {\n --tw-grayscale: grayscale(100%);\n filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );\n }\n\n .filter {\n filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );\n }\n\n .transition {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-\\[filter\\] {\n transition-property: filter;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-all {\n transition-property: all;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-colors {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-opacity {\n transition-property: opacity;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-shadow {\n transition-property: box-shadow;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-transform {\n transition-property: transform, translate, scale, rotate;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .delay-100 {\n transition-delay: .1s;\n }\n\n .duration-120 {\n --tw-duration: .12s;\n transition-duration: .12s;\n }\n\n .duration-150 {\n --tw-duration: .15s;\n transition-duration: .15s;\n }\n\n .duration-200 {\n --tw-duration: .2s;\n transition-duration: .2s;\n }\n\n .duration-300 {\n --tw-duration: .3s;\n transition-duration: .3s;\n }\n\n .ease-in-out {\n --tw-ease: var(--ease-in-out);\n transition-timing-function: var(--ease-in-out);\n }\n\n .outline-none {\n --tw-outline-style: none;\n outline-style: 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 .\\[writing-mode\\:vertical-lr\\] {\n writing-mode: vertical-lr;\n }\n\n @media (hover: hover) {\n .group-hover\\:-translate-x-1:is(:where(.group):hover *) {\n --tw-translate-x: calc(var(--spacing) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .group-hover\\:translate-x-0:is(:where(.group):hover *) {\n --tw-translate-x: 0;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .group-hover\\:rotate-15:is(:where(.group):hover *) {\n rotate: 15deg;\n }\n\n .group-hover\\:font-semibold:is(:where(.group):hover *) {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n\n .group-hover\\:text-\\(--axebow-primary\\):is(:where(.group):hover *) {\n color: var(--axebow-primary);\n }\n\n .group-hover\\:text-red-500:is(:where(.group):hover *) {\n color: var(--color-red-500);\n }\n\n .group-hover\\:opacity-100:is(:where(.group):hover *) {\n opacity: 1;\n }\n\n .group-hover\\:invert:is(:where(.group):hover *) {\n --tw-invert: invert(100%);\n filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );\n }\n }\n\n .focus-within\\:border-blue-500:focus-within {\n border-color: var(--color-blue-500);\n }\n\n .focus-within\\:ring-2:focus-within {\n --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .focus-within\\:ring-blue-100:focus-within {\n --tw-ring-color: var(--color-blue-100);\n }\n\n @media (hover: hover) {\n .hover\\:rounded-md:hover {\n border-radius: var(--radius-md);\n }\n\n .hover\\:border-2:hover {\n border-style: var(--tw-border-style);\n border-width: 2px;\n }\n\n .hover\\:border-solid:hover {\n --tw-border-style: solid;\n border-style: solid;\n }\n\n .hover\\:border-\\(--axebow-gray\\):hover {\n border-color: var(--axebow-gray);\n }\n\n .hover\\:border-\\(--axebow-primary\\):hover {\n border-color: var(--axebow-primary);\n }\n\n .hover\\:border-\\(--axebow-tertiary\\):hover, .hover\\:border-\\[var\\(--axebow-tertiary\\)\\]:hover {\n border-color: var(--axebow-tertiary);\n }\n\n .hover\\:border-red-300:hover {\n border-color: var(--color-red-300);\n }\n\n .hover\\:bg-\\(--axebow-anti-flash-white\\):hover {\n background-color: var(--axebow-anti-flash-white);\n }\n\n .hover\\:bg-\\(--axebow-base\\):hover {\n background-color: var(--axebow-base);\n }\n\n .hover\\:bg-\\(--axebow-gray\\):hover {\n background-color: var(--axebow-gray);\n }\n\n .hover\\:bg-\\(--axebow-light-gray\\):hover {\n background-color: var(--axebow-light-gray);\n }\n\n .hover\\:bg-\\(--axebow-primary\\):hover {\n background-color: var(--axebow-primary);\n }\n\n .hover\\:bg-\\[var\\(--axebow-anti-flash-white\\)\\]:hover {\n background-color: var(--axebow-anti-flash-white);\n }\n\n .hover\\:bg-gray-50:hover {\n background-color: var(--color-gray-50);\n }\n\n .hover\\:bg-gray-100:hover {\n background-color: var(--color-gray-100);\n }\n\n .hover\\:bg-gray-200:hover {\n background-color: var(--color-gray-200);\n }\n\n .hover\\:bg-red-50:hover {\n background-color: var(--color-red-50);\n }\n\n .hover\\:bg-white:hover {\n background-color: var(--color-white);\n }\n\n .hover\\:px-\\[1\\.375rem\\]:hover {\n padding-inline: 1.375rem;\n }\n\n .hover\\:text-\\(--axebow-primary\\):hover {\n color: var(--axebow-primary);\n }\n\n .hover\\:text-\\(--axebow-tertiary\\):hover {\n color: var(--axebow-tertiary);\n }\n\n .hover\\:text-\\[var\\(--axebow-gray\\)\\]:hover {\n color: var(--axebow-gray);\n }\n\n .hover\\:text-gray-700:hover {\n color: var(--color-gray-700);\n }\n\n .hover\\:text-red-600:hover {\n color: var(--color-red-600);\n }\n\n .hover\\:underline:hover {\n text-decoration-line: underline;\n }\n\n .hover\\:opacity-80:hover {\n opacity: .8;\n }\n\n .hover\\:opacity-100:hover {\n opacity: 1;\n }\n\n .hover\\:shadow-\\[0_2px_6px_rgba\\(13\\,24\\,33\\,0\\.14\\)\\]:hover {\n --tw-shadow: 0 2px 6px var(--tw-shadow-color, #0d182124);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .hover\\:shadow-\\[0_4px_12px_0_rgba\\(13\\,24\\,33\\,0\\.08\\)\\]:hover {\n --tw-shadow: 0 4px 12px 0 var(--tw-shadow-color, #0d182114);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .hover\\:shadow-lg:hover {\n --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n\n .focus\\:outline-2:focus {\n outline-style: var(--tw-outline-style);\n outline-width: 2px;\n }\n\n .focus\\:outline-offset-1:focus {\n outline-offset: 1px;\n }\n\n .focus\\:outline-blue-500:focus {\n outline-color: var(--color-blue-500);\n }\n\n .focus-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 .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\\:inline-flex {\n display: inline-flex;\n }\n\n .lg\\:min-h-\\(--card-height\\) {\n min-height: var(--card-height);\n }\n\n .lg\\:min-h-\\[calc\\(100vh-6\\.25rem\\)\\] {\n min-height: calc(100vh - 6.25rem);\n }\n\n .lg\\:w-\\(--card-width\\) {\n width: var(--card-width);\n }\n\n .lg\\:cursor-default {\n cursor: default;\n }\n\n .lg\\:rounded-xl {\n border-radius: var(--radius-xl);\n }\n\n .lg\\:border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n\n .lg\\:text-base {\n font-size: var(--text-base);\n line-height: var(--tw-leading, var(--text-base--line-height));\n }\n\n .lg\\:text-lg {\n font-size: var(--text-lg);\n line-height: var(--tw-leading, var(--text-lg--line-height));\n }\n\n .lg\\:shadow {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n}\n\n:host {\n font-family: var(--font-sans);\n font-size: var(--text-base);\n line-height: var(--text-base--line-height);\n --font-sans: \"Open Sans\", sans-serif;\n --text-xs: .625rem;\n --text-xs--line-height: .875rem;\n --text-sm: .75rem;\n --text-sm--line-height: 1rem;\n --text-base: .875rem;\n --text-base--line-height: 1.25rem;\n --text-md: 1rem;\n --text-md--line-height: 1.5rem;\n --text-lg: 1.125rem;\n --text-lg--line-height: 1.75rem;\n --text-xl: 1.25rem;\n --text-xl--line-height: 1.75rem;\n --text-2xl: 1.5rem;\n --text-2xl--line-height: 2rem;\n --text-3xl: 1.875rem;\n --text-3xl--line-height: 2.25rem;\n --text-4xl: 2.25rem;\n --text-4xl--line-height: 2.5rem;\n --text-5xl: 3rem;\n --text-5xl--line-height: 1;\n --text-6xl: 3.75rem;\n --text-6xl--line-height: 1;\n --text-7xl: 4.5rem;\n --text-7xl--line-height: 1;\n --text-8xl: 4.625rem;\n --text-8xl--line-height: 1;\n --text-9xl: 6.125rem;\n --text-9xl--line-height: 1;\n}\n\n:root {\n --sl-font-sans: \"Open Sans\", sans-serif;\n --sl-font-size-2x-small: var(--text-xs);\n --sl-font-size-x-small: var(--text-xs);\n --sl-font-size-small: var(--text-sm);\n --sl-font-size-medium: var(--text-base);\n --sl-font-size-large: var(--text-md);\n --sl-font-size-x-large: var(--text-lg);\n --sl-font-size-2x-large: var(--text-xl);\n --sl-font-size-3x-large: var(--text-3xl);\n --sl-font-size-4x-large: var(--text-5xl);\n --sl-input-font-size-small: var(--text-sm);\n --sl-input-font-size-medium: var(--text-base);\n --sl-input-font-size-large: var(--text-md);\n --sl-button-font-size-small: var(--text-sm);\n --sl-button-font-size-medium: var(--text-base);\n --sl-button-font-size-large: var(--text-md);\n --sl-tooltip-font-size: var(--text-base);\n}\n\nbutton, input, select, textarea {\n font-family: inherit;\n font-size: inherit;\n}\n\ninput, select, textarea, sl-menu-item::part(label), sl-option::part(label) {\n font-size: var(--text-base);\n}\n\n.axebow-blue-button::part(base) {\n background-color: var(--axebow-tertiary);\n}\n\n.info-container-page {\n flex-wrap: wrap;\n gap: 2rem;\n display: flex;\n}\n\nsl-divider {\n background: var(--axebow-light-gray);\n height: 1px;\n margin-top: .5rem;\n margin-bottom: .5rem;\n}\n\n.axebow-shadow {\n box-shadow: 2px 2px 25px #0000001a;\n}\n\n@property --tw-translate-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-translate-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-translate-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-rotate-x {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-rotate-y {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-rotate-z {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-skew-x {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-skew-y {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-space-y-reverse {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-border-style {\n syntax: \"*\";\n inherits: false;\n initial-value: solid;\n}\n\n@property --tw-leading {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-font-weight {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-tracking {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-shadow-color {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n\n@property --tw-inset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-inset-shadow-color {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-inset-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n\n@property --tw-ring-color {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-inset-ring-color {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-inset-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-ring-inset {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-ring-offset-width {\n syntax: \"<length>\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-ring-offset-color {\n syntax: \"*\";\n inherits: false;\n initial-value: #fff;\n}\n\n@property --tw-ring-offset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-outline-style {\n syntax: \"*\";\n inherits: false;\n initial-value: solid;\n}\n\n@property --tw-blur {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-brightness {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-contrast {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-grayscale {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-hue-rotate {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-invert {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-opacity {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-saturate {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-sepia {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-drop-shadow {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-drop-shadow-color {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-drop-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n\n@property --tw-drop-shadow-size {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-duration {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-ease {\n syntax: \"*\";\n inherits: false\n}\n";
|
|
128
128
|
//#endregion
|
|
129
129
|
//#region \0@oxc-project+runtime@0.139.0/helpers/esm/decorate.js
|
|
130
130
|
function __decorate(decorators, target, key, desc) {
|
|
@@ -148,35 +148,12 @@ var AxebowIcon = class AxebowIcon extends LitElement {
|
|
|
148
148
|
static {
|
|
149
149
|
this.styles = unsafeCSS(tailwind_default);
|
|
150
150
|
}
|
|
151
|
-
_getFontSize() {
|
|
152
|
-
switch (this.size.replace(/^text-/, "")) {
|
|
153
|
-
case "xs": return "var(--text-xs, 0.75rem)";
|
|
154
|
-
case "sm":
|
|
155
|
-
case "xx-small": return "var(--text-sm, 0.875rem)";
|
|
156
|
-
case "base":
|
|
157
|
-
case "x-small": return "var(--text-base, 1rem)";
|
|
158
|
-
case "md":
|
|
159
|
-
case "small": return "var(--text-md, 0.875rem)";
|
|
160
|
-
case "lg": return "var(--text-lg, 1.125rem)";
|
|
161
|
-
case "xl":
|
|
162
|
-
case "medium": return "18px";
|
|
163
|
-
case "2xl": return "1.5rem";
|
|
164
|
-
case "3xl":
|
|
165
|
-
case "large": return "var(--text-3xl, 1.875rem)";
|
|
166
|
-
case "4xl": return "2.25rem";
|
|
167
|
-
case "5xl":
|
|
168
|
-
case "x-large": return "var(--text-5xl, 3rem)";
|
|
169
|
-
default: return this.size;
|
|
170
|
-
}
|
|
171
|
-
}
|
|
172
151
|
render() {
|
|
173
|
-
const filled = "[font-variation-settings:'FILL'_1,'wght'_400,'GRAD'_0,'opsz'_24]";
|
|
174
|
-
const outlined = "[font-variation-settings:'FILL'_0,'wght'_400,'GRAD'_0,'opsz'_24]";
|
|
175
|
-
const fontSize = this._getFontSize();
|
|
176
152
|
return html`
|
|
177
153
|
<span
|
|
178
|
-
class="font-[Material_Symbols_Outlined]
|
|
179
|
-
style="color: ${this.iconColor}; transform: rotate(${this.rotate}deg); font-size: ${
|
|
154
|
+
class="font-[Material_Symbols_Outlined] inline-block align-middle whitespace-nowrap ${this.filled ? "[font-variation-settings:'FILL'_1,'wght'_400,'GRAD'_0,'opsz'_24]" : "[font-variation-settings:'FILL'_0,'wght'_400,'GRAD'_0,'opsz'_24]"}"
|
|
155
|
+
style="color: ${this.iconColor}; transform: rotate(${this.rotate}deg); font-size: ${this.size === "xx-small" ? "var(--text-sm)" : this.size === "x-small" ? "var(--text-base)" : this.size === "small" ? "var(--text-md)" : this.size === "medium" ? "var(--text-xl)" : this.size === "large" ? "var(--text-3xl)" : this.size === "x-large" ? "var(--text-5xl)" : "var(--text-xl)"};
|
|
156
|
+
margin-bottom: ${this.size === "xx-small" ? "0" : this.size === "x-small" ? "0" : this.size === "small" ? "0" : this.size === "medium" ? "0" : this.size === "large" ? "0.375rem" : this.size === "x-large" ? "0.5rem" : `${this.marginBottom}px`};"
|
|
180
157
|
>
|
|
181
158
|
${this.iconName}
|
|
182
159
|
</span>
|
|
@@ -300,7 +277,7 @@ var AxebowFilterBar = class AxebowFilterBar extends LitElement {
|
|
|
300
277
|
slot="expand-icon"
|
|
301
278
|
iconName="chevron_right"
|
|
302
279
|
rotate="90"
|
|
303
|
-
size="
|
|
280
|
+
size="small"
|
|
304
281
|
iconColor="var(--axebow-secondary)"
|
|
305
282
|
></axebow-icon>
|
|
306
283
|
${item.options.map((option) => html`<sl-option value=${option.value}>${option.label}</sl-option>`)}
|
|
@@ -335,7 +312,7 @@ var AxebowQuickActionCard = class AxebowQuickActionCard extends LitElement {
|
|
|
335
312
|
class="flex flex-col items-center justify-center gap-1 w-[10.5rem] px-4 py-3 rounded bg-white hover:bg-(--axebow-base) cursor-pointer transition-colors duration-150"
|
|
336
313
|
@click=${this._onClick}
|
|
337
314
|
>
|
|
338
|
-
<axebow-icon iconName=${this.icon} iconColor="var(--axebow-primary)" size="
|
|
315
|
+
<axebow-icon iconName=${this.icon} iconColor="var(--axebow-primary)" size="medium"></axebow-icon>
|
|
339
316
|
<span class="text-base font-semibold text-(--axebow-primary) text-center whitespace-nowrap">${this.label}</span>
|
|
340
317
|
</div>
|
|
341
318
|
`;
|
|
@@ -394,7 +371,7 @@ var AxebowQuickActions = class AxebowQuickActions extends LitElement {
|
|
|
394
371
|
<span
|
|
395
372
|
class="flex flex-col items-center justify-center gap-1 ${this.open ? "text-(--axebow-primary)" : "text-white group-hover:text-(--axebow-primary)"}"
|
|
396
373
|
>
|
|
397
|
-
<axebow-icon iconName=${this.open ? "close" : "apps"} iconColor="currentColor" size="
|
|
374
|
+
<axebow-icon iconName=${this.open ? "close" : "apps"} iconColor="currentColor" size="medium"></axebow-icon>
|
|
398
375
|
<span
|
|
399
376
|
class="text-xs whitespace-nowrap ${this.open ? "font-semibold" : "font-normal group-hover:font-semibold"}"
|
|
400
377
|
>${this.label}</span
|
|
@@ -553,7 +530,7 @@ var AxebowHeaderActions = class AxebowHeaderActions extends LitElement {
|
|
|
553
530
|
class="group flex items-center gap-2 h-9 px-3 rounded-lg text-white font-semibold cursor-pointer whitespace-nowrap transition-all duration-150 hover:bg-white hover:text-(--axebow-primary) hover:shadow-[0_2px_6px_rgba(13,24,33,0.14)] text-base"
|
|
554
531
|
>
|
|
555
532
|
<span class="text-white group-hover:text-(--axebow-primary) transition-colors duration-150">
|
|
556
|
-
<axebow-icon iconName="account_circle" iconColor="currentColor" size="
|
|
533
|
+
<axebow-icon iconName="account_circle" iconColor="currentColor" size="medium"></axebow-icon>
|
|
557
534
|
</span>
|
|
558
535
|
${this.userName}
|
|
559
536
|
</div>
|
|
@@ -564,7 +541,7 @@ var AxebowHeaderActions = class AxebowHeaderActions extends LitElement {
|
|
|
564
541
|
@click=${() => item.onClick()}
|
|
565
542
|
>
|
|
566
543
|
<span class="text-(--axebow-primary)">${item.name}</span>
|
|
567
|
-
<axebow-icon iconName="arrow_right_alt" size="
|
|
544
|
+
<axebow-icon iconName="arrow_right_alt" size="medium"></axebow-icon>
|
|
568
545
|
</button>
|
|
569
546
|
`)}
|
|
570
547
|
<button
|
|
@@ -572,7 +549,7 @@ var AxebowHeaderActions = class AxebowHeaderActions extends LitElement {
|
|
|
572
549
|
@click=${() => this.onLogout()}
|
|
573
550
|
>
|
|
574
551
|
<span class="text-(--axebow-error) mt-1">${this.logoutLabel}</span>
|
|
575
|
-
<axebow-icon iconName="mode_off_on" iconColor="var(--axebow-error)" size="
|
|
552
|
+
<axebow-icon iconName="mode_off_on" iconColor="var(--axebow-error)" size="small"></axebow-icon>
|
|
576
553
|
</button>
|
|
577
554
|
</sl-menu>
|
|
578
555
|
</sl-dropdown>
|
|
@@ -588,7 +565,7 @@ var AxebowHeaderActions = class AxebowHeaderActions extends LitElement {
|
|
|
588
565
|
${item.status === "unread" ? html` <div class="absolute top-[-7px] left-[-7px] h-3.5 w-3.5 rounded-full bg-(--axebow-success)"></div>` : ""}
|
|
589
566
|
<axebow-icon
|
|
590
567
|
iconName=${item.icon}
|
|
591
|
-
size="
|
|
568
|
+
size="medium"
|
|
592
569
|
iconColor=${item.status === "unread" ? item.color : "gray"}
|
|
593
570
|
></axebow-icon>
|
|
594
571
|
<div class="flex flex-1 flex-col gap-1 py-1.25 min-w-0 overflow-hidden">
|
|
@@ -794,7 +771,7 @@ var AxebowSidebar = class AxebowSidebar extends LitElement {
|
|
|
794
771
|
>
|
|
795
772
|
<span
|
|
796
773
|
class="flex items-center gap-1 px-2 py-1 bg-white rounded-lg text-base border border-solid border-(--axebow-gray) shadow-lg"
|
|
797
|
-
>${this.hoveredItem.label}${this.hoveredItem.openInNewTab ? html`<axebow-icon iconName="open_in_new" size="
|
|
774
|
+
>${this.hoveredItem.label}${this.hoveredItem.openInNewTab ? html`<axebow-icon iconName="open_in_new" size="xx-small"></axebow-icon>` : ""}</span
|
|
798
775
|
>
|
|
799
776
|
</div>
|
|
800
777
|
` : ""}
|
|
@@ -810,7 +787,7 @@ var AxebowSidebar = class AxebowSidebar extends LitElement {
|
|
|
810
787
|
title="${item.label}"
|
|
811
788
|
>
|
|
812
789
|
<div class="flex flex-col items-center justify-center">
|
|
813
|
-
<axebow-icon iconName="${item.icon}" size="
|
|
790
|
+
<axebow-icon iconName="${item.icon}" size="medium"></axebow-icon>
|
|
814
791
|
<span class="text-xs overflow-hidden whitespace-nowrap opacity-100 max-w-full">${item.label}</span>
|
|
815
792
|
</div>
|
|
816
793
|
|
|
@@ -832,9 +809,9 @@ var AxebowSidebar = class AxebowSidebar extends LitElement {
|
|
|
832
809
|
title="${item.label}"
|
|
833
810
|
>
|
|
834
811
|
<div class="flex flex-col items-center justify-center py-3">
|
|
835
|
-
<axebow-icon iconName="${item.icon}" size="
|
|
812
|
+
<axebow-icon iconName="${item.icon}" size="medium"></axebow-icon>
|
|
836
813
|
<span class="text-sm overflow-hidden whitespace-nowrap opacity-100 max-w-full"
|
|
837
|
-
>${item.label}${item.openInNewTab ? html`<axebow-icon iconName="open_in_new" size="
|
|
814
|
+
>${item.label}${item.openInNewTab ? html`<axebow-icon iconName="open_in_new" size="xx-small"></axebow-icon>` : ""}</span
|
|
838
815
|
>
|
|
839
816
|
</div>
|
|
840
817
|
|
|
@@ -910,7 +887,7 @@ var AxebowFooter = class AxebowFooter extends LitElement {
|
|
|
910
887
|
@click=${link.onClick}
|
|
911
888
|
>
|
|
912
889
|
${link.label}
|
|
913
|
-
<axebow-icon iconName="open_in_new" iconColor="var(--axebow-anti-flash-white)" size="
|
|
890
|
+
<axebow-icon iconName="open_in_new" iconColor="var(--axebow-anti-flash-white)" size="small"></axebow-icon>
|
|
914
891
|
</button>
|
|
915
892
|
`)}
|
|
916
893
|
</footer>
|
|
@@ -954,7 +931,7 @@ var AxebowBreadcrumbHeader = class AxebowBreadcrumbHeader extends LitElement {
|
|
|
954
931
|
<axebow-icon
|
|
955
932
|
iconName="home"
|
|
956
933
|
iconColor="var(--axebow-primary)"
|
|
957
|
-
size="
|
|
934
|
+
size="medium"
|
|
958
935
|
style="display: inline-flex; align-items: center; justify-content: center; transform: scale(0.6665, 0.75);"
|
|
959
936
|
></axebow-icon>
|
|
960
937
|
<span class="font-normal">/</span>
|
|
@@ -1344,7 +1321,7 @@ var AxebowSearch = class AxebowSearch extends LitElement {
|
|
|
1344
1321
|
render() {
|
|
1345
1322
|
return html`
|
|
1346
1323
|
<sl-input placeholder=${this.placeholder} .value=${this.value} clearable @sl-input=${this._onInput} @sl-clear=${this._onClear}>
|
|
1347
|
-
<axebow-icon slot="prefix" iconName="search" iconColor="var(--axebow-gray)" size="
|
|
1324
|
+
<axebow-icon slot="prefix" iconName="search" iconColor="var(--axebow-gray)" size="small"></axebow-icon>
|
|
1348
1325
|
</sl-input>
|
|
1349
1326
|
`;
|
|
1350
1327
|
}
|
|
@@ -1355,12 +1332,6 @@ __decorate([property({ type: String })], AxebowSearch.prototype, "width", void 0
|
|
|
1355
1332
|
AxebowSearch = __decorate([customElement("axebow-search")], AxebowSearch);
|
|
1356
1333
|
//#endregion
|
|
1357
1334
|
//#region src/components/axebow-input/axebow-input-base.ts
|
|
1358
|
-
/**
|
|
1359
|
-
* Template-method base for every axebow-*-input control: owns the shared
|
|
1360
|
-
* label/description/error wrapper markup and the disabled-aware value
|
|
1361
|
-
* change plumbing. Concrete inputs only implement their own field markup
|
|
1362
|
-
* via render().
|
|
1363
|
-
*/
|
|
1364
1335
|
var AxebowInputBase = class extends LitElement {
|
|
1365
1336
|
constructor(..._args) {
|
|
1366
1337
|
super(..._args);
|
|
@@ -1440,17 +1411,6 @@ var AxebowInputBase = class extends LitElement {
|
|
|
1440
1411
|
this.value = target.value;
|
|
1441
1412
|
this.callback?.(e);
|
|
1442
1413
|
}
|
|
1443
|
-
/**
|
|
1444
|
-
* Every inter-element gap here is a single explicit margin (no
|
|
1445
|
-
* contributing flex `gap` on the container) so each one is an
|
|
1446
|
-
* independently overridable CSS custom property. Defaults reproduce
|
|
1447
|
-
* the historical spacing (16px label->description, 12px
|
|
1448
|
-
* description->content/content->error, 8px label->content when there's
|
|
1449
|
-
* no description) - concrete inputs that need different spacing (e.g.
|
|
1450
|
-
* the carousel's tighter label/description rhythm) just set
|
|
1451
|
-
* `--axebow-input-label-gap` / `--axebow-input-description-gap` on
|
|
1452
|
-
* their own :host.
|
|
1453
|
-
*/
|
|
1454
1414
|
renderWrapper(content) {
|
|
1455
1415
|
return html`
|
|
1456
1416
|
<div class="flex flex-col justify-end w-full relative">
|
|
@@ -1489,12 +1449,12 @@ var AxebowInputBase = class extends LitElement {
|
|
|
1489
1449
|
return html`
|
|
1490
1450
|
<div class="fixed-field">
|
|
1491
1451
|
${this.label ? html`<div class="flex items-baseline gap-2 field-label">
|
|
1492
|
-
${this.required ? html`<p class="text-(--axebow-error) text-base leading-
|
|
1493
|
-
<h4 class="font-semibold text-base leading-
|
|
1452
|
+
${this.required ? html`<p class="text-(--axebow-error) text-base leading-4.25 m-0">*</p>` : ""}
|
|
1453
|
+
<h4 class="font-semibold text-base leading-4.25 m-0 overflow-hidden text-ellipsis">
|
|
1494
1454
|
${this.label}
|
|
1495
1455
|
</h4>
|
|
1496
1456
|
</div>` : ""}
|
|
1497
|
-
${this.description ? html`<p class="field-description text-base leading-
|
|
1457
|
+
${this.description ? html`<p class="field-description text-base leading-4.25 m-0" title="${this.description}">
|
|
1498
1458
|
${this.description}
|
|
1499
1459
|
</p>` : ""}
|
|
1500
1460
|
${content}
|
|
@@ -1561,6 +1521,7 @@ var AxebowNumericInput = class AxebowNumericInput extends AxebowInputBase {
|
|
|
1561
1521
|
this.integerOnly = false;
|
|
1562
1522
|
this.showStepper = true;
|
|
1563
1523
|
this.stepAmount = 1;
|
|
1524
|
+
this.fixedField = false;
|
|
1564
1525
|
}
|
|
1565
1526
|
static {
|
|
1566
1527
|
this.styles = [...AxebowInputBase.baseStyles, css`
|
|
@@ -1568,10 +1529,6 @@ var AxebowNumericInput = class AxebowNumericInput extends AxebowInputBase {
|
|
|
1568
1529
|
display: block;
|
|
1569
1530
|
width: 100%;
|
|
1570
1531
|
}
|
|
1571
|
-
/* Always off, unconditionally - the +/- stepper is the app-wide
|
|
1572
|
-
replacement for the browser's native number spinner, so the native
|
|
1573
|
-
one should never show regardless of whether the stepper itself is
|
|
1574
|
-
opted out for a given instance. */
|
|
1575
1532
|
sl-input::part(input)::-webkit-outer-spin-button,
|
|
1576
1533
|
sl-input::part(input)::-webkit-inner-spin-button {
|
|
1577
1534
|
-webkit-appearance: none;
|
|
@@ -1580,15 +1537,6 @@ var AxebowNumericInput = class AxebowNumericInput extends AxebowInputBase {
|
|
|
1580
1537
|
sl-input::part(input) {
|
|
1581
1538
|
-moz-appearance: textfield;
|
|
1582
1539
|
}
|
|
1583
|
-
/* All three guarded by their own host class - absent unless the
|
|
1584
|
-
matching property is set - so none ever touch sl-input's own
|
|
1585
|
-
default sizing/padding for every existing caller that doesn't opt
|
|
1586
|
-
in. fixedWidth only constrains the field itself (not the host, so
|
|
1587
|
-
the label above keeps its full width and doesn't wrap).
|
|
1588
|
-
!important is needed on the sizing declarations - Shoelace sets its
|
|
1589
|
-
own height internally off --sl-input-height-medium (not just the
|
|
1590
|
-
exposed 'base' part), so both are overridden together to reliably
|
|
1591
|
-
win regardless of which one actually drives the rendered size. */
|
|
1592
1540
|
:host(.axebow-fixed-width) sl-input {
|
|
1593
1541
|
width: var(--axebow-input-width) !important;
|
|
1594
1542
|
}
|
|
@@ -1607,11 +1555,12 @@ var AxebowNumericInput = class AxebowNumericInput extends AxebowInputBase {
|
|
|
1607
1555
|
margin: 0;
|
|
1608
1556
|
padding: 0;
|
|
1609
1557
|
}
|
|
1610
|
-
|
|
1611
|
-
|
|
1612
|
-
|
|
1613
|
-
|
|
1614
|
-
|
|
1558
|
+
.fixed-field sl-input::part(base) {
|
|
1559
|
+
height: 2.5rem;
|
|
1560
|
+
}
|
|
1561
|
+
:host(.axebow-fixed-min-width) .fixed-field {
|
|
1562
|
+
min-width: var(--axebow-input-min-width) !important;
|
|
1563
|
+
}
|
|
1615
1564
|
.axebow-numeric-stepper {
|
|
1616
1565
|
display: flex;
|
|
1617
1566
|
flex-direction: column;
|
|
@@ -1660,6 +1609,13 @@ var AxebowNumericInput = class AxebowNumericInput extends AxebowInputBase {
|
|
|
1660
1609
|
this.classList.remove("axebow-fixed-height");
|
|
1661
1610
|
}
|
|
1662
1611
|
if (changed.has("showStepper")) this.classList.toggle("axebow-has-stepper", this.showStepper);
|
|
1612
|
+
if (changed.has("minWidth")) if (this.minWidth) {
|
|
1613
|
+
this.style.setProperty("--axebow-input-min-width", this.minWidth);
|
|
1614
|
+
this.classList.add("axebow-fixed-min-width");
|
|
1615
|
+
} else {
|
|
1616
|
+
this.style.removeProperty("--axebow-input-min-width");
|
|
1617
|
+
this.classList.remove("axebow-fixed-min-width");
|
|
1618
|
+
}
|
|
1663
1619
|
}
|
|
1664
1620
|
handleChange(e) {
|
|
1665
1621
|
if (this.disabled) return;
|
|
@@ -1702,7 +1658,7 @@ var AxebowNumericInput = class AxebowNumericInput extends AxebowInputBase {
|
|
|
1702
1658
|
aria-label="increment"
|
|
1703
1659
|
@click=${() => this._bumpValue(1)}
|
|
1704
1660
|
>
|
|
1705
|
-
<axebow-icon iconName="add" iconColor="var(--axebow-tertiary)" size="
|
|
1661
|
+
<axebow-icon iconName="add" iconColor="var(--axebow-tertiary)" size="small"></axebow-icon>
|
|
1706
1662
|
</button>
|
|
1707
1663
|
<button
|
|
1708
1664
|
type="button"
|
|
@@ -1711,15 +1667,14 @@ var AxebowNumericInput = class AxebowNumericInput extends AxebowInputBase {
|
|
|
1711
1667
|
aria-label="decrement"
|
|
1712
1668
|
@click=${() => this._bumpValue(-1)}
|
|
1713
1669
|
>
|
|
1714
|
-
<axebow-icon iconName="remove" iconColor="var(--axebow-tertiary)" size="
|
|
1670
|
+
<axebow-icon iconName="remove" iconColor="var(--axebow-tertiary)" size="small"></axebow-icon>
|
|
1715
1671
|
</button>
|
|
1716
1672
|
</div>
|
|
1717
1673
|
`;
|
|
1718
1674
|
}
|
|
1719
1675
|
render() {
|
|
1720
|
-
const
|
|
1721
|
-
|
|
1722
|
-
<div class="${containerClass}">
|
|
1676
|
+
const content = html`
|
|
1677
|
+
<div class="${this.hasError ? "input-error" : ""}">
|
|
1723
1678
|
<sl-input
|
|
1724
1679
|
type="number"
|
|
1725
1680
|
placeholder="${this.placeholder}"
|
|
@@ -1734,7 +1689,8 @@ var AxebowNumericInput = class AxebowNumericInput extends AxebowInputBase {
|
|
|
1734
1689
|
${this._renderStepper()}
|
|
1735
1690
|
</sl-input>
|
|
1736
1691
|
</div>
|
|
1737
|
-
|
|
1692
|
+
`;
|
|
1693
|
+
return this.fixedField ? this.renderFixedField(content) : this.renderWrapper(content);
|
|
1738
1694
|
}
|
|
1739
1695
|
};
|
|
1740
1696
|
__decorate([property({ type: Number })], AxebowNumericInput.prototype, "max", void 0);
|
|
@@ -1744,6 +1700,8 @@ __decorate([property({ type: String })], AxebowNumericInput.prototype, "fixedWid
|
|
|
1744
1700
|
__decorate([property({ type: String })], AxebowNumericInput.prototype, "fixedHeight", void 0);
|
|
1745
1701
|
__decorate([property({ type: Boolean })], AxebowNumericInput.prototype, "showStepper", void 0);
|
|
1746
1702
|
__decorate([property({ type: Number })], AxebowNumericInput.prototype, "stepAmount", void 0);
|
|
1703
|
+
__decorate([property({ type: Boolean })], AxebowNumericInput.prototype, "fixedField", void 0);
|
|
1704
|
+
__decorate([property({ type: String })], AxebowNumericInput.prototype, "minWidth", void 0);
|
|
1747
1705
|
AxebowNumericInput = __decorate([customElement("axebow-numeric-input")], AxebowNumericInput);
|
|
1748
1706
|
//#endregion
|
|
1749
1707
|
//#region src/components/axebow-input/axebow-checkbox-input.ts
|
|
@@ -1799,14 +1757,14 @@ AxebowCheckboxInput = __decorate([customElement("axebow-checkbox-input")], Axebo
|
|
|
1799
1757
|
var SELECTOR_MAX_WIDTH_PX = 720;
|
|
1800
1758
|
var CARD_HEIGHT_PX = 54;
|
|
1801
1759
|
var CARD_GAP_PX = 12;
|
|
1802
|
-
function slidesPerPageFor(containerWidthPx) {
|
|
1760
|
+
function slidesPerPageFor$1(containerWidthPx) {
|
|
1803
1761
|
return (containerWidthPx + CARD_GAP_PX) / 132;
|
|
1804
1762
|
}
|
|
1805
1763
|
var AxebowCarouselInput = class AxebowCarouselInput extends AxebowInputBase {
|
|
1806
1764
|
constructor(..._args) {
|
|
1807
1765
|
super(..._args);
|
|
1808
1766
|
this.carouselItems = [];
|
|
1809
|
-
this._slidesPerPage = slidesPerPageFor(SELECTOR_MAX_WIDTH_PX);
|
|
1767
|
+
this._slidesPerPage = slidesPerPageFor$1(SELECTOR_MAX_WIDTH_PX);
|
|
1810
1768
|
}
|
|
1811
1769
|
static {
|
|
1812
1770
|
this.styles = [...AxebowInputBase.baseStyles, css`
|
|
@@ -1839,7 +1797,7 @@ var AxebowCarouselInput = class AxebowCarouselInput extends AxebowInputBase {
|
|
|
1839
1797
|
super.connectedCallback();
|
|
1840
1798
|
this._resizeObserver = new ResizeObserver((entries) => {
|
|
1841
1799
|
const width = entries[0]?.contentRect.width;
|
|
1842
|
-
if (width) this._slidesPerPage = slidesPerPageFor(width);
|
|
1800
|
+
if (width) this._slidesPerPage = slidesPerPageFor$1(width);
|
|
1843
1801
|
});
|
|
1844
1802
|
}
|
|
1845
1803
|
disconnectedCallback() {
|
|
@@ -1945,8 +1903,21 @@ var AxebowSelectInput = class AxebowSelectInput extends AxebowInputBase {
|
|
|
1945
1903
|
.fixed-field sl-select::part(display-input) {
|
|
1946
1904
|
font-size: 0.875rem;
|
|
1947
1905
|
}
|
|
1906
|
+
:host(.axebow-fixed-min-width) .fixed-field {
|
|
1907
|
+
min-width: var(--axebow-input-min-width) !important;
|
|
1908
|
+
}
|
|
1948
1909
|
`];
|
|
1949
1910
|
}
|
|
1911
|
+
updated(changed) {
|
|
1912
|
+
super.updated(changed);
|
|
1913
|
+
if (changed.has("minWidth")) if (this.minWidth) {
|
|
1914
|
+
this.style.setProperty("--axebow-input-min-width", this.minWidth);
|
|
1915
|
+
this.classList.add("axebow-fixed-min-width");
|
|
1916
|
+
} else {
|
|
1917
|
+
this.style.removeProperty("--axebow-input-min-width");
|
|
1918
|
+
this.classList.remove("axebow-fixed-min-width");
|
|
1919
|
+
}
|
|
1920
|
+
}
|
|
1950
1921
|
handleSelectChange(e) {
|
|
1951
1922
|
if (this.disabled) return;
|
|
1952
1923
|
const target = e.target;
|
|
@@ -2062,6 +2033,7 @@ var AxebowSelectInput = class AxebowSelectInput extends AxebowInputBase {
|
|
|
2062
2033
|
return this.compact ? this.renderWrapper(content) : this.renderFixedField(content);
|
|
2063
2034
|
}
|
|
2064
2035
|
};
|
|
2036
|
+
__decorate([property({ type: String })], AxebowSelectInput.prototype, "minWidth", void 0);
|
|
2065
2037
|
__decorate([property({ type: Array })], AxebowSelectInput.prototype, "options", void 0);
|
|
2066
2038
|
__decorate([property({ type: Boolean })], AxebowSelectInput.prototype, "allowAddNew", void 0);
|
|
2067
2039
|
__decorate([property({ type: String })], AxebowSelectInput.prototype, "addNewLabel", void 0);
|
|
@@ -2101,6 +2073,7 @@ var AxebowInput = class AxebowInput extends LitElement {
|
|
|
2101
2073
|
this.compact = false;
|
|
2102
2074
|
this.showStepper = true;
|
|
2103
2075
|
this.stepAmount = 1;
|
|
2076
|
+
this.fixedField = false;
|
|
2104
2077
|
}
|
|
2105
2078
|
static {
|
|
2106
2079
|
this.styles = [
|
|
@@ -2149,6 +2122,8 @@ var AxebowInput = class AxebowInput extends LitElement {
|
|
|
2149
2122
|
.fixedHeight=${this.fixedHeight}
|
|
2150
2123
|
.showStepper=${this.showStepper}
|
|
2151
2124
|
.stepAmount=${this.stepAmount}
|
|
2125
|
+
.fixedField=${this.fixedField}
|
|
2126
|
+
.minWidth=${this.minWidth}
|
|
2152
2127
|
></axebow-numeric-input>
|
|
2153
2128
|
`;
|
|
2154
2129
|
case "integer": return html`
|
|
@@ -2170,6 +2145,8 @@ var AxebowInput = class AxebowInput extends LitElement {
|
|
|
2170
2145
|
.fixedHeight=${this.fixedHeight}
|
|
2171
2146
|
.showStepper=${this.showStepper}
|
|
2172
2147
|
.stepAmount=${this.stepAmount}
|
|
2148
|
+
.fixedField=${this.fixedField}
|
|
2149
|
+
.minWidth=${this.minWidth}
|
|
2173
2150
|
></axebow-numeric-input>
|
|
2174
2151
|
`;
|
|
2175
2152
|
case "select": return html`
|
|
@@ -2191,6 +2168,7 @@ var AxebowInput = class AxebowInput extends LitElement {
|
|
|
2191
2168
|
.clearable=${this.clearable}
|
|
2192
2169
|
.onAddNew=${this.onAddNew}
|
|
2193
2170
|
.addDialogLabels=${this.addDialogLabels}
|
|
2171
|
+
.minWidth=${this.minWidth}
|
|
2194
2172
|
></axebow-select-input>
|
|
2195
2173
|
`;
|
|
2196
2174
|
case "checkbox": return html`
|
|
@@ -2281,8 +2259,10 @@ __decorate([property({ attribute: false })], AxebowInput.prototype, "addDialogLa
|
|
|
2281
2259
|
__decorate([property({ type: Boolean })], AxebowInput.prototype, "compact", void 0);
|
|
2282
2260
|
__decorate([property({ type: String })], AxebowInput.prototype, "fixedWidth", void 0);
|
|
2283
2261
|
__decorate([property({ type: String })], AxebowInput.prototype, "fixedHeight", void 0);
|
|
2262
|
+
__decorate([property({ type: String })], AxebowInput.prototype, "minWidth", void 0);
|
|
2284
2263
|
__decorate([property({ type: Boolean })], AxebowInput.prototype, "showStepper", void 0);
|
|
2285
2264
|
__decorate([property({ type: Number })], AxebowInput.prototype, "stepAmount", void 0);
|
|
2265
|
+
__decorate([property({ type: Boolean })], AxebowInput.prototype, "fixedField", void 0);
|
|
2286
2266
|
AxebowInput = __decorate([customElement("axebow-input")], AxebowInput);
|
|
2287
2267
|
//#endregion
|
|
2288
2268
|
//#region src/components/axebow-dialog/axebow-dialog.ts
|
|
@@ -2350,7 +2330,7 @@ var AxebowDialog = class AxebowDialog extends LitElement {
|
|
|
2350
2330
|
aria-label=${this.closeLabel}
|
|
2351
2331
|
@click=${() => this.onClose?.()}
|
|
2352
2332
|
>
|
|
2353
|
-
<axebow-icon iconName=${this.closeIcon} iconColor=${this.closeIconColor} size="
|
|
2333
|
+
<axebow-icon iconName=${this.closeIcon} iconColor=${this.closeIconColor} size="medium"></axebow-icon>
|
|
2354
2334
|
</button>
|
|
2355
2335
|
` : ""}
|
|
2356
2336
|
</div>
|
|
@@ -2538,7 +2518,7 @@ var AxebowCollaboratorsDialog = class AxebowCollaboratorsDialog extends LitEleme
|
|
|
2538
2518
|
<axebow-icon
|
|
2539
2519
|
iconName="person_add"
|
|
2540
2520
|
iconColor="var(--axebow-primary)"
|
|
2541
|
-
size="
|
|
2521
|
+
size="large"
|
|
2542
2522
|
class="shrink-0"
|
|
2543
2523
|
></axebow-icon>
|
|
2544
2524
|
<div class="flex flex-col gap-6 flex-1 min-w-0">
|
|
@@ -2549,7 +2529,7 @@ var AxebowCollaboratorsDialog = class AxebowCollaboratorsDialog extends LitEleme
|
|
|
2549
2529
|
aria-label="${this.labels.closeAriaLabel}"
|
|
2550
2530
|
@click=${() => this.onClose?.()}
|
|
2551
2531
|
>
|
|
2552
|
-
<axebow-icon iconName="close" size="
|
|
2532
|
+
<axebow-icon iconName="close" size="medium"></axebow-icon>
|
|
2553
2533
|
</button>
|
|
2554
2534
|
</div>
|
|
2555
2535
|
<p class="m-0 text-base text-gray-500">
|
|
@@ -2677,7 +2657,7 @@ var AxebowCollaboratorsDialog = class AxebowCollaboratorsDialog extends LitEleme
|
|
|
2677
2657
|
<span class="flex-1 text-center">${this._roleLabel(c.permission)}</span>
|
|
2678
2658
|
<axebow-icon
|
|
2679
2659
|
iconName="expand_more"
|
|
2680
|
-
size="
|
|
2660
|
+
size="small"
|
|
2681
2661
|
iconColor="var(--axebow-tertiary)"
|
|
2682
2662
|
></axebow-icon>
|
|
2683
2663
|
</button>
|
|
@@ -2698,7 +2678,7 @@ var AxebowCollaboratorsDialog = class AxebowCollaboratorsDialog extends LitEleme
|
|
|
2698
2678
|
${(this.selectedRole[c.email] || c.permission) === opt.value ? html`<axebow-icon
|
|
2699
2679
|
iconName="check"
|
|
2700
2680
|
iconColor="var(--axebow-primary)"
|
|
2701
|
-
size="
|
|
2681
|
+
size="small"
|
|
2702
2682
|
></axebow-icon>` : ""}
|
|
2703
2683
|
</div>
|
|
2704
2684
|
</sl-menu-item>
|
|
@@ -2715,7 +2695,7 @@ var AxebowCollaboratorsDialog = class AxebowCollaboratorsDialog extends LitEleme
|
|
|
2715
2695
|
<axebow-icon
|
|
2716
2696
|
iconName="sync"
|
|
2717
2697
|
iconColor="var(--axebow-tertiary)"
|
|
2718
|
-
size="
|
|
2698
|
+
size="small"
|
|
2719
2699
|
></axebow-icon>
|
|
2720
2700
|
<span class="text-blue-[var(--axebow-tertiary)] font-medium"
|
|
2721
2701
|
>${this.labels.updateUserAction}</span
|
|
@@ -2729,7 +2709,7 @@ var AxebowCollaboratorsDialog = class AxebowCollaboratorsDialog extends LitEleme
|
|
|
2729
2709
|
<axebow-icon
|
|
2730
2710
|
iconName="send"
|
|
2731
2711
|
iconColor="var(--axebow-tertiary)"
|
|
2732
|
-
size="
|
|
2712
|
+
size="small"
|
|
2733
2713
|
></axebow-icon>
|
|
2734
2714
|
<span class="text-blue-[var(--axebow-tertiary)]"
|
|
2735
2715
|
>${this.labels.resendInviteAction}</span
|
|
@@ -2743,7 +2723,7 @@ var AxebowCollaboratorsDialog = class AxebowCollaboratorsDialog extends LitEleme
|
|
|
2743
2723
|
<axebow-icon
|
|
2744
2724
|
iconName="delete"
|
|
2745
2725
|
iconColor="var(--axebow-error)"
|
|
2746
|
-
size="
|
|
2726
|
+
size="small"
|
|
2747
2727
|
></axebow-icon>
|
|
2748
2728
|
<span class="text-red-[var(--axebow-error)]"
|
|
2749
2729
|
>${this.labels.removeAction}</span
|
|
@@ -2821,548 +2801,6 @@ __decorate([property({ attribute: false })], AxebowCollaboratorsDialog.prototype
|
|
|
2821
2801
|
__decorate([property({ attribute: false })], AxebowCollaboratorsDialog.prototype, "onClose", void 0);
|
|
2822
2802
|
AxebowCollaboratorsDialog = __decorate([customElement("axebow-collaborators-dialog")], AxebowCollaboratorsDialog);
|
|
2823
2803
|
//#endregion
|
|
2824
|
-
//#region src/components/axebow-modals-confirmation/axebow-modals-confirmation.ts
|
|
2825
|
-
var AxebowModalsConfirmation = class AxebowModalsConfirmation extends LitElement {
|
|
2826
|
-
constructor(..._args) {
|
|
2827
|
-
super(..._args);
|
|
2828
|
-
this.open = true;
|
|
2829
|
-
this.inline = false;
|
|
2830
|
-
this.severity = "Neutral";
|
|
2831
|
-
this.intent = "Decisional";
|
|
2832
|
-
this.popUpTittle = "Pop-up tittle";
|
|
2833
|
-
this.textBody = "This account will consume all resources declared in the limits section after the first service is created.";
|
|
2834
|
-
this.showIconOnTitle = true;
|
|
2835
|
-
this.showForm = true;
|
|
2836
|
-
this.showHyperlink = false;
|
|
2837
|
-
this.hyperlinkText = "Need help?";
|
|
2838
|
-
this.showFooter = true;
|
|
2839
|
-
this.showSecondaryCTA = true;
|
|
2840
|
-
this.showPrimaryCTA = true;
|
|
2841
|
-
this.secondaryButtonText = "Secondary Button";
|
|
2842
|
-
this.primaryButtonText = "Primary Button";
|
|
2843
|
-
this.secondaryButtonDisabled = false;
|
|
2844
|
-
this.primaryButtonDisabled = false;
|
|
2845
|
-
this.canClose = true;
|
|
2846
|
-
this.entityName = "entity-name";
|
|
2847
|
-
this._providerUsername = "";
|
|
2848
|
-
this._providerPassword = "";
|
|
2849
|
-
this._domain = "";
|
|
2850
|
-
this._confirmText = "";
|
|
2851
|
-
this._showPassword = false;
|
|
2852
|
-
}
|
|
2853
|
-
static {
|
|
2854
|
-
this.styles = [unsafeCSS(tailwind_default), css`
|
|
2855
|
-
:host {
|
|
2856
|
-
display: block;
|
|
2857
|
-
font-family: 'Open Sans', system-ui, -apple-system, sans-serif;
|
|
2858
|
-
}
|
|
2859
|
-
|
|
2860
|
-
/* Shoelace Dialog Custom Overrides */
|
|
2861
|
-
sl-dialog::part(panel) {
|
|
2862
|
-
background-color: var(--axebow-confirmation-modal-bg, #f0f1f5);
|
|
2863
|
-
border-radius: 6px;
|
|
2864
|
-
box-shadow: 2px 2px 25px rgba(0, 0, 0, 0.1);
|
|
2865
|
-
padding: 0;
|
|
2866
|
-
width: 100%;
|
|
2867
|
-
max-width: 579px;
|
|
2868
|
-
overflow: hidden;
|
|
2869
|
-
}
|
|
2870
|
-
|
|
2871
|
-
sl-dialog::part(header),
|
|
2872
|
-
sl-dialog::part(header-actions) {
|
|
2873
|
-
display: none;
|
|
2874
|
-
}
|
|
2875
|
-
|
|
2876
|
-
sl-dialog::part(body) {
|
|
2877
|
-
padding: 24px;
|
|
2878
|
-
}
|
|
2879
|
-
|
|
2880
|
-
sl-dialog::part(footer) {
|
|
2881
|
-
padding: 0;
|
|
2882
|
-
}
|
|
2883
|
-
|
|
2884
|
-
/* Standalone container styles (when rendered inline or without dialog) */
|
|
2885
|
-
.modal-card {
|
|
2886
|
-
background-color: var(--axebow-confirmation-modal-bg, #f0f1f5);
|
|
2887
|
-
border-radius: 6px;
|
|
2888
|
-
box-shadow: 2px 2px 25px rgba(0, 0, 0, 0.1);
|
|
2889
|
-
padding: 24px;
|
|
2890
|
-
width: 100%;
|
|
2891
|
-
max-width: 579px;
|
|
2892
|
-
box-sizing: border-box;
|
|
2893
|
-
}
|
|
2894
|
-
|
|
2895
|
-
/* Form Input Styling */
|
|
2896
|
-
.form-field-input::part(base) {
|
|
2897
|
-
height: 40px;
|
|
2898
|
-
border-radius: 6px;
|
|
2899
|
-
border: 1px solid #dbdde4;
|
|
2900
|
-
background-color: #ffffff;
|
|
2901
|
-
padding-left: 12px;
|
|
2902
|
-
padding-right: 12px;
|
|
2903
|
-
font-size: 14px;
|
|
2904
|
-
font-family: 'Open Sans', sans-serif;
|
|
2905
|
-
color: #000000;
|
|
2906
|
-
box-shadow: none;
|
|
2907
|
-
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
|
2908
|
-
}
|
|
2909
|
-
|
|
2910
|
-
.form-field-input::part(base):hover {
|
|
2911
|
-
border-color: #b0b4be;
|
|
2912
|
-
}
|
|
2913
|
-
|
|
2914
|
-
.form-field-input::part(base):focus-within {
|
|
2915
|
-
border-color: #006bff;
|
|
2916
|
-
box-shadow: 0 0 0 2px rgba(0, 107, 255, 0.15);
|
|
2917
|
-
}
|
|
2918
|
-
|
|
2919
|
-
.form-field-input::part(input) {
|
|
2920
|
-
font-size: 14px;
|
|
2921
|
-
font-family: 'Open Sans', sans-serif;
|
|
2922
|
-
color: #000000;
|
|
2923
|
-
}
|
|
2924
|
-
|
|
2925
|
-
.form-field-input::part(input)::placeholder {
|
|
2926
|
-
color: #78787a;
|
|
2927
|
-
}
|
|
2928
|
-
|
|
2929
|
-
/* Buttons Styling */
|
|
2930
|
-
.modal-btn {
|
|
2931
|
-
width: 150px;
|
|
2932
|
-
height: 40px;
|
|
2933
|
-
border-radius: 6px;
|
|
2934
|
-
font-size: 14px;
|
|
2935
|
-
font-weight: 600;
|
|
2936
|
-
font-family: 'Open Sans', sans-serif;
|
|
2937
|
-
cursor: pointer;
|
|
2938
|
-
display: inline-flex;
|
|
2939
|
-
align-items: center;
|
|
2940
|
-
justify-content: center;
|
|
2941
|
-
transition: all 0.2s ease;
|
|
2942
|
-
box-sizing: border-box;
|
|
2943
|
-
}
|
|
2944
|
-
|
|
2945
|
-
.modal-btn:disabled {
|
|
2946
|
-
opacity: 0.5;
|
|
2947
|
-
cursor: not-allowed;
|
|
2948
|
-
}
|
|
2949
|
-
|
|
2950
|
-
/* Blue Primary Button */
|
|
2951
|
-
.btn-primary-blue {
|
|
2952
|
-
background-color: #006bff;
|
|
2953
|
-
color: #ffffff;
|
|
2954
|
-
border: none;
|
|
2955
|
-
}
|
|
2956
|
-
.btn-primary-blue:hover:not(:disabled) {
|
|
2957
|
-
background-color: #0056cc;
|
|
2958
|
-
}
|
|
2959
|
-
|
|
2960
|
-
/* Blue Secondary Button */
|
|
2961
|
-
.btn-secondary-blue {
|
|
2962
|
-
background-color: transparent;
|
|
2963
|
-
color: #006bff;
|
|
2964
|
-
border: 1px solid #006bff;
|
|
2965
|
-
}
|
|
2966
|
-
.btn-secondary-blue:hover:not(:disabled) {
|
|
2967
|
-
background-color: rgba(0, 107, 255, 0.05);
|
|
2968
|
-
}
|
|
2969
|
-
|
|
2970
|
-
/* Red Primary Button (Destructive) */
|
|
2971
|
-
.btn-primary-red {
|
|
2972
|
-
background-color: #e93a3a;
|
|
2973
|
-
color: #ffffff;
|
|
2974
|
-
border: none;
|
|
2975
|
-
}
|
|
2976
|
-
.btn-primary-red:hover:not(:disabled) {
|
|
2977
|
-
background-color: #d12b2b;
|
|
2978
|
-
}
|
|
2979
|
-
|
|
2980
|
-
/* Red Secondary Button (Destructive) */
|
|
2981
|
-
.btn-secondary-red {
|
|
2982
|
-
background-color: transparent;
|
|
2983
|
-
color: #e93a3a;
|
|
2984
|
-
border: 1px solid #e93a3a;
|
|
2985
|
-
}
|
|
2986
|
-
.btn-secondary-red:hover:not(:disabled) {
|
|
2987
|
-
background-color: rgba(233, 58, 58, 0.05);
|
|
2988
|
-
}
|
|
2989
|
-
|
|
2990
|
-
.modal-btn:disabled {
|
|
2991
|
-
opacity: 0.5;
|
|
2992
|
-
cursor: not-allowed;
|
|
2993
|
-
}
|
|
2994
|
-
`];
|
|
2995
|
-
}
|
|
2996
|
-
/** Alias for popUpTittle */
|
|
2997
|
-
get popUpTitle() {
|
|
2998
|
-
return this.popUpTittle;
|
|
2999
|
-
}
|
|
3000
|
-
set popUpTitle(value) {
|
|
3001
|
-
this.popUpTittle = value;
|
|
3002
|
-
}
|
|
3003
|
-
/**
|
|
3004
|
-
* Returns severity configuration according to design specifications:
|
|
3005
|
-
* - Success: green check_circle icon, standard blue buttons
|
|
3006
|
-
* - Error: red error icon, standard blue buttons
|
|
3007
|
-
* - Neutral: blue info icon, standard blue buttons
|
|
3008
|
-
* - Destructive: red error icon, RED buttons (#E93A3A)
|
|
3009
|
-
*/
|
|
3010
|
-
get _severityConfig() {
|
|
3011
|
-
if (this.iconName) return {
|
|
3012
|
-
icon: this.iconName,
|
|
3013
|
-
iconColor: this.iconColor ?? (this.severity === "Destructive" || this.severity === "Error" ? "#E93A3A" : "#006BFF"),
|
|
3014
|
-
isRedButtons: this.severity === "Destructive"
|
|
3015
|
-
};
|
|
3016
|
-
switch (this.severity) {
|
|
3017
|
-
case "Success": return {
|
|
3018
|
-
icon: "check_circle",
|
|
3019
|
-
iconColor: "#10B981",
|
|
3020
|
-
isRedButtons: false
|
|
3021
|
-
};
|
|
3022
|
-
case "Error": return {
|
|
3023
|
-
icon: "error",
|
|
3024
|
-
iconColor: "#E93A3A",
|
|
3025
|
-
isRedButtons: false
|
|
3026
|
-
};
|
|
3027
|
-
case "Destructive": return {
|
|
3028
|
-
icon: "error",
|
|
3029
|
-
iconColor: "#E93A3A",
|
|
3030
|
-
isRedButtons: true
|
|
3031
|
-
};
|
|
3032
|
-
default: return {
|
|
3033
|
-
icon: "info",
|
|
3034
|
-
iconColor: "#006BFF",
|
|
3035
|
-
isRedButtons: false
|
|
3036
|
-
};
|
|
3037
|
-
}
|
|
3038
|
-
}
|
|
3039
|
-
/**
|
|
3040
|
-
* Helper to retrieve current form payload object
|
|
3041
|
-
*/
|
|
3042
|
-
getFormData() {
|
|
3043
|
-
return {
|
|
3044
|
-
providerUsername: this._providerUsername,
|
|
3045
|
-
providerPassword: this._providerPassword,
|
|
3046
|
-
domain: this._domain,
|
|
3047
|
-
confirmText: this._confirmText
|
|
3048
|
-
};
|
|
3049
|
-
}
|
|
3050
|
-
/**
|
|
3051
|
-
* Reset form fields to initial empty state
|
|
3052
|
-
*/
|
|
3053
|
-
resetForm() {
|
|
3054
|
-
this._providerUsername = "";
|
|
3055
|
-
this._providerPassword = "";
|
|
3056
|
-
this._domain = "";
|
|
3057
|
-
this._confirmText = "";
|
|
3058
|
-
this._showPassword = false;
|
|
3059
|
-
}
|
|
3060
|
-
_notifyFormChange() {
|
|
3061
|
-
const formData = this.getFormData();
|
|
3062
|
-
this.dispatchEvent(new CustomEvent("axebow-form-change", {
|
|
3063
|
-
detail: formData,
|
|
3064
|
-
bubbles: true,
|
|
3065
|
-
composed: true
|
|
3066
|
-
}));
|
|
3067
|
-
}
|
|
3068
|
-
_handleClose() {
|
|
3069
|
-
this.dispatchEvent(new CustomEvent("axebow-close", {
|
|
3070
|
-
bubbles: true,
|
|
3071
|
-
composed: true
|
|
3072
|
-
}));
|
|
3073
|
-
if (!this.inline) this.open = false;
|
|
3074
|
-
}
|
|
3075
|
-
_handleSecondaryClick() {
|
|
3076
|
-
const payload = {
|
|
3077
|
-
severity: this.severity,
|
|
3078
|
-
intent: this.intent,
|
|
3079
|
-
formData: this.showForm ? this.getFormData() : void 0
|
|
3080
|
-
};
|
|
3081
|
-
this.dispatchEvent(new CustomEvent("axebow-cancel", {
|
|
3082
|
-
detail: payload,
|
|
3083
|
-
bubbles: true,
|
|
3084
|
-
composed: true
|
|
3085
|
-
}));
|
|
3086
|
-
}
|
|
3087
|
-
_handlePrimaryClick() {
|
|
3088
|
-
const payload = {
|
|
3089
|
-
severity: this.severity,
|
|
3090
|
-
intent: this.intent,
|
|
3091
|
-
formData: this.showForm ? this.getFormData() : void 0
|
|
3092
|
-
};
|
|
3093
|
-
this.dispatchEvent(new CustomEvent("axebow-confirm", {
|
|
3094
|
-
detail: payload,
|
|
3095
|
-
bubbles: true,
|
|
3096
|
-
composed: true
|
|
3097
|
-
}));
|
|
3098
|
-
}
|
|
3099
|
-
_handleHyperlinkClick(e) {
|
|
3100
|
-
if (this.hyperlinkHref) return;
|
|
3101
|
-
e.preventDefault();
|
|
3102
|
-
this.dispatchEvent(new CustomEvent("axebow-hyperlink-click", {
|
|
3103
|
-
bubbles: true,
|
|
3104
|
-
composed: true
|
|
3105
|
-
}));
|
|
3106
|
-
}
|
|
3107
|
-
/**
|
|
3108
|
-
* Renders the top header section (Icon 32x32 + Title + Close icon 24x24)
|
|
3109
|
-
*/
|
|
3110
|
-
_renderHeader() {
|
|
3111
|
-
const { icon, iconColor } = this._severityConfig;
|
|
3112
|
-
return html`
|
|
3113
|
-
<div class="flex items-start justify-between w-full">
|
|
3114
|
-
<div class="flex items-start gap-4 min-w-0 flex-1">
|
|
3115
|
-
${this.showIconOnTitle ? html`
|
|
3116
|
-
<div class="shrink-0 flex items-center justify-center w-8 h-8">
|
|
3117
|
-
<axebow-icon iconName=${icon} iconColor=${iconColor} size="3xl"></axebow-icon>
|
|
3118
|
-
</div>
|
|
3119
|
-
` : html`<div class="shrink-0 w-8 h-8" aria-hidden="true"></div>`}
|
|
3120
|
-
<div class="flex flex-col gap-6 flex-1 min-w-0">
|
|
3121
|
-
<h3 class="m-0 text-xl font-semibold text-black leading-tight truncate">
|
|
3122
|
-
${this.popUpTittle}
|
|
3123
|
-
</h3>
|
|
3124
|
-
${this.textBody ? html`<p class="m-0 text-sm text-black font-normal leading-relaxed">${this.textBody}</p>` : html`<slot name="body"></slot>`}
|
|
3125
|
-
</div>
|
|
3126
|
-
</div>
|
|
3127
|
-
|
|
3128
|
-
${this.canClose ? html`
|
|
3129
|
-
<button
|
|
3130
|
-
type="button"
|
|
3131
|
-
class="p-0 border-0 bg-transparent cursor-pointer flex items-center justify-center shrink-0 text-[#78787A] hover:text-black transition-colors ml-4"
|
|
3132
|
-
aria-label="Close dialog"
|
|
3133
|
-
@click=${this._handleClose}
|
|
3134
|
-
>
|
|
3135
|
-
<axebow-icon iconName="cancel" iconColor="currentColor" size="2xl"></axebow-icon>
|
|
3136
|
-
</button>
|
|
3137
|
-
` : ""}
|
|
3138
|
-
</div>
|
|
3139
|
-
`;
|
|
3140
|
-
}
|
|
3141
|
-
/**
|
|
3142
|
-
* Renders the 4-field confirmation form (indented 47px from left, gap 16px between fields)
|
|
3143
|
-
*/
|
|
3144
|
-
_renderForm() {
|
|
3145
|
-
if (!this.showForm) return "";
|
|
3146
|
-
const expectedConfirmPlaceholder = `delete+[${this.entityName}]`;
|
|
3147
|
-
return html`
|
|
3148
|
-
<div class="pl-11.75 flex flex-col gap-4 w-full box-border">
|
|
3149
|
-
<slot name="form">
|
|
3150
|
-
<!-- Field 1: Provider username -->
|
|
3151
|
-
<div class="flex flex-col gap-2 w-full">
|
|
3152
|
-
<label class="text-sm font-semibold text-black m-0">Provider username</label>
|
|
3153
|
-
<sl-input
|
|
3154
|
-
class="form-field-input"
|
|
3155
|
-
placeholder="Enter user"
|
|
3156
|
-
.value=${this._providerUsername}
|
|
3157
|
-
@sl-input=${(e) => {
|
|
3158
|
-
this._providerUsername = e.target.value;
|
|
3159
|
-
this._notifyFormChange();
|
|
3160
|
-
}}
|
|
3161
|
-
></sl-input>
|
|
3162
|
-
</div>
|
|
3163
|
-
|
|
3164
|
-
<!-- Field 2: Provider password with toggle eye icon -->
|
|
3165
|
-
<div class="flex flex-col gap-2 w-full">
|
|
3166
|
-
<label class="text-sm font-semibold text-black m-0">Provider password</label>
|
|
3167
|
-
<sl-input
|
|
3168
|
-
class="form-field-input"
|
|
3169
|
-
type=${this._showPassword ? "text" : "password"}
|
|
3170
|
-
placeholder="Enter password"
|
|
3171
|
-
.value=${this._providerPassword}
|
|
3172
|
-
@sl-input=${(e) => {
|
|
3173
|
-
this._providerPassword = e.target.value;
|
|
3174
|
-
this._notifyFormChange();
|
|
3175
|
-
}}
|
|
3176
|
-
>
|
|
3177
|
-
<button
|
|
3178
|
-
slot="suffix"
|
|
3179
|
-
type="button"
|
|
3180
|
-
class="p-0 border-0 bg-transparent cursor-pointer flex items-center justify-center text-[#78787A] hover:text-black transition-colors"
|
|
3181
|
-
@click=${() => this._showPassword = !this._showPassword}
|
|
3182
|
-
aria-label=${this._showPassword ? "Hide password" : "Show password"}
|
|
3183
|
-
>
|
|
3184
|
-
<axebow-icon
|
|
3185
|
-
iconName=${this._showPassword ? "visibility_off" : "visibility"}
|
|
3186
|
-
iconColor="currentColor"
|
|
3187
|
-
size="xl"
|
|
3188
|
-
></axebow-icon>
|
|
3189
|
-
</button>
|
|
3190
|
-
</sl-input>
|
|
3191
|
-
</div>
|
|
3192
|
-
|
|
3193
|
-
<!-- Field 3: Domain -->
|
|
3194
|
-
<div class="flex flex-col gap-2 w-full">
|
|
3195
|
-
<label class="text-sm font-semibold text-black m-0">Domain</label>
|
|
3196
|
-
<sl-input
|
|
3197
|
-
class="form-field-input"
|
|
3198
|
-
placeholder="Enter domain"
|
|
3199
|
-
.value=${this._domain}
|
|
3200
|
-
@sl-input=${(e) => {
|
|
3201
|
-
this._domain = e.target.value;
|
|
3202
|
-
this._notifyFormChange();
|
|
3203
|
-
}}
|
|
3204
|
-
></sl-input>
|
|
3205
|
-
</div>
|
|
3206
|
-
|
|
3207
|
-
<!-- Field 4: Confirmation delete field -->
|
|
3208
|
-
<div class="flex flex-col gap-2 w-full">
|
|
3209
|
-
<label class="text-sm font-semibold text-black m-0 flex items-center gap-1">
|
|
3210
|
-
<span class="text-[#E93A3A] font-bold">*</span>
|
|
3211
|
-
<span>Type "${expectedConfirmPlaceholder}" to confirm:</span>
|
|
3212
|
-
</label>
|
|
3213
|
-
<sl-input
|
|
3214
|
-
class="form-field-input"
|
|
3215
|
-
placeholder=${expectedConfirmPlaceholder}
|
|
3216
|
-
.value=${this._confirmText}
|
|
3217
|
-
@sl-input=${(e) => {
|
|
3218
|
-
this._confirmText = e.target.value;
|
|
3219
|
-
this._notifyFormChange();
|
|
3220
|
-
}}
|
|
3221
|
-
></sl-input>
|
|
3222
|
-
</div>
|
|
3223
|
-
</slot>
|
|
3224
|
-
</div>
|
|
3225
|
-
`;
|
|
3226
|
-
}
|
|
3227
|
-
/**
|
|
3228
|
-
* Renders the action footer (Width 483px, indented 47px, hyperlink + buttons)
|
|
3229
|
-
*/
|
|
3230
|
-
_renderFooter() {
|
|
3231
|
-
if (!this.showFooter) return "";
|
|
3232
|
-
const isDestructive = this.severity === "Destructive";
|
|
3233
|
-
const primaryVariant = isDestructive ? "danger" : "primary";
|
|
3234
|
-
const secondaryVariant = isDestructive ? "danger" : "primary";
|
|
3235
|
-
return html`
|
|
3236
|
-
<div class="pl-11.75 w-full flex items-center justify-between gap-4 box-border">
|
|
3237
|
-
<slot name="footer">
|
|
3238
|
-
<!-- Optional Hyperlink -->
|
|
3239
|
-
<div>
|
|
3240
|
-
${this.showHyperlink ? html`
|
|
3241
|
-
<slot name="hyperlink">
|
|
3242
|
-
<a
|
|
3243
|
-
href=${this.hyperlinkHref ?? "#"}
|
|
3244
|
-
class="text-sm font-semibold text-[#006BFF] hover:underline cursor-pointer no-underline"
|
|
3245
|
-
@click=${this._handleHyperlinkClick}
|
|
3246
|
-
>
|
|
3247
|
-
${this.hyperlinkText}
|
|
3248
|
-
</a>
|
|
3249
|
-
</slot>
|
|
3250
|
-
` : ""}
|
|
3251
|
-
</div>
|
|
3252
|
-
|
|
3253
|
-
<!-- Action Buttons -->
|
|
3254
|
-
<div class="flex items-center gap-4 ml-auto">
|
|
3255
|
-
${this.showSecondaryCTA ? html`
|
|
3256
|
-
<axebow-button
|
|
3257
|
-
variant=${secondaryVariant}
|
|
3258
|
-
?outline=${true}
|
|
3259
|
-
fixedHeight="40px"
|
|
3260
|
-
.disabled=${this.secondaryButtonDisabled}
|
|
3261
|
-
@click=${this._handleSecondaryClick}
|
|
3262
|
-
>
|
|
3263
|
-
<span class="flex items-center justify-center gap-1">
|
|
3264
|
-
<span>${this.secondaryButtonText}</span>
|
|
3265
|
-
${this.secondaryButtonTooltip ? html`
|
|
3266
|
-
<axebow-tooltip content=${this.secondaryButtonTooltip} placement="top">
|
|
3267
|
-
<axebow-icon iconName="info" iconColor="currentColor" size="md" class="shrink-0 cursor-pointer ml-1"></axebow-icon>
|
|
3268
|
-
</axebow-tooltip>
|
|
3269
|
-
` : ""}
|
|
3270
|
-
</span>
|
|
3271
|
-
</axebow-button>
|
|
3272
|
-
` : ""}
|
|
3273
|
-
${this.showPrimaryCTA ? html`
|
|
3274
|
-
<axebow-button
|
|
3275
|
-
variant=${primaryVariant}
|
|
3276
|
-
fixedHeight="40px"
|
|
3277
|
-
.disabled=${this.primaryButtonDisabled}
|
|
3278
|
-
@click=${this._handlePrimaryClick}
|
|
3279
|
-
>
|
|
3280
|
-
<span class="flex items-center justify-center gap-1">
|
|
3281
|
-
<span>${this.primaryButtonText}</span>
|
|
3282
|
-
${this.primaryButtonTooltip ? html`
|
|
3283
|
-
<axebow-tooltip content=${this.primaryButtonTooltip} placement="top">
|
|
3284
|
-
<axebow-icon iconName="info" iconColor="currentColor" size="md" class="shrink-0 cursor-pointer ml-1"></axebow-icon>
|
|
3285
|
-
</axebow-tooltip>
|
|
3286
|
-
` : ""}
|
|
3287
|
-
</span>
|
|
3288
|
-
</axebow-button>
|
|
3289
|
-
` : ""}
|
|
3290
|
-
</div>
|
|
3291
|
-
</slot>
|
|
3292
|
-
</div>
|
|
3293
|
-
`;
|
|
3294
|
-
}
|
|
3295
|
-
/**
|
|
3296
|
-
* Renders the complete modal content layout (flex column, gap 32px)
|
|
3297
|
-
*/
|
|
3298
|
-
_renderContent() {
|
|
3299
|
-
return html`
|
|
3300
|
-
<div class="flex flex-col gap-8 w-full">
|
|
3301
|
-
${this._renderHeader()}
|
|
3302
|
-
${this._renderForm()}
|
|
3303
|
-
${this._renderFooter()}
|
|
3304
|
-
</div>
|
|
3305
|
-
`;
|
|
3306
|
-
}
|
|
3307
|
-
render() {
|
|
3308
|
-
const bgStyle = this.backgroundColor ? `--axebow-confirmation-modal-bg: ${this.backgroundColor}; background-color: ${this.backgroundColor};` : "";
|
|
3309
|
-
if (this.inline) return html`
|
|
3310
|
-
<div class="modal-card" style=${bgStyle}>
|
|
3311
|
-
${this._renderContent()}
|
|
3312
|
-
</div>
|
|
3313
|
-
`;
|
|
3314
|
-
return html`
|
|
3315
|
-
<sl-dialog
|
|
3316
|
-
?open=${this.open}
|
|
3317
|
-
no-header
|
|
3318
|
-
label=${this.popUpTittle}
|
|
3319
|
-
style=${bgStyle}
|
|
3320
|
-
@sl-request-close=${(e) => {
|
|
3321
|
-
e.preventDefault();
|
|
3322
|
-
this._handleClose();
|
|
3323
|
-
}}
|
|
3324
|
-
>
|
|
3325
|
-
${this._renderContent()}
|
|
3326
|
-
</sl-dialog>
|
|
3327
|
-
`;
|
|
3328
|
-
}
|
|
3329
|
-
};
|
|
3330
|
-
__decorate([property({
|
|
3331
|
-
type: Boolean,
|
|
3332
|
-
reflect: true
|
|
3333
|
-
})], AxebowModalsConfirmation.prototype, "open", void 0);
|
|
3334
|
-
__decorate([property({ type: Boolean })], AxebowModalsConfirmation.prototype, "inline", void 0);
|
|
3335
|
-
__decorate([property({ type: String })], AxebowModalsConfirmation.prototype, "backgroundColor", void 0);
|
|
3336
|
-
__decorate([property({ type: String })], AxebowModalsConfirmation.prototype, "severity", void 0);
|
|
3337
|
-
__decorate([property({ type: String })], AxebowModalsConfirmation.prototype, "intent", void 0);
|
|
3338
|
-
__decorate([property({ type: String })], AxebowModalsConfirmation.prototype, "popUpTittle", void 0);
|
|
3339
|
-
__decorate([property({ type: String })], AxebowModalsConfirmation.prototype, "popUpTitle", null);
|
|
3340
|
-
__decorate([property({ type: String })], AxebowModalsConfirmation.prototype, "textBody", void 0);
|
|
3341
|
-
__decorate([property({ type: Boolean })], AxebowModalsConfirmation.prototype, "showIconOnTitle", void 0);
|
|
3342
|
-
__decorate([property({ type: Boolean })], AxebowModalsConfirmation.prototype, "showForm", void 0);
|
|
3343
|
-
__decorate([property({ type: Boolean })], AxebowModalsConfirmation.prototype, "showHyperlink", void 0);
|
|
3344
|
-
__decorate([property({ type: String })], AxebowModalsConfirmation.prototype, "hyperlinkText", void 0);
|
|
3345
|
-
__decorate([property({ type: String })], AxebowModalsConfirmation.prototype, "hyperlinkHref", void 0);
|
|
3346
|
-
__decorate([property({ type: Boolean })], AxebowModalsConfirmation.prototype, "showFooter", void 0);
|
|
3347
|
-
__decorate([property({ type: Boolean })], AxebowModalsConfirmation.prototype, "showSecondaryCTA", void 0);
|
|
3348
|
-
__decorate([property({ type: Boolean })], AxebowModalsConfirmation.prototype, "showPrimaryCTA", void 0);
|
|
3349
|
-
__decorate([property({ type: String })], AxebowModalsConfirmation.prototype, "secondaryButtonText", void 0);
|
|
3350
|
-
__decorate([property({ type: String })], AxebowModalsConfirmation.prototype, "primaryButtonText", void 0);
|
|
3351
|
-
__decorate([property({ type: String })], AxebowModalsConfirmation.prototype, "secondaryButtonTooltip", void 0);
|
|
3352
|
-
__decorate([property({ type: Boolean })], AxebowModalsConfirmation.prototype, "secondaryButtonDisabled", void 0);
|
|
3353
|
-
__decorate([property({ type: String })], AxebowModalsConfirmation.prototype, "primaryButtonTooltip", void 0);
|
|
3354
|
-
__decorate([property({ type: Boolean })], AxebowModalsConfirmation.prototype, "primaryButtonDisabled", void 0);
|
|
3355
|
-
__decorate([property({ type: Boolean })], AxebowModalsConfirmation.prototype, "canClose", void 0);
|
|
3356
|
-
__decorate([property({ type: String })], AxebowModalsConfirmation.prototype, "entityName", void 0);
|
|
3357
|
-
__decorate([state()], AxebowModalsConfirmation.prototype, "_providerUsername", void 0);
|
|
3358
|
-
__decorate([state()], AxebowModalsConfirmation.prototype, "_providerPassword", void 0);
|
|
3359
|
-
__decorate([state()], AxebowModalsConfirmation.prototype, "_domain", void 0);
|
|
3360
|
-
__decorate([state()], AxebowModalsConfirmation.prototype, "_confirmText", void 0);
|
|
3361
|
-
__decorate([state()], AxebowModalsConfirmation.prototype, "_showPassword", void 0);
|
|
3362
|
-
__decorate([property({ type: String })], AxebowModalsConfirmation.prototype, "iconName", void 0);
|
|
3363
|
-
__decorate([property({ type: String })], AxebowModalsConfirmation.prototype, "iconColor", void 0);
|
|
3364
|
-
AxebowModalsConfirmation = __decorate([customElement("axebow-modals-confirmation")], AxebowModalsConfirmation);
|
|
3365
|
-
//#endregion
|
|
3366
2804
|
//#region src/components/axebow-limits-counter/axebow-limits-counter.ts
|
|
3367
2805
|
var AxebowLimitsCounter = class AxebowLimitsCounter extends LitElement {
|
|
3368
2806
|
constructor(..._args) {
|
|
@@ -3431,119 +2869,7 @@ var AxebowResourcesCounter = class AxebowResourcesCounter extends LitElement {
|
|
|
3431
2869
|
}
|
|
3432
2870
|
};
|
|
3433
2871
|
__decorate([property({ type: Array })], AxebowResourcesCounter.prototype, "items", void 0);
|
|
3434
|
-
AxebowResourcesCounter = __decorate([customElement("axebow-resources-counter")], AxebowResourcesCounter);
|
|
3435
|
-
//#endregion
|
|
3436
|
-
//#region src/components/axebow-tooltip/axebow-tooltip.ts
|
|
3437
|
-
var AxebowTooltip = class AxebowTooltip extends LitElement {
|
|
3438
|
-
constructor(..._args) {
|
|
3439
|
-
super(..._args);
|
|
3440
|
-
this.icon = "info";
|
|
3441
|
-
this.color = "var(--axebow-primary)";
|
|
3442
|
-
this.size = "xl";
|
|
3443
|
-
this.content = "";
|
|
3444
|
-
this.placement = "top";
|
|
3445
|
-
this.hoist = true;
|
|
3446
|
-
this.disabled = false;
|
|
3447
|
-
}
|
|
3448
|
-
static {
|
|
3449
|
-
this.styles = [unsafeCSS(tailwind_default), css`
|
|
3450
|
-
:host {
|
|
3451
|
-
display: inline-flex;
|
|
3452
|
-
align-items: center;
|
|
3453
|
-
}
|
|
3454
|
-
`];
|
|
3455
|
-
}
|
|
3456
|
-
render() {
|
|
3457
|
-
return html`
|
|
3458
|
-
<sl-tooltip
|
|
3459
|
-
placement=${this.placement}
|
|
3460
|
-
?hoist=${this.hoist}
|
|
3461
|
-
?disabled=${this.disabled}
|
|
3462
|
-
exportparts="body, base, popup, arrow"
|
|
3463
|
-
>
|
|
3464
|
-
<div slot="content">
|
|
3465
|
-
${this.content ? this.content : html`<slot name="content"></slot>`}
|
|
3466
|
-
</div>
|
|
3467
|
-
<slot>
|
|
3468
|
-
<axebow-icon
|
|
3469
|
-
.iconName=${this.icon}
|
|
3470
|
-
.iconColor=${this.color}
|
|
3471
|
-
.size=${this.size}
|
|
3472
|
-
class="cursor-pointer flex items-center justify-center"
|
|
3473
|
-
></axebow-icon>
|
|
3474
|
-
</slot>
|
|
3475
|
-
</sl-tooltip>
|
|
3476
|
-
`;
|
|
3477
|
-
}
|
|
3478
|
-
};
|
|
3479
|
-
__decorate([property({ type: String })], AxebowTooltip.prototype, "icon", void 0);
|
|
3480
|
-
__decorate([property({ type: String })], AxebowTooltip.prototype, "color", void 0);
|
|
3481
|
-
__decorate([property({ type: String })], AxebowTooltip.prototype, "size", void 0);
|
|
3482
|
-
__decorate([property({ type: String })], AxebowTooltip.prototype, "content", void 0);
|
|
3483
|
-
__decorate([property({ type: String })], AxebowTooltip.prototype, "placement", void 0);
|
|
3484
|
-
__decorate([property({ type: Boolean })], AxebowTooltip.prototype, "hoist", void 0);
|
|
3485
|
-
__decorate([property({ type: Boolean })], AxebowTooltip.prototype, "disabled", void 0);
|
|
3486
|
-
AxebowTooltip = __decorate([customElement("axebow-tooltip")], AxebowTooltip);
|
|
3487
|
-
//#endregion
|
|
3488
|
-
//#region src/components/axebow-adjustment-resources-counter/axebow-adjustment-resources-counter.ts
|
|
3489
|
-
var AxebowAdjustmentResourcesCounter = class AxebowAdjustmentResourcesCounter extends LitElement {
|
|
3490
|
-
constructor(..._args) {
|
|
3491
|
-
super(..._args);
|
|
3492
|
-
this.type = "normal";
|
|
3493
|
-
this.criticalHighlight = false;
|
|
3494
|
-
this.number = 0;
|
|
3495
|
-
this.description = "";
|
|
3496
|
-
this.tooltipText = "";
|
|
3497
|
-
}
|
|
3498
|
-
static {
|
|
3499
|
-
this.styles = [unsafeCSS(tailwind_default), css`
|
|
3500
|
-
:host {
|
|
3501
|
-
display: inline-block;
|
|
3502
|
-
}
|
|
3503
|
-
`];
|
|
3504
|
-
}
|
|
3505
|
-
render() {
|
|
3506
|
-
switch (this.type) {
|
|
3507
|
-
case "normal": return this._renderNormal();
|
|
3508
|
-
case "boxed": return this._renderBoxed();
|
|
3509
|
-
default: return this._renderNormal();
|
|
3510
|
-
}
|
|
3511
|
-
}
|
|
3512
|
-
_renderBoxed() {
|
|
3513
|
-
return html`
|
|
3514
|
-
<div class="flex flex-col items-center py-2 px-3 w-30.75 h-fit border border-solid border-[#DBDDE4] rounded-md relative">
|
|
3515
|
-
${this.tooltipText ? html`
|
|
3516
|
-
<axebow-tooltip
|
|
3517
|
-
class="absolute top-1 right-1"
|
|
3518
|
-
icon="info"
|
|
3519
|
-
color="#DBDDE4"
|
|
3520
|
-
size="xl"
|
|
3521
|
-
.content=${this.tooltipText}
|
|
3522
|
-
></axebow-tooltip>
|
|
3523
|
-
` : ""}
|
|
3524
|
-
<div class="flex items-center gap-1">
|
|
3525
|
-
<p class="text-lg font-semibold text-[#344966]">${this.number}</p>
|
|
3526
|
-
</div>
|
|
3527
|
-
<p class="text-center">${this.description}</p>
|
|
3528
|
-
</div>`;
|
|
3529
|
-
}
|
|
3530
|
-
_renderNormal() {
|
|
3531
|
-
return html`
|
|
3532
|
-
<div class="flex flex-col py-2 w-27 h-fit ${this.criticalHighlight ? "border-b border-solid border-(--axebow-premium-text)" : ""}">
|
|
3533
|
-
<div class="flex items-center gap-1">
|
|
3534
|
-
<p class="text-lg font-semibold text-[#344966]">${this.number}</p>
|
|
3535
|
-
${this.criticalHighlight ? html`<axebow-icon iconName="warning" iconColor="var(--axebow-premium-text)" size="xl"></axebow-icon>` : ""}
|
|
3536
|
-
</div>
|
|
3537
|
-
<p>${this.description}</p>
|
|
3538
|
-
</div>`;
|
|
3539
|
-
}
|
|
3540
|
-
};
|
|
3541
|
-
__decorate([property({ type: String })], AxebowAdjustmentResourcesCounter.prototype, "type", void 0);
|
|
3542
|
-
__decorate([property({ type: Boolean })], AxebowAdjustmentResourcesCounter.prototype, "criticalHighlight", void 0);
|
|
3543
|
-
__decorate([property({ type: Number })], AxebowAdjustmentResourcesCounter.prototype, "number", void 0);
|
|
3544
|
-
__decorate([property({ type: String })], AxebowAdjustmentResourcesCounter.prototype, "description", void 0);
|
|
3545
|
-
__decorate([property({ type: String })], AxebowAdjustmentResourcesCounter.prototype, "tooltipText", void 0);
|
|
3546
|
-
AxebowAdjustmentResourcesCounter = __decorate([customElement("axebow-adjustment-resources-counter")], AxebowAdjustmentResourcesCounter);
|
|
2872
|
+
AxebowResourcesCounter = __decorate([customElement("axebow-resources-counter")], AxebowResourcesCounter);
|
|
3547
2873
|
//#endregion
|
|
3548
2874
|
//#region src/components/axebow-drag-drop-upload-file/axebow-drag-drop-upload-file.ts
|
|
3549
2875
|
var AxebowDragDropUploadFile = class AxebowDragDropUploadFile extends LitElement {
|
|
@@ -3880,7 +3206,7 @@ var AxebowRuntimeZipDialog = class AxebowRuntimeZipDialog extends LitElement {
|
|
|
3880
3206
|
class="w-6 h-6 shrink-0 flex items-center justify-center cursor-pointer"
|
|
3881
3207
|
@click=${() => this.onClose?.()}
|
|
3882
3208
|
>
|
|
3883
|
-
<axebow-icon iconName="cancel" iconColor="var(--axebow-gray)" size="
|
|
3209
|
+
<axebow-icon iconName="cancel" iconColor="var(--axebow-gray)" size="medium"></axebow-icon>
|
|
3884
3210
|
</div>
|
|
3885
3211
|
</div>
|
|
3886
3212
|
<p class="w-120.75 h-21.25 leading-[1.0625rem] m-0">
|
|
@@ -4059,7 +3385,7 @@ var AxebowMoreActions = class AxebowMoreActions extends LitElement {
|
|
|
4059
3385
|
?disabled=${this.disabled}
|
|
4060
3386
|
@click=${this._toggle}
|
|
4061
3387
|
>
|
|
4062
|
-
${this.iconName ? html`<axebow-icon iconName=${this.iconName} size="
|
|
3388
|
+
${this.iconName ? html`<axebow-icon iconName=${this.iconName} size="small" iconColor="var(--axebow-tertiary)"></axebow-icon>` : this.open ? this.closeLabel : this.title || this.moreActionsLabel}
|
|
4063
3389
|
</button>
|
|
4064
3390
|
${this.open ? html`
|
|
4065
3391
|
<div
|
|
@@ -4079,7 +3405,7 @@ var AxebowMoreActions = class AxebowMoreActions extends LitElement {
|
|
|
4079
3405
|
@mouseenter=${(e) => e.currentTarget.style.borderColor = `var(--axebow-${opt.type})`}
|
|
4080
3406
|
@mouseleave=${(e) => e.currentTarget.style.borderColor = "transparent"}
|
|
4081
3407
|
>
|
|
4082
|
-
<axebow-icon iconName=${opt.icon} iconColor="var(--axebow-${opt.type})" size="
|
|
3408
|
+
<axebow-icon iconName=${opt.icon} iconColor="var(--axebow-${opt.type})" size="small"></axebow-icon>
|
|
4083
3409
|
<p class="m-0 whitespace-nowrap" style="color:var(--axebow-${opt.type});">${opt.label}</p>
|
|
4084
3410
|
</button>
|
|
4085
3411
|
`) : html`<slot></slot>`}
|
|
@@ -4227,7 +3553,7 @@ var AxebowCardVersionSelector = class AxebowCardVersionSelector extends LitEleme
|
|
|
4227
3553
|
${this.revisions.map((rev) => html`
|
|
4228
3554
|
<sl-option value=${rev.id}>
|
|
4229
3555
|
${this._formatRevision(rev.id)}
|
|
4230
|
-
${rev.id !== this.displayedRevision ? html`<axebow-icon slot="suffix" iconName="update" iconColor="var(--axebow-tertiary)" size="
|
|
3556
|
+
${rev.id !== this.displayedRevision ? html`<axebow-icon slot="suffix" iconName="update" iconColor="var(--axebow-tertiary)" size="small"></axebow-icon>` : ""}
|
|
4231
3557
|
</sl-option>
|
|
4232
3558
|
`)}
|
|
4233
3559
|
</sl-select>
|
|
@@ -4257,7 +3583,6 @@ var AxebowRoleTooltip = class AxebowRoleTooltip extends LitElement {
|
|
|
4257
3583
|
static {
|
|
4258
3584
|
this.styles = [unsafeCSS(tailwind_default), css`
|
|
4259
3585
|
:host { display: contents; }
|
|
4260
|
-
axebow-tooltip::part(body),
|
|
4261
3586
|
sl-tooltip::part(body) {
|
|
4262
3587
|
background-color: var(--axebow-white);
|
|
4263
3588
|
color: var(--axebow-primary);
|
|
@@ -4279,15 +3604,15 @@ var AxebowRoleTooltip = class AxebowRoleTooltip extends LitElement {
|
|
|
4279
3604
|
render() {
|
|
4280
3605
|
if (!this.heading) return html``;
|
|
4281
3606
|
return html`
|
|
4282
|
-
<
|
|
3607
|
+
<sl-tooltip placement="right" hoist>
|
|
4283
3608
|
<div slot="content">
|
|
4284
3609
|
<strong>${this.heading}</strong>
|
|
4285
3610
|
<ul>
|
|
4286
3611
|
${this.items.map((item) => html`<li>${item}</li>`)}
|
|
4287
3612
|
</ul>
|
|
4288
3613
|
</div>
|
|
4289
|
-
<axebow-icon iconName="info" class="cursor-pointer" iconColor=${this.color}></axebow-icon>
|
|
4290
|
-
</
|
|
3614
|
+
<axebow-icon iconName="info" size="small" class="cursor-pointer" iconColor=${this.color}></axebow-icon>
|
|
3615
|
+
</sl-tooltip>
|
|
4291
3616
|
`;
|
|
4292
3617
|
}
|
|
4293
3618
|
};
|
|
@@ -4325,21 +3650,21 @@ var AxebowCardHeader = class AxebowCardHeader extends LitElement {
|
|
|
4325
3650
|
}
|
|
4326
3651
|
_renderBadge() {
|
|
4327
3652
|
if (this.badge === "free-iaas") return html`
|
|
4328
|
-
<
|
|
3653
|
+
<sl-tooltip>
|
|
4329
3654
|
<div slot="content" style="max-width:300px;">
|
|
4330
3655
|
<strong>${this.freeIaasTitle}</strong>
|
|
4331
3656
|
<p style="margin-top:0.5rem;">${this.freeIaasDesc}</p>
|
|
4332
3657
|
</div>
|
|
4333
3658
|
<div class="flex items-center gap-2 cursor-pointer">
|
|
4334
|
-
<axebow-icon iconName="info" iconColor="var(--axebow-gray)" size="
|
|
3659
|
+
<axebow-icon iconName="info" iconColor="var(--axebow-gray)" size="small"></axebow-icon>
|
|
4335
3660
|
<span class="text-(--axebow-rich-black)">${this.freeIaasLabel}</span>
|
|
4336
3661
|
</div>
|
|
4337
|
-
</
|
|
3662
|
+
</sl-tooltip>
|
|
4338
3663
|
`;
|
|
4339
3664
|
if (this.badge === "ha") return html`
|
|
4340
|
-
<
|
|
3665
|
+
<sl-tooltip content=${this.haTitle}>
|
|
4341
3666
|
<sl-badge variant="neutral" pill size="small" class="cursor-pointer">${this.haLabel}</sl-badge>
|
|
4342
|
-
</
|
|
3667
|
+
</sl-tooltip>
|
|
4343
3668
|
`;
|
|
4344
3669
|
return html``;
|
|
4345
3670
|
}
|
|
@@ -4529,7 +3854,7 @@ var AxebowCardFilterItem = class AxebowCardFilterItem extends LitElement {
|
|
|
4529
3854
|
@click=${this._onClick}
|
|
4530
3855
|
>
|
|
4531
3856
|
<p class="m-0">${this.name}</p>
|
|
4532
|
-
${this.showAttention ? html`<axebow-icon iconName="error" size="
|
|
3857
|
+
${this.showAttention ? html`<axebow-icon iconName="error" size="small" iconColor="var(--axebow-error)"></axebow-icon>` : ""}
|
|
4533
3858
|
</div>
|
|
4534
3859
|
`;
|
|
4535
3860
|
}
|
|
@@ -4581,7 +3906,7 @@ var AxebowCardFilter = class AxebowCardFilter extends LitElement {
|
|
|
4581
3906
|
<span class="text-(--axebow-tertiary)">${this.selected ?? this.emptyLabel}</span>
|
|
4582
3907
|
<div class="flex items-center gap-2">
|
|
4583
3908
|
${this.showAttention ? html`<p class="text-(--axebow-error) m-0 text-xs">${this.attentionLabel}</p>` : ""}
|
|
4584
|
-
<axebow-icon iconName="chevron_right" rotate="90" iconColor="var(--axebow-tertiary)" size="
|
|
3909
|
+
<axebow-icon iconName="chevron_right" rotate="90" iconColor="var(--axebow-tertiary)" size="small"></axebow-icon>
|
|
4585
3910
|
</div>
|
|
4586
3911
|
</div>
|
|
4587
3912
|
`}
|
|
@@ -4655,7 +3980,7 @@ var AxebowCardTableHeader = class AxebowCardTableHeader extends LitElement {
|
|
|
4655
3980
|
<span class="text-(--axebow-tertiary)">${this.filterDisplayText || this.allLabel}</span>
|
|
4656
3981
|
<div class="flex items-center gap-2">
|
|
4657
3982
|
${this.showAttention ? html`<p class="text-(--axebow-error) m-0 text-xs">${this.attentionLabel}</p>` : ""}
|
|
4658
|
-
<axebow-icon iconName="chevron_right" rotate="90" iconColor="var(--axebow-tertiary)" size="
|
|
3983
|
+
<axebow-icon iconName="chevron_right" rotate="90" iconColor="var(--axebow-tertiary)" size="small"></axebow-icon>
|
|
4659
3984
|
</div>
|
|
4660
3985
|
</div>
|
|
4661
3986
|
|
|
@@ -4677,10 +4002,10 @@ var AxebowCardTableHeader = class AxebowCardTableHeader extends LitElement {
|
|
|
4677
4002
|
@click=${() => this._onSelect(inst.name, "instance")}
|
|
4678
4003
|
>
|
|
4679
4004
|
<div class="flex items-center gap-2">
|
|
4680
|
-
<axebow-icon iconName="subdirectory_arrow_right" size="
|
|
4005
|
+
<axebow-icon iconName="subdirectory_arrow_right" size="small"></axebow-icon>
|
|
4681
4006
|
<p class="m-0">${inst.name}</p>
|
|
4682
4007
|
</div>
|
|
4683
|
-
${inst.needsAttention ? html`<axebow-icon iconName="warning" iconColor="var(--axebow-error)" size="
|
|
4008
|
+
${inst.needsAttention ? html`<axebow-icon iconName="warning" iconColor="var(--axebow-error)" size="small"></axebow-icon>` : ""}
|
|
4684
4009
|
</div>
|
|
4685
4010
|
`)}
|
|
4686
4011
|
`)}
|
|
@@ -4739,7 +4064,7 @@ var AxebowCardResourceRow = class AxebowCardResourceRow extends LitElement {
|
|
|
4739
4064
|
return html`
|
|
4740
4065
|
<div class="flex items-center ${cellClass}">
|
|
4741
4066
|
<div class="flex items-center gap-1">
|
|
4742
|
-
<axebow-icon iconName=${stat.icon} size="
|
|
4067
|
+
<axebow-icon iconName=${stat.icon} size="small" rotate=${stat.iconRotation ?? 0}></axebow-icon>
|
|
4743
4068
|
<span class="${textClass}">${stat.title}</span>
|
|
4744
4069
|
</div>
|
|
4745
4070
|
</div>
|
|
@@ -4831,7 +4156,7 @@ var AxebowCardAttentionBanner = class AxebowCardAttentionBanner extends LitEleme
|
|
|
4831
4156
|
${this.isPlainRole ? html`<span class="text-(--axebow-error)">${this.askOwnerLabel}</span>` : html`
|
|
4832
4157
|
<axebow-button variant="text" size="small">
|
|
4833
4158
|
${this.label}
|
|
4834
|
-
<axebow-icon iconName="arrow_forward" iconColor="var(--axebow-error)" size="
|
|
4159
|
+
<axebow-icon iconName="arrow_forward" iconColor="var(--axebow-error)" size="small"></axebow-icon>
|
|
4835
4160
|
</axebow-button>
|
|
4836
4161
|
`}
|
|
4837
4162
|
</div>
|
|
@@ -4877,7 +4202,7 @@ var AxebowCardActionBanner = class AxebowCardActionBanner extends LitElement {
|
|
|
4877
4202
|
${this.isPlainRole ? html`<span class="text-(--axebow-gray)">${this.notAllowedLabel}</span>` : html`
|
|
4878
4203
|
<axebow-button variant="text" size="small">
|
|
4879
4204
|
${this.label}
|
|
4880
|
-
<axebow-icon iconName="arrow_forward" iconColor="var(--axebow-tertiary)" size="
|
|
4205
|
+
<axebow-icon iconName="arrow_forward" iconColor="var(--axebow-tertiary)" size="small"></axebow-icon>
|
|
4881
4206
|
</axebow-button>
|
|
4882
4207
|
`}
|
|
4883
4208
|
</div>
|
|
@@ -4907,7 +4232,6 @@ var AxebowCardStatus = class AxebowCardStatus extends LitElement {
|
|
|
4907
4232
|
static {
|
|
4908
4233
|
this.styles = [unsafeCSS(tailwind_default), css`
|
|
4909
4234
|
:host { display: block; flex: 1; min-width: 0; }
|
|
4910
|
-
axebow-tooltip::part(base),
|
|
4911
4235
|
sl-tooltip::part(base) { max-width: none; white-space: normal; word-break: break-word; }
|
|
4912
4236
|
`];
|
|
4913
4237
|
}
|
|
@@ -4917,9 +4241,9 @@ var AxebowCardStatus = class AxebowCardStatus extends LitElement {
|
|
|
4917
4241
|
<div class="flex items-center gap-1 min-w-0 w-full">
|
|
4918
4242
|
${this.showSpinner ? html`<sl-spinner style="--indicator-color:${this.borderColor};"></sl-spinner>` : ""}
|
|
4919
4243
|
<p class="font-bold m-0 line-clamp-1" style="color:${this.borderColor};" title=${this.statusCode}>${this.statusCode}</p>
|
|
4920
|
-
<
|
|
4921
|
-
<axebow-icon class="cursor-pointer shrink-0" iconColor=${this.borderColor} iconName="info" size="
|
|
4922
|
-
</
|
|
4244
|
+
<sl-tooltip content=${this.statusMessage}>
|
|
4245
|
+
<axebow-icon class="cursor-pointer shrink-0" iconColor=${this.borderColor} iconName="info" size="small"></axebow-icon>
|
|
4246
|
+
</sl-tooltip>
|
|
4923
4247
|
</div>
|
|
4924
4248
|
`;
|
|
4925
4249
|
}
|
|
@@ -5337,7 +4661,7 @@ var AxebowCardSpecialLink = class AxebowCardSpecialLink extends LitElement {
|
|
|
5337
4661
|
return html`
|
|
5338
4662
|
<span class="cursor-pointer" style="color:${this.color};" @click=${this._onClick}>
|
|
5339
4663
|
${this.label}
|
|
5340
|
-
<axebow-icon iconName=${this.icon} iconColor=${this.color} size="
|
|
4664
|
+
<axebow-icon iconName=${this.icon} iconColor=${this.color} size="small"></axebow-icon>
|
|
5341
4665
|
</span>
|
|
5342
4666
|
`;
|
|
5343
4667
|
}
|
|
@@ -5453,7 +4777,7 @@ var AxebowAlert = class AxebowAlert extends LitElement {
|
|
|
5453
4777
|
class="theme flex items-start gap-3 p-4 rounded-lg border-l-4 shadow-md transition-all duration-300 bg-white axebow-shadow"
|
|
5454
4778
|
style="border-left-color: ${config.iconColor};"
|
|
5455
4779
|
>
|
|
5456
|
-
<axebow-icon iconName="${config.icon}" iconColor="${config.iconColor}" size="
|
|
4780
|
+
<axebow-icon iconName="${config.icon}" iconColor="${config.iconColor}" size="large"></axebow-icon>
|
|
5457
4781
|
<div class="flex-1 min-w-0">
|
|
5458
4782
|
<p class="line-clamp-11 overflow-hidden m-0" .innerHTML=${this.message}></p>
|
|
5459
4783
|
</div>
|
|
@@ -5472,7 +4796,7 @@ var AxebowAlert = class AxebowAlert extends LitElement {
|
|
|
5472
4796
|
aria-label=${this.closeLabel}
|
|
5473
4797
|
class="text-gray-500 hover:text-gray-700 cursor-pointer p-0 border-0 bg-transparent"
|
|
5474
4798
|
>
|
|
5475
|
-
<axebow-icon iconName="close" size="
|
|
4799
|
+
<axebow-icon iconName="close" size="small"></axebow-icon>
|
|
5476
4800
|
</button>
|
|
5477
4801
|
` : ""}
|
|
5478
4802
|
</div>
|
|
@@ -5593,7 +4917,7 @@ var AxebowServicesPanel = class AxebowServicesPanel extends LitElement {
|
|
|
5593
4917
|
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-sm cursor-pointer bg-(--axebow-tertiary)/15"
|
|
5594
4918
|
@click=${this._handleToggle}
|
|
5595
4919
|
>
|
|
5596
|
-
<axebow-icon iconName="close" iconColor="var(--axebow-tertiary)" size="
|
|
4920
|
+
<axebow-icon iconName="close" iconColor="var(--axebow-tertiary)" size="small"></axebow-icon>
|
|
5597
4921
|
</div>
|
|
5598
4922
|
</div>
|
|
5599
4923
|
`;
|
|
@@ -5702,7 +5026,7 @@ var AxebowChannelConfigPanel = class AxebowChannelConfigPanel extends LitElement
|
|
|
5702
5026
|
class="w-4.5 h-4.5 shrink-0 flex items-center justify-center cursor-pointer"
|
|
5703
5027
|
@click=${this._handleDelete}
|
|
5704
5028
|
>
|
|
5705
|
-
<axebow-icon iconName="delete" iconColor="var(--axebow-error)" size="
|
|
5029
|
+
<axebow-icon iconName="delete" iconColor="var(--axebow-error)" size="x-small"></axebow-icon>
|
|
5706
5030
|
</div>
|
|
5707
5031
|
` : ""}
|
|
5708
5032
|
</div>
|
|
@@ -5901,7 +5225,7 @@ var AxebowHelpBubble = class AxebowHelpBubble extends LitElement {
|
|
|
5901
5225
|
@click=${() => this._openLink(option.url)}
|
|
5902
5226
|
>
|
|
5903
5227
|
<span class="font-medium text-[var(--axebow-gray)] whitespace-nowrap">${option.label}</span>
|
|
5904
|
-
<axebow-icon iconName="open_in_new" iconColor="var(--axebow-gray)" size="
|
|
5228
|
+
<axebow-icon iconName="open_in_new" iconColor="var(--axebow-gray)" size="x-small"></axebow-icon>
|
|
5905
5229
|
</div>
|
|
5906
5230
|
`)}
|
|
5907
5231
|
</div>
|
|
@@ -5911,7 +5235,7 @@ var AxebowHelpBubble = class AxebowHelpBubble extends LitElement {
|
|
|
5911
5235
|
<div
|
|
5912
5236
|
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-[var(--axebow-gray)]" : "bg-[var(--axebow-tertiary)]"}"
|
|
5913
5237
|
>
|
|
5914
|
-
<axebow-icon iconName="contact_support" iconColor="white" size="
|
|
5238
|
+
<axebow-icon iconName="contact_support" iconColor="white" size="medium"></axebow-icon>
|
|
5915
5239
|
</div>
|
|
5916
5240
|
</div>
|
|
5917
5241
|
`;
|
|
@@ -5945,7 +5269,7 @@ var AxebowNumberCard = class AxebowNumberCard extends LitElement {
|
|
|
5945
5269
|
<div
|
|
5946
5270
|
class="w-10.5 h-10.5 shrink-0 flex items-center justify-center bg-(--axebow-base) rounded-lg"
|
|
5947
5271
|
>
|
|
5948
|
-
<axebow-icon iconName=${this.icon} size="
|
|
5272
|
+
<axebow-icon iconName=${this.icon} size="large"></axebow-icon>
|
|
5949
5273
|
</div>
|
|
5950
5274
|
<div class="flex flex-col min-w-0">
|
|
5951
5275
|
<h2 class="m-0 text-lg font-bold">${this.number}</h2>
|
|
@@ -6028,11 +5352,11 @@ var AxebowPill = class AxebowPill extends LitElement {
|
|
|
6028
5352
|
${this.image ? html`<img
|
|
6029
5353
|
src="${this.image}"
|
|
6030
5354
|
class="w-12 h-12 transition-[filter] duration-300 ease-in-out group-hover:invert"
|
|
6031
|
-
/>` : html`<axebow-icon iconName="${this.icon}" iconColor="white" size="
|
|
5355
|
+
/>` : html`<axebow-icon iconName="${this.icon}" iconColor="white" size="large"></axebow-icon>`}
|
|
6032
5356
|
<p class="text-center flex items-center justify-center px-2 font-medium m-0">${this.label}</p>
|
|
6033
5357
|
<axebow-button variant="text" class="axebow-white-button-text">
|
|
6034
5358
|
${this.buttonText}
|
|
6035
|
-
${this.buttonIcon ? html`<axebow-icon iconName="${this.buttonIcon}" iconColor="white" size="
|
|
5359
|
+
${this.buttonIcon ? html`<axebow-icon iconName="${this.buttonIcon}" iconColor="white" size="small"></axebow-icon>` : ""}
|
|
6036
5360
|
</axebow-button>
|
|
6037
5361
|
</div>
|
|
6038
5362
|
`;
|
|
@@ -6135,7 +5459,7 @@ var AxebowQuickTipButton = class AxebowQuickTipButton extends LitElement {
|
|
|
6135
5459
|
<div class="collapsed-container" style="bottom: ${this.paddingBottom}px;" @click=${() => this.onToggle?.()}>
|
|
6136
5460
|
<button class="collapsed-button w-47.75 h-7 flex items-center justify-center gap-2 cursor-pointer">
|
|
6137
5461
|
<span class="whitespace-nowrap text-sm font-bold">${this.showLabel}</span>
|
|
6138
|
-
<axebow-icon iconName="visibility" size="
|
|
5462
|
+
<axebow-icon iconName="visibility" size="small"></axebow-icon>
|
|
6139
5463
|
</button>
|
|
6140
5464
|
</div>
|
|
6141
5465
|
`;
|
|
@@ -6230,7 +5554,7 @@ var AxebowGettingStartedCard = class AxebowGettingStartedCard extends LitElement
|
|
|
6230
5554
|
${this.contactUrl ? html`
|
|
6231
5555
|
<axebow-button variant="primary" outline @click=${() => window.open(this.contactUrl, "_blank")}>
|
|
6232
5556
|
${this.contactLabel}
|
|
6233
|
-
<axebow-icon iconName="open_in_new" size="
|
|
5557
|
+
<axebow-icon iconName="open_in_new" size="small" slot="suffix"></axebow-icon>
|
|
6234
5558
|
</axebow-button>
|
|
6235
5559
|
` : ""}
|
|
6236
5560
|
<sl-checkbox
|
|
@@ -6320,7 +5644,7 @@ var AxebowMarketplaceCard = class AxebowMarketplaceCard extends LitElement {
|
|
|
6320
5644
|
iconName=${resource.icon}
|
|
6321
5645
|
iconColor="var(--axebow-gray)"
|
|
6322
5646
|
rotate=${resource.iconRotate ?? 0}
|
|
6323
|
-
size="
|
|
5647
|
+
size="small"
|
|
6324
5648
|
></axebow-icon>
|
|
6325
5649
|
<span class="truncate ${resource.exceedsLimit ? "underline decoration-(--axebow-error)" : ""}">
|
|
6326
5650
|
${resource.text}${index < this.resources.length - 1 ? " |" : ""}
|
|
@@ -6330,7 +5654,7 @@ var AxebowMarketplaceCard = class AxebowMarketplaceCard extends LitElement {
|
|
|
6330
5654
|
class="shrink-0"
|
|
6331
5655
|
iconName="dangerous"
|
|
6332
5656
|
iconColor="var(--axebow-error)"
|
|
6333
|
-
size="
|
|
5657
|
+
size="small"
|
|
6334
5658
|
></axebow-icon>` : ""}
|
|
6335
5659
|
</div>
|
|
6336
5660
|
`;
|
|
@@ -6346,7 +5670,7 @@ var AxebowMarketplaceCard = class AxebowMarketplaceCard extends LitElement {
|
|
|
6346
5670
|
class="w-4.25 h-4.5 box-border flex items-center justify-center shrink-0 cursor-pointer border-l border-solid border-(--axebow-light-gray)"
|
|
6347
5671
|
@click=${() => this._versionsOpen = !this._versionsOpen}
|
|
6348
5672
|
>
|
|
6349
|
-
<axebow-icon iconName="keyboard_arrow_down" iconColor="var(--axebow-tertiary)" size="
|
|
5673
|
+
<axebow-icon iconName="keyboard_arrow_down" iconColor="var(--axebow-tertiary)" size="small"></axebow-icon>
|
|
6350
5674
|
</div>
|
|
6351
5675
|
</div>
|
|
6352
5676
|
|
|
@@ -6374,7 +5698,7 @@ var AxebowMarketplaceCard = class AxebowMarketplaceCard extends LitElement {
|
|
|
6374
5698
|
style="width:${this.badgeWidth}; background-color:${this.badgeBgColor};"
|
|
6375
5699
|
>
|
|
6376
5700
|
${this.badgeIcon ? html`<span class="w-2 h-3 flex items-center justify-center overflow-hidden shrink-0">
|
|
6377
|
-
<axebow-icon iconName=${this.badgeIcon} iconColor=${this.badgeIconColor} size="
|
|
5701
|
+
<axebow-icon iconName=${this.badgeIcon} iconColor=${this.badgeIconColor} size="xx-small"></axebow-icon>
|
|
6378
5702
|
</span>` : ""}
|
|
6379
5703
|
<span class="text-sm font-semibold uppercase tracking-wider" style="color:${this.badgeTextColor};">
|
|
6380
5704
|
${this.badgeLabel}
|
|
@@ -6431,7 +5755,7 @@ var AxebowMarketplaceCard = class AxebowMarketplaceCard extends LitElement {
|
|
|
6431
5755
|
<axebow-icon
|
|
6432
5756
|
slot="prefix"
|
|
6433
5757
|
iconName="sound_sampler"
|
|
6434
|
-
size="
|
|
5758
|
+
size="small"
|
|
6435
5759
|
iconColor="${this._deployHovered ? "var(--axebow-gray)" : "var(--axebow-tertiary)"}"
|
|
6436
5760
|
></axebow-icon>
|
|
6437
5761
|
<span class="text-base">${this.deployLabel}</span>
|
|
@@ -6499,7 +5823,7 @@ var AxebowDeployCard = class AxebowDeployCard extends LitElement {
|
|
|
6499
5823
|
>
|
|
6500
5824
|
<div class="w-8 h-8 flex items-center justify-center bg-(--axebow-base) rounded-md shrink-0">
|
|
6501
5825
|
<span class="w-4.25 h-4.25 flex items-center justify-center overflow-hidden">
|
|
6502
|
-
<axebow-icon iconName=${this.icon} iconColor="var(--axebow-primary)" size="
|
|
5826
|
+
<axebow-icon iconName=${this.icon} iconColor="var(--axebow-primary)" size="small"></axebow-icon>
|
|
6503
5827
|
</span>
|
|
6504
5828
|
</div>
|
|
6505
5829
|
<p class="text-md font-semibold text-(--axebow-primary) m-0 truncate">${this.title}</p>
|
|
@@ -6515,7 +5839,7 @@ var AxebowDeployCard = class AxebowDeployCard extends LitElement {
|
|
|
6515
5839
|
<axebow-icon
|
|
6516
5840
|
slot="prefix"
|
|
6517
5841
|
iconName="play_circle"
|
|
6518
|
-
size="
|
|
5842
|
+
size="medium"
|
|
6519
5843
|
iconColor="${this._deployHovered ? "var(--axebow-gray)" : "var(--axebow-tertiary)"}"
|
|
6520
5844
|
></axebow-icon>
|
|
6521
5845
|
${this.deployLabel}
|
|
@@ -6561,7 +5885,7 @@ var AxebowResourceCard = class AxebowResourceCard extends LitElement {
|
|
|
6561
5885
|
<span class="text-lg font-semibold text-(--axebow-primary) truncate">${this.tenantName}</span>
|
|
6562
5886
|
<div class="w-6 h-6 flex items-center justify-center shrink-0">
|
|
6563
5887
|
<span class="w-4.5 h-4.5 flex items-center justify-center overflow-hidden">
|
|
6564
|
-
<axebow-icon iconName="cloud_circle" iconColor="var(--axebow-primary)" size="
|
|
5888
|
+
<axebow-icon iconName="cloud_circle" iconColor="var(--axebow-primary)" size="small"></axebow-icon>
|
|
6565
5889
|
</span>
|
|
6566
5890
|
</div>
|
|
6567
5891
|
</div>
|
|
@@ -6572,7 +5896,7 @@ var AxebowResourceCard = class AxebowResourceCard extends LitElement {
|
|
|
6572
5896
|
<div class="flex-1 flex items-center justify-between text-[0.9375rem]">
|
|
6573
5897
|
<div class="w-30 h-5 flex items-center gap-1 min-w-0 shrink-0">
|
|
6574
5898
|
<div class="w-5 h-5 flex items-center justify-center shrink-0">
|
|
6575
|
-
<axebow-icon iconName="${row.icon}" iconColor="var(--axebow-primary)" size="
|
|
5899
|
+
<axebow-icon iconName="${row.icon}" iconColor="var(--axebow-primary)" size="small"></axebow-icon>
|
|
6576
5900
|
</div>
|
|
6577
5901
|
<span class="font-bold text-(--axebow-primary) truncate">${row.label}</span>
|
|
6578
5902
|
</div>
|
|
@@ -6590,7 +5914,7 @@ var AxebowResourceCard = class AxebowResourceCard extends LitElement {
|
|
|
6590
5914
|
@click=${() => row.onSeeInNewTab?.()}
|
|
6591
5915
|
>
|
|
6592
5916
|
${this.seeInNewTabLabel}
|
|
6593
|
-
<axebow-icon iconName="open_in_new" iconColor="var(--axebow-gray)" size="
|
|
5917
|
+
<axebow-icon iconName="open_in_new" iconColor="var(--axebow-gray)" size="small"></axebow-icon>
|
|
6594
5918
|
</button>
|
|
6595
5919
|
|
|
6596
5920
|
<button
|
|
@@ -6823,10 +6147,10 @@ var AxebowTenantResourceTable = class AxebowTenantResourceTable extends LitEleme
|
|
|
6823
6147
|
const iconEl = icon.spinner ? html`<sl-spinner style="font-size: 0.85rem; --indicator-color: var(--axebow-tertiary);"></sl-spinner>` : html`<axebow-icon
|
|
6824
6148
|
iconName=${icon.iconName}
|
|
6825
6149
|
iconColor=${icon.iconColor}
|
|
6826
|
-
size="
|
|
6150
|
+
size="small"
|
|
6827
6151
|
class="cursor-pointer shrink-0"
|
|
6828
6152
|
></axebow-icon>`;
|
|
6829
|
-
return icon.tooltip ? html`<
|
|
6153
|
+
return icon.tooltip ? html`<sl-tooltip content=${icon.tooltip} hoist>${iconEl}</sl-tooltip>` : iconEl;
|
|
6830
6154
|
}
|
|
6831
6155
|
_renderAccountRow(row, index) {
|
|
6832
6156
|
const isExpanded = this._expanded.has(row.id);
|
|
@@ -6840,7 +6164,7 @@ var AxebowTenantResourceTable = class AxebowTenantResourceTable extends LitEleme
|
|
|
6840
6164
|
<axebow-icon
|
|
6841
6165
|
iconName=${isExpanded ? "expand_more" : "chevron_right"}
|
|
6842
6166
|
iconColor="var(--axebow-gray)"
|
|
6843
|
-
size="
|
|
6167
|
+
size="small"
|
|
6844
6168
|
class="shrink-0"
|
|
6845
6169
|
></axebow-icon>
|
|
6846
6170
|
<img src=${row.logoUrl} class="w-6 h-6 object-contain shrink-0" />
|
|
@@ -6891,7 +6215,7 @@ var AxebowTenantResourceTable = class AxebowTenantResourceTable extends LitEleme
|
|
|
6891
6215
|
<axebow-icon
|
|
6892
6216
|
iconName="subdirectory_arrow_right"
|
|
6893
6217
|
iconColor="var(--axebow-gray)"
|
|
6894
|
-
size="
|
|
6218
|
+
size="small"
|
|
6895
6219
|
class="shrink-0"
|
|
6896
6220
|
></axebow-icon>
|
|
6897
6221
|
<span class="text-base truncate">${env.name}</span>
|
|
@@ -7091,13 +6415,13 @@ var AxebowTenantCard = class AxebowTenantCard extends LitElement {
|
|
|
7091
6415
|
<div class="flex items-center gap-5 text-(--axebow-gray)">
|
|
7092
6416
|
${this.resourceStats.map((stat) => html`
|
|
7093
6417
|
<span class="flex items-center gap-1 text-base whitespace-nowrap">
|
|
7094
|
-
<axebow-icon iconName=${stat.icon} iconColor="var(--axebow-gray)" size="
|
|
6418
|
+
<axebow-icon iconName=${stat.icon} iconColor="var(--axebow-gray)" size="small"></axebow-icon>
|
|
7095
6419
|
<b>${stat.label}</b> ${stat.value}
|
|
7096
6420
|
</span>
|
|
7097
6421
|
`)}
|
|
7098
6422
|
</div>
|
|
7099
6423
|
${this.showInvitedNotice ? html`<span class="text-base text-black">${this.invitedNoticeText}</span>` : this.showNoAccountsWarning ? html`<span class="flex items-center gap-1 text-base text-black">
|
|
7100
|
-
<axebow-icon iconName="warning" iconColor="var(--axebow-warning)" size="
|
|
6424
|
+
<axebow-icon iconName="warning" iconColor="var(--axebow-warning)" size="small"></axebow-icon>
|
|
7101
6425
|
${this.noAccountsWarningText}
|
|
7102
6426
|
</span>` : ""}
|
|
7103
6427
|
</div>
|
|
@@ -7144,6 +6468,217 @@ __decorate([property({ type: Boolean })], AxebowTenantCard.prototype, "showActio
|
|
|
7144
6468
|
__decorate([property({ type: Boolean })], AxebowTenantCard.prototype, "showMoreActionsColumn", void 0);
|
|
7145
6469
|
AxebowTenantCard = __decorate([customElement("axebow-tenant-card")], AxebowTenantCard);
|
|
7146
6470
|
//#endregion
|
|
6471
|
+
//#region src/components/axebow-carousel-selector-tenant/parts/axebow-carousel-selector-item.ts
|
|
6472
|
+
var AxebowCarouselSelectorItem = class AxebowCarouselSelectorItem extends LitElement {
|
|
6473
|
+
constructor(..._args) {
|
|
6474
|
+
super(..._args);
|
|
6475
|
+
this.variant = "account";
|
|
6476
|
+
this.itemId = "";
|
|
6477
|
+
this.selected = false;
|
|
6478
|
+
this.disabled = false;
|
|
6479
|
+
this.planLabel = "";
|
|
6480
|
+
this.name = "";
|
|
6481
|
+
this.tenantName = "";
|
|
6482
|
+
this.accountName = "";
|
|
6483
|
+
this.logoSrc = null;
|
|
6484
|
+
this.logoAlt = "";
|
|
6485
|
+
}
|
|
6486
|
+
static {
|
|
6487
|
+
this.styles = [unsafeCSS(tailwind_default), css`
|
|
6488
|
+
:host {
|
|
6489
|
+
display: block;
|
|
6490
|
+
width: 100%;
|
|
6491
|
+
height: 4.5rem;
|
|
6492
|
+
}
|
|
6493
|
+
.item-checkbox::part(base) {
|
|
6494
|
+
padding: 0;
|
|
6495
|
+
}
|
|
6496
|
+
.item-checkbox::part(control) {
|
|
6497
|
+
width: 1.125rem;
|
|
6498
|
+
height: 1.125rem;
|
|
6499
|
+
border-radius: 50%;
|
|
6500
|
+
}
|
|
6501
|
+
.item-checkbox::part(control--checked) {
|
|
6502
|
+
background-color: var(--axebow-primary);
|
|
6503
|
+
border-color: var(--axebow-primary);
|
|
6504
|
+
}
|
|
6505
|
+
`];
|
|
6506
|
+
}
|
|
6507
|
+
_handleChange(e) {
|
|
6508
|
+
const checkbox = e.target;
|
|
6509
|
+
if (this.disabled) return;
|
|
6510
|
+
if (this.selected && !checkbox.checked) {
|
|
6511
|
+
checkbox.checked = true;
|
|
6512
|
+
return;
|
|
6513
|
+
}
|
|
6514
|
+
this.dispatchEvent(new CustomEvent("item-select", {
|
|
6515
|
+
detail: { id: this.itemId },
|
|
6516
|
+
bubbles: true,
|
|
6517
|
+
composed: true
|
|
6518
|
+
}));
|
|
6519
|
+
}
|
|
6520
|
+
_renderCheck() {
|
|
6521
|
+
return html`
|
|
6522
|
+
<div class="absolute ${this.variant === "environment" ? "top-3 right-1.5" : "top-3 right-3"} w-4.5 h-4.5 shrink-0">
|
|
6523
|
+
<sl-checkbox
|
|
6524
|
+
class="item-checkbox"
|
|
6525
|
+
.checked=${this.selected}
|
|
6526
|
+
?disabled=${this.disabled}
|
|
6527
|
+
@sl-change=${this._handleChange}
|
|
6528
|
+
></sl-checkbox>
|
|
6529
|
+
</div>
|
|
6530
|
+
`;
|
|
6531
|
+
}
|
|
6532
|
+
_renderBadge() {
|
|
6533
|
+
if (!this.planLabel) return "";
|
|
6534
|
+
return html`
|
|
6535
|
+
<div class="absolute bottom-0 left-0 right-0 flex justify-center pointer-events-none">
|
|
6536
|
+
<span
|
|
6537
|
+
class="inline-flex items-center justify-center px-2 py-0.5 rounded-t-md bg-(--axebow-base) text-(--axebow-secondary) text-sm font-semibold truncate max-w-full"
|
|
6538
|
+
>
|
|
6539
|
+
${this.planLabel}
|
|
6540
|
+
</span>
|
|
6541
|
+
</div>
|
|
6542
|
+
`;
|
|
6543
|
+
}
|
|
6544
|
+
_renderAccount() {
|
|
6545
|
+
return html`
|
|
6546
|
+
<div class="flex flex-col items-start w-full max-w-51.5 h-9.5 justify-center">
|
|
6547
|
+
<p class="leading-tight text-md font-semibold text-(--axebow-primary) truncate w-full m-0" title=${this.name}>
|
|
6548
|
+
${this.name}
|
|
6549
|
+
</p>
|
|
6550
|
+
</div>
|
|
6551
|
+
`;
|
|
6552
|
+
}
|
|
6553
|
+
_renderEnvironment() {
|
|
6554
|
+
return html`
|
|
6555
|
+
<div class="flex flex-row items-start gap-2 w-full">
|
|
6556
|
+
${this.logoSrc ? html`<img src=${this.logoSrc} alt=${this.logoAlt} class="w-12.5 h-12.5 shrink-0 object-contain" />` : html`<axebow-icon iconName="cloud" size="large" class="w-12.5 h-12.5 shrink-0"></axebow-icon>`}
|
|
6557
|
+
<div class="flex flex-col items-start flex-1 min-w-0">
|
|
6558
|
+
<div class="w-36 overflow-hidden">
|
|
6559
|
+
<p class="text-sm font-semibold text-(--axebow-primary) truncate m-0" title=${this.tenantName}>
|
|
6560
|
+
${this.tenantName}
|
|
6561
|
+
</p>
|
|
6562
|
+
</div>
|
|
6563
|
+
<div class="w-full overflow-hidden">
|
|
6564
|
+
<p
|
|
6565
|
+
class="leading-[1.125rem] text-md font-semibold text-(--axebow-primary) truncate m-0"
|
|
6566
|
+
title=${this.accountName}
|
|
6567
|
+
>
|
|
6568
|
+
${this.accountName}
|
|
6569
|
+
</p>
|
|
6570
|
+
</div>
|
|
6571
|
+
</div>
|
|
6572
|
+
</div>
|
|
6573
|
+
`;
|
|
6574
|
+
}
|
|
6575
|
+
render() {
|
|
6576
|
+
return html`
|
|
6577
|
+
<div
|
|
6578
|
+
class="relative w-full h-full box-border rounded-md border border-solid overflow-hidden transition-colors ${this.variant === "environment" ? "pt-3 px-1.5 pb-0" : "pt-3 px-3 pb-0"} ${this.selected ? "border-(--axebow-primary) bg-(--axebow-white)" : "border-(--axebow-light-gray) bg-(--axebow-base)"} ${this.disabled ? "opacity-60 pointer-events-none" : ""}"
|
|
6579
|
+
>
|
|
6580
|
+
${this.variant === "environment" ? this._renderEnvironment() : this._renderAccount()}
|
|
6581
|
+
${this._renderCheck()}
|
|
6582
|
+
${this._renderBadge()}
|
|
6583
|
+
</div>
|
|
6584
|
+
`;
|
|
6585
|
+
}
|
|
6586
|
+
};
|
|
6587
|
+
__decorate([property({ type: String })], AxebowCarouselSelectorItem.prototype, "variant", void 0);
|
|
6588
|
+
__decorate([property({ type: String })], AxebowCarouselSelectorItem.prototype, "itemId", void 0);
|
|
6589
|
+
__decorate([property({ type: Boolean })], AxebowCarouselSelectorItem.prototype, "selected", void 0);
|
|
6590
|
+
__decorate([property({ type: Boolean })], AxebowCarouselSelectorItem.prototype, "disabled", void 0);
|
|
6591
|
+
__decorate([property({ type: String })], AxebowCarouselSelectorItem.prototype, "planLabel", void 0);
|
|
6592
|
+
__decorate([property({ type: String })], AxebowCarouselSelectorItem.prototype, "name", void 0);
|
|
6593
|
+
__decorate([property({ type: String })], AxebowCarouselSelectorItem.prototype, "tenantName", void 0);
|
|
6594
|
+
__decorate([property({ type: String })], AxebowCarouselSelectorItem.prototype, "accountName", void 0);
|
|
6595
|
+
__decorate([property({ type: String })], AxebowCarouselSelectorItem.prototype, "logoSrc", void 0);
|
|
6596
|
+
__decorate([property({ type: String })], AxebowCarouselSelectorItem.prototype, "logoAlt", void 0);
|
|
6597
|
+
AxebowCarouselSelectorItem = __decorate([customElement("axebow-carousel-selector-item")], AxebowCarouselSelectorItem);
|
|
6598
|
+
//#endregion
|
|
6599
|
+
//#region src/components/axebow-carousel-selector-tenant/axebow-carousel-selector-tenant.ts
|
|
6600
|
+
var ITEM_GAP_PX = 48;
|
|
6601
|
+
var REFERENCE_WIDTH_PX = 777;
|
|
6602
|
+
function slidesPerPageFor(containerWidthPx) {
|
|
6603
|
+
return (containerWidthPx + ITEM_GAP_PX) / 275;
|
|
6604
|
+
}
|
|
6605
|
+
var AxebowCarouselSelectorTenant = class AxebowCarouselSelectorTenant extends LitElement {
|
|
6606
|
+
constructor(..._args) {
|
|
6607
|
+
super(..._args);
|
|
6608
|
+
this.variant = "account";
|
|
6609
|
+
this.items = [];
|
|
6610
|
+
this._slidesPerPage = slidesPerPageFor(REFERENCE_WIDTH_PX);
|
|
6611
|
+
}
|
|
6612
|
+
static {
|
|
6613
|
+
this.styles = [unsafeCSS(tailwind_default), css`
|
|
6614
|
+
:host {
|
|
6615
|
+
display: block;
|
|
6616
|
+
width: 100%;
|
|
6617
|
+
}
|
|
6618
|
+
sl-carousel {
|
|
6619
|
+
display: block;
|
|
6620
|
+
width: 100%;
|
|
6621
|
+
--slide-gap: ${ITEM_GAP_PX / 16}rem;
|
|
6622
|
+
}
|
|
6623
|
+
sl-carousel::part(scroll-container) {
|
|
6624
|
+
height: 4.5rem;
|
|
6625
|
+
}
|
|
6626
|
+
sl-carousel-item {
|
|
6627
|
+
height: 100%;
|
|
6628
|
+
}
|
|
6629
|
+
`];
|
|
6630
|
+
}
|
|
6631
|
+
connectedCallback() {
|
|
6632
|
+
super.connectedCallback();
|
|
6633
|
+
this._resizeObserver = new ResizeObserver((entries) => {
|
|
6634
|
+
const width = entries[0]?.contentRect.width;
|
|
6635
|
+
if (width) this._slidesPerPage = slidesPerPageFor(width);
|
|
6636
|
+
});
|
|
6637
|
+
}
|
|
6638
|
+
disconnectedCallback() {
|
|
6639
|
+
super.disconnectedCallback();
|
|
6640
|
+
this._resizeObserver?.disconnect();
|
|
6641
|
+
}
|
|
6642
|
+
firstUpdated() {
|
|
6643
|
+
if (this._carouselEl) this._resizeObserver?.observe(this._carouselEl);
|
|
6644
|
+
}
|
|
6645
|
+
_onItemSelect(e) {
|
|
6646
|
+
this.dispatchEvent(new CustomEvent("item-select", {
|
|
6647
|
+
detail: e.detail,
|
|
6648
|
+
bubbles: true,
|
|
6649
|
+
composed: true
|
|
6650
|
+
}));
|
|
6651
|
+
}
|
|
6652
|
+
render() {
|
|
6653
|
+
return html`
|
|
6654
|
+
<sl-carousel navigation slides-per-page="${this._slidesPerPage}">
|
|
6655
|
+
${this.items.length === 0 ? html`<sl-carousel-item><slot name="empty"></slot></sl-carousel-item>` : this.items.map((item) => html`
|
|
6656
|
+
<sl-carousel-item>
|
|
6657
|
+
<axebow-carousel-selector-item
|
|
6658
|
+
.variant=${this.variant}
|
|
6659
|
+
.itemId=${item.id}
|
|
6660
|
+
.selected=${item.selected}
|
|
6661
|
+
?disabled=${item.disabled}
|
|
6662
|
+
.planLabel=${item.planLabel}
|
|
6663
|
+
.name=${item.name ?? ""}
|
|
6664
|
+
.tenantName=${item.tenantName ?? ""}
|
|
6665
|
+
.accountName=${item.accountName ?? ""}
|
|
6666
|
+
.logoSrc=${item.logoSrc ?? null}
|
|
6667
|
+
.logoAlt=${item.logoAlt ?? ""}
|
|
6668
|
+
@item-select=${this._onItemSelect}
|
|
6669
|
+
></axebow-carousel-selector-item>
|
|
6670
|
+
</sl-carousel-item>
|
|
6671
|
+
`)}
|
|
6672
|
+
</sl-carousel>
|
|
6673
|
+
`;
|
|
6674
|
+
}
|
|
6675
|
+
};
|
|
6676
|
+
__decorate([property({ type: String })], AxebowCarouselSelectorTenant.prototype, "variant", void 0);
|
|
6677
|
+
__decorate([property({ type: Array })], AxebowCarouselSelectorTenant.prototype, "items", void 0);
|
|
6678
|
+
__decorate([state()], AxebowCarouselSelectorTenant.prototype, "_slidesPerPage", void 0);
|
|
6679
|
+
__decorate([query("sl-carousel")], AxebowCarouselSelectorTenant.prototype, "_carouselEl", void 0);
|
|
6680
|
+
AxebowCarouselSelectorTenant = __decorate([customElement("axebow-carousel-selector-tenant")], AxebowCarouselSelectorTenant);
|
|
6681
|
+
//#endregion
|
|
7147
6682
|
//#region src/components/axebow-expandable-header/axebow-expandable-header.ts
|
|
7148
6683
|
var AxebowExpandableHeader = class AxebowExpandableHeader extends LitElement {
|
|
7149
6684
|
constructor(..._args) {
|
|
@@ -7174,9 +6709,9 @@ var AxebowExpandableHeader = class AxebowExpandableHeader extends LitElement {
|
|
|
7174
6709
|
<axebow-switch .checked=${this.expanded} .onChange=${(checked) => this.onToggle?.(checked)}>
|
|
7175
6710
|
</axebow-switch>
|
|
7176
6711
|
<span class="text-sm text-(--axebow-gray) italic">${this.stateLabel}</span>
|
|
7177
|
-
<
|
|
7178
|
-
<axebow-icon iconName="help" iconColor="var(--axebow-primary)" size="
|
|
7179
|
-
</
|
|
6712
|
+
<sl-tooltip content="${this.tooltipContent}">
|
|
6713
|
+
<axebow-icon iconName="help" iconColor="var(--axebow-primary)" size="small" filled></axebow-icon>
|
|
6714
|
+
</sl-tooltip>
|
|
7180
6715
|
</div>
|
|
7181
6716
|
<div class="${this.expanded ? "block pb-4" : "hidden"}">
|
|
7182
6717
|
<slot></slot>
|
|
@@ -7205,6 +6740,8 @@ var AxebowActionsFooter = class AxebowActionsFooter extends LitElement {
|
|
|
7205
6740
|
this.isActionDisabled = false;
|
|
7206
6741
|
this.actionVariant = "primary";
|
|
7207
6742
|
this.actionClass = "";
|
|
6743
|
+
this.actionFixedWidth = "8.5rem";
|
|
6744
|
+
this.actionFixedHeight = "2.5rem";
|
|
7208
6745
|
this.secondaryActionLabel = "";
|
|
7209
6746
|
this.onSecondaryAction = () => {};
|
|
7210
6747
|
this.isSecondaryActionDisabled = false;
|
|
@@ -7256,6 +6793,8 @@ var AxebowActionsFooter = class AxebowActionsFooter extends LitElement {
|
|
|
7256
6793
|
variant="${this.secondaryActionVariant}"
|
|
7257
6794
|
?outline=${this.secondaryActionOutline}
|
|
7258
6795
|
size="large"
|
|
6796
|
+
.fixedWidth=${this.secondaryActionFixedWidth}
|
|
6797
|
+
.fixedHeight=${this.secondaryActionFixedHeight}
|
|
7259
6798
|
.disabled=${this.isSecondaryActionDisabled}
|
|
7260
6799
|
@click=${this.onSecondaryAction}
|
|
7261
6800
|
>
|
|
@@ -7266,8 +6805,8 @@ var AxebowActionsFooter = class AxebowActionsFooter extends LitElement {
|
|
|
7266
6805
|
class="${this.actionClass}"
|
|
7267
6806
|
variant="${this.actionVariant}"
|
|
7268
6807
|
size="large"
|
|
7269
|
-
fixedWidth
|
|
7270
|
-
fixedHeight
|
|
6808
|
+
.fixedWidth=${this.actionFixedWidth}
|
|
6809
|
+
.fixedHeight=${this.actionFixedHeight}
|
|
7271
6810
|
.disabled=${this.isActionDisabled}
|
|
7272
6811
|
@click=${this.onAction}
|
|
7273
6812
|
>
|
|
@@ -7288,11 +6827,15 @@ __decorate([property({ attribute: false })], AxebowActionsFooter.prototype, "onA
|
|
|
7288
6827
|
__decorate([property({ type: Boolean })], AxebowActionsFooter.prototype, "isActionDisabled", void 0);
|
|
7289
6828
|
__decorate([property({ type: String })], AxebowActionsFooter.prototype, "actionVariant", void 0);
|
|
7290
6829
|
__decorate([property({ type: String })], AxebowActionsFooter.prototype, "actionClass", void 0);
|
|
6830
|
+
__decorate([property({ type: String })], AxebowActionsFooter.prototype, "actionFixedWidth", void 0);
|
|
6831
|
+
__decorate([property({ type: String })], AxebowActionsFooter.prototype, "actionFixedHeight", void 0);
|
|
7291
6832
|
__decorate([property({ type: Object })], AxebowActionsFooter.prototype, "secondaryActionLabel", void 0);
|
|
7292
6833
|
__decorate([property({ attribute: false })], AxebowActionsFooter.prototype, "onSecondaryAction", void 0);
|
|
7293
6834
|
__decorate([property({ type: Boolean })], AxebowActionsFooter.prototype, "isSecondaryActionDisabled", void 0);
|
|
7294
6835
|
__decorate([property({ type: String })], AxebowActionsFooter.prototype, "secondaryActionVariant", void 0);
|
|
7295
6836
|
__decorate([property({ type: Boolean })], AxebowActionsFooter.prototype, "secondaryActionOutline", void 0);
|
|
6837
|
+
__decorate([property({ type: String })], AxebowActionsFooter.prototype, "secondaryActionFixedWidth", void 0);
|
|
6838
|
+
__decorate([property({ type: String })], AxebowActionsFooter.prototype, "secondaryActionFixedHeight", void 0);
|
|
7296
6839
|
__decorate([property({ type: String })], AxebowActionsFooter.prototype, "text", void 0);
|
|
7297
6840
|
__decorate([property({ type: String })], AxebowActionsFooter.prototype, "maxWidth", void 0);
|
|
7298
6841
|
__decorate([property({ type: Boolean })], AxebowActionsFooter.prototype, "isOverlappingContent", void 0);
|
|
@@ -7339,8 +6882,10 @@ var AxebowTabSelector = class AxebowTabSelector extends LitElement {
|
|
|
7339
6882
|
constructor(..._args) {
|
|
7340
6883
|
super(..._args);
|
|
7341
6884
|
this.disabled = false;
|
|
6885
|
+
this.bordered = false;
|
|
7342
6886
|
this._activeTab = 0;
|
|
7343
6887
|
this._tabCount = 0;
|
|
6888
|
+
this._tabDisabled = [];
|
|
7344
6889
|
this._observer = null;
|
|
7345
6890
|
}
|
|
7346
6891
|
static {
|
|
@@ -7351,10 +6896,10 @@ var AxebowTabSelector = class AxebowTabSelector extends LitElement {
|
|
|
7351
6896
|
button {
|
|
7352
6897
|
font-family: inherit;
|
|
7353
6898
|
}
|
|
7354
|
-
button.tab-inactive {
|
|
6899
|
+
button.tab-inactive:not(:disabled) {
|
|
7355
6900
|
position: relative;
|
|
7356
6901
|
}
|
|
7357
|
-
button.tab-inactive:hover::after {
|
|
6902
|
+
button.tab-inactive:not(:disabled):hover::after {
|
|
7358
6903
|
content: '';
|
|
7359
6904
|
position: absolute;
|
|
7360
6905
|
bottom: 0;
|
|
@@ -7374,7 +6919,12 @@ var AxebowTabSelector = class AxebowTabSelector extends LitElement {
|
|
|
7374
6919
|
connectedCallback() {
|
|
7375
6920
|
super.connectedCallback();
|
|
7376
6921
|
this._observer = new MutationObserver(() => this._updateTabCount());
|
|
7377
|
-
this._observer.observe(this, {
|
|
6922
|
+
this._observer.observe(this, {
|
|
6923
|
+
childList: true,
|
|
6924
|
+
attributes: true,
|
|
6925
|
+
attributeFilter: ["disabled"],
|
|
6926
|
+
subtree: true
|
|
6927
|
+
});
|
|
7378
6928
|
this._updateTabCount();
|
|
7379
6929
|
}
|
|
7380
6930
|
disconnectedCallback() {
|
|
@@ -7394,9 +6944,12 @@ var AxebowTabSelector = class AxebowTabSelector extends LitElement {
|
|
|
7394
6944
|
if (this._activeTab >= count) this._activeTab = 0;
|
|
7395
6945
|
this._tabCount = count;
|
|
7396
6946
|
}
|
|
6947
|
+
this._tabDisabled = Array.from({ length: this._tabCount }, (_, i) => {
|
|
6948
|
+
return this.querySelector(`[slot="tab-label-${i}"]`)?.hasAttribute("disabled") ?? false;
|
|
6949
|
+
});
|
|
7397
6950
|
}
|
|
7398
6951
|
_selectTab(index) {
|
|
7399
|
-
if (this.disabled) return;
|
|
6952
|
+
if (this.disabled || this._tabDisabled[index]) return;
|
|
7400
6953
|
this._activeTab = index;
|
|
7401
6954
|
this.dispatchEvent(new CustomEvent("tab-change", {
|
|
7402
6955
|
detail: { index },
|
|
@@ -7406,28 +6959,36 @@ var AxebowTabSelector = class AxebowTabSelector extends LitElement {
|
|
|
7406
6959
|
}
|
|
7407
6960
|
render() {
|
|
7408
6961
|
const tabs = Array.from({ length: this._tabCount }, (_, i) => i);
|
|
6962
|
+
const isFirstActive = this._activeTab === 0;
|
|
6963
|
+
const isLastActive = this._activeTab === this._tabCount - 1;
|
|
7409
6964
|
return html`
|
|
7410
6965
|
<div class="w-full max-w-194.25 rounded-xl box-border">
|
|
7411
6966
|
<div class="w-full h-8 flex bg-(--axebow-base) gap-1 rounded-t-xl box-border">
|
|
7412
|
-
${tabs.map((i) =>
|
|
6967
|
+
${tabs.map((i) => {
|
|
6968
|
+
const active = this._activeTab === i;
|
|
6969
|
+
const isDisabled = this._tabDisabled[i];
|
|
6970
|
+
return html`
|
|
7413
6971
|
<button
|
|
7414
|
-
class="flex-1 h-8 flex items-center justify-center gap-2
|
|
6972
|
+
class="flex-1 h-8 flex items-center justify-center gap-2 transition-colors duration-200 font-medium
|
|
7415
6973
|
focus-visible:outline-2 focus-visible:outline-(--axebow-tertiary)
|
|
7416
|
-
${
|
|
6974
|
+
${isDisabled ? "opacity-60 cursor-not-allowed" : "cursor-pointer"}
|
|
6975
|
+
${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"}"
|
|
6976
|
+
?disabled=${isDisabled}
|
|
7417
6977
|
@click=${() => this._selectTab(i)}
|
|
7418
6978
|
>
|
|
7419
6979
|
<axebow-icon
|
|
7420
|
-
iconName="${
|
|
6980
|
+
iconName="${active ? "radio_button_checked" : "radio_button_unchecked"}"
|
|
7421
6981
|
iconColor="var(--axebow-tertiary)"
|
|
7422
|
-
size="
|
|
6982
|
+
size="x-small"
|
|
7423
6983
|
></axebow-icon>
|
|
7424
6984
|
<slot name="tab-label-${i}"></slot>
|
|
7425
6985
|
</button>
|
|
7426
|
-
|
|
6986
|
+
`;
|
|
6987
|
+
})}
|
|
7427
6988
|
</div>
|
|
7428
6989
|
|
|
7429
6990
|
<div
|
|
7430
|
-
class="w-full min-h-35 p-4 bg-white rounded-b-xl rounded-
|
|
6991
|
+
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)" : ""}"
|
|
7431
6992
|
>
|
|
7432
6993
|
${tabs.map((i) => html`
|
|
7433
6994
|
<div class="${this._activeTab === i ? "block" : "hidden"}">
|
|
@@ -7444,197 +7005,117 @@ __decorate([property({
|
|
|
7444
7005
|
attribute: false
|
|
7445
7006
|
})], AxebowTabSelector.prototype, "disabled", void 0);
|
|
7446
7007
|
__decorate([property({ type: Number })], AxebowTabSelector.prototype, "activeTab", void 0);
|
|
7008
|
+
__decorate([property({ type: Boolean })], AxebowTabSelector.prototype, "bordered", void 0);
|
|
7447
7009
|
__decorate([state()], AxebowTabSelector.prototype, "_activeTab", void 0);
|
|
7448
7010
|
__decorate([state()], AxebowTabSelector.prototype, "_tabCount", void 0);
|
|
7011
|
+
__decorate([state()], AxebowTabSelector.prototype, "_tabDisabled", void 0);
|
|
7449
7012
|
AxebowTabSelector = __decorate([customElement("axebow-tab-selector")], AxebowTabSelector);
|
|
7450
7013
|
//#endregion
|
|
7451
|
-
//#region src/components/axebow-
|
|
7452
|
-
var
|
|
7014
|
+
//#region src/components/axebow-resource-limits/parts/axebow-resource-limit-input.ts
|
|
7015
|
+
var AxebowResourceLimitInput = class AxebowResourceLimitInput extends LitElement {
|
|
7453
7016
|
constructor(..._args) {
|
|
7454
7017
|
super(..._args);
|
|
7455
|
-
this.
|
|
7456
|
-
this.
|
|
7457
|
-
this.
|
|
7458
|
-
this.
|
|
7459
|
-
this.
|
|
7018
|
+
this.label = "";
|
|
7019
|
+
this.unit = "";
|
|
7020
|
+
this.value = "";
|
|
7021
|
+
this.max = Number.MAX_SAFE_INTEGER;
|
|
7022
|
+
this.min = 0;
|
|
7023
|
+
this.required = false;
|
|
7460
7024
|
this.disabled = false;
|
|
7461
|
-
this.
|
|
7025
|
+
this.hasError = false;
|
|
7462
7026
|
}
|
|
7463
7027
|
static {
|
|
7464
|
-
this.styles = [
|
|
7465
|
-
unsafeCSS(tailwind_default),
|
|
7466
|
-
axebowTheme,
|
|
7467
|
-
css`
|
|
7468
|
-
:host {
|
|
7469
|
-
display: block;
|
|
7470
|
-
width: 100%;
|
|
7471
|
-
}
|
|
7472
|
-
`
|
|
7473
|
-
];
|
|
7028
|
+
this.styles = [unsafeCSS(tailwind_default), axebowTheme];
|
|
7474
7029
|
}
|
|
7475
|
-
|
|
7476
|
-
return
|
|
7477
|
-
|
|
7478
|
-
|
|
7479
|
-
|
|
7480
|
-
|
|
7481
|
-
|
|
7482
|
-
|
|
7483
|
-
|
|
7484
|
-
|
|
7485
|
-
|
|
7486
|
-
|
|
7487
|
-
|
|
7488
|
-
|
|
7489
|
-
|
|
7490
|
-
|
|
7491
|
-
|
|
7492
|
-
|
|
7493
|
-
|
|
7494
|
-
|
|
7495
|
-
|
|
7496
|
-
|
|
7497
|
-
const parsed = Number(this.quantity);
|
|
7498
|
-
if (!isNaN(parsed)) return parsed;
|
|
7499
|
-
}
|
|
7500
|
-
return typeof this.quantity === "number" ? this.quantity : this._minVal;
|
|
7501
|
-
}
|
|
7502
|
-
get _percentage() {
|
|
7503
|
-
const min = this._minVal;
|
|
7504
|
-
const max = this._maxVal;
|
|
7505
|
-
if (max <= min) return 0;
|
|
7506
|
-
return (Math.max(min, Math.min(max, this._numericQuantity)) - min) / (max - min) * 100;
|
|
7507
|
-
}
|
|
7508
|
-
_setValue(newValue) {
|
|
7509
|
-
const min = this._minVal;
|
|
7510
|
-
const max = this._maxVal;
|
|
7511
|
-
const clamped = Math.max(min, Math.min(max, newValue));
|
|
7512
|
-
if (this._numericQuantity !== clamped) {
|
|
7513
|
-
this.quantity = clamped;
|
|
7514
|
-
this.dispatchEvent(new CustomEvent("change", {
|
|
7515
|
-
detail: {
|
|
7516
|
-
value: clamped,
|
|
7517
|
-
quantity: clamped
|
|
7518
|
-
},
|
|
7519
|
-
bubbles: true,
|
|
7520
|
-
composed: true
|
|
7521
|
-
}));
|
|
7522
|
-
}
|
|
7030
|
+
render() {
|
|
7031
|
+
return html`
|
|
7032
|
+
<div class="flex flex-col items-center gap-2 w-24.75 shrink-0">
|
|
7033
|
+
<div class="flex items-center gap-1">
|
|
7034
|
+
${this.required ? html`<span class="text-(--axebow-error)">*</span>` : ""}
|
|
7035
|
+
<span class="text-sm font-semibold text-center">${this.label}</span>
|
|
7036
|
+
</div>
|
|
7037
|
+
<axebow-input
|
|
7038
|
+
controlType="integer"
|
|
7039
|
+
.compact=${true}
|
|
7040
|
+
.value=${this.value}
|
|
7041
|
+
.max=${this.max}
|
|
7042
|
+
.min=${this.min}
|
|
7043
|
+
.disabled=${this.disabled}
|
|
7044
|
+
.hasError=${this.hasError}
|
|
7045
|
+
.callback=${this.callback}
|
|
7046
|
+
fixedWidth="6.1875rem"
|
|
7047
|
+
fixedHeight="2.5rem"
|
|
7048
|
+
></axebow-input>
|
|
7049
|
+
<span class="text-sm text-(--axebow-secondary)">${this.unit}</span>
|
|
7050
|
+
</div>
|
|
7051
|
+
`;
|
|
7523
7052
|
}
|
|
7524
|
-
|
|
7525
|
-
|
|
7526
|
-
|
|
7527
|
-
|
|
7528
|
-
|
|
7529
|
-
|
|
7530
|
-
|
|
7531
|
-
|
|
7532
|
-
|
|
7533
|
-
|
|
7534
|
-
|
|
7535
|
-
|
|
7536
|
-
|
|
7537
|
-
|
|
7538
|
-
|
|
7539
|
-
|
|
7540
|
-
|
|
7541
|
-
|
|
7542
|
-
|
|
7543
|
-
|
|
7544
|
-
|
|
7545
|
-
|
|
7546
|
-
const
|
|
7547
|
-
|
|
7548
|
-
|
|
7549
|
-
|
|
7550
|
-
this.
|
|
7551
|
-
|
|
7552
|
-
|
|
7553
|
-
|
|
7554
|
-
|
|
7555
|
-
|
|
7556
|
-
|
|
7557
|
-
|
|
7558
|
-
|
|
7559
|
-
|
|
7560
|
-
|
|
7561
|
-
|
|
7562
|
-
|
|
7563
|
-
|
|
7564
|
-
|
|
7565
|
-
|
|
7566
|
-
|
|
7567
|
-
|
|
7568
|
-
|
|
7569
|
-
|
|
7570
|
-
|
|
7053
|
+
};
|
|
7054
|
+
__decorate([property({ type: String })], AxebowResourceLimitInput.prototype, "label", void 0);
|
|
7055
|
+
__decorate([property({ type: String })], AxebowResourceLimitInput.prototype, "unit", void 0);
|
|
7056
|
+
__decorate([property({ type: String })], AxebowResourceLimitInput.prototype, "value", void 0);
|
|
7057
|
+
__decorate([property({ type: Number })], AxebowResourceLimitInput.prototype, "max", void 0);
|
|
7058
|
+
__decorate([property({ type: Number })], AxebowResourceLimitInput.prototype, "min", void 0);
|
|
7059
|
+
__decorate([property({ type: Boolean })], AxebowResourceLimitInput.prototype, "required", void 0);
|
|
7060
|
+
__decorate([property({ type: Boolean })], AxebowResourceLimitInput.prototype, "disabled", void 0);
|
|
7061
|
+
__decorate([property({ type: Boolean })], AxebowResourceLimitInput.prototype, "hasError", void 0);
|
|
7062
|
+
__decorate([property({ attribute: false })], AxebowResourceLimitInput.prototype, "callback", void 0);
|
|
7063
|
+
AxebowResourceLimitInput = __decorate([customElement("axebow-resource-limit-input")], AxebowResourceLimitInput);
|
|
7064
|
+
//#endregion
|
|
7065
|
+
//#region src/components/axebow-resource-limits/axebow-resource-limits-panel.ts
|
|
7066
|
+
var AxebowResourceLimitsPanel = class AxebowResourceLimitsPanel extends LitElement {
|
|
7067
|
+
constructor(..._args) {
|
|
7068
|
+
super(..._args);
|
|
7069
|
+
this.storageFields = [];
|
|
7070
|
+
}
|
|
7071
|
+
static {
|
|
7072
|
+
this.styles = [unsafeCSS(tailwind_default), axebowTheme];
|
|
7073
|
+
}
|
|
7074
|
+
_handleChange(field, e) {
|
|
7075
|
+
const target = e.target;
|
|
7076
|
+
let value = Math.trunc(Number(target.value));
|
|
7077
|
+
if (value > field.max) value = field.max;
|
|
7078
|
+
target.value = value.toString();
|
|
7079
|
+
this.dispatchEvent(new CustomEvent("resource-limit-change", {
|
|
7080
|
+
detail: {
|
|
7081
|
+
key: field.key,
|
|
7082
|
+
value
|
|
7083
|
+
},
|
|
7084
|
+
bubbles: true,
|
|
7085
|
+
composed: true
|
|
7086
|
+
}));
|
|
7087
|
+
}
|
|
7088
|
+
_renderField(field) {
|
|
7089
|
+
return html`
|
|
7090
|
+
<axebow-resource-limit-input
|
|
7091
|
+
label=${field.label}
|
|
7092
|
+
unit=${field.unit}
|
|
7093
|
+
value=${field.value?.toString() ?? ""}
|
|
7094
|
+
.max=${field.max}
|
|
7095
|
+
.min=${field.min ?? 0}
|
|
7096
|
+
?required=${field.required}
|
|
7097
|
+
?disabled=${field.disabled}
|
|
7098
|
+
?hasError=${field.hasError}
|
|
7099
|
+
.callback=${(e) => this._handleChange(field, e)}
|
|
7100
|
+
></axebow-resource-limit-input>
|
|
7101
|
+
`;
|
|
7571
7102
|
}
|
|
7572
7103
|
render() {
|
|
7573
|
-
|
|
7574
|
-
const currentVal = this._numericQuantity;
|
|
7575
|
-
const min = this._minVal;
|
|
7576
|
-
const max = this._maxVal;
|
|
7577
|
-
const mid = Math.round((min + max) / 2);
|
|
7104
|
+
if (!this.cpu || !this.memory) return html``;
|
|
7578
7105
|
return html`
|
|
7579
|
-
<div class="
|
|
7580
|
-
|
|
7581
|
-
<div
|
|
7582
|
-
|
|
7583
|
-
tabindex=${this.disabled ? -1 : 0}
|
|
7584
|
-
role="slider"
|
|
7585
|
-
aria-valuemin=${min}
|
|
7586
|
-
aria-valuemax=${max}
|
|
7587
|
-
aria-valuenow=${currentVal}
|
|
7588
|
-
aria-valuetext=${String(currentVal)}
|
|
7589
|
-
@pointerdown=${this._handlePointerDown}
|
|
7590
|
-
@keydown=${this._handleKeyDown}
|
|
7591
|
-
>
|
|
7592
|
-
<!-- Outer track padding container for exact knob alignment -->
|
|
7593
|
-
<div class="slider-track-container relative w-full h-3 rounded-full bg-[#C7DCFA] overflow-visible">
|
|
7594
|
-
<!-- Active Fill Track -->
|
|
7595
|
-
<div
|
|
7596
|
-
class="absolute left-0 top-0 bottom-0 rounded-full bg-[#006BFF] transition-all duration-150 ease-out"
|
|
7597
|
-
style="width: ${percent}%;"
|
|
7598
|
-
></div>
|
|
7599
|
-
|
|
7600
|
-
<!-- Slider Thumb Knob -->
|
|
7601
|
-
<div
|
|
7602
|
-
class="absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-7 h-7 rounded-full bg-[#006BFF] border-2 border-white shadow-[0_2px_6px_rgba(0,0,0,0.2)] transition-all duration-150 ease-out cursor-grab active:cursor-grabbing hover:scale-105"
|
|
7603
|
-
style="left: ${percent}%;"
|
|
7604
|
-
></div>
|
|
7605
|
-
</div>
|
|
7606
|
-
</div>
|
|
7607
|
-
|
|
7608
|
-
<!-- Labels below -->
|
|
7609
|
-
<div class="flex justify-between items-center text-sm font-semibold text-[#78787A] px-1">
|
|
7610
|
-
<span class="w-1/3 text-left cursor-pointer" @click=${() => !this.disabled && this._setValue(min)}>
|
|
7611
|
-
${this.minTag}
|
|
7612
|
-
</span>
|
|
7613
|
-
<span class="w-1/3 text-center cursor-pointer" @click=${() => !this.disabled && this._setValue(mid)}>
|
|
7614
|
-
${this.mediumTag}
|
|
7615
|
-
</span>
|
|
7616
|
-
<span class="w-1/3 text-right cursor-pointer" @click=${() => !this.disabled && this._setValue(max)}>
|
|
7617
|
-
${this.maxTag}
|
|
7618
|
-
</span>
|
|
7106
|
+
<div class="flex items-center flex-wrap gap-19">
|
|
7107
|
+
<div class="flex items-start gap-6">${this._renderField(this.cpu)} ${this._renderField(this.memory)}</div>
|
|
7108
|
+
<div class="flex items-start gap-4 w-100.5 p-4 border border-(--axebow-table-header-border) rounded-md box-border">
|
|
7109
|
+
${this.storageFields.map((field) => this._renderField(field))}
|
|
7619
7110
|
</div>
|
|
7620
7111
|
</div>
|
|
7621
7112
|
`;
|
|
7622
7113
|
}
|
|
7623
7114
|
};
|
|
7624
|
-
__decorate([property({
|
|
7625
|
-
|
|
7626
|
-
|
|
7627
|
-
|
|
7628
|
-
__decorate([property()], AxebowSelectorSlider.prototype, "minTag", void 0);
|
|
7629
|
-
__decorate([property()], AxebowSelectorSlider.prototype, "mediumTag", void 0);
|
|
7630
|
-
__decorate([property()], AxebowSelectorSlider.prototype, "maxTag", void 0);
|
|
7631
|
-
__decorate([property({ type: Number })], AxebowSelectorSlider.prototype, "min", void 0);
|
|
7632
|
-
__decorate([property({ type: Number })], AxebowSelectorSlider.prototype, "max", void 0);
|
|
7633
|
-
__decorate([property({ type: Number })], AxebowSelectorSlider.prototype, "step", void 0);
|
|
7634
|
-
__decorate([property({ type: Boolean })], AxebowSelectorSlider.prototype, "disabled", void 0);
|
|
7635
|
-
__decorate([property()], AxebowSelectorSlider.prototype, "value", null);
|
|
7636
|
-
__decorate([query(".slider-track-container")], AxebowSelectorSlider.prototype, "_trackContainer", void 0);
|
|
7637
|
-
AxebowSelectorSlider = __decorate([customElement("axebow-selector-slider")], AxebowSelectorSlider);
|
|
7115
|
+
__decorate([property({ type: Object })], AxebowResourceLimitsPanel.prototype, "cpu", void 0);
|
|
7116
|
+
__decorate([property({ type: Object })], AxebowResourceLimitsPanel.prototype, "memory", void 0);
|
|
7117
|
+
__decorate([property({ type: Array })], AxebowResourceLimitsPanel.prototype, "storageFields", void 0);
|
|
7118
|
+
AxebowResourceLimitsPanel = __decorate([customElement("axebow-resource-limits-panel")], AxebowResourceLimitsPanel);
|
|
7638
7119
|
//#endregion
|
|
7639
7120
|
//#region src/components/axebow-deploy-summary/axebow-deploy-summary.ts
|
|
7640
7121
|
var AxebowDeploySummary = class AxebowDeploySummary extends LitElement {
|
|
@@ -7698,7 +7179,7 @@ var AxebowDeploySummary = class AxebowDeploySummary extends LitElement {
|
|
|
7698
7179
|
iconName="download_for_offline"
|
|
7699
7180
|
slot="suffix"
|
|
7700
7181
|
iconColor="var(--axebow-tertiary)"
|
|
7701
|
-
size="
|
|
7182
|
+
size="medium"
|
|
7702
7183
|
></axebow-icon>
|
|
7703
7184
|
<span class="text-sm lg:text-base hidden lg:inline">${this.downloadLabel}</span>
|
|
7704
7185
|
</axebow-button>
|
|
@@ -7794,15 +7275,15 @@ var AxebowDeploySummary = class AxebowDeploySummary extends LitElement {
|
|
|
7794
7275
|
${step.registry ? this._renderRegistrySummary(step.registry) : ""}
|
|
7795
7276
|
${step.entrypoint ? html`<div class="border-t border-dashed border-gray-300 pt-2 flex items-center gap-1 min-w-0 text-base">
|
|
7796
7277
|
<span class="shrink-0 text-(--axebow-black)">${step.entrypointLabel}</span>
|
|
7797
|
-
<
|
|
7278
|
+
<sl-tooltip content="${step.entrypoint}" hoist>
|
|
7798
7279
|
<strong class="text-(--axebow-gray) block truncate max-w-36">${step.entrypoint}</strong>
|
|
7799
|
-
</
|
|
7280
|
+
</sl-tooltip>
|
|
7800
7281
|
</div>` : ""}
|
|
7801
7282
|
${step.cmd ? html`<div class="flex items-center gap-1 min-w-0 text-base">
|
|
7802
7283
|
<span class="shrink-0 text-(--axebow-black)">${step.commandLabel}</span>
|
|
7803
|
-
<
|
|
7284
|
+
<sl-tooltip content="${step.cmd}" hoist>
|
|
7804
7285
|
<strong class="text-(--axebow-gray) block truncate max-w-36">${step.cmd}</strong>
|
|
7805
|
-
</
|
|
7286
|
+
</sl-tooltip>
|
|
7806
7287
|
</div>` : ""}
|
|
7807
7288
|
</div>
|
|
7808
7289
|
</axebow-summary-step>
|
|
@@ -7812,15 +7293,15 @@ var AxebowDeploySummary = class AxebowDeploySummary extends LitElement {
|
|
|
7812
7293
|
return html`
|
|
7813
7294
|
<div class="flex items-center gap-2 min-w-0 text-base">
|
|
7814
7295
|
<p class="shrink-0 text-(--axebow-black)">${registry.containerRegistryLabel}</p>
|
|
7815
|
-
${!registry.logoSrc ? html`<
|
|
7296
|
+
${!registry.logoSrc ? html`<sl-tooltip content="${registry.value}" hoist>
|
|
7816
7297
|
<strong class="text-(--axebow-gray) block truncate w-full">${registry.value}</strong>
|
|
7817
|
-
</
|
|
7298
|
+
</sl-tooltip>` : html`<img src="${registry.logoSrc}" class="w-6 h-4 object-contain" />`}
|
|
7818
7299
|
</div>
|
|
7819
7300
|
${registry.credentialSecret ? html` <div class="flex items-center gap-2 min-w-0 text-base">
|
|
7820
7301
|
<p class="shrink-0 text-(--axebow-black)">${registry.registryCredentialsLabel}</p>
|
|
7821
|
-
<
|
|
7302
|
+
<sl-tooltip content="${registry.credentialSecret}" hoist>
|
|
7822
7303
|
<strong class="text-(--axebow-gray) block truncate w-full">${registry.credentialSecret}</strong>
|
|
7823
|
-
</
|
|
7304
|
+
</sl-tooltip>
|
|
7824
7305
|
</div>` : ""}
|
|
7825
7306
|
`;
|
|
7826
7307
|
}
|
|
@@ -7926,7 +7407,7 @@ var AxebowDeploySummary = class AxebowDeploySummary extends LitElement {
|
|
|
7926
7407
|
class="shrink-0"
|
|
7927
7408
|
iconName="captive_portal"
|
|
7928
7409
|
iconColor="var(--axebow-gray)"
|
|
7929
|
-
size="
|
|
7410
|
+
size="small"
|
|
7930
7411
|
title="Gateway"
|
|
7931
7412
|
></axebow-icon>` : ""}
|
|
7932
7413
|
</strong>
|
|
@@ -8047,7 +7528,7 @@ var AxebowResourceBar = class AxebowResourceBar extends LitElement {
|
|
|
8047
7528
|
<axebow-icon
|
|
8048
7529
|
iconName="${this.icon}"
|
|
8049
7530
|
iconColor="var(--axebow-strong-gray)"
|
|
8050
|
-
size="
|
|
7531
|
+
size="medium"
|
|
8051
7532
|
rotate="${Number(this.rotate)}"
|
|
8052
7533
|
></axebow-icon>
|
|
8053
7534
|
<p class="text-base font-bold text-(--axebow-black)">${this.label}</p>
|
|
@@ -8110,7 +7591,7 @@ var AxebowSummaryStepHeader = class AxebowSummaryStepHeader extends LitElement {
|
|
|
8110
7591
|
class="shrink-0"
|
|
8111
7592
|
iconName="check_circle"
|
|
8112
7593
|
iconColor="var(--axebow-success)"
|
|
8113
|
-
size="
|
|
7594
|
+
size="small"
|
|
8114
7595
|
></axebow-icon>` : ""}
|
|
8115
7596
|
</div>
|
|
8116
7597
|
<div class="flex items-center gap-2 shrink-0">
|
|
@@ -8121,7 +7602,7 @@ var AxebowSummaryStepHeader = class AxebowSummaryStepHeader extends LitElement {
|
|
|
8121
7602
|
title="${this.isEditing ? this.editingLabel : this.editLabel}"
|
|
8122
7603
|
@click=${this.isEditing ? void 0 : this._handleEdit}
|
|
8123
7604
|
>
|
|
8124
|
-
<axebow-icon iconName="edit_square" iconColor="var(--axebow-tertiary)" size="
|
|
7605
|
+
<axebow-icon iconName="edit_square" iconColor="var(--axebow-tertiary)" size="small"></axebow-icon>
|
|
8125
7606
|
</div>
|
|
8126
7607
|
` : ""}
|
|
8127
7608
|
</div>
|
|
@@ -8218,6 +7699,8 @@ var AxebowSummaryCard = class AxebowSummaryCard extends LitElement {
|
|
|
8218
7699
|
super(..._args);
|
|
8219
7700
|
this.title = "Summary";
|
|
8220
7701
|
this.minimized = false;
|
|
7702
|
+
this.cardWidth = "24.125rem";
|
|
7703
|
+
this.cardHeight = "";
|
|
8221
7704
|
this.isSummaryOpen = true;
|
|
8222
7705
|
}
|
|
8223
7706
|
static {
|
|
@@ -8233,6 +7716,13 @@ var AxebowSummaryCard = class AxebowSummaryCard extends LitElement {
|
|
|
8233
7716
|
--border-color: transparent !important;
|
|
8234
7717
|
border: none !important;
|
|
8235
7718
|
}
|
|
7719
|
+
sl-card::part(base) {
|
|
7720
|
+
width: 100%;
|
|
7721
|
+
height: 100%;
|
|
7722
|
+
}
|
|
7723
|
+
sl-card::part(body) {
|
|
7724
|
+
height: 100%;
|
|
7725
|
+
}
|
|
8236
7726
|
`
|
|
8237
7727
|
];
|
|
8238
7728
|
}
|
|
@@ -8240,15 +7730,16 @@ var AxebowSummaryCard = class AxebowSummaryCard extends LitElement {
|
|
|
8240
7730
|
if (this.minimized && window.innerWidth >= 1024) return this._renderMinimizedView();
|
|
8241
7731
|
return html`
|
|
8242
7732
|
<div
|
|
8243
|
-
class="w-full lg:w-
|
|
7733
|
+
class="w-full lg:w-(--card-width) lg:sticky static top-25 h-auto ${this.cardHeight ? "lg:min-h-(--card-height)" : "lg:min-h-[calc(100vh-6.25rem)]"} rounded-xl z-10 transition-all duration-300"
|
|
7734
|
+
style="--card-width: ${this.cardWidth}; --card-height: ${this.cardHeight};"
|
|
8244
7735
|
>
|
|
8245
7736
|
<sl-card
|
|
8246
|
-
class="w-full h-full
|
|
7737
|
+
class="w-full h-full shadow-none border-t border-l-0 border-r-0 border-b-0 rounded-none lg:shadow lg:border lg:rounded-xl"
|
|
8247
7738
|
>
|
|
8248
7739
|
<div class="h-full flex flex-col">
|
|
8249
7740
|
${this._renderHeader()}
|
|
8250
7741
|
<sl-divider></sl-divider>
|
|
8251
|
-
<div class="${this.isSummaryOpen ? "" : "hidden"} lg:block flex-1
|
|
7742
|
+
<div class="${this.isSummaryOpen ? "" : "hidden"} lg:block flex-1 mt-4">
|
|
8252
7743
|
<slot></slot>
|
|
8253
7744
|
</div>
|
|
8254
7745
|
</div>
|
|
@@ -8266,7 +7757,7 @@ var AxebowSummaryCard = class AxebowSummaryCard extends LitElement {
|
|
|
8266
7757
|
<div class="flex flex-col items-center gap-4">
|
|
8267
7758
|
<axebow-icon
|
|
8268
7759
|
iconName="keyboard_arrow_left"
|
|
8269
|
-
size="
|
|
7760
|
+
size="medium"
|
|
8270
7761
|
class="group-hover:-translate-x-1 transition-transform"
|
|
8271
7762
|
></axebow-icon>
|
|
8272
7763
|
<span
|
|
@@ -8298,7 +7789,7 @@ var AxebowSummaryCard = class AxebowSummaryCard extends LitElement {
|
|
|
8298
7789
|
@click="${this._toggleMinimize}"
|
|
8299
7790
|
title="Minimize ${this.title}"
|
|
8300
7791
|
>
|
|
8301
|
-
<axebow-icon iconName="keyboard_arrow_right" size="
|
|
7792
|
+
<axebow-icon iconName="keyboard_arrow_right" size="medium"></axebow-icon>
|
|
8302
7793
|
</axebow-button>
|
|
8303
7794
|
</div>
|
|
8304
7795
|
</div>
|
|
@@ -8326,9 +7817,137 @@ var AxebowSummaryCard = class AxebowSummaryCard extends LitElement {
|
|
|
8326
7817
|
};
|
|
8327
7818
|
__decorate([property({ type: String })], AxebowSummaryCard.prototype, "title", void 0);
|
|
8328
7819
|
__decorate([property({ type: Boolean })], AxebowSummaryCard.prototype, "minimized", void 0);
|
|
7820
|
+
__decorate([property({ type: String })], AxebowSummaryCard.prototype, "cardWidth", void 0);
|
|
7821
|
+
__decorate([property({ type: String })], AxebowSummaryCard.prototype, "cardHeight", void 0);
|
|
8329
7822
|
__decorate([state()], AxebowSummaryCard.prototype, "isSummaryOpen", void 0);
|
|
8330
7823
|
AxebowSummaryCard = __decorate([customElement("axebow-summary-card")], AxebowSummaryCard);
|
|
8331
7824
|
//#endregion
|
|
7825
|
+
//#region src/components/axebow-summary/axebow-summary-limits.ts
|
|
7826
|
+
var AxebowSummaryLimits = class AxebowSummaryLimits extends LitElement {
|
|
7827
|
+
constructor(..._args) {
|
|
7828
|
+
super(..._args);
|
|
7829
|
+
this.supportedStorage = [];
|
|
7830
|
+
}
|
|
7831
|
+
static {
|
|
7832
|
+
this.styles = [unsafeCSS(tailwind_default), axebowTheme];
|
|
7833
|
+
}
|
|
7834
|
+
renderSection(title, limitKey) {
|
|
7835
|
+
return html`
|
|
7836
|
+
<div class="w-full flex flex-col gap-2">
|
|
7837
|
+
<p class="font-semibold text-base m-0">${title}</p>
|
|
7838
|
+
<div class="flex gap-1.5">
|
|
7839
|
+
<div class="w-41 h-4.25 text-base">
|
|
7840
|
+
${this.labels.vcpus}: <span class="text-(--axebow-gray)">${this.limits.cpu[limitKey]}</span>
|
|
7841
|
+
</div>
|
|
7842
|
+
<div class="w-41 h-4.25 text-base">
|
|
7843
|
+
${this.labels.memory} <span class="text-(--axebow-gray)">${this.limits.memory[limitKey]} GB</span>
|
|
7844
|
+
</div>
|
|
7845
|
+
</div>
|
|
7846
|
+
${this.supportedStorage.includes("volatile") ? html`
|
|
7847
|
+
<p class="text-base m-0">
|
|
7848
|
+
${this.labels.volatile}:
|
|
7849
|
+
<span class="text-(--axebow-gray)">${this.limits.volatileStorage[limitKey]} GB</span>
|
|
7850
|
+
</p>
|
|
7851
|
+
` : ""}
|
|
7852
|
+
${this.supportedStorage.includes("nonReplicated") ? html`
|
|
7853
|
+
<p class="text-base m-0">
|
|
7854
|
+
${this.labels.nonReplicated}:
|
|
7855
|
+
<span class="text-(--axebow-gray)">${this.limits.nonReplicatedStorage[limitKey]} GB</span>
|
|
7856
|
+
</p>
|
|
7857
|
+
` : ""}
|
|
7858
|
+
${this.supportedStorage.includes("persistent") ? html`
|
|
7859
|
+
<p class="text-base m-0">
|
|
7860
|
+
${this.labels.persistent}:
|
|
7861
|
+
<span class="text-(--axebow-gray)">${this.limits.persistentStorage[limitKey]} GB</span>
|
|
7862
|
+
</p>
|
|
7863
|
+
` : ""}
|
|
7864
|
+
</div>
|
|
7865
|
+
`;
|
|
7866
|
+
}
|
|
7867
|
+
render() {
|
|
7868
|
+
if (!this.limits || !this.labels) return html``;
|
|
7869
|
+
return html`
|
|
7870
|
+
${this.renderSection(this.labels.hardLimits, "max")}
|
|
7871
|
+
<sl-divider class="w-83.5 h-px bg-(--axebow-gray)"></sl-divider>
|
|
7872
|
+
${this.renderSection(this.labels.softLimits, "min")}
|
|
7873
|
+
`;
|
|
7874
|
+
}
|
|
7875
|
+
};
|
|
7876
|
+
__decorate([property({ type: Object })], AxebowSummaryLimits.prototype, "limits", void 0);
|
|
7877
|
+
__decorate([property({ type: Array })], AxebowSummaryLimits.prototype, "supportedStorage", void 0);
|
|
7878
|
+
__decorate([property({ type: Object })], AxebowSummaryLimits.prototype, "labels", void 0);
|
|
7879
|
+
AxebowSummaryLimits = __decorate([customElement("axebow-summary-limits")], AxebowSummaryLimits);
|
|
7880
|
+
//#endregion
|
|
7881
|
+
//#region src/components/axebow-summary/axebow-summary-flavors.ts
|
|
7882
|
+
var AxebowSummaryFlavors = class AxebowSummaryFlavors extends LitElement {
|
|
7883
|
+
constructor(..._args) {
|
|
7884
|
+
super(..._args);
|
|
7885
|
+
this.supportedStorage = [];
|
|
7886
|
+
this.hasFlavors = true;
|
|
7887
|
+
}
|
|
7888
|
+
static {
|
|
7889
|
+
this.styles = [unsafeCSS(tailwind_default), axebowTheme];
|
|
7890
|
+
}
|
|
7891
|
+
render() {
|
|
7892
|
+
if (!this.labels) return html``;
|
|
7893
|
+
return html`
|
|
7894
|
+
${this.hasFlavors || this.nodes || this.highAvailable !== void 0 || this.autoscale !== void 0 || this.supportedStorage.some((s) => this.flavors?.[s]?.[0]) ? html`
|
|
7895
|
+
<div class="flex w-full gap-[2%]">
|
|
7896
|
+
<div class="flex-1 flex flex-col gap-2">
|
|
7897
|
+
<p><strong>${this.labels.workload}</strong></p>
|
|
7898
|
+
${this.hasFlavors && this.flavors?.small?.[0] ? html`<p>${this.labels.runtimePlane}</p>` : ""}
|
|
7899
|
+
<p>${this.labels.numberOfVms}</p>
|
|
7900
|
+
${this.hasFlavors && this.flavors?.medium?.[0] ? html`<p>${this.labels.controlPlane}</p>` : ""}
|
|
7901
|
+
${this.highAvailable !== void 0 ? html`<p>${this.labels.highAvailable}</p>` : ""}
|
|
7902
|
+
</div>
|
|
7903
|
+
<div class="flex-1 flex flex-col gap-2">
|
|
7904
|
+
<p><strong>${this.labels.selectedFlavor}</strong></p>
|
|
7905
|
+
${this.hasFlavors && this.flavors?.small?.[0] ? html`<p><strong class="text-(--axebow-primary)">${this.flavors?.small?.[0]}</strong></p>` : ""}
|
|
7906
|
+
<p><strong class="text-(--axebow-primary)">${this.nodes?.max || "0"}</strong></p>
|
|
7907
|
+
|
|
7908
|
+
${this.hasFlavors && this.flavors?.medium?.[0] ? html`<p><strong class="text-(--axebow-primary)">${this.flavors?.medium?.[0]}</strong></p>` : ""}
|
|
7909
|
+
${this.highAvailable !== void 0 ? html`<p>
|
|
7910
|
+
<strong class="text-(--axebow-primary)"
|
|
7911
|
+
>${this.highAvailable ? this.labels.yes : this.labels.no}</strong
|
|
7912
|
+
>
|
|
7913
|
+
</p>` : ""}
|
|
7914
|
+
</div>
|
|
7915
|
+
</div>
|
|
7916
|
+
${this.supportedStorage.some((s) => this.flavors?.[s]?.[0]) ? html`
|
|
7917
|
+
<div class="flex w-full gap-[2%] mt-2">
|
|
7918
|
+
<div class="flex-1 flex flex-col gap-2">
|
|
7919
|
+
<p><strong>${this.labels.storage}</strong></p>
|
|
7920
|
+
${this.supportedStorage.includes("volatile") && this.flavors?.volatile?.[0] ? html`<p>${this.labels.volatile}</p>` : ""}
|
|
7921
|
+
${this.supportedStorage.includes("nonReplicated") && this.flavors?.nonReplicated?.[0] ? html`<p>${this.labels.nonReplPersistent}</p>` : ""}
|
|
7922
|
+
${this.supportedStorage.includes("persistent") && this.flavors?.persistent?.[0] ? html`<p>${this.labels.persistentReplicated}</p>` : ""}
|
|
7923
|
+
</div>
|
|
7924
|
+
<div class="flex-1 flex flex-col gap-2">
|
|
7925
|
+
<p><strong>${this.labels.selectedFlavor}</strong></p>
|
|
7926
|
+
${this.supportedStorage.includes("volatile") && this.flavors?.volatile?.[0] ? html`<p>
|
|
7927
|
+
<strong class="text-(--axebow-primary)">${this.flavors?.volatile?.[0]}</strong>
|
|
7928
|
+
</p>` : ""}
|
|
7929
|
+
${this.supportedStorage.includes("nonReplicated") && this.flavors?.nonReplicated?.[0] ? html`<p>
|
|
7930
|
+
<strong class="text-(--axebow-primary)">${this.flavors?.nonReplicated?.[0]}</strong>
|
|
7931
|
+
</p>` : ""}
|
|
7932
|
+
${this.supportedStorage.includes("persistent") && this.flavors?.persistent?.[0] ? html`<p>
|
|
7933
|
+
<strong class="text-(--axebow-primary)">${this.flavors?.persistent?.[0]}</strong>
|
|
7934
|
+
</p>` : ""}
|
|
7935
|
+
</div>
|
|
7936
|
+
</div>
|
|
7937
|
+
` : ""}
|
|
7938
|
+
` : ""}
|
|
7939
|
+
`;
|
|
7940
|
+
}
|
|
7941
|
+
};
|
|
7942
|
+
__decorate([property({ type: Object })], AxebowSummaryFlavors.prototype, "flavors", void 0);
|
|
7943
|
+
__decorate([property({ type: Object })], AxebowSummaryFlavors.prototype, "nodes", void 0);
|
|
7944
|
+
__decorate([property({ type: Boolean })], AxebowSummaryFlavors.prototype, "highAvailable", void 0);
|
|
7945
|
+
__decorate([property({ type: Boolean })], AxebowSummaryFlavors.prototype, "autoscale", void 0);
|
|
7946
|
+
__decorate([property({ type: Array })], AxebowSummaryFlavors.prototype, "supportedStorage", void 0);
|
|
7947
|
+
__decorate([property({ type: Boolean })], AxebowSummaryFlavors.prototype, "hasFlavors", void 0);
|
|
7948
|
+
__decorate([property({ type: Object })], AxebowSummaryFlavors.prototype, "labels", void 0);
|
|
7949
|
+
AxebowSummaryFlavors = __decorate([customElement("axebow-summary-flavors")], AxebowSummaryFlavors);
|
|
7950
|
+
//#endregion
|
|
8332
7951
|
//#region src/components/deploy-modal-component/parts/deploy-modal-header.ts
|
|
8333
7952
|
var DeployModalHeader = class DeployModalHeader extends LitElement {
|
|
8334
7953
|
static {
|
|
@@ -8355,7 +7974,7 @@ var DeployModalHeader = class DeployModalHeader extends LitElement {
|
|
|
8355
7974
|
<slot></slot>
|
|
8356
7975
|
</div>
|
|
8357
7976
|
<div class="w-6 h-6 shrink-0 flex items-center justify-center cursor-pointer" @click=${this._onClose}>
|
|
8358
|
-
<axebow-icon iconName="cancel" iconColor="var(--axebow-gray)" size="
|
|
7977
|
+
<axebow-icon iconName="cancel" iconColor="var(--axebow-gray)" size="small"></axebow-icon>
|
|
8359
7978
|
</div>
|
|
8360
7979
|
</div>
|
|
8361
7980
|
`;
|
|
@@ -8464,6 +8083,6 @@ var CustomHomePageBody = class CustomHomePageBody extends LitElement {
|
|
|
8464
8083
|
};
|
|
8465
8084
|
CustomHomePageBody = __decorate([customElement("custom-home-page-body")], CustomHomePageBody);
|
|
8466
8085
|
//#endregion
|
|
8467
|
-
export { AxebowActionsFooter,
|
|
8086
|
+
export { AxebowActionsFooter, AxebowAlert, AxebowBanner, AxebowBaseCard, AxebowBreadcrumbHeader, AxebowButton, AxebowCardActionBanner, AxebowCardAttentionBanner, AxebowCardCloudLogo, AxebowCardFilter, AxebowCardFilterItem, AxebowCardFooter, AxebowCardHeader, AxebowCardResourceRow, AxebowCardResourceTable, AxebowCardSpecialLink, AxebowCardStatItem, AxebowCardStatsRow, AxebowCardStatus, AxebowCardTableHeader, AxebowCardVersionSelector, AxebowCarouselInput, AxebowCarouselSelectorItem, AxebowCarouselSelectorTenant, AxebowChannelConfigPanel, AxebowCheckboxInput, AxebowCollaboratorsDialog, AxebowDeployCard, AxebowDeploySummary, AxebowDialog, AxebowDragDropUploadFile, AxebowDraggableService, AxebowExpandableHeader, AxebowFilterBar, AxebowFooter, AxebowGettingStartedCard, AxebowHeader, AxebowHelpBubble, AxebowIcon, AxebowInfrastructureCard, AxebowInput, AxebowInputBase, AxebowLimitsCounter, AxebowMarketplaceCard, AxebowMoreActions, AxebowNumberCard, AxebowNumbersSection, AxebowNumericInput, AxebowPill, AxebowProvidersInput, AxebowQuickTipButton, AxebowQuickTipSection, AxebowResourceBar, AxebowResourceCard, AxebowResourceLimitInput, AxebowResourceLimitsPanel, AxebowResourcesCounter, AxebowRoleTooltip, AxebowRuntimeZipDialog, AxebowSearch, AxebowSelectInput, AxebowServicesPanel, AxebowSidebar, AxebowStepHeader, AxebowSummaryCard, AxebowSummaryFlavors, AxebowSummaryKeyValue, AxebowSummaryLimits, AxebowSummaryStep, AxebowSummaryStepHeader, AxebowSwitch, AxebowTabSelector, AxebowTenantCard, AxebowTenantResourceTable, AxebowTextInput, CustomHomePageBody, DEFAULT_ADD_DIALOG_LABELS, DeployModalComponent, DeployModalFooter, DeployModalHeader, DeployPageBody, STATUS_COLORS, axebowTheme, buildAddButton, buildExternalNodeContent, buildMainNodeContent, createElement, createIcon };
|
|
8468
8087
|
|
|
8469
8088
|
//# sourceMappingURL=index.js.map
|