@plasmicapp/react-web 0.2.396 → 0.2.398

package/dist/render/elements.d.ts

@@ -41,7 +41,7 @@ export type Flex<DefaultElementType extends React.ElementType> = (Omit<DefaultOv
     as?: never;
     render?: never;
 }) | ((props: React.ComponentProps<DefaultElementType>) => React.ReactNode);
-export declare function hasVariant<V extends Variants>(variants: V | undefined, groupName: keyof V, variant: string): any;
+export declare function hasVariant<V extends Variants>(variants: V | undefined, groupName: keyof V, variant: string): boolean;
 export declare function wrapFlexContainerChildren(children: React.ReactNode, hasGap: boolean): React.DetailedReactHTMLElement<{
     className: string;
 }, HTMLElement> | null;

package/dist/render/global-variants.d.ts

@@ -1 +1,49 @@
-export declare function ensureGlobalVariants<T extends Record<string, any>>(globalVariantValues: T): T;
+export type GlobalVariants = {
+    [gv: string]: string | undefined;
+};
+export type UseGlobalVariants = () => GlobalVariants;
+/**
+ * Usage:
+ * ```
+ * // plasmic.ts
+ * import { usePlatform } from "./PlasmicGlobalVariant__Platform";
+ * import { useTheme } from "./PlasmicGlobalVariant__Theme";
+ *
+ * export const useGlobalVariants = createUseGlobalVariants({
+ *   platform: usePlatform,
+ *   theme: useTheme,
+ * });
+ *
+ * // PlasmicComponent.tsx
+ * import { useGlobalVariants } from "./plasmic_project";
+ *
+ * export function PlasmicComponent() {
+ *   // ...
+ *   const globalVariants = useGlobalVariants();
+ *   // ...
+ * }
+ * ```
+ */
+export declare function createUseGlobalVariants<T extends {
+    [gv: string]: () => string | undefined;
+}>(globalVariantHooks: T): UseGlobalVariants;
+/**
+ * @deprecated - new generated code should use `useGlobalVariants` instead
+ *
+ * Usage:
+ * ```
+ * // PlasmicComponent.tsx
+ * import { useTheme } from "./PlasmicGlobalVariant__Theme";
+ * import { usePlatform } from "./PlasmicGlobalVariant__Platform";
+ *
+ * export function PlasmicComponent() {
+ *   // ...
+ *   const globalVariants = ensureGlobalVariants({
+ *     platform: usePlatform(),
+ *     theme: useTheme(),
+ *   });
+ *   // ...
+ * }
+ * ```
+ */
+export declare function ensureGlobalVariants<T extends GlobalVariants>(globalVariants: T): GlobalVariants;

package/dist/render/style-tokens.d.ts

@@ -0,0 +1,114 @@
+import React from "react";
+import { UseGlobalVariants } from "./global-variants";
+type ClassName = string;
+/**
+ * All style token data for this project.
+ *
+ * Usage:
+ *
+ * ```
+ * // PlasmicStyleTokensProvider.ts
+ * import { usePlatform } from "./PlasmicGlobalVariant__Platform";
+ * import { useTheme } from "./PlasmicGlobalVariant__Theme";
+ * import projectcss from "./plasmic.module.css";
+ *
+ * const projectStyleTokenData: ProjectStyleTokenData = {
+ *   base: projectcss.plasmic_tokens,
+ *   varianted: [
+ *     {
+ *       className: projectcss.global_platform_windows,
+ *       groupName: "platform",
+ *       variant: "windows"
+ *     },
+ *     {
+ *       className: projectcss.global_platform_osx,
+ *       groupName: "platform",
+ *       variant: "osx"
+ *     },
+ *     {
+ *       className: projectcss.global_theme_light,
+ *       groupName: "theme",
+ *       variant: "light"
+ *     },
+ *     {
+ *       className: projectcss.global_theme_dark,
+ *       groupName: "theme",
+ *       variant: "dark"
+ *     },
+ *   ],
+ * };
+ * ```
+ */
+interface ProjectStyleTokenData {
+    base: ClassName;
+    varianted: {
+        className: ClassName;
+        groupName: string;
+        variant: string;
+    }[];
+}
+type UseStyleTokens = () => ClassName[];
+/**
+ * Returns style tokens. If the context is not available, falls back to the
+ * current project's styles.
+ *
+ * Usage:
+ * ```
+ * // PlasmicStyleTokensProvider.ts
+ * export const useStyleTokens = createUseStyleTokens(
+ *   projectStyleTokenData,
+ *   useGlobalVariants,
+ * );
+ *
+ * // PlasmicPage.tsx
+ * import { useStyleTokens } from "./plasmic_project";
+ *
+ * export function PlasmicPage() {
+ *   const styleTokensClassNames = useStyleTokens();
+ *   return (
+ *     <div className={classNames(
+ *         projectcss.all,
+ *         projectcss.root_reset,
+ *         projectcss.plasmic_default_styles,
+ *         projectcss.plasmic_mixins,
+ *         styleTokensClassNames,
+ *     )}>
+ *       <h1 className={projectcss.all}>
+ *         Hello, world!
+ *       </h1>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function createUseStyleTokens(tokenData: ProjectStyleTokenData, useGlobalVariants: UseGlobalVariants): UseStyleTokens;
+/**
+ * Creates a StyleTokens context provider for a given project, which includes
+ * its tokens, overrides, and all tokens from its dependencies.
+ *
+ * Usage:
+ * ```
+ * // PlasmicStyleTokensProvider.ts
+ * export const StyleTokensProvider = createStyleTokensProvider(
+ *   projectStyleTokenData,
+ *   useGlobalVariants,
+ * );
+ *
+ * // Page.tsx
+ * import { StyleTokensProvider } from "./plasmic_project";
+ *
+ * export default function Page() {
+ *   return (
+ *     <PlatformContext.Provider value="osx">
+ *       <ThemeContext.Provider value="dark">
+ *         <StyleTokensProvider>
+ *           <PlasmicPage />
+ *         </StyleTokensProvider>
+ *       </ThemeContext.Provider>
+ *     </PlatformContext.Provider>
+ *   );
+ * }
+ * ```
+ */
+export declare function createStyleTokensProvider(tokenData: ProjectStyleTokenData, useGlobalVariants: UseGlobalVariants): React.ComponentType<React.PropsWithChildren>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plasmicapp/react-web",
-  "version": "0.2.396",
+  "version": "0.2.398",
   "description": "plasmic library for rendering in the presentational style",
   "main": "dist/index.cjs.js",
   "types": "dist/index.d.ts",
@@ -95,14 +95,14 @@
     "test-storybook": "test-storybook"
   },
   "dependencies": {
-    "@plasmicapp/auth-react": "0.0.22",
-    "@plasmicapp/data-sources": "0.1.187",
-    "@plasmicapp/data-sources-context": "0.1.21",
-    "@plasmicapp/host": "1.0.223",
+    "@plasmicapp/auth-react": "0.0.23",
+    "@plasmicapp/data-sources": "0.1.188",
+    "@plasmicapp/data-sources-context": "0.1.22",
+    "@plasmicapp/host": "1.0.224",
     "@plasmicapp/loader-splits": "1.0.64",
-    "@plasmicapp/nextjs-app-router": "1.0.16",
-    "@plasmicapp/prepass": "1.0.19",
-    "@plasmicapp/query": "0.1.79",
+    "@plasmicapp/nextjs-app-router": "1.0.17",
+    "@plasmicapp/prepass": "1.0.20",
+    "@plasmicapp/query": "0.1.80",
     "@react-aria/checkbox": "^3.15.5",
     "@react-aria/focus": "^3.20.3",
     "@react-aria/interactions": "^3.25.1",
@@ -155,5 +155,5 @@
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
-  "gitHead": "1cef70bbed8125981159003e51eb3c9137e2af29"
+  "gitHead": "d34346a7551acb26224eade5e29365667acc7ee3"
 }

package/skinny/dist/index-common.d.ts

@@ -2,16 +2,17 @@ export { PlasmicTranslator } from "@plasmicapp/host";
 export { PlasmicPageGuard, withPlasmicPageGuard, } from "./auth/PlasmicPageGuard";
 export { omit, pick } from "./common";
 export { HTMLElementRefOf, StrictProps } from "./react-utils";
-export { Flex, MultiChoiceArg, SingleBooleanChoiceArg, SingleChoiceArg, createPlasmicElementProxy, deriveRenderOpts, hasVariant, makeFragment, mergeVariantsWithStates, wrapWithClassName, } from "./render/elements";
-export { ensureGlobalVariants } from "./render/global-variants";
 export { PlasmicHead, plasmicHeadMeta } from "./render/PlasmicHead";
 export { PlasmicIcon } from "./render/PlasmicIcon";
 export { PlasmicImg } from "./render/PlasmicImg";
 export { PlasmicLink } from "./render/PlasmicLink";
 export { PlasmicSlot, renderPlasmicSlot } from "./render/PlasmicSlot";
+export { Stack } from "./render/Stack";
+export { Flex, MultiChoiceArg, SingleBooleanChoiceArg, SingleChoiceArg, createPlasmicElementProxy, deriveRenderOpts, hasVariant, makeFragment, mergeVariantsWithStates, wrapWithClassName, } from "./render/elements";
+export { createUseGlobalVariants, ensureGlobalVariants, } from "./render/global-variants";
 export { createUseScreenVariants } from "./render/screen-variants";
 export { PlasmicDataSourceContextProvider, PlasmicRootProvider, useCurrentUser, useIsSSR, } from "./render/ssr";
-export { Stack } from "./render/Stack";
+export { createStyleTokensProvider, createUseStyleTokens, } from "./render/style-tokens";
 export { Trans, genTranslatableString, usePlasmicTranslator, } from "./render/translation";
 export { useTrigger } from "./render/triggers";
 export * from "./states";

package/skinny/dist/index.js

@@ -5,13 +5,13 @@ export { PlasmicDataSourceContextProvider, useCurrentUser } from '@plasmicapp/da
 import * as plasmicQuery from '@plasmicapp/query';
 import * as React from 'react';
 import React__default, { useLayoutEffect, useEffect } from 'react';
-import get from 'dlv';
-export { default as get } from 'dlv';
-import { c as createElementWithChildren, m as mergeProps, e as ensureNotArray, N as NONE, a as mergePropVals, i as isReactNode, b as isBrowser, u as useIsomorphicLayoutEffect$1 } from './react-utils-2892a561.js';
 export { PlasmicHead, plasmicHeadMeta } from './render/PlasmicHead/index.js';
 export { PlasmicImg } from './render/PlasmicImg/index.js';
 import { T as Trans } from './ssr-649d12f8.js';
 export { P as PlasmicLink, a as PlasmicRootProvider, g as genTranslatableString, u as useIsSSR, b as usePlasmicTranslator } from './ssr-649d12f8.js';
+import { m as mergeProps, c as createElementWithChildren, e as ensureNotArray, N as NONE, a as mergePropVals, i as isReactNode, b as isBrowser, u as useIsomorphicLayoutEffect$1 } from './react-utils-2892a561.js';
+import get from 'dlv';
+export { default as get } from 'dlv';
 import ReactDOM__default from 'react-dom';
 import { useFocusRing } from '@react-aria/focus';
 import { useHover as useHover$1, usePress } from '@react-aria/interactions';
@@ -146,39 +146,61 @@ function withPlasmicPageGuard(WrappedComponent, options) {
     return PageGuard;
 }
 
-function renderStack(as, props, hasGap, ref) {
-    var children = props.children, rest = __rest(props, ["children"]);
-    var wrappedChildren = wrapFlexContainerChildren(children, hasGap !== null && hasGap !== void 0 ? hasGap : false);
-    return createElementWithChildren(as, __assign({ ref: ref }, rest), wrappedChildren);
+function PlasmicIcon(props) {
+    var PlasmicIconType = props.PlasmicIconType, rest = __rest(props, ["PlasmicIconType"]);
+    return React.createElement(PlasmicIconType, __assign({}, rest));
 }
-function FlexStack_(props, outerRef) {
-    var as = props.as, hasGap = props.hasGap, rest = __rest(props, ["as", "hasGap"]);
-    return renderStack(as !== null && as !== void 0 ? as : "div", rest, hasGap, outerRef);
+
+function PlasmicSlot(props) {
+    return renderPlasmicSlot(props);
+}
+function renderPlasmicSlot(opts) {
+    var as = opts.as, defaultContents = opts.defaultContents, value = opts.value, rest = __rest(opts, ["as", "defaultContents", "value"]);
+    var content = value === undefined ? defaultContents : value;
+    if (typeof content !== "number" &&
+        (!content || (Array.isArray(content) && content.length === 0))) {
+        return null;
+    }
+    // If the content is a raw string, then we need to wrap the raw string
+    // into an element, in case the slot is inside a flex-gap
+    // container (you cannot apply margin to just a text node).
+    var maybeString = maybeAsString(content);
+    if (maybeString) {
+        content = (React.createElement("span", { className: "__wab_slot-string-wrapper \u03C1sw" }, maybeString));
+    }
+    var nonEmptyProps = Object.keys(rest).filter(function (p) { return !!rest[p]; });
+    if (nonEmptyProps.length === 0) {
+        // No attrs to apply to the slot (which means the slot is unstyled), then
+        // just render the content directly; no need for style wrapper.
+        return content;
+    }
+    return React.createElement(as || "span", mergeProps({ className: "__wab_slot ρs" }, rest), content);
+}
+function maybeAsString(node) {
+    // Unwrap fragments
+    if (React.isValidElement(node)) {
+        // Fragment doesn't render DOM elements
+        if (node.type === React.Fragment) {
+            return maybeAsString(node.props.children);
+        }
+        else if (node.type === Trans) {
+            // Trans also doesn't render DOM elements. But we don't want to just render
+            // its content string, because we want to keep the <Trans/> for the localization.
+            // So we render the same node, to be wrapped into __wab_slot-string-wrapper.
+            return node;
+        }
+    }
+    if (typeof node === "string") {
+        return node;
+    }
+    if (typeof node === "number") {
+        return "".concat(node);
+    }
+    if (Array.isArray(node) && node.length === 1 && typeof node[0] === "string") {
+        return node[0];
+    }
+    return undefined;
 }
-var FlexStack = React.forwardRef(FlexStack_);
-var makeStackImpl = function (as) {
-    return React.forwardRef(function (props, ref) {
-        var hasGap = props.hasGap, rest = __rest(props, ["hasGap"]);
-        return renderStack(as, rest, hasGap, ref);
-    });
-};
-var Stack = Object.assign(FlexStack, {
-    div: makeStackImpl("div"),
-    a: makeStackImpl("a"),
-    button: makeStackImpl("button"),
-    h1: makeStackImpl("h1"),
-    h2: makeStackImpl("h2"),
-    h3: makeStackImpl("h3"),
-    h4: makeStackImpl("h4"),
-    h5: makeStackImpl("h5"),
-    h6: makeStackImpl("h6"),
-    label: makeStackImpl("label"),
-    form: makeStackImpl("form"),
-    section: makeStackImpl("section"),
-    head: makeStackImpl("head"),
-    main: makeStackImpl("main"),
-    nav: makeStackImpl("nav"),
-});
 
 function hasVariant(variants, groupName, variant) {
     if (variants == null) {
@@ -525,80 +547,109 @@ function deriveRenderOpts(props, config) {
     return { variants: variants, args: args, overrides: overrides };
 }
 
-var isDefaultValue = function (val) { return val === "PLEASE_RENDER_INSIDE_PROVIDER"; };
+function renderStack(as, props, hasGap, ref) {
+    var children = props.children, rest = __rest(props, ["children"]);
+    var wrappedChildren = wrapFlexContainerChildren(children, hasGap !== null && hasGap !== void 0 ? hasGap : false);
+    return createElementWithChildren(as, __assign({ ref: ref }, rest), wrappedChildren);
+}
+function FlexStack_(props, outerRef) {
+    var as = props.as, hasGap = props.hasGap, rest = __rest(props, ["as", "hasGap"]);
+    return renderStack(as !== null && as !== void 0 ? as : "div", rest, hasGap, outerRef);
+}
+var FlexStack = React.forwardRef(FlexStack_);
+var makeStackImpl = function (as) {
+    return React.forwardRef(function (props, ref) {
+        var hasGap = props.hasGap, rest = __rest(props, ["hasGap"]);
+        return renderStack(as, rest, hasGap, ref);
+    });
+};
+var Stack = Object.assign(FlexStack, {
+    div: makeStackImpl("div"),
+    a: makeStackImpl("a"),
+    button: makeStackImpl("button"),
+    h1: makeStackImpl("h1"),
+    h2: makeStackImpl("h2"),
+    h3: makeStackImpl("h3"),
+    h4: makeStackImpl("h4"),
+    h5: makeStackImpl("h5"),
+    h6: makeStackImpl("h6"),
+    label: makeStackImpl("label"),
+    form: makeStackImpl("form"),
+    section: makeStackImpl("section"),
+    head: makeStackImpl("head"),
+    main: makeStackImpl("main"),
+    nav: makeStackImpl("nav"),
+});
+
+var isDefaultValue = function (val) {
+    return val === "PLEASE_RENDER_INSIDE_PROVIDER";
+};
 var seenDefaultVariants = {};
-function ensureGlobalVariants(globalVariantValues) {
-    Object.entries(globalVariantValues)
+/**
+ * Usage:
+ * ```
+ * // plasmic.ts
+ * import { usePlatform } from "./PlasmicGlobalVariant__Platform";
+ * import { useTheme } from "./PlasmicGlobalVariant__Theme";
+ *
+ * export const useGlobalVariants = createUseGlobalVariants({
+ *   platform: usePlatform,
+ *   theme: useTheme,
+ * });
+ *
+ * // PlasmicComponent.tsx
+ * import { useGlobalVariants } from "./plasmic_project";
+ *
+ * export function PlasmicComponent() {
+ *   // ...
+ *   const globalVariants = useGlobalVariants();
+ *   // ...
+ * }
+ * ```
+ */
+function createUseGlobalVariants(globalVariantHooks) {
+    return function () {
+        return ensureGlobalVariants(Object.fromEntries(Object.entries(globalVariantHooks).map(function (_a) {
+            var _b = __read(_a, 2), globalVariant = _b[0], useHook = _b[1];
+            return [globalVariant, useHook()];
+        })));
+    };
+}
+/**
+ * @deprecated - new generated code should use `useGlobalVariants` instead
+ *
+ * Usage:
+ * ```
+ * // PlasmicComponent.tsx
+ * import { useTheme } from "./PlasmicGlobalVariant__Theme";
+ * import { usePlatform } from "./PlasmicGlobalVariant__Platform";
+ *
+ * export function PlasmicComponent() {
+ *   // ...
+ *   const globalVariants = ensureGlobalVariants({
+ *     platform: usePlatform(),
+ *     theme: useTheme(),
+ *   });
+ *   // ...
+ * }
+ * ```
+ */
+function ensureGlobalVariants(globalVariants) {
+    Object.entries(globalVariants)
         .filter(function (_a) {
         var _b = __read(_a, 2); _b[0]; var value = _b[1];
         return isDefaultValue(value);
     })
         .forEach(function (_a) {
         var _b = __read(_a, 2), key = _b[0]; _b[1];
-        globalVariantValues[key] = undefined;
+        globalVariants[key] = undefined;
         if (!seenDefaultVariants[key] && process.env.NODE_ENV === "development") {
             seenDefaultVariants[key] = true;
             var providerName = "".concat(key[0].toUpperCase()).concat(key.substring(1), "Context.Provider");
             console.warn("Plasmic context value for global variant \"".concat(key, "\" was not provided; please use ").concat(providerName, " at the root of your React app. Learn More: https://www.plasmic.app/learn/other-assets/#global-variants"));
         }
     });
-    return globalVariantValues;
-}
-
-function PlasmicIcon(props) {
-    var PlasmicIconType = props.PlasmicIconType, rest = __rest(props, ["PlasmicIconType"]);
-    return React.createElement(PlasmicIconType, __assign({}, rest));
-}
-
-function PlasmicSlot(props) {
-    return renderPlasmicSlot(props);
-}
-function renderPlasmicSlot(opts) {
-    var as = opts.as, defaultContents = opts.defaultContents, value = opts.value, rest = __rest(opts, ["as", "defaultContents", "value"]);
-    var content = value === undefined ? defaultContents : value;
-    if (typeof content !== "number" &&
-        (!content || (Array.isArray(content) && content.length === 0))) {
-        return null;
-    }
-    // If the content is a raw string, then we need to wrap the raw string
-    // into an element, in case the slot is inside a flex-gap
-    // container (you cannot apply margin to just a text node).
-    var maybeString = maybeAsString(content);
-    if (maybeString) {
-        content = (React.createElement("span", { className: "__wab_slot-string-wrapper \u03C1sw" }, maybeString));
-    }
-    var nonEmptyProps = Object.keys(rest).filter(function (p) { return !!rest[p]; });
-    if (nonEmptyProps.length === 0) {
-        // No attrs to apply to the slot (which means the slot is unstyled), then
-        // just render the content directly; no need for style wrapper.
-        return content;
-    }
-    return React.createElement(as || "span", mergeProps({ className: "__wab_slot ρs" }, rest), content);
-}
-function maybeAsString(node) {
-    // Unwrap fragments
-    if (React.isValidElement(node)) {
-        // Fragment doesn't render DOM elements
-        if (node.type === React.Fragment) {
-            return maybeAsString(node.props.children);
-        }
-        else if (node.type === Trans) {
-            // Trans also doesn't render DOM elements. But we don't want to just render
-            // its content string, because we want to keep the <Trans/> for the localization.
-            // So we render the same node, to be wrapped into __wab_slot-string-wrapper.
-            return node;
-        }
-    }
-    if (typeof node === "string") {
-        return node;
-    }
-    if (typeof node === "number") {
-        return "".concat(node);
-    }
-    if (Array.isArray(node) && node.length === 1 && typeof node[0] === "string") {
-        return node[0];
-    }
-    return undefined;
+    return globalVariants;
 }
 
 var listeners = [];
@@ -689,6 +740,115 @@ function createUseScreenVariants(isMulti, screenQueries) {
     };
 }
 
+/**
+ * Context that enables a project's style tokens to be propagated across projects.
+ *
+ * The value is an array of class names, including the class name for the base
+ * variant and active global variants. The class names should be applied to all
+ * Plasmic content.
+ */
+var StyleTokensContext = React__default.createContext(undefined);
+/**
+ * Returns style tokens. If the context is not available, falls back to the
+ * current project's styles.
+ *
+ * Usage:
+ * ```
+ * // PlasmicStyleTokensProvider.ts
+ * export const useStyleTokens = createUseStyleTokens(
+ *   projectStyleTokenData,
+ *   useGlobalVariants,
+ * );
+ *
+ * // PlasmicPage.tsx
+ * import { useStyleTokens } from "./plasmic_project";
+ *
+ * export function PlasmicPage() {
+ *   const styleTokensClassNames = useStyleTokens();
+ *   return (
+ *     <div className={classNames(
+ *         projectcss.all,
+ *         projectcss.root_reset,
+ *         projectcss.plasmic_default_styles,
+ *         projectcss.plasmic_mixins,
+ *         styleTokensClassNames,
+ *     )}>
+ *       <h1 className={projectcss.all}>
+ *         Hello, world!
+ *       </h1>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+function createUseStyleTokens(tokenData, useGlobalVariants) {
+    return function () {
+        var overrides = 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]);
+    };
+}
+/**
+ * Creates a StyleTokens context provider for a given project, which includes
+ * its tokens, overrides, and all tokens from its dependencies.
+ *
+ * Usage:
+ * ```
+ * // PlasmicStyleTokensProvider.ts
+ * export const StyleTokensProvider = createStyleTokensProvider(
+ *   projectStyleTokenData,
+ *   useGlobalVariants,
+ * );
+ *
+ * // Page.tsx
+ * import { StyleTokensProvider } from "./plasmic_project";
+ *
+ * export default function Page() {
+ *   return (
+ *     <PlatformContext.Provider value="osx">
+ *       <ThemeContext.Provider value="dark">
+ *         <StyleTokensProvider>
+ *           <PlasmicPage />
+ *         </StyleTokensProvider>
+ *       </ThemeContext.Provider>
+ *     </PlatformContext.Provider>
+ *   );
+ * }
+ * ```
+ */
+function createStyleTokensProvider(tokenData, useGlobalVariants) {
+    return function (props) {
+        var globalVariants = useGlobalVariants();
+        var tokens = React__default.useMemo(function () {
+            return activeTokensClassNames(tokenData, globalVariants);
+        }, [globalVariants, tokenData]);
+        return (React__default.createElement(StyleTokensContext.Provider, { value: tokens }, props.children));
+    };
+}
+/**
+ * Gets the class names for the base tokens and the varianted tokens for active
+ * global variants.
+ */
+function activeTokensClassNames(tokenData, globalVariants) {
+    var varianted = tokenData.varianted
+        .filter(function (_a) {
+        var groupName = _a.groupName, variant = _a.variant;
+        return hasVariant(globalVariants, groupName, variant);
+    })
+        .map(function (_a) {
+        var className = _a.className;
+        return className;
+    });
+    return __spreadArray([tokenData.base], __read(varianted), false);
+}
+
 function useFocused(opts) {
     var _a = useFocusRing({
         within: false,
@@ -1791,5 +1951,5 @@ function deepEqual(a, b) {
 // Using any while classnames package is not updated to have the correct types exported
 var classNames = classNames$1;
 
-export { PlasmicIcon, PlasmicPageGuard, PlasmicSlot, Stack, Trans, classNames, createPlasmicElementProxy, createUseScreenVariants, deriveRenderOpts, ensureGlobalVariants, generateOnMutateForSpec, generateStateOnChangeProp, generateStateOnChangePropForCodeComponents, generateStateValueProp, getCurrentInitialValue, getStateCellsInPlasmicProxy, getStateSpecInPlasmicProxy, hasVariant, initializeCodeComponentStates, initializePlasmicStates, is$StateProxy, isPlasmicStateProxy, makeFragment, mergeVariantsWithStates, omit, pick, renderPlasmicSlot, resetToInitialValue, set, useDollarState, useTrigger, withPlasmicPageGuard, wrapWithClassName };
+export { PlasmicIcon, PlasmicPageGuard, PlasmicSlot, Stack, Trans, classNames, createPlasmicElementProxy, createStyleTokensProvider, createUseGlobalVariants, createUseScreenVariants, createUseStyleTokens, deriveRenderOpts, ensureGlobalVariants, generateOnMutateForSpec, generateStateOnChangeProp, generateStateOnChangePropForCodeComponents, generateStateValueProp, getCurrentInitialValue, getStateCellsInPlasmicProxy, getStateSpecInPlasmicProxy, hasVariant, initializeCodeComponentStates, initializePlasmicStates, is$StateProxy, isPlasmicStateProxy, makeFragment, mergeVariantsWithStates, omit, pick, renderPlasmicSlot, resetToInitialValue, set, useDollarState, useTrigger, withPlasmicPageGuard, wrapWithClassName };
 //# sourceMappingURL=index.js.map