@fluentui-react-native/experimental-avatar 0.13.1 → 0.13.2

package/CHANGELOG.json

@@ -2,7 +2,46 @@
   "name": "@fluentui-react-native/experimental-avatar",
   "entries": [
     {
-      "date": "Wed, 17 Nov 2021 21:06:50 GMT",
+      "date": "Thu, 16 Dec 2021 06:26:41 GMT",
+      "tag": "@fluentui-react-native/experimental-avatar_v0.13.2",
+      "version": "0.13.2",
+      "comments": {
+        "patch": [
+          {
+            "author": "v.kozlova13@gmail.com",
+            "package": "@fluentui-react-native/experimental-avatar",
+            "commit": "ea7b9238079f53af55ce3c37458b925bb3dfa922",
+            "comment": "Added shape prop to Avatar"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/experimental-avatar",
+            "comment": "Bump @fluentui-react-native/adapters to v0.8.1",
+            "commit": "841d2998e8b97fabe0b6dac9c74c3d63d2b3bbd4"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/experimental-avatar",
+            "comment": "Bump @fluentui-react-native/framework to v0.7.1",
+            "commit": "841d2998e8b97fabe0b6dac9c74c3d63d2b3bbd4"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/experimental-avatar",
+            "comment": "Bump @fluentui-react-native/theme-tokens to v0.11.0",
+            "commit": "841d2998e8b97fabe0b6dac9c74c3d63d2b3bbd4"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/experimental-avatar",
+            "comment": "Bump @fluentui-react-native/tokens to v0.11.1",
+            "commit": "841d2998e8b97fabe0b6dac9c74c3d63d2b3bbd4"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 17 Nov 2021 21:07:06 GMT",
       "tag": "@fluentui-react-native/experimental-avatar_v0.13.1",
       "version": "0.13.1",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,24 @@
 # Change Log - @fluentui-react-native/experimental-avatar
 
-This log was last generated on Wed, 17 Nov 2021 21:06:50 GMT and should not be manually modified.
+This log was last generated on Thu, 16 Dec 2021 06:26:41 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 0.13.2
+
+Thu, 16 Dec 2021 06:26:41 GMT
+
+### Patches
+
+- Added shape prop to Avatar (v.kozlova13@gmail.com)
+- Bump @fluentui-react-native/adapters to v0.8.1
+- Bump @fluentui-react-native/framework to v0.7.1
+- Bump @fluentui-react-native/theme-tokens to v0.11.0
+- Bump @fluentui-react-native/tokens to v0.11.1
+
 ## 0.13.1
 
-Wed, 17 Nov 2021 21:06:50 GMT
+Wed, 17 Nov 2021 21:07:06 GMT
 
 ### Patches
 

package/lib/JSAvatar.d.ts

@@ -1,3 +1,12 @@
-import { JSAvatarProps } from './JSAvatar.types';
+import { JSAvatarProps, JSAvatarState } 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/composition").ComposeFactoryComponent<JSAvatarProps, import("./JSAvatar.types").AvatarSlotProps, import("./JSAvatar.types").JSAvatarTokens, import("@fluentui-react-native/framework").Theme, object>;
 //# sourceMappingURL=JSAvatar.d.ts.map

package/lib/JSAvatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"JSAvatar.d.ts","sourceRoot":"","sources":["../src/JSAvatar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAA8B,MAAM,kBAAkB,CAAC;AAK7E,eAAO,MAAM,QAAQ,sOAoCnB,CAAC"}
+{"version":3,"file":"JSAvatar.d.ts","sourceRoot":"","sources":["../src/JSAvatar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAA8B,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAK5F;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,4EAExB,CAAC;AAEF,eAAO,MAAM,QAAQ,sOAoCnB,CAAC"}

package/lib/JSAvatar.js

@@ -26,6 +26,17 @@ import { JSAvatarName } from './JSAvatar.types';
 import { stylingSettings } from './JSAvatar.styling';
 import { compose, mergeProps, withSlots } from '@fluentui-react-native/framework';
 import { useAvatar } from './useAvatar';
+/**
+ * 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) {
+    return state[layer] || userProps[layer] || layer === userProps['shape'] || (!userProps['shape'] && layer === 'circular');
+};
 export var JSAvatar = compose(__assign(__assign({ displayName: JSAvatarName }, stylingSettings), { slots: {
         root: View,
         photo: Image,
@@ -35,11 +46,11 @@ export var JSAvatar = compose(__assign(__assign({ displayName: JSAvatarName }, s
         ring: View,
         glow: View,
     }, render: function (userProps, useSlots) {
-        var Avatar = useAvatar(userProps);
-        var Slots = useSlots(userProps, function (layer) { return Avatar.state[layer] || userProps[layer]; });
+        var avatar = useAvatar(userProps);
+        var Slots = useSlots(userProps, function (layer) { return avatarLookup(layer, avatar.state, userProps); });
         return function (final) {
-            var _a = mergeProps(Avatar.props, final), children = _a.children, accessibilityLabel = _a.accessibilityLabel, mergedProps = __rest(_a, ["children", "accessibilityLabel"]);
-            var _b = Avatar.state, personaPhotoSource = _b.personaPhotoSource, iconSource = _b.iconSource, showRing = _b.showRing, transparentRing = _b.transparentRing;
+            var _a = mergeProps(avatar.props, final), children = _a.children, accessibilityLabel = _a.accessibilityLabel, mergedProps = __rest(_a, ["children", "accessibilityLabel"]);
+            var _b = avatar.state, personaPhotoSource = _b.personaPhotoSource, iconSource = _b.iconSource, showRing = _b.showRing, transparentRing = _b.transparentRing;
             return (withSlots(Slots.root, __assign({}, mergedProps),
                 personaPhotoSource ? (withSlots(Slots.photo, { accessibilityLabel: accessibilityLabel, source: personaPhotoSource })) : (withSlots(Slots.initialsBackground, null,
                     withSlots(Slots.initials, null, children))),

package/lib/JSAvatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"JSAvatar.js","sourceRoot":"","sources":["../src/JSAvatar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,qBAAqB;AACrB,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAA+B,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAC7E,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,OAAO,EAAY,UAAU,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC5F,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,MAAM,CAAC,IAAM,QAAQ,GAAG,OAAO,qBAC7B,WAAW,EAAE,YAAY,IACtB,eAAe,KAClB,KAAK,EAAE;QACL,IAAI,EAAE,IAAI;QACV,KAAK,EAAE,KAAK;QACZ,QAAQ,EAAE,IAAI;QACd,kBAAkB,EAAE,IAAI;QACxB,IAAI,EAAE,KAAK;QACX,IAAI,EAAE,IAAI;QACV,IAAI,EAAE,IAAI;KACX,EACD,MAAM,EAAE,UAAC,SAAwB,EAAE,QAAgC;QACjE,IAAM,MAAM,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;QACpC,IAAM,KAAK,GAAG,QAAQ,CAAC,SAAS,EAAE,UAAC,KAAK,IAAK,OAAA,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,SAAS,CAAC,KAAK,CAAC,EAAvC,CAAuC,CAAC,CAAC;QAEtF,OAAO,UAAC,KAAoB;YAC1B,IAAM,oCAAkF,EAAhF,sBAAQ,EAAE,0CAAkB,EAAE,4DAAkD,CAAC;YACnF,IAAA,iBAA4E,EAA1E,0CAAkB,EAAE,0BAAU,EAAE,sBAAQ,EAAE,oCAAgC,CAAC;YAEnF,OAAO,CACL,UAAC,KAAK,CAAC,IAAI,eAAK,WAAW;gBACxB,kBAAkB,CAAC,CAAC,CAAC,CACpB,UAAC,KAAK,CAAC,KAAK,IAAC,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,EAAE,kBAAkB,GAAI,CACpF,CAAC,CAAC,CAAC,CACF,UAAC,KAAK,CAAC,kBAAkB;oBACvB,UAAC,KAAK,CAAC,QAAQ,QAAE,QAAQ,CAAkB,CAClB,CAC5B;gBACA,QAAQ,IAAI,CAAC,eAAe,IAAI,UAAC,KAAK,CAAC,IAAI,OAAG;gBAC9C,QAAQ,IAAI,UAAC,KAAK,CAAC,IAAI,OAAG;gBAC1B,CAAC,CAAC,UAAU,IAAI,CAAC,CAAC,UAAU,CAAC,GAAG,IAAI,UAAC,KAAK,CAAC,IAAI,IAAC,MAAM,EAAE,UAAU,GAAI,CAC5D,CACd,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC,IACD,CAAC"}
+{"version":3,"file":"JSAvatar.js","sourceRoot":"","sources":["../src/JSAvatar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,qBAAqB;AACrB,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAA+B,YAAY,EAAiB,MAAM,kBAAkB,CAAC;AAC5F,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,OAAO,EAAY,UAAU,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC5F,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC;;;;;;;GAOG;AACH,MAAM,CAAC,IAAM,YAAY,GAAG,UAAC,KAAa,EAAE,KAAoB,EAAE,SAAwB;IACxF,OAAO,KAAK,CAAC,KAAK,CAAC,IAAI,SAAS,CAAC,KAAK,CAAC,IAAI,KAAK,KAAK,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,KAAK,KAAK,UAAU,CAAC,CAAC;AAC3H,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,QAAQ,GAAG,OAAO,qBAC7B,WAAW,EAAE,YAAY,IACtB,eAAe,KAClB,KAAK,EAAE;QACL,IAAI,EAAE,IAAI;QACV,KAAK,EAAE,KAAK;QACZ,QAAQ,EAAE,IAAI;QACd,kBAAkB,EAAE,IAAI;QACxB,IAAI,EAAE,KAAK;QACX,IAAI,EAAE,IAAI;QACV,IAAI,EAAE,IAAI;KACX,EACD,MAAM,EAAE,UAAC,SAAwB,EAAE,QAAgC;QACjE,IAAM,MAAM,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;QACpC,IAAM,KAAK,GAAG,QAAQ,CAAC,SAAS,EAAE,UAAC,KAAK,IAAK,OAAA,YAAY,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC,EAA5C,CAA4C,CAAC,CAAC;QAE3F,OAAO,UAAC,KAAoB;YAC1B,IAAM,oCAAkF,EAAhF,sBAAQ,EAAE,0CAAkB,EAAE,4DAAkD,CAAC;YACnF,IAAA,iBAA4E,EAA1E,0CAAkB,EAAE,0BAAU,EAAE,sBAAQ,EAAE,oCAAgC,CAAC;YAEnF,OAAO,CACL,UAAC,KAAK,CAAC,IAAI,eAAK,WAAW;gBACxB,kBAAkB,CAAC,CAAC,CAAC,CACpB,UAAC,KAAK,CAAC,KAAK,IAAC,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,EAAE,kBAAkB,GAAI,CACpF,CAAC,CAAC,CAAC,CACF,UAAC,KAAK,CAAC,kBAAkB;oBACvB,UAAC,KAAK,CAAC,QAAQ,QAAE,QAAQ,CAAkB,CAClB,CAC5B;gBACA,QAAQ,IAAI,CAAC,eAAe,IAAI,UAAC,KAAK,CAAC,IAAI,OAAG;gBAC9C,QAAQ,IAAI,UAAC,KAAK,CAAC,IAAI,OAAG;gBAC1B,CAAC,CAAC,UAAU,IAAI,CAAC,CAAC,UAAU,CAAC,GAAG,IAAI,UAAC,KAAK,CAAC,IAAI,IAAC,MAAM,EAAE,UAAU,GAAI,CAC5D,CACd,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC,IACD,CAAC"}

package/lib/JSAvatar.styling.d.ts

@@ -1,4 +1,5 @@
 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 +1 @@
-{"version":3,"file":"JSAvatar.styling.d.ts","sourceRoot":"","sources":["../src/JSAvatar.styling.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,cAAc,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAChG,OAAO,EAAS,iBAAiB,EAAc,MAAM,kCAAkC,CAAC;AAWxF,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,aAAa,EAAE,eAAe,EAAE,cAAc,CAkJ7F,CAAC"}
+{"version":3,"file":"JSAvatar.styling.d.ts","sourceRoot":"","sources":["../src/JSAvatar.styling.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,cAAc,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAChG,OAAO,EAAS,iBAAiB,EAAc,MAAM,kCAAkC,CAAC;AAYxF,eAAO,MAAM,YAAY,EAAE,CAAC,MAAM,cAAc,CAAC,EAA2B,CAAC;AAE7E,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,aAAa,EAAE,eAAe,EAAE,cAAc,CAmJ7F,CAAC"}

package/lib/JSAvatar.styling.js

@@ -1,14 +1,35 @@
+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 __spreadArrays = (this && this.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
 import { JSAvatarName } from './JSAvatar.types';
 import { buildProps } from '@fluentui-react-native/framework';
 import { defaultJSAvatarTokens } from './JSAvatarTokens';
 import { calculateEffectiveSizes, convertCoinColorFluent, getRingThickness } from './JSAvatar.helpers';
+import { borderStyles } from '@fluentui-react-native/tokens';
 var nameMap = {
     start: 'flex-start',
     center: 'center',
     end: 'flex-end',
 };
+export var avatarStates = ['circular', 'square'];
 export var stylingSettings = {
     tokens: [defaultJSAvatarTokens, JSAvatarName],
+    states: avatarStates,
     slotProps: {
         root: buildProps(function (tokens) {
             var physicalSize = calculateEffectiveSizes(tokens).physicalSize;
@@ -33,7 +54,7 @@ export var stylingSettings = {
                 },
             };
         }, ['initialsSize']),
-        initialsBackground: buildProps(function (tokens) {
+        initialsBackground: buildProps(function (tokens, theme) {
             var physicalSize = calculateEffectiveSizes(tokens).physicalSize;
             var backgroundColor = tokens.backgroundColor, coinColorFluent = tokens.coinColorFluent;
             var effectiveBackgroundColor = backgroundColor;
@@ -41,28 +62,19 @@ export var stylingSettings = {
                 effectiveBackgroundColor = convertCoinColorFluent(coinColorFluent);
             }
             return {
-                style: {
-                    borderRadius: physicalSize / 2,
-                    width: physicalSize,
-                    height: physicalSize,
-                    flexGrow: 1,
-                    alignSelf: 'stretch',
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                    backgroundColor: effectiveBackgroundColor,
-                },
+                style: __assign(__assign({}, borderStyles.from(tokens, theme)), { width: physicalSize, height: physicalSize, flexGrow: 1, alignSelf: 'stretch', justifyContent: 'center', alignItems: 'center', backgroundColor: effectiveBackgroundColor }),
             };
-        }, ['coinColorFluent', 'backgroundColor', 'physicalSize']),
+        }, __spreadArrays(['coinColorFluent', 'backgroundColor', 'physicalSize'], borderStyles.keys)),
         photo: buildProps(function (tokens) {
             var physicalSize = calculateEffectiveSizes(tokens).physicalSize;
             return {
                 style: {
-                    borderRadius: physicalSize / 2,
+                    borderRadius: tokens.borderRadius,
                     width: physicalSize,
                     height: physicalSize,
                 },
             };
-        }, ['physicalSize']),
+        }, ['physicalSize', 'borderRadius']),
         icon: buildProps(function (tokens, theme) {
             var _a = calculateEffectiveSizes(tokens), iconSize = _a.iconSize, iconStrokeWidth = _a.iconStrokeWidth;
             var iconSizeAdjusted = iconSize + iconStrokeWidth * 2;
@@ -90,19 +102,9 @@ export var stylingSettings = {
             var effectiveSize = physicalSize + 2 * effectiveRingThickness;
             var ringColor = ring.ringBackgroundColor || theme.colors.personaActivityRing;
             return {
-                style: {
-                    borderStyle: 'solid',
-                    borderColor: ringColor,
-                    borderWidth: effectiveRingThickness,
-                    borderRadius: effectiveSize / 2,
-                    width: effectiveSize,
-                    height: effectiveSize,
-                    position: 'absolute',
-                    top: -effectiveRingThickness,
-                    left: -effectiveRingThickness,
-                },
+                style: __assign({ borderStyle: 'solid', borderColor: ringColor, borderWidth: effectiveRingThickness, width: effectiveSize, height: effectiveSize, position: 'absolute', top: -effectiveRingThickness, left: -effectiveRingThickness }, borderStyles.from(tokens, theme)),
             };
-        }, ['physicalSize', 'ring', 'physicalSize']),
+        }, __spreadArrays(['physicalSize', 'ring', 'physicalSize'], borderStyles.keys)),
         glow: buildProps(function (tokens, theme) {
             var physicalSize = calculateEffectiveSizes(tokens).physicalSize;
             var ring = tokens.ring;
@@ -113,19 +115,9 @@ export var stylingSettings = {
             var effectiveSize = physicalSize + 2 * effectiveRingThickness;
             var glowColor = ring.accent ? theme.colors.accentButtonBackground : ring.ringColor || theme.colors.personaActivityGlow;
             return {
-                style: {
-                    borderStyle: 'solid',
-                    borderColor: glowColor,
-                    borderWidth: effectiveRingThickness - innerGap,
-                    borderRadius: effectiveSize / 2,
-                    width: effectiveSize,
-                    height: effectiveSize,
-                    position: 'absolute',
-                    top: -effectiveRingThickness,
-                    left: -effectiveRingThickness,
-                },
+                style: __assign({ borderStyle: 'solid', borderColor: glowColor, borderWidth: effectiveRingThickness - innerGap, width: effectiveSize, height: effectiveSize, position: 'absolute', top: -effectiveRingThickness, left: -effectiveRingThickness }, borderStyles.from(tokens, theme)),
             };
-        }, ['physicalSize', 'ring']),
+        }, __spreadArrays(['physicalSize', 'ring'], borderStyles.keys)),
     },
 };
 //# sourceMappingURL=JSAvatar.styling.js.map

package/lib/JSAvatar.styling.js.map

@@ -1 +1 @@
-{"version":3,"file":"JSAvatar.styling.js","sourceRoot":"","sources":["../src/JSAvatar.styling.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"JSAvatar.styling.js","sourceRoot":"","sources":["../src/JSAvatar.styling.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,YAAY,EAAkD,MAAM,kBAAkB,CAAC;AAChG,OAAO,EAA4B,UAAU,EAAE,MAAM,kCAAkC,CAAC;AACxF,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACvG,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAE7D,IAAM,OAAO,GAA8B;IACzC,KAAK,EAAE,YAAY;IACnB,MAAM,EAAE,QAAQ;IAChB,GAAG,EAAE,UAAU;CAChB,CAAC;AAEF,MAAM,CAAC,IAAM,YAAY,GAA6B,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;AAE7E,MAAM,CAAC,IAAM,eAAe,GAAsE;IAChG,MAAM,EAAE,CAAC,qBAAqB,EAAE,YAAY,CAAC;IAC7C,MAAM,EAAE,YAAY;IACpB,SAAS,EAAE;QACT,IAAI,EAAE,UAAU,CACd,UAAC,MAAsB;YACb,IAAA,2DAAY,CAAqC;YACjD,IAAA,wDAAuB,EAAE,oDAAqB,CAAY;YAClE,OAAO;gBACL,KAAK,EAAE;oBACL,aAAa,EAAE,KAAK;oBACpB,KAAK,EAAE,YAAY;oBACnB,MAAM,EAAE,YAAY;oBACpB,cAAc,EAAE,OAAO,CAAC,uBAAuB,IAAI,KAAK,CAAgC;oBACxF,UAAU,EAAE,OAAO,CAAC,qBAAqB,IAAI,KAAK,CAA4B;oBAC9E,uBAAuB,yBAAA;oBACvB,qBAAqB,uBAAA;iBACtB;aACF,CAAC;QACJ,CAAC,EACD,CAAC,yBAAyB,EAAE,uBAAuB,CAAC,CACrD;QACD,QAAQ,EAAE,UAAU,CAClB,UAAC,MAAsB;YACb,IAAA,2DAAY,CAAqC;YACzD,OAAO;gBACL,KAAK,EAAE;oBACL,QAAQ,EAAE,YAAY;iBACvB;aACF,CAAC;QACJ,CAAC,EACD,CAAC,cAAc,CAAC,CACjB;QACD,kBAAkB,EAAE,UAAU,CAC5B,UAAC,MAAsB,EAAE,KAAY;YAC3B,IAAA,2DAAY,CAAqC;YACjD,IAAA,wCAAe,EAAE,wCAAe,CAAY;YACpD,IAAI,wBAAwB,GAAG,eAAe,CAAC;YAC/C,IAAI,eAAe,EAAE;gBACnB,wBAAwB,GAAG,sBAAsB,CAAC,eAAe,CAAC,CAAC;aACpE;YACD,OAAO;gBACL,KAAK,wBACA,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,KACnC,KAAK,EAAE,YAAY,EACnB,MAAM,EAAE,YAAY,EACpB,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,QAAQ,EACxB,UAAU,EAAE,QAAQ,EACpB,eAAe,EAAE,wBAAwB,GAC1C;aACF,CAAC;QACJ,CAAC,kBACA,iBAAiB,EAAE,iBAAiB,EAAE,cAAc,GAAK,YAAY,CAAC,IAAI,EAC5E;QACD,KAAK,EAAE,UAAU,CACf,UAAC,MAAsB;YACb,IAAA,2DAAY,CAAqC;YAEzD,OAAO;gBACL,KAAK,EAAE;oBACL,YAAY,EAAE,MAAM,CAAC,YAAY;oBACjC,KAAK,EAAE,YAAY;oBACnB,MAAM,EAAE,YAAY;iBACrB;aACF,CAAC;QACJ,CAAC,EACD,CAAC,cAAc,EAAE,cAAc,CAAC,CACjC;QACD,IAAI,EAAE,UAAU,CACd,UAAC,MAAsB,EAAE,KAAY;YAC7B,IAAA,oCAA+D,EAA7D,sBAAQ,EAAE,oCAAmD,CAAC;YACtE,IAAM,gBAAgB,GAAG,QAAQ,GAAG,eAAe,GAAG,CAAC,CAAC;YACxD,IAAM,eAAe,GAAG,MAAM,CAAC,eAAe,IAAI,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC;YAC1E,OAAO;gBACL,KAAK,EAAE;oBACL,QAAQ,EAAE,UAAU;oBACpB,KAAK,EAAE,gBAAgB;oBACvB,MAAM,EAAE,gBAAgB;oBACxB,MAAM,EAAE,CAAC,eAAe;oBACxB,GAAG,EAAE,CAAC,eAAe;oBACrB,YAAY,EAAE,gBAAgB,GAAG,CAAC;oBAClC,WAAW,EAAE,eAAe;oBAC5B,WAAW,EAAE,eAAe;iBAC7B;aACF,CAAC;QACJ,CAAC,EACD,CAAC,UAAU,EAAE,iBAAiB,EAAE,iBAAiB,CAAC,CACnD;QACD,IAAI,EAAE,UAAU,CACd,UAAC,MAAsB,EAAE,KAAY;YAC3B,IAAA,2DAAY,CAAqC;YACjD,IAAA,kBAAI,CAAY;YAExB,IAAI,CAAC,IAAI;gBAAE,OAAO,EAAE,CAAC;YAErB,IAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,IAAI,CAAC,aAAa,IAAI,SAAS,CAAC,CAAC;YAElI,IAAM,sBAAsB,GAAG,CAAC,GAAG,gBAAgB,CAAC,IAAI,CAAC,aAAa,IAAI,SAAS,CAAC,GAAG,QAAQ,CAAC;YAChG,IAAM,aAAa,GAAG,YAAY,GAAG,CAAC,GAAG,sBAAsB,CAAC;YAChE,IAAM,SAAS,GAAG,IAAI,CAAC,mBAAmB,IAAI,KAAK,CAAC,MAAM,CAAC,mBAAmB,CAAC;YAC/E,OAAO;gBACL,KAAK,aACH,WAAW,EAAE,OAAO,EACpB,WAAW,EAAE,SAAS,EACtB,WAAW,EAAE,sBAAsB,EACnC,KAAK,EAAE,aAAa,EACpB,MAAM,EAAE,aAAa,EACrB,QAAQ,EAAE,UAAU,EACpB,GAAG,EAAE,CAAC,sBAAsB,EAC5B,IAAI,EAAE,CAAC,sBAAsB,IAC1B,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,CACpC;aACF,CAAC;QACJ,CAAC,kBACA,cAAc,EAAE,MAAM,EAAE,cAAc,GAAK,YAAY,CAAC,IAAI,EAC9D;QACD,IAAI,EAAE,UAAU,CACd,UAAC,MAAsB,EAAE,KAAY;YAC3B,IAAA,2DAAY,CAAqC;YACjD,IAAA,kBAAI,CAAY;YAExB,IAAI,CAAC,IAAI;gBAAE,OAAO,EAAE,CAAC;YAErB,IAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,IAAI,CAAC,aAAa,IAAI,SAAS,CAAC,CAAC;YAElI,IAAM,sBAAsB,GAAG,gBAAgB,CAAC,IAAI,CAAC,aAAa,IAAI,SAAS,CAAC,GAAG,QAAQ,CAAC;YAC5F,IAAM,aAAa,GAAG,YAAY,GAAG,CAAC,GAAG,sBAAsB,CAAC;YAChE,IAAM,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,sBAAsB,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,IAAI,KAAK,CAAC,MAAM,CAAC,mBAAmB,CAAC;YACzH,OAAO;gBACL,KAAK,aACH,WAAW,EAAE,OAAO,EACpB,WAAW,EAAE,SAAS,EACtB,WAAW,EAAE,sBAAsB,GAAG,QAAQ,EAC9C,KAAK,EAAE,aAAa,EACpB,MAAM,EAAE,aAAa,EACrB,QAAQ,EAAE,UAAU,EACpB,GAAG,EAAE,CAAC,sBAAsB,EAC5B,IAAI,EAAE,CAAC,sBAAsB,IAC1B,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,CACpC;aACF,CAAC;QACJ,CAAC,kBACA,cAAc,EAAE,MAAM,GAAK,YAAY,CAAC,IAAI,EAC9C;KACF;CACF,CAAC"}

package/lib/JSAvatar.types.d.ts

@@ -1,8 +1,11 @@
 import type { IViewProps } from '@fluentui-react-native/adapters';
 import { ImageProps, ViewProps, ImageURISource, TextProps, ColorValue } from 'react-native';
-import { IBackgroundColorTokens, IForegroundColorTokens } from '@fluentui-react-native/tokens';
+import { IBackgroundColorTokens, IForegroundColorTokens, IBorderTokens } from '@fluentui-react-native/tokens';
 export declare const JSAvatarName = "Avatar";
 export declare type AvatarSize = 'size8' | 'size24' | 'size32' | 'size40' | 'size48' | 'size56' | 'size72' | 'size100' | 'size120';
+export declare type AvatarShape = 'circular' | 'square';
+export declare type AvatarActive = 'active' | 'inactive' | 'unset';
+export declare type AvatarActiveAppearance = 'ring' | 'shadow' | 'glow' | 'ring-shadow' | 'ring-glow';
 /**
  * Sets color of the avatar when there is no picture. Uses fluent color names
  */
@@ -23,11 +26,14 @@ export interface AvatarConfigurableProps {
     coinColorFluent?: AvatarColor;
 }
 export interface JSAvatarProps extends IViewProps, AvatarConfigurableProps {
+    active?: AvatarActive;
+    activeAppearance?: AvatarActiveAppearance;
     imageUrl?: string;
     imageDescription?: string;
     initials?: string;
     presence?: AvatarPresence;
     isOutOfOffice?: boolean;
+    shape?: AvatarShape;
 }
 export interface AvatarSlotProps {
     root: ViewProps;
@@ -39,7 +45,7 @@ export interface AvatarSlotProps {
     glow: ViewProps;
 }
 export declare type IconAlignment = 'start' | 'center' | 'end';
-export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColorTokens, AvatarConfigurableProps {
+export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColorTokens, AvatarConfigurableProps, IBorderTokens {
     avatarSize?: number;
     iconSize?: number;
     iconStrokeWidth?: number;
@@ -48,6 +54,8 @@ export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColor
     horizontalIconAlignment?: IconAlignment;
     verticalIconAlignment?: IconAlignment;
     physicalSize?: number;
+    circular?: JSAvatarTokens;
+    square?: JSAvatarTokens;
 }
 export interface JSAvatarState {
     personaPhotoSource: ImageURISource | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"JSAvatar.types.d.ts","sourceRoot":"","sources":["../src/JSAvatar.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"JSAvatar.types.d.ts","sourceRoot":"","sources":["../src/JSAvatar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,cAAc,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC5F,OAAO,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAE9G,eAAO,MAAM,YAAY,WAAW,CAAC;AAErC,oBAAY,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;AAE3H,oBAAY,WAAW,GAAG,UAAU,GAAG,QAAQ,CAAC;AAChD,oBAAY,YAAY,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;AAC3D,oBAAY,sBAAsB,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,aAAa,GAAG,WAAW,CAAC;AAE9F;;GAEG;AACH,oBAAY,WAAW,GACnB,YAAY,GACZ,MAAM,GACN,WAAW,GACX,MAAM,GACN,QAAQ,GACR,WAAW,GACX,OAAO,GACP,SAAS,GACT,OAAO,GACP,QAAQ,GACR,SAAS,GACT,KAAK,GACL,UAAU,GACV,QAAQ,GACR,OAAO,GACP,SAAS,GACT,OAAO,GACP,UAAU,GACV,OAAO,GACP,OAAO,CAAC;AAEZ,oBAAY,cAAc,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,KAAK,GAAG,SAAS,GAAG,MAAM,CAAC;AAEjG,oBAAY,aAAa,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEpG,MAAM,WAAW,UAAU;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,mBAAmB,CAAC,EAAE,UAAU,CAAC;IACjC,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,QAAQ,CAAC,EAAE,aAAa,CAAC;CAC1B;AAED,MAAM,WAAW,uBAAuB;IACtC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,eAAe,CAAC,EAAE,WAAW,CAAC;CAC/B;AAED,MAAM,WAAW,aAAc,SAAQ,UAAU,EAAE,uBAAuB;IACxE,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,gBAAgB,CAAC,EAAE,sBAAsB,CAAC;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,KAAK,CAAC,EAAE,WAAW,CAAC;CACrB;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,UAAU,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,kBAAkB,EAAE,SAAS,CAAC;IAC9B,IAAI,EAAE,UAAU,CAAC;IACjB,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,EAAE,SAAS,CAAC;CACjB;AAED,oBAAY,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAEvD,MAAM,WAAW,cAAe,SAAQ,sBAAsB,EAAE,sBAAsB,EAAE,uBAAuB,EAAE,aAAa;IAC5H,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uBAAuB,CAAC,EAAE,aAAa,CAAC;IACxC,qBAAqB,CAAC,EAAE,aAAa,CAAC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,MAAM,CAAC,EAAE,cAAc,CAAC;CACzB;AAED,MAAM,WAAW,aAAa;IAC5B,kBAAkB,EAAE,cAAc,GAAG,SAAS,CAAC;IAC/C,UAAU,EAAE,cAAc,GAAG,SAAS,CAAC;IACvC,QAAQ,EAAE,OAAO,CAAC;IAClB,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,aAAa,CAAC;IACrB,KAAK,EAAE,aAAa,CAAC;CACtB;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,aAAa,CAAC;IACrB,SAAS,EAAE,eAAe,CAAC;IAC3B,MAAM,EAAE,cAAc,CAAC;IACvB,KAAK,EAAE,aAAa,CAAC;CACtB"}

package/lib/JSAvatarTokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"JSAvatarTokens.d.ts","sourceRoot":"","sources":["../src/JSAvatarTokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,GAAG,CAAC;AAGnC,eAAO,MAAM,qBAAqB,EAAE,aAAa,CAAC,cAAc,EAAE,KAAK,CAOjD,CAAC"}
+{"version":3,"file":"JSAvatarTokens.d.ts","sourceRoot":"","sources":["../src/JSAvatarTokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,GAAG,CAAC;AAInC,eAAO,MAAM,qBAAqB,EAAE,aAAa,CAAC,cAAc,EAAE,KAAK,CAajD,CAAC"}

package/lib/JSAvatarTokens.js

@@ -1,4 +1,5 @@
 import { convertCoinColorFluent } from './JSAvatar.helpers';
+import { globalTokens } from '@fluentui-react-native/theme-tokens';
 export var defaultJSAvatarTokens = function () {
     return ({
         horizontalIconAlignment: 'end',
@@ -6,6 +7,12 @@ export var defaultJSAvatarTokens = function () {
         color: 'white',
         iconStrokeColor: 'white',
         backgroundColor: convertCoinColorFluent('cornflower'),
+        circular: {
+            borderRadius: globalTokens.corner.radius.circle,
+        },
+        square: {
+            borderRadius: globalTokens.corner.radius.medium,
+        },
     });
 };
 //# sourceMappingURL=JSAvatarTokens.js.map

package/lib/JSAvatarTokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"JSAvatarTokens.js","sourceRoot":"","sources":["../src/JSAvatarTokens.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,MAAM,CAAC,IAAM,qBAAqB,GAAyC;IACzE,OAAA,CAAC;QACC,uBAAuB,EAAE,KAAK;QAC9B,qBAAqB,EAAE,KAAK;QAC5B,KAAK,EAAE,OAAO;QACd,eAAe,EAAE,OAAO;QACxB,eAAe,EAAE,sBAAsB,CAAC,YAAY,CAAC;KACnC,CAAA;AANpB,CAMoB,CAAC"}
+{"version":3,"file":"JSAvatarTokens.js","sourceRoot":"","sources":["../src/JSAvatarTokens.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AAEnE,MAAM,CAAC,IAAM,qBAAqB,GAAyC;IACzE,OAAA,CAAC;QACC,uBAAuB,EAAE,KAAK;QAC9B,qBAAqB,EAAE,KAAK;QAC5B,KAAK,EAAE,OAAO;QACd,eAAe,EAAE,OAAO;QACxB,eAAe,EAAE,sBAAsB,CAAC,YAAY,CAAC;QACrD,QAAQ,EAAE;YACR,YAAY,EAAE,YAAY,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM;SAChD;QACD,MAAM,EAAE;YACN,YAAY,EAAE,YAAY,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM;SAChD;KACiB,CAAA;AAZpB,CAYoB,CAAC"}

package/lib/useAvatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAvatar.d.ts","sourceRoot":"","sources":["../src/useAvatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAiB,MAAM,kBAAkB,CAAC;AAG5E;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,sCA+BrB,CAAC"}
+{"version":3,"file":"useAvatar.d.ts","sourceRoot":"","sources":["../src/useAvatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAiB,MAAM,kBAAkB,CAAC;AAG5E;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,sCAgCrB,CAAC"}

package/lib/useAvatar.js

@@ -29,7 +29,7 @@ import { getPresenceIconSource } from './JSAvatar.helpers';
  * @returns configured props and state for FURN Avatar
  */
 export var useAvatar = function (props) {
-    var imageUrl = props.imageUrl, imageDescription = props.imageDescription, initials = props.initials, presence = props.presence, isOutOfOffice = props.isOutOfOffice, ring = props.ring, rest = __rest(props, ["imageUrl", "imageDescription", "initials", "presence", "isOutOfOffice", "ring"]);
+    var imageUrl = props.imageUrl, imageDescription = props.imageDescription, initials = props.initials, presence = props.presence, isOutOfOffice = props.isOutOfOffice, ring = props.ring, shape = props.shape, rest = __rest(props, ["imageUrl", "imageDescription", "initials", "presence", "isOutOfOffice", "ring", "shape"]);
     var personaPhotoSource = imageUrl === undefined
         ? undefined
         : {
@@ -45,7 +45,7 @@ export var useAvatar = function (props) {
         transparentRing: transparentRing,
     };
     return {
-        props: __assign({ children: initials, accessibilityLabel: imageDescription }, rest),
+        props: __assign({ children: initials, accessibilityLabel: imageDescription, shape: shape || 'circular' }, rest),
         state: __assign({}, state),
     };
 };

package/lib/useAvatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAvatar.js","sourceRoot":"","sources":["../src/useAvatar.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAE3D;;;;;;GAMG;AACH,MAAM,CAAC,IAAM,SAAS,GAAG,UAAC,KAAoB;IACpC,IAAA,yBAAQ,EAAE,yCAAgB,EAAE,yBAAQ,EAAE,yBAAQ,EAAE,mCAAa,EAAE,iBAAI,EAAE,uGAAO,CAAW;IAE/F,IAAM,kBAAkB,GACtB,QAAQ,KAAK,SAAS;QACpB,CAAC,CAAC,SAAS;QACX,CAAC,CAAC;YACE,GAAG,EAAE,QAAQ;SACd,CAAC;IAER,IAAM,UAAU,GAAG,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,qBAAqB,CAAC,QAAQ,EAAE,aAAa,IAAI,KAAK,CAAC,CAAC;IAChH,IAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC;IACxB,IAAM,eAAe,GAAG,CAAC,EAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,WAAW,CAAA,CAAC;IAE5C,IAAM,KAAK,GAAkB;QAC3B,UAAU,YAAA;QACV,kBAAkB,oBAAA;QAClB,QAAQ,UAAA;QACR,eAAe,iBAAA;KAChB,CAAC;IAEF,OAAO;QACL,KAAK,aACH,QAAQ,EAAE,QAAQ,EAClB,kBAAkB,EAAE,gBAAgB,IACjC,IAAI,CACR;QACD,KAAK,eACA,KAAK,CACT;KACF,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"useAvatar.js","sourceRoot":"","sources":["../src/useAvatar.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAE3D;;;;;;GAMG;AACH,MAAM,CAAC,IAAM,SAAS,GAAG,UAAC,KAAoB;IACpC,IAAA,yBAAQ,EAAE,yCAAgB,EAAE,yBAAQ,EAAE,yBAAQ,EAAE,mCAAa,EAAE,iBAAI,EAAE,mBAAK,EAAE,gHAAO,CAAW;IAEtG,IAAM,kBAAkB,GACtB,QAAQ,KAAK,SAAS;QACpB,CAAC,CAAC,SAAS;QACX,CAAC,CAAC;YACE,GAAG,EAAE,QAAQ;SACd,CAAC;IAER,IAAM,UAAU,GAAG,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,qBAAqB,CAAC,QAAQ,EAAE,aAAa,IAAI,KAAK,CAAC,CAAC;IAChH,IAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC;IACxB,IAAM,eAAe,GAAG,CAAC,EAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,WAAW,CAAA,CAAC;IAE5C,IAAM,KAAK,GAAkB;QAC3B,UAAU,YAAA;QACV,kBAAkB,oBAAA;QAClB,QAAQ,UAAA;QACR,eAAe,iBAAA;KAChB,CAAC;IAEF,OAAO;QACL,KAAK,aACH,QAAQ,EAAE,QAAQ,EAClB,kBAAkB,EAAE,gBAAgB,EACpC,KAAK,EAAE,KAAK,IAAI,UAAU,IACvB,IAAI,CACR;QACD,KAAK,eACA,KAAK,CACT;KACF,CAAC;AACJ,CAAC,CAAC"}

package/lib-commonjs/JSAvatar.d.ts

@@ -1,3 +1,12 @@
-import { JSAvatarProps } from './JSAvatar.types';
+import { JSAvatarProps, JSAvatarState } 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/composition").ComposeFactoryComponent<JSAvatarProps, import("./JSAvatar.types").AvatarSlotProps, import("./JSAvatar.types").JSAvatarTokens, import("@fluentui-react-native/framework").Theme, object>;
 //# sourceMappingURL=JSAvatar.d.ts.map

package/lib-commonjs/JSAvatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"JSAvatar.d.ts","sourceRoot":"","sources":["../src/JSAvatar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAA8B,MAAM,kBAAkB,CAAC;AAK7E,eAAO,MAAM,QAAQ,sOAoCnB,CAAC"}
+{"version":3,"file":"JSAvatar.d.ts","sourceRoot":"","sources":["../src/JSAvatar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAA8B,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAK5F;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,4EAExB,CAAC;AAEF,eAAO,MAAM,QAAQ,sOAoCnB,CAAC"}

package/lib-commonjs/JSAvatar.js

@@ -28,6 +28,17 @@ var JSAvatar_types_1 = require("./JSAvatar.types");
 var JSAvatar_styling_1 = require("./JSAvatar.styling");
 var framework_1 = require("@fluentui-react-native/framework");
 var useAvatar_1 = require("./useAvatar");
+/**
+ * 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
+ */
+exports.avatarLookup = function (layer, state, userProps) {
+    return state[layer] || userProps[layer] || layer === userProps['shape'] || (!userProps['shape'] && layer === 'circular');
+};
 exports.JSAvatar = framework_1.compose(__assign(__assign({ displayName: JSAvatar_types_1.JSAvatarName }, JSAvatar_styling_1.stylingSettings), { slots: {
         root: react_native_1.View,
         photo: react_native_1.Image,
@@ -37,11 +48,11 @@ exports.JSAvatar = framework_1.compose(__assign(__assign({ displayName: JSAvatar
         ring: react_native_1.View,
         glow: react_native_1.View,
     }, render: function (userProps, useSlots) {
-        var Avatar = useAvatar_1.useAvatar(userProps);
-        var Slots = useSlots(userProps, function (layer) { return Avatar.state[layer] || userProps[layer]; });
+        var avatar = useAvatar_1.useAvatar(userProps);
+        var Slots = useSlots(userProps, function (layer) { return exports.avatarLookup(layer, avatar.state, userProps); });
         return function (final) {
-            var _a = framework_1.mergeProps(Avatar.props, final), children = _a.children, accessibilityLabel = _a.accessibilityLabel, mergedProps = __rest(_a, ["children", "accessibilityLabel"]);
-            var _b = Avatar.state, personaPhotoSource = _b.personaPhotoSource, iconSource = _b.iconSource, showRing = _b.showRing, transparentRing = _b.transparentRing;
+            var _a = framework_1.mergeProps(avatar.props, final), children = _a.children, accessibilityLabel = _a.accessibilityLabel, mergedProps = __rest(_a, ["children", "accessibilityLabel"]);
+            var _b = avatar.state, personaPhotoSource = _b.personaPhotoSource, iconSource = _b.iconSource, showRing = _b.showRing, transparentRing = _b.transparentRing;
             return (framework_1.withSlots(Slots.root, __assign({}, mergedProps),
                 personaPhotoSource ? (framework_1.withSlots(Slots.photo, { accessibilityLabel: accessibilityLabel, source: personaPhotoSource })) : (framework_1.withSlots(Slots.initialsBackground, null,
                     framework_1.withSlots(Slots.initials, null, children))),

package/lib-commonjs/JSAvatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"JSAvatar.js","sourceRoot":"","sources":["../src/JSAvatar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,qBAAqB;AACrB,6CAAiD;AACjD,mDAA6E;AAC7E,uDAAqD;AACrD,8DAA4F;AAC5F,yCAAwC;AAE3B,QAAA,QAAQ,GAAG,mBAAO,qBAC7B,WAAW,EAAE,6BAAY,IACtB,kCAAe,KAClB,KAAK,EAAE;QACL,IAAI,EAAE,mBAAI;QACV,KAAK,EAAE,oBAAK;QACZ,QAAQ,EAAE,mBAAI;QACd,kBAAkB,EAAE,mBAAI;QACxB,IAAI,EAAE,oBAAK;QACX,IAAI,EAAE,mBAAI;QACV,IAAI,EAAE,mBAAI;KACX,EACD,MAAM,EAAE,UAAC,SAAwB,EAAE,QAAgC;QACjE,IAAM,MAAM,GAAG,qBAAS,CAAC,SAAS,CAAC,CAAC;QACpC,IAAM,KAAK,GAAG,QAAQ,CAAC,SAAS,EAAE,UAAC,KAAK,IAAK,OAAA,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,SAAS,CAAC,KAAK,CAAC,EAAvC,CAAuC,CAAC,CAAC;QAEtF,OAAO,UAAC,KAAoB;YAC1B,IAAM,gDAAkF,EAAhF,sBAAQ,EAAE,0CAAkB,EAAE,4DAAkD,CAAC;YACnF,IAAA,iBAA4E,EAA1E,0CAAkB,EAAE,0BAAU,EAAE,sBAAQ,EAAE,oCAAgC,CAAC;YAEnF,OAAO,CACL,sBAAC,KAAK,CAAC,IAAI,eAAK,WAAW;gBACxB,kBAAkB,CAAC,CAAC,CAAC,CACpB,sBAAC,KAAK,CAAC,KAAK,IAAC,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,EAAE,kBAAkB,GAAI,CACpF,CAAC,CAAC,CAAC,CACF,sBAAC,KAAK,CAAC,kBAAkB;oBACvB,sBAAC,KAAK,CAAC,QAAQ,QAAE,QAAQ,CAAkB,CAClB,CAC5B;gBACA,QAAQ,IAAI,CAAC,eAAe,IAAI,sBAAC,KAAK,CAAC,IAAI,OAAG;gBAC9C,QAAQ,IAAI,sBAAC,KAAK,CAAC,IAAI,OAAG;gBAC1B,CAAC,CAAC,UAAU,IAAI,CAAC,CAAC,UAAU,CAAC,GAAG,IAAI,sBAAC,KAAK,CAAC,IAAI,IAAC,MAAM,EAAE,UAAU,GAAI,CAC5D,CACd,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC,IACD,CAAC"}
+{"version":3,"file":"JSAvatar.js","sourceRoot":"","sources":["../src/JSAvatar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,qBAAqB;AACrB,6CAAiD;AACjD,mDAA4F;AAC5F,uDAAqD;AACrD,8DAA4F;AAC5F,yCAAwC;AAExC;;;;;;;GAOG;AACU,QAAA,YAAY,GAAG,UAAC,KAAa,EAAE,KAAoB,EAAE,SAAwB;IACxF,OAAO,KAAK,CAAC,KAAK,CAAC,IAAI,SAAS,CAAC,KAAK,CAAC,IAAI,KAAK,KAAK,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,KAAK,KAAK,UAAU,CAAC,CAAC;AAC3H,CAAC,CAAC;AAEW,QAAA,QAAQ,GAAG,mBAAO,qBAC7B,WAAW,EAAE,6BAAY,IACtB,kCAAe,KAClB,KAAK,EAAE;QACL,IAAI,EAAE,mBAAI;QACV,KAAK,EAAE,oBAAK;QACZ,QAAQ,EAAE,mBAAI;QACd,kBAAkB,EAAE,mBAAI;QACxB,IAAI,EAAE,oBAAK;QACX,IAAI,EAAE,mBAAI;QACV,IAAI,EAAE,mBAAI;KACX,EACD,MAAM,EAAE,UAAC,SAAwB,EAAE,QAAgC;QACjE,IAAM,MAAM,GAAG,qBAAS,CAAC,SAAS,CAAC,CAAC;QACpC,IAAM,KAAK,GAAG,QAAQ,CAAC,SAAS,EAAE,UAAC,KAAK,IAAK,OAAA,oBAAY,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC,EAA5C,CAA4C,CAAC,CAAC;QAE3F,OAAO,UAAC,KAAoB;YAC1B,IAAM,gDAAkF,EAAhF,sBAAQ,EAAE,0CAAkB,EAAE,4DAAkD,CAAC;YACnF,IAAA,iBAA4E,EAA1E,0CAAkB,EAAE,0BAAU,EAAE,sBAAQ,EAAE,oCAAgC,CAAC;YAEnF,OAAO,CACL,sBAAC,KAAK,CAAC,IAAI,eAAK,WAAW;gBACxB,kBAAkB,CAAC,CAAC,CAAC,CACpB,sBAAC,KAAK,CAAC,KAAK,IAAC,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,EAAE,kBAAkB,GAAI,CACpF,CAAC,CAAC,CAAC,CACF,sBAAC,KAAK,CAAC,kBAAkB;oBACvB,sBAAC,KAAK,CAAC,QAAQ,QAAE,QAAQ,CAAkB,CAClB,CAC5B;gBACA,QAAQ,IAAI,CAAC,eAAe,IAAI,sBAAC,KAAK,CAAC,IAAI,OAAG;gBAC9C,QAAQ,IAAI,sBAAC,KAAK,CAAC,IAAI,OAAG;gBAC1B,CAAC,CAAC,UAAU,IAAI,CAAC,CAAC,UAAU,CAAC,GAAG,IAAI,sBAAC,KAAK,CAAC,IAAI,IAAC,MAAM,EAAE,UAAU,GAAI,CAC5D,CACd,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC,IACD,CAAC"}

package/lib-commonjs/JSAvatar.styling.d.ts

@@ -1,4 +1,5 @@
 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-commonjs/JSAvatar.styling.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"JSAvatar.styling.d.ts","sourceRoot":"","sources":["../src/JSAvatar.styling.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,cAAc,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAChG,OAAO,EAAS,iBAAiB,EAAc,MAAM,kCAAkC,CAAC;AAWxF,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,aAAa,EAAE,eAAe,EAAE,cAAc,CAkJ7F,CAAC"}
+{"version":3,"file":"JSAvatar.styling.d.ts","sourceRoot":"","sources":["../src/JSAvatar.styling.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,cAAc,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAChG,OAAO,EAAS,iBAAiB,EAAc,MAAM,kCAAkC,CAAC;AAYxF,eAAO,MAAM,YAAY,EAAE,CAAC,MAAM,cAAc,CAAC,EAA2B,CAAC;AAE7E,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,aAAa,EAAE,eAAe,EAAE,cAAc,CAmJ7F,CAAC"}

package/lib-commonjs/JSAvatar.styling.js

@@ -1,16 +1,37 @@
 "use strict";
+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 __spreadArrays = (this && this.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var JSAvatar_types_1 = require("./JSAvatar.types");
 var framework_1 = require("@fluentui-react-native/framework");
 var JSAvatarTokens_1 = require("./JSAvatarTokens");
 var JSAvatar_helpers_1 = require("./JSAvatar.helpers");
+var tokens_1 = require("@fluentui-react-native/tokens");
 var nameMap = {
     start: 'flex-start',
     center: 'center',
     end: 'flex-end',
 };
+exports.avatarStates = ['circular', 'square'];
 exports.stylingSettings = {
     tokens: [JSAvatarTokens_1.defaultJSAvatarTokens, JSAvatar_types_1.JSAvatarName],
+    states: exports.avatarStates,
     slotProps: {
         root: framework_1.buildProps(function (tokens) {
             var physicalSize = JSAvatar_helpers_1.calculateEffectiveSizes(tokens).physicalSize;
@@ -35,7 +56,7 @@ exports.stylingSettings = {
                 },
             };
         }, ['initialsSize']),
-        initialsBackground: framework_1.buildProps(function (tokens) {
+        initialsBackground: framework_1.buildProps(function (tokens, theme) {
             var physicalSize = JSAvatar_helpers_1.calculateEffectiveSizes(tokens).physicalSize;
             var backgroundColor = tokens.backgroundColor, coinColorFluent = tokens.coinColorFluent;
             var effectiveBackgroundColor = backgroundColor;
@@ -43,28 +64,19 @@ exports.stylingSettings = {
                 effectiveBackgroundColor = JSAvatar_helpers_1.convertCoinColorFluent(coinColorFluent);
             }
             return {
-                style: {
-                    borderRadius: physicalSize / 2,
-                    width: physicalSize,
-                    height: physicalSize,
-                    flexGrow: 1,
-                    alignSelf: 'stretch',
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                    backgroundColor: effectiveBackgroundColor,
-                },
+                style: __assign(__assign({}, tokens_1.borderStyles.from(tokens, theme)), { width: physicalSize, height: physicalSize, flexGrow: 1, alignSelf: 'stretch', justifyContent: 'center', alignItems: 'center', backgroundColor: effectiveBackgroundColor }),
             };
-        }, ['coinColorFluent', 'backgroundColor', 'physicalSize']),
+        }, __spreadArrays(['coinColorFluent', 'backgroundColor', 'physicalSize'], tokens_1.borderStyles.keys)),
         photo: framework_1.buildProps(function (tokens) {
             var physicalSize = JSAvatar_helpers_1.calculateEffectiveSizes(tokens).physicalSize;
             return {
                 style: {
-                    borderRadius: physicalSize / 2,
+                    borderRadius: tokens.borderRadius,
                     width: physicalSize,
                     height: physicalSize,
                 },
             };
-        }, ['physicalSize']),
+        }, ['physicalSize', 'borderRadius']),
         icon: framework_1.buildProps(function (tokens, theme) {
             var _a = JSAvatar_helpers_1.calculateEffectiveSizes(tokens), iconSize = _a.iconSize, iconStrokeWidth = _a.iconStrokeWidth;
             var iconSizeAdjusted = iconSize + iconStrokeWidth * 2;
@@ -92,19 +104,9 @@ exports.stylingSettings = {
             var effectiveSize = physicalSize + 2 * effectiveRingThickness;
             var ringColor = ring.ringBackgroundColor || theme.colors.personaActivityRing;
             return {
-                style: {
-                    borderStyle: 'solid',
-                    borderColor: ringColor,
-                    borderWidth: effectiveRingThickness,
-                    borderRadius: effectiveSize / 2,
-                    width: effectiveSize,
-                    height: effectiveSize,
-                    position: 'absolute',
-                    top: -effectiveRingThickness,
-                    left: -effectiveRingThickness,
-                },
+                style: __assign({ borderStyle: 'solid', borderColor: ringColor, borderWidth: effectiveRingThickness, width: effectiveSize, height: effectiveSize, position: 'absolute', top: -effectiveRingThickness, left: -effectiveRingThickness }, tokens_1.borderStyles.from(tokens, theme)),
             };
-        }, ['physicalSize', 'ring', 'physicalSize']),
+        }, __spreadArrays(['physicalSize', 'ring', 'physicalSize'], tokens_1.borderStyles.keys)),
         glow: framework_1.buildProps(function (tokens, theme) {
             var physicalSize = JSAvatar_helpers_1.calculateEffectiveSizes(tokens).physicalSize;
             var ring = tokens.ring;
@@ -115,19 +117,9 @@ exports.stylingSettings = {
             var effectiveSize = physicalSize + 2 * effectiveRingThickness;
             var glowColor = ring.accent ? theme.colors.accentButtonBackground : ring.ringColor || theme.colors.personaActivityGlow;
             return {
-                style: {
-                    borderStyle: 'solid',
-                    borderColor: glowColor,
-                    borderWidth: effectiveRingThickness - innerGap,
-                    borderRadius: effectiveSize / 2,
-                    width: effectiveSize,
-                    height: effectiveSize,
-                    position: 'absolute',
-                    top: -effectiveRingThickness,
-                    left: -effectiveRingThickness,
-                },
+                style: __assign({ borderStyle: 'solid', borderColor: glowColor, borderWidth: effectiveRingThickness - innerGap, width: effectiveSize, height: effectiveSize, position: 'absolute', top: -effectiveRingThickness, left: -effectiveRingThickness }, tokens_1.borderStyles.from(tokens, theme)),
             };
-        }, ['physicalSize', 'ring']),
+        }, __spreadArrays(['physicalSize', 'ring'], tokens_1.borderStyles.keys)),
     },
 };
 //# sourceMappingURL=JSAvatar.styling.js.map

package/lib-commonjs/JSAvatar.styling.js.map

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

package/lib-commonjs/JSAvatar.types.d.ts

@@ -1,8 +1,11 @@
 import type { IViewProps } from '@fluentui-react-native/adapters';
 import { ImageProps, ViewProps, ImageURISource, TextProps, ColorValue } from 'react-native';
-import { IBackgroundColorTokens, IForegroundColorTokens } from '@fluentui-react-native/tokens';
+import { IBackgroundColorTokens, IForegroundColorTokens, IBorderTokens } from '@fluentui-react-native/tokens';
 export declare const JSAvatarName = "Avatar";
 export declare type AvatarSize = 'size8' | 'size24' | 'size32' | 'size40' | 'size48' | 'size56' | 'size72' | 'size100' | 'size120';
+export declare type AvatarShape = 'circular' | 'square';
+export declare type AvatarActive = 'active' | 'inactive' | 'unset';
+export declare type AvatarActiveAppearance = 'ring' | 'shadow' | 'glow' | 'ring-shadow' | 'ring-glow';
 /**
  * Sets color of the avatar when there is no picture. Uses fluent color names
  */
@@ -23,11 +26,14 @@ export interface AvatarConfigurableProps {
     coinColorFluent?: AvatarColor;
 }
 export interface JSAvatarProps extends IViewProps, AvatarConfigurableProps {
+    active?: AvatarActive;
+    activeAppearance?: AvatarActiveAppearance;
     imageUrl?: string;
     imageDescription?: string;
     initials?: string;
     presence?: AvatarPresence;
     isOutOfOffice?: boolean;
+    shape?: AvatarShape;
 }
 export interface AvatarSlotProps {
     root: ViewProps;
@@ -39,7 +45,7 @@ export interface AvatarSlotProps {
     glow: ViewProps;
 }
 export declare type IconAlignment = 'start' | 'center' | 'end';
-export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColorTokens, AvatarConfigurableProps {
+export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColorTokens, AvatarConfigurableProps, IBorderTokens {
     avatarSize?: number;
     iconSize?: number;
     iconStrokeWidth?: number;
@@ -48,6 +54,8 @@ export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColor
     horizontalIconAlignment?: IconAlignment;
     verticalIconAlignment?: IconAlignment;
     physicalSize?: number;
+    circular?: JSAvatarTokens;
+    square?: JSAvatarTokens;
 }
 export interface JSAvatarState {
     personaPhotoSource: ImageURISource | undefined;

package/lib-commonjs/JSAvatar.types.d.ts.map

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

package/lib-commonjs/JSAvatarTokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"JSAvatarTokens.d.ts","sourceRoot":"","sources":["../src/JSAvatarTokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,GAAG,CAAC;AAGnC,eAAO,MAAM,qBAAqB,EAAE,aAAa,CAAC,cAAc,EAAE,KAAK,CAOjD,CAAC"}
+{"version":3,"file":"JSAvatarTokens.d.ts","sourceRoot":"","sources":["../src/JSAvatarTokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,GAAG,CAAC;AAInC,eAAO,MAAM,qBAAqB,EAAE,aAAa,CAAC,cAAc,EAAE,KAAK,CAajD,CAAC"}

package/lib-commonjs/JSAvatarTokens.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var JSAvatar_helpers_1 = require("./JSAvatar.helpers");
+var theme_tokens_1 = require("@fluentui-react-native/theme-tokens");
 exports.defaultJSAvatarTokens = function () {
     return ({
         horizontalIconAlignment: 'end',
@@ -8,6 +9,12 @@ exports.defaultJSAvatarTokens = function () {
         color: 'white',
         iconStrokeColor: 'white',
         backgroundColor: JSAvatar_helpers_1.convertCoinColorFluent('cornflower'),
+        circular: {
+            borderRadius: theme_tokens_1.globalTokens.corner.radius.circle,
+        },
+        square: {
+            borderRadius: theme_tokens_1.globalTokens.corner.radius.medium,
+        },
     });
 };
 //# sourceMappingURL=JSAvatarTokens.js.map

package/lib-commonjs/JSAvatarTokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"JSAvatarTokens.js","sourceRoot":"","sources":["../src/JSAvatarTokens.ts"],"names":[],"mappings":";;AAGA,uDAA4D;AAE/C,QAAA,qBAAqB,GAAyC;IACzE,OAAA,CAAC;QACC,uBAAuB,EAAE,KAAK;QAC9B,qBAAqB,EAAE,KAAK;QAC5B,KAAK,EAAE,OAAO;QACd,eAAe,EAAE,OAAO;QACxB,eAAe,EAAE,yCAAsB,CAAC,YAAY,CAAC;KACnC,CAAA;AANpB,CAMoB,CAAC"}
+{"version":3,"file":"JSAvatarTokens.js","sourceRoot":"","sources":["../src/JSAvatarTokens.ts"],"names":[],"mappings":";;AAGA,uDAA4D;AAC5D,oEAAmE;AAEtD,QAAA,qBAAqB,GAAyC;IACzE,OAAA,CAAC;QACC,uBAAuB,EAAE,KAAK;QAC9B,qBAAqB,EAAE,KAAK;QAC5B,KAAK,EAAE,OAAO;QACd,eAAe,EAAE,OAAO;QACxB,eAAe,EAAE,yCAAsB,CAAC,YAAY,CAAC;QACrD,QAAQ,EAAE;YACR,YAAY,EAAE,2BAAY,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM;SAChD;QACD,MAAM,EAAE;YACN,YAAY,EAAE,2BAAY,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM;SAChD;KACiB,CAAA;AAZpB,CAYoB,CAAC"}

package/lib-commonjs/useAvatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAvatar.d.ts","sourceRoot":"","sources":["../src/useAvatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAiB,MAAM,kBAAkB,CAAC;AAG5E;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,sCA+BrB,CAAC"}
+{"version":3,"file":"useAvatar.d.ts","sourceRoot":"","sources":["../src/useAvatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAiB,MAAM,kBAAkB,CAAC;AAG5E;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,sCAgCrB,CAAC"}

package/lib-commonjs/useAvatar.js

@@ -31,7 +31,7 @@ var JSAvatar_helpers_1 = require("./JSAvatar.helpers");
  * @returns configured props and state for FURN Avatar
  */
 exports.useAvatar = function (props) {
-    var imageUrl = props.imageUrl, imageDescription = props.imageDescription, initials = props.initials, presence = props.presence, isOutOfOffice = props.isOutOfOffice, ring = props.ring, rest = __rest(props, ["imageUrl", "imageDescription", "initials", "presence", "isOutOfOffice", "ring"]);
+    var imageUrl = props.imageUrl, imageDescription = props.imageDescription, initials = props.initials, presence = props.presence, isOutOfOffice = props.isOutOfOffice, ring = props.ring, shape = props.shape, rest = __rest(props, ["imageUrl", "imageDescription", "initials", "presence", "isOutOfOffice", "ring", "shape"]);
     var personaPhotoSource = imageUrl === undefined
         ? undefined
         : {
@@ -47,7 +47,7 @@ exports.useAvatar = function (props) {
         transparentRing: transparentRing,
     };
     return {
-        props: __assign({ children: initials, accessibilityLabel: imageDescription }, rest),
+        props: __assign({ children: initials, accessibilityLabel: imageDescription, shape: shape || 'circular' }, rest),
         state: __assign({}, state),
     };
 };

package/lib-commonjs/useAvatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAvatar.js","sourceRoot":"","sources":["../src/useAvatar.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AACA,uDAA2D;AAE3D;;;;;;GAMG;AACU,QAAA,SAAS,GAAG,UAAC,KAAoB;IACpC,IAAA,yBAAQ,EAAE,yCAAgB,EAAE,yBAAQ,EAAE,yBAAQ,EAAE,mCAAa,EAAE,iBAAI,EAAE,uGAAO,CAAW;IAE/F,IAAM,kBAAkB,GACtB,QAAQ,KAAK,SAAS;QACpB,CAAC,CAAC,SAAS;QACX,CAAC,CAAC;YACE,GAAG,EAAE,QAAQ;SACd,CAAC;IAER,IAAM,UAAU,GAAG,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,wCAAqB,CAAC,QAAQ,EAAE,aAAa,IAAI,KAAK,CAAC,CAAC;IAChH,IAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC;IACxB,IAAM,eAAe,GAAG,CAAC,EAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,WAAW,CAAA,CAAC;IAE5C,IAAM,KAAK,GAAkB;QAC3B,UAAU,YAAA;QACV,kBAAkB,oBAAA;QAClB,QAAQ,UAAA;QACR,eAAe,iBAAA;KAChB,CAAC;IAEF,OAAO;QACL,KAAK,aACH,QAAQ,EAAE,QAAQ,EAClB,kBAAkB,EAAE,gBAAgB,IACjC,IAAI,CACR;QACD,KAAK,eACA,KAAK,CACT;KACF,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"useAvatar.js","sourceRoot":"","sources":["../src/useAvatar.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AACA,uDAA2D;AAE3D;;;;;;GAMG;AACU,QAAA,SAAS,GAAG,UAAC,KAAoB;IACpC,IAAA,yBAAQ,EAAE,yCAAgB,EAAE,yBAAQ,EAAE,yBAAQ,EAAE,mCAAa,EAAE,iBAAI,EAAE,mBAAK,EAAE,gHAAO,CAAW;IAEtG,IAAM,kBAAkB,GACtB,QAAQ,KAAK,SAAS;QACpB,CAAC,CAAC,SAAS;QACX,CAAC,CAAC;YACE,GAAG,EAAE,QAAQ;SACd,CAAC;IAER,IAAM,UAAU,GAAG,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,wCAAqB,CAAC,QAAQ,EAAE,aAAa,IAAI,KAAK,CAAC,CAAC;IAChH,IAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC;IACxB,IAAM,eAAe,GAAG,CAAC,EAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,WAAW,CAAA,CAAC;IAE5C,IAAM,KAAK,GAAkB;QAC3B,UAAU,YAAA;QACV,kBAAkB,oBAAA;QAClB,QAAQ,UAAA;QACR,eAAe,iBAAA;KAChB,CAAC;IAEF,OAAO;QACL,KAAK,aACH,QAAQ,EAAE,QAAQ,EAClB,kBAAkB,EAAE,gBAAgB,EACpC,KAAK,EAAE,KAAK,IAAI,UAAU,IACvB,IAAI,CACR;QACD,KAAK,eACA,KAAK,CACT;KACF,CAAC;AACJ,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/experimental-avatar",
-  "version": "0.13.1",
+  "version": "0.13.2",
   "description": "A cross-platform Avatar component using the Fluent Design System. Currently only implemented on iOS",
   "license": "MIT",
   "author": "Microsoft <fluentuinativeowners@microsoft.com>",
@@ -20,11 +20,11 @@
     "prettier-fix": "fluentui-scripts prettier --fix true"
   },
   "dependencies": {
-    "@fluentui-react-native/adapters": "^0.8.0",
+    "@fluentui-react-native/adapters": "^0.8.1",
     "@fluentui-react-native/component-cache": "^1.3.0",
-    "@fluentui-react-native/framework": "0.7.0",
-    "@fluentui-react-native/theme-tokens": "^0.10.0",
-    "@fluentui-react-native/tokens": "^0.11.0",
+    "@fluentui-react-native/framework": "0.7.1",
+    "@fluentui-react-native/theme-tokens": "^0.11.0",
+    "@fluentui-react-native/tokens": "^0.11.1",
     "@fluentui-react-native/use-styling": "^0.8.0"
   },
   "devDependencies": {

package/src/JSAvatar.styling.ts

@@ -3,6 +3,7 @@ import { Theme, UseStylingOptions, buildProps } from '@fluentui-react-native/fra
 import { defaultJSAvatarTokens } from './JSAvatarTokens';
 import { ViewStyle } from 'react-native';
 import { calculateEffectiveSizes, convertCoinColorFluent, getRingThickness } from './JSAvatar.helpers';
+import { borderStyles } from '@fluentui-react-native/tokens';
 
 const nameMap: { [key: string]: string } = {
   start: 'flex-start',
@@ -10,8 +11,11 @@ const nameMap: { [key: string]: string } = {
   end: 'flex-end',
 };
 
+export const avatarStates: (keyof JSAvatarTokens)[] = ['circular', 'square'];
+
 export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps, JSAvatarTokens> = {
   tokens: [defaultJSAvatarTokens, JSAvatarName],
+  states: avatarStates,
   slotProps: {
     root: buildProps(
       (tokens: JSAvatarTokens) => {
@@ -43,7 +47,7 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
       ['initialsSize'],
     ),
     initialsBackground: buildProps(
-      (tokens: JSAvatarTokens) => {
+      (tokens: JSAvatarTokens, theme: Theme) => {
         const { physicalSize } = calculateEffectiveSizes(tokens);
         const { backgroundColor, coinColorFluent } = tokens;
         let effectiveBackgroundColor = backgroundColor;
@@ -52,7 +56,7 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
         }
         return {
           style: {
-            borderRadius: physicalSize / 2,
+            ...borderStyles.from(tokens, theme),
             width: physicalSize,
             height: physicalSize,
             flexGrow: 1,
@@ -63,7 +67,7 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
           },
         };
       },
-      ['coinColorFluent', 'backgroundColor', 'physicalSize'],
+      ['coinColorFluent', 'backgroundColor', 'physicalSize', ...borderStyles.keys],
     ),
     photo: buildProps(
       (tokens: JSAvatarTokens) => {
@@ -71,13 +75,13 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
 
         return {
           style: {
-            borderRadius: physicalSize / 2,
+            borderRadius: tokens.borderRadius,
             width: physicalSize,
             height: physicalSize,
           },
         };
       },
-      ['physicalSize'],
+      ['physicalSize', 'borderRadius'],
     ),
     icon: buildProps(
       (tokens: JSAvatarTokens, theme: Theme) => {
@@ -116,16 +120,16 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
             borderStyle: 'solid',
             borderColor: ringColor,
             borderWidth: effectiveRingThickness,
-            borderRadius: effectiveSize / 2,
             width: effectiveSize,
             height: effectiveSize,
             position: 'absolute',
             top: -effectiveRingThickness,
             left: -effectiveRingThickness,
+            ...borderStyles.from(tokens, theme),
           },
         };
       },
-      ['physicalSize', 'ring', 'physicalSize'],
+      ['physicalSize', 'ring', 'physicalSize', ...borderStyles.keys],
     ),
     glow: buildProps(
       (tokens: JSAvatarTokens, theme: Theme) => {
@@ -144,16 +148,16 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
             borderStyle: 'solid',
             borderColor: glowColor,
             borderWidth: effectiveRingThickness - innerGap,
-            borderRadius: effectiveSize / 2,
             width: effectiveSize,
             height: effectiveSize,
             position: 'absolute',
             top: -effectiveRingThickness,
             left: -effectiveRingThickness,
+            ...borderStyles.from(tokens, theme),
           },
         };
       },
-      ['physicalSize', 'ring'],
+      ['physicalSize', 'ring', ...borderStyles.keys],
     ),
   },
 };

package/src/JSAvatar.tsx

@@ -1,10 +1,22 @@
 /** @jsx withSlots */
 import { Image, View, Text } from 'react-native';
-import { JSAvatarProps, JSAvatarType, JSAvatarName } from './JSAvatar.types';
+import { JSAvatarProps, JSAvatarType, JSAvatarName, JSAvatarState } from './JSAvatar.types';
 import { stylingSettings } from './JSAvatar.styling';
 import { compose, UseSlots, mergeProps, withSlots } from '@fluentui-react-native/framework';
 import { useAvatar } from './useAvatar';
 
+/**
+ * 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 const avatarLookup = (layer: string, state: JSAvatarState, userProps: JSAvatarProps): boolean => {
+  return state[layer] || userProps[layer] || layer === userProps['shape'] || (!userProps['shape'] && layer === 'circular');
+};
+
 export const JSAvatar = compose<JSAvatarType>({
   displayName: JSAvatarName,
   ...stylingSettings,
@@ -18,12 +30,12 @@ export const JSAvatar = compose<JSAvatarType>({
     glow: View,
   },
   render: (userProps: JSAvatarProps, useSlots: UseSlots<JSAvatarType>) => {
-    const Avatar = useAvatar(userProps);
-    const Slots = useSlots(userProps, (layer) => Avatar.state[layer] || userProps[layer]);
+    const avatar = useAvatar(userProps);
+    const Slots = useSlots(userProps, (layer) => avatarLookup(layer, avatar.state, userProps));
 
     return (final: JSAvatarProps) => {
-      const { children, accessibilityLabel, ...mergedProps } = mergeProps(Avatar.props, final);
-      const { personaPhotoSource, iconSource, showRing, transparentRing } = Avatar.state;
+      const { children, accessibilityLabel, ...mergedProps } = mergeProps(avatar.props, final);
+      const { personaPhotoSource, iconSource, showRing, transparentRing } = avatar.state;
 
       return (
         <Slots.root {...mergedProps}>

package/src/JSAvatar.types.ts

@@ -1,11 +1,15 @@
 import type { IViewProps } from '@fluentui-react-native/adapters';
 import { ImageProps, ViewProps, ImageURISource, TextProps, ColorValue } from 'react-native';
-import { IBackgroundColorTokens, IForegroundColorTokens } from '@fluentui-react-native/tokens';
+import { IBackgroundColorTokens, IForegroundColorTokens, IBorderTokens } from '@fluentui-react-native/tokens';
 
 export const JSAvatarName = 'Avatar';
 
 export type AvatarSize = 'size8' | 'size24' | 'size32' | 'size40' | 'size48' | 'size56' | 'size72' | 'size100' | 'size120';
 
+export type AvatarShape = 'circular' | 'square';
+export type AvatarActive = 'active' | 'inactive' | 'unset';
+export type AvatarActiveAppearance = 'ring' | 'shadow' | 'glow' | 'ring-shadow' | 'ring-glow';
+
 /**
  * Sets color of the avatar when there is no picture. Uses fluent color names
  */
@@ -51,11 +55,14 @@ export interface AvatarConfigurableProps {
 }
 
 export interface JSAvatarProps extends IViewProps, AvatarConfigurableProps {
+  active?: AvatarActive;
+  activeAppearance?: AvatarActiveAppearance;
   imageUrl?: string;
   imageDescription?: string;
   initials?: string;
   presence?: AvatarPresence;
   isOutOfOffice?: boolean;
+  shape?: AvatarShape;
 }
 
 export interface AvatarSlotProps {
@@ -70,7 +77,7 @@ export interface AvatarSlotProps {
 
 export type IconAlignment = 'start' | 'center' | 'end';
 
-export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColorTokens, AvatarConfigurableProps {
+export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColorTokens, AvatarConfigurableProps, IBorderTokens {
   avatarSize?: number;
   iconSize?: number;
   iconStrokeWidth?: number;
@@ -79,6 +86,8 @@ export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColor
   horizontalIconAlignment?: IconAlignment;
   verticalIconAlignment?: IconAlignment;
   physicalSize?: number;
+  circular?: JSAvatarTokens;
+  square?: JSAvatarTokens;
 }
 
 export interface JSAvatarState {

package/src/JSAvatarTokens.ts

@@ -2,6 +2,7 @@ import { Theme } from '@fluentui-react-native/framework';
 import { TokenSettings } from '@fluentui-react-native/use-styling';
 import { JSAvatarTokens } from '.';
 import { convertCoinColorFluent } from './JSAvatar.helpers';
+import { globalTokens } from '@fluentui-react-native/theme-tokens';
 
 export const defaultJSAvatarTokens: TokenSettings<JSAvatarTokens, Theme> = () =>
   ({
@@ -10,4 +11,10 @@ export const defaultJSAvatarTokens: TokenSettings<JSAvatarTokens, Theme> = () =>
     color: 'white', // initials is always 'white', unless overriden by token
     iconStrokeColor: 'white', // icon stroke color is always 'white', unless overriden by token
     backgroundColor: convertCoinColorFluent('cornflower'),
+    circular: {
+      borderRadius: globalTokens.corner.radius.circle,
+    },
+    square: {
+      borderRadius: globalTokens.corner.radius.medium,
+    },
   } as JSAvatarTokens);

package/src/useAvatar.ts

@@ -9,7 +9,7 @@ import { getPresenceIconSource } from './JSAvatar.helpers';
  * @returns configured props and state for FURN Avatar
  */
 export const useAvatar = (props: JSAvatarProps): AvatarInfo => {
-  const { imageUrl, imageDescription, initials, presence, isOutOfOffice, ring, ...rest } = props;
+  const { imageUrl, imageDescription, initials, presence, isOutOfOffice, ring, shape, ...rest } = props;
 
   const personaPhotoSource =
     imageUrl === undefined
@@ -33,6 +33,7 @@ export const useAvatar = (props: JSAvatarProps): AvatarInfo => {
     props: {
       children: initials,
       accessibilityLabel: imageDescription,
+      shape: shape || 'circular',
       ...rest,
     },
     state: {