@fluentui/react-tags 9.8.0 → 9.9.0

package/CHANGELOG.md

@@ -1,12 +1,39 @@
 # Change Log - @fluentui/react-tags
 
-This log was last generated on Wed, 01 Apr 2026 15:50:23 GMT and should not be manually modified.
+This log was last generated on Tue, 26 May 2026 09:33:31 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.9.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.9.0)
+
+Tue, 26 May 2026 09:33:31 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.8.1..@fluentui/react-tags_v9.9.0)
+
+### Minor changes
+
+- feat: export contexts for headless ([PR #36229](https://github.com/microsoft/fluentui/pull/36229) by vgenaev@gmail.com)
+- Bump @fluentui/react-aria to v9.17.12 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-avatar to v9.11.2 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.3 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-tabster to v9.26.15 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-utilities to v9.26.4 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+
+## [9.8.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.8.1)
+
+Thu, 23 Apr 2026 14:21:08 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.8.0..@fluentui/react-tags_v9.8.1)
+
+### Patches
+
+- Bump @fluentui/react-aria to v9.17.11 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-avatar to v9.11.1 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-tabster to v9.26.14 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-utilities to v9.26.3 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+
 ## [9.8.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.8.0)
 
-Wed, 01 Apr 2026 15:50:23 GMT 
+Wed, 01 Apr 2026 15:52:43 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.7.19..@fluentui/react-tags_v9.8.0)
 
 ### Minor changes

package/dist/index.d.ts

@@ -1,15 +1,16 @@
-import { AvatarShape } from '@fluentui/react-avatar';
-import { AvatarSize } from '@fluentui/react-avatar';
-import { ComponentProps } from '@fluentui/react-utilities';
-import { ComponentState } from '@fluentui/react-utilities';
+import type { AvatarShape } from '@fluentui/react-avatar';
+import type { AvatarSize } from '@fluentui/react-avatar';
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
 import type { DistributiveOmit } from '@fluentui/react-utilities';
 import type { EventData } from '@fluentui/react-utilities';
 import type { EventHandler } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
-import { Slot } from '@fluentui/react-utilities';
+import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
+import type { TabsterDOMAttribute } from '@fluentui/react-tabster';
 
 /**
  * InteractionTag component - a visual representation of an attribute with primary and secondary actions.
@@ -29,10 +30,12 @@ export declare type InteractionTagBaseState<Value = TagValue> = Omit<Interaction
 
 export declare const interactionTagClassNames: SlotClassNames<InteractionTagSlots>;
 
+export declare const InteractionTagContextProvider: React_2.Provider<InteractionTagContextValue<string> | undefined>;
+
 /**
  * Context shared between InteractionTag and its children components
  */
-declare type InteractionTagContextValue<Value = string> = Required<Pick<InteractionTagState, 'appearance' | 'disabled' | 'selected' | 'selectedValues' | 'shape' | 'size'> & {
+export declare type InteractionTagContextValue<Value = string> = Required<Pick<InteractionTagState, 'appearance' | 'disabled' | 'selected' | 'selectedValues' | 'shape' | 'size'> & {
     handleTagDismiss: TagDismissHandler<Value>;
     interactionTagPrimaryId: string;
     value?: Value;
@@ -252,7 +255,7 @@ export declare type TagBaseState = DistributiveOmit<TagState, 'appearance' | 'si
 
 export declare const tagClassNames: SlotClassNames<TagSlots>;
 
-declare type TagContextValues = TagAvatarContextValues;
+export declare type TagContextValues = TagAvatarContextValues;
 
 export declare type TagDismissData<Value = TagValue> = {
     value: Value;
@@ -280,10 +283,12 @@ export declare type TagGroupBaseState<Value = TagValue> = Omit<TagGroupState<Val
 
 export declare const tagGroupClassNames: SlotClassNames<TagGroupSlots>;
 
+export declare const TagGroupContextProvider: React_2.Provider<TagGroupContextValue | undefined>;
+
 /**
  * Context shared between TagGroup and its children components
  */
-declare type TagGroupContextValue = Required<Pick<TagGroupState, 'handleTagDismiss' | 'size'>> & Partial<Pick<TagGroupState, 'disabled' | 'appearance' | 'dismissible' | 'handleTagSelect' | 'role' | 'selectedValues'>>;
+export declare type TagGroupContextValue = Required<Pick<TagGroupState, 'handleTagDismiss' | 'size'>> & Partial<Pick<TagGroupState, 'disabled' | 'appearance' | 'dismissible' | 'handleTagSelect' | 'role' | 'selectedValues'>>;
 
 export declare type TagGroupContextValues = {
     tagGroup: TagGroupContextValue;
@@ -441,6 +446,8 @@ export declare const useInteractionTag_unstable: (props: InteractionTagProps, re
  */
 export declare const useInteractionTagBase_unstable: (props: InteractionTagBaseProps, ref: React_2.Ref<HTMLDivElement>) => InteractionTagBaseState;
 
+export declare const useInteractionTagContext_unstable: () => InteractionTagContextValue;
+
 export declare function useInteractionTagContextValues_unstable(state: InteractionTagState): InteractionTagContextValues;
 
 /**
@@ -533,7 +540,14 @@ export declare const useTagGroup_unstable: (props: TagGroupProps, ref: React_2.R
  * @param props - props from this instance of TagGroup (without appearance, size)
  * @param ref - reference to root HTMLDivElement of TagGroup
  */
-export declare const useTagGroupBase_unstable: (props: TagGroupBaseProps, ref: React_2.Ref<HTMLDivElement>) => TagGroupBaseState;
+export declare const useTagGroupBase_unstable: (props: TagGroupBaseProps, ref: React_2.Ref<HTMLDivElement>, options?: UseTagGroupBaseOptions) => TagGroupBaseState;
+
+declare type UseTagGroupBaseOptions = {
+    arrowNavigationProps?: TabsterDOMAttribute;
+    onAfterTagDismiss?: (container: HTMLElement | null) => void;
+};
+
+export declare const useTagGroupContext_unstable: () => TagGroupContextValue;
 
 export declare function useTagGroupContextValues_unstable(state: TagGroupState): TagGroupContextValues;
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InteractionTag/InteractionTag.types.ts"],"sourcesContent":["import { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { InteractionTagContextValue } from '../../contexts/interactionTagContext';\nimport { TagAppearance, TagShape, TagSize, TagValue, TagDismissHandler, TagSelectHandler } from '../../utils/types';\n\nexport type InteractionTagContextValues = {\n  interactionTag: InteractionTagContextValue;\n};\n\nexport type InteractionTagSlots = {\n  root: NonNullable<Slot<'div'>>;\n};\n\n/**\n * InteractionTag Props\n */\nexport type InteractionTagProps<Value = TagValue> = ComponentProps<Partial<InteractionTagSlots>> & {\n  /**\n   * An InteractionTag can have filled, outlined or brand experience.\n   *\n   * @default 'filled'\n   */\n  appearance?: TagAppearance;\n\n  /**\n   * An InteractionTag can show that it cannot be interacted with.\n   *\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * An InteractionTag can be selected.\n   * Note: This prop only changes the appearance of the tag at the moment. A future PR will add the integration with TagGroup.\n   *\n   * @default false\n   */\n  selected?: boolean;\n\n  /**\n   * An InteractionTag can have rounded or circular shape.\n   *\n   * @default 'round'\n   */\n  shape?: TagShape;\n\n  /**\n   * An InteractionTag has three sizes.\n   *\n   * @default 'medium'\n   */\n  size?: TagSize;\n\n  /**\n   * Unique value identifying the tag within a TagGroup\n   */\n  value?: Value;\n};\n\n/**\n * State used in rendering InteractionTag\n */\nexport type InteractionTagState<Value = TagValue> = ComponentState<InteractionTagSlots> &\n  Required<Pick<InteractionTagProps, 'appearance' | 'disabled' | 'selected' | 'shape' | 'size' | 'value'>> & {\n    /**\n     * Event handler from TagGroup context that allows TagGroup to dismiss the tag\n     */\n    handleTagDismiss: TagDismissHandler<Value>;\n\n    /**\n     * Event handler from TagGroup context that allows TagGroup to select the tag\n     */\n    handleTagSelect?: TagSelectHandler<Value>;\n\n    /**\n     * Selected values from TagGroup context\n     */\n    selectedValues: Value[];\n\n    /**\n     * id to assign to InteractionTagPrimary\n     */\n    interactionTagPrimaryId: string;\n  };\n\n/**\n * InteractionTag Base Props - omits design-only props\n */\nexport type InteractionTagBaseProps<Value = TagValue> = Omit<\n  InteractionTagProps<Value>,\n  'appearance' | 'size' | 'shape'\n>;\n\n/**\n * InteractionTag Base State - omits design-only state\n */\nexport type InteractionTagBaseState<Value = TagValue> = Omit<\n  InteractionTagState<Value>,\n  'appearance' | 'size' | 'shape'\n>;\n"],"names":[],"mappings":"AA4FA;;CAEC,GACD,WAGE"}
+{"version":3,"sources":["../src/components/InteractionTag/InteractionTag.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { InteractionTagContextValue } from '../../contexts/interactionTagContext';\nimport type {\n  TagAppearance,\n  TagShape,\n  TagSize,\n  TagValue,\n  TagDismissHandler,\n  TagSelectHandler,\n} from '../../utils/types';\n\nexport type InteractionTagContextValues = {\n  interactionTag: InteractionTagContextValue;\n};\n\nexport type InteractionTagSlots = {\n  root: NonNullable<Slot<'div'>>;\n};\n\n/**\n * InteractionTag Props\n */\nexport type InteractionTagProps<Value = TagValue> = ComponentProps<Partial<InteractionTagSlots>> & {\n  /**\n   * An InteractionTag can have filled, outlined or brand experience.\n   *\n   * @default 'filled'\n   */\n  appearance?: TagAppearance;\n\n  /**\n   * An InteractionTag can show that it cannot be interacted with.\n   *\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * An InteractionTag can be selected.\n   * Note: This prop only changes the appearance of the tag at the moment. A future PR will add the integration with TagGroup.\n   *\n   * @default false\n   */\n  selected?: boolean;\n\n  /**\n   * An InteractionTag can have rounded or circular shape.\n   *\n   * @default 'round'\n   */\n  shape?: TagShape;\n\n  /**\n   * An InteractionTag has three sizes.\n   *\n   * @default 'medium'\n   */\n  size?: TagSize;\n\n  /**\n   * Unique value identifying the tag within a TagGroup\n   */\n  value?: Value;\n};\n\n/**\n * State used in rendering InteractionTag\n */\nexport type InteractionTagState<Value = TagValue> = ComponentState<InteractionTagSlots> &\n  Required<Pick<InteractionTagProps, 'appearance' | 'disabled' | 'selected' | 'shape' | 'size' | 'value'>> & {\n    /**\n     * Event handler from TagGroup context that allows TagGroup to dismiss the tag\n     */\n    handleTagDismiss: TagDismissHandler<Value>;\n\n    /**\n     * Event handler from TagGroup context that allows TagGroup to select the tag\n     */\n    handleTagSelect?: TagSelectHandler<Value>;\n\n    /**\n     * Selected values from TagGroup context\n     */\n    selectedValues: Value[];\n\n    /**\n     * id to assign to InteractionTagPrimary\n     */\n    interactionTagPrimaryId: string;\n  };\n\n/**\n * InteractionTag Base Props - omits design-only props\n */\nexport type InteractionTagBaseProps<Value = TagValue> = Omit<\n  InteractionTagProps<Value>,\n  'appearance' | 'size' | 'shape'\n>;\n\n/**\n * InteractionTag Base State - omits design-only state\n */\nexport type InteractionTagBaseState<Value = TagValue> = Omit<\n  InteractionTagState<Value>,\n  'appearance' | 'size' | 'shape'\n>;\n"],"names":[],"mappings":"AAmGA;;CAEC,GACD,WAGE"}

package/lib/components/InteractionTag/useInteractionTag.js

@@ -1,5 +1,4 @@
 'use client';
-import * as React from 'react';
 import { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';
 import { useTagGroupContext_unstable } from '../../contexts/tagGroupContext';
 /**

package/lib/components/InteractionTag/useInteractionTag.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InteractionTag/useInteractionTag.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport type {\n  InteractionTagBaseProps,\n  InteractionTagBaseState,\n  InteractionTagProps,\n  InteractionTagState,\n} from './InteractionTag.types';\nimport { useTagGroupContext_unstable } from '../../contexts/tagGroupContext';\n\n/**\n * Create the base state required to render InteractionTag, without design-only props.\n *\n * @param props - props from this instance of InteractionTag (without appearance, size, shape)\n * @param ref - reference to root HTMLDivElement of InteractionTag\n */\nexport const useInteractionTagBase_unstable = (\n  props: InteractionTagBaseProps,\n  ref: React.Ref<HTMLDivElement>,\n): InteractionTagBaseState => {\n  const {\n    handleTagDismiss,\n    handleTagSelect,\n    disabled: contextDisabled,\n    selectedValues = [],\n  } = useTagGroupContext_unstable();\n\n  const id = useId('fui-InteractionTag-', props.id);\n\n  const interactionTagPrimaryId = useId('fui-InteractionTagPrimary-');\n\n  const { disabled = false, selected = false, value = id } = props;\n\n  return {\n    disabled: contextDisabled ? true : disabled,\n    handleTagDismiss,\n    handleTagSelect,\n    interactionTagPrimaryId,\n    selected: selectedValues.includes(value) || selected,\n    selectedValues,\n    value,\n\n    components: {\n      root: 'div',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        ...props,\n        disabled: contextDisabled ? true : disabled,\n        id,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n\n/**\n * Create the state required to render InteractionTag.\n *\n * The returned state can be modified with hooks such as useInteractionTagStyles_unstable,\n * before being passed to renderInteractionTag_unstable.\n *\n * @param props - props from this instance of InteractionTag\n * @param ref - reference to root HTMLDivElement of InteractionTag\n */\nexport const useInteractionTag_unstable = (\n  props: InteractionTagProps,\n  ref: React.Ref<HTMLDivElement>,\n): InteractionTagState => {\n  const { size: contextSize, appearance: contextAppearance } = useTagGroupContext_unstable();\n\n  const { appearance = contextAppearance ?? 'filled', shape = 'rounded', size = contextSize } = props;\n\n  return {\n    ...useInteractionTagBase_unstable(props, ref),\n    appearance,\n    shape,\n    size,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useId","slot","useTagGroupContext_unstable","useInteractionTagBase_unstable","props","ref","handleTagDismiss","handleTagSelect","disabled","contextDisabled","selectedValues","id","interactionTagPrimaryId","selected","value","includes","components","root","always","elementType","useInteractionTag_unstable","size","contextSize","appearance","contextAppearance","shape"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAOlF,SAASC,2BAA2B,QAAQ,iCAAiC;AAE7E;;;;;CAKC,GACD,OAAO,MAAMC,iCAAiC,CAC5CC,OACAC;IAEA,MAAM,EACJC,gBAAgB,EAChBC,eAAe,EACfC,UAAUC,eAAe,EACzBC,iBAAiB,EAAE,EACpB,GAAGR;IAEJ,MAAMS,KAAKX,MAAM,uBAAuBI,MAAMO,EAAE;IAEhD,MAAMC,0BAA0BZ,MAAM;IAEtC,MAAM,EAAEQ,WAAW,KAAK,EAAEK,WAAW,KAAK,EAAEC,QAAQH,EAAE,EAAE,GAAGP;IAE3D,OAAO;QACLI,UAAUC,kBAAkB,OAAOD;QACnCF;QACAC;QACAK;QACAC,UAAUH,eAAeK,QAAQ,CAACD,UAAUD;QAC5CH;QACAI;QAEAE,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMhB,KAAKiB,MAAM,CACfnB,yBAAyB,OAAO;YAC9BM;YACA,GAAGD,KAAK;YACRI,UAAUC,kBAAkB,OAAOD;YACnCG;QACF,IACA;YAAEQ,aAAa;QAAM;IAEzB;AACF,EAAE;AAEF;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxChB,OACAC;IAEA,MAAM,EAAEgB,MAAMC,WAAW,EAAEC,YAAYC,iBAAiB,EAAE,GAAGtB;IAE7D,MAAM,EAAEqB,aAAaC,8BAAAA,+BAAAA,oBAAqB,QAAQ,EAAEC,QAAQ,SAAS,EAAEJ,OAAOC,WAAW,EAAE,GAAGlB;IAE9F,OAAO;QACL,GAAGD,+BAA+BC,OAAOC,IAAI;QAC7CkB;QACAE;QACAJ;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/InteractionTag/useInteractionTag.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport type {\n  InteractionTagBaseProps,\n  InteractionTagBaseState,\n  InteractionTagProps,\n  InteractionTagState,\n} from './InteractionTag.types';\nimport { useTagGroupContext_unstable } from '../../contexts/tagGroupContext';\n\n/**\n * Create the base state required to render InteractionTag, without design-only props.\n *\n * @param props - props from this instance of InteractionTag (without appearance, size, shape)\n * @param ref - reference to root HTMLDivElement of InteractionTag\n */\nexport const useInteractionTagBase_unstable = (\n  props: InteractionTagBaseProps,\n  ref: React.Ref<HTMLDivElement>,\n): InteractionTagBaseState => {\n  const {\n    handleTagDismiss,\n    handleTagSelect,\n    disabled: contextDisabled,\n    selectedValues = [],\n  } = useTagGroupContext_unstable();\n\n  const id = useId('fui-InteractionTag-', props.id);\n\n  const interactionTagPrimaryId = useId('fui-InteractionTagPrimary-');\n\n  const { disabled = false, selected = false, value = id } = props;\n\n  return {\n    disabled: contextDisabled ? true : disabled,\n    handleTagDismiss,\n    handleTagSelect,\n    interactionTagPrimaryId,\n    selected: selectedValues.includes(value) || selected,\n    selectedValues,\n    value,\n\n    components: {\n      root: 'div',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        ...props,\n        disabled: contextDisabled ? true : disabled,\n        id,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n\n/**\n * Create the state required to render InteractionTag.\n *\n * The returned state can be modified with hooks such as useInteractionTagStyles_unstable,\n * before being passed to renderInteractionTag_unstable.\n *\n * @param props - props from this instance of InteractionTag\n * @param ref - reference to root HTMLDivElement of InteractionTag\n */\nexport const useInteractionTag_unstable = (\n  props: InteractionTagProps,\n  ref: React.Ref<HTMLDivElement>,\n): InteractionTagState => {\n  const { size: contextSize, appearance: contextAppearance } = useTagGroupContext_unstable();\n\n  const { appearance = contextAppearance ?? 'filled', shape = 'rounded', size = contextSize } = props;\n\n  return {\n    ...useInteractionTagBase_unstable(props, ref),\n    appearance,\n    shape,\n    size,\n  };\n};\n"],"names":["getIntrinsicElementProps","useId","slot","useTagGroupContext_unstable","useInteractionTagBase_unstable","props","ref","handleTagDismiss","handleTagSelect","disabled","contextDisabled","selectedValues","id","interactionTagPrimaryId","selected","value","includes","components","root","always","elementType","useInteractionTag_unstable","size","contextSize","appearance","contextAppearance","shape"],"mappings":"AAAA;AAGA,SAASA,wBAAwB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAOlF,SAASC,2BAA2B,QAAQ,iCAAiC;AAE7E;;;;;CAKC,GACD,OAAO,MAAMC,iCAAiC,CAC5CC,OACAC;IAEA,MAAM,EACJC,gBAAgB,EAChBC,eAAe,EACfC,UAAUC,eAAe,EACzBC,iBAAiB,EAAE,EACpB,GAAGR;IAEJ,MAAMS,KAAKX,MAAM,uBAAuBI,MAAMO,EAAE;IAEhD,MAAMC,0BAA0BZ,MAAM;IAEtC,MAAM,EAAEQ,WAAW,KAAK,EAAEK,WAAW,KAAK,EAAEC,QAAQH,EAAE,EAAE,GAAGP;IAE3D,OAAO;QACLI,UAAUC,kBAAkB,OAAOD;QACnCF;QACAC;QACAK;QACAC,UAAUH,eAAeK,QAAQ,CAACD,UAAUD;QAC5CH;QACAI;QAEAE,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMhB,KAAKiB,MAAM,CACfnB,yBAAyB,OAAO;YAC9BM;YACA,GAAGD,KAAK;YACRI,UAAUC,kBAAkB,OAAOD;YACnCG;QACF,IACA;YAAEQ,aAAa;QAAM;IAEzB;AACF,EAAE;AAEF;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxChB,OACAC;IAEA,MAAM,EAAEgB,MAAMC,WAAW,EAAEC,YAAYC,iBAAiB,EAAE,GAAGtB;IAE7D,MAAM,EAAEqB,aAAaC,8BAAAA,+BAAAA,oBAAqB,QAAQ,EAAEC,QAAQ,SAAS,EAAEJ,OAAOC,WAAW,EAAE,GAAGlB;IAE9F,OAAO;QACL,GAAGD,+BAA+BC,OAAOC,IAAI;QAC7CkB;QACAE;QACAJ;IACF;AACF,EAAE"}

package/lib/components/InteractionTag/useInteractionTagContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InteractionTag/useInteractionTagContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { InteractionTagState, InteractionTagContextValues } from './InteractionTag.types';\n\nexport function useInteractionTagContextValues_unstable(state: InteractionTagState): InteractionTagContextValues {\n  const {\n    appearance,\n    disabled,\n    handleTagDismiss,\n    handleTagSelect,\n    interactionTagPrimaryId,\n    selected,\n    selectedValues,\n    shape,\n    size,\n    value,\n  } = state;\n\n  return {\n    interactionTag: React.useMemo(\n      () => ({\n        appearance,\n        disabled,\n        handleTagDismiss,\n        handleTagSelect,\n        interactionTagPrimaryId,\n        selected,\n        selectedValues,\n        shape,\n        size,\n        value,\n      }),\n      [\n        appearance,\n        disabled,\n        handleTagDismiss,\n        handleTagSelect,\n        interactionTagPrimaryId,\n        selected,\n        selectedValues,\n        shape,\n        size,\n        value,\n      ],\n    ),\n  };\n}\n"],"names":["React","useInteractionTagContextValues_unstable","state","appearance","disabled","handleTagDismiss","handleTagSelect","interactionTagPrimaryId","selected","selectedValues","shape","size","value","interactionTag","useMemo"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,wCAAwCC,KAA0B;IAChF,MAAM,EACJC,UAAU,EACVC,QAAQ,EACRC,gBAAgB,EAChBC,eAAe,EACfC,uBAAuB,EACvBC,QAAQ,EACRC,cAAc,EACdC,KAAK,EACLC,IAAI,EACJC,KAAK,EACN,GAAGV;IAEJ,OAAO;QACLW,gBAAgBb,MAAMc,OAAO,CAC3B,IAAO,CAAA;gBACLX;gBACAC;gBACAC;gBACAC;gBACAC;gBACAC;gBACAC;gBACAC;gBACAC;gBACAC;YACF,CAAA,GACA;YACET;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;SACD;IAEL;AACF"}
+{"version":3,"sources":["../src/components/InteractionTag/useInteractionTagContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { InteractionTagState, InteractionTagContextValues } from './InteractionTag.types';\n\nexport function useInteractionTagContextValues_unstable(state: InteractionTagState): InteractionTagContextValues {\n  const {\n    appearance,\n    disabled,\n    handleTagDismiss,\n    handleTagSelect,\n    interactionTagPrimaryId,\n    selected,\n    selectedValues,\n    shape,\n    size,\n    value,\n  } = state;\n\n  return {\n    interactionTag: React.useMemo(\n      () => ({\n        appearance,\n        disabled,\n        handleTagDismiss,\n        handleTagSelect,\n        interactionTagPrimaryId,\n        selected,\n        selectedValues,\n        shape,\n        size,\n        value,\n      }),\n      [\n        appearance,\n        disabled,\n        handleTagDismiss,\n        handleTagSelect,\n        interactionTagPrimaryId,\n        selected,\n        selectedValues,\n        shape,\n        size,\n        value,\n      ],\n    ),\n  };\n}\n"],"names":["React","useInteractionTagContextValues_unstable","state","appearance","disabled","handleTagDismiss","handleTagSelect","interactionTagPrimaryId","selected","selectedValues","shape","size","value","interactionTag","useMemo"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,wCAAwCC,KAA0B;IAChF,MAAM,EACJC,UAAU,EACVC,QAAQ,EACRC,gBAAgB,EAChBC,eAAe,EACfC,uBAAuB,EACvBC,QAAQ,EACRC,cAAc,EACdC,KAAK,EACLC,IAAI,EACJC,KAAK,EACN,GAAGV;IAEJ,OAAO;QACLW,gBAAgBb,MAAMc,OAAO,CAC3B,IAAO,CAAA;gBACLX;gBACAC;gBACAC;gBACAC;gBACAC;gBACAC;gBACAC;gBACAC;gBACAC;gBACAC;YACF,CAAA,GACA;YACET;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;SACD;IAEL;AACF"}

package/lib/components/InteractionTag/useInteractionTagStyles.styles.js

@@ -49,6 +49,7 @@ export const useInteractionTagStyles_unstable = state => {
     shape,
     size
   } = state;
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(interactionTagClassNames.root, rootBaseClassName, rootStyles[shape], rootStyles[size], state.root.className);
   return state;
 };

package/lib/components/InteractionTag/useInteractionTagStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","interactionTagClassNames","root","useRootBaseClassName","useRootStyles","rounded","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","circular","medium","Bqenvij","small","d","p","useInteractionTagStyles_unstable","state","rootBaseClassName","rootStyles","shape","size","className"],"sources":["useInteractionTagStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const interactionTagClassNames = {\n    root: 'fui-InteractionTag'\n};\nconst useRootBaseClassName = makeResetStyles({\n    display: 'inline-flex',\n    alignItems: 'center',\n    boxSizing: 'border-box',\n    width: 'fit-content'\n});\nconst useRootStyles = makeStyles({\n    rounded: {\n        borderRadius: tokens.borderRadiusMedium\n    },\n    circular: {\n        borderRadius: tokens.borderRadiusCircular\n    },\n    medium: {\n        height: '32px'\n    },\n    small: {\n        height: '24px'\n    },\n    'extra-small': {\n        height: '20px'\n    }\n});\n/**\n * Apply styling to the InteractionTag slots based on the state\n */ export const useInteractionTagStyles_unstable = (state)=>{\n    'use no memo';\n    const rootBaseClassName = useRootBaseClassName();\n    const rootStyles = useRootStyles();\n    const { shape, size } = state;\n    state.root.className = mergeClasses(interactionTagClassNames.root, rootBaseClassName, rootStyles[shape], rootStyles[size], state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,oBAAoB,gBAAGN,aAAA,iHAK5B,CAAC;AACF,MAAMO,aAAa,gBAAGN,QAAA;EAAAO,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAL,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAE,MAAA;IAAAC,OAAA;EAAA;EAAAC,KAAA;IAAAD,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;AAAA;EAAAE,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAgBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,gCAAgC,GAAIC,KAAK,IAAG;EACzD,aAAa;;EACb,MAAMC,iBAAiB,GAAGhB,oBAAoB,CAAC,CAAC;EAChD,MAAMiB,UAAU,GAAGhB,aAAa,CAAC,CAAC;EAClC,MAAM;IAAEiB,KAAK;IAAEC;EAAK,CAAC,GAAGJ,KAAK;EAC7BA,KAAK,CAAChB,IAAI,CAACqB,SAAS,GAAGxB,YAAY,CAACE,wBAAwB,CAACC,IAAI,EAAEiB,iBAAiB,EAAEC,UAAU,CAACC,KAAK,CAAC,EAAED,UAAU,CAACE,IAAI,CAAC,EAAEJ,KAAK,CAAChB,IAAI,CAACqB,SAAS,CAAC;EAChJ,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","interactionTagClassNames","root","useRootBaseClassName","useRootStyles","rounded","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","circular","medium","Bqenvij","small","d","p","useInteractionTagStyles_unstable","state","rootBaseClassName","rootStyles","shape","size","className"],"sources":["useInteractionTagStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const interactionTagClassNames = {\n    root: 'fui-InteractionTag'\n};\nconst useRootBaseClassName = makeResetStyles({\n    display: 'inline-flex',\n    alignItems: 'center',\n    boxSizing: 'border-box',\n    width: 'fit-content'\n});\nconst useRootStyles = makeStyles({\n    rounded: {\n        borderRadius: tokens.borderRadiusMedium\n    },\n    circular: {\n        borderRadius: tokens.borderRadiusCircular\n    },\n    medium: {\n        height: '32px'\n    },\n    small: {\n        height: '24px'\n    },\n    'extra-small': {\n        height: '20px'\n    }\n});\n/**\n * Apply styling to the InteractionTag slots based on the state\n */ export const useInteractionTagStyles_unstable = (state)=>{\n    'use no memo';\n    const rootBaseClassName = useRootBaseClassName();\n    const rootStyles = useRootStyles();\n    const { shape, size } = state;\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(interactionTagClassNames.root, rootBaseClassName, rootStyles[shape], rootStyles[size], state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,oBAAoB,gBAAGN,aAAA,iHAK5B,CAAC;AACF,MAAMO,aAAa,gBAAGN,QAAA;EAAAO,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAL,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAE,MAAA;IAAAC,OAAA;EAAA;EAAAC,KAAA;IAAAD,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;AAAA;EAAAE,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAgBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,gCAAgC,GAAIC,KAAK,IAAG;EACzD,aAAa;;EACb,MAAMC,iBAAiB,GAAGhB,oBAAoB,CAAC,CAAC;EAChD,MAAMiB,UAAU,GAAGhB,aAAa,CAAC,CAAC;EAClC,MAAM;IAAEiB,KAAK;IAAEC;EAAK,CAAC,GAAGJ,KAAK;EAC7B;EACAA,KAAK,CAAChB,IAAI,CAACqB,SAAS,GAAGxB,YAAY,CAACE,wBAAwB,CAACC,IAAI,EAAEiB,iBAAiB,EAAEC,UAAU,CAACC,KAAK,CAAC,EAAED,UAAU,CAACE,IAAI,CAAC,EAAEJ,KAAK,CAAChB,IAAI,CAACqB,SAAS,CAAC;EAChJ,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/InteractionTag/useInteractionTagStyles.styles.raw.js

@@ -34,6 +34,7 @@ const useRootStyles = makeStyles({
     const rootBaseClassName = useRootBaseClassName();
     const rootStyles = useRootStyles();
     const { shape, size } = state;
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(interactionTagClassNames.root, rootBaseClassName, rootStyles[shape], rootStyles[size], state.root.className);
     return state;
 };

package/lib/components/InteractionTag/useInteractionTagStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InteractionTag/useInteractionTagStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { InteractionTagSlots, InteractionTagState } from './InteractionTag.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const interactionTagClassNames: SlotClassNames<InteractionTagSlots> = {\n  root: 'fui-InteractionTag',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  boxSizing: 'border-box',\n  width: 'fit-content',\n});\n\nconst useRootStyles = makeStyles({\n  rounded: { borderRadius: tokens.borderRadiusMedium },\n  circular: { borderRadius: tokens.borderRadiusCircular },\n\n  medium: {\n    height: '32px',\n  },\n  small: {\n    height: '24px',\n  },\n  'extra-small': {\n    height: '20px',\n  },\n});\n\n/**\n * Apply styling to the InteractionTag slots based on the state\n */\nexport const useInteractionTagStyles_unstable = (state: InteractionTagState): InteractionTagState => {\n  'use no memo';\n\n  const rootBaseClassName = useRootBaseClassName();\n  const rootStyles = useRootStyles();\n\n  const { shape, size } = state;\n\n  state.root.className = mergeClasses(\n    interactionTagClassNames.root,\n    rootBaseClassName,\n    rootStyles[shape],\n    rootStyles[size],\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","interactionTagClassNames","root","useRootBaseClassName","display","alignItems","boxSizing","width","useRootStyles","rounded","borderRadius","borderRadiusMedium","circular","borderRadiusCircular","medium","height","small","useInteractionTagStyles_unstable","state","rootBaseClassName","rootStyles","shape","size","className"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG3E,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AAEF,MAAMC,uBAAuBN,gBAAgB;IAC3CO,SAAS;IACTC,YAAY;IACZC,WAAW;IACXC,OAAO;AACT;AAEA,MAAMC,gBAAgBV,WAAW;IAC/BW,SAAS;QAAEC,cAAcV,OAAOW,kBAAkB;IAAC;IACnDC,UAAU;QAAEF,cAAcV,OAAOa,oBAAoB;IAAC;IAEtDC,QAAQ;QACNC,QAAQ;IACV;IACAC,OAAO;QACLD,QAAQ;IACV;IACA,eAAe;QACbA,QAAQ;IACV;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,oBAAoBhB;IAC1B,MAAMiB,aAAaZ;IAEnB,MAAM,EAAEa,KAAK,EAAEC,IAAI,EAAE,GAAGJ;IAExBA,MAAMhB,IAAI,CAACqB,SAAS,GAAGxB,aACrBE,yBAAyBC,IAAI,EAC7BiB,mBACAC,UAAU,CAACC,MAAM,EACjBD,UAAU,CAACE,KAAK,EAChBJ,MAAMhB,IAAI,CAACqB,SAAS;IAGtB,OAAOL;AACT,EAAE"}
+{"version":3,"sources":["../src/components/InteractionTag/useInteractionTagStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { InteractionTagSlots, InteractionTagState } from './InteractionTag.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const interactionTagClassNames: SlotClassNames<InteractionTagSlots> = {\n  root: 'fui-InteractionTag',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  boxSizing: 'border-box',\n  width: 'fit-content',\n});\n\nconst useRootStyles = makeStyles({\n  rounded: { borderRadius: tokens.borderRadiusMedium },\n  circular: { borderRadius: tokens.borderRadiusCircular },\n\n  medium: {\n    height: '32px',\n  },\n  small: {\n    height: '24px',\n  },\n  'extra-small': {\n    height: '20px',\n  },\n});\n\n/**\n * Apply styling to the InteractionTag slots based on the state\n */\nexport const useInteractionTagStyles_unstable = (state: InteractionTagState): InteractionTagState => {\n  'use no memo';\n\n  const rootBaseClassName = useRootBaseClassName();\n  const rootStyles = useRootStyles();\n\n  const { shape, size } = state;\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    interactionTagClassNames.root,\n    rootBaseClassName,\n    rootStyles[shape],\n    rootStyles[size],\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","interactionTagClassNames","root","useRootBaseClassName","display","alignItems","boxSizing","width","useRootStyles","rounded","borderRadius","borderRadiusMedium","circular","borderRadiusCircular","medium","height","small","useInteractionTagStyles_unstable","state","rootBaseClassName","rootStyles","shape","size","className"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG3E,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AAEF,MAAMC,uBAAuBN,gBAAgB;IAC3CO,SAAS;IACTC,YAAY;IACZC,WAAW;IACXC,OAAO;AACT;AAEA,MAAMC,gBAAgBV,WAAW;IAC/BW,SAAS;QAAEC,cAAcV,OAAOW,kBAAkB;IAAC;IACnDC,UAAU;QAAEF,cAAcV,OAAOa,oBAAoB;IAAC;IAEtDC,QAAQ;QACNC,QAAQ;IACV;IACAC,OAAO;QACLD,QAAQ;IACV;IACA,eAAe;QACbA,QAAQ;IACV;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,oBAAoBhB;IAC1B,MAAMiB,aAAaZ;IAEnB,MAAM,EAAEa,KAAK,EAAEC,IAAI,EAAE,GAAGJ;IAExB,oDAAoD;IACpDA,MAAMhB,IAAI,CAACqB,SAAS,GAAGxB,aACrBE,yBAAyBC,IAAI,EAC7BiB,mBACAC,UAAU,CAACC,MAAM,EACjBD,UAAU,CAACE,KAAK,EAChBJ,MAAMhB,IAAI,CAACqB,SAAS;IAGtB,OAAOL;AACT,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InteractionTagPrimary/InteractionTagPrimary.types.ts"],"sourcesContent":["import { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { InteractionTagContextValue } from '../../contexts/interactionTagContext';\nimport { TagAvatarContextValues, UseTagAvatarContextValuesOptions } from '../../utils/useTagAvatarContextValues';\n\nexport type InteractionTagPrimaryContextValues = TagAvatarContextValues;\n\nexport type InteractionTagPrimarySlots = {\n  root: NonNullable<Slot<'button'>>;\n\n  /**\n   * Slot for a visual element, usually an avatar\n   */\n  media?: Slot<'span'>;\n\n  /**\n   * Slot for an icon\n   */\n  icon?: Slot<'span'>;\n\n  /**\n   * Main text for the InteractionTagPrimary button. Children of the root slot are automatically rendered here\n   */\n  primaryText: Slot<'span'>;\n\n  /**\n   * Secondary text that describes or complements the main text\n   */\n  secondaryText?: Slot<'span'>;\n};\n\n/**\n * InteractionTagPrimary Props\n */\nexport type InteractionTagPrimaryProps = ComponentProps<Partial<InteractionTagPrimarySlots>> & {\n  /**\n   * Whether the `InteractionTag` component has a `Secondary` component that provides an secondary action.\n   * If `true`, the `InteractionTagPrimary` component will adjust its styles to accommodate the `Secondary` component.\n   *\n   * @default false\n   */\n  hasSecondaryAction?: boolean;\n};\n\n/**\n * State used in rendering InteractionTagPrimary\n */\nexport type InteractionTagPrimaryState = ComponentState<InteractionTagPrimarySlots> &\n  Required<\n    Pick<InteractionTagContextValue, 'appearance' | 'disabled' | 'selected' | 'shape' | 'size'> &\n      Pick<InteractionTagPrimaryProps, 'hasSecondaryAction'>\n  > &\n  UseTagAvatarContextValuesOptions;\n\n/**\n * InteractionTagPrimary Base Props - same as InteractionTagPrimaryProps (no design-only own props)\n */\nexport type InteractionTagPrimaryBaseProps = InteractionTagPrimaryProps;\n\n/**\n * InteractionTagPrimary Base State - omits design-only state derived from context\n */\nexport type InteractionTagPrimaryBaseState = Omit<\n  InteractionTagPrimaryState,\n  'appearance' | 'size' | 'shape' | 'avatarShape' | 'avatarSize'\n>;\n"],"names":[],"mappings":"AA0DA;;CAEC,GACD,WAGE"}
+{"version":3,"sources":["../src/components/InteractionTagPrimary/InteractionTagPrimary.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { InteractionTagContextValue } from '../../contexts/interactionTagContext';\nimport type { TagAvatarContextValues, UseTagAvatarContextValuesOptions } from '../../utils/useTagAvatarContextValues';\n\nexport type InteractionTagPrimaryContextValues = TagAvatarContextValues;\n\nexport type InteractionTagPrimarySlots = {\n  root: NonNullable<Slot<'button'>>;\n\n  /**\n   * Slot for a visual element, usually an avatar\n   */\n  media?: Slot<'span'>;\n\n  /**\n   * Slot for an icon\n   */\n  icon?: Slot<'span'>;\n\n  /**\n   * Main text for the InteractionTagPrimary button. Children of the root slot are automatically rendered here\n   */\n  primaryText: Slot<'span'>;\n\n  /**\n   * Secondary text that describes or complements the main text\n   */\n  secondaryText?: Slot<'span'>;\n};\n\n/**\n * InteractionTagPrimary Props\n */\nexport type InteractionTagPrimaryProps = ComponentProps<Partial<InteractionTagPrimarySlots>> & {\n  /**\n   * Whether the `InteractionTag` component has a `Secondary` component that provides an secondary action.\n   * If `true`, the `InteractionTagPrimary` component will adjust its styles to accommodate the `Secondary` component.\n   *\n   * @default false\n   */\n  hasSecondaryAction?: boolean;\n};\n\n/**\n * State used in rendering InteractionTagPrimary\n */\nexport type InteractionTagPrimaryState = ComponentState<InteractionTagPrimarySlots> &\n  Required<\n    Pick<InteractionTagContextValue, 'appearance' | 'disabled' | 'selected' | 'shape' | 'size'> &\n      Pick<InteractionTagPrimaryProps, 'hasSecondaryAction'>\n  > &\n  UseTagAvatarContextValuesOptions;\n\n/**\n * InteractionTagPrimary Base Props - same as InteractionTagPrimaryProps (no design-only own props)\n */\nexport type InteractionTagPrimaryBaseProps = InteractionTagPrimaryProps;\n\n/**\n * InteractionTagPrimary Base State - omits design-only state derived from context\n */\nexport type InteractionTagPrimaryBaseState = Omit<\n  InteractionTagPrimaryState,\n  'appearance' | 'size' | 'shape' | 'avatarShape' | 'avatarSize'\n>;\n"],"names":[],"mappings":"AA0DA;;CAEC,GACD,WAGE"}

package/lib/components/InteractionTagPrimary/useInteractionTagPrimary.js

@@ -1,5 +1,4 @@
 'use client';
-import * as React from 'react';
 import { getIntrinsicElementProps, mergeCallbacks, slot, useEventCallback } from '@fluentui/react-utilities';
 import { useInteractionTagContext_unstable } from '../../contexts/interactionTagContext';
 const avatarSizeMap = {

package/lib/components/InteractionTagPrimary/useInteractionTagPrimary.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InteractionTagPrimary/useInteractionTagPrimary.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, mergeCallbacks, slot, useEventCallback } from '@fluentui/react-utilities';\nimport type {\n  InteractionTagPrimaryBaseProps,\n  InteractionTagPrimaryBaseState,\n  InteractionTagPrimaryProps,\n  InteractionTagPrimaryState,\n} from './InteractionTagPrimary.types';\nimport { useInteractionTagContext_unstable } from '../../contexts/interactionTagContext';\n\nconst avatarSizeMap = {\n  medium: 28,\n  small: 20,\n  'extra-small': 16,\n} as const;\n\nconst avatarShapeMap = {\n  rounded: 'square',\n  circular: 'circular',\n} as const;\n\n/**\n * Create the base state required to render InteractionTagPrimary, without design-only props.\n *\n * @param props - props from this instance of InteractionTagPrimary\n * @param ref - reference to root HTMLButtonElement of InteractionTagPrimary\n */\nexport const useInteractionTagPrimaryBase_unstable = (\n  props: InteractionTagPrimaryBaseProps,\n  ref: React.Ref<HTMLButtonElement>,\n): InteractionTagPrimaryBaseState => {\n  const {\n    disabled,\n    handleTagSelect,\n    interactionTagPrimaryId,\n    selected: contextSelected,\n    selectedValues,\n    value,\n  } = useInteractionTagContext_unstable();\n  const { hasSecondaryAction = false } = props;\n\n  const onClick = useEventCallback(\n    mergeCallbacks(props?.onClick, (event: React.MouseEvent<HTMLButtonElement>) =>\n      handleTagSelect?.(event, { type: 'click', event, value, selectedValues }),\n    ),\n  );\n\n  return {\n    disabled,\n    hasSecondaryAction,\n    selected: contextSelected,\n\n    components: {\n      root: 'button',\n      media: 'span',\n      icon: 'span',\n      primaryText: 'span',\n      secondaryText: 'span',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        disabled,\n        id: interactionTagPrimaryId,\n        ...(handleTagSelect !== undefined && { 'aria-pressed': contextSelected }),\n        onClick,\n        ...props,\n      }),\n      { elementType: 'button' },\n    ),\n\n    media: slot.optional(props.media, { elementType: 'span' }),\n    icon: slot.optional(props.icon, { elementType: 'span' }),\n    primaryText: slot.optional(props.primaryText, {\n      renderByDefault: true,\n      defaultProps: {\n        children: props.children,\n      },\n      elementType: 'span',\n    }),\n    secondaryText: slot.optional(props.secondaryText, { elementType: 'span' }),\n  };\n};\n\n/**\n * Create the state required to render InteractionTagPrimary.\n *\n * The returned state can be modified with hooks such as useInteractionTagPrimaryStyles_unstable,\n * before being passed to renderInteractionTagPrimary_unstable.\n *\n * @param props - props from this instance of InteractionTagPrimary\n * @param ref - reference to root HTMLButtonElement of InteractionTagPrimary\n */\nexport const useInteractionTagPrimary_unstable = (\n  props: InteractionTagPrimaryProps,\n  ref: React.Ref<HTMLButtonElement>,\n): InteractionTagPrimaryState => {\n  const { appearance, shape, size } = useInteractionTagContext_unstable();\n\n  return {\n    ...useInteractionTagPrimaryBase_unstable(props, ref),\n    appearance,\n    avatarShape: avatarShapeMap[shape],\n    avatarSize: avatarSizeMap[size],\n    shape,\n    size,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","slot","useEventCallback","useInteractionTagContext_unstable","avatarSizeMap","medium","small","avatarShapeMap","rounded","circular","useInteractionTagPrimaryBase_unstable","props","ref","disabled","handleTagSelect","interactionTagPrimaryId","selected","contextSelected","selectedValues","value","hasSecondaryAction","onClick","event","type","components","root","media","icon","primaryText","secondaryText","always","id","undefined","elementType","optional","renderByDefault","defaultProps","children","useInteractionTagPrimary_unstable","appearance","shape","size","avatarShape","avatarSize"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,cAAc,EAAEC,IAAI,EAAEC,gBAAgB,QAAQ,4BAA4B;AAO7G,SAASC,iCAAiC,QAAQ,uCAAuC;AAEzF,MAAMC,gBAAgB;IACpBC,QAAQ;IACRC,OAAO;IACP,eAAe;AACjB;AAEA,MAAMC,iBAAiB;IACrBC,SAAS;IACTC,UAAU;AACZ;AAEA;;;;;CAKC,GACD,OAAO,MAAMC,wCAAwC,CACnDC,OACAC;IAEA,MAAM,EACJC,QAAQ,EACRC,eAAe,EACfC,uBAAuB,EACvBC,UAAUC,eAAe,EACzBC,cAAc,EACdC,KAAK,EACN,GAAGhB;IACJ,MAAM,EAAEiB,qBAAqB,KAAK,EAAE,GAAGT;IAEvC,MAAMU,UAAUnB,iBACdF,eAAeW,kBAAAA,4BAAAA,MAAOU,OAAO,EAAE,CAACC,QAC9BR,4BAAAA,sCAAAA,gBAAkBQ,OAAO;YAAEC,MAAM;YAASD;YAAOH;YAAOD;QAAe;IAI3E,OAAO;QACLL;QACAO;QACAJ,UAAUC;QAEVO,YAAY;YACVC,MAAM;YACNC,OAAO;YACPC,MAAM;YACNC,aAAa;YACbC,eAAe;QACjB;QAEAJ,MAAMxB,KAAK6B,MAAM,CACf/B,yBAAyB,UAAU;YACjCa;YACAC;YACAkB,IAAIhB;YACJ,GAAID,oBAAoBkB,aAAa;gBAAE,gBAAgBf;YAAgB,CAAC;YACxEI;YACA,GAAGV,KAAK;QACV,IACA;YAAEsB,aAAa;QAAS;QAG1BP,OAAOzB,KAAKiC,QAAQ,CAACvB,MAAMe,KAAK,EAAE;YAAEO,aAAa;QAAO;QACxDN,MAAM1B,KAAKiC,QAAQ,CAACvB,MAAMgB,IAAI,EAAE;YAAEM,aAAa;QAAO;QACtDL,aAAa3B,KAAKiC,QAAQ,CAACvB,MAAMiB,WAAW,EAAE;YAC5CO,iBAAiB;YACjBC,cAAc;gBACZC,UAAU1B,MAAM0B,QAAQ;YAC1B;YACAJ,aAAa;QACf;QACAJ,eAAe5B,KAAKiC,QAAQ,CAACvB,MAAMkB,aAAa,EAAE;YAAEI,aAAa;QAAO;IAC1E;AACF,EAAE;AAEF;;;;;;;;CAQC,GACD,OAAO,MAAMK,oCAAoC,CAC/C3B,OACAC;IAEA,MAAM,EAAE2B,UAAU,EAAEC,KAAK,EAAEC,IAAI,EAAE,GAAGtC;IAEpC,OAAO;QACL,GAAGO,sCAAsCC,OAAOC,IAAI;QACpD2B;QACAG,aAAanC,cAAc,CAACiC,MAAM;QAClCG,YAAYvC,aAAa,CAACqC,KAAK;QAC/BD;QACAC;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/InteractionTagPrimary/useInteractionTagPrimary.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, mergeCallbacks, slot, useEventCallback } from '@fluentui/react-utilities';\nimport type {\n  InteractionTagPrimaryBaseProps,\n  InteractionTagPrimaryBaseState,\n  InteractionTagPrimaryProps,\n  InteractionTagPrimaryState,\n} from './InteractionTagPrimary.types';\nimport { useInteractionTagContext_unstable } from '../../contexts/interactionTagContext';\n\nconst avatarSizeMap = {\n  medium: 28,\n  small: 20,\n  'extra-small': 16,\n} as const;\n\nconst avatarShapeMap = {\n  rounded: 'square',\n  circular: 'circular',\n} as const;\n\n/**\n * Create the base state required to render InteractionTagPrimary, without design-only props.\n *\n * @param props - props from this instance of InteractionTagPrimary\n * @param ref - reference to root HTMLButtonElement of InteractionTagPrimary\n */\nexport const useInteractionTagPrimaryBase_unstable = (\n  props: InteractionTagPrimaryBaseProps,\n  ref: React.Ref<HTMLButtonElement>,\n): InteractionTagPrimaryBaseState => {\n  const {\n    disabled,\n    handleTagSelect,\n    interactionTagPrimaryId,\n    selected: contextSelected,\n    selectedValues,\n    value,\n  } = useInteractionTagContext_unstable();\n  const { hasSecondaryAction = false } = props;\n\n  const onClick = useEventCallback(\n    mergeCallbacks(props?.onClick, (event: React.MouseEvent<HTMLButtonElement>) =>\n      handleTagSelect?.(event, { type: 'click', event, value, selectedValues }),\n    ),\n  );\n\n  return {\n    disabled,\n    hasSecondaryAction,\n    selected: contextSelected,\n\n    components: {\n      root: 'button',\n      media: 'span',\n      icon: 'span',\n      primaryText: 'span',\n      secondaryText: 'span',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        disabled,\n        id: interactionTagPrimaryId,\n        ...(handleTagSelect !== undefined && { 'aria-pressed': contextSelected }),\n        onClick,\n        ...props,\n      }),\n      { elementType: 'button' },\n    ),\n\n    media: slot.optional(props.media, { elementType: 'span' }),\n    icon: slot.optional(props.icon, { elementType: 'span' }),\n    primaryText: slot.optional(props.primaryText, {\n      renderByDefault: true,\n      defaultProps: {\n        children: props.children,\n      },\n      elementType: 'span',\n    }),\n    secondaryText: slot.optional(props.secondaryText, { elementType: 'span' }),\n  };\n};\n\n/**\n * Create the state required to render InteractionTagPrimary.\n *\n * The returned state can be modified with hooks such as useInteractionTagPrimaryStyles_unstable,\n * before being passed to renderInteractionTagPrimary_unstable.\n *\n * @param props - props from this instance of InteractionTagPrimary\n * @param ref - reference to root HTMLButtonElement of InteractionTagPrimary\n */\nexport const useInteractionTagPrimary_unstable = (\n  props: InteractionTagPrimaryProps,\n  ref: React.Ref<HTMLButtonElement>,\n): InteractionTagPrimaryState => {\n  const { appearance, shape, size } = useInteractionTagContext_unstable();\n\n  return {\n    ...useInteractionTagPrimaryBase_unstable(props, ref),\n    appearance,\n    avatarShape: avatarShapeMap[shape],\n    avatarSize: avatarSizeMap[size],\n    shape,\n    size,\n  };\n};\n"],"names":["getIntrinsicElementProps","mergeCallbacks","slot","useEventCallback","useInteractionTagContext_unstable","avatarSizeMap","medium","small","avatarShapeMap","rounded","circular","useInteractionTagPrimaryBase_unstable","props","ref","disabled","handleTagSelect","interactionTagPrimaryId","selected","contextSelected","selectedValues","value","hasSecondaryAction","onClick","event","type","components","root","media","icon","primaryText","secondaryText","always","id","undefined","elementType","optional","renderByDefault","defaultProps","children","useInteractionTagPrimary_unstable","appearance","shape","size","avatarShape","avatarSize"],"mappings":"AAAA;AAGA,SAASA,wBAAwB,EAAEC,cAAc,EAAEC,IAAI,EAAEC,gBAAgB,QAAQ,4BAA4B;AAO7G,SAASC,iCAAiC,QAAQ,uCAAuC;AAEzF,MAAMC,gBAAgB;IACpBC,QAAQ;IACRC,OAAO;IACP,eAAe;AACjB;AAEA,MAAMC,iBAAiB;IACrBC,SAAS;IACTC,UAAU;AACZ;AAEA;;;;;CAKC,GACD,OAAO,MAAMC,wCAAwC,CACnDC,OACAC;IAEA,MAAM,EACJC,QAAQ,EACRC,eAAe,EACfC,uBAAuB,EACvBC,UAAUC,eAAe,EACzBC,cAAc,EACdC,KAAK,EACN,GAAGhB;IACJ,MAAM,EAAEiB,qBAAqB,KAAK,EAAE,GAAGT;IAEvC,MAAMU,UAAUnB,iBACdF,eAAeW,kBAAAA,4BAAAA,MAAOU,OAAO,EAAE,CAACC,QAC9BR,4BAAAA,sCAAAA,gBAAkBQ,OAAO;YAAEC,MAAM;YAASD;YAAOH;YAAOD;QAAe;IAI3E,OAAO;QACLL;QACAO;QACAJ,UAAUC;QAEVO,YAAY;YACVC,MAAM;YACNC,OAAO;YACPC,MAAM;YACNC,aAAa;YACbC,eAAe;QACjB;QAEAJ,MAAMxB,KAAK6B,MAAM,CACf/B,yBAAyB,UAAU;YACjCa;YACAC;YACAkB,IAAIhB;YACJ,GAAID,oBAAoBkB,aAAa;gBAAE,gBAAgBf;YAAgB,CAAC;YACxEI;YACA,GAAGV,KAAK;QACV,IACA;YAAEsB,aAAa;QAAS;QAG1BP,OAAOzB,KAAKiC,QAAQ,CAACvB,MAAMe,KAAK,EAAE;YAAEO,aAAa;QAAO;QACxDN,MAAM1B,KAAKiC,QAAQ,CAACvB,MAAMgB,IAAI,EAAE;YAAEM,aAAa;QAAO;QACtDL,aAAa3B,KAAKiC,QAAQ,CAACvB,MAAMiB,WAAW,EAAE;YAC5CO,iBAAiB;YACjBC,cAAc;gBACZC,UAAU1B,MAAM0B,QAAQ;YAC1B;YACAJ,aAAa;QACf;QACAJ,eAAe5B,KAAKiC,QAAQ,CAACvB,MAAMkB,aAAa,EAAE;YAAEI,aAAa;QAAO;IAC1E;AACF,EAAE;AAEF;;;;;;;;CAQC,GACD,OAAO,MAAMK,oCAAoC,CAC/C3B,OACAC;IAEA,MAAM,EAAE2B,UAAU,EAAEC,KAAK,EAAEC,IAAI,EAAE,GAAGtC;IAEpC,OAAO;QACL,GAAGO,sCAAsCC,OAAOC,IAAI;QACpD2B;QACAG,aAAanC,cAAc,CAACiC,MAAM;QAClCG,YAAYvC,aAAa,CAACqC,KAAK;QAC/BD;QACAC;IACF;AACF,EAAE"}

package/lib/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.js

@@ -294,17 +294,22 @@ export const useInteractionTagPrimaryStyles_unstable = state => {
     appearance,
     selected
   } = state;
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(interactionTagPrimaryClassNames.root, shape === 'rounded' ? rootRoundedBaseClassName : rootCircularBaseClassName, shape === 'circular' && !state.hasSecondaryAction && rootCircularContrastStyles.withoutSecondaryAction, disabled ? rootDisabledAppearances[appearance] : rootStyles[appearance], selected && !disabled && rootStyles.selected, rootStyles[size], !state.media && !state.icon && rootWithoutMediaStyles[size], state.hasSecondaryAction && rootWithSecondaryActionStyles.base, state.hasSecondaryAction && rootWithSecondaryActionStyles[size], state.root.className);
   if (state.media) {
+    // eslint-disable-next-line react-hooks/immutability
     state.media.className = mergeClasses(interactionTagPrimaryClassNames.media, mediaStyles.base, mediaStyles[size], state.media.className);
   }
   if (state.icon) {
+    // eslint-disable-next-line react-hooks/immutability
     state.icon.className = mergeClasses(interactionTagPrimaryClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);
   }
   if (state.primaryText) {
+    // eslint-disable-next-line react-hooks/immutability
     state.primaryText.className = mergeClasses(interactionTagPrimaryClassNames.primaryText, primaryTextStyles.base, primaryTextStyles[size], state.secondaryText ? primaryTextStyles.withSecondaryText : primaryTextStyles.withoutSecondaryText, state.primaryText.className);
   }
   if (state.secondaryText) {
+    // eslint-disable-next-line react-hooks/immutability
     state.secondaryText.className = mergeClasses(interactionTagPrimaryClassNames.secondaryText, secondaryTextBaseClassName, state.secondaryText.className);
   }
   return state;

package/lib/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","iconFilledClassName","iconRegularClassName","useIconStyles","useMediaStyles","usePrimaryTextStyles","useSecondaryTextBaseClassName","interactionTagPrimaryClassNames","root","media","icon","primaryText","secondaryText","baseStyles","color","fontFamily","padding","borderStyle","appearance","textAlign","backgroundColor","display","height","alignItems","gridTemplateAreas","border","strokeWidthThin","colorTransparentStroke","outline","strokeWidthThick","colorStrokeFocus2","zIndex","useRootRoundedBaseClassName","r","s","useRootCircularBaseClassName","useRootCircularContrastStyles","withoutSecondaryAction","Bvgf1ty","Cqojjj","dd5wkx","Bdzpf8n","ibz501","Bs8828g","Bn0yx1x","m","p","useRootStyles","filled","De3pzq","sj55zd","eoavqd","Jwef8y","Bi91k9c","ecr2s2","lj723h","Bbkh6qg","Cnge2b","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bk3fhr4","I6i3kg","Bmfj8id","Bnrwwps","weioyw","Bpre390","brand","selected","Bgh53k4","B2eet1l","Bcmaq0h","gk0gix","B20660r","B8a6bjv","Bpptf2m","e5kdtc","Bkjc3bi","ayd6f0","B8gzw0y","By8wz76","B7iucu3","Bahaeuw","Boo3t63","medium","z189sj","small","qhf8xq","Ie5t1m","G6hvz8","wgw0td","Bbwa3xj","m3mfg4","B9s7hj8","B9e1dac","d","h","a","useRootDisabledAppearances","Bceei9c","useRootWithoutMediaStyles","uwmqm3","useRootWithSecondaryActionStyles","base","B7oj6ja","Bbmb7ep","vrafjx","B6xbmo0","kdpuga","useInteractionTagPrimaryStyles_unstable","state","rootRoundedBaseClassName","rootCircularBaseClassName","rootStyles","rootDisabledAppearances","rootWithoutMediaStyles","rootWithSecondaryActionStyles","iconStyles","mediaStyles","primaryTextStyles","secondaryTextBaseClassName","rootCircularContrastStyles","disabled","shape","size","className","hasSecondaryAction","withSecondaryText","withoutSecondaryText"],"sources":["useInteractionTagPrimaryStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { useIconStyles, useMediaStyles, usePrimaryTextStyles, useSecondaryTextBaseClassName } from '../Tag/useTagStyles.styles';\nexport const interactionTagPrimaryClassNames = {\n    root: 'fui-InteractionTagPrimary',\n    media: 'fui-InteractionTagPrimary__media',\n    icon: 'fui-InteractionTagPrimary__icon',\n    primaryText: 'fui-InteractionTagPrimary__primaryText',\n    secondaryText: 'fui-InteractionTagPrimary__secondaryText'\n};\nconst baseStyles = {\n    // reset default button style:\n    color: 'inherit',\n    fontFamily: 'inherit',\n    padding: '0px',\n    borderStyle: 'none',\n    appearance: 'button',\n    textAlign: 'unset',\n    backgroundColor: 'transparent',\n    display: 'inline-grid',\n    height: '100%',\n    alignItems: 'center',\n    gridTemplateAreas: `\n  \"media primary  \"\n  \"media secondary\"\n  `,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n    ...createCustomFocusIndicatorStyle({\n        outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n        zIndex: 1\n    })\n};\nconst useRootRoundedBaseClassName = makeResetStyles({\n    ...baseStyles,\n    borderRadius: tokens.borderRadiusMedium,\n    /**\n   * Pseudo element to draw the border for windows high contrast mode -\n   * when Tag is with secondary text, primary text has negative margin that covers the border.\n   */ '@media (forced-colors: active)': {\n        position: 'relative',\n        '::before': {\n            content: '\"\"',\n            borderTop: `${tokens.strokeWidthThin} solid`,\n            position: 'absolute',\n            inset: '-1px',\n            borderTopLeftRadius: tokens.borderRadiusMedium,\n            borderTopRightRadius: tokens.borderRadiusMedium\n        }\n    }\n});\nconst useRootCircularBaseClassName = makeResetStyles({\n    ...baseStyles,\n    borderRadius: tokens.borderRadiusCircular,\n    /**\n   * Pseudo element to draw the border for windows high contrast mode -\n   * when Tag is with secondary text, primary text has negative margin that covers the border.\n   */ '@media (forced-colors: active)': {\n        position: 'relative',\n        '::before': {\n            content: '\"\"',\n            borderTop: `${tokens.strokeWidthThin} solid`,\n            borderLeft: `${tokens.strokeWidthThin} solid`,\n            position: 'absolute',\n            inset: '-1px',\n            borderTopLeftRadius: tokens.borderRadiusCircular,\n            borderBottomLeftRadius: tokens.borderRadiusCircular\n        }\n    }\n});\n/**\n * Style override for pseudo element that draws the border for windows high contrast mode\n */ const useRootCircularContrastStyles = makeStyles({\n    withoutSecondaryAction: {\n        '@media (forced-colors: active)': {\n            position: 'relative',\n            '::before': {\n                borderRight: `${tokens.strokeWidthThin} solid transparent`,\n                borderTopRightRadius: tokens.borderRadiusCircular,\n                borderBottomRightRadius: tokens.borderRadiusCircular\n            }\n        }\n    }\n});\nconst useRootStyles = makeStyles({\n    filled: {\n        backgroundColor: tokens.colorNeutralBackground3,\n        color: tokens.colorNeutralForeground2,\n        ':hover': {\n            cursor: 'pointer',\n            backgroundColor: tokens.colorNeutralBackground3Hover,\n            color: tokens.colorNeutralForeground2Hover\n        },\n        ':active': {\n            backgroundColor: tokens.colorNeutralBackground3Pressed,\n            color: tokens.colorNeutralForeground2Pressed\n        },\n        '@media (forced-colors: active)': {\n            ':hover': {\n                backgroundColor: 'HighlightText'\n            },\n            ':active': {\n                backgroundColor: 'HighlightText'\n            }\n        }\n    },\n    outline: {\n        backgroundColor: tokens.colorSubtleBackground,\n        color: tokens.colorNeutralForeground2,\n        ...shorthands.borderColor(tokens.colorNeutralStroke1),\n        ':hover': {\n            cursor: 'pointer',\n            backgroundColor: tokens.colorSubtleBackgroundHover,\n            color: tokens.colorNeutralForeground2Hover,\n            [`& .${iconFilledClassName}`]: {\n                display: 'inline',\n                color: tokens.colorNeutralForeground2BrandHover\n            },\n            [`& .${iconRegularClassName}`]: {\n                display: 'none'\n            }\n        },\n        ':active': {\n            backgroundColor: tokens.colorSubtleBackgroundPressed,\n            color: tokens.colorNeutralForeground2Pressed,\n            [`& .${iconFilledClassName}`]: {\n                display: 'inline',\n                color: tokens.colorNeutralForeground2BrandPressed\n            },\n            [`& .${iconRegularClassName}`]: {\n                display: 'none'\n            }\n        },\n        '@media (forced-colors: active)': {\n            ':hover': {\n                backgroundColor: 'HighlightText'\n            },\n            ':active': {\n                backgroundColor: 'HighlightText'\n            }\n        }\n    },\n    brand: {\n        backgroundColor: tokens.colorBrandBackground2,\n        color: tokens.colorBrandForeground2,\n        ':hover': {\n            cursor: 'pointer',\n            backgroundColor: tokens.colorBrandBackground2Hover,\n            color: tokens.colorCompoundBrandForeground1Hover\n        },\n        ':active': {\n            backgroundColor: tokens.colorBrandBackground2Pressed,\n            color: tokens.colorCompoundBrandForeground1Pressed\n        },\n        '@media (forced-colors: active)': {\n            ':hover': {\n                backgroundColor: 'HighlightText'\n            },\n            ':active': {\n                backgroundColor: 'HighlightText'\n            }\n        }\n    },\n    selected: {\n        background: tokens.colorBrandBackground,\n        color: tokens.colorNeutralForegroundOnBrand,\n        ...shorthands.borderColor(tokens.colorBrandStroke1),\n        '@media (forced-colors: active)': {\n            forcedColorAdjust: 'none',\n            backgroundColor: 'Highlight',\n            color: 'HighlightText'\n        },\n        ':hover': {\n            backgroundColor: tokens.colorBrandBackgroundHover,\n            color: tokens.colorNeutralForegroundOnBrand,\n            [`& .${iconFilledClassName}`]: {\n                color: tokens.colorNeutralForegroundOnBrand\n            },\n            '@media (forced-colors: active)': {\n                backgroundColor: 'Highlight',\n                color: 'HighlightText'\n            }\n        },\n        ':active': {\n            backgroundColor: tokens.colorBrandBackgroundPressed,\n            color: tokens.colorNeutralForegroundOnBrand,\n            [`& .${iconFilledClassName}`]: {\n                color: tokens.colorNeutralForegroundOnBrand\n            },\n            '@media (forced-colors: active)': {\n                backgroundColor: 'Highlight',\n                color: 'HighlightText'\n            }\n        }\n    },\n    medium: {\n        paddingRight: '7px'\n    },\n    small: {\n        paddingRight: '5px'\n    },\n    'extra-small': {\n        paddingRight: '5px',\n        position: 'relative',\n        // Increase clickable area to meet WCAG 2.2 AA\n        // https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html\n        '@media (forced-colors: none)': {\n            '&:before, &:after': {\n                content: '\"\"',\n                position: 'absolute',\n                height: '2px',\n                left: '0',\n                width: '100%'\n            },\n            '&:before': {\n                bottom: '100%'\n            },\n            '&:after': {\n                top: '100%'\n            }\n        }\n    }\n});\nconst useRootDisabledAppearances = makeStyles({\n    filled: {\n        cursor: 'not-allowed',\n        backgroundColor: tokens.colorNeutralBackgroundDisabled,\n        color: tokens.colorNeutralForegroundDisabled,\n        ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled)\n    },\n    outline: {\n        cursor: 'not-allowed',\n        backgroundColor: tokens.colorSubtleBackground,\n        color: tokens.colorNeutralForegroundDisabled,\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled)\n    },\n    brand: {\n        cursor: 'not-allowed',\n        backgroundColor: tokens.colorNeutralBackgroundDisabled,\n        color: tokens.colorNeutralForegroundDisabled,\n        ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled)\n    }\n});\n/**\n * Styles for InteractionTagPrimary without leading media/icon\n */ const useRootWithoutMediaStyles = makeStyles({\n    medium: {\n        paddingLeft: '7px'\n    },\n    small: {\n        paddingLeft: '5px'\n    },\n    'extra-small': {\n        paddingLeft: '5px'\n    }\n});\n/**\n * Styles for InteractionTagPrimary when InteractionTag has a Secondary button\n */ const useRootWithSecondaryActionStyles = makeStyles({\n    base: {\n        borderTopRightRadius: tokens.borderRadiusNone,\n        borderBottomRightRadius: tokens.borderRadiusNone,\n        borderRightStyle: 'none',\n        ...createCustomFocusIndicatorStyle({\n            borderTopRightRadius: tokens.borderRadiusNone,\n            borderBottomRightRadius: tokens.borderRadiusNone\n        }),\n        '@media (forced-colors: active)': {\n            '::before': {\n                borderTopRightRadius: '0'\n            }\n        }\n    },\n    medium: {\n        paddingRight: tokens.spacingHorizontalS\n    },\n    small: {\n        paddingRight: tokens.spacingHorizontalSNudge\n    },\n    'extra-small': {\n        paddingRight: tokens.spacingHorizontalSNudge\n    }\n});\nexport const useInteractionTagPrimaryStyles_unstable = (state)=>{\n    'use no memo';\n    const rootRoundedBaseClassName = useRootRoundedBaseClassName();\n    const rootCircularBaseClassName = useRootCircularBaseClassName();\n    const rootStyles = useRootStyles();\n    const rootDisabledAppearances = useRootDisabledAppearances();\n    const rootWithoutMediaStyles = useRootWithoutMediaStyles();\n    const rootWithSecondaryActionStyles = useRootWithSecondaryActionStyles();\n    const iconStyles = useIconStyles();\n    const mediaStyles = useMediaStyles();\n    const primaryTextStyles = usePrimaryTextStyles();\n    const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n    const rootCircularContrastStyles = useRootCircularContrastStyles();\n    const { disabled, shape, size, appearance, selected } = state;\n    state.root.className = mergeClasses(interactionTagPrimaryClassNames.root, shape === 'rounded' ? rootRoundedBaseClassName : rootCircularBaseClassName, shape === 'circular' && !state.hasSecondaryAction && rootCircularContrastStyles.withoutSecondaryAction, disabled ? rootDisabledAppearances[appearance] : rootStyles[appearance], selected && !disabled && rootStyles.selected, rootStyles[size], !state.media && !state.icon && rootWithoutMediaStyles[size], state.hasSecondaryAction && rootWithSecondaryActionStyles.base, state.hasSecondaryAction && rootWithSecondaryActionStyles[size], state.root.className);\n    if (state.media) {\n        state.media.className = mergeClasses(interactionTagPrimaryClassNames.media, mediaStyles.base, mediaStyles[size], state.media.className);\n    }\n    if (state.icon) {\n        state.icon.className = mergeClasses(interactionTagPrimaryClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);\n    }\n    if (state.primaryText) {\n        state.primaryText.className = mergeClasses(interactionTagPrimaryClassNames.primaryText, primaryTextStyles.base, primaryTextStyles[size], state.secondaryText ? primaryTextStyles.withSecondaryText : primaryTextStyles.withoutSecondaryText, state.primaryText.className);\n    }\n    if (state.secondaryText) {\n        state.secondaryText.className = mergeClasses(interactionTagPrimaryClassNames.secondaryText, secondaryTextBaseClassName, state.secondaryText.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","iconFilledClassName","iconRegularClassName","useIconStyles","useMediaStyles","usePrimaryTextStyles","useSecondaryTextBaseClassName","interactionTagPrimaryClassNames","root","media","icon","primaryText","secondaryText","baseStyles","color","fontFamily","padding","borderStyle","appearance","textAlign","backgroundColor","display","height","alignItems","gridTemplateAreas","border","strokeWidthThin","colorTransparentStroke","outline","strokeWidthThick","colorStrokeFocus2","zIndex","useRootRoundedBaseClassName","r","s","useRootCircularBaseClassName","useRootCircularContrastStyles","withoutSecondaryAction","Bvgf1ty","Cqojjj","dd5wkx","Bdzpf8n","ibz501","Bs8828g","Bn0yx1x","m","p","useRootStyles","filled","De3pzq","sj55zd","eoavqd","Jwef8y","Bi91k9c","ecr2s2","lj723h","Bbkh6qg","Cnge2b","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bk3fhr4","I6i3kg","Bmfj8id","Bnrwwps","weioyw","Bpre390","brand","selected","Bgh53k4","B2eet1l","Bcmaq0h","gk0gix","B20660r","B8a6bjv","Bpptf2m","e5kdtc","Bkjc3bi","ayd6f0","B8gzw0y","By8wz76","B7iucu3","Bahaeuw","Boo3t63","medium","z189sj","small","qhf8xq","Ie5t1m","G6hvz8","wgw0td","Bbwa3xj","m3mfg4","B9s7hj8","B9e1dac","d","h","a","useRootDisabledAppearances","Bceei9c","useRootWithoutMediaStyles","uwmqm3","useRootWithSecondaryActionStyles","base","B7oj6ja","Bbmb7ep","vrafjx","B6xbmo0","kdpuga","useInteractionTagPrimaryStyles_unstable","state","rootRoundedBaseClassName","rootCircularBaseClassName","rootStyles","rootDisabledAppearances","rootWithoutMediaStyles","rootWithSecondaryActionStyles","iconStyles","mediaStyles","primaryTextStyles","secondaryTextBaseClassName","rootCircularContrastStyles","disabled","shape","size","className","hasSecondaryAction","withSecondaryText","withoutSecondaryText"],"sources":["useInteractionTagPrimaryStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { useIconStyles, useMediaStyles, usePrimaryTextStyles, useSecondaryTextBaseClassName } from '../Tag/useTagStyles.styles';\nexport const interactionTagPrimaryClassNames = {\n    root: 'fui-InteractionTagPrimary',\n    media: 'fui-InteractionTagPrimary__media',\n    icon: 'fui-InteractionTagPrimary__icon',\n    primaryText: 'fui-InteractionTagPrimary__primaryText',\n    secondaryText: 'fui-InteractionTagPrimary__secondaryText'\n};\nconst baseStyles = {\n    // reset default button style:\n    color: 'inherit',\n    fontFamily: 'inherit',\n    padding: '0px',\n    borderStyle: 'none',\n    appearance: 'button',\n    textAlign: 'unset',\n    backgroundColor: 'transparent',\n    display: 'inline-grid',\n    height: '100%',\n    alignItems: 'center',\n    gridTemplateAreas: `\n  \"media primary  \"\n  \"media secondary\"\n  `,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n    ...createCustomFocusIndicatorStyle({\n        outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n        zIndex: 1\n    })\n};\nconst useRootRoundedBaseClassName = makeResetStyles({\n    ...baseStyles,\n    borderRadius: tokens.borderRadiusMedium,\n    /**\n   * Pseudo element to draw the border for windows high contrast mode -\n   * when Tag is with secondary text, primary text has negative margin that covers the border.\n   */ '@media (forced-colors: active)': {\n        position: 'relative',\n        '::before': {\n            content: '\"\"',\n            borderTop: `${tokens.strokeWidthThin} solid`,\n            position: 'absolute',\n            inset: '-1px',\n            borderTopLeftRadius: tokens.borderRadiusMedium,\n            borderTopRightRadius: tokens.borderRadiusMedium\n        }\n    }\n});\nconst useRootCircularBaseClassName = makeResetStyles({\n    ...baseStyles,\n    borderRadius: tokens.borderRadiusCircular,\n    /**\n   * Pseudo element to draw the border for windows high contrast mode -\n   * when Tag is with secondary text, primary text has negative margin that covers the border.\n   */ '@media (forced-colors: active)': {\n        position: 'relative',\n        '::before': {\n            content: '\"\"',\n            borderTop: `${tokens.strokeWidthThin} solid`,\n            borderLeft: `${tokens.strokeWidthThin} solid`,\n            position: 'absolute',\n            inset: '-1px',\n            borderTopLeftRadius: tokens.borderRadiusCircular,\n            borderBottomLeftRadius: tokens.borderRadiusCircular\n        }\n    }\n});\n/**\n * Style override for pseudo element that draws the border for windows high contrast mode\n */ const useRootCircularContrastStyles = makeStyles({\n    withoutSecondaryAction: {\n        '@media (forced-colors: active)': {\n            position: 'relative',\n            '::before': {\n                borderRight: `${tokens.strokeWidthThin} solid transparent`,\n                borderTopRightRadius: tokens.borderRadiusCircular,\n                borderBottomRightRadius: tokens.borderRadiusCircular\n            }\n        }\n    }\n});\nconst useRootStyles = makeStyles({\n    filled: {\n        backgroundColor: tokens.colorNeutralBackground3,\n        color: tokens.colorNeutralForeground2,\n        ':hover': {\n            cursor: 'pointer',\n            backgroundColor: tokens.colorNeutralBackground3Hover,\n            color: tokens.colorNeutralForeground2Hover\n        },\n        ':active': {\n            backgroundColor: tokens.colorNeutralBackground3Pressed,\n            color: tokens.colorNeutralForeground2Pressed\n        },\n        '@media (forced-colors: active)': {\n            ':hover': {\n                backgroundColor: 'HighlightText'\n            },\n            ':active': {\n                backgroundColor: 'HighlightText'\n            }\n        }\n    },\n    outline: {\n        backgroundColor: tokens.colorSubtleBackground,\n        color: tokens.colorNeutralForeground2,\n        ...shorthands.borderColor(tokens.colorNeutralStroke1),\n        ':hover': {\n            cursor: 'pointer',\n            backgroundColor: tokens.colorSubtleBackgroundHover,\n            color: tokens.colorNeutralForeground2Hover,\n            [`& .${iconFilledClassName}`]: {\n                display: 'inline',\n                color: tokens.colorNeutralForeground2BrandHover\n            },\n            [`& .${iconRegularClassName}`]: {\n                display: 'none'\n            }\n        },\n        ':active': {\n            backgroundColor: tokens.colorSubtleBackgroundPressed,\n            color: tokens.colorNeutralForeground2Pressed,\n            [`& .${iconFilledClassName}`]: {\n                display: 'inline',\n                color: tokens.colorNeutralForeground2BrandPressed\n            },\n            [`& .${iconRegularClassName}`]: {\n                display: 'none'\n            }\n        },\n        '@media (forced-colors: active)': {\n            ':hover': {\n                backgroundColor: 'HighlightText'\n            },\n            ':active': {\n                backgroundColor: 'HighlightText'\n            }\n        }\n    },\n    brand: {\n        backgroundColor: tokens.colorBrandBackground2,\n        color: tokens.colorBrandForeground2,\n        ':hover': {\n            cursor: 'pointer',\n            backgroundColor: tokens.colorBrandBackground2Hover,\n            color: tokens.colorCompoundBrandForeground1Hover\n        },\n        ':active': {\n            backgroundColor: tokens.colorBrandBackground2Pressed,\n            color: tokens.colorCompoundBrandForeground1Pressed\n        },\n        '@media (forced-colors: active)': {\n            ':hover': {\n                backgroundColor: 'HighlightText'\n            },\n            ':active': {\n                backgroundColor: 'HighlightText'\n            }\n        }\n    },\n    selected: {\n        background: tokens.colorBrandBackground,\n        color: tokens.colorNeutralForegroundOnBrand,\n        ...shorthands.borderColor(tokens.colorBrandStroke1),\n        '@media (forced-colors: active)': {\n            forcedColorAdjust: 'none',\n            backgroundColor: 'Highlight',\n            color: 'HighlightText'\n        },\n        ':hover': {\n            backgroundColor: tokens.colorBrandBackgroundHover,\n            color: tokens.colorNeutralForegroundOnBrand,\n            [`& .${iconFilledClassName}`]: {\n                color: tokens.colorNeutralForegroundOnBrand\n            },\n            '@media (forced-colors: active)': {\n                backgroundColor: 'Highlight',\n                color: 'HighlightText'\n            }\n        },\n        ':active': {\n            backgroundColor: tokens.colorBrandBackgroundPressed,\n            color: tokens.colorNeutralForegroundOnBrand,\n            [`& .${iconFilledClassName}`]: {\n                color: tokens.colorNeutralForegroundOnBrand\n            },\n            '@media (forced-colors: active)': {\n                backgroundColor: 'Highlight',\n                color: 'HighlightText'\n            }\n        }\n    },\n    medium: {\n        paddingRight: '7px'\n    },\n    small: {\n        paddingRight: '5px'\n    },\n    'extra-small': {\n        paddingRight: '5px',\n        position: 'relative',\n        // Increase clickable area to meet WCAG 2.2 AA\n        // https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html\n        '@media (forced-colors: none)': {\n            '&:before, &:after': {\n                content: '\"\"',\n                position: 'absolute',\n                height: '2px',\n                left: '0',\n                width: '100%'\n            },\n            '&:before': {\n                bottom: '100%'\n            },\n            '&:after': {\n                top: '100%'\n            }\n        }\n    }\n});\nconst useRootDisabledAppearances = makeStyles({\n    filled: {\n        cursor: 'not-allowed',\n        backgroundColor: tokens.colorNeutralBackgroundDisabled,\n        color: tokens.colorNeutralForegroundDisabled,\n        ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled)\n    },\n    outline: {\n        cursor: 'not-allowed',\n        backgroundColor: tokens.colorSubtleBackground,\n        color: tokens.colorNeutralForegroundDisabled,\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled)\n    },\n    brand: {\n        cursor: 'not-allowed',\n        backgroundColor: tokens.colorNeutralBackgroundDisabled,\n        color: tokens.colorNeutralForegroundDisabled,\n        ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled)\n    }\n});\n/**\n * Styles for InteractionTagPrimary without leading media/icon\n */ const useRootWithoutMediaStyles = makeStyles({\n    medium: {\n        paddingLeft: '7px'\n    },\n    small: {\n        paddingLeft: '5px'\n    },\n    'extra-small': {\n        paddingLeft: '5px'\n    }\n});\n/**\n * Styles for InteractionTagPrimary when InteractionTag has a Secondary button\n */ const useRootWithSecondaryActionStyles = makeStyles({\n    base: {\n        borderTopRightRadius: tokens.borderRadiusNone,\n        borderBottomRightRadius: tokens.borderRadiusNone,\n        borderRightStyle: 'none',\n        ...createCustomFocusIndicatorStyle({\n            borderTopRightRadius: tokens.borderRadiusNone,\n            borderBottomRightRadius: tokens.borderRadiusNone\n        }),\n        '@media (forced-colors: active)': {\n            '::before': {\n                borderTopRightRadius: '0'\n            }\n        }\n    },\n    medium: {\n        paddingRight: tokens.spacingHorizontalS\n    },\n    small: {\n        paddingRight: tokens.spacingHorizontalSNudge\n    },\n    'extra-small': {\n        paddingRight: tokens.spacingHorizontalSNudge\n    }\n});\nexport const useInteractionTagPrimaryStyles_unstable = (state)=>{\n    'use no memo';\n    const rootRoundedBaseClassName = useRootRoundedBaseClassName();\n    const rootCircularBaseClassName = useRootCircularBaseClassName();\n    const rootStyles = useRootStyles();\n    const rootDisabledAppearances = useRootDisabledAppearances();\n    const rootWithoutMediaStyles = useRootWithoutMediaStyles();\n    const rootWithSecondaryActionStyles = useRootWithSecondaryActionStyles();\n    const iconStyles = useIconStyles();\n    const mediaStyles = useMediaStyles();\n    const primaryTextStyles = usePrimaryTextStyles();\n    const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n    const rootCircularContrastStyles = useRootCircularContrastStyles();\n    const { disabled, shape, size, appearance, selected } = state;\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(interactionTagPrimaryClassNames.root, shape === 'rounded' ? rootRoundedBaseClassName : rootCircularBaseClassName, shape === 'circular' && !state.hasSecondaryAction && rootCircularContrastStyles.withoutSecondaryAction, disabled ? rootDisabledAppearances[appearance] : rootStyles[appearance], selected && !disabled && rootStyles.selected, rootStyles[size], !state.media && !state.icon && rootWithoutMediaStyles[size], state.hasSecondaryAction && rootWithSecondaryActionStyles.base, state.hasSecondaryAction && rootWithSecondaryActionStyles[size], state.root.className);\n    if (state.media) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.media.className = mergeClasses(interactionTagPrimaryClassNames.media, mediaStyles.base, mediaStyles[size], state.media.className);\n    }\n    if (state.icon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.icon.className = mergeClasses(interactionTagPrimaryClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);\n    }\n    if (state.primaryText) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.primaryText.className = mergeClasses(interactionTagPrimaryClassNames.primaryText, primaryTextStyles.base, primaryTextStyles[size], state.secondaryText ? primaryTextStyles.withSecondaryText : primaryTextStyles.withoutSecondaryText, state.primaryText.className);\n    }\n    if (state.secondaryText) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.secondaryText.className = mergeClasses(interactionTagPrimaryClassNames.secondaryText, secondaryTextBaseClassName, state.secondaryText.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.raw.js

@@ -297,17 +297,22 @@ export const useInteractionTagPrimaryStyles_unstable = (state)=>{
     const secondaryTextBaseClassName = useSecondaryTextBaseClassName();
     const rootCircularContrastStyles = useRootCircularContrastStyles();
     const { disabled, shape, size, appearance, selected } = state;
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(interactionTagPrimaryClassNames.root, shape === 'rounded' ? rootRoundedBaseClassName : rootCircularBaseClassName, shape === 'circular' && !state.hasSecondaryAction && rootCircularContrastStyles.withoutSecondaryAction, disabled ? rootDisabledAppearances[appearance] : rootStyles[appearance], selected && !disabled && rootStyles.selected, rootStyles[size], !state.media && !state.icon && rootWithoutMediaStyles[size], state.hasSecondaryAction && rootWithSecondaryActionStyles.base, state.hasSecondaryAction && rootWithSecondaryActionStyles[size], state.root.className);
     if (state.media) {
+        // eslint-disable-next-line react-hooks/immutability
         state.media.className = mergeClasses(interactionTagPrimaryClassNames.media, mediaStyles.base, mediaStyles[size], state.media.className);
     }
     if (state.icon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = mergeClasses(interactionTagPrimaryClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);
     }
     if (state.primaryText) {
+        // eslint-disable-next-line react-hooks/immutability
         state.primaryText.className = mergeClasses(interactionTagPrimaryClassNames.primaryText, primaryTextStyles.base, primaryTextStyles[size], state.secondaryText ? primaryTextStyles.withSecondaryText : primaryTextStyles.withoutSecondaryText, state.primaryText.className);
     }
     if (state.secondaryText) {
+        // eslint-disable-next-line react-hooks/immutability
         state.secondaryText.className = mergeClasses(interactionTagPrimaryClassNames.secondaryText, secondaryTextBaseClassName, state.secondaryText.className);
     }
     return state;

package/lib/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { GriffelResetStyle, makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { InteractionTagPrimarySlots, InteractionTagPrimaryState } from './InteractionTagPrimary.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport {\n  useIconStyles,\n  useMediaStyles,\n  usePrimaryTextStyles,\n  useSecondaryTextBaseClassName,\n} from '../Tag/useTagStyles.styles';\n\nexport const interactionTagPrimaryClassNames: SlotClassNames<InteractionTagPrimarySlots> = {\n  root: 'fui-InteractionTagPrimary',\n  media: 'fui-InteractionTagPrimary__media',\n  icon: 'fui-InteractionTagPrimary__icon',\n  primaryText: 'fui-InteractionTagPrimary__primaryText',\n  secondaryText: 'fui-InteractionTagPrimary__secondaryText',\n};\n\nconst baseStyles: GriffelResetStyle = {\n  // reset default button style:\n  color: 'inherit',\n  fontFamily: 'inherit',\n  padding: '0px',\n  borderStyle: 'none',\n  appearance: 'button',\n  textAlign: 'unset',\n  backgroundColor: 'transparent',\n\n  display: 'inline-grid',\n  height: '100%',\n  alignItems: 'center',\n  gridTemplateAreas: `\n  \"media primary  \"\n  \"media secondary\"\n  `,\n\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n  ...createCustomFocusIndicatorStyle({\n    outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n    zIndex: 1,\n  }),\n};\n\nconst useRootRoundedBaseClassName = makeResetStyles({\n  ...baseStyles,\n  borderRadius: tokens.borderRadiusMedium,\n\n  /**\n   * Pseudo element to draw the border for windows high contrast mode -\n   * when Tag is with secondary text, primary text has negative margin that covers the border.\n   */\n  '@media (forced-colors: active)': {\n    position: 'relative',\n    '::before': {\n      content: '\"\"',\n      borderTop: `${tokens.strokeWidthThin} solid`,\n      position: 'absolute',\n      inset: '-1px',\n      borderTopLeftRadius: tokens.borderRadiusMedium,\n      borderTopRightRadius: tokens.borderRadiusMedium,\n    },\n  },\n});\n\nconst useRootCircularBaseClassName = makeResetStyles({\n  ...baseStyles,\n  borderRadius: tokens.borderRadiusCircular,\n\n  /**\n   * Pseudo element to draw the border for windows high contrast mode -\n   * when Tag is with secondary text, primary text has negative margin that covers the border.\n   */\n  '@media (forced-colors: active)': {\n    position: 'relative',\n    '::before': {\n      content: '\"\"',\n      borderTop: `${tokens.strokeWidthThin} solid`,\n      borderLeft: `${tokens.strokeWidthThin} solid`,\n      position: 'absolute',\n      inset: '-1px',\n      borderTopLeftRadius: tokens.borderRadiusCircular,\n      borderBottomLeftRadius: tokens.borderRadiusCircular,\n    },\n  },\n});\n\n/**\n * Style override for pseudo element that draws the border for windows high contrast mode\n */\nconst useRootCircularContrastStyles = makeStyles({\n  withoutSecondaryAction: {\n    '@media (forced-colors: active)': {\n      position: 'relative',\n      '::before': {\n        borderRight: `${tokens.strokeWidthThin} solid transparent`,\n        borderTopRightRadius: tokens.borderRadiusCircular,\n        borderBottomRightRadius: tokens.borderRadiusCircular,\n      },\n    },\n  },\n});\n\nconst useRootStyles = makeStyles({\n  filled: {\n    backgroundColor: tokens.colorNeutralBackground3,\n    color: tokens.colorNeutralForeground2,\n    ':hover': {\n      cursor: 'pointer',\n      backgroundColor: tokens.colorNeutralBackground3Hover,\n      color: tokens.colorNeutralForeground2Hover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorNeutralBackground3Pressed,\n      color: tokens.colorNeutralForeground2Pressed,\n    },\n    '@media (forced-colors: active)': {\n      ':hover': {\n        backgroundColor: 'HighlightText',\n      },\n      ':active': {\n        backgroundColor: 'HighlightText',\n      },\n    },\n  },\n  outline: {\n    backgroundColor: tokens.colorSubtleBackground,\n    color: tokens.colorNeutralForeground2,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    ':hover': {\n      cursor: 'pointer',\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n      color: tokens.colorNeutralForeground2Hover,\n\n      [`& .${iconFilledClassName}`]: {\n        display: 'inline',\n        color: tokens.colorNeutralForeground2BrandHover,\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'none',\n      },\n    },\n    ':active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n      color: tokens.colorNeutralForeground2Pressed,\n\n      [`& .${iconFilledClassName}`]: {\n        display: 'inline',\n        color: tokens.colorNeutralForeground2BrandPressed,\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'none',\n      },\n    },\n    '@media (forced-colors: active)': {\n      ':hover': {\n        backgroundColor: 'HighlightText',\n      },\n      ':active': {\n        backgroundColor: 'HighlightText',\n      },\n    },\n  },\n  brand: {\n    backgroundColor: tokens.colorBrandBackground2,\n    color: tokens.colorBrandForeground2,\n    ':hover': {\n      cursor: 'pointer',\n      backgroundColor: tokens.colorBrandBackground2Hover,\n      color: tokens.colorCompoundBrandForeground1Hover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorBrandBackground2Pressed,\n      color: tokens.colorCompoundBrandForeground1Pressed,\n    },\n    '@media (forced-colors: active)': {\n      ':hover': {\n        backgroundColor: 'HighlightText',\n      },\n      ':active': {\n        backgroundColor: 'HighlightText',\n      },\n    },\n  },\n  selected: {\n    background: tokens.colorBrandBackground,\n    color: tokens.colorNeutralForegroundOnBrand,\n    ...shorthands.borderColor(tokens.colorBrandStroke1),\n    '@media (forced-colors: active)': {\n      forcedColorAdjust: 'none',\n      backgroundColor: 'Highlight',\n      color: 'HighlightText',\n    },\n\n    ':hover': {\n      backgroundColor: tokens.colorBrandBackgroundHover,\n      color: tokens.colorNeutralForegroundOnBrand,\n      [`& .${iconFilledClassName}`]: {\n        color: tokens.colorNeutralForegroundOnBrand,\n      },\n      '@media (forced-colors: active)': {\n        backgroundColor: 'Highlight',\n        color: 'HighlightText',\n      },\n    },\n    ':active': {\n      backgroundColor: tokens.colorBrandBackgroundPressed,\n      color: tokens.colorNeutralForegroundOnBrand,\n      [`& .${iconFilledClassName}`]: {\n        color: tokens.colorNeutralForegroundOnBrand,\n      },\n      '@media (forced-colors: active)': {\n        backgroundColor: 'Highlight',\n        color: 'HighlightText',\n      },\n    },\n  },\n  medium: {\n    paddingRight: '7px',\n  },\n  small: {\n    paddingRight: '5px',\n  },\n  'extra-small': {\n    paddingRight: '5px',\n    position: 'relative',\n\n    // Increase clickable area to meet WCAG 2.2 AA\n    // https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html\n    '@media (forced-colors: none)': {\n      '&:before, &:after': {\n        content: '\"\"',\n        position: 'absolute',\n        height: '2px',\n        left: '0',\n        width: '100%',\n      },\n      '&:before': {\n        bottom: '100%',\n      },\n      '&:after': {\n        top: '100%',\n      },\n    },\n  },\n});\nconst useRootDisabledAppearances = makeStyles({\n  filled: {\n    cursor: 'not-allowed',\n    backgroundColor: tokens.colorNeutralBackgroundDisabled,\n    color: tokens.colorNeutralForegroundDisabled,\n    ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),\n  },\n  outline: {\n    cursor: 'not-allowed',\n    backgroundColor: tokens.colorSubtleBackground,\n    color: tokens.colorNeutralForegroundDisabled,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n  },\n  brand: {\n    cursor: 'not-allowed',\n    backgroundColor: tokens.colorNeutralBackgroundDisabled,\n    color: tokens.colorNeutralForegroundDisabled,\n    ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),\n  },\n});\n\n/**\n * Styles for InteractionTagPrimary without leading media/icon\n */\nconst useRootWithoutMediaStyles = makeStyles({\n  medium: {\n    paddingLeft: '7px',\n  },\n  small: {\n    paddingLeft: '5px',\n  },\n  'extra-small': {\n    paddingLeft: '5px',\n  },\n});\n/**\n * Styles for InteractionTagPrimary when InteractionTag has a Secondary button\n */\nconst useRootWithSecondaryActionStyles = makeStyles({\n  base: {\n    borderTopRightRadius: tokens.borderRadiusNone,\n    borderBottomRightRadius: tokens.borderRadiusNone,\n    borderRightStyle: 'none',\n    ...createCustomFocusIndicatorStyle({\n      borderTopRightRadius: tokens.borderRadiusNone,\n      borderBottomRightRadius: tokens.borderRadiusNone,\n    }),\n    '@media (forced-colors: active)': {\n      '::before': {\n        borderTopRightRadius: '0',\n      },\n    },\n  },\n  medium: {\n    paddingRight: tokens.spacingHorizontalS,\n  },\n  small: {\n    paddingRight: tokens.spacingHorizontalSNudge,\n  },\n  'extra-small': {\n    paddingRight: tokens.spacingHorizontalSNudge,\n  },\n});\n\nexport const useInteractionTagPrimaryStyles_unstable = (\n  state: InteractionTagPrimaryState,\n): InteractionTagPrimaryState => {\n  'use no memo';\n\n  const rootRoundedBaseClassName = useRootRoundedBaseClassName();\n  const rootCircularBaseClassName = useRootCircularBaseClassName();\n  const rootStyles = useRootStyles();\n  const rootDisabledAppearances = useRootDisabledAppearances();\n  const rootWithoutMediaStyles = useRootWithoutMediaStyles();\n  const rootWithSecondaryActionStyles = useRootWithSecondaryActionStyles();\n\n  const iconStyles = useIconStyles();\n  const mediaStyles = useMediaStyles();\n  const primaryTextStyles = usePrimaryTextStyles();\n  const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n\n  const rootCircularContrastStyles = useRootCircularContrastStyles();\n\n  const { disabled, shape, size, appearance, selected } = state;\n\n  state.root.className = mergeClasses(\n    interactionTagPrimaryClassNames.root,\n\n    shape === 'rounded' ? rootRoundedBaseClassName : rootCircularBaseClassName,\n\n    shape === 'circular' && !state.hasSecondaryAction && rootCircularContrastStyles.withoutSecondaryAction,\n\n    disabled ? rootDisabledAppearances[appearance] : rootStyles[appearance],\n    selected && !disabled && rootStyles.selected,\n    rootStyles[size],\n\n    !state.media && !state.icon && rootWithoutMediaStyles[size],\n    state.hasSecondaryAction && rootWithSecondaryActionStyles.base,\n    state.hasSecondaryAction && rootWithSecondaryActionStyles[size],\n\n    state.root.className,\n  );\n\n  if (state.media) {\n    state.media.className = mergeClasses(\n      interactionTagPrimaryClassNames.media,\n      mediaStyles.base,\n      mediaStyles[size],\n      state.media.className,\n    );\n  }\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      interactionTagPrimaryClassNames.icon,\n      iconStyles.base,\n      iconStyles[size],\n      state.icon.className,\n    );\n  }\n  if (state.primaryText) {\n    state.primaryText.className = mergeClasses(\n      interactionTagPrimaryClassNames.primaryText,\n\n      primaryTextStyles.base,\n      primaryTextStyles[size],\n\n      state.secondaryText ? primaryTextStyles.withSecondaryText : primaryTextStyles.withoutSecondaryText,\n\n      state.primaryText.className,\n    );\n  }\n  if (state.secondaryText) {\n    state.secondaryText.className = mergeClasses(\n      interactionTagPrimaryClassNames.secondaryText,\n      secondaryTextBaseClassName,\n      state.secondaryText.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","iconFilledClassName","iconRegularClassName","useIconStyles","useMediaStyles","usePrimaryTextStyles","useSecondaryTextBaseClassName","interactionTagPrimaryClassNames","root","media","icon","primaryText","secondaryText","baseStyles","color","fontFamily","padding","borderStyle","appearance","textAlign","backgroundColor","display","height","alignItems","gridTemplateAreas","border","strokeWidthThin","colorTransparentStroke","outline","strokeWidthThick","colorStrokeFocus2","zIndex","useRootRoundedBaseClassName","borderRadius","borderRadiusMedium","position","content","borderTop","inset","borderTopLeftRadius","borderTopRightRadius","useRootCircularBaseClassName","borderRadiusCircular","borderLeft","borderBottomLeftRadius","useRootCircularContrastStyles","withoutSecondaryAction","borderRight","borderBottomRightRadius","useRootStyles","filled","colorNeutralBackground3","colorNeutralForeground2","cursor","colorNeutralBackground3Hover","colorNeutralForeground2Hover","colorNeutralBackground3Pressed","colorNeutralForeground2Pressed","colorSubtleBackground","borderColor","colorNeutralStroke1","colorSubtleBackgroundHover","colorNeutralForeground2BrandHover","colorSubtleBackgroundPressed","colorNeutralForeground2BrandPressed","brand","colorBrandBackground2","colorBrandForeground2","colorBrandBackground2Hover","colorCompoundBrandForeground1Hover","colorBrandBackground2Pressed","colorCompoundBrandForeground1Pressed","selected","background","colorBrandBackground","colorNeutralForegroundOnBrand","colorBrandStroke1","forcedColorAdjust","colorBrandBackgroundHover","colorBrandBackgroundPressed","medium","paddingRight","small","left","width","bottom","top","useRootDisabledAppearances","colorNeutralBackgroundDisabled","colorNeutralForegroundDisabled","colorTransparentStrokeDisabled","colorNeutralStrokeDisabled","useRootWithoutMediaStyles","paddingLeft","useRootWithSecondaryActionStyles","base","borderRadiusNone","borderRightStyle","spacingHorizontalS","spacingHorizontalSNudge","useInteractionTagPrimaryStyles_unstable","state","rootRoundedBaseClassName","rootCircularBaseClassName","rootStyles","rootDisabledAppearances","rootWithoutMediaStyles","rootWithSecondaryActionStyles","iconStyles","mediaStyles","primaryTextStyles","secondaryTextBaseClassName","rootCircularContrastStyles","disabled","shape","size","className","hasSecondaryAction","withSecondaryText","withoutSecondaryText"],"mappings":"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"}
+{"version":3,"sources":["../src/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { GriffelResetStyle } from '@griffel/react';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { InteractionTagPrimarySlots, InteractionTagPrimaryState } from './InteractionTagPrimary.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport {\n  useIconStyles,\n  useMediaStyles,\n  usePrimaryTextStyles,\n  useSecondaryTextBaseClassName,\n} from '../Tag/useTagStyles.styles';\n\nexport const interactionTagPrimaryClassNames: SlotClassNames<InteractionTagPrimarySlots> = {\n  root: 'fui-InteractionTagPrimary',\n  media: 'fui-InteractionTagPrimary__media',\n  icon: 'fui-InteractionTagPrimary__icon',\n  primaryText: 'fui-InteractionTagPrimary__primaryText',\n  secondaryText: 'fui-InteractionTagPrimary__secondaryText',\n};\n\nconst baseStyles: GriffelResetStyle = {\n  // reset default button style:\n  color: 'inherit',\n  fontFamily: 'inherit',\n  padding: '0px',\n  borderStyle: 'none',\n  appearance: 'button',\n  textAlign: 'unset',\n  backgroundColor: 'transparent',\n\n  display: 'inline-grid',\n  height: '100%',\n  alignItems: 'center',\n  gridTemplateAreas: `\n  \"media primary  \"\n  \"media secondary\"\n  `,\n\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n  ...createCustomFocusIndicatorStyle({\n    outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n    zIndex: 1,\n  }),\n};\n\nconst useRootRoundedBaseClassName = makeResetStyles({\n  ...baseStyles,\n  borderRadius: tokens.borderRadiusMedium,\n\n  /**\n   * Pseudo element to draw the border for windows high contrast mode -\n   * when Tag is with secondary text, primary text has negative margin that covers the border.\n   */\n  '@media (forced-colors: active)': {\n    position: 'relative',\n    '::before': {\n      content: '\"\"',\n      borderTop: `${tokens.strokeWidthThin} solid`,\n      position: 'absolute',\n      inset: '-1px',\n      borderTopLeftRadius: tokens.borderRadiusMedium,\n      borderTopRightRadius: tokens.borderRadiusMedium,\n    },\n  },\n});\n\nconst useRootCircularBaseClassName = makeResetStyles({\n  ...baseStyles,\n  borderRadius: tokens.borderRadiusCircular,\n\n  /**\n   * Pseudo element to draw the border for windows high contrast mode -\n   * when Tag is with secondary text, primary text has negative margin that covers the border.\n   */\n  '@media (forced-colors: active)': {\n    position: 'relative',\n    '::before': {\n      content: '\"\"',\n      borderTop: `${tokens.strokeWidthThin} solid`,\n      borderLeft: `${tokens.strokeWidthThin} solid`,\n      position: 'absolute',\n      inset: '-1px',\n      borderTopLeftRadius: tokens.borderRadiusCircular,\n      borderBottomLeftRadius: tokens.borderRadiusCircular,\n    },\n  },\n});\n\n/**\n * Style override for pseudo element that draws the border for windows high contrast mode\n */\nconst useRootCircularContrastStyles = makeStyles({\n  withoutSecondaryAction: {\n    '@media (forced-colors: active)': {\n      position: 'relative',\n      '::before': {\n        borderRight: `${tokens.strokeWidthThin} solid transparent`,\n        borderTopRightRadius: tokens.borderRadiusCircular,\n        borderBottomRightRadius: tokens.borderRadiusCircular,\n      },\n    },\n  },\n});\n\nconst useRootStyles = makeStyles({\n  filled: {\n    backgroundColor: tokens.colorNeutralBackground3,\n    color: tokens.colorNeutralForeground2,\n    ':hover': {\n      cursor: 'pointer',\n      backgroundColor: tokens.colorNeutralBackground3Hover,\n      color: tokens.colorNeutralForeground2Hover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorNeutralBackground3Pressed,\n      color: tokens.colorNeutralForeground2Pressed,\n    },\n    '@media (forced-colors: active)': {\n      ':hover': {\n        backgroundColor: 'HighlightText',\n      },\n      ':active': {\n        backgroundColor: 'HighlightText',\n      },\n    },\n  },\n  outline: {\n    backgroundColor: tokens.colorSubtleBackground,\n    color: tokens.colorNeutralForeground2,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    ':hover': {\n      cursor: 'pointer',\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n      color: tokens.colorNeutralForeground2Hover,\n\n      [`& .${iconFilledClassName}`]: {\n        display: 'inline',\n        color: tokens.colorNeutralForeground2BrandHover,\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'none',\n      },\n    },\n    ':active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n      color: tokens.colorNeutralForeground2Pressed,\n\n      [`& .${iconFilledClassName}`]: {\n        display: 'inline',\n        color: tokens.colorNeutralForeground2BrandPressed,\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'none',\n      },\n    },\n    '@media (forced-colors: active)': {\n      ':hover': {\n        backgroundColor: 'HighlightText',\n      },\n      ':active': {\n        backgroundColor: 'HighlightText',\n      },\n    },\n  },\n  brand: {\n    backgroundColor: tokens.colorBrandBackground2,\n    color: tokens.colorBrandForeground2,\n    ':hover': {\n      cursor: 'pointer',\n      backgroundColor: tokens.colorBrandBackground2Hover,\n      color: tokens.colorCompoundBrandForeground1Hover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorBrandBackground2Pressed,\n      color: tokens.colorCompoundBrandForeground1Pressed,\n    },\n    '@media (forced-colors: active)': {\n      ':hover': {\n        backgroundColor: 'HighlightText',\n      },\n      ':active': {\n        backgroundColor: 'HighlightText',\n      },\n    },\n  },\n  selected: {\n    background: tokens.colorBrandBackground,\n    color: tokens.colorNeutralForegroundOnBrand,\n    ...shorthands.borderColor(tokens.colorBrandStroke1),\n    '@media (forced-colors: active)': {\n      forcedColorAdjust: 'none',\n      backgroundColor: 'Highlight',\n      color: 'HighlightText',\n    },\n\n    ':hover': {\n      backgroundColor: tokens.colorBrandBackgroundHover,\n      color: tokens.colorNeutralForegroundOnBrand,\n      [`& .${iconFilledClassName}`]: {\n        color: tokens.colorNeutralForegroundOnBrand,\n      },\n      '@media (forced-colors: active)': {\n        backgroundColor: 'Highlight',\n        color: 'HighlightText',\n      },\n    },\n    ':active': {\n      backgroundColor: tokens.colorBrandBackgroundPressed,\n      color: tokens.colorNeutralForegroundOnBrand,\n      [`& .${iconFilledClassName}`]: {\n        color: tokens.colorNeutralForegroundOnBrand,\n      },\n      '@media (forced-colors: active)': {\n        backgroundColor: 'Highlight',\n        color: 'HighlightText',\n      },\n    },\n  },\n  medium: {\n    paddingRight: '7px',\n  },\n  small: {\n    paddingRight: '5px',\n  },\n  'extra-small': {\n    paddingRight: '5px',\n    position: 'relative',\n\n    // Increase clickable area to meet WCAG 2.2 AA\n    // https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html\n    '@media (forced-colors: none)': {\n      '&:before, &:after': {\n        content: '\"\"',\n        position: 'absolute',\n        height: '2px',\n        left: '0',\n        width: '100%',\n      },\n      '&:before': {\n        bottom: '100%',\n      },\n      '&:after': {\n        top: '100%',\n      },\n    },\n  },\n});\nconst useRootDisabledAppearances = makeStyles({\n  filled: {\n    cursor: 'not-allowed',\n    backgroundColor: tokens.colorNeutralBackgroundDisabled,\n    color: tokens.colorNeutralForegroundDisabled,\n    ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),\n  },\n  outline: {\n    cursor: 'not-allowed',\n    backgroundColor: tokens.colorSubtleBackground,\n    color: tokens.colorNeutralForegroundDisabled,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n  },\n  brand: {\n    cursor: 'not-allowed',\n    backgroundColor: tokens.colorNeutralBackgroundDisabled,\n    color: tokens.colorNeutralForegroundDisabled,\n    ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),\n  },\n});\n\n/**\n * Styles for InteractionTagPrimary without leading media/icon\n */\nconst useRootWithoutMediaStyles = makeStyles({\n  medium: {\n    paddingLeft: '7px',\n  },\n  small: {\n    paddingLeft: '5px',\n  },\n  'extra-small': {\n    paddingLeft: '5px',\n  },\n});\n/**\n * Styles for InteractionTagPrimary when InteractionTag has a Secondary button\n */\nconst useRootWithSecondaryActionStyles = makeStyles({\n  base: {\n    borderTopRightRadius: tokens.borderRadiusNone,\n    borderBottomRightRadius: tokens.borderRadiusNone,\n    borderRightStyle: 'none',\n    ...createCustomFocusIndicatorStyle({\n      borderTopRightRadius: tokens.borderRadiusNone,\n      borderBottomRightRadius: tokens.borderRadiusNone,\n    }),\n    '@media (forced-colors: active)': {\n      '::before': {\n        borderTopRightRadius: '0',\n      },\n    },\n  },\n  medium: {\n    paddingRight: tokens.spacingHorizontalS,\n  },\n  small: {\n    paddingRight: tokens.spacingHorizontalSNudge,\n  },\n  'extra-small': {\n    paddingRight: tokens.spacingHorizontalSNudge,\n  },\n});\n\nexport const useInteractionTagPrimaryStyles_unstable = (\n  state: InteractionTagPrimaryState,\n): InteractionTagPrimaryState => {\n  'use no memo';\n\n  const rootRoundedBaseClassName = useRootRoundedBaseClassName();\n  const rootCircularBaseClassName = useRootCircularBaseClassName();\n  const rootStyles = useRootStyles();\n  const rootDisabledAppearances = useRootDisabledAppearances();\n  const rootWithoutMediaStyles = useRootWithoutMediaStyles();\n  const rootWithSecondaryActionStyles = useRootWithSecondaryActionStyles();\n\n  const iconStyles = useIconStyles();\n  const mediaStyles = useMediaStyles();\n  const primaryTextStyles = usePrimaryTextStyles();\n  const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n\n  const rootCircularContrastStyles = useRootCircularContrastStyles();\n\n  const { disabled, shape, size, appearance, selected } = state;\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    interactionTagPrimaryClassNames.root,\n\n    shape === 'rounded' ? rootRoundedBaseClassName : rootCircularBaseClassName,\n\n    shape === 'circular' && !state.hasSecondaryAction && rootCircularContrastStyles.withoutSecondaryAction,\n\n    disabled ? rootDisabledAppearances[appearance] : rootStyles[appearance],\n    selected && !disabled && rootStyles.selected,\n    rootStyles[size],\n\n    !state.media && !state.icon && rootWithoutMediaStyles[size],\n    state.hasSecondaryAction && rootWithSecondaryActionStyles.base,\n    state.hasSecondaryAction && rootWithSecondaryActionStyles[size],\n\n    state.root.className,\n  );\n\n  if (state.media) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.media.className = mergeClasses(\n      interactionTagPrimaryClassNames.media,\n      mediaStyles.base,\n      mediaStyles[size],\n      state.media.className,\n    );\n  }\n  if (state.icon) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.icon.className = mergeClasses(\n      interactionTagPrimaryClassNames.icon,\n      iconStyles.base,\n      iconStyles[size],\n      state.icon.className,\n    );\n  }\n  if (state.primaryText) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.primaryText.className = mergeClasses(\n      interactionTagPrimaryClassNames.primaryText,\n\n      primaryTextStyles.base,\n      primaryTextStyles[size],\n\n      state.secondaryText ? primaryTextStyles.withSecondaryText : primaryTextStyles.withoutSecondaryText,\n\n      state.primaryText.className,\n    );\n  }\n  if (state.secondaryText) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.secondaryText.className = mergeClasses(\n      interactionTagPrimaryClassNames.secondaryText,\n      secondaryTextBaseClassName,\n      state.secondaryText.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","iconFilledClassName","iconRegularClassName","useIconStyles","useMediaStyles","usePrimaryTextStyles","useSecondaryTextBaseClassName","interactionTagPrimaryClassNames","root","media","icon","primaryText","secondaryText","baseStyles","color","fontFamily","padding","borderStyle","appearance","textAlign","backgroundColor","display","height","alignItems","gridTemplateAreas","border","strokeWidthThin","colorTransparentStroke","outline","strokeWidthThick","colorStrokeFocus2","zIndex","useRootRoundedBaseClassName","borderRadius","borderRadiusMedium","position","content","borderTop","inset","borderTopLeftRadius","borderTopRightRadius","useRootCircularBaseClassName","borderRadiusCircular","borderLeft","borderBottomLeftRadius","useRootCircularContrastStyles","withoutSecondaryAction","borderRight","borderBottomRightRadius","useRootStyles","filled","colorNeutralBackground3","colorNeutralForeground2","cursor","colorNeutralBackground3Hover","colorNeutralForeground2Hover","colorNeutralBackground3Pressed","colorNeutralForeground2Pressed","colorSubtleBackground","borderColor","colorNeutralStroke1","colorSubtleBackgroundHover","colorNeutralForeground2BrandHover","colorSubtleBackgroundPressed","colorNeutralForeground2BrandPressed","brand","colorBrandBackground2","colorBrandForeground2","colorBrandBackground2Hover","colorCompoundBrandForeground1Hover","colorBrandBackground2Pressed","colorCompoundBrandForeground1Pressed","selected","background","colorBrandBackground","colorNeutralForegroundOnBrand","colorBrandStroke1","forcedColorAdjust","colorBrandBackgroundHover","colorBrandBackgroundPressed","medium","paddingRight","small","left","width","bottom","top","useRootDisabledAppearances","colorNeutralBackgroundDisabled","colorNeutralForegroundDisabled","colorTransparentStrokeDisabled","colorNeutralStrokeDisabled","useRootWithoutMediaStyles","paddingLeft","useRootWithSecondaryActionStyles","base","borderRadiusNone","borderRightStyle","spacingHorizontalS","spacingHorizontalSNudge","useInteractionTagPrimaryStyles_unstable","state","rootRoundedBaseClassName","rootCircularBaseClassName","rootStyles","rootDisabledAppearances","rootWithoutMediaStyles","rootWithSecondaryActionStyles","iconStyles","mediaStyles","primaryTextStyles","secondaryTextBaseClassName","rootCircularContrastStyles","disabled","shape","size","className","hasSecondaryAction","withSecondaryText","withoutSecondaryText"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InteractionTagSecondary/InteractionTagSecondary.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { InteractionTagContextValue } from '../../contexts/interactionTagContext';\n\nexport type InteractionTagSecondarySlots = {\n  root: NonNullable<Slot<'button'>>;\n};\n\n/**\n * InteractionTagSecondary Props\n */\nexport type InteractionTagSecondaryProps = ComponentProps<InteractionTagSecondarySlots>;\n\n/**\n * State used in rendering InteractionTagSecondary\n */\nexport type InteractionTagSecondaryState = ComponentState<InteractionTagSecondarySlots> &\n  Required<Pick<InteractionTagContextValue, 'appearance' | 'disabled' | 'selected' | 'shape' | 'size'>>;\n\n/**\n * InteractionTagSecondary Base Props - same as InteractionTagSecondaryProps (no design-only own props)\n */\nexport type InteractionTagSecondaryBaseProps = InteractionTagSecondaryProps;\n\n/**\n * InteractionTagSecondary Base State - omits design-only state derived from context\n */\nexport type InteractionTagSecondaryBaseState = Omit<InteractionTagSecondaryState, 'appearance' | 'size' | 'shape'>;\n"],"names":[],"mappings":"AAuBA;;CAEC,GACD,WAAmH"}
+{"version":3,"sources":["../src/components/InteractionTagSecondary/InteractionTagSecondary.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { InteractionTagContextValue } from '../../contexts/interactionTagContext';\n\nexport type InteractionTagSecondarySlots = {\n  root: NonNullable<Slot<'button'>>;\n};\n\n/**\n * InteractionTagSecondary Props\n */\nexport type InteractionTagSecondaryProps = ComponentProps<InteractionTagSecondarySlots>;\n\n/**\n * State used in rendering InteractionTagSecondary\n */\nexport type InteractionTagSecondaryState = ComponentState<InteractionTagSecondarySlots> &\n  Required<Pick<InteractionTagContextValue, 'appearance' | 'disabled' | 'selected' | 'shape' | 'size'>>;\n\n/**\n * InteractionTagSecondary Base Props - same as InteractionTagSecondaryProps (no design-only own props)\n */\nexport type InteractionTagSecondaryBaseProps = InteractionTagSecondaryProps;\n\n/**\n * InteractionTagSecondary Base State - omits design-only state derived from context\n */\nexport type InteractionTagSecondaryBaseState = Omit<InteractionTagSecondaryState, 'appearance' | 'size' | 'shape'>;\n"],"names":[],"mappings":"AAuBA;;CAEC,GACD,WAAmH"}

package/lib/components/InteractionTagSecondary/useInteractionTagSecondaryStyles.styles.js

@@ -205,6 +205,7 @@ export const useInteractionTagSecondaryStyles_unstable = state => {
     size,
     appearance
   } = state;
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(interactionTagSecondaryClassNames.root, rootBaseClassName, disabled ? rootDisabledStyles[appearance] : rootStyles[appearance], rootStyles[shape], rootStyles[size], selected && !disabled && rootStyles.selected, state.root.className);
   return state;
 };