@inf-monkeys-tech/monkeys-design 2.0.23 → 2.0.24

package/dist/components/capabilities/index.js

@@ -2944,6 +2944,12 @@ var LAYOUT_MODE_CLASSES = {
 };
 var ALIGN_CLASSES = { start: "items-start", center: "items-center", end: "items-end", stretch: "items-stretch" };
 var JUSTIFY_CLASSES = { start: "justify-start", center: "justify-center", end: "justify-end", between: "justify-between", around: "justify-around" };
+var tokenPathToCssVariable = (value) => {
+  const path = value.slice(1).trim();
+  if (!/^[a-z][a-z0-9]*(?:[.-][a-z0-9]+)*$/i.test(path)) throw new TypeError(`Invalid Design Token path ${value}.`);
+  return `var(--monkeys-${path.replace(/\./g, "-").replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase()})`;
+};
+var resolveRenderNodeStyle = (style) => style ? Object.fromEntries(Object.entries(style).map(([property, value]) => [property, typeof value === "string" && value.startsWith("$") ? tokenPathToCssVariable(value) : value])) : void 0;
 var getRenderLayoutClassName = (layout) => cn(
   LAYOUT_MODE_CLASSES[layout.mode],
   layout.mode === "flex" && (layout.direction === "row" ? "flex-row" : "flex-col"),
@@ -3094,6 +3100,7 @@ var RenderNodeHost = React5.forwardRef(function RenderNodeHost2({
     className: cn((!unframed || resolvedLayout.mode !== "contents") && getRenderLayoutClassName(resolvedLayout), className),
     style: {
       ...resolvedLayout.mode === "grid" && resolvedLayout.columns ? { gridTemplateColumns: `repeat(${resolvedLayout.columns}, minmax(0, 1fr))` } : {},
+      ...resolveRenderNodeStyle(node.style),
       ...props.style
     },
     hidden: hidden || !policyState.visible || void 0,