@uzum-tech/ui 2.0.0-beta.9 → 2.0.0

package/dist/index.mjs

@@ -5805,6 +5805,7 @@ function useConfig(props = {}, options = {
     inlineThemeDisabled: UConfigProvider?.inlineThemeDisabled,
     mergedRtlRef: UConfigProvider?.mergedRtlRef,
     mergedComponentPropsRef: UConfigProvider?.mergedComponentPropsRef,
+    mergedIconPacksRef: UConfigProvider?.mergedIconPacksRef,
     mergedBreakpointsRef: UConfigProvider?.mergedBreakpointsRef,
     mergedBorderedRef: computed(() => {
       const {
@@ -13045,6 +13046,28 @@ var UBaseIcon = defineComponent({
   }
 });
 
+var style$1U = cB("icon", `
+  height: 1em;
+  width: 1em;
+  line-height: 1em;
+  text-align: center;
+  display: inline-block;
+  position: relative;
+  fill: currentColor;
+  transform: translateZ(0);
+`, [cM("color-transition", {
+  transition: "color .3s var(--u-bezier)"
+}), cM("depth", {
+  color: "var(--u-color)"
+}, [c$1("svg", {
+  opacity: "var(--u-opacity)",
+  transition: "opacity .3s var(--u-bezier)"
+})]), c$1("svg", {
+  height: "100%",
+  width: "100%",
+  display: "block"
+})]);
+
 const derived$1 = {
   name: "common",
   ...commonVariables$6,
@@ -13209,6 +13232,154 @@ const derived = {
   boxShadow2: "0px 20px 80px 0px rgba(0, 0, 0, 0.07)"
 };
 
+function self$1B(vars) {
+  const {
+    elementsPrimary
+  } = vars;
+  return {
+    color: elementsPrimary,
+    opacity1Depth: "0.82",
+    opacity2Depth: "0.72",
+    opacity3Depth: "0.38",
+    opacity4Depth: "0.24",
+    opacity5Depth: "0.18"
+  };
+}
+const iconLight = {
+  name: "Icon",
+  common: derived,
+  self: self$1B
+};
+
+const iconDark$1 = {
+  name: "Icon",
+  common: derived$1,
+  self: self$1B
+};
+
+const iconProps = {
+  ...useTheme.props,
+  depth: [String, Number],
+  size: [Number, String],
+  color: String,
+  component: Object,
+  name: String,
+  pack: String,
+  onClick: Function
+};
+const UIconImpl = defineComponent({
+  _n_icon__: true,
+  name: "Icon",
+  props: iconProps,
+  setup(props) {
+    const {
+      mergedClsPrefixRef,
+      mergedIconPacksRef,
+      inlineThemeDisabled
+    } = useConfig(props);
+    const themeRef = useTheme("Icon", "-icon", style$1U, iconLight, props, mergedClsPrefixRef);
+    const cssVarsRef = computed(() => {
+      const {
+        depth
+      } = props;
+      const {
+        common: {
+          cubicBezierEaseInOut
+        },
+        self
+      } = themeRef.value;
+      if (depth !== void 0) {
+        const {
+          color,
+          [`opacity${depth}Depth`]: opacity
+        } = self;
+        return {
+          "--u-bezier": cubicBezierEaseInOut,
+          "--u-color": color,
+          "--u-opacity": opacity
+        };
+      }
+      return {
+        "--u-bezier": cubicBezierEaseInOut,
+        "--u-color": "",
+        "--u-opacity": ""
+      };
+    });
+    const themeClassHandle = inlineThemeDisabled ? useThemeClass("icon", computed(() => `${props.depth || "d"}`), cssVarsRef, props) : void 0;
+    const resolvedPackedIconRef = computed(() => {
+      const {
+        name,
+        pack
+      } = props;
+      if (!name) return null;
+      const config = mergedIconPacksRef?.value;
+      if (!config) {
+        warn("icon", "no icon packs configured on `u-config-provider`");
+        return null;
+      }
+      const targetName = pack ?? config.defaultPackName;
+      const target = config.packs.find(p => p.name === targetName);
+      if (!target) {
+        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;
+      }
+      return target.renderIcon(name);
+    });
+    return {
+      mergedClsPrefix: mergedClsPrefixRef,
+      resolvedPackedIcon: resolvedPackedIconRef,
+      mergedStyle: computed(() => {
+        const {
+          size,
+          color
+        } = props;
+        return {
+          fontSize: formatLength(size),
+          color
+        };
+      }),
+      cssVars: inlineThemeDisabled ? void 0 : cssVarsRef,
+      themeClass: themeClassHandle?.themeClass,
+      onRender: themeClassHandle?.onRender
+    };
+  },
+  render() {
+    const {
+      $parent,
+      depth,
+      mergedClsPrefix,
+      component,
+      onRender,
+      themeClass,
+      resolvedPackedIcon
+    } = this;
+    if ($parent?.$options?._n_icon__) {
+      warn("icon", "don't wrap `u-icon` inside `u-icon`");
+    }
+    onRender?.();
+    return h(UBaseIcon, {
+      clsPrefix: mergedClsPrefix,
+      role: "img",
+      class: [`${mergedClsPrefix}-icon`, themeClass, {
+        [`${mergedClsPrefix}-icon--depth`]: depth,
+        [`${mergedClsPrefix}-icon--color-transition`]: depth !== void 0
+      }],
+      style: [this.cssVars, this.mergedStyle],
+      onClick: this.onClick
+    }, {
+      default: () => resolvedPackedIcon ?? (component ? h(component) : this.$slots.default?.())
+    });
+  }
+});
+const UIcon$1 = UIconImpl;
+
 var commonVars$b = {
   iconWidth: "44px",
   iconHeight: "44px",
@@ -13221,7 +13392,7 @@ var commonVars$b = {
   avatarSize: "16px"
 };
 
-function self$1B(vars) {
+function self$1A(vars) {
   const {
     heightHuge,
     fontBodyLarge,
@@ -13251,16 +13422,16 @@ function self$1B(vars) {
 const accountOptionLight = {
   name: "AccountOption",
   common: derived,
-  self: self$1B
+  self: self$1A
 };
 
 const accountOptionDark = {
   name: "AccountOption",
   common: derived$1,
-  self: self$1B
+  self: self$1A
 };
 
-var style$1U = cB("base-account-option", `
+var style$1T = cB("base-account-option", `
   display: flex;
   align-items: center;
   position: relative;
@@ -13315,7 +13486,7 @@ var UBaseAccountOption = defineComponent({
     const themeRef = useTheme(
       "AccountOption",
       "-base-account-option",
-      style$1U,
+      style$1T,
       accountOptionLight,
       props,
       mergedClsPrefixRef
@@ -14754,7 +14925,7 @@ function iconSwitchTransition({
   })];
 }
 
-var style$1T = cB("base-clear", `
+var style$1S = cB("base-clear", `
   flex-shrink: 0;
   height: 1em;
   width: 1em;
@@ -14795,7 +14966,7 @@ var UBaseClear = defineComponent({
     onClear: Function
   },
   setup(props) {
-    useStyle("-base-clear", style$1T, toRef(props, "clsPrefix"));
+    useStyle("-base-clear", style$1S, toRef(props, "clsPrefix"));
     return {
       handleMouseDown(e) {
         e.preventDefault();
@@ -14826,7 +14997,7 @@ var UBaseClear = defineComponent({
   }
 });
 
-var style$1S = cB("base-close", `
+var style$1R = cB("base-close", `
   display: flex;
   align-items: center;
   justify-content: center;
@@ -14898,7 +15069,7 @@ var UBaseClose = defineComponent({
     absolute: Boolean
   },
   setup(props) {
-    useStyle("-base-close", style$1S, toRef(props, "clsPrefix"));
+    useStyle("-base-close", style$1R, toRef(props, "clsPrefix"));
     return () => {
       const { clsPrefix, disabled, absolute, round, isButtonTag } = props;
       const Tag = isButtonTag ? "button" : "div";
@@ -15057,7 +15228,7 @@ var FocusDetector = defineComponent({
   }
 });
 
-var style$1R = c$1([c$1("@keyframes loading-container-rotate", `
+var style$1Q = c$1([c$1("@keyframes loading-container-rotate", `
     to {
       -webkit-transform: rotate(360deg);
       transform: rotate(360deg);
@@ -15227,7 +15398,7 @@ var UBaseLoading = defineComponent({
     ...exposedLoadingProps
   },
   setup(props) {
-    useStyle("-base-loading", style$1R, toRef(props, "clsPrefix"));
+    useStyle("-base-loading", style$1Q, toRef(props, "clsPrefix"));
   },
   render() {
     const { clsPrefix, radius, strokeWidth, stroke, scale } = this;
@@ -15357,7 +15528,7 @@ function fadeInTransition({
   })];
 }
 
-var style$1Q = cB("base-menu-mask", `
+var style$1P = cB("base-menu-mask", `
   position: absolute;
   left: 0;
   right: 0;
@@ -15380,7 +15551,7 @@ var UBaseMenuMask = defineComponent({
     }
   },
   setup(props) {
-    useStyle("-base-menu-mask", style$1Q, toRef(props, "clsPrefix"));
+    useStyle("-base-menu-mask", style$1P, toRef(props, "clsPrefix"));
     const messageRef = ref(null);
     let timerId = null;
     const uncontrolledShowRef = ref(false);
@@ -15568,7 +15739,7 @@ const commonVars$a = {
   railColor: "transparent"
 };
 
-function self$1A(vars) {
+function self$1z(vars) {
   const {
     scrollbarColor,
     scrollbarColorHover,
@@ -15588,13 +15759,13 @@ function self$1A(vars) {
 const safeTopScrollbarLight = {
   name: "SafeTopScrollbar",
   common: derived,
-  self: self$1A
+  self: self$1z
 };
 
 const safeTopScrollbarDark = {
   name: "SafeTopScrollbar",
   common: derived$1,
-  self: self$1A
+  self: self$1z
 };
 
 cB("scrollbar", [cM("rtl", `
@@ -15607,7 +15778,7 @@ cB("scrollbar", [cM("rtl", `
           right: unset;
         `)])])])]);
 
-var style$1P = cB("safe-top-scrollbar", `
+var style$1O = cB("safe-top-scrollbar", `
   overflow: hidden;
   position: relative;
   z-index: auto;
@@ -15756,7 +15927,7 @@ const SafeTopScrollbar$1 = defineComponent({
     const themeRef = useTheme(
       "SafeTopScrollbar",
       "-safe-top-scrollbar",
-      style$1P,
+      style$1O,
       safeTopScrollbarLight,
       props,
       mergedClsPrefixRef
@@ -16490,7 +16661,7 @@ const commonVars$9 = {
   railColor: "transparent"
 };
 
-function self$1z(vars) {
+function self$1y(vars) {
   const {
     scrollbarColor,
     scrollbarColorHover,
@@ -16510,13 +16681,13 @@ function self$1z(vars) {
 const scrollbarLight = {
   name: "Scrollbar",
   common: derived,
-  self: self$1z
+  self: self$1y
 };
 
 const scrollbarDark = {
   name: "Scrollbar",
   common: derived$1,
-  self: self$1z
+  self: self$1y
 };
 
 var rtlStyle$t = cB("scrollbar", [cM("rtl", `
@@ -16534,7 +16705,7 @@ const scrollbarRtl = {
   style: rtlStyle$t
 };
 
-var style$1O = cB("scrollbar", `
+var style$1N = cB("scrollbar", `
   overflow: hidden;
   position: relative;
   z-index: auto;
@@ -16677,7 +16848,7 @@ const Scrollbar$1 = defineComponent({
     const themeRef = useTheme(
       "Scrollbar",
       "-scrollbar",
-      style$1O,
+      style$1N,
       scrollbarLight,
       props,
       mergedClsPrefixRef
@@ -18049,7 +18220,7 @@ function createTreeMate(rawNodes, options = {}) {
   return treemate;
 }
 
-function self$1y(vars) {
+function self$1x(vars) {
   const {
     fontBodyMedium,
     fontTitleLarge,
@@ -18081,16 +18252,16 @@ function self$1y(vars) {
 const emptyLight = {
   name: "Empty",
   common: derived,
-  self: self$1y
+  self: self$1x
 };
 
 const emptyDark$1 = {
   name: "Empty",
   common: derived$1,
-  self: self$1y
+  self: self$1x
 };
 
-var style$1N = cB("empty", `
+var style$1M = cB("empty", `
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -18168,7 +18339,7 @@ var UEmpty$1 = defineComponent({
     const themeRef = useTheme(
       "Empty",
       "-empty",
-      style$1N,
+      style$1M,
       emptyLight,
       props,
       mergedClsPrefixRef
@@ -18256,7 +18427,7 @@ var UEmpty$1 = defineComponent({
   }
 });
 
-function self$1x(vars) {
+function self$1w(vars) {
   const {
     borderRadius,
     iconMedium,
@@ -18313,7 +18484,7 @@ const internalSelectMenuLight = createTheme$1({
     Scrollbar: scrollbarLight,
     Empty: emptyLight
   },
-  self: self$1x
+  self: self$1w
 });
 
 const internalSelectMenuDark = {
@@ -18323,7 +18494,7 @@ const internalSelectMenuDark = {
     Scrollbar: scrollbarDark,
     Empty: emptyDark$1
   },
-  self: self$1x
+  self: self$1w
 };
 
 cB("base-select-menu", [cM("rtl", `
@@ -18564,7 +18735,7 @@ function fadeInScaleUpTransition({
   })];
 }
 
-var style$1M = cB("base-select-menu", `
+var style$1L = cB("base-select-menu", `
   line-height: 1.5;
   outline: none;
   z-index: 0;
@@ -18752,7 +18923,7 @@ var UInternalSelectMenu = defineComponent({
     const themeRef = useTheme(
       "InternalSelectMenu",
       "-internal-select-menu",
-      style$1M,
+      style$1L,
       internalSelectMenuLight,
       props,
       toRef(props, "clsPrefix")
@@ -19220,7 +19391,7 @@ var UInternalSelectMenu = defineComponent({
   }
 });
 
-function self$1w(vars) {
+function self$1v(vars) {
   const {
     fontBodyMedium,
     containerPrimary,
@@ -19247,13 +19418,13 @@ function self$1w(vars) {
 const popoverLight = {
   name: "Popover",
   common: derived,
-  self: self$1w
+  self: self$1v
 };
 
 const popoverDark = {
   name: "Popover",
   common: derived$1,
-  self: self$1w
+  self: self$1v
 };
 
 cB("popover", [cM("rtl", `
@@ -19268,7 +19439,7 @@ const oppositePlacement = {
   right: "left"
 };
 const arrowSize = "var(--u-arrow-height) * 1.414";
-var style$1L = c$1([cB("popover", `
+var style$1K = c$1([cB("popover", `
     transition:
       box-shadow .3s var(--u-bezier),
       background-color .3s var(--u-bezier),
@@ -19487,7 +19658,7 @@ var UPopoverBody = defineComponent({
     const themeRef = useTheme(
       "Popover",
       "-popover",
-      style$1L,
+      style$1K,
       popoverLight,
       props,
       mergedClsPrefixRef
@@ -20314,7 +20485,7 @@ var UPopover$1 = defineComponent({
   }
 });
 
-function self$1v(vars) {
+function self$1u(vars) {
   const {
     opacityDisabled,
     borderRadiusSmall: borderRadius,
@@ -20412,13 +20583,13 @@ function self$1v(vars) {
 const tagLight = {
   name: "Tag",
   common: derived,
-  self: self$1v
+  self: self$1u
 };
 
 const tagDark = {
   name: "Tag",
   common: derived$1,
-  self: self$1v
+  self: self$1u
 };
 
 var rtlStyle$s = cB("tag", [cM("rtl", `
@@ -20465,7 +20636,7 @@ var commonProps = {
   }
 };
 
-var style$1K = cB("tag", `
+var style$1J = cB("tag", `
   white-space: nowrap;
   position: relative;
   box-sizing: border-box;
@@ -20632,7 +20803,7 @@ var _UTag = defineComponent({
     const themeRef = useTheme(
       "Tag",
       "-tag",
-      style$1K,
+      style$1J,
       tagLight,
       props,
       mergedClsPrefixRef
@@ -20996,7 +21167,7 @@ var _UTagGroup = defineComponent({
   }
 });
 
-function self$1u(vars) {
+function self$1t(vars) {
   const {
     heightSmall,
     heightMedium,
@@ -21016,10 +21187,10 @@ function self$1u(vars) {
 }
 const skeletonLight$1 = {
   common: derived,
-  self: self$1u
+  self: self$1t
 };
 
-var style$1J = c$1([cB("skeleton", `
+var style$1I = c$1([cB("skeleton", `
     height: 1em;
     width: 100%;
     transition: background-color .3s var(--u-bezier);
@@ -21075,7 +21246,7 @@ var UBaseSkeleton = defineComponent({
     const themeRef = useTheme(
       "Skeleton",
       "-skeleton",
-      style$1J,
+      style$1I,
       skeletonLight$1,
       props,
       mergedClsPrefixRef
@@ -21191,7 +21362,7 @@ var UBaseSuffix = defineComponent({
   }
 });
 
-function self$1t(vars) {
+function self$1s(vars) {
   const {
     borderRadius,
     iconMedium,
@@ -21349,7 +21520,7 @@ const internalSelectionLight = createTheme$1({
   peers: {
     Popover: popoverLight
   },
-  self: self$1t
+  self: self$1s
 });
 
 const internalSelectionDark = {
@@ -21358,7 +21529,7 @@ const internalSelectionDark = {
   peers: {
     Popover: popoverDark
   },
-  self: self$1t
+  self: self$1s
 };
 
 cB("base-selection", [cM("rtl", `
@@ -21391,7 +21562,7 @@ function generateSecondaryStates(state) {
         color: var(--u-arrow-color${state}-secondary);
       `)])];
 }
-var style$1I = c$1([cB("base-selection", `
+var style$1H = c$1([cB("base-selection", `
     position: relative;
     z-index: auto;
     box-shadow: none;
@@ -21742,7 +21913,7 @@ var UInternalSelection = defineComponent({
     const themeRef = useTheme(
       "InternalSelection",
       "-internal-selection",
-      style$1I,
+      style$1H,
       internalSelectionLight,
       props,
       toRef(props, "clsPrefix")
@@ -22823,7 +22994,7 @@ function fadeUpWidthExpandTransition({
   })];
 }
 
-var style$1H = c$1([c$1("@keyframes u-base-slot-machine-fade-up-in", `
+var style$1G = c$1([c$1("@keyframes u-base-slot-machine-fade-up-in", `
     from {
       transform: translateY(60%);
       opacity: 0;
@@ -22942,7 +23113,7 @@ var UBaseSlotMachine = defineComponent({
     }
   },
   setup(props) {
-    useStyle("-base-slot-machine", style$1H, toRef(props, "clsPrefix"));
+    useStyle("-base-slot-machine", style$1G, toRef(props, "clsPrefix"));
     const oldValueRef = ref();
     const newValueRef = ref();
     const numbersRef = computed(() => {
@@ -22997,7 +23168,7 @@ var UBaseSlotMachine = defineComponent({
   }
 });
 
-function self$1s(vars) {
+function self$1r(vars) {
   const {
     borderRadiusSmall,
     brandPrimary500,
@@ -23033,10 +23204,10 @@ function self$1s(vars) {
 }
 const typographyLight$1 = {
   common: derived,
-  self: self$1s
+  self: self$1r
 };
 
-var style$1G = cB("text", `
+var style$1F = cB("text", `
   transition: color .3s var(--u-bezier);
   color: var(--u-text-color);
   margin: 0;
@@ -23344,7 +23515,7 @@ var InternalUText = defineComponent({
     const themeRef = useTheme(
       "Typography",
       "-text",
-      style$1G,
+      style$1F,
       typographyLight$1,
       props,
       mergedClsPrefixRef
@@ -23432,7 +23603,7 @@ var InternalUText = defineComponent({
   }
 });
 
-var style$1F = cB("base-wave", `
+var style$1E = cB("base-wave", `
   position: absolute;
   left: 0;
   right: 0;
@@ -23450,7 +23621,7 @@ var UBaseWave = defineComponent({
     }
   },
   setup(props) {
-    useStyle("-base-wave", style$1F, toRef(props, "clsPrefix"));
+    useStyle("-base-wave", style$1E, toRef(props, "clsPrefix"));
     const selfRef = ref(null);
     const activeRef = ref(false);
     let animationTimerId = null;
@@ -23495,142 +23666,6 @@ var UBaseWave = defineComponent({
   }
 });
 
-function self$1r(vars) {
-  const {
-    elementsPrimary
-  } = vars;
-  return {
-    color: elementsPrimary,
-    opacity1Depth: "0.82",
-    opacity2Depth: "0.72",
-    opacity3Depth: "0.38",
-    opacity4Depth: "0.24",
-    opacity5Depth: "0.18"
-  };
-}
-const iconLight = {
-  name: "Icon",
-  common: derived,
-  self: self$1r
-};
-
-const iconDark$1 = {
-  name: "Icon",
-  common: derived$1,
-  self: self$1r
-};
-
-var style$1E = cB("icon", `
-  height: 1em;
-  width: 1em;
-  line-height: 1em;
-  text-align: center;
-  display: inline-block;
-  position: relative;
-  fill: currentColor;
-  transform: translateZ(0);
-`, [cM("color-transition", {
-  transition: "color .3s var(--u-bezier)"
-}), cM("depth", {
-  color: "var(--u-color)"
-}, [c$1("svg", {
-  opacity: "var(--u-opacity)",
-  transition: "opacity .3s var(--u-bezier)"
-})]), c$1("svg", {
-  height: "100%",
-  width: "100%",
-  display: "block"
-})]);
-
-const iconProps = {
-  ...useTheme.props,
-  depth: [String, Number],
-  size: [Number, String],
-  color: String,
-  component: Object,
-  onClick: Function
-};
-const UIcon$1 = defineComponent({
-  _n_icon__: true,
-  name: "Icon",
-  inheritAttrs: false,
-  props: iconProps,
-  setup(props) {
-    const {
-      mergedClsPrefixRef,
-      inlineThemeDisabled
-    } = useConfig(props);
-    const themeRef = useTheme("Icon", "-icon", style$1E, iconLight, props, mergedClsPrefixRef);
-    const cssVarsRef = computed(() => {
-      const {
-        depth
-      } = props;
-      const {
-        common: {
-          cubicBezierEaseInOut
-        },
-        self
-      } = themeRef.value;
-      if (depth !== void 0) {
-        const {
-          color,
-          [`opacity${depth}Depth`]: opacity
-        } = self;
-        return {
-          "--u-bezier": cubicBezierEaseInOut,
-          "--u-color": color,
-          "--u-opacity": opacity
-        };
-      }
-      return {
-        "--u-bezier": cubicBezierEaseInOut,
-        "--u-color": "",
-        "--u-opacity": ""
-      };
-    });
-    const themeClassHandle = inlineThemeDisabled ? useThemeClass("icon", computed(() => `${props.depth || "d"}`), cssVarsRef, props) : void 0;
-    return {
-      mergedClsPrefix: mergedClsPrefixRef,
-      mergedStyle: computed(() => {
-        const {
-          size,
-          color
-        } = props;
-        return {
-          fontSize: formatLength(size),
-          color
-        };
-      }),
-      cssVars: inlineThemeDisabled ? void 0 : cssVarsRef,
-      themeClass: themeClassHandle?.themeClass,
-      onRender: themeClassHandle?.onRender
-    };
-  },
-  render() {
-    const {
-      $parent,
-      depth,
-      mergedClsPrefix,
-      component,
-      onRender,
-      themeClass
-    } = this;
-    if ($parent?.$options?._n_icon__) {
-      warn("icon", "don't wrap `u-icon` inside `u-icon`");
-    }
-    onRender?.();
-    return h("i", mergeProps(this.$attrs, {
-      role: "img",
-      class: [`${mergedClsPrefix}-icon`, themeClass, {
-        [`${mergedClsPrefix}-icon--depth`]: depth,
-        [`${mergedClsPrefix}-icon--color-transition`]: depth !== void 0
-      }],
-      style: [this.cssVars, this.mergedStyle],
-      onClick: this.onClick
-    }), component ? h(component) : this.$slots);
-  }
-});
-
 function self$1q(vars) {
   const {
     borderRadius,
@@ -59836,6 +59871,7 @@ const configProviderProps = {
   themeOverrides: Object,
   componentOptions: Object,
   icons: Object,
+  iconPacks: Object,
   breakpoints: Object,
   breakpointProps: Object,
   breakpointThemeOverrides: Object,
@@ -59978,6 +60014,12 @@ var UConfigProvider$1 = defineComponent({
       } = props;
       return icons === void 0 ? UConfigProvider?.mergedIconsRef.value : icons;
     });
+    const mergedIconPacksRef = computed(() => {
+      const {
+        iconPacks
+      } = props;
+      return iconPacks === void 0 ? UConfigProvider?.mergedIconPacksRef.value : iconPacks;
+    });
     const updateWindowWidth = () => {
       if (isBrowser$1) {
         windowWidthRef.value = window.innerWidth;
@@ -60086,6 +60128,7 @@ var UConfigProvider$1 = defineComponent({
       mergedSsrBreakpointWidthRef,
       mergedRtlRef,
       mergedIconsRef,
+      mergedIconPacksRef,
       mergedComponentPropsRef,
       mergedBreakpointPropsRef,
       mergedBreakpointThemeOverridesRef,
@@ -112351,7 +112394,7 @@ function useThemeVars() {
   });
 }
 
-var version = "2.0.0-beta.9";
+var version = "2.0.0";
 
 function create({
   componentPrefix = "U",