@fluentui/react-text 0.0.0-nightly9edaf68d4420211116.1 → 0.0.0-nightly9fe22334a320220214.1

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

@@ -18,9 +18,9 @@ const useTextStyles_1 = /*#__PURE__*/require("./useTextStyles");
 
 
 exports.Text = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useText_1.useText(props, ref);
-  useTextStyles_1.useTextStyles(state);
-  return renderText_1.renderText(state); // Work around some small mismatches in inferred types which don't matter in practice
+  const state = useText_1.useText_unstable(props, ref);
+  useTextStyles_1.useTextStyles_unstable(state);
+  return renderText_1.renderText_unstable(state); // Work around some small mismatches in inferred types which don't matter in practice
 });
 exports.Text.displayName = 'Text';
 //# sourceMappingURL=Text.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,SAAA,gBAAA,OAAA,CAAA,WAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,IAAA,gBAAuC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAClF,QAAM,KAAK,GAAG,SAAA,CAAA,OAAA,CAAQ,KAAR,EAAe,GAAf,CAAd;AAEA,EAAA,eAAA,CAAA,aAAA,CAAc,KAAd;AAEA,SAAO,YAAA,CAAA,UAAA,CAAW,KAAX,CAAP,CALkF,CAMlF;AACD,CAPmD,CAAvC;AASb,OAAA,CAAA,IAAA,CAAK,WAAL,GAAmB,MAAnB","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,SAAA,gBAAA,OAAA,CAAA,WAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,IAAA,gBAAuC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAClF,QAAM,KAAK,GAAG,SAAA,CAAA,gBAAA,CAAiB,KAAjB,EAAwB,GAAxB,CAAd;AAEA,EAAA,eAAA,CAAA,sBAAA,CAAuB,KAAvB;AAEA,SAAO,YAAA,CAAA,mBAAA,CAAoB,KAApB,CAAP,CALkF,CAMlF;AACD,CAPmD,CAAvC;AASb,OAAA,CAAA,IAAA,CAAK,WAAL,GAAmB,MAAnB","sourceRoot":""}

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

@@ -1,11 +1,11 @@
-import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 /**
  * Text slots
  */
 export declare type TextSlots = {
-    root: IntrinsicShorthandProps<'span', 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'pre'>;
+    root: Slot<'span', 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'pre'>;
 };
-export declare type TextCommons = {
+declare type TextCommons = {
     /**
      * Wraps the text content on white spaces.
      *
@@ -75,3 +75,4 @@ export declare type TextProps = ComponentProps<TextSlots> & Partial<TextCommons>
  * State used in rendering Text
  */
 export declare type TextState = ComponentState<TextSlots> & TextCommons;
+export {};

package/lib-commonjs/components/Text/renderText.d.ts

@@ -2,4 +2,4 @@ import type { TextState } from './Text.types';
 /**
  * Render the final JSX of Text
  */
-export declare const renderText: (state: TextState) => JSX.Element;
+export declare const renderText_unstable: (state: TextState) => JSX.Element;

package/lib-commonjs/components/Text/renderText.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.renderText = void 0;
+exports.renderText_unstable = void 0;
 
 const React = /*#__PURE__*/require("react");
 
@@ -13,13 +13,14 @@ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
  */
 
 
-const renderText = state => {
+const renderText_unstable = state => {
   const {
     slots,
     slotProps
   } = react_utilities_1.getSlots(state);
-  return React.createElement(slots.root, Object.assign({}, slotProps.root));
+  return React.createElement(slots.root, { ...slotProps.root
+  });
 };
 
-exports.renderText = renderText;
+exports.renderText_unstable = renderText_unstable;
 //# sourceMappingURL=renderText.js.map

package/lib-commonjs/components/Text/renderText.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Text/renderText.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,UAAU,GAAI,KAAD,IAAqB;AAC7C,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAoB,KAApB,CAA7B;AAEA,SAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAAP;AACD,CAJM;;AAAM,OAAA,CAAA,UAAA,GAAU,UAAV","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/Text/renderText.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,mBAAmB,GAAI,KAAD,IAAqB;AACtD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAoB,KAApB,CAA7B;AAEA,SAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAAP;AACD,CAJM;;AAAM,OAAA,CAAA,mBAAA,GAAmB,mBAAnB","sourceRoot":""}

package/lib-commonjs/components/Text/useText.d.ts

@@ -3,10 +3,10 @@ import type { TextProps, TextState } from './Text.types';
 /**
  * Create the state required to render Text.
  *
- * The returned state can be modified with hooks such as useTextStyles,
- * before being passed to renderText.
+ * The returned state can be modified with hooks such as useTextStyles_unstable,
+ * before being passed to renderText_unstable.
  *
  * @param props - props from this instance of Text
  * @param ref - reference to root HTMLElement of Text
  */
-export declare const useText: (props: TextProps, ref: React.Ref<HTMLElement>) => TextState;
+export declare const useText_unstable: (props: TextProps, ref: React.Ref<HTMLElement>) => TextState;

package/lib-commonjs/components/Text/useText.js

@@ -3,21 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useText = void 0;
+exports.useText_unstable = void 0;
 
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 /**
  * Create the state required to render Text.
  *
- * The returned state can be modified with hooks such as useTextStyles,
- * before being passed to renderText.
+ * The returned state can be modified with hooks such as useTextStyles_unstable,
+ * before being passed to renderText_unstable.
  *
  * @param props - props from this instance of Text
  * @param ref - reference to root HTMLElement of Text
  */
 
 
-const useText = (props, ref) => {
+const useText_unstable = (props, ref) => {
   var _a;
 
   const {
@@ -56,5 +56,5 @@ const useText = (props, ref) => {
   return state;
 };
 
-exports.useText = useText;
+exports.useText_unstable = useText_unstable;
 //# sourceMappingURL=useText.js.map

package/lib-commonjs/components/Text/useText.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Text/useText.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,OAAO,GAAG,CAAC,KAAD,EAAmB,GAAnB,KAA6D;;;AAClF,QAAM;AAAE,IAAA,IAAF;AAAQ,IAAA,QAAR;AAAkB,IAAA,KAAlB;AAAyB,IAAA,MAAzB;AAAiC,IAAA,SAAjC;AAA4C,IAAA,aAA5C;AAA2D,IAAA,IAA3D;AAAiE,IAAA,IAAjE;AAAuE,IAAA,MAAvE;AAA+E,IAAA;AAA/E,MAAyF,KAA/F;AACA,QAAM,EAAE,GAAA,CAAA,EAAA,GAAG,KAAK,CAAC,EAAT,MAAW,IAAX,IAAW,EAAA,KAAA,KAAA,CAAX,GAAW,EAAX,GAAe,MAAvB;AAEA,QAAM,KAAK,GAAc;AACvB,IAAA,IAAI,EAAE,IAAI,KAAA,IAAJ,IAAA,IAAI,KAAA,KAAA,CAAJ,GAAA,IAAA,GAAQ,IADS;AAEvB,IAAA,QAAQ,EAAE,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAA,QAAA,GAAY,KAFC;AAGvB,IAAA,KAAK,EAAE,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAA,KAAA,GAAS,KAHO;AAIvB,IAAA,MAAM,EAAE,MAAM,KAAA,IAAN,IAAA,MAAM,KAAA,KAAA,CAAN,GAAA,MAAA,GAAU,KAJK;AAKvB,IAAA,SAAS,EAAE,SAAS,KAAA,IAAT,IAAA,SAAS,KAAA,KAAA,CAAT,GAAA,SAAA,GAAa,KALD;AAMvB,IAAA,aAAa,EAAE,aAAa,KAAA,IAAb,IAAA,aAAa,KAAA,KAAA,CAAb,GAAA,aAAA,GAAiB,KANT;AAOvB,IAAA,IAAI,EAAE,IAAI,KAAA,IAAJ,IAAA,IAAI,KAAA,KAAA,CAAJ,GAAA,IAAA,GAAQ,GAPS;AAQvB,IAAA,IAAI,EAAE,IAAI,KAAA,IAAJ,IAAA,IAAI,KAAA,KAAA,CAAJ,GAAA,IAAA,GAAQ,MARS;AASvB,IAAA,MAAM,EAAE,MAAM,KAAA,IAAN,IAAA,MAAM,KAAA,KAAA,CAAN,GAAA,MAAA,GAAU,SATK;AAUvB,IAAA,KAAK,EAAE,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAA,KAAA,GAAS,OAVO;AAYvB,IAAA,UAAU,EAAE;AAAE,MAAA,IAAI,EAAE;AAAR,KAZW;AAcvB,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,EAAtB,EAA0B;AAC9B,MAAA,GAD8B;AAE9B,SAAG,KAF2B;AAG9B,MAAA;AAH8B,KAA1B;AAdiB,GAAzB;AAqBA,SAAO,KAAP;AACD,CA1BM;;AAAM,OAAA,CAAA,OAAA,GAAO,OAAP","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/Text/useText.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,gBAAgB,GAAG,CAAC,KAAD,EAAmB,GAAnB,KAA6D;;;AAC3F,QAAM;AAAE,IAAA,IAAF;AAAQ,IAAA,QAAR;AAAkB,IAAA,KAAlB;AAAyB,IAAA,MAAzB;AAAiC,IAAA,SAAjC;AAA4C,IAAA,aAA5C;AAA2D,IAAA,IAA3D;AAAiE,IAAA,IAAjE;AAAuE,IAAA,MAAvE;AAA+E,IAAA;AAA/E,MAAyF,KAA/F;AACA,QAAM,EAAE,GAAG,CAAA,EAAA,GAAA,KAAK,CAAC,EAAN,MAAQ,IAAR,IAAQ,EAAA,KAAA,KAAA,CAAR,GAAQ,EAAR,GAAY,MAAvB;AAEA,QAAM,KAAK,GAAc;AACvB,IAAA,IAAI,EAAE,IAAI,KAAA,IAAJ,IAAA,IAAI,KAAA,KAAA,CAAJ,GAAA,IAAA,GAAQ,IADS;AAEvB,IAAA,QAAQ,EAAE,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAA,QAAA,GAAY,KAFC;AAGvB,IAAA,KAAK,EAAE,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAA,KAAA,GAAS,KAHO;AAIvB,IAAA,MAAM,EAAE,MAAM,KAAA,IAAN,IAAA,MAAM,KAAA,KAAA,CAAN,GAAA,MAAA,GAAU,KAJK;AAKvB,IAAA,SAAS,EAAE,SAAS,KAAA,IAAT,IAAA,SAAS,KAAA,KAAA,CAAT,GAAA,SAAA,GAAa,KALD;AAMvB,IAAA,aAAa,EAAE,aAAa,KAAA,IAAb,IAAA,aAAa,KAAA,KAAA,CAAb,GAAA,aAAA,GAAiB,KANT;AAOvB,IAAA,IAAI,EAAE,IAAI,KAAA,IAAJ,IAAA,IAAI,KAAA,KAAA,CAAJ,GAAA,IAAA,GAAQ,GAPS;AAQvB,IAAA,IAAI,EAAE,IAAI,KAAA,IAAJ,IAAA,IAAI,KAAA,KAAA,CAAJ,GAAA,IAAA,GAAQ,MARS;AASvB,IAAA,MAAM,EAAE,MAAM,KAAA,IAAN,IAAA,MAAM,KAAA,KAAA,CAAN,GAAA,MAAA,GAAU,SATK;AAUvB,IAAA,KAAK,EAAE,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAA,KAAA,GAAS,OAVO;AAYvB,IAAA,UAAU,EAAE;AAAE,MAAA,IAAI,EAAE;AAAR,KAZW;AAcvB,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,EAAtB,EAA0B;AAC9B,MAAA,GAD8B;AAE9B,SAAG,KAF2B;AAG9B,MAAA;AAH8B,KAA1B;AAdiB,GAAzB;AAqBA,SAAO,KAAP;AACD,CA1BM;;AAAM,OAAA,CAAA,gBAAA,GAAgB,gBAAhB","sourceRoot":""}

package/lib-commonjs/components/Text/useTextStyles.d.ts

@@ -3,4 +3,4 @@ export declare const textClassName = "fui-Text";
 /**
  * Apply styling to the Text slots based on the state
  */
-export declare const useTextStyles: (state: TextState) => TextState;
+export declare const useTextStyles_unstable: (state: TextState) => TextState;

package/lib-commonjs/components/Text/useTextStyles.js

@@ -3,16 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useTextStyles = exports.textClassName = void 0;
+exports.useTextStyles_unstable = exports.textClassName = 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.textClassName = 'fui-Text';
 /**
  * Styles for the root slot
  */
 
-const useStyles = /*#__PURE__*/react_make_styles_1.__styles({
+const useStyles = /*#__PURE__*/react_1.__styles({
   "root": {
     "Bahqtrf": "fk6fouc",
     "Be2twd7": "fkhj508",
@@ -21,12 +23,14 @@ const useStyles = /*#__PURE__*/react_make_styles_1.__styles({
     "fsow6f": "fpgzoln",
     "mc9l5x": "f1w7gpdv",
     "Huce71": "f6juhto",
-    "Bpg54ce": "f1gl81tg",
+    "B68tc82": "f1mtd64y",
+    "Bmxbyg5": "f1y7q3j9",
     "ygn44y": "f2jf649"
   },
   "nowrap": {
     "Huce71": "fz5stix",
-    "Bpg54ce": "f1a3p1vp"
+    "B68tc82": "f1p9o1ba",
+    "Bmxbyg5": "f1sil6mw"
   },
   "truncate": {
     "ygn44y": "f1cmbuwj"
@@ -38,13 +42,13 @@ const useStyles = /*#__PURE__*/react_make_styles_1.__styles({
     "B80ckks": "f1j4dglz"
   },
   "underline": {
-    "dwov6y": "fctto54"
+    "w71qe1": "f13mvf36"
   },
   "strikethrough": {
-    "dwov6y": "f1y2xhd0"
+    "w71qe1": "fv5q2k7"
   },
   "strikethroughUnderline": {
-    "dwov6y": "f13legbo"
+    "w71qe1": "f1drk4o6"
   },
   "base100": {
     "Be2twd7": "f13mqy1h",
@@ -104,18 +108,18 @@ const useStyles = /*#__PURE__*/react_make_styles_1.__styles({
     "fsow6f": "f1j59e10"
   }
 }, {
-  "d": [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fpgzoln{text-align:start;}", ".f1w7gpdv{display:inline;}", ".f6juhto{white-space:normal;}", ".f1gl81tg{overflow:visible;}", ".f2jf649{text-overflow:clip;}", ".fz5stix{white-space:nowrap;}", ".f1a3p1vp{overflow:hidden;}", ".f1cmbuwj{text-overflow:ellipsis;}", ".ftgm304{display:block;}", ".f1j4dglz{font-style:italic;}", ".fctto54{-webkit-text-decoration:underline;text-decoration:underline;}", ".f1y2xhd0{-webkit-text-decoration:line-through;text-decoration:line-through;}", ".f13legbo{-webkit-text-decoration:line-through underline;text-decoration:line-through underline;}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fcpl73t{line-height:var(--lineHeightBase100);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f106mvju{line-height:var(--lineHeightBase500);}", ".f1x0m3f5{font-size:var(--fontSizeBase600);}", ".fb86gi6{line-height:var(--lineHeightBase600);}", ".fojgt09{font-size:var(--fontSizeHero700);}", ".fcen8rp{line-height:var(--lineHeightHero700);}", ".fccw675{font-size:var(--fontSizeHero800);}", ".f1ebx5kk{line-height:var(--lineHeightHero800);}", ".f15afnhw{font-size:var(--fontSizeHero900);}", ".fr3w3wp{line-height:var(--lineHeightHero900);}", ".fpyltcb{font-size:var(--fontSizeHero1000);}", ".f1ivgwrt{line-height:var(--lineHeightHero1000);}", ".f1fedwem{font-family:var(--fontFamilyMonospace);}", ".f1uq0ln5{font-family:var(--fontFamilyNumeric);}", ".fdj6btp{font-weight:var(--fontWeightMedium);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f17mccla{text-align:center;}", ".f12ymhq5{text-align:end;}", ".f1j59e10{text-align:justify;}"]
+  "d": [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fpgzoln{text-align:start;}", ".f1w7gpdv{display:inline;}", ".f6juhto{white-space:normal;}", ".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".f2jf649{text-overflow:clip;}", ".fz5stix{white-space:nowrap;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f1cmbuwj{text-overflow:ellipsis;}", ".ftgm304{display:block;}", ".f1j4dglz{font-style:italic;}", ".f13mvf36{text-decoration-line:underline;}", ".fv5q2k7{text-decoration-line:line-through;}", ".f1drk4o6{text-decoration-line:line-through underline;}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fcpl73t{line-height:var(--lineHeightBase100);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f106mvju{line-height:var(--lineHeightBase500);}", ".f1x0m3f5{font-size:var(--fontSizeBase600);}", ".fb86gi6{line-height:var(--lineHeightBase600);}", ".fojgt09{font-size:var(--fontSizeHero700);}", ".fcen8rp{line-height:var(--lineHeightHero700);}", ".fccw675{font-size:var(--fontSizeHero800);}", ".f1ebx5kk{line-height:var(--lineHeightHero800);}", ".f15afnhw{font-size:var(--fontSizeHero900);}", ".fr3w3wp{line-height:var(--lineHeightHero900);}", ".fpyltcb{font-size:var(--fontSizeHero1000);}", ".f1ivgwrt{line-height:var(--lineHeightHero1000);}", ".f1fedwem{font-family:var(--fontFamilyMonospace);}", ".f1uq0ln5{font-family:var(--fontFamilyNumeric);}", ".fdj6btp{font-weight:var(--fontWeightMedium);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f17mccla{text-align:center;}", ".f12ymhq5{text-align:end;}", ".f1j59e10{text-align:justify;}"]
 });
 /**
  * Apply styling to the Text slots based on the state
  */
 
 
-const useTextStyles = state => {
+const useTextStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = react_make_styles_1.mergeClasses(exports.textClassName, styles.root, state.wrap === false && styles.nowrap, state.truncate && styles.truncate, state.block && styles.block, state.italic && styles.italic, state.underline && styles.underline, state.strikethrough && styles.strikethrough, state.underline && state.strikethrough && styles.strikethroughUnderline, state.size === 100 && styles.base100, state.size === 200 && styles.base200, state.size === 400 && styles.base400, state.size === 500 && styles.base500, state.size === 600 && styles.base600, state.size === 700 && styles.hero700, state.size === 800 && styles.hero800, state.size === 900 && styles.hero900, state.size === 1000 && styles.hero1000, state.font === 'monospace' && styles.monospace, state.font === 'numeric' && styles.numeric, state.weight === 'medium' && styles.weightMedium, state.weight === 'semibold' && styles.weightSemibold, state.align === 'center' && styles.alignCenter, state.align === 'end' && styles.alignEnd, state.align === 'justify' && styles.alignJustify, state.root.className);
+  state.root.className = react_1.mergeClasses(exports.textClassName, styles.root, state.wrap === false && styles.nowrap, state.truncate && styles.truncate, state.block && styles.block, state.italic && styles.italic, state.underline && styles.underline, state.strikethrough && styles.strikethrough, state.underline && state.strikethrough && styles.strikethroughUnderline, state.size === 100 && styles.base100, state.size === 200 && styles.base200, state.size === 400 && styles.base400, state.size === 500 && styles.base500, state.size === 600 && styles.base600, state.size === 700 && styles.hero700, state.size === 800 && styles.hero800, state.size === 900 && styles.hero900, state.size === 1000 && styles.hero1000, state.font === 'monospace' && styles.monospace, state.font === 'numeric' && styles.numeric, state.weight === 'medium' && styles.weightMedium, state.weight === 'semibold' && styles.weightSemibold, state.align === 'center' && styles.alignCenter, state.align === 'end' && styles.alignEnd, state.align === 'justify' && styles.alignJustify, state.root.className);
   return state;
 };
 
-exports.useTextStyles = useTextStyles;
+exports.useTextStyles_unstable = useTextStyles_unstable;
 //# sourceMappingURL=useTextStyles.js.map

package/lib-commonjs/components/Text/useTextStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Text/useTextStyles.ts"],"names":[],"mappings":"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","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/Text/useTextStyles.ts"],"names":[],"mappings":"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","sourceRoot":""}

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Title1 = exports.title1ClassName = 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.title1ClassName = 'fui-Title1';
  * 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 1 typography variant
  */

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Title1/Title1.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":["../../../src/components/Title1/Title1.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","sourceRoot":""}

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":["../../../src/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","sourceRoot":""}

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":["../../../src/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","sourceRoot":""}

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":["../../src/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","sourceRoot":""}

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":["../../src/typographyStyles/typographyStyles.ts"],"names":[],"mappings":"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","sourceRoot":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-text",
-  "version": "0.0.0-nightly9edaf68d4420211116.1",
+  "version": "0.0.0-nightly9fe22334a320220214.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-nightly9edaf68d4420211116.1",
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/jest-serializer-make-styles": "0.0.0-nightly9edaf68d4420211116.1",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-make-styles": "0.0.0-nightly9edaf68d4420211116.1",
+    "@fluentui/react-conformance-griffel": "0.0.0-nightly9fe22334a320220214.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-nightly9edaf68d4420211116.1",
-    "@fluentui/react-utilities": "0.0.0-nightly9edaf68d4420211116.1",
+    "@griffel/react": "1.0.0",
+    "@fluentui/react-utilities": "0.0.0-nightly9fe22334a320220214.1",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {

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":""}