@uzum-tech/ui 2.3.4 → 2.3.5

package/dist/index.mjs

@@ -47881,6 +47881,261 @@ var _UUploadDragger = defineComponent({
   }
 });
 
+function self$11(vars) {
+  const {
+    opacityDisabled,
+    elementsPrimary,
+    brandPrimary500,
+    fontBodyMedium,
+    fontBodySmall,
+    fontBodyLarge,
+    fontHeadingSmall,
+    fontTitleMedium,
+    fontHeadingLarge
+  } = vars;
+  return {
+    tertiaryColor: elementsPrimary,
+    primaryColor: brandPrimary500,
+    fontSize: fontBodyMedium,
+    sizeTiny: fontBodySmall,
+    sizeSmall: fontBodyLarge,
+    sizeMedium: fontTitleMedium,
+    sizeLarge: fontHeadingSmall,
+    sizeHuge: fontHeadingLarge,
+    opacitySpinning: opacityDisabled
+  };
+}
+const spinLight = {
+  name: "Spin",
+  common: derived,
+  self: self$11
+};
+
+const spinDark = {
+  name: "Spin",
+  common: derived$1,
+  self: self$11
+};
+
+var style$19 = c$1([c$1("@keyframes spin-rotate", `
+    from {
+      transform: rotate(0);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  `), cB("spin-container", {
+  position: "relative"
+}, [cB("spin-body", `
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translateX(-50%) translateY(-50%);
+    `, [fadeInTransition()])]), cB("spin-body", `
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+  `), cB("spin", `
+    display: inline-flex;
+    height: var(--u-size);
+    width: var(--u-size);
+    font-size: var(--u-size);
+    color: var(--u-color);
+  `, [cM("rotate", `
+      animation: spin-rotate 2s linear infinite;
+    `)]), cB("spin-description", `
+    display: inline-block;
+    font-size: var(--u-font-size);
+    color: var(--u-text-color);
+    transition: color .3s var(--u-bezier);
+    margin-top: 8px;
+  `), cB("spin-content", `
+    opacity: 1;
+    transition: opacity .3s var(--u-bezier);
+    pointer-events: all;
+  `, [cM("spinning", `
+      user-select: none;
+      -webkit-user-select: none;
+      pointer-events: none;
+      opacity: var(--u-opacity-spinning);
+    `)])]);
+
+const STROKE_WIDTH = {
+  tiny: 22,
+  small: 20,
+  medium: 18,
+  large: 16,
+  huge: 14
+};
+const spinProps = {
+  ...useTheme.props,
+  contentClass: String,
+  contentStyle: [Object, String],
+  description: String,
+  stroke: String,
+  size: {
+    type: [String, Number],
+    default: "medium"
+  },
+  show: {
+    type: Boolean,
+    default: true
+  },
+  strokeWidth: Number,
+  rotate: {
+    type: Boolean,
+    default: true
+  },
+  scale: Number,
+  radius: Number,
+  spinning: {
+    type: Boolean,
+    validator: () => {
+      return true;
+    },
+    default: void 0
+  },
+  color: {
+    type: [String],
+    default: "primary"
+  },
+  delay: Number
+};
+var _USpin = defineComponent({
+  name: "Spin",
+  props: spinProps,
+  slots: Object,
+  setup(props) {
+    {
+      watchEffect(() => {
+        if (props.spinning !== void 0) {
+          warnOnce(
+            "spin",
+            "`spinning` is deprecated, please use `show` instead."
+          );
+        }
+      });
+    }
+    const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
+    const themeRef = useTheme(
+      "Spin",
+      "-spin",
+      style$19,
+      spinLight,
+      props,
+      mergedClsPrefixRef
+    );
+    const cssVarsRef = computed(() => {
+      const { size: spinSize, color } = props;
+      const {
+        common: { cubicBezierEaseInOut },
+        self
+      } = themeRef.value;
+      const { opacitySpinning, tertiaryColor, primaryColor } = self;
+      const size = typeof spinSize === "number" ? pxfy(spinSize) : self[createKey("size", spinSize)];
+      return {
+        "--u-bezier": cubicBezierEaseInOut,
+        "--u-opacity-spinning": opacitySpinning,
+        "--u-size": size,
+        "--u-color": color === "tertiary" ? tertiaryColor : color === "primary" ? primaryColor : color,
+        "--u-text-color": color === "tertiary" ? tertiaryColor : color === "primary" ? primaryColor : color
+      };
+    });
+    const themeClassHandle = inlineThemeDisabled ? useThemeClass(
+      "spin",
+      computed(() => {
+        const { size } = props;
+        return typeof size === "number" ? String(size) : size[0];
+      }),
+      cssVarsRef,
+      props
+    ) : void 0;
+    const compitableShow = useCompitable(props, ["spinning", "show"]);
+    const activeRef = ref(false);
+    watchEffect((onCleanup) => {
+      let timerId;
+      if (compitableShow.value) {
+        const { delay } = props;
+        if (delay) {
+          timerId = window.setTimeout(() => {
+            activeRef.value = true;
+          }, props.delay);
+          onCleanup(() => {
+            clearTimeout(timerId);
+          });
+          return;
+        }
+      }
+      activeRef.value = compitableShow.value;
+    });
+    return {
+      mergedClsPrefix: mergedClsPrefixRef,
+      active: activeRef,
+      mergedStrokeWidth: computed(() => {
+        const { strokeWidth } = props;
+        if (strokeWidth !== void 0)
+          return strokeWidth;
+        const { size } = props;
+        return STROKE_WIDTH[typeof size === "number" ? "medium" : size];
+      }),
+      cssVars: inlineThemeDisabled ? void 0 : cssVarsRef,
+      themeClass: themeClassHandle?.themeClass,
+      onRender: themeClassHandle?.onRender
+    };
+  },
+  render() {
+    const { $slots, mergedClsPrefix, description } = this;
+    const rotate = $slots.icon && this.rotate;
+    const descriptionNode = (description || $slots.description) && /* @__PURE__ */ h("div", { class: `${mergedClsPrefix}-spin-description` }, description || $slots.description?.());
+    const icon = $slots.icon ? /* @__PURE__ */ h("div", { class: [`${mergedClsPrefix}-spin-body`, this.themeClass] }, /* @__PURE__ */ h(
+      "div",
+      {
+        class: [
+          `${mergedClsPrefix}-spin`,
+          rotate && `${mergedClsPrefix}-spin--rotate`
+        ],
+        style: $slots.default ? "" : this.cssVars
+      },
+      $slots.icon()
+    ), descriptionNode) : /* @__PURE__ */ h("div", { class: [`${mergedClsPrefix}-spin-body`, this.themeClass] }, /* @__PURE__ */ h(
+      UBaseLoading,
+      {
+        clsPrefix: mergedClsPrefix,
+        style: $slots.default ? "" : this.cssVars,
+        stroke: this.stroke,
+        "stroke-width": this.mergedStrokeWidth,
+        radius: this.radius,
+        scale: this.scale,
+        class: `${mergedClsPrefix}-spin`
+      }
+    ), descriptionNode);
+    this.onRender?.();
+    return $slots.default ? /* @__PURE__ */ h(
+      "div",
+      {
+        class: [`${mergedClsPrefix}-spin-container`, this.themeClass],
+        style: this.cssVars
+      },
+      /* @__PURE__ */ h(
+        "div",
+        {
+          class: [
+            `${mergedClsPrefix}-spin-content`,
+            this.active && `${mergedClsPrefix}-spin-content--spinning`,
+            this.contentClass
+          ],
+          style: this.contentStyle
+        },
+        $slots
+      ),
+      /* @__PURE__ */ h(Transition, { name: "fade-in-transition" }, {
+        default: () => this.active ? icon : null
+      })
+    ) : icon;
+  }
+});
+
 const buttonGroupDark = {
   name: "ButtonGroup",
   common: derived$1
@@ -47925,7 +48180,7 @@ const cardDark = {
   self: self$1c
 };
 
-function self$11(vars) {
+function self$10(vars) {
   const {
     textPrimary,
     fontBodyMedium,
@@ -47953,12 +48208,12 @@ function self$11(vars) {
 const codeLight = {
   name: "Code",
   common: derived,
-  self: self$11
+  self: self$10
 };
 
-function self$10(vars) {
+function self$$(vars) {
   return {
-    ...self$11(vars),
+    ...self$10(vars),
     // extracted from hljs atom-one-dark.scss
     "mono-3": "#5c6370",
     "hue-1": "#56b6c2",
@@ -47974,10 +48229,10 @@ function self$10(vars) {
 const codeDark = {
   name: "Code",
   common: derived$1,
-  self: self$10
+  self: self$$
 };
 
-function self$$(vars) {
+function self$_(vars) {
   const {
     cubicBezierEaseInOut
   } = vars;
@@ -47988,13 +48243,13 @@ function self$$(vars) {
 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", `
@@ -48007,7 +48262,7 @@ const collapseTransitionRtl = {
   style: rtlStyle$g
 };
 
-function self$_(vars) {
+function self$Z(vars) {
   const {
     fontWeight,
     fontBodyLarge,
@@ -48047,13 +48302,13 @@ function self$_(vars) {
 const collapseLight = {
   name: "Collapse",
   common: derived,
-  self: self$_
+  self: self$Z
 };
 
 const collapseDark = {
   name: "Collapse",
   common: derived$1,
-  self: self$_
+  self: self$Z
 };
 
 var rtlStyle$f = cB("collapse", [cM("rtl", `
@@ -48076,7 +48331,7 @@ const collapseRtl = {
   style: rtlStyle$f
 };
 
-function self$Z(vars) {
+function self$Y(vars) {
   const {
     borderRadius,
     fontBodySmall,
@@ -48163,7 +48418,7 @@ const dropdownLight = createTheme$1({
   peers: {
     Popover: popoverLight
   },
-  self: self$Z
+  self: self$Y
 });
 
 const dropdownDark = {
@@ -48172,7 +48427,7 @@ const dropdownDark = {
   peers: {
     Popover: popoverDark
   },
-  self: self$Z
+  self: self$Y
 };
 
 const popselect = {
@@ -48184,7 +48439,7 @@ const popselect = {
   }
 };
 
-function self$Y(vars) {
+function self$X(vars) {
   const {
     shadowDepth2
   } = vars;
@@ -48199,10 +48454,10 @@ const popselectLight = createTheme$1({
     Popover: popoverLight,
     InternalSelectMenu: internalSelectMenuLight
   },
-  self: self$Y
+  self: self$X
 });
 
-function self$X(vars) {
+function self$W(vars) {
   const {
     brandPrimary100,
     transparencySecondary,
@@ -48300,7 +48555,7 @@ const paginationLight = createTheme$1({
     Input: inputLight,
     Popselect: popselectLight
   },
-  self: self$X
+  self: self$W
 });
 
 const paginationDark = {
@@ -48311,7 +48566,7 @@ const paginationDark = {
     Input: inputDark,
     Popselect: popselect
   },
-  self: self$X
+  self: self$W
 };
 
 var rtlStyle$e = cB("pagination", [cM("rtl", `
@@ -48328,7 +48583,7 @@ const paginationRtl = {
   peers: [inputRtl]
 };
 
-function self$W(vars) {
+function self$V(vars) {
   const {
     heightTiny,
     heightSmall,
@@ -48420,13 +48675,13 @@ function self$W(vars) {
 const radioLight = {
   name: "Radio",
   common: derived,
-  self: self$W
+  self: self$V
 };
 
 const radioDark = {
   name: "Radio",
   common: derived$1,
-  self: self$W
+  self: self$V
 };
 
 var rtlStyle$d = c$1([cB("radio", [cM("rtl", `
@@ -48454,7 +48709,7 @@ const radioRtl = {
   style: rtlStyle$d
 };
 
-function self$V(vars) {
+function self$U(vars) {
   const {
     borderRadius,
     opacityDisabled,
@@ -48555,7 +48810,7 @@ const dataTableLight = createTheme$1({
     Ellipsis: ellipsisLight,
     Dropdown: dropdownLight
   },
-  self: self$V
+  self: self$U
 });
 
 const dataTableDark = {
@@ -48572,10 +48827,10 @@ const dataTableDark = {
     Ellipsis: ellipsisDark,
     Dropdown: dropdownDark
   },
-  self: self$V
+  self: self$U
 };
 
-function self$U(vars) {
+function self$T(vars) {
   const {
     opacityDisabled,
     borderRadius,
@@ -48617,7 +48872,7 @@ const timePickerLight = createTheme$1({
     Button: buttonLight,
     Input: inputLight
   },
-  self: self$U
+  self: self$T
 });
 
 const timePickerDark = {
@@ -48628,7 +48883,7 @@ const timePickerDark = {
     Button: buttonDark,
     Input: inputDark
   },
-  self: self$U
+  self: self$T
 };
 
 const itemWidth = "38px";
@@ -48674,7 +48929,7 @@ var commonVars$6 = {
   calendarRightPaddingYearrange: "0"
 };
 
-function self$T(vars) {
+function self$S(vars) {
   const {
     iconMedium,
     fontWeightStrong,
@@ -48775,7 +49030,7 @@ const datePickerLight = createTheme$1({
     Scrollbar: scrollbarLight,
     Select: internalSelectionLight
   },
-  self: self$T
+  self: self$S
 });
 
 const datePickerDark = {
@@ -48788,10 +49043,10 @@ const datePickerDark = {
     Scrollbar: scrollbarDark,
     Select: internalSelectionDark
   },
-  self: self$T
+  self: self$S
 };
 
-function self$S(vars) {
+function self$R(vars) {
   const {
     borderRadius,
     lineHeightBodyLarge,
@@ -48841,13 +49096,13 @@ function self$S(vars) {
 const descriptionsLight = {
   name: "Descriptions",
   common: derived,
-  self: self$S
+  self: self$R
 };
 
 const descriptionsDark = {
   name: "Descriptions",
   common: derived$1,
-  self: self$S
+  self: self$R
 };
 
 var commonVars$5 = {
@@ -48861,7 +49116,7 @@ var commonVars$5 = {
   closeBorderRadius: "100px"
 };
 
-function self$R(vars) {
+function self$Q(vars) {
   const {
     borderRadius,
     containerPrimary,
@@ -48918,7 +49173,7 @@ const dialogLight = createTheme$1({
   peers: {
     Button: buttonLight
   },
-  self: self$R
+  self: self$Q
 });
 
 const dialogDark = {
@@ -48927,10 +49182,10 @@ const dialogDark = {
   peers: {
     Button: buttonDark
   },
-  self: self$R
+  self: self$Q
 };
 
-function self$Q(vars) {
+function self$P(vars) {
   const {
     elementsQuaternary,
     textPrimary,
@@ -48950,13 +49205,13 @@ function self$Q(vars) {
 const dividerLight = {
   name: "Divider",
   common: derived,
-  self: self$Q
+  self: self$P
 };
 
 const dividerDark = {
   name: "Divider",
   common: derived$1,
-  self: self$Q
+  self: self$P
 };
 
 var commonVars$4 = {
@@ -48972,7 +49227,7 @@ var commonVars$4 = {
   contentBorderRadius: "24px"
 };
 
-function self$P(vars) {
+function self$O(vars) {
   const {
     containerPrimary,
     textPrimary,
@@ -49021,7 +49276,7 @@ const drawerLight = createTheme$1({
   peers: {
     Scrollbar: scrollbarLight
   },
-  self: self$P
+  self: self$O
 });
 
 const drawerDark = {
@@ -49030,7 +49285,7 @@ const drawerDark = {
   peers: {
     Scrollbar: scrollbarDark
   },
-  self: self$P
+  self: self$O
 };
 
 var rtlStyle$c = cB("drawer", [cM("rtl", `
@@ -49064,7 +49319,7 @@ const dynamicInputDark = {
   }
 };
 
-function self$O() {
+function self$N() {
   return commonVariables$1;
 }
 const dynamicInputLight = createTheme$1({
@@ -49074,7 +49329,7 @@ const dynamicInputLight = createTheme$1({
     Input: inputLight,
     Button: buttonLight
   },
-  self: self$O
+  self: self$N
 });
 
 var rtlStyle$b = cB("input-number", [cM("rtl", `
@@ -49115,12 +49370,12 @@ const spaceDark = {
   }
 };
 
-function self$N() {
+function self$M() {
   return commonVars$3;
 }
 const spaceLight = {
   name: "Space",
-  self: self$N
+  self: self$M
 };
 
 var rtlStyle$9 = cB("space", [cM("rtl", `
@@ -49192,7 +49447,7 @@ const floatButtonGroupDark = {
   }
 };
 
-function self$M(vars) {
+function self$L(vars) {
   const {
     containerPrimary,
     elementsQuaternary,
@@ -49208,7 +49463,7 @@ function self$M(vars) {
 const themeLight$4 = {
   name: "FloatButtonGroup",
   common: derived,
-  self: self$M
+  self: self$L
 };
 
 const floatButtonDark = {
@@ -49243,7 +49498,7 @@ const floatButtonDark = {
   }
 };
 
-function self$L(vars) {
+function self$K(vars) {
   const {
     containerPrimary,
     textPrimary,
@@ -49272,10 +49527,10 @@ function self$L(vars) {
 const themeLight$3 = {
   name: "FloatButton",
   common: derived,
-  self: self$L
+  self: self$K
 };
 
-function self$K(vars) {
+function self$J(vars) {
   const {
     heightSmall,
     heightMedium,
@@ -49330,16 +49585,16 @@ function self$K(vars) {
 const formLight = {
   name: "Form",
   common: derived,
-  self: self$K
+  self: self$J
 };
 
 const formItemDark = {
   name: "Form",
   common: derived$1,
-  self: self$K
+  self: self$J
 };
 
-function self$J(vars) {
+function self$I(vars) {
   const {
     brandPrimary500,
     staticGreen,
@@ -49376,16 +49631,16 @@ function self$J(vars) {
 const gradientTextLight = {
   name: "GradientText",
   common: derived,
-  self: self$J
+  self: self$I
 };
 
 const gradientTextDark = {
   name: "GradientText",
   common: derived$1,
-  self: self$J
+  self: self$I
 };
 
-function self$I(vars) {
+function self$H(vars) {
   const {
     textSecondary
   } = vars;
@@ -49400,7 +49655,7 @@ const inputNumberLight = createTheme$1({
     Button: buttonLight,
     Input: inputLight
   },
-  self: self$I
+  self: self$H
 });
 
 const inputNumberDark = {
@@ -49410,10 +49665,10 @@ const inputNumberDark = {
     Button: buttonDark,
     Input: inputDark
   },
-  self: self$I
+  self: self$H
 };
 
-function self$H() {
+function self$G() {
   return {
     inputWidthSmall: "44px",
     inputWidthMedium: "50px",
@@ -49429,7 +49684,7 @@ const inputOtpLight = createTheme$1({
   peers: {
     Input: inputLight
   },
-  self: self$H
+  self: self$G
 });
 
 const inputOtpDark = {
@@ -49438,7 +49693,7 @@ const inputOtpDark = {
   peers: {
     Input: inputDark
   },
-  self: self$H
+  self: self$G
 };
 
 var rtlStyle$8 = cB("input-otp", [cM("rtl", `
@@ -49450,7 +49705,7 @@ const inputOtpRtl = {
   style: rtlStyle$8
 };
 
-function self$G(vars) {
+function self$F(vars) {
   const {
     textPrimary,
     textQuaternary,
@@ -49496,7 +49751,7 @@ const layoutLight = createTheme$1({
   peers: {
     Scrollbar: scrollbarLight
   },
-  self: self$G
+  self: self$F
 });
 
 const layoutDark = {
@@ -49505,7 +49760,7 @@ const layoutDark = {
   peers: {
     Scrollbar: scrollbarDark
   },
-  self: self$G
+  self: self$F
 };
 
 const rowDark = {
@@ -49542,7 +49797,7 @@ const rowRtl = {
   style: rtlStyle$7
 };
 
-function self$F(vars) {
+function self$E(vars) {
   const {
     brandPrimary500,
     staticRed
@@ -49556,16 +49811,16 @@ function self$F(vars) {
 const loadingBarLight = {
   name: "LoadingBar",
   common: derived,
-  self: self$F
+  self: self$E
 };
 
 const loadingBarDark = {
   name: "LoadingBar",
   common: derived$1,
-  self: self$F
+  self: self$E
 };
 
-function self$E(vars) {
+function self$D(vars) {
   const {
     fontBodyMedium,
     textPrimary,
@@ -49588,7 +49843,7 @@ const logLight = createTheme$1({
     Scrollbar: scrollbarLight,
     Code: codeLight
   },
-  self: self$E
+  self: self$D
 });
 
 const logDark = {
@@ -49598,25 +49853,25 @@ const logDark = {
     Scrollbar: scrollbarDark,
     Code: codeDark
   },
-  self: self$E
+  self: self$D
 };
 
-function self$D() {
+function self$C() {
   return {};
 }
 const marqueeLight = {
   name: "Marquee",
   common: derived,
-  self: self$D
+  self: self$C
 };
 
 const marqueeDark = {
   name: "Marquee",
   common: derived$1,
-  self: self$D
+  self: self$C
 };
 
-function self$C(vars) {
+function self$B(vars) {
   const {
     shadowDepth2
   } = vars;
@@ -49631,7 +49886,7 @@ const mentionLight = createTheme$1({
     InternalSelectMenu: internalSelectMenuLight,
     Input: inputLight
   },
-  self: self$C
+  self: self$B
 });
 
 const listDark = {
@@ -49641,7 +49896,7 @@ const listDark = {
     InternalSelectMenu: internalSelectMenuDark,
     Input: inputDark
   },
-  self: self$C
+  self: self$B
 };
 
 function createPartialInvertedVars(color, activeItemColor, activeTextColor, groupTextColor) {
@@ -49684,7 +49939,7 @@ function createPartialInvertedVars(color, activeItemColor, activeTextColor, grou
     groupTextColorInverted: groupTextColor
   };
 }
-function self$B(vars) {
+function self$A(vars) {
   const {
     textSecondary,
     borderRadiusSmall,
@@ -49752,7 +50007,7 @@ const menuLight = createTheme$1({
     Tooltip: tooltipLight,
     Dropdown: dropdownLight
   },
-  self: self$B
+  self: self$A
 });
 
 const menuDark = {
@@ -49762,10 +50017,10 @@ const menuDark = {
     Tooltip: tooltipDark,
     Dropdown: dropdownDark
   },
-  self: self$B
+  self: self$A
 };
 
-function self$A(vars) {
+function self$z(vars) {
   const {
     transparencyModal,
     containerPrimary,
@@ -49789,7 +50044,7 @@ const modalLight = createTheme$1({
     Dialog: dialogLight,
     Card: cardLight
   },
-  self: self$A
+  self: self$z
 });
 
 const modalDark = {
@@ -49800,7 +50055,7 @@ const modalDark = {
     Dialog: dialogDark,
     Card: cardDark$1
   },
-  self: self$A
+  self: self$z
 };
 
 var commonVars$2 = {
@@ -49809,7 +50064,7 @@ var commonVars$2 = {
   closeBorderRadius: "50px"
 };
 
-function self$z(vars) {
+function self$y(vars) {
   const {
     fontWeightStrong,
     lineHeightBodyMedium,
@@ -49942,7 +50197,7 @@ const notificationLight = createTheme$1({
   peers: {
     Scrollbar: scrollbarLight
   },
-  self: self$z
+  self: self$y
 });
 
 const notificationDark = {
@@ -49951,7 +50206,7 @@ const notificationDark = {
   peers: {
     Scrollbar: scrollbarDark
   },
-  self: self$z
+  self: self$y
 };
 
 var rtlStyle$6 = cB("notification", [cM("rtl", `
@@ -49981,7 +50236,7 @@ const notificationRtl = {
   style: rtlStyle$6
 };
 
-function self$y(vars) {
+function self$x(vars) {
   const {
     fontWeightStrong,
     fontTitleSmall,
@@ -50007,13 +50262,13 @@ function self$y(vars) {
 const pageHeaderLight = createTheme$1({
   name: "PageHeader",
   common: derived,
-  self: self$y
+  self: self$x
 });
 
 const pageHeaderDark = {
   name: "PageHeader",
   common: derived$1,
-  self: self$y
+  self: self$x
 };
 
 var rtlStyle$5 = cB("page-header-wrapper", [cM("rtl", [cB("page-header-header", `
@@ -50040,7 +50295,7 @@ var rtl = {
   style: rtlStyle$5
 };
 
-function self$x(vars) {
+function self$w(vars) {
   const {
     fontBodyMedium,
     staticOrange
@@ -50058,7 +50313,7 @@ const popconfirmLight = createTheme$1({
     Button: buttonLight,
     Popover: popoverLight
   },
-  self: self$x
+  self: self$w
 });
 
 const popconfirmDark = {
@@ -50068,10 +50323,10 @@ const popconfirmDark = {
     Button: buttonDark,
     Popover: popoverDark
   },
-  self: self$x
+  self: self$w
 };
 
-function self$w(vars) {
+function self$v(vars) {
   const {
     elementsQuinary,
     brandSecondary600
@@ -50087,16 +50342,16 @@ function self$w(vars) {
 const themeLight$2 = {
   name: "Rate",
   common: derived,
-  self: self$w
+  self: self$v
 };
 
 const rateDark = {
   name: "Rate",
   common: derived$1,
-  self: self$w
+  self: self$v
 };
 
-function self$v(vars) {
+function self$u(vars) {
   const {
     fontHeadingSmall,
     fontHeadingMedium,
@@ -50145,16 +50400,16 @@ function self$v(vars) {
 const resultLight = {
   name: "Result",
   common: derived,
-  self: self$v
+  self: self$u
 };
 
 const resultDark = {
   name: "Result",
   common: derived$1,
-  self: self$v
+  self: self$u
 };
 
-function self$u(vars) {
+function self$t(vars) {
   const {
     borderRadius,
     opacityDisabled,
@@ -50201,48 +50456,12 @@ function self$u(vars) {
 const sliderLight = {
   name: "Slider",
   common: derived,
-  self: self$u
+  self: self$t
 };
 
 const sliderDark = {
   name: "Slider",
   common: derived$1,
-  self: self$u
-};
-
-function self$t(vars) {
-  const {
-    opacityDisabled,
-    elementsPrimary,
-    brandPrimary500,
-    fontBodyMedium,
-    fontBodySmall,
-    fontBodyLarge,
-    fontHeadingSmall,
-    fontTitleMedium,
-    fontHeadingLarge
-  } = vars;
-  return {
-    tertiaryColor: elementsPrimary,
-    primaryColor: brandPrimary500,
-    fontSize: fontBodyMedium,
-    sizeTiny: fontBodySmall,
-    sizeSmall: fontBodyLarge,
-    sizeMedium: fontTitleMedium,
-    sizeLarge: fontHeadingSmall,
-    sizeHuge: fontHeadingLarge,
-    opacitySpinning: opacityDisabled
-  };
-}
-const spinLight = {
-  name: "Spin",
-  common: derived,
-  self: self$t
-};
-
-const spinDark = {
-  name: "Spin",
-  common: derived$1,
   self: self$t
 };
 
@@ -51159,8 +51378,31 @@ const imagePreviewSharedProps = {
   renderToolbar: Function
 };
 const imageContextKey = createInjectionKey("u-image");
+const BLEEDING = 32;
+const imagePreviewProps = {
+  ...imagePreviewSharedProps,
+  src: String,
+  show: {
+    type: Boolean,
+    default: void 0
+  },
+  defaultShow: Boolean,
+  "onUpdate:show": [Function, Array],
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  spinProps: {
+    type: Object,
+    default: void 0
+  },
+  onUpdateShow: [Function, Array],
+  onNext: Function,
+  onPrev: Function,
+  onClose: [Function, Array]
+};
 
-var style$19 = 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;
@@ -51194,7 +51436,17 @@ var style$19 = c$1([c$1("body >", [cB("image-container", "position: fixed;")]),
       padding: 0 8px;
       font-size: 28px;
       cursor: pointer;
-    `), fadeInTransition()]), cB("image-preview-wrapper", `
+    `), fadeInTransition()]), cB("image-preview-loading", `
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+  `), cB("image-preview-wrapper", `
     position: absolute;
     left: 0;
     right: 0;
@@ -51220,31 +51472,17 @@ var style$19 = c$1([c$1("body >", [cB("image-container", "position: fixed;")]),
       border-radius: inherit;
     `)])]);
 
-const BLEEDING = 32;
-const imagePreviewProps = {
-  ...imagePreviewSharedProps,
-  src: String,
-  show: {
-    type: Boolean,
-    default: void 0
-  },
-  defaultShow: Boolean,
-  "onUpdate:show": [Function, Array],
-  onUpdateShow: [Function, Array],
-  onNext: Function,
-  onPrev: Function,
-  onClose: [Function, Array]
-};
 var _UImagePreview = defineComponent({
   name: "ImagePreview",
   props: imagePreviewProps,
+  slots: Object,
   setup(props) {
     const { src } = toRefs(props);
     const { mergedClsPrefixRef } = useConfig(props);
     const themeRef = useTheme(
       "Image",
       "-image",
-      style$19,
+      style$18,
       imageLight,
       props,
       mergedClsPrefixRef
@@ -51739,7 +51977,7 @@ var _UImagePreview = defineComponent({
                         class: `${clsPrefix}-image-preview-wrapper`,
                         ref: "previewWrapperRef"
                       },
-                      /* @__PURE__ */ h(
+                      !this.loading ? /* @__PURE__ */ h(
                         "img",
                         {
                           ...previewedImgProps,
@@ -51755,13 +51993,18 @@ var _UImagePreview = defineComponent({
                           ref: "previewRef",
                           onDragstart: this.handleDragStart
                         }
-                      )
+                      ) : null
                     ),
                     [[vShow, this.mergedShow]]
                   );
                 }
               }
-            )
+            ),
+            this.mergedShow && this.loading && /* @__PURE__ */ h("div", { class: `${clsPrefix}-image-preview-loading` }, /* @__PURE__ */ h(_USpin, { ...this.spinProps }, {
+              default: this.$slots["spin-default"],
+              icon: this.$slots["spin-icon"],
+              description: this.$slots["spin-description"]
+            }))
           ),
           [[zindexable, { enabled: this.mergedShow }]]
         );
@@ -52153,225 +52396,6 @@ var _UImage = defineComponent({
   }
 });
 
-var style$18 = c$1([c$1("@keyframes spin-rotate", `
-    from {
-      transform: rotate(0);
-    }
-    to {
-      transform: rotate(360deg);
-    }
-  `), cB("spin-container", {
-  position: "relative"
-}, [cB("spin-body", `
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translateX(-50%) translateY(-50%);
-    `, [fadeInTransition()])]), cB("spin-body", `
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-  `), cB("spin", `
-    display: inline-flex;
-    height: var(--u-size);
-    width: var(--u-size);
-    font-size: var(--u-size);
-    color: var(--u-color);
-  `, [cM("rotate", `
-      animation: spin-rotate 2s linear infinite;
-    `)]), cB("spin-description", `
-    display: inline-block;
-    font-size: var(--u-font-size);
-    color: var(--u-text-color);
-    transition: color .3s var(--u-bezier);
-    margin-top: 8px;
-  `), cB("spin-content", `
-    opacity: 1;
-    transition: opacity .3s var(--u-bezier);
-    pointer-events: all;
-  `, [cM("spinning", `
-      user-select: none;
-      -webkit-user-select: none;
-      pointer-events: none;
-      opacity: var(--u-opacity-spinning);
-    `)])]);
-
-const STROKE_WIDTH = {
-  tiny: 22,
-  small: 20,
-  medium: 18,
-  large: 16,
-  huge: 14
-};
-const spinProps = {
-  ...useTheme.props,
-  contentClass: String,
-  contentStyle: [Object, String],
-  description: String,
-  stroke: String,
-  size: {
-    type: [String, Number],
-    default: "medium"
-  },
-  show: {
-    type: Boolean,
-    default: true
-  },
-  strokeWidth: Number,
-  rotate: {
-    type: Boolean,
-    default: true
-  },
-  scale: Number,
-  radius: Number,
-  spinning: {
-    type: Boolean,
-    validator: () => {
-      return true;
-    },
-    default: void 0
-  },
-  color: {
-    type: [String],
-    default: "primary"
-  },
-  delay: Number
-};
-var _USpin = defineComponent({
-  name: "Spin",
-  props: spinProps,
-  slots: Object,
-  setup(props) {
-    {
-      watchEffect(() => {
-        if (props.spinning !== void 0) {
-          warnOnce(
-            "spin",
-            "`spinning` is deprecated, please use `show` instead."
-          );
-        }
-      });
-    }
-    const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
-    const themeRef = useTheme(
-      "Spin",
-      "-spin",
-      style$18,
-      spinLight,
-      props,
-      mergedClsPrefixRef
-    );
-    const cssVarsRef = computed(() => {
-      const { size: spinSize, color } = props;
-      const {
-        common: { cubicBezierEaseInOut },
-        self
-      } = themeRef.value;
-      const { opacitySpinning, tertiaryColor, primaryColor } = self;
-      const size = typeof spinSize === "number" ? pxfy(spinSize) : self[createKey("size", spinSize)];
-      return {
-        "--u-bezier": cubicBezierEaseInOut,
-        "--u-opacity-spinning": opacitySpinning,
-        "--u-size": size,
-        "--u-color": color === "tertiary" ? tertiaryColor : color === "primary" ? primaryColor : color,
-        "--u-text-color": color === "tertiary" ? tertiaryColor : color === "primary" ? primaryColor : color
-      };
-    });
-    const themeClassHandle = inlineThemeDisabled ? useThemeClass(
-      "spin",
-      computed(() => {
-        const { size } = props;
-        return typeof size === "number" ? String(size) : size[0];
-      }),
-      cssVarsRef,
-      props
-    ) : void 0;
-    const compitableShow = useCompitable(props, ["spinning", "show"]);
-    const activeRef = ref(false);
-    watchEffect((onCleanup) => {
-      let timerId;
-      if (compitableShow.value) {
-        const { delay } = props;
-        if (delay) {
-          timerId = window.setTimeout(() => {
-            activeRef.value = true;
-          }, props.delay);
-          onCleanup(() => {
-            clearTimeout(timerId);
-          });
-          return;
-        }
-      }
-      activeRef.value = compitableShow.value;
-    });
-    return {
-      mergedClsPrefix: mergedClsPrefixRef,
-      active: activeRef,
-      mergedStrokeWidth: computed(() => {
-        const { strokeWidth } = props;
-        if (strokeWidth !== void 0)
-          return strokeWidth;
-        const { size } = props;
-        return STROKE_WIDTH[typeof size === "number" ? "medium" : size];
-      }),
-      cssVars: inlineThemeDisabled ? void 0 : cssVarsRef,
-      themeClass: themeClassHandle?.themeClass,
-      onRender: themeClassHandle?.onRender
-    };
-  },
-  render() {
-    const { $slots, mergedClsPrefix, description } = this;
-    const rotate = $slots.icon && this.rotate;
-    const descriptionNode = (description || $slots.description) && /* @__PURE__ */ h("div", { class: `${mergedClsPrefix}-spin-description` }, description || $slots.description?.());
-    const icon = $slots.icon ? /* @__PURE__ */ h("div", { class: [`${mergedClsPrefix}-spin-body`, this.themeClass] }, /* @__PURE__ */ h(
-      "div",
-      {
-        class: [
-          `${mergedClsPrefix}-spin`,
-          rotate && `${mergedClsPrefix}-spin--rotate`
-        ],
-        style: $slots.default ? "" : this.cssVars
-      },
-      $slots.icon()
-    ), descriptionNode) : /* @__PURE__ */ h("div", { class: [`${mergedClsPrefix}-spin-body`, this.themeClass] }, /* @__PURE__ */ h(
-      UBaseLoading,
-      {
-        clsPrefix: mergedClsPrefix,
-        style: $slots.default ? "" : this.cssVars,
-        stroke: this.stroke,
-        "stroke-width": this.mergedStrokeWidth,
-        radius: this.radius,
-        scale: this.scale,
-        class: `${mergedClsPrefix}-spin`
-      }
-    ), descriptionNode);
-    this.onRender?.();
-    return $slots.default ? /* @__PURE__ */ h(
-      "div",
-      {
-        class: [`${mergedClsPrefix}-spin-container`, this.themeClass],
-        style: this.cssVars
-      },
-      /* @__PURE__ */ h(
-        "div",
-        {
-          class: [
-            `${mergedClsPrefix}-spin-content`,
-            this.active && `${mergedClsPrefix}-spin-content--spinning`,
-            this.contentClass
-          ],
-          style: this.contentStyle
-        },
-        $slots
-      ),
-      /* @__PURE__ */ h(Transition, { name: "fade-in-transition" }, {
-        default: () => this.active ? icon : null
-      })
-    ) : icon;
-  }
-});
-
 function useUploadActionsRender(options) {
   const {
     clsPrefix,
@@ -117676,7 +117700,7 @@ function useThemeVars() {
   });
 }
 
-var version = "2.3.4";
+var version = "2.3.5";
 
 function create({
   componentPrefix = "U",