@valbuild/react 0.31.0 → 0.33.0

package/dist/{ValProviderInternal-61d82ec0.esm.js → ValProvider-0620664e.esm.js}

@@ -1,11 +1,10 @@
 'use client';
-import React, { useContext, useMemo } from 'react';
 import { a as _unsupportedIterableToArray, _ as _slicedToArray } from './slicedToArray-331bebbb.esm.js';
+import React, { useContext, useMemo, useState, useEffect, lazy } from 'react';
 import { a as _toPropertyKey, _ as _defineProperty } from './defineProperty-12b5bd29.esm.js';
 import { result } from '@valbuild/core/fp';
-import { ValApi } from '@valbuild/core';
-import ValUI from './ValUI-c969250a.esm.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { ValApi, Internal } from '@valbuild/core';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 
 function _createForOfIteratorHelper(o, allowArrayLike) {
   var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
@@ -582,34 +581,83 @@ function createSubscriberId(moduleIds) {
 }
 
 var useValStore = function useValStore() {
+  if (!ValContext) {
+    return undefined;
+  }
   return useContext(ValContext).valStore;
 };
-
-// NOTE: ValProviderInternal might not be defined if the user is not using ValProvider
-// Addendum: This happens when this module will not be imported if the window === undefined. Not quite sure why this happens though. Some investigations might be in order.
 var useValApi = function useValApi() {
+  if (!ValContext) {
+    return undefined;
+  }
   return useContext(ValContext).valApi;
 };
-var ValContext = /*#__PURE__*/React.createContext({
+var ValContext = typeof window !== "undefined" ? /*#__PURE__*/React.createContext({
   valStore: undefined,
   valApi: undefined
+}) : undefined;
+var ValUI = /*#__PURE__*/lazy(function () {
+  return import('./ValUI-4ba5efea.esm.js');
 });
-function ValProviderInternal(_ref) {
+function ValProvider(_ref) {
   var children = _ref.children;
   var host = "/api/val";
-  var valApi = useMemo(function () {
+  var api = useMemo(function () {
     return new ValApi(host);
   }, [host]);
-  var valStore = useMemo(function () {
-    return new ValStore(valApi);
-  }, [valApi]);
+  var store = useMemo(function () {
+    return new ValStore(api);
+  }, [api]);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isClient = _useState2[0],
+    setIsClient = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    enabled = _useState4[0],
+    setEnabled = _useState4[1];
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2);
+    _useState6[0];
+    var setDraftMode = _useState6[1]; // TODO: if enabled, but not in draft mode: show something
+
+  useEffect(function () {
+    setIsClient(true);
+    try {
+      var _document$cookie;
+      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);
+    } catch (e) {
+      console.warn("Could not read Val enabled state", e);
+    }
+    try {
+      var _document$cookie2;
+      var valDraftMode = (_document$cookie2 = document.cookie) === null || _document$cookie2 === void 0 ? void 0 : _document$cookie2.includes("".concat(Internal.VAL_DRAFT_MODE_COOKIE, "=true"));
+      setDraftMode(valDraftMode);
+    } catch (e) {
+      console.warn("Could not read Val draft mode", e);
+    }
+  }, []);
+  if (isClient && !enabled && process.env.NODE_ENV === "development") {
+    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) {
+    return /*#__PURE__*/jsx(Fragment, {
+      children: children
+    });
+  }
   return /*#__PURE__*/jsxs(ValContext.Provider, {
     value: {
-      valApi: valApi,
-      valStore: valStore
+      valApi: api,
+      valStore: store
     },
     children: [children, /*#__PURE__*/jsx(ValUI, {})]
   });
 }
 
-export { ValContext, ValProviderInternal as default, useValApi, useValStore };
+export { ValContext, ValProvider, useValApi, useValStore };

package/dist/{ValProviderInternal-62bd0c14.browser.esm.js → ValProvider-14179159.browser.esm.js}

@@ -1,11 +1,10 @@
 'use client';
-import React, { useContext, useMemo } from 'react';
 import { a as _unsupportedIterableToArray, _ as _slicedToArray } from './slicedToArray-85f6bb43.browser.esm.js';
+import React, { useContext, useMemo, useState, useEffect, lazy } from 'react';
 import { a as _toPropertyKey, _ as _defineProperty } from './defineProperty-f319cb47.browser.esm.js';
 import { result } from '@valbuild/core/fp';
-import { ValApi } from '@valbuild/core';
-import ValUI from './ValUI-d049362e.browser.esm.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { ValApi, Internal } from '@valbuild/core';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 
 function _createForOfIteratorHelper(o, allowArrayLike) {
   var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
@@ -582,34 +581,83 @@ function createSubscriberId(moduleIds) {
 }
 
 var useValStore = function useValStore() {
+  if (!ValContext) {
+    return undefined;
+  }
   return useContext(ValContext).valStore;
 };
-
-// NOTE: ValProviderInternal might not be defined if the user is not using ValProvider
-// Addendum: This happens when this module will not be imported if the window === undefined. Not quite sure why this happens though. Some investigations might be in order.
 var useValApi = function useValApi() {
+  if (!ValContext) {
+    return undefined;
+  }
   return useContext(ValContext).valApi;
 };
 var ValContext = /*#__PURE__*/React.createContext({
   valStore: undefined,
   valApi: undefined
+}) ;
+var ValUI = /*#__PURE__*/lazy(function () {
+  return import('./ValUI-75338157.browser.esm.js');
 });
-function ValProviderInternal(_ref) {
+function ValProvider(_ref) {
   var children = _ref.children;
   var host = "/api/val";
-  var valApi = useMemo(function () {
+  var api = useMemo(function () {
     return new ValApi(host);
   }, [host]);
-  var valStore = useMemo(function () {
-    return new ValStore(valApi);
-  }, [valApi]);
+  var store = useMemo(function () {
+    return new ValStore(api);
+  }, [api]);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isClient = _useState2[0],
+    setIsClient = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    enabled = _useState4[0],
+    setEnabled = _useState4[1];
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2);
+    _useState6[0];
+    var setDraftMode = _useState6[1]; // TODO: if enabled, but not in draft mode: show something
+
+  useEffect(function () {
+    setIsClient(true);
+    try {
+      var _document$cookie;
+      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);
+    } catch (e) {
+      console.warn("Could not read Val enabled state", e);
+    }
+    try {
+      var _document$cookie2;
+      var valDraftMode = (_document$cookie2 = document.cookie) === null || _document$cookie2 === void 0 ? void 0 : _document$cookie2.includes("".concat(Internal.VAL_DRAFT_MODE_COOKIE, "=true"));
+      setDraftMode(valDraftMode);
+    } catch (e) {
+      console.warn("Could not read Val draft mode", e);
+    }
+  }, []);
+  if (isClient && !enabled && process.env.NODE_ENV === "development") {
+    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) {
+    return /*#__PURE__*/jsx(Fragment, {
+      children: children
+    });
+  }
   return /*#__PURE__*/jsxs(ValContext.Provider, {
     value: {
-      valApi: valApi,
-      valStore: valStore
+      valApi: api,
+      valStore: store
     },
     children: [children, /*#__PURE__*/jsx(ValUI, {})]
   });
 }
 
-export { ValContext, ValProviderInternal as default, useValApi, useValStore };
+export { ValContext, ValProvider, useValApi, useValStore };

package/dist/{ValProviderInternal-d20f3c34.cjs.dev.js → ValProvider-7513c6ec.cjs.dev.js}

@@ -3,18 +3,34 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
 var slicedToArray = require('./slicedToArray-a9d0d9cd.cjs.dev.js');
+var React = require('react');
 var defineProperty = require('./defineProperty-c82a49b0.cjs.dev.js');
 var fp = require('@valbuild/core/fp');
 var core = require('@valbuild/core');
-var ValUI = require('./ValUI-82ba086a.cjs.dev.js');
 var ReactJSXRuntime = require('react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
 var React__default = /*#__PURE__*/_interopDefault(React);
-var ValUI__default = /*#__PURE__*/_interopDefault(ValUI);
 
 function _createForOfIteratorHelper(o, allowArrayLike) {
   var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
@@ -591,37 +607,86 @@ function createSubscriberId(moduleIds) {
 }
 
 var useValStore = function useValStore() {
+  if (!ValContext) {
+    return undefined;
+  }
   return React.useContext(ValContext).valStore;
 };
-
-// NOTE: ValProviderInternal might not be defined if the user is not using ValProvider
-// Addendum: This happens when this module will not be imported if the window === undefined. Not quite sure why this happens though. Some investigations might be in order.
 var useValApi = function useValApi() {
+  if (!ValContext) {
+    return undefined;
+  }
   return React.useContext(ValContext).valApi;
 };
-var ValContext = /*#__PURE__*/React__default["default"].createContext({
+var ValContext = typeof window !== "undefined" ? /*#__PURE__*/React__default["default"].createContext({
   valStore: undefined,
   valApi: undefined
+}) : undefined;
+var ValUI = /*#__PURE__*/React.lazy(function () {
+  return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('./ValUI-33562b10.cjs.dev.js')); });
 });
-function ValProviderInternal(_ref) {
+function ValProvider(_ref) {
   var children = _ref.children;
   var host = "/api/val";
-  var valApi = React.useMemo(function () {
+  var api = React.useMemo(function () {
     return new core.ValApi(host);
   }, [host]);
-  var valStore = React.useMemo(function () {
-    return new ValStore(valApi);
-  }, [valApi]);
+  var store = React.useMemo(function () {
+    return new ValStore(api);
+  }, [api]);
+  var _useState = React.useState(false),
+    _useState2 = slicedToArray._slicedToArray(_useState, 2),
+    isClient = _useState2[0],
+    setIsClient = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = slicedToArray._slicedToArray(_useState3, 2),
+    enabled = _useState4[0],
+    setEnabled = _useState4[1];
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  var _useState5 = React.useState(false),
+    _useState6 = slicedToArray._slicedToArray(_useState5, 2);
+    _useState6[0];
+    var setDraftMode = _useState6[1]; // TODO: if enabled, but not in draft mode: show something
+
+  React.useEffect(function () {
+    setIsClient(true);
+    try {
+      var _document$cookie;
+      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);
+    } catch (e) {
+      console.warn("Could not read Val enabled state", e);
+    }
+    try {
+      var _document$cookie2;
+      var valDraftMode = (_document$cookie2 = document.cookie) === null || _document$cookie2 === void 0 ? void 0 : _document$cookie2.includes("".concat(core.Internal.VAL_DRAFT_MODE_COOKIE, "=true"));
+      setDraftMode(valDraftMode);
+    } catch (e) {
+      console.warn("Could not read Val draft mode", e);
+    }
+  }, []);
+  if (isClient && !enabled && process.env.NODE_ENV === "development") {
+    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) {
+    return /*#__PURE__*/ReactJSXRuntime.jsx(ReactJSXRuntime.Fragment, {
+      children: children
+    });
+  }
   return /*#__PURE__*/ReactJSXRuntime.jsxs(ValContext.Provider, {
     value: {
-      valApi: valApi,
-      valStore: valStore
+      valApi: api,
+      valStore: store
     },
-    children: [children, /*#__PURE__*/ReactJSXRuntime.jsx(ValUI__default["default"], {})]
+    children: [children, /*#__PURE__*/ReactJSXRuntime.jsx(ValUI, {})]
   });
 }
 
 exports.ValContext = ValContext;
-exports["default"] = ValProviderInternal;
+exports.ValProvider = ValProvider;
 exports.useValApi = useValApi;
 exports.useValStore = useValStore;

package/dist/ValProvider-b2e83d12.cjs.js

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

package/dist/{ValProviderInternal-757e00dc.cjs.prod.js → ValProvider-b2e83d12.cjs.prod.js}

@@ -3,18 +3,34 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
 var slicedToArray = require('./slicedToArray-a2a426c7.cjs.prod.js');
+var React = require('react');
 var defineProperty = require('./defineProperty-36ed93cd.cjs.prod.js');
 var fp = require('@valbuild/core/fp');
 var core = require('@valbuild/core');
-var ValUI = require('./ValUI-596c6129.cjs.prod.js');
 var ReactJSXRuntime = require('react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
 var React__default = /*#__PURE__*/_interopDefault(React);
-var ValUI__default = /*#__PURE__*/_interopDefault(ValUI);
 
 function _createForOfIteratorHelper(o, allowArrayLike) {
   var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
@@ -591,37 +607,86 @@ function createSubscriberId(moduleIds) {
 }
 
 var useValStore = function useValStore() {
+  if (!ValContext) {
+    return undefined;
+  }
   return React.useContext(ValContext).valStore;
 };
-
-// NOTE: ValProviderInternal might not be defined if the user is not using ValProvider
-// Addendum: This happens when this module will not be imported if the window === undefined. Not quite sure why this happens though. Some investigations might be in order.
 var useValApi = function useValApi() {
+  if (!ValContext) {
+    return undefined;
+  }
   return React.useContext(ValContext).valApi;
 };
-var ValContext = /*#__PURE__*/React__default["default"].createContext({
+var ValContext = typeof window !== "undefined" ? /*#__PURE__*/React__default["default"].createContext({
   valStore: undefined,
   valApi: undefined
+}) : undefined;
+var ValUI = /*#__PURE__*/React.lazy(function () {
+  return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('./ValUI-8ea90ec3.cjs.prod.js')); });
 });
-function ValProviderInternal(_ref) {
+function ValProvider(_ref) {
   var children = _ref.children;
   var host = "/api/val";
-  var valApi = React.useMemo(function () {
+  var api = React.useMemo(function () {
     return new core.ValApi(host);
   }, [host]);
-  var valStore = React.useMemo(function () {
-    return new ValStore(valApi);
-  }, [valApi]);
+  var store = React.useMemo(function () {
+    return new ValStore(api);
+  }, [api]);
+  var _useState = React.useState(false),
+    _useState2 = slicedToArray._slicedToArray(_useState, 2),
+    isClient = _useState2[0],
+    setIsClient = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = slicedToArray._slicedToArray(_useState3, 2),
+    enabled = _useState4[0],
+    setEnabled = _useState4[1];
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  var _useState5 = React.useState(false),
+    _useState6 = slicedToArray._slicedToArray(_useState5, 2);
+    _useState6[0];
+    var setDraftMode = _useState6[1]; // TODO: if enabled, but not in draft mode: show something
+
+  React.useEffect(function () {
+    setIsClient(true);
+    try {
+      var _document$cookie;
+      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);
+    } catch (e) {
+      console.warn("Could not read Val enabled state", e);
+    }
+    try {
+      var _document$cookie2;
+      var valDraftMode = (_document$cookie2 = document.cookie) === null || _document$cookie2 === void 0 ? void 0 : _document$cookie2.includes("".concat(core.Internal.VAL_DRAFT_MODE_COOKIE, "=true"));
+      setDraftMode(valDraftMode);
+    } catch (e) {
+      console.warn("Could not read Val draft mode", e);
+    }
+  }, []);
+  if (isClient && !enabled &&         "production" === "development") {
+    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) {
+    return /*#__PURE__*/ReactJSXRuntime.jsx(ReactJSXRuntime.Fragment, {
+      children: children
+    });
+  }
   return /*#__PURE__*/ReactJSXRuntime.jsxs(ValContext.Provider, {
     value: {
-      valApi: valApi,
-      valStore: valStore
+      valApi: api,
+      valStore: store
     },
-    children: [children, /*#__PURE__*/ReactJSXRuntime.jsx(ValUI__default["default"], {})]
+    children: [children, /*#__PURE__*/ReactJSXRuntime.jsx(ValUI, {})]
   });
 }
 
 exports.ValContext = ValContext;
-exports["default"] = ValProviderInternal;
+exports.ValProvider = ValProvider;
 exports.useValApi = useValApi;
 exports.useValStore = useValStore;

package/dist/{ValProviderInternal-f64d019a.worker.esm.js → ValProvider-d46ec16a.worker.esm.js}

@@ -1,11 +1,10 @@
 'use client';
-import React, { useContext, useMemo } from 'react';
 import { a as _unsupportedIterableToArray, _ as _slicedToArray } from './slicedToArray-d4c4a4ed.worker.esm.js';
+import { useMemo, useState, useEffect, lazy } from 'react';
 import { a as _toPropertyKey, _ as _defineProperty } from './defineProperty-a4bf59bc.worker.esm.js';
 import { result } from '@valbuild/core/fp';
-import { ValApi } from '@valbuild/core';
-import ValUI from './ValUI-eb3ed9e3.worker.esm.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { ValApi, Internal } from '@valbuild/core';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 
 function _createForOfIteratorHelper(o, allowArrayLike) {
   var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
@@ -582,34 +581,78 @@ function createSubscriberId(moduleIds) {
 }
 
 var useValStore = function useValStore() {
-  return useContext(ValContext).valStore;
+  {
+    return undefined;
+  }
 };
-
-// NOTE: ValProviderInternal might not be defined if the user is not using ValProvider
-// Addendum: This happens when this module will not be imported if the window === undefined. Not quite sure why this happens though. Some investigations might be in order.
 var useValApi = function useValApi() {
-  return useContext(ValContext).valApi;
+  {
+    return undefined;
+  }
 };
-var ValContext = /*#__PURE__*/React.createContext({
-  valStore: undefined,
-  valApi: undefined
+var ValContext = undefined;
+var ValUI = /*#__PURE__*/lazy(function () {
+  return import('./ValUI-3b9f6c17.worker.esm.js');
 });
-function ValProviderInternal(_ref) {
+function ValProvider(_ref) {
   var children = _ref.children;
   var host = "/api/val";
-  var valApi = useMemo(function () {
+  var api = useMemo(function () {
     return new ValApi(host);
   }, [host]);
-  var valStore = useMemo(function () {
-    return new ValStore(valApi);
-  }, [valApi]);
+  var store = useMemo(function () {
+    return new ValStore(api);
+  }, [api]);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isClient = _useState2[0],
+    setIsClient = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    enabled = _useState4[0],
+    setEnabled = _useState4[1];
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2);
+    _useState6[0];
+    var setDraftMode = _useState6[1]; // TODO: if enabled, but not in draft mode: show something
+
+  useEffect(function () {
+    setIsClient(true);
+    try {
+      var _document$cookie;
+      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);
+    } catch (e) {
+      console.warn("Could not read Val enabled state", e);
+    }
+    try {
+      var _document$cookie2;
+      var valDraftMode = (_document$cookie2 = document.cookie) === null || _document$cookie2 === void 0 ? void 0 : _document$cookie2.includes("".concat(Internal.VAL_DRAFT_MODE_COOKIE, "=true"));
+      setDraftMode(valDraftMode);
+    } catch (e) {
+      console.warn("Could not read Val draft mode", e);
+    }
+  }, []);
+  if (isClient && !enabled && process.env.NODE_ENV === "development") {
+    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) {
+    return /*#__PURE__*/jsx(Fragment, {
+      children: children
+    });
+  }
   return /*#__PURE__*/jsxs(ValContext.Provider, {
     value: {
-      valApi: valApi,
-      valStore: valStore
+      valApi: api,
+      valStore: store
     },
     children: [children, /*#__PURE__*/jsx(ValUI, {})]
   });
 }
 
-export { ValContext, ValProviderInternal as default, useValApi, useValStore };
+export { ValContext, ValProvider, useValApi, useValStore };