@plasmicapp/react-web 0.2.403 → 0.2.405

package/dist/react-web.esm.js

@@ -1825,14 +1825,13 @@ function MaybeWrap(props) {
  */
 var StyleTokensContext = React__default.createContext(undefined);
 /**
- * Returns style tokens. If the context is not available, falls back to the
- * current project's styles.
+ * Creates a useStyleTokens hook for a given project that returns class names for the given project's tokens plus token overrides from StyleTokensProvider if present.
  *
  * Usage:
  * ```
  * // PlasmicStyleTokensProvider.ts
  * export const useStyleTokens = createUseStyleTokens(
- *   projectStyleTokenData,
+ *   data,
  *   useGlobalVariants,
  * );
  *
@@ -1859,27 +1858,24 @@ var StyleTokensContext = React__default.createContext(undefined);
  */
 function createUseStyleTokens(tokenData, useGlobalVariants) {
     return function () {
-        var overrides = React__default.useContext(StyleTokensContext);
+        var ctxClassNames = React__default.useContext(StyleTokensContext);
         var globalVariants = useGlobalVariants();
         return React__default.useMemo(function () {
-            if (overrides && overrides.length > 0) {
-                return overrides;
-            }
-            else {
-                return activeTokensClassNames(tokenData, globalVariants);
-            }
-        }, [overrides, globalVariants, tokenData]);
+            // Use a set to deduplicate
+            return Array.from(new Set(__spreadArray(__spreadArray([], __read((ctxClassNames !== null && ctxClassNames !== void 0 ? ctxClassNames : [])), false), __read(activeTokensClassNames(tokenData, globalVariants)), false)));
+        }, [ctxClassNames, globalVariants]);
     };
 }
 /**
- * Creates a StyleTokens context provider for a given project, which includes
- * its tokens, overrides, and all tokens from its dependencies.
+ * Creates a StyleTokensProvider for a given project to allow propagating its overrides to components of other projects.
+ *
+ * To ensure all tokens in the overrides class name resolve properly, the base and varianted class names must be included.
  *
  * Usage:
  * ```
  * // PlasmicStyleTokensProvider.ts
  * export const StyleTokensProvider = createStyleTokensProvider(
- *   projectStyleTokenData,
+ *   { base: `${projectcss.plasmic_tokens_override} ${data.base}`, varianted: data.varianted },
  *   useGlobalVariants,
  * );
  *
@@ -1913,6 +1909,7 @@ function createStyleTokensProvider(tokenData, useGlobalVariants) {
  * global variants.
  */
 function activeTokensClassNames(tokenData, globalVariants) {
+    var _a, _b;
     var varianted = tokenData.varianted
         .filter(function (_a) {
         var groupName = _a.groupName, variant = _a.variant;
@@ -1922,7 +1919,7 @@ function activeTokensClassNames(tokenData, globalVariants) {
         var className = _a.className;
         return className;
     });
-    return __spreadArray([tokenData.base], __read(varianted), false);
+    return __spreadArray(__spreadArray([], __read(((_b = (_a = tokenData.base) === null || _a === void 0 ? void 0 : _a.split(" ")) !== null && _b !== void 0 ? _b : [])), false), __read(varianted), false);
 }
 
 function useFocused(opts) {