@fluentui/react-persona 9.74.7-experimental.cli-api.20261006-ccaa611d58.0 → 9.75.0-experimental.css-modules.20261031-810ab07afb.0

package/CHANGELOG.md

@@ -1,23 +1,57 @@
 # Change Log - @fluentui/react-persona
 
-<!-- This log was last generated on Tue, 06 Oct 2026 11:40:28 GMT and should not be manually modified. -->
+<!-- This log was last generated on Sat, 31 Oct 2026 11:08:50 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
-## [9.74.7-experimental.cli-api.20261006-ccaa611d58.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.74.7-experimental.cli-api.20261006-ccaa611d58.0)
+## [9.75.0-experimental.css-modules.20261031-810ab07afb.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.75.0-experimental.css-modules.20261031-810ab07afb.0)
 
-Tue, 06 Oct 2026 11:40:28 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.7.8..@fluentui/react-persona_v9.74.7-experimental.cli-api.20261006-ccaa611d58.0)
+Sat, 31 Oct 2026 11:08:50 GMT
 
 ### Changes
 
-- Release 9.74.7-experimental.cli-api.20261006-ccaa611d58 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by 257645319+office-ogx-auth-helper[bot]@users.noreply.github.com)
-- Bump @fluentui/react-avatar to v9.74.7-experimental.cli-api.20261006-ccaa611d58.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
-- Bump @fluentui/react-badge to v9.74.7-experimental.cli-api.20261006-ccaa611d58.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.74.7-experimental.cli-api.20261006-ccaa611d58.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
-- Bump @fluentui/react-shared-contexts to v9.74.7-experimental.cli-api.20261006-ccaa611d58.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
-- Bump @fluentui/react-theme to v9.74.7-experimental.cli-api.20261006-ccaa611d58.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
-- Bump @fluentui/react-utilities to v9.74.7-experimental.cli-api.20261006-ccaa611d58.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Release 9.75.0-experimental.css-modules.20261031-810ab07afb ([commit](https://github.com/microsoft/fluentui/commit/undefined) by 257645319+office-ogx-auth-helper[bot]@users.noreply.github.com)
+- Bump @fluentui/react-avatar to v9.75.0-experimental.css-modules.20261031-810ab07afb.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-badge to v9.75.0-experimental.css-modules.20261031-810ab07afb.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.75.0-experimental.css-modules.20261031-810ab07afb.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.75.0-experimental.css-modules.20261031-810ab07afb.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-theme to v9.75.0-experimental.css-modules.20261031-810ab07afb.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-utilities to v9.75.0-experimental.css-modules.20261031-810ab07afb.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+
+## [9.7.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.7.11)
+
+Mon, 19 Oct 2026 16:49:01 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.7.10..@fluentui/react-persona_v9.7.11)
+
+### Patches
+
+- Bump @fluentui/react-avatar to v9.11.9 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-badge to v9.5.7 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.7 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-utilities to v9.27.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+
+## [9.7.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.7.10)
+
+Wed, 23 Sep 2026 09:04:33 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.7.9..@fluentui/react-persona_v9.7.10)
+
+### Patches
+
+- Bump @fluentui/react-avatar to v9.11.8 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+
+## [9.7.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.7.9)
+
+Tue, 22 Sep 2026 11:25:39 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.7.8..@fluentui/react-persona_v9.7.9)
+
+### Patches
+
+- fix: remove unused react-dom and @types/react-dom peer dependencies, mark @types/react as optional ([PR #36559](https://github.com/microsoft/fluentui/pull/36559) by martinhochel@microsoft.com)
+- Bump @fluentui/react-avatar to v9.11.7 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-badge to v9.5.6 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.6 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.26.4 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-utilities to v9.26.7 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
 
 ## [9.7.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.7.8)
 

package/README.md

@@ -17,3 +17,16 @@ const PersonaExample = () => {
   return <Persona name="Kevin Sturgis" secondaryText="Software Engineer" />;
 };
 ```
+
+## Opt-in CSS Modules styles
+
+The `use*Styles.styles.css` modules beside the existing Griffel hooks provide opt-in,
+layered CSS alternatives with the same exports. Configure the bundler to replace
+`.styles` with `.styles.css.ts` for source imports and `.styles.js` with
+`.styles.css.js` for built imports. Load CSS Modules as default class-name maps and
+retain the package CSS assets. Default component imports still use Griffel.
+Composed components require their own style alternatives; this does not remove
+all reachable Griffel dependencies. Browser, forced-colors, RTL, and visual-regression
+parity must be validated before switching defaults.
+
+Select the composed `Avatar` and `PresenceBadge` alternatives as well when configuring CSS selection for the complete Persona subtree.

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Persona/Persona.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderPersona_unstable } from './renderPersona';\nimport { usePersona_unstable } from './usePersona';\nimport { usePersonaStyles_unstable } from './usePersonaStyles.styles';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { PersonaProps } from './Persona.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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\n  useCustomStyleHook_unstable('usePersonaStyles_unstable')(state);\n\n  return renderPersona_unstable(state);\n});\n\nPersona.displayName = 'Persona';\n"],"names":["React","renderPersona_unstable","usePersona_unstable","usePersonaStyles_unstable","useCustomStyleHook_unstable","Persona","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,qBAAkB;AACzD,SAASC,mBAAmB,QAAQ,kBAAe;AACnD,SAASC,yBAAyB,QAAQ,+BAA4B;AAGtE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,wBAA6CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,QAAQP,oBAAoBK,OAAOC;IAEzCL,0BAA0BM;IAE1BL,4BAA4B,6BAA6BK;IAEzD,OAAOR,uBAAuBQ;AAChC,GAAG;AAEHJ,QAAQK,WAAW,GAAG"}
+{"version":3,"sources":["../../../src/components/Persona/Persona.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderPersona_unstable } from './renderPersona';\nimport { usePersona_unstable } from './usePersona';\nimport { usePersonaStyles_unstable } from './usePersonaStyles.styles';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { PersonaProps } from './Persona.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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\n  useCustomStyleHook_unstable('usePersonaStyles_unstable')(state);\n\n  return renderPersona_unstable(state);\n});\n\nPersona.displayName = 'Persona';\n"],"names":["React","renderPersona_unstable","usePersona_unstable","usePersonaStyles_unstable","useCustomStyleHook_unstable","Persona","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,qBAAkB;AACzD,SAASC,mBAAmB,QAAQ,kBAAe;AACnD,SAASC,yBAAyB,QAAQ,+BAA4B;AAGtE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,wBAA6CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,QAAQP,oBAAoBK,OAAOC;IAEzCL,0BAA0BM;IAE1BL,4BAA4B,6BAA6BK;IAEzD,OAAOR,uBAAuBQ;AAChC,GAAG;AAEHJ,QAAQK,WAAW,GAAG"}

package/lib/components/Persona/Persona.module.css

@@ -0,0 +1,176 @@
+@layer fluentui {
+  .root {
+    display: inline-grid;
+    grid-auto-rows: max-content;
+    grid-auto-flow: column;
+    justify-items: start;
+    grid-template-columns: max-content [middle] auto;
+  }
+
+  .root:where(:not(.below).alignment-center) {
+    grid-template-rows: 1fr [primary] max-content [secondary] max-content [tertiary] max-content [quaternary] max-content 1fr;
+  }
+
+  .root:where(.before) {
+    justify-items: end;
+    grid-template-columns: auto [middle] max-content;
+  }
+
+  .root:where(.below) {
+    grid-auto-flow: unset;
+    justify-items: center;
+    grid-template-columns: unset;
+  }
+
+  :where(:not(.below)) > .avatar,
+  :where(:not(.below)) > .presence {
+    grid-row-start: span 5;
+  }
+
+  :where(:not(.below).alignment-center) > .avatar,
+  :where(:not(.below).alignment-center) > .presence {
+    grid-row-start: span 6;
+  }
+
+  :where(.alignment-start) > .avatar,
+  :where(.alignment-start) > .presence {
+    align-self: start;
+  }
+
+  :where(.alignment-center) > .avatar,
+  :where(.alignment-center) > .presence {
+    align-self: center;
+  }
+
+  :where(.after.presenceOnly.alignment-start:not(.extra-large, .huge)) > .presence {
+    align-self: center;
+    grid-row-start: unset;
+    grid-column-end: middle;
+  }
+
+  :where(.before.presenceOnly.alignment-start:not(.extra-large, .huge)) > .presence {
+    align-self: center;
+    grid-row-start: unset;
+    grid-column-start: middle;
+  }
+
+  .secondaryText {
+    margin-top: calc(0px - var(--spacingVerticalXXS));
+  }
+
+  :where(:not(.below).alignment-center) > .primaryText {
+    grid-row-start: primary;
+  }
+
+  :where(:not(.below).alignment-center) > .secondaryText {
+    grid-row-start: secondary;
+  }
+
+  :where(:not(.below).alignment-center) > .tertiaryText {
+    grid-row-start: tertiary;
+  }
+
+  :where(:not(.below).alignment-center) > .quaternaryText {
+    grid-row-start: quaternary;
+  }
+
+  .root:where(.extra-small) {
+    --fui-Persona__avatar--spacing: var(--spacingHorizontalSNudge);
+  }
+
+  .root:where(.small) {
+    --fui-Persona__avatar--spacing: var(--spacingHorizontalS);
+  }
+
+  .root:where(.medium) {
+    --fui-Persona__avatar--spacing: var(--spacingHorizontalS);
+  }
+
+  .root:where(.large) {
+    --fui-Persona__avatar--spacing: var(--spacingHorizontalMNudge);
+  }
+
+  .root:where(.extra-large) {
+    --fui-Persona__avatar--spacing: var(--spacingHorizontalMNudge);
+  }
+
+  .root:where(.huge) {
+    --fui-Persona__avatar--spacing: var(--spacingHorizontalM);
+  }
+
+  :where(.after) > .avatar,
+  :where(.after) > .presence {
+    margin-inline-end: var(--fui-Persona__avatar--spacing);
+  }
+
+  :where(.below) > .avatar,
+  :where(.below) > .presence {
+    margin-bottom: var(--fui-Persona__avatar--spacing);
+  }
+
+  :where(.before) > .avatar,
+  :where(.before) > .presence {
+    margin-inline-start: var(--fui-Persona__avatar--spacing);
+  }
+
+  :where(.small) > .presence {
+    --fui-Persona__avatar--spacing: var(--spacingHorizontalSNudge);
+  }
+
+  .primaryText {
+    display: block;
+    color: var(--colorNeutralForeground1);
+    font-family: var(--fontFamilyBase);
+    font-size: var(--fontSizeBase300);
+    font-weight: var(--fontWeightRegular);
+    line-height: var(--lineHeightBase300);
+  }
+
+  .secondaryText,
+  .tertiaryText,
+  .quaternaryText {
+    display: block;
+    color: var(--colorNeutralForeground2);
+    font-family: var(--fontFamilyBase);
+    font-size: var(--fontSizeBase200);
+    font-weight: var(--fontWeightRegular);
+    line-height: var(--lineHeightBase200);
+  }
+
+  :where(.before.presenceOnly.alignment-start:not(.extra-large, .huge)) > .primaryText,
+  :where(.before.presenceOnly.alignment-start:not(.extra-large, .huge)) > .secondaryText,
+  :where(.before.presenceOnly.alignment-start:not(.extra-large, .huge)) > .tertiaryText,
+  :where(.before.presenceOnly.alignment-start:not(.extra-large, .huge)) > .quaternaryText {
+    grid-column-end: middle;
+  }
+
+  :where(.after.presenceOnly.alignment-start:not(.extra-large, .huge)) > .primaryText,
+  :where(.after.presenceOnly.alignment-start:not(.extra-large, .huge)) > .secondaryText,
+  :where(.after.presenceOnly.alignment-start:not(.extra-large, .huge)) > .tertiaryText,
+  :where(.after.presenceOnly.alignment-start:not(.extra-large, .huge)) > .quaternaryText {
+    grid-column-start: middle;
+  }
+
+  :where(.huge:not(.presenceOnly)) > .secondaryText,
+  :where(.huge:not(.presenceOnly)) > .tertiaryText,
+  :where(.huge:not(.presenceOnly)) > .quaternaryText {
+    font-family: var(--fontFamilyBase);
+    font-size: var(--fontSizeBase300);
+    font-weight: var(--fontWeightRegular);
+    line-height: var(--lineHeightBase300);
+  }
+
+  :where(.extra-small.presenceOnly.singleLine) > .primaryText {
+    font-family: var(--fontFamilyBase);
+    font-size: var(--fontSizeBase200);
+    font-weight: var(--fontWeightRegular);
+    line-height: var(--lineHeightBase200);
+  }
+
+  :where(.extra-large, .huge) > .primaryText {
+    font-family: var(--fontFamilyBase);
+    font-size: var(--fontSizeBase400);
+    font-weight: var(--fontWeightSemibold);
+    line-height: var(--lineHeightBase400);
+  }
+}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Persona/Persona.types.ts"],"sourcesContent":["import type { Avatar } from '@fluentui/react-avatar';\nimport type { PresenceBadge } from '@fluentui/react-badge';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type PersonaSlots = {\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * Avatar to display.\n   *\n   * If a PresenceBadge and an Avatar are provided, the Avatar will display the PresenceBadge as its presence.\n   */\n  avatar?: Slot<typeof Avatar>;\n\n  /**\n   * PresenceBadge to display.\n   *\n   * If `presenceOnly` is true, the PresenceBadge will be displayed instead of the Avatar.\n   */\n  presence?: Slot<typeof PresenceBadge>;\n\n  /**\n   * The first line of text in the Persona, larger than the rest of the lines.\n   *\n   * `primaryText` defaults to the `name` prop. We recomend to only use `name`, use `primaryText` when the text is\n   *  different than the `name` prop.\n   */\n  primaryText?: Slot<'span'>;\n\n  /**\n   * The second line of text in the Persona.\n   */\n  secondaryText?: Slot<'span'>;\n\n  /**\n   * The third line of text in the Persona.\n   */\n  tertiaryText?: Slot<'span'>;\n\n  /**\n   * The fourth line of text in the Persona.\n   */\n  quaternaryText?: Slot<'span'>;\n};\n\n/**\n * Persona Props\n */\nexport type PersonaProps = ComponentProps<PersonaSlots> & {\n  /**\n   * The name of the person or entity represented by the Persona.\n   *\n   * When `primaryText` is not provided, this will be used as the default value for `primaryText`.\n   */\n  name?: string;\n\n  /**\n   * Whether to display only the presence.\n   *\n   * @default false\n   */\n  presenceOnly?: boolean;\n\n  /**\n   * The size of a Persona and its text.\n   *\n   * @default medium\n   */\n  size?: 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge';\n\n  /**\n   * The position of the text relative to the avatar/presence.\n   *\n   * @default after\n   */\n  textPosition?: 'after' | 'before' | 'below';\n\n  /**\n   * The vertical alignment of the text relative to the avatar/presence.\n   *\n   * @default start\n   */\n  textAlignment?: 'center' | 'start';\n};\n\nexport type PersonaBaseProps = ComponentProps<Omit<PersonaSlots, 'avatar' | 'presence'>> & Pick<PersonaProps, 'name'>;\n\n/**\n * State used in rendering Persona\n */\nexport type PersonaState = ComponentState<PersonaSlots> &\n  Required<Pick<PersonaProps, 'presenceOnly' | 'size' | 'textAlignment' | 'textPosition'>> & {\n    /**\n     * The number of text lines used.\n     */\n    numTextLines: number;\n  };\n\nexport type PersonaBaseState = ComponentState<Omit<PersonaSlots, 'avatar' | 'presence'>> &\n  Pick<PersonaState, 'numTextLines'>;\n"],"names":[],"mappings":"AAkGA,WACqC"}
+{"version":3,"sources":["../../../src/components/Persona/Persona.types.ts"],"sourcesContent":["import type { Avatar } from '@fluentui/react-avatar';\nimport type { PresenceBadge } from '@fluentui/react-badge';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type PersonaSlots = {\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * Avatar to display.\n   *\n   * If a PresenceBadge and an Avatar are provided, the Avatar will display the PresenceBadge as its presence.\n   */\n  avatar?: Slot<typeof Avatar>;\n\n  /**\n   * PresenceBadge to display.\n   *\n   * If `presenceOnly` is true, the PresenceBadge will be displayed instead of the Avatar.\n   */\n  presence?: Slot<typeof PresenceBadge>;\n\n  /**\n   * The first line of text in the Persona, larger than the rest of the lines.\n   *\n   * `primaryText` defaults to the `name` prop. We recomend to only use `name`, use `primaryText` when the text is\n   *  different than the `name` prop.\n   */\n  primaryText?: Slot<'span'>;\n\n  /**\n   * The second line of text in the Persona.\n   */\n  secondaryText?: Slot<'span'>;\n\n  /**\n   * The third line of text in the Persona.\n   */\n  tertiaryText?: Slot<'span'>;\n\n  /**\n   * The fourth line of text in the Persona.\n   */\n  quaternaryText?: Slot<'span'>;\n};\n\n/**\n * Persona Props\n */\nexport type PersonaProps = ComponentProps<PersonaSlots> & {\n  /**\n   * The name of the person or entity represented by the Persona.\n   *\n   * When `primaryText` is not provided, this will be used as the default value for `primaryText`.\n   */\n  name?: string;\n\n  /**\n   * Whether to display only the presence.\n   *\n   * @default false\n   */\n  presenceOnly?: boolean;\n\n  /**\n   * The size of a Persona and its text.\n   *\n   * @default medium\n   */\n  size?: 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge';\n\n  /**\n   * The position of the text relative to the avatar/presence.\n   *\n   * @default after\n   */\n  textPosition?: 'after' | 'before' | 'below';\n\n  /**\n   * The vertical alignment of the text relative to the avatar/presence.\n   *\n   * @default start\n   */\n  textAlignment?: 'center' | 'start';\n};\n\nexport type PersonaBaseProps = ComponentProps<Omit<PersonaSlots, 'avatar' | 'presence'>> & Pick<PersonaProps, 'name'>;\n\n/**\n * State used in rendering Persona\n */\nexport type PersonaState = ComponentState<PersonaSlots> &\n  Required<Pick<PersonaProps, 'presenceOnly' | 'size' | 'textAlignment' | 'textPosition'>> & {\n    /**\n     * The number of text lines used.\n     */\n    numTextLines: number;\n  };\n\nexport type PersonaBaseState = ComponentState<Omit<PersonaSlots, 'avatar' | 'presence'>> &\n  Pick<PersonaState, 'numTextLines'>;\n"],"names":[],"mappings":"AAkGA,WACqC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Persona/index.ts"],"sourcesContent":["export { Persona } from './Persona';\nexport type { PersonaBaseProps, PersonaProps, PersonaSlots, PersonaBaseState, PersonaState } from './Persona.types';\nexport { renderPersona_unstable } from './renderPersona';\nexport { usePersona_unstable, usePersonaBase_unstable } from './usePersona';\nexport { personaClassNames, usePersonaStyles_unstable } from './usePersonaStyles.styles';\n"],"names":["Persona","renderPersona_unstable","usePersona_unstable","usePersonaBase_unstable","personaClassNames","usePersonaStyles_unstable"],"mappings":"AAAA,SAASA,OAAO,QAAQ,eAAY;AAEpC,SAASC,sBAAsB,QAAQ,qBAAkB;AACzD,SAASC,mBAAmB,EAAEC,uBAAuB,QAAQ,kBAAe;AAC5E,SAASC,iBAAiB,EAAEC,yBAAyB,QAAQ,+BAA4B"}
+{"version":3,"sources":["../../../src/components/Persona/index.ts"],"sourcesContent":["export { Persona } from './Persona';\nexport type { PersonaBaseProps, PersonaProps, PersonaSlots, PersonaBaseState, PersonaState } from './Persona.types';\nexport { renderPersona_unstable } from './renderPersona';\nexport { usePersona_unstable, usePersonaBase_unstable } from './usePersona';\nexport { personaClassNames, usePersonaStyles_unstable } from './usePersonaStyles.styles';\n"],"names":["Persona","renderPersona_unstable","usePersona_unstable","usePersonaBase_unstable","personaClassNames","usePersonaStyles_unstable"],"mappings":"AAAA,SAASA,OAAO,QAAQ,eAAY;AAEpC,SAASC,sBAAsB,QAAQ,qBAAkB;AACzD,SAASC,mBAAmB,EAAEC,uBAAuB,QAAQ,kBAAe;AAC5E,SAASC,iBAAiB,EAAEC,yBAAyB,QAAQ,+BAA4B"}

package/lib/components/Persona/renderPersona.js

@@ -1,5 +1,5 @@
-  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
-import { assertSlots } from "@fluentui/react-utilities";
+import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+  import { assertSlots } from "@fluentui/react-utilities";
 /**
  * Render the final JSX of Persona
  */ export const renderPersona_unstable = (state)=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Persona/renderPersona.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } 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): JSXElement => {\n  const { presenceOnly, textPosition } = state;\n  assertSlots<PersonaSlots>(state);\n\n  const coin = presenceOnly ? state.presence && <state.presence /> : state.avatar && <state.avatar />;\n\n  return (\n    <state.root>\n      {(textPosition === 'after' || textPosition === 'below') && coin}\n      {state.primaryText && <state.primaryText />}\n      {state.secondaryText && <state.secondaryText />}\n      {state.tertiaryText && <state.tertiaryText />}\n      {state.quaternaryText && <state.quaternaryText />}\n      {textPosition === 'before' && coin}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderPersona_unstable","state","presenceOnly","textPosition","coin","presence","avatar","root","primaryText","secondaryText","tertiaryText","quaternaryText"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC;IACrC,MAAM,EAAEC,YAAY,EAAEC,YAAY,EAAE,GAAGF;IACvCF,YAA0BE;IAE1B,MAAMG,OAAOF,eAAeD,MAAMI,QAAQ,kBAAI,KAACJ,MAAMI,QAAQ,QAAMJ,MAAMK,MAAM,kBAAI,KAACL,MAAMK,MAAM;IAEhG,qBACE,MAACL,MAAMM,IAAI;;YACPJ,CAAAA,iBAAiB,WAAWA,iBAAiB,OAAM,KAAMC;YAC1DH,MAAMO,WAAW,kBAAI,KAACP,MAAMO,WAAW;YACvCP,MAAMQ,aAAa,kBAAI,KAACR,MAAMQ,aAAa;YAC3CR,MAAMS,YAAY,kBAAI,KAACT,MAAMS,YAAY;YACzCT,MAAMU,cAAc,kBAAI,KAACV,MAAMU,cAAc;YAC7CR,iBAAiB,YAAYC;;;AAGpC,EAAE"}
+{"version":3,"sources":["../../../src/components/Persona/renderPersona.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } 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): JSXElement => {\n  const { presenceOnly, textPosition } = state;\n  assertSlots<PersonaSlots>(state);\n\n  const coin = presenceOnly ? state.presence && <state.presence /> : state.avatar && <state.avatar />;\n\n  return (\n    <state.root>\n      {(textPosition === 'after' || textPosition === 'below') && coin}\n      {state.primaryText && <state.primaryText />}\n      {state.secondaryText && <state.secondaryText />}\n      {state.tertiaryText && <state.tertiaryText />}\n      {state.quaternaryText && <state.quaternaryText />}\n      {textPosition === 'before' && coin}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderPersona_unstable","state","presenceOnly","textPosition","coin","presence","avatar","root","primaryText","secondaryText","tertiaryText","quaternaryText"],"mappings":";AAAA,0BAA0B,GAC1B,iDAAiD,GAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC;IACrC,MAAM,EAAEC,YAAY,EAAEC,YAAY,EAAE,GAAGF;IACvCF,YAA0BE;IAE1B,MAAMG,OAAOF,eAAeD,MAAMI,QAAQ,kBAAI,KAACJ,MAAMI,QAAQ,QAAMJ,MAAMK,MAAM,kBAAI,KAACL,MAAMK,MAAM;IAEhG,qBACE,MAACL,MAAMM,IAAI;;YACPJ,CAAAA,iBAAiB,WAAWA,iBAAiB,OAAM,KAAMC;YAC1DH,MAAMO,WAAW,kBAAI,KAACP,MAAMO,WAAW;YACvCP,MAAMQ,aAAa,kBAAI,KAACR,MAAMQ,aAAa;YAC3CR,MAAMS,YAAY,kBAAI,KAACT,MAAMS,YAAY;YACzCT,MAAMU,cAAc,kBAAI,KAACV,MAAMU,cAAc;YAC7CR,iBAAiB,YAAYC;;;AAGpC,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Persona/usePersona.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { Avatar } from '@fluentui/react-avatar';\nimport { slot } from '@fluentui/react-utilities';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport type { PersonaBaseProps, PersonaBaseState, PersonaProps, PersonaState } from './Persona.types';\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 {\n    avatar,\n    presenceOnly = false,\n    size = 'medium',\n    textAlignment = 'start',\n    textPosition = 'after',\n    presence,\n    ...baseProps\n  } = props;\n\n  const state = usePersonaBase_unstable(baseProps, ref);\n\n  return {\n    ...state,\n    presenceOnly,\n    size,\n    textAlignment,\n    textPosition,\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...state.components,\n      avatar: Avatar,\n      presence: PresenceBadge,\n    },\n    avatar: !presenceOnly\n      ? slot.optional(avatar, {\n          renderByDefault: true,\n          defaultProps: {\n            name: props.name,\n            badge: presence,\n            size: avatarSizes[size],\n          },\n          elementType: Avatar,\n        })\n      : undefined,\n    presence: presenceOnly\n      ? slot.optional(presence, {\n          defaultProps: {\n            size: presenceSizes[size],\n          },\n          elementType: PresenceBadge,\n        })\n      : undefined,\n  };\n};\n\n/**\n * Base hook for Persona component, manages state and structure common to all variants of Persona\n */\nexport const usePersonaBase_unstable = (props: PersonaBaseProps, ref?: React.Ref<HTMLElement>): PersonaBaseState => {\n  const {\n    name,\n    primaryText: primaryTextProp,\n    secondaryText: secondaryTextProp,\n    tertiaryText: tertiaryTextProp,\n    quaternaryText: quaternaryTextProp,\n    ...rest\n  } = props;\n\n  const primaryText = slot.optional(primaryTextProp, {\n    renderByDefault: true,\n    defaultProps: {\n      children: name,\n    },\n    elementType: 'span',\n  });\n  const secondaryText = slot.optional(secondaryTextProp, { elementType: 'span' });\n  const tertiaryText = slot.optional(tertiaryTextProp, { elementType: 'span' });\n  const quaternaryText = slot.optional(quaternaryTextProp, { elementType: 'span' });\n  const numTextLines = [primaryText, secondaryText, tertiaryText, quaternaryText].filter(Boolean).length;\n\n  return {\n    numTextLines,\n    components: {\n      root: 'div',\n      primaryText: 'span',\n      secondaryText: 'span',\n      tertiaryText: 'span',\n      quaternaryText: 'span',\n    },\n    root: slot.always(\n      {\n        ref: ref as React.Ref<HTMLDivElement>,\n        ...rest,\n      },\n      { elementType: 'div' },\n    ),\n    primaryText,\n    secondaryText,\n    tertiaryText,\n    quaternaryText,\n  };\n};\n\nconst presenceSizes = {\n  'extra-small': 'tiny',\n  small: 'extra-small',\n  medium: 'small',\n  large: 'medium',\n  'extra-large': 'large',\n  huge: 'large',\n} as const;\n\nconst avatarSizes = {\n  'extra-small': 20,\n  small: 28,\n  medium: 32,\n  large: 36,\n  'extra-large': 40,\n  huge: 56,\n} as const;\n"],"names":["Avatar","slot","PresenceBadge","usePersona_unstable","props","ref","avatar","presenceOnly","size","textAlignment","textPosition","presence","baseProps","state","usePersonaBase_unstable","components","optional","renderByDefault","defaultProps","name","badge","avatarSizes","elementType","undefined","presenceSizes","primaryText","primaryTextProp","secondaryText","secondaryTextProp","tertiaryText","tertiaryTextProp","quaternaryText","quaternaryTextProp","rest","children","numTextLines","filter","Boolean","length","root","always","small","medium","large","huge"],"mappings":"AAAA;AAGA,SAASA,MAAM,QAAQ,yBAAyB;AAChD,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,aAAa,QAAQ,wBAAwB;AAGtD;;;;;;;;CAQC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAqBC;IACvD,MAAM,EACJC,MAAM,EACNC,eAAe,KAAK,EACpBC,OAAO,QAAQ,EACfC,gBAAgB,OAAO,EACvBC,eAAe,OAAO,EACtBC,QAAQ,EACR,GAAGC,WACJ,GAAGR;IAEJ,MAAMS,QAAQC,wBAAwBF,WAAWP;IAEjD,OAAO;QACL,GAAGQ,KAAK;QACRN;QACAC;QACAC;QACAC;QACAK,YAAY;YACV,4DAA4D;YAC5D,GAAGF,MAAME,UAAU;YACnBT,QAAQN;YACRW,UAAUT;QACZ;QACAI,QAAQ,CAACC,eACLN,KAAKe,QAAQ,CAACV,QAAQ;YACpBW,iBAAiB;YACjBC,cAAc;gBACZC,MAAMf,MAAMe,IAAI;gBAChBC,OAAOT;gBACPH,MAAMa,WAAW,CAACb,KAAK;YACzB;YACAc,aAAatB;QACf,KACAuB;QACJZ,UAAUJ,eACNN,KAAKe,QAAQ,CAACL,UAAU;YACtBO,cAAc;gBACZV,MAAMgB,aAAa,CAAChB,KAAK;YAC3B;YACAc,aAAapB;QACf,KACAqB;IACN;AACF,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMT,0BAA0B,CAACV,OAAyBC;IAC/D,MAAM,EACJc,IAAI,EACJM,aAAaC,eAAe,EAC5BC,eAAeC,iBAAiB,EAChCC,cAAcC,gBAAgB,EAC9BC,gBAAgBC,kBAAkB,EAClC,GAAGC,MACJ,GAAG7B;IAEJ,MAAMqB,cAAcxB,KAAKe,QAAQ,CAACU,iBAAiB;QACjDT,iBAAiB;QACjBC,cAAc;YACZgB,UAAUf;QACZ;QACAG,aAAa;IACf;IACA,MAAMK,gBAAgB1B,KAAKe,QAAQ,CAACY,mBAAmB;QAAEN,aAAa;IAAO;IAC7E,MAAMO,eAAe5B,KAAKe,QAAQ,CAACc,kBAAkB;QAAER,aAAa;IAAO;IAC3E,MAAMS,iBAAiB9B,KAAKe,QAAQ,CAACgB,oBAAoB;QAAEV,aAAa;IAAO;IAC/E,MAAMa,eAAe;QAACV;QAAaE;QAAeE;QAAcE;KAAe,CAACK,MAAM,CAACC,SAASC,MAAM;IAEtG,OAAO;QACLH;QACApB,YAAY;YACVwB,MAAM;YACNd,aAAa;YACbE,eAAe;YACfE,cAAc;YACdE,gBAAgB;QAClB;QACAQ,MAAMtC,KAAKuC,MAAM,CACf;YACEnC,KAAKA;YACL,GAAG4B,IAAI;QACT,GACA;YAAEX,aAAa;QAAM;QAEvBG;QACAE;QACAE;QACAE;IACF;AACF,EAAE;AAEF,MAAMP,gBAAgB;IACpB,eAAe;IACfiB,OAAO;IACPC,QAAQ;IACRC,OAAO;IACP,eAAe;IACfC,MAAM;AACR;AAEA,MAAMvB,cAAc;IAClB,eAAe;IACfoB,OAAO;IACPC,QAAQ;IACRC,OAAO;IACP,eAAe;IACfC,MAAM;AACR"}
+{"version":3,"sources":["../../../src/components/Persona/usePersona.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { Avatar } from '@fluentui/react-avatar';\nimport { slot } from '@fluentui/react-utilities';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport type { PersonaBaseProps, PersonaBaseState, PersonaProps, PersonaState } from './Persona.types';\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 {\n    avatar,\n    presenceOnly = false,\n    size = 'medium',\n    textAlignment = 'start',\n    textPosition = 'after',\n    presence,\n    ...baseProps\n  } = props;\n\n  const state = usePersonaBase_unstable(baseProps, ref);\n\n  return {\n    ...state,\n    presenceOnly,\n    size,\n    textAlignment,\n    textPosition,\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...state.components,\n      avatar: Avatar,\n      presence: PresenceBadge,\n    },\n    avatar: !presenceOnly\n      ? slot.optional(avatar, {\n          renderByDefault: true,\n          defaultProps: {\n            name: props.name,\n            badge: presence,\n            size: avatarSizes[size],\n          },\n          elementType: Avatar,\n        })\n      : undefined,\n    presence: presenceOnly\n      ? slot.optional(presence, {\n          defaultProps: {\n            size: presenceSizes[size],\n          },\n          elementType: PresenceBadge,\n        })\n      : undefined,\n  };\n};\n\n/**\n * Base hook for Persona component, manages state and structure common to all variants of Persona\n */\nexport const usePersonaBase_unstable = (props: PersonaBaseProps, ref?: React.Ref<HTMLElement>): PersonaBaseState => {\n  const {\n    name,\n    primaryText: primaryTextProp,\n    secondaryText: secondaryTextProp,\n    tertiaryText: tertiaryTextProp,\n    quaternaryText: quaternaryTextProp,\n    ...rest\n  } = props;\n\n  const primaryText = slot.optional(primaryTextProp, {\n    renderByDefault: true,\n    defaultProps: {\n      children: name,\n    },\n    elementType: 'span',\n  });\n  const secondaryText = slot.optional(secondaryTextProp, { elementType: 'span' });\n  const tertiaryText = slot.optional(tertiaryTextProp, { elementType: 'span' });\n  const quaternaryText = slot.optional(quaternaryTextProp, { elementType: 'span' });\n  const numTextLines = [primaryText, secondaryText, tertiaryText, quaternaryText].filter(Boolean).length;\n\n  return {\n    numTextLines,\n    components: {\n      root: 'div',\n      primaryText: 'span',\n      secondaryText: 'span',\n      tertiaryText: 'span',\n      quaternaryText: 'span',\n    },\n    root: slot.always(\n      {\n        ref: ref as React.Ref<HTMLDivElement>,\n        ...rest,\n      },\n      { elementType: 'div' },\n    ),\n    primaryText,\n    secondaryText,\n    tertiaryText,\n    quaternaryText,\n  };\n};\n\nconst presenceSizes = {\n  'extra-small': 'tiny',\n  small: 'extra-small',\n  medium: 'small',\n  large: 'medium',\n  'extra-large': 'large',\n  huge: 'large',\n} as const;\n\nconst avatarSizes = {\n  'extra-small': 20,\n  small: 28,\n  medium: 32,\n  large: 36,\n  'extra-large': 40,\n  huge: 56,\n} as const;\n"],"names":["Avatar","slot","PresenceBadge","usePersona_unstable","props","ref","avatar","presenceOnly","size","textAlignment","textPosition","presence","baseProps","state","usePersonaBase_unstable","components","optional","renderByDefault","defaultProps","name","badge","avatarSizes","elementType","undefined","presenceSizes","primaryText","primaryTextProp","secondaryText","secondaryTextProp","tertiaryText","tertiaryTextProp","quaternaryText","quaternaryTextProp","rest","children","numTextLines","filter","Boolean","length","root","always","small","medium","large","huge"],"mappings":"AAAA;AAGA,SAASA,MAAM,QAAQ,yBAAyB;AAChD,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,aAAa,QAAQ,wBAAwB;AAGtD;;;;;;;;CAQC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAqBC;IACvD,MAAM,EACJC,MAAM,EACNC,eAAe,KAAK,EACpBC,OAAO,QAAQ,EACfC,gBAAgB,OAAO,EACvBC,eAAe,OAAO,EACtBC,QAAQ,EACR,GAAGC,WACJ,GAAGR;IAEJ,MAAMS,QAAQC,wBAAwBF,WAAWP;IAEjD,OAAO;QACL,GAAGQ,KAAK;QACRN;QACAC;QACAC;QACAC;QACAK,YAAY;YACV,4DAA4D;YAC5D,GAAGF,MAAME,UAAU;YACnBT,QAAQN;YACRW,UAAUT;QACZ;QACAI,QAAQ,CAACC,eACLN,KAAKe,QAAQ,CAACV,QAAQ;YACpBW,iBAAiB;YACjBC,cAAc;gBACZC,MAAMf,MAAMe,IAAI;gBAChBC,OAAOT;gBACPH,MAAMa,WAAW,CAACb,KAAK;YACzB;YACAc,aAAatB;QACf,KACAuB;QACJZ,UAAUJ,eACNN,KAAKe,QAAQ,CAACL,UAAU;YACtBO,cAAc;gBACZV,MAAMgB,aAAa,CAAChB,KAAK;YAC3B;YACAc,aAAapB;QACf,KACAqB;IACN;AACF,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMT,0BAA0B,CAACV,OAAyBC;IAC/D,MAAM,EACJc,IAAI,EACJM,aAAaC,eAAe,EAC5BC,eAAeC,iBAAiB,EAChCC,cAAcC,gBAAgB,EAC9BC,gBAAgBC,kBAAkB,EAClC,GAAGC,MACJ,GAAG7B;IAEJ,MAAMqB,cAAcxB,KAAKe,QAAQ,CAACU,iBAAiB;QACjDT,iBAAiB;QACjBC,cAAc;YACZgB,UAAUf;QACZ;QACAG,aAAa;IACf;IACA,MAAMK,gBAAgB1B,KAAKe,QAAQ,CAACY,mBAAmB;QAAEN,aAAa;IAAO;IAC7E,MAAMO,eAAe5B,KAAKe,QAAQ,CAACc,kBAAkB;QAAER,aAAa;IAAO;IAC3E,MAAMS,iBAAiB9B,KAAKe,QAAQ,CAACgB,oBAAoB;QAAEV,aAAa;IAAO;IAC/E,MAAMa,eAAe;QAACV;QAAaE;QAAeE;QAAcE;KAAe,CAACK,MAAM,CAACC,SAASC,MAAM;IAEtG,OAAO;QACLH;QACApB,YAAY;YACVwB,MAAM;YACNd,aAAa;YACbE,eAAe;YACfE,cAAc;YACdE,gBAAgB;QAClB;QACAQ,MAAMtC,KAAKuC,MAAM,CACf;YACEnC,KAAKA;YACL,GAAG4B,IAAI;QACT,GACA;YAAEX,aAAa;QAAM;QAEvBG;QACAE;QACAE;QACAE;IACF;AACF,EAAE;AAEF,MAAMP,gBAAgB;IACpB,eAAe;IACfiB,OAAO;IACPC,QAAQ;IACRC,OAAO;IACP,eAAe;IACfC,MAAM;AACR;AAEA,MAAMvB,cAAc;IAClB,eAAe;IACfoB,OAAO;IACPC,QAAQ;IACRC,OAAO;IACP,eAAe;IACfC,MAAM;AACR"}

package/lib/components/Persona/usePersonaStyles.styles.css.js

@@ -0,0 +1,34 @@
+import { clsx } from "clsx";
+import styles from "./Persona.module.css";
+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'
+};
+export const usePersonaStyles_unstable = (state)=>{
+    const { presenceOnly, size, textAlignment, textPosition } = state;
+    state.root.className = clsx(personaClassNames.root, styles.root, styles[size], styles[textPosition], styles[`alignment-${textAlignment}`], presenceOnly && styles.presenceOnly, state.numTextLines <= 1 && styles.singleLine, state.root.className);
+    if (state.avatar) {
+        state.avatar.className = clsx(personaClassNames.avatar, styles.avatar, state.avatar.className);
+    }
+    if (state.presence) {
+        state.presence.className = clsx(personaClassNames.presence, styles.presence, state.presence.className);
+    }
+    if (state.primaryText) {
+        state.primaryText.className = clsx(personaClassNames.primaryText, styles.primaryText, state.primaryText.className);
+    }
+    if (state.secondaryText) {
+        state.secondaryText.className = clsx(personaClassNames.secondaryText, styles.secondaryText, state.secondaryText.className);
+    }
+    if (state.tertiaryText) {
+        state.tertiaryText.className = clsx(personaClassNames.tertiaryText, styles.tertiaryText, state.tertiaryText.className);
+    }
+    if (state.quaternaryText) {
+        state.quaternaryText.className = clsx(personaClassNames.quaternaryText, styles.quaternaryText, state.quaternaryText.className);
+    }
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Persona/usePersonaStyles.styles.css.ts"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { PersonaSlots, PersonaState } from './Persona.types';\nimport styles from './Persona.module.css';\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\nexport const usePersonaStyles_unstable = (state: PersonaState): PersonaState => {\n  const { presenceOnly, size, textAlignment, textPosition } = state;\n  state.root.className = clsx(\n    personaClassNames.root,\n    styles.root,\n    styles[size],\n    styles[textPosition],\n    styles[`alignment-${textAlignment}`],\n    presenceOnly && styles.presenceOnly,\n    state.numTextLines <= 1 && styles.singleLine,\n    state.root.className,\n  );\n  if (state.avatar) {\n    state.avatar.className = clsx(personaClassNames.avatar, styles.avatar, state.avatar.className);\n  }\n  if (state.presence) {\n    state.presence.className = clsx(personaClassNames.presence, styles.presence, state.presence.className);\n  }\n  if (state.primaryText) {\n    state.primaryText.className = clsx(personaClassNames.primaryText, styles.primaryText, state.primaryText.className);\n  }\n  if (state.secondaryText) {\n    state.secondaryText.className = clsx(\n      personaClassNames.secondaryText,\n      styles.secondaryText,\n      state.secondaryText.className,\n    );\n  }\n  if (state.tertiaryText) {\n    state.tertiaryText.className = clsx(\n      personaClassNames.tertiaryText,\n      styles.tertiaryText,\n      state.tertiaryText.className,\n    );\n  }\n  if (state.quaternaryText) {\n    state.quaternaryText.className = clsx(\n      personaClassNames.quaternaryText,\n      styles.quaternaryText,\n      state.quaternaryText.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["clsx","styles","personaClassNames","root","avatar","presence","primaryText","secondaryText","tertiaryText","quaternaryText","usePersonaStyles_unstable","state","presenceOnly","size","textAlignment","textPosition","className","numTextLines","singleLine"],"mappings":"AAAA,SAASA,IAAI,QAAQ,OAAO;AAG5B,OAAOC,YAAY,uBAAuB;AAE1C,OAAO,MAAMC,oBAAkD;IAC7DC,MAAM;IACNC,QAAQ;IACRC,UAAU;IACVC,aAAa;IACbC,eAAe;IACfC,cAAc;IACdC,gBAAgB;AAClB,EAAE;AAEF,OAAO,MAAMC,4BAA4B,CAACC;IACxC,MAAM,EAAEC,YAAY,EAAEC,IAAI,EAAEC,aAAa,EAAEC,YAAY,EAAE,GAAGJ;IAC5DA,MAAMR,IAAI,CAACa,SAAS,GAAGhB,KACrBE,kBAAkBC,IAAI,EACtBF,OAAOE,IAAI,EACXF,MAAM,CAACY,KAAK,EACZZ,MAAM,CAACc,aAAa,EACpBd,MAAM,CAAC,CAAC,UAAU,EAAEa,eAAe,CAAC,EACpCF,gBAAgBX,OAAOW,YAAY,EACnCD,MAAMM,YAAY,IAAI,KAAKhB,OAAOiB,UAAU,EAC5CP,MAAMR,IAAI,CAACa,SAAS;IAEtB,IAAIL,MAAMP,MAAM,EAAE;QAChBO,MAAMP,MAAM,CAACY,SAAS,GAAGhB,KAAKE,kBAAkBE,MAAM,EAAEH,OAAOG,MAAM,EAAEO,MAAMP,MAAM,CAACY,SAAS;IAC/F;IACA,IAAIL,MAAMN,QAAQ,EAAE;QAClBM,MAAMN,QAAQ,CAACW,SAAS,GAAGhB,KAAKE,kBAAkBG,QAAQ,EAAEJ,OAAOI,QAAQ,EAAEM,MAAMN,QAAQ,CAACW,SAAS;IACvG;IACA,IAAIL,MAAML,WAAW,EAAE;QACrBK,MAAML,WAAW,CAACU,SAAS,GAAGhB,KAAKE,kBAAkBI,WAAW,EAAEL,OAAOK,WAAW,EAAEK,MAAML,WAAW,CAACU,SAAS;IACnH;IACA,IAAIL,MAAMJ,aAAa,EAAE;QACvBI,MAAMJ,aAAa,CAACS,SAAS,GAAGhB,KAC9BE,kBAAkBK,aAAa,EAC/BN,OAAOM,aAAa,EACpBI,MAAMJ,aAAa,CAACS,SAAS;IAEjC;IACA,IAAIL,MAAMH,YAAY,EAAE;QACtBG,MAAMH,YAAY,CAACQ,SAAS,GAAGhB,KAC7BE,kBAAkBM,YAAY,EAC9BP,OAAOO,YAAY,EACnBG,MAAMH,YAAY,CAACQ,SAAS;IAEhC;IACA,IAAIL,MAAMF,cAAc,EAAE;QACxBE,MAAMF,cAAc,CAACO,SAAS,GAAGhB,KAC/BE,kBAAkBO,cAAc,EAChCR,OAAOQ,cAAc,EACrBE,MAAMF,cAAc,CAACO,SAAS;IAElC;IAEA,OAAOL;AACT,EAAE"}

package/lib/components/Persona/usePersonaStyles.styles.raw.css.js

@@ -0,0 +1,34 @@
+import { clsx } from "clsx";
+import styles from "./Persona.module.css";
+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'
+};
+export const usePersonaStyles_unstable = (state)=>{
+    const { presenceOnly, size, textAlignment, textPosition } = state;
+    state.root.className = clsx(personaClassNames.root, styles.root, styles[size], styles[textPosition], styles[`alignment-${textAlignment}`], presenceOnly && styles.presenceOnly, state.numTextLines <= 1 && styles.singleLine, state.root.className);
+    if (state.avatar) {
+        state.avatar.className = clsx(personaClassNames.avatar, styles.avatar, state.avatar.className);
+    }
+    if (state.presence) {
+        state.presence.className = clsx(personaClassNames.presence, styles.presence, state.presence.className);
+    }
+    if (state.primaryText) {
+        state.primaryText.className = clsx(personaClassNames.primaryText, styles.primaryText, state.primaryText.className);
+    }
+    if (state.secondaryText) {
+        state.secondaryText.className = clsx(personaClassNames.secondaryText, styles.secondaryText, state.secondaryText.className);
+    }
+    if (state.tertiaryText) {
+        state.tertiaryText.className = clsx(personaClassNames.tertiaryText, styles.tertiaryText, state.tertiaryText.className);
+    }
+    if (state.quaternaryText) {
+        state.quaternaryText.className = clsx(personaClassNames.quaternaryText, styles.quaternaryText, state.quaternaryText.className);
+    }
+    return state;
+};

package/lib/components/Persona/usePersonaStyles.styles.raw.css.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Persona/usePersonaStyles.styles.css.ts"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { PersonaSlots, PersonaState } from './Persona.types';\nimport styles from './Persona.module.css';\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\nexport const usePersonaStyles_unstable = (state: PersonaState): PersonaState => {\n  const { presenceOnly, size, textAlignment, textPosition } = state;\n  state.root.className = clsx(\n    personaClassNames.root,\n    styles.root,\n    styles[size],\n    styles[textPosition],\n    styles[`alignment-${textAlignment}`],\n    presenceOnly && styles.presenceOnly,\n    state.numTextLines <= 1 && styles.singleLine,\n    state.root.className,\n  );\n  if (state.avatar) {\n    state.avatar.className = clsx(personaClassNames.avatar, styles.avatar, state.avatar.className);\n  }\n  if (state.presence) {\n    state.presence.className = clsx(personaClassNames.presence, styles.presence, state.presence.className);\n  }\n  if (state.primaryText) {\n    state.primaryText.className = clsx(personaClassNames.primaryText, styles.primaryText, state.primaryText.className);\n  }\n  if (state.secondaryText) {\n    state.secondaryText.className = clsx(\n      personaClassNames.secondaryText,\n      styles.secondaryText,\n      state.secondaryText.className,\n    );\n  }\n  if (state.tertiaryText) {\n    state.tertiaryText.className = clsx(\n      personaClassNames.tertiaryText,\n      styles.tertiaryText,\n      state.tertiaryText.className,\n    );\n  }\n  if (state.quaternaryText) {\n    state.quaternaryText.className = clsx(\n      personaClassNames.quaternaryText,\n      styles.quaternaryText,\n      state.quaternaryText.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["clsx","styles","personaClassNames","root","avatar","presence","primaryText","secondaryText","tertiaryText","quaternaryText","usePersonaStyles_unstable","state","presenceOnly","size","textAlignment","textPosition","className","numTextLines","singleLine"],"mappings":"AAAA,SAASA,IAAI,QAAQ,OAAO;AAG5B,OAAOC,YAAY,uBAAuB;AAE1C,OAAO,MAAMC,oBAAkD;IAC7DC,MAAM;IACNC,QAAQ;IACRC,UAAU;IACVC,aAAa;IACbC,eAAe;IACfC,cAAc;IACdC,gBAAgB;AAClB,EAAE;AAEF,OAAO,MAAMC,4BAA4B,CAACC;IACxC,MAAM,EAAEC,YAAY,EAAEC,IAAI,EAAEC,aAAa,EAAEC,YAAY,EAAE,GAAGJ;IAC5DA,MAAMR,IAAI,CAACa,SAAS,GAAGhB,KACrBE,kBAAkBC,IAAI,EACtBF,OAAOE,IAAI,EACXF,MAAM,CAACY,KAAK,EACZZ,MAAM,CAACc,aAAa,EACpBd,MAAM,CAAC,CAAC,UAAU,EAAEa,eAAe,CAAC,EACpCF,gBAAgBX,OAAOW,YAAY,EACnCD,MAAMM,YAAY,IAAI,KAAKhB,OAAOiB,UAAU,EAC5CP,MAAMR,IAAI,CAACa,SAAS;IAEtB,IAAIL,MAAMP,MAAM,EAAE;QAChBO,MAAMP,MAAM,CAACY,SAAS,GAAGhB,KAAKE,kBAAkBE,MAAM,EAAEH,OAAOG,MAAM,EAAEO,MAAMP,MAAM,CAACY,SAAS;IAC/F;IACA,IAAIL,MAAMN,QAAQ,EAAE;QAClBM,MAAMN,QAAQ,CAACW,SAAS,GAAGhB,KAAKE,kBAAkBG,QAAQ,EAAEJ,OAAOI,QAAQ,EAAEM,MAAMN,QAAQ,CAACW,SAAS;IACvG;IACA,IAAIL,MAAML,WAAW,EAAE;QACrBK,MAAML,WAAW,CAACU,SAAS,GAAGhB,KAAKE,kBAAkBI,WAAW,EAAEL,OAAOK,WAAW,EAAEK,MAAML,WAAW,CAACU,SAAS;IACnH;IACA,IAAIL,MAAMJ,aAAa,EAAE;QACvBI,MAAMJ,aAAa,CAACS,SAAS,GAAGhB,KAC9BE,kBAAkBK,aAAa,EAC/BN,OAAOM,aAAa,EACpBI,MAAMJ,aAAa,CAACS,SAAS;IAEjC;IACA,IAAIL,MAAMH,YAAY,EAAE;QACtBG,MAAMH,YAAY,CAACQ,SAAS,GAAGhB,KAC7BE,kBAAkBM,YAAY,EAC9BP,OAAOO,YAAY,EACnBG,MAAMH,YAAY,CAACQ,SAAS;IAEhC;IACA,IAAIL,MAAMF,cAAc,EAAE;QACxBE,MAAMF,cAAc,CAACO,SAAS,GAAGhB,KAC/BE,kBAAkBO,cAAc,EAChCR,OAAOQ,cAAc,EACrBE,MAAMF,cAAc,CAACO,SAAS;IAElC;IAEA,OAAOL;AACT,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Persona/usePersonaStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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  // eslint-disable-next-line react-hooks/immutability\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    // eslint-disable-next-line react-hooks/immutability\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    // eslint-disable-next-line react-hooks/immutability\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    // eslint-disable-next-line react-hooks/immutability\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    // eslint-disable-next-line react-hooks/immutability\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    // eslint-disable-next-line react-hooks/immutability\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    // eslint-disable-next-line react-hooks/immutability\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"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","typographyStyles","personaClassNames","root","avatar","presence","primaryText","secondaryText","tertiaryText","quaternaryText","avatarSpacing","useRootClassName","display","gridAutoRows","gridAutoFlow","justifyItems","gridTemplateColumns","useStyles","beforeAfterCenter","gridTemplateRows","after","before","below","media","gridRowStart","mediaBeforeAfterCenter","start","alignSelf","center","afterAlignToPrimary","gridColumnEnd","beforeAlignToPrimary","gridColumnStart","secondLineSpacing","marginTop","primary","secondary","tertiary","quaternary","useAvatarSpacingStyles","spacingHorizontalSNudge","small","spacingHorizontalS","medium","large","spacingHorizontalMNudge","huge","spacingHorizontalM","marginRight","marginBottom","marginLeft","usePresenceSpacingStyles","usePersonaStyles_unstable","state","presenceOnly","size","textAlignment","textPosition","alignToPrimary","alignBeforeAfterCenter","primaryTextClassName","optionalTextClassName","useTextClassNames","rootClassName","styles","avatarSpacingStyles","presenceSpacingStyles","className","usePrimaryTextBaseClassName","color","colorNeutralForeground1","body1","useOptionalTextBaseClassName","colorNeutralForeground2","caption1","useTextStyles","subtitle2","primaryTextBaseClassName","optionalTextBaseClassName","textStyles","primaryTextSize","alignToPrimaryClassName","numTextLines"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Persona/usePersonaStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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  // eslint-disable-next-line react-hooks/immutability\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    // eslint-disable-next-line react-hooks/immutability\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    // eslint-disable-next-line react-hooks/immutability\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    // eslint-disable-next-line react-hooks/immutability\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    // eslint-disable-next-line react-hooks/immutability\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    // eslint-disable-next-line react-hooks/immutability\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    // eslint-disable-next-line react-hooks/immutability\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"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","typographyStyles","personaClassNames","root","avatar","presence","primaryText","secondaryText","tertiaryText","quaternaryText","avatarSpacing","useRootClassName","display","gridAutoRows","gridAutoFlow","justifyItems","gridTemplateColumns","useStyles","beforeAfterCenter","gridTemplateRows","after","before","below","media","gridRowStart","mediaBeforeAfterCenter","start","alignSelf","center","afterAlignToPrimary","gridColumnEnd","beforeAlignToPrimary","gridColumnStart","secondLineSpacing","marginTop","primary","secondary","tertiary","quaternary","useAvatarSpacingStyles","spacingHorizontalSNudge","small","spacingHorizontalS","medium","large","spacingHorizontalMNudge","huge","spacingHorizontalM","marginRight","marginBottom","marginLeft","usePresenceSpacingStyles","usePersonaStyles_unstable","state","presenceOnly","size","textAlignment","textPosition","alignToPrimary","alignBeforeAfterCenter","primaryTextClassName","optionalTextClassName","useTextClassNames","rootClassName","styles","avatarSpacingStyles","presenceSpacingStyles","className","usePrimaryTextBaseClassName","color","colorNeutralForeground1","body1","useOptionalTextBaseClassName","colorNeutralForeground2","caption1","useTextStyles","subtitle2","primaryTextBaseClassName","optionalTextBaseClassName","textStyles","primaryTextSize","alignToPrimaryClassName","numTextLines"],"mappings":"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"}

package/lib-commonjs/Persona.cjs

@@ -5,26 +5,26 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    Persona: function() {
+    get Persona () {
         return _index.Persona;
     },
-    personaClassNames: function() {
+    get personaClassNames () {
         return _index.personaClassNames;
     },
-    renderPersona_unstable: function() {
+    get renderPersona_unstable () {
         return _index.renderPersona_unstable;
     },
-    usePersonaBase_unstable: function() {
+    get usePersonaBase_unstable () {
         return _index.usePersonaBase_unstable;
     },
-    usePersonaStyles_unstable: function() {
+    get usePersonaStyles_unstable () {
         return _index.usePersonaStyles_unstable;
     },
-    usePersona_unstable: function() {
+    get usePersona_unstable () {
         return _index.usePersona_unstable;
     }
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Persona/Persona.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderPersona_unstable } from './renderPersona';\nimport { usePersona_unstable } from './usePersona';\nimport { usePersonaStyles_unstable } from './usePersonaStyles.styles';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { PersonaProps } from './Persona.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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\n  useCustomStyleHook_unstable('usePersonaStyles_unstable')(state);\n\n  return renderPersona_unstable(state);\n});\n\nPersona.displayName = 'Persona';\n"],"names":["React","renderPersona_unstable","usePersona_unstable","usePersonaStyles_unstable","useCustomStyleHook_unstable","Persona","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;+BACQ,qBAAkB;4BACrB,kBAAe;wCACT,+BAA4B;qCAG1B,kCAAkC;AAMvE,MAAMK,UAAAA,WAAAA,GAA6CL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,YAAQP,+BAAAA,EAAoBK,OAAOC;QAEzCL,iDAAAA,EAA0BM;QAE1BL,gDAAAA,EAA4B,6BAA6BK;IAEzD,WAAOR,qCAAAA,EAAuBQ;AAChC,GAAG;AAEHJ,QAAQK,WAAW,GAAG"}
+{"version":3,"sources":["../../../src/components/Persona/Persona.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderPersona_unstable } from './renderPersona';\nimport { usePersona_unstable } from './usePersona';\nimport { usePersonaStyles_unstable } from './usePersonaStyles.styles';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { PersonaProps } from './Persona.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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\n  useCustomStyleHook_unstable('usePersonaStyles_unstable')(state);\n\n  return renderPersona_unstable(state);\n});\n\nPersona.displayName = 'Persona';\n"],"names":["React","renderPersona_unstable","usePersona_unstable","usePersonaStyles_unstable","useCustomStyleHook_unstable","Persona","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;+BACQ,qBAAkB;4BACrB,kBAAe;wCACT,+BAA4B;qCAG1B,kCAAkC;AAMvE,MAAMK,UAAAA,WAAAA,GAA6CL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,YAAQP,+BAAAA,EAAoBK,OAAOC;QAEzCL,iDAAAA,EAA0BM;QAE1BL,gDAAAA,EAA4B,6BAA6BK;IAEzD,WAAOR,qCAAAA,EAAuBQ;AAChC,GAAG;AAEHJ,QAAQK,WAAW,GAAG"}