@fluentui/react-provider 9.22.22 → 9.22.23

package/CHANGELOG.md

@@ -1,12 +1,20 @@
 # Change Log - @fluentui/react-provider
 
-<!-- This log was last generated on Mon, 19 Oct 2026 14:49:10 GMT and should not be manually modified. -->
+<!-- This log was last generated on Tue, 27 Oct 2026 16:42:32 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
+## [9.22.23](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.22.23)
+
+Tue, 27 Oct 2026 16:42:32 GMT
+
+### Patches
+
+- fix: escape theme style delimiters instead of omitting valid nested theme values ([PR #36985](https://github.com/microsoft/fluentui/pull/36985) by vgenaev@gmail.com)
+
 ## [9.22.22](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.22.22)
 
-Mon, 19 Oct 2026 14:49:10 GMT
+Mon, 19 Oct 2026 16:49:00 GMT
 
 ### Patches
 

package/dist/index.d.cts

@@ -18,8 +18,6 @@ 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,8 +18,6 @@ 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/FluentProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/FluentProvider/FluentProvider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\nimport { renderFluentProvider_unstable } from './renderFluentProvider';\nimport { useFluentProvider_unstable } from './useFluentProvider';\nimport { useFluentProviderStyles_unstable } from './useFluentProviderStyles.styles';\nimport { useFluentProviderContextValues_unstable } from './useFluentProviderContextValues';\nimport type { FluentProviderProps } from './FluentProvider.types';\n\nexport const FluentProvider: ForwardRefComponent<FluentProviderProps> = React.forwardRef((props, ref) => {\n  const state = useFluentProvider_unstable(props, ref);\n  useFluentProviderStyles_unstable(state);\n\n  const contextValues = useFluentProviderContextValues_unstable(state);\n\n  return renderFluentProvider_unstable(state, contextValues);\n});\n\nFluentProvider.displayName = 'FluentProvider';\n"],"names":["React","renderFluentProvider_unstable","useFluentProvider_unstable","useFluentProviderStyles_unstable","useFluentProviderContextValues_unstable","FluentProvider","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAI/B,SAASC,6BAA6B,QAAQ,4BAAyB;AACvE,SAASC,0BAA0B,QAAQ,yBAAsB;AACjE,SAASC,gCAAgC,QAAQ,sCAAmC;AACpF,SAASC,uCAAuC,QAAQ,sCAAmC;AAG3F,OAAO,MAAMC,+BAA2DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQP,2BAA2BK,OAAOC;IAChDL,iCAAiCM;IAEjC,MAAMC,gBAAgBN,wCAAwCK;IAE9D,OAAOR,8BAA8BQ,OAAOC;AAC9C,GAAG;AAEHL,eAAeM,WAAW,GAAG"}
+{"version":3,"sources":["../../../src/components/FluentProvider/FluentProvider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\nimport { renderFluentProvider_unstable } from './renderFluentProvider';\nimport { useFluentProvider_unstable } from './useFluentProvider';\nimport { useFluentProviderStyles_unstable } from './useFluentProviderStyles.styles';\nimport { useFluentProviderContextValues_unstable } from './useFluentProviderContextValues';\nimport type { FluentProviderProps } from './FluentProvider.types';\n\nexport const FluentProvider: ForwardRefComponent<FluentProviderProps> = React.forwardRef((props, ref) => {\n  const state = useFluentProvider_unstable(props, ref);\n  useFluentProviderStyles_unstable(state);\n\n  const contextValues = useFluentProviderContextValues_unstable(state);\n\n  return renderFluentProvider_unstable(state, contextValues);\n});\n\nFluentProvider.displayName = 'FluentProvider';\n"],"names":["React","renderFluentProvider_unstable","useFluentProvider_unstable","useFluentProviderStyles_unstable","useFluentProviderContextValues_unstable","FluentProvider","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAI/B,SAASC,6BAA6B,QAAQ,4BAAyB;AACvE,SAASC,0BAA0B,QAAQ,yBAAsB;AACjE,SAASC,gCAAgC,QAAQ,sCAAmC;AACpF,SAASC,uCAAuC,QAAQ,sCAAmC;AAG3F,OAAO,MAAMC,+BAA2DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQP,2BAA2BK,OAAOC;IAChDL,iCAAiCM;IAEjC,MAAMC,gBAAgBN,wCAAwCK;IAE9D,OAAOR,8BAA8BQ,OAAOC;AAC9C,GAAG;AAEHL,eAAeM,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/FluentProvider/FluentProvider.types.ts"],"sourcesContent":["/*\n  IconDirectionContextValue is being imported as a leaf node import in order to prevent extra icons froms being\n  downloaded when trying to use the FluentProvider.\n  This issue has more context: https://github.com/microsoft/fluentui/issues/30909\n*/\nimport type { IconDirectionContextValue } from '@fluentui/react-icons/lib/providers';\nimport type {\n  OverridesContextValue_unstable as OverridesContextValue,\n  ProviderContextValue_unstable as ProviderContextValue,\n  TooltipVisibilityContextValue_unstable as TooltipVisibilityContextValue,\n  ThemeClassNameContextValue_unstable as ThemeClassNameContextValue,\n  ThemeContextValue_unstable as ThemeContextValue,\n  CustomStyleHooksContextValue_unstable as CustomStyleHooksContextValue,\n} from '@fluentui/react-shared-contexts';\nimport type { PartialTheme } from '@fluentui/react-theme';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type FluentProviderSlots = {\n  root: Slot<'div'>;\n};\n\n// exported for callers to avoid referencing react-shared-context\n// and applying Partial<> when passing custom style hooks.\nexport type FluentProviderCustomStyleHooks = CustomStyleHooksContextValue;\n\nexport type FluentProviderProps = Omit<ComponentProps<FluentProviderSlots>, 'dir'> & {\n  /**\n   * Passes styles applied to a component down to portals if enabled.\n   * @default true\n   */\n  applyStylesToPortals?: boolean;\n\n  /** Sets the hooks for custom styling components. */\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  customStyleHooks_unstable?: FluentProviderCustomStyleHooks;\n\n  /** Sets the direction of text & generated styles. */\n  dir?: 'ltr' | 'rtl';\n\n  /** Provides the document, can be undefined during SSR render. */\n  targetDocument?: Document;\n\n  /** Sets the theme used in a scope. */\n  theme?: PartialTheme;\n\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  overrides_unstable?: OverridesContextValue;\n};\n\nexport type FluentProviderState = ComponentState<FluentProviderSlots> &\n  Pick<FluentProviderProps, 'targetDocument'> &\n  Required<\n    Pick<FluentProviderProps, 'applyStylesToPortals' | 'customStyleHooks_unstable' | 'dir' | 'overrides_unstable'>\n  > & {\n    theme: ThemeContextValue;\n    themeClassName: string;\n    /**\n     * Props used to render SSR theme variables style element\n     */\n    serverStyleProps: {\n      /**\n       * CSS rule containing CSS variables\n       */\n      cssRule: string;\n      /**\n       * Additional attributes applied to the style element\n       */\n      attributes: Record<string, string>;\n    };\n  };\n\nexport type FluentProviderContextValues = Pick<\n  FluentProviderState,\n  'customStyleHooks_unstable' | 'theme' | 'overrides_unstable'\n> & {\n  provider: ProviderContextValue;\n  themeClassName: ThemeClassNameContextValue;\n  textDirection: 'ltr' | 'rtl';\n  iconDirection: IconDirectionContextValue;\n  tooltip: TooltipVisibilityContextValue;\n};\n"],"names":[],"mappings":"AAAA;;;;AAIA,GAmEA,WASE"}
+{"version":3,"sources":["../../../src/components/FluentProvider/FluentProvider.types.ts"],"sourcesContent":["/*\n  IconDirectionContextValue is being imported as a leaf node import in order to prevent extra icons froms being\n  downloaded when trying to use the FluentProvider.\n  This issue has more context: https://github.com/microsoft/fluentui/issues/30909\n*/\nimport type { IconDirectionContextValue } from '@fluentui/react-icons/lib/providers';\nimport type {\n  OverridesContextValue_unstable as OverridesContextValue,\n  ProviderContextValue_unstable as ProviderContextValue,\n  TooltipVisibilityContextValue_unstable as TooltipVisibilityContextValue,\n  ThemeClassNameContextValue_unstable as ThemeClassNameContextValue,\n  ThemeContextValue_unstable as ThemeContextValue,\n  CustomStyleHooksContextValue_unstable as CustomStyleHooksContextValue,\n} from '@fluentui/react-shared-contexts';\nimport type { PartialTheme } from '@fluentui/react-theme';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type FluentProviderSlots = {\n  root: Slot<'div'>;\n};\n\n// exported for callers to avoid referencing react-shared-context\n// and applying Partial<> when passing custom style hooks.\nexport type FluentProviderCustomStyleHooks = CustomStyleHooksContextValue;\n\nexport type FluentProviderProps = Omit<ComponentProps<FluentProviderSlots>, 'dir'> & {\n  /**\n   * Passes styles applied to a component down to portals if enabled.\n   * @default true\n   */\n  applyStylesToPortals?: boolean;\n\n  /** Sets the hooks for custom styling components. */\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  customStyleHooks_unstable?: FluentProviderCustomStyleHooks;\n\n  /** Sets the direction of text & generated styles. */\n  dir?: 'ltr' | 'rtl';\n\n  /** Provides the document, can be undefined during SSR render. */\n  targetDocument?: Document;\n\n  /** Sets the theme used in a scope. */\n  theme?: PartialTheme;\n\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  overrides_unstable?: OverridesContextValue;\n};\n\nexport type FluentProviderState = ComponentState<FluentProviderSlots> &\n  Pick<FluentProviderProps, 'targetDocument'> &\n  Required<\n    Pick<FluentProviderProps, 'applyStylesToPortals' | 'customStyleHooks_unstable' | 'dir' | 'overrides_unstable'>\n  > & {\n    theme: ThemeContextValue;\n    themeClassName: string;\n    /**\n     * Props used to render SSR theme variables style element\n     */\n    serverStyleProps: {\n      /**\n       * CSS rule containing CSS variables\n       */\n      cssRule: string;\n      /**\n       * Additional attributes applied to the style element\n       */\n      attributes: Record<string, string>;\n    };\n  };\n\nexport type FluentProviderContextValues = Pick<\n  FluentProviderState,\n  'customStyleHooks_unstable' | 'theme' | 'overrides_unstable'\n> & {\n  provider: ProviderContextValue;\n  themeClassName: ThemeClassNameContextValue;\n  textDirection: 'ltr' | 'rtl';\n  iconDirection: IconDirectionContextValue;\n  tooltip: TooltipVisibilityContextValue;\n};\n"],"names":[],"mappings":"AAAA;;;;AAIA,GAmEA,WASE"}

package/lib/components/FluentProvider/createCSSRuleFromTheme.js

@@ -1,7 +1,12 @@
-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 = /["'()]/;
+const CSS_ESCAPE_MAP = {
+    '\\': '\\5C ',
+    '<': '\\3C ',
+    '>': '\\3E ',
+    '{': '\\7B ',
+    '}': '\\7D ',
+    ';': '\\3B '
+};
+const CSS_ESCAPE_PATTERN = /[\\<>{};]/g;
 function escapeCharacter(character) {
     return `\\${character.charCodeAt(0).toString(16).toUpperCase()} `;
 }
@@ -16,38 +21,29 @@ function escapeSelector(value) {
         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)}.`);
-    }
+/**
+ * Escapes characters that could end the declaration, the rule or the surrounding <style> tag.
+ *
+ * Backslashes are escaped too, so a value cannot escape the declaration separator that follows it.
+ * Other characters, including quotes and parentheses, are kept as-is: theme values legitimately contain quoted
+ * font families and nested CSS functions such as `oklch(from var(--token) l c h / 0.5)`.
+ */ function escapeThemeText(value) {
+    return value.replace(CSS_ESCAPE_PATTERN, (match)=>CSS_ESCAPE_MAP[match]);
 }
 /**
  * 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 = escapeSelector(selector);
     if (theme) {
         const cssVarsAsString = Object.keys(theme).reduce((cssVarRule, cssVar)=>{
             const tokenValue = theme[cssVar];
-            if (!cssVar || BLOCKLIST_NAME_PATTERN.test(cssVar)) {
-                warnThemeToken(cssVar, 'Ignoring an unsupported CSS custom property name');
-                return cssVarRule;
-            }
+            // Skip unset values (e.g. `undefined` from a nested provider) so they don't shadow inherited tokens.
             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 `${cssVarRule}--${escapeThemeText(cssVar)}: ${escapeThemeText(String(tokenValue))}; `;
         }, '');
         return `${escapedSelector} { ${cssVarsAsString} }`;
     }

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 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"}
+{"version":3,"sources":["../../../src/components/FluentProvider/createCSSRuleFromTheme.ts"],"sourcesContent":["import type { PartialTheme } from '@fluentui/react-theme';\n\nconst CSS_ESCAPE_MAP: Record<string, string> = {\n  '\\\\': '\\\\5C ',\n  '<': '\\\\3C ',\n  '>': '\\\\3E ',\n  '{': '\\\\7B ',\n  '}': '\\\\7D ',\n  ';': '\\\\3B ',\n};\nconst CSS_ESCAPE_PATTERN = /[\\\\<>{};]/g;\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\n/**\n * Escapes characters that could end the declaration, the rule or the surrounding <style> tag.\n *\n * Backslashes are escaped too, so a value cannot escape the declaration separator that follows it.\n * Other characters, including quotes and parentheses, are kept as-is: theme values legitimately contain quoted\n * font families and nested CSS functions such as `oklch(from var(--token) l c h / 0.5)`.\n */\nfunction escapeThemeText(value: string): string {\n  return value.replace(CSS_ESCAPE_PATTERN, match => CSS_ESCAPE_MAP[match]);\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 = 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      // Skip unset values (e.g. `undefined` from a nested provider) so they don't shadow inherited tokens.\n      if (typeof tokenValue !== 'string' && (typeof tokenValue !== 'number' || !Number.isFinite(tokenValue))) {\n        return cssVarRule;\n      }\n\n      return `${cssVarRule}--${escapeThemeText(cssVar)}: ${escapeThemeText(String(tokenValue))}; `;\n    }, '');\n\n    return `${escapedSelector} { ${cssVarsAsString} }`;\n  }\n\n  return `${escapedSelector} {}`;\n}\n"],"names":["CSS_ESCAPE_MAP","CSS_ESCAPE_PATTERN","escapeCharacter","character","charCodeAt","toString","toUpperCase","escapeSelector","value","replace","match","length","includes","backslashes","slice","escapeThemeText","createCSSRuleFromTheme","selector","theme","escapedSelector","cssVarsAsString","Object","keys","reduce","cssVarRule","cssVar","tokenValue","Number","isFinite","String"],"mappings":"AAEA,MAAMA,iBAAyC;IAC7C,MAAM;IACN,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;AACP;AACA,MAAMC,qBAAqB;AAE3B,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;;;;;;CAMC,GACD,SAASY,gBAAgBP,KAAa;IACpC,OAAOA,MAAMC,OAAO,CAACR,oBAAoBS,CAAAA,QAASV,cAAc,CAACU,MAAM;AACzE;AAEA;;;;CAIC,GACD,OAAO,SAASM,uBAAuBC,QAAgB,EAAEC,KAA+B;IACtF,MAAMC,kBAAkBZ,eAAeU;IAEvC,IAAIC,OAAO;QACT,MAAME,kBAAkB,AAACC,OAAOC,IAAI,CAACJ,OAAkCK,MAAM,CAAC,CAACC,YAAYC;YACzF,MAAMC,aAAsBR,KAAK,CAACO,OAAO;YACzC,qGAAqG;YACrG,IAAI,OAAOC,eAAe,YAAa,CAAA,OAAOA,eAAe,YAAY,CAACC,OAAOC,QAAQ,CAACF,WAAU,GAAI;gBACtG,OAAOF;YACT;YAEA,OAAO,GAAGA,WAAW,EAAE,EAAET,gBAAgBU,QAAQ,EAAE,EAAEV,gBAAgBc,OAAOH,aAAa,EAAE,CAAC;QAC9F,GAAG;QAEH,OAAO,GAAGP,gBAAgB,GAAG,EAAEC,gBAAgB,EAAE,CAAC;IACpD;IAEA,OAAO,GAAGD,gBAAgB,GAAG,CAAC;AAChC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/FluentProvider/index.ts"],"sourcesContent":["export { createCSSRuleFromTheme } from './createCSSRuleFromTheme';\nexport { FluentProvider } from './FluentProvider';\nexport type {\n  FluentProviderContextValues,\n  FluentProviderCustomStyleHooks,\n  FluentProviderProps,\n  FluentProviderSlots,\n  FluentProviderState,\n} from './FluentProvider.types';\nexport { renderFluentProvider_unstable } from './renderFluentProvider';\nexport { useFluentProvider_unstable } from './useFluentProvider';\nexport { fluentProviderClassNames, useFluentProviderStyles_unstable } from './useFluentProviderStyles.styles';\nexport { useFluentProviderContextValues_unstable } from './useFluentProviderContextValues';\nexport { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';\n"],"names":["createCSSRuleFromTheme","FluentProvider","renderFluentProvider_unstable","useFluentProvider_unstable","fluentProviderClassNames","useFluentProviderStyles_unstable","useFluentProviderContextValues_unstable","useFluentProviderThemeStyleTag"],"mappings":"AAAA,SAASA,sBAAsB,QAAQ,8BAA2B;AAClE,SAASC,cAAc,QAAQ,sBAAmB;AAQlD,SAASC,6BAA6B,QAAQ,4BAAyB;AACvE,SAASC,0BAA0B,QAAQ,yBAAsB;AACjE,SAASC,wBAAwB,EAAEC,gCAAgC,QAAQ,sCAAmC;AAC9G,SAASC,uCAAuC,QAAQ,sCAAmC;AAC3F,SAASC,8BAA8B,QAAQ,sCAAmC"}
+{"version":3,"sources":["../../../src/components/FluentProvider/index.ts"],"sourcesContent":["export { createCSSRuleFromTheme } from './createCSSRuleFromTheme';\nexport { FluentProvider } from './FluentProvider';\nexport type {\n  FluentProviderContextValues,\n  FluentProviderCustomStyleHooks,\n  FluentProviderProps,\n  FluentProviderSlots,\n  FluentProviderState,\n} from './FluentProvider.types';\nexport { renderFluentProvider_unstable } from './renderFluentProvider';\nexport { useFluentProvider_unstable } from './useFluentProvider';\nexport { fluentProviderClassNames, useFluentProviderStyles_unstable } from './useFluentProviderStyles.styles';\nexport { useFluentProviderContextValues_unstable } from './useFluentProviderContextValues';\nexport { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';\n"],"names":["createCSSRuleFromTheme","FluentProvider","renderFluentProvider_unstable","useFluentProvider_unstable","fluentProviderClassNames","useFluentProviderStyles_unstable","useFluentProviderContextValues_unstable","useFluentProviderThemeStyleTag"],"mappings":"AAAA,SAASA,sBAAsB,QAAQ,8BAA2B;AAClE,SAASC,cAAc,QAAQ,sBAAmB;AAQlD,SAASC,6BAA6B,QAAQ,4BAAyB;AACvE,SAASC,0BAA0B,QAAQ,yBAAsB;AACjE,SAASC,wBAAwB,EAAEC,gCAAgC,QAAQ,sCAAmC;AAC9G,SAASC,uCAAuC,QAAQ,sCAAmC;AAC3F,SAASC,8BAA8B,QAAQ,sCAAmC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/FluentProvider/renderFluentProvider.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\n'use client';\n\nimport { canUseDOM, assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { TextDirectionProvider } from '@griffel/react';\nimport type { CustomStyleHooksContextValue_unstable as CustomStyleHooksContextValue } from '@fluentui/react-shared-contexts';\nimport {\n  OverridesProvider_unstable as OverridesProvider,\n  Provider_unstable as Provider,\n  TooltipVisibilityProvider_unstable as TooltipVisibilityProvider,\n  ThemeProvider_unstable as ThemeProvider,\n  ThemeClassNameProvider_unstable as ThemeClassNameProvider,\n  CustomStyleHooksProvider_unstable as CustomStyleHooksProvider,\n} from '@fluentui/react-shared-contexts';\nimport type { FluentProviderContextValues, FluentProviderState, FluentProviderSlots } from './FluentProvider.types';\nimport { IconDirectionContextProvider } from '@fluentui/react-icons/lib/providers';\n\n/**\n * Render the final JSX of FluentProvider\n */\nexport const renderFluentProvider_unstable = (\n  state: FluentProviderState,\n  contextValues: FluentProviderContextValues,\n): JSXElement => {\n  assertSlots<FluentProviderSlots>(state);\n\n  // Typescript (vscode) incorrectly references the FluentProviderProps.customStyleHooks_unstable\n  // instead of FluentProviderContextValues.customStyleHooks_unstable and thinks it is\n  // Partial<CustomStyleHooksContextValue>, so it needs to be cast to Required<CustomStyleHooksContextValue>\n\n  return (\n    <Provider value={contextValues.provider}>\n      <ThemeProvider value={contextValues.theme}>\n        <ThemeClassNameProvider value={contextValues.themeClassName}>\n          <CustomStyleHooksProvider\n            value={contextValues.customStyleHooks_unstable as Required<CustomStyleHooksContextValue>}\n          >\n            <TooltipVisibilityProvider value={contextValues.tooltip}>\n              <TextDirectionProvider dir={contextValues.textDirection}>\n                <IconDirectionContextProvider value={contextValues.iconDirection}>\n                  <OverridesProvider value={contextValues.overrides_unstable}>\n                    <state.root>\n                      {canUseDOM() ? null : (\n                        <style\n                          // Using dangerous HTML because react can escape characters\n                          // which can lead to invalid CSS.\n                          // eslint-disable-next-line react/no-danger\n                          dangerouslySetInnerHTML={{ __html: state.serverStyleProps.cssRule }}\n                          {...state.serverStyleProps.attributes}\n                        />\n                      )}\n\n                      {state.root.children}\n                    </state.root>\n                  </OverridesProvider>\n                </IconDirectionContextProvider>\n              </TextDirectionProvider>\n            </TooltipVisibilityProvider>\n          </CustomStyleHooksProvider>\n        </ThemeClassNameProvider>\n      </ThemeProvider>\n    </Provider>\n  );\n};\n"],"names":["canUseDOM","assertSlots","TextDirectionProvider","OverridesProvider_unstable","OverridesProvider","Provider_unstable","Provider","TooltipVisibilityProvider_unstable","TooltipVisibilityProvider","ThemeProvider_unstable","ThemeProvider","ThemeClassNameProvider_unstable","ThemeClassNameProvider","CustomStyleHooksProvider_unstable","CustomStyleHooksProvider","IconDirectionContextProvider","renderFluentProvider_unstable","state","contextValues","value","provider","theme","themeClassName","customStyleHooks_unstable","tooltip","dir","textDirection","iconDirection","overrides_unstable","root","style","dangerouslySetInnerHTML","__html","serverStyleProps","cssRule","attributes","children"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD,GAEjD;;AAEA,SAASA,SAAS,EAAEC,WAAW,QAAQ,4BAA4B;AAEnE,SAASC,qBAAqB,QAAQ,iBAAiB;AAEvD,SACEC,8BAA8BC,iBAAiB,EAC/CC,qBAAqBC,QAAQ,EAC7BC,sCAAsCC,yBAAyB,EAC/DC,0BAA0BC,aAAa,EACvCC,mCAAmCC,sBAAsB,EACzDC,qCAAqCC,wBAAwB,QACxD,kCAAkC;AAEzC,SAASC,4BAA4B,QAAQ,sCAAsC;AAEnF;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEAjB,YAAiCgB;IAEjC,+FAA+F;IAC/F,oFAAoF;IACpF,0GAA0G;IAE1G,qBACE,KAACX;QAASa,OAAOD,cAAcE,QAAQ;kBACrC,cAAA,KAACV;YAAcS,OAAOD,cAAcG,KAAK;sBACvC,cAAA,KAACT;gBAAuBO,OAAOD,cAAcI,cAAc;0BACzD,cAAA,KAACR;oBACCK,OAAOD,cAAcK,yBAAyB;8BAE9C,cAAA,KAACf;wBAA0BW,OAAOD,cAAcM,OAAO;kCACrD,cAAA,KAACtB;4BAAsBuB,KAAKP,cAAcQ,aAAa;sCACrD,cAAA,KAACX;gCAA6BI,OAAOD,cAAcS,aAAa;0CAC9D,cAAA,KAACvB;oCAAkBe,OAAOD,cAAcU,kBAAkB;8CACxD,cAAA,MAACX,MAAMY,IAAI;;4CACR7B,cAAc,qBACb,KAAC8B;gDACC,2DAA2D;gDAC3D,iCAAiC;gDACjC,2CAA2C;gDAC3CC,yBAAyB;oDAAEC,QAAQf,MAAMgB,gBAAgB,CAACC,OAAO;gDAAC;gDACjE,GAAGjB,MAAMgB,gBAAgB,CAACE,UAAU;;4CAIxClB,MAAMY,IAAI,CAACO,QAAQ;;;;;;;;;;;AAW1C,EAAE"}
+{"version":3,"sources":["../../../src/components/FluentProvider/renderFluentProvider.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\n'use client';\n\nimport { canUseDOM, assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { TextDirectionProvider } from '@griffel/react';\nimport type { CustomStyleHooksContextValue_unstable as CustomStyleHooksContextValue } from '@fluentui/react-shared-contexts';\nimport {\n  OverridesProvider_unstable as OverridesProvider,\n  Provider_unstable as Provider,\n  TooltipVisibilityProvider_unstable as TooltipVisibilityProvider,\n  ThemeProvider_unstable as ThemeProvider,\n  ThemeClassNameProvider_unstable as ThemeClassNameProvider,\n  CustomStyleHooksProvider_unstable as CustomStyleHooksProvider,\n} from '@fluentui/react-shared-contexts';\nimport type { FluentProviderContextValues, FluentProviderState, FluentProviderSlots } from './FluentProvider.types';\nimport { IconDirectionContextProvider } from '@fluentui/react-icons/lib/providers';\n\n/**\n * Render the final JSX of FluentProvider\n */\nexport const renderFluentProvider_unstable = (\n  state: FluentProviderState,\n  contextValues: FluentProviderContextValues,\n): JSXElement => {\n  assertSlots<FluentProviderSlots>(state);\n\n  // Typescript (vscode) incorrectly references the FluentProviderProps.customStyleHooks_unstable\n  // instead of FluentProviderContextValues.customStyleHooks_unstable and thinks it is\n  // Partial<CustomStyleHooksContextValue>, so it needs to be cast to Required<CustomStyleHooksContextValue>\n\n  return (\n    <Provider value={contextValues.provider}>\n      <ThemeProvider value={contextValues.theme}>\n        <ThemeClassNameProvider value={contextValues.themeClassName}>\n          <CustomStyleHooksProvider\n            value={contextValues.customStyleHooks_unstable as Required<CustomStyleHooksContextValue>}\n          >\n            <TooltipVisibilityProvider value={contextValues.tooltip}>\n              <TextDirectionProvider dir={contextValues.textDirection}>\n                <IconDirectionContextProvider value={contextValues.iconDirection}>\n                  <OverridesProvider value={contextValues.overrides_unstable}>\n                    <state.root>\n                      {canUseDOM() ? null : (\n                        <style\n                          // Using dangerous HTML because react can escape characters\n                          // which can lead to invalid CSS.\n                          // eslint-disable-next-line react/no-danger\n                          dangerouslySetInnerHTML={{ __html: state.serverStyleProps.cssRule }}\n                          {...state.serverStyleProps.attributes}\n                        />\n                      )}\n\n                      {state.root.children}\n                    </state.root>\n                  </OverridesProvider>\n                </IconDirectionContextProvider>\n              </TextDirectionProvider>\n            </TooltipVisibilityProvider>\n          </CustomStyleHooksProvider>\n        </ThemeClassNameProvider>\n      </ThemeProvider>\n    </Provider>\n  );\n};\n"],"names":["canUseDOM","assertSlots","TextDirectionProvider","OverridesProvider_unstable","OverridesProvider","Provider_unstable","Provider","TooltipVisibilityProvider_unstable","TooltipVisibilityProvider","ThemeProvider_unstable","ThemeProvider","ThemeClassNameProvider_unstable","ThemeClassNameProvider","CustomStyleHooksProvider_unstable","CustomStyleHooksProvider","IconDirectionContextProvider","renderFluentProvider_unstable","state","contextValues","value","provider","theme","themeClassName","customStyleHooks_unstable","tooltip","dir","textDirection","iconDirection","overrides_unstable","root","style","dangerouslySetInnerHTML","__html","serverStyleProps","cssRule","attributes","children"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD,GAEjD;;AAEA,SAASA,SAAS,EAAEC,WAAW,QAAQ,4BAA4B;AAEnE,SAASC,qBAAqB,QAAQ,iBAAiB;AAEvD,SACEC,8BAA8BC,iBAAiB,EAC/CC,qBAAqBC,QAAQ,EAC7BC,sCAAsCC,yBAAyB,EAC/DC,0BAA0BC,aAAa,EACvCC,mCAAmCC,sBAAsB,EACzDC,qCAAqCC,wBAAwB,QACxD,kCAAkC;AAEzC,SAASC,4BAA4B,QAAQ,sCAAsC;AAEnF;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEAjB,YAAiCgB;IAEjC,+FAA+F;IAC/F,oFAAoF;IACpF,0GAA0G;IAE1G,qBACE,KAACX;QAASa,OAAOD,cAAcE,QAAQ;kBACrC,cAAA,KAACV;YAAcS,OAAOD,cAAcG,KAAK;sBACvC,cAAA,KAACT;gBAAuBO,OAAOD,cAAcI,cAAc;0BACzD,cAAA,KAACR;oBACCK,OAAOD,cAAcK,yBAAyB;8BAE9C,cAAA,KAACf;wBAA0BW,OAAOD,cAAcM,OAAO;kCACrD,cAAA,KAACtB;4BAAsBuB,KAAKP,cAAcQ,aAAa;sCACrD,cAAA,KAACX;gCAA6BI,OAAOD,cAAcS,aAAa;0CAC9D,cAAA,KAACvB;oCAAkBe,OAAOD,cAAcU,kBAAkB;8CACxD,cAAA,MAACX,MAAMY,IAAI;;4CACR7B,cAAc,qBACb,KAAC8B;gDACC,2DAA2D;gDAC3D,iCAAiC;gDACjC,2CAA2C;gDAC3CC,yBAAyB;oDAAEC,QAAQf,MAAMgB,gBAAgB,CAACC,OAAO;gDAAC;gDACjE,GAAGjB,MAAMgB,gBAAgB,CAACE,UAAU;;4CAIxClB,MAAMY,IAAI,CAACO,QAAQ;;;;;;;;;;;AAW1C,EAAE"}

package/lib/components/FluentProvider/useFluentProvider.js

@@ -17,6 +17,7 @@ const DEFAULT_RENDERER_ATTRIBUTES = {};
  * @param props - props from this instance of FluentProvider
  * @param ref - reference to root HTMLElement of FluentProvider
  */ export const useFluentProvider_unstable = (props, ref)=>{
+    var _renderer_styleElementAttributes;
     const parentContext = useFluent();
     const parentTheme = useTheme();
     const parentOverrides = useOverrides();
@@ -31,7 +32,6 @@ const DEFAULT_RENDERER_ATTRIBUTES = {};
     const mergedOverrides = shallowMerge(parentOverrides, overrides);
     const mergedCustomStyleHooks = shallowMerge(parentCustomStyleHooks, customStyleHooks_unstable);
     const renderer = useRenderer_unstable();
-    var _renderer_styleElementAttributes;
     const { styleTagId, rule } = useFluentProviderThemeStyleTag({
         theme: mergedTheme,
         targetDocument,

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/FluentProvider/useFluentProvider.ts"],"sourcesContent":["'use client';\n\nimport { useRenderer_unstable } from '@griffel/react';\nimport { useFocusVisible } from '@fluentui/react-tabster';\nimport {\n  ThemeContext_unstable as ThemeContext,\n  useFluent_unstable as useFluent,\n  useOverrides_unstable as useOverrides,\n  CustomStyleHooksContext_unstable as CustomStyleHooksContext,\n} from '@fluentui/react-shared-contexts';\nimport type {\n  CustomStyleHooksContextValue_unstable as CustomStyleHooksContextValue,\n  ThemeContextValue_unstable as ThemeContextValue,\n} from '@fluentui/react-shared-contexts';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';\nimport type { FluentProviderProps, FluentProviderState } from './FluentProvider.types';\n\n// Meomizing empty objects to avoid unnecessary rerenders.\nconst DEFAULT_STYLE_HOOKS = {};\nconst DEFAULT_RENDERER_ATTRIBUTES = {};\n\n/**\n * Create the state required to render FluentProvider.\n *\n * The returned state can be modified with hooks such as useFluentProviderStyles_unstable,\n * before being passed to renderFluentProvider_unstable.\n *\n * @param props - props from this instance of FluentProvider\n * @param ref - reference to root HTMLElement of FluentProvider\n */\nexport const useFluentProvider_unstable = (\n  props: FluentProviderProps,\n  ref: React.Ref<HTMLElement>,\n): FluentProviderState => {\n  const parentContext = useFluent();\n  const parentTheme = useTheme();\n  const parentOverrides = useOverrides();\n  const parentCustomStyleHooks: CustomStyleHooksContextValue =\n    React.useContext(CustomStyleHooksContext) || DEFAULT_STYLE_HOOKS;\n\n  /**\n   * TODO: add merge functions to \"dir\" merge,\n   * nesting providers with the same \"dir\" should not add additional attributes to DOM\n   * see https://github.com/microsoft/fluentui/blob/0dc74a19f3aa5a058224c20505016fbdb84db172/packages/fluentui/react-northstar/src/utils/mergeProviderContexts.ts#L89-L93\n   */\n  const {\n    applyStylesToPortals = true,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    customStyleHooks_unstable,\n    dir = parentContext.dir,\n    targetDocument = parentContext.targetDocument,\n    theme,\n    overrides_unstable: overrides = {},\n  } = props;\n\n  const mergedTheme = shallowMerge(parentTheme, theme);\n  const mergedOverrides = shallowMerge(parentOverrides, overrides);\n\n  const mergedCustomStyleHooks = shallowMerge(\n    parentCustomStyleHooks,\n    customStyleHooks_unstable,\n  ) as CustomStyleHooksContextValue;\n\n  const renderer = useRenderer_unstable();\n  const { styleTagId, rule } = useFluentProviderThemeStyleTag({\n    theme: mergedTheme,\n    targetDocument,\n    rendererAttributes: renderer.styleElementAttributes ?? DEFAULT_RENDERER_ATTRIBUTES,\n  });\n\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useEffect(() => {\n      if (mergedTheme === undefined) {\n        // eslint-disable-next-line no-console\n        console.warn(\n          [\n            '@fluentui/react-provider: FluentProvider does not have your \"theme\" defined.',\n            \"Make sure that your top-level FluentProvider has set a `theme` prop or you're setting the theme in your child FluentProvider.\",\n          ].join(' '),\n        );\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n  }\n\n  return {\n    applyStylesToPortals,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    customStyleHooks_unstable: mergedCustomStyleHooks,\n    dir,\n    targetDocument,\n    theme: mergedTheme,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    overrides_unstable: mergedOverrides,\n    themeClassName: styleTagId,\n\n    components: {\n      root: 'div',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ...props,\n        dir,\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, useFocusVisible<HTMLDivElement>({ targetDocument })) as React.Ref<HTMLDivElement>,\n      }),\n      { elementType: 'div' },\n    ),\n\n    serverStyleProps: {\n      cssRule: rule,\n      attributes: {\n        ...renderer.styleElementAttributes,\n        id: styleTagId,\n      },\n    },\n  };\n};\n\nfunction shallowMerge<T>(a: T, b: T): T {\n  // Merge impacts perf: we should like to avoid it if it's possible\n  if (a && b) {\n    return { ...a, ...b };\n  }\n\n  if (a) {\n    return a;\n  }\n\n  return b;\n}\n\nfunction useTheme(): ThemeContextValue {\n  return React.useContext(ThemeContext);\n}\n"],"names":["useRenderer_unstable","useFocusVisible","ThemeContext_unstable","ThemeContext","useFluent_unstable","useFluent","useOverrides_unstable","useOverrides","CustomStyleHooksContext_unstable","CustomStyleHooksContext","getIntrinsicElementProps","useMergedRefs","slot","React","useFluentProviderThemeStyleTag","DEFAULT_STYLE_HOOKS","DEFAULT_RENDERER_ATTRIBUTES","useFluentProvider_unstable","props","ref","parentContext","parentTheme","useTheme","parentOverrides","parentCustomStyleHooks","useContext","applyStylesToPortals","customStyleHooks_unstable","dir","targetDocument","theme","overrides_unstable","overrides","mergedTheme","shallowMerge","mergedOverrides","mergedCustomStyleHooks","renderer","styleTagId","rule","rendererAttributes","styleElementAttributes","process","env","NODE_ENV","useEffect","undefined","console","warn","join","themeClassName","components","root","always","elementType","serverStyleProps","cssRule","attributes","id","a","b"],"mappings":"AAAA;AAEA,SAASA,oBAAoB,QAAQ,iBAAiB;AACtD,SAASC,eAAe,QAAQ,0BAA0B;AAC1D,SACEC,yBAAyBC,YAAY,EACrCC,sBAAsBC,SAAS,EAC/BC,yBAAyBC,YAAY,EACrCC,oCAAoCC,uBAAuB,QACtD,kCAAkC;AAKzC,SAASC,wBAAwB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAC1F,YAAYC,WAAW,QAAQ;AAE/B,SAASC,8BAA8B,QAAQ,sCAAmC;AAGlF,0DAA0D;AAC1D,MAAMC,sBAAsB,CAAC;AAC7B,MAAMC,8BAA8B,CAAC;AAErC;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAMC,gBAAgBf;IACtB,MAAMgB,cAAcC;IACpB,MAAMC,kBAAkBhB;IACxB,MAAMiB,yBACJX,MAAMY,UAAU,CAAChB,4BAA4BM;IAE/C;;;;GAIC,GACD,MAAM,EACJW,uBAAuB,IAAI,EAC3B,gEAAgE;IAChEC,yBAAyB,EACzBC,MAAMR,cAAcQ,GAAG,EACvBC,iBAAiBT,cAAcS,cAAc,EAC7CC,KAAK,EACLC,oBAAoBC,YAAY,CAAC,CAAC,EACnC,GAAGd;IAEJ,MAAMe,cAAcC,aAAab,aAAaS;IAC9C,MAAMK,kBAAkBD,aAAaX,iBAAiBS;IAEtD,MAAMI,yBAAyBF,aAC7BV,wBACAG;IAGF,MAAMU,WAAWrC;QAIKqC;IAHtB,MAAM,EAAEC,UAAU,EAAEC,IAAI,EAAE,GAAGzB,+BAA+B;QAC1DgB,OAAOG;QACPJ;QACAW,oBAAoBH,CAAAA,mCAAAA,SAASI,sBAAsB,cAA/BJ,8CAAAA,mCAAmCrB;IACzD;IAEA,IAAI0B,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,sDAAsD;QACtD/B,MAAMgC,SAAS,CAAC;YACd,IAAIZ,gBAAgBa,WAAW;gBAC7B,sCAAsC;gBACtCC,QAAQC,IAAI,CACV;oBACE;oBACA;iBACD,CAACC,IAAI,CAAC;YAEX;QACA,uDAAuD;QACzD,GAAG,EAAE;IACP;IAEA,OAAO;QACLvB;QACA,gEAAgE;QAChEC,2BAA2BS;QAC3BR;QACAC;QACAC,OAAOG;QACP,gEAAgE;QAChEF,oBAAoBI;QACpBe,gBAAgBZ;QAEhBa,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMxC,KAAKyC,MAAM,CACf3C,yBAAyB,OAAO;YAC9B,GAAGQ,KAAK;YACRU;YACA,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FT,KAAKR,cAAcQ,KAAKlB,gBAAgC;gBAAE4B;YAAe;QAC3E,IACA;YAAEyB,aAAa;QAAM;QAGvBC,kBAAkB;YAChBC,SAASjB;YACTkB,YAAY;gBACV,GAAGpB,SAASI,sBAAsB;gBAClCiB,IAAIpB;YACN;QACF;IACF;AACF,EAAE;AAEF,SAASJ,aAAgByB,CAAI,EAAEC,CAAI;IACjC,kEAAkE;IAClE,IAAID,KAAKC,GAAG;QACV,OAAO;YAAE,GAAGD,CAAC;YAAE,GAAGC,CAAC;QAAC;IACtB;IAEA,IAAID,GAAG;QACL,OAAOA;IACT;IAEA,OAAOC;AACT;AAEA,SAAStC;IACP,OAAOT,MAAMY,UAAU,CAACtB;AAC1B"}
+{"version":3,"sources":["../../../src/components/FluentProvider/useFluentProvider.ts"],"sourcesContent":["'use client';\n\nimport { useRenderer_unstable } from '@griffel/react';\nimport { useFocusVisible } from '@fluentui/react-tabster';\nimport {\n  ThemeContext_unstable as ThemeContext,\n  useFluent_unstable as useFluent,\n  useOverrides_unstable as useOverrides,\n  CustomStyleHooksContext_unstable as CustomStyleHooksContext,\n} from '@fluentui/react-shared-contexts';\nimport type {\n  CustomStyleHooksContextValue_unstable as CustomStyleHooksContextValue,\n  ThemeContextValue_unstable as ThemeContextValue,\n} from '@fluentui/react-shared-contexts';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';\nimport type { FluentProviderProps, FluentProviderState } from './FluentProvider.types';\n\n// Meomizing empty objects to avoid unnecessary rerenders.\nconst DEFAULT_STYLE_HOOKS = {};\nconst DEFAULT_RENDERER_ATTRIBUTES = {};\n\n/**\n * Create the state required to render FluentProvider.\n *\n * The returned state can be modified with hooks such as useFluentProviderStyles_unstable,\n * before being passed to renderFluentProvider_unstable.\n *\n * @param props - props from this instance of FluentProvider\n * @param ref - reference to root HTMLElement of FluentProvider\n */\nexport const useFluentProvider_unstable = (\n  props: FluentProviderProps,\n  ref: React.Ref<HTMLElement>,\n): FluentProviderState => {\n  const parentContext = useFluent();\n  const parentTheme = useTheme();\n  const parentOverrides = useOverrides();\n  const parentCustomStyleHooks: CustomStyleHooksContextValue =\n    React.useContext(CustomStyleHooksContext) || DEFAULT_STYLE_HOOKS;\n\n  /**\n   * TODO: add merge functions to \"dir\" merge,\n   * nesting providers with the same \"dir\" should not add additional attributes to DOM\n   * see https://github.com/microsoft/fluentui/blob/0dc74a19f3aa5a058224c20505016fbdb84db172/packages/fluentui/react-northstar/src/utils/mergeProviderContexts.ts#L89-L93\n   */\n  const {\n    applyStylesToPortals = true,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    customStyleHooks_unstable,\n    dir = parentContext.dir,\n    targetDocument = parentContext.targetDocument,\n    theme,\n    overrides_unstable: overrides = {},\n  } = props;\n\n  const mergedTheme = shallowMerge(parentTheme, theme);\n  const mergedOverrides = shallowMerge(parentOverrides, overrides);\n\n  const mergedCustomStyleHooks = shallowMerge(\n    parentCustomStyleHooks,\n    customStyleHooks_unstable,\n  ) as CustomStyleHooksContextValue;\n\n  const renderer = useRenderer_unstable();\n  const { styleTagId, rule } = useFluentProviderThemeStyleTag({\n    theme: mergedTheme,\n    targetDocument,\n    rendererAttributes: renderer.styleElementAttributes ?? DEFAULT_RENDERER_ATTRIBUTES,\n  });\n\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useEffect(() => {\n      if (mergedTheme === undefined) {\n        // eslint-disable-next-line no-console\n        console.warn(\n          [\n            '@fluentui/react-provider: FluentProvider does not have your \"theme\" defined.',\n            \"Make sure that your top-level FluentProvider has set a `theme` prop or you're setting the theme in your child FluentProvider.\",\n          ].join(' '),\n        );\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n  }\n\n  return {\n    applyStylesToPortals,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    customStyleHooks_unstable: mergedCustomStyleHooks,\n    dir,\n    targetDocument,\n    theme: mergedTheme,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    overrides_unstable: mergedOverrides,\n    themeClassName: styleTagId,\n\n    components: {\n      root: 'div',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ...props,\n        dir,\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, useFocusVisible<HTMLDivElement>({ targetDocument })) as React.Ref<HTMLDivElement>,\n      }),\n      { elementType: 'div' },\n    ),\n\n    serverStyleProps: {\n      cssRule: rule,\n      attributes: {\n        ...renderer.styleElementAttributes,\n        id: styleTagId,\n      },\n    },\n  };\n};\n\nfunction shallowMerge<T>(a: T, b: T): T {\n  // Merge impacts perf: we should like to avoid it if it's possible\n  if (a && b) {\n    return { ...a, ...b };\n  }\n\n  if (a) {\n    return a;\n  }\n\n  return b;\n}\n\nfunction useTheme(): ThemeContextValue {\n  return React.useContext(ThemeContext);\n}\n"],"names":["useRenderer_unstable","useFocusVisible","ThemeContext_unstable","ThemeContext","useFluent_unstable","useFluent","useOverrides_unstable","useOverrides","CustomStyleHooksContext_unstable","CustomStyleHooksContext","getIntrinsicElementProps","useMergedRefs","slot","React","useFluentProviderThemeStyleTag","DEFAULT_STYLE_HOOKS","DEFAULT_RENDERER_ATTRIBUTES","useFluentProvider_unstable","props","ref","renderer","parentContext","parentTheme","useTheme","parentOverrides","parentCustomStyleHooks","useContext","applyStylesToPortals","customStyleHooks_unstable","dir","targetDocument","theme","overrides_unstable","overrides","mergedTheme","shallowMerge","mergedOverrides","mergedCustomStyleHooks","styleTagId","rule","rendererAttributes","styleElementAttributes","process","env","NODE_ENV","useEffect","undefined","console","warn","join","themeClassName","components","root","always","elementType","serverStyleProps","cssRule","attributes","id","a","b"],"mappings":"AAAA;AAEA,SAASA,oBAAoB,QAAQ,iBAAiB;AACtD,SAASC,eAAe,QAAQ,0BAA0B;AAC1D,SACEC,yBAAyBC,YAAY,EACrCC,sBAAsBC,SAAS,EAC/BC,yBAAyBC,YAAY,EACrCC,oCAAoCC,uBAAuB,QACtD,kCAAkC;AAKzC,SAASC,wBAAwB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAC1F,YAAYC,WAAW,QAAQ;AAE/B,SAASC,8BAA8B,QAAQ,sCAAmC;AAGlF,0DAA0D;AAC1D,MAAMC,sBAAsB,CAAC;AAC7B,MAAMC,8BAA8B,CAAC;AAErC;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;QAmCsBC;IAjCtB,MAAMC,gBAAgBhB;IACtB,MAAMiB,cAAcC;IACpB,MAAMC,kBAAkBjB;IACxB,MAAMkB,yBACJZ,MAAMa,UAAU,CAACjB,4BAA4BM;IAE/C;;;;GAIC,GACD,MAAM,EACJY,uBAAuB,IAAI,EAC3B,gEAAgE;IAChEC,yBAAyB,EACzBC,MAAMR,cAAcQ,GAAG,EACvBC,iBAAiBT,cAAcS,cAAc,EAC7CC,KAAK,EACLC,oBAAoBC,YAAY,CAAC,CAAC,EACnC,GAAGf;IAEJ,MAAMgB,cAAcC,aAAab,aAAaS;IAC9C,MAAMK,kBAAkBD,aAAaX,iBAAiBS;IAEtD,MAAMI,yBAAyBF,aAC7BV,wBACAG;IAGF,MAAMR,WAAWpB;IACjB,MAAM,EAAEsC,UAAU,EAAEC,IAAI,EAAE,GAAGzB,+BAA+B;QAC1DiB,OAAOG;QACPJ;QACAU,kBAAkB,GAAEpB,mCAAAA,SAASqB,sBAAsB,cAA/BrB,8CAAAA,mCAAmCJ;IACzD;IAEA,IAAI0B,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,sDAAsD;QACtD/B,MAAMgC,SAAS,CAAC;YACd,IAAIX,gBAAgBY,WAAW;gBAC7B,sCAAsC;gBACtCC,QAAQC,IAAI,CACV;oBACE;oBACA;iBACD,CAACC,IAAI,CAAC;YAEX;QACA,uDAAuD;QACzD,GAAG,EAAE;IACP;IAEA,OAAO;QACLtB;QACA,gEAAgE;QAChEC,2BAA2BS;QAC3BR;QACAC;QACAC,OAAOG;QACP,gEAAgE;QAChEF,oBAAoBI;QACpBc,gBAAgBZ;QAEhBa,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMxC,KAAKyC,MAAM,CACf3C,yBAAyB,OAAO;YAC9B,GAAGQ,KAAK;YACRW;YACA,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FV,KAAKR,cAAcQ,KAAKlB,gBAAgC;gBAAE6B;YAAe;QAC3E,IACA;YAAEwB,aAAa;QAAM;QAGvBC,kBAAkB;YAChBC,SAASjB;YACTkB,YAAY;gBACV,GAAGrC,SAASqB,sBAAsB;gBAClCiB,IAAIpB;YACN;QACF;IACF;AACF,EAAE;AAEF,SAASH,aAAgBwB,CAAI,EAAEC,CAAI;IACjC,kEAAkE;IAClE,IAAID,KAAKC,GAAG;QACV,OAAO;YAAE,GAAGD,CAAC;YAAE,GAAGC,CAAC;QAAC;IACtB;IAEA,IAAID,GAAG;QACL,OAAOA;IACT;IAEA,OAAOC;AACT;AAEA,SAASrC;IACP,OAAOV,MAAMa,UAAU,CAACvB;AAC1B"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/FluentProvider/useFluentProviderContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\nexport function useFluentProviderContextValues_unstable(state: FluentProviderState): FluentProviderContextValues {\n  const {\n    applyStylesToPortals,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    customStyleHooks_unstable,\n    dir,\n    root,\n    targetDocument,\n    theme,\n    themeClassName,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    overrides_unstable,\n  } = state;\n\n  const provider = React.useMemo(() => ({ dir, targetDocument }), [dir, targetDocument]);\n  // \"Tooltip\" component mutates an object in this context, instance should be stable\n  const [tooltip] = React.useState(() => ({}));\n  const iconDirection = React.useMemo(() => ({ textDirection: dir }), [dir]);\n\n  return {\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    customStyleHooks_unstable,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    overrides_unstable,\n    provider,\n    textDirection: dir,\n    iconDirection,\n    tooltip,\n    theme,\n    themeClassName: applyStylesToPortals ? root.className! : themeClassName,\n  };\n}\n"],"names":["React","useFluentProviderContextValues_unstable","state","applyStylesToPortals","customStyleHooks_unstable","dir","root","targetDocument","theme","themeClassName","overrides_unstable","provider","useMemo","tooltip","useState","iconDirection","textDirection","className"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,wCAAwCC,KAA0B;IAChF,MAAM,EACJC,oBAAoB,EACpB,gEAAgE;IAChEC,yBAAyB,EACzBC,GAAG,EACHC,IAAI,EACJC,cAAc,EACdC,KAAK,EACLC,cAAc,EACd,gEAAgE;IAChEC,kBAAkB,EACnB,GAAGR;IAEJ,MAAMS,WAAWX,MAAMY,OAAO,CAAC,IAAO,CAAA;YAAEP;YAAKE;QAAe,CAAA,GAAI;QAACF;QAAKE;KAAe;IACrF,mFAAmF;IACnF,MAAM,CAACM,QAAQ,GAAGb,MAAMc,QAAQ,CAAC,IAAO,CAAA,CAAC,CAAA;IACzC,MAAMC,gBAAgBf,MAAMY,OAAO,CAAC,IAAO,CAAA;YAAEI,eAAeX;QAAI,CAAA,GAAI;QAACA;KAAI;IAEzE,OAAO;QACL,gEAAgE;QAChED;QACA,gEAAgE;QAChEM;QACAC;QACAK,eAAeX;QACfU;QACAF;QACAL;QACAC,gBAAgBN,uBAAuBG,KAAKW,SAAS,GAAIR;IAC3D;AACF"}
+{"version":3,"sources":["../../../src/components/FluentProvider/useFluentProviderContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\nexport function useFluentProviderContextValues_unstable(state: FluentProviderState): FluentProviderContextValues {\n  const {\n    applyStylesToPortals,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    customStyleHooks_unstable,\n    dir,\n    root,\n    targetDocument,\n    theme,\n    themeClassName,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    overrides_unstable,\n  } = state;\n\n  const provider = React.useMemo(() => ({ dir, targetDocument }), [dir, targetDocument]);\n  // \"Tooltip\" component mutates an object in this context, instance should be stable\n  const [tooltip] = React.useState(() => ({}));\n  const iconDirection = React.useMemo(() => ({ textDirection: dir }), [dir]);\n\n  return {\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    customStyleHooks_unstable,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    overrides_unstable,\n    provider,\n    textDirection: dir,\n    iconDirection,\n    tooltip,\n    theme,\n    themeClassName: applyStylesToPortals ? root.className! : themeClassName,\n  };\n}\n"],"names":["React","useFluentProviderContextValues_unstable","state","applyStylesToPortals","customStyleHooks_unstable","dir","root","targetDocument","theme","themeClassName","overrides_unstable","provider","useMemo","tooltip","useState","iconDirection","textDirection","className"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,wCAAwCC,KAA0B;IAChF,MAAM,EACJC,oBAAoB,EACpB,gEAAgE;IAChEC,yBAAyB,EACzBC,GAAG,EACHC,IAAI,EACJC,cAAc,EACdC,KAAK,EACLC,cAAc,EACd,gEAAgE;IAChEC,kBAAkB,EACnB,GAAGR;IAEJ,MAAMS,WAAWX,MAAMY,OAAO,CAAC,IAAO,CAAA;YAAEP;YAAKE;QAAe,CAAA,GAAI;QAACF;QAAKE;KAAe;IACrF,mFAAmF;IACnF,MAAM,CAACM,QAAQ,GAAGb,MAAMc,QAAQ,CAAC,IAAO,CAAA,CAAC,CAAA;IACzC,MAAMC,gBAAgBf,MAAMY,OAAO,CAAC,IAAO,CAAA;YAAEI,eAAeX;QAAI,CAAA,GAAI;QAACA;KAAI;IAEzE,OAAO;QACL,gEAAgE;QAChED;QACA,gEAAgE;QAChEM;QACAC;QACAK,eAAeX;QACfU;QACAF;QACAL;QACAC,gBAAgBN,uBAAuBG,KAAKW,SAAS,GAAIR;IAC3D;AACF"}

package/lib/components/FluentProvider/useFluentProviderStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/FluentProvider/useFluentProviderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/core';\nimport { useRenderer_unstable } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { FluentProviderSlots, FluentProviderState } from './FluentProvider.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const fluentProviderClassNames: SlotClassNames<FluentProviderSlots> = {\n  root: 'fui-FluentProvider',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    color: tokens.colorNeutralForeground1,\n    backgroundColor: tokens.colorNeutralBackground1,\n    textAlign: 'left',\n    ...typographyStyles.body1,\n  },\n});\n\n/** Applies style classnames to slots */\nexport const useFluentProviderStyles_unstable = (state: FluentProviderState): FluentProviderState => {\n  const renderer = useRenderer_unstable();\n  const styles = useStyles({ dir: state.dir, renderer });\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    fluentProviderClassNames.root,\n    state.themeClassName,\n    styles.root,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","useRenderer_unstable","tokens","typographyStyles","fluentProviderClassNames","root","useStyles","color","colorNeutralForeground1","backgroundColor","colorNeutralBackground1","textAlign","body1","useFluentProviderStyles_unstable","state","renderer","styles","dir","className","themeClassName"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,oBAAoB,QAAQ,iBAAiB;AACtD,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAIjE,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYP,WAAW;IAC3BM,MAAM;QACJE,OAAOL,OAAOM,uBAAuB;QACrCC,iBAAiBP,OAAOQ,uBAAuB;QAC/CC,WAAW;QACX,GAAGR,iBAAiBS,KAAK;IAC3B;AACF;AAEA,sCAAsC,GACtC,OAAO,MAAMC,mCAAmC,CAACC;IAC/C,MAAMC,WAAWd;IACjB,MAAMe,SAASV,UAAU;QAAEW,KAAKH,MAAMG,GAAG;QAAEF;IAAS;IAEpD,oDAAoD;IACpDD,MAAMT,IAAI,CAACa,SAAS,GAAGlB,aACrBI,yBAAyBC,IAAI,EAC7BS,MAAMK,cAAc,EACpBH,OAAOX,IAAI,EACXS,MAAMT,IAAI,CAACa,SAAS;IAGtB,OAAOJ;AACT,EAAE"}
+{"version":3,"sources":["../../../src/components/FluentProvider/useFluentProviderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/core';\nimport { useRenderer_unstable } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { FluentProviderSlots, FluentProviderState } from './FluentProvider.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const fluentProviderClassNames: SlotClassNames<FluentProviderSlots> = {\n  root: 'fui-FluentProvider',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    color: tokens.colorNeutralForeground1,\n    backgroundColor: tokens.colorNeutralBackground1,\n    textAlign: 'left',\n    ...typographyStyles.body1,\n  },\n});\n\n/** Applies style classnames to slots */\nexport const useFluentProviderStyles_unstable = (state: FluentProviderState): FluentProviderState => {\n  const renderer = useRenderer_unstable();\n  const styles = useStyles({ dir: state.dir, renderer });\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    fluentProviderClassNames.root,\n    state.themeClassName,\n    styles.root,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","useRenderer_unstable","tokens","typographyStyles","fluentProviderClassNames","root","useStyles","color","colorNeutralForeground1","backgroundColor","colorNeutralBackground1","textAlign","body1","useFluentProviderStyles_unstable","state","renderer","styles","dir","className","themeClassName"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,oBAAoB,QAAQ,iBAAiB;AACtD,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAIjE,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYP,WAAW;IAC3BM,MAAM;QACJE,OAAOL,OAAOM,uBAAuB;QACrCC,iBAAiBP,OAAOQ,uBAAuB;QAC/CC,WAAW;QACX,GAAGR,iBAAiBS,KAAK;IAC3B;AACF;AAEA,sCAAsC,GACtC,OAAO,MAAMC,mCAAmC,CAACC;IAC/C,MAAMC,WAAWd;IACjB,MAAMe,SAASV,UAAU;QAAEW,KAAKH,MAAMG,GAAG;QAAEF;IAAS;IAEpD,oDAAoD;IACpDD,MAAMT,IAAI,CAACa,SAAS,GAAGlB,aACrBI,yBAAyBC,IAAI,EAC7BS,MAAMK,cAAc,EACpBH,OAAOX,IAAI,EACXS,MAAMT,IAAI,CAACa,SAAS;IAGtB,OAAOJ;AACT,EAAE"}

package/lib/components/FluentProvider/useFluentProviderThemeStyleTag.js

@@ -51,6 +51,7 @@ const insertSheet = (tag, rule)=>{
             // this allows to do checks with strict mode enabled as .useEffect() will be called with incremented IDs because
             // of double render.
             if (targetDocument) {
+                var _ref;
                 var _styleElement_textContent;
                 const providerElementSelector = `.${fluentProviderClassNames.root}.${styleTagId}`;
                 const providerElements = targetDocument.querySelectorAll(providerElementSelector);
@@ -68,11 +69,10 @@ const insertSheet = (tag, rule)=>{
                     return;
                 }
                 const styleElement = styleElements.item(0);
-                var _styleElement_textContent_length;
                 // Heads up!
                 //
                 // In SSR, we will have DOM upfront & style tags will have CSS rules defined in `.textContent`
-                const isSSR = ((_styleElement_textContent_length = styleElement === null || styleElement === void 0 ? void 0 : (_styleElement_textContent = styleElement.textContent) === null || _styleElement_textContent === void 0 ? void 0 : _styleElement_textContent.length) !== null && _styleElement_textContent_length !== void 0 ? _styleElement_textContent_length : 0) > 0;
+                const isSSR = ((_ref = styleElement === null || styleElement === void 0 ? void 0 : (_styleElement_textContent = styleElement.textContent) === null || _styleElement_textContent === void 0 ? void 0 : _styleElement_textContent.length) !== null && _ref !== void 0 ? _ref : 0) > 0;
                 const elementsCount = isSSR ? 1 : 0;
                 if (providerElements.length > elementsCount) {
                     // eslint-disable-next-line no-console

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/FluentProvider/useFluentProviderThemeStyleTag.ts"],"sourcesContent":["'use client';\n\nimport { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { createCSSRuleFromTheme } from './createCSSRuleFromTheme';\nimport type { FluentProviderState } from './FluentProvider.types';\nimport { fluentProviderClassNames } from './useFluentProviderStyles.styles';\n\n// String concatenation is used to prevent bundlers to complain with older versions of React\nconst useInsertionEffect = (React as never)['useInsertion' + 'Effect']\n  ? (React as never)['useInsertion' + 'Effect']\n  : useIsomorphicLayoutEffect;\n\nconst createStyleTag = (target: Document | undefined, elementAttributes: Record<string, string>) => {\n  // Document might exist but not be ready yet (e.g. during SSR)\n  // In that case, we should not create a style tag\n  if (!target?.head) {\n    return undefined;\n  }\n\n  const tag = target.createElement('style');\n\n  Object.keys(elementAttributes).forEach(attrName => {\n    tag.setAttribute(attrName, elementAttributes[attrName]);\n  });\n\n  target.head.appendChild(tag);\n  return tag;\n};\n\nconst insertSheet = (tag: HTMLStyleElement, rule: string) => {\n  const sheet = tag.sheet;\n\n  if (sheet) {\n    if (sheet.cssRules.length > 0) {\n      sheet.deleteRule(0);\n    }\n    sheet.insertRule(rule, 0);\n  } else if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line no-console\n    console.error('FluentProvider: No sheet available on styleTag, styles will not be inserted into DOM.');\n  }\n};\n\n/**\n * Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class\n * @internal\n * @returns CSS class to apply the rule\n */\nexport const useFluentProviderThemeStyleTag = (\n  options: Pick<FluentProviderState, 'theme' | 'targetDocument'> & { rendererAttributes: Record<string, string> },\n): { styleTagId: string; rule: string } => {\n  const { targetDocument, theme, rendererAttributes } = options;\n\n  const styleTag = React.useRef<HTMLStyleElement | undefined | null>(undefined);\n\n  const styleTagId = useId(fluentProviderClassNames.root);\n  const styleElementAttributes = rendererAttributes;\n\n  const rule = React.useMemo(() => createCSSRuleFromTheme(`.${styleTagId}`, theme), [theme, styleTagId]);\n\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line react-hooks/rules-of-hooks, react-hooks/void-use-memo\n    React.useMemo(() => {\n      // Heads up!\n      // .useMemo() is used because it is called during render and DOM for _current_ component is not mounted yet. Also,\n      // this allows to do checks with strict mode enabled as .useEffect() will be called with incremented IDs because\n      // of double render.\n\n      if (targetDocument) {\n        const providerElementSelector = `.${fluentProviderClassNames.root}.${styleTagId}`;\n        const providerElements = targetDocument.querySelectorAll(providerElementSelector);\n\n        const styleElementSelector = `style[id=\"${styleTagId}\"]`;\n        const styleElements = targetDocument.querySelectorAll<HTMLStyleElement>(styleElementSelector);\n\n        if (styleElements.length > 1) {\n          // eslint-disable-next-line no-console\n          console.error(\n            [\n              '@fluentui/react-provider: We found multiple <style> elements with same IDs in your DOM.',\n              'Please make sure that you configured your application properly.',\n              '\\n',\n              '\\n',\n              'Configuration guide: https://aka.ms/fluentui-conflicting-ids',\n            ].join(' '),\n          );\n          return;\n        }\n\n        const styleElement = styleElements.item(0) as HTMLStyleElement | null;\n\n        // Heads up!\n        //\n        // In SSR, we will have DOM upfront & style tags will have CSS rules defined in `.textContent`\n        const isSSR = (styleElement?.textContent?.length ?? 0) > 0;\n        const elementsCount = isSSR ? 1 : 0;\n\n        if (providerElements.length > elementsCount) {\n          // eslint-disable-next-line no-console\n          console.error(\n            [\n              '@fluentui/react-provider: There are conflicting ids in your DOM.',\n              'Please make sure that you configured your application properly.',\n              '\\n',\n              '\\n',\n              'Configuration guide: https://aka.ms/fluentui-conflicting-ids',\n            ].join(' '),\n          );\n        }\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n  }\n\n  useHandleSSRStyleElements(targetDocument, styleTagId);\n  useInsertionEffect(() => {\n    // The style element could already have been created during SSR - no need to recreate it\n    const ssrStyleElement = targetDocument?.getElementById(styleTagId);\n    if (ssrStyleElement) {\n      styleTag.current = ssrStyleElement as HTMLStyleElement;\n    } else {\n      styleTag.current = createStyleTag(targetDocument, { ...styleElementAttributes, id: styleTagId });\n      if (styleTag.current) {\n        insertSheet(styleTag.current, rule);\n      }\n    }\n\n    return () => {\n      styleTag.current?.remove();\n    };\n  }, [styleTagId, targetDocument, rule, styleElementAttributes]);\n\n  return { styleTagId, rule };\n};\n\nfunction useHandleSSRStyleElements(targetDocument: Document | undefined | null, styleTagId: string) {\n  // Using a state factory so that this logic only runs once per render\n  // Each FluentProvider can create its own style element during SSR as a slot\n  // Moves all theme style elements to document head during render to avoid hydration errors.\n  // Should be strict mode safe since the logic is idempotent.\n  React.useState(() => {\n    if (!targetDocument) {\n      return;\n    }\n\n    const themeStyleElement = targetDocument.getElementById(styleTagId);\n    if (themeStyleElement) {\n      targetDocument.head.append(themeStyleElement);\n    }\n  });\n}\n"],"names":["useId","useIsomorphicLayoutEffect","React","createCSSRuleFromTheme","fluentProviderClassNames","useInsertionEffect","createStyleTag","target","elementAttributes","head","undefined","tag","createElement","Object","keys","forEach","attrName","setAttribute","appendChild","insertSheet","rule","sheet","cssRules","length","deleteRule","insertRule","process","env","NODE_ENV","console","error","useFluentProviderThemeStyleTag","options","targetDocument","theme","rendererAttributes","styleTag","useRef","styleTagId","root","styleElementAttributes","useMemo","styleElement","providerElementSelector","providerElements","querySelectorAll","styleElementSelector","styleElements","join","item","isSSR","textContent","elementsCount","useHandleSSRStyleElements","ssrStyleElement","getElementById","current","id","remove","useState","themeStyleElement","append"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/FluentProvider/useFluentProviderThemeStyleTag.ts"],"sourcesContent":["'use client';\n\nimport { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { createCSSRuleFromTheme } from './createCSSRuleFromTheme';\nimport type { FluentProviderState } from './FluentProvider.types';\nimport { fluentProviderClassNames } from './useFluentProviderStyles.styles';\n\n// String concatenation is used to prevent bundlers to complain with older versions of React\nconst useInsertionEffect = (React as never)['useInsertion' + 'Effect']\n  ? (React as never)['useInsertion' + 'Effect']\n  : useIsomorphicLayoutEffect;\n\nconst createStyleTag = (target: Document | undefined, elementAttributes: Record<string, string>) => {\n  // Document might exist but not be ready yet (e.g. during SSR)\n  // In that case, we should not create a style tag\n  if (!target?.head) {\n    return undefined;\n  }\n\n  const tag = target.createElement('style');\n\n  Object.keys(elementAttributes).forEach(attrName => {\n    tag.setAttribute(attrName, elementAttributes[attrName]);\n  });\n\n  target.head.appendChild(tag);\n  return tag;\n};\n\nconst insertSheet = (tag: HTMLStyleElement, rule: string) => {\n  const sheet = tag.sheet;\n\n  if (sheet) {\n    if (sheet.cssRules.length > 0) {\n      sheet.deleteRule(0);\n    }\n    sheet.insertRule(rule, 0);\n  } else if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line no-console\n    console.error('FluentProvider: No sheet available on styleTag, styles will not be inserted into DOM.');\n  }\n};\n\n/**\n * Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class\n * @internal\n * @returns CSS class to apply the rule\n */\nexport const useFluentProviderThemeStyleTag = (\n  options: Pick<FluentProviderState, 'theme' | 'targetDocument'> & { rendererAttributes: Record<string, string> },\n): { styleTagId: string; rule: string } => {\n  const { targetDocument, theme, rendererAttributes } = options;\n\n  const styleTag = React.useRef<HTMLStyleElement | undefined | null>(undefined);\n\n  const styleTagId = useId(fluentProviderClassNames.root);\n  const styleElementAttributes = rendererAttributes;\n\n  const rule = React.useMemo(() => createCSSRuleFromTheme(`.${styleTagId}`, theme), [theme, styleTagId]);\n\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line react-hooks/rules-of-hooks, react-hooks/void-use-memo\n    React.useMemo(() => {\n      // Heads up!\n      // .useMemo() is used because it is called during render and DOM for _current_ component is not mounted yet. Also,\n      // this allows to do checks with strict mode enabled as .useEffect() will be called with incremented IDs because\n      // of double render.\n\n      if (targetDocument) {\n        const providerElementSelector = `.${fluentProviderClassNames.root}.${styleTagId}`;\n        const providerElements = targetDocument.querySelectorAll(providerElementSelector);\n\n        const styleElementSelector = `style[id=\"${styleTagId}\"]`;\n        const styleElements = targetDocument.querySelectorAll<HTMLStyleElement>(styleElementSelector);\n\n        if (styleElements.length > 1) {\n          // eslint-disable-next-line no-console\n          console.error(\n            [\n              '@fluentui/react-provider: We found multiple <style> elements with same IDs in your DOM.',\n              'Please make sure that you configured your application properly.',\n              '\\n',\n              '\\n',\n              'Configuration guide: https://aka.ms/fluentui-conflicting-ids',\n            ].join(' '),\n          );\n          return;\n        }\n\n        const styleElement = styleElements.item(0) as HTMLStyleElement | null;\n\n        // Heads up!\n        //\n        // In SSR, we will have DOM upfront & style tags will have CSS rules defined in `.textContent`\n        const isSSR = (styleElement?.textContent?.length ?? 0) > 0;\n        const elementsCount = isSSR ? 1 : 0;\n\n        if (providerElements.length > elementsCount) {\n          // eslint-disable-next-line no-console\n          console.error(\n            [\n              '@fluentui/react-provider: There are conflicting ids in your DOM.',\n              'Please make sure that you configured your application properly.',\n              '\\n',\n              '\\n',\n              'Configuration guide: https://aka.ms/fluentui-conflicting-ids',\n            ].join(' '),\n          );\n        }\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n  }\n\n  useHandleSSRStyleElements(targetDocument, styleTagId);\n  useInsertionEffect(() => {\n    // The style element could already have been created during SSR - no need to recreate it\n    const ssrStyleElement = targetDocument?.getElementById(styleTagId);\n    if (ssrStyleElement) {\n      styleTag.current = ssrStyleElement as HTMLStyleElement;\n    } else {\n      styleTag.current = createStyleTag(targetDocument, { ...styleElementAttributes, id: styleTagId });\n      if (styleTag.current) {\n        insertSheet(styleTag.current, rule);\n      }\n    }\n\n    return () => {\n      styleTag.current?.remove();\n    };\n  }, [styleTagId, targetDocument, rule, styleElementAttributes]);\n\n  return { styleTagId, rule };\n};\n\nfunction useHandleSSRStyleElements(targetDocument: Document | undefined | null, styleTagId: string) {\n  // Using a state factory so that this logic only runs once per render\n  // Each FluentProvider can create its own style element during SSR as a slot\n  // Moves all theme style elements to document head during render to avoid hydration errors.\n  // Should be strict mode safe since the logic is idempotent.\n  React.useState(() => {\n    if (!targetDocument) {\n      return;\n    }\n\n    const themeStyleElement = targetDocument.getElementById(styleTagId);\n    if (themeStyleElement) {\n      targetDocument.head.append(themeStyleElement);\n    }\n  });\n}\n"],"names":["useId","useIsomorphicLayoutEffect","React","createCSSRuleFromTheme","fluentProviderClassNames","useInsertionEffect","createStyleTag","target","elementAttributes","head","undefined","tag","createElement","Object","keys","forEach","attrName","setAttribute","appendChild","insertSheet","rule","sheet","cssRules","length","deleteRule","insertRule","process","env","NODE_ENV","console","error","useFluentProviderThemeStyleTag","options","targetDocument","theme","rendererAttributes","styleTag","useRef","styleTagId","root","styleElementAttributes","useMemo","styleElement","providerElementSelector","providerElements","querySelectorAll","styleElementSelector","styleElements","join","item","isSSR","textContent","elementsCount","useHandleSSRStyleElements","ssrStyleElement","getElementById","current","id","remove","useState","themeStyleElement","append"],"mappings":"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"}

package/lib-commonjs/FluentProvider.cjs

@@ -5,32 +5,32 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    FluentProvider: function() {
+    get FluentProvider () {
         return _index.FluentProvider;
     },
-    createCSSRuleFromTheme: function() {
+    get createCSSRuleFromTheme () {
         return _index.createCSSRuleFromTheme;
     },
-    fluentProviderClassNames: function() {
+    get fluentProviderClassNames () {
         return _index.fluentProviderClassNames;
     },
-    renderFluentProvider_unstable: function() {
+    get renderFluentProvider_unstable () {
         return _index.renderFluentProvider_unstable;
     },
-    useFluentProviderContextValues_unstable: function() {
+    get useFluentProviderContextValues_unstable () {
         return _index.useFluentProviderContextValues_unstable;
     },
-    useFluentProviderStyles_unstable: function() {
+    get useFluentProviderStyles_unstable () {
         return _index.useFluentProviderStyles_unstable;
     },
-    useFluentProviderThemeStyleTag: function() {
+    get useFluentProviderThemeStyleTag () {
         return _index.useFluentProviderThemeStyleTag;
     },
-    useFluentProvider_unstable: function() {
+    get useFluentProvider_unstable () {
         return _index.useFluentProvider_unstable;
     }
 });

package/lib-commonjs/FluentProvider.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/FluentProvider.ts"],"sourcesContent":["export type {\n  FluentProviderContextValues,\n  FluentProviderCustomStyleHooks,\n  FluentProviderProps,\n  FluentProviderSlots,\n  FluentProviderState,\n} from './components/FluentProvider/index';\nexport {\n  FluentProvider,\n  createCSSRuleFromTheme,\n  fluentProviderClassNames,\n  renderFluentProvider_unstable,\n  useFluentProviderContextValues_unstable,\n  useFluentProviderStyles_unstable,\n  useFluentProviderThemeStyleTag,\n  useFluentProvider_unstable,\n} from './components/FluentProvider/index';\n"],"names":["FluentProvider","createCSSRuleFromTheme","fluentProviderClassNames","renderFluentProvider_unstable","useFluentProviderContextValues_unstable","useFluentProviderStyles_unstable","useFluentProviderThemeStyleTag","useFluentProvider_unstable"],"mappings":";;;;;;;;;;;IAQEA;oCAAc;;;eACdC,6BAAsB;;;eACtBC,+BAAwB;;;eACxBC,oCAA6B;;;eAC7BC,8CAAuC;;;eACvCC,uCAAgC;;;eAChCC,qCAA8B;;;eAC9BC,iCAA0B;;;uBACrB,uCAAoC"}
+{"version":3,"sources":["../src/FluentProvider.ts"],"sourcesContent":["export type {\n  FluentProviderContextValues,\n  FluentProviderCustomStyleHooks,\n  FluentProviderProps,\n  FluentProviderSlots,\n  FluentProviderState,\n} from './components/FluentProvider/index';\nexport {\n  FluentProvider,\n  createCSSRuleFromTheme,\n  fluentProviderClassNames,\n  renderFluentProvider_unstable,\n  useFluentProviderContextValues_unstable,\n  useFluentProviderStyles_unstable,\n  useFluentProviderThemeStyleTag,\n  useFluentProvider_unstable,\n} from './components/FluentProvider/index';\n"],"names":["FluentProvider","createCSSRuleFromTheme","fluentProviderClassNames","renderFluentProvider_unstable","useFluentProviderContextValues_unstable","useFluentProviderStyles_unstable","useFluentProviderThemeStyleTag","useFluentProvider_unstable"],"mappings":";;;;;;;;;;;;eAQEA,qBAAc;;;eACdC,6BAAsB;;;eACtBC,+BAAwB;;;eACxBC,oCAA6B;;;eAC7BC,8CAAuC;;;eACvCC,uCAAgC;;;eAChCC,qCAA8B;;;eAC9BC,iCAA0B;;;uBACrB,uCAAoC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/FluentProvider/FluentProvider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\nimport { renderFluentProvider_unstable } from './renderFluentProvider';\nimport { useFluentProvider_unstable } from './useFluentProvider';\nimport { useFluentProviderStyles_unstable } from './useFluentProviderStyles.styles';\nimport { useFluentProviderContextValues_unstable } from './useFluentProviderContextValues';\nimport type { FluentProviderProps } from './FluentProvider.types';\n\nexport const FluentProvider: ForwardRefComponent<FluentProviderProps> = React.forwardRef((props, ref) => {\n  const state = useFluentProvider_unstable(props, ref);\n  useFluentProviderStyles_unstable(state);\n\n  const contextValues = useFluentProviderContextValues_unstable(state);\n\n  return renderFluentProvider_unstable(state, contextValues);\n});\n\nFluentProvider.displayName = 'FluentProvider';\n"],"names":["React","renderFluentProvider_unstable","useFluentProvider_unstable","useFluentProviderStyles_unstable","useFluentProviderContextValues_unstable","FluentProvider","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;sCAIe,4BAAyB;mCAC5B,yBAAsB;+CAChB,sCAAmC;gDAC5B,sCAAmC;AAGpF,MAAMK,iBAAAA,WAAAA,GAA2DL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,YAAQP,6CAAAA,EAA2BK,OAAOC;QAChDL,+DAAAA,EAAiCM;IAEjC,MAAMC,oBAAgBN,uEAAAA,EAAwCK;IAE9D,WAAOR,mDAAAA,EAA8BQ,OAAOC;AAC9C,GAAG;AAEHL,eAAeM,WAAW,GAAG"}
+{"version":3,"sources":["../../../src/components/FluentProvider/FluentProvider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\nimport { renderFluentProvider_unstable } from './renderFluentProvider';\nimport { useFluentProvider_unstable } from './useFluentProvider';\nimport { useFluentProviderStyles_unstable } from './useFluentProviderStyles.styles';\nimport { useFluentProviderContextValues_unstable } from './useFluentProviderContextValues';\nimport type { FluentProviderProps } from './FluentProvider.types';\n\nexport const FluentProvider: ForwardRefComponent<FluentProviderProps> = React.forwardRef((props, ref) => {\n  const state = useFluentProvider_unstable(props, ref);\n  useFluentProviderStyles_unstable(state);\n\n  const contextValues = useFluentProviderContextValues_unstable(state);\n\n  return renderFluentProvider_unstable(state, contextValues);\n});\n\nFluentProvider.displayName = 'FluentProvider';\n"],"names":["React","renderFluentProvider_unstable","useFluentProvider_unstable","useFluentProviderStyles_unstable","useFluentProviderContextValues_unstable","FluentProvider","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;sCAIe,4BAAyB;mCAC5B,yBAAsB;+CAChB,sCAAmC;gDAC5B,sCAAmC;AAGpF,MAAMK,iBAAAA,WAAAA,GAA2DL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,YAAQP,6CAAAA,EAA2BK,OAAOC;QAChDL,+DAAAA,EAAiCM;IAEjC,MAAMC,oBAAgBN,uEAAAA,EAAwCK;IAE9D,WAAOR,mDAAAA,EAA8BQ,OAAOC;AAC9C,GAAG;AAEHL,eAAeM,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/FluentProvider/FluentProvider.types.ts"],"sourcesContent":["/*\n  IconDirectionContextValue is being imported as a leaf node import in order to prevent extra icons froms being\n  downloaded when trying to use the FluentProvider.\n  This issue has more context: https://github.com/microsoft/fluentui/issues/30909\n*/\nimport type { IconDirectionContextValue } from '@fluentui/react-icons/lib/providers';\nimport type {\n  OverridesContextValue_unstable as OverridesContextValue,\n  ProviderContextValue_unstable as ProviderContextValue,\n  TooltipVisibilityContextValue_unstable as TooltipVisibilityContextValue,\n  ThemeClassNameContextValue_unstable as ThemeClassNameContextValue,\n  ThemeContextValue_unstable as ThemeContextValue,\n  CustomStyleHooksContextValue_unstable as CustomStyleHooksContextValue,\n} from '@fluentui/react-shared-contexts';\nimport type { PartialTheme } from '@fluentui/react-theme';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type FluentProviderSlots = {\n  root: Slot<'div'>;\n};\n\n// exported for callers to avoid referencing react-shared-context\n// and applying Partial<> when passing custom style hooks.\nexport type FluentProviderCustomStyleHooks = CustomStyleHooksContextValue;\n\nexport type FluentProviderProps = Omit<ComponentProps<FluentProviderSlots>, 'dir'> & {\n  /**\n   * Passes styles applied to a component down to portals if enabled.\n   * @default true\n   */\n  applyStylesToPortals?: boolean;\n\n  /** Sets the hooks for custom styling components. */\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  customStyleHooks_unstable?: FluentProviderCustomStyleHooks;\n\n  /** Sets the direction of text & generated styles. */\n  dir?: 'ltr' | 'rtl';\n\n  /** Provides the document, can be undefined during SSR render. */\n  targetDocument?: Document;\n\n  /** Sets the theme used in a scope. */\n  theme?: PartialTheme;\n\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  overrides_unstable?: OverridesContextValue;\n};\n\nexport type FluentProviderState = ComponentState<FluentProviderSlots> &\n  Pick<FluentProviderProps, 'targetDocument'> &\n  Required<\n    Pick<FluentProviderProps, 'applyStylesToPortals' | 'customStyleHooks_unstable' | 'dir' | 'overrides_unstable'>\n  > & {\n    theme: ThemeContextValue;\n    themeClassName: string;\n    /**\n     * Props used to render SSR theme variables style element\n     */\n    serverStyleProps: {\n      /**\n       * CSS rule containing CSS variables\n       */\n      cssRule: string;\n      /**\n       * Additional attributes applied to the style element\n       */\n      attributes: Record<string, string>;\n    };\n  };\n\nexport type FluentProviderContextValues = Pick<\n  FluentProviderState,\n  'customStyleHooks_unstable' | 'theme' | 'overrides_unstable'\n> & {\n  provider: ProviderContextValue;\n  themeClassName: ThemeClassNameContextValue;\n  textDirection: 'ltr' | 'rtl';\n  iconDirection: IconDirectionContextValue;\n  tooltip: TooltipVisibilityContextValue;\n};\n"],"names":[],"mappings":"AAAA;;;;AAIA,GAmEA,WASE"}
+{"version":3,"sources":["../../../src/components/FluentProvider/FluentProvider.types.ts"],"sourcesContent":["/*\n  IconDirectionContextValue is being imported as a leaf node import in order to prevent extra icons froms being\n  downloaded when trying to use the FluentProvider.\n  This issue has more context: https://github.com/microsoft/fluentui/issues/30909\n*/\nimport type { IconDirectionContextValue } from '@fluentui/react-icons/lib/providers';\nimport type {\n  OverridesContextValue_unstable as OverridesContextValue,\n  ProviderContextValue_unstable as ProviderContextValue,\n  TooltipVisibilityContextValue_unstable as TooltipVisibilityContextValue,\n  ThemeClassNameContextValue_unstable as ThemeClassNameContextValue,\n  ThemeContextValue_unstable as ThemeContextValue,\n  CustomStyleHooksContextValue_unstable as CustomStyleHooksContextValue,\n} from '@fluentui/react-shared-contexts';\nimport type { PartialTheme } from '@fluentui/react-theme';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type FluentProviderSlots = {\n  root: Slot<'div'>;\n};\n\n// exported for callers to avoid referencing react-shared-context\n// and applying Partial<> when passing custom style hooks.\nexport type FluentProviderCustomStyleHooks = CustomStyleHooksContextValue;\n\nexport type FluentProviderProps = Omit<ComponentProps<FluentProviderSlots>, 'dir'> & {\n  /**\n   * Passes styles applied to a component down to portals if enabled.\n   * @default true\n   */\n  applyStylesToPortals?: boolean;\n\n  /** Sets the hooks for custom styling components. */\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  customStyleHooks_unstable?: FluentProviderCustomStyleHooks;\n\n  /** Sets the direction of text & generated styles. */\n  dir?: 'ltr' | 'rtl';\n\n  /** Provides the document, can be undefined during SSR render. */\n  targetDocument?: Document;\n\n  /** Sets the theme used in a scope. */\n  theme?: PartialTheme;\n\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  overrides_unstable?: OverridesContextValue;\n};\n\nexport type FluentProviderState = ComponentState<FluentProviderSlots> &\n  Pick<FluentProviderProps, 'targetDocument'> &\n  Required<\n    Pick<FluentProviderProps, 'applyStylesToPortals' | 'customStyleHooks_unstable' | 'dir' | 'overrides_unstable'>\n  > & {\n    theme: ThemeContextValue;\n    themeClassName: string;\n    /**\n     * Props used to render SSR theme variables style element\n     */\n    serverStyleProps: {\n      /**\n       * CSS rule containing CSS variables\n       */\n      cssRule: string;\n      /**\n       * Additional attributes applied to the style element\n       */\n      attributes: Record<string, string>;\n    };\n  };\n\nexport type FluentProviderContextValues = Pick<\n  FluentProviderState,\n  'customStyleHooks_unstable' | 'theme' | 'overrides_unstable'\n> & {\n  provider: ProviderContextValue;\n  themeClassName: ThemeClassNameContextValue;\n  textDirection: 'ltr' | 'rtl';\n  iconDirection: IconDirectionContextValue;\n  tooltip: TooltipVisibilityContextValue;\n};\n"],"names":[],"mappings":"AAAA;;;;AAIA,GAmEA,WASE"}

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

@@ -8,10 +8,15 @@ Object.defineProperty(exports, "createCSSRuleFromTheme", {
         return createCSSRuleFromTheme;
     }
 });
-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 = /["'()]/;
+const CSS_ESCAPE_MAP = {
+    '\\': '\\5C ',
+    '<': '\\3C ',
+    '>': '\\3E ',
+    '{': '\\7B ',
+    '}': '\\7D ',
+    ';': '\\3B '
+};
+const CSS_ESCAPE_PATTERN = /[\\<>{};]/g;
 function escapeCharacter(character) {
     return `\\${character.charCodeAt(0).toString(16).toUpperCase()} `;
 }
@@ -26,32 +31,25 @@ function escapeSelector(value) {
         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)}.`);
-    }
+/**
+ * Escapes characters that could end the declaration, the rule or the surrounding <style> tag.
+ *
+ * Backslashes are escaped too, so a value cannot escape the declaration separator that follows it.
+ * Other characters, including quotes and parentheses, are kept as-is: theme values legitimately contain quoted
+ * font families and nested CSS functions such as `oklch(from var(--token) l c h / 0.5)`.
+ */ function escapeThemeText(value) {
+    return value.replace(CSS_ESCAPE_PATTERN, (match)=>CSS_ESCAPE_MAP[match]);
 }
 function createCSSRuleFromTheme(selector, theme) {
     const escapedSelector = escapeSelector(selector);
     if (theme) {
         const cssVarsAsString = Object.keys(theme).reduce((cssVarRule, cssVar)=>{
             const tokenValue = theme[cssVar];
-            if (!cssVar || BLOCKLIST_NAME_PATTERN.test(cssVar)) {
-                warnThemeToken(cssVar, 'Ignoring an unsupported CSS custom property name');
-                return cssVarRule;
-            }
+            // Skip unset values (e.g. `undefined` from a nested provider) so they don't shadow inherited tokens.
             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 `${cssVarRule}--${escapeThemeText(cssVar)}: ${escapeThemeText(String(tokenValue))}; `;
         }, '');
         return `${escapedSelector} { ${cssVarsAsString} }`;
     }

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 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"}
+{"version":3,"sources":["../../../src/components/FluentProvider/createCSSRuleFromTheme.ts"],"sourcesContent":["import type { PartialTheme } from '@fluentui/react-theme';\n\nconst CSS_ESCAPE_MAP: Record<string, string> = {\n  '\\\\': '\\\\5C ',\n  '<': '\\\\3C ',\n  '>': '\\\\3E ',\n  '{': '\\\\7B ',\n  '}': '\\\\7D ',\n  ';': '\\\\3B ',\n};\nconst CSS_ESCAPE_PATTERN = /[\\\\<>{};]/g;\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\n/**\n * Escapes characters that could end the declaration, the rule or the surrounding <style> tag.\n *\n * Backslashes are escaped too, so a value cannot escape the declaration separator that follows it.\n * Other characters, including quotes and parentheses, are kept as-is: theme values legitimately contain quoted\n * font families and nested CSS functions such as `oklch(from var(--token) l c h / 0.5)`.\n */\nfunction escapeThemeText(value: string): string {\n  return value.replace(CSS_ESCAPE_PATTERN, match => CSS_ESCAPE_MAP[match]);\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 = 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      // Skip unset values (e.g. `undefined` from a nested provider) so they don't shadow inherited tokens.\n      if (typeof tokenValue !== 'string' && (typeof tokenValue !== 'number' || !Number.isFinite(tokenValue))) {\n        return cssVarRule;\n      }\n\n      return `${cssVarRule}--${escapeThemeText(cssVar)}: ${escapeThemeText(String(tokenValue))}; `;\n    }, '');\n\n    return `${escapedSelector} { ${cssVarsAsString} }`;\n  }\n\n  return `${escapedSelector} {}`;\n}\n"],"names":["CSS_ESCAPE_MAP","CSS_ESCAPE_PATTERN","escapeCharacter","character","charCodeAt","toString","toUpperCase","escapeSelector","value","replace","match","length","includes","backslashes","slice","escapeThemeText","createCSSRuleFromTheme","selector","theme","escapedSelector","cssVarsAsString","Object","keys","reduce","cssVarRule","cssVar","tokenValue","Number","isFinite","String"],"mappings":";;;;;;;eA6CgBgB;;;AA3ChB,MAAMhB,iBAAyC;IAC7C,MAAM;IACN,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;AACP;AACA,MAAMC,qBAAqB;AAE3B,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;;;;;;CAMC,GACD,SAASY,gBAAgBP,KAAa;IACpC,OAAOA,MAAMC,OAAO,CAACR,oBAAoBS,CAAAA,QAASV,cAAc,CAACU,MAAM;AACzE;AAOO,gCAAgCO,QAAgB,EAAEC,KAA+B;IACtF,MAAMC,kBAAkBZ,eAAeU;IAEvC,IAAIC,OAAO;QACT,MAAME,kBAAmBC,OAAOC,IAAI,CAACJ,OAAkCK,MAAM,CAAC,CAACC,YAAYC;YACzF,MAAMC,aAAsBR,KAAK,CAACO,OAAO;YACzC,qGAAqG;YACrG,IAAI,OAAOC,eAAe,YAAa,CAAA,OAAOA,eAAe,YAAY,CAACC,OAAOC,QAAQ,CAACF,WAAAA,CAAU,EAAI;gBACtG,OAAOF;YACT;YAEA,OAAO,GAAGA,WAAW,EAAE,EAAET,gBAAgBU,QAAQ,EAAE,EAAEV,gBAAgBc,OAAOH,aAAa,EAAE,CAAC;QAC9F,GAAG;QAEH,OAAO,GAAGP,gBAAgB,GAAG,EAAEC,gBAAgB,EAAE,CAAC;IACpD;IAEA,OAAO,GAAGD,gBAAgB,GAAG,CAAC;AAChC"}

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

@@ -5,32 +5,32 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    FluentProvider: function() {
+    get FluentProvider () {
         return _FluentProvider.FluentProvider;
     },
-    createCSSRuleFromTheme: function() {
+    get createCSSRuleFromTheme () {
         return _createCSSRuleFromTheme.createCSSRuleFromTheme;
     },
-    fluentProviderClassNames: function() {
+    get fluentProviderClassNames () {
         return _useFluentProviderStylesstyles.fluentProviderClassNames;
     },
-    renderFluentProvider_unstable: function() {
+    get renderFluentProvider_unstable () {
         return _renderFluentProvider.renderFluentProvider_unstable;
     },
-    useFluentProviderContextValues_unstable: function() {
+    get useFluentProviderContextValues_unstable () {
         return _useFluentProviderContextValues.useFluentProviderContextValues_unstable;
     },
-    useFluentProviderStyles_unstable: function() {
+    get useFluentProviderStyles_unstable () {
         return _useFluentProviderStylesstyles.useFluentProviderStyles_unstable;
     },
-    useFluentProviderThemeStyleTag: function() {
+    get useFluentProviderThemeStyleTag () {
         return _useFluentProviderThemeStyleTag.useFluentProviderThemeStyleTag;
     },
-    useFluentProvider_unstable: function() {
+    get useFluentProvider_unstable () {
         return _useFluentProvider.useFluentProvider_unstable;
     }
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/FluentProvider/index.ts"],"sourcesContent":["export { createCSSRuleFromTheme } from './createCSSRuleFromTheme';\nexport { FluentProvider } from './FluentProvider';\nexport type {\n  FluentProviderContextValues,\n  FluentProviderCustomStyleHooks,\n  FluentProviderProps,\n  FluentProviderSlots,\n  FluentProviderState,\n} from './FluentProvider.types';\nexport { renderFluentProvider_unstable } from './renderFluentProvider';\nexport { useFluentProvider_unstable } from './useFluentProvider';\nexport { fluentProviderClassNames, useFluentProviderStyles_unstable } from './useFluentProviderStyles.styles';\nexport { useFluentProviderContextValues_unstable } from './useFluentProviderContextValues';\nexport { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';\n"],"names":["createCSSRuleFromTheme","FluentProvider","renderFluentProvider_unstable","useFluentProvider_unstable","fluentProviderClassNames","useFluentProviderStyles_unstable","useFluentProviderContextValues_unstable","useFluentProviderThemeStyleTag"],"mappings":";;;;;;;;;;;IACSC;6CAAc;;;eADdD,8CAAsB;;;eAWtBI,uDAAwB;;;eAFxBF,mDAA6B;;;eAG7BI,uEAAuC;;;eADbD,+DAAgC;;;eAE1DE,8DAA8B;;;eAH9BJ,6CAA0B;;;wCAVI,8BAA2B;gCACnC,sBAAmB;sCAQJ,4BAAyB;mCAC5B,yBAAsB;+CACU,sCAAmC;gDACtD,sCAAmC;gDAC5C,sCAAmC"}
+{"version":3,"sources":["../../../src/components/FluentProvider/index.ts"],"sourcesContent":["export { createCSSRuleFromTheme } from './createCSSRuleFromTheme';\nexport { FluentProvider } from './FluentProvider';\nexport type {\n  FluentProviderContextValues,\n  FluentProviderCustomStyleHooks,\n  FluentProviderProps,\n  FluentProviderSlots,\n  FluentProviderState,\n} from './FluentProvider.types';\nexport { renderFluentProvider_unstable } from './renderFluentProvider';\nexport { useFluentProvider_unstable } from './useFluentProvider';\nexport { fluentProviderClassNames, useFluentProviderStyles_unstable } from './useFluentProviderStyles.styles';\nexport { useFluentProviderContextValues_unstable } from './useFluentProviderContextValues';\nexport { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';\n"],"names":["createCSSRuleFromTheme","FluentProvider","renderFluentProvider_unstable","useFluentProvider_unstable","fluentProviderClassNames","useFluentProviderStyles_unstable","useFluentProviderContextValues_unstable","useFluentProviderThemeStyleTag"],"mappings":";;;;;;;;;;;;eACSC,8BAAc;;;eADdD,8CAAsB;;;eAWtBI,uDAAwB;;;eAFxBF,mDAA6B;;;eAG7BI,uEAAuC;;;eADbD,+DAAgC;;;eAE1DE,8DAA8B;;;eAH9BJ,6CAA0B;;;wCAVI,8BAA2B;gCACnC,sBAAmB;sCAQJ,4BAAyB;mCAC5B,yBAAsB;+CACU,sCAAmC;gDACtD,sCAAmC;gDAC5C,sCAAmC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/FluentProvider/renderFluentProvider.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\n'use client';\n\nimport { canUseDOM, assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { TextDirectionProvider } from '@griffel/react';\nimport type { CustomStyleHooksContextValue_unstable as CustomStyleHooksContextValue } from '@fluentui/react-shared-contexts';\nimport {\n  OverridesProvider_unstable as OverridesProvider,\n  Provider_unstable as Provider,\n  TooltipVisibilityProvider_unstable as TooltipVisibilityProvider,\n  ThemeProvider_unstable as ThemeProvider,\n  ThemeClassNameProvider_unstable as ThemeClassNameProvider,\n  CustomStyleHooksProvider_unstable as CustomStyleHooksProvider,\n} from '@fluentui/react-shared-contexts';\nimport type { FluentProviderContextValues, FluentProviderState, FluentProviderSlots } from './FluentProvider.types';\nimport { IconDirectionContextProvider } from '@fluentui/react-icons/lib/providers';\n\n/**\n * Render the final JSX of FluentProvider\n */\nexport const renderFluentProvider_unstable = (\n  state: FluentProviderState,\n  contextValues: FluentProviderContextValues,\n): JSXElement => {\n  assertSlots<FluentProviderSlots>(state);\n\n  // Typescript (vscode) incorrectly references the FluentProviderProps.customStyleHooks_unstable\n  // instead of FluentProviderContextValues.customStyleHooks_unstable and thinks it is\n  // Partial<CustomStyleHooksContextValue>, so it needs to be cast to Required<CustomStyleHooksContextValue>\n\n  return (\n    <Provider value={contextValues.provider}>\n      <ThemeProvider value={contextValues.theme}>\n        <ThemeClassNameProvider value={contextValues.themeClassName}>\n          <CustomStyleHooksProvider\n            value={contextValues.customStyleHooks_unstable as Required<CustomStyleHooksContextValue>}\n          >\n            <TooltipVisibilityProvider value={contextValues.tooltip}>\n              <TextDirectionProvider dir={contextValues.textDirection}>\n                <IconDirectionContextProvider value={contextValues.iconDirection}>\n                  <OverridesProvider value={contextValues.overrides_unstable}>\n                    <state.root>\n                      {canUseDOM() ? null : (\n                        <style\n                          // Using dangerous HTML because react can escape characters\n                          // which can lead to invalid CSS.\n                          // eslint-disable-next-line react/no-danger\n                          dangerouslySetInnerHTML={{ __html: state.serverStyleProps.cssRule }}\n                          {...state.serverStyleProps.attributes}\n                        />\n                      )}\n\n                      {state.root.children}\n                    </state.root>\n                  </OverridesProvider>\n                </IconDirectionContextProvider>\n              </TextDirectionProvider>\n            </TooltipVisibilityProvider>\n          </CustomStyleHooksProvider>\n        </ThemeClassNameProvider>\n      </ThemeProvider>\n    </Provider>\n  );\n};\n"],"names":["canUseDOM","assertSlots","TextDirectionProvider","OverridesProvider_unstable","OverridesProvider","Provider_unstable","Provider","TooltipVisibilityProvider_unstable","TooltipVisibilityProvider","ThemeProvider_unstable","ThemeProvider","ThemeClassNameProvider_unstable","ThemeClassNameProvider","CustomStyleHooksProvider_unstable","CustomStyleHooksProvider","IconDirectionContextProvider","renderFluentProvider_unstable","state","contextValues","value","provider","theme","themeClassName","customStyleHooks_unstable","tooltip","dir","textDirection","iconDirection","overrides_unstable","root","style","dangerouslySetInnerHTML","__html","serverStyleProps","cssRule","attributes","children"],"mappings":"AAAA,wBAA0B,GAC1B,iDAAiD,GAEjD;;;;;+BAoBagB;;;;;;;gCAlB0B,4BAA4B;uBAE7B,iBAAiB;qCAShD,kCAAkC;2BAEI,sCAAsC;AAK5E,sCAAsC,CAC3CC,OACAC;QAEAjB,2BAAAA,EAAiCgB;IAEjC,+FAA+F;IAC/F,oFAAoF;IACpF,0GAA0G;IAE1G,OAAA,WAAA,OACE,eAAA,EAACX,sCAAAA,EAAAA;QAASa,OAAOD,cAAcE,QAAQ;kBACrC,WAAA,OAAA,eAAA,EAACV,2CAAAA,EAAAA;YAAcS,OAAOD,cAAcG,KAAK;sBACvC,WAAA,GAAA,mBAAA,EAACT,oDAAAA,EAAAA;gBAAuBO,OAAOD,cAAcI,cAAc;0BACzD,WAAA,OAAA,eAAA,EAACR,sDAAAA,EAAAA;oBACCK,OAAOD,cAAcK,yBAAyB;8BAE9C,WAAA,OAAA,eAAA,EAACf,uDAAAA,EAAAA;wBAA0BW,OAAOD,cAAcM,OAAO;kCACrD,WAAA,OAAA,eAAA,EAACtB,4BAAAA,EAAAA;4BAAsBuB,KAAKP,cAAcQ,aAAa;sCACrD,WAAA,OAAA,eAAA,EAACX,uCAAAA,EAAAA;gCAA6BI,OAAOD,cAAcS,aAAa;0CAC9D,WAAA,OAAA,eAAA,EAACvB,+CAAAA,EAAAA;oCAAkBe,OAAOD,cAAcU,kBAAkB;8CACxD,WAAA,OAAA,gBAAA,EAACX,MAAMY,IAAI,EAAA;;gDACR7B,yBAAAA,MAAc,OAAA,WAAA,OACb,eAAA,EAAC8B,SAAAA;gDACC,2DAA2D;gDAC3D,iCAAiC;gDACjC,2CAA2C;gDAC3CC,yBAAyB;oDAAEC,QAAQf,MAAMgB,gBAAgB,CAACC,OAAO;gDAAC;gDACjE,GAAGjB,MAAMgB,gBAAgB,CAACE,UAAU;;4CAIxClB,MAAMY,IAAI,CAACO,QAAQ;;;;;;;;;;;AAW1C,EAAE"}
+{"version":3,"sources":["../../../src/components/FluentProvider/renderFluentProvider.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\n'use client';\n\nimport { canUseDOM, assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { TextDirectionProvider } from '@griffel/react';\nimport type { CustomStyleHooksContextValue_unstable as CustomStyleHooksContextValue } from '@fluentui/react-shared-contexts';\nimport {\n  OverridesProvider_unstable as OverridesProvider,\n  Provider_unstable as Provider,\n  TooltipVisibilityProvider_unstable as TooltipVisibilityProvider,\n  ThemeProvider_unstable as ThemeProvider,\n  ThemeClassNameProvider_unstable as ThemeClassNameProvider,\n  CustomStyleHooksProvider_unstable as CustomStyleHooksProvider,\n} from '@fluentui/react-shared-contexts';\nimport type { FluentProviderContextValues, FluentProviderState, FluentProviderSlots } from './FluentProvider.types';\nimport { IconDirectionContextProvider } from '@fluentui/react-icons/lib/providers';\n\n/**\n * Render the final JSX of FluentProvider\n */\nexport const renderFluentProvider_unstable = (\n  state: FluentProviderState,\n  contextValues: FluentProviderContextValues,\n): JSXElement => {\n  assertSlots<FluentProviderSlots>(state);\n\n  // Typescript (vscode) incorrectly references the FluentProviderProps.customStyleHooks_unstable\n  // instead of FluentProviderContextValues.customStyleHooks_unstable and thinks it is\n  // Partial<CustomStyleHooksContextValue>, so it needs to be cast to Required<CustomStyleHooksContextValue>\n\n  return (\n    <Provider value={contextValues.provider}>\n      <ThemeProvider value={contextValues.theme}>\n        <ThemeClassNameProvider value={contextValues.themeClassName}>\n          <CustomStyleHooksProvider\n            value={contextValues.customStyleHooks_unstable as Required<CustomStyleHooksContextValue>}\n          >\n            <TooltipVisibilityProvider value={contextValues.tooltip}>\n              <TextDirectionProvider dir={contextValues.textDirection}>\n                <IconDirectionContextProvider value={contextValues.iconDirection}>\n                  <OverridesProvider value={contextValues.overrides_unstable}>\n                    <state.root>\n                      {canUseDOM() ? null : (\n                        <style\n                          // Using dangerous HTML because react can escape characters\n                          // which can lead to invalid CSS.\n                          // eslint-disable-next-line react/no-danger\n                          dangerouslySetInnerHTML={{ __html: state.serverStyleProps.cssRule }}\n                          {...state.serverStyleProps.attributes}\n                        />\n                      )}\n\n                      {state.root.children}\n                    </state.root>\n                  </OverridesProvider>\n                </IconDirectionContextProvider>\n              </TextDirectionProvider>\n            </TooltipVisibilityProvider>\n          </CustomStyleHooksProvider>\n        </ThemeClassNameProvider>\n      </ThemeProvider>\n    </Provider>\n  );\n};\n"],"names":["canUseDOM","assertSlots","TextDirectionProvider","OverridesProvider_unstable","OverridesProvider","Provider_unstable","Provider","TooltipVisibilityProvider_unstable","TooltipVisibilityProvider","ThemeProvider_unstable","ThemeProvider","ThemeClassNameProvider_unstable","ThemeClassNameProvider","CustomStyleHooksProvider_unstable","CustomStyleHooksProvider","IconDirectionContextProvider","renderFluentProvider_unstable","state","contextValues","value","provider","theme","themeClassName","customStyleHooks_unstable","tooltip","dir","textDirection","iconDirection","overrides_unstable","root","style","dangerouslySetInnerHTML","__html","serverStyleProps","cssRule","attributes","children"],"mappings":"AAAA,wBAA0B,GAC1B,iDAAiD,GAEjD;;;;;+BAoBagB;;;;;;;gCAlB0B,4BAA4B;uBAE7B,iBAAiB;qCAShD,kCAAkC;2BAEI,sCAAsC;AAK5E,sCAAsC,CAC3CC,OACAC;QAEAjB,2BAAAA,EAAiCgB;IAEjC,+FAA+F;IAC/F,oFAAoF;IACpF,0GAA0G;IAE1G,OAAA,WAAA,OACE,eAAA,EAACX,sCAAAA,EAAAA;QAASa,OAAOD,cAAcE,QAAQ;kBACrC,WAAA,OAAA,eAAA,EAACV,2CAAAA,EAAAA;YAAcS,OAAOD,cAAcG,KAAK;sBACvC,WAAA,GAAA,mBAAA,EAACT,oDAAAA,EAAAA;gBAAuBO,OAAOD,cAAcI,cAAc;0BACzD,WAAA,OAAA,eAAA,EAACR,sDAAAA,EAAAA;oBACCK,OAAOD,cAAcK,yBAAyB;8BAE9C,WAAA,OAAA,eAAA,EAACf,uDAAAA,EAAAA;wBAA0BW,OAAOD,cAAcM,OAAO;kCACrD,WAAA,OAAA,eAAA,EAACtB,4BAAAA,EAAAA;4BAAsBuB,KAAKP,cAAcQ,aAAa;sCACrD,WAAA,OAAA,eAAA,EAACX,uCAAAA,EAAAA;gCAA6BI,OAAOD,cAAcS,aAAa;0CAC9D,WAAA,OAAA,eAAA,EAACvB,+CAAAA,EAAAA;oCAAkBe,OAAOD,cAAcU,kBAAkB;8CACxD,WAAA,OAAA,gBAAA,EAACX,MAAMY,IAAI,EAAA;;gDACR7B,yBAAAA,MAAc,OAAA,WAAA,OACb,eAAA,EAAC8B,SAAAA;gDACC,2DAA2D;gDAC3D,iCAAiC;gDACjC,2CAA2C;gDAC3CC,yBAAyB;oDAAEC,QAAQf,MAAMgB,gBAAgB,CAACC,OAAO;gDAAC;gDACjE,GAAGjB,MAAMgB,gBAAgB,CAACE,UAAU;;4CAIxClB,MAAMY,IAAI,CAACO,QAAQ;;;;;;;;;;;AAW1C,EAAE"}

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

@@ -20,6 +20,7 @@ const _useFluentProviderThemeStyleTag = require("./useFluentProviderThemeStyleTa
 const DEFAULT_STYLE_HOOKS = {};
 const DEFAULT_RENDERER_ATTRIBUTES = {};
 const useFluentProvider_unstable = (props, ref)=>{
+    var _renderer_styleElementAttributes;
     const parentContext = (0, _reactsharedcontexts.useFluent_unstable)();
     const parentTheme = useTheme();
     const parentOverrides = (0, _reactsharedcontexts.useOverrides_unstable)();
@@ -33,7 +34,6 @@ const useFluentProvider_unstable = (props, ref)=>{
     const mergedOverrides = shallowMerge(parentOverrides, overrides);
     const mergedCustomStyleHooks = shallowMerge(parentCustomStyleHooks, customStyleHooks_unstable);
     const renderer = (0, _react.useRenderer_unstable)();
-    var _renderer_styleElementAttributes;
     const { styleTagId, rule } = (0, _useFluentProviderThemeStyleTag.useFluentProviderThemeStyleTag)({
         theme: mergedTheme,
         targetDocument,

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/FluentProvider/useFluentProvider.ts"],"sourcesContent":["'use client';\n\nimport { useRenderer_unstable } from '@griffel/react';\nimport { useFocusVisible } from '@fluentui/react-tabster';\nimport {\n  ThemeContext_unstable as ThemeContext,\n  useFluent_unstable as useFluent,\n  useOverrides_unstable as useOverrides,\n  CustomStyleHooksContext_unstable as CustomStyleHooksContext,\n} from '@fluentui/react-shared-contexts';\nimport type {\n  CustomStyleHooksContextValue_unstable as CustomStyleHooksContextValue,\n  ThemeContextValue_unstable as ThemeContextValue,\n} from '@fluentui/react-shared-contexts';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';\nimport type { FluentProviderProps, FluentProviderState } from './FluentProvider.types';\n\n// Meomizing empty objects to avoid unnecessary rerenders.\nconst DEFAULT_STYLE_HOOKS = {};\nconst DEFAULT_RENDERER_ATTRIBUTES = {};\n\n/**\n * Create the state required to render FluentProvider.\n *\n * The returned state can be modified with hooks such as useFluentProviderStyles_unstable,\n * before being passed to renderFluentProvider_unstable.\n *\n * @param props - props from this instance of FluentProvider\n * @param ref - reference to root HTMLElement of FluentProvider\n */\nexport const useFluentProvider_unstable = (\n  props: FluentProviderProps,\n  ref: React.Ref<HTMLElement>,\n): FluentProviderState => {\n  const parentContext = useFluent();\n  const parentTheme = useTheme();\n  const parentOverrides = useOverrides();\n  const parentCustomStyleHooks: CustomStyleHooksContextValue =\n    React.useContext(CustomStyleHooksContext) || DEFAULT_STYLE_HOOKS;\n\n  /**\n   * TODO: add merge functions to \"dir\" merge,\n   * nesting providers with the same \"dir\" should not add additional attributes to DOM\n   * see https://github.com/microsoft/fluentui/blob/0dc74a19f3aa5a058224c20505016fbdb84db172/packages/fluentui/react-northstar/src/utils/mergeProviderContexts.ts#L89-L93\n   */\n  const {\n    applyStylesToPortals = true,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    customStyleHooks_unstable,\n    dir = parentContext.dir,\n    targetDocument = parentContext.targetDocument,\n    theme,\n    overrides_unstable: overrides = {},\n  } = props;\n\n  const mergedTheme = shallowMerge(parentTheme, theme);\n  const mergedOverrides = shallowMerge(parentOverrides, overrides);\n\n  const mergedCustomStyleHooks = shallowMerge(\n    parentCustomStyleHooks,\n    customStyleHooks_unstable,\n  ) as CustomStyleHooksContextValue;\n\n  const renderer = useRenderer_unstable();\n  const { styleTagId, rule } = useFluentProviderThemeStyleTag({\n    theme: mergedTheme,\n    targetDocument,\n    rendererAttributes: renderer.styleElementAttributes ?? DEFAULT_RENDERER_ATTRIBUTES,\n  });\n\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useEffect(() => {\n      if (mergedTheme === undefined) {\n        // eslint-disable-next-line no-console\n        console.warn(\n          [\n            '@fluentui/react-provider: FluentProvider does not have your \"theme\" defined.',\n            \"Make sure that your top-level FluentProvider has set a `theme` prop or you're setting the theme in your child FluentProvider.\",\n          ].join(' '),\n        );\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n  }\n\n  return {\n    applyStylesToPortals,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    customStyleHooks_unstable: mergedCustomStyleHooks,\n    dir,\n    targetDocument,\n    theme: mergedTheme,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    overrides_unstable: mergedOverrides,\n    themeClassName: styleTagId,\n\n    components: {\n      root: 'div',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ...props,\n        dir,\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, useFocusVisible<HTMLDivElement>({ targetDocument })) as React.Ref<HTMLDivElement>,\n      }),\n      { elementType: 'div' },\n    ),\n\n    serverStyleProps: {\n      cssRule: rule,\n      attributes: {\n        ...renderer.styleElementAttributes,\n        id: styleTagId,\n      },\n    },\n  };\n};\n\nfunction shallowMerge<T>(a: T, b: T): T {\n  // Merge impacts perf: we should like to avoid it if it's possible\n  if (a && b) {\n    return { ...a, ...b };\n  }\n\n  if (a) {\n    return a;\n  }\n\n  return b;\n}\n\nfunction useTheme(): ThemeContextValue {\n  return React.useContext(ThemeContext);\n}\n"],"names":["useRenderer_unstable","useFocusVisible","ThemeContext_unstable","ThemeContext","useFluent_unstable","useFluent","useOverrides_unstable","useOverrides","CustomStyleHooksContext_unstable","CustomStyleHooksContext","getIntrinsicElementProps","useMergedRefs","slot","React","useFluentProviderThemeStyleTag","DEFAULT_STYLE_HOOKS","DEFAULT_RENDERER_ATTRIBUTES","useFluentProvider_unstable","props","ref","parentContext","parentTheme","useTheme","parentOverrides","parentCustomStyleHooks","useContext","applyStylesToPortals","customStyleHooks_unstable","dir","targetDocument","theme","overrides_unstable","overrides","mergedTheme","shallowMerge","mergedOverrides","mergedCustomStyleHooks","renderer","styleTagId","rule","rendererAttributes","styleElementAttributes","process","env","NODE_ENV","useEffect","undefined","console","warn","join","themeClassName","components","root","always","elementType","serverStyleProps","cssRule","attributes","id","a","b"],"mappings":"AAAA;;;;;+BAiCaiB;;;;;;;uBA/BwB,iBAAiB;8BACtB,0BAA0B;qCAMnD,kCAAkC;gCAKqB,4BAA4B;kEACnE,QAAQ;gDAEgB,sCAAmC;AAGlF,0DAA0D;AAC1D,MAAMF,sBAAsB,CAAC;AAC7B,MAAMC,8BAA8B,CAAC;AAW9B,mCAAmC,CACxCE,OACAC;IAEA,MAAMC,gBAAgBf,2CAAAA;IACtB,MAAMgB,cAAcC;IACpB,MAAMC,sBAAkBhB,0CAAAA;IACxB,MAAMiB,yBACJX,QAAMY,UAAU,CAAChB,qDAAAA,KAA4BM;IAE/C;;;;GAIC,GACD,MAAM,EACJW,uBAAuB,IAAI,EAC3B,AACAC,yBAAyB,EACzBC,MAAMR,cAAcQ,GAAG,EACvBC,YAHgE,KAG/CT,cAAcS,cAAc,EAC7CC,KAAK,EACLC,oBAAoBC,YAAY,CAAC,CAAC,EACnC,GAAGd;IAEJ,MAAMe,cAAcC,aAAab,aAAaS;IAC9C,MAAMK,kBAAkBD,aAAaX,iBAAiBS;IAEtD,MAAMI,yBAAyBF,aAC7BV,wBACAG;IAGF,MAAMU,WAAWrC,+BAAAA;QAIKqC;IAHtB,MAAM,EAAEC,UAAU,EAAEC,IAAI,EAAE,OAAGzB,8DAAAA,EAA+B;QAC1DgB,OAAOG;QACPJ;QACAW,oBAAoBH,CAAAA,mCAAAA,SAASI,sBAAAA,AAAsB,MAAA,QAA/BJ,qCAAAA,KAAAA,IAAAA,mCAAmCrB;IACzD;IAEA,IAAI0B,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,sDAAsD;QACtD/B,QAAMgC,SAAS,CAAC;YACd,IAAIZ,gBAAgBa,WAAW;gBAC7B,sCAAsC;gBACtCC,QAAQC,IAAI,CACV;oBACE;oBACA;iBACD,CAACC,IAAI,CAAC;YAEX;QACA,uDAAuD;QACzD,GAAG,EAAE;IACP;IAEA,OAAO;QACLvB;QACA,gEAAgE;QAChEC,2BAA2BS;QAC3BR;QACAC;QACAC,OAAOG;QACP,gEAAgE;QAChEF,oBAAoBI;QACpBe,gBAAgBZ;QAEhBa,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMxC,oBAAAA,CAAKyC,MAAM,KACf3C,wCAAAA,EAAyB,OAAO;YAC9B,GAAGQ,KAAK;YACRU;YACA,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FT,SAAKR,6BAAAA,EAAcQ,SAAKlB,6BAAAA,EAAgC;gBAAE4B;YAAe;QAC3E,IACA;YAAEyB,aAAa;QAAM;QAGvBC,kBAAkB;YAChBC,SAASjB;YACTkB,YAAY;gBACV,GAAGpB,SAASI,sBAAsB;gBAClCiB,IAAIpB;YACN;QACF;IACF;AACF,EAAE;AAEF,SAASJ,aAAgByB,CAAI,EAAEC,CAAI;IACjC,kEAAkE;IAClE,IAAID,KAAKC,GAAG;QACV,OAAO;YAAE,GAAGD,CAAC;YAAE,GAAGC,CAAC;QAAC;IACtB;IAEA,IAAID,GAAG;QACL,OAAOA;IACT;IAEA,OAAOC;AACT;AAEA,SAAStC;IACP,OAAOT,QAAMY,UAAU,CAACtB,0CAAAA;AAC1B"}
+{"version":3,"sources":["../../../src/components/FluentProvider/useFluentProvider.ts"],"sourcesContent":["'use client';\n\nimport { useRenderer_unstable } from '@griffel/react';\nimport { useFocusVisible } from '@fluentui/react-tabster';\nimport {\n  ThemeContext_unstable as ThemeContext,\n  useFluent_unstable as useFluent,\n  useOverrides_unstable as useOverrides,\n  CustomStyleHooksContext_unstable as CustomStyleHooksContext,\n} from '@fluentui/react-shared-contexts';\nimport type {\n  CustomStyleHooksContextValue_unstable as CustomStyleHooksContextValue,\n  ThemeContextValue_unstable as ThemeContextValue,\n} from '@fluentui/react-shared-contexts';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';\nimport type { FluentProviderProps, FluentProviderState } from './FluentProvider.types';\n\n// Meomizing empty objects to avoid unnecessary rerenders.\nconst DEFAULT_STYLE_HOOKS = {};\nconst DEFAULT_RENDERER_ATTRIBUTES = {};\n\n/**\n * Create the state required to render FluentProvider.\n *\n * The returned state can be modified with hooks such as useFluentProviderStyles_unstable,\n * before being passed to renderFluentProvider_unstable.\n *\n * @param props - props from this instance of FluentProvider\n * @param ref - reference to root HTMLElement of FluentProvider\n */\nexport const useFluentProvider_unstable = (\n  props: FluentProviderProps,\n  ref: React.Ref<HTMLElement>,\n): FluentProviderState => {\n  const parentContext = useFluent();\n  const parentTheme = useTheme();\n  const parentOverrides = useOverrides();\n  const parentCustomStyleHooks: CustomStyleHooksContextValue =\n    React.useContext(CustomStyleHooksContext) || DEFAULT_STYLE_HOOKS;\n\n  /**\n   * TODO: add merge functions to \"dir\" merge,\n   * nesting providers with the same \"dir\" should not add additional attributes to DOM\n   * see https://github.com/microsoft/fluentui/blob/0dc74a19f3aa5a058224c20505016fbdb84db172/packages/fluentui/react-northstar/src/utils/mergeProviderContexts.ts#L89-L93\n   */\n  const {\n    applyStylesToPortals = true,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    customStyleHooks_unstable,\n    dir = parentContext.dir,\n    targetDocument = parentContext.targetDocument,\n    theme,\n    overrides_unstable: overrides = {},\n  } = props;\n\n  const mergedTheme = shallowMerge(parentTheme, theme);\n  const mergedOverrides = shallowMerge(parentOverrides, overrides);\n\n  const mergedCustomStyleHooks = shallowMerge(\n    parentCustomStyleHooks,\n    customStyleHooks_unstable,\n  ) as CustomStyleHooksContextValue;\n\n  const renderer = useRenderer_unstable();\n  const { styleTagId, rule } = useFluentProviderThemeStyleTag({\n    theme: mergedTheme,\n    targetDocument,\n    rendererAttributes: renderer.styleElementAttributes ?? DEFAULT_RENDERER_ATTRIBUTES,\n  });\n\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useEffect(() => {\n      if (mergedTheme === undefined) {\n        // eslint-disable-next-line no-console\n        console.warn(\n          [\n            '@fluentui/react-provider: FluentProvider does not have your \"theme\" defined.',\n            \"Make sure that your top-level FluentProvider has set a `theme` prop or you're setting the theme in your child FluentProvider.\",\n          ].join(' '),\n        );\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n  }\n\n  return {\n    applyStylesToPortals,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    customStyleHooks_unstable: mergedCustomStyleHooks,\n    dir,\n    targetDocument,\n    theme: mergedTheme,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    overrides_unstable: mergedOverrides,\n    themeClassName: styleTagId,\n\n    components: {\n      root: 'div',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ...props,\n        dir,\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, useFocusVisible<HTMLDivElement>({ targetDocument })) as React.Ref<HTMLDivElement>,\n      }),\n      { elementType: 'div' },\n    ),\n\n    serverStyleProps: {\n      cssRule: rule,\n      attributes: {\n        ...renderer.styleElementAttributes,\n        id: styleTagId,\n      },\n    },\n  };\n};\n\nfunction shallowMerge<T>(a: T, b: T): T {\n  // Merge impacts perf: we should like to avoid it if it's possible\n  if (a && b) {\n    return { ...a, ...b };\n  }\n\n  if (a) {\n    return a;\n  }\n\n  return b;\n}\n\nfunction useTheme(): ThemeContextValue {\n  return React.useContext(ThemeContext);\n}\n"],"names":["useRenderer_unstable","useFocusVisible","ThemeContext_unstable","ThemeContext","useFluent_unstable","useFluent","useOverrides_unstable","useOverrides","CustomStyleHooksContext_unstable","CustomStyleHooksContext","getIntrinsicElementProps","useMergedRefs","slot","React","useFluentProviderThemeStyleTag","DEFAULT_STYLE_HOOKS","DEFAULT_RENDERER_ATTRIBUTES","useFluentProvider_unstable","props","ref","renderer","parentContext","parentTheme","useTheme","parentOverrides","parentCustomStyleHooks","useContext","applyStylesToPortals","customStyleHooks_unstable","dir","targetDocument","theme","overrides_unstable","overrides","mergedTheme","shallowMerge","mergedOverrides","mergedCustomStyleHooks","styleTagId","rule","rendererAttributes","styleElementAttributes","process","env","NODE_ENV","useEffect","undefined","console","warn","join","themeClassName","components","root","always","elementType","serverStyleProps","cssRule","attributes","id","a","b"],"mappings":"AAAA;;;;;+BAiCaiB;;;;;;;uBA/BwB,iBAAiB;8BACtB,0BAA0B;qCAMnD,kCAAkC;gCAKqB,4BAA4B;kEACnE,QAAQ;gDAEgB,sCAAmC;AAGlF,0DAA0D;AAC1D,MAAMF,sBAAsB,CAAC;AAC7B,MAAMC,8BAA8B,CAAC;AAW9B,mCAAmC,CACxCE,OACAC;QAmCsBC;IAjCtB,MAAMC,oBAAgBhB,uCAAAA;IACtB,MAAMiB,cAAcC;IACpB,MAAMC,sBAAkBjB,0CAAAA;IACxB,MAAMkB,yBACJZ,QAAMa,UAAU,CAACjB,qDAAAA,KAA4BM;IAE/C;;;;GAIC,GACD,MAAM,EACJY,uBAAuB,IAAI,EAC3B,AACAC,yBAAyB,EACzBC,MAAMR,cAAcQ,GAAG,EACvBC,YAHgE,KAG/CT,cAAcS,cAAc,EAC7CC,KAAK,EACLC,oBAAoBC,YAAY,CAAC,CAAC,EACnC,GAAGf;IAEJ,MAAMgB,cAAcC,aAAab,aAAaS;IAC9C,MAAMK,kBAAkBD,aAAaX,iBAAiBS;IAEtD,MAAMI,yBAAyBF,aAC7BV,wBACAG;IAGF,MAAMR,eAAWpB,2BAAAA;IACjB,MAAM,EAAEsC,UAAU,EAAEC,IAAI,EAAE,OAAGzB,8DAAAA,EAA+B;QAC1DiB,OAAOG;QACPJ;QACAU,kBAAkB,EAAA,CAAEpB,mCAAAA,SAASqB,sBAAAA,AAAsB,MAAA,QAA/BrB,qCAAAA,KAAAA,IAAAA,mCAAmCJ;IACzD;IAEA,IAAI0B,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,sDAAsD;QACtD/B,QAAMgC,SAAS,CAAC;YACd,IAAIX,gBAAgBY,WAAW;gBAC7B,sCAAsC;gBACtCC,QAAQC,IAAI,CACV;oBACE;oBACA;iBACD,CAACC,IAAI,CAAC;YAEX;QACA,uDAAuD;QACzD,GAAG,EAAE;IACP;IAEA,OAAO;QACLtB;QACA,gEAAgE;QAChEC,2BAA2BS;QAC3BR;QACAC;QACAC,OAAOG;QACP,gEAAgE;QAChEF,oBAAoBI;QACpBc,gBAAgBZ;QAEhBa,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMxC,oBAAAA,CAAKyC,MAAM,KACf3C,wCAAAA,EAAyB,OAAO;YAC9B,GAAGQ,KAAK;YACRW;YACA,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FV,SAAKR,6BAAAA,EAAcQ,SAAKlB,6BAAAA,EAAgC;gBAAE6B;YAAe;QAC3E,IACA;YAAEwB,aAAa;QAAM;QAGvBC,kBAAkB;YAChBC,SAASjB;YACTkB,YAAY;gBACV,GAAGrC,SAASqB,sBAAsB;gBAClCiB,IAAIpB;YACN;QACF;IACF;AACF,EAAE;AAEF,SAASH,aAAgBwB,CAAI,EAAEC,CAAI;IACjC,kEAAkE;IAClE,IAAID,KAAKC,GAAG;QACV,OAAO;YAAE,GAAGD,CAAC;YAAE,GAAGC,CAAC;QAAC;IACtB;IAEA,IAAID,GAAG;QACL,OAAOA;IACT;IAEA,OAAOC;AACT;AAEA,SAASrC;IACP,OAAOV,QAAMa,UAAU,CAACvB,0CAAAA;AAC1B"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/FluentProvider/useFluentProviderContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\nexport function useFluentProviderContextValues_unstable(state: FluentProviderState): FluentProviderContextValues {\n  const {\n    applyStylesToPortals,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    customStyleHooks_unstable,\n    dir,\n    root,\n    targetDocument,\n    theme,\n    themeClassName,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    overrides_unstable,\n  } = state;\n\n  const provider = React.useMemo(() => ({ dir, targetDocument }), [dir, targetDocument]);\n  // \"Tooltip\" component mutates an object in this context, instance should be stable\n  const [tooltip] = React.useState(() => ({}));\n  const iconDirection = React.useMemo(() => ({ textDirection: dir }), [dir]);\n\n  return {\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    customStyleHooks_unstable,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    overrides_unstable,\n    provider,\n    textDirection: dir,\n    iconDirection,\n    tooltip,\n    theme,\n    themeClassName: applyStylesToPortals ? root.className! : themeClassName,\n  };\n}\n"],"names":["React","useFluentProviderContextValues_unstable","state","applyStylesToPortals","customStyleHooks_unstable","dir","root","targetDocument","theme","themeClassName","overrides_unstable","provider","useMemo","tooltip","useState","iconDirection","textDirection","className"],"mappings":"AAAA;;;;;+BAKgBC;;;;;;;iEAHO,QAAQ;AAGxB,iDAAiDC,KAA0B;IAChF,MAAM,EACJC,oBAAoB,EACpB,AACAC,yBAAyB,EACzBC,GAAG,EACHC,IAAI,EACJC,cAAc,EACdC,KAAK,EACLC,GANgE,WAMlD,EACd,AACAC,kBAAkB,EACnB,GAAGR,yCAF8D;IAIlE,MAAMS,WAAWX,OAAMY,OAAO,CAAC,IAAO,CAAA;YAAEP;YAAKE;SAAe,CAAA,EAAI;QAACF;QAAKE;KAAe;IACrF,mFAAmF;IACnF,MAAM,CAACM,QAAQ,GAAGb,OAAMc,QAAQ,CAAC,IAAO,CAAA,EAAC,CAAA;IACzC,MAAMC,gBAAgBf,OAAMY,OAAO,CAAC,IAAO,CAAA;YAAEI,eAAeX;QAAI,CAAA,GAAI;QAACA;KAAI;IAEzE,OAAO;QACL,gEAAgE;QAChED;QACA,gEAAgE;QAChEM;QACAC;QACAK,eAAeX;QACfU;QACAF;QACAL;QACAC,gBAAgBN,uBAAuBG,KAAKW,SAAS,GAAIR;IAC3D;AACF"}
+{"version":3,"sources":["../../../src/components/FluentProvider/useFluentProviderContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\nexport function useFluentProviderContextValues_unstable(state: FluentProviderState): FluentProviderContextValues {\n  const {\n    applyStylesToPortals,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    customStyleHooks_unstable,\n    dir,\n    root,\n    targetDocument,\n    theme,\n    themeClassName,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    overrides_unstable,\n  } = state;\n\n  const provider = React.useMemo(() => ({ dir, targetDocument }), [dir, targetDocument]);\n  // \"Tooltip\" component mutates an object in this context, instance should be stable\n  const [tooltip] = React.useState(() => ({}));\n  const iconDirection = React.useMemo(() => ({ textDirection: dir }), [dir]);\n\n  return {\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    customStyleHooks_unstable,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    overrides_unstable,\n    provider,\n    textDirection: dir,\n    iconDirection,\n    tooltip,\n    theme,\n    themeClassName: applyStylesToPortals ? root.className! : themeClassName,\n  };\n}\n"],"names":["React","useFluentProviderContextValues_unstable","state","applyStylesToPortals","customStyleHooks_unstable","dir","root","targetDocument","theme","themeClassName","overrides_unstable","provider","useMemo","tooltip","useState","iconDirection","textDirection","className"],"mappings":"AAAA;;;;;+BAKgBC;;;;;;;iEAHO,QAAQ;AAGxB,iDAAiDC,KAA0B;IAChF,MAAM,EACJC,oBAAoB,EACpB,AACAC,yBAAyB,EACzBC,GAAG,EACHC,IAAI,EACJC,cAAc,EACdC,KAAK,EACLC,GANgE,WAMlD,EACd,AACAC,kBAAkB,EACnB,GAAGR,yCAF8D;IAIlE,MAAMS,WAAWX,OAAMY,OAAO,CAAC,IAAO,CAAA;YAAEP;YAAKE;SAAe,CAAA,EAAI;QAACF;QAAKE;KAAe;IACrF,mFAAmF;IACnF,MAAM,CAACM,QAAQ,GAAGb,OAAMc,QAAQ,CAAC,IAAO,CAAA,EAAC,CAAA;IACzC,MAAMC,gBAAgBf,OAAMY,OAAO,CAAC,IAAO,CAAA;YAAEI,eAAeX;QAAI,CAAA,GAAI;QAACA;KAAI;IAEzE,OAAO;QACL,gEAAgE;QAChED;QACA,gEAAgE;QAChEM;QACAC;QACAK,eAAeX;QACfU;QACAF;QACAL;QACAC,gBAAgBN,uBAAuBG,KAAKW,SAAS,GAAIR;IAC3D;AACF"}

package/lib-commonjs/components/FluentProvider/useFluentProviderStyles.styles.cjs

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    fluentProviderClassNames: function() {
+    get fluentProviderClassNames () {
         return fluentProviderClassNames;
     },
-    useFluentProviderStyles_unstable: function() {
+    get useFluentProviderStyles_unstable () {
         return useFluentProviderStyles_unstable;
     }
 });

package/lib-commonjs/components/FluentProvider/useFluentProviderStyles.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["useFluentProviderStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from \"@griffel/core\";\nimport { useRenderer_unstable } from \"@griffel/react\";\nimport { tokens, typographyStyles } from \"@fluentui/react-theme\";\nexport const fluentProviderClassNames = {\n    root: 'fui-FluentProvider'\n};\nconst useStyles = makeStyles({\n    root: {\n        color: tokens.colorNeutralForeground1,\n        backgroundColor: tokens.colorNeutralBackground1,\n        textAlign: 'left',\n        ...typographyStyles.body1\n    }\n});\n/** Applies style classnames to slots */ export const useFluentProviderStyles_unstable = (state)=>{\n    const renderer = useRenderer_unstable();\n    const styles = useStyles({\n        dir: state.dir,\n        renderer\n    });\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(fluentProviderClassNames.root, state.themeClassName, styles.root, state.root.className);\n    return state;\n};\n"],"names":["__styles","mergeClasses","useRenderer_unstable","tokens","typographyStyles","fluentProviderClassNames","root","useStyles","sj55zd","De3pzq","fsow6f","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","useFluentProviderStyles_unstable","state","renderer","styles","dir","className","themeClassName"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICK,wBAAwB;;;oCAWiD;;;;sBAd7C,eAAe;uBACnB,gBAAgB;AAE9C,iCAAiC;IACpCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGP,cAAA,EAAA;IAAAM,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAOjB,CAAC;AAC8C,MAAMC,oCAAoCC,KAAK,IAAG;IAC9F,MAAMC,QAAQ,OAAGhB,2BAAoB,CAAC,CAAC;IACvC,MAAMiB,MAAM,GAAGZ,SAAS,CAAC;QACrBa,GAAG,EAAEH,KAAK,CAACG,GAAG;QACdF;IACJ,CAAC,CAAC;IACF,oDAAA;IACAD,KAAK,CAACX,IAAI,CAACe,SAAS,OAAGpB,kBAAY,EAACI,wBAAwB,CAACC,IAAI,EAAEW,KAAK,CAACK,cAAc,EAAEH,MAAM,CAACb,IAAI,EAAEW,KAAK,CAACX,IAAI,CAACe,SAAS,CAAC;IAC3H,OAAOJ,KAAK;AAChB,CAAC"}
+{"version":3,"sources":["useFluentProviderStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from \"@griffel/core\";\nimport { useRenderer_unstable } from \"@griffel/react\";\nimport { tokens, typographyStyles } from \"@fluentui/react-theme\";\nexport const fluentProviderClassNames = {\n    root: 'fui-FluentProvider'\n};\nconst useStyles = makeStyles({\n    root: {\n        color: tokens.colorNeutralForeground1,\n        backgroundColor: tokens.colorNeutralBackground1,\n        textAlign: 'left',\n        ...typographyStyles.body1\n    }\n});\n/** Applies style classnames to slots */ export const useFluentProviderStyles_unstable = (state)=>{\n    const renderer = useRenderer_unstable();\n    const styles = useStyles({\n        dir: state.dir,\n        renderer\n    });\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(fluentProviderClassNames.root, state.themeClassName, styles.root, state.root.className);\n    return state;\n};\n"],"names":["__styles","mergeClasses","useRenderer_unstable","tokens","typographyStyles","fluentProviderClassNames","root","useStyles","sj55zd","De3pzq","fsow6f","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","useFluentProviderStyles_unstable","state","renderer","styles","dir","className","themeClassName"],"mappings":"AAAA,YAAY;;;;;;;;;;;;QAICK,wBAAwB;;;QAWiBW,gCAAgC;;;;sBAd7C,eAAe;uBACnB,gBAAgB;AAE9C,iCAAiC;IACpCV,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGP,cAAA,EAAA;IAAAM,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAOjB,CAAC;AAC8C,0CAA0CE,KAAK,IAAG;IAC9F,MAAMC,QAAQ,OAAGhB,2BAAoB,CAAC,CAAC;IACvC,MAAMiB,MAAM,GAAGZ,SAAS,CAAC;QACrBa,GAAG,EAAEH,KAAK,CAACG,GAAG;QACdF;IACJ,CAAC,CAAC;IACF,oDAAA;IACAD,KAAK,CAACX,IAAI,CAACe,SAAS,OAAGpB,kBAAY,EAACI,wBAAwB,CAACC,IAAI,EAAEW,KAAK,CAACK,cAAc,EAAEH,MAAM,CAACb,IAAI,EAAEW,KAAK,CAACX,IAAI,CAACe,SAAS,CAAC;IAC3H,OAAOJ,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/FluentProvider/useFluentProviderStyles.styles.raw.cjs

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    fluentProviderClassNames: function() {
+    get fluentProviderClassNames () {
         return fluentProviderClassNames;
     },
-    useFluentProviderStyles_unstable: function() {
+    get useFluentProviderStyles_unstable () {
         return useFluentProviderStyles_unstable;
     }
 });

package/lib-commonjs/components/FluentProvider/useFluentProviderStyles.styles.raw.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/FluentProvider/useFluentProviderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/core';\nimport { useRenderer_unstable } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { FluentProviderSlots, FluentProviderState } from './FluentProvider.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const fluentProviderClassNames: SlotClassNames<FluentProviderSlots> = {\n  root: 'fui-FluentProvider',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    color: tokens.colorNeutralForeground1,\n    backgroundColor: tokens.colorNeutralBackground1,\n    textAlign: 'left',\n    ...typographyStyles.body1,\n  },\n});\n\n/** Applies style classnames to slots */\nexport const useFluentProviderStyles_unstable = (state: FluentProviderState): FluentProviderState => {\n  const renderer = useRenderer_unstable();\n  const styles = useStyles({ dir: state.dir, renderer });\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    fluentProviderClassNames.root,\n    state.themeClassName,\n    styles.root,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","useRenderer_unstable","tokens","typographyStyles","fluentProviderClassNames","root","useStyles","color","colorNeutralForeground1","backgroundColor","colorNeutralBackground1","textAlign","body1","useFluentProviderStyles_unstable","state","renderer","styles","dir","className","themeClassName"],"mappings":"AAAA;;;;;;;;;;;;IAQaK,wBAAAA;;;oCAcAS;;;;sBApB4B,gBAAgB;uBACpB,iBAAiB;4BACb,wBAAwB;AAI1D,iCAAsE;IAC3ER,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAYP,gBAAAA,EAAW;IAC3BM,MAAM;QACJE,OAAOL,kBAAAA,CAAOM,uBAAuB;QACrCC,iBAAiBP,kBAAAA,CAAOQ,uBAAuB;QAC/CC,WAAW;QACX,GAAGR,4BAAAA,CAAiBS,KAAK;IAC3B;AACF;AAGO,MAAMC,mCAAmC,CAACC;IAC/C,MAAMC,WAAWd,+BAAAA;IACjB,MAAMe,SAASV,UAAU;QAAEW,KAAKH,MAAMG,GAAG;QAAEF;IAAS;IAEpD,oDAAoD;IACpDD,MAAMT,IAAI,CAACa,SAAS,OAAGlB,kBAAAA,EACrBI,yBAAyBC,IAAI,EAC7BS,MAAMK,cAAc,EACpBH,OAAOX,IAAI,EACXS,MAAMT,IAAI,CAACa,SAAS;IAGtB,OAAOJ;AACT,EAAE"}
+{"version":3,"sources":["../../../src/components/FluentProvider/useFluentProviderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/core';\nimport { useRenderer_unstable } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { FluentProviderSlots, FluentProviderState } from './FluentProvider.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const fluentProviderClassNames: SlotClassNames<FluentProviderSlots> = {\n  root: 'fui-FluentProvider',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    color: tokens.colorNeutralForeground1,\n    backgroundColor: tokens.colorNeutralBackground1,\n    textAlign: 'left',\n    ...typographyStyles.body1,\n  },\n});\n\n/** Applies style classnames to slots */\nexport const useFluentProviderStyles_unstable = (state: FluentProviderState): FluentProviderState => {\n  const renderer = useRenderer_unstable();\n  const styles = useStyles({ dir: state.dir, renderer });\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    fluentProviderClassNames.root,\n    state.themeClassName,\n    styles.root,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","useRenderer_unstable","tokens","typographyStyles","fluentProviderClassNames","root","useStyles","color","colorNeutralForeground1","backgroundColor","colorNeutralBackground1","textAlign","body1","useFluentProviderStyles_unstable","state","renderer","styles","dir","className","themeClassName"],"mappings":"AAAA;;;;;;;;;;;;QAQaK;;;;eAcAS;;;sBApB4B,gBAAgB;uBACpB,iBAAiB;4BACb,wBAAwB;AAI1D,iCAAsE;IAC3ER,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAYP,gBAAAA,EAAW;IAC3BM,MAAM;QACJE,OAAOL,kBAAAA,CAAOM,uBAAuB;QACrCC,iBAAiBP,kBAAAA,CAAOQ,uBAAuB;QAC/CC,WAAW;QACX,GAAGR,4BAAAA,CAAiBS,KAAK;IAC3B;AACF;AAGO,yCAAyC,CAACE;IAC/C,MAAMC,eAAWd,2BAAAA;IACjB,MAAMe,SAASV,UAAU;QAAEW,KAAKH,MAAMG,GAAG;QAAEF;IAAS;IAEpD,oDAAoD;IACpDD,MAAMT,IAAI,CAACa,SAAS,OAAGlB,kBAAAA,EACrBI,yBAAyBC,IAAI,EAC7BS,MAAMK,cAAc,EACpBH,OAAOX,IAAI,EACXS,MAAMT,IAAI,CAACa,SAAS;IAGtB,OAAOJ;AACT,EAAE"}

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

@@ -58,6 +58,7 @@ const useFluentProviderThemeStyleTag = (options)=>{
             // this allows to do checks with strict mode enabled as .useEffect() will be called with incremented IDs because
             // of double render.
             if (targetDocument) {
+                var _ref;
                 var _styleElement_textContent;
                 const providerElementSelector = `.${_useFluentProviderStylesstyles.fluentProviderClassNames.root}.${styleTagId}`;
                 const providerElements = targetDocument.querySelectorAll(providerElementSelector);
@@ -75,11 +76,10 @@ const useFluentProviderThemeStyleTag = (options)=>{
                     return;
                 }
                 const styleElement = styleElements.item(0);
-                var _styleElement_textContent_length;
                 // Heads up!
                 //
                 // In SSR, we will have DOM upfront & style tags will have CSS rules defined in `.textContent`
-                const isSSR = ((_styleElement_textContent_length = styleElement === null || styleElement === void 0 ? void 0 : (_styleElement_textContent = styleElement.textContent) === null || _styleElement_textContent === void 0 ? void 0 : _styleElement_textContent.length) !== null && _styleElement_textContent_length !== void 0 ? _styleElement_textContent_length : 0) > 0;
+                const isSSR = ((_ref = styleElement === null || styleElement === void 0 ? void 0 : (_styleElement_textContent = styleElement.textContent) === null || _styleElement_textContent === void 0 ? void 0 : _styleElement_textContent.length) !== null && _ref !== void 0 ? _ref : 0) > 0;
                 const elementsCount = isSSR ? 1 : 0;
                 if (providerElements.length > elementsCount) {
                     // eslint-disable-next-line no-console

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/FluentProvider/useFluentProviderThemeStyleTag.ts"],"sourcesContent":["'use client';\n\nimport { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { createCSSRuleFromTheme } from './createCSSRuleFromTheme';\nimport type { FluentProviderState } from './FluentProvider.types';\nimport { fluentProviderClassNames } from './useFluentProviderStyles.styles';\n\n// String concatenation is used to prevent bundlers to complain with older versions of React\nconst useInsertionEffect = (React as never)['useInsertion' + 'Effect']\n  ? (React as never)['useInsertion' + 'Effect']\n  : useIsomorphicLayoutEffect;\n\nconst createStyleTag = (target: Document | undefined, elementAttributes: Record<string, string>) => {\n  // Document might exist but not be ready yet (e.g. during SSR)\n  // In that case, we should not create a style tag\n  if (!target?.head) {\n    return undefined;\n  }\n\n  const tag = target.createElement('style');\n\n  Object.keys(elementAttributes).forEach(attrName => {\n    tag.setAttribute(attrName, elementAttributes[attrName]);\n  });\n\n  target.head.appendChild(tag);\n  return tag;\n};\n\nconst insertSheet = (tag: HTMLStyleElement, rule: string) => {\n  const sheet = tag.sheet;\n\n  if (sheet) {\n    if (sheet.cssRules.length > 0) {\n      sheet.deleteRule(0);\n    }\n    sheet.insertRule(rule, 0);\n  } else if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line no-console\n    console.error('FluentProvider: No sheet available on styleTag, styles will not be inserted into DOM.');\n  }\n};\n\n/**\n * Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class\n * @internal\n * @returns CSS class to apply the rule\n */\nexport const useFluentProviderThemeStyleTag = (\n  options: Pick<FluentProviderState, 'theme' | 'targetDocument'> & { rendererAttributes: Record<string, string> },\n): { styleTagId: string; rule: string } => {\n  const { targetDocument, theme, rendererAttributes } = options;\n\n  const styleTag = React.useRef<HTMLStyleElement | undefined | null>(undefined);\n\n  const styleTagId = useId(fluentProviderClassNames.root);\n  const styleElementAttributes = rendererAttributes;\n\n  const rule = React.useMemo(() => createCSSRuleFromTheme(`.${styleTagId}`, theme), [theme, styleTagId]);\n\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line react-hooks/rules-of-hooks, react-hooks/void-use-memo\n    React.useMemo(() => {\n      // Heads up!\n      // .useMemo() is used because it is called during render and DOM for _current_ component is not mounted yet. Also,\n      // this allows to do checks with strict mode enabled as .useEffect() will be called with incremented IDs because\n      // of double render.\n\n      if (targetDocument) {\n        const providerElementSelector = `.${fluentProviderClassNames.root}.${styleTagId}`;\n        const providerElements = targetDocument.querySelectorAll(providerElementSelector);\n\n        const styleElementSelector = `style[id=\"${styleTagId}\"]`;\n        const styleElements = targetDocument.querySelectorAll<HTMLStyleElement>(styleElementSelector);\n\n        if (styleElements.length > 1) {\n          // eslint-disable-next-line no-console\n          console.error(\n            [\n              '@fluentui/react-provider: We found multiple <style> elements with same IDs in your DOM.',\n              'Please make sure that you configured your application properly.',\n              '\\n',\n              '\\n',\n              'Configuration guide: https://aka.ms/fluentui-conflicting-ids',\n            ].join(' '),\n          );\n          return;\n        }\n\n        const styleElement = styleElements.item(0) as HTMLStyleElement | null;\n\n        // Heads up!\n        //\n        // In SSR, we will have DOM upfront & style tags will have CSS rules defined in `.textContent`\n        const isSSR = (styleElement?.textContent?.length ?? 0) > 0;\n        const elementsCount = isSSR ? 1 : 0;\n\n        if (providerElements.length > elementsCount) {\n          // eslint-disable-next-line no-console\n          console.error(\n            [\n              '@fluentui/react-provider: There are conflicting ids in your DOM.',\n              'Please make sure that you configured your application properly.',\n              '\\n',\n              '\\n',\n              'Configuration guide: https://aka.ms/fluentui-conflicting-ids',\n            ].join(' '),\n          );\n        }\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n  }\n\n  useHandleSSRStyleElements(targetDocument, styleTagId);\n  useInsertionEffect(() => {\n    // The style element could already have been created during SSR - no need to recreate it\n    const ssrStyleElement = targetDocument?.getElementById(styleTagId);\n    if (ssrStyleElement) {\n      styleTag.current = ssrStyleElement as HTMLStyleElement;\n    } else {\n      styleTag.current = createStyleTag(targetDocument, { ...styleElementAttributes, id: styleTagId });\n      if (styleTag.current) {\n        insertSheet(styleTag.current, rule);\n      }\n    }\n\n    return () => {\n      styleTag.current?.remove();\n    };\n  }, [styleTagId, targetDocument, rule, styleElementAttributes]);\n\n  return { styleTagId, rule };\n};\n\nfunction useHandleSSRStyleElements(targetDocument: Document | undefined | null, styleTagId: string) {\n  // Using a state factory so that this logic only runs once per render\n  // Each FluentProvider can create its own style element during SSR as a slot\n  // Moves all theme style elements to document head during render to avoid hydration errors.\n  // Should be strict mode safe since the logic is idempotent.\n  React.useState(() => {\n    if (!targetDocument) {\n      return;\n    }\n\n    const themeStyleElement = targetDocument.getElementById(styleTagId);\n    if (themeStyleElement) {\n      targetDocument.head.append(themeStyleElement);\n    }\n  });\n}\n"],"names":["useId","useIsomorphicLayoutEffect","React","createCSSRuleFromTheme","fluentProviderClassNames","useInsertionEffect","createStyleTag","target","elementAttributes","head","undefined","tag","createElement","Object","keys","forEach","attrName","setAttribute","appendChild","insertSheet","rule","sheet","cssRules","length","deleteRule","insertRule","process","env","NODE_ENV","console","error","useFluentProviderThemeStyleTag","options","targetDocument","theme","rendererAttributes","styleTag","useRef","styleTagId","root","styleElementAttributes","useMemo","styleElement","providerElementSelector","providerElements","querySelectorAll","styleElementSelector","styleElements","join","item","isSSR","textContent","elementsCount","useHandleSSRStyleElements","ssrStyleElement","getElementById","current","id","remove","useState","themeStyleElement","append"],"mappings":"AAAA;;;;;;;;eAkDa+B;;;;gCAhDoC,4BAA4B;iEACtD,QAAQ;wCAEQ,8BAA2B;+CAEzB,sCAAmC;AAE5E,4FAA4F;AAC5F,MAAM1B,qBAAsBH,MAAe,CAAC,iBAAiB,SAAS,GACjEA,MAAe,CAAC,iBAAiB,SAAS,GAC3CD,yCAAAA;AAEJ,MAAMK,iBAAiB,CAACC,QAA8BC;IACpD,8DAA8D;IAC9D,iDAAiD;IACjD,IAAI,EAACD,WAAAA,QAAAA,WAAAA,KAAAA,IAAAA,KAAAA,IAAAA,OAAQE,IAAAA,AAAI,GAAE;QACjB,OAAOC;IACT;IAEA,MAAMC,MAAMJ,OAAOK,aAAa,CAAC;IAEjCC,OAAOC,IAAI,CAACN,mBAAmBO,OAAO,CAACC,CAAAA;QACrCL,IAAIM,YAAY,CAACD,UAAUR,iBAAiB,CAACQ,SAAS;IACxD;IAEAT,OAAOE,IAAI,CAACS,WAAW,CAACP;IACxB,OAAOA;AACT;AAEA,MAAMQ,cAAc,CAACR,KAAuBS;IAC1C,MAAMC,QAAQV,IAAIU,KAAK;IAEvB,IAAIA,OAAO;QACT,IAAIA,MAAMC,QAAQ,CAACC,MAAM,GAAG,GAAG;YAC7BF,MAAMG,UAAU,CAAC;QACnB;QACAH,MAAMI,UAAU,CAACL,MAAM;IACzB,OAAO,IAAIM,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QAChD,sCAAsC;QACtCC,QAAQC,KAAK,CAAC;IAChB;AACF;AAOO,uCAAuC,CAC5CE;IAEA,MAAM,EAAEC,cAAc,EAAEC,KAAK,EAAEC,kBAAkB,EAAE,GAAGH;IAEtD,MAAMI,WAAWlC,OAAMmC,MAAM,CAAsC3B;IAEnE,MAAM4B,aAAatC,yBAAAA,EAAMI,uDAAAA,CAAyBmC,IAAI;IACtD,MAAMC,yBAAyBL;IAE/B,MAAMf,OAAOlB,OAAMuC,OAAO,CAAC,QAAMtC,8CAAAA,EAAuB,CAAC,CAAC,EAAEmC,YAAY,EAAEJ,QAAQ;QAACA;QAAOI;KAAW;IAErG,IAAIZ,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,iFAAiF;QACjF1B,OAAMuC,OAAO,CAAC;YACZ,YAAY;YACZ,kHAAkH;YAClH,gHAAgH;YAChH,oBAAoB;YAEpB,IAAIR,gBAAgB;oBA0BHS;gBAzBf,MAAMC,0BAA0B,CAAC,CAAC,EAAEvC,uDAAAA,CAAyBmC,IAAI,CAAC,CAAC,EAAED,YAAY;gBACjF,MAAMM,mBAAmBX,eAAeY,gBAAgB,CAACF;gBAEzD,MAAMG,uBAAuB,CAAC,UAAU,EAAER,WAAW,EAAE,CAAC;gBACxD,MAAMS,gBAAgBd,eAAeY,gBAAgB,CAAmBC;gBAExE,IAAIC,cAAcxB,MAAM,GAAG,GAAG;oBAC5B,sCAAsC;oBACtCM,QAAQC,KAAK,CACX;wBACE;wBACA;wBACA;wBACA;wBACA;qBACD,CAACkB,IAAI,CAAC;oBAET;gBACF;gBAEA,MAAMN,eAAeK,cAAcE,IAAI,CAAC;oBAKzBP;gBAHf,YAAY;gBACZ,EAAE;gBACF,8FAA8F;gBAC9F,MAAMQ,QAASR,CAAAA,CAAAA,mCAAAA,iBAAAA,QAAAA,iBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,CAAAA,4BAAAA,aAAcS,WAAAA,AAAW,MAAA,QAAzBT,8BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,0BAA2BnB,MAAAA,AAAM,MAAA,QAAjCmB,qCAAAA,KAAAA,IAAAA,oCAAqC,CAAA,GAAK;gBACzD,MAAMU,gBAAgBF,QAAQ,IAAI;gBAElC,IAAIN,iBAAiBrB,MAAM,GAAG6B,eAAe;oBAC3C,sCAAsC;oBACtCvB,QAAQC,KAAK,CACX;wBACE;wBACA;wBACA;wBACA;wBACA;qBACD,CAACkB,IAAI,CAAC;gBAEX;YACF;QACA,uDAAuD;QACzD,GAAG,EAAE;IACP;IAEAK,0BAA0BpB,gBAAgBK;IAC1CjC,mBAAmB;QACjB,wFAAwF;QACxF,MAAMiD,kBAAkBrB,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBsB,cAAc,CAACjB;QACvD,IAAIgB,iBAAiB;YACnBlB,SAASoB,OAAO,GAAGF;QACrB,OAAO;YACLlB,SAASoB,OAAO,GAAGlD,eAAe2B,gBAAgB;gBAAE,GAAGO,sBAAsB;gBAAEiB,IAAInB;YAAW;YAC9F,IAAIF,SAASoB,OAAO,EAAE;gBACpBrC,YAAYiB,SAASoB,OAAO,EAAEpC;YAChC;QACF;QAEA,OAAO;gBACLgB;aAAAA,oBAAAA,SAASoB,OAAAA,AAAO,MAAA,QAAhBpB,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,kBAAkBsB,MAAM;QAC1B;IACF,GAAG;QAACpB;QAAYL;QAAgBb;QAAMoB;KAAuB;IAE7D,OAAO;QAAEF;QAAYlB;IAAK;AAC5B,EAAE;AAEF,SAASiC,0BAA0BpB,cAA2C,EAAEK,UAAkB;IAChG,qEAAqE;IACrE,4EAA4E;IAC5E,2FAA2F;IAC3F,4DAA4D;IAC5DpC,OAAMyD,QAAQ,CAAC;QACb,IAAI,CAAC1B,gBAAgB;YACnB;QACF;QAEA,MAAM2B,oBAAoB3B,eAAesB,cAAc,CAACjB;QACxD,IAAIsB,mBAAmB;YACrB3B,eAAexB,IAAI,CAACoD,MAAM,CAACD;QAC7B;IACF;AACF"}
+{"version":3,"sources":["../../../src/components/FluentProvider/useFluentProviderThemeStyleTag.ts"],"sourcesContent":["'use client';\n\nimport { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { createCSSRuleFromTheme } from './createCSSRuleFromTheme';\nimport type { FluentProviderState } from './FluentProvider.types';\nimport { fluentProviderClassNames } from './useFluentProviderStyles.styles';\n\n// String concatenation is used to prevent bundlers to complain with older versions of React\nconst useInsertionEffect = (React as never)['useInsertion' + 'Effect']\n  ? (React as never)['useInsertion' + 'Effect']\n  : useIsomorphicLayoutEffect;\n\nconst createStyleTag = (target: Document | undefined, elementAttributes: Record<string, string>) => {\n  // Document might exist but not be ready yet (e.g. during SSR)\n  // In that case, we should not create a style tag\n  if (!target?.head) {\n    return undefined;\n  }\n\n  const tag = target.createElement('style');\n\n  Object.keys(elementAttributes).forEach(attrName => {\n    tag.setAttribute(attrName, elementAttributes[attrName]);\n  });\n\n  target.head.appendChild(tag);\n  return tag;\n};\n\nconst insertSheet = (tag: HTMLStyleElement, rule: string) => {\n  const sheet = tag.sheet;\n\n  if (sheet) {\n    if (sheet.cssRules.length > 0) {\n      sheet.deleteRule(0);\n    }\n    sheet.insertRule(rule, 0);\n  } else if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line no-console\n    console.error('FluentProvider: No sheet available on styleTag, styles will not be inserted into DOM.');\n  }\n};\n\n/**\n * Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class\n * @internal\n * @returns CSS class to apply the rule\n */\nexport const useFluentProviderThemeStyleTag = (\n  options: Pick<FluentProviderState, 'theme' | 'targetDocument'> & { rendererAttributes: Record<string, string> },\n): { styleTagId: string; rule: string } => {\n  const { targetDocument, theme, rendererAttributes } = options;\n\n  const styleTag = React.useRef<HTMLStyleElement | undefined | null>(undefined);\n\n  const styleTagId = useId(fluentProviderClassNames.root);\n  const styleElementAttributes = rendererAttributes;\n\n  const rule = React.useMemo(() => createCSSRuleFromTheme(`.${styleTagId}`, theme), [theme, styleTagId]);\n\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line react-hooks/rules-of-hooks, react-hooks/void-use-memo\n    React.useMemo(() => {\n      // Heads up!\n      // .useMemo() is used because it is called during render and DOM for _current_ component is not mounted yet. Also,\n      // this allows to do checks with strict mode enabled as .useEffect() will be called with incremented IDs because\n      // of double render.\n\n      if (targetDocument) {\n        const providerElementSelector = `.${fluentProviderClassNames.root}.${styleTagId}`;\n        const providerElements = targetDocument.querySelectorAll(providerElementSelector);\n\n        const styleElementSelector = `style[id=\"${styleTagId}\"]`;\n        const styleElements = targetDocument.querySelectorAll<HTMLStyleElement>(styleElementSelector);\n\n        if (styleElements.length > 1) {\n          // eslint-disable-next-line no-console\n          console.error(\n            [\n              '@fluentui/react-provider: We found multiple <style> elements with same IDs in your DOM.',\n              'Please make sure that you configured your application properly.',\n              '\\n',\n              '\\n',\n              'Configuration guide: https://aka.ms/fluentui-conflicting-ids',\n            ].join(' '),\n          );\n          return;\n        }\n\n        const styleElement = styleElements.item(0) as HTMLStyleElement | null;\n\n        // Heads up!\n        //\n        // In SSR, we will have DOM upfront & style tags will have CSS rules defined in `.textContent`\n        const isSSR = (styleElement?.textContent?.length ?? 0) > 0;\n        const elementsCount = isSSR ? 1 : 0;\n\n        if (providerElements.length > elementsCount) {\n          // eslint-disable-next-line no-console\n          console.error(\n            [\n              '@fluentui/react-provider: There are conflicting ids in your DOM.',\n              'Please make sure that you configured your application properly.',\n              '\\n',\n              '\\n',\n              'Configuration guide: https://aka.ms/fluentui-conflicting-ids',\n            ].join(' '),\n          );\n        }\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n  }\n\n  useHandleSSRStyleElements(targetDocument, styleTagId);\n  useInsertionEffect(() => {\n    // The style element could already have been created during SSR - no need to recreate it\n    const ssrStyleElement = targetDocument?.getElementById(styleTagId);\n    if (ssrStyleElement) {\n      styleTag.current = ssrStyleElement as HTMLStyleElement;\n    } else {\n      styleTag.current = createStyleTag(targetDocument, { ...styleElementAttributes, id: styleTagId });\n      if (styleTag.current) {\n        insertSheet(styleTag.current, rule);\n      }\n    }\n\n    return () => {\n      styleTag.current?.remove();\n    };\n  }, [styleTagId, targetDocument, rule, styleElementAttributes]);\n\n  return { styleTagId, rule };\n};\n\nfunction useHandleSSRStyleElements(targetDocument: Document | undefined | null, styleTagId: string) {\n  // Using a state factory so that this logic only runs once per render\n  // Each FluentProvider can create its own style element during SSR as a slot\n  // Moves all theme style elements to document head during render to avoid hydration errors.\n  // Should be strict mode safe since the logic is idempotent.\n  React.useState(() => {\n    if (!targetDocument) {\n      return;\n    }\n\n    const themeStyleElement = targetDocument.getElementById(styleTagId);\n    if (themeStyleElement) {\n      targetDocument.head.append(themeStyleElement);\n    }\n  });\n}\n"],"names":["useId","useIsomorphicLayoutEffect","React","createCSSRuleFromTheme","fluentProviderClassNames","useInsertionEffect","createStyleTag","target","elementAttributes","head","undefined","tag","createElement","Object","keys","forEach","attrName","setAttribute","appendChild","insertSheet","rule","sheet","cssRules","length","deleteRule","insertRule","process","env","NODE_ENV","console","error","useFluentProviderThemeStyleTag","options","targetDocument","theme","rendererAttributes","styleTag","useRef","styleTagId","root","styleElementAttributes","useMemo","styleElement","providerElementSelector","providerElements","querySelectorAll","styleElementSelector","styleElements","join","item","isSSR","textContent","elementsCount","useHandleSSRStyleElements","ssrStyleElement","getElementById","current","id","remove","useState","themeStyleElement","append"],"mappings":"AAAA;;;;;;;;eAkDa+B;;;;gCAhDoC,4BAA4B;iEACtD,QAAQ;wCAEQ,8BAA2B;+CAEzB,sCAAmC;AAE5E,4FAA4F;AAC5F,MAAM1B,qBAAsBH,MAAe,CAAC,iBAAiB,SAAS,GACjEA,MAAe,CAAC,iBAAiB,SAAS,GAC3CD,yCAAAA;AAEJ,MAAMK,iBAAiB,CAACC,QAA8BC;IACpD,8DAA8D;IAC9D,iDAAiD;IACjD,IAAI,EAACD,WAAAA,QAAAA,WAAAA,KAAAA,IAAAA,KAAAA,IAAAA,OAAQE,IAAAA,AAAI,GAAE;QACjB,OAAOC;IACT;IAEA,MAAMC,MAAMJ,OAAOK,aAAa,CAAC;IAEjCC,OAAOC,IAAI,CAACN,mBAAmBO,OAAO,CAACC,CAAAA;QACrCL,IAAIM,YAAY,CAACD,UAAUR,iBAAiB,CAACQ,SAAS;IACxD;IAEAT,OAAOE,IAAI,CAACS,WAAW,CAACP;IACxB,OAAOA;AACT;AAEA,MAAMQ,cAAc,CAACR,KAAuBS;IAC1C,MAAMC,QAAQV,IAAIU,KAAK;IAEvB,IAAIA,OAAO;QACT,IAAIA,MAAMC,QAAQ,CAACC,MAAM,GAAG,GAAG;YAC7BF,MAAMG,UAAU,CAAC;QACnB;QACAH,MAAMI,UAAU,CAACL,MAAM;IACzB,OAAO,IAAIM,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QAChD,sCAAsC;QACtCC,QAAQC,KAAK,CAAC;IAChB;AACF;AAOO,uCAAuC,CAC5CE;IAEA,MAAM,EAAEC,cAAc,EAAEC,KAAK,EAAEC,kBAAkB,EAAE,GAAGH;IAEtD,MAAMI,WAAWlC,OAAMmC,MAAM,CAAsC3B;IAEnE,MAAM4B,aAAatC,yBAAAA,EAAMI,uDAAAA,CAAyBmC,IAAI;IACtD,MAAMC,yBAAyBL;IAE/B,MAAMf,OAAOlB,OAAMuC,OAAO,CAAC,QAAMtC,8CAAAA,EAAuB,CAAC,CAAC,EAAEmC,YAAY,EAAEJ,QAAQ;QAACA;QAAOI;KAAW;IAErG,IAAIZ,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,iFAAiF;QACjF1B,OAAMuC,OAAO,CAAC;YACZ,YAAY;YACZ,kHAAkH;YAClH,gHAAgH;YAChH,oBAAoB;YAEpB,IAAIR,gBAAgB;;oBA0BHS;gBAzBf,MAAMC,0BAA0B,CAAC,CAAC,EAAEvC,uDAAAA,CAAyBmC,IAAI,CAAC,CAAC,EAAED,YAAY;gBACjF,MAAMM,mBAAmBX,eAAeY,gBAAgB,CAACF;gBAEzD,MAAMG,uBAAuB,CAAC,UAAU,EAAER,WAAW,EAAE,CAAC;gBACxD,MAAMS,gBAAgBd,eAAeY,gBAAgB,CAAmBC;gBAExE,IAAIC,cAAcxB,MAAM,GAAG,GAAG;oBAC5B,sCAAsC;oBACtCM,QAAQC,KAAK,CACX;wBACE;wBACA;wBACA;wBACA;wBACA;qBACD,CAACkB,IAAI,CAAC;oBAET;gBACF;gBAEA,MAAMN,eAAeK,cAAcE,IAAI,CAAC;gBAExC,YAAY;gBACZ,EAAE;gBACF,8FAA8F;gBAC9F,MAAMC,QAAQ,CAAA,CAAA,OAACR,iBAAAA,QAAAA,iBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,CAAAA,4BAAAA,aAAcS,WAAAA,AAAW,MAAA,QAAzBT,8BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,0BAA2BnB,MAAAA,AAAM,MAAA,QAAA,SAAA,KAAA,IAAA,QAAI,IAAK;gBACzD,MAAM6B,gBAAgBF,QAAQ,IAAI;gBAElC,IAAIN,iBAAiBrB,MAAM,GAAG6B,eAAe;oBAC3C,sCAAsC;oBACtCvB,QAAQC,KAAK,CACX;wBACE;wBACA;wBACA;wBACA;wBACA;qBACD,CAACkB,IAAI,CAAC;gBAEX;YACF;QACA,uDAAuD;QACzD,GAAG,EAAE;IACP;IAEAK,0BAA0BpB,gBAAgBK;IAC1CjC,mBAAmB;QACjB,wFAAwF;QACxF,MAAMiD,kBAAkBrB,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBsB,cAAc,CAACjB;QACvD,IAAIgB,iBAAiB;YACnBlB,SAASoB,OAAO,GAAGF;QACrB,OAAO;YACLlB,SAASoB,OAAO,GAAGlD,eAAe2B,gBAAgB;gBAAE,GAAGO,sBAAsB;gBAAEiB,IAAInB;YAAW;YAC9F,IAAIF,SAASoB,OAAO,EAAE;gBACpBrC,YAAYiB,SAASoB,OAAO,EAAEpC;YAChC;QACF;QAEA,OAAO;gBACLgB;aAAAA,oBAAAA,SAASoB,OAAAA,AAAO,MAAA,QAAhBpB,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,kBAAkBsB,MAAM;QAC1B;IACF,GAAG;QAACpB;QAAYL;QAAgBb;QAAMoB;KAAuB;IAE7D,OAAO;QAAEF;QAAYlB;IAAK;AAC5B,EAAE;AAEF,SAASiC,0BAA0BpB,cAA2C,EAAEK,UAAkB;IAChG,qEAAqE;IACrE,4EAA4E;IAC5E,2FAA2F;IAC3F,4DAA4D;IAC5DpC,OAAMyD,QAAQ,CAAC;QACb,IAAI,CAAC1B,gBAAgB;YACnB;QACF;QAEA,MAAM2B,oBAAoB3B,eAAesB,cAAc,CAACjB;QACxD,IAAIsB,mBAAmB;YACrB3B,eAAexB,IAAI,CAACoD,MAAM,CAACD;QAC7B;IACF;AACF"}

package/lib-commonjs/index.cjs

@@ -5,32 +5,32 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    FluentProvider: function() {
+    get FluentProvider () {
         return _FluentProvider.FluentProvider;
     },
-    createCSSRuleFromTheme: function() {
+    get createCSSRuleFromTheme () {
         return _FluentProvider.createCSSRuleFromTheme;
     },
-    fluentProviderClassNames: function() {
+    get fluentProviderClassNames () {
         return _FluentProvider.fluentProviderClassNames;
     },
-    renderFluentProvider_unstable: function() {
+    get renderFluentProvider_unstable () {
         return _FluentProvider.renderFluentProvider_unstable;
     },
-    useFluentProviderContextValues_unstable: function() {
+    get useFluentProviderContextValues_unstable () {
         return _FluentProvider.useFluentProviderContextValues_unstable;
     },
-    useFluentProviderStyles_unstable: function() {
+    get useFluentProviderStyles_unstable () {
         return _FluentProvider.useFluentProviderStyles_unstable;
     },
-    useFluentProviderThemeStyleTag: function() {
+    get useFluentProviderThemeStyleTag () {
         return _FluentProvider.useFluentProviderThemeStyleTag;
     },
-    useFluentProvider_unstable: function() {
+    get useFluentProvider_unstable () {
         return _FluentProvider.useFluentProvider_unstable;
     }
 });

package/lib-commonjs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  createCSSRuleFromTheme,\n  fluentProviderClassNames,\n  FluentProvider,\n  renderFluentProvider_unstable,\n  useFluentProviderContextValues_unstable,\n  useFluentProvider_unstable,\n  useFluentProviderStyles_unstable,\n  useFluentProviderThemeStyleTag,\n} from './FluentProvider';\nexport type {\n  FluentProviderContextValues,\n  FluentProviderCustomStyleHooks,\n  FluentProviderProps,\n  FluentProviderState,\n  FluentProviderSlots,\n} from './FluentProvider';\n"],"names":["createCSSRuleFromTheme","fluentProviderClassNames","FluentProvider","renderFluentProvider_unstable","useFluentProviderContextValues_unstable","useFluentProvider_unstable","useFluentProviderStyles_unstable","useFluentProviderThemeStyleTag"],"mappings":";;;;;;;;;;;IAGEE;6CAAc;;;eAFdF,sCAAsB;;;eACtBC,wCAAwB;;;eAExBE,6CAA6B;;;eAC7BC,uDAAuC;;;eAEvCE,gDAAgC;;;eAChCC,8CAA8B;;;eAF9BF,0CAA0B;;;gCAGrB,sBAAmB"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  createCSSRuleFromTheme,\n  fluentProviderClassNames,\n  FluentProvider,\n  renderFluentProvider_unstable,\n  useFluentProviderContextValues_unstable,\n  useFluentProvider_unstable,\n  useFluentProviderStyles_unstable,\n  useFluentProviderThemeStyleTag,\n} from './FluentProvider';\nexport type {\n  FluentProviderContextValues,\n  FluentProviderCustomStyleHooks,\n  FluentProviderProps,\n  FluentProviderState,\n  FluentProviderSlots,\n} from './FluentProvider';\n"],"names":["createCSSRuleFromTheme","fluentProviderClassNames","FluentProvider","renderFluentProvider_unstable","useFluentProviderContextValues_unstable","useFluentProvider_unstable","useFluentProviderStyles_unstable","useFluentProviderThemeStyleTag"],"mappings":";;;;;;;;;;;;eAGEE,8BAAc;;;eAFdF,sCAAsB;;;eACtBC,wCAAwB;;;eAExBE,6CAA6B;;;eAC7BC,uDAAuC;;;eAEvCE,gDAAgC;;;eAChCC,8CAA8B;;;eAF9BF,0CAA0B;;;gCAGrB,sBAAmB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-provider",
-  "version": "9.22.22",
+  "version": "9.22.23",
   "description": "Fluent UI React provider component",
   "main": "lib-commonjs/index.cjs",
   "module": "lib/index.js",