@xlabs-store/core 0.0.1

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

@@ -0,0 +1,215 @@
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-ig_mFsVk.js';
+import { t as translate } from './locale.service-D66tF8_2.js';
+import { g as getIcon } from './config-BPeosvTA.js';
+
+const xModalContentCss = () => `@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-modal-create-wrapper{font-family:var(--x-modal-font-family, var(--x-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif))}.x-modal-create-wrapper .x-modal-mask{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--x-modal-mask-bg, var(--x-color-bg-mask, rgba(0, 0, 0, 0.45)));z-index:var(--x-modal-mask-z-index, 1000);-webkit-animation:x-modal-mask-fade-in var(--x-modal-motion-duration, var(--x-motion-duration-slow, 0.3s));animation:x-modal-mask-fade-in var(--x-modal-motion-duration, var(--x-motion-duration-slow, 0.3s))}.x-modal-create-wrapper .x-modal-wrap{position:fixed;top:0;left:0;width:100%;height:100%;overflow:auto;outline:0;z-index:var(--x-modal-z-index, 1000);display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:center;justify-content:center;padding:var(--x-modal-padding-top, 100px) 0 var(--x-modal-padding-bottom, var(--x-spacing-xl, 24px))}.x-modal-create-wrapper .x-modal-wrap.x-modal-centered{-ms-flex-align:center;align-items:center;padding:0}.x-modal-create-wrapper .x-modal-content{position:relative;background-color:var(--x-modal-content-bg, var(--x-color-bg-container, #ffffff));background-clip:padding-box;border:0;border-radius:var(--x-modal-content-border-radius, var(--x-border-radius-lg, 8px));-webkit-box-shadow:var(--x-modal-content-shadow, var(--x-box-shadow, 0 6px 16px 0 rgba(0, 0, 0, 0.08)));box-shadow:var(--x-modal-content-shadow, var(--x-box-shadow, 0 6px 16px 0 rgba(0, 0, 0, 0.08)));pointer-events:auto;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-animation:x-modal-zoom-in var(--x-modal-motion-duration, var(--x-motion-duration-slow, 0.3s));animation:x-modal-zoom-in var(--x-modal-motion-duration, var(--x-motion-duration-slow, 0.3s))}.x-modal-create-wrapper .x-modal-header{padding:var(--x-modal-header-padding-block, var(--x-spacing-md, 16px)) var(--x-modal-header-padding-inline, var(--x-spacing-xl, 24px));color:var(--x-modal-title-color, var(--x-color-text-heading, rgba(0, 0, 0, 0.88)));background:var(--x-modal-header-bg, var(--x-color-bg-container, #ffffff));border-bottom:var(--x-modal-header-border-width, var(--x-border-width, 1px)) solid var(--x-modal-header-border-color, var(--x-color-border-secondary, #f0f0f0));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;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center}.x-modal-create-wrapper .x-modal-title{margin:0;color:var(--x-modal-title-color, var(--x-color-text-heading, rgba(0, 0, 0, 0.88)));font-weight:var(--x-modal-title-font-weight, var(--x-font-weight-strong, 600));font-size:var(--x-modal-title-font-size, var(--x-font-size-lg, 16px));line-height:var(--x-modal-close-size, 22px);word-wrap:break-word}.x-modal-create-wrapper .x-modal-close{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:var(--x-modal-close-size, 22px);height:var(--x-modal-close-size, 22px);margin-right:-12px;padding:0;color:var(--x-modal-close-color, var(--x-color-icon, rgba(0, 0, 0, 0.45)));font-weight:700;font-size:20px;line-height:1;text-decoration:none;background:transparent;border:0;outline:0;cursor:pointer;-webkit-transition:color var(--x-modal-motion-duration, var(--x-motion-duration-slow, 0.3s));transition:color var(--x-modal-motion-duration, var(--x-motion-duration-slow, 0.3s))}.x-modal-create-wrapper .x-modal-close:hover{color:var(--x-modal-close-color-hover, var(--x-color-icon-hover, rgba(0, 0, 0, 0.88)))}.x-modal-create-wrapper .x-modal-body{padding:var(--x-modal-body-padding, var(--x-spacing-xl, 24px));font-size:var(--x-modal-body-font-size, var(--x-font-size-base, 14px));line-height:var(--x-modal-body-line-height, var(--x-line-height-base, 1.5714));word-wrap:break-word;-ms-flex:1;flex:1;overflow:auto}.x-modal-create-wrapper .x-modal-footer{padding:var(--x-modal-footer-padding-block, var(--x-spacing-sm, 8px)) var(--x-modal-footer-padding-inline, var(--x-spacing-md, 16px));text-align:right;background:transparent;border-top:var(--x-modal-header-border-width, var(--x-border-width, 1px)) solid var(--x-modal-footer-border-color, var(--x-color-border-secondary, #f0f0f0));border-radius:0 0 var(--x-modal-footer-border-radius, var(--x-border-radius-xs, 2px)) var(--x-modal-footer-border-radius, var(--x-border-radius-xs, 2px));display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;gap:var(--x-modal-footer-gap, var(--x-spacing-xs, 8px))}.x-modal-create-wrapper .x-modal-footer.x-modal-footer-method{border-top:none;padding:var(--x-modal-method-footer-padding, var(--x-spacing-xl, 16px 40px 32px));-ms-flex-pack:center;justify-content:center;gap:16px}.x-modal-create-wrapper{}.x-modal-create-wrapper.x-modal-method .x-modal-header-method{border-bottom:none;padding-bottom:0;-ms-flex-pack:end;justify-content:flex-end}.x-modal-create-wrapper.x-modal-method .x-modal-header-method .x-modal-close{margin-top:-8px;margin-right:0}.x-modal-create-wrapper.x-modal-method .x-modal-body-method{padding:var(--x-modal-method-body-padding, var(--x-spacing-xl, 32px 40px 16px))}.x-modal-create-wrapper.x-modal-method .x-modal-method-content-wrapper{-webkit-box-shadow:0 10px 32px rgba(0, 0, 0, 0.12);box-shadow:0 10px 32px rgba(0, 0, 0, 0.12);border-radius:16px;overflow:hidden;-webkit-transition:all 0.3s cubic-bezier(0.23, 1, 0.32, 1);transition:all 0.3s cubic-bezier(0.23, 1, 0.32, 1)}.x-modal-create-wrapper.x-modal-method .x-modal-method-content-wrapper:hover{-webkit-box-shadow:0 16px 48px rgba(0, 0, 0, 0.16);box-shadow:0 16px 48px rgba(0, 0, 0, 0.16);-webkit-transform:translateY(-2px);transform:translateY(-2px)}@-webkit-keyframes x-modal-mask-fade-in{from{opacity:0}to{opacity:1}}@keyframes x-modal-mask-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes x-modal-zoom-in{from{opacity:0;-webkit-transform:scale(0.8);transform:scale(0.8)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes x-modal-zoom-in{from{opacity:0;-webkit-transform:scale(0.8);transform:scale(0.8)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes x-modal-content-fade-up{from{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes x-modal-content-fade-up{from{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}.x-modal-method-centered{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;text-align:center;-webkit-animation:x-modal-content-fade-up 0.4s cubic-bezier(0.23, 1, 0.32, 1);animation:x-modal-content-fade-up 0.4s cubic-bezier(0.23, 1, 0.32, 1)}.x-modal-method-icon-circle{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:var(--x-modal-method-icon-size, 72px);height:var(--x-modal-method-icon-size, 72px);border-radius:50%;margin-bottom:24px;font-size:var(--x-modal-method-icon-font-size, var(--x-font-size-xl, 32px));position:relative}.x-modal-method-icon-circle::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:50%;-webkit-transform:scale(1.1);transform:scale(1.1);opacity:0;-webkit-transition:all 0.5s ease;transition:all 0.5s ease}.x-modal-method-icon-circle:hover::after{-webkit-transform:scale(1.2);transform:scale(1.2);opacity:0.1}.x-modal-method-icon-info{background-color:var(--x-modal-method-info-bg, var(--x-color-info-bg, #E6F4FF));color:var(--x-modal-method-info-color, var(--x-color-info, #1677FF))}.x-modal-method-icon-info::after{background-color:var(--x-modal-method-info-color, var(--x-color-info, #1677FF))}.x-modal-method-icon-success{background-color:var(--x-modal-method-success-bg, var(--x-color-success-bg, #F6FFED));color:var(--x-modal-method-success-color, var(--x-color-success, #52C41A))}.x-modal-method-icon-success::after{background-color:var(--x-modal-method-success-color, var(--x-color-success, #52C41A))}.x-modal-method-icon-error{background-color:var(--x-modal-method-error-bg, var(--x-color-error-bg, #FFF1F0));color:var(--x-modal-method-error-color, var(--x-color-error, #FF4D4F))}.x-modal-method-icon-error::after{background-color:var(--x-modal-method-error-color, var(--x-color-error, #FF4D4F))}.x-modal-method-icon-warning,.x-modal-method-icon-confirm{background-color:var(--x-modal-method-warning-bg, var(--x-color-warning-bg, #FFFBE6));color:var(--x-modal-method-warning-color, var(--x-color-warning, #FAAD14))}.x-modal-method-icon-warning::after,.x-modal-method-icon-confirm::after{background-color:var(--x-modal-method-warning-color, var(--x-color-warning, #FAAD14))}.x-modal-method-title-centered{color:var(--x-modal-method-title-color, var(--x-color-text-heading, #1A3353));font-weight:700;font-size:var(--x-modal-method-title-font-size, var(--x-font-size-xl, 20px));line-height:1.4;margin:0 0 12px}.x-modal-method-message-centered{color:var(--x-modal-method-message-color, var(--x-color-text-secondary, #5E718D));font-size:var(--x-modal-method-message-font-size, var(--x-font-size-lg, 15px));line-height:1.6;max-width:90%;margin:0 auto}.x-modal-mask{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--x-modal-mask-bg, var(--x-color-bg-mask, rgba(0, 0, 0, 0.45)));z-index:var(--x-modal-mask-z-index, 1000);-webkit-animation:x-modal-mask-fade-in var(--x-modal-motion-duration, var(--x-motion-duration-slow, 0.3s));animation:x-modal-mask-fade-in var(--x-modal-motion-duration, var(--x-motion-duration-slow, 0.3s))}@keyframes x-modal-mask-fade-in{from{opacity:0}to{opacity:1}}.x-modal-wrap{position:fixed;top:0;left:0;width:100%;height:100%;overflow:auto;outline:0;z-index:var(--x-modal-z-index, 1000);display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:center;justify-content:center;padding:var(--x-modal-padding-top, 100px) 0 var(--x-modal-padding-bottom, var(--x-spacing-xl, 24px))}.x-modal-wrap.x-modal-centered{-ms-flex-align:center;align-items:center;padding:0}.x-modal-content{position:relative;background-color:var(--x-modal-content-bg, var(--x-color-bg-container, #ffffff));background-clip:padding-box;border:0;border-radius:var(--x-modal-content-border-radius, var(--x-border-radius-lg, 8px));-webkit-box-shadow:var(--x-modal-content-shadow, var(--x-box-shadow, 0 6px 16px 0 rgba(0, 0, 0, 0.08)));box-shadow:var(--x-modal-content-shadow, var(--x-box-shadow, 0 6px 16px 0 rgba(0, 0, 0, 0.08)));pointer-events:auto;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-animation:x-modal-zoom-in var(--x-modal-motion-duration, var(--x-motion-duration-slow, 0.3s));animation:x-modal-zoom-in var(--x-modal-motion-duration, var(--x-motion-duration-slow, 0.3s))}@keyframes x-modal-zoom-in{from{opacity:0;-webkit-transform:scale(0.8);transform:scale(0.8)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.x-modal-header{padding:var(--x-modal-header-padding-block, var(--x-spacing-md, 16px)) var(--x-modal-header-padding-inline, var(--x-spacing-xl, 24px));color:var(--x-modal-title-color, var(--x-color-text-heading, rgba(0, 0, 0, 0.88)));background:var(--x-modal-header-bg, var(--x-color-bg-container, #ffffff));border-bottom:var(--x-modal-header-border-width, var(--x-border-width, 1px)) solid var(--x-modal-header-border-color, var(--x-color-border-secondary, #f0f0f0));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;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center}.x-modal-title{margin:0;color:var(--x-modal-title-color, var(--x-color-text-heading, rgba(0, 0, 0, 0.88)));font-weight:var(--x-modal-title-font-weight, var(--x-font-weight-strong, 600));font-size:var(--x-modal-title-font-size, var(--x-font-size-lg, 16px));line-height:var(--x-modal-close-size, 22px);word-wrap:break-word}.x-modal-close{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:var(--x-modal-close-size, 22px);height:var(--x-modal-close-size, 22px);margin-right:-12px;padding:0;color:var(--x-modal-close-color, var(--x-color-icon, rgba(0, 0, 0, 0.45)));font-weight:700;font-size:20px;line-height:1;text-decoration:none;background:transparent;border:0;outline:0;cursor:pointer;-webkit-transition:color var(--x-modal-motion-duration, var(--x-motion-duration-slow, 0.3s));transition:color var(--x-modal-motion-duration, var(--x-motion-duration-slow, 0.3s))}.x-modal-close:hover{color:var(--x-modal-close-color-hover, var(--x-color-icon-hover, rgba(0, 0, 0, 0.88)));text-decoration:none}.x-modal-close:focus{outline:none}.x-modal-body{padding:var(--x-modal-body-padding, var(--x-spacing-xl, 24px));font-size:var(--x-modal-body-font-size, var(--x-font-size-base, 14px));line-height:var(--x-modal-body-line-height, var(--x-line-height-base, 1.5714));word-wrap:break-word;-ms-flex:1;flex:1;overflow:auto}.x-modal-footer{padding:var(--x-modal-footer-padding-block, var(--x-spacing-sm, 8px)) var(--x-modal-footer-padding-inline, var(--x-spacing-md, 16px));text-align:right;background:transparent;border-top:var(--x-modal-header-border-width, var(--x-border-width, 1px)) solid var(--x-modal-footer-border-color, var(--x-color-border-secondary, #f0f0f0));border-radius:0 0 var(--x-modal-footer-border-radius, var(--x-border-radius-xs, 2px)) var(--x-modal-footer-border-radius, var(--x-border-radius-xs, 2px));display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;gap:var(--x-modal-footer-gap, var(--x-spacing-xs, 8px))}`;
+
+const XModalContent = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.xOk = createEvent(this, "xOk", 7);
+        this.xCancel = createEvent(this, "xCancel", 7);
+    }
+    get el() { return getElement(this); }
+    /**
+     * Modal title.
+     * @example
+     * <x-modal-content modalTitle="Confirm"></x-modal-content>
+     */
+    modalTitle;
+    /**
+     * Whether to show the header.
+     */
+    showHeader = true;
+    /**
+     * Width of the modal.
+     * @example
+     * <x-modal-content width={600}></x-modal-content>
+     */
+    width = 520;
+    /**
+     * Whether to show footer.
+     * @example
+     * <x-modal-content footer={false}></x-modal-content>
+     */
+    footer = true;
+    /**
+     * Whether to show close button.
+     * @example
+     * <x-modal-content closable={false}></x-modal-content>
+     */
+    closable = true;
+    /**
+     * Whether to show mask.
+     * @example
+     * <x-modal-content mask={false}></x-modal-content>
+     */
+    mask = true;
+    /**
+     * Whether clicking mask closes modal.
+     * @example
+     * <x-modal-content maskClosable={false}></x-modal-content>
+     */
+    maskClosable = true;
+    /**
+     * Whether to center the modal.
+     * @example
+     * <x-modal-content centered></x-modal-content>
+     */
+    centered = false;
+    /**
+     * OK button text.
+     * @example
+     * <x-modal-content okText="OK"></x-modal-content>
+     */
+    okText = translate('Modal.okText', {}, 'OK');
+    /**
+     * Cancel button text.
+     * @example
+     * <x-modal-content cancelText="Cancel"></x-modal-content>
+     */
+    cancelText = translate('Modal.cancelText', {}, 'Cancel');
+    /**
+     * OK button loading state.
+     * @example
+     * <x-modal-content okLoading></x-modal-content>
+     */
+    okLoading = false;
+    /**
+     * Cancel button loading state.
+     * @example
+     * <x-modal-content cancelLoading></x-modal-content>
+     */
+    cancelLoading = false;
+    /**
+     * OK button type.
+     * @example
+     * <x-modal-content okType="primary"></x-modal-content>
+     */
+    okType = 'primary';
+    /**
+     * Whether OK button is danger style.
+     */
+    okDanger = false;
+    /**
+     * Modal type (info, success, error, warning, confirm).
+     */
+    type;
+    /**
+     * Body content - HTML string or text.
+     * @example
+     * <x-modal-content bodyContent="Hello"></x-modal-content>
+     */
+    bodyContent = '';
+    /**
+     * Footer content - HTML string.
+     * @example
+     * <x-modal-content footerContent="<b>Footer</b>"></x-modal-content>
+     */
+    footerContent = '';
+    /**
+     * Body style.
+     */
+    bodyStyle;
+    /**
+     * Mask style.
+     */
+    maskStyle;
+    /**
+     * Wrapper style.
+     */
+    wrapStyle;
+    /**
+     * Event emitted when OK button is clicked.
+     * @example
+     * <x-modal-content onXOk={() => {}}></x-modal-content>
+     */
+    xOk;
+    /**
+     * Event emitted when Cancel button is clicked or modal is closed.
+     * @example
+     * <x-modal-content onXCancel={() => {}}></x-modal-content>
+     */
+    xCancel;
+    /**
+     * Handle mask click to close when allowed.
+     * @param e - Mouse event.
+     * @returns void
+     */
+    handleWrapClick = (e) => {
+        if (e.target === e.currentTarget && this.maskClosable) {
+            this.xCancel.emit();
+        }
+    };
+    /**
+     * Get icon font-icon name based on type.
+     */
+    getTypeIcon() {
+        switch (this.type) {
+            case 'info': return getIcon('info');
+            case 'success': return getIcon('check');
+            case 'error': return getIcon('close');
+            case 'warning': return getIcon('warning');
+            case 'confirm': return getIcon('question');
+            default: return null;
+        }
+    }
+    /**
+     * Emit OK event.
+     * @returns void
+     */
+    handleOk = () => {
+        this.xOk.emit();
+    };
+    /**
+     * Emit Cancel event.
+     * @returns void
+     */
+    handleCancel = () => {
+        this.xCancel.emit();
+    };
+    /**
+     * Render modal markup with header, body, and footer.
+     *
+     * Flow:
+     * 1. Renders mask overlay (if enabled).
+     * 2. Renders wrapper div with click handler for mask closing.
+     * 3. Renders modal content container with dynamic width.
+     * 4. Renders header with title and close button.
+     * 5. Renders body with projected HTML content.
+     * 6. Renders footer with custom content or default buttons (OK/Cancel).
+     *
+     * @returns JSX.Element
+     * @example
+     * <x-modal-content modalTitle="Confirm" bodyContent="Content"></x-modal-content>
+     */
+    render() {
+        const contentStyle = {};
+        contentStyle.width = typeof this.width === 'number' ? `${this.width}px` : this.width;
+        const wrapClasses = {
+            'x-modal-wrap': true,
+            'x-modal-centered': this.centered || !!this.type,
+            [`x-modal-${this.type}`]: !!this.type,
+        };
+        const isMethod = !!this.type || (this.el && this.el.getAttribute('type') !== null);
+        return (h("div", { key: 'ed9186dab41efba82f9242403267b8d60645c70b', class: "x-modal-content-root" }, this.mask && h("div", { key: 'a80602f9c327e9c6e50820265fc6c05cefc4dfc3', class: "x-modal-mask", style: this.maskStyle }), h("div", { key: '793f6a17288ea512194c87dc863fc7b0e6dd2698', class: wrapClasses, onClick: this.handleWrapClick, style: this.wrapStyle }, h("div", { key: '45e4106829225768c488bfa947ba35f67439e5cc', class: {
+                'x-modal-content': true,
+                'x-modal-method-content-wrapper': isMethod,
+            }, style: contentStyle }, this.showHeader && (h("div", { key: '657b790ce55b75fbdc51b795a15988604ff1670e', class: {
+                'x-modal-header': true,
+                'x-modal-header-method': isMethod,
+            } }, !isMethod && h("div", { key: '86cd2c8edfbebcc36b713e64cf511a0311602c21', class: "x-modal-title" }, this.modalTitle), this.closable && (h("button", { key: 'd6bc942667195387a8963dc7053cd87b1f04352a', class: "x-modal-close", onClick: this.handleCancel, "aria-label": translate('global.close', {}, 'Close') }, h("x-icon", { key: '09db89790538be78a2e5865448f17d44f6b6f4e0', name: getIcon('close') }))))), h("div", { key: 'b67e64ccd84f06753ec9fa17d06ee3a076ed236c', class: {
+                'x-modal-body': true,
+                'x-modal-body-method': isMethod,
+            }, style: this.bodyStyle }, isMethod && (h("div", { key: '1cb50550d6230792d4c2b7fa96e0cad06306879a', class: "x-modal-method-centered" }, this.getTypeIcon() && (h("div", { key: 'da131b6d1b86b4cd6f4351a68e2a5a9bcdce28e6', class: `x-modal-method-icon-circle x-modal-method-icon-${this.type}` }, h("x-icon", { key: '78882dc5345de487bbc82827fe852c29fba3c7c4', name: this.getTypeIcon() }))), this.modalTitle && h("h3", { key: '47b55ded22cc27c2dd1bdaa8737fafbc29b6a0d2', class: "x-modal-method-title-centered" }, this.modalTitle), h("div", { key: 'c75c28d9c137f87b2149d9372e906465b2708c00', class: "x-modal-method-message-centered", innerHTML: this.bodyContent }))), !isMethod && (h("div", { key: '9a5e31dee18538efd63451ea21a41d9f43e815e8', class: "x-modal-body-content" }, this.bodyContent ? h("div", { innerHTML: this.bodyContent }) : h("slot", null)))), this.footer && (h("div", { key: 'd6f5d825aa8b373bbaedb26fb28f9122e5ba6a0a', class: {
+                'x-modal-footer': true,
+                'x-modal-footer-method': isMethod,
+            } }, this.footerContent ? (h("div", { innerHTML: this.footerContent })) : ([
+            this.cancelText !== null && (h("x-button", { onClick: this.handleCancel, loading: this.cancelLoading, class: "x-modal-footer-btn-cancel" }, this.cancelText)),
+            h("x-button", { type: this.okType, danger: this.okDanger || this.type === 'error', onClick: this.handleOk, loading: this.okLoading, class: "x-modal-footer-btn-ok" }, this.okText),
+        ])))))));
+    }
+};
+XModalContent.style = xModalContentCss();
+
+export { XModalContent as x_modal_content };

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

@@ -0,0 +1,323 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-ig_mFsVk.js';
+import { g as getIcon } from './config-BPeosvTA.js';
+
+const xNotificationCss = () => `@charset "UTF-8";:root{--x-color-primary:#1677ff;--x-color-primary-rgb:22, 119, 255;--x-color-primary-contrast:#ffffff;--x-color-primary-contrast-rgb:255, 255, 255;--x-color-primary-shade:#0958d9;--x-color-primary-tint:#4096ff;--x-color-primary-bg:#e6f4ff;--x-color-primary-bg-hover:#bae0ff;--x-color-primary-border:#91caff;--x-color-primary-border-hover:#69b1ff;--x-color-primary-hover:#4096ff;--x-color-primary-active:#0958d9;--x-color-primary-text:#1677ff;--x-color-primary-text-hover:#4096ff;--x-color-primary-text-active:#0958d9;--x-color-secondary:#3dc2ff;--x-color-secondary-rgb:61, 194, 255;--x-color-secondary-contrast:#ffffff;--x-color-secondary-contrast-rgb:255, 255, 255;--x-color-secondary-shade:#36abe0;--x-color-secondary-tint:#50c8ff;--x-color-success:#52c41a;--x-color-success-rgb:82, 196, 26;--x-color-success-contrast:#ffffff;--x-color-success-contrast-rgb:255, 255, 255;--x-color-success-shade:#389e0d;--x-color-success-tint:#73d13d;--x-color-success-bg:#f6ffed;--x-color-success-bg-hover:#d9f7be;--x-color-success-border:#b7eb8f;--x-color-success-border-hover:#95de64;--x-color-success-hover:#73d13d;--x-color-success-active:#389e0d;--x-color-success-text:#52c41a;--x-color-success-text-hover:#73d13d;--x-color-success-text-active:#389e0d;--x-color-warning:#faad14;--x-color-warning-rgb:250, 173, 20;--x-color-warning-contrast:#000000;--x-color-warning-contrast-rgb:0, 0, 0;--x-color-warning-shade:#d48806;--x-color-warning-tint:#ffc53d;--x-color-warning-bg:#fffbe6;--x-color-warning-bg-hover:#fff1b8;--x-color-warning-border:#ffe58f;--x-color-warning-border-hover:#ffd666;--x-color-warning-hover:#ffc53d;--x-color-warning-active:#d48806;--x-color-warning-text:#faad14;--x-color-warning-text-hover:#ffc53d;--x-color-warning-text-active:#d48806;--x-color-danger:#ff4d4f;--x-color-danger-rgb:255, 77, 79;--x-color-danger-contrast:#ffffff;--x-color-danger-contrast-rgb:255, 255, 255;--x-color-danger-shade:#cf1322;--x-color-danger-tint:#ff7875;--x-color-error:#ff4d4f;--x-color-error-rgb:255, 77, 79;--x-color-error-bg:#fff2f0;--x-color-error-bg-hover:#ffccc7;--x-color-error-border:#ffa39e;--x-color-error-border-hover:#ff7875;--x-color-error-hover:#ff7875;--x-color-error-active:#d9363e;--x-color-error-text:#ff4d4f;--x-color-error-text-hover:#ff7875;--x-color-error-text-active:#d9363e;--x-color-info:#1677ff;--x-color-info-rgb:22, 119, 255;--x-color-info-bg:#e6f4ff;--x-color-info-bg-hover:#bae0ff;--x-color-info-border:#91caff;--x-color-info-border-hover:#69b1ff;--x-color-info-hover:#69b1ff;--x-color-info-active:#0958d9;--x-color-info-text:#1677ff;--x-color-info-text-hover:#69b1ff;--x-color-info-text-active:#0958d9;--x-color-text:rgba(0, 0, 0, 0.88);--x-color-text-secondary:rgba(0, 0, 0, 0.65);--x-color-text-tertiary:rgba(0, 0, 0, 0.45);--x-color-text-quaternary:rgba(0, 0, 0, 0.25);--x-color-text-disabled:rgba(0, 0, 0, 0.25);--x-color-text-placeholder:rgba(0, 0, 0, 0.25);--x-color-text-heading:rgba(0, 0, 0, 0.88);--x-color-text-label:rgba(0, 0, 0, 0.65);--x-color-text-description:rgba(0, 0, 0, 0.45);--x-color-text-light-solid:#ffffff;--x-color-bg-container:#ffffff;--x-color-bg-elevated:#ffffff;--x-color-bg-layout:#f5f5f5;--x-color-bg-spotlight:rgba(0, 0, 0, 0.85);--x-color-bg-mask:rgba(0, 0, 0, 0.45);--x-color-bg-base:#ffffff;--x-color-bg-container-disabled:#f5f5f5;--x-color-bg-container-loading:rgba(255, 255, 255, 0.65);--x-color-white:#ffffff;--x-color-fill:rgba(0, 0, 0, 0.15);--x-color-fill-secondary:rgba(0, 0, 0, 0.06);--x-color-fill-tertiary:rgba(0, 0, 0, 0.04);--x-color-fill-quaternary:rgba(0, 0, 0, 0.02);--x-color-border:#d9d9d9;--x-color-border-secondary:#f0f0f0;--x-color-border-bg:#ffffff;--x-color-split:rgba(5, 5, 5, 0.06);--x-color-dark:#222428;--x-color-dark-rgb:34, 36, 40;--x-color-dark-contrast:#ffffff;--x-color-dark-contrast-rgb:255, 255, 255;--x-color-dark-shade:#1e2023;--x-color-dark-tint:#383a3e;--x-color-medium:#92949c;--x-color-medium-rgb:146, 148, 156;--x-color-medium-contrast:#ffffff;--x-color-medium-contrast-rgb:255, 255, 255;--x-color-medium-shade:#808289;--x-color-medium-tint:#9d9fa6;--x-color-light:#f4f5f8;--x-color-light-rgb:244, 245, 248;--x-color-light-contrast:#000000;--x-color-light-contrast-rgb:0, 0, 0;--x-color-light-shade:#d7d8da;--x-color-light-tint:#f5f6f9;--x-font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--x-font-family-code:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;--x-font-size:14px;--x-font-size-sm:12px;--x-font-size-lg:16px;--x-font-size-xl:20px;--x-font-size-heading-1:38px;--x-font-size-heading-2:30px;--x-font-size-heading-3:24px;--x-font-size-heading-4:20px;--x-font-size-heading-5:16px;--x-line-height:1.5714285714285714;--x-line-height-lg:1.5;--x-line-height-sm:1.6666666666666667;--x-line-height-heading-1:1.2105263157894737;--x-line-height-heading-2:1.2666666666666666;--x-line-height-heading-3:1.3333333333333333;--x-line-height-heading-4:1.4;--x-line-height-heading-5:1.5;--x-font-weight-normal:400;--x-font-weight-medium:500;--x-font-weight-semibold:600;--x-font-weight-strong:600;--x-font-size-base:14px;--x-font-size-xxl:24px;--x-line-height-base:1.5714285714285714;--x-spacing-xxs:4px;--x-spacing-xs:8px;--x-spacing-sm:12px;--x-spacing-md:16px;--x-spacing-lg:20px;--x-spacing-xl:24px;--x-spacing-xxl:32px;--x-spacing-xxxl:48px;--x-margin-xxs:4px;--x-margin-xs:8px;--x-margin-sm:12px;--x-margin-md:16px;--x-margin-lg:24px;--x-margin-xl:32px;--x-margin-xxl:48px;--x-padding-xxs:4px;--x-padding-xs:8px;--x-padding-sm:12px;--x-padding-md:16px;--x-padding-lg:24px;--x-padding-content-horizontal-lg:24px;--x-padding-content-vertical-lg:12px;--x-padding-content-horizontal:16px;--x-padding-content-vertical:12px;--x-padding-content-horizontal-sm:16px;--x-padding-content-vertical-sm:8px;--x-border-radius:6px;--x-border-radius-xs:2px;--x-border-radius-sm:4px;--x-border-radius-lg:8px;--x-border-radius-xl:12px;--x-border-radius-outer:4px;--x-border-radius-base:6px;--x-border-width:1px;--x-border-width-base:1px;--x-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-shadow-lg:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-box-shadow-popover-arrow:2px 2px 5px rgba(0, 0, 0, 0.05);--x-box-shadow-card:0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);--x-box-shadow-drawer-right:-6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-left:6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-up:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-down:0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tabs-overflow-left:inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-right:inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-top:inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-bottom:inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);--x-motion-duration-fast:0.1s;--x-motion-duration-mid:0.2s;--x-motion-duration-slow:0.3s;--x-motion-ease-in-out:cubic-bezier(0.645, 0.045, 0.355, 1);--x-motion-ease-out:cubic-bezier(0.215, 0.61, 0.355, 1);--x-motion-ease-in:cubic-bezier(0.55, 0.055, 0.675, 0.19);--x-motion-ease-out-back:cubic-bezier(0.12, 0.4, 0.29, 1.46);--x-motion-ease-in-back:cubic-bezier(0.71, -0.46, 0.88, 0.6);--x-motion-ease-in-out-circle:cubic-bezier(0.78, 0.14, 0.15, 0.86);--x-motion-ease-out-circle:cubic-bezier(0.08, 0.82, 0.17, 1);--x-motion-ease-in-circle:cubic-bezier(0.6, 0.04, 0.98, 0.34);--x-motion-ease-in-quint:cubic-bezier(0.755, 0.05, 0.855, 0.06);--x-motion-ease-out-quint:cubic-bezier(0.23, 1, 0.32, 1);--x-z-index-base:0;--x-z-index-popup-base:1000;--x-z-index-popup:1030;--x-z-index-affix:10;--x-z-index-modal:1000;--x-z-index-modal-mask:1000;--x-z-index-drawer:1000;--x-z-index-popover:1030;--x-z-index-dropdown:1050;--x-z-index-tooltip:1070;--x-z-index-notification:1080;--x-z-index-message:1090;--x-z-index-popconfirm:1060;--x-z-index-table-fixed:10;--x-opacity-loading:0.65;--x-opacity-image:1;--x-opacity-disabled:0.5;--x-control-height:32px;--x-control-height-xs:24px;--x-control-height-sm:24px;--x-control-height-lg:40px;--x-control-radio-size:16px;--x-control-checkbox-size:16px;--x-control-padding-horizontal:12px;--x-control-padding-horizontal-sm:8px;--x-control-outline-width:2px;--x-control-outline:rgba(5, 145, 255, 0.1);--x-control-item-bg-hover:rgba(0, 0, 0, 0.04);--x-control-item-bg-active:#e6f4ff;--x-control-item-bg-active-hover:#bae0ff;--x-control-item-bg-active-disabled:rgba(0, 0, 0, 0.15);--x-control-tmp-outline:rgba(0, 0, 0, 0.02);--x-color-yellow:#fadb14;--x-color-yellow-rgb:250, 219, 20;--x-font-family-base:var(--x-font-family);--x-color-link:#1677ff;--x-color-link-hover:#69b1ff;--x-color-link-active:#0958d9;--x-color-icon:rgba(0, 0, 0, 0.45);--x-color-icon-hover:rgba(0, 0, 0, 0.88);--x-color-highlight:#ff4d4f;--x-color-bg-text-hover:rgba(0, 0, 0, 0.06);--x-color-bg-text-active:rgba(0, 0, 0, 0.15);--x-screen-xs:480px;--x-screen-xs-min:480px;--x-screen-xs-max:575px;--x-screen-sm:576px;--x-screen-sm-min:576px;--x-screen-sm-max:767px;--x-screen-md:768px;--x-screen-md-min:768px;--x-screen-md-max:991px;--x-screen-lg:992px;--x-screen-lg-min:992px;--x-screen-lg-max:1199px;--x-screen-xl:1200px;--x-screen-xl-min:1200px;--x-screen-xl-max:1599px;--x-screen-xxl:1600px;--x-screen-xxl-min:1600px;--x-color-fill-content:rgba(0, 0, 0, 0.06);--x-color-fill-content-hover:rgba(0, 0, 0, 0.15);--x-color-fill-alter:rgba(0, 0, 0, 0.02);--x-scrollbar-width:12px;--x-scrollbar-track-bg:rgba(0, 0, 0, 0.04);--x-scrollbar-thumb-bg:rgba(0, 0, 0, 0.25);--x-scrollbar-thumb-bg-hover:rgba(0, 0, 0, 0.35);--x-menu-dark-bg:#001529;--x-menu-dark-item-bg:#001529;--x-menu-dark-popup-bg:#001529;--x-menu-dark-submenu-item-bg:#000c17}:host{display:block;position:relative;width:var(--x-notification-width, 384px);max-width:var(--x-notification-max-width, calc(100vw - 32px));margin-bottom:var(--x-notification-margin-bottom, 16px);padding:var(--x-notification-padding-block, 16px) var(--x-notification-padding-inline, 24px);overflow:hidden;line-height:var(--x-notification-line-height, 1.5714);word-wrap:break-word;background:var(--x-notification-bg, #ffffff);border-radius:var(--x-notification-border-radius, 8px);-webkit-box-shadow:var(--x-notification-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));box-shadow:var(--x-notification-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));pointer-events:all;opacity:0;-webkit-transform:translateX(100%);transform:translateX(100%);-webkit-transition:opacity var(--x-notification-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-notification-motion-ease, cubic-bezier(0.645, 0.045, 0.355, 1)), margin var(--x-notification-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-notification-motion-ease, cubic-bezier(0.645, 0.045, 0.355, 1)), max-height var(--x-notification-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-notification-motion-ease, cubic-bezier(0.645, 0.045, 0.355, 1)), -webkit-transform var(--x-notification-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-notification-motion-ease, cubic-bezier(0.645, 0.045, 0.355, 1));transition:opacity var(--x-notification-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-notification-motion-ease, cubic-bezier(0.645, 0.045, 0.355, 1)), margin var(--x-notification-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-notification-motion-ease, cubic-bezier(0.645, 0.045, 0.355, 1)), max-height var(--x-notification-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-notification-motion-ease, cubic-bezier(0.645, 0.045, 0.355, 1)), -webkit-transform var(--x-notification-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-notification-motion-ease, cubic-bezier(0.645, 0.045, 0.355, 1));transition:opacity var(--x-notification-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-notification-motion-ease, cubic-bezier(0.645, 0.045, 0.355, 1)), transform var(--x-notification-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-notification-motion-ease, cubic-bezier(0.645, 0.045, 0.355, 1)), margin var(--x-notification-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-notification-motion-ease, cubic-bezier(0.645, 0.045, 0.355, 1)), max-height var(--x-notification-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-notification-motion-ease, cubic-bezier(0.645, 0.045, 0.355, 1));transition:opacity var(--x-notification-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-notification-motion-ease, cubic-bezier(0.645, 0.045, 0.355, 1)), transform var(--x-notification-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-notification-motion-ease, cubic-bezier(0.645, 0.045, 0.355, 1)), margin var(--x-notification-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-notification-motion-ease, cubic-bezier(0.645, 0.045, 0.355, 1)), max-height var(--x-notification-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-notification-motion-ease, cubic-bezier(0.645, 0.045, 0.355, 1)), -webkit-transform var(--x-notification-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-notification-motion-ease, cubic-bezier(0.645, 0.045, 0.355, 1))}:host(.x-notification-visible){opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}:host(.x-notification-closing){opacity:0;margin-bottom:0;max-height:0;padding-top:0;padding-bottom:0;overflow:hidden}:host(.x-notification-left){-webkit-transform:translateX(-100%);transform:translateX(-100%)}:host(.x-notification-left.x-notification-visible){-webkit-transform:translateX(0);transform:translateX(0)}:host(.x-notification-top){-webkit-transform:translateY(-100%);transform:translateY(-100%)}:host(.x-notification-top.x-notification-visible){-webkit-transform:translateY(0);transform:translateY(0)}:host(.x-notification-bottom){-webkit-transform:translateY(100%);transform:translateY(100%)}:host(.x-notification-bottom.x-notification-visible){-webkit-transform:translateY(0);transform:translateY(0)}.x-notification-content{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.x-notification-icon{-ms-flex-negative:0;flex-shrink:0;margin-right:var(--x-notification-icon-margin-right, 16px);font-size:var(--x-notification-icon-font-size, 24px);line-height:1}.x-notification-icon svg{width:1em;height:1em;fill:currentColor}.x-notification-icon-success{color:var(--x-notification-icon-success-color, #52c41a)}.x-notification-icon-info{color:var(--x-notification-icon-info-color, #1677ff)}.x-notification-icon-warning{color:var(--x-notification-icon-warning-color, #faad14)}.x-notification-icon-error{color:var(--x-notification-icon-error-color, #ff4d4f)}.x-notification-content-text{-ms-flex:1;flex:1;min-width:0}.x-notification-message{margin-bottom:var(--x-notification-message-margin-bottom, 8px);color:var(--x-notification-message-color, rgba(0, 0, 0, 0.88));font-size:var(--x-notification-message-font-size, 16px);font-weight:var(--x-notification-message-font-weight, 600);line-height:var(--x-notification-line-height, 1.5714)}.x-notification-description{font-size:var(--x-notification-description-font-size, 14px);color:var(--x-notification-description-color, rgba(0, 0, 0, 0.65));line-height:var(--x-notification-line-height, 1.5714)}.x-notification-btn{margin-top:12px;display:-ms-flexbox;display:flex;gap:8px}.x-notification-close{position:absolute;top:var(--x-notification-close-top, 16px);right:var(--x-notification-close-right, 22px);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:var(--x-notification-close-size, 22px);height:var(--x-notification-close-size, 22px);color:var(--x-notification-close-color, rgba(0, 0, 0, 0.45));background:transparent;border:0;outline:0;cursor:pointer;-webkit-transition:color 0.2s;transition:color 0.2s}.x-notification-close:hover{color:var(--x-notification-close-color-hover, rgba(0, 0, 0, 0.88))}.x-notification-close .x-notification-close-x{font-size:16px;font-style:normal;line-height:1}.x-notification-progress{position:absolute;bottom:0;left:0;width:100%;height:var(--x-notification-progress-height, 2px);background:var(--x-notification-progress-bg, linear-gradient(90deg, #69b1ff, #1677ff));-webkit-transform-origin:left;transform-origin:left;-webkit-animation:x-notification-progress linear forwards;animation:x-notification-progress linear forwards}@-webkit-keyframes x-notification-progress{from{-webkit-transform:scaleX(1);transform:scaleX(1)}to{-webkit-transform:scaleX(0);transform:scaleX(0)}}@keyframes x-notification-progress{from{-webkit-transform:scaleX(1);transform:scaleX(1)}to{-webkit-transform:scaleX(0);transform:scaleX(0)}}`;
+
+/**
+ * SVG icons for different notification types
+ */
+/**
+ * Get SVG icon HTML string for notification type.
+ * @param type - Notification type.
+ * @returns string
+ * @example
+ * getTypeIcon('success')
+ */
+const getTypeIcon = (type) => {
+    switch (type) {
+        case 'info':
+            return `<x-icon fill={true} size="24" type="round" name="${getIcon('info')}"></x-icon>`;
+        case 'success':
+            return `<x-icon fill={true} size="24" type="round" name="${getIcon('success')}"></x-icon>`;
+        case 'error':
+            return `<x-icon fill={true} size="24" type="round" name="${getIcon('error')}"></x-icon>`;
+        case 'warning':
+            return `<x-icon fill={true} size="24" type="round" name="${getIcon('warning')}"></x-icon>`;
+        default:
+            return '';
+    }
+};
+const XNotification = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.xClose = createEvent(this, "xClose", 7);
+    }
+    get el() { return getElement(this); }
+    /**
+     * Notification title/message.
+     * @example
+     * <x-notification message="Updated"></x-notification>
+     */
+    message = '';
+    /**
+     * Notification description.
+     * @example
+     * <x-notification description="Details"></x-notification>
+     */
+    description = '';
+    /**
+     * Duration in seconds before auto close (0 = never).
+     * @example
+     * <x-notification duration={6}></x-notification>
+     */
+    duration = 4.5;
+    /**
+     * Placement position.
+     * @example
+     * <x-notification placement="bottomRight"></x-notification>
+     */
+    placement = 'topRight';
+    /**
+     * Notification type.
+     * @example
+     * <x-notification type="success"></x-notification>
+     */
+    type;
+    /**
+     * Custom icon HTML.
+     * @example
+     * <x-notification icon="<svg></svg>"></x-notification>
+     */
+    icon;
+    /**
+     * Custom close icon HTML.
+     * @example
+     * <x-notification closeIcon="<span>x</span>"></x-notification>
+     */
+    closeIcon;
+    /**
+     * Custom action buttons HTML.
+     * @example
+     * <x-notification btn="<button>Retry</button>"></x-notification>
+     */
+    btn;
+    /**
+     * Unique key for notification.
+     * @example
+     * <x-notification notificationKey="noti-1"></x-notification>
+     */
+    notificationKey;
+    /**
+     * Show progress bar.
+     * @example
+     * <x-notification showProgress></x-notification>
+     */
+    showProgress = false;
+    /**
+     * Pause timer on hover.
+     * @example
+     * <x-notification pauseOnHover></x-notification>
+     */
+    pauseOnHover = true;
+    /**
+     * Accessibility role.
+     * @example
+     * <x-notification ariaRole="status"></x-notification>
+     */
+    ariaRole = 'alert';
+    /**
+     * Internal visibility state.
+     */
+    visible = false;
+    /**
+     * Closing state for animation.
+     */
+    closing = false;
+    /**
+     * Timer reference.
+     */
+    timer;
+    /**
+     * Progress animation duration.
+     */
+    progressDuration = 0;
+    /**
+     * Close promise resolver.
+     */
+    closeResolver;
+    /**
+     * Timer remaining for pause on hover.
+     */
+    timerRemaining = 0;
+    timerStartTime = 0;
+    /**
+     * Event when notification is closed.
+     * @example
+     * <x-notification onXClose={(ev) => console.log(ev.detail)}></x-notification>
+     */
+    xClose;
+    /**
+     * Show notification and start timer on load.
+     *
+     * Flow:
+     * 1. Triggers visibility animation.
+     * 2. Initializes progress bar duration.
+     * 3. Starts auto-close timer.
+     *
+     * @returns void
+     */
+    componentDidLoad() {
+        // Small delay to allow transition to happen
+        requestAnimationFrame(() => {
+            this.visible = true;
+        });
+        this.progressDuration = this.duration;
+        this.startCloseTimer();
+    }
+    /**
+     * Clear timers on disconnect.
+     * @returns void
+     */
+    disconnectedCallback() {
+        this.clearTimer();
+    }
+    /**
+     * Start auto-close timer if duration > 0.
+     * @returns void
+     */
+    startCloseTimer() {
+        this.clearTimer();
+        if (this.duration > 0) {
+            this.timerStartTime = Date.now();
+            this.timerRemaining = this.duration * 1000;
+            this.timer = setTimeout(() => {
+                this.close();
+            }, this.timerRemaining);
+        }
+    }
+    /**
+     * Clear any running timer.
+     * @returns void
+     */
+    clearTimer() {
+        if (this.timer) {
+            clearTimeout(this.timer);
+            this.timer = undefined;
+        }
+    }
+    /**
+     * Pause timer on hover when enabled.
+     *
+     * Flow:
+     * 1. Checks if pause is enabled and duration is positive.
+     * 2. Clears current timer.
+     * 3. Calculates remaining time.
+     *
+     * @returns void
+     */
+    handleMouseEnter = () => {
+        if (this.pauseOnHover && this.duration > 0) {
+            this.clearTimer();
+            this.timerRemaining -= Date.now() - this.timerStartTime;
+        }
+    };
+    /**
+     * Resume timer on mouse leave when enabled.
+     *
+     * Flow:
+     * 1. Checks if pause was active.
+     * 2. Resets start time.
+     * 3. Starts new timer with remaining duration.
+     *
+     * @returns void
+     */
+    handleMouseLeave = () => {
+        if (this.pauseOnHover && this.duration > 0 && this.timerRemaining > 0) {
+            this.timerStartTime = Date.now();
+            this.timer = setTimeout(() => {
+                this.close();
+            }, this.timerRemaining);
+        }
+    };
+    /**
+     * Close the notification.
+     * @returns Promise<void>
+     * @example
+     * await el.close()
+     */
+    async close() {
+        if (this.closing)
+            return;
+        this.closing = true;
+        this.visible = false;
+        // Wait for animation then remove
+        setTimeout(() => {
+            this.xClose.emit(this.notificationKey);
+            if (this.closeResolver) {
+                this.closeResolver();
+            }
+            this.el.remove();
+        }, 300);
+    }
+    /**
+     * Get a promise that resolves when notification closes.
+     * @returns Promise<void>
+     * @example
+     * await el.getClosePromise()
+     */
+    async getClosePromise() {
+        return new Promise((resolve) => {
+            this.closeResolver = resolve;
+        });
+    }
+    /**
+     * Update notification message.
+     * @param message - New message text.
+     * @returns Promise<void>
+     * @example
+     * await el.updateMessage('Updated')
+     */
+    async updateMessage(message) {
+        this.message = message;
+    }
+    /**
+     * Update notification description.
+     * @param description - New description text.
+     * @returns Promise<void>
+     * @example
+     * await el.updateDescription('Details')
+     */
+    async updateDescription(description) {
+        this.description = description;
+    }
+    /**
+     * Update notification duration and restart timer.
+     * @param duration - New duration in seconds.
+     * @returns Promise<void>
+     * @example
+     * await el.updateDuration(10)
+     */
+    async updateDuration(duration) {
+        this.duration = duration;
+        this.progressDuration = duration;
+        this.startCloseTimer();
+    }
+    /**
+     * Compute placement class based on placement prop.
+     * @returns string
+     */
+    getPlacementClass() {
+        const placement = this.placement;
+        if (placement.includes('Left'))
+            return 'x-notification-left';
+        if (placement === 'top' || placement === 'bottom') {
+            return `x-notification-${placement}`;
+        }
+        return '';
+    }
+    /**
+     * Render icon based on type or custom icon HTML.
+     * @returns JSX.Element | null
+     */
+    renderIcon() {
+        if (!this.type && !this.icon)
+            return null;
+        const iconHtml = this.icon || (this.type ? getTypeIcon(this.type) : '');
+        return (h("span", { class: `x-notification-icon${this.type ? ` x-notification-icon-${this.type}` : ''}`, innerHTML: iconHtml }));
+    }
+    /**
+     * Render notification container and progress bar.
+     * @returns JSX.Element
+     */
+    render() {
+        return (h(Host, { key: '5ff0d613edb227be7bd51be45c87c6f0f1715932', class: {
+                'x-notification': true,
+                'x-notification-visible': this.visible,
+                'x-notification-closing': this.closing,
+                [this.getPlacementClass()]: true,
+            }, role: this.ariaRole, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: 'bccba5c2dfd515ad30c0b4f36cf91422dfe1121d', class: "x-notification-content" }, this.renderIcon(), h("div", { key: '5a7d54d796f2e0e3d4c5d5ee5cb961de90aafdec', class: "x-notification-content-text" }, h("div", { key: 'ec7bca3ea4edac0e03825a940383bbe05469d7ab', class: "x-notification-message", innerHTML: this.message }), this.description && (h("div", { key: '5784a7c41210e39f5c6b75ccff29e805e75d50e2', class: "x-notification-description", innerHTML: this.description })), this.btn && (h("div", { key: '3d960ca68a08f5cbe53c0092cde5f3a480805897', class: "x-notification-btn", innerHTML: this.btn }))), h("button", { key: 'a5bd67b921703c1aaf34737099982c6b6b6a5aa8', class: "x-notification-close", "aria-label": "Close", onClick: () => this.close() }, this.closeIcon ? (h("span", { innerHTML: this.closeIcon })) : (h("x-icon", { name: getIcon('close') })))), this.showProgress && this.duration > 0 && (h("div", { key: 'f7764f25a829eb3a1eba5f41feaba9b8b5f02dea', class: "x-notification-progress", style: { animationDuration: `${this.progressDuration}s` } }))));
+    }
+};
+XNotification.style = xNotificationCss();
+
+export { XNotification as x_notification };