@fluentui/react-avatar 9.5.4 → 9.5.6

package/lib/components/AvatarGroup/renderAvatarGroup.js

@@ -1,16 +1,11 @@
-/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
+/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
 import { getSlotsNext } from '@fluentui/react-utilities';
 import { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';
 /**
  * Render the final JSX of AvatarGroup
- */
-export const renderAvatarGroup_unstable = (state, contextValues) => {
-  const {
-    slots,
-    slotProps
-  } = getSlotsNext(state);
-  return /*#__PURE__*/createElement(AvatarGroupProvider, {
-    value: contextValues.avatarGroup
-  }, /*#__PURE__*/createElement(slots.root, slotProps.root));
+ */ export const renderAvatarGroup_unstable = (state, contextValues)=>{
+    const { slots , slotProps  } = getSlotsNext(state);
+    return /*#__PURE__*/ createElement(AvatarGroupProvider, {
+        value: contextValues.avatarGroup
+    }, /*#__PURE__*/ createElement(slots.root, slotProps.root));
 };
-//# sourceMappingURL=renderAvatarGroup.js.map

package/lib/components/AvatarGroup/renderAvatarGroup.js.map

@@ -1 +1 @@
-{"version":3,"names":["createElement","getSlotsNext","AvatarGroupProvider","renderAvatarGroup_unstable","state","contextValues","slots","slotProps","value","avatarGroup","root"],"sources":["../../../src/components/AvatarGroup/renderAvatarGroup.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';\nimport type { AvatarGroupState, AvatarGroupSlots, AvatarGroupContextValues } from './AvatarGroup.types';\n\n/**\n * Render the final JSX of AvatarGroup\n */\nexport const renderAvatarGroup_unstable = (state: AvatarGroupState, contextValues: AvatarGroupContextValues) => {\n  const { slots, slotProps } = getSlotsNext<AvatarGroupSlots>(state);\n\n  return (\n    <AvatarGroupProvider value={contextValues.avatarGroup}>\n      <slots.root {...slotProps.root} />\n    </AvatarGroupProvider>\n  );\n};\n"],"mappings":"AAAA,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAE9B,SAASC,YAAY,QAAQ;AAC7B,SAASC,mBAAmB,QAAQ;AAGpC;;;AAGA,OAAO,MAAMC,0BAAA,GAA6BA,CAACC,KAAA,EAAyBC,aAAA,KAA4C;EAC9G,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGN,YAAA,CAA+BG,KAAA;EAE5D,oBACEJ,aAfJ,CAeKE,mBAAA;IAAoBM,KAAA,EAAOH,aAAA,CAAcI;kBACxCT,aAhBN,CAgBOM,KAAA,CAAMI,IAAI,EAAKH,SAAA,CAAUG,IAAI;AAGpC"}
+{"version":3,"sources":["renderAvatarGroup.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';\nimport type { AvatarGroupState, AvatarGroupSlots, AvatarGroupContextValues } from './AvatarGroup.types';\n\n/**\n * Render the final JSX of AvatarGroup\n */\nexport const renderAvatarGroup_unstable = (state: AvatarGroupState, contextValues: AvatarGroupContextValues) => {\n  const { slots, slotProps } = getSlotsNext<AvatarGroupSlots>(state);\n\n  return (\n    <AvatarGroupProvider value={contextValues.avatarGroup}>\n      <slots.root {...slotProps.root} />\n    </AvatarGroupProvider>\n  );\n};\n"],"names":["createElement","getSlotsNext","AvatarGroupProvider","renderAvatarGroup_unstable","state","contextValues","slots","slotProps","value","avatarGroup","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,YAAY,QAAQ,4BAA4B;AACzD,SAASC,mBAAmB,QAAQ,oCAAoC;AAGxE;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC,OAAyBC,gBAA4C;IAC9G,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGN,aAA+BG;IAE5D,qBACE,AAfJ,cAeKF;QAAoBM,OAAOH,cAAcI,WAAW;qBACnD,AAhBN,cAgBOH,MAAMI,IAAI,EAAKH,UAAUG,IAAI;AAGpC,EAAE"}

package/lib/components/AvatarGroup/useAvatarGroup.js

@@ -8,25 +8,22 @@ import { getNativeElementProps } from '@fluentui/react-utilities';
  *
  * @param props - props from this instance of AvatarGroup
  * @param ref - reference to root HTMLElement of AvatarGroup
- */
-export const useAvatarGroup_unstable = (props, ref) => {
-  const {
-    layout = 'spread',
-    size = defaultAvatarGroupSize
-  } = props;
-  const root = getNativeElementProps('div', {
-    role: 'group',
-    ...props,
-    ref
-  }, ['size']);
-  return {
-    layout,
-    size,
-    components: {
-      root: 'div'
-    },
-    root
-  };
+ */ export const useAvatarGroup_unstable = (props, ref)=>{
+    const { layout ='spread' , size =defaultAvatarGroupSize  } = props;
+    const root = getNativeElementProps('div', {
+        role: 'group',
+        ...props,
+        ref
+    }, [
+        'size'
+    ]);
+    return {
+        layout,
+        size,
+        components: {
+            root: 'div'
+        },
+        root
+    };
 };
 export const defaultAvatarGroupSize = 32;
-//# sourceMappingURL=useAvatarGroup.js.map

package/lib/components/AvatarGroup/useAvatarGroup.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","getNativeElementProps","useAvatarGroup_unstable","props","ref","layout","size","defaultAvatarGroupSize","root","role","components"],"sources":["../../../src/components/AvatarGroup/useAvatarGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { AvatarGroupProps, AvatarGroupState } from './AvatarGroup.types';\n\n/**\n * Create the state required to render AvatarGroup.\n *\n * The returned state can be modified with hooks such as useAvatarGroupStyles_unstable,\n * before being passed to renderAvatarGroup_unstable.\n *\n * @param props - props from this instance of AvatarGroup\n * @param ref - reference to root HTMLElement of AvatarGroup\n */\nexport const useAvatarGroup_unstable = (props: AvatarGroupProps, ref: React.Ref<HTMLElement>): AvatarGroupState => {\n  const { layout = 'spread', size = defaultAvatarGroupSize } = props;\n\n  const root = getNativeElementProps(\n    'div',\n    {\n      role: 'group',\n      ...props,\n      ref,\n    },\n    ['size'],\n  );\n\n  return {\n    layout,\n    size,\n    components: {\n      root: 'div',\n    },\n    root,\n  };\n};\n\nexport const defaultAvatarGroupSize = 32;\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,qBAAqB,QAAQ;AAGtC;;;;;;;;;AASA,OAAO,MAAMC,uBAAA,GAA0BA,CAACC,KAAA,EAAyBC,GAAA,KAAkD;EACjH,MAAM;IAAEC,MAAA,GAAS;IAAUC,IAAA,GAAOC;EAAsB,CAAE,GAAGJ,KAAA;EAE7D,MAAMK,IAAA,GAAOP,qBAAA,CACX,OACA;IACEQ,IAAA,EAAM;IACN,GAAGN,KAAK;IACRC;EACF,GACA,CAAC,OAAO;EAGV,OAAO;IACLC,MAAA;IACAC,IAAA;IACAI,UAAA,EAAY;MACVF,IAAA,EAAM;IACR;IACAA;EACF;AACF;AAEA,OAAO,MAAMD,sBAAA,GAAyB"}
+{"version":3,"sources":["useAvatarGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { AvatarGroupProps, AvatarGroupState } from './AvatarGroup.types';\n\n/**\n * Create the state required to render AvatarGroup.\n *\n * The returned state can be modified with hooks such as useAvatarGroupStyles_unstable,\n * before being passed to renderAvatarGroup_unstable.\n *\n * @param props - props from this instance of AvatarGroup\n * @param ref - reference to root HTMLElement of AvatarGroup\n */\nexport const useAvatarGroup_unstable = (props: AvatarGroupProps, ref: React.Ref<HTMLElement>): AvatarGroupState => {\n  const { layout = 'spread', size = defaultAvatarGroupSize } = props;\n\n  const root = getNativeElementProps(\n    'div',\n    {\n      role: 'group',\n      ...props,\n      ref,\n    },\n    ['size'],\n  );\n\n  return {\n    layout,\n    size,\n    components: {\n      root: 'div',\n    },\n    root,\n  };\n};\n\nexport const defaultAvatarGroupSize = 32;\n"],"names":["React","getNativeElementProps","useAvatarGroup_unstable","props","ref","layout","size","defaultAvatarGroupSize","root","role","components"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,4BAA4B;AAGlE;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC,MAAkD;IACjH,MAAM,EAAEC,QAAS,SAAQ,EAAEC,MAAOC,uBAAsB,EAAE,GAAGJ;IAE7D,MAAMK,OAAOP,sBACX,OACA;QACEQ,MAAM;QACN,GAAGN,KAAK;QACRC;IACF,GACA;QAAC;KAAO;IAGV,OAAO;QACLC;QACAC;QACAI,YAAY;YACVF,MAAM;QACR;QACAA;IACF;AACF,EAAE;AAEF,OAAO,MAAMD,yBAAyB,GAAG"}

package/lib/components/AvatarGroup/useAvatarGroupContextValues.js

@@ -1,14 +1,10 @@
-export const useAvatarGroupContextValues = state => {
-  const {
-    layout,
-    size
-  } = state;
-  const avatarGroup = {
-    layout,
-    size
-  };
-  return {
-    avatarGroup
-  };
+export const useAvatarGroupContextValues = (state)=>{
+    const { layout , size  } = state;
+    const avatarGroup = {
+        layout,
+        size
+    };
+    return {
+        avatarGroup
+    };
 };
-//# sourceMappingURL=useAvatarGroupContextValues.js.map

package/lib/components/AvatarGroup/useAvatarGroupContextValues.js.map

@@ -1 +1 @@
-{"version":3,"names":["useAvatarGroupContextValues","state","layout","size","avatarGroup"],"sources":["../../../src/components/AvatarGroup/useAvatarGroupContextValues.ts"],"sourcesContent":["import { AvatarGroupContextValue, AvatarGroupContextValues, AvatarGroupState } from '../AvatarGroup';\n\nexport const useAvatarGroupContextValues = (state: AvatarGroupState): AvatarGroupContextValues => {\n  const { layout, size } = state;\n\n  const avatarGroup: AvatarGroupContextValue = {\n    layout,\n    size,\n  };\n\n  return { avatarGroup };\n};\n"],"mappings":"AAEA,OAAO,MAAMA,2BAAA,GAA+BC,KAAA,IAAsD;EAChG,MAAM;IAAEC,MAAA;IAAQC;EAAI,CAAE,GAAGF,KAAA;EAEzB,MAAMG,WAAA,GAAuC;IAC3CF,MAAA;IACAC;EACF;EAEA,OAAO;IAAEC;EAAY;AACvB"}
+{"version":3,"sources":["useAvatarGroupContextValues.ts"],"sourcesContent":["import { AvatarGroupContextValue, AvatarGroupContextValues, AvatarGroupState } from '../AvatarGroup';\n\nexport const useAvatarGroupContextValues = (state: AvatarGroupState): AvatarGroupContextValues => {\n  const { layout, size } = state;\n\n  const avatarGroup: AvatarGroupContextValue = {\n    layout,\n    size,\n  };\n\n  return { avatarGroup };\n};\n"],"names":["useAvatarGroupContextValues","state","layout","size","avatarGroup"],"mappings":"AAEA,OAAO,MAAMA,8BAA8B,CAACC,QAAsD;IAChG,MAAM,EAAEC,OAAM,EAAEC,KAAI,EAAE,GAAGF;IAEzB,MAAMG,cAAuC;QAC3CF;QACAC;IACF;IAEA,OAAO;QAAEC;IAAY;AACvB,EAAE"}

package/lib/components/AvatarGroup/useAvatarGroupStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","tokens","useSizeStyles","avatarGroupClassNames","root","useStyles","base","mc9l5x","qhf8xq","pie","Bgl5zvf","De3pzq","Bsw6fvg","d","m","useAvatarGroupStyles_unstable","state","layout","size","styles","sizeStyles","className"],"sources":["../../../src/components/AvatarGroup/useAvatarGroupStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../Avatar/useAvatarStyles.styles';\nimport type { AvatarGroupSlots, AvatarGroupState } from './AvatarGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarGroupClassNames: SlotClassNames<AvatarGroupSlots> = {\n  root: 'fui-AvatarGroup',\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});\n\n/**\n * Apply styling to the AvatarGroup slots based on the state\n */\nexport const useAvatarGroupStyles_unstable = (state: AvatarGroupState): AvatarGroupState => {\n  const { layout, size } = state;\n  const styles = useStyles();\n  const sizeStyles = useSizeStyles();\n\n  state.root.className = mergeClasses(\n    avatarGroupClassNames.root,\n    styles.base,\n    layout === 'pie' && sizeStyles[size],\n    layout === 'pie' && styles.pie,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ;AACzC,SAASC,MAAM,QAAQ;AACvB,SAASC,aAAa,QAAQ;AAI9B,OAAO,MAAMC,qBAAA,GAA0D;EACrEC,IAAA,EAAM;AACR;AAEA;;;AAGA,MAAMC,SAAA,gBAAYN,QAAA;EAAAO,IAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,GAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;AAAA,EAYlB;AAEA;;;AAGA,OAAO,MAAMC,6BAAA,GAAiCC,KAAA,IAA8C;EAC1F,MAAM;IAAEC,MAAA;IAAQC;EAAI,CAAE,GAAGF,KAAA;EACzB,MAAMG,MAAA,GAASd,SAAA;EACf,MAAMe,UAAA,GAAalB,aAAA;EAEnBc,KAAA,CAAMZ,IAAI,CAACiB,SAAS,GAAGrB,YAAA,CACrBG,qBAAA,CAAsBC,IAAI,EAC1Be,MAAA,CAAOb,IAAI,EACXW,MAAA,KAAW,SAASG,UAAU,CAACF,IAAA,CAAK,EACpCD,MAAA,KAAW,SAASE,MAAA,CAAOV,GAAG,EAC9BO,KAAA,CAAMZ,IAAI,CAACiB,SAAS;EAGtB,OAAOL,KAAA;AACT"}
+{"version":3,"names":["__styles","mergeClasses","tokens","useSizeStyles","avatarGroupClassNames","root","useStyles","base","mc9l5x","qhf8xq","pie","Bgl5zvf","De3pzq","Bsw6fvg","d","m","useAvatarGroupStyles_unstable","state","layout","size","styles","sizeStyles","className"],"sources":["useAvatarGroupStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../Avatar/useAvatarStyles.styles';\nexport const avatarGroupClassNames = {\n    root: 'fui-AvatarGroup'\n};\n/**\n * Styles for the root slot.\n */ const 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});\n/**\n * Apply styling to the AvatarGroup slots based on the state\n */ export const useAvatarGroupStyles_unstable = (state)=>{\n    const { layout , size  } = state;\n    const styles = useStyles();\n    const sizeStyles = useSizeStyles();\n    state.root.className = mergeClasses(avatarGroupClassNames.root, styles.base, layout === 'pie' && sizeStyles[size], layout === 'pie' && styles.pie, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,aAAa,QAAQ,kCAAkC;AAChE,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGN,QAAA;EAAAO,IAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,GAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;AAAA,CAYrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EACtD,MAAM;IAAEC,MAAM;IAAGC;EAAM,CAAC,GAAGF,KAAK;EAChC,MAAMG,MAAM,GAAGd,SAAS,CAAC,CAAC;EAC1B,MAAMe,UAAU,GAAGlB,aAAa,CAAC,CAAC;EAClCc,KAAK,CAACZ,IAAI,CAACiB,SAAS,GAAGrB,YAAY,CAACG,qBAAqB,CAACC,IAAI,EAAEe,MAAM,CAACb,IAAI,EAAEW,MAAM,KAAK,KAAK,IAAIG,UAAU,CAACF,IAAI,CAAC,EAAED,MAAM,KAAK,KAAK,IAAIE,MAAM,CAACV,GAAG,EAAEO,KAAK,CAACZ,IAAI,CAACiB,SAAS,CAAC;EACxK,OAAOL,KAAK;AAChB,CAAC"}

package/lib/components/AvatarGroupItem/AvatarGroupItem.js

@@ -6,12 +6,10 @@ import { useAvatarGroupItemStyles_unstable } from './useAvatarGroupItemStyles.st
 /**
  * The AvatarGroupItem component represents a single person or entity.
  * AvatarGroupItem should only be used in an AvatarGroup component.
- */
-export const AvatarGroupItem = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useAvatarGroupItem_unstable(props, ref);
-  useAvatarGroupItemStyles_unstable(state);
-  useCustomStyleHook_unstable('useAvatarGroupItemStyles_unstable')(state);
-  return renderAvatarGroupItem_unstable(state);
+ */ export const AvatarGroupItem = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useAvatarGroupItem_unstable(props, ref);
+    useAvatarGroupItemStyles_unstable(state);
+    useCustomStyleHook_unstable('useAvatarGroupItemStyles_unstable')(state);
+    return renderAvatarGroupItem_unstable(state);
 });
 AvatarGroupItem.displayName = 'AvatarGroupItem';
-//# sourceMappingURL=AvatarGroupItem.js.map

package/lib/components/AvatarGroupItem/AvatarGroupItem.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","renderAvatarGroupItem_unstable","useAvatarGroupItem_unstable","useCustomStyleHook_unstable","useAvatarGroupItemStyles_unstable","AvatarGroupItem","forwardRef","props","ref","state","displayName"],"sources":["../../../src/components/AvatarGroupItem/AvatarGroupItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderAvatarGroupItem_unstable } from './renderAvatarGroupItem';\nimport { useAvatarGroupItem_unstable } from './useAvatarGroupItem';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useAvatarGroupItemStyles_unstable } from './useAvatarGroupItemStyles.styles';\nimport type { AvatarGroupItemProps } from './AvatarGroupItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The AvatarGroupItem component represents a single person or entity.\n * AvatarGroupItem should only be used in an AvatarGroup component.\n */\nexport const AvatarGroupItem: ForwardRefComponent<AvatarGroupItemProps> = React.forwardRef((props, ref) => {\n  const state = useAvatarGroupItem_unstable(props, ref);\n\n  useAvatarGroupItemStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useAvatarGroupItemStyles_unstable')(state);\n\n  return renderAvatarGroupItem_unstable(state);\n});\n\nAvatarGroupItem.displayName = 'AvatarGroupItem';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,8BAA8B,QAAQ;AAC/C,SAASC,2BAA2B,QAAQ;AAC5C,SAASC,2BAA2B,QAAQ;AAC5C,SAASC,iCAAiC,QAAQ;AAIlD;;;;AAIA,OAAO,MAAMC,eAAA,gBAA6DL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACzG,MAAMC,KAAA,GAAQP,2BAAA,CAA4BK,KAAA,EAAOC,GAAA;EAEjDJ,iCAAA,CAAkCK,KAAA;EAElCN,2BAAA,CAA4B,qCAAqCM,KAAA;EAEjE,OAAOR,8BAAA,CAA+BQ,KAAA;AACxC;AAEAJ,eAAA,CAAgBK,WAAW,GAAG"}
+{"version":3,"sources":["AvatarGroupItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderAvatarGroupItem_unstable } from './renderAvatarGroupItem';\nimport { useAvatarGroupItem_unstable } from './useAvatarGroupItem';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useAvatarGroupItemStyles_unstable } from './useAvatarGroupItemStyles.styles';\nimport type { AvatarGroupItemProps } from './AvatarGroupItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The AvatarGroupItem component represents a single person or entity.\n * AvatarGroupItem should only be used in an AvatarGroup component.\n */\nexport const AvatarGroupItem: ForwardRefComponent<AvatarGroupItemProps> = React.forwardRef((props, ref) => {\n  const state = useAvatarGroupItem_unstable(props, ref);\n\n  useAvatarGroupItemStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useAvatarGroupItemStyles_unstable')(state);\n\n  return renderAvatarGroupItem_unstable(state);\n});\n\nAvatarGroupItem.displayName = 'AvatarGroupItem';\n"],"names":["React","renderAvatarGroupItem_unstable","useAvatarGroupItem_unstable","useCustomStyleHook_unstable","useAvatarGroupItemStyles_unstable","AvatarGroupItem","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,iCAAiC,QAAQ,oCAAoC;AAItF;;;CAGC,GACD,OAAO,MAAMC,gCAA6DL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACzG,MAAMC,QAAQP,4BAA4BK,OAAOC;IAEjDJ,kCAAkCK;IAElCN,4BAA4B,qCAAqCM;IAEjE,OAAOR,+BAA+BQ;AACxC,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}

package/lib/components/AvatarGroupItem/AvatarGroupItem.types.js

@@ -1,2 +1 @@
-export {};
-//# sourceMappingURL=AvatarGroupItem.types.js.map
+export { };

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/AvatarGroupItem/AvatarGroupItem.types.ts"],"sourcesContent":["import { AvatarGroupProps } from '../AvatarGroup/AvatarGroup.types';\nimport type { Avatar, AvatarSize } from '../../Avatar';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AvatarGroupItemSlots = {\n  root: NonNullable<Slot<'div', 'li'>>;\n\n  /**\n   * Avatar that represents a person or entity.\n   */\n  avatar: NonNullable<Slot<typeof Avatar>>;\n\n  /**\n   * Label used for the name of the AvatarGroupItem when rendered as an overflow item.\n   * The content of the label, by default, is the `name` prop from the `avatar` slot.\n   */\n  overflowLabel: NonNullable<Slot<'span'>>;\n};\n\n/**\n * AvatarGroupItem Props\n */\nexport type AvatarGroupItemProps = Omit<ComponentProps<Partial<AvatarGroupItemSlots>, 'avatar'>, 'size' | 'shape'>;\n\n/**\n * State used in rendering AvatarGroupItem\n */\nexport type AvatarGroupItemState = ComponentState<AvatarGroupItemSlots> & {\n  /**\n   * Whether the Avatar is an overflow item.\n   *\n   * @default false\n   */\n  isOverflowItem?: boolean;\n\n  layout: AvatarGroupProps['layout'];\n  size: AvatarSize;\n};\n"],"mappings":"AAAA"}
+{"version":3,"sources":["AvatarGroupItem.types.ts"],"sourcesContent":["import { AvatarGroupProps } from '../AvatarGroup/AvatarGroup.types';\nimport type { Avatar, AvatarSize } from '../../Avatar';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AvatarGroupItemSlots = {\n  root: NonNullable<Slot<'div', 'li'>>;\n\n  /**\n   * Avatar that represents a person or entity.\n   */\n  avatar: NonNullable<Slot<typeof Avatar>>;\n\n  /**\n   * Label used for the name of the AvatarGroupItem when rendered as an overflow item.\n   * The content of the label, by default, is the `name` prop from the `avatar` slot.\n   */\n  overflowLabel: NonNullable<Slot<'span'>>;\n};\n\n/**\n * AvatarGroupItem Props\n */\nexport type AvatarGroupItemProps = Omit<ComponentProps<Partial<AvatarGroupItemSlots>, 'avatar'>, 'size' | 'shape'>;\n\n/**\n * State used in rendering AvatarGroupItem\n */\nexport type AvatarGroupItemState = ComponentState<AvatarGroupItemSlots> & {\n  /**\n   * Whether the Avatar is an overflow item.\n   *\n   * @default false\n   */\n  isOverflowItem?: boolean;\n\n  layout: AvatarGroupProps['layout'];\n  size: AvatarSize;\n};\n"],"names":[],"mappings":"AAAA,WAqCE"}

package/lib/components/AvatarGroupItem/index.js

@@ -3,4 +3,3 @@ export * from './AvatarGroupItem.types';
 export * from './renderAvatarGroupItem';
 export * from './useAvatarGroupItem';
 export * from './useAvatarGroupItemStyles.styles';
-//# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/AvatarGroupItem/index.ts"],"sourcesContent":["export * from './AvatarGroupItem';\nexport * from './AvatarGroupItem.types';\nexport * from './renderAvatarGroupItem';\nexport * from './useAvatarGroupItem';\nexport * from './useAvatarGroupItemStyles.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './AvatarGroupItem';\nexport * from './AvatarGroupItem.types';\nexport * from './renderAvatarGroupItem';\nexport * from './useAvatarGroupItem';\nexport * from './useAvatarGroupItemStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,oBAAoB;AAClC,cAAc,0BAA0B;AACxC,cAAc,0BAA0B;AACxC,cAAc,uBAAuB;AACrC,cAAc,oCAAoC"}

package/lib/components/AvatarGroupItem/renderAvatarGroupItem.js

@@ -1,13 +1,8 @@
-/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
+/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
 import { getSlotsNext } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of AvatarGroupItem
- */
-export const renderAvatarGroupItem_unstable = state => {
-  const {
-    slots,
-    slotProps
-  } = getSlotsNext(state);
-  return /*#__PURE__*/createElement(slots.root, slotProps.root, /*#__PURE__*/createElement(slots.avatar, slotProps.avatar), state.isOverflowItem && /*#__PURE__*/createElement(slots.overflowLabel, slotProps.overflowLabel));
+ */ export const renderAvatarGroupItem_unstable = (state)=>{
+    const { slots , slotProps  } = getSlotsNext(state);
+    return /*#__PURE__*/ createElement(slots.root, slotProps.root, /*#__PURE__*/ createElement(slots.avatar, slotProps.avatar), state.isOverflowItem && /*#__PURE__*/ createElement(slots.overflowLabel, slotProps.overflowLabel));
 };
-//# sourceMappingURL=renderAvatarGroupItem.js.map

package/lib/components/AvatarGroupItem/renderAvatarGroupItem.js.map

@@ -1 +1 @@
-{"version":3,"names":["createElement","getSlotsNext","renderAvatarGroupItem_unstable","state","slots","slotProps","root","avatar","isOverflowItem","overflowLabel"],"sources":["../../../src/components/AvatarGroupItem/renderAvatarGroupItem.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { AvatarGroupItemState, AvatarGroupItemSlots } from './AvatarGroupItem.types';\n\n/**\n * Render the final JSX of AvatarGroupItem\n */\nexport const renderAvatarGroupItem_unstable = (state: AvatarGroupItemState) => {\n  const { slots, slotProps } = getSlotsNext<AvatarGroupItemSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.avatar {...slotProps.avatar} />\n      {state.isOverflowItem && <slots.overflowLabel {...slotProps.overflowLabel} />}\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAE9B,SAASC,YAAY,QAAQ;AAG7B;;;AAGA,OAAO,MAAMC,8BAAA,GAAkCC,KAAA,IAAgC;EAC7E,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,YAAA,CAAmCE,KAAA;EAEhE,oBACEH,aAdJ,CAcKI,KAAA,CAAME,IAAI,EAAKD,SAAA,CAAUC,IAAI,eAC5BN,aAfN,CAeOI,KAAA,CAAMG,MAAM,EAAKF,SAAA,CAAUE,MAAM,GACjCJ,KAAA,CAAMK,cAAc,iBAAIR,aAhB/B,CAgBgCI,KAAA,CAAMK,aAAa,EAAKJ,SAAA,CAAUI,aAAa;AAG/E"}
+{"version":3,"sources":["renderAvatarGroupItem.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { AvatarGroupItemState, AvatarGroupItemSlots } from './AvatarGroupItem.types';\n\n/**\n * Render the final JSX of AvatarGroupItem\n */\nexport const renderAvatarGroupItem_unstable = (state: AvatarGroupItemState) => {\n  const { slots, slotProps } = getSlotsNext<AvatarGroupItemSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.avatar {...slotProps.avatar} />\n      {state.isOverflowItem && <slots.overflowLabel {...slotProps.overflowLabel} />}\n    </slots.root>\n  );\n};\n"],"names":["createElement","getSlotsNext","renderAvatarGroupItem_unstable","state","slots","slotProps","root","avatar","isOverflowItem","overflowLabel"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,YAAY,QAAQ,4BAA4B;AAGzD;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC,QAAgC;IAC7E,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAAmCE;IAEhE,qBACE,AAdJ,cAcKC,MAAME,IAAI,EAAKD,UAAUC,IAAI,gBAC5B,AAfN,cAeOF,MAAMG,MAAM,EAAKF,UAAUE,MAAM,GACjCJ,MAAMK,cAAc,kBAAI,AAhB/B,cAgBgCJ,MAAMK,aAAa,EAAKJ,UAAUI,aAAa;AAG/E,EAAE"}

package/lib/components/AvatarGroupItem/useAvatarGroupItem.js

@@ -12,56 +12,50 @@ import { useHasParentContext } from '@fluentui/react-context-selector';
  *
  * @param props - props from this instance of AvatarGroupItem
  * @param ref - reference to root HTMLElement of AvatarGroupItem
- */
-export const useAvatarGroupItem_unstable = (props, ref) => {
-  const groupIsOverflow = useAvatarGroupContext_unstable(ctx => ctx.isOverflow);
-  const groupSize = useAvatarGroupContext_unstable(ctx => ctx.size);
-  const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);
-  // Since the primary slot is not an intrinsic element, getPartitionedNativeProps cannot be used here.
-  const {
-    style,
-    className,
-    ...avatarSlotProps
-  } = props;
-  const size = groupSize !== null && groupSize !== void 0 ? groupSize : defaultAvatarGroupSize;
-  const hasAvatarGroupContext = useHasParentContext(AvatarGroupContext);
-  if (process.env.NODE_ENV !== 'production' && !hasAvatarGroupContext) {
-    // eslint-disable-next-line no-console
-    console.warn('AvatarGroupItem must only be used inside an AvatarGroup component.');
-  }
-  return {
-    isOverflowItem: groupIsOverflow,
-    layout,
-    size,
-    components: {
-      root: groupIsOverflow ? 'li' : 'div',
-      avatar: Avatar,
-      overflowLabel: 'span'
-    },
-    root: resolveShorthand(props.root, {
-      required: true,
-      defaultProps: {
-        style,
-        className
-      }
-    }),
-    avatar: resolveShorthand(props.avatar, {
-      required: true,
-      defaultProps: {
-        ref,
+ */ export const useAvatarGroupItem_unstable = (props, ref)=>{
+    const groupIsOverflow = useAvatarGroupContext_unstable((ctx)=>ctx.isOverflow);
+    const groupSize = useAvatarGroupContext_unstable((ctx)=>ctx.size);
+    const layout = useAvatarGroupContext_unstable((ctx)=>ctx.layout);
+    // Since the primary slot is not an intrinsic element, getPartitionedNativeProps cannot be used here.
+    const { style , className , ...avatarSlotProps } = props;
+    const size = groupSize !== null && groupSize !== void 0 ? groupSize : defaultAvatarGroupSize;
+    const hasAvatarGroupContext = useHasParentContext(AvatarGroupContext);
+    if (process.env.NODE_ENV !== 'production' && !hasAvatarGroupContext) {
+        // eslint-disable-next-line no-console
+        console.warn('AvatarGroupItem must only be used inside an AvatarGroup component.');
+    }
+    return {
+        isOverflowItem: groupIsOverflow,
+        layout,
         size,
-        color: 'colorful',
-        ...avatarSlotProps
-      }
-    }),
-    overflowLabel: resolveShorthand(props.overflowLabel, {
-      required: true,
-      defaultProps: {
-        // Avatar already has its aria-label set to the name, this will prevent the name to be read twice.
-        'aria-hidden': true,
-        children: props.name
-      }
-    })
-  };
+        components: {
+            root: groupIsOverflow ? 'li' : 'div',
+            avatar: Avatar,
+            overflowLabel: 'span'
+        },
+        root: resolveShorthand(props.root, {
+            required: true,
+            defaultProps: {
+                style,
+                className
+            }
+        }),
+        avatar: resolveShorthand(props.avatar, {
+            required: true,
+            defaultProps: {
+                ref,
+                size,
+                color: 'colorful',
+                ...avatarSlotProps
+            }
+        }),
+        overflowLabel: resolveShorthand(props.overflowLabel, {
+            required: true,
+            defaultProps: {
+                // Avatar already has its aria-label set to the name, this will prevent the name to be read twice.
+                'aria-hidden': true,
+                children: props.name
+            }
+        })
+    };
 };
-//# sourceMappingURL=useAvatarGroupItem.js.map

package/lib/components/AvatarGroupItem/useAvatarGroupItem.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Avatar","AvatarGroupContext","useAvatarGroupContext_unstable","defaultAvatarGroupSize","resolveShorthand","useHasParentContext","useAvatarGroupItem_unstable","props","ref","groupIsOverflow","ctx","isOverflow","groupSize","size","layout","style","className","avatarSlotProps","hasAvatarGroupContext","process","env","NODE_ENV","console","warn","isOverflowItem","components","root","avatar","overflowLabel","required","defaultProps","color","children","name"],"sources":["../../../src/components/AvatarGroupItem/useAvatarGroupItem.ts"],"sourcesContent":["import * as React from 'react';\nimport { Avatar } from '../Avatar/Avatar';\nimport { AvatarGroupContext, useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContext';\nimport { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport type { AvatarGroupItemProps, AvatarGroupItemState } from './AvatarGroupItem.types';\n\n/**\n * Create the state required to render AvatarGroupItem.\n *\n * The returned state can be modified with hooks such as useAvatarGroupItemStyles_unstable,\n * before being passed to renderAvatarGroupItem_unstable.\n *\n * @param props - props from this instance of AvatarGroupItem\n * @param ref - reference to root HTMLElement of AvatarGroupItem\n */\nexport const useAvatarGroupItem_unstable = (\n  props: AvatarGroupItemProps,\n  ref: React.Ref<HTMLElement>,\n): AvatarGroupItemState => {\n  const groupIsOverflow = useAvatarGroupContext_unstable(ctx => ctx.isOverflow);\n  const groupSize = useAvatarGroupContext_unstable(ctx => ctx.size);\n  const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);\n  // Since the primary slot is not an intrinsic element, getPartitionedNativeProps cannot be used here.\n  const { style, className, ...avatarSlotProps } = props;\n  const size = groupSize ?? defaultAvatarGroupSize;\n  const hasAvatarGroupContext = useHasParentContext(AvatarGroupContext);\n\n  if (process.env.NODE_ENV !== 'production' && !hasAvatarGroupContext) {\n    // eslint-disable-next-line no-console\n    console.warn('AvatarGroupItem must only be used inside an AvatarGroup component.');\n  }\n\n  return {\n    isOverflowItem: groupIsOverflow,\n    layout,\n    size,\n    components: {\n      root: groupIsOverflow ? 'li' : 'div',\n      avatar: Avatar,\n      overflowLabel: 'span',\n    },\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: {\n        style,\n        className,\n      },\n    }),\n    avatar: resolveShorthand(props.avatar, {\n      required: true,\n      defaultProps: {\n        ref,\n        size,\n        color: 'colorful',\n        ...avatarSlotProps,\n      },\n    }),\n    overflowLabel: resolveShorthand(props.overflowLabel, {\n      required: true,\n      defaultProps: {\n        // Avatar already has its aria-label set to the name, this will prevent the name to be read twice.\n        'aria-hidden': true,\n        children: props.name,\n      },\n    }),\n  };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,MAAM,QAAQ;AACvB,SAASC,kBAAkB,EAAEC,8BAA8B,QAAQ;AACnE,SAASC,sBAAsB,QAAQ;AACvC,SAASC,gBAAgB,QAAQ;AACjC,SAASC,mBAAmB,QAAQ;AAGpC;;;;;;;;;AASA,OAAO,MAAMC,2BAAA,GAA8BA,CACzCC,KAAA,EACAC,GAAA,KACyB;EACzB,MAAMC,eAAA,GAAkBP,8BAAA,CAA+BQ,GAAA,IAAOA,GAAA,CAAIC,UAAU;EAC5E,MAAMC,SAAA,GAAYV,8BAAA,CAA+BQ,GAAA,IAAOA,GAAA,CAAIG,IAAI;EAChE,MAAMC,MAAA,GAASZ,8BAAA,CAA+BQ,GAAA,IAAOA,GAAA,CAAII,MAAM;EAC/D;EACA,MAAM;IAAEC,KAAA;IAAOC,SAAA;IAAW,GAAGC;EAAA,CAAiB,GAAGV,KAAA;EACjD,MAAMM,IAAA,GAAOD,SAAA,aAAAA,SAAA,cAAAA,SAAA,GAAaT,sBAAsB;EAChD,MAAMe,qBAAA,GAAwBb,mBAAA,CAAoBJ,kBAAA;EAElD,IAAIkB,OAAA,CAAQC,GAAG,CAACC,QAAQ,KAAK,gBAAgB,CAACH,qBAAA,EAAuB;IACnE;IACAI,OAAA,CAAQC,IAAI,CAAC;EACf;EAEA,OAAO;IACLC,cAAA,EAAgBf,eAAA;IAChBK,MAAA;IACAD,IAAA;IACAY,UAAA,EAAY;MACVC,IAAA,EAAMjB,eAAA,GAAkB,OAAO,KAAK;MACpCkB,MAAA,EAAQ3B,MAAA;MACR4B,aAAA,EAAe;IACjB;IACAF,IAAA,EAAMtB,gBAAA,CAAiBG,KAAA,CAAMmB,IAAI,EAAE;MACjCG,QAAA,EAAU,IAAI;MACdC,YAAA,EAAc;QACZf,KAAA;QACAC;MACF;IACF;IACAW,MAAA,EAAQvB,gBAAA,CAAiBG,KAAA,CAAMoB,MAAM,EAAE;MACrCE,QAAA,EAAU,IAAI;MACdC,YAAA,EAAc;QACZtB,GAAA;QACAK,IAAA;QACAkB,KAAA,EAAO;QACP,GAAGd;MACL;IACF;IACAW,aAAA,EAAexB,gBAAA,CAAiBG,KAAA,CAAMqB,aAAa,EAAE;MACnDC,QAAA,EAAU,IAAI;MACdC,YAAA,EAAc;QACZ;QACA,eAAe,IAAI;QACnBE,QAAA,EAAUzB,KAAA,CAAM0B;MAClB;IACF;EACF;AACF"}
+{"version":3,"sources":["useAvatarGroupItem.ts"],"sourcesContent":["import * as React from 'react';\nimport { Avatar } from '../Avatar/Avatar';\nimport { AvatarGroupContext, useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContext';\nimport { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport type { AvatarGroupItemProps, AvatarGroupItemState } from './AvatarGroupItem.types';\n\n/**\n * Create the state required to render AvatarGroupItem.\n *\n * The returned state can be modified with hooks such as useAvatarGroupItemStyles_unstable,\n * before being passed to renderAvatarGroupItem_unstable.\n *\n * @param props - props from this instance of AvatarGroupItem\n * @param ref - reference to root HTMLElement of AvatarGroupItem\n */\nexport const useAvatarGroupItem_unstable = (\n  props: AvatarGroupItemProps,\n  ref: React.Ref<HTMLElement>,\n): AvatarGroupItemState => {\n  const groupIsOverflow = useAvatarGroupContext_unstable(ctx => ctx.isOverflow);\n  const groupSize = useAvatarGroupContext_unstable(ctx => ctx.size);\n  const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);\n  // Since the primary slot is not an intrinsic element, getPartitionedNativeProps cannot be used here.\n  const { style, className, ...avatarSlotProps } = props;\n  const size = groupSize ?? defaultAvatarGroupSize;\n  const hasAvatarGroupContext = useHasParentContext(AvatarGroupContext);\n\n  if (process.env.NODE_ENV !== 'production' && !hasAvatarGroupContext) {\n    // eslint-disable-next-line no-console\n    console.warn('AvatarGroupItem must only be used inside an AvatarGroup component.');\n  }\n\n  return {\n    isOverflowItem: groupIsOverflow,\n    layout,\n    size,\n    components: {\n      root: groupIsOverflow ? 'li' : 'div',\n      avatar: Avatar,\n      overflowLabel: 'span',\n    },\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: {\n        style,\n        className,\n      },\n    }),\n    avatar: resolveShorthand(props.avatar, {\n      required: true,\n      defaultProps: {\n        ref,\n        size,\n        color: 'colorful',\n        ...avatarSlotProps,\n      },\n    }),\n    overflowLabel: resolveShorthand(props.overflowLabel, {\n      required: true,\n      defaultProps: {\n        // Avatar already has its aria-label set to the name, this will prevent the name to be read twice.\n        'aria-hidden': true,\n        children: props.name,\n      },\n    }),\n  };\n};\n"],"names":["React","Avatar","AvatarGroupContext","useAvatarGroupContext_unstable","defaultAvatarGroupSize","resolveShorthand","useHasParentContext","useAvatarGroupItem_unstable","props","ref","groupIsOverflow","ctx","isOverflow","groupSize","size","layout","style","className","avatarSlotProps","hasAvatarGroupContext","process","env","NODE_ENV","console","warn","isOverflowItem","components","root","avatar","overflowLabel","required","defaultProps","color","children","name"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,kBAAkB,EAAEC,8BAA8B,QAAQ,oCAAoC;AACvG,SAASC,sBAAsB,QAAQ,gCAAgC;AACvE,SAASC,gBAAgB,QAAQ,4BAA4B;AAC7D,SAASC,mBAAmB,QAAQ,mCAAmC;AAGvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC,MACyB;IACzB,MAAMC,kBAAkBP,+BAA+BQ,CAAAA,MAAOA,IAAIC,UAAU;IAC5E,MAAMC,YAAYV,+BAA+BQ,CAAAA,MAAOA,IAAIG,IAAI;IAChE,MAAMC,SAASZ,+BAA+BQ,CAAAA,MAAOA,IAAII,MAAM;IAC/D,qGAAqG;IACrG,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGC,iBAAiB,GAAGV;IACjD,MAAMM,OAAOD,sBAAAA,uBAAAA,YAAaT,sBAAsB;IAChD,MAAMe,wBAAwBb,oBAAoBJ;IAElD,IAAIkB,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBAAgB,CAACH,uBAAuB;QACnE,sCAAsC;QACtCI,QAAQC,IAAI,CAAC;IACf,CAAC;IAED,OAAO;QACLC,gBAAgBf;QAChBK;QACAD;QACAY,YAAY;YACVC,MAAMjB,kBAAkB,OAAO,KAAK;YACpCkB,QAAQ3B;YACR4B,eAAe;QACjB;QACAF,MAAMtB,iBAAiBG,MAAMmB,IAAI,EAAE;YACjCG,UAAU,IAAI;YACdC,cAAc;gBACZf;gBACAC;YACF;QACF;QACAW,QAAQvB,iBAAiBG,MAAMoB,MAAM,EAAE;YACrCE,UAAU,IAAI;YACdC,cAAc;gBACZtB;gBACAK;gBACAkB,OAAO;gBACP,GAAGd,eAAe;YACpB;QACF;QACAW,eAAexB,iBAAiBG,MAAMqB,aAAa,EAAE;YACnDC,UAAU,IAAI;YACdC,cAAc;gBACZ,kGAAkG;gBAClG,eAAe,IAAI;gBACnBE,UAAUzB,MAAM0B,IAAI;YACtB;QACF;IACF;AACF,EAAE"}

package/lib/components/AvatarGroupItem/useAvatarGroupItemStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","useSizeStyles","useFluent_unstable","useFluent","avatarGroupItemClassNames","root","avatar","overflowLabel","avatarGroupItemDividerWidthVar","useRootStyles","base","Bt984gj","mc9l5x","Bnnss6s","qhf8xq","overflowItem","z8tnut","z189sj","Byoj8tv","uwmqm3","nonOverflowItem","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","d","useAvatarStyles","pie","useOverflowLabelStyles","Frg6f3","sj55zd","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","useStackStyles","thick","E5pizo","thicker","thickest","xxs","jhia2w","xs","s","l","useSpreadStyles","mNudge","m","xl","usePieStyles","slices","B3gf25r","Be2twx7","Bvaow4n","Gpecfs","bhabj1","B7rc6i7","Bwrfys5","Bwuzm9m","fflka","do7bja","Be8zqhl","Bij0kh0","Bwexnyt","Bhe5x6o","B3kv7bh","rtlSlices","uiicq7","useAvatarGroupItemStyles_unstable","state","isOverflowItem","layout","size","dir","avatarStyles","overflowLabelStyles","pieStyles","rootStyles","sizeStyles","groupChildClassName","useGroupChildClassName","rootClasses","push","className","stackStyles","spreadStyles","layoutClasses"],"sources":["../../../src/components/AvatarGroupItem/useAvatarGroupItemStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../../Avatar';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { AvatarGroupItemSlots, AvatarGroupItemState } from './AvatarGroupItem.types';\nimport type { AvatarGroupProps } from '../../AvatarGroup';\nimport type { AvatarSize } from '../../Avatar';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarGroupItemClassNames: SlotClassNames<AvatarGroupItemSlots> = {\n  root: 'fui-AvatarGroupItem',\n  avatar: 'fui-AvatarGroupItem__avatar',\n  overflowLabel: 'fui-AvatarGroupItem__overflowLabel',\n};\n\nconst avatarGroupItemDividerWidthVar = '--fuiAvatarGroupItem__divider--width';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  base: {\n    alignItems: 'center',\n    display: 'inline-flex',\n    flexShrink: 0,\n    position: 'relative',\n  },\n  overflowItem: {\n    ...shorthands.padding(tokens.spacingVerticalXS, tokens.spacingHorizontalXS),\n  },\n  nonOverflowItem: {\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n  },\n});\n\n/**\n * Styles for the avatar slot\n */\nconst useAvatarStyles = makeStyles({\n  nonOverflowItem: {\n    position: 'absolute',\n  },\n  pie: {\n    ...shorthands.borderRadius(0),\n  },\n});\n\n/**\n * Styles for the label slot\n */\nconst useOverflowLabelStyles = makeStyles({\n  base: {\n    marginLeft: tokens.spacingHorizontalS,\n    color: tokens.colorNeutralForeground1,\n    ...typographyStyles.body1,\n  },\n});\n\n/**\n * Styles for the stack layout\n */\nconst useStackStyles = makeStyles({\n  thick: {\n    boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralBackground2}`,\n  },\n  thicker: {\n    boxShadow: `0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorNeutralBackground2}`,\n  },\n  thickest: {\n    boxShadow: `0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorNeutralBackground2}`,\n  },\n  xxs: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalXXS})` } },\n  xs: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalXS})` } },\n  s: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalS})` } },\n  l: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalL})` } },\n});\n\n/**\n * Styles for the spread layout\n */\nconst useSpreadStyles = makeStyles({\n  s: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalS } },\n  mNudge: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalMNudge } },\n  m: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalM } },\n  l: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalL } },\n  xl: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalXL } },\n});\n\n/**\n * Styles for the pie layout\n */\nconst usePieStyles = makeStyles({\n  base: {\n    position: 'absolute',\n  },\n  slices: {\n    // Two slices\n    // 1st of 2 items\n    '&:nth-of-type(1):nth-last-of-type(2)': {\n      clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n      left: '-25%',\n    },\n    // 2nd of 2 items\n    '&:nth-of-type(2):nth-last-of-type(1)': {\n      clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n      left: '25%',\n    },\n\n    // Three slices\n    // 1st of 3 items\n    '&:nth-of-type(1):nth-last-of-type(3)': {\n      clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n      left: '-25%',\n    },\n    // 2nd of 3 items\n    '&:nth-of-type(2):nth-last-of-type(2)': {\n      // Since the two AvatarGroupItems on the right are scaled by 0.5, the divider width should not be halved.\n      clipPath: `inset(0 0 var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}))`,\n      left: '50%',\n      transform: 'scale(0.5)',\n      transformOrigin: '0 0',\n    },\n    // 3rd of 3 items\n    '&:nth-of-type(3):nth-last-of-type(1)': {\n      clipPath: `inset(var(${avatarGroupItemDividerWidthVar}) 0 0 var(${avatarGroupItemDividerWidthVar}))`,\n      left: '50%',\n      top: '50%',\n      transform: 'scale(0.5)',\n      transformOrigin: '0 0',\n    },\n  },\n  rtlSlices: {\n    // Two slices\n    // 1st of 2 items\n    '&:nth-of-type(1):nth-last-of-type(2)': {\n      clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n    },\n    // 2nd of 2 items\n    '&:nth-of-type(2):nth-last-of-type(1)': {\n      clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n    },\n\n    // Three slices\n    // 1st of 3 items\n    '&:nth-of-type(1):nth-last-of-type(3)': {\n      clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n    },\n    // 2nd of 3 items\n    '&:nth-of-type(2):nth-last-of-type(2)': {\n      clipPath: `inset(0 var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}) 0)`,\n      left: '0',\n    },\n    // 3rd of 3 items\n    '&:nth-of-type(3):nth-last-of-type(1)': {\n      clipPath: `inset(var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}) 0 0)`,\n      left: '0',\n    },\n  },\n  thick: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThick },\n  thicker: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThicker },\n  thickest: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThickest },\n});\n\n/**\n * Apply styling to the AvatarGroupItem slots based on the state\n */\nexport const useAvatarGroupItemStyles_unstable = (state: AvatarGroupItemState): AvatarGroupItemState => {\n  const { isOverflowItem, layout, size } = state;\n  const { dir } = useFluent();\n\n  const avatarStyles = useAvatarStyles();\n  const overflowLabelStyles = useOverflowLabelStyles();\n  const pieStyles = usePieStyles();\n  const rootStyles = useRootStyles();\n  const sizeStyles = useSizeStyles();\n\n  const groupChildClassName = useGroupChildClassName(layout, size);\n\n  const rootClasses = [rootStyles.base];\n\n  if (!isOverflowItem) {\n    rootClasses.push(rootStyles.nonOverflowItem);\n    rootClasses.push(groupChildClassName);\n    rootClasses.push(sizeStyles[size]);\n\n    if (layout === 'pie') {\n      rootClasses.push(pieStyles.base);\n\n      if (size < 56) {\n        rootClasses.push(pieStyles.thick);\n      } else if (size < 72) {\n        rootClasses.push(pieStyles.thicker);\n      } else {\n        rootClasses.push(pieStyles.thickest);\n      }\n\n      rootClasses.push(pieStyles.slices);\n\n      if (dir === 'rtl') {\n        rootClasses.push(pieStyles.rtlSlices);\n      }\n    }\n  } else {\n    rootClasses.push(rootStyles.overflowItem);\n  }\n\n  state.root.className = mergeClasses(avatarGroupItemClassNames.root, ...rootClasses, state.root.className);\n\n  state.avatar.className = mergeClasses(\n    avatarGroupItemClassNames.avatar,\n    !isOverflowItem && avatarStyles.nonOverflowItem,\n    layout === 'pie' && avatarStyles.pie,\n    state.avatar.className,\n  );\n\n  if (state.overflowLabel) {\n    state.overflowLabel.className = mergeClasses(\n      avatarGroupItemClassNames.overflowLabel,\n      overflowLabelStyles.base,\n      state.overflowLabel.className,\n    );\n  }\n\n  return state;\n};\n\n/**\n * Hook for getting the className for the children of AvatarGroup. This hook will provide the spacing and outlines\n * needed for each layout.\n */\nexport const useGroupChildClassName = (layout: AvatarGroupProps['layout'], size: AvatarSize): string => {\n  const stackStyles = useStackStyles();\n  const spreadStyles = useSpreadStyles();\n  const layoutClasses = [];\n\n  if (size) {\n    if (layout === 'stack') {\n      if (size < 56) {\n        layoutClasses.push(stackStyles.thick);\n      } else if (size < 72) {\n        layoutClasses.push(stackStyles.thicker);\n      } else {\n        layoutClasses.push(stackStyles.thickest);\n      }\n\n      if (size < 24) {\n        layoutClasses.push(stackStyles.xxs);\n      } else if (size < 48) {\n        layoutClasses.push(stackStyles.xs);\n      } else if (size < 96) {\n        layoutClasses.push(stackStyles.s);\n      } else {\n        layoutClasses.push(stackStyles.l);\n      }\n    } else if (layout === 'spread') {\n      if (size < 20) {\n        layoutClasses.push(spreadStyles.s);\n      } else if (size < 32) {\n        layoutClasses.push(spreadStyles.mNudge);\n      } else if (size < 64) {\n        layoutClasses.push(spreadStyles.l);\n      } else {\n        layoutClasses.push(spreadStyles.xl);\n      }\n    }\n  }\n\n  return mergeClasses(...layoutClasses);\n};\n"],"mappings":"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"}
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","useSizeStyles","useFluent_unstable","useFluent","avatarGroupItemClassNames","root","avatar","overflowLabel","avatarGroupItemDividerWidthVar","useRootStyles","base","Bt984gj","mc9l5x","Bnnss6s","qhf8xq","overflowItem","z8tnut","z189sj","Byoj8tv","uwmqm3","nonOverflowItem","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","d","useAvatarStyles","pie","useOverflowLabelStyles","Frg6f3","sj55zd","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","useStackStyles","thick","E5pizo","thicker","thickest","xxs","jhia2w","xs","s","l","useSpreadStyles","mNudge","m","xl","usePieStyles","slices","B3gf25r","Be2twx7","Bvaow4n","Gpecfs","bhabj1","B7rc6i7","Bwrfys5","Bwuzm9m","fflka","do7bja","Be8zqhl","Bij0kh0","Bwexnyt","Bhe5x6o","B3kv7bh","rtlSlices","uiicq7","useAvatarGroupItemStyles_unstable","state","isOverflowItem","layout","size","dir","avatarStyles","overflowLabelStyles","pieStyles","rootStyles","sizeStyles","groupChildClassName","useGroupChildClassName","rootClasses","push","className","stackStyles","spreadStyles","layoutClasses"],"sources":["useAvatarGroupItemStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../../Avatar';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nexport const avatarGroupItemClassNames = {\n    root: 'fui-AvatarGroupItem',\n    avatar: 'fui-AvatarGroupItem__avatar',\n    overflowLabel: 'fui-AvatarGroupItem__overflowLabel'\n};\nconst avatarGroupItemDividerWidthVar = '--fuiAvatarGroupItem__divider--width';\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n    base: {\n        alignItems: 'center',\n        display: 'inline-flex',\n        flexShrink: 0,\n        position: 'relative'\n    },\n    overflowItem: {\n        ...shorthands.padding(tokens.spacingVerticalXS, tokens.spacingHorizontalXS)\n    },\n    nonOverflowItem: {\n        ...shorthands.borderRadius(tokens.borderRadiusCircular)\n    }\n});\n/**\n * Styles for the avatar slot\n */ const useAvatarStyles = makeStyles({\n    nonOverflowItem: {\n        position: 'absolute'\n    },\n    pie: {\n        ...shorthands.borderRadius(0)\n    }\n});\n/**\n * Styles for the label slot\n */ const useOverflowLabelStyles = makeStyles({\n    base: {\n        marginLeft: tokens.spacingHorizontalS,\n        color: tokens.colorNeutralForeground1,\n        ...typographyStyles.body1\n    }\n});\n/**\n * Styles for the stack layout\n */ const useStackStyles = makeStyles({\n    thick: {\n        boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralBackground2}`\n    },\n    thicker: {\n        boxShadow: `0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorNeutralBackground2}`\n    },\n    thickest: {\n        boxShadow: `0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorNeutralBackground2}`\n    },\n    xxs: {\n        '&:not(:first-child)': {\n            marginLeft: `calc(-1 * ${tokens.spacingHorizontalXXS})`\n        }\n    },\n    xs: {\n        '&:not(:first-child)': {\n            marginLeft: `calc(-1 * ${tokens.spacingHorizontalXS})`\n        }\n    },\n    s: {\n        '&:not(:first-child)': {\n            marginLeft: `calc(-1 * ${tokens.spacingHorizontalS})`\n        }\n    },\n    l: {\n        '&:not(:first-child)': {\n            marginLeft: `calc(-1 * ${tokens.spacingHorizontalL})`\n        }\n    }\n});\n/**\n * Styles for the spread layout\n */ const useSpreadStyles = makeStyles({\n    s: {\n        '&:not(:first-child)': {\n            marginLeft: tokens.spacingHorizontalS\n        }\n    },\n    mNudge: {\n        '&:not(:first-child)': {\n            marginLeft: tokens.spacingHorizontalMNudge\n        }\n    },\n    m: {\n        '&:not(:first-child)': {\n            marginLeft: tokens.spacingHorizontalM\n        }\n    },\n    l: {\n        '&:not(:first-child)': {\n            marginLeft: tokens.spacingHorizontalL\n        }\n    },\n    xl: {\n        '&:not(:first-child)': {\n            marginLeft: tokens.spacingHorizontalXL\n        }\n    }\n});\n/**\n * Styles for the pie layout\n */ const usePieStyles = makeStyles({\n    base: {\n        position: 'absolute'\n    },\n    slices: {\n        // Two slices\n        // 1st of 2 items\n        '&:nth-of-type(1):nth-last-of-type(2)': {\n            clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n            left: '-25%'\n        },\n        // 2nd of 2 items\n        '&:nth-of-type(2):nth-last-of-type(1)': {\n            clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n            left: '25%'\n        },\n        // Three slices\n        // 1st of 3 items\n        '&:nth-of-type(1):nth-last-of-type(3)': {\n            clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n            left: '-25%'\n        },\n        // 2nd of 3 items\n        '&:nth-of-type(2):nth-last-of-type(2)': {\n            // Since the two AvatarGroupItems on the right are scaled by 0.5, the divider width should not be halved.\n            clipPath: `inset(0 0 var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}))`,\n            left: '50%',\n            transform: 'scale(0.5)',\n            transformOrigin: '0 0'\n        },\n        // 3rd of 3 items\n        '&:nth-of-type(3):nth-last-of-type(1)': {\n            clipPath: `inset(var(${avatarGroupItemDividerWidthVar}) 0 0 var(${avatarGroupItemDividerWidthVar}))`,\n            left: '50%',\n            top: '50%',\n            transform: 'scale(0.5)',\n            transformOrigin: '0 0'\n        }\n    },\n    rtlSlices: {\n        // Two slices\n        // 1st of 2 items\n        '&:nth-of-type(1):nth-last-of-type(2)': {\n            clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`\n        },\n        // 2nd of 2 items\n        '&:nth-of-type(2):nth-last-of-type(1)': {\n            clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`\n        },\n        // Three slices\n        // 1st of 3 items\n        '&:nth-of-type(1):nth-last-of-type(3)': {\n            clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`\n        },\n        // 2nd of 3 items\n        '&:nth-of-type(2):nth-last-of-type(2)': {\n            clipPath: `inset(0 var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}) 0)`,\n            left: '0'\n        },\n        // 3rd of 3 items\n        '&:nth-of-type(3):nth-last-of-type(1)': {\n            clipPath: `inset(var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}) 0 0)`,\n            left: '0'\n        }\n    },\n    thick: {\n        [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThick\n    },\n    thicker: {\n        [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThicker\n    },\n    thickest: {\n        [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThickest\n    }\n});\n/**\n * Apply styling to the AvatarGroupItem slots based on the state\n */ export const useAvatarGroupItemStyles_unstable = (state)=>{\n    const { isOverflowItem , layout , size  } = state;\n    const { dir  } = useFluent();\n    const avatarStyles = useAvatarStyles();\n    const overflowLabelStyles = useOverflowLabelStyles();\n    const pieStyles = usePieStyles();\n    const rootStyles = useRootStyles();\n    const sizeStyles = useSizeStyles();\n    const groupChildClassName = useGroupChildClassName(layout, size);\n    const rootClasses = [\n        rootStyles.base\n    ];\n    if (!isOverflowItem) {\n        rootClasses.push(rootStyles.nonOverflowItem);\n        rootClasses.push(groupChildClassName);\n        rootClasses.push(sizeStyles[size]);\n        if (layout === 'pie') {\n            rootClasses.push(pieStyles.base);\n            if (size < 56) {\n                rootClasses.push(pieStyles.thick);\n            } else if (size < 72) {\n                rootClasses.push(pieStyles.thicker);\n            } else {\n                rootClasses.push(pieStyles.thickest);\n            }\n            rootClasses.push(pieStyles.slices);\n            if (dir === 'rtl') {\n                rootClasses.push(pieStyles.rtlSlices);\n            }\n        }\n    } else {\n        rootClasses.push(rootStyles.overflowItem);\n    }\n    state.root.className = mergeClasses(avatarGroupItemClassNames.root, ...rootClasses, state.root.className);\n    state.avatar.className = mergeClasses(avatarGroupItemClassNames.avatar, !isOverflowItem && avatarStyles.nonOverflowItem, layout === 'pie' && avatarStyles.pie, state.avatar.className);\n    if (state.overflowLabel) {\n        state.overflowLabel.className = mergeClasses(avatarGroupItemClassNames.overflowLabel, overflowLabelStyles.base, state.overflowLabel.className);\n    }\n    return state;\n};\n/**\n * Hook for getting the className for the children of AvatarGroup. This hook will provide the spacing and outlines\n * needed for each layout.\n */ export const useGroupChildClassName = (layout, size)=>{\n    const stackStyles = useStackStyles();\n    const spreadStyles = useSpreadStyles();\n    const layoutClasses = [];\n    if (size) {\n        if (layout === 'stack') {\n            if (size < 56) {\n                layoutClasses.push(stackStyles.thick);\n            } else if (size < 72) {\n                layoutClasses.push(stackStyles.thicker);\n            } else {\n                layoutClasses.push(stackStyles.thickest);\n            }\n            if (size < 24) {\n                layoutClasses.push(stackStyles.xxs);\n            } else if (size < 48) {\n                layoutClasses.push(stackStyles.xs);\n            } else if (size < 96) {\n                layoutClasses.push(stackStyles.s);\n            } else {\n                layoutClasses.push(stackStyles.l);\n            }\n        } else if (layout === 'spread') {\n            if (size < 20) {\n                layoutClasses.push(spreadStyles.s);\n            } else if (size < 32) {\n                layoutClasses.push(spreadStyles.mNudge);\n            } else if (size < 64) {\n                layoutClasses.push(spreadStyles.l);\n            } else {\n                layoutClasses.push(spreadStyles.xl);\n            }\n        }\n    }\n    return mergeClasses(...layoutClasses);\n};\n"],"mappings":"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"}

package/lib/components/AvatarGroupPopover/AvatarGroupPopover.js

@@ -6,13 +6,11 @@ import { useAvatarGroupPopover_unstable } from './useAvatarGroupPopover';
 import { useAvatarGroupPopoverStyles_unstable } from './useAvatarGroupPopoverStyles.styles';
 /**
  * The AvatarGroupPopover component provides a button with a Popover containing the children provided.
- */
-export const AvatarGroupPopover = props => {
-  const state = useAvatarGroupPopover_unstable(props);
-  const contextValues = useAvatarGroupPopoverContextValues(state);
-  useAvatarGroupPopoverStyles_unstable(state);
-  useCustomStyleHook_unstable('useAvatarGroupPopoverStyles_unstable')(state);
-  return renderAvatarGroupPopover_unstable(state, contextValues);
+ */ export const AvatarGroupPopover = (props)=>{
+    const state = useAvatarGroupPopover_unstable(props);
+    const contextValues = useAvatarGroupPopoverContextValues(state);
+    useAvatarGroupPopoverStyles_unstable(state);
+    useCustomStyleHook_unstable('useAvatarGroupPopoverStyles_unstable')(state);
+    return renderAvatarGroupPopover_unstable(state, contextValues);
 };
 AvatarGroupPopover.displayName = 'AvatarGroupPopover';
-//# sourceMappingURL=AvatarGroupPopover.js.map

package/lib/components/AvatarGroupPopover/AvatarGroupPopover.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","renderAvatarGroupPopover_unstable","useAvatarGroupPopoverContextValues","useCustomStyleHook_unstable","useAvatarGroupPopover_unstable","useAvatarGroupPopoverStyles_unstable","AvatarGroupPopover","props","state","contextValues","displayName"],"sources":["../../../src/components/AvatarGroupPopover/AvatarGroupPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderAvatarGroupPopover_unstable } from './renderAvatarGroupPopover';\nimport { useAvatarGroupPopoverContextValues } from './useAvatarGroupPopoverContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useAvatarGroupPopover_unstable } from './useAvatarGroupPopover';\nimport { useAvatarGroupPopoverStyles_unstable } from './useAvatarGroupPopoverStyles.styles';\nimport type { AvatarGroupPopoverProps } from './AvatarGroupPopover.types';\n\n/**\n * The AvatarGroupPopover component provides a button with a Popover containing the children provided.\n */\nexport const AvatarGroupPopover: React.FC<AvatarGroupPopoverProps> = props => {\n  const state = useAvatarGroupPopover_unstable(props);\n  const contextValues = useAvatarGroupPopoverContextValues(state);\n\n  useAvatarGroupPopoverStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useAvatarGroupPopoverStyles_unstable')(state);\n\n  return renderAvatarGroupPopover_unstable(state, contextValues);\n};\n\nAvatarGroupPopover.displayName = 'AvatarGroupPopover';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,iCAAiC,QAAQ;AAClD,SAASC,kCAAkC,QAAQ;AACnD,SAASC,2BAA2B,QAAQ;AAC5C,SAASC,8BAA8B,QAAQ;AAC/C,SAASC,oCAAoC,QAAQ;AAGrD;;;AAGA,OAAO,MAAMC,kBAAA,GAAwDC,KAAA,IAAS;EAC5E,MAAMC,KAAA,GAAQJ,8BAAA,CAA+BG,KAAA;EAC7C,MAAME,aAAA,GAAgBP,kCAAA,CAAmCM,KAAA;EAEzDH,oCAAA,CAAqCG,KAAA;EAErCL,2BAAA,CAA4B,wCAAwCK,KAAA;EAEpE,OAAOP,iCAAA,CAAkCO,KAAA,EAAOC,aAAA;AAClD;AAEAH,kBAAA,CAAmBI,WAAW,GAAG"}
+{"version":3,"sources":["AvatarGroupPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderAvatarGroupPopover_unstable } from './renderAvatarGroupPopover';\nimport { useAvatarGroupPopoverContextValues } from './useAvatarGroupPopoverContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useAvatarGroupPopover_unstable } from './useAvatarGroupPopover';\nimport { useAvatarGroupPopoverStyles_unstable } from './useAvatarGroupPopoverStyles.styles';\nimport type { AvatarGroupPopoverProps } from './AvatarGroupPopover.types';\n\n/**\n * The AvatarGroupPopover component provides a button with a Popover containing the children provided.\n */\nexport const AvatarGroupPopover: React.FC<AvatarGroupPopoverProps> = props => {\n  const state = useAvatarGroupPopover_unstable(props);\n  const contextValues = useAvatarGroupPopoverContextValues(state);\n\n  useAvatarGroupPopoverStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useAvatarGroupPopoverStyles_unstable')(state);\n\n  return renderAvatarGroupPopover_unstable(state, contextValues);\n};\n\nAvatarGroupPopover.displayName = 'AvatarGroupPopover';\n"],"names":["React","renderAvatarGroupPopover_unstable","useAvatarGroupPopoverContextValues","useCustomStyleHook_unstable","useAvatarGroupPopover_unstable","useAvatarGroupPopoverStyles_unstable","AvatarGroupPopover","props","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iCAAiC,QAAQ,6BAA6B;AAC/E,SAASC,kCAAkC,QAAQ,uCAAuC;AAC1F,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,oCAAoC,QAAQ,uCAAuC;AAG5F;;CAEC,GACD,OAAO,MAAMC,qBAAwDC,CAAAA,QAAS;IAC5E,MAAMC,QAAQJ,+BAA+BG;IAC7C,MAAME,gBAAgBP,mCAAmCM;IAEzDH,qCAAqCG;IAErCL,4BAA4B,wCAAwCK;IAEpE,OAAOP,kCAAkCO,OAAOC;AAClD,EAAE;AAEFH,mBAAmBI,WAAW,GAAG"}

package/lib/components/AvatarGroupPopover/AvatarGroupPopover.types.js

@@ -1,2 +1 @@
 import * as React from 'react';
-//# sourceMappingURL=AvatarGroupPopover.types.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React"],"sources":["../../../src/components/AvatarGroupPopover/AvatarGroupPopover.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AvatarSize } from '../Avatar/Avatar.types';\nimport type { AvatarGroupProps } from '../AvatarGroup/AvatarGroup.types';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PopoverProps, PopoverSurface } from '@fluentui/react-popover';\nimport type { TooltipProps } from '@fluentui/react-tooltip';\n\nexport type AvatarGroupPopoverSlots = {\n  root: NonNullable<Slot<PopoverProps>>;\n\n  /**\n   * Button that triggers the Popover.\n   */\n  triggerButton: NonNullable<Slot<'button'>>;\n\n  /**\n   * List that contains the overflowed AvatarGroupItems.\n   */\n  content: NonNullable<Slot<'ul'>>;\n\n  /**\n   * PopoverSurface that contains the content.\n   */\n  popoverSurface: NonNullable<Slot<typeof PopoverSurface>>;\n\n  /**\n   * Tooltip shown when triggerButton is hovered.\n   */\n  tooltip: NonNullable<Slot<TooltipProps>>;\n};\n\n/**\n * AvatarGroupPopover Props\n */\nexport type AvatarGroupPopoverProps = Omit<ComponentProps<Partial<AvatarGroupPopoverSlots>>, 'children'> & {\n  /**\n   * Whether the triggerButton should render an icon instead of the number of overflowed AvatarGroupItems.\n   * Note: The indicator will default to `icon` when the size is less than 24.\n   * @default count\n   */\n  indicator?: 'count' | 'icon';\n\n  /**\n   * Number of AvatarGroupItems that will be rendered.\n   *\n   * Note: AvatarGroupPopover handles counting the number of children, but when using a react fragment to wrap the\n   * children, this is not possible and therefore it has do be added manually.\n   */\n  count?: number;\n\n  children: React.ReactNode;\n};\n\n/**\n * State used in rendering AvatarGroupPopover\n */\nexport type AvatarGroupPopoverState = ComponentState<AvatarGroupPopoverSlots> &\n  Required<Pick<AvatarGroupPopoverProps, 'count' | 'indicator'>> & {\n    popoverOpen: boolean;\n    layout: AvatarGroupProps['layout'];\n    size: AvatarSize;\n  };\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW"}
+{"version":3,"sources":["AvatarGroupPopover.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AvatarSize } from '../Avatar/Avatar.types';\nimport type { AvatarGroupProps } from '../AvatarGroup/AvatarGroup.types';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PopoverProps, PopoverSurface } from '@fluentui/react-popover';\nimport type { TooltipProps } from '@fluentui/react-tooltip';\n\nexport type AvatarGroupPopoverSlots = {\n  root: NonNullable<Slot<PopoverProps>>;\n\n  /**\n   * Button that triggers the Popover.\n   */\n  triggerButton: NonNullable<Slot<'button'>>;\n\n  /**\n   * List that contains the overflowed AvatarGroupItems.\n   */\n  content: NonNullable<Slot<'ul'>>;\n\n  /**\n   * PopoverSurface that contains the content.\n   */\n  popoverSurface: NonNullable<Slot<typeof PopoverSurface>>;\n\n  /**\n   * Tooltip shown when triggerButton is hovered.\n   */\n  tooltip: NonNullable<Slot<TooltipProps>>;\n};\n\n/**\n * AvatarGroupPopover Props\n */\nexport type AvatarGroupPopoverProps = Omit<ComponentProps<Partial<AvatarGroupPopoverSlots>>, 'children'> & {\n  /**\n   * Whether the triggerButton should render an icon instead of the number of overflowed AvatarGroupItems.\n   * Note: The indicator will default to `icon` when the size is less than 24.\n   * @default count\n   */\n  indicator?: 'count' | 'icon';\n\n  /**\n   * Number of AvatarGroupItems that will be rendered.\n   *\n   * Note: AvatarGroupPopover handles counting the number of children, but when using a react fragment to wrap the\n   * children, this is not possible and therefore it has do be added manually.\n   */\n  count?: number;\n\n  children: React.ReactNode;\n};\n\n/**\n * State used in rendering AvatarGroupPopover\n */\nexport type AvatarGroupPopoverState = ComponentState<AvatarGroupPopoverSlots> &\n  Required<Pick<AvatarGroupPopoverProps, 'count' | 'indicator'>> & {\n    popoverOpen: boolean;\n    layout: AvatarGroupProps['layout'];\n    size: AvatarSize;\n  };\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/components/AvatarGroupPopover/index.js

@@ -3,4 +3,3 @@ export * from './AvatarGroupPopover.types';
 export * from './renderAvatarGroupPopover';
 export * from './useAvatarGroupPopover';
 export * from './useAvatarGroupPopoverStyles.styles';
-//# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/AvatarGroupPopover/index.ts"],"sourcesContent":["export * from './AvatarGroupPopover';\nexport * from './AvatarGroupPopover.types';\nexport * from './renderAvatarGroupPopover';\nexport * from './useAvatarGroupPopover';\nexport * from './useAvatarGroupPopoverStyles.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './AvatarGroupPopover';\nexport * from './AvatarGroupPopover.types';\nexport * from './renderAvatarGroupPopover';\nexport * from './useAvatarGroupPopover';\nexport * from './useAvatarGroupPopoverStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,uBAAuB;AACrC,cAAc,6BAA6B;AAC3C,cAAc,6BAA6B;AAC3C,cAAc,0BAA0B;AACxC,cAAc,uCAAuC"}

package/lib/components/AvatarGroupPopover/renderAvatarGroupPopover.js

@@ -1,19 +1,14 @@
-/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
+/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
 import { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';
 import { getSlotsNext } from '@fluentui/react-utilities';
 import { PopoverTrigger } from '@fluentui/react-popover';
 /**
  * Render the final JSX of AvatarGroupPopover
- */
-export const renderAvatarGroupPopover_unstable = (state, contextValues) => {
-  const {
-    slots,
-    slotProps
-  } = getSlotsNext(state);
-  return /*#__PURE__*/createElement(slots.root, slotProps.root, /*#__PURE__*/createElement(PopoverTrigger, {
-    disableButtonEnhancement: true
-  }, /*#__PURE__*/createElement(slots.tooltip, slotProps.tooltip, /*#__PURE__*/createElement(slots.triggerButton, slotProps.triggerButton))), /*#__PURE__*/createElement(slots.popoverSurface, slotProps.popoverSurface, /*#__PURE__*/createElement(AvatarGroupProvider, {
-    value: contextValues.avatarGroup
-  }, /*#__PURE__*/createElement(slots.content, slotProps.content))));
+ */ export const renderAvatarGroupPopover_unstable = (state, contextValues)=>{
+    const { slots , slotProps  } = getSlotsNext(state);
+    return /*#__PURE__*/ createElement(slots.root, slotProps.root, /*#__PURE__*/ createElement(PopoverTrigger, {
+        disableButtonEnhancement: true
+    }, /*#__PURE__*/ createElement(slots.tooltip, slotProps.tooltip, /*#__PURE__*/ createElement(slots.triggerButton, slotProps.triggerButton))), /*#__PURE__*/ createElement(slots.popoverSurface, slotProps.popoverSurface, /*#__PURE__*/ createElement(AvatarGroupProvider, {
+        value: contextValues.avatarGroup
+    }, /*#__PURE__*/ createElement(slots.content, slotProps.content))));
 };
-//# sourceMappingURL=renderAvatarGroupPopover.js.map

package/lib/components/AvatarGroupPopover/renderAvatarGroupPopover.js.map

@@ -1 +1 @@
-{"version":3,"names":["createElement","AvatarGroupProvider","getSlotsNext","PopoverTrigger","renderAvatarGroupPopover_unstable","state","contextValues","slots","slotProps","root","disableButtonEnhancement","tooltip","triggerButton","popoverSurface","value","avatarGroup","content"],"sources":["../../../src/components/AvatarGroupPopover/renderAvatarGroupPopover.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';\nimport { AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { PopoverProps, PopoverTrigger } from '@fluentui/react-popover';\nimport { TooltipProps } from '@fluentui/react-tooltip';\nimport type { AvatarGroupPopoverState, AvatarGroupPopoverSlots } from './AvatarGroupPopover.types';\n\n/**\n * Render the final JSX of AvatarGroupPopover\n */\nexport const renderAvatarGroupPopover_unstable = (\n  state: AvatarGroupPopoverState,\n  contextValues: AvatarGroupContextValues,\n) => {\n  const { slots, slotProps } = getSlotsNext<AvatarGroupPopoverSlots>(state);\n\n  return (\n    <slots.root {...(slotProps.root as PopoverProps)}>\n      <PopoverTrigger disableButtonEnhancement>\n        <slots.tooltip {...(slotProps.tooltip as TooltipProps)}>\n          <slots.triggerButton {...slotProps.triggerButton} />\n        </slots.tooltip>\n      </PopoverTrigger>\n      <slots.popoverSurface {...slotProps.popoverSurface}>\n        <AvatarGroupProvider value={contextValues.avatarGroup}>\n          <slots.content {...slotProps.content} />\n        </AvatarGroupProvider>\n      </slots.popoverSurface>\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAC9B,SAASC,mBAAmB,QAAQ;AAGpC,SAASC,YAAY,QAAQ;AAC7B,SAAuBC,cAAc,QAAQ;AAI7C;;;AAGA,OAAO,MAAMC,iCAAA,GAAoCA,CAC/CC,KAAA,EACAC,aAAA,KACG;EACH,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGN,YAAA,CAAsCG,KAAA;EAEnE,oBACEL,aArBJ,CAqBKO,KAAA,CAAME,IAAI,EAAMD,SAAA,CAAUC,IAAI,eAC7BT,aAtBN,CAsBOG,cAAA;IAAeO,wBAAA;kBACdV,aAvBR,CAuBSO,KAAA,CAAMI,OAAO,EAAMH,SAAA,CAAUG,OAAO,eACnCX,aAxBV,CAwBWO,KAAA,CAAMK,aAAa,EAAKJ,SAAA,CAAUI,aAAa,kBAGpDZ,aA3BN,CA2BOO,KAAA,CAAMM,cAAc,EAAKL,SAAA,CAAUK,cAAc,eAChDb,aA5BR,CA4BSC,mBAAA;IAAoBa,KAAA,EAAOR,aAAA,CAAcS;kBACxCf,aA7BV,CA6BWO,KAAA,CAAMS,OAAO,EAAKR,SAAA,CAAUQ,OAAO;AAK9C"}
+{"version":3,"sources":["renderAvatarGroupPopover.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';\nimport { AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { PopoverProps, PopoverTrigger } from '@fluentui/react-popover';\nimport { TooltipProps } from '@fluentui/react-tooltip';\nimport type { AvatarGroupPopoverState, AvatarGroupPopoverSlots } from './AvatarGroupPopover.types';\n\n/**\n * Render the final JSX of AvatarGroupPopover\n */\nexport const renderAvatarGroupPopover_unstable = (\n  state: AvatarGroupPopoverState,\n  contextValues: AvatarGroupContextValues,\n) => {\n  const { slots, slotProps } = getSlotsNext<AvatarGroupPopoverSlots>(state);\n\n  return (\n    <slots.root {...(slotProps.root as PopoverProps)}>\n      <PopoverTrigger disableButtonEnhancement>\n        <slots.tooltip {...(slotProps.tooltip as TooltipProps)}>\n          <slots.triggerButton {...slotProps.triggerButton} />\n        </slots.tooltip>\n      </PopoverTrigger>\n      <slots.popoverSurface {...slotProps.popoverSurface}>\n        <AvatarGroupProvider value={contextValues.avatarGroup}>\n          <slots.content {...slotProps.content} />\n        </AvatarGroupProvider>\n      </slots.popoverSurface>\n    </slots.root>\n  );\n};\n"],"names":["createElement","AvatarGroupProvider","getSlotsNext","PopoverTrigger","renderAvatarGroupPopover_unstable","state","contextValues","slots","slotProps","root","disableButtonEnhancement","tooltip","triggerButton","popoverSurface","value","avatarGroup","content"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,mBAAmB,QAAQ,oCAAoC;AAGxE,SAASC,YAAY,QAAQ,4BAA4B;AACzD,SAAuBC,cAAc,QAAQ,0BAA0B;AAIvE;;CAEC,GACD,OAAO,MAAMC,oCAAoC,CAC/CC,OACAC,gBACG;IACH,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGN,aAAsCG;IAEnE,qBACE,AArBJ,cAqBKE,MAAME,IAAI,EAAMD,UAAUC,IAAI,gBAC7B,AAtBN,cAsBON;QAAeO,0BAAAA,IAAwB;qBACtC,AAvBR,cAuBSH,MAAMI,OAAO,EAAMH,UAAUG,OAAO,gBACnC,AAxBV,cAwBWJ,MAAMK,aAAa,EAAKJ,UAAUI,aAAa,mBAGpD,AA3BN,cA2BOL,MAAMM,cAAc,EAAKL,UAAUK,cAAc,gBAChD,AA5BR,cA4BSZ;QAAoBa,OAAOR,cAAcS,WAAW;qBACnD,AA7BV,cA6BWR,MAAMS,OAAO,EAAKR,UAAUQ,OAAO;AAK9C,EAAE"}