@valbuild/next 0.102.0 → 0.103.1

package/dist/fallbackColors-5ead2c26.esm.js

@@ -0,0 +1,58 @@
+import { VAL_CONFIG_SESSION_STORAGE_KEY } from '@valbuild/shared/internal';
+import React from 'react';
+import { _ as _slicedToArray } from './slicedToArray-aa291011.esm.js';
+import { Internal } from '@valbuild/core';
+import { VERSION } from '@valbuild/ui';
+
+/*
+ * See the useConfig.tsx where the config is loaded from session storage
+ */
+function useConfigStorageSave(config) {
+  React.useEffect(function () {
+    sessionStorage.setItem(VAL_CONFIG_SESSION_STORAGE_KEY, JSON.stringify(config));
+  }, [config]);
+}
+
+// All DOM element that are outside the Shadow DOM should use this class name prefix
+var valPrefixedClass = "val-prefix-" + Internal.getSHA256Hash(new TextEncoder().encode(VERSION || "")).slice(0, 8) + "-";
+var prefixStyles = function prefixStyles(styles) {
+  return Object.entries(styles).map(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      key = _ref2[0],
+      value = _ref2[1];
+    return ".".concat(valPrefixedClass).concat(key.replace(/\//g, "\\/"), " { ").concat(value, " }");
+  }).join("\n");
+};
+var cn = function cn(className) {
+  return className.map(function (c) {
+    return "".concat(valPrefixedClass).concat(c);
+  }).join(" ");
+};
+
+/**
+ * Colours for the moments before Val's own stylesheet exists.
+ *
+ * Two of them, and they are not interchangeable. The studio's loading screen
+ * covers the whole viewport and is replaced by the studio's canvas, so it has
+ * to match `--bg-canvas`. The loading pill sits on the customer's page as a
+ * piece of Val's floating chrome, so it has to match `--bg-float`. Getting
+ * them the wrong way round is not invisible: the studio flashes one colour and
+ * repaints in another the moment the stylesheet lands.
+ *
+ * Hardcoded because that is the whole point — these are used exactly when the
+ * variables that define them are not loaded yet. They are copies, so they go
+ * stale silently: if `--bg-canvas` or `--bg-float` changes in
+ * `packages/ui/spa/index.css`, change them here too.
+ */
+
+/** `--bg-canvas`, dark. The studio's own background. */
+var canvasDarkBg = "#08080a";
+/** `--bg-canvas`, light. */
+var canvasLightBg = "#fafafa";
+
+/** `--bg-float`, dark. Val's chrome, floating over the customer's page. */
+var floatDarkBg = "#131316";
+/** `--bg-float`, light. */
+var floatLightBg = "#ffffff";
+
+export { canvasDarkBg as a, canvasLightBg as b, cn as c, floatLightBg as d, floatDarkBg as f, prefixStyles as p, useConfigStorageSave as u, valPrefixedClass as v };

package/dist/{cssUtils-9c11102f.cjs.dev.js → fallbackColors-9a2ac53a.cjs.dev.js}

@@ -35,7 +35,37 @@ var cn = function cn(className) {
   }).join(" ");
 };
 
+/**
+ * Colours for the moments before Val's own stylesheet exists.
+ *
+ * Two of them, and they are not interchangeable. The studio's loading screen
+ * covers the whole viewport and is replaced by the studio's canvas, so it has
+ * to match `--bg-canvas`. The loading pill sits on the customer's page as a
+ * piece of Val's floating chrome, so it has to match `--bg-float`. Getting
+ * them the wrong way round is not invisible: the studio flashes one colour and
+ * repaints in another the moment the stylesheet lands.
+ *
+ * Hardcoded because that is the whole point — these are used exactly when the
+ * variables that define them are not loaded yet. They are copies, so they go
+ * stale silently: if `--bg-canvas` or `--bg-float` changes in
+ * `packages/ui/spa/index.css`, change them here too.
+ */
+
+/** `--bg-canvas`, dark. The studio's own background. */
+var canvasDarkBg = "#08080a";
+/** `--bg-canvas`, light. */
+var canvasLightBg = "#fafafa";
+
+/** `--bg-float`, dark. Val's chrome, floating over the customer's page. */
+var floatDarkBg = "#131316";
+/** `--bg-float`, light. */
+var floatLightBg = "#ffffff";
+
+exports.canvasDarkBg = canvasDarkBg;
+exports.canvasLightBg = canvasLightBg;
 exports.cn = cn;
+exports.floatDarkBg = floatDarkBg;
+exports.floatLightBg = floatLightBg;
 exports.prefixStyles = prefixStyles;
 exports.useConfigStorageSave = useConfigStorageSave;
 exports.valPrefixedClass = valPrefixedClass;

package/dist/{cssUtils-d97a757c.cjs.prod.js → fallbackColors-d4a5b0da.cjs.prod.js}

@@ -35,7 +35,37 @@ var cn = function cn(className) {
   }).join(" ");
 };
 
+/**
+ * Colours for the moments before Val's own stylesheet exists.
+ *
+ * Two of them, and they are not interchangeable. The studio's loading screen
+ * covers the whole viewport and is replaced by the studio's canvas, so it has
+ * to match `--bg-canvas`. The loading pill sits on the customer's page as a
+ * piece of Val's floating chrome, so it has to match `--bg-float`. Getting
+ * them the wrong way round is not invisible: the studio flashes one colour and
+ * repaints in another the moment the stylesheet lands.
+ *
+ * Hardcoded because that is the whole point — these are used exactly when the
+ * variables that define them are not loaded yet. They are copies, so they go
+ * stale silently: if `--bg-canvas` or `--bg-float` changes in
+ * `packages/ui/spa/index.css`, change them here too.
+ */
+
+/** `--bg-canvas`, dark. The studio's own background. */
+var canvasDarkBg = "#08080a";
+/** `--bg-canvas`, light. */
+var canvasLightBg = "#fafafa";
+
+/** `--bg-float`, dark. Val's chrome, floating over the customer's page. */
+var floatDarkBg = "#131316";
+/** `--bg-float`, light. */
+var floatLightBg = "#ffffff";
+
+exports.canvasDarkBg = canvasDarkBg;
+exports.canvasLightBg = canvasLightBg;
 exports.cn = cn;
+exports.floatDarkBg = floatDarkBg;
+exports.floatLightBg = floatLightBg;
 exports.prefixStyles = prefixStyles;
 exports.useConfigStorageSave = useConfigStorageSave;
 exports.valPrefixedClass = valPrefixedClass;

package/dist/valbuild-next.cjs.dev.js

@@ -7,10 +7,10 @@ var objectSpread2 = require('./objectSpread2-58024783.cjs.dev.js');
 var core = require('@valbuild/core');
 var stega = require('@valbuild/react/stega');
 var internal = require('@valbuild/react/internal');
-var ValNextProvider = require('./ValNextProvider-03a9f8fd.cjs.dev.js');
+var ValNextProvider = require('./ValNextProvider-3d8ebfec.cjs.dev.js');
 var NextImage = require('next/image');
 var jsxRuntime = require('react/jsx-runtime');
-var ValApp = require('./ValApp-1992d8b3.cjs.dev.js');
+var ValApp = require('./ValApp-c1c3ef55.cjs.dev.js');
 var ValModulesClient = require('./ValModulesClient-4ecabf99.cjs.dev.js');
 var createForOfIteratorHelper = require('./createForOfIteratorHelper-0445603c.cjs.dev.js');
 require('./defineProperty-f90345d7.cjs.dev.js');
@@ -143,7 +143,6 @@ function _objectWithoutProperties(e, t) {
 
 var _excluded = ["src", "alt", "style", "width", "disableHotspot", "height"];
 function ValImage(props) {
-  var _src$metadata, _src$metadata2, _src$metadata3, _src$metadata4, _src$metadata5, _src$metadata6;
   var src = props.src,
     alt = props.alt,
     style = props.style,
@@ -168,12 +167,12 @@ function ValImage(props) {
       _iterator.f();
     }
   }
-  var hotspot = src === null || src === void 0 || (_src$metadata = src.metadata) === null || _src$metadata === void 0 ? void 0 : _src$metadata.hotspot;
+  var hotspot = src === null || src === void 0 ? void 0 : src.hotspot;
   var imageStyle = hotspot && !disableHotspot ? objectSpread2._objectSpread2(objectSpread2._objectSpread2({}, style), {}, {
     objectPosition: "".concat(hotspot.x * 100, "% ").concat(hotspot.y * 100, "%")
   }) : style;
-  var preferMetadataDims = (src === null || src === void 0 ? void 0 : src.metadata) !== undefined && !rest.fill && !width && !height;
-  var isUnoptimized = rest.unoptimized !== undefined ? rest.unoptimized : (src === null || src === void 0 || (_src$metadata2 = src.metadata) === null || _src$metadata2 === void 0 ? void 0 : _src$metadata2.mimeType) === "image/svg+xml"; // SVGs are unoptimized by default
+  var preferMetadataDims = ((src === null || src === void 0 ? void 0 : src.width) !== undefined || (src === null || src === void 0 ? void 0 : src.height) !== undefined) && !rest.fill && !width && !height;
+  var isUnoptimized = rest.unoptimized !== undefined ? rest.unoptimized : (src === null || src === void 0 ? void 0 : src.mimeType) === "image/svg+xml"; // SVGs are unoptimized by default
   return /*#__PURE__*/jsxRuntime.jsx(NextImage__default["default"], objectSpread2._objectSpread2(objectSpread2._objectSpread2({}, objectSpread2._objectSpread2(objectSpread2._objectSpread2({}, rest), {}, {
     layout: undefined,
     objectFit: undefined,
@@ -186,10 +185,10 @@ function ValImage(props) {
     "data-val-attr-alt": maybeValPathOfAlt,
     "data-val-attr-src": valPathsOfUrl && valPathsOfUrl.length > 0 ? valPathsOfUrl.join(",") : undefined,
     style: imageStyle,
-    alt: alt ? stega.raw(alt) : src !== null && src !== void 0 && (_src$metadata3 = src.metadata) !== null && _src$metadata3 !== void 0 && _src$metadata3.alt ? stega.raw(src === null || src === void 0 || (_src$metadata4 = src.metadata) === null || _src$metadata4 === void 0 ? void 0 : _src$metadata4.alt) : "",
+    alt: alt ? stega.raw(alt) : src !== null && src !== void 0 && src.alt ? stega.raw(src === null || src === void 0 ? void 0 : src.alt) : "",
     fill: rest.fill,
-    width: preferMetadataDims ? src === null || src === void 0 || (_src$metadata5 = src.metadata) === null || _src$metadata5 === void 0 ? void 0 : _src$metadata5.width : width,
-    height: preferMetadataDims ? src === null || src === void 0 || (_src$metadata6 = src.metadata) === null || _src$metadata6 === void 0 ? void 0 : _src$metadata6.height : height,
+    width: preferMetadataDims ? src === null || src === void 0 ? void 0 : src.width : width,
+    height: preferMetadataDims ? src === null || src === void 0 ? void 0 : src.height : height,
     unoptimized: isUnoptimized
   }));
 }
@@ -205,10 +204,6 @@ var Internal = objectSpread2._objectSpread2(objectSpread2._objectSpread2({}, cor
   })
 });
 
-Object.defineProperty(exports, 'FILE_REF_PROP', {
-  enumerable: true,
-  get: function () { return core.FILE_REF_PROP; }
-});
 Object.defineProperty(exports, 'GenericSelector', {
   enumerable: true,
   get: function () { return core.GenericSelector; }

package/dist/valbuild-next.cjs.prod.js

@@ -7,10 +7,10 @@ var objectSpread2 = require('./objectSpread2-13f847a9.cjs.prod.js');
 var core = require('@valbuild/core');
 var stega = require('@valbuild/react/stega');
 var internal = require('@valbuild/react/internal');
-var ValNextProvider = require('./ValNextProvider-6103cb74.cjs.prod.js');
+var ValNextProvider = require('./ValNextProvider-3fdf8756.cjs.prod.js');
 var NextImage = require('next/image');
 var jsxRuntime = require('react/jsx-runtime');
-var ValApp = require('./ValApp-bb207e96.cjs.prod.js');
+var ValApp = require('./ValApp-90c4171d.cjs.prod.js');
 var ValModulesClient = require('./ValModulesClient-10c0721c.cjs.prod.js');
 var createForOfIteratorHelper = require('./createForOfIteratorHelper-d4afcad8.cjs.prod.js');
 require('./defineProperty-8951f469.cjs.prod.js');
@@ -143,7 +143,6 @@ function _objectWithoutProperties(e, t) {
 
 var _excluded = ["src", "alt", "style", "width", "disableHotspot", "height"];
 function ValImage(props) {
-  var _src$metadata, _src$metadata2, _src$metadata3, _src$metadata4, _src$metadata5, _src$metadata6;
   var src = props.src,
     alt = props.alt,
     style = props.style,
@@ -168,12 +167,12 @@ function ValImage(props) {
       _iterator.f();
     }
   }
-  var hotspot = src === null || src === void 0 || (_src$metadata = src.metadata) === null || _src$metadata === void 0 ? void 0 : _src$metadata.hotspot;
+  var hotspot = src === null || src === void 0 ? void 0 : src.hotspot;
   var imageStyle = hotspot && !disableHotspot ? objectSpread2._objectSpread2(objectSpread2._objectSpread2({}, style), {}, {
     objectPosition: "".concat(hotspot.x * 100, "% ").concat(hotspot.y * 100, "%")
   }) : style;
-  var preferMetadataDims = (src === null || src === void 0 ? void 0 : src.metadata) !== undefined && !rest.fill && !width && !height;
-  var isUnoptimized = rest.unoptimized !== undefined ? rest.unoptimized : (src === null || src === void 0 || (_src$metadata2 = src.metadata) === null || _src$metadata2 === void 0 ? void 0 : _src$metadata2.mimeType) === "image/svg+xml"; // SVGs are unoptimized by default
+  var preferMetadataDims = ((src === null || src === void 0 ? void 0 : src.width) !== undefined || (src === null || src === void 0 ? void 0 : src.height) !== undefined) && !rest.fill && !width && !height;
+  var isUnoptimized = rest.unoptimized !== undefined ? rest.unoptimized : (src === null || src === void 0 ? void 0 : src.mimeType) === "image/svg+xml"; // SVGs are unoptimized by default
   return /*#__PURE__*/jsxRuntime.jsx(NextImage__default["default"], objectSpread2._objectSpread2(objectSpread2._objectSpread2({}, objectSpread2._objectSpread2(objectSpread2._objectSpread2({}, rest), {}, {
     layout: undefined,
     objectFit: undefined,
@@ -186,10 +185,10 @@ function ValImage(props) {
     "data-val-attr-alt": maybeValPathOfAlt,
     "data-val-attr-src": valPathsOfUrl && valPathsOfUrl.length > 0 ? valPathsOfUrl.join(",") : undefined,
     style: imageStyle,
-    alt: alt ? stega.raw(alt) : src !== null && src !== void 0 && (_src$metadata3 = src.metadata) !== null && _src$metadata3 !== void 0 && _src$metadata3.alt ? stega.raw(src === null || src === void 0 || (_src$metadata4 = src.metadata) === null || _src$metadata4 === void 0 ? void 0 : _src$metadata4.alt) : "",
+    alt: alt ? stega.raw(alt) : src !== null && src !== void 0 && src.alt ? stega.raw(src === null || src === void 0 ? void 0 : src.alt) : "",
     fill: rest.fill,
-    width: preferMetadataDims ? src === null || src === void 0 || (_src$metadata5 = src.metadata) === null || _src$metadata5 === void 0 ? void 0 : _src$metadata5.width : width,
-    height: preferMetadataDims ? src === null || src === void 0 || (_src$metadata6 = src.metadata) === null || _src$metadata6 === void 0 ? void 0 : _src$metadata6.height : height,
+    width: preferMetadataDims ? src === null || src === void 0 ? void 0 : src.width : width,
+    height: preferMetadataDims ? src === null || src === void 0 ? void 0 : src.height : height,
     unoptimized: isUnoptimized
   }));
 }
@@ -205,10 +204,6 @@ var Internal = objectSpread2._objectSpread2(objectSpread2._objectSpread2({}, cor
   })
 });
 
-Object.defineProperty(exports, 'FILE_REF_PROP', {
-  enumerable: true,
-  get: function () { return core.FILE_REF_PROP; }
-});
 Object.defineProperty(exports, 'GenericSelector', {
   enumerable: true,
   get: function () { return core.GenericSelector; }

package/dist/valbuild-next.esm.js

@@ -3,13 +3,13 @@ import { _ as _objectSpread2 } from './objectSpread2-60d1bd93.esm.js';
 import { Internal as Internal$1, initVal as initVal$1 } from '@valbuild/core';
 import * as core from '@valbuild/core';
 export { core as expr };
-export { FILE_REF_PROP, GenericSelector, Schema, VAL_EXTENSION, derefPatch, modules } from '@valbuild/core';
+export { GenericSelector, Schema, VAL_EXTENSION, derefPatch, modules } from '@valbuild/core';
 import { stegaEncode, stegaDecodeStrings, attrs, raw, autoTagJSX } from '@valbuild/react/stega';
 export { ValRichText } from '@valbuild/react/internal';
-import { ValNextProvider } from './ValNextProvider-7302b8af.esm.js';
+import { ValNextProvider } from './ValNextProvider-3209948c.esm.js';
 import NextImage from 'next/image';
 import { jsx } from 'react/jsx-runtime';
-export { ValApp } from './ValApp-8912fc8b.esm.js';
+export { ValApp } from './ValApp-e17eb734.esm.js';
 export { ValModulesClient, useRegisterValModules } from './ValModulesClient-0dd601a1.esm.js';
 import { _ as _createForOfIteratorHelper } from './createForOfIteratorHelper-5758a730.esm.js';
 import './defineProperty-cca5affa.esm.js';
@@ -119,7 +119,6 @@ function _objectWithoutProperties(e, t) {
 
 var _excluded = ["src", "alt", "style", "width", "disableHotspot", "height"];
 function ValImage(props) {
-  var _src$metadata, _src$metadata2, _src$metadata3, _src$metadata4, _src$metadata5, _src$metadata6;
   var src = props.src,
     alt = props.alt,
     style = props.style,
@@ -144,12 +143,12 @@ function ValImage(props) {
       _iterator.f();
     }
   }
-  var hotspot = src === null || src === void 0 || (_src$metadata = src.metadata) === null || _src$metadata === void 0 ? void 0 : _src$metadata.hotspot;
+  var hotspot = src === null || src === void 0 ? void 0 : src.hotspot;
   var imageStyle = hotspot && !disableHotspot ? _objectSpread2(_objectSpread2({}, style), {}, {
     objectPosition: "".concat(hotspot.x * 100, "% ").concat(hotspot.y * 100, "%")
   }) : style;
-  var preferMetadataDims = (src === null || src === void 0 ? void 0 : src.metadata) !== undefined && !rest.fill && !width && !height;
-  var isUnoptimized = rest.unoptimized !== undefined ? rest.unoptimized : (src === null || src === void 0 || (_src$metadata2 = src.metadata) === null || _src$metadata2 === void 0 ? void 0 : _src$metadata2.mimeType) === "image/svg+xml"; // SVGs are unoptimized by default
+  var preferMetadataDims = ((src === null || src === void 0 ? void 0 : src.width) !== undefined || (src === null || src === void 0 ? void 0 : src.height) !== undefined) && !rest.fill && !width && !height;
+  var isUnoptimized = rest.unoptimized !== undefined ? rest.unoptimized : (src === null || src === void 0 ? void 0 : src.mimeType) === "image/svg+xml"; // SVGs are unoptimized by default
   return /*#__PURE__*/jsx(NextImage, _objectSpread2(_objectSpread2({}, _objectSpread2(_objectSpread2({}, rest), {}, {
     layout: undefined,
     objectFit: undefined,
@@ -162,10 +161,10 @@ function ValImage(props) {
     "data-val-attr-alt": maybeValPathOfAlt,
     "data-val-attr-src": valPathsOfUrl && valPathsOfUrl.length > 0 ? valPathsOfUrl.join(",") : undefined,
     style: imageStyle,
-    alt: alt ? raw(alt) : src !== null && src !== void 0 && (_src$metadata3 = src.metadata) !== null && _src$metadata3 !== void 0 && _src$metadata3.alt ? raw(src === null || src === void 0 || (_src$metadata4 = src.metadata) === null || _src$metadata4 === void 0 ? void 0 : _src$metadata4.alt) : "",
+    alt: alt ? raw(alt) : src !== null && src !== void 0 && src.alt ? raw(src === null || src === void 0 ? void 0 : src.alt) : "",
     fill: rest.fill,
-    width: preferMetadataDims ? src === null || src === void 0 || (_src$metadata5 = src.metadata) === null || _src$metadata5 === void 0 ? void 0 : _src$metadata5.width : width,
-    height: preferMetadataDims ? src === null || src === void 0 || (_src$metadata6 = src.metadata) === null || _src$metadata6 === void 0 ? void 0 : _src$metadata6.height : height,
+    width: preferMetadataDims ? src === null || src === void 0 ? void 0 : src.width : width,
+    height: preferMetadataDims ? src === null || src === void 0 ? void 0 : src.height : height,
     unoptimized: isUnoptimized
   }));
 }

package/package.json

@@ -12,7 +12,7 @@
     "next",
     "react"
   ],
-  "version": "0.102.0",
+  "version": "0.103.1",
   "main": "dist/valbuild-next.cjs.js",
   "module": "dist/valbuild-next.esm.js",
   "exports": {
@@ -47,21 +47,21 @@
   "dependencies": {
     "client-only": "^0.0.1",
     "server-only": "^0.0.1",
-    "@valbuild/core": "0.102.0",
-    "@valbuild/language-server": "0.102.0",
-    "@valbuild/react": "0.102.0",
-    "@valbuild/server": "0.102.0",
-    "@valbuild/shared": "0.102.0",
-    "@valbuild/ui": "0.102.0"
+    "@valbuild/core": "0.103.0",
+    "@valbuild/language-server": "0.103.1",
+    "@valbuild/react": "0.103.1",
+    "@valbuild/server": "0.103.1",
+    "@valbuild/shared": "0.103.0",
+    "@valbuild/ui": "0.103.1"
   },
   "devDependencies": {
-    "@testing-library/react": "^14.0.0",
-    "@types/react": "^18.2.38",
-    "@types/react-dom": "^18.2.0",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.5",
     "jest-environment-jsdom": "^29.5.0",
-    "next": "^13.4.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "next": "^16.3.3",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
     "typescript": "^5.9.3"
   },
   "peerDependencies": {

package/dist/ValApp-bb207e96.cjs.js

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

package/dist/ValNextProvider-6103cb74.cjs.js

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

package/dist/ValOverlayContext-f7f45bc7.cjs.js

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

package/dist/cssUtils-b5651c03.esm.js

@@ -1,32 +0,0 @@
-import { VAL_CONFIG_SESSION_STORAGE_KEY } from '@valbuild/shared/internal';
-import React from 'react';
-import { _ as _slicedToArray } from './slicedToArray-aa291011.esm.js';
-import { Internal } from '@valbuild/core';
-import { VERSION } from '@valbuild/ui';
-
-/*
- * See the useConfig.tsx where the config is loaded from session storage
- */
-function useConfigStorageSave(config) {
-  React.useEffect(function () {
-    sessionStorage.setItem(VAL_CONFIG_SESSION_STORAGE_KEY, JSON.stringify(config));
-  }, [config]);
-}
-
-// All DOM element that are outside the Shadow DOM should use this class name prefix
-var valPrefixedClass = "val-prefix-" + Internal.getSHA256Hash(new TextEncoder().encode(VERSION || "")).slice(0, 8) + "-";
-var prefixStyles = function prefixStyles(styles) {
-  return Object.entries(styles).map(function (_ref) {
-    var _ref2 = _slicedToArray(_ref, 2),
-      key = _ref2[0],
-      value = _ref2[1];
-    return ".".concat(valPrefixedClass).concat(key.replace(/\//g, "\\/"), " { ").concat(value, " }");
-  }).join("\n");
-};
-var cn = function cn(className) {
-  return className.map(function (c) {
-    return "".concat(valPrefixedClass).concat(c);
-  }).join(" ");
-};
-
-export { cn as c, prefixStyles as p, useConfigStorageSave as u, valPrefixedClass as v };