@uzum-tech/ui 2.1.3 → 2.2.0

package/dist/index.js

@@ -3412,7 +3412,7 @@
   }
 
   /* eslint-disable @typescript-eslint/no-non-null-assertion */
-  const style$1Y = c([c('.v-binder-follower-container', {
+  const style$1Z = c([c('.v-binder-follower-container', {
     position: 'absolute',
     left: '0',
     right: '0',
@@ -3491,7 +3491,7 @@
         }
       });
       const ssrAdapter = useSsrAdapter();
-      style$1Y.mount({
+      style$1Z.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$1X = c('[v-hidden]', {
+  const style$1Y = c('[v-hidden]', {
     display: 'none!important'
   });
   var VOverflow = vue.defineComponent({
@@ -5064,7 +5064,7 @@
         }
       }
       const ssrAdapter = useSsrAdapter();
-      style$1X.mount({
+      style$1Y.mount({
         id: 'vueuc/overflow',
         head: true,
         anchorMetaName: cssrAnchorMetaName$1,
@@ -5446,6 +5446,14 @@
     return `${top} ${left} ${bottom} ${right}`;
   }
 
+  function copyToClipboard(text) {
+    const clipboard = globalThis.navigator?.clipboard;
+    if (!clipboard?.writeText) {
+      return Promise.reject(new Error("Clipboard API is unavailable"));
+    }
+    return clipboard.writeText(text);
+  }
+
   function download$1(url, name) {
     if (!url) return;
     const a = document.createElement("a");
@@ -5880,6 +5888,9 @@
     };
   }
 
+  const formInjectionKey = createInjectionKey("u-form");
+  const formItemInstsInjectionKey = createInjectionKey("u-form-item-insts");
+
   const formItemInjectionKey = createInjectionKey("u-form-item");
   function useFormItem(props, {
     defaultSize = "medium",
@@ -5887,6 +5898,7 @@
     mergedDisabled
   } = {}) {
     const UFormItem = vue.inject(formItemInjectionKey, null);
+    const UForm = vue.inject(formInjectionKey, null);
     vue.provide(formItemInjectionKey, null);
     const mergedSizeRef = vue.computed(mergedSize ? () => mergedSize(UFormItem) : () => {
       const {
@@ -5913,6 +5925,9 @@
       if (UFormItem) {
         return UFormItem.disabled.value;
       }
+      if (UForm) {
+        return UForm.props.disabled;
+      }
       return false;
     });
     const mergedStatusRef = vue.computed(() => {
@@ -14069,7 +14084,7 @@
     builtinThemeOverrides: Object
   };
 
-  var style$1W = cB("base-icon", `
+  var style$1X = cB("base-icon", `
   height: 1em;
   width: 1em;
   line-height: 1em;
@@ -14105,7 +14120,7 @@
       onMouseup: Function
     },
     setup(props) {
-      useStyle("-base-icon", style$1W, vue.toRef(props, "clsPrefix"));
+      useStyle("-base-icon", style$1X, vue.toRef(props, "clsPrefix"));
     },
     render() {
       return /* @__PURE__ */ vue.h(
@@ -14133,10 +14148,14 @@
     component: Object,
     name: String,
     pack: String,
+    async: {
+      type: Boolean,
+      default: void 0
+    },
     onClick: Function
   };
 
-  var style$1V = cB("icon", `
+  var style$1W = cB("icon", `
   height: 1em;
   width: 1em;
   line-height: 1em;
@@ -14322,7 +14341,7 @@
     boxShadow2: "0px 20px 80px 0px rgba(0, 0, 0, 0.07)"
   };
 
-  function self$1C(vars) {
+  function self$1D(vars) {
     const {
       elementsPrimary
     } = vars;
@@ -14338,15 +14357,16 @@
   const iconLight = {
     name: "Icon",
     common: derived,
-    self: self$1C
+    self: self$1D
   };
 
   const iconDark$1 = {
     name: "Icon",
     common: derived$1,
-    self: self$1C
+    self: self$1D
   };
 
+  const FALLBACK_ICON = "&#65533";
   const UIconImpl = vue.defineComponent({
     _n_icon__: true,
     name: "Icon",
@@ -14357,7 +14377,7 @@
         mergedIconPacksRef,
         inlineThemeDisabled
       } = useConfig(props);
-      const themeRef = useTheme("Icon", "-icon", style$1V, iconLight, props, mergedClsPrefixRef);
+      const themeRef = useTheme("Icon", "-icon", style$1W, iconLight, props, mergedClsPrefixRef);
       const cssVarsRef = vue.computed(() => {
         const {
           depth
@@ -14403,14 +14423,24 @@
           warn("icon", `icon pack "${targetName}" not found`);
           return null;
         }
-        if (config.async) {
-          return target.renderAsyncIcon(name);
-        }
-        if (!("renderIcon" in target)) {
-          warn("icon", `pack "${target.name}" is async-only, set \`async: true\` on \`u-config-provider :icon-packs\``);
-          return null;
+        try {
+          if (props.async ?? config.async) {
+            if ("renderIcon" in target) {
+              warnOnce("icon", `pack "${target.name}" is a sync pack rendered in async mode \u2014 its icons are already bundled, so async loads them again at runtime. Register the async pack ("${target.name}Async") or drop \`async\`.`);
+            }
+            return target.renderAsyncIcon(name);
+          }
+          if (!("renderIcon" in target)) {
+            warn("icon", `pack "${target.name}" is async-only, set \`async: true\` on \`u-config-provider :icon-packs\``);
+            return null;
+          }
+          return target.renderIcon(name);
+        } catch (err) {
+          warnOnce("icon", `icon "${name}" not found in pack "${target.name}", rendering fallback (${err.message})`);
+          return vue.h("span", {
+            innerHTML: FALLBACK_ICON
+          });
         }
-        return target.renderIcon(name);
       });
       return {
         mergedClsPrefix: mergedClsPrefixRef,
@@ -14469,6 +14499,12 @@
       name
     }, slots);
   }
+  function renderAsyncIcon(name, props, children) {
+    return renderIcon(name, {
+      ...props,
+      async: true
+    }, children);
+  }
 
   var commonVars$b = {
     iconWidth: "44px",
@@ -14482,7 +14518,7 @@
     avatarSize: "16px"
   };
 
-  function self$1B(vars) {
+  function self$1C(vars) {
     const {
       heightHuge,
       fontBodyLarge,
@@ -14512,16 +14548,16 @@
   const accountOptionLight = {
     name: "AccountOption",
     common: derived,
-    self: self$1B
+    self: self$1C
   };
 
   const accountOptionDark = {
     name: "AccountOption",
     common: derived$1,
-    self: self$1B
+    self: self$1C
   };
 
-  var style$1U = cB("base-account-option", `
+  var style$1V = cB("base-account-option", `
   display: flex;
   align-items: center;
   position: relative;
@@ -14576,7 +14612,7 @@
       const themeRef = useTheme(
         "AccountOption",
         "-base-account-option",
-        style$1U,
+        style$1V,
         accountOptionLight,
         props,
         mergedClsPrefixRef
@@ -15855,6 +15891,31 @@
     }
   });
 
+  var SearchOutlineIcon = vue.defineComponent({
+    name: "SearchOutline",
+    render() {
+      return /* @__PURE__ */ vue.h(
+        "svg",
+        {
+          viewBox: "0 0 24 24",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          "aria-hidden": true
+        },
+        /* @__PURE__ */ vue.h(
+          "path",
+          {
+            d: "M21 21l-4.35-4.35M19 11a8 8 0 1 1-16 0 8 8 0 0 1 16 0z",
+            stroke: "currentColor",
+            "stroke-width": "2",
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round"
+          }
+        )
+      );
+    }
+  });
+
   var SendFilled = vue.defineComponent({
     name: "SendFilled",
     render() {
@@ -16031,7 +16092,7 @@
     })];
   }
 
-  var style$1T = cB("base-clear", `
+  var style$1U = cB("base-clear", `
   flex-shrink: 0;
   height: 1em;
   width: 1em;
@@ -16072,7 +16133,7 @@
       onClear: Function
     },
     setup(props) {
-      useStyle("-base-clear", style$1T, vue.toRef(props, "clsPrefix"));
+      useStyle("-base-clear", style$1U, vue.toRef(props, "clsPrefix"));
       return {
         handleMouseDown(e) {
           e.preventDefault();
@@ -16103,7 +16164,7 @@
     }
   });
 
-  var style$1S = cB("base-close", `
+  var style$1T = cB("base-close", `
   display: flex;
   align-items: center;
   justify-content: center;
@@ -16175,7 +16236,7 @@
       absolute: Boolean
     },
     setup(props) {
-      useStyle("-base-close", style$1S, vue.toRef(props, "clsPrefix"));
+      useStyle("-base-close", style$1T, vue.toRef(props, "clsPrefix"));
       return () => {
         const { clsPrefix, disabled, absolute, round, isButtonTag } = props;
         const Tag = isButtonTag ? "button" : "div";
@@ -16334,7 +16395,7 @@
     }
   });
 
-  var style$1R = c$1([c$1("@keyframes loading-container-rotate", `
+  var style$1S = c$1([c$1("@keyframes loading-container-rotate", `
     to {
       -webkit-transform: rotate(360deg);
       transform: rotate(360deg);
@@ -16504,7 +16565,7 @@
       ...exposedLoadingProps
     },
     setup(props) {
-      useStyle("-base-loading", style$1R, vue.toRef(props, "clsPrefix"));
+      useStyle("-base-loading", style$1S, vue.toRef(props, "clsPrefix"));
     },
     render() {
       const { clsPrefix, radius, strokeWidth, stroke, scale } = this;
@@ -16634,7 +16695,7 @@
     })];
   }
 
-  var style$1Q = cB("base-menu-mask", `
+  var style$1R = cB("base-menu-mask", `
   position: absolute;
   left: 0;
   right: 0;
@@ -16657,7 +16718,7 @@
       }
     },
     setup(props) {
-      useStyle("-base-menu-mask", style$1Q, vue.toRef(props, "clsPrefix"));
+      useStyle("-base-menu-mask", style$1R, vue.toRef(props, "clsPrefix"));
       const messageRef = vue.ref(null);
       let timerId = null;
       const uncontrolledShowRef = vue.ref(false);
@@ -16845,7 +16906,7 @@
     railColor: "transparent"
   };
 
-  function self$1A(vars) {
+  function self$1B(vars) {
     const {
       scrollbarColor,
       scrollbarColorHover,
@@ -16865,13 +16926,13 @@
   const safeTopScrollbarLight = {
     name: "SafeTopScrollbar",
     common: derived,
-    self: self$1A
+    self: self$1B
   };
 
   const safeTopScrollbarDark = {
     name: "SafeTopScrollbar",
     common: derived$1,
-    self: self$1A
+    self: self$1B
   };
 
   cB("scrollbar", [cM("rtl", `
@@ -16884,7 +16945,7 @@
           right: unset;
         `)])])])]);
 
-  var style$1P = cB("safe-top-scrollbar", `
+  var style$1Q = cB("safe-top-scrollbar", `
   overflow: hidden;
   position: relative;
   z-index: auto;
@@ -17033,7 +17094,7 @@
       const themeRef = useTheme(
         "SafeTopScrollbar",
         "-safe-top-scrollbar",
-        style$1P,
+        style$1Q,
         safeTopScrollbarLight,
         props,
         mergedClsPrefixRef
@@ -17767,7 +17828,7 @@
     railColor: "transparent"
   };
 
-  function self$1z(vars) {
+  function self$1A(vars) {
     const {
       scrollbarColor,
       scrollbarColorHover,
@@ -17787,13 +17848,13 @@
   const scrollbarLight = {
     name: "Scrollbar",
     common: derived,
-    self: self$1z
+    self: self$1A
   };
 
   const scrollbarDark = {
     name: "Scrollbar",
     common: derived$1,
-    self: self$1z
+    self: self$1A
   };
 
   var rtlStyle$t = cB("scrollbar", [cM("rtl", `
@@ -17811,7 +17872,7 @@
     style: rtlStyle$t
   };
 
-  var style$1O = cB("scrollbar", `
+  var style$1P = cB("scrollbar", `
   overflow: hidden;
   position: relative;
   z-index: auto;
@@ -17954,7 +18015,7 @@
       const themeRef = useTheme(
         "Scrollbar",
         "-scrollbar",
-        style$1O,
+        style$1P,
         scrollbarLight,
         props,
         mergedClsPrefixRef
@@ -19326,7 +19387,7 @@
     return treemate;
   }
 
-  function self$1y(vars) {
+  function self$1z(vars) {
     const {
       fontBodyMedium,
       fontTitleLarge,
@@ -19358,16 +19419,16 @@
   const emptyLight = {
     name: "Empty",
     common: derived,
-    self: self$1y
+    self: self$1z
   };
 
   const emptyDark$1 = {
     name: "Empty",
     common: derived$1,
-    self: self$1y
+    self: self$1z
   };
 
-  var style$1N = cB("empty", `
+  var style$1O = cB("empty", `
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -19445,7 +19506,7 @@
       const themeRef = useTheme(
         "Empty",
         "-empty",
-        style$1N,
+        style$1O,
         emptyLight,
         props,
         mergedClsPrefixRef
@@ -19533,7 +19594,7 @@
     }
   });
 
-  function self$1x(vars) {
+  function self$1y(vars) {
     const {
       borderRadius,
       iconMedium,
@@ -19590,7 +19651,7 @@
       Scrollbar: scrollbarLight,
       Empty: emptyLight
     },
-    self: self$1x
+    self: self$1y
   });
 
   const internalSelectMenuDark = {
@@ -19600,7 +19661,7 @@
       Scrollbar: scrollbarDark,
       Empty: emptyDark$1
     },
-    self: self$1x
+    self: self$1y
   };
 
   cB("base-select-menu", [cM("rtl", `
@@ -19841,7 +19902,7 @@
     })];
   }
 
-  var style$1M = cB("base-select-menu", `
+  var style$1N = cB("base-select-menu", `
   line-height: 1.5;
   outline: none;
   z-index: 0;
@@ -20029,7 +20090,7 @@
       const themeRef = useTheme(
         "InternalSelectMenu",
         "-internal-select-menu",
-        style$1M,
+        style$1N,
         internalSelectMenuLight,
         props,
         vue.toRef(props, "clsPrefix")
@@ -20497,7 +20558,7 @@
     }
   });
 
-  function self$1w(vars) {
+  function self$1x(vars) {
     const {
       fontBodyMedium,
       containerPrimary,
@@ -20524,13 +20585,13 @@
   const popoverLight = {
     name: "Popover",
     common: derived,
-    self: self$1w
+    self: self$1x
   };
 
   const popoverDark = {
     name: "Popover",
     common: derived$1,
-    self: self$1w
+    self: self$1x
   };
 
   cB("popover", [cM("rtl", `
@@ -20545,7 +20606,7 @@
     right: "left"
   };
   const arrowSize = "var(--u-arrow-height) * 1.414";
-  var style$1L = c$1([cB("popover", `
+  var style$1M = c$1([cB("popover", `
     transition:
       box-shadow .3s var(--u-bezier),
       background-color .3s var(--u-bezier),
@@ -20764,7 +20825,7 @@
       const themeRef = useTheme(
         "Popover",
         "-popover",
-        style$1L,
+        style$1M,
         popoverLight,
         props,
         mergedClsPrefixRef
@@ -21594,7 +21655,7 @@
     }
   });
 
-  function self$1v(vars) {
+  function self$1w(vars) {
     const {
       opacityDisabled,
       borderRadiusSmall: borderRadius,
@@ -21692,13 +21753,13 @@
   const tagLight = {
     name: "Tag",
     common: derived,
-    self: self$1v
+    self: self$1w
   };
 
   const tagDark = {
     name: "Tag",
     common: derived$1,
-    self: self$1v
+    self: self$1w
   };
 
   var rtlStyle$s = cB("tag", [cM("rtl", `
@@ -21745,7 +21806,7 @@
     }
   };
 
-  var style$1K = cB("tag", `
+  var style$1L = cB("tag", `
   white-space: nowrap;
   position: relative;
   box-sizing: border-box;
@@ -21912,7 +21973,7 @@
       const themeRef = useTheme(
         "Tag",
         "-tag",
-        style$1K,
+        style$1L,
         tagLight,
         props,
         mergedClsPrefixRef
@@ -22276,7 +22337,7 @@
     }
   });
 
-  function self$1u(vars) {
+  function self$1v(vars) {
     const {
       heightSmall,
       heightMedium,
@@ -22296,10 +22357,10 @@
   }
   const skeletonLight$1 = {
     common: derived,
-    self: self$1u
+    self: self$1v
   };
 
-  var style$1J = c$1([cB("skeleton", `
+  var style$1K = c$1([cB("skeleton", `
     height: 1em;
     width: 100%;
     transition: background-color .3s var(--u-bezier);
@@ -22355,7 +22416,7 @@
       const themeRef = useTheme(
         "Skeleton",
         "-skeleton",
-        style$1J,
+        style$1K,
         skeletonLight$1,
         props,
         mergedClsPrefixRef
@@ -22471,7 +22532,7 @@
     }
   });
 
-  function self$1t(vars) {
+  function self$1u(vars) {
     const {
       borderRadius,
       iconMedium,
@@ -22629,7 +22690,7 @@
     peers: {
       Popover: popoverLight
     },
-    self: self$1t
+    self: self$1u
   });
 
   const internalSelectionDark = {
@@ -22638,7 +22699,7 @@
     peers: {
       Popover: popoverDark
     },
-    self: self$1t
+    self: self$1u
   };
 
   cB("base-selection", [cM("rtl", `
@@ -22671,7 +22732,7 @@
         color: var(--u-arrow-color${state}-secondary);
       `)])];
   }
-  var style$1I = c$1([cB("base-selection", `
+  var style$1J = c$1([cB("base-selection", `
     position: relative;
     z-index: auto;
     box-shadow: none;
@@ -23022,7 +23083,7 @@
       const themeRef = useTheme(
         "InternalSelection",
         "-internal-selection",
-        style$1I,
+        style$1J,
         internalSelectionLight,
         props,
         vue.toRef(props, "clsPrefix")
@@ -24103,7 +24164,7 @@
     })];
   }
 
-  var style$1H = c$1([c$1("@keyframes u-base-slot-machine-fade-up-in", `
+  var style$1I = c$1([c$1("@keyframes u-base-slot-machine-fade-up-in", `
     from {
       transform: translateY(60%);
       opacity: 0;
@@ -24222,7 +24283,7 @@
       }
     },
     setup(props) {
-      useStyle("-base-slot-machine", style$1H, vue.toRef(props, "clsPrefix"));
+      useStyle("-base-slot-machine", style$1I, vue.toRef(props, "clsPrefix"));
       const oldValueRef = vue.ref();
       const newValueRef = vue.ref();
       const numbersRef = vue.computed(() => {
@@ -24277,7 +24338,7 @@
     }
   });
 
-  function self$1s(vars) {
+  function self$1t(vars) {
     const {
       borderRadiusSmall,
       brandPrimary500,
@@ -24313,10 +24374,10 @@
   }
   const typographyLight$1 = {
     common: derived,
-    self: self$1s
+    self: self$1t
   };
 
-  var style$1G = cB("text", `
+  var style$1H = cB("text", `
   transition: color .3s var(--u-bezier);
   color: var(--u-text-color);
   margin: 0;
@@ -24624,7 +24685,7 @@
       const themeRef = useTheme(
         "Typography",
         "-text",
-        style$1G,
+        style$1H,
         typographyLight$1,
         props,
         mergedClsPrefixRef
@@ -24712,7 +24773,7 @@
     }
   });
 
-  var style$1F = cB("base-wave", `
+  var style$1G = cB("base-wave", `
   position: absolute;
   left: 0;
   right: 0;
@@ -24730,7 +24791,7 @@
       }
     },
     setup(props) {
-      useStyle("-base-wave", style$1F, vue.toRef(props, "clsPrefix"));
+      useStyle("-base-wave", style$1G, vue.toRef(props, "clsPrefix"));
       const selfRef = vue.ref(null);
       const activeRef = vue.ref(false);
       let animationTimerId = null;
@@ -24775,7 +24836,7 @@
     }
   });
 
-  function self$1r(vars) {
+  function self$1s(vars) {
     const {
       borderRadius,
       fontBodyMedium,
@@ -24812,7 +24873,7 @@
     peers: {
       Popover: popoverLight
     },
-    self: self$1r
+    self: self$1s
   });
 
   const tooltipDark = {
@@ -24821,10 +24882,10 @@
     peers: {
       Popover: popoverDark
     },
-    self: self$1r
+    self: self$1s
   };
 
-  var style$1E = cB("tooltip", "", [cE("content", `
+  var style$1F = cB("tooltip", "", [cE("content", `
     display: flex;
     align-items: flex-start;
   `), cE("icon", `
@@ -24950,7 +25011,7 @@
       const themeRef = useTheme(
         "Tooltip",
         "-tooltip",
-        props.variant === "plain" ? void 0 : style$1E,
+        props.variant === "plain" ? void 0 : style$1F,
         tooltipLight,
         props,
         mergedClsPrefixRef
@@ -25080,7 +25141,7 @@
     }
   });
 
-  var style$1D = cB("ellipsis", {
+  var style$1E = cB("ellipsis", {
     overflow: "hidden"
   }, [cNotM("line-clamp", `
     white-space: nowrap;
@@ -25118,7 +25179,7 @@
       const mergedTheme = useTheme(
         "Ellipsis",
         "-ellipsis",
-        style$1D,
+        style$1E,
         ellipsisLight,
         props,
         mergedClsPrefixRef
@@ -25275,7 +25336,7 @@
     setup(props, { attrs, slots }) {
       const mouseEnteredRef = vue.ref(false);
       const mergedClsPrefixRef = useMergedClsPrefix();
-      useStyle("-ellipsis", style$1D, mergedClsPrefixRef);
+      useStyle("-ellipsis", style$1E, mergedClsPrefixRef);
       const renderTrigger = () => {
         const { lineClamp } = props;
         const mergedClsPrefix = mergedClsPrefixRef.value;
@@ -25315,7 +25376,7 @@
     }
   });
 
-  function self$1q(vars) {
+  function self$1r(vars) {
     const {
       borderRadiusLarge,
       elementsQuaternary,
@@ -25357,21 +25418,21 @@
   const actionCardLight = {
     name: "ActionCard",
     common: derived,
-    self: self$1q
+    self: self$1r
   };
 
   const actionCardDark = {
     name: "ActionCard",
     common: derived$1,
     self: vars => {
-      const lightVars = self$1q(vars);
+      const lightVars = self$1r(vars);
       return {
         ...lightVars
       };
     }
   };
 
-  var style$1C = cB("action-card", `
+  var style$1D = cB("action-card", `
   position: relative;
   width: var(--u-width);
   min-height: var(--u-min-height);
@@ -25492,7 +25553,7 @@
       const themeRef = useTheme(
         "ActionCard",
         "-action-card",
-        style$1C,
+        style$1D,
         actionCardLight,
         props,
         mergedClsPrefixRef
@@ -25623,7 +25684,7 @@
     }
   });
 
-  var style$1B = cB("affix", [cM("affixed", {
+  var style$1C = cB("affix", [cM("affixed", {
     position: "fixed"
   }, [cM("absolute-positioned", {
     position: "absolute"
@@ -25693,7 +25754,7 @@
     props: affixProps,
     setup(props) {
       const { mergedClsPrefixRef } = useConfig(props);
-      useStyle("-affix", style$1B, mergedClsPrefixRef);
+      useStyle("-affix", style$1C, mergedClsPrefixRef);
       let scrollTarget = null;
       const stickToTopRef = vue.ref(false);
       const stickToBottomRef = vue.ref(false);
@@ -25829,7 +25890,7 @@
     descriptionSpaceBanner: "24px"
   };
 
-  function self$1p(vars) {
+  function self$1q(vars) {
     const {
       iconMedium,
       closeMedium,
@@ -25938,13 +25999,13 @@
   const alertLight = {
     name: "Alert",
     common: derived,
-    self: self$1p
+    self: self$1q
   };
 
   const alertDark = {
     name: "Alert",
     common: derived$1,
-    self: self$1p
+    self: self$1q
   };
 
   var rtlStyle$r = cB("alert", [cM("rtl", `
@@ -26020,7 +26081,7 @@
     `)];
   }
 
-  var style$1A = cB("alert", `
+  var style$1B = cB("alert", `
   line-height: var(--u-line-height);
   position: relative;
   transition: background-color .3s var(--u-bezier);
@@ -26199,7 +26260,7 @@
       const themeRef = useTheme(
         "Alert",
         "-alert",
-        style$1A,
+        style$1B,
         alertLight,
         props,
         mergedClsPrefixRef
@@ -26340,7 +26401,7 @@
     }
   });
 
-  function self$1o(vars) {
+  function self$1p(vars) {
     const {
       borderRadius,
       fontBodyMedium,
@@ -26370,13 +26431,13 @@
   const anchorLight = {
     name: "Anchor",
     common: derived,
-    self: self$1o
+    self: self$1p
   };
 
   const anchorDark = {
     name: "Anchor",
     common: derived$1,
-    self: self$1o
+    self: self$1p
   };
 
   const anchorInjectionKey = createInjectionKey("u-anchor");
@@ -26715,7 +26776,7 @@
     }
   });
 
-  var style$1z = cB("anchor", `
+  var style$1A = cB("anchor", `
   position: relative;
 `, [cNotM("block", `
     padding-left: var(--u-rail-width);
@@ -26805,7 +26866,7 @@
       const themeRef = useTheme(
         "Anchor",
         "-anchor",
-        style$1z,
+        style$1A,
         anchorLight,
         props,
         mergedClsPrefixRef
@@ -26885,7 +26946,7 @@
   isBrowser$1 && navigator.userAgent.includes("Firefox");
   const isSafari = isBrowser$1 && navigator.userAgent.includes("Safari") && !isChrome;
 
-  function self$1n(vars) {
+  function self$1o(vars) {
     const {
       iconMedium,
       textSecondary,
@@ -26996,13 +27057,13 @@
   const inputLight = {
     name: "Input",
     common: derived,
-    self: self$1n
+    self: self$1o
   };
 
   const inputDark = {
     name: "Input",
     common: derived$1,
-    self: self$1n
+    self: self$1o
   };
 
   var rtlStyle$q = cB("input", [cM("rtl", `
@@ -27028,7 +27089,7 @@
 
   const inputInjectionKey = createInjectionKey("u-input");
 
-  var style$1y = cB("input", `
+  var style$1z = cB("input", `
   max-width: 100%;
   cursor: text;
   line-height: 1.5;
@@ -27576,7 +27637,7 @@
     rippleDuration: ".6s"
   };
 
-  function self$1m(vars) {
+  function self$1n(vars) {
     const {
       heightMini,
       heightTiny,
@@ -27832,13 +27893,13 @@
   const buttonLight = {
     name: "Button",
     common: derived,
-    self: self$1m
+    self: self$1n
   };
 
   const buttonDark = {
     name: "Button",
     common: derived$1,
-    self: self$1m
+    self: self$1n
   };
 
   var rtlStyle$p = cB("button", [cM("rtl", `
@@ -27856,7 +27917,7 @@
     style: rtlStyle$p
   };
 
-  var style$1x = c$1([cB("button", `
+  var style$1y = c$1([cB("button", `
     margin: 0;
     font-weight: var(--u-font-weight);
     line-height: 1;
@@ -28187,7 +28248,7 @@
       const themeRef = useTheme(
         "Button",
         "-button",
-        style$1x,
+        style$1y,
         buttonLight,
         props,
         mergedClsPrefixRef
@@ -28621,7 +28682,7 @@
     iconMargin: "0 16px 0 0"
   };
 
-  function self$1l(vars) {
+  function self$1m(vars) {
     const {
       closeMedium,
       iconMedium,
@@ -28706,13 +28767,13 @@
   const messageLight = {
     name: "Message",
     common: derived,
-    self: self$1l
+    self: self$1m
   };
 
   const messageDark = {
     name: "Message",
     common: derived$1,
-    self: self$1l
+    self: self$1m
   };
 
   var rtlStyle$o = cB("message", [cM("rtl", `
@@ -28747,7 +28808,7 @@
     onMouseleave: Function
   };
 
-  var style$1w = c$1([cB("message-wrapper", `
+  var style$1x = c$1([cB("message-wrapper", `
     margin: var(--u-margin);
     z-index: 0;
     transform-origin: top center;
@@ -28868,7 +28929,7 @@
       const themeRef = useTheme(
         "Message",
         "-message",
-        style$1w,
+        style$1x,
         messageLight,
         messageProviderProps,
         mergedClsPrefixRef
@@ -29547,7 +29608,7 @@
       const themeRef = useTheme(
         "Input",
         "-input",
-        style$1y,
+        style$1z,
         inputLight,
         props,
         mergedClsPrefixRef
@@ -29786,10 +29847,12 @@
       }
       function handleInput(e, index = 0, event = "input") {
         let targetValue = e.target.value;
+        const sourceValue = targetValue;
         if (props.uppercase)
           targetValue = targetValue.toUpperCase();
         if (props.formatter)
           targetValue = props.formatter(targetValue);
+        const valueTransformed = targetValue !== sourceValue;
         syncMirror(targetValue);
         if (e instanceof InputEvent && !e.isComposing) {
           isComposingRef.value = false;
@@ -29820,7 +29883,7 @@
           }
         }
         vm.$forceUpdate();
-        if (!isIncomingValueValid) {
+        if (!isIncomingValueValid || valueTransformed) {
           void vue.nextTick(focusedInputCursorControl.restoreCursor);
         }
       }
@@ -30634,7 +30697,7 @@
     }
   });
 
-  var style$1v = cB("input-group", `
+  var style$1w = cB("input-group", `
   display: inline-flex;
   width: 100%;
   flex-wrap: nowrap;
@@ -30697,7 +30760,7 @@
     props: inputGroupProps,
     setup(props) {
       const { mergedClsPrefixRef } = useConfig(props);
-      useStyle("-input-group", style$1v, mergedClsPrefixRef);
+      useStyle("-input-group", style$1w, mergedClsPrefixRef);
       return {
         mergedClsPrefix: mergedClsPrefixRef
       };
@@ -30708,7 +30771,7 @@
     }
   });
 
-  var style$1u = cB("input-group-label", `
+  var style$1v = cB("input-group-label", `
   position: relative;
   user-select: none;
   -webkit-user-select: none;
@@ -30756,7 +30819,7 @@
       const themeRef = useTheme(
         "Input",
         "-input-group-label",
-        style$1u,
+        style$1v,
         inputLight,
         props,
         mergedClsPrefixRef
@@ -30882,7 +30945,7 @@
     return valOptMap;
   }
 
-  function self$1k(vars) {
+  function self$1l(vars) {
     const {
       shadowDepth2
     } = vars;
@@ -30897,7 +30960,7 @@
       InternalSelectMenu: internalSelectMenuLight,
       Input: inputLight
     },
-    self: self$1k
+    self: self$1l
   });
 
   const autoCompleteDark = {
@@ -30907,10 +30970,10 @@
       InternalSelectMenu: internalSelectMenuDark,
       Input: inputDark
     },
-    self: self$1k
+    self: self$1l
   };
 
-  var style$1t = c$1([cB("auto-complete", `
+  var style$1u = c$1([cB("auto-complete", `
     z-index: auto;
     position: relative;
     display: inline-flex;
@@ -31040,7 +31103,7 @@
       const themeRef = useTheme(
         "AutoComplete",
         "-auto-complete",
-        style$1t,
+        style$1u,
         autoCompleteLight,
         props,
         mergedClsPrefixRef
@@ -31437,7 +31500,7 @@
     return unobserve;
   };
 
-  function self$1j(vars) {
+  function self$1k(vars) {
     const {
       heightSmall,
       heightMedium,
@@ -31458,16 +31521,16 @@
   const skeletonLight = {
     name: "Skeleton",
     common: derived,
-    self: self$1j
+    self: self$1k
   };
 
   const skeletonDark = {
     name: "Skeleton",
     common: derived$1,
-    self: self$1j
+    self: self$1k
   };
 
-  var style$1s = c$1([cB("skeleton", `
+  var style$1t = c$1([cB("skeleton", `
     height: 1em;
     width: 100%;
     transition: background-color .3s var(--u-bezier);
@@ -31526,7 +31589,7 @@
       const themeRef = useTheme(
         "Skeleton",
         "-skeleton",
-        style$1s,
+        style$1t,
         skeletonLight,
         props,
         mergedClsPrefixRef
@@ -31581,7 +31644,7 @@
     }
   });
 
-  function self$1i(vars) {
+  function self$1j(vars) {
     const {
       borderRadius,
       heightSmall,
@@ -31613,18 +31676,18 @@
   const avatarLight = {
     name: "Avatar",
     common: derived,
-    self: self$1i
+    self: self$1j
   };
 
   const avatarDark = {
     name: "Avatar",
     common: derived$1,
-    self: self$1i
+    self: self$1j
   };
 
   const avatarGroupInjectionKey = createInjectionKey("u-avatar-group");
 
-  var style$1r = cB("avatar", `
+  var style$1s = cB("avatar", `
   width: var(--u-merged-size);
   height: var(--u-merged-size);
   color: var(--u-text-color);
@@ -31736,7 +31799,7 @@
       const themeRef = useTheme(
         "Avatar",
         "-avatar",
-        style$1r,
+        style$1s,
         avatarLight,
         props,
         mergedClsPrefixRef
@@ -31947,7 +32010,7 @@
     }
   });
 
-  function self$1h() {
+  function self$1i() {
     return {
       gap: "-12px"
     };
@@ -31958,7 +32021,7 @@
     peers: {
       Avatar: avatarLight
     },
-    self: self$1h
+    self: self$1i
   });
 
   const avatarGroupDark = {
@@ -31967,7 +32030,7 @@
     peers: {
       Avatar: avatarDark
     },
-    self: self$1h
+    self: self$1i
   };
 
   var rtlStyle$n = cB("avatar-group", [cM("rtl", `
@@ -31984,7 +32047,7 @@
     style: rtlStyle$n
   };
 
-  var style$1q = cB("avatar-group", `
+  var style$1r = cB("avatar-group", `
   flex-wrap: nowrap;
   display: inline-flex;
   position: relative;
@@ -32019,7 +32082,7 @@
       const mergedThemeRef = useTheme(
         "AvatarGroup",
         "-avatar-group",
-        style$1q,
+        style$1r,
         avatarGroupLight,
         props,
         mergedClsPrefixRef
@@ -32108,7 +32171,7 @@
     }
   });
 
-  function self$1g(vars) {
+  function self$1h(vars) {
     const {
       heightLarge,
       iconMedium,
@@ -32133,13 +32196,13 @@
   const backTopLight = {
     name: "BackTop",
     common: derived,
-    self: self$1g
+    self: self$1h
   };
 
   const backTopDark = {
     name: "BackTop",
     common: derived$1,
-    self: self$1g
+    self: self$1h
   };
 
   var BackTopIcon = /* @__PURE__ */ vue.h(
@@ -32153,7 +32216,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$1p = cB("back-top", `
+  var style$1q = cB("back-top", `
   position: fixed;
   right: 40px;
   bottom: 40px;
@@ -32292,7 +32355,7 @@
       const themeRef = useTheme(
         "BackTop",
         "-back-top",
-        style$1p,
+        style$1q,
         backTopLight,
         props,
         mergedClsPrefixRef
@@ -32443,7 +32506,7 @@
     }
   });
 
-  function self$1f(vars) {
+  function self$1g(vars) {
     const {
       brandQuaternary500,
       elementsPrimary,
@@ -32476,13 +32539,13 @@
   const badgeLight = {
     name: "Badge",
     common: derived,
-    self: self$1f
+    self: self$1g
   };
 
   const badgeDark = {
     name: "Badge",
     common: derived$1,
-    self: self$1f
+    self: self$1g
   };
 
   var rtlStyle$m = cB("badge", [cM("rtl", `
@@ -32499,7 +32562,7 @@
     style: rtlStyle$m
   };
 
-  var style$1o = c$1([c$1("@keyframes badge-wave-spread", {
+  var style$1p = c$1([c$1("@keyframes badge-wave-spread", {
     from: {
       boxShadow: "0 0 0.5px 0px var(--u-ripple-color)",
       opacity: 0.6
@@ -32613,7 +32676,7 @@
       const themeRef = useTheme(
         "Badge",
         "-badge",
-        style$1o,
+        style$1p,
         badgeLight,
         props,
         mergedClsPrefixRef
@@ -32749,7 +32812,7 @@
     }
   });
 
-  function self$1e(vars) {
+  function self$1f(vars) {
     const {
       fontWeightStrong,
       fontBodyMedium,
@@ -32772,16 +32835,16 @@
   const breadcrumbLight = {
     name: "Breadcrumb",
     common: derived,
-    self: self$1e
+    self: self$1f
   };
 
   const breadcrumbDark = {
     name: "Breadcrumb",
     common: derived$1,
-    self: self$1e
+    self: self$1f
   };
 
-  var style$1n = cB("breadcrumb", `
+  var style$1o = cB("breadcrumb", `
   white-space: nowrap;
   cursor: default;
   line-height: var(--u-item-line-height);
@@ -32851,7 +32914,7 @@
       const themeRef = useTheme(
         "Breadcrumb",
         "-breadcrumb",
-        style$1n,
+        style$1o,
         breadcrumbLight,
         props,
         mergedClsPrefixRef
@@ -33036,7 +33099,7 @@
       top: n1
     })])])])]);
   }
-  var style$1m = cB("button-group", `
+  var style$1n = cB("button-group", `
   flex-wrap: nowrap;
   display: inline-flex;
   position: relative;
@@ -33085,7 +33148,7 @@
     props: buttonGroupProps,
     setup(props) {
       const { mergedClsPrefixRef, mergedRtlRef } = useConfig(props);
-      useStyle("-button-group", style$1m, mergedClsPrefixRef);
+      useStyle("-button-group", style$1n, mergedClsPrefixRef);
       vue.provide(buttonGroupInjectionKey, props);
       const rtlEnabledRef = useRtl(
         "ButtonGroup",
@@ -39029,7 +39092,7 @@
     return resultDate.getTime();
   }
 
-  function self$1d(vars) {
+  function self$1e(vars) {
     const {
       borderRadius,
       fontWeightStrong,
@@ -39073,7 +39136,7 @@
     peers: {
       Button: buttonLight
     },
-    self: self$1d
+    self: self$1e
   });
 
   const calendarDark = {
@@ -39082,10 +39145,10 @@
     peers: {
       Button: buttonDark
     },
-    self: self$1d
+    self: self$1e
   };
 
-  var style$1l = c$1([cB("calendar", `
+  var style$1m = c$1([cB("calendar", `
     line-height: var(--u-line-height);
     font-size: var(--u-font-size);
     color: var(--u-text-color);
@@ -39224,7 +39287,7 @@
       const themeRef = useTheme(
         "Calendar",
         "-calendar",
-        style$1l,
+        style$1m,
         calendarLight,
         props,
         mergedClsPrefixRef
@@ -39512,7 +39575,7 @@
     paddingHuge: "27px 40px 28px"
   };
 
-  function self$1c(vars) {
+  function self$1d(vars) {
     const {
       borderRadius,
       fontWeight,
@@ -39578,13 +39641,13 @@
   const cardLight = {
     name: "Card",
     common: derived,
-    self: self$1c
+    self: self$1d
   };
 
   const cardDark$1 = {
     name: "Card",
     common: derived$1,
-    self: self$1c
+    self: self$1d
   };
 
   var rtlStyle$l = cB("card", [cM("rtl", `
@@ -39607,7 +39670,7 @@
 `, [c$1("&:first-child", {
     paddingTop: "var(--u-padding-bottom)"
   })]);
-  var style$1k = c$1([cB("card", `
+  var style$1l = c$1([cB("card", `
     font-size: var(--u-font-size);
     line-height: var(--u-line-height);
     font-weight: var(--u-font-weight);
@@ -39790,7 +39853,7 @@
       const themeRef = useTheme(
         "Card",
         "-card",
-        style$1k,
+        style$1l,
         cardLight,
         props,
         mergedClsPrefixRef
@@ -40373,7 +40436,7 @@
     }
   });
 
-  function self$1b(vars) {
+  function self$1c(vars) {
     const {
       textSecondary,
       textPrimary,
@@ -40408,10 +40471,10 @@
   const cardListLight = {
     name: "CardList",
     common: derived,
-    self: self$1b
+    self: self$1c
   };
 
-  var style$1j = cB("card-list-item", [c$1("&", {
+  var style$1k = cB("card-list-item", [c$1("&", {
     padding: "16px",
     borderRadius: "var(--u-border-radius)",
     display: "flex",
@@ -40532,7 +40595,7 @@
     props: cardListItemProps,
     setup(props, { slots }) {
       const { mergedClsPrefixRef } = useConfig(props);
-      useStyle("-card-list-item", style$1j, mergedClsPrefixRef);
+      useStyle("-card-list-item", style$1k, mergedClsPrefixRef);
       const isOpen = vue.ref(false);
       const toggle = () => {
         isOpen.value = !isOpen.value;
@@ -40663,7 +40726,7 @@
       const themeRef = useTheme(
         "CardList",
         "-card-list",
-        style$1j,
+        style$1k,
         cardListLight,
         props,
         mergedClsPrefixRef
@@ -40760,7 +40823,7 @@
     }
   });
 
-  function self$1a() {
+  function self$1b() {
     return {
       dotSize: "8px",
       dotColor: "rgba(255, 255, 255, .3)",
@@ -40774,13 +40837,13 @@
   const carouselLight = {
     name: "Carousel",
     common: derived,
-    self: self$1a
+    self: self$1b
   };
 
   const carouselDark = {
     name: "Carousel",
     common: derived$1,
-    self: self$1a
+    self: self$1b
   };
 
   const carouselMethodsInjectionKey = createInjectionKey("u-carousel-methods");
@@ -41064,7 +41127,7 @@
     }
   });
 
-  var style$1i = cB("carousel", `
+  var style$1j = cB("carousel", `
   position: relative;
   width: 100%;
   height: 100%;
@@ -42066,7 +42129,7 @@
       const themeRef = useTheme(
         "Carousel",
         "-carousel",
-        style$1i,
+        style$1j,
         carouselLight,
         props,
         mergedClsPrefixRef
@@ -42226,7 +42289,7 @@
     labelPadding: "0 16px"
   };
 
-  function self$19(vars) {
+  function self$1a(vars) {
     const {
       lineHeightBodyLarge,
       fontBodyLarge,
@@ -42302,13 +42365,13 @@
   const checkboxLight = {
     name: "Checkbox",
     common: derived,
-    self: self$19
+    self: self$1a
   };
 
   const checkboxDark = {
     name: "Checkbox",
     common: derived$1,
-    self: self$19
+    self: self$1a
   };
 
   var rtlStyle$k = cB("checkbox", [cM("rtl", `
@@ -42320,7 +42383,7 @@
     style: rtlStyle$k
   };
 
-  function self$18(vars) {
+  function self$19(vars) {
     const {
       borderRadius,
       heightMedium,
@@ -42361,7 +42424,7 @@
       Checkbox: checkboxLight,
       Empty: emptyLight
     },
-    self: self$18
+    self: self$19
   });
 
   const cascaderDark = {
@@ -42374,14 +42437,14 @@
       Checkbox: checkboxDark,
       Empty: emptyLight
     },
-    self: self$18
+    self: self$19
   };
 
   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$1h = c$1([iconSwitchTransition(), c$1("@keyframes ripple", {
+  var style$1i = c$1([iconSwitchTransition(), c$1("@keyframes ripple", {
     from: {
       transform: "scale(0)"
     },
@@ -42595,7 +42658,7 @@
       const themeRef = useTheme(
         "Checkbox",
         "-checkbox",
-        style$1h,
+        style$1i,
         checkboxLight,
         props,
         mergedClsPrefixRef
@@ -43669,7 +43732,7 @@
     }
   });
 
-  var style$1g = c$1([cB("cascader-menu", `
+  var style$1h = c$1([cB("cascader-menu", `
     outline: none;
     position: relative;
     margin: 4px 0;
@@ -43911,7 +43974,7 @@
       const themeRef = useTheme(
         "Cascader",
         "-cascader",
-        style$1g,
+        style$1h,
         cascaderLight,
         props,
         mergedClsPrefixRef
@@ -44843,12 +44906,12 @@
     }
   };
 
-  function self$17() {
+  function self$18() {
     return commonVars$7;
   }
   const flexLight = {
     name: "Flex",
-    self: self$17
+    self: self$18
   };
 
   cB("space", [cM("rtl", `
@@ -44966,7 +45029,7 @@
     }
   });
 
-  function self$16(vars) {
+  function self$17(vars) {
     const {
       borderRadius,
       borderRadiusMedium,
@@ -45010,13 +45073,13 @@
   const listLight = {
     name: "List",
     common: derived,
-    self: self$16
+    self: self$17
   };
 
   const listDark$1 = {
     name: "List",
     common: derived$1,
-    self: self$16
+    self: self$17
   };
 
   var rtlStyle$j = cB("list", [cM("rtl", `
@@ -45035,7 +45098,7 @@
     style: rtlStyle$j
   };
 
-  function self$15(vars) {
+  function self$16(vars) {
     const {
       shadowDepth2
     } = vars;
@@ -45050,7 +45113,7 @@
       InternalSelection: internalSelectionLight,
       InternalSelectMenu: internalSelectMenuLight
     },
-    self: self$15
+    self: self$16
   });
 
   const selectDark = {
@@ -45060,13 +45123,13 @@
       InternalSelection: internalSelectionDark,
       InternalSelectMenu: internalSelectMenuDark
     },
-    self: self$15
+    self: self$16
   };
 
   ({
     style: c$1([])});
 
-  function self$14(vars) {
+  function self$15(vars) {
     const {
       borderRadiusSmall,
       fontWeightStrong,
@@ -45161,19 +45224,19 @@
   const typographyLight = {
     name: "Typography",
     common: derived,
-    self: self$14
+    self: self$15
   };
 
   const typographyDark = {
     name: "Typography",
     common: derived$1,
-    self: self$14
+    self: self$15
   };
 
   const chatInputLight = {
     ...inputLight,
     self(vars) {
-      const originalInputSelf = self$1n(vars);
+      const originalInputSelf = self$1o(vars);
       const {
         elementsTertiary
       } = vars;
@@ -45193,7 +45256,7 @@
   const chatBadgeLight = {
     ...badgeLight,
     self(vars) {
-      const originalBadgeSelf = self$1f(vars);
+      const originalBadgeSelf = self$1g(vars);
       const {
         brandPrimary400,
         elementsSecondary
@@ -45205,7 +45268,7 @@
       };
     }
   };
-  function self$13(vars) {
+  function self$14(vars) {
     const {
       borderRadiusLarge,
       elementsQuaternary,
@@ -45278,7 +45341,7 @@
       HeaderShareIcon: iconLight,
       HeaderProfileIcon: iconLight
     },
-    self: self$13
+    self: self$14
   });
 
   const chatDark = createTheme$1({
@@ -45300,7 +45363,7 @@
       HeaderProfileIcon: iconDark$1
     },
     self: vars => {
-      const lightVars = self$13(vars);
+      const lightVars = self$14(vars);
       return {
         ...lightVars
       };
@@ -45408,7 +45471,7 @@
   };
   const listInjectionKey = createInjectionKey("u-list");
 
-  var style$1f = c$1([cB("align-start", `
+  var style$1g = c$1([cB("align-start", `
     align-self: self-start;
   `), cB("align-center", `
     align-self: center;
@@ -45541,7 +45604,7 @@
       const themeRef = useTheme(
         "List",
         "-list",
-        style$1f,
+        style$1g,
         listLight,
         props,
         mergedClsPrefixRef
@@ -46023,7 +46086,7 @@
     }
   });
 
-  var style$1e = cB("a", `
+  var style$1f = cB("a", `
   cursor: pointer;
   transition:
     color .3s var(--u-bezier),
@@ -46046,7 +46109,7 @@
       const themeRef = useTheme(
         "Typography",
         "-a",
-        style$1e,
+        style$1f,
         typographyLight,
         props,
         mergedClsPrefixRef
@@ -46082,7 +46145,7 @@
     }
   });
 
-  var style$1d = cB("blockquote", `
+  var style$1e = cB("blockquote", `
   font-size: var(--u-font-size);
   line-height: var(--u-line-height);
   margin: 0;
@@ -46121,7 +46184,7 @@
       const themeRef = useTheme(
         "Typography",
         "-blockquote",
-        style$1d,
+        style$1e,
         typographyLight,
         props,
         mergedClsPrefixRef
@@ -46170,7 +46233,7 @@
     }
   });
 
-  var style$1c = cB("h", `
+  var style$1d = cB("h", `
   font-size: var(--u-font-size);
   font-weight: var(--u-font-weight);
   margin: var(--u-margin);
@@ -46215,7 +46278,7 @@
         mergedClsPrefixRef,
         inlineThemeDisabled
       } = useConfig(props);
-      const themeRef = useTheme("Typography", "-h", style$1c, typographyLight, props, mergedClsPrefixRef);
+      const themeRef = useTheme("Typography", "-h", style$1d, typographyLight, props, mergedClsPrefixRef);
       const cssVarsRef = vue.computed(() => {
         const {
           type
@@ -46279,7 +46342,7 @@
   const UH5$1 = createHeader("5");
   const UH6$1 = createHeader("6");
 
-  var style$1b = cB("hr", `
+  var style$1c = cB("hr", `
   margin: 12px 0;
   transition: border-color .3s var(--u-bezier);
   border-left: none;
@@ -46304,7 +46367,7 @@
       const themeRef = useTheme(
         "Typography",
         "-hr",
-        style$1b,
+        style$1c,
         typographyLight,
         props,
         mergedClsPrefixRef
@@ -46358,7 +46421,7 @@
   `), c$1("&:last-child", `
     margin-bottom: 0;
   `)];
-  var style$1a = c$1([cB("ol", {
+  var style$1b = c$1([cB("ol", {
     fontSize: "var(--u-font-size)",
     padding: "var(--u-ol-padding)"
   }, [cM("align-text", {
@@ -46382,7 +46445,7 @@
       const themeRef = useTheme(
         "Typography",
         "-xl",
-        style$1a,
+        style$1b,
         typographyLight,
         props,
         mergedClsPrefixRef
@@ -46435,7 +46498,7 @@
     }
   });
 
-  var style$19 = cB("p", `
+  var style$1a = cB("p", `
   box-sizing: border-box;
   transition: color .3s var(--u-bezier);
   margin: var(--u-margin);
@@ -46456,7 +46519,7 @@
       const themeRef = useTheme(
         "Typography",
         "-p",
-        style$19,
+        style$1a,
         typographyLight,
         props,
         mergedClsPrefixRef
@@ -46596,7 +46659,7 @@
       const themeRef = useTheme(
         "Typography",
         "-xl",
-        style$1a,
+        style$1b,
         typographyLight,
         props,
         mergedClsPrefixRef
@@ -46649,7 +46712,7 @@
     }
   });
 
-  function self$12(vars) {
+  function self$13(vars) {
     const {
       fontWeight,
       fontBodyMedium,
@@ -46690,16 +46753,16 @@
   const progressLight = {
     name: "Progress",
     common: derived,
-    self: self$12
+    self: self$13
   };
 
   const progressDark = {
     name: "Progress",
     common: derived$1,
-    self: self$12
+    self: self$13
   };
 
-  function self$11(vars) {
+  function self$12(vars) {
     const {
       staticGreen,
       staticRed,
@@ -46756,7 +46819,7 @@
       Button: buttonLight,
       Progress: progressLight
     },
-    self: self$11
+    self: self$12
   });
 
   const uploadDark = {
@@ -46766,7 +46829,7 @@
       Button: buttonDark,
       Progress: progressDark
     },
-    self: self$11
+    self: self$12
   };
 
   var rtlStyle$i = cB("upload", [cM("rtl", `
@@ -46781,7 +46844,7 @@
 
   const uploadInjectionKey = createInjectionKey("u-upload");
 
-  var style$18 = c$1([cB("upload", "width: var(--u-upload-width)", [cM("dragger-inside", [cB("upload-trigger", `
+  var style$19 = 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);
@@ -47242,10 +47305,10 @@
   const cardDark = {
     name: "CardList",
     common: derived$1,
-    self: self$1b
+    self: self$1c
   };
 
-  function self$10(vars) {
+  function self$11(vars) {
     const {
       textPrimary,
       fontBodyMedium,
@@ -47273,12 +47336,12 @@
   const codeLight = {
     name: "Code",
     common: derived,
-    self: self$10
+    self: self$11
   };
 
-  function self$$(vars) {
+  function self$10(vars) {
     return {
-      ...self$10(vars),
+      ...self$11(vars),
       // extracted from hljs atom-one-dark.scss
       "mono-3": "#5c6370",
       "hue-1": "#56b6c2",
@@ -47294,10 +47357,10 @@
   const codeDark = {
     name: "Code",
     common: derived$1,
-    self: self$$
+    self: self$10
   };
 
-  function self$_(vars) {
+  function self$$(vars) {
     const {
       cubicBezierEaseInOut
     } = vars;
@@ -47308,13 +47371,13 @@
   const collapseTransitionLight = {
     name: "CollapseTransition",
     common: derived,
-    self: self$_
+    self: self$$
   };
 
   const collapseTransitionDark = {
     name: "CollapseTransition",
     common: derived$1,
-    self: self$_
+    self: self$$
   };
 
   var rtlStyle$g = cB("collapse-transition", [cM("rtl", `
@@ -47327,7 +47390,7 @@
     style: rtlStyle$g
   };
 
-  function self$Z(vars) {
+  function self$_(vars) {
     const {
       fontWeight,
       fontBodyLarge,
@@ -47367,13 +47430,13 @@
   const collapseLight = {
     name: "Collapse",
     common: derived,
-    self: self$Z
+    self: self$_
   };
 
   const collapseDark = {
     name: "Collapse",
     common: derived$1,
-    self: self$Z
+    self: self$_
   };
 
   var rtlStyle$f = cB("collapse", [cM("rtl", `
@@ -47396,7 +47459,7 @@
     style: rtlStyle$f
   };
 
-  function self$Y(vars) {
+  function self$Z(vars) {
     const {
       borderRadius,
       fontBodySmall,
@@ -47483,7 +47546,7 @@
     peers: {
       Popover: popoverLight
     },
-    self: self$Y
+    self: self$Z
   });
 
   const dropdownDark = {
@@ -47492,7 +47555,7 @@
     peers: {
       Popover: popoverDark
     },
-    self: self$Y
+    self: self$Z
   };
 
   const popselect = {
@@ -47504,7 +47567,7 @@
     }
   };
 
-  function self$X(vars) {
+  function self$Y(vars) {
     const {
       shadowDepth2
     } = vars;
@@ -47519,10 +47582,10 @@
       Popover: popoverLight,
       InternalSelectMenu: internalSelectMenuLight
     },
-    self: self$X
+    self: self$Y
   });
 
-  function self$W(vars) {
+  function self$X(vars) {
     const {
       brandPrimary100,
       transparencySecondary,
@@ -47620,7 +47683,7 @@
       Input: inputLight,
       Popselect: popselectLight
     },
-    self: self$W
+    self: self$X
   });
 
   const paginationDark = {
@@ -47631,7 +47694,7 @@
       Input: inputDark,
       Popselect: popselect
     },
-    self: self$W
+    self: self$X
   };
 
   var rtlStyle$e = cB("pagination", [cM("rtl", `
@@ -47648,7 +47711,7 @@
     peers: [inputRtl]
   };
 
-  function self$V(vars) {
+  function self$W(vars) {
     const {
       heightTiny,
       heightSmall,
@@ -47740,13 +47803,13 @@
   const radioLight = {
     name: "Radio",
     common: derived,
-    self: self$V
+    self: self$W
   };
 
   const radioDark = {
     name: "Radio",
     common: derived$1,
-    self: self$V
+    self: self$W
   };
 
   var rtlStyle$d = c$1([cB("radio", [cM("rtl", `
@@ -47774,7 +47837,7 @@
     style: rtlStyle$d
   };
 
-  function self$U(vars) {
+  function self$V(vars) {
     const {
       borderRadius,
       opacityDisabled,
@@ -47875,7 +47938,7 @@
       Ellipsis: ellipsisLight,
       Dropdown: dropdownLight
     },
-    self: self$U
+    self: self$V
   });
 
   const dataTableDark = {
@@ -47892,10 +47955,10 @@
       Ellipsis: ellipsisDark,
       Dropdown: dropdownDark
     },
-    self: self$U
+    self: self$V
   };
 
-  function self$T(vars) {
+  function self$U(vars) {
     const {
       opacityDisabled,
       borderRadius,
@@ -47937,7 +48000,7 @@
       Button: buttonLight,
       Input: inputLight
     },
-    self: self$T
+    self: self$U
   });
 
   const timePickerDark = {
@@ -47948,7 +48011,7 @@
       Button: buttonDark,
       Input: inputDark
     },
-    self: self$T
+    self: self$U
   };
 
   const itemWidth = "38px";
@@ -47994,7 +48057,7 @@
     calendarRightPaddingYearrange: "0"
   };
 
-  function self$S(vars) {
+  function self$T(vars) {
     const {
       iconMedium,
       fontWeightStrong,
@@ -48095,7 +48158,7 @@
       Scrollbar: scrollbarLight,
       Select: internalSelectionLight
     },
-    self: self$S
+    self: self$T
   });
 
   const datePickerDark = {
@@ -48108,10 +48171,10 @@
       Scrollbar: scrollbarDark,
       Select: internalSelectionDark
     },
-    self: self$S
+    self: self$T
   };
 
-  function self$R(vars) {
+  function self$S(vars) {
     const {
       borderRadius,
       lineHeightBodyLarge,
@@ -48161,13 +48224,13 @@
   const descriptionsLight = {
     name: "Descriptions",
     common: derived,
-    self: self$R
+    self: self$S
   };
 
   const descriptionsDark = {
     name: "Descriptions",
     common: derived$1,
-    self: self$R
+    self: self$S
   };
 
   var commonVars$5 = {
@@ -48181,7 +48244,7 @@
     closeBorderRadius: "100px"
   };
 
-  function self$Q(vars) {
+  function self$R(vars) {
     const {
       borderRadius,
       containerPrimary,
@@ -48238,7 +48301,7 @@
     peers: {
       Button: buttonLight
     },
-    self: self$Q
+    self: self$R
   });
 
   const dialogDark = {
@@ -48247,10 +48310,10 @@
     peers: {
       Button: buttonDark
     },
-    self: self$Q
+    self: self$R
   };
 
-  function self$P(vars) {
+  function self$Q(vars) {
     const {
       elementsQuaternary,
       textPrimary,
@@ -48270,13 +48333,13 @@
   const dividerLight = {
     name: "Divider",
     common: derived,
-    self: self$P
+    self: self$Q
   };
 
   const dividerDark = {
     name: "Divider",
     common: derived$1,
-    self: self$P
+    self: self$Q
   };
 
   var commonVars$4 = {
@@ -48292,7 +48355,7 @@
     contentBorderRadius: "24px"
   };
 
-  function self$O(vars) {
+  function self$P(vars) {
     const {
       containerPrimary,
       textPrimary,
@@ -48341,7 +48404,7 @@
     peers: {
       Scrollbar: scrollbarLight
     },
-    self: self$O
+    self: self$P
   });
 
   const drawerDark = {
@@ -48350,7 +48413,7 @@
     peers: {
       Scrollbar: scrollbarDark
     },
-    self: self$O
+    self: self$P
   };
 
   var rtlStyle$c = cB("drawer", [cM("rtl", `
@@ -48384,7 +48447,7 @@
     }
   };
 
-  function self$N() {
+  function self$O() {
     return commonVariables$1;
   }
   const dynamicInputLight = createTheme$1({
@@ -48394,7 +48457,7 @@
       Input: inputLight,
       Button: buttonLight
     },
-    self: self$N
+    self: self$O
   });
 
   var rtlStyle$b = cB("input-number", [cM("rtl", `
@@ -48435,12 +48498,12 @@
     }
   };
 
-  function self$M() {
+  function self$N() {
     return commonVars$3;
   }
   const spaceLight = {
     name: "Space",
-    self: self$M
+    self: self$N
   };
 
   var rtlStyle$9 = cB("space", [cM("rtl", `
@@ -48512,7 +48575,7 @@
     }
   };
 
-  function self$L(vars) {
+  function self$M(vars) {
     const {
       containerPrimary,
       elementsQuaternary,
@@ -48528,7 +48591,7 @@
   const themeLight$4 = {
     name: "FloatButtonGroup",
     common: derived,
-    self: self$L
+    self: self$M
   };
 
   const floatButtonDark = {
@@ -48563,7 +48626,7 @@
     }
   };
 
-  function self$K(vars) {
+  function self$L(vars) {
     const {
       containerPrimary,
       textPrimary,
@@ -48592,10 +48655,10 @@
   const themeLight$3 = {
     name: "FloatButton",
     common: derived,
-    self: self$K
+    self: self$L
   };
 
-  function self$J(vars) {
+  function self$K(vars) {
     const {
       heightSmall,
       heightMedium,
@@ -48650,16 +48713,16 @@
   const formLight = {
     name: "Form",
     common: derived,
-    self: self$J
+    self: self$K
   };
 
   const formItemDark = {
     name: "Form",
     common: derived$1,
-    self: self$J
+    self: self$K
   };
 
-  function self$I(vars) {
+  function self$J(vars) {
     const {
       brandPrimary500,
       staticGreen,
@@ -48696,16 +48759,16 @@
   const gradientTextLight = {
     name: "GradientText",
     common: derived,
-    self: self$I
+    self: self$J
   };
 
   const gradientTextDark = {
     name: "GradientText",
     common: derived$1,
-    self: self$I
+    self: self$J
   };
 
-  function self$H(vars) {
+  function self$I(vars) {
     const {
       textSecondary
     } = vars;
@@ -48720,7 +48783,7 @@
       Button: buttonLight,
       Input: inputLight
     },
-    self: self$H
+    self: self$I
   });
 
   const inputNumberDark = {
@@ -48730,10 +48793,10 @@
       Button: buttonDark,
       Input: inputDark
     },
-    self: self$H
+    self: self$I
   };
 
-  function self$G() {
+  function self$H() {
     return {
       inputWidthSmall: "44px",
       inputWidthMedium: "50px",
@@ -48749,7 +48812,7 @@
     peers: {
       Input: inputLight
     },
-    self: self$G
+    self: self$H
   });
 
   const inputOtpDark = {
@@ -48758,7 +48821,7 @@
     peers: {
       Input: inputDark
     },
-    self: self$G
+    self: self$H
   };
 
   var rtlStyle$8 = cB("input-otp", [cM("rtl", `
@@ -48770,7 +48833,7 @@
     style: rtlStyle$8
   };
 
-  function self$F(vars) {
+  function self$G(vars) {
     const {
       textPrimary,
       textQuaternary,
@@ -48816,7 +48879,7 @@
     peers: {
       Scrollbar: scrollbarLight
     },
-    self: self$F
+    self: self$G
   });
 
   const layoutDark = {
@@ -48825,7 +48888,7 @@
     peers: {
       Scrollbar: scrollbarDark
     },
-    self: self$F
+    self: self$G
   };
 
   const rowDark = {
@@ -48862,7 +48925,7 @@
     style: rtlStyle$7
   };
 
-  function self$E(vars) {
+  function self$F(vars) {
     const {
       brandPrimary500,
       staticRed
@@ -48876,16 +48939,16 @@
   const loadingBarLight = {
     name: "LoadingBar",
     common: derived,
-    self: self$E
+    self: self$F
   };
 
   const loadingBarDark = {
     name: "LoadingBar",
     common: derived$1,
-    self: self$E
+    self: self$F
   };
 
-  function self$D(vars) {
+  function self$E(vars) {
     const {
       fontBodyMedium,
       textPrimary,
@@ -48908,7 +48971,7 @@
       Scrollbar: scrollbarLight,
       Code: codeLight
     },
-    self: self$D
+    self: self$E
   });
 
   const logDark = {
@@ -48918,25 +48981,25 @@
       Scrollbar: scrollbarDark,
       Code: codeDark
     },
-    self: self$D
+    self: self$E
   };
 
-  function self$C() {
+  function self$D() {
     return {};
   }
   const marqueeLight = {
     name: "Marquee",
     common: derived,
-    self: self$C
+    self: self$D
   };
 
   const marqueeDark = {
     name: "Marquee",
     common: derived$1,
-    self: self$C
+    self: self$D
   };
 
-  function self$B(vars) {
+  function self$C(vars) {
     const {
       shadowDepth2
     } = vars;
@@ -48951,7 +49014,7 @@
       InternalSelectMenu: internalSelectMenuLight,
       Input: inputLight
     },
-    self: self$B
+    self: self$C
   });
 
   const listDark = {
@@ -48961,7 +49024,7 @@
       InternalSelectMenu: internalSelectMenuDark,
       Input: inputDark
     },
-    self: self$B
+    self: self$C
   };
 
   function createPartialInvertedVars(color, activeItemColor, activeTextColor, groupTextColor) {
@@ -49004,7 +49067,7 @@
       groupTextColorInverted: groupTextColor
     };
   }
-  function self$A(vars) {
+  function self$B(vars) {
     const {
       textSecondary,
       borderRadiusSmall,
@@ -49072,7 +49135,7 @@
       Tooltip: tooltipLight,
       Dropdown: dropdownLight
     },
-    self: self$A
+    self: self$B
   });
 
   const menuDark = {
@@ -49082,10 +49145,10 @@
       Tooltip: tooltipDark,
       Dropdown: dropdownDark
     },
-    self: self$A
+    self: self$B
   };
 
-  function self$z(vars) {
+  function self$A(vars) {
     const {
       transparencyModal,
       containerPrimary,
@@ -49109,7 +49172,7 @@
       Dialog: dialogLight,
       Card: cardLight
     },
-    self: self$z
+    self: self$A
   });
 
   const modalDark = {
@@ -49120,7 +49183,7 @@
       Dialog: dialogDark,
       Card: cardDark$1
     },
-    self: self$z
+    self: self$A
   };
 
   var commonVars$2 = {
@@ -49129,7 +49192,7 @@
     closeBorderRadius: "50px"
   };
 
-  function self$y(vars) {
+  function self$z(vars) {
     const {
       fontWeightStrong,
       lineHeightBodyMedium,
@@ -49262,7 +49325,7 @@
     peers: {
       Scrollbar: scrollbarLight
     },
-    self: self$y
+    self: self$z
   });
 
   const notificationDark = {
@@ -49271,7 +49334,7 @@
     peers: {
       Scrollbar: scrollbarDark
     },
-    self: self$y
+    self: self$z
   };
 
   var rtlStyle$6 = cB("notification", [cM("rtl", `
@@ -49301,7 +49364,7 @@
     style: rtlStyle$6
   };
 
-  function self$x(vars) {
+  function self$y(vars) {
     const {
       fontWeightStrong,
       fontTitleSmall,
@@ -49327,13 +49390,13 @@
   const pageHeaderLight = createTheme$1({
     name: "PageHeader",
     common: derived,
-    self: self$x
+    self: self$y
   });
 
   const pageHeaderDark = {
     name: "PageHeader",
     common: derived$1,
-    self: self$x
+    self: self$y
   };
 
   var rtlStyle$5 = cB("page-header-wrapper", [cM("rtl", [cB("page-header-header", `
@@ -49360,7 +49423,7 @@
     style: rtlStyle$5
   };
 
-  function self$w(vars) {
+  function self$x(vars) {
     const {
       fontBodyMedium,
       staticOrange
@@ -49378,7 +49441,7 @@
       Button: buttonLight,
       Popover: popoverLight
     },
-    self: self$w
+    self: self$x
   });
 
   const popconfirmDark = {
@@ -49388,10 +49451,10 @@
       Button: buttonDark,
       Popover: popoverDark
     },
-    self: self$w
+    self: self$x
   };
 
-  function self$v(vars) {
+  function self$w(vars) {
     const {
       elementsQuinary,
       brandSecondary600
@@ -49407,16 +49470,16 @@
   const themeLight$2 = {
     name: "Rate",
     common: derived,
-    self: self$v
+    self: self$w
   };
 
   const rateDark = {
     name: "Rate",
     common: derived$1,
-    self: self$v
+    self: self$w
   };
 
-  function self$u(vars) {
+  function self$v(vars) {
     const {
       fontHeadingSmall,
       fontHeadingMedium,
@@ -49465,16 +49528,16 @@
   const resultLight = {
     name: "Result",
     common: derived,
-    self: self$u
+    self: self$v
   };
 
   const resultDark = {
     name: "Result",
     common: derived$1,
-    self: self$u
+    self: self$v
   };
 
-  function self$t(vars) {
+  function self$u(vars) {
     const {
       borderRadius,
       opacityDisabled,
@@ -49521,16 +49584,16 @@
   const sliderLight = {
     name: "Slider",
     common: derived,
-    self: self$t
+    self: self$u
   };
 
   const sliderDark = {
     name: "Slider",
     common: derived$1,
-    self: self$t
+    self: self$u
   };
 
-  function self$s(vars) {
+  function self$t(vars) {
     const {
       opacityDisabled,
       elementsPrimary,
@@ -49557,16 +49620,16 @@
   const spinLight = {
     name: "Spin",
     common: derived,
-    self: self$s
+    self: self$t
   };
 
   const spinDark = {
     name: "Spin",
     common: derived$1,
-    self: self$s
+    self: self$t
   };
 
-  function self$r(vars) {
+  function self$s(vars) {
     const {
       fontBodyMedium,
       fontHeadingSmall,
@@ -49588,13 +49651,13 @@
   const statisticLight = {
     name: "Statistic",
     common: derived,
-    self: self$r
+    self: self$s
   };
 
   const statisticDark = {
     name: "Statistic",
     common: derived$1,
-    self: self$r
+    self: self$s
   };
 
   var rtlStyle$4 = cB("statistic", [cM("rtl", `
@@ -49611,7 +49674,7 @@
     style: rtlStyle$4
   };
 
-  function self$q(vars) {
+  function self$r(vars) {
     const {
       fontBodyMedium,
       lineHeightBodyMedium,
@@ -49640,16 +49703,16 @@
   const statusLight = {
     name: "Status",
     common: derived,
-    self: self$q
+    self: self$r
   };
 
   const emptyDark = {
     name: "Status",
     common: derived$1,
-    self: self$q
+    self: self$r
   };
 
-  function self$p(vars) {
+  function self$q(vars) {
     const {
       fontWeightStrong,
       fontBodySmall,
@@ -49726,13 +49789,13 @@
   const stepsLight = {
     name: "Steps",
     common: derived,
-    self: self$p
+    self: self$q
   };
 
   const stepsDark = {
     name: "Steps",
     common: derived$1,
-    self: self$p
+    self: self$q
   };
 
   var rtlStyle$3 = c$1([cB("steps", [cM("rtl", `
@@ -49754,7 +49817,7 @@
     style: rtlStyle$3
   };
 
-  function self$o(vars) {
+  function self$p(vars) {
     const {
       opacityDisabled,
       borderRadius,
@@ -49818,16 +49881,16 @@
   const switchLight = {
     name: "Switch",
     common: derived,
-    self: self$o
+    self: self$p
   };
 
   const switchDark = {
     name: "Switch",
     common: derived$1,
-    self: self$o
+    self: self$p
   };
 
-  function self$n(vars) {
+  function self$o(vars) {
     const {
       fontBodySmall,
       fontBodyMedium,
@@ -49872,13 +49935,13 @@
   const tableLight = {
     name: "Table",
     common: derived,
-    self: self$n
+    self: self$o
   };
 
   const tableDark = {
     name: "Table",
     common: derived$1,
-    self: self$n
+    self: self$o
   };
 
   var rtlStyle$2 = c$1([cB("table", [cM("rtl", `
@@ -49899,7 +49962,7 @@
     style: rtlStyle$2
   };
 
-  function self$m(vars) {
+  function self$n(vars) {
     const {
       borderRadius,
       closeSmall,
@@ -50020,16 +50083,16 @@
   const tabsLight = {
     name: "Tabs",
     common: derived,
-    self: self$m
+    self: self$n
   };
 
   const tabsDark = {
     name: "Tabs",
     common: derived$1,
-    self: self$m
+    self: self$n
   };
 
-  function self$l(vars) {
+  function self$m(vars) {
     const {
       fontBodyMedium,
       textPrimary,
@@ -50046,13 +50109,13 @@
   const thingLight = {
     name: "Thing",
     common: derived,
-    self: self$l
+    self: self$m
   };
 
   const thingDark = {
     name: "Thing",
     common: derived$1,
-    self: self$l
+    self: self$m
   };
 
   var rtlStyle$1 = cB("thing", [cM("rtl", `
@@ -50069,7 +50132,7 @@
     peers: [buttonRtl, spaceRtl]
   };
 
-  function self$k(vars) {
+  function self$l(vars) {
     const {
       fontWeightStrong,
       fontBodyLarge,
@@ -50110,13 +50173,13 @@
   const timelineLight = {
     name: "Timeline",
     common: derived,
-    self: self$k
+    self: self$l
   };
 
   const timelineDark = {
     name: "Timeline",
     common: derived$1,
-    self: self$k
+    self: self$l
   };
 
   var commonVariables = {
@@ -50126,7 +50189,7 @@
     iconMargin: "16px"
   };
 
-  function self$j(vars) {
+  function self$k(vars) {
     const {
       borderRadiusLarge,
       fontBodyLarge,
@@ -50191,16 +50254,16 @@
   const toggleButtonLight = {
     name: "ToggleButton",
     common: derived,
-    self: self$j
+    self: self$k
   };
 
   const toggleButtonDark = {
     name: "ToggleButton",
     common: derived$1,
-    self: self$j
+    self: self$k
   };
 
-  function self$i(vars) {
+  function self$j(vars) {
     const {
       iconMedium,
       fontWeight,
@@ -50270,7 +50333,7 @@
       Empty: emptyLight,
       Button: buttonLight
     },
-    self: self$i
+    self: self$j
   });
 
   const transferDark$1 = {
@@ -50283,10 +50346,10 @@
       Empty: emptyDark$1,
       Button: buttonDark
     },
-    self: self$i
+    self: self$j
   };
 
-  function self$h(vars) {
+  function self$i(vars) {
     const {
       fontBodyMedium,
       lineHeightBodyMedium,
@@ -50324,7 +50387,7 @@
       Scrollbar: scrollbarLight,
       Empty: emptyLight
     },
-    self: self$h
+    self: self$i
   });
 
   const treeDark = {
@@ -50335,7 +50398,7 @@
       Scrollbar: scrollbarDark,
       Empty: emptyDark$1
     },
-    self: self$h
+    self: self$i
   };
 
   var rtlStyle = cB("tree", [cM("rtl", `
@@ -50370,7 +50433,7 @@
     }
   };
 
-  function self$g(vars) {
+  function self$h(vars) {
     const {
       containerPrimary,
       shadowDepth2,
@@ -50398,7 +50461,7 @@
       Empty: emptyLight,
       InternalSelection: internalSelectionLight
     },
-    self: self$g
+    self: self$h
   });
 
   const watermarkDark = {
@@ -50427,7 +50490,7 @@
     }
   });
 
-  function self$f(vars) {
+  function self$g(vars) {
     const {
       elementsSecondary,
       elementsSenary,
@@ -50447,7 +50510,7 @@
     peers: {
       Tooltip: tooltipLight
     },
-    self: self$f
+    self: self$g
   });
 
   const imageDark = {
@@ -50456,7 +50519,7 @@
     peers: {
       Tooltip: tooltipDark
     },
-    self: self$f
+    self: self$g
   };
 
   const prevIcon = /* @__PURE__ */ vue.h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ vue.h(
@@ -50510,7 +50573,7 @@
   };
   const imageContextKey = createInjectionKey("u-image");
 
-  var style$17 = c$1([c$1("body >", [cB("image-container", "position: fixed;")]), cB("image-preview-container", `
+  var style$18 = c$1([c$1("body >", [cB("image-container", "position: fixed;")]), cB("image-preview-container", `
     position: fixed;
     left: 0;
     right: 0;
@@ -50594,7 +50657,7 @@
       const themeRef = useTheme(
         "Image",
         "-image",
-        style$17,
+        style$18,
         imageLight,
         props,
         mergedClsPrefixRef
@@ -51525,7 +51588,7 @@
     }
   });
 
-  var style$16 = c$1([c$1("@keyframes spin-rotate", `
+  var style$17 = c$1([c$1("@keyframes spin-rotate", `
     from {
       transform: rotate(0);
     }
@@ -51629,7 +51692,7 @@
       const themeRef = useTheme(
         "Spin",
         "-spin",
-        style$16,
+        style$17,
         spinLight,
         props,
         mergedClsPrefixRef
@@ -52886,7 +52949,7 @@
       const themeRef = useTheme(
         "Upload",
         "-upload",
-        style$18,
+        style$19,
         uploadLight,
         props,
         mergedClsPrefixRef
@@ -53910,7 +53973,7 @@
     }
   });
 
-  var style$15 = cB("dropdown-menu", `
+  var style$16 = cB("dropdown-menu", `
   transform-origin: var(--v-transform-origin);
   background-color: var(--u-color);
   border-radius: var(--u-border-radius);
@@ -54157,7 +54220,7 @@
       const themeRef = useTheme(
         "Dropdown",
         "-dropdown",
-        style$15,
+        style$16,
         dropdownLight,
         props,
         mergedClsPrefixRef
@@ -54551,7 +54614,7 @@
     }
   });
 
-  var style$14 = cB("chat", `
+  var style$15 = cB("chat", `
   height: 100%;
   background-color: transparent;
   box-sizing: border-box;
@@ -54994,7 +55057,7 @@
     setup(props, { slots }) {
       const UChat = vue.inject(chatInjectionKey, null);
       const { mergedClsPrefixRef } = useConfig(props);
-      const themeRef = UChat?.mergedThemeRef ?? useTheme("Chat", "-chat", style$14, chatLight, props, mergedClsPrefixRef);
+      const themeRef = UChat?.mergedThemeRef ?? useTheme("Chat", "-chat", style$15, chatLight, props, mergedClsPrefixRef);
       const { localeRef } = useLocale("Chat");
       const contextMenuShow = vue.ref(false);
       const contextMenuMessage = vue.ref();
@@ -56255,7 +56318,7 @@
     }
   });
 
-  var style$13 = c$1([cB("select", `
+  var style$14 = c$1([cB("select", `
     z-index: auto;
     outline: none;
     width: 100%;
@@ -56427,7 +56490,7 @@
       const themeRef = useTheme(
         "Select",
         "-select",
-        style$13,
+        style$14,
         selectLight,
         props,
         mergedClsPrefixRef
@@ -57261,7 +57324,7 @@
     setup(props, { slots }) {
       const UChat = vue.inject(chatInjectionKey, null);
       const { mergedClsPrefixRef } = useConfig(props);
-      const themeRef = UChat?.mergedThemeRef ?? useTheme("Chat", "-chat", style$14, chatLight, props, mergedClsPrefixRef);
+      const themeRef = UChat?.mergedThemeRef ?? useTheme("Chat", "-chat", style$15, chatLight, props, mergedClsPrefixRef);
       const { localeRef } = useLocale("Chat");
       const cssVarsRef = vue.computed(() => {
         const {
@@ -57933,7 +57996,7 @@
       const themeRef = useTheme(
         "Chat",
         "-chat",
-        style$14,
+        style$15,
         chatLight,
         props,
         mergedClsPrefixRef
@@ -58262,7 +58325,7 @@
     }
   });
 
-  var style$12 = c$1([cB("code", `
+  var style$13 = c$1([cB("code", `
     font-size: var(--u-font-size);
     font-family: var(--u-font-family);
   `, [cM("show-line-numbers", `
@@ -58433,7 +58496,7 @@
       const themeRef = useTheme(
         "Code",
         "-code",
-        style$12,
+        style$13,
         codeLight,
         props,
         mergedClsPrefixRef
@@ -58571,7 +58634,7 @@
     }
   };
 
-  var style$11 = cB("collapse", `
+  var style$12 = cB("collapse", `
     width: 100%;
     background-color: var(--u-background-color);
     border-radius: var(--u-border-radius);
@@ -58654,7 +58717,7 @@
       const themeRef = useTheme(
         "Collapse",
         "-collapse",
-        style$11,
+        style$12,
         collapseLight,
         props,
         mergedClsPrefixRef
@@ -58996,7 +59059,7 @@
     }
   });
 
-  var style$10 = cB("collapse-transition", {
+  var style$11 = cB("collapse-transition", {
     width: "100%"
   }, [fadeInHeightExpandTransition()]);
 
@@ -59035,7 +59098,7 @@
       const mergedThemeRef = useTheme(
         "CollapseTransition",
         "-collapse-transition",
-        style$10,
+        style$11,
         collapseTransitionLight,
         props,
         mergedClsPrefixRef
@@ -59096,7 +59159,7 @@
     }
   });
 
-  function self$e(vars) {
+  function self$f(vars) {
     const {
       borderRadius,
       borderRadiusSmall,
@@ -59143,7 +59206,7 @@
       Input: inputLight,
       Button: buttonLight
     },
-    self: self$e
+    self: self$f
   });
 
   const colorPickerDark = {
@@ -59153,7 +59216,7 @@
       Input: inputDark,
       Button: buttonDark
     },
-    self: self$e
+    self: self$f
   };
 
   function deriveDefaultValue(modes, showAlpha) {
@@ -60111,7 +60174,7 @@
     }
   });
 
-  var style$$ = c$1([cB("color-picker", `
+  var style$10 = c$1([cB("color-picker", `
     display: inline-block;
     box-sizing: border-box;
     height: var(--u-height);
@@ -60383,7 +60446,7 @@
       const themeRef = useTheme(
         "ColorPicker",
         "-color-picker",
-        style$$,
+        style$10,
         colorPickerLight,
         props,
         mergedClsPrefixRef
@@ -64726,7 +64789,7 @@
     wrapperMargin: "0 0 20px"
   };
 
-  function self$d(vars) {
+  function self$e(vars) {
     const {
       elementsSenary,
       borderRadiusLarge
@@ -64741,17 +64804,17 @@
     name: "Crop",
     common: derived,
     peers: {},
-    self: self$d
+    self: self$e
   });
 
   const cropDark = {
     name: "Crop",
     common: derived$1,
     peers: {},
-    self: self$d
+    self: self$e
   };
 
-  var style$_ = c$1([c$1([c$1(".cropper-container", {
+  var style$$ = c$1([c$1([c$1(".cropper-container", {
     direction: "ltr",
     fontSize: "0",
     lineHeight: "0",
@@ -65141,7 +65204,7 @@
       const themeRef = useTheme(
         "Crop",
         "-crop",
-        style$_,
+        style$$,
         cropLight,
         props,
         mergedClsPrefixRef
@@ -65265,9 +65328,77 @@
     }
   });
 
+  const paginationProps = {
+    ...useTheme.props,
+    simple: Boolean,
+    variant: {
+      type: String,
+      default: "default"
+    },
+    hasPrev: {
+      type: Boolean,
+      default: void 0
+    },
+    hasNext: {
+      type: Boolean,
+      default: void 0
+    },
+    page: Number,
+    defaultPage: {
+      type: Number,
+      default: 1
+    },
+    itemCount: Number,
+    pageCount: Number,
+    defaultPageCount: {
+      type: Number,
+      default: 1
+    },
+    showSizePicker: Boolean,
+    sizePickerLabel: String,
+    pageSize: Number,
+    defaultPageSize: Number,
+    pageSizes: {
+      type: Array,
+      default() {
+        return [10];
+      }
+    },
+    showQuickJumper: Boolean,
+    size: {
+      type: String,
+      default: "medium"
+    },
+    disabled: Boolean,
+    pageSlot: {
+      type: Number,
+      default: 9
+    },
+    selectProps: Object,
+    prev: Function,
+    next: Function,
+    goto: Function,
+    prefix: Function,
+    suffix: Function,
+    label: Function,
+    displayOrder: {
+      type: Array,
+      default: ["size-picker", "pages", "quick-jumper"]
+    },
+    to: useAdjustedTo.propTo,
+    "onUpdate:page": [Function, Array],
+    onUpdatePage: [Function, Array],
+    "onUpdate:pageSize": [Function, Array],
+    onUpdatePageSize: [Function, Array],
+    /** @deprecated */
+    onPageSizeChange: [Function, Array],
+    /** @deprecated */
+    onChange: [Function, Array]
+  };
+
   const popselectInjectionKey = createInjectionKey("u-popselect");
 
-  var style$Z = cB("popselect-menu", `
+  var style$_ = cB("popselect-menu", `
   box-shadow: var(--u-menu-box-shadow);
 `);
 
@@ -65321,7 +65452,7 @@
       const themeRef = useTheme(
         "Popselect",
         "-pop-select",
-        style$Z,
+        style$_,
         popselectLight,
         UPopselect.props,
         mergedClsPrefixRef
@@ -65571,7 +65702,7 @@
     border: var(--u-button-border-hover);
     color: var(--u-button-icon-color-hover);
   `)];
-  var style$Y = cB("pagination", `
+  var style$Z = cB("pagination", `
   display: flex;
   width: 100%;
   justify-content: space-between;
@@ -65828,61 +65959,6 @@
     return range;
   }
 
-  const paginationProps = {
-    ...useTheme.props,
-    simple: Boolean,
-    page: Number,
-    defaultPage: {
-      type: Number,
-      default: 1
-    },
-    itemCount: Number,
-    pageCount: Number,
-    defaultPageCount: {
-      type: Number,
-      default: 1
-    },
-    showSizePicker: Boolean,
-    sizePickerLabel: String,
-    pageSize: Number,
-    defaultPageSize: Number,
-    pageSizes: {
-      type: Array,
-      default() {
-        return [10];
-      }
-    },
-    showQuickJumper: Boolean,
-    size: {
-      type: String,
-      default: "medium"
-    },
-    disabled: Boolean,
-    pageSlot: {
-      type: Number,
-      default: 9
-    },
-    selectProps: Object,
-    prev: Function,
-    next: Function,
-    goto: Function,
-    prefix: Function,
-    suffix: Function,
-    label: Function,
-    displayOrder: {
-      type: Array,
-      default: ["size-picker", "pages", "quick-jumper"]
-    },
-    to: useAdjustedTo.propTo,
-    "onUpdate:page": [Function, Array],
-    onUpdatePage: [Function, Array],
-    "onUpdate:pageSize": [Function, Array],
-    onUpdatePageSize: [Function, Array],
-    /** @deprecated */
-    onPageSizeChange: [Function, Array],
-    /** @deprecated */
-    onChange: [Function, Array]
-  };
   var _UPagination = vue.defineComponent({
     name: "Pagination",
     props: paginationProps,
@@ -65919,7 +65995,7 @@
       const themeRef = useTheme(
         "Pagination",
         "-pagination",
-        style$Y,
+        style$Z,
         paginationLight,
         props,
         mergedClsPrefixRef
@@ -65955,6 +66031,18 @@
           return Math.max(pageCount, 1);
         return 1;
       });
+      const mergedHasPrevRef = vue.computed(() => {
+        const { hasPrev } = props;
+        if (hasPrev !== void 0)
+          return hasPrev;
+        return mergedPageRef.value > 1;
+      });
+      const mergedHasNextRef = vue.computed(() => {
+        const { hasNext } = props;
+        if (hasNext !== void 0)
+          return hasNext;
+        return mergedPageRef.value < mergedPageCountRef.value;
+      });
       const jumperValueRef = vue.ref("");
       vue.watchEffect(() => {
         void props.simple;
@@ -66094,13 +66182,13 @@
         }
       }
       function forward() {
-        if (props.disabled)
+        if (props.disabled || !mergedHasNextRef.value)
           return;
-        const page = Math.min(mergedPageRef.value + 1, mergedPageCountRef.value);
+        const page = props.hasNext === void 0 ? Math.min(mergedPageRef.value + 1, mergedPageCountRef.value) : mergedPageRef.value + 1;
         doUpdatePage(page);
       }
       function backward() {
-        if (props.disabled)
+        if (props.disabled || !mergedHasPrevRef.value)
           return;
         const page = Math.max(mergedPageRef.value - 1, 1);
         doUpdatePage(page);
@@ -66274,6 +66362,8 @@
         locale: localeRef,
         selfRef,
         mergedPage: mergedPageRef,
+        mergedHasPrev: mergedHasPrevRef,
+        mergedHasNext: mergedHasNextRef,
         pageItems: vue.computed(() => {
           return pageItemsInfo.value.items;
         }),
@@ -66315,6 +66405,9 @@
         cssVars,
         mergedPage,
         mergedPageCount,
+        mergedHasPrev,
+        mergedHasNext,
+        variant,
         pageItems,
         showSizePicker,
         sizePickerLabel,
@@ -66356,7 +66449,8 @@
             this.themeClass,
             this.rtlEnabled && `${mergedClsPrefix}-pagination--rtl`,
             disabled && `${mergedClsPrefix}-pagination--disabled`,
-            simple && `${mergedClsPrefix}-pagination--simple`
+            simple && `${mergedClsPrefix}-pagination--simple`,
+            variant === "cursor" && `${mergedClsPrefix}-pagination--cursor`
           ],
           style: cssVars
         },
@@ -66377,7 +66471,7 @@
                   class: [
                     `${mergedClsPrefix}-pagination-item`,
                     !renderPrev && `${mergedClsPrefix}-pagination-item--button`,
-                    (mergedPage <= 1 || mergedPage > mergedPageCount || disabled) && `${mergedClsPrefix}-pagination-item--disabled`
+                    (!mergedHasPrev || disabled) && `${mergedClsPrefix}-pagination-item--disabled`
                   ],
                   onClick: handleBackwardClick
                 },
@@ -66391,7 +66485,7 @@
                 }) : /* @__PURE__ */ vue.h(UBaseIcon, { clsPrefix: mergedClsPrefix }, {
                   default: () => this.rtlEnabled ? /* @__PURE__ */ vue.h(ForwardIcon, null) : /* @__PURE__ */ vue.h(BackwardIcon, null)
                 })
-              ), simple ? /* @__PURE__ */ vue.h(vue.Fragment, null, /* @__PURE__ */ vue.h(
+              ), variant === "cursor" ? null : simple ? /* @__PURE__ */ vue.h(vue.Fragment, null, /* @__PURE__ */ vue.h(
                 "div",
                 {
                   class: `${mergedClsPrefix}-pagination-quick-jumper`
@@ -66540,7 +66634,7 @@
                     `${mergedClsPrefix}-pagination-item`,
                     !renderNext && `${mergedClsPrefix}-pagination-item--button`,
                     {
-                      [`${mergedClsPrefix}-pagination-item--disabled`]: mergedPage < 1 || mergedPage >= mergedPageCount || disabled
+                      [`${mergedClsPrefix}-pagination-item--disabled`]: !mergedHasNext || disabled
                     }
                   ],
                   onClick: handleForwardClick
@@ -67195,7 +67289,7 @@
     }
   });
 
-  var style$X = cB("radio", `
+  var style$Y = cB("radio", `
   outline: none;
   position: relative;
   user-select: none;
@@ -67344,7 +67438,7 @@
       const themeRef = useTheme(
         "Radio",
         "-radio",
-        style$X,
+        style$Y,
         radioLight,
         props,
         radio.mergedClsPrefix
@@ -67528,7 +67622,7 @@
     }
   });
 
-  var style$W = cB("radio-group", `
+  var style$X = cB("radio-group", `
   display: inline-block;
   font-size: var(--u-font-size);
 `, [cE("splitor", `
@@ -67708,7 +67802,7 @@
       const themeRef = useTheme(
         "Radio",
         "-radio-group",
-        style$W,
+        style$X,
         radioLight,
         props,
         mergedClsPrefixRef
@@ -70302,7 +70396,7 @@
   });
 
   const fixedColumnStyle = createFixedColumnStyle();
-  var style$V = c$1([cB("data-table", `
+  var style$W = c$1([cB("data-table", `
     width: 100%;
     font-size: var(--u-font-size);
     display: flex;
@@ -72145,7 +72239,7 @@
       const themeRef = useTheme(
         "DataTable",
         "-data-table",
-        style$V,
+        style$W,
         dataTableLight,
         props,
         mergedClsPrefixRef
@@ -76573,7 +76667,7 @@
     }
   });
 
-  var style$U = c$1([cB("time-picker", `
+  var style$V = c$1([cB("time-picker", `
     z-index: auto;
     position: relative;
   `, [cB("time-picker-icon", `
@@ -76768,7 +76862,7 @@
       const themeRef = useTheme(
         "TimePicker",
         "-time-picker",
-        style$U,
+        style$V,
         timePickerLight,
         props,
         mergedClsPrefixRef
@@ -77936,7 +78030,7 @@
     }
   });
 
-  var style$T = c$1([cB("date-picker", `
+  var style$U = c$1([cB("date-picker", `
     position: relative;
     z-index: auto;
   `, [cB("date-picker-icon", `
@@ -78645,7 +78739,7 @@
       const themeRef = useTheme(
         "DatePicker",
         "-date-picker",
-        style$T,
+        style$U,
         datePickerLight,
         props,
         mergedClsPrefixRef
@@ -78887,12 +78981,13 @@
         }
       }
       function handleClear() {
+        doUpdateValue(null, { doConfirm: false });
         doUpdateShow(false);
-        inputInstRef.value?.deactivate();
+        inputInstRef.value?.deactivate?.();
         doClear();
       }
       function handlePanelClear() {
-        inputInstRef.value?.deactivate();
+        inputInstRef.value?.deactivate?.();
         doClear();
       }
       function handlePanelTabOut() {
@@ -79629,7 +79724,7 @@
     }
   });
 
-  function self$c(vars) {
+  function self$d(vars) {
     const {
       brandPrimary100,
       brandPrimary500,
@@ -79691,7 +79786,7 @@
       Select: internalSelectionLight,
       Scrollbar: scrollbarLight
     },
-    self: self$c
+    self: self$d
   });
 
   const datePickerV2Dark = createTheme$1({
@@ -79703,7 +79798,7 @@
       Select: internalSelectionDark,
       Scrollbar: scrollbarDark
     },
-    self: self$c
+    self: self$d
   });
 
   const datePickerV2InjectionKey = Symbol("datePickerV2");
@@ -80495,7 +80590,7 @@
     }
   });
 
-  var style$S = c$1([cB("date-picker-v2", `
+  var style$T = c$1([cB("date-picker-v2", `
     position: relative;
     z-index: auto;
   `, [cB("date-picker-v2-icon", `
@@ -80933,7 +81028,7 @@
       const themeRef = useTheme(
         "DatePickerV2",
         "-date-picker-v2",
-        style$S,
+        style$T,
         datePickerV2Light,
         props,
         mergedClsPrefixRef
@@ -81577,7 +81672,7 @@
     }
   });
 
-  var style$R = c$1([cB("descriptions", {
+  var style$S = c$1([cB("descriptions", {
     fontSize: "var(--u-font-size)"
   }, [cB("descriptions-separator", `
       display: inline-block;
@@ -81732,7 +81827,7 @@
       const themeRef = useTheme(
         "Descriptions",
         "-descriptions",
-        style$R,
+        style$S,
         descriptionsLight,
         props,
         mergedClsPrefixRef
@@ -82074,7 +82169,7 @@
   };
   const dialogPropKeys = keysOf(dialogProps);
 
-  var style$Q = c$1([cB("dialog", `
+  var style$R = c$1([cB("dialog", `
     word-break: break-word;
     position: relative;
     background: var(--u-color);
@@ -82192,7 +82287,7 @@
       const themeRef = useTheme(
         "Dialog",
         "-dialog",
-        style$Q,
+        style$R,
         dialogLight,
         props,
         mergedClsPrefixRef
@@ -82846,7 +82941,7 @@
     }
   });
 
-  var style$P = c$1([cB("modal-container", `
+  var style$Q = c$1([cB("modal-container", `
     position: fixed;
     left: 0;
     top: 0;
@@ -82995,7 +83090,7 @@
       const themeRef = useTheme(
         "Modal",
         "-modal",
-        style$P,
+        style$Q,
         modalLight,
         props,
         mergedClsPrefixRef
@@ -83469,7 +83564,7 @@
     }
   });
 
-  var style$O = cB("divider", `
+  var style$P = cB("divider", `
   position: relative;
   display: flex;
   width: 100%;
@@ -83540,7 +83635,7 @@
       const themeRef = useTheme(
         "Divider",
         "-divider",
-        style$O,
+        style$P,
         dividerLight,
         props,
         mergedClsPrefixRef
@@ -84006,7 +84101,7 @@
     })];
   }
 
-  var style$N = c$1([cB("drawer", `
+  var style$O = c$1([cB("drawer", `
     word-break: break-word;
     position: absolute;
     pointer-events: all;
@@ -84312,7 +84407,7 @@
       const themeRef = useTheme(
         "Drawer",
         "-drawer",
-        style$N,
+        style$O,
         drawerLight,
         props,
         mergedClsPrefixRef
@@ -84907,7 +85002,7 @@
     }
   });
 
-  var style$M = cB("dynamic-input", {
+  var style$N = cB("dynamic-input", {
     width: "100%"
   }, [cB("dynamic-input-item", `
     margin-bottom: 10px;
@@ -85023,7 +85118,7 @@
       const themeRef = useTheme(
         "DynamicInput",
         "-dynamic-input",
-        style$M,
+        style$N,
         dynamicInputLight,
         props,
         mergedClsPrefixRef
@@ -85547,7 +85642,7 @@
     }
   });
 
-  var style$L = cB("dynamic-tags", [cB("input", {
+  var style$M = cB("dynamic-tags", [cB("input", {
     minWidth: "var(--u-input-width)"
   })]);
 
@@ -85607,7 +85702,7 @@
       const themeRef = useTheme(
         "DynamicTags",
         "-dynamic-tags",
-        style$L,
+        style$M,
         dynamicTagsLight,
         props,
         mergedClsPrefixRef
@@ -85899,7 +85994,7 @@
     }
   });
 
-  var style$K = cB("float-button-group", [cB("float-button", `
+  var style$L = cB("float-button-group", [cB("float-button", `
     position: relative;
   `), cM("square-shape", `
     background-color: var(--u-color);
@@ -85962,7 +86057,7 @@
       const themeRef = useTheme(
         "FloatButtonGroup",
         "-float-button-group",
-        style$K,
+        style$L,
         themeLight$4,
         props,
         mergedClsPrefixRef
@@ -86013,7 +86108,7 @@
     }
   });
 
-  var style$J = cB("float-button", `
+  var style$K = cB("float-button", `
   user-select: none;
   cursor: pointer;
   color: var(--u-text-color);
@@ -86143,7 +86238,7 @@
       const themeRef = useTheme(
         "FloatButton",
         "-float-button",
-        style$J,
+        style$K,
         themeLight$3,
         props,
         mergedClsPrefixRef
@@ -86314,10 +86409,7 @@
     }
   });
 
-  const formInjectionKey = createInjectionKey("u-form");
-  const formItemInstsInjectionKey = createInjectionKey("u-form-item-insts");
-
-  var style$I = cB("form", [cM("inline", `
+  var style$J = cB("form", [cM("inline", `
     width: 100%;
     display: inline-flex;
     align-items: flex-start;
@@ -86372,7 +86464,7 @@
     props: formProps,
     setup(props) {
       const { mergedClsPrefixRef } = useConfig(props);
-      useTheme("Form", "-form", style$I, formLight, props, mergedClsPrefixRef);
+      useTheme("Form", "-form", style$J, formLight, props, mergedClsPrefixRef);
       const formItems = {};
       const maxChildLabelWidthRef = vue.ref(void 0);
       const deriveMaxChildLabelWidth = (currentWidth) => {
@@ -87586,7 +87678,7 @@
     })];
   }
 
-  var style$H = cB("form-item", `
+  var style$I = cB("form-item", `
   display: grid;
 `, [cB("form-item-label", `
     grid-area: label;
@@ -87971,7 +88063,7 @@
       const themeRef = useTheme(
         "Form",
         "-form-item",
-        style$H,
+        style$I,
         formLight,
         props,
         mergedClsPrefixRef
@@ -88411,7 +88503,7 @@
       right: percent
     })];
   });
-  var style$G = c$1([cB("row", {
+  var style$H = c$1([cB("row", {
     width: "100%",
     display: "flex",
     flexWrap: "wrap"
@@ -88443,7 +88535,7 @@
     props: rowProps,
     setup(props) {
       const { mergedClsPrefixRef, mergedRtlRef } = useConfig(props);
-      useStyle("-legacy-grid", style$G, mergedClsPrefixRef);
+      useStyle("-legacy-grid", style$H, mergedClsPrefixRef);
       const rtlEnabledRef = useRtl("Row", mergedRtlRef, mergedClsPrefixRef);
       const verticalGutterRef = useMemo(() => {
         const { gutter } = props;
@@ -88789,7 +88881,7 @@
     }
   });
 
-  var style$F = cB("gradient-text", `
+  var style$G = cB("gradient-text", `
   display: inline-block;
   font-weight: var(--u-font-weight);
   -webkit-background-clip: text;
@@ -88847,7 +88939,7 @@
       const themeRef = useTheme(
         "GradientText",
         "-gradient-text",
-        style$F,
+        style$G,
         gradientTextLight,
         props,
         mergedClsPrefixRef
@@ -88911,7 +89003,7 @@
     }
   });
 
-  function self$b(vars) {
+  function self$c(vars) {
     const {
       containerPrimary,
       textPrimary,
@@ -88966,13 +89058,13 @@
   const headerLight = createTheme$1({
     name: "Header",
     common: derived,
-    self: self$b
+    self: self$c
   });
 
   const headerDark = createTheme$1({
     name: "Header",
     common: derived$1,
-    self: vars => self$b(vars)
+    self: vars => self$c(vars)
   });
 
   const SEARCH_DEBOUNCE_MS = 300;
@@ -90376,7 +90468,7 @@
     }
   });
 
-  var style$E = cB("header", `
+  var style$F = cB("header", `
   width: 100%;
   box-sizing: border-box;
   font-size: var(--u-font-size);
@@ -91070,7 +91162,7 @@
       const themeRef = useTheme(
         "Header",
         "-header",
-        style$E,
+        style$F,
         headerLight,
         props,
         mergedClsPrefixRef
@@ -91438,7 +91530,7 @@
     }
   });
 
-  function self$a(vars) {
+  function self$b(vars) {
     const {
       borderRadius,
       fontBodyLarge,
@@ -91478,7 +91570,7 @@
   const heatmapLight = createTheme$1({
     name: "Heatmap",
     common: derived,
-    self: self$a
+    self: self$b
   });
 
   function useLoadingStyleClass(props, themeRef) {
@@ -91627,7 +91719,7 @@
     }
   });
 
-  var style$D = c$1([cB("heatmap", `
+  var style$E = c$1([cB("heatmap", `
     display: flex;
     flex-direction: column;
     max-width: fit-content;
@@ -91901,7 +91993,7 @@
       const themeRef = useTheme(
         "Heatmap",
         "-heatmap",
-        style$D,
+        style$E,
         heatmapLight,
         props,
         mergedClsPrefixRef
@@ -92213,7 +92305,7 @@
     name: "Heatmap",
     common: derived$1,
     self(vars) {
-      const lightSelf = self$a(vars);
+      const lightSelf = self$b(vars);
       return {
         ...lightSelf,
         activeColors: ["#0d4429", "#006d32", "#26a641", "#39d353"],
@@ -92328,7 +92420,7 @@
     }
   });
 
-  function self$9(vars) {
+  function self$a(vars) {
     const {
       elementsPrimary,
       elementsTertiary,
@@ -92354,13 +92446,13 @@
   const iconBarLight = {
     name: "IconBar",
     common: derived,
-    self: self$9
+    self: self$a
   };
 
   const iconBarDark = {
     name: "IconBar",
     common: derived$1,
-    self: self$9
+    self: self$a
   };
 
   const iconBarInjectionKey = createInjectionKey("icon-bar");
@@ -92393,7 +92485,7 @@
     itemSize: [Number, String]
   };
 
-  var style$C = c$1([cB("icon-bar", `
+  var style$D = 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", `
@@ -92456,7 +92548,7 @@
       const themeRef = useTheme(
         "IconBar",
         "-icon-bar-item",
-        style$C,
+        style$D,
         iconBarLight,
         props,
         mergedClsPrefixRef
@@ -92534,7 +92626,7 @@
       const themeRef = useTheme(
         "IconBar",
         "-icon-bar",
-        style$C,
+        style$D,
         iconBarLight,
         props,
         mergedClsPrefixRef
@@ -92587,6 +92679,607 @@
     }
   });
 
+  const iconPackInputLight = {
+    ...inputLight,
+    self(vars) {
+      const originalInputSelf = self$1o(vars);
+      const {
+        elementsDarkQuinary,
+        elementsPrimary
+      } = vars;
+      return {
+        ...originalInputSelf,
+        heightMedium: "44px",
+        borderRadius: "12px",
+        paddingMedium: "0 20px",
+        border: `2px solid ${elementsDarkQuinary}`,
+        borderHover: `2px solid ${elementsPrimary}`,
+        borderFocus: `2px solid ${elementsPrimary}`,
+        boxShadowFocus: "none"
+      };
+    }
+  };
+  function self$9(vars) {
+    const {
+      staticWhite,
+      textPrimary,
+      textSecondary,
+      elementsTertiary,
+      elementsQuaternary,
+      elementsQuinary,
+      brandPrimary500
+    } = vars;
+    return {
+      containerColor: staticWhite,
+      borderRadius: "24px",
+      titleTextColor: textPrimary,
+      descriptionTextColor: textSecondary,
+      groupTitleTextColor: textPrimary,
+      groupCounterTextColor: textSecondary,
+      cardColor: elementsTertiary,
+      cardColorHover: elementsQuaternary,
+      cardColorPressed: elementsQuinary,
+      cardColorSelected: brandPrimary500,
+      cardBorderRadius: "20px",
+      cardIconColor: textPrimary,
+      cardIconColorSelected: staticWhite,
+      cardLabelTextColor: textPrimary,
+      cardLabelTextColorSelected: staticWhite,
+      dividerColor: elementsQuaternary
+    };
+  }
+  const iconPackLight = createTheme$1({
+    name: "IconPack",
+    common: derived,
+    peers: {
+      Input: iconPackInputLight,
+      Scrollbar: scrollbarLight,
+      Empty: emptyLight
+    },
+    self: self$9
+  });
+
+  const iconPackDark = createTheme$1({
+    name: "IconPack",
+    common: derived$1,
+    peers: {
+      Input: inputDark,
+      Scrollbar: scrollbarDark,
+      Empty: emptyDark$1
+    },
+    self: vars => {
+      const lightVars = self$9(vars);
+      return {
+        ...lightVars
+      };
+    }
+  });
+
+  const iconPackProps = {
+    ...useTheme.props,
+    pack: [Object, String],
+    value: String,
+    defaultValue: {
+      type: String,
+      default: null
+    },
+    disabled: {
+      type: Boolean,
+      default: void 0
+    },
+    title: String,
+    description: String,
+    searchable: {
+      type: Boolean,
+      default: true
+    },
+    searchValue: String,
+    defaultSearchValue: {
+      type: String,
+      default: ""
+    },
+    searchPlaceholder: String,
+    searchDebounce: {
+      type: Number,
+      default: 200
+    },
+    grouped: {
+      type: Boolean,
+      default: true
+    },
+    columns: {
+      type: [Number, String],
+      default: "auto"
+    },
+    minColumnWidth: {
+      type: [Number, String],
+      default: 150
+    },
+    iconSize: {
+      type: [Number, String],
+      default: 40
+    },
+    height: [Number, String],
+    maxBodyHeight: {
+      type: [Number, String],
+      default: 496
+    },
+    contentPadding: {
+      type: [Number, String],
+      default: 24
+    },
+    async: {
+      type: Boolean,
+      default: void 0
+    },
+    copyable: {
+      type: Boolean,
+      default: true
+    },
+    formatCopy: Function,
+    formatGroupLabel: Function,
+    formatIconLabel: Function,
+    showGroupCounter: {
+      type: Boolean,
+      default: true
+    },
+    emptyText: String,
+    emptyProps: Object,
+    searchInputProps: Object,
+    scrollbarProps: Object
+  };
+  const iconPackInjectionKey = createInjectionKey("icon-pack");
+
+  var style$C = cB("icon-pack", `
+  box-sizing: border-box;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 28px;
+  background-color: var(--u-icon-pack-container-color);
+  border-radius: var(--u-icon-pack-border-radius);
+  transition: background-color .3s var(--u-bezier);
+`, [cM("disabled", `
+    opacity: .5;
+  `, [cB("icon-pack-card", `
+      cursor: not-allowed;
+    `)]), cE("header", `
+    display: flex;
+    align-items: flex-start;
+    gap: 32px;
+    padding: var(--u-icon-pack-content-padding) var(--u-icon-pack-content-padding) 0;
+  `, [cE("header-main", `
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    `), cE("title", `
+      margin: 0;
+      font-size: 22px;
+      line-height: 32px;
+      font-weight: 700;
+      color: var(--u-icon-pack-title-text-color);
+      transition: color .3s var(--u-bezier);
+    `), cE("description", `
+      margin: 0;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      color: var(--u-icon-pack-description-text-color);
+      transition: color .3s var(--u-bezier);
+    `)]), cE("search", `
+    padding: 0 var(--u-icon-pack-content-padding);
+  `), cE("body", `
+    min-height: 0;
+  `, [c$1(".u-scrollbar-content", `
+      padding: 0 var(--u-icon-pack-content-padding) var(--u-icon-pack-content-padding);
+    `)]), cE("groups", `
+    display: flex;
+    flex-direction: column;
+    gap: 28px;
+  `), cE("group", `
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  `), cE("group-header", `
+    display: flex;
+    align-items: flex-end;
+    gap: 8px;
+  `, [cE("group-title", `
+      margin: 0;
+      font-size: 18px;
+      line-height: 28px;
+      font-weight: 700;
+      color: var(--u-icon-pack-group-title-text-color);
+      transition: color .3s var(--u-bezier);
+    `), cE("group-counter", `
+      font-size: 14px;
+      line-height: 24px;
+      font-weight: 500;
+      color: var(--u-icon-pack-group-counter-text-color);
+      transition: color .3s var(--u-bezier);
+    `)]), cE("grid", `
+    display: grid;
+    grid-template-columns: var(--u-icon-pack-grid-template-columns);
+    gap: 20px;
+  `), cB("icon-pack-card", `
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 24px;
+    padding: 24px 12px;
+    border: none;
+    outline: none;
+    background-color: var(--u-icon-pack-card-color);
+    border-radius: var(--u-icon-pack-card-border-radius);
+    cursor: pointer;
+    user-select: none;
+    transition:
+      background-color .2s var(--u-bezier),
+      color .2s var(--u-bezier);
+  `, [c$1("&:hover", `
+      background-color: var(--u-icon-pack-card-color-hover);
+    `), c$1("&:active", `
+      background-color: var(--u-icon-pack-card-color-pressed);
+    `), cM("selected", `
+      background-color: var(--u-icon-pack-card-color-selected);
+      --u-icon-pack-card-icon-color: var(--u-icon-pack-card-icon-color-selected);
+      --u-icon-pack-card-label-text-color: var(--u-icon-pack-card-label-text-color-selected);
+    `, [c$1("&:hover", `
+        background-color: var(--u-icon-pack-card-color-selected);
+      `)]), cE("icon", `
+      flex-shrink: 0;
+      width: var(--u-icon-pack-icon-size);
+      height: var(--u-icon-pack-icon-size);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--u-icon-pack-card-icon-color);
+    `, [c$1("svg", `
+        width: var(--u-icon-pack-icon-size);
+        height: var(--u-icon-pack-icon-size);
+      `)]), cE("label", `
+      max-width: 100%;
+      padding: 0 12px;
+      font-size: 12px;
+      line-height: 16px;
+      font-weight: 600;
+      text-align: center;
+      color: var(--u-icon-pack-card-label-text-color);
+      transition: color .2s var(--u-bezier);
+    `)]), cE("empty", `
+    padding: 40px 0;
+    display: flex;
+    justify-content: center;
+  `), cE("footer", `
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding: 16px var(--u-icon-pack-content-padding) var(--u-icon-pack-content-padding);
+    border-top: 1px solid var(--u-icon-pack-divider-color);
+  `)]);
+
+  var _UIconPack = vue.defineComponent({
+    name: "IconPack",
+    props: iconPackProps,
+    emits: ["update:value", "update:searchValue", "select", "copy", "search"],
+    setup(props, { emit }) {
+      const { mergedClsPrefixRef, mergedIconPacksRef } = useConfig(props);
+      const themeRef = useTheme(
+        "IconPack",
+        "-icon-pack",
+        style$C,
+        iconPackLight,
+        props,
+        mergedClsPrefixRef
+      );
+      const formItem = useFormItem(props);
+      const { mergedDisabledRef } = formItem;
+      vue.provide(iconPackInjectionKey, {
+        mergedClsPrefixRef
+      });
+      const uncontrolledValueRef = vue.ref(props.defaultValue);
+      const mergedValueRef = vue.computed(
+        () => props.value !== void 0 ? props.value : uncontrolledValueRef.value
+      );
+      const uncontrolledSearchRef = vue.ref(props.defaultSearchValue);
+      const mergedSearchRef = vue.computed(
+        () => props.searchValue !== void 0 ? props.searchValue : uncontrolledSearchRef.value
+      );
+      const mergedPackRef = vue.computed(() => {
+        const { pack } = props;
+        if (pack && typeof pack === "object")
+          return pack;
+        const config = mergedIconPacksRef?.value;
+        if (!config)
+          return void 0;
+        const name = typeof pack === "string" ? pack : config.defaultPackName;
+        return config.packs.find((p) => p.name === name);
+      });
+      function renderIconVNode(name) {
+        const pack = mergedPackRef.value;
+        if (!pack)
+          return null;
+        if (props.async === true && typeof pack.renderAsyncIcon === "function")
+          return pack.renderAsyncIcon(name);
+        if (typeof pack.renderIcon === "function")
+          return pack.renderIcon(name);
+        if (typeof pack.renderAsyncIcon === "function")
+          return pack.renderAsyncIcon(name);
+        return null;
+      }
+      const allIconsRef = vue.computed(() => {
+        const pack = mergedPackRef.value;
+        if (!pack)
+          return [];
+        const format = props.formatIconLabel;
+        return pack.iconNames.map((name) => {
+          const slashIndex = name.indexOf("/");
+          const group = slashIndex === -1 ? "" : name.slice(0, slashIndex);
+          const defaultLabel = slashIndex === -1 ? name : name.slice(slashIndex + 1);
+          return {
+            name,
+            group,
+            label: format ? format(name, group) : defaultLabel,
+            render: () => renderIconVNode(name)
+          };
+        });
+      });
+      const searchIndexRef = vue.computed(
+        () => allIconsRef.value.map(
+          (icon) => `${icon.name}
+${icon.label}`.toLowerCase()
+        )
+      );
+      const debouncedQueryRef = vue.ref(
+        mergedSearchRef.value.trim().toLowerCase()
+      );
+      const applyQuery = (value) => {
+        debouncedQueryRef.value = value.trim().toLowerCase();
+      };
+      const applyQueryDebounced = debounce(applyQuery, props.searchDebounce);
+      vue.watch(mergedSearchRef, (value) => {
+        if (props.searchDebounce <= 0)
+          applyQuery(value);
+        else applyQueryDebounced(value);
+      });
+      const filteredIconsRef = vue.computed(() => {
+        const query = debouncedQueryRef.value;
+        const icons = allIconsRef.value;
+        if (!query)
+          return icons;
+        const searchIndex = searchIndexRef.value;
+        const result = [];
+        for (let index = 0; index < icons.length; index++) {
+          if (searchIndex[index].includes(query))
+            result.push(icons[index]);
+        }
+        return result;
+      });
+      const groupsRef = vue.computed(() => {
+        const icons = filteredIconsRef.value;
+        if (!props.grouped)
+          return [{ key: "", label: "", icons }];
+        const map = /* @__PURE__ */ new Map();
+        for (const icon of icons) {
+          const existing = map.get(icon.group);
+          if (existing)
+            existing.push(icon);
+          else map.set(icon.group, [icon]);
+        }
+        const format = props.formatGroupLabel;
+        return Array.from(map, ([key, groupIcons]) => ({
+          key,
+          label: format ? format(key) : key,
+          icons: groupIcons
+        }));
+      });
+      const isEmptyRef = vue.computed(
+        () => filteredIconsRef.value.length === 0
+      );
+      function handleSearch(value) {
+        if (props.searchValue === void 0)
+          uncontrolledSearchRef.value = value;
+        emit("update:searchValue", value);
+        emit("search", value);
+      }
+      function handleSelect(icon) {
+        if (mergedDisabledRef.value)
+          return;
+        if (props.value === void 0)
+          uncontrolledValueRef.value = icon.name;
+        emit("update:value", icon.name);
+        emit("select", icon.name, icon);
+        formItem.triggerFormInput();
+        formItem.triggerFormChange();
+        if (props.copyable) {
+          const text = props.formatCopy ? props.formatCopy(icon.name, icon) : icon.name;
+          void copyToClipboard(text).catch(() => {
+          });
+          emit("copy", text, icon);
+        }
+      }
+      const cssVarsRef = vue.computed(() => {
+        const {
+          common: { cubicBezierEaseInOut },
+          self: {
+            containerColor,
+            borderRadius,
+            titleTextColor,
+            descriptionTextColor,
+            groupTitleTextColor,
+            groupCounterTextColor,
+            cardColor,
+            cardColorHover,
+            cardColorPressed,
+            cardColorSelected,
+            cardBorderRadius,
+            cardIconColor,
+            cardIconColorSelected,
+            cardLabelTextColor,
+            cardLabelTextColorSelected,
+            dividerColor
+          }
+        } = themeRef.value;
+        const { columns } = props;
+        const gridTemplateColumns = columns === void 0 || columns === null || columns === "auto" ? `repeat(auto-fill, minmax(${formatLength(props.minColumnWidth)}, 1fr))` : `repeat(${columns}, minmax(0, 1fr))`;
+        return {
+          "--u-bezier": cubicBezierEaseInOut,
+          "--u-icon-pack-container-color": containerColor,
+          "--u-icon-pack-border-radius": borderRadius,
+          "--u-icon-pack-title-text-color": titleTextColor,
+          "--u-icon-pack-description-text-color": descriptionTextColor,
+          "--u-icon-pack-group-title-text-color": groupTitleTextColor,
+          "--u-icon-pack-group-counter-text-color": groupCounterTextColor,
+          "--u-icon-pack-card-color": cardColor,
+          "--u-icon-pack-card-color-hover": cardColorHover,
+          "--u-icon-pack-card-color-pressed": cardColorPressed,
+          "--u-icon-pack-card-color-selected": cardColorSelected,
+          "--u-icon-pack-card-border-radius": cardBorderRadius,
+          "--u-icon-pack-card-icon-color": cardIconColor,
+          "--u-icon-pack-card-icon-color-selected": cardIconColorSelected,
+          "--u-icon-pack-card-label-text-color": cardLabelTextColor,
+          "--u-icon-pack-card-label-text-color-selected": cardLabelTextColorSelected,
+          "--u-icon-pack-divider-color": dividerColor,
+          "--u-icon-pack-grid-template-columns": gridTemplateColumns,
+          "--u-icon-pack-icon-size": formatLength(props.iconSize),
+          "--u-icon-pack-content-padding": formatLength(props.contentPadding)
+        };
+      });
+      const themeClassHandle = useThemeClass(
+        "icon-pack",
+        vue.computed(() => ""),
+        cssVarsRef,
+        props
+      );
+      return {
+        mergedClsPrefix: mergedClsPrefixRef,
+        mergedTheme: themeRef,
+        cssVars: cssVarsRef,
+        themeClass: themeClassHandle?.themeClass,
+        onRender: themeClassHandle?.onRender,
+        mergedValue: mergedValueRef,
+        mergedSearch: mergedSearchRef,
+        mergedDisabled: mergedDisabledRef,
+        groups: groupsRef,
+        isEmpty: isEmptyRef,
+        handleSearch,
+        handleSelect
+      };
+    },
+    render() {
+      const {
+        mergedClsPrefix: cls,
+        $slots,
+        title,
+        description,
+        searchable,
+        grouped,
+        showGroupCounter,
+        searchPlaceholder,
+        searchInputProps,
+        scrollbarProps,
+        emptyText,
+        emptyProps,
+        height,
+        maxBodyHeight,
+        mergedDisabled
+      } = this;
+      this.onRender?.();
+      const showHeader = !!(title || description) || !!$slots.header || !!$slots.title || !!$slots.description;
+      const hasFixedHeight = height !== void 0 && height !== null;
+      const bodyStyle = hasFixedHeight ? { flex: "1 1 auto", minHeight: 0 } : { maxHeight: formatLength(maxBodyHeight) };
+      const renderCard = (icon) => {
+        const selected = this.mergedValue === icon.name;
+        return /* @__PURE__ */ vue.h(
+          "div",
+          {
+            key: icon.name,
+            class: [
+              `${cls}-icon-pack-card`,
+              selected && `${cls}-icon-pack-card--selected`
+            ],
+            role: "button",
+            tabindex: mergedDisabled ? -1 : 0,
+            "aria-pressed": selected,
+            "aria-disabled": mergedDisabled,
+            onClick: () => this.handleSelect(icon),
+            onKeydown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                this.handleSelect(icon);
+              }
+            }
+          },
+          /* @__PURE__ */ vue.h("div", { class: `${cls}-icon-pack-card__icon` }, icon.render()),
+          /* @__PURE__ */ vue.h(
+            UPerformantEllipsis$1,
+            {
+              class: `${cls}-icon-pack-card__label`,
+              lineClamp: 1
+            },
+            { default: () => icon.label }
+          )
+        );
+      };
+      return /* @__PURE__ */ vue.h(
+        "div",
+        {
+          class: [
+            `${cls}-icon-pack`,
+            this.themeClass,
+            mergedDisabled && `${cls}-icon-pack--disabled`
+          ],
+          style: {
+            ...this.cssVars,
+            ...hasFixedHeight ? { height: formatLength(height) } : {}
+          }
+        },
+        showHeader && /* @__PURE__ */ vue.h("div", { class: `${cls}-icon-pack__header` }, /* @__PURE__ */ vue.h("div", { class: `${cls}-icon-pack__header-main` }, resolveSlot($slots.header, () => [
+          (title || $slots.title) && /* @__PURE__ */ vue.h("div", { class: `${cls}-icon-pack__title` }, $slots.title ? $slots.title() : title),
+          (description || $slots.description) && /* @__PURE__ */ vue.h("div", { class: `${cls}-icon-pack__description` }, $slots.description ? $slots.description() : description)
+        ]))),
+        searchable && /* @__PURE__ */ vue.h("div", { class: `${cls}-icon-pack__search` }, /* @__PURE__ */ vue.h(
+          UInput$1,
+          {
+            value: this.mergedSearch,
+            clearable: true,
+            disabled: mergedDisabled,
+            placeholder: searchPlaceholder,
+            onUpdateValue: this.handleSearch,
+            ...searchInputProps
+          },
+          { prefix: () => vue.h(SearchOutlineIcon) }
+        )),
+        /* @__PURE__ */ vue.h(
+          Scrollbar,
+          {
+            class: `${cls}-icon-pack__body`,
+            style: bodyStyle,
+            ...scrollbarProps
+          },
+          {
+            default: () => this.isEmpty ? /* @__PURE__ */ vue.h("div", { class: `${cls}-icon-pack__empty` }, resolveSlot($slots.empty, () => [
+              /* @__PURE__ */ vue.h(
+                UEmpty$1,
+                {
+                  ...emptyProps,
+                  size: "large",
+                  description: emptyText,
+                  theme: this.mergedTheme.peers.Empty,
+                  themeOverrides: this.mergedTheme.peerOverrides.Empty
+                }
+              )
+            ])) : /* @__PURE__ */ vue.h("div", { class: `${cls}-icon-pack__groups` }, this.groups.map((group) => /* @__PURE__ */ vue.h("div", { key: group.key, class: `${cls}-icon-pack__group` }, grouped && group.key !== "" && /* @__PURE__ */ vue.h("div", { class: `${cls}-icon-pack__group-header` }, /* @__PURE__ */ vue.h("div", { class: `${cls}-icon-pack__group-title` }, group.label), showGroupCounter && /* @__PURE__ */ vue.h("span", { class: `${cls}-icon-pack__group-counter` }, "(", group.icons.length, ")")), /* @__PURE__ */ vue.h("div", { class: `${cls}-icon-pack__grid` }, group.icons.map(renderCard)))))
+          }
+        ),
+        $slots.footer && /* @__PURE__ */ vue.h("div", { class: `${cls}-icon-pack__footer` }, $slots.footer())
+      );
+    }
+  });
+
   function self$8(vars) {
     const {
       brandPrimary500,
@@ -115167,6 +115860,7 @@
   const UIcon = wrap(UIcon$1);
   const UIconBar = wrap(_UIconBar);
   const UIconBarItem = wrap(_UIconBarItem);
+  const UIconPack = wrap(_UIconPack);
   const UIconWrapper = wrap(UIconWrapper$1);
   const UImage = wrap(_UImage);
   const UImageGroup = wrap(_UImageGroup);
@@ -115362,6 +116056,7 @@
     UIcon: UIcon,
     UIconBar: UIconBar,
     UIconBarItem: UIconBarItem,
+    UIconPack: UIconPack,
     UIconWrapper: UIconWrapper,
     UImage: UImage,
     UImageGroup: UImageGroup,
@@ -115542,6 +116237,9 @@
     highlightProps: highlightProps,
     iconBarItemProps: iconBarItemProps,
     iconBarProps: iconBarProps,
+    iconPackDark: iconPackDark,
+    iconPackLight: iconPackLight,
+    iconPackProps: iconPackProps,
     iconProps: iconProps,
     iconWrapperProps: iconWrapperProps,
     imageGroupProps: imageGroupProps,
@@ -115593,6 +116291,7 @@
     radioGroupProps: radioGroupProps,
     radioProps: radioProps,
     rateProps: rateProps,
+    renderAsyncIcon: renderAsyncIcon,
     renderBadge: renderBadge,
     renderConfig: renderConfig,
     renderIcon: renderIcon,
@@ -115666,7 +116365,7 @@
     });
   }
 
-  var version = "2.1.3";
+  var version = "2.2.0";
 
   function create({
     componentPrefix = "U",
@@ -115822,6 +116521,7 @@
     Crop: cropLight,
     Header: headerLight,
     IconBar: iconBarLight,
+    IconPack: iconPackLight,
     QrCode: themeLight$1
   };
 
@@ -116445,6 +117145,7 @@
     Crop: cropDark,
     Header: headerDark,
     IconBar: iconBarDark,
+    IconPack: iconPackDark,
     QrCode: qrcodeDark
   };
 
@@ -116561,6 +117262,7 @@
   exports.UIcon = UIcon;
   exports.UIconBar = UIconBar;
   exports.UIconBarItem = UIconBarItem;
+  exports.UIconPack = UIconPack;
   exports.UIconWrapper = UIconWrapper;
   exports.UImage = UImage;
   exports.UImageGroup = UImageGroup;
@@ -116791,6 +117493,9 @@
   exports.iconBarItemProps = iconBarItemProps;
   exports.iconBarProps = iconBarProps;
   exports.iconDark = iconDark$1;
+  exports.iconPackDark = iconPackDark;
+  exports.iconPackLight = iconPackLight;
+  exports.iconPackProps = iconPackProps;
   exports.iconProps = iconProps;
   exports.iconWrapperProps = iconWrapperProps;
   exports.imageGroupProps = imageGroupProps;
@@ -116866,6 +117571,7 @@
   exports.radioProps = radioProps;
   exports.rateDark = rateDark;
   exports.rateProps = rateProps;
+  exports.renderAsyncIcon = renderAsyncIcon;
   exports.renderBadge = renderBadge;
   exports.renderConfig = renderConfig;
   exports.renderIcon = renderIcon;