@yklyklpackages/message-card 0.0.1 → 0.1.0

package/dist/index.mjs

@@ -3,61 +3,6 @@ import * as React from "react";
 import React__default, { useState, useRef, useCallback, useEffect, createContext, useMemo as useMemo$1, useContext, isValidElement, version as version$2, useLayoutEffect as useLayoutEffect$2, forwardRef, Children, useImperativeHandle, cloneElement as cloneElement$1 } from "react";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default, { createPortal, unstable_batchedUpdates, flushSync } from "react-dom";
-const theme = {
-  fontSize: {
-    "text-xs": "24",
-    "text-sm": "26",
-    "text-md": "28",
-    "text-lg": "32",
-    "text-xl": "36"
-  },
-  color: {
-    "color-primary": "#02B176",
-    "color-error": "#FF0F23",
-    "color-success": "#02B176",
-    "color-warning": "#B26B00",
-    "color-textPrimary": "#0C0C0D",
-    "color-textSecondary": "#4B4C4D",
-    "color-textTertiary": "#646566",
-    "color-textFourth": "#969899"
-  },
-  backgroundColor: {
-    "bg-error": "#FFF1F2",
-    "bg-success": "#E5F7F1",
-    "bg-warning": "#FFF9E0",
-    "bg-page": "#F0F2F5",
-    "bg-card": "#FFFFFF",
-    "bg-cardContent": "#F7FAFC"
-  },
-  fontWeight: {
-    "font-weight-normal": "400",
-    "font-weight-bold": "500"
-  },
-  space: {
-    "spacing-xs": "8",
-    "spacing-sm": "16",
-    "spacing-md": "24",
-    "spacing-lg": "32",
-    "spacing-xl": "48",
-    "spacing-xxl": "64"
-  },
-  borderRadius: {
-    "radius-none": "0",
-    "radius-decorate": "4",
-    "radius-comp": "16",
-    "radius-card": "20",
-    "radius-model": "24"
-  },
-  borderSize: {
-    "border-0": "0",
-    "border-1": "1",
-    "border-2": "2",
-    "border-3": "3",
-    "border-4": "4"
-  },
-  components: {}
-  // 暂时忽略 components 属性
-};
 var __defProp$v = Object.defineProperty;
 var __defProps$r = Object.defineProperties;
 var __getOwnPropDescs$r = Object.getOwnPropertyDescriptors;
@@ -160,57 +105,51 @@ function JSONSafeParse(str, defaultValue) {
   }
   return defaultValue;
 }
-const defaultTheme$1 = {
+const defaultTheme$2 = {
   fontSize: {
-    xs: "20",
-    sm: "24",
-    md: "28",
-    lg: "30",
-    xl: "34"
+    FontSizes_JDH_Headline1: 23,
+    FontSizes_JDH_Headline2: 17,
+    FontSizes_JDH_Title: 15,
+    FontSizes_JDH_Text: 14,
+    FontSizes_JDH_AccentText: 12,
+    FontSizes_JDH_TagText: 10
   },
   color: {
-    primary: "#02B176",
-    error: "#FF0F23",
-    success: "#FF0F23",
-    warning: "#B26B00",
-    textPrimary: "#0C0C0D",
-    textSecondary: "#4B4C4D",
-    textTertiary: "#646566",
-    textFourth: "#969899"
-  },
-  backgroundColor: {
-    errorBg: "#FFF1F2",
-    successBg: "#E5F7F1",
-    warningBg: "#FFF9E0",
-    pageBg: "#F0F2F5",
-    cardBg: "#FFFFFF",
-    cardContentBg: "#F7FAFC"
+    Color_JDH_Primary: "#17CB8E",
+    Color_JDH_Accent1: "#FF8000",
+    Color_JDH_Accent2: "#73B0FF",
+    Color_JDH_Red_Danger: "#FF0F23",
+    Color_JDH_Red_Price: "#FF0F23",
+    Color_JDH_Red_Discount: "#FF0F23",
+    Color_JDH_Green_Success: "#67CC52",
+    Color_JDH_Gray_Headline: "#222222",
+    Color_JDH_Gray_Text: "#222222",
+    Color_JDH_Gray_SecondText: "#575859",
+    Color_JDH_Gray_AccentText: "#858687",
+    Color_JDH_Gray_DividingLine: "#D3D3D3",
+    Color_JDH_Gray_Background: "#F5F5F6",
+    Color_JDH_Gray_CardBackground: "#E5E9EB",
+    Color_JDH_Gray_Card: "#FFFFFF",
+    Color_JDH_Gray_Mask: "#00000080"
   },
   fontWeight: {
-    normal: "400",
-    bold: "500"
+    FontWeight_JDH_Normal: 400,
+    FontWeight_JDH_Medium: 500
   },
   space: {
-    xs: "4",
-    sm: "8",
-    md: "16",
-    lg: "20",
-    xl: "24",
-    xxl: "32"
+    "spacing-xs": 2,
+    "spacing-sm": 4,
+    "spacing-md": 8,
+    "spacing-lg": 10,
+    "spacing-xl": 12,
+    "spacing-xxl": 16
   },
   borderRadius: {
-    none: "0",
-    decorate: "4",
-    comp: "16",
-    card: "20",
-    model: "24"
-  },
-  borderSize: {
-    none: "0",
-    thin: "1",
-    base: "2",
-    thick: "3",
-    thicker: "4"
+    Radius_JDH_LargeExtra: 16,
+    Radius_JDH_Large: 12,
+    Radius_JDH_Medium: 8,
+    Radius_JDH_Small: 4,
+    Radius_JDH_Mini: 3
   },
   components: {}
 };
@@ -233,23 +172,22 @@ var __spreadValues$r = (a, b) => {
   return a;
 };
 var __spreadProps$q = (a, b) => __defProps$q(a, __getOwnPropDescs$q(b));
-const ThemeContext = createContext(defaultTheme$1);
+const ThemeContext = createContext(defaultTheme$2);
 const ThemeProvider = ({
-  theme: theme2,
+  theme,
   children
 }) => {
   const merged = useMemo$1(() => {
-    const base = defaultTheme$1;
+    const base = defaultTheme$2;
     return __spreadProps$q(__spreadValues$r({}, base), {
-      fontSize: __spreadValues$r(__spreadValues$r({}, base.fontSize), (theme2 == null ? void 0 : theme2.fontSize) || {}),
-      color: __spreadValues$r(__spreadValues$r({}, base.color), (theme2 == null ? void 0 : theme2.color) || {}),
-      backgroundColor: __spreadValues$r(__spreadValues$r({}, base.backgroundColor), (theme2 == null ? void 0 : theme2.backgroundColor) || {}),
-      fontWeight: __spreadValues$r(__spreadValues$r({}, base.fontWeight), (theme2 == null ? void 0 : theme2.fontWeight) || {}),
-      space: __spreadValues$r(__spreadValues$r({}, base.space), (theme2 == null ? void 0 : theme2.space) || {}),
-      borderRadius: __spreadValues$r(__spreadValues$r({}, base.borderRadius), (theme2 == null ? void 0 : theme2.borderRadius) || {}),
-      borderSize: __spreadValues$r(__spreadValues$r({}, base.borderSize), (theme2 == null ? void 0 : theme2.borderSize) || {})
+      fontSize: __spreadValues$r(__spreadValues$r({}, base.fontSize), (theme == null ? void 0 : theme.fontSize) || {}),
+      color: __spreadValues$r(__spreadValues$r({}, base.color), (theme == null ? void 0 : theme.color) || {}),
+      backgroundColor: __spreadValues$r(__spreadValues$r({}, base.color), (theme == null ? void 0 : theme.color) || {}),
+      fontWeight: __spreadValues$r(__spreadValues$r({}, base.fontWeight), (theme == null ? void 0 : theme.fontWeight) || {}),
+      space: __spreadValues$r(__spreadValues$r({}, base.space), (theme == null ? void 0 : theme.space) || {}),
+      borderRadius: __spreadValues$r(__spreadValues$r({}, base.borderRadius), (theme == null ? void 0 : theme.borderRadius) || {})
     });
-  }, [theme2]);
+  }, [theme]);
   return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: merged, children });
 };
 const useTheme$1 = () => useContext(ThemeContext);
@@ -2017,25 +1955,25 @@ const childGapStyle = (index2, count, gap, horizontal, scale = 1) => {
   }
   return { marginBottom: isLast ? 0 : runStyle(gap, scale) };
 };
-const resolveSpace = (val, theme2, scale = 1) => {
+const resolveSpace = (val, theme, scale = 1) => {
   if (val == null) return void 0;
   if (typeof val === "number") return runStyle(val, scale);
   if (typeof val === "string") {
     if (["xs", "sm", "md", "lg", "xl", "xxl"].includes(val)) {
-      const themeVal = parseInt(theme2.space[val]);
+      const themeVal = theme.space[val];
       return runStyle(themeVal, scale);
     }
     return runStyle(val, scale);
   }
   return val;
 };
-const paddingToStyle = (padding, theme2, scale = 1) => {
+const paddingToStyle = (padding, theme, scale = 1) => {
   if (padding == null) return {};
   if (typeof padding === "number" || typeof padding === "string") {
-    return { padding: resolveSpace(padding, theme2, scale) };
+    return { padding: resolveSpace(padding, theme, scale) };
   }
   if (Array.isArray(padding)) {
-    const resolvedPadding = padding.map((p) => resolveSpace(p, theme2, scale));
+    const resolvedPadding = padding.map((p) => resolveSpace(p, theme, scale));
     if (resolvedPadding.length === 1) {
       const [p] = resolvedPadding;
       return {
@@ -2072,13 +2010,13 @@ const paddingToStyle = (padding, theme2, scale = 1) => {
   }
   return {};
 };
-const marginToStyle = (margin, theme2, scale = 1) => {
+const marginToStyle = (margin, theme, scale = 1) => {
   if (margin == null) return {};
   if (typeof margin === "number" || typeof margin === "string") {
-    return { margin: resolveSpace(margin, theme2, scale) };
+    return { margin: resolveSpace(margin, theme, scale) };
   }
   if (Array.isArray(margin)) {
-    const resolvedMargin = margin.map((m) => resolveSpace(m, theme2, scale));
+    const resolvedMargin = margin.map((m) => resolveSpace(m, theme, scale));
     if (resolvedMargin.length === 2) {
       const [vertical, horizontal] = resolvedMargin;
       return {
@@ -2109,20 +2047,20 @@ const marginToStyle = (margin, theme2, scale = 1) => {
   }
   return {};
 };
-const textStyleFromTheme = (theme2, opts, scale = 1) => {
+const textStyleFromTheme = (theme, opts, scale = 1) => {
   var _a, _b, _c, _d, _e, _f;
   const style2 = {};
   if (!opts) return style2;
   let fontSizeValue;
   if (opts.fontSize) {
-    fontSizeValue = (_b = (_a = theme2.fontSize) == null ? void 0 : _a[opts.fontSize]) != null ? _b : opts.fontSize;
+    fontSizeValue = (_b = (_a = theme.fontSize) == null ? void 0 : _a[opts.fontSize]) != null ? _b : opts.fontSize;
     style2.fontSize = runStyle(fontSizeValue, scale);
   }
   if (opts.color) {
-    style2.color = (_d = (_c = theme2.color) == null ? void 0 : _c[opts.color]) != null ? _d : opts.color;
+    style2.color = (_d = (_c = theme.color) == null ? void 0 : _c[opts.color]) != null ? _d : opts.color;
   }
   if (opts.fontWeight) {
-    style2.fontWeight = (_f = (_e = theme2.fontWeight) == null ? void 0 : _e[opts.fontWeight]) != null ? _f : opts.fontWeight;
+    style2.fontWeight = (_f = (_e = theme.fontWeight) == null ? void 0 : _e[opts.fontWeight]) != null ? _f : opts.fontWeight;
   }
   if (opts.textAlign) {
     style2.textAlign = opts.textAlign;
@@ -2155,10 +2093,10 @@ const textStyleFromTheme = (theme2, opts, scale = 1) => {
     }
   }
   if (opts.marginLeft) {
-    style2.marginLeft = resolveSpace(opts.marginLeft, theme2, scale);
+    style2.marginLeft = resolveSpace(opts.marginLeft, theme, scale);
   }
   if (opts.marginRight) {
-    style2.marginRight = resolveSpace(opts.marginRight, theme2, scale);
+    style2.marginRight = resolveSpace(opts.marginRight, theme, scale);
   }
   if (opts.style) {
     Object.assign(style2, opts.style);
@@ -2186,28 +2124,20 @@ const justifyContentToStyle = (alignItems, justifyContent) => {
   if (justifyContent) style2.justifyContent = justifyCenterMap[justifyContent];
   return style2;
 };
-const backgroundToStyle = (background, theme2) => {
-  const backgroundMap = {
-    "bg-error": theme2.backgroundColor["bg-error"],
-    "bg-success": theme2.backgroundColor["bg-success"],
-    "bg-warning": theme2.backgroundColor["bg-warning"],
-    "bg-page": theme2.backgroundColor["bg-page"],
-    "bg-card": theme2.backgroundColor["bg-card"],
-    "bg-cardContent": theme2.backgroundColor["bg-cardContent"]
-  };
+const backgroundToStyle = (background, theme) => {
   const style2 = {};
   if (background) {
-    style2.backgroundColor = backgroundMap[background] || background;
+    style2.backgroundColor = theme.color[background] || background;
   }
   return style2;
 };
-const borderRadiusToStyle = (borderRadius, theme2, scale = 1) => {
+const borderRadiusToStyle = (borderRadius, theme, scale = 1) => {
   const borderRadiusMap = {
-    none: theme2.borderRadius.none,
-    card: theme2.borderRadius.card,
-    model: theme2.borderRadius.model,
-    comp: theme2.borderRadius.comp,
-    decorate: theme2.borderRadius.decorate
+    none: theme.borderRadius.none,
+    card: theme.borderRadius.card,
+    model: theme.borderRadius.model,
+    comp: theme.borderRadius.comp,
+    decorate: theme.borderRadius.decorate
   };
   const style2 = {};
   if (borderRadius) {
@@ -2215,16 +2145,13 @@ const borderRadiusToStyle = (borderRadius, theme2, scale = 1) => {
   }
   return style2;
 };
-const borderToStyle = (border, theme2, scale = 1) => {
+const borderToStyle = (border, theme, scale = 1) => {
   var _a, _b;
   const style2 = {};
   if (!border) return style2;
   if (border.size) {
     const resolveSize = (val) => {
-      var _a2, _b2;
-      const sizeKey = val;
-      const sizeValue = (_b2 = (_a2 = theme2.borderSize) == null ? void 0 : _a2[sizeKey]) != null ? _b2 : val;
-      return runStyle(sizeValue, scale);
+      return runStyle(val, scale);
     };
     const size = border.size;
     if (Array.isArray(size)) {
@@ -2264,26 +2191,26 @@ const borderToStyle = (border, theme2, scale = 1) => {
   }
   if (border.color) {
     const colorKey = border.color;
-    const colorValue = (_b = (_a = theme2.color) == null ? void 0 : _a[colorKey]) != null ? _b : border.color;
+    const colorValue = (_b = (_a = theme.color) == null ? void 0 : _a[colorKey]) != null ? _b : border.color;
     style2.borderColor = colorValue;
   }
   return style2;
 };
-const imageStyleFromProps = (props, theme2, scale = 1) => {
-  const style2 = __spreadValues$p({}, borderRadiusToStyle(props == null ? void 0 : props.borderRadius, theme2, scale));
+const imageStyleFromProps = (props, theme, scale = 1) => {
+  const style2 = __spreadValues$p({}, borderRadiusToStyle(props == null ? void 0 : props.borderRadius, theme, scale));
   if (props.width != null) style2.width = runStyle(props.width, scale) || "100%";
   if (props.height != null)
     style2.height = runStyle(props.height, scale) || "auto";
   if (props.fit) style2.objectFit = props.fit;
   style2.display = props.display || "block";
-  Object.assign(style2, marginToStyle(props == null ? void 0 : props.margin, theme2, scale));
+  Object.assign(style2, marginToStyle(props == null ? void 0 : props.margin, theme, scale));
   if (props.style) Object.assign(style2, props.style);
   return style2;
 };
-const imageViewStyleFromProps = (props, theme2, scale = 1) => {
+const imageViewStyleFromProps = (props, theme, scale = 1) => {
   const style2 = __spreadValues$p({
     overflow: "hidden"
-  }, borderRadiusToStyle(props == null ? void 0 : props.borderRadius, theme2, scale));
+  }, borderRadiusToStyle(props == null ? void 0 : props.borderRadius, theme, scale));
   return style2;
 };
 const fractionWidth = (percent) => ({
@@ -2306,7 +2233,7 @@ const buildItemContainerStyle = (index2, count, props, horizontal = false, scale
   );
   return style2;
 };
-const buildLayoutContainerStyle = (props, direction, theme2, scale = 1) => {
+const buildLayoutContainerStyle = (props, direction, theme, scale = 1) => {
   const style2 = __spreadValues$p(__spreadValues$p(__spreadValues$p(__spreadValues$p(__spreadValues$p({
     display: "flex",
     boxSizing: "border-box",
@@ -2314,13 +2241,13 @@ const buildLayoutContainerStyle = (props, direction, theme2, scale = 1) => {
     height: runStyle(props == null ? void 0 : props.height, scale) || "auto",
     position: "relative",
     flexDirection: direction || "column"
-  }, justifyContentToStyle(props == null ? void 0 : props.alignItems, props == null ? void 0 : props.justifyContent)), backgroundToStyle(props == null ? void 0 : props.background, theme2)), borderRadiusToStyle(props == null ? void 0 : props.borderRadius, theme2, scale)), borderToStyle(props == null ? void 0 : props.border, theme2, scale)), baseContainerStyle(props, scale));
-  Object.assign(style2, paddingToStyle(props == null ? void 0 : props.padding, theme2, scale));
-  Object.assign(style2, marginToStyle(props == null ? void 0 : props.margin, theme2, 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));
+  Object.assign(style2, paddingToStyle(props == null ? void 0 : props.padding, theme, scale));
+  Object.assign(style2, marginToStyle(props == null ? void 0 : props.margin, theme, scale));
   return style2;
 };
-const buildAbsoluteLayoutStyle = (props, direction, theme2, scale = 1) => {
-  const style2 = __spreadProps$o(__spreadValues$p(__spreadValues$p({}, buildLayoutContainerStyle(props, direction, theme2, scale)), borderRadiusToStyle(props == null ? void 0 : props.borderRadius, theme2, scale)), {
+const buildAbsoluteLayoutStyle = (props, direction, theme, scale = 1) => {
+  const style2 = __spreadProps$o(__spreadValues$p(__spreadValues$p({}, buildLayoutContainerStyle(props, direction, theme, scale)), borderRadiusToStyle(props == null ? void 0 : props.borderRadius, theme, scale)), {
     position: "absolute",
     zIndex: 1
   });
@@ -2451,12 +2378,12 @@ const FullRowLayout = ({
 }) => {
   const { scale } = useResponsive();
   const { executeActions } = useAction$1();
-  const theme2 = useTheme$1();
+  const theme = useTheme$1();
   const { ref: ref2, onClick, onMouseEnter, onMouseLeave } = useForEditor(props);
   const containerStyle = buildLayoutContainerStyle(
     props,
     "column",
-    theme2,
+    theme,
     scale
   );
   const items = React__default.Children.toArray(children);
@@ -2520,9 +2447,9 @@ const MultipleColumnLayout = ({
 }) => {
   const { scale } = useResponsive();
   const { executeActions } = useAction$1();
-  const theme2 = useTheme$1();
+  const theme = useTheme$1();
   const { ref: ref2, onClick, onMouseEnter, onMouseLeave } = useForEditor(props);
-  const containerStyle = __spreadProps$m(__spreadValues$n({}, buildLayoutContainerStyle(props, "row", theme2, scale)), {
+  const containerStyle = __spreadProps$m(__spreadValues$n({}, buildLayoutContainerStyle(props, "row", theme, scale)), {
     flexWrap: (props == null ? void 0 : props.flexWrap) || "nowrap"
   });
   const itemContainerStyle = (child, idx) => {
@@ -2580,12 +2507,12 @@ const TwoColumnLayout$2 = ({
 }) => {
   const { scale } = useResponsive();
   const { executeActions } = useAction$1();
-  const theme2 = useTheme$1();
+  const theme = useTheme$1();
   const { ref: ref2, onClick, onMouseEnter, onMouseLeave } = useForEditor(props);
   const containerStyle = buildLayoutContainerStyle(
     props,
     "row",
-    theme2,
+    theme,
     scale
   );
   const items = React__default.Children.toArray(children).slice(0, 2);
@@ -2642,12 +2569,12 @@ const ThreeColumnLayout$1 = ({
 }) => {
   const { scale } = useResponsive();
   const { executeActions } = useAction$1();
-  const theme2 = useTheme$1();
+  const theme = useTheme$1();
   const { ref: ref2, onClick, onMouseEnter, onMouseLeave } = useForEditor(props);
   const containerStyle = buildLayoutContainerStyle(
     props,
     "row",
-    theme2,
+    theme,
     scale
   );
   const items = React__default.Children.toArray(children).slice(0, 3);
@@ -2703,12 +2630,12 @@ const FourColumnLayout = ({
 }) => {
   const { scale } = useResponsive();
   const { executeActions } = useAction$1();
-  const theme2 = useTheme$1();
+  const theme = useTheme$1();
   const { ref: ref2, onClick, onMouseEnter, onMouseLeave } = useForEditor(props);
   const containerStyle = buildLayoutContainerStyle(
     props,
     "row",
-    theme2,
+    theme,
     scale
   );
   const items = React__default.Children.toArray(children).slice(0, 4);
@@ -2762,12 +2689,12 @@ const TwoColumnLayout$1 = ({
 }) => {
   const { scale } = useResponsive();
   const { executeActions } = useAction$1();
-  const theme2 = useTheme$1();
+  const theme = useTheme$1();
   const { ref: ref2, onClick, onMouseEnter, onMouseLeave } = useForEditor(props);
   const containerStyle = buildLayoutContainerStyle(
     props,
     "row",
-    theme2,
+    theme,
     scale
   );
   const items = React__default.Children.toArray(children).slice(0, 2);
@@ -2827,12 +2754,12 @@ const TwoColumnLayout = ({
 }) => {
   const { scale } = useResponsive();
   const { executeActions } = useAction$1();
-  const theme2 = useTheme$1();
+  const theme = useTheme$1();
   const { ref: ref2, onClick, onMouseEnter, onMouseLeave } = useForEditor(props);
   const containerStyle = buildLayoutContainerStyle(
     props,
     "row",
-    theme2,
+    theme,
     scale
   );
   const items = React__default.Children.toArray(children).slice(0, 2);
@@ -2890,12 +2817,12 @@ const ThreeColumnLayout = ({
 }) => {
   const { scale } = useResponsive();
   const { executeActions } = useAction$1();
-  const theme2 = useTheme$1();
+  const theme = useTheme$1();
   const { ref: ref2, onClick, onMouseEnter, onMouseLeave } = useForEditor(props);
   const containerStyle = buildLayoutContainerStyle(
     props,
     "row",
-    theme2,
+    theme,
     scale
   );
   const items = React__default.Children.toArray(children).slice(0, 3);
@@ -2958,12 +2885,12 @@ const AbsoluteViewLayout = ({
     }
     onClick(e);
   };
-  const theme2 = useTheme$1();
+  const theme = useTheme$1();
   const { ref: ref2, onClick, onMouseEnter, onMouseLeave } = useForEditor(props);
   const absoluteContainerStyle = buildAbsoluteLayoutStyle(
     props,
     "column",
-    theme2,
+    theme,
     scale
   );
   const items = React__default.Children.toArray(children);
@@ -3017,12 +2944,12 @@ const AnimationLayout = ({
     }
     onClick(e);
   };
-  const theme2 = useTheme$1();
+  const theme = useTheme$1();
   const { ref: ref2, onClick, onMouseEnter, onMouseLeave } = useForEditor(props);
   const containerStyle = buildLayoutContainerStyle(
     props,
     "column",
-    theme2,
+    theme,
     scale
   );
   const items = React__default.Children.toArray(children);
@@ -3147,11 +3074,11 @@ var __spreadValues$d = (a, b) => {
 };
 var __spreadProps$c = (a, b) => __defProps$c(a, __getOwnPropDescs$c(b));
 const TextRender = (props) => {
-  const theme2 = useTheme$1();
+  const theme = useTheme$1();
   const { scale } = useResponsive();
   const { executeActions } = useAction$1();
   const { ref: ref2, onClick, onMouseEnter, onMouseLeave } = useForEditor(props);
-  const style2 = textStyleFromTheme(theme2, props, scale);
+  const style2 = textStyleFromTheme(theme, props, scale);
   const handleClick = (e) => {
     if (props.actions) {
       void executeActions(props.actions);
@@ -3193,7 +3120,7 @@ const splitParagraphs = (md) => {
   return md.split(/\n\s*\n/).map((s) => s.trim()).filter(Boolean);
 };
 const MarkdownRender = (props) => {
-  const theme2 = useTheme$1();
+  const theme = useTheme$1();
   const { executeActions } = useAction$1();
   const { ref: ref2, onClick, onMouseEnter, onMouseLeave } = useForEditor(props);
   const content = props.content || "";
@@ -3212,8 +3139,8 @@ const MarkdownRender = (props) => {
     }, { onMouseEnter, onMouseLeave }), {
       style: {
         width: "100%",
-        color: theme2.color["color-textPrimary"],
-        fontSize: theme2.fontSize["text-md"],
+        color: theme.color["color-textPrimary"],
+        fontSize: theme.fontSize["text-md"],
         lineHeight: 1.6
       },
       dangerouslySetInnerHTML: { __html: content }
@@ -3240,14 +3167,14 @@ var __spreadValues$b = (a, b) => {
 };
 var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
 const ImageRender = (props) => {
-  const theme2 = useTheme$1();
+  const theme = useTheme$1();
   const { scale } = useResponsive();
   const { executeActions } = useAction$1();
   const { ref: ref2, onClick, onMouseEnter, onMouseLeave } = useForEditor(props);
-  const viewStyle = imageViewStyleFromProps(props, theme2, scale);
+  const viewStyle = imageViewStyleFromProps(props, theme, scale);
   const style2 = imageStyleFromProps(
     __spreadValues$b({ width: props.width, height: props.height, fit: props.fit }, props),
-    theme2,
+    theme,
     scale
   );
   const handleClick = (e) => {
@@ -5442,8 +5369,8 @@ function cleanTokenStyle(tokenKey, instanceId) {
     });
   }
 }
-var getComputedToken$1 = function getComputedToken(originToken, overrideToken, theme2, format2) {
-  var derivativeToken = theme2.getDerivativeToken(originToken);
+var getComputedToken$1 = function getComputedToken(originToken, overrideToken, theme, format2) {
+  var derivativeToken = theme.getDerivativeToken(originToken);
   var mergedDerivativeToken = _objectSpread2(_objectSpread2({}, derivativeToken), overrideToken);
   if (format2) {
     mergedDerivativeToken = format2(mergedDerivativeToken);
@@ -5451,7 +5378,7 @@ var getComputedToken$1 = function getComputedToken(originToken, overrideToken, t
   return mergedDerivativeToken;
 };
 var TOKEN_PREFIX = "token";
-function useCacheToken(theme2, tokens) {
+function useCacheToken(theme, tokens) {
   var option = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
   var _useContext = useContext(StyleContext), instanceId = _useContext.cache.instanceId, container = _useContext.container;
   var _option$salt = option.salt, salt = _option$salt === void 0 ? "" : _option$salt, _option$override = option.override, override = _option$override === void 0 ? EMPTY_OVERRIDE : _option$override, formatToken2 = option.formatToken, compute = option.getComputedToken, cssVar = option.cssVar;
@@ -5461,9 +5388,9 @@ function useCacheToken(theme2, tokens) {
   var tokenStr = flattenToken(mergedToken);
   var overrideTokenStr = flattenToken(override);
   var cssVarStr = cssVar ? flattenToken(cssVar) : "";
-  var cachedToken = useGlobalCache(TOKEN_PREFIX, [salt, theme2.id, tokenStr, overrideTokenStr, cssVarStr], function() {
+  var cachedToken = useGlobalCache(TOKEN_PREFIX, [salt, theme.id, tokenStr, overrideTokenStr, cssVarStr], function() {
     var _cssVar$key;
-    var mergedDerivativeToken = compute ? compute(mergedToken, override, theme2) : getComputedToken$1(mergedToken, override, theme2, formatToken2);
+    var mergedDerivativeToken = compute ? compute(mergedToken, override, theme) : getComputedToken$1(mergedToken, override, theme, formatToken2);
     var actualToken = _objectSpread2({}, mergedDerivativeToken);
     var cssVarsStr = "";
     if (!!cssVar) {
@@ -7722,7 +7649,7 @@ function derivative(token2) {
     generateNeutralColorPalettes
   })), genFontMapToken(token2.fontSize)), genSizeMapToken(token2)), genControlHeight(token2)), genCommonMapToken(token2));
 }
-const defaultTheme = createTheme(derivative);
+const defaultTheme$1 = createTheme(derivative);
 const defaultConfig = {
   token: seedToken,
   override: {
@@ -7767,7 +7694,7 @@ function useComponentConfig(propName) {
   });
 }
 const dynamicStyleMark = `-ant-${Date.now()}-${Math.random()}`;
-function getStyle$1(globalPrefixCls2, theme2) {
+function getStyle$1(globalPrefixCls2, theme) {
   const variables = {};
   const formatColor = (color2, updater) => {
     let clone = color2.clone();
@@ -7785,9 +7712,9 @@ function getStyle$1(globalPrefixCls2, theme2) {
     variables[`${type4}-color-deprecated-bg`] = colorPalettes[0];
     variables[`${type4}-color-deprecated-border`] = colorPalettes[2];
   };
-  if (theme2.primaryColor) {
-    fillColor(theme2.primaryColor, "primary");
-    const primaryColor = new FastColor(theme2.primaryColor);
+  if (theme.primaryColor) {
+    fillColor(theme.primaryColor, "primary");
+    const primaryColor = new FastColor(theme.primaryColor);
     const primaryColors = generate$1(primaryColor.toRgbString());
     primaryColors.forEach((color2, index2) => {
       variables[`primary-${index2 + 1}`] = color2;
@@ -7801,17 +7728,17 @@ function getStyle$1(globalPrefixCls2, theme2) {
     variables["primary-color-active-deprecated-f-30"] = formatColor(primaryActiveColor, (c) => c.setA(c.a * 0.3));
     variables["primary-color-active-deprecated-d-02"] = formatColor(primaryActiveColor, (c) => c.darken(2));
   }
-  if (theme2.successColor) {
-    fillColor(theme2.successColor, "success");
+  if (theme.successColor) {
+    fillColor(theme.successColor, "success");
   }
-  if (theme2.warningColor) {
-    fillColor(theme2.warningColor, "warning");
+  if (theme.warningColor) {
+    fillColor(theme.warningColor, "warning");
   }
-  if (theme2.errorColor) {
-    fillColor(theme2.errorColor, "error");
+  if (theme.errorColor) {
+    fillColor(theme.errorColor, "error");
   }
-  if (theme2.infoColor) {
-    fillColor(theme2.infoColor, "info");
+  if (theme.infoColor) {
+    fillColor(theme.infoColor, "info");
   }
   const cssList = Object.keys(variables).map((key) => `--${globalPrefixCls2}-${key}: ${variables[key]};`);
   return `
@@ -7820,8 +7747,8 @@ function getStyle$1(globalPrefixCls2, theme2) {
   }
   `.trim();
 }
-function registerTheme(globalPrefixCls2, theme2) {
-  const style2 = getStyle$1(globalPrefixCls2, theme2);
+function registerTheme(globalPrefixCls2, theme) {
+  const style2 = getStyle$1(globalPrefixCls2, theme);
   if (canUseDom()) {
     updateCSS(style2, `${dynamicStyleMark}-dynamic-theme`);
   } else {
@@ -8375,7 +8302,7 @@ function genStyleUtils(config) {
     };
     return function(prefixCls) {
       var rootCls = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : prefixCls;
-      var _useToken3 = useToken2(), theme2 = _useToken3.theme, realToken = _useToken3.realToken, hashId = _useToken3.hashId, token2 = _useToken3.token, cssVar = _useToken3.cssVar;
+      var _useToken3 = useToken2(), theme = _useToken3.theme, realToken = _useToken3.realToken, hashId = _useToken3.hashId, token2 = _useToken3.token, cssVar = _useToken3.cssVar;
       var _usePrefix = usePrefix(), rootPrefixCls = _usePrefix.rootPrefixCls, iconPrefixCls = _usePrefix.iconPrefixCls;
       var csp = useCSP();
       var type4 = cssVar ? "css" : "js";
@@ -8391,7 +8318,7 @@ function genStyleUtils(config) {
       }, [type4, component, cssVar === null || cssVar === void 0 ? void 0 : cssVar.prefix]);
       var _genMaxMin = genMaxMin(type4), max2 = _genMaxMin.max, min2 = _genMaxMin.min;
       var sharedConfig = {
-        theme: theme2,
+        theme,
         token: token2,
         hashId,
         nonce: function nonce() {
@@ -8731,8 +8658,8 @@ const preserve = {
   screenXXL: true,
   screenXXLMin: true
 };
-const getComputedToken2 = (originToken, overrideToken, theme2) => {
-  const derivativeToken = theme2.getDerivativeToken(originToken);
+const getComputedToken2 = (originToken, overrideToken, theme) => {
+  const derivativeToken = theme.getDerivativeToken(originToken);
   const {
     override
   } = overrideToken, components = __rest$f(overrideToken, ["override"]);
@@ -8760,12 +8687,12 @@ function useToken() {
   const {
     token: rootDesignToken,
     hashed,
-    theme: theme2,
+    theme,
     override,
     cssVar
   } = React__default.useContext(DesignTokenContext);
   const salt = `${version$1}-${hashed || ""}`;
-  const mergedTheme = theme2 || defaultTheme;
+  const mergedTheme = theme || defaultTheme$1;
   const [token2, hashId, realToken] = useCacheToken(mergedTheme, [seedToken, rootDesignToken], {
     salt,
     override,
@@ -8919,9 +8846,9 @@ const {
     };
   },
   useToken: () => {
-    const [theme2, realToken, hashId, token2, cssVar] = useToken();
+    const [theme, realToken, hashId, token2, cssVar] = useToken();
     return {
-      theme: theme2,
+      theme,
       realToken,
       hashId,
       token: token2,
@@ -8945,7 +8872,7 @@ const {
   getCompUnitless: () => unitless
 });
 const useResetIconStyle = (iconPrefixCls, csp) => {
-  const [theme2, token2] = useToken();
+  const [theme, token2] = useToken();
   return useStyleRegister({
     token: token2,
     hashId: "",
@@ -8962,10 +8889,10 @@ const {
 } = fullClone$1;
 const useEmptyId = () => "";
 const useThemeKey = typeof useId$2 === "undefined" ? useEmptyId : useId$2;
-function useTheme(theme2, parentTheme, config) {
+function useTheme(theme, parentTheme, config) {
   var _a, _b;
   const warning3 = devUseWarning("ConfigProvider");
-  const themeConfig = theme2 || {};
+  const themeConfig = theme || {};
   const parentThemeConfig = themeConfig.inherit === false || !parentTheme ? Object.assign(Object.assign({}, defaultConfig), {
     hashed: (_a = parentTheme === null || parentTheme === void 0 ? void 0 : parentTheme.hashed) !== null && _a !== void 0 ? _a : defaultConfig.hashed,
     cssVar: parentTheme === null || parentTheme === void 0 ? void 0 : parentTheme.cssVar
@@ -8978,12 +8905,12 @@ function useTheme(theme2, parentTheme, config) {
   }
   return useMemo(() => {
     var _a2, _b2;
-    if (!theme2) {
+    if (!theme) {
       return parentTheme;
     }
     const mergedComponents = Object.assign({}, parentThemeConfig.components);
-    Object.keys(theme2.components || {}).forEach((componentName) => {
-      mergedComponents[componentName] = Object.assign(Object.assign({}, mergedComponents[componentName]), theme2.components[componentName]);
+    Object.keys(theme.components || {}).forEach((componentName) => {
+      mergedComponents[componentName] = Object.assign(Object.assign({}, mergedComponents[componentName]), theme.components[componentName]);
     });
     const cssVarKey = `css-var-${themeKey.replace(/:/g, "")}`;
     const mergedCssVar = ((_a2 = themeConfig.cssVar) !== null && _a2 !== void 0 ? _a2 : parentThemeConfig.cssVar) && Object.assign(Object.assign(Object.assign({
@@ -9685,23 +9612,23 @@ let globalPrefixCls;
 function getGlobalPrefixCls() {
   return globalPrefixCls || defaultPrefixCls;
 }
-function isLegacyTheme(theme2) {
-  return Object.keys(theme2).some((key) => key.endsWith("Color"));
+function isLegacyTheme(theme) {
+  return Object.keys(theme).some((key) => key.endsWith("Color"));
 }
 const setGlobalConfig = (props) => {
   const {
     prefixCls,
     iconPrefixCls,
-    theme: theme2,
+    theme,
     holderRender
   } = props;
   if (prefixCls !== void 0) {
     globalPrefixCls = prefixCls;
   }
-  if (theme2) {
-    if (isLegacyTheme(theme2)) {
+  if (theme) {
+    if (isLegacyTheme(theme)) {
       process.env.NODE_ENV !== "production" ? warning$2(false, "ConfigProvider", "`config` of css variable theme is not work in v5. Please use new `theme` config instead.") : void 0;
-      registerTheme(getGlobalPrefixCls(), theme2);
+      registerTheme(getGlobalPrefixCls(), theme);
     }
   }
 };
@@ -9725,7 +9652,7 @@ const ProviderChildren = (props) => {
     legacyLocale,
     parentContext,
     iconPrefixCls: customIconPrefixCls,
-    theme: theme2,
+    theme,
     componentDisabled,
     segmented,
     statistic: statistic2,
@@ -9801,7 +9728,7 @@ const ProviderChildren = (props) => {
   const iconPrefixCls = customIconPrefixCls || parentContext.iconPrefixCls || defaultIconPrefixCls;
   const csp = customCsp || parentContext.csp;
   useResetIconStyle(iconPrefixCls, csp);
-  const mergedTheme = useTheme(theme2, parentContext.theme, {
+  const mergedTheme = useTheme(theme, parentContext.theme, {
     prefixCls: getPrefixCls("")
   });
   if (process.env.NODE_ENV !== "production") {
@@ -9953,7 +9880,7 @@ const ProviderChildren = (props) => {
       components,
       cssVar
     } = _a, rest = __rest$e(_a, ["algorithm", "token", "components", "cssVar"]);
-    const themeObj = algorithm && (!Array.isArray(algorithm) || algorithm.length > 0) ? createTheme(algorithm) : defaultTheme;
+    const themeObj = algorithm && (!Array.isArray(algorithm) || algorithm.length > 0) ? createTheme(algorithm) : defaultTheme$1;
     const parsedComponents = {};
     Object.entries(components || {}).forEach(([componentName, componentToken]) => {
       const parsedToken = Object.assign({}, componentToken);
@@ -9978,7 +9905,7 @@ const ProviderChildren = (props) => {
       cssVar
     });
   }, [mergedTheme]);
-  if (theme2) {
+  if (theme) {
     childNode = /* @__PURE__ */ React.createElement(DesignTokenContext.Provider, {
       value: memoTheme
     }, childNode);
@@ -27400,7 +27327,7 @@ var __spreadValues$6 = (a, b) => {
 };
 var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
 const TextListRender = (props) => {
-  const theme2 = useTheme$1();
+  const theme = useTheme$1();
   const { scale } = useResponsive();
   const { executeActions } = useAction$1();
   const { ref: ref2, onClick, onMouseEnter, onMouseLeave } = useForEditor(props);
@@ -27436,17 +27363,17 @@ const TextListRender = (props) => {
                 display: "flex",
                 flexDirection: "row",
                 alignItems: "flex-start",
-                marginBottom: idx === items.length - 1 ? 0 : runStyle(theme2.space["spacing-xs"], scale)
+                marginBottom: idx === items.length - 1 ? 0 : runStyle(theme.space["spacing-xs"], scale)
               },
               children: [
                 /* @__PURE__ */ jsx(
                   "span",
                   {
                     style: {
-                      color: theme2.color["color-textSecondary"],
-                      fontSize: theme2.fontSize["text-md"],
+                      color: theme.color["color-textSecondary"],
+                      fontSize: theme.fontSize["text-md"],
                       lineHeight: 1.6,
-                      marginRight: runStyle(theme2.space["spacing-xs"], scale),
+                      marginRight: runStyle(theme.space["spacing-xs"], scale),
                       minWidth: "1.5em",
                       textAlign: "right"
                     },
@@ -27457,8 +27384,8 @@ const TextListRender = (props) => {
                   "span",
                   {
                     style: {
-                      color: theme2.color["color-textPrimary"],
-                      fontSize: theme2.fontSize["text-md"],
+                      color: theme.color["color-textPrimary"],
+                      fontSize: theme.fontSize["text-md"],
                       lineHeight: 1.6
                     },
                     children: it.text
@@ -27469,7 +27396,7 @@ const TextListRender = (props) => {
             idx
           );
         }),
-        props.children ? /* @__PURE__ */ jsx("div", { style: { marginTop: runStyle(theme2.space["spacing-sm"], scale) }, children: props.children }) : null
+        props.children ? /* @__PURE__ */ jsx("div", { style: { marginTop: runStyle(theme.space["spacing-sm"], scale) }, children: props.children }) : null
       ]
     })
   );
@@ -27574,7 +27501,7 @@ const DividerRender = (props) => {
   var _a;
   const { scale } = useResponsive();
   const { executeActions } = useAction$1();
-  const theme2 = useTheme$1();
+  const theme = useTheme$1();
   const handleClick = () => {
     if (props == null ? void 0 : props.actions) {
       void executeActions(props.actions);
@@ -27583,7 +27510,7 @@ const DividerRender = (props) => {
   const style2 = __spreadValues$4({
     width: "100%",
     height: props.height ? runStyle(props.height, scale) : "1px",
-    backgroundColor: props.color ? ((_a = theme2.color) == null ? void 0 : _a[props.color]) || props.color : "#eeeeee",
+    backgroundColor: props.color ? ((_a = theme.color) == null ? void 0 : _a[props.color]) || props.color : "#eeeeee",
     margin: "8px 0"
   }, props.style || {});
   return /* @__PURE__ */ jsx("div", { style: style2, onClick: handleClick });
@@ -27758,7 +27685,7 @@ var __spreadValues$2 = (a, b) => {
 };
 var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
 const MessageContainer = (props) => {
-  const { component, dataSources, theme: theme2, onAction } = props;
+  const { component, dataSources, theme, onAction } = props;
   const { template, referenceComponentList, data } = component;
   const { editorMode: editorMode2 } = useForEditor({});
   const [values, setValues] = useState({});
@@ -27857,8 +27784,8 @@ const MessageContainer = (props) => {
       ] })
     }
   );
-  if (theme2) {
-    return /* @__PURE__ */ jsx(ThemeProvider, { theme: theme2, children: content });
+  if (theme) {
+    return /* @__PURE__ */ jsx(ThemeProvider, { theme, children: content });
   }
   return content;
 };
@@ -30823,7 +30750,7 @@ var objectInspect = function inspect_(obj, options, depth, seen) {
     var ys = arrObjKeys(obj, inspect2);
     var isPlainObject2 = gPO ? gPO(obj) === Object.prototype : obj instanceof Object || obj.constructor === Object;
     var protoTag = obj instanceof Object ? "" : "null prototype";
-    var stringTag = !isPlainObject2 && toStringTag && Object(obj) === obj && toStringTag in obj ? $slice.call(toStr$1(obj), 8, -1) : protoTag ? "Object" : "";
+    var stringTag = !isPlainObject2 && toStringTag && Object(obj) === obj && toStringTag in obj ? $slice.call(toStr(obj), 8, -1) : protoTag ? "Object" : "";
     var constructorTag = isPlainObject2 || typeof obj.constructor !== "function" ? "" : obj.constructor.name ? obj.constructor.name + " " : "";
     var tag = constructorTag + (stringTag || protoTag ? "[" + $join.call($concat$1.call([], stringTag || [], protoTag || []), ": ") + "] " : "");
     if (ys.length === 0) {
@@ -30848,25 +30775,25 @@ function canTrustToString(obj) {
   return !toStringTag || !(typeof obj === "object" && (toStringTag in obj || typeof obj[toStringTag] !== "undefined"));
 }
 function isArray$3(obj) {
-  return toStr$1(obj) === "[object Array]" && canTrustToString(obj);
+  return toStr(obj) === "[object Array]" && canTrustToString(obj);
 }
 function isDate(obj) {
-  return toStr$1(obj) === "[object Date]" && canTrustToString(obj);
+  return toStr(obj) === "[object Date]" && canTrustToString(obj);
 }
 function isRegExp$1(obj) {
-  return toStr$1(obj) === "[object RegExp]" && canTrustToString(obj);
+  return toStr(obj) === "[object RegExp]" && canTrustToString(obj);
 }
 function isError(obj) {
-  return toStr$1(obj) === "[object Error]" && canTrustToString(obj);
+  return toStr(obj) === "[object Error]" && canTrustToString(obj);
 }
 function isString(obj) {
-  return toStr$1(obj) === "[object String]" && canTrustToString(obj);
+  return toStr(obj) === "[object String]" && canTrustToString(obj);
 }
 function isNumber(obj) {
-  return toStr$1(obj) === "[object Number]" && canTrustToString(obj);
+  return toStr(obj) === "[object Number]" && canTrustToString(obj);
 }
 function isBoolean(obj) {
-  return toStr$1(obj) === "[object Boolean]" && canTrustToString(obj);
+  return toStr(obj) === "[object Boolean]" && canTrustToString(obj);
 }
 function isSymbol(obj) {
   if (hasShammedSymbols) {
@@ -30902,7 +30829,7 @@ var hasOwn$1 = Object.prototype.hasOwnProperty || function(key) {
 function has$3(obj, key) {
   return hasOwn$1.call(obj, key);
 }
-function toStr$1(obj) {
+function toStr(obj) {
   return objectToString.call(obj);
 }
 function nameOf(f) {
@@ -31211,7 +31138,7 @@ var syntax = SyntaxError;
 var uri = URIError;
 var abs$1 = Math.abs;
 var floor$1 = Math.floor;
-var max$2 = Math.max;
+var max$1 = Math.max;
 var min$1 = Math.min;
 var pow$1 = Math.pow;
 var round$1 = Math.round;
@@ -31340,78 +31267,99 @@ function requireObject_getPrototypeOf() {
   Object_getPrototypeOf = $Object2.getPrototypeOf || null;
   return Object_getPrototypeOf;
 }
-var ERROR_MESSAGE = "Function.prototype.bind called on incompatible ";
-var toStr = Object.prototype.toString;
-var max$1 = Math.max;
-var funcType = "[object Function]";
-var concatty = function concatty2(a, b) {
-  var arr = [];
-  for (var i = 0; i < a.length; i += 1) {
-    arr[i] = a[i];
-  }
-  for (var j2 = 0; j2 < b.length; j2 += 1) {
-    arr[j2 + a.length] = b[j2];
-  }
-  return arr;
-};
-var slicy = function slicy2(arrLike, offset) {
-  var arr = [];
-  for (var i = offset, j2 = 0; i < arrLike.length; i += 1, j2 += 1) {
-    arr[j2] = arrLike[i];
-  }
-  return arr;
-};
-var joiny = function(arr, joiner) {
-  var str = "";
-  for (var i = 0; i < arr.length; i += 1) {
-    str += arr[i];
-    if (i + 1 < arr.length) {
-      str += joiner;
+var implementation;
+var hasRequiredImplementation;
+function requireImplementation() {
+  if (hasRequiredImplementation) return implementation;
+  hasRequiredImplementation = 1;
+  var ERROR_MESSAGE = "Function.prototype.bind called on incompatible ";
+  var toStr2 = Object.prototype.toString;
+  var max2 = Math.max;
+  var funcType = "[object Function]";
+  var concatty = function concatty2(a, b) {
+    var arr = [];
+    for (var i = 0; i < a.length; i += 1) {
+      arr[i] = a[i];
     }
-  }
-  return str;
-};
-var implementation$1 = function bind(that) {
-  var target = this;
-  if (typeof target !== "function" || toStr.apply(target) !== funcType) {
-    throw new TypeError(ERROR_MESSAGE + target);
-  }
-  var args = slicy(arguments, 1);
-  var bound;
-  var binder = function() {
-    if (this instanceof bound) {
-      var result = target.apply(
-        this,
-        concatty(args, arguments)
-      );
-      if (Object(result) === result) {
-        return result;
+    for (var j2 = 0; j2 < b.length; j2 += 1) {
+      arr[j2 + a.length] = b[j2];
+    }
+    return arr;
+  };
+  var slicy = function slicy2(arrLike, offset) {
+    var arr = [];
+    for (var i = offset, j2 = 0; i < arrLike.length; i += 1, j2 += 1) {
+      arr[j2] = arrLike[i];
+    }
+    return arr;
+  };
+  var joiny = function(arr, joiner) {
+    var str = "";
+    for (var i = 0; i < arr.length; i += 1) {
+      str += arr[i];
+      if (i + 1 < arr.length) {
+        str += joiner;
       }
-      return this;
     }
-    return target.apply(
-      that,
-      concatty(args, arguments)
-    );
+    return str;
   };
-  var boundLength = max$1(0, target.length - args.length);
-  var boundArgs = [];
-  for (var i = 0; i < boundLength; i++) {
-    boundArgs[i] = "$" + i;
-  }
-  bound = Function("binder", "return function (" + joiny(boundArgs, ",") + "){ return binder.apply(this,arguments); }")(binder);
-  if (target.prototype) {
-    var Empty2 = function Empty3() {
+  implementation = function bind2(that) {
+    var target = this;
+    if (typeof target !== "function" || toStr2.apply(target) !== funcType) {
+      throw new TypeError(ERROR_MESSAGE + target);
+    }
+    var args = slicy(arguments, 1);
+    var bound;
+    var binder = function() {
+      if (this instanceof bound) {
+        var result = target.apply(
+          this,
+          concatty(args, arguments)
+        );
+        if (Object(result) === result) {
+          return result;
+        }
+        return this;
+      }
+      return target.apply(
+        that,
+        concatty(args, arguments)
+      );
     };
-    Empty2.prototype = target.prototype;
-    bound.prototype = new Empty2();
-    Empty2.prototype = null;
-  }
-  return bound;
-};
-var implementation = implementation$1;
-var functionBind = Function.prototype.bind || implementation;
-var functionCall = Function.prototype.call;
+    var boundLength = max2(0, target.length - args.length);
+    var boundArgs = [];
+    for (var i = 0; i < boundLength; i++) {
+      boundArgs[i] = "$" + i;
+    }
+    bound = Function("binder", "return function (" + joiny(boundArgs, ",") + "){ return binder.apply(this,arguments); }")(binder);
+    if (target.prototype) {
+      var Empty2 = function Empty3() {
+      };
+      Empty2.prototype = target.prototype;
+      bound.prototype = new Empty2();
+      Empty2.prototype = null;
+    }
+    return bound;
+  };
+  return implementation;
+}
+var functionBind;
+var hasRequiredFunctionBind;
+function requireFunctionBind() {
+  if (hasRequiredFunctionBind) return functionBind;
+  hasRequiredFunctionBind = 1;
+  var implementation2 = requireImplementation();
+  functionBind = Function.prototype.bind || implementation2;
+  return functionBind;
+}
+var functionCall;
+var hasRequiredFunctionCall;
+function requireFunctionCall() {
+  if (hasRequiredFunctionCall) return functionCall;
+  hasRequiredFunctionCall = 1;
+  functionCall = Function.prototype.call;
+  return functionCall;
+}
 var functionApply;
 var hasRequiredFunctionApply;
 function requireFunctionApply() {
@@ -31421,14 +31369,14 @@ function requireFunctionApply() {
   return functionApply;
 }
 var reflectApply = typeof Reflect !== "undefined" && Reflect && Reflect.apply;
-var bind$2 = functionBind;
+var bind$2 = requireFunctionBind();
 var $apply$1 = requireFunctionApply();
-var $call$2 = functionCall;
+var $call$2 = requireFunctionCall();
 var $reflectApply = reflectApply;
 var actualApply = $reflectApply || bind$2.call($call$2, $apply$1);
-var bind$1 = functionBind;
+var bind$1 = requireFunctionBind();
 var $TypeError$4 = type3;
-var $call$1 = functionCall;
+var $call$1 = requireFunctionCall();
 var $actualApply = actualApply;
 var callBindApplyHelpers = function callBindBasic(args) {
   if (args.length < 1 || typeof args[0] !== "function") {
@@ -31494,8 +31442,8 @@ function requireHasown() {
   hasRequiredHasown = 1;
   var call2 = Function.prototype.call;
   var $hasOwn = Object.prototype.hasOwnProperty;
-  var bind3 = functionBind;
-  hasown = bind3.call(call2, $hasOwn);
+  var bind2 = requireFunctionBind();
+  hasown = bind2.call(call2, $hasOwn);
   return hasown;
 }
 var undefined$1;
@@ -31509,7 +31457,7 @@ var $TypeError$3 = type3;
 var $URIError = uri;
 var abs = abs$1;
 var floor = floor$1;
-var max = max$2;
+var max = max$1;
 var min = min$1;
 var pow = pow$1;
 var round = round$1;
@@ -31543,7 +31491,7 @@ var getProto = requireGetProto();
 var $ObjectGPO = requireObject_getPrototypeOf();
 var $ReflectGPO = requireReflect_getPrototypeOf();
 var $apply = requireFunctionApply();
-var $call = functionCall;
+var $call = requireFunctionCall();
 var needsEval = {};
 var TypedArray = typeof Uint8Array === "undefined" || !getProto ? undefined$1 : getProto(Uint8Array);
 var INTRINSICS = {
@@ -31714,13 +31662,13 @@ var LEGACY_ALIASES = {
   "%WeakMapPrototype%": ["WeakMap", "prototype"],
   "%WeakSetPrototype%": ["WeakSet", "prototype"]
 };
-var bind2 = functionBind;
+var bind = requireFunctionBind();
 var hasOwn = requireHasown();
-var $concat = bind2.call($call, Array.prototype.concat);
-var $spliceApply = bind2.call($apply, Array.prototype.splice);
-var $replace = bind2.call($call, String.prototype.replace);
-var $strSlice = bind2.call($call, String.prototype.slice);
-var $exec = bind2.call($call, RegExp.prototype.exec);
+var $concat = bind.call($call, Array.prototype.concat);
+var $spliceApply = bind.call($apply, Array.prototype.splice);
+var $replace = bind.call($call, String.prototype.replace);
+var $strSlice = bind.call($call, String.prototype.slice);
+var $exec = bind.call($call, RegExp.prototype.exec);
 var rePropName = /[^%.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|%$))/g;
 var reEscapeChar = /\\(\\)?/g;
 var stringToPath = function stringToPath2(string3) {
@@ -33721,7 +33669,8 @@ const useMessageCardLogic = (props) => {
     templateData: directTemplateData,
     cardId: directCardId,
     osName,
-    isDev
+    isDev,
+    theme = {}
   } = props;
   const rawTemplateJson = directTemplateJson || ((_a = floor2 == null ? void 0 : floor2.cfg) == null ? void 0 : _a.templateJson);
   const rawTemplateData = directTemplateData || ((_b = floor2 == null ? void 0 : floor2.cfg) == null ? void 0 : _b.templateData);
@@ -33771,7 +33720,8 @@ const useMessageCardLogic = (props) => {
     Render,
     routerParams,
     storageData,
-    configData
+    configData,
+    theme
   };
 };
 var __defProp = Object.defineProperty;
@@ -33793,7 +33743,7 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-const MessageCard = (props, ref2) => {
+const MessageCard = (props) => {
   const { floor: floor2, label, width = 375 } = props;
   const responsiveValue = useMemo$1(() => {
     return {
@@ -33807,45 +33757,85 @@ const MessageCard = (props, ref2) => {
     Render,
     routerParams,
     storageData,
-    configData
+    configData,
+    theme
   } = useMessageCardLogic(props);
-  return /* @__PURE__ */ jsx(ResponsiveContext.Provider, { value: responsiveValue, children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: "message-card-wrapper",
-      style: floor2 == null ? void 0 : floor2.style,
-      id: label,
-      ref: ref2,
-      children: /* @__PURE__ */ jsx(
-        Render,
-        __spreadValues({
-          component: __spreadProps(__spreadValues({}, templateJson), {
-            data: __spreadProps(__spreadValues(__spreadValues({
-              metadata: props.metadata,
-              message: props.message,
-              latest: props == null ? void 0 : props.latest,
-              routerParams,
-              storageData,
-              configData
-            }, templateData), props.data), {
-              initProps: props
-            })
-          }),
-          theme,
-          onAction: (payload) => {
-            console.info("onAction", payload);
-          }
-        }, props)
-      )
-    }
-  ) });
+  return /* @__PURE__ */ jsx(ResponsiveContext.Provider, { value: responsiveValue, children: /* @__PURE__ */ jsx("div", { className: "message-card-wrapper", style: floor2 == null ? void 0 : floor2.style, id: label, children: /* @__PURE__ */ jsx(
+    Render,
+    __spreadValues({
+      component: __spreadProps(__spreadValues({}, templateJson), {
+        data: __spreadProps(__spreadValues(__spreadValues({
+          metadata: props.metadata,
+          message: props.message,
+          latest: props == null ? void 0 : props.latest,
+          routerParams,
+          storageData,
+          configData
+        }, templateData), props.data), {
+          initProps: props
+        })
+      }),
+      theme,
+      onAction: (payload) => {
+        console.info("onAction", payload);
+      }
+    }, props)
+  ) }) });
 };
 const MessageCard_default = forwardRef(MessageCard);
+const defaultTheme = {
+  fontSize: {
+    FontSizes_JDH_Headline1: 46,
+    FontSizes_JDH_Headline2: 34,
+    FontSizes_JDH_Title: 30,
+    FontSizes_JDH_Text: 28,
+    FontSizes_JDH_AccentText: 24,
+    FontSizes_JDH_TagText: 20
+  },
+  color: {
+    Color_JDH_Primary: "#17CB8E",
+    Color_JDH_Accent1: "#FF8000",
+    Color_JDH_Accent2: "#73B0FF",
+    Color_JDH_Red_Danger: "#FF0F23",
+    Color_JDH_Red_Price: "#FF0F23",
+    Color_JDH_Red_Discount: "#FF0F23",
+    Color_JDH_Green_Success: "#67CC52",
+    Color_JDH_Gray_Headline: "#222222",
+    Color_JDH_Gray_Text: "#222222",
+    Color_JDH_Gray_SecondText: "#575859",
+    Color_JDH_Gray_AccentText: "#858687",
+    Color_JDH_Gray_DividingLine: "#D3D3D3",
+    Color_JDH_Gray_Background: "#F5F5F6",
+    Color_JDH_Gray_CardBackground: "#E5E9EB",
+    Color_JDH_Gray_Card: "#FFFFFF",
+    Color_JDH_Gray_Mask: "#00000080"
+  },
+  fontWeight: {
+    FontWeight_JDH_Normal: 400,
+    FontWeight_JDH_Medium: 500
+  },
+  space: {
+    "spacing-xs": 4,
+    "spacing-sm": 8,
+    "spacing-md": 16,
+    "spacing-lg": 20,
+    "spacing-xl": 24,
+    "spacing-xxl": 32
+  },
+  borderRadius: {
+    Radius_JDH_LargeExtra: 32,
+    Radius_JDH_Large: 24,
+    Radius_JDH_Medium: 16,
+    Radius_JDH_Small: 8,
+    Radius_JDH_Mini: 6
+  },
+  components: {}
+};
 export {
   MessageCard_default as MessageCard,
   ThemeProvider,
   MessageCard_default as default,
-  defaultTheme$1 as defaultTheme,
+  defaultTheme,
   isLayoutNode,
   isRenderNode,
   useTheme$1 as useTheme