@valbuild/react 0.43.1 → 0.45.0

package/dist/ValProvider-1bf1d7e4.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./ValProvider-1bf1d7e4.cjs.prod.js");
+} else {
+  module.exports = require("./ValProvider-1bf1d7e4.cjs.dev.js");
+}

package/dist/{ValProvider-8d8e3678.cjs.prod.js → ValProvider-1bf1d7e4.cjs.prod.js}

@@ -662,25 +662,31 @@ function ValProvider(_ref) {
     _useState2 = slicedToArray._slicedToArray(_useState, 2),
     isClient = _useState2[0],
     setIsClient = _useState2[1];
-  var _useState3 = React.useState(false),
+  var _useState3 = React.useState(),
     _useState4 = slicedToArray._slicedToArray(_useState3, 2),
     enabled = _useState4[0],
     setEnabled = _useState4[1];
   React.useEffect(function () {
     setIsClient(true);
     try {
-      var _document$cookie;
+      var _document$cookie, _document$cookie2;
       var valEnabled = (_document$cookie = document.cookie) === null || _document$cookie === void 0 ? void 0 : _document$cookie.includes("".concat(core.Internal.VAL_ENABLE_COOKIE_NAME, "=true"));
-      setEnabled(valEnabled);
+      if (valEnabled) {
+        setEnabled(true);
+      }
+      var valDisabled = (_document$cookie2 = document.cookie) === null || _document$cookie2 === void 0 ? void 0 : _document$cookie2.includes("".concat(core.Internal.VAL_ENABLE_COOKIE_NAME, "=false"));
+      if (valDisabled) {
+        setEnabled(false);
+      }
+      // If we are in development and Val is not enabled or disabled, enable Val
+      if (        "production" === "development" && !valEnabled && !valDisabled) ;
     } catch (e) {
       console.warn("Could not read Val enabled state", e);
     }
   }, []);
-  if (isClient && !enabled &&         "production" === "development") {
+  if (isClient && !enabled) {
     if (!api) {
       console.warn("Val does not seem to be configured properly! Please check that you have wrapper your root layout (or _app) with the ValProvider.");
-    } else {
-      console.log("Val is disabled. Enable it by going here ".concat(window.origin).concat(api.host, "/enable?redirect_to=").concat(encodeURIComponent(window.location.href), ". NOTE: this message appears because NODE_ENV is set to development."));
     }
   }
   if (!isClient || !enabled || !store || !api || !ValContext) {

package/dist/{ValProvider-9a2431d9.browser.esm.js → ValProvider-36edbac3.browser.esm.js}

@@ -636,25 +636,37 @@ function ValProvider(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     isClient = _useState2[0],
     setIsClient = _useState2[1];
-  var _useState3 = useState(false),
+  var _useState3 = useState(),
     _useState4 = _slicedToArray(_useState3, 2),
     enabled = _useState4[0],
     setEnabled = _useState4[1];
   useEffect(function () {
     setIsClient(true);
     try {
-      var _document$cookie;
+      var _document$cookie, _document$cookie2;
       var valEnabled = (_document$cookie = document.cookie) === null || _document$cookie === void 0 ? void 0 : _document$cookie.includes("".concat(Internal.VAL_ENABLE_COOKIE_NAME, "=true"));
-      setEnabled(valEnabled);
+      if (valEnabled) {
+        setEnabled(true);
+      }
+      var valDisabled = (_document$cookie2 = document.cookie) === null || _document$cookie2 === void 0 ? void 0 : _document$cookie2.includes("".concat(Internal.VAL_ENABLE_COOKIE_NAME, "=false"));
+      if (valDisabled) {
+        setEnabled(false);
+      }
+      // If we are in development and Val is not enabled or disabled, enable Val
+      if (process.env.NODE_ENV === "development" && !valEnabled && !valDisabled) {
+        window.location.href = "".concat(window.origin).concat(host, "/enable?redirect_to=").concat(encodeURIComponent(window.location.href));
+      }
     } catch (e) {
       console.warn("Could not read Val enabled state", e);
     }
   }, []);
-  if (isClient && !enabled && process.env.NODE_ENV === "development") {
+  if (isClient && !enabled) {
     if (!api) {
       console.warn("Val does not seem to be configured properly! Please check that you have wrapper your root layout (or _app) with the ValProvider.");
     } else {
-      console.log("Val is disabled. Enable it by going here ".concat(window.origin).concat(api.host, "/enable?redirect_to=").concat(encodeURIComponent(window.location.href), ". NOTE: this message appears because NODE_ENV is set to development."));
+      if (process.env.NODE_ENV === "development") {
+        console.log("Val is disabled. Enable it by going here: ".concat(window.origin).concat(api.host, "/enable?redirect_to=").concat(encodeURIComponent(window.location.href), ". NOTE: this message appears because NODE_ENV is set to development."));
+      }
     }
   }
   if (!isClient || !enabled || !store || !api || !ValContext) {

package/dist/{ValProvider-387a3070.cjs.dev.js → ValProvider-3f3f21ba.cjs.dev.js}

@@ -662,25 +662,37 @@ function ValProvider(_ref) {
     _useState2 = slicedToArray._slicedToArray(_useState, 2),
     isClient = _useState2[0],
     setIsClient = _useState2[1];
-  var _useState3 = React.useState(false),
+  var _useState3 = React.useState(),
     _useState4 = slicedToArray._slicedToArray(_useState3, 2),
     enabled = _useState4[0],
     setEnabled = _useState4[1];
   React.useEffect(function () {
     setIsClient(true);
     try {
-      var _document$cookie;
+      var _document$cookie, _document$cookie2;
       var valEnabled = (_document$cookie = document.cookie) === null || _document$cookie === void 0 ? void 0 : _document$cookie.includes("".concat(core.Internal.VAL_ENABLE_COOKIE_NAME, "=true"));
-      setEnabled(valEnabled);
+      if (valEnabled) {
+        setEnabled(true);
+      }
+      var valDisabled = (_document$cookie2 = document.cookie) === null || _document$cookie2 === void 0 ? void 0 : _document$cookie2.includes("".concat(core.Internal.VAL_ENABLE_COOKIE_NAME, "=false"));
+      if (valDisabled) {
+        setEnabled(false);
+      }
+      // If we are in development and Val is not enabled or disabled, enable Val
+      if (process.env.NODE_ENV === "development" && !valEnabled && !valDisabled) {
+        window.location.href = "".concat(window.origin).concat(host, "/enable?redirect_to=").concat(encodeURIComponent(window.location.href));
+      }
     } catch (e) {
       console.warn("Could not read Val enabled state", e);
     }
   }, []);
-  if (isClient && !enabled && process.env.NODE_ENV === "development") {
+  if (isClient && !enabled) {
     if (!api) {
       console.warn("Val does not seem to be configured properly! Please check that you have wrapper your root layout (or _app) with the ValProvider.");
     } else {
-      console.log("Val is disabled. Enable it by going here ".concat(window.origin).concat(api.host, "/enable?redirect_to=").concat(encodeURIComponent(window.location.href), ". NOTE: this message appears because NODE_ENV is set to development."));
+      if (process.env.NODE_ENV === "development") {
+        console.log("Val is disabled. Enable it by going here: ".concat(window.origin).concat(api.host, "/enable?redirect_to=").concat(encodeURIComponent(window.location.href), ". NOTE: this message appears because NODE_ENV is set to development."));
+      }
     }
   }
   if (!isClient || !enabled || !store || !api || !ValContext) {

package/dist/{ValProvider-52a0ce49.esm.js → ValProvider-87475f3a.esm.js}

@@ -636,25 +636,37 @@ function ValProvider(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     isClient = _useState2[0],
     setIsClient = _useState2[1];
-  var _useState3 = useState(false),
+  var _useState3 = useState(),
     _useState4 = _slicedToArray(_useState3, 2),
     enabled = _useState4[0],
     setEnabled = _useState4[1];
   useEffect(function () {
     setIsClient(true);
     try {
-      var _document$cookie;
+      var _document$cookie, _document$cookie2;
       var valEnabled = (_document$cookie = document.cookie) === null || _document$cookie === void 0 ? void 0 : _document$cookie.includes("".concat(Internal.VAL_ENABLE_COOKIE_NAME, "=true"));
-      setEnabled(valEnabled);
+      if (valEnabled) {
+        setEnabled(true);
+      }
+      var valDisabled = (_document$cookie2 = document.cookie) === null || _document$cookie2 === void 0 ? void 0 : _document$cookie2.includes("".concat(Internal.VAL_ENABLE_COOKIE_NAME, "=false"));
+      if (valDisabled) {
+        setEnabled(false);
+      }
+      // If we are in development and Val is not enabled or disabled, enable Val
+      if (process.env.NODE_ENV === "development" && !valEnabled && !valDisabled) {
+        window.location.href = "".concat(window.origin).concat(host, "/enable?redirect_to=").concat(encodeURIComponent(window.location.href));
+      }
     } catch (e) {
       console.warn("Could not read Val enabled state", e);
     }
   }, []);
-  if (isClient && !enabled && process.env.NODE_ENV === "development") {
+  if (isClient && !enabled) {
     if (!api) {
       console.warn("Val does not seem to be configured properly! Please check that you have wrapper your root layout (or _app) with the ValProvider.");
     } else {
-      console.log("Val is disabled. Enable it by going here ".concat(window.origin).concat(api.host, "/enable?redirect_to=").concat(encodeURIComponent(window.location.href), ". NOTE: this message appears because NODE_ENV is set to development."));
+      if (process.env.NODE_ENV === "development") {
+        console.log("Val is disabled. Enable it by going here: ".concat(window.origin).concat(api.host, "/enable?redirect_to=").concat(encodeURIComponent(window.location.href), ". NOTE: this message appears because NODE_ENV is set to development."));
+      }
     }
   }
   if (!isClient || !enabled || !store || !api || !ValContext) {

package/dist/{ValProvider-e21d3e7d.worker.esm.js → ValProvider-a29fe950.worker.esm.js}

@@ -631,25 +631,37 @@ function ValProvider(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     isClient = _useState2[0],
     setIsClient = _useState2[1];
-  var _useState3 = useState(false),
+  var _useState3 = useState(),
     _useState4 = _slicedToArray(_useState3, 2),
     enabled = _useState4[0],
     setEnabled = _useState4[1];
   useEffect(function () {
     setIsClient(true);
     try {
-      var _document$cookie;
+      var _document$cookie, _document$cookie2;
       var valEnabled = (_document$cookie = document.cookie) === null || _document$cookie === void 0 ? void 0 : _document$cookie.includes("".concat(Internal.VAL_ENABLE_COOKIE_NAME, "=true"));
-      setEnabled(valEnabled);
+      if (valEnabled) {
+        setEnabled(true);
+      }
+      var valDisabled = (_document$cookie2 = document.cookie) === null || _document$cookie2 === void 0 ? void 0 : _document$cookie2.includes("".concat(Internal.VAL_ENABLE_COOKIE_NAME, "=false"));
+      if (valDisabled) {
+        setEnabled(false);
+      }
+      // If we are in development and Val is not enabled or disabled, enable Val
+      if (process.env.NODE_ENV === "development" && !valEnabled && !valDisabled) {
+        window.location.href = "".concat(window.origin).concat(host, "/enable?redirect_to=").concat(encodeURIComponent(window.location.href));
+      }
     } catch (e) {
       console.warn("Could not read Val enabled state", e);
     }
   }, []);
-  if (isClient && !enabled && process.env.NODE_ENV === "development") {
+  if (isClient && !enabled) {
     if (!api) {
       console.warn("Val does not seem to be configured properly! Please check that you have wrapper your root layout (or _app) with the ValProvider.");
     } else {
-      console.log("Val is disabled. Enable it by going here ".concat(window.origin).concat(api.host, "/enable?redirect_to=").concat(encodeURIComponent(window.location.href), ". NOTE: this message appears because NODE_ENV is set to development."));
+      if (process.env.NODE_ENV === "development") {
+        console.log("Val is disabled. Enable it by going here: ".concat(window.origin).concat(api.host, "/enable?redirect_to=").concat(encodeURIComponent(window.location.href), ". NOTE: this message appears because NODE_ENV is set to development."));
+      }
     }
   }
   if (!isClient || !enabled || !store || !api || !ValContext) {

package/dist/ValUI-0f2e6b7d.cjs.prod.js

@@ -8,7 +8,7 @@ var slicedToArray = require('./slicedToArray-a2a426c7.cjs.prod.js');
 var React = require('react');
 var reactDom = require('react-dom');
 var ReactJSXRuntime = require('react/jsx-runtime');
-var ValProvider = require('./ValProvider-8d8e3678.cjs.prod.js');
+var ValProvider = require('./ValProvider-1bf1d7e4.cjs.prod.js');
 
 function ShadowContent(_ref) {
   var root = _ref.root,

package/dist/ValUI-3fac1b71.worker.esm.js

@@ -4,7 +4,7 @@ import { _ as _slicedToArray } from './slicedToArray-d4c4a4ed.worker.esm.js';
 import { useRef, useState, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { useValApi, useValStore } from './ValProvider-e21d3e7d.worker.esm.js';
+import { useValApi, useValStore } from './ValProvider-a29fe950.worker.esm.js';
 
 function ShadowContent(_ref) {
   var root = _ref.root,

package/dist/ValUI-4d8bf402.browser.esm.js

@@ -4,7 +4,7 @@ import { _ as _slicedToArray } from './slicedToArray-85f6bb43.browser.esm.js';
 import { useRef, useState, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { useValApi, useValStore } from './ValProvider-9a2431d9.browser.esm.js';
+import { useValApi, useValStore } from './ValProvider-36edbac3.browser.esm.js';
 
 function ShadowContent(_ref) {
   var root = _ref.root,

package/dist/ValUI-d0e6ed41.esm.js

@@ -4,7 +4,7 @@ import { _ as _slicedToArray } from './slicedToArray-331bebbb.esm.js';
 import { useRef, useState, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { useValApi, useValStore } from './ValProvider-52a0ce49.esm.js';
+import { useValApi, useValStore } from './ValProvider-87475f3a.esm.js';
 
 function ShadowContent(_ref) {
   var root = _ref.root,

package/dist/ValUI-ec9857f2.cjs.dev.js

@@ -8,7 +8,7 @@ var slicedToArray = require('./slicedToArray-a9d0d9cd.cjs.dev.js');
 var React = require('react');
 var reactDom = require('react-dom');
 var ReactJSXRuntime = require('react/jsx-runtime');
-var ValProvider = require('./ValProvider-387a3070.cjs.dev.js');
+var ValProvider = require('./ValProvider-3f3f21ba.cjs.dev.js');
 
 function ShadowContent(_ref) {
   var root = _ref.root,

package/dist/declarations/src/stega/index.d.ts

@@ -1,2 +1,4 @@
 export { autoTagJSX } from "./autoTagJSX.js";
 export { stegaEncode, getModuleIds, stegaClean, type ValEncodedString, type StegaOfSource, } from "./stegaEncode.js";
+export { type Image } from "./stegaEncode.js";
+export { stegaDecodeString } from "./stegaDecodeString.js";

package/dist/declarations/src/stega/stegaDecodeString.d.ts

@@ -0,0 +1 @@
+export declare function stegaDecodeString(encodedString: string): string | undefined;

package/dist/declarations/src/stega/stegaEncode.d.ts

@@ -1,4 +1,4 @@
-import { Json, RichTextSource, RichText } from "@valbuild/core";
+import { Json, RichTextSource, RichText, ImageMetadata } from "@valbuild/core";
 import { FileSource, Source, SourceObject } from "@valbuild/core";
 import { JsonPrimitive } from "@valbuild/core";
 import { SourceArray } from "@valbuild/core";
@@ -146,9 +146,11 @@ export type ValEncodedString = `${string}__VAL_ENCODED_STRING_INVISIBLE_CHARS` &
     length: never;
     [brand]: "ValEncodedString";
 };
-export type StegaOfSource<T extends Source> = Json extends T ? Json : T extends RichTextSource<infer O> ? RichText<O> : T extends FileSource ? {
-    url: ValEncodedString;
-} : T extends SourceObject ? {
+export type Image = {
+    readonly url: ValEncodedString;
+    readonly metadata?: ImageMetadata;
+};
+export type StegaOfSource<T extends Source> = Json extends T ? Json : T extends RichTextSource<infer O> ? RichText<O> : T extends FileSource<infer M> ? M extends ImageMetadata ? Image : T : T extends SourceObject ? {
     [key in keyof T]: StegaOfSource<T[key]>;
 } : T extends SourceArray ? StegaOfSource<T[number]>[] : T extends RawString ? string : string extends T ? ValEncodedString : T extends JsonPrimitive ? T : never;
 export declare function stegaEncode(input: any, opts: {

package/internal/dist/valbuild-react-internal.browser.esm.js

@@ -1,4 +1,4 @@
-export { ValProvider, useValApi, useValStore } from '../../dist/ValProvider-9a2431d9.browser.esm.js';
+export { ValProvider, useValApi, useValStore } from '../../dist/ValProvider-36edbac3.browser.esm.js';
 import React from 'react';
 import { jsx } from 'react/jsx-runtime';
 

package/internal/dist/valbuild-react-internal.cjs.dev.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var ValProvider = require('../../dist/ValProvider-387a3070.cjs.dev.js');
+var ValProvider = require('../../dist/ValProvider-3f3f21ba.cjs.dev.js');
 var React = require('react');
 var ReactJSXRuntime = require('react/jsx-runtime');
 

package/internal/dist/valbuild-react-internal.cjs.prod.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var ValProvider = require('../../dist/ValProvider-8d8e3678.cjs.prod.js');
+var ValProvider = require('../../dist/ValProvider-1bf1d7e4.cjs.prod.js');
 var React = require('react');
 var ReactJSXRuntime = require('react/jsx-runtime');
 

package/internal/dist/valbuild-react-internal.esm.js

@@ -1,4 +1,4 @@
-export { ValProvider, useValApi, useValStore } from '../../dist/ValProvider-52a0ce49.esm.js';
+export { ValProvider, useValApi, useValStore } from '../../dist/ValProvider-87475f3a.esm.js';
 import React from 'react';
 import { jsx } from 'react/jsx-runtime';
 

package/internal/dist/valbuild-react-internal.worker.esm.js

@@ -1,4 +1,4 @@
-export { ValProvider, useValApi, useValStore } from '../../dist/ValProvider-e21d3e7d.worker.esm.js';
+export { ValProvider, useValApi, useValStore } from '../../dist/ValProvider-a29fe950.worker.esm.js';
 import React from 'react';
 import { jsx } from 'react/jsx-runtime';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@valbuild/react",
-  "version": "0.43.1",
+  "version": "0.45.0",
   "private": false,
   "description": "Val - React internal helpers",
   "sideEffects": false,
@@ -9,9 +9,9 @@
     "test": "jest"
   },
   "dependencies": {
-    "@valbuild/core": "~0.43.1",
-    "@valbuild/shared": "~0.43.1",
-    "@valbuild/ui": "~0.43.1",
+    "@valbuild/core": "~0.45.0",
+    "@valbuild/shared": "~0.45.0",
+    "@valbuild/ui": "~0.45.0",
     "@vercel/stega": "^0.1.0",
     "base64-arraybuffer": "^1.0.2",
     "style-to-object": "^0.4.1"

package/stega/dist/valbuild-react-stega.browser.esm.js

@@ -3,11 +3,20 @@ import { _ as _typeof } from '../../dist/typeof-9915e135.browser.esm.js';
 import ReactJSXRuntime__default from 'react/jsx-runtime';
 import jsxRuntimeDev__default from 'react/jsx-dev-runtime';
 import React from 'react';
-import { VERCEL_STEGA_REGEX, vercelStegaDecode, vercelStegaSplit, vercelStegaCombine } from '@vercel/stega';
+import { vercelStegaDecode, VERCEL_STEGA_REGEX, vercelStegaSplit, vercelStegaCombine } from '@vercel/stega';
 import { _ as _defineProperty } from '../../dist/defineProperty-f319cb47.browser.esm.js';
 import { Internal, VAL_EXTENSION, FILE_REF_PROP } from '@valbuild/core';
 import { parseRichTextSource } from '@valbuild/shared/internal';
 
+function stegaDecodeString(encodedString) {
+  var encodedBits = vercelStegaDecode(encodedString);
+  if (encodedBits && _typeof(encodedBits) === "object") {
+    if ("origin" in encodedBits && "data" in encodedBits && _typeof(encodedBits.data) === "object" && encodedBits.data && "valPath" in encodedBits.data && typeof encodedBits.data.valPath === "string") {
+      return encodedBits.data.valPath;
+    }
+  }
+}
+
 var isIntrinsicElement = function isIntrinsicElement(type) {
   // TODO: think this is not correct, but good enough for now?
   return typeof type === "string";
@@ -20,20 +29,16 @@ var addValPathIfFound = function addValPathIfFound(type, props) {
         key = _Object$entries$_i[0],
         value = _Object$entries$_i[1];
       if (typeof value === "string" && value.match(VERCEL_STEGA_REGEX)) {
-        var encodedBits = vercelStegaDecode(value);
-        if (!encodedBits || _typeof(encodedBits) !== "object") continue;
-        if ("origin" in encodedBits && "data" in encodedBits && _typeof(encodedBits.data) === "object" && encodedBits.data && "valPath" in encodedBits.data) {
-          var _encodedBits$data;
-          var valPath = encodedBits === null || encodedBits === void 0 || (_encodedBits$data = encodedBits.data) === null || _encodedBits$data === void 0 ? void 0 : _encodedBits$data.valPath;
-          if (valPath) {
-            valSources.push(valPath);
-            props[key] = isIntrinsicElement(type) ? vercelStegaSplit(value).cleaned : value;
-            props["data-val-attr-".concat(key)] = valPath;
-          }
+        var valPath = stegaDecodeString(value);
+        var attr = "data-val-attr-".concat(key.toLowerCase());
+        if (valPath && !props[attr]) {
+          valSources.push(valPath);
+          props[key] = isIntrinsicElement(type) ? vercelStegaSplit(value).cleaned : value;
+          props[attr] = valPath;
         }
       }
     }
-    if (valSources.length > 0) {
+    if (valSources.length > 0 && !props["data-val-path"]) {
       props["data-val-path"] = valSources.join(",");
     }
   }
@@ -285,4 +290,4 @@ function getModuleIds(input) {
   return Array.from(modules);
 }
 
-export { autoTagJSX, getModuleIds, stegaClean, stegaEncode };
+export { autoTagJSX, getModuleIds, stegaClean, stegaDecodeString, stegaEncode };

package/stega/dist/valbuild-react-stega.cjs.dev.js

@@ -18,6 +18,15 @@ var ReactJSXRuntime__default = /*#__PURE__*/_interopDefault(ReactJSXRuntime);
 var jsxRuntimeDev__default = /*#__PURE__*/_interopDefault(jsxRuntimeDev);
 var React__default = /*#__PURE__*/_interopDefault(React);
 
+function stegaDecodeString(encodedString) {
+  var encodedBits = stega.vercelStegaDecode(encodedString);
+  if (encodedBits && _typeof._typeof(encodedBits) === "object") {
+    if ("origin" in encodedBits && "data" in encodedBits && _typeof._typeof(encodedBits.data) === "object" && encodedBits.data && "valPath" in encodedBits.data && typeof encodedBits.data.valPath === "string") {
+      return encodedBits.data.valPath;
+    }
+  }
+}
+
 var isIntrinsicElement = function isIntrinsicElement(type) {
   // TODO: think this is not correct, but good enough for now?
   return typeof type === "string";
@@ -30,20 +39,16 @@ var addValPathIfFound = function addValPathIfFound(type, props) {
         key = _Object$entries$_i[0],
         value = _Object$entries$_i[1];
       if (typeof value === "string" && value.match(stega.VERCEL_STEGA_REGEX)) {
-        var encodedBits = stega.vercelStegaDecode(value);
-        if (!encodedBits || _typeof._typeof(encodedBits) !== "object") continue;
-        if ("origin" in encodedBits && "data" in encodedBits && _typeof._typeof(encodedBits.data) === "object" && encodedBits.data && "valPath" in encodedBits.data) {
-          var _encodedBits$data;
-          var valPath = encodedBits === null || encodedBits === void 0 || (_encodedBits$data = encodedBits.data) === null || _encodedBits$data === void 0 ? void 0 : _encodedBits$data.valPath;
-          if (valPath) {
-            valSources.push(valPath);
-            props[key] = isIntrinsicElement(type) ? stega.vercelStegaSplit(value).cleaned : value;
-            props["data-val-attr-".concat(key)] = valPath;
-          }
+        var valPath = stegaDecodeString(value);
+        var attr = "data-val-attr-".concat(key.toLowerCase());
+        if (valPath && !props[attr]) {
+          valSources.push(valPath);
+          props[key] = isIntrinsicElement(type) ? stega.vercelStegaSplit(value).cleaned : value;
+          props[attr] = valPath;
         }
       }
     }
-    if (valSources.length > 0) {
+    if (valSources.length > 0 && !props["data-val-path"]) {
       props["data-val-path"] = valSources.join(",");
     }
   }
@@ -298,4 +303,5 @@ function getModuleIds(input) {
 exports.autoTagJSX = autoTagJSX;
 exports.getModuleIds = getModuleIds;
 exports.stegaClean = stegaClean;
+exports.stegaDecodeString = stegaDecodeString;
 exports.stegaEncode = stegaEncode;

package/stega/dist/valbuild-react-stega.cjs.prod.js

@@ -18,6 +18,15 @@ var ReactJSXRuntime__default = /*#__PURE__*/_interopDefault(ReactJSXRuntime);
 var jsxRuntimeDev__default = /*#__PURE__*/_interopDefault(jsxRuntimeDev);
 var React__default = /*#__PURE__*/_interopDefault(React);
 
+function stegaDecodeString(encodedString) {
+  var encodedBits = stega.vercelStegaDecode(encodedString);
+  if (encodedBits && _typeof._typeof(encodedBits) === "object") {
+    if ("origin" in encodedBits && "data" in encodedBits && _typeof._typeof(encodedBits.data) === "object" && encodedBits.data && "valPath" in encodedBits.data && typeof encodedBits.data.valPath === "string") {
+      return encodedBits.data.valPath;
+    }
+  }
+}
+
 var isIntrinsicElement = function isIntrinsicElement(type) {
   // TODO: think this is not correct, but good enough for now?
   return typeof type === "string";
@@ -30,20 +39,16 @@ var addValPathIfFound = function addValPathIfFound(type, props) {
         key = _Object$entries$_i[0],
         value = _Object$entries$_i[1];
       if (typeof value === "string" && value.match(stega.VERCEL_STEGA_REGEX)) {
-        var encodedBits = stega.vercelStegaDecode(value);
-        if (!encodedBits || _typeof._typeof(encodedBits) !== "object") continue;
-        if ("origin" in encodedBits && "data" in encodedBits && _typeof._typeof(encodedBits.data) === "object" && encodedBits.data && "valPath" in encodedBits.data) {
-          var _encodedBits$data;
-          var valPath = encodedBits === null || encodedBits === void 0 || (_encodedBits$data = encodedBits.data) === null || _encodedBits$data === void 0 ? void 0 : _encodedBits$data.valPath;
-          if (valPath) {
-            valSources.push(valPath);
-            props[key] = isIntrinsicElement(type) ? stega.vercelStegaSplit(value).cleaned : value;
-            props["data-val-attr-".concat(key)] = valPath;
-          }
+        var valPath = stegaDecodeString(value);
+        var attr = "data-val-attr-".concat(key.toLowerCase());
+        if (valPath && !props[attr]) {
+          valSources.push(valPath);
+          props[key] = isIntrinsicElement(type) ? stega.vercelStegaSplit(value).cleaned : value;
+          props[attr] = valPath;
         }
       }
     }
-    if (valSources.length > 0) {
+    if (valSources.length > 0 && !props["data-val-path"]) {
       props["data-val-path"] = valSources.join(",");
     }
   }
@@ -298,4 +303,5 @@ function getModuleIds(input) {
 exports.autoTagJSX = autoTagJSX;
 exports.getModuleIds = getModuleIds;
 exports.stegaClean = stegaClean;
+exports.stegaDecodeString = stegaDecodeString;
 exports.stegaEncode = stegaEncode;

package/stega/dist/valbuild-react-stega.esm.js

@@ -3,11 +3,20 @@ import { _ as _typeof } from '../../dist/typeof-a1531d8f.esm.js';
 import ReactJSXRuntime__default from 'react/jsx-runtime';
 import jsxRuntimeDev__default from 'react/jsx-dev-runtime';
 import React from 'react';
-import { VERCEL_STEGA_REGEX, vercelStegaDecode, vercelStegaSplit, vercelStegaCombine } from '@vercel/stega';
+import { vercelStegaDecode, VERCEL_STEGA_REGEX, vercelStegaSplit, vercelStegaCombine } from '@vercel/stega';
 import { _ as _defineProperty } from '../../dist/defineProperty-12b5bd29.esm.js';
 import { Internal, VAL_EXTENSION, FILE_REF_PROP } from '@valbuild/core';
 import { parseRichTextSource } from '@valbuild/shared/internal';
 
+function stegaDecodeString(encodedString) {
+  var encodedBits = vercelStegaDecode(encodedString);
+  if (encodedBits && _typeof(encodedBits) === "object") {
+    if ("origin" in encodedBits && "data" in encodedBits && _typeof(encodedBits.data) === "object" && encodedBits.data && "valPath" in encodedBits.data && typeof encodedBits.data.valPath === "string") {
+      return encodedBits.data.valPath;
+    }
+  }
+}
+
 var isIntrinsicElement = function isIntrinsicElement(type) {
   // TODO: think this is not correct, but good enough for now?
   return typeof type === "string";
@@ -20,20 +29,16 @@ var addValPathIfFound = function addValPathIfFound(type, props) {
         key = _Object$entries$_i[0],
         value = _Object$entries$_i[1];
       if (typeof value === "string" && value.match(VERCEL_STEGA_REGEX)) {
-        var encodedBits = vercelStegaDecode(value);
-        if (!encodedBits || _typeof(encodedBits) !== "object") continue;
-        if ("origin" in encodedBits && "data" in encodedBits && _typeof(encodedBits.data) === "object" && encodedBits.data && "valPath" in encodedBits.data) {
-          var _encodedBits$data;
-          var valPath = encodedBits === null || encodedBits === void 0 || (_encodedBits$data = encodedBits.data) === null || _encodedBits$data === void 0 ? void 0 : _encodedBits$data.valPath;
-          if (valPath) {
-            valSources.push(valPath);
-            props[key] = isIntrinsicElement(type) ? vercelStegaSplit(value).cleaned : value;
-            props["data-val-attr-".concat(key)] = valPath;
-          }
+        var valPath = stegaDecodeString(value);
+        var attr = "data-val-attr-".concat(key.toLowerCase());
+        if (valPath && !props[attr]) {
+          valSources.push(valPath);
+          props[key] = isIntrinsicElement(type) ? vercelStegaSplit(value).cleaned : value;
+          props[attr] = valPath;
         }
       }
     }
-    if (valSources.length > 0) {
+    if (valSources.length > 0 && !props["data-val-path"]) {
       props["data-val-path"] = valSources.join(",");
     }
   }
@@ -285,4 +290,4 @@ function getModuleIds(input) {
   return Array.from(modules);
 }
 
-export { autoTagJSX, getModuleIds, stegaClean, stegaEncode };
+export { autoTagJSX, getModuleIds, stegaClean, stegaDecodeString, stegaEncode };

package/stega/dist/valbuild-react-stega.worker.esm.js

@@ -3,11 +3,20 @@ import { _ as _typeof } from '../../dist/typeof-e0c837cc.worker.esm.js';
 import ReactJSXRuntime__default from 'react/jsx-runtime';
 import jsxRuntimeDev__default from 'react/jsx-dev-runtime';
 import React from 'react';
-import { VERCEL_STEGA_REGEX, vercelStegaDecode, vercelStegaSplit, vercelStegaCombine } from '@vercel/stega';
+import { vercelStegaDecode, VERCEL_STEGA_REGEX, vercelStegaSplit, vercelStegaCombine } from '@vercel/stega';
 import { _ as _defineProperty } from '../../dist/defineProperty-a4bf59bc.worker.esm.js';
 import { Internal, VAL_EXTENSION, FILE_REF_PROP } from '@valbuild/core';
 import { parseRichTextSource } from '@valbuild/shared/internal';
 
+function stegaDecodeString(encodedString) {
+  var encodedBits = vercelStegaDecode(encodedString);
+  if (encodedBits && _typeof(encodedBits) === "object") {
+    if ("origin" in encodedBits && "data" in encodedBits && _typeof(encodedBits.data) === "object" && encodedBits.data && "valPath" in encodedBits.data && typeof encodedBits.data.valPath === "string") {
+      return encodedBits.data.valPath;
+    }
+  }
+}
+
 var isIntrinsicElement = function isIntrinsicElement(type) {
   // TODO: think this is not correct, but good enough for now?
   return typeof type === "string";
@@ -20,20 +29,16 @@ var addValPathIfFound = function addValPathIfFound(type, props) {
         key = _Object$entries$_i[0],
         value = _Object$entries$_i[1];
       if (typeof value === "string" && value.match(VERCEL_STEGA_REGEX)) {
-        var encodedBits = vercelStegaDecode(value);
-        if (!encodedBits || _typeof(encodedBits) !== "object") continue;
-        if ("origin" in encodedBits && "data" in encodedBits && _typeof(encodedBits.data) === "object" && encodedBits.data && "valPath" in encodedBits.data) {
-          var _encodedBits$data;
-          var valPath = encodedBits === null || encodedBits === void 0 || (_encodedBits$data = encodedBits.data) === null || _encodedBits$data === void 0 ? void 0 : _encodedBits$data.valPath;
-          if (valPath) {
-            valSources.push(valPath);
-            props[key] = isIntrinsicElement(type) ? vercelStegaSplit(value).cleaned : value;
-            props["data-val-attr-".concat(key)] = valPath;
-          }
+        var valPath = stegaDecodeString(value);
+        var attr = "data-val-attr-".concat(key.toLowerCase());
+        if (valPath && !props[attr]) {
+          valSources.push(valPath);
+          props[key] = isIntrinsicElement(type) ? vercelStegaSplit(value).cleaned : value;
+          props[attr] = valPath;
         }
       }
     }
-    if (valSources.length > 0) {
+    if (valSources.length > 0 && !props["data-val-path"]) {
       props["data-val-path"] = valSources.join(",");
     }
   }
@@ -285,4 +290,4 @@ function getModuleIds(input) {
   return Array.from(modules);
 }
 
-export { autoTagJSX, getModuleIds, stegaClean, stegaEncode };
+export { autoTagJSX, getModuleIds, stegaClean, stegaDecodeString, stegaEncode };

package/dist/ValProvider-8d8e3678.cjs.js

@@ -1,7 +0,0 @@
-'use strict';
-
-if (process.env.NODE_ENV === "production") {
-  module.exports = require("./ValProvider-8d8e3678.cjs.prod.js");
-} else {
-  module.exports = require("./ValProvider-8d8e3678.cjs.dev.js");
-}