@module-federation/devtools 0.0.0-perf-devtools-20260107043700 → 0.0.0-perf-website-code-usage-20260914033703

package/dist/lib/component/DependencyGraph/index.js

@@ -1,4 +1,3 @@
-"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -53,6 +52,7 @@ var import_react = require("react");
 var import_reactflow = __toESM(require("reactflow"));
 var import_dagre = __toESM(require("dagre"));
 var import_web_react = require("@arco-design/web-react");
+var import_react_i18next = require("react-i18next");
 var import_graph = require("../../utils/sdk/graph");
 var import_DependencyGraphItem = __toESM(require("../DependencyGraphItem"));
 var import_utils = require("../../utils");
@@ -63,6 +63,7 @@ const nodeHeight = 420;
 const nodeTypes = { graphItem: import_DependencyGraphItem.default };
 const { Option } = import_web_react.Select;
 const Graph = (props) => {
+  const { t } = (0, import_react_i18next.useTranslation)();
   const [nodes, setNodes, onNodesChange] = (0, import_reactflow.useNodesState)([]);
   const [edges, setEdges, onEdgesChange] = (0, import_reactflow.useEdgesState)([]);
   const { snapshot } = props;
@@ -164,20 +165,20 @@ const Graph = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.depWrapper, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.header, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.titleBlock, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.title, children: "Dependency Graph" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.subtitle, children: "Visualise how consumers resolve remotes with the current overrides." })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.title, children: t("dependencyGraph.title") }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.subtitle, children: t("dependencyGraph.subtitle") })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.filterBlock, children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           import_web_react.Select,
           {
             showSearch: true,
-            placeholder: "Select Consumer",
+            placeholder: t("dependencyGraph.filters.consumerPlaceholder"),
             style: { width: 200 },
             value: selectedConsumer,
             onChange: setSelectedConsumer,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Option, { value: "All", children: "All Consumers" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Option, { value: "All", children: t("dependencyGraph.filters.consumerAll") }),
               Object.keys(consumers).map((key) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Option, { value: key, children: key }, key))
             ]
           }
@@ -186,17 +187,14 @@ const Graph = (props) => {
           import_web_react.Select,
           {
             showSearch: true,
-            placeholder: "Select Depth",
+            placeholder: t("dependencyGraph.filters.depthPlaceholder"),
             style: { width: 120 },
             value: maxDepth === Infinity ? "All" : maxDepth,
-            onChange: (val) => setMaxDepth(val === "All" ? Infinity : val),
+            onChange: (val) => setMaxDepth(val === "All" ? Infinity : Number(val)),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Option, { value: "All", children: "All Depth" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Option, { value: "All", children: t("dependencyGraph.filters.depthAll") }),
               Array.from({ length: availableDepth }, (_, i) => i + 1).map(
-                (depth) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Option, { value: depth, children: [
-                  "Depth: ",
-                  depth
-                ] }, depth)
+                (depth) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Option, { value: depth, children: t("dependencyGraph.filters.depthOption", { depth }) }, depth)
               )
             ]
           }
@@ -204,7 +202,7 @@ const Graph = (props) => {
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.meta, children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.metaBadge, children: nodes.length }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.metaLabel, children: nodes.length === 1 ? "node rendered" : "nodes rendered" })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.metaLabel, children: nodes.length === 1 ? t("dependencyGraph.meta.singleNode") : t("dependencyGraph.meta.multiNodes") })
       ] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.canvas, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/dist/lib/component/DependencyGraph/index.module.js

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;

package/dist/lib/component/DependencyGraph/index_module.css

@@ -3,7 +3,7 @@
   flex-direction: column;
   gap: 16px;
   min-height: 340px;
-  color: #1f2937;
+  color: var(--color-text-1, #1f2937);
 }
 
 .header_5e584 {
@@ -12,7 +12,7 @@
   align-items: flex-start;
   gap: 18px;
   padding: 0 6px 6px;
-  border-bottom: 1px solid rgba(96, 165, 250, 0.3);
+  border-bottom: 1px solid var(--color-border-2, rgba(96, 165, 250, 0.3));
 }
 
 .titleBlock_5e584 {
@@ -24,12 +24,12 @@
 .title_5e584 {
   font-size: 16px;
   font-weight: 600;
-  color: #1f2937;
+  color: var(--color-text-1, #1f2937);
 }
 
 .subtitle_5e584 {
   font-size: 12px;
-  color: #4b5563;
+  color: var(--color-text-2, #4b5563);
   max-width: 260px;
   line-height: 1.5;
 }
@@ -38,21 +38,21 @@
   display: flex;
   align-items: center;
   gap: 10px;
-  background: rgba(228, 228, 231, 0.5);
+  background: var(--color-bg-2, rgba(228, 228, 231, 0.5));
   padding: 4px 12px;
   border-radius: 999px;
-  border: 1px solid rgba(96, 165, 250, 0.3);
+  border: 1px solid var(--color-border-2, rgba(96, 165, 250, 0.3));
 }
 
 .metaBadge_5e584 {
   font-size: 16px;
   font-weight: 600;
-  color: #1f2937;
+  color: var(--color-text-1, #1f2937);
 }
 
 .metaLabel_5e584 {
   font-size: 12px;
-  color: #4b5563;
+  color: var(--color-text-2, #4b5563);
 }
 
 .filterBlock_5e584 {
@@ -65,19 +65,19 @@
   flex: 1 1;
   padding: 12px;
   border-radius: 16px;
-  border: 1px solid rgba(96, 165, 250, 0.3);
-  background: rgba(228, 228, 231, 0.5);
+  border: 1px solid var(--color-border-1, rgba(96, 165, 250, 0.3));
+  background: var(--color-bg-2, rgba(228, 228, 231, 0.5));
   backdrop-filter: blur(4px);
 }
 .canvas_5e584 .react-flow__handle {
   width: 10px;
   height: 10px;
   border-radius: 50%;
-  border: 2px solid rgba(96, 165, 250, 0.3);
-  background: rgba(243, 244, 246, 0.9);
+  border: 2px solid var(--color-border-1, rgba(96, 165, 250, 0.3));
+  background: var(--color-bg-1, rgba(243, 244, 246, 0.9));
 }
 .canvas_5e584 .react-flow__controls-button:hover {
-  background: rgba(243, 244, 246, 0.9);
+  background: var(--color-bg-1, rgba(243, 244, 246, 0.9));
 }
 
 .graph_5e584 {
@@ -88,10 +88,13 @@
 }
 
 .controls_5e584 .react-flow__controls-button {
-  background: rgba(243, 244, 246, 0.3);
-  border-color: rgba(96, 165, 250, 0.3);
-  color: #1f2937;
+  background: var(--color-bg-2, rgba(243, 244, 246, 0.3));
+  border-color: var(--color-border-1, rgba(96, 165, 250, 0.3));
+  color: var(--color-text-1, #1f2937);
 }
 .controls_5e584 .react-flow__controls-button:hover {
-  background: rgb(255, 255, 255);
+  background: var(--color-bg-1, #ffffff);
+}
+.arco-theme-dark .controls_5e584 .react-flow__controls-button {
+  background: var(--color-bg-white);
 }

package/dist/lib/component/DependencyGraphItem/index.js

@@ -1,4 +1,3 @@
-"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -34,21 +33,34 @@ module.exports = __toCommonJS(DependencyGraphItem_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_reactflow = require("reactflow");
+var import_react_i18next = require("react-i18next");
 var import_index = __toESM(require("./index.module"));
 var import_style = require("reactflow/dist/style.css");
+const parseInfo = (info) => {
+  const array = info.split(":");
+  const [fallbackName, fallbackVersion = ""] = array;
+  const idx = array.findIndex((item, index) => {
+    return index > 0 && (item.startsWith("http") || item.startsWith("//"));
+  });
+  if (idx > 0) {
+    return {
+      name: array.slice(0, idx).join(":"),
+      version: array.slice(idx).join(":")
+    };
+  }
+  return {
+    name: fallbackName,
+    version: fallbackVersion
+  };
+};
 const GraphItem = (props) => {
   const [shareds, setShareds] = (0, import_react.useState)([]);
   const [exposes, setExposes] = (0, import_react.useState)([]);
+  const { t } = (0, import_react_i18next.useTranslation)();
   let name;
   let version;
   const { info = "", color, remote } = props.data;
-  const infoArray = info.split(":");
-  if (info.endsWith(".json") || info.endsWith(".js")) {
-    name = infoArray.shift();
-    version = infoArray.join(":");
-  } else {
-    [name, version] = infoArray;
-  }
+  ({ name, version } = parseInfo(info));
   const isEntryType = (version == null ? void 0 : version.startsWith("http")) || (version == null ? void 0 : version.startsWith("//"));
   (0, import_react.useEffect)(() => {
     var _a, _b;
@@ -89,19 +101,19 @@ const GraphItem = (props) => {
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.group, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.name, children: name }) }),
       version && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.info, children: [
         exposes.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default["expose-container"], children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.type, children: "Expose" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.type, children: t("graphItem.expose") }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: exposes.map((expose, index) => {
             return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.item, children: expose }, index);
           }) })
         ] }) : null,
         shareds.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default["expose-container"], children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.type, children: "Shared" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.type, children: t("graphItem.shared") }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: shareds.map((shared, index) => {
             return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.item, children: shared }, index);
           }) })
         ] }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.message, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.type, children: isEntryType ? "Entry" : "Version" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.type, children: isEntryType ? t("graphItem.entry") : t("graphItem.version") }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.item, children: version })
         ] })
       ] })

package/dist/lib/component/DependencyGraphItem/index.module.js

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;

package/dist/lib/component/DependencyGraphItem/index_module.css

@@ -2,11 +2,11 @@
   display: flex;
   width: 320px;
   border-radius: 18px;
-  border: 1px solid rgba(96, 165, 250, 0.3);
+  border: 1px solid var(--color-border-1, rgba(96, 165, 250, 0.3));
   overflow: hidden;
   box-shadow: 0 18px 32px rgba(8, 11, 25, 0.35);
-  background: linear-gradient(140deg, var(--mf-accent, rgba(243, 244, 246, 0.9)) 0%, rgba(229, 231, 235, 0.7) 45%, rgba(255, 255, 255, 0.95) 100%), rgba(255, 255, 255, 0.9);
-  color: #1f2937;
+  background: linear-gradient(140deg, var(--mf-accent, rgba(243, 244, 246, 0.9)) 0%, rgba(229, 231, 235, 0.7) 45%, rgba(255, 255, 255, 0.95) 100%), var(--color-bg-2, rgba(255, 255, 255, 0.9));
+  color: var(--color-text-1, #1f2937);
   backdrop-filter: blur(4px);
 }
 .Wrapper_d8079 .react-flow__handle {
@@ -62,7 +62,7 @@
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.04em;
-  color: #4b5563;
+  color: var(--color-text-2, #4b5563);
 }
 .Wrapper_d8079 .item_d8079 {
   display: inline-flex;
@@ -70,7 +70,7 @@
   padding: 4px 8px;
   border-radius: 999px;
   background: rgba(243, 244, 246, 0.6);
-  color: #1f2937;
+  color: var(--color-text-1, #1f2937);
   font-size: 10px;
   font-weight: 500;
   margin-right: 6px;
@@ -85,11 +85,11 @@
   align-items: center;
   gap: 6px;
   font-size: 11px;
-  color: #4b5563;
+  color: var(--color-text-2, #4b5563);
 }
 .Wrapper_d8079 .message_d8079 .item_d8079 {
   margin-right: 0;
   padding: 4px 10px;
   background: rgba(243, 244, 246, 0.6);
-  color: #1f2937;
+  color: var(--color-text-1, #1f2937);
 }

package/dist/lib/component/Form/index.js

@@ -1,4 +1,3 @@
-"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -54,6 +53,7 @@ module.exports = __toCommonJS(Form_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_web_react = require("@arco-design/web-react");
+var import_react_i18next = require("react-i18next");
 var import_icon = require("@arco-design/web-react/icon");
 var import_constant = require("../../template/constant");
 var import_utils = require("../../utils");
@@ -77,6 +77,7 @@ const FormComponent = (props) => {
     enableClip,
     onClipChange
   } = props;
+  const { t } = (0, import_react_i18next.useTranslation)();
   const federation = window.__FEDERATION__ || {
     moduleInfo: {},
     originModuleInfo: {}
@@ -84,8 +85,8 @@ const FormComponent = (props) => {
   const { moduleInfo } = federation;
   let { producer } = (0, import_utils.separateType)(moduleInfo);
   const filterDupMap = /* @__PURE__ */ new Map();
-  producer = producer.filter((t) => {
-    const [typeOrName, name] = t.split(":");
+  producer = producer.filter((tItem) => {
+    const [typeOrName, name] = tItem.split(":");
     const marked = filterDupMap.get(name || typeOrName);
     filterDupMap.set(name || typeOrName, true);
     return !marked;
@@ -142,7 +143,7 @@ const FormComponent = (props) => {
     setTimeout(() => {
       setFormStatus(statusSet);
     }, 0);
-    return callback("Module name can not be empty");
+    return callback(t("form.validation.moduleNameRequired"));
   };
   const validateValue = (value, callback, index) => {
     const status = getCheckStatus(index);
@@ -168,9 +169,7 @@ const FormComponent = (props) => {
     setTimeout(() => {
       setFormStatus(statusSet);
     }, 0);
-    return callback(
-      "The module information format is incorrect, check the format in the upper left corner"
-    );
+    return callback(t("form.validation.moduleInfoInvalid"));
   };
   const onAdd = (add) => {
     add(import_constant.defaultDataItem);
@@ -202,14 +201,8 @@ const FormComponent = (props) => {
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.sectionHeader, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.heading, children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.titleRow, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_web_react.Tooltip,
-            {
-              content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: "Example: Customise the remote module address ending with 「.json」. For instance key: @module-federation/button, value: http://localhost:3000/mf-manifest.json" }),
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.IconInfoCircle, {})
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.title, children: "Proxy Overrides" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Tooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: t("form.tooltip.proxyExample") }), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.IconInfoCircle, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.title, children: t("form.title") }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
             "span",
             {
@@ -222,7 +215,7 @@ const FormComponent = (props) => {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.subtitle, children: "Point consumers to specific remote bundles or manifests for quicker validation." })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.subtitle, children: t("form.subtitle") })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.headerActions, children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: import_index.default.hmrArea, children: [
@@ -231,13 +224,13 @@ const FormComponent = (props) => {
             import_web_react.Switch,
             {
               checked: enableClip,
-              checkedText: "Enable Clip",
-              uncheckedText: "Disable Clip",
+              checkedText: t("form.clip.enable"),
+              uncheckedText: t("form.clip.disable"),
               onChange: handleSwitchChange,
               className: import_index.default.switch
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Tooltip, { content: "After enabling data clipping, snapshot modules and shared information will be removed, affecting preloading logic.", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Tooltip, { content: t("form.clip.tooltip"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_icon.IconQuestionCircle,
             {
               style: { marginLeft: 5, cursor: "pointer" }
@@ -248,8 +241,8 @@ const FormComponent = (props) => {
             import_web_react.Switch,
             {
               checked: enableHMR === "enable",
-              checkedText: "Enable HMR",
-              uncheckedText: "Disable HMR",
+              checkedText: t("form.hmr.enable"),
+              uncheckedText: t("form.hmr.disable"),
               onChange: hmrChange,
               className: import_index.default.switch
             }
@@ -262,8 +255,7 @@ const FormComponent = (props) => {
             shape: "circle",
             className: import_index.default.add,
             onClick: () => onAdd(add),
-            "data-set-e2e": "e2eAdd",
-            type: "primary"
+            "data-set-e2e": "e2eAdd"
           }
         )
       ] })
@@ -306,7 +298,7 @@ const FormComponent = (props) => {
                       validateKey(value, () => {
                       }, index);
                     } else {
-                      cb("Module name can not be empty");
+                      cb(t("form.validation.moduleNameRequired"));
                       validateKey(value, () => {
                       }, index);
                     }
@@ -318,12 +310,12 @@ const FormComponent = (props) => {
                 import_web_react.Select,
                 {
                   "data-set-e2e": "e2eProxyKey",
-                  placeholder: "Module Name",
+                  placeholder: t("form.fields.moduleName.placeholder"),
                   onChange: (key) => onKeyChange(key, index),
                   allowClear: true,
                   showSearch: true,
                   dropdownMenuClassName: import_index.default.dropdown,
-                  children: formatProducer.map((item2) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Option, { value: item2.value, children: item2.label }, item2.value))
+                  children: formatProducer.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Option, { value: option.value, children: option.label }, option.value))
                 }
               )
             }
@@ -341,9 +333,7 @@ const FormComponent = (props) => {
                       validateValue(value, () => {
                       }, index);
                     } else {
-                      cb(
-                        "The module information format is incorrect, check the format in the upper left corner"
-                      );
+                      cb(t("form.validation.moduleInfoInvalid"));
                       validateValue(value, () => {
                       }, index);
                     }
@@ -355,7 +345,9 @@ const FormComponent = (props) => {
                 import_web_react.Select,
                 {
                   "data-set-e2e": "e2eProxyValue",
-                  placeholder: "Custom Manifest URL",
+                  placeholder: t(
+                    "form.fields.customManifest.placeholder"
+                  ),
                   allowClear: true,
                   showSearch: true,
                   allowCreate: true,
@@ -370,11 +362,11 @@ const FormComponent = (props) => {
     }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.emptyWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_web_react.Empty,
       {
-        description: "Add your first override to begin redirecting remotes.",
+        description: t("form.empty.description"),
         className: import_index.default.empty
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.footerHint, children: "Changes persist per domain and refresh the inspected tab when valid." })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.footerHint, children: t("form.footer.hint") })
   ] }) });
 };
 var Form_default = FormComponent;

package/dist/lib/component/Form/index.module.js

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -22,4 +21,4 @@ __export(index_module_exports, {
 });
 module.exports = __toCommonJS(index_module_exports);
 var import_index_module = require("./index_module.css");
-var index_module_default = { "wrapper": "wrapper_20b79", "sectionHeader": "sectionHeader_20b79", "heading": "heading_20b79", "titleRow": "titleRow_20b79", "title": "title_20b79", "subtitle": "subtitle_20b79", "headerActions": "headerActions_20b79", "add": "add_20b79", "badge": "badge_20b79", "statusMessage": "statusMessage_20b79", "divider": "divider_20b79", "hmrArea": "hmrArea_20b79", "switch": "switch_20b79", "rules": "rules_20b79", "ruleCard": "ruleCard_20b79", "ruleHeader": "ruleHeader_20b79", "toggle": "toggle_20b79", "inputs": "inputs_20b79", "field": "field_20b79", "dropdown": "dropdown_20b79", "delete": "delete_20b79", "emptyWrapper": "emptyWrapper_20b79", "empty": "empty_20b79", "footerHint": "footerHint_20b79" };
+var index_module_default = { "wrapper": "wrapper_20b79", "sectionHeader": "sectionHeader_20b79", "heading": "heading_20b79", "titleRow": "titleRow_20b79", "title": "title_20b79", "subtitle": "subtitle_20b79", "headerActions": "headerActions_20b79", "badge": "badge_20b79", "statusMessage": "statusMessage_20b79", "divider": "divider_20b79", "hmrArea": "hmrArea_20b79", "switch": "switch_20b79", "rules": "rules_20b79", "ruleCard": "ruleCard_20b79", "ruleHeader": "ruleHeader_20b79", "toggle": "toggle_20b79", "inputs": "inputs_20b79", "field": "field_20b79", "dropdown": "dropdown_20b79", "delete": "delete_20b79", "emptyWrapper": "emptyWrapper_20b79", "empty": "empty_20b79", "footerHint": "footerHint_20b79" };

package/dist/lib/component/Form/index_module.css

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   gap: 18px;
-  color: #1f2937;
+  color: var(--color-text-1, #1f2937);
 }
 
 .sectionHeader_20b79 {
@@ -11,7 +11,7 @@
   justify-content: space-between;
   gap: 18px;
   padding: 12px 16px;
-  background: rgba(228, 228, 231, 0.5);
+  background: rgba(228, 228, 231, 0.1);
   border: 1px solid rgba(228, 228, 231, 0.5);
 }
 
@@ -28,7 +28,7 @@
   gap: 10px;
   font-size: 16px;
   font-weight: 600;
-  color: #1f2937;
+  color: var(--color-text-1, #1f2937);
 }
 .titleRow_20b79 .arco-icon {
   color: rgba(23, 75, 180, 0.9);
@@ -41,7 +41,7 @@
 
 .subtitle_20b79 {
   font-size: 12px;
-  color: #4b5563;
+  color: var(--color-text-2, #4b5563);
   line-height: 1.5;
 }
 
@@ -51,9 +51,6 @@
   gap: 12px;
   flex-wrap: wrap;
 }
-.headerActions_20b79 .add_20b79 {
-  box-shadow: 0 8px 16px rgba(243, 244, 246, 0.9);
-}
 
 .badge_20b79 {
   transform: scale(1.4);
@@ -62,7 +59,7 @@
 
 .statusMessage_20b79 {
   font-size: 12px;
-  color: #4b5563;
+  color: var(--color-text-2, #4b5563);
   max-width: 260px;
   line-height: 1.4;
 }
@@ -78,16 +75,16 @@
   align-items: center;
   gap: 8px;
   font-size: 12px;
-  color: #4b5563;
+  color: var(--color-text-2, #4b5563);
 }
 
 .switch_20b79 .arco-switch {
-  background: rgba(243, 244, 246, 0.9);
+  background: rgba(243, 244, 246, var(--form-control-alpha, 0.9));
   border-color: rgba(96, 165, 250, 0.35);
-  color: #4b5563;
+  color: var(--color-text-2, #4b5563);
 }
 .switch_20b79 .arco-switch-checked {
-  background: rgba(243, 244, 246, 0.9);
+  background: rgba(243, 244, 246, var(--form-control-alpha, 0.9));
   border-color: rgba(96, 165, 250, 0.35);
 }
 
@@ -104,7 +101,7 @@
   padding: 18px;
   border-radius: 18px;
   border: 1px solid rgba(228, 228, 231, 0.5);
-  background: rgba(255, 255, 255, 0.9);
+  background: var(--color-bg-1, rgba(255, 255, 255, 0.9));
   box-shadow: 0 15px 32px rgba(8, 11, 25, 0.45);
 }
 
@@ -120,10 +117,10 @@
 .toggle_20b79 .arco-checkbox-icon {
   border-radius: 6px;
   border-color: rgba(228, 228, 231, 0.5);
-  background: rgba(243, 244, 246, 0.9);
+  background: rgba(243, 244, 246, var(--form-control-alpha, 0.1));
 }
 .toggle_20b79 .arco-checkbox-checked .arco-checkbox-icon {
-  background: rgba(243, 244, 246, 0.9);
+  background: rgba(243, 244, 246, var(--form-control-alpha, 0.1));
   border-color: rgba(228, 228, 231, 0.5);
 }
 
@@ -145,31 +142,31 @@
   width: 100%;
 }
 .field_20b79 .arco-select-view {
-  background: rgba(243, 244, 246, 0.9);
+  background: rgba(243, 244, 246, var(--form-control-alpha, 0.1));
   border: 1px solid rgba(228, 228, 231, 0.5);
   border-radius: 14px;
-  color: #1f2937;
+  color: var(--color-text-1, #1f2937);
   min-height: 42px;
   padding: 6px 12px;
 }
 .field_20b79 .arco-select-view-input {
-  color: #4b5563;
+  color: var(--color-text-2, #4b5563);
 }
 .field_20b79 .arco-select-view-placeholder {
-  color: #4b5563;
+  color: var(--color-text-2, #4b5563);
 }
 
 .dropdown_20b79 {
-  background: rgba(255, 255, 255, 0.9);
+  background: var(--color-bg-1, rgba(255, 255, 255, 0.9));
   border: 1px solid rgba(228, 228, 231, 0.5);
   box-shadow: 0 16px 30px rgba(8, 11, 25, 0.45);
 }
 .dropdown_20b79 .arco-select-option {
-  color: #4b5563;
+  color: var(--color-text-2, #4b5563);
 }
 .dropdown_20b79 .arco-select-option:hover,
 .dropdown_20b79 .arco-select-option.arco-select-option-selected {
-  background: rgba(243, 244, 246, 0.9);
+  background: rgba(243, 244, 246, var(--form-control-alpha, 0.1));
 }
 
 .delete_20b79 {
@@ -180,18 +177,18 @@
   border-radius: 16px;
   border: 1px dashed rgba(228, 228, 231, 0.5);
   padding: 28px 16px;
-  background: rgba(255, 255, 255, 0.9);
+  background: var(--color-bg-1, rgba(255, 255, 255, 0.9));
   display: flex;
   justify-content: center;
 }
 
 .empty_20b79 .arco-empty-description {
-  color: #4b5563;
+  color: var(--color-text-2, #4b5563);
 }
 
 .footerHint_20b79 {
   font-size: 11px;
-  color: #4b5563;
+  color: var(--color-text-2, #4b5563);
   text-align: right;
   letter-spacing: 0.04em;
   text-transform: uppercase;