@uzum-tech/ui 2.0.9 → 2.1.1

package/dist/index.js

@@ -3412,7 +3412,7 @@
   }
 
   /* eslint-disable @typescript-eslint/no-non-null-assertion */
-  const style$1X = c([c('.v-binder-follower-container', {
+  const style$1Y = c([c('.v-binder-follower-container', {
     position: 'absolute',
     left: '0',
     right: '0',
@@ -3491,7 +3491,7 @@
         }
       });
       const ssrAdapter = useSsrAdapter();
-      style$1X.mount({
+      style$1Y.mount({
         id: 'vueuc/binder',
         head: true,
         anchorMetaName: cssrAnchorMetaName$1,
@@ -4951,7 +4951,7 @@
 
   /* eslint-disable @typescript-eslint/strict-boolean-expressions */
   const hiddenAttr = 'v-hidden';
-  const style$1W = c('[v-hidden]', {
+  const style$1X = c('[v-hidden]', {
     display: 'none!important'
   });
   var VOverflow = vue.defineComponent({
@@ -5064,7 +5064,7 @@
         }
       }
       const ssrAdapter = useSsrAdapter();
-      style$1W.mount({
+      style$1X.mount({
         id: 'vueuc/overflow',
         head: true,
         anchorMetaName: cssrAnchorMetaName$1,
@@ -12996,7 +12996,7 @@
     builtinThemeOverrides: Object
   };
 
-  var style$1V = cB("base-icon", `
+  var style$1W = cB("base-icon", `
   height: 1em;
   width: 1em;
   line-height: 1em;
@@ -13032,7 +13032,7 @@
       onMouseup: Function
     },
     setup(props) {
-      useStyle("-base-icon", style$1V, vue.toRef(props, "clsPrefix"));
+      useStyle("-base-icon", style$1W, vue.toRef(props, "clsPrefix"));
     },
     render() {
       return /* @__PURE__ */ vue.h(
@@ -13052,7 +13052,7 @@
     }
   });
 
-  var style$1U = cB("icon", `
+  var style$1V = cB("icon", `
   height: 1em;
   width: 1em;
   line-height: 1em;
@@ -13238,7 +13238,7 @@
     boxShadow2: "0px 20px 80px 0px rgba(0, 0, 0, 0.07)"
   };
 
-  function self$1B(vars) {
+  function self$1C(vars) {
     const {
       elementsPrimary
     } = vars;
@@ -13254,13 +13254,13 @@
   const iconLight = {
     name: "Icon",
     common: derived,
-    self: self$1B
+    self: self$1C
   };
 
   const iconDark$1 = {
     name: "Icon",
     common: derived$1,
-    self: self$1B
+    self: self$1C
   };
 
   const iconProps = {
@@ -13283,7 +13283,7 @@
         mergedIconPacksRef,
         inlineThemeDisabled
       } = useConfig(props);
-      const themeRef = useTheme("Icon", "-icon", style$1U, iconLight, props, mergedClsPrefixRef);
+      const themeRef = useTheme("Icon", "-icon", style$1V, iconLight, props, mergedClsPrefixRef);
       const cssVarsRef = vue.computed(() => {
         const {
           depth
@@ -13398,7 +13398,7 @@
     avatarSize: "16px"
   };
 
-  function self$1A(vars) {
+  function self$1B(vars) {
     const {
       heightHuge,
       fontBodyLarge,
@@ -13428,16 +13428,16 @@
   const accountOptionLight = {
     name: "AccountOption",
     common: derived,
-    self: self$1A
+    self: self$1B
   };
 
   const accountOptionDark = {
     name: "AccountOption",
     common: derived$1,
-    self: self$1A
+    self: self$1B
   };
 
-  var style$1T = cB("base-account-option", `
+  var style$1U = cB("base-account-option", `
   display: flex;
   align-items: center;
   position: relative;
@@ -13492,7 +13492,7 @@
       const themeRef = useTheme(
         "AccountOption",
         "-base-account-option",
-        style$1T,
+        style$1U,
         accountOptionLight,
         props,
         mergedClsPrefixRef
@@ -14947,7 +14947,7 @@
     })];
   }
 
-  var style$1S = cB("base-clear", `
+  var style$1T = cB("base-clear", `
   flex-shrink: 0;
   height: 1em;
   width: 1em;
@@ -14988,7 +14988,7 @@
       onClear: Function
     },
     setup(props) {
-      useStyle("-base-clear", style$1S, vue.toRef(props, "clsPrefix"));
+      useStyle("-base-clear", style$1T, vue.toRef(props, "clsPrefix"));
       return {
         handleMouseDown(e) {
           e.preventDefault();
@@ -15019,7 +15019,7 @@
     }
   });
 
-  var style$1R = cB("base-close", `
+  var style$1S = cB("base-close", `
   display: flex;
   align-items: center;
   justify-content: center;
@@ -15091,7 +15091,7 @@
       absolute: Boolean
     },
     setup(props) {
-      useStyle("-base-close", style$1R, vue.toRef(props, "clsPrefix"));
+      useStyle("-base-close", style$1S, vue.toRef(props, "clsPrefix"));
       return () => {
         const { clsPrefix, disabled, absolute, round, isButtonTag } = props;
         const Tag = isButtonTag ? "button" : "div";
@@ -15250,7 +15250,7 @@
     }
   });
 
-  var style$1Q = c$1([c$1("@keyframes loading-container-rotate", `
+  var style$1R = c$1([c$1("@keyframes loading-container-rotate", `
     to {
       -webkit-transform: rotate(360deg);
       transform: rotate(360deg);
@@ -15420,7 +15420,7 @@
       ...exposedLoadingProps
     },
     setup(props) {
-      useStyle("-base-loading", style$1Q, vue.toRef(props, "clsPrefix"));
+      useStyle("-base-loading", style$1R, vue.toRef(props, "clsPrefix"));
     },
     render() {
       const { clsPrefix, radius, strokeWidth, stroke, scale } = this;
@@ -15550,7 +15550,7 @@
     })];
   }
 
-  var style$1P = cB("base-menu-mask", `
+  var style$1Q = cB("base-menu-mask", `
   position: absolute;
   left: 0;
   right: 0;
@@ -15573,7 +15573,7 @@
       }
     },
     setup(props) {
-      useStyle("-base-menu-mask", style$1P, vue.toRef(props, "clsPrefix"));
+      useStyle("-base-menu-mask", style$1Q, vue.toRef(props, "clsPrefix"));
       const messageRef = vue.ref(null);
       let timerId = null;
       const uncontrolledShowRef = vue.ref(false);
@@ -15761,7 +15761,7 @@
     railColor: "transparent"
   };
 
-  function self$1z(vars) {
+  function self$1A(vars) {
     const {
       scrollbarColor,
       scrollbarColorHover,
@@ -15781,13 +15781,13 @@
   const safeTopScrollbarLight = {
     name: "SafeTopScrollbar",
     common: derived,
-    self: self$1z
+    self: self$1A
   };
 
   const safeTopScrollbarDark = {
     name: "SafeTopScrollbar",
     common: derived$1,
-    self: self$1z
+    self: self$1A
   };
 
   cB("scrollbar", [cM("rtl", `
@@ -15800,7 +15800,7 @@
           right: unset;
         `)])])])]);
 
-  var style$1O = cB("safe-top-scrollbar", `
+  var style$1P = cB("safe-top-scrollbar", `
   overflow: hidden;
   position: relative;
   z-index: auto;
@@ -15949,7 +15949,7 @@
       const themeRef = useTheme(
         "SafeTopScrollbar",
         "-safe-top-scrollbar",
-        style$1O,
+        style$1P,
         safeTopScrollbarLight,
         props,
         mergedClsPrefixRef
@@ -16683,7 +16683,7 @@
     railColor: "transparent"
   };
 
-  function self$1y(vars) {
+  function self$1z(vars) {
     const {
       scrollbarColor,
       scrollbarColorHover,
@@ -16703,13 +16703,13 @@
   const scrollbarLight = {
     name: "Scrollbar",
     common: derived,
-    self: self$1y
+    self: self$1z
   };
 
   const scrollbarDark = {
     name: "Scrollbar",
     common: derived$1,
-    self: self$1y
+    self: self$1z
   };
 
   var rtlStyle$t = cB("scrollbar", [cM("rtl", `
@@ -16727,7 +16727,7 @@
     style: rtlStyle$t
   };
 
-  var style$1N = cB("scrollbar", `
+  var style$1O = cB("scrollbar", `
   overflow: hidden;
   position: relative;
   z-index: auto;
@@ -16870,7 +16870,7 @@
       const themeRef = useTheme(
         "Scrollbar",
         "-scrollbar",
-        style$1N,
+        style$1O,
         scrollbarLight,
         props,
         mergedClsPrefixRef
@@ -18242,7 +18242,7 @@
     return treemate;
   }
 
-  function self$1x(vars) {
+  function self$1y(vars) {
     const {
       fontBodyMedium,
       fontTitleLarge,
@@ -18274,16 +18274,16 @@
   const emptyLight = {
     name: "Empty",
     common: derived,
-    self: self$1x
+    self: self$1y
   };
 
   const emptyDark$1 = {
     name: "Empty",
     common: derived$1,
-    self: self$1x
+    self: self$1y
   };
 
-  var style$1M = cB("empty", `
+  var style$1N = cB("empty", `
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -18361,7 +18361,7 @@
       const themeRef = useTheme(
         "Empty",
         "-empty",
-        style$1M,
+        style$1N,
         emptyLight,
         props,
         mergedClsPrefixRef
@@ -18449,7 +18449,7 @@
     }
   });
 
-  function self$1w(vars) {
+  function self$1x(vars) {
     const {
       borderRadius,
       iconMedium,
@@ -18506,7 +18506,7 @@
       Scrollbar: scrollbarLight,
       Empty: emptyLight
     },
-    self: self$1w
+    self: self$1x
   });
 
   const internalSelectMenuDark = {
@@ -18516,7 +18516,7 @@
       Scrollbar: scrollbarDark,
       Empty: emptyDark$1
     },
-    self: self$1w
+    self: self$1x
   };
 
   cB("base-select-menu", [cM("rtl", `
@@ -18757,7 +18757,7 @@
     })];
   }
 
-  var style$1L = cB("base-select-menu", `
+  var style$1M = cB("base-select-menu", `
   line-height: 1.5;
   outline: none;
   z-index: 0;
@@ -18945,7 +18945,7 @@
       const themeRef = useTheme(
         "InternalSelectMenu",
         "-internal-select-menu",
-        style$1L,
+        style$1M,
         internalSelectMenuLight,
         props,
         vue.toRef(props, "clsPrefix")
@@ -19413,7 +19413,7 @@
     }
   });
 
-  function self$1v(vars) {
+  function self$1w(vars) {
     const {
       fontBodyMedium,
       containerPrimary,
@@ -19440,13 +19440,13 @@
   const popoverLight = {
     name: "Popover",
     common: derived,
-    self: self$1v
+    self: self$1w
   };
 
   const popoverDark = {
     name: "Popover",
     common: derived$1,
-    self: self$1v
+    self: self$1w
   };
 
   cB("popover", [cM("rtl", `
@@ -19461,7 +19461,7 @@
     right: "left"
   };
   const arrowSize = "var(--u-arrow-height) * 1.414";
-  var style$1K = c$1([cB("popover", `
+  var style$1L = c$1([cB("popover", `
     transition:
       box-shadow .3s var(--u-bezier),
       background-color .3s var(--u-bezier),
@@ -19680,7 +19680,7 @@
       const themeRef = useTheme(
         "Popover",
         "-popover",
-        style$1K,
+        style$1L,
         popoverLight,
         props,
         mergedClsPrefixRef
@@ -20507,7 +20507,7 @@
     }
   });
 
-  function self$1u(vars) {
+  function self$1v(vars) {
     const {
       opacityDisabled,
       borderRadiusSmall: borderRadius,
@@ -20605,13 +20605,13 @@
   const tagLight = {
     name: "Tag",
     common: derived,
-    self: self$1u
+    self: self$1v
   };
 
   const tagDark = {
     name: "Tag",
     common: derived$1,
-    self: self$1u
+    self: self$1v
   };
 
   var rtlStyle$s = cB("tag", [cM("rtl", `
@@ -20658,7 +20658,7 @@
     }
   };
 
-  var style$1J = cB("tag", `
+  var style$1K = cB("tag", `
   white-space: nowrap;
   position: relative;
   box-sizing: border-box;
@@ -20825,7 +20825,7 @@
       const themeRef = useTheme(
         "Tag",
         "-tag",
-        style$1J,
+        style$1K,
         tagLight,
         props,
         mergedClsPrefixRef
@@ -21189,7 +21189,7 @@
     }
   });
 
-  function self$1t(vars) {
+  function self$1u(vars) {
     const {
       heightSmall,
       heightMedium,
@@ -21209,10 +21209,10 @@
   }
   const skeletonLight$1 = {
     common: derived,
-    self: self$1t
+    self: self$1u
   };
 
-  var style$1I = c$1([cB("skeleton", `
+  var style$1J = c$1([cB("skeleton", `
     height: 1em;
     width: 100%;
     transition: background-color .3s var(--u-bezier);
@@ -21268,7 +21268,7 @@
       const themeRef = useTheme(
         "Skeleton",
         "-skeleton",
-        style$1I,
+        style$1J,
         skeletonLight$1,
         props,
         mergedClsPrefixRef
@@ -21384,7 +21384,7 @@
     }
   });
 
-  function self$1s(vars) {
+  function self$1t(vars) {
     const {
       borderRadius,
       iconMedium,
@@ -21542,7 +21542,7 @@
     peers: {
       Popover: popoverLight
     },
-    self: self$1s
+    self: self$1t
   });
 
   const internalSelectionDark = {
@@ -21551,7 +21551,7 @@
     peers: {
       Popover: popoverDark
     },
-    self: self$1s
+    self: self$1t
   };
 
   cB("base-selection", [cM("rtl", `
@@ -21584,7 +21584,7 @@
         color: var(--u-arrow-color${state}-secondary);
       `)])];
   }
-  var style$1H = c$1([cB("base-selection", `
+  var style$1I = c$1([cB("base-selection", `
     position: relative;
     z-index: auto;
     box-shadow: none;
@@ -21935,7 +21935,7 @@
       const themeRef = useTheme(
         "InternalSelection",
         "-internal-selection",
-        style$1H,
+        style$1I,
         internalSelectionLight,
         props,
         vue.toRef(props, "clsPrefix")
@@ -23016,7 +23016,7 @@
     })];
   }
 
-  var style$1G = c$1([c$1("@keyframes u-base-slot-machine-fade-up-in", `
+  var style$1H = c$1([c$1("@keyframes u-base-slot-machine-fade-up-in", `
     from {
       transform: translateY(60%);
       opacity: 0;
@@ -23135,7 +23135,7 @@
       }
     },
     setup(props) {
-      useStyle("-base-slot-machine", style$1G, vue.toRef(props, "clsPrefix"));
+      useStyle("-base-slot-machine", style$1H, vue.toRef(props, "clsPrefix"));
       const oldValueRef = vue.ref();
       const newValueRef = vue.ref();
       const numbersRef = vue.computed(() => {
@@ -23190,7 +23190,7 @@
     }
   });
 
-  function self$1r(vars) {
+  function self$1s(vars) {
     const {
       borderRadiusSmall,
       brandPrimary500,
@@ -23226,10 +23226,10 @@
   }
   const typographyLight$1 = {
     common: derived,
-    self: self$1r
+    self: self$1s
   };
 
-  var style$1F = cB("text", `
+  var style$1G = cB("text", `
   transition: color .3s var(--u-bezier);
   color: var(--u-text-color);
   margin: 0;
@@ -23537,7 +23537,7 @@
       const themeRef = useTheme(
         "Typography",
         "-text",
-        style$1F,
+        style$1G,
         typographyLight$1,
         props,
         mergedClsPrefixRef
@@ -23625,7 +23625,7 @@
     }
   });
 
-  var style$1E = cB("base-wave", `
+  var style$1F = cB("base-wave", `
   position: absolute;
   left: 0;
   right: 0;
@@ -23643,7 +23643,7 @@
       }
     },
     setup(props) {
-      useStyle("-base-wave", style$1E, vue.toRef(props, "clsPrefix"));
+      useStyle("-base-wave", style$1F, vue.toRef(props, "clsPrefix"));
       const selfRef = vue.ref(null);
       const activeRef = vue.ref(false);
       let animationTimerId = null;
@@ -23688,7 +23688,7 @@
     }
   });
 
-  function self$1q(vars) {
+  function self$1r(vars) {
     const {
       borderRadius,
       fontBodyMedium,
@@ -23725,7 +23725,7 @@
     peers: {
       Popover: popoverLight
     },
-    self: self$1q
+    self: self$1r
   });
 
   const tooltipDark = {
@@ -23734,10 +23734,10 @@
     peers: {
       Popover: popoverDark
     },
-    self: self$1q
+    self: self$1r
   };
 
-  var style$1D = cB("tooltip", "", [cE("content", `
+  var style$1E = cB("tooltip", "", [cE("content", `
     display: flex;
     align-items: flex-start;
   `), cE("icon", `
@@ -23863,7 +23863,7 @@
       const themeRef = useTheme(
         "Tooltip",
         "-tooltip",
-        props.variant === "plain" ? void 0 : style$1D,
+        props.variant === "plain" ? void 0 : style$1E,
         tooltipLight,
         props,
         mergedClsPrefixRef
@@ -23993,7 +23993,7 @@
     }
   });
 
-  var style$1C = cB("ellipsis", {
+  var style$1D = cB("ellipsis", {
     overflow: "hidden"
   }, [cNotM("line-clamp", `
     white-space: nowrap;
@@ -24031,7 +24031,7 @@
       const mergedTheme = useTheme(
         "Ellipsis",
         "-ellipsis",
-        style$1C,
+        style$1D,
         ellipsisLight,
         props,
         mergedClsPrefixRef
@@ -24187,7 +24187,7 @@
     setup(props, { attrs, slots }) {
       const mouseEnteredRef = vue.ref(false);
       const mergedClsPrefixRef = useMergedClsPrefix();
-      useStyle("-ellipsis", style$1C, mergedClsPrefixRef);
+      useStyle("-ellipsis", style$1D, mergedClsPrefixRef);
       const renderTrigger = () => {
         const { lineClamp } = props;
         const mergedClsPrefix = mergedClsPrefixRef.value;
@@ -24227,7 +24227,7 @@
     }
   });
 
-  function self$1p(vars) {
+  function self$1q(vars) {
     const {
       borderRadiusLarge,
       elementsQuaternary,
@@ -24269,21 +24269,21 @@
   const actionCardLight = {
     name: "ActionCard",
     common: derived,
-    self: self$1p
+    self: self$1q
   };
 
   const actionCardDark = {
     name: "ActionCard",
     common: derived$1,
     self: vars => {
-      const lightVars = self$1p(vars);
+      const lightVars = self$1q(vars);
       return {
         ...lightVars
       };
     }
   };
 
-  var style$1B = cB("action-card", `
+  var style$1C = cB("action-card", `
   position: relative;
   width: var(--u-width);
   min-height: var(--u-min-height);
@@ -24404,7 +24404,7 @@
       const themeRef = useTheme(
         "ActionCard",
         "-action-card",
-        style$1B,
+        style$1C,
         actionCardLight,
         props,
         mergedClsPrefixRef
@@ -24535,7 +24535,7 @@
     }
   });
 
-  var style$1A = cB("affix", [cM("affixed", {
+  var style$1B = cB("affix", [cM("affixed", {
     position: "fixed"
   }, [cM("absolute-positioned", {
     position: "absolute"
@@ -24605,7 +24605,7 @@
     props: affixProps,
     setup(props) {
       const { mergedClsPrefixRef } = useConfig(props);
-      useStyle("-affix", style$1A, mergedClsPrefixRef);
+      useStyle("-affix", style$1B, mergedClsPrefixRef);
       let scrollTarget = null;
       const stickToTopRef = vue.ref(false);
       const stickToBottomRef = vue.ref(false);
@@ -24741,7 +24741,7 @@
     descriptionSpaceBanner: "24px"
   };
 
-  function self$1o(vars) {
+  function self$1p(vars) {
     const {
       iconMedium,
       closeMedium,
@@ -24850,13 +24850,13 @@
   const alertLight = {
     name: "Alert",
     common: derived,
-    self: self$1o
+    self: self$1p
   };
 
   const alertDark = {
     name: "Alert",
     common: derived$1,
-    self: self$1o
+    self: self$1p
   };
 
   var rtlStyle$r = cB("alert", [cM("rtl", `
@@ -24932,7 +24932,7 @@
     `)];
   }
 
-  var style$1z = cB("alert", `
+  var style$1A = cB("alert", `
   line-height: var(--u-line-height);
   position: relative;
   transition: background-color .3s var(--u-bezier);
@@ -25111,7 +25111,7 @@
       const themeRef = useTheme(
         "Alert",
         "-alert",
-        style$1z,
+        style$1A,
         alertLight,
         props,
         mergedClsPrefixRef
@@ -25252,7 +25252,7 @@
     }
   });
 
-  function self$1n(vars) {
+  function self$1o(vars) {
     const {
       borderRadius,
       fontBodyMedium,
@@ -25282,13 +25282,13 @@
   const anchorLight = {
     name: "Anchor",
     common: derived,
-    self: self$1n
+    self: self$1o
   };
 
   const anchorDark = {
     name: "Anchor",
     common: derived$1,
-    self: self$1n
+    self: self$1o
   };
 
   const anchorInjectionKey = createInjectionKey("u-anchor");
@@ -25627,7 +25627,7 @@
     }
   });
 
-  var style$1y = cB("anchor", `
+  var style$1z = cB("anchor", `
   position: relative;
 `, [cNotM("block", `
     padding-left: var(--u-rail-width);
@@ -25717,7 +25717,7 @@
       const themeRef = useTheme(
         "Anchor",
         "-anchor",
-        style$1y,
+        style$1z,
         anchorLight,
         props,
         mergedClsPrefixRef
@@ -25797,7 +25797,7 @@
   isBrowser$1 && navigator.userAgent.includes("Firefox");
   const isSafari = isBrowser$1 && navigator.userAgent.includes("Safari") && !isChrome;
 
-  function self$1m(vars) {
+  function self$1n(vars) {
     const {
       iconMedium,
       textSecondary,
@@ -25908,13 +25908,13 @@
   const inputLight = {
     name: "Input",
     common: derived,
-    self: self$1m
+    self: self$1n
   };
 
   const inputDark = {
     name: "Input",
     common: derived$1,
-    self: self$1m
+    self: self$1n
   };
 
   var rtlStyle$q = cB("input", [cM("rtl", `
@@ -25940,7 +25940,7 @@
 
   const inputInjectionKey = createInjectionKey("u-input");
 
-  var style$1x = cB("input", `
+  var style$1y = cB("input", `
   max-width: 100%;
   cursor: text;
   line-height: 1.5;
@@ -26488,7 +26488,7 @@
     rippleDuration: ".6s"
   };
 
-  function self$1l(vars) {
+  function self$1m(vars) {
     const {
       heightMini,
       heightTiny,
@@ -26744,13 +26744,13 @@
   const buttonLight = {
     name: "Button",
     common: derived,
-    self: self$1l
+    self: self$1m
   };
 
   const buttonDark = {
     name: "Button",
     common: derived$1,
-    self: self$1l
+    self: self$1m
   };
 
   var rtlStyle$p = cB("button", [cM("rtl", `
@@ -26768,7 +26768,7 @@
     style: rtlStyle$p
   };
 
-  var style$1w = c$1([cB("button", `
+  var style$1x = c$1([cB("button", `
     margin: 0;
     font-weight: var(--u-font-weight);
     line-height: 1;
@@ -26997,6 +26997,10 @@
     nativeFocusBehavior: {
       type: Boolean,
       default: !isSafari
+    },
+    visible: {
+      type: Boolean,
+      default: true
     }
   };
   const Button = vue.defineComponent({
@@ -27095,7 +27099,7 @@
       const themeRef = useTheme(
         "Button",
         "-button",
-        style$1w,
+        style$1x,
         buttonLight,
         props,
         mergedClsPrefixRef
@@ -27412,6 +27416,8 @@
       };
     },
     render() {
+      if (this.visible === false)
+        return null;
       const { mergedClsPrefix, tag: Component, onRender } = this;
       onRender?.();
       const children = resolveWrappedSlot(
@@ -27527,7 +27533,7 @@
     iconMargin: "0 16px 0 0"
   };
 
-  function self$1k(vars) {
+  function self$1l(vars) {
     const {
       closeMedium,
       iconMedium,
@@ -27612,13 +27618,13 @@
   const messageLight = {
     name: "Message",
     common: derived,
-    self: self$1k
+    self: self$1l
   };
 
   const messageDark = {
     name: "Message",
     common: derived$1,
-    self: self$1k
+    self: self$1l
   };
 
   var rtlStyle$o = cB("message", [cM("rtl", `
@@ -27653,7 +27659,7 @@
     onMouseleave: Function
   };
 
-  var style$1v = c$1([cB("message-wrapper", `
+  var style$1w = c$1([cB("message-wrapper", `
     margin: var(--u-margin);
     z-index: 0;
     transform-origin: top center;
@@ -27774,7 +27780,7 @@
       const themeRef = useTheme(
         "Message",
         "-message",
-        style$1v,
+        style$1w,
         messageLight,
         messageProviderProps,
         mergedClsPrefixRef
@@ -28453,7 +28459,7 @@
       const themeRef = useTheme(
         "Input",
         "-input",
-        style$1x,
+        style$1y,
         inputLight,
         props,
         mergedClsPrefixRef
@@ -29540,7 +29546,7 @@
     }
   });
 
-  var style$1u = cB("input-group", `
+  var style$1v = cB("input-group", `
   display: inline-flex;
   width: 100%;
   flex-wrap: nowrap;
@@ -29603,7 +29609,7 @@
     props: inputGroupProps,
     setup(props) {
       const { mergedClsPrefixRef } = useConfig(props);
-      useStyle("-input-group", style$1u, mergedClsPrefixRef);
+      useStyle("-input-group", style$1v, mergedClsPrefixRef);
       return {
         mergedClsPrefix: mergedClsPrefixRef
       };
@@ -29614,7 +29620,7 @@
     }
   });
 
-  var style$1t = cB("input-group-label", `
+  var style$1u = cB("input-group-label", `
   position: relative;
   user-select: none;
   -webkit-user-select: none;
@@ -29662,7 +29668,7 @@
       const themeRef = useTheme(
         "Input",
         "-input-group-label",
-        style$1t,
+        style$1u,
         inputLight,
         props,
         mergedClsPrefixRef
@@ -29788,7 +29794,7 @@
     return valOptMap;
   }
 
-  function self$1j(vars) {
+  function self$1k(vars) {
     const {
       shadowDepth2
     } = vars;
@@ -29803,7 +29809,7 @@
       InternalSelectMenu: internalSelectMenuLight,
       Input: inputLight
     },
-    self: self$1j
+    self: self$1k
   });
 
   const autoCompleteDark = {
@@ -29813,10 +29819,10 @@
       InternalSelectMenu: internalSelectMenuDark,
       Input: inputDark
     },
-    self: self$1j
+    self: self$1k
   };
 
-  var style$1s = c$1([cB("auto-complete", `
+  var style$1t = c$1([cB("auto-complete", `
     z-index: auto;
     position: relative;
     display: inline-flex;
@@ -29946,7 +29952,7 @@
       const themeRef = useTheme(
         "AutoComplete",
         "-auto-complete",
-        style$1s,
+        style$1t,
         autoCompleteLight,
         props,
         mergedClsPrefixRef
@@ -30343,7 +30349,7 @@
     return unobserve;
   };
 
-  function self$1i(vars) {
+  function self$1j(vars) {
     const {
       heightSmall,
       heightMedium,
@@ -30364,16 +30370,16 @@
   const skeletonLight = {
     name: "Skeleton",
     common: derived,
-    self: self$1i
+    self: self$1j
   };
 
   const skeletonDark = {
     name: "Skeleton",
     common: derived$1,
-    self: self$1i
+    self: self$1j
   };
 
-  var style$1r = c$1([cB("skeleton", `
+  var style$1s = c$1([cB("skeleton", `
     height: 1em;
     width: 100%;
     transition: background-color .3s var(--u-bezier);
@@ -30432,7 +30438,7 @@
       const themeRef = useTheme(
         "Skeleton",
         "-skeleton",
-        style$1r,
+        style$1s,
         skeletonLight,
         props,
         mergedClsPrefixRef
@@ -30487,7 +30493,7 @@
     }
   });
 
-  function self$1h(vars) {
+  function self$1i(vars) {
     const {
       borderRadius,
       heightSmall,
@@ -30519,18 +30525,18 @@
   const avatarLight = {
     name: "Avatar",
     common: derived,
-    self: self$1h
+    self: self$1i
   };
 
   const avatarDark = {
     name: "Avatar",
     common: derived$1,
-    self: self$1h
+    self: self$1i
   };
 
   const avatarGroupInjectionKey = createInjectionKey("u-avatar-group");
 
-  var style$1q = cB("avatar", `
+  var style$1r = cB("avatar", `
   width: var(--u-merged-size);
   height: var(--u-merged-size);
   color: var(--u-text-color);
@@ -30642,7 +30648,7 @@
       const themeRef = useTheme(
         "Avatar",
         "-avatar",
-        style$1q,
+        style$1r,
         avatarLight,
         props,
         mergedClsPrefixRef
@@ -30853,7 +30859,7 @@
     }
   });
 
-  function self$1g() {
+  function self$1h() {
     return {
       gap: "-12px"
     };
@@ -30864,7 +30870,7 @@
     peers: {
       Avatar: avatarLight
     },
-    self: self$1g
+    self: self$1h
   });
 
   const avatarGroupDark = {
@@ -30873,7 +30879,7 @@
     peers: {
       Avatar: avatarDark
     },
-    self: self$1g
+    self: self$1h
   };
 
   var rtlStyle$n = cB("avatar-group", [cM("rtl", `
@@ -30890,7 +30896,7 @@
     style: rtlStyle$n
   };
 
-  var style$1p = cB("avatar-group", `
+  var style$1q = cB("avatar-group", `
   flex-wrap: nowrap;
   display: inline-flex;
   position: relative;
@@ -30925,7 +30931,7 @@
       const mergedThemeRef = useTheme(
         "AvatarGroup",
         "-avatar-group",
-        style$1p,
+        style$1q,
         avatarGroupLight,
         props,
         mergedClsPrefixRef
@@ -31014,7 +31020,7 @@
     }
   });
 
-  function self$1f(vars) {
+  function self$1g(vars) {
     const {
       heightLarge,
       iconMedium,
@@ -31039,13 +31045,13 @@
   const backTopLight = {
     name: "BackTop",
     common: derived,
-    self: self$1f
+    self: self$1g
   };
 
   const backTopDark = {
     name: "BackTop",
     common: derived$1,
-    self: self$1f
+    self: self$1g
   };
 
   var BackTopIcon = /* @__PURE__ */ vue.h(
@@ -31059,7 +31065,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$1o = cB("back-top", `
+  var style$1p = cB("back-top", `
   position: fixed;
   right: 40px;
   bottom: 40px;
@@ -31198,7 +31204,7 @@
       const themeRef = useTheme(
         "BackTop",
         "-back-top",
-        style$1o,
+        style$1p,
         backTopLight,
         props,
         mergedClsPrefixRef
@@ -31349,7 +31355,7 @@
     }
   });
 
-  function self$1e(vars) {
+  function self$1f(vars) {
     const {
       brandQuaternary500,
       elementsPrimary,
@@ -31382,13 +31388,13 @@
   const badgeLight = {
     name: "Badge",
     common: derived,
-    self: self$1e
+    self: self$1f
   };
 
   const badgeDark = {
     name: "Badge",
     common: derived$1,
-    self: self$1e
+    self: self$1f
   };
 
   var rtlStyle$m = cB("badge", [cM("rtl", `
@@ -31405,7 +31411,7 @@
     style: rtlStyle$m
   };
 
-  var style$1n = c$1([c$1("@keyframes badge-wave-spread", {
+  var style$1o = c$1([c$1("@keyframes badge-wave-spread", {
     from: {
       boxShadow: "0 0 0.5px 0px var(--u-ripple-color)",
       opacity: 0.6
@@ -31519,7 +31525,7 @@
       const themeRef = useTheme(
         "Badge",
         "-badge",
-        style$1n,
+        style$1o,
         badgeLight,
         props,
         mergedClsPrefixRef
@@ -31655,7 +31661,7 @@
     }
   });
 
-  function self$1d(vars) {
+  function self$1e(vars) {
     const {
       fontWeightStrong,
       fontBodyMedium,
@@ -31678,16 +31684,16 @@
   const breadcrumbLight = {
     name: "Breadcrumb",
     common: derived,
-    self: self$1d
+    self: self$1e
   };
 
   const breadcrumbDark = {
     name: "Breadcrumb",
     common: derived$1,
-    self: self$1d
+    self: self$1e
   };
 
-  var style$1m = cB("breadcrumb", `
+  var style$1n = cB("breadcrumb", `
   white-space: nowrap;
   cursor: default;
   line-height: var(--u-item-line-height);
@@ -31757,7 +31763,7 @@
       const themeRef = useTheme(
         "Breadcrumb",
         "-breadcrumb",
-        style$1m,
+        style$1n,
         breadcrumbLight,
         props,
         mergedClsPrefixRef
@@ -31942,7 +31948,7 @@
       top: n1
     })])])])]);
   }
-  var style$1l = cB("button-group", `
+  var style$1m = cB("button-group", `
   flex-wrap: nowrap;
   display: inline-flex;
   position: relative;
@@ -31991,7 +31997,7 @@
     props: buttonGroupProps,
     setup(props) {
       const { mergedClsPrefixRef, mergedRtlRef } = useConfig(props);
-      useStyle("-button-group", style$1l, mergedClsPrefixRef);
+      useStyle("-button-group", style$1m, mergedClsPrefixRef);
       vue.provide(buttonGroupInjectionKey, props);
       const rtlEnabledRef = useRtl(
         "ButtonGroup",
@@ -37935,7 +37941,7 @@
     return resultDate.getTime();
   }
 
-  function self$1c(vars) {
+  function self$1d(vars) {
     const {
       borderRadius,
       fontWeightStrong,
@@ -37979,7 +37985,7 @@
     peers: {
       Button: buttonLight
     },
-    self: self$1c
+    self: self$1d
   });
 
   const calendarDark = {
@@ -37988,10 +37994,10 @@
     peers: {
       Button: buttonDark
     },
-    self: self$1c
+    self: self$1d
   };
 
-  var style$1k = c$1([cB("calendar", `
+  var style$1l = c$1([cB("calendar", `
     line-height: var(--u-line-height);
     font-size: var(--u-font-size);
     color: var(--u-text-color);
@@ -38130,7 +38136,7 @@
       const themeRef = useTheme(
         "Calendar",
         "-calendar",
-        style$1k,
+        style$1l,
         calendarLight,
         props,
         mergedClsPrefixRef
@@ -38418,7 +38424,7 @@
     paddingHuge: "27px 40px 28px"
   };
 
-  function self$1b(vars) {
+  function self$1c(vars) {
     const {
       borderRadius,
       fontWeight,
@@ -38484,13 +38490,13 @@
   const cardLight = {
     name: "Card",
     common: derived,
-    self: self$1b
+    self: self$1c
   };
 
   const cardDark$1 = {
     name: "Card",
     common: derived$1,
-    self: self$1b
+    self: self$1c
   };
 
   var rtlStyle$l = cB("card", [cM("rtl", `
@@ -38513,7 +38519,7 @@
 `, [c$1("&:first-child", {
     paddingTop: "var(--u-padding-bottom)"
   })]);
-  var style$1j = c$1([cB("card", `
+  var style$1k = c$1([cB("card", `
     font-size: var(--u-font-size);
     line-height: var(--u-line-height);
     font-weight: var(--u-font-weight);
@@ -38696,7 +38702,7 @@
       const themeRef = useTheme(
         "Card",
         "-card",
-        style$1j,
+        style$1k,
         cardLight,
         props,
         mergedClsPrefixRef
@@ -39279,7 +39285,7 @@
     }
   });
 
-  function self$1a(vars) {
+  function self$1b(vars) {
     const {
       textSecondary,
       textPrimary,
@@ -39314,10 +39320,10 @@
   const cardListLight = {
     name: "CardList",
     common: derived,
-    self: self$1a
+    self: self$1b
   };
 
-  var style$1i = cB("card-list-item", [c$1("&", {
+  var style$1j = cB("card-list-item", [c$1("&", {
     padding: "16px",
     borderRadius: "var(--u-border-radius)",
     display: "flex",
@@ -39438,7 +39444,7 @@
     props: cardListItemProps,
     setup(props, { slots }) {
       const { mergedClsPrefixRef } = useConfig(props);
-      useStyle("-card-list-item", style$1i, mergedClsPrefixRef);
+      useStyle("-card-list-item", style$1j, mergedClsPrefixRef);
       const isOpen = vue.ref(false);
       const toggle = () => {
         isOpen.value = !isOpen.value;
@@ -39569,7 +39575,7 @@
       const themeRef = useTheme(
         "CardList",
         "-card-list",
-        style$1i,
+        style$1j,
         cardListLight,
         props,
         mergedClsPrefixRef
@@ -39666,7 +39672,7 @@
     }
   });
 
-  function self$19() {
+  function self$1a() {
     return {
       dotSize: "8px",
       dotColor: "rgba(255, 255, 255, .3)",
@@ -39680,13 +39686,13 @@
   const carouselLight = {
     name: "Carousel",
     common: derived,
-    self: self$19
+    self: self$1a
   };
 
   const carouselDark = {
     name: "Carousel",
     common: derived$1,
-    self: self$19
+    self: self$1a
   };
 
   const carouselMethodsInjectionKey = createInjectionKey("u-carousel-methods");
@@ -39970,7 +39976,7 @@
     }
   });
 
-  var style$1h = cB("carousel", `
+  var style$1i = cB("carousel", `
   position: relative;
   width: 100%;
   height: 100%;
@@ -40972,7 +40978,7 @@
       const themeRef = useTheme(
         "Carousel",
         "-carousel",
-        style$1h,
+        style$1i,
         carouselLight,
         props,
         mergedClsPrefixRef
@@ -41132,7 +41138,7 @@
     labelPadding: "0 16px"
   };
 
-  function self$18(vars) {
+  function self$19(vars) {
     const {
       lineHeightBodyLarge,
       fontBodyLarge,
@@ -41208,13 +41214,13 @@
   const checkboxLight = {
     name: "Checkbox",
     common: derived,
-    self: self$18
+    self: self$19
   };
 
   const checkboxDark = {
     name: "Checkbox",
     common: derived$1,
-    self: self$18
+    self: self$19
   };
 
   var rtlStyle$k = cB("checkbox", [cM("rtl", `
@@ -41226,7 +41232,7 @@
     style: rtlStyle$k
   };
 
-  function self$17(vars) {
+  function self$18(vars) {
     const {
       borderRadius,
       heightMedium,
@@ -41267,7 +41273,7 @@
       Checkbox: checkboxLight,
       Empty: emptyLight
     },
-    self: self$17
+    self: self$18
   });
 
   const cascaderDark = {
@@ -41280,14 +41286,14 @@
       Checkbox: checkboxDark,
       Empty: emptyLight
     },
-    self: self$17
+    self: self$18
   };
 
   var CheckMark = /* @__PURE__ */ vue.h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", class: "check-icon" }, /* @__PURE__ */ vue.h("path", { d: "M7.95833 14.6458C7.84722 14.6458 7.74306 14.6283 7.64583 14.5933C7.54861 14.5589 7.45833 14.5 7.375 14.4166L3.79167 10.8333C3.63889 10.6805 3.56583 10.4825 3.5725 10.2391C3.57972 9.99637 3.65972 9.79859 3.8125 9.64581C3.96528 9.49304 4.15972 9.41665 4.39583 9.41665C4.63195 9.41665 4.82639 9.49304 4.97917 9.64581L7.95833 12.625L15.0208 5.56248C15.1736 5.4097 15.3717 5.33331 15.615 5.33331C15.8578 5.33331 16.0556 5.4097 16.2083 5.56248C16.3611 5.71526 16.4375 5.91304 16.4375 6.15581C16.4375 6.39915 16.3611 6.5972 16.2083 6.74998L8.54167 14.4166C8.45833 14.5 8.36806 14.5589 8.27083 14.5933C8.17361 14.6283 8.06945 14.6458 7.95833 14.6458Z" }));
 
   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$1g = c$1([iconSwitchTransition(), c$1("@keyframes ripple", {
+  var style$1h = c$1([iconSwitchTransition(), c$1("@keyframes ripple", {
     from: {
       transform: "scale(0)"
     },
@@ -41501,7 +41507,7 @@
       const themeRef = useTheme(
         "Checkbox",
         "-checkbox",
-        style$1g,
+        style$1h,
         checkboxLight,
         props,
         mergedClsPrefixRef
@@ -42575,7 +42581,7 @@
     }
   });
 
-  var style$1f = c$1([cB("cascader-menu", `
+  var style$1g = c$1([cB("cascader-menu", `
     outline: none;
     position: relative;
     margin: 4px 0;
@@ -42817,7 +42823,7 @@
       const themeRef = useTheme(
         "Cascader",
         "-cascader",
-        style$1f,
+        style$1g,
         cascaderLight,
         props,
         mergedClsPrefixRef
@@ -43749,12 +43755,12 @@
     }
   };
 
-  function self$16() {
+  function self$17() {
     return commonVars$7;
   }
   const flexLight = {
     name: "Flex",
-    self: self$16
+    self: self$17
   };
 
   cB("space", [cM("rtl", `
@@ -43872,7 +43878,7 @@
     }
   });
 
-  function self$15(vars) {
+  function self$16(vars) {
     const {
       borderRadius,
       borderRadiusMedium,
@@ -43916,13 +43922,13 @@
   const listLight = {
     name: "List",
     common: derived,
-    self: self$15
+    self: self$16
   };
 
   const listDark$1 = {
     name: "List",
     common: derived$1,
-    self: self$15
+    self: self$16
   };
 
   var rtlStyle$j = cB("list", [cM("rtl", `
@@ -43941,7 +43947,7 @@
     style: rtlStyle$j
   };
 
-  function self$14(vars) {
+  function self$15(vars) {
     const {
       shadowDepth2
     } = vars;
@@ -43956,7 +43962,7 @@
       InternalSelection: internalSelectionLight,
       InternalSelectMenu: internalSelectMenuLight
     },
-    self: self$14
+    self: self$15
   });
 
   const selectDark = {
@@ -43966,13 +43972,13 @@
       InternalSelection: internalSelectionDark,
       InternalSelectMenu: internalSelectMenuDark
     },
-    self: self$14
+    self: self$15
   };
 
   ({
     style: c$1([])});
 
-  function self$13(vars) {
+  function self$14(vars) {
     const {
       borderRadiusSmall,
       fontWeightStrong,
@@ -44067,19 +44073,19 @@
   const typographyLight = {
     name: "Typography",
     common: derived,
-    self: self$13
+    self: self$14
   };
 
   const typographyDark = {
     name: "Typography",
     common: derived$1,
-    self: self$13
+    self: self$14
   };
 
   const chatInputLight = {
     ...inputLight,
     self(vars) {
-      const originalInputSelf = self$1m(vars);
+      const originalInputSelf = self$1n(vars);
       const {
         elementsTertiary
       } = vars;
@@ -44099,7 +44105,7 @@
   const chatBadgeLight = {
     ...badgeLight,
     self(vars) {
-      const originalBadgeSelf = self$1e(vars);
+      const originalBadgeSelf = self$1f(vars);
       const {
         brandPrimary400,
         elementsSecondary
@@ -44111,7 +44117,7 @@
       };
     }
   };
-  function self$12(vars) {
+  function self$13(vars) {
     const {
       borderRadiusLarge,
       elementsQuaternary,
@@ -44184,7 +44190,7 @@
       HeaderShareIcon: iconLight,
       HeaderProfileIcon: iconLight
     },
-    self: self$12
+    self: self$13
   });
 
   const chatDark = createTheme$1({
@@ -44206,7 +44212,7 @@
       HeaderProfileIcon: iconDark$1
     },
     self: vars => {
-      const lightVars = self$12(vars);
+      const lightVars = self$13(vars);
       return {
         ...lightVars
       };
@@ -44314,7 +44320,7 @@
   };
   const listInjectionKey = createInjectionKey("u-list");
 
-  var style$1e = c$1([cB("align-start", `
+  var style$1f = c$1([cB("align-start", `
     align-self: self-start;
   `), cB("align-center", `
     align-self: center;
@@ -44447,7 +44453,7 @@
       const themeRef = useTheme(
         "List",
         "-list",
-        style$1e,
+        style$1f,
         listLight,
         props,
         mergedClsPrefixRef
@@ -44929,7 +44935,7 @@
     }
   });
 
-  var style$1d = cB("a", `
+  var style$1e = cB("a", `
   cursor: pointer;
   transition:
     color .3s var(--u-bezier),
@@ -44952,7 +44958,7 @@
       const themeRef = useTheme(
         "Typography",
         "-a",
-        style$1d,
+        style$1e,
         typographyLight,
         props,
         mergedClsPrefixRef
@@ -44988,7 +44994,7 @@
     }
   });
 
-  var style$1c = cB("blockquote", `
+  var style$1d = cB("blockquote", `
   font-size: var(--u-font-size);
   line-height: var(--u-line-height);
   margin: 0;
@@ -45027,7 +45033,7 @@
       const themeRef = useTheme(
         "Typography",
         "-blockquote",
-        style$1c,
+        style$1d,
         typographyLight,
         props,
         mergedClsPrefixRef
@@ -45076,7 +45082,7 @@
     }
   });
 
-  var style$1b = cB("h", `
+  var style$1c = cB("h", `
   font-size: var(--u-font-size);
   font-weight: var(--u-font-weight);
   margin: var(--u-margin);
@@ -45121,7 +45127,7 @@
         mergedClsPrefixRef,
         inlineThemeDisabled
       } = useConfig(props);
-      const themeRef = useTheme("Typography", "-h", style$1b, typographyLight, props, mergedClsPrefixRef);
+      const themeRef = useTheme("Typography", "-h", style$1c, typographyLight, props, mergedClsPrefixRef);
       const cssVarsRef = vue.computed(() => {
         const {
           type
@@ -45185,7 +45191,7 @@
   const UH5$1 = createHeader("5");
   const UH6$1 = createHeader("6");
 
-  var style$1a = cB("hr", `
+  var style$1b = cB("hr", `
   margin: 12px 0;
   transition: border-color .3s var(--u-bezier);
   border-left: none;
@@ -45210,7 +45216,7 @@
       const themeRef = useTheme(
         "Typography",
         "-hr",
-        style$1a,
+        style$1b,
         typographyLight,
         props,
         mergedClsPrefixRef
@@ -45264,7 +45270,7 @@
   `), c$1("&:last-child", `
     margin-bottom: 0;
   `)];
-  var style$19 = c$1([cB("ol", {
+  var style$1a = c$1([cB("ol", {
     fontSize: "var(--u-font-size)",
     padding: "var(--u-ol-padding)"
   }, [cM("align-text", {
@@ -45288,7 +45294,7 @@
       const themeRef = useTheme(
         "Typography",
         "-xl",
-        style$19,
+        style$1a,
         typographyLight,
         props,
         mergedClsPrefixRef
@@ -45341,7 +45347,7 @@
     }
   });
 
-  var style$18 = cB("p", `
+  var style$19 = cB("p", `
   box-sizing: border-box;
   transition: color .3s var(--u-bezier);
   margin: var(--u-margin);
@@ -45362,7 +45368,7 @@
       const themeRef = useTheme(
         "Typography",
         "-p",
-        style$18,
+        style$19,
         typographyLight,
         props,
         mergedClsPrefixRef
@@ -45502,7 +45508,7 @@
       const themeRef = useTheme(
         "Typography",
         "-xl",
-        style$19,
+        style$1a,
         typographyLight,
         props,
         mergedClsPrefixRef
@@ -45555,7 +45561,7 @@
     }
   });
 
-  function self$11(vars) {
+  function self$12(vars) {
     const {
       fontWeight,
       fontBodyMedium,
@@ -45596,16 +45602,16 @@
   const progressLight = {
     name: "Progress",
     common: derived,
-    self: self$11
+    self: self$12
   };
 
   const progressDark = {
     name: "Progress",
     common: derived$1,
-    self: self$11
+    self: self$12
   };
 
-  function self$10(vars) {
+  function self$11(vars) {
     const {
       staticGreen,
       staticRed,
@@ -45662,7 +45668,7 @@
       Button: buttonLight,
       Progress: progressLight
     },
-    self: self$10
+    self: self$11
   });
 
   const uploadDark = {
@@ -45672,7 +45678,7 @@
       Button: buttonDark,
       Progress: progressDark
     },
-    self: self$10
+    self: self$11
   };
 
   var rtlStyle$i = cB("upload", [cM("rtl", `
@@ -45687,7 +45693,7 @@
 
   const uploadInjectionKey = createInjectionKey("u-upload");
 
-  var style$17 = c$1([cB("upload", "width: var(--u-upload-width)", [cM("dragger-inside", [cB("upload-trigger", `
+  var style$18 = c$1([cB("upload", "width: var(--u-upload-width)", [cM("dragger-inside", [cB("upload-trigger", `
         display: block;
       `)]), cM("drag-over", [cB("upload-dragger", `
         border: var(--u-dragger-border-hover);
@@ -46148,10 +46154,10 @@
   const cardDark = {
     name: "CardList",
     common: derived$1,
-    self: self$1a
+    self: self$1b
   };
 
-  function self$$(vars) {
+  function self$10(vars) {
     const {
       textPrimary,
       fontBodyMedium,
@@ -46179,12 +46185,12 @@
   const codeLight = {
     name: "Code",
     common: derived,
-    self: self$$
+    self: self$10
   };
 
-  function self$_(vars) {
+  function self$$(vars) {
     return {
-      ...self$$(vars),
+      ...self$10(vars),
       // extracted from hljs atom-one-dark.scss
       "mono-3": "#5c6370",
       "hue-1": "#56b6c2",
@@ -46200,10 +46206,10 @@
   const codeDark = {
     name: "Code",
     common: derived$1,
-    self: self$_
+    self: self$$
   };
 
-  function self$Z(vars) {
+  function self$_(vars) {
     const {
       cubicBezierEaseInOut
     } = vars;
@@ -46214,13 +46220,13 @@
   const collapseTransitionLight = {
     name: "CollapseTransition",
     common: derived,
-    self: self$Z
+    self: self$_
   };
 
   const collapseTransitionDark = {
     name: "CollapseTransition",
     common: derived$1,
-    self: self$Z
+    self: self$_
   };
 
   var rtlStyle$g = cB("collapse-transition", [cM("rtl", `
@@ -46233,7 +46239,7 @@
     style: rtlStyle$g
   };
 
-  function self$Y(vars) {
+  function self$Z(vars) {
     const {
       fontWeight,
       fontBodyLarge,
@@ -46273,13 +46279,13 @@
   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", `
@@ -46302,7 +46308,7 @@
     style: rtlStyle$f
   };
 
-  function self$X(vars) {
+  function self$Y(vars) {
     const {
       borderRadius,
       fontBodySmall,
@@ -46389,7 +46395,7 @@
     peers: {
       Popover: popoverLight
     },
-    self: self$X
+    self: self$Y
   });
 
   const dropdownDark = {
@@ -46398,7 +46404,7 @@
     peers: {
       Popover: popoverDark
     },
-    self: self$X
+    self: self$Y
   };
 
   const popselect = {
@@ -46410,7 +46416,7 @@
     }
   };
 
-  function self$W(vars) {
+  function self$X(vars) {
     const {
       shadowDepth2
     } = vars;
@@ -46425,10 +46431,10 @@
       Popover: popoverLight,
       InternalSelectMenu: internalSelectMenuLight
     },
-    self: self$W
+    self: self$X
   });
 
-  function self$V(vars) {
+  function self$W(vars) {
     const {
       brandPrimary100,
       transparencySecondary,
@@ -46526,7 +46532,7 @@
       Input: inputLight,
       Popselect: popselectLight
     },
-    self: self$V
+    self: self$W
   });
 
   const paginationDark = {
@@ -46537,7 +46543,7 @@
       Input: inputDark,
       Popselect: popselect
     },
-    self: self$V
+    self: self$W
   };
 
   var rtlStyle$e = cB("pagination", [cM("rtl", `
@@ -46554,7 +46560,7 @@
     peers: [inputRtl]
   };
 
-  function self$U(vars) {
+  function self$V(vars) {
     const {
       heightTiny,
       heightSmall,
@@ -46646,13 +46652,13 @@
   const radioLight = {
     name: "Radio",
     common: derived,
-    self: self$U
+    self: self$V
   };
 
   const radioDark = {
     name: "Radio",
     common: derived$1,
-    self: self$U
+    self: self$V
   };
 
   var rtlStyle$d = c$1([cB("radio", [cM("rtl", `
@@ -46680,7 +46686,7 @@
     style: rtlStyle$d
   };
 
-  function self$T(vars) {
+  function self$U(vars) {
     const {
       borderRadius,
       opacityDisabled,
@@ -46781,7 +46787,7 @@
       Ellipsis: ellipsisLight,
       Dropdown: dropdownLight
     },
-    self: self$T
+    self: self$U
   });
 
   const dataTableDark = {
@@ -46798,10 +46804,10 @@
       Ellipsis: ellipsisDark,
       Dropdown: dropdownDark
     },
-    self: self$T
+    self: self$U
   };
 
-  function self$S(vars) {
+  function self$T(vars) {
     const {
       opacityDisabled,
       borderRadius,
@@ -46843,7 +46849,7 @@
       Button: buttonLight,
       Input: inputLight
     },
-    self: self$S
+    self: self$T
   });
 
   const timePickerDark = {
@@ -46854,7 +46860,7 @@
       Button: buttonDark,
       Input: inputDark
     },
-    self: self$S
+    self: self$T
   };
 
   const itemWidth = "38px";
@@ -46900,7 +46906,7 @@
     calendarRightPaddingYearrange: "0"
   };
 
-  function self$R(vars) {
+  function self$S(vars) {
     const {
       iconMedium,
       fontWeightStrong,
@@ -47001,7 +47007,7 @@
       Scrollbar: scrollbarLight,
       Select: internalSelectionLight
     },
-    self: self$R
+    self: self$S
   });
 
   const datePickerDark = {
@@ -47014,10 +47020,10 @@
       Scrollbar: scrollbarDark,
       Select: internalSelectionDark
     },
-    self: self$R
+    self: self$S
   };
 
-  function self$Q(vars) {
+  function self$R(vars) {
     const {
       borderRadius,
       lineHeightBodyLarge,
@@ -47067,13 +47073,13 @@
   const descriptionsLight = {
     name: "Descriptions",
     common: derived,
-    self: self$Q
+    self: self$R
   };
 
   const descriptionsDark = {
     name: "Descriptions",
     common: derived$1,
-    self: self$Q
+    self: self$R
   };
 
   var commonVars$5 = {
@@ -47087,7 +47093,7 @@
     closeBorderRadius: "100px"
   };
 
-  function self$P(vars) {
+  function self$Q(vars) {
     const {
       borderRadius,
       containerPrimary,
@@ -47144,7 +47150,7 @@
     peers: {
       Button: buttonLight
     },
-    self: self$P
+    self: self$Q
   });
 
   const dialogDark = {
@@ -47153,10 +47159,10 @@
     peers: {
       Button: buttonDark
     },
-    self: self$P
+    self: self$Q
   };
 
-  function self$O(vars) {
+  function self$P(vars) {
     const {
       elementsQuaternary,
       textPrimary,
@@ -47176,13 +47182,13 @@
   const dividerLight = {
     name: "Divider",
     common: derived,
-    self: self$O
+    self: self$P
   };
 
   const dividerDark = {
     name: "Divider",
     common: derived$1,
-    self: self$O
+    self: self$P
   };
 
   var commonVars$4 = {
@@ -47198,7 +47204,7 @@
     contentBorderRadius: "24px"
   };
 
-  function self$N(vars) {
+  function self$O(vars) {
     const {
       containerPrimary,
       textPrimary,
@@ -47247,7 +47253,7 @@
     peers: {
       Scrollbar: scrollbarLight
     },
-    self: self$N
+    self: self$O
   });
 
   const drawerDark = {
@@ -47256,7 +47262,7 @@
     peers: {
       Scrollbar: scrollbarDark
     },
-    self: self$N
+    self: self$O
   };
 
   var rtlStyle$c = cB("drawer", [cM("rtl", `
@@ -47290,7 +47296,7 @@
     }
   };
 
-  function self$M() {
+  function self$N() {
     return commonVariables$1;
   }
   const dynamicInputLight = createTheme$1({
@@ -47300,7 +47306,7 @@
       Input: inputLight,
       Button: buttonLight
     },
-    self: self$M
+    self: self$N
   });
 
   var rtlStyle$b = cB("input-number", [cM("rtl", `
@@ -47341,12 +47347,12 @@
     }
   };
 
-  function self$L() {
+  function self$M() {
     return commonVars$3;
   }
   const spaceLight = {
     name: "Space",
-    self: self$L
+    self: self$M
   };
 
   var rtlStyle$9 = cB("space", [cM("rtl", `
@@ -47418,7 +47424,7 @@
     }
   };
 
-  function self$K(vars) {
+  function self$L(vars) {
     const {
       containerPrimary,
       elementsQuaternary,
@@ -47434,7 +47440,7 @@
   const themeLight$4 = {
     name: "FloatButtonGroup",
     common: derived,
-    self: self$K
+    self: self$L
   };
 
   const floatButtonDark = {
@@ -47469,7 +47475,7 @@
     }
   };
 
-  function self$J(vars) {
+  function self$K(vars) {
     const {
       containerPrimary,
       textPrimary,
@@ -47498,10 +47504,10 @@
   const themeLight$3 = {
     name: "FloatButton",
     common: derived,
-    self: self$J
+    self: self$K
   };
 
-  function self$I(vars) {
+  function self$J(vars) {
     const {
       heightSmall,
       heightMedium,
@@ -47556,16 +47562,16 @@
   const formLight = {
     name: "Form",
     common: derived,
-    self: self$I
+    self: self$J
   };
 
   const formItemDark = {
     name: "Form",
     common: derived$1,
-    self: self$I
+    self: self$J
   };
 
-  function self$H(vars) {
+  function self$I(vars) {
     const {
       brandPrimary500,
       staticGreen,
@@ -47602,16 +47608,16 @@
   const gradientTextLight = {
     name: "GradientText",
     common: derived,
-    self: self$H
+    self: self$I
   };
 
   const gradientTextDark = {
     name: "GradientText",
     common: derived$1,
-    self: self$H
+    self: self$I
   };
 
-  function self$G(vars) {
+  function self$H(vars) {
     const {
       textSecondary
     } = vars;
@@ -47626,7 +47632,7 @@
       Button: buttonLight,
       Input: inputLight
     },
-    self: self$G
+    self: self$H
   });
 
   const inputNumberDark = {
@@ -47636,10 +47642,10 @@
       Button: buttonDark,
       Input: inputDark
     },
-    self: self$G
+    self: self$H
   };
 
-  function self$F() {
+  function self$G() {
     return {
       inputWidthSmall: "44px",
       inputWidthMedium: "50px",
@@ -47655,7 +47661,7 @@
     peers: {
       Input: inputLight
     },
-    self: self$F
+    self: self$G
   });
 
   const inputOtpDark = {
@@ -47664,7 +47670,7 @@
     peers: {
       Input: inputDark
     },
-    self: self$F
+    self: self$G
   };
 
   var rtlStyle$8 = cB("input-otp", [cM("rtl", `
@@ -47676,7 +47682,7 @@
     style: rtlStyle$8
   };
 
-  function self$E(vars) {
+  function self$F(vars) {
     const {
       textPrimary,
       textQuaternary,
@@ -47722,7 +47728,7 @@
     peers: {
       Scrollbar: scrollbarLight
     },
-    self: self$E
+    self: self$F
   });
 
   const layoutDark = {
@@ -47731,7 +47737,7 @@
     peers: {
       Scrollbar: scrollbarDark
     },
-    self: self$E
+    self: self$F
   };
 
   const rowDark = {
@@ -47768,7 +47774,7 @@
     style: rtlStyle$7
   };
 
-  function self$D(vars) {
+  function self$E(vars) {
     const {
       brandPrimary500,
       staticRed
@@ -47782,16 +47788,16 @@
   const loadingBarLight = {
     name: "LoadingBar",
     common: derived,
-    self: self$D
+    self: self$E
   };
 
   const loadingBarDark = {
     name: "LoadingBar",
     common: derived$1,
-    self: self$D
+    self: self$E
   };
 
-  function self$C(vars) {
+  function self$D(vars) {
     const {
       fontBodyMedium,
       textPrimary,
@@ -47814,7 +47820,7 @@
       Scrollbar: scrollbarLight,
       Code: codeLight
     },
-    self: self$C
+    self: self$D
   });
 
   const logDark = {
@@ -47824,25 +47830,25 @@
       Scrollbar: scrollbarDark,
       Code: codeDark
     },
-    self: self$C
+    self: self$D
   };
 
-  function self$B() {
+  function self$C() {
     return {};
   }
   const marqueeLight = {
     name: "Marquee",
     common: derived,
-    self: self$B
+    self: self$C
   };
 
   const marqueeDark = {
     name: "Marquee",
     common: derived$1,
-    self: self$B
+    self: self$C
   };
 
-  function self$A(vars) {
+  function self$B(vars) {
     const {
       shadowDepth2
     } = vars;
@@ -47857,7 +47863,7 @@
       InternalSelectMenu: internalSelectMenuLight,
       Input: inputLight
     },
-    self: self$A
+    self: self$B
   });
 
   const listDark = {
@@ -47867,7 +47873,7 @@
       InternalSelectMenu: internalSelectMenuDark,
       Input: inputDark
     },
-    self: self$A
+    self: self$B
   };
 
   function createPartialInvertedVars(color, activeItemColor, activeTextColor, groupTextColor) {
@@ -47910,7 +47916,7 @@
       groupTextColorInverted: groupTextColor
     };
   }
-  function self$z(vars) {
+  function self$A(vars) {
     const {
       textSecondary,
       borderRadiusSmall,
@@ -47978,7 +47984,7 @@
       Tooltip: tooltipLight,
       Dropdown: dropdownLight
     },
-    self: self$z
+    self: self$A
   });
 
   const menuDark = {
@@ -47988,10 +47994,10 @@
       Tooltip: tooltipDark,
       Dropdown: dropdownDark
     },
-    self: self$z
+    self: self$A
   };
 
-  function self$y(vars) {
+  function self$z(vars) {
     const {
       transparencyModal,
       containerPrimary,
@@ -48015,7 +48021,7 @@
       Dialog: dialogLight,
       Card: cardLight
     },
-    self: self$y
+    self: self$z
   });
 
   const modalDark = {
@@ -48026,7 +48032,7 @@
       Dialog: dialogDark,
       Card: cardDark$1
     },
-    self: self$y
+    self: self$z
   };
 
   var commonVars$2 = {
@@ -48035,7 +48041,7 @@
     closeBorderRadius: "50px"
   };
 
-  function self$x(vars) {
+  function self$y(vars) {
     const {
       fontWeightStrong,
       lineHeightBodyMedium,
@@ -48168,7 +48174,7 @@
     peers: {
       Scrollbar: scrollbarLight
     },
-    self: self$x
+    self: self$y
   });
 
   const notificationDark = {
@@ -48177,7 +48183,7 @@
     peers: {
       Scrollbar: scrollbarDark
     },
-    self: self$x
+    self: self$y
   };
 
   var rtlStyle$6 = cB("notification", [cM("rtl", `
@@ -48207,7 +48213,7 @@
     style: rtlStyle$6
   };
 
-  function self$w(vars) {
+  function self$x(vars) {
     const {
       fontWeightStrong,
       fontTitleSmall,
@@ -48233,13 +48239,13 @@
   const pageHeaderLight = createTheme$1({
     name: "PageHeader",
     common: derived,
-    self: self$w
+    self: self$x
   });
 
   const pageHeaderDark = {
     name: "PageHeader",
     common: derived$1,
-    self: self$w
+    self: self$x
   };
 
   var rtlStyle$5 = cB("page-header-wrapper", [cM("rtl", [cB("page-header-header", `
@@ -48266,7 +48272,7 @@
     style: rtlStyle$5
   };
 
-  function self$v(vars) {
+  function self$w(vars) {
     const {
       fontBodyMedium,
       staticOrange
@@ -48284,7 +48290,7 @@
       Button: buttonLight,
       Popover: popoverLight
     },
-    self: self$v
+    self: self$w
   });
 
   const popconfirmDark = {
@@ -48294,10 +48300,10 @@
       Button: buttonDark,
       Popover: popoverDark
     },
-    self: self$v
+    self: self$w
   };
 
-  function self$u(vars) {
+  function self$v(vars) {
     const {
       elementsQuinary,
       brandSecondary600
@@ -48313,16 +48319,16 @@
   const themeLight$2 = {
     name: "Rate",
     common: derived,
-    self: self$u
+    self: self$v
   };
 
   const rateDark = {
     name: "Rate",
     common: derived$1,
-    self: self$u
+    self: self$v
   };
 
-  function self$t(vars) {
+  function self$u(vars) {
     const {
       fontHeadingSmall,
       fontHeadingMedium,
@@ -48371,16 +48377,16 @@
   const resultLight = {
     name: "Result",
     common: derived,
-    self: self$t
+    self: self$u
   };
 
   const resultDark = {
     name: "Result",
     common: derived$1,
-    self: self$t
+    self: self$u
   };
 
-  function self$s(vars) {
+  function self$t(vars) {
     const {
       borderRadius,
       opacityDisabled,
@@ -48427,16 +48433,16 @@
   const sliderLight = {
     name: "Slider",
     common: derived,
-    self: self$s
+    self: self$t
   };
 
   const sliderDark = {
     name: "Slider",
     common: derived$1,
-    self: self$s
+    self: self$t
   };
 
-  function self$r(vars) {
+  function self$s(vars) {
     const {
       opacityDisabled,
       elementsPrimary,
@@ -48463,16 +48469,16 @@
   const spinLight = {
     name: "Spin",
     common: derived,
-    self: self$r
+    self: self$s
   };
 
   const spinDark = {
     name: "Spin",
     common: derived$1,
-    self: self$r
+    self: self$s
   };
 
-  function self$q(vars) {
+  function self$r(vars) {
     const {
       fontBodyMedium,
       fontHeadingSmall,
@@ -48494,13 +48500,13 @@
   const statisticLight = {
     name: "Statistic",
     common: derived,
-    self: self$q
+    self: self$r
   };
 
   const statisticDark = {
     name: "Statistic",
     common: derived$1,
-    self: self$q
+    self: self$r
   };
 
   var rtlStyle$4 = cB("statistic", [cM("rtl", `
@@ -48517,7 +48523,7 @@
     style: rtlStyle$4
   };
 
-  function self$p(vars) {
+  function self$q(vars) {
     const {
       fontBodyMedium,
       lineHeightBodyMedium,
@@ -48546,16 +48552,16 @@
   const statusLight = {
     name: "Status",
     common: derived,
-    self: self$p
+    self: self$q
   };
 
   const emptyDark = {
     name: "Status",
     common: derived$1,
-    self: self$p
+    self: self$q
   };
 
-  function self$o(vars) {
+  function self$p(vars) {
     const {
       fontWeightStrong,
       fontBodySmall,
@@ -48632,13 +48638,13 @@
   const stepsLight = {
     name: "Steps",
     common: derived,
-    self: self$o
+    self: self$p
   };
 
   const stepsDark = {
     name: "Steps",
     common: derived$1,
-    self: self$o
+    self: self$p
   };
 
   var rtlStyle$3 = c$1([cB("steps", [cM("rtl", `
@@ -48660,7 +48666,7 @@
     style: rtlStyle$3
   };
 
-  function self$n(vars) {
+  function self$o(vars) {
     const {
       opacityDisabled,
       borderRadius,
@@ -48724,16 +48730,16 @@
   const switchLight = {
     name: "Switch",
     common: derived,
-    self: self$n
+    self: self$o
   };
 
   const switchDark = {
     name: "Switch",
     common: derived$1,
-    self: self$n
+    self: self$o
   };
 
-  function self$m(vars) {
+  function self$n(vars) {
     const {
       fontBodySmall,
       fontBodyMedium,
@@ -48778,13 +48784,13 @@
   const tableLight = {
     name: "Table",
     common: derived,
-    self: self$m
+    self: self$n
   };
 
   const tableDark = {
     name: "Table",
     common: derived$1,
-    self: self$m
+    self: self$n
   };
 
   var rtlStyle$2 = c$1([cB("table", [cM("rtl", `
@@ -48805,7 +48811,7 @@
     style: rtlStyle$2
   };
 
-  function self$l(vars) {
+  function self$m(vars) {
     const {
       borderRadius,
       closeSmall,
@@ -48926,16 +48932,16 @@
   const tabsLight = {
     name: "Tabs",
     common: derived,
-    self: self$l
+    self: self$m
   };
 
   const tabsDark = {
     name: "Tabs",
     common: derived$1,
-    self: self$l
+    self: self$m
   };
 
-  function self$k(vars) {
+  function self$l(vars) {
     const {
       fontBodyMedium,
       textPrimary,
@@ -48952,13 +48958,13 @@
   const thingLight = {
     name: "Thing",
     common: derived,
-    self: self$k
+    self: self$l
   };
 
   const thingDark = {
     name: "Thing",
     common: derived$1,
-    self: self$k
+    self: self$l
   };
 
   var rtlStyle$1 = cB("thing", [cM("rtl", `
@@ -48975,7 +48981,7 @@
     peers: [buttonRtl, spaceRtl]
   };
 
-  function self$j(vars) {
+  function self$k(vars) {
     const {
       fontWeightStrong,
       fontBodyLarge,
@@ -49016,13 +49022,13 @@
   const timelineLight = {
     name: "Timeline",
     common: derived,
-    self: self$j
+    self: self$k
   };
 
   const timelineDark = {
     name: "Timeline",
     common: derived$1,
-    self: self$j
+    self: self$k
   };
 
   var commonVariables = {
@@ -49032,7 +49038,7 @@
     iconMargin: "16px"
   };
 
-  function self$i(vars) {
+  function self$j(vars) {
     const {
       borderRadiusLarge,
       fontBodyLarge,
@@ -49097,16 +49103,16 @@
   const toggleButtonLight = {
     name: "ToggleButton",
     common: derived,
-    self: self$i
+    self: self$j
   };
 
   const toggleButtonDark = {
     name: "ToggleButton",
     common: derived$1,
-    self: self$i
+    self: self$j
   };
 
-  function self$h(vars) {
+  function self$i(vars) {
     const {
       iconMedium,
       fontWeight,
@@ -49176,7 +49182,7 @@
       Empty: emptyLight,
       Button: buttonLight
     },
-    self: self$h
+    self: self$i
   });
 
   const transferDark$1 = {
@@ -49189,10 +49195,10 @@
       Empty: emptyDark$1,
       Button: buttonDark
     },
-    self: self$h
+    self: self$i
   };
 
-  function self$g(vars) {
+  function self$h(vars) {
     const {
       fontBodyMedium,
       lineHeightBodyMedium,
@@ -49230,7 +49236,7 @@
       Scrollbar: scrollbarLight,
       Empty: emptyLight
     },
-    self: self$g
+    self: self$h
   });
 
   const treeDark = {
@@ -49241,7 +49247,7 @@
       Scrollbar: scrollbarDark,
       Empty: emptyDark$1
     },
-    self: self$g
+    self: self$h
   };
 
   var rtlStyle = cB("tree", [cM("rtl", `
@@ -49276,7 +49282,7 @@
     }
   };
 
-  function self$f(vars) {
+  function self$g(vars) {
     const {
       containerPrimary,
       shadowDepth2,
@@ -49304,7 +49310,7 @@
       Empty: emptyLight,
       InternalSelection: internalSelectionLight
     },
-    self: self$f
+    self: self$g
   });
 
   const watermarkDark = {
@@ -49333,7 +49339,7 @@
     }
   });
 
-  function self$e(vars) {
+  function self$f(vars) {
     const {
       elementsSecondary,
       elementsSenary,
@@ -49353,7 +49359,7 @@
     peers: {
       Tooltip: tooltipLight
     },
-    self: self$e
+    self: self$f
   });
 
   const imageDark = {
@@ -49362,7 +49368,7 @@
     peers: {
       Tooltip: tooltipDark
     },
-    self: self$e
+    self: self$f
   };
 
   const prevIcon = /* @__PURE__ */ vue.h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ vue.h(
@@ -49416,7 +49422,7 @@
   };
   const imageContextKey = createInjectionKey("u-image");
 
-  var style$16 = c$1([c$1("body >", [cB("image-container", "position: fixed;")]), cB("image-preview-container", `
+  var style$17 = c$1([c$1("body >", [cB("image-container", "position: fixed;")]), cB("image-preview-container", `
     position: fixed;
     left: 0;
     right: 0;
@@ -49500,7 +49506,7 @@
       const themeRef = useTheme(
         "Image",
         "-image",
-        style$16,
+        style$17,
         imageLight,
         props,
         mergedClsPrefixRef
@@ -50431,7 +50437,7 @@
     }
   });
 
-  var style$15 = c$1([c$1("@keyframes spin-rotate", `
+  var style$16 = c$1([c$1("@keyframes spin-rotate", `
     from {
       transform: rotate(0);
     }
@@ -50535,7 +50541,7 @@
       const themeRef = useTheme(
         "Spin",
         "-spin",
-        style$15,
+        style$16,
         spinLight,
         props,
         mergedClsPrefixRef
@@ -51792,7 +51798,7 @@
       const themeRef = useTheme(
         "Upload",
         "-upload",
-        style$17,
+        style$18,
         uploadLight,
         props,
         mergedClsPrefixRef
@@ -52816,7 +52822,7 @@
     }
   });
 
-  var style$14 = cB("dropdown-menu", `
+  var style$15 = cB("dropdown-menu", `
   transform-origin: var(--v-transform-origin);
   background-color: var(--u-color);
   border-radius: var(--u-border-radius);
@@ -53063,7 +53069,7 @@
       const themeRef = useTheme(
         "Dropdown",
         "-dropdown",
-        style$14,
+        style$15,
         dropdownLight,
         props,
         mergedClsPrefixRef
@@ -53457,7 +53463,7 @@
     }
   });
 
-  var style$13 = cB("chat", `
+  var style$14 = cB("chat", `
   height: 100%;
   background-color: transparent;
   box-sizing: border-box;
@@ -53900,7 +53906,7 @@
     setup(props, { slots }) {
       const UChat = vue.inject(chatInjectionKey, null);
       const { mergedClsPrefixRef } = useConfig(props);
-      const themeRef = UChat?.mergedThemeRef ?? useTheme("Chat", "-chat", style$13, chatLight, props, mergedClsPrefixRef);
+      const themeRef = UChat?.mergedThemeRef ?? useTheme("Chat", "-chat", style$14, chatLight, props, mergedClsPrefixRef);
       const { localeRef } = useLocale("Chat");
       const contextMenuShow = vue.ref(false);
       const contextMenuMessage = vue.ref();
@@ -55161,7 +55167,7 @@
     }
   });
 
-  var style$12 = c$1([cB("select", `
+  var style$13 = c$1([cB("select", `
     z-index: auto;
     outline: none;
     width: 100%;
@@ -55333,7 +55339,7 @@
       const themeRef = useTheme(
         "Select",
         "-select",
-        style$12,
+        style$13,
         selectLight,
         props,
         mergedClsPrefixRef
@@ -56167,7 +56173,7 @@
     setup(props, { slots }) {
       const UChat = vue.inject(chatInjectionKey, null);
       const { mergedClsPrefixRef } = useConfig(props);
-      const themeRef = UChat?.mergedThemeRef ?? useTheme("Chat", "-chat", style$13, chatLight, props, mergedClsPrefixRef);
+      const themeRef = UChat?.mergedThemeRef ?? useTheme("Chat", "-chat", style$14, chatLight, props, mergedClsPrefixRef);
       const { localeRef } = useLocale("Chat");
       const cssVarsRef = vue.computed(() => {
         const {
@@ -56839,7 +56845,7 @@
       const themeRef = useTheme(
         "Chat",
         "-chat",
-        style$13,
+        style$14,
         chatLight,
         props,
         mergedClsPrefixRef
@@ -57166,7 +57172,7 @@
     }
   });
 
-  var style$11 = c$1([cB("code", `
+  var style$12 = c$1([cB("code", `
     font-size: var(--u-font-size);
     font-family: var(--u-font-family);
   `, [cM("show-line-numbers", `
@@ -57337,7 +57343,7 @@
       const themeRef = useTheme(
         "Code",
         "-code",
-        style$11,
+        style$12,
         codeLight,
         props,
         mergedClsPrefixRef
@@ -57475,7 +57481,7 @@
     }
   };
 
-  var style$10 = cB("collapse", `
+  var style$11 = cB("collapse", `
     width: 100%;
     background-color: var(--u-background-color);
     border-radius: var(--u-border-radius);
@@ -57558,7 +57564,7 @@
       const themeRef = useTheme(
         "Collapse",
         "-collapse",
-        style$10,
+        style$11,
         collapseLight,
         props,
         mergedClsPrefixRef
@@ -57900,7 +57906,7 @@
     }
   });
 
-  var style$$ = cB("collapse-transition", {
+  var style$10 = cB("collapse-transition", {
     width: "100%"
   }, [fadeInHeightExpandTransition()]);
 
@@ -57939,7 +57945,7 @@
       const mergedThemeRef = useTheme(
         "CollapseTransition",
         "-collapse-transition",
-        style$$,
+        style$10,
         collapseTransitionLight,
         props,
         mergedClsPrefixRef
@@ -58000,7 +58006,7 @@
     }
   });
 
-  function self$d(vars) {
+  function self$e(vars) {
     const {
       borderRadius,
       borderRadiusSmall,
@@ -58047,7 +58053,7 @@
       Input: inputLight,
       Button: buttonLight
     },
-    self: self$d
+    self: self$e
   });
 
   const colorPickerDark = {
@@ -58057,7 +58063,7 @@
       Input: inputDark,
       Button: buttonDark
     },
-    self: self$d
+    self: self$e
   };
 
   function deriveDefaultValue(modes, showAlpha) {
@@ -59015,7 +59021,7 @@
     }
   });
 
-  var style$_ = c$1([cB("color-picker", `
+  var style$$ = c$1([cB("color-picker", `
     display: inline-block;
     box-sizing: border-box;
     height: var(--u-height);
@@ -59287,7 +59293,7 @@
       const themeRef = useTheme(
         "ColorPicker",
         "-color-picker",
-        style$_,
+        style$$,
         colorPickerLight,
         props,
         mergedClsPrefixRef
@@ -63630,7 +63636,7 @@
     wrapperMargin: "0 0 20px"
   };
 
-  function self$c(vars) {
+  function self$d(vars) {
     const {
       elementsSenary,
       borderRadiusLarge
@@ -63645,17 +63651,17 @@
     name: "Crop",
     common: derived,
     peers: {},
-    self: self$c
+    self: self$d
   });
 
   const cropDark = {
     name: "Crop",
     common: derived$1,
     peers: {},
-    self: self$c
+    self: self$d
   };
 
-  var style$Z = c$1([c$1([c$1(".cropper-container", {
+  var style$_ = c$1([c$1([c$1(".cropper-container", {
     direction: "ltr",
     fontSize: "0",
     lineHeight: "0",
@@ -64045,7 +64051,7 @@
       const themeRef = useTheme(
         "Crop",
         "-crop",
-        style$Z,
+        style$_,
         cropLight,
         props,
         mergedClsPrefixRef
@@ -64171,7 +64177,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);
 `);
 
@@ -64225,7 +64231,7 @@
       const themeRef = useTheme(
         "Popselect",
         "-pop-select",
-        style$Y,
+        style$Z,
         popselectLight,
         UPopselect.props,
         mergedClsPrefixRef
@@ -64475,7 +64481,7 @@
     border: var(--u-button-border-hover);
     color: var(--u-button-icon-color-hover);
   `)];
-  var style$X = cB("pagination", `
+  var style$Y = cB("pagination", `
   display: flex;
   width: 100%;
   justify-content: space-between;
@@ -64823,7 +64829,7 @@
       const themeRef = useTheme(
         "Pagination",
         "-pagination",
-        style$X,
+        style$Y,
         paginationLight,
         props,
         mergedClsPrefixRef
@@ -66099,7 +66105,7 @@
     }
   });
 
-  var style$W = cB("radio", `
+  var style$X = cB("radio", `
   outline: none;
   position: relative;
   user-select: none;
@@ -66248,7 +66254,7 @@
       const themeRef = useTheme(
         "Radio",
         "-radio",
-        style$W,
+        style$X,
         radioLight,
         props,
         radio.mergedClsPrefix
@@ -66432,7 +66438,7 @@
     }
   });
 
-  var style$V = cB("radio-group", `
+  var style$W = cB("radio-group", `
   display: inline-block;
   font-size: var(--u-font-size);
 `, [cE("splitor", `
@@ -66612,7 +66618,7 @@
       const themeRef = useTheme(
         "Radio",
         "-radio-group",
-        style$V,
+        style$W,
         radioLight,
         props,
         mergedClsPrefixRef
@@ -69206,7 +69212,7 @@
   });
 
   const fixedColumnStyle = createFixedColumnStyle();
-  var style$U = c$1([cB("data-table", `
+  var style$V = c$1([cB("data-table", `
     width: 100%;
     font-size: var(--u-font-size);
     display: flex;
@@ -69983,7 +69989,7 @@
     };
   }
 
-  const DROP_HALF_DIVISOR = 2;
+  const DROP_HALF_DIVISOR$1 = 2;
   const DROP_STEP_BIAS = 1;
   const FALLBACK_ORDER = 0;
   const SINGLE_ROW_DRAG_SIZE = 1;
@@ -70105,7 +70111,7 @@
       if (!target) return;
       const rect = target.getBoundingClientRect();
       const offset = event.clientY - rect.top;
-      const position = offset < rect.height / DROP_HALF_DIVISOR ? "before" : "after";
+      const position = offset < rect.height / DROP_HALF_DIVISOR$1 ? "before" : "after";
       droppingRowKeyRef.value = rowKey;
       droppingPositionRef.value = position;
     }
@@ -71049,7 +71055,7 @@
       const themeRef = useTheme(
         "DataTable",
         "-data-table",
-        style$U,
+        style$V,
         dataTableLight,
         props,
         mergedClsPrefixRef
@@ -75477,7 +75483,7 @@
     }
   });
 
-  var style$T = c$1([cB("time-picker", `
+  var style$U = c$1([cB("time-picker", `
     z-index: auto;
     position: relative;
   `, [cB("time-picker-icon", `
@@ -75672,7 +75678,7 @@
       const themeRef = useTheme(
         "TimePicker",
         "-time-picker",
-        style$T,
+        style$U,
         timePickerLight,
         props,
         mergedClsPrefixRef
@@ -76840,7 +76846,7 @@
     }
   });
 
-  var style$S = c$1([cB("date-picker", `
+  var style$T = c$1([cB("date-picker", `
     position: relative;
     z-index: auto;
   `, [cB("date-picker-icon", `
@@ -77549,7 +77555,7 @@
       const themeRef = useTheme(
         "DatePicker",
         "-date-picker",
-        style$S,
+        style$T,
         datePickerLight,
         props,
         mergedClsPrefixRef
@@ -78529,7 +78535,7 @@
     }
   });
 
-  function self$b(vars) {
+  function self$c(vars) {
     const {
       brandPrimary100,
       brandPrimary500,
@@ -78591,7 +78597,7 @@
       Select: internalSelectionLight,
       Scrollbar: scrollbarLight
     },
-    self: self$b
+    self: self$c
   });
 
   const datePickerV2Dark = createTheme$1({
@@ -78603,7 +78609,7 @@
       Select: internalSelectionDark,
       Scrollbar: scrollbarDark
     },
-    self: self$b
+    self: self$c
   });
 
   const datePickerV2InjectionKey = Symbol("datePickerV2");
@@ -79395,7 +79401,7 @@
     }
   });
 
-  var style$R = c$1([cB("date-picker-v2", `
+  var style$S = c$1([cB("date-picker-v2", `
     position: relative;
     z-index: auto;
   `, [cB("date-picker-v2-icon", `
@@ -79833,7 +79839,7 @@
       const themeRef = useTheme(
         "DatePickerV2",
         "-date-picker-v2",
-        style$R,
+        style$S,
         datePickerV2Light,
         props,
         mergedClsPrefixRef
@@ -80477,7 +80483,7 @@
     }
   });
 
-  var style$Q = c$1([cB("descriptions", {
+  var style$R = c$1([cB("descriptions", {
     fontSize: "var(--u-font-size)"
   }, [cB("descriptions-separator", `
       display: inline-block;
@@ -80632,7 +80638,7 @@
       const themeRef = useTheme(
         "Descriptions",
         "-descriptions",
-        style$Q,
+        style$R,
         descriptionsLight,
         props,
         mergedClsPrefixRef
@@ -80974,7 +80980,7 @@
   };
   const dialogPropKeys = keysOf(dialogProps);
 
-  var style$P = c$1([cB("dialog", `
+  var style$Q = c$1([cB("dialog", `
     word-break: break-word;
     position: relative;
     background: var(--u-color);
@@ -81092,7 +81098,7 @@
       const themeRef = useTheme(
         "Dialog",
         "-dialog",
-        style$P,
+        style$Q,
         dialogLight,
         props,
         mergedClsPrefixRef
@@ -81746,7 +81752,7 @@
     }
   });
 
-  var style$O = c$1([cB("modal-container", `
+  var style$P = c$1([cB("modal-container", `
     position: fixed;
     left: 0;
     top: 0;
@@ -81895,7 +81901,7 @@
       const themeRef = useTheme(
         "Modal",
         "-modal",
-        style$O,
+        style$P,
         modalLight,
         props,
         mergedClsPrefixRef
@@ -82369,7 +82375,7 @@
     }
   });
 
-  var style$N = cB("divider", `
+  var style$O = cB("divider", `
   position: relative;
   display: flex;
   width: 100%;
@@ -82440,7 +82446,7 @@
       const themeRef = useTheme(
         "Divider",
         "-divider",
-        style$N,
+        style$O,
         dividerLight,
         props,
         mergedClsPrefixRef
@@ -82906,7 +82912,7 @@
     })];
   }
 
-  var style$M = c$1([cB("drawer", `
+  var style$N = c$1([cB("drawer", `
     word-break: break-word;
     position: absolute;
     pointer-events: all;
@@ -83212,7 +83218,7 @@
       const themeRef = useTheme(
         "Drawer",
         "-drawer",
-        style$M,
+        style$N,
         drawerLight,
         props,
         mergedClsPrefixRef
@@ -83799,7 +83805,7 @@
     }
   });
 
-  var style$L = cB("dynamic-input", {
+  var style$M = cB("dynamic-input", {
     width: "100%"
   }, [cB("dynamic-input-item", `
     margin-bottom: 10px;
@@ -83915,7 +83921,7 @@
       const themeRef = useTheme(
         "DynamicInput",
         "-dynamic-input",
-        style$L,
+        style$M,
         dynamicInputLight,
         props,
         mergedClsPrefixRef
@@ -84439,7 +84445,7 @@
     }
   });
 
-  var style$K = cB("dynamic-tags", [cB("input", {
+  var style$L = cB("dynamic-tags", [cB("input", {
     minWidth: "var(--u-input-width)"
   })]);
 
@@ -84499,7 +84505,7 @@
       const themeRef = useTheme(
         "DynamicTags",
         "-dynamic-tags",
-        style$K,
+        style$L,
         dynamicTagsLight,
         props,
         mergedClsPrefixRef
@@ -84791,7 +84797,7 @@
     }
   });
 
-  var style$J = cB("float-button-group", [cB("float-button", `
+  var style$K = cB("float-button-group", [cB("float-button", `
     position: relative;
   `), cM("square-shape", `
     background-color: var(--u-color);
@@ -84854,7 +84860,7 @@
       const themeRef = useTheme(
         "FloatButtonGroup",
         "-float-button-group",
-        style$J,
+        style$K,
         themeLight$4,
         props,
         mergedClsPrefixRef
@@ -84905,7 +84911,7 @@
     }
   });
 
-  var style$I = cB("float-button", `
+  var style$J = cB("float-button", `
   user-select: none;
   cursor: pointer;
   color: var(--u-text-color);
@@ -85035,7 +85041,7 @@
       const themeRef = useTheme(
         "FloatButton",
         "-float-button",
-        style$I,
+        style$J,
         themeLight$3,
         props,
         mergedClsPrefixRef
@@ -85209,7 +85215,7 @@
   const formInjectionKey = createInjectionKey("u-form");
   const formItemInstsInjectionKey = createInjectionKey("u-form-item-insts");
 
-  var style$H = cB("form", [cM("inline", `
+  var style$I = cB("form", [cM("inline", `
     width: 100%;
     display: inline-flex;
     align-items: flex-start;
@@ -85264,7 +85270,7 @@
     props: formProps,
     setup(props) {
       const { mergedClsPrefixRef } = useConfig(props);
-      useTheme("Form", "-form", style$H, formLight, props, mergedClsPrefixRef);
+      useTheme("Form", "-form", style$I, formLight, props, mergedClsPrefixRef);
       const formItems = {};
       const maxChildLabelWidthRef = vue.ref(void 0);
       const deriveMaxChildLabelWidth = (currentWidth) => {
@@ -86478,7 +86484,7 @@
     })];
   }
 
-  var style$G = cB("form-item", `
+  var style$H = cB("form-item", `
   display: grid;
 `, [cB("form-item-label", `
     grid-area: label;
@@ -86863,7 +86869,7 @@
       const themeRef = useTheme(
         "Form",
         "-form-item",
-        style$G,
+        style$H,
         formLight,
         props,
         mergedClsPrefixRef
@@ -87303,7 +87309,7 @@
       right: percent
     })];
   });
-  var style$F = c$1([cB("row", {
+  var style$G = c$1([cB("row", {
     width: "100%",
     display: "flex",
     flexWrap: "wrap"
@@ -87335,7 +87341,7 @@
     props: rowProps,
     setup(props) {
       const { mergedClsPrefixRef, mergedRtlRef } = useConfig(props);
-      useStyle("-legacy-grid", style$F, mergedClsPrefixRef);
+      useStyle("-legacy-grid", style$G, mergedClsPrefixRef);
       const rtlEnabledRef = useRtl("Row", mergedRtlRef, mergedClsPrefixRef);
       const verticalGutterRef = useMemo(() => {
         const { gutter } = props;
@@ -87681,7 +87687,7 @@
     }
   });
 
-  var style$E = cB("gradient-text", `
+  var style$F = cB("gradient-text", `
   display: inline-block;
   font-weight: var(--u-font-weight);
   -webkit-background-clip: text;
@@ -87739,7 +87745,7 @@
       const themeRef = useTheme(
         "GradientText",
         "-gradient-text",
-        style$E,
+        style$F,
         gradientTextLight,
         props,
         mergedClsPrefixRef
@@ -87803,7 +87809,7 @@
     }
   });
 
-  function self$a(vars) {
+  function self$b(vars) {
     const {
       containerPrimary,
       textPrimary,
@@ -87858,13 +87864,13 @@
   const headerLight = createTheme$1({
     name: "Header",
     common: derived,
-    self: self$a
+    self: self$b
   });
 
   const headerDark = createTheme$1({
     name: "Header",
     common: derived$1,
-    self: vars => self$a(vars)
+    self: vars => self$b(vars)
   });
 
   const SEARCH_DEBOUNCE_MS = 300;
@@ -89268,7 +89274,7 @@
     }
   });
 
-  var style$D = cB("header", `
+  var style$E = cB("header", `
   width: 100%;
   box-sizing: border-box;
   font-size: var(--u-font-size);
@@ -89962,7 +89968,7 @@
       const themeRef = useTheme(
         "Header",
         "-header",
-        style$D,
+        style$E,
         headerLight,
         props,
         mergedClsPrefixRef
@@ -90330,7 +90336,7 @@
     }
   });
 
-  function self$9(vars) {
+  function self$a(vars) {
     const {
       borderRadius,
       fontBodyLarge,
@@ -90370,7 +90376,7 @@
   const heatmapLight = createTheme$1({
     name: "Heatmap",
     common: derived,
-    self: self$9
+    self: self$a
   });
 
   function useLoadingStyleClass(props, themeRef) {
@@ -90519,7 +90525,7 @@
     }
   });
 
-  var style$C = c$1([cB("heatmap", `
+  var style$D = c$1([cB("heatmap", `
     display: flex;
     flex-direction: column;
     max-width: fit-content;
@@ -90793,7 +90799,7 @@
       const themeRef = useTheme(
         "Heatmap",
         "-heatmap",
-        style$C,
+        style$D,
         heatmapLight,
         props,
         mergedClsPrefixRef
@@ -91105,7 +91111,7 @@
     name: "Heatmap",
     common: derived$1,
     self(vars) {
-      const lightSelf = self$9(vars);
+      const lightSelf = self$a(vars);
       return {
         ...lightSelf,
         activeColors: ["#0d4429", "#006d32", "#26a641", "#39d353"],
@@ -91220,7 +91226,7 @@
     }
   });
 
-  function self$8(vars) {
+  function self$9(vars) {
     const {
       elementsPrimary,
       elementsTertiary,
@@ -91246,13 +91252,13 @@
   const iconBarLight = {
     name: "IconBar",
     common: derived,
-    self: self$8
+    self: self$9
   };
 
   const iconBarDark = {
     name: "IconBar",
     common: derived$1,
-    self: self$8
+    self: self$9
   };
 
   const iconBarInjectionKey = createInjectionKey("icon-bar");
@@ -91285,7 +91291,7 @@
     itemSize: [Number, String]
   };
 
-  var style$B = c$1([cB("icon-bar", `
+  var style$C = c$1([cB("icon-bar", `
     justify-content: space-between !important;
     grid-template-columns: repeat(var(--u-icon-bar-cols), var(--u-icon-bar-item-size)) !important;
   `), cB("icon-bar-item-wrapper", `
@@ -91348,7 +91354,7 @@
       const themeRef = useTheme(
         "IconBar",
         "-icon-bar-item",
-        style$B,
+        style$C,
         iconBarLight,
         props,
         mergedClsPrefixRef
@@ -91426,7 +91432,7 @@
       const themeRef = useTheme(
         "IconBar",
         "-icon-bar",
-        style$B,
+        style$C,
         iconBarLight,
         props,
         mergedClsPrefixRef
@@ -91479,7 +91485,7 @@
     }
   });
 
-  function self$7(vars) {
+  function self$8(vars) {
     const {
       brandPrimary500,
       elementsSecondary
@@ -91492,16 +91498,16 @@
   const iconWrapperLight = {
     name: "IconWrapper",
     common: derived,
-    self: self$7
+    self: self$8
   };
 
   const iconDark = {
     name: "IconWrapper",
     common: derived$1,
-    self: self$7
+    self: self$8
   };
 
-  var style$A = cB("icon-wrapper", `
+  var style$B = cB("icon-wrapper", `
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -91553,7 +91559,7 @@
       const themeRef = useTheme(
         "IconWrapper",
         "-icon-wrapper",
-        style$A,
+        style$B,
         iconWrapperLight,
         props,
         mergedClsPrefixRef
@@ -91860,7 +91866,7 @@
     };
   }
 
-  var style$z = c$1([cB("input-number-suffix", `
+  var style$A = c$1([cB("input-number-suffix", `
     display: inline-block;
     margin-right: 10px;
   `), cB("input-number-prefix", `
@@ -91952,7 +91958,7 @@
       const themeRef = useTheme(
         "InputNumber",
         "-input-number",
-        style$z,
+        style$A,
         inputNumberLight,
         props,
         mergedClsPrefixRef
@@ -92600,7 +92606,7 @@
     }
   });
 
-  var style$y = c$1([cB("input-otp", `
+  var style$z = c$1([cB("input-otp", `
     display: flex;
     align-items: center;
     gap: var(--u-gap);
@@ -92650,7 +92656,7 @@
       const themeRef = useTheme(
         "InputOtp",
         "-input-otp",
-        style$y,
+        style$z,
         inputOtpLight,
         props,
         mergedClsPrefixRef
@@ -92938,6 +92944,1308 @@
     }
   });
 
+  const kanbanProps = {
+    columns: {
+      type: Array,
+      default: () => []
+    },
+    data: {
+      type: Array,
+      default: () => []
+    },
+    itemKey: {
+      type: [String, Number, Function],
+      default: "key"
+    },
+    columnField: {
+      type: String,
+      default: "column"
+    },
+    orientation: {
+      type: String,
+      default: "horizontal"
+    },
+    draggable: {
+      type: Boolean,
+      default: true
+    },
+    columnsDraggable: {
+      type: Boolean,
+      default: false
+    },
+    disabled: Boolean,
+    allowDrop: Function,
+    scrollMode: {
+      type: String,
+      default: "board"
+    },
+    scrollThreshold: {
+      type: Number,
+      default: 48
+    },
+    loading: Boolean,
+    emptyProps: Object,
+    columnEmptyText: [String, Function],
+    columnProps: Object,
+    cardProps: Object,
+    "onUpdate:data": [Function, Array],
+    onMove: Function,
+    onColumnsReorder: Function,
+    onDragStart: Function,
+    onDragEnd: Function,
+    onItemClick: Function,
+    onColumnScrollTop: Function,
+    onColumnScrollBottom: Function,
+    onScrollTop: Function,
+    onScrollBottom: Function
+  };
+  const kanbanColumnProps = {
+    column: {
+      type: Object,
+      required: true
+    },
+    items: {
+      type: Array,
+      default: () => []
+    },
+    index: {
+      type: Number,
+      default: 0
+    }
+  };
+  const kanbanCardProps = {
+    item: {
+      type: Object,
+      required: true
+    },
+    column: {
+      type: Object,
+      required: true
+    },
+    index: {
+      type: Number,
+      default: 0
+    },
+    ghost: Boolean
+  };
+
+  function self$7(vars) {
+    const {
+      borderRadiusLarge,
+      surfacePrimary,
+      containerSecondary,
+      elementsQuinary,
+      staticBlack,
+      staticWhite,
+      staticDeepBlue,
+      textPrimary,
+      successColor,
+      warningColor,
+      errorColor,
+      staticErrorAccent
+    } = vars;
+    return {
+      columnWidth: "316px",
+      columnGap: "4px",
+      cardGap: "8px",
+      boardPadding: "4px",
+      columnHeaderPadding: "16px 16px 12px",
+      columnBodyPadding: "8px",
+      columnBackgroundColor: containerSecondary,
+      columnBorderRadius: borderRadiusLarge,
+      columnHeaderColor: textPrimary,
+      countBackgroundColor: staticBlack,
+      countTextColor: staticWhite,
+      statusSuccessHeaderColor: "#eefaf2",
+      statusSuccessCountColor: successColor,
+      statusProgressHeaderColor: "#f0f3fb",
+      statusProgressCountColor: staticDeepBlue,
+      statusPendingHeaderColor: "#fef7f0",
+      statusPendingCountColor: warningColor,
+      statusErrorHeaderColor: "#fef2f1",
+      statusErrorCountColor: staticErrorAccent,
+      columnDraggingOpacity: "0.5",
+      cardBackgroundColor: surfacePrimary,
+      cardBackgroundColorDragging: containerSecondary,
+      cardBorderColorDragging: elementsQuinary,
+      cardBorderRadius: borderRadiusLarge,
+      cardPadding: "16px",
+      cardColor: textPrimary,
+      cardSubColor: "#83888b",
+      cardBoxShadow: "0px 2px 4px 0px rgba(68, 83, 113, 0.05), 0px 0px 8px 0px rgba(68, 83, 113, 0.1)",
+      cardBoxShadowHover: "0px 4px 8px 0px rgba(68, 83, 113, 0.05), 0px 0px 16px 0px rgba(68, 83, 113, 0.1)",
+      cardBoxShadowDragging: "0px 12px 20px 0px rgba(68, 83, 113, 0.05), 0px 0px 20px 0px rgba(68, 83, 113, 0.1)",
+      dropIndicatorColor: containerSecondary,
+      maxReachedColor: errorColor
+    };
+  }
+  const kanbanLight = createTheme$1({
+    name: "Kanban",
+    common: derived,
+    peers: {
+      Empty: emptyLight,
+      Badge: badgeLight
+    },
+    self: self$7
+  });
+
+  const kanbanDark = createTheme$1({
+    name: "Kanban",
+    common: derived$1,
+    peers: {
+      Empty: emptyDark$1,
+      Badge: badgeDark
+    },
+    self: self$7
+  });
+
+  const kanbanInjectionKey = createInjectionKey("u-kanban");
+
+  var _UKanbanCard = vue.defineComponent({
+    name: "KanbanCard",
+    props: kanbanCardProps,
+    setup(props) {
+      const injection = vue.inject(kanbanInjectionKey, null);
+      if (!injection) {
+        warn("kanban", "`UKanbanCard` must be used inside `UKanban`.");
+      }
+      const {
+        mergedClsPrefixRef,
+        getItemKey,
+        draggingItemKeySetRef,
+        isItemDraggable,
+        propsRef
+      } = injection;
+      const itemKeyRef = vue.computed(() => getItemKey(props.item));
+      const draggableRef = vue.computed(
+        () => isItemDraggable(props.item, props.column)
+      );
+      const draggingRef = vue.computed(
+        () => draggingItemKeySetRef.value.has(itemKeyRef.value)
+      );
+      const clickableRef = vue.computed(
+        () => !!propsRef.onItemClick && !props.item.disabled
+      );
+      return {
+        injection,
+        mergedClsPrefix: mergedClsPrefixRef,
+        draggable: draggableRef,
+        dragging: draggingRef,
+        clickable: clickableRef
+      };
+    },
+    render() {
+      const {
+        mergedClsPrefix,
+        item,
+        column,
+        ghost,
+        dragging,
+        draggable,
+        clickable,
+        injection,
+        $slots
+      } = this;
+      let body;
+      if ($slots.card) {
+        body = $slots.card({ item, column, dragging: dragging || ghost });
+      } else if (item.render) {
+        body = item.render(item, column);
+      } else {
+        body = [
+          /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-kanban-card__title` }, render$1(item.title) ?? item.name),
+          item.description ? /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-kanban-card__description` }, render$1(item.description)) : null
+        ];
+      }
+      if (ghost) {
+        return /* @__PURE__ */ vue.h(
+          "div",
+          {
+            class: [
+              `${mergedClsPrefix}-kanban-card`,
+              `${mergedClsPrefix}-kanban-card--ghost`
+            ],
+            "aria-hidden": "true"
+          },
+          body
+        );
+      }
+      return /* @__PURE__ */ vue.h(
+        "div",
+        {
+          class: [
+            `${mergedClsPrefix}-kanban-card`,
+            {
+              [`${mergedClsPrefix}-kanban-card--dragging`]: dragging,
+              [`${mergedClsPrefix}-kanban-card--disabled`]: item.disabled,
+              [`${mergedClsPrefix}-kanban-card--clickable`]: clickable
+            }
+          ],
+          "data-kanban-card-key": String(injection.getItemKey(item)),
+          draggable: draggable || void 0,
+          onDragstart: (event) => injection.handleItemDragStart(event, item),
+          onDragover: (event) => injection.handleItemDragOver(event, item),
+          onDrop: (event) => injection.handleItemDrop(event, item),
+          onDragend: () => injection.handleDragEnd(),
+          onClick: () => {
+            if (clickable) {
+              injection.handleItemClick(item, column);
+            }
+          },
+          ...injection.propsRef.cardProps
+        },
+        body
+      );
+    }
+  });
+
+  var _UKanbanColumn = vue.defineComponent({
+    name: "KanbanColumn",
+    props: kanbanColumnProps,
+    setup(props) {
+      const injection = vue.inject(kanbanInjectionKey, null);
+      if (!injection) {
+        warn("kanban", "`UKanbanColumn` must be used inside `UKanban`.");
+      }
+      const {
+        mergedClsPrefixRef,
+        draggingColumnKeyRef,
+        droppingColumnKeyRef,
+        droppingPositionRef,
+        isColumnDraggable,
+        propsRef
+      } = injection;
+      const columnDraggableRef = vue.computed(
+        () => isColumnDraggable(props.column)
+      );
+      const draggingRef = vue.computed(
+        () => draggingColumnKeyRef.value === props.column.key
+      );
+      const columnDropPositionRef = vue.computed(
+        () => draggingColumnKeyRef.value != null && droppingColumnKeyRef.value === props.column.key ? droppingPositionRef.value : null
+      );
+      const verticalRef = vue.computed(
+        () => propsRef.orientation === "vertical"
+      );
+      const boardScrollRef = vue.computed(
+        () => propsRef.scrollMode === "board"
+      );
+      const maxReachedRef = vue.computed(
+        () => typeof props.column.max === "number" && props.items.length >= props.column.max
+      );
+      const statusRef = vue.computed(
+        () => {
+          const status = props.column.status;
+          return status && status !== "neutral" ? status : null;
+        }
+      );
+      const columnStyleRef = vue.computed(
+        () => statusRef.value ? { backgroundColor: `var(--u-status-${statusRef.value}-header-color)` } : void 0
+      );
+      const countStyleRef = vue.computed(
+        () => statusRef.value && !maxReachedRef.value ? { backgroundColor: `var(--u-status-${statusRef.value}-count-color)` } : void 0
+      );
+      function handleBodyScroll(event) {
+        injection.handleColumnScroll(props.column, event.target);
+      }
+      return {
+        injection,
+        mergedClsPrefix: mergedClsPrefixRef,
+        columnDraggable: columnDraggableRef,
+        dragging: draggingRef,
+        columnDropPosition: columnDropPositionRef,
+        vertical: verticalRef,
+        boardScroll: boardScrollRef,
+        maxReached: maxReachedRef,
+        columnStyle: columnStyleRef,
+        countStyle: countStyleRef,
+        handleBodyScroll
+      };
+    },
+    render() {
+      const {
+        mergedClsPrefix,
+        column,
+        items,
+        injection,
+        columnDraggable,
+        dragging,
+        columnDropPosition,
+        vertical,
+        boardScroll,
+        maxReached,
+        columnStyle,
+        countStyle,
+        $slots
+      } = this;
+      const count = items.length;
+      const emptyText = injection.propsRef.columnEmptyText;
+      const getItemKey = injection.getItemKey;
+      const draggingItem = injection.draggingItemRef.value;
+      const draggingKey = draggingItem ? getItemKey(draggingItem) : null;
+      const columnField = injection.propsRef.columnField ?? "column";
+      const sourceColumnKey = draggingItem ? draggingItem[columnField] : null;
+      const dropColumnKey = injection.droppingColumnKeyRef.value;
+      const dropKey = injection.droppingItemKeyRef.value;
+      const dropPosition = injection.droppingPositionRef.value;
+      const isTarget = !!draggingItem && dropColumnKey === column.key && !column.frozen;
+      const isSameColumnReorder = !!draggingItem && sourceColumnKey === dropColumnKey;
+      const renderCard = (item) => /* @__PURE__ */ vue.h(_UKanbanCard, { key: getItemKey(item), item, column }, { card: $slots.card });
+      const renderGhost = () => /* @__PURE__ */ vue.h(
+        _UKanbanCard,
+        {
+          key: "__kanban-ghost__",
+          ghost: true,
+          item: draggingItem,
+          column
+        },
+        { card: $slots.card }
+      );
+      let cardNodes = [];
+      if (draggingItem && isSameColumnReorder && sourceColumnKey === column.key) {
+        const rest = items.filter((item) => getItemKey(item) !== draggingKey);
+        let insertAt = rest.length;
+        if (dropKey != null) {
+          const anchor = rest.findIndex((item) => getItemKey(item) === dropKey);
+          if (anchor >= 0) {
+            insertAt = dropPosition === "after" ? anchor + 1 : anchor;
+          }
+        }
+        const preview = rest.slice();
+        preview.splice(insertAt, 0, draggingItem);
+        cardNodes = preview.map(renderCard);
+      } else {
+        items.forEach((item) => {
+          const key = getItemKey(item);
+          if (isTarget && dropKey === key && dropPosition === "before") {
+            cardNodes.push(renderGhost());
+          }
+          cardNodes.push(renderCard(item));
+          if (isTarget && dropKey === key && dropPosition === "after") {
+            cardNodes.push(renderGhost());
+          }
+        });
+        if (isTarget && dropKey == null) {
+          cardNodes.push(renderGhost());
+        }
+      }
+      const hasBodyContent = cardNodes.length > 0;
+      return /* @__PURE__ */ vue.h(
+        "div",
+        {
+          class: [
+            `${mergedClsPrefix}-kanban-column`,
+            {
+              [`${mergedClsPrefix}-kanban-column--vertical`]: vertical,
+              [`${mergedClsPrefix}-kanban-column--board-scroll`]: boardScroll,
+              [`${mergedClsPrefix}-kanban-column--dragging`]: dragging,
+              [`${mergedClsPrefix}-kanban-column--drop-before`]: columnDropPosition === "before",
+              [`${mergedClsPrefix}-kanban-column--drop-after`]: columnDropPosition === "after"
+            }
+          ],
+          style: columnStyle,
+          "data-kanban-column-key": String(column.key),
+          onDragover: (event) => injection.handleColumnDragOver(event, column),
+          onDrop: (event) => injection.handleColumnDrop(event, column)
+        },
+        /* @__PURE__ */ vue.h(
+          "div",
+          {
+            class: [
+              `${mergedClsPrefix}-kanban-column__header`,
+              {
+                [`${mergedClsPrefix}-kanban-column__header--draggable`]: columnDraggable
+              }
+            ],
+            draggable: columnDraggable || void 0,
+            onDragstart: (event) => injection.handleColumnDragStart(event, column),
+            onDragend: () => injection.handleDragEnd()
+          },
+          $slots.columnHeader ? $slots.columnHeader({ column, count }) : [
+            /* @__PURE__ */ vue.h("span", { class: `${mergedClsPrefix}-kanban-column__title` }, render$1(column.title)),
+            /* @__PURE__ */ vue.h(
+              "span",
+              {
+                class: [
+                  `${mergedClsPrefix}-kanban-column__count`,
+                  {
+                    [`${mergedClsPrefix}-kanban-column__count--max-reached`]: maxReached
+                  }
+                ],
+                style: countStyle
+              },
+              typeof column.max === "number" ? `${count}/${column.max}` : count
+            )
+          ]
+        ),
+        /* @__PURE__ */ vue.h(
+          "div",
+          {
+            class: [
+              `${mergedClsPrefix}-kanban-column__body`,
+              {
+                [`${mergedClsPrefix}-kanban-column__body--board-scroll`]: boardScroll
+              }
+            ],
+            onScroll: boardScroll ? void 0 : this.handleBodyScroll
+          },
+          hasBodyContent ? cardNodes : /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-kanban-column__empty` }, $slots.columnEmpty ? $slots.columnEmpty({ column }) : typeof emptyText === "function" ? emptyText() : /* @__PURE__ */ vue.h(UEmpty$1, { size: "small", description: emptyText }))
+        ),
+        $slots.columnFooter ? /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-kanban-column__footer` }, $slots.columnFooter({ column })) : null
+      );
+    }
+  });
+
+  var style$y = c$1([cB("kanban", `
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+  `, [cE("board", `
+      padding: var(--u-board-padding);
+      overflow-x: auto;
+      overflow-y: hidden;
+      flex: 1;
+      min-height: 0;
+    `, [cM("vertical", `
+        overflow-x: hidden;
+        overflow-y: auto;
+      `), cM("scroll-board", `
+        overflow-y: auto;
+      `)]), cE("board-track", `
+      display: flex;
+      flex-direction: row;
+      align-items: stretch;
+      gap: var(--u-column-gap);
+      width: max-content;
+      min-width: 100%;
+      min-height: 100%;
+      box-sizing: border-box;
+    `, [cM("vertical", `
+        flex-direction: column;
+        width: 100%;
+        min-height: 0;
+      `)]), cE("empty", `
+      margin: auto;
+    `)]), cB("kanban-column", `
+    display: flex;
+    flex-direction: column;
+    width: var(--u-column-width);
+    flex-shrink: 0;
+    max-height: 100%;
+    background-color: var(--u-column-background-color);
+    border-radius: var(--u-column-border-radius);
+    box-sizing: border-box;
+    transition: opacity .2s var(--u-bezier);
+    position: relative;
+  `, [cM("vertical", `
+      width: 100%;
+    `), cM("board-scroll", `
+      max-height: none;
+    `), cM("dragging", `
+      opacity: var(--u-column-dragging-opacity);
+    `), cM("drop-before", [c$1("&::before", `
+        content: '';
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: -8px;
+        width: 3px;
+        border-radius: 3px;
+        background-color: var(--u-drop-indicator-color);
+      `)]), cM("drop-after", [c$1("&::after", `
+        content: '';
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        right: -8px;
+        width: 3px;
+        border-radius: 3px;
+        background-color: var(--u-drop-indicator-color);
+      `)]), cE("header", `
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 20px;
+      padding: var(--u-column-header-padding);
+      color: var(--u-column-header-color);
+      font-size: 14px;
+      font-weight: 700;
+      line-height: 20px;
+      border-top-left-radius: var(--u-column-border-radius);
+      border-top-right-radius: var(--u-column-border-radius);
+      cursor: default;
+    `, [cM("draggable", `
+        cursor: grab;
+      `)]), cE("title", `
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    `), cE("count", `
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      box-sizing: border-box;
+      min-width: 24px;
+      height: 24px;
+      padding: 2px 8px;
+      border-radius: 100px;
+      background-color: var(--u-count-background-color);
+      color: var(--u-count-text-color);
+      font-size: 14px;
+      font-weight: 600;
+      line-height: 20px;
+    `, [cM("max-reached", `
+        background-color: var(--u-max-reached-color);
+      `)]), cE("body", `
+      display: flex;
+      flex-direction: column;
+      gap: var(--u-card-gap);
+      padding: var(--u-column-body-padding);
+      overflow-y: auto;
+      flex: 1;
+      min-height: 48px;
+    `, [cM("board-scroll", `
+        overflow-y: visible;
+      `)]), cE("footer", `
+      padding: var(--u-column-body-padding);
+      padding-top: 0;
+    `), cE("empty", `
+      padding: 32px 0 64px;
+    `)]), cB("kanban-card", `
+    position: relative;
+    background-color: var(--u-card-background-color);
+    border: 2px solid transparent;
+    border-radius: var(--u-card-border-radius);
+    padding: var(--u-card-padding);
+    color: var(--u-card-color);
+    box-shadow: var(--u-card-box-shadow);
+    box-sizing: border-box;
+    cursor: grab;
+    transition:
+      box-shadow .2s var(--u-bezier),
+      border-color .2s var(--u-bezier),
+      background-color .2s var(--u-bezier);
+  `, [c$1("&:hover", `
+      box-shadow: var(--u-card-box-shadow-hover);
+    `), cM("dragging", `
+      border: 2px dashed var(--u-drop-indicator-color);
+      background-color: var(--u-card-background-color);
+      box-shadow: none;
+      opacity: .6;
+      cursor: grabbing;
+    `), cM("ghost", `
+      border: 2px dashed var(--u-drop-indicator-color);
+      background-color: var(--u-card-background-color);
+      box-shadow: none;
+      opacity: .6;
+      cursor: default;
+      pointer-events: none;
+    `), cM("disabled", `
+      cursor: default;
+    `), cM("clickable", `
+      cursor: pointer;
+    `), cE("title", `
+      color: var(--u-card-color);
+      font-size: 16px;
+      font-weight: 700;
+      line-height: 24px;
+    `), cE("description", `
+      color: var(--u-card-sub-color);
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 20px;
+      margin-top: 2px;
+    `)])]);
+
+  function groupItemsByColumn(columns, data, columnField) {
+    const map = /* @__PURE__ */new Map();
+    for (const column of columns) {
+      map.set(column.key, []);
+    }
+    for (const item of data) {
+      const columnKey = item[columnField];
+      if (!map.has(columnKey)) {
+        map.set(columnKey, []);
+      }
+      map.get(columnKey).push(item);
+    }
+    return map;
+  }
+  function moveItem(data, getKey, columnField, movingKey, toColumn, toIndex) {
+    const sourceIndex = data.findIndex(item => getKey(item) === movingKey);
+    if (sourceIndex < 0) {
+      return null;
+    }
+    const moving = data[sourceIndex];
+    const fromColumn = moving[columnField];
+    const fromIndex = data.filter(item => item[columnField] === fromColumn).findIndex(item => getKey(item) === movingKey);
+    const updatedMoving = {
+      ...moving,
+      [columnField]: toColumn
+    };
+    const rest = data.slice();
+    rest.splice(sourceIndex, 1);
+    const targetColumnItems = rest.filter(item => item[columnField] === toColumn);
+    const clampedIndex = Math.max(0, Math.min(toIndex, targetColumnItems.length));
+    let insertAt;
+    if (targetColumnItems.length === 0) {
+      insertAt = rest.length;
+    } else if (clampedIndex >= targetColumnItems.length) {
+      const anchor = targetColumnItems[targetColumnItems.length - 1];
+      insertAt = rest.findIndex(item => getKey(item) === getKey(anchor)) + 1;
+    } else {
+      const anchor = targetColumnItems[clampedIndex];
+      insertAt = rest.findIndex(item => getKey(item) === getKey(anchor));
+    }
+    rest.splice(insertAt, 0, updatedMoving);
+    return {
+      data: rest,
+      item: updatedMoving,
+      from: {
+        column: fromColumn,
+        index: fromIndex
+      },
+      to: {
+        column: toColumn,
+        index: clampedIndex
+      }
+    };
+  }
+  function reorderColumns(columns, movingKey, targetKey, position) {
+    if (movingKey === targetKey) {
+      return null;
+    }
+    const sourceIndex = columns.findIndex(column => column.key === movingKey);
+    const targetIndex = columns.findIndex(column => column.key === targetKey);
+    if (sourceIndex < 0 || targetIndex < 0) {
+      return null;
+    }
+    const next = columns.slice();
+    const [moving] = next.splice(sourceIndex, 1);
+    const anchorIndex = next.findIndex(column => column.key === targetKey);
+    const insertAt = position === "after" ? anchorIndex + 1 : anchorIndex;
+    next.splice(insertAt, 0, moving);
+    return next;
+  }
+
+  const DROP_HALF_DIVISOR = 2;
+  function useKanbanDrag(deps) {
+    const {
+      dataRef,
+      columnsRef,
+      columnFieldRef,
+      orientationRef,
+      getItemKey,
+      isItemDraggable,
+      isColumnDraggable,
+      allowDropRef
+    } = deps;
+    const draggingItemKeySetRef = vue.ref(/* @__PURE__ */new Set());
+    const draggingItemRef = vue.ref(null);
+    const draggingColumnKeyRef = vue.ref(null);
+    const droppingColumnKeyRef = vue.ref(null);
+    const droppingItemKeyRef = vue.ref(null);
+    const droppingPositionRef = vue.ref(null);
+    const columnByKeyRef = vue.computed(() => {
+      const map = /* @__PURE__ */new Map();
+      for (const column of columnsRef.value) {
+        map.set(column.key, column);
+      }
+      return map;
+    });
+    function resetDropState() {
+      droppingColumnKeyRef.value = null;
+      droppingItemKeyRef.value = null;
+      droppingPositionRef.value = null;
+    }
+    function handleDragEnd() {
+      draggingItemKeySetRef.value = /* @__PURE__ */new Set();
+      draggingItemRef.value = null;
+      draggingColumnKeyRef.value = null;
+      resetDropState();
+    }
+    function getColumnOf(item) {
+      return columnByKeyRef.value.get(item[columnFieldRef.value]);
+    }
+    function resolvePosition(event, target) {
+      const rect = target.getBoundingClientRect();
+      if (orientationRef.value === "vertical") {
+        const offset2 = event.clientX - rect.left;
+        return offset2 < rect.width / DROP_HALF_DIVISOR ? "before" : "after";
+      }
+      const offset = event.clientY - rect.top;
+      return offset < rect.height / DROP_HALF_DIVISOR ? "before" : "after";
+    }
+    function handleItemDragStart(event, item) {
+      const column = getColumnOf(item);
+      if (!column || !isItemDraggable(item, column)) {
+        event.preventDefault();
+        return;
+      }
+      draggingItemKeySetRef.value = /* @__PURE__ */new Set([getItemKey(item)]);
+      draggingItemRef.value = item;
+      draggingColumnKeyRef.value = null;
+      if (event.dataTransfer) {
+        event.dataTransfer.effectAllowed = "move";
+        event.dataTransfer.setData("text/plain", String(getItemKey(item)));
+      }
+      deps.emitDragStart({
+        type: "item",
+        item,
+        column
+      });
+    }
+    function handleItemDragOver(event, item) {
+      if (!draggingItemKeySetRef.value.size) {
+        return;
+      }
+      event.stopPropagation();
+      event.preventDefault();
+      if (event.dataTransfer) {
+        event.dataTransfer.dropEffect = "move";
+      }
+      const column = getColumnOf(item);
+      if (column?.frozen) {
+        resetDropState();
+        return;
+      }
+      droppingColumnKeyRef.value = item[columnFieldRef.value];
+      if (draggingItemKeySetRef.value.has(getItemKey(item))) {
+        return;
+      }
+      const target = event.currentTarget;
+      if (!target) {
+        return;
+      }
+      droppingItemKeyRef.value = getItemKey(item);
+      droppingPositionRef.value = resolvePosition(event, target);
+    }
+    function handleItemDrop(event, item) {
+      if (!draggingItemKeySetRef.value.size) {
+        return;
+      }
+      event.stopPropagation();
+      event.preventDefault();
+      finishItemDrop(item[columnFieldRef.value]);
+    }
+    function handleColumnDragStart(event, column) {
+      if (!isColumnDraggable(column)) {
+        event.preventDefault();
+        return;
+      }
+      draggingColumnKeyRef.value = column.key;
+      draggingItemKeySetRef.value = /* @__PURE__ */new Set();
+      if (event.dataTransfer) {
+        event.dataTransfer.effectAllowed = "move";
+        event.dataTransfer.setData("text/plain", String(column.key));
+      }
+      deps.emitDragStart({
+        type: "column",
+        column
+      });
+    }
+    function handleColumnDragOver(event, column) {
+      if (draggingColumnKeyRef.value != null) {
+        event.preventDefault();
+        if (event.dataTransfer) {
+          event.dataTransfer.dropEffect = "move";
+        }
+        const target = event.currentTarget;
+        droppingColumnKeyRef.value = column.key;
+        droppingItemKeyRef.value = null;
+        droppingPositionRef.value = target ? resolvePosition(event, target) : null;
+        return;
+      }
+      if (draggingItemKeySetRef.value.size) {
+        if (column.frozen) {
+          return;
+        }
+        event.preventDefault();
+        if (event.dataTransfer) {
+          event.dataTransfer.dropEffect = "move";
+        }
+        if (droppingColumnKeyRef.value !== column.key) {
+          droppingColumnKeyRef.value = column.key;
+          droppingItemKeyRef.value = null;
+          droppingPositionRef.value = null;
+        }
+      }
+    }
+    function handleColumnDrop(event, column) {
+      event.preventDefault();
+      if (draggingColumnKeyRef.value != null) {
+        const next = reorderColumns(columnsRef.value, draggingColumnKeyRef.value, column.key, droppingPositionRef.value ?? "before");
+        const movedColumn = columnByKeyRef.value.get(draggingColumnKeyRef.value);
+        handleDragEnd();
+        if (next && movedColumn) {
+          deps.emitColumnsReorder(next);
+          deps.emitDragEnd({
+            type: "column",
+            column: movedColumn
+          });
+        }
+        return;
+      }
+      finishItemDrop(column.key);
+    }
+    function finishItemDrop(targetColumnKey) {
+      const draggingKey = draggingItemKeySetRef.value.values().next().value;
+      const targetColumn = columnByKeyRef.value.get(targetColumnKey);
+      if (draggingKey === void 0 || !targetColumn || targetColumn.frozen) {
+        handleDragEnd();
+        return;
+      }
+      const columnField = columnFieldRef.value;
+      const targetIndex = computeTargetIndex(targetColumnKey, draggingKey);
+      const result = moveItem(dataRef.value, getItemKey, columnField, draggingKey, targetColumnKey, targetIndex);
+      if (!result) {
+        handleDragEnd();
+        return;
+      }
+      const ctx = {
+        item: result.item,
+        from: result.from,
+        to: result.to
+      };
+      if (ctx.from.column === ctx.to.column && ctx.from.index === ctx.to.index) {
+        handleDragEnd();
+        return;
+      }
+      if (ctx.from.column !== ctx.to.column && typeof targetColumn.max === "number") {
+        const targetCount = dataRef.value.filter(item => item[columnField] === targetColumnKey).length;
+        if (targetCount >= targetColumn.max) {
+          handleDragEnd();
+          return;
+        }
+      }
+      if (allowDropRef.value && !allowDropRef.value(ctx)) {
+        handleDragEnd();
+        return;
+      }
+      const movedColumn = columnByKeyRef.value.get(ctx.from.column);
+      handleDragEnd();
+      deps.emitUpdateData(result.data);
+      deps.emitMove(ctx);
+      if (movedColumn) {
+        deps.emitDragEnd({
+          type: "item",
+          item: ctx.item,
+          column: movedColumn
+        });
+      }
+    }
+    function computeTargetIndex(targetColumnKey, draggingKey) {
+      const columnField = columnFieldRef.value;
+      const columnItems = dataRef.value.filter(item => item[columnField] === targetColumnKey && getItemKey(item) !== draggingKey);
+      const dropItemKey = droppingItemKeyRef.value;
+      if (dropItemKey == null) {
+        return columnItems.length;
+      }
+      const index = columnItems.findIndex(item => getItemKey(item) === dropItemKey);
+      if (index < 0) {
+        return columnItems.length;
+      }
+      return droppingPositionRef.value === "after" ? index + 1 : index;
+    }
+    return {
+      draggingItemKeySetRef,
+      draggingItemRef,
+      draggingColumnKeyRef,
+      droppingColumnKeyRef,
+      droppingItemKeyRef,
+      droppingPositionRef,
+      handleItemDragStart,
+      handleItemDragOver,
+      handleItemDrop,
+      handleColumnDragStart,
+      handleColumnDragOver,
+      handleColumnDrop,
+      handleDragEnd
+    };
+  }
+
+  var _UKanban = vue.defineComponent({
+    name: "Kanban",
+    props: {
+      ...useTheme.props,
+      ...kanbanProps
+    },
+    emits: [
+      "update:data",
+      "move",
+      "columns-reorder",
+      "drag-start",
+      "drag-end",
+      "item-click",
+      "column-scroll-top",
+      "column-scroll-bottom",
+      "scroll-top",
+      "scroll-bottom"
+    ],
+    setup(props, { emit, expose }) {
+      const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
+      const themeRef = useTheme(
+        "Kanban",
+        "-kanban",
+        style$y,
+        kanbanLight,
+        props,
+        mergedClsPrefixRef
+      );
+      const selfElRef = vue.ref(null);
+      const uncontrolledDataRef = vue.ref(props.data);
+      const uncontrolledColumnsRef = vue.ref(props.columns);
+      const mergedDataRef = vue.computed(
+        () => uncontrolledDataRef.value
+      );
+      const mergedColumnsRef = vue.computed(
+        () => uncontrolledColumnsRef.value
+      );
+      const columnFieldRef = vue.computed(() => props.columnField);
+      const orientationRef = vue.computed(() => props.orientation);
+      const allowDropRef = vue.computed(
+        () => props.allowDrop
+      );
+      const cssVarsRef = vue.computed(() => {
+        const {
+          common: { cubicBezierEaseInOut },
+          self: {
+            columnWidth,
+            columnGap,
+            cardGap,
+            boardPadding,
+            columnHeaderPadding,
+            columnBodyPadding,
+            columnBackgroundColor,
+            columnBorderRadius,
+            columnHeaderColor,
+            countBackgroundColor,
+            countTextColor,
+            statusSuccessHeaderColor,
+            statusSuccessCountColor,
+            statusProgressHeaderColor,
+            statusProgressCountColor,
+            statusPendingHeaderColor,
+            statusPendingCountColor,
+            statusErrorHeaderColor,
+            statusErrorCountColor,
+            columnDraggingOpacity,
+            cardBackgroundColor,
+            cardBackgroundColorDragging,
+            cardBorderColorDragging,
+            cardBorderRadius,
+            cardPadding,
+            cardColor,
+            cardSubColor,
+            cardBoxShadow,
+            cardBoxShadowHover,
+            cardBoxShadowDragging,
+            dropIndicatorColor,
+            maxReachedColor
+          }
+        } = themeRef.value;
+        return {
+          "--u-bezier": cubicBezierEaseInOut,
+          "--u-column-width": columnWidth,
+          "--u-column-gap": columnGap,
+          "--u-card-gap": cardGap,
+          "--u-board-padding": boardPadding,
+          "--u-column-header-padding": columnHeaderPadding,
+          "--u-column-body-padding": columnBodyPadding,
+          "--u-column-background-color": columnBackgroundColor,
+          "--u-column-border-radius": columnBorderRadius,
+          "--u-column-header-color": columnHeaderColor,
+          "--u-count-background-color": countBackgroundColor,
+          "--u-count-text-color": countTextColor,
+          "--u-status-success-header-color": statusSuccessHeaderColor,
+          "--u-status-success-count-color": statusSuccessCountColor,
+          "--u-status-progress-header-color": statusProgressHeaderColor,
+          "--u-status-progress-count-color": statusProgressCountColor,
+          "--u-status-pending-header-color": statusPendingHeaderColor,
+          "--u-status-pending-count-color": statusPendingCountColor,
+          "--u-status-error-header-color": statusErrorHeaderColor,
+          "--u-status-error-count-color": statusErrorCountColor,
+          "--u-column-dragging-opacity": columnDraggingOpacity,
+          "--u-card-background-color": cardBackgroundColor,
+          "--u-card-background-color-dragging": cardBackgroundColorDragging,
+          "--u-card-border-color-dragging": cardBorderColorDragging,
+          "--u-card-border-radius": cardBorderRadius,
+          "--u-card-padding": cardPadding,
+          "--u-card-color": cardColor,
+          "--u-card-sub-color": cardSubColor,
+          "--u-card-box-shadow": cardBoxShadow,
+          "--u-card-box-shadow-hover": cardBoxShadowHover,
+          "--u-card-box-shadow-dragging": cardBoxShadowDragging,
+          "--u-drop-indicator-color": dropIndicatorColor,
+          "--u-max-reached-color": maxReachedColor
+        };
+      });
+      const drag = useKanbanDrag({
+        dataRef: mergedDataRef,
+        columnsRef: mergedColumnsRef,
+        columnFieldRef,
+        orientationRef,
+        getItemKey,
+        isItemDraggable,
+        isColumnDraggable,
+        allowDropRef,
+        emitUpdateData: doUpdateData,
+        emitMove,
+        emitColumnsReorder,
+        emitDragStart,
+        emitDragEnd
+      });
+      const themeClassHandle = inlineThemeDisabled ? useThemeClass("kanban", void 0, cssVarsRef, props) : void 0;
+      const handleItemClick = (item, column) => {
+        props.onItemClick?.(item, column);
+        emit("item-click", item, column);
+      };
+      const buildScrollContext = (target, column) => ({
+        column,
+        scrollTop: target.scrollTop,
+        scrollHeight: target.scrollHeight,
+        clientHeight: target.clientHeight
+      });
+      const handleColumnScroll = (column, target) => {
+        const { scrollTop, scrollHeight, clientHeight } = target;
+        const threshold = props.scrollThreshold;
+        const ctx = buildScrollContext(target, column.key);
+        if (scrollTop <= threshold) {
+          props.onColumnScrollTop?.(ctx);
+          emit("column-scroll-top", ctx);
+        }
+        if (scrollHeight - scrollTop - clientHeight <= threshold) {
+          props.onColumnScrollBottom?.(ctx);
+          emit("column-scroll-bottom", ctx);
+        }
+      };
+      const handleBoardScroll = (event) => {
+        const target = event.target;
+        const { scrollTop, scrollHeight, clientHeight } = target;
+        const threshold = props.scrollThreshold;
+        const ctx = buildScrollContext(target);
+        if (scrollTop <= threshold) {
+          props.onScrollTop?.(ctx);
+          emit("scroll-top", ctx);
+        }
+        if (scrollHeight - scrollTop - clientHeight <= threshold) {
+          props.onScrollBottom?.(ctx);
+          emit("scroll-bottom", ctx);
+        }
+      };
+      const findColumnEl = (columnKey) => {
+        if (!selfElRef.value) {
+          return null;
+        }
+        return selfElRef.value.querySelector(
+          `[data-kanban-column-key="${String(columnKey)}"]`
+        );
+      };
+      const exposed = {
+        moveItem(key, to) {
+          const result = moveItem(
+            mergedDataRef.value,
+            getItemKey,
+            columnFieldRef.value,
+            key,
+            to.column,
+            to.index ?? Number.MAX_SAFE_INTEGER
+          );
+          if (result) {
+            doUpdateData(result.data);
+          }
+        },
+        addItem(item, index) {
+          const next = mergedDataRef.value.slice();
+          next.splice(index ?? next.length, 0, item);
+          doUpdateData(next);
+        },
+        removeItem(key) {
+          doUpdateData(
+            mergedDataRef.value.filter((item) => getItemKey(item) !== key)
+          );
+        },
+        scrollToColumn(columnKey) {
+          findColumnEl(columnKey)?.scrollIntoView({
+            behavior: "smooth",
+            inline: "nearest",
+            block: "nearest"
+          });
+        },
+        scrollColumnToBottom(columnKey) {
+          const body = findColumnEl(columnKey)?.querySelector(
+            `.${mergedClsPrefixRef.value}-kanban-column__body`
+          );
+          if (body) {
+            body.scrollTop = body.scrollHeight;
+          }
+        }
+      };
+      expose(exposed);
+      function getItemKey(item) {
+        const { itemKey } = props;
+        if (typeof itemKey === "function") {
+          return itemKey(item);
+        }
+        return item[itemKey];
+      }
+      function isItemDraggable(item, column) {
+        return props.draggable && !props.disabled && !item.disabled && !column.frozen;
+      }
+      function isColumnDraggable(column) {
+        return props.columnsDraggable && !props.disabled && !column.disabled;
+      }
+      function doUpdateData(next) {
+        uncontrolledDataRef.value = next;
+        emit("update:data", next);
+      }
+      function doUpdateColumns(next) {
+        uncontrolledColumnsRef.value = next;
+      }
+      function emitMove(ctx) {
+        props.onMove?.(ctx);
+        emit("move", ctx);
+      }
+      function emitColumnsReorder(columns) {
+        doUpdateColumns(columns);
+        props.onColumnsReorder?.(columns);
+        emit("columns-reorder", columns);
+      }
+      function emitDragStart(ctx) {
+        props.onDragStart?.(ctx);
+        emit("drag-start", ctx);
+      }
+      function emitDragEnd(ctx) {
+        props.onDragEnd?.(ctx);
+        emit("drag-end", ctx);
+      }
+      vue.provide(kanbanInjectionKey, {
+        mergedClsPrefixRef,
+        mergedThemeRef: themeRef,
+        propsRef: props,
+        getItemKey,
+        draggingItemKeySetRef: drag.draggingItemKeySetRef,
+        draggingItemRef: drag.draggingItemRef,
+        draggingColumnKeyRef: drag.draggingColumnKeyRef,
+        droppingColumnKeyRef: drag.droppingColumnKeyRef,
+        droppingItemKeyRef: drag.droppingItemKeyRef,
+        droppingPositionRef: drag.droppingPositionRef,
+        handleItemDragStart: drag.handleItemDragStart,
+        handleItemDragOver: drag.handleItemDragOver,
+        handleItemDrop: drag.handleItemDrop,
+        handleColumnDragStart: drag.handleColumnDragStart,
+        handleColumnDragOver: drag.handleColumnDragOver,
+        handleColumnDrop: drag.handleColumnDrop,
+        handleDragEnd: drag.handleDragEnd,
+        handleItemClick,
+        handleColumnScroll,
+        isItemDraggable,
+        isColumnDraggable
+      });
+      vue.watch(
+        () => props.data,
+        (value) => {
+          uncontrolledDataRef.value = value;
+        }
+      );
+      vue.watch(
+        () => props.columns,
+        (value) => {
+          uncontrolledColumnsRef.value = value;
+        }
+      );
+      return {
+        selfElRef,
+        mergedClsPrefix: mergedClsPrefixRef,
+        mergedColumns: mergedColumnsRef,
+        mergedData: mergedDataRef,
+        columnFieldValue: columnFieldRef,
+        handleBoardScroll,
+        cssVars: inlineThemeDisabled ? void 0 : cssVarsRef,
+        themeClass: themeClassHandle?.themeClass,
+        onRender: themeClassHandle?.onRender
+      };
+    },
+    render() {
+      const {
+        mergedClsPrefix,
+        mergedColumns,
+        mergedData,
+        columnFieldValue,
+        orientation,
+        scrollMode,
+        loading,
+        emptyProps,
+        $slots
+      } = this;
+      this.onRender?.();
+      const grouped = groupItemsByColumn(
+        mergedColumns,
+        mergedData,
+        columnFieldValue
+      );
+      const isEmpty = !mergedColumns.length;
+      return /* @__PURE__ */ vue.h(
+        "div",
+        {
+          ref: "selfElRef",
+          class: [`${mergedClsPrefix}-kanban`, this.themeClass],
+          style: this.cssVars
+        },
+        isEmpty ? /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-kanban__empty` }, $slots.empty ? $slots.empty() : /* @__PURE__ */ vue.h(UEmpty$1, { size: "large", ...emptyProps })) : /* @__PURE__ */ vue.h(
+          "div",
+          {
+            class: [
+              `${mergedClsPrefix}-kanban__board`,
+              {
+                [`${mergedClsPrefix}-kanban__board--vertical`]: orientation === "vertical",
+                [`${mergedClsPrefix}-kanban__board--scroll-board`]: scrollMode === "board"
+              }
+            ],
+            "aria-busy": loading || void 0,
+            onScroll: scrollMode === "board" ? this.handleBoardScroll : void 0
+          },
+          /* @__PURE__ */ vue.h(
+            "div",
+            {
+              class: [
+                `${mergedClsPrefix}-kanban__board-track`,
+                {
+                  [`${mergedClsPrefix}-kanban__board-track--vertical`]: orientation === "vertical"
+                }
+              ]
+            },
+            mergedColumns.map(
+              (column, index) => $slots.column ? $slots.column({
+                column,
+                items: grouped.get(column.key) ?? [],
+                index
+              }) : /* @__PURE__ */ vue.h(
+                _UKanbanColumn,
+                {
+                  key: column.key,
+                  column,
+                  items: grouped.get(column.key) ?? [],
+                  index
+                },
+                {
+                  columnHeader: $slots.columnHeader,
+                  columnFooter: $slots.columnFooter,
+                  columnEmpty: $slots.columnEmpty,
+                  card: $slots.card
+                }
+              )
+            )
+          )
+        )
+      );
+    }
+  });
+
   const layoutSiderInjectionKey = createInjectionKey("u-layout-sider");
   const positionProp = {
     type: String,
@@ -112767,6 +114075,9 @@
   const UInputGroupLabel = wrap(_UInputGroupLabel);
   const UInputNumber = wrap(_UInputNumber);
   const UInputOtp = wrap(_UInputOtp);
+  const UKanban = wrap(_UKanban);
+  const UKanbanCard = wrap(_UKanbanCard);
+  const UKanbanColumn = wrap(_UKanbanColumn);
   const ULayout = wrap(_ULayout);
   const ULayoutContent = wrap(_ULayoutContent);
   const ULayoutFooter = wrap(_ULayoutFooter);
@@ -112959,6 +114270,9 @@
     UInputGroupLabel: UInputGroupLabel,
     UInputNumber: UInputNumber,
     UInputOtp: UInputOtp,
+    UKanban: UKanban,
+    UKanbanCard: UKanbanCard,
+    UKanbanColumn: UKanbanColumn,
     ULayout: ULayout,
     ULayoutContent: ULayoutContent,
     ULayoutFooter: ULayoutFooter,
@@ -113142,6 +114456,9 @@
     isGroupOption: isGroupOption,
     isLeafMenuOption: isLeafMenuOption,
     isNotNull: isNotNull,
+    kanbanDark: kanbanDark,
+    kanbanLight: kanbanLight,
+    kanbanProps: kanbanProps,
     layoutContentProps: layoutProps,
     layoutFooterProps: layoutFooterProps,
     layoutHeaderProps: headerProps,
@@ -113246,7 +114563,7 @@
     });
   }
 
-  var version = "2.0.9";
+  var version = "2.1.1";
 
   function create({
     componentPrefix = "U",
@@ -113305,6 +114622,7 @@
     AccountOption: accountOptionLight,
     ActionCard: actionCardLight,
     MappingCard: mappingCardLight,
+    Kanban: kanbanLight,
     Alert: alertLight,
     Anchor: anchorLight,
     AutoComplete: autoCompleteLight,
@@ -113927,6 +115245,7 @@
     AccountOption: accountOptionDark,
     ActionCard: actionCardDark,
     MappingCard: mappingCardDark,
+    Kanban: kanbanDark,
     Alert: alertDark,
     Anchor: anchorDark,
     AutoComplete: autoCompleteDark,
@@ -114149,6 +115468,9 @@
   exports.UInputGroupLabel = UInputGroupLabel;
   exports.UInputNumber = UInputNumber;
   exports.UInputOtp = UInputOtp;
+  exports.UKanban = UKanban;
+  exports.UKanbanCard = UKanbanCard;
+  exports.UKanbanColumn = UKanbanColumn;
   exports.ULayout = ULayout;
   exports.ULayoutContent = ULayoutContent;
   exports.ULayoutFooter = ULayoutFooter;
@@ -114386,6 +115708,9 @@
   exports.isGroupOption = isGroupOption;
   exports.isLeafMenuOption = isLeafMenuOption;
   exports.isNotNull = isNotNull;
+  exports.kanbanDark = kanbanDark;
+  exports.kanbanLight = kanbanLight;
+  exports.kanbanProps = kanbanProps;
   exports.layoutContentProps = layoutProps;
   exports.layoutDark = layoutDark;
   exports.layoutFooterProps = layoutFooterProps;