@fluentui-react-native/experimental-avatar 0.14.45 → 0.15.2

package/MIGRATION.md

@@ -1,157 +0,0 @@
-# Avatar Migration
-
-## Migration from PersonaCoin component
-
-### Component renames
-
-| `PersonaCoin`                                                | `Avatar`                                         |
-| ------------------------------------------------------------ | ------------------------------------------------ |
-| `<PersonaCoin size='size24' initials="SN" />`                | `<Avatar size={24} initials="SN" />`             |
-| `<PersonaCoin presence='available' coinColorFluent="red" />` | `<Avatar size={24} initials="SN" />`             |
-| `<PersonaCoin imageUrl="./path/name.png" />`                 | `<Avatar image={{source: './path/name.png'}} />` |
-| `<PersonaCoin imageDescription="Photo" />`                   | `<Avatar accessibilityLabel="Photo" />`          |
-
-### Props that remain as is
-
-- `icon`
-- `initials`
-- `size`
-- `imageUrl`
-
-### Props no longer supported with an equivalent functionality in Avatar
-
-- `coinColorFluent` => Use `avatarColor` instead.
-- `imageDescription` => Use `accessibilityLabel` instead.
-- `isOutOfOffice` => `outOfOffice` is part of `badge` slot. Use `badge={{ outOfOffice: true }} />`.
-- `presence` => It's part of `badge` slot. Use `badge={{ presence: 'available' }} />`.
-- `ring` => `ring` became part of `activeAppearance` prop. It's used together with `active='active'` prop.
-
-### New props
-
-- `active`
-- `activeAppearance` - According to Web spec there should be `ring`, `shadow`, `glow`, `ring-shadow`, `ring-glow`.
-  Currently we support only `ring`. `activeAppearance` can be used when `active` prop set to `active`.
-- `name` - is used for generation initials with `getInitials` method.
-- `shape` - can be `circular` and `square`.
-- `idForColor`
-
-### Tokens that remain as is
-
-- Any props that are part of `IBackgroundColorTokens`, `IForegroundColorTokens`
-
-- `iconSize`
-- `iconWeight`
-- `size`
-
-### Tokens no longer supported with an equivalent functionality in Avatar
-
-- `initialsSize` => Use `fontSize` token instead
-- `coinColorFluent` => Use `avatarColor` token instead
-- `coinSize` => Use size tokens instead.
-- `ring` => Use `ringBackgroundColor`, `ringColor`, `ringThickness` and `ringInnerGap`
-
-### Tokens no longer supported without an equivalent functionality in Avatar
-
-- `iconStrokeWidth` and `iconStrokeColor` => This was for activity ring around the Avatar.
-  We support ring in `activeAppearance` prop. `borderColor` will be changed using `ringColor` token and `borderWidth` using ringThickness token.
-- `horizontalIconAlignment` and `verticalIconAlignment` => these props were responsible for presence badge position.
-
-### New tokens
-
-- Any props that are part of `FontTokens` and `IBorderTokens`.
-- `avatarOpacity`
-- `badgeSize`
-- `circular`
-- `iconColor`
-- `inactive`
-- `square`
-
-Size tokens:
-
-- `size20`
-- `size24`
-- `size28`
-- `size32`
-- `size36`
-- `size40`
-- `size48`
-- `size56`
-- `size64`
-- `size72`
-- `size96`
-- `size120`
-
-Color tokens:
-
-- `neutral`
-- `brand`
-- `darkRed`
-- `cranberry`
-- `red`
-- `pumpkin`
-- `peach`
-- `marigold`
-- `gold`
-- `brass`
-- `brown`
-- `forest`
-- `seafoam`
-- `darkGreen`
-- `lightTeal`
-- `teal`
-- `steel`
-- `blue`
-- `royalBlue`
-- `cornflower`
-- `navy`
-- `lavender`
-- `purple`
-- `grape`
-- `lilac`
-- `pink`
-- `magenta`
-- `plum`
-- `beige`
-- `mink`
-- `platinum`
-- `anchor`
-
-### Slots no longer supported with an equivalent functionality in v1 Avatar
-
-- `photo` => Use `image` slot instead or `imageUrl` prop.
-
-### Slots no longer supported without an equivalent functionality in v1 Avatar
-
-- `glow` => is not suported in this version of Avatar
-
-### New slots
-
-- `badge`
-
-### Prop differences due to technical differences and limitations
-
-- Web uses `image` slot which is part of `react-image` component. They use syntax `image={{ src: './MonaKane.jpg' }}`. If we use similar syntax, our users will need to write `image={{ source: { uri: './MonaKane.jpg' } }} />`. In majority of cases users pass image URL that's why we still have opportunity to pass this parameter using `imageUrl` prop. But there's also a way to pass `image` object similar to Web.
-
-### Other Prop differences
-
-- `avatarColor` => Web uses `color` prop and omits it from `ComponentProps<AvatarSlots>`. Their users can style font color using CSS but our users can style the component via tokens. If we use the same prop name (color), we'll need to omit it from foregroundTokens and come up with a new name for the font color prop. That's why we use `avatarColor` prop instead of `color`.
-
-## Property mapping
-
-| `PersonaCoin`      | `Avatar`             |
-| ------------------ | -------------------- |
-|                    | `active`             |
-|                    | `activeAppearance`   |
-|                    | `badge`              |
-| `coinColorFluent`  | `avatarColor`        |
-| `icon`             | `icon`               |
-|                    | `idForColor`         |
-| `imageUrl`         | `imageUrl`           |
-| `imageDescription` | `accessibilityLabel` |
-| `isOutOfOffice`    |                      |
-| `initials`         | `initials`           |
-|                    | `name`               |
-| `presence`         |                      |
-| `ring`             |                      |
-|                    | `shape`              |
-| `size`             | `size`               |

package/SPEC.md

@@ -1,295 +0,0 @@
-# Avatar
-
-## Background
-
-The Avatar component represents a person or entity. It displays the person's image, initials, or an icon, and can be either circular or square.
-Previously it was a component PersonaCoin which used an old version of framework. There are more details in MIGRATION.md.
-
-```ts
-import { JSAvatar } from '@fluentui-react-native/experimental-avatar';
-```
-
-## Sample Code
-
-Basic examples:
-
-```jsx
-  <JSAvatar />
-  <JSAvatar icon={{ svgSource: { uri: 'https://www.example.com/test.svg', viewBox: '0 0 100 100' } }} size={120} />
-  <JSAvatar src="../../path-to-image.png" active="active" activeAppearance="ring" size={56} />
-  <JSAvatar shape="square" avatarColor="purple" name="Richard Feynman" />
-```
-
-More examples on the [Test pages for the Avatar](../../../apps/fluent-tester/src/FluentTester/TestComponents/Avatar). Instructions on running the tester app can be found [here](../../../apps/fluent-tester/README.md).
-
-## Variants
-
-### Active
-
-Optional activity indicator.
-Active prop can be `unset`, `active` and `inactive`. Default is `unset`.
-
-- active: the avatar will be decorated according to activeAppearance, e.g. `ring`.
-- inactive: the avatar will be partially transparent (0.8 opacity).
-- unset: normal display
-
-### ActiveAppearance
-
-`activeAppearance` can be used when `active` prop set to `active`.
-It adds `ring` as extra visual.
-
-### Badge
-
-The `Avatar` component can include presence badge when active prop is undefined or `unset`.
-
-### Color
-
-The Avatar supports color variants when displaying initials or an icon:
-
-- Neutral - Gray (default).
-- Brand - Brand colors from the theme
-- Colorful - Pick from a list of pre-defined Avatar colors. The color will be assigned based on a hash of the name (to "randomly" assign a person a color). The color name (like darkRed) can also be specified explicitly in case the use case requires a different algorithm to pick the color.
-
-### Icon
-
-The `Avatar` component can include an `icon` that appears if there's no image or initials.
-
-### Image
-
-The `Avatar` component can include an `image`.
-
-### Initials
-
-Initials can be passed using `initials` prop or generated from `name` prop using getInitials method.
-Here are the requirements from Web spec:
-
-1. If only one word is provided, pull the first letter of the word.
-2. If 2 words provided, pull first letter of both words.
-3. If 2+ words provided, pull first letter of first word and last word.
-4. Ignore suffixes (i.e. Jr, III).
-5. Ignore words in parantheses Ignore special characters i.e. parantheses, dashes If numeric, fall back to Icon If first character is not alphabetic, fall back to icon.
-
-But requirements are still being discussed. This area will be updated once we come up with final solition. There are different implementations in different teams.
-
-### Name
-
-Name prop is used to generate initials.
-
-### Shape
-
-The Avatar supports a circular and square (with rounded corners) shape.
-
-### Sizes
-
-`Avatar` supports next sizes: `20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 96, 120`.
-Default size for win32 is 24.
-
-## API
-
-### Slots
-
-The `Avatar` component has the following slots:
-
-- `root` - The outer container representing the `Avatar` wrapper.
-- `image` - If specified, renders an `image`
-- `initials` - If specified, renders initials when there's no `image`
-- `icon` - If specified, renders an `icon` if there's no `image` or `initials`.
-- `initialsBackground` - It's a wrapper for initials and icon.
-- `ring` - If specified, renders the ring for the `Avatar` when active prop is set to `active`.
-- `badge` - If specified, renders presence badge. Example: `badge={{ status: 'outOfOffice' }}.`.
-
-The slots can be modified using the `compose` function on the `Avatar`. For more information on using the `compose` API, please see [this page](../../framework/composition/README.md).
-
-### Props
-
-```ts
-export interface JSAvatarProps extends IViewProps, AvatarConfigurableProps {
-  /**
-   * Activity indicator
-   * * active: the avatar will be decorated according to activeAppearance
-   * * inactive: the avatar will be reduced in size and partially transparent
-   * * unset: normal display
-   *
-   * @defaultvalue unset
-   */
-  active?: AvatarActive;
-
-  /**
-   * The appearance when `active="active"`
-   *
-   * @defaultvalue ring
-   */
-  activeAppearance?: AvatarActiveAppearance;
-
-  /**
-   * Badge shows the avatar's presence status.
-   * Badge can be shown only if `active` prop is undefined or unset
-   */
-  badge?: PresenceBadgeProps;
-
-  /**
-   * Icon to be displayed when the avatar doesn't have an image or initials.
-   *
-   * @defaultvalue `PersonRegular` (the default icon's size depends on the Avatar's size)
-   */
-  icon?: IconSourcesType;
-
-  /**
-   * Specify a string to be used instead of the name, to determine which color to use when color="colorful".
-   * Use this when a name is not available, but there is another unique identifier that can be used instead.
-   */
-  idForColor?: string;
-
-  /**
-   * The initials are displayed when there is no image (including while the image is loading).
-   *
-   * It is usually not necessary to specify custom initials; by default they will be derived from the `name` prop, using the `getInitials` function.
-   */
-  initials?: string;
-
-  /**
-   * The name of the person or entity represented by this Avatar. This should always be provided if it is available.
-   *
-   * The name will be used to determine the initials displayed when there is no icon, as well as provided to
-   * accessibility tools.
-   */
-  name?: string;
-
-  /**
-   * Size of the avatar in pixels.
-   *
-   * Size is restricted to a limited set of supported values recommended for most uses (see `AvatarSizeValue`) and
-   * based on design guidelines for the Avatar control.
-   *
-   * @defaultvalue 24
-   */
-  size?: AvatarSize;
-
-  /**
-   * The avatar can have a circular or square shape.
-   * @defaultvalue circular
-   */
-  shape?: AvatarShape;
-
-  /**
-   * Shorthand for passing image URL instead of using `image` prop
-   */
-  imageUrl?: string;
-}
-```
-
-### Styling Tokens
-
-Tokens can be used to customize the styling of the control by using the `customize` function on the `Avatar`. For more information on using the `customize` API, please see [this page](../../framework/composition/README.md). The `Avatar` has the following tokens:
-
-```ts
-export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColorTokens, AvatarConfigurableProps, IBorderTokens, FontTokens {
-  /**
-   * Avatar opacity which is changed depending on `active` prop.
-   */
-  avatarOpacity?: number;
-
-  /**
-   * The size of presence badge.
-   */
-  badgeSize?: BadgeSize;
-
-  /**
-   * The icon color.
-   */
-  iconColor?: ColorValue;
-
-  /**
-   * The size of the icon.
-   */
-  iconSize?: number;
-
-  /**
-   * Avatar shapes:
-   */
-  circular?: JSAvatarTokens;
-  square?: JSAvatarTokens;
-
-  /**
-   * Token for inactive value of `active` prop
-   */
-  inactive?: JSAvatarTokens;
-
-  /**
-   * Avatar sizes:
-   */
-  size20?: JSAvatarTokens;
-  size24?: JSAvatarTokens;
-  size28?: JSAvatarTokens;
-  size32?: JSAvatarTokens;
-  size36?: JSAvatarTokens;
-  size40?: JSAvatarTokens;
-  size48?: JSAvatarTokens;
-  size56?: JSAvatarTokens;
-  size64?: JSAvatarTokens;
-  size72?: JSAvatarTokens;
-  size96?: JSAvatarTokens;
-  size120?: JSAvatarTokens;
-
-  /**
-   * Avatar colors:
-   */
-  neutral?: JSAvatarTokens;
-  brand?: JSAvatarTokens;
-  darkRed?: JSAvatarTokens;
-  cranberry?: JSAvatarTokens;
-  red?: JSAvatarTokens;
-  pumpkin?: JSAvatarTokens;
-  peach?: JSAvatarTokens;
-  marigold?: JSAvatarTokens;
-  gold?: JSAvatarTokens;
-  brass?: JSAvatarTokens;
-  brown?: JSAvatarTokens;
-  forest?: JSAvatarTokens;
-  seafoam?: JSAvatarTokens;
-  darkGreen?: JSAvatarTokens;
-  lightTeal?: JSAvatarTokens;
-  teal?: JSAvatarTokens;
-  steel?: JSAvatarTokens;
-  blue?: JSAvatarTokens;
-  royalBlue?: JSAvatarTokens;
-  cornflower?: JSAvatarTokens;
-  navy?: JSAvatarTokens;
-  lavender?: JSAvatarTokens;
-  purple?: JSAvatarTokens;
-  grape?: JSAvatarTokens;
-  lilac?: JSAvatarTokens;
-  pink?: JSAvatarTokens;
-  magenta?: JSAvatarTokens;
-  plum?: JSAvatarTokens;
-  beige?: JSAvatarTokens;
-  mink?: JSAvatarTokens;
-  platinum?: JSAvatarTokens;
-  anchor?: JSAvatarTokens;
-}
-```
-
-## Behaviors
-
-### States
-
-The following section describes the different states which `Avatar` can be in as a result of interaction.
-
-#### showRing state
-
-Ring is shown when `showRing` is set to true
-
-#### transparentRing state
-
-Makes ring transparent
-
-#### showBadge state
-
-showBadge is set to true when `active` prop is `unset` or undefined
-
-### Interaction
-
-For now Avatar doesn't support interactions.
-For the next step we will need to add tooltip and onClick handler.
-
-## Accessibility

package/jest.config.js

@@ -1,2 +0,0 @@
-const { configureReactNativeJest } = require('@fluentui-react-native/scripts');
-module.exports = configureReactNativeJest('android');

package/lib/Avatar.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../src/Avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAiB,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAOpF,oBAAY,IAAI,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;AAElF,oBAAY,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,iBAAiB,GAAG,UAAU,CAAC;AAEvG,oBAAY,QAAQ,GAAG,MAAM,GAAG,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,cAAc,GAAG,SAAS,GAAG,SAAS,CAAC;AAQ1G,oBAAY,YAAY,GAAG;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;IAEZ;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B,CAAC;AAEF,oBAAY,WAAW,GAAG,YAAY,GAAG;IACvC;;OAEG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC;IAE7B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,SAAS,CAAC,EAAE,UAAU,CAAC;IAEvB;;OAEG;IACH,eAAe,CAAC,EAAE,UAAU,CAAC;IAE7B;;OAEG;IACH,eAAe,CAAC,EAAE,UAAU,CAAC;IAE7B;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,uBAAuB,CAAC,EAAE,cAAc,CAAC;CAC1C,CAAC;AAIF,oBAAY,qBAAqB,GAAG,SAAS,GAAG,WAAW,CAAC;AAO5D,eAAO,MAAM,MAAM;UAJE,qBAAqB;wBAgCxC,CAAC"}

package/lib/Avatar.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../src/Avatar.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,qBAAqB;AACrB,OAAO,EAAE,OAAO,EAAY,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AACxG,OAAO,EAAkB,aAAa,EAAyB,MAAM,cAAc,CAAC;AACpF,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAC;AAE/E,IAAM,UAAU,GAAG,QAAQ,CAAC;AAE5B,IAAM,gBAAgB,GAAG,qBAAqB,CAAC,eAAe,CAAC,CAAC;AAYhE,IAAM,uBAAuB,GAAsB,aAAa,CAAC,oBAAoB,CAAC;AA6EtF,IAAM,sBAAsB,GAA2B,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;AAS/E,MAAM,CAAC,IAAM,MAAM,GAAG,OAAO,CAAa;IACxC,WAAW,EAAE,UAAU;IACvB,MAAM,EAAE;QACN;YACE,IAAI,EAAE,OAAO;YACb,WAAW,EAAE,SAAS;SACvB;QACD,UAAU;KACX;IACD,sBAAsB,wBAAA;IACtB,KAAK,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE;IACjC,SAAS,EAAE;QACT,IAAI,EAAE,UAAU,CACd,UAAC,MAAM,IAAK,OAAA,CAAC;YACX,IAAI,EAAE,MAAM,CAAC,IAAI;YACjB,KAAK,EAAE;gBACL,MAAM,EAAE,uBAAuB,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC;gBAClD,KAAK,EAAE,uBAAuB,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC;aAClD;SACF,CAAC,EANU,CAMV,EACF,CAAC,MAAM,CAAC,CACT;KACF;IACD,SAAS,EAAE,UAAC,KAAkB,EAAE,QAA8B;QAC5D,IAAM,IAAI,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC;QAElC,OAAO,UAAC,IAAiB,IAAK,OAAA,UAAC,IAAI,eAAK,UAAU,CAAC,KAAK,EAAE,IAAI,CAAC,EAAI,EAArC,CAAqC,CAAC;IACtE,CAAC;CACF,CAAC,CAAC"}

package/lib/JSAvatar.d.ts

@@ -1,12 +0,0 @@
-import { JSAvatarProps, JSAvatarState, AvatarSlotProps } from './JSAvatar.types';
-/**
- * A function which determines if a set of styles should be applied to the compoent given the current state and props of the avatar.
- *
- * @param layer The name of the state that is being checked for
- * @param state The current state of the avatar
- * @param userProps The props that were passed into the avatar
- * @returns Whether the styles that are assigned to the layer should be applied to the avatar
- */
-export declare const avatarLookup: (layer: string, state: JSAvatarState, userProps: JSAvatarProps) => boolean;
-export declare const JSAvatar: import("@fluentui-react-native/framework").ComposableComponent<JSAvatarProps, AvatarSlotProps, import("./JSAvatar.types").JSAvatarTokens, object>;
-//# sourceMappingURL=JSAvatar.d.ts.map

package/lib/JSAvatar.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"JSAvatar.d.ts","sourceRoot":"","sources":["../src/JSAvatar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAA8B,aAAa,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAS7G;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,UAAW,MAAM,SAAS,aAAa,aAAa,aAAa,KAAG,OAY5F,CAAC;AAEF,eAAO,MAAM,QAAQ,mJA8BnB,CAAC"}

package/lib/JSAvatar.js

@@ -1,84 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-/** @jsx withSlots */
-import { Image, View, Text, Platform } from 'react-native';
-import { Fragment } from 'react';
-import { JSAvatarName } from './JSAvatar.types';
-import { stylingSettings } from './JSAvatar.styling';
-import { compose, mergeProps, withSlots } from '@fluentui-react-native/framework';
-import { useAvatar } from './useAvatar';
-import { PresenceBadge } from '@fluentui-react-native/badge';
-import { Icon } from '@fluentui-react-native/icon';
-import { Svg, Path } from 'react-native-svg';
-/**
- * A function which determines if a set of styles should be applied to the compoent given the current state and props of the avatar.
- *
- * @param layer The name of the state that is being checked for
- * @param state The current state of the avatar
- * @param userProps The props that were passed into the avatar
- * @returns Whether the styles that are assigned to the layer should be applied to the avatar
- */
-export var avatarLookup = function (layer, state, userProps) {
-    var size = userProps.size;
-    var avatarSize = size ? "size".concat(size) : '';
-    return (state[layer] ||
-        userProps[layer] ||
-        layer === userProps['shape'] ||
-        (!userProps['shape'] && layer === 'circular') ||
-        layer === userProps['avatarColor'] ||
-        layer === avatarSize ||
-        (userProps.active === 'inactive' && layer === 'inactive'));
-};
-export var JSAvatar = compose(__assign(__assign({ displayName: JSAvatarName }, stylingSettings), { slots: {
-        root: View,
-        image: Image,
-        initials: Text,
-        initialsBackground: View,
-        icon: Icon,
-        ring: View,
-        badge: PresenceBadge,
-    }, useRender: function (userProps, useSlots) {
-        var avatar = useAvatar(userProps);
-        var Slots = useSlots(avatar.props, function (layer) { return avatarLookup(layer, avatar.state, avatar.props); });
-        return function (final) {
-            var _a = avatar.state, showRing = _a.showRing, transparentRing = _a.transparentRing, showBadge = _a.showBadge;
-            var _b = avatar.props, badge = _b.badge, mergedProps = __rest(_b, ["badge"]);
-            var svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS);
-            var RingComponent = showRing && !transparentRing ? Slots.ring : Fragment;
-            return (withSlots(Slots.root, __assign({}, mergedProps),
-                withSlots(RingComponent, null, renderAvatar(final, avatar.props, Slots, svgIconsEnabled)),
-                svgIconsEnabled && showBadge && withSlots(Slots.badge, __assign({}, badge))));
-        };
-    } }));
-function renderAvatar(final, avatarProps, Slots, svgIconsEnabled) {
-    var _a = mergeProps(avatarProps, final), icon = _a.icon, initials = _a.initials, imageUrl = _a.imageUrl;
-    return imageUrl ? (withSlots(Slots.image, { source: { uri: imageUrl } })) : (withSlots(Slots.initialsBackground, { accessible: false }, initials ? (withSlots(Slots.initials, { accessible: false }, initials)) : avatarProps.icon ? (withSlots(Slots.icon, __assign({}, icon, { accessible: false }))) : (svgIconsEnabled && withSlots(Slots.icon, { svgSource: svgProps, accessible: false }))));
-}
-var fallbackIconSvg = function () {
-    return (withSlots(Svg, { viewBox: "0 0 14 16" },
-        withSlots(Path, { fill: "currentColor", d: "M7 0C4.79086 0 3 1.79086 3 4C3 6.20914 4.79086 8 7 8C9.20914 8 11 6.20914 11 4C11 1.79086 9.20914 0 7 0ZM4 4C4 2.34315 5.34315 1 7 1C8.65685 1 10 2.34315 10 4C10 5.65685 8.65685 7 7 7C5.34315 7 4 5.65685 4 4ZM2.00873 9C0.903151 9 0 9.88687 0 11C0 12.6912 0.83281 13.9663 2.13499 14.7966C3.41697 15.614 5.14526 16 7 16C8.85474 16 10.583 15.614 11.865 14.7966C13.1672 13.9663 14 12.6912 14 11C14 9.89557 13.1045 9.00001 12 9.00001L2.00873 9ZM1 11C1 10.4467 1.44786 10 2.00873 10L12 10C12.5522 10 13 10.4478 13 11C13 12.3088 12.3777 13.2837 11.3274 13.9534C10.2568 14.636 8.73511 15 7 15C5.26489 15 3.74318 14.636 2.67262 13.9534C1.62226 13.2837 1 12.3088 1 11Z" })));
-};
-var svgProps = {
-    src: fallbackIconSvg,
-};
-//# sourceMappingURL=JSAvatar.js.map

package/lib/JSAvatar.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"JSAvatar.js","sourceRoot":"","sources":["../src/JSAvatar.tsx"],"names":[],"mappings":"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"}

package/lib/JSAvatar.styling.d.ts

@@ -1,5 +0,0 @@
-import { JSAvatarTokens, AvatarSlotProps, JSAvatarProps } from './JSAvatar.types';
-import { UseStylingOptions } from '@fluentui-react-native/framework';
-export declare const avatarStates: (keyof JSAvatarTokens)[];
-export declare const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps, JSAvatarTokens>;
-//# sourceMappingURL=JSAvatar.styling.d.ts.map

package/lib/JSAvatar.styling.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"JSAvatar.styling.d.ts","sourceRoot":"","sources":["../src/JSAvatar.styling.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,cAAc,EAEd,eAAe,EACf,aAAa,EAMd,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAS,iBAAiB,EAAc,MAAM,kCAAkC,CAAC;AAKxF,eAAO,MAAM,YAAY,EAAE,CAAC,MAAM,cAAc,CAAC,EAWhD,CAAC;AAYF,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,aAAa,EAAE,eAAe,EAAE,cAAc,CAyH7F,CAAC"}