@fluentui/react-text 0.0.0-nightlyca6ef2bc8e20220105.1 → 0.0.0-nightlyd45ba4664620220211.1

package/MIGRATION.md

@@ -44,7 +44,7 @@ _This property suffered no changes and can be left as is._
 
 The `nowrap` property was changed to `wrap` and it is `true` by default. You can achieve the same result as `nowrap` by using:
 
-```
+```tsx
 <Text wrap={false}>Not wrapped</Text>
 ```
 
@@ -69,7 +69,7 @@ Variants are now represented with tokens that you can override on a theme level.
 
 You can use them with Text as such:
 
-```
+```tsx
 <Text size={300}>Text</Text>
 ```
 
@@ -88,8 +88,10 @@ _This property suffered no changes and can be left as is._
 
 To achieve the same result with the new `truncate` property, you'll need to do the following:
 
-```
-<Text block truncate wrap={false}>Not wrapped</Text>
+```tsx
+<Text block truncate wrap={false}>
+  Not wrapped
+</Text>
 ```
 
 This is due to `truncate` changing the CSS property `text-overflow` to `ellipsis`.
@@ -109,7 +111,7 @@ While the name remains the same, the values are now represented with integer tok
 
 You can use them with Text as such:
 
-```
+```tsx
 <Text size={300}>Text</Text>
 ```
 
@@ -129,18 +131,20 @@ Northstar design tokens:
 
 - Color: `siteVariables.colors.brand[600]`
 
-```
-const useStyles = makeStyles(theme => ({
+```tsx
+import { makeStyles, Text } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
   root: {
-     color: 'rgb(98, 100, 167)'
+    color: 'rgb(98, 100, 167)',
   },
-})
+});
 
 const MyComponent = () => {
-    const styles = useStyles()
+  const styles = useStyles();
 
-    return <Text className={styles.root}>{...}</Text>
-}
+  return <Text className={styles.root}>{/* ... */}</Text>;
+};
 ```
 
 ##### **teamsDarkTheme**
@@ -149,18 +153,20 @@ Northstar design tokens:
 
 - Color: `siteVariables.colors.brand[400]`
 
-```
-const useStyles = makeStyles(theme => ({
+```tsx
+import { makeStyles, Text } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
   root: {
-     color: 'rgb(166, 167, 220)'
+    color: 'rgb(166, 167, 220)',
   },
-})
+});
 
 const MyComponent = () => {
-    const styles = useStyles()
+  const styles = useStyles();
 
-    return <Text className={styles.root}>{...}</Text>
-}
+  return <Text className={styles.root}>{/* ... */}</Text>;
+};
 ```
 
 ##### **teamsHighContrastTheme**
@@ -169,18 +175,20 @@ Northstar design tokens:
 
 - Color: `siteVariables.accessibleYellow`
 
-```
-const useStyles = makeStyles(theme => ({
+```tsx
+import { makeStyles, Text } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
   root: {
-     color: 'rgb(255, 255, 1)'
+    color: 'rgb(255, 255, 1)',
   },
-})
+});
 
 const MyComponent = () => {
-    const styles = useStyles()
+  const styles = useStyles();
 
-    return <Text className={styles.root}>{...}</Text>
-}
+  return <Text className={styles.root}>{/* ... */}</Text>;
+};
 ```
 
 #### Using `atMention="me"`
@@ -192,19 +200,21 @@ Northstar design tokens:
 - Color: `siteVariables.colors.orange[400]`
 - Font weight: `siteVariables.fontWeightBold`
 
-```
-const useStyles = makeStyles(theme => ({
+```tsx
+import { makeStyles, Text } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
   root: {
-     color: 'rgb(204, 74, 49)',
-     fontWeight: 700
+    color: 'rgb(204, 74, 49)',
+    fontWeight: 700,
   },
-})
+});
 
 const MyComponent = () => {
-    const styles = useStyles()
+  const styles = useStyles();
 
-    return <Text className={styles.root}>{...}</Text>
-}
+  return <Text className={styles.root}>{/* ... */}</Text>;
+};
 ```
 
 ##### **teamsDarkTheme**
@@ -214,19 +224,21 @@ Northstar design tokens:
 - Color: `siteVariables.colors.orange[300]`
 - Font weight: `siteVariables.fontWeightBold`
 
-```
-const useStyles = makeStyles(theme => ({
+```tsx
+import { makeStyles, Text } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
   root: {
-     color: 'rgb(233, 117, 72)',
-     fontWeight: 700
+    color: 'rgb(233, 117, 72)',
+    fontWeight: 700,
   },
-})
+});
 
 const MyComponent = () => {
-    const styles = useStyles()
+  const styles = useStyles();
 
-    return <Text className={styles.root}>{...}</Text>
-}
+  return <Text className={styles.root}>{/* ... */}</Text>;
+};
 ```
 
 ##### **teamsHighContrastTheme**
@@ -236,37 +248,41 @@ Northstar design tokens:
 - Color: `siteVariables.accessibleYellow`
 - Font weight: `siteVariables.fontWeightBold`
 
-```
-const useStyles = makeStyles(theme => ({
+```tsx
+import { makeStyles, Text } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
   root: {
-     color: 'rgb(255, 255, 1)',
-     fontWeight: 700
+    color: 'rgb(255, 255, 1)',
+    fontWeight: 700,
   },
-})
+});
 
 const MyComponent = () => {
-    const styles = useStyles()
+  const styles = useStyles();
 
-    return <Text className={styles.root}>{...}</Text>
-}
+  return <Text className={styles.root}>{/* ... */}</Text>;
+};
 ```
 
 ### color
 
 This property was deprecated. Below is a simple example on how to achieve the same result:
 
-```
-const useStyles = makeStyles(theme => ({
+```tsx
+import { makeStyles, Text } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
   root: {
-    color: //Your color here
+    color: '__ put your color there __',
   },
-})
+});
 
 const MyComponent = () => {
-    const styles = useStyles()
+  const styles = useStyles();
 
-    return <Text className={styles.root}>{...}</Text>
-}
+  return <Text className={styles.root}>{/* ... */}</Text>;
+};
 ```
 
 _Read more about the CSS prop: [color](https://developer.mozilla.org/en-US/docs/Web/CSS/color)_
@@ -276,13 +292,13 @@ _Read more about the CSS prop: [color](https://developer.mozilla.org/en-US/docs/
 The `content` prop works the same way as the native `children` prop in React.
 You can either use:
 
-```
+```tsx
 <Text children="Hello World!" />
 ```
 
 Or the common and recomended way:
 
-```
+```tsx
 <Text>Hello World!</Text>
 ```
 
@@ -297,6 +313,8 @@ Northstar design tokens:
 - Color: `siteVariables.colors.grey[250]`
 
 ```
+import { makeStyles, Text } from '@fluentui/react-components';
+
 const useStyles = makeStyles(theme => ({
   root: {
      color: 'rgb(200, 198, 196)'
@@ -317,6 +335,8 @@ Northstar design tokens:
 - Color: `siteVariables.colors.grey[450]`
 
 ```
+import { makeStyles, Text } from '@fluentui/react-components';
+
 const useStyles = makeStyles(theme => ({
   root: {
      color: 'rgb(96, 94, 92)'
@@ -337,6 +357,8 @@ Northstar design tokens:
 - Color: `siteVariables.accessibleGreen`
 
 ```
+import { makeStyles, Text } from '@fluentui/react-components';
+
 const useStyles = makeStyles(theme => ({
   root: {
      color: 'rgb(63, 242, 63)'
@@ -361,6 +383,8 @@ Northstar design tokens:
 - Color: `siteVariables.colorScheme.red.foreground`
 
 ```
+import { makeStyles, Text } from '@fluentui/react-components';
+
 const useStyles = makeStyles(theme => ({
   root: {
      color: 'rgb(196, 49, 75)'
@@ -381,6 +405,8 @@ Northstar design tokens:
 - Color: `siteVariables.colors.red[300]`
 
 ```
+import { makeStyles, Text } from '@fluentui/react-components';
+
 const useStyles = makeStyles(theme => ({
   root: {
      color: 'rgb(231, 53, 80)'
@@ -401,6 +427,8 @@ Northstar design tokens:
 - Color: `siteVariables.red`
 
 ```
+import { makeStyles, Text } from '@fluentui/react-components';
+
 const useStyles = makeStyles(theme => ({
   root: {
      color: 'rgb(255, 0, 0)'
@@ -426,6 +454,8 @@ Northstar design tokens:
 - Font weight: `siteVariables.fontWeightBold`
 
 ```
+import { makeStyles, Text } from '@fluentui/react-components';
+
 const useStyles = makeStyles(theme => ({
   root: {
      color: 'rgb(196, 49, 75)',
@@ -448,6 +478,8 @@ Northstar design tokens:
 - Font weight: `siteVariables.fontWeightBold`
 
 ```
+import { makeStyles, Text } from '@fluentui/react-components';
+
 const useStyles = makeStyles(theme => ({
   root: {
      color: 'rgb(231, 53, 80)',
@@ -470,6 +502,8 @@ Northstar design tokens:
 - Font weight: `siteVariables.fontWeightBold`
 
 ```
+import { makeStyles, Text } from '@fluentui/react-components';
+
 const useStyles = makeStyles(theme => ({
   root: {
      color: 'rgb(255, 0, 0)',
@@ -495,6 +529,8 @@ Northstar design tokens:
 - Color: `siteVariables.colors.green[600]`
 
 ```
+import { makeStyles, Text } from '@fluentui/react-components';
+
 const useStyles = makeStyles(theme => ({
   root: {
      color: 'rgb(35, 123, 75)'
@@ -515,6 +551,8 @@ Northstar design tokens:
 - Color: `siteVariables.colors.green[200]`
 
 ```
+import { makeStyles, Text } from '@fluentui/react-components';
+
 const useStyles = makeStyles(theme => ({
   root: {
      color: 'rgb(146, 195, 83)'
@@ -534,36 +572,40 @@ Northstar design tokens:
 
 - Color: `siteVariables.colors.green[200]`
 
-```
-const useStyles = makeStyles(theme => ({
+```tsx
+import { makeStyles, Text } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
   root: {
-     color: 'rgb(146, 195, 83)'
+    color: 'rgb(146, 195, 83)',
   },
-})
+});
 
 const MyComponent = () => {
-    const styles = useStyles()
+  const styles = useStyles();
 
-    return <Text className={styles.root}>{...}</Text>
-}
+  return <Text className={styles.root}>{/* ... */}</Text>;
+};
 ```
 
 ### temporary [DEPRECATED]
 
 This property was deprecated. Given that this property depends on the applied style, you can find below examples on how to achieve the same results in the default, dark and high contrast themes:
 
-```
-const useStyles = makeStyles(theme => ({
+```tsx
+import { makeStyles, Text } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
   root: {
-     fontStyle: 'italic'
+    fontStyle: 'italic',
   },
-})
+});
 
 const MyComponent = () => {
-    const styles = useStyles()
+  const styles = useStyles();
 
-    return <Text className={styles.root}>{...}</Text>
-}
+  return <Text className={styles.root}>{/* ... */}</Text>;
+};
 ```
 
 ### timestamp [DEPRECATED]
@@ -576,18 +618,20 @@ Northstar design tokens:
 
 - Color: `siteVariables.colorScheme.default.foreground1`
 
-```
-const useStyles = makeStyles(theme => ({
+```tsx
+import { makeStyles, Text } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
   root: {
-     color: 'rgb(72, 70, 68)'
+    color: 'rgb(72, 70, 68)',
   },
-})
+});
 
 const MyComponent = () => {
-    const styles = useStyles()
+  const styles = useStyles();
 
-    return <Text className={styles.root}>{...}</Text>
-}
+  return <Text className={styles.root}>{/* ... */}</Text>;
+};
 ```
 
 #### **teamsDarkTheme**
@@ -596,18 +640,20 @@ Northstar design tokens:
 
 - Color: `siteVariables.colorScheme.default.foreground1`
 
-```
-const useStyles = makeStyles(theme => ({
+```tsx
+import { makeStyles, Text } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
   root: {
-     color: 'rgb(138, 136, 134)'
+    color: 'rgb(138, 136, 134)',
   },
-})
+});
 
 const MyComponent = () => {
-    const styles = useStyles()
+  const styles = useStyles();
 
-    return <Text className={styles.root}>{...}</Text>
-}
+  return <Text className={styles.root}>{/* ... */}</Text>;
+};
 ```
 
 #### **teamsHighContrastTheme**
@@ -616,23 +662,25 @@ Northstar design tokens:
 
 - Color: `siteVariables.colors.white`
 
-```
-const useStyles = makeStyles(theme => ({
+```tsx
+import { makeStyles, Text } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
   root: {
-     color: 'rgb(255, 255, 255)'
+    color: 'rgb(255, 255, 255)',
   },
-})
+});
 
 const MyComponent = () => {
-    const styles = useStyles()
+  const styles = useStyles();
 
-    return <Text className={styles.root}>{...}</Text>
-}
+  return <Text className={styles.root}>{/* ... */}</Text>;
+};
 ```
 
 ### variables [DEPRECATED]
 
-For v9, this feature is no longer supported. The alternative is to apply styles through `make-styles`. Below is an example of a migration:
+For v9, this feature is no longer supported. The alternative is to apply styles through `makeStyles()` (see [Griffel](https://github.com/microsoft/griffel) docs for more details). Below is an example of a migration:
 
 #### v0 (Northstar) implementation
 
@@ -644,18 +692,20 @@ const MyComponent = () => {
 
 #### v9 (Fluent UI) implementation
 
-```
-const useStyles = makeStyles(theme => ({
+```tsx
+import { makeStyles, Text } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
   red: {
-     color: 'red'
+    color: 'red',
   },
-})
+});
 
 const MyComponent = () => {
-    const styles = useStyles()
+  const styles = useStyles();
 
-    return <Text className={styles.root}>{...}</Text>
-}
+  return <Text className={styles.root}>{/* ... */}</Text>;
+};
 ```
 
 ### weight
@@ -677,4 +727,4 @@ _This property suffered no changes and can be left as is._
 
 ### styles
 
-_This property suffered no changes and can be used as is. However, we highly recommend that you migrate to a `make-styles` styling solution for performance reasons._
+_This property suffered no changes and can be used as is. However, we highly recommend that you migrate to `makeStyles()` (a [Griffel](https://github.com/microsoft/griffel) styling solution) for performance reasons._

package/dist/react-text.d.ts

@@ -2,8 +2,8 @@ import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { FunctionComponent } from 'react';
-import type { IntrinsicShorthandProps } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
+import type { Slot } from '@fluentui/react-utilities';
 
 /**
  * Text wrapper component for the Body typography variant
@@ -44,7 +44,7 @@ export declare const largeTitleClassName = "fui-LargeTitle";
 /**
  * Render the final JSX of Text
  */
-export declare const renderText: (state: TextState) => JSX.Element;
+export declare const renderText_unstable: (state: TextState) => JSX.Element;
 
 /**
  * Text wrapper component for the Subheadline typography variant
@@ -61,7 +61,7 @@ export { Text_2 as Text }
 
 export declare const textClassName = "fui-Text";
 
-export declare type TextCommons = {
+declare type TextCommons = {
     /**
      * Wraps the text content on white spaces.
      *
@@ -133,7 +133,7 @@ export declare type TextProps = ComponentProps<TextSlots> & Partial<TextCommons>
  * 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'>;
 };
 
 /**
@@ -167,17 +167,17 @@ export declare const title3ClassName = "fui-Title3";
 /**
  * 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_2.Ref<HTMLElement>) => TextState;
+export declare const useText_unstable: (props: TextProps, ref: React_2.Ref<HTMLElement>) => TextState;
 
 /**
  * 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;
 
 export { }

package/lib/components/Body/Body.js

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

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

package/lib/components/Caption/Caption.js

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

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

package/lib/components/Display/Display.js

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

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

package/lib/components/Headline/Headline.js

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

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

package/lib/components/LargeTitle/LargeTitle.js

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

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

package/lib/components/Subheadline/Subheadline.js

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

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