@xlabs-store/core 0.0.1 → 0.0.3

package/dist/cjs/x-col_11.cjs.entry.js

@@ -0,0 +1,1204 @@
+'use strict';
+
+var index = require('./index-Cy2P_ln3.js');
+
+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-text-processing:#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) {
+        index.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 (index.h(index.Host, { key: '62dabfbfdde72a344b6ac6e6265a17811e3edcef', class: classes, style: style }, index.h("slot", { key: '415a40ec5d7e90bc275547c46a53cca92a00d060' })));
+    }
+};
+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-text-processing:#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));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)));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) {
+        index.registerInstance(this, hostRef);
+        this.xScrollStart = index.createEvent(this, "xScrollStart", 7);
+        this.xScroll = index.createEvent(this, "xScroll", 3);
+        this.xScrollEnd = index.createEvent(this, "xScrollEnd", 7);
+    }
+    get el() { return index.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 (index.h(index.Host, { key: 'f4091cda400228cc7183ff2b942d8733fa8d4c9b', class: {
+                'x-content-scroll-y': this.scrollY,
+                'x-content-scroll-x': this.scrollX,
+            } }, index.h("main", { key: 'b261a2e6c96a1c89cc408fa94821150b981bc77e', class: "x-layout-content inner-scroll", ref: el => (this.scrollEl = el), onScroll: this.scrollEvents ? this.onScroll : undefined }, index.h("slot", { key: '9aa281c9218e01e6c2424056a496509fa50582aa' }))));
+    }
+};
+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-text-processing:#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) {
+        index.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 (index.h(index.Host, { key: '14edd343a4bc3d52af6675389fdb9a27f92d1f11' }, index.h(Tag, { key: 'da7ef1589c12346269af220d8d31466adfeb7dd1', class: "x-flex", style: style }, index.h("slot", { key: '261f3fa4834c746042191c05ed5dba8dcd314c00' }))));
+    }
+};
+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-text-processing:#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) {
+        index.registerInstance(this, hostRef);
+    }
+    /**
+     * Render layout footer wrapper with default slot.
+     * @returns JSX.Element
+     * @example
+     * <x-footer>
+     *   <span>Footer content</span>
+     * </x-footer>
+     */
+    render() {
+        return (index.h(index.Host, { key: '766c5266d4faacb07d956acc3b1c4d0946cb13f9' }, index.h("footer", { key: '1b0f4c58b3725f80e4bef59605f5af530ec76cad', class: "x-layout-footer" }, index.h("slot", { key: 'f980ab89799e58f459a60ba407e281fc616bbc3c' }))));
+    }
+};
+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-text-processing:#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) {
+        index.registerInstance(this, hostRef);
+    }
+    /**
+     * Render layout header wrapper with default slot.
+     * @returns JSX.Element
+     * @example
+     * <x-header>
+     *   <h1>Page Title</h1>
+     * </x-header>
+     */
+    render() {
+        return (index.h(index.Host, { key: '2df9dd5ca8af31d0a53d6c34c306883a0f28c660' }, index.h("header", { key: '7e7a8da133ec55a79f7b77884133a9028efabb69', class: "x-layout-header" }, index.h("slot", { key: 'a8f08658f2d1437c1177da61dfa56218478fd028' }))));
+    }
+};
+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-text-processing:#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) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.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;
+    watchHasSiderProp(newValue) {
+        this.hasSider = newValue;
+    }
+    /**
+     * 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 (index.h(index.Host, { key: 'a71ed881d4c39703bddc40c03f245127516576a8', class: classes }, index.h("slot", { key: '38a2c812bf5981224210530cf1560cb0638193f3' })));
+    }
+    static get watchers() { return {
+        "fixed": [{
+                "watchFixed": 0
+            }],
+        "hasSiderProp": [{
+                "watchHasSiderProp": 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-text-processing:#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) {
+        index.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 (index.h(index.Host, { key: 'd22c2dddd385511d292071b6109110b793aa0bcb', style: style }, index.h("slot", { key: 'a9096d5cff6cd9e0019bad3a02000d12b749e468' })));
+    }
+};
+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-text-processing:#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) {
+        index.registerInstance(this, hostRef);
+        this.xChange = index.createEvent(this, "xChange", 7);
+    }
+    get el() { return index.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 (index.h(index.Host, { key: '714e09eb965ed113f663e1d3c950adc6506a7f47', class: {
+                'x-segmented-host': true,
+                'x-segmented-host-block': this.block,
+            } }, index.h("div", { key: '5a7ee12fe4cb07eed56d9e906cba648a92254f1a', class: {
+                'x-segmented': true,
+                'x-segmented-block': this.block,
+                [`x-segmented-${this.size}`]: true,
+                'x-segmented-disabled': this.disabled,
+            } }, index.h("div", { key: '01d739bfbd50b1c1c785adff4e8362f10d8e3889', class: "x-segmented-group" }, index.h("div", { key: 'fea8e78aa4cfda9eafb3e8b254ac08a9368ad43d', class: "x-segmented-thumb", style: this.thumbStyle }), options.map(option => (index.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 && (index.h("span", { class: "x-segmented-item-icon" }, index.h("x-icon", { name: option.icon }))), index.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-text-processing:#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:absolute;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, var(--x-color-bg-spotlight, 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) {
+        index.registerInstance(this, hostRef);
+        this.xCollapse = index.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 (index.h("div", { class: "x-layout-sider-trigger", onClick: this.toggleCollapse, style: { width: siderWidth } }, trigger));
+            }
+            // Default trigger icon (simple arrow)
+            const arrowIcon = collapsed ? (reverseArrow ? 'keyboard_arrow_left' : 'keyboard_arrow_right') : reverseArrow ? 'keyboard_arrow_right' : 'keyboard_arrow_left';
+            return (index.h("div", { class: "x-layout-sider-trigger", onClick: this.toggleCollapse, style: { width: siderWidth } }, index.h("x-icon", { name: arrowIcon })));
+        };
+        return (index.h(index.Host, { style: style }, index.h("aside", { class: classes }, index.h("div", { class: "x-layout-sider-children" }, index.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-text-processing:#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) {
+        index.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 (index.h(index.Host, { key: '67a681628b205c19e4a38cb05dabe29b123d432d', style: style }, index.h("div", { key: 'd4eaf5d6fa382e912248c9923259bbea13e9ee18', class: "x-space" }, index.h("slot", { key: 'e71f84f099b054362e4bcaab4e329e9156d57975' }))));
+    }
+};
+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-text-processing:#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) {
+        index.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 = index.h("slot", { key: 'bf3775b29a575cc302f533e99ba8dc1aa1293609' });
+        if (mark)
+            content = index.h("mark", { key: '78f658826288cbb495b1c335931dc0f8d0899c07' }, content);
+        if (code)
+            content = index.h("code", { key: '3252651579d39d35d3c840e2ddd392b228737a2d' }, content);
+        if (keyboard)
+            content = index.h("kbd", { key: 'e90f4de121a2cd50a4df83fd7bc1d6ef39c657c6' }, content);
+        if (underline)
+            content = index.h("u", { key: '25041e47b975cba959cadd4273704fdeb98ee10a' }, content);
+        if (del)
+            content = index.h("del", { key: 'cc0d2c7b45a563fd664ce9c0b3fbdddab4fe324c' }, content);
+        if (strong)
+            content = index.h("strong", { key: '7c9dfdc3ffe95d4b12f62d0dedad7d87bba4bc13' }, content);
+        if (italic)
+            content = index.h("i", { key: '76bc07862936c829903f0f41ee9b1e20bfa29924' }, content);
+        // Add link attributes only for link types.
+        const attrs = type === 'link' || href ? { href, target } : {};
+        return (index.h(index.Host, { key: '5619fe70485007275d2aa62af58ea5b101b24ac0' }, index.h(Tag, { key: 'b489c2de1cf2c09b1822bdc8b1b7fdb2c853509a', class: classes, ...attrs }, content)));
+    }
+};
+XTypography.style = xTypographyCss();
+
+exports.x_col = XCol;
+exports.x_content = XContent;
+exports.x_flex = XFlex;
+exports.x_footer = XFooter;
+exports.x_header = XHeader;
+exports.x_layout = XLayout;
+exports.x_row = XRow;
+exports.x_segmented = XSegmented;
+exports.x_sider = XSider;
+exports.x_space = XSpace;
+exports.x_typography = XTypography;