@xlabs-store/core 0.0.1 → 0.0.2

package/dist/esm/x-drawer-content.entry.js

@@ -1,8 +1,8 @@
-import { r as registerInstance, c as createEvent, h } from './index-ig_mFsVk.js';
-import { t as translate } from './locale.service-D66tF8_2.js';
-import { g as getIcon } from './config-BPeosvTA.js';
+import { r as registerInstance, c as createEvent, h } from './index-BMTt8QT3.js';
+import { t as translate } from './locale.service-DFADJBLL.js';
+import { g as getIcon } from './config-RKpMhZmc.js';
 
-const xDrawerContentCss = () => `@charset "UTF-8";:root{--x-color-primary:#1677ff;--x-color-primary-rgb:22, 119, 255;--x-color-primary-contrast:#ffffff;--x-color-primary-contrast-rgb:255, 255, 255;--x-color-primary-shade:#0958d9;--x-color-primary-tint:#4096ff;--x-color-primary-bg:#e6f4ff;--x-color-primary-bg-hover:#bae0ff;--x-color-primary-border:#91caff;--x-color-primary-border-hover:#69b1ff;--x-color-primary-hover:#4096ff;--x-color-primary-active:#0958d9;--x-color-primary-text:#1677ff;--x-color-primary-text-hover:#4096ff;--x-color-primary-text-active:#0958d9;--x-color-secondary:#3dc2ff;--x-color-secondary-rgb:61, 194, 255;--x-color-secondary-contrast:#ffffff;--x-color-secondary-contrast-rgb:255, 255, 255;--x-color-secondary-shade:#36abe0;--x-color-secondary-tint:#50c8ff;--x-color-success:#52c41a;--x-color-success-rgb:82, 196, 26;--x-color-success-contrast:#ffffff;--x-color-success-contrast-rgb:255, 255, 255;--x-color-success-shade:#389e0d;--x-color-success-tint:#73d13d;--x-color-success-bg:#f6ffed;--x-color-success-bg-hover:#d9f7be;--x-color-success-border:#b7eb8f;--x-color-success-border-hover:#95de64;--x-color-success-hover:#73d13d;--x-color-success-active:#389e0d;--x-color-success-text:#52c41a;--x-color-success-text-hover:#73d13d;--x-color-success-text-active:#389e0d;--x-color-warning:#faad14;--x-color-warning-rgb:250, 173, 20;--x-color-warning-contrast:#000000;--x-color-warning-contrast-rgb:0, 0, 0;--x-color-warning-shade:#d48806;--x-color-warning-tint:#ffc53d;--x-color-warning-bg:#fffbe6;--x-color-warning-bg-hover:#fff1b8;--x-color-warning-border:#ffe58f;--x-color-warning-border-hover:#ffd666;--x-color-warning-hover:#ffc53d;--x-color-warning-active:#d48806;--x-color-warning-text:#faad14;--x-color-warning-text-hover:#ffc53d;--x-color-warning-text-active:#d48806;--x-color-danger:#ff4d4f;--x-color-danger-rgb:255, 77, 79;--x-color-danger-contrast:#ffffff;--x-color-danger-contrast-rgb:255, 255, 255;--x-color-danger-shade:#cf1322;--x-color-danger-tint:#ff7875;--x-color-error:#ff4d4f;--x-color-error-rgb:255, 77, 79;--x-color-error-bg:#fff2f0;--x-color-error-bg-hover:#ffccc7;--x-color-error-border:#ffa39e;--x-color-error-border-hover:#ff7875;--x-color-error-hover:#ff7875;--x-color-error-active:#d9363e;--x-color-error-text:#ff4d4f;--x-color-error-text-hover:#ff7875;--x-color-error-text-active:#d9363e;--x-color-info:#1677ff;--x-color-info-rgb:22, 119, 255;--x-color-info-bg:#e6f4ff;--x-color-info-bg-hover:#bae0ff;--x-color-info-border:#91caff;--x-color-info-border-hover:#69b1ff;--x-color-info-hover:#69b1ff;--x-color-info-active:#0958d9;--x-color-info-text:#1677ff;--x-color-info-text-hover:#69b1ff;--x-color-info-text-active:#0958d9;--x-color-text:rgba(0, 0, 0, 0.88);--x-color-text-secondary:rgba(0, 0, 0, 0.65);--x-color-text-tertiary:rgba(0, 0, 0, 0.45);--x-color-text-quaternary:rgba(0, 0, 0, 0.25);--x-color-text-disabled:rgba(0, 0, 0, 0.25);--x-color-text-placeholder:rgba(0, 0, 0, 0.25);--x-color-text-heading:rgba(0, 0, 0, 0.88);--x-color-text-label:rgba(0, 0, 0, 0.65);--x-color-text-description:rgba(0, 0, 0, 0.45);--x-color-text-light-solid:#ffffff;--x-color-bg-container:#ffffff;--x-color-bg-elevated:#ffffff;--x-color-bg-layout:#f5f5f5;--x-color-bg-spotlight:rgba(0, 0, 0, 0.85);--x-color-bg-mask:rgba(0, 0, 0, 0.45);--x-color-bg-base:#ffffff;--x-color-bg-container-disabled:#f5f5f5;--x-color-bg-container-loading:rgba(255, 255, 255, 0.65);--x-color-white:#ffffff;--x-color-fill:rgba(0, 0, 0, 0.15);--x-color-fill-secondary:rgba(0, 0, 0, 0.06);--x-color-fill-tertiary:rgba(0, 0, 0, 0.04);--x-color-fill-quaternary:rgba(0, 0, 0, 0.02);--x-color-border:#d9d9d9;--x-color-border-secondary:#f0f0f0;--x-color-border-bg:#ffffff;--x-color-split:rgba(5, 5, 5, 0.06);--x-color-dark:#222428;--x-color-dark-rgb:34, 36, 40;--x-color-dark-contrast:#ffffff;--x-color-dark-contrast-rgb:255, 255, 255;--x-color-dark-shade:#1e2023;--x-color-dark-tint:#383a3e;--x-color-medium:#92949c;--x-color-medium-rgb:146, 148, 156;--x-color-medium-contrast:#ffffff;--x-color-medium-contrast-rgb:255, 255, 255;--x-color-medium-shade:#808289;--x-color-medium-tint:#9d9fa6;--x-color-light:#f4f5f8;--x-color-light-rgb:244, 245, 248;--x-color-light-contrast:#000000;--x-color-light-contrast-rgb:0, 0, 0;--x-color-light-shade:#d7d8da;--x-color-light-tint:#f5f6f9;--x-font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--x-font-family-code:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;--x-font-size:14px;--x-font-size-sm:12px;--x-font-size-lg:16px;--x-font-size-xl:20px;--x-font-size-heading-1:38px;--x-font-size-heading-2:30px;--x-font-size-heading-3:24px;--x-font-size-heading-4:20px;--x-font-size-heading-5:16px;--x-line-height:1.5714285714285714;--x-line-height-lg:1.5;--x-line-height-sm:1.6666666666666667;--x-line-height-heading-1:1.2105263157894737;--x-line-height-heading-2:1.2666666666666666;--x-line-height-heading-3:1.3333333333333333;--x-line-height-heading-4:1.4;--x-line-height-heading-5:1.5;--x-font-weight-normal:400;--x-font-weight-medium:500;--x-font-weight-semibold:600;--x-font-weight-strong:600;--x-font-size-base:14px;--x-font-size-xxl:24px;--x-line-height-base:1.5714285714285714;--x-spacing-xxs:4px;--x-spacing-xs:8px;--x-spacing-sm:12px;--x-spacing-md:16px;--x-spacing-lg:20px;--x-spacing-xl:24px;--x-spacing-xxl:32px;--x-spacing-xxxl:48px;--x-margin-xxs:4px;--x-margin-xs:8px;--x-margin-sm:12px;--x-margin-md:16px;--x-margin-lg:24px;--x-margin-xl:32px;--x-margin-xxl:48px;--x-padding-xxs:4px;--x-padding-xs:8px;--x-padding-sm:12px;--x-padding-md:16px;--x-padding-lg:24px;--x-padding-content-horizontal-lg:24px;--x-padding-content-vertical-lg:12px;--x-padding-content-horizontal:16px;--x-padding-content-vertical:12px;--x-padding-content-horizontal-sm:16px;--x-padding-content-vertical-sm:8px;--x-border-radius:6px;--x-border-radius-xs:2px;--x-border-radius-sm:4px;--x-border-radius-lg:8px;--x-border-radius-xl:12px;--x-border-radius-outer:4px;--x-border-radius-base:6px;--x-border-width:1px;--x-border-width-base:1px;--x-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-shadow-lg:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-box-shadow-popover-arrow:2px 2px 5px rgba(0, 0, 0, 0.05);--x-box-shadow-card:0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);--x-box-shadow-drawer-right:-6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-left:6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-up:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-down:0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tabs-overflow-left:inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-right:inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-top:inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-bottom:inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);--x-motion-duration-fast:0.1s;--x-motion-duration-mid:0.2s;--x-motion-duration-slow:0.3s;--x-motion-ease-in-out:cubic-bezier(0.645, 0.045, 0.355, 1);--x-motion-ease-out:cubic-bezier(0.215, 0.61, 0.355, 1);--x-motion-ease-in:cubic-bezier(0.55, 0.055, 0.675, 0.19);--x-motion-ease-out-back:cubic-bezier(0.12, 0.4, 0.29, 1.46);--x-motion-ease-in-back:cubic-bezier(0.71, -0.46, 0.88, 0.6);--x-motion-ease-in-out-circle:cubic-bezier(0.78, 0.14, 0.15, 0.86);--x-motion-ease-out-circle:cubic-bezier(0.08, 0.82, 0.17, 1);--x-motion-ease-in-circle:cubic-bezier(0.6, 0.04, 0.98, 0.34);--x-motion-ease-in-quint:cubic-bezier(0.755, 0.05, 0.855, 0.06);--x-motion-ease-out-quint:cubic-bezier(0.23, 1, 0.32, 1);--x-z-index-base:0;--x-z-index-popup-base:1000;--x-z-index-popup:1030;--x-z-index-affix:10;--x-z-index-modal:1000;--x-z-index-modal-mask:1000;--x-z-index-drawer:1000;--x-z-index-popover:1030;--x-z-index-dropdown:1050;--x-z-index-tooltip:1070;--x-z-index-notification:1080;--x-z-index-message:1090;--x-z-index-popconfirm:1060;--x-z-index-table-fixed:10;--x-opacity-loading:0.65;--x-opacity-image:1;--x-opacity-disabled:0.5;--x-control-height:32px;--x-control-height-xs:24px;--x-control-height-sm:24px;--x-control-height-lg:40px;--x-control-radio-size:16px;--x-control-checkbox-size:16px;--x-control-padding-horizontal:12px;--x-control-padding-horizontal-sm:8px;--x-control-outline-width:2px;--x-control-outline:rgba(5, 145, 255, 0.1);--x-control-item-bg-hover:rgba(0, 0, 0, 0.04);--x-control-item-bg-active:#e6f4ff;--x-control-item-bg-active-hover:#bae0ff;--x-control-item-bg-active-disabled:rgba(0, 0, 0, 0.15);--x-control-tmp-outline:rgba(0, 0, 0, 0.02);--x-color-yellow:#fadb14;--x-color-yellow-rgb:250, 219, 20;--x-font-family-base:var(--x-font-family);--x-color-link:#1677ff;--x-color-link-hover:#69b1ff;--x-color-link-active:#0958d9;--x-color-icon:rgba(0, 0, 0, 0.45);--x-color-icon-hover:rgba(0, 0, 0, 0.88);--x-color-highlight:#ff4d4f;--x-color-bg-text-hover:rgba(0, 0, 0, 0.06);--x-color-bg-text-active:rgba(0, 0, 0, 0.15);--x-screen-xs:480px;--x-screen-xs-min:480px;--x-screen-xs-max:575px;--x-screen-sm:576px;--x-screen-sm-min:576px;--x-screen-sm-max:767px;--x-screen-md:768px;--x-screen-md-min:768px;--x-screen-md-max:991px;--x-screen-lg:992px;--x-screen-lg-min:992px;--x-screen-lg-max:1199px;--x-screen-xl:1200px;--x-screen-xl-min:1200px;--x-screen-xl-max:1599px;--x-screen-xxl:1600px;--x-screen-xxl-min:1600px;--x-color-fill-content:rgba(0, 0, 0, 0.06);--x-color-fill-content-hover:rgba(0, 0, 0, 0.15);--x-color-fill-alter:rgba(0, 0, 0, 0.02);--x-scrollbar-width:12px;--x-scrollbar-track-bg:rgba(0, 0, 0, 0.04);--x-scrollbar-thumb-bg:rgba(0, 0, 0, 0.25);--x-scrollbar-thumb-bg-hover:rgba(0, 0, 0, 0.35);--x-menu-dark-bg:#001529;--x-menu-dark-item-bg:#001529;--x-menu-dark-popup-bg:#001529;--x-menu-dark-submenu-item-bg:#000c17}.x-drawer-content-root{position:fixed;inset:0;width:100%;height:0;z-index:var(--x-drawer-z-index, var(--x-z-index-drawer, 1000));overflow:hidden;pointer-events:none;font-family:var(--x-drawer-font-family, var(--x-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif))}.x-drawer-content-root.x-drawer-open{height:100%;pointer-events:auto}.x-drawer-content-root.x-drawer-open .x-drawer-mask{opacity:1;pointer-events:auto}.x-drawer-content-root.x-drawer-open .x-drawer-content-wrapper{-webkit-transform:translate(0, 0) !important;transform:translate(0, 0) !important}.x-drawer-mask{position:absolute;inset:0;width:100%;height:100%;background-color:var(--x-drawer-mask-bg, var(--x-color-bg-mask, rgba(0, 0, 0, 0.45)));opacity:0;-webkit-transition:opacity var(--x-drawer-motion-duration, var(--x-motion-duration-slow, 0.3s));transition:opacity var(--x-drawer-motion-duration, var(--x-motion-duration-slow, 0.3s));pointer-events:none}.x-drawer-content-wrapper{position:absolute;background:var(--x-drawer-bg, var(--x-color-bg-container, #ffffff));-webkit-transition:-webkit-transform var(--x-drawer-motion-duration, var(--x-motion-duration-slow, 0.3s)) var(--x-drawer-motion-ease, var(--x-motion-ease-in-out, cubic-bezier(0.7, 0.3, 0.1, 1)));transition:-webkit-transform var(--x-drawer-motion-duration, var(--x-motion-duration-slow, 0.3s)) var(--x-drawer-motion-ease, var(--x-motion-ease-in-out, cubic-bezier(0.7, 0.3, 0.1, 1)));transition:transform var(--x-drawer-motion-duration, var(--x-motion-duration-slow, 0.3s)) var(--x-drawer-motion-ease, var(--x-motion-ease-in-out, cubic-bezier(0.7, 0.3, 0.1, 1)));transition:transform var(--x-drawer-motion-duration, var(--x-motion-duration-slow, 0.3s)) var(--x-drawer-motion-ease, var(--x-motion-ease-in-out, cubic-bezier(0.7, 0.3, 0.1, 1))), -webkit-transform var(--x-drawer-motion-duration, var(--x-motion-duration-slow, 0.3s)) var(--x-drawer-motion-ease, var(--x-motion-ease-in-out, cubic-bezier(0.7, 0.3, 0.1, 1)));-webkit-box-shadow:var(--x-drawer-shadow, var(--x-box-shadow-drawer-right, -6px 0 16px 0 rgba(0, 0, 0, 0.08)));box-shadow:var(--x-drawer-shadow, var(--x-box-shadow-drawer-right, -6px 0 16px 0 rgba(0, 0, 0, 0.08)));display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.x-drawer-right .x-drawer-content-wrapper{top:0;right:0;height:100%;-webkit-transform:translateX(100%);transform:translateX(100%)}.x-drawer-left .x-drawer-content-wrapper{top:0;left:0;height:100%;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.x-drawer-top .x-drawer-content-wrapper{top:0;left:0;width:100%;-webkit-transform:translateY(-100%);transform:translateY(-100%)}.x-drawer-bottom .x-drawer-content-wrapper{bottom:0;left:0;width:100%;-webkit-transform:translateY(100%);transform:translateY(100%)}.x-drawer-content{width:100%;height:100%;overflow:hidden;background:var(--x-drawer-bg, var(--x-color-bg-container, #ffffff));border:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.x-drawer-wrapper-body{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex:1;flex:1;width:100%;height:100%;overflow:hidden}.x-drawer-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;padding:var(--x-drawer-header-padding-block, var(--x-spacing-md, 16px)) var(--x-drawer-header-padding-inline, var(--x-spacing-xl, 24px));border-bottom:var(--x-drawer-border-width, var(--x-border-width-base, 1px)) solid var(--x-drawer-border-color, var(--x-color-border-secondary, #f0f0f0));background:var(--x-drawer-bg, var(--x-color-bg-container, #ffffff))}.x-drawer-header-title{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex:1;flex:1;min-width:0}.x-drawer-title{margin:0;color:var(--x-drawer-title-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-weight:var(--x-drawer-title-font-weight, var(--x-font-weight-semibold, 600));font-size:var(--x-drawer-title-font-size, var(--x-font-size-lg, 16px));line-height:var(--x-drawer-title-line-height, var(--x-line-height-lg, 1.5));-ms-flex:1;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.x-drawer-title-slot-container{-ms-flex:1;flex:1}.x-drawer-close{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:var(--x-drawer-close-size, var(--x-font-size-xl, 20px));height:var(--x-drawer-close-size, var(--x-font-size-xl, 20px));-webkit-margin-end:var(--x-drawer-close-margin-end, 12px);margin-inline-end:var(--x-drawer-close-margin-end, 12px);padding:0;color:var(--x-drawer-close-color, var(--x-color-text-tertiary, rgba(0, 0, 0, 0.45)));background:transparent;border:0;outline:0;cursor:pointer;-webkit-transition:color var(--x-drawer-motion-duration-mid, var(--x-motion-duration-mid, 0.2s));transition:color var(--x-drawer-motion-duration-mid, var(--x-motion-duration-mid, 0.2s));font-size:var(--x-drawer-close-font-size, 16px)}.x-drawer-close:hover{color:var(--x-drawer-close-color-hover, var(--x-color-text-secondary, rgba(0, 0, 0, 0.65)))}.x-drawer-extra{-ms-flex:none;flex:none}.x-drawer-body{-ms-flex:1;flex:1;min-width:0;min-height:0;padding:var(--x-drawer-body-padding, var(--x-spacing-xl, 24px));overflow:auto;line-height:var(--x-drawer-body-line-height, var(--x-line-height-base, 1.5714285714));font-size:var(--x-drawer-body-font-size, var(--x-font-size-base, 14px));word-wrap:break-word}.x-drawer-footer{-ms-flex:none;flex:none;padding:var(--x-drawer-footer-padding-block, 10px) var(--x-drawer-footer-padding-inline, 16px);border-top:var(--x-drawer-border-width, var(--x-border-width-base, 1px)) solid var(--x-drawer-border-color, var(--x-color-border-secondary, #f0f0f0));background:var(--x-drawer-bg, var(--x-color-bg-container, #ffffff))}`;
+const xDrawerContentCss = () => `@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}.x-drawer-content-root{position:fixed;inset:0;width:100%;height:0;z-index:var(--x-drawer-z-index, var(--x-z-index-drawer, 1000));overflow:hidden;pointer-events:none;font-family:var(--x-drawer-font-family, var(--x-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif))}.x-drawer-content-root.x-drawer-open{height:100%;pointer-events:auto}.x-drawer-content-root.x-drawer-open .x-drawer-mask{opacity:1;pointer-events:auto}.x-drawer-content-root.x-drawer-open .x-drawer-content-wrapper{-webkit-transform:translate(0, 0) !important;transform:translate(0, 0) !important}.x-drawer-mask{position:absolute;inset:0;width:100%;height:100%;background-color:var(--x-drawer-mask-bg, var(--x-color-bg-mask, rgba(0, 0, 0, 0.45)));opacity:0;-webkit-transition:opacity var(--x-drawer-motion-duration, var(--x-motion-duration-slow, 0.3s));transition:opacity var(--x-drawer-motion-duration, var(--x-motion-duration-slow, 0.3s));pointer-events:none}.x-drawer-content-wrapper{position:absolute;background:var(--x-drawer-bg, var(--x-color-bg-container, #ffffff));-webkit-transition:-webkit-transform var(--x-drawer-motion-duration, var(--x-motion-duration-slow, 0.3s)) var(--x-drawer-motion-ease, var(--x-motion-ease-in-out, cubic-bezier(0.7, 0.3, 0.1, 1)));transition:-webkit-transform var(--x-drawer-motion-duration, var(--x-motion-duration-slow, 0.3s)) var(--x-drawer-motion-ease, var(--x-motion-ease-in-out, cubic-bezier(0.7, 0.3, 0.1, 1)));transition:transform var(--x-drawer-motion-duration, var(--x-motion-duration-slow, 0.3s)) var(--x-drawer-motion-ease, var(--x-motion-ease-in-out, cubic-bezier(0.7, 0.3, 0.1, 1)));transition:transform var(--x-drawer-motion-duration, var(--x-motion-duration-slow, 0.3s)) var(--x-drawer-motion-ease, var(--x-motion-ease-in-out, cubic-bezier(0.7, 0.3, 0.1, 1))), -webkit-transform var(--x-drawer-motion-duration, var(--x-motion-duration-slow, 0.3s)) var(--x-drawer-motion-ease, var(--x-motion-ease-in-out, cubic-bezier(0.7, 0.3, 0.1, 1)));-webkit-box-shadow:var(--x-drawer-shadow, var(--x-box-shadow-drawer-right, -6px 0 16px 0 rgba(0, 0, 0, 0.08)));box-shadow:var(--x-drawer-shadow, var(--x-box-shadow-drawer-right, -6px 0 16px 0 rgba(0, 0, 0, 0.08)));display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.x-drawer-right .x-drawer-content-wrapper{top:0;right:0;height:100%;-webkit-transform:translateX(100%);transform:translateX(100%)}.x-drawer-left .x-drawer-content-wrapper{top:0;left:0;height:100%;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.x-drawer-top .x-drawer-content-wrapper{top:0;left:0;width:100%;-webkit-transform:translateY(-100%);transform:translateY(-100%)}.x-drawer-bottom .x-drawer-content-wrapper{bottom:0;left:0;width:100%;-webkit-transform:translateY(100%);transform:translateY(100%)}.x-drawer-content{width:100%;height:100%;overflow:hidden;background:var(--x-drawer-bg, var(--x-color-bg-container, #ffffff));border:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.x-drawer-wrapper-body{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex:1;flex:1;width:100%;height:100%;overflow:hidden}.x-drawer-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;padding:var(--x-drawer-header-padding-block, var(--x-spacing-md, 16px)) var(--x-drawer-header-padding-inline, var(--x-spacing-xl, 24px));border-bottom:var(--x-drawer-border-width, var(--x-border-width-base, 1px)) solid var(--x-drawer-border-color, var(--x-color-border-secondary, #f0f0f0));background:var(--x-drawer-bg, var(--x-color-bg-container, #ffffff))}.x-drawer-header-title{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex:1;flex:1;min-width:0}.x-drawer-title{margin:0;color:var(--x-drawer-title-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-weight:var(--x-drawer-title-font-weight, var(--x-font-weight-semibold, 600));font-size:var(--x-drawer-title-font-size, var(--x-font-size-lg, 16px));line-height:var(--x-drawer-title-line-height, var(--x-line-height-lg, 1.5));-ms-flex:1;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.x-drawer-title-slot-container{-ms-flex:1;flex:1}.x-drawer-close{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:var(--x-drawer-close-size, var(--x-font-size-xl, 20px));height:var(--x-drawer-close-size, var(--x-font-size-xl, 20px));-webkit-margin-end:var(--x-drawer-close-margin-end, 12px);margin-inline-end:var(--x-drawer-close-margin-end, 12px);padding:0;color:var(--x-drawer-close-color, var(--x-color-text-tertiary, rgba(0, 0, 0, 0.45)));background:transparent;border:0;outline:0;cursor:pointer;-webkit-transition:color var(--x-drawer-motion-duration-mid, var(--x-motion-duration-mid, 0.2s));transition:color var(--x-drawer-motion-duration-mid, var(--x-motion-duration-mid, 0.2s));font-size:var(--x-drawer-close-font-size, 16px)}.x-drawer-close:hover{color:var(--x-drawer-close-color-hover, var(--x-color-text-secondary, rgba(0, 0, 0, 0.65)))}.x-drawer-extra{-ms-flex:none;flex:none}.x-drawer-body{-ms-flex:1;flex:1;min-width:0;min-height:0;padding:var(--x-drawer-body-padding, var(--x-spacing-xl, 24px));overflow:auto;line-height:var(--x-drawer-body-line-height, var(--x-line-height-base, 1.5714285714));font-size:var(--x-drawer-body-font-size, var(--x-font-size-base, 14px));word-wrap:break-word}.x-drawer-footer{-ms-flex:none;flex:none;padding:var(--x-drawer-footer-padding-block, 10px) var(--x-drawer-footer-padding-inline, 16px);border-top:var(--x-drawer-border-width, var(--x-border-width-base, 1px)) solid var(--x-drawer-border-color, var(--x-color-border-secondary, #f0f0f0));background:var(--x-drawer-bg, var(--x-color-bg-container, #ffffff))}`;
 
 const XDrawerContent = class {
     constructor(hostRef) {
@@ -159,7 +159,7 @@ const XDrawerContent = class {
         const isHorizontal = this.placement === 'left' || this.placement === 'right';
         const isVertical = this.placement === 'top' || this.placement === 'bottom';
         const wrapperStyle = {
-            zIndex: this.zIndex.toString()
+            zIndex: this.zIndex.toString(),
         };
         if (isHorizontal) {
             if (this.size === 'large') {
@@ -177,12 +177,12 @@ const XDrawerContent = class {
                 wrapperStyle.height = typeof this.height === 'number' ? `${this.height}px` : this.height;
             }
         }
-        return (h("div", { key: '9bc1da305bc7864c081a8750119915c253a08577', class: {
+        return (h("div", { key: '200898650fb08063a53685785dfd0f228ac63543', class: {
                 'x-drawer-content-root': true,
                 'x-drawer-open': this.animatedOpen,
                 [`x-drawer-${this.placement}`]: true,
-                [`x-drawer-${this.size}`]: true
-            }, style: { zIndex: this.zIndex.toString() } }, this.mask && (h("div", { key: '32357867d64e5fab4ae6160e643d17c5d6418f03', class: "x-drawer-mask", onClick: this.handleMaskClick })), h("div", { key: '71fa2484467da96b60f92cd3f5cafa80624ae0f9', class: "x-drawer-content-wrapper", style: wrapperStyle }, h("div", { key: '643bde857e0fb88d9641eed6b5030af7db09f85e', class: "x-drawer-content" }, h("div", { key: 'b5dadf8077a2870ad10d017a352a2d38abb5338a', class: "x-drawer-wrapper-body" }, (this.drawerTitle || this.closable || this.extraContent) && (h("div", { key: '42eede558d8ab5073d3492bdbcd2022366a1bf38', class: "x-drawer-header" }, h("div", { key: '8467cc77c15c9f3559ab25aac7c455e7550db86b', class: "x-drawer-header-title" }, this.closable && (h("button", { key: '0d9dbb8e6710353a2061f8dda666d75091b07a22', class: "x-drawer-close", onClick: this.handleClose, "aria-label": translate('Drawer.close', {}, 'Close') }, h("x-icon", { key: '2633415133911e2d9e6b822d39ab8a6c8537aada', name: getIcon('close') }))), this.drawerTitle && (h("div", { key: '5fe7ece0ec1be9fd0a53aabeb3d60acb9eb54d11', class: "x-drawer-title" }, this.drawerTitle)), this.titleContent && (h("div", { key: '2857fbc547da07fc8134c2b8e87ee67a3809e95c', class: "x-drawer-title", innerHTML: this.titleContent }))), this.extraContent && (h("div", { key: 'e43e0264b362d6c57a48d0e88d1197bae0f3a0f8', class: "x-drawer-extra", innerHTML: this.extraContent })))), h("div", { key: '68f409491486ff98eaca4471957c34af826bb734', class: "x-drawer-body", innerHTML: this.bodyContent }), this.footerContent && (h("div", { key: '2213f2a69ee55635066e544d0b47ec29ca294a09', class: "x-drawer-footer", innerHTML: this.footerContent })))))));
+                [`x-drawer-${this.size}`]: true,
+            }, style: { zIndex: this.zIndex.toString() } }, this.mask && h("div", { key: 'f3d8620a78cac7546b5266eca3daa11988fb1989', class: "x-drawer-mask", onClick: this.handleMaskClick }), h("div", { key: '28baba14abe60fb3bb9b55412e370e333aa82d32', class: "x-drawer-content-wrapper", style: wrapperStyle }, h("div", { key: 'b0e834e38323e64df41e518ac62167425fae7b5c', class: "x-drawer-content" }, h("div", { key: '3bd526e409ba818e16ca65e1be20ef55ea4340c7', class: "x-drawer-wrapper-body" }, (this.drawerTitle || this.closable || this.extraContent) && (h("div", { key: 'd4ac40383b15e485a7f691211fd56a304ddc1c30', class: "x-drawer-header" }, h("div", { key: '9d0d8983a436d92adbd909cef5b8ab255c42d3fb', class: "x-drawer-header-title" }, this.closable && (h("button", { key: '27f5d5342d59394e8077582774087fa0a679d8f9', class: "x-drawer-close", onClick: this.handleClose, "aria-label": translate('Drawer.close', {}, 'Close') }, h("x-icon", { key: 'b94e36c04d808cc7855aa5a6b1ab2c869cc2d3fe', name: getIcon('close') }))), this.drawerTitle && h("div", { key: '5bc1f8883a12b5f3362414efbc87736bcd949354', class: "x-drawer-title" }, this.drawerTitle), this.titleContent && h("div", { key: '0f41e94123d15627c3fb95cfc6686ffe08caea94', class: "x-drawer-title", innerHTML: this.titleContent })), this.extraContent && h("div", { key: 'e65f359fb76b442efe1cde8129c8479d24d8bfef', class: "x-drawer-extra", innerHTML: this.extraContent }))), h("div", { key: '8fbe55f53dcc4ecbdaa55fe53d8cc785de45952e', class: "x-drawer-body", innerHTML: this.bodyContent }), this.footerContent && h("div", { key: 'e651e8f51be0795082262dc43959d21bad04d5f3', class: "x-drawer-footer", innerHTML: this.footerContent }))))));
     }
     static get watchers() { return {
         "open": [{

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

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-ig_mFsVk.js';
-import { P as PortalController } from './portal-controller-COpzIi1n.js';
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-BMTt8QT3.js';
+import { P as PortalController } from './portal-controller-DM8AggMt.js';
 
-const xDrawerCss = () => `@charset "UTF-8";:root{--x-color-primary:#1677ff;--x-color-primary-rgb:22, 119, 255;--x-color-primary-contrast:#ffffff;--x-color-primary-contrast-rgb:255, 255, 255;--x-color-primary-shade:#0958d9;--x-color-primary-tint:#4096ff;--x-color-primary-bg:#e6f4ff;--x-color-primary-bg-hover:#bae0ff;--x-color-primary-border:#91caff;--x-color-primary-border-hover:#69b1ff;--x-color-primary-hover:#4096ff;--x-color-primary-active:#0958d9;--x-color-primary-text:#1677ff;--x-color-primary-text-hover:#4096ff;--x-color-primary-text-active:#0958d9;--x-color-secondary:#3dc2ff;--x-color-secondary-rgb:61, 194, 255;--x-color-secondary-contrast:#ffffff;--x-color-secondary-contrast-rgb:255, 255, 255;--x-color-secondary-shade:#36abe0;--x-color-secondary-tint:#50c8ff;--x-color-success:#52c41a;--x-color-success-rgb:82, 196, 26;--x-color-success-contrast:#ffffff;--x-color-success-contrast-rgb:255, 255, 255;--x-color-success-shade:#389e0d;--x-color-success-tint:#73d13d;--x-color-success-bg:#f6ffed;--x-color-success-bg-hover:#d9f7be;--x-color-success-border:#b7eb8f;--x-color-success-border-hover:#95de64;--x-color-success-hover:#73d13d;--x-color-success-active:#389e0d;--x-color-success-text:#52c41a;--x-color-success-text-hover:#73d13d;--x-color-success-text-active:#389e0d;--x-color-warning:#faad14;--x-color-warning-rgb:250, 173, 20;--x-color-warning-contrast:#000000;--x-color-warning-contrast-rgb:0, 0, 0;--x-color-warning-shade:#d48806;--x-color-warning-tint:#ffc53d;--x-color-warning-bg:#fffbe6;--x-color-warning-bg-hover:#fff1b8;--x-color-warning-border:#ffe58f;--x-color-warning-border-hover:#ffd666;--x-color-warning-hover:#ffc53d;--x-color-warning-active:#d48806;--x-color-warning-text:#faad14;--x-color-warning-text-hover:#ffc53d;--x-color-warning-text-active:#d48806;--x-color-danger:#ff4d4f;--x-color-danger-rgb:255, 77, 79;--x-color-danger-contrast:#ffffff;--x-color-danger-contrast-rgb:255, 255, 255;--x-color-danger-shade:#cf1322;--x-color-danger-tint:#ff7875;--x-color-error:#ff4d4f;--x-color-error-rgb:255, 77, 79;--x-color-error-bg:#fff2f0;--x-color-error-bg-hover:#ffccc7;--x-color-error-border:#ffa39e;--x-color-error-border-hover:#ff7875;--x-color-error-hover:#ff7875;--x-color-error-active:#d9363e;--x-color-error-text:#ff4d4f;--x-color-error-text-hover:#ff7875;--x-color-error-text-active:#d9363e;--x-color-info:#1677ff;--x-color-info-rgb:22, 119, 255;--x-color-info-bg:#e6f4ff;--x-color-info-bg-hover:#bae0ff;--x-color-info-border:#91caff;--x-color-info-border-hover:#69b1ff;--x-color-info-hover:#69b1ff;--x-color-info-active:#0958d9;--x-color-info-text:#1677ff;--x-color-info-text-hover:#69b1ff;--x-color-info-text-active:#0958d9;--x-color-text:rgba(0, 0, 0, 0.88);--x-color-text-secondary:rgba(0, 0, 0, 0.65);--x-color-text-tertiary:rgba(0, 0, 0, 0.45);--x-color-text-quaternary:rgba(0, 0, 0, 0.25);--x-color-text-disabled:rgba(0, 0, 0, 0.25);--x-color-text-placeholder:rgba(0, 0, 0, 0.25);--x-color-text-heading:rgba(0, 0, 0, 0.88);--x-color-text-label:rgba(0, 0, 0, 0.65);--x-color-text-description:rgba(0, 0, 0, 0.45);--x-color-text-light-solid:#ffffff;--x-color-bg-container:#ffffff;--x-color-bg-elevated:#ffffff;--x-color-bg-layout:#f5f5f5;--x-color-bg-spotlight:rgba(0, 0, 0, 0.85);--x-color-bg-mask:rgba(0, 0, 0, 0.45);--x-color-bg-base:#ffffff;--x-color-bg-container-disabled:#f5f5f5;--x-color-bg-container-loading:rgba(255, 255, 255, 0.65);--x-color-white:#ffffff;--x-color-fill:rgba(0, 0, 0, 0.15);--x-color-fill-secondary:rgba(0, 0, 0, 0.06);--x-color-fill-tertiary:rgba(0, 0, 0, 0.04);--x-color-fill-quaternary:rgba(0, 0, 0, 0.02);--x-color-border:#d9d9d9;--x-color-border-secondary:#f0f0f0;--x-color-border-bg:#ffffff;--x-color-split:rgba(5, 5, 5, 0.06);--x-color-dark:#222428;--x-color-dark-rgb:34, 36, 40;--x-color-dark-contrast:#ffffff;--x-color-dark-contrast-rgb:255, 255, 255;--x-color-dark-shade:#1e2023;--x-color-dark-tint:#383a3e;--x-color-medium:#92949c;--x-color-medium-rgb:146, 148, 156;--x-color-medium-contrast:#ffffff;--x-color-medium-contrast-rgb:255, 255, 255;--x-color-medium-shade:#808289;--x-color-medium-tint:#9d9fa6;--x-color-light:#f4f5f8;--x-color-light-rgb:244, 245, 248;--x-color-light-contrast:#000000;--x-color-light-contrast-rgb:0, 0, 0;--x-color-light-shade:#d7d8da;--x-color-light-tint:#f5f6f9;--x-font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--x-font-family-code:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;--x-font-size:14px;--x-font-size-sm:12px;--x-font-size-lg:16px;--x-font-size-xl:20px;--x-font-size-heading-1:38px;--x-font-size-heading-2:30px;--x-font-size-heading-3:24px;--x-font-size-heading-4:20px;--x-font-size-heading-5:16px;--x-line-height:1.5714285714285714;--x-line-height-lg:1.5;--x-line-height-sm:1.6666666666666667;--x-line-height-heading-1:1.2105263157894737;--x-line-height-heading-2:1.2666666666666666;--x-line-height-heading-3:1.3333333333333333;--x-line-height-heading-4:1.4;--x-line-height-heading-5:1.5;--x-font-weight-normal:400;--x-font-weight-medium:500;--x-font-weight-semibold:600;--x-font-weight-strong:600;--x-font-size-base:14px;--x-font-size-xxl:24px;--x-line-height-base:1.5714285714285714;--x-spacing-xxs:4px;--x-spacing-xs:8px;--x-spacing-sm:12px;--x-spacing-md:16px;--x-spacing-lg:20px;--x-spacing-xl:24px;--x-spacing-xxl:32px;--x-spacing-xxxl:48px;--x-margin-xxs:4px;--x-margin-xs:8px;--x-margin-sm:12px;--x-margin-md:16px;--x-margin-lg:24px;--x-margin-xl:32px;--x-margin-xxl:48px;--x-padding-xxs:4px;--x-padding-xs:8px;--x-padding-sm:12px;--x-padding-md:16px;--x-padding-lg:24px;--x-padding-content-horizontal-lg:24px;--x-padding-content-vertical-lg:12px;--x-padding-content-horizontal:16px;--x-padding-content-vertical:12px;--x-padding-content-horizontal-sm:16px;--x-padding-content-vertical-sm:8px;--x-border-radius:6px;--x-border-radius-xs:2px;--x-border-radius-sm:4px;--x-border-radius-lg:8px;--x-border-radius-xl:12px;--x-border-radius-outer:4px;--x-border-radius-base:6px;--x-border-width:1px;--x-border-width-base:1px;--x-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-shadow-lg:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-box-shadow-popover-arrow:2px 2px 5px rgba(0, 0, 0, 0.05);--x-box-shadow-card:0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);--x-box-shadow-drawer-right:-6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-left:6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-up:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-down:0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tabs-overflow-left:inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-right:inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-top:inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-bottom:inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);--x-motion-duration-fast:0.1s;--x-motion-duration-mid:0.2s;--x-motion-duration-slow:0.3s;--x-motion-ease-in-out:cubic-bezier(0.645, 0.045, 0.355, 1);--x-motion-ease-out:cubic-bezier(0.215, 0.61, 0.355, 1);--x-motion-ease-in:cubic-bezier(0.55, 0.055, 0.675, 0.19);--x-motion-ease-out-back:cubic-bezier(0.12, 0.4, 0.29, 1.46);--x-motion-ease-in-back:cubic-bezier(0.71, -0.46, 0.88, 0.6);--x-motion-ease-in-out-circle:cubic-bezier(0.78, 0.14, 0.15, 0.86);--x-motion-ease-out-circle:cubic-bezier(0.08, 0.82, 0.17, 1);--x-motion-ease-in-circle:cubic-bezier(0.6, 0.04, 0.98, 0.34);--x-motion-ease-in-quint:cubic-bezier(0.755, 0.05, 0.855, 0.06);--x-motion-ease-out-quint:cubic-bezier(0.23, 1, 0.32, 1);--x-z-index-base:0;--x-z-index-popup-base:1000;--x-z-index-popup:1030;--x-z-index-affix:10;--x-z-index-modal:1000;--x-z-index-modal-mask:1000;--x-z-index-drawer:1000;--x-z-index-popover:1030;--x-z-index-dropdown:1050;--x-z-index-tooltip:1070;--x-z-index-notification:1080;--x-z-index-message:1090;--x-z-index-popconfirm:1060;--x-z-index-table-fixed:10;--x-opacity-loading:0.65;--x-opacity-image:1;--x-opacity-disabled:0.5;--x-control-height:32px;--x-control-height-xs:24px;--x-control-height-sm:24px;--x-control-height-lg:40px;--x-control-radio-size:16px;--x-control-checkbox-size:16px;--x-control-padding-horizontal:12px;--x-control-padding-horizontal-sm:8px;--x-control-outline-width:2px;--x-control-outline:rgba(5, 145, 255, 0.1);--x-control-item-bg-hover:rgba(0, 0, 0, 0.04);--x-control-item-bg-active:#e6f4ff;--x-control-item-bg-active-hover:#bae0ff;--x-control-item-bg-active-disabled:rgba(0, 0, 0, 0.15);--x-control-tmp-outline:rgba(0, 0, 0, 0.02);--x-color-yellow:#fadb14;--x-color-yellow-rgb:250, 219, 20;--x-font-family-base:var(--x-font-family);--x-color-link:#1677ff;--x-color-link-hover:#69b1ff;--x-color-link-active:#0958d9;--x-color-icon:rgba(0, 0, 0, 0.45);--x-color-icon-hover:rgba(0, 0, 0, 0.88);--x-color-highlight:#ff4d4f;--x-color-bg-text-hover:rgba(0, 0, 0, 0.06);--x-color-bg-text-active:rgba(0, 0, 0, 0.15);--x-screen-xs:480px;--x-screen-xs-min:480px;--x-screen-xs-max:575px;--x-screen-sm:576px;--x-screen-sm-min:576px;--x-screen-sm-max:767px;--x-screen-md:768px;--x-screen-md-min:768px;--x-screen-md-max:991px;--x-screen-lg:992px;--x-screen-lg-min:992px;--x-screen-lg-max:1199px;--x-screen-xl:1200px;--x-screen-xl-min:1200px;--x-screen-xl-max:1599px;--x-screen-xxl:1600px;--x-screen-xxl-min:1600px;--x-color-fill-content:rgba(0, 0, 0, 0.06);--x-color-fill-content-hover:rgba(0, 0, 0, 0.15);--x-color-fill-alter:rgba(0, 0, 0, 0.02);--x-scrollbar-width:12px;--x-scrollbar-track-bg:rgba(0, 0, 0, 0.04);--x-scrollbar-thumb-bg:rgba(0, 0, 0, 0.25);--x-scrollbar-thumb-bg-hover:rgba(0, 0, 0, 0.35);--x-menu-dark-bg:#001529;--x-menu-dark-item-bg:#001529;--x-menu-dark-popup-bg:#001529;--x-menu-dark-submenu-item-bg:#000c17}:host{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:var(--x-drawer-z-index, var(--x-z-index-drawer, 1000))}:host(.x-drawer-open){display:block}`;
+const xDrawerCss = () => `@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:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:var(--x-drawer-z-index, var(--x-z-index-drawer, 1000))}:host(.x-drawer-open){display:block}`;
 
 const XDrawer = class {
     constructor(hostRef) {
@@ -158,12 +158,14 @@ const XDrawer = class {
         const slot = this.el.shadowRoot?.querySelector(selector);
         if (slot) {
             const nodes = slot.assignedNodes({ flatten: true });
-            return nodes.map(node => {
+            return nodes
+                .map(node => {
                 if (node.nodeType === Node.ELEMENT_NODE) {
                     return node.outerHTML;
                 }
                 return node.textContent || '';
-            }).join('');
+            })
+                .join('');
         }
         return '';
     }
@@ -246,10 +248,10 @@ const XDrawer = class {
      * @returns JSX.Element
      */
     render() {
-        return (h(Host, { key: 'a6ee04e45ff4d3e3a5f50ce4feecb7eae886d3f7', class: {
+        return (h(Host, { key: '5ff7c1a00e3c39e2b463491de24e7b8ed1d1755c', class: {
                 'x-drawer': true,
                 'x-drawer-open': this.open,
-            } }, h("div", { key: '22c1a3a583ba657353da9f317d0ab8fd9fd626aa', style: { display: 'none' } }, h("slot", { key: '4cc9b5ad72f7a05ba43a2cf97ac491972ec47483' }), h("slot", { key: '497cf0644134c8feec24f795f66ff311117ab06f', name: "title" }), h("slot", { key: 'b67c6ae93f61c6b54e6201ae953218e5b3ded5a5', name: "extra" }), h("slot", { key: '0a1abf0a54204cf749eafa1e177440ebb52b4469', name: "footer" }))));
+            } }, h("div", { key: '0066d10dfeb9ce27d0776f812f0d8b2da0717c2a', style: { display: 'none' } }, h("slot", { key: '8a3825d6bf3daaae32d28836d969b7e2ad58f477' }), h("slot", { key: '0f6e88dcd6dacaf5c7cf0616ee30f536a75fef16', name: "title" }), h("slot", { key: '91fe469e3a6b3642306facefe418b2d577e98d05', name: "extra" }), h("slot", { key: 'c74e03899b49afa630a5b65b3711825be501daba', name: "footer" }))));
     }
     static get watchers() { return {
         "open": [{

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

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, a as getElement, h, F as Fragment, H as Host } from './index-ig_mFsVk.js';
-import { M as Modal } from './modal-service-C_e0SaFZ.js';
-import './portal-controller-COpzIi1n.js';
-import './locale.service-D66tF8_2.js';
+import { r as registerInstance, c as createEvent, a as getElement, h, F as Fragment, H as Host } from './index-BMTt8QT3.js';
+import { M as Modal } from './modal-service-ikfAY1gn.js';
+import './portal-controller-DM8AggMt.js';
+import './locale.service-DFADJBLL.js';
 
 class FinderService {
     config;
@@ -18,7 +18,7 @@ class FinderService {
         sortBy: 'name',
         sortOrder: 'asc',
         showDetails: true,
-        storage: { used: 12.4, total: 20 }
+        storage: { used: 12.4, total: 20 },
     };
     onChange;
     constructor(config, onStateChange) {
@@ -68,7 +68,7 @@ class FinderService {
                     return true;
                 }
                 return false;
-            }
+            },
         });
     }
     async createProject() {
@@ -87,7 +87,7 @@ class FinderService {
                     return true;
                 }
                 return false;
-            }
+            },
         });
     }
     async upload(file) {
@@ -120,7 +120,7 @@ class FinderService {
                     return true;
                 }
                 return false;
-            }
+            },
         });
     }
     async delete(item) {
@@ -136,7 +136,7 @@ class FinderService {
                 if (success) {
                     await this.loadItems();
                 }
-            }
+            },
         });
     }
     download(item) {
@@ -184,9 +184,7 @@ class FinderService {
     selectItem(item, multi = false) {
         if (multi) {
             const index = this.state.selectedItems.findIndex(i => i.id === item.id);
-            const newSelection = index > -1
-                ? this.state.selectedItems.filter(i => i.id !== item.id)
-                : [...this.state.selectedItems, item];
+            const newSelection = index > -1 ? this.state.selectedItems.filter(i => i.id !== item.id) : [...this.state.selectedItems, item];
             this.updateState({ selectedItems: newSelection });
         }
         else {
@@ -218,7 +216,7 @@ class FinderService {
                 valB = b.name.toLowerCase();
             }
             const order = this.state.sortOrder === 'asc' ? 1 : -1;
-            return valA > valB ? order : (valA < valB ? -order : 0);
+            return valA > valB ? order : valA < valB ? -order : 0;
         });
         this.state.filteredItems = result;
     }
@@ -253,7 +251,7 @@ class FinderService {
     }
 }
 
-const xFinderCss = () => `@charset "UTF-8";:root{--x-color-primary:#1677ff;--x-color-primary-rgb:22, 119, 255;--x-color-primary-contrast:#ffffff;--x-color-primary-contrast-rgb:255, 255, 255;--x-color-primary-shade:#0958d9;--x-color-primary-tint:#4096ff;--x-color-primary-bg:#e6f4ff;--x-color-primary-bg-hover:#bae0ff;--x-color-primary-border:#91caff;--x-color-primary-border-hover:#69b1ff;--x-color-primary-hover:#4096ff;--x-color-primary-active:#0958d9;--x-color-primary-text:#1677ff;--x-color-primary-text-hover:#4096ff;--x-color-primary-text-active:#0958d9;--x-color-secondary:#3dc2ff;--x-color-secondary-rgb:61, 194, 255;--x-color-secondary-contrast:#ffffff;--x-color-secondary-contrast-rgb:255, 255, 255;--x-color-secondary-shade:#36abe0;--x-color-secondary-tint:#50c8ff;--x-color-success:#52c41a;--x-color-success-rgb:82, 196, 26;--x-color-success-contrast:#ffffff;--x-color-success-contrast-rgb:255, 255, 255;--x-color-success-shade:#389e0d;--x-color-success-tint:#73d13d;--x-color-success-bg:#f6ffed;--x-color-success-bg-hover:#d9f7be;--x-color-success-border:#b7eb8f;--x-color-success-border-hover:#95de64;--x-color-success-hover:#73d13d;--x-color-success-active:#389e0d;--x-color-success-text:#52c41a;--x-color-success-text-hover:#73d13d;--x-color-success-text-active:#389e0d;--x-color-warning:#faad14;--x-color-warning-rgb:250, 173, 20;--x-color-warning-contrast:#000000;--x-color-warning-contrast-rgb:0, 0, 0;--x-color-warning-shade:#d48806;--x-color-warning-tint:#ffc53d;--x-color-warning-bg:#fffbe6;--x-color-warning-bg-hover:#fff1b8;--x-color-warning-border:#ffe58f;--x-color-warning-border-hover:#ffd666;--x-color-warning-hover:#ffc53d;--x-color-warning-active:#d48806;--x-color-warning-text:#faad14;--x-color-warning-text-hover:#ffc53d;--x-color-warning-text-active:#d48806;--x-color-danger:#ff4d4f;--x-color-danger-rgb:255, 77, 79;--x-color-danger-contrast:#ffffff;--x-color-danger-contrast-rgb:255, 255, 255;--x-color-danger-shade:#cf1322;--x-color-danger-tint:#ff7875;--x-color-error:#ff4d4f;--x-color-error-rgb:255, 77, 79;--x-color-error-bg:#fff2f0;--x-color-error-bg-hover:#ffccc7;--x-color-error-border:#ffa39e;--x-color-error-border-hover:#ff7875;--x-color-error-hover:#ff7875;--x-color-error-active:#d9363e;--x-color-error-text:#ff4d4f;--x-color-error-text-hover:#ff7875;--x-color-error-text-active:#d9363e;--x-color-info:#1677ff;--x-color-info-rgb:22, 119, 255;--x-color-info-bg:#e6f4ff;--x-color-info-bg-hover:#bae0ff;--x-color-info-border:#91caff;--x-color-info-border-hover:#69b1ff;--x-color-info-hover:#69b1ff;--x-color-info-active:#0958d9;--x-color-info-text:#1677ff;--x-color-info-text-hover:#69b1ff;--x-color-info-text-active:#0958d9;--x-color-text:rgba(0, 0, 0, 0.88);--x-color-text-secondary:rgba(0, 0, 0, 0.65);--x-color-text-tertiary:rgba(0, 0, 0, 0.45);--x-color-text-quaternary:rgba(0, 0, 0, 0.25);--x-color-text-disabled:rgba(0, 0, 0, 0.25);--x-color-text-placeholder:rgba(0, 0, 0, 0.25);--x-color-text-heading:rgba(0, 0, 0, 0.88);--x-color-text-label:rgba(0, 0, 0, 0.65);--x-color-text-description:rgba(0, 0, 0, 0.45);--x-color-text-light-solid:#ffffff;--x-color-bg-container:#ffffff;--x-color-bg-elevated:#ffffff;--x-color-bg-layout:#f5f5f5;--x-color-bg-spotlight:rgba(0, 0, 0, 0.85);--x-color-bg-mask:rgba(0, 0, 0, 0.45);--x-color-bg-base:#ffffff;--x-color-bg-container-disabled:#f5f5f5;--x-color-bg-container-loading:rgba(255, 255, 255, 0.65);--x-color-white:#ffffff;--x-color-fill:rgba(0, 0, 0, 0.15);--x-color-fill-secondary:rgba(0, 0, 0, 0.06);--x-color-fill-tertiary:rgba(0, 0, 0, 0.04);--x-color-fill-quaternary:rgba(0, 0, 0, 0.02);--x-color-border:#d9d9d9;--x-color-border-secondary:#f0f0f0;--x-color-border-bg:#ffffff;--x-color-split:rgba(5, 5, 5, 0.06);--x-color-dark:#222428;--x-color-dark-rgb:34, 36, 40;--x-color-dark-contrast:#ffffff;--x-color-dark-contrast-rgb:255, 255, 255;--x-color-dark-shade:#1e2023;--x-color-dark-tint:#383a3e;--x-color-medium:#92949c;--x-color-medium-rgb:146, 148, 156;--x-color-medium-contrast:#ffffff;--x-color-medium-contrast-rgb:255, 255, 255;--x-color-medium-shade:#808289;--x-color-medium-tint:#9d9fa6;--x-color-light:#f4f5f8;--x-color-light-rgb:244, 245, 248;--x-color-light-contrast:#000000;--x-color-light-contrast-rgb:0, 0, 0;--x-color-light-shade:#d7d8da;--x-color-light-tint:#f5f6f9;--x-font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--x-font-family-code:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;--x-font-size:14px;--x-font-size-sm:12px;--x-font-size-lg:16px;--x-font-size-xl:20px;--x-font-size-heading-1:38px;--x-font-size-heading-2:30px;--x-font-size-heading-3:24px;--x-font-size-heading-4:20px;--x-font-size-heading-5:16px;--x-line-height:1.5714285714285714;--x-line-height-lg:1.5;--x-line-height-sm:1.6666666666666667;--x-line-height-heading-1:1.2105263157894737;--x-line-height-heading-2:1.2666666666666666;--x-line-height-heading-3:1.3333333333333333;--x-line-height-heading-4:1.4;--x-line-height-heading-5:1.5;--x-font-weight-normal:400;--x-font-weight-medium:500;--x-font-weight-semibold:600;--x-font-weight-strong:600;--x-font-size-base:14px;--x-font-size-xxl:24px;--x-line-height-base:1.5714285714285714;--x-spacing-xxs:4px;--x-spacing-xs:8px;--x-spacing-sm:12px;--x-spacing-md:16px;--x-spacing-lg:20px;--x-spacing-xl:24px;--x-spacing-xxl:32px;--x-spacing-xxxl:48px;--x-margin-xxs:4px;--x-margin-xs:8px;--x-margin-sm:12px;--x-margin-md:16px;--x-margin-lg:24px;--x-margin-xl:32px;--x-margin-xxl:48px;--x-padding-xxs:4px;--x-padding-xs:8px;--x-padding-sm:12px;--x-padding-md:16px;--x-padding-lg:24px;--x-padding-content-horizontal-lg:24px;--x-padding-content-vertical-lg:12px;--x-padding-content-horizontal:16px;--x-padding-content-vertical:12px;--x-padding-content-horizontal-sm:16px;--x-padding-content-vertical-sm:8px;--x-border-radius:6px;--x-border-radius-xs:2px;--x-border-radius-sm:4px;--x-border-radius-lg:8px;--x-border-radius-xl:12px;--x-border-radius-outer:4px;--x-border-radius-base:6px;--x-border-width:1px;--x-border-width-base:1px;--x-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-shadow-lg:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-box-shadow-popover-arrow:2px 2px 5px rgba(0, 0, 0, 0.05);--x-box-shadow-card:0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);--x-box-shadow-drawer-right:-6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-left:6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-up:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-down:0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tabs-overflow-left:inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-right:inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-top:inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-bottom:inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);--x-motion-duration-fast:0.1s;--x-motion-duration-mid:0.2s;--x-motion-duration-slow:0.3s;--x-motion-ease-in-out:cubic-bezier(0.645, 0.045, 0.355, 1);--x-motion-ease-out:cubic-bezier(0.215, 0.61, 0.355, 1);--x-motion-ease-in:cubic-bezier(0.55, 0.055, 0.675, 0.19);--x-motion-ease-out-back:cubic-bezier(0.12, 0.4, 0.29, 1.46);--x-motion-ease-in-back:cubic-bezier(0.71, -0.46, 0.88, 0.6);--x-motion-ease-in-out-circle:cubic-bezier(0.78, 0.14, 0.15, 0.86);--x-motion-ease-out-circle:cubic-bezier(0.08, 0.82, 0.17, 1);--x-motion-ease-in-circle:cubic-bezier(0.6, 0.04, 0.98, 0.34);--x-motion-ease-in-quint:cubic-bezier(0.755, 0.05, 0.855, 0.06);--x-motion-ease-out-quint:cubic-bezier(0.23, 1, 0.32, 1);--x-z-index-base:0;--x-z-index-popup-base:1000;--x-z-index-popup:1030;--x-z-index-affix:10;--x-z-index-modal:1000;--x-z-index-modal-mask:1000;--x-z-index-drawer:1000;--x-z-index-popover:1030;--x-z-index-dropdown:1050;--x-z-index-tooltip:1070;--x-z-index-notification:1080;--x-z-index-message:1090;--x-z-index-popconfirm:1060;--x-z-index-table-fixed:10;--x-opacity-loading:0.65;--x-opacity-image:1;--x-opacity-disabled:0.5;--x-control-height:32px;--x-control-height-xs:24px;--x-control-height-sm:24px;--x-control-height-lg:40px;--x-control-radio-size:16px;--x-control-checkbox-size:16px;--x-control-padding-horizontal:12px;--x-control-padding-horizontal-sm:8px;--x-control-outline-width:2px;--x-control-outline:rgba(5, 145, 255, 0.1);--x-control-item-bg-hover:rgba(0, 0, 0, 0.04);--x-control-item-bg-active:#e6f4ff;--x-control-item-bg-active-hover:#bae0ff;--x-control-item-bg-active-disabled:rgba(0, 0, 0, 0.15);--x-control-tmp-outline:rgba(0, 0, 0, 0.02);--x-color-yellow:#fadb14;--x-color-yellow-rgb:250, 219, 20;--x-font-family-base:var(--x-font-family);--x-color-link:#1677ff;--x-color-link-hover:#69b1ff;--x-color-link-active:#0958d9;--x-color-icon:rgba(0, 0, 0, 0.45);--x-color-icon-hover:rgba(0, 0, 0, 0.88);--x-color-highlight:#ff4d4f;--x-color-bg-text-hover:rgba(0, 0, 0, 0.06);--x-color-bg-text-active:rgba(0, 0, 0, 0.15);--x-screen-xs:480px;--x-screen-xs-min:480px;--x-screen-xs-max:575px;--x-screen-sm:576px;--x-screen-sm-min:576px;--x-screen-sm-max:767px;--x-screen-md:768px;--x-screen-md-min:768px;--x-screen-md-max:991px;--x-screen-lg:992px;--x-screen-lg-min:992px;--x-screen-lg-max:1199px;--x-screen-xl:1200px;--x-screen-xl-min:1200px;--x-screen-xl-max:1599px;--x-screen-xxl:1600px;--x-screen-xxl-min:1600px;--x-color-fill-content:rgba(0, 0, 0, 0.06);--x-color-fill-content-hover:rgba(0, 0, 0, 0.15);--x-color-fill-alter:rgba(0, 0, 0, 0.02);--x-scrollbar-width:12px;--x-scrollbar-track-bg:rgba(0, 0, 0, 0.04);--x-scrollbar-thumb-bg:rgba(0, 0, 0, 0.25);--x-scrollbar-thumb-bg-hover:rgba(0, 0, 0, 0.35);--x-menu-dark-bg:#001529;--x-menu-dark-item-bg:#001529;--x-menu-dark-popup-bg:#001529;--x-menu-dark-submenu-item-bg:#000c17}:host{display:block;font-family:inherit;border-radius:var(--x-modal-content-border-radius, var(--x-border-radius-lg, 8px)) var(--x-modal-content-border-radius, var(--x-border-radius-lg, 8px)) 0 0;overflow:hidden}.page-wrapper{height:100%;background-color:white;position:relative;overflow:hidden}.finder-container{height:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:80vh}.details-sidebar,.finder-sidebar{--x-sider-bg:#fff !important}.finder-header{height:64px;background:var(--x-finder-header-bg, var(--x-color-bg-container, #ffffff));border-bottom:var(--x-border-width-base, 1px) solid var(--x-finder-border-color, var(--x-color-border-secondary, #f0f0f0));-ms-flex-negative:0;flex-shrink:0;z-index:10}.finder-header .header-logo{font-size:20px;font-weight:700;color:var(--x-finder-text-color, var(--x-text-color, #1e293b));white-space:nowrap}.finder-header .nav-link{text-decoration:none;color:var(--x-finder-text-secondary, var(--x-text-color-secondary, #64748b)) !important;font-weight:500;font-size:14px;-webkit-transition:color 0.2s;transition:color 0.2s;white-space:nowrap}.finder-header .nav-link:hover{color:var(--x-finder-text-color, var(--x-text-color, #1e293b)) !important}.finder-header .nav-link.active{color:var(--x-color-primary, #137fec) !important;font-weight:600}.finder-sidebar{overflow:hidden}.finder-sidebar .sidebar-top{padding:24px;-ms-flex-negative:0;flex-shrink:0}.finder-sidebar .sidebar-section{padding:0 24px}.finder-sidebar .sidebar-section .section-title{font-size:12px;font-weight:600;color:var(--x-text-color-secondary);margin-bottom:12px;letter-spacing:0.5px}.main-content{background:var(--x-finder-content-bg, var(--x-color-bg-layout, #f1f5f9));padding:0px 15px 15px;-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:hidden;min-height:0}.main-content .content-toolbar{margin:20px 0px;-ms-flex-negative:0;flex-shrink:0}.items-grid{width:100%}.grid-item{height:100%;cursor:pointer;border-radius:var(--x-finder-border-radius-lg, var(--x-border-radius-lg, 16px));border:2px solid transparent;-webkit-transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.grid-item::part(body){display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%}.grid-item.selected{border-color:var(--x-color-primary, #137fec)}.grid-item.selected::part(card){background-color:var(--x-finder-item-selected-bg, var(--x-color-primary-bg, #f0f9ff))}.grid-item .thumbnail{background-color:var(--x-finder-thumbnail-bg, var(--x-color-fill-quaternary, #f1f5f9));border-radius:var(--x-finder-border-radius-md, var(--x-border-radius-base, 12px));display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;margin-bottom:12px;position:relative;overflow:hidden;width:100%;aspect-ratio:16/10}.grid-item .thumbnail img,.grid-item .thumbnail x-image{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.grid-item .thumbnail .badge{position:absolute;top:8px;right:8px;background:var(--x-color-primary, #137fec);color:var(--x-finder-item-bg, var(--x-color-bg-container, #ffffff));width:22px;height:22px;border-radius:50%;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.grid-item .info{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}.grid-item .info .name{font-weight:600;font-size:var(--x-finder-font-size-md, var(--x-font-size-lg, 14px));color:var(--x-finder-text-color, var(--x-text-color, #1e293b));margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.grid-item .info .meta{font-size:var(--x-finder-font-size-sm, var(--x-font-size-base, 12px));color:var(--x-finder-text-secondary, var(--x-text-color-secondary, #64748b));font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.items-list{position:relative}.virtual-spacer{width:100%;position:relative}.virtual-items{position:absolute;top:0;left:0;right:0}.list-item{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:0 16px;border-radius:var(--x-finder-border-radius-sm, var(--x-border-radius-sm, 8px));cursor:pointer;-webkit-transition:background 0.2s;transition:background 0.2s;height:56px;-webkit-box-sizing:border-box;box-sizing:border-box}.list-item:hover{background:var(--x-finder-item-hover-bg, var(--x-color-fill-tertiary, #f8fafc))}.list-item.selected{background:var(--x-finder-item-selected-bg, var(--x-color-primary-bg, #f0f9ff))}.list-item.selected .name{color:var(--x-color-primary, #137fec);font-weight:600}.list-item .name{font-size:var(--x-finder-font-size-md, var(--x-font-size-lg, 14px));color:var(--x-finder-text-color, var(--x-text-color, #1e293b));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.list-item .type,.list-item .size,.list-item .date{font-size:13px;color:var(--x-finder-text-secondary, var(--x-text-color-secondary, #64748b));width:120px;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.list-item .type{-ms-flex-negative:0;flex-shrink:0;width:150px;text-align:left;margin-left:16px}.details-sidebar .preview{aspect-ratio:16/10;background:var(--x-finder-thumbnail-bg, var(--x-color-fill-quaternary, #f1f5f9));border-radius:var(--x-finder-border-radius-lg, var(--x-border-radius-lg, 16px));margin-bottom:24px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;overflow:hidden}.details-sidebar .preview img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.details-sidebar .info-section{margin-bottom:32px}.details-sidebar .info-section .filename{font-size:var(--x-finder-font-size-lg, 16px);font-weight:600;color:var(--x-finder-text-color, var(--x-text-color, #1e293b));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.details-sidebar .info-section .time{font-size:var(--x-finder-font-size-xs, var(--x-font-size-sm, 11px));color:var(--x-finder-text-muted, var(--x-text-color-description, #94a3b8));font-weight:700;letter-spacing:0.1em;text-transform:uppercase;margin-top:4px}.details-sidebar .actions{margin-top:auto;padding-top:24px;border-top:var(--x-border-width-base, 1px) solid var(--x-finder-thumbnail-bg, var(--x-color-fill-quaternary, #f1f5f9))}.details-sidebar .actions .label{font-size:var(--x-finder-font-size-xs, var(--x-font-size-sm, 11px));font-weight:700;color:var(--x-finder-text-muted, var(--x-text-color-description, #94a3b8));margin-bottom:20px}.details-sidebar .actions .action-btn{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;gap:10px;cursor:pointer;color:var(--x-finder-text-secondary, var(--x-text-color-secondary, #64748b));-webkit-transition:all 0.2s;transition:all 0.2s}.details-sidebar .actions .action-btn span{font-size:var(--x-finder-font-size-sm, var(--x-font-size-base, 12px));font-weight:600}.details-sidebar .actions .action-btn:hover{color:var(--x-color-primary, #137fec);-webkit-transform:translateY(-2px);transform:translateY(-2px)}.details-sidebar .actions .action-btn.danger:hover{color:var(--x-finder-danger-color, var(--x-color-error, #ef4444))}.selection-footer{height:80px;background:var(--x-finder-footer-bg, var(--x-color-bg-container, #ffffff));border-top:var(--x-border-width-base, 1px) solid var(--x-finder-border-color, var(--x-color-border-secondary, #f0f0f0));padding:0 40px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-negative:0;flex-shrink:0}.selection-footer .text{font-size:15px;font-weight:600;color:var(--x-finder-text-color, var(--x-text-color, #1e293b))}.clickable{cursor:pointer;-webkit-transition:opacity 0.2s;transition:opacity 0.2s}.clickable:hover{opacity:0.7}x-layout{position:relative !important}`;
+const xFinderCss = () => `@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;font-family:inherit;border-radius:var(--x-modal-content-border-radius, var(--x-border-radius-lg, 8px)) var(--x-modal-content-border-radius, var(--x-border-radius-lg, 8px)) 0 0;overflow:hidden}.page-wrapper{height:100%;background-color:white;position:relative;overflow:hidden}.finder-container{height:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:80vh}.details-sidebar,.finder-sidebar{--x-sider-bg:#fff !important}.finder-header{height:64px;background:var(--x-finder-header-bg, var(--x-color-bg-container, #ffffff));border-bottom:var(--x-border-width-base, 1px) solid var(--x-finder-border-color, var(--x-color-border-secondary, #f0f0f0));-ms-flex-negative:0;flex-shrink:0;z-index:10}.finder-header .header-logo{font-size:20px;font-weight:700;color:var(--x-finder-text-color, var(--x-text-color, #1e293b));white-space:nowrap}.finder-header .nav-link{text-decoration:none;color:var(--x-finder-text-secondary, var(--x-text-color-secondary, #64748b)) !important;font-weight:500;font-size:14px;-webkit-transition:color 0.2s;transition:color 0.2s;white-space:nowrap}.finder-header .nav-link:hover{color:var(--x-finder-text-color, var(--x-text-color, #1e293b)) !important}.finder-header .nav-link.active{color:var(--x-color-primary, #137fec) !important;font-weight:600}.finder-sidebar{overflow:hidden}.finder-sidebar .sidebar-top{padding:24px;-ms-flex-negative:0;flex-shrink:0}.finder-sidebar .sidebar-section{padding:0 24px}.finder-sidebar .sidebar-section .section-title{font-size:12px;font-weight:600;color:var(--x-text-color-secondary);margin-bottom:12px;letter-spacing:0.5px}.main-content{background:var(--x-finder-content-bg, var(--x-color-bg-layout, #f1f5f9));padding:0px 15px 15px;-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:hidden;min-height:0}.main-content .content-toolbar{margin:20px 0px;-ms-flex-negative:0;flex-shrink:0}.items-grid{width:100%}.grid-item{height:100%;cursor:pointer;border-radius:var(--x-finder-border-radius-lg, var(--x-border-radius-lg, 16px));border:2px solid transparent;-webkit-transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.grid-item::part(body){display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%}.grid-item.selected{border-color:var(--x-color-primary, #137fec)}.grid-item.selected::part(card){background-color:var(--x-finder-item-selected-bg, var(--x-color-primary-bg, #f0f9ff))}.grid-item .thumbnail{background-color:var(--x-finder-thumbnail-bg, var(--x-color-fill-quaternary, #f1f5f9));border-radius:var(--x-finder-border-radius-md, var(--x-border-radius-base, 12px));display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;margin-bottom:12px;position:relative;overflow:hidden;width:100%;aspect-ratio:16/10}.grid-item .thumbnail img,.grid-item .thumbnail x-image{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.grid-item .thumbnail .badge{position:absolute;top:8px;right:8px;background:var(--x-color-primary, #137fec);color:var(--x-finder-item-bg, var(--x-color-bg-container, #ffffff));width:22px;height:22px;border-radius:50%;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.grid-item .info{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}.grid-item .info .name{font-weight:600;font-size:var(--x-finder-font-size-md, var(--x-font-size-lg, 14px));color:var(--x-finder-text-color, var(--x-text-color, #1e293b));margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.grid-item .info .meta{font-size:var(--x-finder-font-size-sm, var(--x-font-size-base, 12px));color:var(--x-finder-text-secondary, var(--x-text-color-secondary, #64748b));font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.items-list{position:relative}.virtual-spacer{width:100%;position:relative}.virtual-items{position:absolute;top:0;left:0;right:0}.list-item{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:0 16px;border-radius:var(--x-finder-border-radius-sm, var(--x-border-radius-sm, 8px));cursor:pointer;-webkit-transition:background 0.2s;transition:background 0.2s;height:56px;-webkit-box-sizing:border-box;box-sizing:border-box}.list-item:hover{background:var(--x-finder-item-hover-bg, var(--x-color-fill-tertiary, #f8fafc))}.list-item.selected{background:var(--x-finder-item-selected-bg, var(--x-color-primary-bg, #f0f9ff))}.list-item.selected .name{color:var(--x-color-primary, #137fec);font-weight:600}.list-item .name{font-size:var(--x-finder-font-size-md, var(--x-font-size-lg, 14px));color:var(--x-finder-text-color, var(--x-text-color, #1e293b));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.list-item .type,.list-item .size,.list-item .date{font-size:13px;color:var(--x-finder-text-secondary, var(--x-text-color-secondary, #64748b));width:120px;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.list-item .type{-ms-flex-negative:0;flex-shrink:0;width:150px;text-align:left;margin-left:16px}.details-sidebar .preview{aspect-ratio:16/10;background:var(--x-finder-thumbnail-bg, var(--x-color-fill-quaternary, #f1f5f9));border-radius:var(--x-finder-border-radius-lg, var(--x-border-radius-lg, 16px));margin-bottom:24px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;overflow:hidden}.details-sidebar .preview img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.details-sidebar .info-section{margin-bottom:32px}.details-sidebar .info-section .filename{font-size:var(--x-finder-font-size-lg, 16px);font-weight:600;color:var(--x-finder-text-color, var(--x-text-color, #1e293b));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.details-sidebar .info-section .time{font-size:var(--x-finder-font-size-xs, var(--x-font-size-sm, 11px));color:var(--x-finder-text-muted, var(--x-text-color-description, #94a3b8));font-weight:700;letter-spacing:0.1em;text-transform:uppercase;margin-top:4px}.details-sidebar .actions{margin-top:auto;padding-top:24px;border-top:var(--x-border-width-base, 1px) solid var(--x-finder-thumbnail-bg, var(--x-color-fill-quaternary, #f1f5f9))}.details-sidebar .actions .label{font-size:var(--x-finder-font-size-xs, var(--x-font-size-sm, 11px));font-weight:700;color:var(--x-finder-text-muted, var(--x-text-color-description, #94a3b8));margin-bottom:20px}.details-sidebar .actions .action-btn{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;gap:10px;cursor:pointer;color:var(--x-finder-text-secondary, var(--x-text-color-secondary, #64748b));-webkit-transition:all 0.2s;transition:all 0.2s}.details-sidebar .actions .action-btn span{font-size:var(--x-finder-font-size-sm, var(--x-font-size-base, 12px));font-weight:600}.details-sidebar .actions .action-btn:hover{color:var(--x-color-primary, #137fec);-webkit-transform:translateY(-2px);transform:translateY(-2px)}.details-sidebar .actions .action-btn.danger:hover{color:var(--x-finder-danger-color, var(--x-color-error, #ef4444))}.selection-footer{height:80px;background:var(--x-finder-footer-bg, var(--x-color-bg-container, #ffffff));border-top:var(--x-border-width-base, 1px) solid var(--x-finder-border-color, var(--x-color-border-secondary, #f0f0f0));padding:0 40px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-negative:0;flex-shrink:0}.selection-footer .text{font-size:15px;font-weight:600;color:var(--x-finder-text-color, var(--x-text-color, #1e293b))}.clickable{cursor:pointer;-webkit-transition:opacity 0.2s;transition:opacity 0.2s}.clickable:hover{opacity:0.7}x-layout{position:relative !important}`;
 
 const XFinder = class {
     constructor(hostRef) {
@@ -310,7 +308,7 @@ const XFinder = class {
         this.itemsResizeObserver?.disconnect();
     }
     initService(config) {
-        this.service = new FinderService(config, (newState) => {
+        this.service = new FinderService(config, newState => {
             this.state = { ...newState };
         });
         this.state = this.service.getState();
@@ -363,7 +361,7 @@ const XFinder = class {
                 this.service.setFilterMode('images');
             } }, "Images"))), h("x-flex", { align: "center", gap: "16" }, h("div", null, h("x-input", { placeholder: "Search assets...", prefixIcon: "search", size: "small", style: { width: '240px' }, onXChange: (ev) => this.service.setSearchQuery(ev.detail.value) })), h("x-segmented", { value: this.state.viewMode, options: [
                 { label: 'Grid', value: 'grid', icon: 'grid_view' },
-                { label: 'List', value: 'list', icon: 'list' }
+                { label: 'List', value: 'list', icon: 'list' },
             ], onXChange: (ev) => this.service.setViewMode(ev.detail) }), h("x-flex", { align: "center", gap: "12" }, h("x-icon", { name: "settings", size: "18", color: "#64748b", class: "clickable", onClick: () => this.openSettings() }), h("x-icon", { name: "info", size: "18", color: "#64748b", class: "clickable", onClick: () => this.openInfo() }))))));
     }
     openSettings() {
@@ -402,7 +400,7 @@ const XFinder = class {
                     this.service.setFilterMode(fm);
                 this.service.toggleDetails(sd);
                 return true;
-            }
+            },
         });
     }
     openInfo() {
@@ -421,7 +419,7 @@ const XFinder = class {
           <div><strong>Selected:</strong> ${selected}</div>
           <div><strong>Storage:</strong> ${storage}</div>
         </div>
-      `
+      `,
         });
     }
     renderSidebar() {
@@ -450,7 +448,7 @@ const XFinder = class {
         }));
         const treeData = [rootNode];
         const expandedKeys = ['__root__', ...trail.slice(1).map(t => String(t.id))];
-        return (h("x-sider", { class: "finder-sidebar", width: 240, style: { display: 'flex', flexDirection: 'column' } }, h("x-layout", { hasSiderProp: false, fixed: false }, h("x-header", { class: "finder-header" }, h("x-flex", { align: "center", style: { height: '100%' }, justify: 'space-between', gap: "12" }, h("x-button", { type: "primary", style: { width: '100%' }, block: true, size: "large", onClick: () => this.fileInput.click() }, h("x-icon", { slot: "icon", name: "cloud_upload" }), "Upload"))), h("x-layout", { hasSiderProp: false, fixed: true }, h("div", { class: "sidebar-section" }, h("div", { class: "section-title" }, "FOLDERS"), h("x-tree", { treeData: treeData, selectedKeys: [selectedKey], expandedKeys: expandedKeys, showIcon: true, blockNode: true, onXSelect: (ev) => {
+        return (h("x-sider", { class: "finder-sidebar", width: 240, style: { display: 'flex', flexDirection: 'column' } }, h("x-layout", { hasSiderProp: false, fixed: false }, h("x-header", { class: "finder-header" }, h("x-flex", { align: "center", style: { height: '100%' }, justify: "space-between", gap: "12" }, h("x-button", { type: "primary", style: { width: '100%' }, block: true, size: "large", onClick: () => this.fileInput.click() }, h("x-icon", { slot: "icon", name: "cloud_upload" }), "Upload"))), h("x-layout", { hasSiderProp: false, fixed: true }, h("div", { class: "sidebar-section" }, h("div", { class: "section-title" }, "FOLDERS"), h("x-tree", { treeData: treeData, selectedKeys: [selectedKey], expandedKeys: expandedKeys, showIcon: true, blockNode: true, onXSelect: (ev) => {
                 if (ev && ev.stopPropagation) {
                     ev.stopPropagation();
                 }
@@ -461,7 +459,7 @@ const XFinder = class {
             } }))))));
     }
     renderBreadcrumbs() {
-        return (h("div", null, h("x-breadcrumb", null, this.state.pathTrail.map(p => (h("x-breadcrumb-item", { onClick: (e) => {
+        return (h("div", null, h("x-breadcrumb", null, this.state.pathTrail.map(p => (h("x-breadcrumb-item", { onClick: e => {
                 if (e && e.stopPropagation)
                     e.stopPropagation();
                 this.service.navigateTo(p.id, p.name);
@@ -557,12 +555,12 @@ const XFinder = class {
     }
     renderItemThumb(item, isSelected, size) {
         if (item.type === 'folder') {
-            return (h("x-icon", { name: "folder", size: size, color: isSelected ? 'var(--x-color-primary)' : this.getFileIconColor(item) }));
+            return h("x-icon", { name: "folder", size: size, color: isSelected ? 'var(--x-color-primary)' : this.getFileIconColor(item) });
         }
         if (this.isImageFile(item) && (item.thumbnail || item.url)) {
-            return (h("x-image", { src: item.thumbnail || item.url, alt: item.name, width: "100%", height: "100%", loading: "lazy", preview: false, style: { pointerEvents: 'none' } }));
+            return h("x-image", { src: item.thumbnail || item.url, alt: item.name, width: "100%", height: "100%", loading: "lazy", preview: false, style: { pointerEvents: 'none' } });
         }
-        return (h("x-icon", { name: this.getFileIconName(item), size: size, color: isSelected ? 'var(--x-color-primary)' : this.getFileIconColor(item) }));
+        return h("x-icon", { name: this.getFileIconName(item), size: size, color: isSelected ? 'var(--x-color-primary)' : this.getFileIconColor(item) });
     }
     renderGridItem(item) {
         const isSelected = this.state.selectedItems.some(i => i.id === item.id);
@@ -578,12 +576,12 @@ const XFinder = class {
             }, onDblClick: (e) => {
                 e.stopPropagation();
                 item.type === 'folder' ? this.service.navigateTo(item.id, item.name) : this.service.download(item);
-            } }, h("div", { class: "thumbnail", slot: 'cover' }, this.renderItemThumb(item, isSelected, 48), isSelected && h("div", { class: "badge" }, h("x-icon", { name: "check", size: 12 }))), h("div", { class: "info" }, h("div", { class: "name", title: item.name }, displayName), h("div", { class: "meta" }, item.size ? `${item.size} MB` : '-', " \u2022 ", item.mimeType || (item.type === 'folder' ? 'Folder' : ''))))));
+            } }, h("div", { class: "thumbnail", slot: "cover" }, this.renderItemThumb(item, isSelected, 48), isSelected && (h("div", { class: "badge" }, h("x-icon", { name: "check", size: 12 })))), h("div", { class: "info" }, h("div", { class: "name", title: item.name }, displayName), h("div", { class: "meta" }, item.size ? `${item.size} MB` : '-', " \u2022 ", item.mimeType || (item.type === 'folder' ? 'Folder' : ''))))));
     }
     renderListItem(item) {
         const isSelected = this.state.selectedItems.some(i => i.id === item.id);
         const displayName = this.formatMiddleEllipsis(item.name, 28, 16);
-        return (h("div", { class: `list-item ${isSelected ? 'selected' : ''}`, onClick: (e) => {
+        return (h("div", { class: `list-item ${isSelected ? 'selected' : ''}`, onClick: e => {
                 e.stopPropagation();
                 const multi = e.ctrlKey || e.metaKey;
                 if (item.type === 'folder' && !multi) {
@@ -591,7 +589,7 @@ const XFinder = class {
                     return;
                 }
                 this.service.selectItem(item, multi);
-            }, onDblClick: (e) => {
+            }, onDblClick: e => {
                 e.stopPropagation();
                 item.type === 'folder' ? this.service.navigateTo(item.id, item.name) : this.service.download(item);
             } }, h("x-flex", { align: "center", gap: "12", style: { flex: '1', minWidth: '0' } }, h("x-icon", { name: this.getFileIconName(item), size: "20", color: isSelected ? 'var(--x-color-primary)' : this.getFileIconColor(item) }), h("span", { class: "name", title: item.name }, displayName)), h("span", { class: "type" }, item.mimeType || item.type), h("span", { class: "size" }, item.size ? `${item.size} MB` : '-'), h("span", { class: "date" }, this.formatDate(item.updatedAt))));
@@ -604,18 +602,27 @@ const XFinder = class {
         const end = Math.min(items.length - 1, Math.ceil((this.itemsViewportScrollTop + this.itemsViewportHeight) / itemHeight) + overscan);
         const visibleItems = items.slice(start, end + 1);
         const offsetY = start * itemHeight;
-        return (h("div", { class: "virtual-spacer", style: { height: `${totalHeight}px` } }, h("div", { class: "virtual-items", style: { transform: `translateY(${offsetY}px)` } }, visibleItems.map((item) => (h("div", { key: String(item.id), style: { height: `${itemHeight}px` } }, this.renderListItem(item)))))));
+        return (h("div", { class: "virtual-spacer", style: { height: `${totalHeight}px` } }, h("div", { class: "virtual-items", style: { transform: `translateY(${offsetY}px)` } }, visibleItems.map(item => (h("div", { key: String(item.id), style: { height: `${itemHeight}px` } }, this.renderListItem(item)))))));
     }
     renderDetails() {
         if (!this.state.showDetails || this.state.selectedItems.length === 0)
             return null;
         const item = this.state.selectedItems[0];
         const displayName = this.formatMiddleEllipsis(item.name, 28, 16);
-        return (h("x-sider", { class: "details-sidebar", width: 320, style: { display: 'flex', flexDirection: 'column' } }, h("x-layout", { hasSiderProp: false, fixed: false }, h("x-header", { class: "finder-header" }, h("x-flex", { align: "center", justify: 'space-between', gap: "12" }, h("x-flex", { flex: '1', align: "center", gap: "4" }, h("x-typography", { type: 'title', level: 4 }, "Details")), h("x-icon", { name: "close", onClick: () => this.service.toggleDetails(false), class: "clickable" }))), h("x-layout", { hasSiderProp: false, fixed: true }, h("x-content", null, h("div", { class: "details-content" }, h("div", { class: "preview" }, this.isImageFile(item) && (item.url || item.thumbnail) ? (h("x-image", { src: item.url || item.thumbnail, alt: item.name, width: "100%", height: "100%", loading: "lazy", placeholder: true, preview: true })) : (h("x-icon", { name: item.type === 'folder' ? 'folder' : this.getFileIconName(item), size: "80", color: "#cbd5e1" }))), h("div", { class: "info-section" }, h("x-flex", { align: "center", gap: "8", style: { marginBottom: '4px', minWidth: '0' } }, h("x-icon", { name: "description", size: 16, color: "var(--x-color-primary)" }), h("div", { class: "filename", title: item.name }, displayName)), h("div", { class: "time" }, item.updatedAt ? `MODIFIED ${this.formatDate(item.updatedAt)}` : '')), h("x-descriptions", { column: 1, size: "small", style: { marginTop: '24px' } }, h("x-descriptions-item", { label: "Type" }, item.mimeType || item.type), h("x-descriptions-item", { label: "Size" }, item.size ? `${item.size} MB` : '-'), h("x-descriptions-item", { label: "Dimensions" }, item.dimensions || '-'), h("x-descriptions-item", { label: "Created" }, this.formatDate(item.createdAt)), h("x-descriptions-item", { label: "Modified" }, this.formatDate(item.updatedAt)))))), h("x-footer", null, h("div", { class: "actions" }, h("div", { class: "label" }, "QUICK ACTIONS"), h("x-flex", { justify: "space-around", style: { marginTop: '16px' } }, h("div", { class: "action-btn", onClick: (e) => { e.stopPropagation(); this.service.download(item); } }, h("x-icon", { name: "download", size: 20 }), h("span", null, "Download")), h("div", { class: "action-btn", onClick: (e) => { e.stopPropagation(); this.service.rename(item); } }, h("x-icon", { name: "edit", size: 20 }), h("span", null, "Rename")), h("div", { class: "action-btn danger", onClick: (e) => { e.stopPropagation(); this.service.delete(item); } }, h("x-icon", { name: "delete", size: 20 }), h("span", null, "Delete"))))))));
+        return (h("x-sider", { class: "details-sidebar", width: 320, style: { display: 'flex', flexDirection: 'column' } }, h("x-layout", { hasSiderProp: false, fixed: false }, h("x-header", { class: "finder-header" }, h("x-flex", { align: "center", justify: "space-between", gap: "12" }, h("x-flex", { flex: "1", align: "center", gap: "4" }, h("x-typography", { type: "title", level: 4 }, "Details")), h("x-icon", { name: "close", onClick: () => this.service.toggleDetails(false), class: "clickable" }))), h("x-layout", { hasSiderProp: false, fixed: true }, h("x-content", null, h("div", { class: "details-content" }, h("div", { class: "preview" }, this.isImageFile(item) && (item.url || item.thumbnail) ? (h("x-image", { src: item.url || item.thumbnail, alt: item.name, width: "100%", height: "100%", loading: "lazy", placeholder: true, preview: true })) : (h("x-icon", { name: item.type === 'folder' ? 'folder' : this.getFileIconName(item), size: "80", color: "#cbd5e1" }))), h("div", { class: "info-section" }, h("x-flex", { align: "center", gap: "8", style: { marginBottom: '4px', minWidth: '0' } }, h("x-icon", { name: "description", size: 16, color: "var(--x-color-primary)" }), h("div", { class: "filename", title: item.name }, displayName)), h("div", { class: "time" }, item.updatedAt ? `MODIFIED ${this.formatDate(item.updatedAt)}` : '')), h("x-descriptions", { column: 1, size: "small", style: { marginTop: '24px' } }, h("x-descriptions-item", { label: "Type" }, item.mimeType || item.type), h("x-descriptions-item", { label: "Size" }, item.size ? `${item.size} MB` : '-'), h("x-descriptions-item", { label: "Dimensions" }, item.dimensions || '-'), h("x-descriptions-item", { label: "Created" }, this.formatDate(item.createdAt)), h("x-descriptions-item", { label: "Modified" }, this.formatDate(item.updatedAt)))))), h("x-footer", null, h("div", { class: "actions" }, h("div", { class: "label" }, "QUICK ACTIONS"), h("x-flex", { justify: "space-around", style: { marginTop: '16px' } }, h("div", { class: "action-btn", onClick: e => {
+                e.stopPropagation();
+                this.service.download(item);
+            } }, h("x-icon", { name: "download", size: 20 }), h("span", null, "Download")), h("div", { class: "action-btn", onClick: e => {
+                e.stopPropagation();
+                this.service.rename(item);
+            } }, h("x-icon", { name: "edit", size: 20 }), h("span", null, "Rename")), h("div", { class: "action-btn danger", onClick: e => {
+                e.stopPropagation();
+                this.service.delete(item);
+            } }, h("x-icon", { name: "delete", size: 20 }), h("span", null, "Delete"))))))));
     }
     renderFooter() {
         const hasSelection = this.state.selectedItems.length > 0;
-        return (h("x-footer", { class: "selection-footer" }, h("x-flex", { justify: "space-between", align: "center", style: { width: '100%' } }, h("x-flex", { align: "center", gap: "8" }, hasSelection && (h(Fragment, null, h("x-icon", { name: "check_circle", size: "18", color: "var(--x-color-primary)" }), h("span", { class: "text" }, this.state.selectedItems.length, " items selected")))), h("x-flex", { align: "center", gap: "8" }, h("x-space", null, h("x-button", { type: "text", onClick: (e) => {
+        return (h("x-footer", { class: "selection-footer" }, h("x-flex", { justify: "space-between", align: "center", style: { width: '100%' } }, h("x-flex", { align: "center", gap: "8" }, hasSelection && (h(Fragment, null, h("x-icon", { name: "check_circle", size: "18", color: "var(--x-color-primary)" }), h("span", { class: "text" }, this.state.selectedItems.length, " items selected")))), h("x-flex", { align: "center", gap: "8" }, h("x-space", null, h("x-button", { type: "text", onClick: e => {
                 e.stopPropagation();
                 this.service.clearSelection();
                 if (this.displayMode === 'dialog') {
@@ -627,12 +634,12 @@ const XFinder = class {
     render() {
         const isGrid = this.state.viewMode === 'grid';
         const items = this.state.filteredItems || [];
-        const content = (h("x-layout", { key: '5094b9695720b295e038e97f3f18726e926970ba', class: "finder-container", fixed: true }, this.renderHeader(), h("x-layout", { key: '123f21a544c21a73658e4ff9a98458bb691e9104', hasSiderProp: true, fixed: false }, this.renderSidebar(), h("x-layout", { key: 'aea9694a8167a070dd16102dcaa1a8262d580dcd', hasSiderProp: true, fixed: true }, h("x-content", { key: '5f27961a6e0dbe85b16b5ad590429bcb0515eaf5', class: "main-content" }, this.renderBreadcrumbs(), h("div", { key: '07ca6371d162b9f0a3f99e5db0c1f2e514765b47', class: {
+        const content = (h("x-layout", { key: '5fb749654a407a02bb02ae79874980b88f5684b2', class: "finder-container", fixed: true }, this.renderHeader(), h("x-layout", { key: 'fece82e9563ec289707611eaa6b8fd5fb893e076', hasSiderProp: true, fixed: false }, this.renderSidebar(), h("x-layout", { key: 'b1a10e0b023d40a6d8366163e9d59ed40d119af9', hasSiderProp: true, fixed: true }, h("x-content", { key: '7bc1a35be5c52d40153f505a1ee326b3c78b8a40', class: "main-content" }, this.renderBreadcrumbs(), h("div", { key: '325d305b5a4b1164e775ae6af33098804b5cb710', class: {
                 'items-viewport': true,
                 'items-viewport-grid': isGrid,
                 'items-viewport-list': !isGrid,
-            }, ref: this.setItemsViewportRef, onScroll: this.handleItemsViewportScroll }, h("x-spin", { key: '61612ab7ff99bfb22649673f8c791ce95a749007', spinning: this.state.loading, style: { width: '100%' } }, items.length === 0 ? (h("div", { class: "empty-center" }, h("x-empty", { description: "No items found" }))) : isGrid ? (h("div", { class: "items-grid" }, h("x-row", { gutter: 24 }, items.map((item) => this.renderGridItem(item))))) : (h("div", { class: "items-list" }, this.renderVirtualList(items))))))), this.renderDetails()), this.renderFooter(), h("input", { key: 'a613a663e1cf46ea33b807544a853bdbcb7f9c05', type: "file", ref: (el) => (this.fileInput = el), style: { display: 'none' }, onChange: this.handleFileSelected })));
-        return (h(Host, { key: 'ee145b2cabb7020bf1db35477ed2299774408844' }, h("div", { key: 'f56a8f764b044a4842c5cb121e393475db16b762', class: "page-wrapper" }, content)));
+            }, ref: this.setItemsViewportRef, onScroll: this.handleItemsViewportScroll }, h("x-spin", { key: '4d1ea5d41d6dd9131792ac6e02541a069847d9f1', spinning: this.state.loading, style: { width: '100%' } }, items.length === 0 ? (h("div", { class: "empty-center" }, h("x-empty", { description: "No items found" }))) : isGrid ? (h("div", { class: "items-grid" }, h("x-row", { gutter: 24 }, items.map(item => this.renderGridItem(item))))) : (h("div", { class: "items-list" }, this.renderVirtualList(items))))))), this.renderDetails()), this.renderFooter(), h("input", { key: 'deeba5f21ec0045934b51c5921e286a355d11142', type: "file", ref: el => (this.fileInput = el), style: { display: 'none' }, onChange: this.handleFileSelected })));
+        return (h(Host, { key: '8e6023d093104d8c80071a725aca32fe21c8414b' }, h("div", { key: '02308f43892839e45acac1fbdfd6346208dce7d5', class: "page-wrapper" }, content)));
     }
     static get watchers() { return {
         "config": [{