@fluentui/react-persona 0.0.0-nightly-20230210-0425.1 → 0.0.0-nightly-20230214-0419.1

package/CHANGELOG.json

@@ -2,9 +2,9 @@
   "name": "@fluentui/react-persona",
   "entries": [
     {
-      "date": "Fri, 10 Feb 2023 04:35:01 GMT",
-      "tag": "@fluentui/react-persona_v0.0.0-nightly-20230210-0425.1",
-      "version": "0.0.0-nightly-20230210-0425.1",
+      "date": "Tue, 14 Feb 2023 04:26:22 GMT",
+      "tag": "@fluentui/react-persona_v0.0.0-nightly-20230214-0419.1",
+      "version": "0.0.0-nightly-20230214-0419.1",
       "comments": {
         "prerelease": [
           {
@@ -16,32 +16,107 @@
           {
             "author": "beachball",
             "package": "@fluentui/react-persona",
-            "comment": "Bump @fluentui/react-avatar to v0.0.0-nightly-20230210-0425.1",
-            "commit": "2bff813d044bb7e74e91670eda0a208027033ccb"
+            "comment": "Bump @fluentui/react-avatar to v0.0.0-nightly-20230214-0419.1",
+            "commit": "646eca374604906a66a017b72fe9f52135e6449a"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-persona",
-            "comment": "Bump @fluentui/react-badge to v0.0.0-nightly-20230210-0425.1",
-            "commit": "2bff813d044bb7e74e91670eda0a208027033ccb"
+            "comment": "Bump @fluentui/react-badge to v0.0.0-nightly-20230214-0419.1",
+            "commit": "646eca374604906a66a017b72fe9f52135e6449a"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-persona",
-            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230210-0425.1",
-            "commit": "2bff813d044bb7e74e91670eda0a208027033ccb"
+            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230214-0419.1",
+            "commit": "646eca374604906a66a017b72fe9f52135e6449a"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-persona",
-            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230210-0425.1",
-            "commit": "2bff813d044bb7e74e91670eda0a208027033ccb"
+            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230214-0419.1",
+            "commit": "646eca374604906a66a017b72fe9f52135e6449a"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-persona",
-            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230210-0425.1",
-            "commit": "2bff813d044bb7e74e91670eda0a208027033ccb"
+            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230214-0419.1",
+            "commit": "646eca374604906a66a017b72fe9f52135e6449a"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 13 Feb 2023 23:43:13 GMT",
+      "tag": "@fluentui/react-persona_v9.1.11",
+      "version": "9.1.11",
+      "comments": {
+        "patch": [
+          {
+            "author": "seanmonahan@microsoft.com",
+            "package": "@fluentui/react-persona",
+            "commit": "29e62b13706c2845b21d665d43cdacf1ef1b1513",
+            "comment": "chore: update Persona to use makeResetStyles"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-persona",
+            "comment": "Bump @fluentui/react-avatar to v9.3.5",
+            "commit": "29e62b13706c2845b21d665d43cdacf1ef1b1513"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-persona",
+            "comment": "Bump @fluentui/react-badge to v9.0.25",
+            "commit": "29e62b13706c2845b21d665d43cdacf1ef1b1513"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-persona",
+            "comment": "Bump @fluentui/react-utilities to v9.5.3",
+            "commit": "29e62b13706c2845b21d665d43cdacf1ef1b1513"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 13 Feb 2023 09:35:48 GMT",
+      "tag": "@fluentui/react-persona_v9.1.10",
+      "version": "9.1.10",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-persona",
+            "comment": "Bump @fluentui/react-avatar to v9.3.4",
+            "commit": "b24aed22677cb12a74f185feee89edefd1601b9a"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 10 Feb 2023 08:50:02 GMT",
+      "tag": "@fluentui/react-persona_v9.1.9",
+      "version": "9.1.9",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-persona",
+            "comment": "Bump @fluentui/react-avatar to v9.3.3",
+            "commit": "cc62f050f8231e8f21a2cf7dddf33003e0ba3931"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-persona",
+            "comment": "Bump @fluentui/react-badge to v9.0.24",
+            "commit": "cc62f050f8231e8f21a2cf7dddf33003e0ba3931"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-persona",
+            "comment": "Bump @fluentui/react-utilities to v9.5.2",
+            "commit": "cc62f050f8231e8f21a2cf7dddf33003e0ba3931"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,22 +1,54 @@
 # Change Log - @fluentui/react-persona
 
-This log was last generated on Fri, 10 Feb 2023 04:35:01 GMT and should not be manually modified.
+This log was last generated on Tue, 14 Feb 2023 04:26:22 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20230210-0425.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v0.0.0-nightly-20230210-0425.1)
+## [0.0.0-nightly-20230214-0419.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v0.0.0-nightly-20230214-0419.1)
 
-Fri, 10 Feb 2023 04:35:01 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.1.8..@fluentui/react-persona_v0.0.0-nightly-20230210-0425.1)
+Tue, 14 Feb 2023 04:26:22 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.1.11..@fluentui/react-persona_v0.0.0-nightly-20230214-0419.1)
 
 ### Changes
 
 - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
-- Bump @fluentui/react-avatar to v0.0.0-nightly-20230210-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/2bff813d044bb7e74e91670eda0a208027033ccb) by beachball)
-- Bump @fluentui/react-badge to v0.0.0-nightly-20230210-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/2bff813d044bb7e74e91670eda0a208027033ccb) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20230210-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/2bff813d044bb7e74e91670eda0a208027033ccb) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20230210-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/2bff813d044bb7e74e91670eda0a208027033ccb) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230210-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/2bff813d044bb7e74e91670eda0a208027033ccb) by beachball)
+- Bump @fluentui/react-avatar to v0.0.0-nightly-20230214-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/646eca374604906a66a017b72fe9f52135e6449a) by beachball)
+- Bump @fluentui/react-badge to v0.0.0-nightly-20230214-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/646eca374604906a66a017b72fe9f52135e6449a) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20230214-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/646eca374604906a66a017b72fe9f52135e6449a) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20230214-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/646eca374604906a66a017b72fe9f52135e6449a) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230214-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/646eca374604906a66a017b72fe9f52135e6449a) by beachball)
+
+## [9.1.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.1.11)
+
+Mon, 13 Feb 2023 23:43:13 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.1.10..@fluentui/react-persona_v9.1.11)
+
+### Patches
+
+- chore: update Persona to use makeResetStyles ([PR #26814](https://github.com/microsoft/fluentui/pull/26814) by seanmonahan@microsoft.com)
+- Bump @fluentui/react-avatar to v9.3.5 ([PR #26814](https://github.com/microsoft/fluentui/pull/26814) by beachball)
+- Bump @fluentui/react-badge to v9.0.25 ([PR #26814](https://github.com/microsoft/fluentui/pull/26814) by beachball)
+- Bump @fluentui/react-utilities to v9.5.3 ([PR #26814](https://github.com/microsoft/fluentui/pull/26814) by beachball)
+
+## [9.1.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.1.10)
+
+Mon, 13 Feb 2023 09:35:48 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.1.9..@fluentui/react-persona_v9.1.10)
+
+### Patches
+
+- Bump @fluentui/react-avatar to v9.3.4 ([PR #26800](https://github.com/microsoft/fluentui/pull/26800) by beachball)
+
+## [9.1.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.1.9)
+
+Fri, 10 Feb 2023 08:50:02 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.1.8..@fluentui/react-persona_v9.1.9)
+
+### Patches
+
+- Bump @fluentui/react-avatar to v9.3.3 ([commit](https://github.com/microsoft/fluentui/commit/cc62f050f8231e8f21a2cf7dddf33003e0ba3931) by beachball)
+- Bump @fluentui/react-badge to v9.0.24 ([commit](https://github.com/microsoft/fluentui/commit/cc62f050f8231e8f21a2cf7dddf33003e0ba3931) by beachball)
+- Bump @fluentui/react-utilities to v9.5.2 ([commit](https://github.com/microsoft/fluentui/commit/cc62f050f8231e8f21a2cf7dddf33003e0ba3931) by beachball)
 
 ## [9.1.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.1.8)
 

package/lib/components/Persona/usePersonaStyles.js

@@ -1,4 +1,4 @@
-import { __styles, mergeClasses } from '@griffel/react';
+import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 export const personaClassNames = {
   root: 'fui-Persona',
@@ -10,29 +10,23 @@ export const personaClassNames = {
   quaternaryText: 'fui-Persona__quaternaryText'
 };
 const avatarSpacing = `--fui-Persona__avatar--spacing`;
+const useRootClassName = /*#__PURE__*/__resetStyles("rlroi9i", null, [".rlroi9i{display:inline-grid;grid-auto-rows:max-content;grid-auto-flow:column;justify-items:start;grid-template-columns:max-content [middle] auto;}"]);
 /**
  * Styles for the root slot
  */
 const useStyles = /*#__PURE__*/__styles({
-  base: {
-    mc9l5x: "fwk3njj",
-    v29qe6: "fvtn1bl"
-  },
   beforeAfterCenter: {
     wkccdc: "f1iantul"
   },
-  after: {
-    Bxotwcr: "f1u07yai",
-    B7hvi0a: "f1m2n5bn",
-    Budl1dq: "f1c1ms5d"
-  },
+  after: {},
   before: {
-    Bxotwcr: "f1u07yai",
     B7hvi0a: "f1tll2w5",
     Budl1dq: "ffvkwdr"
   },
   below: {
-    B7hvi0a: "f1oiokrs"
+    Bxotwcr: "f1nkeedh",
+    B7hvi0a: "f1oiokrs",
+    Budl1dq: "f1emgwh2"
   },
   media: {
     Ijaq50: "f1hek2iy"
@@ -72,7 +66,7 @@ const useStyles = /*#__PURE__*/__styles({
     Ijaq50: "f1tuwaia"
   }
 }, {
-  d: [".fwk3njj{display:inline-grid;}", ".fvtn1bl{grid-auto-rows:max-content;}", ".f1iantul{grid-template-rows:1fr [primary] max-content [secondary] max-content [tertiary] max-content [quaternary] max-content 1fr;}", ".f1u07yai{grid-auto-flow:column;}", ".f1m2n5bn{justify-items:start;}", ".f1c1ms5d{grid-template-columns:max-content [middle] auto;}", ".f1tll2w5{justify-items:end;}", ".ffvkwdr{grid-template-columns:auto [middle] max-content;}", ".f1oiokrs{justify-items:center;}", ".f1hek2iy{grid-row-start:span 5;}", ".fa4dipu{grid-row-start:span 6;}", ".f9h729m{-webkit-align-self:start;-ms-flex-item-align:start;align-self:start;}", ".f7nlbp4{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}", ".f1rnkkuc{grid-row-start:unset;}", ".f1warjpf{grid-column-end:middle;}", ".fwu52yu{grid-column-start:middle;}", ".f1ryq6si{margin-top:-2px;}", ".f1q3ipgb{grid-row-start:primary;}", ".f3drtdk{grid-row-start:secondary;}", ".fa1o6s1{grid-row-start:tertiary;}", ".f1tuwaia{grid-row-start:quaternary;}"]
+  d: [".f1iantul{grid-template-rows:1fr [primary] max-content [secondary] max-content [tertiary] max-content [quaternary] max-content 1fr;}", ".f1tll2w5{justify-items:end;}", ".ffvkwdr{grid-template-columns:auto [middle] max-content;}", ".f1nkeedh{grid-auto-flow:unset;}", ".f1oiokrs{justify-items:center;}", ".f1emgwh2{grid-template-columns:unset;}", ".f1hek2iy{grid-row-start:span 5;}", ".fa4dipu{grid-row-start:span 6;}", ".f9h729m{-webkit-align-self:start;-ms-flex-item-align:start;align-self:start;}", ".f7nlbp4{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}", ".f1rnkkuc{grid-row-start:unset;}", ".f1warjpf{grid-column-end:middle;}", ".fwu52yu{grid-column-start:middle;}", ".f1ryq6si{margin-top:-2px;}", ".f1q3ipgb{grid-row-start:primary;}", ".f3drtdk{grid-row-start:secondary;}", ".fa1o6s1{grid-row-start:tertiary;}", ".f1tuwaia{grid-row-start:quaternary;}"]
 });
 const useAvatarSpacingStyles = /*#__PURE__*/__styles({
   "extra-small": {
@@ -128,13 +122,14 @@ export const usePersonaStyles_unstable = state => {
     primaryTextClassName,
     optionalTextClassName
   } = useTextClassNames(state, alignToPrimary);
+  const rootClassName = useRootClassName();
   const styles = useStyles();
   const avatarSpacingStyles = useAvatarSpacingStyles();
   const presenceSpacingStyles = {
     ...avatarSpacingStyles,
     ...usePresenceSpacingStyles()
   };
-  state.root.className = mergeClasses(personaClassNames.root, styles.base, alignBeforeAfterCenter && styles.beforeAfterCenter, styles[textPosition], state.root.className);
+  state.root.className = mergeClasses(personaClassNames.root, rootClassName, alignBeforeAfterCenter && styles.beforeAfterCenter, styles[textPosition], state.root.className);
   if (state.avatar) {
     state.avatar.className = mergeClasses(personaClassNames.avatar, textPosition !== 'below' && styles.media, alignBeforeAfterCenter && styles.mediaBeforeAfterCenter, styles[textAlignment], avatarSpacingStyles[size], avatarSpacingStyles[textPosition], state.avatar.className);
   }
@@ -155,16 +150,9 @@ export const usePersonaStyles_unstable = state => {
   }
   return state;
 };
+const usePrimaryTextBaseClassName = /*#__PURE__*/__resetStyles("rvj41k9", null, [".rvj41k9{display:block;color:var(--colorNeutralForeground1);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);}"]);
+const useOptionalTextBaseClassName = /*#__PURE__*/__resetStyles("rp1pf9e", null, [".rp1pf9e{display:block;color:var(--colorNeutralForeground2);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}"]);
 const useTextStyles = /*#__PURE__*/__styles({
-  base: {
-    mc9l5x: "ftgm304"
-  },
-  primaryText: {
-    sj55zd: "f19n0e5"
-  },
-  optionalText: {
-    sj55zd: "fkfq4zb"
-  },
   beforeAlignToPrimary: {
     Bw0ie65: "f1warjpf"
   },
@@ -190,7 +178,7 @@ const useTextStyles = /*#__PURE__*/__styles({
     Bg96gwp: "faaz57k"
   }
 }, {
-  d: [".ftgm304{display:block;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f1warjpf{grid-column-end:middle;}", ".fwu52yu{grid-column-start:middle;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".faaz57k{line-height:var(--lineHeightBase400);}"]
+  d: [".f1warjpf{grid-column-end:middle;}", ".fwu52yu{grid-column-start:middle;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".faaz57k{line-height:var(--lineHeightBase400);}"]
 });
 const useTextClassNames = (state, alignToPrimary) => {
   const {
@@ -198,16 +186,16 @@ const useTextClassNames = (state, alignToPrimary) => {
     size,
     textPosition
   } = state;
+  const primaryTextBaseClassName = usePrimaryTextBaseClassName();
+  const optionalTextBaseClassName = useOptionalTextBaseClassName();
   const textStyles = useTextStyles();
   let primaryTextSize;
   let alignToPrimaryClassName;
   if (presenceOnly) {
     if (size === 'extra-small') {
-      primaryTextSize = state.numTextLines > 1 ? textStyles.body1 : textStyles.caption1;
+      primaryTextSize = state.numTextLines <= 1 && textStyles.caption1;
     } else if (size === 'extra-large' || size === 'huge') {
       primaryTextSize = textStyles.subtitle2;
-    } else {
-      primaryTextSize = textStyles.body1;
     }
     if (alignToPrimary) {
       if (textPosition === 'before') {
@@ -221,13 +209,11 @@ const useTextClassNames = (state, alignToPrimary) => {
       primaryTextSize = textStyles.subtitle2;
     } else if (size === 'extra-large') {
       primaryTextSize = textStyles.subtitle2;
-    } else {
-      primaryTextSize = textStyles.body1;
     }
   }
   return {
-    primaryTextClassName: mergeClasses(textStyles.base, textStyles.primaryText, primaryTextSize, alignToPrimaryClassName),
-    optionalTextClassName: mergeClasses(textStyles.base, textStyles.optionalText, !presenceOnly && size === 'huge' ? textStyles.body1 : textStyles.caption1, alignToPrimaryClassName)
+    primaryTextClassName: mergeClasses(primaryTextBaseClassName, primaryTextSize, alignToPrimaryClassName),
+    optionalTextClassName: mergeClasses(optionalTextBaseClassName, !presenceOnly && size === 'huge' && textStyles.body1, alignToPrimaryClassName)
   };
 };
 //# sourceMappingURL=usePersonaStyles.js.map

package/lib/components/Persona/usePersonaStyles.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"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","names":["mergeClasses","tokens","typographyStyles","personaClassNames","root","avatar","presence","primaryText","secondaryText","tertiaryText","quaternaryText","avatarSpacing","useStyles","useAvatarSpacingStyles","usePresenceSpacingStyles","usePersonaStyles_unstable","state","presenceOnly","size","textAlignment","textPosition","alignToPrimary","alignBeforeAfterCenter","primaryTextClassName","optionalTextClassName","useTextClassNames","styles","avatarSpacingStyles","presenceSpacingStyles","className","base","beforeAfterCenter","media","mediaBeforeAfterCenter","afterAlignToPrimary","beforeAlignToPrimary","primary","secondary","secondLineSpacing","tertiary","quaternary","useTextStyles","textStyles","primaryTextSize","alignToPrimaryClassName","numTextLines","body1","caption1","subtitle2","optionalText"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-persona/src/components/Persona/usePersonaStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { PersonaSlots, PersonaState } from './Persona.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const personaClassNames: SlotClassNames<PersonaSlots> = {\n  root: 'fui-Persona',\n  avatar: 'fui-Persona__avatar',\n  presence: 'fui-Persona__presence',\n  primaryText: 'fui-Persona__primaryText',\n  secondaryText: 'fui-Persona__secondaryText',\n  tertiaryText: 'fui-Persona__tertiaryText',\n  quaternaryText: 'fui-Persona__quaternaryText',\n};\n\nconst avatarSpacing = `--fui-Persona__avatar--spacing`;\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  base: {\n    display: 'inline-grid',\n    gridAutoRows: 'max-content',\n  },\n\n  beforeAfterCenter: {\n    // This template is needed to make sure the Avatar is centered when it takes up more space than the text lines\n    gridTemplateRows:\n      '1fr [primary] max-content [secondary] max-content [tertiary] max-content [quaternary] max-content 1fr',\n  },\n\n  after: {\n    gridAutoFlow: 'column',\n    justifyItems: 'start',\n    gridTemplateColumns: 'max-content [middle] auto',\n  },\n  before: {\n    gridAutoFlow: 'column',\n    justifyItems: 'end',\n    gridTemplateColumns: 'auto [middle] max-content',\n  },\n  below: {\n    justifyItems: 'center',\n  },\n\n  media: {\n    gridRowStart: 'span 5',\n  },\n\n  mediaBeforeAfterCenter: {\n    gridRowStart: 'span 6',\n  },\n\n  start: {\n    alignSelf: 'start',\n  },\n  center: {\n    alignSelf: 'center',\n  },\n\n  afterAlignToPrimary: {\n    alignSelf: 'center',\n    gridRowStart: 'unset',\n    gridColumnEnd: 'middle',\n  },\n  beforeAlignToPrimary: {\n    alignSelf: 'center',\n    gridRowStart: 'unset',\n    gridColumnStart: 'middle',\n  },\n\n  secondLineSpacing: {\n    marginTop: '-2px',\n  },\n\n  primary: { gridRowStart: 'primary' },\n  secondary: { gridRowStart: 'secondary' },\n  tertiary: { gridRowStart: 'tertiary' },\n  quaternary: { gridRowStart: 'quaternary' },\n});\n\nconst useAvatarSpacingStyles = makeStyles({\n  'extra-small': {\n    [avatarSpacing]: tokens.spacingHorizontalSNudge,\n  },\n  small: {\n    [avatarSpacing]: tokens.spacingHorizontalS,\n  },\n  medium: {\n    [avatarSpacing]: tokens.spacingHorizontalS,\n  },\n  large: {\n    [avatarSpacing]: tokens.spacingHorizontalMNudge,\n  },\n  'extra-large': {\n    [avatarSpacing]: tokens.spacingHorizontalMNudge,\n  },\n  huge: {\n    [avatarSpacing]: tokens.spacingHorizontalM,\n  },\n  after: {\n    marginRight: `var(${avatarSpacing})`,\n  },\n  below: {\n    marginBottom: `var(${avatarSpacing})`,\n  },\n  before: {\n    marginLeft: `var(${avatarSpacing})`,\n  },\n});\n\nconst usePresenceSpacingStyles = makeStyles({\n  small: {\n    [avatarSpacing]: tokens.spacingHorizontalSNudge,\n  },\n});\n\n/**\n * Apply styling to the Persona slots based on the state\n */\nexport const usePersonaStyles_unstable = (state: PersonaState): PersonaState => {\n  const { presenceOnly, size, textAlignment, textPosition } = state;\n\n  const alignToPrimary = presenceOnly && textAlignment === 'start' && size !== 'extra-large' && size !== 'huge';\n  const alignBeforeAfterCenter = textPosition !== 'below' && textAlignment === 'center';\n  const { primaryTextClassName, optionalTextClassName } = useTextClassNames(state, alignToPrimary);\n\n  const styles = useStyles();\n  const avatarSpacingStyles = useAvatarSpacingStyles();\n  const presenceSpacingStyles = { ...avatarSpacingStyles, ...usePresenceSpacingStyles() };\n\n  state.root.className = mergeClasses(\n    personaClassNames.root,\n    styles.base,\n    alignBeforeAfterCenter && styles.beforeAfterCenter,\n    styles[textPosition],\n    state.root.className,\n  );\n\n  if (state.avatar) {\n    state.avatar.className = mergeClasses(\n      personaClassNames.avatar,\n      textPosition !== 'below' && styles.media,\n      alignBeforeAfterCenter && styles.mediaBeforeAfterCenter,\n      styles[textAlignment],\n      avatarSpacingStyles[size],\n      avatarSpacingStyles[textPosition],\n      state.avatar.className,\n    );\n  }\n\n  if (state.presence) {\n    state.presence.className = mergeClasses(\n      personaClassNames.presence,\n      textPosition !== 'below' && styles.media,\n      alignBeforeAfterCenter && styles.mediaBeforeAfterCenter,\n      styles[textAlignment],\n      presenceSpacingStyles[size],\n      presenceSpacingStyles[textPosition],\n      textPosition === 'after' && alignToPrimary && styles.afterAlignToPrimary,\n      textPosition === 'before' && alignToPrimary && styles.beforeAlignToPrimary,\n      state.presence.className,\n    );\n  }\n\n  if (state.primaryText) {\n    state.primaryText.className = mergeClasses(\n      personaClassNames.primaryText,\n      alignBeforeAfterCenter && styles.primary,\n      primaryTextClassName,\n      state.primaryText.className,\n    );\n  }\n\n  if (state.secondaryText) {\n    state.secondaryText.className = mergeClasses(\n      personaClassNames.secondaryText,\n      alignBeforeAfterCenter && styles.secondary,\n      optionalTextClassName,\n      styles.secondLineSpacing,\n      state.secondaryText.className,\n    );\n  }\n\n  if (state.tertiaryText) {\n    state.tertiaryText.className = mergeClasses(\n      personaClassNames.tertiaryText,\n      alignBeforeAfterCenter && styles.tertiary,\n      optionalTextClassName,\n      state.tertiaryText.className,\n    );\n  }\n\n  if (state.quaternaryText) {\n    state.quaternaryText.className = mergeClasses(\n      personaClassNames.quaternaryText,\n      alignBeforeAfterCenter && styles.quaternary,\n      optionalTextClassName,\n      state.quaternaryText.className,\n    );\n  }\n\n  return state;\n};\n\nconst useTextStyles = makeStyles({\n  base: {\n    display: 'block',\n  },\n  primaryText: {\n    color: tokens.colorNeutralForeground1,\n  },\n  optionalText: {\n    color: tokens.colorNeutralForeground2,\n  },\n\n  beforeAlignToPrimary: {\n    gridColumnEnd: 'middle',\n  },\n  afterAlignToPrimary: {\n    gridColumnStart: 'middle',\n  },\n\n  body1: typographyStyles.body1,\n  caption1: typographyStyles.caption1,\n  subtitle2: typographyStyles.subtitle2,\n});\n\nconst useTextClassNames = (\n  state: PersonaState,\n  alignToPrimary: boolean,\n): {\n  primaryTextClassName: string;\n  optionalTextClassName: string;\n} => {\n  const { presenceOnly, size, textPosition } = state;\n  const textStyles = useTextStyles();\n\n  let primaryTextSize;\n  let alignToPrimaryClassName;\n\n  if (presenceOnly) {\n    if (size === 'extra-small') {\n      primaryTextSize = state.numTextLines > 1 ? textStyles.body1 : textStyles.caption1;\n    } else if (size === 'extra-large' || size === 'huge') {\n      primaryTextSize = textStyles.subtitle2;\n    } else {\n      primaryTextSize = textStyles.body1;\n    }\n\n    if (alignToPrimary) {\n      if (textPosition === 'before') {\n        alignToPrimaryClassName = textStyles.beforeAlignToPrimary;\n      } else if (textPosition === 'after') {\n        alignToPrimaryClassName = textStyles.afterAlignToPrimary;\n      }\n    }\n  } else {\n    if (size === 'huge') {\n      primaryTextSize = textStyles.subtitle2;\n    } else if (size === 'extra-large') {\n      primaryTextSize = textStyles.subtitle2;\n    } else {\n      primaryTextSize = textStyles.body1;\n    }\n  }\n\n  return {\n    primaryTextClassName: mergeClasses(\n      textStyles.base,\n      textStyles.primaryText,\n      primaryTextSize,\n      alignToPrimaryClassName,\n    ),\n    optionalTextClassName: mergeClasses(\n      textStyles.base,\n      textStyles.optionalText,\n      !presenceOnly && size === 'huge' ? textStyles.body1 : textStyles.caption1,\n      alignToPrimaryClassName,\n    ),\n  };\n};\n"]}
+{"version":3,"mappings":"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","names":["mergeClasses","tokens","typographyStyles","personaClassNames","root","avatar","presence","primaryText","secondaryText","tertiaryText","quaternaryText","avatarSpacing","useRootClassName","useStyles","useAvatarSpacingStyles","usePresenceSpacingStyles","usePersonaStyles_unstable","state","presenceOnly","size","textAlignment","textPosition","alignToPrimary","alignBeforeAfterCenter","primaryTextClassName","optionalTextClassName","useTextClassNames","rootClassName","styles","avatarSpacingStyles","presenceSpacingStyles","className","beforeAfterCenter","media","mediaBeforeAfterCenter","afterAlignToPrimary","beforeAlignToPrimary","primary","secondary","secondLineSpacing","tertiary","quaternary","usePrimaryTextBaseClassName","useOptionalTextBaseClassName","useTextStyles","primaryTextBaseClassName","optionalTextBaseClassName","textStyles","primaryTextSize","alignToPrimaryClassName","numTextLines","caption1","subtitle2","body1"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-persona/src/components/Persona/usePersonaStyles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { PersonaSlots, PersonaState } from './Persona.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const personaClassNames: SlotClassNames<PersonaSlots> = {\n  root: 'fui-Persona',\n  avatar: 'fui-Persona__avatar',\n  presence: 'fui-Persona__presence',\n  primaryText: 'fui-Persona__primaryText',\n  secondaryText: 'fui-Persona__secondaryText',\n  tertiaryText: 'fui-Persona__tertiaryText',\n  quaternaryText: 'fui-Persona__quaternaryText',\n};\n\nconst avatarSpacing = `--fui-Persona__avatar--spacing`;\n\nconst useRootClassName = makeResetStyles({\n  display: 'inline-grid',\n  gridAutoRows: 'max-content',\n  gridAutoFlow: 'column',\n  justifyItems: 'start',\n  gridTemplateColumns: 'max-content [middle] auto',\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  beforeAfterCenter: {\n    // This template is needed to make sure the Avatar is centered when it takes up more space than the text lines\n    gridTemplateRows:\n      '1fr [primary] max-content [secondary] max-content [tertiary] max-content [quaternary] max-content 1fr',\n  },\n\n  after: {\n    // Intentionally empty\n  },\n  before: {\n    justifyItems: 'end',\n    gridTemplateColumns: 'auto [middle] max-content',\n  },\n  below: {\n    gridAutoFlow: 'unset',\n    justifyItems: 'center',\n    gridTemplateColumns: 'unset',\n  },\n\n  media: {\n    gridRowStart: 'span 5',\n  },\n\n  mediaBeforeAfterCenter: {\n    gridRowStart: 'span 6',\n  },\n\n  start: {\n    alignSelf: 'start',\n  },\n  center: {\n    alignSelf: 'center',\n  },\n\n  afterAlignToPrimary: {\n    alignSelf: 'center',\n    gridRowStart: 'unset',\n    gridColumnEnd: 'middle',\n  },\n  beforeAlignToPrimary: {\n    alignSelf: 'center',\n    gridRowStart: 'unset',\n    gridColumnStart: 'middle',\n  },\n\n  secondLineSpacing: {\n    marginTop: '-2px',\n  },\n\n  primary: { gridRowStart: 'primary' },\n  secondary: { gridRowStart: 'secondary' },\n  tertiary: { gridRowStart: 'tertiary' },\n  quaternary: { gridRowStart: 'quaternary' },\n});\n\nconst useAvatarSpacingStyles = makeStyles({\n  'extra-small': {\n    [avatarSpacing]: tokens.spacingHorizontalSNudge,\n  },\n  small: {\n    [avatarSpacing]: tokens.spacingHorizontalS,\n  },\n  medium: {\n    [avatarSpacing]: tokens.spacingHorizontalS,\n  },\n  large: {\n    [avatarSpacing]: tokens.spacingHorizontalMNudge,\n  },\n  'extra-large': {\n    [avatarSpacing]: tokens.spacingHorizontalMNudge,\n  },\n  huge: {\n    [avatarSpacing]: tokens.spacingHorizontalM,\n  },\n  after: {\n    marginRight: `var(${avatarSpacing})`,\n  },\n  below: {\n    marginBottom: `var(${avatarSpacing})`,\n  },\n  before: {\n    marginLeft: `var(${avatarSpacing})`,\n  },\n});\n\nconst usePresenceSpacingStyles = makeStyles({\n  small: {\n    [avatarSpacing]: tokens.spacingHorizontalSNudge,\n  },\n});\n\n/**\n * Apply styling to the Persona slots based on the state\n */\nexport const usePersonaStyles_unstable = (state: PersonaState): PersonaState => {\n  const { presenceOnly, size, textAlignment, textPosition } = state;\n\n  const alignToPrimary = presenceOnly && textAlignment === 'start' && size !== 'extra-large' && size !== 'huge';\n  const alignBeforeAfterCenter = textPosition !== 'below' && textAlignment === 'center';\n  const { primaryTextClassName, optionalTextClassName } = useTextClassNames(state, alignToPrimary);\n\n  const rootClassName = useRootClassName();\n  const styles = useStyles();\n  const avatarSpacingStyles = useAvatarSpacingStyles();\n  const presenceSpacingStyles = { ...avatarSpacingStyles, ...usePresenceSpacingStyles() };\n\n  state.root.className = mergeClasses(\n    personaClassNames.root,\n    rootClassName,\n    alignBeforeAfterCenter && styles.beforeAfterCenter,\n    styles[textPosition],\n    state.root.className,\n  );\n\n  if (state.avatar) {\n    state.avatar.className = mergeClasses(\n      personaClassNames.avatar,\n      textPosition !== 'below' && styles.media,\n      alignBeforeAfterCenter && styles.mediaBeforeAfterCenter,\n      styles[textAlignment],\n      avatarSpacingStyles[size],\n      avatarSpacingStyles[textPosition],\n      state.avatar.className,\n    );\n  }\n\n  if (state.presence) {\n    state.presence.className = mergeClasses(\n      personaClassNames.presence,\n      textPosition !== 'below' && styles.media,\n      alignBeforeAfterCenter && styles.mediaBeforeAfterCenter,\n      styles[textAlignment],\n      presenceSpacingStyles[size],\n      presenceSpacingStyles[textPosition],\n      textPosition === 'after' && alignToPrimary && styles.afterAlignToPrimary,\n      textPosition === 'before' && alignToPrimary && styles.beforeAlignToPrimary,\n      state.presence.className,\n    );\n  }\n\n  if (state.primaryText) {\n    state.primaryText.className = mergeClasses(\n      personaClassNames.primaryText,\n      alignBeforeAfterCenter && styles.primary,\n      primaryTextClassName,\n      state.primaryText.className,\n    );\n  }\n\n  if (state.secondaryText) {\n    state.secondaryText.className = mergeClasses(\n      personaClassNames.secondaryText,\n      alignBeforeAfterCenter && styles.secondary,\n      optionalTextClassName,\n      styles.secondLineSpacing,\n      state.secondaryText.className,\n    );\n  }\n\n  if (state.tertiaryText) {\n    state.tertiaryText.className = mergeClasses(\n      personaClassNames.tertiaryText,\n      alignBeforeAfterCenter && styles.tertiary,\n      optionalTextClassName,\n      state.tertiaryText.className,\n    );\n  }\n\n  if (state.quaternaryText) {\n    state.quaternaryText.className = mergeClasses(\n      personaClassNames.quaternaryText,\n      alignBeforeAfterCenter && styles.quaternary,\n      optionalTextClassName,\n      state.quaternaryText.className,\n    );\n  }\n\n  return state;\n};\n\nconst usePrimaryTextBaseClassName = makeResetStyles({\n  display: 'block',\n  color: tokens.colorNeutralForeground1,\n  ...typographyStyles.body1,\n});\n\nconst useOptionalTextBaseClassName = makeResetStyles({\n  display: 'block',\n  color: tokens.colorNeutralForeground2,\n  ...typographyStyles.caption1,\n});\n\nconst useTextStyles = makeStyles({\n  beforeAlignToPrimary: {\n    gridColumnEnd: 'middle',\n  },\n  afterAlignToPrimary: {\n    gridColumnStart: 'middle',\n  },\n\n  body1: typographyStyles.body1,\n  caption1: typographyStyles.caption1,\n  subtitle2: typographyStyles.subtitle2,\n});\n\nconst useTextClassNames = (\n  state: PersonaState,\n  alignToPrimary: boolean,\n): {\n  primaryTextClassName: string;\n  optionalTextClassName: string;\n} => {\n  const { presenceOnly, size, textPosition } = state;\n  const primaryTextBaseClassName = usePrimaryTextBaseClassName();\n  const optionalTextBaseClassName = useOptionalTextBaseClassName();\n  const textStyles = useTextStyles();\n\n  let primaryTextSize;\n  let alignToPrimaryClassName;\n\n  if (presenceOnly) {\n    if (size === 'extra-small') {\n      primaryTextSize = state.numTextLines <= 1 && textStyles.caption1;\n    } else if (size === 'extra-large' || size === 'huge') {\n      primaryTextSize = textStyles.subtitle2;\n    }\n\n    if (alignToPrimary) {\n      if (textPosition === 'before') {\n        alignToPrimaryClassName = textStyles.beforeAlignToPrimary;\n      } else if (textPosition === 'after') {\n        alignToPrimaryClassName = textStyles.afterAlignToPrimary;\n      }\n    }\n  } else {\n    if (size === 'huge') {\n      primaryTextSize = textStyles.subtitle2;\n    } else if (size === 'extra-large') {\n      primaryTextSize = textStyles.subtitle2;\n    }\n  }\n\n  return {\n    primaryTextClassName: mergeClasses(primaryTextBaseClassName, primaryTextSize, alignToPrimaryClassName),\n    optionalTextClassName: mergeClasses(\n      optionalTextBaseClassName,\n      !presenceOnly && size === 'huge' && textStyles.body1,\n      alignToPrimaryClassName,\n    ),\n  };\n};\n"]}

package/lib-commonjs/components/Persona/usePersonaStyles.js

@@ -16,29 +16,23 @@ exports.personaClassNames = {
   quaternaryText: 'fui-Persona__quaternaryText'
 };
 const avatarSpacing = `--fui-Persona__avatar--spacing`;
+const useRootClassName = /*#__PURE__*/react_1.__resetStyles("rlroi9i", null, [".rlroi9i{display:inline-grid;grid-auto-rows:max-content;grid-auto-flow:column;justify-items:start;grid-template-columns:max-content [middle] auto;}"]);
 /**
  * Styles for the root slot
  */
 const useStyles = /*#__PURE__*/react_1.__styles({
-  base: {
-    mc9l5x: "fwk3njj",
-    v29qe6: "fvtn1bl"
-  },
   beforeAfterCenter: {
     wkccdc: "f1iantul"
   },
-  after: {
-    Bxotwcr: "f1u07yai",
-    B7hvi0a: "f1m2n5bn",
-    Budl1dq: "f1c1ms5d"
-  },
+  after: {},
   before: {
-    Bxotwcr: "f1u07yai",
     B7hvi0a: "f1tll2w5",
     Budl1dq: "ffvkwdr"
   },
   below: {
-    B7hvi0a: "f1oiokrs"
+    Bxotwcr: "f1nkeedh",
+    B7hvi0a: "f1oiokrs",
+    Budl1dq: "f1emgwh2"
   },
   media: {
     Ijaq50: "f1hek2iy"
@@ -78,7 +72,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
     Ijaq50: "f1tuwaia"
   }
 }, {
-  d: [".fwk3njj{display:inline-grid;}", ".fvtn1bl{grid-auto-rows:max-content;}", ".f1iantul{grid-template-rows:1fr [primary] max-content [secondary] max-content [tertiary] max-content [quaternary] max-content 1fr;}", ".f1u07yai{grid-auto-flow:column;}", ".f1m2n5bn{justify-items:start;}", ".f1c1ms5d{grid-template-columns:max-content [middle] auto;}", ".f1tll2w5{justify-items:end;}", ".ffvkwdr{grid-template-columns:auto [middle] max-content;}", ".f1oiokrs{justify-items:center;}", ".f1hek2iy{grid-row-start:span 5;}", ".fa4dipu{grid-row-start:span 6;}", ".f9h729m{-webkit-align-self:start;-ms-flex-item-align:start;align-self:start;}", ".f7nlbp4{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}", ".f1rnkkuc{grid-row-start:unset;}", ".f1warjpf{grid-column-end:middle;}", ".fwu52yu{grid-column-start:middle;}", ".f1ryq6si{margin-top:-2px;}", ".f1q3ipgb{grid-row-start:primary;}", ".f3drtdk{grid-row-start:secondary;}", ".fa1o6s1{grid-row-start:tertiary;}", ".f1tuwaia{grid-row-start:quaternary;}"]
+  d: [".f1iantul{grid-template-rows:1fr [primary] max-content [secondary] max-content [tertiary] max-content [quaternary] max-content 1fr;}", ".f1tll2w5{justify-items:end;}", ".ffvkwdr{grid-template-columns:auto [middle] max-content;}", ".f1nkeedh{grid-auto-flow:unset;}", ".f1oiokrs{justify-items:center;}", ".f1emgwh2{grid-template-columns:unset;}", ".f1hek2iy{grid-row-start:span 5;}", ".fa4dipu{grid-row-start:span 6;}", ".f9h729m{-webkit-align-self:start;-ms-flex-item-align:start;align-self:start;}", ".f7nlbp4{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}", ".f1rnkkuc{grid-row-start:unset;}", ".f1warjpf{grid-column-end:middle;}", ".fwu52yu{grid-column-start:middle;}", ".f1ryq6si{margin-top:-2px;}", ".f1q3ipgb{grid-row-start:primary;}", ".f3drtdk{grid-row-start:secondary;}", ".fa1o6s1{grid-row-start:tertiary;}", ".f1tuwaia{grid-row-start:quaternary;}"]
 });
 const useAvatarSpacingStyles = /*#__PURE__*/react_1.__styles({
   "extra-small": {
@@ -134,13 +128,14 @@ const usePersonaStyles_unstable = state => {
     primaryTextClassName,
     optionalTextClassName
   } = useTextClassNames(state, alignToPrimary);
+  const rootClassName = useRootClassName();
   const styles = useStyles();
   const avatarSpacingStyles = useAvatarSpacingStyles();
   const presenceSpacingStyles = {
     ...avatarSpacingStyles,
     ...usePresenceSpacingStyles()
   };
-  state.root.className = react_1.mergeClasses(exports.personaClassNames.root, styles.base, alignBeforeAfterCenter && styles.beforeAfterCenter, styles[textPosition], state.root.className);
+  state.root.className = react_1.mergeClasses(exports.personaClassNames.root, rootClassName, alignBeforeAfterCenter && styles.beforeAfterCenter, styles[textPosition], state.root.className);
   if (state.avatar) {
     state.avatar.className = react_1.mergeClasses(exports.personaClassNames.avatar, textPosition !== 'below' && styles.media, alignBeforeAfterCenter && styles.mediaBeforeAfterCenter, styles[textAlignment], avatarSpacingStyles[size], avatarSpacingStyles[textPosition], state.avatar.className);
   }
@@ -162,16 +157,9 @@ const usePersonaStyles_unstable = state => {
   return state;
 };
 exports.usePersonaStyles_unstable = usePersonaStyles_unstable;
+const usePrimaryTextBaseClassName = /*#__PURE__*/react_1.__resetStyles("rvj41k9", null, [".rvj41k9{display:block;color:var(--colorNeutralForeground1);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);}"]);
+const useOptionalTextBaseClassName = /*#__PURE__*/react_1.__resetStyles("rp1pf9e", null, [".rp1pf9e{display:block;color:var(--colorNeutralForeground2);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}"]);
 const useTextStyles = /*#__PURE__*/react_1.__styles({
-  base: {
-    mc9l5x: "ftgm304"
-  },
-  primaryText: {
-    sj55zd: "f19n0e5"
-  },
-  optionalText: {
-    sj55zd: "fkfq4zb"
-  },
   beforeAlignToPrimary: {
     Bw0ie65: "f1warjpf"
   },
@@ -197,7 +185,7 @@ const useTextStyles = /*#__PURE__*/react_1.__styles({
     Bg96gwp: "faaz57k"
   }
 }, {
-  d: [".ftgm304{display:block;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f1warjpf{grid-column-end:middle;}", ".fwu52yu{grid-column-start:middle;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".faaz57k{line-height:var(--lineHeightBase400);}"]
+  d: [".f1warjpf{grid-column-end:middle;}", ".fwu52yu{grid-column-start:middle;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".faaz57k{line-height:var(--lineHeightBase400);}"]
 });
 const useTextClassNames = (state, alignToPrimary) => {
   const {
@@ -205,16 +193,16 @@ const useTextClassNames = (state, alignToPrimary) => {
     size,
     textPosition
   } = state;
+  const primaryTextBaseClassName = usePrimaryTextBaseClassName();
+  const optionalTextBaseClassName = useOptionalTextBaseClassName();
   const textStyles = useTextStyles();
   let primaryTextSize;
   let alignToPrimaryClassName;
   if (presenceOnly) {
     if (size === 'extra-small') {
-      primaryTextSize = state.numTextLines > 1 ? textStyles.body1 : textStyles.caption1;
+      primaryTextSize = state.numTextLines <= 1 && textStyles.caption1;
     } else if (size === 'extra-large' || size === 'huge') {
       primaryTextSize = textStyles.subtitle2;
-    } else {
-      primaryTextSize = textStyles.body1;
     }
     if (alignToPrimary) {
       if (textPosition === 'before') {
@@ -228,13 +216,11 @@ const useTextClassNames = (state, alignToPrimary) => {
       primaryTextSize = textStyles.subtitle2;
     } else if (size === 'extra-large') {
       primaryTextSize = textStyles.subtitle2;
-    } else {
-      primaryTextSize = textStyles.body1;
     }
   }
   return {
-    primaryTextClassName: react_1.mergeClasses(textStyles.base, textStyles.primaryText, primaryTextSize, alignToPrimaryClassName),
-    optionalTextClassName: react_1.mergeClasses(textStyles.base, textStyles.optionalText, !presenceOnly && size === 'huge' ? textStyles.body1 : textStyles.caption1, alignToPrimaryClassName)
+    primaryTextClassName: react_1.mergeClasses(primaryTextBaseClassName, primaryTextSize, alignToPrimaryClassName),
+    optionalTextClassName: react_1.mergeClasses(optionalTextBaseClassName, !presenceOnly && size === 'huge' && textStyles.body1, alignToPrimaryClassName)
   };
 };
 //# sourceMappingURL=usePersonaStyles.js.map

package/lib-commonjs/components/Persona/usePersonaStyles.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"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","names":["exports","root","avatar","presence","primaryText","secondaryText","tertiaryText","quaternaryText","avatarSpacing","useStyles","react_1","useAvatarSpacingStyles","usePresenceSpacingStyles","usePersonaStyles_unstable","state","presenceOnly","size","textAlignment","textPosition","alignToPrimary","alignBeforeAfterCenter","primaryTextClassName","optionalTextClassName","useTextClassNames","styles","avatarSpacingStyles","presenceSpacingStyles","className","base","beforeAfterCenter","media","mediaBeforeAfterCenter","afterAlignToPrimary","beforeAlignToPrimary","primary","secondary","secondLineSpacing","tertiary","quaternary","useTextStyles","textStyles","primaryTextSize","alignToPrimaryClassName","numTextLines","body1","caption1","subtitle2","optionalText"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-persona/src/components/Persona/usePersonaStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { PersonaSlots, PersonaState } from './Persona.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const personaClassNames: SlotClassNames<PersonaSlots> = {\n  root: 'fui-Persona',\n  avatar: 'fui-Persona__avatar',\n  presence: 'fui-Persona__presence',\n  primaryText: 'fui-Persona__primaryText',\n  secondaryText: 'fui-Persona__secondaryText',\n  tertiaryText: 'fui-Persona__tertiaryText',\n  quaternaryText: 'fui-Persona__quaternaryText',\n};\n\nconst avatarSpacing = `--fui-Persona__avatar--spacing`;\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  base: {\n    display: 'inline-grid',\n    gridAutoRows: 'max-content',\n  },\n\n  beforeAfterCenter: {\n    // This template is needed to make sure the Avatar is centered when it takes up more space than the text lines\n    gridTemplateRows:\n      '1fr [primary] max-content [secondary] max-content [tertiary] max-content [quaternary] max-content 1fr',\n  },\n\n  after: {\n    gridAutoFlow: 'column',\n    justifyItems: 'start',\n    gridTemplateColumns: 'max-content [middle] auto',\n  },\n  before: {\n    gridAutoFlow: 'column',\n    justifyItems: 'end',\n    gridTemplateColumns: 'auto [middle] max-content',\n  },\n  below: {\n    justifyItems: 'center',\n  },\n\n  media: {\n    gridRowStart: 'span 5',\n  },\n\n  mediaBeforeAfterCenter: {\n    gridRowStart: 'span 6',\n  },\n\n  start: {\n    alignSelf: 'start',\n  },\n  center: {\n    alignSelf: 'center',\n  },\n\n  afterAlignToPrimary: {\n    alignSelf: 'center',\n    gridRowStart: 'unset',\n    gridColumnEnd: 'middle',\n  },\n  beforeAlignToPrimary: {\n    alignSelf: 'center',\n    gridRowStart: 'unset',\n    gridColumnStart: 'middle',\n  },\n\n  secondLineSpacing: {\n    marginTop: '-2px',\n  },\n\n  primary: { gridRowStart: 'primary' },\n  secondary: { gridRowStart: 'secondary' },\n  tertiary: { gridRowStart: 'tertiary' },\n  quaternary: { gridRowStart: 'quaternary' },\n});\n\nconst useAvatarSpacingStyles = makeStyles({\n  'extra-small': {\n    [avatarSpacing]: tokens.spacingHorizontalSNudge,\n  },\n  small: {\n    [avatarSpacing]: tokens.spacingHorizontalS,\n  },\n  medium: {\n    [avatarSpacing]: tokens.spacingHorizontalS,\n  },\n  large: {\n    [avatarSpacing]: tokens.spacingHorizontalMNudge,\n  },\n  'extra-large': {\n    [avatarSpacing]: tokens.spacingHorizontalMNudge,\n  },\n  huge: {\n    [avatarSpacing]: tokens.spacingHorizontalM,\n  },\n  after: {\n    marginRight: `var(${avatarSpacing})`,\n  },\n  below: {\n    marginBottom: `var(${avatarSpacing})`,\n  },\n  before: {\n    marginLeft: `var(${avatarSpacing})`,\n  },\n});\n\nconst usePresenceSpacingStyles = makeStyles({\n  small: {\n    [avatarSpacing]: tokens.spacingHorizontalSNudge,\n  },\n});\n\n/**\n * Apply styling to the Persona slots based on the state\n */\nexport const usePersonaStyles_unstable = (state: PersonaState): PersonaState => {\n  const { presenceOnly, size, textAlignment, textPosition } = state;\n\n  const alignToPrimary = presenceOnly && textAlignment === 'start' && size !== 'extra-large' && size !== 'huge';\n  const alignBeforeAfterCenter = textPosition !== 'below' && textAlignment === 'center';\n  const { primaryTextClassName, optionalTextClassName } = useTextClassNames(state, alignToPrimary);\n\n  const styles = useStyles();\n  const avatarSpacingStyles = useAvatarSpacingStyles();\n  const presenceSpacingStyles = { ...avatarSpacingStyles, ...usePresenceSpacingStyles() };\n\n  state.root.className = mergeClasses(\n    personaClassNames.root,\n    styles.base,\n    alignBeforeAfterCenter && styles.beforeAfterCenter,\n    styles[textPosition],\n    state.root.className,\n  );\n\n  if (state.avatar) {\n    state.avatar.className = mergeClasses(\n      personaClassNames.avatar,\n      textPosition !== 'below' && styles.media,\n      alignBeforeAfterCenter && styles.mediaBeforeAfterCenter,\n      styles[textAlignment],\n      avatarSpacingStyles[size],\n      avatarSpacingStyles[textPosition],\n      state.avatar.className,\n    );\n  }\n\n  if (state.presence) {\n    state.presence.className = mergeClasses(\n      personaClassNames.presence,\n      textPosition !== 'below' && styles.media,\n      alignBeforeAfterCenter && styles.mediaBeforeAfterCenter,\n      styles[textAlignment],\n      presenceSpacingStyles[size],\n      presenceSpacingStyles[textPosition],\n      textPosition === 'after' && alignToPrimary && styles.afterAlignToPrimary,\n      textPosition === 'before' && alignToPrimary && styles.beforeAlignToPrimary,\n      state.presence.className,\n    );\n  }\n\n  if (state.primaryText) {\n    state.primaryText.className = mergeClasses(\n      personaClassNames.primaryText,\n      alignBeforeAfterCenter && styles.primary,\n      primaryTextClassName,\n      state.primaryText.className,\n    );\n  }\n\n  if (state.secondaryText) {\n    state.secondaryText.className = mergeClasses(\n      personaClassNames.secondaryText,\n      alignBeforeAfterCenter && styles.secondary,\n      optionalTextClassName,\n      styles.secondLineSpacing,\n      state.secondaryText.className,\n    );\n  }\n\n  if (state.tertiaryText) {\n    state.tertiaryText.className = mergeClasses(\n      personaClassNames.tertiaryText,\n      alignBeforeAfterCenter && styles.tertiary,\n      optionalTextClassName,\n      state.tertiaryText.className,\n    );\n  }\n\n  if (state.quaternaryText) {\n    state.quaternaryText.className = mergeClasses(\n      personaClassNames.quaternaryText,\n      alignBeforeAfterCenter && styles.quaternary,\n      optionalTextClassName,\n      state.quaternaryText.className,\n    );\n  }\n\n  return state;\n};\n\nconst useTextStyles = makeStyles({\n  base: {\n    display: 'block',\n  },\n  primaryText: {\n    color: tokens.colorNeutralForeground1,\n  },\n  optionalText: {\n    color: tokens.colorNeutralForeground2,\n  },\n\n  beforeAlignToPrimary: {\n    gridColumnEnd: 'middle',\n  },\n  afterAlignToPrimary: {\n    gridColumnStart: 'middle',\n  },\n\n  body1: typographyStyles.body1,\n  caption1: typographyStyles.caption1,\n  subtitle2: typographyStyles.subtitle2,\n});\n\nconst useTextClassNames = (\n  state: PersonaState,\n  alignToPrimary: boolean,\n): {\n  primaryTextClassName: string;\n  optionalTextClassName: string;\n} => {\n  const { presenceOnly, size, textPosition } = state;\n  const textStyles = useTextStyles();\n\n  let primaryTextSize;\n  let alignToPrimaryClassName;\n\n  if (presenceOnly) {\n    if (size === 'extra-small') {\n      primaryTextSize = state.numTextLines > 1 ? textStyles.body1 : textStyles.caption1;\n    } else if (size === 'extra-large' || size === 'huge') {\n      primaryTextSize = textStyles.subtitle2;\n    } else {\n      primaryTextSize = textStyles.body1;\n    }\n\n    if (alignToPrimary) {\n      if (textPosition === 'before') {\n        alignToPrimaryClassName = textStyles.beforeAlignToPrimary;\n      } else if (textPosition === 'after') {\n        alignToPrimaryClassName = textStyles.afterAlignToPrimary;\n      }\n    }\n  } else {\n    if (size === 'huge') {\n      primaryTextSize = textStyles.subtitle2;\n    } else if (size === 'extra-large') {\n      primaryTextSize = textStyles.subtitle2;\n    } else {\n      primaryTextSize = textStyles.body1;\n    }\n  }\n\n  return {\n    primaryTextClassName: mergeClasses(\n      textStyles.base,\n      textStyles.primaryText,\n      primaryTextSize,\n      alignToPrimaryClassName,\n    ),\n    optionalTextClassName: mergeClasses(\n      textStyles.base,\n      textStyles.optionalText,\n      !presenceOnly && size === 'huge' ? textStyles.body1 : textStyles.caption1,\n      alignToPrimaryClassName,\n    ),\n  };\n};\n"]}
+{"version":3,"mappings":"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","names":["exports","root","avatar","presence","primaryText","secondaryText","tertiaryText","quaternaryText","avatarSpacing","useRootClassName","react_1","useStyles","useAvatarSpacingStyles","usePresenceSpacingStyles","usePersonaStyles_unstable","state","presenceOnly","size","textAlignment","textPosition","alignToPrimary","alignBeforeAfterCenter","primaryTextClassName","optionalTextClassName","useTextClassNames","rootClassName","styles","avatarSpacingStyles","presenceSpacingStyles","className","beforeAfterCenter","media","mediaBeforeAfterCenter","afterAlignToPrimary","beforeAlignToPrimary","primary","secondary","secondLineSpacing","tertiary","quaternary","usePrimaryTextBaseClassName","useOptionalTextBaseClassName","useTextStyles","primaryTextBaseClassName","optionalTextBaseClassName","textStyles","primaryTextSize","alignToPrimaryClassName","numTextLines","caption1","subtitle2","body1"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-persona/src/components/Persona/usePersonaStyles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { PersonaSlots, PersonaState } from './Persona.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const personaClassNames: SlotClassNames<PersonaSlots> = {\n  root: 'fui-Persona',\n  avatar: 'fui-Persona__avatar',\n  presence: 'fui-Persona__presence',\n  primaryText: 'fui-Persona__primaryText',\n  secondaryText: 'fui-Persona__secondaryText',\n  tertiaryText: 'fui-Persona__tertiaryText',\n  quaternaryText: 'fui-Persona__quaternaryText',\n};\n\nconst avatarSpacing = `--fui-Persona__avatar--spacing`;\n\nconst useRootClassName = makeResetStyles({\n  display: 'inline-grid',\n  gridAutoRows: 'max-content',\n  gridAutoFlow: 'column',\n  justifyItems: 'start',\n  gridTemplateColumns: 'max-content [middle] auto',\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  beforeAfterCenter: {\n    // This template is needed to make sure the Avatar is centered when it takes up more space than the text lines\n    gridTemplateRows:\n      '1fr [primary] max-content [secondary] max-content [tertiary] max-content [quaternary] max-content 1fr',\n  },\n\n  after: {\n    // Intentionally empty\n  },\n  before: {\n    justifyItems: 'end',\n    gridTemplateColumns: 'auto [middle] max-content',\n  },\n  below: {\n    gridAutoFlow: 'unset',\n    justifyItems: 'center',\n    gridTemplateColumns: 'unset',\n  },\n\n  media: {\n    gridRowStart: 'span 5',\n  },\n\n  mediaBeforeAfterCenter: {\n    gridRowStart: 'span 6',\n  },\n\n  start: {\n    alignSelf: 'start',\n  },\n  center: {\n    alignSelf: 'center',\n  },\n\n  afterAlignToPrimary: {\n    alignSelf: 'center',\n    gridRowStart: 'unset',\n    gridColumnEnd: 'middle',\n  },\n  beforeAlignToPrimary: {\n    alignSelf: 'center',\n    gridRowStart: 'unset',\n    gridColumnStart: 'middle',\n  },\n\n  secondLineSpacing: {\n    marginTop: '-2px',\n  },\n\n  primary: { gridRowStart: 'primary' },\n  secondary: { gridRowStart: 'secondary' },\n  tertiary: { gridRowStart: 'tertiary' },\n  quaternary: { gridRowStart: 'quaternary' },\n});\n\nconst useAvatarSpacingStyles = makeStyles({\n  'extra-small': {\n    [avatarSpacing]: tokens.spacingHorizontalSNudge,\n  },\n  small: {\n    [avatarSpacing]: tokens.spacingHorizontalS,\n  },\n  medium: {\n    [avatarSpacing]: tokens.spacingHorizontalS,\n  },\n  large: {\n    [avatarSpacing]: tokens.spacingHorizontalMNudge,\n  },\n  'extra-large': {\n    [avatarSpacing]: tokens.spacingHorizontalMNudge,\n  },\n  huge: {\n    [avatarSpacing]: tokens.spacingHorizontalM,\n  },\n  after: {\n    marginRight: `var(${avatarSpacing})`,\n  },\n  below: {\n    marginBottom: `var(${avatarSpacing})`,\n  },\n  before: {\n    marginLeft: `var(${avatarSpacing})`,\n  },\n});\n\nconst usePresenceSpacingStyles = makeStyles({\n  small: {\n    [avatarSpacing]: tokens.spacingHorizontalSNudge,\n  },\n});\n\n/**\n * Apply styling to the Persona slots based on the state\n */\nexport const usePersonaStyles_unstable = (state: PersonaState): PersonaState => {\n  const { presenceOnly, size, textAlignment, textPosition } = state;\n\n  const alignToPrimary = presenceOnly && textAlignment === 'start' && size !== 'extra-large' && size !== 'huge';\n  const alignBeforeAfterCenter = textPosition !== 'below' && textAlignment === 'center';\n  const { primaryTextClassName, optionalTextClassName } = useTextClassNames(state, alignToPrimary);\n\n  const rootClassName = useRootClassName();\n  const styles = useStyles();\n  const avatarSpacingStyles = useAvatarSpacingStyles();\n  const presenceSpacingStyles = { ...avatarSpacingStyles, ...usePresenceSpacingStyles() };\n\n  state.root.className = mergeClasses(\n    personaClassNames.root,\n    rootClassName,\n    alignBeforeAfterCenter && styles.beforeAfterCenter,\n    styles[textPosition],\n    state.root.className,\n  );\n\n  if (state.avatar) {\n    state.avatar.className = mergeClasses(\n      personaClassNames.avatar,\n      textPosition !== 'below' && styles.media,\n      alignBeforeAfterCenter && styles.mediaBeforeAfterCenter,\n      styles[textAlignment],\n      avatarSpacingStyles[size],\n      avatarSpacingStyles[textPosition],\n      state.avatar.className,\n    );\n  }\n\n  if (state.presence) {\n    state.presence.className = mergeClasses(\n      personaClassNames.presence,\n      textPosition !== 'below' && styles.media,\n      alignBeforeAfterCenter && styles.mediaBeforeAfterCenter,\n      styles[textAlignment],\n      presenceSpacingStyles[size],\n      presenceSpacingStyles[textPosition],\n      textPosition === 'after' && alignToPrimary && styles.afterAlignToPrimary,\n      textPosition === 'before' && alignToPrimary && styles.beforeAlignToPrimary,\n      state.presence.className,\n    );\n  }\n\n  if (state.primaryText) {\n    state.primaryText.className = mergeClasses(\n      personaClassNames.primaryText,\n      alignBeforeAfterCenter && styles.primary,\n      primaryTextClassName,\n      state.primaryText.className,\n    );\n  }\n\n  if (state.secondaryText) {\n    state.secondaryText.className = mergeClasses(\n      personaClassNames.secondaryText,\n      alignBeforeAfterCenter && styles.secondary,\n      optionalTextClassName,\n      styles.secondLineSpacing,\n      state.secondaryText.className,\n    );\n  }\n\n  if (state.tertiaryText) {\n    state.tertiaryText.className = mergeClasses(\n      personaClassNames.tertiaryText,\n      alignBeforeAfterCenter && styles.tertiary,\n      optionalTextClassName,\n      state.tertiaryText.className,\n    );\n  }\n\n  if (state.quaternaryText) {\n    state.quaternaryText.className = mergeClasses(\n      personaClassNames.quaternaryText,\n      alignBeforeAfterCenter && styles.quaternary,\n      optionalTextClassName,\n      state.quaternaryText.className,\n    );\n  }\n\n  return state;\n};\n\nconst usePrimaryTextBaseClassName = makeResetStyles({\n  display: 'block',\n  color: tokens.colorNeutralForeground1,\n  ...typographyStyles.body1,\n});\n\nconst useOptionalTextBaseClassName = makeResetStyles({\n  display: 'block',\n  color: tokens.colorNeutralForeground2,\n  ...typographyStyles.caption1,\n});\n\nconst useTextStyles = makeStyles({\n  beforeAlignToPrimary: {\n    gridColumnEnd: 'middle',\n  },\n  afterAlignToPrimary: {\n    gridColumnStart: 'middle',\n  },\n\n  body1: typographyStyles.body1,\n  caption1: typographyStyles.caption1,\n  subtitle2: typographyStyles.subtitle2,\n});\n\nconst useTextClassNames = (\n  state: PersonaState,\n  alignToPrimary: boolean,\n): {\n  primaryTextClassName: string;\n  optionalTextClassName: string;\n} => {\n  const { presenceOnly, size, textPosition } = state;\n  const primaryTextBaseClassName = usePrimaryTextBaseClassName();\n  const optionalTextBaseClassName = useOptionalTextBaseClassName();\n  const textStyles = useTextStyles();\n\n  let primaryTextSize;\n  let alignToPrimaryClassName;\n\n  if (presenceOnly) {\n    if (size === 'extra-small') {\n      primaryTextSize = state.numTextLines <= 1 && textStyles.caption1;\n    } else if (size === 'extra-large' || size === 'huge') {\n      primaryTextSize = textStyles.subtitle2;\n    }\n\n    if (alignToPrimary) {\n      if (textPosition === 'before') {\n        alignToPrimaryClassName = textStyles.beforeAlignToPrimary;\n      } else if (textPosition === 'after') {\n        alignToPrimaryClassName = textStyles.afterAlignToPrimary;\n      }\n    }\n  } else {\n    if (size === 'huge') {\n      primaryTextSize = textStyles.subtitle2;\n    } else if (size === 'extra-large') {\n      primaryTextSize = textStyles.subtitle2;\n    }\n  }\n\n  return {\n    primaryTextClassName: mergeClasses(primaryTextBaseClassName, primaryTextSize, alignToPrimaryClassName),\n    optionalTextClassName: mergeClasses(\n      optionalTextBaseClassName,\n      !presenceOnly && size === 'huge' && textStyles.body1,\n      alignToPrimaryClassName,\n    ),\n  };\n};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-persona",
-  "version": "0.0.0-nightly-20230210-0425.1",
+  "version": "0.0.0-nightly-20230214-0419.1",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -27,15 +27,15 @@
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20230210-0425.1",
+    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20230214-0419.1",
     "@fluentui/scripts-api-extractor": "*",
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-avatar": "0.0.0-nightly-20230210-0425.1",
-    "@fluentui/react-badge": "0.0.0-nightly-20230210-0425.1",
-    "@fluentui/react-theme": "0.0.0-nightly-20230210-0425.1",
-    "@fluentui/react-utilities": "0.0.0-nightly-20230210-0425.1",
+    "@fluentui/react-avatar": "0.0.0-nightly-20230214-0419.1",
+    "@fluentui/react-badge": "0.0.0-nightly-20230214-0419.1",
+    "@fluentui/react-theme": "0.0.0-nightly-20230214-0419.1",
+    "@fluentui/react-utilities": "0.0.0-nightly-20230214-0419.1",
     "@griffel/react": "^1.5.2",
     "tslib": "^2.1.0"
   },