@fluentui/react-persona 9.1.10 → 9.1.11

package/CHANGELOG.json

@@ -2,7 +2,40 @@
   "name": "@fluentui/react-persona",
   "entries": [
     {
-      "date": "Mon, 13 Feb 2023 09:34:36 GMT",
+      "date": "Mon, 13 Feb 2023 23:40:49 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": {

package/CHANGELOG.md

@@ -1,12 +1,24 @@
 # Change Log - @fluentui/react-persona
 
-This log was last generated on Mon, 13 Feb 2023 09:34:36 GMT and should not be manually modified.
+This log was last generated on Mon, 13 Feb 2023 23:40:49 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.1.11)
+
+Mon, 13 Feb 2023 23:40:49 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:34:36 GMT 
+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

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":"../src/","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":"AAAA,kCAAsCA,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAIhE,OAAO,MAAMC,iBAAiB,GAAiC;EAC7DC,IAAI,EAAE,aAAa;EACnBC,MAAM,EAAE,qBAAqB;EAC7BC,QAAQ,EAAE,uBAAuB;EACjCC,WAAW,EAAE,0BAA0B;EACvCC,aAAa,EAAE,4BAA4B;EAC3CC,YAAY,EAAE,2BAA2B;EACzCC,cAAc,EAAE;CACjB;AAED,MAAMC,aAAa,GAAG,gCAAgC;AAEtD,MAAMC,gBAAgB,gBAAG,uLAMvB;AAEF;;;AAGA,MAAMC,SAAS,gBAAG;EAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAsDhB;AAEF,MAAMC,sBAAsB,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EA4B7B;AAEF,MAAMC,wBAAwB,gBAAG;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAI/B;AAEF;;;AAGA,OAAO,MAAMC,yBAAyB,GAAIC,KAAmB,IAAkB;EAC7E,MAAM;IAAEC,YAAY;IAAEC,IAAI;IAAEC,aAAa;IAAEC;EAAY,CAAE,GAAGJ,KAAK;EAEjE,MAAMK,cAAc,GAAGJ,YAAY,IAAIE,aAAa,KAAK,OAAO,IAAID,IAAI,KAAK,aAAa,IAAIA,IAAI,KAAK,MAAM;EAC7G,MAAMI,sBAAsB,GAAGF,YAAY,KAAK,OAAO,IAAID,aAAa,KAAK,QAAQ;EACrF,MAAM;IAAEI,oBAAoB;IAAEC;EAAqB,CAAE,GAAGC,iBAAiB,CAACT,KAAK,EAAEK,cAAc,CAAC;EAEhG,MAAMK,aAAa,GAAGf,gBAAgB,EAAE;EACxC,MAAMgB,MAAM,GAAGf,SAAS,EAAE;EAC1B,MAAMgB,mBAAmB,GAAGf,sBAAsB,EAAE;EACpD,MAAMgB,qBAAqB,GAAG;IAAE,GAAGD,mBAAmB;IAAE,GAAGd,wBAAwB;EAAE,CAAE;EAEvFE,KAAK,CAACb,IAAI,CAAC2B,SAAS,GAAG/B,YAAY,CACjCG,iBAAiB,CAACC,IAAI,EACtBuB,aAAa,EACbJ,sBAAsB,IAAIK,MAAM,CAACI,iBAAiB,EAClDJ,MAAM,CAACP,YAAY,CAAC,EACpBJ,KAAK,CAACb,IAAI,CAAC2B,SAAS,CACrB;EAED,IAAId,KAAK,CAACZ,MAAM,EAAE;IAChBY,KAAK,CAACZ,MAAM,CAAC0B,SAAS,GAAG/B,YAAY,CACnCG,iBAAiB,CAACE,MAAM,EACxBgB,YAAY,KAAK,OAAO,IAAIO,MAAM,CAACK,KAAK,EACxCV,sBAAsB,IAAIK,MAAM,CAACM,sBAAsB,EACvDN,MAAM,CAACR,aAAa,CAAC,EACrBS,mBAAmB,CAACV,IAAI,CAAC,EACzBU,mBAAmB,CAACR,YAAY,CAAC,EACjCJ,KAAK,CAACZ,MAAM,CAAC0B,SAAS,CACvB;;EAGH,IAAId,KAAK,CAACX,QAAQ,EAAE;IAClBW,KAAK,CAACX,QAAQ,CAACyB,SAAS,GAAG/B,YAAY,CACrCG,iBAAiB,CAACG,QAAQ,EAC1Be,YAAY,KAAK,OAAO,IAAIO,MAAM,CAACK,KAAK,EACxCV,sBAAsB,IAAIK,MAAM,CAACM,sBAAsB,EACvDN,MAAM,CAACR,aAAa,CAAC,EACrBU,qBAAqB,CAACX,IAAI,CAAC,EAC3BW,qBAAqB,CAACT,YAAY,CAAC,EACnCA,YAAY,KAAK,OAAO,IAAIC,cAAc,IAAIM,MAAM,CAACO,mBAAmB,EACxEd,YAAY,KAAK,QAAQ,IAAIC,cAAc,IAAIM,MAAM,CAACQ,oBAAoB,EAC1EnB,KAAK,CAACX,QAAQ,CAACyB,SAAS,CACzB;;EAGH,IAAId,KAAK,CAACV,WAAW,EAAE;IACrBU,KAAK,CAACV,WAAW,CAACwB,SAAS,GAAG/B,YAAY,CACxCG,iBAAiB,CAACI,WAAW,EAC7BgB,sBAAsB,IAAIK,MAAM,CAACS,OAAO,EACxCb,oBAAoB,EACpBP,KAAK,CAACV,WAAW,CAACwB,SAAS,CAC5B;;EAGH,IAAId,KAAK,CAACT,aAAa,EAAE;IACvBS,KAAK,CAACT,aAAa,CAACuB,SAAS,GAAG/B,YAAY,CAC1CG,iBAAiB,CAACK,aAAa,EAC/Be,sBAAsB,IAAIK,MAAM,CAACU,SAAS,EAC1Cb,qBAAqB,EACrBG,MAAM,CAACW,iBAAiB,EACxBtB,KAAK,CAACT,aAAa,CAACuB,SAAS,CAC9B;;EAGH,IAAId,KAAK,CAACR,YAAY,EAAE;IACtBQ,KAAK,CAACR,YAAY,CAACsB,SAAS,GAAG/B,YAAY,CACzCG,iBAAiB,CAACM,YAAY,EAC9Bc,sBAAsB,IAAIK,MAAM,CAACY,QAAQ,EACzCf,qBAAqB,EACrBR,KAAK,CAACR,YAAY,CAACsB,SAAS,CAC7B;;EAGH,IAAId,KAAK,CAACP,cAAc,EAAE;IACxBO,KAAK,CAACP,cAAc,CAACqB,SAAS,GAAG/B,YAAY,CAC3CG,iBAAiB,CAACO,cAAc,EAChCa,sBAAsB,IAAIK,MAAM,CAACa,UAAU,EAC3ChB,qBAAqB,EACrBR,KAAK,CAACP,cAAc,CAACqB,SAAS,CAC/B;;EAGH,OAAOd,KAAK;AACd,CAAC;AAED,MAAMyB,2BAA2B,gBAAG,8OAIlC;AAEF,MAAMC,4BAA4B,gBAAG,8OAInC;AAEF,MAAMC,aAAa,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAWpB;AAEF,MAAMlB,iBAAiB,GAAG,CACxBT,KAAmB,EACnBK,cAAuB,KAIrB;EACF,MAAM;IAAEJ,YAAY;IAAEC,IAAI;IAAEE;EAAY,CAAE,GAAGJ,KAAK;EAClD,MAAM4B,wBAAwB,GAAGH,2BAA2B,EAAE;EAC9D,MAAMI,yBAAyB,GAAGH,4BAA4B,EAAE;EAChE,MAAMI,UAAU,GAAGH,aAAa,EAAE;EAElC,IAAII,eAAe;EACnB,IAAIC,uBAAuB;EAE3B,IAAI/B,YAAY,EAAE;IAChB,IAAIC,IAAI,KAAK,aAAa,EAAE;MAC1B6B,eAAe,GAAG/B,KAAK,CAACiC,YAAY,IAAI,CAAC,IAAIH,UAAU,CAACI,QAAQ;KACjE,MAAM,IAAIhC,IAAI,KAAK,aAAa,IAAIA,IAAI,KAAK,MAAM,EAAE;MACpD6B,eAAe,GAAGD,UAAU,CAACK,SAAS;;IAGxC,IAAI9B,cAAc,EAAE;MAClB,IAAID,YAAY,KAAK,QAAQ,EAAE;QAC7B4B,uBAAuB,GAAGF,UAAU,CAACX,oBAAoB;OAC1D,MAAM,IAAIf,YAAY,KAAK,OAAO,EAAE;QACnC4B,uBAAuB,GAAGF,UAAU,CAACZ,mBAAmB;;;GAG7D,MAAM;IACL,IAAIhB,IAAI,KAAK,MAAM,EAAE;MACnB6B,eAAe,GAAGD,UAAU,CAACK,SAAS;KACvC,MAAM,IAAIjC,IAAI,KAAK,aAAa,EAAE;MACjC6B,eAAe,GAAGD,UAAU,CAACK,SAAS;;;EAI1C,OAAO;IACL5B,oBAAoB,EAAExB,YAAY,CAAC6C,wBAAwB,EAAEG,eAAe,EAAEC,uBAAuB,CAAC;IACtGxB,qBAAqB,EAAEzB,YAAY,CACjC8C,yBAAyB,EACzB,CAAC5B,YAAY,IAAIC,IAAI,KAAK,MAAM,IAAI4B,UAAU,CAACM,KAAK,EACpDJ,uBAAuB;GAE1B;AACH,CAAC","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":"../src/","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-amd/components/Persona/usePersonaStyles.js

@@ -13,30 +13,32 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"
         quaternaryText: 'fui-Persona__quaternaryText',
     };
     var avatarSpacing = "--fui-Persona__avatar--spacing";
+    var useRootClassName = react_1.makeResetStyles({
+        display: 'inline-grid',
+        gridAutoRows: 'max-content',
+        gridAutoFlow: 'column',
+        justifyItems: 'start',
+        gridTemplateColumns: 'max-content [middle] auto',
+    });
     /**
      * Styles for the root slot
      */
     var useStyles = react_1.makeStyles({
-        base: {
-            display: 'inline-grid',
-            gridAutoRows: 'max-content',
-        },
         beforeAfterCenter: {
             // This template is needed to make sure the Avatar is centered when it takes up more space than the text lines
             gridTemplateRows: '1fr [primary] max-content [secondary] max-content [tertiary] max-content [quaternary] max-content 1fr',
         },
         after: {
-            gridAutoFlow: 'column',
-            justifyItems: 'start',
-            gridTemplateColumns: 'max-content [middle] auto',
+        // Intentionally empty
         },
         before: {
-            gridAutoFlow: 'column',
             justifyItems: 'end',
             gridTemplateColumns: 'auto [middle] max-content',
         },
         below: {
+            gridAutoFlow: 'unset',
             justifyItems: 'center',
+            gridTemplateColumns: 'unset',
         },
         media: {
             gridRowStart: 'span 5',
@@ -110,10 +112,11 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"
         var alignToPrimary = presenceOnly && textAlignment === 'start' && size !== 'extra-large' && size !== 'huge';
         var alignBeforeAfterCenter = textPosition !== 'below' && textAlignment === 'center';
         var _a = useTextClassNames(state, alignToPrimary), primaryTextClassName = _a.primaryTextClassName, optionalTextClassName = _a.optionalTextClassName;
+        var rootClassName = useRootClassName();
         var styles = useStyles();
         var avatarSpacingStyles = useAvatarSpacingStyles();
         var presenceSpacingStyles = tslib_1.__assign(tslib_1.__assign({}, 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);
         }
@@ -135,16 +138,9 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"
         return state;
     };
     exports.usePersonaStyles_unstable = usePersonaStyles_unstable;
+    var usePrimaryTextBaseClassName = react_1.makeResetStyles(tslib_1.__assign({ display: 'block', color: react_theme_1.tokens.colorNeutralForeground1 }, react_theme_1.typographyStyles.body1));
+    var useOptionalTextBaseClassName = react_1.makeResetStyles(tslib_1.__assign({ display: 'block', color: react_theme_1.tokens.colorNeutralForeground2 }, react_theme_1.typographyStyles.caption1));
     var useTextStyles = react_1.makeStyles({
-        base: {
-            display: 'block',
-        },
-        primaryText: {
-            color: react_theme_1.tokens.colorNeutralForeground1,
-        },
-        optionalText: {
-            color: react_theme_1.tokens.colorNeutralForeground2,
-        },
         beforeAlignToPrimary: {
             gridColumnEnd: 'middle',
         },
@@ -157,19 +153,18 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"
     });
     var useTextClassNames = function (state, alignToPrimary) {
         var presenceOnly = state.presenceOnly, size = state.size, textPosition = state.textPosition;
+        var primaryTextBaseClassName = usePrimaryTextBaseClassName();
+        var optionalTextBaseClassName = useOptionalTextBaseClassName();
         var textStyles = useTextStyles();
         var primaryTextSize;
         var 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') {
                     alignToPrimaryClassName = textStyles.beforeAlignToPrimary;
@@ -186,13 +181,10 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"
             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),
         };
     };
 });

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

@@ -1 +1 @@
-{"version":3,"file":"usePersonaStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-persona/src/components/Persona/usePersonaStyles.ts"],"names":[],"mappings":"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","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,"file":"usePersonaStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-persona/src/components/Persona/usePersonaStyles.ts"],"names":[],"mappings":"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","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":";;;;;;AAAA;AACA;AAIaA,yBAAiB,GAAiC;EAC7DC,IAAI,EAAE,aAAa;EACnBC,MAAM,EAAE,qBAAqB;EAC7BC,QAAQ,EAAE,uBAAuB;EACjCC,WAAW,EAAE,0BAA0B;EACvCC,aAAa,EAAE,4BAA4B;EAC3CC,YAAY,EAAE,2BAA2B;EACzCC,cAAc,EAAE;CACjB;AAED,MAAMC,aAAa,GAAG,gCAAgC;AAEtD;;;AAGA,MAAMC,SAAS,gBAAGC,gBAAU;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EA4D1B;AAEF,MAAMC,sBAAsB,gBAAGD,gBAAU;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EA4BvC;AAEF,MAAME,wBAAwB,gBAAGF,gBAAU;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAIzC;AAEF;;;AAGO,MAAMG,yBAAyB,GAAIC,KAAmB,IAAkB;EAC7E,MAAM;IAAEC,YAAY;IAAEC,IAAI;IAAEC,aAAa;IAAEC;EAAY,CAAE,GAAGJ,KAAK;EAEjE,MAAMK,cAAc,GAAGJ,YAAY,IAAIE,aAAa,KAAK,OAAO,IAAID,IAAI,KAAK,aAAa,IAAIA,IAAI,KAAK,MAAM;EAC7G,MAAMI,sBAAsB,GAAGF,YAAY,KAAK,OAAO,IAAID,aAAa,KAAK,QAAQ;EACrF,MAAM;IAAEI,oBAAoB;IAAEC;EAAqB,CAAE,GAAGC,iBAAiB,CAACT,KAAK,EAAEK,cAAc,CAAC;EAEhG,MAAMK,MAAM,GAAGf,SAAS,EAAE;EAC1B,MAAMgB,mBAAmB,GAAGd,sBAAsB,EAAE;EACpD,MAAMe,qBAAqB,GAAG;IAAE,GAAGD,mBAAmB;IAAE,GAAGb,wBAAwB;EAAE,CAAE;EAEvFE,KAAK,CAACb,IAAI,CAAC0B,SAAS,GAAGjB,oBAAY,CACjCV,yBAAiB,CAACC,IAAI,EACtBuB,MAAM,CAACI,IAAI,EACXR,sBAAsB,IAAII,MAAM,CAACK,iBAAiB,EAClDL,MAAM,CAACN,YAAY,CAAC,EACpBJ,KAAK,CAACb,IAAI,CAAC0B,SAAS,CACrB;EAED,IAAIb,KAAK,CAACZ,MAAM,EAAE;IAChBY,KAAK,CAACZ,MAAM,CAACyB,SAAS,GAAGjB,oBAAY,CACnCV,yBAAiB,CAACE,MAAM,EACxBgB,YAAY,KAAK,OAAO,IAAIM,MAAM,CAACM,KAAK,EACxCV,sBAAsB,IAAII,MAAM,CAACO,sBAAsB,EACvDP,MAAM,CAACP,aAAa,CAAC,EACrBQ,mBAAmB,CAACT,IAAI,CAAC,EACzBS,mBAAmB,CAACP,YAAY,CAAC,EACjCJ,KAAK,CAACZ,MAAM,CAACyB,SAAS,CACvB;;EAGH,IAAIb,KAAK,CAACX,QAAQ,EAAE;IAClBW,KAAK,CAACX,QAAQ,CAACwB,SAAS,GAAGjB,oBAAY,CACrCV,yBAAiB,CAACG,QAAQ,EAC1Be,YAAY,KAAK,OAAO,IAAIM,MAAM,CAACM,KAAK,EACxCV,sBAAsB,IAAII,MAAM,CAACO,sBAAsB,EACvDP,MAAM,CAACP,aAAa,CAAC,EACrBS,qBAAqB,CAACV,IAAI,CAAC,EAC3BU,qBAAqB,CAACR,YAAY,CAAC,EACnCA,YAAY,KAAK,OAAO,IAAIC,cAAc,IAAIK,MAAM,CAACQ,mBAAmB,EACxEd,YAAY,KAAK,QAAQ,IAAIC,cAAc,IAAIK,MAAM,CAACS,oBAAoB,EAC1EnB,KAAK,CAACX,QAAQ,CAACwB,SAAS,CACzB;;EAGH,IAAIb,KAAK,CAACV,WAAW,EAAE;IACrBU,KAAK,CAACV,WAAW,CAACuB,SAAS,GAAGjB,oBAAY,CACxCV,yBAAiB,CAACI,WAAW,EAC7BgB,sBAAsB,IAAII,MAAM,CAACU,OAAO,EACxCb,oBAAoB,EACpBP,KAAK,CAACV,WAAW,CAACuB,SAAS,CAC5B;;EAGH,IAAIb,KAAK,CAACT,aAAa,EAAE;IACvBS,KAAK,CAACT,aAAa,CAACsB,SAAS,GAAGjB,oBAAY,CAC1CV,yBAAiB,CAACK,aAAa,EAC/Be,sBAAsB,IAAII,MAAM,CAACW,SAAS,EAC1Cb,qBAAqB,EACrBE,MAAM,CAACY,iBAAiB,EACxBtB,KAAK,CAACT,aAAa,CAACsB,SAAS,CAC9B;;EAGH,IAAIb,KAAK,CAACR,YAAY,EAAE;IACtBQ,KAAK,CAACR,YAAY,CAACqB,SAAS,GAAGjB,oBAAY,CACzCV,yBAAiB,CAACM,YAAY,EAC9Bc,sBAAsB,IAAII,MAAM,CAACa,QAAQ,EACzCf,qBAAqB,EACrBR,KAAK,CAACR,YAAY,CAACqB,SAAS,CAC7B;;EAGH,IAAIb,KAAK,CAACP,cAAc,EAAE;IACxBO,KAAK,CAACP,cAAc,CAACoB,SAAS,GAAGjB,oBAAY,CAC3CV,yBAAiB,CAACO,cAAc,EAChCa,sBAAsB,IAAII,MAAM,CAACc,UAAU,EAC3ChB,qBAAqB,EACrBR,KAAK,CAACP,cAAc,CAACoB,SAAS,CAC/B;;EAGH,OAAOb,KAAK;AACd,CAAC;AAnFYd,iCAAyB;AAqFtC,MAAMuC,aAAa,gBAAG7B,gBAAU;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAqB9B;AAEF,MAAMa,iBAAiB,GAAG,CACxBT,KAAmB,EACnBK,cAAuB,KAIrB;EACF,MAAM;IAAEJ,YAAY;IAAEC,IAAI;IAAEE;EAAY,CAAE,GAAGJ,KAAK;EAClD,MAAM0B,UAAU,GAAGD,aAAa,EAAE;EAElC,IAAIE,eAAe;EACnB,IAAIC,uBAAuB;EAE3B,IAAI3B,YAAY,EAAE;IAChB,IAAIC,IAAI,KAAK,aAAa,EAAE;MAC1ByB,eAAe,GAAG3B,KAAK,CAAC6B,YAAY,GAAG,CAAC,GAAGH,UAAU,CAACI,KAAK,GAAGJ,UAAU,CAACK,QAAQ;KAClF,MAAM,IAAI7B,IAAI,KAAK,aAAa,IAAIA,IAAI,KAAK,MAAM,EAAE;MACpDyB,eAAe,GAAGD,UAAU,CAACM,SAAS;KACvC,MAAM;MACLL,eAAe,GAAGD,UAAU,CAACI,KAAK;;IAGpC,IAAIzB,cAAc,EAAE;MAClB,IAAID,YAAY,KAAK,QAAQ,EAAE;QAC7BwB,uBAAuB,GAAGF,UAAU,CAACP,oBAAoB;OAC1D,MAAM,IAAIf,YAAY,KAAK,OAAO,EAAE;QACnCwB,uBAAuB,GAAGF,UAAU,CAACR,mBAAmB;;;GAG7D,MAAM;IACL,IAAIhB,IAAI,KAAK,MAAM,EAAE;MACnByB,eAAe,GAAGD,UAAU,CAACM,SAAS;KACvC,MAAM,IAAI9B,IAAI,KAAK,aAAa,EAAE;MACjCyB,eAAe,GAAGD,UAAU,CAACM,SAAS;KACvC,MAAM;MACLL,eAAe,GAAGD,UAAU,CAACI,KAAK;;;EAItC,OAAO;IACLvB,oBAAoB,EAAEX,oBAAY,CAChC8B,UAAU,CAACZ,IAAI,EACfY,UAAU,CAACpC,WAAW,EACtBqC,eAAe,EACfC,uBAAuB,CACxB;IACDpB,qBAAqB,EAAEZ,oBAAY,CACjC8B,UAAU,CAACZ,IAAI,EACfY,UAAU,CAACO,YAAY,EACvB,CAAChC,YAAY,IAAIC,IAAI,KAAK,MAAM,GAAGwB,UAAU,CAACI,KAAK,GAAGJ,UAAU,CAACK,QAAQ,EACzEH,uBAAuB;GAE1B;AACH,CAAC","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":"../src/","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":"../src/","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": "9.1.10",
+  "version": "9.1.11",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -32,10 +32,10 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-avatar": "^9.3.4",
-    "@fluentui/react-badge": "^9.0.24",
+    "@fluentui/react-avatar": "^9.3.5",
+    "@fluentui/react-badge": "^9.0.25",
     "@fluentui/react-theme": "^9.1.5",
-    "@fluentui/react-utilities": "^9.5.2",
+    "@fluentui/react-utilities": "^9.5.3",
     "@griffel/react": "^1.5.2",
     "tslib": "^2.1.0"
   },