@uzum-tech/ui 1.5.2 → 1.5.4

package/dist/index.js

@@ -634,6 +634,13 @@
       }
     }
 
+    function isArrayShallowEqual(left, right) {
+      if (left === right) return true;
+      if (left === null || right === null) return false;
+      if (left.length !== right.length) return false;
+      return left.every((item, index) => item === right[index]);
+    }
+
     function getFirstSlotVNode(slots, slotName = "default", props = void 0) {
       const slot = slots[slotName];
       if (!slot) {
@@ -3405,7 +3412,7 @@
     }
 
     /* eslint-disable @typescript-eslint/no-non-null-assertion */
-    const style$1I = c([c('.v-binder-follower-container', {
+    const style$1J = c([c('.v-binder-follower-container', {
       position: 'absolute',
       left: '0',
       right: '0',
@@ -3484,7 +3491,7 @@
           }
         });
         const ssrAdapter = useSsrAdapter();
-        style$1I.mount({
+        style$1J.mount({
           id: 'vueuc/binder',
           head: true,
           anchorMetaName: cssrAnchorMetaName$1,
@@ -4768,7 +4775,7 @@
 
     /* eslint-disable @typescript-eslint/strict-boolean-expressions */
     const hiddenAttr = 'v-hidden';
-    const style$1H = c('[v-hidden]', {
+    const style$1I = c('[v-hidden]', {
       display: 'none!important'
     });
     var VOverflow = vue.defineComponent({
@@ -4869,7 +4876,7 @@
           }
         }
         const ssrAdapter = useSsrAdapter();
-        style$1H.mount({
+        style$1I.mount({
           id: 'vueuc/overflow',
           head: true,
           anchorMetaName: cssrAnchorMetaName$1,
@@ -5365,22 +5372,22 @@
         mergedSizeRef,
         mergedDisabledRef,
         mergedStatusRef,
-        nTriggerFormBlur() {
+        triggerFormBlur() {
           if (UFormItem) {
             UFormItem.handleContentBlur();
           }
         },
-        nTriggerFormChange() {
+        triggerFormChange() {
           if (UFormItem) {
             UFormItem.handleContentChange();
           }
         },
-        nTriggerFormFocus() {
+        triggerFormFocus() {
           if (UFormItem) {
             UFormItem.handleContentFocus();
           }
         },
-        nTriggerFormInput() {
+        triggerFormInput() {
           if (UFormItem) {
             UFormItem.handleContentInput();
           }
@@ -28396,7 +28403,7 @@
       };
     }
 
-    var style$1G = cB("affix", [cM("affixed", {
+    var style$1H = cB("affix", [cM("affixed", {
       position: "fixed"
     }, [cM("absolute-positioned", {
       position: "absolute"
@@ -28456,7 +28463,7 @@
       props: affixProps,
       setup(props) {
         const { mergedClsPrefixRef } = useConfig(props);
-        useStyle("-affix", style$1G, mergedClsPrefixRef);
+        useStyle("-affix", style$1H, mergedClsPrefixRef);
         let scrollTarget = null;
         const stickToTopRef = vue.ref(false);
         const stickToBottomRef = vue.ref(false);
@@ -29516,7 +29523,7 @@
       }
     });
 
-    var style$1F = cB("base-icon", `
+    var style$1G = cB("base-icon", `
   height: 1em;
   width: 1em;
   line-height: 1em;
@@ -29552,7 +29559,7 @@
         onMouseup: Function
       },
       setup(props) {
-        useStyle("-base-icon", style$1F, vue.toRef(props, "clsPrefix"));
+        useStyle("-base-icon", style$1G, vue.toRef(props, "clsPrefix"));
       },
       render() {
         return /* @__PURE__ */ vue.h(
@@ -29572,7 +29579,7 @@
       }
     });
 
-    var style$1E = cB("base-close", `
+    var style$1F = cB("base-close", `
   display: flex;
   align-items: center;
   justify-content: center;
@@ -29644,7 +29651,7 @@
         absolute: Boolean
       },
       setup(props) {
-        useStyle("-base-close", style$1E, vue.toRef(props, "clsPrefix"));
+        useStyle("-base-close", style$1F, vue.toRef(props, "clsPrefix"));
         return () => {
           const { clsPrefix, disabled, absolute, round, isButtonTag } = props;
           const Tag = isButtonTag ? "button" : "div";
@@ -29724,7 +29731,7 @@
       })];
     }
 
-    var style$1D = c$1([c$1("@keyframes loading-container-rotate", `
+    var style$1E = c$1([c$1("@keyframes loading-container-rotate", `
     to {
       -webkit-transform: rotate(360deg);
       transform: rotate(360deg);
@@ -29894,7 +29901,7 @@
         ...exposedLoadingProps
       },
       setup(props) {
-        useStyle("-base-loading", style$1D, vue.toRef(props, "clsPrefix"));
+        useStyle("-base-loading", style$1E, vue.toRef(props, "clsPrefix"));
       },
       render() {
         const { clsPrefix, radius, strokeWidth, stroke, scale } = this;
@@ -30012,6 +30019,9 @@
       scrollbarHeight: "5px",
       scrollbarBorderRadius: "5px",
       opacityDisabled: "0.5",
+      brand150: "#FFF3D3",
+      brand350: "#F1F9DF",
+      brand550: "#FFF3F4",
       brandPrimary50: "#2B204E",
       brandPrimary100: "#412A89",
       brandPrimary200: "#6A40ED",
@@ -30079,6 +30089,9 @@
       scrollbarHeight: "5px",
       scrollbarBorderRadius: "5px",
       opacityDisabled: "0.5",
+      brand150: "#FFF3D3",
+      brand350: "#F1F9DF",
+      brand550: "#FFF3F4",
       brandPrimary50: "#F8F2FF",
       brandPrimary100: "#EAE2FF",
       brandPrimary200: "#DACCFF",
@@ -30135,7 +30148,7 @@
       shadowDepth: "0px 8px 8px 0px rgba(0, 0, 0, 0.25)"
     };
 
-    const self$1m = vars => {
+    const self$1n = vars => {
       const {
         heightSmall,
         heightMedium,
@@ -30156,10 +30169,10 @@
     const skeletonLight$1 = {
       name: "Skeleton",
       common: derived,
-      self: self$1m
+      self: self$1n
     };
 
-    var style$1C = c$1([cB("skeleton", `
+    var style$1D = c$1([cB("skeleton", `
     height: 1em;
     width: 100%;
     transition: background-color .3s var(--u-bezier);
@@ -30215,7 +30228,7 @@
         const themeRef = useTheme(
           "Skeleton",
           "-skeleton",
-          style$1C,
+          style$1D,
           skeletonLight$1,
           props,
           mergedClsPrefixRef
@@ -30964,7 +30977,7 @@
       return treemate;
     }
 
-    const self$1l = vars => {
+    const self$1m = vars => {
       const {
         fontBodyMedium,
         fontTitleLarge,
@@ -30997,16 +31010,16 @@
     const emptyLight = {
       name: "Empty",
       common: derived,
-      self: self$1l
+      self: self$1m
     };
 
     const emptyDark$1 = {
       name: "Empty",
       common: derived$1,
-      self: self$1l
+      self: self$1m
     };
 
-    var style$1B = cB("empty", `
+    var style$1C = cB("empty", `
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -31083,7 +31096,7 @@
         const themeRef = useTheme(
           "Empty",
           "-empty",
-          style$1B,
+          style$1C,
           emptyLight,
           props,
           mergedClsPrefixRef
@@ -31171,7 +31184,7 @@
       }
     });
 
-    const self$1k = vars => {
+    const self$1l = vars => {
       const {
         scrollbarColor,
         scrollbarColorHover
@@ -31184,16 +31197,16 @@
     const scrollbarLight = {
       name: "Scrollbar",
       common: derived,
-      self: self$1k
+      self: self$1l
     };
 
     const scrollbarDark = {
       name: "Scrollbar",
       common: derived$1,
-      self: self$1k
+      self: self$1l
     };
 
-    var rtlStyle$r = cB("scrollbar", [cM("rtl", `
+    var rtlStyle$s = cB("scrollbar", [cM("rtl", `
     direction: rtl;
   `, [c$1(">", [cB("scrollbar-rail", [cM("horizontal", [c$1(">", [cE("scrollbar", `
               left: 0;
@@ -31205,7 +31218,7 @@
 
     const scrollbarRtl = {
       name: "Scrollbar",
-      style: rtlStyle$r
+      style: rtlStyle$s
     };
 
     const {
@@ -31229,7 +31242,7 @@
       })];
     }
 
-    var style$1A = cB("scrollbar", `
+    var style$1B = cB("scrollbar", `
   overflow: hidden;
   position: relative;
   z-index: auto;
@@ -31754,7 +31767,7 @@
         const themeRef = useTheme(
           "Scrollbar",
           "-scrollbar",
-          style$1A,
+          style$1B,
           scrollbarLight,
           props,
           mergedClsPrefixRef
@@ -31956,7 +31969,7 @@
     });
     const XScrollbar = Scrollbar$1;
 
-    const self$1j = vars => {
+    const self$1k = vars => {
       const {
         borderRadius,
         iconMedium,
@@ -32013,7 +32026,7 @@
         Scrollbar: scrollbarLight,
         Empty: emptyLight
       },
-      self: self$1j
+      self: self$1k
     });
 
     const internalSelectMenuDark = {
@@ -32023,10 +32036,10 @@
         Scrollbar: scrollbarDark,
         Empty: emptyDark$1
       },
-      self: self$1j
+      self: self$1k
     };
 
-    var style$1z = cB("base-account-option", `
+    var style$1A = cB("base-account-option", `
   display: flex;
   align-items: center;
   position: relative;
@@ -32078,7 +32091,7 @@
       avatarSize: "16px"
     };
 
-    const self$1i = vars => {
+    const self$1j = vars => {
       const {
         heightHuge,
         fontBodyLarge,
@@ -32108,13 +32121,13 @@
     const accountOptionLight = {
       name: "AccountOption",
       common: derived,
-      self: self$1i
+      self: self$1j
     };
 
     const accountOptionDark = {
       name: "AccountOption",
       common: derived$1,
-      self: self$1i
+      self: self$1j
     };
 
     var UBaseAccountOption = vue.defineComponent({
@@ -32132,7 +32145,7 @@
         const themeRef = useTheme(
           "AccountOption",
           "-base-account-option",
-          style$1z,
+          style$1A,
           accountOptionLight,
           props,
           mergedClsPrefixRef
@@ -32436,7 +32449,7 @@
       })];
     }
 
-    var style$1y = cB("base-select-menu", `
+    var style$1z = cB("base-select-menu", `
   line-height: 1.5;
   outline: none;
   z-index: 0;
@@ -32620,7 +32633,7 @@
         const themeRef = useTheme(
           "InternalSelectMenu",
           "-internal-select-menu",
-          style$1y,
+          style$1z,
           internalSelectMenuLight,
           props,
           vue.toRef(props, "clsPrefix")
@@ -33057,7 +33070,7 @@
       }
     });
 
-    var style$1x = cB("base-wave", `
+    var style$1y = cB("base-wave", `
   position: absolute;
   left: 0;
   right: 0;
@@ -33075,7 +33088,7 @@
         }
       },
       setup(props) {
-        useStyle("-base-wave", style$1x, vue.toRef(props, "clsPrefix"));
+        useStyle("-base-wave", style$1y, vue.toRef(props, "clsPrefix"));
         const selfRef = vue.ref(null);
         const activeRef = vue.ref(false);
         let animationTimerId = null;
@@ -33120,7 +33133,7 @@
       }
     });
 
-    var style$1w = cB("base-menu-mask", `
+    var style$1x = cB("base-menu-mask", `
   position: absolute;
   left: 0;
   right: 0;
@@ -33143,7 +33156,7 @@
         }
       },
       setup(props) {
-        useStyle("-base-menu-mask", style$1w, vue.toRef(props, "clsPrefix"));
+        useStyle("-base-menu-mask", style$1x, vue.toRef(props, "clsPrefix"));
         const messageRef = vue.ref(null);
         let timerId = null;
         const uncontrolledShowRef = vue.ref(false);
@@ -33176,7 +33189,7 @@
       }
     });
 
-    const self$1h = vars => {
+    const self$1i = vars => {
       const {
         fontBodyMedium,
         containerPrimary,
@@ -33203,13 +33216,13 @@
     const popoverLight = {
       name: "Popover",
       common: derived,
-      self: self$1h
+      self: self$1i
     };
 
     const popoverDark = {
       name: "Popover",
       common: derived$1,
-      self: self$1h
+      self: self$1i
     };
 
     const oppositePlacement = {
@@ -33219,7 +33232,7 @@
       right: "left"
     };
     const arrowSize = "var(--u-arrow-height) * 1.414";
-    var style$1v = c$1([cB("popover", `
+    var style$1w = c$1([cB("popover", `
     transition:
       box-shadow .3s var(--u-bezier),
       background-color .3s var(--u-bezier),
@@ -33410,7 +33423,7 @@
         const themeRef = useTheme(
           "Popover",
           "-popover",
-          style$1v,
+          style$1w,
           popoverLight,
           props,
           mergedClsPrefixRef
@@ -34200,7 +34213,7 @@
       }
     });
 
-    const self$1g = vars => {
+    const self$1h = vars => {
       const {
         opacityDisabled,
         borderRadiusSmall: borderRadius,
@@ -34239,14 +34252,14 @@
         closeSizeSmall: "14px",
         closeSizeMedium: "16px",
         closeSizeLarge: "18px",
-        paddingTiny: "2px 6px 2px 10px",
-        paddingSmall: "2px 6px 2px 10px",
-        paddingMedium: "2px 6px 2px 10px",
-        paddingLarge: "2px 6px 2px 10px",
+        paddingTiny: "2px 6px",
+        paddingSmall: "2px 6px",
+        paddingMedium: "2px 6px",
+        paddingLarge: "6px 8px",
         closeMargin: "0 0 0 4px",
         closeMarginRtl: "0 4px 0 0",
         closeBorderRadius: borderRadius,
-        heightTiny: "16px",
+        heightTiny: "20px",
         heightSmall: "20px",
         heightMedium: "24px",
         heightLarge: "32px",
@@ -34263,7 +34276,8 @@
         textColorHoverCheckable: textPrimary,
         textColorPressedCheckable: textPrimary,
         textColorChecked: textQuaternary,
-        colorCheckable: elementsSecondary,
+        colorCheckable: elementsQuaternary,
+        colorCheckableOutline: elementsSecondary,
         colorHoverCheckable: elementsQuaternary,
         colorPressedCheckable: elementsQuaternary,
         colorChecked: elementsPrimary,
@@ -34375,16 +34389,16 @@
     const tagLight = {
       name: "Tag",
       common: derived,
-      self: self$1g
+      self: self$1h
     };
 
     const tagDark = {
       name: "Tag",
       common: derived$1,
-      self: self$1g
+      self: self$1h
     };
 
-    var rtlStyle$q = cB("tag", [cM("rtl", `
+    var rtlStyle$r = cB("tag", [cM("rtl", `
     direction: rtl;
   `, [cE("close", `
       margin: var(--u-close-margin-rtl);
@@ -34404,7 +34418,7 @@
 
     const tagRtl = {
       name: "Tag",
-      style: rtlStyle$q
+      style: rtlStyle$r
     };
 
     var commonProps = {
@@ -34428,7 +34442,7 @@
       }
     };
 
-    var style$1u = cB("tag", `
+    var style$1v = cB("tag", `
   white-space: nowrap;
   position: relative;
   box-sizing: border-box;
@@ -34453,7 +34467,9 @@
   font-weight: var(--u-font-weight);
 `, [cM("strong", `
     font-weight: var(--u-font-weight-strong);
-  `), cE("border", `
+  `), cM("closable", [cE("content", `
+      padding-left: 4px;
+    `)]), cE("border", `
     pointer-events: none;
     position: absolute;
     left: 0;
@@ -34498,7 +34514,11 @@
     padding: 0px 8px;
     background-color: var(--u-color-checkable);
     transition: border-color .3s var(--u-bezier);
-  `, [cNotM("disabled", [c$1("&:hover", "background-color: var(--u-color-hover-checkable);", [cNotM("checked", "color: var(--u-text-color-hover-checkable);")]), c$1("&:focus", `
+  `, [cE("border", `
+      border: unset;
+    `), cE("content", `
+      padding-left: 0px;
+    `), cNotM("disabled", [c$1("&:hover", "background-color: var(--u-color-hover-checkable);", [cNotM("checked", "color: var(--u-text-color-hover-checkable);")]), c$1("&:focus", `
       background-color: var(--u-color-pressed-checkable);  
       transition: border-color .3s var(--u-bezier);`, [cNotM("checked", "color: var(--u-text-color-pressed-checkable);")]), c$1("&:active", `
       background-color: var(--u-color-pressed-checkable); 
@@ -34508,7 +34528,11 @@
     `, [cE("border", `
         border-color: var(--u-color-checked);
         transition: none;
-      `), cNotM("disabled", [c$1("&:hover", "background-color: var(--u-color-checked-hover);"), c$1("&:focus", "background-color: var(--u-color-checked-hover);"), c$1("&:active", "background-color: var(--u-color-checked-pressed);")])])])]);
+      `), cNotM("disabled", [c$1("&:hover", "background-color: var(--u-color-checked-hover);"), c$1("&:focus", "background-color: var(--u-color-checked-hover);"), c$1("&:active", "background-color: var(--u-color-checked-pressed);")])])]), cM("outline", `
+      background-color: var(--u-color-checkable-outline);
+    `, [cE("border", `
+      border: var(--u-border);
+    `)])]);
 
     const tagProps = {
       ...useTheme.props,
@@ -34517,8 +34541,13 @@
         type: Boolean,
         default: void 0
       },
+      size: {
+        type: String,
+        default: "large"
+      },
       checked: Boolean,
       checkable: Boolean,
+      outline: Boolean,
       strong: Boolean,
       triggerClickOnClose: Boolean,
       onClose: [Array, Function],
@@ -34563,7 +34592,7 @@
         const themeRef = useTheme(
           "Tag",
           "-tag",
-          style$1u,
+          style$1v,
           tagLight,
           props,
           mergedClsPrefixRef
@@ -34616,6 +34645,7 @@
               textColorPressedCheckable,
               textColorChecked,
               colorCheckable,
+              colorCheckableOutline,
               colorHoverCheckable,
               colorPressedCheckable,
               colorChecked,
@@ -34660,6 +34690,7 @@
             "--u-close-size": closeSize,
             "--u-color": color || (mergedBorderedRef.value ? colorBordered : typedColor),
             "--u-color-checkable": colorCheckable,
+            "--u-color-checkable-outline": colorCheckableOutline,
             "--u-color-checked": colorChecked,
             "--u-color-checked-hover": colorCheckedHover,
             "--u-color-checked-pressed": colorCheckedPressed,
@@ -34740,6 +34771,7 @@
                 [`${mergedClsPrefix}-tag--strong`]: this.strong,
                 [`${mergedClsPrefix}-tag--disabled`]: this.disabled,
                 [`${mergedClsPrefix}-tag--checkable`]: this.checkable,
+                [`${mergedClsPrefix}-tag--outline`]: this.checkable && this.outline,
                 [`${mergedClsPrefix}-tag--checked`]: this.checkable && this.checked,
                 [`${mergedClsPrefix}-tag--round`]: round,
                 [`${mergedClsPrefix}-tag--avatar`]: avatarNode,
@@ -34778,7 +34810,7 @@
       }
     });
 
-    var style$1t = cB("base-clear", `
+    var style$1u = cB("base-clear", `
   flex-shrink: 0;
   height: 1em;
   width: 1em;
@@ -34819,7 +34851,7 @@
         onClear: Function
       },
       setup(props) {
-        useStyle("-base-clear", style$1t, vue.toRef(props, "clsPrefix"));
+        useStyle("-base-clear", style$1u, vue.toRef(props, "clsPrefix"));
         return {
           handleMouseDown(e) {
             e.preventDefault();
@@ -34913,7 +34945,7 @@
       }
     });
 
-    const self$1f = vars => {
+    const self$1g = vars => {
       const {
         borderRadius,
         iconMedium,
@@ -35074,7 +35106,7 @@
       peers: {
         Popover: popoverLight
       },
-      self: self$1f
+      self: self$1g
     });
 
     const internalSelectionDark = {
@@ -35083,7 +35115,7 @@
       peers: {
         Popover: popoverDark
       },
-      self: self$1f
+      self: self$1g
     };
 
     function generateSecondaryStates(state) {
@@ -35107,7 +35139,7 @@
         color: var(--u-arrow-color${state}-secondary);
       `)])];
     }
-    var style$1s = c$1([cB("base-selection", `
+    var style$1t = c$1([cB("base-selection", `
     position: relative;
     z-index: auto;
     box-shadow: none;
@@ -35456,7 +35488,7 @@
         const themeRef = useTheme(
           "InternalSelection",
           "-internal-selection",
-          style$1s,
+          style$1t,
           internalSelectionLight,
           props,
           vue.toRef(props, "clsPrefix")
@@ -36521,7 +36553,7 @@
       })];
     }
 
-    var style$1r = c$1([c$1("@keyframes u-base-slot-machine-fade-up-in", `
+    var style$1s = c$1([c$1("@keyframes u-base-slot-machine-fade-up-in", `
     from {
       transform: translateY(60%);
       opacity: 0;
@@ -36640,7 +36672,7 @@
         }
       },
       setup(props) {
-        useStyle("-base-slot-machine", style$1r, vue.toRef(props, "clsPrefix"));
+        useStyle("-base-slot-machine", style$1s, vue.toRef(props, "clsPrefix"));
         const oldValueRef = vue.ref();
         const newValueRef = vue.ref();
         const numbersRef = vue.computed(() => {
@@ -36806,8 +36838,8 @@
             onUpdateChecked
           } = props;
           const {
-            nTriggerFormInput,
-            nTriggerFormChange
+            triggerFormInput,
+            triggerFormChange
           } = formItem;
           const nextChecked = renderedCheckedRef.value ? props.uncheckedValue : props.checkedValue;
           if (_onUpdateCheck) {
@@ -36817,8 +36849,8 @@
             call(onUpdateChecked, nextChecked, e);
           }
           if (onChange) call(onChange, nextChecked, e);
-          nTriggerFormInput();
-          nTriggerFormChange();
+          triggerFormInput();
+          triggerFormChange();
           uncontrolledCheckedRef.value = nextChecked;
         }
       }
@@ -36954,14 +36986,14 @@
             onChange
           } = props;
           const {
-            nTriggerFormInput,
-            nTriggerFormChange
+            triggerFormInput,
+            triggerFormChange
           } = formItem;
           if (onUpdateChecked) call(onUpdateChecked, true);
           if (_onUpdateChecked) call(_onUpdateChecked, true);
           if (onChange) onChange(e);
-          nTriggerFormInput();
-          nTriggerFormChange();
+          triggerFormInput();
+          triggerFormChange();
           uncontrolledCheckedRef.value = true;
         }
       }
@@ -37010,7 +37042,7 @@
       descriptionSpaceBanner: "24px"
     };
 
-    const self$1e = vars => {
+    const self$1f = vars => {
       const {
         iconMedium,
         closeMedium,
@@ -37021,7 +37053,7 @@
         fontBodyLarge,
         lineHeightBodyLarge,
         fontWeight,
-        borderRadiusLarge,
+        borderRadius,
         staticBlack,
         staticWhite,
         transparencyTertiary,
@@ -37030,15 +37062,16 @@
         transparencyPrimary,
         elementsTertiary,
         textPrimary,
-        staticGreen,
-        brandSecondary600,
-        staticRed,
-        brandPrimary500
+        brand150,
+        brand350,
+        brand550,
+        brandPrimary50,
+        staticRed
       } = vars;
       return {
         ...commonVars$6,
         iconSize: iconMedium,
-        closeIconSize: iconMedium,
+        closeIconSize: "18px",
         closeSize: closeMedium,
         titleFontSizeAlert: fontTitleSmall,
         titleLineHeightAlert: lineHeightTitleSmall,
@@ -37052,7 +37085,7 @@
         descriptionFontSizeBanner: fontBodyLarge,
         descriptionLineHeightBanner: lineHeightBodyLarge,
         descriptionFontWeightBanner: fontWeight,
-        borderRadius: borderRadiusLarge,
+        borderRadius,
         // Default
         color: staticBlack,
         titleTextColor: staticWhite,
@@ -37074,17 +37107,17 @@
         closeIconColorHoverInfo: textPrimary,
         closeIconColorPressedInfo: textPrimary,
         // Success
-        colorSuccess: staticGreen,
-        titleTextColorSuccess: staticWhite,
-        iconColorSuccess: staticWhite,
-        contentTextColorSuccess: staticWhite,
+        colorSuccess: brand350,
+        titleTextColorSuccess: staticBlack,
+        iconColorSuccess: staticBlack,
+        contentTextColorSuccess: staticBlack,
         closeColorHoverSuccess: transparencyTertiary,
         closeColorPressedSuccess: transparencyQuinary,
-        closeIconColorSuccess: staticWhite,
-        closeIconColorHoverSuccess: staticWhite,
-        closeIconColorPressedSuccess: staticWhite,
+        closeIconColorSuccess: staticBlack,
+        closeIconColorHoverSuccess: staticBlack,
+        closeIconColorPressedSuccess: staticBlack,
         // Warning
-        colorWarning: brandSecondary600,
+        colorWarning: brand150,
         titleTextColorWarning: staticBlack,
         iconColorWarning: staticBlack,
         contentTextColorWarning: staticBlack,
@@ -37094,40 +37127,40 @@
         closeIconColorHoverWarning: staticBlack,
         closeIconColorPressedWarning: staticBlack,
         // Error
-        colorError: staticRed,
-        titleTextColorError: staticWhite,
-        iconColorError: staticWhite,
-        contentTextColorError: staticWhite,
+        colorError: brand550,
+        titleTextColorError: staticBlack,
+        iconColorError: staticRed,
+        contentTextColorError: staticBlack,
         closeColorHoverError: transparencyTertiary,
         closeColorPressedError: transparencyQuinary,
-        closeIconColorError: staticWhite,
-        closeIconColorHoverError: staticWhite,
-        closeIconColorPressedError: staticWhite,
+        closeIconColorError: staticBlack,
+        closeIconColorHoverError: staticBlack,
+        closeIconColorPressedError: staticBlack,
         // Primary
-        colorPrimary: brandPrimary500,
-        titleTextColorPrimary: staticWhite,
-        iconColorPrimary: staticWhite,
-        contentTextColorPrimary: staticWhite,
+        colorPrimary: brandPrimary50,
+        titleTextColorPrimary: staticBlack,
+        iconColorPrimary: staticBlack,
+        contentTextColorPrimary: staticBlack,
         closeColorHoverPrimary: transparencyTertiary,
         closeColorPressedPrimary: transparencyQuinary,
-        closeIconColorPrimary: staticWhite,
-        closeIconColorHoverPrimary: staticWhite,
-        closeIconColorPressedPrimary: staticWhite
+        closeIconColorPrimary: staticBlack,
+        closeIconColorHoverPrimary: staticBlack,
+        closeIconColorPressedPrimary: staticBlack
       };
     };
     const alertLight = {
       name: "Alert",
       common: derived,
-      self: self$1e
+      self: self$1f
     };
 
     const alertDark = {
       name: "Alert",
       common: derived$1,
-      self: self$1e
+      self: self$1f
     };
 
-    var rtlStyle$p = cB("alert", [cM("rtl", `
+    var rtlStyle$q = cB("alert", [cM("rtl", `
     direction: rtl;
   `, [cE("icon", `
       left: unset;
@@ -37145,10 +37178,10 @@
 
     const alertRtl = {
       name: "Alert",
-      style: rtlStyle$p
+      style: rtlStyle$q
     };
 
-    const self$1d = vars => {
+    const self$1e = vars => {
       const {
         borderRadius,
         fontBodyMedium,
@@ -37178,16 +37211,16 @@
     const anchorLight = {
       name: "Anchor",
       common: derived,
-      self: self$1d
+      self: self$1e
     };
 
     const anchorDark = {
       name: "Anchor",
       common: derived$1,
-      self: self$1d
+      self: self$1e
     };
 
-    const self$1c = vars => {
+    const self$1d = vars => {
       const {
         iconMedium,
         textSecondary,
@@ -37287,16 +37320,16 @@
     const inputLight = {
       name: "Input",
       common: derived,
-      self: self$1c
+      self: self$1d
     };
 
     const inputDark = {
       name: "Input",
       common: derived$1,
-      self: self$1c
+      self: self$1d
     };
 
-    var rtlStyle$o = cB("input", [cM("rtl", `
+    var rtlStyle$p = cB("input", [cM("rtl", `
     direction: rtl;
   `, [cE("prefix", {
       marginRight: 0,
@@ -37314,10 +37347,10 @@
 
     const inputRtl = {
       name: "Input",
-      style: rtlStyle$o
+      style: rtlStyle$p
     };
 
-    function self$1b(vars) {
+    function self$1c(vars) {
       const {
         shadowDepth2
       } = vars;
@@ -37332,7 +37365,7 @@
         InternalSelectMenu: internalSelectMenuLight,
         Input: inputLight
       },
-      self: self$1b
+      self: self$1c
     });
 
     const autoCompleteDark = {
@@ -37342,10 +37375,10 @@
         InternalSelectMenu: internalSelectMenuDark,
         Input: inputDark
       },
-      self: self$1b
+      self: self$1c
     };
 
-    const self$1a = vars => {
+    const self$1b = vars => {
       const {
         borderRadius,
         heightSmall,
@@ -37377,16 +37410,16 @@
     const avatarLight = {
       name: "Avatar",
       common: derived,
-      self: self$1a
+      self: self$1b
     };
 
     const avatarDark = {
       name: "Avatar",
       common: derived$1,
-      self: self$1a
+      self: self$1b
     };
 
-    const self$19 = () => {
+    const self$1a = () => {
       return {
         gap: "-12px"
       };
@@ -37397,7 +37430,7 @@
       peers: {
         Avatar: avatarLight
       },
-      self: self$19
+      self: self$1a
     });
 
     const avatarGroupDark = {
@@ -37406,10 +37439,10 @@
       peers: {
         Avatar: avatarDark
       },
-      self: self$19
+      self: self$1a
     };
 
-    var rtlStyle$n = cB("avatar-group", [cM("rtl", `
+    var rtlStyle$o = cB("avatar-group", [cM("rtl", `
     direction: rtl;
   `, [cNotM("vertical", `
       flex-direction: row;
@@ -37420,10 +37453,10 @@
 
     const avatarGroupRtl = {
       name: "AvatarGroup",
-      style: rtlStyle$n
+      style: rtlStyle$o
     };
 
-    const self$18 = vars => {
+    const self$19 = vars => {
       const {
         heightLarge,
         iconMedium,
@@ -37448,16 +37481,16 @@
     const backTopLight = {
       name: "BackTop",
       common: derived,
-      self: self$18
+      self: self$19
     };
 
     const backTopDark = {
       name: "BackTop",
       common: derived$1,
-      self: self$18
+      self: self$19
     };
 
-    const self$17 = vars => {
+    const self$18 = vars => {
       const {
         brandQuaternary500,
         elementsPrimary,
@@ -37489,16 +37522,16 @@
     const badgeLight = {
       name: "Badge",
       common: derived,
-      self: self$17
+      self: self$18
     };
 
     const badgeDark = {
       name: "Badge",
       common: derived$1,
-      self: self$17
+      self: self$18
     };
 
-    var rtlStyle$m = cB("badge", [cM("rtl", `
+    var rtlStyle$n = cB("badge", [cM("rtl", `
     direction: rtl;
   `, [cB("badge-sup", `
       right: 100%;
@@ -37509,10 +37542,10 @@
 
     const badgeRtl = {
       name: "Badge",
-      style: rtlStyle$m
+      style: rtlStyle$n
     };
 
-    const self$16 = vars => {
+    const self$17 = vars => {
       const {
         fontWeightStrong,
         fontBodyMedium,
@@ -37535,13 +37568,13 @@
     const breadcrumbLight = {
       name: "Breadcrumb",
       common: derived,
-      self: self$16
+      self: self$17
     };
 
     const breadcrumbDark = {
       name: "Breadcrumb",
       common: derived$1,
-      self: self$16
+      self: self$17
     };
 
     var commonVariables$5 = {
@@ -37564,7 +37597,7 @@
       rippleDuration: ".6s"
     };
 
-    const self$15 = vars => {
+    const self$16 = vars => {
       const {
         heightMini,
         heightTiny,
@@ -37812,16 +37845,16 @@
     const buttonLight = {
       name: "Button",
       common: derived,
-      self: self$15
+      self: self$16
     };
 
     const buttonDark = {
       name: "Button",
       common: derived$1,
-      self: self$15
+      self: self$16
     };
 
-    var rtlStyle$l = cB("button", [cM("rtl", `
+    var rtlStyle$m = cB("button", [cM("rtl", `
     direction: rtl;
   `, [cE("icon", {
       margin: "var(--u-icon-margin)",
@@ -37833,7 +37866,7 @@
 
     const buttonRtl = {
       name: "Button",
-      style: rtlStyle$l
+      style: rtlStyle$m
     };
 
     var commonVars$5 = {
@@ -37842,7 +37875,7 @@
       closeBorderRadius: "50px"
     };
 
-    const self$14 = vars => {
+    const self$15 = vars => {
       const {
         fontWeightStrong,
         lineHeightBodyMedium,
@@ -37962,7 +37995,7 @@
       peers: {
         Scrollbar: scrollbarLight
       },
-      self: self$14
+      self: self$15
     });
 
     const notificationDark = {
@@ -37971,10 +38004,10 @@
       peers: {
         Scrollbar: scrollbarDark
       },
-      self: self$14
+      self: self$15
     };
 
-    var rtlStyle$k = cB("notification", [cM("rtl", `
+    var rtlStyle$l = cB("notification", [cM("rtl", `
     direction: rtl;
   `, [cB("notification-main", `
       margin-left: unset;
@@ -37998,7 +38031,7 @@
 
     const notificationRtl = {
       name: "Notification",
-      style: rtlStyle$k
+      style: rtlStyle$l
     };
 
     var commonVariables$4 = {
@@ -38009,7 +38042,7 @@
       iconMargin: "0 16px 0 0"
     };
 
-    const self$13 = vars => {
+    const self$14 = vars => {
       const {
         closeMedium,
         iconMedium,
@@ -38094,16 +38127,16 @@
     const messageLight = {
       name: "Message",
       common: derived,
-      self: self$13
+      self: self$14
     };
 
     const messageDark = {
       name: "Message",
       common: derived$1,
-      self: self$13
+      self: self$14
     };
 
-    var rtlStyle$j = cB("message", [cM("rtl", `
+    var rtlStyle$k = cB("message", [cM("rtl", `
     direction: rtl;
   `, [cE("close", `
       margin: 0 10px 0 0;
@@ -38113,7 +38146,7 @@
 
     const messageRtl = {
       name: "Message",
-      style: rtlStyle$j
+      style: rtlStyle$k
     };
 
     const buttonGroupDark = {
@@ -38142,7 +38175,7 @@
         top: n1
       })])])])]);
     }
-    var style$1q = cB("button-group", `
+    var style$1r = cB("button-group", `
   flex-wrap: nowrap;
   display: inline-flex;
   position: relative;
@@ -38186,7 +38219,7 @@
         left: n1
       })])])])]);
     }
-    var rtlStyle$i = cB("button-group", [cNotM("vertical", [cM("rtl", `
+    var rtlStyle$j = cB("button-group", [cNotM("vertical", [cM("rtl", `
       direction: rtl;
     `, [cB("button", [c$1("&:last-child:not(:first-child)", `
           margin-right: ${zero};
@@ -38204,7 +38237,7 @@
 
     const buttonGroupRtl = {
       name: "ButtonGroup",
-      style: rtlStyle$i
+      style: rtlStyle$j
     };
 
     var commonVariables$3 = {
@@ -38214,7 +38247,7 @@
       paddingHuge: "27px 40px 28px"
     };
 
-    const self$12 = vars => {
+    const self$13 = vars => {
       const {
         borderRadius,
         fontWeight,
@@ -38280,16 +38313,16 @@
     const cardLight = {
       name: "Card",
       common: derived,
-      self: self$12
+      self: self$13
     };
 
     const cardDark$1 = {
       name: "Card",
       common: derived$1,
-      self: self$12
+      self: self$13
     };
 
-    var rtlStyle$h = cB("card", [cM("rtl", `
+    var rtlStyle$i = cB("card", [cM("rtl", `
     direction: rtl;
   `), c$1(">", [cB("card-header", [c$1(">", [cE("close", `
           margin: 0 8px 0 0;
@@ -38297,10 +38330,10 @@
 
     const cardRtl = {
       name: "Card",
-      style: rtlStyle$h
+      style: rtlStyle$i
     };
 
-    const self$11 = vars => {
+    const self$12 = vars => {
       const {
         textSecondary,
         textPrimary,
@@ -38312,7 +38345,7 @@
         borderRadiusLarge,
         containerSecondary,
         shadowDepth2,
-        elementsQuinary,
+        elementsQuaternary,
         elementsSecondary
       } = vars;
       return {
@@ -38328,20 +38361,20 @@
         borderRadius: borderRadiusLarge,
         boxShadow: shadowDepth2,
         colorEmbedded: containerSecondary,
-        dividerColor: elementsQuinary,
+        dividerColor: elementsQuaternary,
         dropDownBgColor: elementsSecondary
       };
     };
     const cardListLight = {
       name: "CardList",
       common: derived,
-      self: self$11
+      self: self$12
     };
 
     const cardDark = {
       name: "CardList",
       common: derived$1,
-      self: self$11
+      self: self$12
     };
 
     var commonVariables$2 = {
@@ -38351,7 +38384,7 @@
       labelPadding: "0 16px"
     };
 
-    const self$10 = vars => {
+    const self$11 = vars => {
       const {
         lineHeightBodyLarge,
         fontBodyLarge,
@@ -38427,25 +38460,25 @@
     const checkboxLight = {
       name: "Checkbox",
       common: derived,
-      self: self$10
+      self: self$11
     };
 
     const checkboxDark = {
       name: "Checkbox",
       common: derived$1,
-      self: self$10
+      self: self$11
     };
 
-    var rtlStyle$g = cB("checkbox", [cM("rtl", `
+    var rtlStyle$h = cB("checkbox", [cM("rtl", `
     direction: rtl;
   `)]);
 
     const checkboxRtl = {
       name: "Checkbox",
-      style: rtlStyle$g
+      style: rtlStyle$h
     };
 
-    const self$$ = vars => {
+    const self$10 = vars => {
       const {
         borderRadius,
         heightMedium,
@@ -38486,7 +38519,7 @@
         Checkbox: checkboxLight,
         Empty: emptyLight
       },
-      self: self$$
+      self: self$10
     });
 
     const cascaderDark = {
@@ -38499,10 +38532,10 @@
         Checkbox: checkboxDark,
         Empty: emptyLight
       },
-      self: self$$
+      self: self$10
     };
 
-    const self$_ = vars => {
+    const self$$ = vars => {
       const {
         textPrimary,
         fontBodyMedium,
@@ -38530,12 +38563,12 @@
     const codeLight = {
       name: "Code",
       common: derived,
-      self: self$_
+      self: self$$
     };
 
-    const self$Z = vars => {
+    const self$_ = vars => {
       return {
-        ...self$_(vars),
+        ...self$$(vars),
         // extracted from hljs atom-one-dark.scss
         "mono-3": "#5c6370",
         "hue-1": "#56b6c2",
@@ -38551,10 +38584,10 @@
     const codeDark = {
       name: "Code",
       common: derived$1,
-      self: self$Z
+      self: self$_
     };
 
-    const self$Y = vars => {
+    const self$Z = vars => {
       const {
         fontWeight,
         fontBodyLarge,
@@ -38564,7 +38597,8 @@
         textSecondary,
         fontBodyMedium,
         lineHeightBodyMedium,
-        iconSmall
+        iconSmall,
+        containerPrimary
       } = vars;
       return {
         titleFontSize: fontBodyLarge,
@@ -38579,23 +38613,26 @@
         arrowSize: iconSmall,
         arrowColor: textPrimary,
         arrowColorDisabled: textSecondary,
-        itemMargin: "16px 0 0 0",
-        titlePadding: "16px 0 0 0"
+        titlePadding: "16px 0 0 0",
+        backgroundColor: containerPrimary,
+        borderRadius: "20px",
+        padding: "24px",
+        boxSizing: "border-box"
       };
     };
     const collapseLight = {
       name: "Collapse",
       common: derived,
-      self: self$Y
+      self: self$Z
     };
 
     const collapseDark = {
       name: "Collapse",
       common: derived$1,
-      self: self$Y
+      self: self$Z
     };
 
-    var rtlStyle$f = cB("collapse", [cM("rtl", `
+    var rtlStyle$g = cB("collapse", [cM("rtl", `
     direction: rtl;
   `, [cB("collapse-item", [cB("collapse-item", {
       marginRight: "32px",
@@ -38612,10 +38649,10 @@
 
     const collapseRtl = {
       name: "Collapse",
-      style: rtlStyle$f
+      style: rtlStyle$g
     };
 
-    const self$X = vars => {
+    const self$Y = vars => {
       const {
         cubicBezierEaseInOut
       } = vars;
@@ -38626,26 +38663,26 @@
     const collapseTransitionLight = {
       name: "CollapseTransition",
       common: derived,
-      self: self$X
+      self: self$Y
     };
 
     const collapseTransitionDark = {
       name: "CollapseTransition",
       common: derived$1,
-      self: self$X
+      self: self$Y
     };
 
-    var rtlStyle$e = cB("collapse-transition", [cM("rtl", `
+    var rtlStyle$f = cB("collapse-transition", [cM("rtl", `
     direction: rtl;
     text-align: right;
   `)]);
 
     const collapseTransitionRtl = {
       name: "CollapseTransition",
-      style: rtlStyle$e
+      style: rtlStyle$f
     };
 
-    const self$W = vars => {
+    const self$X = vars => {
       const {
         borderRadius,
         fontBodyMedium,
@@ -38682,7 +38719,7 @@
       peers: {
         Popover: popoverLight
       },
-      self: self$W
+      self: self$X
     });
 
     const tooltipDark = {
@@ -38691,7 +38728,7 @@
       peers: {
         Popover: popoverDark
       },
-      self: self$W
+      self: self$X
     };
 
     const ellipsisDark = {
@@ -38710,7 +38747,7 @@
       }
     });
 
-    const self$V = vars => {
+    const self$W = vars => {
       const {
         heightTiny,
         heightSmall,
@@ -38802,16 +38839,16 @@
     const radioLight = {
       name: "Radio",
       common: derived,
-      self: self$V
+      self: self$W
     };
 
     const radioDark = {
       name: "Radio",
       common: derived$1,
-      self: self$V
+      self: self$W
     };
 
-    var rtlStyle$d = c$1([cB("radio", [cM("rtl", `
+    var rtlStyle$e = c$1([cB("radio", [cM("rtl", `
       direction: rtl;
     `)]), cB("radio-group", [cM("rtl", `
       direction: rtl;
@@ -38833,7 +38870,7 @@
 
     const radioRtl = {
       name: "Radio",
-      style: rtlStyle$d
+      style: rtlStyle$e
     };
 
     const popselect = {
@@ -38845,7 +38882,7 @@
       }
     };
 
-    function self$U(vars) {
+    function self$V(vars) {
       const {
         shadowDepth2
       } = vars;
@@ -38860,10 +38897,10 @@
         Popover: popoverLight,
         InternalSelectMenu: internalSelectMenuLight
       },
-      self: self$U
+      self: self$V
     });
 
-    function self$T(vars) {
+    function self$U(vars) {
       const {
         shadowDepth2
       } = vars;
@@ -38878,7 +38915,7 @@
         InternalSelection: internalSelectionLight,
         InternalSelectMenu: internalSelectMenuLight
       },
-      self: self$T
+      self: self$U
     });
 
     const selectDark = {
@@ -38888,10 +38925,10 @@
         InternalSelection: internalSelectionDark,
         InternalSelectMenu: internalSelectMenuDark
       },
-      self: self$T
+      self: self$U
     };
 
-    const self$S = vars => {
+    const self$T = vars => {
       const {
         brandPrimary100,
         transparencySecondary,
@@ -38989,7 +39026,7 @@
         Input: inputLight,
         Popselect: popselectLight
       },
-      self: self$S
+      self: self$T
     });
 
     const paginationDark = {
@@ -39000,10 +39037,10 @@
         Input: inputDark,
         Popselect: popselect
       },
-      self: self$S
+      self: self$T
     };
 
-    var rtlStyle$c = cB("pagination", [cM("rtl", `
+    var rtlStyle$d = cB("pagination", [cM("rtl", `
     direction: rtl;
   `, [c$1("> *:not(:first-child)", `
       margin: var(--u-item-margin-rtl);
@@ -39013,11 +39050,11 @@
 
     const paginationRtl = {
       name: "Pagination",
-      style: rtlStyle$c,
+      style: rtlStyle$d,
       peers: [inputRtl]
     };
 
-    const self$R = vars => {
+    const self$S = vars => {
       const {
         borderRadius,
         fontBodySmall,
@@ -39104,7 +39141,7 @@
       peers: {
         Popover: popoverLight
       },
-      self: self$R
+      self: self$S
     });
 
     const dropdownDark = {
@@ -39113,10 +39150,10 @@
       peers: {
         Popover: popoverDark
       },
-      self: self$R
+      self: self$S
     };
 
-    const self$Q = vars => {
+    const self$R = vars => {
       const {
         borderRadius,
         opacityDisabled,
@@ -39214,7 +39251,7 @@
         Ellipsis: ellipsisLight,
         Dropdown: dropdownLight
       },
-      self: self$Q
+      self: self$R
     });
 
     const dataTableDark = {
@@ -39231,10 +39268,10 @@
         Ellipsis: ellipsisDark,
         Dropdown: dropdownDark
       },
-      self: self$Q
+      self: self$R
     };
 
-    const self$P = vars => {
+    const self$Q = vars => {
       const {
         opacityDisabled,
         borderRadius,
@@ -39276,7 +39313,7 @@
         Button: buttonLight,
         Input: inputLight
       },
-      self: self$P
+      self: self$Q
     });
 
     const timePickerDark = {
@@ -39287,7 +39324,7 @@
         Button: buttonDark,
         Input: inputDark
       },
-      self: self$P
+      self: self$Q
     };
 
     const START_YEAR = 1924;
@@ -39338,7 +39375,7 @@
       calendarRightPaddingYearrange: "0"
     };
 
-    const self$O = vars => {
+    const self$P = vars => {
       const {
         iconMedium,
         fontWeightStrong,
@@ -39438,7 +39475,7 @@
         TimePicker: timePickerLight,
         Scrollbar: scrollbarLight
       },
-      self: self$O
+      self: self$P
     });
 
     const datePickerDark = {
@@ -39450,10 +39487,10 @@
         TimePicker: timePickerDark,
         Scrollbar: scrollbarDark
       },
-      self: self$O
+      self: self$P
     };
 
-    const self$N = vars => {
+    const self$O = vars => {
       const {
         borderRadius,
         lineHeightBodyLarge,
@@ -39503,13 +39540,13 @@
     const descriptionsLight = {
       name: "Descriptions",
       common: derived,
-      self: self$N
+      self: self$O
     };
 
     const descriptionsDark = {
       name: "Descriptions",
       common: derived$1,
-      self: self$N
+      self: self$O
     };
 
     var commonVars$3 = {
@@ -39523,7 +39560,7 @@
       closeBorderRadius: "100px"
     };
 
-    const self$M = vars => {
+    const self$N = vars => {
       const {
         borderRadius,
         containerPrimary,
@@ -39580,7 +39617,7 @@
       peers: {
         Button: buttonLight
       },
-      self: self$M
+      self: self$N
     });
 
     const dialogDark = {
@@ -39589,10 +39626,10 @@
       peers: {
         Button: buttonDark
       },
-      self: self$M
+      self: self$N
     };
 
-    const self$L = vars => {
+    const self$M = vars => {
       const {
         elementsQuaternary,
         textPrimary,
@@ -39612,13 +39649,13 @@
     const dividerLight = {
       name: "Divider",
       common: derived,
-      self: self$L
+      self: self$M
     };
 
     const dividerDark = {
       name: "Divider",
       common: derived$1,
-      self: self$L
+      self: self$M
     };
 
     var commonVars$2 = {
@@ -39634,7 +39671,7 @@
       contentBorderRadius: "24px"
     };
 
-    const self$K = vars => {
+    const self$L = vars => {
       const {
         containerPrimary,
         textPrimary,
@@ -39683,7 +39720,7 @@
       peers: {
         Scrollbar: scrollbarLight
       },
-      self: self$K
+      self: self$L
     });
 
     const drawerDark = {
@@ -39692,10 +39729,10 @@
       peers: {
         Scrollbar: scrollbarDark
       },
-      self: self$K
+      self: self$L
     };
 
-    var rtlStyle$b = cB("drawer", [cM("rtl", `
+    var rtlStyle$c = cB("drawer", [cM("rtl", `
     direction: rtl;
     text-align: right;
   `, [cB("drawer-content", [cB("drawer-header", [cE("close", `
@@ -39705,7 +39742,7 @@
 
     const drawerRtl = {
       name: "Drawer",
-      style: rtlStyle$b,
+      style: rtlStyle$c,
       peers: [scrollbarRtl]
     };
 
@@ -39726,7 +39763,7 @@
       }
     };
 
-    const self$J = () => {
+    const self$K = () => {
       return commonVariables$1;
     };
     const dynamicInputLight = createTheme$1({
@@ -39736,10 +39773,10 @@
         Input: inputLight,
         Button: buttonLight
       },
-      self: self$J
+      self: self$K
     });
 
-    var rtlStyle$a = cB("dynamic-input", [cM("rtl", `
+    var rtlStyle$b = cB("dynamic-input", [cM("rtl", `
     direction: rtl;
   `, [cB("dynamic-input-preset-pair", [cB("dynamic-input-pair-input", [c$1("&:first-child", {
       "margin-left": "12px",
@@ -39748,19 +39785,19 @@
         margin: var(--action-margin-rtl);
       `)])])]);
 
-    var rtlStyle$9 = cB("input-number", [cM("rtl", `
+    var rtlStyle$a = cB("input-number", [cM("rtl", `
     direction: rtl;
   `)]);
 
     const inputNumberRtl = {
       name: "InputNumber",
-      style: rtlStyle$9,
+      style: rtlStyle$a,
       peers: [inputRtl, buttonRtl]
     };
 
     const dynamicInputRtl = {
       name: "DynamicInput",
-      style: rtlStyle$a,
+      style: rtlStyle$b,
       peers: [inputRtl, buttonRtl, buttonGroupRtl, checkboxRtl, inputNumberRtl]
     };
 
@@ -39777,21 +39814,21 @@
       }
     };
 
-    const self$I = () => {
+    const self$J = () => {
       return commonVars$1;
     };
     const spaceLight = {
       name: "Space",
-      self: self$I
+      self: self$J
     };
 
-    var rtlStyle$8 = cB("space", [cM("rtl", `
+    var rtlStyle$9 = cB("space", [cM("rtl", `
     direction: rtl;
   `)]);
 
     const spaceRtl = {
       name: "Space",
-      style: rtlStyle$8
+      style: rtlStyle$9
     };
 
     const dynamicTagsDark = {
@@ -39836,7 +39873,7 @@
       common: derived
     };
 
-    const self$H = vars => {
+    const self$I = vars => {
       const {
         heightSmall,
         heightMedium,
@@ -39891,16 +39928,16 @@
     const formLight = {
       name: "Form",
       common: derived,
-      self: self$H
+      self: self$I
     };
 
     const formItemDark = {
       name: "Form",
       common: derived$1,
-      self: self$H
+      self: self$I
     };
 
-    const self$G = vars => {
+    const self$H = vars => {
       const {
         brandPrimary500,
         staticGreen,
@@ -39937,16 +39974,16 @@
     const gradientTextLight = {
       name: "GradientText",
       common: derived,
-      self: self$G
+      self: self$H
     };
 
     const gradientTextDark = {
       name: "GradientText",
       common: derived$1,
-      self: self$G
+      self: self$H
     };
 
-    const self$F = vars => {
+    const self$G = vars => {
       const {
         elementsPrimary
       } = vars;
@@ -39962,16 +39999,16 @@
     const iconLight = {
       name: "Icon",
       common: derived,
-      self: self$F
+      self: self$G
     };
 
     const iconDark$1 = {
       name: "Icon",
       common: derived$1,
-      self: self$F
+      self: self$G
     };
 
-    const self$E = vars => {
+    const self$F = vars => {
       return {};
     };
     const inputNumberLight = createTheme$1({
@@ -39981,7 +40018,7 @@
         Button: buttonLight,
         Input: inputLight
       },
-      self: self$E
+      self: self$F
     });
 
     const inputNumberDark = {
@@ -39991,9 +40028,46 @@
         Button: buttonDark,
         Input: inputDark
       },
+      self: self$F
+    };
+
+    function self$E() {
+      return {
+        inputWidthSmall: "44px",
+        inputWidthMedium: "50px",
+        inputWidthLarge: "56px",
+        gapSmall: "6px",
+        gapMedium: "8px",
+        gapLarge: "10px"
+      };
+    }
+    const inputOtpLight = createTheme$1({
+      name: "InputOtp",
+      common: derived,
+      peers: {
+        Input: inputLight
+      },
+      self: self$E
+    });
+
+    const inputOtpDark = {
+      name: "InputOtp",
+      common: derived$1,
+      peers: {
+        Input: inputDark
+      },
       self: self$E
     };
 
+    var rtlStyle$8 = cB("input-otp", [cM("rtl", `
+    direction: rtl;
+  `)]);
+
+    const inputOtpRtl = {
+      name: "InputOtp",
+      style: rtlStyle$8
+    };
+
     const self$D = vars => {
       const {
         textPrimary,
@@ -41789,7 +41863,7 @@
       self: self$b
     };
 
-    var style$1p = cB("text", `
+    var style$1q = cB("text", `
   transition: color .3s var(--u-bezier);
   color: var(--u-text-color);
   margin: 0;
@@ -42048,7 +42122,7 @@
         const themeRef = useTheme(
           "Typography",
           "-text",
-          style$1p,
+          style$1q,
           typographyLight,
           props,
           mergedClsPrefixRef
@@ -42183,7 +42257,7 @@
     `)];
     }
 
-    var style$1o = cB("alert", `
+    var style$1p = cB("alert", `
   line-height: var(--u-line-height);
   position: relative;
   transition: background-color .3s var(--u-bezier);
@@ -42352,7 +42426,7 @@
         const themeRef = useTheme(
           "Alert",
           "-alert",
-          style$1o,
+          style$1p,
           alertLight,
           props,
           mergedClsPrefixRef
@@ -42479,7 +42553,7 @@
       }
     });
 
-    var style$1n = cB("anchor", `
+    var style$1o = cB("anchor", `
   position: relative;
 `, [cNotM("block", `
     padding-left: var(--u-rail-width);
@@ -42894,7 +42968,7 @@
         const themeRef = useTheme(
           "Anchor",
           "-anchor",
-          style$1n,
+          style$1o,
           anchorLight,
           props,
           mergedClsPrefixRef
@@ -43143,7 +43217,7 @@
       }
     });
 
-    var style$1m = cB("input", `
+    var style$1n = cB("input", `
   max-width: 100%;
   cursor: text;
   line-height: 1.5;
@@ -43681,7 +43755,7 @@
 
     const buttonGroupInjectionKey = createInjectionKey("u-button-group");
 
-    var style$1l = c$1([cB("button", `
+    var style$1m = c$1([cB("button", `
     margin: 0;
     font-weight: var(--u-font-weight);
     line-height: 1;
@@ -43993,7 +44067,7 @@
         const themeRef = useTheme(
           "Button",
           "-button",
-          style$1l,
+          style$1m,
           buttonLight,
           props,
           mergedClsPrefixRef
@@ -44399,7 +44473,7 @@
     });
     const XButton = Button;
 
-    var style$1k = cB("icon", `
+    var style$1l = cB("icon", `
   height: 1em;
   width: 1em;
   line-height: 1em;
@@ -44438,7 +44512,7 @@
           mergedClsPrefixRef,
           inlineThemeDisabled
         } = useConfig(props);
-        const themeRef = useTheme("Icon", "-icon", style$1k, iconLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme("Icon", "-icon", style$1l, iconLight, props, mergedClsPrefixRef);
         const cssVarsRef = vue.computed(() => {
           const {
             depth
@@ -44529,7 +44603,7 @@
     const messageApiInjectionKey = createInjectionKey("u-message-api");
     const messageProviderInjectionKey = createInjectionKey("u-message-provider");
 
-    var style$1j = c$1([cB("message-wrapper", `
+    var style$1k = c$1([cB("message-wrapper", `
     margin: var(--u-margin);
     z-index: 0;
     transform-origin: top center;
@@ -44652,7 +44726,7 @@
         const themeRef = useTheme(
           "Message",
           "-message",
-          style$1j,
+          style$1k,
           messageLight,
           messageProviderProps,
           mergedClsPrefixRef
@@ -45199,7 +45273,7 @@
         const themeRef = useTheme(
           "Input",
           "-input",
-          style$1m,
+          style$1n,
           inputLight,
           props,
           mergedClsPrefixRef
@@ -45347,32 +45421,32 @@
         const vm = vue.getCurrentInstance().proxy;
         function doUpdateValue(value) {
           const { onUpdateValue, "onUpdate:value": _onUpdateValue, onInput } = props;
-          const { nTriggerFormInput } = formItem;
+          const { triggerFormInput } = formItem;
           if (onUpdateValue) call(onUpdateValue, value);
           if (_onUpdateValue) call(_onUpdateValue, value);
           if (onInput) call(onInput, value);
           uncontrolledValueRef.value = value;
-          nTriggerFormInput();
+          triggerFormInput();
           emitDebouncedInput(value);
         }
         function doChange(value) {
           const { onChange } = props;
-          const { nTriggerFormChange } = formItem;
+          const { triggerFormChange } = formItem;
           if (onChange) call(onChange, value);
           uncontrolledValueRef.value = value;
-          nTriggerFormChange();
+          triggerFormChange();
         }
         function doBlur(e) {
           const { onBlur } = props;
-          const { nTriggerFormBlur } = formItem;
+          const { triggerFormBlur } = formItem;
           if (onBlur) call(onBlur, e);
-          nTriggerFormBlur();
+          triggerFormBlur();
         }
         function doFocus(e) {
           const { onFocus } = props;
-          const { nTriggerFormFocus } = formItem;
+          const { triggerFormFocus } = formItem;
           if (onFocus) call(onFocus, e);
-          nTriggerFormFocus();
+          triggerFormFocus();
         }
         function doClear(e) {
           const { onClear } = props;
@@ -46228,7 +46302,7 @@
       }
     });
 
-    var style$1i = cB("input-group", `
+    var style$1j = cB("input-group", `
   display: inline-flex;
   width: 100%;
   flex-wrap: nowrap;
@@ -46291,7 +46365,7 @@
       props: inputGroupProps,
       setup(props) {
         const { mergedClsPrefixRef } = useConfig(props);
-        useStyle("-input-group", style$1i, mergedClsPrefixRef);
+        useStyle("-input-group", style$1j, mergedClsPrefixRef);
         return {
           mergedClsPrefix: mergedClsPrefixRef
         };
@@ -46302,7 +46376,7 @@
       }
     });
 
-    var style$1h = cB("input-group-label", `
+    var style$1i = cB("input-group-label", `
   position: relative;
   user-select: none;
   -webkit-user-select: none;
@@ -46352,7 +46426,7 @@
         const themeRef = useTheme(
           "Input",
           "-input-group-label",
-          style$1h,
+          style$1i,
           inputLight,
           props,
           mergedClsPrefixRef
@@ -46435,7 +46509,7 @@
       }
     }
 
-    var style$1g = c$1([cB("auto-complete", `
+    var style$1h = c$1([cB("auto-complete", `
     z-index: auto;
     position: relative;
     display: inline-flex;
@@ -46538,7 +46612,7 @@
         const themeRef = useTheme(
           "AutoComplete",
           "-auto-complete",
-          style$1g,
+          style$1h,
           autoCompleteLight,
           props,
           mergedClsPrefixRef
@@ -46564,32 +46638,32 @@
         );
         function doUpdateValue(value) {
           const { "onUpdate:value": _onUpdateValue, onUpdateValue, onInput } = props;
-          const { nTriggerFormInput, nTriggerFormChange } = formItem;
+          const { triggerFormInput, triggerFormChange } = formItem;
           if (onUpdateValue) call(onUpdateValue, value);
           if (_onUpdateValue) call(_onUpdateValue, value);
           if (onInput) call(onInput, value);
           uncontrolledValueRef.value = value;
-          nTriggerFormInput();
-          nTriggerFormChange();
+          triggerFormInput();
+          triggerFormChange();
         }
         function doSelect(value) {
           const { onSelect } = props;
-          const { nTriggerFormInput, nTriggerFormChange } = formItem;
+          const { triggerFormInput, triggerFormChange } = formItem;
           if (onSelect) call(onSelect, value);
-          nTriggerFormInput();
-          nTriggerFormChange();
+          triggerFormInput();
+          triggerFormChange();
         }
         function doBlur(e) {
           const { onBlur } = props;
-          const { nTriggerFormBlur } = formItem;
+          const { triggerFormBlur } = formItem;
           if (onBlur) call(onBlur, e);
-          nTriggerFormBlur();
+          triggerFormBlur();
         }
         function doFocus(e) {
           const { onFocus } = props;
-          const { nTriggerFormFocus } = formItem;
+          const { triggerFormFocus } = formItem;
           if (onFocus) call(onFocus, e);
-          nTriggerFormFocus();
+          triggerFormFocus();
         }
         function doScroll(e) {
           const { onScroll } = props;
@@ -46958,7 +47032,7 @@
       self: self$a
     };
 
-    var style$1f = c$1([cB("skeleton", `
+    var style$1g = c$1([cB("skeleton", `
     height: 1em;
     width: 100%;
     transition: background-color .3s var(--u-bezier);
@@ -47014,7 +47088,7 @@
         const themeRef = useTheme(
           "Skeleton",
           "-skeleton",
-          style$1f,
+          style$1g,
           skeletonLight,
           props,
           mergedClsPrefixRef
@@ -47071,7 +47145,7 @@
       }
     });
 
-    var style$1e = cB("avatar", `
+    var style$1f = cB("avatar", `
   width: var(--u-merged-size);
   height: var(--u-merged-size);
   color: var(--u-text-color);
@@ -47132,7 +47206,9 @@
       renderFallback: Function,
       imgProps: Object,
       disabled: Boolean,
-      loading: Boolean
+      loading: Boolean,
+      iconColor: String,
+      iconSize: [String, Number]
     };
     var UAvatar = vue.defineComponent({
       name: "Avatar",
@@ -47178,7 +47254,7 @@
         const themeRef = useTheme(
           "Avatar",
           "-avatar",
-          style$1e,
+          style$1f,
           avatarLight,
           props,
           mergedClsPrefixRef
@@ -47236,6 +47312,11 @@
           const getBackgroundColor = (color2) => {
             return props.disabled || size === "small" ? "rgba(0,0,0,0)" : color2;
           };
+          const resolveSize = (value, fallback) => {
+            if (value === void 0) return fallback;
+            value = String(value);
+            return /^\d+$/.test(value) ? `${value}px` : value;
+          };
           return {
             "--u-font-size": fontSize,
             "--u-font-weight": fontWeight,
@@ -47243,10 +47324,10 @@
             "--u-border-radius": round ? "50%" : borderRadius,
             "--u-color": getBackgroundColor(color),
             "--u-text-color": textColor,
-            "--u-icon-color": iconColor,
+            "--u-icon-color": props.iconColor || iconColor,
             "--u-bezier": cubicBezierEaseInOut,
             "--u-merged-size": `var(--u-avatar-size-override, ${height})`,
-            "--u-icon-size": iconSize
+            "--u-icon-size": resolveSize(props.iconSize, iconSize)
           };
         });
         const themeClassHandle = inlineThemeDisabled ? useThemeClass(
@@ -47385,7 +47466,7 @@
       }
     });
 
-    var style$1d = cB("avatar-group", `
+    var style$1e = cB("avatar-group", `
   flex-wrap: nowrap;
   display: inline-flex;
   position: relative;
@@ -47419,7 +47500,7 @@
         const mergedThemeRef = useTheme(
           "AvatarGroup",
           "-avatar-group",
-          style$1d,
+          style$1e,
           avatarGroupLight,
           props,
           mergedClsPrefixRef
@@ -47514,7 +47595,7 @@
       /* @__PURE__ */ vue.h("g", { stroke: "none", "stroke-width": "1", "fill-rule": "evenodd" }, /* @__PURE__ */ vue.h("g", { transform: "translate(-139.000000, -4423.000000)", "fill-rule": "nonzero" }, /* @__PURE__ */ vue.h("g", { transform: "translate(120.000000, 4285.000000)" }, /* @__PURE__ */ vue.h("g", { transform: "translate(7.000000, 126.000000)" }, /* @__PURE__ */ vue.h("g", { transform: "translate(24.000000, 24.000000) scale(1, -1) translate(-24.000000, -24.000000) translate(12.000000, 12.000000)" }, /* @__PURE__ */ vue.h("g", { transform: "translate(4.000000, 2.000000)" }, /* @__PURE__ */ vue.h("path", { d: "M8,0 C8.51283584,0 8.93550716,0.38604019 8.99327227,0.883378875 L9,1 L9,10.584 L12.2928932,7.29289322 C12.6834175,6.90236893 13.3165825,6.90236893 13.7071068,7.29289322 C14.0675907,7.65337718 14.0953203,8.22060824 13.7902954,8.61289944 L13.7071068,8.70710678 L8.70710678,13.7071068 L8.62544899,13.7803112 L8.618,13.784 L8.59530661,13.8036654 L8.4840621,13.8753288 L8.37133602,13.9287745 L8.22929083,13.9735893 L8.14346259,13.9897165 L8.03324678,13.9994506 L7.9137692,13.9962979 L7.77070917,13.9735893 L7.6583843,13.9401293 L7.57677845,13.9063266 L7.47929125,13.8540045 L7.4048407,13.8036865 L7.38131006,13.7856883 C7.35030318,13.7612383 7.32077858,13.7349921 7.29289322,13.7071068 L2.29289322,8.70710678 L2.20970461,8.61289944 C1.90467972,8.22060824 1.93240926,7.65337718 2.29289322,7.29289322 C2.65337718,6.93240926 3.22060824,6.90467972 3.61289944,7.20970461 L3.70710678,7.29289322 L7,10.585 L7,1 L7.00672773,0.883378875 C7.06449284,0.38604019 7.48716416,0 8,0 Z" }), /* @__PURE__ */ vue.h("path", { d: "M14.9333333,15.9994506 C15.5224371,15.9994506 16,16.4471659 16,16.9994506 C16,17.5122865 15.5882238,17.9349578 15.0577292,17.9927229 L14.9333333,17.9994506 L1.06666667,17.9994506 C0.477562934,17.9994506 0,17.5517354 0,16.9994506 C0,16.4866148 0.411776203,16.0639435 0.9422708,16.0061783 L1.06666667,15.9994506 L14.9333333,15.9994506 Z" })))))))
     );
 
-    var style$1c = cB("back-top", `
+    var style$1d = cB("back-top", `
   position: fixed;
   right: 40px;
   bottom: 40px;
@@ -47653,7 +47734,7 @@
         const themeRef = useTheme(
           "BackTop",
           "-back-top",
-          style$1c,
+          style$1d,
           backTopLight,
           props,
           mergedClsPrefixRef
@@ -47803,7 +47884,7 @@
       }
     });
 
-    var style$1b = c$1([c$1("@keyframes badge-wave-spread", {
+    var style$1c = c$1([c$1("@keyframes badge-wave-spread", {
       from: {
         boxShadow: "0 0 0.5px 0px var(--u-ripple-color)",
         opacity: 0.6
@@ -47917,7 +47998,7 @@
         const themeRef = useTheme(
           "Badge",
           "-badge",
-          style$1b,
+          style$1c,
           badgeLight,
           props,
           mergedClsPrefixRef
@@ -48049,7 +48130,7 @@
       }
     });
 
-    var style$1a = cB("breadcrumb", `
+    var style$1b = cB("breadcrumb", `
   white-space: nowrap;
   cursor: default;
   line-height: var(--u-item-line-height);
@@ -48119,7 +48200,7 @@
         const themeRef = useTheme(
           "Breadcrumb",
           "-breadcrumb",
-          style$1a,
+          style$1b,
           breadcrumbLight,
           props,
           mergedClsPrefixRef
@@ -48296,7 +48377,7 @@
       props: buttonGroupProps,
       setup(props) {
         const { mergedClsPrefixRef, mergedRtlRef } = useConfig(props);
-        useStyle("-button-group", style$1q, mergedClsPrefixRef);
+        useStyle("-button-group", style$1r, mergedClsPrefixRef);
         vue.provide(buttonGroupInjectionKey, props);
         const rtlEnabledRef = useRtl(
           "ButtonGroup",
@@ -53687,7 +53768,7 @@
       self: self$9
     };
 
-    var style$19 = c$1([cB("calendar", `
+    var style$1a = c$1([cB("calendar", `
     line-height: var(--u-line-height);
     font-size: var(--u-font-size);
     color: var(--u-text-color);
@@ -53825,7 +53906,7 @@
         const themeRef = useTheme(
           "Calendar",
           "-calendar",
-          style$19,
+          style$1a,
           calendarLight,
           props,
           mergedClsPrefixRef
@@ -55109,7 +55190,7 @@
       }
     });
 
-    var style$18 = c$1([cB("color-picker", `
+    var style$19 = c$1([cB("color-picker", `
     display: inline-block;
     box-sizing: border-box;
     height: var(--u-height);
@@ -55357,7 +55438,7 @@
         const themeRef = useTheme(
           "ColorPicker",
           "-color-picker",
-          style$18,
+          style$19,
           colorPickerLight,
           props,
           mergedClsPrefixRef
@@ -55576,12 +55657,12 @@
           } else {
             upcomingValue = null;
           }
-          const { nTriggerFormChange, nTriggerFormInput } = formItem;
+          const { triggerFormChange, triggerFormInput } = formItem;
           const { onUpdateValue, "onUpdate:value": _onUpdateValue } = props;
           if (onUpdateValue) call(onUpdateValue, value);
           if (_onUpdateValue) call(_onUpdateValue, value);
-          nTriggerFormChange();
-          nTriggerFormInput();
+          triggerFormChange();
+          triggerFormInput();
           uncontrolledValueRef.value = value;
         }
         function handleInputUpdateValue(value) {
@@ -55591,7 +55672,7 @@
         function handleComplete(pushStack = true) {
           const { value } = mergedValueRef;
           if (value) {
-            const { nTriggerFormChange, nTriggerFormInput } = formItem;
+            const { triggerFormChange, triggerFormInput } = formItem;
             const { onComplete } = props;
             if (onComplete) {
               onComplete(value);
@@ -55602,8 +55683,8 @@
               undoStack.splice(valueIndex + 1, undoStack.length, value);
               valueIndexRef.value = valueIndex + 1;
             }
-            nTriggerFormChange();
-            nTriggerFormInput();
+            triggerFormChange();
+            triggerFormInput();
           }
         }
         function undo() {
@@ -55906,7 +55987,7 @@
       }
     });
 
-    var style$17 = c$1([cB("card", `
+    var style$18 = c$1([cB("card", `
     font-size: var(--u-font-size);
     line-height: var(--u-line-height);
     font-weight: var(--u-font-weight);
@@ -56046,7 +56127,7 @@
         const themeRef = useTheme(
           "Card",
           "-card",
-          style$17,
+          style$18,
           cardLight,
           props,
           mergedClsPrefixRef
@@ -56300,7 +56381,7 @@
       }
     };
 
-    var style$16 = cB("action-card", `
+    var style$17 = cB("action-card", `
   position: relative;
   width: var(--u-width);
   min-height: var(--u-min-height);
@@ -56390,7 +56471,7 @@
     background-color: var(--u-pressed-background-color);
   `)]);
 
-    var style$15 = cB("tooltip", "", [cE("content", `
+    var style$16 = cB("tooltip", "", [cE("content", `
     display: flex;
     align-items: flex-start;
   `), cE("icon", `
@@ -56511,7 +56592,7 @@
         const themeRef = useTheme(
           "Tooltip",
           "-tooltip",
-          style$15,
+          style$16,
           tooltipLight,
           props,
           mergedClsPrefixRef
@@ -56610,7 +56691,7 @@
       }
     });
 
-    var style$14 = cB("ellipsis", {
+    var style$15 = cB("ellipsis", {
       overflow: "hidden"
     }, [cNotM("line-clamp", `
     white-space: nowrap;
@@ -56648,7 +56729,7 @@
         const mergedTheme = useTheme(
           "Ellipsis",
           "-ellipsis",
-          style$14,
+          style$15,
           ellipsisLight,
           props,
           mergedClsPrefixRef
@@ -56800,7 +56881,7 @@
       setup(props, { attrs, slots }) {
         const mouseEnteredRef = vue.ref(false);
         const mergedClsPrefixRef = useMergedClsPrefix();
-        useStyle("-ellipsis", style$14, mergedClsPrefixRef);
+        useStyle("-ellipsis", style$15, mergedClsPrefixRef);
         const renderTrigger = () => {
           const { lineClamp } = props;
           const mergedClsPrefix = mergedClsPrefixRef.value;
@@ -56871,7 +56952,7 @@
         const themeRef = useTheme(
           "ActionCard",
           "-action-card",
-          style$16,
+          style$17,
           actionCardLight,
           props,
           mergedClsPrefixRef
@@ -57358,16 +57439,16 @@
       }
     });
 
-    var style$13 = cB("card-list-item", [c$1("&", {
+    var style$14 = cB("card-list-item", [c$1("&", {
       padding: "16px",
-      backgroundColor: "var(--u-color-embedded)",
       borderRadius: "var(--u-border-radius)",
-      boxShadow: "var(--u-box-shadow)",
       display: "flex",
       flexDirection: "column",
       gap: "8px",
       position: "relative"
-    }), cB("card-list-item__title", {
+    }, [cM("embedded", {
+      backgroundColor: "var(--u-color-embedded)"
+    })]), cB("card-list-item__title", {
       fontSize: "var(--u-title-font-size)",
       lineHeight: "var(--u-title-line-height)",
       fontWeight: "var(--u-title-font-weight)",
@@ -57381,10 +57462,10 @@
       display: "flex",
       gap: "0"
     }, [c$1("&.horizontal", {
-      flexDirection: "column"
-    }), c$1("&.vertical", {
       flexDirection: "row",
       alignItems: "stretch"
+    }), c$1("&.vertical", {
+      flexDirection: "column"
     })]), cB("card-list-item__items--grid", {
       display: "grid",
       gridAutoFlow: "column",
@@ -57468,6 +57549,10 @@
         default: "horizontal"
       },
       dropdown: Boolean,
+      embedded: {
+        type: Boolean,
+        default: false
+      },
       renderDivider: Function
     };
     var UCardListItem = vue.defineComponent({
@@ -57475,7 +57560,7 @@
       props: cardListItemProps,
       setup(props, { slots }) {
         const { mergedClsPrefixRef } = useConfig(props);
-        useStyle("-card-list-item", style$13, mergedClsPrefixRef);
+        useStyle("-card-list-item", style$14, mergedClsPrefixRef);
         const isOpen = vue.ref(false);
         const toggle = () => {
           isOpen.value = !isOpen.value;
@@ -57512,7 +57597,10 @@
         return /* @__PURE__ */ vue.h(
           "div",
           {
-            class: `${mergedClsPrefix}-card-list-item`,
+            class: [
+              `${mergedClsPrefix}-card-list-item`,
+              this.embedded && `${mergedClsPrefix}-card-list-item--embedded`
+            ],
             onClick: isDropdown && items.length ? this.toggle : void 0,
             ref: "selfRef"
           },
@@ -57535,7 +57623,7 @@
               class: [
                 `${mergedClsPrefix}-card-list-item__items`,
                 this.direction,
-                this.direction === "vertical" && `${mergedClsPrefix}-card-list-item__items--grid`
+                this.direction === "horizontal" && `${mergedClsPrefix}-card-list-item__items--grid`
               ]
             },
             items.map((item, idx) => [
@@ -57547,8 +57635,8 @@
               }) : vue.h("div", {
                 class: [
                   `${mergedClsPrefix}-card-list-item__divider`,
-                  this.direction === "vertical" ? `${mergedClsPrefix}-card-list-item__divider--vertical` : `${mergedClsPrefix}-card-list-item__divider--horizontal`,
-                  this.direction === "vertical" && `${mergedClsPrefix}-card-list-item__divider--grid`
+                  this.direction === "horizontal" ? `${mergedClsPrefix}-card-list-item__divider--vertical` : `${mergedClsPrefix}-card-list-item__divider--horizontal`,
+                  this.direction === "horizontal" && `${mergedClsPrefix}-card-list-item__divider--grid`
                 ]
               }))
             ])
@@ -57603,7 +57691,7 @@
         const themeRef = useTheme(
           "CardList",
           "-card-list",
-          style$13,
+          style$14,
           cardListLight,
           props,
           mergedClsPrefixRef
@@ -57689,6 +57777,7 @@
                 subtitle: card.subtitle,
                 items: card.items,
                 direction: card.direction,
+                embedded: card.embedded,
                 dropdown: card.dropdown,
                 ...cardProps,
                 renderDivider: showDivider ? renderDivider : () => null
@@ -58070,7 +58159,7 @@
       }
     });
 
-    var style$12 = cB("carousel", `
+    var style$13 = cB("carousel", `
   position: relative;
   width: 100%;
   height: 100%;
@@ -58976,7 +59065,7 @@
         const themeRef = useTheme(
           "Carousel",
           "-carousel",
-          style$12,
+          style$13,
           carouselLight,
           props,
           mergedClsPrefixRef
@@ -59173,7 +59262,7 @@
 
     var LineMark = /* @__PURE__ */ vue.h("svg", { width: "22", height: "24", viewBox: "0 0 22 24", class: "line-icon" }, /* @__PURE__ */ vue.h("path", { d: "M5.49998 13C5.24026 13 5.0224 12.904 4.8464 12.712C4.67101 12.5207 4.58331 12.2833 4.58331 12C4.58331 11.7167 4.67101 11.479 4.8464 11.287C5.0224 11.0957 5.24026 11 5.49998 11H16.5C16.7597 11 16.9773 11.0957 17.1526 11.287C17.3286 11.479 17.4166 11.7167 17.4166 12C17.4166 12.2833 17.3286 12.5207 17.1526 12.712C16.9773 12.904 16.7597 13 16.5 13H5.49998Z" }));
 
-    var style$11 = c$1([iconSwitchTransition(), c$1("@keyframes ripple", {
+    var style$12 = c$1([iconSwitchTransition(), c$1("@keyframes ripple", {
       from: {
         transform: "scale(0)"
       },
@@ -59365,7 +59454,7 @@
         const themeRef = useTheme(
           "Checkbox",
           "-checkbox",
-          style$11,
+          style$12,
           checkboxLight,
           props,
           mergedClsPrefixRef
@@ -59621,7 +59710,7 @@
           return /* @__PURE__ */ new Set();
         });
         function toggleCheckbox(checked, checkboxValue) {
-          const { nTriggerFormInput, nTriggerFormChange } = formItem;
+          const { triggerFormInput, triggerFormChange } = formItem;
           const {
             onChange,
             "onUpdate:value": _onUpdateValue,
@@ -59645,8 +59734,8 @@
                     value: checkboxValue
                   });
                 }
-                nTriggerFormInput();
-                nTriggerFormChange();
+                triggerFormInput();
+                triggerFormChange();
                 uncontrolledValueRef.value = groupValue;
                 if (onChange) call(onChange, groupValue);
               }
@@ -59667,8 +59756,8 @@
                 }
                 if (onChange) call(onChange, groupValue);
                 uncontrolledValueRef.value = groupValue;
-                nTriggerFormInput();
-                nTriggerFormChange();
+                triggerFormInput();
+                triggerFormChange();
               }
             }
           } else {
@@ -59687,8 +59776,8 @@
               }
               if (onChange) call(onChange, [checkboxValue]);
               uncontrolledValueRef.value = [checkboxValue];
-              nTriggerFormInput();
-              nTriggerFormChange();
+              triggerFormInput();
+              triggerFormChange();
             } else {
               if (onUpdateValue) {
                 call(onUpdateValue, [], {
@@ -59704,8 +59793,8 @@
               }
               if (onChange) call(onChange, []);
               uncontrolledValueRef.value = [];
-              nTriggerFormInput();
-              nTriggerFormChange();
+              triggerFormInput();
+              triggerFormChange();
             }
           }
         }
@@ -60387,7 +60476,7 @@
       }
     });
 
-    var style$10 = c$1([cB("cascader-menu", `
+    var style$11 = c$1([cB("cascader-menu", `
     outline: none;
     position: relative;
     margin: 4px 0;
@@ -60628,7 +60717,7 @@
         const themeRef = useTheme(
           "Cascader",
           "-cascader",
-          style$10,
+          style$11,
           cascaderLight,
           props,
           mergedClsPrefixRef
@@ -60740,7 +60829,7 @@
             "onUpdate:value": _onUpdateValue,
             onChange
           } = props;
-          const { nTriggerFormInput, nTriggerFormChange } = formItem;
+          const { triggerFormInput, triggerFormChange } = formItem;
           if (onUpdateValue) {
             call(onUpdateValue, value, option, optionPath);
           }
@@ -60751,8 +60840,8 @@
             call(onChange, value, option, optionPath);
           }
           uncontrolledValueRef.value = value;
-          nTriggerFormInput();
-          nTriggerFormChange();
+          triggerFormInput();
+          triggerFormChange();
         }
         function updateKeyboardKey(key) {
           keyboardKeyRef.value = key;
@@ -60939,15 +61028,15 @@
         );
         function doBlur(e) {
           const { onBlur } = props;
-          const { nTriggerFormBlur } = formItem;
+          const { triggerFormBlur } = formItem;
           if (onBlur) call(onBlur, e);
-          nTriggerFormBlur();
+          triggerFormBlur();
         }
         function doFocus(e) {
           const { onFocus } = props;
-          const { nTriggerFormFocus } = formItem;
+          const { triggerFormFocus } = formItem;
           if (onFocus) call(onFocus, e);
-          nTriggerFormFocus();
+          triggerFormFocus();
         }
         function focusSelectionInput() {
           triggerInstRef.value?.focusInput();
@@ -61527,7 +61616,7 @@
       }
     });
 
-    var style$$ = c$1([cB("code", `
+    var style$10 = c$1([cB("code", `
     font-size: var(--u-font-size);
     font-family: var(--u-font-family);
   `, [cM("show-line-numbers", `
@@ -61693,7 +61782,7 @@
         const themeRef = useTheme(
           "Code",
           "-code",
-          style$$,
+          style$10,
           codeLight,
           props,
           mergedClsPrefixRef
@@ -61792,55 +61881,72 @@
       }
     });
 
-    var style$_ = cB("collapse", "width: 100%;", [cB("collapse-item", `
-    font-size: var(--u-font-size);
-    line-height: var(--u-line-height);
-    color: var(--u-text-color);
-    transition:
-      color .3s var(--u-bezier),
-      border-color .3s var(--u-bezier);
-    margin: var(--u-item-margin);
-  `, [cM("disabled", [cE("header", "cursor: not-allowed;", [cE("header-main", `
-          color: var(--u-title-text-color-disabled);
-        `), cB("collapse-item-arrow", `
-          color: var(--u-arrow-color-disabled);
-        `)])]), cB("collapse-item", "margin-left: 32px;"), c$1("&:first-child", "margin-top: 0;"), c$1("&:first-child >", [cE("header", "padding-top: 0;")]), cM("left-arrow-placement", [cE("header", [cB("collapse-item-arrow", "margin-right: 4px;")])]), cM("right-arrow-placement", [cE("header", [cB("collapse-item-arrow", `
-          margin-left: 4px;
-          order: 1;
-        `)])]), cM("right-edge-arrow-placement", [cE("header", [cB("collapse-item-arrow", "margin-left: auto;")])]), cE("content-wrapper", [cE("content-inner", "padding-top: 16px;"), fadeInHeightExpandTransition({
-      duration: "0.15s"
-    })]), cM("active", [cE("header", [cM("active", [cB("collapse-item-arrow", "transform: rotate(90deg);")])])]), c$1("&:not(:first-child)", "border-top: 1px solid var(--u-divider-color);"), cE("header", `
-      font-size: var(--u-title-font-size);
-      line-height: var(--u-title-line-height);
-      display: flex;
-      flex-wrap: nowrap;
-      align-items: center;
-      transition: color .3s var(--u-bezier);
-      position: relative;
-      padding: var(--u-title-padding);
-      color: var(--u-title-text-color);
+    var style$$ = cB("collapse", `
+    width: 100%;
+    background-color: var(--u-background-color);
+    border-radius: var(--u-border-radius);
+    box-sizing: var(--u-box-sizing);
+  `, [cB("collapse-item", `
+      font-size: var(--u-font-size);
+      line-height: var(--u-line-height);
+      color: var(--u-text-color);
+      transition:
+        color .3s var(--u-bezier),
+        border-color .3s var(--u-bezier);
+      padding: var(--u-padding);
       cursor: pointer;
-    `, [cE("header-main", `
+    `, [cM("disabled", [cE("header", "cursor: not-allowed;", [cE("header-main", `
+            color: var(--u-title-text-color-disabled);
+          `), cB("collapse-item-arrow", `
+            color: var(--u-arrow-color-disabled);
+          `)])]), cB("collapse-item", "margin-left: 32px;"), c$1("&:first-child", "margin-top: 0;"), c$1("&:first-child >", [cE("header", "padding-top: 0;")]), cM("left-arrow-placement", [cE("header", [cB("collapse-item-arrow", "margin-right: 4px;")])]), cM("right-arrow-placement", [cE("header", [cB("collapse-item-arrow", `
+            margin-left: 4px;
+            order: 1;
+          `)])]), cM("right-edge-arrow-placement", [cE("header", [cB("collapse-item-arrow", `
+            margin-left: auto;
+            display: flex;
+            width: 28px;
+            height: 28px;
+            justify-content: center;
+            align-items: center;
+            border-radius: 100px;
+            background: #F3F4F6;
+          `, [cB("base-icon", `
+              transform: scaleY(1) rotate(90deg);
+              transition:
+                transform .15s var(--u-bezier)
+            `)])])]), cE("content-wrapper", [cE("content-inner", "padding-top: 16px;"), fadeInHeightExpandTransition({
+      duration: "0.15s"
+    })]), cM("active", [cE("header", [cM("active", [cB("collapse-item-arrow", [cB("base-icon", "transform: scaleY(-1) rotate(90deg)")])])])]), cE("header", `
+        font-size: var(--u-title-font-size);
+        line-height: var(--u-title-line-height);
         display: flex;
         flex-wrap: nowrap;
         align-items: center;
-        font-weight: var(--u-title-font-weight);
         transition: color .3s var(--u-bezier);
-        flex: 1;
+        position: relative;
         color: var(--u-title-text-color);
-      `), cE("header-extra", `
-        display: flex;
-        align-items: center;
-        transition: color .3s var(--u-bezier);
-        color: var(--u-text-color);
-      `), cB("collapse-item-arrow", `
-        display: flex;
-        transition:
-          transform .15s var(--u-bezier),
-          color .3s var(--u-bezier);
-        font-size: var(--u-arrow-size);
-        color: var(--u-arrow-color);
-      `)])])]);
+      `, [cE("header-main", `
+          display: flex;
+          flex-wrap: nowrap;
+          align-items: center;
+          font-weight: var(--u-title-font-weight);
+          transition: color .3s var(--u-bezier);
+          flex: 1;
+          color: var(--u-title-text-color);
+        `), cE("header-extra", `
+          display: flex;
+          align-items: center;
+          transition: color .3s var(--u-bezier);
+          color: var(--u-text-color);
+        `), cB("collapse-item-arrow", `
+          display: flex;
+          transition:
+            transform .15s var(--u-bezier),
+            color .3s var(--u-bezier);
+          font-size: var(--u-arrow-size);
+          color: var(--u-arrow-color);
+        `)])])]);
 
     const collapseProps = {
       ...useTheme.props,
@@ -61851,7 +61957,7 @@
       expandedNames: [Array, String],
       arrowPlacement: {
         type: String,
-        default: "left"
+        default: "right-edge"
       },
       accordion: {
         type: Boolean,
@@ -61894,7 +62000,7 @@
         const themeRef = useTheme(
           "Collapse",
           "-collapse",
-          style$_,
+          style$$,
           collapseLight,
           props,
           mergedClsPrefixRef
@@ -61976,10 +62082,13 @@
               fontSize,
               titleFontSize,
               arrowColorDisabled,
-              itemMargin,
               lineHeight,
               titleLineHeight,
-              arrowSize
+              arrowSize,
+              backgroundColor,
+              borderRadius,
+              padding,
+              boxSizing
             }
           } = themeRef.value;
           return {
@@ -61997,7 +62106,10 @@
             "--u-arrow-size": arrowSize,
             "--u-arrow-color": arrowColor,
             "--u-arrow-color-disabled": arrowColorDisabled,
-            "--u-item-margin": itemMargin
+            "--u-background-color": backgroundColor,
+            "--u-border-radius": borderRadius,
+            "--u-padding": padding,
+            "--u-box-sizing": boxSizing
           };
         });
         const themeClassHandle = inlineThemeDisabled ? useThemeClass("collapse", void 0, cssVarsRef, props) : void 0;
@@ -62118,6 +62230,7 @@
             return collapseProps.arrowPlacement;
           }),
           handleClick(e) {
+            e.stopPropagation();
             if (UCollapse && !props.disabled) {
               UCollapse.toggleItem(collapsedRef.value, mergedNameRef.value, e);
             }
@@ -62161,7 +62274,8 @@
               `${mergedClsPrefix}-collapse-item--${arrowPlacement}-arrow-placement`,
               disabled && `${mergedClsPrefix}-collapse-item--disabled`,
               !collapsed && `${mergedClsPrefix}-collapse-item--active`
-            ]
+            ],
+            onClick: this.handleClick
           },
           /* @__PURE__ */ vue.h(
             "div",
@@ -62174,8 +62288,7 @@
             /* @__PURE__ */ vue.h(
               "div",
               {
-                class: `${mergedClsPrefix}-collapse-item__header-main`,
-                onClick: this.handleClick
+                class: `${mergedClsPrefix}-collapse-item__header-main`
               },
               arrowPlacement !== "right-edge" && arrowNode,
               headerNode
@@ -62207,7 +62320,7 @@
       }
     });
 
-    var style$Z = cB("collapse-transition", {
+    var style$_ = cB("collapse-transition", {
       width: "100%"
     }, [fadeInHeightExpandTransition()]);
 
@@ -62246,7 +62359,7 @@
         const mergedThemeRef = useTheme(
           "CollapseTransition",
           "-collapse-transition",
-          style$Z,
+          style$_,
           collapseTransitionLight,
           props,
           mergedClsPrefixRef
@@ -62789,7 +62902,7 @@
 
     const popselectInjectionKey = createInjectionKey("u-popselect");
 
-    var style$Y = cB("popselect-menu", `
+    var style$Z = cB("popselect-menu", `
   box-shadow: var(--u-menu-box-shadow);
 `);
 
@@ -62843,7 +62956,7 @@
         const themeRef = useTheme(
           "Popselect",
           "-pop-select",
-          style$Y,
+          style$Z,
           popselectLight,
           UPopselect.props,
           mergedClsPrefixRef
@@ -63076,7 +63189,7 @@
       }
     });
 
-    var style$X = c$1([cB("select", `
+    var style$Y = c$1([cB("select", `
     z-index: auto;
     outline: none;
     width: 100%;
@@ -63239,7 +63352,7 @@
         const themeRef = useTheme(
           "Select",
           "-select",
-          style$X,
+          style$Y,
           selectLight,
           props,
           mergedClsPrefixRef
@@ -63392,21 +63505,21 @@
             "onUpdate:value": _onUpdateValue,
             onUpdateValue
           } = props;
-          const { nTriggerFormChange, nTriggerFormInput } = formItem;
+          const { triggerFormChange, triggerFormInput } = formItem;
           if (onChange) call(onChange, value, option);
           if (onUpdateValue) call(onUpdateValue, value, option);
           if (_onUpdateValue) {
             call(_onUpdateValue, value, option);
           }
           uncontrolledValueRef.value = value;
-          nTriggerFormChange();
-          nTriggerFormInput();
+          triggerFormChange();
+          triggerFormInput();
         }
         function doBlur(e) {
           const { onBlur } = props;
-          const { nTriggerFormBlur } = formItem;
+          const { triggerFormBlur } = formItem;
           if (onBlur) call(onBlur, e);
-          nTriggerFormBlur();
+          triggerFormBlur();
         }
         function doClear() {
           const { onClear } = props;
@@ -63414,9 +63527,9 @@
         }
         function doFocus(e) {
           const { onFocus, showOnFocus } = props;
-          const { nTriggerFormFocus } = formItem;
+          const { triggerFormFocus } = formItem;
           if (onFocus) call(onFocus, e);
-          nTriggerFormFocus();
+          triggerFormFocus();
           if (showOnFocus) {
             openMenu();
           }
@@ -64125,7 +64238,7 @@
     border: var(--u-button-border-hover);
     color: var(--u-button-icon-color-hover);
   `)];
-    var style$W = cB("pagination", `
+    var style$X = cB("pagination", `
   display: flex;
   width: 100%;
   justify-content: space-between;
@@ -64332,7 +64445,7 @@
         const themeRef = useTheme(
           "Pagination",
           "-pagination",
-          style$W,
+          style$X,
           paginationLight,
           props,
           mergedClsPrefixRef
@@ -65105,6 +65218,7 @@
         type: Object,
         default: {}
       },
+      emptyProps: Object,
       onLoad: Function,
       "onUpdate:page": [Function, Array],
       onUpdatePage: [Function, Array],
@@ -65212,7 +65326,7 @@
       }
     });
 
-    var style$V = cB("radio", `
+    var style$W = cB("radio", `
   outline: none;
   position: relative;
   user-select: none;
@@ -65361,7 +65475,7 @@
         const themeRef = useTheme(
           "Radio",
           "-radio",
-          style$V,
+          style$W,
           radioLight,
           props,
           radio.mergedClsPrefix
@@ -65501,7 +65615,7 @@
       }
     });
 
-    var style$U = cB("radio-group", `
+    var style$V = cB("radio-group", `
   display: inline-block;
   font-size: var(--u-font-size);
 `, [cE("splitor", `
@@ -65672,16 +65786,16 @@
         const {
           mergedSizeRef,
           mergedDisabledRef,
-          nTriggerFormChange,
-          nTriggerFormInput,
-          nTriggerFormBlur,
-          nTriggerFormFocus
+          triggerFormChange,
+          triggerFormInput,
+          triggerFormBlur,
+          triggerFormFocus
         } = useFormItem(props);
         const { mergedClsPrefixRef, inlineThemeDisabled, mergedRtlRef } = useConfig(props);
         const themeRef = useTheme(
           "Radio",
           "-radio-group",
-          style$U,
+          style$V,
           radioLight,
           props,
           mergedClsPrefixRef
@@ -65701,20 +65815,20 @@
             call(_onUpdateValue, value);
           }
           uncontrolledValueRef.value = value;
-          nTriggerFormChange();
-          nTriggerFormInput();
+          triggerFormChange();
+          triggerFormInput();
         }
         function handleFocusin(e) {
           const { value: selfEl } = selfElRef;
           if (!selfEl) return;
           if (selfEl.contains(e.relatedTarget)) return;
-          nTriggerFormFocus();
+          triggerFormFocus();
         }
         function handleFocusout(e) {
           const { value: selfEl } = selfElRef;
           if (!selfEl) return;
           if (selfEl.contains(e.relatedTarget)) return;
-          nTriggerFormBlur();
+          triggerFormBlur();
         }
         vue.provide(radioGroupInjectionKey, {
           mergedClsPrefixRef,
@@ -65854,6 +65968,18 @@
       ONLY_DIGITS: /\D/g,
       ONLY_NUMERIC_AND_DOT: /[^\d.]/g
     };
+    const defaultNumericMask = {
+      postProcess: value => {
+        if (!value) return "";
+        const isNegative = value.trim().startsWith("-");
+        const cleaned = value.replace(/[^\d.]/g, "");
+        const [intPartRaw, decimalPartRaw = ""] = cleaned.split(".", 2);
+        const intPart = intPartRaw.replace(/\B(?=(\d{3})+(?!\d))/g, " ");
+        const decimalPart = decimalPartRaw.slice(0, 2);
+        const result = cleaned.includes(".") ? `${intPart}.${decimalPart}` : intPart;
+        return isNegative ? `-${result}` : result;
+      }
+    };
     function getNumberColWidth(col) {
       if (col.type === "selection") {
         return col.width === void 0 ? SELECTION_COL_WIDTH : depx(col.width);
@@ -66938,7 +67064,7 @@
       }
     });
 
-    var style$T = cB("dropdown-menu", `
+    var style$U = cB("dropdown-menu", `
   transform-origin: var(--v-transform-origin);
   background-color: var(--u-color);
   border-radius: var(--u-border-radius);
@@ -67185,7 +67311,7 @@
         const themeRef = useTheme(
           "Dropdown",
           "-dropdown",
-          style$T,
+          style$U,
           dropdownLight,
           props,
           mergedClsPrefixRef
@@ -85648,39 +85774,6 @@
       }
       return stringValue;
     }
-    function processInputWithMask(value, mask) {
-      if (!mask) {
-        return {
-          processedValue: value,
-          displayValue: value
-        };
-      }
-      if (typeof mask === "function") {
-        const processedValue = mask(value);
-        return {
-          processedValue,
-          displayValue: processedValue
-        };
-      } else if (typeof mask === "object" && mask.postProcess) {
-        const displayValue = mask.postProcess(value);
-        const cleanValue = value.replace(REGEX.ONLY_DIGITS, "");
-        const processedValue = cleanValue ? parseFloat(cleanValue) : 0;
-        return {
-          processedValue,
-          displayValue
-        };
-      } else if (typeof mask === "string") {
-        const displayValue = applyMask(value, mask);
-        return {
-          processedValue: value,
-          displayValue
-        };
-      }
-      return {
-        processedValue: value,
-        displayValue: value
-      };
-    }
 
     var Cell = vue.defineComponent({
       name: "DataTableCell",
@@ -85712,7 +85805,9 @@
       render() {
         const { isSummary, column, row, renderCell } = this;
         let cell;
-        const { render, key, ellipsis, editable, mask } = column;
+        let { mask } = column;
+        const { render, key, ellipsis, editable, numeric } = column;
+        if (numeric && !mask) mask = defaultNumericMask;
         if (render && !isSummary) {
           let cellValue = render(row, this.index);
           if (mask && cellValue !== null && cellValue !== void 0) {
@@ -85723,38 +85818,93 @@
           cell = cellValue;
         } else if (editable && !isSummary) {
           const { placeholder } = column;
-          let initialValue = String(row[key] || "");
-          if (mask && initialValue) {
-            initialValue = processMaskedValue(initialValue, mask);
-          }
+          const rawValue = String(row[key] || "");
+          const displayValue = mask ? processMaskedValue(rawValue, mask) : rawValue;
+          const isEditingRef = { current: false };
           const inputProps = {
             class: `${this.clsPrefix}-data-table-editable-input`,
-            value: initialValue,
+            value: displayValue,
             placeholder: placeholder || "",
+            onFocus: (e) => {
+              const input = e.target;
+              isEditingRef.current = true;
+              input.value = rawValue;
+            },
+            onKeyDown: (e) => {
+              if (mask && typeof mask === "function" && isEditingRef.current) {
+                const input = e.target;
+                input.value = rawValue;
+              }
+            },
             onInput: (e) => {
-              const value = e.target.value;
-              if (mask) {
-                const { processedValue, displayValue } = processInputWithMask(
-                  value,
-                  mask
-                );
-                setTimeout(() => {
-                  const input = e.target;
-                  if (input.value !== displayValue) {
-                    const cursorPos = input.selectionStart || 0;
-                    input.value = displayValue;
-                    input.setSelectionRange(cursorPos, cursorPos);
+              const input = e.target;
+              const value = input.value;
+              if (mask && typeof mask === "function" && !isEditingRef.current) {
+                isEditingRef.current = true;
+              }
+              if (mask && typeof mask === "function" && isEditingRef.current) {
+                const rawValue2 = value.replace(/\$/g, "").replace(/[^\d.,]/g, "");
+                input.value = rawValue2;
+                let processedValue2 = rawValue2;
+                if (numeric && rawValue2 !== "") {
+                  const cleanValue = rawValue2.replace(/[^\d.,]/g, "").replace(",", ".");
+                  const numValue = Number(cleanValue);
+                  if (!isNaN(numValue)) {
+                    processedValue2 = numValue;
+                  }
+                }
+                this.$emit("edit", processedValue2, row, key);
+                void Promise.resolve().then(() => {
+                  if (isEditingRef.current && input.value !== rawValue2) {
+                    input.value = rawValue2;
                   }
                 });
-                this.$emit("edit", processedValue, row, key);
-              } else {
-                this.$emit("edit", value, row, key);
+                return;
+              }
+              let processedValue = value;
+              if (numeric && value !== "") {
+                const cleanValue = value.replace(/[^\d.,]/g, "").replace(",", ".");
+                const numValue = Number(cleanValue);
+                if (!isNaN(numValue)) {
+                  processedValue = numValue;
+                }
+              }
+              this.$emit("edit", processedValue, row, key);
+            },
+            onKeyUp: (e) => {
+              if (mask && typeof mask === "function" && isEditingRef.current) {
+                const input = e.target;
+                input.value = rawValue;
+              }
+            },
+            onChange: (e) => {
+              if (mask && typeof mask === "function" && isEditingRef.current) {
+                const input = e.target;
+                setTimeout(() => {
+                  if (isEditingRef.current && input.value !== rawValue) {
+                    input.value = rawValue;
+                  }
+                }, 0);
+                setTimeout(() => {
+                  if (isEditingRef.current && input.value !== rawValue) {
+                    input.value = rawValue;
+                  }
+                }, 10);
+              }
+            },
+            onBlur: (e) => {
+              isEditingRef.current = false;
+              if (mask) {
+                const input = e.target;
+                let currentValue = input.value;
+                if (numeric && currentValue !== "") {
+                  currentValue = currentValue.replace(",", ".");
+                }
+                const maskedValue = processMaskedValue(currentValue, mask);
+                input.value = maskedValue;
               }
             }
           };
-          if (mask) {
-            inputProps["data-mask"] = typeof mask === "string" ? mask : JSON.stringify(mask);
-          }
           cell = vue.h("input", inputProps);
         } else {
           if (isSummary) {
@@ -86132,7 +86282,8 @@
           handleTableBodyScroll,
           doCheck,
           doUncheck,
-          renderCell
+          renderCell,
+          emptyPropsRef
           // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         } = vue.inject(dataTableInjectionKey);
         const scrollbarInstRef = vue.ref(null);
@@ -86407,6 +86558,7 @@
           handleRadioUpdateChecked,
           handleUpdateExpanded,
           renderCell,
+          emptyPropsRef,
           ...exposedMethods
         };
       },
@@ -86421,7 +86573,8 @@
           flexHeight,
           loadingKeySet,
           onResize,
-          setHeaderScrollLeft
+          setHeaderScrollLeft,
+          emptyPropsRef
         } = this;
         const scrollable = scrollX !== void 0 || maxHeight !== void 0 || flexHeight;
         const isBasicAutoLayout = !scrollable && mergedTableLayout === "auto";
@@ -86672,7 +86825,7 @@
                           column.type === "expand" && `${mergedClsPrefix}-data-table-td--expand`,
                           isLastCol && `${mergedClsPrefix}-data-table-td--last-col`,
                           isLastRow && `${mergedClsPrefix}-data-table-td--last-row`,
-                          "editable" in column && column.editable && `${mergedClsPrefix}-data-table-td--editable`
+                          "editable" in column && column.editable && !isSummary && `${mergedClsPrefix}-data-table-td--editable`
                         ]
                       },
                       column.fixed && /* @__PURE__ */ vue.h(
@@ -86789,7 +86942,7 @@
                   ) : null
                 );
               } else {
-                if (this.loading) {
+                if (this.loading || this.loadingSkeleton) {
                   return /* @__PURE__ */ vue.h(
                     "table",
                     {
@@ -86834,7 +86987,7 @@
             }
           }
         );
-        if (this.empty) {
+        if (this.empty && !this.loadingSkeleton) {
           const createEmptyNode = () => /* @__PURE__ */ vue.h(
             "div",
             {
@@ -86851,7 +87004,8 @@
                 {
                   size: "large",
                   theme: this.mergedTheme.peers.Empty,
-                  themeOverrides: this.mergedTheme.peerOverrides.Empty
+                  themeOverrides: this.mergedTheme.peerOverrides.Empty,
+                  ...emptyPropsRef
                 }
               )
             ])
@@ -88024,7 +88178,7 @@
     }
 
     const fixedColumnStyle = createFixedColumnStyle();
-    var style$S = c$1([cB("data-table", `
+    var style$T = c$1([cB("data-table", `
     width: 100%;
     font-size: var(--u-font-size);
     display: flex;
@@ -88273,19 +88427,22 @@
       `), cM("editable", `
         cursor: pointer;
         position: relative;
-        
+        padding: 0;
+
         .u-data-table-editable-input {
           appearance: none;
           text-align: right;
           border: none;
           background: none;
           outline: none;
-          padding: 0;
+          box-sizing: border-box;
+          padding: var(--u-td-padding);
           margin: 0;
           font: inherit;
           color: inherit;
           box-shadow: none;
-          width: '100%';
+          height: 100%;
+          width: 100%;
         }
       `), fixedColumnStyle]), cB("data-table-empty", `
       box-sizing: border-box;
@@ -88482,7 +88639,7 @@
         const themeRef = useTheme(
           "DataTable",
           "-data-table",
-          style$S,
+          style$T,
           dataTableLight,
           props,
           mergedClsPrefixRef
@@ -88572,7 +88729,7 @@
             columns.forEach((col) => {
               if ("children" in col) return;
               if (!("totalRow" in col) || !col.totalRow) return;
-              const { key, totalRow, render, mask } = col;
+              const { key, totalRow, render } = col;
               if (!totalRow) return;
               if (totalRow.type === "default") {
                 summaryRow[key] = { value: totalRow.value || "" };
@@ -88583,13 +88740,11 @@
                     return Number(renderedValue) || 0;
                   });
                   const sum = values.reduce((sum2, val) => sum2 + val, 0);
-                  const finalValue = mask ? processMaskedValue(String(sum), mask) : sum;
-                  summaryRow[key] = { value: finalValue };
+                  summaryRow[key] = { value: sum };
                 } else {
                   const values = pageData.map((row) => Number(row[key]) || 0);
                   const sum = values.reduce((sum2, val) => sum2 + val, 0);
-                  const finalValue = mask ? processMaskedValue(String(sum), mask) : sum;
-                  summaryRow[key] = { value: finalValue };
+                  summaryRow[key] = { value: sum };
                 }
               } else {
                 const config = {
@@ -88790,6 +88945,7 @@
           handleTableBodyScroll,
           setHeaderScrollLeft,
           renderCell: vue.toRef(props, "renderCell"),
+          emptyPropsRef: vue.toRef(props, "emptyProps"),
           handleEdit
         });
         const exposedMethods = {
@@ -88802,6 +88958,21 @@
           clearFilter,
           scrollTo: (arg0, arg1) => {
             mainTableInstRef.value?.scrollTo(arg0, arg1);
+          },
+          getData: () => {
+            const originalData = props.data || [];
+            const totalRowData = autoSummaryRef.value && rawPaginatedDataRef.value ? autoSummaryRef.value(rawPaginatedDataRef.value) : null;
+            return {
+              data: originalData,
+              totalRows: totalRowData
+            };
+          },
+          getTotalRowData: () => {
+            if (autoSummaryRef.value && rawPaginatedDataRef.value) {
+              const summaryResult = autoSummaryRef.value(rawPaginatedDataRef.value);
+              return summaryResult;
+            }
+            return null;
           }
         };
         const cssVarsRef = vue.computed(() => {
@@ -93729,7 +93900,7 @@
       }
     });
 
-    var style$R = c$1([cB("time-picker", `
+    var style$S = c$1([cB("time-picker", `
     z-index: auto;
     position: relative;
   `, [cB("time-picker-icon", `
@@ -93924,7 +94095,7 @@
         const themeRef = useTheme(
           "TimePicker",
           "-time-picker",
-          style$R,
+          style$S,
           timePickerLight,
           props,
           mergedClsPrefixRef
@@ -94098,7 +94269,7 @@
             "onUpdate:value": _onUpdateValue,
             onChange
           } = props;
-          const { nTriggerFormChange, nTriggerFormInput } = formItem;
+          const { triggerFormChange, triggerFormInput } = formItem;
           const formattedValue = createFormattedValue(value);
           if (onUpdateValue) {
             call(onUpdateValue, value, formattedValue);
@@ -94109,20 +94280,20 @@
           if (onChange) call(onChange, value, formattedValue);
           doUpdateFormattedValue(formattedValue, value);
           uncontrolledValueRef.value = value;
-          nTriggerFormChange();
-          nTriggerFormInput();
+          triggerFormChange();
+          triggerFormInput();
         }
         function doFocus(e) {
           const { onFocus } = props;
-          const { nTriggerFormFocus } = formItem;
+          const { triggerFormFocus } = formItem;
           if (onFocus) call(onFocus, e);
-          nTriggerFormFocus();
+          triggerFormFocus();
         }
         function doBlur(e) {
           const { onBlur } = props;
-          const { nTriggerFormBlur } = formItem;
+          const { triggerFormBlur } = formItem;
           if (onBlur) call(onBlur, e);
-          nTriggerFormBlur();
+          triggerFormBlur();
         }
         function doConfirm() {
           const { onConfirm } = props;
@@ -97029,7 +97200,7 @@
       }
     });
 
-    var style$Q = c$1([cB("date-picker", `
+    var style$R = c$1([cB("date-picker", `
     position: relative;
     z-index: auto;
   `, [cB("date-picker-icon", `
@@ -97543,7 +97714,7 @@
         const themeRef = useTheme(
           "DatePicker",
           "-date-picker",
-          style$Q,
+          style$R,
           datePickerLight,
           props,
           mergedClsPrefixRef
@@ -97709,7 +97880,7 @@
             onUpdateValue,
             onChange
           } = props;
-          const { nTriggerFormChange, nTriggerFormInput } = formItem;
+          const { triggerFormChange, triggerFormInput } = formItem;
           const formattedValue = getFormattedValue(value);
           if (options.doConfirm) {
             doConfirm(value, formattedValue);
@@ -97723,8 +97894,8 @@
           if (onChange) call(onChange, value, formattedValue);
           uncontrolledValueRef.value = value;
           doUpdateFormattedValue(formattedValue, value);
-          nTriggerFormChange();
-          nTriggerFormInput();
+          triggerFormChange();
+          triggerFormInput();
         }
         function doClear() {
           const { onClear } = props;
@@ -97736,15 +97907,15 @@
         }
         function doFocus(e) {
           const { onFocus } = props;
-          const { nTriggerFormFocus } = formItem;
+          const { triggerFormFocus } = formItem;
           if (onFocus) call(onFocus, e);
-          nTriggerFormFocus();
+          triggerFormFocus();
         }
         function doBlur(e) {
           const { onBlur } = props;
-          const { nTriggerFormBlur } = formItem;
+          const { triggerFormBlur } = formItem;
           if (onBlur) call(onBlur, e);
-          nTriggerFormBlur();
+          triggerFormBlur();
         }
         function doUpdateShow(show) {
           const { "onUpdate:show": _onUpdateShow, onUpdateShow } = props;
@@ -98452,7 +98623,7 @@
       return false;
     }
 
-    var style$P = c$1([cB("descriptions", {
+    var style$Q = c$1([cB("descriptions", {
       fontSize: "var(--u-font-size)"
     }, [cB("descriptions-separator", `
       display: inline-block;
@@ -98587,7 +98758,7 @@
         const themeRef = useTheme(
           "Descriptions",
           "-descriptions",
-          style$P,
+          style$Q,
           descriptionsLight,
           props,
           mergedClsPrefixRef
@@ -98874,7 +99045,7 @@
     };
     const dialogPropKeys = keysOf(dialogProps);
 
-    var style$O = c$1([cB("dialog", `
+    var style$P = c$1([cB("dialog", `
     word-break: break-word;
     position: relative;
     background: var(--u-color);
@@ -98988,7 +99159,7 @@
         const themeRef = useTheme(
           "Dialog",
           "-dialog",
-          style$O,
+          style$P,
           dialogLight,
           props,
           mergedClsPrefixRef
@@ -99456,7 +99627,7 @@
       }
     });
 
-    var style$N = c$1([cB("modal-container", `
+    var style$O = c$1([cB("modal-container", `
     position: fixed;
     left: 0;
     top: 0;
@@ -99588,7 +99759,7 @@
         const themeRef = useTheme(
           "Modal",
           "-modal",
-          style$N,
+          style$O,
           modalLight,
           props,
           mergedClsPrefixRef
@@ -100047,7 +100218,7 @@
       return dialogReactiveList;
     }
 
-    var style$M = cB("divider", `
+    var style$N = cB("divider", `
   position: relative;
   display: flex;
   width: 100%;
@@ -100118,7 +100289,7 @@
         const themeRef = useTheme(
           "Divider",
           "-divider",
-          style$M,
+          style$N,
           dividerLight,
           props,
           mergedClsPrefixRef
@@ -100553,7 +100724,7 @@
       })];
     }
 
-    var style$L = c$1([cB("drawer", `
+    var style$M = c$1([cB("drawer", `
     word-break: break-word;
     position: absolute;
     pointer-events: all;
@@ -100848,7 +101019,7 @@
         const themeRef = useTheme(
           "Drawer",
           "-drawer",
-          style$L,
+          style$M,
           drawerLight,
           props,
           mergedClsPrefixRef
@@ -101420,7 +101591,7 @@
       }
     });
 
-    var style$K = cB("dynamic-input", {
+    var style$L = cB("dynamic-input", {
       width: "100%"
     }, [cB("dynamic-input-item", `
     margin-bottom: 10px;
@@ -101534,7 +101705,7 @@
         const themeRef = useTheme(
           "DynamicInput",
           "-dynamic-input",
-          style$K,
+          style$L,
           dynamicInputLight,
           props,
           mergedClsPrefixRef
@@ -102031,7 +102202,7 @@
       }
     });
 
-    var style$J = cB("dynamic-tags", [cB("input", {
+    var style$K = cB("dynamic-tags", [cB("input", {
       minWidth: "var(--u-input-width)"
     })]);
 
@@ -102090,7 +102261,7 @@
         const themeRef = useTheme(
           "DynamicTags",
           "-dynamic-tags",
-          style$J,
+          style$K,
           dynamicTagsLight,
           props,
           mergedClsPrefixRef
@@ -102116,13 +102287,13 @@
             "onUpdate:value": _onUpdateValue,
             onUpdateValue
           } = props;
-          const { nTriggerFormInput, nTriggerFormChange } = formItem;
+          const { triggerFormInput, triggerFormChange } = formItem;
           if (onChange) call(onChange, value);
           if (onUpdateValue) call(onUpdateValue, value);
           if (_onUpdateValue) call(_onUpdateValue, value);
           uncontrolledValueRef.value = value;
-          nTriggerFormInput();
-          nTriggerFormChange();
+          triggerFormInput();
+          triggerFormChange();
         }
         function handleCloseClick(index) {
           const tags = mergedValueRef.value.slice(0);
@@ -102349,7 +102520,7 @@
       }
     });
 
-    var style$I = cB("form", [cM("inline", `
+    var style$J = cB("form", [cM("inline", `
     width: 100%;
     display: inline-flex;
     align-items: flex-start;
@@ -102407,7 +102578,7 @@
       props: formProps,
       setup(props) {
         const { mergedClsPrefixRef } = useConfig(props);
-        useTheme("Form", "-form", style$I, formLight, props, mergedClsPrefixRef);
+        useTheme("Form", "-form", style$J, formLight, props, mergedClsPrefixRef);
         const formItems = {};
         const maxChildLabelWidthRef = vue.ref(void 0);
         const deriveMaxChildLabelWidth = (currentWidth) => {
@@ -103772,7 +103943,7 @@
       })];
     }
 
-    var style$H = cB("form-item", `
+    var style$I = cB("form-item", `
   display: grid;
 `, [cB("form-item-label", `
     grid-area: label;
@@ -103965,7 +104136,7 @@
         const themeRef = useTheme(
           "Form",
           "-form-item",
-          style$H,
+          style$I,
           formLight,
           props,
           mergedClsPrefixRef
@@ -104410,7 +104581,7 @@
         right: percent
       })];
     });
-    var style$G = c$1([cB("row", {
+    var style$H = c$1([cB("row", {
       width: "100%",
       display: "flex",
       flexWrap: "wrap"
@@ -104442,7 +104613,7 @@
       props: rowProps,
       setup(props) {
         const { mergedClsPrefixRef, mergedRtlRef } = useConfig(props);
-        useStyle("-legacy-grid", style$G, mergedClsPrefixRef);
+        useStyle("-legacy-grid", style$H, mergedClsPrefixRef);
         const rtlEnabledRef = useRtl("Row", mergedRtlRef, mergedClsPrefixRef);
         const verticalGutterRef = useMemo(() => {
           const { gutter } = props;
@@ -104714,7 +104885,7 @@
       }
     });
 
-    var style$F = cB("gradient-text", `
+    var style$G = cB("gradient-text", `
   display: inline-block;
   font-weight: var(--u-font-weight);
   -webkit-background-clip: text;
@@ -104770,7 +104941,7 @@
         const themeRef = useTheme(
           "GradientText",
           "-gradient-text",
-          style$F,
+          style$G,
           gradientTextLight,
           props,
           mergedClsPrefixRef
@@ -104856,7 +105027,7 @@
       self: self$5
     };
 
-    var style$E = cB("icon-wrapper", `
+    var style$F = cB("icon-wrapper", `
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -104908,7 +105079,7 @@
         const themeRef = useTheme(
           "IconWrapper",
           "-icon-wrapper",
-          style$E,
+          style$F,
           iconWrapperLight,
           props,
           mergedClsPrefixRef
@@ -105209,7 +105380,7 @@
       )
     );
 
-    var style$D = c$1([c$1("body >", [cB("image-container", "position: fixed;")]), cB("image-preview-container", `
+    var style$E = c$1([c$1("body >", [cB("image-container", "position: fixed;")]), cB("image-preview-container", `
     position: fixed;
     left: 0;
     right: 0;
@@ -105285,7 +105456,7 @@
         const themeRef = useTheme(
           "Image",
           "-image",
-          style$D,
+          style$E,
           imageLight,
           props,
           vue.toRef(props, "clsPrefix")
@@ -106112,7 +106283,7 @@
       }
     }
 
-    var style$C = c$1([cB("input-number-suffix", `
+    var style$D = c$1([cB("input-number-suffix", `
     display: inline-block;
     margin-right: 10px;
   `), cB("input-number-prefix", `
@@ -106199,7 +106370,7 @@
         const themeRef = useTheme(
           "InputNumber",
           "-input-number",
-          style$C,
+          style$D,
           inputNumberLight,
           props,
           mergedClsPrefixRef
@@ -106263,13 +106434,13 @@
             onUpdateValue,
             onChange
           } = props;
-          const { nTriggerFormInput, nTriggerFormChange } = formItem;
+          const { triggerFormInput, triggerFormChange } = formItem;
           if (onChange) call(onChange, value);
           if (onUpdateValue) call(onUpdateValue, value);
           if (_onUpdateValue) call(_onUpdateValue, value);
           uncontrolledValueRef.value = value;
-          nTriggerFormInput();
-          nTriggerFormChange();
+          triggerFormInput();
+          triggerFormChange();
         };
         const deriveValueFromDisplayedValue = ({
           offset,
@@ -106373,9 +106544,9 @@
         });
         function doFocus(e) {
           const { onFocus } = props;
-          const { nTriggerFormFocus } = formItem;
+          const { triggerFormFocus } = formItem;
           if (onFocus) call(onFocus, e);
-          nTriggerFormFocus();
+          triggerFormFocus();
         }
         function doBlur(e) {
           if (e.target === inputInstRef.value?.wrapperElRef) {
@@ -106399,9 +106570,9 @@
             deriveDisplayedValueFromValue();
           }
           const { onBlur } = props;
-          const { nTriggerFormBlur } = formItem;
+          const { triggerFormBlur } = formItem;
           if (onBlur) call(onBlur, e);
-          nTriggerFormBlur();
+          triggerFormBlur();
           void vue.nextTick(() => {
             deriveDisplayedValueFromValue();
           });
@@ -106754,6 +106925,344 @@
       }
     });
 
+    var style$C = c$1([cB("input-otp", `
+    display: flex;
+    align-items: center;
+    gap: var(--u-gap);
+  `, [cM("block", "", [cB("input", "", [cNotM("autosize", `
+          text-align: center;
+          min-width: 0;
+        `), cM("autosize", `
+          text-align: center;
+          min-width: 0;
+        `)])]), cNotM("block", "", [cB("input", "", [cNotM("autosize", `
+          width: var(--u-input-width);
+          text-align: center;
+        `), cM("autosize", `
+          width: var(--u-input-width);
+          text-align: center;
+        `)])])])]);
+
+    const inputOtpProps = {
+      ...useTheme.props,
+      defaultValue: { type: Array, default: [] },
+      value: Array,
+      length: {
+        type: Number,
+        default: 6
+      },
+      block: Boolean,
+      size: String,
+      disabled: Boolean,
+      mask: Boolean,
+      readonly: Boolean,
+      status: String,
+      gap: [String, Number],
+      placeholder: { type: String, default: "" },
+      allowInput: Function,
+      onBlur: [Function, Array],
+      onFocus: [Function, Array],
+      "onUpdate:value": [Function, Array],
+      onUpdateValue: [Function, Array],
+      onFinish: [Function, Array]
+    };
+    var InputOtp = vue.defineComponent({
+      name: "InputOtp",
+      props: inputOtpProps,
+      slots: Object,
+      setup(props) {
+        const { mergedClsPrefixRef, mergedRtlRef, inlineThemeDisabled } = useConfig(props);
+        const themeRef = useTheme(
+          "InputOtp",
+          "-input-otp",
+          style$C,
+          inputOtpLight,
+          props,
+          mergedClsPrefixRef
+        );
+        const rtlEnabledRef = useRtl("InputOtp", mergedRtlRef, mergedClsPrefixRef);
+        const formItem = useFormItem(props);
+        const { mergedSizeRef, mergedDisabledRef, mergedStatusRef } = formItem;
+        const cssVarsRef = vue.computed(() => {
+          const { value: size } = mergedSizeRef;
+          const { gap: propGap } = props;
+          const {
+            self: {
+              [createKey("inputWidth", size)]: inputWidth,
+              [createKey("gap", size)]: gap
+            }
+          } = themeRef.value;
+          return {
+            "--u-gap": propGap === void 0 ? gap : typeof propGap === "number" ? pxfy(propGap) : propGap,
+            "--u-input-width": inputWidth
+          };
+        });
+        const themeClassHandle = inlineThemeDisabled ? useThemeClass(
+          "input-otp",
+          vue.computed(() => {
+            const { value: size } = mergedSizeRef;
+            return size[0];
+          }),
+          cssVarsRef,
+          props
+        ) : void 0;
+        const uncontrolledValueRef = vue.ref(props.defaultValue);
+        const controlledValueRef = vue.toRef(props, "value");
+        const mergedValueRef = useMergedState(
+          controlledValueRef,
+          uncontrolledValueRef
+        );
+        const inputRefList = vue.ref([]);
+        const inputTypeRef = vue.computed(
+          () => props.mask ? "password" : "text"
+        );
+        const handleFocus = (event, index) => {
+          if (inputRefList?.value.some(
+            (inputInst) => inputInst.inputElRef === event.relatedTarget
+          )) {
+            return;
+          }
+          const { onFocus } = props;
+          if (onFocus) {
+            call(onFocus, event, index);
+          }
+          const { triggerFormFocus } = formItem;
+          triggerFormFocus();
+        };
+        const handleBlur = (event, index) => {
+          if (inputRefList?.value.some(
+            (inputInst) => inputInst.inputElRef === event.relatedTarget
+          )) {
+            return;
+          }
+          const { onBlur } = props;
+          const { triggerFormBlur } = formItem;
+          if (onBlur) {
+            call(onBlur, event, index);
+          }
+          triggerFormBlur();
+        };
+        const focusOnChar = (charIndex) => {
+          if (charIndex >= props.length) {
+            return;
+          }
+          if (charIndex < 0) {
+            return;
+          }
+          inputRefList?.value[charIndex].focus();
+          inputRefList?.value[charIndex].select();
+        };
+        const focusOnNextChar = (currentIndex) => {
+          if (currentIndex >= props.length - 1) {
+            return;
+          }
+          focusOnChar(currentIndex + 1);
+        };
+        const focusOnPrevChar = (currentIndex) => {
+          if (currentIndex <= 0) {
+            return;
+          }
+          focusOnChar(currentIndex - 1);
+        };
+        const justifyValue = (value) => {
+          const justifiedValue = value ? Array.from(value) : [];
+          const length = props.length;
+          while (justifiedValue.length > length) {
+            justifiedValue.pop();
+          }
+          while (justifiedValue.length < length) {
+            justifiedValue.push("");
+          }
+          return justifiedValue;
+        };
+        function doUpdateValue(values, meta) {
+          const { triggerFormInput, triggerFormChange } = formItem;
+          if (isArrayShallowEqual(values, mergedValueRef.value)) {
+            triggerFormInput();
+            return;
+          }
+          const {
+            "onUpdate:value": _onUpdateValue,
+            onUpdateValue,
+            onFinish
+          } = props;
+          if (_onUpdateValue) {
+            call(_onUpdateValue, values, meta);
+          }
+          if (onUpdateValue) {
+            call(onUpdateValue, values, meta);
+          }
+          if (onFinish && values.every(Boolean)) {
+            call(onFinish, values);
+          }
+          uncontrolledValueRef.value = values;
+          triggerFormInput();
+          triggerFormChange();
+        }
+        const handlePaste = (event, index) => {
+          if (props.readonly || mergedDisabledRef.value) {
+            return;
+          }
+          event.preventDefault();
+          const { clipboardData } = event;
+          const text = clipboardData?.getData("text");
+          if (!text) {
+            return;
+          }
+          const currentValue = justifyValue(mergedValueRef.value);
+          let startIndex = index;
+          const allowInput = props.allowInput;
+          let pasteApplied = false;
+          let appendedText = "";
+          for (let i = 0; i < text.length; ++i) {
+            if (allowInput && !allowInput(text[i], startIndex, currentValue)) {
+              continue;
+            }
+            pasteApplied = true;
+            currentValue[startIndex] = text[i];
+            appendedText += text[i];
+            startIndex++;
+            if (startIndex >= currentValue.length) {
+              break;
+            }
+          }
+          if (pasteApplied) {
+            focusOnChar(startIndex);
+            doUpdateValue(currentValue, {
+              diff: appendedText,
+              index: startIndex,
+              source: "paste"
+            });
+          }
+        };
+        const handleKeydown = (event, index) => {
+          if (mergedDisabledRef.value) {
+            return;
+          }
+          const keyCode = event.code || event.key;
+          const currentValue = justifyValue(mergedValueRef.value);
+          if (keyCode === "Backspace" && !props.readonly) {
+            event.preventDefault();
+            currentValue[Math.max(index, 0)] = "";
+            doUpdateValue(currentValue, { diff: "", index, source: "delete" });
+            focusOnPrevChar(index);
+          } else if (keyCode === "ArrowLeft") {
+            event.preventDefault();
+            focusOnPrevChar(index);
+          } else if (keyCode === "ArrowRight") {
+            event.preventDefault();
+            focusOnNextChar(index);
+          }
+        };
+        const handleInput = (value, index) => {
+          const currentValue = justifyValue(mergedValueRef.value);
+          const currentValueAtIndex = currentValue[index];
+          const diff = value.replace(currentValueAtIndex, "");
+          const char = diff[diff.length - 1] || value[value.length - 1] || "";
+          const allowInput = props.allowInput;
+          if (allowInput && !allowInput(char, index, currentValue)) {
+            return;
+          }
+          currentValue[index] = char;
+          doUpdateValue(currentValue, { diff: char, index, source: "input" });
+          focusOnNextChar(index);
+        };
+        const getTemplateEvents = (index) => {
+          return {
+            onInput: (value) => {
+              handleInput(value, index);
+            },
+            onPaste: (event) => {
+              handlePaste(event, index);
+            },
+            onKeydown: (event) => {
+              handleKeydown(event, index);
+            },
+            onFocus: (event) => {
+              handleFocus(event, index);
+            },
+            onBlur: (event) => {
+              handleBlur(event, index);
+            }
+          };
+        };
+        const exposedMethods = {
+          focusOnChar
+        };
+        return {
+          mergedTheme: themeRef,
+          perItemValueArray: vue.computed(() => justifyValue(mergedValueRef.value)),
+          mergedClsPrefix: mergedClsPrefixRef,
+          inputRefList,
+          inputType: inputTypeRef,
+          rtlEnabled: rtlEnabledRef,
+          mergedStatus: mergedStatusRef,
+          mergedDisabled: mergedDisabledRef,
+          cssVars: inlineThemeDisabled ? void 0 : cssVarsRef,
+          themeClass: themeClassHandle?.themeClass,
+          getTemplateEvents,
+          onRender: themeClassHandle?.onRender,
+          ...exposedMethods
+        };
+      },
+      render() {
+        const {
+          mergedTheme,
+          mergedClsPrefix,
+          perItemValueArray,
+          size,
+          placeholder,
+          mergedDisabled,
+          mergedStatus,
+          readonly,
+          inputType,
+          $slots,
+          getTemplateEvents,
+          themeClass,
+          onRender
+        } = this;
+        onRender?.();
+        return /* @__PURE__ */ vue.h(
+          "div",
+          {
+            style: this.cssVars,
+            class: [
+              `${mergedClsPrefix}-input-otp`,
+              themeClass,
+              this.rtlEnabled && `${mergedClsPrefix}-input-otp--rtl`,
+              this.block && `${mergedClsPrefix}-input-otp--block`
+            ]
+          },
+          repeat$1(this.length, void 0).map(
+            (_, index) => resolveSlotWithProps(
+              $slots.default,
+              {
+                index,
+                value: perItemValueArray[index],
+                type: inputType,
+                size,
+                placeholder,
+                disabled: mergedDisabled,
+                readonly,
+                status: mergedStatus,
+                builtinThemeOverrides: {
+                  paddingTiny: "0",
+                  paddingSmall: "0",
+                  paddingMedium: "0",
+                  paddingLarge: "0"
+                },
+                theme: mergedTheme.peers.Input,
+                themeOverrides: mergedTheme.peerOverrides.Input,
+                ref: (el) => this.inputRefList[index] = el,
+                ...getTemplateEvents(index)
+              },
+              ({ index: index2, ...restProps }) => [/* @__PURE__ */ vue.h(UInput, { ...restProps, key: index2 })]
+            )
+          )
+        );
+      }
+    });
+
     const layoutSiderInjectionKey = createInjectionKey("u-layout-sider");
     const positionProp = {
       type: String,
@@ -108537,13 +109046,13 @@
             "onUpdate:value": _onUpdateValue,
             onChange
           } = props;
-          const { nTriggerFormInput, nTriggerFormChange } = formItem;
+          const { triggerFormInput, triggerFormChange } = formItem;
           if (onUpdateValue) call(onUpdateValue, value);
           if (_onUpdateValue) call(_onUpdateValue, value);
           if (onChange) call(onChange, value);
           uncontrolledValueRef.value = value;
-          nTriggerFormInput();
-          nTriggerFormChange();
+          triggerFormInput();
+          triggerFormChange();
         }
         function handleSrcHeaderCheck(value) {
           const {
@@ -109278,7 +109787,7 @@
         const renderAvatar = () => {
           if (!Object.values(this.avatar).length) return null;
           const Avatar = /* @__PURE__ */ vue.h(UAvatar, { size, ...this.avatar, ...{ icon: void 0 } }, renderIcon(this.avatar.icon));
-          return this.avatar.hasBadge ? /* @__PURE__ */ vue.h(UBadge, { ...this.badge }, Avatar) : Avatar;
+          return this.avatar.hasBadge ? /* @__PURE__ */ vue.h(UBadge, { ...this.badge }, { default: () => Avatar }) : Avatar;
         };
         const prefixSkeletonSizes = {
           large: 54,
@@ -109361,13 +109870,15 @@
               skeleton: void 0,
               class: `${mergedClsPrefix}-list-item__${classSuffix}`
             },
-            skeletonOn || props?.loading ? /* @__PURE__ */ vue.h(
-              UBaseSkeleton,
-              {
-                ...props.skeletonPro,
-                style: { borderRadius: "6px" }
-              }
-            ) : typeof content === "string" ? props.text : content()
+            {
+              default: () => skeletonOn || props?.loading ? /* @__PURE__ */ vue.h(
+                UBaseSkeleton,
+                {
+                  ...props.skeletonPro,
+                  style: { borderRadius: "6px" }
+                }
+              ) : typeof content === "string" ? props.text : content()
+            }
           ) : null;
         }
         const headerNode = renderTextNode(header, headerProps, "title");
@@ -111570,15 +112081,15 @@
         }
         function doUpdateValue(value) {
           const { onUpdateValue, "onUpdate:value": _onUpdateValue } = props;
-          const { nTriggerFormChange, nTriggerFormInput } = formItem;
+          const { triggerFormChange, triggerFormInput } = formItem;
           if (_onUpdateValue) {
             call(_onUpdateValue, value);
           }
           if (onUpdateValue) {
             call(onUpdateValue, value);
           }
-          nTriggerFormInput();
-          nTriggerFormChange();
+          triggerFormInput();
+          triggerFormChange();
           uncontrolledValueRef.value = value;
         }
         function getInputEl() {
@@ -111673,8 +112184,8 @@
         function handleInputFocus(e) {
           const { onFocus } = props;
           onFocus?.(e);
-          const { nTriggerFormFocus } = formItem;
-          nTriggerFormFocus();
+          const { triggerFormFocus } = formItem;
+          triggerFormFocus();
           syncAfterCursorMove();
         }
         function focus() {
@@ -111686,8 +112197,8 @@
         function handleInputBlur(e) {
           const { onBlur } = props;
           onBlur?.(e);
-          const { nTriggerFormBlur } = formItem;
-          nTriggerFormBlur();
+          const { triggerFormBlur } = formItem;
+          triggerFormBlur();
           doUpdateShowMenu(false);
         }
         function handleSelect(tmNode) {
@@ -113888,7 +114399,7 @@
         const mergedValue = useMergedState(controlledValueRef, uncontrolledValueRef);
         function doUpdateValue(value) {
           const { "onUpdate:value": _onUpdateValue, onUpdateValue } = props;
-          const { nTriggerFormChange, nTriggerFormInput } = formItem;
+          const { triggerFormChange, triggerFormInput } = formItem;
           if (_onUpdateValue) {
             call(_onUpdateValue, value);
           }
@@ -113896,8 +114407,8 @@
             call(onUpdateValue, value);
           }
           uncontrolledValueRef.value = value;
-          nTriggerFormChange();
-          nTriggerFormInput();
+          triggerFormChange();
+          triggerFormInput();
         }
         function getDerivedValue(index, e) {
           if (props.allowHalf) {
@@ -114639,12 +115150,12 @@
         }
         function doUpdateValue(value) {
           const { "onUpdate:value": _onUpdateValue, onUpdateValue } = props;
-          const { nTriggerFormInput, nTriggerFormChange } = formItem;
+          const { triggerFormInput, triggerFormChange } = formItem;
           if (onUpdateValue) call(onUpdateValue, value);
           if (_onUpdateValue) call(_onUpdateValue, value);
           uncontrolledValueRef.value = value;
-          nTriggerFormInput();
-          nTriggerFormChange();
+          triggerFormInput();
+          triggerFormChange();
         }
         function dispatchValueUpdate(value) {
           const { range } = props;
@@ -116437,21 +116948,21 @@
             onChange,
             onUpdateValue
           } = props;
-          const { nTriggerFormInput, nTriggerFormChange } = formItem;
+          const { triggerFormInput, triggerFormChange } = formItem;
           if (_onUpdateValue) call(_onUpdateValue, value);
           if (onUpdateValue) call(onUpdateValue, value);
           if (onChange) call(onChange, value);
           uncontrolledValueRef.value = value;
-          nTriggerFormInput();
-          nTriggerFormChange();
+          triggerFormInput();
+          triggerFormChange();
         }
         function doFocus() {
-          const { nTriggerFormFocus } = formItem;
-          nTriggerFormFocus();
+          const { triggerFormFocus } = formItem;
+          triggerFormFocus();
         }
         function doBlur() {
-          const { nTriggerFormBlur } = formItem;
-          nTriggerFormBlur();
+          const { triggerFormBlur } = formItem;
+          triggerFormBlur();
         }
         function handleClick() {
           if (props.loading || mergedDisabledRef.value) return;
@@ -119470,13 +119981,13 @@
             "onUpdate:value": _onUpdateValue,
             onChange
           } = props;
-          const { nTriggerFormInput, nTriggerFormChange } = formItem;
+          const { triggerFormInput, triggerFormChange } = formItem;
           if (onUpdateValue) call(onUpdateValue, value);
           if (_onUpdateValue) call(_onUpdateValue, value);
           if (onChange) call(onChange, value);
           uncontrolledValueRef.value = value;
-          nTriggerFormInput();
-          nTriggerFormChange();
+          triggerFormInput();
+          triggerFormChange();
         }
         function handleSourceCheckAll() {
           doUpdateValue([...valueSetForCheckAllRef.value]);
@@ -122265,10 +122776,10 @@
           mergedSizeRef,
           mergedDisabledRef,
           mergedStatusRef,
-          nTriggerFormBlur,
-          nTriggerFormChange,
-          nTriggerFormFocus,
-          nTriggerFormInput
+          triggerFormBlur,
+          triggerFormChange,
+          triggerFormFocus,
+          triggerFormInput
         } = useFormItem(props);
         const uncontrolledValueRef = vue.ref(props.defaultValue);
         const controlledValueRef = vue.toRef(props, "value");
@@ -122410,8 +122921,8 @@
             call(_onUpdateValue, value, option, meta);
           }
           uncontrolledValueRef.value = value;
-          nTriggerFormInput();
-          nTriggerFormChange();
+          triggerFormInput();
+          triggerFormChange();
         }
         function doUpdateIndeterminateKeys(value, option) {
           const {
@@ -122459,13 +122970,13 @@
         function doFocus(e) {
           const { onFocus } = props;
           if (onFocus) onFocus(e);
-          nTriggerFormFocus();
+          triggerFormFocus();
         }
         function doBlur(e) {
           closeMenu();
           const { onBlur } = props;
           if (onBlur) onBlur(e);
-          nTriggerFormBlur();
+          triggerFormBlur();
         }
         function closeMenu() {
           doUpdateShow(false);
@@ -126279,6 +126790,7 @@
         UInputGroup: UInputGroup,
         UInputGroupLabel: InputGroupLabel,
         UInputNumber: InputNumber,
+        UInputOtp: InputOtp,
         ULayout: Layout,
         ULayoutContent: LayoutContent,
         ULayoutFooter: LayoutFooter,
@@ -126420,6 +126932,7 @@
         inputGroupLabelProps: inputGroupLabelProps,
         inputGroupProps: inputGroupProps,
         inputNumberProps: inputNumberProps,
+        inputOtpProps: inputOtpProps,
         inputProps: inputProps,
         layoutContentProps: layoutProps,
         layoutFooterProps: layoutFooterProps,
@@ -126487,7 +127000,7 @@
         watermarkProps: watermarkProps
     });
 
-    var version = "1.5.2";
+    var version = "1.5.4";
 
     function create({
       componentPrefix = "U",
@@ -126606,6 +127119,7 @@
       IconWrapper: iconDark,
       Image: imageDark,
       Input: inputDark,
+      InputOtp: inputOtpDark,
       InputNumber: inputNumberDark,
       LegacyTransfer: transferDark,
       Layout: layoutDark,
@@ -126698,6 +127212,7 @@
       IconWrapper: iconWrapperLight,
       Image: imageLight,
       Input: inputLight,
+      InputOtp: inputOtpLight,
       InputNumber: inputNumberLight,
       Layout: layoutLight,
       LegacyTransfer: transferLight,
@@ -127365,6 +127880,7 @@
     exports.UInputGroup = UInputGroup;
     exports.UInputGroupLabel = InputGroupLabel;
     exports.UInputNumber = InputNumber;
+    exports.UInputOtp = InputOtp;
     exports.ULayout = Layout;
     exports.ULayoutContent = LayoutContent;
     exports.ULayoutFooter = LayoutFooter;
@@ -127585,6 +128101,8 @@
     exports.inputGroupProps = inputGroupProps;
     exports.inputNumberDark = inputNumberDark;
     exports.inputNumberProps = inputNumberProps;
+    exports.inputOtpDark = inputOtpDark;
+    exports.inputOtpProps = inputOtpProps;
     exports.inputProps = inputProps;
     exports.install = install;
     exports.internalSelectMenuDark = internalSelectMenuDark;
@@ -127710,6 +128228,7 @@
     exports.unstableDrawerRtl = drawerRtl;
     exports.unstableDynamicInputRtl = dynamicInputRtl;
     exports.unstableInputNumberRtl = inputNumberRtl;
+    exports.unstableInputOtpRtl = inputOtpRtl;
     exports.unstableInputRtl = inputRtl;
     exports.unstableListRtl = listRtl;
     exports.unstableMessageRtl = messageRtl;