@fluentui/react-text 9.0.0-nightly.b5b7401007.0 → 9.0.0-rc.3

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

@@ -3,37 +3,37 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useText = void 0;
+exports.useText_unstable = void 0;
 
-var tslib_1 = /*#__PURE__*/require("tslib");
-
-var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+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
  */
 
 
-var useText = function (props, ref) {
+const useText_unstable = (props, ref) => {
   var _a;
 
-  var wrap = props.wrap,
-      truncate = props.truncate,
-      block = props.block,
-      italic = props.italic,
-      underline = props.underline,
-      strikethrough = props.strikethrough,
-      size = props.size,
-      font = props.font,
-      weight = props.weight,
-      align = props.align;
-  var as = (_a = props.as) !== null && _a !== void 0 ? _a : 'span';
-  var state = {
+  const {
+    wrap,
+    truncate,
+    block,
+    italic,
+    underline,
+    strikethrough,
+    size,
+    font,
+    weight,
+    align
+  } = props;
+  const as = (_a = props.as) !== null && _a !== void 0 ? _a : 'span';
+  const state = {
     wrap: wrap !== null && wrap !== void 0 ? wrap : true,
     truncate: truncate !== null && truncate !== void 0 ? truncate : false,
     block: block !== null && block !== void 0 ? block : false,
@@ -47,14 +47,14 @@ var useText = function (props, ref) {
     components: {
       root: 'span'
     },
-    root: react_utilities_1.getNativeElementProps(as, tslib_1.__assign(tslib_1.__assign({
-      ref: ref
-    }, props), {
-      as: as
-    }))
+    root: react_utilities_1.getNativeElementProps(as, {
+      ref,
+      ...props,
+      as
+    })
   };
   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,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,IAAM,OAAO,GAAG,UAAC,KAAD,EAAmB,GAAnB,EAA8C;;;AAC3D,MAAA,IAAI,GAAmF,KAAK,CAAxF,IAAJ;AAAA,MAAM,QAAQ,GAAyE,KAAK,CAA9E,QAAd;AAAA,MAAgB,KAAK,GAAkE,KAAK,CAAvE,KAArB;AAAA,MAAuB,MAAM,GAA0D,KAAK,CAA/D,MAA7B;AAAA,MAA+B,SAAS,GAA+C,KAAK,CAApD,SAAxC;AAAA,MAA0C,aAAa,GAAgC,KAAK,CAArC,aAAvD;AAAA,MAAyD,IAAI,GAA0B,KAAK,CAA/B,IAA7D;AAAA,MAA+D,IAAI,GAAoB,KAAK,CAAzB,IAAnE;AAAA,MAAqE,MAAM,GAAY,KAAK,CAAjB,MAA3E;AAAA,MAA6E,KAAK,GAAK,KAAK,CAAV,KAAlF;AACR,MAAM,EAAE,GAAA,CAAA,EAAA,GAAG,KAAK,CAAC,EAAT,MAAW,IAAX,IAAW,EAAA,KAAA,KAAA,CAAX,GAAW,EAAX,GAAe,MAAvB;AAEA,MAAM,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,EAAwB,OAAA,CAAA,QAAA,CAAA,OAAA,CAAA,QAAA,CAAA;AAC5B,MAAA,GAAG,EAAA;AADyB,KAAA,EAEzB,KAFyB,CAAA,EAEpB;AACR,MAAA,EAAE,EAAA;AADM,KAFoB,CAAxB;AAdiB,GAAzB;AAqBA,SAAO,KAAP;AACD,CA1BM;;AAAM,OAAA,CAAA,OAAA,GAAO,OAAP","sourceRoot":""}
+{"version":3,"sources":["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","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { TextProps, TextState } from './Text.types';\n\n/**\n * Create the state required to render Text.\n *\n * The returned state can be modified with hooks such as useTextStyles_unstable,\n * before being passed to renderText_unstable.\n *\n * @param props - props from this instance of Text\n * @param ref - reference to root HTMLElement of Text\n */\nexport const useText_unstable = (props: TextProps, ref: React.Ref<HTMLElement>): TextState => {\n  const { wrap, truncate, block, italic, underline, strikethrough, size, font, weight, align } = props;\n  const as = props.as ?? 'span';\n\n  const state: TextState = {\n    wrap: wrap ?? true,\n    truncate: truncate ?? false,\n    block: block ?? false,\n    italic: italic ?? false,\n    underline: underline ?? false,\n    strikethrough: strikethrough ?? false,\n    size: size ?? 300,\n    font: font ?? 'base',\n    weight: weight ?? 'regular',\n    align: align ?? 'start',\n\n    components: { root: 'span' },\n\n    root: getNativeElementProps(as, {\n      ref,\n      ...props,\n      as,\n    }),\n  };\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

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

@@ -1,5 +1,6 @@
 import type { TextState } from './Text.types';
+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,15 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useTextStyles = void 0;
+exports.useTextStyles_unstable = exports.textClassName = void 0;
 
-var 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
  */
 
-
-var useStyles = /*#__PURE__*/react_make_styles_1.__styles({
+const useStyles = /*#__PURE__*/react_1.__styles({
   "root": {
     "Bahqtrf": "fk6fouc",
     "Be2twd7": "fkhj508",
@@ -20,12 +23,14 @@ var 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"
@@ -37,13 +42,13 @@ var 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",
@@ -103,18 +108,18 @@ var 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
  */
 
 
-var useTextStyles = function (state) {
-  var styles = useStyles();
-  state.root.className = react_make_styles_1.mergeClasses(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);
+const useTextStyles_unstable = state => {
+  const styles = useStyles();
+  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":["components/Text/useTextStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TextState } from './Text.types';\n\nexport const textClassName = 'fui-Text';\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    fontFamily: tokens.fontFamilyBase,\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: tokens.lineHeightBase300,\n    fontWeight: tokens.fontWeightRegular,\n    textAlign: 'start',\n    display: 'inline',\n    whiteSpace: 'normal',\n    ...shorthands.overflow('visible'),\n    textOverflow: 'clip',\n  },\n  nowrap: {\n    whiteSpace: 'nowrap',\n    ...shorthands.overflow('hidden'),\n  },\n  truncate: {\n    textOverflow: 'ellipsis',\n  },\n  block: {\n    display: 'block',\n  },\n  italic: {\n    fontStyle: 'italic',\n  },\n  underline: {\n    textDecorationLine: 'underline',\n  },\n  strikethrough: {\n    textDecorationLine: 'line-through',\n  },\n  strikethroughUnderline: {\n    textDecorationLine: 'line-through underline',\n  },\n  base100: {\n    fontSize: tokens.fontSizeBase100,\n    lineHeight: tokens.lineHeightBase100,\n  },\n  base200: {\n    fontSize: tokens.fontSizeBase200,\n    lineHeight: tokens.lineHeightBase200,\n  },\n  base400: {\n    fontSize: tokens.fontSizeBase400,\n    lineHeight: tokens.lineHeightBase400,\n  },\n  base500: {\n    fontSize: tokens.fontSizeBase500,\n    lineHeight: tokens.lineHeightBase500,\n  },\n  base600: {\n    fontSize: tokens.fontSizeBase600,\n    lineHeight: tokens.lineHeightBase600,\n  },\n  hero700: {\n    fontSize: tokens.fontSizeHero700,\n    lineHeight: tokens.lineHeightHero700,\n  },\n  hero800: {\n    fontSize: tokens.fontSizeHero800,\n    lineHeight: tokens.lineHeightHero800,\n  },\n  hero900: {\n    fontSize: tokens.fontSizeHero900,\n    lineHeight: tokens.lineHeightHero900,\n  },\n  hero1000: {\n    fontSize: tokens.fontSizeHero1000,\n    lineHeight: tokens.lineHeightHero1000,\n  },\n  monospace: {\n    fontFamily: tokens.fontFamilyMonospace,\n  },\n  numeric: {\n    fontFamily: tokens.fontFamilyNumeric,\n  },\n  weightMedium: {\n    fontWeight: tokens.fontWeightMedium,\n  },\n  weightSemibold: {\n    fontWeight: tokens.fontWeightSemibold,\n  },\n  alignCenter: {\n    textAlign: 'center',\n  },\n  alignEnd: {\n    textAlign: 'end',\n  },\n  alignJustify: {\n    textAlign: 'justify',\n  },\n});\n\n/**\n * Apply styling to the Text slots based on the state\n */\nexport const useTextStyles_unstable = (state: TextState): TextState => {\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(\n    textClassName,\n    styles.root,\n    state.wrap === false && styles.nowrap,\n    state.truncate && styles.truncate,\n    state.block && styles.block,\n    state.italic && styles.italic,\n    state.underline && styles.underline,\n    state.strikethrough && styles.strikethrough,\n    state.underline && state.strikethrough && styles.strikethroughUnderline,\n    state.size === 100 && styles.base100,\n    state.size === 200 && styles.base200,\n    state.size === 400 && styles.base400,\n    state.size === 500 && styles.base500,\n    state.size === 600 && styles.base600,\n    state.size === 700 && styles.hero700,\n    state.size === 800 && styles.hero800,\n    state.size === 900 && styles.hero900,\n    state.size === 1000 && styles.hero1000,\n    state.font === 'monospace' && styles.monospace,\n    state.font === 'numeric' && styles.numeric,\n    state.weight === 'medium' && styles.weightMedium,\n    state.weight === 'semibold' && styles.weightSemibold,\n    state.align === 'center' && styles.alignCenter,\n    state.align === 'end' && styles.alignEnd,\n    state.align === 'justify' && styles.alignJustify,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

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

@@ -1,5 +1,6 @@
 import type { FunctionComponent } from 'react';
 import { TextWrapperProps } from '../wrapper';
+export declare const title1ClassName = "fui-Title1";
 /**
  * Text wrapper component for the Title 1 typography variant
  */

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

@@ -3,28 +3,28 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Title1 = void 0;
+exports.Title1 = exports.title1ClassName = void 0;
 
-var react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
+const react_1 = /*#__PURE__*/require("@griffel/react");
 
-var index_1 = /*#__PURE__*/require("../../typographyStyles/index");
+const index_1 = /*#__PURE__*/require("../../typographyStyles/index");
 
-var wrapper_1 = /*#__PURE__*/require("../wrapper");
+const wrapper_1 = /*#__PURE__*/require("../wrapper");
+
+exports.title1ClassName = 'fui-Title1';
 /**
  * Styles for the root slot
  */
 
-
-var useStyles = /*#__PURE__*/react_make_styles_1.__styles({
-  "root": {}
-}, {});
+const useStyles = /*#__PURE__*/react_1.__styles({}, {});
 /**
  * Text wrapper component for the Title 1 typography variant
  */
 
 
 exports.Title1 = /*#__PURE__*/wrapper_1.createWrapper({
-  useStyles: useStyles,
+  useStyles,
+  className: exports.title1ClassName,
   displayName: 'Title1'
 });
 //# sourceMappingURL=Title1.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Title1/Title1.tsx"],"names":[],"mappings":";;;;;;;AACA,IAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AACA,IAAA,OAAA,gBAAA,OAAA,CAAA,8BAAA,CAAA;;AACA,IAAA,SAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;AAEA;;AAEG;;;AACH,IAAM,SAAS,gBAAG,mBAAA,SAAA;AAAA;AAAA,MAAlB;AAIA;;AAEG;;;AACU,OAAA,CAAA,MAAA,gBAA8C,SAAA,CAAA,aAAA,CAAc;AAAE,EAAA,SAAS,EAAA,SAAX;AAAa,EAAA,WAAW,EAAE;AAA1B,CAAd,CAA9C","sourceRoot":""}
+{"version":3,"sources":["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","sourcesContent":["import type { FunctionComponent } from 'react';\nimport { makeStyles } from '@griffel/react';\nimport { typographyStyles } from '../../typographyStyles/index';\nimport { createWrapper, TextWrapperProps } from '../wrapper';\n\nexport const title1ClassName = 'fui-Title1';\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: typographyStyles.title1,\n});\n\n/**\n * Text wrapper component for the Title 1 typography variant\n */\nexport const Title1: FunctionComponent<TextWrapperProps> = createWrapper({\n  useStyles,\n  className: title1ClassName,\n  displayName: 'Title1',\n});\n"],"sourceRoot":"../src/"}

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const tslib_1 = /*#__PURE__*/require("tslib");
 
 tslib_1.__exportStar(require("./Title1"), exports);
 //# sourceMappingURL=index.js.map

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

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

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

@@ -1,5 +1,6 @@
 import type { FunctionComponent } from 'react';
 import { TextWrapperProps } from '../wrapper';
+export declare const title2ClassName = "fui-Title2";
 /**
  * Text wrapper component for the Title 2 typography variant
  */

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

@@ -3,28 +3,28 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Title2 = void 0;
+exports.Title2 = exports.title2ClassName = void 0;
 
-var react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
+const react_1 = /*#__PURE__*/require("@griffel/react");
 
-var index_1 = /*#__PURE__*/require("../../typographyStyles/index");
+const index_1 = /*#__PURE__*/require("../../typographyStyles/index");
 
-var wrapper_1 = /*#__PURE__*/require("../wrapper");
+const wrapper_1 = /*#__PURE__*/require("../wrapper");
+
+exports.title2ClassName = 'fui-Title2';
 /**
  * Styles for the root slot
  */
 
-
-var useStyles = /*#__PURE__*/react_make_styles_1.__styles({
-  "root": {}
-}, {});
+const useStyles = /*#__PURE__*/react_1.__styles({}, {});
 /**
  * Text wrapper component for the Title 2 typography variant
  */
 
 
 exports.Title2 = /*#__PURE__*/wrapper_1.createWrapper({
-  useStyles: useStyles,
+  useStyles,
+  className: exports.title2ClassName,
   displayName: 'Title2'
 });
 //# sourceMappingURL=Title2.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Title2/Title2.tsx"],"names":[],"mappings":";;;;;;;AACA,IAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AACA,IAAA,OAAA,gBAAA,OAAA,CAAA,8BAAA,CAAA;;AACA,IAAA,SAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;AAEA;;AAEG;;;AACH,IAAM,SAAS,gBAAG,mBAAA,SAAA;AAAA;AAAA,MAAlB;AAIA;;AAEG;;;AACU,OAAA,CAAA,MAAA,gBAA8C,SAAA,CAAA,aAAA,CAAc;AAAE,EAAA,SAAS,EAAA,SAAX;AAAa,EAAA,WAAW,EAAE;AAA1B,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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const tslib_1 = /*#__PURE__*/require("tslib");
 
 tslib_1.__exportStar(require("./Title2"), exports);
 //# sourceMappingURL=index.js.map

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.d.ts

@@ -1,5 +1,6 @@
 import type { FunctionComponent } from 'react';
 import { TextWrapperProps } from '../wrapper';
+export declare const title3ClassName = "fui-Title3";
 /**
  * Text wrapper component for the Title 3 typography variant
  */

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

@@ -3,28 +3,28 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Title3 = void 0;
+exports.Title3 = exports.title3ClassName = void 0;
 
-var react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
+const react_1 = /*#__PURE__*/require("@griffel/react");
 
-var index_1 = /*#__PURE__*/require("../../typographyStyles/index");
+const index_1 = /*#__PURE__*/require("../../typographyStyles/index");
 
-var wrapper_1 = /*#__PURE__*/require("../wrapper");
+const wrapper_1 = /*#__PURE__*/require("../wrapper");
+
+exports.title3ClassName = 'fui-Title3';
 /**
  * Styles for the root slot
  */
 
-
-var useStyles = /*#__PURE__*/react_make_styles_1.__styles({
-  "root": {}
-}, {});
+const useStyles = /*#__PURE__*/react_1.__styles({}, {});
 /**
  * Text wrapper component for the Title 3 typography variant
  */
 
 
 exports.Title3 = /*#__PURE__*/wrapper_1.createWrapper({
-  useStyles: useStyles,
+  useStyles,
+  className: exports.title3ClassName,
   displayName: 'Title3'
 });
 //# sourceMappingURL=Title3.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Title3/Title3.tsx"],"names":[],"mappings":";;;;;;;AACA,IAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AACA,IAAA,OAAA,gBAAA,OAAA,CAAA,8BAAA,CAAA;;AACA,IAAA,SAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;AAEA;;AAEG;;;AACH,IAAM,SAAS,gBAAG,mBAAA,SAAA;AAAA;AAAA,MAAlB;AAIA;;AAEG;;;AACU,OAAA,CAAA,MAAA,gBAA8C,SAAA,CAAA,aAAA,CAAc;AAAE,EAAA,SAAS,EAAA,SAAX;AAAa,EAAA,WAAW,EAAE;AAA1B,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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const tslib_1 = /*#__PURE__*/require("tslib");
 
 tslib_1.__exportStar(require("./Title3"), exports);
 //# sourceMappingURL=index.js.map

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.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import type { TextProps } from '../Text';
 export declare type TextWrapperProps = Omit<TextProps, 'font' | 'size'>;
 export declare function createWrapper(options: {
+    className: string;
     displayName: string;
     useStyles: () => Record<'root', string>;
 }): React.FunctionComponent<TextWrapperProps>;

package/lib-commonjs/components/wrapper.js

@@ -5,21 +5,24 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createWrapper = void 0;
 
-var React = /*#__PURE__*/require("react");
+const React = /*#__PURE__*/require("react");
 
-var react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
+const react_1 = /*#__PURE__*/require("@griffel/react");
 
-var Text_1 = /*#__PURE__*/require("../Text");
+const Text_1 = /*#__PURE__*/require("../Text");
 
 function createWrapper(options) {
-  var useStyles = options.useStyles,
-      displayName = options.displayName;
-  var Wrapper = React.forwardRef(function (props, ref) {
-    var styles = useStyles();
-    var state = Text_1.useText(props, ref);
-    Text_1.useTextStyles(state);
-    state.root.className = react_make_styles_1.mergeClasses(state.root.className, styles.root, props.className);
-    return Text_1.renderText(state);
+  const {
+    useStyles,
+    className,
+    displayName
+  } = options;
+  const Wrapper = React.forwardRef((props, ref) => {
+    const styles = useStyles();
+    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,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AACA,IAAA,MAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AAMA,SAAgB,aAAhB,CAA8B,OAA9B,EAGC;AACS,MAAA,SAAS,GAAkB,OAAO,CAAzB,SAAT;AAAA,MAAW,WAAW,GAAK,OAAO,CAAZ,WAAtB;AACR,MAAM,OAAO,GAA0C,KAAK,CAAC,UAAN,CAAiB,UAAC,KAAD,EAAQ,GAAR,EAAW;AACjF,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,QAAM,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,KAAK,CAAC,IAAN,CAAW,SAAxB,EAAmC,MAAM,CAAC,IAA1C,EAAgD,KAAK,CAAC,SAAtD,CAAvB;AAEA,WAAO,MAAA,CAAA,UAAA,CAAW,KAAX,CAAP;AACD,GATsD,CAAvD;AAUA,EAAA,OAAO,CAAC,WAAR,GAAsB,WAAtB;AAEA,SAAO,OAAP;AACD;;AAlBD,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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const tslib_1 = /*#__PURE__*/require("tslib");
 
 tslib_1.__exportStar(require("./Text"), exports);
 

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.typographyStyles = void 0;
 
-var typographyStyles = /*#__PURE__*/require("./typographyStyles");
+const typographyStyles = /*#__PURE__*/require("./typographyStyles");
 
 exports.typographyStyles = typographyStyles;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/typographyStyles/index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,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;