@xlabs-store/core 0.0.1 → 0.0.3

package/dist/esm/x-card_12.entry.js

@@ -1,1373 +0,0 @@
-import { r as registerInstance, a as getElement, h, H as Host, c as createEvent } from './index-ig_mFsVk.js';
-
-const xCardCss = () => `@charset "UTF-8";:root{--x-color-primary:#1677ff;--x-color-primary-rgb:22, 119, 255;--x-color-primary-contrast:#ffffff;--x-color-primary-contrast-rgb:255, 255, 255;--x-color-primary-shade:#0958d9;--x-color-primary-tint:#4096ff;--x-color-primary-bg:#e6f4ff;--x-color-primary-bg-hover:#bae0ff;--x-color-primary-border:#91caff;--x-color-primary-border-hover:#69b1ff;--x-color-primary-hover:#4096ff;--x-color-primary-active:#0958d9;--x-color-primary-text:#1677ff;--x-color-primary-text-hover:#4096ff;--x-color-primary-text-active:#0958d9;--x-color-secondary:#3dc2ff;--x-color-secondary-rgb:61, 194, 255;--x-color-secondary-contrast:#ffffff;--x-color-secondary-contrast-rgb:255, 255, 255;--x-color-secondary-shade:#36abe0;--x-color-secondary-tint:#50c8ff;--x-color-success:#52c41a;--x-color-success-rgb:82, 196, 26;--x-color-success-contrast:#ffffff;--x-color-success-contrast-rgb:255, 255, 255;--x-color-success-shade:#389e0d;--x-color-success-tint:#73d13d;--x-color-success-bg:#f6ffed;--x-color-success-bg-hover:#d9f7be;--x-color-success-border:#b7eb8f;--x-color-success-border-hover:#95de64;--x-color-success-hover:#73d13d;--x-color-success-active:#389e0d;--x-color-success-text:#52c41a;--x-color-success-text-hover:#73d13d;--x-color-success-text-active:#389e0d;--x-color-warning:#faad14;--x-color-warning-rgb:250, 173, 20;--x-color-warning-contrast:#000000;--x-color-warning-contrast-rgb:0, 0, 0;--x-color-warning-shade:#d48806;--x-color-warning-tint:#ffc53d;--x-color-warning-bg:#fffbe6;--x-color-warning-bg-hover:#fff1b8;--x-color-warning-border:#ffe58f;--x-color-warning-border-hover:#ffd666;--x-color-warning-hover:#ffc53d;--x-color-warning-active:#d48806;--x-color-warning-text:#faad14;--x-color-warning-text-hover:#ffc53d;--x-color-warning-text-active:#d48806;--x-color-danger:#ff4d4f;--x-color-danger-rgb:255, 77, 79;--x-color-danger-contrast:#ffffff;--x-color-danger-contrast-rgb:255, 255, 255;--x-color-danger-shade:#cf1322;--x-color-danger-tint:#ff7875;--x-color-error:#ff4d4f;--x-color-error-rgb:255, 77, 79;--x-color-error-bg:#fff2f0;--x-color-error-bg-hover:#ffccc7;--x-color-error-border:#ffa39e;--x-color-error-border-hover:#ff7875;--x-color-error-hover:#ff7875;--x-color-error-active:#d9363e;--x-color-error-text:#ff4d4f;--x-color-error-text-hover:#ff7875;--x-color-error-text-active:#d9363e;--x-color-info:#1677ff;--x-color-info-rgb:22, 119, 255;--x-color-info-bg:#e6f4ff;--x-color-info-bg-hover:#bae0ff;--x-color-info-border:#91caff;--x-color-info-border-hover:#69b1ff;--x-color-info-hover:#69b1ff;--x-color-info-active:#0958d9;--x-color-info-text:#1677ff;--x-color-info-text-hover:#69b1ff;--x-color-info-text-active:#0958d9;--x-color-text:rgba(0, 0, 0, 0.88);--x-color-text-secondary:rgba(0, 0, 0, 0.65);--x-color-text-tertiary:rgba(0, 0, 0, 0.45);--x-color-text-quaternary:rgba(0, 0, 0, 0.25);--x-color-text-disabled:rgba(0, 0, 0, 0.25);--x-color-text-placeholder:rgba(0, 0, 0, 0.25);--x-color-text-heading:rgba(0, 0, 0, 0.88);--x-color-text-label:rgba(0, 0, 0, 0.65);--x-color-text-description:rgba(0, 0, 0, 0.45);--x-color-text-light-solid:#ffffff;--x-color-bg-container:#ffffff;--x-color-bg-elevated:#ffffff;--x-color-bg-layout:#f5f5f5;--x-color-bg-spotlight:rgba(0, 0, 0, 0.85);--x-color-bg-mask:rgba(0, 0, 0, 0.45);--x-color-bg-base:#ffffff;--x-color-bg-container-disabled:#f5f5f5;--x-color-bg-container-loading:rgba(255, 255, 255, 0.65);--x-color-white:#ffffff;--x-color-fill:rgba(0, 0, 0, 0.15);--x-color-fill-secondary:rgba(0, 0, 0, 0.06);--x-color-fill-tertiary:rgba(0, 0, 0, 0.04);--x-color-fill-quaternary:rgba(0, 0, 0, 0.02);--x-color-border:#d9d9d9;--x-color-border-secondary:#f0f0f0;--x-color-border-bg:#ffffff;--x-color-split:rgba(5, 5, 5, 0.06);--x-color-dark:#222428;--x-color-dark-rgb:34, 36, 40;--x-color-dark-contrast:#ffffff;--x-color-dark-contrast-rgb:255, 255, 255;--x-color-dark-shade:#1e2023;--x-color-dark-tint:#383a3e;--x-color-medium:#92949c;--x-color-medium-rgb:146, 148, 156;--x-color-medium-contrast:#ffffff;--x-color-medium-contrast-rgb:255, 255, 255;--x-color-medium-shade:#808289;--x-color-medium-tint:#9d9fa6;--x-color-light:#f4f5f8;--x-color-light-rgb:244, 245, 248;--x-color-light-contrast:#000000;--x-color-light-contrast-rgb:0, 0, 0;--x-color-light-shade:#d7d8da;--x-color-light-tint:#f5f6f9;--x-font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--x-font-family-code:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;--x-font-size:14px;--x-font-size-sm:12px;--x-font-size-lg:16px;--x-font-size-xl:20px;--x-font-size-heading-1:38px;--x-font-size-heading-2:30px;--x-font-size-heading-3:24px;--x-font-size-heading-4:20px;--x-font-size-heading-5:16px;--x-line-height:1.5714285714285714;--x-line-height-lg:1.5;--x-line-height-sm:1.6666666666666667;--x-line-height-heading-1:1.2105263157894737;--x-line-height-heading-2:1.2666666666666666;--x-line-height-heading-3:1.3333333333333333;--x-line-height-heading-4:1.4;--x-line-height-heading-5:1.5;--x-font-weight-normal:400;--x-font-weight-medium:500;--x-font-weight-semibold:600;--x-font-weight-strong:600;--x-font-size-base:14px;--x-font-size-xxl:24px;--x-line-height-base:1.5714285714285714;--x-spacing-xxs:4px;--x-spacing-xs:8px;--x-spacing-sm:12px;--x-spacing-md:16px;--x-spacing-lg:20px;--x-spacing-xl:24px;--x-spacing-xxl:32px;--x-spacing-xxxl:48px;--x-margin-xxs:4px;--x-margin-xs:8px;--x-margin-sm:12px;--x-margin-md:16px;--x-margin-lg:24px;--x-margin-xl:32px;--x-margin-xxl:48px;--x-padding-xxs:4px;--x-padding-xs:8px;--x-padding-sm:12px;--x-padding-md:16px;--x-padding-lg:24px;--x-padding-content-horizontal-lg:24px;--x-padding-content-vertical-lg:12px;--x-padding-content-horizontal:16px;--x-padding-content-vertical:12px;--x-padding-content-horizontal-sm:16px;--x-padding-content-vertical-sm:8px;--x-border-radius:6px;--x-border-radius-xs:2px;--x-border-radius-sm:4px;--x-border-radius-lg:8px;--x-border-radius-xl:12px;--x-border-radius-outer:4px;--x-border-radius-base:6px;--x-border-width:1px;--x-border-width-base:1px;--x-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-shadow-lg:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-box-shadow-popover-arrow:2px 2px 5px rgba(0, 0, 0, 0.05);--x-box-shadow-card:0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);--x-box-shadow-drawer-right:-6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-left:6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-up:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-down:0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tabs-overflow-left:inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-right:inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-top:inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-bottom:inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);--x-motion-duration-fast:0.1s;--x-motion-duration-mid:0.2s;--x-motion-duration-slow:0.3s;--x-motion-ease-in-out:cubic-bezier(0.645, 0.045, 0.355, 1);--x-motion-ease-out:cubic-bezier(0.215, 0.61, 0.355, 1);--x-motion-ease-in:cubic-bezier(0.55, 0.055, 0.675, 0.19);--x-motion-ease-out-back:cubic-bezier(0.12, 0.4, 0.29, 1.46);--x-motion-ease-in-back:cubic-bezier(0.71, -0.46, 0.88, 0.6);--x-motion-ease-in-out-circle:cubic-bezier(0.78, 0.14, 0.15, 0.86);--x-motion-ease-out-circle:cubic-bezier(0.08, 0.82, 0.17, 1);--x-motion-ease-in-circle:cubic-bezier(0.6, 0.04, 0.98, 0.34);--x-motion-ease-in-quint:cubic-bezier(0.755, 0.05, 0.855, 0.06);--x-motion-ease-out-quint:cubic-bezier(0.23, 1, 0.32, 1);--x-z-index-base:0;--x-z-index-popup-base:1000;--x-z-index-popup:1030;--x-z-index-affix:10;--x-z-index-modal:1000;--x-z-index-modal-mask:1000;--x-z-index-drawer:1000;--x-z-index-popover:1030;--x-z-index-dropdown:1050;--x-z-index-tooltip:1070;--x-z-index-notification:1080;--x-z-index-message:1090;--x-z-index-popconfirm:1060;--x-z-index-table-fixed:10;--x-opacity-loading:0.65;--x-opacity-image:1;--x-opacity-disabled:0.5;--x-control-height:32px;--x-control-height-xs:24px;--x-control-height-sm:24px;--x-control-height-lg:40px;--x-control-radio-size:16px;--x-control-checkbox-size:16px;--x-control-padding-horizontal:12px;--x-control-padding-horizontal-sm:8px;--x-control-outline-width:2px;--x-control-outline:rgba(5, 145, 255, 0.1);--x-control-item-bg-hover:rgba(0, 0, 0, 0.04);--x-control-item-bg-active:#e6f4ff;--x-control-item-bg-active-hover:#bae0ff;--x-control-item-bg-active-disabled:rgba(0, 0, 0, 0.15);--x-control-tmp-outline:rgba(0, 0, 0, 0.02);--x-color-yellow:#fadb14;--x-color-yellow-rgb:250, 219, 20;--x-font-family-base:var(--x-font-family);--x-color-link:#1677ff;--x-color-link-hover:#69b1ff;--x-color-link-active:#0958d9;--x-color-icon:rgba(0, 0, 0, 0.45);--x-color-icon-hover:rgba(0, 0, 0, 0.88);--x-color-highlight:#ff4d4f;--x-color-bg-text-hover:rgba(0, 0, 0, 0.06);--x-color-bg-text-active:rgba(0, 0, 0, 0.15);--x-screen-xs:480px;--x-screen-xs-min:480px;--x-screen-xs-max:575px;--x-screen-sm:576px;--x-screen-sm-min:576px;--x-screen-sm-max:767px;--x-screen-md:768px;--x-screen-md-min:768px;--x-screen-md-max:991px;--x-screen-lg:992px;--x-screen-lg-min:992px;--x-screen-lg-max:1199px;--x-screen-xl:1200px;--x-screen-xl-min:1200px;--x-screen-xl-max:1599px;--x-screen-xxl:1600px;--x-screen-xxl-min:1600px;--x-color-fill-content:rgba(0, 0, 0, 0.06);--x-color-fill-content-hover:rgba(0, 0, 0, 0.15);--x-color-fill-alter:rgba(0, 0, 0, 0.02);--x-scrollbar-width:12px;--x-scrollbar-track-bg:rgba(0, 0, 0, 0.04);--x-scrollbar-thumb-bg:rgba(0, 0, 0, 0.25);--x-scrollbar-thumb-bg-hover:rgba(0, 0, 0, 0.35);--x-menu-dark-bg:#001529;--x-menu-dark-item-bg:#001529;--x-menu-dark-popup-bg:#001529;--x-menu-dark-submenu-item-bg:#000c17}:host{display:block;font-family:var(--x-card-font-family, var(--x-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif));-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;color:var(--x-card-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-size:var(--x-card-font-size, var(--x-font-size-base, 14px));font-variant:tabular-nums;line-height:var(--x-card-line-height, var(--x-line-height-base, 1.5714));list-style:none;-webkit-font-feature-settings:"tnum";font-feature-settings:"tnum";position:relative;background:var(--x-card-bg, var(--x-color-bg-container, #ffffff));border-radius:var(--x-card-border-radius, var(--x-border-radius-lg, 8px));-webkit-transition:all var(--x-card-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:all var(--x-card-motion-duration, var(--x-motion-duration-mid, 0.2s))}:host(.x-card-bordered){border:var(--x-card-border-width, var(--x-border-width-base, 1px)) solid var(--x-card-border-color, var(--x-color-border-secondary, #f0f0f0))}:host(.x-card-hoverable):hover{-webkit-box-shadow:var(--x-card-shadow-hover, var(--x-shadow-secondary, 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08)));box-shadow:var(--x-card-shadow-hover, var(--x-shadow-secondary, 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08)));border-color:transparent}:host(.x-card-hoverable){cursor:pointer}.x-card-cover{margin-top:-1px;margin-inline:-1px}.x-card-cover img{display:block;width:100%;border-radius:var(--x-card-border-radius, var(--x-border-radius-lg, 8px)) var(--x-card-border-radius, var(--x-border-radius-lg, 8px)) 0 0}.x-card-head{min-height:var(--x-card-head-min-height, 48px);margin-bottom:-1px;padding:0 var(--x-card-head-padding, var(--x-spacing-xl, 24px));color:var(--x-card-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-weight:var(--x-card-head-font-weight, var(--x-font-weight-semibold, 600));font-size:var(--x-card-font-size-lg, var(--x-font-size-lg, 16px));background:var(--x-card-head-bg, transparent);border-bottom:var(--x-card-border-width, var(--x-border-width-base, 1px)) solid var(--x-card-head-border-color, var(--x-color-border-secondary, #f0f0f0));border-radius:var(--x-card-border-radius, var(--x-border-radius-lg, 8px)) var(--x-card-border-radius, var(--x-border-radius-lg, 8px)) 0 0}.x-card-head::before{display:table;content:""}.x-card-head::after{display:table;clear:both;content:""}.x-card-head-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.x-card-head-title{display:inline-block;-ms-flex:1;flex:1;padding:var(--x-card-title-padding, var(--x-spacing-md, 16px)) 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.x-card-extra{margin-left:auto;padding:var(--x-card-title-padding, var(--x-spacing-md, 16px)) 0;color:var(--x-card-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-weight:normal;font-size:var(--x-card-font-size, var(--x-font-size-base, 14px))}.x-card-extra a,.x-card-extra ::slotted(a){color:var(--x-card-link-color, var(--x-color-primary, #1677ff));text-decoration:none}.x-card-extra a:hover,.x-card-extra ::slotted(a):hover{color:var(--x-card-link-color-hover, var(--x-color-primary-hover, #4096ff))}.x-card-body{padding:var(--x-card-body-padding, var(--x-spacing-xl, 24px))}.x-card-body::before{display:table;content:""}.x-card-body::after{display:table;clear:both;content:""}.x-card-actions{display:-ms-flexbox;display:flex;margin:0;padding:0;list-style:none;background:var(--x-card-actions-bg, transparent);border-top:var(--x-card-border-width, var(--x-border-width-base, 1px)) solid var(--x-card-border-color, var(--x-color-border-secondary, #f0f0f0));border-radius:0 0 var(--x-card-border-radius, var(--x-border-radius-lg, 8px)) var(--x-card-border-radius, var(--x-border-radius-lg, 8px))}.x-card-actions>::slotted(*){-ms-flex:1;flex:1;text-align:center;margin:var(--x-card-spacing-sm, var(--x-spacing-sm, 12px)) 0;color:var(--x-card-color, var(--x-color-text, rgba(0, 0, 0, 0.88)))}.x-card-actions>::slotted(*):not(:last-child){-webkit-border-end:var(--x-card-border-width, var(--x-border-width-base, 1px)) solid var(--x-card-border-color, var(--x-color-border-secondary, #f0f0f0));border-inline-end:var(--x-card-border-width, var(--x-border-width-base, 1px)) solid var(--x-card-border-color, var(--x-color-border-secondary, #f0f0f0))}:host(.x-card-small) .x-card-head{min-height:var(--x-card-head-min-height-sm, 36px);padding:0 var(--x-card-head-padding-sm, var(--x-spacing-sm, 8px));font-size:var(--x-card-font-size, var(--x-font-size-base, 14px))}:host(.x-card-small) .x-card-head-title{padding:var(--x-card-title-padding-sm, var(--x-spacing-xs, 8px)) 0}:host(.x-card-small) .x-card-extra{padding:var(--x-card-title-padding-sm, var(--x-spacing-xs, 8px)) 0}:host(.x-card-small) .x-card-body{padding:var(--x-card-body-padding-sm, var(--x-spacing-sm, 8px))}:host(.x-card-type-inner){background:var(--x-card-inner-bg, var(--x-color-fill-alter, rgba(0, 0, 0, 0.02)))}:host(.x-card-type-inner) .x-card-head{background:var(--x-card-inner-head-bg, var(--x-color-fill-secondary, rgba(0, 0, 0, 0.06)));border-bottom-color:var(--x-card-border-color, var(--x-color-border-secondary, #f0f0f0))}.x-card-loading-content{overflow:hidden}.x-card-loading-block{height:var(--x-card-font-size, var(--x-font-size-base, 14px));margin:var(--x-card-spacing-xxs, var(--x-spacing-xxs, 4px)) 0;background:-webkit-gradient(linear, left top, right top, from(var(--x-card-loading-bg, var(--x-color-fill-secondary, rgba(0, 0, 0, 0.06)))), color-stop(var(--x-card-loading-bg-secondary, var(--x-color-fill, rgba(0, 0, 0, 0.15)))), to(var(--x-card-loading-bg, var(--x-color-fill-secondary, rgba(0, 0, 0, 0.06)))));background:linear-gradient(90deg, var(--x-card-loading-bg, var(--x-color-fill-secondary, rgba(0, 0, 0, 0.06))), var(--x-card-loading-bg-secondary, var(--x-color-fill, rgba(0, 0, 0, 0.15))), var(--x-card-loading-bg, var(--x-color-fill-secondary, rgba(0, 0, 0, 0.06))));background-size:600% 600%;border-radius:var(--x-card-border-radius-xs, var(--x-border-radius-xs, 2px));-webkit-animation:card-loading 1.4s ease infinite;animation:card-loading 1.4s ease infinite}@-webkit-keyframes card-loading{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}@keyframes card-loading{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}`;
-
-const XCard = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    get el() { return getElement(this); }
-    /**
-     * Card title (can also use slot="title").
-     * @example
-     * <x-card cardTitle="Title"></x-card>
-     */
-    cardTitle;
-    /**
-     * Content to show in the top-right corner of the card (can also use slot="extra").
-     * @example
-     * <x-card extra="More"></x-card>
-     */
-    extra;
-    /**
-     * Toggles rendering of the border around the card.
-     * @example
-     * <x-card bordered={false}></x-card>
-     */
-    bordered = true;
-    /**
-     * Lift up when hovering card.
-     * @example
-     * <x-card hoverable></x-card>
-     */
-    hoverable = false;
-    /**
-     * Shows a loading indicator while the contents of the card are being fetched.
-     * @example
-     * <x-card loading></x-card>
-     */
-    loading = false;
-    /**
-     * Size of card.
-     * @example
-     * <x-card size="small"></x-card>
-     */
-    size = 'default';
-    /**
-     * The type of card (inner for nested cards).
-     * @example
-     * <x-card type="inner"></x-card>
-     */
-    type = 'default';
-    /**
-     * Card cover image URL (can also use slot="cover").
-     * @example
-     * <x-card cover="/cover.png"></x-card>
-     */
-    cover;
-    /**
-     * Track if title slot has content.
-     */
-    hasTitleSlot = false;
-    /**
-     * Track if extra slot has content.
-     */
-    hasExtraSlot = false;
-    /**
-     * Track if cover slot has content.
-     */
-    hasCoverSlot = false;
-    /**
-     * Track if actions slot has content.
-     */
-    hasActionsSlot = false;
-    /**
-     * Inspect slots before initial render.
-     * @returns void
-     * @example
-     * <x-card></x-card>
-     */
-    componentWillLoad() {
-        this.checkSlots();
-    }
-    /**
-     * Detect presence of named slots.
-     *
-     * Flow:
-     * 1. Queries the shadow root (via `el`) for elements with specific `slot` attributes.
-     * 2. Updates boolean state flags (`hasTitleSlot`, `hasExtraSlot`, etc.).
-     *    - These flags control conditional rendering of card sections.
-     *
-     * @returns void
-     * @example
-     * <x-card><div slot="title">Title</div></x-card>
-     */
-    checkSlots() {
-        this.hasTitleSlot = !!this.el.querySelector('[slot="title"]');
-        this.hasExtraSlot = !!this.el.querySelector('[slot="extra"]');
-        this.hasCoverSlot = !!this.el.querySelector('[slot="cover"]');
-        this.hasActionsSlot = !!this.el.querySelector('[slot="actions"]');
-    }
-    /**
-     * Determine whether card header should render.
-     * @returns boolean
-     * @example
-     * <x-card cardTitle="Title"></x-card>
-     */
-    hasHead() {
-        return !!(this.cardTitle || this.extra || this.hasTitleSlot || this.hasExtraSlot);
-    }
-    /**
-     * Render card header if content exists.
-     *
-     * Flow:
-     * 1. Checks `hasHead()` (title or extra content present).
-     * 2. If present, renders `.x-card-head` container.
-     * 3. Renders title section with prop `cardTitle` and `title` slot.
-     * 4. Renders extra section with prop `extra` and `extra` slot.
-     *
-     * @returns JSX.Element | null
-     * @example
-     * <x-card cardTitle="Title"></x-card>
-     */
-    renderHead() {
-        if (!this.hasHead()) {
-            return null;
-        }
-        return (h("div", { class: "x-card-head" }, h("div", { class: "x-card-head-wrapper" }, h("div", { class: "x-card-head-title" }, this.cardTitle, h("slot", { name: "title" })), h("div", { class: "x-card-extra" }, this.extra, h("slot", { name: "extra" })))));
-    }
-    /**
-     * Render cover section if cover image or slot exists.
-     * @returns JSX.Element | null
-     * @example
-     * <x-card cover="/cover.png"></x-card>
-     */
-    renderCover() {
-        if (!this.cover && !this.hasCoverSlot) {
-            return null;
-        }
-        return (h("div", { class: "x-card-cover" }, this.cover && h("img", { src: this.cover, alt: "" }), h("slot", { name: "cover" })));
-    }
-    /**
-     * Render body content or loading skeleton.
-     * @returns JSX.Element
-     * @example
-     * <x-card loading></x-card>
-     */
-    renderBody() {
-        // Show skeleton when loading is true.
-        if (this.loading) {
-            return (h("div", { class: "x-card-body" }, h("div", { class: "x-card-loading-content" }, h("div", { class: "x-card-loading-block", style: { width: '94%' } }), h("div", { class: "x-card-loading-block", style: { width: '28%' } }), h("div", { class: "x-card-loading-block", style: { width: '62%' } }), h("div", { class: "x-card-loading-block", style: { width: '22%' } }), h("div", { class: "x-card-loading-block", style: { width: '55%' } }))));
-        }
-        return (h("div", { class: "x-card-body" }, h("slot", null)));
-    }
-    /**
-     * Render actions section if slot is provided.
-     * @returns JSX.Element | null
-     * @example
-     * <x-card><div slot="actions">Action</div></x-card>
-     */
-    renderActions() {
-        if (!this.hasActionsSlot) {
-            return null;
-        }
-        return (h("ul", { class: "x-card-actions" }, h("slot", { name: "actions" })));
-    }
-    /**
-     * Render card structure and optional sections.
-     * @returns JSX.Element
-     * @example
-     * <x-card cardTitle="Title">Body</x-card>
-     */
-    render() {
-        return (h(Host, { key: '6a4be274dd57cf6880f87a95d11203895dd936a8', class: {
-                'x-card': true,
-                'x-card-bordered': this.bordered,
-                'x-card-hoverable': this.hoverable,
-                'x-card-small': this.size === 'small',
-                'x-card-loading': this.loading,
-                'x-card-type-inner': this.type === 'inner',
-                'x-card-contain-grid': false, // TODO: detect grid children
-            } }, this.renderCover(), this.renderHead(), this.renderBody(), this.renderActions()));
-    }
-};
-XCard.style = xCardCss();
-
-const xColCss = () => `@charset "UTF-8";:root{--x-color-primary:#1677ff;--x-color-primary-rgb:22, 119, 255;--x-color-primary-contrast:#ffffff;--x-color-primary-contrast-rgb:255, 255, 255;--x-color-primary-shade:#0958d9;--x-color-primary-tint:#4096ff;--x-color-primary-bg:#e6f4ff;--x-color-primary-bg-hover:#bae0ff;--x-color-primary-border:#91caff;--x-color-primary-border-hover:#69b1ff;--x-color-primary-hover:#4096ff;--x-color-primary-active:#0958d9;--x-color-primary-text:#1677ff;--x-color-primary-text-hover:#4096ff;--x-color-primary-text-active:#0958d9;--x-color-secondary:#3dc2ff;--x-color-secondary-rgb:61, 194, 255;--x-color-secondary-contrast:#ffffff;--x-color-secondary-contrast-rgb:255, 255, 255;--x-color-secondary-shade:#36abe0;--x-color-secondary-tint:#50c8ff;--x-color-success:#52c41a;--x-color-success-rgb:82, 196, 26;--x-color-success-contrast:#ffffff;--x-color-success-contrast-rgb:255, 255, 255;--x-color-success-shade:#389e0d;--x-color-success-tint:#73d13d;--x-color-success-bg:#f6ffed;--x-color-success-bg-hover:#d9f7be;--x-color-success-border:#b7eb8f;--x-color-success-border-hover:#95de64;--x-color-success-hover:#73d13d;--x-color-success-active:#389e0d;--x-color-success-text:#52c41a;--x-color-success-text-hover:#73d13d;--x-color-success-text-active:#389e0d;--x-color-warning:#faad14;--x-color-warning-rgb:250, 173, 20;--x-color-warning-contrast:#000000;--x-color-warning-contrast-rgb:0, 0, 0;--x-color-warning-shade:#d48806;--x-color-warning-tint:#ffc53d;--x-color-warning-bg:#fffbe6;--x-color-warning-bg-hover:#fff1b8;--x-color-warning-border:#ffe58f;--x-color-warning-border-hover:#ffd666;--x-color-warning-hover:#ffc53d;--x-color-warning-active:#d48806;--x-color-warning-text:#faad14;--x-color-warning-text-hover:#ffc53d;--x-color-warning-text-active:#d48806;--x-color-danger:#ff4d4f;--x-color-danger-rgb:255, 77, 79;--x-color-danger-contrast:#ffffff;--x-color-danger-contrast-rgb:255, 255, 255;--x-color-danger-shade:#cf1322;--x-color-danger-tint:#ff7875;--x-color-error:#ff4d4f;--x-color-error-rgb:255, 77, 79;--x-color-error-bg:#fff2f0;--x-color-error-bg-hover:#ffccc7;--x-color-error-border:#ffa39e;--x-color-error-border-hover:#ff7875;--x-color-error-hover:#ff7875;--x-color-error-active:#d9363e;--x-color-error-text:#ff4d4f;--x-color-error-text-hover:#ff7875;--x-color-error-text-active:#d9363e;--x-color-info:#1677ff;--x-color-info-rgb:22, 119, 255;--x-color-info-bg:#e6f4ff;--x-color-info-bg-hover:#bae0ff;--x-color-info-border:#91caff;--x-color-info-border-hover:#69b1ff;--x-color-info-hover:#69b1ff;--x-color-info-active:#0958d9;--x-color-info-text:#1677ff;--x-color-info-text-hover:#69b1ff;--x-color-info-text-active:#0958d9;--x-color-text:rgba(0, 0, 0, 0.88);--x-color-text-secondary:rgba(0, 0, 0, 0.65);--x-color-text-tertiary:rgba(0, 0, 0, 0.45);--x-color-text-quaternary:rgba(0, 0, 0, 0.25);--x-color-text-disabled:rgba(0, 0, 0, 0.25);--x-color-text-placeholder:rgba(0, 0, 0, 0.25);--x-color-text-heading:rgba(0, 0, 0, 0.88);--x-color-text-label:rgba(0, 0, 0, 0.65);--x-color-text-description:rgba(0, 0, 0, 0.45);--x-color-text-light-solid:#ffffff;--x-color-bg-container:#ffffff;--x-color-bg-elevated:#ffffff;--x-color-bg-layout:#f5f5f5;--x-color-bg-spotlight:rgba(0, 0, 0, 0.85);--x-color-bg-mask:rgba(0, 0, 0, 0.45);--x-color-bg-base:#ffffff;--x-color-bg-container-disabled:#f5f5f5;--x-color-bg-container-loading:rgba(255, 255, 255, 0.65);--x-color-white:#ffffff;--x-color-fill:rgba(0, 0, 0, 0.15);--x-color-fill-secondary:rgba(0, 0, 0, 0.06);--x-color-fill-tertiary:rgba(0, 0, 0, 0.04);--x-color-fill-quaternary:rgba(0, 0, 0, 0.02);--x-color-border:#d9d9d9;--x-color-border-secondary:#f0f0f0;--x-color-border-bg:#ffffff;--x-color-split:rgba(5, 5, 5, 0.06);--x-color-dark:#222428;--x-color-dark-rgb:34, 36, 40;--x-color-dark-contrast:#ffffff;--x-color-dark-contrast-rgb:255, 255, 255;--x-color-dark-shade:#1e2023;--x-color-dark-tint:#383a3e;--x-color-medium:#92949c;--x-color-medium-rgb:146, 148, 156;--x-color-medium-contrast:#ffffff;--x-color-medium-contrast-rgb:255, 255, 255;--x-color-medium-shade:#808289;--x-color-medium-tint:#9d9fa6;--x-color-light:#f4f5f8;--x-color-light-rgb:244, 245, 248;--x-color-light-contrast:#000000;--x-color-light-contrast-rgb:0, 0, 0;--x-color-light-shade:#d7d8da;--x-color-light-tint:#f5f6f9;--x-font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--x-font-family-code:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;--x-font-size:14px;--x-font-size-sm:12px;--x-font-size-lg:16px;--x-font-size-xl:20px;--x-font-size-heading-1:38px;--x-font-size-heading-2:30px;--x-font-size-heading-3:24px;--x-font-size-heading-4:20px;--x-font-size-heading-5:16px;--x-line-height:1.5714285714285714;--x-line-height-lg:1.5;--x-line-height-sm:1.6666666666666667;--x-line-height-heading-1:1.2105263157894737;--x-line-height-heading-2:1.2666666666666666;--x-line-height-heading-3:1.3333333333333333;--x-line-height-heading-4:1.4;--x-line-height-heading-5:1.5;--x-font-weight-normal:400;--x-font-weight-medium:500;--x-font-weight-semibold:600;--x-font-weight-strong:600;--x-font-size-base:14px;--x-font-size-xxl:24px;--x-line-height-base:1.5714285714285714;--x-spacing-xxs:4px;--x-spacing-xs:8px;--x-spacing-sm:12px;--x-spacing-md:16px;--x-spacing-lg:20px;--x-spacing-xl:24px;--x-spacing-xxl:32px;--x-spacing-xxxl:48px;--x-margin-xxs:4px;--x-margin-xs:8px;--x-margin-sm:12px;--x-margin-md:16px;--x-margin-lg:24px;--x-margin-xl:32px;--x-margin-xxl:48px;--x-padding-xxs:4px;--x-padding-xs:8px;--x-padding-sm:12px;--x-padding-md:16px;--x-padding-lg:24px;--x-padding-content-horizontal-lg:24px;--x-padding-content-vertical-lg:12px;--x-padding-content-horizontal:16px;--x-padding-content-vertical:12px;--x-padding-content-horizontal-sm:16px;--x-padding-content-vertical-sm:8px;--x-border-radius:6px;--x-border-radius-xs:2px;--x-border-radius-sm:4px;--x-border-radius-lg:8px;--x-border-radius-xl:12px;--x-border-radius-outer:4px;--x-border-radius-base:6px;--x-border-width:1px;--x-border-width-base:1px;--x-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-shadow-lg:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-box-shadow-popover-arrow:2px 2px 5px rgba(0, 0, 0, 0.05);--x-box-shadow-card:0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);--x-box-shadow-drawer-right:-6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-left:6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-up:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-down:0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tabs-overflow-left:inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-right:inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-top:inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-bottom:inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);--x-motion-duration-fast:0.1s;--x-motion-duration-mid:0.2s;--x-motion-duration-slow:0.3s;--x-motion-ease-in-out:cubic-bezier(0.645, 0.045, 0.355, 1);--x-motion-ease-out:cubic-bezier(0.215, 0.61, 0.355, 1);--x-motion-ease-in:cubic-bezier(0.55, 0.055, 0.675, 0.19);--x-motion-ease-out-back:cubic-bezier(0.12, 0.4, 0.29, 1.46);--x-motion-ease-in-back:cubic-bezier(0.71, -0.46, 0.88, 0.6);--x-motion-ease-in-out-circle:cubic-bezier(0.78, 0.14, 0.15, 0.86);--x-motion-ease-out-circle:cubic-bezier(0.08, 0.82, 0.17, 1);--x-motion-ease-in-circle:cubic-bezier(0.6, 0.04, 0.98, 0.34);--x-motion-ease-in-quint:cubic-bezier(0.755, 0.05, 0.855, 0.06);--x-motion-ease-out-quint:cubic-bezier(0.23, 1, 0.32, 1);--x-z-index-base:0;--x-z-index-popup-base:1000;--x-z-index-popup:1030;--x-z-index-affix:10;--x-z-index-modal:1000;--x-z-index-modal-mask:1000;--x-z-index-drawer:1000;--x-z-index-popover:1030;--x-z-index-dropdown:1050;--x-z-index-tooltip:1070;--x-z-index-notification:1080;--x-z-index-message:1090;--x-z-index-popconfirm:1060;--x-z-index-table-fixed:10;--x-opacity-loading:0.65;--x-opacity-image:1;--x-opacity-disabled:0.5;--x-control-height:32px;--x-control-height-xs:24px;--x-control-height-sm:24px;--x-control-height-lg:40px;--x-control-radio-size:16px;--x-control-checkbox-size:16px;--x-control-padding-horizontal:12px;--x-control-padding-horizontal-sm:8px;--x-control-outline-width:2px;--x-control-outline:rgba(5, 145, 255, 0.1);--x-control-item-bg-hover:rgba(0, 0, 0, 0.04);--x-control-item-bg-active:#e6f4ff;--x-control-item-bg-active-hover:#bae0ff;--x-control-item-bg-active-disabled:rgba(0, 0, 0, 0.15);--x-control-tmp-outline:rgba(0, 0, 0, 0.02);--x-color-yellow:#fadb14;--x-color-yellow-rgb:250, 219, 20;--x-font-family-base:var(--x-font-family);--x-color-link:#1677ff;--x-color-link-hover:#69b1ff;--x-color-link-active:#0958d9;--x-color-icon:rgba(0, 0, 0, 0.45);--x-color-icon-hover:rgba(0, 0, 0, 0.88);--x-color-highlight:#ff4d4f;--x-color-bg-text-hover:rgba(0, 0, 0, 0.06);--x-color-bg-text-active:rgba(0, 0, 0, 0.15);--x-screen-xs:480px;--x-screen-xs-min:480px;--x-screen-xs-max:575px;--x-screen-sm:576px;--x-screen-sm-min:576px;--x-screen-sm-max:767px;--x-screen-md:768px;--x-screen-md-min:768px;--x-screen-md-max:991px;--x-screen-lg:992px;--x-screen-lg-min:992px;--x-screen-lg-max:1199px;--x-screen-xl:1200px;--x-screen-xl-min:1200px;--x-screen-xl-max:1599px;--x-screen-xxl:1600px;--x-screen-xxl-min:1600px;--x-color-fill-content:rgba(0, 0, 0, 0.06);--x-color-fill-content-hover:rgba(0, 0, 0, 0.15);--x-color-fill-alter:rgba(0, 0, 0, 0.02);--x-scrollbar-width:12px;--x-scrollbar-track-bg:rgba(0, 0, 0, 0.04);--x-scrollbar-thumb-bg:rgba(0, 0, 0, 0.25);--x-scrollbar-thumb-bg-hover:rgba(0, 0, 0, 0.35);--x-menu-dark-bg:#001529;--x-menu-dark-item-bg:#001529;--x-menu-dark-popup-bg:#001529;--x-menu-dark-submenu-item-bg:#000c17}:host{display:var(--x-col-display, block);max-width:100%;-ms-flex:var(--x-col-flex, 0 0 auto);flex:var(--x-col-flex, 0 0 auto);-ms-flex-order:var(--x-col-order, 0);order:var(--x-col-order, 0)}:host(.x-col-0){display:block;-ms-flex:0 0 0%;flex:0 0 0%;max-width:0%}:host(.x-col-offset-0){margin-left:0%}:host(.x-col-push-0){left:0%;position:relative}:host(.x-col-pull-0){right:0%;position:relative}:host(.x-col-order-0){-ms-flex-order:0;order:0}:host(.x-col-1){display:block;-ms-flex:0 0 4.1666666667%;flex:0 0 4.1666666667%;max-width:4.1666666667%}:host(.x-col-offset-1){margin-left:4.1666666667%}:host(.x-col-push-1){left:4.1666666667%;position:relative}:host(.x-col-pull-1){right:4.1666666667%;position:relative}:host(.x-col-order-1){-ms-flex-order:1;order:1}:host(.x-col-2){display:block;-ms-flex:0 0 8.3333333333%;flex:0 0 8.3333333333%;max-width:8.3333333333%}:host(.x-col-offset-2){margin-left:8.3333333333%}:host(.x-col-push-2){left:8.3333333333%;position:relative}:host(.x-col-pull-2){right:8.3333333333%;position:relative}:host(.x-col-order-2){-ms-flex-order:2;order:2}:host(.x-col-3){display:block;-ms-flex:0 0 12.5%;flex:0 0 12.5%;max-width:12.5%}:host(.x-col-offset-3){margin-left:12.5%}:host(.x-col-push-3){left:12.5%;position:relative}:host(.x-col-pull-3){right:12.5%;position:relative}:host(.x-col-order-3){-ms-flex-order:3;order:3}:host(.x-col-4){display:block;-ms-flex:0 0 16.6666666667%;flex:0 0 16.6666666667%;max-width:16.6666666667%}:host(.x-col-offset-4){margin-left:16.6666666667%}:host(.x-col-push-4){left:16.6666666667%;position:relative}:host(.x-col-pull-4){right:16.6666666667%;position:relative}:host(.x-col-order-4){-ms-flex-order:4;order:4}:host(.x-col-5){display:block;-ms-flex:0 0 20.8333333333%;flex:0 0 20.8333333333%;max-width:20.8333333333%}:host(.x-col-offset-5){margin-left:20.8333333333%}:host(.x-col-push-5){left:20.8333333333%;position:relative}:host(.x-col-pull-5){right:20.8333333333%;position:relative}:host(.x-col-order-5){-ms-flex-order:5;order:5}:host(.x-col-6){display:block;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}:host(.x-col-offset-6){margin-left:25%}:host(.x-col-push-6){left:25%;position:relative}:host(.x-col-pull-6){right:25%;position:relative}:host(.x-col-order-6){-ms-flex-order:6;order:6}:host(.x-col-7){display:block;-ms-flex:0 0 29.1666666667%;flex:0 0 29.1666666667%;max-width:29.1666666667%}:host(.x-col-offset-7){margin-left:29.1666666667%}:host(.x-col-push-7){left:29.1666666667%;position:relative}:host(.x-col-pull-7){right:29.1666666667%;position:relative}:host(.x-col-order-7){-ms-flex-order:7;order:7}:host(.x-col-8){display:block;-ms-flex:0 0 33.3333333333%;flex:0 0 33.3333333333%;max-width:33.3333333333%}:host(.x-col-offset-8){margin-left:33.3333333333%}:host(.x-col-push-8){left:33.3333333333%;position:relative}:host(.x-col-pull-8){right:33.3333333333%;position:relative}:host(.x-col-order-8){-ms-flex-order:8;order:8}:host(.x-col-9){display:block;-ms-flex:0 0 37.5%;flex:0 0 37.5%;max-width:37.5%}:host(.x-col-offset-9){margin-left:37.5%}:host(.x-col-push-9){left:37.5%;position:relative}:host(.x-col-pull-9){right:37.5%;position:relative}:host(.x-col-order-9){-ms-flex-order:9;order:9}:host(.x-col-10){display:block;-ms-flex:0 0 41.6666666667%;flex:0 0 41.6666666667%;max-width:41.6666666667%}:host(.x-col-offset-10){margin-left:41.6666666667%}:host(.x-col-push-10){left:41.6666666667%;position:relative}:host(.x-col-pull-10){right:41.6666666667%;position:relative}:host(.x-col-order-10){-ms-flex-order:10;order:10}:host(.x-col-11){display:block;-ms-flex:0 0 45.8333333333%;flex:0 0 45.8333333333%;max-width:45.8333333333%}:host(.x-col-offset-11){margin-left:45.8333333333%}:host(.x-col-push-11){left:45.8333333333%;position:relative}:host(.x-col-pull-11){right:45.8333333333%;position:relative}:host(.x-col-order-11){-ms-flex-order:11;order:11}:host(.x-col-12){display:block;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}:host(.x-col-offset-12){margin-left:50%}:host(.x-col-push-12){left:50%;position:relative}:host(.x-col-pull-12){right:50%;position:relative}:host(.x-col-order-12){-ms-flex-order:12;order:12}:host(.x-col-13){display:block;-ms-flex:0 0 54.1666666667%;flex:0 0 54.1666666667%;max-width:54.1666666667%}:host(.x-col-offset-13){margin-left:54.1666666667%}:host(.x-col-push-13){left:54.1666666667%;position:relative}:host(.x-col-pull-13){right:54.1666666667%;position:relative}:host(.x-col-order-13){-ms-flex-order:13;order:13}:host(.x-col-14){display:block;-ms-flex:0 0 58.3333333333%;flex:0 0 58.3333333333%;max-width:58.3333333333%}:host(.x-col-offset-14){margin-left:58.3333333333%}:host(.x-col-push-14){left:58.3333333333%;position:relative}:host(.x-col-pull-14){right:58.3333333333%;position:relative}:host(.x-col-order-14){-ms-flex-order:14;order:14}:host(.x-col-15){display:block;-ms-flex:0 0 62.5%;flex:0 0 62.5%;max-width:62.5%}:host(.x-col-offset-15){margin-left:62.5%}:host(.x-col-push-15){left:62.5%;position:relative}:host(.x-col-pull-15){right:62.5%;position:relative}:host(.x-col-order-15){-ms-flex-order:15;order:15}:host(.x-col-16){display:block;-ms-flex:0 0 66.6666666667%;flex:0 0 66.6666666667%;max-width:66.6666666667%}:host(.x-col-offset-16){margin-left:66.6666666667%}:host(.x-col-push-16){left:66.6666666667%;position:relative}:host(.x-col-pull-16){right:66.6666666667%;position:relative}:host(.x-col-order-16){-ms-flex-order:16;order:16}:host(.x-col-17){display:block;-ms-flex:0 0 70.8333333333%;flex:0 0 70.8333333333%;max-width:70.8333333333%}:host(.x-col-offset-17){margin-left:70.8333333333%}:host(.x-col-push-17){left:70.8333333333%;position:relative}:host(.x-col-pull-17){right:70.8333333333%;position:relative}:host(.x-col-order-17){-ms-flex-order:17;order:17}:host(.x-col-18){display:block;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}:host(.x-col-offset-18){margin-left:75%}:host(.x-col-push-18){left:75%;position:relative}:host(.x-col-pull-18){right:75%;position:relative}:host(.x-col-order-18){-ms-flex-order:18;order:18}:host(.x-col-19){display:block;-ms-flex:0 0 79.1666666667%;flex:0 0 79.1666666667%;max-width:79.1666666667%}:host(.x-col-offset-19){margin-left:79.1666666667%}:host(.x-col-push-19){left:79.1666666667%;position:relative}:host(.x-col-pull-19){right:79.1666666667%;position:relative}:host(.x-col-order-19){-ms-flex-order:19;order:19}:host(.x-col-20){display:block;-ms-flex:0 0 83.3333333333%;flex:0 0 83.3333333333%;max-width:83.3333333333%}:host(.x-col-offset-20){margin-left:83.3333333333%}:host(.x-col-push-20){left:83.3333333333%;position:relative}:host(.x-col-pull-20){right:83.3333333333%;position:relative}:host(.x-col-order-20){-ms-flex-order:20;order:20}:host(.x-col-21){display:block;-ms-flex:0 0 87.5%;flex:0 0 87.5%;max-width:87.5%}:host(.x-col-offset-21){margin-left:87.5%}:host(.x-col-push-21){left:87.5%;position:relative}:host(.x-col-pull-21){right:87.5%;position:relative}:host(.x-col-order-21){-ms-flex-order:21;order:21}:host(.x-col-22){display:block;-ms-flex:0 0 91.6666666667%;flex:0 0 91.6666666667%;max-width:91.6666666667%}:host(.x-col-offset-22){margin-left:91.6666666667%}:host(.x-col-push-22){left:91.6666666667%;position:relative}:host(.x-col-pull-22){right:91.6666666667%;position:relative}:host(.x-col-order-22){-ms-flex-order:22;order:22}:host(.x-col-23){display:block;-ms-flex:0 0 95.8333333333%;flex:0 0 95.8333333333%;max-width:95.8333333333%}:host(.x-col-offset-23){margin-left:95.8333333333%}:host(.x-col-push-23){left:95.8333333333%;position:relative}:host(.x-col-pull-23){right:95.8333333333%;position:relative}:host(.x-col-order-23){-ms-flex-order:23;order:23}:host(.x-col-24){display:block;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}:host(.x-col-offset-24){margin-left:100%}:host(.x-col-push-24){left:100%;position:relative}:host(.x-col-pull-24){right:100%;position:relative}:host(.x-col-order-24){-ms-flex-order:24;order:24}:host(.x-col-0){display:none}@media (min-width: 0){:host(.x-col-xs-0){display:block;-ms-flex:0 0 0%;flex:0 0 0%;max-width:0%}:host(.x-col-xs-1){display:block;-ms-flex:0 0 4.1666666667%;flex:0 0 4.1666666667%;max-width:4.1666666667%}:host(.x-col-xs-2){display:block;-ms-flex:0 0 8.3333333333%;flex:0 0 8.3333333333%;max-width:8.3333333333%}:host(.x-col-xs-3){display:block;-ms-flex:0 0 12.5%;flex:0 0 12.5%;max-width:12.5%}:host(.x-col-xs-4){display:block;-ms-flex:0 0 16.6666666667%;flex:0 0 16.6666666667%;max-width:16.6666666667%}:host(.x-col-xs-5){display:block;-ms-flex:0 0 20.8333333333%;flex:0 0 20.8333333333%;max-width:20.8333333333%}:host(.x-col-xs-6){display:block;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}:host(.x-col-xs-7){display:block;-ms-flex:0 0 29.1666666667%;flex:0 0 29.1666666667%;max-width:29.1666666667%}:host(.x-col-xs-8){display:block;-ms-flex:0 0 33.3333333333%;flex:0 0 33.3333333333%;max-width:33.3333333333%}:host(.x-col-xs-9){display:block;-ms-flex:0 0 37.5%;flex:0 0 37.5%;max-width:37.5%}:host(.x-col-xs-10){display:block;-ms-flex:0 0 41.6666666667%;flex:0 0 41.6666666667%;max-width:41.6666666667%}:host(.x-col-xs-11){display:block;-ms-flex:0 0 45.8333333333%;flex:0 0 45.8333333333%;max-width:45.8333333333%}:host(.x-col-xs-12){display:block;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}:host(.x-col-xs-13){display:block;-ms-flex:0 0 54.1666666667%;flex:0 0 54.1666666667%;max-width:54.1666666667%}:host(.x-col-xs-14){display:block;-ms-flex:0 0 58.3333333333%;flex:0 0 58.3333333333%;max-width:58.3333333333%}:host(.x-col-xs-15){display:block;-ms-flex:0 0 62.5%;flex:0 0 62.5%;max-width:62.5%}:host(.x-col-xs-16){display:block;-ms-flex:0 0 66.6666666667%;flex:0 0 66.6666666667%;max-width:66.6666666667%}:host(.x-col-xs-17){display:block;-ms-flex:0 0 70.8333333333%;flex:0 0 70.8333333333%;max-width:70.8333333333%}:host(.x-col-xs-18){display:block;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}:host(.x-col-xs-19){display:block;-ms-flex:0 0 79.1666666667%;flex:0 0 79.1666666667%;max-width:79.1666666667%}:host(.x-col-xs-20){display:block;-ms-flex:0 0 83.3333333333%;flex:0 0 83.3333333333%;max-width:83.3333333333%}:host(.x-col-xs-21){display:block;-ms-flex:0 0 87.5%;flex:0 0 87.5%;max-width:87.5%}:host(.x-col-xs-22){display:block;-ms-flex:0 0 91.6666666667%;flex:0 0 91.6666666667%;max-width:91.6666666667%}:host(.x-col-xs-23){display:block;-ms-flex:0 0 95.8333333333%;flex:0 0 95.8333333333%;max-width:95.8333333333%}:host(.x-col-xs-24){display:block;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}}@media (min-width: 576px){:host(.x-col-sm-0){display:block;-ms-flex:0 0 0%;flex:0 0 0%;max-width:0%}:host(.x-col-sm-1){display:block;-ms-flex:0 0 4.1666666667%;flex:0 0 4.1666666667%;max-width:4.1666666667%}:host(.x-col-sm-2){display:block;-ms-flex:0 0 8.3333333333%;flex:0 0 8.3333333333%;max-width:8.3333333333%}:host(.x-col-sm-3){display:block;-ms-flex:0 0 12.5%;flex:0 0 12.5%;max-width:12.5%}:host(.x-col-sm-4){display:block;-ms-flex:0 0 16.6666666667%;flex:0 0 16.6666666667%;max-width:16.6666666667%}:host(.x-col-sm-5){display:block;-ms-flex:0 0 20.8333333333%;flex:0 0 20.8333333333%;max-width:20.8333333333%}:host(.x-col-sm-6){display:block;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}:host(.x-col-sm-7){display:block;-ms-flex:0 0 29.1666666667%;flex:0 0 29.1666666667%;max-width:29.1666666667%}:host(.x-col-sm-8){display:block;-ms-flex:0 0 33.3333333333%;flex:0 0 33.3333333333%;max-width:33.3333333333%}:host(.x-col-sm-9){display:block;-ms-flex:0 0 37.5%;flex:0 0 37.5%;max-width:37.5%}:host(.x-col-sm-10){display:block;-ms-flex:0 0 41.6666666667%;flex:0 0 41.6666666667%;max-width:41.6666666667%}:host(.x-col-sm-11){display:block;-ms-flex:0 0 45.8333333333%;flex:0 0 45.8333333333%;max-width:45.8333333333%}:host(.x-col-sm-12){display:block;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}:host(.x-col-sm-13){display:block;-ms-flex:0 0 54.1666666667%;flex:0 0 54.1666666667%;max-width:54.1666666667%}:host(.x-col-sm-14){display:block;-ms-flex:0 0 58.3333333333%;flex:0 0 58.3333333333%;max-width:58.3333333333%}:host(.x-col-sm-15){display:block;-ms-flex:0 0 62.5%;flex:0 0 62.5%;max-width:62.5%}:host(.x-col-sm-16){display:block;-ms-flex:0 0 66.6666666667%;flex:0 0 66.6666666667%;max-width:66.6666666667%}:host(.x-col-sm-17){display:block;-ms-flex:0 0 70.8333333333%;flex:0 0 70.8333333333%;max-width:70.8333333333%}:host(.x-col-sm-18){display:block;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}:host(.x-col-sm-19){display:block;-ms-flex:0 0 79.1666666667%;flex:0 0 79.1666666667%;max-width:79.1666666667%}:host(.x-col-sm-20){display:block;-ms-flex:0 0 83.3333333333%;flex:0 0 83.3333333333%;max-width:83.3333333333%}:host(.x-col-sm-21){display:block;-ms-flex:0 0 87.5%;flex:0 0 87.5%;max-width:87.5%}:host(.x-col-sm-22){display:block;-ms-flex:0 0 91.6666666667%;flex:0 0 91.6666666667%;max-width:91.6666666667%}:host(.x-col-sm-23){display:block;-ms-flex:0 0 95.8333333333%;flex:0 0 95.8333333333%;max-width:95.8333333333%}:host(.x-col-sm-24){display:block;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}}@media (min-width: 768px){:host(.x-col-md-0){display:block;-ms-flex:0 0 0%;flex:0 0 0%;max-width:0%}:host(.x-col-md-1){display:block;-ms-flex:0 0 4.1666666667%;flex:0 0 4.1666666667%;max-width:4.1666666667%}:host(.x-col-md-2){display:block;-ms-flex:0 0 8.3333333333%;flex:0 0 8.3333333333%;max-width:8.3333333333%}:host(.x-col-md-3){display:block;-ms-flex:0 0 12.5%;flex:0 0 12.5%;max-width:12.5%}:host(.x-col-md-4){display:block;-ms-flex:0 0 16.6666666667%;flex:0 0 16.6666666667%;max-width:16.6666666667%}:host(.x-col-md-5){display:block;-ms-flex:0 0 20.8333333333%;flex:0 0 20.8333333333%;max-width:20.8333333333%}:host(.x-col-md-6){display:block;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}:host(.x-col-md-7){display:block;-ms-flex:0 0 29.1666666667%;flex:0 0 29.1666666667%;max-width:29.1666666667%}:host(.x-col-md-8){display:block;-ms-flex:0 0 33.3333333333%;flex:0 0 33.3333333333%;max-width:33.3333333333%}:host(.x-col-md-9){display:block;-ms-flex:0 0 37.5%;flex:0 0 37.5%;max-width:37.5%}:host(.x-col-md-10){display:block;-ms-flex:0 0 41.6666666667%;flex:0 0 41.6666666667%;max-width:41.6666666667%}:host(.x-col-md-11){display:block;-ms-flex:0 0 45.8333333333%;flex:0 0 45.8333333333%;max-width:45.8333333333%}:host(.x-col-md-12){display:block;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}:host(.x-col-md-13){display:block;-ms-flex:0 0 54.1666666667%;flex:0 0 54.1666666667%;max-width:54.1666666667%}:host(.x-col-md-14){display:block;-ms-flex:0 0 58.3333333333%;flex:0 0 58.3333333333%;max-width:58.3333333333%}:host(.x-col-md-15){display:block;-ms-flex:0 0 62.5%;flex:0 0 62.5%;max-width:62.5%}:host(.x-col-md-16){display:block;-ms-flex:0 0 66.6666666667%;flex:0 0 66.6666666667%;max-width:66.6666666667%}:host(.x-col-md-17){display:block;-ms-flex:0 0 70.8333333333%;flex:0 0 70.8333333333%;max-width:70.8333333333%}:host(.x-col-md-18){display:block;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}:host(.x-col-md-19){display:block;-ms-flex:0 0 79.1666666667%;flex:0 0 79.1666666667%;max-width:79.1666666667%}:host(.x-col-md-20){display:block;-ms-flex:0 0 83.3333333333%;flex:0 0 83.3333333333%;max-width:83.3333333333%}:host(.x-col-md-21){display:block;-ms-flex:0 0 87.5%;flex:0 0 87.5%;max-width:87.5%}:host(.x-col-md-22){display:block;-ms-flex:0 0 91.6666666667%;flex:0 0 91.6666666667%;max-width:91.6666666667%}:host(.x-col-md-23){display:block;-ms-flex:0 0 95.8333333333%;flex:0 0 95.8333333333%;max-width:95.8333333333%}:host(.x-col-md-24){display:block;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}}@media (min-width: 992px){:host(.x-col-lg-0){display:block;-ms-flex:0 0 0%;flex:0 0 0%;max-width:0%}:host(.x-col-lg-1){display:block;-ms-flex:0 0 4.1666666667%;flex:0 0 4.1666666667%;max-width:4.1666666667%}:host(.x-col-lg-2){display:block;-ms-flex:0 0 8.3333333333%;flex:0 0 8.3333333333%;max-width:8.3333333333%}:host(.x-col-lg-3){display:block;-ms-flex:0 0 12.5%;flex:0 0 12.5%;max-width:12.5%}:host(.x-col-lg-4){display:block;-ms-flex:0 0 16.6666666667%;flex:0 0 16.6666666667%;max-width:16.6666666667%}:host(.x-col-lg-5){display:block;-ms-flex:0 0 20.8333333333%;flex:0 0 20.8333333333%;max-width:20.8333333333%}:host(.x-col-lg-6){display:block;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}:host(.x-col-lg-7){display:block;-ms-flex:0 0 29.1666666667%;flex:0 0 29.1666666667%;max-width:29.1666666667%}:host(.x-col-lg-8){display:block;-ms-flex:0 0 33.3333333333%;flex:0 0 33.3333333333%;max-width:33.3333333333%}:host(.x-col-lg-9){display:block;-ms-flex:0 0 37.5%;flex:0 0 37.5%;max-width:37.5%}:host(.x-col-lg-10){display:block;-ms-flex:0 0 41.6666666667%;flex:0 0 41.6666666667%;max-width:41.6666666667%}:host(.x-col-lg-11){display:block;-ms-flex:0 0 45.8333333333%;flex:0 0 45.8333333333%;max-width:45.8333333333%}:host(.x-col-lg-12){display:block;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}:host(.x-col-lg-13){display:block;-ms-flex:0 0 54.1666666667%;flex:0 0 54.1666666667%;max-width:54.1666666667%}:host(.x-col-lg-14){display:block;-ms-flex:0 0 58.3333333333%;flex:0 0 58.3333333333%;max-width:58.3333333333%}:host(.x-col-lg-15){display:block;-ms-flex:0 0 62.5%;flex:0 0 62.5%;max-width:62.5%}:host(.x-col-lg-16){display:block;-ms-flex:0 0 66.6666666667%;flex:0 0 66.6666666667%;max-width:66.6666666667%}:host(.x-col-lg-17){display:block;-ms-flex:0 0 70.8333333333%;flex:0 0 70.8333333333%;max-width:70.8333333333%}:host(.x-col-lg-18){display:block;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}:host(.x-col-lg-19){display:block;-ms-flex:0 0 79.1666666667%;flex:0 0 79.1666666667%;max-width:79.1666666667%}:host(.x-col-lg-20){display:block;-ms-flex:0 0 83.3333333333%;flex:0 0 83.3333333333%;max-width:83.3333333333%}:host(.x-col-lg-21){display:block;-ms-flex:0 0 87.5%;flex:0 0 87.5%;max-width:87.5%}:host(.x-col-lg-22){display:block;-ms-flex:0 0 91.6666666667%;flex:0 0 91.6666666667%;max-width:91.6666666667%}:host(.x-col-lg-23){display:block;-ms-flex:0 0 95.8333333333%;flex:0 0 95.8333333333%;max-width:95.8333333333%}:host(.x-col-lg-24){display:block;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}}@media (min-width: 1200px){:host(.x-col-xl-0){display:block;-ms-flex:0 0 0%;flex:0 0 0%;max-width:0%}:host(.x-col-xl-1){display:block;-ms-flex:0 0 4.1666666667%;flex:0 0 4.1666666667%;max-width:4.1666666667%}:host(.x-col-xl-2){display:block;-ms-flex:0 0 8.3333333333%;flex:0 0 8.3333333333%;max-width:8.3333333333%}:host(.x-col-xl-3){display:block;-ms-flex:0 0 12.5%;flex:0 0 12.5%;max-width:12.5%}:host(.x-col-xl-4){display:block;-ms-flex:0 0 16.6666666667%;flex:0 0 16.6666666667%;max-width:16.6666666667%}:host(.x-col-xl-5){display:block;-ms-flex:0 0 20.8333333333%;flex:0 0 20.8333333333%;max-width:20.8333333333%}:host(.x-col-xl-6){display:block;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}:host(.x-col-xl-7){display:block;-ms-flex:0 0 29.1666666667%;flex:0 0 29.1666666667%;max-width:29.1666666667%}:host(.x-col-xl-8){display:block;-ms-flex:0 0 33.3333333333%;flex:0 0 33.3333333333%;max-width:33.3333333333%}:host(.x-col-xl-9){display:block;-ms-flex:0 0 37.5%;flex:0 0 37.5%;max-width:37.5%}:host(.x-col-xl-10){display:block;-ms-flex:0 0 41.6666666667%;flex:0 0 41.6666666667%;max-width:41.6666666667%}:host(.x-col-xl-11){display:block;-ms-flex:0 0 45.8333333333%;flex:0 0 45.8333333333%;max-width:45.8333333333%}:host(.x-col-xl-12){display:block;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}:host(.x-col-xl-13){display:block;-ms-flex:0 0 54.1666666667%;flex:0 0 54.1666666667%;max-width:54.1666666667%}:host(.x-col-xl-14){display:block;-ms-flex:0 0 58.3333333333%;flex:0 0 58.3333333333%;max-width:58.3333333333%}:host(.x-col-xl-15){display:block;-ms-flex:0 0 62.5%;flex:0 0 62.5%;max-width:62.5%}:host(.x-col-xl-16){display:block;-ms-flex:0 0 66.6666666667%;flex:0 0 66.6666666667%;max-width:66.6666666667%}:host(.x-col-xl-17){display:block;-ms-flex:0 0 70.8333333333%;flex:0 0 70.8333333333%;max-width:70.8333333333%}:host(.x-col-xl-18){display:block;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}:host(.x-col-xl-19){display:block;-ms-flex:0 0 79.1666666667%;flex:0 0 79.1666666667%;max-width:79.1666666667%}:host(.x-col-xl-20){display:block;-ms-flex:0 0 83.3333333333%;flex:0 0 83.3333333333%;max-width:83.3333333333%}:host(.x-col-xl-21){display:block;-ms-flex:0 0 87.5%;flex:0 0 87.5%;max-width:87.5%}:host(.x-col-xl-22){display:block;-ms-flex:0 0 91.6666666667%;flex:0 0 91.6666666667%;max-width:91.6666666667%}:host(.x-col-xl-23){display:block;-ms-flex:0 0 95.8333333333%;flex:0 0 95.8333333333%;max-width:95.8333333333%}:host(.x-col-xl-24){display:block;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}}@media (min-width: 1600px){:host(.x-col-xxl-0){display:block;-ms-flex:0 0 0%;flex:0 0 0%;max-width:0%}:host(.x-col-xxl-1){display:block;-ms-flex:0 0 4.1666666667%;flex:0 0 4.1666666667%;max-width:4.1666666667%}:host(.x-col-xxl-2){display:block;-ms-flex:0 0 8.3333333333%;flex:0 0 8.3333333333%;max-width:8.3333333333%}:host(.x-col-xxl-3){display:block;-ms-flex:0 0 12.5%;flex:0 0 12.5%;max-width:12.5%}:host(.x-col-xxl-4){display:block;-ms-flex:0 0 16.6666666667%;flex:0 0 16.6666666667%;max-width:16.6666666667%}:host(.x-col-xxl-5){display:block;-ms-flex:0 0 20.8333333333%;flex:0 0 20.8333333333%;max-width:20.8333333333%}:host(.x-col-xxl-6){display:block;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}:host(.x-col-xxl-7){display:block;-ms-flex:0 0 29.1666666667%;flex:0 0 29.1666666667%;max-width:29.1666666667%}:host(.x-col-xxl-8){display:block;-ms-flex:0 0 33.3333333333%;flex:0 0 33.3333333333%;max-width:33.3333333333%}:host(.x-col-xxl-9){display:block;-ms-flex:0 0 37.5%;flex:0 0 37.5%;max-width:37.5%}:host(.x-col-xxl-10){display:block;-ms-flex:0 0 41.6666666667%;flex:0 0 41.6666666667%;max-width:41.6666666667%}:host(.x-col-xxl-11){display:block;-ms-flex:0 0 45.8333333333%;flex:0 0 45.8333333333%;max-width:45.8333333333%}:host(.x-col-xxl-12){display:block;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}:host(.x-col-xxl-13){display:block;-ms-flex:0 0 54.1666666667%;flex:0 0 54.1666666667%;max-width:54.1666666667%}:host(.x-col-xxl-14){display:block;-ms-flex:0 0 58.3333333333%;flex:0 0 58.3333333333%;max-width:58.3333333333%}:host(.x-col-xxl-15){display:block;-ms-flex:0 0 62.5%;flex:0 0 62.5%;max-width:62.5%}:host(.x-col-xxl-16){display:block;-ms-flex:0 0 66.6666666667%;flex:0 0 66.6666666667%;max-width:66.6666666667%}:host(.x-col-xxl-17){display:block;-ms-flex:0 0 70.8333333333%;flex:0 0 70.8333333333%;max-width:70.8333333333%}:host(.x-col-xxl-18){display:block;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}:host(.x-col-xxl-19){display:block;-ms-flex:0 0 79.1666666667%;flex:0 0 79.1666666667%;max-width:79.1666666667%}:host(.x-col-xxl-20){display:block;-ms-flex:0 0 83.3333333333%;flex:0 0 83.3333333333%;max-width:83.3333333333%}:host(.x-col-xxl-21){display:block;-ms-flex:0 0 87.5%;flex:0 0 87.5%;max-width:87.5%}:host(.x-col-xxl-22){display:block;-ms-flex:0 0 91.6666666667%;flex:0 0 91.6666666667%;max-width:91.6666666667%}:host(.x-col-xxl-23){display:block;-ms-flex:0 0 95.8333333333%;flex:0 0 95.8333333333%;max-width:95.8333333333%}:host(.x-col-xxl-24){display:block;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}}`;
-
-const XCol = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    /**
-     * Raster number of cells to occupy, 0 corresponds to display: none
-     * @example
-     * <x-col span={12}></x-col>
-     */
-    span;
-    /**
-     * The number of cells to offset Col from the left
-     * @example
-     * <x-col span={8} offset={4}></x-col>
-     */
-    offset;
-    /**
-     * Raster order
-     * @example
-     * <x-col order={2}></x-col>
-     */
-    order;
-    /**
-     * The number of cells that raster is moved to the left
-     * @example
-     * <x-col pull={2}></x-col>
-     */
-    pull;
-    /**
-     * The number of cells that raster is moved to the right
-     * @example
-     * <x-col push={2}></x-col>
-     */
-    push;
-    /**
-     * Flex layout style
-     * @example
-     * <x-col flex="1 1 200px"></x-col>
-     */
-    flex;
-    /**
-     * screen < 576px
-     * @example
-     * <x-col xs={24}></x-col>
-     */
-    xs;
-    /**
-     * screen ≥ 576px
-     * @example
-     * <x-col sm={12}></x-col>
-     */
-    sm;
-    /**
-     * screen ≥ 768px
-     * @example
-     * <x-col md={8}></x-col>
-     */
-    md;
-    /**
-     * screen ≥ 992px
-     * @example
-     * <x-col lg={6}></x-col>
-     */
-    lg;
-    /**
-     * screen ≥ 1200px
-     * @example
-     * <x-col xl={6}></x-col>
-     */
-    xl;
-    /**
-     * screen ≥ 1600px
-     * @example
-     * <x-col xxl={4}></x-col>
-     */
-    xxl;
-    /**
-     * Renders the Column component.
-     *
-     * Flow:
-     * 1. Destructures all layout props.
-     * 2. Handles `flex` prop to set flex-basis and flex-grow/shrink.
-     * 3. Sets CSS variables for base layout properties (`span`, `offset`, `order`, `pull`, `push`).
-     * 4. Generates a class map for responsive breakpoints (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`) and base layout classes.
-     * 5. These classes correspond to CSS rules that apply styles within specific media queries.
-     *
-     * @returns JSX.Element - The host element with calculated classes and styles.
-     */
-    render() {
-        const { span, offset, order, pull, push, flex, xs, sm, md, lg, xl, xxl } = this;
-        const style = {};
-        // Handle flex property
-        if (flex) {
-            style['--x-col-flex'] = typeof flex === 'number' ? `${flex} ${flex} auto` : flex;
-        }
-        // Base layout props - set variables
-        if (span !== undefined) {
-            style['--x-col-span'] = span;
-            style['--x-col-display'] = span === 0 ? 'none' : 'block';
-        }
-        if (offset)
-            style['--x-col-offset'] = offset;
-        if (order)
-            style['--x-col-order'] = order;
-        if (pull)
-            style['--x-col-pull'] = pull;
-        if (push)
-            style['--x-col-push'] = push;
-        // Responsive props - we will use classes to trigger media queries in CSS
-        // Note: This is a simplified implementation. 
-        // Ideally we would parse objects for xs={{ span: 4, offset: 2 }} etc.
-        // For now we assume number/string for span.
-        const classes = {
-            'x-col': true,
-            [`x-col-${span}`]: !!span,
-            [`x-col-offset-${offset}`]: !!offset,
-            [`x-col-order-${order}`]: !!order,
-            [`x-col-pull-${pull}`]: !!pull,
-            [`x-col-push-${push}`]: !!push,
-            [`x-col-xs-${xs}`]: !!xs,
-            [`x-col-sm-${sm}`]: !!sm,
-            [`x-col-md-${md}`]: !!md,
-            [`x-col-lg-${lg}`]: !!lg,
-            [`x-col-xl-${xl}`]: !!xl,
-            [`x-col-xxl-${xxl}`]: !!xxl,
-        };
-        return (h(Host, { key: 'c57cb3e4fe1339edc56b99ceb63db1a1c004b23d', class: classes, style: style }, h("slot", { key: '684f92fff73142aaee3461fb7830085db428306f' })));
-    }
-};
-XCol.style = xColCss();
-
-const xContentCss = () => `@charset "UTF-8";:root{--x-color-primary:#1677ff;--x-color-primary-rgb:22, 119, 255;--x-color-primary-contrast:#ffffff;--x-color-primary-contrast-rgb:255, 255, 255;--x-color-primary-shade:#0958d9;--x-color-primary-tint:#4096ff;--x-color-primary-bg:#e6f4ff;--x-color-primary-bg-hover:#bae0ff;--x-color-primary-border:#91caff;--x-color-primary-border-hover:#69b1ff;--x-color-primary-hover:#4096ff;--x-color-primary-active:#0958d9;--x-color-primary-text:#1677ff;--x-color-primary-text-hover:#4096ff;--x-color-primary-text-active:#0958d9;--x-color-secondary:#3dc2ff;--x-color-secondary-rgb:61, 194, 255;--x-color-secondary-contrast:#ffffff;--x-color-secondary-contrast-rgb:255, 255, 255;--x-color-secondary-shade:#36abe0;--x-color-secondary-tint:#50c8ff;--x-color-success:#52c41a;--x-color-success-rgb:82, 196, 26;--x-color-success-contrast:#ffffff;--x-color-success-contrast-rgb:255, 255, 255;--x-color-success-shade:#389e0d;--x-color-success-tint:#73d13d;--x-color-success-bg:#f6ffed;--x-color-success-bg-hover:#d9f7be;--x-color-success-border:#b7eb8f;--x-color-success-border-hover:#95de64;--x-color-success-hover:#73d13d;--x-color-success-active:#389e0d;--x-color-success-text:#52c41a;--x-color-success-text-hover:#73d13d;--x-color-success-text-active:#389e0d;--x-color-warning:#faad14;--x-color-warning-rgb:250, 173, 20;--x-color-warning-contrast:#000000;--x-color-warning-contrast-rgb:0, 0, 0;--x-color-warning-shade:#d48806;--x-color-warning-tint:#ffc53d;--x-color-warning-bg:#fffbe6;--x-color-warning-bg-hover:#fff1b8;--x-color-warning-border:#ffe58f;--x-color-warning-border-hover:#ffd666;--x-color-warning-hover:#ffc53d;--x-color-warning-active:#d48806;--x-color-warning-text:#faad14;--x-color-warning-text-hover:#ffc53d;--x-color-warning-text-active:#d48806;--x-color-danger:#ff4d4f;--x-color-danger-rgb:255, 77, 79;--x-color-danger-contrast:#ffffff;--x-color-danger-contrast-rgb:255, 255, 255;--x-color-danger-shade:#cf1322;--x-color-danger-tint:#ff7875;--x-color-error:#ff4d4f;--x-color-error-rgb:255, 77, 79;--x-color-error-bg:#fff2f0;--x-color-error-bg-hover:#ffccc7;--x-color-error-border:#ffa39e;--x-color-error-border-hover:#ff7875;--x-color-error-hover:#ff7875;--x-color-error-active:#d9363e;--x-color-error-text:#ff4d4f;--x-color-error-text-hover:#ff7875;--x-color-error-text-active:#d9363e;--x-color-info:#1677ff;--x-color-info-rgb:22, 119, 255;--x-color-info-bg:#e6f4ff;--x-color-info-bg-hover:#bae0ff;--x-color-info-border:#91caff;--x-color-info-border-hover:#69b1ff;--x-color-info-hover:#69b1ff;--x-color-info-active:#0958d9;--x-color-info-text:#1677ff;--x-color-info-text-hover:#69b1ff;--x-color-info-text-active:#0958d9;--x-color-text:rgba(0, 0, 0, 0.88);--x-color-text-secondary:rgba(0, 0, 0, 0.65);--x-color-text-tertiary:rgba(0, 0, 0, 0.45);--x-color-text-quaternary:rgba(0, 0, 0, 0.25);--x-color-text-disabled:rgba(0, 0, 0, 0.25);--x-color-text-placeholder:rgba(0, 0, 0, 0.25);--x-color-text-heading:rgba(0, 0, 0, 0.88);--x-color-text-label:rgba(0, 0, 0, 0.65);--x-color-text-description:rgba(0, 0, 0, 0.45);--x-color-text-light-solid:#ffffff;--x-color-bg-container:#ffffff;--x-color-bg-elevated:#ffffff;--x-color-bg-layout:#f5f5f5;--x-color-bg-spotlight:rgba(0, 0, 0, 0.85);--x-color-bg-mask:rgba(0, 0, 0, 0.45);--x-color-bg-base:#ffffff;--x-color-bg-container-disabled:#f5f5f5;--x-color-bg-container-loading:rgba(255, 255, 255, 0.65);--x-color-white:#ffffff;--x-color-fill:rgba(0, 0, 0, 0.15);--x-color-fill-secondary:rgba(0, 0, 0, 0.06);--x-color-fill-tertiary:rgba(0, 0, 0, 0.04);--x-color-fill-quaternary:rgba(0, 0, 0, 0.02);--x-color-border:#d9d9d9;--x-color-border-secondary:#f0f0f0;--x-color-border-bg:#ffffff;--x-color-split:rgba(5, 5, 5, 0.06);--x-color-dark:#222428;--x-color-dark-rgb:34, 36, 40;--x-color-dark-contrast:#ffffff;--x-color-dark-contrast-rgb:255, 255, 255;--x-color-dark-shade:#1e2023;--x-color-dark-tint:#383a3e;--x-color-medium:#92949c;--x-color-medium-rgb:146, 148, 156;--x-color-medium-contrast:#ffffff;--x-color-medium-contrast-rgb:255, 255, 255;--x-color-medium-shade:#808289;--x-color-medium-tint:#9d9fa6;--x-color-light:#f4f5f8;--x-color-light-rgb:244, 245, 248;--x-color-light-contrast:#000000;--x-color-light-contrast-rgb:0, 0, 0;--x-color-light-shade:#d7d8da;--x-color-light-tint:#f5f6f9;--x-font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--x-font-family-code:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;--x-font-size:14px;--x-font-size-sm:12px;--x-font-size-lg:16px;--x-font-size-xl:20px;--x-font-size-heading-1:38px;--x-font-size-heading-2:30px;--x-font-size-heading-3:24px;--x-font-size-heading-4:20px;--x-font-size-heading-5:16px;--x-line-height:1.5714285714285714;--x-line-height-lg:1.5;--x-line-height-sm:1.6666666666666667;--x-line-height-heading-1:1.2105263157894737;--x-line-height-heading-2:1.2666666666666666;--x-line-height-heading-3:1.3333333333333333;--x-line-height-heading-4:1.4;--x-line-height-heading-5:1.5;--x-font-weight-normal:400;--x-font-weight-medium:500;--x-font-weight-semibold:600;--x-font-weight-strong:600;--x-font-size-base:14px;--x-font-size-xxl:24px;--x-line-height-base:1.5714285714285714;--x-spacing-xxs:4px;--x-spacing-xs:8px;--x-spacing-sm:12px;--x-spacing-md:16px;--x-spacing-lg:20px;--x-spacing-xl:24px;--x-spacing-xxl:32px;--x-spacing-xxxl:48px;--x-margin-xxs:4px;--x-margin-xs:8px;--x-margin-sm:12px;--x-margin-md:16px;--x-margin-lg:24px;--x-margin-xl:32px;--x-margin-xxl:48px;--x-padding-xxs:4px;--x-padding-xs:8px;--x-padding-sm:12px;--x-padding-md:16px;--x-padding-lg:24px;--x-padding-content-horizontal-lg:24px;--x-padding-content-vertical-lg:12px;--x-padding-content-horizontal:16px;--x-padding-content-vertical:12px;--x-padding-content-horizontal-sm:16px;--x-padding-content-vertical-sm:8px;--x-border-radius:6px;--x-border-radius-xs:2px;--x-border-radius-sm:4px;--x-border-radius-lg:8px;--x-border-radius-xl:12px;--x-border-radius-outer:4px;--x-border-radius-base:6px;--x-border-width:1px;--x-border-width-base:1px;--x-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-shadow-lg:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-box-shadow-popover-arrow:2px 2px 5px rgba(0, 0, 0, 0.05);--x-box-shadow-card:0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);--x-box-shadow-drawer-right:-6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-left:6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-up:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-down:0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tabs-overflow-left:inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-right:inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-top:inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-bottom:inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);--x-motion-duration-fast:0.1s;--x-motion-duration-mid:0.2s;--x-motion-duration-slow:0.3s;--x-motion-ease-in-out:cubic-bezier(0.645, 0.045, 0.355, 1);--x-motion-ease-out:cubic-bezier(0.215, 0.61, 0.355, 1);--x-motion-ease-in:cubic-bezier(0.55, 0.055, 0.675, 0.19);--x-motion-ease-out-back:cubic-bezier(0.12, 0.4, 0.29, 1.46);--x-motion-ease-in-back:cubic-bezier(0.71, -0.46, 0.88, 0.6);--x-motion-ease-in-out-circle:cubic-bezier(0.78, 0.14, 0.15, 0.86);--x-motion-ease-out-circle:cubic-bezier(0.08, 0.82, 0.17, 1);--x-motion-ease-in-circle:cubic-bezier(0.6, 0.04, 0.98, 0.34);--x-motion-ease-in-quint:cubic-bezier(0.755, 0.05, 0.855, 0.06);--x-motion-ease-out-quint:cubic-bezier(0.23, 1, 0.32, 1);--x-z-index-base:0;--x-z-index-popup-base:1000;--x-z-index-popup:1030;--x-z-index-affix:10;--x-z-index-modal:1000;--x-z-index-modal-mask:1000;--x-z-index-drawer:1000;--x-z-index-popover:1030;--x-z-index-dropdown:1050;--x-z-index-tooltip:1070;--x-z-index-notification:1080;--x-z-index-message:1090;--x-z-index-popconfirm:1060;--x-z-index-table-fixed:10;--x-opacity-loading:0.65;--x-opacity-image:1;--x-opacity-disabled:0.5;--x-control-height:32px;--x-control-height-xs:24px;--x-control-height-sm:24px;--x-control-height-lg:40px;--x-control-radio-size:16px;--x-control-checkbox-size:16px;--x-control-padding-horizontal:12px;--x-control-padding-horizontal-sm:8px;--x-control-outline-width:2px;--x-control-outline:rgba(5, 145, 255, 0.1);--x-control-item-bg-hover:rgba(0, 0, 0, 0.04);--x-control-item-bg-active:#e6f4ff;--x-control-item-bg-active-hover:#bae0ff;--x-control-item-bg-active-disabled:rgba(0, 0, 0, 0.15);--x-control-tmp-outline:rgba(0, 0, 0, 0.02);--x-color-yellow:#fadb14;--x-color-yellow-rgb:250, 219, 20;--x-font-family-base:var(--x-font-family);--x-color-link:#1677ff;--x-color-link-hover:#69b1ff;--x-color-link-active:#0958d9;--x-color-icon:rgba(0, 0, 0, 0.45);--x-color-icon-hover:rgba(0, 0, 0, 0.88);--x-color-highlight:#ff4d4f;--x-color-bg-text-hover:rgba(0, 0, 0, 0.06);--x-color-bg-text-active:rgba(0, 0, 0, 0.15);--x-screen-xs:480px;--x-screen-xs-min:480px;--x-screen-xs-max:575px;--x-screen-sm:576px;--x-screen-sm-min:576px;--x-screen-sm-max:767px;--x-screen-md:768px;--x-screen-md-min:768px;--x-screen-md-max:991px;--x-screen-lg:992px;--x-screen-lg-min:992px;--x-screen-lg-max:1199px;--x-screen-xl:1200px;--x-screen-xl-min:1200px;--x-screen-xl-max:1599px;--x-screen-xxl:1600px;--x-screen-xxl-min:1600px;--x-color-fill-content:rgba(0, 0, 0, 0.06);--x-color-fill-content-hover:rgba(0, 0, 0, 0.15);--x-color-fill-alter:rgba(0, 0, 0, 0.02);--x-scrollbar-width:12px;--x-scrollbar-track-bg:rgba(0, 0, 0, 0.04);--x-scrollbar-thumb-bg:rgba(0, 0, 0, 0.25);--x-scrollbar-thumb-bg-hover:rgba(0, 0, 0, 0.35);--x-menu-dark-bg:#001529;--x-menu-dark-item-bg:#001529;--x-menu-dark-popup-bg:#001529;--x-menu-dark-submenu-item-bg:#000c17}:host{display:-ms-flexbox;display:flex;-ms-flex:auto;flex:auto;-ms-flex-direction:column;flex-direction:column;min-height:0;color:var(--x-content-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-family:var(--x-content-font-family, var(--x-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif));background-color:var(--x-content-bg, var(--x-color-bg-container, #ffffff));position:relative}.x-layout-content{-ms-flex:1;flex:1;min-height:0;color:var(--x-content-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));background-color:var(--x-content-bg, var(--x-color-bg-container, #ffffff));width:100%;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;-webkit-overflow-scrolling:touch}:host(.x-content-scroll-y) .x-layout-content{overflow-y:auto;overscroll-behavior-y:contain}:host(.x-content-scroll-x) .x-layout-content{overflow-x:auto;overscroll-behavior-x:contain}`;
-
-const XContent = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.xScrollStart = createEvent(this, "xScrollStart", 7);
-        this.xScroll = createEvent(this, "xScroll", 3);
-        this.xScrollEnd = createEvent(this, "xScrollEnd", 7);
-    }
-    get el() { return getElement(this); }
-    scrollEl;
-    isScrolling = false;
-    scrollTimer;
-    /**
-     * Whether to allow horizontal scrolling.
-     */
-    scrollX = false;
-    /**
-     * Whether to allow vertical scrolling.
-     */
-    scrollY = true;
-    /**
-     * Whether to emit scroll events.
-     */
-    scrollEvents = false;
-    /**
-     * Emitted when start scrolling.
-     */
-    xScrollStart;
-    /**
-     * Emitted while scrolling.
-     */
-    xScroll;
-    /**
-     * Emitted when end scrolling.
-     */
-    xScrollEnd;
-    /**
-     * Get the inner scrollable element.
-     */
-    async getScrollElement() {
-        if (!this.scrollEl) {
-            return Promise.reject(new Error('scroll element is not defined'));
-        }
-        return Promise.resolve(this.scrollEl);
-    }
-    /**
-     * Scroll to the top of the component.
-     * @param duration The amount of time to take scrolling to the top. Defaults to `0`.
-     */
-    async scrollToTop(duration = 0) {
-        return this.scrollToPoint(undefined, 0, duration);
-    }
-    /**
-     * Scroll to the bottom of the component.
-     * @param duration The amount of time to take scrolling to the bottom. Defaults to `0`.
-     */
-    async scrollToBottom(duration = 0) {
-        const scrollEl = await this.getScrollElement();
-        const y = scrollEl.scrollHeight - scrollEl.clientHeight;
-        return this.scrollToPoint(undefined, y, duration);
-    }
-    /**
-     * Scroll to a specified X/Y location in the component.
-     * @param x The point to scroll to on the horizontal axis.
-     * @param y The point to scroll to on the vertical axis.
-     * @param duration The amount of time to take scrolling to that point. Defaults to `0`.
-     */
-    async scrollToPoint(x, y, duration = 0) {
-        const el = await this.getScrollElement();
-        if (duration < 32) {
-            if (y != null)
-                el.scrollTop = y;
-            if (x != null)
-                el.scrollLeft = x;
-            return;
-        }
-        let resolve;
-        const promise = new Promise((r) => (resolve = r));
-        const fromY = el.scrollTop;
-        const fromX = el.scrollLeft;
-        const deltaY = y != null ? y - fromY : 0;
-        const deltaX = x != null ? x - fromX : 0;
-        const startTime = Date.now();
-        const step = () => {
-            const timeElapsed = Date.now() - startTime;
-            const progress = Math.min(1, timeElapsed / duration);
-            const easeProgress = 0.5 * (1 - Math.cos(Math.PI * progress));
-            if (y != null)
-                el.scrollTop = fromY + easeProgress * deltaY;
-            if (x != null)
-                el.scrollLeft = fromX + easeProgress * deltaX;
-            if (progress < 1) {
-                requestAnimationFrame(step);
-            }
-            else {
-                resolve();
-            }
-        };
-        requestAnimationFrame(step);
-        return promise;
-    }
-    getScrollDetail(ev) {
-        const target = ev.target;
-        return {
-            scrollTop: target.scrollTop,
-            scrollLeft: target.scrollLeft,
-            type: 'scroll',
-            event: ev,
-        };
-    }
-    onScroll = (ev) => {
-        // Only process if it is from the intended target
-        if (ev.target !== this.scrollEl) {
-            return;
-        }
-        const shouldStart = !this.isScrolling;
-        if (shouldStart) {
-            this.isScrolling = true;
-            if (this.scrollEvents) {
-                this.xScrollStart.emit(this.getScrollDetail(ev));
-            }
-        }
-        if (this.scrollEvents) {
-            this.xScroll.emit(this.getScrollDetail(ev));
-        }
-        clearTimeout(this.scrollTimer);
-        this.scrollTimer = setTimeout(() => {
-            this.isScrolling = false;
-            if (this.scrollEvents) {
-                this.xScrollEnd.emit(this.getScrollDetail(ev));
-            }
-        }, 100);
-    };
-    /**
-     * Render layout content wrapper with default slot.
-     * @returns JSX.Element
-     * @example
-     * <x-content>
-     *   <div>Main area</div>
-     * </x-content>
-     */
-    render() {
-        return (h(Host, { key: '7dbe9bdd36626dfbdfdde60db2b8ffef2cc76bb7', class: {
-                'x-content-scroll-y': this.scrollY,
-                'x-content-scroll-x': this.scrollX,
-            } }, h("main", { key: '8954532d48b86b2be59245bcbd6a397f1c86ebc9', class: "x-layout-content inner-scroll", ref: el => this.scrollEl = el, onScroll: this.scrollEvents ? this.onScroll : undefined }, h("slot", { key: 'd1fa112e698b10f7acfe4846a7546a7d38ba3d56' }))));
-    }
-};
-XContent.style = xContentCss();
-
-const xFlexCss = () => `@charset "UTF-8";:root{--x-color-primary:#1677ff;--x-color-primary-rgb:22, 119, 255;--x-color-primary-contrast:#ffffff;--x-color-primary-contrast-rgb:255, 255, 255;--x-color-primary-shade:#0958d9;--x-color-primary-tint:#4096ff;--x-color-primary-bg:#e6f4ff;--x-color-primary-bg-hover:#bae0ff;--x-color-primary-border:#91caff;--x-color-primary-border-hover:#69b1ff;--x-color-primary-hover:#4096ff;--x-color-primary-active:#0958d9;--x-color-primary-text:#1677ff;--x-color-primary-text-hover:#4096ff;--x-color-primary-text-active:#0958d9;--x-color-secondary:#3dc2ff;--x-color-secondary-rgb:61, 194, 255;--x-color-secondary-contrast:#ffffff;--x-color-secondary-contrast-rgb:255, 255, 255;--x-color-secondary-shade:#36abe0;--x-color-secondary-tint:#50c8ff;--x-color-success:#52c41a;--x-color-success-rgb:82, 196, 26;--x-color-success-contrast:#ffffff;--x-color-success-contrast-rgb:255, 255, 255;--x-color-success-shade:#389e0d;--x-color-success-tint:#73d13d;--x-color-success-bg:#f6ffed;--x-color-success-bg-hover:#d9f7be;--x-color-success-border:#b7eb8f;--x-color-success-border-hover:#95de64;--x-color-success-hover:#73d13d;--x-color-success-active:#389e0d;--x-color-success-text:#52c41a;--x-color-success-text-hover:#73d13d;--x-color-success-text-active:#389e0d;--x-color-warning:#faad14;--x-color-warning-rgb:250, 173, 20;--x-color-warning-contrast:#000000;--x-color-warning-contrast-rgb:0, 0, 0;--x-color-warning-shade:#d48806;--x-color-warning-tint:#ffc53d;--x-color-warning-bg:#fffbe6;--x-color-warning-bg-hover:#fff1b8;--x-color-warning-border:#ffe58f;--x-color-warning-border-hover:#ffd666;--x-color-warning-hover:#ffc53d;--x-color-warning-active:#d48806;--x-color-warning-text:#faad14;--x-color-warning-text-hover:#ffc53d;--x-color-warning-text-active:#d48806;--x-color-danger:#ff4d4f;--x-color-danger-rgb:255, 77, 79;--x-color-danger-contrast:#ffffff;--x-color-danger-contrast-rgb:255, 255, 255;--x-color-danger-shade:#cf1322;--x-color-danger-tint:#ff7875;--x-color-error:#ff4d4f;--x-color-error-rgb:255, 77, 79;--x-color-error-bg:#fff2f0;--x-color-error-bg-hover:#ffccc7;--x-color-error-border:#ffa39e;--x-color-error-border-hover:#ff7875;--x-color-error-hover:#ff7875;--x-color-error-active:#d9363e;--x-color-error-text:#ff4d4f;--x-color-error-text-hover:#ff7875;--x-color-error-text-active:#d9363e;--x-color-info:#1677ff;--x-color-info-rgb:22, 119, 255;--x-color-info-bg:#e6f4ff;--x-color-info-bg-hover:#bae0ff;--x-color-info-border:#91caff;--x-color-info-border-hover:#69b1ff;--x-color-info-hover:#69b1ff;--x-color-info-active:#0958d9;--x-color-info-text:#1677ff;--x-color-info-text-hover:#69b1ff;--x-color-info-text-active:#0958d9;--x-color-text:rgba(0, 0, 0, 0.88);--x-color-text-secondary:rgba(0, 0, 0, 0.65);--x-color-text-tertiary:rgba(0, 0, 0, 0.45);--x-color-text-quaternary:rgba(0, 0, 0, 0.25);--x-color-text-disabled:rgba(0, 0, 0, 0.25);--x-color-text-placeholder:rgba(0, 0, 0, 0.25);--x-color-text-heading:rgba(0, 0, 0, 0.88);--x-color-text-label:rgba(0, 0, 0, 0.65);--x-color-text-description:rgba(0, 0, 0, 0.45);--x-color-text-light-solid:#ffffff;--x-color-bg-container:#ffffff;--x-color-bg-elevated:#ffffff;--x-color-bg-layout:#f5f5f5;--x-color-bg-spotlight:rgba(0, 0, 0, 0.85);--x-color-bg-mask:rgba(0, 0, 0, 0.45);--x-color-bg-base:#ffffff;--x-color-bg-container-disabled:#f5f5f5;--x-color-bg-container-loading:rgba(255, 255, 255, 0.65);--x-color-white:#ffffff;--x-color-fill:rgba(0, 0, 0, 0.15);--x-color-fill-secondary:rgba(0, 0, 0, 0.06);--x-color-fill-tertiary:rgba(0, 0, 0, 0.04);--x-color-fill-quaternary:rgba(0, 0, 0, 0.02);--x-color-border:#d9d9d9;--x-color-border-secondary:#f0f0f0;--x-color-border-bg:#ffffff;--x-color-split:rgba(5, 5, 5, 0.06);--x-color-dark:#222428;--x-color-dark-rgb:34, 36, 40;--x-color-dark-contrast:#ffffff;--x-color-dark-contrast-rgb:255, 255, 255;--x-color-dark-shade:#1e2023;--x-color-dark-tint:#383a3e;--x-color-medium:#92949c;--x-color-medium-rgb:146, 148, 156;--x-color-medium-contrast:#ffffff;--x-color-medium-contrast-rgb:255, 255, 255;--x-color-medium-shade:#808289;--x-color-medium-tint:#9d9fa6;--x-color-light:#f4f5f8;--x-color-light-rgb:244, 245, 248;--x-color-light-contrast:#000000;--x-color-light-contrast-rgb:0, 0, 0;--x-color-light-shade:#d7d8da;--x-color-light-tint:#f5f6f9;--x-font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--x-font-family-code:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;--x-font-size:14px;--x-font-size-sm:12px;--x-font-size-lg:16px;--x-font-size-xl:20px;--x-font-size-heading-1:38px;--x-font-size-heading-2:30px;--x-font-size-heading-3:24px;--x-font-size-heading-4:20px;--x-font-size-heading-5:16px;--x-line-height:1.5714285714285714;--x-line-height-lg:1.5;--x-line-height-sm:1.6666666666666667;--x-line-height-heading-1:1.2105263157894737;--x-line-height-heading-2:1.2666666666666666;--x-line-height-heading-3:1.3333333333333333;--x-line-height-heading-4:1.4;--x-line-height-heading-5:1.5;--x-font-weight-normal:400;--x-font-weight-medium:500;--x-font-weight-semibold:600;--x-font-weight-strong:600;--x-font-size-base:14px;--x-font-size-xxl:24px;--x-line-height-base:1.5714285714285714;--x-spacing-xxs:4px;--x-spacing-xs:8px;--x-spacing-sm:12px;--x-spacing-md:16px;--x-spacing-lg:20px;--x-spacing-xl:24px;--x-spacing-xxl:32px;--x-spacing-xxxl:48px;--x-margin-xxs:4px;--x-margin-xs:8px;--x-margin-sm:12px;--x-margin-md:16px;--x-margin-lg:24px;--x-margin-xl:32px;--x-margin-xxl:48px;--x-padding-xxs:4px;--x-padding-xs:8px;--x-padding-sm:12px;--x-padding-md:16px;--x-padding-lg:24px;--x-padding-content-horizontal-lg:24px;--x-padding-content-vertical-lg:12px;--x-padding-content-horizontal:16px;--x-padding-content-vertical:12px;--x-padding-content-horizontal-sm:16px;--x-padding-content-vertical-sm:8px;--x-border-radius:6px;--x-border-radius-xs:2px;--x-border-radius-sm:4px;--x-border-radius-lg:8px;--x-border-radius-xl:12px;--x-border-radius-outer:4px;--x-border-radius-base:6px;--x-border-width:1px;--x-border-width-base:1px;--x-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-shadow-lg:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-box-shadow-popover-arrow:2px 2px 5px rgba(0, 0, 0, 0.05);--x-box-shadow-card:0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);--x-box-shadow-drawer-right:-6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-left:6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-up:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-down:0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tabs-overflow-left:inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-right:inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-top:inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-bottom:inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);--x-motion-duration-fast:0.1s;--x-motion-duration-mid:0.2s;--x-motion-duration-slow:0.3s;--x-motion-ease-in-out:cubic-bezier(0.645, 0.045, 0.355, 1);--x-motion-ease-out:cubic-bezier(0.215, 0.61, 0.355, 1);--x-motion-ease-in:cubic-bezier(0.55, 0.055, 0.675, 0.19);--x-motion-ease-out-back:cubic-bezier(0.12, 0.4, 0.29, 1.46);--x-motion-ease-in-back:cubic-bezier(0.71, -0.46, 0.88, 0.6);--x-motion-ease-in-out-circle:cubic-bezier(0.78, 0.14, 0.15, 0.86);--x-motion-ease-out-circle:cubic-bezier(0.08, 0.82, 0.17, 1);--x-motion-ease-in-circle:cubic-bezier(0.6, 0.04, 0.98, 0.34);--x-motion-ease-in-quint:cubic-bezier(0.755, 0.05, 0.855, 0.06);--x-motion-ease-out-quint:cubic-bezier(0.23, 1, 0.32, 1);--x-z-index-base:0;--x-z-index-popup-base:1000;--x-z-index-popup:1030;--x-z-index-affix:10;--x-z-index-modal:1000;--x-z-index-modal-mask:1000;--x-z-index-drawer:1000;--x-z-index-popover:1030;--x-z-index-dropdown:1050;--x-z-index-tooltip:1070;--x-z-index-notification:1080;--x-z-index-message:1090;--x-z-index-popconfirm:1060;--x-z-index-table-fixed:10;--x-opacity-loading:0.65;--x-opacity-image:1;--x-opacity-disabled:0.5;--x-control-height:32px;--x-control-height-xs:24px;--x-control-height-sm:24px;--x-control-height-lg:40px;--x-control-radio-size:16px;--x-control-checkbox-size:16px;--x-control-padding-horizontal:12px;--x-control-padding-horizontal-sm:8px;--x-control-outline-width:2px;--x-control-outline:rgba(5, 145, 255, 0.1);--x-control-item-bg-hover:rgba(0, 0, 0, 0.04);--x-control-item-bg-active:#e6f4ff;--x-control-item-bg-active-hover:#bae0ff;--x-control-item-bg-active-disabled:rgba(0, 0, 0, 0.15);--x-control-tmp-outline:rgba(0, 0, 0, 0.02);--x-color-yellow:#fadb14;--x-color-yellow-rgb:250, 219, 20;--x-font-family-base:var(--x-font-family);--x-color-link:#1677ff;--x-color-link-hover:#69b1ff;--x-color-link-active:#0958d9;--x-color-icon:rgba(0, 0, 0, 0.45);--x-color-icon-hover:rgba(0, 0, 0, 0.88);--x-color-highlight:#ff4d4f;--x-color-bg-text-hover:rgba(0, 0, 0, 0.06);--x-color-bg-text-active:rgba(0, 0, 0, 0.15);--x-screen-xs:480px;--x-screen-xs-min:480px;--x-screen-xs-max:575px;--x-screen-sm:576px;--x-screen-sm-min:576px;--x-screen-sm-max:767px;--x-screen-md:768px;--x-screen-md-min:768px;--x-screen-md-max:991px;--x-screen-lg:992px;--x-screen-lg-min:992px;--x-screen-lg-max:1199px;--x-screen-xl:1200px;--x-screen-xl-min:1200px;--x-screen-xl-max:1599px;--x-screen-xxl:1600px;--x-screen-xxl-min:1600px;--x-color-fill-content:rgba(0, 0, 0, 0.06);--x-color-fill-content-hover:rgba(0, 0, 0, 0.15);--x-color-fill-alter:rgba(0, 0, 0, 0.02);--x-scrollbar-width:12px;--x-scrollbar-track-bg:rgba(0, 0, 0, 0.04);--x-scrollbar-thumb-bg:rgba(0, 0, 0, 0.25);--x-scrollbar-thumb-bg-hover:rgba(0, 0, 0, 0.35);--x-menu-dark-bg:#001529;--x-menu-dark-item-bg:#001529;--x-menu-dark-popup-bg:#001529;--x-menu-dark-submenu-item-bg:#000c17}:host{display:block}.x-flex{display:var(--x-flex-display, flex);-ms-flex-direction:var(--x-flex-direction, row);flex-direction:var(--x-flex-direction, row);-ms-flex-wrap:var(--x-flex-wrap, nowrap);flex-wrap:var(--x-flex-wrap, nowrap);-ms-flex-pack:var(--x-flex-justify, normal);justify-content:var(--x-flex-justify, normal);-ms-flex-align:var(--x-flex-align, normal);align-items:var(--x-flex-align, normal);gap:var(--x-flex-gap, 0);-ms-flex:var(--x-flex-flex, initial);flex:var(--x-flex-flex, initial);width:100%;height:100%}`;
-
-const XFlex = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    /**
-     * Sets the align-items css property.
-     * @example
-     * <x-flex align="center"></x-flex>
-     */
-    align;
-    /**
-     * Sets the justify-content css property.
-     * @example
-     * <x-flex justify="space-between"></x-flex>
-     */
-    justify;
-    /**
-     * Sets the flex-direction to column.
-     * @example
-     * <x-flex vertical></x-flex>
-     */
-    vertical = false;
-    /**
-     * Sets the flex-wrap css property.
-     * @example
-     * <x-flex wrap="wrap"></x-flex>
-     */
-    wrap = 'nowrap';
-    /**
-     * Sets the flex css property.
-     * @example
-     * <x-flex flex="1 1 auto"></x-flex>
-     */
-    flex;
-    /**
-     * Sets the gap css property.
-     * @example
-     * <x-flex gap={16}></x-flex>
-     */
-    gap = 8;
-    /**
-     * Custom element type.
-     * @example
-     * <x-flex component="section"></x-flex>
-     */
-    component = 'div';
-    /**
-     * Render a flex container with computed CSS variables.
-     *
-     * Flow:
-     * 1. Destructures layout props (align, justify, wrap, gap, etc.).
-     * 2. Maps props to CSS custom properties (e.g., `--x-flex-align`).
-     * 3. Handles value normalization (e.g., converting numeric gap to px).
-     * 4. Renders the configured `component` tag (div, section, etc.).
-     * 5. Projects slot content.
-     *
-     * @returns JSX.Element
-     * @example
-     * <x-flex align="center" gap={12}><span>A</span><span>B</span></x-flex>
-     */
-    render() {
-        const { align, justify, vertical, wrap, flex, gap, component } = this;
-        // Build CSS variables based on props.
-        const style = {};
-        // Align and justify map to CSS custom properties.
-        if (align)
-            style['--x-flex-align'] = align;
-        if (justify)
-            style['--x-flex-justify'] = justify;
-        if (vertical)
-            style['--x-flex-direction'] = 'column';
-        // Normalize wrap variations: boolean or string.
-        if (wrap === true)
-            style['--x-flex-wrap'] = 'wrap';
-        else if (wrap === false)
-            style['--x-flex-wrap'] = 'nowrap';
-        else if (wrap)
-            style['--x-flex-wrap'] = wrap;
-        // Apply flex shorthand value when provided.
-        if (flex)
-            style['--x-flex-flex'] = flex;
-        // Convert numeric gap (or numeric string) to px, otherwise keep raw.
-        if (gap !== undefined) {
-            style['--x-flex-gap'] = typeof gap === 'number' || ((typeof gap === 'string' && /^[0-9]+$/.test(gap)))
-                ? `${gap}px`
-                : gap;
-        }
-        // Render with configurable tag name.
-        const Tag = component;
-        return (h(Host, { key: 'b51bfd9b202bf108f0df07a7d5a75b1dd073882b' }, h(Tag, { key: '3913f415824f8b22c2c7528438a75bb07c392fa8', class: "x-flex", style: style }, h("slot", { key: '93823b9e3240bade5e929c86253974247e5e35be' }))));
-    }
-};
-XFlex.style = xFlexCss();
-
-const xFooterCss = () => `@charset "UTF-8";:root{--x-color-primary:#1677ff;--x-color-primary-rgb:22, 119, 255;--x-color-primary-contrast:#ffffff;--x-color-primary-contrast-rgb:255, 255, 255;--x-color-primary-shade:#0958d9;--x-color-primary-tint:#4096ff;--x-color-primary-bg:#e6f4ff;--x-color-primary-bg-hover:#bae0ff;--x-color-primary-border:#91caff;--x-color-primary-border-hover:#69b1ff;--x-color-primary-hover:#4096ff;--x-color-primary-active:#0958d9;--x-color-primary-text:#1677ff;--x-color-primary-text-hover:#4096ff;--x-color-primary-text-active:#0958d9;--x-color-secondary:#3dc2ff;--x-color-secondary-rgb:61, 194, 255;--x-color-secondary-contrast:#ffffff;--x-color-secondary-contrast-rgb:255, 255, 255;--x-color-secondary-shade:#36abe0;--x-color-secondary-tint:#50c8ff;--x-color-success:#52c41a;--x-color-success-rgb:82, 196, 26;--x-color-success-contrast:#ffffff;--x-color-success-contrast-rgb:255, 255, 255;--x-color-success-shade:#389e0d;--x-color-success-tint:#73d13d;--x-color-success-bg:#f6ffed;--x-color-success-bg-hover:#d9f7be;--x-color-success-border:#b7eb8f;--x-color-success-border-hover:#95de64;--x-color-success-hover:#73d13d;--x-color-success-active:#389e0d;--x-color-success-text:#52c41a;--x-color-success-text-hover:#73d13d;--x-color-success-text-active:#389e0d;--x-color-warning:#faad14;--x-color-warning-rgb:250, 173, 20;--x-color-warning-contrast:#000000;--x-color-warning-contrast-rgb:0, 0, 0;--x-color-warning-shade:#d48806;--x-color-warning-tint:#ffc53d;--x-color-warning-bg:#fffbe6;--x-color-warning-bg-hover:#fff1b8;--x-color-warning-border:#ffe58f;--x-color-warning-border-hover:#ffd666;--x-color-warning-hover:#ffc53d;--x-color-warning-active:#d48806;--x-color-warning-text:#faad14;--x-color-warning-text-hover:#ffc53d;--x-color-warning-text-active:#d48806;--x-color-danger:#ff4d4f;--x-color-danger-rgb:255, 77, 79;--x-color-danger-contrast:#ffffff;--x-color-danger-contrast-rgb:255, 255, 255;--x-color-danger-shade:#cf1322;--x-color-danger-tint:#ff7875;--x-color-error:#ff4d4f;--x-color-error-rgb:255, 77, 79;--x-color-error-bg:#fff2f0;--x-color-error-bg-hover:#ffccc7;--x-color-error-border:#ffa39e;--x-color-error-border-hover:#ff7875;--x-color-error-hover:#ff7875;--x-color-error-active:#d9363e;--x-color-error-text:#ff4d4f;--x-color-error-text-hover:#ff7875;--x-color-error-text-active:#d9363e;--x-color-info:#1677ff;--x-color-info-rgb:22, 119, 255;--x-color-info-bg:#e6f4ff;--x-color-info-bg-hover:#bae0ff;--x-color-info-border:#91caff;--x-color-info-border-hover:#69b1ff;--x-color-info-hover:#69b1ff;--x-color-info-active:#0958d9;--x-color-info-text:#1677ff;--x-color-info-text-hover:#69b1ff;--x-color-info-text-active:#0958d9;--x-color-text:rgba(0, 0, 0, 0.88);--x-color-text-secondary:rgba(0, 0, 0, 0.65);--x-color-text-tertiary:rgba(0, 0, 0, 0.45);--x-color-text-quaternary:rgba(0, 0, 0, 0.25);--x-color-text-disabled:rgba(0, 0, 0, 0.25);--x-color-text-placeholder:rgba(0, 0, 0, 0.25);--x-color-text-heading:rgba(0, 0, 0, 0.88);--x-color-text-label:rgba(0, 0, 0, 0.65);--x-color-text-description:rgba(0, 0, 0, 0.45);--x-color-text-light-solid:#ffffff;--x-color-bg-container:#ffffff;--x-color-bg-elevated:#ffffff;--x-color-bg-layout:#f5f5f5;--x-color-bg-spotlight:rgba(0, 0, 0, 0.85);--x-color-bg-mask:rgba(0, 0, 0, 0.45);--x-color-bg-base:#ffffff;--x-color-bg-container-disabled:#f5f5f5;--x-color-bg-container-loading:rgba(255, 255, 255, 0.65);--x-color-white:#ffffff;--x-color-fill:rgba(0, 0, 0, 0.15);--x-color-fill-secondary:rgba(0, 0, 0, 0.06);--x-color-fill-tertiary:rgba(0, 0, 0, 0.04);--x-color-fill-quaternary:rgba(0, 0, 0, 0.02);--x-color-border:#d9d9d9;--x-color-border-secondary:#f0f0f0;--x-color-border-bg:#ffffff;--x-color-split:rgba(5, 5, 5, 0.06);--x-color-dark:#222428;--x-color-dark-rgb:34, 36, 40;--x-color-dark-contrast:#ffffff;--x-color-dark-contrast-rgb:255, 255, 255;--x-color-dark-shade:#1e2023;--x-color-dark-tint:#383a3e;--x-color-medium:#92949c;--x-color-medium-rgb:146, 148, 156;--x-color-medium-contrast:#ffffff;--x-color-medium-contrast-rgb:255, 255, 255;--x-color-medium-shade:#808289;--x-color-medium-tint:#9d9fa6;--x-color-light:#f4f5f8;--x-color-light-rgb:244, 245, 248;--x-color-light-contrast:#000000;--x-color-light-contrast-rgb:0, 0, 0;--x-color-light-shade:#d7d8da;--x-color-light-tint:#f5f6f9;--x-font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--x-font-family-code:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;--x-font-size:14px;--x-font-size-sm:12px;--x-font-size-lg:16px;--x-font-size-xl:20px;--x-font-size-heading-1:38px;--x-font-size-heading-2:30px;--x-font-size-heading-3:24px;--x-font-size-heading-4:20px;--x-font-size-heading-5:16px;--x-line-height:1.5714285714285714;--x-line-height-lg:1.5;--x-line-height-sm:1.6666666666666667;--x-line-height-heading-1:1.2105263157894737;--x-line-height-heading-2:1.2666666666666666;--x-line-height-heading-3:1.3333333333333333;--x-line-height-heading-4:1.4;--x-line-height-heading-5:1.5;--x-font-weight-normal:400;--x-font-weight-medium:500;--x-font-weight-semibold:600;--x-font-weight-strong:600;--x-font-size-base:14px;--x-font-size-xxl:24px;--x-line-height-base:1.5714285714285714;--x-spacing-xxs:4px;--x-spacing-xs:8px;--x-spacing-sm:12px;--x-spacing-md:16px;--x-spacing-lg:20px;--x-spacing-xl:24px;--x-spacing-xxl:32px;--x-spacing-xxxl:48px;--x-margin-xxs:4px;--x-margin-xs:8px;--x-margin-sm:12px;--x-margin-md:16px;--x-margin-lg:24px;--x-margin-xl:32px;--x-margin-xxl:48px;--x-padding-xxs:4px;--x-padding-xs:8px;--x-padding-sm:12px;--x-padding-md:16px;--x-padding-lg:24px;--x-padding-content-horizontal-lg:24px;--x-padding-content-vertical-lg:12px;--x-padding-content-horizontal:16px;--x-padding-content-vertical:12px;--x-padding-content-horizontal-sm:16px;--x-padding-content-vertical-sm:8px;--x-border-radius:6px;--x-border-radius-xs:2px;--x-border-radius-sm:4px;--x-border-radius-lg:8px;--x-border-radius-xl:12px;--x-border-radius-outer:4px;--x-border-radius-base:6px;--x-border-width:1px;--x-border-width-base:1px;--x-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-shadow-lg:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-box-shadow-popover-arrow:2px 2px 5px rgba(0, 0, 0, 0.05);--x-box-shadow-card:0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);--x-box-shadow-drawer-right:-6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-left:6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-up:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-down:0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tabs-overflow-left:inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-right:inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-top:inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-bottom:inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);--x-motion-duration-fast:0.1s;--x-motion-duration-mid:0.2s;--x-motion-duration-slow:0.3s;--x-motion-ease-in-out:cubic-bezier(0.645, 0.045, 0.355, 1);--x-motion-ease-out:cubic-bezier(0.215, 0.61, 0.355, 1);--x-motion-ease-in:cubic-bezier(0.55, 0.055, 0.675, 0.19);--x-motion-ease-out-back:cubic-bezier(0.12, 0.4, 0.29, 1.46);--x-motion-ease-in-back:cubic-bezier(0.71, -0.46, 0.88, 0.6);--x-motion-ease-in-out-circle:cubic-bezier(0.78, 0.14, 0.15, 0.86);--x-motion-ease-out-circle:cubic-bezier(0.08, 0.82, 0.17, 1);--x-motion-ease-in-circle:cubic-bezier(0.6, 0.04, 0.98, 0.34);--x-motion-ease-in-quint:cubic-bezier(0.755, 0.05, 0.855, 0.06);--x-motion-ease-out-quint:cubic-bezier(0.23, 1, 0.32, 1);--x-z-index-base:0;--x-z-index-popup-base:1000;--x-z-index-popup:1030;--x-z-index-affix:10;--x-z-index-modal:1000;--x-z-index-modal-mask:1000;--x-z-index-drawer:1000;--x-z-index-popover:1030;--x-z-index-dropdown:1050;--x-z-index-tooltip:1070;--x-z-index-notification:1080;--x-z-index-message:1090;--x-z-index-popconfirm:1060;--x-z-index-table-fixed:10;--x-opacity-loading:0.65;--x-opacity-image:1;--x-opacity-disabled:0.5;--x-control-height:32px;--x-control-height-xs:24px;--x-control-height-sm:24px;--x-control-height-lg:40px;--x-control-radio-size:16px;--x-control-checkbox-size:16px;--x-control-padding-horizontal:12px;--x-control-padding-horizontal-sm:8px;--x-control-outline-width:2px;--x-control-outline:rgba(5, 145, 255, 0.1);--x-control-item-bg-hover:rgba(0, 0, 0, 0.04);--x-control-item-bg-active:#e6f4ff;--x-control-item-bg-active-hover:#bae0ff;--x-control-item-bg-active-disabled:rgba(0, 0, 0, 0.15);--x-control-tmp-outline:rgba(0, 0, 0, 0.02);--x-color-yellow:#fadb14;--x-color-yellow-rgb:250, 219, 20;--x-font-family-base:var(--x-font-family);--x-color-link:#1677ff;--x-color-link-hover:#69b1ff;--x-color-link-active:#0958d9;--x-color-icon:rgba(0, 0, 0, 0.45);--x-color-icon-hover:rgba(0, 0, 0, 0.88);--x-color-highlight:#ff4d4f;--x-color-bg-text-hover:rgba(0, 0, 0, 0.06);--x-color-bg-text-active:rgba(0, 0, 0, 0.15);--x-screen-xs:480px;--x-screen-xs-min:480px;--x-screen-xs-max:575px;--x-screen-sm:576px;--x-screen-sm-min:576px;--x-screen-sm-max:767px;--x-screen-md:768px;--x-screen-md-min:768px;--x-screen-md-max:991px;--x-screen-lg:992px;--x-screen-lg-min:992px;--x-screen-lg-max:1199px;--x-screen-xl:1200px;--x-screen-xl-min:1200px;--x-screen-xl-max:1599px;--x-screen-xxl:1600px;--x-screen-xxl-min:1600px;--x-color-fill-content:rgba(0, 0, 0, 0.06);--x-color-fill-content-hover:rgba(0, 0, 0, 0.15);--x-color-fill-alter:rgba(0, 0, 0, 0.02);--x-scrollbar-width:12px;--x-scrollbar-track-bg:rgba(0, 0, 0, 0.04);--x-scrollbar-thumb-bg:rgba(0, 0, 0, 0.25);--x-scrollbar-thumb-bg-hover:rgba(0, 0, 0, 0.35);--x-menu-dark-bg:#001529;--x-menu-dark-item-bg:#001529;--x-menu-dark-popup-bg:#001529;--x-menu-dark-submenu-item-bg:#000c17}:host{display:block;padding:var(--x-footer-padding-block, var(--x-spacing-xl, 24px)) var(--x-footer-padding-inline, var(--x-spacing-xxxl, 24px));color:var(--x-footer-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-size:var(--x-footer-font-size, var(--x-font-size, 14px));background:var(--x-footer-bg, var(--x-color-bg-layout, #f5f5f5));font-family:var(--x-footer-font-family, var(--x-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif));position:relative;-ms-flex-order:1;order:1;width:100%}.x-layout-footer{color:var(--x-footer-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-size:var(--x-footer-font-size, var(--x-font-size, 14px));width:100%}`;
-
-const XFooter = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    /**
-     * Render layout footer wrapper with default slot.
-     * @returns JSX.Element
-     * @example
-     * <x-footer>
-     *   <span>Footer content</span>
-     * </x-footer>
-     */
-    render() {
-        return (h(Host, { key: 'fca5067b1a4ed92c02acae453f5d9424bf633ceb' }, h("footer", { key: '8be6dbeb9ecf630fef0313c2eda67ab9a800d985', class: "x-layout-footer" }, h("slot", { key: 'c000b07be1ac3b31581061d96cfb243a653d29bf' }))));
-    }
-};
-XFooter.style = xFooterCss();
-
-const xHeaderCss = () => `@charset "UTF-8";:root{--x-color-primary:#1677ff;--x-color-primary-rgb:22, 119, 255;--x-color-primary-contrast:#ffffff;--x-color-primary-contrast-rgb:255, 255, 255;--x-color-primary-shade:#0958d9;--x-color-primary-tint:#4096ff;--x-color-primary-bg:#e6f4ff;--x-color-primary-bg-hover:#bae0ff;--x-color-primary-border:#91caff;--x-color-primary-border-hover:#69b1ff;--x-color-primary-hover:#4096ff;--x-color-primary-active:#0958d9;--x-color-primary-text:#1677ff;--x-color-primary-text-hover:#4096ff;--x-color-primary-text-active:#0958d9;--x-color-secondary:#3dc2ff;--x-color-secondary-rgb:61, 194, 255;--x-color-secondary-contrast:#ffffff;--x-color-secondary-contrast-rgb:255, 255, 255;--x-color-secondary-shade:#36abe0;--x-color-secondary-tint:#50c8ff;--x-color-success:#52c41a;--x-color-success-rgb:82, 196, 26;--x-color-success-contrast:#ffffff;--x-color-success-contrast-rgb:255, 255, 255;--x-color-success-shade:#389e0d;--x-color-success-tint:#73d13d;--x-color-success-bg:#f6ffed;--x-color-success-bg-hover:#d9f7be;--x-color-success-border:#b7eb8f;--x-color-success-border-hover:#95de64;--x-color-success-hover:#73d13d;--x-color-success-active:#389e0d;--x-color-success-text:#52c41a;--x-color-success-text-hover:#73d13d;--x-color-success-text-active:#389e0d;--x-color-warning:#faad14;--x-color-warning-rgb:250, 173, 20;--x-color-warning-contrast:#000000;--x-color-warning-contrast-rgb:0, 0, 0;--x-color-warning-shade:#d48806;--x-color-warning-tint:#ffc53d;--x-color-warning-bg:#fffbe6;--x-color-warning-bg-hover:#fff1b8;--x-color-warning-border:#ffe58f;--x-color-warning-border-hover:#ffd666;--x-color-warning-hover:#ffc53d;--x-color-warning-active:#d48806;--x-color-warning-text:#faad14;--x-color-warning-text-hover:#ffc53d;--x-color-warning-text-active:#d48806;--x-color-danger:#ff4d4f;--x-color-danger-rgb:255, 77, 79;--x-color-danger-contrast:#ffffff;--x-color-danger-contrast-rgb:255, 255, 255;--x-color-danger-shade:#cf1322;--x-color-danger-tint:#ff7875;--x-color-error:#ff4d4f;--x-color-error-rgb:255, 77, 79;--x-color-error-bg:#fff2f0;--x-color-error-bg-hover:#ffccc7;--x-color-error-border:#ffa39e;--x-color-error-border-hover:#ff7875;--x-color-error-hover:#ff7875;--x-color-error-active:#d9363e;--x-color-error-text:#ff4d4f;--x-color-error-text-hover:#ff7875;--x-color-error-text-active:#d9363e;--x-color-info:#1677ff;--x-color-info-rgb:22, 119, 255;--x-color-info-bg:#e6f4ff;--x-color-info-bg-hover:#bae0ff;--x-color-info-border:#91caff;--x-color-info-border-hover:#69b1ff;--x-color-info-hover:#69b1ff;--x-color-info-active:#0958d9;--x-color-info-text:#1677ff;--x-color-info-text-hover:#69b1ff;--x-color-info-text-active:#0958d9;--x-color-text:rgba(0, 0, 0, 0.88);--x-color-text-secondary:rgba(0, 0, 0, 0.65);--x-color-text-tertiary:rgba(0, 0, 0, 0.45);--x-color-text-quaternary:rgba(0, 0, 0, 0.25);--x-color-text-disabled:rgba(0, 0, 0, 0.25);--x-color-text-placeholder:rgba(0, 0, 0, 0.25);--x-color-text-heading:rgba(0, 0, 0, 0.88);--x-color-text-label:rgba(0, 0, 0, 0.65);--x-color-text-description:rgba(0, 0, 0, 0.45);--x-color-text-light-solid:#ffffff;--x-color-bg-container:#ffffff;--x-color-bg-elevated:#ffffff;--x-color-bg-layout:#f5f5f5;--x-color-bg-spotlight:rgba(0, 0, 0, 0.85);--x-color-bg-mask:rgba(0, 0, 0, 0.45);--x-color-bg-base:#ffffff;--x-color-bg-container-disabled:#f5f5f5;--x-color-bg-container-loading:rgba(255, 255, 255, 0.65);--x-color-white:#ffffff;--x-color-fill:rgba(0, 0, 0, 0.15);--x-color-fill-secondary:rgba(0, 0, 0, 0.06);--x-color-fill-tertiary:rgba(0, 0, 0, 0.04);--x-color-fill-quaternary:rgba(0, 0, 0, 0.02);--x-color-border:#d9d9d9;--x-color-border-secondary:#f0f0f0;--x-color-border-bg:#ffffff;--x-color-split:rgba(5, 5, 5, 0.06);--x-color-dark:#222428;--x-color-dark-rgb:34, 36, 40;--x-color-dark-contrast:#ffffff;--x-color-dark-contrast-rgb:255, 255, 255;--x-color-dark-shade:#1e2023;--x-color-dark-tint:#383a3e;--x-color-medium:#92949c;--x-color-medium-rgb:146, 148, 156;--x-color-medium-contrast:#ffffff;--x-color-medium-contrast-rgb:255, 255, 255;--x-color-medium-shade:#808289;--x-color-medium-tint:#9d9fa6;--x-color-light:#f4f5f8;--x-color-light-rgb:244, 245, 248;--x-color-light-contrast:#000000;--x-color-light-contrast-rgb:0, 0, 0;--x-color-light-shade:#d7d8da;--x-color-light-tint:#f5f6f9;--x-font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--x-font-family-code:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;--x-font-size:14px;--x-font-size-sm:12px;--x-font-size-lg:16px;--x-font-size-xl:20px;--x-font-size-heading-1:38px;--x-font-size-heading-2:30px;--x-font-size-heading-3:24px;--x-font-size-heading-4:20px;--x-font-size-heading-5:16px;--x-line-height:1.5714285714285714;--x-line-height-lg:1.5;--x-line-height-sm:1.6666666666666667;--x-line-height-heading-1:1.2105263157894737;--x-line-height-heading-2:1.2666666666666666;--x-line-height-heading-3:1.3333333333333333;--x-line-height-heading-4:1.4;--x-line-height-heading-5:1.5;--x-font-weight-normal:400;--x-font-weight-medium:500;--x-font-weight-semibold:600;--x-font-weight-strong:600;--x-font-size-base:14px;--x-font-size-xxl:24px;--x-line-height-base:1.5714285714285714;--x-spacing-xxs:4px;--x-spacing-xs:8px;--x-spacing-sm:12px;--x-spacing-md:16px;--x-spacing-lg:20px;--x-spacing-xl:24px;--x-spacing-xxl:32px;--x-spacing-xxxl:48px;--x-margin-xxs:4px;--x-margin-xs:8px;--x-margin-sm:12px;--x-margin-md:16px;--x-margin-lg:24px;--x-margin-xl:32px;--x-margin-xxl:48px;--x-padding-xxs:4px;--x-padding-xs:8px;--x-padding-sm:12px;--x-padding-md:16px;--x-padding-lg:24px;--x-padding-content-horizontal-lg:24px;--x-padding-content-vertical-lg:12px;--x-padding-content-horizontal:16px;--x-padding-content-vertical:12px;--x-padding-content-horizontal-sm:16px;--x-padding-content-vertical-sm:8px;--x-border-radius:6px;--x-border-radius-xs:2px;--x-border-radius-sm:4px;--x-border-radius-lg:8px;--x-border-radius-xl:12px;--x-border-radius-outer:4px;--x-border-radius-base:6px;--x-border-width:1px;--x-border-width-base:1px;--x-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-shadow-lg:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-box-shadow-popover-arrow:2px 2px 5px rgba(0, 0, 0, 0.05);--x-box-shadow-card:0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);--x-box-shadow-drawer-right:-6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-left:6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-up:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-down:0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tabs-overflow-left:inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-right:inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-top:inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-bottom:inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);--x-motion-duration-fast:0.1s;--x-motion-duration-mid:0.2s;--x-motion-duration-slow:0.3s;--x-motion-ease-in-out:cubic-bezier(0.645, 0.045, 0.355, 1);--x-motion-ease-out:cubic-bezier(0.215, 0.61, 0.355, 1);--x-motion-ease-in:cubic-bezier(0.55, 0.055, 0.675, 0.19);--x-motion-ease-out-back:cubic-bezier(0.12, 0.4, 0.29, 1.46);--x-motion-ease-in-back:cubic-bezier(0.71, -0.46, 0.88, 0.6);--x-motion-ease-in-out-circle:cubic-bezier(0.78, 0.14, 0.15, 0.86);--x-motion-ease-out-circle:cubic-bezier(0.08, 0.82, 0.17, 1);--x-motion-ease-in-circle:cubic-bezier(0.6, 0.04, 0.98, 0.34);--x-motion-ease-in-quint:cubic-bezier(0.755, 0.05, 0.855, 0.06);--x-motion-ease-out-quint:cubic-bezier(0.23, 1, 0.32, 1);--x-z-index-base:0;--x-z-index-popup-base:1000;--x-z-index-popup:1030;--x-z-index-affix:10;--x-z-index-modal:1000;--x-z-index-modal-mask:1000;--x-z-index-drawer:1000;--x-z-index-popover:1030;--x-z-index-dropdown:1050;--x-z-index-tooltip:1070;--x-z-index-notification:1080;--x-z-index-message:1090;--x-z-index-popconfirm:1060;--x-z-index-table-fixed:10;--x-opacity-loading:0.65;--x-opacity-image:1;--x-opacity-disabled:0.5;--x-control-height:32px;--x-control-height-xs:24px;--x-control-height-sm:24px;--x-control-height-lg:40px;--x-control-radio-size:16px;--x-control-checkbox-size:16px;--x-control-padding-horizontal:12px;--x-control-padding-horizontal-sm:8px;--x-control-outline-width:2px;--x-control-outline:rgba(5, 145, 255, 0.1);--x-control-item-bg-hover:rgba(0, 0, 0, 0.04);--x-control-item-bg-active:#e6f4ff;--x-control-item-bg-active-hover:#bae0ff;--x-control-item-bg-active-disabled:rgba(0, 0, 0, 0.15);--x-control-tmp-outline:rgba(0, 0, 0, 0.02);--x-color-yellow:#fadb14;--x-color-yellow-rgb:250, 219, 20;--x-font-family-base:var(--x-font-family);--x-color-link:#1677ff;--x-color-link-hover:#69b1ff;--x-color-link-active:#0958d9;--x-color-icon:rgba(0, 0, 0, 0.45);--x-color-icon-hover:rgba(0, 0, 0, 0.88);--x-color-highlight:#ff4d4f;--x-color-bg-text-hover:rgba(0, 0, 0, 0.06);--x-color-bg-text-active:rgba(0, 0, 0, 0.15);--x-screen-xs:480px;--x-screen-xs-min:480px;--x-screen-xs-max:575px;--x-screen-sm:576px;--x-screen-sm-min:576px;--x-screen-sm-max:767px;--x-screen-md:768px;--x-screen-md-min:768px;--x-screen-md-max:991px;--x-screen-lg:992px;--x-screen-lg-min:992px;--x-screen-lg-max:1199px;--x-screen-xl:1200px;--x-screen-xl-min:1200px;--x-screen-xl-max:1599px;--x-screen-xxl:1600px;--x-screen-xxl-min:1600px;--x-color-fill-content:rgba(0, 0, 0, 0.06);--x-color-fill-content-hover:rgba(0, 0, 0, 0.15);--x-color-fill-alter:rgba(0, 0, 0, 0.02);--x-scrollbar-width:12px;--x-scrollbar-track-bg:rgba(0, 0, 0, 0.04);--x-scrollbar-thumb-bg:rgba(0, 0, 0, 0.25);--x-scrollbar-thumb-bg-hover:rgba(0, 0, 0, 0.35);--x-menu-dark-bg:#001529;--x-menu-dark-item-bg:#001529;--x-menu-dark-popup-bg:#001529;--x-menu-dark-submenu-item-bg:#000c17}:host{display:block;background:var(--x-header-bg, var(--x-color-bg-spotlight, #001529));height:var(--x-header-height, 64px);padding-inline:var(--x-header-padding-inline, var(--x-spacing-xxl, 32px));background:var(--x-header-bg, var(--x-color-bg-spotlight, #001529));font-family:var(--x-header-font-family, var(--x-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif));position:relative;-ms-flex-order:-1;order:-1;z-index:10;width:100%}.x-layout-header{color:var(--x-header-color, var(--x-color-text-light-solid, #ffffff));width:100%;height:100%}`;
-
-const XHeader = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    /**
-     * Render layout header wrapper with default slot.
-     * @returns JSX.Element
-     * @example
-     * <x-header>
-     *   <h1>Page Title</h1>
-     * </x-header>
-     */
-    render() {
-        return (h(Host, { key: '6e6eab6052ef8d4e6b0bdadb2a7829c8f41a8463' }, h("header", { key: '381433b9c5aa8ccf3480ed09b516b8fe5a65f469', class: "x-layout-header" }, h("slot", { key: 'fe84b8611ff9f56035cf8128346fa3133b14aba2' }))));
-    }
-};
-XHeader.style = xHeaderCss();
-
-const xLayoutCss = () => `@charset "UTF-8";:root{--x-color-primary:#1677ff;--x-color-primary-rgb:22, 119, 255;--x-color-primary-contrast:#ffffff;--x-color-primary-contrast-rgb:255, 255, 255;--x-color-primary-shade:#0958d9;--x-color-primary-tint:#4096ff;--x-color-primary-bg:#e6f4ff;--x-color-primary-bg-hover:#bae0ff;--x-color-primary-border:#91caff;--x-color-primary-border-hover:#69b1ff;--x-color-primary-hover:#4096ff;--x-color-primary-active:#0958d9;--x-color-primary-text:#1677ff;--x-color-primary-text-hover:#4096ff;--x-color-primary-text-active:#0958d9;--x-color-secondary:#3dc2ff;--x-color-secondary-rgb:61, 194, 255;--x-color-secondary-contrast:#ffffff;--x-color-secondary-contrast-rgb:255, 255, 255;--x-color-secondary-shade:#36abe0;--x-color-secondary-tint:#50c8ff;--x-color-success:#52c41a;--x-color-success-rgb:82, 196, 26;--x-color-success-contrast:#ffffff;--x-color-success-contrast-rgb:255, 255, 255;--x-color-success-shade:#389e0d;--x-color-success-tint:#73d13d;--x-color-success-bg:#f6ffed;--x-color-success-bg-hover:#d9f7be;--x-color-success-border:#b7eb8f;--x-color-success-border-hover:#95de64;--x-color-success-hover:#73d13d;--x-color-success-active:#389e0d;--x-color-success-text:#52c41a;--x-color-success-text-hover:#73d13d;--x-color-success-text-active:#389e0d;--x-color-warning:#faad14;--x-color-warning-rgb:250, 173, 20;--x-color-warning-contrast:#000000;--x-color-warning-contrast-rgb:0, 0, 0;--x-color-warning-shade:#d48806;--x-color-warning-tint:#ffc53d;--x-color-warning-bg:#fffbe6;--x-color-warning-bg-hover:#fff1b8;--x-color-warning-border:#ffe58f;--x-color-warning-border-hover:#ffd666;--x-color-warning-hover:#ffc53d;--x-color-warning-active:#d48806;--x-color-warning-text:#faad14;--x-color-warning-text-hover:#ffc53d;--x-color-warning-text-active:#d48806;--x-color-danger:#ff4d4f;--x-color-danger-rgb:255, 77, 79;--x-color-danger-contrast:#ffffff;--x-color-danger-contrast-rgb:255, 255, 255;--x-color-danger-shade:#cf1322;--x-color-danger-tint:#ff7875;--x-color-error:#ff4d4f;--x-color-error-rgb:255, 77, 79;--x-color-error-bg:#fff2f0;--x-color-error-bg-hover:#ffccc7;--x-color-error-border:#ffa39e;--x-color-error-border-hover:#ff7875;--x-color-error-hover:#ff7875;--x-color-error-active:#d9363e;--x-color-error-text:#ff4d4f;--x-color-error-text-hover:#ff7875;--x-color-error-text-active:#d9363e;--x-color-info:#1677ff;--x-color-info-rgb:22, 119, 255;--x-color-info-bg:#e6f4ff;--x-color-info-bg-hover:#bae0ff;--x-color-info-border:#91caff;--x-color-info-border-hover:#69b1ff;--x-color-info-hover:#69b1ff;--x-color-info-active:#0958d9;--x-color-info-text:#1677ff;--x-color-info-text-hover:#69b1ff;--x-color-info-text-active:#0958d9;--x-color-text:rgba(0, 0, 0, 0.88);--x-color-text-secondary:rgba(0, 0, 0, 0.65);--x-color-text-tertiary:rgba(0, 0, 0, 0.45);--x-color-text-quaternary:rgba(0, 0, 0, 0.25);--x-color-text-disabled:rgba(0, 0, 0, 0.25);--x-color-text-placeholder:rgba(0, 0, 0, 0.25);--x-color-text-heading:rgba(0, 0, 0, 0.88);--x-color-text-label:rgba(0, 0, 0, 0.65);--x-color-text-description:rgba(0, 0, 0, 0.45);--x-color-text-light-solid:#ffffff;--x-color-bg-container:#ffffff;--x-color-bg-elevated:#ffffff;--x-color-bg-layout:#f5f5f5;--x-color-bg-spotlight:rgba(0, 0, 0, 0.85);--x-color-bg-mask:rgba(0, 0, 0, 0.45);--x-color-bg-base:#ffffff;--x-color-bg-container-disabled:#f5f5f5;--x-color-bg-container-loading:rgba(255, 255, 255, 0.65);--x-color-white:#ffffff;--x-color-fill:rgba(0, 0, 0, 0.15);--x-color-fill-secondary:rgba(0, 0, 0, 0.06);--x-color-fill-tertiary:rgba(0, 0, 0, 0.04);--x-color-fill-quaternary:rgba(0, 0, 0, 0.02);--x-color-border:#d9d9d9;--x-color-border-secondary:#f0f0f0;--x-color-border-bg:#ffffff;--x-color-split:rgba(5, 5, 5, 0.06);--x-color-dark:#222428;--x-color-dark-rgb:34, 36, 40;--x-color-dark-contrast:#ffffff;--x-color-dark-contrast-rgb:255, 255, 255;--x-color-dark-shade:#1e2023;--x-color-dark-tint:#383a3e;--x-color-medium:#92949c;--x-color-medium-rgb:146, 148, 156;--x-color-medium-contrast:#ffffff;--x-color-medium-contrast-rgb:255, 255, 255;--x-color-medium-shade:#808289;--x-color-medium-tint:#9d9fa6;--x-color-light:#f4f5f8;--x-color-light-rgb:244, 245, 248;--x-color-light-contrast:#000000;--x-color-light-contrast-rgb:0, 0, 0;--x-color-light-shade:#d7d8da;--x-color-light-tint:#f5f6f9;--x-font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--x-font-family-code:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;--x-font-size:14px;--x-font-size-sm:12px;--x-font-size-lg:16px;--x-font-size-xl:20px;--x-font-size-heading-1:38px;--x-font-size-heading-2:30px;--x-font-size-heading-3:24px;--x-font-size-heading-4:20px;--x-font-size-heading-5:16px;--x-line-height:1.5714285714285714;--x-line-height-lg:1.5;--x-line-height-sm:1.6666666666666667;--x-line-height-heading-1:1.2105263157894737;--x-line-height-heading-2:1.2666666666666666;--x-line-height-heading-3:1.3333333333333333;--x-line-height-heading-4:1.4;--x-line-height-heading-5:1.5;--x-font-weight-normal:400;--x-font-weight-medium:500;--x-font-weight-semibold:600;--x-font-weight-strong:600;--x-font-size-base:14px;--x-font-size-xxl:24px;--x-line-height-base:1.5714285714285714;--x-spacing-xxs:4px;--x-spacing-xs:8px;--x-spacing-sm:12px;--x-spacing-md:16px;--x-spacing-lg:20px;--x-spacing-xl:24px;--x-spacing-xxl:32px;--x-spacing-xxxl:48px;--x-margin-xxs:4px;--x-margin-xs:8px;--x-margin-sm:12px;--x-margin-md:16px;--x-margin-lg:24px;--x-margin-xl:32px;--x-margin-xxl:48px;--x-padding-xxs:4px;--x-padding-xs:8px;--x-padding-sm:12px;--x-padding-md:16px;--x-padding-lg:24px;--x-padding-content-horizontal-lg:24px;--x-padding-content-vertical-lg:12px;--x-padding-content-horizontal:16px;--x-padding-content-vertical:12px;--x-padding-content-horizontal-sm:16px;--x-padding-content-vertical-sm:8px;--x-border-radius:6px;--x-border-radius-xs:2px;--x-border-radius-sm:4px;--x-border-radius-lg:8px;--x-border-radius-xl:12px;--x-border-radius-outer:4px;--x-border-radius-base:6px;--x-border-width:1px;--x-border-width-base:1px;--x-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-shadow-lg:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-box-shadow-popover-arrow:2px 2px 5px rgba(0, 0, 0, 0.05);--x-box-shadow-card:0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);--x-box-shadow-drawer-right:-6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-left:6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-up:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-down:0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tabs-overflow-left:inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-right:inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-top:inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-bottom:inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);--x-motion-duration-fast:0.1s;--x-motion-duration-mid:0.2s;--x-motion-duration-slow:0.3s;--x-motion-ease-in-out:cubic-bezier(0.645, 0.045, 0.355, 1);--x-motion-ease-out:cubic-bezier(0.215, 0.61, 0.355, 1);--x-motion-ease-in:cubic-bezier(0.55, 0.055, 0.675, 0.19);--x-motion-ease-out-back:cubic-bezier(0.12, 0.4, 0.29, 1.46);--x-motion-ease-in-back:cubic-bezier(0.71, -0.46, 0.88, 0.6);--x-motion-ease-in-out-circle:cubic-bezier(0.78, 0.14, 0.15, 0.86);--x-motion-ease-out-circle:cubic-bezier(0.08, 0.82, 0.17, 1);--x-motion-ease-in-circle:cubic-bezier(0.6, 0.04, 0.98, 0.34);--x-motion-ease-in-quint:cubic-bezier(0.755, 0.05, 0.855, 0.06);--x-motion-ease-out-quint:cubic-bezier(0.23, 1, 0.32, 1);--x-z-index-base:0;--x-z-index-popup-base:1000;--x-z-index-popup:1030;--x-z-index-affix:10;--x-z-index-modal:1000;--x-z-index-modal-mask:1000;--x-z-index-drawer:1000;--x-z-index-popover:1030;--x-z-index-dropdown:1050;--x-z-index-tooltip:1070;--x-z-index-notification:1080;--x-z-index-message:1090;--x-z-index-popconfirm:1060;--x-z-index-table-fixed:10;--x-opacity-loading:0.65;--x-opacity-image:1;--x-opacity-disabled:0.5;--x-control-height:32px;--x-control-height-xs:24px;--x-control-height-sm:24px;--x-control-height-lg:40px;--x-control-radio-size:16px;--x-control-checkbox-size:16px;--x-control-padding-horizontal:12px;--x-control-padding-horizontal-sm:8px;--x-control-outline-width:2px;--x-control-outline:rgba(5, 145, 255, 0.1);--x-control-item-bg-hover:rgba(0, 0, 0, 0.04);--x-control-item-bg-active:#e6f4ff;--x-control-item-bg-active-hover:#bae0ff;--x-control-item-bg-active-disabled:rgba(0, 0, 0, 0.15);--x-control-tmp-outline:rgba(0, 0, 0, 0.02);--x-color-yellow:#fadb14;--x-color-yellow-rgb:250, 219, 20;--x-font-family-base:var(--x-font-family);--x-color-link:#1677ff;--x-color-link-hover:#69b1ff;--x-color-link-active:#0958d9;--x-color-icon:rgba(0, 0, 0, 0.45);--x-color-icon-hover:rgba(0, 0, 0, 0.88);--x-color-highlight:#ff4d4f;--x-color-bg-text-hover:rgba(0, 0, 0, 0.06);--x-color-bg-text-active:rgba(0, 0, 0, 0.15);--x-screen-xs:480px;--x-screen-xs-min:480px;--x-screen-xs-max:575px;--x-screen-sm:576px;--x-screen-sm-min:576px;--x-screen-sm-max:767px;--x-screen-md:768px;--x-screen-md-min:768px;--x-screen-md-max:991px;--x-screen-lg:992px;--x-screen-lg-min:992px;--x-screen-lg-max:1199px;--x-screen-xl:1200px;--x-screen-xl-min:1200px;--x-screen-xl-max:1599px;--x-screen-xxl:1600px;--x-screen-xxl-min:1600px;--x-color-fill-content:rgba(0, 0, 0, 0.06);--x-color-fill-content-hover:rgba(0, 0, 0, 0.15);--x-color-fill-alter:rgba(0, 0, 0, 0.02);--x-scrollbar-width:12px;--x-scrollbar-track-bg:rgba(0, 0, 0, 0.04);--x-scrollbar-thumb-bg:rgba(0, 0, 0, 0.25);--x-scrollbar-thumb-bg-hover:rgba(0, 0, 0, 0.35);--x-menu-dark-bg:#001529;--x-menu-dark-item-bg:#001529;--x-menu-dark-popup-bg:#001529;--x-menu-dark-submenu-item-bg:#000c17}:host{display:-ms-flexbox;display:flex;-ms-flex:auto;flex:auto;-ms-flex-direction:column;flex-direction:column;min-height:0;color:var(--x-layout-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-family:var(--x-layout-font-family, var(--x-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif));font-size:var(--x-layout-font-size, var(--x-font-size, 14px));width:100%;height:100%}:host(.x-layout){display:-ms-flexbox;display:flex;-ms-flex:auto;flex:auto;-ms-flex-direction:column;flex-direction:column;min-height:0;color:var(--x-layout-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-size:var(--x-layout-font-size, var(--x-font-size, 14px));width:100%;height:100%}:host(.x-layout-has-sider){-ms-flex-direction:row;flex-direction:row}:host(.x-layout.x-layout-fixed){position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}`;
-
-const XLayout = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    get el() { return getElement(this); }
-    /**
-     * Whether the layout is fixed in position.
-     * @default true
-     * @example
-      * <x-layout fixed="true">
-     *   <x-sider></x-sider>
-     * </x-layout>
-     */
-    fixed = true;
-    watchFixed(newValue) {
-        console.log('XLayout fixed changed to:', newValue);
-    }
-    /**
-     * Tracks whether the layout has a sider child.
-     */
-    hasSider = false;
-    /**
-     * Whether contain Sider.
-     * @example
-     * <x-layout hasSiderProp>
-     *   <x-sider></x-sider>
-     * </x-layout>
-     */
-    hasSiderProp;
-    /**
-     * ResizeObserver instance.
-     */
-    observer;
-    disconnectedCallback() {
-        this.observer?.disconnect();
-    }
-    /**
-     * Initialize sider presence based on prop or DOM children.
-     *
-     * Flow:
-     * 1. Checks `hasSiderProp` preference.
-     * 2. If undefined, queries DOM for `x-sider` children.
-     * 3. Updates `hasSider` state to toggle layout class.
-     *
-     * @returns void
-     * @example
-     * <x-layout>
-     *   <x-sider></x-sider>
-     * </x-layout>
-     */
-    componentWillLoad() {
-        // If prop is explicitly provided, trust it.
-        if (this.hasSiderProp !== undefined) {
-            this.hasSider = this.hasSiderProp;
-        }
-        else {
-            // Check for x-sider children
-            const sider = this.el.querySelector('x-sider');
-            if (sider) {
-                this.hasSider = true;
-            }
-        }
-    }
-    componentDidLoad() {
-        this.observeElements();
-    }
-    observeElements() {
-        const header = this.el.closest('x-header');
-        const footer = this.el.closest('x-footer');
-        const content = this.el.closest('x-content');
-        if (!content)
-            return;
-        if (header || footer) {
-            this.observer = new ResizeObserver(() => {
-                if (header) {
-                    const height = header.getBoundingClientRect().height;
-                    content.style.setProperty('--offset-top', `${height}px`);
-                }
-                if (footer) {
-                    const height = footer.getBoundingClientRect().height;
-                    content.style.setProperty('--offset-bottom', `${height}px`);
-                }
-            });
-            if (header)
-                this.observer.observe(header);
-            if (footer)
-                this.observer.observe(footer);
-        }
-    }
-    /**
-     * Render the layout wrapper with optional sider class.
-     * @returns JSX.Element
-     * @example
-     * <x-layout>
-     *   <x-header></x-header>
-     *   <x-content></x-content>
-     * </x-layout>
-     */
-    render() {
-        // Compose classes based on layout state.
-        const classes = {
-            'x-layout': true,
-            'x-layout-has-sider': this.hasSider,
-            'x-layout-fixed': this.fixed === true,
-        };
-        return (h(Host, { key: '505299aa8958b941278b0dbaf4ceccb9dc003623', class: classes }, h("slot", { key: '82dcb640440c287f8690d44b36931ad8cf223774' })));
-    }
-    static get watchers() { return {
-        "fixed": [{
-                "watchFixed": 0
-            }]
-    }; }
-};
-XLayout.style = xLayoutCss();
-
-const xRowCss = () => `@charset "UTF-8";:root{--x-color-primary:#1677ff;--x-color-primary-rgb:22, 119, 255;--x-color-primary-contrast:#ffffff;--x-color-primary-contrast-rgb:255, 255, 255;--x-color-primary-shade:#0958d9;--x-color-primary-tint:#4096ff;--x-color-primary-bg:#e6f4ff;--x-color-primary-bg-hover:#bae0ff;--x-color-primary-border:#91caff;--x-color-primary-border-hover:#69b1ff;--x-color-primary-hover:#4096ff;--x-color-primary-active:#0958d9;--x-color-primary-text:#1677ff;--x-color-primary-text-hover:#4096ff;--x-color-primary-text-active:#0958d9;--x-color-secondary:#3dc2ff;--x-color-secondary-rgb:61, 194, 255;--x-color-secondary-contrast:#ffffff;--x-color-secondary-contrast-rgb:255, 255, 255;--x-color-secondary-shade:#36abe0;--x-color-secondary-tint:#50c8ff;--x-color-success:#52c41a;--x-color-success-rgb:82, 196, 26;--x-color-success-contrast:#ffffff;--x-color-success-contrast-rgb:255, 255, 255;--x-color-success-shade:#389e0d;--x-color-success-tint:#73d13d;--x-color-success-bg:#f6ffed;--x-color-success-bg-hover:#d9f7be;--x-color-success-border:#b7eb8f;--x-color-success-border-hover:#95de64;--x-color-success-hover:#73d13d;--x-color-success-active:#389e0d;--x-color-success-text:#52c41a;--x-color-success-text-hover:#73d13d;--x-color-success-text-active:#389e0d;--x-color-warning:#faad14;--x-color-warning-rgb:250, 173, 20;--x-color-warning-contrast:#000000;--x-color-warning-contrast-rgb:0, 0, 0;--x-color-warning-shade:#d48806;--x-color-warning-tint:#ffc53d;--x-color-warning-bg:#fffbe6;--x-color-warning-bg-hover:#fff1b8;--x-color-warning-border:#ffe58f;--x-color-warning-border-hover:#ffd666;--x-color-warning-hover:#ffc53d;--x-color-warning-active:#d48806;--x-color-warning-text:#faad14;--x-color-warning-text-hover:#ffc53d;--x-color-warning-text-active:#d48806;--x-color-danger:#ff4d4f;--x-color-danger-rgb:255, 77, 79;--x-color-danger-contrast:#ffffff;--x-color-danger-contrast-rgb:255, 255, 255;--x-color-danger-shade:#cf1322;--x-color-danger-tint:#ff7875;--x-color-error:#ff4d4f;--x-color-error-rgb:255, 77, 79;--x-color-error-bg:#fff2f0;--x-color-error-bg-hover:#ffccc7;--x-color-error-border:#ffa39e;--x-color-error-border-hover:#ff7875;--x-color-error-hover:#ff7875;--x-color-error-active:#d9363e;--x-color-error-text:#ff4d4f;--x-color-error-text-hover:#ff7875;--x-color-error-text-active:#d9363e;--x-color-info:#1677ff;--x-color-info-rgb:22, 119, 255;--x-color-info-bg:#e6f4ff;--x-color-info-bg-hover:#bae0ff;--x-color-info-border:#91caff;--x-color-info-border-hover:#69b1ff;--x-color-info-hover:#69b1ff;--x-color-info-active:#0958d9;--x-color-info-text:#1677ff;--x-color-info-text-hover:#69b1ff;--x-color-info-text-active:#0958d9;--x-color-text:rgba(0, 0, 0, 0.88);--x-color-text-secondary:rgba(0, 0, 0, 0.65);--x-color-text-tertiary:rgba(0, 0, 0, 0.45);--x-color-text-quaternary:rgba(0, 0, 0, 0.25);--x-color-text-disabled:rgba(0, 0, 0, 0.25);--x-color-text-placeholder:rgba(0, 0, 0, 0.25);--x-color-text-heading:rgba(0, 0, 0, 0.88);--x-color-text-label:rgba(0, 0, 0, 0.65);--x-color-text-description:rgba(0, 0, 0, 0.45);--x-color-text-light-solid:#ffffff;--x-color-bg-container:#ffffff;--x-color-bg-elevated:#ffffff;--x-color-bg-layout:#f5f5f5;--x-color-bg-spotlight:rgba(0, 0, 0, 0.85);--x-color-bg-mask:rgba(0, 0, 0, 0.45);--x-color-bg-base:#ffffff;--x-color-bg-container-disabled:#f5f5f5;--x-color-bg-container-loading:rgba(255, 255, 255, 0.65);--x-color-white:#ffffff;--x-color-fill:rgba(0, 0, 0, 0.15);--x-color-fill-secondary:rgba(0, 0, 0, 0.06);--x-color-fill-tertiary:rgba(0, 0, 0, 0.04);--x-color-fill-quaternary:rgba(0, 0, 0, 0.02);--x-color-border:#d9d9d9;--x-color-border-secondary:#f0f0f0;--x-color-border-bg:#ffffff;--x-color-split:rgba(5, 5, 5, 0.06);--x-color-dark:#222428;--x-color-dark-rgb:34, 36, 40;--x-color-dark-contrast:#ffffff;--x-color-dark-contrast-rgb:255, 255, 255;--x-color-dark-shade:#1e2023;--x-color-dark-tint:#383a3e;--x-color-medium:#92949c;--x-color-medium-rgb:146, 148, 156;--x-color-medium-contrast:#ffffff;--x-color-medium-contrast-rgb:255, 255, 255;--x-color-medium-shade:#808289;--x-color-medium-tint:#9d9fa6;--x-color-light:#f4f5f8;--x-color-light-rgb:244, 245, 248;--x-color-light-contrast:#000000;--x-color-light-contrast-rgb:0, 0, 0;--x-color-light-shade:#d7d8da;--x-color-light-tint:#f5f6f9;--x-font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--x-font-family-code:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;--x-font-size:14px;--x-font-size-sm:12px;--x-font-size-lg:16px;--x-font-size-xl:20px;--x-font-size-heading-1:38px;--x-font-size-heading-2:30px;--x-font-size-heading-3:24px;--x-font-size-heading-4:20px;--x-font-size-heading-5:16px;--x-line-height:1.5714285714285714;--x-line-height-lg:1.5;--x-line-height-sm:1.6666666666666667;--x-line-height-heading-1:1.2105263157894737;--x-line-height-heading-2:1.2666666666666666;--x-line-height-heading-3:1.3333333333333333;--x-line-height-heading-4:1.4;--x-line-height-heading-5:1.5;--x-font-weight-normal:400;--x-font-weight-medium:500;--x-font-weight-semibold:600;--x-font-weight-strong:600;--x-font-size-base:14px;--x-font-size-xxl:24px;--x-line-height-base:1.5714285714285714;--x-spacing-xxs:4px;--x-spacing-xs:8px;--x-spacing-sm:12px;--x-spacing-md:16px;--x-spacing-lg:20px;--x-spacing-xl:24px;--x-spacing-xxl:32px;--x-spacing-xxxl:48px;--x-margin-xxs:4px;--x-margin-xs:8px;--x-margin-sm:12px;--x-margin-md:16px;--x-margin-lg:24px;--x-margin-xl:32px;--x-margin-xxl:48px;--x-padding-xxs:4px;--x-padding-xs:8px;--x-padding-sm:12px;--x-padding-md:16px;--x-padding-lg:24px;--x-padding-content-horizontal-lg:24px;--x-padding-content-vertical-lg:12px;--x-padding-content-horizontal:16px;--x-padding-content-vertical:12px;--x-padding-content-horizontal-sm:16px;--x-padding-content-vertical-sm:8px;--x-border-radius:6px;--x-border-radius-xs:2px;--x-border-radius-sm:4px;--x-border-radius-lg:8px;--x-border-radius-xl:12px;--x-border-radius-outer:4px;--x-border-radius-base:6px;--x-border-width:1px;--x-border-width-base:1px;--x-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-shadow-lg:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-box-shadow-popover-arrow:2px 2px 5px rgba(0, 0, 0, 0.05);--x-box-shadow-card:0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);--x-box-shadow-drawer-right:-6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-left:6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-up:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-down:0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tabs-overflow-left:inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-right:inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-top:inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-bottom:inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);--x-motion-duration-fast:0.1s;--x-motion-duration-mid:0.2s;--x-motion-duration-slow:0.3s;--x-motion-ease-in-out:cubic-bezier(0.645, 0.045, 0.355, 1);--x-motion-ease-out:cubic-bezier(0.215, 0.61, 0.355, 1);--x-motion-ease-in:cubic-bezier(0.55, 0.055, 0.675, 0.19);--x-motion-ease-out-back:cubic-bezier(0.12, 0.4, 0.29, 1.46);--x-motion-ease-in-back:cubic-bezier(0.71, -0.46, 0.88, 0.6);--x-motion-ease-in-out-circle:cubic-bezier(0.78, 0.14, 0.15, 0.86);--x-motion-ease-out-circle:cubic-bezier(0.08, 0.82, 0.17, 1);--x-motion-ease-in-circle:cubic-bezier(0.6, 0.04, 0.98, 0.34);--x-motion-ease-in-quint:cubic-bezier(0.755, 0.05, 0.855, 0.06);--x-motion-ease-out-quint:cubic-bezier(0.23, 1, 0.32, 1);--x-z-index-base:0;--x-z-index-popup-base:1000;--x-z-index-popup:1030;--x-z-index-affix:10;--x-z-index-modal:1000;--x-z-index-modal-mask:1000;--x-z-index-drawer:1000;--x-z-index-popover:1030;--x-z-index-dropdown:1050;--x-z-index-tooltip:1070;--x-z-index-notification:1080;--x-z-index-message:1090;--x-z-index-popconfirm:1060;--x-z-index-table-fixed:10;--x-opacity-loading:0.65;--x-opacity-image:1;--x-opacity-disabled:0.5;--x-control-height:32px;--x-control-height-xs:24px;--x-control-height-sm:24px;--x-control-height-lg:40px;--x-control-radio-size:16px;--x-control-checkbox-size:16px;--x-control-padding-horizontal:12px;--x-control-padding-horizontal-sm:8px;--x-control-outline-width:2px;--x-control-outline:rgba(5, 145, 255, 0.1);--x-control-item-bg-hover:rgba(0, 0, 0, 0.04);--x-control-item-bg-active:#e6f4ff;--x-control-item-bg-active-hover:#bae0ff;--x-control-item-bg-active-disabled:rgba(0, 0, 0, 0.15);--x-control-tmp-outline:rgba(0, 0, 0, 0.02);--x-color-yellow:#fadb14;--x-color-yellow-rgb:250, 219, 20;--x-font-family-base:var(--x-font-family);--x-color-link:#1677ff;--x-color-link-hover:#69b1ff;--x-color-link-active:#0958d9;--x-color-icon:rgba(0, 0, 0, 0.45);--x-color-icon-hover:rgba(0, 0, 0, 0.88);--x-color-highlight:#ff4d4f;--x-color-bg-text-hover:rgba(0, 0, 0, 0.06);--x-color-bg-text-active:rgba(0, 0, 0, 0.15);--x-screen-xs:480px;--x-screen-xs-min:480px;--x-screen-xs-max:575px;--x-screen-sm:576px;--x-screen-sm-min:576px;--x-screen-sm-max:767px;--x-screen-md:768px;--x-screen-md-min:768px;--x-screen-md-max:991px;--x-screen-lg:992px;--x-screen-lg-min:992px;--x-screen-lg-max:1199px;--x-screen-xl:1200px;--x-screen-xl-min:1200px;--x-screen-xl-max:1599px;--x-screen-xxl:1600px;--x-screen-xxl-min:1600px;--x-color-fill-content:rgba(0, 0, 0, 0.06);--x-color-fill-content-hover:rgba(0, 0, 0, 0.15);--x-color-fill-alter:rgba(0, 0, 0, 0.02);--x-scrollbar-width:12px;--x-scrollbar-track-bg:rgba(0, 0, 0, 0.04);--x-scrollbar-thumb-bg:rgba(0, 0, 0, 0.25);--x-scrollbar-thumb-bg-hover:rgba(0, 0, 0, 0.35);--x-menu-dark-bg:#001529;--x-menu-dark-item-bg:#001529;--x-menu-dark-popup-bg:#001529;--x-menu-dark-submenu-item-bg:#000c17}:host{display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;min-width:0;-ms-flex-align:var(--x-row-align, flex-start);align-items:var(--x-row-align, flex-start);-ms-flex-pack:var(--x-row-justify, flex-start);justify-content:var(--x-row-justify, flex-start);-ms-flex-wrap:var(--x-row-wrap, wrap);flex-wrap:var(--x-row-wrap, wrap);margin-left:var(--x-row-margin-x, 0px);margin-right:var(--x-row-margin-x, 0px);margin-top:var(--x-row-margin-y, 0px);margin-bottom:var(--x-row-margin-y, 0px);row-gap:var(--x-row-gutter-y, 0px)}::slotted(x-col){padding-left:calc(var(--x-row-gutter-x, 0px) / 2);padding-right:calc(var(--x-row-gutter-x, 0px) / 2)}`;
-
-const XRow = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    /**
-     * Vertical alignment.
-     * @example
-     * <x-row align="middle"></x-row>
-     */
-    align = 'top';
-    /**
-     * Spacing between grids, could be a number or a object like { xs: 8, sm: 16, md: 24}
-     * For simplicity in this version, we accept number or [number, number]
-     * @example
-     * <x-row gutter={[16, 8]}></x-row>
-     */
-    gutter = 0;
-    /**
-     * Horizontal arrangement.
-     * @example
-     * <x-row justify="space-between"></x-row>
-     */
-    justify = 'start';
-    /**
-     * Auto wrap line.
-     * @example
-     * <x-row wrap={false}></x-row>
-     */
-    wrap = true;
-    /**
-     * Renders the Row component.
-     *
-     * Flow:
-     * 1. Destructures props: `align`, `justify`, `wrap`, `gutter`.
-     * 2. Maps `align` values to flexbox equivalents (e.g., 'middle' -> 'center').
-     * 3. Sets CSS variables for alignment and wrapping.
-     * 4. Processes `gutter`:
-     *    - If a number, applies equal spacing horizontally and vertically.
-     *    - If an array, applies distinct horizontal and vertical spacing.
-     * 5. Calculates and sets CSS variables for gutters and negative margins to offset column padding.
-     *
-     * @returns JSX.Element - The host element with computed styles.
-     */
-    render() {
-        const { align, justify, wrap, gutter } = this;
-        const style = {};
-        // Map alignment props to flexbox values
-        if (align)
-            style['--x-row-align'] = align === 'middle' ? 'center' : align === 'top' ? 'flex-start' : align === 'bottom' ? 'flex-end' : align;
-        if (justify)
-            style['--x-row-justify'] = justify;
-        style['--x-row-wrap'] = wrap ? 'wrap' : 'nowrap';
-        let gutterX = 0;
-        let gutterY = 0;
-        // Handle gutter configuration
-        if (typeof gutter === 'number') {
-            gutterX = gutter;
-            gutterY = gutter;
-        }
-        else if (Array.isArray(gutter)) {
-            gutterX = gutter[0];
-            gutterY = gutter[1];
-        }
-        // Apply gutter styles if present
-        if (gutterX > 0) {
-            style['--x-row-gutter-x'] = `${gutterX}px`;
-            style['--x-row-margin-x'] = `-${gutterX / 2}px`;
-        }
-        if (gutterY > 0) {
-            style['--x-row-gutter-y'] = `${gutterY}px`;
-            style['--x-row-margin-y'] = `-${gutterY / 2}px`;
-        }
-        return (h(Host, { key: '3973935e4573f194ff7c01476aedd7ec12c33fe3', style: style }, h("slot", { key: 'e5b420f22375f2268ebe422f96c62d0608f3345c' })));
-    }
-};
-XRow.style = xRowCss();
-
-const xSegmentedCss = () => `:root{--x-color-primary:#1677ff;--x-color-primary-rgb:22, 119, 255;--x-color-primary-contrast:#ffffff;--x-color-primary-contrast-rgb:255, 255, 255;--x-color-primary-shade:#0958d9;--x-color-primary-tint:#4096ff;--x-color-primary-bg:#e6f4ff;--x-color-primary-bg-hover:#bae0ff;--x-color-primary-border:#91caff;--x-color-primary-border-hover:#69b1ff;--x-color-primary-hover:#4096ff;--x-color-primary-active:#0958d9;--x-color-primary-text:#1677ff;--x-color-primary-text-hover:#4096ff;--x-color-primary-text-active:#0958d9;--x-color-secondary:#3dc2ff;--x-color-secondary-rgb:61, 194, 255;--x-color-secondary-contrast:#ffffff;--x-color-secondary-contrast-rgb:255, 255, 255;--x-color-secondary-shade:#36abe0;--x-color-secondary-tint:#50c8ff;--x-color-success:#52c41a;--x-color-success-rgb:82, 196, 26;--x-color-success-contrast:#ffffff;--x-color-success-contrast-rgb:255, 255, 255;--x-color-success-shade:#389e0d;--x-color-success-tint:#73d13d;--x-color-success-bg:#f6ffed;--x-color-success-bg-hover:#d9f7be;--x-color-success-border:#b7eb8f;--x-color-success-border-hover:#95de64;--x-color-success-hover:#73d13d;--x-color-success-active:#389e0d;--x-color-success-text:#52c41a;--x-color-success-text-hover:#73d13d;--x-color-success-text-active:#389e0d;--x-color-warning:#faad14;--x-color-warning-rgb:250, 173, 20;--x-color-warning-contrast:#000000;--x-color-warning-contrast-rgb:0, 0, 0;--x-color-warning-shade:#d48806;--x-color-warning-tint:#ffc53d;--x-color-warning-bg:#fffbe6;--x-color-warning-bg-hover:#fff1b8;--x-color-warning-border:#ffe58f;--x-color-warning-border-hover:#ffd666;--x-color-warning-hover:#ffc53d;--x-color-warning-active:#d48806;--x-color-warning-text:#faad14;--x-color-warning-text-hover:#ffc53d;--x-color-warning-text-active:#d48806;--x-color-danger:#ff4d4f;--x-color-danger-rgb:255, 77, 79;--x-color-danger-contrast:#ffffff;--x-color-danger-contrast-rgb:255, 255, 255;--x-color-danger-shade:#cf1322;--x-color-danger-tint:#ff7875;--x-color-error:#ff4d4f;--x-color-error-rgb:255, 77, 79;--x-color-error-bg:#fff2f0;--x-color-error-bg-hover:#ffccc7;--x-color-error-border:#ffa39e;--x-color-error-border-hover:#ff7875;--x-color-error-hover:#ff7875;--x-color-error-active:#d9363e;--x-color-error-text:#ff4d4f;--x-color-error-text-hover:#ff7875;--x-color-error-text-active:#d9363e;--x-color-info:#1677ff;--x-color-info-rgb:22, 119, 255;--x-color-info-bg:#e6f4ff;--x-color-info-bg-hover:#bae0ff;--x-color-info-border:#91caff;--x-color-info-border-hover:#69b1ff;--x-color-info-hover:#69b1ff;--x-color-info-active:#0958d9;--x-color-info-text:#1677ff;--x-color-info-text-hover:#69b1ff;--x-color-info-text-active:#0958d9;--x-color-text:rgba(0, 0, 0, 0.88);--x-color-text-secondary:rgba(0, 0, 0, 0.65);--x-color-text-tertiary:rgba(0, 0, 0, 0.45);--x-color-text-quaternary:rgba(0, 0, 0, 0.25);--x-color-text-disabled:rgba(0, 0, 0, 0.25);--x-color-text-placeholder:rgba(0, 0, 0, 0.25);--x-color-text-heading:rgba(0, 0, 0, 0.88);--x-color-text-label:rgba(0, 0, 0, 0.65);--x-color-text-description:rgba(0, 0, 0, 0.45);--x-color-text-light-solid:#ffffff;--x-color-bg-container:#ffffff;--x-color-bg-elevated:#ffffff;--x-color-bg-layout:#f5f5f5;--x-color-bg-spotlight:rgba(0, 0, 0, 0.85);--x-color-bg-mask:rgba(0, 0, 0, 0.45);--x-color-bg-base:#ffffff;--x-color-bg-container-disabled:#f5f5f5;--x-color-bg-container-loading:rgba(255, 255, 255, 0.65);--x-color-white:#ffffff;--x-color-fill:rgba(0, 0, 0, 0.15);--x-color-fill-secondary:rgba(0, 0, 0, 0.06);--x-color-fill-tertiary:rgba(0, 0, 0, 0.04);--x-color-fill-quaternary:rgba(0, 0, 0, 0.02);--x-color-border:#d9d9d9;--x-color-border-secondary:#f0f0f0;--x-color-border-bg:#ffffff;--x-color-split:rgba(5, 5, 5, 0.06);--x-color-dark:#222428;--x-color-dark-rgb:34, 36, 40;--x-color-dark-contrast:#ffffff;--x-color-dark-contrast-rgb:255, 255, 255;--x-color-dark-shade:#1e2023;--x-color-dark-tint:#383a3e;--x-color-medium:#92949c;--x-color-medium-rgb:146, 148, 156;--x-color-medium-contrast:#ffffff;--x-color-medium-contrast-rgb:255, 255, 255;--x-color-medium-shade:#808289;--x-color-medium-tint:#9d9fa6;--x-color-light:#f4f5f8;--x-color-light-rgb:244, 245, 248;--x-color-light-contrast:#000000;--x-color-light-contrast-rgb:0, 0, 0;--x-color-light-shade:#d7d8da;--x-color-light-tint:#f5f6f9;--x-font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--x-font-family-code:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;--x-font-size:14px;--x-font-size-sm:12px;--x-font-size-lg:16px;--x-font-size-xl:20px;--x-font-size-heading-1:38px;--x-font-size-heading-2:30px;--x-font-size-heading-3:24px;--x-font-size-heading-4:20px;--x-font-size-heading-5:16px;--x-line-height:1.5714285714285714;--x-line-height-lg:1.5;--x-line-height-sm:1.6666666666666667;--x-line-height-heading-1:1.2105263157894737;--x-line-height-heading-2:1.2666666666666666;--x-line-height-heading-3:1.3333333333333333;--x-line-height-heading-4:1.4;--x-line-height-heading-5:1.5;--x-font-weight-normal:400;--x-font-weight-medium:500;--x-font-weight-semibold:600;--x-font-weight-strong:600;--x-font-size-base:14px;--x-font-size-xxl:24px;--x-line-height-base:1.5714285714285714;--x-spacing-xxs:4px;--x-spacing-xs:8px;--x-spacing-sm:12px;--x-spacing-md:16px;--x-spacing-lg:20px;--x-spacing-xl:24px;--x-spacing-xxl:32px;--x-spacing-xxxl:48px;--x-margin-xxs:4px;--x-margin-xs:8px;--x-margin-sm:12px;--x-margin-md:16px;--x-margin-lg:24px;--x-margin-xl:32px;--x-margin-xxl:48px;--x-padding-xxs:4px;--x-padding-xs:8px;--x-padding-sm:12px;--x-padding-md:16px;--x-padding-lg:24px;--x-padding-content-horizontal-lg:24px;--x-padding-content-vertical-lg:12px;--x-padding-content-horizontal:16px;--x-padding-content-vertical:12px;--x-padding-content-horizontal-sm:16px;--x-padding-content-vertical-sm:8px;--x-border-radius:6px;--x-border-radius-xs:2px;--x-border-radius-sm:4px;--x-border-radius-lg:8px;--x-border-radius-xl:12px;--x-border-radius-outer:4px;--x-border-radius-base:6px;--x-border-width:1px;--x-border-width-base:1px;--x-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-shadow-lg:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-box-shadow-popover-arrow:2px 2px 5px rgba(0, 0, 0, 0.05);--x-box-shadow-card:0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);--x-box-shadow-drawer-right:-6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-left:6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-up:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-down:0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tabs-overflow-left:inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-right:inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-top:inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-bottom:inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);--x-motion-duration-fast:0.1s;--x-motion-duration-mid:0.2s;--x-motion-duration-slow:0.3s;--x-motion-ease-in-out:cubic-bezier(0.645, 0.045, 0.355, 1);--x-motion-ease-out:cubic-bezier(0.215, 0.61, 0.355, 1);--x-motion-ease-in:cubic-bezier(0.55, 0.055, 0.675, 0.19);--x-motion-ease-out-back:cubic-bezier(0.12, 0.4, 0.29, 1.46);--x-motion-ease-in-back:cubic-bezier(0.71, -0.46, 0.88, 0.6);--x-motion-ease-in-out-circle:cubic-bezier(0.78, 0.14, 0.15, 0.86);--x-motion-ease-out-circle:cubic-bezier(0.08, 0.82, 0.17, 1);--x-motion-ease-in-circle:cubic-bezier(0.6, 0.04, 0.98, 0.34);--x-motion-ease-in-quint:cubic-bezier(0.755, 0.05, 0.855, 0.06);--x-motion-ease-out-quint:cubic-bezier(0.23, 1, 0.32, 1);--x-z-index-base:0;--x-z-index-popup-base:1000;--x-z-index-popup:1030;--x-z-index-affix:10;--x-z-index-modal:1000;--x-z-index-modal-mask:1000;--x-z-index-drawer:1000;--x-z-index-popover:1030;--x-z-index-dropdown:1050;--x-z-index-tooltip:1070;--x-z-index-notification:1080;--x-z-index-message:1090;--x-z-index-popconfirm:1060;--x-z-index-table-fixed:10;--x-opacity-loading:0.65;--x-opacity-image:1;--x-opacity-disabled:0.5;--x-control-height:32px;--x-control-height-xs:24px;--x-control-height-sm:24px;--x-control-height-lg:40px;--x-control-radio-size:16px;--x-control-checkbox-size:16px;--x-control-padding-horizontal:12px;--x-control-padding-horizontal-sm:8px;--x-control-outline-width:2px;--x-control-outline:rgba(5, 145, 255, 0.1);--x-control-item-bg-hover:rgba(0, 0, 0, 0.04);--x-control-item-bg-active:#e6f4ff;--x-control-item-bg-active-hover:#bae0ff;--x-control-item-bg-active-disabled:rgba(0, 0, 0, 0.15);--x-control-tmp-outline:rgba(0, 0, 0, 0.02);--x-color-yellow:#fadb14;--x-color-yellow-rgb:250, 219, 20;--x-font-family-base:var(--x-font-family);--x-color-link:#1677ff;--x-color-link-hover:#69b1ff;--x-color-link-active:#0958d9;--x-color-icon:rgba(0, 0, 0, 0.45);--x-color-icon-hover:rgba(0, 0, 0, 0.88);--x-color-highlight:#ff4d4f;--x-color-bg-text-hover:rgba(0, 0, 0, 0.06);--x-color-bg-text-active:rgba(0, 0, 0, 0.15);--x-screen-xs:480px;--x-screen-xs-min:480px;--x-screen-xs-max:575px;--x-screen-sm:576px;--x-screen-sm-min:576px;--x-screen-sm-max:767px;--x-screen-md:768px;--x-screen-md-min:768px;--x-screen-md-max:991px;--x-screen-lg:992px;--x-screen-lg-min:992px;--x-screen-lg-max:1199px;--x-screen-xl:1200px;--x-screen-xl-min:1200px;--x-screen-xl-max:1599px;--x-screen-xxl:1600px;--x-screen-xxl-min:1600px;--x-color-fill-content:rgba(0, 0, 0, 0.06);--x-color-fill-content-hover:rgba(0, 0, 0, 0.15);--x-color-fill-alter:rgba(0, 0, 0, 0.02);--x-scrollbar-width:12px;--x-scrollbar-track-bg:rgba(0, 0, 0, 0.04);--x-scrollbar-thumb-bg:rgba(0, 0, 0, 0.25);--x-scrollbar-thumb-bg-hover:rgba(0, 0, 0, 0.35);--x-menu-dark-bg:#001529;--x-menu-dark-item-bg:#001529;--x-menu-dark-popup-bg:#001529;--x-menu-dark-submenu-item-bg:#000c17}:host{display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:var(--x-font-family)}.x-segmented{position:relative;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:stretch;align-items:stretch;padding:var(--x-segmented-padding, 2px);background-color:var(--x-segmented-bg, var(--x-color-fill-tertiary, rgba(0, 0, 0, 0.04)));border-radius:var(--x-segmented-border-radius, var(--x-border-radius-base, 6px));-webkit-transition:all var(--x-motion-duration-mid, 0.2s) var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1));transition:all var(--x-motion-duration-mid, 0.2s) var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1));min-height:var(--x-control-height, 32px);width:auto}.x-segmented.x-segmented-block{display:-ms-flexbox;display:flex;width:100%}.x-segmented-small{min-height:var(--x-control-height-sm, 24px);border-radius:var(--x-border-radius-sm, 4px)}.x-segmented-small .x-segmented-item{font-size:var(--x-font-size-sm, 12px);padding:0 8px}.x-segmented-small .x-segmented-thumb{border-radius:calc(var(--x-border-radius-sm, 4px) - var(--x-segmented-padding, 2px))}.x-segmented-large{min-height:var(--x-control-height-lg, 40px)}.x-segmented-large .x-segmented-item{font-size:var(--x-font-size-lg, 16px);padding:0 16px}.x-segmented-group{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;width:100%}.x-segmented-item{position:relative;-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:0 12px;color:var(--x-segmented-item-color, var(--x-color-text-secondary, rgba(0, 0, 0, 0.65)));font-size:var(--x-font-size-base, 14px);cursor:pointer;-webkit-transition:color var(--x-motion-duration-mid, 0.2s);transition:color var(--x-motion-duration-mid, 0.2s);z-index:1;text-align:center;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.x-segmented-item:hover:not(.x-segmented-item-selected):not(.x-segmented-item-disabled){color:var(--x-segmented-item-hover-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));background-color:var(--x-segmented-item-hover-bg, var(--x-color-fill-secondary, rgba(0, 0, 0, 0.06)));border-radius:calc(var(--x-segmented-border-radius, var(--x-border-radius-base, 6px)) - var(--x-segmented-padding, 2px))}.x-segmented-item-selected{color:var(--x-segmented-item-selected-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-weight:500}.x-segmented-item-disabled{color:var(--x-color-text-disabled, rgba(0, 0, 0, 0.25));cursor:not-allowed}.x-segmented-item-icon{margin-right:8px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.x-segmented-item-icon+span{display:inline-block}.x-segmented-thumb{position:absolute;top:0;left:0;height:100%;background-color:var(--x-segmented-item-selected-bg, var(--x-color-bg-container, #ffffff));border-radius:calc(var(--x-segmented-border-radius, var(--x-border-radius-base, 6px)) - var(--x-segmented-padding, 2px));-webkit-box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.08);box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.08);-webkit-transition:all var(--x-motion-duration-mid, 0.2s) var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1));transition:all var(--x-motion-duration-mid, 0.2s) var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1));z-index:0}`;
-
-const XSegmented = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.xChange = createEvent(this, "xChange", 7);
-    }
-    get el() { return getElement(this); }
-    /**
-     * Options to show
-     * @example
-     * <x-segmented options={['Daily', 'Weekly', 'Monthly']} />
-     * <x-segmented options={[{ label: 'Daily', value: 'Daily', icon: 'bars' }]} />
-     */
-    options = [];
-    /**
-     * Currently selected value
-     * @example
-     * <x-segmented value="Weekly" />
-     */
-    value;
-    /**
-     * Default selected value
-     * @example
-     * <x-segmented defaultValue="Daily" />
-     */
-    defaultValue;
-    /**
-     * Size of segmented
-     * @example
-     * <x-segmented size="large" />
-     */
-    size = 'middle';
-    /**
-     * Whether to fit to container width
-     * @example
-     * <x-segmented block />
-     */
-    block = false;
-    /**
-     * Whether the whole component is disabled
-     * @example
-     * <x-segmented disabled />
-     */
-    disabled = false;
-    /**
-     * Event emitted when selection changes
-     * @example
-     * <x-segmented onXChange={(e) => console.log(e.detail)} />
-     */
-    xChange;
-    innerValue;
-    thumbStyle = { transform: 'translateX(0)', width: '0' };
-    /**
-     * Watches for changes in the 'value' prop.
-     * Updates the internal state and the thumb position.
-     *
-     * @param newValue - The new selected value.
-     */
-    handleValueChange(newValue) {
-        this.innerValue = newValue;
-        this.updateThumb();
-    }
-    /**
-     * Watches for changes in the 'options' prop.
-     * Triggers a thumb position update to align with new options.
-     */
-    handleOptionsChange() {
-        this.updateThumb();
-    }
-    /**
-     * Component lifecycle method called before loading.
-     * Initializes the internal value state based on priority:
-     *
-     * Flow:
-     * 1. Checks if `value` prop is provided (controlled mode).
-     * 2. If not, checks if `defaultValue` prop is provided (uncontrolled mode).
-     * 3. If neither, defaults to the first option in the list.
-     * 4. Sets `innerValue` state accordingly.
-     */
-    componentWillLoad() {
-        if (this.value !== undefined) {
-            this.innerValue = this.value;
-        }
-        else if (this.defaultValue !== undefined) {
-            this.innerValue = this.defaultValue;
-        }
-        else if (this.options && this.options.length > 0) {
-            const first = this.options[0];
-            // @ts-ignore
-            this.innerValue = typeof first === 'object' ? first.value : first;
-        }
-    }
-    /**
-     * Component lifecycle method called after loading.
-     * Initial calculation of the thumb position.
-     * Uses a timeout to ensure the DOM layout is fully settled.
-     */
-    componentDidLoad() {
-        this.updateThumb();
-        // Re-update after a small delay to ensure layout is ready
-        setTimeout(() => this.updateThumb(), 50);
-    }
-    /**
-     * Updates the position and width of the selection thumb (the sliding background).
-     *
-     * Flow:
-     * 1. Finds all item elements in the shadow DOM.
-     * 2. Identifies the index of the currently selected option.
-     * 3. If found, calculates the `offsetLeft` and `offsetWidth` of the selected item.
-     * 4. Updates `thumbStyle` state to animate the thumb to the new position.
-     */
-    updateThumb() {
-        if (!this.el)
-            return;
-        const items = this.el.shadowRoot?.querySelectorAll('.x-segmented-item');
-        if (!items || items.length === 0)
-            return;
-        // @ts-ignore
-        const normalizedOptions = this.normalizeOptions();
-        // @ts-ignore
-        const index = normalizedOptions.findIndex(opt => opt.value === this.innerValue);
-        if (index !== -1 && items[index]) {
-            const activeItem = items[index];
-            this.thumbStyle = {
-                transform: `translateX(${activeItem.offsetLeft}px)`,
-                width: `${activeItem.offsetWidth}px`
-            };
-        }
-    }
-    /**
-     * Normalizes the options array into a standard object format.
-     * Handles both primitive values (string/number) and object options.
-     *
-     * @returns SegmentedOption[] - Array of standardized option objects.
-     */
-    normalizeOptions() {
-        return this.options.map(opt => {
-            if (typeof opt === 'object')
-                return opt;
-            return { label: String(opt), value: opt };
-        });
-    }
-    /**
-     * Handles click events on segmented items.
-     *
-     * Flow:
-     * 1. Checks if component or item is disabled, or if value hasn't changed.
-     * 2. Updates internal state and prop value.
-     * 3. Emits `xChange` event.
-     * 4. Triggers thumb position update.
-     *
-     * @param value - The value of the clicked item.
-     * @param disabled - Whether the clicked item is disabled.
-     */
-    handleItemClick(value, disabled) {
-        if (this.disabled || disabled || value === this.innerValue)
-            return;
-        this.innerValue = value;
-        this.value = value;
-        this.xChange.emit(value);
-        this.updateThumb();
-    }
-    /**
-     * Renders the Segmented component.
-     *
-     * Flow:
-     * 1. Normalizes the options array.
-     * 2. Renders the Host element with block/disabled classes.
-     * 3. Renders the main wrapper and group container.
-     * 4. Renders the "thumb" (active background) using `thumbStyle`.
-     * 5. Maps over normalized options to render item elements:
-     *    - Applies selected/disabled classes.
-     *    - Attaches click handler.
-     *    - Renders icon (if present) and label.
-     *
-     * @returns {JSX.Element} The component tree.
-     */
-    render() {
-        const options = this.normalizeOptions();
-        return (h(Host, { key: '11f02d21deaa61f518736437d47420e65385ddac', class: {
-                'x-segmented-host': true,
-                'x-segmented-host-block': this.block
-            } }, h("div", { key: 'f7f77d807c7cffe0d46fd1357cf1f0b9330d4673', class: {
-                'x-segmented': true,
-                'x-segmented-block': this.block,
-                [`x-segmented-${this.size}`]: true,
-                'x-segmented-disabled': this.disabled
-            } }, h("div", { key: '2710d71aad0c408d984e17b436b2a00b5c4e8197', class: "x-segmented-group" }, h("div", { key: '645214cd76268f424ec1b9d2a55ca8b0932fddd3', class: "x-segmented-thumb", style: this.thumbStyle }), options.map((option) => (h("div", { class: {
-                'x-segmented-item': true,
-                'x-segmented-item-selected': this.innerValue === option.value,
-                'x-segmented-item-disabled': !!(this.disabled || option.disabled),
-                ...(option.className ? { [option.className]: true } : {})
-            }, title: option.title, onClick: () => this.handleItemClick(option.value, !!option.disabled) }, option.icon && (h("span", { class: "x-segmented-item-icon" }, h("x-icon", { name: option.icon }))), h("span", null, option.label))))))));
-    }
-    static get watchers() { return {
-        "value": [{
-                "handleValueChange": 0
-            }],
-        "options": [{
-                "handleOptionsChange": 0
-            }]
-    }; }
-};
-XSegmented.style = xSegmentedCss();
-
-const xSiderCss = () => `@charset "UTF-8";:root{--x-color-primary:#1677ff;--x-color-primary-rgb:22, 119, 255;--x-color-primary-contrast:#ffffff;--x-color-primary-contrast-rgb:255, 255, 255;--x-color-primary-shade:#0958d9;--x-color-primary-tint:#4096ff;--x-color-primary-bg:#e6f4ff;--x-color-primary-bg-hover:#bae0ff;--x-color-primary-border:#91caff;--x-color-primary-border-hover:#69b1ff;--x-color-primary-hover:#4096ff;--x-color-primary-active:#0958d9;--x-color-primary-text:#1677ff;--x-color-primary-text-hover:#4096ff;--x-color-primary-text-active:#0958d9;--x-color-secondary:#3dc2ff;--x-color-secondary-rgb:61, 194, 255;--x-color-secondary-contrast:#ffffff;--x-color-secondary-contrast-rgb:255, 255, 255;--x-color-secondary-shade:#36abe0;--x-color-secondary-tint:#50c8ff;--x-color-success:#52c41a;--x-color-success-rgb:82, 196, 26;--x-color-success-contrast:#ffffff;--x-color-success-contrast-rgb:255, 255, 255;--x-color-success-shade:#389e0d;--x-color-success-tint:#73d13d;--x-color-success-bg:#f6ffed;--x-color-success-bg-hover:#d9f7be;--x-color-success-border:#b7eb8f;--x-color-success-border-hover:#95de64;--x-color-success-hover:#73d13d;--x-color-success-active:#389e0d;--x-color-success-text:#52c41a;--x-color-success-text-hover:#73d13d;--x-color-success-text-active:#389e0d;--x-color-warning:#faad14;--x-color-warning-rgb:250, 173, 20;--x-color-warning-contrast:#000000;--x-color-warning-contrast-rgb:0, 0, 0;--x-color-warning-shade:#d48806;--x-color-warning-tint:#ffc53d;--x-color-warning-bg:#fffbe6;--x-color-warning-bg-hover:#fff1b8;--x-color-warning-border:#ffe58f;--x-color-warning-border-hover:#ffd666;--x-color-warning-hover:#ffc53d;--x-color-warning-active:#d48806;--x-color-warning-text:#faad14;--x-color-warning-text-hover:#ffc53d;--x-color-warning-text-active:#d48806;--x-color-danger:#ff4d4f;--x-color-danger-rgb:255, 77, 79;--x-color-danger-contrast:#ffffff;--x-color-danger-contrast-rgb:255, 255, 255;--x-color-danger-shade:#cf1322;--x-color-danger-tint:#ff7875;--x-color-error:#ff4d4f;--x-color-error-rgb:255, 77, 79;--x-color-error-bg:#fff2f0;--x-color-error-bg-hover:#ffccc7;--x-color-error-border:#ffa39e;--x-color-error-border-hover:#ff7875;--x-color-error-hover:#ff7875;--x-color-error-active:#d9363e;--x-color-error-text:#ff4d4f;--x-color-error-text-hover:#ff7875;--x-color-error-text-active:#d9363e;--x-color-info:#1677ff;--x-color-info-rgb:22, 119, 255;--x-color-info-bg:#e6f4ff;--x-color-info-bg-hover:#bae0ff;--x-color-info-border:#91caff;--x-color-info-border-hover:#69b1ff;--x-color-info-hover:#69b1ff;--x-color-info-active:#0958d9;--x-color-info-text:#1677ff;--x-color-info-text-hover:#69b1ff;--x-color-info-text-active:#0958d9;--x-color-text:rgba(0, 0, 0, 0.88);--x-color-text-secondary:rgba(0, 0, 0, 0.65);--x-color-text-tertiary:rgba(0, 0, 0, 0.45);--x-color-text-quaternary:rgba(0, 0, 0, 0.25);--x-color-text-disabled:rgba(0, 0, 0, 0.25);--x-color-text-placeholder:rgba(0, 0, 0, 0.25);--x-color-text-heading:rgba(0, 0, 0, 0.88);--x-color-text-label:rgba(0, 0, 0, 0.65);--x-color-text-description:rgba(0, 0, 0, 0.45);--x-color-text-light-solid:#ffffff;--x-color-bg-container:#ffffff;--x-color-bg-elevated:#ffffff;--x-color-bg-layout:#f5f5f5;--x-color-bg-spotlight:rgba(0, 0, 0, 0.85);--x-color-bg-mask:rgba(0, 0, 0, 0.45);--x-color-bg-base:#ffffff;--x-color-bg-container-disabled:#f5f5f5;--x-color-bg-container-loading:rgba(255, 255, 255, 0.65);--x-color-white:#ffffff;--x-color-fill:rgba(0, 0, 0, 0.15);--x-color-fill-secondary:rgba(0, 0, 0, 0.06);--x-color-fill-tertiary:rgba(0, 0, 0, 0.04);--x-color-fill-quaternary:rgba(0, 0, 0, 0.02);--x-color-border:#d9d9d9;--x-color-border-secondary:#f0f0f0;--x-color-border-bg:#ffffff;--x-color-split:rgba(5, 5, 5, 0.06);--x-color-dark:#222428;--x-color-dark-rgb:34, 36, 40;--x-color-dark-contrast:#ffffff;--x-color-dark-contrast-rgb:255, 255, 255;--x-color-dark-shade:#1e2023;--x-color-dark-tint:#383a3e;--x-color-medium:#92949c;--x-color-medium-rgb:146, 148, 156;--x-color-medium-contrast:#ffffff;--x-color-medium-contrast-rgb:255, 255, 255;--x-color-medium-shade:#808289;--x-color-medium-tint:#9d9fa6;--x-color-light:#f4f5f8;--x-color-light-rgb:244, 245, 248;--x-color-light-contrast:#000000;--x-color-light-contrast-rgb:0, 0, 0;--x-color-light-shade:#d7d8da;--x-color-light-tint:#f5f6f9;--x-font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--x-font-family-code:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;--x-font-size:14px;--x-font-size-sm:12px;--x-font-size-lg:16px;--x-font-size-xl:20px;--x-font-size-heading-1:38px;--x-font-size-heading-2:30px;--x-font-size-heading-3:24px;--x-font-size-heading-4:20px;--x-font-size-heading-5:16px;--x-line-height:1.5714285714285714;--x-line-height-lg:1.5;--x-line-height-sm:1.6666666666666667;--x-line-height-heading-1:1.2105263157894737;--x-line-height-heading-2:1.2666666666666666;--x-line-height-heading-3:1.3333333333333333;--x-line-height-heading-4:1.4;--x-line-height-heading-5:1.5;--x-font-weight-normal:400;--x-font-weight-medium:500;--x-font-weight-semibold:600;--x-font-weight-strong:600;--x-font-size-base:14px;--x-font-size-xxl:24px;--x-line-height-base:1.5714285714285714;--x-spacing-xxs:4px;--x-spacing-xs:8px;--x-spacing-sm:12px;--x-spacing-md:16px;--x-spacing-lg:20px;--x-spacing-xl:24px;--x-spacing-xxl:32px;--x-spacing-xxxl:48px;--x-margin-xxs:4px;--x-margin-xs:8px;--x-margin-sm:12px;--x-margin-md:16px;--x-margin-lg:24px;--x-margin-xl:32px;--x-margin-xxl:48px;--x-padding-xxs:4px;--x-padding-xs:8px;--x-padding-sm:12px;--x-padding-md:16px;--x-padding-lg:24px;--x-padding-content-horizontal-lg:24px;--x-padding-content-vertical-lg:12px;--x-padding-content-horizontal:16px;--x-padding-content-vertical:12px;--x-padding-content-horizontal-sm:16px;--x-padding-content-vertical-sm:8px;--x-border-radius:6px;--x-border-radius-xs:2px;--x-border-radius-sm:4px;--x-border-radius-lg:8px;--x-border-radius-xl:12px;--x-border-radius-outer:4px;--x-border-radius-base:6px;--x-border-width:1px;--x-border-width-base:1px;--x-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-shadow-lg:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-box-shadow-popover-arrow:2px 2px 5px rgba(0, 0, 0, 0.05);--x-box-shadow-card:0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);--x-box-shadow-drawer-right:-6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-left:6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-up:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-down:0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tabs-overflow-left:inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-right:inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-top:inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-bottom:inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);--x-motion-duration-fast:0.1s;--x-motion-duration-mid:0.2s;--x-motion-duration-slow:0.3s;--x-motion-ease-in-out:cubic-bezier(0.645, 0.045, 0.355, 1);--x-motion-ease-out:cubic-bezier(0.215, 0.61, 0.355, 1);--x-motion-ease-in:cubic-bezier(0.55, 0.055, 0.675, 0.19);--x-motion-ease-out-back:cubic-bezier(0.12, 0.4, 0.29, 1.46);--x-motion-ease-in-back:cubic-bezier(0.71, -0.46, 0.88, 0.6);--x-motion-ease-in-out-circle:cubic-bezier(0.78, 0.14, 0.15, 0.86);--x-motion-ease-out-circle:cubic-bezier(0.08, 0.82, 0.17, 1);--x-motion-ease-in-circle:cubic-bezier(0.6, 0.04, 0.98, 0.34);--x-motion-ease-in-quint:cubic-bezier(0.755, 0.05, 0.855, 0.06);--x-motion-ease-out-quint:cubic-bezier(0.23, 1, 0.32, 1);--x-z-index-base:0;--x-z-index-popup-base:1000;--x-z-index-popup:1030;--x-z-index-affix:10;--x-z-index-modal:1000;--x-z-index-modal-mask:1000;--x-z-index-drawer:1000;--x-z-index-popover:1030;--x-z-index-dropdown:1050;--x-z-index-tooltip:1070;--x-z-index-notification:1080;--x-z-index-message:1090;--x-z-index-popconfirm:1060;--x-z-index-table-fixed:10;--x-opacity-loading:0.65;--x-opacity-image:1;--x-opacity-disabled:0.5;--x-control-height:32px;--x-control-height-xs:24px;--x-control-height-sm:24px;--x-control-height-lg:40px;--x-control-radio-size:16px;--x-control-checkbox-size:16px;--x-control-padding-horizontal:12px;--x-control-padding-horizontal-sm:8px;--x-control-outline-width:2px;--x-control-outline:rgba(5, 145, 255, 0.1);--x-control-item-bg-hover:rgba(0, 0, 0, 0.04);--x-control-item-bg-active:#e6f4ff;--x-control-item-bg-active-hover:#bae0ff;--x-control-item-bg-active-disabled:rgba(0, 0, 0, 0.15);--x-control-tmp-outline:rgba(0, 0, 0, 0.02);--x-color-yellow:#fadb14;--x-color-yellow-rgb:250, 219, 20;--x-font-family-base:var(--x-font-family);--x-color-link:#1677ff;--x-color-link-hover:#69b1ff;--x-color-link-active:#0958d9;--x-color-icon:rgba(0, 0, 0, 0.45);--x-color-icon-hover:rgba(0, 0, 0, 0.88);--x-color-highlight:#ff4d4f;--x-color-bg-text-hover:rgba(0, 0, 0, 0.06);--x-color-bg-text-active:rgba(0, 0, 0, 0.15);--x-screen-xs:480px;--x-screen-xs-min:480px;--x-screen-xs-max:575px;--x-screen-sm:576px;--x-screen-sm-min:576px;--x-screen-sm-max:767px;--x-screen-md:768px;--x-screen-md-min:768px;--x-screen-md-max:991px;--x-screen-lg:992px;--x-screen-lg-min:992px;--x-screen-lg-max:1199px;--x-screen-xl:1200px;--x-screen-xl-min:1200px;--x-screen-xl-max:1599px;--x-screen-xxl:1600px;--x-screen-xxl-min:1600px;--x-color-fill-content:rgba(0, 0, 0, 0.06);--x-color-fill-content-hover:rgba(0, 0, 0, 0.15);--x-color-fill-alter:rgba(0, 0, 0, 0.02);--x-scrollbar-width:12px;--x-scrollbar-track-bg:rgba(0, 0, 0, 0.04);--x-scrollbar-thumb-bg:rgba(0, 0, 0, 0.25);--x-scrollbar-thumb-bg-hover:rgba(0, 0, 0, 0.35);--x-menu-dark-bg:#001529;--x-menu-dark-item-bg:#001529;--x-menu-dark-popup-bg:#001529;--x-menu-dark-submenu-item-bg:#000c17}:host{display:block;position:relative;min-width:0;background:var(--x-sider-bg, var(--x-color-bg-spotlight, #001529));-webkit-transition:all var(--x-sider-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:all var(--x-sider-motion-duration, var(--x-motion-duration-mid, 0.2s));font-family:var(--x-sider-font-family, var(--x-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif))}.x-layout-sider{position:relative;min-width:0;-webkit-transition:all var(--x-sider-motion-duration-fast, var(--x-motion-duration-fast, 0.1s)), background 0s;transition:all var(--x-sider-motion-duration-fast, var(--x-motion-duration-fast, 0.1s)), background 0s;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;width:100%}.x-layout-sider-children{height:100%;-ms-flex:1;flex:1;overflow:hidden;color:var(--x-sider-color, var(--x-color-text-secondary, rgba(0, 0, 0, 0.65)))}.x-layout-sider-trigger{position:fixed;bottom:0;z-index:1;height:var(--x-sider-trigger-height, var(--x-spacing-xxxl, 48px));color:var(--x-sider-trigger-color, var(--x-color-text-light-solid, #ffffff));line-height:var(--x-sider-trigger-height, var(--x-spacing-xxxl, 48px));text-align:center;background:var(--x-sider-trigger-bg, rgba(0, 0, 0, 0.75));cursor:pointer;-webkit-transition:all var(--x-sider-motion-duration-fast, var(--x-motion-duration-fast, 0.1s));transition:all var(--x-sider-motion-duration-fast, var(--x-motion-duration-fast, 0.1s))}:host(.x-layout-sider-light){background:var(--x-sider-bg-light, var(--x-color-bg-container, #ffffff))}:host(.x-layout-sider-light) .x-layout-sider{background:var(--x-sider-bg-light, var(--x-color-bg-container, #ffffff))}:host(.x-layout-sider-light) .x-layout-sider-children{color:var(--x-sider-color-light, var(--x-color-text, rgba(0, 0, 0, 0.88)))}:host(.x-layout-sider-light) .x-layout-sider-trigger{background:var(--x-sider-trigger-bg-light, var(--x-color-bg-container, #ffffff));color:var(--x-sider-trigger-color-light, var(--x-color-text, rgba(0, 0, 0, 0.88)))}`;
-
-const XSider = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.xCollapse = createEvent(this, "xCollapse", 7);
-    }
-    /**
-     * Whether can be collapsed.
-     * @example
-     * <x-sider collapsible></x-sider>
-     */
-    collapsible = false;
-    /**
-     * Current collapsed status.
-     * @example
-     * <x-sider collapsed></x-sider>
-     */
-    collapsed = false;
-    /**
-     * Initial collapsed status.
-     * @example
-     * <x-sider defaultCollapsed></x-sider>
-     */
-    defaultCollapsed = false;
-    /**
-     * Reverse direction of arrow, for a sider that expands from the right.
-     * @example
-     * <x-sider reverseArrow></x-sider>
-     */
-    reverseArrow = false;
-    /**
-     * Color theme of the sidebar.
-     * @example
-     * <x-sider theme="light"></x-sider>
-     */
-    theme = 'dark';
-    /**
-     * Width of the sidebar.
-     * @example
-     * <x-sider width={240}></x-sider>
-     */
-    width = 200;
-    /**
-     * Width of the collapsed sidebar.
-     * @example
-     * <x-sider collapsedWidth={64}></x-sider>
-     */
-    collapsedWidth = 80;
-    /**
-     * Specify the custom trigger, set to null to hide trigger.
-     * @example
-     * <x-sider trigger="Menu"></x-sider>
-     */
-    trigger = undefined;
-    /**
-     * Callback function, executed when the collapsed state is changed.
-     * @example
-     * <x-sider onXCollapse={(ev) => console.log(ev.detail)}></x-sider>
-     */
-    xCollapse;
-    /**
-     * Internal collapsed state synchronized with props.
-     */
-    internalCollapsed = false;
-    /**
-     * Initialize collapsed state from props.
-     * @returns void
-     * @example
-     * <x-sider defaultCollapsed></x-sider>
-     */
-    componentWillLoad() {
-        this.internalCollapsed = this.collapsed || this.defaultCollapsed;
-    }
-    collapsedChanged(newValue) {
-        this.internalCollapsed = newValue;
-    }
-    /**
-     * Toggle collapsed state and emit event.
-     *
-     * Flow:
-     * 1. Inverts `internalCollapsed`.
-     * 2. Updates prop `collapsed`.
-     * 3. Emits `xCollapse` event.
-     *
-     * @returns void
-     * @example
-     * <x-sider collapsible></x-sider>
-     */
-    toggleCollapse = () => {
-        this.internalCollapsed = !this.internalCollapsed;
-        this.collapsed = this.internalCollapsed;
-        this.xCollapse.emit(this.internalCollapsed);
-    };
-    /**
-     * Render sider with optional trigger and collapsed width.
-     *
-     * Flow:
-     * 1. Calculates effective width based on collapsed state.
-     * 2. Constructs CSS classes and styles (flex basis, min/max width).
-     * 3. Renders children content.
-     * 4. Renders trigger button (if collapsible and enabled):
-     *    - Uses custom trigger slot/text if provided.
-     *    - Otherwise renders default arrow icon based on reverseArrow.
-     *
-     * @returns JSX.Element
-     * @example
-     * <x-sider><div>Menu</div></x-sider>
-     */
-    render() {
-        const { collapsible, reverseArrow, theme, width, collapsedWidth, trigger } = this;
-        const collapsed = this.internalCollapsed;
-        const rawWidth = collapsed ? collapsedWidth : width;
-        const siderWidth = typeof rawWidth === 'number' ? `${rawWidth}px` : rawWidth;
-        const classes = {
-            'x-layout-sider': true,
-            [`x-layout-sider-${theme}`]: true,
-            'x-layout-sider-collapsed': collapsed,
-            'x-layout-sider-has-trigger': collapsible && trigger !== null,
-        };
-        const style = {
-            '--x-sider-width': siderWidth,
-            flex: `0 0 ${siderWidth}`,
-            maxWidth: siderWidth,
-            minWidth: siderWidth,
-            width: siderWidth,
-        };
-        const renderTrigger = () => {
-            if (!collapsible || trigger === null) {
-                return null;
-            }
-            if (trigger) {
-                return (h("div", { class: "x-layout-sider-trigger", onClick: this.toggleCollapse, style: { width: siderWidth } }, trigger));
-            }
-            // Default trigger icon (simple arrow)
-            const arrowIcon = collapsed
-                ? (reverseArrow ? '<' : '>')
-                : (reverseArrow ? '>' : '<');
-            return (h("div", { class: "x-layout-sider-trigger", onClick: this.toggleCollapse, style: { width: siderWidth } }, arrowIcon));
-        };
-        return (h(Host, { style: style }, h("aside", { class: classes }, h("div", { class: "x-layout-sider-children" }, h("slot", null)), renderTrigger())));
-    }
-    static get watchers() { return {
-        "collapsed": [{
-                "collapsedChanged": 0
-            }]
-    }; }
-};
-XSider.style = xSiderCss();
-
-const xSpaceCss = () => `@charset "UTF-8";:root{--x-color-primary:#1677ff;--x-color-primary-rgb:22, 119, 255;--x-color-primary-contrast:#ffffff;--x-color-primary-contrast-rgb:255, 255, 255;--x-color-primary-shade:#0958d9;--x-color-primary-tint:#4096ff;--x-color-primary-bg:#e6f4ff;--x-color-primary-bg-hover:#bae0ff;--x-color-primary-border:#91caff;--x-color-primary-border-hover:#69b1ff;--x-color-primary-hover:#4096ff;--x-color-primary-active:#0958d9;--x-color-primary-text:#1677ff;--x-color-primary-text-hover:#4096ff;--x-color-primary-text-active:#0958d9;--x-color-secondary:#3dc2ff;--x-color-secondary-rgb:61, 194, 255;--x-color-secondary-contrast:#ffffff;--x-color-secondary-contrast-rgb:255, 255, 255;--x-color-secondary-shade:#36abe0;--x-color-secondary-tint:#50c8ff;--x-color-success:#52c41a;--x-color-success-rgb:82, 196, 26;--x-color-success-contrast:#ffffff;--x-color-success-contrast-rgb:255, 255, 255;--x-color-success-shade:#389e0d;--x-color-success-tint:#73d13d;--x-color-success-bg:#f6ffed;--x-color-success-bg-hover:#d9f7be;--x-color-success-border:#b7eb8f;--x-color-success-border-hover:#95de64;--x-color-success-hover:#73d13d;--x-color-success-active:#389e0d;--x-color-success-text:#52c41a;--x-color-success-text-hover:#73d13d;--x-color-success-text-active:#389e0d;--x-color-warning:#faad14;--x-color-warning-rgb:250, 173, 20;--x-color-warning-contrast:#000000;--x-color-warning-contrast-rgb:0, 0, 0;--x-color-warning-shade:#d48806;--x-color-warning-tint:#ffc53d;--x-color-warning-bg:#fffbe6;--x-color-warning-bg-hover:#fff1b8;--x-color-warning-border:#ffe58f;--x-color-warning-border-hover:#ffd666;--x-color-warning-hover:#ffc53d;--x-color-warning-active:#d48806;--x-color-warning-text:#faad14;--x-color-warning-text-hover:#ffc53d;--x-color-warning-text-active:#d48806;--x-color-danger:#ff4d4f;--x-color-danger-rgb:255, 77, 79;--x-color-danger-contrast:#ffffff;--x-color-danger-contrast-rgb:255, 255, 255;--x-color-danger-shade:#cf1322;--x-color-danger-tint:#ff7875;--x-color-error:#ff4d4f;--x-color-error-rgb:255, 77, 79;--x-color-error-bg:#fff2f0;--x-color-error-bg-hover:#ffccc7;--x-color-error-border:#ffa39e;--x-color-error-border-hover:#ff7875;--x-color-error-hover:#ff7875;--x-color-error-active:#d9363e;--x-color-error-text:#ff4d4f;--x-color-error-text-hover:#ff7875;--x-color-error-text-active:#d9363e;--x-color-info:#1677ff;--x-color-info-rgb:22, 119, 255;--x-color-info-bg:#e6f4ff;--x-color-info-bg-hover:#bae0ff;--x-color-info-border:#91caff;--x-color-info-border-hover:#69b1ff;--x-color-info-hover:#69b1ff;--x-color-info-active:#0958d9;--x-color-info-text:#1677ff;--x-color-info-text-hover:#69b1ff;--x-color-info-text-active:#0958d9;--x-color-text:rgba(0, 0, 0, 0.88);--x-color-text-secondary:rgba(0, 0, 0, 0.65);--x-color-text-tertiary:rgba(0, 0, 0, 0.45);--x-color-text-quaternary:rgba(0, 0, 0, 0.25);--x-color-text-disabled:rgba(0, 0, 0, 0.25);--x-color-text-placeholder:rgba(0, 0, 0, 0.25);--x-color-text-heading:rgba(0, 0, 0, 0.88);--x-color-text-label:rgba(0, 0, 0, 0.65);--x-color-text-description:rgba(0, 0, 0, 0.45);--x-color-text-light-solid:#ffffff;--x-color-bg-container:#ffffff;--x-color-bg-elevated:#ffffff;--x-color-bg-layout:#f5f5f5;--x-color-bg-spotlight:rgba(0, 0, 0, 0.85);--x-color-bg-mask:rgba(0, 0, 0, 0.45);--x-color-bg-base:#ffffff;--x-color-bg-container-disabled:#f5f5f5;--x-color-bg-container-loading:rgba(255, 255, 255, 0.65);--x-color-white:#ffffff;--x-color-fill:rgba(0, 0, 0, 0.15);--x-color-fill-secondary:rgba(0, 0, 0, 0.06);--x-color-fill-tertiary:rgba(0, 0, 0, 0.04);--x-color-fill-quaternary:rgba(0, 0, 0, 0.02);--x-color-border:#d9d9d9;--x-color-border-secondary:#f0f0f0;--x-color-border-bg:#ffffff;--x-color-split:rgba(5, 5, 5, 0.06);--x-color-dark:#222428;--x-color-dark-rgb:34, 36, 40;--x-color-dark-contrast:#ffffff;--x-color-dark-contrast-rgb:255, 255, 255;--x-color-dark-shade:#1e2023;--x-color-dark-tint:#383a3e;--x-color-medium:#92949c;--x-color-medium-rgb:146, 148, 156;--x-color-medium-contrast:#ffffff;--x-color-medium-contrast-rgb:255, 255, 255;--x-color-medium-shade:#808289;--x-color-medium-tint:#9d9fa6;--x-color-light:#f4f5f8;--x-color-light-rgb:244, 245, 248;--x-color-light-contrast:#000000;--x-color-light-contrast-rgb:0, 0, 0;--x-color-light-shade:#d7d8da;--x-color-light-tint:#f5f6f9;--x-font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--x-font-family-code:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;--x-font-size:14px;--x-font-size-sm:12px;--x-font-size-lg:16px;--x-font-size-xl:20px;--x-font-size-heading-1:38px;--x-font-size-heading-2:30px;--x-font-size-heading-3:24px;--x-font-size-heading-4:20px;--x-font-size-heading-5:16px;--x-line-height:1.5714285714285714;--x-line-height-lg:1.5;--x-line-height-sm:1.6666666666666667;--x-line-height-heading-1:1.2105263157894737;--x-line-height-heading-2:1.2666666666666666;--x-line-height-heading-3:1.3333333333333333;--x-line-height-heading-4:1.4;--x-line-height-heading-5:1.5;--x-font-weight-normal:400;--x-font-weight-medium:500;--x-font-weight-semibold:600;--x-font-weight-strong:600;--x-font-size-base:14px;--x-font-size-xxl:24px;--x-line-height-base:1.5714285714285714;--x-spacing-xxs:4px;--x-spacing-xs:8px;--x-spacing-sm:12px;--x-spacing-md:16px;--x-spacing-lg:20px;--x-spacing-xl:24px;--x-spacing-xxl:32px;--x-spacing-xxxl:48px;--x-margin-xxs:4px;--x-margin-xs:8px;--x-margin-sm:12px;--x-margin-md:16px;--x-margin-lg:24px;--x-margin-xl:32px;--x-margin-xxl:48px;--x-padding-xxs:4px;--x-padding-xs:8px;--x-padding-sm:12px;--x-padding-md:16px;--x-padding-lg:24px;--x-padding-content-horizontal-lg:24px;--x-padding-content-vertical-lg:12px;--x-padding-content-horizontal:16px;--x-padding-content-vertical:12px;--x-padding-content-horizontal-sm:16px;--x-padding-content-vertical-sm:8px;--x-border-radius:6px;--x-border-radius-xs:2px;--x-border-radius-sm:4px;--x-border-radius-lg:8px;--x-border-radius-xl:12px;--x-border-radius-outer:4px;--x-border-radius-base:6px;--x-border-width:1px;--x-border-width-base:1px;--x-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-shadow-lg:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-box-shadow-popover-arrow:2px 2px 5px rgba(0, 0, 0, 0.05);--x-box-shadow-card:0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);--x-box-shadow-drawer-right:-6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-left:6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-up:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-down:0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tabs-overflow-left:inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-right:inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-top:inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-bottom:inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);--x-motion-duration-fast:0.1s;--x-motion-duration-mid:0.2s;--x-motion-duration-slow:0.3s;--x-motion-ease-in-out:cubic-bezier(0.645, 0.045, 0.355, 1);--x-motion-ease-out:cubic-bezier(0.215, 0.61, 0.355, 1);--x-motion-ease-in:cubic-bezier(0.55, 0.055, 0.675, 0.19);--x-motion-ease-out-back:cubic-bezier(0.12, 0.4, 0.29, 1.46);--x-motion-ease-in-back:cubic-bezier(0.71, -0.46, 0.88, 0.6);--x-motion-ease-in-out-circle:cubic-bezier(0.78, 0.14, 0.15, 0.86);--x-motion-ease-out-circle:cubic-bezier(0.08, 0.82, 0.17, 1);--x-motion-ease-in-circle:cubic-bezier(0.6, 0.04, 0.98, 0.34);--x-motion-ease-in-quint:cubic-bezier(0.755, 0.05, 0.855, 0.06);--x-motion-ease-out-quint:cubic-bezier(0.23, 1, 0.32, 1);--x-z-index-base:0;--x-z-index-popup-base:1000;--x-z-index-popup:1030;--x-z-index-affix:10;--x-z-index-modal:1000;--x-z-index-modal-mask:1000;--x-z-index-drawer:1000;--x-z-index-popover:1030;--x-z-index-dropdown:1050;--x-z-index-tooltip:1070;--x-z-index-notification:1080;--x-z-index-message:1090;--x-z-index-popconfirm:1060;--x-z-index-table-fixed:10;--x-opacity-loading:0.65;--x-opacity-image:1;--x-opacity-disabled:0.5;--x-control-height:32px;--x-control-height-xs:24px;--x-control-height-sm:24px;--x-control-height-lg:40px;--x-control-radio-size:16px;--x-control-checkbox-size:16px;--x-control-padding-horizontal:12px;--x-control-padding-horizontal-sm:8px;--x-control-outline-width:2px;--x-control-outline:rgba(5, 145, 255, 0.1);--x-control-item-bg-hover:rgba(0, 0, 0, 0.04);--x-control-item-bg-active:#e6f4ff;--x-control-item-bg-active-hover:#bae0ff;--x-control-item-bg-active-disabled:rgba(0, 0, 0, 0.15);--x-control-tmp-outline:rgba(0, 0, 0, 0.02);--x-color-yellow:#fadb14;--x-color-yellow-rgb:250, 219, 20;--x-font-family-base:var(--x-font-family);--x-color-link:#1677ff;--x-color-link-hover:#69b1ff;--x-color-link-active:#0958d9;--x-color-icon:rgba(0, 0, 0, 0.45);--x-color-icon-hover:rgba(0, 0, 0, 0.88);--x-color-highlight:#ff4d4f;--x-color-bg-text-hover:rgba(0, 0, 0, 0.06);--x-color-bg-text-active:rgba(0, 0, 0, 0.15);--x-screen-xs:480px;--x-screen-xs-min:480px;--x-screen-xs-max:575px;--x-screen-sm:576px;--x-screen-sm-min:576px;--x-screen-sm-max:767px;--x-screen-md:768px;--x-screen-md-min:768px;--x-screen-md-max:991px;--x-screen-lg:992px;--x-screen-lg-min:992px;--x-screen-lg-max:1199px;--x-screen-xl:1200px;--x-screen-xl-min:1200px;--x-screen-xl-max:1599px;--x-screen-xxl:1600px;--x-screen-xxl-min:1600px;--x-color-fill-content:rgba(0, 0, 0, 0.06);--x-color-fill-content-hover:rgba(0, 0, 0, 0.15);--x-color-fill-alter:rgba(0, 0, 0, 0.02);--x-scrollbar-width:12px;--x-scrollbar-track-bg:rgba(0, 0, 0, 0.04);--x-scrollbar-thumb-bg:rgba(0, 0, 0, 0.25);--x-scrollbar-thumb-bg-hover:rgba(0, 0, 0, 0.35);--x-menu-dark-bg:#001529;--x-menu-dark-item-bg:#001529;--x-menu-dark-popup-bg:#001529;--x-menu-dark-submenu-item-bg:#000c17}:host{display:var(--x-space-display, inline-flex);width:100%}.x-space{display:-ms-flexbox;display:flex;-ms-flex-direction:var(--x-space-direction, row);flex-direction:var(--x-space-direction, row);-ms-flex-wrap:var(--x-space-wrap, nowrap);flex-wrap:var(--x-space-wrap, nowrap);-ms-flex-align:var(--x-space-align, center);align-items:var(--x-space-align, center);gap:var(--x-space-gap, var(--x-spacing-xs, 8px));width:100%}`;
-
-const XSpace = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    /**
-     * Align items.
-     * @example
-     * <x-space align="center"></x-space>
-     */
-    align;
-    /**
-     * The space direction.
-     * @example
-     * <x-space direction="vertical"></x-space>
-     */
-    direction = 'horizontal';
-    /**
-     * The space size.
-     * @example
-     * <x-space size="large"></x-space>
-     */
-    size = 'small';
-    /**
-     * Auto wrap line.
-     * @example
-     * <x-space wrap></x-space>
-     */
-    wrap = false;
-    /**
-     * Set block style.
-     * @example
-     * <x-space block></x-space>
-     */
-    block = false;
-    /**
-     * Renders the Space component.
-     *
-     * Flow:
-     * 1. Destructures props: `align`, `direction`, `size`, `wrap`, `block`.
-     * 2. Computes CSS variables:
-     *    - `--x-space-align`: Maps alignment directly.
-     *    - `--x-space-direction`: Maps 'vertical'/'horizontal' to 'column'/'row'.
-     *    - `--x-space-wrap`: Controls flex-wrap.
-     *    - `--x-space-display`: Toggles between flex and inline-flex.
-     * 3. Calculates `gapSize` in pixels based on `size` prop:
-     *    - Supports predefined sizes ('small', 'middle', 'large').
-     *    - Supports explicit number values.
-     *    - (Note: Array format support is currently simplified).
-     * 4. Sets `--x-space-gap` variable.
-     *
-     * @returns JSX.Element - The host element with styling variables.
-     */
-    render() {
-        const { align, direction, size, wrap, block } = this;
-        const style = {};
-        if (align)
-            style['--x-space-align'] = align;
-        style['--x-space-direction'] = direction === 'vertical' ? 'column' : 'row';
-        style['--x-space-wrap'] = wrap ? 'wrap' : 'nowrap';
-        style['--x-space-display'] = block ? 'flex' : 'inline-flex';
-        let gapSize = 8; // small default
-        if (typeof size === 'number') {
-            gapSize = size;
-        }
-        else if (size === 'middle') {
-            gapSize = 16;
-        }
-        else if (size === 'large') {
-            gapSize = 24;
-        }
-        // Handle array size [horizontal, vertical] - simplified for now to just take first or single
-        if (Array.isArray(size)) {
-            // TODO: Handle separate row/col gap
-            gapSize = typeof size[0] === 'number' ? size[0] : 8;
-        }
-        style['--x-space-gap'] = `${gapSize}px`;
-        return (h(Host, { key: '858d52ab60afb1ce6ae25b60bf708d28df10a970', style: style }, h("div", { key: '29a9092cb2b342567ade1d7e49500394dbbc3e93', class: "x-space" }, h("slot", { key: 'd2d088eee3a4c98392003f6c85743f0304848cee' }))));
-    }
-};
-XSpace.style = xSpaceCss();
-
-const xTypographyCss = () => `@charset "UTF-8";:root{--x-color-primary:#1677ff;--x-color-primary-rgb:22, 119, 255;--x-color-primary-contrast:#ffffff;--x-color-primary-contrast-rgb:255, 255, 255;--x-color-primary-shade:#0958d9;--x-color-primary-tint:#4096ff;--x-color-primary-bg:#e6f4ff;--x-color-primary-bg-hover:#bae0ff;--x-color-primary-border:#91caff;--x-color-primary-border-hover:#69b1ff;--x-color-primary-hover:#4096ff;--x-color-primary-active:#0958d9;--x-color-primary-text:#1677ff;--x-color-primary-text-hover:#4096ff;--x-color-primary-text-active:#0958d9;--x-color-secondary:#3dc2ff;--x-color-secondary-rgb:61, 194, 255;--x-color-secondary-contrast:#ffffff;--x-color-secondary-contrast-rgb:255, 255, 255;--x-color-secondary-shade:#36abe0;--x-color-secondary-tint:#50c8ff;--x-color-success:#52c41a;--x-color-success-rgb:82, 196, 26;--x-color-success-contrast:#ffffff;--x-color-success-contrast-rgb:255, 255, 255;--x-color-success-shade:#389e0d;--x-color-success-tint:#73d13d;--x-color-success-bg:#f6ffed;--x-color-success-bg-hover:#d9f7be;--x-color-success-border:#b7eb8f;--x-color-success-border-hover:#95de64;--x-color-success-hover:#73d13d;--x-color-success-active:#389e0d;--x-color-success-text:#52c41a;--x-color-success-text-hover:#73d13d;--x-color-success-text-active:#389e0d;--x-color-warning:#faad14;--x-color-warning-rgb:250, 173, 20;--x-color-warning-contrast:#000000;--x-color-warning-contrast-rgb:0, 0, 0;--x-color-warning-shade:#d48806;--x-color-warning-tint:#ffc53d;--x-color-warning-bg:#fffbe6;--x-color-warning-bg-hover:#fff1b8;--x-color-warning-border:#ffe58f;--x-color-warning-border-hover:#ffd666;--x-color-warning-hover:#ffc53d;--x-color-warning-active:#d48806;--x-color-warning-text:#faad14;--x-color-warning-text-hover:#ffc53d;--x-color-warning-text-active:#d48806;--x-color-danger:#ff4d4f;--x-color-danger-rgb:255, 77, 79;--x-color-danger-contrast:#ffffff;--x-color-danger-contrast-rgb:255, 255, 255;--x-color-danger-shade:#cf1322;--x-color-danger-tint:#ff7875;--x-color-error:#ff4d4f;--x-color-error-rgb:255, 77, 79;--x-color-error-bg:#fff2f0;--x-color-error-bg-hover:#ffccc7;--x-color-error-border:#ffa39e;--x-color-error-border-hover:#ff7875;--x-color-error-hover:#ff7875;--x-color-error-active:#d9363e;--x-color-error-text:#ff4d4f;--x-color-error-text-hover:#ff7875;--x-color-error-text-active:#d9363e;--x-color-info:#1677ff;--x-color-info-rgb:22, 119, 255;--x-color-info-bg:#e6f4ff;--x-color-info-bg-hover:#bae0ff;--x-color-info-border:#91caff;--x-color-info-border-hover:#69b1ff;--x-color-info-hover:#69b1ff;--x-color-info-active:#0958d9;--x-color-info-text:#1677ff;--x-color-info-text-hover:#69b1ff;--x-color-info-text-active:#0958d9;--x-color-text:rgba(0, 0, 0, 0.88);--x-color-text-secondary:rgba(0, 0, 0, 0.65);--x-color-text-tertiary:rgba(0, 0, 0, 0.45);--x-color-text-quaternary:rgba(0, 0, 0, 0.25);--x-color-text-disabled:rgba(0, 0, 0, 0.25);--x-color-text-placeholder:rgba(0, 0, 0, 0.25);--x-color-text-heading:rgba(0, 0, 0, 0.88);--x-color-text-label:rgba(0, 0, 0, 0.65);--x-color-text-description:rgba(0, 0, 0, 0.45);--x-color-text-light-solid:#ffffff;--x-color-bg-container:#ffffff;--x-color-bg-elevated:#ffffff;--x-color-bg-layout:#f5f5f5;--x-color-bg-spotlight:rgba(0, 0, 0, 0.85);--x-color-bg-mask:rgba(0, 0, 0, 0.45);--x-color-bg-base:#ffffff;--x-color-bg-container-disabled:#f5f5f5;--x-color-bg-container-loading:rgba(255, 255, 255, 0.65);--x-color-white:#ffffff;--x-color-fill:rgba(0, 0, 0, 0.15);--x-color-fill-secondary:rgba(0, 0, 0, 0.06);--x-color-fill-tertiary:rgba(0, 0, 0, 0.04);--x-color-fill-quaternary:rgba(0, 0, 0, 0.02);--x-color-border:#d9d9d9;--x-color-border-secondary:#f0f0f0;--x-color-border-bg:#ffffff;--x-color-split:rgba(5, 5, 5, 0.06);--x-color-dark:#222428;--x-color-dark-rgb:34, 36, 40;--x-color-dark-contrast:#ffffff;--x-color-dark-contrast-rgb:255, 255, 255;--x-color-dark-shade:#1e2023;--x-color-dark-tint:#383a3e;--x-color-medium:#92949c;--x-color-medium-rgb:146, 148, 156;--x-color-medium-contrast:#ffffff;--x-color-medium-contrast-rgb:255, 255, 255;--x-color-medium-shade:#808289;--x-color-medium-tint:#9d9fa6;--x-color-light:#f4f5f8;--x-color-light-rgb:244, 245, 248;--x-color-light-contrast:#000000;--x-color-light-contrast-rgb:0, 0, 0;--x-color-light-shade:#d7d8da;--x-color-light-tint:#f5f6f9;--x-font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--x-font-family-code:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;--x-font-size:14px;--x-font-size-sm:12px;--x-font-size-lg:16px;--x-font-size-xl:20px;--x-font-size-heading-1:38px;--x-font-size-heading-2:30px;--x-font-size-heading-3:24px;--x-font-size-heading-4:20px;--x-font-size-heading-5:16px;--x-line-height:1.5714285714285714;--x-line-height-lg:1.5;--x-line-height-sm:1.6666666666666667;--x-line-height-heading-1:1.2105263157894737;--x-line-height-heading-2:1.2666666666666666;--x-line-height-heading-3:1.3333333333333333;--x-line-height-heading-4:1.4;--x-line-height-heading-5:1.5;--x-font-weight-normal:400;--x-font-weight-medium:500;--x-font-weight-semibold:600;--x-font-weight-strong:600;--x-font-size-base:14px;--x-font-size-xxl:24px;--x-line-height-base:1.5714285714285714;--x-spacing-xxs:4px;--x-spacing-xs:8px;--x-spacing-sm:12px;--x-spacing-md:16px;--x-spacing-lg:20px;--x-spacing-xl:24px;--x-spacing-xxl:32px;--x-spacing-xxxl:48px;--x-margin-xxs:4px;--x-margin-xs:8px;--x-margin-sm:12px;--x-margin-md:16px;--x-margin-lg:24px;--x-margin-xl:32px;--x-margin-xxl:48px;--x-padding-xxs:4px;--x-padding-xs:8px;--x-padding-sm:12px;--x-padding-md:16px;--x-padding-lg:24px;--x-padding-content-horizontal-lg:24px;--x-padding-content-vertical-lg:12px;--x-padding-content-horizontal:16px;--x-padding-content-vertical:12px;--x-padding-content-horizontal-sm:16px;--x-padding-content-vertical-sm:8px;--x-border-radius:6px;--x-border-radius-xs:2px;--x-border-radius-sm:4px;--x-border-radius-lg:8px;--x-border-radius-xl:12px;--x-border-radius-outer:4px;--x-border-radius-base:6px;--x-border-width:1px;--x-border-width-base:1px;--x-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-shadow-lg:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-box-shadow-popover-arrow:2px 2px 5px rgba(0, 0, 0, 0.05);--x-box-shadow-card:0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);--x-box-shadow-drawer-right:-6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-left:6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-up:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-down:0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tabs-overflow-left:inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-right:inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-top:inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-bottom:inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);--x-motion-duration-fast:0.1s;--x-motion-duration-mid:0.2s;--x-motion-duration-slow:0.3s;--x-motion-ease-in-out:cubic-bezier(0.645, 0.045, 0.355, 1);--x-motion-ease-out:cubic-bezier(0.215, 0.61, 0.355, 1);--x-motion-ease-in:cubic-bezier(0.55, 0.055, 0.675, 0.19);--x-motion-ease-out-back:cubic-bezier(0.12, 0.4, 0.29, 1.46);--x-motion-ease-in-back:cubic-bezier(0.71, -0.46, 0.88, 0.6);--x-motion-ease-in-out-circle:cubic-bezier(0.78, 0.14, 0.15, 0.86);--x-motion-ease-out-circle:cubic-bezier(0.08, 0.82, 0.17, 1);--x-motion-ease-in-circle:cubic-bezier(0.6, 0.04, 0.98, 0.34);--x-motion-ease-in-quint:cubic-bezier(0.755, 0.05, 0.855, 0.06);--x-motion-ease-out-quint:cubic-bezier(0.23, 1, 0.32, 1);--x-z-index-base:0;--x-z-index-popup-base:1000;--x-z-index-popup:1030;--x-z-index-affix:10;--x-z-index-modal:1000;--x-z-index-modal-mask:1000;--x-z-index-drawer:1000;--x-z-index-popover:1030;--x-z-index-dropdown:1050;--x-z-index-tooltip:1070;--x-z-index-notification:1080;--x-z-index-message:1090;--x-z-index-popconfirm:1060;--x-z-index-table-fixed:10;--x-opacity-loading:0.65;--x-opacity-image:1;--x-opacity-disabled:0.5;--x-control-height:32px;--x-control-height-xs:24px;--x-control-height-sm:24px;--x-control-height-lg:40px;--x-control-radio-size:16px;--x-control-checkbox-size:16px;--x-control-padding-horizontal:12px;--x-control-padding-horizontal-sm:8px;--x-control-outline-width:2px;--x-control-outline:rgba(5, 145, 255, 0.1);--x-control-item-bg-hover:rgba(0, 0, 0, 0.04);--x-control-item-bg-active:#e6f4ff;--x-control-item-bg-active-hover:#bae0ff;--x-control-item-bg-active-disabled:rgba(0, 0, 0, 0.15);--x-control-tmp-outline:rgba(0, 0, 0, 0.02);--x-color-yellow:#fadb14;--x-color-yellow-rgb:250, 219, 20;--x-font-family-base:var(--x-font-family);--x-color-link:#1677ff;--x-color-link-hover:#69b1ff;--x-color-link-active:#0958d9;--x-color-icon:rgba(0, 0, 0, 0.45);--x-color-icon-hover:rgba(0, 0, 0, 0.88);--x-color-highlight:#ff4d4f;--x-color-bg-text-hover:rgba(0, 0, 0, 0.06);--x-color-bg-text-active:rgba(0, 0, 0, 0.15);--x-screen-xs:480px;--x-screen-xs-min:480px;--x-screen-xs-max:575px;--x-screen-sm:576px;--x-screen-sm-min:576px;--x-screen-sm-max:767px;--x-screen-md:768px;--x-screen-md-min:768px;--x-screen-md-max:991px;--x-screen-lg:992px;--x-screen-lg-min:992px;--x-screen-lg-max:1199px;--x-screen-xl:1200px;--x-screen-xl-min:1200px;--x-screen-xl-max:1599px;--x-screen-xxl:1600px;--x-screen-xxl-min:1600px;--x-color-fill-content:rgba(0, 0, 0, 0.06);--x-color-fill-content-hover:rgba(0, 0, 0, 0.15);--x-color-fill-alter:rgba(0, 0, 0, 0.02);--x-scrollbar-width:12px;--x-scrollbar-track-bg:rgba(0, 0, 0, 0.04);--x-scrollbar-thumb-bg:rgba(0, 0, 0, 0.25);--x-scrollbar-thumb-bg-hover:rgba(0, 0, 0, 0.35);--x-menu-dark-bg:#001529;--x-menu-dark-item-bg:#001529;--x-menu-dark-popup-bg:#001529;--x-menu-dark-submenu-item-bg:#000c17}:host{display:block;color:var(--x-typography-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-size:var(--x-typography-font-size, var(--x-font-size-base, 14px));line-height:var(--x-typography-line-height, var(--x-line-height-base, 1.5714));word-wrap:break-word}.x-typography{color:var(--x-typography-color, var(--x-color-text, rgba(0, 0, 0, 0.88)))}.x-typography.x-typography-disabled{color:var(--x-typography-color-disabled, var(--x-color-text-disabled, rgba(0, 0, 0, 0.25)));cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}h1,h2,h3,h4,h5{margin-top:var(--x-typography-title-margin-top, 1.2em);margin-bottom:var(--x-typography-title-margin-bottom, 0.5em);font-weight:var(--x-typography-title-font-weight, var(--x-font-weight-semibold, 600));line-height:var(--x-typography-title-line-height, 1.35)}h1{font-size:var(--x-typography-h1-font-size, var(--x-font-size-heading-1, 38px))}h2{font-size:var(--x-typography-h2-font-size, var(--x-font-size-heading-2, 30px))}h3{font-size:var(--x-typography-h3-font-size, var(--x-font-size-heading-3, 24px))}h4{font-size:var(--x-typography-h4-font-size, var(--x-font-size-heading-4, 20px))}h5{font-size:var(--x-typography-h5-font-size, var(--x-font-size-heading-5, 16px))}a.x-typography-link{color:var(--x-typography-link-color, var(--x-color-link, #1677ff));text-decoration:none;outline:none;cursor:pointer;-webkit-transition:color var(--x-typography-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:color var(--x-typography-motion-duration, var(--x-motion-duration-mid, 0.2s))}a.x-typography-link:hover{color:var(--x-typography-link-color-hover, var(--x-color-link-hover, #69b1ff))}a.x-typography-link:active{color:var(--x-typography-link-color-active, var(--x-color-link-active, #0958d9))}mark{background-color:var(--x-typography-mark-bg, var(--x-color-warning-bg, #fffbe6));padding:0}code{margin:0 0.2em;padding:0.2em 0.4em 0.1em;font-size:85%;background:var(--x-typography-code-bg, var(--x-color-fill-tertiary, rgba(0, 0, 0, 0.04)));border:var(--x-typography-code-border-width, var(--x-border-width, 1px)) solid var(--x-typography-code-border-color, var(--x-color-border-secondary, rgba(0, 0, 0, 0.06)));border-radius:var(--x-typography-code-border-radius, var(--x-border-radius-sm, 4px));font-family:var(--x-typography-code-font-family, var(--x-font-family-code, monospace))}kbd{margin:0 0.2em;padding:0.15em 0.4em 0.1em;font-size:90%;background:var(--x-typography-kbd-bg, var(--x-color-fill-quaternary, rgba(0, 0, 0, 0.02)));border:var(--x-typography-kbd-border-width, var(--x-border-width, 1px)) solid var(--x-typography-kbd-border-color, var(--x-color-border-secondary, rgba(0, 0, 0, 0.06)));border-bottom-width:2px;border-radius:var(--x-typography-kbd-border-radius, var(--x-border-radius-sm, 4px));font-family:var(--x-typography-code-font-family, var(--x-font-family-code, monospace))}`;
-
-const XTypography = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    /**
-     * The type of typography.
-     * @example
-     * <x-typography type="title">Title</x-typography>
-     */
-    type = 'text';
-    /**
-     * Level of the title (1-5).
-     * @example
-     * <x-typography type="title" level={2}>H2</x-typography>
-     */
-    level = 1;
-    /**
-     * Disabled state.
-     * @example
-     * <x-typography disabled>Disabled text</x-typography>
-     */
-    disabled = false;
-    /**
-     * Mark text.
-     * @example
-     * <x-typography mark>Highlighted</x-typography>
-     */
-    mark = false;
-    /**
-     * Code style.
-     * @example
-     * <x-typography code>const a = 1;</x-typography>
-     */
-    code = false;
-    /**
-     * Keyboard style.
-     * @example
-     * <x-typography keyboard>Ctrl</x-typography>
-     */
-    keyboard = false;
-    /**
-     * Underline style.
-     * @example
-     * <x-typography underline>Underlined</x-typography>
-     */
-    underline = false;
-    /**
-     * Delete (strikethrough) style.
-     * @example
-     * <x-typography delete>Deleted</x-typography>
-     */
-    delete = false;
-    /**
-     * Strong (bold) style.
-     * @example
-     * <x-typography strong>Bold</x-typography>
-     */
-    strong = false;
-    /**
-     * Italic style.
-     * @example
-     * <x-typography italic>Italic</x-typography>
-     */
-    italic = false;
-    /**
-     * Href for link type.
-     * @example
-     * <x-typography type="link" href="https://example.com">Link</x-typography>
-     */
-    href;
-    /**
-     * Target for link type.
-     * @example
-     * <x-typography type="link" href="https://example.com" target="_blank">Open</x-typography>
-     */
-    target;
-    /**
-     * Render typography element and apply decoration wrappers.
-     *
-     * Flow:
-     * 1. Destructure props to access typography settings.
-     * 2. Determine the HTML tag based on the `type` prop (e.g., h1-h5 for title, div for paragraph, a for link).
-     * 3. Wrap the slot content with decoration tags (mark, code, kbd, u, del, strong, i) if corresponding props are true.
-     * 4. Apply CSS classes for styling and disabled state.
-     * 5. Render the final element with attributes.
-     *
-     * @returns JSX.Element
-     */
-    render() {
-        const { type, level, disabled, mark, code, keyboard, underline, delete: del, strong, italic, href, target } = this;
-        // Base classes for typography element.
-        const classes = {
-            'x-typography': true,
-            [`x-typography-${type}`]: true,
-            'x-typography-disabled': disabled,
-        };
-        // Select tag based on typography type.
-        let Tag = 'span';
-        if (type === 'title') {
-            Tag = `h${level}`;
-        }
-        else if (type === 'paragraph') {
-            Tag = 'div';
-        }
-        else if (type === 'link' || href) {
-            Tag = 'a';
-        }
-        // Default content from slot and apply decoration wrappers.
-        let content = h("slot", { key: '05bce1a95e6eed612afbb8aa4d69b319bb9e1548' });
-        if (mark)
-            content = h("mark", { key: '138b85fd01b2b9e31bb0e5d76451d18da536652c' }, content);
-        if (code)
-            content = h("code", { key: 'c7084c61c1ee5cad8310f55f8de0521dae3e9697' }, content);
-        if (keyboard)
-            content = h("kbd", { key: '571019489e33ad4f777324af357124ba68f44888' }, content);
-        if (underline)
-            content = h("u", { key: '9088854ca72d97b1a5c61eedbcc788ca049de147' }, content);
-        if (del)
-            content = h("del", { key: '3336e3f668cf8fa266668c4f1c220e1473f403ea' }, content);
-        if (strong)
-            content = h("strong", { key: '028028a6c56ff57e8cc20f5ee98a45c6023d7103' }, content);
-        if (italic)
-            content = h("i", { key: '73f02f0cb0c196892a8d83270d5378a25ca16df3' }, content);
-        // Add link attributes only for link types.
-        const attrs = (type === 'link' || href) ? { href, target } : {};
-        return (h(Host, { key: 'be336a90f2f693bbbecff37fffb6e75f40f62a23' }, h(Tag, { key: 'a8e2f60c78077316df7cd3edb7394ec9b55f6b80', class: classes, ...attrs }, content)));
-    }
-};
-XTypography.style = xTypographyCss();
-
-export { XCard as x_card, XCol as x_col, XContent as x_content, XFlex as x_flex, XFooter as x_footer, XHeader as x_header, XLayout as x_layout, XRow as x_row, XSegmented as x_segmented, XSider as x_sider, XSpace as x_space, XTypography as x_typography };