@fragmentsx/render-react 1.1.3 → 1.1.4

package/dist/index.cjs.js

@@ -1431,7 +1431,7 @@ const TextSchema = /* @__PURE__ */ object({
     fallback: ""
   }),
   whiteSpace: layerField(/* @__PURE__ */ enum_(Object.keys(whiteSpace)), {
-    fallback: whiteSpace.pre
+    fallback: whiteSpace.normal
   }),
   textAlign: layerField(/* @__PURE__ */ string(), { fallback: "left" }),
   parent: layerField(/* @__PURE__ */ nullable(/* @__PURE__ */ string()), { overridable: false }),
@@ -1553,6 +1553,7 @@ const StringVariableSchema = /* @__PURE__ */ object({
   required: layerField(/* @__PURE__ */ boolean(), { fallback: false }),
   placeholder: layerField(/* @__PURE__ */ string(), { fallback: "" }),
   isTextarea: layerField(/* @__PURE__ */ boolean(), { fallback: false }),
+  isRich: layerField(/* @__PURE__ */ boolean(), { fallback: false }),
   ...GraphFieldSchema.entries
 });
 const EventVariableSchema = /* @__PURE__ */ object({
@@ -2857,7 +2858,7 @@ const useLayerSizeValue = (layerKey, sizeType) => {
         return "100%";
       }
       if (autoSizes.includes(valueType)) {
-        return layerNode._type === index.nodes.Instance ? "auto" : "min-content";
+        return layerNode._type === index.nodes.Instance ? "auto" : "fit-content";
       }
       if (valueType === index.sizing.Relative) {
         return `${value}%`;
@@ -2935,13 +2936,14 @@ const useLayerBackground = (layerKey) => {
     "solidFill",
     fragmentManager
   );
-  const [imageFill, , { cssVariableValue: cssImageFill }] = useLayerValue(
+  const [imageFill, , cssImageFillOptions] = useLayerValue(
     layerKey,
     "imageFill",
     fragmentManager
   );
+  const imageSizeLayerKey = (cssImageFillOptions == null ? void 0 : cssImageFillOptions.isVariable) ? cssImageFillOptions == null ? void 0 : cssImageFillOptions.rawValue : layerKey;
   const [, , { cssVariableValue: cssImageSize }] = useLayerValue(
-    layerKey,
+    imageSizeLayerKey,
     "imageSize",
     fragmentManager
   );
@@ -2951,7 +2953,7 @@ const useLayerBackground = (layerKey) => {
         background: cssSolidFill
       };
     }
-    if (fillType === index.paintMode.Image && cssImageFill) {
+    if (fillType === index.paintMode.Image && cssImageFillOptions.cssVariableValue) {
       return {
         background: `url(${imageFill})`,
         backgroundSize: cssImageSize == null ? void 0 : cssImageSize.toLowerCase(),
@@ -2961,7 +2963,12 @@ const useLayerBackground = (layerKey) => {
     return {
       background: "transparent"
     };
-  }, [fillType, cssImageFill, cssSolidFill]);
+  }, [
+    fillType,
+    cssImageFillOptions.cssVariableValue,
+    cssSolidFill,
+    cssImageSize
+  ]);
 };
 const useLayerDisplay = (layerKey) => {
   const { manager } = require$$0.useContext(FragmentContext);

package/dist/index.es.js

@@ -1429,7 +1429,7 @@ const TextSchema = /* @__PURE__ */ object({
     fallback: ""
   }),
   whiteSpace: layerField(/* @__PURE__ */ enum_(Object.keys(whiteSpace)), {
-    fallback: whiteSpace.pre
+    fallback: whiteSpace.normal
   }),
   textAlign: layerField(/* @__PURE__ */ string(), { fallback: "left" }),
   parent: layerField(/* @__PURE__ */ nullable(/* @__PURE__ */ string()), { overridable: false }),
@@ -1551,6 +1551,7 @@ const StringVariableSchema = /* @__PURE__ */ object({
   required: layerField(/* @__PURE__ */ boolean(), { fallback: false }),
   placeholder: layerField(/* @__PURE__ */ string(), { fallback: "" }),
   isTextarea: layerField(/* @__PURE__ */ boolean(), { fallback: false }),
+  isRich: layerField(/* @__PURE__ */ boolean(), { fallback: false }),
   ...GraphFieldSchema.entries
 });
 const EventVariableSchema = /* @__PURE__ */ object({
@@ -2855,7 +2856,7 @@ const useLayerSizeValue = (layerKey, sizeType) => {
         return "100%";
       }
       if (autoSizes.includes(valueType)) {
-        return layerNode._type === index.nodes.Instance ? "auto" : "min-content";
+        return layerNode._type === index.nodes.Instance ? "auto" : "fit-content";
       }
       if (valueType === index.sizing.Relative) {
         return `${value}%`;
@@ -2933,13 +2934,14 @@ const useLayerBackground = (layerKey) => {
     "solidFill",
     fragmentManager
   );
-  const [imageFill, , { cssVariableValue: cssImageFill }] = useLayerValue(
+  const [imageFill, , cssImageFillOptions] = useLayerValue(
     layerKey,
     "imageFill",
     fragmentManager
   );
+  const imageSizeLayerKey = (cssImageFillOptions == null ? void 0 : cssImageFillOptions.isVariable) ? cssImageFillOptions == null ? void 0 : cssImageFillOptions.rawValue : layerKey;
   const [, , { cssVariableValue: cssImageSize }] = useLayerValue(
-    layerKey,
+    imageSizeLayerKey,
     "imageSize",
     fragmentManager
   );
@@ -2949,7 +2951,7 @@ const useLayerBackground = (layerKey) => {
         background: cssSolidFill
       };
     }
-    if (fillType === index.paintMode.Image && cssImageFill) {
+    if (fillType === index.paintMode.Image && cssImageFillOptions.cssVariableValue) {
       return {
         background: `url(${imageFill})`,
         backgroundSize: cssImageSize == null ? void 0 : cssImageSize.toLowerCase(),
@@ -2959,7 +2961,12 @@ const useLayerBackground = (layerKey) => {
     return {
       background: "transparent"
     };
-  }, [fillType, cssImageFill, cssSolidFill]);
+  }, [
+    fillType,
+    cssImageFillOptions.cssVariableValue,
+    cssSolidFill,
+    cssImageSize
+  ]);
 };
 const useLayerDisplay = (layerKey) => {
   const { manager } = useContext(FragmentContext);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fragmentsx/render-react",
   "private": false,
-  "version": "1.1.3",
+  "version": "1.1.4",
   "type": "module",
   "files": [
     "dist"