@fluentui/react-provider 9.0.0-alpha.8 → 9.0.0-alpha.83

package/lib-commonjs/FluentProvider.js

@@ -1,54 +1,10 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-var react_theme_provider_1 = require("@fluentui/react-theme-provider");
-var react_focus_management_1 = require("@fluentui/react-focus-management");
-var react_utilities_1 = require("@fluentui/react-utilities");
-var React = require("react");
-var context_1 = require("./context");
-var mergeProps = react_utilities_1.makeMergeProps();
-function useFluentProviderState(draftState) {
-    var parentContext = context_1.useFluent();
-    react_theme_provider_1.useThemeProviderState(draftState);
-    // TODO: add merge functions
-    draftState.document = draftState.document || parentContext.document;
-    draftState.dir = draftState.dir || parentContext.dir;
-}
-exports.useFluentProviderState = useFluentProviderState;
-function renderFluentProvider(state) {
-    var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
-    var dir = state.dir, document = state.document, theme = state.theme;
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    var value = React.useMemo(function () { return ({ dir: dir, document: document }); }, [dir, document]);
-    return (React.createElement(context_1.internal__FluentProviderContext.Provider, { value: value },
-        React.createElement(react_theme_provider_1.internal__ThemeContext.Provider, { value: theme },
-            React.createElement(react_focus_management_1.FocusManagementProvider, { document: document, dir: dir },
-                React.createElement(slots.root, tslib_1.__assign({}, slotProps.root))))));
-}
-exports.renderFluentProvider = renderFluentProvider;
-/**
- * Returns the ThemeProvider render function and calculated state, given user input, ref, and
- * a set of default prop values.
- */
-function useFluentProvider(props, ref) {
-    var rootRef = react_utilities_1.useMergedRefs(ref, React.useRef(null));
-    var state = mergeProps({
-        ref: rootRef,
-        as: 'div',
-    }, {}, props);
-    useFluentProviderState(state);
-    return {
-        state: state,
-        render: renderFluentProvider,
-    };
-}
-exports.useFluentProvider = useFluentProvider;
-/**
- * A React provider that allows to define theme, text direction and context for rendering for children components.
- */
-exports.FluentProvider = React.forwardRef(function (props, ref) {
-    var _a = useFluentProvider(props, ref), render = _a.render, state = _a.state;
-    return render(state);
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-exports.FluentProvider.displayName = 'Provider';
+
+var tslib_1 = /*#__PURE__*/require("tslib");
+
+tslib_1.__exportStar(require("./components/FluentProvider/index"), exports);
 //# sourceMappingURL=FluentProvider.js.map

package/lib-commonjs/FluentProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"FluentProvider.js","sourceRoot":"../src/","sources":["FluentProvider.tsx"],"names":[],"mappings":";;;AACA,uEAAmH;AACnH,2EAA2E;AAC3E,6DAAoF;AACpF,6BAA+B;AAE/B,qCAAuE;AAiBvE,IAAM,UAAU,GAAG,gCAAc,EAAiB,CAAC;AAEnD,SAAgB,sBAAsB,CAAC,UAAyB;IAC9D,IAAM,aAAa,GAAG,mBAAS,EAAE,CAAC;IAElC,4CAAqB,CAAC,UAAgC,CAAC,CAAC;IAExD,4BAA4B;IAC5B,UAAU,CAAC,QAAQ,GAAG,UAAU,CAAC,QAAQ,IAAI,aAAa,CAAC,QAAQ,CAAC;IACpE,UAAU,CAAC,GAAG,GAAG,UAAU,CAAC,GAAG,IAAI,aAAa,CAAC,GAAG,CAAC;AACvD,CAAC;AARD,wDAQC;AAED,SAAgB,oBAAoB,CAAC,KAAoB;IACjD,IAAA,sCAAsC,EAApC,gBAAK,EAAE,wBAA6B,CAAC;IACrC,IAAA,eAAG,EAAE,yBAAQ,EAAE,mBAAK,CAAW;IAEvC,sDAAsD;IACtD,IAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,cAAM,OAAA,CAAC,EAAE,GAAG,KAAA,EAAE,QAAQ,UAAA,EAAE,CAAC,EAAnB,CAAmB,EAAE,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC;IAExE,OAAO,CACL,oBAAC,yCAA+B,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK;QACpD,oBAAC,6CAAsB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK;YAC3C,oBAAC,gDAAuB,IAAC,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG;gBACnD,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI,CACV,CACM,CACO,CAC5C,CAAC;AACJ,CAAC;AAhBD,oDAgBC;AAED;;;GAGG;AACH,SAAgB,iBAAiB,CAAC,KAAoB,EAAE,GAA2B;IACjF,IAAM,OAAO,GAAG,+BAAa,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,CAAc,IAAI,CAAC,CAAC,CAAC;IACpE,IAAM,KAAK,GAAG,UAAU,CACtB;QACE,GAAG,EAAE,OAAO;QACZ,EAAE,EAAE,KAAK;KACV,EACD,EAAE,EACF,KAAK,CACN,CAAC;IAEF,sBAAsB,CAAC,KAAK,CAAC,CAAC;IAE9B,OAAO;QACL,KAAK,OAAA;QACL,MAAM,EAAE,oBAAoB;KAC7B,CAAC;AACJ,CAAC;AAjBD,8CAiBC;AAED;;GAEG;AACU,QAAA,cAAc,GAA2C,KAAK,CAAC,UAAU,CACpF,UAAC,KAAoB,EAAE,GAA8B;IAC7C,IAAA,kCAAiD,EAA/C,kBAAM,EAAE,gBAAuC,CAAC;IAExD,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC;AACvB,CAAC,CACF,CAAC;AAEF,sBAAc,CAAC,WAAW,GAAG,UAAU,CAAC","sourcesContent":["import { PartialTheme, Theme } from '@fluentui/react-theme';\nimport { internal__ThemeContext, ThemeProviderState, useThemeProviderState } from '@fluentui/react-theme-provider';\nimport { FocusManagementProvider } from '@fluentui/react-focus-management';\nimport { getSlots, makeMergeProps, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { internal__FluentProviderContext, useFluent } from './context';\n\nexport interface ProviderProps {\n  /** Sets the direction of text & generated styles. */\n  dir?: 'ltr' | 'rtl';\n\n  /** Provides the document, can be undefined during SSR render. */\n  document?: Document | undefined;\n\n  theme?: PartialTheme;\n}\nexport interface ProviderState {\n  dir: 'ltr' | 'rtl';\n  document: Document | undefined;\n  theme: Theme;\n}\n\nconst mergeProps = makeMergeProps<ProviderState>();\n\nexport function useFluentProviderState(draftState: ProviderState) {\n  const parentContext = useFluent();\n\n  useThemeProviderState(draftState as ThemeProviderState);\n\n  // TODO: add merge functions\n  draftState.document = draftState.document || parentContext.document;\n  draftState.dir = draftState.dir || parentContext.dir;\n}\n\nexport function renderFluentProvider(state: ProviderState) {\n  const { slots, slotProps } = getSlots(state);\n  const { dir, document, theme } = state;\n\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const value = React.useMemo(() => ({ dir, document }), [dir, document]);\n\n  return (\n    <internal__FluentProviderContext.Provider value={value}>\n      <internal__ThemeContext.Provider value={theme}>\n        <FocusManagementProvider document={document} dir={dir}>\n          <slots.root {...slotProps.root} />\n        </FocusManagementProvider>\n      </internal__ThemeContext.Provider>\n    </internal__FluentProviderContext.Provider>\n  );\n}\n\n/**\n * Returns the ThemeProvider render function and calculated state, given user input, ref, and\n * a set of default prop values.\n */\nexport function useFluentProvider(props: ProviderProps, ref: React.Ref<HTMLElement>) {\n  const rootRef = useMergedRefs(ref, React.useRef<HTMLElement>(null));\n  const state = mergeProps(\n    {\n      ref: rootRef,\n      as: 'div',\n    },\n    {},\n    props,\n  );\n\n  useFluentProviderState(state);\n\n  return {\n    state,\n    render: renderFluentProvider,\n  };\n}\n\n/**\n * A React provider that allows to define theme, text direction and context for rendering for children components.\n */\nexport const FluentProvider: React.FunctionComponent<ProviderProps> = React.forwardRef<HTMLDivElement, ProviderProps>(\n  (props: ProviderProps, ref: React.Ref<HTMLDivElement>) => {\n    const { render, state } = useFluentProvider(props, ref);\n\n    return render(state);\n  },\n);\n\nFluentProvider.displayName = 'Provider';\n"]}
+{"version":3,"sources":["../src/FluentProvider.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mCAAA,CAAA,EAAA,OAAA","sourceRoot":""}

package/lib-commonjs/common/isConformant.d.ts

@@ -0,0 +1,4 @@
+import type { IsConformantOptions } from '@fluentui/react-conformance';
+export declare function isConformant<TProps = {}>(testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & {
+    componentPath?: string;
+}): void;

package/lib-commonjs/common/isConformant.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isConformant = void 0;
+
+var react_conformance_1 = /*#__PURE__*/require("@fluentui/react-conformance");
+
+var react_conformance_make_styles_1 = /*#__PURE__*/require("@fluentui/react-conformance-make-styles");
+
+function isConformant(testInfo) {
+  var defaultOptions = {
+    disabledTests: ['has-docblock'],
+    asPropHandlesRef: true,
+    componentPath: module.parent.filename.replace('.test', ''),
+    extraTests: react_conformance_make_styles_1.default
+  };
+  react_conformance_1.isConformant(defaultOptions, testInfo);
+}
+
+exports.isConformant = isConformant;
+//# sourceMappingURL=isConformant.js.map

package/lib-commonjs/common/isConformant.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/common/isConformant.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAEA,IAAA,+BAAA,gBAAA,OAAA,CAAA,yCAAA,CAAA;;AAEA,SAAgB,YAAhB,CACE,QADF,EAC2F;AAEzF,MAAM,cAAc,GAAyC;AAC3D,IAAA,aAAa,EAAE,CAAC,cAAD,CAD4C;AAE3D,IAAA,gBAAgB,EAAE,IAFyC;AAG3D,IAAA,aAAa,EAAE,MAAO,CAAC,MAAR,CAAgB,QAAhB,CAAyB,OAAzB,CAAiC,OAAjC,EAA0C,EAA1C,CAH4C;AAI3D,IAAA,UAAU,EAAE,+BAAA,CAAA;AAJ+C,GAA7D;AAOA,EAAA,mBAAA,CAAA,YAAA,CAAiB,cAAjB,EAAiC,QAAjC;AACD;;AAXD,OAAA,CAAA,YAAA,GAAA,YAAA","sourceRoot":""}

package/lib-commonjs/components/FluentProvider/FluentProvider.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import type { FluentProviderProps } from './FluentProvider.types';
+export declare const FluentProvider: React.ForwardRefExoticComponent<FluentProviderProps & React.RefAttributes<HTMLElement>>;

package/lib-commonjs/components/FluentProvider/FluentProvider.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FluentProvider = void 0;
+
+var React = /*#__PURE__*/require("react");
+
+var renderFluentProvider_1 = /*#__PURE__*/require("./renderFluentProvider");
+
+var useFluentProvider_1 = /*#__PURE__*/require("./useFluentProvider");
+
+var useFluentProviderStyles_1 = /*#__PURE__*/require("./useFluentProviderStyles");
+
+var useFluentProviderContextValues_1 = /*#__PURE__*/require("./useFluentProviderContextValues");
+
+exports.FluentProvider = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var state = useFluentProvider_1.useFluentProvider(props, ref);
+  useFluentProviderStyles_1.useFluentProviderStyles(state);
+  var contextValues = useFluentProviderContextValues_1.useFluentProviderContextValues(state);
+  return renderFluentProvider_1.renderFluentProvider(state, contextValues);
+});
+exports.FluentProvider.displayName = 'FluentProvider';
+//# sourceMappingURL=FluentProvider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/FluentProvider/FluentProvider.tsx"],"names":[],"mappings":";;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,IAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;;AACA,IAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,IAAA,gCAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AAGa,OAAA,CAAA,cAAA,gBAAiB,KAAK,CAAC,UAAN,CAAmD,UAAC,KAAD,EAAQ,GAAR,EAAW;AAC1F,MAAM,KAAK,GAAG,mBAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,CAAd;AACA,EAAA,yBAAA,CAAA,uBAAA,CAAwB,KAAxB;AAEA,MAAM,aAAa,GAAG,gCAAA,CAAA,8BAAA,CAA+B,KAA/B,CAAtB;AAEA,SAAO,sBAAA,CAAA,oBAAA,CAAqB,KAArB,EAA4B,aAA5B,CAAP;AACD,CAP6B,CAAjB;AASb,OAAA,CAAA,cAAA,CAAe,WAAf,GAA6B,gBAA7B","sourceRoot":""}

package/lib-commonjs/components/FluentProvider/FluentProvider.types.d.ts

@@ -0,0 +1,25 @@
+import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
+import type { PartialTheme, Theme } from '@fluentui/react-theme';
+import type { ProviderContextValue, TooltipContextType, ThemeContextValue, ThemeClassNameContextValue } from '@fluentui/react-shared-contexts';
+export declare type FluentProviderSlots = {
+    root: IntrinsicShorthandProps<'div'>;
+};
+export interface FluentProviderCommons {
+    /** Sets the direction of text & generated styles. */
+    dir: 'ltr' | 'rtl';
+    /** Provides the document, can be undefined during SSR render. */
+    targetDocument: Document | undefined;
+}
+export interface FluentProviderProps extends Omit<ComponentProps<FluentProviderSlots>, 'dir'>, Partial<FluentProviderCommons> {
+    theme?: PartialTheme;
+}
+export interface FluentProviderState extends ComponentState<FluentProviderSlots>, FluentProviderCommons {
+    theme: Theme;
+    themeClassName: string;
+}
+export interface FluentProviderContextValues {
+    provider: ProviderContextValue;
+    theme: ThemeContextValue;
+    themeClassName: ThemeClassNameContextValue;
+    tooltip: TooltipContextType;
+}

package/lib-commonjs/components/FluentProvider/FluentProvider.types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=FluentProvider.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}

package/lib-commonjs/components/FluentProvider/index.d.ts

@@ -0,0 +1,5 @@
+export * from './FluentProvider';
+export * from './FluentProvider.types';
+export * from './renderFluentProvider';
+export * from './useFluentProvider';
+export * from './useFluentProviderContextValues';

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

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var tslib_1 = /*#__PURE__*/require("tslib");
+
+tslib_1.__exportStar(require("./FluentProvider"), exports);
+
+tslib_1.__exportStar(require("./FluentProvider.types"), exports);
+
+tslib_1.__exportStar(require("./renderFluentProvider"), exports);
+
+tslib_1.__exportStar(require("./useFluentProvider"), exports);
+
+tslib_1.__exportStar(require("./useFluentProviderContextValues"), exports);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/FluentProvider/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kCAAA,CAAA,EAAA,OAAA","sourceRoot":""}

package/lib-commonjs/components/FluentProvider/renderFluentProvider.d.ts

@@ -0,0 +1,5 @@
+import type { FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';
+/**
+ * Render the final JSX of FluentProvider
+ */
+export declare const renderFluentProvider: (state: FluentProviderState, contextValues: FluentProviderContextValues) => JSX.Element;

package/lib-commonjs/components/FluentProvider/renderFluentProvider.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderFluentProvider = void 0;
+
+var tslib_1 = /*#__PURE__*/require("tslib");
+
+var React = /*#__PURE__*/require("react");
+
+var react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
+
+var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+
+var useFluentProvider_1 = /*#__PURE__*/require("./useFluentProvider");
+/**
+ * Render the final JSX of FluentProvider
+ */
+
+
+var renderFluentProvider = function (state, contextValues) {
+  var _a = react_utilities_1.getSlots(state, useFluentProvider_1.fluentProviderShorthandProps),
+      slots = _a.slots,
+      slotProps = _a.slotProps;
+
+  return React.createElement(react_shared_contexts_1.ProviderContext.Provider, {
+    value: contextValues.provider
+  }, React.createElement(react_shared_contexts_1.ThemeContext.Provider, {
+    value: contextValues.theme
+  }, React.createElement(react_shared_contexts_1.ThemeClassNameContext.Provider, {
+    value: contextValues.themeClassName
+  }, React.createElement(react_shared_contexts_1.TooltipContext.Provider, {
+    value: contextValues.tooltip
+  }, React.createElement(slots.root, tslib_1.__assign({}, slotProps.root), state.root.children)))));
+};
+
+exports.renderFluentProvider = renderFluentProvider;
+//# sourceMappingURL=renderFluentProvider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/FluentProvider/renderFluentProvider.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,IAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;AAEA;;AAEG;;;AACI,IAAM,oBAAoB,GAAG,UAAC,KAAD,EAA6B,aAA7B,EAAuE;AACnG,MAAA,EAAA,GAAuB,iBAAA,CAAA,QAAA,CAA8B,KAA9B,EAAqC,mBAAA,CAAA,4BAArC,CAAvB;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAEN,SACE,KAAA,CAAA,aAAA,CAAC,uBAAA,CAAA,eAAA,CAAgB,QAAjB,EAAyB;AAAC,IAAA,KAAK,EAAE,aAAa,CAAC;AAAtB,GAAzB,EACE,KAAA,CAAA,aAAA,CAAC,uBAAA,CAAA,YAAA,CAAa,QAAd,EAAsB;AAAC,IAAA,KAAK,EAAE,aAAa,CAAC;AAAtB,GAAtB,EACE,KAAA,CAAA,aAAA,CAAC,uBAAA,CAAA,qBAAA,CAAsB,QAAvB,EAA+B;AAAC,IAAA,KAAK,EAAE,aAAa,CAAC;AAAtB,GAA/B,EACE,KAAA,CAAA,aAAA,CAAC,uBAAA,CAAA,cAAA,CAAe,QAAhB,EAAwB;AAAC,IAAA,KAAK,EAAE,aAAa,CAAC;AAAtB,GAAxB,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EAAiC,KAAK,CAAC,IAAN,CAAW,QAA5C,CADF,CADF,CADF,CADF,CADF;AAWD,CAdM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourceRoot":""}

package/lib-commonjs/components/FluentProvider/useFluentProvider.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import type { FluentProviderProps, FluentProviderSlots, FluentProviderState } from './FluentProvider.types';
+export declare const fluentProviderShorthandProps: (keyof FluentProviderSlots)[];
+/**
+ * Create the state required to render FluentProvider.
+ *
+ * The returned state can be modified with hooks such as useFluentProviderStyles,
+ * before being passed to renderFluentProvider.
+ *
+ * @param props - props from this instance of FluentProvider
+ * @param ref - reference to root HTMLElement of FluentProvider
+ */
+export declare const useFluentProvider: (props: FluentProviderProps, ref: React.Ref<HTMLElement>) => FluentProviderState;

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

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFluentProvider = exports.fluentProviderShorthandProps = void 0;
+
+var tslib_1 = /*#__PURE__*/require("tslib");
+
+var react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
+
+var react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
+
+var react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
+
+var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+
+var useThemeStyleTag_1 = /*#__PURE__*/require("./useThemeStyleTag");
+
+exports.fluentProviderShorthandProps = ['root'];
+/**
+ * Create the state required to render FluentProvider.
+ *
+ * The returned state can be modified with hooks such as useFluentProviderStyles,
+ * before being passed to renderFluentProvider.
+ *
+ * @param props - props from this instance of FluentProvider
+ * @param ref - reference to root HTMLElement of FluentProvider
+ */
+
+var useFluentProvider = function (props, ref) {
+  var parentContext = react_shared_contexts_1.useFluent();
+  var parentTheme = react_shared_contexts_1.useTheme();
+  /**
+   * TODO: add merge functions to "dir" merge,
+   * nesting providers with the same "dir" should not add additional attributes to DOM
+   * see https://github.com/microsoft/fluentui/blob/0dc74a19f3aa5a058224c20505016fbdb84db172/packages/fluentui/react-northstar/src/utils/mergeProviderContexts.ts#L89-L93
+   */
+
+  var _a = props.dir,
+      dir = _a === void 0 ? parentContext.dir : _a,
+      _b = props.targetDocument,
+      targetDocument = _b === void 0 ? parentContext.targetDocument : _b,
+      _c = props.theme,
+      theme = _c === void 0 ? {} : _c;
+  var mergedTheme = react_theme_1.mergeThemes(parentTheme, theme);
+  return {
+    dir: dir,
+    targetDocument: targetDocument,
+    theme: mergedTheme,
+    themeClassName: useThemeStyleTag_1.useThemeStyleTag({
+      theme: mergedTheme,
+      targetDocument: targetDocument
+    }),
+    components: {
+      root: 'div'
+    },
+    root: react_utilities_1.getNativeElementProps('div', tslib_1.__assign(tslib_1.__assign({}, props), {
+      dir: dir,
+      ref: react_utilities_1.useMergedRefs(ref, react_tabster_1.useKeyboardNavAttribute())
+    }))
+  };
+};
+
+exports.useFluentProvider = useFluentProvider;
+//# sourceMappingURL=useFluentProvider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/FluentProvider/useFluentProvider.ts"],"names":[],"mappings":";;;;;;;;;AAAA,IAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,IAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,IAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,IAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AAGa,OAAA,CAAA,4BAAA,GAA8D,CAAC,MAAD,CAA9D;AAEb;;;;;;;;AAQG;;AACI,IAAM,iBAAiB,GAAG,UAAC,KAAD,EAA6B,GAA7B,EAAwD;AACvF,MAAM,aAAa,GAAG,uBAAA,CAAA,SAAA,EAAtB;AACA,MAAM,WAAW,GAAG,uBAAA,CAAA,QAAA,EAApB;AAEA;;;;AAIG;;AACK,MAAA,EAAA,GAAuF,KAAK,CAArE,GAAvB;AAAA,MAAA,GAAG,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,aAAa,CAAC,GAAjB,GAAoB,EAAvB;AAAA,MAAyB,EAAA,GAA8D,KAAK,CAAtB,cAAtE;AAAA,MAAyB,cAAc,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,aAAa,CAAC,cAAjB,GAA+B,EAAtE;AAAA,MAAwE,EAAA,GAAe,KAAK,CAAV,KAAlF;AAAA,MAAwE,KAAK,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,EAAH,GAAK,EAAlF;AACR,MAAM,WAAW,GAAG,aAAA,CAAA,WAAA,CAAY,WAAZ,EAAyB,KAAzB,CAApB;AAEA,SAAO;AACL,IAAA,GAAG,EAAA,GADE;AAEL,IAAA,cAAc,EAAA,cAFT;AAGL,IAAA,KAAK,EAAE,WAHF;AAIL,IAAA,cAAc,EAAE,kBAAA,CAAA,gBAAA,CAAiB;AAAE,MAAA,KAAK,EAAE,WAAT;AAAsB,MAAA,cAAc,EAAA;AAApC,KAAjB,CAJX;AAML,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,KANP;AAUL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA2B,OAAA,CAAA,QAAA,CAAA,OAAA,CAAA,QAAA,CAAA,EAAA,EAC5B,KAD4B,CAAA,EACvB;AACR,MAAA,GAAG,EAAA,GADK;AAER,MAAA,GAAG,EAAE,iBAAA,CAAA,aAAA,CAAc,GAAd,EAAmB,eAAA,CAAA,uBAAA,EAAnB;AAFG,KADuB,CAA3B;AAVD,GAAP;AAgBD,CA5BM;;AAAM,OAAA,CAAA,iBAAA,GAAiB,iBAAjB","sourceRoot":""}

package/lib-commonjs/components/FluentProvider/useFluentProviderContextValues.d.ts

@@ -0,0 +1,2 @@
+import type { FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';
+export declare function useFluentProviderContextValues(state: FluentProviderState): FluentProviderContextValues;

package/lib-commonjs/components/FluentProvider/useFluentProviderContextValues.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFluentProviderContextValues = void 0;
+
+var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+
+var React = /*#__PURE__*/require("react");
+
+function useFluentProviderContextValues(state) {
+  var root = state.root,
+      dir = state.dir,
+      targetDocument = state.targetDocument,
+      theme = state.theme;
+  var provider = React.useMemo(function () {
+    return {
+      dir: dir,
+      targetDocument: targetDocument
+    };
+  }, [dir, targetDocument]); // "Tooltip" component mutates an object in this context, instance should be stable
+
+  var tooltip = react_utilities_1.useConst({});
+  return {
+    provider: provider,
+    tooltip: tooltip,
+    theme: theme,
+    themeClassName: root.className
+  };
+}
+
+exports.useFluentProviderContextValues = useFluentProviderContextValues;
+//# sourceMappingURL=useFluentProviderContextValues.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/FluentProvider/useFluentProviderContextValues.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGA,SAAgB,8BAAhB,CAA+C,KAA/C,EAAyE;AAC/D,MAAA,IAAI,GAAiC,KAAK,CAAtC,IAAJ;AAAA,MAAM,GAAG,GAA4B,KAAK,CAAjC,GAAT;AAAA,MAAW,cAAc,GAAY,KAAK,CAAjB,cAAzB;AAAA,MAA2B,KAAK,GAAK,KAAK,CAAV,KAAhC;AAER,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAN,CAAc,YAAA;AAAM,WAAC;AAAE,MAAA,GAAG,EAAA,GAAL;AAAO,MAAA,cAAc,EAAtB;AAAC,KAAD;AAAyB,GAA7C,EAA+C,CAAC,GAAD,EAAM,cAAN,CAA/C,CAAjB,CAHuE,CAIvE;;AACA,MAAM,OAAO,GAAG,iBAAA,CAAA,QAAA,CAAS,EAAT,CAAhB;AAEA,SAAO;AACL,IAAA,QAAQ,EAAA,QADH;AAEL,IAAA,OAAO,EAAA,OAFF;AAGL,IAAA,KAAK,EAAA,KAHA;AAIL,IAAA,cAAc,EAAE,IAAI,CAAC;AAJhB,GAAP;AAMD;;AAbD,OAAA,CAAA,8BAAA,GAAA,8BAAA","sourceRoot":""}

package/lib-commonjs/components/FluentProvider/useFluentProviderStyles.d.ts

@@ -0,0 +1,3 @@
+import type { FluentProviderState } from './FluentProvider.types';
+/** Applies style classnames to slots */
+export declare const useFluentProviderStyles: (state: FluentProviderState) => FluentProviderState;

package/lib-commonjs/components/FluentProvider/useFluentProviderStyles.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFluentProviderStyles = void 0;
+
+var react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
+
+var useStyles = /*#__PURE__*/react_make_styles_1.__styles({
+  "root": {
+    "sj55zd": "f16th3vw",
+    "De3pzq": "fpnz0vo",
+    "Bahqtrf": "f1kx028l",
+    "Be2twd7": "flcnb0",
+    "Bhrd7zp": "f1du0uop"
+  }
+}, {
+  "d": [".f16th3vw{color:var(--alias-color-neutral-neutralForeground1);}", ".fpnz0vo{background-color:var(--alias-color-neutral-neutralBackground1);}", ".f1kx028l{font-family:var(--global-type-fontFamilies-base);}", ".flcnb0{font-size:var(--global-type-fontSizes-base-300);}", ".f1du0uop{font-weight:var(--global-type-fontWeights-regular);}"]
+});
+/** Applies style classnames to slots */
+
+
+var useFluentProviderStyles = function (state) {
+  var styles = useStyles();
+  state.root.className = react_make_styles_1.mergeClasses(state.themeClassName, styles.root, state.root.className);
+  return state;
+};
+
+exports.useFluentProviderStyles = useFluentProviderStyles;
+//# sourceMappingURL=useFluentProviderStyles.js.map

package/lib-commonjs/components/FluentProvider/useFluentProviderStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/FluentProvider/useFluentProviderStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAGA,IAAM,SAAS,gBAAG,mBAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAUA;;;AACO,IAAM,uBAAuB,GAAG,UAAC,KAAD,EAA2B;AAChE,MAAM,MAAM,GAAG,SAAS,EAAxB;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,mBAAA,CAAA,YAAA,CAAa,KAAK,CAAC,cAAnB,EAAmC,MAAM,CAAC,IAA1C,EAAgD,KAAK,CAAC,IAAN,CAAW,SAA3D,CAAvB;AAEA,SAAO,KAAP;AACD,CANM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourceRoot":""}

package/lib-commonjs/components/FluentProvider/useThemeStyleTag.d.ts

@@ -0,0 +1,7 @@
+import type { FluentProviderState } from './FluentProvider.types';
+/**
+ * Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class
+ *
+ * @returns CSS class to apply the rule
+ */
+export declare const useThemeStyleTag: (options: Pick<FluentProviderState, 'theme' | 'targetDocument'>) => string;

package/lib-commonjs/components/FluentProvider/useThemeStyleTag.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useThemeStyleTag = void 0;
+
+var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+
+var react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
+
+var React = /*#__PURE__*/require("react");
+/**
+ * Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class
+ *
+ * @returns CSS class to apply the rule
+ */
+
+
+var useThemeStyleTag = function (options) {
+  var targetDocument = options.targetDocument,
+      theme = options.theme;
+  var styleTagId = react_utilities_1.useId('fluent-provider');
+  var styleTag = React.useMemo(function () {
+    if (!targetDocument) {
+      return null;
+    }
+
+    var tag = targetDocument.createElement('style');
+    tag.setAttribute('id', styleTagId);
+    targetDocument.head.appendChild(tag);
+    return tag;
+  }, [styleTagId, targetDocument]);
+  var cssRule = React.useMemo(function () {
+    var cssVars = react_theme_1.themeToCSSVariables(theme);
+    var cssVarsAsString = Object.keys(cssVars).reduce(function (cssVarRule, cssVar) {
+      cssVarRule += cssVar + ": " + cssVars[cssVar] + "; ";
+      return cssVarRule;
+    }, ''); // result: .fluent-provider1 { --css-var: '#fff' }
+
+    return "." + styleTagId + " { " + cssVarsAsString + " }";
+  }, [theme, styleTagId]);
+  var previousCssRule = react_utilities_1.usePrevious(cssRule);
+
+  if (styleTag && previousCssRule !== cssRule) {
+    var sheet = styleTag.sheet;
+
+    if (sheet.cssRules.length > 0) {
+      sheet.deleteRule(0);
+    }
+
+    sheet.insertRule(cssRule, 0);
+  } // Removes the style tag from the targetDocument on unmount or change
+
+
+  React.useEffect(function () {
+    return function () {
+      var _a;
+
+      if (styleTag) {
+        // IE11 safe node removal, otherwise use node.remove()
+        (_a = styleTag.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(styleTag);
+      }
+    };
+  }, [styleTag]);
+  return styleTagId;
+};
+
+exports.useThemeStyleTag = useThemeStyleTag;
+//# sourceMappingURL=useThemeStyleTag.js.map

package/lib-commonjs/components/FluentProvider/useThemeStyleTag.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/FluentProvider/useThemeStyleTag.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,IAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;AAGA;;;;AAIG;;;AACI,IAAM,gBAAgB,GAAG,UAAC,OAAD,EAA+D;AACrF,MAAA,cAAc,GAAY,OAAO,CAAnB,cAAd;AAAA,MAAgB,KAAK,GAAK,OAAO,CAAZ,KAArB;AAER,MAAM,UAAU,GAAG,iBAAA,CAAA,KAAA,CAAM,iBAAN,CAAnB;AACA,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAN,CAAc,YAAA;AAC7B,QAAI,CAAC,cAAL,EAAqB;AACnB,aAAO,IAAP;AACD;;AAED,QAAM,GAAG,GAAG,cAAc,CAAC,aAAf,CAA6B,OAA7B,CAAZ;AACA,IAAA,GAAG,CAAC,YAAJ,CAAiB,IAAjB,EAAuB,UAAvB;AACA,IAAA,cAAc,CAAC,IAAf,CAAoB,WAApB,CAAgC,GAAhC;AACA,WAAO,GAAP;AACD,GATgB,EASd,CAAC,UAAD,EAAa,cAAb,CATc,CAAjB;AAWA,MAAM,OAAO,GAAG,KAAK,CAAC,OAAN,CAAc,YAAA;AAC5B,QAAM,OAAO,GAAG,aAAA,CAAA,mBAAA,CAAoB,KAApB,CAAhB;AACA,QAAM,eAAe,GAAG,MAAM,CAAC,IAAP,CAAY,OAAZ,EAAqB,MAArB,CAA4B,UAAC,UAAD,EAAa,MAAb,EAAmB;AACrE,MAAA,UAAU,IAAO,MAAM,GAAA,IAAN,GAAW,OAAO,CAAC,MAAD,CAAlB,GAA0B,IAA3C;AACA,aAAO,UAAP;AACD,KAHuB,EAGrB,EAHqB,CAAxB,CAF4B,CAO5B;;AACA,WAAO,MAAI,UAAJ,GAAc,KAAd,GAAoB,eAApB,GAAmC,IAA1C;AACD,GATe,EASb,CAAC,KAAD,EAAQ,UAAR,CATa,CAAhB;AAUA,MAAM,eAAe,GAAG,iBAAA,CAAA,WAAA,CAAY,OAAZ,CAAxB;;AAEA,MAAI,QAAQ,IAAI,eAAe,KAAK,OAApC,EAA6C;AAC3C,QAAM,KAAK,GAAG,QAAQ,CAAC,KAAvB;;AAEA,QAAI,KAAK,CAAC,QAAN,CAAe,MAAf,GAAwB,CAA5B,EAA+B;AAC7B,MAAA,KAAK,CAAC,UAAN,CAAiB,CAAjB;AACD;;AAED,IAAA,KAAK,CAAC,UAAN,CAAiB,OAAjB,EAA0B,CAA1B;AACD,GAnC4F,CAqC7F;;;AACA,EAAA,KAAK,CAAC,SAAN,CAAgB,YAAA;AACd,WAAO,YAAA;;;AACL,UAAI,QAAJ,EAAc;AACZ;AACA,SAAA,EAAA,GAAA,QAAQ,CAAC,aAAT,MAAsB,IAAtB,IAAsB,EAAA,KAAA,KAAA,CAAtB,GAAsB,KAAA,CAAtB,GAAsB,EAAA,CAAE,WAAF,CAAc,QAAd,CAAtB;AACD;AACF,KALD;AAMD,GAPD,EAOG,CAAC,QAAD,CAPH;AASA,SAAO,UAAP;AACD,CAhDM;;AAAM,OAAA,CAAA,gBAAA,GAAgB,gBAAhB","sourceRoot":""}

package/lib-commonjs/index.d.ts

@@ -1,2 +1,2 @@
-export * from './context';
 export * from './FluentProvider';
+export { useFluent, useTheme } from '@fluentui/react-shared-contexts';

package/lib-commonjs/index.js

@@ -1,6 +1,26 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./context"), exports);
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTheme = exports.useFluent = void 0;
+
+var tslib_1 = /*#__PURE__*/require("tslib");
+
 tslib_1.__exportStar(require("./FluentProvider"), exports);
+
+var react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
+
+Object.defineProperty(exports, "useFluent", {
+  enumerable: true,
+  get: function () {
+    return react_shared_contexts_1.useFluent;
+  }
+});
+Object.defineProperty(exports, "useTheme", {
+  enumerable: true,
+  get: function () {
+    return react_shared_contexts_1.useTheme;
+  }
+});
 //# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":";;;AAAA,oDAA0B;AAC1B,2DAAiC","sourcesContent":["export * from './context';\nexport * from './FluentProvider';\n"]}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,IAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,WAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,uBAAA,CAAA,SAAA;AAAS;AAAT,CAAA;AAAW,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,UAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,uBAAA,CAAA,QAAA;AAAQ;AAAR,CAAA","sourceRoot":""}

package/package.json

@@ -1,13 +1,11 @@
 {
   "name": "@fluentui/react-provider",
-  "version": "9.0.0-alpha.8",
+  "version": "9.0.0-alpha.83",
   "description": "Fluent UI React provider component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
   "typings": "lib/index.d.ts",
-  "sideEffects": [
-    "lib/version.js"
-  ],
+  "sideEffects": false,
   "repository": {
     "type": "git",
     "url": "https://github.com/microsoft/fluentui"
@@ -15,30 +13,42 @@
   "license": "MIT",
   "scripts": {
     "build": "just-scripts build",
-    "bundle": "just-scripts bundle",
+    "bundle-size": "bundle-size measure",
+    "test": "jest",
     "clean": "just-scripts clean",
     "code-style": "just-scripts code-style",
     "just": "just-scripts",
     "lint": "just-scripts lint",
-    "start": "just-scripts dev:storybook",
-    "update-api": "just-scripts update-api"
+    "docs": "api-extractor run --config=config/api-extractor.local.json --local",
+    "build:local": "tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-provider/src && yarn docs",
+    "storybook": "start-storybook",
+    "start": "yarn storybook"
   },
   "devDependencies": {
-    "@fluentui/eslint-plugin": "^1.0.1",
+    "@fluentui/babel-make-styles": "9.0.0-alpha.54",
+    "@fluentui/eslint-plugin": "*",
+    "@fluentui/jest-serializer-make-styles": "9.0.0-alpha.47",
+    "@fluentui/react-conformance": "*",
+    "@fluentui/react-conformance-make-styles": "9.0.0-alpha.16",
     "@fluentui/scripts": "^1.0.0",
+    "@types/enzyme": "3.10.3",
+    "@types/enzyme-adapter-react-16": "1.0.3",
+    "@types/jest": "24.9.1",
     "@types/react": "16.9.42",
     "@types/react-dom": "16.9.10",
-    "@types/webpack-env": "1.16.0",
+    "enzyme": "~3.10.0",
+    "enzyme-adapter-react-16": "^1.15.0",
     "react": "16.8.6",
-    "react-app-polyfill": "~1.0.1",
-    "react-dom": "16.8.6"
+    "react-dom": "16.8.6",
+    "react-test-renderer": "^16.3.0"
   },
   "dependencies": {
-    "@fluentui/react-focus-management": "^9.0.0-alpha.6",
-    "@fluentui/react-theme": "^9.0.0-alpha.5",
-    "@fluentui/react-theme-provider": "^9.0.0-alpha.8",
-    "@fluentui/react-utilities": "^9.0.0-alpha.7",
-    "tslib": "^1.10.0"
+    "@fluentui/react-make-styles": "9.0.0-alpha.72",
+    "@fluentui/react-shared-contexts": "9.0.0-alpha.25",
+    "@fluentui/react-tabster": "9.0.0-alpha.66",
+    "@fluentui/react-theme": "9.0.0-alpha.23",
+    "@fluentui/react-utilities": "9.0.0-alpha.52",
+    "tslib": "^2.1.0"
   },
   "peerDependencies": {
     "@types/react": ">=16.8.0 <18.0.0",