@fluentui/react-provider 9.22.20 → 9.22.22

package/CHANGELOG.md

@@ -1,12 +1,36 @@
 # Change Log - @fluentui/react-provider
 
-<!-- This log was last generated on Tue, 11 Aug 2026 17:16:02 GMT and should not be manually modified. -->
+<!-- This log was last generated on Mon, 19 Oct 2026 14:49:10 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
+## [9.22.22](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.22.22)
+
+Mon, 19 Oct 2026 14:49:10 GMT
+
+### Patches
+
+- fix: block unsafe theme token syntax without a value-format allowlist ([PR #36830](https://github.com/microsoft/fluentui/pull/36830) by paliprandi@microsoft.com)
+- Bump @fluentui/react-jsx-runtime to v9.4.7 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-tabster to v9.26.19 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-utilities to v9.27.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+
+## [9.22.21](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.22.21)
+
+Tue, 22 Sep 2026 11:25:39 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-provider_v9.22.20..@fluentui/react-provider_v9.22.21)
+
+### Patches
+
+- fix: remove unused react-dom and @types/react-dom peer dependencies, mark @types/react as optional ([PR #36559](https://github.com/microsoft/fluentui/pull/36559) by martinhochel@microsoft.com)
+- Bump @fluentui/react-jsx-runtime to v9.4.6 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.26.4 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-tabster to v9.26.18 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-utilities to v9.26.7 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+
 ## [9.22.20](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.22.20)
 
-Tue, 11 Aug 2026 17:16:02 GMT 
+Tue, 11 Aug 2026 17:20:14 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-provider_v9.22.19..@fluentui/react-provider_v9.22.20)
 
 ### Patches

package/dist/index.d.cts

@@ -18,6 +18,8 @@ import type { TooltipVisibilityContextValue_unstable } from '@fluentui/react-sha
  * Creates a CSS rule from a theme object.
  *
  * Useful for scenarios when you want to apply theming statically to a top level elements like `body`.
+ * Values with blocked symbols or unsupported quotes/parentheses are omitted, not repaired.
+ * No function-name or value-format allowlist is used. Validate dynamic data against an application-specific schema.
  */
 export declare function createCSSRuleFromTheme(selector: string, theme: PartialTheme | undefined): string;
 

package/dist/index.d.ts

@@ -18,6 +18,8 @@ import type { TooltipVisibilityContextValue_unstable } from '@fluentui/react-sha
  * Creates a CSS rule from a theme object.
  *
  * Useful for scenarios when you want to apply theming statically to a top level elements like `body`.
+ * Values with blocked symbols or unsupported quotes/parentheses are omitted, not repaired.
+ * No function-name or value-format allowlist is used. Validate dynamic data against an application-specific schema.
  */
 export declare function createCSSRuleFromTheme(selector: string, theme: PartialTheme | undefined): string;
 

package/lib/components/FluentProvider/createCSSRuleFromTheme.js

@@ -1,28 +1,55 @@
-const CSS_ESCAPE_MAP = {
-    '<': '\\3C ',
-    '>': '\\3E '
-};
-/**
- * Escapes characters that could break out of a <style> tag during SSR.
- *
- * IMPORTANT: Do not strip quotes. Theme values legitimately include quoted font families and other CSS.
- * We only need to ensure the generated text cannot terminate the style tag and inject HTML.
- */ function escapeForStyleTag(value) {
-    // Escape as CSS code points so the resulting CSS still represents the same characters.
-    // Using CSS escapes prevents the HTML parser from seeing a literal '<' / '>' and closing <style>.
-    return value.replace(/[<>]/g, (match)=>CSS_ESCAPE_MAP[match]);
+const BLOCKLIST_NAME_PATTERN = /[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~\u0000-\u0020\u007F]/;
+const BLOCKLIST_VALUE_PATTERN = /[!<>{};[\]\\\u0000-\u0008\u000B\u000E-\u001F\u007F]|\/\*/;
+const CLOSED_PARTS_PATTERN = /"[^"\u0000-\u001F\u007F]*"|'[^'\u0000-\u001F\u007F]*'|\([^"'()]*\)/g;
+const BLOCKLIST_UNMATCHED_DELIMITERS_PATTERN = /["'()]/;
+function escapeCharacter(character) {
+    return `\\${character.charCodeAt(0).toString(16).toUpperCase()} `;
+}
+function escapeSelector(value) {
+    // Consume whole backslash runs so escaping preserves their parity and does not retry overlapping suffixes.
+    return value.replace(/\\+[<{}]?|[<{}]/g, (match)=>{
+        const character = match[match.length - 1];
+        if (!'<{}'.includes(character)) {
+            return match;
+        }
+        const backslashes = match.length - 1;
+        return match.slice(0, backslashes - backslashes % 2) + escapeCharacter(character);
+    });
+}
+function warnThemeToken(name, reason) {
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line no-console
+        console.warn(`@fluentui/react-provider: ${reason} for theme token ${JSON.stringify(name)}.`);
+    }
 }
 /**
  * Creates a CSS rule from a theme object.
  *
  * Useful for scenarios when you want to apply theming statically to a top level elements like `body`.
+ * Values with blocked symbols or unsupported quotes/parentheses are omitted, not repaired.
+ * No function-name or value-format allowlist is used. Validate dynamic data against an application-specific schema.
  */ export function createCSSRuleFromTheme(selector, theme) {
-    const escapedSelector = escapeForStyleTag(selector);
+    const escapedSelector = escapeSelector(selector);
     if (theme) {
         const cssVarsAsString = Object.keys(theme).reduce((cssVarRule, cssVar)=>{
-            return `${cssVarRule}--${cssVar}: ${theme[cssVar]}; `;
+            const tokenValue = theme[cssVar];
+            if (!cssVar || BLOCKLIST_NAME_PATTERN.test(cssVar)) {
+                warnThemeToken(cssVar, 'Ignoring an unsupported CSS custom property name');
+                return cssVarRule;
+            }
+            if (typeof tokenValue !== 'string' && (typeof tokenValue !== 'number' || !Number.isFinite(tokenValue))) {
+                warnThemeToken(cssVar, 'Ignoring an unsupported CSS custom property value');
+                return cssVarRule;
+            }
+            const value = String(tokenValue);
+            // Ignore complete strings and flat parentheses only while looking for leftover syntax; never rewrite the value.
+            if (BLOCKLIST_VALUE_PATTERN.test(value) || BLOCKLIST_UNMATCHED_DELIMITERS_PATTERN.test(value.replace(CLOSED_PARTS_PATTERN, ''))) {
+                warnThemeToken(cssVar, 'Ignoring an unsupported CSS custom property value');
+                return cssVarRule;
+            }
+            return `${cssVarRule}--${cssVar}: ${value}; `;
         }, '');
-        return `${escapedSelector} { ${escapeForStyleTag(cssVarsAsString)} }`;
+        return `${escapedSelector} { ${cssVarsAsString} }`;
     }
     return `${escapedSelector} {}`;
 }

package/lib/components/FluentProvider/createCSSRuleFromTheme.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/FluentProvider/createCSSRuleFromTheme.ts"],"sourcesContent":["import type { PartialTheme } from '@fluentui/react-theme';\n\nconst CSS_ESCAPE_MAP = {\n  '<': '\\\\3C ',\n  '>': '\\\\3E ',\n};\n/**\n * Escapes characters that could break out of a <style> tag during SSR.\n *\n * IMPORTANT: Do not strip quotes. Theme values legitimately include quoted font families and other CSS.\n * We only need to ensure the generated text cannot terminate the style tag and inject HTML.\n */\nfunction escapeForStyleTag(value: string): string {\n  // Escape as CSS code points so the resulting CSS still represents the same characters.\n  // Using CSS escapes prevents the HTML parser from seeing a literal '<' / '>' and closing <style>.\n  return value.replace(/[<>]/g, match => CSS_ESCAPE_MAP[match as keyof typeof CSS_ESCAPE_MAP]);\n}\n\n/**\n * Creates a CSS rule from a theme object.\n *\n * Useful for scenarios when you want to apply theming statically to a top level elements like `body`.\n */\nexport function createCSSRuleFromTheme(selector: string, theme: PartialTheme | undefined): string {\n  const escapedSelector = escapeForStyleTag(selector);\n\n  if (theme) {\n    const cssVarsAsString = (Object.keys(theme) as (keyof typeof theme)[]).reduce((cssVarRule, cssVar) => {\n      return `${cssVarRule}--${cssVar}: ${theme[cssVar]}; `;\n    }, '');\n\n    return `${escapedSelector} { ${escapeForStyleTag(cssVarsAsString)} }`;\n  }\n\n  return `${escapedSelector} {}`;\n}\n"],"names":["CSS_ESCAPE_MAP","escapeForStyleTag","value","replace","match","createCSSRuleFromTheme","selector","theme","escapedSelector","cssVarsAsString","Object","keys","reduce","cssVarRule","cssVar"],"mappings":"AAEA,MAAMA,iBAAiB;IACrB,KAAK;IACL,KAAK;AACP;AACA;;;;;CAKC,GACD,SAASC,kBAAkBC,KAAa;IACtC,uFAAuF;IACvF,kGAAkG;IAClG,OAAOA,MAAMC,OAAO,CAAC,SAASC,CAAAA,QAASJ,cAAc,CAACI,MAAqC;AAC7F;AAEA;;;;CAIC,GACD,OAAO,SAASC,uBAAuBC,QAAgB,EAAEC,KAA+B;IACtF,MAAMC,kBAAkBP,kBAAkBK;IAE1C,IAAIC,OAAO;QACT,MAAME,kBAAkB,AAACC,OAAOC,IAAI,CAACJ,OAAkCK,MAAM,CAAC,CAACC,YAAYC;YACzF,OAAO,GAAGD,WAAW,EAAE,EAAEC,OAAO,EAAE,EAAEP,KAAK,CAACO,OAAO,CAAC,EAAE,CAAC;QACvD,GAAG;QAEH,OAAO,GAAGN,gBAAgB,GAAG,EAAEP,kBAAkBQ,iBAAiB,EAAE,CAAC;IACvE;IAEA,OAAO,GAAGD,gBAAgB,GAAG,CAAC;AAChC"}
+{"version":3,"sources":["../src/components/FluentProvider/createCSSRuleFromTheme.ts"],"sourcesContent":["import type { PartialTheme } from '@fluentui/react-theme';\n\nconst BLOCKLIST_NAME_PATTERN = /[!\"#$%&'()*+,./:;<=>?@[\\\\\\]^`{|}~\\u0000-\\u0020\\u007F]/;\nconst BLOCKLIST_VALUE_PATTERN = /[!<>{};[\\]\\\\\\u0000-\\u0008\\u000B\\u000E-\\u001F\\u007F]|\\/\\*/;\nconst CLOSED_PARTS_PATTERN = /\"[^\"\\u0000-\\u001F\\u007F]*\"|'[^'\\u0000-\\u001F\\u007F]*'|\\([^\"'()]*\\)/g;\nconst BLOCKLIST_UNMATCHED_DELIMITERS_PATTERN = /[\"'()]/;\n\nfunction escapeCharacter(character: string): string {\n  return `\\\\${character.charCodeAt(0).toString(16).toUpperCase()} `;\n}\n\nfunction escapeSelector(value: string): string {\n  // Consume whole backslash runs so escaping preserves their parity and does not retry overlapping suffixes.\n  return value.replace(/\\\\+[<{}]?|[<{}]/g, match => {\n    const character = match[match.length - 1];\n    if (!'<{}'.includes(character)) {\n      return match;\n    }\n\n    const backslashes = match.length - 1;\n    return match.slice(0, backslashes - (backslashes % 2)) + escapeCharacter(character);\n  });\n}\n\nfunction warnThemeToken(name: string, reason: string): void {\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line no-console\n    console.warn(`@fluentui/react-provider: ${reason} for theme token ${JSON.stringify(name)}.`);\n  }\n}\n\n/**\n * Creates a CSS rule from a theme object.\n *\n * Useful for scenarios when you want to apply theming statically to a top level elements like `body`.\n * Values with blocked symbols or unsupported quotes/parentheses are omitted, not repaired.\n * No function-name or value-format allowlist is used. Validate dynamic data against an application-specific schema.\n */\nexport function createCSSRuleFromTheme(selector: string, theme: PartialTheme | undefined): string {\n  const escapedSelector = escapeSelector(selector);\n\n  if (theme) {\n    const cssVarsAsString = (Object.keys(theme) as (keyof typeof theme)[]).reduce((cssVarRule, cssVar) => {\n      const tokenValue: unknown = theme[cssVar];\n      if (!cssVar || BLOCKLIST_NAME_PATTERN.test(cssVar)) {\n        warnThemeToken(cssVar, 'Ignoring an unsupported CSS custom property name');\n        return cssVarRule;\n      }\n      if (typeof tokenValue !== 'string' && (typeof tokenValue !== 'number' || !Number.isFinite(tokenValue))) {\n        warnThemeToken(cssVar, 'Ignoring an unsupported CSS custom property value');\n        return cssVarRule;\n      }\n\n      const value = String(tokenValue);\n      // Ignore complete strings and flat parentheses only while looking for leftover syntax; never rewrite the value.\n      if (\n        BLOCKLIST_VALUE_PATTERN.test(value) ||\n        BLOCKLIST_UNMATCHED_DELIMITERS_PATTERN.test(value.replace(CLOSED_PARTS_PATTERN, ''))\n      ) {\n        warnThemeToken(cssVar, 'Ignoring an unsupported CSS custom property value');\n        return cssVarRule;\n      }\n\n      return `${cssVarRule}--${cssVar}: ${value}; `;\n    }, '');\n\n    return `${escapedSelector} { ${cssVarsAsString} }`;\n  }\n\n  return `${escapedSelector} {}`;\n}\n"],"names":["BLOCKLIST_NAME_PATTERN","BLOCKLIST_VALUE_PATTERN","CLOSED_PARTS_PATTERN","BLOCKLIST_UNMATCHED_DELIMITERS_PATTERN","escapeCharacter","character","charCodeAt","toString","toUpperCase","escapeSelector","value","replace","match","length","includes","backslashes","slice","warnThemeToken","name","reason","process","env","NODE_ENV","console","warn","JSON","stringify","createCSSRuleFromTheme","selector","theme","escapedSelector","cssVarsAsString","Object","keys","reduce","cssVarRule","cssVar","tokenValue","test","Number","isFinite","String"],"mappings":"AAEA,MAAMA,yBAAyB;AAC/B,MAAMC,0BAA0B;AAChC,MAAMC,uBAAuB;AAC7B,MAAMC,yCAAyC;AAE/C,SAASC,gBAAgBC,SAAiB;IACxC,OAAO,CAAC,EAAE,EAAEA,UAAUC,UAAU,CAAC,GAAGC,QAAQ,CAAC,IAAIC,WAAW,GAAG,CAAC,CAAC;AACnE;AAEA,SAASC,eAAeC,KAAa;IACnC,2GAA2G;IAC3G,OAAOA,MAAMC,OAAO,CAAC,oBAAoBC,CAAAA;QACvC,MAAMP,YAAYO,KAAK,CAACA,MAAMC,MAAM,GAAG,EAAE;QACzC,IAAI,CAAC,MAAMC,QAAQ,CAACT,YAAY;YAC9B,OAAOO;QACT;QAEA,MAAMG,cAAcH,MAAMC,MAAM,GAAG;QACnC,OAAOD,MAAMI,KAAK,CAAC,GAAGD,cAAeA,cAAc,KAAMX,gBAAgBC;IAC3E;AACF;AAEA,SAASY,eAAeC,IAAY,EAAEC,MAAc;IAClD,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,sCAAsC;QACtCC,QAAQC,IAAI,CAAC,CAAC,0BAA0B,EAAEL,OAAO,iBAAiB,EAAEM,KAAKC,SAAS,CAACR,MAAM,CAAC,CAAC;IAC7F;AACF;AAEA;;;;;;CAMC,GACD,OAAO,SAASS,uBAAuBC,QAAgB,EAAEC,KAA+B;IACtF,MAAMC,kBAAkBrB,eAAemB;IAEvC,IAAIC,OAAO;QACT,MAAME,kBAAkB,AAACC,OAAOC,IAAI,CAACJ,OAAkCK,MAAM,CAAC,CAACC,YAAYC;YACzF,MAAMC,aAAsBR,KAAK,CAACO,OAAO;YACzC,IAAI,CAACA,UAAUpC,uBAAuBsC,IAAI,CAACF,SAAS;gBAClDnB,eAAemB,QAAQ;gBACvB,OAAOD;YACT;YACA,IAAI,OAAOE,eAAe,YAAa,CAAA,OAAOA,eAAe,YAAY,CAACE,OAAOC,QAAQ,CAACH,WAAU,GAAI;gBACtGpB,eAAemB,QAAQ;gBACvB,OAAOD;YACT;YAEA,MAAMzB,QAAQ+B,OAAOJ;YACrB,gHAAgH;YAChH,IACEpC,wBAAwBqC,IAAI,CAAC5B,UAC7BP,uCAAuCmC,IAAI,CAAC5B,MAAMC,OAAO,CAACT,sBAAsB,MAChF;gBACAe,eAAemB,QAAQ;gBACvB,OAAOD;YACT;YAEA,OAAO,GAAGA,WAAW,EAAE,EAAEC,OAAO,EAAE,EAAE1B,MAAM,EAAE,CAAC;QAC/C,GAAG;QAEH,OAAO,GAAGoB,gBAAgB,GAAG,EAAEC,gBAAgB,EAAE,CAAC;IACpD;IAEA,OAAO,GAAGD,gBAAgB,GAAG,CAAC;AAChC"}

package/lib-commonjs/components/FluentProvider/createCSSRuleFromTheme.cjs

@@ -8,27 +8,52 @@ Object.defineProperty(exports, "createCSSRuleFromTheme", {
         return createCSSRuleFromTheme;
     }
 });
-const CSS_ESCAPE_MAP = {
-    '<': '\\3C ',
-    '>': '\\3E '
-};
-/**
- * Escapes characters that could break out of a <style> tag during SSR.
- *
- * IMPORTANT: Do not strip quotes. Theme values legitimately include quoted font families and other CSS.
- * We only need to ensure the generated text cannot terminate the style tag and inject HTML.
- */ function escapeForStyleTag(value) {
-    // Escape as CSS code points so the resulting CSS still represents the same characters.
-    // Using CSS escapes prevents the HTML parser from seeing a literal '<' / '>' and closing <style>.
-    return value.replace(/[<>]/g, (match)=>CSS_ESCAPE_MAP[match]);
+const BLOCKLIST_NAME_PATTERN = /[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~\u0000-\u0020\u007F]/;
+const BLOCKLIST_VALUE_PATTERN = /[!<>{};[\]\\\u0000-\u0008\u000B\u000E-\u001F\u007F]|\/\*/;
+const CLOSED_PARTS_PATTERN = /"[^"\u0000-\u001F\u007F]*"|'[^'\u0000-\u001F\u007F]*'|\([^"'()]*\)/g;
+const BLOCKLIST_UNMATCHED_DELIMITERS_PATTERN = /["'()]/;
+function escapeCharacter(character) {
+    return `\\${character.charCodeAt(0).toString(16).toUpperCase()} `;
+}
+function escapeSelector(value) {
+    // Consume whole backslash runs so escaping preserves their parity and does not retry overlapping suffixes.
+    return value.replace(/\\+[<{}]?|[<{}]/g, (match)=>{
+        const character = match[match.length - 1];
+        if (!'<{}'.includes(character)) {
+            return match;
+        }
+        const backslashes = match.length - 1;
+        return match.slice(0, backslashes - backslashes % 2) + escapeCharacter(character);
+    });
+}
+function warnThemeToken(name, reason) {
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line no-console
+        console.warn(`@fluentui/react-provider: ${reason} for theme token ${JSON.stringify(name)}.`);
+    }
 }
 function createCSSRuleFromTheme(selector, theme) {
-    const escapedSelector = escapeForStyleTag(selector);
+    const escapedSelector = escapeSelector(selector);
     if (theme) {
         const cssVarsAsString = Object.keys(theme).reduce((cssVarRule, cssVar)=>{
-            return `${cssVarRule}--${cssVar}: ${theme[cssVar]}; `;
+            const tokenValue = theme[cssVar];
+            if (!cssVar || BLOCKLIST_NAME_PATTERN.test(cssVar)) {
+                warnThemeToken(cssVar, 'Ignoring an unsupported CSS custom property name');
+                return cssVarRule;
+            }
+            if (typeof tokenValue !== 'string' && (typeof tokenValue !== 'number' || !Number.isFinite(tokenValue))) {
+                warnThemeToken(cssVar, 'Ignoring an unsupported CSS custom property value');
+                return cssVarRule;
+            }
+            const value = String(tokenValue);
+            // Ignore complete strings and flat parentheses only while looking for leftover syntax; never rewrite the value.
+            if (BLOCKLIST_VALUE_PATTERN.test(value) || BLOCKLIST_UNMATCHED_DELIMITERS_PATTERN.test(value.replace(CLOSED_PARTS_PATTERN, ''))) {
+                warnThemeToken(cssVar, 'Ignoring an unsupported CSS custom property value');
+                return cssVarRule;
+            }
+            return `${cssVarRule}--${cssVar}: ${value}; `;
         }, '');
-        return `${escapedSelector} { ${escapeForStyleTag(cssVarsAsString)} }`;
+        return `${escapedSelector} { ${cssVarsAsString} }`;
     }
     return `${escapedSelector} {}`;
 }

package/lib-commonjs/components/FluentProvider/createCSSRuleFromTheme.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/FluentProvider/createCSSRuleFromTheme.ts"],"sourcesContent":["import type { PartialTheme } from '@fluentui/react-theme';\n\nconst CSS_ESCAPE_MAP = {\n  '<': '\\\\3C ',\n  '>': '\\\\3E ',\n};\n/**\n * Escapes characters that could break out of a <style> tag during SSR.\n *\n * IMPORTANT: Do not strip quotes. Theme values legitimately include quoted font families and other CSS.\n * We only need to ensure the generated text cannot terminate the style tag and inject HTML.\n */\nfunction escapeForStyleTag(value: string): string {\n  // Escape as CSS code points so the resulting CSS still represents the same characters.\n  // Using CSS escapes prevents the HTML parser from seeing a literal '<' / '>' and closing <style>.\n  return value.replace(/[<>]/g, match => CSS_ESCAPE_MAP[match as keyof typeof CSS_ESCAPE_MAP]);\n}\n\n/**\n * Creates a CSS rule from a theme object.\n *\n * Useful for scenarios when you want to apply theming statically to a top level elements like `body`.\n */\nexport function createCSSRuleFromTheme(selector: string, theme: PartialTheme | undefined): string {\n  const escapedSelector = escapeForStyleTag(selector);\n\n  if (theme) {\n    const cssVarsAsString = (Object.keys(theme) as (keyof typeof theme)[]).reduce((cssVarRule, cssVar) => {\n      return `${cssVarRule}--${cssVar}: ${theme[cssVar]}; `;\n    }, '');\n\n    return `${escapedSelector} { ${escapeForStyleTag(cssVarsAsString)} }`;\n  }\n\n  return `${escapedSelector} {}`;\n}\n"],"names":["CSS_ESCAPE_MAP","escapeForStyleTag","value","replace","match","createCSSRuleFromTheme","selector","theme","escapedSelector","cssVarsAsString","Object","keys","reduce","cssVarRule","cssVar"],"mappings":";;;;+BAuBgBK;;;;;;AArBhB,MAAML,iBAAiB;IACrB,KAAK;IACL,KAAK;AACP;AACA;;;;;CAKC,GACD,SAASC,kBAAkBC,KAAa;IACtC,uFAAuF;IACvF,kGAAkG;IAClG,OAAOA,MAAMC,OAAO,CAAC,SAASC,CAAAA,QAASJ,cAAc,CAACI,MAAqC;AAC7F;AAOO,gCAAgCE,QAAgB,EAAEC,KAA+B;IACtF,MAAMC,kBAAkBP,kBAAkBK;IAE1C,IAAIC,OAAO;QACT,MAAME,kBAAmBC,OAAOC,IAAI,CAACJ,OAAkCK,MAAM,CAAC,CAACC,YAAYC;YACzF,OAAO,GAAGD,WAAW,EAAE,EAAEC,OAAO,EAAE,EAAEP,KAAK,CAACO,OAAO,CAAC,EAAE,CAAC;QACvD,GAAG;QAEH,OAAO,GAAGN,gBAAgB,GAAG,EAAEP,kBAAkBQ,iBAAiB,EAAE,CAAC;IACvE;IAEA,OAAO,GAAGD,gBAAgB,GAAG,CAAC;AAChC"}
+{"version":3,"sources":["../src/components/FluentProvider/createCSSRuleFromTheme.ts"],"sourcesContent":["import type { PartialTheme } from '@fluentui/react-theme';\n\nconst BLOCKLIST_NAME_PATTERN = /[!\"#$%&'()*+,./:;<=>?@[\\\\\\]^`{|}~\\u0000-\\u0020\\u007F]/;\nconst BLOCKLIST_VALUE_PATTERN = /[!<>{};[\\]\\\\\\u0000-\\u0008\\u000B\\u000E-\\u001F\\u007F]|\\/\\*/;\nconst CLOSED_PARTS_PATTERN = /\"[^\"\\u0000-\\u001F\\u007F]*\"|'[^'\\u0000-\\u001F\\u007F]*'|\\([^\"'()]*\\)/g;\nconst BLOCKLIST_UNMATCHED_DELIMITERS_PATTERN = /[\"'()]/;\n\nfunction escapeCharacter(character: string): string {\n  return `\\\\${character.charCodeAt(0).toString(16).toUpperCase()} `;\n}\n\nfunction escapeSelector(value: string): string {\n  // Consume whole backslash runs so escaping preserves their parity and does not retry overlapping suffixes.\n  return value.replace(/\\\\+[<{}]?|[<{}]/g, match => {\n    const character = match[match.length - 1];\n    if (!'<{}'.includes(character)) {\n      return match;\n    }\n\n    const backslashes = match.length - 1;\n    return match.slice(0, backslashes - (backslashes % 2)) + escapeCharacter(character);\n  });\n}\n\nfunction warnThemeToken(name: string, reason: string): void {\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line no-console\n    console.warn(`@fluentui/react-provider: ${reason} for theme token ${JSON.stringify(name)}.`);\n  }\n}\n\n/**\n * Creates a CSS rule from a theme object.\n *\n * Useful for scenarios when you want to apply theming statically to a top level elements like `body`.\n * Values with blocked symbols or unsupported quotes/parentheses are omitted, not repaired.\n * No function-name or value-format allowlist is used. Validate dynamic data against an application-specific schema.\n */\nexport function createCSSRuleFromTheme(selector: string, theme: PartialTheme | undefined): string {\n  const escapedSelector = escapeSelector(selector);\n\n  if (theme) {\n    const cssVarsAsString = (Object.keys(theme) as (keyof typeof theme)[]).reduce((cssVarRule, cssVar) => {\n      const tokenValue: unknown = theme[cssVar];\n      if (!cssVar || BLOCKLIST_NAME_PATTERN.test(cssVar)) {\n        warnThemeToken(cssVar, 'Ignoring an unsupported CSS custom property name');\n        return cssVarRule;\n      }\n      if (typeof tokenValue !== 'string' && (typeof tokenValue !== 'number' || !Number.isFinite(tokenValue))) {\n        warnThemeToken(cssVar, 'Ignoring an unsupported CSS custom property value');\n        return cssVarRule;\n      }\n\n      const value = String(tokenValue);\n      // Ignore complete strings and flat parentheses only while looking for leftover syntax; never rewrite the value.\n      if (\n        BLOCKLIST_VALUE_PATTERN.test(value) ||\n        BLOCKLIST_UNMATCHED_DELIMITERS_PATTERN.test(value.replace(CLOSED_PARTS_PATTERN, ''))\n      ) {\n        warnThemeToken(cssVar, 'Ignoring an unsupported CSS custom property value');\n        return cssVarRule;\n      }\n\n      return `${cssVarRule}--${cssVar}: ${value}; `;\n    }, '');\n\n    return `${escapedSelector} { ${cssVarsAsString} }`;\n  }\n\n  return `${escapedSelector} {}`;\n}\n"],"names":["BLOCKLIST_NAME_PATTERN","BLOCKLIST_VALUE_PATTERN","CLOSED_PARTS_PATTERN","BLOCKLIST_UNMATCHED_DELIMITERS_PATTERN","escapeCharacter","character","charCodeAt","toString","toUpperCase","escapeSelector","value","replace","match","length","includes","backslashes","slice","warnThemeToken","name","reason","process","env","NODE_ENV","console","warn","JSON","stringify","createCSSRuleFromTheme","selector","theme","escapedSelector","cssVarsAsString","Object","keys","reduce","cssVarRule","cssVar","tokenValue","test","Number","isFinite","String"],"mappings":";;;;+BAsCgB2B;;;;;;AApChB,MAAM3B,yBAAyB;AAC/B,MAAMC,0BAA0B;AAChC,MAAMC,uBAAuB;AAC7B,MAAMC,yCAAyC;AAE/C,SAASC,gBAAgBC,SAAiB;IACxC,OAAO,CAAC,EAAE,EAAEA,UAAUC,UAAU,CAAC,GAAGC,QAAQ,CAAC,IAAIC,WAAW,GAAG,CAAC,CAAC;AACnE;AAEA,SAASC,eAAeC,KAAa;IACnC,2GAA2G;IAC3G,OAAOA,MAAMC,OAAO,CAAC,oBAAoBC,CAAAA;QACvC,MAAMP,YAAYO,KAAK,CAACA,MAAMC,MAAM,GAAG,EAAE;QACzC,IAAI,CAAC,MAAMC,QAAQ,CAACT,YAAY;YAC9B,OAAOO;QACT;QAEA,MAAMG,cAAcH,MAAMC,MAAM,GAAG;QACnC,OAAOD,MAAMI,KAAK,CAAC,GAAGD,cAAeA,cAAc,KAAMX,gBAAgBC;IAC3E;AACF;AAEA,SAASY,eAAeC,IAAY,EAAEC,MAAc;IAClD,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,sCAAsC;QACtCC,QAAQC,IAAI,CAAC,CAAC,0BAA0B,EAAEL,OAAO,iBAAiB,EAAEM,KAAKC,SAAS,CAACR,MAAM,CAAC,CAAC;IAC7F;AACF;AASO,gCAAgCU,QAAgB,EAAEC,KAA+B;IACtF,MAAMC,kBAAkBrB,eAAemB;IAEvC,IAAIC,OAAO;QACT,MAAME,kBAAmBC,OAAOC,IAAI,CAACJ,OAAkCK,MAAM,CAAC,CAACC,YAAYC;YACzF,MAAMC,aAAsBR,KAAK,CAACO,OAAO;YACzC,IAAI,CAACA,UAAUpC,uBAAuBsC,IAAI,CAACF,SAAS;gBAClDnB,eAAemB,QAAQ;gBACvB,OAAOD;YACT;YACA,IAAI,OAAOE,eAAe,YAAa,CAAA,OAAOA,eAAe,YAAY,CAACE,OAAOC,QAAQ,CAACH,WAAAA,CAAU,EAAI;gBACtGpB,eAAemB,QAAQ;gBACvB,OAAOD;YACT;YAEA,MAAMzB,QAAQ+B,OAAOJ;YACrB,gHAAgH;YAChH,IACEpC,wBAAwBqC,IAAI,CAAC5B,UAC7BP,uCAAuCmC,IAAI,CAAC5B,MAAMC,OAAO,CAACT,sBAAsB,MAChF;gBACAe,eAAemB,QAAQ;gBACvB,OAAOD;YACT;YAEA,OAAO,GAAGA,WAAW,EAAE,EAAEC,OAAO,EAAE,EAAE1B,MAAM,EAAE,CAAC;QAC/C,GAAG;QAEH,OAAO,GAAGoB,gBAAgB,GAAG,EAAEC,gBAAgB,EAAE,CAAC;IACpD;IAEA,OAAO,GAAGD,gBAAgB,GAAG,CAAC;AAChC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-provider",
-  "version": "9.22.20",
+  "version": "9.22.22",
   "description": "Fluent UI React provider component",
   "main": "lib-commonjs/index.cjs",
   "module": "lib/index.js",
@@ -13,20 +13,23 @@
   "license": "MIT",
   "dependencies": {
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-jsx-runtime": "^9.4.5",
-    "@fluentui/react-shared-contexts": "^9.26.3",
-    "@fluentui/react-tabster": "^9.26.17",
+    "@fluentui/react-jsx-runtime": "^9.4.7",
+    "@fluentui/react-shared-contexts": "^9.26.4",
+    "@fluentui/react-tabster": "^9.26.19",
     "@fluentui/react-theme": "^9.2.2",
-    "@fluentui/react-utilities": "^9.26.6",
+    "@fluentui/react-utilities": "^9.27.0",
     "@griffel/core": "^1.16.0",
     "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {
     "@types/react": ">=16.14.0 <20.0.0",
-    "@types/react-dom": ">=16.9.0 <20.0.0",
-    "react": ">=16.14.0 <20.0.0",
-    "react-dom": ">=16.14.0 <20.0.0"
+    "react": ">=16.14.0 <20.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
   },
   "beachball": {
     "disallowedChangeTypes": [