@multiplatform.one/theme 7.90.5 → 8.0.0

package/dist/cjs/theme/devtools/index.native.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var devtools_exports = {};
+module.exports = __toCommonJS(devtools_exports);
+__reExport(devtools_exports, require("../knobs.native.js"), module.exports);
+__reExport(devtools_exports, require("../motionStops.native.js"), module.exports);
+__reExport(devtools_exports, require("./knobIcons.native.js"), module.exports);
+__reExport(devtools_exports, require("./buildSnapshot.native.js"), module.exports);
+__reExport(devtools_exports, require("./ColorLineVisualizer.native.js"), module.exports);
+__reExport(devtools_exports, require("./vizConstants.native.js"), module.exports);
+//# sourceMappingURL=index.native.js.map

package/dist/cjs/theme/devtools/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","devtools_exports","module","exports","__reExport","require"],"sources":["../../../../src/theme/devtools/index.ts"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,gBAAA;AAQAC,MAAA,CAAAC,OAAA,GAAAP,YAAc,CAAAK,gBAAA;AACdG,UAAA,CAAAH,gBAAA,EAAcI,OAAA,wBAAAH,MATd,CAAAC,OAAA;AAUAC,UAAA,CAAAH,gBAAA,EAAcI,OAAA,2BAVd,GAAAH,MAAA,CAAAC,OAAA;AAWAC,UAAA,CAAAH,gBAAA,EAAcI,OAAA,2BAAAH,MAXd,CAAAC,OAAA;AAYAC,UAAA,CAAAH,gBAAA,EAAcI,OAAA,+BAAAH,MAZd,CAAAC,OAAA;AAaAC,UAAA,CAAAH,gBAAA,EAAcI,OAAA,kCAbd,GAAAH,MAAA,CAAAC,OAAA","ignoreList":[]}

package/dist/cjs/theme/devtools/knobIcons.cjs

@@ -1,6 +1,8 @@
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all) __defProp(target, name, {
@@ -17,6 +19,15 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
 var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
   value: true
 }), mod);
@@ -42,10 +53,10 @@ __export(knobIcons_exports, {
   timestampStyleIcon: () => timestampStyleIcon
 });
 module.exports = __toCommonJS(knobIcons_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
 function fillIcon(value, color) {
   if (value === "filled") {
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+    return /* @__PURE__ */import_react.default.createElement("div", {
       style: {
         width: 14,
         height: 14,
@@ -54,7 +65,7 @@ function fillIcon(value, color) {
       }
     });
   }
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+  return /* @__PURE__ */import_react.default.createElement("div", {
     style: {
       width: 14,
       height: 14,
@@ -71,7 +82,7 @@ function borderRadiusIcon(value, color) {
     large: 7,
     full: 10
   }[value] ?? 0;
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+  return /* @__PURE__ */import_react.default.createElement("div", {
     style: {
       width: 14,
       height: 14,
@@ -82,33 +93,30 @@ function borderRadiusIcon(value, color) {
 }
 function cornerSmoothingIcon(value, color) {
   const smooth = value === "smooth";
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("svg", {
+  return /* @__PURE__ */import_react.default.createElement("svg", {
     width: "14",
     height: "14",
     viewBox: "0 0 14 14",
     fill: "none",
     role: "img",
-    "aria-label": value,
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("title", {
-      children: value
-    }), smooth ? /* @__PURE__ */(0, import_jsx_runtime.jsx)("path", {
-      d: "M7 1 C2.8 1 1 2.8 1 7 C1 11.2 2.8 13 7 13 C11.2 13 13 11.2 13 7 C13 2.8 11.2 1 7 1 Z",
-      stroke: color,
-      strokeWidth: "1.5"
-    }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)("rect", {
-      x: "1",
-      y: "1",
-      width: "12",
-      height: "12",
-      rx: "4",
-      stroke: color,
-      strokeWidth: "1.5"
-    })]
-  });
+    "aria-label": value
+  }, /* @__PURE__ */import_react.default.createElement("title", null, value), smooth ? /* @__PURE__ */import_react.default.createElement("path", {
+    d: "M7 1 C2.8 1 1 2.8 1 7 C1 11.2 2.8 13 7 13 C11.2 13 13 11.2 13 7 C13 2.8 11.2 1 7 1 Z",
+    stroke: color,
+    strokeWidth: "1.5"
+  }) : /* @__PURE__ */import_react.default.createElement("rect", {
+    x: "1",
+    y: "1",
+    width: "12",
+    height: "12",
+    rx: "4",
+    stroke: color,
+    strokeWidth: "1.5"
+  }));
 }
 function borderWidthIcon(value, color) {
   if (value === "none") {
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+    return /* @__PURE__ */import_react.default.createElement("div", {
       style: {
         width: 14,
         height: 14,
@@ -123,7 +131,7 @@ function borderWidthIcon(value, color) {
     medium: 1.5,
     large: 2
   }[value] ?? 1;
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+  return /* @__PURE__ */import_react.default.createElement("div", {
     style: {
       width: 14,
       height: 14,
@@ -149,7 +157,7 @@ function elevationIcon(value, color, _isDark) {
   const squareSize = 10;
   const total = squareSize + offset * 2 + 1;
   if (offset === 0) {
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+    return /* @__PURE__ */import_react.default.createElement("div", {
       style: {
         width: squareSize,
         height: squareSize,
@@ -158,39 +166,38 @@ function elevationIcon(value, color, _isDark) {
       }
     });
   }
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+  return /* @__PURE__ */import_react.default.createElement("div", {
     style: {
       position: "relative",
       width: total,
       height: total
-    },
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
-      style: {
-        position: "absolute",
-        bottom: 0,
-        right: 0,
-        width: shadowSize,
-        height: shadowSize,
-        background: shadowColor,
-        borderRadius: 1
-      }
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
-      style: {
-        position: "absolute",
-        top: 0,
-        left: 0,
-        width: squareSize,
-        height: squareSize,
-        border: `1px solid ${color}`,
-        borderRadius: 1
-      }
-    })]
-  });
+    }
+  }, /* @__PURE__ */import_react.default.createElement("div", {
+    style: {
+      position: "absolute",
+      bottom: 0,
+      right: 0,
+      width: shadowSize,
+      height: shadowSize,
+      background: shadowColor,
+      borderRadius: 1
+    }
+  }), /* @__PURE__ */import_react.default.createElement("div", {
+    style: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      width: squareSize,
+      height: squareSize,
+      border: `1px solid ${color}`,
+      borderRadius: 1
+    }
+  }));
 }
 function textAccentIcon(value, color) {
   const weight = value === "low" ? 300 : value === "medium" ? 500 : 700;
   const opacity = value === "low" ? 0.35 : value === "medium" ? 0.7 : 1;
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+  return /* @__PURE__ */import_react.default.createElement("span", {
     style: {
       fontSize: 12,
       fontWeight: weight,
@@ -198,9 +205,8 @@ function textAccentIcon(value, color) {
       opacity,
       fontFamily: "system-ui, sans-serif",
       lineHeight: 1
-    },
-    children: "Aa"
-  });
+    }
+  }, "Aa");
 }
 const fontCategoryStyles = {
   "sans-serif": {
@@ -256,7 +262,7 @@ function headingFontIcon(value, color) {
     family: "inherit",
     label: "Aa"
   };
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+  return /* @__PURE__ */import_react.default.createElement("span", {
     style: {
       fontSize: 13,
       fontWeight: 700,
@@ -265,16 +271,15 @@ function headingFontIcon(value, color) {
       fontStyle: s.style,
       lineHeight: 1,
       letterSpacing: s.letterSpacing
-    },
-    children: s.label
-  });
+    }
+  }, s.label);
 }
 function bodyFontIcon(value, color) {
   const s = fontCategoryStyles[value] ?? {
     family: "inherit",
     label: "Aa"
   };
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+  return /* @__PURE__ */import_react.default.createElement("span", {
     style: {
       fontSize: 13,
       fontWeight: 400,
@@ -283,9 +288,8 @@ function bodyFontIcon(value, color) {
       fontStyle: s.style,
       lineHeight: 1,
       letterSpacing: s.letterSpacing
-    },
-    children: s.label
-  });
+    }
+  }, s.label);
 }
 function fontWeightIcon(value, color) {
   const weight = {
@@ -293,16 +297,15 @@ function fontWeightIcon(value, color) {
     regular: 400,
     bold: 700
   }[value] ?? 400;
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+  return /* @__PURE__ */import_react.default.createElement("span", {
     style: {
       fontSize: 12,
       fontWeight: weight,
       color,
       fontFamily: "system-ui, sans-serif",
       lineHeight: 1
-    },
-    children: "W"
-  });
+    }
+  }, "W");
 }
 function modeIcon(value, color) {
   const base = {
@@ -311,7 +314,7 @@ function modeIcon(value, color) {
     borderRadius: "50%"
   };
   if (value === "system") {
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+    return /* @__PURE__ */import_react.default.createElement("div", {
       style: {
         ...base,
         border: `1.5px solid ${color}`,
@@ -320,14 +323,14 @@ function modeIcon(value, color) {
     });
   }
   if (value === "light") {
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+    return /* @__PURE__ */import_react.default.createElement("div", {
       style: {
         ...base,
         border: `1.5px solid ${color}`
       }
     });
   }
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+  return /* @__PURE__ */import_react.default.createElement("div", {
     style: {
       ...base,
       background: color
@@ -335,7 +338,7 @@ function modeIcon(value, color) {
   });
 }
 function glyph(label, color, size = 9) {
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+  return /* @__PURE__ */import_react.default.createElement("span", {
     style: {
       fontSize: size,
       fontWeight: 600,
@@ -343,9 +346,8 @@ function glyph(label, color, size = 9) {
       fontFamily: "system-ui, sans-serif",
       lineHeight: 1,
       letterSpacing: "-0.02em"
-    },
-    children: label
-  });
+    }
+  }, label);
 }
 function fieldLabelPlacementIcon(value, color) {
   if (value === "side") return glyph("\u229F", color, 12);
@@ -359,40 +361,39 @@ function requiredMarkingIcon(value, color) {
 }
 function tableZebraIcon(value, color) {
   const on = value === "on";
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+  return /* @__PURE__ */import_react.default.createElement("div", {
     style: {
       display: "flex",
       flexDirection: "column",
       gap: 1,
       width: 14
-    },
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
-      style: {
-        height: 3,
-        background: color,
-        borderRadius: 1,
-        opacity: on ? 1 : 0.35
-      }
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
-      style: {
-        height: 3,
-        background: color,
-        borderRadius: 1,
-        opacity: on ? 0.35 : 0.35
-      }
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
-      style: {
-        height: 3,
-        background: color,
-        borderRadius: 1,
-        opacity: on ? 1 : 0.35
-      }
-    })]
-  });
+    }
+  }, /* @__PURE__ */import_react.default.createElement("div", {
+    style: {
+      height: 3,
+      background: color,
+      borderRadius: 1,
+      opacity: on ? 1 : 0.35
+    }
+  }), /* @__PURE__ */import_react.default.createElement("div", {
+    style: {
+      height: 3,
+      background: color,
+      borderRadius: 1,
+      opacity: on ? 0.35 : 0.35
+    }
+  }), /* @__PURE__ */import_react.default.createElement("div", {
+    style: {
+      height: 3,
+      background: color,
+      borderRadius: 1,
+      opacity: on ? 1 : 0.35
+    }
+  }));
 }
 function bulkBarPlacementIcon(value, color) {
   const top = value !== "bottom";
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+  return /* @__PURE__ */import_react.default.createElement("div", {
     style: {
       width: 14,
       height: 14,
@@ -402,53 +403,51 @@ function bulkBarPlacementIcon(value, color) {
       flexDirection: "column",
       justifyContent: top ? "flex-start" : "flex-end",
       padding: 1
-    },
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
-      style: {
-        height: 3,
-        background: color,
-        borderRadius: 1
-      }
-    })
-  });
+    }
+  }, /* @__PURE__ */import_react.default.createElement("div", {
+    style: {
+      height: 3,
+      background: color,
+      borderRadius: 1
+    }
+  }));
 }
 function selectAllScopeIcon(value, color) {
   const filtered = value === "filtered";
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+  return /* @__PURE__ */import_react.default.createElement("div", {
     style: {
       display: "flex",
       flexDirection: "column",
       gap: 1,
       width: 14
-    },
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
-      style: {
-        height: 3,
-        background: color,
-        borderRadius: 1
-      }
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
-      style: {
-        height: 3,
-        background: color,
-        borderRadius: 1
-      }
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
-      style: {
-        height: 3,
-        background: color,
-        borderRadius: 1,
-        opacity: filtered ? 1 : 0.3
-      }
-    })]
-  });
+    }
+  }, /* @__PURE__ */import_react.default.createElement("div", {
+    style: {
+      height: 3,
+      background: color,
+      borderRadius: 1
+    }
+  }), /* @__PURE__ */import_react.default.createElement("div", {
+    style: {
+      height: 3,
+      background: color,
+      borderRadius: 1
+    }
+  }), /* @__PURE__ */import_react.default.createElement("div", {
+    style: {
+      height: 3,
+      background: color,
+      borderRadius: 1,
+      opacity: filtered ? 1 : 0.3
+    }
+  }));
 }
 function timestampStyleIcon(value, color) {
   return glyph(value === "relative" ? "~t" : "12:00", color, value === "relative" ? 10 : 7);
 }
 function disabledStyleIcon(value, color) {
   if (value === "dimWhole") {
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+    return /* @__PURE__ */import_react.default.createElement("div", {
       style: {
         width: 14,
         height: 14,
@@ -458,31 +457,30 @@ function disabledStyleIcon(value, color) {
       }
     });
   }
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+  return /* @__PURE__ */import_react.default.createElement("div", {
     style: {
       display: "flex",
       flexDirection: "column",
       gap: 2,
       width: 14
-    },
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
-      style: {
-        height: 3,
-        background: color,
-        borderRadius: 1
-      }
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
-      style: {
-        height: 7,
-        background: color,
-        borderRadius: 1,
-        opacity: 0.3
-      }
-    })]
-  });
+    }
+  }, /* @__PURE__ */import_react.default.createElement("div", {
+    style: {
+      height: 3,
+      background: color,
+      borderRadius: 1
+    }
+  }), /* @__PURE__ */import_react.default.createElement("div", {
+    style: {
+      height: 7,
+      background: color,
+      borderRadius: 1,
+      opacity: 0.3
+    }
+  }));
 }
 function formAutofocusIcon(value, color) {
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+  return /* @__PURE__ */import_react.default.createElement("div", {
     style: {
       width: 14,
       height: 14,