@fluentui/react-avatar 9.0.3 → 9.0.4

package/lib/components/AvatarGroupOverflow/AvatarGroupOverflow.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { useAvatarGroupOverflow_unstable } from './useAvatarGroupOverflow';
+import { renderAvatarGroupOverflow_unstable } from './renderAvatarGroupOverflow';
+import { useAvatarGroupOverflowStyles_unstable } from './useAvatarGroupOverflowStyles';
+/**
+ * AvatarGroupOverflow component - TODO: add more docs
+ */
+
+export const AvatarGroupOverflow = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useAvatarGroupOverflow_unstable(props, ref);
+  useAvatarGroupOverflowStyles_unstable(state);
+  return renderAvatarGroupOverflow_unstable(state);
+});
+AvatarGroupOverflow.displayName = 'AvatarGroupOverflow';
+//# sourceMappingURL=AvatarGroupOverflow.js.map

package/lib/components/AvatarGroupOverflow/AvatarGroupOverflow.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/AvatarGroupOverflow/AvatarGroupOverflow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,+BAAT,QAAgD,0BAAhD;AACA,SAAS,kCAAT,QAAmD,6BAAnD;AACA,SAAS,qCAAT,QAAsD,gCAAtD;AAIA;;AAEG;;AACH,OAAO,MAAM,mBAAmB,gBAAkD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChH,MAAM,KAAK,GAAG,+BAA+B,CAAC,KAAD,EAAQ,GAAR,CAA7C;EAEA,qCAAqC,CAAC,KAAD,CAArC;EACA,OAAO,kCAAkC,CAAC,KAAD,CAAzC;AACD,CALiF,CAA3E;AAOP,mBAAmB,CAAC,WAApB,GAAkC,qBAAlC","sourcesContent":["import * as React from 'react';\nimport { useAvatarGroupOverflow_unstable } from './useAvatarGroupOverflow';\nimport { renderAvatarGroupOverflow_unstable } from './renderAvatarGroupOverflow';\nimport { useAvatarGroupOverflowStyles_unstable } from './useAvatarGroupOverflowStyles';\nimport type { AvatarGroupOverflowProps } from './AvatarGroupOverflow.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * AvatarGroupOverflow component - TODO: add more docs\n */\nexport const AvatarGroupOverflow: ForwardRefComponent<AvatarGroupOverflowProps> = React.forwardRef((props, ref) => {\n  const state = useAvatarGroupOverflow_unstable(props, ref);\n\n  useAvatarGroupOverflowStyles_unstable(state);\n  return renderAvatarGroupOverflow_unstable(state);\n});\n\nAvatarGroupOverflow.displayName = 'AvatarGroupOverflow';\n"],"sourceRoot":"../src/"}

package/lib/components/AvatarGroupOverflow/AvatarGroupOverflow.types.js

@@ -0,0 +1,2 @@
+export {}; // & Required<Pick<AvatarGroupOverflowProps, 'propName'>>
+//# sourceMappingURL=AvatarGroupOverflow.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/AvatarGroupOverflow/AvatarGroupOverflow.types.ts"],"names":[],"mappings":"WAeA","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AvatarGroupOverflowSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * AvatarGroupOverflow Props\n */\nexport type AvatarGroupOverflowProps = ComponentProps<AvatarGroupOverflowSlots> & {};\n\n/**\n * State used in rendering AvatarGroupOverflow\n */\nexport type AvatarGroupOverflowState = ComponentState<AvatarGroupOverflowSlots>;\n// & Required<Pick<AvatarGroupOverflowProps, 'propName'>>\n"],"sourceRoot":"../src/"}

package/lib/components/AvatarGroupOverflow/index.js

@@ -0,0 +1,6 @@
+export * from './AvatarGroupOverflow';
+export * from './AvatarGroupOverflow.types';
+export * from './renderAvatarGroupOverflow';
+export * from './useAvatarGroupOverflow';
+export * from './useAvatarGroupOverflowStyles';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/AvatarGroupOverflow/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0BAA0B,CAAC;AACzC,cAAc,gCAAgC,CAAC","sourcesContent":["export * from './AvatarGroupOverflow';\nexport * from './AvatarGroupOverflow.types';\nexport * from './renderAvatarGroupOverflow';\nexport * from './useAvatarGroupOverflow';\nexport * from './useAvatarGroupOverflowStyles';\n"]}

package/lib/components/AvatarGroupOverflow/renderAvatarGroupOverflow.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of AvatarGroupOverflow
+ */
+
+export const renderAvatarGroupOverflow_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = getSlots(state); // TODO Add additional slots in the appropriate place
+
+  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  });
+};
+//# sourceMappingURL=renderAvatarGroupOverflow.js.map

package/lib/components/AvatarGroupOverflow/renderAvatarGroupOverflow.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/AvatarGroupOverflow/renderAvatarGroupOverflow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,kCAAkC,GAAI,KAAD,IAAoC;EACpF,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAA2B,KAA3B,CAArC,CADoF,CAGpF;;EACA,oBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAAP;AACD,CALM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { AvatarGroupOverflowState, AvatarGroupOverflowSlots } from './AvatarGroupOverflow.types';\n\n/**\n * Render the final JSX of AvatarGroupOverflow\n */\nexport const renderAvatarGroupOverflow_unstable = (state: AvatarGroupOverflowState) => {\n  const { slots, slotProps } = getSlots<AvatarGroupOverflowSlots>(state);\n\n  // TODO Add additional slots in the appropriate place\n  return <slots.root {...slotProps.root} />;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/AvatarGroupOverflow/useAvatarGroupOverflow.js

@@ -0,0 +1,27 @@
+import { getNativeElementProps } from '@fluentui/react-utilities';
+/**
+ * Create the state required to render AvatarGroupOverflow.
+ *
+ * The returned state can be modified with hooks such as useAvatarGroupOverflowStyles_unstable,
+ * before being passed to renderAvatarGroupOverflow_unstable.
+ *
+ * @param props - props from this instance of AvatarGroupOverflow
+ * @param ref - reference to root HTMLElement of AvatarGroupOverflow
+ */
+
+export const useAvatarGroupOverflow_unstable = (props, ref) => {
+  return {
+    // TODO add appropriate props/defaults
+    components: {
+      // TODO add each slot's element type or component
+      root: 'div'
+    },
+    // TODO add appropriate slots, for example:
+    // mySlot: resolveShorthand(props.mySlot),
+    root: getNativeElementProps('div', {
+      ref,
+      ...props
+    })
+  };
+};
+//# sourceMappingURL=useAvatarGroupOverflow.js.map

package/lib/components/AvatarGroupOverflow/useAvatarGroupOverflow.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/AvatarGroupOverflow/useAvatarGroupOverflow.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,+BAA+B,GAAG,CAC7C,KAD6C,EAE7C,GAF6C,KAGjB;EAC5B,OAAO;IACL;IACA,UAAU,EAAE;MACV;MACA,IAAI,EAAE;IAFI,CAFP;IAML;IACA;IACA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;MACjC,GADiC;MAEjC,GAAG;IAF8B,CAAR;EARtB,CAAP;AAaD,CAjBM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { AvatarGroupOverflowProps, AvatarGroupOverflowState } from './AvatarGroupOverflow.types';\n\n/**\n * Create the state required to render AvatarGroupOverflow.\n *\n * The returned state can be modified with hooks such as useAvatarGroupOverflowStyles_unstable,\n * before being passed to renderAvatarGroupOverflow_unstable.\n *\n * @param props - props from this instance of AvatarGroupOverflow\n * @param ref - reference to root HTMLElement of AvatarGroupOverflow\n */\nexport const useAvatarGroupOverflow_unstable = (\n  props: AvatarGroupOverflowProps,\n  ref: React.Ref<HTMLElement>,\n): AvatarGroupOverflowState => {\n  return {\n    // TODO add appropriate props/defaults\n    components: {\n      // TODO add each slot's element type or component\n      root: 'div',\n    },\n    // TODO add appropriate slots, for example:\n    // mySlot: resolveShorthand(props.mySlot),\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n    }),\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib/components/AvatarGroupOverflow/useAvatarGroupOverflowStyles.js

@@ -0,0 +1,27 @@
+import { __styles, mergeClasses } from '@griffel/react';
+export const avatarGroupOverflowClassName = 'fui-AvatarGroupOverflow';
+export const avatarGroupOverflowClassNames = {
+  root: 'fui-AvatarGroupOverflow' // TODO: add class names for all slots on AvatarGroupOverflowSlots.
+  // Should be of the form `<slotName>: 'fui-AvatarGroupOverflow__<slotName>`
+
+};
+/**
+ * Styles for the root slot
+ */
+
+const useStyles = /*#__PURE__*/__styles({
+  "root": {}
+}, {});
+/**
+ * Apply styling to the AvatarGroupOverflow slots based on the state
+ */
+
+
+export const useAvatarGroupOverflowStyles_unstable = state => {
+  const styles = useStyles();
+  state.root.className = mergeClasses(avatarGroupOverflowClassName, styles.root, state.root.className); // TODO Add class names to slots, for example:
+  // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
+
+  return state;
+};
+//# sourceMappingURL=useAvatarGroupOverflowStyles.js.map

package/lib/components/AvatarGroupOverflow/useAvatarGroupOverflowStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/AvatarGroupOverflow/useAvatarGroupOverflowStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AAIA,OAAO,MAAM,4BAA4B,GAAG,yBAArC;AACP,OAAO,MAAM,6BAA6B,GAA6C;EACrF,IAAI,EAAE,yBAD+E,CAErF;EACA;;AAHqF,CAAhF;AAMP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;AAAA,MAAlB;AAQA;;AAEG;;;AACH,OAAO,MAAM,qCAAqC,GAAI,KAAD,IAA8D;EACjH,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,4BAAD,EAA+B,MAAM,CAAC,IAAtC,EAA4C,KAAK,CAAC,IAAN,CAAW,SAAvD,CAAnC,CAFiH,CAIjH;EACA;;EAEA,OAAO,KAAP;AACD,CARM","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { AvatarGroupOverflowSlots, AvatarGroupOverflowState } from './AvatarGroupOverflow.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarGroupOverflowClassName = 'fui-AvatarGroupOverflow';\nexport const avatarGroupOverflowClassNames: SlotClassNames<AvatarGroupOverflowSlots> = {\n  root: 'fui-AvatarGroupOverflow',\n  // TODO: add class names for all slots on AvatarGroupOverflowSlots.\n  // Should be of the form `<slotName>: 'fui-AvatarGroupOverflow__<slotName>`\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    // TODO Add default styles for the root element\n  },\n\n  // TODO add additional classes for different states and/or slots\n});\n\n/**\n * Apply styling to the AvatarGroupOverflow slots based on the state\n */\nexport const useAvatarGroupOverflowStyles_unstable = (state: AvatarGroupOverflowState): AvatarGroupOverflowState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(avatarGroupOverflowClassName, styles.root, state.root.className);\n\n  // TODO Add class names to slots, for example:\n  // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/contexts/AvatarGroupContext.js

@@ -2,6 +2,7 @@ import { createContext } from '@fluentui/react-context-selector';
 /**
  * AvatarGroupContext is provided by AvatarGroup, and is consumed by Avatar to determine default values of some props.
  */
+// eslint-disable-next-line @fluentui/no-context-default-value
 
 export const AvatarGroupContext = /*#__PURE__*/createContext({});
 //# sourceMappingURL=AvatarGroupContext.js.map

package/lib/contexts/AvatarGroupContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["contexts/AvatarGroupContext.ts"],"names":[],"mappings":"AAAA,SAAS,aAAT,QAA8B,kCAA9B;AAIA;;AAEG;;AACH,OAAO,MAAM,kBAAkB,gBAAqC,aAAa,CAAC,EAAD,CAA1E","sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { AvatarGroupContextValue } from './AvatarGroupContext.types';\n\n/**\n * AvatarGroupContext is provided by AvatarGroup, and is consumed by Avatar to determine default values of some props.\n */\nexport const AvatarGroupContext: Context<AvatarGroupContextValue> = createContext({});\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["contexts/AvatarGroupContext.ts"],"names":[],"mappings":"AAAA,SAAS,aAAT,QAA8B,kCAA9B;AAIA;;AAEG;AACH;;AACA,OAAO,MAAM,kBAAkB,gBAAqC,aAAa,CAAC,EAAD,CAA1E","sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { AvatarGroupContextValue } from './AvatarGroupContext.types';\n\n/**\n * AvatarGroupContext is provided by AvatarGroup, and is consumed by Avatar to determine default values of some props.\n */\n// eslint-disable-next-line @fluentui/no-context-default-value\nexport const AvatarGroupContext: Context<AvatarGroupContextValue> = createContext({});\n"],"sourceRoot":"../src/"}

package/lib/index.js

@@ -2,4 +2,5 @@ export { Avatar, avatarClassNames, renderAvatar_unstable, useAvatarStyles_unstab
 export { getInitials } from './utils/index';
 export { AvatarGroup, avatarGroupClassNames, renderAvatarGroup_unstable, useAvatarGroupStyles_unstable, useAvatarGroup_unstable } from './AvatarGroup';
 export { AvatarGroupItem, avatarGroupItemClassNames, renderAvatarGroupItem_unstable, useAvatarGroupItemStyles_unstable, useAvatarGroupItem_unstable } from './AvatarGroupItem';
+export * from './AvatarGroupOverflow';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,MADF,EAEE,gBAFF,EAGE,qBAHF,EAIE,wBAJF,EAKE,kBALF,QAMO,UANP;AAQA,SAAS,WAAT,QAA4B,eAA5B;AACA,SACE,WADF,EAEE,qBAFF,EAGE,0BAHF,EAIE,6BAJF,EAKE,uBALF,QAMO,eANP;AAQA,SACE,eADF,EAEE,yBAFF,EAGE,8BAHF,EAIE,iCAJF,EAKE,2BALF,QAMO,mBANP","sourcesContent":["export {\n  Avatar,\n  avatarClassNames,\n  renderAvatar_unstable,\n  useAvatarStyles_unstable,\n  useAvatar_unstable,\n} from './Avatar';\nexport type { AvatarNamedColor, AvatarProps, AvatarSlots, AvatarState, AvatarSizes } from './Avatar';\nexport { getInitials } from './utils/index';\nexport {\n  AvatarGroup,\n  avatarGroupClassNames,\n  renderAvatarGroup_unstable,\n  useAvatarGroupStyles_unstable,\n  useAvatarGroup_unstable,\n} from './AvatarGroup';\nexport type { AvatarGroupProps, AvatarGroupSlots, AvatarGroupState } from './AvatarGroup';\nexport {\n  AvatarGroupItem,\n  avatarGroupItemClassNames,\n  renderAvatarGroupItem_unstable,\n  useAvatarGroupItemStyles_unstable,\n  useAvatarGroupItem_unstable,\n} from './AvatarGroupItem';\nexport type { AvatarGroupItemProps, AvatarGroupItemSlots, AvatarGroupItemState } from './AvatarGroupItem';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,MADF,EAEE,gBAFF,EAGE,qBAHF,EAIE,wBAJF,EAKE,kBALF,QAMO,UANP;AAQA,SAAS,WAAT,QAA4B,eAA5B;AACA,SACE,WADF,EAEE,qBAFF,EAGE,0BAHF,EAIE,6BAJF,EAKE,uBALF,QAMO,eANP;AAQA,SACE,eADF,EAEE,yBAFF,EAGE,8BAHF,EAIE,iCAJF,EAKE,2BALF,QAMO,mBANP;AAQA,cAAc,uBAAd","sourcesContent":["export {\n  Avatar,\n  avatarClassNames,\n  renderAvatar_unstable,\n  useAvatarStyles_unstable,\n  useAvatar_unstable,\n} from './Avatar';\nexport type { AvatarNamedColor, AvatarProps, AvatarSlots, AvatarState, AvatarSizes } from './Avatar';\nexport { getInitials } from './utils/index';\nexport {\n  AvatarGroup,\n  avatarGroupClassNames,\n  renderAvatarGroup_unstable,\n  useAvatarGroupStyles_unstable,\n  useAvatarGroup_unstable,\n} from './AvatarGroup';\nexport type { AvatarGroupProps, AvatarGroupSlots, AvatarGroupState } from './AvatarGroup';\nexport {\n  AvatarGroupItem,\n  avatarGroupItemClassNames,\n  renderAvatarGroupItem_unstable,\n  useAvatarGroupItemStyles_unstable,\n  useAvatarGroupItem_unstable,\n} from './AvatarGroupItem';\nexport type { AvatarGroupItemProps, AvatarGroupItemSlots, AvatarGroupItemState } from './AvatarGroupItem';\nexport * from './AvatarGroupOverflow';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/AvatarGroupOverflow.js

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

package/lib-commonjs/AvatarGroupOverflow.js.map

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

package/lib-commonjs/components/Avatar/useAvatarStyles.js

@@ -121,6 +121,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
     "Bmy1vo4": "fv0atk9",
     "B3o57yi": "f19s7mzo",
     "Cwk7ip": "f1iounmt",
+    "Hwfdqs": "f1onx1g3",
     "Ftih45": "f1wl9k8s",
     "Brfgrao": "f1j7ml58",
     "Bciustq": "ffi060y",
@@ -133,7 +134,9 @@ const useStyles = /*#__PURE__*/react_1.__styles({
     "ck0cow": ["f1xx2lx6", "f1gnrg9b"],
     "B8bqphf": "f1e9wvyh",
     "h7gv66": "f1vqt3t1",
-    "Bvy8d8o": "f1waqg4f"
+    "Bvy8d8o": "f1waqg4f",
+    "B1pumaf": "f1ak47q9",
+    "B17wnbm": "f1apa6og"
   },
   "ring": {
     "Bq4z7u6": "f1tikrig",
@@ -193,6 +196,8 @@ const useStyles = /*#__PURE__*/react_1.__styles({
     "Bmy1vo4": "fv0atk9",
     "B3o57yi": "f19s7mzo",
     "Cwk7ip": "ftf4am9",
+    "Hwfdqs": "f1onx1g3",
+    "Bwz0kr7": "f1o7dfsw",
     "qehafq": "fe3o830",
     "Bicfajf": ["fzynn9s", "f1z0ukd1"],
     "susq4k": "f1kyqvp9",
@@ -200,7 +205,9 @@ const useStyles = /*#__PURE__*/react_1.__styles({
     "vz82u": "f1dhznln",
     "B8bqphf": "f1e9wvyh",
     "h7gv66": "f1vqt3t1",
-    "Bvy8d8o": "f1q0dkoh"
+    "Bvy8d8o": "f1q0dkoh",
+    "B1pumaf": "f1ak47q9",
+    "B17wnbm": "f1apa6og"
   },
   "badge": {
     "qhf8xq": "f1euv43f",
@@ -277,7 +284,22 @@ const useStyles = /*#__PURE__*/react_1.__styles({
     "Be2twd7": "f18m8u13"
   }
 }, {
-  "d": [".f14t3ns0{display:inline-block;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f10pi13n{position:relative;}", ".fmrv4ls{vertical-align:middle;}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f1x0m3f5{font-size:var(--fontSizeBase600);}", ".f1g3puop{border-bottom-right-radius:var(--borderRadiusSmall);}", ".fi2rrw2{border-bottom-left-radius:var(--borderRadiusSmall);}", ".f1rstyi9{border-top-right-radius:var(--borderRadiusSmall);}", ".f1s4nn1u{border-top-left-radius:var(--borderRadiusSmall);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1ldthgs{border-bottom-right-radius:var(--borderRadiusLarge);}", ".frrelxk{border-bottom-left-radius:var(--borderRadiusLarge);}", ".fobrfso{border-top-right-radius:var(--borderRadiusLarge);}", ".ffisxpw{border-top-left-radius:var(--borderRadiusLarge);}", ".fnivh3a{border-bottom-right-radius:var(--borderRadiusXLarge);}", ".fc7yr5o{border-bottom-left-radius:var(--borderRadiusXLarge);}", ".f1el4m67{border-top-right-radius:var(--borderRadiusXLarge);}", ".f8yange{border-top-left-radius:var(--borderRadiusXLarge);}", ".ftfx35i{-webkit-transform:perspective(1px);-moz-transform:perspective(1px);-ms-transform:perspective(1px);transform:perspective(1px);}", ".fv0atk9{transition-property:transform,opacity;}", ".f19s7mzo{transition-duration:500ms,100ms;}", ".f1iounmt{transition-delay:cubic-bezier(0.80,0.00,0.20,1.00),linear;}", ".f1wl9k8s::before{content:\"\";}", ".f1j7ml58::before{position:absolute;}", ".ffi060y::before{top:0;}", ".f1fzr1x6::before{left:0;}", ".f1f351id::before{right:0;}", ".fchca7p::before{bottom:0;}", ".f1kd9phw::before{border-bottom-right-radius:inherit;}", ".fyf2ch2::before{border-bottom-left-radius:inherit;}", ".f1gnrg9b::before{border-top-right-radius:inherit;}", ".f1xx2lx6::before{border-top-left-radius:inherit;}", ".f1e9wvyh::before{transition-property:margin,opacity;}", ".f1vqt3t1::before{transition-duration:500ms,400ms;}", ".f1waqg4f::before{transition-delay:cubic-bezier(0.80,0.00,0.20,1.00),linear;}", ".f1tikrig::before{border-top-color:var(--colorBrandBackgroundStatic);}", ".f1v0fw5y::before{border-right-color:var(--colorBrandBackgroundStatic);}", ".f19vwj9b::before{border-left-color:var(--colorBrandBackgroundStatic);}", ".fpeaeip::before{border-bottom-color:var(--colorBrandBackgroundStatic);}", ".f163fonl::before{border-top-style:solid;}", ".f1yq6w5o::before{border-right-style:solid;}", ".f1jpmc5p::before{border-left-style:solid;}", ".f11yjt3y::before{border-bottom-style:solid;}", ".f1rbtjc9::before{margin-top:calc(-2 * var(--strokeWidthThick));}", ".f1wm0e7m::before{margin-right:calc(-2 * var(--strokeWidthThick));}", ".f1o0l8kp::before{margin-left:calc(-2 * var(--strokeWidthThick));}", ".f1tz5420::before{margin-bottom:calc(-2 * var(--strokeWidthThick));}", ".f1q30tuz::before{border-top-width:var(--strokeWidthThick);}", ".f9c0djs::before{border-right-width:var(--strokeWidthThick);}", ".fcwzx2y::before{border-left-width:var(--strokeWidthThick);}", ".f1hdqo1a::before{border-bottom-width:var(--strokeWidthThick);}", ".fk7ejgl::before{margin-top:calc(-2 * var(--strokeWidthThicker));}", ".f12sbt0w::before{margin-right:calc(-2 * var(--strokeWidthThicker));}", ".f1tnh028::before{margin-left:calc(-2 * var(--strokeWidthThicker));}", ".fcrsff4::before{margin-bottom:calc(-2 * var(--strokeWidthThicker));}", ".f1jrge4j::before{border-top-width:var(--strokeWidthThicker);}", ".fc2vpa6::before{border-right-width:var(--strokeWidthThicker);}", ".f133djwz::before{border-left-width:var(--strokeWidthThicker);}", ".f9hcsm3::before{border-bottom-width:var(--strokeWidthThicker);}", ".fl3e39p::before{margin-top:calc(-2 * var(--strokeWidthThickest));}", ".f14m8wrz::before{margin-right:calc(-2 * var(--strokeWidthThickest));}", ".fckzhtt::before{margin-left:calc(-2 * var(--strokeWidthThickest));}", ".fnxq6pw::before{margin-bottom:calc(-2 * var(--strokeWidthThickest));}", ".fr6r3yi::before{border-top-width:var(--strokeWidthThickest);}", ".ftxoq8w::before{border-right-width:var(--strokeWidthThickest);}", ".f4gs2h8::before{border-left-width:var(--strokeWidthThickest);}", ".f9gga8r::before{border-bottom-width:var(--strokeWidthThickest);}", ".f196qwgu::before{box-shadow:var(--shadow4);}", ".fut48mo::before{box-shadow:var(--shadow8);}", ".fh2kfig::before{box-shadow:var(--shadow16);}", ".f4c2u2p::before{box-shadow:var(--shadow28);}", ".fp25eh{opacity:0.8;}", ".f1clczzi{-webkit-transform:scale(0.875);-moz-transform:scale(0.875);-ms-transform:scale(0.875);transform:scale(0.875);}", ".ftf4am9{transition-delay:cubic-bezier(0.33,0.00,0.10,1.00),linear;}", ".fe3o830::before{margin-top:0;}", ".fzynn9s::before{margin-right:0;}", ".f1z0ukd1::before{margin-left:0;}", ".f1kyqvp9::before{margin-bottom:0;}", ".f1dhznln::before{opacity:0;}", ".f1q0dkoh::before{transition-delay:cubic-bezier(0.33,0.00,0.10,1.00),linear;}", ".f1euv43f{position:absolute;}", ".f1yab3r1{bottom:0;}", ".f1e31b4d{right:0;}", ".f1vgc2s3{left:0;}", ".ffo9j2l{box-shadow:0 0 0 var(--strokeWidthThin) var(--colorNeutralBackground1);}", ".f1nayfl2{box-shadow:0 0 0 var(--strokeWidthThick) var(--colorNeutralBackground1);}", ".f15twtuk{top:0;}", ".fly5x3f{width:100%;}", ".f1l02sjl{height:100%;}", ".f1d9uwra{border-bottom-right-radius:inherit;}", ".fzibvwi{border-bottom-left-radius:inherit;}", ".fuoumxm{border-top-right-radius:inherit;}", ".f1vtqnvc{border-top-left-radius:inherit;}", ".f1ps3kmd{object-fit:cover;}", ".f12kltsn{vertical-align:top;}", ".f1ewtqcl{box-sizing:border-box;}", ".fp6vxd{line-height:1;}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".fa4t5tb{vertical-align:center;}", ".f17mccla{text-align:center;}", ".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".f1ugzwwg{font-size:12px;}", ".f4ybsrx{font-size:16px;}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}", ".f24l1pt{font-size:28px;}", ".ffl51b{font-size:32px;}", ".f18m8u13{font-size:48px;}"]
+  "d": [".f14t3ns0{display:inline-block;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f10pi13n{position:relative;}", ".fmrv4ls{vertical-align:middle;}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f1x0m3f5{font-size:var(--fontSizeBase600);}", ".f1g3puop{border-bottom-right-radius:var(--borderRadiusSmall);}", ".fi2rrw2{border-bottom-left-radius:var(--borderRadiusSmall);}", ".f1rstyi9{border-top-right-radius:var(--borderRadiusSmall);}", ".f1s4nn1u{border-top-left-radius:var(--borderRadiusSmall);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1ldthgs{border-bottom-right-radius:var(--borderRadiusLarge);}", ".frrelxk{border-bottom-left-radius:var(--borderRadiusLarge);}", ".fobrfso{border-top-right-radius:var(--borderRadiusLarge);}", ".ffisxpw{border-top-left-radius:var(--borderRadiusLarge);}", ".fnivh3a{border-bottom-right-radius:var(--borderRadiusXLarge);}", ".fc7yr5o{border-bottom-left-radius:var(--borderRadiusXLarge);}", ".f1el4m67{border-top-right-radius:var(--borderRadiusXLarge);}", ".f8yange{border-top-left-radius:var(--borderRadiusXLarge);}", ".ftfx35i{-webkit-transform:perspective(1px);-moz-transform:perspective(1px);-ms-transform:perspective(1px);transform:perspective(1px);}", ".fv0atk9{transition-property:transform,opacity;}", ".f19s7mzo{transition-duration:500ms,100ms;}", ".f1iounmt{transition-delay:cubic-bezier(0.80,0.00,0.20,1.00),linear;}", ".f1wl9k8s::before{content:\"\";}", ".f1j7ml58::before{position:absolute;}", ".ffi060y::before{top:0;}", ".f1fzr1x6::before{left:0;}", ".f1f351id::before{right:0;}", ".fchca7p::before{bottom:0;}", ".f1kd9phw::before{border-bottom-right-radius:inherit;}", ".fyf2ch2::before{border-bottom-left-radius:inherit;}", ".f1gnrg9b::before{border-top-right-radius:inherit;}", ".f1xx2lx6::before{border-top-left-radius:inherit;}", ".f1e9wvyh::before{transition-property:margin,opacity;}", ".f1vqt3t1::before{transition-duration:500ms,400ms;}", ".f1waqg4f::before{transition-delay:cubic-bezier(0.80,0.00,0.20,1.00),linear;}", ".f1tikrig::before{border-top-color:var(--colorBrandBackgroundStatic);}", ".f1v0fw5y::before{border-right-color:var(--colorBrandBackgroundStatic);}", ".f19vwj9b::before{border-left-color:var(--colorBrandBackgroundStatic);}", ".fpeaeip::before{border-bottom-color:var(--colorBrandBackgroundStatic);}", ".f163fonl::before{border-top-style:solid;}", ".f1yq6w5o::before{border-right-style:solid;}", ".f1jpmc5p::before{border-left-style:solid;}", ".f11yjt3y::before{border-bottom-style:solid;}", ".f1rbtjc9::before{margin-top:calc(-2 * var(--strokeWidthThick));}", ".f1wm0e7m::before{margin-right:calc(-2 * var(--strokeWidthThick));}", ".f1o0l8kp::before{margin-left:calc(-2 * var(--strokeWidthThick));}", ".f1tz5420::before{margin-bottom:calc(-2 * var(--strokeWidthThick));}", ".f1q30tuz::before{border-top-width:var(--strokeWidthThick);}", ".f9c0djs::before{border-right-width:var(--strokeWidthThick);}", ".fcwzx2y::before{border-left-width:var(--strokeWidthThick);}", ".f1hdqo1a::before{border-bottom-width:var(--strokeWidthThick);}", ".fk7ejgl::before{margin-top:calc(-2 * var(--strokeWidthThicker));}", ".f12sbt0w::before{margin-right:calc(-2 * var(--strokeWidthThicker));}", ".f1tnh028::before{margin-left:calc(-2 * var(--strokeWidthThicker));}", ".fcrsff4::before{margin-bottom:calc(-2 * var(--strokeWidthThicker));}", ".f1jrge4j::before{border-top-width:var(--strokeWidthThicker);}", ".fc2vpa6::before{border-right-width:var(--strokeWidthThicker);}", ".f133djwz::before{border-left-width:var(--strokeWidthThicker);}", ".f9hcsm3::before{border-bottom-width:var(--strokeWidthThicker);}", ".fl3e39p::before{margin-top:calc(-2 * var(--strokeWidthThickest));}", ".f14m8wrz::before{margin-right:calc(-2 * var(--strokeWidthThickest));}", ".fckzhtt::before{margin-left:calc(-2 * var(--strokeWidthThickest));}", ".fnxq6pw::before{margin-bottom:calc(-2 * var(--strokeWidthThickest));}", ".fr6r3yi::before{border-top-width:var(--strokeWidthThickest);}", ".ftxoq8w::before{border-right-width:var(--strokeWidthThickest);}", ".f4gs2h8::before{border-left-width:var(--strokeWidthThickest);}", ".f9gga8r::before{border-bottom-width:var(--strokeWidthThickest);}", ".f196qwgu::before{box-shadow:var(--shadow4);}", ".fut48mo::before{box-shadow:var(--shadow8);}", ".fh2kfig::before{box-shadow:var(--shadow16);}", ".f4c2u2p::before{box-shadow:var(--shadow28);}", ".fp25eh{opacity:0.8;}", ".f1clczzi{-webkit-transform:scale(0.875);-moz-transform:scale(0.875);-ms-transform:scale(0.875);transform:scale(0.875);}", ".ftf4am9{transition-delay:cubic-bezier(0.33,0.00,0.10,1.00),linear;}", ".fe3o830::before{margin-top:0;}", ".fzynn9s::before{margin-right:0;}", ".f1z0ukd1::before{margin-left:0;}", ".f1kyqvp9::before{margin-bottom:0;}", ".f1dhznln::before{opacity:0;}", ".f1q0dkoh::before{transition-delay:cubic-bezier(0.33,0.00,0.10,1.00),linear;}", ".f1euv43f{position:absolute;}", ".f1yab3r1{bottom:0;}", ".f1e31b4d{right:0;}", ".f1vgc2s3{left:0;}", ".ffo9j2l{box-shadow:0 0 0 var(--strokeWidthThin) var(--colorNeutralBackground1);}", ".f1nayfl2{box-shadow:0 0 0 var(--strokeWidthThick) var(--colorNeutralBackground1);}", ".f15twtuk{top:0;}", ".fly5x3f{width:100%;}", ".f1l02sjl{height:100%;}", ".f1d9uwra{border-bottom-right-radius:inherit;}", ".fzibvwi{border-bottom-left-radius:inherit;}", ".fuoumxm{border-top-right-radius:inherit;}", ".f1vtqnvc{border-top-left-radius:inherit;}", ".f1ps3kmd{object-fit:cover;}", ".f12kltsn{vertical-align:top;}", ".f1ewtqcl{box-sizing:border-box;}", ".fp6vxd{line-height:1;}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".fa4t5tb{vertical-align:center;}", ".f17mccla{text-align:center;}", ".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".f1ugzwwg{font-size:12px;}", ".f4ybsrx{font-size:16px;}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}", ".f24l1pt{font-size:28px;}", ".ffl51b{font-size:32px;}", ".f18m8u13{font-size:48px;}"],
+  "m": [["@media screen and (prefers-reduced-motion: reduce){.f1onx1g3{transition-duration:0.01ms;}}", {
+    "m": "screen and (prefers-reduced-motion: reduce)"
+  }], ["@media screen and (prefers-reduced-motion: reduce){.f1ak47q9::before{transition-duration:0.01ms;}}", {
+    "m": "screen and (prefers-reduced-motion: reduce)"
+  }], ["@media screen and (prefers-reduced-motion: reduce){.f1apa6og::before{transition-delay:0.01ms;}}", {
+    "m": "screen and (prefers-reduced-motion: reduce)"
+  }], ["@media screen and (prefers-reduced-motion: reduce){.f1onx1g3{transition-duration:0.01ms;}}", {
+    "m": "screen and (prefers-reduced-motion: reduce)"
+  }], ["@media screen and (prefers-reduced-motion: reduce){.f1o7dfsw{transition-delay:0.01ms;}}", {
+    "m": "screen and (prefers-reduced-motion: reduce)"
+  }], ["@media screen and (prefers-reduced-motion: reduce){.f1ak47q9::before{transition-duration:0.01ms;}}", {
+    "m": "screen and (prefers-reduced-motion: reduce)"
+  }], ["@media screen and (prefers-reduced-motion: reduce){.f1apa6og::before{transition-delay:0.01ms;}}", {
+    "m": "screen and (prefers-reduced-motion: reduce)"
+  }]]
 });
 
 exports.useSizeStyles = /*#__PURE__*/react_1.__styles({

package/lib-commonjs/components/Avatar/useAvatarStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Avatar/useAvatarStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAIa,OAAA,CAAA,gBAAA,GAAgD;EAC3D,IAAI,EAAE,YADqD;EAE3D,KAAK,EAAE,mBAFoD;EAG3D,QAAQ,EAAE,sBAHiD;EAI3D,IAAI,EAAE,kBAJqD;EAK3D,KAAK,EAAE;AALoD,CAAhD,C,CAQb;AACA;AACA;;AAEA,MAAM,iBAAiB,GAAG;EACxB,UAAU,EAAE,MADY;EAExB,WAAW,EAAE,OAFW;EAGxB,WAAW,EAAE,OAHW;EAIxB,WAAW,EAAE,OAJW;EAKxB,WAAW,EAAE,OALW;EAMxB,WAAW,EAAE,OANW;EAOxB,WAAW,EAAE;AAPW,CAA1B;AAUA,MAAM,eAAe,GAAG;EACtB,SAAS,EAAE,iBAAiB,CAAC,UADP;EAEtB,MAAM,EAAE,iBAAiB,CAAC,WAFJ;EAGtB,IAAI,EAAE,iBAAiB,CAAC,WAHF;EAItB,MAAM,EAAE,iBAAiB,CAAC,WAJJ;EAKtB,IAAI,EAAE,iBAAiB,CAAC,WALF;EAMtB,MAAM,EAAE,iBAAiB,CAAC,WANJ;EAOtB,SAAS,EAAE,iBAAiB,CAAC;AAPP,CAAxB;AAUA,MAAM,cAAc,GAAG;EACrB,aAAa,EAAE,mCADM;EAErB,aAAa,EAAE,mCAFM;EAGrB,aAAa,EAAE,mCAHM;EAIrB,aAAa,EAAE,mCAJM;EAKrB,aAAa,EAAE,mCALM;EAMrB,aAAa,EAAE,mCANM;EAOrB,WAAW,EAAE,mCAPQ;EAQrB,QAAQ,EAAE,mCARW;EASrB,MAAM,EAAE;AATa,CAAvB;AAYA,MAAM,UAAU,GAAG;EACjB,gBAAgB,EAAE,cAAc,CAAC,aADhB;EAEjB,gBAAgB,EAAE,cAAc,CAAC,aAFhB;EAGjB,gBAAgB,EAAE,cAAc,CAAC,aAHhB;EAIjB,gBAAgB,EAAE,cAAc,CAAC,aAJhB;EAKjB,gBAAgB,EAAE,cAAc,CAAC,aALhB;EAMjB,gBAAgB,EAAE,cAAc,CAAC,aANhB;EAOjB,QAAQ,EAAE,cAAc,CAAC,WAPR;EAQjB,UAAU,EAAE,cAAc,CAAC,QARV;EASjB,UAAU,EAAE,cAAc,CAAC;AATV,CAAnB;;AAYA,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;;AAyJa,OAAA,CAAA,aAAA,gBAAgB,OAAA,SAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAhB;;AAiBb,MAAM,cAAc,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAvB;;AAmIO,MAAM,wBAAwB,GAAI,KAAD,IAAoC;EAC1E,MAAM;IAAE,IAAF;IAAQ,KAAR;IAAe,MAAf;IAAuB,gBAAvB;IAAyC;EAAzC,IAAmD,KAAzD;EAEA,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM,UAAU,GAAG,OAAA,CAAA,aAAA,EAAnB;EACA,MAAM,WAAW,GAAG,cAAc,EAAlC;EAEA,MAAM,WAAW,GAAG,CAAC,MAAM,CAAC,IAAR,EAAc,UAAU,CAAC,IAAD,CAAxB,EAAgC,WAAW,CAAC,KAAD,CAA3C,CAApB;;EAEA,IAAI,IAAI,IAAI,EAAZ,EAAgB;IACd,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,kBAAxB;EACD,CAFD,MAEO,IAAI,IAAI,IAAI,EAAZ,EAAgB;IACrB,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,kBAAxB;EACD,CAFM,MAEA,IAAI,IAAI,IAAI,EAAZ,EAAgB;IACrB,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,eAAxB;EACD,CAFM,MAEA,IAAI,IAAI,IAAI,EAAZ,EAAgB;IACrB,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,aAAxB;EACD,CAFM,MAEA,IAAI,IAAI,IAAI,EAAZ,EAAgB;IACrB,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,aAAxB;EACD,CAFM,MAEA;IACL,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,SAAxB;EACD;;EAED,IAAI,KAAK,KAAK,QAAd,EAAwB;IACtB,IAAI,IAAI,IAAI,EAAZ,EAAgB;MACd,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,WAAxB;IACD,CAFD,MAEO,IAAI,IAAI,IAAI,EAAZ,EAAgB;MACrB,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,YAAxB;IACD,CAFM,MAEA,IAAI,IAAI,IAAI,EAAZ,EAAgB;MACrB,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,WAAxB;IACD,CAFM,MAEA;MACL,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,YAAxB;IACD;EACF;;EAED,IAAI,MAAM,KAAK,QAAX,IAAuB,MAAM,KAAK,UAAtC,EAAkD;IAChD,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,gBAAxB;;IAEA,IAAI,gBAAgB,KAAK,MAArB,IAA+B,gBAAgB,KAAK,aAAxD,EAAuE;MACrE,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,IAAxB;;MAEA,IAAI,IAAI,IAAI,EAAZ,EAAgB;QACd,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,SAAxB;MACD,CAFD,MAEO,IAAI,IAAI,IAAI,EAAZ,EAAgB;QACrB,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,WAAxB;MACD,CAFM,MAEA;QACL,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,YAAxB;MACD;IACF;;IAED,IAAI,gBAAgB,KAAK,QAArB,IAAiC,gBAAgB,KAAK,aAA1D,EAAyE;MACvE,IAAI,IAAI,IAAI,EAAZ,EAAgB;QACd,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,OAAxB;MACD,CAFD,MAEO,IAAI,IAAI,IAAI,EAAZ,EAAgB;QACrB,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,OAAxB;MACD,CAFM,MAEA,IAAI,IAAI,IAAI,EAAZ,EAAgB;QACrB,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,QAAxB;MACD,CAFM,MAEA;QACL,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,QAAxB;MACD;IACF,CAzB+C,CA2BhD;;;IACA,IAAI,MAAM,KAAK,UAAf,EAA2B;MACzB,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,QAAxB;IACD;EACF;;EAED,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,gBAAA,CAAiB,IAA9B,EAAoC,GAAG,WAAvC,EAAoD,KAAK,CAAC,IAAN,CAAW,SAA/D,CAAvB;;EAEA,IAAI,KAAK,CAAC,KAAV,EAAiB;IACf,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,OAAA,CAAA,YAAA,CACtB,OAAA,CAAA,gBAAA,CAAiB,KADK,EAEtB,MAAM,CAAC,KAFe,EAGtB,IAAI,IAAI,EAAR,IAAc,MAAM,CAAC,UAHC,EAItB,KAAK,CAAC,KAAN,CAAY,SAJU,CAAxB;EAMD;;EAED,IAAI,KAAK,CAAC,KAAV,EAAiB;IACf,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,gBAAA,CAAiB,KAA9B,EAAqC,MAAM,CAAC,KAA5C,EAAmD,KAAK,CAAC,KAAN,CAAY,SAA/D,CAAxB;EACD;;EAED,IAAI,KAAK,CAAC,QAAV,EAAoB;IAClB,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,gBAAA,CAAiB,QAA9B,EAAwC,MAAM,CAAC,YAA/C,EAA6D,KAAK,CAAC,QAAN,CAAe,SAA5E,CAA3B;EACD;;EAED,IAAI,KAAK,CAAC,IAAV,EAAgB;IACd,IAAI,aAAJ;;IACA,IAAI,IAAI,IAAI,EAAZ,EAAgB;MACd,aAAa,GAAG,MAAM,CAAC,MAAvB;IACD,CAFD,MAEO,IAAI,IAAI,IAAI,EAAZ,EAAgB;MACrB,aAAa,GAAG,MAAM,CAAC,MAAvB;IACD,CAFM,MAEA,IAAI,IAAI,IAAI,EAAZ,EAAgB;MACrB,aAAa,GAAG,MAAM,CAAC,MAAvB;IACD,CAFM,MAEA,IAAI,IAAI,IAAI,EAAZ,EAAgB;MACrB,aAAa,GAAG,MAAM,CAAC,MAAvB;IACD,CAFM,MAEA,IAAI,IAAI,IAAI,EAAZ,EAAgB;MACrB,aAAa,GAAG,MAAM,CAAC,MAAvB;IACD,CAFM,MAEA,IAAI,IAAI,IAAI,EAAZ,EAAgB;MACrB,aAAa,GAAG,MAAM,CAAC,MAAvB;IACD,CAFM,MAEA;MACL,aAAa,GAAG,MAAM,CAAC,MAAvB;IACD;;IAED,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,gBAAA,CAAiB,IADI,EAErB,MAAM,CAAC,YAFc,EAGrB,aAHqB,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;EAMD;;EAED,OAAO,KAAP;AACD,CAlHM;;AAAM,OAAA,CAAA,wBAAA,GAAwB,wBAAxB","sourcesContent":["import { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { AvatarSlots, AvatarState } from './Avatar.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarClassNames: SlotClassNames<AvatarSlots> = {\n  root: 'fui-Avatar',\n  image: 'fui-Avatar__image',\n  initials: 'fui-Avatar__initials',\n  icon: 'fui-Avatar__icon',\n  badge: 'fui-Avatar__badge',\n};\n\n//\n// TODO: All animation constants should go to theme or globals?\n// https://github.com/microsoft/fluentui/issues/16372#issuecomment-778240665\n\nconst animationDuration = {\n  duration50: '50ms',\n  duration100: '100ms',\n  duration150: '150ms',\n  duration200: '200ms',\n  duration300: '300ms',\n  duration400: '400ms',\n  duration500: '500ms',\n};\n\nconst animationTiming = {\n  ultraFast: animationDuration.duration50,\n  faster: animationDuration.duration100,\n  fast: animationDuration.duration150,\n  normal: animationDuration.duration200,\n  slow: animationDuration.duration300,\n  slower: animationDuration.duration400,\n  ultraSlow: animationDuration.duration500,\n};\n\nconst animationLines = {\n  decelerateMax: 'cubic-bezier(0.00,0.00,0.00,1.00)',\n  decelerateMid: 'cubic-bezier(0.10,0.90,0.20,1.00)',\n  decelerateMin: 'cubic-bezier(0.33,0.00,0.10,1.00)',\n  accelerateMax: 'cubic-bezier(1.00,0.00,1.00,1.00)',\n  accelerateMid: 'cubic-bezier(0.90,0.10,1.00,0.20)',\n  accelerateMin: 'cubic-bezier(0.80,0.00,0.78,1.00)',\n  maxEasyEase: 'cubic-bezier(0.80,0.00,0.20,1.00)',\n  easyEase: 'cubic-bezier(0.33,0.00,0.67,1.00)',\n  linear: 'linear',\n};\n\nconst animations = {\n  fastOutSlowInMax: animationLines.decelerateMax,\n  fastOutSlowInMid: animationLines.decelerateMid,\n  fastOutSlowInMin: animationLines.decelerateMin,\n  slowOutFastInMax: animationLines.accelerateMax,\n  slowOutFastInMid: animationLines.accelerateMid,\n  slowOutFastInMin: animationLines.accelerateMin,\n  fastEase: animationLines.maxEasyEase,\n  normalEase: animationLines.easyEase,\n  nullEasing: animationLines.linear,\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'inline-block',\n    flexShrink: 0,\n    position: 'relative',\n    verticalAlign: 'middle',\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n    fontFamily: tokens.fontFamilyBase,\n    fontWeight: tokens.fontWeightSemibold,\n  },\n\n  textCaption2Strong: {\n    fontSize: tokens.fontSizeBase100,\n    fontWeight: tokens.fontWeightSemibold,\n  },\n  textCaption1Strong: { fontSize: tokens.fontSizeBase200 },\n  textBody1Strong: { fontSize: tokens.fontSizeBase300 },\n  textSubtitle2: { fontSize: tokens.fontSizeBase400 },\n  textSubtitle1: { fontSize: tokens.fontSizeBase500 },\n  textTitle: { fontSize: tokens.fontSizeBase600 },\n\n  squareSmall: {\n    ...shorthands.borderRadius(tokens.borderRadiusSmall),\n  },\n  squareMedium: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n  },\n  squareLarge: {\n    ...shorthands.borderRadius(tokens.borderRadiusLarge),\n  },\n  squareXLarge: {\n    ...shorthands.borderRadius(tokens.borderRadiusXLarge),\n  },\n\n  activeOrInactive: {\n    transform: 'perspective(1px)', // Work-around for text pixel snapping at the end of the animation\n    transitionProperty: 'transform, opacity',\n    transitionDuration: `${animationTiming.ultraSlow}, ${animationTiming.faster}`,\n    transitionDelay: `${animations.fastEase}, ${animations.nullEasing}`,\n\n    '::before': {\n      content: '\"\"',\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      bottom: 0,\n      right: 0,\n\n      ...shorthands.borderRadius('inherit'),\n      transitionProperty: 'margin, opacity',\n      transitionDuration: `${animationTiming.ultraSlow}, ${animationTiming.slower}`,\n      transitionDelay: `${animations.fastEase}, ${animations.nullEasing}`,\n    },\n  },\n\n  ring: {\n    '::before': {\n      ...shorthands.borderColor(tokens.colorBrandBackgroundStatic),\n      ...shorthands.borderStyle('solid'),\n    },\n  },\n  ringThick: {\n    '::before': {\n      ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThick})`),\n      ...shorthands.borderWidth(tokens.strokeWidthThick),\n    },\n  },\n  ringThicker: {\n    '::before': {\n      ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThicker})`),\n      ...shorthands.borderWidth(tokens.strokeWidthThicker),\n    },\n  },\n  ringThickest: {\n    '::before': {\n      ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThickest})`),\n      ...shorthands.borderWidth(tokens.strokeWidthThickest),\n    },\n  },\n\n  shadow4: { '::before': { boxShadow: tokens.shadow4 } },\n  shadow8: { '::before': { boxShadow: tokens.shadow8 } },\n  shadow16: { '::before': { boxShadow: tokens.shadow16 } },\n  shadow28: { '::before': { boxShadow: tokens.shadow28 } },\n\n  inactive: {\n    opacity: '0.8',\n    transform: 'scale(0.875)',\n\n    transitionProperty: 'transform, opacity',\n    transitionDuration: `${animationTiming.ultraSlow}, ${animationTiming.faster}`,\n    transitionDelay: `${animations.fastOutSlowInMin}, ${animations.nullEasing}`,\n\n    '::before': {\n      ...shorthands.margin(0),\n      opacity: 0,\n\n      transitionProperty: 'margin, opacity',\n      transitionDuration: `${animationTiming.ultraSlow}, ${animationTiming.slower}`,\n      transitionDelay: `${animations.fastOutSlowInMin}, ${animations.nullEasing}`,\n    },\n  },\n\n  badge: {\n    position: 'absolute',\n    bottom: 0,\n    right: 0,\n    boxShadow: `0 0 0 ${tokens.strokeWidthThin} ${tokens.colorNeutralBackground1}`,\n  },\n  badgeLarge: {\n    boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralBackground1}`,\n  },\n\n  image: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    width: '100%',\n    height: '100%',\n\n    ...shorthands.borderRadius('inherit'),\n    objectFit: 'cover',\n    verticalAlign: 'top',\n  },\n\n  iconInitials: {\n    position: 'absolute',\n    boxSizing: 'border-box',\n    top: 0,\n    left: 0,\n    width: '100%',\n    height: '100%',\n    lineHeight: '1',\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),\n\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    verticalAlign: 'center',\n    textAlign: 'center',\n    userSelect: 'none',\n    ...shorthands.borderRadius('inherit'),\n  },\n\n  icon12: { fontSize: '12px' },\n  icon16: { fontSize: '16px' },\n  icon20: { fontSize: '20px' },\n  icon24: { fontSize: '24px' },\n  icon28: { fontSize: '28px' },\n  icon32: { fontSize: '32px' },\n  icon48: { fontSize: '48px' },\n});\n\nexport const useSizeStyles = makeStyles({\n  16: { width: '16px', height: '16px' },\n  20: { width: '20px', height: '20px' },\n  24: { width: '24px', height: '24px' },\n  28: { width: '28px', height: '28px' },\n  32: { width: '32px', height: '32px' },\n  36: { width: '36px', height: '36px' },\n  40: { width: '40px', height: '40px' },\n  48: { width: '48px', height: '48px' },\n  56: { width: '56px', height: '56px' },\n  64: { width: '64px', height: '64px' },\n  72: { width: '72px', height: '72px' },\n  96: { width: '96px', height: '96px' },\n  120: { width: '120px', height: '120px' },\n  128: { width: '128px', height: '128px' },\n});\n\nconst useColorStyles = makeStyles({\n  neutral: {\n    color: tokens.colorNeutralForeground3,\n    backgroundColor: tokens.colorNeutralBackground6,\n  },\n  brand: {\n    color: tokens.colorNeutralForegroundInverted,\n    backgroundColor: tokens.colorBrandBackgroundStatic,\n  },\n  'dark-red': {\n    color: tokens.colorPaletteDarkRedForeground2,\n    backgroundColor: tokens.colorPaletteDarkRedBackground2,\n  },\n  cranberry: {\n    color: tokens.colorPaletteCranberryForeground2,\n    backgroundColor: tokens.colorPaletteCranberryBackground2,\n  },\n  red: {\n    color: tokens.colorPaletteRedForeground2,\n    backgroundColor: tokens.colorPaletteRedBackground2,\n  },\n  pumpkin: {\n    color: tokens.colorPalettePumpkinForeground2,\n    backgroundColor: tokens.colorPalettePumpkinBackground2,\n  },\n  peach: {\n    color: tokens.colorPalettePeachForeground2,\n    backgroundColor: tokens.colorPalettePeachBackground2,\n  },\n  marigold: {\n    color: tokens.colorPaletteMarigoldForeground2,\n    backgroundColor: tokens.colorPaletteMarigoldBackground2,\n  },\n  gold: {\n    color: tokens.colorPaletteGoldForeground2,\n    backgroundColor: tokens.colorPaletteGoldBackground2,\n  },\n  brass: {\n    color: tokens.colorPaletteBrassForeground2,\n    backgroundColor: tokens.colorPaletteBrassBackground2,\n  },\n  brown: {\n    color: tokens.colorPaletteBrownForeground2,\n    backgroundColor: tokens.colorPaletteBrownBackground2,\n  },\n  forest: {\n    color: tokens.colorPaletteForestForeground2,\n    backgroundColor: tokens.colorPaletteForestBackground2,\n  },\n  seafoam: {\n    color: tokens.colorPaletteSeafoamForeground2,\n    backgroundColor: tokens.colorPaletteSeafoamBackground2,\n  },\n  'dark-green': {\n    color: tokens.colorPaletteDarkGreenForeground2,\n    backgroundColor: tokens.colorPaletteDarkGreenBackground2,\n  },\n  'light-teal': {\n    color: tokens.colorPaletteLightTealForeground2,\n    backgroundColor: tokens.colorPaletteLightTealBackground2,\n  },\n  teal: {\n    color: tokens.colorPaletteTealForeground2,\n    backgroundColor: tokens.colorPaletteTealBackground2,\n  },\n  steel: {\n    color: tokens.colorPaletteSteelForeground2,\n    backgroundColor: tokens.colorPaletteSteelBackground2,\n  },\n  blue: {\n    color: tokens.colorPaletteBlueForeground2,\n    backgroundColor: tokens.colorPaletteBlueBackground2,\n  },\n  'royal-blue': {\n    color: tokens.colorPaletteRoyalBlueForeground2,\n    backgroundColor: tokens.colorPaletteRoyalBlueBackground2,\n  },\n  cornflower: {\n    color: tokens.colorPaletteCornflowerForeground2,\n    backgroundColor: tokens.colorPaletteCornflowerBackground2,\n  },\n  navy: {\n    color: tokens.colorPaletteNavyForeground2,\n    backgroundColor: tokens.colorPaletteNavyBackground2,\n  },\n  lavender: {\n    color: tokens.colorPaletteLavenderForeground2,\n    backgroundColor: tokens.colorPaletteLavenderBackground2,\n  },\n  purple: {\n    color: tokens.colorPalettePurpleForeground2,\n    backgroundColor: tokens.colorPalettePurpleBackground2,\n  },\n  grape: {\n    color: tokens.colorPaletteGrapeForeground2,\n    backgroundColor: tokens.colorPaletteGrapeBackground2,\n  },\n  lilac: {\n    color: tokens.colorPaletteLilacForeground2,\n    backgroundColor: tokens.colorPaletteLilacBackground2,\n  },\n  pink: {\n    color: tokens.colorPalettePinkForeground2,\n    backgroundColor: tokens.colorPalettePinkBackground2,\n  },\n  magenta: {\n    color: tokens.colorPaletteMagentaForeground2,\n    backgroundColor: tokens.colorPaletteMagentaBackground2,\n  },\n  plum: {\n    color: tokens.colorPalettePlumForeground2,\n    backgroundColor: tokens.colorPalettePlumBackground2,\n  },\n  beige: {\n    color: tokens.colorPaletteBeigeForeground2,\n    backgroundColor: tokens.colorPaletteBeigeBackground2,\n  },\n  mink: {\n    color: tokens.colorPaletteMinkForeground2,\n    backgroundColor: tokens.colorPaletteMinkBackground2,\n  },\n  platinum: {\n    color: tokens.colorPalettePlatinumForeground2,\n    backgroundColor: tokens.colorPalettePlatinumBackground2,\n  },\n  anchor: {\n    color: tokens.colorPaletteAnchorForeground2,\n    backgroundColor: tokens.colorPaletteAnchorBackground2,\n  },\n});\n\nexport const useAvatarStyles_unstable = (state: AvatarState): AvatarState => {\n  const { size, shape, active, activeAppearance, color } = state;\n\n  const styles = useStyles();\n  const sizeStyles = useSizeStyles();\n  const colorStyles = useColorStyles();\n\n  const rootClasses = [styles.root, sizeStyles[size], colorStyles[color]];\n\n  if (size <= 24) {\n    rootClasses.push(styles.textCaption2Strong);\n  } else if (size <= 28) {\n    rootClasses.push(styles.textCaption1Strong);\n  } else if (size <= 40) {\n    rootClasses.push(styles.textBody1Strong);\n  } else if (size <= 56) {\n    rootClasses.push(styles.textSubtitle2);\n  } else if (size <= 96) {\n    rootClasses.push(styles.textSubtitle1);\n  } else {\n    rootClasses.push(styles.textTitle);\n  }\n\n  if (shape === 'square') {\n    if (size <= 24) {\n      rootClasses.push(styles.squareSmall);\n    } else if (size <= 48) {\n      rootClasses.push(styles.squareMedium);\n    } else if (size <= 72) {\n      rootClasses.push(styles.squareLarge);\n    } else {\n      rootClasses.push(styles.squareXLarge);\n    }\n  }\n\n  if (active === 'active' || active === 'inactive') {\n    rootClasses.push(styles.activeOrInactive);\n\n    if (activeAppearance === 'ring' || activeAppearance === 'ring-shadow') {\n      rootClasses.push(styles.ring);\n\n      if (size <= 48) {\n        rootClasses.push(styles.ringThick);\n      } else if (size <= 64) {\n        rootClasses.push(styles.ringThicker);\n      } else {\n        rootClasses.push(styles.ringThickest);\n      }\n    }\n\n    if (activeAppearance === 'shadow' || activeAppearance === 'ring-shadow') {\n      if (size <= 28) {\n        rootClasses.push(styles.shadow4);\n      } else if (size <= 48) {\n        rootClasses.push(styles.shadow8);\n      } else if (size <= 64) {\n        rootClasses.push(styles.shadow16);\n      } else {\n        rootClasses.push(styles.shadow28);\n      }\n    }\n\n    // Note: The inactive style overrides some of the activeAppearance styles and must be applied after them\n    if (active === 'inactive') {\n      rootClasses.push(styles.inactive);\n    }\n  }\n\n  state.root.className = mergeClasses(avatarClassNames.root, ...rootClasses, state.root.className);\n\n  if (state.badge) {\n    state.badge.className = mergeClasses(\n      avatarClassNames.badge,\n      styles.badge,\n      size >= 64 && styles.badgeLarge,\n      state.badge.className,\n    );\n  }\n\n  if (state.image) {\n    state.image.className = mergeClasses(avatarClassNames.image, styles.image, state.image.className);\n  }\n\n  if (state.initials) {\n    state.initials.className = mergeClasses(avatarClassNames.initials, styles.iconInitials, state.initials.className);\n  }\n\n  if (state.icon) {\n    let iconSizeClass;\n    if (size <= 16) {\n      iconSizeClass = styles.icon12;\n    } else if (size <= 24) {\n      iconSizeClass = styles.icon16;\n    } else if (size <= 40) {\n      iconSizeClass = styles.icon20;\n    } else if (size <= 48) {\n      iconSizeClass = styles.icon24;\n    } else if (size <= 56) {\n      iconSizeClass = styles.icon28;\n    } else if (size <= 72) {\n      iconSizeClass = styles.icon32;\n    } else {\n      iconSizeClass = styles.icon48;\n    }\n\n    state.icon.className = mergeClasses(\n      avatarClassNames.icon,\n      styles.iconInitials,\n      iconSizeClass,\n      state.icon.className,\n    );\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Avatar/useAvatarStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { AvatarSlots, AvatarState } from './Avatar.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarClassNames: SlotClassNames<AvatarSlots> = {\n  root: 'fui-Avatar',\n  image: 'fui-Avatar__image',\n  initials: 'fui-Avatar__initials',\n  icon: 'fui-Avatar__icon',\n  badge: 'fui-Avatar__badge',\n};\n\n//\n// TODO: All animation constants should go to theme or globals?\n// https://github.com/microsoft/fluentui/issues/16372#issuecomment-778240665\n\nconst animationDuration = {\n  duration50: '50ms',\n  duration100: '100ms',\n  duration150: '150ms',\n  duration200: '200ms',\n  duration300: '300ms',\n  duration400: '400ms',\n  duration500: '500ms',\n};\n\nconst animationTiming = {\n  ultraFast: animationDuration.duration50,\n  faster: animationDuration.duration100,\n  fast: animationDuration.duration150,\n  normal: animationDuration.duration200,\n  slow: animationDuration.duration300,\n  slower: animationDuration.duration400,\n  ultraSlow: animationDuration.duration500,\n};\n\nconst animationLines = {\n  decelerateMax: 'cubic-bezier(0.00,0.00,0.00,1.00)',\n  decelerateMid: 'cubic-bezier(0.10,0.90,0.20,1.00)',\n  decelerateMin: 'cubic-bezier(0.33,0.00,0.10,1.00)',\n  accelerateMax: 'cubic-bezier(1.00,0.00,1.00,1.00)',\n  accelerateMid: 'cubic-bezier(0.90,0.10,1.00,0.20)',\n  accelerateMin: 'cubic-bezier(0.80,0.00,0.78,1.00)',\n  maxEasyEase: 'cubic-bezier(0.80,0.00,0.20,1.00)',\n  easyEase: 'cubic-bezier(0.33,0.00,0.67,1.00)',\n  linear: 'linear',\n};\n\nconst animations = {\n  fastOutSlowInMax: animationLines.decelerateMax,\n  fastOutSlowInMid: animationLines.decelerateMid,\n  fastOutSlowInMin: animationLines.decelerateMin,\n  slowOutFastInMax: animationLines.accelerateMax,\n  slowOutFastInMid: animationLines.accelerateMid,\n  slowOutFastInMin: animationLines.accelerateMin,\n  fastEase: animationLines.maxEasyEase,\n  normalEase: animationLines.easyEase,\n  nullEasing: animationLines.linear,\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'inline-block',\n    flexShrink: 0,\n    position: 'relative',\n    verticalAlign: 'middle',\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n    fontFamily: tokens.fontFamilyBase,\n    fontWeight: tokens.fontWeightSemibold,\n  },\n\n  textCaption2Strong: {\n    fontSize: tokens.fontSizeBase100,\n    fontWeight: tokens.fontWeightSemibold,\n  },\n  textCaption1Strong: { fontSize: tokens.fontSizeBase200 },\n  textBody1Strong: { fontSize: tokens.fontSizeBase300 },\n  textSubtitle2: { fontSize: tokens.fontSizeBase400 },\n  textSubtitle1: { fontSize: tokens.fontSizeBase500 },\n  textTitle: { fontSize: tokens.fontSizeBase600 },\n\n  squareSmall: {\n    ...shorthands.borderRadius(tokens.borderRadiusSmall),\n  },\n  squareMedium: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n  },\n  squareLarge: {\n    ...shorthands.borderRadius(tokens.borderRadiusLarge),\n  },\n  squareXLarge: {\n    ...shorthands.borderRadius(tokens.borderRadiusXLarge),\n  },\n\n  activeOrInactive: {\n    transform: 'perspective(1px)', // Work-around for text pixel snapping at the end of the animation\n    transitionProperty: 'transform, opacity',\n    transitionDuration: `${animationTiming.ultraSlow}, ${animationTiming.faster}`,\n    transitionDelay: `${animations.fastEase}, ${animations.nullEasing}`,\n\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      transitionDuration: '0.01ms',\n    },\n\n    '::before': {\n      content: '\"\"',\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      bottom: 0,\n      right: 0,\n\n      ...shorthands.borderRadius('inherit'),\n      transitionProperty: 'margin, opacity',\n      transitionDuration: `${animationTiming.ultraSlow}, ${animationTiming.slower}`,\n      transitionDelay: `${animations.fastEase}, ${animations.nullEasing}`,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n  },\n\n  ring: {\n    '::before': {\n      ...shorthands.borderColor(tokens.colorBrandBackgroundStatic),\n      ...shorthands.borderStyle('solid'),\n    },\n  },\n  ringThick: {\n    '::before': {\n      ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThick})`),\n      ...shorthands.borderWidth(tokens.strokeWidthThick),\n    },\n  },\n  ringThicker: {\n    '::before': {\n      ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThicker})`),\n      ...shorthands.borderWidth(tokens.strokeWidthThicker),\n    },\n  },\n  ringThickest: {\n    '::before': {\n      ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThickest})`),\n      ...shorthands.borderWidth(tokens.strokeWidthThickest),\n    },\n  },\n\n  shadow4: { '::before': { boxShadow: tokens.shadow4 } },\n  shadow8: { '::before': { boxShadow: tokens.shadow8 } },\n  shadow16: { '::before': { boxShadow: tokens.shadow16 } },\n  shadow28: { '::before': { boxShadow: tokens.shadow28 } },\n\n  inactive: {\n    opacity: '0.8',\n    transform: 'scale(0.875)',\n\n    transitionProperty: 'transform, opacity',\n    transitionDuration: `${animationTiming.ultraSlow}, ${animationTiming.faster}`,\n    transitionDelay: `${animations.fastOutSlowInMin}, ${animations.nullEasing}`,\n\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      transitionDuration: '0.01ms',\n      transitionDelay: '0.01ms',\n    },\n\n    '::before': {\n      ...shorthands.margin(0),\n      opacity: 0,\n\n      transitionProperty: 'margin, opacity',\n      transitionDuration: `${animationTiming.ultraSlow}, ${animationTiming.slower}`,\n      transitionDelay: `${animations.fastOutSlowInMin}, ${animations.nullEasing}`,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n  },\n\n  badge: {\n    position: 'absolute',\n    bottom: 0,\n    right: 0,\n    boxShadow: `0 0 0 ${tokens.strokeWidthThin} ${tokens.colorNeutralBackground1}`,\n  },\n  badgeLarge: {\n    boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralBackground1}`,\n  },\n\n  image: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    width: '100%',\n    height: '100%',\n\n    ...shorthands.borderRadius('inherit'),\n    objectFit: 'cover',\n    verticalAlign: 'top',\n  },\n\n  iconInitials: {\n    position: 'absolute',\n    boxSizing: 'border-box',\n    top: 0,\n    left: 0,\n    width: '100%',\n    height: '100%',\n    lineHeight: '1',\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),\n\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    verticalAlign: 'center',\n    textAlign: 'center',\n    userSelect: 'none',\n    ...shorthands.borderRadius('inherit'),\n  },\n\n  icon12: { fontSize: '12px' },\n  icon16: { fontSize: '16px' },\n  icon20: { fontSize: '20px' },\n  icon24: { fontSize: '24px' },\n  icon28: { fontSize: '28px' },\n  icon32: { fontSize: '32px' },\n  icon48: { fontSize: '48px' },\n});\n\nexport const useSizeStyles = makeStyles({\n  16: { width: '16px', height: '16px' },\n  20: { width: '20px', height: '20px' },\n  24: { width: '24px', height: '24px' },\n  28: { width: '28px', height: '28px' },\n  32: { width: '32px', height: '32px' },\n  36: { width: '36px', height: '36px' },\n  40: { width: '40px', height: '40px' },\n  48: { width: '48px', height: '48px' },\n  56: { width: '56px', height: '56px' },\n  64: { width: '64px', height: '64px' },\n  72: { width: '72px', height: '72px' },\n  96: { width: '96px', height: '96px' },\n  120: { width: '120px', height: '120px' },\n  128: { width: '128px', height: '128px' },\n});\n\nconst useColorStyles = makeStyles({\n  neutral: {\n    color: tokens.colorNeutralForeground3,\n    backgroundColor: tokens.colorNeutralBackground6,\n  },\n  brand: {\n    color: tokens.colorNeutralForegroundInverted,\n    backgroundColor: tokens.colorBrandBackgroundStatic,\n  },\n  'dark-red': {\n    color: tokens.colorPaletteDarkRedForeground2,\n    backgroundColor: tokens.colorPaletteDarkRedBackground2,\n  },\n  cranberry: {\n    color: tokens.colorPaletteCranberryForeground2,\n    backgroundColor: tokens.colorPaletteCranberryBackground2,\n  },\n  red: {\n    color: tokens.colorPaletteRedForeground2,\n    backgroundColor: tokens.colorPaletteRedBackground2,\n  },\n  pumpkin: {\n    color: tokens.colorPalettePumpkinForeground2,\n    backgroundColor: tokens.colorPalettePumpkinBackground2,\n  },\n  peach: {\n    color: tokens.colorPalettePeachForeground2,\n    backgroundColor: tokens.colorPalettePeachBackground2,\n  },\n  marigold: {\n    color: tokens.colorPaletteMarigoldForeground2,\n    backgroundColor: tokens.colorPaletteMarigoldBackground2,\n  },\n  gold: {\n    color: tokens.colorPaletteGoldForeground2,\n    backgroundColor: tokens.colorPaletteGoldBackground2,\n  },\n  brass: {\n    color: tokens.colorPaletteBrassForeground2,\n    backgroundColor: tokens.colorPaletteBrassBackground2,\n  },\n  brown: {\n    color: tokens.colorPaletteBrownForeground2,\n    backgroundColor: tokens.colorPaletteBrownBackground2,\n  },\n  forest: {\n    color: tokens.colorPaletteForestForeground2,\n    backgroundColor: tokens.colorPaletteForestBackground2,\n  },\n  seafoam: {\n    color: tokens.colorPaletteSeafoamForeground2,\n    backgroundColor: tokens.colorPaletteSeafoamBackground2,\n  },\n  'dark-green': {\n    color: tokens.colorPaletteDarkGreenForeground2,\n    backgroundColor: tokens.colorPaletteDarkGreenBackground2,\n  },\n  'light-teal': {\n    color: tokens.colorPaletteLightTealForeground2,\n    backgroundColor: tokens.colorPaletteLightTealBackground2,\n  },\n  teal: {\n    color: tokens.colorPaletteTealForeground2,\n    backgroundColor: tokens.colorPaletteTealBackground2,\n  },\n  steel: {\n    color: tokens.colorPaletteSteelForeground2,\n    backgroundColor: tokens.colorPaletteSteelBackground2,\n  },\n  blue: {\n    color: tokens.colorPaletteBlueForeground2,\n    backgroundColor: tokens.colorPaletteBlueBackground2,\n  },\n  'royal-blue': {\n    color: tokens.colorPaletteRoyalBlueForeground2,\n    backgroundColor: tokens.colorPaletteRoyalBlueBackground2,\n  },\n  cornflower: {\n    color: tokens.colorPaletteCornflowerForeground2,\n    backgroundColor: tokens.colorPaletteCornflowerBackground2,\n  },\n  navy: {\n    color: tokens.colorPaletteNavyForeground2,\n    backgroundColor: tokens.colorPaletteNavyBackground2,\n  },\n  lavender: {\n    color: tokens.colorPaletteLavenderForeground2,\n    backgroundColor: tokens.colorPaletteLavenderBackground2,\n  },\n  purple: {\n    color: tokens.colorPalettePurpleForeground2,\n    backgroundColor: tokens.colorPalettePurpleBackground2,\n  },\n  grape: {\n    color: tokens.colorPaletteGrapeForeground2,\n    backgroundColor: tokens.colorPaletteGrapeBackground2,\n  },\n  lilac: {\n    color: tokens.colorPaletteLilacForeground2,\n    backgroundColor: tokens.colorPaletteLilacBackground2,\n  },\n  pink: {\n    color: tokens.colorPalettePinkForeground2,\n    backgroundColor: tokens.colorPalettePinkBackground2,\n  },\n  magenta: {\n    color: tokens.colorPaletteMagentaForeground2,\n    backgroundColor: tokens.colorPaletteMagentaBackground2,\n  },\n  plum: {\n    color: tokens.colorPalettePlumForeground2,\n    backgroundColor: tokens.colorPalettePlumBackground2,\n  },\n  beige: {\n    color: tokens.colorPaletteBeigeForeground2,\n    backgroundColor: tokens.colorPaletteBeigeBackground2,\n  },\n  mink: {\n    color: tokens.colorPaletteMinkForeground2,\n    backgroundColor: tokens.colorPaletteMinkBackground2,\n  },\n  platinum: {\n    color: tokens.colorPalettePlatinumForeground2,\n    backgroundColor: tokens.colorPalettePlatinumBackground2,\n  },\n  anchor: {\n    color: tokens.colorPaletteAnchorForeground2,\n    backgroundColor: tokens.colorPaletteAnchorBackground2,\n  },\n});\n\nexport const useAvatarStyles_unstable = (state: AvatarState): AvatarState => {\n  const { size, shape, active, activeAppearance, color } = state;\n\n  const styles = useStyles();\n  const sizeStyles = useSizeStyles();\n  const colorStyles = useColorStyles();\n\n  const rootClasses = [styles.root, sizeStyles[size], colorStyles[color]];\n\n  if (size <= 24) {\n    rootClasses.push(styles.textCaption2Strong);\n  } else if (size <= 28) {\n    rootClasses.push(styles.textCaption1Strong);\n  } else if (size <= 40) {\n    rootClasses.push(styles.textBody1Strong);\n  } else if (size <= 56) {\n    rootClasses.push(styles.textSubtitle2);\n  } else if (size <= 96) {\n    rootClasses.push(styles.textSubtitle1);\n  } else {\n    rootClasses.push(styles.textTitle);\n  }\n\n  if (shape === 'square') {\n    if (size <= 24) {\n      rootClasses.push(styles.squareSmall);\n    } else if (size <= 48) {\n      rootClasses.push(styles.squareMedium);\n    } else if (size <= 72) {\n      rootClasses.push(styles.squareLarge);\n    } else {\n      rootClasses.push(styles.squareXLarge);\n    }\n  }\n\n  if (active === 'active' || active === 'inactive') {\n    rootClasses.push(styles.activeOrInactive);\n\n    if (activeAppearance === 'ring' || activeAppearance === 'ring-shadow') {\n      rootClasses.push(styles.ring);\n\n      if (size <= 48) {\n        rootClasses.push(styles.ringThick);\n      } else if (size <= 64) {\n        rootClasses.push(styles.ringThicker);\n      } else {\n        rootClasses.push(styles.ringThickest);\n      }\n    }\n\n    if (activeAppearance === 'shadow' || activeAppearance === 'ring-shadow') {\n      if (size <= 28) {\n        rootClasses.push(styles.shadow4);\n      } else if (size <= 48) {\n        rootClasses.push(styles.shadow8);\n      } else if (size <= 64) {\n        rootClasses.push(styles.shadow16);\n      } else {\n        rootClasses.push(styles.shadow28);\n      }\n    }\n\n    // Note: The inactive style overrides some of the activeAppearance styles and must be applied after them\n    if (active === 'inactive') {\n      rootClasses.push(styles.inactive);\n    }\n  }\n\n  state.root.className = mergeClasses(avatarClassNames.root, ...rootClasses, state.root.className);\n\n  if (state.badge) {\n    state.badge.className = mergeClasses(\n      avatarClassNames.badge,\n      styles.badge,\n      size >= 64 && styles.badgeLarge,\n      state.badge.className,\n    );\n  }\n\n  if (state.image) {\n    state.image.className = mergeClasses(avatarClassNames.image, styles.image, state.image.className);\n  }\n\n  if (state.initials) {\n    state.initials.className = mergeClasses(avatarClassNames.initials, styles.iconInitials, state.initials.className);\n  }\n\n  if (state.icon) {\n    let iconSizeClass;\n    if (size <= 16) {\n      iconSizeClass = styles.icon12;\n    } else if (size <= 24) {\n      iconSizeClass = styles.icon16;\n    } else if (size <= 40) {\n      iconSizeClass = styles.icon20;\n    } else if (size <= 48) {\n      iconSizeClass = styles.icon24;\n    } else if (size <= 56) {\n      iconSizeClass = styles.icon28;\n    } else if (size <= 72) {\n      iconSizeClass = styles.icon32;\n    } else {\n      iconSizeClass = styles.icon48;\n    }\n\n    state.icon.className = mergeClasses(\n      avatarClassNames.icon,\n      styles.iconInitials,\n      iconSizeClass,\n      state.icon.className,\n    );\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/AvatarGroup/useAvatarGroupStyles.js

@@ -95,28 +95,30 @@ const useOverflowButtonStyles = /*#__PURE__*/react_1.__styles({
   },
   "focusIndicator": {
     "Brovlpu": "ftqa4ok",
-    "Bnmjwt4": "flfsvnh",
-    "Jopkrh": ["f1781m5e", "flvaaa9"],
-    "hhrs2v": "f50u1b5",
-    "B7jbng7": ["flvaaa9", "f1781m5e"],
-    "Bh48x57": "foqs3zz",
-    "B32s92o": "fgeg2qa",
-    "B5hngm5": "fhcq1yo"
+    "B486eqv": "f2hkw1w",
+    "Bvjrn4i": "fvvvjju",
+    "Bfjx6ro": ["f1j42xvt", "ftiyk5j"],
+    "vkx7if": "f3za06g",
+    "Bhdpb9s": ["ftiyk5j", "f1j42xvt"],
+    "H7go31": "flnhq9f",
+    "ns4vmj": "f149st4k",
+    "me5axj": "f1tn340u"
   },
   "pieFocusIndicator": {
     "Brovlpu": "ftqa4ok",
-    "rkqiyj": "f1gx8lax",
-    "Bs3nqqt": ["f1as8ps8", "f17o1ya2"],
-    "B4mky7d": "f1amggu6",
-    "Bviepcv": ["f17o1ya2", "f1as8ps8"],
-    "Bc28wk5": "flnfwa4",
-    "w1edd7": ["fuav46a", "fcnogh1"],
-    "Ba8awiv": "f19zilzp",
-    "I50xcx": ["fcnogh1", "fuav46a"],
-    "Bnmjwt4": "f119w1j1",
-    "Jopkrh": ["f1wlf18u", "fcqg1ja"],
-    "hhrs2v": "ft77uen",
-    "B7jbng7": ["fcqg1ja", "f1wlf18u"]
+    "B486eqv": "f2hkw1w",
+    "B7vjy6w": "f16bl5ra",
+    "k9s1gq": ["fdi6dq0", "f1tjf6rm"],
+    "hhz4md": "fexdhnp",
+    "B282cnq": ["f1tjf6rm", "fdi6dq0"],
+    "Bhrp7kx": "frdu0z4",
+    "jt52do": ["ftyr16m", "f6wv3wq"],
+    "qyg4kl": "fmjz5p8",
+    "aw8gdl": ["f6wv3wq", "ftyr16m"],
+    "Bvjrn4i": "ftvba00",
+    "Bfjx6ro": ["fqg29le", "f1io5jdi"],
+    "vkx7if": "fak3yh7",
+    "Bhdpb9s": ["f1io5jdi", "fqg29le"]
   },
   "states": {
     "Bi91k9c": "feu1g3u",
@@ -222,7 +224,7 @@ const useOverflowButtonStyles = /*#__PURE__*/react_1.__styles({
     "ibv6hh": ["f1g0iy8l", "figl7jc"]
   }
 }, {
-  "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", "[data-keyboard-nav] .flfsvnh:focus{border-top-color:transparent;}", "[data-keyboard-nav] .f1781m5e:focus{border-right-color:transparent;}", "[data-keyboard-nav] .flvaaa9:focus{border-left-color:transparent;}", "[data-keyboard-nav] .f50u1b5:focus{border-bottom-color:transparent;}", "[data-keyboard-nav] .foqs3zz:focus{outline-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fgeg2qa:focus{outline-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .fhcq1yo:focus{outline-style:solid;}", "[data-keyboard-nav] .f1gx8lax:focus{border-top-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .f1as8ps8:focus{border-right-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .f17o1ya2:focus{border-left-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .f1amggu6:focus{border-bottom-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .flnfwa4:focus{border-top-style:solid;}", "[data-keyboard-nav] .fuav46a:focus{border-right-style:solid;}", "[data-keyboard-nav] .fcnogh1:focus{border-left-style:solid;}", "[data-keyboard-nav] .f19zilzp:focus{border-bottom-style:solid;}", "[data-keyboard-nav] .f119w1j1:focus{border-top-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1wlf18u:focus{border-right-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fcqg1ja:focus{border-left-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .ft77uen:focus{border-bottom-color:var(--colorStrokeFocus2);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f44pa96{color:transparent;}", ".f1ugzwwg{font-size:12px;}", ".f4ybsrx{font-size:16px;}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}", ".f24l1pt{font-size:28px;}", ".ffl51b{font-size:32px;}", ".f18m8u13{font-size:48px;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fcpl73t{line-height:var(--lineHeightBase100);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f106mvju{line-height:var(--lineHeightBase500);}", ".f1x0m3f5{font-size:var(--fontSizeBase600);}", ".fb86gi6{line-height:var(--lineHeightBase600);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".f18zi460{border-top-width:var(--strokeWidthThick);}", ".f1wpluaz{border-right-width:var(--strokeWidthThick);}", ".fsfsuhs{border-left-width:var(--strokeWidthThick);}", ".fmklw6v{border-bottom-width:var(--strokeWidthThick);}", ".fgx37oo{border-top-width:var(--strokeWidthThicker);}", ".f130t4y6{border-right-width:var(--strokeWidthThicker);}", ".f1efpmoh{border-left-width:var(--strokeWidthThicker);}", ".fv51ejd{border-bottom-width:var(--strokeWidthThicker);}", ".fwn6jck{border-top-width:var(--strokeWidthThickest);}", ".figl7jc{border-right-width:var(--strokeWidthThickest);}", ".f1g0iy8l{border-left-width:var(--strokeWidthThickest);}", ".f1b8shu7{border-bottom-width:var(--strokeWidthThickest);}"],
+  "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".fui-FluentProvider .fvvvjju.fui-focus-visible{border-top-color:transparent;}", ".fui-FluentProvider .f1j42xvt.fui-focus-visible{border-right-color:transparent;}", ".fui-FluentProvider .ftiyk5j.fui-focus-visible{border-left-color:transparent;}", ".fui-FluentProvider .f3za06g.fui-focus-visible{border-bottom-color:transparent;}", ".fui-FluentProvider .flnhq9f.fui-focus-visible{outline-color:var(--colorStrokeFocus2);}", ".fui-FluentProvider .f149st4k.fui-focus-visible{outline-width:var(--strokeWidthThick);}", ".fui-FluentProvider .f1tn340u.fui-focus-visible{outline-style:solid;}", ".fui-FluentProvider .f16bl5ra.fui-focus-visible{border-top-width:var(--strokeWidthThick);}", ".fui-FluentProvider .fdi6dq0.fui-focus-visible{border-right-width:var(--strokeWidthThick);}", ".fui-FluentProvider .f1tjf6rm.fui-focus-visible{border-left-width:var(--strokeWidthThick);}", ".fui-FluentProvider .fexdhnp.fui-focus-visible{border-bottom-width:var(--strokeWidthThick);}", ".fui-FluentProvider .frdu0z4.fui-focus-visible{border-top-style:solid;}", ".fui-FluentProvider .ftyr16m.fui-focus-visible{border-right-style:solid;}", ".fui-FluentProvider .f6wv3wq.fui-focus-visible{border-left-style:solid;}", ".fui-FluentProvider .fmjz5p8.fui-focus-visible{border-bottom-style:solid;}", ".fui-FluentProvider .ftvba00.fui-focus-visible{border-top-color:var(--colorStrokeFocus2);}", ".fui-FluentProvider .fqg29le.fui-focus-visible{border-right-color:var(--colorStrokeFocus2);}", ".fui-FluentProvider .f1io5jdi.fui-focus-visible{border-left-color:var(--colorStrokeFocus2);}", ".fui-FluentProvider .fak3yh7.fui-focus-visible{border-bottom-color:var(--colorStrokeFocus2);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f44pa96{color:transparent;}", ".f1ugzwwg{font-size:12px;}", ".f4ybsrx{font-size:16px;}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}", ".f24l1pt{font-size:28px;}", ".ffl51b{font-size:32px;}", ".f18m8u13{font-size:48px;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fcpl73t{line-height:var(--lineHeightBase100);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f106mvju{line-height:var(--lineHeightBase500);}", ".f1x0m3f5{font-size:var(--fontSizeBase600);}", ".fb86gi6{line-height:var(--lineHeightBase600);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".f18zi460{border-top-width:var(--strokeWidthThick);}", ".f1wpluaz{border-right-width:var(--strokeWidthThick);}", ".fsfsuhs{border-left-width:var(--strokeWidthThick);}", ".fmklw6v{border-bottom-width:var(--strokeWidthThick);}", ".fgx37oo{border-top-width:var(--strokeWidthThicker);}", ".f130t4y6{border-right-width:var(--strokeWidthThicker);}", ".f1efpmoh{border-left-width:var(--strokeWidthThicker);}", ".fv51ejd{border-bottom-width:var(--strokeWidthThicker);}", ".fwn6jck{border-top-width:var(--strokeWidthThickest);}", ".figl7jc{border-right-width:var(--strokeWidthThickest);}", ".f1g0iy8l{border-left-width:var(--strokeWidthThickest);}", ".f1b8shu7{border-bottom-width:var(--strokeWidthThickest);}"],
   "m": [["@media (forced-colors: active){.fw33nwi{border-top-color:CanvasText;}}", {
     "m": "(forced-colors: active)"
   }], ["@media (forced-colors: active){.f1ptkjjm{border-right-color:CanvasText;}.fmzzjfk{border-left-color:CanvasText;}}", {
@@ -233,6 +235,7 @@ const useOverflowButtonStyles = /*#__PURE__*/react_1.__styles({
     "m": "(forced-colors: active)"
   }]],
   "f": [".ftqa4ok:focus{outline-style:none;}"],
+  "i": [".f2hkw1w:focus-visible{outline-style:none;}"],
   "h": [".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1xlaoq0:hover{border-bottom-color:var(--colorNeutralStroke1Hover);}"],
   "a": [".f1g4hkjv:active{color:var(--colorNeutralForeground1Pressed);}", ".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}", ".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fumykes:active{border-bottom-color:var(--colorNeutralStroke1Pressed);}"]
 });

package/lib-commonjs/components/AvatarGroup/useAvatarGroupStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/AvatarGroup/useAvatarGroupStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAGA,MAAA,iBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAEa,OAAA,CAAA,qBAAA,GAA0D;EACrE,IAAI,EAAE,iBAD+D;EAErE,eAAe,EAAE,kCAFoD;EAGrE,cAAc,EAAE,iCAHqD;EAIrE,eAAe,EAAE;AAJoD,CAA1D;AAOb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;AAAA,EAAlB;AAwBA;;AAEG;;;AACH,MAAM,uBAAuB,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;EAAA;EAAA;EAAA;AAAA,EAAhC;AAuEA;;AAEG;;;AACI,MAAM,6BAA6B,GAAI,KAAD,IAA8C;EACzF,MAAM;IAAE,MAAF;IAAU,iBAAV;IAA6B;EAA7B,IAAsC,KAA5C;EACA,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM,UAAU,GAAG,iBAAA,CAAA,aAAA,EAAnB;EACA,MAAM,oBAAoB,GAAG,uBAAuB,EAApD;EAEA,MAAM,mBAAmB,GAAG,iBAAA,CAAA,sBAAA,CAAuB,MAAvB,EAA+B,IAA/B,EAAqC,IAArC,CAA5B;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,qBAAA,CAAsB,IADD,EAErB,MAAM,CAAC,IAFc,EAGrB,MAAM,KAAK,KAAX,IAAoB,MAAM,CAAC,GAHN,EAIrB,MAAM,KAAK,KAAX,IAAoB,UAAU,CAAC,IAAD,CAJT,EAKrB,KAAK,CAAC,IAAN,CAAW,SALU,CAAvB;;EAQA,IAAI,KAAK,CAAC,eAAV,EAA2B;IACzB,KAAK,CAAC,eAAN,CAAsB,SAAtB,GAAkC,OAAA,CAAA,YAAA,CAChC,OAAA,CAAA,qBAAA,CAAsB,eADU,EAEhC,MAAM,CAAC,eAFyB,EAGhC,KAAK,CAAC,eAAN,CAAsB,SAHU,CAAlC;EAKD;;EAED,IAAI,KAAK,CAAC,eAAV,EAA2B;IACzB,KAAK,CAAC,eAAN,CAAsB,SAAtB,GAAkC,OAAA,CAAA,YAAA,CAChC,OAAA,CAAA,qBAAA,CAAsB,eADU,EAEhC,MAAM,CAAC,eAFyB,EAGhC,KAAK,CAAC,eAAN,CAAsB,SAHU,CAAlC;EAKD;;EAED,MAAM,qBAAqB,GAAG,EAA9B;;EAEA,IAAI,IAAI,GAAG,EAAX,EAAe;IACb,qBAAqB,CAAC,IAAtB,CAA2B,oBAAoB,CAAC,UAAhD;EACD,CAFD,MAEO,IAAI,IAAI,GAAG,EAAX,EAAe;IACpB,qBAAqB,CAAC,IAAtB,CAA2B,oBAAoB,CAAC,WAAhD;EACD,CAFM,MAEA,IAAI,IAAI,GAAG,EAAX,EAAe;IACpB,qBAAqB,CAAC,IAAtB,CAA2B,oBAAoB,CAAC,aAAhD;EACD,CAFM,MAEA;IACL,qBAAqB,CAAC,IAAtB,CAA2B,oBAAoB,CAAC,cAAhD;EACD;;EAED,IAAI,iBAAiB,KAAK,OAA1B,EAAmC;IACjC,IAAI,IAAI,IAAI,EAAZ,EAAgB;MACd,qBAAqB,CAAC,IAAtB,CAA2B,oBAAoB,CAAC,cAAhD;IACD,CAFD,MAEO,IAAI,IAAI,IAAI,EAAZ,EAAgB;MACrB,qBAAqB,CAAC,IAAtB,CAA2B,oBAAoB,CAAC,cAAhD;IACD,CAFM,MAEA,IAAI,IAAI,IAAI,EAAZ,EAAgB;MACrB,qBAAqB,CAAC,IAAtB,CAA2B,oBAAoB,CAAC,WAAhD;IACD,CAFM,MAEA,IAAI,IAAI,IAAI,EAAZ,EAAgB;MACrB,qBAAqB,CAAC,IAAtB,CAA2B,oBAAoB,CAAC,SAAhD;IACD,CAFM,MAEA,IAAI,IAAI,IAAI,EAAZ,EAAgB;MACrB,qBAAqB,CAAC,IAAtB,CAA2B,oBAAoB,CAAC,SAAhD;IACD,CAFM,MAEA;MACL,qBAAqB,CAAC,IAAtB,CAA2B,oBAAoB,CAAC,MAAhD;IACD;EACF,CAdD,MAcO;IACL,IAAI,IAAI,IAAI,EAAZ,EAAgB;MACd,qBAAqB,CAAC,IAAtB,CAA2B,oBAAoB,CAAC,MAAhD;IACD,CAFD,MAEO,IAAI,IAAI,IAAI,EAAZ,EAAgB;MACrB,qBAAqB,CAAC,IAAtB,CAA2B,oBAAoB,CAAC,MAAhD;IACD,CAFM,MAEA,IAAI,IAAI,IAAI,EAAZ,EAAgB;MACrB,qBAAqB,CAAC,IAAtB,CAA2B,oBAAoB,CAAC,MAAhD;IACD,CAFM,MAEA,IAAI,IAAI,IAAI,EAAZ,EAAgB;MACrB,qBAAqB,CAAC,IAAtB,CAA2B,oBAAoB,CAAC,MAAhD;IACD,CAFM,MAEA,IAAI,IAAI,IAAI,EAAZ,EAAgB;MACrB,qBAAqB,CAAC,IAAtB,CAA2B,oBAAoB,CAAC,MAAhD;IACD,CAFM,MAEA,IAAI,IAAI,IAAI,EAAZ,EAAgB;MACrB,qBAAqB,CAAC,IAAtB,CAA2B,oBAAoB,CAAC,MAAhD;IACD,CAFM,MAEA;MACL,qBAAqB,CAAC,IAAtB,CAA2B,oBAAoB,CAAC,MAAhD;IACD;EACF;;EAED,IAAI,KAAK,CAAC,cAAV,EAA0B;IACxB,KAAK,CAAC,cAAN,CAAqB,SAArB,GAAiC,OAAA,CAAA,YAAA,CAC/B,OAAA,CAAA,qBAAA,CAAsB,cADS,EAE/B,UAAU,CAAC,IAAD,CAFqB,EAG/B,oBAAoB,CAAC,IAHU,EAI/B,GAAG,qBAJ4B,EAK/B,MAAM,KAAK,KAAX,IAAoB,oBAAoB,CAAC,MALV,EAM/B,MAAM,KAAK,KAAX,IAAoB,oBAAoB,CAAC,cANV,EAO/B,MAAM,KAAK,KAAX,IAAoB,oBAAoB,CAAC,iBAPV,EAQ/B,MAAM,KAAK,KAAX,IAAoB,oBAAoB,CAAC,GARV,EAS/B,mBAT+B,EAU/B,KAAK,CAAC,cAAN,CAAqB,SAVU,CAAjC;EAYD;;EAED,OAAO,KAAP;AACD,CA5FM;;AAAM,OAAA,CAAA,6BAAA,GAA6B,6BAA7B","sourcesContent":["import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../Avatar/useAvatarStyles';\nimport type { AvatarGroupSlots, AvatarGroupState } from './AvatarGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useGroupChildClassName } from '../../AvatarGroupItem';\n\nexport const avatarGroupClassNames: SlotClassNames<AvatarGroupSlots> = {\n  root: 'fui-AvatarGroup',\n  overflowContent: 'fui-AvatarGroup__overflowContent',\n  overflowButton: 'fui-AvatarGroup__overflowButton',\n  overflowSurface: 'fui-AvatarGroup__overflowSurface',\n};\n\n/**\n * Styles for the root slot.\n */\nconst useStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    position: 'relative',\n  },\n  pie: {\n    clipPath: 'circle(50%)',\n    backgroundColor: tokens.colorTransparentStroke,\n    '@media (forced-colors: active)': {\n      backgroundColor: 'CanvasText',\n    },\n  },\n  overflowSurface: {\n    ...shorthands.padding(0),\n  },\n  overflowContent: {\n    maxHeight: '220px',\n    minHeight: '80px',\n    ...shorthands.overflow('hidden', 'scroll'),\n    ...shorthands.padding(tokens.spacingHorizontalS),\n    width: '220px',\n  },\n});\n\n/**\n * Styles for overflow button slot.\n */\nconst useOverflowButtonStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    position: 'relative',\n    flexShrink: 0,\n    justifyContent: 'center',\n    alignItems: 'center',\n    color: tokens.colorNeutralForeground1,\n    backgroundColor: tokens.colorNeutralBackground1,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n    ...shorthands.borderStyle('solid'),\n    ...shorthands.padding(0),\n\n    // match color to Avatar's outline color\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('CanvasText'),\n    },\n  },\n\n  // These styles match the default button styles\n  focusIndicator: createCustomFocusIndicatorStyle({\n    ...shorthands.borderColor('transparent'),\n    outlineColor: tokens.colorStrokeFocus2,\n    outlineWidth: tokens.strokeWidthThick,\n    outlineStyle: 'solid',\n  }),\n\n  // This custom focus indicator is required for the pie layout due to the clip-path applied to the root\n  pieFocusIndicator: createCustomFocusIndicatorStyle({\n    ...shorthands.border(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),\n  }),\n\n  states: {\n    ':hover': {\n      color: tokens.colorNeutralForeground1Hover,\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n    },\n    ':active': {\n      color: tokens.colorNeutralForeground1Pressed,\n      backgroundColor: tokens.colorNeutralBackground1Pressed,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n    },\n  },\n\n  pie: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\n    color: 'transparent',\n  },\n\n  icon12: { fontSize: '12px' },\n  icon16: { fontSize: '16px' },\n  icon20: { fontSize: '20px' },\n  icon24: { fontSize: '24px' },\n  icon28: { fontSize: '28px' },\n  icon32: { fontSize: '32px' },\n  icon48: { fontSize: '48px' },\n  caption2Strong: { ...typographyStyles.caption2Strong },\n  caption1Strong: { ...typographyStyles.caption1Strong },\n  body1Strong: { ...typographyStyles.body1Strong },\n  subtitle2: { ...typographyStyles.subtitle2 },\n  subtitle1: { ...typographyStyles.subtitle1 },\n  title3: { ...typographyStyles.title3 },\n  borderThin: { ...shorthands.borderWidth(tokens.strokeWidthThin) },\n  borderThick: { ...shorthands.borderWidth(tokens.strokeWidthThick) },\n  borderThicker: { ...shorthands.borderWidth(tokens.strokeWidthThicker) },\n  borderThickest: { ...shorthands.borderWidth(tokens.strokeWidthThickest) },\n});\n\n/**\n * Apply styling to the AvatarGroup slots based on the state\n */\nexport const useAvatarGroupStyles_unstable = (state: AvatarGroupState): AvatarGroupState => {\n  const { layout, overflowIndicator, size } = state;\n  const styles = useStyles();\n  const sizeStyles = useSizeStyles();\n  const overflowButtonStyles = useOverflowButtonStyles();\n\n  const groupChildClassName = useGroupChildClassName(layout, size, true);\n\n  state.root.className = mergeClasses(\n    avatarGroupClassNames.root,\n    styles.base,\n    layout === 'pie' && styles.pie,\n    layout === 'pie' && sizeStyles[size],\n    state.root.className,\n  );\n\n  if (state.overflowContent) {\n    state.overflowContent.className = mergeClasses(\n      avatarGroupClassNames.overflowContent,\n      styles.overflowContent,\n      state.overflowContent.className,\n    );\n  }\n\n  if (state.overflowSurface) {\n    state.overflowSurface.className = mergeClasses(\n      avatarGroupClassNames.overflowSurface,\n      styles.overflowSurface,\n      state.overflowSurface.className,\n    );\n  }\n\n  const overflowButtonClasses = [];\n\n  if (size < 36) {\n    overflowButtonClasses.push(overflowButtonStyles.borderThin);\n  } else if (size < 56) {\n    overflowButtonClasses.push(overflowButtonStyles.borderThick);\n  } else if (size < 72) {\n    overflowButtonClasses.push(overflowButtonStyles.borderThicker);\n  } else {\n    overflowButtonClasses.push(overflowButtonStyles.borderThickest);\n  }\n\n  if (overflowIndicator === 'count') {\n    if (size <= 24) {\n      overflowButtonClasses.push(overflowButtonStyles.caption2Strong);\n    } else if (size <= 28) {\n      overflowButtonClasses.push(overflowButtonStyles.caption1Strong);\n    } else if (size <= 40) {\n      overflowButtonClasses.push(overflowButtonStyles.body1Strong);\n    } else if (size <= 56) {\n      overflowButtonClasses.push(overflowButtonStyles.subtitle2);\n    } else if (size <= 96) {\n      overflowButtonClasses.push(overflowButtonStyles.subtitle1);\n    } else {\n      overflowButtonClasses.push(overflowButtonStyles.title3);\n    }\n  } else {\n    if (size <= 16) {\n      overflowButtonClasses.push(overflowButtonStyles.icon12);\n    } else if (size <= 24) {\n      overflowButtonClasses.push(overflowButtonStyles.icon16);\n    } else if (size <= 40) {\n      overflowButtonClasses.push(overflowButtonStyles.icon20);\n    } else if (size <= 48) {\n      overflowButtonClasses.push(overflowButtonStyles.icon24);\n    } else if (size <= 56) {\n      overflowButtonClasses.push(overflowButtonStyles.icon28);\n    } else if (size <= 72) {\n      overflowButtonClasses.push(overflowButtonStyles.icon32);\n    } else {\n      overflowButtonClasses.push(overflowButtonStyles.icon48);\n    }\n  }\n\n  if (state.overflowButton) {\n    state.overflowButton.className = mergeClasses(\n      avatarGroupClassNames.overflowButton,\n      sizeStyles[size],\n      overflowButtonStyles.base,\n      ...overflowButtonClasses,\n      layout !== 'pie' && overflowButtonStyles.states,\n      layout !== 'pie' && overflowButtonStyles.focusIndicator,\n      layout === 'pie' && overflowButtonStyles.pieFocusIndicator,\n      layout === 'pie' && overflowButtonStyles.pie,\n      groupChildClassName,\n      state.overflowButton.className,\n    );\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/AvatarGroup/useAvatarGroupStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../Avatar/useAvatarStyles';\nimport type { AvatarGroupSlots, AvatarGroupState } from './AvatarGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useGroupChildClassName } from '../../AvatarGroupItem';\n\nexport const avatarGroupClassNames: SlotClassNames<AvatarGroupSlots> = {\n  root: 'fui-AvatarGroup',\n  overflowContent: 'fui-AvatarGroup__overflowContent',\n  overflowButton: 'fui-AvatarGroup__overflowButton',\n  overflowSurface: 'fui-AvatarGroup__overflowSurface',\n};\n\n/**\n * Styles for the root slot.\n */\nconst useStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    position: 'relative',\n  },\n  pie: {\n    clipPath: 'circle(50%)',\n    backgroundColor: tokens.colorTransparentStroke,\n    '@media (forced-colors: active)': {\n      backgroundColor: 'CanvasText',\n    },\n  },\n  overflowSurface: {\n    ...shorthands.padding(0),\n  },\n  overflowContent: {\n    maxHeight: '220px',\n    minHeight: '80px',\n    ...shorthands.overflow('hidden', 'scroll'),\n    ...shorthands.padding(tokens.spacingHorizontalS),\n    width: '220px',\n  },\n});\n\n/**\n * Styles for overflow button slot.\n */\nconst useOverflowButtonStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    position: 'relative',\n    flexShrink: 0,\n    justifyContent: 'center',\n    alignItems: 'center',\n    color: tokens.colorNeutralForeground1,\n    backgroundColor: tokens.colorNeutralBackground1,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n    ...shorthands.borderStyle('solid'),\n    ...shorthands.padding(0),\n\n    // match color to Avatar's outline color\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('CanvasText'),\n    },\n  },\n\n  // These styles match the default button styles\n  focusIndicator: createCustomFocusIndicatorStyle({\n    ...shorthands.borderColor('transparent'),\n    outlineColor: tokens.colorStrokeFocus2,\n    outlineWidth: tokens.strokeWidthThick,\n    outlineStyle: 'solid',\n  }),\n\n  // This custom focus indicator is required for the pie layout due to the clip-path applied to the root\n  pieFocusIndicator: createCustomFocusIndicatorStyle({\n    ...shorthands.border(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),\n  }),\n\n  states: {\n    ':hover': {\n      color: tokens.colorNeutralForeground1Hover,\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n    },\n    ':active': {\n      color: tokens.colorNeutralForeground1Pressed,\n      backgroundColor: tokens.colorNeutralBackground1Pressed,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n    },\n  },\n\n  pie: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\n    color: 'transparent',\n  },\n\n  icon12: { fontSize: '12px' },\n  icon16: { fontSize: '16px' },\n  icon20: { fontSize: '20px' },\n  icon24: { fontSize: '24px' },\n  icon28: { fontSize: '28px' },\n  icon32: { fontSize: '32px' },\n  icon48: { fontSize: '48px' },\n  caption2Strong: { ...typographyStyles.caption2Strong },\n  caption1Strong: { ...typographyStyles.caption1Strong },\n  body1Strong: { ...typographyStyles.body1Strong },\n  subtitle2: { ...typographyStyles.subtitle2 },\n  subtitle1: { ...typographyStyles.subtitle1 },\n  title3: { ...typographyStyles.title3 },\n  borderThin: { ...shorthands.borderWidth(tokens.strokeWidthThin) },\n  borderThick: { ...shorthands.borderWidth(tokens.strokeWidthThick) },\n  borderThicker: { ...shorthands.borderWidth(tokens.strokeWidthThicker) },\n  borderThickest: { ...shorthands.borderWidth(tokens.strokeWidthThickest) },\n});\n\n/**\n * Apply styling to the AvatarGroup slots based on the state\n */\nexport const useAvatarGroupStyles_unstable = (state: AvatarGroupState): AvatarGroupState => {\n  const { layout, overflowIndicator, size } = state;\n  const styles = useStyles();\n  const sizeStyles = useSizeStyles();\n  const overflowButtonStyles = useOverflowButtonStyles();\n\n  const groupChildClassName = useGroupChildClassName(layout, size, true);\n\n  state.root.className = mergeClasses(\n    avatarGroupClassNames.root,\n    styles.base,\n    layout === 'pie' && styles.pie,\n    layout === 'pie' && sizeStyles[size],\n    state.root.className,\n  );\n\n  if (state.overflowContent) {\n    state.overflowContent.className = mergeClasses(\n      avatarGroupClassNames.overflowContent,\n      styles.overflowContent,\n      state.overflowContent.className,\n    );\n  }\n\n  if (state.overflowSurface) {\n    state.overflowSurface.className = mergeClasses(\n      avatarGroupClassNames.overflowSurface,\n      styles.overflowSurface,\n      state.overflowSurface.className,\n    );\n  }\n\n  const overflowButtonClasses = [];\n\n  if (size < 36) {\n    overflowButtonClasses.push(overflowButtonStyles.borderThin);\n  } else if (size < 56) {\n    overflowButtonClasses.push(overflowButtonStyles.borderThick);\n  } else if (size < 72) {\n    overflowButtonClasses.push(overflowButtonStyles.borderThicker);\n  } else {\n    overflowButtonClasses.push(overflowButtonStyles.borderThickest);\n  }\n\n  if (overflowIndicator === 'count') {\n    if (size <= 24) {\n      overflowButtonClasses.push(overflowButtonStyles.caption2Strong);\n    } else if (size <= 28) {\n      overflowButtonClasses.push(overflowButtonStyles.caption1Strong);\n    } else if (size <= 40) {\n      overflowButtonClasses.push(overflowButtonStyles.body1Strong);\n    } else if (size <= 56) {\n      overflowButtonClasses.push(overflowButtonStyles.subtitle2);\n    } else if (size <= 96) {\n      overflowButtonClasses.push(overflowButtonStyles.subtitle1);\n    } else {\n      overflowButtonClasses.push(overflowButtonStyles.title3);\n    }\n  } else {\n    if (size <= 16) {\n      overflowButtonClasses.push(overflowButtonStyles.icon12);\n    } else if (size <= 24) {\n      overflowButtonClasses.push(overflowButtonStyles.icon16);\n    } else if (size <= 40) {\n      overflowButtonClasses.push(overflowButtonStyles.icon20);\n    } else if (size <= 48) {\n      overflowButtonClasses.push(overflowButtonStyles.icon24);\n    } else if (size <= 56) {\n      overflowButtonClasses.push(overflowButtonStyles.icon28);\n    } else if (size <= 72) {\n      overflowButtonClasses.push(overflowButtonStyles.icon32);\n    } else {\n      overflowButtonClasses.push(overflowButtonStyles.icon48);\n    }\n  }\n\n  if (state.overflowButton) {\n    state.overflowButton.className = mergeClasses(\n      avatarGroupClassNames.overflowButton,\n      sizeStyles[size],\n      overflowButtonStyles.base,\n      ...overflowButtonClasses,\n      layout !== 'pie' && overflowButtonStyles.states,\n      layout !== 'pie' && overflowButtonStyles.focusIndicator,\n      layout === 'pie' && overflowButtonStyles.pieFocusIndicator,\n      layout === 'pie' && overflowButtonStyles.pie,\n      groupChildClassName,\n      state.overflowButton.className,\n    );\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

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

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AvatarGroupOverflow = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const useAvatarGroupOverflow_1 = /*#__PURE__*/require("./useAvatarGroupOverflow");
+
+const renderAvatarGroupOverflow_1 = /*#__PURE__*/require("./renderAvatarGroupOverflow");
+
+const useAvatarGroupOverflowStyles_1 = /*#__PURE__*/require("./useAvatarGroupOverflowStyles");
+/**
+ * AvatarGroupOverflow component - TODO: add more docs
+ */
+
+
+exports.AvatarGroupOverflow = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useAvatarGroupOverflow_1.useAvatarGroupOverflow_unstable(props, ref);
+  useAvatarGroupOverflowStyles_1.useAvatarGroupOverflowStyles_unstable(state);
+  return renderAvatarGroupOverflow_1.renderAvatarGroupOverflow_unstable(state);
+});
+exports.AvatarGroupOverflow.displayName = 'AvatarGroupOverflow';
+//# sourceMappingURL=AvatarGroupOverflow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/AvatarGroupOverflow/AvatarGroupOverflow.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,wBAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;;AACA,MAAA,2BAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AACA,MAAA,8BAAA,gBAAA,OAAA,CAAA,gCAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,mBAAA,gBAAqE,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChH,MAAM,KAAK,GAAG,wBAAA,CAAA,+BAAA,CAAgC,KAAhC,EAAuC,GAAvC,CAAd;EAEA,8BAAA,CAAA,qCAAA,CAAsC,KAAtC;EACA,OAAO,2BAAA,CAAA,kCAAA,CAAmC,KAAnC,CAAP;AACD,CALiF,CAArE;AAOb,OAAA,CAAA,mBAAA,CAAoB,WAApB,GAAkC,qBAAlC","sourcesContent":["import * as React from 'react';\nimport { useAvatarGroupOverflow_unstable } from './useAvatarGroupOverflow';\nimport { renderAvatarGroupOverflow_unstable } from './renderAvatarGroupOverflow';\nimport { useAvatarGroupOverflowStyles_unstable } from './useAvatarGroupOverflowStyles';\nimport type { AvatarGroupOverflowProps } from './AvatarGroupOverflow.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * AvatarGroupOverflow component - TODO: add more docs\n */\nexport const AvatarGroupOverflow: ForwardRefComponent<AvatarGroupOverflowProps> = React.forwardRef((props, ref) => {\n  const state = useAvatarGroupOverflow_unstable(props, ref);\n\n  useAvatarGroupOverflowStyles_unstable(state);\n  return renderAvatarGroupOverflow_unstable(state);\n});\n\nAvatarGroupOverflow.displayName = 'AvatarGroupOverflow';\n"],"sourceRoot":"../src/"}

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

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+}); // & Required<Pick<AvatarGroupOverflowProps, 'propName'>>
+//# sourceMappingURL=AvatarGroupOverflow.types.js.map