@fluentui/react-persona 0.0.0-nightly-20221007-1237.1

package/lib/components/Persona/renderPersona.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of Persona
+ */
+
+export const renderPersona_unstable = state => {
+  const {
+    presenceOnly,
+    textPosition
+  } = state;
+  const {
+    slots,
+    slotProps
+  } = getSlots(state);
+  const coin = presenceOnly ? slots.presence && /*#__PURE__*/React.createElement(slots.presence, { ...slotProps.presence
+  }) : slots.avatar && /*#__PURE__*/React.createElement(slots.avatar, { ...slotProps.avatar
+  });
+  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  }, (textPosition === 'after' || textPosition === 'below') && coin, slots.primaryText && /*#__PURE__*/React.createElement(slots.primaryText, { ...slotProps.primaryText
+  }), slots.secondaryText && /*#__PURE__*/React.createElement(slots.secondaryText, { ...slotProps.secondaryText
+  }), slots.tertiaryText && /*#__PURE__*/React.createElement(slots.tertiaryText, { ...slotProps.tertiaryText
+  }), slots.quaternaryText && /*#__PURE__*/React.createElement(slots.quaternaryText, { ...slotProps.quaternaryText
+  }), textPosition === 'before' && coin);
+};
+//# sourceMappingURL=renderPersona.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Persona/renderPersona.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,sBAAsB,GAAI,KAAD,IAAwB;EAC5D,MAAM;IAAE,YAAF;IAAgB;EAAhB,IAAiC,KAAvC;EACA,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAe,KAAf,CAArC;EAEA,MAAM,IAAI,GAAG,YAAY,GACrB,KAAK,CAAC,QAAN,iBAAkB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,EAAA,GAAK,SAAS,CAAC;EAAf,CAAf,CADG,GAErB,KAAK,CAAC,MAAN,iBAAgB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,CAFpB;EAIA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,CAAC,YAAY,KAAK,OAAjB,IAA4B,YAAY,KAAK,OAA9C,KAA0D,IAD7D,EAEG,KAAK,CAAC,WAAN,iBAAqB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,WAAP,EAAkB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAlB,CAFxB,EAGG,KAAK,CAAC,aAAN,iBAAuB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,aAAP,EAAoB,EAAA,GAAK,SAAS,CAAC;EAAf,CAApB,CAH1B,EAIG,KAAK,CAAC,YAAN,iBAAsB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,YAAP,EAAmB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAnB,CAJzB,EAKG,KAAK,CAAC,cAAN,iBAAwB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,cAAP,EAAqB,EAAA,GAAK,SAAS,CAAC;EAAf,CAArB,CAL3B,EAMG,YAAY,KAAK,QAAjB,IAA6B,IANhC,CADF;AAUD,CAlBM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { PersonaState, PersonaSlots } from './Persona.types';\n\n/**\n * Render the final JSX of Persona\n */\nexport const renderPersona_unstable = (state: PersonaState) => {\n  const { presenceOnly, textPosition } = state;\n  const { slots, slotProps } = getSlots<PersonaSlots>(state);\n\n  const coin = presenceOnly\n    ? slots.presence && <slots.presence {...slotProps.presence} />\n    : slots.avatar && <slots.avatar {...slotProps.avatar} />;\n\n  return (\n    <slots.root {...slotProps.root}>\n      {(textPosition === 'after' || textPosition === 'below') && coin}\n      {slots.primaryText && <slots.primaryText {...slotProps.primaryText} />}\n      {slots.secondaryText && <slots.secondaryText {...slotProps.secondaryText} />}\n      {slots.tertiaryText && <slots.tertiaryText {...slotProps.tertiaryText} />}\n      {slots.quaternaryText && <slots.quaternaryText {...slotProps.quaternaryText} />}\n      {textPosition === 'before' && coin}\n    </slots.root>\n  );\n};\n"],"sourceRoot":""}

package/lib/components/Persona/usePersona.js

@@ -0,0 +1,101 @@
+import { Avatar } from '@fluentui/react-avatar';
+import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
+import { PresenceBadge } from '@fluentui/react-badge';
+/**
+ * Create the state required to render Persona.
+ *
+ * The returned state can be modified with hooks such as usePersonaStyles_unstable,
+ * before being passed to renderPersona_unstable.
+ *
+ * @param props - props from this instance of Persona
+ * @param ref - reference to root HTMLElement of Persona
+ */
+
+export const usePersona_unstable = (props, ref) => {
+  const {
+    presenceOnly = false,
+    textPosition = 'after',
+    name
+  } = props;
+  const primaryText = resolveShorthand(props.primaryText, {
+    required: true,
+    defaultProps: {
+      children: name
+    }
+  });
+  const secondaryText = resolveShorthand(props.secondaryText);
+  const tertiaryText = resolveShorthand(props.tertiaryText);
+  const quaternaryText = resolveShorthand(props.quaternaryText);
+  const numTextLines = [primaryText, secondaryText, tertiaryText, quaternaryText].filter(Boolean).length;
+  let fixed = false;
+
+  if (!presenceOnly && props.avatar) {
+    fixed = !!props.avatar.size;
+  } else if (props.presence && props.presence) {
+    fixed = !!props.presence.size;
+  }
+
+  let avatarSize = undefined;
+  let presenceSize = undefined;
+
+  if (presenceOnly && !fixed) {
+    if (numTextLines === 1) {
+      presenceSize = 'small';
+    } else if (numTextLines === 2) {
+      presenceSize = 'large';
+    } else {
+      presenceSize = 'extra-large';
+    }
+  } else if (!fixed) {
+    if (numTextLines === 1) {
+      avatarSize = 16;
+    } else if (numTextLines === 2) {
+      avatarSize = 32;
+    } else if (numTextLines === 3) {
+      avatarSize = 56;
+    } else {
+      avatarSize = 72;
+    }
+  }
+
+  const avatar = !presenceOnly ? resolveShorthand(props.avatar, {
+    required: true,
+    defaultProps: {
+      name,
+      badge: props.presence,
+      size: avatarSize
+    }
+  }) : undefined;
+  const presence = presenceOnly ? resolveShorthand(props.presence, {
+    defaultProps: {
+      size: presenceSize
+    }
+  }) : undefined;
+  return {
+    fixed,
+    numTextLines,
+    presenceOnly,
+    textPosition,
+    components: {
+      root: 'div',
+      avatar: Avatar,
+      presence: PresenceBadge,
+      primaryText: 'span',
+      secondaryText: 'span',
+      tertiaryText: 'span',
+      quaternaryText: 'span'
+    },
+    root: getNativeElementProps('div', { ...props,
+      ref
+    },
+    /* excludedPropNames */
+    ['name']),
+    avatar,
+    presence,
+    primaryText,
+    secondaryText,
+    tertiaryText,
+    quaternaryText
+  };
+};
+//# sourceMappingURL=usePersona.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Persona/usePersona.ts"],"names":[],"mappings":"AACA,SAAS,MAAT,QAAuB,wBAAvB;AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AACA,SAAS,aAAT,QAA8B,uBAA9B;AAKA;;;;;;;;AAQG;;AACH,OAAO,MAAM,mBAAmB,GAAG,CAAC,KAAD,EAAsB,GAAtB,KAAmE;EACpG,MAAM;IAAE,YAAY,GAAG,KAAjB;IAAwB,YAAY,GAAG,OAAvC;IAAgD;EAAhD,IAAyD,KAA/D;EAEA,MAAM,WAAW,GAAG,gBAAgB,CAAC,KAAK,CAAC,WAAP,EAAoB;IACtD,QAAQ,EAAE,IAD4C;IAEtD,YAAY,EAAE;MACZ,QAAQ,EAAE;IADE;EAFwC,CAApB,CAApC;EAMA,MAAM,aAAa,GAAG,gBAAgB,CAAC,KAAK,CAAC,aAAP,CAAtC;EACA,MAAM,YAAY,GAAG,gBAAgB,CAAC,KAAK,CAAC,YAAP,CAArC;EACA,MAAM,cAAc,GAAG,gBAAgB,CAAC,KAAK,CAAC,cAAP,CAAvC;EAEA,MAAM,YAAY,GAAG,CAAC,WAAD,EAAc,aAAd,EAA6B,YAA7B,EAA2C,cAA3C,EAA2D,MAA3D,CAAkE,OAAlE,EAA2E,MAAhG;EAEA,IAAI,KAAK,GAAG,KAAZ;;EACA,IAAI,CAAC,YAAD,IAAiB,KAAK,CAAC,MAA3B,EAAmC;IACjC,KAAK,GAAG,CAAC,CAAE,KAAK,CAAC,MAAN,CAA6B,IAAxC;EACD,CAFD,MAEO,IAAI,KAAK,CAAC,QAAN,IAAkB,KAAK,CAAC,QAA5B,EAAsC;IAC3C,KAAK,GAAG,CAAC,CAAE,KAAK,CAAC,QAAN,CAAsC,IAAjD;EACD;;EAED,IAAI,UAAU,GAAwB,SAAtC;EACA,IAAI,YAAY,GAA+B,SAA/C;;EACA,IAAI,YAAY,IAAI,CAAC,KAArB,EAA4B;IAC1B,IAAI,YAAY,KAAK,CAArB,EAAwB;MACtB,YAAY,GAAG,OAAf;IACD,CAFD,MAEO,IAAI,YAAY,KAAK,CAArB,EAAwB;MAC7B,YAAY,GAAG,OAAf;IACD,CAFM,MAEA;MACL,YAAY,GAAG,aAAf;IACD;EACF,CARD,MAQO,IAAI,CAAC,KAAL,EAAY;IACjB,IAAI,YAAY,KAAK,CAArB,EAAwB;MACtB,UAAU,GAAG,EAAb;IACD,CAFD,MAEO,IAAI,YAAY,KAAK,CAArB,EAAwB;MAC7B,UAAU,GAAG,EAAb;IACD,CAFM,MAEA,IAAI,YAAY,KAAK,CAArB,EAAwB;MAC7B,UAAU,GAAG,EAAb;IACD,CAFM,MAEA;MACL,UAAU,GAAG,EAAb;IACD;EACF;;EAED,MAAM,MAAM,GAA2B,CAAC,YAAD,GACnC,gBAAgB,CAAC,KAAK,CAAC,MAAP,EAAe;IAC7B,QAAQ,EAAE,IADmB;IAE7B,YAAY,EAAE;MACZ,IADY;MAEZ,KAAK,EAAE,KAAK,CAAC,QAFD;MAGZ,IAAI,EAAE;IAHM;EAFe,CAAf,CADmB,GASnC,SATJ;EAWA,MAAM,QAAQ,GAA6B,YAAY,GACnD,gBAAgB,CAAC,KAAK,CAAC,QAAP,EAAiB;IAC/B,YAAY,EAAE;MACZ,IAAI,EAAE;IADM;EADiB,CAAjB,CADmC,GAMnD,SANJ;EAQA,OAAO;IACL,KADK;IAEL,YAFK;IAGL,YAHK;IAIL,YAJK;IAML,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,MAAM,EAAE,MAFE;MAGV,QAAQ,EAAE,aAHA;MAIV,WAAW,EAAE,MAJH;MAKV,aAAa,EAAE,MALL;MAMV,YAAY,EAAE,MANJ;MAOV,cAAc,EAAE;IAPN,CANP;IAgBL,IAAI,EAAE,qBAAqB,CACzB,KADyB,EAEzB,EACE,GAAG,KADL;MAEE;IAFF,CAFyB;IAMzB;IAAwB,CAAC,MAAD,CANC,CAhBtB;IAwBL,MAxBK;IAyBL,QAzBK;IA0BL,WA1BK;IA2BL,aA3BK;IA4BL,YA5BK;IA6BL;EA7BK,CAAP;AA+BD,CA9FM","sourcesContent":["import * as React from 'react';\nimport { Avatar } from '@fluentui/react-avatar';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport type { AvatarProps } from '@fluentui/react-avatar';\nimport type { PersonaProps, PersonaState } from './Persona.types';\nimport type { PresenceBadgeProps } from '@fluentui/react-badge';\n\n/**\n * Create the state required to render Persona.\n *\n * The returned state can be modified with hooks such as usePersonaStyles_unstable,\n * before being passed to renderPersona_unstable.\n *\n * @param props - props from this instance of Persona\n * @param ref - reference to root HTMLElement of Persona\n */\nexport const usePersona_unstable = (props: PersonaProps, ref: React.Ref<HTMLElement>): PersonaState => {\n  const { presenceOnly = false, textPosition = 'after', name } = props;\n\n  const primaryText = resolveShorthand(props.primaryText, {\n    required: true,\n    defaultProps: {\n      children: name,\n    },\n  });\n  const secondaryText = resolveShorthand(props.secondaryText);\n  const tertiaryText = resolveShorthand(props.tertiaryText);\n  const quaternaryText = resolveShorthand(props.quaternaryText);\n\n  const numTextLines = [primaryText, secondaryText, tertiaryText, quaternaryText].filter(Boolean).length;\n\n  let fixed = false;\n  if (!presenceOnly && props.avatar) {\n    fixed = !!(props.avatar as AvatarProps).size;\n  } else if (props.presence && props.presence) {\n    fixed = !!(props.presence as PresenceBadgeProps).size;\n  }\n\n  let avatarSize: AvatarProps['size'] = undefined;\n  let presenceSize: PresenceBadgeProps['size'] = undefined;\n  if (presenceOnly && !fixed) {\n    if (numTextLines === 1) {\n      presenceSize = 'small';\n    } else if (numTextLines === 2) {\n      presenceSize = 'large';\n    } else {\n      presenceSize = 'extra-large';\n    }\n  } else if (!fixed) {\n    if (numTextLines === 1) {\n      avatarSize = 16;\n    } else if (numTextLines === 2) {\n      avatarSize = 32;\n    } else if (numTextLines === 3) {\n      avatarSize = 56;\n    } else {\n      avatarSize = 72;\n    }\n  }\n\n  const avatar: PersonaState['avatar'] = !presenceOnly\n    ? resolveShorthand(props.avatar, {\n        required: true,\n        defaultProps: {\n          name,\n          badge: props.presence,\n          size: avatarSize,\n        },\n      })\n    : undefined;\n\n  const presence: PersonaState['presence'] = presenceOnly\n    ? resolveShorthand(props.presence, {\n        defaultProps: {\n          size: presenceSize,\n        },\n      })\n    : undefined;\n\n  return {\n    fixed,\n    numTextLines,\n    presenceOnly,\n    textPosition,\n\n    components: {\n      root: 'div',\n      avatar: Avatar,\n      presence: PresenceBadge,\n      primaryText: 'span',\n      secondaryText: 'span',\n      tertiaryText: 'span',\n      quaternaryText: 'span',\n    },\n\n    root: getNativeElementProps(\n      'div',\n      {\n        ...props,\n        ref,\n      },\n      /* excludedPropNames */ ['name'],\n    ),\n    avatar,\n    presence,\n    primaryText,\n    secondaryText,\n    tertiaryText,\n    quaternaryText,\n  };\n};\n"],"sourceRoot":""}

package/lib/components/Persona/usePersonaStyles.js

@@ -0,0 +1,208 @@
+import { __styles, mergeClasses } from '@griffel/react';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+export const personaClassNames = {
+  root: 'fui-Persona',
+  avatar: 'fui-Persona__avatar',
+  presence: 'fui-Persona__presence',
+  primaryText: 'fui-Persona__primaryText',
+  secondaryText: 'fui-Persona__secondaryText',
+  tertiaryText: 'fui-Persona__tertiaryText',
+  quaternaryText: 'fui-Persona__quaternaryText'
+};
+/**
+ * Styles for the root slot
+ */
+
+const useStyles = /*#__PURE__*/__styles({
+  "root": {
+    "mc9l5x": "fwk3njj",
+    "t4k1zu": "f4wu0r3",
+    "v29qe6": "fvtn1bl"
+  },
+  "after": {
+    "Bxotwcr": "f1u07yai",
+    "B7hvi0a": "f1m2n5bn",
+    "i8kkvl": "f4px1ci"
+  },
+  "before": {
+    "Bxotwcr": "f1u07yai",
+    "B7hvi0a": "f1tll2w5",
+    "i8kkvl": "f4px1ci"
+  },
+  "below": {
+    "B7hvi0a": "f1oiokrs"
+  },
+  "coin": {
+    "Ijaq50": "f1hek2iy"
+  },
+  "fixed": {
+    "qb2dma": "f9h729m"
+  },
+  "scaled": {
+    "qb2dma": "f7nlbp4"
+  }
+}, {
+  "d": [".fwk3njj{display:inline-grid;}", ".f4wu0r3{grid-auto-columns:max-content;}", ".fvtn1bl{grid-auto-rows:max-content;}", ".f1u07yai{grid-auto-flow:column;}", ".f1m2n5bn{justify-items:start;}", ".f4px1ci{-webkit-column-gap:8px;column-gap:8px;}", ".f1tll2w5{justify-items:end;}", ".f1oiokrs{justify-items:center;}", ".f1hek2iy{grid-row-start:span 5;}", ".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;}"]
+});
+/**
+ * Apply styling to the Persona slots based on the state
+ */
+
+
+export const usePersonaStyles_unstable = state => {
+  const {
+    fixed,
+    textPosition
+  } = state;
+  const styles = useStyles();
+  const {
+    primaryTextClassName,
+    optionalTextClassName
+  } = useTextClassNames(state);
+  state.root.className = mergeClasses(personaClassNames.root, styles.root, styles[textPosition], state.root.className);
+
+  if (state.avatar) {
+    state.avatar.className = mergeClasses(personaClassNames.avatar, styles.coin, fixed ? styles.fixed : styles.scaled, state.avatar.className);
+  }
+
+  if (state.presence) {
+    state.presence.className = mergeClasses(personaClassNames.presence, styles.coin, fixed ? styles.fixed : styles.scaled, state.presence.className);
+  }
+
+  if (state.primaryText) {
+    state.primaryText.className = mergeClasses(personaClassNames.primaryText, primaryTextClassName, state.primaryText.className);
+  }
+
+  if (state.secondaryText) {
+    state.secondaryText.className = mergeClasses(personaClassNames.secondaryText, optionalTextClassName, state.secondaryText.className);
+  }
+
+  if (state.tertiaryText) {
+    state.tertiaryText.className = mergeClasses(personaClassNames.tertiaryText, optionalTextClassName, state.tertiaryText.className);
+  }
+
+  if (state.quaternaryText) {
+    state.quaternaryText.className = mergeClasses(personaClassNames.quaternaryText, optionalTextClassName, state.quaternaryText.className);
+  }
+
+  return state;
+};
+
+const useTextStyles = /*#__PURE__*/__styles({
+  "base": {
+    "mc9l5x": "ftgm304"
+  },
+  "primaryText": {
+    "sj55zd": "f19n0e5"
+  },
+  "optionalText": {
+    "sj55zd": "fkfq4zb"
+  },
+  "body1": {
+    "Bahqtrf": "fk6fouc",
+    "Be2twd7": "fkhj508",
+    "Bhrd7zp": "figsok6",
+    "Bg96gwp": "f1i3iumi"
+  },
+  "caption1": {
+    "Bahqtrf": "fk6fouc",
+    "Be2twd7": "fy9rknc",
+    "Bhrd7zp": "figsok6",
+    "Bg96gwp": "fwrc4pm"
+  },
+  "subtitle2": {
+    "Bahqtrf": "fk6fouc",
+    "Be2twd7": "fod5ikn",
+    "Bhrd7zp": "fl43uef",
+    "Bg96gwp": "faaz57k"
+  },
+  "subtitle1": {
+    "Bahqtrf": "fk6fouc",
+    "Be2twd7": "f1pp30po",
+    "Bhrd7zp": "fl43uef",
+    "Bg96gwp": "f106mvju"
+  },
+  "title2": {
+    "Bahqtrf": "fk6fouc",
+    "Be2twd7": "fojgt09",
+    "Bhrd7zp": "fl43uef",
+    "Bg96gwp": "fcen8rp"
+  },
+  "title3": {
+    "Bahqtrf": "fk6fouc",
+    "Be2twd7": "f1x0m3f5",
+    "Bhrd7zp": "fl43uef",
+    "Bg96gwp": "fb86gi6"
+  }
+}, {
+  "d": [".ftgm304{display:block;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".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);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f106mvju{line-height:var(--lineHeightBase500);}", ".fojgt09{font-size:var(--fontSizeHero700);}", ".fcen8rp{line-height:var(--lineHeightHero700);}", ".f1x0m3f5{font-size:var(--fontSizeBase600);}", ".fb86gi6{line-height:var(--lineHeightBase600);}"]
+});
+
+const useTextClassNames = state => {
+  const {
+    fixed,
+    numTextLines,
+    presenceOnly
+  } = state;
+  const textStyles = useTextStyles();
+  let primaryTextSize;
+  let optionalTextSize;
+
+  if (fixed) {
+    if (state.avatar && state.avatar.size) {
+      const {
+        size
+      } = state.avatar;
+
+      if (size < 40) {
+        primaryTextSize = textStyles.body1;
+        optionalTextSize = textStyles.caption1;
+      } else if (size < 64) {
+        primaryTextSize = textStyles.subtitle2;
+        optionalTextSize = textStyles.body1;
+      } else if (size < 96) {
+        primaryTextSize = textStyles.subtitle1;
+        optionalTextSize = textStyles.caption1;
+      } else {
+        if (numTextLines > 1) {
+          primaryTextSize = textStyles.title3;
+        } else {
+          primaryTextSize = textStyles.title2;
+        }
+
+        optionalTextSize = textStyles.body1;
+      }
+    } else if (presenceOnly && state.presence) {
+      const {
+        size
+      } = state.presence;
+
+      if (size === 'extra-small' || size === 'tiny') {
+        if (numTextLines > 1) {
+          primaryTextSize = textStyles.body1;
+        } else {
+          primaryTextSize = textStyles.caption1;
+        }
+
+        optionalTextSize = textStyles.caption1;
+      } else {
+        primaryTextSize = textStyles.body1;
+        optionalTextSize = textStyles.caption1;
+      }
+    }
+  } else {
+    if (numTextLines > 1) {
+      primaryTextSize = textStyles.body1;
+    } else {
+      primaryTextSize = textStyles.caption1;
+    }
+
+    optionalTextSize = textStyles.caption1;
+  }
+
+  return {
+    primaryTextClassName: mergeClasses(textStyles.base, textStyles.primaryText, primaryTextSize),
+    optionalTextClassName: mergeClasses(textStyles.base, textStyles.optionalText, optionalTextSize)
+  };
+};
+//# sourceMappingURL=usePersonaStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../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\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'inline-grid',\n    gridAutoColumns: 'max-content',\n    gridAutoRows: 'max-content',\n  },\n  after: {\n    gridAutoFlow: 'column',\n    justifyItems: 'start',\n    columnGap: '8px',\n  },\n  before: {\n    gridAutoFlow: 'column',\n    justifyItems: 'end',\n    columnGap: '8px',\n  },\n  below: {\n    justifyItems: 'center',\n  },\n  coin: {\n    gridRowStart: 'span 5',\n  },\n\n  fixed: {\n    alignSelf: 'start',\n  },\n  scaled: {\n    alignSelf: 'center',\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 { fixed, textPosition } = state;\n  const styles = useStyles();\n  const { primaryTextClassName, optionalTextClassName } = useTextClassNames(state);\n\n  state.root.className = mergeClasses(personaClassNames.root, styles.root, styles[textPosition], state.root.className);\n\n  if (state.avatar) {\n    state.avatar.className = mergeClasses(\n      personaClassNames.avatar,\n      styles.coin,\n      fixed ? styles.fixed : styles.scaled,\n      state.avatar.className,\n    );\n  }\n\n  if (state.presence) {\n    state.presence.className = mergeClasses(\n      personaClassNames.presence,\n      styles.coin,\n      fixed ? styles.fixed : styles.scaled,\n      state.presence.className,\n    );\n  }\n\n  if (state.primaryText) {\n    state.primaryText.className = mergeClasses(\n      personaClassNames.primaryText,\n      primaryTextClassName,\n      state.primaryText.className,\n    );\n  }\n\n  if (state.secondaryText) {\n    state.secondaryText.className = mergeClasses(\n      personaClassNames.secondaryText,\n      optionalTextClassName,\n      state.secondaryText.className,\n    );\n  }\n\n  if (state.tertiaryText) {\n    state.tertiaryText.className = mergeClasses(\n      personaClassNames.tertiaryText,\n      optionalTextClassName,\n      state.tertiaryText.className,\n    );\n  }\n\n  if (state.quaternaryText) {\n    state.quaternaryText.className = mergeClasses(\n      personaClassNames.quaternaryText,\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  body1: typographyStyles.body1,\n  caption1: typographyStyles.caption1,\n  subtitle2: typographyStyles.subtitle2,\n  subtitle1: typographyStyles.subtitle1,\n  title2: typographyStyles.title2,\n  title3: typographyStyles.title3,\n});\n\nconst useTextClassNames = (\n  state: PersonaState,\n): {\n  primaryTextClassName: string;\n  optionalTextClassName: string;\n} => {\n  const { fixed, numTextLines, presenceOnly } = state;\n  const textStyles = useTextStyles();\n  let primaryTextSize;\n  let optionalTextSize;\n\n  if (fixed) {\n    if (state.avatar && state.avatar.size) {\n      const { size } = state.avatar;\n\n      if (size < 40) {\n        primaryTextSize = textStyles.body1;\n        optionalTextSize = textStyles.caption1;\n      } else if (size < 64) {\n        primaryTextSize = textStyles.subtitle2;\n        optionalTextSize = textStyles.body1;\n      } else if (size < 96) {\n        primaryTextSize = textStyles.subtitle1;\n        optionalTextSize = textStyles.caption1;\n      } else {\n        if (numTextLines > 1) {\n          primaryTextSize = textStyles.title3;\n        } else {\n          primaryTextSize = textStyles.title2;\n        }\n        optionalTextSize = textStyles.body1;\n      }\n    } else if (presenceOnly && state.presence) {\n      const { size } = state.presence;\n\n      if (size === 'extra-small' || size === 'tiny') {\n        if (numTextLines > 1) {\n          primaryTextSize = textStyles.body1;\n        } else {\n          primaryTextSize = textStyles.caption1;\n        }\n        optionalTextSize = textStyles.caption1;\n      } else {\n        primaryTextSize = textStyles.body1;\n        optionalTextSize = textStyles.caption1;\n      }\n    }\n  } else {\n    if (numTextLines > 1) {\n      primaryTextSize = textStyles.body1;\n    } else {\n      primaryTextSize = textStyles.caption1;\n    }\n    optionalTextSize = textStyles.caption1;\n  }\n\n  return {\n    primaryTextClassName: mergeClasses(textStyles.base, textStyles.primaryText, primaryTextSize),\n    optionalTextClassName: mergeClasses(textStyles.base, textStyles.optionalText, optionalTextSize),\n  };\n};\n"],"sourceRoot":""}

package/lib/index.js

@@ -0,0 +1,2 @@
+export { Persona, personaClassNames, renderPersona_unstable, usePersonaStyles_unstable, usePersona_unstable } from './Persona';
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"AAAA,SACE,OADF,EAEE,iBAFF,EAGE,sBAHF,EAIE,yBAJF,EAKE,mBALF,QAMO,WANP","sourcesContent":["export {\n  Persona,\n  personaClassNames,\n  renderPersona_unstable,\n  usePersonaStyles_unstable,\n  usePersona_unstable,\n} from './Persona';\nexport type { PersonaProps, PersonaSlots, PersonaState } from './Persona';\n"],"sourceRoot":""}

package/lib-commonjs/Persona.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+const tslib_1 = /*#__PURE__*/require("tslib");
+
+tslib_1.__exportStar(require("./components/Persona/index"), exports);
+//# sourceMappingURL=Persona.js.map

package/lib-commonjs/Persona.js.map

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

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

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Persona = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const renderPersona_1 = /*#__PURE__*/require("./renderPersona");
+
+const usePersona_1 = /*#__PURE__*/require("./usePersona");
+
+const usePersonaStyles_1 = /*#__PURE__*/require("./usePersonaStyles");
+/**
+ * A Persona is a visual representation of a person or status that showcases an Avatar, PresenceBadge,
+ * or an Avatar with a PresenceBadge.
+ */
+
+
+exports.Persona = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = usePersona_1.usePersona_unstable(props, ref);
+  usePersonaStyles_1.usePersonaStyles_unstable(state);
+  return renderPersona_1.renderPersona_unstable(state);
+});
+exports.Persona.displayName = 'Persona';
+//# sourceMappingURL=Persona.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Persona/Persona.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;AAIA;;;AAGG;;;AACU,OAAA,CAAA,OAAA,gBAA6C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACxF,MAAM,KAAK,GAAG,YAAA,CAAA,mBAAA,CAAoB,KAApB,EAA2B,GAA3B,CAAd;EAEA,kBAAA,CAAA,yBAAA,CAA0B,KAA1B;EACA,OAAO,eAAA,CAAA,sBAAA,CAAuB,KAAvB,CAAP;AACD,CALyD,CAA7C;AAOb,OAAA,CAAA,OAAA,CAAQ,WAAR,GAAsB,SAAtB","sourcesContent":["import * as React from 'react';\nimport { renderPersona_unstable } from './renderPersona';\nimport { usePersona_unstable } from './usePersona';\nimport { usePersonaStyles_unstable } from './usePersonaStyles';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { PersonaProps } from './Persona.types';\n\n/**\n * A Persona is a visual representation of a person or status that showcases an Avatar, PresenceBadge,\n * or an Avatar with a PresenceBadge.\n */\nexport const Persona: ForwardRefComponent<PersonaProps> = React.forwardRef((props, ref) => {\n  const state = usePersona_unstable(props, ref);\n\n  usePersonaStyles_unstable(state);\n  return renderPersona_unstable(state);\n});\n\nPersona.displayName = 'Persona';\n"],"sourceRoot":""}

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

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=Persona.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}

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

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+const tslib_1 = /*#__PURE__*/require("tslib");
+
+tslib_1.__exportStar(require("./Persona"), exports);
+
+tslib_1.__exportStar(require("./Persona.types"), exports);
+
+tslib_1.__exportStar(require("./renderPersona"), exports);
+
+tslib_1.__exportStar(require("./usePersona"), exports);
+
+tslib_1.__exportStar(require("./usePersonaStyles"), exports);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Persona/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,WAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Persona';\nexport * from './Persona.types';\nexport * from './renderPersona';\nexport * from './usePersona';\nexport * from './usePersonaStyles';\n"],"sourceRoot":""}

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

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderPersona_unstable = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+/**
+ * Render the final JSX of Persona
+ */
+
+
+const renderPersona_unstable = state => {
+  const {
+    presenceOnly,
+    textPosition
+  } = state;
+  const {
+    slots,
+    slotProps
+  } = react_utilities_1.getSlots(state);
+  const coin = presenceOnly ? slots.presence && React.createElement(slots.presence, { ...slotProps.presence
+  }) : slots.avatar && React.createElement(slots.avatar, { ...slotProps.avatar
+  });
+  return React.createElement(slots.root, { ...slotProps.root
+  }, (textPosition === 'after' || textPosition === 'below') && coin, slots.primaryText && React.createElement(slots.primaryText, { ...slotProps.primaryText
+  }), slots.secondaryText && React.createElement(slots.secondaryText, { ...slotProps.secondaryText
+  }), slots.tertiaryText && React.createElement(slots.tertiaryText, { ...slotProps.tertiaryText
+  }), slots.quaternaryText && React.createElement(slots.quaternaryText, { ...slotProps.quaternaryText
+  }), textPosition === 'before' && coin);
+};
+
+exports.renderPersona_unstable = renderPersona_unstable;
+//# sourceMappingURL=renderPersona.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Persona/renderPersona.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,sBAAsB,GAAI,KAAD,IAAwB;EAC5D,MAAM;IAAE,YAAF;IAAgB;EAAhB,IAAiC,KAAvC;EACA,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAuB,KAAvB,CAA7B;EAEA,MAAM,IAAI,GAAG,YAAY,GACrB,KAAK,CAAC,QAAN,IAAkB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,EAAA,GAAK,SAAS,CAAC;EAAf,CAAf,CADG,GAErB,KAAK,CAAC,MAAN,IAAgB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,CAFpB;EAIA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,CAAC,YAAY,KAAK,OAAjB,IAA4B,YAAY,KAAK,OAA9C,KAA0D,IAD7D,EAEG,KAAK,CAAC,WAAN,IAAqB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,WAAP,EAAkB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAlB,CAFxB,EAGG,KAAK,CAAC,aAAN,IAAuB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,aAAP,EAAoB,EAAA,GAAK,SAAS,CAAC;EAAf,CAApB,CAH1B,EAIG,KAAK,CAAC,YAAN,IAAsB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,YAAP,EAAmB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAnB,CAJzB,EAKG,KAAK,CAAC,cAAN,IAAwB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,cAAP,EAAqB,EAAA,GAAK,SAAS,CAAC;EAAf,CAArB,CAL3B,EAMG,YAAY,KAAK,QAAjB,IAA6B,IANhC,CADF;AAUD,CAlBM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { PersonaState, PersonaSlots } from './Persona.types';\n\n/**\n * Render the final JSX of Persona\n */\nexport const renderPersona_unstable = (state: PersonaState) => {\n  const { presenceOnly, textPosition } = state;\n  const { slots, slotProps } = getSlots<PersonaSlots>(state);\n\n  const coin = presenceOnly\n    ? slots.presence && <slots.presence {...slotProps.presence} />\n    : slots.avatar && <slots.avatar {...slotProps.avatar} />;\n\n  return (\n    <slots.root {...slotProps.root}>\n      {(textPosition === 'after' || textPosition === 'below') && coin}\n      {slots.primaryText && <slots.primaryText {...slotProps.primaryText} />}\n      {slots.secondaryText && <slots.secondaryText {...slotProps.secondaryText} />}\n      {slots.tertiaryText && <slots.tertiaryText {...slotProps.tertiaryText} />}\n      {slots.quaternaryText && <slots.quaternaryText {...slotProps.quaternaryText} />}\n      {textPosition === 'before' && coin}\n    </slots.root>\n  );\n};\n"],"sourceRoot":""}

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

@@ -0,0 +1,113 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePersona_unstable = void 0;
+
+const react_avatar_1 = /*#__PURE__*/require("@fluentui/react-avatar");
+
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+
+const react_badge_1 = /*#__PURE__*/require("@fluentui/react-badge");
+/**
+ * Create the state required to render Persona.
+ *
+ * The returned state can be modified with hooks such as usePersonaStyles_unstable,
+ * before being passed to renderPersona_unstable.
+ *
+ * @param props - props from this instance of Persona
+ * @param ref - reference to root HTMLElement of Persona
+ */
+
+
+const usePersona_unstable = (props, ref) => {
+  const {
+    presenceOnly = false,
+    textPosition = 'after',
+    name
+  } = props;
+  const primaryText = react_utilities_1.resolveShorthand(props.primaryText, {
+    required: true,
+    defaultProps: {
+      children: name
+    }
+  });
+  const secondaryText = react_utilities_1.resolveShorthand(props.secondaryText);
+  const tertiaryText = react_utilities_1.resolveShorthand(props.tertiaryText);
+  const quaternaryText = react_utilities_1.resolveShorthand(props.quaternaryText);
+  const numTextLines = [primaryText, secondaryText, tertiaryText, quaternaryText].filter(Boolean).length;
+  let fixed = false;
+
+  if (!presenceOnly && props.avatar) {
+    fixed = !!props.avatar.size;
+  } else if (props.presence && props.presence) {
+    fixed = !!props.presence.size;
+  }
+
+  let avatarSize = undefined;
+  let presenceSize = undefined;
+
+  if (presenceOnly && !fixed) {
+    if (numTextLines === 1) {
+      presenceSize = 'small';
+    } else if (numTextLines === 2) {
+      presenceSize = 'large';
+    } else {
+      presenceSize = 'extra-large';
+    }
+  } else if (!fixed) {
+    if (numTextLines === 1) {
+      avatarSize = 16;
+    } else if (numTextLines === 2) {
+      avatarSize = 32;
+    } else if (numTextLines === 3) {
+      avatarSize = 56;
+    } else {
+      avatarSize = 72;
+    }
+  }
+
+  const avatar = !presenceOnly ? react_utilities_1.resolveShorthand(props.avatar, {
+    required: true,
+    defaultProps: {
+      name,
+      badge: props.presence,
+      size: avatarSize
+    }
+  }) : undefined;
+  const presence = presenceOnly ? react_utilities_1.resolveShorthand(props.presence, {
+    defaultProps: {
+      size: presenceSize
+    }
+  }) : undefined;
+  return {
+    fixed,
+    numTextLines,
+    presenceOnly,
+    textPosition,
+    components: {
+      root: 'div',
+      avatar: react_avatar_1.Avatar,
+      presence: react_badge_1.PresenceBadge,
+      primaryText: 'span',
+      secondaryText: 'span',
+      tertiaryText: 'span',
+      quaternaryText: 'span'
+    },
+    root: react_utilities_1.getNativeElementProps('div', { ...props,
+      ref
+    },
+    /* excludedPropNames */
+    ['name']),
+    avatar,
+    presence,
+    primaryText,
+    secondaryText,
+    tertiaryText,
+    quaternaryText
+  };
+};
+
+exports.usePersona_unstable = usePersona_unstable;
+//# sourceMappingURL=usePersona.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Persona/usePersona.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Avatar } from '@fluentui/react-avatar';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport type { AvatarProps } from '@fluentui/react-avatar';\nimport type { PersonaProps, PersonaState } from './Persona.types';\nimport type { PresenceBadgeProps } from '@fluentui/react-badge';\n\n/**\n * Create the state required to render Persona.\n *\n * The returned state can be modified with hooks such as usePersonaStyles_unstable,\n * before being passed to renderPersona_unstable.\n *\n * @param props - props from this instance of Persona\n * @param ref - reference to root HTMLElement of Persona\n */\nexport const usePersona_unstable = (props: PersonaProps, ref: React.Ref<HTMLElement>): PersonaState => {\n  const { presenceOnly = false, textPosition = 'after', name } = props;\n\n  const primaryText = resolveShorthand(props.primaryText, {\n    required: true,\n    defaultProps: {\n      children: name,\n    },\n  });\n  const secondaryText = resolveShorthand(props.secondaryText);\n  const tertiaryText = resolveShorthand(props.tertiaryText);\n  const quaternaryText = resolveShorthand(props.quaternaryText);\n\n  const numTextLines = [primaryText, secondaryText, tertiaryText, quaternaryText].filter(Boolean).length;\n\n  let fixed = false;\n  if (!presenceOnly && props.avatar) {\n    fixed = !!(props.avatar as AvatarProps).size;\n  } else if (props.presence && props.presence) {\n    fixed = !!(props.presence as PresenceBadgeProps).size;\n  }\n\n  let avatarSize: AvatarProps['size'] = undefined;\n  let presenceSize: PresenceBadgeProps['size'] = undefined;\n  if (presenceOnly && !fixed) {\n    if (numTextLines === 1) {\n      presenceSize = 'small';\n    } else if (numTextLines === 2) {\n      presenceSize = 'large';\n    } else {\n      presenceSize = 'extra-large';\n    }\n  } else if (!fixed) {\n    if (numTextLines === 1) {\n      avatarSize = 16;\n    } else if (numTextLines === 2) {\n      avatarSize = 32;\n    } else if (numTextLines === 3) {\n      avatarSize = 56;\n    } else {\n      avatarSize = 72;\n    }\n  }\n\n  const avatar: PersonaState['avatar'] = !presenceOnly\n    ? resolveShorthand(props.avatar, {\n        required: true,\n        defaultProps: {\n          name,\n          badge: props.presence,\n          size: avatarSize,\n        },\n      })\n    : undefined;\n\n  const presence: PersonaState['presence'] = presenceOnly\n    ? resolveShorthand(props.presence, {\n        defaultProps: {\n          size: presenceSize,\n        },\n      })\n    : undefined;\n\n  return {\n    fixed,\n    numTextLines,\n    presenceOnly,\n    textPosition,\n\n    components: {\n      root: 'div',\n      avatar: Avatar,\n      presence: PresenceBadge,\n      primaryText: 'span',\n      secondaryText: 'span',\n      tertiaryText: 'span',\n      quaternaryText: 'span',\n    },\n\n    root: getNativeElementProps(\n      'div',\n      {\n        ...props,\n        ref,\n      },\n      /* excludedPropNames */ ['name'],\n    ),\n    avatar,\n    presence,\n    primaryText,\n    secondaryText,\n    tertiaryText,\n    quaternaryText,\n  };\n};\n"],"sourceRoot":""}