@fluentui/react-tags 9.7.19 → 9.8.0

package/CHANGELOG.md

@@ -1,12 +1,22 @@
 # Change Log - @fluentui/react-tags
 
-This log was last generated on Mon, 30 Mar 2026 14:35:50 GMT and should not be manually modified.
+This log was last generated on Wed, 01 Apr 2026 15:50:23 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.8.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.8.0)
+
+Wed, 01 Apr 2026 15:50:23 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.7.19..@fluentui/react-tags_v9.8.0)
+
+### Minor changes
+
+- feat: add base hooks for Tags components ([PR #35912](https://github.com/microsoft/fluentui/pull/35912) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-avatar to v9.11.0 ([PR #35912](https://github.com/microsoft/fluentui/pull/35912) by beachball)
+
 ## [9.7.19](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.7.19)
 
-Mon, 30 Mar 2026 14:35:50 GMT 
+Mon, 30 Mar 2026 14:37:41 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.7.18..@fluentui/react-tags_v9.7.19)
 
 ### Patches

package/dist/index.d.ts

@@ -2,6 +2,7 @@ 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 { 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';
@@ -16,6 +17,16 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
  */
 export declare const InteractionTag: ForwardRefComponent<InteractionTagProps>;
 
+/**
+ * InteractionTag Base Props - omits design-only props
+ */
+export declare type InteractionTagBaseProps<Value = TagValue> = Omit<InteractionTagProps<Value>, 'appearance' | 'size' | 'shape'>;
+
+/**
+ * InteractionTag Base State - omits design-only state
+ */
+export declare type InteractionTagBaseState<Value = TagValue> = Omit<InteractionTagState<Value>, 'appearance' | 'size' | 'shape'>;
+
 export declare const interactionTagClassNames: SlotClassNames<InteractionTagSlots>;
 
 /**
@@ -39,6 +50,16 @@ declare type InteractionTagContextValues = {
  */
 export declare const InteractionTagPrimary: ForwardRefComponent<InteractionTagPrimaryProps>;
 
+/**
+ * InteractionTagPrimary Base Props - same as InteractionTagPrimaryProps (no design-only own props)
+ */
+export declare type InteractionTagPrimaryBaseProps = InteractionTagPrimaryProps;
+
+/**
+ * InteractionTagPrimary Base State - omits design-only state derived from context
+ */
+export declare type InteractionTagPrimaryBaseState = Omit<InteractionTagPrimaryState, 'appearance' | 'size' | 'shape' | 'avatarShape' | 'avatarSize'>;
+
 export declare const interactionTagPrimaryClassNames: SlotClassNames<InteractionTagPrimarySlots>;
 
 export declare type InteractionTagPrimaryContextValues = TagAvatarContextValues;
@@ -127,6 +148,16 @@ export declare type InteractionTagProps<Value = TagValue> = ComponentProps<Parti
  */
 export declare const InteractionTagSecondary: ForwardRefComponent<InteractionTagSecondaryProps>;
 
+/**
+ * InteractionTagSecondary Base Props - same as InteractionTagSecondaryProps (no design-only own props)
+ */
+export declare type InteractionTagSecondaryBaseProps = InteractionTagSecondaryProps;
+
+/**
+ * InteractionTagSecondary Base State - omits design-only state derived from context
+ */
+export declare type InteractionTagSecondaryBaseState = Omit<InteractionTagSecondaryState, 'appearance' | 'size' | 'shape'>;
+
 export declare const interactionTagSecondaryClassNames: SlotClassNames<InteractionTagSecondarySlots>;
 
 /**
@@ -172,27 +203,27 @@ export declare type InteractionTagState<Value = TagValue> = ComponentState<Inter
 /**
  * Render the final JSX of InteractionTag
  */
-export declare const renderInteractionTag_unstable: (state: InteractionTagState, contextValues: InteractionTagContextValues) => JSXElement;
+export declare const renderInteractionTag_unstable: (state: InteractionTagBaseState, contextValues: InteractionTagContextValues) => JSXElement;
 
 /**
  * Render the final JSX of InteractionTagPrimary
  */
-export declare const renderInteractionTagPrimary_unstable: (state: InteractionTagPrimaryState, contextValues: InteractionTagPrimaryContextValues) => JSXElement;
+export declare const renderInteractionTagPrimary_unstable: (state: InteractionTagPrimaryBaseState, contextValues: InteractionTagPrimaryContextValues) => JSXElement;
 
 /**
  * Render the final JSX of InteractionTagSecondary
  */
-export declare const renderInteractionTagSecondary_unstable: (state: InteractionTagSecondaryState) => JSXElement;
+export declare const renderInteractionTagSecondary_unstable: (state: InteractionTagSecondaryBaseState) => JSXElement;
 
 /**
  * Render the final JSX of Tag
  */
-export declare const renderTag_unstable: (state: TagState, contextValues: TagContextValues) => JSXElement;
+export declare const renderTag_unstable: (state: TagBaseState, contextValues: TagContextValues) => JSXElement;
 
 /**
  * Render the final JSX of TagGroup
  */
-export declare const renderTagGroup_unstable: (state: TagGroupState, contextValue: TagGroupContextValues) => JSXElement;
+export declare const renderTagGroup_unstable: (state: TagGroupBaseState, contextValue: TagGroupContextValues) => JSXElement;
 
 /**
  * Tag component -  a visual representation of an attribute.
@@ -209,6 +240,16 @@ declare type TagAvatarContextValues = {
     };
 };
 
+/**
+ * Tag Base Props - omits design-only props
+ */
+export declare type TagBaseProps = DistributiveOmit<TagProps, 'appearance' | 'size' | 'shape'>;
+
+/**
+ * Tag Base State - omits design-only state
+ */
+export declare type TagBaseState = DistributiveOmit<TagState, 'appearance' | 'size' | 'shape' | 'avatarShape' | 'avatarSize'>;
+
 export declare const tagClassNames: SlotClassNames<TagSlots>;
 
 declare type TagContextValues = TagAvatarContextValues;
@@ -227,6 +268,16 @@ export declare type TagDismissHandler<Value = TagValue> = (e: TagDismissEvent, d
  */
 export declare const TagGroup: ForwardRefComponent<TagGroupProps>;
 
+/**
+ * TagGroup Base Props - omits design-only props
+ */
+export declare type TagGroupBaseProps<Value = TagValue> = Omit<TagGroupProps<Value>, 'appearance' | 'size'>;
+
+/**
+ * TagGroup Base State - omits design-only state
+ */
+export declare type TagGroupBaseState<Value = TagValue> = Omit<TagGroupState<Value>, 'appearance' | 'size'>;
+
 export declare const tagGroupClassNames: SlotClassNames<TagGroupSlots>;
 
 /**
@@ -382,6 +433,14 @@ export declare type TagValue = string;
  */
 export declare const useInteractionTag_unstable: (props: InteractionTagProps, ref: React_2.Ref<HTMLDivElement>) => InteractionTagState;
 
+/**
+ * Create the base state required to render InteractionTag, without design-only props.
+ *
+ * @param props - props from this instance of InteractionTag (without appearance, size, shape)
+ * @param ref - reference to root HTMLDivElement of InteractionTag
+ */
+export declare const useInteractionTagBase_unstable: (props: InteractionTagBaseProps, ref: React_2.Ref<HTMLDivElement>) => InteractionTagBaseState;
+
 export declare function useInteractionTagContextValues_unstable(state: InteractionTagState): InteractionTagContextValues;
 
 /**
@@ -395,6 +454,14 @@ export declare function useInteractionTagContextValues_unstable(state: Interacti
  */
 export declare const useInteractionTagPrimary_unstable: (props: InteractionTagPrimaryProps, ref: React_2.Ref<HTMLButtonElement>) => InteractionTagPrimaryState;
 
+/**
+ * Create the base state required to render InteractionTagPrimary, without design-only props.
+ *
+ * @param props - props from this instance of InteractionTagPrimary
+ * @param ref - reference to root HTMLButtonElement of InteractionTagPrimary
+ */
+export declare const useInteractionTagPrimaryBase_unstable: (props: InteractionTagPrimaryBaseProps, ref: React_2.Ref<HTMLButtonElement>) => InteractionTagPrimaryBaseState;
+
 export declare const useInteractionTagPrimaryStyles_unstable: (state: InteractionTagPrimaryState) => InteractionTagPrimaryState;
 
 /**
@@ -408,6 +475,14 @@ export declare const useInteractionTagPrimaryStyles_unstable: (state: Interactio
  */
 export declare const useInteractionTagSecondary_unstable: (props: InteractionTagSecondaryProps, ref: React_2.Ref<HTMLButtonElement>) => InteractionTagSecondaryState;
 
+/**
+ * Create the base state required to render InteractionTagSecondary, without design-only props.
+ *
+ * @param props - props from this instance of InteractionTagSecondary
+ * @param ref - reference to root HTMLButtonElement of InteractionTagSecondary
+ */
+export declare const useInteractionTagSecondaryBase_unstable: (props: InteractionTagSecondaryBaseProps, ref: React_2.Ref<HTMLButtonElement>) => InteractionTagSecondaryBaseState;
+
 export declare const useInteractionTagSecondaryStyles_unstable: (state: InteractionTagSecondaryState) => InteractionTagSecondaryState;
 
 /**
@@ -433,6 +508,14 @@ declare type UseTagAvatarContextValuesOptions = {
     avatarShape: AvatarShape;
 };
 
+/**
+ * Create the base state required to render Tag, without design-only props.
+ *
+ * @param props - props from this instance of Tag (without appearance, size, shape)
+ * @param ref - reference to root HTMLSpanElement or HTMLButtonElement of Tag
+ */
+export declare const useTagBase_unstable: (props: TagBaseProps, ref: React_2.Ref<HTMLSpanElement | HTMLButtonElement>) => TagBaseState;
+
 /**
  * Create the state required to render TagGroup.
  *
@@ -444,6 +527,14 @@ declare type UseTagAvatarContextValuesOptions = {
  */
 export declare const useTagGroup_unstable: (props: TagGroupProps, ref: React_2.Ref<HTMLDivElement>) => TagGroupState;
 
+/**
+ * Create the base state required to render TagGroup, without design-only props.
+ *
+ * @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 function useTagGroupContextValues_unstable(state: TagGroupState): TagGroupContextValues;
 
 /**

package/lib/InteractionTag.js

@@ -1 +1 @@
-export { InteractionTag, interactionTagClassNames, renderInteractionTag_unstable, useInteractionTagContextValues_unstable, useInteractionTagStyles_unstable, useInteractionTag_unstable } from './components/InteractionTag/index';
+export { InteractionTag, interactionTagClassNames, renderInteractionTag_unstable, useInteractionTagContextValues_unstable, useInteractionTagStyles_unstable, useInteractionTagBase_unstable, useInteractionTag_unstable } from './components/InteractionTag/index';

package/lib/InteractionTag.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/InteractionTag.ts"],"sourcesContent":["export type {\n  InteractionTagContextValues,\n  InteractionTagProps,\n  InteractionTagSlots,\n  InteractionTagState,\n} from './components/InteractionTag/index';\nexport {\n  InteractionTag,\n  interactionTagClassNames,\n  renderInteractionTag_unstable,\n  useInteractionTagContextValues_unstable,\n  useInteractionTagStyles_unstable,\n  useInteractionTag_unstable,\n} from './components/InteractionTag/index';\n"],"names":["InteractionTag","interactionTagClassNames","renderInteractionTag_unstable","useInteractionTagContextValues_unstable","useInteractionTagStyles_unstable","useInteractionTag_unstable"],"mappings":"AAMA,SACEA,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,uCAAuC,EACvCC,gCAAgC,EAChCC,0BAA0B,QACrB,oCAAoC"}
+{"version":3,"sources":["../src/InteractionTag.ts"],"sourcesContent":["export type {\n  InteractionTagBaseProps,\n  InteractionTagBaseState,\n  InteractionTagContextValues,\n  InteractionTagProps,\n  InteractionTagSlots,\n  InteractionTagState,\n} from './components/InteractionTag/index';\nexport {\n  InteractionTag,\n  interactionTagClassNames,\n  renderInteractionTag_unstable,\n  useInteractionTagContextValues_unstable,\n  useInteractionTagStyles_unstable,\n  useInteractionTagBase_unstable,\n  useInteractionTag_unstable,\n} from './components/InteractionTag/index';\n"],"names":["InteractionTag","interactionTagClassNames","renderInteractionTag_unstable","useInteractionTagContextValues_unstable","useInteractionTagStyles_unstable","useInteractionTagBase_unstable","useInteractionTag_unstable"],"mappings":"AAQA,SACEA,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,uCAAuC,EACvCC,gCAAgC,EAChCC,8BAA8B,EAC9BC,0BAA0B,QACrB,oCAAoC"}

package/lib/InteractionTagPrimary.js

@@ -1 +1 @@
-export { InteractionTagPrimary, interactionTagPrimaryClassNames, renderInteractionTagPrimary_unstable, useInteractionTagPrimaryStyles_unstable, useInteractionTagPrimary_unstable } from './components/InteractionTagPrimary/index';
+export { InteractionTagPrimary, interactionTagPrimaryClassNames, renderInteractionTagPrimary_unstable, useInteractionTagPrimaryStyles_unstable, useInteractionTagPrimaryBase_unstable, useInteractionTagPrimary_unstable } from './components/InteractionTagPrimary/index';

package/lib/InteractionTagPrimary.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/InteractionTagPrimary.ts"],"sourcesContent":["export type {\n  InteractionTagPrimaryContextValues,\n  InteractionTagPrimaryProps,\n  InteractionTagPrimarySlots,\n  InteractionTagPrimaryState,\n} from './components/InteractionTagPrimary/index';\nexport {\n  InteractionTagPrimary,\n  interactionTagPrimaryClassNames,\n  renderInteractionTagPrimary_unstable,\n  useInteractionTagPrimaryStyles_unstable,\n  useInteractionTagPrimary_unstable,\n} from './components/InteractionTagPrimary/index';\n"],"names":["InteractionTagPrimary","interactionTagPrimaryClassNames","renderInteractionTagPrimary_unstable","useInteractionTagPrimaryStyles_unstable","useInteractionTagPrimary_unstable"],"mappings":"AAMA,SACEA,qBAAqB,EACrBC,+BAA+B,EAC/BC,oCAAoC,EACpCC,uCAAuC,EACvCC,iCAAiC,QAC5B,2CAA2C"}
+{"version":3,"sources":["../src/InteractionTagPrimary.ts"],"sourcesContent":["export type {\n  InteractionTagPrimaryBaseProps,\n  InteractionTagPrimaryBaseState,\n  InteractionTagPrimaryContextValues,\n  InteractionTagPrimaryProps,\n  InteractionTagPrimarySlots,\n  InteractionTagPrimaryState,\n} from './components/InteractionTagPrimary/index';\nexport {\n  InteractionTagPrimary,\n  interactionTagPrimaryClassNames,\n  renderInteractionTagPrimary_unstable,\n  useInteractionTagPrimaryStyles_unstable,\n  useInteractionTagPrimaryBase_unstable,\n  useInteractionTagPrimary_unstable,\n} from './components/InteractionTagPrimary/index';\n"],"names":["InteractionTagPrimary","interactionTagPrimaryClassNames","renderInteractionTagPrimary_unstable","useInteractionTagPrimaryStyles_unstable","useInteractionTagPrimaryBase_unstable","useInteractionTagPrimary_unstable"],"mappings":"AAQA,SACEA,qBAAqB,EACrBC,+BAA+B,EAC/BC,oCAAoC,EACpCC,uCAAuC,EACvCC,qCAAqC,EACrCC,iCAAiC,QAC5B,2CAA2C"}

package/lib/InteractionTagSecondary.js

@@ -1 +1 @@
-export { InteractionTagSecondary, interactionTagSecondaryClassNames, renderInteractionTagSecondary_unstable, useInteractionTagSecondaryStyles_unstable, useInteractionTagSecondary_unstable } from './components/InteractionTagSecondary/index';
+export { InteractionTagSecondary, interactionTagSecondaryClassNames, renderInteractionTagSecondary_unstable, useInteractionTagSecondaryStyles_unstable, useInteractionTagSecondaryBase_unstable, useInteractionTagSecondary_unstable } from './components/InteractionTagSecondary/index';

package/lib/InteractionTagSecondary.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/InteractionTagSecondary.ts"],"sourcesContent":["export type {\n  InteractionTagSecondaryProps,\n  InteractionTagSecondarySlots,\n  InteractionTagSecondaryState,\n} from './components/InteractionTagSecondary/index';\nexport {\n  InteractionTagSecondary,\n  interactionTagSecondaryClassNames,\n  renderInteractionTagSecondary_unstable,\n  useInteractionTagSecondaryStyles_unstable,\n  useInteractionTagSecondary_unstable,\n} from './components/InteractionTagSecondary/index';\n"],"names":["InteractionTagSecondary","interactionTagSecondaryClassNames","renderInteractionTagSecondary_unstable","useInteractionTagSecondaryStyles_unstable","useInteractionTagSecondary_unstable"],"mappings":"AAKA,SACEA,uBAAuB,EACvBC,iCAAiC,EACjCC,sCAAsC,EACtCC,yCAAyC,EACzCC,mCAAmC,QAC9B,6CAA6C"}
+{"version":3,"sources":["../src/InteractionTagSecondary.ts"],"sourcesContent":["export type {\n  InteractionTagSecondaryBaseProps,\n  InteractionTagSecondaryBaseState,\n  InteractionTagSecondaryProps,\n  InteractionTagSecondarySlots,\n  InteractionTagSecondaryState,\n} from './components/InteractionTagSecondary/index';\nexport {\n  InteractionTagSecondary,\n  interactionTagSecondaryClassNames,\n  renderInteractionTagSecondary_unstable,\n  useInteractionTagSecondaryStyles_unstable,\n  useInteractionTagSecondaryBase_unstable,\n  useInteractionTagSecondary_unstable,\n} from './components/InteractionTagSecondary/index';\n"],"names":["InteractionTagSecondary","interactionTagSecondaryClassNames","renderInteractionTagSecondary_unstable","useInteractionTagSecondaryStyles_unstable","useInteractionTagSecondaryBase_unstable","useInteractionTagSecondary_unstable"],"mappings":"AAOA,SACEA,uBAAuB,EACvBC,iCAAiC,EACjCC,sCAAsC,EACtCC,yCAAyC,EACzCC,uCAAuC,EACvCC,mCAAmC,QAC9B,6CAA6C"}

package/lib/Tag.js

@@ -1 +1 @@
-export { Tag, renderTag_unstable, tagClassNames, useIconStyles, useMediaStyles, usePrimaryTextStyles, useSecondaryTextBaseClassName, useTagStyles_unstable, useTag_unstable } from './components/Tag/index';
+export { Tag, renderTag_unstable, tagClassNames, useIconStyles, useMediaStyles, usePrimaryTextStyles, useSecondaryTextBaseClassName, useTagStyles_unstable, useTagBase_unstable, useTag_unstable } from './components/Tag/index';

package/lib/Tag.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Tag.ts"],"sourcesContent":["export type { TagContextValues, TagProps, TagSlots, TagState } from './components/Tag/index';\nexport {\n  Tag,\n  renderTag_unstable,\n  tagClassNames,\n  useIconStyles,\n  useMediaStyles,\n  usePrimaryTextStyles,\n  useSecondaryTextBaseClassName,\n  useTagStyles_unstable,\n  useTag_unstable,\n} from './components/Tag/index';\n"],"names":["Tag","renderTag_unstable","tagClassNames","useIconStyles","useMediaStyles","usePrimaryTextStyles","useSecondaryTextBaseClassName","useTagStyles_unstable","useTag_unstable"],"mappings":"AACA,SACEA,GAAG,EACHC,kBAAkB,EAClBC,aAAa,EACbC,aAAa,EACbC,cAAc,EACdC,oBAAoB,EACpBC,6BAA6B,EAC7BC,qBAAqB,EACrBC,eAAe,QACV,yBAAyB"}
+{"version":3,"sources":["../src/Tag.ts"],"sourcesContent":["export type {\n  TagBaseProps,\n  TagBaseState,\n  TagContextValues,\n  TagProps,\n  TagSlots,\n  TagState,\n} from './components/Tag/index';\nexport {\n  Tag,\n  renderTag_unstable,\n  tagClassNames,\n  useIconStyles,\n  useMediaStyles,\n  usePrimaryTextStyles,\n  useSecondaryTextBaseClassName,\n  useTagStyles_unstable,\n  useTagBase_unstable,\n  useTag_unstable,\n} from './components/Tag/index';\n"],"names":["Tag","renderTag_unstable","tagClassNames","useIconStyles","useMediaStyles","usePrimaryTextStyles","useSecondaryTextBaseClassName","useTagStyles_unstable","useTagBase_unstable","useTag_unstable"],"mappings":"AAQA,SACEA,GAAG,EACHC,kBAAkB,EAClBC,aAAa,EACbC,aAAa,EACbC,cAAc,EACdC,oBAAoB,EACpBC,6BAA6B,EAC7BC,qBAAqB,EACrBC,mBAAmB,EACnBC,eAAe,QACV,yBAAyB"}

package/lib/TagGroup.js

@@ -1 +1 @@
-export { TagGroup, renderTagGroup_unstable, tagGroupClassNames, useTagGroupContextValues_unstable, useTagGroupStyles_unstable, useTagGroup_unstable } from './components/TagGroup/index';
+export { TagGroup, renderTagGroup_unstable, tagGroupClassNames, useTagGroupContextValues_unstable, useTagGroupStyles_unstable, useTagGroupBase_unstable, useTagGroup_unstable } from './components/TagGroup/index';

package/lib/TagGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/TagGroup.ts"],"sourcesContent":["export type { TagGroupContextValues, TagGroupProps, TagGroupSlots, TagGroupState } from './components/TagGroup/index';\nexport {\n  TagGroup,\n  renderTagGroup_unstable,\n  tagGroupClassNames,\n  useTagGroupContextValues_unstable,\n  useTagGroupStyles_unstable,\n  useTagGroup_unstable,\n} from './components/TagGroup/index';\n"],"names":["TagGroup","renderTagGroup_unstable","tagGroupClassNames","useTagGroupContextValues_unstable","useTagGroupStyles_unstable","useTagGroup_unstable"],"mappings":"AACA,SACEA,QAAQ,EACRC,uBAAuB,EACvBC,kBAAkB,EAClBC,iCAAiC,EACjCC,0BAA0B,EAC1BC,oBAAoB,QACf,8BAA8B"}
+{"version":3,"sources":["../src/TagGroup.ts"],"sourcesContent":["export type {\n  TagGroupBaseProps,\n  TagGroupBaseState,\n  TagGroupContextValues,\n  TagGroupProps,\n  TagGroupSlots,\n  TagGroupState,\n} from './components/TagGroup/index';\nexport {\n  TagGroup,\n  renderTagGroup_unstable,\n  tagGroupClassNames,\n  useTagGroupContextValues_unstable,\n  useTagGroupStyles_unstable,\n  useTagGroupBase_unstable,\n  useTagGroup_unstable,\n} from './components/TagGroup/index';\n"],"names":["TagGroup","renderTagGroup_unstable","tagGroupClassNames","useTagGroupContextValues_unstable","useTagGroupStyles_unstable","useTagGroupBase_unstable","useTagGroup_unstable"],"mappings":"AAQA,SACEA,QAAQ,EACRC,uBAAuB,EACvBC,kBAAkB,EAClBC,iCAAiC,EACjCC,0BAA0B,EAC1BC,wBAAwB,EACxBC,oBAAoB,QACf,8BAA8B"}

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

@@ -1,3 +1,3 @@
 /**
- * State used in rendering InteractionTag
+ * InteractionTag Base State - omits design-only state
  */ export { };

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"],"names":[],"mappings":"AA0DA;;CAEC,GACD,WAqBI"}
+{"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"}

package/lib/components/InteractionTag/index.js

@@ -1,5 +1,5 @@
 export { InteractionTag } from './InteractionTag';
 export { renderInteractionTag_unstable } from './renderInteractionTag';
-export { useInteractionTag_unstable } from './useInteractionTag';
+export { useInteractionTagBase_unstable, useInteractionTag_unstable } from './useInteractionTag';
 export { interactionTagClassNames, useInteractionTagStyles_unstable } from './useInteractionTagStyles.styles';
 export { useInteractionTagContextValues_unstable } from './useInteractionTagContextValues';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InteractionTag/index.ts"],"sourcesContent":["export { InteractionTag } from './InteractionTag';\nexport type {\n  InteractionTagContextValues,\n  InteractionTagProps,\n  InteractionTagSlots,\n  InteractionTagState,\n} from './InteractionTag.types';\nexport { renderInteractionTag_unstable } from './renderInteractionTag';\nexport { useInteractionTag_unstable } from './useInteractionTag';\nexport { interactionTagClassNames, useInteractionTagStyles_unstable } from './useInteractionTagStyles.styles';\nexport { useInteractionTagContextValues_unstable } from './useInteractionTagContextValues';\n"],"names":["InteractionTag","renderInteractionTag_unstable","useInteractionTag_unstable","interactionTagClassNames","useInteractionTagStyles_unstable","useInteractionTagContextValues_unstable"],"mappings":"AAAA,SAASA,cAAc,QAAQ,mBAAmB;AAOlD,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,wBAAwB,EAAEC,gCAAgC,QAAQ,mCAAmC;AAC9G,SAASC,uCAAuC,QAAQ,mCAAmC"}
+{"version":3,"sources":["../src/components/InteractionTag/index.ts"],"sourcesContent":["export { InteractionTag } from './InteractionTag';\nexport type {\n  InteractionTagBaseProps,\n  InteractionTagBaseState,\n  InteractionTagContextValues,\n  InteractionTagProps,\n  InteractionTagSlots,\n  InteractionTagState,\n} from './InteractionTag.types';\nexport { renderInteractionTag_unstable } from './renderInteractionTag';\nexport { useInteractionTagBase_unstable, useInteractionTag_unstable } from './useInteractionTag';\nexport { interactionTagClassNames, useInteractionTagStyles_unstable } from './useInteractionTagStyles.styles';\nexport { useInteractionTagContextValues_unstable } from './useInteractionTagContextValues';\n"],"names":["InteractionTag","renderInteractionTag_unstable","useInteractionTagBase_unstable","useInteractionTag_unstable","interactionTagClassNames","useInteractionTagStyles_unstable","useInteractionTagContextValues_unstable"],"mappings":"AAAA,SAASA,cAAc,QAAQ,mBAAmB;AASlD,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,8BAA8B,EAAEC,0BAA0B,QAAQ,sBAAsB;AACjG,SAASC,wBAAwB,EAAEC,gCAAgC,QAAQ,mCAAmC;AAC9G,SAASC,uCAAuC,QAAQ,mCAAmC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InteractionTag/renderInteractionTag.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { InteractionTagState, InteractionTagSlots, InteractionTagContextValues } from './InteractionTag.types';\nimport { InteractionTagContextProvider } from '../../contexts/interactionTagContext';\n\n/**\n * Render the final JSX of InteractionTag\n */\nexport const renderInteractionTag_unstable = (\n  state: InteractionTagState,\n  contextValues: InteractionTagContextValues,\n): JSXElement => {\n  assertSlots<InteractionTagSlots>(state);\n\n  return (\n    <InteractionTagContextProvider value={contextValues.interactionTag}>\n      <state.root />\n    </InteractionTagContextProvider>\n  );\n};\n"],"names":["assertSlots","InteractionTagContextProvider","renderInteractionTag_unstable","state","contextValues","value","interactionTag","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,6BAA6B,QAAQ,uCAAuC;AAErF;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEAJ,YAAiCG;IAEjC,qBACE,KAACF;QAA8BI,OAAOD,cAAcE,cAAc;kBAChE,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}
+{"version":3,"sources":["../src/components/InteractionTag/renderInteractionTag.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { InteractionTagBaseState, InteractionTagSlots, InteractionTagContextValues } from './InteractionTag.types';\nimport { InteractionTagContextProvider } from '../../contexts/interactionTagContext';\n\n/**\n * Render the final JSX of InteractionTag\n */\nexport const renderInteractionTag_unstable = (\n  state: InteractionTagBaseState,\n  contextValues: InteractionTagContextValues,\n): JSXElement => {\n  assertSlots<InteractionTagSlots>(state);\n\n  return (\n    <InteractionTagContextProvider value={contextValues.interactionTag}>\n      <state.root />\n    </InteractionTagContextProvider>\n  );\n};\n"],"names":["assertSlots","InteractionTagContextProvider","renderInteractionTag_unstable","state","contextValues","value","interactionTag","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,6BAA6B,QAAQ,uCAAuC;AAErF;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEAJ,YAAiCG;IAEjC,qBACE,KAACF;QAA8BI,OAAOD,cAAcE,cAAc;kBAChE,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}

package/lib/components/InteractionTag/useInteractionTag.js

@@ -3,28 +3,22 @@ import * as React from 'react';
 import { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';
 import { useTagGroupContext_unstable } from '../../contexts/tagGroupContext';
 /**
- * Create the state required to render InteractionTag.
- *
- * The returned state can be modified with hooks such as useInteractionTagStyles_unstable,
- * before being passed to renderInteractionTag_unstable.
+ * Create the base state required to render InteractionTag, without design-only props.
  *
- * @param props - props from this instance of InteractionTag
+ * @param props - props from this instance of InteractionTag (without appearance, size, shape)
  * @param ref - reference to root HTMLDivElement of InteractionTag
- */ export const useInteractionTag_unstable = (props, ref)=>{
-    const { handleTagDismiss, handleTagSelect, size: contextSize, disabled: contextDisabled, appearance: contextAppearance, selectedValues = [] } = useTagGroupContext_unstable();
+ */ export const useInteractionTagBase_unstable = (props, ref)=>{
+    const { handleTagDismiss, handleTagSelect, disabled: contextDisabled, selectedValues = [] } = useTagGroupContext_unstable();
     const id = useId('fui-InteractionTag-', props.id);
     const interactionTagPrimaryId = useId('fui-InteractionTagPrimary-');
-    const { appearance = contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : 'filled', disabled = false, selected = false, shape = 'rounded', size = contextSize, value = id } = props;
+    const { disabled = false, selected = false, value = id } = props;
     return {
-        appearance,
         disabled: contextDisabled ? true : disabled,
         handleTagDismiss,
         handleTagSelect,
         interactionTagPrimaryId,
         selected: selectedValues.includes(value) || selected,
         selectedValues,
-        shape,
-        size,
         value,
         components: {
             root: 'div'
@@ -39,3 +33,21 @@ import { useTagGroupContext_unstable } from '../../contexts/tagGroupContext';
         })
     };
 };
+/**
+ * Create the state required to render InteractionTag.
+ *
+ * The returned state can be modified with hooks such as useInteractionTagStyles_unstable,
+ * before being passed to renderInteractionTag_unstable.
+ *
+ * @param props - props from this instance of InteractionTag
+ * @param ref - reference to root HTMLDivElement of InteractionTag
+ */ export const useInteractionTag_unstable = (props, ref)=>{
+    const { size: contextSize, appearance: contextAppearance } = useTagGroupContext_unstable();
+    const { appearance = contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : 'filled', shape = 'rounded', size = contextSize } = props;
+    return {
+        ...useInteractionTagBase_unstable(props, ref),
+        appearance,
+        shape,
+        size
+    };
+};

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 { InteractionTagProps, InteractionTagState } from './InteractionTag.types';\nimport { useTagGroupContext_unstable } from '../../contexts/tagGroupContext';\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 {\n    handleTagDismiss,\n    handleTagSelect,\n    size: contextSize,\n    disabled: contextDisabled,\n    appearance: contextAppearance,\n    selectedValues = [],\n  } = useTagGroupContext_unstable();\n\n  const id = useId('fui-InteractionTag-', props.id);\n\n  const interactionTagPrimaryId = useId('fui-InteractionTagPrimary-');\n\n  const {\n    appearance = contextAppearance ?? 'filled',\n    disabled = false,\n    selected = false,\n    shape = 'rounded',\n    size = contextSize,\n    value = id,\n  } = props;\n\n  return {\n    appearance,\n    disabled: contextDisabled ? true : disabled,\n    handleTagDismiss,\n    handleTagSelect,\n    interactionTagPrimaryId,\n    selected: selectedValues.includes(value) || selected,\n    selectedValues,\n    shape,\n    size,\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"],"names":["React","getIntrinsicElementProps","useId","slot","useTagGroupContext_unstable","useInteractionTag_unstable","props","ref","handleTagDismiss","handleTagSelect","size","contextSize","disabled","contextDisabled","appearance","contextAppearance","selectedValues","id","interactionTagPrimaryId","selected","shape","value","includes","components","root","always","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAElF,SAASC,2BAA2B,QAAQ,iCAAiC;AAE7E;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EACJC,gBAAgB,EAChBC,eAAe,EACfC,MAAMC,WAAW,EACjBC,UAAUC,eAAe,EACzBC,YAAYC,iBAAiB,EAC7BC,iBAAiB,EAAE,EACpB,GAAGZ;IAEJ,MAAMa,KAAKf,MAAM,uBAAuBI,MAAMW,EAAE;IAEhD,MAAMC,0BAA0BhB,MAAM;IAEtC,MAAM,EACJY,aAAaC,8BAAAA,+BAAAA,oBAAqB,QAAQ,EAC1CH,WAAW,KAAK,EAChBO,WAAW,KAAK,EAChBC,QAAQ,SAAS,EACjBV,OAAOC,WAAW,EAClBU,QAAQJ,EAAE,EACX,GAAGX;IAEJ,OAAO;QACLQ;QACAF,UAAUC,kBAAkB,OAAOD;QACnCJ;QACAC;QACAS;QACAC,UAAUH,eAAeM,QAAQ,CAACD,UAAUF;QAC5CH;QACAI;QACAV;QACAW;QAEAE,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMrB,KAAKsB,MAAM,CACfxB,yBAAyB,OAAO;YAC9BM;YACA,GAAGD,KAAK;YACRM,UAAUC,kBAAkB,OAAOD;YACnCK;QACF,IACA;YAAES,aAAa;QAAM;IAEzB;AACF,EAAE"}
+{"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"}

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

@@ -1,3 +1,3 @@
 /**
- * State used in rendering InteractionTagPrimary
+ * InteractionTagPrimary Base State - omits design-only state derived from context
  */ export { };

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"],"names":[],"mappings":"AA2CA;;CAEC,GACD,WAKmC"}
+{"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"}

package/lib/components/InteractionTagPrimary/index.js

@@ -1,4 +1,4 @@
 export { InteractionTagPrimary } from './InteractionTagPrimary';
 export { renderInteractionTagPrimary_unstable } from './renderInteractionTagPrimary';
-export { useInteractionTagPrimary_unstable } from './useInteractionTagPrimary';
+export { useInteractionTagPrimaryBase_unstable, useInteractionTagPrimary_unstable } from './useInteractionTagPrimary';
 export { interactionTagPrimaryClassNames, useInteractionTagPrimaryStyles_unstable } from './useInteractionTagPrimaryStyles.styles';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InteractionTagPrimary/index.ts"],"sourcesContent":["export { InteractionTagPrimary } from './InteractionTagPrimary';\nexport type {\n  InteractionTagPrimaryContextValues,\n  InteractionTagPrimaryProps,\n  InteractionTagPrimarySlots,\n  InteractionTagPrimaryState,\n} from './InteractionTagPrimary.types';\nexport { renderInteractionTagPrimary_unstable } from './renderInteractionTagPrimary';\nexport { useInteractionTagPrimary_unstable } from './useInteractionTagPrimary';\nexport {\n  interactionTagPrimaryClassNames,\n  useInteractionTagPrimaryStyles_unstable,\n} from './useInteractionTagPrimaryStyles.styles';\n"],"names":["InteractionTagPrimary","renderInteractionTagPrimary_unstable","useInteractionTagPrimary_unstable","interactionTagPrimaryClassNames","useInteractionTagPrimaryStyles_unstable"],"mappings":"AAAA,SAASA,qBAAqB,QAAQ,0BAA0B;AAOhE,SAASC,oCAAoC,QAAQ,gCAAgC;AACrF,SAASC,iCAAiC,QAAQ,6BAA6B;AAC/E,SACEC,+BAA+B,EAC/BC,uCAAuC,QAClC,0CAA0C"}
+{"version":3,"sources":["../src/components/InteractionTagPrimary/index.ts"],"sourcesContent":["export { InteractionTagPrimary } from './InteractionTagPrimary';\nexport type {\n  InteractionTagPrimaryBaseProps,\n  InteractionTagPrimaryBaseState,\n  InteractionTagPrimaryContextValues,\n  InteractionTagPrimaryProps,\n  InteractionTagPrimarySlots,\n  InteractionTagPrimaryState,\n} from './InteractionTagPrimary.types';\nexport { renderInteractionTagPrimary_unstable } from './renderInteractionTagPrimary';\nexport { useInteractionTagPrimaryBase_unstable, useInteractionTagPrimary_unstable } from './useInteractionTagPrimary';\nexport {\n  interactionTagPrimaryClassNames,\n  useInteractionTagPrimaryStyles_unstable,\n} from './useInteractionTagPrimaryStyles.styles';\n"],"names":["InteractionTagPrimary","renderInteractionTagPrimary_unstable","useInteractionTagPrimaryBase_unstable","useInteractionTagPrimary_unstable","interactionTagPrimaryClassNames","useInteractionTagPrimaryStyles_unstable"],"mappings":"AAAA,SAASA,qBAAqB,QAAQ,0BAA0B;AAShE,SAASC,oCAAoC,QAAQ,gCAAgC;AACrF,SAASC,qCAAqC,EAAEC,iCAAiC,QAAQ,6BAA6B;AACtH,SACEC,+BAA+B,EAC/BC,uCAAuC,QAClC,0CAA0C"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InteractionTagPrimary/renderInteractionTagPrimary.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type {\n  InteractionTagPrimaryState,\n  InteractionTagPrimarySlots,\n  InteractionTagPrimaryContextValues,\n} from './InteractionTagPrimary.types';\nimport { AvatarContextProvider } from '@fluentui/react-avatar';\n\n/**\n * Render the final JSX of InteractionTagPrimary\n */\nexport const renderInteractionTagPrimary_unstable = (\n  state: InteractionTagPrimaryState,\n  contextValues: InteractionTagPrimaryContextValues,\n): JSXElement => {\n  assertSlots<InteractionTagPrimarySlots>(state);\n\n  return (\n    <state.root>\n      {state.media && (\n        <AvatarContextProvider value={contextValues.avatar}>\n          <state.media />\n        </AvatarContextProvider>\n      )}\n      {state.icon && <state.icon />}\n      {state.primaryText && <state.primaryText />}\n      {state.secondaryText && <state.secondaryText />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","AvatarContextProvider","renderInteractionTagPrimary_unstable","state","contextValues","root","media","value","avatar","icon","primaryText","secondaryText"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAOxD,SAASC,qBAAqB,QAAQ,yBAAyB;AAE/D;;CAEC,GACD,OAAO,MAAMC,uCAAuC,CAClDC,OACAC;IAEAJ,YAAwCG;IAExC,qBACE,MAACA,MAAME,IAAI;;YACRF,MAAMG,KAAK,kBACV,KAACL;gBAAsBM,OAAOH,cAAcI,MAAM;0BAChD,cAAA,KAACL,MAAMG,KAAK;;YAGfH,MAAMM,IAAI,kBAAI,KAACN,MAAMM,IAAI;YACzBN,MAAMO,WAAW,kBAAI,KAACP,MAAMO,WAAW;YACvCP,MAAMQ,aAAa,kBAAI,KAACR,MAAMQ,aAAa;;;AAGlD,EAAE"}
+{"version":3,"sources":["../src/components/InteractionTagPrimary/renderInteractionTagPrimary.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type {\n  InteractionTagPrimaryBaseState,\n  InteractionTagPrimarySlots,\n  InteractionTagPrimaryContextValues,\n} from './InteractionTagPrimary.types';\nimport { AvatarContextProvider } from '@fluentui/react-avatar';\n\n/**\n * Render the final JSX of InteractionTagPrimary\n */\nexport const renderInteractionTagPrimary_unstable = (\n  state: InteractionTagPrimaryBaseState,\n  contextValues: InteractionTagPrimaryContextValues,\n): JSXElement => {\n  assertSlots<InteractionTagPrimarySlots>(state);\n\n  return (\n    <state.root>\n      {state.media && (\n        <AvatarContextProvider value={contextValues.avatar}>\n          <state.media />\n        </AvatarContextProvider>\n      )}\n      {state.icon && <state.icon />}\n      {state.primaryText && <state.primaryText />}\n      {state.secondaryText && <state.secondaryText />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","AvatarContextProvider","renderInteractionTagPrimary_unstable","state","contextValues","root","media","value","avatar","icon","primaryText","secondaryText"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAOxD,SAASC,qBAAqB,QAAQ,yBAAyB;AAE/D;;CAEC,GACD,OAAO,MAAMC,uCAAuC,CAClDC,OACAC;IAEAJ,YAAwCG;IAExC,qBACE,MAACA,MAAME,IAAI;;YACRF,MAAMG,KAAK,kBACV,KAACL;gBAAsBM,OAAOH,cAAcI,MAAM;0BAChD,cAAA,KAACL,MAAMG,KAAK;;YAGfH,MAAMM,IAAI,kBAAI,KAACN,MAAMM,IAAI;YACzBN,MAAMO,WAAW,kBAAI,KAACP,MAAMO,WAAW;YACvCP,MAAMQ,aAAa,kBAAI,KAACR,MAAMQ,aAAa;;;AAGlD,EAAE"}

package/lib/components/InteractionTagPrimary/useInteractionTagPrimary.js

@@ -12,15 +12,12 @@ const avatarShapeMap = {
     circular: 'circular'
 };
 /**
- * Create the state required to render InteractionTagPrimary.
- *
- * The returned state can be modified with hooks such as useInteractionTagPrimaryStyles_unstable,
- * before being passed to renderInteractionTagPrimary_unstable.
+ * Create the base state required to render InteractionTagPrimary, without design-only props.
  *
  * @param props - props from this instance of InteractionTagPrimary
  * @param ref - reference to root HTMLButtonElement of InteractionTagPrimary
- */ export const useInteractionTagPrimary_unstable = (props, ref)=>{
-    const { appearance, disabled, handleTagSelect, interactionTagPrimaryId, selected: contextSelected, selectedValues, shape, size, value } = useInteractionTagContext_unstable();
+ */ export const useInteractionTagPrimaryBase_unstable = (props, ref)=>{
+    const { disabled, handleTagSelect, interactionTagPrimaryId, selected: contextSelected, selectedValues, value } = useInteractionTagContext_unstable();
     const { hasSecondaryAction = false } = props;
     const onClick = useEventCallback(mergeCallbacks(props === null || props === void 0 ? void 0 : props.onClick, (event)=>handleTagSelect === null || handleTagSelect === void 0 ? void 0 : handleTagSelect(event, {
             type: 'click',
@@ -29,14 +26,9 @@ const avatarShapeMap = {
             selectedValues
         })));
     return {
-        appearance,
-        avatarShape: avatarShapeMap[shape],
-        avatarSize: avatarSizeMap[size],
         disabled,
         hasSecondaryAction,
         selected: contextSelected,
-        shape,
-        size,
         components: {
             root: 'button',
             media: 'span',
@@ -74,3 +66,22 @@ const avatarShapeMap = {
         })
     };
 };
+/**
+ * Create the state required to render InteractionTagPrimary.
+ *
+ * The returned state can be modified with hooks such as useInteractionTagPrimaryStyles_unstable,
+ * before being passed to renderInteractionTagPrimary_unstable.
+ *
+ * @param props - props from this instance of InteractionTagPrimary
+ * @param ref - reference to root HTMLButtonElement of InteractionTagPrimary
+ */ export const useInteractionTagPrimary_unstable = (props, ref)=>{
+    const { appearance, shape, size } = useInteractionTagContext_unstable();
+    return {
+        ...useInteractionTagPrimaryBase_unstable(props, ref),
+        appearance,
+        avatarShape: avatarShapeMap[shape],
+        avatarSize: avatarSizeMap[size],
+        shape,
+        size
+    };
+};

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 { InteractionTagPrimaryProps, InteractionTagPrimaryState } 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 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 {\n    appearance,\n    disabled,\n    handleTagSelect,\n    interactionTagPrimaryId,\n    selected: contextSelected,\n    selectedValues,\n    shape,\n    size,\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    appearance,\n    avatarShape: avatarShapeMap[shape],\n    avatarSize: avatarSizeMap[size],\n    disabled,\n    hasSecondaryAction,\n    selected: contextSelected,\n    shape,\n    size,\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"],"names":["React","getIntrinsicElementProps","mergeCallbacks","slot","useEventCallback","useInteractionTagContext_unstable","avatarSizeMap","medium","small","avatarShapeMap","rounded","circular","useInteractionTagPrimary_unstable","props","ref","appearance","disabled","handleTagSelect","interactionTagPrimaryId","selected","contextSelected","selectedValues","shape","size","value","hasSecondaryAction","onClick","event","type","avatarShape","avatarSize","components","root","media","icon","primaryText","secondaryText","always","id","undefined","elementType","optional","renderByDefault","defaultProps","children"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,cAAc,EAAEC,IAAI,EAAEC,gBAAgB,QAAQ,4BAA4B;AAE7G,SAASC,iCAAiC,QAAQ,uCAAuC;AAEzF,MAAMC,gBAAgB;IACpBC,QAAQ;IACRC,OAAO;IACP,eAAe;AACjB;AAEA,MAAMC,iBAAiB;IACrBC,SAAS;IACTC,UAAU;AACZ;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,oCAAoC,CAC/CC,OACAC;IAEA,MAAM,EACJC,UAAU,EACVC,QAAQ,EACRC,eAAe,EACfC,uBAAuB,EACvBC,UAAUC,eAAe,EACzBC,cAAc,EACdC,KAAK,EACLC,IAAI,EACJC,KAAK,EACN,GAAGnB;IACJ,MAAM,EAAEoB,qBAAqB,KAAK,EAAE,GAAGZ;IAEvC,MAAMa,UAAUtB,iBACdF,eAAeW,kBAAAA,4BAAAA,MAAOa,OAAO,EAAE,CAACC,QAC9BV,4BAAAA,sCAAAA,gBAAkBU,OAAO;YAAEC,MAAM;YAASD;YAAOH;YAAOH;QAAe;IAI3E,OAAO;QACLN;QACAc,aAAapB,cAAc,CAACa,MAAM;QAClCQ,YAAYxB,aAAa,CAACiB,KAAK;QAC/BP;QACAS;QACAN,UAAUC;QACVE;QACAC;QAEAQ,YAAY;YACVC,MAAM;YACNC,OAAO;YACPC,MAAM;YACNC,aAAa;YACbC,eAAe;QACjB;QAEAJ,MAAM7B,KAAKkC,MAAM,CACfpC,yBAAyB,UAAU;YACjCa;YACAE;YACAsB,IAAIpB;YACJ,GAAID,oBAAoBsB,aAAa;gBAAE,gBAAgBnB;YAAgB,CAAC;YACxEM;YACA,GAAGb,KAAK;QACV,IACA;YAAE2B,aAAa;QAAS;QAG1BP,OAAO9B,KAAKsC,QAAQ,CAAC5B,MAAMoB,KAAK,EAAE;YAAEO,aAAa;QAAO;QACxDN,MAAM/B,KAAKsC,QAAQ,CAAC5B,MAAMqB,IAAI,EAAE;YAAEM,aAAa;QAAO;QACtDL,aAAahC,KAAKsC,QAAQ,CAAC5B,MAAMsB,WAAW,EAAE;YAC5CO,iBAAiB;YACjBC,cAAc;gBACZC,UAAU/B,MAAM+B,QAAQ;YAC1B;YACAJ,aAAa;QACf;QACAJ,eAAejC,KAAKsC,QAAQ,CAAC5B,MAAMuB,aAAa,EAAE;YAAEI,aAAa;QAAO;IAC1E;AACF,EAAE"}
+{"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"}

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

@@ -1,3 +1,3 @@
 /**
- * State used in rendering InteractionTagSecondary
+ * InteractionTagSecondary Base State - omits design-only state derived from context
  */ export { };

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"],"names":[],"mappings":"AAYA;;CAEC,GACD,WACwG"}
+{"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"}

package/lib/components/InteractionTagSecondary/index.js

@@ -1,4 +1,4 @@
 export { InteractionTagSecondary } from './InteractionTagSecondary';
 export { renderInteractionTagSecondary_unstable } from './renderInteractionTagSecondary';
-export { useInteractionTagSecondary_unstable } from './useInteractionTagSecondary';
+export { useInteractionTagSecondaryBase_unstable, useInteractionTagSecondary_unstable } from './useInteractionTagSecondary';
 export { interactionTagSecondaryClassNames, useInteractionTagSecondaryStyles_unstable } from './useInteractionTagSecondaryStyles.styles';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InteractionTagSecondary/index.ts"],"sourcesContent":["export { InteractionTagSecondary } from './InteractionTagSecondary';\nexport type {\n  InteractionTagSecondaryProps,\n  InteractionTagSecondarySlots,\n  InteractionTagSecondaryState,\n} from './InteractionTagSecondary.types';\nexport { renderInteractionTagSecondary_unstable } from './renderInteractionTagSecondary';\nexport { useInteractionTagSecondary_unstable } from './useInteractionTagSecondary';\nexport {\n  interactionTagSecondaryClassNames,\n  useInteractionTagSecondaryStyles_unstable,\n} from './useInteractionTagSecondaryStyles.styles';\n"],"names":["InteractionTagSecondary","renderInteractionTagSecondary_unstable","useInteractionTagSecondary_unstable","interactionTagSecondaryClassNames","useInteractionTagSecondaryStyles_unstable"],"mappings":"AAAA,SAASA,uBAAuB,QAAQ,4BAA4B;AAMpE,SAASC,sCAAsC,QAAQ,kCAAkC;AACzF,SAASC,mCAAmC,QAAQ,+BAA+B;AACnF,SACEC,iCAAiC,EACjCC,yCAAyC,QACpC,4CAA4C"}
+{"version":3,"sources":["../src/components/InteractionTagSecondary/index.ts"],"sourcesContent":["export { InteractionTagSecondary } from './InteractionTagSecondary';\nexport type {\n  InteractionTagSecondaryBaseProps,\n  InteractionTagSecondaryBaseState,\n  InteractionTagSecondaryProps,\n  InteractionTagSecondarySlots,\n  InteractionTagSecondaryState,\n} from './InteractionTagSecondary.types';\nexport { renderInteractionTagSecondary_unstable } from './renderInteractionTagSecondary';\nexport {\n  useInteractionTagSecondaryBase_unstable,\n  useInteractionTagSecondary_unstable,\n} from './useInteractionTagSecondary';\nexport {\n  interactionTagSecondaryClassNames,\n  useInteractionTagSecondaryStyles_unstable,\n} from './useInteractionTagSecondaryStyles.styles';\n"],"names":["InteractionTagSecondary","renderInteractionTagSecondary_unstable","useInteractionTagSecondaryBase_unstable","useInteractionTagSecondary_unstable","interactionTagSecondaryClassNames","useInteractionTagSecondaryStyles_unstable"],"mappings":"AAAA,SAASA,uBAAuB,QAAQ,4BAA4B;AAQpE,SAASC,sCAAsC,QAAQ,kCAAkC;AACzF,SACEC,uCAAuC,EACvCC,mCAAmC,QAC9B,+BAA+B;AACtC,SACEC,iCAAiC,EACjCC,yCAAyC,QACpC,4CAA4C"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InteractionTagSecondary/renderInteractionTagSecondary.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { InteractionTagSecondaryState, InteractionTagSecondarySlots } from './InteractionTagSecondary.types';\n\n/**\n * Render the final JSX of InteractionTagSecondary\n */\nexport const renderInteractionTagSecondary_unstable = (state: InteractionTagSecondaryState): JSXElement => {\n  assertSlots<InteractionTagSecondarySlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderInteractionTagSecondary_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,yCAAyC,CAACC;IACrDF,YAA0CE;IAE1C,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}
+{"version":3,"sources":["../src/components/InteractionTagSecondary/renderInteractionTagSecondary.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { InteractionTagSecondaryBaseState, InteractionTagSecondarySlots } from './InteractionTagSecondary.types';\n\n/**\n * Render the final JSX of InteractionTagSecondary\n */\nexport const renderInteractionTagSecondary_unstable = (state: InteractionTagSecondaryBaseState): JSXElement => {\n  assertSlots<InteractionTagSecondarySlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderInteractionTagSecondary_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,yCAAyC,CAACC;IACrDF,YAA0CE;IAE1C,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}