@fangxinyan/lumina 0.6.18 → 0.7.0

package/dist/{chunk-3VSHGM54.js → chunk-OLYSSZHP.js}

@@ -1,18 +1,25 @@
-import { Slider } from './chunk-D7GK6H6V.js';
-import { pickLuminaThemePresets } from './chunk-6SPMHY54.js';
-import { useTheme, ACCENT_PRESETS, FONT_STACKS } from './chunk-GNV6W4BN.js';
-import { Switch } from './chunk-PU7VXDAS.js';
-import { RadioGroup } from './chunk-KYV75JPQ.js';
-import { ColorPicker } from './chunk-TJECLLN4.js';
-import { Input } from './chunk-IOAOG5L7.js';
-import { Button } from './chunk-IPSNC5VZ.js';
-import { Icon } from './chunk-FDZG27IG.js';
-import './tokens-RYJ3DFTU.css';
+import { Slider } from './chunk-K5HGHOG7.js';
+import { pickLuminaThemePresets } from './chunk-TSL3F2K3.js';
+import { Switch } from './chunk-LEDESWNL.js';
+import { RadioGroup } from './chunk-QDY56GGO.js';
+import { ColorPicker } from './chunk-FY73C7JK.js';
+import { Input } from './chunk-UE4HFGJ6.js';
+import { Button } from './chunk-JHM7MN3G.js';
+import { Icon } from './chunk-LQMOYVQF.js';
+import { withInternalComponentThemePart, withComponentTheme } from './chunk-DRDDQCDD.js';
+import { useTheme, ACCENT_PRESETS, mergeComponentThemeOverrides, FONT_STACKS } from './chunk-ULTDRMGN.js';
+import './tokens-CEJVVA3G.css';
 import './shared-NJHRNLRH.css';
-import './ThemePanel-TEHB2JCQ.css';
+import './ThemePanel-EHNAS4RN.css';
 import * as React from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
+var Button2 = withInternalComponentThemePart(Button, "Button");
+var ColorPicker2 = withInternalComponentThemePart(ColorPicker, "ColorPicker");
+var Input2 = withInternalComponentThemePart(Input, "Input");
+var RadioGroup2 = withInternalComponentThemePart(RadioGroup, ["RadioGroup", "Radio"]);
+var Slider2 = withInternalComponentThemePart(Slider, "Slider");
+var Switch2 = withInternalComponentThemePart(Switch, "Switch");
 var THEME_PANEL_DEFAULT_THEME_PRESETS = pickLuminaThemePresets(["light", "dark", "porcelain", "assistant", "assistantDark"]);
 var THEME_PANEL_DEFAULT_PRESET_OPTIONS = [
   { key: "light", label: "\u6D45\u8272", description: "\u9ED8\u8BA4", preset: THEME_PANEL_DEFAULT_THEME_PRESETS.light },
@@ -310,7 +317,7 @@ function parseScaleToken(value, fallback = 1, range = THEME_PANEL_RANGES.shadowS
 function formatScaleToken(value) {
   return value.toFixed(2).replace(/\.?0+$/, "");
 }
-var ThemePanel = React.forwardRef(
+var ThemePanelBase = React.forwardRef(
   ({
     title = "\u4E3B\u9898",
     description = "\u5FEB\u901F\u8C03\u6574\u5F53\u524D Lumina \u4E3B\u9898",
@@ -365,6 +372,7 @@ var ThemePanel = React.forwardRef(
     const [draftIntensity, setDraftIntensity] = React.useState(5);
     const [draftRadius, setDraftRadius] = React.useState(20);
     const [draftFont, setDraftFont] = React.useState("sf");
+    const [draftComponents, setDraftComponents] = React.useState({});
     const [createMode, setCreateMode] = React.useState("simple");
     const [advancedFontMode, setAdvancedFontMode] = React.useState("preset");
     const [liveAdvancedFontMode, setLiveAdvancedFontMode] = React.useState("preset");
@@ -396,9 +404,19 @@ var ThemePanel = React.forwardRef(
         intensity: draftIntensity,
         radius: draftRadius,
         font: draftFont,
-        tokens: draftTokens
+        tokens: draftTokens,
+        components: draftComponents
       }),
-      [draftAccentPalette, draftBase, draftDensity, draftFont, draftIntensity, draftRadius, draftTokens]
+      [
+        draftAccentPalette,
+        draftBase,
+        draftDensity,
+        draftFont,
+        draftIntensity,
+        draftRadius,
+        draftTokens,
+        draftComponents
+      ]
     );
     const resolvedPresetOptions = React.useMemo(() => {
       if (presetOptions) return presetOptions;
@@ -434,12 +452,15 @@ var ThemePanel = React.forwardRef(
       updateThemeRef.current({
         mode: DRAFT_THEME_MODE,
         colorScheme: draftPreset.base,
+        baseColor: draftPreset.baseColor,
         accent: draftPreset.accent,
         density: draftPreset.density,
         intensity: draftPreset.intensity,
         radius: draftPreset.radius,
         font: draftPreset.font,
-        tokens: draftPreset.tokens
+        colors: draftPreset.colors ?? {},
+        tokens: draftPreset.tokens,
+        components: draftPreset.components ?? {}
       });
     }, [draftPreset, isCreatingTheme, previewDraft]);
     const clearCreateState = () => {
@@ -463,7 +484,14 @@ var ThemePanel = React.forwardRef(
     const applyMode = (mode) => {
       clearCreateState();
       if (mode === "light" || mode === "dark" || mode === "system") {
-        theme.update({ mode, colorScheme: mode === "system" ? theme.colorScheme : mode, tokens: {} });
+        theme.update({
+          mode,
+          colorScheme: mode === "system" ? theme.colorScheme : mode,
+          baseColor: void 0,
+          colors: {},
+          tokens: {},
+          components: {}
+        });
         return;
       }
       theme.setMode(mode);
@@ -482,12 +510,15 @@ var ThemePanel = React.forwardRef(
         ...!isBuiltInMode ? { themes: { ...theme.themes, [key]: preset } } : null,
         mode: option.key,
         colorScheme: preset.base ?? theme.colorScheme,
+        baseColor: preset.baseColor,
         accent: preset.accent ?? fallbackAccent,
         density: preset.density ?? theme.density,
         intensity: preset.intensity ?? theme.intensity,
         radius: preset.radius ?? theme.radius,
         font: preset.font ?? theme.font,
-        tokens: preset.tokens ?? {}
+        colors: { ...preset.colors ?? {} },
+        tokens: preset.tokens ?? {},
+        components: mergeComponentThemeOverrides(void 0, preset.components)
       });
     };
     const deletePreset = (option) => {
@@ -502,12 +533,15 @@ var ThemePanel = React.forwardRef(
       const nextConfig = active ? {
         mode: nextBase,
         colorScheme: fallbackPreset.base,
+        baseColor: fallbackPreset.baseColor,
         accent: fallbackPreset.accent,
         density: fallbackPreset.density,
         intensity: fallbackPreset.intensity,
         radius: fallbackPreset.radius,
         font: fallbackPreset.font,
-        tokens: fallbackPreset.tokens
+        colors: { ...fallbackPreset.colors ?? {} },
+        tokens: fallbackPreset.tokens,
+        components: mergeComponentThemeOverrides(void 0, fallbackPreset.components)
       } : {};
       theme.update({
         ...nextConfig,
@@ -568,12 +602,15 @@ var ThemePanel = React.forwardRef(
       label: meta.label,
       description: meta.description,
       base: theme.colorScheme,
+      baseColor: theme.baseColor,
       accent: theme.accent === "custom" ? { ...theme.accentPalette } : theme.accent,
       density: theme.density,
       intensity: theme.intensity,
       radius: theme.radius,
       font: theme.font,
-      tokens: { ...tokens }
+      colors: { ...theme.colors },
+      tokens: { ...tokens },
+      components: mergeComponentThemeOverrides(void 0, theme.components)
     });
     const updateLiveBase = (base) => {
       clearCreateState();
@@ -610,12 +647,15 @@ var ThemePanel = React.forwardRef(
         themes: nextThemes,
         mode: key,
         colorScheme: preset.base,
+        baseColor: preset.baseColor,
         accent: preset.accent,
         density: preset.density,
         intensity: preset.intensity,
         radius: preset.radius,
         font: preset.font,
-        tokens: preset.tokens
+        colors: preset.colors ?? {},
+        tokens: preset.tokens,
+        components: preset.components ?? {}
       });
       setCreatedThemeMeta((current) => ({ ...current, [key]: meta }));
       onUpdateTheme?.({ ...meta, preset, previousPreset, presetOption });
@@ -636,12 +676,15 @@ var ThemePanel = React.forwardRef(
         themes: nextThemes,
         mode: key,
         colorScheme: preset.base,
+        baseColor: preset.baseColor,
         accent: preset.accent,
         density: preset.density,
         intensity: preset.intensity,
         radius: preset.radius,
         font: preset.font,
-        tokens: preset.tokens
+        colors: preset.colors ?? {},
+        tokens: preset.tokens,
+        components: preset.components ?? {}
       });
       onCreateTheme?.({ ...meta, preset, presetOption });
     };
@@ -657,12 +700,15 @@ var ThemePanel = React.forwardRef(
       const currentTokens = readCurrentThemeTokens(root, base);
       const currentPreset = {
         base,
+        baseColor: theme.baseColor,
         accent: accentPalette,
         density: theme.density,
         intensity: theme.intensity,
         radius: theme.radius,
         font: theme.font,
-        tokens: currentTokens
+        colors: { ...theme.colors },
+        tokens: currentTokens,
+        components: mergeComponentThemeOverrides(void 0, theme.components)
       };
       const basePresets = {
         light: base === "light" ? currentPreset : THEME_PANEL_DEFAULT_THEME_PRESETS.light,
@@ -671,12 +717,15 @@ var ThemePanel = React.forwardRef(
       previewSnapshotRef.current = {
         mode: theme.mode,
         colorScheme: theme.colorScheme,
+        baseColor: theme.baseColor,
         accent: theme.accent === "custom" ? theme.accentPalette : theme.accent,
         density: theme.density,
         intensity: theme.intensity,
         radius: theme.radius,
         font: theme.font,
+        colors: theme.colors,
         tokens: theme.tokens,
+        components: theme.components,
         themes: theme.themes
       };
       setDraftBasePresets(basePresets);
@@ -694,6 +743,7 @@ var ThemePanel = React.forwardRef(
       setDraftIntensity(theme.intensity);
       setDraftRadius(theme.radius);
       setDraftFont(theme.font ?? "sf");
+      setDraftComponents(mergeComponentThemeOverrides(void 0, theme.components));
       setAdvancedFontMode(toFontKey(theme.font) === theme.font ? "preset" : "custom");
       setCreateMode("simple");
       setCustomAccent(accent);
@@ -759,12 +809,15 @@ var ThemePanel = React.forwardRef(
         themes: nextThemes,
         mode: key,
         colorScheme: preset.base,
+        baseColor: preset.baseColor,
         accent: preset.accent,
         density: preset.density,
         intensity: preset.intensity,
         radius: preset.radius,
         font: preset.font,
-        tokens: preset.tokens
+        colors: preset.colors ?? {},
+        tokens: preset.tokens,
+        components: preset.components ?? {}
       });
       setCustomAccent(draftAccent);
       onCreateTheme?.({ ...meta, preset, presetOption });
@@ -806,7 +859,7 @@ var ThemePanel = React.forwardRef(
           /* @__PURE__ */ jsx("small", { children: fontMode === "preset" ? "\u9009\u62E9\u5185\u7F6E\u5B57\u4F53" : "\u586B\u5199 CSS font-family" })
         ] }),
         /* @__PURE__ */ jsx(
-          RadioGroup,
+          RadioGroup2,
           {
             className: "theme-panel-create-mode",
             variant: "segmented",
@@ -825,7 +878,7 @@ var ThemePanel = React.forwardRef(
         fontMode === "custom" && /* @__PURE__ */ jsxs("div", { className: "theme-panel-create-field", children: [
           /* @__PURE__ */ jsx("span", { children: "\u5B57\u4F53\u6808" }),
           /* @__PURE__ */ jsx(
-            Input,
+            Input2,
             {
               size: "sm",
               value: fontConfigToText(font),
@@ -850,7 +903,7 @@ var ThemePanel = React.forwardRef(
           ] }),
           /* @__PURE__ */ jsxs("span", { className: "theme-panel-token-input", children: [
             /* @__PURE__ */ jsx(
-              ColorPicker,
+              ColorPicker2,
               {
                 className: "theme-panel-token-picker",
                 value: tokenPickerValue(tokens[field.key], surfaceFallback),
@@ -861,7 +914,7 @@ var ThemePanel = React.forwardRef(
               }
             ),
             /* @__PURE__ */ jsx(
-              Input,
+              Input2,
               {
                 size: "sm",
                 value: tokens[field.key] ?? "",
@@ -887,7 +940,7 @@ var ThemePanel = React.forwardRef(
             ] }),
             /* @__PURE__ */ jsxs("span", { className: "theme-panel-token-input", children: [
               /* @__PURE__ */ jsx(
-                ColorPicker,
+                ColorPicker2,
                 {
                   className: "theme-panel-token-picker",
                   value: tokenPickerValue(tokens[field.key], surfaceFallback),
@@ -898,7 +951,7 @@ var ThemePanel = React.forwardRef(
                 }
               ),
               /* @__PURE__ */ jsx(
-                Input,
+                Input2,
                 {
                   size: "sm",
                   value: tokens[field.key] ?? "",
@@ -916,7 +969,7 @@ var ThemePanel = React.forwardRef(
             ] }),
             /* @__PURE__ */ jsxs("span", { className: "theme-panel-token-scale", children: [
               /* @__PURE__ */ jsx(
-                Input,
+                Input2,
                 {
                   size: "sm",
                   value: tokens[field.key] ?? "1",
@@ -924,7 +977,7 @@ var ThemePanel = React.forwardRef(
                 }
               ),
               /* @__PURE__ */ jsx(
-                Slider,
+                Slider2,
                 {
                   value: parseScaleToken(tokens[field.key], 1, getShadowScaleRange(field.key)),
                   onChange: (value) => onTokenChange(field.key, formatScaleToken(value)),
@@ -952,7 +1005,7 @@ var ThemePanel = React.forwardRef(
           ] }),
           /* @__PURE__ */ jsxs("span", { className: "theme-panel-token-input", children: [
             /* @__PURE__ */ jsx(
-              ColorPicker,
+              ColorPicker2,
               {
                 className: "theme-panel-token-picker",
                 value: tokenPickerValue(accentPalette[field.key], accentFallback),
@@ -963,7 +1016,7 @@ var ThemePanel = React.forwardRef(
               }
             ),
             /* @__PURE__ */ jsx(
-              Input,
+              Input2,
               {
                 size: "sm",
                 value: accentPalette[field.key],
@@ -988,7 +1041,7 @@ var ThemePanel = React.forwardRef(
           /* @__PURE__ */ jsx("span", { children: theme.colorScheme })
         ] }),
         /* @__PURE__ */ jsx(
-          RadioGroup,
+          RadioGroup2,
           {
             variant: "segmented",
             size: "sm",
@@ -1013,7 +1066,7 @@ var ThemePanel = React.forwardRef(
           const deletable = allowDeleteTheme && !protectedPresetKeys.has(key) && key in theme.themes;
           return /* @__PURE__ */ jsxs("div", { className: `theme-panel-preset-shell ${deletable ? "deletable" : ""}`, children: [
             /* @__PURE__ */ jsxs(
-              Button,
+              Button2,
               {
                 type: "button",
                 variant: "ghost",
@@ -1022,8 +1075,8 @@ var ThemePanel = React.forwardRef(
                 onClick: () => applyPreset(option),
                 children: [
                   /* @__PURE__ */ jsxs("span", { className: "theme-panel-preset-ink", "aria-hidden": true, children: [
-                    /* @__PURE__ */ jsx("span", { style: { background: preset?.tokens?.bg ?? "var(--bg)" } }),
-                    /* @__PURE__ */ jsx("span", { style: { background: preset?.tokens?.["bg-raised"] ?? "var(--bg-raised)" } }),
+                    /* @__PURE__ */ jsx("span", { style: { background: preset?.tokens?.bg ?? "var(--lmn-theme-panel-bg, var(--bg))" } }),
+                    /* @__PURE__ */ jsx("span", { style: { background: preset?.tokens?.["bg-raised"] ?? "var(--lmn-theme-panel-bg-raised, var(--bg-raised))" } }),
                     /* @__PURE__ */ jsx("span", { style: { background: accentFromPreset(preset) } })
                   ] }),
                   /* @__PURE__ */ jsxs("span", { className: "theme-panel-preset-copy", children: [
@@ -1034,7 +1087,7 @@ var ThemePanel = React.forwardRef(
               }
             ),
             deletable && /* @__PURE__ */ jsx(
-              Button,
+              Button2,
               {
                 type: "button",
                 variant: "danger",
@@ -1048,7 +1101,7 @@ var ThemePanel = React.forwardRef(
             )
           ] }, key);
         }) }),
-        allowCreateTheme && !isCreatingTheme && /* @__PURE__ */ jsx(Button, { type: "button", variant: "primary", size: "sm", icon: "plus", block: true, onClick: beginCreateTheme, children: "\u65B0\u5EFA\u4E3B\u9898" }),
+        allowCreateTheme && !isCreatingTheme && /* @__PURE__ */ jsx(Button2, { type: "button", variant: "primary", size: "sm", icon: "plus", block: true, onClick: beginCreateTheme, children: "\u65B0\u5EFA\u4E3B\u9898" }),
         allowCreateTheme && isCreatingTheme && /* @__PURE__ */ jsxs("div", { className: "theme-panel-create", children: [
           /* @__PURE__ */ jsxs("div", { className: "theme-panel-create-head", children: [
             /* @__PURE__ */ jsxs("div", { children: [
@@ -1056,7 +1109,7 @@ var ThemePanel = React.forwardRef(
               /* @__PURE__ */ jsx("small", { children: previewDraft ? "\u5B9E\u65F6\u9884\u89C8\u4E2D" : "\u9884\u89C8\u5DF2\u6682\u505C" })
             ] }),
             /* @__PURE__ */ jsx(
-              Switch,
+              Switch2,
               {
                 size: "sm",
                 checked: previewDraft,
@@ -1067,7 +1120,7 @@ var ThemePanel = React.forwardRef(
             )
           ] }),
           /* @__PURE__ */ jsx(
-            Input,
+            Input2,
             {
               size: "sm",
               value: draftName,
@@ -1078,7 +1131,7 @@ var ThemePanel = React.forwardRef(
             }
           ),
           /* @__PURE__ */ jsx(
-            RadioGroup,
+            RadioGroup2,
             {
               className: "theme-panel-create-mode",
               variant: "segmented",
@@ -1094,7 +1147,7 @@ var ThemePanel = React.forwardRef(
           /* @__PURE__ */ jsxs("div", { className: "theme-panel-create-field", children: [
             /* @__PURE__ */ jsx("span", { children: "\u57FA\u5E95" }),
             /* @__PURE__ */ jsx(
-              RadioGroup,
+              RadioGroup2,
               {
                 variant: "segmented",
                 size: "sm",
@@ -1110,11 +1163,11 @@ var ThemePanel = React.forwardRef(
           createMode === "simple" && /* @__PURE__ */ jsxs("div", { className: "theme-panel-create-grid", children: [
             /* @__PURE__ */ jsxs("div", { className: "theme-panel-create-field", children: [
               /* @__PURE__ */ jsx("span", { children: "\u8868\u9762" }),
-              /* @__PURE__ */ jsx(ColorPicker, { size: "sm", value: draftSurface, onChange: updateDraftSurface })
+              /* @__PURE__ */ jsx(ColorPicker2, { size: "sm", value: draftSurface, onChange: updateDraftSurface })
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "theme-panel-create-field", children: [
               /* @__PURE__ */ jsx("span", { children: "\u5F3A\u8C03" }),
-              /* @__PURE__ */ jsx(ColorPicker, { size: "sm", value: draftAccent, onChange: updateDraftAccent })
+              /* @__PURE__ */ jsx(ColorPicker2, { size: "sm", value: draftAccent, onChange: updateDraftAccent })
             ] })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "theme-panel-create-sliders", children: [
@@ -1123,7 +1176,7 @@ var ThemePanel = React.forwardRef(
               /* @__PURE__ */ jsx("span", { children: draftIntensity })
             ] }),
             /* @__PURE__ */ jsx(
-              Slider,
+              Slider2,
               {
                 value: draftIntensity,
                 onChange: setDraftIntensity,
@@ -1140,7 +1193,7 @@ var ThemePanel = React.forwardRef(
               ] })
             ] }),
             /* @__PURE__ */ jsx(
-              Slider,
+              Slider2,
               {
                 value: draftRadius,
                 onChange: setDraftRadius,
@@ -1153,7 +1206,7 @@ var ThemePanel = React.forwardRef(
           /* @__PURE__ */ jsxs("div", { className: "theme-panel-create-field", children: [
             /* @__PURE__ */ jsx("span", { children: "\u5BC6\u5EA6" }),
             /* @__PURE__ */ jsx(
-              RadioGroup,
+              RadioGroup2,
               {
                 variant: "segmented",
                 size: "sm",
@@ -1166,7 +1219,7 @@ var ThemePanel = React.forwardRef(
           /* @__PURE__ */ jsxs("div", { className: "theme-panel-create-field", children: [
             /* @__PURE__ */ jsx("span", { children: "\u5B57\u4F53" }),
             /* @__PURE__ */ jsx(
-              RadioGroup,
+              RadioGroup2,
               {
                 variant: "segmented",
                 size: "sm",
@@ -1213,9 +1266,9 @@ var ThemePanel = React.forwardRef(
             }
           ),
           /* @__PURE__ */ jsxs("div", { className: "theme-panel-create-actions", children: [
-            /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", icon: "x", onClick: cancelCreateTheme, children: "\u53D6\u6D88" }),
+            /* @__PURE__ */ jsx(Button2, { type: "button", variant: "ghost", size: "sm", icon: "x", onClick: cancelCreateTheme, children: "\u53D6\u6D88" }),
             /* @__PURE__ */ jsx(
-              Button,
+              Button2,
               {
                 type: "button",
                 variant: "primary",
@@ -1236,7 +1289,7 @@ var ThemePanel = React.forwardRef(
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "theme-panel-swatches", children: [
           Object.keys(ACCENT_PRESETS).map((key) => /* @__PURE__ */ jsx(
-            Button,
+            Button2,
             {
               type: "button",
               size: "sm",
@@ -1248,7 +1301,7 @@ var ThemePanel = React.forwardRef(
             key
           )),
           /* @__PURE__ */ jsx(
-            ColorPicker,
+            ColorPicker2,
             {
               size: "sm",
               value: customAccent,
@@ -1266,7 +1319,7 @@ var ThemePanel = React.forwardRef(
           /* @__PURE__ */ jsx("span", { children: theme.intensity })
         ] }),
         /* @__PURE__ */ jsx(
-          Slider,
+          Slider2,
           {
             value: theme.intensity,
             onChange: theme.setIntensity,
@@ -1283,7 +1336,7 @@ var ThemePanel = React.forwardRef(
           ] })
         ] }),
         /* @__PURE__ */ jsx(
-          Slider,
+          Slider2,
           {
             value: shadowScale,
             onChange: (value) => updateThemeToken("shadow-scale", formatScaleToken(value)),
@@ -1300,7 +1353,7 @@ var ThemePanel = React.forwardRef(
           ] })
         ] }),
         /* @__PURE__ */ jsx(
-          Slider,
+          Slider2,
           {
             value: shadowFloatScale,
             onChange: (value) => updateThemeToken("shadow-float-scale", formatScaleToken(value)),
@@ -1316,7 +1369,7 @@ var ThemePanel = React.forwardRef(
           /* @__PURE__ */ jsx("span", { children: theme.intensity })
         ] }),
         /* @__PURE__ */ jsx(
-          Slider,
+          Slider2,
           {
             value: theme.intensity,
             onChange: theme.setIntensity,
@@ -1335,7 +1388,7 @@ var ThemePanel = React.forwardRef(
           ] })
         ] }),
         /* @__PURE__ */ jsx(
-          Slider,
+          Slider2,
           {
             value: theme.radius,
             onChange: theme.setRadius,
@@ -1348,7 +1401,7 @@ var ThemePanel = React.forwardRef(
       sections.includes("font") && /* @__PURE__ */ jsxs("div", { className: "theme-panel-row", children: [
         /* @__PURE__ */ jsx("div", { className: "theme-panel-label", children: /* @__PURE__ */ jsx("span", { children: "\u5B57\u4F53" }) }),
         /* @__PURE__ */ jsx(
-          RadioGroup,
+          RadioGroup2,
           {
             variant: "segmented",
             size: "sm",
@@ -1361,7 +1414,7 @@ var ThemePanel = React.forwardRef(
       sections.includes("density") && /* @__PURE__ */ jsxs("div", { className: "theme-panel-row", children: [
         /* @__PURE__ */ jsx("div", { className: "theme-panel-label", children: /* @__PURE__ */ jsx("span", { children: "\u5BC6\u5EA6" }) }),
         /* @__PURE__ */ jsx(
-          RadioGroup,
+          RadioGroup2,
           {
             variant: "segmented",
             size: "sm",
@@ -1373,7 +1426,7 @@ var ThemePanel = React.forwardRef(
       ] }),
       sections.includes("advanced") && !isCreatingTheme && /* @__PURE__ */ jsxs("div", { className: "theme-panel-row theme-panel-advanced-row", children: [
         /* @__PURE__ */ jsx(
-          Button,
+          Button2,
           {
             type: "button",
             variant: "ghost",
@@ -1391,7 +1444,7 @@ var ThemePanel = React.forwardRef(
           /* @__PURE__ */ jsxs("div", { className: "theme-panel-create-field", children: [
             /* @__PURE__ */ jsx("span", { children: "\u57FA\u5E95" }),
             /* @__PURE__ */ jsx(
-              RadioGroup,
+              RadioGroup2,
               {
                 variant: "segmented",
                 size: "sm",
@@ -1423,7 +1476,7 @@ var ThemePanel = React.forwardRef(
             canSaveCurrentThemeAsNew && /* @__PURE__ */ jsxs("div", { className: "theme-panel-save-as-field", children: [
               /* @__PURE__ */ jsx("span", { children: isCurrentSavedTheme ? "\u4E3B\u9898\u540D" : "\u65B0\u4E3B\u9898\u540D" }),
               /* @__PURE__ */ jsx(
-                Input,
+                Input2,
                 {
                   size: "sm",
                   value: saveAsName,
@@ -1437,7 +1490,7 @@ var ThemePanel = React.forwardRef(
             canSaveCurrentThemeAsNew && /* @__PURE__ */ jsxs("div", { className: "theme-panel-save-as-field", children: [
               /* @__PURE__ */ jsx("span", { children: "\u526F\u6807\u9898" }),
               /* @__PURE__ */ jsx(
-                Input,
+                Input2,
                 {
                   size: "sm",
                   value: saveAsDescription,
@@ -1451,9 +1504,9 @@ var ThemePanel = React.forwardRef(
             /* @__PURE__ */ jsxs("div", { className: "theme-panel-advanced-footer", children: [
               /* @__PURE__ */ jsx("span", { children: isCurrentSavedTheme ? `\u5F53\u524D\u9884\u8BBE: ${getActiveThemeMeta().label}` : canSaveCurrentThemeAsNew ? "\u9ED8\u8BA4\u9884\u8BBE\u4F1A\u4FDD\u5B58\u4E3A\u65B0\u4E3B\u9898" : "\u5F53\u524D\u8C03\u6574\u4EC5\u8FD0\u884C\u65F6\u751F\u6548" }),
               /* @__PURE__ */ jsxs("div", { className: "theme-panel-advanced-buttons", children: [
-                canUpdateCurrentTheme && /* @__PURE__ */ jsx(Button, { type: "button", variant: "primary", size: "sm", icon: "check", onClick: saveCurrentThemeUpdate, children: "\u4FDD\u5B58\u4FEE\u6539" }),
+                canUpdateCurrentTheme && /* @__PURE__ */ jsx(Button2, { type: "button", variant: "primary", size: "sm", icon: "check", onClick: saveCurrentThemeUpdate, children: "\u4FDD\u5B58\u4FEE\u6539" }),
                 canSaveCurrentThemeAsNew && /* @__PURE__ */ jsx(
-                  Button,
+                  Button2,
                   {
                     type: "button",
                     variant: canUpdateCurrentTheme ? "ghost" : "primary",
@@ -1468,10 +1521,15 @@ var ThemePanel = React.forwardRef(
           ] })
         ] })
       ] }),
-      showReset && /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", icon: "reload", block: true, onClick: resetTheme, children: "\u91CD\u7F6E\u4E3B\u9898" })
+      showReset && /* @__PURE__ */ jsx(Button2, { type: "button", variant: "ghost", size: "sm", icon: "reload", block: true, onClick: resetTheme, children: "\u91CD\u7F6E\u4E3B\u9898" })
     ] });
   }
 );
-ThemePanel.displayName = "ThemePanel";
+ThemePanelBase.displayName = "ThemePanel";
+var ThemePanel = withComponentTheme(
+  ThemePanelBase,
+  "ThemePanel",
+  ["theme-panel", "button", "color-picker", "input", "radio", "slider", "switch"]
+);
 
 export { THEME_PANEL_DEFAULT_PRESET_OPTIONS, THEME_PANEL_DEFAULT_THEME_PRESETS, ThemePanel };