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

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Title2 = exports.title2ClassName = void 0;
 
-const react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
+const react_1 = /*#__PURE__*/require("@griffel/react");
 
 const index_1 = /*#__PURE__*/require("../../typographyStyles/index");
 
@@ -16,9 +16,7 @@ exports.title2ClassName = 'fui-Title2';
  * Styles for the root slot
  */
 
-const useStyles = /*#__PURE__*/react_make_styles_1.__styles({
-  "root": {}
-}, {});
+const useStyles = /*#__PURE__*/react_1.__styles({}, {});
 /**
  * Text wrapper component for the Title 2 typography variant
  */

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Title2/Title2.tsx"],"names":[],"mappings":";;;;;;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,8BAAA,CAAA;;AACA,MAAA,SAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AAEa,OAAA,CAAA,eAAA,GAAkB,YAAlB;AAEb;;AAEG;;AACH,MAAM,SAAS,gBAAG,mBAAA,SAAA;AAAA;AAAA,MAAlB;AAIA;;AAEG;;;AACU,OAAA,CAAA,MAAA,gBAA8C,SAAA,CAAA,aAAA,CAAc;AACvE,EAAA,SADuE;AAEvE,EAAA,SAAS,EAAE,OAAA,CAAA,eAF4D;AAGvE,EAAA,WAAW,EAAE;AAH0D,CAAd,CAA9C","sourceRoot":""}
+{"version":3,"sources":["components/Title2/Title2.tsx"],"names":[],"mappings":";;;;;;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,8BAAA,CAAA;;AACA,MAAA,SAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AAEa,OAAA,CAAA,eAAA,GAAkB,YAAlB;AAEb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA,QAAlB;AAIA;;AAEG;;;AACU,OAAA,CAAA,MAAA,gBAA8C,SAAA,CAAA,aAAA,CAAc;AACvE,EAAA,SADuE;AAEvE,EAAA,SAAS,EAAE,OAAA,CAAA,eAF4D;AAGvE,EAAA,WAAW,EAAE;AAH0D,CAAd,CAA9C","sourcesContent":["import type { FunctionComponent } from 'react';\nimport { makeStyles } from '@griffel/react';\nimport { typographyStyles } from '../../typographyStyles/index';\nimport { createWrapper, TextWrapperProps } from '../wrapper';\n\nexport const title2ClassName = 'fui-Title2';\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: typographyStyles.title2,\n});\n\n/**\n * Text wrapper component for the Title 2 typography variant\n */\nexport const Title2: FunctionComponent<TextWrapperProps> = createWrapper({\n  useStyles,\n  className: title2ClassName,\n  displayName: 'Title2',\n});\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Title2/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA","sourceRoot":""}
+{"version":3,"sources":["components/Title2/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Title2';\n"],"sourceRoot":"../src/"}

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Title3 = exports.title3ClassName = void 0;
 
-const react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
+const react_1 = /*#__PURE__*/require("@griffel/react");
 
 const index_1 = /*#__PURE__*/require("../../typographyStyles/index");
 
@@ -16,9 +16,7 @@ exports.title3ClassName = 'fui-Title3';
  * Styles for the root slot
  */
 
-const useStyles = /*#__PURE__*/react_make_styles_1.__styles({
-  "root": {}
-}, {});
+const useStyles = /*#__PURE__*/react_1.__styles({}, {});
 /**
  * Text wrapper component for the Title 3 typography variant
  */

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Title3/Title3.tsx"],"names":[],"mappings":";;;;;;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,8BAAA,CAAA;;AACA,MAAA,SAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AAEa,OAAA,CAAA,eAAA,GAAkB,YAAlB;AAEb;;AAEG;;AACH,MAAM,SAAS,gBAAG,mBAAA,SAAA;AAAA;AAAA,MAAlB;AAIA;;AAEG;;;AACU,OAAA,CAAA,MAAA,gBAA8C,SAAA,CAAA,aAAA,CAAc;AACvE,EAAA,SADuE;AAEvE,EAAA,SAAS,EAAE,OAAA,CAAA,eAF4D;AAGvE,EAAA,WAAW,EAAE;AAH0D,CAAd,CAA9C","sourceRoot":""}
+{"version":3,"sources":["components/Title3/Title3.tsx"],"names":[],"mappings":";;;;;;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,8BAAA,CAAA;;AACA,MAAA,SAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AAEa,OAAA,CAAA,eAAA,GAAkB,YAAlB;AAEb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA,QAAlB;AAIA;;AAEG;;;AACU,OAAA,CAAA,MAAA,gBAA8C,SAAA,CAAA,aAAA,CAAc;AACvE,EAAA,SADuE;AAEvE,EAAA,SAAS,EAAE,OAAA,CAAA,eAF4D;AAGvE,EAAA,WAAW,EAAE;AAH0D,CAAd,CAA9C","sourcesContent":["import type { FunctionComponent } from 'react';\nimport { makeStyles } from '@griffel/react';\nimport { typographyStyles } from '../../typographyStyles/index';\nimport { createWrapper, TextWrapperProps } from '../wrapper';\n\nexport const title3ClassName = 'fui-Title3';\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: typographyStyles.title3,\n});\n\n/**\n * Text wrapper component for the Title 3 typography variant\n */\nexport const Title3: FunctionComponent<TextWrapperProps> = createWrapper({\n  useStyles,\n  className: title3ClassName,\n  displayName: 'Title3',\n});\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Title3/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA","sourceRoot":""}
+{"version":3,"sources":["components/Title3/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Title3';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/wrapper.js

@@ -7,7 +7,7 @@ exports.createWrapper = void 0;
 
 const React = /*#__PURE__*/require("react");
 
-const react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
+const react_1 = /*#__PURE__*/require("@griffel/react");
 
 const Text_1 = /*#__PURE__*/require("../Text");
 
@@ -19,10 +19,10 @@ function createWrapper(options) {
   } = options;
   const Wrapper = React.forwardRef((props, ref) => {
     const styles = useStyles();
-    const state = Text_1.useText(props, ref);
-    Text_1.useTextStyles(state);
-    state.root.className = react_make_styles_1.mergeClasses(className, state.root.className, styles.root, props.className);
-    return Text_1.renderText(state);
+    const state = Text_1.useText_unstable(props, ref);
+    Text_1.useTextStyles_unstable(state);
+    state.root.className = react_1.mergeClasses(className, state.root.className, styles.root, props.className);
+    return Text_1.renderText_unstable(state);
   });
   Wrapper.displayName = displayName;
   return Wrapper;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/wrapper.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AACA,MAAA,MAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AAMA,SAAgB,aAAhB,CAA8B,OAA9B,EAIC;AACC,QAAM;AAAE,IAAA,SAAF;AAAa,IAAA,SAAb;AAAwB,IAAA;AAAxB,MAAwC,OAA9C;AACA,QAAM,OAAO,GAA0C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACrF,UAAM,MAAM,GAAG,SAAS,EAAxB;AACA,UAAM,KAAK,GAAG,MAAA,CAAA,OAAA,CAAQ,KAAR,EAA4B,GAA5B,CAAd;AAEA,IAAA,MAAA,CAAA,aAAA,CAAc,KAAd;AAEA,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,mBAAA,CAAA,YAAA,CAAa,SAAb,EAAwB,KAAK,CAAC,IAAN,CAAW,SAAnC,EAA8C,MAAM,CAAC,IAArD,EAA2D,KAAK,CAAC,SAAjE,CAAvB;AAEA,WAAO,MAAA,CAAA,UAAA,CAAW,KAAX,CAAP;AACD,GATsD,CAAvD;AAUA,EAAA,OAAO,CAAC,WAAR,GAAsB,WAAtB;AAEA,SAAO,OAAP;AACD;;AAnBD,OAAA,CAAA,aAAA,GAAA,aAAA","sourceRoot":""}
+{"version":3,"sources":["components/wrapper.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,MAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AAMA,SAAgB,aAAhB,CAA8B,OAA9B,EAIC;AACC,QAAM;AAAE,IAAA,SAAF;AAAa,IAAA,SAAb;AAAwB,IAAA;AAAxB,MAAwC,OAA9C;AACA,QAAM,OAAO,GAA0C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACrF,UAAM,MAAM,GAAG,SAAS,EAAxB;AACA,UAAM,KAAK,GAAG,MAAA,CAAA,gBAAA,CAAiB,KAAjB,EAAqC,GAArC,CAAd;AAEA,IAAA,MAAA,CAAA,sBAAA,CAAuB,KAAvB;AAEA,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,SAAb,EAAwB,KAAK,CAAC,IAAN,CAAW,SAAnC,EAA8C,MAAM,CAAC,IAArD,EAA2D,KAAK,CAAC,SAAjE,CAAvB;AAEA,WAAO,MAAA,CAAA,mBAAA,CAAoB,KAApB,CAAP;AACD,GATsD,CAAvD;AAUA,EAAA,OAAO,CAAC,WAAR,GAAsB,WAAtB;AAEA,SAAO,OAAP;AACD;;AAnBD,OAAA,CAAA,aAAA,GAAA,aAAA","sourcesContent":["import * as React from 'react';\nimport { mergeClasses } from '@griffel/react';\nimport { renderText_unstable, useText_unstable, useTextStyles_unstable } from '../Text';\nimport type { TextProps } from '../Text';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\nexport type TextWrapperProps = Omit<TextProps, 'font' | 'size'>;\n\nexport function createWrapper(options: {\n  className: string;\n  displayName: string;\n  useStyles: () => Record<'root', string>;\n}): React.FunctionComponent<TextWrapperProps> {\n  const { useStyles, className, displayName } = options;\n  const Wrapper: ForwardRefComponent<TextWrapperProps> = React.forwardRef((props, ref) => {\n    const styles = useStyles();\n    const state = useText_unstable(props as TextProps, ref);\n\n    useTextStyles_unstable(state);\n\n    state.root.className = mergeClasses(className, state.root.className, styles.root, props.className);\n\n    return renderText_unstable(state);\n  });\n  Wrapper.displayName = displayName;\n\n  return Wrapper;\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,QAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,WAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,QAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,WAAA,CAAA,EAAA,OAAA","sourceRoot":""}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,QAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,WAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,QAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,WAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Text';\nexport * from './Display';\nexport * from './LargeTitle';\nexport * from './Title1';\nexport * from './Title2';\nexport * from './Title3';\nexport * from './Headline';\nexport * from './Subheadline';\nexport * from './Body';\nexport * from './Caption';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/typographyStyles/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/typographyStyles/index.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,gBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACS,OAAA,CAAA,gBAAA,GAAA,gBAAA","sourceRoot":""}
+{"version":3,"sources":["typographyStyles/index.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,gBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACS,OAAA,CAAA,gBAAA,GAAA,gBAAA","sourcesContent":["import * as typographyStyles from './typographyStyles';\nexport { typographyStyles };\n"],"sourceRoot":"../src/"}

package/lib-commonjs/typographyStyles/typographyStyles.d.ts

@@ -1,14 +1,13 @@
-import type { MakeStylesStyleFunctionRule } from '@fluentui/make-styles';
-import type { Theme } from '@fluentui/react-theme';
+import type { GriffelStyle } from '@griffel/react';
 /**
  * Make-styles rules for the typography variants
  */
-export declare const caption: MakeStylesStyleFunctionRule<Theme>;
-export declare const body: MakeStylesStyleFunctionRule<Theme>;
-export declare const subheadline: MakeStylesStyleFunctionRule<Theme>;
-export declare const headline: MakeStylesStyleFunctionRule<Theme>;
-export declare const title3: MakeStylesStyleFunctionRule<Theme>;
-export declare const title2: MakeStylesStyleFunctionRule<Theme>;
-export declare const title1: MakeStylesStyleFunctionRule<Theme>;
-export declare const largeTitle: MakeStylesStyleFunctionRule<Theme>;
-export declare const display: MakeStylesStyleFunctionRule<Theme>;
+export declare const caption: GriffelStyle;
+export declare const body: GriffelStyle;
+export declare const subheadline: GriffelStyle;
+export declare const headline: GriffelStyle;
+export declare const title3: GriffelStyle;
+export declare const title2: GriffelStyle;
+export declare const title1: GriffelStyle;
+export declare const largeTitle: GriffelStyle;
+export declare const display: GriffelStyle;

package/lib-commonjs/typographyStyles/typographyStyles.js

@@ -4,88 +4,65 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.display = exports.largeTitle = exports.title1 = exports.title2 = exports.title3 = exports.headline = exports.subheadline = exports.body = exports.caption = void 0;
+
+const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
 /**
  * Make-styles rules for the typography variants
  */
 
-const caption = theme => ({
-  fontFamily: theme.fontFamilyBase,
-  fontSize: theme.fontSizeBase200,
-  lineHeight: theme.lineHeightBase200,
-  fontWeight: theme.fontWeightRegular
-});
-
-exports.caption = caption;
-
-const body = theme => ({
-  fontFamily: theme.fontFamilyBase,
-  fontSize: theme.fontSizeBase300,
-  lineHeight: theme.lineHeightBase300,
-  fontWeight: theme.fontWeightRegular
-});
-
-exports.body = body;
-
-const subheadline = theme => ({
-  fontFamily: theme.fontFamilyBase,
-  fontSize: theme.fontSizeBase400,
-  lineHeight: theme.lineHeightBase400,
-  fontWeight: theme.fontWeightSemibold
-});
-
-exports.subheadline = subheadline;
-
-const headline = theme => ({
-  fontFamily: theme.fontFamilyBase,
-  fontSize: theme.fontSizeBase500,
-  lineHeight: theme.lineHeightBase500,
-  fontWeight: theme.fontWeightSemibold
-});
-
-exports.headline = headline;
-
-const title3 = theme => ({
-  fontFamily: theme.fontFamilyBase,
-  fontSize: theme.fontSizeBase600,
-  lineHeight: theme.lineHeightBase600,
-  fontWeight: theme.fontWeightSemibold
-});
-
-exports.title3 = title3;
-
-const title2 = theme => ({
-  fontFamily: theme.fontFamilyBase,
-  fontSize: theme.fontSizeHero700,
-  lineHeight: theme.lineHeightHero700,
-  fontWeight: theme.fontWeightSemibold
-});
-
-exports.title2 = title2;
-
-const title1 = theme => ({
-  fontFamily: theme.fontFamilyBase,
-  fontSize: theme.fontSizeHero800,
-  lineHeight: theme.lineHeightHero800,
-  fontWeight: theme.fontWeightSemibold
-});
-
-exports.title1 = title1;
-
-const largeTitle = theme => ({
-  fontFamily: theme.fontFamilyBase,
-  fontSize: theme.fontSizeHero900,
-  lineHeight: theme.lineHeightHero900,
-  fontWeight: theme.fontWeightSemibold
-});
-
-exports.largeTitle = largeTitle;
-
-const display = theme => ({
-  fontFamily: theme.fontFamilyBase,
-  fontSize: theme.fontSizeHero1000,
-  lineHeight: theme.lineHeightHero1000,
-  fontWeight: theme.fontWeightSemibold
-});
 
-exports.display = display;
+exports.caption = {
+  fontFamily: react_theme_1.tokens.fontFamilyBase,
+  fontSize: react_theme_1.tokens.fontSizeBase200,
+  lineHeight: react_theme_1.tokens.lineHeightBase200,
+  fontWeight: react_theme_1.tokens.fontWeightRegular
+};
+exports.body = {
+  fontFamily: react_theme_1.tokens.fontFamilyBase,
+  fontSize: react_theme_1.tokens.fontSizeBase300,
+  lineHeight: react_theme_1.tokens.lineHeightBase300,
+  fontWeight: react_theme_1.tokens.fontWeightRegular
+};
+exports.subheadline = {
+  fontFamily: react_theme_1.tokens.fontFamilyBase,
+  fontSize: react_theme_1.tokens.fontSizeBase400,
+  lineHeight: react_theme_1.tokens.lineHeightBase400,
+  fontWeight: react_theme_1.tokens.fontWeightSemibold
+};
+exports.headline = {
+  fontFamily: react_theme_1.tokens.fontFamilyBase,
+  fontSize: react_theme_1.tokens.fontSizeBase500,
+  lineHeight: react_theme_1.tokens.lineHeightBase500,
+  fontWeight: react_theme_1.tokens.fontWeightSemibold
+};
+exports.title3 = {
+  fontFamily: react_theme_1.tokens.fontFamilyBase,
+  fontSize: react_theme_1.tokens.fontSizeBase600,
+  lineHeight: react_theme_1.tokens.lineHeightBase600,
+  fontWeight: react_theme_1.tokens.fontWeightSemibold
+};
+exports.title2 = {
+  fontFamily: react_theme_1.tokens.fontFamilyBase,
+  fontSize: react_theme_1.tokens.fontSizeHero700,
+  lineHeight: react_theme_1.tokens.lineHeightHero700,
+  fontWeight: react_theme_1.tokens.fontWeightSemibold
+};
+exports.title1 = {
+  fontFamily: react_theme_1.tokens.fontFamilyBase,
+  fontSize: react_theme_1.tokens.fontSizeHero800,
+  lineHeight: react_theme_1.tokens.lineHeightHero800,
+  fontWeight: react_theme_1.tokens.fontWeightSemibold
+};
+exports.largeTitle = {
+  fontFamily: react_theme_1.tokens.fontFamilyBase,
+  fontSize: react_theme_1.tokens.fontSizeHero900,
+  lineHeight: react_theme_1.tokens.lineHeightHero900,
+  fontWeight: react_theme_1.tokens.fontWeightSemibold
+};
+exports.display = {
+  fontFamily: react_theme_1.tokens.fontFamilyBase,
+  fontSize: react_theme_1.tokens.fontSizeHero1000,
+  lineHeight: react_theme_1.tokens.lineHeightHero1000,
+  fontWeight: react_theme_1.tokens.fontWeightSemibold
+};
 //# sourceMappingURL=typographyStyles.js.map

package/lib-commonjs/typographyStyles/typographyStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/typographyStyles/typographyStyles.ts"],"names":[],"mappings":"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","sourceRoot":""}
+{"version":3,"sources":["typographyStyles/typographyStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport type { GriffelStyle } from '@griffel/react';\n\n/**\n * Make-styles rules for the typography variants\n */\nexport const caption: GriffelStyle = {\n  fontFamily: tokens.fontFamilyBase,\n  fontSize: tokens.fontSizeBase200,\n  lineHeight: tokens.lineHeightBase200,\n  fontWeight: tokens.fontWeightRegular,\n};\nexport const body: GriffelStyle = {\n  fontFamily: tokens.fontFamilyBase,\n  fontSize: tokens.fontSizeBase300,\n  lineHeight: tokens.lineHeightBase300,\n  fontWeight: tokens.fontWeightRegular,\n};\nexport const subheadline: GriffelStyle = {\n  fontFamily: tokens.fontFamilyBase,\n  fontSize: tokens.fontSizeBase400,\n  lineHeight: tokens.lineHeightBase400,\n  fontWeight: tokens.fontWeightSemibold,\n};\nexport const headline: GriffelStyle = {\n  fontFamily: tokens.fontFamilyBase,\n  fontSize: tokens.fontSizeBase500,\n  lineHeight: tokens.lineHeightBase500,\n  fontWeight: tokens.fontWeightSemibold,\n};\nexport const title3: GriffelStyle = {\n  fontFamily: tokens.fontFamilyBase,\n  fontSize: tokens.fontSizeBase600,\n  lineHeight: tokens.lineHeightBase600,\n  fontWeight: tokens.fontWeightSemibold,\n};\nexport const title2: GriffelStyle = {\n  fontFamily: tokens.fontFamilyBase,\n  fontSize: tokens.fontSizeHero700,\n  lineHeight: tokens.lineHeightHero700,\n  fontWeight: tokens.fontWeightSemibold,\n};\nexport const title1: GriffelStyle = {\n  fontFamily: tokens.fontFamilyBase,\n  fontSize: tokens.fontSizeHero800,\n  lineHeight: tokens.lineHeightHero800,\n  fontWeight: tokens.fontWeightSemibold,\n};\nexport const largeTitle: GriffelStyle = {\n  fontFamily: tokens.fontFamilyBase,\n  fontSize: tokens.fontSizeHero900,\n  lineHeight: tokens.lineHeightHero900,\n  fontWeight: tokens.fontWeightSemibold,\n};\nexport const display: GriffelStyle = {\n  fontFamily: tokens.fontFamilyBase,\n  fontSize: tokens.fontSizeHero1000,\n  lineHeight: tokens.lineHeightHero1000,\n  fontWeight: tokens.fontWeightSemibold,\n};\n"],"sourceRoot":"../src/"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-text",
-  "version": "0.0.0-nightly627ad67f1120211109.1",
+  "version": "0.0.0-nightly6faffd280a20220221.1",
   "description": "Text is a typography and styling abstraction component that can be used to ensure the consistency of all text across your application.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -19,17 +19,16 @@
     "just": "just-scripts",
     "lint": "just-scripts lint",
     "start": "yarn storybook",
-    "test": "jest",
+    "test": "jest --passWithNoTests",
     "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/packages/react-text/src && yarn docs",
-    "storybook": "start-storybook"
+    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-text/src && yarn docs",
+    "storybook": "node ../../scripts/storybook/runner",
+    "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",
@@ -43,8 +42,8 @@
     "react-test-renderer": "^16.3.0"
   },
   "dependencies": {
-    "@fluentui/react-make-styles": "0.0.0-nightly627ad67f1120211109.1",
-    "@fluentui/react-utilities": "0.0.0-nightly627ad67f1120211109.1",
+    "@griffel/react": "1.0.0",
+    "@fluentui/react-utilities": "0.0.0-nightly6faffd280a20220221.1",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {
@@ -54,7 +53,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,16 +0,0 @@
-import { isConformant as baseIsConformant } from '@fluentui/react-conformance';
-import makeStylesTests from '@fluentui/react-conformance-make-styles';
-export function isConformant(testInfo) {
-  const defaultOptions = {
-    asPropHandlesRef: true,
-    componentPath: module.parent.filename.replace('.test', ''),
-    extraTests: makeStylesTests,
-    testOptions: {
-      'make-styles-overrides-win': {
-        callCount: 2
-      }
-    }
-  };
-  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,gBAAgB,EAAE,IADyC;AAE3D,IAAA,aAAa,EAAE,MAAO,CAAC,MAAR,CAAgB,QAAhB,CAAyB,OAAzB,CAAiC,OAAjC,EAA0C,EAA1C,CAF4C;AAG3D,IAAA,UAAU,EAAE,eAH+C;AAI3D,IAAA,WAAW,EAAE;AACX,mCAA6B;AAC3B,QAAA,SAAS,EAAE;AADgB;AADlB;AAJ8C,GAA7D;AAaA,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,27 +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 = {
-    asPropHandlesRef: true,
-    componentPath: module.parent.filename.replace('.test', ''),
-    extraTests: react_conformance_make_styles_1.default,
-    testOptions: {
-      'make-styles-overrides-win': {
-        callCount: 2
-      }
-    }
-  };
-  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,gBAAgB,EAAE,IADyC;AAE3D,IAAA,aAAa,EAAE,MAAO,CAAC,MAAR,CAAgB,QAAhB,CAAyB,OAAzB,CAAiC,OAAjC,EAA0C,EAA1C,CAF4C;AAG3D,IAAA,UAAU,EAAE,+BAAA,CAAA,OAH+C;AAI3D,IAAA,WAAW,EAAE;AACX,mCAA6B;AAC3B,QAAA,SAAS,EAAE;AADgB;AADlB;AAJ8C,GAA7D;AAaA,EAAA,mBAAA,CAAA,YAAA,CAAiB,cAAjB,EAAiC,QAAjC;AACD;;AAjBD,OAAA,CAAA,YAAA,GAAA,YAAA","sourceRoot":""}