@fluentui/react-provider 0.0.0-nightly627ad67f1120211109.1 → 0.0.0-nightly6faffd280a20220221.1

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/FluentProvider/useFluentProviderContextValues.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGA,SAAgB,8BAAhB,CAA+C,KAA/C,EAAyE;AACvE,QAAM;AAAE,IAAA,IAAF;AAAQ,IAAA,GAAR;AAAa,IAAA,cAAb;AAA6B,IAAA;AAA7B,MAAuC,KAA7C;AAEA,QAAM,QAAQ,GAAG,KAAK,CAAC,OAAN,CAAc,OAAO;AAAE,IAAA,GAAF;AAAO,IAAA;AAAP,GAAP,CAAd,EAA+C,CAAC,GAAD,EAAM,cAAN,CAA/C,CAAjB,CAHuE,CAIvE;;AACA,QAAM,OAAO,GAAG,iBAAA,CAAA,QAAA,CAAS,EAAT,CAAhB;AAEA,SAAO;AACL,IAAA,QADK;AAEL,IAAA,OAFK;AAGL,IAAA,KAHK;AAIL,IAAA,cAAc,EAAE,IAAI,CAAC;AAJhB,GAAP;AAMD;;AAbD,OAAA,CAAA,8BAAA,GAAA,8BAAA","sourceRoot":""}
+{"version":3,"sources":["components/FluentProvider/useFluentProviderContextValues.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGA,SAAgB,uCAAhB,CAAwD,KAAxD,EAAkF;AAChF,QAAM;AAAE,IAAA,IAAF;AAAQ,IAAA,GAAR;AAAa,IAAA,cAAb;AAA6B,IAAA;AAA7B,MAAuC,KAA7C;AAEA,QAAM,QAAQ,GAAG,KAAK,CAAC,OAAN,CAAc,OAAO;AAAE,IAAA,GAAF;AAAO,IAAA;AAAP,GAAP,CAAd,EAA+C,CAAC,GAAD,EAAM,cAAN,CAA/C,CAAjB,CAHgF,CAIhF;;AACA,QAAM,OAAO,GAAG,iBAAA,CAAA,QAAA,CAAS,EAAT,CAAhB;AAEA,SAAO;AACL,IAAA,QADK;AAEL,IAAA,aAAa,EAAE,GAFV;AAGL,IAAA,OAHK;AAIL,IAAA,KAJK;AAKL,IAAA,cAAc,EAAE,IAAI,CAAC;AALhB,GAAP;AAOD;;AAdD,OAAA,CAAA,uCAAA,GAAA,uCAAA","sourcesContent":["import { useConst } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type { FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\nexport function useFluentProviderContextValues_unstable(state: FluentProviderState): FluentProviderContextValues {\n  const { root, dir, targetDocument, theme } = 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 = useConst({});\n\n  return {\n    provider,\n    textDirection: dir,\n    tooltip,\n    theme,\n    themeClassName: root.className!,\n  };\n}\n"],"sourceRoot":"../src/"}

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

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

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

@@ -3,13 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useFluentProviderStyles = exports.fluentProviderClassName = void 0;
+exports.useFluentProviderStyles_unstable = exports.fluentProviderClassName = void 0;
 
-const react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
+const react_1 = /*#__PURE__*/require("@griffel/react");
+
+const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
 
 exports.fluentProviderClassName = 'fui-FluentProvider';
 
-const useStyles = /*#__PURE__*/react_make_styles_1.__styles({
+const useStyles = /*#__PURE__*/react_1.__styles({
   "root": {
     "sj55zd": "f19n0e5",
     "De3pzq": "fxugw4r",
@@ -23,11 +25,11 @@ const useStyles = /*#__PURE__*/react_make_styles_1.__styles({
 /** Applies style classnames to slots */
 
 
-const useFluentProviderStyles = state => {
+const useFluentProviderStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = react_make_styles_1.mergeClasses(exports.fluentProviderClassName, state.themeClassName, styles.root, state.root.className);
+  state.root.className = react_1.mergeClasses(exports.fluentProviderClassName, state.themeClassName, styles.root, state.root.className);
   return state;
 };
 
-exports.useFluentProviderStyles = useFluentProviderStyles;
+exports.useFluentProviderStyles_unstable = useFluentProviderStyles_unstable;
 //# sourceMappingURL=useFluentProviderStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/FluentProvider/useFluentProviderStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAGa,OAAA,CAAA,uBAAA,GAA0B,oBAA1B;;AAEb,MAAM,SAAS,gBAAG,mBAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAUA;;;AACO,MAAM,uBAAuB,GAAI,KAAD,IAA+B;AACpE,QAAM,MAAM,GAAG,SAAS,EAAxB;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,mBAAA,CAAA,YAAA,CAAa,OAAA,CAAA,uBAAb,EAAsC,KAAK,CAAC,cAA5C,EAA4D,MAAM,CAAC,IAAnE,EAAyE,KAAK,CAAC,IAAN,CAAW,SAApF,CAAvB;AAEA,SAAO,KAAP;AACD,CANM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourceRoot":""}
+{"version":3,"sources":["components/FluentProvider/useFluentProviderStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAGa,OAAA,CAAA,uBAAA,GAA0B,oBAA1B;;AAEb,MAAM,SAAS,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAUA;;;AACO,MAAM,gCAAgC,GAAI,KAAD,IAA+B;AAC7E,QAAM,MAAM,GAAG,SAAS,EAAxB;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,uBAAb,EAAsC,KAAK,CAAC,cAA5C,EAA4D,MAAM,CAAC,IAAnE,EAAyE,KAAK,CAAC,IAAN,CAAW,SAApF,CAAvB;AAEA,SAAO,KAAP;AACD,CANM;;AAAM,OAAA,CAAA,gCAAA,GAAgC,gCAAhC","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { FluentProviderState } from './FluentProvider.types';\n\nexport const fluentProviderClassName = 'fui-FluentProvider';\n\nconst useStyles = makeStyles({\n  root: {\n    color: tokens.colorNeutralForeground1,\n    backgroundColor: tokens.colorNeutralBackground1,\n    fontFamily: tokens.fontFamilyBase,\n    fontSize: tokens.fontSizeBase300,\n    fontWeight: tokens.fontWeightRegular,\n  },\n});\n\n/** Applies style classnames to slots */\nexport const useFluentProviderStyles_unstable = (state: FluentProviderState) => {\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(fluentProviderClassName, state.themeClassName, styles.root, state.root.className);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

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

@@ -7,8 +7,6 @@ exports.useThemeStyleTag = void 0;
 
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 
-const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
-
 const React = /*#__PURE__*/require("react");
 
 const useFluentProviderStyles_1 = /*#__PURE__*/require("./useFluentProviderStyles");
@@ -36,11 +34,10 @@ const useThemeStyleTag = options => {
     return tag;
   }, [styleTagId, targetDocument]);
   const cssRule = React.useMemo(() => {
-    const cssVars = react_theme_1.themeToCSSVariables(theme);
-    const cssVarsAsString = Object.keys(cssVars).reduce((cssVarRule, cssVar) => {
-      cssVarRule += `${cssVar}: ${cssVars[cssVar]}; `;
+    const cssVarsAsString = theme ? Object.keys(theme).reduce((cssVarRule, cssVar) => {
+      cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;
       return cssVarRule;
-    }, ''); // result: .fluent-provider1 { --css-var: '#fff' }
+    }, '') : ''; // result: .fluent-provider1 { --css-var: '#fff' }
 
     return `.${styleTagId} { ${cssVarsAsString} }`;
   }, [theme, styleTagId]);
@@ -59,11 +56,8 @@ const useThemeStyleTag = options => {
 
   React.useEffect(() => {
     return () => {
-      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.remove();
       }
     };
   }, [styleTag]);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/FluentProvider/useThemeStyleTag.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;;;AAIG;;;AACI,MAAM,gBAAgB,GAAI,OAAD,IAAmE;AACjG,QAAM;AAAE,IAAA,cAAF;AAAkB,IAAA;AAAlB,MAA4B,OAAlC;AAEA,QAAM,UAAU,GAAG,iBAAA,CAAA,KAAA,CAAM,yBAAA,CAAA,uBAAN,CAAnB;AACA,QAAM,QAAQ,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;AAClC,QAAI,CAAC,cAAL,EAAqB;AACnB,aAAO,IAAP;AACD;;AAED,UAAM,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,QAAM,OAAO,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;AACjC,UAAM,OAAO,GAAG,aAAA,CAAA,mBAAA,CAAoB,KAApB,CAAhB;AACA,UAAM,eAAe,GAAG,MAAM,CAAC,IAAP,CAAY,OAAZ,EAAqB,MAArB,CAA4B,CAAC,UAAD,EAAa,MAAb,KAAuB;AACzE,MAAA,UAAU,IAAI,GAAG,MAAM,KAAK,OAAO,CAAC,MAAD,CAAQ,IAA3C;AACA,aAAO,UAAP;AACD,KAHuB,EAGrB,EAHqB,CAAxB,CAFiC,CAOjC;;AACA,WAAO,IAAI,UAAU,MAAM,eAAe,IAA1C;AACD,GATe,EASb,CAAC,KAAD,EAAQ,UAAR,CATa,CAAhB;AAUA,QAAM,eAAe,GAAG,iBAAA,CAAA,WAAA,CAAY,OAAZ,CAAxB;;AAEA,MAAI,QAAQ,IAAI,eAAe,KAAK,OAApC,EAA6C;AAC3C,UAAM,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,GAnCgG,CAqCjG;;;AACA,EAAA,KAAK,CAAC,SAAN,CAAgB,MAAK;AACnB,WAAO,MAAK;;;AACV,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":""}
+{"version":3,"sources":["components/FluentProvider/useThemeStyleTag.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;;;AAIG;;;AACI,MAAM,gBAAgB,GAAI,OAAD,IAAmE;AACjG,QAAM;AAAE,IAAA,cAAF;AAAkB,IAAA;AAAlB,MAA4B,OAAlC;AAEA,QAAM,UAAU,GAAG,iBAAA,CAAA,KAAA,CAAM,yBAAA,CAAA,uBAAN,CAAnB;AACA,QAAM,QAAQ,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;AAClC,QAAI,CAAC,cAAL,EAAqB;AACnB,aAAO,IAAP;AACD;;AAED,UAAM,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,QAAM,OAAO,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;AACjC,UAAM,eAAe,GAAG,KAAK,GACxB,MAAM,CAAC,IAAP,CAAY,KAAZ,EAA8C,MAA9C,CAAqD,CAAC,UAAD,EAAa,MAAb,KAAuB;AAC3E,MAAA,UAAU,IAAI,KAAK,MAAM,KAAK,KAAK,CAAC,MAAD,CAAQ,IAA3C;AACA,aAAO,UAAP;AACD,KAHA,EAGE,EAHF,CADwB,GAKzB,EALJ,CADiC,CAQjC;;AACA,WAAO,IAAI,UAAU,MAAM,eAAe,IAA1C;AACD,GAVe,EAUb,CAAC,KAAD,EAAQ,UAAR,CAVa,CAAhB;AAWA,QAAM,eAAe,GAAG,iBAAA,CAAA,WAAA,CAAY,OAAZ,CAAxB;;AAEA,MAAI,QAAQ,IAAI,eAAe,KAAK,OAApC,EAA6C;AAC3C,UAAM,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,GApCgG,CAsCjG;;;AACA,EAAA,KAAK,CAAC,SAAN,CAAgB,MAAK;AACnB,WAAO,MAAK;AACV,UAAI,QAAJ,EAAc;AACZ,QAAA,QAAQ,CAAC,MAAT;AACD;AACF,KAJD;AAKD,GAND,EAMG,CAAC,QAAD,CANH;AAQA,SAAO,UAAP;AACD,CAhDM;;AAAM,OAAA,CAAA,gBAAA,GAAgB,gBAAhB","sourcesContent":["import { useId, usePrevious } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type { FluentProviderState } from './FluentProvider.types';\nimport { fluentProviderClassName } from './useFluentProviderStyles';\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 *\n * @returns CSS class to apply the rule\n */\nexport const useThemeStyleTag = (options: Pick<FluentProviderState, 'theme' | 'targetDocument'>) => {\n  const { targetDocument, theme } = options;\n\n  const styleTagId = useId(fluentProviderClassName);\n  const styleTag = React.useMemo(() => {\n    if (!targetDocument) {\n      return null;\n    }\n\n    const tag = targetDocument.createElement('style');\n    tag.setAttribute('id', styleTagId);\n    targetDocument.head.appendChild(tag);\n    return tag;\n  }, [styleTagId, targetDocument]);\n\n  const cssRule = React.useMemo(() => {\n    const cssVarsAsString = theme\n      ? (Object.keys(theme) as (keyof typeof theme)[]).reduce((cssVarRule, cssVar) => {\n          cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;\n          return cssVarRule;\n        }, '')\n      : '';\n\n    // result: .fluent-provider1 { --css-var: '#fff' }\n    return `.${styleTagId} { ${cssVarsAsString} }`;\n  }, [theme, styleTagId]);\n  const previousCssRule = usePrevious(cssRule);\n\n  if (styleTag && previousCssRule !== cssRule) {\n    const sheet = styleTag.sheet as CSSStyleSheet;\n\n    if (sheet.cssRules.length > 0) {\n      sheet.deleteRule(0);\n    }\n\n    sheet.insertRule(cssRule, 0);\n  }\n\n  // Removes the style tag from the targetDocument on unmount or change\n  React.useEffect(() => {\n    return () => {\n      if (styleTag) {\n        styleTag.remove();\n      }\n    };\n  }, [styleTag]);\n\n  return styleTagId;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"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":""}
+{"version":3,"sources":["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","sourcesContent":["export * from './FluentProvider';\nexport { useFluent, useTheme } from '@fluentui/react-shared-contexts';\n"],"sourceRoot":"../src/"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-provider",
-  "version": "0.0.0-nightly627ad67f1120211109.1",
+  "version": "0.0.0-nightly6faffd280a20220221.1",
   "description": "Fluent UI React provider component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -14,28 +14,27 @@
   "scripts": {
     "build": "just-scripts build",
     "bundle-size": "bundle-size measure",
-    "test": "jest",
+    "test": "jest --passWithNoTests",
     "clean": "just-scripts clean",
     "code-style": "just-scripts code-style",
     "just": "just-scripts",
     "lint": "just-scripts lint",
     "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"
+    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-provider/src && yarn docs",
+    "storybook": "node ../../scripts/storybook/runner",
+    "start": "yarn storybook",
+    "type-check": "tsc -b tsconfig.json"
   },
   "devDependencies": {
-    "@fluentui/babel-make-styles": "0.0.0-nightly627ad67f1120211109.1",
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/jest-serializer-make-styles": "0.0.0-nightly627ad67f1120211109.1",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-make-styles": "0.0.0-nightly627ad67f1120211109.1",
+    "@fluentui/react-conformance-griffel": "0.0.0-nightly6faffd280a20220221.1",
     "@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/react-test-renderer": "^16.0.0",
     "enzyme": "~3.10.0",
     "enzyme-adapter-react-16": "^1.15.0",
     "react": "16.8.6",
@@ -43,11 +42,11 @@
     "react-test-renderer": "^16.3.0"
   },
   "dependencies": {
-    "@fluentui/react-make-styles": "0.0.0-nightly627ad67f1120211109.1",
-    "@fluentui/react-shared-contexts": "0.0.0-nightly627ad67f1120211109.1",
-    "@fluentui/react-tabster": "0.0.0-nightly627ad67f1120211109.1",
-    "@fluentui/react-theme": "0.0.0-nightly627ad67f1120211109.1",
-    "@fluentui/react-utilities": "0.0.0-nightly627ad67f1120211109.1",
+    "@griffel/react": "1.0.0",
+    "@fluentui/react-shared-contexts": "0.0.0-nightly6faffd280a20220221.1",
+    "@fluentui/react-tabster": "0.0.0-nightly6faffd280a20220221.1",
+    "@fluentui/react-theme": "0.0.0-nightly6faffd280a20220221.1",
+    "@fluentui/react-utilities": "0.0.0-nightly6faffd280a20220221.1",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {
@@ -57,7 +56,6 @@
     "react-dom": ">=16.8.0 <18.0.0"
   },
   "beachball": {
-    "tag": "beta",
     "disallowedChangeTypes": [
       "major",
       "minor",

package/lib/common/isConformant.d.ts

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

package/lib/common/isConformant.js

@@ -1,12 +0,0 @@
-import { isConformant as baseIsConformant } from '@fluentui/react-conformance';
-import makeStylesTests from '@fluentui/react-conformance-make-styles';
-export function isConformant(testInfo) {
-  const defaultOptions = {
-    disabledTests: ['has-docblock'],
-    asPropHandlesRef: true,
-    componentPath: module.parent.filename.replace('.test', ''),
-    extraTests: makeStylesTests
-  };
-  baseIsConformant(defaultOptions, testInfo);
-}
-//# sourceMappingURL=isConformant.js.map

package/lib/common/isConformant.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/common/isConformant.ts"],"names":[],"mappings":"AAAA,SAAS,YAAY,IAAI,gBAAzB,QAAiD,6BAAjD;AAEA,OAAO,eAAP,MAA4B,yCAA5B;AAEA,OAAM,SAAU,YAAV,CACJ,QADI,EACqF;AAEzF,QAAM,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;AAJ+C,GAA7D;AAOA,EAAA,gBAAgB,CAAC,cAAD,EAAiB,QAAjB,CAAhB;AACD","sourceRoot":""}

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

@@ -1,4 +0,0 @@
-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

@@ -1,23 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.isConformant = void 0;
-
-const react_conformance_1 = /*#__PURE__*/require("@fluentui/react-conformance");
-
-const react_conformance_make_styles_1 = /*#__PURE__*/require("@fluentui/react-conformance-make-styles");
-
-function isConformant(testInfo) {
-  const 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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/common/isConformant.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAEA,MAAA,+BAAA,gBAAA,OAAA,CAAA,yCAAA,CAAA;;AAEA,SAAgB,YAAhB,CACE,QADF,EAC2F;AAEzF,QAAM,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":""}