npm - @yklyklpackages/message-card - Versions diffs - 0.7.0 → 0.8.0 - Mend

@yklyklpackages/message-card 0.7.0 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (37) hide show

package/dist/components/core/LeafWrapper.d.ts.map +1 -1
package/dist/components/core/templateAdapter.d.ts.map +1 -1
package/dist/components/layout/{CardLayout.d.ts → JDHCardLayout.d.ts} +3 -3
package/dist/components/layout/JDHCardLayout.d.ts.map +1 -0
package/dist/components/message/MessageContainer.d.ts +1 -0
package/dist/components/message/MessageContainer.d.ts.map +1 -1
package/dist/components/render/Button/index.d.ts +13 -0
package/dist/components/render/Button/index.d.ts.map +1 -0
package/dist/components/render/ButtonJDH.d.ts +2 -2
package/dist/components/render/ButtonJDH.d.ts.map +1 -1
package/dist/components/render/ChoiceJDH.d.ts +2 -2
package/dist/components/render/ChoiceJDH.d.ts.map +1 -1
package/dist/components/render/Image.d.ts +2 -2
package/dist/components/render/Image.d.ts.map +1 -1
package/dist/components/render/InputJDH.d.ts +2 -2
package/dist/components/render/InputJDH.d.ts.map +1 -1
package/dist/components/render/Markdown.d.ts +2 -2
package/dist/components/render/Markdown.d.ts.map +1 -1
package/dist/components/render/Text.d.ts +2 -2
package/dist/components/render/Text.d.ts.map +1 -1
package/dist/components/render/TextareaJDH.d.ts +2 -2
package/dist/components/render/TextareaJDH.d.ts.map +1 -1
package/dist/components/theme/ScreenTheme375.d.ts.map +1 -1
package/dist/components/theme/defaultTheme.d.ts.map +1 -1
package/dist/components/types/component.d.ts +0 -4
package/dist/components/types/component.d.ts.map +1 -1
package/dist/components/utils/styleHelpers.d.ts +17 -18
package/dist/components/utils/styleHelpers.d.ts.map +1 -1
package/dist/index.cjs +1293 -617
package/dist/index.cjs.map +1 -1
package/dist/index.mjs +1293 -617
package/dist/index.mjs.map +1 -1
package/dist/index.umd.js +1293 -617
package/dist/index.umd.js.map +1 -1
package/dist/style.css +177 -206
package/package.json +4 -3
package/dist/components/layout/CardLayout.d.ts.map +0 -1

package/dist/index.cjs CHANGED Viewed

@@ -6,25 +6,25 @@ var _a;
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-var __defProp$z = Object.defineProperty;
-var __defProps$t = Object.defineProperties;
-var __getOwnPropDescs$t = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$w = Object.getOwnPropertySymbols;
-var __hasOwnProp$w = Object.prototype.hasOwnProperty;
-var __propIsEnum$w = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$z = (obj, key, value) => key in obj ? __defProp$z(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$w = (a, b3) => {
+var __defProp$A = Object.defineProperty;
+var __defProps$u = Object.defineProperties;
+var __getOwnPropDescs$u = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$x = Object.getOwnPropertySymbols;
+var __hasOwnProp$x = Object.prototype.hasOwnProperty;
+var __propIsEnum$x = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$A = (obj, key, value) => key in obj ? __defProp$A(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$x = (a, b3) => {
   for (var prop in b3 || (b3 = {}))
-    if (__hasOwnProp$w.call(b3, prop))
-      __defNormalProp$z(a, prop, b3[prop]);
-  if (__getOwnPropSymbols$w)
-    for (var prop of __getOwnPropSymbols$w(b3)) {
-      if (__propIsEnum$w.call(b3, prop))
-        __defNormalProp$z(a, prop, b3[prop]);
+    if (__hasOwnProp$x.call(b3, prop))
+      __defNormalProp$A(a, prop, b3[prop]);
+  if (__getOwnPropSymbols$x)
+    for (var prop of __getOwnPropSymbols$x(b3)) {
+      if (__propIsEnum$x.call(b3, prop))
+        __defNormalProp$A(a, prop, b3[prop]);
     }
   return a;
 };
-var __spreadProps$t = (a, b3) => __defProps$t(a, __getOwnPropDescs$t(b3));
+var __spreadProps$u = (a, b3) => __defProps$u(a, __getOwnPropDescs$u(b3));
 const postMessage$1 = (name, params) => {
   var _a2;
   (_a2 = window == null ? void 0 : window.parent) == null ? void 0 : _a2.postMessage({ from: "aui-preview", name, params }, "*");
@@ -69,8 +69,8 @@ const WrapComponent = (props) => {
       className: "container-wrap-hoc",
       ref: containerRef,
       onClick,
-      children: renderFunction(__spreadProps$t(__spreadValues$w({}, runtimeProps), {
-        component: __spreadValues$w(__spreadValues$w({}, runtimeProps.component), componentFromEditor || {})
+      children: renderFunction(__spreadProps$u(__spreadValues$x({}, runtimeProps), {
+        component: __spreadValues$x(__spreadValues$x({}, runtimeProps.component), componentFromEditor || {})
       }))
     },
     updateUniqueId
@@ -94,19 +94,19 @@ const containerComponentEditorModeHOC = (renderFunction) => {
     );
   } : renderFunction;
 };
-var __defProp$y = Object.defineProperty;
-var __getOwnPropSymbols$v = Object.getOwnPropertySymbols;
-var __hasOwnProp$v = Object.prototype.hasOwnProperty;
-var __propIsEnum$v = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$y = (obj, key, value) => key in obj ? __defProp$y(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$v = (a, b3) => {
+var __defProp$z = Object.defineProperty;
+var __getOwnPropSymbols$w = Object.getOwnPropertySymbols;
+var __hasOwnProp$w = Object.prototype.hasOwnProperty;
+var __propIsEnum$w = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$z = (obj, key, value) => key in obj ? __defProp$z(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$w = (a, b3) => {
   for (var prop in b3 || (b3 = {}))
-    if (__hasOwnProp$v.call(b3, prop))
-      __defNormalProp$y(a, prop, b3[prop]);
-  if (__getOwnPropSymbols$v)
-    for (var prop of __getOwnPropSymbols$v(b3)) {
-      if (__propIsEnum$v.call(b3, prop))
-        __defNormalProp$y(a, prop, b3[prop]);
+    if (__hasOwnProp$w.call(b3, prop))
+      __defNormalProp$z(a, prop, b3[prop]);
+  if (__getOwnPropSymbols$w)
+    for (var prop of __getOwnPropSymbols$w(b3)) {
+      if (__propIsEnum$w.call(b3, prop))
+        __defNormalProp$z(a, prop, b3[prop]);
     }
   return a;
 };
@@ -132,7 +132,7 @@ const getImageUrl = ({
   if (isWebp) {
     reWebp = ".webp";
   }
-  const { width, height } = __spreadValues$v({}, size);
+  const { width, height } = __spreadValues$w({}, size);
   let reSize = "";
   if (width && height) {
     reSize = `s${width}x${height}_`;
@@ -212,7 +212,183 @@ const defaultTheme$2 = {
     Radius_JDH_xs: 6
   },
   components: {
-    card: {
+    text: {
+      basic: {
+        fontSize: "FontSizes_JDH_Text",
+        lineHeight: "FontSizes_JDH_Text",
+        fontWeight: "FontWeight_JDH_Normal",
+        color: "Color_JDH_Gray_Text",
+        background: "#FFF",
+        margin: 0
+      },
+      variant: {
+        h1: {
+          fontSize: "FontSizes_JDH_Headline1",
+          lineHeight: "FontSizes_JDH_Headline1",
+          color: "Color_JDH_Gray_Headline",
+          fontWeight: "FontWeight_JDH_Medium"
+        },
+        h2: {
+          fontSize: "FontSizes_JDH_Headline2",
+          lineHeight: "FontSizes_JDH_Headline2",
+          color: "Color_JDH_Gray_Headline",
+          fontWeight: "FontWeight_JDH_Medium"
+        },
+        h3: {
+          fontSize: "FontSizes_JDH_Title",
+          lineHeight: "FontSizes_JDH_Title",
+          color: "Color_JDH_Gray_Headline",
+          fontWeight: "FontWeight_JDH_Medium"
+        },
+        h4: {
+          fontSize: "FontSizes_JDH_Title",
+          lineHeight: "FontSizes_JDH_Title",
+          color: "Color_JDH_Gray_Headline",
+          fontWeight: "FontWeight_JDH_Medium"
+        },
+        h5: {
+          fontSize: "FontSizes_JDH_Title",
+          lineHeight: "FontSizes_JDH_Title",
+          color: "Color_JDH_Gray_Headline",
+          fontWeight: "FontWeight_JDH_Medium"
+        },
+        body: {},
+        caption: {
+          fontSize: "FontSizes_JDH_AccentText",
+          lineHeight: "FontSizes_JDH_AccentText",
+          color: "Color_JDH_Gray_AccentText"
+        },
+        tag: {
+          fontSize: "FontSizes_JDH_TagText",
+          lineHeight: "FontSizes_JDH_TagText",
+          color: "Color_JDH_Gray_AccentText"
+        }
+      }
+    },
+    button: {
+      basicColor: {
+        color: "#FFF",
+        background: "#000",
+        borderColor: "rgb(217, 217, 217)",
+        fillBackground: "rgba(0, 0, 0, 0.04)"
+      },
+      color: {
+        default: {},
+        primary: {
+          color: "#FFF",
+          background: "rgb(22, 119, 255)",
+          borderColor: "rgb(22, 119, 255)",
+          fillBackground: "rgb(230, 244, 255)"
+        },
+        danger: {
+          color: "#FFF",
+          background: "rgb(255, 77, 79)",
+          borderColor: "rgb(255, 77, 79)",
+          fillBackground: "rgb(255, 242, 240)"
+        },
+        green: {
+          color: "#fff",
+          background: "rgb(82, 196, 26)",
+          borderColor: "rgb(82, 196, 26)",
+          fillBackground: "rgb(246, 255, 237)"
+        },
+        red: {
+          background: "rgb(245, 34, 45)",
+          borderColor: "rgb(245, 34, 45)",
+          fillBackground: "rgb(255, 241, 240)"
+        },
+        yellow: {
+          background: "rgb(250, 219, 20)",
+          borderColor: "rgb(250, 219, 20)",
+          fillBackground: "rgb(254, 255, 230)"
+        },
+        blue: {
+          color: "#FFF",
+          background: "rgb(22, 119, 255)",
+          borderColor: "rgb(22, 119, 255)",
+          fillBackground: "rgb(230, 244, 255)"
+        }
+      },
+      disabledColor: {
+        color: "rgba(0, 0, 0, 0.25)",
+        background: "rgba(0, 0, 0, 0.04)",
+        borderColor: "rgb(217, 217, 217)",
+        fillBackground: "rgba(0, 0, 0, 0.04)",
+        textLinkBackground: "#fff"
+      },
+      hoverColor: {
+        default: {
+          solidBackground: "rgba(0,0,0,0.75)",
+          outlineDashedTextColor: "#4096ff",
+          fillBackground: "rgba(0,0,0,0.06)",
+          textBackground: "rgba(0,0,0,0.04)"
+        },
+        primary: {
+          solidBackground: "#4096ff",
+          outlineDashedTextColor: "#4096ff",
+          fillBackground: "#bae0ff",
+          textBackground: "#e6f4ff"
+        },
+        danger: {
+          solidBackground: "#ff7875",
+          outlineDashedTextColor: "#ff7875",
+          fillBackground: "#ffdfdc",
+          textBackground: "#fff2f0"
+        },
+        green: {
+          solidBackground: "#73d13d",
+          outlineDashedTextColor: "#73d13d",
+          fillBackground: "#d9f7be",
+          textBackground: "#f6ffed"
+        },
+        red: {
+          solidBackground: "#ff4d4f",
+          outlineDashedTextColor: "#ff4d4f",
+          fillBackground: "#ffccc7",
+          textBackground: "#fff1f0"
+        },
+        blue: {
+          solidBackground: "#4096ff",
+          outlineDashedTextColor: "#4096ff",
+          fillBackground: "#bae0ff",
+          textBackground: "#e6f4ff"
+        },
+        yellow: {
+          solidBackground: "#ffec3d",
+          outlineDashedTextColor: "#ffec3d",
+          fillBackground: "#ffffb8",
+          textBackground: "#feffe6"
+        }
+      },
+      basicSize: {
+        fontSize: 28,
+        lineHeight: 44,
+        padding: [8, 30],
+        borderRadius: 12,
+        minWidth: "auto"
+      },
+      size: {
+        small: {
+          padding: [0, 14]
+        },
+        middle: {},
+        large: {
+          fontSize: 32,
+          lineHeight: 50,
+          borderRadius: 16,
+          padding: [13, 30]
+        }
+      },
+      icon: {
+        borderRadius: 4,
+        margin: [0, 16, 0, 0]
+      },
+      loading: {
+        opacity: 0.65
+      },
+      loadingIcon: ""
+    },
+    jdhCard: {
       wrap: {
         background: "Color_JDH_Gray_Background",
         padding: "Spacing_JDH_xxl"
@@ -237,7 +413,7 @@ const defaultTheme$2 = {
         borderRadius: "Radius_JDH_xl"
       }
     },
-    choice: {
+    jdhChoice: {
       wrap: {
         padding: [13, 32],
         layoutSmallPadding: [11, 20],
@@ -289,7 +465,7 @@ const defaultTheme$2 = {
       },
       disabledOpacity: 0.4
     },
-    button: {
+    jdhButton: {
       colorStyle: {
         solid: {
           primary: {
@@ -377,7 +553,7 @@ const defaultTheme$2 = {
       },
       disabledOpacity: 0.4
     },
-    input: {
+    jdhInput: {
       defaultState: {
         background: "Color_JDH_Gray_Background",
         fontSize: "FontSizes_JDH_Text",
@@ -423,7 +599,7 @@ const defaultTheme$2 = {
         color: "Color_JDH_Gray_AccentText"
       }
     },
-    textarea: {
+    jdhTextarea: {
       defaultState: {
         background: "Color_JDH_Gray_Background",
         fontSize: "FontSizes_JDH_Text",
@@ -478,12 +654,12 @@ const defaultTheme$1 = {
     FontSizes_JDH_TagText: 10
   },
   lineHeight: {
-    FontSizes_JDH_Headline1: 70,
-    FontSizes_JDH_Headline2: 52,
-    FontSizes_JDH_Title: 46,
-    FontSizes_JDH_Text: 42,
-    FontSizes_JDH_AccentText: 36,
-    FontSizes_JDH_TagText: 30
+    FontSizes_JDH_Headline1: 35,
+    FontSizes_JDH_Headline2: 26,
+    FontSizes_JDH_Title: 23,
+    FontSizes_JDH_Text: 21,
+    FontSizes_JDH_AccentText: 18,
+    FontSizes_JDH_TagText: 15
   },
   color: {
     Color_JDH_Primary: "#17CB8E",
@@ -529,7 +705,183 @@ const defaultTheme$1 = {
     Radius_JDH_xs: 3
   },
   components: {
-    card: {
+    text: {
+      basic: {
+        fontSize: "FontSizes_JDH_Text",
+        lineHeight: "FontSizes_JDH_Text",
+        fontWeight: "FontWeight_JDH_Normal",
+        color: "Color_JDH_Gray_Text",
+        background: "#FFF",
+        margin: 0
+      },
+      variant: {
+        h1: {
+          fontSize: "FontSizes_JDH_Headline1",
+          lineHeight: "FontSizes_JDH_Headline1",
+          color: "Color_JDH_Gray_Headline",
+          fontWeight: "FontWeight_JDH_Medium"
+        },
+        h2: {
+          fontSize: "FontSizes_JDH_Headline2",
+          lineHeight: "FontSizes_JDH_Headline2",
+          color: "Color_JDH_Gray_Headline",
+          fontWeight: "FontWeight_JDH_Medium"
+        },
+        h3: {
+          fontSize: "FontSizes_JDH_Title",
+          lineHeight: "FontSizes_JDH_Title",
+          color: "Color_JDH_Gray_Headline",
+          fontWeight: "FontWeight_JDH_Medium"
+        },
+        h4: {
+          fontSize: "FontSizes_JDH_Title",
+          lineHeight: "FontSizes_JDH_Title",
+          color: "Color_JDH_Gray_Headline",
+          fontWeight: "FontWeight_JDH_Medium"
+        },
+        h5: {
+          fontSize: "FontSizes_JDH_Title",
+          lineHeight: "FontSizes_JDH_Title",
+          color: "Color_JDH_Gray_Headline",
+          fontWeight: "FontWeight_JDH_Medium"
+        },
+        body: {},
+        caption: {
+          fontSize: "FontSizes_JDH_AccentText",
+          lineHeight: "FontSizes_JDH_AccentText",
+          color: "Color_JDH_Gray_AccentText"
+        },
+        tag: {
+          fontSize: "FontSizes_JDH_TagText",
+          lineHeight: "FontSizes_JDH_TagText",
+          color: "Color_JDH_Gray_AccentText"
+        }
+      }
+    },
+    button: {
+      basicColor: {
+        color: "#FFF",
+        background: "#000",
+        borderColor: "rgb(217, 217, 217)",
+        fillBackground: "rgba(0, 0, 0, 0.04)"
+      },
+      color: {
+        default: {},
+        primary: {
+          color: "#FFF",
+          background: "rgb(22, 119, 255)",
+          borderColor: "rgb(22, 119, 255)",
+          fillBackground: "rgb(230, 244, 255)"
+        },
+        danger: {
+          color: "#FFF",
+          background: "rgb(255, 77, 79)",
+          borderColor: "rgb(255, 77, 79)",
+          fillBackground: "rgb(255, 242, 240)"
+        },
+        green: {
+          color: "#fff",
+          background: "rgb(82, 196, 26)",
+          borderColor: "rgb(82, 196, 26)",
+          fillBackground: "rgb(246, 255, 237)"
+        },
+        red: {
+          background: "rgb(245, 34, 45)",
+          borderColor: "rgb(245, 34, 45)",
+          fillBackground: "rgb(255, 241, 240)"
+        },
+        yellow: {
+          background: "rgb(250, 219, 20)",
+          borderColor: "rgb(250, 219, 20)",
+          fillBackground: "rgb(254, 255, 230)"
+        },
+        blue: {
+          color: "#FFF",
+          background: "rgb(22, 119, 255)",
+          borderColor: "rgb(22, 119, 255)",
+          fillBackground: "rgb(230, 244, 255)"
+        }
+      },
+      disabledColor: {
+        color: "rgba(0, 0, 0, 0.25)",
+        background: "rgba(0, 0, 0, 0.04)",
+        borderColor: "rgb(217, 217, 217)",
+        fillBackground: "rgba(0, 0, 0, 0.04)",
+        textLinkBackground: "#fff"
+      },
+      hoverColor: {
+        default: {
+          solidBackground: "rgba(0,0,0,0.75)",
+          outlineDashedTextColor: "#4096ff",
+          fillBackground: "rgba(0,0,0,0.06)",
+          textBackground: "rgba(0,0,0,0.04)"
+        },
+        primary: {
+          solidBackground: "#4096ff",
+          outlineDashedTextColor: "#4096ff",
+          fillBackground: "#bae0ff",
+          textBackground: "#e6f4ff"
+        },
+        danger: {
+          solidBackground: "#ff7875",
+          outlineDashedTextColor: "#ff7875",
+          fillBackground: "#ffdfdc",
+          textBackground: "#fff2f0"
+        },
+        green: {
+          solidBackground: "#73d13d",
+          outlineDashedTextColor: "#73d13d",
+          fillBackground: "#d9f7be",
+          textBackground: "#f6ffed"
+        },
+        red: {
+          solidBackground: "#ff4d4f",
+          outlineDashedTextColor: "#ff4d4f",
+          fillBackground: "#ffccc7",
+          textBackground: "#fff1f0"
+        },
+        blue: {
+          solidBackground: "#4096ff",
+          outlineDashedTextColor: "#4096ff",
+          fillBackground: "#bae0ff",
+          textBackground: "#e6f4ff"
+        },
+        yellow: {
+          solidBackground: "#ffec3d",
+          outlineDashedTextColor: "#ffec3d",
+          fillBackground: "#ffffb8",
+          textBackground: "#feffe6"
+        }
+      },
+      basicSize: {
+        fontSize: 14,
+        lineHeight: 22,
+        padding: [4, 15],
+        borderRadius: 6,
+        minWidth: "auto"
+      },
+      size: {
+        small: {
+          padding: [0, 7]
+        },
+        middle: {},
+        large: {
+          fontSize: 16,
+          lineHeight: 25,
+          borderRadius: 8,
+          padding: [6.5, 15]
+        }
+      },
+      icon: {
+        borderRadius: 2,
+        margin: [0, 8, 0, 0]
+      },
+      loading: {
+        opacity: 0.65
+      },
+      loadingIcon: ""
+    },
+    jdhCard: {
       wrap: {
         background: "Color_JDH_Gray_Background",
         padding: "Spacing_JDH_xxl"
@@ -554,7 +906,7 @@ const defaultTheme$1 = {
         borderRadius: "Radius_JDH_xl"
       }
     },
-    choice: {
+    jdhChoice: {
       wrap: {
         padding: [6.5, 16],
         layoutSmallPadding: [5.5, 10],
@@ -606,7 +958,7 @@ const defaultTheme$1 = {
       },
       disabledOpacity: 0.4
     },
-    button: {
+    jdhButton: {
       colorStyle: {
         solid: {
           primary: {
@@ -694,7 +1046,7 @@ const defaultTheme$1 = {
       },
       disabledOpacity: 0.4
     },
-    input: {
+    jdhInput: {
       defaultState: {
         background: "Color_JDH_Gray_Background",
         fontSize: "FontSizes_JDH_Text",
@@ -740,7 +1092,7 @@ const defaultTheme$1 = {
         color: "Color_JDH_Gray_AccentText"
       }
     },
-    textarea: {
+    jdhTextarea: {
       defaultState: {
         background: "Color_JDH_Gray_Background",
         fontSize: "FontSizes_JDH_Text",
@@ -786,25 +1138,25 @@ const defaultTheme$1 = {
   }
 };
 const DEFAULT_SCALE = 0.5;
-var __defProp$x = Object.defineProperty;
-var __defProps$s = Object.defineProperties;
-var __getOwnPropDescs$s = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$u = Object.getOwnPropertySymbols;
-var __hasOwnProp$u = Object.prototype.hasOwnProperty;
-var __propIsEnum$u = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$x = (obj, key, value) => key in obj ? __defProp$x(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$u = (a, b3) => {
+var __defProp$y = Object.defineProperty;
+var __defProps$t = Object.defineProperties;
+var __getOwnPropDescs$t = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$v = Object.getOwnPropertySymbols;
+var __hasOwnProp$v = Object.prototype.hasOwnProperty;
+var __propIsEnum$v = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$y = (obj, key, value) => key in obj ? __defProp$y(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$v = (a, b3) => {
   for (var prop in b3 || (b3 = {}))
-    if (__hasOwnProp$u.call(b3, prop))
-      __defNormalProp$x(a, prop, b3[prop]);
-  if (__getOwnPropSymbols$u)
-    for (var prop of __getOwnPropSymbols$u(b3)) {
-      if (__propIsEnum$u.call(b3, prop))
-        __defNormalProp$x(a, prop, b3[prop]);
+    if (__hasOwnProp$v.call(b3, prop))
+      __defNormalProp$y(a, prop, b3[prop]);
+  if (__getOwnPropSymbols$v)
+    for (var prop of __getOwnPropSymbols$v(b3)) {
+      if (__propIsEnum$v.call(b3, prop))
+        __defNormalProp$y(a, prop, b3[prop]);
     }
   return a;
 };
-var __spreadProps$s = (a, b3) => __defProps$s(a, __getOwnPropDescs$s(b3));
+var __spreadProps$t = (a, b3) => __defProps$t(a, __getOwnPropDescs$t(b3));
 const ThemeContext = React.createContext(defaultTheme$2);
 const ThemeProvider = ({
   scale = DEFAULT_SCALE,
@@ -813,13 +1165,13 @@ const ThemeProvider = ({
 }) => {
   const merged = React.useMemo(() => {
     const base = scale <= DEFAULT_SCALE ? defaultTheme$2 : defaultTheme$1;
-    return __spreadProps$s(__spreadValues$u(__spreadValues$u({}, base), theme || {}), {
-      fontSize: __spreadValues$u(__spreadValues$u({}, base.fontSize), (theme == null ? void 0 : theme.fontSize) || {}),
-      color: __spreadValues$u(__spreadValues$u({}, base.color), (theme == null ? void 0 : theme.color) || {}),
-      backgroundColor: __spreadValues$u(__spreadValues$u({}, base.color), (theme == null ? void 0 : theme.color) || {}),
-      fontWeight: __spreadValues$u(__spreadValues$u({}, base.fontWeight), (theme == null ? void 0 : theme.fontWeight) || {}),
-      space: __spreadValues$u(__spreadValues$u({}, base.space), (theme == null ? void 0 : theme.space) || {}),
-      borderRadius: __spreadValues$u(__spreadValues$u({}, base.borderRadius), (theme == null ? void 0 : theme.borderRadius) || {})
+    return __spreadProps$t(__spreadValues$v(__spreadValues$v({}, base), theme || {}), {
+      fontSize: __spreadValues$v(__spreadValues$v({}, base.fontSize), (theme == null ? void 0 : theme.fontSize) || {}),
+      color: __spreadValues$v(__spreadValues$v({}, base.color), (theme == null ? void 0 : theme.color) || {}),
+      backgroundColor: __spreadValues$v(__spreadValues$v({}, base.color), (theme == null ? void 0 : theme.color) || {}),
+      fontWeight: __spreadValues$v(__spreadValues$v({}, base.fontWeight), (theme == null ? void 0 : theme.fontWeight) || {}),
+      space: __spreadValues$v(__spreadValues$v({}, base.space), (theme == null ? void 0 : theme.space) || {}),
+      borderRadius: __spreadValues$v(__spreadValues$v({}, base.borderRadius), (theme == null ? void 0 : theme.borderRadius) || {})
     });
   }, [theme]);
   return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: merged, children });
@@ -2284,7 +2636,9 @@ const compileToTree = (template, data = {}, editorMode2 = false) => {
           "actions",
           "renderActions",
           "border",
-          "backgroundImage"
+          "backgroundImage",
+          "backgroundLinearGradient",
+          "boxShadow"
         ]
       },
       runtime: {
@@ -2292,7 +2646,9 @@ const compileToTree = (template, data = {}, editorMode2 = false) => {
           "actions",
           "renderActions",
           "border",
-          "backgroundImage"
+          "backgroundImage",
+          "backgroundLinearGradient",
+          "boxShadow"
         ],
         editorMode: editorMode2
       }
@@ -4627,33 +4983,33 @@ var lib = {
   stringify: stringify2
 };
 const qs = /* @__PURE__ */ getDefaultExportFromCjs(lib);
-var __defProp$w = Object.defineProperty;
-var __defProps$r = Object.defineProperties;
-var __getOwnPropDescs$r = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$t = Object.getOwnPropertySymbols;
-var __hasOwnProp$t = Object.prototype.hasOwnProperty;
-var __propIsEnum$t = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$w = (obj, key, value) => key in obj ? __defProp$w(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$t = (a, b3) => {
+var __defProp$x = Object.defineProperty;
+var __defProps$s = Object.defineProperties;
+var __getOwnPropDescs$s = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$u = Object.getOwnPropertySymbols;
+var __hasOwnProp$u = Object.prototype.hasOwnProperty;
+var __propIsEnum$u = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$x = (obj, key, value) => key in obj ? __defProp$x(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$u = (a, b3) => {
   for (var prop in b3 || (b3 = {}))
-    if (__hasOwnProp$t.call(b3, prop))
-      __defNormalProp$w(a, prop, b3[prop]);
-  if (__getOwnPropSymbols$t)
-    for (var prop of __getOwnPropSymbols$t(b3)) {
-      if (__propIsEnum$t.call(b3, prop))
-        __defNormalProp$w(a, prop, b3[prop]);
+    if (__hasOwnProp$u.call(b3, prop))
+      __defNormalProp$x(a, prop, b3[prop]);
+  if (__getOwnPropSymbols$u)
+    for (var prop of __getOwnPropSymbols$u(b3)) {
+      if (__propIsEnum$u.call(b3, prop))
+        __defNormalProp$x(a, prop, b3[prop]);
     }
   return a;
 };
-var __spreadProps$r = (a, b3) => __defProps$r(a, __getOwnPropDescs$r(b3));
-var __objRest$1 = (source, exclude) => {
+var __spreadProps$s = (a, b3) => __defProps$s(a, __getOwnPropDescs$s(b3));
+var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$t.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$u.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$t)
-    for (var prop of __getOwnPropSymbols$t(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$t.call(source, prop))
+  if (source != null && __getOwnPropSymbols$u)
+    for (var prop of __getOwnPropSymbols$u(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$u.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -4696,7 +5052,7 @@ const manageAutoScrollDisable = (ctx, timeout = 500) => {
   return { startDisable, endDisable };
 };
 const handleNavigateTo = async (config) => {
-  const _a2 = config.params || {}, { url, params, delayH5 } = _a2, restOptions = __objRest$1(_a2, ["url", "params", "delayH5"]);
+  const _a2 = config.params || {}, { url, params, delayH5 } = _a2, restOptions = __objRest(_a2, ["url", "params", "delayH5"]);
   if (delayH5 > 0) {
     setTimeout(() => jumpRouter(url, params, restOptions), delayH5);
   } else {
@@ -4722,12 +5078,12 @@ const jumpRouter = (url, params = {}, opt = {}) => {
 const handleSendMessage = (config, { ctx, metadata }) => {
   var _a2, _c;
   if ((_a2 = config.params) == null ? void 0 : _a2.text) {
-    const _b = config.params, { text } = _b, rest = __objRest$1(_b, ["text"]);
+    const _b = config.params, { text } = _b, rest = __objRest(_b, ["text"]);
     (_c = ctx == null ? void 0 : ctx.postMessage) == null ? void 0 : _c.call(ctx, {
       type: "text",
       data: {
         text,
-        customJsonData: __spreadValues$t({
+        customJsonData: __spreadValues$u({
           customBiz: metadata == null ? void 0 : metadata.customBiz
         }, rest || {})
       }
@@ -4750,16 +5106,16 @@ const handleUpdateLocalData = async (config, { setValues, extra }) => {
     const oldValue = prev == null ? void 0 : prev[key];
     const isOldEmpty = oldValue === void 0 || oldValue === null || oldValue === "" || typeof oldValue === "object" && Object.keys(oldValue).length === 0;
     if (isOldEmpty) {
-      return __spreadProps$r(__spreadValues$t({}, prev || {}), {
+      return __spreadProps$s(__spreadValues$u({}, prev || {}), {
         [key]: targetValue
       });
     }
     if (typeof oldValue === "object" && typeof targetValue === "object" && !Array.isArray(oldValue) && !Array.isArray(targetValue) && oldValue !== null && targetValue !== null) {
-      return __spreadProps$r(__spreadValues$t({}, prev || {}), {
-        [key]: __spreadValues$t(__spreadValues$t({}, oldValue), targetValue)
+      return __spreadProps$s(__spreadValues$u({}, prev || {}), {
+        [key]: __spreadValues$u(__spreadValues$u({}, oldValue), targetValue)
       });
     }
-    return __spreadProps$r(__spreadValues$t({}, prev || {}), {
+    return __spreadProps$s(__spreadValues$u({}, prev || {}), {
       [key]: targetValue
     });
   });
@@ -4772,7 +5128,7 @@ const handleAddLocalDataToSet = (config, { setValues }) => {
     if (set.indexOf(value) === -1) {
       set.push(value);
     }
-    return __spreadProps$r(__spreadValues$t({}, prev), { [updateKey]: set });
+    return __spreadProps$s(__spreadValues$u({}, prev), { [updateKey]: set });
   });
 };
 const handleRemoveLocalDataToSet = (config, { setValues }) => {
@@ -4780,7 +5136,7 @@ const handleRemoveLocalDataToSet = (config, { setValues }) => {
   const { updateKey, value } = config.params;
   setValues((prev = {}) => {
     const set = Array.isArray(prev[updateKey]) ? [...prev[updateKey].filter((v2) => v2 !== value)] : [];
-    return __spreadProps$r(__spreadValues$t({}, prev), { [updateKey]: set });
+    return __spreadProps$s(__spreadValues$u({}, prev), { [updateKey]: set });
   });
 };
 const handleToggleLocalDataToSet = (config, { setValues }) => {
@@ -4794,7 +5150,7 @@ const handleToggleLocalDataToSet = (config, { setValues }) => {
     } else {
       set.splice(valueIndex, 1);
     }
-    return __spreadProps$r(__spreadValues$t({}, prev), { [updateKey]: set });
+    return __spreadProps$s(__spreadValues$u({}, prev), { [updateKey]: set });
   });
 };
 const handleCallApiUpdateData = (config, { onAction, commonPayload }) => {
@@ -4821,7 +5177,7 @@ const handleShowPopup = (config, { originProps }) => {
     ctx.getComponent({
       code: (_b = config == null ? void 0 : config.params) == null ? void 0 : _b.componentCode
     }),
-    __spreadValues$t(__spreadValues$t({}, originProps), ((_c = config == null ? void 0 : config.params) == null ? void 0 : _c.params) || {}),
+    __spreadValues$u(__spreadValues$u({}, originProps), ((_c = config == null ? void 0 : config.params) == null ? void 0 : _c.params) || {}),
     {
       background: "none",
       position: "bottom",
@@ -4976,27 +5332,45 @@ const RenderActionWrapper = ({
   }
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
 };
-var __defProp$v = Object.defineProperty;
-var __defProps$q = Object.defineProperties;
-var __getOwnPropDescs$q = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$s = Object.getOwnPropertySymbols;
-var __hasOwnProp$s = Object.prototype.hasOwnProperty;
-var __propIsEnum$s = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$v = (obj, key, value) => key in obj ? __defProp$v(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$s = (a, b3) => {
+var __defProp$w = Object.defineProperty;
+var __defProps$r = Object.defineProperties;
+var __getOwnPropDescs$r = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$t = Object.getOwnPropertySymbols;
+var __hasOwnProp$t = Object.prototype.hasOwnProperty;
+var __propIsEnum$t = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$w = (obj, key, value) => key in obj ? __defProp$w(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$t = (a, b3) => {
   for (var prop in b3 || (b3 = {}))
-    if (__hasOwnProp$s.call(b3, prop))
-      __defNormalProp$v(a, prop, b3[prop]);
-  if (__getOwnPropSymbols$s)
-    for (var prop of __getOwnPropSymbols$s(b3)) {
-      if (__propIsEnum$s.call(b3, prop))
-        __defNormalProp$v(a, prop, b3[prop]);
+    if (__hasOwnProp$t.call(b3, prop))
+      __defNormalProp$w(a, prop, b3[prop]);
+  if (__getOwnPropSymbols$t)
+    for (var prop of __getOwnPropSymbols$t(b3)) {
+      if (__propIsEnum$t.call(b3, prop))
+        __defNormalProp$w(a, prop, b3[prop]);
     }
   return a;
 };
-var __spreadProps$q = (a, b3) => __defProps$q(a, __getOwnPropDescs$q(b3));
+var __spreadProps$r = (a, b3) => __defProps$r(a, __getOwnPropDescs$r(b3));
+function pick(obj, keys) {
+  const result = {};
+  keys.forEach((key) => {
+    if (key in obj) {
+      result[key] = obj[key];
+    }
+  });
+  return result;
+}
+function mapToType(obj, callback) {
+  const result = {};
+  for (const key in obj) {
+    if (Object.prototype.hasOwnProperty.call(obj, key)) {
+      result[key] = callback(obj[key], key);
+    }
+  }
+  return result;
+}
 const baseContainerStyle = (props, scale = 1) => {
-  const style = __spreadValues$s({}, (props == null ? void 0 : props.style) || {});
+  const style = __spreadValues$t({}, (props == null ? void 0 : props.style) || {});
   return style;
 };
 const childGapStyle = (index, count, theme, gap, horizontal, scale = 1, isWrap = false) => {
@@ -5026,7 +5400,7 @@ const resolveSpace = (val, theme, scale = 1) => {
   }
   return val;
 };
-const paddingToStyle = (padding, theme, scale = 1) => {
+const paddingLogogramToStyle = (padding, theme, scale = 1) => {
   if (padding == null) return {};
   if (typeof padding === "number" || typeof padding === "string") {
     return { padding: resolveSpace(padding, theme, scale) };
@@ -5069,7 +5443,7 @@ const paddingToStyle = (padding, theme, scale = 1) => {
   }
   return {};
 };
-const marginToStyle = (margin, theme, scale = 1) => {
+const marginLogogramToStyle = (margin, theme, scale = 1) => {
   if (margin == null) return {};
   if (typeof margin === "number" || typeof margin === "string") {
     return { margin: resolveSpace(margin, theme, scale) };
@@ -5106,16 +5480,57 @@ const marginToStyle = (margin, theme, scale = 1) => {
   }
   return {};
 };
-const resolvedLineHeight = (lineHeight, theme, scale = 1) => {
+const marginAndPaddingToStyle = (marginAndPadding, theme, scale = 1) => {
+  const style = {};
+  if (marginAndPadding.margin) {
+    Object.assign(
+      style,
+      marginLogogramToStyle(marginAndPadding.margin, theme, scale)
+    );
+  }
+  if (marginAndPadding.padding) {
+    Object.assign(
+      style,
+      paddingLogogramToStyle(marginAndPadding.padding, theme, scale)
+    );
+  }
+  Object.assign(
+    style,
+    mapToType(
+      pick(marginAndPadding, [
+        "marginBottom",
+        "marginLeft",
+        "marginRight",
+        "marginTop",
+        "paddingBottom",
+        "paddingLeft",
+        "paddingRight",
+        "paddingTop"
+      ]),
+      (v2) => resolveSpace(v2, theme, scale)
+    )
+  );
+  return style;
+};
+const resolvedLineHeight = (lineHeight, theme, scale = 1, notAddUnit = false) => {
   if (typeof lineHeight === "number") {
-    return runStyle(lineHeight, scale);
+    return runStyle(lineHeight, scale, notAddUnit);
   }
   if (theme.lineHeight[lineHeight]) {
-    return runStyle(theme.lineHeight[lineHeight], scale);
+    return runStyle(theme.lineHeight[lineHeight], scale, notAddUnit);
   }
   return lineHeight;
 };
-const textStyleFromTheme = (theme, opts, scale = 1) => {
+const resolvedFontSize = (lineHeight, theme, scale = 1, notAddUnit = false) => {
+  if (typeof lineHeight === "number") {
+    return runStyle(lineHeight, scale, notAddUnit);
+  }
+  if (theme.fontSize[lineHeight]) {
+    return runStyle(theme.fontSize[lineHeight], scale, notAddUnit);
+  }
+  return lineHeight;
+};
+const textStyleFromTheme = (theme, opts, scale = 1) => {
   var _a2, _b, _c, _d, _e2, _f;
   const style = {};
   if (!opts) return style;
@@ -5178,6 +5593,52 @@ const backgroundToStyle = (background, theme) => {
   }
   return style;
 };
+const parseLinerGradient = (linerGradient, theme) => {
+  const { colors = [], angle, stops = [] } = linerGradient;
+  const gradientArr = [];
+  if (angle) {
+    gradientArr.push(`${angle}deg`);
+  }
+  if (colors.length !== stops.length) {
+    stops.length = 0;
+  }
+  colors.forEach((v2, i) => {
+    gradientArr.push(
+      `${resolveColor(v2, theme)}${typeof stops[i] === "number" ? " " + String(stops[i] * 100) + "%" : ""}`
+    );
+  });
+  return `linear-gradient(${gradientArr.join(", ")})`;
+};
+const backgroundImagePositionPropsMap = {
+  topLeft: "top left",
+  center: "center",
+  topRight: "top right",
+  bottomRight: "bottom right",
+  bottomLeft: "bottom left"
+};
+const backgroundImageRepeatPropsMap = {
+  noRepeat: "no-repeat",
+  repeat: "repeat",
+  repeatX: "repeat-x",
+  repeatY: "repeat-y"
+};
+const backgroundImageAndLinearGradientToStyle = (theme, backgroundImage, backgroundLinearGradient) => {
+  if (!backgroundImage && !backgroundLinearGradient) return {};
+  const linearGradientString = backgroundLinearGradient ? parseLinerGradient(backgroundLinearGradient, theme) : void 0;
+  const backgroundImageArr = [];
+  if (backgroundImage == null ? void 0 : backgroundImage.url) {
+    backgroundImageArr.push(`url(${backgroundImage.url})`);
+  }
+  if (linearGradientString) {
+    backgroundImageArr.push(linearGradientString);
+  }
+  return {
+    backgroundImage: backgroundImageArr.join(", "),
+    backgroundPosition: (backgroundImage == null ? void 0 : backgroundImage.alignment) && backgroundImagePositionPropsMap[backgroundImage.alignment] ? backgroundImagePositionPropsMap[backgroundImage.alignment] : "center",
+    backgroundSize: typeof (backgroundImage == null ? void 0 : backgroundImage.objectFit) !== "string" ? "auto" : backgroundImage.objectFit === "fill" ? "100% 100%" : backgroundImage.objectFit,
+    backgroundRepeat: (backgroundImage == null ? void 0 : backgroundImage.repeat) && backgroundImageRepeatPropsMap[backgroundImage.repeat] ? backgroundImageRepeatPropsMap[backgroundImage.repeat] : "no-repeat"
+  };
+};
 const borderRadiusToStyle = (borderRadius, theme, scale = 1) => {
   const borderRadiusMap = (theme == null ? void 0 : theme.borderRadius) || {};
   const style = {};
@@ -5237,19 +5698,23 @@ const borderToStyle = (border, theme, scale = 1) => {
   }
   return style;
 };
+const resolveBoxShadow = ({ boxShadow }, theme, scale = 1) => {
+  if (!boxShadow) return void 0;
+  const { color: color2, offset = [], blurRadius = 0, spreadRadius = 0 } = boxShadow;
+  const [offsetX = 0, offsetY = 0] = offset;
+  return `${resolveSpace(offsetX, theme, scale)} ${resolveSpace(offsetY, theme, scale)} ${resolveSpace(blurRadius, theme, scale)} ${resolveSpace(spreadRadius, theme, scale)} ${resolveColor(color2, theme)}`;
+};
 const imageStyleFromProps = (props, theme, scale = 1) => {
-  const style = __spreadValues$s({}, borderRadiusToStyle(props == null ? void 0 : props.borderRadius, theme, scale));
+  const style = __spreadValues$t(__spreadValues$t({}, borderRadiusToStyle(props == null ? void 0 : props.borderRadius, theme, scale)), marginAndPaddingToStyle(props, theme, scale));
   if (props.width != null) style.width = runStyle(props.width, scale) || "100%";
   if (props.height != null)
     style.height = runStyle(props.height, scale) || "auto";
   if (props.fit) style.objectFit = props.fit;
-  style.display = props.display || "flex";
-  Object.assign(style, marginToStyle(props == null ? void 0 : props.margin, theme, scale));
   if (props.style) Object.assign(style, props.style);
   return style;
 };
 const imageViewStyleFromProps = (props, theme, scale = 1) => {
-  const style = __spreadValues$s({
+  const style = __spreadValues$t({
     overflow: "hidden"
   }, borderRadiusToStyle(props == null ? void 0 : props.borderRadius, theme, scale));
   return style;
@@ -5258,9 +5723,7 @@ const fractionWidth = (percent) => ({
   width: percent
 });
 const buildItemContainerStyle = (index, count, theme, props, horizontal = false, scale = 1, isWrap = false) => {
-  const style = __spreadValues$s({
-    width: (props == null ? void 0 : props.flexDirection) === "row" ? "auto" : "100%",
-    flexDirection: props.direction || "column",
+  const style = __spreadValues$t({
     minWidth: 0,
     height: "auto",
     boxSizing: "border-box",
@@ -5277,21 +5740,24 @@ const buildItemContainerStyle = (index, count, theme, props, horizontal = false,
   return style;
 };
 const buildLayoutContainerStyle = (props, direction, theme, scale = 1) => {
-  const style = __spreadValues$s(__spreadValues$s(__spreadValues$s(__spreadValues$s(__spreadValues$s({
+  const style = __spreadValues$t(__spreadValues$t(__spreadValues$t(__spreadValues$t(__spreadValues$t(__spreadValues$t(__spreadValues$t({
     display: "flex",
     boxSizing: "border-box",
     width: runStyle(props == null ? void 0 : props.width, scale) || "100%",
     height: runStyle(props == null ? void 0 : props.height, scale) || "auto",
     position: "relative",
     flexDirection: direction || "column",
-    overflow: props.overflow || "visible"
-  }, justifyContentToStyle(props == null ? void 0 : props.alignItems, props == null ? void 0 : props.justifyContent)), backgroundToStyle(props == null ? void 0 : props.background, theme)), borderRadiusToStyle(props == null ? void 0 : props.borderRadius, theme, scale)), borderToStyle(props == null ? void 0 : props.border, theme, scale)), baseContainerStyle(props, scale));
-  Object.assign(style, paddingToStyle(props == null ? void 0 : props.padding, theme, scale));
-  Object.assign(style, marginToStyle(props == null ? void 0 : props.margin, theme, scale));
+    overflow: props.overflow || "visible",
+    boxShadow: resolveBoxShadow(props, theme, scale)
+  }, justifyContentToStyle(props == null ? void 0 : props.alignItems, props == null ? void 0 : props.justifyContent)), backgroundToStyle(props == null ? void 0 : props.background, theme)), borderRadiusToStyle(props == null ? void 0 : props.borderRadius, theme, scale)), borderToStyle(props == null ? void 0 : props.border, theme, scale)), baseContainerStyle(props, scale)), marginAndPaddingToStyle(props, theme, scale)), backgroundImageAndLinearGradientToStyle(
+    theme,
+    props.backgroundImage,
+    props.backgroundLinearGradient
+  ));
   return style;
 };
 const buildAbsoluteLayoutStyle = (props, direction, theme, scale = 1) => {
-  const style = __spreadProps$q(__spreadValues$s(__spreadValues$s({}, buildLayoutContainerStyle(props, direction, theme, scale)), borderRadiusToStyle(props == null ? void 0 : props.borderRadius, theme, scale)), {
+  const style = __spreadProps$r(__spreadValues$t(__spreadValues$t({}, buildLayoutContainerStyle(props, direction, theme, scale)), borderRadiusToStyle(props == null ? void 0 : props.borderRadius, theme, scale)), {
     position: "absolute",
     zIndex: 1
   });
@@ -5309,17 +5775,17 @@ const buildAbsoluteLayoutStyle = (props, direction, theme, scale = 1) => {
   return style;
 };
 const numberTestRegexp = /^-?\d+(\.\d+)?$/;
-const runStyle = (val, scale = 0.5) => {
+const runStyle = (val, scale = 0.5, notAddUnit = false) => {
   if (val === void 0 || val === null) return "";
   const parts = Array.isArray(val) ? val : String(val).trim().split(/\s+/);
   const final = parts.map((item) => {
     if (item === 0 || item === "0" || item === "0px") return "0";
     if (typeof item === "number") {
-      return `${item * scale}px`;
+      return `${item * scale}${notAddUnit ? "" : "px"}`;
     }
     if (typeof item === "string") {
       if (!numberTestRegexp.test(item)) return item;
-      return `${parseFloat(item) * scale}px`;
+      return `${parseFloat(item) * scale}${notAddUnit ? "" : "px"}`;
     }
     return item;
   }).join(" ");
@@ -5329,10 +5795,10 @@ const runStyle = (val, scale = 0.5) => {
 const resolveColor = (color2, theme) => {
   return theme.color[color2] ? theme.color[color2] : color2;
 };
-const buildCardLayoutStyle = (props, theme, scale = 1) => {
-  const cardTheme = theme.components.card;
-  const warpStyle = __spreadValues$s(__spreadValues$s(__spreadValues$s({}, backgroundToStyle(cardTheme.wrap.background, theme)), paddingToStyle(cardTheme.wrap.padding, theme, scale)), marginToStyle(props.margin, theme, scale));
-  const containerStyle = __spreadValues$s(__spreadValues$s(__spreadValues$s({}, paddingToStyle(cardTheme.container.padding, theme, scale)), borderRadiusToStyle(cardTheme.container.borderRadius, theme, scale)), backgroundToStyle(cardTheme.container.background, theme));
+const buildJDHCardLayoutStyle = (props, theme, scale = 1) => {
+  const cardTheme = theme.components.jdhCard;
+  const warpStyle = __spreadValues$t(__spreadValues$t(__spreadValues$t({}, backgroundToStyle(cardTheme.wrap.background, theme)), paddingLogogramToStyle(cardTheme.wrap.padding, theme, scale)), marginLogogramToStyle(props.margin, theme, scale));
+  const containerStyle = __spreadValues$t(__spreadValues$t(__spreadValues$t({}, paddingLogogramToStyle(cardTheme.container.padding, theme, scale)), borderRadiusToStyle(cardTheme.container.borderRadius, theme, scale)), backgroundToStyle(cardTheme.container.background, theme));
   const titleHeight = resolvedLineHeight(
     cardTheme.title.lineHeight,
     theme,
@@ -5345,7 +5811,7 @@ const buildCardLayoutStyle = (props, theme, scale = 1) => {
     height: titleHeight,
     overflow: "hidden"
   };
-  const titleStyle = __spreadProps$q(__spreadValues$s({}, textStyleFromTheme(theme, cardTheme.title, scale)), {
+  const titleStyle = __spreadProps$r(__spreadValues$t({}, textStyleFromTheme(theme, cardTheme.title, scale)), {
     height: titleHeight,
     minHeight: 0,
     overflow: "hidden",
@@ -5359,7 +5825,7 @@ const buildCardLayoutStyle = (props, theme, scale = 1) => {
     flexShrink: 0,
     flexGrow: 1
   };
-  const subDescriptionStyle = __spreadProps$q(__spreadValues$s({}, textStyleFromTheme(theme, cardTheme.subDescription, scale)), {
+  const subDescriptionStyle = __spreadProps$r(__spreadValues$t({}, textStyleFromTheme(theme, cardTheme.subDescription, scale)), {
     height: resolvedLineHeight(
       cardTheme.subDescription.lineHeight,
       theme,
@@ -5370,11 +5836,11 @@ const buildCardLayoutStyle = (props, theme, scale = 1) => {
     whiteSpace: "nowrap",
     textOverflow: "ellipsis"
   });
-  const contentStyle = __spreadValues$s({}, borderRadiusToStyle(cardTheme.content.borderRadius, theme, scale));
+  const contentStyle = __spreadValues$t({}, borderRadiusToStyle(cardTheme.content.borderRadius, theme, scale));
   if (props.title || props.subDescription) {
     Object.assign(
       contentStyle,
-      marginToStyle(cardTheme.content.margin, theme, scale)
+      marginLogogramToStyle(cardTheme.content.margin, theme, scale)
     );
   }
   return {
@@ -5388,14 +5854,14 @@ const buildCardLayoutStyle = (props, theme, scale = 1) => {
     contentStyle
   };
 };
-const buildChoiceRenderStyle = (props, isSelected, theme, scale = 1) => {
+const buildJDHChoiceRenderStyle = (props, isSelected, theme, scale = 1) => {
   const { disabled = false, subDescription, layout = "inline-icon" } = props;
-  const choiceTheme = theme.components.choice;
+  const choiceTheme = theme.components.jdhChoice;
   const hasSubDesc = typeof subDescription === "string";
-  const wrapStyle = __spreadValues$s(__spreadValues$s(__spreadValues$s({
+  const wrapStyle = __spreadValues$t(__spreadValues$t(__spreadValues$t({
     width: layout === "image-top" ? runStyle(choiceTheme.wrap.layoutImageTopWidth, scale) : "auto",
     opacity: disabled ? choiceTheme.disabledOpacity : 1
-  }, paddingToStyle(
+  }, paddingLogogramToStyle(
     layout === "small-inline-icon" ? choiceTheme.wrap.layoutSmallPadding : layout === "image-left" ? choiceTheme.wrap.layoutImageLeftPadding : layout === "image-top" ? choiceTheme.wrap.layoutImageTopPadding : hasSubDesc ? choiceTheme.wrap.withSubDescriptionPadding : choiceTheme.wrap.padding,
     theme,
     scale
@@ -5407,11 +5873,11 @@ const buildChoiceRenderStyle = (props, isSelected, theme, scale = 1) => {
     theme,
     scale
   ));
-  const labelLineStyle = __spreadValues$s({
+  const labelLineStyle = __spreadValues$t({
     display: "flex",
     alignItems: "center",
     justifyContent: "center"
-  }, paddingToStyle(
+  }, paddingLogogramToStyle(
     layout === "image-top" ? choiceTheme.labelLineWrap.layoutImageTopPadding : choiceTheme.labelLineWrap.padding,
     theme,
     scale
@@ -5421,7 +5887,7 @@ const buildChoiceRenderStyle = (props, isSelected, theme, scale = 1) => {
     lineHeight: layout === "small-inline-icon" ? choiceTheme.label.layoutSmallLineHeight : choiceTheme.label.lineHeight,
     color: isSelected ? choiceTheme.label.selectedColor : choiceTheme.label.color
   };
-  const labelStyle = __spreadValues$s(__spreadProps$q(__spreadValues$s({}, textStyleFromTheme(theme, labelTextOptions, scale)), {
+  const labelStyle = __spreadValues$t(__spreadProps$r(__spreadValues$t({}, textStyleFromTheme(theme, labelTextOptions, scale)), {
     overflow: "hidden",
     textOverflow: "ellipsis"
   }), layout === "image-top" ? {
@@ -5437,7 +5903,7 @@ const buildChoiceRenderStyle = (props, isSelected, theme, scale = 1) => {
     whiteSpace: "nowrap",
     height: resolvedLineHeight(labelTextOptions.lineHeight, theme, scale)
   });
-  const subDescriptionStyle = __spreadValues$s(__spreadValues$s({
+  const subDescriptionStyle = __spreadValues$t(__spreadValues$t({
     textAlign: "center",
     whiteSpace: "nowrap",
     overflow: "hidden",
@@ -5449,11 +5915,11 @@ const buildChoiceRenderStyle = (props, isSelected, theme, scale = 1) => {
     )
   }, textStyleFromTheme(
     theme,
-    __spreadProps$q(__spreadValues$s({}, choiceTheme.subDescription), {
+    __spreadProps$r(__spreadValues$t({}, choiceTheme.subDescription), {
       color: isSelected ? choiceTheme.subDescription.selectedColor : choiceTheme.subDescription.color
     }),
     scale
-  )), marginToStyle(choiceTheme.subDescription.margin, theme, scale));
+  )), marginLogogramToStyle(choiceTheme.subDescription.margin, theme, scale));
   const topImgSize = runStyle(choiceTheme.image.layoutImageTop.size, scale);
   const imgTopStyle = layout === "image-top" ? {
     display: "block",
@@ -5488,24 +5954,25 @@ const buildChoiceRenderStyle = (props, isSelected, theme, scale = 1) => {
     imgLeftStyle
   };
 };
-const buildButtonRenderStyle = (props, theme, scale = 1) => {
+const buildJDHButtonRenderStyle = (props, theme, scale = 1) => {
   const {
     color: color2 = "default",
     size = "small",
     variant = "solid",
     disabled = false
   } = props;
-  const buttonTheme = theme.components.button;
-  const wrapStyle = __spreadValues$s(__spreadValues$s(__spreadValues$s(__spreadValues$s(__spreadValues$s({
+  const buttonTheme = theme.components.jdhButton;
+  const wrapStyle = __spreadValues$t(__spreadValues$t(__spreadValues$t(__spreadValues$t(__spreadValues$t({
     display: "flex",
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
+    alignSelf: "center",
     opacity: disabled && variant !== "link" ? buttonTheme.disabledOpacity : 1
   }, variant !== "link" ? backgroundToStyle(
     buttonTheme.colorStyle[variant][color2].background,
     theme
-  ) : {}), paddingToStyle(
+  ) : {}), paddingLogogramToStyle(
     variant === "link" ? 0 : buttonTheme.sizeStyle[size].padding,
     theme,
     scale
@@ -5534,7 +6001,7 @@ const buildButtonRenderStyle = (props, theme, scale = 1) => {
     theme,
     scale
   );
-  const iconStyle = __spreadValues$s({
+  const iconStyle = __spreadValues$t({
     width: iconSize,
     height: iconSize,
     marginRight: runStyle(buttonTheme.image.marginRight, scale)
@@ -5551,7 +6018,7 @@ const buildButtonRenderStyle = (props, theme, scale = 1) => {
     arrowStyle
   };
 };
-const buildInputRenderStyle = (props, theme, scale = 1) => {
+const buildJDHInputRenderStyle = (props, theme, scale = 1) => {
   const {
     readonly = false,
     error = false,
@@ -5559,17 +6026,17 @@ const buildInputRenderStyle = (props, theme, scale = 1) => {
     password = false,
     disabled = false
   } = props;
-  const inputTheme = theme.components.input;
-  const themeState = __spreadValues$s(__spreadValues$s({}, inputTheme.defaultState), readonly ? inputTheme.readonlyState : disabled ? inputTheme.disabledState : error ? inputTheme.errorState : {});
-  const wrapStyle = __spreadValues$s(__spreadValues$s(__spreadValues$s(__spreadValues$s({
+  const inputTheme = theme.components.jdhInput;
+  const themeState = __spreadValues$t(__spreadValues$t({}, inputTheme.defaultState), readonly ? inputTheme.readonlyState : disabled ? inputTheme.disabledState : error ? inputTheme.errorState : {});
+  const wrapStyle = __spreadValues$t(__spreadValues$t(__spreadValues$t(__spreadValues$t({
     position: "relative",
     opacity: themeState.opacity
-  }, paddingToStyle(themeState.padding, theme, scale)), borderToStyle(
+  }, paddingLogogramToStyle(themeState.padding, theme, scale)), borderToStyle(
     { size: "1px", color: themeState.borderColor, style: "solid" },
     theme,
     scale
   )), backgroundToStyle(themeState.background, theme)), borderRadiusToStyle(themeState.borderRadius, theme, scale));
-  const inputStyle = __spreadValues$s(__spreadValues$s({
+  const inputStyle = __spreadValues$t(__spreadValues$t({
     border: "none",
     width: "100%",
     outline: "none"
@@ -5583,7 +6050,7 @@ const buildInputRenderStyle = (props, theme, scale = 1) => {
     scale
   ));
   const clearButtonSize = runStyle(inputTheme.clearButton.size, scale);
-  const clearStyle = __spreadValues$s({
+  const clearStyle = __spreadValues$t({
     width: clearButtonSize,
     height: clearButtonSize,
     borderRadius: "100px",
@@ -5603,7 +6070,7 @@ const buildInputRenderStyle = (props, theme, scale = 1) => {
     transform: "translate(-50%, -50%)"
   };
   const msgTheme = error && errorMessage ? inputTheme.errorMessage : inputTheme.subDescription;
-  const msgStyle = __spreadValues$s(__spreadValues$s({}, textStyleFromTheme(theme, msgTheme, scale)), marginToStyle(msgTheme.margin, theme, scale));
+  const msgStyle = __spreadValues$t(__spreadValues$t({}, textStyleFromTheme(theme, msgTheme, scale)), marginLogogramToStyle(msgTheme.margin, theme, scale));
   const passwordIconSize = runStyle(inputTheme.passwordButton.size, scale);
   const passwordStyle = password ? {
     width: passwordIconSize,
@@ -5628,7 +6095,7 @@ const buildInputRenderStyle = (props, theme, scale = 1) => {
     passwordIconStyle
   };
 };
-const buildTextareaRenderStyle = (props, value, theme, scale = 1) => {
+const buildJDHTextareaRenderStyle = (props, value, theme, scale = 1) => {
   const {
     readonly = false,
     error = false,
@@ -5636,25 +6103,26 @@ const buildTextareaRenderStyle = (props, value, theme, scale = 1) => {
     errorMessage,
     maxLength
   } = props;
-  const textareaTheme = theme.components.textarea;
-  const themeState = __spreadValues$s(__spreadValues$s({}, textareaTheme.defaultState), readonly ? textareaTheme.readonlyState : disabled ? textareaTheme.disabledState : error ? textareaTheme.errorState : {});
-  const wrapStyle = __spreadValues$s(__spreadValues$s(__spreadValues$s(__spreadValues$s({
+  const textareaTheme = theme.components.jdhTextarea;
+  const themeState = __spreadValues$t(__spreadValues$t({}, textareaTheme.defaultState), readonly ? textareaTheme.readonlyState : disabled ? textareaTheme.disabledState : error ? textareaTheme.errorState : {});
+  const wrapStyle = __spreadValues$t(__spreadValues$t(__spreadValues$t(__spreadValues$t({
     position: "relative",
     boxSizing: "border-box",
     opacity: themeState.opacity,
     height: runStyle(themeState.minHeight, scale),
     maxHeight: runStyle(themeState.maxHeight, scale)
-  }, paddingToStyle(themeState.padding, theme, scale)), borderToStyle(
+  }, paddingLogogramToStyle(themeState.padding, theme, scale)), borderToStyle(
     { size: "1px", color: themeState.borderColor, style: "solid" },
     theme,
     scale
   )), backgroundToStyle(themeState.background, theme)), borderRadiusToStyle(themeState.borderRadius, theme, scale));
-  const textareaStyle = __spreadValues$s(__spreadValues$s({
+  const textareaStyle = __spreadValues$t(__spreadValues$t({
     border: "none",
     width: "100%",
     display: "block",
     outline: "none",
-    height: "100%"
+    height: "100%",
+    resize: "none"
   }, backgroundToStyle(themeState.background, theme)), textStyleFromTheme(
     theme,
     {
@@ -5665,8 +6133,8 @@ const buildTextareaRenderStyle = (props, value, theme, scale = 1) => {
     scale
   ));
   const msgTheme = error && errorMessage ? textareaTheme.errorMessage : textareaTheme.subDescription;
-  const msgStyle = __spreadValues$s(__spreadValues$s({}, textStyleFromTheme(theme, msgTheme, scale)), marginToStyle(msgTheme.margin, theme, scale));
-  const maxLengthTipsStyle = typeof maxLength === "number" ? __spreadValues$s({
+  const msgStyle = __spreadValues$t(__spreadValues$t({}, textStyleFromTheme(theme, msgTheme, scale)), marginLogogramToStyle(msgTheme.margin, theme, scale));
+  const maxLengthTipsStyle = typeof maxLength === "number" ? __spreadValues$t({
     position: "absolute",
     bottom: resolveSpace(
       textareaTheme.maxLengthTips.bottom,
@@ -5676,7 +6144,7 @@ const buildTextareaRenderStyle = (props, value, theme, scale = 1) => {
     right: resolveSpace(textareaTheme.maxLengthTips.right, theme, scale)
   }, textStyleFromTheme(
     theme,
-    __spreadProps$q(__spreadValues$s({}, textareaTheme.maxLengthTips), {
+    __spreadProps$r(__spreadValues$t({}, textareaTheme.maxLengthTips), {
       color: resolveColor(
         value.length > maxLength ? textareaTheme.maxLengthTips.colorBeyond : textareaTheme.maxLengthTips.color,
         theme
@@ -5756,25 +6224,25 @@ const ResponsiveContext = React.createContext({
   containerWidth: null
 });
 const useResponsive = () => React.useContext(ResponsiveContext);
-var __defProp$u = Object.defineProperty;
-var __defProps$p = Object.defineProperties;
-var __getOwnPropDescs$p = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$r = Object.getOwnPropertySymbols;
-var __hasOwnProp$r = Object.prototype.hasOwnProperty;
-var __propIsEnum$r = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$u = (obj, key, value) => key in obj ? __defProp$u(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$r = (a, b3) => {
+var __defProp$v = Object.defineProperty;
+var __defProps$q = Object.defineProperties;
+var __getOwnPropDescs$q = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$s = Object.getOwnPropertySymbols;
+var __hasOwnProp$s = Object.prototype.hasOwnProperty;
+var __propIsEnum$s = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$v = (obj, key, value) => key in obj ? __defProp$v(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$s = (a, b3) => {
   for (var prop in b3 || (b3 = {}))
-    if (__hasOwnProp$r.call(b3, prop))
-      __defNormalProp$u(a, prop, b3[prop]);
-  if (__getOwnPropSymbols$r)
-    for (var prop of __getOwnPropSymbols$r(b3)) {
-      if (__propIsEnum$r.call(b3, prop))
-        __defNormalProp$u(a, prop, b3[prop]);
+    if (__hasOwnProp$s.call(b3, prop))
+      __defNormalProp$v(a, prop, b3[prop]);
+  if (__getOwnPropSymbols$s)
+    for (var prop of __getOwnPropSymbols$s(b3)) {
+      if (__propIsEnum$s.call(b3, prop))
+        __defNormalProp$v(a, prop, b3[prop]);
     }
   return a;
 };
-var __spreadProps$p = (a, b3) => __defProps$p(a, __getOwnPropDescs$p(b3));
+var __spreadProps$q = (a, b3) => __defProps$q(a, __getOwnPropDescs$q(b3));
 const FullRowLayout = ({
   props,
   children
@@ -5799,7 +6267,7 @@ const FullRowLayout = ({
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
-    __spreadProps$p(__spreadValues$r({
+    __spreadProps$q(__spreadValues$s({
       style: containerStyle,
       onClick: handleClick,
       ref: ref2
@@ -5812,7 +6280,7 @@ const FullRowLayout = ({
         return /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            style: __spreadProps$p(__spreadValues$r({}, buildItemContainerStyle(
+            style: __spreadProps$q(__spreadValues$s({}, buildItemContainerStyle(
               idx,
               count,
               theme,
@@ -5830,25 +6298,25 @@ const FullRowLayout = ({
     })
   );
 };
-var __defProp$t = Object.defineProperty;
-var __defProps$o = Object.defineProperties;
-var __getOwnPropDescs$o = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$q = Object.getOwnPropertySymbols;
-var __hasOwnProp$q = Object.prototype.hasOwnProperty;
-var __propIsEnum$q = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$t = (obj, key, value) => key in obj ? __defProp$t(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$q = (a, b3) => {
+var __defProp$u = Object.defineProperty;
+var __defProps$p = Object.defineProperties;
+var __getOwnPropDescs$p = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$r = Object.getOwnPropertySymbols;
+var __hasOwnProp$r = Object.prototype.hasOwnProperty;
+var __propIsEnum$r = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$u = (obj, key, value) => key in obj ? __defProp$u(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$r = (a, b3) => {
   for (var prop in b3 || (b3 = {}))
-    if (__hasOwnProp$q.call(b3, prop))
-      __defNormalProp$t(a, prop, b3[prop]);
-  if (__getOwnPropSymbols$q)
-    for (var prop of __getOwnPropSymbols$q(b3)) {
-      if (__propIsEnum$q.call(b3, prop))
-        __defNormalProp$t(a, prop, b3[prop]);
+    if (__hasOwnProp$r.call(b3, prop))
+      __defNormalProp$u(a, prop, b3[prop]);
+  if (__getOwnPropSymbols$r)
+    for (var prop of __getOwnPropSymbols$r(b3)) {
+      if (__propIsEnum$r.call(b3, prop))
+        __defNormalProp$u(a, prop, b3[prop]);
     }
   return a;
 };
-var __spreadProps$o = (a, b3) => __defProps$o(a, __getOwnPropDescs$o(b3));
+var __spreadProps$p = (a, b3) => __defProps$p(a, __getOwnPropDescs$p(b3));
 const MultipleColumnLayout = ({
   props,
   children
@@ -5857,11 +6325,11 @@ const MultipleColumnLayout = ({
   const { executeActions } = useAction();
   const theme = useTheme();
   const { ref: ref2, onClick, onMouseEnter, onMouseLeave } = useForEditor(props);
-  const containerStyle = __spreadProps$o(__spreadValues$q({}, buildLayoutContainerStyle(props, "row", theme, scale)), {
+  const containerStyle = __spreadProps$p(__spreadValues$r({}, buildLayoutContainerStyle(props, "row", theme, scale)), {
     flexWrap: (props == null ? void 0 : props.flexWrap) || "nowrap"
   });
   const itemContainerStyle = (child, idx) => {
-    return __spreadProps$o(__spreadValues$q({}, buildItemContainerStyle(idx, count, theme, props, true, scale, true)), {
+    return __spreadProps$p(__spreadValues$r({}, buildItemContainerStyle(idx, count, theme, props, true, scale, true)), {
       flexShrink: itemFlexShrink(child),
       width: void 0
     });
@@ -5877,7 +6345,7 @@ const MultipleColumnLayout = ({
     paddingBottom: containerStyle.marginBottom
   };
   const gapMargin = `-${resolveSpace(props.gap, theme, scale)}`;
-  const containerStyleForGap = __spreadProps$o(__spreadValues$q({}, containerStyle), {
+  const containerStyleForGap = __spreadProps$p(__spreadValues$r({}, containerStyle), {
     margin: void 0,
     marginTop: gapMargin,
     marginLeft: gapMargin,
@@ -5904,7 +6372,7 @@ const MultipleColumnLayout = ({
     // 最外层div使用padding代替原container的margin，以便container使用负margin中和gap实现的效果
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "for-gap-wrap", style: polyfillContainerMarginStyle, children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
-      __spreadProps$o(__spreadValues$q({
+      __spreadProps$p(__spreadValues$r({
         className: "for-gap",
         style: containerStyleForGap,
         onClick: handleClick,
@@ -5915,6 +6383,68 @@ const MultipleColumnLayout = ({
     ) })
   );
 };
+var __defProp$t = Object.defineProperty;
+var __defProps$o = Object.defineProperties;
+var __getOwnPropDescs$o = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$q = Object.getOwnPropertySymbols;
+var __hasOwnProp$q = Object.prototype.hasOwnProperty;
+var __propIsEnum$q = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$t = (obj, key, value) => key in obj ? __defProp$t(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$q = (a, b3) => {
+  for (var prop in b3 || (b3 = {}))
+    if (__hasOwnProp$q.call(b3, prop))
+      __defNormalProp$t(a, prop, b3[prop]);
+  if (__getOwnPropSymbols$q)
+    for (var prop of __getOwnPropSymbols$q(b3)) {
+      if (__propIsEnum$q.call(b3, prop))
+        __defNormalProp$t(a, prop, b3[prop]);
+    }
+  return a;
+};
+var __spreadProps$o = (a, b3) => __defProps$o(a, __getOwnPropDescs$o(b3));
+const TwoColumnLayout$2 = ({
+  props,
+  children
+}) => {
+  const { scale } = useResponsive();
+  const { executeActions } = useAction();
+  const theme = useTheme();
+  const { ref: ref2, onClick, onMouseEnter, onMouseLeave } = useForEditor(props);
+  const containerStyle = buildLayoutContainerStyle(
+    props,
+    "row",
+    theme,
+    scale
+  );
+  const items = React.Children.toArray(children).slice(0, 2);
+  const count = items.length;
+  const handleClick = (e) => {
+    if (props.actions) {
+      void executeActions(props.actions);
+    }
+    onClick(e);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    __spreadProps$o(__spreadValues$q({
+      style: containerStyle,
+      onClick: handleClick,
+      ref: ref2
+    }, { onMouseEnter, onMouseLeave }), {
+      children: items.map((child, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: __spreadProps$o(__spreadValues$q({}, buildItemContainerStyle(idx, count, theme, props, true, scale)), {
+            flex: 1
+            // ...fractionWidth('50%'),
+          }),
+          children: child
+        },
+        idx
+      ))
+    })
+  );
+};
 var __defProp$s = Object.defineProperty;
 var __defProps$n = Object.defineProperties;
 var __getOwnPropDescs$n = Object.getOwnPropertyDescriptors;
@@ -5934,7 +6464,7 @@ var __spreadValues$p = (a, b3) => {
   return a;
 };
 var __spreadProps$n = (a, b3) => __defProps$n(a, __getOwnPropDescs$n(b3));
-const TwoColumnLayout$2 = ({
+const ThreeColumnLayout$1 = ({
   props,
   children
 }) => {
@@ -5948,7 +6478,7 @@ const TwoColumnLayout$2 = ({
     theme,
     scale
   );
-  const items = React.Children.toArray(children).slice(0, 2);
+  const items = React.Children.toArray(children).slice(0, 3);
   const count = items.length;
   const handleClick = (e) => {
     if (props.actions) {
@@ -5968,7 +6498,6 @@ const TwoColumnLayout$2 = ({
         {
           style: __spreadProps$n(__spreadValues$p({}, buildItemContainerStyle(idx, count, theme, props, true, scale)), {
             flex: 1
-            // ...fractionWidth('50%'),
           }),
           children: child
         },
@@ -5996,7 +6525,7 @@ var __spreadValues$o = (a, b3) => {
   return a;
 };
 var __spreadProps$m = (a, b3) => __defProps$m(a, __getOwnPropDescs$m(b3));
-const ThreeColumnLayout$1 = ({
+const FourColumnLayout = ({
   props,
   children
 }) => {
@@ -6010,7 +6539,7 @@ const ThreeColumnLayout$1 = ({
     theme,
     scale
   );
-  const items = React.Children.toArray(children).slice(0, 3);
+  const items = React.Children.toArray(children).slice(0, 4);
   const count = items.length;
   const handleClick = (e) => {
     if (props.actions) {
@@ -6028,9 +6557,7 @@ const ThreeColumnLayout$1 = ({
       children: items.map((child, idx) => /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          style: __spreadProps$m(__spreadValues$o({}, buildItemContainerStyle(idx, count, theme, props, true, scale)), {
-            flex: 1
-          }),
+          style: __spreadValues$o(__spreadValues$o({}, fractionWidth("25%")), buildItemContainerStyle(idx, count, theme, props, true, scale)),
           children: child
         },
         idx
@@ -6057,7 +6584,7 @@ var __spreadValues$n = (a, b3) => {
   return a;
 };
 var __spreadProps$l = (a, b3) => __defProps$l(a, __getOwnPropDescs$l(b3));
-const FourColumnLayout = ({
+const TwoColumnLayout$1 = ({
   props,
   children
 }) => {
@@ -6071,7 +6598,7 @@ const FourColumnLayout = ({
     theme,
     scale
   );
-  const items = React.Children.toArray(children).slice(0, 4);
+  const items = React.Children.toArray(children).slice(0, 2);
   const count = items.length;
   const handleClick = (e) => {
     if (props.actions) {
@@ -6082,14 +6609,20 @@ const FourColumnLayout = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     __spreadProps$l(__spreadValues$n({
-      style: containerStyle,
+      style: __spreadProps$l(__spreadValues$n({}, containerStyle), {
+        width: "100%"
+      }),
       onClick: handleClick,
       ref: ref2
     }, { onMouseEnter, onMouseLeave }), {
       children: items.map((child, idx) => /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          style: __spreadValues$n(__spreadValues$n({}, fractionWidth("25%")), buildItemContainerStyle(idx, count, theme, props, true, scale)),
+          style: __spreadProps$l(__spreadValues$n({}, buildItemContainerStyle(idx, count, theme, props, true, scale)), {
+            flex: idx === 0 ? 1 : "initial",
+            width: idx === 1 ? runStyle(props.rightWidth, scale) : "auto",
+            flexDirection: "row"
+          }),
           children: child
         },
         idx
@@ -6116,7 +6649,7 @@ var __spreadValues$m = (a, b3) => {
   return a;
 };
 var __spreadProps$k = (a, b3) => __defProps$k(a, __getOwnPropDescs$k(b3));
-const TwoColumnLayout$1 = ({
+const TwoColumnLayout = ({
   props,
   children
 }) => {
@@ -6141,9 +6674,7 @@ const TwoColumnLayout$1 = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     __spreadProps$k(__spreadValues$m({
-      style: __spreadProps$k(__spreadValues$m({}, containerStyle), {
-        width: "100%"
-      }),
+      style: containerStyle,
       onClick: handleClick,
       ref: ref2
     }, { onMouseEnter, onMouseLeave }), {
@@ -6151,8 +6682,8 @@ const TwoColumnLayout$1 = ({
         "div",
         {
           style: __spreadProps$k(__spreadValues$m({}, buildItemContainerStyle(idx, count, theme, props, true, scale)), {
-            flex: idx === 0 ? 1 : "initial",
-            width: idx === 1 ? runStyle(props.rightWidth, scale) : "auto",
+            flex: idx === 1 ? 1 : "initial",
+            width: idx === 0 ? runStyle(props == null ? void 0 : props.leftWidth) : "auto",
             flexDirection: "row"
           }),
           children: child
@@ -6181,7 +6712,7 @@ var __spreadValues$l = (a, b3) => {
   return a;
 };
 var __spreadProps$j = (a, b3) => __defProps$j(a, __getOwnPropDescs$j(b3));
-const TwoColumnLayout = ({
+const ThreeColumnLayout = ({
   props,
   children
 }) => {
@@ -6195,7 +6726,7 @@ const TwoColumnLayout = ({
     theme,
     scale
   );
-  const items = React.Children.toArray(children).slice(0, 2);
+  const items = React.Children.toArray(children).slice(0, 3);
   const count = items.length;
   const handleClick = (e) => {
     if (props.actions) {
@@ -6215,7 +6746,6 @@ const TwoColumnLayout = ({
         {
           style: __spreadProps$j(__spreadValues$l({}, buildItemContainerStyle(idx, count, theme, props, true, scale)), {
             flex: idx === 1 ? 1 : "initial",
-            width: idx === 0 ? runStyle(props == null ? void 0 : props.leftWidth) : "auto",
             flexDirection: "row"
           }),
           children: child
@@ -6244,42 +6774,46 @@ var __spreadValues$k = (a, b3) => {
   return a;
 };
 var __spreadProps$i = (a, b3) => __defProps$i(a, __getOwnPropDescs$i(b3));
-const ThreeColumnLayout = ({
+const AbsoluteViewLayout = ({
   props,
   children
 }) => {
   const { scale } = useResponsive();
   const { executeActions } = useAction();
+  const handleClick = (e) => {
+    if (props.actions) {
+      void executeActions(props.actions);
+    }
+    onClick(e);
+  };
   const theme = useTheme();
   const { ref: ref2, onClick, onMouseEnter, onMouseLeave } = useForEditor(props);
-  const containerStyle = buildLayoutContainerStyle(
+  const absoluteContainerStyle = buildAbsoluteLayoutStyle(
     props,
-    "row",
+    "column",
     theme,
     scale
   );
-  const items = React.Children.toArray(children).slice(0, 3);
+  const items = React.Children.toArray(children);
   const count = items.length;
-  const handleClick = (e) => {
-    if (props.actions) {
-      void executeActions(props.actions);
-    }
-    onClick(e);
-  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     __spreadProps$i(__spreadValues$k({
-      style: containerStyle,
+      style: absoluteContainerStyle,
       onClick: handleClick,
       ref: ref2
     }, { onMouseEnter, onMouseLeave }), {
       children: items.map((child, idx) => /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          style: __spreadProps$i(__spreadValues$k({}, buildItemContainerStyle(idx, count, theme, props, true, scale)), {
-            flex: idx === 1 ? 1 : "initial",
-            flexDirection: "row"
-          }),
+          style: buildItemContainerStyle(
+            idx,
+            count,
+            theme,
+            props,
+            false,
+            scale
+          ),
           children: child
         },
         idx
@@ -6306,7 +6840,7 @@ var __spreadValues$j = (a, b3) => {
   return a;
 };
 var __spreadProps$h = (a, b3) => __defProps$h(a, __getOwnPropDescs$h(b3));
-const AbsoluteViewLayout = ({
+const AnimationLayout = ({
   props,
   children
 }) => {
@@ -6320,7 +6854,7 @@ const AbsoluteViewLayout = ({
   };
   const theme = useTheme();
   const { ref: ref2, onClick, onMouseEnter, onMouseLeave } = useForEditor(props);
-  const absoluteContainerStyle = buildAbsoluteLayoutStyle(
+  const containerStyle = buildLayoutContainerStyle(
     props,
     "column",
     theme,
@@ -6331,7 +6865,7 @@ const AbsoluteViewLayout = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     __spreadProps$h(__spreadValues$j({
-      style: absoluteContainerStyle,
+      style: containerStyle,
       onClick: handleClick,
       ref: ref2
     }, { onMouseEnter, onMouseLeave }), {
@@ -6372,108 +6906,42 @@ var __spreadValues$i = (a, b3) => {
   return a;
 };
 var __spreadProps$g = (a, b3) => __defProps$g(a, __getOwnPropDescs$g(b3));
-const AnimationLayout = ({
+const ScrollViewLayout = ({
   props,
   children
 }) => {
-  const { scale } = useResponsive();
   const { executeActions } = useAction();
-  const handleClick = (e) => {
-    if (props.actions) {
-      void executeActions(props.actions);
-    }
-    onClick(e);
-  };
   const theme = useTheme();
   const { ref: ref2, onClick, onMouseEnter, onMouseLeave } = useForEditor(props);
+  const customProps = props;
+  const scrollX = (customProps == null ? void 0 : customProps.direction) === "horizontal";
+  const scrollY = (customProps == null ? void 0 : customProps.direction) === "vertical" || !(customProps == null ? void 0 : customProps.direction);
   const containerStyle = buildLayoutContainerStyle(
     props,
-    "column",
-    theme,
-    scale
+    scrollX ? "row" : "column",
+    theme
   );
   const items = React.Children.toArray(children);
-  const count = items.length;
+  items.length;
+  const handleClick = (e) => {
+    if (props == null ? void 0 : props.actions) void executeActions(props.actions);
+    onClick(e);
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
-    __spreadProps$g(__spreadValues$i({
-      style: containerStyle,
+    {
+      style: __spreadProps$g(__spreadValues$i({}, containerStyle), {
+        width: (customProps == null ? void 0 : customProps.width) || "100%",
+        height: (customProps == null ? void 0 : customProps.height) || "auto",
+        whiteSpace: scrollX ? "nowrap" : "normal",
+        // 横向滚动时防止换行
+        overflowX: scrollX ? "auto" : "hidden",
+        overflowY: scrollY ? "auto" : "hidden"
+      }),
       onClick: handleClick,
-      ref: ref2
-    }, { onMouseEnter, onMouseLeave }), {
-      children: items.map((child, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+      children: /* @__PURE__ */ jsxRuntime.jsx(
         "div",
-        {
-          style: buildItemContainerStyle(
-            idx,
-            count,
-            theme,
-            props,
-            false,
-            scale
-          ),
-          children: child
-        },
-        idx
-      ))
-    })
-  );
-};
-var __defProp$k = Object.defineProperty;
-var __defProps$f = Object.defineProperties;
-var __getOwnPropDescs$f = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$h = Object.getOwnPropertySymbols;
-var __hasOwnProp$h = Object.prototype.hasOwnProperty;
-var __propIsEnum$h = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$k = (obj, key, value) => key in obj ? __defProp$k(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$h = (a, b3) => {
-  for (var prop in b3 || (b3 = {}))
-    if (__hasOwnProp$h.call(b3, prop))
-      __defNormalProp$k(a, prop, b3[prop]);
-  if (__getOwnPropSymbols$h)
-    for (var prop of __getOwnPropSymbols$h(b3)) {
-      if (__propIsEnum$h.call(b3, prop))
-        __defNormalProp$k(a, prop, b3[prop]);
-    }
-  return a;
-};
-var __spreadProps$f = (a, b3) => __defProps$f(a, __getOwnPropDescs$f(b3));
-const ScrollViewLayout = ({
-  props,
-  children
-}) => {
-  const { executeActions } = useAction();
-  const theme = useTheme();
-  const { ref: ref2, onClick, onMouseEnter, onMouseLeave } = useForEditor(props);
-  const customProps = props;
-  const scrollX = (customProps == null ? void 0 : customProps.direction) === "horizontal";
-  const scrollY = (customProps == null ? void 0 : customProps.direction) === "vertical" || !(customProps == null ? void 0 : customProps.direction);
-  const containerStyle = buildLayoutContainerStyle(
-    props,
-    scrollX ? "row" : "column",
-    theme
-  );
-  const items = React.Children.toArray(children);
-  items.length;
-  const handleClick = (e) => {
-    if (props == null ? void 0 : props.actions) void executeActions(props.actions);
-    onClick(e);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      style: __spreadProps$f(__spreadValues$h({}, containerStyle), {
-        width: (customProps == null ? void 0 : customProps.width) || "100%",
-        height: (customProps == null ? void 0 : customProps.height) || "auto",
-        whiteSpace: scrollX ? "nowrap" : "normal",
-        // 横向滚动时防止换行
-        overflowX: scrollX ? "auto" : "hidden",
-        overflowY: scrollY ? "auto" : "hidden"
-      }),
-      onClick: handleClick,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        __spreadProps$f(__spreadValues$h({
+        __spreadProps$g(__spreadValues$i({
           style: {
             display: "flex",
             flexDirection: scrollX ? "row" : "column",
@@ -6542,26 +7010,26 @@ const CustomLayout = ({
     }
   );
 };
-var __defProp$j = Object.defineProperty;
-var __defProps$e = Object.defineProperties;
-var __getOwnPropDescs$e = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$g = Object.getOwnPropertySymbols;
-var __hasOwnProp$g = Object.prototype.hasOwnProperty;
-var __propIsEnum$g = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$j = (obj, key, value) => key in obj ? __defProp$j(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$g = (a, b3) => {
+var __defProp$k = Object.defineProperty;
+var __defProps$f = Object.defineProperties;
+var __getOwnPropDescs$f = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$h = Object.getOwnPropertySymbols;
+var __hasOwnProp$h = Object.prototype.hasOwnProperty;
+var __propIsEnum$h = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$k = (obj, key, value) => key in obj ? __defProp$k(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$h = (a, b3) => {
   for (var prop in b3 || (b3 = {}))
-    if (__hasOwnProp$g.call(b3, prop))
-      __defNormalProp$j(a, prop, b3[prop]);
-  if (__getOwnPropSymbols$g)
-    for (var prop of __getOwnPropSymbols$g(b3)) {
-      if (__propIsEnum$g.call(b3, prop))
-        __defNormalProp$j(a, prop, b3[prop]);
+    if (__hasOwnProp$h.call(b3, prop))
+      __defNormalProp$k(a, prop, b3[prop]);
+  if (__getOwnPropSymbols$h)
+    for (var prop of __getOwnPropSymbols$h(b3)) {
+      if (__propIsEnum$h.call(b3, prop))
+        __defNormalProp$k(a, prop, b3[prop]);
     }
   return a;
 };
-var __spreadProps$e = (a, b3) => __defProps$e(a, __getOwnPropDescs$e(b3));
-const CardLayout = ({
+var __spreadProps$f = (a, b3) => __defProps$f(a, __getOwnPropDescs$f(b3));
+const JDHCardLayout = ({
   props,
   children,
   slot = {}
@@ -6571,13 +7039,13 @@ const CardLayout = ({
   const { scale } = useResponsive();
   const theme = useTheme();
   const { ref: ref2, onClick, onMouseEnter, onMouseLeave } = useForEditor(props);
-  const cardStyle = buildCardLayoutStyle(props, theme, scale);
+  const cardStyle = buildJDHCardLayoutStyle(props, theme, scale);
   const handleClick = (e) => {
     onClick(e);
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
-    __spreadProps$e(__spreadValues$g({
+    __spreadProps$f(__spreadValues$h({
       style: cardStyle.warpStyle,
       className: "card-wrap",
       onClick: handleClick,
@@ -6649,25 +7117,25 @@ const ResponsiveTwoColumnLayout = ({ props, children }) => {
   const useTwoColumn = containerWidth === null || containerWidth > minWidthFowTwoColumn * scale;
   return useTwoColumn ? /* @__PURE__ */ jsxRuntime.jsx(TwoColumnLayout$2, { props, children }) : /* @__PURE__ */ jsxRuntime.jsx(FullRowLayout, { props, children });
 };
-var __defProp$i = Object.defineProperty;
-var __defProps$d = Object.defineProperties;
-var __getOwnPropDescs$d = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
-var __hasOwnProp$f = Object.prototype.hasOwnProperty;
-var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$i(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$f = (a, b3) => {
+var __defProp$j = Object.defineProperty;
+var __defProps$e = Object.defineProperties;
+var __getOwnPropDescs$e = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$g = Object.getOwnPropertySymbols;
+var __hasOwnProp$g = Object.prototype.hasOwnProperty;
+var __propIsEnum$g = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$j = (obj, key, value) => key in obj ? __defProp$j(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$g = (a, b3) => {
   for (var prop in b3 || (b3 = {}))
-    if (__hasOwnProp$f.call(b3, prop))
-      __defNormalProp$i(a, prop, b3[prop]);
-  if (__getOwnPropSymbols$f)
-    for (var prop of __getOwnPropSymbols$f(b3)) {
-      if (__propIsEnum$f.call(b3, prop))
-        __defNormalProp$i(a, prop, b3[prop]);
+    if (__hasOwnProp$g.call(b3, prop))
+      __defNormalProp$j(a, prop, b3[prop]);
+  if (__getOwnPropSymbols$g)
+    for (var prop of __getOwnPropSymbols$g(b3)) {
+      if (__propIsEnum$g.call(b3, prop))
+        __defNormalProp$j(a, prop, b3[prop]);
     }
   return a;
 };
-var __spreadProps$d = (a, b3) => __defProps$d(a, __getOwnPropDescs$d(b3));
+var __spreadProps$e = (a, b3) => __defProps$e(a, __getOwnPropDescs$e(b3));
 const LayoutWrapper = ({
   node,
   originProps,
@@ -6692,7 +7160,7 @@ const LayoutWrapper = ({
     case "full-row":
       return /* @__PURE__ */ jsxRuntime.jsx(FullRowLayout, { props: layoutProps, children });
     case "multiple-column":
-      return /* @__PURE__ */ jsxRuntime.jsx(MultipleColumnLayout, __spreadProps$d(__spreadValues$f({ props: layoutProps }, { originProps }), { children }));
+      return /* @__PURE__ */ jsxRuntime.jsx(MultipleColumnLayout, __spreadProps$e(__spreadValues$g({ props: layoutProps }, { originProps }), { children }));
     case "two-column":
       return /* @__PURE__ */ jsxRuntime.jsx(TwoColumnLayout$2, { props: layoutProps, children });
     case "three-column":
@@ -6710,9 +7178,9 @@ const LayoutWrapper = ({
     case "animation-layout":
       return /* @__PURE__ */ jsxRuntime.jsx(AnimationLayout, { props: layoutProps, children });
     case "scroll-view":
-      return /* @__PURE__ */ jsxRuntime.jsx(ScrollViewLayout, __spreadProps$d(__spreadValues$f({}, node), { children }));
-    case "card":
-      return /* @__PURE__ */ jsxRuntime.jsx(CardLayout, { props: layoutProps, slot, children });
+      return /* @__PURE__ */ jsxRuntime.jsx(ScrollViewLayout, __spreadProps$e(__spreadValues$g({}, node), { children }));
+    case "jdh-card":
+      return /* @__PURE__ */ jsxRuntime.jsx(JDHCardLayout, { props: layoutProps, slot, children });
     case "responsive-two-column":
       return /* @__PURE__ */ jsxRuntime.jsx(ResponsiveTwoColumnLayout, { props: layoutProps, children });
     default:
@@ -6742,31 +7210,42 @@ const makeOnChange = (name, onChange) => (eOrValue) => {
   const value = normalizeEventValue(eOrValue);
   onChange({ name, value });
 };
-var __defProp$h = Object.defineProperty;
-var __defProps$c = Object.defineProperties;
-var __getOwnPropDescs$c = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
-var __hasOwnProp$e = Object.prototype.hasOwnProperty;
-var __propIsEnum$e = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$h(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$e = (a, b3) => {
+var __defProp$i = Object.defineProperty;
+var __defProps$d = Object.defineProperties;
+var __getOwnPropDescs$d = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
+var __hasOwnProp$f = Object.prototype.hasOwnProperty;
+var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$i(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$f = (a, b3) => {
   for (var prop in b3 || (b3 = {}))
-    if (__hasOwnProp$e.call(b3, prop))
-      __defNormalProp$h(a, prop, b3[prop]);
-  if (__getOwnPropSymbols$e)
-    for (var prop of __getOwnPropSymbols$e(b3)) {
-      if (__propIsEnum$e.call(b3, prop))
-        __defNormalProp$h(a, prop, b3[prop]);
+    if (__hasOwnProp$f.call(b3, prop))
+      __defNormalProp$i(a, prop, b3[prop]);
+  if (__getOwnPropSymbols$f)
+    for (var prop of __getOwnPropSymbols$f(b3)) {
+      if (__propIsEnum$f.call(b3, prop))
+        __defNormalProp$i(a, prop, b3[prop]);
     }
   return a;
 };
-var __spreadProps$c = (a, b3) => __defProps$c(a, __getOwnPropDescs$c(b3));
+var __spreadProps$d = (a, b3) => __defProps$d(a, __getOwnPropDescs$d(b3));
 const TextRender = (props) => {
   const theme = useTheme();
+  const { variant = "body" } = props;
   const { scale } = useResponsive();
   const { executeActions } = useAction();
   const { ref: ref2, onClick, onMouseEnter, onMouseLeave } = useForEditor(props);
-  const style = textStyleFromTheme(theme, props, scale);
+  const textTheme = theme.components.text;
+  const textProps = __spreadValues$f(__spreadValues$f(__spreadValues$f({}, textTheme.basic), textTheme.variant[variant]), props);
+  const style = __spreadValues$f(__spreadValues$f(__spreadValues$f({}, textStyleFromTheme(theme, textProps, scale)), marginAndPaddingToStyle(props, theme, scale)), typeof props.numberOfLines === "number" ? {
+    display: "-webkit-box",
+    webkitBoxOrient: "vertical",
+    webkitLineClamp: props.numberOfLines.toString(),
+    // 控制显示行数
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "normal"
+  } : {});
   const handleClick = (e) => {
     if (props.actions) {
       void executeActions(props.actions);
@@ -6775,7 +7254,7 @@ const TextRender = (props) => {
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
-    __spreadProps$c(__spreadValues$e({
+    __spreadProps$d(__spreadValues$f({
       style,
       onClick: handleClick,
       ref: ref2
@@ -8086,6 +8565,24 @@ const chineseEmphasisTokenizer = {
     return Math.min(starIndex, underIndex);
   },
   tokenizer(src) {
+    if (/^\*(?=[\d])/.test(src)) {
+      const token = {
+        type: "text",
+        raw: "*",
+        text: "*",
+        escaped: false
+      };
+      return token;
+    }
+    if (/^\*[^*\n\r]+(?=\*\*)/.test(src)) {
+      const token = {
+        type: "text",
+        raw: "*",
+        text: "*",
+        escaped: false
+      };
+      return token;
+    }
     const match = src.match(/^(\*|_)([^\*_\n\r]+?)\1(?!\1)/);
     if (match) {
       const [raw, delimiter, text] = match;
@@ -8179,7 +8676,7 @@ const STREAM_INCOMPLETE_REGEX = {
     /^(\*{2,3}|_{1,3})(?!\s)(?!.*\S\1$)[^\r\n]{0,1000}$/
   ],
   list: [
-    /^[-+*]\s{0,3}$/,
+    /^[-+*]\s{1,3}$/,
     /^[-+*]\s{1,3}(\*{1,3}|_{1,3})(?!\s)(?!.*\S\1$)[^\r\n]{0,1000}$/,
     /^[-+*]\s{1,3}\[[^\]\r\n]{0,1000}$/,
     /^[-+*]\s{1,3}\[[^\r\n]{0,1000}\](\([^)\r\n]{0,1000})?$/
@@ -8220,7 +8717,7 @@ const tokenRecognizerMap = {
   },
   [inteface_StreamCacheTokenType.List]: {
     tokenType: inteface_StreamCacheTokenType.List,
-    isStartOfToken: (markdown) => /^[-+*]/.test(markdown),
+    isStartOfToken: (markdown) => /^[-+*]\s/.test(markdown),
     isStreamingValid: (markdown) => STREAM_INCOMPLETE_REGEX.list.some((re2) => re2.test(markdown))
   },
   [inteface_StreamCacheTokenType.Table]: {
@@ -8234,8 +8731,19 @@ const recognize = (cache, tokenType) => {
   if (!recognizer) return;
   const { token, pending } = cache;
   if (token === inteface_StreamCacheTokenType.Text && recognizer.isStartOfToken(pending)) {
-    cache.token = tokenType;
-    return;
+    if (tokenType === inteface_StreamCacheTokenType.List) {
+      const cm = cache.completeMarkdown;
+      const lastLF = cm.lastIndexOf("\n");
+      const lineStart = lastLF >= 0 ? lastLF + 1 : 0;
+      const before = cm.slice(lineStart);
+      if (/^ {0,3}$/.test(before)) {
+        cache.token = tokenType;
+        return;
+      }
+    } else {
+      cache.token = tokenType;
+      return;
+    }
   }
   if (token === tokenType && !recognizer.isStreamingValid(pending)) {
     commitCache(cache);
@@ -8747,9 +9255,14 @@ const ListRenderer = ({ node, prevNode, nextNode, parent }) => {
   const { renderers } = useMarkdownContext();
   const { ListItemRenderer: ListItemRenderer2 } = renderers;
   const isOrdered = "ordered" in node ? node.ordered : false;
+  const forceIndent = (prevNode == null ? void 0 : prevNode.type) === "list" && !parent && node.type === "list" && !node.ordered ? true : false;
+  if (forceIndent) {
+    node.indent = true;
+  }
   const className = shared_clsx("xmd-list", {
     "xmd-ordered-list": isOrdered,
-    "xmd-bullet-list": !isOrdered
+    "xmd-bullet-list": !isOrdered,
+    "xmd-bullet-indent": forceIndent
   });
   const ListTag = isOrdered ? "ol" : "ul";
   const isNested = (parent == null ? void 0 : parent.type) === "list_item";
@@ -8779,7 +9292,7 @@ const ListItemRenderer = ({ node, index, parent }) => {
   const list = parent;
   const displayIndex = ((list == null ? void 0 : list.start) || 0) + (index || 0);
   const depth = (parent == null ? void 0 : parent._depth) || 1;
-  const isTopLevelBullet = !isOrdered && depth === 1;
+  const isTopLevelBullet = !isOrdered && depth === 1 && !parent.indent;
   node._depth = depth;
   const className = shared_clsx("xmd-list-item", {
     "xmd-ordered-list-item": isOrdered,
@@ -8811,59 +9324,20 @@ const ListItemRenderer = ({ node, index, parent }) => {
     ]
   });
 };
-var __defProp$g = Object.defineProperty;
-var __defProps$b = Object.defineProperties;
-var __getOwnPropDescs$b = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
-var __hasOwnProp$d = Object.prototype.hasOwnProperty;
-var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$g(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$d = (a, b3) => {
-  for (var prop in b3 || (b3 = {}))
-    if (__hasOwnProp$d.call(b3, prop))
-      __defNormalProp$g(a, prop, b3[prop]);
-  if (__getOwnPropSymbols$d)
-    for (var prop of __getOwnPropSymbols$d(b3)) {
-      if (__propIsEnum$d.call(b3, prop))
-        __defNormalProp$g(a, prop, b3[prop]);
-    }
-  return a;
-};
-var __spreadProps$b = (a, b3) => __defProps$b(a, __getOwnPropDescs$b(b3));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$d.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$d)
-    for (var prop of __getOwnPropSymbols$d(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$d.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const View = (_a2) => {
-  var _b = _a2, { children } = _b, props = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps$b(__spreadValues$d({}, props), { children }));
-};
-const Text = (_c) => {
-  var _d = _c, { children } = _d, props = __objRest(_d, ["children"]);
-  return /* @__PURE__ */ jsxRuntime.jsx("span", __spreadProps$b(__spreadValues$d({}, props), { children }));
-};
 const CodeRenderer = ({ node }) => {
-  return jsxRuntime.jsxs(View, {
+  return jsxRuntime.jsxs("div", {
     className: "xmd-code-container",
     children: [
-      node.lang && jsxRuntime.jsx(View, {
+      node.lang && jsxRuntime.jsx("div", {
         className: "xmd-code-header",
-        children: jsxRuntime.jsx(Text, {
+        children: jsxRuntime.jsx("span", {
           className: "xmd-code-lang",
           children: node.lang
         })
       }),
-      jsxRuntime.jsx(View, {
+      jsxRuntime.jsx("div", {
         className: "xmd-code-content",
-        children: jsxRuntime.jsx(Text, {
+        children: jsxRuntime.jsx("span", {
           className: "xmd-code-text",
           children: node.text
         })
@@ -8871,6 +9345,9 @@ const CodeRenderer = ({ node }) => {
     ]
   });
 };
+const checkURL = (url) => {
+  return /^(https?:|cmd:)\/\/|^#\S+/.test(url);
+};
 const Icon = React.memo((props) => {
   const { name = "", size, color: color2 } = props;
   const classNames = shared_clsx("xmdfont", `xmd-icon-${name}`);
@@ -8888,14 +9365,16 @@ const LinkRenderer = ({ node }) => {
   const { renderers, showLinkIcon, onLinkPress } = useMarkdownContext();
   const { PhrasingContentResolver: PhrasingContentResolver2 } = renderers;
   const { href: url } = node;
+  const isURL = checkURL(url);
   const onPress = React.useCallback((e) => {
     e.preventDefault();
-    if (url) {
+    if (isURL) {
       onLinkPress == null ? void 0 : onLinkPress(url);
     }
   }, [
     url,
-    onLinkPress
+    onLinkPress,
+    isURL
   ]);
   return jsxRuntime.jsxs("a", {
     className: "xmd-link",
@@ -8909,7 +9388,7 @@ const LinkRenderer = ({ node }) => {
         prevNode: index > 0 ? array[index - 1] : void 0,
         nextNode: index < array.length - 1 ? array[index + 1] : void 0
       }, index)),
-      showLinkIcon && jsxRuntime.jsx("span", {
+      showLinkIcon && isURL && jsxRuntime.jsx("span", {
         className: "xmd-link-search",
         children: jsxRuntime.jsx(Icon, {
           name: "search",
@@ -9058,7 +9537,7 @@ const ImageRenderer = ({ node }) => {
   });
 };
 const CodespanRenderer = ({ node }) => {
-  return jsxRuntime.jsx(Text, {
+  return jsxRuntime.jsx("span", {
     className: "xmd-codespan",
     children: node.text
   });
@@ -9408,7 +9887,7 @@ const defaultRenderers = {
   ...defaultRenderers
 });
 const pxTransform = (value) => {
-  return value / 2;
+  return `${value / 2}px`;
 };
 const shared_pxTransform = pxTransform;
 const defaultTheme = {
@@ -9771,52 +10250,79 @@ const MarkdownFC = ({ content, theme, tableToolbar, styles: customStyles, showLi
   });
 };
 const Markdown = attachStaticMethods(MarkdownFC);
-const MarkdownRender = (props) => {
-  var _a2;
-  useTheme();
-  const { executeActions } = useAction();
-  useForEditor(props);
-  const content = props.content || "";
-  const originProps = props.originProps || {};
-  return (originProps == null ? void 0 : originProps.renderMarkdown) ? (_a2 = originProps == null ? void 0 : originProps.renderMarkdown) == null ? void 0 : _a2.call(originProps, { text: content }) : /* @__PURE__ */ jsxRuntime.jsx(
-    Markdown,
-    {
-      content,
-      theme: {
-        line_height: 5,
-        text_size: 16
-      }
-    }
-  );
-};
-var __defProp$f = Object.defineProperty;
-var __defProps$a = Object.defineProperties;
-var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
-var __hasOwnProp$c = Object.prototype.hasOwnProperty;
-var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$c = (a, b3) => {
+var __defProp$h = Object.defineProperty;
+var __defProps$c = Object.defineProperties;
+var __getOwnPropDescs$c = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
+var __hasOwnProp$e = Object.prototype.hasOwnProperty;
+var __propIsEnum$e = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$h(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$e = (a, b3) => {
   for (var prop in b3 || (b3 = {}))
-    if (__hasOwnProp$c.call(b3, prop))
-      __defNormalProp$f(a, prop, b3[prop]);
-  if (__getOwnPropSymbols$c)
-    for (var prop of __getOwnPropSymbols$c(b3)) {
-      if (__propIsEnum$c.call(b3, prop))
-        __defNormalProp$f(a, prop, b3[prop]);
+    if (__hasOwnProp$e.call(b3, prop))
+      __defNormalProp$h(a, prop, b3[prop]);
+  if (__getOwnPropSymbols$e)
+    for (var prop of __getOwnPropSymbols$e(b3)) {
+      if (__propIsEnum$e.call(b3, prop))
+        __defNormalProp$h(a, prop, b3[prop]);
     }
   return a;
 };
-var __spreadProps$a = (a, b3) => __defProps$a(a, __getOwnPropDescs$a(b3));
-const ImageRender = (props) => {
+var __spreadProps$c = (a, b3) => __defProps$c(a, __getOwnPropDescs$c(b3));
+const MarkdownRender = (props) => {
   const theme = useTheme();
-  const { scale } = useResponsive();
   const { executeActions } = useAction();
-  const { ref: ref2, onClick, onMouseEnter, onMouseLeave } = useForEditor(props);
-  const viewStyle = imageViewStyleFromProps(props, theme, scale);
-  const getObjectFit = (fit) => {
-    switch (fit) {
-      case "contain":
+  const { scale } = useResponsive();
+  const { onClick } = useForEditor(props);
+  const content = props.content || "";
+  const style = __spreadProps$c(__spreadValues$e({}, marginAndPaddingToStyle(props, theme, scale)), {
+    textAlign: props.textAlign
+  });
+  const markdownTheme = {
+    line_height: typeof props.lineHeight === "number" ? parseFloat(
+      resolvedLineHeight(props.lineHeight, theme, scale, true).toString()
+    ) * 2 : void 0,
+    text_size: typeof props.fontSize === "number" ? parseFloat(
+      resolvedFontSize(props.fontSize, theme, scale, true).toString()
+    ) * 2 : void 0,
+    text_color: typeof props.color === "string" ? resolveColor(props.color, theme) : void 0
+  };
+  const handleClick = (e) => {
+    if (props == null ? void 0 : props.actions) {
+      void executeActions(props.actions);
+    }
+    onClick(e);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: handleClick, className: "aui-markdown-wrap", style, children: /* @__PURE__ */ jsxRuntime.jsx(Markdown, { content, theme: markdownTheme }) });
+};
+var __defProp$g = Object.defineProperty;
+var __defProps$b = Object.defineProperties;
+var __getOwnPropDescs$b = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
+var __hasOwnProp$d = Object.prototype.hasOwnProperty;
+var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$g(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$d = (a, b3) => {
+  for (var prop in b3 || (b3 = {}))
+    if (__hasOwnProp$d.call(b3, prop))
+      __defNormalProp$g(a, prop, b3[prop]);
+  if (__getOwnPropSymbols$d)
+    for (var prop of __getOwnPropSymbols$d(b3)) {
+      if (__propIsEnum$d.call(b3, prop))
+        __defNormalProp$g(a, prop, b3[prop]);
+    }
+  return a;
+};
+var __spreadProps$b = (a, b3) => __defProps$b(a, __getOwnPropDescs$b(b3));
+const ImageRender = (props) => {
+  const theme = useTheme();
+  const { scale } = useResponsive();
+  const { executeActions } = useAction();
+  const { ref: ref2, onClick, onMouseEnter, onMouseLeave } = useForEditor(props);
+  const viewStyle = imageViewStyleFromProps(props, theme, scale);
+  const getObjectFit = (fit) => {
+    switch (fit) {
+      case "contain":
         return "contain";
       case "cover":
         return "cover";
@@ -9831,7 +10337,7 @@ const ImageRender = (props) => {
     }
   };
   const style = imageStyleFromProps(
-    __spreadValues$c({
+    __spreadValues$d({
       width: props.width,
       height: props.height,
       fit: getObjectFit(props.fit)
@@ -9839,7 +10345,7 @@ const ImageRender = (props) => {
     theme,
     scale
   );
-  const imgUrl = getImageUrl(__spreadValues$c({ url: props.src }, props));
+  const imgUrl = getImageUrl(__spreadValues$d({ url: props.src }, props));
   const handleClick = (e) => {
     if (props == null ? void 0 : props.actions) {
       void executeActions(props.actions);
@@ -9848,7 +10354,7 @@ const ImageRender = (props) => {
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
-    __spreadProps$a(__spreadValues$c({
+    __spreadProps$b(__spreadValues$d({
       onClick: props.actions ? handleClick : void 0,
       style: viewStyle,
       ref: ref2
@@ -9857,25 +10363,25 @@ const ImageRender = (props) => {
     })
   );
 };
-var __defProp$e = Object.defineProperty;
-var __defProps$9 = Object.defineProperties;
-var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
-var __hasOwnProp$b = Object.prototype.hasOwnProperty;
-var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$b = (a, b3) => {
+var __defProp$f = Object.defineProperty;
+var __defProps$a = Object.defineProperties;
+var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
+var __hasOwnProp$c = Object.prototype.hasOwnProperty;
+var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$c = (a, b3) => {
   for (var prop in b3 || (b3 = {}))
-    if (__hasOwnProp$b.call(b3, prop))
-      __defNormalProp$e(a, prop, b3[prop]);
-  if (__getOwnPropSymbols$b)
-    for (var prop of __getOwnPropSymbols$b(b3)) {
-      if (__propIsEnum$b.call(b3, prop))
-        __defNormalProp$e(a, prop, b3[prop]);
+    if (__hasOwnProp$c.call(b3, prop))
+      __defNormalProp$f(a, prop, b3[prop]);
+  if (__getOwnPropSymbols$c)
+    for (var prop of __getOwnPropSymbols$c(b3)) {
+      if (__propIsEnum$c.call(b3, prop))
+        __defNormalProp$f(a, prop, b3[prop]);
     }
   return a;
 };
-var __spreadProps$9 = (a, b3) => __defProps$9(a, __getOwnPropDescs$9(b3));
+var __spreadProps$a = (a, b3) => __defProps$a(a, __getOwnPropDescs$a(b3));
 const TextListRender = (props) => {
   const theme = useTheme();
   const { scale } = useResponsive();
@@ -9897,7 +10403,7 @@ const TextListRender = (props) => {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
-    __spreadProps$9(__spreadValues$b({
+    __spreadProps$a(__spreadValues$c({
       style,
       onClick: handleContainerClick,
       ref: ref2
@@ -9951,25 +10457,25 @@ const TextListRender = (props) => {
     })
   );
 };
-var __defProp$d = Object.defineProperty;
-var __defProps$8 = Object.defineProperties;
-var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
-var __hasOwnProp$a = Object.prototype.hasOwnProperty;
-var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$a = (a, b3) => {
+var __defProp$e = Object.defineProperty;
+var __defProps$9 = Object.defineProperties;
+var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
+var __hasOwnProp$b = Object.prototype.hasOwnProperty;
+var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$b = (a, b3) => {
   for (var prop in b3 || (b3 = {}))
-    if (__hasOwnProp$a.call(b3, prop))
-      __defNormalProp$d(a, prop, b3[prop]);
-  if (__getOwnPropSymbols$a)
-    for (var prop of __getOwnPropSymbols$a(b3)) {
-      if (__propIsEnum$a.call(b3, prop))
-        __defNormalProp$d(a, prop, b3[prop]);
+    if (__hasOwnProp$b.call(b3, prop))
+      __defNormalProp$e(a, prop, b3[prop]);
+  if (__getOwnPropSymbols$b)
+    for (var prop of __getOwnPropSymbols$b(b3)) {
+      if (__propIsEnum$b.call(b3, prop))
+        __defNormalProp$e(a, prop, b3[prop]);
     }
   return a;
 };
-var __spreadProps$8 = (a, b3) => __defProps$8(a, __getOwnPropDescs$8(b3));
+var __spreadProps$9 = (a, b3) => __defProps$9(a, __getOwnPropDescs$9(b3));
 const CustomRenderFromIM = (props) => {
   const { executeActions, getLocalData } = useAction();
   const { originProps } = props;
@@ -10002,32 +10508,32 @@ const CustomRenderFromIM = (props) => {
       },
       {}
     );
-    return __spreadProps$8(__spreadValues$a({}, actions), {
+    return __spreadProps$9(__spreadValues$b({}, actions), {
       getLocalData
     });
   }, [executeActions, getLocalData]);
   if (!CustomComp)
     return /* @__PURE__ */ jsxRuntime.jsx(UnknownRenderer, { type: props == null ? void 0 : props.customCode, prefix: "渲染类型错误" });
   if (React.isValidElement(CustomComp)) {
-    return React.cloneElement(CustomComp, __spreadProps$8(__spreadValues$a(__spreadValues$a(__spreadValues$a({}, (CustomComp == null ? void 0 : CustomComp.props) || {}), originProps), props), {
+    return React.cloneElement(CustomComp, __spreadProps$9(__spreadValues$b(__spreadValues$b(__spreadValues$b({}, (CustomComp == null ? void 0 : CustomComp.props) || {}), originProps), props), {
       AUIActions
     }));
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(CustomComp, __spreadProps$8(__spreadValues$a(__spreadValues$a({}, originProps), props), { AUIActions }));
+  return /* @__PURE__ */ jsxRuntime.jsx(CustomComp, __spreadProps$9(__spreadValues$b(__spreadValues$b({}, originProps), props), { AUIActions }));
 };
-var __defProp$c = Object.defineProperty;
-var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
-var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
-var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$9 = (a, b3) => {
+var __defProp$d = Object.defineProperty;
+var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
+var __hasOwnProp$a = Object.prototype.hasOwnProperty;
+var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$a = (a, b3) => {
   for (var prop in b3 || (b3 = {}))
-    if (__hasOwnProp$9.call(b3, prop))
-      __defNormalProp$c(a, prop, b3[prop]);
-  if (__getOwnPropSymbols$9)
-    for (var prop of __getOwnPropSymbols$9(b3)) {
-      if (__propIsEnum$9.call(b3, prop))
-        __defNormalProp$c(a, prop, b3[prop]);
+    if (__hasOwnProp$a.call(b3, prop))
+      __defNormalProp$d(a, prop, b3[prop]);
+  if (__getOwnPropSymbols$a)
+    for (var prop of __getOwnPropSymbols$a(b3)) {
+      if (__propIsEnum$a.call(b3, prop))
+        __defNormalProp$d(a, prop, b3[prop]);
     }
   return a;
 };
@@ -10041,7 +10547,7 @@ const DividerRender = (props) => {
       void executeActions(props.actions);
     }
   };
-  const style = __spreadValues$9({
+  const style = __spreadValues$a({
     width: "100%",
     height: props.height ? runStyle(props.height, scale) : "1px",
     backgroundColor: props.color ? ((_a2 = theme.color) == null ? void 0 : _a2[props.color]) || props.color : "#eeeeee",
@@ -10073,25 +10579,25 @@ const CustomRenderFromProps = ({ props, component }) => {
     }
   );
 };
-var __defProp$b = Object.defineProperty;
-var __defProps$7 = Object.defineProperties;
-var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
-var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
-var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$8 = (a, b3) => {
+var __defProp$c = Object.defineProperty;
+var __defProps$8 = Object.defineProperties;
+var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
+var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
+var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$9 = (a, b3) => {
   for (var prop in b3 || (b3 = {}))
-    if (__hasOwnProp$8.call(b3, prop))
-      __defNormalProp$b(a, prop, b3[prop]);
-  if (__getOwnPropSymbols$8)
-    for (var prop of __getOwnPropSymbols$8(b3)) {
-      if (__propIsEnum$8.call(b3, prop))
-        __defNormalProp$b(a, prop, b3[prop]);
+    if (__hasOwnProp$9.call(b3, prop))
+      __defNormalProp$c(a, prop, b3[prop]);
+  if (__getOwnPropSymbols$9)
+    for (var prop of __getOwnPropSymbols$9(b3)) {
+      if (__propIsEnum$9.call(b3, prop))
+        __defNormalProp$c(a, prop, b3[prop]);
     }
   return a;
 };
-var __spreadProps$7 = (a, b3) => __defProps$7(a, __getOwnPropDescs$7(b3));
+var __spreadProps$8 = (a, b3) => __defProps$8(a, __getOwnPropDescs$8(b3));
 const ChoiceJDHRender = ({ props, values }) => {
   const {
     updateKey,
@@ -10110,7 +10616,7 @@ const ChoiceJDHRender = ({ props, values }) => {
   const { scale } = useResponsive();
   const { executeActions } = useAction();
   const { ref: ref2, onClick, onMouseEnter, onMouseLeave } = useForEditor(props);
-  const style = buildChoiceRenderStyle(props, isSelected, theme, scale);
+  const style = buildJDHChoiceRenderStyle(props, isSelected, theme, scale);
   const actions = [
     {
       type: !multi ? "updateLocalData" : "toggleLocalDataToSet",
@@ -10127,7 +10633,7 @@ const ChoiceJDHRender = ({ props, values }) => {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
-    __spreadProps$7(__spreadValues$8({
+    __spreadProps$8(__spreadValues$9({
       className: "choice-wrap",
       style: style.wrapStyle,
       onClick: handleClick,
@@ -10174,25 +10680,25 @@ const ChoiceJDHRender = ({ props, values }) => {
     })
   );
 };
-var __defProp$a = Object.defineProperty;
-var __defProps$6 = Object.defineProperties;
-var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
-var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
-var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$7 = (a, b3) => {
+var __defProp$b = Object.defineProperty;
+var __defProps$7 = Object.defineProperties;
+var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
+var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
+var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$8 = (a, b3) => {
   for (var prop in b3 || (b3 = {}))
-    if (__hasOwnProp$7.call(b3, prop))
-      __defNormalProp$a(a, prop, b3[prop]);
-  if (__getOwnPropSymbols$7)
-    for (var prop of __getOwnPropSymbols$7(b3)) {
-      if (__propIsEnum$7.call(b3, prop))
-        __defNormalProp$a(a, prop, b3[prop]);
+    if (__hasOwnProp$8.call(b3, prop))
+      __defNormalProp$b(a, prop, b3[prop]);
+  if (__getOwnPropSymbols$8)
+    for (var prop of __getOwnPropSymbols$8(b3)) {
+      if (__propIsEnum$8.call(b3, prop))
+        __defNormalProp$b(a, prop, b3[prop]);
     }
   return a;
 };
-var __spreadProps$6 = (a, b3) => __defProps$6(a, __getOwnPropDescs$6(b3));
+var __spreadProps$7 = (a, b3) => __defProps$7(a, __getOwnPropDescs$7(b3));
 const ButtonJDHRender = ({ props }) => {
   const {
     text,
@@ -10206,7 +10712,7 @@ const ButtonJDHRender = ({ props }) => {
   const { scale } = useResponsive();
   const { executeActions } = useAction();
   const { ref: ref2, onClick, onMouseEnter, onMouseLeave } = useForEditor(props);
-  const style = buildButtonRenderStyle(props, theme, scale);
+  const style = buildJDHButtonRenderStyle(props, theme, scale);
   const handleClick = (e) => {
     if (!disabled) {
       executeActions(actions);
@@ -10215,7 +10721,7 @@ const ButtonJDHRender = ({ props }) => {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
-    __spreadProps$6(__spreadValues$7({
+    __spreadProps$7(__spreadValues$8({
       className: "button-wrap",
       style: style.wrapStyle,
       onClick: handleClick,
@@ -10237,25 +10743,25 @@ const ButtonJDHRender = ({ props }) => {
     })
   );
 };
-var __defProp$9 = Object.defineProperty;
-var __defProps$5 = Object.defineProperties;
-var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
-var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
-var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$6 = (a, b3) => {
+var __defProp$a = Object.defineProperty;
+var __defProps$6 = Object.defineProperties;
+var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
+var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
+var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$7 = (a, b3) => {
   for (var prop in b3 || (b3 = {}))
-    if (__hasOwnProp$6.call(b3, prop))
-      __defNormalProp$9(a, prop, b3[prop]);
-  if (__getOwnPropSymbols$6)
-    for (var prop of __getOwnPropSymbols$6(b3)) {
-      if (__propIsEnum$6.call(b3, prop))
-        __defNormalProp$9(a, prop, b3[prop]);
+    if (__hasOwnProp$7.call(b3, prop))
+      __defNormalProp$a(a, prop, b3[prop]);
+  if (__getOwnPropSymbols$7)
+    for (var prop of __getOwnPropSymbols$7(b3)) {
+      if (__propIsEnum$7.call(b3, prop))
+        __defNormalProp$a(a, prop, b3[prop]);
     }
   return a;
 };
-var __spreadProps$5 = (a, b3) => __defProps$5(a, __getOwnPropDescs$5(b3));
+var __spreadProps$6 = (a, b3) => __defProps$6(a, __getOwnPropDescs$6(b3));
 const InputJDHRender = ({ props, value = "", onChange }) => {
   const {
     placeholder,
@@ -10270,7 +10776,7 @@ const InputJDHRender = ({ props, value = "", onChange }) => {
   const { scale } = useResponsive();
   const { executeActions } = useAction();
   const { ref: ref2, onClick, onMouseEnter, onMouseLeave } = useForEditor(props);
-  const style = buildInputRenderStyle(props, theme, scale);
+  const style = buildJDHInputRenderStyle(props, theme, scale);
   const [targetValue, setTargetValue] = React.useState(value);
   const [passwordShow, setPasswordShow] = React.useState(false);
   const handleClick = React.useCallback((e) => {
@@ -10299,7 +10805,7 @@ const InputJDHRender = ({ props, value = "", onChange }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { width: "100%" }, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
-      __spreadProps$5(__spreadValues$6({
+      __spreadProps$6(__spreadValues$7({
         className: "aui-input-wrap",
         style: style.wrapStyle,
         onClick: handleClick,
@@ -10425,25 +10931,25 @@ const InputJDHRender = ({ props, value = "", onChange }) => {
     (error && !!errorMessage || !!subDescription) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "input-msg", style: style.msgStyle, children: error && !!errorMessage ? errorMessage : subDescription }, "msg")
   ] });
 };
-var __defProp$8 = Object.defineProperty;
-var __defProps$4 = Object.defineProperties;
-var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
-var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
-var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$5 = (a, b3) => {
+var __defProp$9 = Object.defineProperty;
+var __defProps$5 = Object.defineProperties;
+var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
+var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
+var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$6 = (a, b3) => {
   for (var prop in b3 || (b3 = {}))
-    if (__hasOwnProp$5.call(b3, prop))
-      __defNormalProp$8(a, prop, b3[prop]);
-  if (__getOwnPropSymbols$5)
-    for (var prop of __getOwnPropSymbols$5(b3)) {
-      if (__propIsEnum$5.call(b3, prop))
-        __defNormalProp$8(a, prop, b3[prop]);
+    if (__hasOwnProp$6.call(b3, prop))
+      __defNormalProp$9(a, prop, b3[prop]);
+  if (__getOwnPropSymbols$6)
+    for (var prop of __getOwnPropSymbols$6(b3)) {
+      if (__propIsEnum$6.call(b3, prop))
+        __defNormalProp$9(a, prop, b3[prop]);
     }
   return a;
 };
-var __spreadProps$4 = (a, b3) => __defProps$4(a, __getOwnPropDescs$4(b3));
+var __spreadProps$5 = (a, b3) => __defProps$5(a, __getOwnPropDescs$5(b3));
 const TextareaJDHRender = ({ props, value = "", onChange }) => {
   const {
     placeholder,
@@ -10458,7 +10964,7 @@ const TextareaJDHRender = ({ props, value = "", onChange }) => {
   const { scale } = useResponsive();
   const { executeActions } = useAction();
   const { ref: ref2, onClick, onMouseEnter, onMouseLeave } = useForEditor(props);
-  const style = buildTextareaRenderStyle(props, value, theme, scale);
+  const style = buildJDHTextareaRenderStyle(props, value, theme, scale);
   const [targetValue, setTargetValue] = React.useState(value);
   const [passwordShow, setPasswordShow] = React.useState(false);
   const handleClick = React.useCallback((e) => {
@@ -10476,7 +10982,7 @@ const TextareaJDHRender = ({ props, value = "", onChange }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
-      __spreadProps$4(__spreadValues$5({
+      __spreadProps$5(__spreadValues$6({
         className: "aui-textarea-wrap",
         style: style.wrapStyle,
         onClick: handleClick,
@@ -10515,6 +11021,166 @@ const TextareaJDHRender = ({ props, value = "", onChange }) => {
     (error && !!errorMessage || !!subDescription) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "textarea-msg", style: style.msgStyle, children: error && !!errorMessage ? errorMessage : subDescription }, "msg")
   ] });
 };
+var __defProp$8 = Object.defineProperty;
+var __defProps$4 = Object.defineProperties;
+var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
+var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
+var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$5 = (a, b3) => {
+  for (var prop in b3 || (b3 = {}))
+    if (__hasOwnProp$5.call(b3, prop))
+      __defNormalProp$8(a, prop, b3[prop]);
+  if (__getOwnPropSymbols$5)
+    for (var prop of __getOwnPropSymbols$5(b3)) {
+      if (__propIsEnum$5.call(b3, prop))
+        __defNormalProp$8(a, prop, b3[prop]);
+    }
+  return a;
+};
+var __spreadProps$4 = (a, b3) => __defProps$4(a, __getOwnPropDescs$4(b3));
+const buildColorStyle = (variant, colorType, disabled, hover, theme) => {
+  const { basicColor, color: color2, disabledColor, hoverColor } = theme.components.button;
+  if (disabled) {
+    return {
+      fontColor: disabledColor.color,
+      backgroundColor: variant === "text" || variant === "link" ? disabledColor.textLinkBackground : variant === "filled" ? disabledColor.fillBackground : disabledColor.background,
+      borderColor: variant === "text" || variant === "link" ? disabledColor.textLinkBackground : disabledColor.borderColor
+    };
+  }
+  const colorTheme = __spreadValues$5(__spreadValues$5({}, basicColor), color2[colorType]);
+  const fontColor = variant === "solid" ? colorTheme.color : colorTheme.background;
+  const backgroundColor = variant === "solid" ? colorTheme.background : variant === "filled" ? colorTheme.fillBackground : colorTheme.color;
+  const borderColor = variant === "dashed" || variant === "outlined" ? colorTheme.borderColor : variant === "solid" ? colorTheme.background : colorTheme.color;
+  const result = { fontColor, backgroundColor, borderColor };
+  if (hover) {
+    const hoverTheme = hoverColor[colorType];
+    if (variant === "solid") {
+      result.backgroundColor = hoverTheme.solidBackground;
+    } else if (variant === "outlined" || variant === "dashed") {
+      result.fontColor = hoverTheme.outlineDashedTextColor;
+      result.borderColor = hoverTheme.outlineDashedTextColor;
+    } else if (variant === "link") {
+      result.fontColor = hoverTheme.outlineDashedTextColor;
+    } else if (variant === "text") {
+      result.backgroundColor = hoverTheme.textBackground;
+    } else if (variant === "filled") {
+      result.backgroundColor = hoverTheme.fillBackground;
+    }
+  }
+  return result;
+};
+const ButtonRender = ({ props }) => {
+  const {
+    text,
+    iconSrc,
+    loading = false,
+    color: color2 = "default",
+    size = "middle",
+    actions,
+    variant = "solid",
+    disabled = false,
+    block = false
+  } = props;
+  const theme = useTheme();
+  const [onHover, setOnHover] = React.useState(false);
+  const buttonTheme = theme.components.button;
+  const { fontColor, backgroundColor, borderColor } = buildColorStyle(
+    variant,
+    color2,
+    disabled,
+    onHover,
+    theme
+  );
+  const sizeTheme = __spreadValues$5(__spreadValues$5({}, buttonTheme.basicSize), buttonTheme.size[size]);
+  const imageSrc = loading ? buttonTheme.loadingIcon : iconSrc;
+  const { scale } = useResponsive();
+  const { executeActions } = useAction();
+  const { ref: ref2, onClick, onMouseEnter, onMouseLeave } = useForEditor(props);
+  const wrapStyle = __spreadProps$4(__spreadValues$5(__spreadValues$5(__spreadValues$5({}, textStyleFromTheme(
+    theme,
+    {
+      fontSize: props.fontSize ? props.fontSize : sizeTheme.fontSize,
+      lineHeight: props.lineHeight ? props.lineHeight : sizeTheme.lineHeight,
+      fontWeight: props.fontWeight,
+      color: fontColor
+    },
+    scale
+  )), borderRadiusToStyle(sizeTheme.borderRadius, theme, scale)), marginAndPaddingToStyle(__spreadValues$5(__spreadValues$5({}, sizeTheme), props), theme, scale)), {
+    background: resolveColor(backgroundColor, theme),
+    borderWidth: 1,
+    borderStyle: variant === "dashed" ? "dashed" : "solid",
+    borderColor: resolveColor(borderColor, theme),
+    opacity: loading ? buttonTheme.loading.opacity : 1,
+    cursor: disabled ? "not-allowed" : loading ? void 0 : "pointer",
+    flex: block ? 1 : "initial",
+    textAlign: props.textAlign || "center"
+  });
+  const iconSize = wrapStyle.fontSize;
+  const iconStyle = __spreadValues$5(__spreadValues$5({
+    width: iconSize,
+    height: iconSize
+  }, borderRadiusToStyle(buttonTheme.icon.borderRadius, theme, scale)), marginLogogramToStyle(buttonTheme.icon.margin, theme, scale));
+  const handleClick = (e) => {
+    if (!disabled || !loading) {
+      executeActions(actions);
+    }
+    onClick(e);
+  };
+  const handleMouseEnter = React.useCallback(
+    (e) => {
+      setOnHover(true);
+      onMouseEnter(e);
+    },
+    [onMouseEnter]
+  );
+  const handleMouseLeave = React.useCallback(
+    (e) => {
+      setOnHover(false);
+      onMouseLeave(e);
+    },
+    [onMouseLeave]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "button-wrap",
+      style: wrapStyle,
+      onClick: handleClick,
+      ref: ref2,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      children: [
+        imageSrc && /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            style: iconStyle,
+            className: `button-icon ${loading ? "aui-button-loading" : ""}`,
+            src: imageSrc
+          }
+        ),
+        !imageSrc && loading && /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            viewBox: "0 0 1024 1024",
+            focusable: "false",
+            "data-icon": "loading",
+            style: __spreadProps$4(__spreadValues$5({}, marginLogogramToStyle(buttonTheme.icon.margin, theme, scale)), {
+              width: iconSize,
+              height: iconSize,
+              fill: wrapStyle.color
+            }),
+            className: "aui-button-loading",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "button-text", children: text })
+      ]
+    }
+  );
+};
 var __defProp$7 = Object.defineProperty;
 var __defProps$3 = Object.defineProperties;
 var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
@@ -10568,7 +11234,7 @@ const LeafWrapper = ({
       return /* @__PURE__ */ jsxRuntime.jsx(ImageRender, __spreadValues$4({}, props));
     case "text-list":
       return /* @__PURE__ */ jsxRuntime.jsx(TextListRender, __spreadProps$3(__spreadValues$4({}, props), { children }));
-    case "input": {
+    case "jdh-input": {
       const p = props;
       const value = p.updateKey ? values == null ? void 0 : values[p.updateKey] : "";
       return /* @__PURE__ */ jsxRuntime.jsx(
@@ -10580,7 +11246,7 @@ const LeafWrapper = ({
         }
       );
     }
-    case "textarea": {
+    case "jdh-textarea": {
       const p = props;
       const value = p.updateKey ? values == null ? void 0 : values[p.updateKey] : "";
       return /* @__PURE__ */ jsxRuntime.jsx(
@@ -10592,6 +11258,9 @@ const LeafWrapper = ({
         }
       );
     }
+    case "button": {
+      return /* @__PURE__ */ jsxRuntime.jsx(ButtonRender, { props });
+    }
     case "divider": {
       return /* @__PURE__ */ jsxRuntime.jsx(DividerRender, __spreadValues$4({}, props));
     }
@@ -10601,14 +11270,20 @@ const LeafWrapper = ({
     case "custom-render": {
       return /* @__PURE__ */ jsxRuntime.jsx(CustomRenderFromIM, __spreadProps$3(__spreadValues$4({}, props), { originProps }));
     }
-    case "choice": {
+    case "jdh-choice": {
       return /* @__PURE__ */ jsxRuntime.jsx(ChoiceJDHRender, { props, values });
     }
-    case "button": {
+    case "jdh-button": {
       return /* @__PURE__ */ jsxRuntime.jsx(ButtonJDHRender, { props });
     }
     default:
-      return /* @__PURE__ */ jsxRuntime.jsx(UnknownRenderer, { type: String(renderType), prefix: "未知渲染类型" });
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        UnknownRenderer,
+        {
+          type: String(renderType),
+          prefix: `未知渲染类型: ${subType}`
+        }
+      );
   }
 };
 const ComponentRenderer = ({
@@ -10712,7 +11387,8 @@ const MessageContainer = (props) => {
     template,
     referenceComponentList,
     data,
-    initLocalData = {}
+    initLocalData = {},
+    devicePixelRatio: componentDevicePixelRatio
   } = component;
   const [containerWidth, setContainerWidth] = React.useState(
     typeof containerWidthFromProps === "number" ? containerWidthFromProps : null
@@ -10721,7 +11397,7 @@ const MessageContainer = (props) => {
   const { editorMode: editorMode2 } = useForEditor({});
   const responsiveValue = React.useMemo(() => {
     return {
-      scale: props.devicePixelRatio ? 1 / props.devicePixelRatio : DEFAULT_SCALE,
+      scale: typeof componentDevicePixelRatio === "number" ? 1 / componentDevicePixelRatio : props.devicePixelRatio ? 1 / props.devicePixelRatio : DEFAULT_SCALE,
       containerWidth
     };
   }, [props.devicePixelRatio, containerWidth]);