@fluentui/react-text 9.0.0-nightly.f81b28ceb3.1 → 9.0.0-rc.4

package/lib/Title2.js.map

@@ -1 +1 @@
-{"version":3,"file":"Title2.js","sourceRoot":"","sources":["../src/Title2.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC"}
+{"version":3,"file":"Title2.js","sourceRoot":"../src/","sources":["Title2.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC","sourcesContent":["export * from './components/Title2/index';\n"]}

package/lib/Title3.js.map

@@ -1 +1 @@
-{"version":3,"file":"Title3.js","sourceRoot":"","sources":["../src/Title3.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC"}
+{"version":3,"file":"Title3.js","sourceRoot":"../src/","sources":["Title3.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC","sourcesContent":["export * from './components/Title3/index';\n"]}

package/lib/components/Body/Body.d.ts

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

package/lib/components/Body/Body.js

@@ -1,11 +1,12 @@
-import { __styles } from '@fluentui/react-make-styles';
+import { __styles } from '@griffel/react';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper } from '../wrapper';
+export const bodyClassName = 'fui-Body';
 /**
  * Styles for the root slot
  */
 
-var useStyles = /*#__PURE__*/__styles({
+const useStyles = /*#__PURE__*/__styles({
   "root": {
     "Bahqtrf": "fk6fouc",
     "Be2twd7": "fkhj508",
@@ -20,8 +21,9 @@ var useStyles = /*#__PURE__*/__styles({
  */
 
 
-export var Body = /*#__PURE__*/createWrapper({
-  useStyles: useStyles,
+export const Body = /*#__PURE__*/createWrapper({
+  useStyles,
+  className: bodyClassName,
   displayName: 'Body'
 });
 //# sourceMappingURL=Body.js.map

package/lib/components/Body/Body.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Body/Body.tsx"],"names":[],"mappings":"AACA,yBAA2B,6BAA3B;AACA,SAAS,gBAAT,QAAiC,8BAAjC;AACA,SAAS,aAAT,QAAgD,YAAhD;AAEA;;AAEG;;AACH,IAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAIA;;AAEG;;;AACH,OAAO,IAAM,IAAI,gBAAwC,aAAa,CAAC;AAAE,EAAA,SAAS,EAAA,SAAX;AAAa,EAAA,WAAW,EAAE;AAA1B,CAAD,CAA/D","sourceRoot":""}
+{"version":3,"sources":["components/Body/Body.tsx"],"names":[],"mappings":"AACA,yBAA2B,gBAA3B;AACA,SAAS,gBAAT,QAAiC,8BAAjC;AACA,SAAS,aAAT,QAAgD,YAAhD;AAEA,OAAO,MAAM,aAAa,GAAG,UAAtB;AAEP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAIA;;AAEG;;;AACH,OAAO,MAAM,IAAI,gBAAwC,aAAa,CAAC;AACrE,EAAA,SADqE;AAErE,EAAA,SAAS,EAAE,aAF0D;AAGrE,EAAA,WAAW,EAAE;AAHwD,CAAD,CAA/D","sourcesContent":["import type { FunctionComponent } from 'react';\nimport { makeStyles } from '@griffel/react';\nimport { typographyStyles } from '../../typographyStyles/index';\nimport { createWrapper, TextWrapperProps } from '../wrapper';\n\nexport const bodyClassName = 'fui-Body';\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: typographyStyles.body,\n});\n\n/**\n * Text wrapper component for the Body typography variant\n */\nexport const Body: FunctionComponent<TextWrapperProps> = createWrapper({\n  useStyles,\n  className: bodyClassName,\n  displayName: 'Body',\n});\n"],"sourceRoot":"../src/"}

package/lib/components/Body/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Body/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Body/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC","sourcesContent":["export * from './Body';\n"]}

package/lib/components/Caption/Caption.d.ts

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

package/lib/components/Caption/Caption.js

@@ -1,11 +1,12 @@
-import { __styles } from '@fluentui/react-make-styles';
+import { __styles } from '@griffel/react';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper } from '../wrapper';
+export const captionClassName = 'fui-Caption';
 /**
  * Styles for the root slot
  */
 
-var useStyles = /*#__PURE__*/__styles({
+const useStyles = /*#__PURE__*/__styles({
   "root": {
     "Bahqtrf": "fk6fouc",
     "Be2twd7": "fy9rknc",
@@ -20,8 +21,9 @@ var useStyles = /*#__PURE__*/__styles({
  */
 
 
-export var Caption = /*#__PURE__*/createWrapper({
-  useStyles: useStyles,
+export const Caption = /*#__PURE__*/createWrapper({
+  useStyles,
+  className: captionClassName,
   displayName: 'Caption'
 });
 //# sourceMappingURL=Caption.js.map

package/lib/components/Caption/Caption.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Caption/Caption.tsx"],"names":[],"mappings":"AACA,yBAA2B,6BAA3B;AACA,SAAS,gBAAT,QAAiC,8BAAjC;AACA,SAAS,aAAT,QAAgD,YAAhD;AAEA;;AAEG;;AACH,IAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAIA;;AAEG;;;AACH,OAAO,IAAM,OAAO,gBAAwC,aAAa,CAAC;AAAE,EAAA,SAAS,EAAA,SAAX;AAAa,EAAA,WAAW,EAAE;AAA1B,CAAD,CAAlE","sourceRoot":""}
+{"version":3,"sources":["components/Caption/Caption.tsx"],"names":[],"mappings":"AACA,yBAA2B,gBAA3B;AACA,SAAS,gBAAT,QAAiC,8BAAjC;AACA,SAAS,aAAT,QAAgD,YAAhD;AAEA,OAAO,MAAM,gBAAgB,GAAG,aAAzB;AAEP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAIA;;AAEG;;;AACH,OAAO,MAAM,OAAO,gBAAwC,aAAa,CAAC;AACxE,EAAA,SADwE;AAExE,EAAA,SAAS,EAAE,gBAF6D;AAGxE,EAAA,WAAW,EAAE;AAH2D,CAAD,CAAlE","sourcesContent":["import type { FunctionComponent } from 'react';\nimport { makeStyles } from '@griffel/react';\nimport { typographyStyles } from '../../typographyStyles/index';\nimport { createWrapper, TextWrapperProps } from '../wrapper';\n\nexport const captionClassName = 'fui-Caption';\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: typographyStyles.caption,\n});\n\n/**\n * Text wrapper component for the Caption typography variant\n */\nexport const Caption: FunctionComponent<TextWrapperProps> = createWrapper({\n  useStyles,\n  className: captionClassName,\n  displayName: 'Caption',\n});\n"],"sourceRoot":"../src/"}

package/lib/components/Caption/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Caption/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Caption/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC","sourcesContent":["export * from './Caption';\n"]}

package/lib/components/Display/Display.d.ts

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

package/lib/components/Display/Display.js

@@ -1,11 +1,12 @@
-import { __styles } from '@fluentui/react-make-styles';
+import { __styles } from '@griffel/react';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper } from '../wrapper';
+export const displayClassName = 'fui-Display';
 /**
  * Styles for the root slot
  */
 
-var useStyles = /*#__PURE__*/__styles({
+const useStyles = /*#__PURE__*/__styles({
   "root": {
     "Bahqtrf": "fk6fouc",
     "Be2twd7": "fpyltcb",
@@ -20,8 +21,9 @@ var useStyles = /*#__PURE__*/__styles({
  */
 
 
-export var Display = /*#__PURE__*/createWrapper({
-  useStyles: useStyles,
+export const Display = /*#__PURE__*/createWrapper({
+  useStyles,
+  className: displayClassName,
   displayName: 'Display'
 });
 //# sourceMappingURL=Display.js.map

package/lib/components/Display/Display.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Display/Display.tsx"],"names":[],"mappings":"AACA,yBAA2B,6BAA3B;AACA,SAAS,gBAAT,QAAiC,8BAAjC;AACA,SAAS,aAAT,QAAgD,YAAhD;AAEA;;AAEG;;AACH,IAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAIA;;AAEG;;;AACH,OAAO,IAAM,OAAO,gBAAwC,aAAa,CAAC;AAAE,EAAA,SAAS,EAAA,SAAX;AAAa,EAAA,WAAW,EAAE;AAA1B,CAAD,CAAlE","sourceRoot":""}
+{"version":3,"sources":["components/Display/Display.tsx"],"names":[],"mappings":"AACA,yBAA2B,gBAA3B;AACA,SAAS,gBAAT,QAAiC,8BAAjC;AACA,SAAS,aAAT,QAAgD,YAAhD;AAEA,OAAO,MAAM,gBAAgB,GAAG,aAAzB;AAEP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAIA;;AAEG;;;AACH,OAAO,MAAM,OAAO,gBAAwC,aAAa,CAAC;AACxE,EAAA,SADwE;AAExE,EAAA,SAAS,EAAE,gBAF6D;AAGxE,EAAA,WAAW,EAAE;AAH2D,CAAD,CAAlE","sourcesContent":["import type { FunctionComponent } from 'react';\nimport { makeStyles } from '@griffel/react';\nimport { typographyStyles } from '../../typographyStyles/index';\nimport { createWrapper, TextWrapperProps } from '../wrapper';\n\nexport const displayClassName = 'fui-Display';\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: typographyStyles.display,\n});\n\n/**\n * Text wrapper component for the Display typography variant\n */\nexport const Display: FunctionComponent<TextWrapperProps> = createWrapper({\n  useStyles,\n  className: displayClassName,\n  displayName: 'Display',\n});\n"],"sourceRoot":"../src/"}

package/lib/components/Display/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Display/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Display/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC","sourcesContent":["export * from './Display';\n"]}

package/lib/components/Headline/Headline.d.ts

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

package/lib/components/Headline/Headline.js

@@ -1,11 +1,12 @@
-import { __styles } from '@fluentui/react-make-styles';
+import { __styles } from '@griffel/react';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper } from '../wrapper';
+export const headlineClassName = 'fui-Headline';
 /**
  * Styles for the root slot
  */
 
-var useStyles = /*#__PURE__*/__styles({
+const useStyles = /*#__PURE__*/__styles({
   "root": {
     "Bahqtrf": "fk6fouc",
     "Be2twd7": "f1pp30po",
@@ -20,8 +21,9 @@ var useStyles = /*#__PURE__*/__styles({
  */
 
 
-export var Headline = /*#__PURE__*/createWrapper({
-  useStyles: useStyles,
+export const Headline = /*#__PURE__*/createWrapper({
+  useStyles,
+  className: headlineClassName,
   displayName: 'Headline'
 });
 //# sourceMappingURL=Headline.js.map

package/lib/components/Headline/Headline.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Headline/Headline.tsx"],"names":[],"mappings":"AACA,yBAA2B,6BAA3B;AACA,SAAS,gBAAT,QAAiC,8BAAjC;AACA,SAAS,aAAT,QAAgD,YAAhD;AAEA;;AAEG;;AACH,IAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAIA;;AAEG;;;AACH,OAAO,IAAM,QAAQ,gBAAwC,aAAa,CAAC;AACzE,EAAA,SAAS,EAAA,SADgE;AAEzE,EAAA,WAAW,EAAE;AAF4D,CAAD,CAAnE","sourceRoot":""}
+{"version":3,"sources":["components/Headline/Headline.tsx"],"names":[],"mappings":"AACA,yBAA2B,gBAA3B;AACA,SAAS,gBAAT,QAAiC,8BAAjC;AACA,SAAS,aAAT,QAAgD,YAAhD;AAEA,OAAO,MAAM,iBAAiB,GAAG,cAA1B;AAEP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAIA;;AAEG;;;AACH,OAAO,MAAM,QAAQ,gBAAwC,aAAa,CAAC;AACzE,EAAA,SADyE;AAEzE,EAAA,SAAS,EAAE,iBAF8D;AAGzE,EAAA,WAAW,EAAE;AAH4D,CAAD,CAAnE","sourcesContent":["import type { FunctionComponent } from 'react';\nimport { makeStyles } from '@griffel/react';\nimport { typographyStyles } from '../../typographyStyles/index';\nimport { createWrapper, TextWrapperProps } from '../wrapper';\n\nexport const headlineClassName = 'fui-Headline';\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: typographyStyles.headline,\n});\n\n/**\n * Text wrapper component for the Headline typography variant\n */\nexport const Headline: FunctionComponent<TextWrapperProps> = createWrapper({\n  useStyles,\n  className: headlineClassName,\n  displayName: 'Headline',\n});\n"],"sourceRoot":"../src/"}

package/lib/components/Headline/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Headline/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Headline/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC","sourcesContent":["export * from './Headline';\n"]}

package/lib/components/LargeTitle/LargeTitle.d.ts

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

package/lib/components/LargeTitle/LargeTitle.js

@@ -1,11 +1,12 @@
-import { __styles } from '@fluentui/react-make-styles';
+import { __styles } from '@griffel/react';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper } from '../wrapper';
+export const largeTitleClassName = 'fui-LargeTitle';
 /**
  * Styles for the root slot
  */
 
-var useStyles = /*#__PURE__*/__styles({
+const useStyles = /*#__PURE__*/__styles({
   "root": {
     "Bahqtrf": "fk6fouc",
     "Be2twd7": "f15afnhw",
@@ -20,8 +21,9 @@ var useStyles = /*#__PURE__*/__styles({
  */
 
 
-export var LargeTitle = /*#__PURE__*/createWrapper({
-  useStyles: useStyles,
+export const LargeTitle = /*#__PURE__*/createWrapper({
+  useStyles,
+  className: largeTitleClassName,
   displayName: 'LargeTitle'
 });
 //# sourceMappingURL=LargeTitle.js.map

package/lib/components/LargeTitle/LargeTitle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/LargeTitle/LargeTitle.tsx"],"names":[],"mappings":"AACA,yBAA2B,6BAA3B;AACA,SAAS,gBAAT,QAAiC,8BAAjC;AACA,SAAS,aAAT,QAAgD,YAAhD;AAEA;;AAEG;;AACH,IAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAIA;;AAEG;;;AACH,OAAO,IAAM,UAAU,gBAAwC,aAAa,CAAC;AAC3E,EAAA,SAAS,EAAA,SADkE;AAE3E,EAAA,WAAW,EAAE;AAF8D,CAAD,CAArE","sourceRoot":""}
+{"version":3,"sources":["components/LargeTitle/LargeTitle.tsx"],"names":[],"mappings":"AACA,yBAA2B,gBAA3B;AACA,SAAS,gBAAT,QAAiC,8BAAjC;AACA,SAAS,aAAT,QAAgD,YAAhD;AAEA,OAAO,MAAM,mBAAmB,GAAG,gBAA5B;AAEP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAIA;;AAEG;;;AACH,OAAO,MAAM,UAAU,gBAAwC,aAAa,CAAC;AAC3E,EAAA,SAD2E;AAE3E,EAAA,SAAS,EAAE,mBAFgE;AAG3E,EAAA,WAAW,EAAE;AAH8D,CAAD,CAArE","sourcesContent":["import type { FunctionComponent } from 'react';\nimport { makeStyles } from '@griffel/react';\nimport { typographyStyles } from '../../typographyStyles/index';\nimport { createWrapper, TextWrapperProps } from '../wrapper';\n\nexport const largeTitleClassName = 'fui-LargeTitle';\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: typographyStyles.largeTitle,\n});\n\n/**\n * Text wrapper component for the Large Title typography variant\n */\nexport const LargeTitle: FunctionComponent<TextWrapperProps> = createWrapper({\n  useStyles,\n  className: largeTitleClassName,\n  displayName: 'LargeTitle',\n});\n"],"sourceRoot":"../src/"}

package/lib/components/LargeTitle/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/LargeTitle/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/LargeTitle/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC","sourcesContent":["export * from './LargeTitle';\n"]}

package/lib/components/Subheadline/Subheadline.d.ts

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

package/lib/components/Subheadline/Subheadline.js

@@ -1,11 +1,12 @@
-import { __styles } from '@fluentui/react-make-styles';
+import { __styles } from '@griffel/react';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper } from '../wrapper';
+export const subheadlineClassName = 'fui-Subheadline';
 /**
  * Styles for the root slot
  */
 
-var useStyles = /*#__PURE__*/__styles({
+const useStyles = /*#__PURE__*/__styles({
   "root": {
     "Bahqtrf": "fk6fouc",
     "Be2twd7": "fod5ikn",
@@ -20,8 +21,9 @@ var useStyles = /*#__PURE__*/__styles({
  */
 
 
-export var Subheadline = /*#__PURE__*/createWrapper({
-  useStyles: useStyles,
+export const Subheadline = /*#__PURE__*/createWrapper({
+  useStyles,
+  className: subheadlineClassName,
   displayName: 'Subheadline'
 });
 //# sourceMappingURL=Subheadline.js.map

package/lib/components/Subheadline/Subheadline.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Subheadline/Subheadline.tsx"],"names":[],"mappings":"AACA,yBAA2B,6BAA3B;AACA,SAAS,gBAAT,QAAiC,8BAAjC;AACA,SAAS,aAAT,QAAgD,YAAhD;AAEA;;AAEG;;AACH,IAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAIA;;AAEG;;;AACH,OAAO,IAAM,WAAW,gBAAwC,aAAa,CAAC;AAC5E,EAAA,SAAS,EAAA,SADmE;AAE5E,EAAA,WAAW,EAAE;AAF+D,CAAD,CAAtE","sourceRoot":""}
+{"version":3,"sources":["components/Subheadline/Subheadline.tsx"],"names":[],"mappings":"AACA,yBAA2B,gBAA3B;AACA,SAAS,gBAAT,QAAiC,8BAAjC;AACA,SAAS,aAAT,QAAgD,YAAhD;AAEA,OAAO,MAAM,oBAAoB,GAAG,iBAA7B;AAEP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAIA;;AAEG;;;AACH,OAAO,MAAM,WAAW,gBAAwC,aAAa,CAAC;AAC5E,EAAA,SAD4E;AAE5E,EAAA,SAAS,EAAE,oBAFiE;AAG5E,EAAA,WAAW,EAAE;AAH+D,CAAD,CAAtE","sourcesContent":["import type { FunctionComponent } from 'react';\nimport { makeStyles } from '@griffel/react';\nimport { typographyStyles } from '../../typographyStyles/index';\nimport { createWrapper, TextWrapperProps } from '../wrapper';\n\nexport const subheadlineClassName = 'fui-Subheadline';\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: typographyStyles.subheadline,\n});\n\n/**\n * Text wrapper component for the Subheadline typography variant\n */\nexport const Subheadline: FunctionComponent<TextWrapperProps> = createWrapper({\n  useStyles,\n  className: subheadlineClassName,\n  displayName: 'Subheadline',\n});\n"],"sourceRoot":"../src/"}

package/lib/components/Subheadline/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Subheadline/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Subheadline/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC","sourcesContent":["export * from './Subheadline';\n"]}

package/lib/components/Text/Text.js

@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { useText } from './useText';
-import { renderText } from './renderText';
-import { useTextStyles } from './useTextStyles';
+import { useText_unstable } from './useText';
+import { renderText_unstable } from './renderText';
+import { useTextStyles_unstable } from './useTextStyles';
 /**
  * Typography and styling abstraction component used to ensure consistency of text.
  */
 
-export var Text = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var state = useText(props, ref);
-  useTextStyles(state);
-  return renderText(state); // Work around some small mismatches in inferred types which don't matter in practice
+export const Text = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useText_unstable(props, ref);
+  useTextStyles_unstable(state);
+  return renderText_unstable(state); // Work around some small mismatches in inferred types which don't matter in practice
 });
 Text.displayName = 'Text';
 //# sourceMappingURL=Text.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,OAAT,QAAwB,WAAxB;AACA,SAAS,UAAT,QAA2B,cAA3B;AACA,SAAS,aAAT,QAA8B,iBAA9B;AAIA;;AAEG;;AACH,OAAO,IAAM,IAAI,gBAAmC,KAAK,CAAC,UAAN,CAAiB,UAAC,KAAD,EAAQ,GAAR,EAAW;AAC9E,MAAM,KAAK,GAAG,OAAO,CAAC,KAAD,EAAQ,GAAR,CAArB;AAEA,EAAA,aAAa,CAAC,KAAD,CAAb;AAEA,SAAO,UAAU,CAAC,KAAD,CAAjB,CAL8E,CAM9E;AACD,CAPmD,CAA7C;AASP,IAAI,CAAC,WAAL,GAAmB,MAAnB","sourceRoot":""}
+{"version":3,"sources":["components/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,gBAAT,QAAiC,WAAjC;AACA,SAAS,mBAAT,QAAoC,cAApC;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AAIA;;AAEG;;AACH,OAAO,MAAM,IAAI,gBAAmC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAClF,QAAM,KAAK,GAAG,gBAAgB,CAAC,KAAD,EAAQ,GAAR,CAA9B;AAEA,EAAA,sBAAsB,CAAC,KAAD,CAAtB;AAEA,SAAO,mBAAmB,CAAC,KAAD,CAA1B,CALkF,CAMlF;AACD,CAPmD,CAA7C;AASP,IAAI,CAAC,WAAL,GAAmB,MAAnB","sourcesContent":["import * as React from 'react';\nimport { useText_unstable } from './useText';\nimport { renderText_unstable } from './renderText';\nimport { useTextStyles_unstable } from './useTextStyles';\nimport type { TextProps } from './Text.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Typography and styling abstraction component used to ensure consistency of text.\n */\nexport const Text: ForwardRefComponent<TextProps> = React.forwardRef((props, ref) => {\n  const state = useText_unstable(props, ref);\n\n  useTextStyles_unstable(state);\n\n  return renderText_unstable(state);\n  // Work around some small mismatches in inferred types which don't matter in practice\n}) as ForwardRefComponent<TextProps>;\n\nText.displayName = 'Text';\n"],"sourceRoot":"../src/"}

package/lib/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/components/Text/Text.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.types.js","sourceRoot":"","sources":["../../../src/components/Text/Text.types.ts"],"names":[],"mappings":""}
+{"version":3,"file":"Text.types.js","sourceRoot":"../src/","sources":["components/Text/Text.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Text slots\n */\nexport type TextSlots = {\n  root: Slot<'span', 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'pre'>;\n};\n\ntype TextCommons = {\n  /**\n   * Wraps the text content on white spaces.\n   *\n   * @defaultValue true\n   */\n  wrap: boolean;\n\n  /**\n   * Truncate overflowing text for block displays.\n   *\n   * @defaultValue false\n   */\n  truncate: boolean;\n\n  /**\n   * Applies a block display for the content.\n   *\n   * @defaultValue false\n   */\n  block: boolean;\n\n  /**\n   * Applies the italic font style to the content.\n   *\n   * @defaultValue false\n   */\n  italic: boolean;\n\n  /**\n   * Applies the underline text decoration to the content.\n   *\n   * @defaultValue false\n   */\n  underline: boolean;\n\n  /**\n   * Applies the strikethrough text decoration to the content.\n   *\n   * @defaultValue false\n   */\n  strikethrough: boolean;\n\n  /**\n   * Applies font size and line height based on the theme tokens.\n   *\n   * @defaultValue 300\n   */\n  size: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000;\n\n  /**\n   * Applies the font family to the content.\n   *\n   * @defaultValue base\n   */\n  font: 'base' | 'monospace' | 'numeric';\n\n  /**\n   * Applies font weight to the content.\n   *\n   * @defaultValue regular\n   */\n  weight: 'regular' | 'medium' | 'semibold';\n\n  /**\n   * Aligns text based on the parent container.\n   *\n   * @defaultValue start\n   */\n  align: 'start' | 'center' | 'end' | 'justify';\n};\n\n/**\n * Text Props\n */\nexport type TextProps = ComponentProps<TextSlots> & Partial<TextCommons>;\n\n/**\n * State used in rendering Text\n */\nexport type TextState = ComponentState<TextSlots> & TextCommons;\n"]}

package/lib/components/Text/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Text/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Text/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC","sourcesContent":["export * from './Text';\nexport * from './Text.types';\nexport * from './renderText';\nexport * from './useText';\nexport * from './useTextStyles';\n"]}

package/lib/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/components/Text/renderText.js

@@ -1,15 +1,15 @@
-import { __assign } from "tslib";
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of Text
  */
 
-export var renderText = function (state) {
-  var _a = getSlots(state),
-      slots = _a.slots,
-      slotProps = _a.slotProps;
-
-  return /*#__PURE__*/React.createElement(slots.root, __assign({}, slotProps.root));
+export const renderText_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = getSlots(state);
+  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  });
 };
 //# sourceMappingURL=renderText.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Text/renderText.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,IAAM,UAAU,GAAG,UAAC,KAAD,EAAiB;AACnC,MAAA,EAAA,GAAuB,QAAQ,CAAY,KAAZ,CAA/B;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAEN,sBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAAP;AACD,CAJM","sourceRoot":""}
+{"version":3,"sources":["components/Text/renderText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,mBAAmB,GAAI,KAAD,IAAqB;AACtD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAY,KAAZ,CAArC;AAEA,sBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAAP;AACD,CAJM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TextSlots, TextState } from './Text.types';\n\n/**\n * Render the final JSX of Text\n */\nexport const renderText_unstable = (state: TextState) => {\n  const { slots, slotProps } = getSlots<TextSlots>(state);\n\n  return <slots.root {...slotProps.root} />;\n};\n"],"sourceRoot":"../src/"}

package/lib/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/components/Text/useText.js

@@ -1,30 +1,31 @@
-import { __assign } from "tslib";
 import { getNativeElementProps } from '@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
  */
 
-export var useText = function (props, ref) {
+export 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,
@@ -38,11 +39,11 @@ export var useText = function (props, ref) {
     components: {
       root: 'span'
     },
-    root: getNativeElementProps(as, __assign(__assign({
-      ref: ref
-    }, props), {
-      as: as
-    }))
+    root: getNativeElementProps(as, {
+      ref,
+      ...props,
+      as
+    })
   };
   return state;
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Text/useText.ts"],"names":[],"mappings":";AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAGA;;;;;;;;AAQG;;AACH,OAAO,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,qBAAqB,CAAC,EAAD,EAAG,QAAA,CAAA,QAAA,CAAA;AAC5B,MAAA,GAAG,EAAA;AADyB,KAAA,EAEzB,KAFyB,CAAA,EAEpB;AACR,MAAA,EAAE,EAAA;AADM,KAFoB,CAAH;AAdJ,GAAzB;AAqBA,SAAO,KAAP;AACD,CA1BM","sourceRoot":""}
+{"version":3,"sources":["components/Text/useText.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAGA;;;;;;;;AAQG;;AACH,OAAO,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,qBAAqB,CAAC,EAAD,EAAK;AAC9B,MAAA,GAD8B;AAE9B,SAAG,KAF2B;AAG9B,MAAA;AAH8B,KAAL;AAdJ,GAAzB;AAqBA,SAAO,KAAP;AACD,CA1BM","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/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/components/Text/useTextStyles.js

@@ -1,9 +1,11 @@
-import { __styles, mergeClasses } from '@fluentui/react-make-styles';
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const textClassName = 'fui-Text';
 /**
  * Styles for the root slot
  */
 
-var useStyles = /*#__PURE__*/__styles({
+const useStyles = /*#__PURE__*/__styles({
   "root": {
     "Bahqtrf": "fk6fouc",
     "Be2twd7": "fkhj508",
@@ -12,12 +14,14 @@ var useStyles = /*#__PURE__*/__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"
@@ -29,13 +33,13 @@ var useStyles = /*#__PURE__*/__styles({
     "B80ckks": "f1j4dglz"
   },
   "underline": {
-    "dwov6y": "fctto54"
+    "w71qe1": "f13mvf36"
   },
   "strikethrough": {
-    "dwov6y": "f1y2xhd0"
+    "w71qe1": "fv5q2k7"
   },
   "strikethroughUnderline": {
-    "dwov6y": "f13legbo"
+    "w71qe1": "f1drk4o6"
   },
   "base100": {
     "Be2twd7": "f13mqy1h",
@@ -95,16 +99,16 @@ var useStyles = /*#__PURE__*/__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
  */
 
 
-export var useTextStyles = function (state) {
-  var styles = useStyles();
-  state.root.className = 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);
+export const useTextStyles_unstable = state => {
+  const styles = useStyles();
+  state.root.className = mergeClasses(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;
 };
 //# sourceMappingURL=useTextStyles.js.map